/* AngelDesk v3.5 — "Executive Black" theme materials (theme key: graphite; the default look of the installed phone app).
   The Executive look (skin-leather.css) in black: polished black leather with a visible grain and a moving sheen, stitched leather panels,
   chrome-gold hardware (knobs, bezels, switches, the primary button), LCD-amber read-outs for the big numbers. Tokens live in tokens.css
   under html[data-theme="graphite"]; this file is the material layer. Every rule is scoped to html[data-theme="graphite"], so the other
   nine modes and "Surprise me" never see it. Materials are CSS and inline SVG only. Motion is slow and ambient; base.css already stops it
   under prefers-reduced-motion. The sheen reads --lx / --ly when js/exec-lighting.js sets them and sits top-left otherwise. */

html[data-theme="graphite"]{
  --gx-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .55  0 0 0 0 .58  0 0 0 1.4 -.5'/></filter><rect width='150' height='150' filter='url(%23n)'/></svg>");
  --gx-leather:radial-gradient(130% 100% at 22% 0%,rgba(255,255,255,.12),transparent 55%),var(--gx-grain),#111214; /* black leather: grain pressed into near-black */
  --gx-leather-inset:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -12px 18px -12px rgba(0,0,0,.85);
  --gx-stitch:rgba(222,222,226,.42);          /* pale grey stitching, like the reference */
  --gx-chrome:conic-gradient(from 200deg,#6b5a36,#fff3d2,#9c8655,#fff8e4,#6b5a36 45%,#f2d79a,#7a6640,#fff3d2,#6b5a36); /* chrome gold, turned on a lathe */
  --gx-gold:linear-gradient(180deg,#f6dc9c 0%,#d8b465 45%,#b8903c 55%,#e9c87a 100%);
  --gx-gold-ink:#1a1206;
  --gx-amber:#ffd98f;
  --gx-cream:#efe9dc;
}

/* ===== ground: polished black leather, one sheen that drifts across it ===== */
html[data-theme="graphite"] body{background:#0a0a0c}
html[data-theme="graphite"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 640px at var(--lx,18%) var(--ly,-8%),rgba(255,255,255,.14),transparent 60%),var(--gx-grain),linear-gradient(180deg,#141518,#0a0a0c 60%,#060607);
  background-blend-mode:normal,soft-light,normal;background-size:auto,150px 150px,auto;animation:gx-sheen-drift 26s ease-in-out infinite alternate}
@keyframes gx-sheen-drift{to{background-position:140px 60px,0 0,0 0}}

/* ===== stitched leather panels: cards, the hero, the KPI tiles, the auth card, overlays ===== */
html[data-theme="graphite"] .card,html[data-theme="graphite"] .hero,html[data-theme="graphite"] .auth-card,html[data-theme="graphite"] .pop,html[data-theme="graphite"] .modal,html[data-theme="graphite"] .drawer,html[data-theme="graphite"] .lw,html[data-theme="graphite"] #toasts .toast{
  position:relative;isolation:isolate;border:0;
  background:radial-gradient(420px circle at var(--lx,-999px) var(--ly,-999px),rgba(255,255,255,.1),transparent 70%),var(--gx-leather);
  background-blend-mode:normal,normal,soft-light,normal;background-size:auto,auto,150px 150px,auto;
  box-shadow:0 14px 26px -10px rgba(0,0,0,.9),0 0 0 1px #000,0 0 0 2px rgba(214,190,130,.22),var(--gx-leather-inset)}
html[data-theme="graphite"] :is(.card,.hero,.auth-card,.pop,.modal,#toasts .toast)::before{content:"";position:absolute;inset:7px;border-radius:calc(var(--r-lg) - 6px);pointer-events:none;z-index:0;
  border:2px dashed var(--gx-stitch);filter:drop-shadow(0 1px 0 rgba(0,0,0,.95))}
html[data-theme="graphite"] .auth-card::before{border-radius:18px}
html[data-theme="graphite"] #toasts .toast::before{inset:5px;border-radius:calc(var(--r-md) - 4px);border-width:1.5px}
html[data-theme="graphite"] :is(.card,.hero,.auth-card,.pop,.modal,#toasts .toast)>*{position:relative;z-index:1}
html[data-theme="graphite"] .card.hov{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
html[data-theme="graphite"] .card.hov:hover{transform:translateY(-2px);box-shadow:0 22px 34px -12px rgba(0,0,0,.95),0 0 0 1px #000,0 0 0 2px rgba(232,200,130,.5),0 0 26px -6px rgba(232,176,74,.45),var(--gx-leather-inset)}
html[data-theme="graphite"] .card.warn-card,html[data-theme="graphite"] .card.danger-card,html[data-theme="graphite"] .card.info-card{background:var(--gx-leather);background-blend-mode:normal,soft-light,normal;background-size:auto,150px 150px,auto}
html[data-theme="graphite"] .card.warn-card::before{border-color:rgba(255,179,71,.6)}
html[data-theme="graphite"] .card.danger-card::before{border-color:rgba(255,106,77,.6)}
html[data-theme="graphite"] .ch{border-bottom:1px dashed rgba(222,222,226,.22)}
html[data-theme="graphite"] .ch h3{color:var(--gx-cream);text-shadow:0 1px 0 #000}
html[data-theme="graphite"] .ch .hint,html[data-theme="graphite"] .muted{color:#a9a399}
/* the hero keeps the drifting glow but on leather, with a chrome edge light */
html[data-theme="graphite"] .hero::after{background:radial-gradient(circle,rgba(255,236,190,.22),transparent 65%)}
html[data-theme="graphite"] .hero h1{color:#fff;text-shadow:0 1px 0 #000,0 0 18px rgba(255,220,150,.25)}
html[data-theme="graphite"] .hero .sub{color:#cfc8ba}

/* ===== KPI tiles: a leather tile holding an LCD read-out, amber on black glass ===== */
html[data-theme="graphite"] .kpi .l{color:#d6cfc0;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:11px}
html[data-theme="graphite"] .kpi .v{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px 5px;border-radius:9px;align-self:flex-start;
  font:700 26px/1.1 ui-monospace,'Cascadia Mono','SF Mono',Menlo,Consolas,monospace;letter-spacing:.04em;color:var(--gx-amber);text-shadow:0 0 12px rgba(255,170,60,.6);
  background:linear-gradient(180deg,#040201,#0b0705);border:1.5px solid #2b2620;box-shadow:0 0 0 1.5px #8a7a55,0 0 0 3px #0a0a0c,inset 0 0 22px rgba(0,0,0,.95),0 0 18px -6px rgba(255,170,60,.35)}
html[data-theme="graphite"] .kpi .v small{color:#c09a55}
html[data-theme="graphite"] .kpi .d{font-family:ui-monospace,Menlo,Consolas,monospace}
html[data-theme="graphite"] .kpi .d.up{color:#5fd49a;text-shadow:0 0 8px rgba(95,212,154,.6)}
html[data-theme="graphite"] .kpi .d.dn,html[data-theme="graphite"] .kpi .d.down{color:#ff8a6a;text-shadow:0 0 8px rgba(255,106,77,.6)}
html[data-theme="graphite"] .kpi .bar{height:6px;background:#050505;box-shadow:inset 0 1px 3px #000,0 0 0 1px #3a3530}
html[data-theme="graphite"] .kpi .bar i{background:linear-gradient(180deg,#ffe2a8,#e8b04a);box-shadow:0 0 10px rgba(255,170,60,.7)}

/* ===== sidebar: a stitched black leather panel; the active item is a chrome-gold inlay ===== */
html[data-theme="graphite"] #rail{border:0;padding:22px 18px 18px;background:var(--gx-leather);background-blend-mode:normal,soft-light,normal;background-size:auto,150px 150px,auto;
  box-shadow:0 0 0 1px #000,inset -1px 0 0 rgba(214,190,130,.25),inset 0 1px 0 rgba(255,255,255,.12),6px 0 26px -12px #000}
html[data-theme="graphite"] #rail::before{content:"";position:absolute;inset:9px;border-radius:0 0 36px 0;border:2px dashed var(--gx-stitch);pointer-events:none;z-index:0}
html[data-theme="graphite"] #rail>*{position:relative;z-index:1}
html[data-theme="graphite"] .gl,html[data-theme="graphite"] .grp{color:#d9cfb6;font-weight:700;letter-spacing:.2em;text-shadow:0 -1px 0 #000}
html[data-theme="graphite"] .navi{color:var(--gx-cream);border-radius:10px;transition:none}
html[data-theme="graphite"] .navi:hover{background:rgba(0,0,0,.45)}
html[data-theme="graphite"] .navi[aria-current="page"]{color:var(--gx-gold-ink);font-weight:700;background:var(--gx-gold);
  box-shadow:0 0 0 1.5px #0a0a0c,0 0 0 3px rgba(232,200,130,.55),0 6px 12px -4px #000,inset 0 1px 0 rgba(255,250,230,.75),inset 0 -3px 6px rgba(120,80,20,.45);text-shadow:0 1px 0 rgba(255,245,220,.5)}
html[data-theme="graphite"] .navi[aria-current="page"]::before{display:none}
html[data-theme="graphite"] .navi .bd{min-width:26px;height:19px;padding:0 6px;border-radius:5px;background:#040201;color:var(--gx-amber);border:1px solid #7d6a45;
  box-shadow:inset 0 0 6px #000,0 0 0 1px rgba(0,0,0,.6);font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;text-shadow:0 0 6px rgba(255,170,60,.7)}
html[data-theme="graphite"] .navi[aria-current="page"] .bd{border-color:#5a4a2a}
html[data-theme="graphite"] .rail-foot{color:#cfc5ad;border-top:0;padding-top:10px}
/* one seam only (#rail::before), no pointer-following light on the sidebar */
html[data-theme="graphite"] #rail::after{display:none}
html[data-theme="graphite"] #nav{padding-right:6px;margin-right:-2px;scrollbar-width:none}
html[data-theme="graphite"] #nav::-webkit-scrollbar{display:none}

/* ===== top bar: a leather strip with a stitched bottom seam and chrome-gold hardware ===== */
html[data-theme="graphite"] #top{position:relative;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;
  background:radial-gradient(120% 140% at 20% 0%,rgba(255,255,255,.1),transparent 60%),var(--gx-grain),#0f1012;background-blend-mode:normal,soft-light,normal;background-size:auto,150px 150px,auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 16px -8px #000}
html[data-theme="graphite"] #top::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--gx-stitch) 0 9px,transparent 9px 15px)}
html[data-theme="graphite"] .crumb{color:#fff;text-shadow:0 1px 0 #000}
html[data-theme="graphite"] .ib{color:#e9e2d2;background:linear-gradient(180deg,#2a2b2f,#141518);box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.14),0 3px 6px -2px #000;border-radius:10px}
html[data-theme="graphite"] .ib:hover{background:linear-gradient(180deg,#34353a,#1a1b1f);color:#fff}
html[data-theme="graphite"] .ib .dot{box-shadow:0 0 8px rgba(255,106,77,.9)}
html[data-theme="graphite"] .gsearch{color:#cfc8ba;border:1px solid #000;background:linear-gradient(180deg,#040201,#0b0a08);box-shadow:0 0 0 1px #3a3530,inset 0 2px 6px #000}
html[data-theme="graphite"] .gsearch:hover{box-shadow:0 0 0 1px #8a7a55,inset 0 2px 6px #000}
html[data-theme="graphite"] .gsearch kbd{color:var(--gx-amber);background:#040201;border-color:#5a4a2a}
/* the avatar is the knob: chrome-gold bezel, black face, gold initials */
html[data-theme="graphite"] .avatar{position:relative;background:radial-gradient(circle at 50% 38%,#2a2b2f,#0c0c0e 70%);color:var(--gx-amber);border:0;text-shadow:0 0 8px rgba(255,170,60,.6);
  box-shadow:0 0 0 2.5px transparent,0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.14),inset 0 -4px 8px rgba(0,0,0,.7),0 4px 10px -2px #000}
html[data-theme="graphite"] .avatar::before{content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;background:var(--gx-chrome);box-shadow:0 2px 4px #000,inset 0 1px 1px rgba(255,255,255,.6)}
html[data-theme="graphite"] .avatar.sm::before,html[data-theme="graphite"] .avatar.xs::before{inset:-2.5px}
html[data-theme="graphite"] .live{color:#cfc8ba}
html[data-theme="graphite"] .live i{box-shadow:0 0 10px var(--ok)}

/* ===== hardware: chrome-gold knob for the primary action, stitched leather tabs for the rest ===== */
html[data-theme="graphite"] .btn{position:relative;color:var(--gx-cream);border:0;background:var(--gx-leather);background-blend-mode:normal,soft-light,normal;background-size:auto,150px 150px,auto;
  box-shadow:0 0 0 1px #000,0 0 0 2px rgba(214,190,130,.22),0 4px 8px -3px #000,var(--gx-leather-inset);text-shadow:0 1px 0 #000;transition:transform .08s,box-shadow .15s,filter .15s}
html[data-theme="graphite"] .btn::before{content:"";position:absolute;inset:4px;border-radius:calc(var(--r-md) - 4px);border:1.5px dashed var(--gx-stitch);pointer-events:none;opacity:.8}
html[data-theme="graphite"] .btn.sm::before{inset:3px;border-radius:calc(var(--r-sm) - 3px)}
html[data-theme="graphite"] .btn.xs::before{display:none}
html[data-theme="graphite"] .btn:hover{filter:brightness(1.25);background:var(--gx-leather)}
html[data-theme="graphite"] .btn:active{transform:translateY(1px)}
html[data-theme="graphite"] .btn.g{background:transparent;box-shadow:none;text-shadow:none;color:#d6cfc0}
html[data-theme="graphite"] .btn.g::before{display:none}
html[data-theme="graphite"] .btn.g:hover{background:rgba(0,0,0,.45);color:#fff;filter:none}
html[data-theme="graphite"] .btn.p{color:var(--gx-gold-ink);background:var(--gx-gold);font-weight:700;text-shadow:0 1px 0 rgba(255,245,220,.55);
  box-shadow:0 0 0 1.5px #0a0a0c,0 0 0 3px rgba(232,200,130,.55),0 8px 14px -5px #000,0 0 18px -4px rgba(232,176,74,.55),inset 0 1px 0 rgba(255,250,230,.8),inset 0 -4px 8px rgba(120,80,20,.45)}
html[data-theme="graphite"] .btn.p::before{border-color:rgba(90,60,20,.35);opacity:1}
html[data-theme="graphite"] .btn.p:hover{filter:brightness(1.08);background:var(--gx-gold)}
html[data-theme="graphite"] .btn.p:active{transform:translateY(2px);box-shadow:0 0 0 1.5px #0a0a0c,0 0 0 3px rgba(232,200,130,.55),0 3px 6px -3px #000,inset 0 3px 6px rgba(120,80,20,.5)}
html[data-theme="graphite"] .btn.d{color:#ffb3a0;background:var(--gx-leather);background-blend-mode:normal,soft-light,normal;background-size:auto,150px 150px,auto}
html[data-theme="graphite"] .btn.d::before{border-color:rgba(255,106,77,.5)}
html[data-theme="graphite"] .btn.d:hover{color:#fff;filter:brightness(1.3)}
html[data-theme="graphite"] .btn.v{color:#fff;background:linear-gradient(180deg,#8f78ff,#5b3fd6);box-shadow:0 0 0 1.5px #0a0a0c,0 0 0 3px rgba(167,139,250,.5),inset 0 1px 0 rgba(255,255,255,.45)}
html[data-theme="graphite"] .btn.v::before{display:none}
html[data-theme="graphite"] .btn.p.busy::after{border-color:var(--gx-gold-ink) transparent var(--gx-gold-ink) transparent}
/* inputs are LCD glass; the focus ring is amber */
html[data-theme="graphite"] .inp{color:var(--gx-cream);border:1px solid #000;background:linear-gradient(180deg,#040201,#0b0a08);box-shadow:0 0 0 1px #3a3530,inset 0 2px 6px #000}
html[data-theme="graphite"] .inp::placeholder{color:#7f786b}
html[data-theme="graphite"] .inp:focus{border-color:#000;box-shadow:0 0 0 1px #c9a35c,0 0 14px -2px rgba(232,176,74,.7),inset 0 2px 6px #000}
html[data-theme="graphite"] .tabs{background:linear-gradient(180deg,#040201,#0b0a08);border:1px solid #000;box-shadow:0 0 0 1px #3a3530,inset 0 2px 6px #000}
html[data-theme="graphite"] .tabs button{color:#cfc8ba}
html[data-theme="graphite"] .tabs button[aria-selected="true"]{color:var(--gx-gold-ink);background:var(--gx-gold);font-weight:700;box-shadow:0 0 0 1px #0a0a0c,inset 0 1px 0 rgba(255,250,230,.75),inset 0 -2px 5px rgba(120,80,20,.45)}
html[data-theme="graphite"] .tabs button[aria-selected="true"] .n{color:#5a4015}
html[data-theme="graphite"] .chip{color:var(--gx-cream);background:rgba(0,0,0,.5);border-color:rgba(214,190,130,.35)}
html[data-theme="graphite"] .chip.acc{color:var(--gx-gold-ink);background:var(--gx-gold);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,250,230,.7)}
html[data-theme="graphite"] .seg{border-color:#000;box-shadow:0 0 0 1px #3a3530}
html[data-theme="graphite"] .seg button{background:#0b0a08;color:#cfc8ba;border-right-color:#000}
html[data-theme="graphite"] .seg button.on{background:var(--gx-gold);color:var(--gx-gold-ink)}
/* switches: chrome-gold knob on a black track; gold track when on */
html[data-theme="graphite"] .tog,html[data-theme="graphite"] [role=switch]{position:relative;width:50px;height:26px;border-radius:14px;flex:none;cursor:pointer;
  background:linear-gradient(180deg,#040201,#15120d);border:1px solid rgba(232,200,130,.45);box-shadow:inset 0 2px 5px #000;transition:background .2s,box-shadow .2s}
html[data-theme="graphite"] .tog::after,html[data-theme="graphite"] [role=switch] i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;content:"";
  background:var(--gx-chrome);box-shadow:0 2px 4px #000,inset 0 1px 1px rgba(255,255,255,.6);transform:none;transition:left .24s cubic-bezier(.3,1.4,.4,1)}
html[data-theme="graphite"] .tog[aria-pressed="true"],html[data-theme="graphite"] [role=switch][aria-checked="true"]{background:linear-gradient(180deg,#a8741f,#f0c675);box-shadow:inset 0 2px 5px rgba(80,40,0,.55),0 0 14px -2px rgba(232,176,74,.75)}
html[data-theme="graphite"] .tog[aria-pressed="true"]::after,html[data-theme="graphite"] [role=switch][aria-checked="true"] i{left:26px;transform:none}
html[data-theme="graphite"] input[type=checkbox]{accent-color:#d8b465}

/* ===== tables and lists ===== */
html[data-theme="graphite"] .tbl th{color:#d9cfb6;border-bottom:1px solid rgba(214,190,130,.3)}
html[data-theme="graphite"] .tbl th.sorted{color:var(--gx-amber)}
html[data-theme="graphite"] .tbl td{border-bottom:1px solid rgba(214,190,130,.12);color:var(--gx-cream)}
html[data-theme="graphite"] .tbl tbody tr:hover{background:rgba(232,176,74,.07)}
html[data-theme="graphite"] .tbl tbody tr.sel{background:rgba(232,176,74,.13)}
html[data-theme="graphite"] .tbl .co{color:#fff;text-decoration:underline;text-decoration-color:rgba(232,200,130,.45);text-underline-offset:3px}
html[data-theme="graphite"] .tbl .co:hover{color:var(--gx-amber)}
html[data-theme="graphite"] .wqi{border-bottom:1px dashed rgba(222,222,226,.18)}
html[data-theme="graphite"] .wqi:hover{background:rgba(0,0,0,.35)}
html[data-theme="graphite"] .empty{color:#cfc8ba}
html[data-theme="graphite"] .empty b{color:#fff}

/* ===== overlays ===== */
html[data-theme="graphite"] .pop,html[data-theme="graphite"] .modal,html[data-theme="graphite"] .drawer,html[data-theme="graphite"] .lw{backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-theme="graphite"] .drawer{border-left:0;border-radius:0}
html[data-theme="graphite"] .pop .pt,html[data-theme="graphite"] .modal .mf{border-color:rgba(222,222,226,.18);border-style:dashed;color:#fff}
html[data-theme="graphite"] .pop .sep{background:transparent;border-top:1px dashed var(--gx-stitch)}
html[data-theme="graphite"] .pop.menu button[role="menuitem"]{color:var(--gx-cream)}
html[data-theme="graphite"] .pop.menu button[role="menuitem"]:hover{background:rgba(0,0,0,.45);color:#fff}
html[data-theme="graphite"] .modal-scrim,html[data-theme="graphite"] .scrim{background:rgba(0,0,0,.7)}
html[data-theme="graphite"] #toasts .toast{color:var(--gx-cream)}
html[data-theme="graphite"] #toasts .toast.ok::before{border-color:rgba(95,212,154,.6)}
html[data-theme="graphite"] #toasts .toast.err::before{border-color:rgba(255,106,77,.6)}
html[data-theme="graphite"] .theme-grid button[aria-pressed="true"]{box-shadow:0 0 0 2px #0a0a0c,0 0 0 4px #e8c882,0 0 14px rgba(232,176,74,.7)}

/* ===== gauges: the clock-in ring is a chrome-gold bezel with a black face and an amber read-out ===== */
html[data-theme="graphite"] .ring{background:conic-gradient(#ffb347 var(--pct,0%),#1c1a16 0);padding:0;
  box-shadow:0 0 0 5px transparent,0 0 0 1px #000,0 10px 22px -4px #000,0 0 calc(12px + 18px*var(--g,.7)) -4px rgba(240,160,60,.35)}
html[data-theme="graphite"] .ring::before{content:"";position:absolute;inset:-7px;border-radius:50%;z-index:-1;background:var(--gx-chrome);box-shadow:0 3px 6px #000,inset 0 1px 1px rgba(255,255,255,.6)}
html[data-theme="graphite"] .ring::after{inset:9px;background:radial-gradient(circle at 50% 36%,#1d1812,#070403 72%);box-shadow:inset 0 8px 20px rgba(0,0,0,.95),inset 0 -3px 8px rgba(255,200,120,.1),0 0 0 2px #0b0704}
html[data-theme="graphite"] .ring b{color:var(--gx-amber);font:800 20px/1 ui-monospace,Menlo,Consolas,monospace;text-shadow:0 0 12px rgba(255,170,60,.65)}
html[data-theme="graphite"] .fab{box-shadow:0 0 0 3px #e3c27a,0 0 0 5px #0a0a0c,0 0 0 6px rgba(232,200,130,.4),0 14px 34px -8px #000,0 0 24px -4px rgba(232,176,74,.55)}

/* ===== sign-in: the logo for a dark ground and a stitched leather card ===== */
html[data-theme="graphite"] .auth-logo img{filter:drop-shadow(0 12px 30px rgba(0,0,0,.9)) drop-shadow(0 0 24px rgba(232,176,74,.25))}
html[data-theme="graphite"] .auth-logo small{color:#d9cfb6;letter-spacing:.18em;text-transform:uppercase;font-size:11px;font-weight:700;text-shadow:0 1px 0 #000}
html[data-theme="graphite"] .auth-card h1{color:#fff;text-shadow:0 1px 0 #000}
html[data-theme="graphite"] .auth-card .sub,html[data-theme="graphite"] .auth-card .foot{color:#cfc8ba}
html[data-theme="graphite"] .auth-card label{color:#e9e2d2}

/* ===== phone ===== */
@media(max-width:900px){
  html[data-theme="graphite"] #rail{padding:18px 14px 14px;border-radius:0 0 36px 0}
  html[data-theme="graphite"] .kpi .v{font-size:24px}
  html[data-theme="graphite"] .drawer{box-shadow:0 -20px 60px #000,0 0 0 1px #000}
  html[data-theme="graphite"] .pop.menu{max-width:calc(100vw - 24px)}
}

/* ===== the AI lead-rating panel (js/lead-rating-panel.js injects its own light tokens): re-tokened for the leather ===== */
html[data-theme="graphite"] .lr{--lr-ink:#efe9dc;--lr-mute:#c9c0ae;--lr-line:rgba(214,190,130,.3);--lr-gold:#e8c882;--lr-gold-bg:rgba(232,176,74,.12);--lr-good:#5fd49a;--lr-warn:#ff9d7a;--lr-bg:rgba(0,0,0,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
html[data-theme="graphite"] .lr-btn{background:rgba(0,0,0,.5);color:#efe9dc}
html[data-theme="graphite"] .lr-issue{background:rgba(255,106,77,.12)}
html[data-theme="graphite"] .lr-stale{background:rgba(232,176,74,.12)}