/* ==========================================================================
   SOFT 3D — light theme (default)
   One light source (top-left). Every surface uses one of 3 elevation levels.
   Surfaces are convex (subtle top-light gradient) with a crisp highlight edge.
   The brand colour is reserved for actions, active states and key data only.

   BRAND PRIMITIVES (--b-*): defaults below = the original orange look.
   Each company overrides them from /brand.css (App\Platform\Brand::cssVars, html:root wins over :root);
   the design language itself is switched by <html data-preset="soft|glass|flat|bold"> (presets.css).
   ========================================================================== */
:root, .brand-scope {
  --b-tint: #ff5b22; --b-tint-2: #e63b22; --b-accent: #ff9550;
  --b-tint-rgb: 255, 91, 34; --b-tint-2-rgb: 230, 59, 34; --b-accent-rgb: 255, 149, 80; --b-deep-rgb: 150, 30, 0;
  --b-o1: #ffb37e; --b-o2: #ff7d33; --b-o2-d: #ff8a45; --b-o3-d: #ff6a2e; --b-o4-d: #f04a2a;
  --b-g2: #ff6a2a; --b-g3: #ef4423;
  --b-h0: #ffb27e; --b-h1: #ff8a44; --b-h2: #ff5f27; --b-h3: #e8401f;
  --b-orb0: #ffd8b8; --b-orb1: #ff9a52; --b-orb2: #ff6326; --b-orb3: #d8331f;
  --b-on: #fff;
  --b-bg-l: #e9edf3; --b-s-top-l: #f6f8fb; --b-s-bot-l: #e2e7ee; --b-in-a-l: #dfe4ec; --b-in-b-l: #f3f6fa; --b-lo-l: rgba(163, 177, 198, .62); --b-bar-l: rgba(233, 237, 243, .86);
  --b-bg-d: #1b1d23; --b-s-top-d: #262930; --b-s-bot-d: #1c1e24; --b-in-a-d: #17191e; --b-in-b-d: #24272e; --b-bar-d: rgba(27, 29, 35, .88); --b-tab-a-d: #2a2d34; --b-tab-b-d: #121316;
  --b-r-sm: 14px; --b-r: 22px; --b-r-lg: 26px; --b-r-xl: 30px;
  /* derived brand gradients (shared by both themes) */
  --b-grad: linear-gradient(140deg, var(--b-accent) 0%, var(--b-g2) 48%, var(--b-g3) 100%);
  --b-orb: radial-gradient(circle at 30% 24%, var(--b-orb0) 0%, var(--b-orb1) 22%, var(--b-orb2) 55%, var(--b-orb3) 100%);
  --b-hero: radial-gradient(110% 120% at 100% 0%, var(--b-h0) 0%, transparent 52%), linear-gradient(140deg, var(--b-h1) 0%, var(--b-h2) 52%, var(--b-h3) 100%);
}
:root[data-theme="light"], .brand-scope[data-theme="light"] {
  /* palette */
  --bg: var(--b-bg-l);
  --s-top: var(--b-s-top-l);   /* surface lit side   */
  --s-bot: var(--b-s-bot-l);   /* surface shade side */
  --surface: linear-gradient(145deg, var(--s-top), var(--s-bot));
  --surface-in: linear-gradient(145deg, var(--b-in-a-l), var(--b-in-b-l));
  --lo: var(--b-lo-l);              /* cast shadow */
  --hi-c: rgba(255, 255, 255, .95); /* light bounce */
  --edge: inset 1px 1px 0 rgba(255, 255, 255, .85), inset -1px -1px 0 rgba(174, 186, 205, .25);

  /* elevation scale */
  --e1: 3px 3px 7px var(--lo), -3px -3px 7px var(--hi-c);
  --e2: 7px 7px 16px var(--lo), -6px -6px 14px var(--hi-c);
  --e3: 14px 14px 30px var(--lo), -10px -10px 24px var(--hi-c);
  --in1: inset 2px 2px 5px var(--lo), inset -2px -2px 5px var(--hi-c);
  --in2: inset 5px 5px 10px var(--lo), inset -5px -5px 10px var(--hi-c);

  /* brand colour (the --o* names are historical: "orange") */
  --o1: var(--b-o1); --o2: var(--b-o2); --o3: var(--b-tint); --o4: var(--b-tint-2);
  --orange: var(--b-grad);
  --orb: var(--b-orb);
  --o-glow: 0 10px 22px -6px rgba(var(--b-tint-rgb), .55), 0 3px 6px -2px rgba(var(--b-tint-2-rgb), .35);
  --gloss: inset 0 1.5px 1px rgba(255, 255, 255, .55), inset 0 -3px 8px rgba(var(--b-deep-rgb), .22);

  /* text */
  --label: #20242d; --label-2: #7d8494; --label-3: #aab1bf;
  --sep: rgba(32, 36, 45, .065);
  --fill: rgba(32, 36, 45, .045); --fill-2: rgba(32, 36, 45, .08);
  --tint: var(--o3); --tint-2: var(--o4); --tint-soft: rgba(var(--b-tint-rgb), .1);

  /* aliases used by base css */
  --bg-elev: var(--s-top); --glass: var(--s-top); --glass-strong: var(--s-top); --glass-thin: var(--s-top); --bar: var(--b-bar-l);
  --shadow: var(--e2); --shadow-lg: var(--e3); --hi: none;
  --r-sm: var(--b-r-sm); --r: var(--b-r); --r-lg: var(--b-r-lg); --r-xl: var(--b-r-xl);
  color-scheme: light;
}


/* ---------- DARK palette: identical system, night colours ---------- */
:root[data-theme="dark"], .brand-scope[data-theme="dark"] {
  --bg: var(--b-bg-d);
  --s-top: var(--b-s-top-d); --s-bot: var(--b-s-bot-d);
  --surface: linear-gradient(145deg, var(--s-top), var(--s-bot));
  --surface-in: linear-gradient(145deg, var(--b-in-a-d), var(--b-in-b-d));
  --lo: rgba(0, 0, 0, .55); --hi-c: rgba(255, 255, 255, .05);
  --edge: inset 1px 1px 0 rgba(255, 255, 255, .07), inset -1px -1px 0 rgba(0, 0, 0, .35);
  --e1: 3px 3px 7px var(--lo), -2px -2px 6px var(--hi-c);
  --e2: 7px 7px 16px var(--lo), -5px -5px 12px var(--hi-c);
  --e3: 14px 14px 30px rgba(0, 0, 0, .6), -8px -8px 20px var(--hi-c);
  --in1: inset 2px 2px 5px rgba(0, 0, 0, .55), inset -2px -2px 5px var(--hi-c);
  --in2: inset 5px 5px 10px rgba(0, 0, 0, .6), inset -4px -4px 9px var(--hi-c);
  --o1: var(--b-o1); --o2: var(--b-o2-d); --o3: var(--b-o3-d); --o4: var(--b-o4-d);
  --orange: var(--b-grad);
  --orb: var(--b-orb);
  --o-glow: 0 10px 24px -6px rgba(var(--b-tint-rgb), .6), 0 3px 8px -2px rgba(var(--b-tint-2-rgb), .4);
  --gloss: inset 0 1.5px 1px rgba(255, 255, 255, .45), inset 0 -3px 8px rgba(var(--b-deep-rgb), .3);
  --label: #eef0f5; --label-2: #949bab; --label-3: #5f6675;
  --sep: rgba(255, 255, 255, .06);
  --fill: rgba(255, 255, 255, .05); --fill-2: rgba(255, 255, 255, .09);
  --tint: var(--o3); --tint-2: var(--o4); --tint-soft: rgba(var(--b-tint-rgb), .14);
  --bg-elev: var(--s-top); --glass: var(--s-top); --glass-strong: var(--s-top); --glass-thin: var(--s-top); --bar: var(--b-bar-d);
  --shadow: var(--e2); --shadow-lg: var(--e3); --hi: none;
  --r-sm: var(--b-r-sm); --r: var(--b-r); --r-lg: var(--b-r-lg); --r-xl: var(--b-r-xl);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--b-bg-d); --label: #eef0f5; } }
:root[data-theme="dark"] body::before { background: radial-gradient(70vmax 50vmax at 110% -10%, rgba(var(--b-tint-rgb), .10), transparent 60%), radial-gradient(60vmax 50vmax at -10% 105%, rgba(var(--b-tint-rgb), .06), transparent 60%); }
:root[data-theme="dark"] .tabbar { background: linear-gradient(180deg, var(--b-tab-a-d), var(--b-tab-b-d)); box-shadow: 0 18px 34px -12px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .07); }
:root[data-theme="dark"] .punch.out { background: radial-gradient(circle at 30% 24%, #5a5f6b, #30333b 55%, #17181c) !important; }
:root[data-theme="dark"] .btn.white { background: #2b2e36; color: var(--o2); }
:root[data-theme="dark"] .ai-composer .call-btn { background: linear-gradient(180deg, #353943, #1d1f25); }
:root[data-theme="dark"] .badge.green, :root[data-theme="dark"] .delta { color: #45d68a !important; }
:root[data-theme="dark"] .badge.red { color: #ff7b6b; } :root[data-theme="dark"] .badge.blue { color: #6aa4ff; }
:root[data-theme="dark"] dialog.sheet::backdrop { background: rgba(0, 0, 0, .5); }
/* ---------- canvas ---------- */
:root body { background: var(--bg); color: var(--label); }
:root body::before { opacity: 1; animation: none;
  background: radial-gradient(70vmax 50vmax at 110% -10%, rgba(var(--b-accent-rgb), .12), transparent 60%),
              radial-gradient(60vmax 50vmax at -10% 105%, rgba(var(--b-tint-rgb), .07), transparent 60%); }
:root body::after { display: none; }

/* ---------- surfaces (level 2 by default) ---------- */
:root :is(.list, .card, .kpi, .form-list, .mini-card, .tl-card, .table-wrap, .banner, .ai-card, .act-card, .lb-card, .guest-card, .ai-action) {
  background: var(--surface); box-shadow: var(--e2), var(--edge); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root :is(.kpi, .card, .mini-card)::after { display: none; }
:root .list, :root .form-list { border-radius: var(--r); }
:root .kpi, :root .card { border-radius: var(--r-lg); }
:root .row + .row::before, :root .field + .field::before, :root .pick + .pick::before { border-top: 1px solid var(--sep); }
:root .tl-card { box-shadow: var(--e1), var(--edge), inset -3px 0 0 var(--c, var(--o3)); }

/* typography: neutral, strong hierarchy — never orange titles */
:root :is(.row .title, a.row .title, .kpi .val, .page-head h1, .section-title h2, .card h3, b) { color: var(--label); }
:root .row .sub, :root .lbl, :root .muted { color: var(--label-2); }
:root .kpi .val, :root .hero h2 { font-family: inherit; font-weight: 800; letter-spacing: -.035em; }
:root .page-head h1 { font-weight: 850; letter-spacing: -.04em; }
:root .section-title :is(a, button), :root .caption a, :root details.join summary { color: var(--o3); font-weight: 650; }

/* ---------- icon tiles: one shape everywhere (squircle, level 1, orange glyph) ---------- */
:root .tile { background: var(--surface) !important; color: var(--o3); border-radius: 13px; box-shadow: var(--e1), var(--edge); }
:root .tile::before { display: none; }
:root .tile .ic { --duo: .28; filter: none; }
:root .tile b { color: var(--o3); }
:root .tile.lg { border-radius: 16px; }
:root .app-icon .tile { width: 62px; height: 62px; border-radius: 20px; box-shadow: var(--e2), var(--edge); color: var(--o3); }
:root .app-icon .tile .ic { width: 28px; height: 28px; }
:root .app-icon { color: var(--label-2); font-weight: 650; font-size: 12px; }
:root .empty .tile { color: var(--label-3); }

/* avatars: consistent soft discs with an orange person glyph (the name is always printed beside it) */
:root .avatar { background: var(--surface) !important; color: var(--o3); box-shadow: var(--e1), var(--edge); font-weight: 800; }
:root .avatar.lg { box-shadow: var(--e3), var(--edge), 0 0 0 6px var(--bg), 0 0 0 7px rgba(var(--b-tint-rgb), .18); }
:root .avatar.xs { box-shadow: 0 0 0 2px var(--s-top); }
:root .avatar.is-live { box-shadow: var(--e1), 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--green); }
:root .me-pill { background: var(--surface); box-shadow: var(--e1), var(--edge); }
:root .me-pill:active { box-shadow: inset 2px 2px 5px var(--lo), inset -2px -2px 5px var(--hi-c); }

/* ---------- buttons ---------- */
:root .btn { position: relative; overflow: hidden; isolation: isolate; background: var(--orange); color: var(--b-on); font-weight: 750; box-shadow: var(--o-glow), var(--gloss); }
:root .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%); transform: translateX(-120%); }
:root .btn:not(.gray):not(.tinted):not(.danger-tinted):not(.glass):not(.white)::after { animation: sheen 4.5s ease-in-out infinite 1.2s; }
:root .btn:active { transform: translateY(1px) scale(.98); box-shadow: 0 4px 10px -4px rgba(var(--b-tint-rgb), .55), var(--gloss); filter: none; }
:root :is(.btn.tinted, .btn.gray, .btn.danger-tinted, .btn.glass-btn) { background: var(--surface); color: var(--o3); box-shadow: var(--e1), var(--edge); }
:root .btn.gray { color: var(--label); }
:root .btn.danger-tinted { color: var(--o4); }
:root :is(.btn.tinted, .btn.gray, .btn.danger-tinted):active { box-shadow: var(--in1); transform: none; }
:root .btn.green { background: linear-gradient(140deg, #4fdc8a, #18a65a); box-shadow: 0 10px 22px -8px rgba(24, 166, 90, .6), var(--gloss); }
:root .btn.red { background: linear-gradient(140deg, #ff7b6b, #e3352a); }
:root .btn.white { background: #fff; color: var(--o3); box-shadow: 0 8px 18px -10px rgba(var(--b-deep-rgb), .55); }
:root .btn.glass { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); }
@keyframes sheen { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

:root .fab { background: var(--orb); color: #fff; border-radius: 50%; box-shadow: var(--o-glow), var(--gloss), 0 0 0 7px var(--bg), var(--e3); animation: floaty 5s ease-in-out infinite; }
:root .fab:active { animation: none; transform: scale(.92); }
@keyframes floaty { 50% { transform: translateY(-4px); } }

/* app bar */
:root :is(.appbar .icon-btn, .back-btn) { background: var(--surface); color: var(--label); box-shadow: var(--e1), var(--edge); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root .appbar .icon-btn:active { box-shadow: var(--in1); }
:root .appbar.scrolled { background: var(--bar); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--sep), 0 10px 20px -16px var(--lo); }
:root .ai-btn { background: var(--orb) !important; color: #fff !important; box-shadow: var(--o-glow), var(--gloss) !important; animation: breathe-glow 3.2s ease-in-out infinite; }
:root .icon-btn .dot { border: 2px solid var(--s-top); background: var(--o4); top: 4px; inset-inline-end: 4px; }
@keyframes breathe-glow { 50% { box-shadow: 0 10px 26px -4px rgba(var(--b-tint-rgb), .75), var(--gloss); } }

/* ---------- hero: orange glass slab with depth, light rings and slow shimmer ---------- */
:root .hero { color: var(--b-on) !important; isolation: isolate; overflow: hidden;
  background: var(--b-hero) !important;
  box-shadow: 0 24px 38px -20px rgba(var(--b-tint-2-rgb), .8), 0 8px 16px -10px rgba(var(--b-tint-2-rgb), .5), var(--gloss) !important; }
:root .hero::before { content: ""; position: absolute; z-index: -1; width: 340px; height: 340px; inset-inline-start: -110px; top: -150px; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .16) 0 1px, transparent 1.5px 26px); animation: spin 60s linear infinite; }
:root .hero::after { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 45%, transparent 60%); background-size: 250% 100%; animation: shimmer 7s ease-in-out infinite; }
@keyframes shimmer { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
:root .hero :is(.eyebrow, p) { color: rgba(255, 255, 255, .9); }
:root .hero b { color: var(--b-on); }
:root .hero .bars .b i { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .7)) !important; box-shadow: 0 6px 12px -6px rgba(var(--b-deep-rgb), .5); }
:root .hero .bars .b span { color: rgba(255, 255, 255, .78) !important; }
:root .hero .ring { background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .25) 0); filter: none; }
:root .hero .ring span { background: transparent; color: #fff; }

/* ---------- navigation: dark capsule + sliding orange lens ---------- */
:root .tabbar { background: linear-gradient(180deg, #23252b, #15161a); box-shadow: 0 18px 34px -14px rgba(21, 22, 26, .7), inset 0 1px 0 rgba(255, 255, 255, .08); overflow: visible; }
:root .tab { color: #858b98; z-index: 1; }
:root .tab.on { color: #fff; }
:root .tab.on::before { content: none; }
:root .tab.on .ic { transform: translateY(-1px) scale(1.06); --duo: .45; }
:root .tab-lens { position: absolute; z-index: 0; top: 6px; bottom: 6px; border-radius: 28px; background: var(--orange);
  box-shadow: 0 8px 18px -6px rgba(var(--b-tint-rgb), .8), var(--gloss); transition: transform .5s var(--spring), width .5s var(--spring); pointer-events: none; }
:root .tab-lens::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 80% at 30% 0%, rgba(255, 255, 255, .45), transparent 70%); }
@media (min-width: 960px) {
  :root .rail { background: var(--surface); box-shadow: var(--e3), var(--edge); }
  :root .rail a { color: var(--label); }
  :root .rail a.on { background: var(--surface-in); color: var(--o3); box-shadow: var(--in1); }
  :root .rail a .ic { color: var(--o3); }
}

/* ---------- controls ---------- */
:root .chip { background: var(--surface); color: var(--label-2); box-shadow: var(--e1), var(--edge); font-weight: 650; }
:root .chip.on { background: var(--orange); color: var(--b-on); box-shadow: 0 8px 16px -8px rgba(var(--b-tint-2-rgb), .7), var(--gloss); }
:root .segmented { background: var(--surface-in); box-shadow: var(--in2); }
:root :is(.segmented .on, .segmented input:checked + span) { background: var(--surface); color: var(--o3); box-shadow: var(--e1), var(--edge); font-weight: 750; }
:root :is(.input-solo, .search input, .stepper) { background: var(--surface-in); box-shadow: var(--in2); color: var(--label); }
:root .search .ic { z-index: 1; color: var(--label-3); }
:root .input-solo:focus, :root .search input:focus { box-shadow: var(--in2), 0 0 0 2px rgba(var(--b-tint-rgb), .35); }
:root .field :is(select, input[type="date"], input[type="time"], input[type="number"], input[type="datetime-local"], input[type="month"]) { color: var(--o3); font-weight: 650; }
:root .switch i { background: var(--surface-in); box-shadow: var(--in1); }
:root .switch i::after { background: var(--surface); box-shadow: var(--e1), var(--edge); }
:root .switch input:checked + i { background: var(--orange); box-shadow: inset 0 2px 4px rgba(var(--b-deep-rgb), .35); }
:root .switch input:checked + i::after { background: #fff; }
:root .pick .check { border: 0; background: var(--surface-in); box-shadow: var(--in1); }
:root .pick input:checked ~ .check { background: var(--orange); box-shadow: var(--gloss), 0 4px 10px -4px rgba(var(--b-tint-2-rgb), .6); }

/* data viz */
:root .progress { background: var(--surface-in); box-shadow: var(--in1); height: 9px; }
:root .progress i { background: var(--orange); box-shadow: 0 2px 6px -1px rgba(var(--b-tint-2-rgb), .45), inset 0 1px 0 rgba(255, 255, 255, .4); }
:root .ring { background: conic-gradient(var(--o3) calc(var(--p) * 1%), rgba(163, 177, 198, .35) 0); filter: drop-shadow(3px 3px 5px var(--lo)) drop-shadow(-2px -2px 4px var(--hi-c)); }
:root .ring span { background: var(--surface); color: var(--label); box-shadow: var(--edge); }
:root .bars .b i { background: var(--orange); }

/* badges: tiny raised pills, colour in text only */
:root .badge { background: var(--surface); box-shadow: var(--e1), var(--edge); color: var(--label-2); font-weight: 750; }
:root :is(.badge.purple, .badge.orange) { color: var(--o3); }
:root .badge.green { color: #13a159; } :root .badge.red { color: #e3352a; } :root .badge.blue { color: #2c74f0; }
:root .delta { background: var(--surface) !important; box-shadow: var(--e1), var(--edge); color: #13a159 !important; }

/* sheets, toasts */
:root dialog.sheet { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 -24px 60px -24px rgba(40, 48, 66, .45), inset 0 1px 0 var(--hi-c); }
:root dialog.sheet::backdrop { background: rgba(32, 38, 52, .3); backdrop-filter: blur(5px); }
:root .sheet-grab { background: rgba(32, 36, 45, .14); }
:root .sheet-head .x .icon-btn { background: var(--surface); box-shadow: var(--e1), var(--edge); color: var(--label-2); }
:root .toast { background: var(--surface); box-shadow: var(--e3), var(--edge); color: var(--label); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- signature 3D orbs ---------- */
:root :is(.logo, .rail .brand .logo) { background: var(--orb) !important; color: #fff; box-shadow: var(--o-glow), var(--gloss) !important; }
:root .punch { background: var(--orb) !important; color: #fff;
  box-shadow: var(--o-glow), var(--gloss), 0 0 0 16px var(--bg), 16px 16px 34px 10px var(--lo), -12px -12px 28px 8px var(--hi-c) !important; }
:root .punch.out { background: radial-gradient(circle at 30% 24%, #4a4e59, #23252b 55%, #121316) !important; color: var(--o2);
  box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .55), inset 0 1.5px 1px rgba(255, 255, 255, .14), 0 0 0 16px var(--bg), 16px 16px 34px 10px var(--lo), -12px -12px 28px 8px var(--hi-c) !important; }
:root .punch::before, :root .punch::after { color: var(--o2); inset: -30px; }
:root .ai-orb { background: var(--orb); box-shadow: var(--o-glow), var(--gloss), 0 0 0 12px var(--bg), var(--e3); animation: orb-float 5s ease-in-out infinite; }
:root .ai-orb::after { display: none; }
@keyframes orb-float { 50% { transform: translateY(-6px) scale(1.03); } }
:root .clock-big { color: var(--label); }
/* concentric radar rings behind orbs */
:root :is(.punch-wrap, .ai-head) { position: relative; isolation: isolate; }
:root :is(.punch-wrap, .ai-head)::before { content: ""; position: absolute; inset: -30px -10px; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 32px, rgba(var(--b-tint-rgb), .1) 33px 34px);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 25%, transparent 68%); mask: radial-gradient(circle at 50% 50%, #000 25%, transparent 68%);
  animation: radar 4s ease-out infinite; }
:root .ai-head::before { inset: -40px -10px 35% -10px; }
@keyframes radar { 0% { transform: scale(.94); opacity: .6; } 60% { opacity: 1; } 100% { transform: scale(1.06); opacity: .6; } }

/* auth / guest */
:root .auth { background: transparent; }
:root .auth h1 { background: none; color: var(--label); -webkit-text-fill-color: currentColor; font-family: inherit; font-weight: 850; }
:root .auth .logo, :root .guest-card .logo { border-radius: 50%; animation: orb-float 5s ease-in-out infinite; }
:root .auth .logo { width: 100px; height: 100px; }
:root .platform { background: var(--surface); box-shadow: var(--e1), var(--edge); color: var(--label); }
:root .platform:active { box-shadow: var(--in1); }
:root .platform .dotc { box-shadow: var(--gloss), 0 4px 10px -4px var(--pc); }

/* chat */
:root .bubble.me { background: var(--orange); color: var(--b-on); box-shadow: 0 10px 18px -12px rgba(var(--b-tint-2-rgb), .8), var(--gloss); }
:root .bubble.bot { background: var(--surface); box-shadow: var(--e1), var(--edge); color: var(--label); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root .ai-composer { background: var(--surface); box-shadow: var(--e3), var(--edge); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root .ai-composer .send-btn { background: var(--orb); color: #fff; box-shadow: var(--o-glow), var(--gloss); }
:root .ai-composer .call-btn { background: linear-gradient(180deg, #2b2e35, #15161a); color: var(--o2); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1); }
:root .ai-action { box-shadow: var(--e2), var(--edge), inset 0 0 0 1.5px rgba(var(--b-tint-rgb), .28); }
:root .typing i { background: var(--o3); }

/* activity / live */
:root .act-card.state-live { box-shadow: var(--e2), var(--edge), inset 0 0 0 2px rgba(19, 161, 89, .45); }
:root :is(.act-card.state-late_missing, .act-card.state-missed) { box-shadow: var(--e2), var(--edge), inset 0 0 0 2px rgba(227, 53, 42, .3); }
:root .act-trail span, :root .lb-now, :root .crew-chip { background: var(--surface-in); box-shadow: var(--in1); }
:root .lb-dots i { background: rgba(163, 177, 198, .4); }

/* ==========================================================================
   MOTION — entrance, press depth, ripple, counters, fills
   ========================================================================== */
:root :is(a.row, button.row, label.row, a.kpi, .chip, .app-icon .tile, .platform, .tile, .lb-card) { transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
:root :is(a.row, button.row, label.row):active { box-shadow: var(--in1); background: transparent; }
:root a.kpi:active, :root .lb-card:active { box-shadow: var(--in2); transform: scale(.985); }
:root .app-icon:active .tile { box-shadow: var(--in2); transform: scale(.94); }
@media (hover: hover) {
  :root :is(a.kpi, .lb-card, .app-icon .tile, a.row .tile):hover { transform: translateY(-2px); }
  :root .btn:hover { filter: brightness(1.04); }
}
/* staggered entrance for lists & grids */
.list > .row, .kpis > *, .springboard > *, .lb-grid > *, .acts > *, .gap-12 > *, .hscroll > * { animation: pop-in .55s var(--ease) both; }
:is(.list, .kpis, .springboard, .lb-grid, .acts, .gap-12, .hscroll) > *:nth-child(1) { animation-delay: .03s; }
:is(.list, .kpis, .springboard, .lb-grid, .acts, .gap-12, .hscroll) > *:nth-child(2) { animation-delay: .07s; }
:is(.list, .kpis, .springboard, .lb-grid, .acts, .gap-12, .hscroll) > *:nth-child(3) { animation-delay: .11s; }
:is(.list, .kpis, .springboard, .lb-grid, .acts, .gap-12, .hscroll) > *:nth-child(4) { animation-delay: .15s; }
:is(.list, .kpis, .springboard, .lb-grid, .acts, .gap-12, .hscroll) > *:nth-child(5) { animation-delay: .19s; }
:is(.list, .kpis, .springboard, .lb-grid, .acts, .gap-12, .hscroll) > *:nth-child(6) { animation-delay: .23s; }
:is(.list, .kpis, .springboard, .lb-grid, .acts, .gap-12, .hscroll) > *:nth-child(n+7) { animation-delay: .27s; }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.hero { animation: hero-in .7s var(--spring) both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
/* animated fills */
.progress i { animation: fill-x 1.1s var(--ease) both .2s; transform-origin: right; }
[dir="ltr"] .progress i { transform-origin: left; }
@keyframes fill-x { from { transform: scaleX(0); } }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.ring { transition: --p 1s var(--ease); animation: ring-in 1.2s var(--ease) both .15s; }
@keyframes ring-in { from { --p: 0; } }
/* ripple */
.ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); animation: ripple .6s var(--ease) forwards; background: currentColor; opacity: .18; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .list > .row, .kpis > *, .springboard > *, .lb-grid > *, .acts > *, .gap-12 > *, .hscroll > *, .hero, .progress i, .ring, .fab, .ai-orb, .btn::after, .hero::before, .hero::after { animation: none !important; }
}
:root .punch .lbl { color: #fff; text-shadow: 0 1px 6px rgba(var(--b-deep-rgb), .45); }
:root .punch.out .lbl { color: var(--o2); text-shadow: none; }
:root .hero .lbl, :root .hero b { color: var(--b-on); }
:root :is(.btn.green, .btn.red) { color: #fff; }

/* ---------- polish v2: home greeting, compact tools, readable cards ---------- */
:root .page-head .row-between { flex-wrap: nowrap; align-items: flex-start; }
:root .page-head .row-between > div:first-child { min-width: 0; flex: 1; }
:root .page-head .row-between h1 { font-size: clamp(24px, 7.2vw, 34px); overflow-wrap: anywhere; }
:root .me-pill { margin-top: 4px; padding: 3px; padding-inline: 3px 10px; font-size: 13px; font-weight: 700; color: var(--label); }
:root .me-pill .avatar { width: 28px; height: 28px; }

/* tools: compact app-style grid (icon above a single-line label) instead of tall cards */
:root .tools { gap: 8px; }
:root .tools a, :root .tools button { padding: 10px 4px 9px; gap: 6px; border-radius: 18px; min-height: 0;
  font-size: 11.5px; font-weight: 650; line-height: 1.25; color: var(--label); background: var(--surface); box-shadow: var(--e1), var(--edge); }
:root .tools .tile { width: 36px; height: 36px; border-radius: 12px; }
:root .tools a > :last-child, :root .tools a { overflow-wrap: anywhere; }
:root .tools a { display: grid; justify-items: center; align-content: start; text-align: center; }
:root .tools a { -webkit-line-clamp: 2; }
@media (max-width: 380px) { :root .tools a, :root .tools button { font-size: 11px; } }

/* list sub-lines: never let secondary text fade into the card */
:root .row .sub { color: var(--label-2); }
:root[data-theme="dark"] .row .sub { color: color-mix(in srgb, var(--label) 72%, transparent); }
/* tab bar labels: one line, never collide with the icon (long labels in EN/DE/RU…) */
:root .tabbar .tab span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; line-height: 1.2; }
:root .tabbar .tab { min-width: 0; }
/* odd card count in a 2-column KPI grid: the last card spans the row instead of leaving a hole */
@media (max-width: 699px) { :root .kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---------- native tab bar in the app's soft 3D style (v2) ----------
   Raised clay surface like the cards, a groove track, embossed icons, and the active tab as a glowing 3D orb. */
:root .tabbar {
  background: var(--surface) !important;
  box-shadow: var(--e2), var(--edge), 0 18px 30px -18px var(--lo) !important;
  border: 0; padding: 7px; }
:root .tabbar::before { content: ""; position: absolute; inset: 7px; border-radius: inherit; background: var(--surface-in); box-shadow: var(--in2); opacity: .55; pointer-events: none; z-index: 0; }
:root .tab { color: var(--label-2); text-shadow: 0 1px 0 var(--hi-c); }
:root .tab .ic { filter: drop-shadow(1px 1px 1px var(--lo)) drop-shadow(-1px -1px 0 var(--hi-c)); }
:root .tab.on { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
:root .tab.on .ic { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
:root .tab-lens { background: var(--orb, var(--orange)); top: 7px; bottom: 7px;
  box-shadow: var(--o-glow, 0 8px 18px -6px rgba(var(--b-tint-rgb), .8)), var(--gloss), 3px 3px 8px var(--lo), -2px -2px 6px var(--hi-c); }
:root .tab-lens::after { background: radial-gradient(70% 90% at 30% 0%, rgba(255, 255, 255, .55), transparent 65%); }
:root .tab:active .ic { transform: scale(.86); }
:root[data-theme="dark"] .tabbar {
  background: var(--surface) !important;
  box-shadow: var(--e2), var(--edge), 0 20px 34px -16px rgba(0, 0, 0, .85) !important; }
:root[data-theme="dark"] .tab { color: color-mix(in srgb, var(--label) 62%, transparent); text-shadow: none; }
:root[data-theme="dark"] .tab .ic { filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .6)); }
:root[data-theme="dark"] .tab.on { color: #fff; }

/* ---------- compact typography (v3): smaller text so every label fits inside its card/block ---------- */
:root body { font-size: 14px; line-height: 1.45; }
:root .page-head h1, :root .page-head .row-between h1 { font-size: clamp(20px, 6vw, 26px); line-height: 1.2; }
:root .page-head p { font-size: 13px; }
:root .section-title h2 { font-size: 16.5px; }
:root .section-title a, :root .section-title button, :root .link-btn { font-size: 13px; }
:root .group-label { font-size: 11.5px; }
:root .row .title { font-size: 14px; line-height: 1.3; }
:root .row .sub { font-size: 12px; line-height: 1.35; }
:root .row .trail { font-size: 13px; }
:root .card h3 { font-size: 15px; }
:root .hero .eyebrow { font-size: 12px; }
:root .hero h2 { font-size: 21px; line-height: 1.2; }
:root .hero p { font-size: 13px; }
:root .kpi { padding: 12px; gap: 8px; min-height: 0; }
:root .kpi .val { font-size: 20px; }
:root .kpi .lbl { font-size: 12px; line-height: 1.3; }
:root .kpi .delta, :root .badge { font-size: 10.5px; }
:root .btn { font-size: 14px; }
:root .btn.sm { font-size: 12.5px; }
:root .field > span:first-child { font-size: 13.5px; }
:root .field input, :root .field select, :root .field textarea { font-size: 16px; } /* 16px: iOS Safari zooms the page on focus for smaller inputs */
:root .empty b { font-size: 15px; }
:root .banner .body { font-size: 13px; }
:root .tools a, :root .tools button { font-size: 10.5px; }
:root .tools .tile { width: 32px; height: 32px; }
:root .tabbar .tab span { font-size: 9.5px; }
:root .act-card b { font-size: 14px; }
:root .act-card .muted { font-size: 12px !important; }
:root .me-pill { font-size: 12px; }
:root .lang-opt b { font-size: 13.5px; }
/* long words / numbers never overflow a card */
:root :is(.card, .kpi, .row .body, .act-card, .hero, .tools a, .banner) { overflow-wrap: anywhere; min-width: 0; }

/* ---------- compact UI (v4): smaller icons, blocks and buttons ---------- */
:root { --tabbar-h: 58px; --r: 14px; --r-lg: 18px; --r-xl: 22px; }
:root .ic { width: 19px; height: 19px; }
:root .ic.sm { width: 14px; height: 14px; }
:root .ic.lg { width: 23px; height: 23px; }
:root .ic.xl { width: 36px; height: 36px; }
:root .tile { width: 30px; height: 30px; border-radius: 10px; }
:root .tile .ic { width: 17px; height: 17px; }
:root .tile.lg { width: 40px; height: 40px; border-radius: 13px; }
:root .act-card .tile, :root .place-card .tile { width: 36px; height: 36px; border-radius: 11px; }
:root .app-icon { font-size: 10.5px; gap: 5px; }
:root .app-icon .tile { width: 48px; height: 48px; border-radius: 15px; }
:root .app-icon .tile .ic { width: 22px; height: 22px; }
:root .springboard { gap: 12px 6px; }
:root .avatar { width: 34px; height: 34px; }
:root .avatar.sm { width: 26px; height: 26px; }
:root .avatar.lg { width: 64px; height: 64px; }
:root .avatar .ic { width: 58%; height: 58%; }
:root .icon-btn { width: 34px; height: 34px; }
:root .btn { height: 42px; padding: 0 16px; border-radius: 12px; gap: 6px; }
:root .btn.sm { height: 32px; padding: 0 11px; border-radius: 9px; }
:root .btn.block { width: 100%; }
:root .fab { width: 50px; height: 50px; border-radius: 16px; }
:root .row { min-height: 44px; padding: 8px 12px; gap: 10px; }
:root .card { padding: 13px; }
:root .kpi { padding: 11px; border-radius: var(--r-lg); }
:root .kpi .tile { width: 28px; height: 28px; }
:root .hero { padding: 16px; }
:root .hero .hero-row { gap: 8px; margin-top: 12px; }
:root .act-card { padding: 11px; }
:root .section { margin-top: 18px; }
:root .section-title { margin-bottom: 6px; }
:root .tools { gap: 6px; }
:root .tools a, :root .tools button { padding: 8px 3px 7px; gap: 5px; border-radius: 15px; }
:root .tools .tile { width: 28px; height: 28px; border-radius: 9px; }
:root .tools .tile .ic { width: 16px; height: 16px; }
:root .tabbar .tab .ic { width: 20px; height: 20px; }
:root .ring { transform: scale(.85); transform-origin: center; }
:root .field { min-height: 44px; }
:root .segmented a, :root .segmented label { padding: 6px 4px; font-size: 12.5px; }
:root .me-pill .avatar { width: 24px; height: 24px; }
:root .lang-opt { padding: 9px 11px; border-radius: 12px; }

/* ---------- side menu groups (main menu → sub menu) ---------- */
@media (min-width: 960px) {
  :root .rail { overflow-y: auto; scrollbar-width: thin; }
  :root .rail a { padding: 8px 10px; font-size: 13.5px; gap: 10px; }
  :root .rail-group { border-radius: 12px; margin: 2px 0; }
  :root .rail-group > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px;
    cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--label); user-select: none; }
  :root .rail-group > summary::-webkit-details-marker { display: none; }
  :root .rail-group > summary .ic { color: var(--o3, var(--tint)); }
  :root .rail-group > summary:hover { background: var(--fill); }
  :root .rail-group > summary .rg-chev { margin-inline-start: auto; color: var(--label-3); transition: transform .2s; }
  :root .rail-group[open] > summary .rg-chev { transform: rotate(90deg); }
  :root[dir="rtl"] .rail-group[open] > summary .rg-chev { transform: rotate(-90deg); }
  :root .rail-group.has-on > summary { color: var(--o3, var(--tint)); }
  :root .rail-sub { display: grid; gap: 1px; padding: 2px 0 6px; padding-inline-start: 14px; margin-inline-start: 18px; border-inline-start: 2px solid var(--sep, rgba(120,120,128,.18)); }
  :root .rail-sub a { padding: 7px 10px; font-size: 13px; font-weight: 550; }
}