/* TRUKVIA mobile app concepts: the presentation canvas, an iPhone 15 Pro frame (393 x 852 pt screen)
   and the app's design system. Shared by every role's app (owner first). */

/* ---------- fonts (variable; OFL licences in ../fonts) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans Telugu"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/noto-sans-telugu-telugu-wght-normal.woff2") format("woff2"); unicode-range: U+0951-0952, U+0964-0965, U+0C00-0C7F, U+1CDA, U+1CF2, U+200C-200D, U+25CC; }

/* ---------- tokens ---------- */
:root {
  --navy-950: #071a3a; --navy-900: #0a2150; --navy-800: #0b2a5b; --navy-700: #123a7a;
  --blue-700: #11449c; --blue-600: #1652b8; --blue-500: #2b6be0; --blue-300: #8fb3ff; --blue-100: #dce8fb; --blue-50: #eef4ff;
  --orange-600: #e26d00; --orange-500: #f57c00; --orange-400: #fd9a2a; --orange-300: #fdba74; --orange-50: #fff4e8;
  --green-600: #0b8a55; --green-500: #12a366; --green-50: #e7f7ef;
  --red-600: #d1343a; --red-500: #e5484d; --red-50: #fdeced;
  --amber-700: #9a5b00; --amber-500: #f5a524; --amber-50: #fff5df;
  --violet-600: #6a4cf0; --violet-50: #f0ecff;
  --sky-600: #0b8bc9; --sky-400: #38bdf8; --sky-50: #e5f6fd;
  --slate-300: #c3cad5;
  --ink: #0b1526; --ink-2: #2b3a4c; --muted: #5d6878; --faint: #8a94a4;
  --line: rgba(13, 30, 60, 0.09);
  --app-bg: #f2f4f8;
  --sans: "Inter", "Noto Sans Telugu", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Manrope", "Inter", "Noto Sans Telugu", system-ui, sans-serif;
  --te: "Noto Sans Telugu", "Inter", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { min-height: 100vh; background: #050c1d; color: #e9eefb; font-family: var(--sans); }
img { display: block; }
ul, ol { list-style: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ======================================================================================
   Presentation canvas (white)
   ====================================================================================== */
body { background: #ffffff; color: var(--ink); }
.canvas { position: relative; max-width: 1600px; margin: 0 auto; padding: 64px 80px 96px; }
.cv-top { display: flex; align-items: center; justify-content: space-between; }
.cv-brand { display: flex; align-items: center; gap: 12px; font: 800 18px/1 var(--display); letter-spacing: 0.06em; color: var(--navy-950); }
.cv-brand img { width: 44px; height: 44px; object-fit: contain; padding: 6px; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px #e6eaf0, 0 8px 18px -12px rgba(10, 33, 80, 0.45); }
.cv-brand i { width: 1px; height: 22px; margin: 0 6px; background: #dfe4ec; }
.cv-brand em { font: 500 14px/1 var(--sans); font-style: normal; color: var(--muted); }
.cv-date { font: 500 13px/1 var(--sans); color: var(--faint); }

.cv-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; align-items: end; margin-top: 56px; }
.cv-kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-600); }
.cv-kicker::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--orange-500); }
.cv-head h1 { margin-top: 18px; font: 800 72px/1 var(--display); letter-spacing: -0.035em; color: var(--navy-950); }
.cv-head h1 em { font-style: normal; color: var(--orange-500); }
.cv-lead { max-width: 700px; margin-top: 20px; font: 400 19px/1.55 var(--sans); color: var(--muted); }
.cv-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cv-meta li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: #f4f6f9; border: 1px solid #e8ecf1; font: 550 13px/1 var(--sans); color: var(--ink-2); }
.cv-meta li b { font-weight: 600; color: var(--faint); }

.cv-tokens { padding: 22px; border-radius: 22px; background: #fafbfc; border: 1px solid #e8ecf1; }
.cv-tokens h3 { font: 700 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 14px; }
.swatches li { display: grid; gap: 7px; font: 600 10px/1.2 var(--sans); color: var(--ink-2); }
.swatches li i { height: 40px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(13, 30, 60, 0.08); }
.swatches li small { display: block; font-weight: 500; color: var(--faint); font-size: 9.5px; }
.type-scale { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e8ecf1; }
.type-scale li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--ink); }
.type-scale li small { font: 500 11.5px/1 var(--sans); color: var(--faint); white-space: nowrap; }
.type-scale .t1 { font: 800 22px/1 var(--display); letter-spacing: -0.02em; }
.type-scale .t2 { font: 500 16px/1 var(--sans); }
.type-scale .t3 { font: 500 16px/1.2 var(--te); }
.cv-facts { display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e8ecf1; font: 500 12.5px/1.4 var(--sans); color: var(--ink-2); }
.cv-facts b { display: inline-block; min-width: 76px; font-weight: 650; color: var(--faint); }

.cv-index { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 52px; }
.cv-index a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px; background: #fff; border: 1px solid #e8ecf1; text-decoration: none; color: var(--ink); }
.cv-index a b { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--navy-900); font: 800 13px/1 var(--display); color: #fff; }
.cv-index a span { font: 650 14px/1.2 var(--sans); }
.cv-index a small { display: block; margin-top: 3px; font: 500 11.5px/1.2 var(--sans); color: var(--faint); }

.cv-row { margin-top: 88px; padding-top: 64px; border-top: 1px solid #edf0f4; scroll-margin-top: 24px; }
.cv-row-head { display: flex; align-items: flex-start; gap: 22px; }
.cv-num { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--navy-900); box-shadow: 0 10px 20px -12px rgba(10, 33, 80, 0.7); font: 800 18px/1 var(--display); color: #fff; }
.cv-row-head h2 { font: 800 32px/1.1 var(--display); letter-spacing: -0.025em; color: var(--navy-950); }
.cv-row-head p { max-width: 860px; margin-top: 8px; font: 400 16px/1.55 var(--sans); color: var(--muted); }
.cv-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cv-tags span { height: 28px; padding: 0 12px; border-radius: 999px; background: var(--orange-50); font: 600 12.5px/28px var(--sans); color: var(--orange-600); }
.cv-phones { display: flex; justify-content: space-between; gap: 48px; margin-top: 44px; }
.cv-shot { position: relative; z-index: 0; display: grid; align-content: start; justify-items: center; gap: 30px; }
.cv-shot figcaption { width: 393px; padding: 0 6px; }
.cv-shot figcaption b { display: flex; align-items: center; gap: 10px; font: 700 17px/1.2 var(--display); color: var(--navy-950); }
.cv-shot figcaption b span { font: 700 12px/1 var(--sans); letter-spacing: 0.06em; color: var(--orange-600); }
.cv-shot figcaption b em { margin-left: auto; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--blue-50); font: 650 11.5px/22px var(--sans); font-style: normal; color: var(--blue-600); }
.cv-shot figcaption b em.staff { background: var(--violet-50); color: var(--violet-600); }
.cv-shot figcaption p { margin-top: 6px; font: 400 14px/1.5 var(--sans); color: var(--muted); }

.cv-foot { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; margin-top: 110px; padding-top: 32px; border-top: 1px solid #edf0f4; font: 400 14px/1.6 var(--sans); color: var(--muted); }
.cv-foot h4 { margin-bottom: 8px; font: 700 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.cv-foot ul { display: grid; gap: 6px; }
.cv-foot li b { color: var(--ink-2); font-weight: 650; }

/* ======================================================================================
   iPhone 15 Pro frame
   ====================================================================================== */
.device { position: relative; flex: none; width: 417px; height: 876px; padding: 12px; border-radius: 70px; background: #07080b;
  box-shadow: inset 0 0 0 1.5px #23262d, inset 0 0 0 3px #0b0c10, 0 50px 90px -40px rgba(10, 33, 80, 0.5), 0 24px 40px -28px rgba(10, 33, 80, 0.35); }
.device::before { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: 74px;
  background: linear-gradient(150deg, #c3c8cf 0%, #5f656e 16%, #a5aab2 34%, #3b4048 56%, #9aa0a8 78%, #61666f 100%); }
.device .hw { position: absolute; z-index: -2; width: 5px; border-radius: 3px; background: linear-gradient(90deg, #5c6169, #a9aeb6 60%, #6a7078); }
.device .hw.action { left: -8px; top: 154px; height: 32px; }
.device .hw.vol-up { left: -8px; top: 214px; height: 62px; }
.device .hw.vol-down { left: -8px; top: 290px; height: 62px; }
.device .hw.power { right: -8px; top: 250px; height: 98px; }
.screen { position: relative; width: 393px; height: 852px; overflow: hidden; isolation: isolate; border-radius: 58px; background: var(--app-bg); color: var(--ink); }
.island { position: absolute; z-index: 90; top: 11px; left: 50%; width: 125px; height: 37px; margin-left: -62.5px; border-radius: 999px; background: #000; }
.island::after { content: ""; position: absolute; top: 12.5px; right: 22px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2e3a57, #0a0e18 62%); }
.sb { position: absolute; z-index: 80; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 28px 0 56px; font: 600 17px/1 var(--sans); letter-spacing: -0.2px; color: var(--ink); }
.sb .sb-r { display: flex; align-items: center; gap: 6px; }
.sb svg { fill: currentColor; }
.sb.dark { color: #fff; }
.hi { position: absolute; z-index: 95; left: 50%; bottom: 8px; width: 139px; height: 5px; margin-left: -69.5px; border-radius: 3px; background: #0b1526; }
.hi.light { background: rgba(255, 255, 255, 0.92); }

/* ======================================================================================
   App: layout and primitives
   ====================================================================================== */
.app { position: absolute; inset: 0; overflow: hidden; padding-top: 54px; font: 400 15px/1.35 var(--sans); }
.scroll { padding: 0 16px 120px; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.num { font-family: var(--display); font-feature-settings: "tnum" 1, "lnum" 1; }
.tnum { font-feature-settings: "tnum" 1; }
.muted { color: var(--muted); }
.te { font-family: var(--te); }

.lt-row { display: flex; align-items: center; justify-content: space-between; height: 52px; margin-top: 2px; }
.lt { font: 800 32px/1 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.lt-sub { margin: 2px 0 14px; font: 450 14px/1.4 var(--sans); color: var(--muted); }
.link { font: 500 17px/1 var(--sans); color: var(--blue-600); }
.icon-btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(13, 30, 60, 0.06), 0 0 0 0.5px rgba(13, 30, 60, 0.06); }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange-500); box-shadow: 0 0 0 2px #fff; }

.sec-h { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 2px 10px; }
.sec-h h2 { font: 700 18px/1.2 var(--display); letter-spacing: -0.015em; color: var(--ink); }
.sec-h a, .sec-h .muted { font: 500 14px/1 var(--sans); color: var(--blue-600); }
.sec-h .muted { color: var(--muted); }
.sec-h.in { margin: 0 0 14px; }

.card { padding: 16px; border-radius: 22px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -12px rgba(13, 30, 60, 0.18); }
.card + .card { margin-top: 12px; }
.group { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -14px rgba(13, 30, 60, 0.16); }
.row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 11px 16px; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--line); }
.row.indent + .row.indent::before { left: 64px; }
.group.tight .row { min-height: 44px; padding: 9px 16px; }
.row .k { flex: 1; font: 450 15px/1.3 var(--sans); color: var(--muted); }
.row .v { font: 550 15px/1.3 var(--sans); color: var(--ink); text-align: right; }
.row b { font-weight: 650; color: var(--ink); }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: 10px; background: rgba(118, 118, 128, 0.12); font: 600 13px/1 var(--sans); }
.seg span { padding: 8px 4px; border-radius: 8px; text-align: center; color: var(--ink-2); white-space: nowrap; }
.seg .on { background: #fff; color: var(--ink); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
.seg.sm { font-size: 12px; }
.seg.sm span { padding: 6px 10px; }

.chips { display: flex; gap: 8px; margin: 14px -16px 0; padding: 0 16px; overflow: hidden; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 0.5px var(--line), 0 1px 2px rgba(13, 30, 60, 0.05); font: 600 13.5px/1 var(--sans); color: var(--ink-2); }
.chip b { margin-left: 6px; font-weight: 600; color: var(--faint); }
.chip.on { background: var(--navy-900); color: #fff; box-shadow: 0 6px 14px -8px rgba(10, 33, 80, 0.7); }
.chip.on b { color: rgba(255, 255, 255, 0.6); }

.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font: 650 11.5px/1 var(--sans); white-space: nowrap; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.p-blue { background: var(--blue-50); color: var(--blue-600); }
.p-green { background: var(--green-50); color: var(--green-600); }
.p-amber { background: var(--amber-50); color: var(--amber-700); }
.p-orange { background: var(--orange-50); color: var(--orange-600); }
.p-red { background: var(--red-50); color: var(--red-600); }
.p-violet { background: var(--violet-50); color: var(--violet-600); }
.p-sky { background: var(--sky-50); color: var(--sky-600); }
.p-gray { background: #eef0f4; color: var(--muted); }

.tile { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; }
.tile .ic { width: 20px; height: 20px; }
.t-blue { background: var(--blue-50); color: var(--blue-600); }
.t-orange { background: var(--orange-50); color: var(--orange-600); }
.t-green { background: var(--green-50); color: var(--green-600); }
.t-red { background: var(--red-50); color: var(--red-600); }
.t-amber { background: var(--amber-50); color: var(--amber-700); }
.t-violet { background: var(--violet-50); color: var(--violet-600); }
.t-sky { background: var(--sky-50); color: var(--sky-600); }

.av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font: 700 11px/1 var(--sans); letter-spacing: 0.02em; color: #fff; background: linear-gradient(140deg, #5b8cf0, #1652b8); }
.av.lg { width: 44px; height: 44px; font-size: 14px; }
.av-n { background: linear-gradient(140deg, #123a7a, #071a3a); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(245, 124, 0, 0.6); }
.av-o { background: linear-gradient(140deg, #fdba74, #e26d00); }
.av-g { background: linear-gradient(140deg, #4ade80, #0b8a55); }
.av-v { background: linear-gradient(140deg, #a78bfa, #6a4cf0); }
.av-r { background: linear-gradient(140deg, #fb7185, #d1343a); }
.av-s { background: linear-gradient(140deg, #7dd3fc, #0b8bc9); }

/* Indian commercial number plate (yellow, high-security style) */
.plate { display: inline-flex; align-items: stretch; height: 24px; overflow: hidden; border-radius: 5px; background: linear-gradient(180deg, #ffe066, #ffd23a); box-shadow: inset 0 0 0 1.3px #1a1a1a; font: 800 12.5px/1 var(--display); letter-spacing: 0.05em; color: #111; white-space: nowrap; }
.plate i { display: flex; align-items: flex-end; justify-content: center; width: 11px; padding-bottom: 3px; margin: 1.3px 0 1.3px 1.3px; border-radius: 3px 0 0 3px; background: #1f4fbf; font: 800 5px/1 var(--sans); font-style: normal; letter-spacing: 0; color: #fff; }
.plate span { display: flex; align-items: center; padding: 0 7px 0 6px; }
.plate.lg { height: 34px; border-radius: 7px; font-size: 18px; }
.plate.lg i { width: 15px; padding-bottom: 5px; font-size: 6.5px; }
.plate.lg span { padding: 0 11px 0 9px; }
.plate.sm { height: 21px; font-size: 11px; }
.plate.sm i { width: 9px; font-size: 4.5px; }

/* colour helpers for bars and legends */
.c-blue { background: var(--blue-600); }
.c-sky { background: var(--sky-400); }
.c-gray { background: var(--slate-300); }
.c-amber { background: var(--amber-500); }
.c-orange { background: var(--orange-500); }
.c-red { background: var(--red-500); }
.c-green { background: var(--green-500); }
.c-violet { background: #8b6cff; }
.c-navy { background: var(--navy-800); }
.stackbar { display: flex; gap: 3px; height: 12px; }
.stackbar i { border-radius: 4px; }
.legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.legend li { display: grid; grid-template-columns: 8px 1fr; align-items: center; column-gap: 6px; row-gap: 3px; font: 500 12px/1 var(--sans); color: var(--muted); }
.legend li i { width: 8px; height: 8px; border-radius: 3px; }
.legend li b { grid-column: 2; font: 800 17px/1 var(--display); color: var(--ink); }

/* tab bar */
.tabbar { position: absolute; z-index: 60; left: 0; right: 0; bottom: 0; height: 84px; display: grid; grid-template-columns: repeat(5, 1fr); padding: 7px 6px 0; background: rgba(248, 249, 252, 0.84); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 -0.5px 0 rgba(13, 30, 60, 0.14); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 550 10.5px/1 var(--sans); color: #8b93a2; }
.tab .ic { width: 26px; height: 26px; stroke-width: 1.7; }
.tab.on { color: var(--blue-600); }
.tab.on .ic { stroke-width: 2.1; }
.tab .badge { position: absolute; top: -3px; left: calc(50% + 5px); min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--orange-500); box-shadow: 0 0 0 2px #f8f9fc; font: 700 11px/19px var(--sans); color: #fff; text-align: center; }
.tabbar.dark { background: rgba(8, 18, 42, 0.72); box-shadow: 0 -0.5px 0 rgba(255, 255, 255, 0.1); }
.tabbar.dark .tab { color: rgba(233, 238, 251, 0.45); }
.tabbar.dark .tab.on { color: var(--blue-300); }
.tabbar.dark .badge { box-shadow: 0 0 0 2px #0b1736; }

/* navigation bar on pushed screens */
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 12px 0 8px; }
.nav .back { display: flex; align-items: center; font: 400 17px/1 var(--sans); color: var(--blue-600); }
.nav .back .ic { width: 26px; height: 26px; stroke-width: 2.3; margin-right: -2px; }
.nav .nav-t { position: absolute; left: 50%; transform: translateX(-50%); font: 600 17px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.nav .icon-btn { width: 34px; height: 34px; }

/* bottom action bar */
.actionbar { position: absolute; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.75fr; gap: 10px; padding: 12px 16px 36px; background: rgba(248, 249, 252, 0.88); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 -0.5px 0 rgba(13, 30, 60, 0.14); }
.btn { display: flex; align-items: center; justify-content: center; gap: 9px; height: 54px; border-radius: 16px; font: 650 16px/1 var(--sans); white-space: nowrap; }
.btn .ic { width: 22px; height: 22px; }
.btn-primary { background: linear-gradient(180deg, #164794 0%, #0a2150 100%); color: #fff; box-shadow: 0 10px 22px -10px rgba(10, 33, 80, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.btn-reject { background: #fff; color: var(--red-600); box-shadow: 0 0 0 0.5px var(--line), 0 1px 2px rgba(13, 30, 60, 0.06); }

/* ======================================================================================
   Screens
   ====================================================================================== */

/* --- Home --- */
.home-top { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.co-switch { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(13, 30, 60, 0.06), 0 0 0 0.5px rgba(13, 30, 60, 0.06); }
.co-switch img { width: 34px; height: 34px; object-fit: contain; padding: 4px; border-radius: 10px; background: var(--blue-50); }
.co-switch b { display: block; font: 650 14px/1.15 var(--sans); color: var(--ink); }
.co-switch small { display: block; margin-top: 2px; font: 500 11.5px/1 var(--sans); color: var(--muted); }
.co-switch .ic { width: 16px; height: 16px; stroke-width: 2.2; color: var(--muted); }
.home-actions { display: flex; align-items: center; gap: 10px; }
.greet { margin-top: 14px; font: 800 28px/1.1 var(--display); letter-spacing: -0.03em; }
.greet-sub { margin-top: 6px; font: 450 14.5px/1.3 var(--sans); color: var(--muted); }
.greet-sub b { font-weight: 650; color: var(--orange-600); }

.hero { position: relative; margin-top: 14px; padding: 18px 18px 0; overflow: hidden; border-radius: 26px; color: #fff;
  background: radial-gradient(260px 170px at 100% 0%, rgba(245, 124, 0, 0.38), transparent 70%), radial-gradient(240px 160px at 0% 100%, rgba(43, 107, 224, 0.5), transparent 70%), linear-gradient(160deg, #123a7a 0%, #0a2150 48%, #071a3a 100%);
  box-shadow: 0 22px 40px -22px rgba(7, 26, 58, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.hero-top { display: flex; align-items: center; justify-content: space-between; font: 550 13px/1 var(--sans); color: rgba(255, 255, 255, 0.72); }
.hero-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(18, 163, 102, 0.22); color: #6ee7b7; font: 650 12px/1 var(--sans); }
.hero-chip .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.hero-num { margin-top: 12px; font: 800 44px/1 var(--display); letter-spacing: -0.035em; }
.hero-num small { font-size: 24px; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.72); }
.hero-label { margin-top: 6px; font: 450 13.5px/1 var(--sans); color: rgba(255, 255, 255, 0.66); }
.spark { display: block; width: calc(100% + 36px); height: 60px; margin: 6px -18px 0; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 -18px; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(3, 12, 32, 0.25); }
.hero-stats div { padding: 12px 18px 14px; }
.hero-stats div + div { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.hero-stats small { display: block; font: 500 11.5px/1 var(--sans); color: rgba(255, 255, 255, 0.6); }
.hero-stats b { display: block; margin-top: 6px; font: 800 17px/1 var(--display); letter-spacing: -0.01em; }
.hero-stats b.ok { color: #6ee7b7; }

.needs { display: flex; gap: 10px; margin: 0 -16px; padding: 0 16px; }
.need { flex: none; width: 152px; padding: 12px 14px; border-radius: 20px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -12px rgba(13, 30, 60, 0.18); }
.need .tile { width: 34px; height: 34px; border-radius: 11px; }
.need .tile .ic { width: 18px; height: 18px; }
.need b { display: block; margin-top: 10px; font: 800 24px/1 var(--display); letter-spacing: -0.03em; }
.need span { display: block; margin-top: 5px; font: 600 13.5px/1.2 var(--sans); color: var(--ink); }
.need small { display: block; margin-top: 3px; font: 500 12px/1.2 var(--sans); color: var(--muted); }
.need-o b { color: var(--orange-600); }
.need-r b { color: var(--red-600); }

.cash-row { display: flex; align-items: center; gap: 12px; }
.cash-row small { display: block; font: 500 12.5px/1 var(--sans); color: var(--muted); }
.cash-row b { display: block; margin-top: 5px; font: 800 20px/1 var(--display); letter-spacing: -0.02em; }
.cash-row .r { margin-left: auto; text-align: right; }

/* --- Approvals --- */
.grp-label { display: flex; align-items: center; gap: 6px; margin: 20px 2px 10px; font: 700 12px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.grp-label .ic { width: 15px; height: 15px; stroke-width: 2.2; color: var(--orange-600); }
.req { position: relative; padding: 14px 14px 12px; border-radius: 20px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -12px rgba(13, 30, 60, 0.18); }
.req + .req { margin-top: 10px; }
.req.key { box-shadow: inset 3px 0 0 var(--orange-500), 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -12px rgba(13, 30, 60, 0.18); }
.req-top { display: flex; align-items: flex-start; gap: 11px; }
.req-t { flex: 1; min-width: 0; }
.req-t b { display: block; font: 650 15px/1.25 var(--sans); color: var(--ink); }
.req-t span { display: block; margin-top: 3px; font: 450 13px/1.3 var(--sans); color: var(--muted); }
.req-amt { text-align: right; }
.req-amt b { display: block; font: 800 16.5px/1.2 var(--display); letter-spacing: -0.01em; }
.req-amt small { display: block; margin-top: 3px; font: 500 12px/1 var(--sans); color: var(--faint); }
.req-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 49px; }
.req-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 0.5px solid var(--line); }
.req-foot .av { width: 26px; height: 26px; font-size: 10px; }
.req-foot .who { flex: 1; font: 500 12.5px/1.2 var(--sans); color: var(--muted); }
.req-foot .who b { font-weight: 650; color: var(--ink-2); }
.mini-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; }
.mini-btn .ic { width: 19px; height: 19px; stroke-width: 2.4; }
.mini-btn.no { background: var(--red-50); color: var(--red-600); }
.mini-btn.yes { background: var(--navy-900); color: #fff; box-shadow: 0 6px 14px -8px rgba(10, 33, 80, 0.8); }
.req-btns { display: flex; gap: 8px; }

/* --- Approval detail --- */
.amt-head { padding: 6px 4px 0; text-align: center; }
.amt-head small { display: block; margin-top: 4px; font: 500 14px/1 var(--sans); color: var(--muted); }
.amt { margin-top: 8px; font: 800 42px/1 var(--display); letter-spacing: -0.04em; }
.payee { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 0.5px var(--line), 0 1px 2px rgba(13, 30, 60, 0.05); text-align: left; }
.payee b { display: block; font: 650 14px/1.15 var(--sans); }
.payee span { display: block; font: 450 12px/1.2 var(--sans); color: var(--muted); }
.payee b { color: var(--ink); }
.payee .av { display: grid; width: 34px; height: 34px; font: 700 11.5px/1 var(--sans); color: #fff; }
.cmp { margin-top: 14px; padding: 12px 16px; }
.cmp-bar { position: relative; display: flex; gap: 3px; height: 10px; margin: 10px 0; }
.cmp-bar i { border-radius: 4px; }
.cmp-bar .due { background: var(--blue-600); }
.cmp-bar .over { background: repeating-linear-gradient(-45deg, var(--orange-500) 0 5px, var(--orange-400) 5px 10px); }
.cmp-row { display: flex; justify-content: space-between; font: 500 13px/1 var(--sans); color: var(--muted); }
.cmp-row b { font: 750 14px/1 var(--display); color: var(--ink); }
.cmp-row b.o { color: var(--orange-600); }
.guard { display: flex; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg, #fff7ed, #fff1e2); box-shadow: inset 0 0 0 0.5px rgba(226, 109, 0, 0.25); }
.guard b { display: block; font: 650 14.5px/1.25 var(--sans); color: #7c3a00; }
.guard p { margin-top: 3px; font: 450 12.5px/1.4 var(--sans); color: #8a5520; }
.guard .tile { background: #fff; color: var(--orange-600); box-shadow: 0 2px 6px -2px rgba(226, 109, 0, 0.35); }
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; padding: 12px 10px 11px; border-radius: 18px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -14px rgba(13, 30, 60, 0.16); }
.step { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; font: 450 11.5px/1.25 var(--sans); color: var(--muted); }
.step::before { content: ""; position: absolute; top: 11px; left: -50%; right: 50%; height: 2px; background: var(--green-500); }
.step:first-child::before { display: none; }
.step.now::before { background: linear-gradient(90deg, var(--green-500), var(--orange-400)); }
.step .dotc { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green-500); color: #fff; box-shadow: 0 0 0 4px #fff; }
.step .dotc .ic { width: 13px; height: 13px; stroke-width: 3; }
.step.now .dotc { background: #fff; box-shadow: 0 0 0 4px #fff, inset 0 0 0 2px var(--orange-500); }
.step.now .dotc::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--orange-500); }
.step b { margin-top: 4px; font: 650 12.5px/1.2 var(--sans); color: var(--ink); }
.note { margin-top: 12px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -14px rgba(13, 30, 60, 0.16); font: 450 14px/1.45 var(--sans); color: var(--ink-2); }
.note small { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: 550 12px/1 var(--sans); color: var(--muted); }
.note small .av { width: 20px; height: 20px; font-size: 8.5px; }

/* --- Money: collections, cash and profit --- */
.recv { margin-top: 14px; }
.recv-top { display: flex; justify-content: space-between; align-items: flex-end; }
.recv-top small { display: block; font: 500 12.5px/1 var(--sans); color: var(--muted); }
.recv-top b { display: block; margin-top: 6px; font: 800 30px/1 var(--display); letter-spacing: -0.035em; }
.recv-top .r { text-align: right; }
.recv-top .r b { font-size: 22px; color: var(--red-600); }
.aging { display: flex; gap: 3px; height: 14px; margin-top: 16px; }
.aging i { border-radius: 4px; }
.aging-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 14px; }
.aging-legend li { display: flex; align-items: center; gap: 7px; font: 500 12.5px/1 var(--sans); color: var(--muted); }
.aging-legend li i { width: 8px; height: 8px; border-radius: 3px; }
.aging-legend li b { margin-left: auto; font: 750 13.5px/1 var(--display); color: var(--ink); }
.c-main { flex: 1; min-width: 0; }
.c-main b { display: block; font: 650 14.5px/1.2 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-main span { display: block; margin-top: 3px; font: 450 12.5px/1.25 var(--sans); color: var(--muted); }
.c-main em { font-style: normal; font-weight: 600; }
.c-main em.ok { color: var(--green-600); }
.c-main em.warn { color: var(--red-600); }
.c-amt { display: flex; align-items: center; gap: 10px; }
.c-amt b { font: 800 15px/1 var(--display); letter-spacing: -0.01em; }
.c-amt .act { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green-50); color: var(--green-600); }
.c-amt .act .ic { width: 17px; height: 17px; }
.c-amt.col { flex-direction: column; align-items: flex-end; gap: 5px; }
.cust .row { padding: 12px 14px; }
.wa { margin-top: 12px; padding: 14px; background: linear-gradient(180deg, #ffffff, #f6fbf8); box-shadow: inset 0 0 0 0.5px rgba(11, 138, 85, 0.18), 0 8px 22px -14px rgba(13, 30, 60, 0.16); }
.wa-top { display: flex; align-items: center; gap: 10px; }
.wa-top b { display: block; font: 650 14.5px/1.2 var(--sans); }
.wa-top span { display: block; margin-top: 2px; font: 450 12px/1.2 var(--sans); color: var(--muted); }
.lang { display: flex; margin-left: auto; padding: 2px; border-radius: 9px; background: rgba(118, 118, 128, 0.12); font: 650 12px/1 var(--sans); }
.lang span { margin: 0; padding: 6px 8px; border-radius: 7px; color: var(--muted); }
.lang .on { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
.wa-msg { position: relative; margin-top: 12px; padding: 11px 13px; border-radius: 4px 16px 16px 16px; background: #e7f7ef; font: 450 13.5px/1.6 var(--te); color: #12372a; }
.wa-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin-top: 12px; border-radius: 13px; background: var(--green-600); font: 650 14.5px/1 var(--sans); color: #fff; box-shadow: 0 8px 18px -10px rgba(11, 138, 85, 0.9); }
.wa-btn .ic { width: 18px; height: 18px; }

.cash-hero { position: relative; margin-top: 14px; padding: 18px; overflow: hidden; border-radius: 24px; color: #fff; background: radial-gradient(240px 160px at 100% 0%, rgba(18, 163, 102, 0.35), transparent 70%), linear-gradient(160deg, #123a7a 0%, #0a2150 50%, #071a3a 100%); box-shadow: 0 22px 40px -22px rgba(7, 26, 58, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.cash-hero small { font: 500 13px/1 var(--sans); color: rgba(255, 255, 255, 0.7); }
.cash-hero .big { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.cash-hero .big b { font: 800 38px/1 var(--display); letter-spacing: -0.035em; }
.cash-hero p { display: flex; align-items: center; gap: 6px; margin-top: 12px; font: 450 12.5px/1 var(--sans); color: rgba(255, 255, 255, 0.62); }
.cash-hero p .ic { width: 14px; height: 14px; color: #6ee7b7; stroke-width: 2.4; }
.bank-mark { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; font: 800 14px/1 var(--display); color: #fff; }
.bm1 { background: linear-gradient(140deg, #24508f, #0f2c5e); }
.bm2 { background: linear-gradient(140deg, #c2410c, #8a2a08); }
.bm3 { background: linear-gradient(140deg, #7a2e5a, #4a1838); }
.wallets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.wallet { padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -14px rgba(13, 30, 60, 0.16); }
.wallet small { display: flex; align-items: center; gap: 5px; font: 600 11.5px/1 var(--sans); color: var(--muted); }
.wallet small .ic { width: 13px; height: 13px; }
.wallet b { display: block; margin-top: 8px; font: 800 16px/1 var(--display); letter-spacing: -0.01em; }
.wallet.low { box-shadow: inset 0 0 0 1px rgba(209, 52, 58, 0.3), 0 8px 22px -14px rgba(13, 30, 60, 0.16); }
.wallet.low b { color: var(--red-600); }
.wallet em { display: block; margin-top: 4px; font: 600 11px/1 var(--sans); font-style: normal; color: var(--red-600); }
.wallet span { display: block; margin-top: 4px; font: 500 11px/1 var(--sans); color: var(--faint); }
.payfirst { display: flex; gap: 12px; margin-top: 12px; }
.payfirst b { display: block; font: 650 14.5px/1.25 var(--sans); }
.payfirst p { margin-top: 3px; font: 450 12.5px/1.45 var(--sans); color: var(--muted); }
.payfirst .go { align-self: center; padding: 8px 12px; border-radius: 10px; background: var(--blue-50); font: 650 13px/1 var(--sans); color: var(--blue-600); }
.date-tile { display: grid; place-items: center; flex: none; width: 44px; height: 46px; border-radius: 12px; background: #f3f5f9; box-shadow: inset 0 0 0 0.5px var(--line); }
.date-tile b { font: 800 17px/1 var(--display); color: var(--ink); }
.date-tile small { margin-top: -6px; font: 700 9.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-600); }

.period { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.per-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 0.5px var(--line), 0 1px 2px rgba(13, 30, 60, 0.05); font: 650 13.5px/1 var(--sans); }
.per-btn .ic { width: 16px; height: 16px; color: var(--blue-600); }
.per-btn .ic:last-child { width: 14px; height: 14px; color: var(--muted); stroke-width: 2.2; }
.pl { margin-top: 12px; }
.pl small { font: 500 12.5px/1 var(--sans); color: var(--muted); }
.pl-num { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.pl-num b { font: 800 36px/1 var(--display); letter-spacing: -0.04em; }
.pl-sub { margin-top: 8px; font: 450 12.5px/1.3 var(--sans); color: var(--muted); }
.pl svg { display: block; width: 100%; height: 132px; margin-top: 12px; }
.cost-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; column-gap: 12px; row-gap: 7px; padding: 11px 14px; position: relative; }
.cost-row + .cost-row::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; height: 0.5px; background: var(--line); }
.cost-row .tile { width: 34px; height: 34px; border-radius: 10px; grid-row: span 2; }
.cost-row .tile .ic { width: 17px; height: 17px; }
.cost-row b { font: 600 14px/1 var(--sans); }
.cost-row .val { font: 800 14.5px/1 var(--display); text-align: right; }
.cost-row .meter { height: 6px; border-radius: 4px; background: #eef1f6; overflow: hidden; }
.cost-row .meter i { display: block; height: 100%; border-radius: 4px; }
.cost-row .pct { font: 600 11.5px/1 var(--sans); color: var(--muted); text-align: right; }

/* --- Fleet --- */
.search { display: flex; align-items: center; gap: 8px; height: 38px; margin-top: 6px; padding: 0 10px; border-radius: 11px; background: rgba(118, 118, 128, 0.12); font: 450 16px/1 var(--sans); color: #8a8f99; }
.search .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.alert { margin-top: 14px; padding: 14px; background: linear-gradient(180deg, #fffaf0, #fff5e1); box-shadow: inset 0 0 0 0.5px rgba(245, 165, 36, 0.4); }
.alert-top { display: flex; align-items: center; gap: 10px; }
.alert-top b { flex: 1; font: 650 14.5px/1.25 var(--sans); color: #6b4200; }
.alert-top a { font: 650 13px/1 var(--sans); color: var(--amber-700); }
.alert .tile { width: 32px; height: 32px; border-radius: 10px; background: #fff; color: var(--amber-700); box-shadow: 0 2px 6px -2px rgba(245, 165, 36, 0.5); }
.alert .tile .ic { width: 17px; height: 17px; }
.alert ul { display: grid; gap: 7px; margin-top: 11px; padding-left: 42px; }
.alert li { display: flex; align-items: center; justify-content: space-between; font: 500 12.5px/1 var(--sans); color: #7a5410; }
.alert li b { font-weight: 650; color: #5a3a00; }
.veh { padding: 14px; }
.veh-top { display: flex; align-items: center; gap: 8px; }
.veh-top .lr { margin-left: auto; font: 600 12px/1 var(--sans); color: var(--faint); }
.route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 14px; }
.route .place b { display: block; font: 650 14px/1.15 var(--sans); }
.route .place small { display: block; margin-top: 3px; font: 450 11.5px/1 var(--sans); color: var(--muted); }
.route .place.end { text-align: right; }
.track { position: relative; height: 22px; }
.track::before { content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, #cfd6e2 0 5px, transparent 5px 9px); }
.track i { position: absolute; top: 10px; left: 0; height: 2px; border-radius: 2px; background: var(--blue-600); }
.track .truck { position: absolute; top: 0; display: grid; place-items: center; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--blue-600); color: #fff; box-shadow: 0 0 0 4px rgba(22, 82, 184, 0.16); }
.track .truck .ic { width: 13px; height: 13px; stroke-width: 2.2; }
.veh-meta { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding-top: 11px; border-top: 0.5px solid var(--line); font: 500 12.5px/1.2 var(--sans); color: var(--muted); }
.veh-meta .av { width: 24px; height: 24px; font-size: 9.5px; }
.veh-meta b { font-weight: 650; color: var(--ink-2); }
.veh-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--slate-300); }
.veh-line { display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 500 13px/1.3 var(--sans); color: var(--ink-2); }
.veh-line .ic { width: 16px; height: 16px; color: var(--muted); }
.veh-line em { font-style: normal; font-weight: 650; }
.veh-line em.amber { color: var(--amber-700); }
.veh-line em.green { color: var(--green-600); }

/* --- Vehicle 360 --- */
.v-head { display: grid; justify-items: start; gap: 6px; padding: 4px 4px 0; }
.v-head h2 { margin-top: 4px; font: 800 22px/1.1 var(--display); letter-spacing: -0.02em; }
.v-head p { font: 450 13px/1.3 var(--sans); color: var(--muted); }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.kpi { padding: 11px 14px; border-radius: 18px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -14px rgba(13, 30, 60, 0.16); }
.kpi small { display: flex; align-items: center; gap: 6px; font: 550 12px/1 var(--sans); color: var(--muted); }
.kpi small i { width: 8px; height: 8px; border-radius: 3px; }
.kpi b { display: block; margin-top: 8px; font: 800 22px/1 var(--display); letter-spacing: -0.03em; }
.kpi span { display: block; margin-top: 5px; font: 500 11.5px/1 var(--sans); color: var(--faint); }
.kpi.good b { color: var(--green-600); }
.kpi.dark { background: linear-gradient(160deg, #123a7a, #071a3a); color: #fff; }
.kpi.dark small, .kpi.dark span { color: rgba(255, 255, 255, 0.62); }
.chart-legend { display: flex; gap: 12px; font: 550 12px/1 var(--sans); color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 8px; height: 8px; border-radius: 3px; }
.chart360 svg { display: block; width: 100%; height: 118px; }
.split-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 10px; margin-top: 12px; }
.split-legend li { display: flex; align-items: center; gap: 6px; font: 500 12px/1 var(--sans); color: var(--muted); }
.split-legend li i { width: 8px; height: 8px; border-radius: 3px; }
.split-legend li b { margin-left: auto; font: 750 12.5px/1 var(--display); color: var(--ink); }

/* --- Ask TRUKVIA (dark) --- */
.screen.dark { background: #050f26; color: #e9eefb; }
.ai-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(320px 260px at 85% 8%, rgba(245, 124, 0, 0.28), transparent 70%), radial-gradient(360px 300px at 0% 30%, rgba(43, 107, 224, 0.42), transparent 70%), radial-gradient(420px 320px at 60% 100%, rgba(99, 76, 240, 0.3), transparent 70%), linear-gradient(180deg, #071a3a 0%, #050f26 60%, #040b1d 100%); }
.screen.dark .app { z-index: 1; }
.ai-top { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 16px; }
.ai-title { display: flex; align-items: center; gap: 9px; font: 800 20px/1 var(--display); letter-spacing: -0.02em; color: #fff; }
.ai-orb { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: conic-gradient(from 210deg, #f57c00, #fd9a2a, #8fb3ff, #2b6be0, #f57c00); box-shadow: 0 6px 18px -6px rgba(245, 124, 0, 0.8); }
.ai-orb .ic { width: 17px; height: 17px; color: #fff; stroke-width: 2; }
.ai-lang { display: flex; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); font: 650 12.5px/1 var(--sans); }
.ai-lang span { padding: 7px 10px; border-radius: 8px; color: rgba(233, 238, 251, 0.6); }
.ai-lang .on { background: rgba(255, 255, 255, 0.16); color: #fff; }
.ai-body { padding: 4px 16px 0; }
.ai-date { margin: 6px 0 14px; font: 600 11.5px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; color: rgba(233, 238, 251, 0.4); }
.bubble.me { margin-left: auto; max-width: 84%; padding: 12px 14px; border-radius: 20px 20px 6px 20px; background: linear-gradient(160deg, #2b6be0, #1652b8); box-shadow: 0 10px 24px -14px rgba(43, 107, 224, 0.9); font: 500 15.5px/1.55 var(--te); color: #fff; }
.bubble .via { display: flex; align-items: center; gap: 5px; margin-top: 6px; font: 500 11.5px/1 var(--sans); color: rgba(255, 255, 255, 0.7); }
.bubble .via .ic { width: 13px; height: 13px; }
.ai-answer { margin-top: 14px; padding: 14px; border-radius: 22px 22px 22px 8px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 20px 40px -24px rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.ai-who { display: flex; align-items: center; gap: 8px; font: 700 12.5px/1 var(--sans); color: rgba(233, 238, 251, 0.75); }
.ai-who .ai-orb { width: 22px; height: 22px; border-radius: 7px; }
.ai-who .ai-orb .ic { width: 12px; height: 12px; }
.ai-answer p.te { margin-top: 10px; font: 500 15px/1.6 var(--te); color: #fff; }
.ai-answer p.te b { color: var(--orange-300); font-weight: 700; }
.rank { display: grid; gap: 9px; margin-top: 12px; padding: 12px; border-radius: 16px; background: rgba(3, 10, 28, 0.45); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08); }
.rk { display: grid; grid-template-columns: 16px auto 1fr auto; align-items: center; gap: 9px; }
.rk .n { font: 800 12px/1 var(--display); color: rgba(233, 238, 251, 0.5); }
.rk .bar { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rk .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2b6be0, #8fb3ff); }
.rk:first-child .bar i { background: linear-gradient(90deg, #f57c00, #fdba74); }
.rk b { font: 800 13.5px/1 var(--display); color: #fff; }
.ai-src { display: flex; align-items: center; gap: 6px; margin-top: 11px; font: 450 11.5px/1.3 var(--sans); color: rgba(233, 238, 251, 0.5); }
.ai-src .ic { width: 13px; height: 13px; color: #6ee7b7; }
.ai-src a { margin-left: auto; font-weight: 600; color: var(--blue-300); white-space: nowrap; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.ai-actions span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14); font: 600 12.5px/1 var(--sans); color: #fff; }
.ai-actions .ic { width: 14px; height: 14px; }
.suggest-label { margin: 18px 2px 9px; font: 600 11.5px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(233, 238, 251, 0.42); }
.suggest { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px; white-space: nowrap; overflow: hidden; }
.suggest span { padding: 10px 13px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); font: 500 13px/1 var(--sans); color: rgba(233, 238, 251, 0.85); }
.ai-input { position: absolute; z-index: 61; left: 12px; right: 12px; bottom: 96px; display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 8px 0 16px; border-radius: 22px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), 0 18px 40px -18px rgba(0, 0, 0, 0.9); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.wave { display: flex; align-items: center; gap: 3px; height: 28px; }
.wave i { width: 3px; border-radius: 2px; background: linear-gradient(180deg, #fdba74, #f57c00); }
.listen { flex: 1; font: 500 13.5px/1.2 var(--sans); color: rgba(233, 238, 251, 0.8); }
.listen small { display: block; margin-top: 3px; font: 450 11.5px/1 var(--te); color: rgba(233, 238, 251, 0.45); }
.mic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(150deg, #fd9a2a, #e26d00); color: #fff; box-shadow: 0 0 0 6px rgba(245, 124, 0, 0.16), 0 10px 22px -8px rgba(245, 124, 0, 0.9); }
.mic .ic { width: 22px; height: 22px; stroke-width: 2.1; }

/* ======================================================================================
   More app components (Owner & Staff app)
   ====================================================================================== */

/* ---------- headings on pushed screens ---------- */
.ph-title { margin: 8px 4px 0; font: 800 26px/1.15 var(--display); letter-spacing: -0.025em; }
.ph-sub { margin: 8px 4px 0; font: 450 14px/1.45 var(--sans); color: var(--muted); }
.nav .txt { font: 400 17px/1 var(--sans); color: var(--blue-600); }
.nav .txt.b { font-weight: 600; }
.link.red { color: var(--red-600); }

/* ---------- inputs ---------- */
.field { margin-top: 14px; }
.field label { display: block; margin: 0 4px 7px; font: 600 13px/1 var(--sans); color: var(--ink-2); }
.input { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #dfe4ec; font: 500 16px/1 var(--sans); color: var(--ink); }
.input .ic { width: 19px; height: 19px; color: var(--faint); }
.input .ph { font-weight: 450; color: var(--faint); }
.input .dots { font-size: 20px; letter-spacing: 2px; }
.input .end { margin-left: auto; }
.input.focus { box-shadow: inset 0 0 0 2px var(--blue-600), 0 0 0 4px rgba(22, 82, 184, 0.12); }
.caret { display: inline-block; width: 2px; height: 20px; margin-left: -6px; border-radius: 1px; background: var(--blue-600); }
.btn-block { width: 100%; }
.btn-outline { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #dfe4ec; }
.btn-light { background: var(--blue-50); color: var(--blue-600); }
.or { display: flex; align-items: center; gap: 12px; margin: 16px 4px; font: 500 12.5px/1 var(--sans); color: var(--faint); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: #e3e8ef; }

/* ---------- grouped form rows ---------- */
.form { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -14px rgba(13, 30, 60, 0.16); }
.form + .form { margin-top: 12px; }
.f-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 16px; }
.f-row + .f-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--line); }
.form.icons .f-row + .f-row::before { left: 62px; }
.f-row .k { flex: 1; min-width: 0; font: 450 15px/1.25 var(--sans); color: var(--ink); }
.f-row .k small { display: block; margin-top: 3px; font: 450 12.5px/1.3 var(--sans); color: var(--muted); }
.f-row .v { font: 550 15px/1.25 var(--sans); color: var(--ink); text-align: right; white-space: nowrap; }
.f-row .v small { display: block; margin-top: 3px; font: 500 11.5px/1 var(--sans); color: var(--faint); }
.f-row .v.muted { font-weight: 450; color: var(--muted); }
.f-row .v.blue { color: var(--blue-600); }
.f-row .v.big { font: 800 17px/1.1 var(--display); }
.f-row .chev { width: 16px; height: 16px; color: #c3c9d3; stroke-width: 2.4; }
.f-row .tile { width: 34px; height: 34px; border-radius: 10px; }
.f-row .tile .ic { width: 18px; height: 18px; }
.f-row.red .k { color: var(--red-600); font-weight: 550; }
.f-row.center { justify-content: center; }
.form-label { margin: 18px 6px 8px; font: 600 12px/1 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.form-note { margin: 8px 6px 0; font: 450 12.5px/1.45 var(--sans); color: var(--muted); }
.box { display: inline-block; min-width: 86px; height: 34px; padding: 0 10px; border-radius: 10px; background: #f3f5f9; box-shadow: inset 0 0 0 1px #e1e6ee; font: 750 15px/34px var(--display); text-align: right; color: var(--ink); }
.box.focus { background: #fff; box-shadow: inset 0 0 0 2px var(--blue-600); }

/* switch, checkbox, radio */
.switch { position: relative; flex: none; width: 51px; height: 31px; border-radius: 999px; background: #e3e6eb; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.08); }
.switch.on { background: #34c759; }
.switch.on::after { left: 22px; }
.chk { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1.6px #c6cdd8; color: #fff; }
.chk.on { background: var(--blue-600); box-shadow: none; }
.chk .ic { width: 15px; height: 15px; stroke-width: 3.2; }
.radio { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px #c6cdd8; color: #fff; }
.radio.on { background: var(--blue-600); box-shadow: none; }
.radio .ic { width: 14px; height: 14px; stroke-width: 3.2; }

/* password rules */
.checks { display: grid; gap: 10px; margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -14px rgba(13, 30, 60, 0.16); }
.checks li { display: flex; align-items: center; gap: 10px; font: 500 14px/1.2 var(--sans); color: var(--ink-2); }
.checks .ok { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--green-500); color: #fff; }
.checks .ok .ic { width: 12px; height: 12px; stroke-width: 3.4; }
.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 10px 4px 0; }
.strength i { height: 5px; border-radius: 3px; background: #e3e8ef; }
.strength i.on { background: var(--green-500); }
.strength-l { display: flex; justify-content: space-between; margin: 7px 4px 0; font: 650 12px/1 var(--sans); color: var(--green-600); }
.strength-l span { font-weight: 500; color: var(--faint); }

/* banners */
.banner { display: flex; gap: 11px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; font: 450 13px/1.45 var(--sans); }
.banner > .ic { width: 18px; height: 18px; margin-top: 1px; }
.banner b { font-weight: 650; }
.banner.blue { background: var(--blue-50); color: #17407f; }
.banner.amber { background: var(--amber-50); color: #6b4200; }
.banner.green { background: var(--green-50); color: #0d5a3a; }
.banner.gray { background: #eceff4; color: var(--ink-2); }
.banner.violet { background: var(--violet-50); color: #3d2a9a; }

/* ---------- sign-in ---------- */
.auth-hero { position: relative; height: 336px; margin-top: -54px; padding: 104px 26px 0; overflow: hidden; border-radius: 0 0 34px 34px; color: #fff;
  background: radial-gradient(300px 220px at 100% 0%, rgba(245, 124, 0, 0.5), transparent 70%), radial-gradient(320px 240px at 0% 100%, rgba(43, 107, 224, 0.6), transparent 70%), linear-gradient(165deg, #123a7a, #0a2150 55%, #071a3a); }
.auth-hero::after { content: ""; position: absolute; right: -60px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.025), 0 0 0 80px rgba(255, 255, 255, 0.02); }
.auth-hero .logo { width: 64px; height: 64px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.55); }
.auth-hero h1 { margin-top: 22px; font: 800 30px/1.1 var(--display); letter-spacing: -0.03em; }
.auth-hero p { margin-top: 8px; font: 450 15px/1.45 var(--sans); color: rgba(255, 255, 255, 0.72); }
.auth-hero .ai-lang { position: absolute; top: 62px; right: 18px; }
.auth-card { position: relative; z-index: 2; margin: -48px 16px 0; padding: 4px 18px 20px; border-radius: 24px; background: #fff; box-shadow: 0 24px 48px -24px rgba(10, 33, 80, 0.4), 0 0 0 0.5px rgba(13, 30, 60, 0.06); }
.forgot { display: block; margin: 12px 4px 16px; font: 600 13.5px/1 var(--sans); text-align: right; color: var(--blue-600); }
.auth-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; font: 500 12px/1 var(--sans); color: var(--faint); }
.auth-foot .ic { width: 14px; height: 14px; color: var(--green-600); }
.ai-lang { display: flex; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2); font: 650 12.5px/1 var(--sans); }
.ai-lang span { padding: 7px 10px; border-radius: 8px; color: rgba(255, 255, 255, 0.65); }
.ai-lang .on { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* devices */
.dev { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: #f0f3f7; color: var(--ink-2); }
.dev .ic { width: 21px; height: 21px; }
.here { font: 650 11.5px/1 var(--sans); color: var(--green-600); }

/* ---------- bottom sheets and dimming ---------- */
.dim { position: absolute; inset: 0; z-index: 62; background: rgba(5, 12, 28, 0.45); }
.sheet { position: absolute; z-index: 63; left: 0; right: 0; bottom: 0; padding: 8px 16px 40px; border-radius: 30px 30px 0 0; background: #f6f7fa; box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, 0.35); }
.grabber { width: 38px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: #d0d5dd; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; margin: 4px 4px 14px; }
.sheet-h b { font: 750 19px/1 var(--display); letter-spacing: -0.015em; }
.sheet-h .x { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e7eaf0; color: var(--muted); }
.sheet-h .x .ic { width: 15px; height: 15px; stroke-width: 2.8; }

/* company choice */
.co-opt { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 0.5px var(--line), 0 6px 16px -12px rgba(13, 30, 60, 0.3); }
.co-opt + .co-opt { margin-top: 10px; }
.co-opt.on { box-shadow: inset 0 0 0 2px var(--blue-600), 0 6px 16px -12px rgba(13, 30, 60, 0.3); }
.co-logo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; font: 800 15px/1 var(--display); color: #fff; }
.co-logo.lg { width: 56px; height: 56px; border-radius: 17px; font-size: 19px; }
.cl-blue { background: linear-gradient(140deg, #2b6be0, #0a2150); }
.cl-orange { background: linear-gradient(140deg, #fd9a2a, #c2410c); }
.cl-gray { background: #eef1f6; color: var(--ink-2); }
.cl-gray .ic { width: 22px; height: 22px; }
.tagline { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tagline .pill { height: 20px; padding: 0 7px; font-size: 10.5px; }

/* ---------- document previews (LR, invoice) ---------- */
.doc { position: relative; margin-top: 14px; padding: 16px 15px 14px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 22px 40px -20px rgba(10, 33, 80, 0.4); font: 450 8.5px/1.35 var(--sans); color: #2a3443; }
.doc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1.5px solid var(--navy-900); }
.doc-h .co { display: flex; gap: 8px; }
.doc-h .co img { width: 28px; height: 28px; object-fit: contain; }
.doc-h b { display: block; font: 800 11.5px/1.1 var(--display); color: var(--navy-950); }
.doc-h small { display: block; margin-top: 2px; font-size: 7px; line-height: 1.3; color: #6b7685; }
.doc-title { font: 800 10px/1.15 var(--display); letter-spacing: 0.08em; text-align: right; color: var(--navy-900); }
.doc-title small { margin-top: 3px; font: 600 7.5px/1.3 var(--sans); letter-spacing: 0; color: #6b7685; }
.doc-copy { display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: 3px; background: var(--orange-50); font: 800 6.5px/1.2 var(--sans); letter-spacing: 0.1em; color: var(--orange-600); }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 10px; }
.doc-grid span { display: block; font: 700 6.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #8a94a4; }
.doc-grid b { display: block; margin-top: 3px; font: 650 8.5px/1.3 var(--sans); color: #1b2533; }
.doc table { width: 100%; margin-top: 10px; border-collapse: collapse; }
.doc th, .doc td { padding: 4px 5px; text-align: left; }
.doc th { background: #eef2f8; font: 700 6.5px/1.1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: #4b5768; }
.doc td { border-bottom: 0.5px solid #e3e8ef; font-size: 8px; }
.doc .r { text-align: right; }
.doc-sum { display: grid; gap: 3px; margin: 8px 0 0 auto; width: 58%; font-size: 8px; }
.doc-sum div { display: flex; justify-content: space-between; }
.doc-total { display: flex; justify-content: space-between; margin-top: 6px; padding: 6px 8px; border-radius: 4px; background: var(--navy-900); font: 800 9.5px/1 var(--display); color: #fff; }
.doc-words { margin-top: 6px; font: 500 7.5px/1.35 var(--sans); color: #4b5768; }
.doc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 7px; color: #6b7685; }
.doc-foot .sign { text-align: center; }
.doc-foot .sign i { display: block; width: 76px; height: 16px; margin-bottom: 3px; border-bottom: 1px solid #9aa3b0; font: italic 600 11px/16px Georgia, serif; color: #23408f; }
.doc-band { margin: -16px -15px 10px; padding: 12px 15px; border-radius: 6px 6px 0 0; background: linear-gradient(120deg, #0a2150, #123a7a); color: #fff; }
.doc-band b { color: #fff; }
.doc-band small { color: rgba(255, 255, 255, 0.7); }
.doc-band .doc-title { color: #fff; }
.doc-band .doc-title small { color: rgba(255, 255, 255, 0.7); }
.doc-msme { margin-top: 8px; padding: 5px 7px; border-radius: 3px; background: #f4f6f9; font-size: 6.5px; line-height: 1.35; color: #6b7685; }
.designs { display: flex; gap: 8px; margin: 12px -16px 0; padding: 0 16px; overflow: hidden; }
.dz { flex: none; display: grid; justify-items: center; gap: 5px; font: 600 11px/1 var(--sans); color: var(--muted); }
.dz i { display: block; width: 46px; height: 58px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px #e1e6ee; }
.dz.on { color: var(--blue-600); }
.dz.on i { box-shadow: 0 0 0 2px var(--blue-600); }
.dz .d1 { background: linear-gradient(#0a2150 0 26%, #fff 26%); }
.dz .d2 { background: linear-gradient(#fff 0 8%, #f57c00 8% 13%, #fff 13%); }
.dz .d3 { background: linear-gradient(90deg, #1652b8 0 14%, #fff 14%); }
.dz .d4 { background: linear-gradient(#fff 0 22%, #e8ecf2 22% 25%, #fff 25%); }
.dz .d5 { background: linear-gradient(#123a7a 0 18%, #fff 18% 80%, #eef2f8 80%); }

/* share sheet */
.share-file { display: flex; align-items: center; gap: 12px; padding: 2px 4px 14px; border-bottom: 0.5px solid var(--line); }
.file-thumb { display: grid; place-items: end center; flex: none; width: 44px; height: 56px; padding-bottom: 6px; border-radius: 7px; background: linear-gradient(#fff 0 70%, #fdeced 70%); box-shadow: 0 0 0 0.5px var(--line), 0 6px 12px -6px rgba(0, 0, 0, 0.25); font: 800 9px/1 var(--sans); color: var(--red-600); }
.share-file > div > b { display: block; font: 650 15px/1.2 var(--sans); }
.share-file > div > span { display: block; margin-top: 3px; font: 450 12.5px/1.2 var(--sans); color: var(--muted); }
.share-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 16px 0 14px; }
.sa { display: grid; justify-items: center; gap: 7px; font: 500 11.5px/1 var(--sans); color: var(--ink-2); }
.sa i { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; color: #fff; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.45); }
.sa i .ic { width: 28px; height: 28px; }
.sa-wa { background: linear-gradient(160deg, #4be08f, #12a366); }
.sa-gm { background: linear-gradient(160deg, #ff7a6b, #d93a3f); }
.sa-msg { background: linear-gradient(160deg, #6af59a, #2fb457); }
.sa-files { background: linear-gradient(160deg, #6bb8ff, #1b6fe0); }

/* ---------- steps (trip wizard) ---------- */
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.steps4 div { font: 600 11.5px/1 var(--sans); color: var(--faint); }
.steps4 i { display: block; height: 4px; margin-bottom: 7px; border-radius: 2px; background: #e3e8ef; }
.steps4 .done { color: var(--green-600); }
.steps4 .done i { background: var(--green-500); }
.steps4 .now { color: var(--blue-600); }
.steps4 .now i { background: var(--blue-600); }

/* option tiles */
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opts.one { grid-template-columns: 1fr; }
.opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #dfe4ec; font: 600 13px/1.25 var(--sans); color: var(--ink-2); }
.opt small { display: block; margin-top: 3px; font: 450 11.5px/1.3 var(--sans); color: var(--faint); }
.opt.on { background: var(--blue-50); box-shadow: inset 0 0 0 2px var(--blue-600); color: var(--blue-700); }
.opt.on small { color: #4a6fae; }

/* navy result card */
.result { position: relative; margin-top: 12px; padding: 16px 18px; overflow: hidden; border-radius: 22px; color: #fff; background: radial-gradient(220px 140px at 100% 0%, rgba(245, 124, 0, 0.4), transparent 70%), linear-gradient(160deg, #123a7a, #0a2150 55%, #071a3a); box-shadow: 0 20px 36px -22px rgba(7, 26, 58, 0.9); }
.result small { display: block; font: 500 12.5px/1 var(--sans); color: rgba(255, 255, 255, 0.7); }
.result b { display: block; margin-top: 8px; font: 800 32px/1 var(--display); letter-spacing: -0.03em; }
.result p { margin-top: 6px; font: 450 12.5px/1.35 var(--sans); color: rgba(255, 255, 255, 0.7); }
.result .r { position: absolute; top: 16px; right: 18px; text-align: right; }
.result .r b { font-size: 20px; color: #6ee7b7; }

/* bottom bar with a total */
.actionbar.one { grid-template-columns: 1fr; }
.actionbar.sum { grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
.actionbar.sum .s small { display: block; font: 500 12px/1 var(--sans); color: var(--muted); }
.actionbar.sum .s b { display: block; margin-top: 4px; font: 800 20px/1 var(--display); letter-spacing: -0.02em; }
.btn-green { background: linear-gradient(180deg, #14a86a, #0b8a55); color: #fff; box-shadow: 0 10px 22px -10px rgba(11, 138, 85, 0.8); }

/* ---------- trips ---------- */
.trip { padding: 14px; }
.trip-top { display: flex; align-items: center; gap: 8px; }
.trip-top .lrno { font: 750 13px/1 var(--display); color: var(--muted); }
.trip-top .amt { margin-left: auto; font: 800 15px/1 var(--display); letter-spacing: -0.01em; }
.trip-route { display: flex; align-items: center; gap: 7px; margin-top: 11px; font: 650 15px/1.2 var(--sans); }
.trip-route .ic { width: 15px; height: 15px; color: var(--faint); stroke-width: 2.2; }
.trip-route s { font-weight: 450; color: var(--faint); }
.trip-sub { margin-top: 5px; font: 450 12.5px/1.3 var(--sans); color: var(--muted); }
.trip-foot { display: flex; align-items: center; gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 0.5px solid var(--line); font: 500 12.5px/1.2 var(--sans); color: var(--muted); }
.trip-foot .av { width: 22px; height: 22px; font-size: 9px; }
.trip-foot b { font-weight: 650; color: var(--ink-2); }
.trip-foot .r { margin-left: auto; }

/* vertical timeline */
.tl { margin-top: 2px; }
.tl li { position: relative; display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; padding-bottom: 15px; }
.tl li::before { content: ""; position: absolute; top: 26px; bottom: 2px; left: 11px; width: 2px; border-radius: 1px; background: #e3e8ef; }
.tl li:last-child { padding-bottom: 0; }
.tl li:last-child::before { display: none; }
.tl li.done::before { background: var(--green-500); }
.tl .d { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eef1f6; color: var(--faint); }
.tl .d .ic { width: 13px; height: 13px; stroke-width: 3; }
.tl .done .d { background: var(--green-500); color: #fff; }
.tl .now .d { background: #fff; box-shadow: inset 0 0 0 2px var(--blue-600); }
.tl .now .d::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--blue-600); }
.tl .d.g { background: var(--green-50); color: var(--green-600); }
.tl .d.r { background: var(--red-50); color: var(--red-600); }
.tl .d.b { background: var(--blue-50); color: var(--blue-600); }
.tl .d.o { background: var(--orange-50); color: var(--orange-600); }
.tl .d.v { background: var(--violet-50); color: var(--violet-600); }
.tl b { display: block; font: 650 14px/1.3 var(--sans); }
.tl span { display: block; margin-top: 3px; font: 450 12.5px/1.35 var(--sans); color: var(--muted); }
.tl time { font: 500 12px/1.3 var(--sans); color: var(--faint); white-space: nowrap; }
.tl q { display: block; margin-top: 5px; padding: 6px 9px; border-radius: 9px; background: #f3f5f9; font: 450 12.5px/1.35 var(--sans); color: var(--ink-2); }
.tl q::before, .tl q::after { content: ""; }

/* ---------- ledger and day book ---------- */
.lg-row { position: relative; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 11px 14px; }
.lg-row + .lg-row::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 0.5px; background: var(--line); }
.lg-date { text-align: center; font: 800 15px/1 var(--display); }
.lg-date small { display: block; margin-top: 3px; font: 700 9px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.lg-main b { display: block; font: 600 14px/1.2 var(--sans); }
.lg-main span { display: block; margin-top: 3px; font: 450 12px/1.25 var(--sans); color: var(--muted); }
.lg-amt { text-align: right; }
.lg-amt b { display: block; font: 800 14px/1 var(--display); }
.lg-amt b.cr { color: var(--green-600); }
.lg-amt small { display: block; margin-top: 4px; font: 500 11px/1 var(--sans); color: var(--faint); }
.bal-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.bal-strip div { padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -14px rgba(13, 30, 60, 0.16); }
.bal-strip small { display: block; font: 550 12px/1 var(--sans); color: var(--muted); }
.bal-strip b { display: block; margin-top: 7px; font: 800 18px/1 var(--display); letter-spacing: -0.02em; }
.bal-strip b em { font: 600 11px/1 var(--sans); font-style: normal; color: var(--faint); }
.vch { padding: 13px 14px; }
.vch-top { display: flex; align-items: center; gap: 8px; }
.vch-top b { font: 650 14px/1.2 var(--sans); }
.vch-top .amt { margin-left: auto; font: 800 14.5px/1 var(--display); }
.vch-lines { display: grid; gap: 5px; margin-top: 10px; padding: 9px 11px; border-radius: 12px; background: #f5f7fa; font: 500 12px/1.2 var(--sans); color: var(--ink-2); }
.vch-lines div { display: grid; grid-template-columns: 24px 1fr auto; gap: 6px; }
.vch-lines i { font-style: normal; font-weight: 700; color: var(--faint); }
.vch-lines b { font: 700 12px/1.2 var(--display); }
.balanced { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 13px 16px; border-radius: 18px; background: var(--green-50); box-shadow: inset 0 0 0 0.5px rgba(11, 138, 85, 0.25); }
.balanced div small { display: block; font: 550 11.5px/1 var(--sans); color: #0d5a3a; opacity: 0.8; }
.balanced div b { display: block; margin-top: 5px; font: 800 17px/1 var(--display); color: #0b3d28; }
.balanced .eq { font: 800 18px/1 var(--display); color: var(--green-600); }
.date-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 0.5px var(--line); font: 650 14.5px/1 var(--sans); }
.date-nav span.a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #f3f5f9; color: var(--ink-2); }
.date-nav .ic { width: 17px; height: 17px; stroke-width: 2.4; }

/* ---------- module grid and profile ---------- */
.profile { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -14px rgba(13, 30, 60, 0.16); }
.profile > div > b { display: block; font: 700 16px/1.2 var(--sans); }
.profile > div > span { display: block; margin-top: 3px; font: 450 12.5px/1.2 var(--sans); color: var(--muted); }
.profile .chev { width: 18px; height: 18px; margin-left: auto; color: #c3c9d3; stroke-width: 2.4; }
.mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 6px; margin-top: 12px; padding: 16px 10px; border-radius: 22px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -14px rgba(13, 30, 60, 0.16); }
.mod { position: relative; display: grid; justify-items: center; gap: 7px; text-align: center; font: 600 11.5px/1.15 var(--sans); color: var(--ink-2); }
.mod i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; }
.mod i .ic { width: 23px; height: 23px; }
.mod.off { color: var(--faint); }
.mod.off i { background: #f1f3f6; color: #b5bcc8; }
.mod .lock { position: absolute; top: -3px; right: 10px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #e4e8ee; color: var(--muted); }
.mod .lock .ic { width: 11px; height: 11px; stroke-width: 2.6; }

/* staff home */
.role-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; margin-top: 10px; padding: 0 10px; border-radius: 999px; background: var(--violet-50); font: 650 12px/1 var(--sans); color: var(--violet-600); }
.role-chip .ic { width: 14px; height: 14px; }
.work { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.work div { padding: 14px; border-radius: 20px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -14px rgba(13, 30, 60, 0.18); }
.work .tile { width: 32px; height: 32px; border-radius: 10px; }
.work .tile .ic { width: 17px; height: 17px; }
.work b { display: block; margin-top: 10px; font: 800 26px/1 var(--display); letter-spacing: -0.03em; }
.work span { display: block; margin-top: 4px; font: 600 13px/1.2 var(--sans); }
.work small { display: block; margin-top: 2px; font: 450 11.5px/1.2 var(--sans); color: var(--muted); }
.qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qa div { display: grid; justify-items: center; gap: 8px; padding: 13px 2px 11px; border-radius: 18px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -14px rgba(13, 30, 60, 0.18); font: 600 11.5px/1.15 var(--sans); text-align: center; color: var(--ink-2); }
.qa i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; }
.qa i .ic { width: 20px; height: 20px; }

/* ---------- notifications ---------- */
.ntf { position: relative; display: flex; gap: 12px; padding: 13px 14px; }
.ntf + .ntf::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 0.5px; background: var(--line); }
.ntf .tile { width: 38px; height: 38px; }
.ntf .c-main b { white-space: normal; padding-right: 50px; }
.ntf time { position: absolute; top: 14px; right: 14px; font: 500 11.5px/1 var(--sans); color: var(--faint); }
.ntf.unread time { color: var(--blue-600); font-weight: 650; }
.ntf.unread .c-main > span { padding-right: 18px; }
.ntf.unread::after { content: ""; position: absolute; top: 31px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-600); }
.ntf-act { display: flex; gap: 8px; margin-top: 9px; }
.ntf-act span { height: 30px; padding: 0 12px; border-radius: 9px; background: #f1f4f8; font: 650 12.5px/30px var(--sans); color: var(--ink-2); }
.ntf-act .pri { background: var(--navy-900); color: #fff; }

/* lock screen */
.lock-wall { position: absolute; inset: 0; background: radial-gradient(260px 200px at 50% 108%, rgba(253, 154, 42, 0.95), rgba(245, 124, 0, 0.5) 45%, transparent 75%), radial-gradient(420px 360px at 0% 30%, rgba(43, 107, 224, 0.55), transparent 70%), linear-gradient(185deg, #061633 0%, #0b2a5b 45%, #1d3f86 72%, #6c4a7c 100%); }
.lock-wall::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 190px; background: linear-gradient(176deg, transparent 0 40%, rgba(4, 12, 28, 0.85) 41%); }
.lock-ui { position: absolute; inset: 0; z-index: 2; padding-top: 54px; color: #fff; }
.lock-ic { display: grid; place-items: center; margin-top: 4px; }
.lock-ic .ic { width: 18px; height: 18px; color: rgba(255, 255, 255, 0.85); }
.lock-date { margin-top: 10px; font: 600 19px/1 var(--sans); text-align: center; color: rgba(255, 255, 255, 0.86); }
.lock-time { margin-top: 2px; font: 700 92px/1 var(--display); letter-spacing: -0.04em; text-align: center; color: rgba(255, 255, 255, 0.94); }
.lock-list { position: absolute; left: 10px; right: 10px; bottom: 112px; display: grid; gap: 8px; }
.lk { padding: 12px 14px 13px; border-radius: 22px; background: rgba(245, 247, 252, 0.72); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); color: #0b1526; }
.lk-app { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--sans); letter-spacing: 0.02em; text-transform: uppercase; color: rgba(11, 21, 38, 0.6); }
.lk-app img { width: 22px; height: 22px; padding: 2px; border-radius: 6px; background: #fff; object-fit: contain; }
.lk-app time { margin-left: auto; text-transform: none; letter-spacing: 0; }
.lk b { display: block; margin-top: 7px; font: 650 14.5px/1.25 var(--sans); }
.lk p { margin-top: 2px; font: 450 14px/1.35 var(--sans); color: #273244; }
.lk.stacked { position: relative; }
.lk.stacked::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -7px; height: 12px; border-radius: 0 0 16px 16px; background: rgba(245, 247, 252, 0.45); z-index: -1; }
.lock-btns { position: absolute; left: 46px; right: 46px; bottom: 44px; display: flex; justify-content: space-between; }
.lock-btns span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(10, 18, 36, 0.4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; }
.lock-btns .ic { width: 22px; height: 22px; }

/* ranking rows (fleet performance) */
.rank-row { display: grid; grid-template-columns: 18px auto 1fr auto; align-items: center; gap: 10px; padding: 9px 0; }
.rank-row + .rank-row { border-top: 0.5px solid var(--line); }
.rank-row .n { font: 800 12px/1 var(--display); color: var(--faint); }
.rank-row .bar { height: 7px; border-radius: 4px; background: #eef1f6; overflow: hidden; }
.rank-row .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #1652b8, #5b8cf0); }
.rank-row:first-child .bar i { background: linear-gradient(90deg, #e26d00, #fdba74); }
.rank-row .val { text-align: right; }
.rank-row .val b { display: block; font: 800 13.5px/1 var(--display); }
.rank-row .val small { display: block; margin-top: 3px; font: 600 11px/1 var(--sans); color: var(--green-600); }
.kpi3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.kpi3 .kpi { padding: 12px; }
.kpi3 .kpi b { font-size: 19px; }

/* misc */
.thumb { display: grid; place-items: center; flex: none; width: 46px; height: 56px; border-radius: 9px; background: linear-gradient(180deg, #ffffff, #eef1f5); box-shadow: 0 0 0 0.5px var(--line), 0 6px 12px -8px rgba(0, 0, 0, 0.35); color: var(--faint); }
.thumb .ic { width: 20px; height: 20px; }
.big-short { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.big-short b { font: 800 34px/1 var(--display); letter-spacing: -0.03em; color: var(--red-600); }
.big-short span { font: 600 13px/1 var(--sans); color: var(--muted); }
.limit-bar { position: relative; height: 12px; margin: 16px 0 6px; border-radius: 6px; background: #eef1f6; }
.limit-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; }
.limit-bar .ok { background: var(--amber-500); }
.limit-bar .over { background: repeating-linear-gradient(-45deg, var(--red-500) 0 5px, #f07a7e 5px 10px); }
.limit-bar em { position: absolute; top: -5px; bottom: -5px; width: 2px; border-radius: 1px; background: var(--ink); }
.limit-scale { display: flex; justify-content: space-between; font: 550 11.5px/1 var(--sans); color: var(--muted); }
.limit-scale b { color: var(--ink); }
.unit-tog { margin-left: auto; }
.mini-actions { display: flex; gap: 8px; margin-top: 12px; }
.mini-actions span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border-radius: 13px; background: #fff; box-shadow: 0 0 0 0.5px var(--line), 0 1px 2px rgba(13, 30, 60, 0.05); font: 650 13.5px/1 var(--sans); color: var(--ink-2); }
.mini-actions .ic { width: 17px; height: 17px; }
.mini-actions .pri { background: var(--navy-900); color: #fff; box-shadow: 0 8px 16px -10px rgba(10, 33, 80, 0.8); }
.mini-actions .wa { margin: 0; padding: 0; background: var(--green-600); color: #fff; box-shadow: 0 8px 16px -10px rgba(11, 138, 85, 0.8); }
.person { display: grid; justify-items: center; gap: 6px; padding-top: 4px; text-align: center; }
.person .av { width: 72px; height: 72px; font-size: 22px; box-shadow: 0 0 0 4px #fff, 0 14px 26px -12px rgba(10, 33, 80, 0.6); }
.person > b { margin-top: 6px; font: 800 22px/1.1 var(--display); letter-spacing: -0.02em; }
.person > span:not(.av) { font: 450 13px/1.3 var(--sans); color: var(--muted); }
.circle-acts { display: flex; justify-content: center; gap: 22px; margin-top: 14px; }
.circle-acts div { display: grid; justify-items: center; gap: 6px; font: 600 11.5px/1 var(--sans); color: var(--blue-600); }
.circle-acts i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5px var(--line), 0 6px 14px -8px rgba(13, 30, 60, 0.3); }
.circle-acts .ic { width: 20px; height: 20px; }
.sumline { display: flex; justify-content: space-between; padding: 7px 0; font: 500 13.5px/1.2 var(--sans); color: var(--ink-2); }
.sumline + .sumline { border-top: 0.5px dashed #dfe4ec; }
.sumline b { font: 750 14px/1.2 var(--display); color: var(--ink); }
.sumline.total { padding-top: 10px; border-top: 1px solid #dfe4ec !important; font-weight: 650; color: var(--ink); }
.sumline.total b { font-size: 17px; }
.sumline .neg { color: var(--red-600); }

/* ---------- smaller windows: scale the rows of phones down ---------- */
@media (max-width: 1540px) { .cv-phones { zoom: 0.9; } .cv-index { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1400px) { .cv-phones { zoom: 0.8; } .cv-head-grid { grid-template-columns: 1fr; } .cv-tokens { max-width: 560px; } }
@media (max-width: 1240px) { .canvas { padding: 48px 40px 72px; } .cv-phones { zoom: 0.7; } }
@media (max-width: 1000px) { .cv-phones { flex-wrap: wrap; justify-content: center; zoom: 0.62; } .cv-head h1 { font-size: 52px; } .cv-index { grid-template-columns: repeat(2, 1fr); } }

/* ======================================================================================
   Working prototype: scrolling, tap targets, toasts, hotspots, prototype viewer
   ====================================================================================== */
.app { display: flex; flex-direction: column; }
.app > .nav { flex: none; }
.app > .scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.app > .scroll::-webkit-scrollbar { display: none; }
.app.full { padding-top: 0; }
.scroll.flush { padding: 0 0 40px; }
.cv-phones { display: grid; grid-template-columns: repeat(3, 417px); justify-content: space-between; row-gap: 80px; }

[data-go], [data-back], [data-toast], [data-dismiss], [data-set], .tab, .switch, .chk, .seg > span, .chip, .opt, .co-opt, .dz, .lang > span, .ai-lang > span, .input, .box { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.screen [data-go]:active, .screen [data-back]:active, .screen [data-toast]:active { opacity: 0.7; }
.hotspots .screen [data-go], .hotspots .screen [data-back], .hotspots .screen [data-toast], .hotspots .screen [data-dismiss] { outline: 2px solid rgba(245, 124, 0, 0.9); outline-offset: -1px; }
.toast { position: absolute; z-index: 97; left: 50%; bottom: 112px; width: max-content; max-width: 330px; padding: 11px 16px; border-radius: 14px; background: rgba(11, 21, 38, 0.94); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.55); font: 600 13.5px/1.35 var(--sans); color: #fff; text-align: center; opacity: 0; transform: translate(-50%, 10px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.dismissing { opacity: 0 !important; transform: scale(0.97); transition: opacity 0.25s, transform 0.25s; }
.cv-shot.flash .device { outline: 5px solid var(--orange-500); outline-offset: 12px; }

/* how-to bar and buttons on the page */
.cv-how { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 30px; padding: 16px 20px; border-radius: 18px; background: var(--blue-50); font: 500 14.5px/1.5 var(--sans); color: #17407f; }
.cv-how p { flex: 1; min-width: 320px; }
.cv-how b { font-weight: 700; }
.cv-how .sp { display: flex; gap: 10px; }
.cv-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--navy-900); font: 650 14px/1 var(--sans); color: #fff; cursor: pointer; }
.cv-btn .ic { width: 17px; height: 17px; }
.cv-btn.ghost { background: #fff; box-shadow: inset 0 0 0 1px #d5dce6; color: var(--navy-900); }
.cv-btn.on { background: var(--orange-500); box-shadow: none; color: #fff; }
.cv-shot figcaption .open { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font: 650 13px/1 var(--sans); color: var(--blue-600); cursor: pointer; }

/* prototype viewer */
.proto { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto 1fr; background: #f4f6f9; }
.proto[hidden] { display: none; }
.proto-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 24px; background: #fff; border-bottom: 1px solid #e6eaf0; }
.proto-bar .cv-brand { font-size: 15px; }
.proto-bar .cv-brand img { width: 34px; height: 34px; }
.proto-bar .sp { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.proto-seg { display: flex; padding: 3px; border-radius: 12px; background: #eef1f5; }
.proto-seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font: 600 13px/1 var(--sans); color: var(--ink-2); cursor: pointer; }
.proto-seg button.on { background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); color: var(--ink); }
.proto-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 40px; min-height: 0; padding: 20px 32px; overflow: auto; }
.proto-left { display: flex; justify-content: flex-end; }
.proto-card { width: 100%; max-width: 380px; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid #e6eaf0; }
.proto-card + .proto-card { margin-top: 14px; }
.proto-card small { font: 700 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.proto-card h3 { margin-top: 8px; font: 800 22px/1.2 var(--display); color: var(--navy-950); }
.proto-card p { margin-top: 6px; font: 400 14px/1.5 var(--sans); color: var(--muted); }
.proto-card select { width: 100%; height: 42px; margin-top: 10px; padding: 0 12px; border: 1px solid #dfe4ec; border-radius: 12px; background: #fff; font: 500 14px var(--sans); color: var(--ink); }
.proto-trail { margin-top: 10px; font: 500 12.5px/1.6 var(--sans); color: var(--muted); }
.proto-links { display: grid; gap: 6px; max-height: 44vh; margin-top: 12px; overflow: auto; }
.proto-links button { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #edf0f4; border-radius: 11px; background: #fafbfc; font: 500 13px/1.3 var(--sans); text-align: left; color: var(--ink-2); cursor: pointer; }
.proto-links button b { margin-left: auto; font-weight: 650; white-space: nowrap; color: var(--blue-600); }
.proto-links button:hover { border-color: var(--blue-100); background: var(--blue-50); }
.proto-links .none { font: 450 13px/1.4 var(--sans); color: var(--faint); }

/* connection map */
.cv-map { margin-top: 96px; padding-top: 56px; border-top: 1px solid #edf0f4; }
.cv-map > h2 { font: 800 32px/1.1 var(--display); letter-spacing: -0.025em; color: var(--navy-950); }
.cv-map > p { max-width: 900px; margin-top: 8px; font: 400 16px/1.55 var(--sans); color: var(--muted); }
.map-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.map-stats span { height: 32px; padding: 0 14px; border-radius: 999px; background: var(--green-50); font: 650 13px/32px var(--sans); color: var(--green-600); }
.map-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.map-mod { padding: 18px 18px 14px; border-radius: 18px; border: 1px solid #e8ecf1; background: #fff; }
.map-mod h3 { font: 800 16px/1.2 var(--display); color: var(--navy-950); }
.map-scr { margin-top: 12px; }
.map-scr > b { display: block; font: 650 13.5px/1.3 var(--sans); color: var(--ink); cursor: pointer; }
.map-scr ul { display: grid; gap: 2px; margin-top: 4px; }
.map-scr li { font: 450 12.5px/1.45 var(--sans); color: var(--muted); }
.map-scr li a { color: var(--blue-600); cursor: pointer; }

/* ---------- screens added for the connections ---------- */
.done-hero { display: grid; justify-items: center; gap: 10px; padding: 34px 8px 6px; text-align: center; }
.done-ic { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--green-50); color: var(--green-600); box-shadow: 0 0 0 10px rgba(18, 163, 102, 0.08); }
.done-ic .ic { width: 42px; height: 42px; stroke-width: 2.4; }
.done-hero h2 { margin-top: 12px; font: 800 26px/1.15 var(--display); letter-spacing: -0.025em; }
.done-hero p { max-width: 310px; font: 450 14.5px/1.5 var(--sans); color: var(--muted); }
.faceid-card { position: absolute; z-index: 64; top: 50%; left: 50%; display: grid; place-items: center; align-content: center; gap: 14px; width: 172px; height: 172px; margin: -86px 0 0 -86px; border-radius: 34px; background: rgba(250, 251, 253, 0.92); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5); font: 600 15px/1 var(--sans); color: var(--ink); }
.faceid-card .ic { width: 66px; height: 66px; stroke-width: 1.6; color: var(--green-500); }
.btn-danger { background: linear-gradient(180deg, #e5484d, #c62f35); box-shadow: 0 10px 22px -10px rgba(209, 52, 58, 0.8); color: #fff; }
.input.area { align-items: flex-start; height: auto; min-height: 92px; padding: 13px 14px; font: 450 15px/1.45 var(--sans); }
.big-lr { padding: 6px 0 4px; text-align: center; }
.big-lr small { font: 600 12px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.big-lr b { display: block; margin-top: 6px; font: 800 40px/1 var(--display); letter-spacing: -0.03em; }
.match { padding: 13px 14px; }
.match-top { display: flex; align-items: center; gap: 8px; font: 600 12px/1.3 var(--sans); color: var(--muted); }
.match-top b { margin-left: auto; font: 800 15px/1 var(--display); color: var(--ink); }
.match-line { margin-top: 6px; font: 650 14px/1.3 var(--sans); }
.match-sug { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 11px; border-radius: 12px; background: var(--green-50); font: 500 12.5px/1.35 var(--sans); color: #0d5a3a; }
.match-sug > .ic { flex: none; width: 16px; height: 16px; }
.match-sug span { flex: 1; }
.match-sug .go { flex: none; padding: 7px 12px; border-radius: 9px; background: var(--green-600); font: 650 12.5px/1 var(--sans); color: #fff; }
.match-alt { display: flex; gap: 16px; margin-top: 9px; font: 600 12.5px/1 var(--sans); color: var(--blue-600); }
.co-mark { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; font: 800 12.5px/1 var(--display); color: #fff; }
.slip-stamp { display: inline-block; margin-top: 8px; padding: 4px 9px; border: 1.5px solid var(--violet-600); border-radius: 4px; font: 800 8px/1 var(--sans); letter-spacing: 0.14em; color: var(--violet-600); transform: rotate(-4deg); }

/* ---------- audit 2: states, roles and screens added ---------- */
.banner.red { background: var(--red-50); color: #7a1f23; }
.input.error { box-shadow: inset 0 0 0 2px var(--red-500), 0 0 0 4px rgba(229, 72, 77, 0.12); }
.input.off, .btn.off { opacity: 0.45; pointer-events: none; }
.input.empty { color: var(--faint); }
.err-text { margin: 7px 4px 0; font: 600 12.5px/1.3 var(--sans); color: var(--red-600); }
.qr { position: relative; width: 168px; height: 168px; margin: 14px auto 4px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #e4e8ee, 0 14px 30px -18px rgba(10, 33, 80, 0.5); }
.qr i { position: absolute; inset: 12px; background:
  repeating-conic-gradient(#0b1526 0 25%, transparent 0 50%) 0 0 / 12px 12px,
  repeating-conic-gradient(#0b1526 0 25%, transparent 0 50%) 3px 9px / 18px 18px; opacity: 0.9; }
.qr b { position: absolute; width: 38px; height: 38px; border: 6px solid #0b1526; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 14px #0b1526; }
.qr b:nth-of-type(1) { top: 10px; left: 10px; }
.qr b:nth-of-type(2) { top: 10px; right: 10px; }
.qr b:nth-of-type(3) { bottom: 10px; left: 10px; }
.key-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 0.5px var(--line); font: 700 15px/1 var(--display); letter-spacing: 0.08em; }
.key-line span { font: 600 13px/1 var(--sans); letter-spacing: 0; color: var(--blue-600); }
.code-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px; }
.code-boxes span { display: grid; place-items: center; height: 52px; border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 1px #dfe4ec; font: 800 22px/1 var(--display); }
.code-boxes span.on { box-shadow: inset 0 0 0 2px var(--blue-600); }
.ac { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; }
.ac + .ac::before { content: ""; position: absolute; top: 0; left: 18px; right: 0; height: 0.5px; background: var(--line); }
.ac::after { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 4px; border-radius: 0 3px 3px 0; }
.ac.red::after { background: var(--red-500); }
.ac.amber::after { background: var(--amber-500); }
.ac.green::after { background: var(--green-500); }
.ac .c-main b { white-space: normal; }
.ac-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.ac-sum div { padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -14px rgba(13, 30, 60, 0.16); }
.ac-sum b { display: block; font: 800 24px/1 var(--display); }
.ac-sum small { display: block; margin-top: 4px; font: 600 12px/1 var(--sans); color: var(--muted); }
.ac-sum .r b { color: var(--red-600); }
.ac-sum .a b { color: var(--amber-700); }
.ac-sum .g b { color: var(--green-600); }
.search.top { margin-top: 2px; background: #fff; box-shadow: inset 0 0 0 2px var(--blue-600); color: var(--ink); }
.search-head { display: flex; align-items: center; gap: 10px; padding: 6px 16px 8px; }
.search-head .search { flex: 1; }
.req.locked { opacity: 0.62; }
.req.locked .req-foot .lockpill { margin-left: auto; }
.role-chip.blue { background: var(--blue-50); color: var(--blue-600); }
.role-chip.gray { background: #eceff4; color: var(--ink-2); }
.drcr { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 12px 16px; position: relative; }
.drcr + .drcr::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--line); }
.drcr i { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 8px; background: #eef1f6; font: 800 11.5px/1 var(--display); font-style: normal; color: var(--muted); }
.drcr i.cr { background: var(--green-50); color: var(--green-600); }
.drcr b { font: 600 14px/1.25 var(--sans); }
.drcr b small { display: block; margin-top: 3px; font: 450 12px/1.2 var(--sans); color: var(--muted); }
.cv-cover { margin-top: 96px; padding-top: 56px; border-top: 1px solid #edf0f4; }
.cv-cover > h2 { font: 800 32px/1.1 var(--display); letter-spacing: -0.025em; color: var(--navy-950); }
.cv-cover > p { max-width: 900px; margin-top: 8px; font: 400 16px/1.55 var(--sans); color: var(--muted); }
.cover-table { width: 100%; margin-top: 24px; border-collapse: separate; border-spacing: 0; font: 450 14px/1.45 var(--sans); color: var(--ink-2); }
.cover-table th { position: sticky; top: 0; padding: 12px 14px; background: #f4f6f9; font: 700 12px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--muted); }
.cover-table td { padding: 11px 14px; border-bottom: 1px solid #edf0f4; vertical-align: top; }
.cover-table td.cov-mod { font-weight: 650; color: var(--navy-950); white-space: nowrap; }
.cover-table td a { color: var(--blue-600); cursor: pointer; }
.cover-table .ok { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--green-50); font: 650 12px/1.5 var(--sans); color: var(--green-600); white-space: nowrap; }
.role-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 20px; }
.role-grid div { padding: 16px; border-radius: 16px; border: 1px solid #e8ecf1; background: #fff; font: 450 13px/1.5 var(--sans); color: var(--muted); }
.role-grid b { display: block; margin-bottom: 6px; font: 800 15px/1.2 var(--display); color: var(--navy-950); }
.cover-table td.cov-mod small { display: block; margin-top: 3px; font: 450 12.5px/1.4 var(--sans); color: var(--muted); white-space: normal; }

@media (max-width: 1000px) { .cv-phones { grid-template-columns: repeat(auto-fill, 417px); justify-content: center; } .map-grid { grid-template-columns: 1fr; } .proto-stage { grid-template-columns: 1fr; } .proto-left { display: none; } .role-grid { grid-template-columns: 1fr 1fr; } .cover-table td.cov-mod { white-space: normal; } }