/* Animal Alert: design system in stil Apple (Obsidian: projects/animal-alert/12-design-apple, nota 15-redesign-apple).
   Regula: fundal gri foarte deschis, carduri albe rotunjite fara chenare grele; text aproape negru, secundar gri;
   un singur albastru pentru actiuni; rosu / portocaliu / galben / verde doar pentru starea datelor.
   Tema: automat (dupa sistem), luminos sau intunecat. Alegerea vine din cookie-ul `tema` ca data-theme pe <html>.
   Fontul: SF Pro pe Mac si iPhone (fontul sistemului), Inter in rest. */

:root{
  --canvas:#f5f5f7; --surface:#ffffff; --tint:#fafafc; --sunk:#f0f0f3; --sidebar:rgba(246,246,248,.92); --bar:rgba(245,245,247,.8);
  --ink:#1d1d1f; --ink-2:#636366; --ink-3:#6a6a6f; --rule:#e5e5ea; --rule-2:#d1d1d6;
  --primary:#0071e3; --primary-ink:#0062c4; --on-primary:#fff; --primary-10:rgba(0,113,227,.09); --primary-16:rgba(0,113,227,.16);
  --link:#0066cc;
  --fill:rgba(0,0,0,.05); --fill-2:rgba(0,0,0,.08); --fill-3:rgba(0,0,0,.12);
  --exp:#d70015; --exp-bg:rgba(255,59,48,.1);
  --crit:#c93400; --crit-bg:rgba(255,149,0,.13);
  --warn:#9a6700; --warn-bg:rgba(255,204,0,.18); --warn-bar:#ffb800; --crit-bar:#ff9500; --exp-bar:#ff3b30;
  --ok:#1f7a35; --ok-bg:rgba(52,199,89,.13);
  --bubble:#e9e9eb; --bubble-ink:#1d1d1f;
  --shadow:0 0 0 .5px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05), 0 6px 20px -12px rgba(0,0,0,.12);
  --pop:0 12px 40px -12px rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.08);
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",ui-sans-serif,"Segoe UI",Roboto,sans-serif;
  --fd:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",ui-sans-serif,"Segoe UI",Roboto,sans-serif;
  --r-sm:10px; --r-md:18px; --r-pill:980px;
  --side:256px; --tabbar:0px;
  /* nume vechi, folosite in cateva sabloane */
  --violet-8:var(--fill); --violet-14:var(--fill-2); --violet-22:var(--fill-3); --lavender:var(--surface);
  color-scheme:light;
}
/* Tema intunecata: aceleasi valori pentru „automat” cu sistemul pe dark si pentru alegerea explicita */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --canvas:#000000; --surface:#1c1c1e; --tint:#232325; --sunk:#141416; --sidebar:rgba(22,22,24,.92); --bar:rgba(0,0,0,.72);
  --ink:#f5f5f7; --ink-2:#a1a1a6; --ink-3:#8e8e93; --rule:#2c2c2e; --rule-2:#3a3a3c;
  --primary:#0a84ff; --primary-ink:#409cff; --primary-btn:#0071e3; --primary-btn-h:#0062c4; --primary-10:rgba(10,132,255,.16); --primary-16:rgba(10,132,255,.26); --link:#2997ff;
  --fill:rgba(255,255,255,.07); --fill-2:rgba(255,255,255,.11); --fill-3:rgba(255,255,255,.16);
  --exp:#ff6961; --exp-bg:rgba(255,69,58,.16); --crit:#ffa534; --crit-bg:rgba(255,159,10,.16);
  --warn:#ffd60a; --warn-bg:rgba(255,214,10,.14); --warn-bar:#ffd60a; --crit-bar:#ff9f0a; --exp-bar:#ff453a; --ok:#30d158; --ok-bg:rgba(48,209,88,.15);
  --bubble:#2c2c2e; --bubble-ink:#f5f5f7;
  --shadow:0 0 0 .5px rgba(255,255,255,.06); --pop:0 16px 48px -12px rgba(0,0,0,.7), 0 0 0 .5px rgba(255,255,255,.12);
  color-scheme:dark } }
:root[data-theme="dark"]{
  --canvas:#000000; --surface:#1c1c1e; --tint:#232325; --sunk:#141416; --sidebar:rgba(22,22,24,.92); --bar:rgba(0,0,0,.72);
  --ink:#f5f5f7; --ink-2:#a1a1a6; --ink-3:#8e8e93; --rule:#2c2c2e; --rule-2:#3a3a3c;
  --primary:#0a84ff; --primary-ink:#409cff; --primary-btn:#0071e3; --primary-btn-h:#0062c4; --primary-10:rgba(10,132,255,.16); --primary-16:rgba(10,132,255,.26); --link:#2997ff;
  --fill:rgba(255,255,255,.07); --fill-2:rgba(255,255,255,.11); --fill-3:rgba(255,255,255,.16);
  --exp:#ff6961; --exp-bg:rgba(255,69,58,.16); --crit:#ffa534; --crit-bg:rgba(255,159,10,.16);
  --warn:#ffd60a; --warn-bg:rgba(255,214,10,.14); --warn-bar:#ffd60a; --crit-bar:#ff9f0a; --exp-bar:#ff453a; --ok:#30d158; --ok-bg:rgba(48,209,88,.15);
  --bubble:#2c2c2e; --bubble-ink:#f5f5f7;
  --shadow:0 0 0 .5px rgba(255,255,255,.06); --pop:0 16px 48px -12px rgba(0,0,0,.7), 0 0 0 .5px rgba(255,255,255,.12);
  color-scheme:dark }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--canvas)}
body{margin:0; background:var(--canvas); color:var(--ink); font:400 15px/1.47 var(--f); letter-spacing:-.01em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
a{color:inherit}
h1,h2,h3{margin:0; font-family:var(--fd); font-weight:600; letter-spacing:-.015em}
p{margin:0}
.num,td.n,th.n{font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset:2px; border-radius:8px}
svg.i{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* ── Cadrul: bara laterala (ca in Finder / Mail) + pagina ──────────────── */
.shell{display:grid; grid-template-columns:var(--side) minmax(0,1fr); min-height:100vh; background:linear-gradient(to right, var(--sidebar) var(--side), transparent var(--side))}
.side{background:var(--sidebar); color:var(--ink); border-right:1px solid var(--rule); position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:18px 12px 14px; gap:18px; overflow-y:auto;
  backdrop-filter:saturate(1.8) blur(20px); -webkit-backdrop-filter:saturate(1.8) blur(20px)}
.brand{display:flex; align-items:center; gap:10px; padding:4px 10px; color:var(--ink); text-decoration:none; font:600 16px/1 var(--fd); letter-spacing:-.02em}
.brand .mark{width:28px; height:28px; border-radius:8px; background:linear-gradient(180deg, #2b8cff, #0066dd); display:grid; place-items:center; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.brand .mark svg{width:16px; height:16px; stroke:#fff; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round}

.firm{position:relative}
.firm summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; background:var(--surface); box-shadow:var(--shadow)}
.firm summary::-webkit-details-marker{display:none}
.firm .av{width:30px; height:30px; border-radius:50%; background:linear-gradient(180deg, #a1a1a6, #7c7c80); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:600; flex:none}
.firm .who{min-width:0; flex:1}
.firm .who b{display:block; color:var(--ink); font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.firm .who span{font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.firm .chev{color:var(--ink-3)}
.firm .menu{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; background:var(--surface); border-radius:14px; padding:6px; display:grid; gap:2px; box-shadow:var(--pop)}
.firm .menu a{display:flex; justify-content:space-between; gap:8px; padding:9px 10px; border-radius:8px; text-decoration:none; color:var(--ink); font-size:13.5px}
.firm .menu a:hover{background:var(--primary); color:#fff} .firm .menu a:hover span{color:rgba(255,255,255,.8)}
.firm .menu a span{color:var(--ink-2); font-size:12px}
.firm .menu .note{padding:8px 10px 6px; font-size:12px; color:var(--ink-2); border-top:1px solid var(--rule); margin-top:4px}

.nav{display:grid; gap:1px}
.nav .lbl{font-size:11.5px; font-weight:600; color:var(--ink-3); padding:14px 10px 4px; letter-spacing:0}
.nav a{display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; border-radius:8px; text-decoration:none; color:var(--ink); font-size:14px; font-weight:400}
.nav a svg.i{color:var(--primary)}
.nav a:hover{background:var(--fill)}
.nav a[aria-current="page"]{background:var(--fill-2); font-weight:500}
.nav a .c{margin-left:auto; font-size:12px; font-variant-numeric:tabular-nums; color:var(--ink-2)}
.nav a .c.hot{color:#fff; background:#d70015; border-radius:10px; padding:0 7px; line-height:19px; font-weight:600}
.side .foot{margin-top:auto; padding:12px 10px 4px; border-top:1px solid var(--rule); font-size:12px; color:var(--ink-2); display:grid; gap:4px}
.side .foot b{color:var(--ink); font-weight:500}
.foot .prefs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}

/* Comutatoare mici (limba, tema): segmented control iOS */
.lang,.tema{display:flex; gap:2px; padding:2px; border-radius:9px; background:var(--fill-2); width:max-content}
.lang a,.tema a{height:26px; min-width:30px; display:inline-flex; align-items:center; justify-content:center; padding:0 9px; border-radius:7px; text-decoration:none; color:var(--ink-2); font-size:12px; font-weight:500}
.lang a:hover,.tema a:hover{color:var(--ink)}
.lang a[aria-current="true"],.tema a[aria-current="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04)}
:root[data-theme="dark"] .tema a[aria-current="true"],:root[data-theme="dark"] .lang a[aria-current="true"]{background:#636366}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tema a[aria-current="true"], :root:not([data-theme="light"]) .lang a[aria-current="true"]{background:#636366} }
.tema svg.i{width:15px; height:15px}

.main{min-width:0; display:flex; flex-direction:column}
.top{position:sticky; top:0; z-index:20; background:var(--bar); backdrop-filter:saturate(1.8) blur(20px); -webkit-backdrop-filter:saturate(1.8) blur(20px); border-bottom:1px solid transparent; transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--rule)}
.top .in{display:flex; align-items:center; gap:12px; height:56px; padding:0 36px; max-width:1320px; width:100%; margin:0 auto}
.crumbs{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); min-width:0}
.crumbs a{text-decoration:none; color:var(--ink-2)} .crumbs a:hover{color:var(--link)}
.crumbs .sep{color:var(--ink-3)}
.crumbs b{font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.search{margin-left:auto; position:relative; width:min(320px, 40vw)}
.search input{width:100%; height:36px; border-radius:10px; border:0; background:var(--fill-2); color:var(--ink); font:inherit; font-size:14px; padding:0 40px 0 34px}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{outline:none; background:var(--surface); box-shadow:0 0 0 3px var(--primary-16), 0 0 0 1px var(--primary)}
.search .i{position:absolute; left:11px; top:10px; color:var(--ink-3); width:16px; height:16px}
.search kbd{position:absolute; right:9px; top:8px; font:500 11px/20px var(--f); color:var(--ink-3); border-radius:5px; padding:0 6px; background:var(--fill)}
.burger{display:none; width:36px; height:36px; border-radius:10px; border:0; background:var(--fill-2); color:var(--ink); align-items:center; justify-content:center}

.page{padding:16px 36px 72px; max-width:1320px; width:100%; margin:0 auto; display:grid; gap:24px; align-content:start}
.page > *{min-width:0}

/* ── Antet de pagina: titlu mare, ca in aplicatiile iOS ─────────────────── */
.ph{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 24px; padding-top:16px}
.eyebrow{font-size:13px; font-weight:600; color:var(--ink-2); letter-spacing:-.005em}
.ph h1{font-size:34px; line-height:1.1; letter-spacing:-.025em; font-weight:700; margin-top:2px}
.ph .lead{color:var(--ink-2); font-size:16px; margin-top:8px; max-width:68ch; letter-spacing:-.012em}
.acts{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ── Butoane: albastru plin pentru actiunea principala, gri pentru restul ─ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 16px; border-radius:var(--r-pill); border:0; font:500 14px/1 var(--f); letter-spacing:-.01em; text-decoration:none; cursor:pointer; white-space:nowrap; color:var(--ink); background:var(--fill-2); transition:background .15s, transform .1s}
.btn:hover{background:var(--fill-3)}
.btn:active{transform:scale(.98)}
/* in tema intunecata butonul are un albastru mai inchis decat linkurile, ca textul alb sa aiba contrast 4.5:1 */
.btn.primary{background:var(--primary-btn, var(--primary)); color:var(--on-primary)}
.btn.primary:hover{background:var(--primary-btn-h, var(--primary-ink))}
.btn.tint{background:var(--primary-10); color:var(--link)}
.btn.tint:hover{background:var(--primary-16)}
.btn.sm{height:30px; padding:0 13px; font-size:13px}
.btn.danger{color:var(--exp)}
.btn[disabled]{opacity:.4; cursor:not-allowed; transform:none}
.btn svg.i{width:16px; height:16px}

.dl{position:relative}
.dl summary{list-style:none}
.dl summary::-webkit-details-marker{display:none}
.dl .menu{position:absolute; right:0; top:calc(100% + 6px); z-index:15; min-width:240px; background:var(--surface); border-radius:14px; padding:6px; box-shadow:var(--pop)}
.dl .menu a{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:9px; text-decoration:none; font-size:14px}
.dl .menu a:hover{background:var(--fill)}
.dl .menu a small{display:block; color:var(--ink-2); font-size:12px; margin-top:2px}
.dl .menu .ext{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-size:10.5px; font-weight:700; letter-spacing:.02em; flex:none}
.ext.csv{background:var(--fill-2); color:var(--ink-2)} .ext.xlsx{background:var(--ok-bg); color:var(--ok)} .ext.pdf{background:var(--exp-bg, var(--fill-2)); color:var(--exp)}

/* ── Carduri ───────────────────────────────────────────────────────────── */
.card{background:var(--surface); border-radius:var(--r-md); box-shadow:var(--shadow)}
.card > .hd{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 22px 14px}
.card > .hd h2{font-size:18px; letter-spacing:-.02em}
.card > .hd .sub{color:var(--ink-2); font-size:13.5px; margin-top:2px}
.card > .bd{padding:0 22px 22px}

.hero{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 32px; align-items:end; padding:30px 32px}
.hero .eyebrow{color:var(--exp)}
.hero .big{font:700 clamp(44px, 5.4vw, 64px)/1 var(--fd); letter-spacing:-.035em; margin-top:10px}
.hero .big small{font-size:.36em; font-weight:500; color:var(--ink-2); margin-left:8px; letter-spacing:-.01em}
.hero p{color:var(--ink-2); font-size:16px; margin-top:14px; max-width:62ch}
.hero p b{color:var(--ink); font-weight:600}

.kpis{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px}
.kpi{display:grid; gap:12px; padding:18px 20px; text-decoration:none; transition:transform .15s, box-shadow .15s}
.kpi:hover{transform:translateY(-1px); box-shadow:var(--shadow), 0 8px 24px -12px rgba(0,0,0,.18)}
.kpi .k{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); font-weight:500}
.kpi .v{font:700 34px/1 var(--fd); letter-spacing:-.03em}
.kpi .v small{font-size:14px; color:var(--ink-2); font-weight:400; margin-left:6px; letter-spacing:-.01em}
.kpi .s{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-2); padding-top:12px; border-top:1px solid var(--rule)}
.kpi .s b{color:var(--ink); font-weight:500}
.kpi.exp .v{color:var(--exp)}

.dot{width:8px; height:8px; border-radius:50%; flex:none; background:currentColor}
.t-exp{color:var(--exp-bar)} .t-crit{color:var(--crit-bar)} .t-warn{color:var(--warn-bar)} .t-ok{color:var(--ok)}

.pill{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:var(--r-pill); font-size:12.5px; font-weight:500; white-space:nowrap; text-decoration:none}
.pill.exp{background:var(--exp-bg); color:var(--exp)} .pill.crit{background:var(--crit-bg); color:var(--crit)}
.pill.warn{background:var(--warn-bg); color:var(--warn)} .pill.ok{background:var(--ok-bg); color:var(--ok)}
.pill.mute{background:var(--fill-2); color:var(--ink-2)}
.pill .dot{width:6px; height:6px}

.grid-2{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start}
.stack{display:grid; gap:20px}

/* ── Tabele: randuri aerisite, linii fine, fara majuscule ──────────────── */
.tw{overflow-x:auto}
table.t{width:100%; border-collapse:collapse; font-size:14px}
.t th{text-align:left; font-size:12.5px; font-weight:500; color:var(--ink-2); padding:10px 12px; border-bottom:1px solid var(--rule); white-space:nowrap; background:var(--surface); position:sticky; top:0}
.t th:first-child,.t td:first-child{padding-left:22px} .t th:last-child,.t td:last-child{padding-right:22px}
.t th a{text-decoration:none; display:inline-flex; gap:4px; align-items:center}
.t th a:hover,.t th a.on{color:var(--ink)}
.t td{padding:13px 12px; border-bottom:1px solid var(--rule); vertical-align:middle}
.t tbody tr:last-child td{border-bottom:0}
.t th.n,.t td.n{text-align:right; white-space:nowrap}
.t tbody tr[data-href]{cursor:pointer}
.t tbody tr[data-href]:hover td{background:var(--tint)}
.t .p{font-weight:500; max-width:420px; min-width:200px}
.t .p a{text-decoration:none}
.t .m{display:block; color:var(--ink-2); font-size:12.5px; margin-top:2px; font-weight:400}
.t .z{font-weight:600}
.t .z.neg{color:var(--exp)}
.t .muted{color:var(--ink-3)}
.t tfoot td{font-weight:600; border-top:1px solid var(--rule); border-bottom:0; background:var(--tint)}
.t tfoot tr:last-child td:first-child{border-bottom-left-radius:var(--r-md)} .t tfoot tr:last-child td:last-child{border-bottom-right-radius:var(--r-md)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12.5px; letter-spacing:0}

/* ── Bara de filtre ────────────────────────────────────────────────────── */
.bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:14px 22px; border-bottom:1px solid var(--rule)}
.seg{display:flex; gap:2px; padding:2px; border-radius:9px; background:var(--fill-2); flex-wrap:wrap}
.seg a{display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px; border-radius:7px; text-decoration:none; font-size:13.5px; font-weight:500; color:var(--ink-2); white-space:nowrap}
.seg a:hover{color:var(--ink)}
.seg a[aria-current="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04)}
:root[data-theme="dark"] .seg a[aria-current="true"]{background:#636366}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .seg a[aria-current="true"]{background:#636366} }
.seg a .c{font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.seg a[aria-current="true"] .c{color:var(--ink-2)}
.seg a .dot{width:6px; height:6px}
select.sel, input.fld{height:36px; border-radius:10px; border:0; background:var(--fill-2); color:var(--ink); font:inherit; font-size:14px; padding:0 12px}
input.fld:focus, select.sel:focus{outline:none; background:var(--surface); box-shadow:0 0 0 3px var(--primary-16), 0 0 0 1px var(--primary)}
select.sel{padding-right:32px; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center}
.bar .grow{flex:1}
.bar .info{font-size:13.5px; color:var(--ink-2)}

/* ── Grafic pe luni ────────────────────────────────────────────────────── */
.chart{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:6px; align-items:end; height:150px; padding-top:8px}
.chart a{display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%; text-decoration:none; color:var(--ink-2); font-size:11px}
.chart .b{width:100%; max-width:22px; border-radius:6px; background:var(--fill-2); min-height:3px; position:relative}
.chart .b.warn{background:var(--warn-bar)} .chart .b.crit{background:var(--crit-bar)} .chart .b.exp{background:var(--exp-bar)} .chart .b.ok{background:var(--primary)}
.chart .b.zero{background:var(--fill-2)}
.chart .n{font-size:11px; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; min-height:14px}
.chart a:hover .b{opacity:.8}
.chart .y{font-size:10px; color:var(--ink-3); min-height:12px}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-top:12px}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:10px; height:10px; border-radius:50%; display:inline-block}

/* ── Liste mici, definitii (ca listele grupate din iOS) ────────────────── */
.rows{display:grid}
.rows a,.rows div.r{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--rule); text-decoration:none; font-size:14px}
.rows > :first-child{border-top:0}
.rows .l{min-width:0} .rows .l b{display:block; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .rows .l span{color:var(--ink-2); font-size:12.5px}
.rows .rt{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.rows a:hover b{color:var(--link)}
dl.kv{display:grid; grid-template-columns:auto 1fr; margin:0; font-size:14px}
dl.kv dt,dl.kv dd{padding:10px 0; border-top:1px solid var(--rule)}
dl.kv dt:first-of-type,dl.kv dt:first-of-type + dd{border-top:0; padding-top:2px}
dl.kv dt{color:var(--ink-2); padding-right:20px}
dl.kv dd{margin:0; text-align:right; font-weight:500; font-variant-numeric:tabular-nums; min-width:0; overflow-wrap:anywhere}
.stat-line{display:flex; gap:28px; flex-wrap:wrap}
.stat-line div{display:grid; gap:4px} .stat-line span{font-size:12.5px; color:var(--ink-2)} .stat-line b{font:600 22px/1.1 var(--fd); letter-spacing:-.02em; font-variant-numeric:tabular-nums}

/* ── Mesaje, gol, incarcare ────────────────────────────────────────────── */
.flash{display:flex; gap:12px; align-items:flex-start; padding:12px 16px; border-radius:14px; font-size:14px}
.flash.ok{background:var(--ok-bg); color:var(--ink)}
.flash.eroare{background:var(--exp-bg); color:var(--ink)}
.flash svg.i{margin-top:1px} .flash.ok svg.i{color:var(--ok)} .flash.eroare svg.i{color:var(--exp)}
.empty{padding:52px 24px; text-align:center; display:grid; justify-items:center; gap:10px; color:var(--ink-2)}
.empty .ic{width:48px; height:48px; border-radius:50%; background:var(--ok-bg); color:var(--ok); display:grid; place-items:center}
.empty h3{color:var(--ink); font-size:19px}
.empty p{max-width:46ch; font-size:14.5px}
.drop{display:grid; gap:6px; justify-items:center; text-align:center; padding:30px; border:1.5px dashed var(--rule-2); border-radius:16px; background:var(--tint); color:var(--ink-2); font-size:14px; cursor:pointer; transition:border-color .15s, background .15s}
.drop:hover,.drop.over{border-color:var(--primary); background:var(--primary-10)}
.drop b{color:var(--ink); font-weight:600; font-size:15px}
.drop .ic{width:44px; height:44px; border-radius:50%; background:var(--primary-10); display:grid; place-items:center; color:var(--primary); margin-bottom:6px}
.drop input{display:none}

/* ── Detaliu lot ───────────────────────────────────────────────────────── */
.lot-head{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start}
.days{font:700 68px/1 var(--fd); letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.days small{font-size:17px; font-weight:500; color:var(--ink-2); margin-left:8px; letter-spacing:-.01em}
.shelf{display:grid; gap:10px; margin-top:24px}
.shelf .tr{position:relative; height:8px; border-radius:4px; background:var(--fill-2)}
.shelf .fill{position:absolute; inset:0 auto 0 0; border-radius:4px; background:currentColor}
.shelf .now{position:absolute; top:-5px; width:3px; height:18px; background:var(--ink); border-radius:2px}
.shelf .ends{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.quote{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12.5px; line-height:1.6; letter-spacing:0; background:var(--sunk); border-radius:12px; padding:12px 14px; color:var(--ink-2); overflow-wrap:anywhere}
.t .m mark,.quote mark{background:var(--warn-bg); color:var(--ink); border-radius:3px; padding:0 2px}
.form-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.form-row .fld{width:110px}
.timeline{display:grid; gap:0}
.timeline .ev{display:grid; grid-template-columns:16px minmax(0,1fr) auto; gap:12px; padding:10px 0; font-size:14px; border-top:1px solid var(--rule)}
.timeline .ev:first-child{border-top:0}
.timeline .ev .dot{margin-top:6px}
.timeline .ev span{color:var(--ink-2); font-size:12.5px; white-space:nowrap}

/* ── Tab-uri ───────────────────────────────────────────────────────────── */
.tabs{display:flex; gap:24px; border-bottom:1px solid var(--rule); padding:0 22px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:14px 0 12px; text-decoration:none; color:var(--ink-2); font-size:14px; font-weight:500; border-bottom:2px solid transparent; margin-bottom:-1px; display:inline-flex; gap:8px; align-items:center; white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--primary)}
.tabs a .c{font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
/* Previzualizarea SMS-ului: bula de mesaj ca in Messages */
.msg{white-space:pre-wrap; font-size:14px; line-height:1.45; background:var(--bubble); color:var(--bubble-ink); border-radius:20px 20px 20px 6px; padding:12px 16px; max-width:460px}
.t tr.grp td{background:var(--tint); font-weight:600; font-size:13.5px; padding-top:10px; padding-bottom:10px}
.t tr.grp td .dot{display:inline-block; margin-right:8px; vertical-align:1px}
.t tr.grp td .c{color:var(--ink-2); font-weight:400; font-size:12.5px; margin-left:10px}
.group-h{display:flex; align-items:center; gap:10px; padding:18px 22px 8px; font-size:15px; font-weight:600}
.group-h > span:not(.dot){color:var(--ink-2); font-weight:400; font-size:13px}

/* ── Setari: titlul sectiunii in stanga, campurile in dreapta ──────────── */
.settings{display:grid; grid-template-columns:240px minmax(0,1fr); gap:24px 40px; padding:26px 0; border-top:1px solid var(--rule)}
.settings:first-of-type{border-top:0; padding-top:4px}
.settings > :last-child{max-width:560px}
.settings h2{font-size:17px} .settings .d{color:var(--ink-2); font-size:13.5px; margin-top:6px}
.field{display:grid; gap:6px; font-size:13.5px}
.field label{color:var(--ink-2)}
.field .fld{width:140px}
.field textarea,.settings textarea{width:100%; border-radius:12px; border:0; background:var(--fill-2); color:var(--ink); font:13px/1.45 ui-monospace,"SF Mono",Menlo,monospace; padding:10px 12px}
.settings textarea:focus{outline:none; background:var(--surface); box-shadow:0 0 0 3px var(--primary-16), 0 0 0 1px var(--primary)}
.hint{font-size:12.5px; color:var(--ink-2)}
.ok-txt{color:var(--ok)} .exp-txt{color:var(--exp)}

/* ── Acasa: antetul de o fraza, cifrele mici, indemnurile ─────────────── */
.ph.azi h1{font-size:34px}
.ph.azi .lead b{color:var(--ink); font-weight:600}
.cifre{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--rule); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow)}
.cifra{display:grid; gap:2px; align-content:start; padding:16px 20px; background:var(--surface); text-decoration:none; color:var(--ink)}
a.cifra:hover{background:var(--tint)}
.cifra span{font-size:13px; color:var(--ink-2); font-weight:500}
.cifra b{font:600 22px/1.2 var(--fd); letter-spacing:-.02em; margin-top:2px}
.cifra small{font-size:12.5px; color:var(--ink-2)}
.nudges{display:grid; gap:10px}
.duo{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; align-items:start}
.nudge{display:flex; align-items:center; gap:12px; padding:13px 18px; border-radius:14px; background:var(--primary-10); color:var(--ink); text-decoration:none; font-size:14px}
.nudge:hover{background:var(--primary-16)}
.nudge > svg.i{color:var(--link)} .nudge > svg.i:last-child{margin-left:auto}
.nudge b{font-weight:600}

/* ── Lista de loturi (Acasa, Stoc): randuri, nu tabel; titlurile de grup raman sus la derulare ─ */
.loturi{display:grid}
.loturi .inca{display:flex; align-items:center; gap:6px; padding:12px 22px; border-top:1px solid var(--rule); color:var(--link); text-decoration:none; font-size:14px; font-weight:500} .loturi .inca:hover{background:var(--tint)}
.grp-h{position:sticky; top:56px; z-index:3; display:flex; align-items:center; gap:8px; padding:9px 22px; background:var(--tint); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); font-size:13px; font-weight:600; color:var(--ink)}
.grp-h .c{margin-left:auto; color:var(--ink-2); font-weight:500; font-variant-numeric:tabular-nums}
.grp-h .dot{width:8px; height:8px}
.grp-h + .lr{border-top:0}
.lr{display:grid; grid-template-columns:minmax(0,1fr) 128px 76px 112px 92px; gap:6px 16px; align-items:center; padding:12px 22px; border-top:1px solid var(--rule); cursor:pointer}
.lr.cu-act{grid-template-columns:minmax(0,1fr) 128px 76px 112px auto}
.lr:hover{background:var(--tint)}
.lr .nm{min-width:0}
.lr .nm a{display:block; text-decoration:none; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lr .nm span{display:block; font-size:12.5px; color:var(--ink-2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lr .ex b{display:block; font-weight:600; font-size:14px} .lr .ex b.neg{color:var(--exp)}
.lr .ex span{display:block; font-size:12.5px; color:var(--ink-2)}
.lr .q,.lr .v{text-align:right; white-space:nowrap} .lr .q span{color:var(--ink-2); font-size:12.5px}
.lr .st{display:flex; justify-content:flex-end}
.lr .act{display:flex; gap:6px; justify-content:flex-end}
.loturi .tot{display:flex; justify-content:space-between; padding:14px 22px; border-top:1px solid var(--rule); background:var(--tint); font-weight:600; border-radius:0 0 var(--r-md) var(--r-md)}

/* ── Facturi: sursa (e-Factura / incarcare), liniile de verificat, istoricul strans ─────── */
.sursa{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px; padding:16px 22px}
.sursa-st{display:flex; gap:12px; align-items:center; min-width:0; flex:1 1 360px}
.sursa-st .ic{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--fill-2); color:var(--ink-2); flex:none}
.sursa-st .ic.ok{background:var(--ok-bg); color:var(--ok)}
.sursa-st b{display:block; font-weight:600} .sursa-st span{display:block; font-size:13.5px; color:var(--ink-2)}
.incarca > summary{list-style:none} .incarca > summary::-webkit-details-marker{display:none}
.incarca[open]{flex:1 1 100%; display:grid; gap:12px; justify-items:end}
.incarca[open] .drop{width:100%}
.verif{display:grid} .verif > *{min-width:0}
.pasi{display:grid}
.pas{display:flex; align-items:center; gap:16px; padding:20px 22px; border-top:1px solid var(--rule); text-decoration:none; color:var(--ink)} .pas:first-child{border-top:0}
.pas:hover{background:var(--tint)} .pas b{display:block; font-weight:600; margin-bottom:2px; color:var(--ink)} .pas > span:nth-child(2){color:var(--ink-2); font-size:14px; flex:1}
.pas .nr{width:32px; height:32px; border-radius:50%; background:var(--primary-10); color:var(--link); display:grid; place-items:center; font-weight:600; flex:none} .pas > svg.i{color:var(--ink-3)}
.tel{display:flex; flex-wrap:wrap; gap:10px; align-items:center} .tel .fld{width:200px}
.vr{display:grid; grid-template-columns:minmax(0,1fr) 160px 140px auto; gap:10px 14px; align-items:end; padding:14px 22px; border-top:1px solid var(--rule)}
.vr .nm{align-self:center; min-width:0}
.vr .nm b{display:block; font-weight:500}
.vr .nm span{display:block; font-size:12.5px; color:var(--ink-2); margin-top:2px} .vr .nm a{color:var(--link); text-decoration:none}
.vr .nm .mono{font-size:11.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vr .fl{display:grid; gap:4px; font-size:12px; color:var(--ink-2)} .vr .fl .fld{width:100%}
.vr .bt{display:flex; gap:6px}
.istoric > summary{list-style:none; display:flex; align-items:center; gap:10px; padding:16px 22px; cursor:pointer}
.istoric > summary::-webkit-details-marker{display:none}
.istoric > summary span{color:var(--ink-2); font-size:13.5px} .istoric > summary svg{margin-left:auto; color:var(--ink-3); transition:transform .2s}
.istoric[open] > summary svg{transform:rotate(180deg)}

/* ── Bara de taburi de jos (doar pe telefon) ───────────────────────────── */
.tabbar{display:none}

/* ── Tableta si telefon ────────────────────────────────────────────────── */
/* tableta / laptop mic: pe randurile cu actiuni cantitatea iese (e in pagina lotului), ca numele sa ramana lizibil */
@media (max-width: 1280px) and (min-width: 641px){ .lr.cu-act{grid-template-columns:minmax(0,1fr) 116px 104px auto} .lr.cu-act .q{display:none} }
@media (max-width: 1180px){ .grid-2,.lot-head,.duo{grid-template-columns:minmax(0,1fr)} .kpis{grid-template-columns:repeat(2, minmax(0,1fr))} .cifre{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 900px){
  :root{--tabbar:calc(56px + env(safe-area-inset-bottom))}
  .shell{grid-template-columns:minmax(0,1fr); background:none}
  /* bara laterala devine foaie care urca din stanga, deschisa din „Mai mult” */
  .side{position:fixed; inset:0 auto 0 0; width:min(310px, 86vw); z-index:50; transform:translateX(-102%); transition:transform .25s cubic-bezier(.3,.7,.2,1); background:var(--canvas); border-right:0}
  body.menu-open .side{transform:none; box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .nav a{height:44px; font-size:16px} .nav a svg.i{width:22px; height:22px}
  .top .in{padding:0 16px; height:52px} .page{padding:8px 16px calc(32px + var(--tabbar))}
  .search{width:auto; flex:1}
  .search kbd{display:none}
  .hero{grid-template-columns:minmax(0,1fr); padding:24px 22px}
  .settings{grid-template-columns:minmax(0,1fr); gap:12px}
  .tabbar{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); position:fixed; left:0; right:0; bottom:0; z-index:40; height:var(--tabbar); padding-bottom:env(safe-area-inset-bottom);
    background:var(--bar); backdrop-filter:saturate(1.8) blur(20px); -webkit-backdrop-filter:saturate(1.8) blur(20px); border-top:1px solid var(--rule)}
  .tabbar a,.tabbar button{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; color:var(--ink-3); font:500 10.5px/1 var(--f); letter-spacing:0; background:none; border:0; padding:0; cursor:pointer}
  .tabbar a:not([aria-current]),.tabbar button:not([aria-current]){color:var(--ink-2)}
  .tabbar svg.i{width:24px; height:24px; stroke-width:1.6}
  .tabbar [aria-current="page"]{color:var(--primary)}
  .tabbar .c{position:absolute; top:5px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#d70015; color:#fff; font-size:11px; font-weight:600; display:grid; place-items:center; font-variant-numeric:tabular-nums}
  .consimt{bottom:calc(var(--tabbar) + 12px)}
}
@media (max-width: 640px){
  .t.resp tr.grp{display:block; padding:8px 16px}
  .kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px}
  .kpi{padding:14px 16px} .kpi .v{font-size:28px} .kpi .s{flex-direction:column; gap:2px}
  .ph h1{font-size:30px}
  .crumbs{display:none}
  .card > .hd{padding:18px 16px 12px} .card > .bd{padding:0 16px 18px} .bar{padding:12px 16px}
  /* tabelele devin liste: numele pe tot randul, sub el data + zilele ramase, statusul in dreapta */
  table.t.resp thead{display:none}
  table.t.resp, .t.resp tbody, .t.resp tr, .t.resp td{display:block; width:100%}
  .t.resp tr{padding:12px 16px; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; align-items:center}
  .t.resp tbody tr:last-child{border-bottom:0}
  .t.resp td{padding:0 !important; border:0; text-align:left !important; font-size:13.5px}
  .t.resp td.p{font-size:15px}
  .t.resp td[data-l]::before{content:attr(data-l) " "; color:var(--ink-3); font-size:12.5px}
  .t.resp td.wide{grid-column:1 / -1}
  .t.resp td.hide-m{display:none}
  .t.resp td.n{justify-self:end}
  /* Stoc si Acasa: ca o lista din iOS. Numele + statusul pe primul rand, data, zilele, cantitatea si valoarea pe al doilea */
  .t.lista tbody tr{display:flex; flex-wrap:wrap; align-items:center; gap:3px 10px}
  .t.lista td{width:auto}
  .t.lista td.p{flex:1 1 calc(100% - 140px); min-width:0; order:0}
  .t.lista td:last-child{order:1; margin-left:auto; align-self:flex-start}
  .t.lista td:not(.p):not(:last-child){order:2; font-size:12.5px; color:var(--ink-2)}
  .t.lista td .z{color:var(--ink)} .t.lista td .z.neg{color:var(--exp)}
  .t.resp tfoot{display:block} .t.resp tfoot tr{display:flex; justify-content:space-between}
  .t.resp tfoot td:empty{display:none}
  .cifre{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .cifra{padding:14px 16px} .cifra b{font-size:19px}
  /* pe telefon lista de rezolvat vine imediat sub antet; cifrele si indemnurile dupa ea */
  .page > .de-rezolvat{order:1} .page > .nudges{order:2} .page > .cifre{order:3} .page > .duo{order:4}
  .de-rezolvat .hd .dl{display:none}
  .nudge{padding:12px 14px; font-size:13.5px}
  .sursa{padding:14px 16px} .incarca:not([open]){width:100%} .incarca > summary{width:100%}
  .vr{grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:14px 16px} .vr .nm,.vr .bt{grid-column:1 / -1} .vr .bt .btn{flex:1; height:40px}
  .istoric > summary{padding:14px 16px}
  .tel .fld,.tel .btn{width:100%; height:44px}
  .iesiri{display:grid !important; grid-template-columns:minmax(0,1fr); gap:8px} .iesiri .btn{height:44px}
  .shelf .ends span:nth-child(2){display:none}
  .ph.azi h1{font-size:28px}
  .grp-h{top:52px; padding:9px 16px}
  .lr,.lr.cu-act{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"nm st" "ex v" "act act"; padding:12px 16px; gap:4px 12px}
  .lr .nm{grid-area:nm} .lr .st{grid-area:st; align-self:start} .lr .q{display:none} .lr .v{grid-area:v; align-self:end; font-size:13.5px}
  .lr .ex{grid-area:ex; display:flex; gap:8px; align-items:baseline} .lr .ex b{font-size:13.5px}
  .lr .nm a{white-space:normal}
  .lr .act{grid-area:act; margin-top:8px; justify-content:stretch} .lr .act .btn{flex:1; height:38px}
  .loturi .tot{padding:14px 16px}
  .chart{gap:3px} .chart .y{display:none}
  /* filtrele din Stoc: statusurile pe un singur rand care se deruleaza, furnizorul pe toata latimea */
  .bar .seg{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%; flex:1 1 100%}
  .bar .seg::-webkit-scrollbar{display:none}
  .bar .grow{display:none}
  .bar .sel{flex:1 1 100%; width:100%}
  /* meniul Descarca: foaie jos pe ecran, ca un action sheet */
  .dl .menu{position:fixed; left:10px; right:10px; top:auto; bottom:calc(10px + env(safe-area-inset-bottom)); min-width:0; z-index:60; padding:8px; border-radius:16px}
  .dl .menu a{padding:14px 12px}
  .dl[open] summary::before{content:""; position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.35); cursor:default}
}

/* ── Contul: intrare, inscriere, confirmare. O coloana, centrata. ──────── */
body.auth{background:var(--canvas); min-height:100vh; min-height:100dvh}
.auth-in{max-width:440px; margin:0 auto; padding:64px 16px 32px; display:grid; gap:24px}
.auth-brand{display:flex; flex-direction:column; align-items:center; gap:12px; justify-content:center; text-decoration:none; color:var(--ink); font:600 21px/1 var(--fd); letter-spacing:-.02em}
.auth-brand .mark{width:56px; height:56px; border-radius:14px; background:linear-gradient(180deg, #2b8cff, #0066dd); display:grid; place-items:center; box-shadow:0 6px 18px -6px rgba(0,102,221,.55)}
.auth-brand .mark svg{width:30px; height:30px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round}
.auth-card{background:var(--surface); border-radius:22px; padding:34px 30px; display:grid; gap:18px; box-shadow:var(--shadow)}
.auth-card h1{font-size:28px; font-weight:700; letter-spacing:-.025em; margin:0; text-align:center}
.auth-sub{color:var(--ink-2); font-size:15px; margin:-8px 0 0; line-height:1.5; text-align:center}
.auth-cod{color:var(--ink-3); font-size:12.5px; text-align:center; margin:4px 0 0}
.auth-form{display:grid; gap:14px}
.af{display:grid; gap:6px; font-size:13.5px}
.af > span{color:var(--ink-2); font-weight:500}
.af small{color:var(--ink-3); font-size:12.5px}
.af input, .af textarea{width:100%; box-sizing:border-box; height:46px; border-radius:12px; border:1px solid var(--rule-2); background:var(--surface); color:var(--ink); font:inherit; font-size:16px; padding:0 14px}
.af textarea{height:auto; padding:10px 14px; font:13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; resize:vertical}
.af input:focus, .af textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-16)}
.af-parola{position:relative; display:block}
.af-parola input{padding-right:88px}
.af-parola button{position:absolute; top:50%; right:6px; transform:translateY(-50%); height:34px; padding:0 12px; border:0; border-radius:9px;
  background:transparent; color:var(--link); font:inherit; font-size:14px; font-weight:500; cursor:pointer}
.af-parola button:hover{background:var(--primary-16)}
.af-parola button:focus-visible{outline:2px solid var(--primary); outline-offset:1px}
.af-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.af-opt summary{cursor:pointer; color:var(--link); font-size:14px; padding:4px 0}
.af-opt[open] summary{margin-bottom:10px}
.btn.wide{width:100%; height:46px; font-size:16px; margin-top:4px; border-radius:12px}
.auth-links{display:flex; justify-content:center; gap:8px 20px; flex-wrap:wrap; font-size:14px; color:var(--ink-2)}
.auth-links a{color:var(--link); text-decoration:none}
.auth-links a:hover{text-decoration:underline}
.auth-links button{appearance:none; border:0; background:none; padding:0; font:inherit; color:var(--link); cursor:pointer}
.auth-links button:hover{text-decoration:underline}
.auth-lang{display:flex; justify-content:center; align-items:center; gap:16px; font-size:13px; flex-wrap:wrap}
.auth-lang > a{color:var(--ink-3); text-decoration:none}
.auth-lang > a[aria-current="true"]{color:var(--ink)}
.auth-lang > a:hover{color:var(--link)}
@media (max-width:480px){ .auth-in{padding-top:40px} .auth-card{padding:26px 20px} .af-row{grid-template-columns:1fr} }
.who-out{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; color:var(--ink); font-size:13px; font-weight:500}
.who-out span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.who-out button{background:var(--fill-2); border:0; color:var(--ink); border-radius:var(--r-pill); font:inherit; font-size:12px; padding:4px 11px; cursor:pointer}
.who-out button:hover{background:var(--fill-3)}

/* ── Abonament ─────────────────────────────────────────────────────────── */
.plans{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px}
.plan{background:var(--surface); border-radius:var(--r-md); padding:24px 26px; display:grid; gap:8px; box-shadow:var(--shadow)}
.plan-pret{font:700 38px/1.1 var(--fd); letter-spacing:-.03em}
.plan-pret span{font-size:15px; font-weight:400; color:var(--ink-2); letter-spacing:-.01em}
.plan-start{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.demo-band{display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; padding:12px 16px; border-radius:14px; background:var(--primary-10); font-size:14px}
.demo-band b{font-weight:600}

/* ── Banner cookie-uri ─────────────────────────────────────────────────── */
.consimt{position:fixed; left:16px; right:16px; bottom:16px; z-index:50; max-width:560px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
  padding:16px 18px; border-radius:18px; background:var(--surface); box-shadow:var(--pop); font-size:14px; line-height:1.45}
.consimt[hidden]{display:none}
.consimt p{flex:1 1 280px; margin:0}
.consimt a{color:var(--link)}
.consimt-b{display:flex; gap:8px; margin-left:auto}

/* ── Pagini legale ─────────────────────────────────────────────────────── */
.auth-in.lat{max-width:760px}
.legal h1{font-size:28px; margin-bottom:6px; text-align:left}
.legal h2{font-size:17px; margin:22px 0 6px}
.legal p, .legal li{font-size:15px; line-height:1.55; color:var(--ink)}
.legal ul{padding-left:20px; margin:6px 0}
.legal table{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:8px}
.legal th, .legal td{text-align:left; padding:8px 8px 8px 0; border-bottom:1px solid var(--rule); vertical-align:top}
.legal th{color:var(--ink-2); font-weight:500}
.foot-link{display:block; margin-top:8px; color:var(--ink-2); font-size:12px; text-decoration:none}
.foot-link:hover{color:var(--link)}

/* Administrare: panourile Trafic si Companie */
.tchart{display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); gap:3px; align-items:end; height:180px; padding-top:8px}
.tchart > div{position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%; color:var(--ink-3); font-size:10.5px; font-variant-numeric:tabular-nums}
.tchart .col{position:relative; width:100%; max-width:22px; flex:1; display:flex; align-items:flex-end}
.tchart .b{width:100%; border-radius:4px 4px 1px 1px; background:color-mix(in srgb, var(--primary) 30%, var(--surface)); min-height:2px}
.tchart .v{position:absolute; left:20%; right:20%; bottom:0; border-radius:3px 3px 1px 1px; background:var(--primary)}
.tchart .e{position:absolute; left:0; right:0; top:-6px; height:4px; border-radius:2px; background:var(--exp)}
.tchart .l{min-height:13px}
.tchart > div:hover .b{filter:brightness(.92)}
.legenda{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2)}
.legenda i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.legenda .lv{background:color-mix(in srgb, var(--primary) 30%, var(--surface))} .legenda .lu{background:var(--primary)} .legenda .le{background:var(--exp)}
.lista-a{display:grid; gap:14px}
.lista-a .r{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; font-size:13.5px}
.lista-a .r b{font-weight:480; font-variant-numeric:tabular-nums}
.lista-a .track{grid-column:1 / -1; height:6px; border-radius:3px; background:var(--violet-8); overflow:hidden}
.lista-a .track span{display:block; height:100%; border-radius:3px; background:var(--primary)}
.lista-a .r.mute .track span{background:var(--ink-3)}
.code{font:12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break:break-all}
.nota-admin{color:var(--ink-3); font-size:12.5px}
@media (max-width: 640px){ .tchart{height:140px; gap:1px} .tchart .l{font-size:9px} }

@media (prefers-reduced-motion: reduce){ *{transition:none !important} }

/* Traseul de pornire (Abonament), aprobari, sanatate, „De verificat” pliat (2026-10-31) */
.pas.static{cursor:default} .pas.static:hover{background:none}
.pas .nr.gata{background:var(--ok-bg); color:var(--ok)} .pas .nr.viit{background:var(--fill-2); color:var(--ink-2)}
.pas .pill{margin-left:auto}
.cerere{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; padding:16px 22px; border-top:1px solid var(--rule)}
.cerere:first-child{border-top:0}
.cerere .cine{min-width:0; flex:1 1 260px} .cerere .cine b{display:block; font-weight:600} .cerere .cine span{color:var(--ink-2); font-size:13px}
.cerere form{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.cerere input[name=motiv]{height:32px; min-width:0; width:180px}
.sanatate{display:grid}
.sanatate .r{display:flex; gap:12px; align-items:flex-start; padding:14px 22px; border-top:1px solid var(--rule)} .sanatate .r:first-child{border-top:0}
.sanatate .r .dot{margin-top:7px; flex:none}
.sanatate .r .m{flex:1; min-width:0} .sanatate .r .m b{display:block; font-weight:600} .sanatate .r .m span{color:var(--ink-2); font-size:13px}
.sanatate .r .pill{flex:none}
details.verif-l{border-top:1px solid var(--rule)} details.verif-l:first-of-type{border-top:0}
details.verif-l > summary{list-style:none; display:flex; gap:12px; align-items:center; padding:12px 22px; cursor:pointer}
details.verif-l > summary::-webkit-details-marker{display:none}
details.verif-l > summary .m{flex:1; min-width:0} details.verif-l > summary .m b{display:block; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
details.verif-l > summary .m span{color:var(--ink-2); font-size:12.5px}
details.verif-l > summary svg.i{color:var(--ink-3); transition:transform .15s} details.verif-l[open] > summary svg.i{transform:rotate(90deg)}
details.verif-l > .corp{padding:0 22px 16px; min-width:0} details.verif-l .nm span{overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){details.verif-l > summary svg.i{transition:none}}

/* ── Expirate: selectie cu cantitate; istoricul iesirilor; lista de comandat ─────────────── */
.lr.sel-r{grid-template-columns:22px minmax(0,1fr) 128px 150px 92px; cursor:default}
.lr.sel-r input[type=checkbox]{width:18px; height:18px; accent-color:var(--primary)}
.lr.sel-r .nm b{display:block; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lr.sel-r .nm a{color:var(--link); text-decoration:none}
.lr.sel-r .q{display:flex; align-items:center; gap:8px; justify-content:flex-end} .lr.sel-r .q .fld{width:72px; text-align:right}
.bara-sel{position:sticky; bottom:0; z-index:4; display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:14px 22px; border-top:1px solid var(--rule); background:var(--surface, var(--tint)); border-radius:0 0 var(--r-md) var(--r-md)}
.bara-sel .fld{flex:1 1 220px}
.sumar-iesiri{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--rule)}
.sumar-iesiri div{padding:14px 22px; border-left:1px solid var(--rule)} .sumar-iesiri div:first-child{border-left:0}
.sumar-iesiri span{display:block; font-size:12.5px; color:var(--ink-2)} .sumar-iesiri b{font-size:18px; font-weight:600; font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .lr.sel-r{grid-template-columns:22px minmax(0,1fr) auto; grid-template-areas:"c n v" "c e q"}
  .lr.sel-r > input{grid-area:c; align-self:start; margin-top:3px} .lr.sel-r .nm{grid-area:n} .lr.sel-r .ex{grid-area:e} .lr.sel-r .q{grid-area:q} .lr.sel-r .v{grid-area:v}
  .bara-sel{bottom:calc(64px + env(safe-area-inset-bottom)); padding:12px 16px} .bara-sel .btn{flex:1 1 auto}
  .sumar-iesiri{grid-template-columns:repeat(2,minmax(0,1fr))} .sumar-iesiri div:nth-child(3){border-left:0} .sumar-iesiri div:nth-child(n+3){border-top:1px solid var(--rule)}
}