/* Layout and components, Zeto-style (docs/ZETO-DESIGN.md). Font sizes in rem (follow phone text size), spacing in px. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; background: var(--ground); }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--ground); min-height: 100vh; line-height: 1.4; overflow-wrap: break-word; font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--navy-3); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
.muted { color: var(--muted); }
.small { font-size: 0.8125rem; }
.tiny { font-size: 0.75rem; }
.b { font-weight: 700; }
.right { text-align: right; }
.nowrap { white-space: nowrap; overflow-wrap: normal; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.row.top { align-items: flex-start; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.between.wrap, .linefoot { flex-wrap: wrap; justify-content: space-between; row-gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack.tight { gap: 6px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mt { margin-top: 14px; } .mt2 { margin-top: 22px; } .mb { margin-bottom: 14px; }
.hide { display: none !important; }
/* small capital section label, sits on the ground above a card */
.sec { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 22px 4px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sec a, .sec button { font-size: 0.78rem; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--navy-3); background: none; border: 0; padding: 0; cursor: pointer; }
.stack > .sec { margin: 8px 4px -4px; }

/* ---------- shell: big curved header, cards rise over it ---------- */
.shell { min-height: 100vh; }
.ph { position: relative; color: #fff; background: var(--brand-grad); border-radius: 0 0 36px 36px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 20px 50px; overflow: hidden; }
.ph::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 220px at 92% -20%, rgba(255, 255, 255, 0.16), transparent 70%), radial-gradient(360px 200px at -10% 120%, rgba(255, 255, 255, 0.07), transparent 70%); }
.ph > * { position: relative; }
.ph .phbar { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.ph .hi { font-size: 0.875rem; opacity: 0.78; margin-top: 10px; font-weight: 500; }
.ph .tr { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.ph h1 { font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; min-width: 0; }
.ph .hpill { flex: 0 0 auto; background: rgba(255, 255, 255, 0.16); padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.ph .hsub { font-size: 0.85rem; opacity: 0.8; margin-top: 4px; }
.mark { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  font-weight: 900; font-style: italic; font-size: 17px; letter-spacing: -0.04em; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.content { position: relative; z-index: 1; margin: -28px auto 0; padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 112px); max-width: 1240px; }
/* when the header has scrolled away, a thin glass strip keeps the phone's clock and battery readable */
.sbar { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); z-index: 25; pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
  background: rgba(245, 246, 248, 0.82); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); }
body.scrolled .sbar { opacity: 1; }
:root[data-theme="dark"] .sbar { background: rgba(14, 16, 20, 0.82); }
.iconbtn { border: 0; background: rgba(255, 255, 255, 0.14); color: inherit; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; position: relative; flex: 0 0 auto; cursor: pointer; }
.iconbtn.plain { background: transparent; }
.iconbtn .dot { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 0.6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 0 0 2px #163a6b; }
.logo { font-weight: 900; letter-spacing: 0.06em; font-size: 1.5rem; line-height: 1; font-style: italic; }
.logo small { display: block; font-size: 0.42rem; letter-spacing: 0.32em; font-style: normal; font-weight: 700; opacity: 0.8; margin-top: 4px; }
/* floating bottom bar, active tab sits in a soft bubble */
.tabbar { position: fixed; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); z-index: 30; display: flex; justify-content: space-around; gap: 2px;
  background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-radius: 28px; padding: 6px; box-shadow: 0 10px 32px rgba(11, 37, 69, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.7); max-width: 560px; margin: 0 auto; }
.tabbar a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: clamp(10px, 0.66rem, 11.5px); font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; padding: 7px 2px 6px; border-radius: 22px; text-align: center; line-height: 1.15; transition: background 0.2s ease, color 0.2s ease; }
.tabbar a > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tabbar a { position: relative; z-index: 1; }
.tabbar a.on { color: var(--navy); font-weight: 700; }
.tabbar a.hover { color: var(--navy); }
.tabbar.plain a { -webkit-tap-highlight-color: transparent; border-radius: 22px; padding-top: 6px; padding-bottom: 6px; }
.tabbar.plain a.on { background: rgba(14, 42, 77, 0.08); }
:root[data-theme="dark"] .tabbar.plain a.on { background: rgba(255, 255, 255, 0.12); }
/* Liquid Glass tab bar: soft pill at rest; a clear magnifying glass lens while the finger is on the bar */
.tabbar .pill { position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; z-index: 0; border-radius: 22px; pointer-events: none;
  background: rgba(11, 37, 69, 0.07); transition: opacity 0.18s ease; }
.tabbar .pill.anim { transition: transform 0.5s cubic-bezier(0.3, 1.35, 0.45, 1), width 0.5s cubic-bezier(0.3, 1.35, 0.45, 1), opacity 0.25s ease 0.12s; }
.tabbar .lens { position: absolute; top: -7px; bottom: -7px; left: 0; width: 0; z-index: 2; border-radius: 999px; pointer-events: none; overflow: hidden;
  opacity: 0; transform-origin: 50% 50%; background: rgba(250, 251, 253, 0.78);
  backdrop-filter: blur(7px) saturate(170%) brightness(1.05); -webkit-backdrop-filter: blur(7px) saturate(170%) brightness(1.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(11, 37, 69, 0.10), 0 10px 26px rgba(11, 37, 69, 0.20), 0 1px 3px rgba(11, 37, 69, 0.14); }
/* thin rainbow rim where the glass bends the light, and a bright highlight on top */
.tabbar .lens::after { content: ""; position: absolute; left: 14%; right: 14%; top: 3px; height: 38%; z-index: 2; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); }
.tabbar .lens.up { opacity: 1; transition: opacity 0.12s ease, transform 0.09s linear, width 0.2s ease; }
.tabbar .lens.drop { opacity: 0; transition: opacity 0.28s ease 0.05s, transform 0.3s cubic-bezier(0.3, 1.35, 0.45, 1); }
/* the magnified copy of the tabs seen through the glass */
.tabbar .lensrow { position: absolute; top: 7px; display: flex; justify-content: space-around; gap: 2px; padding: 6px; transform: scale(1.16); color: var(--muted); }
.tabbar .lensrow .lt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: clamp(10px, 0.66rem, 11.5px); font-weight: 600;
  letter-spacing: -0.01em; white-space: nowrap; padding: 7px 2px 6px; line-height: 1.15; text-align: center; }
.tabbar .lensrow .lt.on { color: var(--navy); font-weight: 700; }
:root[data-theme="dark"] .tabbar .pill { background: rgba(255, 255, 255, 0.12); }
:root[data-theme="dark"] .tabbar .lens { background: rgba(255, 255, 255, 0.10); }
:root[data-theme="dark"] .tabbar .lensrow, :root[data-theme="dark"] .tabbar .lensrow .lt.on { color: #fff; }
:root[data-theme="dark"] .tabbar { background: rgba(23, 26, 32, 0.88); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
:root[data-theme="dark"] .tabbar a.on { color: #fff; }
.side { display: none; }
@media (min-width: 960px) {
  .shell.wide { display: grid; grid-template-columns: 252px minmax(0, 1fr); }
  .shell.wide .side { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 22px 14px; background: var(--card); box-shadow: 1px 0 0 var(--line); color: var(--ink-2); }
  .side .logo { color: var(--navy) !important; }
  .side .vitologo { content: url(logo-dark.png); }
  :root[data-theme="dark"] .side .vitologo { content: url(logo-light.png); }
  .side a { color: var(--ink-2); display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; font-size: 0.9rem; font-weight: 600; }
  .side a:hover { background: var(--grey-bg); }
  .side a.on { background: var(--soft); color: var(--navy); }
  .side .group { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 18px 12px 6px; }
  .shell.wide .tabbar { display: none; }
  .shell.wide .content { padding: 0 28px 48px; }
  .shell.wide .ph { margin: 0 0 0; padding-left: 32px; padding-right: 32px; border-radius: 0 0 36px 36px; }
}

/* ---------- cards: white, no outline, soft shadow ---------- */
.card { background: var(--card); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; min-width: 0; }
.card.pad0 { padding: 0; overflow: hidden; }
.card h3, .card .h3 { font-size: 1.0625rem; font-weight: 700; }
.card .h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.card.hero { background: var(--card); color: var(--ink); }
.card.hero .muted { color: var(--muted); }
.card.promo { background: var(--soft); color: var(--ink); box-shadow: none; }
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat .v { font-size: min(1.45rem, 5.4vw); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.stat .l { font-size: 0.75rem; color: var(--muted); font-weight: 500; }
.card.hero .stat .l { color: var(--muted); }
.card.hero .grid2 { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.card.hero .grid2 > .stat { flex: 1 1 calc(50% - 12px); min-width: max-content; }
/* one card holding several numbers, split by thin dividers */
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.stats > * { padding: 2px 12px; border-left: 1px solid var(--line); }
.stats > :first-child { border-left: 0; padding-left: 0; }
.tap { cursor: pointer; transition: opacity 0.15s ease, transform 0.15s ease; }
.tap:active { opacity: 0.75; }
.kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-3); }

/* ---------- tiles (home actions): white, icon in a soft circle ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: 16px 6px 14px; text-align: center; color: var(--ink); font-size: 0.78rem; font-weight: 700; line-height: 1.2; }
.tile .ic { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--soft) !important; color: var(--navy) !important; }
:root[data-theme="dark"] .tile .ic { color: var(--soft-ink) !important; }
.c-blue { background: var(--blue-bg); color: var(--blue); } .c-green { background: var(--green-bg); color: var(--green); }
.c-red { background: var(--red-bg); color: var(--red); } .c-orange { background: var(--orange-bg); color: var(--orange); }
.c-purple { background: var(--purple-bg); color: var(--purple); } .c-grey { background: var(--grey-bg); color: var(--ink-2); }

/* ---------- chips: pale tint, darker text, small dot ---------- */
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: var(--grey-bg); color: var(--ink-2); }
.chip.green, .chip.red, .chip.orange, .chip.blue, .chip.purple { }
.chip.green::before, .chip.red::before, .chip.orange::before, .chip.blue::before, .chip.purple::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.chip.x::before, .chip.nodot::before { display: none; }
.chip.green { background: var(--green-bg); color: var(--green); } .chip.red { background: var(--red-bg); color: var(--red); }
.chip.orange { background: var(--orange-bg); color: var(--orange); } .chip.blue { background: var(--blue-bg); color: var(--blue); }
.chip.purple { background: var(--purple-bg); color: var(--purple); } .chip.grey { background: var(--grey-bg); color: var(--ink-2); }
.chip.x { cursor: pointer; padding-right: 8px; border: 0; }
.pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill { border: 0; background: var(--card); padding: 8px 16px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; white-space: nowrap; cursor: pointer; color: var(--ink-2); box-shadow: 0 1px 4px rgba(11, 37, 69, 0.08); }
.pill.on { background: var(--navy); color: #fff; }
.card .pill { background: var(--grey-bg); box-shadow: none; }
.card .pill.on { background: var(--navy); color: #fff; }
.seg { display: flex; background: var(--grey-bg); padding: 4px; border-radius: 999px; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: 1 0 auto; white-space: nowrap; border: 0; background: transparent; padding: 9px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); cursor: pointer; min-width: 0; line-height: 1.2; transition: background 0.2s ease; }
.seg button.on { background: var(--navy); color: #fff; font-weight: 700; }

/* ---------- buttons: pills ---------- */
.btn { border: 0; border-radius: 999px; padding: 12px 20px; min-height: 48px; font-weight: 700; font-size: 0.94rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand-grad); color: #fff; text-align: center; line-height: 1.2; box-shadow: 0 6px 16px rgba(11, 37, 69, 0.18); transition: opacity 0.15s ease; }
.btn:active { opacity: 0.82; }
.btn.block { width: 100%; min-height: 52px; }
.btn.green, .btn.blue, .btn.orange { background: var(--brand-grad); }
.btn.red { background: var(--red-bg); color: var(--red); box-shadow: none; }
.btn.ghost { background: var(--grey-bg); color: var(--ink); border: 0; box-shadow: none; }
.btn.soft { background: var(--card); color: var(--navy); box-shadow: 0 1px 4px rgba(11, 37, 69, 0.1); }
:root[data-theme="dark"] .btn.soft { color: var(--soft-ink); }
.btn.sm { min-height: 36px; padding: 7px 14px; font-size: 0.8rem; box-shadow: none; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btns > .btn { flex: 1 1 140px; }

/* ---------- fields ---------- */
label.f, div.f { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; color: var(--muted); font-weight: 600; min-width: 0; }
.in, select.in, textarea.in { width: 100%; border: 1.5px solid transparent; background: var(--field); border-radius: 14px; padding: 12px 14px; min-height: 48px;
  font-size: 0.95rem; color: var(--ink); outline: none; font-weight: 500; transition: border-color 0.15s ease, background 0.15s ease; }
.in:focus { border-color: var(--navy-3); background: var(--card); }
.in.bad, .in.bad:focus { border-color: var(--red); background: var(--card); }
select.in { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
textarea.in { min-height: 92px; resize: vertical; }
.in::placeholder { color: #9aa1ad; }
/* the one plain line that says what is missing, right under the box or button */
.errline { color: var(--red); font-size: 0.8125rem; font-weight: 600; margin-top: 8px; line-height: 1.35; text-transform: none; letter-spacing: 0; text-align: left; }
.btn + .errline, .btns + .errline { text-align: center; }
.search { position: relative; }
.search .in { padding-left: 42px; }
.search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.check { display: flex; align-items: center; gap: 12px; font-size: 0.92rem; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--navy); flex: 0 0 auto; }
.stepper { display: inline-flex; align-items: center; border-radius: 999px; background: var(--field); flex: 0 0 auto; padding: 3px; }
.stepper button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--card); font-size: 1.1rem; font-weight: 600; cursor: pointer; color: var(--navy); box-shadow: 0 1px 3px rgba(11, 37, 69, 0.12); }
:root[data-theme="dark"] .stepper button { color: var(--ink); }
.stepper button:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.stepper input { width: calc(5ch + 14px); font-variant-numeric: tabular-nums; border: 0; text-align: center; background: transparent; font-weight: 700; height: 34px; outline: none; }
.radio { display: flex; align-items: center; gap: 12px; padding: 14px; border: 0; border-radius: 18px; cursor: pointer; background: var(--card); box-shadow: var(--shadow); transition: background 0.2s ease; }
.radio.on { background: var(--soft); box-shadow: none; }
.radio.off { opacity: 0.5; }
.card .radio { box-shadow: none; background: transparent; }
.card .radio.on { background: var(--soft); }
.upload { border: 1.5px dashed #cdd5e0; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; min-height: 84px; color: var(--navy-3); background: var(--field);
  font-size: 0.8rem; font-weight: 600; cursor: pointer; position: relative; padding: 8px; text-align: center; }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.thumbs img, .thumbs .file { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; background: var(--grey-bg); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; }

/* ---------- lists: rows, not boxes ---------- */
.list { display: flex; flex-direction: column; }
.li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; min-width: 0; position: relative; }
.li + .li::before { content: ""; position: absolute; top: 0; left: 70px; right: 0; height: 1px; background: var(--line); }
.li .t { font-weight: 700; font-size: 0.95rem; }
.li .s { font-size: 0.8rem; color: var(--muted); }
.li > svg:last-child { color: #a3aab5; flex: 0 0 auto; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--soft); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; flex: 0 0 auto; letter-spacing: 0.02em; }
:root[data-theme="dark"] .avatar { color: var(--soft-ink); }
.avatar.c-blue, .avatar.c-grey { background: var(--soft); color: var(--navy); }
:root[data-theme="dark"] .avatar.c-blue, :root[data-theme="dark"] .avatar.c-grey { color: var(--soft-ink); }
details.group + details.group { border-top: 1px solid var(--line); }
details.group > summary { list-style: none; cursor: pointer; padding: 14px 16px 10px; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
details.group > summary::-webkit-details-marker { display: none; }
details.group > summary .caret { transition: transform 0.2s ease; display: inline-flex; color: var(--muted); }
details.group[open] > summary .caret { transform: rotate(90deg); }
details.group > summary .chip { letter-spacing: 0; text-transform: none; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tbl th { text-align: left; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 14px 14px 10px; cursor: pointer; white-space: nowrap; user-select: none; }
.tbl td { padding: 13px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--ground); }
.tablewrap { overflow-x: auto; }
.empty { padding: 32px 16px; text-align: center; color: var(--muted); font-size: 0.9rem; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px 12px; font-size: 0.9rem; }
.kv > :nth-child(odd) { color: var(--muted); }
.kv > :nth-child(even) { font-weight: 600; text-align: right; }
.sum { display: flex; justify-content: space-between; gap: 10px; font-size: 0.92rem; padding: 5px 0; }
.sum.total { font-size: 1.1rem; font-weight: 800; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; }

/* ---------- filters ---------- */
.filters { display: flex; flex-direction: column; gap: 10px; }
.fbar { display: flex; gap: 10px; align-items: center; }
.fbar .search { flex: 1 1 auto; min-width: 0; }
.fbar .search .in { background: var(--card); border-radius: 999px; min-height: 50px; box-shadow: var(--shadow); }
.fbar .search .in:focus { border-color: var(--navy-3); }
.fbtn { width: 50px; height: 50px; background: var(--card) !important; color: var(--ink) !important; box-shadow: var(--shadow); }
.fbtn .dot { box-shadow: 0 0 0 2px var(--card); }
.datebox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.count { font-size: 0.78rem; color: var(--muted); font-weight: 600; padding-left: 4px; }

/* ---------- timeline / progress ---------- */
.timeline { position: relative; padding-left: 26px; }
.timeline .step { position: relative; padding-bottom: 18px; }
.timeline .step::before { content: ""; position: absolute; left: -19px; top: 18px; bottom: -2px; width: 2px; background: var(--line); }
.timeline .step:last-child::before { display: none; }
.timeline .dot { position: absolute; left: -26px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 2px solid #c3c9d3; }
.timeline .step.done .dot { background: var(--green); border-color: var(--green); }
.timeline .step.now .dot { background: var(--orange); border-color: var(--orange); }
.track { display: flex; justify-content: space-between; gap: 6px; }
.track .s { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: clamp(9px, 0.62rem, 10.5px); padding: 0; letter-spacing: -0.01em; text-align: center; color: var(--muted); position: relative; min-width: 0; line-height: 1.15; font-weight: 600; }
.track .s::before { content: ""; position: absolute; top: 10px; left: calc(-50% - 3px); width: calc(100% + 6px); height: 2px; background: var(--line); z-index: 0; }
.track .s:first-child::before { display: none; }
.track .s.done::before { background: var(--green); }
.track .s i { width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 2px solid #c3c9d3; z-index: 1; display: flex; align-items: center; justify-content: center; color: #fff; }
.track .s.done i { background: var(--green); border-color: var(--green); }
.track .s.done { color: var(--ink); }
.bar { height: 8px; background: var(--grey-bg); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.bar.orange > i { background: var(--orange); }
.bar.red > i { background: var(--red); }
.bar.blue > i { background: var(--navy-3); }
.ring { position: relative; width: 112px; height: 112px; flex: 0 0 auto; }
.ring svg { transform: rotate(-90deg); }
.ring .c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px; }
.ring .c b { font-size: 0.95rem; } .ring .c span { font-size: 0.66rem; color: var(--muted); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: 14px; }
.bars .b { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.bars .b i { width: 100%; max-width: 24px; background: var(--brand-grad); border-radius: 8px 8px 4px 4px; min-height: 2px; }
.bars .b span { font-size: 0.62rem; color: var(--muted); }

/* ---------- sheet / toast ---------- */
.overlay { position: fixed; inset: 0; background: rgba(11, 20, 35, 0.36); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: fade 0.2s ease; }
.sheet { background: var(--card); width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; border-radius: 28px 28px 0 0; padding: 10px 18px calc(env(safe-area-inset-bottom, 0px) + 20px); animation: rise 0.22s ease; box-shadow: var(--shadow-up); }
.sheet::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: #d5dae2; margin: 0 auto 12px; }
.sheet h2 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 12px; }
.sheet .iconbtn { background: var(--grey-bg); color: var(--ink); width: 36px; height: 36px; }
@media (min-width: 700px) { .overlay { align-items: center; } .sheet { border-radius: 28px; } .sheet::before { display: none; } }
/* success: a small dark pill near the bottom, gone in 2 seconds */
.toast { position: fixed; left: 16px; right: 16px; margin: 0 auto; width: fit-content; max-width: min(480px, calc(100% - 32px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); z-index: 60;
  background: rgba(20, 24, 31, 0.92); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; line-height: 1.35; text-align: center; box-shadow: 0 10px 30px rgba(5, 15, 30, 0.25); animation: rise 0.2s ease; }
body.typing .toast { bottom: 16px; }
.shell.wide ~ .toast, .toast.err { }
@keyframes rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.spin { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--navy-3); border-radius: 50%; animation: rot 0.8s linear infinite; margin: 30px auto; }
@keyframes rot { to { transform: rotate(360deg); } }

/* ---------- login: curved header, white card rising over it ---------- */
.login { min-height: 100vh; background: var(--ground); }
.login .ph { padding-bottom: 72px; text-align: center; }
.login .ph .logo { font-size: 3rem; margin-top: calc(6vh + 10px); }
.login .ph .logo small { font-size: 0.7rem; margin-top: 8px; }
.login .ph .hsub { margin-top: 18px; }
.login .box { position: relative; z-index: 1; width: calc(100% - 32px); max-width: 420px; margin: -44px auto 0; background: var(--card); border-radius: 26px; padding: 22px 20px; box-shadow: var(--shadow-up); }
.login .foot { text-align: center; margin: 22px 0 calc(env(safe-area-inset-bottom, 0px) + 24px); }
.login .box.signup-cta { margin-top: 14px; padding: 16px 18px; gap: 12px; align-items: center; }
.login .box.signup-cta > div { flex: 1; min-width: 0; }
.login .box.signup-cta .btn { white-space: nowrap; flex: 0 0 auto; }
.login.signup .ph { padding-top: 6px; }
.login.signup .ph .logo { margin-top: 0; }
.done-tick { width: 64px; height: 64px; border-radius: 50%; margin: 6px auto 2px; display: flex; align-items: center; justify-content: center; background: var(--green-bg); color: var(--green); }

/* ---------- products: clean initials tile until a real photo is uploaded ---------- */
.prod { width: 60px; height: 60px; border-radius: 18px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--soft); color: var(--navy);
  font-weight: 800; font-size: 1rem; letter-spacing: 0.02em; }
:root[data-theme="dark"] .prod { color: var(--soft-ink); }
img.prodimg { width: 60px; height: 60px; border-radius: 18px; object-fit: cover; flex: 0 0 auto; background: var(--grey-bg); }
.row.wrap > .chip { white-space: normal; overflow: visible; }
/* phone keyboard open: hide the tab bar so it does not ride up and cover boxes */
/* hidden by sliding away, never by display:none: the page keeps its height, so nothing jumps when the keyboard opens or closes */
.tabbar, .checkoutbar { transition: transform 0.2s ease, opacity 0.2s ease; }
body.typing .tabbar, body.typing .checkoutbar { transform: translateY(160%); opacity: 0; pointer-events: none; }
/* glass bars get their own layer, so they do not flicker on iPhone when the page behind them re-draws */
.tabbar, .sbar, .checkoutbar, .overlay, .toast { will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* search picker drop-down: solid, so text behind never shows through */
.drop { background: var(--card); box-shadow: var(--shadow-up); border-radius: 18px !important; }
/* search and filter pills inside the header (catalogue, lists) */
.ph .phead { margin-top: 16px; }
.ph .phead .search .in { background: var(--card); border-radius: 999px; min-height: 50px; color: var(--ink); }
.ph .phead .pill { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: none; }
.ph .phead .pill.on { background: #fff; color: var(--navy); }
.ph .phead .mt { margin-top: 12px; }
/* big text on small phones: let number + amount lines wrap instead of sticking out */
.li .row.between { flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
.stats > * { padding: 2px 8px; }
.stats .stat .v { font-size: min(1.15rem, 4.8vw) !important; white-space: nowrap; }
.stats .stat .l { font-size: min(0.75rem, 3.2vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v { white-space: nowrap; }
.seg button { padding: 9px 10px; font-size: min(0.82rem, 3.6vw); }
/* headings inside cards */
.card > .b:first-child, .card > .b.mb, .card > .row > .b:first-child, .card > .h .b { font-size: 1.0625rem; }
/* two dates side by side get cramped at big text on small phones: stack them */
.in[type="date"] { min-width: 0; padding-left: 12px; padding-right: 10px; }
@media (max-width: 420px) { .grid2:has(> label.f > input[type="date"]) { grid-template-columns: minmax(0, 1fr); } }
/* four numbers: 2 x 2 on phones */
.stats.two { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
.stats.two > :nth-child(odd) { border-left: 0; padding-left: 0; }
@media (min-width: 700px) { .stats.two { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stats.two > :nth-child(3) { border-left: 1px solid var(--line); padding-left: 8px; } }
.grid2 > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sec > :last-child:not(:first-child) { white-space: nowrap; flex-shrink: 0; }

.skel { display: flex; flex-direction: column; gap: 10px; }
.skel i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--line) 0%, var(--ground) 50%, var(--line) 100%); background-size: 200% 100%; animation: shimmer 1.2s ease-in-out infinite; }
.skel i:first-child { height: 16px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
main .content { animation: fade 0.18s ease; }
@media (prefers-reduced-motion: reduce) { main .content, .skel i, .sheet, .overlay, .toast { animation: none; } }
.card .card.skel { box-shadow: none; padding: 6px 0; background: none; }
.card.pad0 .card.skel { padding: 14px 16px; }

/* ---------- phone app + iPhone: the page never moves (no bounce, no sideways drift); header and tab bar stay put, only the content scrolls ---------- */
html.native, html.native body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.native body { position: fixed; inset: 0; width: 100%; min-height: 0; }
html.native #app, html.native .shell { height: 100%; min-height: 0; }
html.native .shell > main { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
html.native .login { height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: none; }
html.native .shell.wide .side { height: 100%; }
.shell, .login { min-height: 100dvh; }
.sheet { max-height: 92dvh; overscroll-behavior: contain; }
/* iPhone zooms the page when a text box is under 16px: never smaller */
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea, select.in, textarea.in { font-size: max(16px, 0.95rem); }
.li.notif.unread { background: rgba(31, 95, 168, 0.05); } .li.notif.unread .t { font-weight: 800; }
:root[data-theme="dark"] .li.notif.unread { background: rgba(255, 255, 255, 0.04); }
.avatar.c-green { background: var(--green-bg); color: var(--green); }
.avatar.c-orange { background: var(--orange-bg); color: var(--orange); }
.avatar.c-red { background: var(--red-bg); color: var(--red); }
.content > .sec:first-child { margin-top: 40px; }

/* stock-by-godown bars (dispatch plan) */
.gbar { display: flex; align-items: center; gap: 10px; }
.gbar .track { flex: 0 0 38%; height: 8px; border-radius: 6px; background: var(--line); overflow: hidden; }
.gbar .track i { display: block; height: 100%; border-radius: 6px; }
.gbar .track i.c-green { background: var(--green); } .gbar .track i.c-orange { background: var(--orange); } .gbar .track i.c-red { background: var(--red); }
/* dealer map */
.mapcard { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--card); }
.mapbox { height: min(46dvh, 440px); width: 100%; background: #e8edf3; }
.mapsel { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 500; box-shadow: 0 10px 30px rgba(11, 37, 69, 0.22); }
.maptype { position: absolute; top: 10px; left: 10px; z-index: 600; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 14px rgba(11, 37, 69, 0.18); }
.maptype button { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; font: 600 0.8rem var(--font); color: var(--ink-2); cursor: pointer; }
.maptype button.on { background: var(--navy); color: #fff; }
.maptype button.d3 { margin-left: 4px; border-left: 1px solid var(--line); border-radius: 999px; font-weight: 800; }
.mapbox.g3d { position: absolute; inset: 0; z-index: 400; }
.maplibregl-ctrl-group { border-radius: 14px !important; overflow: hidden; box-shadow: 0 4px 14px rgba(11, 37, 69, 0.18) !important; }
.pin i { display: block; width: 22px; height: 22px; margin: 1px 2px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(11, 37, 69, 0.35); background: var(--navy-3); }
.pin-green i { background: #23944a; } .pin-orange i { background: #e08a00; } .pin-red i { background: #d93a33; } .pin-grey i { background: #8a93a3; }
.dot-l { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.dot-l.green { background: #23944a; } .dot-l.orange { background: #e08a00; } .dot-l.red { background: #d93a33; }
.maplibregl-map { font-family: var(--font); }

/* product photos: cover with a count, gallery sheet swipes */
.prodwrap { position: relative; flex: 0 0 auto; }
.prodn { position: absolute; right: -4px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(20, 24, 31, 0.78); color: #fff; font-size: 0.62rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.gallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.gallery img { flex: 0 0 100%; width: 100%; max-height: 62dvh; object-fit: contain; border-radius: 18px; background: var(--ground); scroll-snap-align: center; }
.gallery::-webkit-scrollbar { display: none; }

/* cart: offer line inside its product, one slim offers strip, total + checkout always in view (Tanishq's test, 31 Oct) */
.offerstrip { width: 100%; border: 0; text-align: left; font: inherit; color: inherit; gap: 10px; padding: 12px 14px; }
.offerline { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; border: 0; border-radius: 12px; padding: 8px 10px; background: var(--soft);
  color: var(--navy); font: 600 0.78rem var(--font); text-align: left; cursor: pointer; }
.offerline b { flex: 0 0 auto; background: var(--card); border-radius: 999px; padding: 2px 9px; font-size: 0.75rem; }
:root[data-theme="dark"] .offerline { color: var(--soft-ink); }
.othertips .row { gap: 10px; }
.cartpage { padding-bottom: 76px; }
.checkoutbar { position: fixed; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); z-index: 29; max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: 0 10px 30px rgba(11, 37, 69, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.checkoutbar .btn { min-height: 46px; padding: 10px 18px; }
:root[data-theme="dark"] .checkoutbar { background: rgba(23, 26, 32, 0.92); }

@media (min-width: 960px) { .shell.wide .checkoutbar { bottom: 18px; left: 270px; } .cartpage { padding-bottom: 80px; } }
/* order steps: the step waiting on Finance is amber */
.track .s.now { color: var(--ink); }
.track .s.now i { background: var(--orange); border-color: var(--orange); }
.track .s.now::before { background: var(--green); }

/* header text near the clock while the navy header is still on screen: a navy strip, so text never shows behind the clock */
body.capped:not(.scrolled) .sbar { opacity: 1; background: #0e2a4d; backdrop-filter: none; -webkit-backdrop-filter: none; }
.offerline.flash, .othertips.flash { animation: flash 1.2s ease; } @keyframes flash { 0%, 60% { box-shadow: 0 0 0 3px var(--navy-3); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* a payment way finance must review: still clearly picked when chosen (only the note says "finance will review") */
.radio.off.on { opacity: 1; }
/* tables: dates and amounts stay on one line */
.tbl td.nowrap, .tbl td.right { white-space: nowrap; }

/* ===== Web admin on a computer (Zeto-style finish in VITO navy): clear tables, frosted menu, number tiles, side panel ===== */
@media (min-width: 960px) {
  /* side menu: frosted, the open page is a white card with a navy edge */
  .shell.wide .side { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 1px 0 0 var(--line); }
  .side a { position: relative; transition: background 0.18s ease, box-shadow 0.18s ease; }
  .side a.on { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(10, 25, 40, 0.06), 0 6px 18px rgba(10, 25, 40, 0.08); }
  .side a.on::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--navy-3); }
  /* number tiles: equal, small capital label over a big number, lift on hover */
  .stat.tap { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .stat.tap:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
  .stat.tap .v { text-decoration: underline; text-decoration-color: rgba(31, 95, 168, 0.25); text-underline-offset: 4px; text-decoration-thickness: 2px; }
  /* tables: a soft glass slab, navy-tinted heading band, faint stripes, hover highlight, sorted column tinted */
  .tablewrap { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; }
  .tbl { font-size: 0.86rem; font-variant-numeric: tabular-nums; }
  .tbl thead th { background: linear-gradient(180deg, #f1f5fb, #e8eef8); color: var(--navy-2); font-size: 0.68rem; letter-spacing: 0.07em; padding: 12px 14px; border-bottom: 1px solid #dce4f0; position: sticky; top: 0; z-index: 1; }
  .tbl thead th:hover { color: var(--navy); background: #e3eaf6; }
  .tbl thead th.sorted { background: #dbe5f5; color: var(--navy); }
  .tbl tbody tr:nth-child(even) td { background: #fafbfd; }
  .tbl tbody tr.click:hover td { background: #eef3fb; }
  .tbl td { border-top: 1px solid #eef1f5; padding: 11px 14px; }
  .tbl td.right { font-weight: 600; }
  .card.pad0 > .tablewrap, .card.pad0 > details .tablewrap { border-radius: 0; box-shadow: none; }
  .tblsearch { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; max-width: 320px; }
  .tblsearch .in { min-height: 38px; padding: 8px 12px; border-radius: 12px; font-size: 0.85rem !important; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
  /* side panel: the records behind a number */
  .drawerwrap { position: fixed; inset: 0; z-index: 70; background: rgba(11, 20, 35, 0.32); animation: fade 0.18s ease; }
  .drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 92vw); background: var(--ground); box-shadow: -20px 0 60px rgba(11, 37, 69, 0.22);
    display: flex; flex-direction: column; animation: slidein 0.22s ease; }
  @keyframes slidein { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .drawerbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 0 var(--line); }
  .drawerbody { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
  .drawerbody .ph { border-radius: 0 0 24px 24px; padding: 14px 24px 44px; }
  .drawerbody .ph .phbar { display: none; }
  .drawerbody .ph h1 { font-size: 1.5rem; }
  .drawerbody .content { padding: 0 20px 28px; }
}
@media (min-width: 960px) {
  .drawer .tbl td { white-space: nowrap; }
  .drawer .tablewrap { overflow-x: auto; }
  .tbl td:first-child { white-space: nowrap; font-weight: 600; color: var(--ink); }
}

/* Team page (Zeto style): access chips, "Can see" pills under each person, invite row */
.chip.navy { background: var(--navy); color: #fff; }
.chip.amber { background: var(--orange-bg); color: var(--orange); }
@media (max-width: 640px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cansee { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.cansee > .small.b { margin-right: 4px; color: var(--ink-2); }
.seepill { border: 1px solid var(--line); background: #fff; color: var(--ink-3, #8a94a6); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; transition: all .18s; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.seepill.on { background: linear-gradient(180deg, #23497a, var(--navy)); color: #fff; border-color: transparent; text-decoration: none; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 2px 6px rgba(14,42,77,.18); }
.seepill.add { text-decoration: none; border-style: dashed; color: var(--navy); }
.seepill:disabled { cursor: default; opacity: .85; }
.seepill:not(:disabled):hover { transform: translateY(-1px); }
.in.sm { padding: 4px 10px; font-size: .8rem; min-height: 0; width: auto; }
tr.hassub td { border-bottom: 0 !important; }
tr.subrow td { padding-top: 0 !important; background: rgba(14,42,77,.02); }
tr.subrow .cansee { margin: 0 0 4px; }
.invite .invrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
@media (max-width: 700px) { .invite .invrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .invite .invrow .btn { grid-column: 1 / -1; } }
.grid2.top { align-items: start; }
.rowacts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; width: 176px; margin-left: auto; }
.rowacts .btn { white-space: nowrap; }
.addrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.addrow.three { grid-template-columns: minmax(0, 1fr) minmax(0, 200px) auto; }
@media (max-width: 640px) { .addrow.three { grid-template-columns: minmax(0, 1fr) auto; } .addrow.three select { grid-column: 1 / -1; grid-row: 2; } .rowacts { justify-content: flex-start; flex-wrap: wrap; } }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
/* admin home: one line per thing waiting, quick add buttons; the tile grid only where there is no side menu */
.todo { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line); color: inherit; cursor: pointer; font-size: .92rem; }
.todo:first-of-type { border-top: 0; }
.todo .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--ink-2); }
.todo .dot.orange { background: var(--orange); } .todo .dot.red { background: var(--red); } .todo .dot.blue { background: var(--blue); } .todo .dot.grey { background: #9aa4b5; }
.todo:hover { color: var(--navy); }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick .btn { display: inline-flex; align-items: center; gap: 6px; }
@media (min-width: 960px) { .phoneonly { display: none !important; } }

a.link, .link { color: var(--blue); cursor: pointer; font-weight: 700; }
:root[data-theme="dark"] main a:not(.btn):not(.tile):not(.pill):not(.li):not(.iconbtn), :root[data-theme="dark"] .kicker { color: var(--soft-ink); }
/* product photo sheet: raised glass frame, swipe, dots */
.pgal { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 8px 4px 14px; }
.pgal::-webkit-scrollbar { display: none; }
.pframe { flex: 0 0 100%; scroll-snap-align: center; border-radius: 28px; padding: 10px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(226, 235, 249, 0.75)); border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 -1.5px 0 rgba(15, 40, 80, 0.07), 0 14px 30px rgba(15, 40, 80, 0.18), 0 2px 6px rgba(15, 40, 80, 0.1); }
.pframe img { display: block; width: 100%; aspect-ratio: 1 / 1; max-height: 52dvh; object-fit: contain; border-radius: 20px; background: #fff; }
:root[data-theme="dark"] .pframe { background: linear-gradient(150deg, rgba(60, 70, 88, 0.95), rgba(34, 40, 52, 0.85)); border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.12), 0 14px 30px rgba(0, 0, 0, 0.5); }
.pdots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: -4px; }
.pdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background 0.2s, transform 0.2s; }
.pdots i.on { background: var(--navy); transform: scale(1.25); }
.pdetail { box-shadow: none; background: var(--ground); }
/* a loading placeholder that waits a moment, so quick pages do not flash grey boxes */
.skel { opacity: 0; animation: fade 0.2s ease 0.2s forwards; }
/* iPhone app: Apple's own tab bar is on screen instead */
html.ntabs .tabbar { visibility: hidden; }
/* computer menu: find box, groups that fold */
.sidefind { width: 100%; border: 0; border-radius: 12px; background: var(--grey-bg); padding: 9px 12px; font: inherit; font-size: 0.85rem; color: var(--ink); margin: 0 0 4px; flex: 0 0 auto; }
.side button.group { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 24px); background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; flex: 0 0 auto; }
.side button.group svg { transition: transform 0.15s ease; transform: rotate(90deg); }
.side button.group[aria-expanded="false"] svg { transform: none; }
/* settings: short groups, two columns on a computer */
.setgroup summary { cursor: pointer; }
.setgrid { display: grid; gap: 14px 22px; }
@media (min-width: 900px) { .setgrid { grid-template-columns: 1fr 1fr; align-items: end; } }
/* Needs attention on Home: folded card, title like any other card */
details.attn > summary { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 1rem; padding: 14px 16px; }
.mark img { width: 24px; height: auto; display: block; }
.logo .vitologo { display: block; max-width: 100%; }
.login .ph .logo .vitologo, .login .logo .vitologo { margin: 0 auto; }
/* button beside the bell */
.perfbtn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff !important; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
/* profile photo */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.myphoto { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.myphoto label { position: relative; display: block; cursor: pointer; }
.myphoto .pen { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid var(--card); }
.linkbtn { background: none; border: 0; color: var(--navy-3); padding: 0; font: inherit; cursor: pointer; }
/* live barcode camera */
.scanview { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; position: relative; border-radius: 18px; overflow: hidden; background: #0d1622; aspect-ratio: 3 / 3.4; max-height: 56dvh; width: 100%; }
.scanview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scanview .hint { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.8rem; text-align: center; }
.scanview .idle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; color: #fff; text-align: center; }

.logo .vitologo ~ small { display: none; }

.ph .hlogo { height: 26px; width: auto; display: block; margin-left: 2px; flex: 0 0 auto; }