/* SHABAB METRIC PRO 1.3.0 — polish + the new parts (loaded after app.css; tokens of the 8 themes from app.css; CSP strict: no inline styles).
   Spacing scale, soft shadows, smooth transitions, grouped side menu, glass KPI tiles with count-up + trend arrows, animated charts (grow / sweep / draw),
   heatmap, skeleton loaders, empty states with own SVG art, sticky table headers, document forms, module switches (/super). Print / PDF never animates. */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --rad: 16px; --rad2: 12px; --rad3: 10px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow2: 0 1px 2px rgba(16,24,40,.04), 0 10px 30px -8px rgba(16,24,40,.12);
  --glass: color-mix(in srgb, var(--card2) 82%, transparent);
  --glassLine: color-mix(in srgb, var(--line) 80%, transparent);
  --h0: color-mix(in srgb, var(--soft) 100%, transparent);
  --h1: color-mix(in srgb, var(--k1) 16%, var(--card2));
  --h2: color-mix(in srgb, var(--k1) 34%, var(--card2));
  --h3: color-mix(in srgb, var(--k1) 52%, var(--card2));
  --h4: color-mix(in srgb, var(--k1) 72%, var(--card2));
  --h5: var(--k1);
}
html[data-theme="dark"], html[data-theme="premium"], html[data-theme="darkpink"] { --shadow2: 0 12px 34px -10px rgba(0,0,0,.55); }
html[lang="ar"] body, html[lang="ar"] .in, html[lang="ar"] button { font-family: "Noto Kufi Arabic", "Montserrat", system-ui, sans-serif; }
.card, .kpi, .kpi2, .btn, .pill, .chip, .sgrp a, .tile3 { transition: background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease), color .2s var(--ease); }
.card { border-radius: var(--rad); }
.card:hover { box-shadow: var(--shadow2); }
.tbl thead th { position: sticky; top: 0; z-index: 1; background: var(--card2); box-shadow: inset 0 -1px 0 var(--line); }
.tbl { max-height: 70vh; overflow: auto; }
.num, td.n { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* ---------------------------------------------------------------- grouped side menu */
nav.side.grp { padding: 10px 8px 24px; overflow-y: auto; }
.sgrp { margin: 2px 0; }
.sgrp > button, .sgrp > a { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: var(--sideInk); font: inherit; font-weight: 600; font-size: 13.5px; padding: 9px 12px; border-radius: 11px; cursor: pointer; text-align: start; text-decoration: none; }
.sgrp > button svg, .sgrp > a svg { width: 19px; height: 19px; flex: none; }
.sgrp > button:hover, .sgrp > a:hover { color: var(--sideHover); background: var(--sideOn); }
.sgrp.on > button, .sgrp > a.on { color: var(--sideOnInk); background: var(--sideOn); }
.sgrp > button .chev { margin-inline-start: auto; width: 14px; height: 14px; transition: transform .2s var(--ease); opacity: .7; }
.sgrp.open > button .chev { transform: rotate(90deg); }
html[dir="rtl"] .sgrp.open > button .chev { transform: rotate(-90deg); }
html[dir="rtl"] .sgrp > button .chev { transform: scaleX(-1); }
.sgrp .sub { display: none; padding: 2px 0 6px; margin-inline-start: 22px; border-inline-start: 1px solid var(--line); }
.sgrp.open .sub { display: block; animation: m130fade .2s var(--ease); }
.sgrp .sub a { display: block; padding: 7px 12px; margin: 1px 0 1px 6px; border-radius: 9px; color: var(--sideInk); font-size: 13px; font-weight: 500; text-decoration: none; }
.sgrp .sub a:hover { color: var(--sideHover); background: var(--sideOn); }
.sgrp .sub a.on { color: var(--sideOnInk); background: var(--sideOn); font-weight: 700; }
/* phone: the group's pages as pills above the page; the "More" page lists every group */
.gpills { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.gpills::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .gpills { display: none; } }
.moremenu { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.moremenu .card h3 { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; font-size: 15px; }
.moremenu .card h3 svg { width: 20px; height: 20px; color: var(--accent2); }
.moremenu .card a { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; border-top: 1px solid var(--line2); color: var(--ink); text-decoration: none; font-weight: 500; }
.moremenu .card a::after { content: "›"; color: var(--mute); font-size: 18px; }
html[dir="rtl"] .moremenu .card a::after { content: "‹"; }

/* ---------------------------------------------------------------- KPI tiles (glass, count-up, trend) */
.kpis2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s4); }
@media (min-width: 760px) { .kpis2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .kpis2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpis2.k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi2 { --kc: var(--k1); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px 10px; border-radius: var(--rad); background: linear-gradient(160deg, var(--glass), color-mix(in srgb, var(--kc) 7%, var(--card2))); border: 1px solid var(--glassLine); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; backdrop-filter: blur(8px); }
.kpi2::after { content: ""; position: absolute; inset-inline-end: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--kc) 22%, transparent), transparent 70%); pointer-events: none; }
a.kpi2:hover { transform: translateY(-2px); box-shadow: var(--shadow2); }
.kpi2.c1 { --kc: var(--k1); } .kpi2.c2 { --kc: var(--k2); } .kpi2.c3 { --kc: var(--k3); } .kpi2.c4 { --kc: var(--k4); } .kpi2.c5 { --kc: var(--k5); } .kpi2.c6 { --kc: var(--k6); } .kpi2.c7 { --kc: var(--k7); } .kpi2.c8 { --kc: var(--k8); }
.kpi2 .kh { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--mute); min-width: 0; }
.kpi2 .kh span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi2 .ki { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--kc) 15%, transparent); color: var(--kc); flex: none; }
.kpi2 .ki svg { width: 17px; height: 17px; }
.kpi2 .n { font-size: clamp(20px, 2.4vw, 27px); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi2 .n small { font-size: 12px; font-weight: 600; color: var(--mute); margin-inline-start: 4px; }
.kpi2 .kf { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mute); min-height: 18px; flex-wrap: wrap; }
.trend { font-weight: 800; font-size: 11.5px; padding: 1px 7px; border-radius: 99px; }
.trend.up { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.trend.dn { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.tr0 { color: var(--mute); }
.sp2 { width: 100%; height: 34px; margin-top: 4px; display: block; }
.sp2 .l { fill: none; stroke: var(--kc); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.a1 { stop-color: var(--kc, var(--bar1)); stop-opacity: .32; } .a2 { stop-color: var(--kc, var(--bar1)); stop-opacity: 0; }

/* ---------------------------------------------------------------- charts: grow / sweep / draw (play once) */
.chart .gl { stroke: var(--line2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .ax { stroke: var(--line); vector-effect: non-scaling-stroke; }
.chart text { fill: var(--mute); font-size: 11px; font-family: inherit; }
.chart text.v { fill: var(--ink); font-weight: 700; font-size: 10.5px; }
.g1 { stop-color: var(--bar1); } .g2 { stop-color: var(--bar2); }
.chart .bar.cmp { fill: color-mix(in srgb, var(--mute) 30%, transparent); }
.chart .bar.on { stroke: var(--accent2); stroke-width: 1.5; }
.chart .lnk, .lnk { cursor: pointer; }
.chart .bar.lnk:hover { filter: brightness(1.12); }
.chart.lin .ln { fill: none; stroke: var(--bar1); stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.chart.lin .ln.cmp { stroke: var(--mute); stroke-width: 1.6; stroke-dasharray: 4 4; opacity: .8; }
.chart.lin .pt { fill: var(--card2); stroke: var(--bar1); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.chart.lin .pt.last { fill: var(--bar1); }
.ch.play .grow { transform-box: fill-box; transform-origin: 50% 100%; animation: m130grow .75s var(--ease) both; }
.ch.play .fade { animation: m130fade .6s var(--ease) both; }
.ch.play .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: m130draw 1.1s var(--ease) .1s forwards; }
.ch.play.lin .ln.cmp.draw { stroke-dasharray: 1; }
.chart.lin .ln.cmp:not(.draw), .ch:not(.play) .ln.cmp { stroke-dasharray: 4 4; }
@keyframes m130grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes m130fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m130draw { to { stroke-dashoffset: 0; } }
/* donut */
.donut2 { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.donut2 .dn2 { width: 168px; height: 168px; flex: none; }
.donut2.sm .dn2 { width: 120px; height: 120px; }
.dn2 .trk { stroke: var(--soft); }
.dn2 .seg { transition: stroke-width .2s var(--ease); }
.dn2 .seg:hover { stroke-width: 20; }
.dn2 .c1 { fill: var(--ink); font-size: 19px; font-weight: 800; font-family: inherit; }
.dn2 .c2 { fill: var(--mute); font-size: 10px; font-family: inherit; }
.dn2.play .seg { animation: m130sweep .9s var(--ease) both; }
@keyframes m130sweep { from { stroke-dasharray: 0 999; } to { stroke-dasharray: var(--len) 999; } }
.seg.k1, .dl2 i.k1, .hb2 i.k1 { stroke: var(--k1); background: var(--k1); } .seg.k2, .dl2 i.k2, .hb2 i.k2 { stroke: var(--k2); background: var(--k2); }
.seg.k3, .dl2 i.k3, .hb2 i.k3 { stroke: var(--k3); background: var(--k3); } .seg.k4, .dl2 i.k4, .hb2 i.k4 { stroke: var(--k4); background: var(--k4); }
.seg.k5, .dl2 i.k5, .hb2 i.k5 { stroke: var(--k5); background: var(--k5); } .seg.k6, .dl2 i.k6, .hb2 i.k6 { stroke: var(--k6); background: var(--k6); }
.seg.k7, .dl2 i.k7, .hb2 i.k7 { stroke: var(--k7); background: var(--k7); } .seg.k8, .dl2 i.k8, .hb2 i.k8 { stroke: var(--k8); background: var(--k8); }
.dl2 { flex: 1; min-width: 160px; display: grid; gap: 6px; font-size: 12.5px; }
.dl2 > div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.dl2 i { width: 11px; height: 11px; border-radius: 4px; }
.dl2 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl2 .p { color: var(--mute); font-size: 11.5px; }
.dl2 b { font-variant-numeric: tabular-nums; }
/* horizontal bars */
.hb2 { display: grid; gap: 10px; }
.hb2 .r { display: grid; grid-template-columns: minmax(70px, 34%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink); text-decoration: none; }
.hb2 .r small { grid-column: 2 / 4; color: var(--mute); margin-top: -6px; font-size: 11px; }
.hb2 .k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hb2 .b { height: 10px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.hb2 .b i { display: block; height: 100%; width: var(--w); border-radius: 99px; background-image: linear-gradient(90deg, color-mix(in srgb, currentColor 0%, transparent), rgba(255,255,255,.25)); }
.hb2.play .b i { animation: m130bar .8s var(--ease) both; }
@keyframes m130bar { from { width: 0; } to { width: var(--w); } }
.hb2 a.r:hover .k { color: var(--accent2); }
/* heatmap */
.heatbox { overflow-x: auto; }
.heat { display: grid; grid-template-columns: 54px repeat(24, minmax(14px, 1fr)); gap: 3px; min-width: 520px; font-size: 10px; color: var(--mute); }
.heat .hh { text-align: center; }
.heat .dd { font-weight: 600; align-self: center; }
.heat .c, .hlg .c { aspect-ratio: 1 / 1; border-radius: 4px; background: var(--h0); }
.heat.play .c { animation: m130fade .45s var(--ease) both; }
.c.l1 { background: var(--h1); } .c.l2 { background: var(--h2); } .c.l3 { background: var(--h3); } .c.l4 { background: var(--h4); } .c.l5 { background: var(--h5); }
.hlg { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 8px; font-size: 11px; color: var(--mute); }
.hlg .c { width: 12px; }

/* ---------------------------------------------------------------- skeleton, empty state */
.skel { display: grid; gap: 12px; }
.sk { height: 86px; border-radius: var(--rad); background: linear-gradient(90deg, var(--soft) 25%, color-mix(in srgb, var(--soft) 60%, var(--card2)) 50%, var(--soft) 75%); background-size: 200% 100%; animation: m130shine 1.2s linear infinite; }
.sk.sk2 { height: 220px; } .sk.sk3 { height: 140px; }
@keyframes m130shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.empty2 { display: grid; place-items: center; gap: 6px; padding: 28px 12px; text-align: center; color: var(--mute); }
.empty2 .ill { width: 140px; height: 116px; }
.ill .i0 { fill: var(--soft); } .ill .i1 { fill: color-mix(in srgb, var(--k1) 14%, var(--card2)); stroke: var(--k1); stroke-width: 2; }
.ill .i2 { fill: none; stroke: var(--k1); stroke-width: 3; stroke-linecap: round; opacity: .55; } .ill .i3 { fill: color-mix(in srgb, var(--k2) 70%, transparent); } .ill .i4 { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .ch.play *, .hb2.play *, .heat.play *, .dn2.play *, .sk, .sgrp.open .sub { animation: none !important; } .card, .kpi2, .btn { transition: none !important; } }
html.prt .ch *, body.print .ch * { animation: none !important; }

/* ---------------------------------------------------------------- page parts: headers, tabs, tiles (hubs), forms, lines editor, chips */
.ph { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 14px; }
.ph h2 { margin: 0; font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; letter-spacing: -.01em; }
.ph .sp { flex: 1; }
.ph .sub2 { color: var(--mute); font-size: 13px; }
.tabs2 { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.tabs2::-webkit-scrollbar { display: none; }
.tiles3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tile3 { --kc: var(--k1); position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--rad); background: linear-gradient(150deg, var(--card2), color-mix(in srgb, var(--kc) 8%, var(--card2))); border: 1px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); min-height: 132px; overflow: hidden; }
.tile3:hover { transform: translateY(-3px); box-shadow: var(--shadow2); border-color: color-mix(in srgb, var(--kc) 45%, var(--line)); }
.tile3 .ti { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--kc) 16%, transparent); color: var(--kc); }
.tile3 .ti svg { width: 22px; height: 22px; }
.tile3 b { font-size: 16px; } .tile3 small { color: var(--mute); font-size: 12px; line-height: 1.35; }
.tile3 .tn { font-size: 20px; font-weight: 800; margin-top: auto; font-variant-numeric: tabular-nums; }
.tile3.c1 { --kc: var(--k1); } .tile3.c2 { --kc: var(--k2); } .tile3.c3 { --kc: var(--k3); } .tile3.c4 { --kc: var(--k4); } .tile3.c5 { --kc: var(--k5); } .tile3.c6 { --kc: var(--k6); } .tile3.c7 { --kc: var(--k7); } .tile3.c8 { --kc: var(--k8); }
.g2c { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .g2c { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .g2c.even { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3c { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.g3c { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.card h3.t2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14.5px; font-weight: 700; }
.card h3.t2 svg { width: 18px; height: 18px; color: var(--accent2); }
.card h3.t2 .sp { flex: 1; } .card h3.t2 small { color: var(--mute); font-weight: 500; font-size: 12px; }
.frm { display: grid; gap: 10px 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .frm { grid-template-columns: repeat(2, minmax(0, 1fr)); } .frm.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .frm .wide { grid-column: 1 / -1; } }
.frm label.f { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--mute); min-width: 0; }
.frm .hint { font-size: 11.5px; color: var(--mute); font-weight: 500; }
.lines2 { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.lines2 th { font-size: 11.5px; color: var(--mute); text-align: start; font-weight: 700; padding: 0 4px; }
.lines2 td { padding: 0 4px; vertical-align: middle; }
.lines2 td.n { text-align: end; white-space: nowrap; font-weight: 600; }
.lines2 .in { min-width: 0; width: 100%; }
.lines2 td.q .in { max-width: 92px; } .lines2 td.p .in { max-width: 110px; }
@media (max-width: 639px) { .lines2 thead { display: none; } .lines2 tr { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; } .lines2 td:first-child { grid-column: 1 / -1; } .lines2 td { padding: 0; } }
.tot2 { display: grid; gap: 4px; justify-items: end; margin-top: 10px; font-size: 13.5px; }
.tot2 b { font-size: 18px; }
.chip.st-draft { background: color-mix(in srgb, var(--mute) 14%, transparent); color: var(--mute); }
.chip.st-sent, .chip.st-open, .chip.st-credit { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.chip.st-accepted, .chip.st-converted, .chip.st-delivered, .chip.st-paid, .chip.st-ok, .chip.st-active, .chip.st-invoiced { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.chip.st-partial, .chip.st-soon, .chip.st-overdue { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.chip.st-rejected, .chip.st-lost, .chip.st-cancelled, .chip.st-expired, .chip.st-closed, .chip.st-blocked, .chip.st-left { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red); }
.chip.st-superseded { background: var(--soft); color: var(--mute); text-decoration: line-through; }
.list2 { display: grid; gap: 8px; }
.list2 > a, .list2 > div.it { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--rad2); background: var(--card2); color: var(--ink); text-decoration: none; }
.list2 > a:hover { border-color: color-mix(in srgb, var(--accent2) 45%, var(--line)); box-shadow: var(--shadow); }
.list2 .t1 { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.list2 .t2 { color: var(--mute); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.list2 .a { text-align: end; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.list2 .s { text-align: end; }
.docexp { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.docexp > div { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); font-size: 12.5px; }
.docexp > div b { display: block; font-size: 13.5px; }
.docexp > div.expired { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); background: color-mix(in srgb, var(--red) 6%, var(--card2)); }
.docexp > div.soon { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); background: color-mix(in srgb, var(--amber) 7%, var(--card2)); }
.avatar { width: 56px; height: 56px; border-radius: 18px; object-fit: cover; background: color-mix(in srgb, var(--k1) 15%, var(--card2)); display: grid; place-items: center; font-weight: 800; color: var(--k1); font-size: 20px; flex: none; }
.upsell { margin-top: 12px; padding: 10px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--k2) 60%, var(--line)); color: var(--ink); background: color-mix(in srgb, var(--k2) 7%, transparent); font-size: 13px; }
.disabled-send { opacity: .6; cursor: not-allowed; }
.vbox { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--rad2); overflow: hidden; }
.vbox > div { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 10px; padding: 10px 12px; align-items: center; border-top: 1px solid var(--line2); font-size: 13px; }
.vbox > div:first-child { border-top: 0; }
.vbox > div.sub { background: var(--soft); font-weight: 700; }
.vbox > div.sum { background: color-mix(in srgb, var(--k1) 12%, var(--card2)); font-weight: 800; font-size: 14.5px; }
.vbox .bx { font-weight: 800; color: var(--accent2); }
.vbox .n { text-align: end; font-variant-numeric: tabular-nums; min-width: 90px; }
@media (max-width: 560px) { .vbox > div { grid-template-columns: 40px minmax(0, 1fr) auto; } .vbox .n.net { display: none; } }
.mapline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fav { color: var(--k2); }
/* multi-branch strip on the dashboard */
.brstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; scrollbar-width: thin; }
.brmini { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--card2), color-mix(in srgb, var(--k1) 5%, var(--card2))); box-shadow: var(--shadow); cursor: pointer; }
.brmini .nm { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.brmini .nm i { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); flex: none; }
.brmini .nm i.ok { background: var(--live); box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 20%, transparent); }
.brmini .v { font-size: 20px; font-weight: 800; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.brmini .m { display: flex; gap: 8px; font-size: 11.5px; color: var(--mute); flex-wrap: wrap; }
.brmini .bar { height: 5px; border-radius: 99px; background: var(--soft); margin-top: 8px; overflow: hidden; }
.brmini .bar i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, var(--bar2), var(--bar1)); }
.brmini.play .bar i { animation: m130bar .9s var(--ease) both; }
/* /super module switches */
.modsw { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.modsw .ps { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.modsw .sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.modsw label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 8px; border-radius: 10px; background: var(--soft); cursor: pointer; }
.modsw label.on { background: color-mix(in srgb, var(--green) 13%, var(--soft)); }
.modsw label.hidp { border: 1px dashed var(--line); }
.modsw input { accent-color: var(--accent); }
/* print templates: modern style + quotation / sales order */
.pr.doc.modern .dh { border-bottom: 0; padding-bottom: 6px; background: linear-gradient(90deg, #0A2E5C, #173F9A); color: #fff; border-radius: 10px; padding: 12px 14px; }
.pr.doc.modern .dh .ids b, .pr.doc.modern .dh .dno { color: #fff; }
.pr.doc.modern .dt { color: #E9CF86; }
.pr.doc.modern table.dl thead th { background: #EEF2FA; }
.pr.doc .terms { margin-top: 10px; font-size: 11.5px; white-space: pre-wrap; border: 1px solid #E1E6EE; border-radius: 8px; padding: 8px 10px; }
.pr.doc .valid { color: #B45309; font-weight: 700; }
/* dashboard: the 6 KPI tiles next to the sales hero = 2 x 3 (phone 2 columns) */
.dtop .kpis2, .dtop .kpis2.k6 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; align-content: stretch; }
@media (min-width: 1300px) { .dtop .kpis2, .dtop .kpis2.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dtop .kpi2 .n { font-size: clamp(18px, 1.9vw, 24px); }
/* chart labels in HTML over the SVG */
.chw { position: relative; width: 100%; }
.chw > svg.chart { display: block; width: 100%; height: 220px; }
.chw .cl { position: absolute; transform: translate(-50%, 6px); font-size: 11px; color: var(--mute); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.chw .cl.st { transform: translate(0, 6px); } .chw .cl.en { transform: translate(-100%, 6px); }
.chw .cl.v { transform: translate(-50%, -125%); color: var(--ink); font-weight: 700; font-size: 10.5px; }
.chw.play .cl.v { animation: m130fade .6s var(--ease) both; }
.chw > svg.chart.lin .pt { fill: none; stroke: var(--bar1); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chw > svg.chart.lin .pt.last { stroke-width: 11; }
.chw > svg.chart.lin .pt.lnk:hover { stroke-width: 13; }
@media (max-width: 639px) { .chw > svg.chart { height: 180px; } .chw .cl { font-size: 10px; } }
.pill svg, .tabs2 svg, .chip svg { width: 15px; height: 15px; flex: none; vertical-align: -2px; }
.tabs2 .pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ph .row select.in, main > div > .row > select.in, .row > select.in { width: auto; min-width: 120px; }
/* KPI rows fill their box (page or card) - auto-fit tiles of 165 px+ */
.kpis2, .kpis2.k6 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.dtop .kpis2, .dtop .kpis2.k6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1300px) { .dtop .kpis2, .dtop .kpis2.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* vertical rhythm of the new pages */
main > div > .card, main > div > .g2c, main > div > .g3c, main > div > .tiles3, main > div > .list2, main > div > .docexp, main > div > .msg, main > div > .banner, main > .b2b .card + .card { margin-bottom: 14px; }
main > div > .row { margin-bottom: 12px; gap: 8px; flex-wrap: wrap; }
.g2c > .card, .g2c > div > .card, .g3c > .card { margin: 0 0 14px; }
.pre { white-space: pre-wrap; }

/* 1.3.0 visual pass 2: KPI labels may use two lines (no cut words) */
.kpi2 .kh span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.dn2 .lg span, .dn2 .lg b { white-space: nowrap; }
.dn2 .seg, .dn2 .trk { fill: none !important; }
.dl2 { min-width: 210px; }
.dl2 > div { grid-template-columns: 12px minmax(64px, 1fr) auto auto; }

/* ================================================================ 1.3.0 GLASS LIGHT / GLASS NIGHT (our own frosted-glass look)
   Full-screen background (--gbg desktop 2560 px / --gbgp phone 1080 px, set by app.js) + a scrim for contrast; frosted translucent cards
   (backdrop-filter blur(22px) saturate(160%), radius 22 px) with thin light borders; floating icon dock (PC) and a floating glass tab bar (phone); text that sits on the
   picture gets its own soft scrim. html.noblur (low-end device / reduce transparency / no backdrop-filter) = solid translucent cards, no blur. */
html[data-theme="glass"] {
  --bg: #DCE4EF; --bgfx: none;
  --top: rgba(255,255,255,.66); --topInk: #0A2E5C; --topMute: #2F3E58; --topLine: rgba(255,255,255,.6); --brandInk: #0A2E5C;
  --side: rgba(255,255,255,.66); --sideInk: #1E2C46; --sideOn: rgba(10,46,92,.13); --sideOnInk: #0A2E5C; --sideHover: #07142B;
  --card: rgba(255,255,255,.42); --card2: rgba(255,255,255,.5); --field: rgba(255,255,255,.8); --pill: rgba(255,255,255,.66); --soft: rgba(255,255,255,.4);
  --ink: #0F2233; --mute: #22314A; --line: rgba(255,255,255,.75); --line2: rgba(15,34,51,.1);
  --accent: #0A2E5C; --accent2: #1E4FD8; --onAccent: #FFFFFF; --accentInk: #0A2E5C; --btn: linear-gradient(180deg, #123E78, #0A2E5C);
  --hero: rgba(255,255,255,.42); --heroInk: #0F2233; --heroMute: #22314A; --heroAccent: #5A4306; --heroChip: rgba(255,255,255,.55);
  --green: #0B5E2C; --red: #9F1239; --amber: #6E3504; --blue: #1E3A8A; --live: #0B5E2C;
  --bar1: #C9A227; --bar2: #A9851C; --spark: #C9A227;
  --k1: #C9A227; --k2: #3B82F6; --k3: #14B8A6; --k4: #E8590C; --k5: #7C3AED; --k6: #0A2E5C; --k7: #DB2777; --k8: #64748B;
  --shadow: 0 8px 28px rgba(20,50,80,.18); --shadow2: 0 14px 38px rgba(20,50,80,.26); --modalBack: rgba(10,20,40,.4);
  --glass: rgba(255,255,255,.42); --glassLine: rgba(255,255,255,.75); /* SB spec: card .42, border .75 */
  --scrim: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.26));
  --txtScrim: rgba(255,255,255,.56);
  color-scheme: light;
}
html[data-theme="glassnight"] {
  --bg: #07142B; --bgfx: none;
  --top: rgba(8,16,36,.58); --topInk: #F5F7FB; --topMute: #CDD6E5; --topLine: rgba(255,255,255,.14); --brandInk: #F3DC9A;
  --side: rgba(8,16,36,.58); --sideInk: #D8DFEB; --sideOn: rgba(243,220,154,.18); --sideOnInk: #F3DC9A; --sideHover: #FFFFFF;
  --card: rgba(255,255,255,.10); --card2: rgba(255,255,255,.14); --field: rgba(6,12,30,.6); --pill: rgba(20,30,60,.62); --soft: rgba(255,255,255,.08);
  --ink: #F3F6FB; --mute: #DCE3EE; --line: rgba(255,255,255,.22); --line2: rgba(255,255,255,.1);
  --accent: #C9A227; --accent2: #E2C35A; --onAccent: #1A1405; --accentInk: #E9CF86; --btn: linear-gradient(180deg, #E2C35A, #C9A227);
  --hero: rgba(255,255,255,.10); --heroInk: #F3F6FB; --heroMute: #DCE3EE; --heroAccent: #E9CF86; --heroChip: rgba(255,255,255,.14);
  --green: #4ADE80; --red: #FFB0B0; --amber: #FFD166; --blue: #8CCBFF; --live: #4ADE80;
  --bar1: #C9A227; --bar2: #E2C35A; --spark: #C9A227;
  --k1: #C9A227; --k2: #3B82F6; --k3: #14B8A6; --k4: #FF9B73; --k5: #C4A1FF; --k6: #7CC4FF; --k7: #F472B6; --k8: #CDD6E5;
  --shadow: 0 8px 28px rgba(0,0,0,.35); --shadow2: 0 14px 38px rgba(0,0,0,.45); --modalBack: rgba(2,6,16,.62);
  --glass: rgba(255,255,255,.10); --glassLine: rgba(255,255,255,.22); /* SB spec: card white .10, border .22 over a dark scrim */
  --scrim: linear-gradient(180deg, rgba(4,9,24,.8), rgba(4,9,24,.7));
  --txtScrim: rgba(10,18,40,.56);
  color-scheme: dark;
}
.sw-glass i { background: linear-gradient(135deg, #F2D7A6, #8FB3D9); } .sw-glass i + i { background: rgba(255,255,255,.85); }
.sw-glassnight i { background: linear-gradient(135deg, #0A1630, #1E3A6E); } .sw-glassnight i + i { background: #E9CF86; }
html[data-theme^="glass"] body { background: var(--bg); }
html[data-theme^="glass"] body::before { background: var(--scrim), var(--gbg, none) center / cover no-repeat; z-index: 0; }
@media (max-width: 760px) { html[data-theme^="glass"] body::before { background: var(--scrim), var(--gbgp, var(--gbg, none)) center top / cover no-repeat; } }
/* frosted surfaces */
html[data-theme^="glass"] .card, html[data-theme^="glass"] .kpi, html[data-theme^="glass"] .kpi2, html[data-theme^="glass"] .tile3, html[data-theme^="glass"] .modal > div, html[data-theme^="glass"] .hero,
html[data-theme^="glass"] header.top, html[data-theme^="glass"] nav.side, html[data-theme^="glass"] nav.nav, html[data-theme^="glass"] .themes, html[data-theme^="glass"] .item, html[data-theme^="glass"] .brmini, html[data-theme^="glass"] .livestrip {
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glassLine); box-shadow: var(--shadow);
}
html[data-theme^="glass"] .card, html[data-theme^="glass"] .kpi2, html[data-theme^="glass"] .kpi, html[data-theme^="glass"] .hero { border-radius: 22px; }
html[data-theme^="glass"] .kpi2 { background: var(--glass); }
html[data-theme^="glass"] .kpi2::after { display: none; }
html[data-theme^="glass"] .pill, html[data-theme^="glass"] .btn.o, html[data-theme^="glass"] .btn.g { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* text that sits directly on the picture: its own soft scrim (contrast >= 4.5:1 on any background) */
html[data-theme^="glass"] .dhead, html[data-theme^="glass"] .ph, html[data-theme^="glass"] main > div > h2, html[data-theme^="glass"] main > div > h3, html[data-theme^="glass"] .gpills, html[data-theme^="glass"] .shopsh {
  background: var(--txtScrim); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--glassLine); border-radius: 18px; padding: 8px 14px; box-shadow: var(--shadow);
}
html[data-theme^="glass"] .dhead h2, html[data-theme^="glass"] .ph h2 { color: var(--ink); }
.hello { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.greet { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: 13px; color: var(--mute); }
.greet b { color: var(--ink); font-weight: 700; }
html:not([data-theme^="glass"]) .greet { font-size: 12.5px; }
/* top bar = floating glass pill */
html[data-theme^="glass"] header.top { margin: 10px 12px 0; border-radius: 22px; position: sticky; top: 10px; z-index: 30; }
/* PC: floating icon dock that opens on hover / keyboard focus */
@media (min-width: 900px) {
  html[data-theme^="glass"] .shell { grid-template-columns: 96px minmax(0, 1fr); }
  html[data-theme^="glass"] nav.side { position: sticky; top: 92px; align-self: start; width: 68px; max-height: calc(100vh - 110px); margin: 14px 0 14px 14px; padding: 10px 8px; border-radius: 26px; overflow: hidden auto; z-index: 25; transition: width .25s var(--ease), box-shadow .25s var(--ease); scrollbar-width: none; }
  html[dir="rtl"][data-theme^="glass"] nav.side { margin: 14px 14px 14px 0; }
  html[data-theme^="glass"] nav.side::-webkit-scrollbar { display: none; }
  html[data-theme^="glass"] nav.side .sgrp > button, html[data-theme^="glass"] nav.side .sgrp > a { justify-content: center; font-size: 0; padding: 11px 0; border-radius: 16px; gap: 0; }
  html[data-theme^="glass"] nav.side .sgrp > button svg, html[data-theme^="glass"] nav.side .sgrp > a svg { width: 21px; height: 21px; }
  html[data-theme^="glass"] nav.side .sgrp > button .chev, html[data-theme^="glass"] nav.side .sgrp .sub { display: none; }
  html[data-theme^="glass"] nav.side:hover, html[data-theme^="glass"] nav.side:focus-within { width: 250px; box-shadow: var(--shadow2); }
  html[data-theme^="glass"] nav.side:hover .sgrp > button, html[data-theme^="glass"] nav.side:hover .sgrp > a, html[data-theme^="glass"] nav.side:focus-within .sgrp > button, html[data-theme^="glass"] nav.side:focus-within .sgrp > a { justify-content: flex-start; font-size: 13.5px; padding: 9px 12px; gap: 10px; white-space: nowrap; }
  html[data-theme^="glass"] nav.side:hover .sgrp > button .chev, html[data-theme^="glass"] nav.side:focus-within .sgrp > button .chev { display: block; }
  html[data-theme^="glass"] nav.side:hover .sgrp.open .sub, html[data-theme^="glass"] nav.side:focus-within .sgrp.open .sub { display: block; }
}
/* phone: floating glass tab bar */
@media (max-width: 899px) {
  html[data-theme^="glass"] nav.nav { left: 16px; right: 16px; bottom: 16px; border-radius: 26px; padding: 4px 6px; background: var(--glass); }
  html[data-theme^="glass"] main { padding-bottom: 110px; }
}
html[data-theme^="glass"] nav.nav a.on { color: var(--ink); font-weight: 700; }
html[data-theme^="glass"] nav.nav a.on svg { color: #C9A227; stroke: #C9A227; }
/* automatic scrim: a dark picture under Glass Light / a bright picture under Glass Night gets a stronger veil (html.bgdark / html.bglight, set by app.js) */
html.bgdark[data-theme="glass"] { --scrim: linear-gradient(180deg, rgba(240,244,250,.62), rgba(240,244,250,.48)); --card: rgba(255,255,255,.62); --glass: rgba(255,255,255,.62); --hero: rgba(255,255,255,.62); }
html.bglight[data-theme="glassnight"] { --scrim: linear-gradient(180deg, rgba(4,9,24,.88), rgba(4,9,24,.8)); } /* 1.3.0: stronger than the base .8 / .7 (cards are SB's white .10) */
/* charts on glass: light lines, gold accents */
html[data-theme="glassnight"] .chart .gl, html[data-theme="glassnight"] .ch .gl { stroke: rgba(255,255,255,.12); }
html[data-theme^="glass"] .dn2 .trk { stroke: color-mix(in srgb, var(--ink) 12%, transparent); }
/* low-end / reduce transparency / no backdrop-filter: no blur, cards more solid */
html.noblur[data-theme^="glass"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.noblur[data-theme="glass"] { --card: rgba(255,255,255,.84); --card2: rgba(255,255,255,.88); --glass: rgba(255,255,255,.84); --hero: rgba(255,255,255,.84); --top: rgba(255,255,255,.88); --side: rgba(255,255,255,.88); --txtScrim: rgba(255,255,255,.84); --pill: rgba(255,255,255,.9); }
html.noblur[data-theme="glassnight"] { --card: rgba(16,26,50,.86); --card2: rgba(20,32,60,.88); --glass: rgba(16,26,50,.86); --hero: rgba(16,26,50,.86); --top: rgba(10,18,40,.88); --side: rgba(10,18,40,.88); --txtScrim: rgba(10,18,40,.84); --pill: rgba(20,32,60,.88); }
@media (prefers-reduced-transparency: reduce) { html[data-theme^="glass"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }
/* settings: background picker */
.bgpick { margin-top: var(--s4); border-top: 1px solid var(--line2); padding-top: var(--s3); }
.bgpick h4 { margin: 0 0 4px; font-size: 14px; }
.bggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 10px 0; }
.bgt { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 14px; border: 2px solid var(--line); background: var(--card2); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: start; }
.bgt img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; }
.bgt.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
label.upl { position: relative; overflow: hidden; cursor: pointer; } label.upl input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
@media print { html[data-theme^="glass"] body::before { display: none; } }
.fxrow { margin-top: 10px; align-items: center; gap: 6px; flex-wrap: wrap; }

/* glass: text on the picture / translucent cards keeps >= 4.5 : 1 (measured on the real pixels by tests/metric_m130_ui_test.py) */
html[data-theme="glass"] .hero .cmp b.red { color: var(--red); } html[data-theme="glass"] .hero .cmp b.green { color: var(--green); }
html[data-theme^="glass"] .rgroup h3 { width: fit-content; background: var(--txtScrim); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--glassLine); border-radius: 14px; padding: 6px 12px 6px 6px; }
html[data-theme="glass"] .rgroup h3 { color: var(--ink); } html[data-theme="glass"] .replist a i { color: var(--ink); }
html[data-theme="glass"] .trend { background: color-mix(in srgb, currentColor 12%, rgba(255,255,255,.82)); }
html[data-theme="glassnight"] .trend { background: color-mix(in srgb, currentColor 16%, rgba(6,12,30,.7)); }
html[data-theme="glassnight"] .hero .cmp b.red { color: #FFB4B4; }
html[data-theme^="glass"] .kpis .kpi, html[data-theme^="glass"] .livestrip .kpi { background: var(--glass); }

/* ================================================================ 1.3.0 MOTION + ACCENT
   sliding pill highlight (app.js draws .pslide between the old and the new pill), circle theme reveal (View Transitions), page enter, accent colours */
.psliding { position: relative; }
.psliding > .pill.on { background: transparent !important; box-shadow: none !important; transition: none; }
.pslide { position: absolute; z-index: 0; pointer-events: none; display: block; }
.psliding > .pill { position: relative; z-index: 1; }
html.vtr::view-transition-old(root), html.vtr::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.vtr::view-transition-new(root) { animation: m130reveal .55s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes m130reveal { from { clip-path: circle(0 at var(--rx, 50%) var(--ry, 50%)); } to { clip-path: circle(150vmax at var(--rx, 50%) var(--ry, 50%)); } }
@keyframes m130rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
main.enter .card, main.enter .kpi2, main.enter .tile3, main.enter .item, main.enter .rgroup { animation: m130rise .3s var(--ease) both; }
main.enter :is(.card, .kpi2, .tile3, .item, .rgroup):nth-child(2) { animation-delay: 30ms; } main.enter :is(.card, .kpi2, .tile3, .item, .rgroup):nth-child(3) { animation-delay: 60ms; }
main.enter :is(.card, .kpi2, .tile3, .item, .rgroup):nth-child(4) { animation-delay: 90ms; } main.enter :is(.card, .kpi2, .tile3, .item, .rgroup):nth-child(5) { animation-delay: 120ms; }
main.enter :is(.card, .kpi2, .tile3, .item, .rgroup):nth-child(n+6) { animation-delay: 150ms; }
@media (prefers-reduced-motion: reduce) { main.enter * { animation: none !important; } .pslide { display: none; } }
@media print { main.enter * { animation: none !important; } }
/* accent colours (per login) — light themes use the dark ink, dark themes the light ink; contrast checked in tests */
html[data-accent="teal"] { --accent: #0F766E; --accent2: #14B8A6; --accentInk: #0F766E; --btn: linear-gradient(180deg, #14968A, #0F766E); --onAccent: #FFFFFF; --k1: #0F766E; }
html[data-accent="blue"] { --accent: #1D4ED8; --accent2: #3B82F6; --accentInk: #1D4ED8; --btn: linear-gradient(180deg, #2F63E8, #1D4ED8); --onAccent: #FFFFFF; --k1: #1D4ED8; }
html[data-accent="green"] { --accent: #15803D; --accent2: #22C55E; --accentInk: #15803D; --btn: linear-gradient(180deg, #1C9A4B, #15803D); --onAccent: #FFFFFF; --k1: #15803D; }
html[data-accent="rose"] { --accent: #BE123C; --accent2: #F43F5E; --accentInk: #BE123C; --btn: linear-gradient(180deg, #D61F4B, #BE123C); --onAccent: #FFFFFF; --k1: #BE123C; }
html[data-accent="lavender"] { --accent: #6D28D9; --accent2: #8B5CF6; --accentInk: #6D28D9; --btn: linear-gradient(180deg, #7C3AED, #6D28D9); --onAccent: #FFFFFF; --k1: #6D28D9; }
:is(html[data-theme="dark"], html[data-theme="darkpink"], html[data-theme="glassnight"])[data-accent="teal"] { --accent: #2DD4BF; --accent2: #5EEAD4; --accentInk: #5EEAD4; --btn: linear-gradient(180deg, #5EEAD4, #2DD4BF); --onAccent: #04201C; --k1: #2DD4BF; }
:is(html[data-theme="dark"], html[data-theme="darkpink"], html[data-theme="glassnight"])[data-accent="blue"] { --accent: #60A5FA; --accent2: #93C5FD; --accentInk: #93C5FD; --btn: linear-gradient(180deg, #93C5FD, #60A5FA); --onAccent: #06173A; --k1: #60A5FA; }
:is(html[data-theme="dark"], html[data-theme="darkpink"], html[data-theme="glassnight"])[data-accent="green"] { --accent: #4ADE80; --accent2: #86EFAC; --accentInk: #86EFAC; --btn: linear-gradient(180deg, #86EFAC, #4ADE80); --onAccent: #052E14; --k1: #4ADE80; }
:is(html[data-theme="dark"], html[data-theme="darkpink"], html[data-theme="glassnight"])[data-accent="rose"] { --accent: #FB7185; --accent2: #FDA4AF; --accentInk: #FDA4AF; --btn: linear-gradient(180deg, #FDA4AF, #FB7185); --onAccent: #3B0712; --k1: #FB7185; }
:is(html[data-theme="dark"], html[data-theme="darkpink"], html[data-theme="glassnight"])[data-accent="lavender"] { --accent: #A78BFA; --accent2: #C4B5FD; --accentInk: #C4B5FD; --btn: linear-gradient(180deg, #C4B5FD, #A78BFA); --onAccent: #1E0B4B; --k1: #A78BFA; }
.acpick { margin-top: var(--s4); border-top: 1px solid var(--line2); padding-top: var(--s3); }
.acpick h4 { margin: 0 0 8px; font-size: 14px; }
.acrow { display: flex; flex-wrap: wrap; gap: 8px; }
.acsw { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; border: 2px solid var(--line); background: var(--card2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.acsw i { width: 22px; height: 22px; border-radius: 50%; display: block; }
.acsw.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.ac-gold i { background: linear-gradient(135deg, #0A2E5C 50%, #C9A24A 50%); } .ac-teal i { background: #14B8A6; } .ac-blue i { background: #3B82F6; } .ac-green i { background: #22C55E; } .ac-rose i { background: #F43F5E; } .ac-lavender i { background: #8B5CF6; }

/* ================================================================ 1.3.0 loading screen: phones (portrait) keep the portrait splash; PC / tablet landscape
   = the landscape splash full screen (cover), matching navy behind it (ultrawide: the whole picture, edges fade into the navy = no bars, no cut wordmark) */
#boot { position: fixed; inset: 0; z-index: 999; transition: opacity .3s ease; }
#boot.done { opacity: 0; pointer-events: none; }
#boot picture { display: contents; }
#boot .bootbar { position: absolute; left: 50%; bottom: 6vh; width: min(240px, 40vw); height: 3px; transform: translateX(-50%); border-radius: 3px; background: rgba(233,207,134,.18); overflow: hidden; }
#boot .bootbar::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; background: linear-gradient(90deg, #C9A24A, #F3DC9A); animation: m130boot 1.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes m130boot { from { transform: scaleX(0); } to { transform: scaleX(.92); } }
@media (min-width: 900px), (orientation: landscape) {
  #boot.boot2 { background: radial-gradient(ellipse 70% 80% at 50% 42%, #0A1F6B 0%, #06124A 55%, #010A2C 100%); }
  #boot.boot2 img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; animation: fadein .4s ease; }
}
@media (min-aspect-ratio: 19/10) {
  #boot.boot2 img { object-fit: contain; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
}
@media (max-aspect-ratio: 3/2) and (min-width: 900px) {
  #boot.boot2 img { object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) { #boot .bootbar::after { animation: none; transform: scaleX(.6); } #boot { transition: none; } }

/* 1.3.0 About: the simple SHABAB format (same as HR PRO "ab2"): logo + text, no bold, partners the same size, products as small text chips */
.ab2 { font-weight: 400; line-height: 1.5; max-width: 760px; }
.ab2 b { font-weight: 400; }
.ab2-head { display: flex; gap: 14px; align-items: center; }
.ab2-head img { width: 56px; height: 56px; border-radius: 14px; flex: none; }
.ab2-name { font-size: 20px; font-weight: 500; letter-spacing: .5px; }
.ab2-sub, .ab2-pr { font-size: 13px; color: var(--mute); }
.ab2-p { font-size: 14px; margin: 14px 0; }
.ab2-lbl { font-size: 11px; letter-spacing: 2px; color: var(--mute); margin: 18px 0 8px; }
.ab2-ppl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .ab2-ppl { grid-template-columns: 1fr; } }
.ab2-pn { font-size: 17px; font-weight: 500; }
.ab2-co { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.ab2-co img { width: 44px; height: 44px; border-radius: 12px; flex: none; object-fit: contain; }
.ab2-ct { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; margin-top: 12px; }
.ab2-prod { display: flex; flex-wrap: wrap; gap: 6px; }
.ab2-prod span { font-size: 11.5px; letter-spacing: .04em; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--mute); background: var(--soft); }
.ab2-prod span.on { color: var(--accentInk); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ab2-ft { font-size: 11px; color: var(--mute); text-align: center; margin-top: 16px; }
html[dir="rtl"] .ab2-ct, html[dir="rtl"] .ab2-prod { justify-content: flex-end; }

/* ================================================================ 1.3.0 RESTAURANT VIEW (#/service): Tonight's service, kitchen ticket cards, floor plan,
   menu grid, menu engineering scatter (own design; ideas only from the REF-5 restaurant reference) */
.svlive { display: grid; gap: 12px; }
.svlive .svh { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.svlive .dot.live { width: 9px; height: 9px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 var(--live); animation: svpulse 2s infinite; }
@keyframes svpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.svrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.svrow .big small { display: block; color: var(--mute); font-size: 12px; }
.svrow .big .n { font-size: clamp(30px, 6vw, 46px); font-weight: 800; color: var(--ink); line-height: 1.1; }
.svrow .big .n small { display: inline; font-size: 14px; font-weight: 600; }
.svrow .donut2.sm { max-width: 130px; }
.svstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.svstats > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 8px 10px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line2); }
.svstats .ki { grid-row: span 2; align-self: center; color: var(--accent); } .svstats .ki svg { width: 18px; height: 18px; }
.svstats span { font-size: 12px; color: var(--mute); } .svstats b { font-size: 18px; color: var(--ink); }
.ktix { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ktk { --kc: var(--k3); border-radius: 16px; padding: 10px 12px; color: var(--ink); background: color-mix(in srgb, var(--kc) 20%, var(--card)); border: 1px solid color-mix(in srgb, var(--kc) 55%, transparent); border-inline-start: 5px solid var(--kc); min-width: 0; }
.ktk.st-submitted { --kc: #E0A100; } .ktk.st-cooking { --kc: #E8590C; } .ktk.st-ready { --kc: #12A150; }
.ktk.st-submitted.age-r, .ktk.st-cooking.age-r { --kc: #E03131; }
.ktk .kth { display: flex; align-items: center; gap: 6px; } .ktk .kth b { font-size: 16px; }
.ktk .kst { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--kc) 30%, transparent); }
.ktk .kmin { margin-inline-start: auto; font-weight: 700; font-size: 12px; }
.ktk ul { list-style: none; margin: 8px 0 6px; padding: 0; font-size: 13px; } .ktk li { padding: 2px 0; overflow-wrap: anywhere; }
.ktk .ktf { font-size: 11px; }
.froom { margin: 8px 0 12px; } .frn { font-size: 12px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; margin: 4px 0 6px; }
.fplan { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 12px; padding: 14px; border-radius: 18px; border: 1px dashed var(--line2); background: repeating-linear-gradient(0deg, transparent 0 23px, var(--line2) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, var(--line2) 23px 24px); }
.ftb { --tc: #12A150; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--ink); background: color-mix(in srgb, var(--tc) 18%, var(--card)); border: 2px solid var(--tc); min-width: 0; }
.ftb.rd { border-radius: 50%; } .ftb.sq { border-radius: 16px; }
.ftb.busy { --tc: #E0A100; } .ftb.long { --tc: #E03131; } .ftb.free { --tc: #12A150; }
.ftb b { font-size: 14px; } .ftb small { font-size: 10px; color: var(--mute); text-align: center; padding: 0 4px; }
a.ftb:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.flg { display: flex; gap: 14px; flex-wrap: wrap; } .flg span { display: inline-flex; align-items: center; gap: 6px; }
.ftb.mini { width: 14px; height: 14px; aspect-ratio: auto; border-radius: 50%; display: inline-block; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.mgi { --mc: var(--k8); display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line2); border-top: 4px solid var(--mc); min-width: 0; }
.mgi b { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; } .mgi span { font-weight: 700; color: var(--accentInk); } .mgi small { color: var(--mute); font-size: 11px; }
.mgi.star, .dot2.star, .englg i.star { --mc: #C9A227; } .mgi.plow, .dot2.plow, .englg i.plow { --mc: #3B82F6; } .mgi.puzzle, .dot2.puzzle, .englg i.puzzle { --mc: #14B8A6; } .mgi.dog, .dot2.dog, .englg i.dog { --mc: #94A3B8; }
.scatw { width: 100%; overflow: hidden; }
.scat { width: 100%; height: auto; display: block; }
.scat .ax { stroke: var(--line2); } .scat .thl { stroke: var(--mute); stroke-dasharray: 4 5; opacity: .6; }
.scat .qd { opacity: .1; } .scat .q-star { fill: #C9A227; } .scat .q-dog { fill: #94A3B8; }
.scat .axt { fill: var(--mute); font-size: 12px; font-family: inherit; }
.scat .dot2 { fill: var(--mc); stroke: var(--card2); stroke-width: 1.5; }
.scat.play .dot2 { animation: svpop .35s cubic-bezier(.2, .8, .2, 1.2) both; transform-box: fill-box; transform-origin: center; }
@keyframes svpop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
.englg { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.englg > div { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; }
.englg i { width: 10px; height: 10px; border-radius: 50%; background: var(--mc); } .englg small { grid-column: 2; font-size: 11px; }
@media (min-width: 1100px) { .svg2 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .svlive .dot.live, .scat.play .dot2 { animation: none !important; } }

/* 1.3.0 Glass Night: buttons and the phone tab bar sit on the photo's bright city lights - a deeper glass under their text (cards keep SB's .10) */
html[data-theme="glassnight"] .btn.o, html[data-theme="glassnight"] .btn.g { background: rgba(8,14,34,.5); }
html[data-theme="glassnight"] nav.nav { background: rgba(8,14,34,.62); }
html[data-theme="glass"] nav.nav { background: rgba(255,255,255,.62); }
html[data-theme^="glass"] .livestrip { border-radius: 22px; }