/* AK BETON — operational workspace. No external assets or dependencies.
   Existing JS selectors and theme contract are preserved. */
:root {
  color-scheme: light;
  --bg:#f3f2ee; --surface:#fff; --surface2:#f6f7f9; --surface3:#eceef2;
  --text:#252a32; --muted:#68717d; --line:#e1e4e8; --card-border:#e1e4e8;
  --accent:#f4bd43; --accent-hover:#e9ac26; --accent-soft:#fff5db; --on-accent:#29230f; --accent-ink:#825b0e;
  --ok:#21744d; --ok-soft:#e9f4ed; --warn:#956016; --warn-soft:#faf1df;
  --danger:#bb4143; --danger-soft:#fbeeee; --seg-off:#e3e9e5;
  --brand:#252a32; --rail:#222831; --rail-text:#bbc3cf; --rail-active:#363d47;
  --radius:16px; --radius-md:10px; --radius-sm:8px;
  --shadow:0 2px 5px rgb(23 49 38 / 2%); --shadow-float:0 12px 36px rgb(16 37 28 / 14%);
  --nav-h:72px; --nav-gap:0px; --header-h:78px;
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --safe-top:max(env(safe-area-inset-top,0px),var(--tg-content-safe-area-inset-top,0px));
  --safe-bottom:max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px));
  --safe-left:env(safe-area-inset-left,0px); --safe-right:env(safe-area-inset-right,0px);
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0e1013; --surface:#191e23; --surface2:#20272d; --surface3:#2b343b;
  --text:#f0f2f5; --muted:#a8b1bd; --line:#303b40; --card-border:#303b40;
  --accent:#f4bd43; --accent-hover:#ffd474; --accent-soft:#373126; --on-accent:#29230f; --accent-ink:#f4cb70;
  --ok:#92d6b0; --ok-soft:#253b30; --warn:#e4bb75; --warn-soft:#363126;
  --danger:#f09599; --danger-soft:#3b2a30; --seg-off:#354148;
  --brand:#f4bd43; --rail:#15191f; --rail-text:#b9c2ce; --rail-active:#2b323c;
  --shadow:none; --shadow-float:0 12px 36px rgb(0 0 0 / 28%);
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
html { scroll-padding-block:100px calc(var(--nav-h) + var(--safe-bottom) + 100px); }
body { background:var(--bg); color:var(--text); font:16px/1.5 var(--font); -webkit-text-size-adjust:100%; overflow-wrap:anywhere; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; max-width:100%; }
button,a,label.btn,summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { cursor:pointer; }
h1,h2,h3,h4,p { margin-top:0; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.25; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.i { display:block; width:22px; height:22px; flex:0 0 auto; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.mono { font-family:ui-monospace,Consolas,monospace; }
.center { text-align:center; }
.warn-text { color:var(--warn); font-size:13px; font-weight:600; }
.qty,.kpi,input[inputmode],.tbl,.tank-qty,.hbar-val { font-variant-numeric:tabular-nums; }
/* App shell */
.topbar { min-height:var(--header-h); padding:calc(14px + var(--safe-top)) calc(20px + var(--safe-right)) 14px calc(20px + var(--safe-left)); display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; min-width:0; }
.brand b { display:block; font-size:17px; letter-spacing:.04em; line-height:1.2; }
.brand small { color:var(--muted); font-size:12px; }
.logo { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:12px; background:#f4bd43; color:#29230f; font-size:16px; font-weight:800; border:1px solid #dba82f; }
.who { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.topbar .chip { border:1px solid var(--line); background:var(--surface2); color:var(--text); font-size:12px; }
.topbar .chip.warn { background:transparent; color:var(--muted); font-size:10px; letter-spacing:.06em; }
.layout { padding-inline:var(--safe-left) var(--safe-right); }
.view { width:100%; min-width:0; max-width:1156px; margin-inline:auto; padding:24px 20px calc(var(--nav-h) + var(--safe-bottom) + 36px); }
.nav { position:fixed; z-index:30; left:0; right:0; bottom:0; height:calc(var(--nav-h) + var(--safe-bottom)); padding:8px max(4px,var(--safe-right)) calc(8px + var(--safe-bottom)) max(4px,var(--safe-left)); display:flex; align-items:stretch; gap:2px; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -4px 20px rgb(0 0 0 / 4%); }
.nav a { display:flex; flex:1 1 0; min-width:0; align-items:center; justify-content:center; flex-direction:column; gap:4px; border-radius:10px; color:var(--muted); padding:4px 0; font-size:10px; font-weight:600; line-height:1.2; }
.nav a.active { background:var(--accent-soft); color:var(--accent-ink); }
.nav .ico { display:grid; place-items:center; }
.nav .i { width:21px; height:21px; }
.nav a > span:last-child { display:block; white-space:nowrap; }
/* Headings and surfaces */
.page-title { display:flex; align-items:center; gap:12px; margin:0 0 24px; font-size:clamp(25px,2.3vw,32px); font-weight:700; letter-spacing:-.035em; }
.page-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.page-head .page-title { margin:0; }
.home-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.home-heading .page-title { margin:0; font-size:clamp(23px,2.2vw,30px); }
.home-date { font-size:13px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:18px; font-weight:700; letter-spacing:-.02em; margin:28px 0 14px; }
.link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 12px; border-radius:8px; font-size:14px; font-weight:600; color:var(--accent-ink); }
.link::after { content:'→'; margin-left:8px; }
.card { background:var(--surface); border:1px solid var(--card-border); border-radius:var(--radius); padding:24px; margin-bottom:18px; box-shadow:var(--shadow); }
.card h3 { font-size:17px; margin-bottom:16px; }
.card h4,.form h4 { font-size:15px; margin:24px 0 12px; }
.title-ico { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:10px; color:var(--accent-ink); background:var(--accent-soft); }
.list { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--card-border); border-radius:var(--radius); overflow:hidden; margin-bottom:18px; box-shadow:var(--shadow); }
.list > * + * { border-top:1px solid var(--line); }
.list > .empty { border:0; border-radius:0; }
.list > .muted.center { padding:16px; }
.empty { display:grid; place-content:center; min-height:150px; padding:32px 24px; background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius); text-align:center; color:var(--muted); font-size:15px; }
.empty::before { content:''; display:block; justify-self:center; width:32px; height:26px; margin-bottom:16px; border:2px solid var(--line); border-radius:5px; box-shadow:inset 0 -8px var(--surface2); }
.loading { padding:40px 20px; text-align:center; color:var(--muted); }
/* Controls */
.btns,.btn-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.btn-row { margin:16px 0; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:46px; min-height:46px; padding:10px 18px; background:var(--surface); border:1px solid var(--line); border-radius:10px; color:var(--text); font-size:15px; font-weight:600; text-align:center; cursor:pointer; transition:background .15s,border-color .15s; }
.btn .i { width:19px; height:19px; }
.btn.primary { min-height:48px; background:var(--accent); color:var(--on-accent); border-color:var(--accent-ink); }
.btn.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn.danger { color:var(--danger); background:var(--danger-soft); border-color:transparent; }
.btn.ghost { background:transparent; color:var(--muted); border-color:transparent; }
.btn.small { min-height:44px; padding:8px 14px; font-size:14px; }
.btn.wide { width:100%; }
.btn:disabled { opacity:.5; cursor:default; }
.icon-btn { display:inline-grid; place-items:center; width:44px; height:44px; flex-shrink:0; padding:0; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:var(--surface); }
.icon-btn .i { width:18px; height:18px; }
input,select,textarea { min-height:48px; min-width:0; padding:11px 13px; border:1px solid var(--line); border-radius:9px; background:var(--surface); font-size:16px; transition:border-color .15s; }
input:hover,select:hover,textarea:hover { border-color:var(--muted); }
input:focus,select:focus,textarea:focus { outline:2px solid var(--accent-soft); outline-offset:1px; border-color:var(--accent-ink); }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.85; }
input,select,textarea { scroll-margin-block:115px; }
input[type=date] { width:100%; }
textarea { resize:vertical; }
input[type=checkbox] { accent-color:var(--accent-ink); }
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; min-width:0; }
.field > span { color:var(--text); font-size:13px; font-weight:600; }
.hint,.field .hint { font-size:13px; color:var(--muted); }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.grid2 > * { min-width:0; }
.with-btn { display:flex; gap:8px; min-width:0; }
.with-btn select { width:0; flex:1; }
.with-btn .btn { flex-shrink:0; }
.check { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:14px; cursor:pointer; }
.check input { flex:0 0 20px; width:20px; height:20px; min-height:20px; padding:0; }
/* Neutral alerts: status carries meaning, amber marks primary actions. */
.chip { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:4px 9px; border-radius:6px; background:var(--surface2); color:var(--muted); font-size:12px; font-weight:600; }
.chip .i { width:14px; height:14px; }
.chip.ok { color:var(--ok); background:var(--ok-soft); }
.chip.warn { color:var(--warn); background:var(--warn-soft); }
.chip.danger { color:var(--danger); background:var(--danger-soft); }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.chips:empty { display:none; }
.alerts { display:grid; gap:10px; margin:16px 0 24px; }
.alert { position:relative; display:flex; align-items:center; gap:12px; padding:14px 36px 14px 16px; min-height:54px; font-size:14px; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; }
.alert.warn { border-left-color:var(--warn); }
.alert.danger { border-left-color:var(--danger); }
.alert::before { content:'i'; display:grid; place-items:center; flex:0 0 23px; height:23px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font-weight:700; font-size:13px; }
.alert.warn::before { content:'!'; background:var(--warn-soft); color:var(--warn); }
.alert.danger::before { content:'!'; background:var(--danger-soft); color:var(--danger); }
a.alert::after { content:'›'; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--muted); }
.card .alert { margin-bottom:16px; background:var(--surface2); }
.test-box { display:flex; align-items:center; gap:20px; margin-top:32px; padding:16px 18px; background:transparent; border-style:dashed; box-shadow:none; }
.test-copy { flex:1; min-width:0; font-size:13px; color:var(--muted); }
.test-copy b { display:block; color:var(--text); margin-bottom:3px; }
.test-box select { flex:0 1 230px; font-size:14px; }
/* Metrics */
.kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.kpi { display:flex; flex-direction:column; min-width:0; gap:5px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.kpi small { color:var(--muted); font-size:13px; font-weight:500; }
.kpi b { display:block; font-size:clamp(26px,2.8vw,34px); font-weight:650; letter-spacing:-.045em; line-height:1.15; margin:3px 0; }
.kpi b.sm { font-size:21px; }
.kpi > span { margin-top:auto; color:var(--muted); font-size:12px; }
.kpi.neg b { color:var(--danger); }
.kpi.warn b { color:var(--warn); }
.kpi.wide { grid-column:1 / -1; }
a.kpi { position:relative; padding-right:28px; }
a.kpi::after { content:'↗'; position:absolute; right:12px; top:12px; color:var(--muted); font-size:17px; }
.home-heading + .kpis .kpi:first-child { border-top:3px solid var(--accent); padding-top:16px; }
/* Work shortcuts. Priority follows the existing operation order. */
.actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.action { display:grid; grid-template-columns:42px minmax(0,1fr); align-content:center; align-items:center; column-gap:12px; row-gap:3px; padding:18px; min-width:0; min-height:94px; border:1px solid var(--line); border-radius:12px; background:var(--surface); transition:border-color .15s,background .15s; }
.action .ico { display:grid; place-items:center; grid-row:1 / 3; width:42px; height:42px; border-radius:10px; background:var(--accent-soft); color:var(--accent-ink); }
.action b { min-width:0; font-size:15px; font-weight:650; line-height:1.25; }
.action small { min-width:0; font-size:12px; line-height:1.35; color:var(--muted); }
.action.t-receipt { background:var(--accent); color:var(--on-accent); border-color:var(--accent-ink); }
.action.t-receipt small { color:inherit; opacity:.88; }
.action.t-receipt .ico { background:rgb(255 255 255 / 15%); color:inherit; }
/* Compact material overview: numbers before decorative silos. */
.tanks,.tanks.strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.tank { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 42px; grid-template-rows:auto auto auto; column-gap:6px; row-gap:5px; align-content:center; min-width:0; min-height:122px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.tank-name { grid-column:1; min-width:0; font-size:13px; font-weight:600; color:var(--muted); line-height:1.3; }
.tank-qty { grid-column:1; grid-row:2; font-size:25px; line-height:1.2; letter-spacing:-.035em; }
.tank small { grid-column:1; grid-row:3; font-size:12px; color:var(--muted); }
.tank-pic { grid-column:2; grid-row:1 / 4; position:relative; display:block; width:42px; height:74px; align-self:center; }
.silo { display:block; width:100%; height:100%; overflow:visible; }
.silo-body { fill:var(--surface2); stroke:var(--line); stroke-width:2; }
.silo-rim { fill:none; stroke:var(--muted); opacity:.35; stroke-width:1.5; }
.silo > path:last-of-type { opacity:.12; }
.silo-surface { opacity:.8; }
.tank-badge { position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); padding:2px 6px; border-radius:5px; font-size:10px; font-weight:650; white-space:nowrap; background:var(--ok-soft); color:var(--ok); }
.st-low .tank-badge { background:var(--warn-soft); color:var(--warn); }
.st-empty .tank-badge { background:var(--danger-soft); color:var(--danger); }
.gauge { display:flex; gap:2px; height:7px; margin-top:8px; justify-content:flex-end; }
.gauge i { flex:1 1 0; min-width:1px; max-width:5px; border-radius:1px; background:var(--seg-off); }
.gauge.st-ok i.on { background:var(--accent); }
.gauge.st-low i.on { background:var(--warn); }
.gauge.st-empty i.on { background:var(--danger); }
.gauge-card .gauge { height:20px; margin:0; justify-content:space-between; gap:4px; }
.gauge-card .gauge i { max-width:none; border-radius:3px; }
.gauge-legend { display:flex; justify-content:space-between; gap:10px; margin-top:10px; font-size:13px; color:var(--muted); }
/* Search, lists and documents */
.toolbar,.filters { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:16px; margin-bottom:20px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.toolbar input[type=search],.filters input[type=search] { flex:1 1 240px; }
.filters select { flex:1 1 160px; }
.toolbar > *, .filters > * { min-width:0; }
input[type=search] { background:var(--surface2); }
.cat { display:flex; align-items:center; gap:12px; margin:22px 0 10px; font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.cat::after { content:''; height:1px; background:var(--line); flex:1; }
.stock-row,.menu-row,.move-row,.user-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:76px; width:100%; padding:16px 20px; background:transparent; border:0; color:var(--text); font:inherit; text-align:left; }
.stock-row > *, .move-row > * { min-width:0; }
.stock-row > :first-child,.move-row > :first-child,.menu-row > div { flex:1; min-width:0; }
.stock-row b,.menu-row b,.move-row b { font-size:15px; font-weight:600; }
.stock-row small,.menu-row small,.move-row small,.user-row small { display:block; color:var(--muted); font-size:13px; margin-top:3px; }
.stock-row .qty,.move-row .qty { max-width:45%; text-align:right; font-size:14px; }
.stock-row .qty b { font-size:21px; font-weight:650; }
.stock-row .qty .gauge { width:88px; margin-left:auto; }
.stock-row.low .qty b { color:var(--warn); }
.stock-row.neg .qty b,.qty.out { color:var(--danger); }
.qty.in { color:var(--ok); }
.move-row .qty { font-weight:600; }
.inactive { opacity:.6; }
.gdot { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; }
.row-ico,.doc-ico { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:10px; color:var(--accent-ink); background:var(--accent-soft); }
.row-ico .i,.doc-ico .i { width:21px; height:21px; }
.menu-row .chev { color:var(--muted); }
.menu-row .chev .i { width:18px; height:18px; }
.user-row { flex-wrap:wrap; }
.user-ctl { display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-width:0; }
.doc-card { display:flex; gap:14px; min-width:0; padding:18px 20px; }
.doc-main { flex:1; min-width:0; }
.doc-top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; }
.doc-top b { font-size:15px; font-weight:650; }
.doc-top .muted { font-size:13px; }
.doc-partner { margin-top:4px; font-size:14px; }
.doc-lines { margin-top:4px; color:var(--muted); font-size:13px; }
.doc-card.cancelled { background:var(--surface2); }
.doc-card.cancelled .doc-top b { text-decoration:line-through; color:var(--muted); }
/* Document editor */
.form { padding:24px; }
.form h4 { padding-top:20px; border-top:1px solid var(--line); }
.form h4 small { font-size:12px; font-weight:400; }
.line { display:grid; grid-template-columns:minmax(0,1fr) 120px 38px 44px; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.line input,.line select { width:100%; min-width:0; }
.line .unit { font-size:13px; color:var(--muted); }
.line .icon-btn { background:var(--surface2); border-color:transparent; }
.form > .btn.small { margin-top:12px; }
.preview-box:not(:empty) { padding:16px; margin:18px 0; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; background:var(--accent-soft); font-size:14px; }
.preview-box > div { padding-top:6px; }
.adj { display:flex; flex-direction:column; max-height:60vh; overflow:auto; overscroll-behavior:contain; }
.adj-row { display:grid; grid-template-columns:minmax(0,1fr) 110px; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.adj-row > * { min-width:0; }
.adj-row small { display:block; color:var(--muted); font-size:13px; }
.files { display:flex; gap:8px; flex-wrap:wrap; }
.file { display:inline-flex; align-items:center; gap:8px; min-height:44px; max-width:100%; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface2); font-size:13px; }
.file .i { width:18px; height:18px; }
.btn-row.sticky { position:sticky; z-index:15; bottom:calc(var(--nav-h) + var(--safe-bottom) + 8px); margin:24px -12px -12px; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-float); }
.btn-row.sticky .primary { flex:1 1 150px; }
/* Time and type filters */
.period { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.seg { display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px; max-width:100%; padding:4px; margin-bottom:16px; background:var(--surface2); border:1px solid var(--line); border-radius:10px; }
.period .seg { margin:0; }
.seg button,.chips-row button { min-height:44px; padding:8px 14px; border:1px solid transparent; border-radius:7px; color:var(--muted); background:transparent; font-size:14px; font-weight:600; }
.seg button.on,.chips-row button.on { background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-ink); }
.chips-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.chips-row button { border-color:var(--line); background:var(--surface); }
.dates { display:flex; align-items:center; gap:8px; flex:1 1 290px; min-width:0; }
.dates input { width:0; min-width:0; flex:1 1 0; }
.dates > span { color:var(--muted); }
/* Details and reporting */
.props { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:12px 24px; margin:0 0 20px; }
.props dt { font-size:13px; color:var(--muted); }
.props dd { margin:0; min-width:0; }
.props.small { font-size:14px; }
.tbl-wrap,.chart-scroll { min-width:0; max-width:100%; overflow-x:auto; scrollbar-width:thin; }
.tbl { width:100%; border-collapse:collapse; font-size:14px; }
.tbl th,.tbl td { padding:14px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:normal; }
.tbl th { color:var(--muted); font-size:12px; font-weight:600; background:var(--surface2); }
.tbl th:first-child,.tbl td:first-child { min-width:120px; }
.tbl .r { text-align:right; white-space:nowrap; }
.tbl tr:last-child td { border-bottom:0; }
.tbl.stats { min-width:760px; }
.timeline { list-style:none; padding:0; margin:0; }
.timeline li { position:relative; padding:14px 0 14px 22px; border-bottom:1px solid var(--line); font-size:14px; }
.timeline li::before { content:''; position:absolute; left:0; top:21px; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.timeline li:last-child { border:0; }
.timeline small { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.ver { padding:12px 0; border-top:1px dashed var(--line); font-size:14px; }
details summary { min-height:44px; padding-block:12px; cursor:pointer; color:var(--accent-ink); font-weight:600; }
.pre { white-space:pre-wrap; overflow-wrap:anywhere; padding:16px; background:var(--surface2); border-radius:9px; }
.preview { max-width:100%; border-radius:9px; }
.conc-row { padding:0 20px; }
.conc-row summary { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:78px; margin:0; padding:16px 0; list-style:none; color:var(--text); font-weight:400; }
.conc-row summary::-webkit-details-marker { display:none; }
.conc-row summary > * { min-width:0; }
.conc-row summary small { display:block; color:var(--muted); font-size:13px; margin-top:4px; }
.conc-row summary > .muted { flex:0 0 auto; padding:6px 9px; border-radius:6px; background:var(--surface2); color:var(--text); font-size:13px; white-space:nowrap; }
.conc-row[open] summary { border-bottom:1px solid var(--line); margin-bottom:16px; }
.comps { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:13px; }
.chart-svg { display:block; width:100%; height:auto; min-width:280px; }
.chart-svg .grid { stroke:var(--line); stroke-width:1; stroke-dasharray:3 4; }
.chart-svg .axis { fill:var(--muted); font:11px var(--font); }
.legend { display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:14px; font-size:13px; color:var(--muted); }
.legend i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; }
.hbars { display:flex; flex-direction:column; gap:16px; }
.hbar { display:grid; grid-template-columns:minmax(0,32%) minmax(0,1fr) minmax(0,28%); gap:12px; align-items:center; font-size:13px; }
.hbar-track { height:8px; border-radius:4px; background:var(--seg-off); overflow:hidden; }
.hbar-fill { height:100%; border-radius:4px; }
.hbar-val { text-align:right; font-weight:600; }
/* Dialogs */
dialog { width:100%; max-width:min(620px,calc(100% - 24px)); max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px); margin:auto; padding:0; background:transparent; border:0; color:var(--text); }
dialog::backdrop { background:rgb(10 15 24 / 55%); backdrop-filter:blur(3px); }
.dlg { display:flex; flex-direction:column; max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 40px); background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-float); overflow:hidden; }
.dlg header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 24px; border-bottom:1px solid var(--line); flex-shrink:0; }
.dlg header h3 { margin:0; font-size:20px; }
.dlg-body { padding:22px 24px 6px; overflow:auto; min-height:0; overscroll-behavior:contain; }
.dlg footer { display:flex; gap:10px; flex-wrap:wrap; padding:16px 24px; border-top:1px solid var(--line); background:var(--surface2); flex-shrink:0; }
.dlg footer .primary { flex:1 1 160px; }
.presets { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.presets > span { width:100%; font-size:13px; color:var(--muted); }
.preset { min-height:44px; padding:8px 12px; background:var(--surface2); border:1px solid var(--line); border-radius:8px; color:var(--text); font-size:14px; }
.preset.on { border-color:var(--accent-ink); background:var(--accent-soft); color:var(--accent-ink); }
.toast { position:fixed; z-index:60; bottom:calc(var(--nav-h) + var(--safe-bottom) + 16px); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; width:min(440px,calc(100vw - 32px)); pointer-events:none; }
.toast-item { padding:14px 18px; border-radius:10px; background:var(--text); color:var(--bg); font-size:14px; box-shadow:var(--shadow-float); transition:opacity .3s; }
.toast-item.success { background:var(--ok); color:var(--surface); }
.toast-item.error { background:var(--danger); color:var(--surface); }
.toast-item.hide { opacity:0; }
@media (hover:hover) {
  .doc-card:hover,.stock-row:hover,.menu-row:hover,.move-row[href]:hover,.conc-row summary:hover { background:var(--surface2); }
  .action:hover,.tank:hover,a.kpi:hover { border-color:var(--accent-ink); }
  .action:not(.t-receipt):hover { background:var(--accent-soft); }
  .action.t-receipt:hover { background:var(--accent-hover); }
  .icon-btn:hover { background:var(--danger-soft); color:var(--danger); }
  .btn:not(.primary):hover,.link:hover { background:var(--surface2); }
  .nav a:not(.active):hover { background:var(--surface2); }
}
@media (max-width:599px) {
  .topbar { padding-inline:14px; gap:8px; }
  .brand { gap:8px; }
  .brand b { font-size:15px; }
  .brand small { font-size:11px; }
  .logo { flex-basis:36px; height:36px; border-radius:10px; font-size:14px; }
  .who { max-width:44%; gap:3px; }
  .topbar .chip { font-size:10px; padding:3px 6px; }
  .view { padding:20px 14px calc(var(--nav-h) + var(--safe-bottom) + 28px); }
  .home-heading { flex-wrap:wrap; gap:6px; margin-bottom:20px; }
  .home-heading .page-title { width:100%; }
  .kpis { gap:10px; }
  .kpi { padding:15px; }
  .kpi small { font-size:12px; }
  .kpi b { font-size:27px; }
  .action { grid-template-columns:1fr; padding:15px; min-height:132px; row-gap:7px; align-content:start; }
  .action .ico { grid-row:auto; margin-bottom:4px; }
  .action b { font-size:14px; }
  .action small { font-size:12px; }
  .tank { padding:13px; grid-template-columns:minmax(0,1fr) 32px; gap:5px; }
  .tank-pic { width:32px; height:65px; }
  .tank-name { font-size:12px; }
  .tank-qty { font-size:23px; }
  .tank small { font-size:11px; }
  .card,.form { padding:18px; }
  .line { grid-template-columns:minmax(0,1fr) 38px 44px; gap:8px; padding:14px 0; }
  .line select { grid-column:1 / -1; }
  .toolbar,.filters { padding:12px; gap:10px; }
  .stock-row,.menu-row,.move-row,.user-row,.doc-card { padding:16px 14px; gap:12px; }
  .stock-row .qty b { font-size:20px; }
  .doc-ico,.row-ico { flex-basis:38px; height:38px; }
  .test-box { flex-direction:column; align-items:stretch; gap:12px; }
  .test-box select { flex:0 0 auto; width:100%; }
  .btn-row.sticky { margin-inline:-8px; padding:8px; gap:6px; }
  .btn-row.sticky .primary { flex-basis:130px; }
  .dlg header { padding:14px 16px; }
  .dlg-body { padding:18px 16px 4px; }
  .dlg footer { padding:12px 16px; }
  .page-head .btns { width:100%; }
  .page-head .btns .primary { flex:1; }
}
@media (max-width:520px) { .grid2 { grid-template-columns:1fr; gap:0; } }
@media (max-width:359px) {
  .view { padding-inline:12px; }
  .nav { gap:0; }
  .nav a { font-size:9px; }
  .nav .i { width:20px; height:20px; }
  .kpi { padding:13px 11px; }
  .kpi b { font-size:25px; }
  .action { padding:13px; }
  .tank { grid-template-columns:1fr; }
  .tank-pic { display:none; }
  .tank-name { font-size:13px; }
  .tank::after { content:''; position:absolute; right:12px; top:14px; width:5px; height:5px; border-radius:50%; background:var(--ok); }
  .tank.st-low::after { background:var(--warn); }
  .tank.st-empty::after { background:var(--danger); }
  .tank-name { padding-right:9px; }
  .dates { flex-wrap:wrap; }
  .dates input { flex:1 1 100%; width:100%; }
  .dates > span { display:none; }
  .props { grid-template-columns:1fr; gap:4px; }
  .props dd { margin-bottom:12px; }
  .seg button { padding-inline:10px; font-size:13px; }
}
@media (min-width:600px) {
  .kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .kpis:has(> :nth-child(3):last-child) { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .kpis:has(> :nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi.wide { grid-column:span 2; }
  .tanks,.tanks.strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .action:last-child:nth-child(odd) { grid-column:1 / -1; }
}
@media (min-width:900px) {
  html { scroll-padding-bottom:110px; }
  .topbar { position:sticky; top:0; z-index:35; min-height:var(--header-h); padding-inline:24px 32px; }
  .layout { padding:0 0 0 212px; }
  .nav { position:fixed; top:calc(var(--header-h) + var(--safe-top)); bottom:0; left:0; right:auto; width:212px; height:auto; flex-direction:column; align-items:stretch; gap:6px; padding:28px 14px; background:var(--rail); border:0; box-shadow:none; }
  .nav a { position:relative; flex:0 0 auto; min-height:48px; padding:12px 16px; flex-direction:row; justify-content:flex-start; gap:13px; color:var(--rail-text); font-size:14px; border-radius:9px; }
  .nav a.active { color:#f8cb67; background:var(--rail-active); }
  .nav a.active::before { content:''; position:absolute; left:-14px; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:#f4bd43; }
  .nav a:not(.active):hover { background:var(--rail-active); color:#fff; }
  .nav a:last-child { margin-top:auto; }
  .view { padding:32px 32px 48px; }
  .actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .action { padding:16px 14px; grid-template-columns:34px minmax(0,1fr); column-gap:10px; }
  .action .ico { width:34px; height:38px; }
  .action:last-child:nth-child(odd) { grid-column:1 / -1; min-height:74px; }
  .form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; }
  .form > * { grid-column:1 / -1; }
  .form > .field { grid-column:auto; }
  .form > .field:has(textarea) { grid-column:1 / -1; margin-top:24px; }
  .form > .btn { justify-self:start; }
  .btn-row.sticky { bottom:16px; }
  .btn-row.sticky .primary { flex:0 1 260px; min-width:180px; }
  .toast { bottom:24px; left:calc(50% + 106px); }
}
@media (min-width:1200px) {
  .actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .action { padding:18px; grid-template-columns:42px minmax(0,1fr); }
  .action .ico { width:42px; height:42px; }
  .tanks,.tanks.strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}
@media print {
  .nav,.topbar,.test-box,.btn-row.sticky,.toast { display:none; }
  .layout { padding:0; }
  .view { padding:0; max-width:none; }
  .card,.kpi,.list { break-inside:avoid; box-shadow:none; }
}

/* Concrete list: day headers and paging (50–100 invoices a day) */
.day-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:10px 20px; background:var(--surface2); font-size:13px; position:sticky; top:0; z-index:1; }
.day-head span { color:var(--muted); font-variant-numeric:tabular-nums; }
.list > .more-btn { border:0; border-radius:0; min-height:52px; }

/* In-app camera */
.cam-video { display:block; width:100%; max-height:60vh; border-radius:12px; background:#000; object-fit:contain; }