/* Konstrukta CRM. Palette and type from konstrukta/brand/konstrukta-brand.md and the live site (website-b/index.html):
   burgundy #690f1a, deep #3c0a14, obsidian, paper #F5F4EF; headings in the site's Helvetica Neue stack. */
:root{
  --ink:#16110f; --ink-2:#4b4340; --ink-3:#857b77;
  --ground:#f5f4ef; --surface:#ffffff; --surface-2:#eeece5; --line:#e2ded5; --line-2:#cfc9bd;
  --accent:#690f1a; --accent-deep:#3c0a14; --accent-ink:#ffffff; --accent-soft:#f6e8e9;
  --good:#2e7d4f; --good-soft:#e2f2e7; --warn:#b8691c; --warn-soft:#fbeedd; --crit:#c0392b; --crit-soft:#f9e3e1;
  --shadow:0 10px 30px rgba(22,17,15,.14);
  --display:"Helvetica Neue",Helvetica,"Arial Black",Arial,system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#f2efe9; --ink-2:#bdb4ae; --ink-3:#8a807b;
    --ground:#0a0708; --surface:#151012; --surface-2:#1f181a; --line:#2c2325; --line-2:#3d3134;
    --accent:#d9454f; --accent-deep:#ef7a82; --accent-ink:#ffffff; --accent-soft:#3a1519;
    --good:#4fb97c; --good-soft:#15301f; --warn:#e69a4a; --warn-soft:#3a2a15; --crit:#ef6a5e; --crit-soft:#3d1c19;
    --shadow:0 10px 30px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#f2efe9; --ink-2:#bdb4ae; --ink-3:#8a807b;
  --ground:#0a0708; --surface:#151012; --surface-2:#1f181a; --line:#2c2325; --line-2:#3d3134;
  --accent:#d9454f; --accent-deep:#ef7a82; --accent-ink:#ffffff; --accent-soft:#3a1519;
  --good:#4fb97c; --good-soft:#15301f; --warn:#e69a4a; --warn-soft:#3a2a15; --crit:#ef6a5e; --crit-soft:#3d1c19;
  --shadow:0 10px 30px rgba(0,0,0,.5);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ground);color:var(--ink);font:14px/1.45 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--accent-deep);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance;letter-spacing:.01em}
h1{font-size:30px;line-height:1.05}
h2{font-size:22px;line-height:1.1}
h3{font-size:16px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--accent-deep)}
.muted{color:var(--ink-3)}
.small{font-size:12px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:600}

/* ---------- app shell ---------- */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100vh}
.rail{grid-row:1/3;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 12px;gap:4px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:4px 6px 14px;border-bottom:1px solid var(--line);margin-bottom:10px}
.brand img{width:100%;height:auto;display:block;border-radius:4px}
.rail-group{display:contents}
.rail-group.open>.rail-head{color:var(--ink)} .rail-group.open>.rail-head svg{color:var(--accent)}
.rail-sub{display:none;flex-direction:column;gap:2px;margin:0 0 6px}
.rail-group.open .rail-sub{display:flex}
.rail-sub a{padding:6px 10px 6px 36px;font-size:13px;color:var(--ink-3);border-left:2px solid var(--line);border-radius:0 7px 7px 0}
.rail-sub a.on{border-left-color:var(--accent)}
.rail a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;color:var(--ink-2);font-weight:500}
.rail a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rail a:hover{background:var(--surface-2);color:var(--ink)}
.rail .rail-help{margin-top:auto;border-top:1px solid var(--line);border-radius:0;padding-top:12px}
.rail .rail-help+.rail-help{margin-top:0;border-top:0;padding-top:0}
.rail a.on{background:var(--accent-soft);color:var(--accent-deep)}
.rail a .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;background:var(--surface-2);padding:1px 7px;border-radius:10px;color:var(--ink-2)}
.rail a.on .cnt{background:var(--surface)}
.topbar{grid-column:2;min-height:56px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:env(safe-area-inset-top,0px) 22px 0;position:sticky;top:0;z-index:5}
.search{flex:1;max-width:460px;display:flex;align-items:center;gap:8px;background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:7px 11px;color:var(--ink-3)}
.search svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.search input{flex:1;border:0;background:none;font:inherit;color:var(--ink);outline:0}
.search kbd{font:11px var(--mono);border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;color:var(--ink-3)}
.person{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;border:1px solid var(--line);border-radius:999px;background:var(--surface);margin-left:auto;position:relative}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--display);color:var(--accent-ink);background:var(--accent);letter-spacing:.03em}
.person .who{line-height:1.1;text-align:left}
.person .who b{display:block;font-weight:600;font-size:13px}
.person .who span{font-size:11px;color:var(--ink-3)}
.person-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);width:260px;padding:6px;z-index:20}
.person-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:7px;text-align:left}
.person-menu button:hover{background:var(--surface-2)}
.person-menu .who{line-height:1.15}
.person-menu .who span{font-size:11px;color:var(--ink-3);display:block}
.iconbtn{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--ink-2);border:1px solid var(--line);background:var(--surface)}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
main{grid-column:2;padding:24px 26px 60px;max-width:1360px;width:100%;min-width:0}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-head .sub{color:var(--ink-2);margin-top:4px}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:7px;border:1px solid var(--line-2);background:var(--surface);font-weight:500;color:var(--ink)}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn.danger{color:var(--crit);border-color:var(--crit)}
.btn.small{padding:5px 9px;font-size:12.5px}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ---------- primitives ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px}
.card .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.card .bd{padding:14px 16px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--ink-2);letter-spacing:.01em}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.crit{background:var(--crit-soft);color:var(--crit)}
.pill.acc{background:var(--accent-soft);color:var(--accent-deep)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.stripe{border-left:3px solid transparent}
.stripe.crit{border-left-color:var(--crit)} .stripe.warn{border-left-color:var(--warn)} .stripe.good{border-left-color:var(--good)} .stripe.acc{border-left-color:var(--accent)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr.row{cursor:pointer}
tbody tr.row:hover td{background:var(--surface-2)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
td.money{font-family:var(--mono);font-size:12.5px;text-align:right}
.tablewrap{overflow-x:auto}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);font-size:12.5px;background:var(--surface);color:var(--ink-2)}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}
.chip select{border:0;background:none;font:inherit;color:inherit}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
.g-2-1{grid-template-columns:2fr 1fr} .g-1-2{grid-template-columns:1fr 2fr} .g-3-2{grid-template-columns:3fr 2fr}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)} .g3,.g-2-1,.g-1-2,.g-3-2{grid-template-columns:1fr}}
.kpi{padding:14px 16px}
.kpi .lbl{font-size:12px;color:var(--ink-2);font-weight:500}
.kpi .val{font:600 34px/1 var(--display);margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .val small{font-size:16px;color:var(--ink-3);font-weight:500;margin-left:4px}
.kpi .foot{margin-top:8px;font-size:12px;color:var(--ink-3);display:flex;gap:8px;align-items:center}
.kpi.alert .val{color:var(--crit)}
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 14px;font-size:13px}
.kv dt{color:var(--ink-3)} .kv dd{margin:0}
.steps{display:flex;gap:0;align-items:center;overflow-x:auto}
.step{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:12.5px;color:var(--ink-3);white-space:nowrap;position:relative}
.step .n{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font:600 11px var(--mono)}
.step.done{color:var(--ink-2)} .step.done .n{background:var(--good);border-color:var(--good);color:#fff}
.step.now{color:var(--accent-deep);font-weight:600} .step.now .n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.step+.step::before{content:"";width:18px;height:1px;background:var(--line-2);margin-right:4px}
.chart{width:100%;height:auto;display:block}
.chart .ax{font:10px var(--mono);fill:var(--ink-3);text-anchor:middle} .chart .lab{text-anchor:start;fill:var(--ink-2)}
.chart .ref{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 4;opacity:.8} .chart .ref-l{text-anchor:end;fill:var(--ink-3)}
.chart .slot{cursor:pointer} .chart .slot .hit{fill:transparent} .chart .slot:hover .hit{fill:color-mix(in srgb,var(--accent) 10%,transparent)}
.gridlines{position:relative}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:1px;background:var(--line-2)}
.timeline li{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:6px 0;font-size:13px}
.timeline .dot{width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);margin:4px 0 0 4px}
.timeline .dot.ai{border-color:var(--warn)} .timeline .dot.cost{border-color:var(--good)}
.timeline .t{color:var(--ink-3);font-size:11.5px;font-family:var(--mono)}
.empty{padding:36px 20px;text-align:center;color:var(--ink-3)}
.empty b{display:block;color:var(--ink-2);font-size:15px;margin-bottom:4px}
.clock{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}
.clock.crit{color:var(--crit)} .clock.warn{color:var(--warn)}
.photo{width:44px;height:44px;border-radius:6px;background:linear-gradient(135deg,var(--surface-2),var(--line-2));display:grid;place-items:center;color:var(--ink-3);font-size:10px;flex:none}
.photo.big{width:100%;aspect-ratio:4/3;height:auto;border-radius:10px;font-size:13px}
.conf{display:inline-flex;align-items:center;gap:6px}
.conf i{display:inline-block;width:56px;height:6px;border-radius:3px;background:var(--surface-2);position:relative;overflow:hidden}
.conf i::after{content:"";position:absolute;inset:0;width:var(--p);background:var(--good)}
.conf.warn i::after{background:var(--warn)} .conf.crit i::after{background:var(--crit)}
.check{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.check input{width:15px;height:15px;accent-color:var(--accent)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:9px;font-weight:500;box-shadow:var(--shadow);opacity:0;transition:.25s;pointer-events:none;z-index:50;display:flex;gap:10px;align-items:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast .ok{color:var(--good)}
.scrim{position:fixed;inset:0;background:rgba(10,20,25,.35);z-index:30;opacity:0;pointer-events:none;transition:.2s}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow);z-index:31;transform:translateX(100%);transition:.25s;display:flex;flex-direction:column}
body.panel-open .scrim{opacity:1;pointer-events:auto} body.panel-open .panel{transform:none}
.panel .ph{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.panel .pb{padding:18px 20px;overflow:auto;flex:1}
.panel .pf{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.radio-list{display:grid;gap:8px}
.radio-list label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.radio-list label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.radio-list input{margin-top:3px;accent-color:var(--accent)}
.radio-list b{display:block;font-weight:600}
.radio-list span{font-size:12.5px;color:var(--ink-2)}
textarea,input[type=text],input[type=number],input[type=password],select.inp{width:100%;font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--line-2);border-radius:7px;padding:8px 10px}
textarea{min-height:70px;resize:vertical}
.drop{border:1.5px dashed var(--line-2);border-radius:12px;padding:30px;text-align:center;color:var(--ink-2);background:var(--surface)}
.drop b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px}
.doc{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:18px;font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--ink-2);min-height:420px}
.doc .hl{background:var(--warn-soft);color:var(--warn);border-radius:3px;padding:0 3px}
.doc .hd{font-weight:600;color:var(--ink);letter-spacing:.05em;margin-bottom:10px}
.editable{background:var(--ground);border:1px solid transparent;border-radius:5px;padding:3px 6px;display:inline-block;min-width:60px}
.editable:hover{border-color:var(--line-2)}
.ai-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:9px;color:var(--ink);font-size:13px}
.ai-note svg{width:16px;height:16px;flex:none;stroke:var(--warn);fill:none;stroke-width:2}
.legend{display:flex;gap:14px;font-size:12px;color:var(--ink-3);align-items:center;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* ---------- tablet surface ---------- */
.tablet-shell{max-width:560px;margin:0 auto;min-height:100vh;background:var(--surface);display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--line)}
.tb-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);gap:10px}
.tb-head .ttl{font:600 22px var(--display);letter-spacing:.02em}
.tb-head .door{font-size:12px;color:var(--ink-3)}
.lang{display:flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.lang button{padding:6px 11px;font:600 12px var(--mono);color:var(--ink-2)}
.lang button.on{background:var(--accent);color:var(--accent-ink)}
.tb-body{padding:16px;display:flex;flex-direction:column;gap:18px;flex:1}
.tb-sec .eyebrow{margin-bottom:8px}
.loadpick{display:grid;gap:8px}
.loadpick button{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;text-align:left;font-size:16px;font-weight:500}
.loadpick button.on{border-color:var(--accent);background:var(--accent-soft)}
.loadpick small{color:var(--ink-3);font-weight:400}
.scanbox{display:flex;gap:10px;align-items:center;border:2px solid var(--accent);border-radius:14px;padding:12px 14px;background:var(--accent-soft)}
.scanbox svg{width:26px;height:26px;stroke:var(--accent-deep);fill:none;stroke-width:2;flex:none}
.scanbox input{flex:1;border:0;background:none;font:600 24px var(--mono);color:var(--ink);outline:0;min-width:0}
.scanbox .hint{font-size:11px;color:var(--ink-2);line-height:1.2;max-width:90px}
.found{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.found .nm{font-weight:600;font-size:15px}
.found .meta{font-size:12.5px;color:var(--ink-3)}
.stepper{display:flex;align-items:center;gap:0;border:1.5px solid var(--line-2);border-radius:14px;overflow:hidden}
.stepper button{width:64px;height:60px;font:600 30px var(--display);color:var(--accent-deep);background:var(--surface-2)}
.stepper output{flex:1;text-align:center;font:600 34px var(--display);font-variant-numeric:tabular-nums}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{display:flex;flex-direction:column;gap:3px;align-items:flex-start;padding:12px 12px 11px;border:1.5px solid var(--line);border-radius:12px;text-align:left;min-height:84px;background:var(--surface)}
.tile .ic{font-size:22px;line-height:1}
.tile .en{font-weight:600;font-size:15px;line-height:1.15;margin-top:4px}
.tile .tr{font-size:12px;color:var(--ink-3);line-height:1.2}
.tile.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.tile.on .en{color:var(--accent-deep)}
.tile.none{grid-column:1/-1;min-height:56px;flex-direction:row;align-items:center;gap:10px}
.tile.none .en{margin:0}
.camera{display:flex;gap:12px;align-items:center}
.camera button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:96px;height:96px;border:1.5px dashed var(--line-2);border-radius:12px;color:var(--ink-2);font-size:12px;font-weight:500}
.camera button svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8}
.camera .req{font-size:12.5px;color:var(--crit);font-weight:500}
.thumbs{display:flex;gap:8px}
.thumbs .photo{width:72px;height:72px;border-radius:10px}
.tb-foot{position:sticky;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);display:flex;gap:10px}
.tb-foot .btn{flex:1;justify-content:center;height:58px;font:600 20px var(--display);letter-spacing:.03em;border-radius:14px}
.tb-foot .btn.ghost{flex:0 0 auto;padding:0 18px}
.tb-badge{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--ground);border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.tb-badge .avatar{width:24px;height:24px;font-size:10px}
.tb-badge .cnt{margin-left:auto;font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- additions for the live app ---------- */
.search{position:relative}
.results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:30;max-height:380px;overflow:auto;padding:6px}
.results a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:7px;color:var(--ink)}
.results a:hover,.results a.sel{background:var(--surface-2)}
.results .t{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);width:84px;flex:none}
.results .s{font-size:12px;color:var(--ink-3);margin-left:auto}
.form{display:grid;gap:12px}
.form label{display:grid;gap:5px;font-size:12.5px;color:var(--ink-2)}
.form label>span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form input[type=date],.form input[type=datetime-local]{width:100%;font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--line-2);border-radius:7px;padding:8px 10px}
img.thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;display:block;background:var(--surface-2)}
img.thumb.big{width:100%;aspect-ratio:4/3;height:auto;border-radius:10px}
.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:10px}
.error{padding:12px 14px;background:var(--crit-soft);color:var(--crit);border-radius:9px;font-size:13px}
.loading{padding:40px;text-align:center;color:var(--ink-3)}
td [contenteditable]{background:var(--ground);border:1px solid transparent;border-radius:5px;padding:3px 6px;display:inline-block;min-width:50px}
td [contenteditable]:focus{border-color:var(--accent);outline:0;background:var(--surface)}
.sticky-foot{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:12px 16px;display:flex;gap:8px;align-items:center;justify-content:flex-end;border-radius:0 0 10px 10px}
.rail .cnt.crit{background:var(--crit-soft);color:var(--crit)}
.toast.err{background:var(--crit);color:#fff}
#stale{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;background:var(--accent);color:var(--accent-ink);padding:10px 18px;border-radius:999px;font-weight:600;box-shadow:var(--shadow)}
.tab-nav{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px}
.tab-nav button{padding:8px 12px;border-bottom:2px solid transparent;color:var(--ink-2);font-weight:500;margin-bottom:-1px}
.tab-nav button.on{color:var(--accent-deep);border-bottom-color:var(--accent)}
.dim{opacity:.55}
td select.inp{width:auto;min-width:96px;padding:4px 6px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- phone and iPad (2026-10-25) ----------
   Desktop (above 1024px) keeps the labelled rail. Below that the rail becomes a "More" sheet behind a bottom tab bar
   (Dashboard, Receiving, Stock, Money, More). Under 640px every table turns into cards, one row each with every cell
   labelled by its column (app.js labelTables), fields are 16px so iOS never zooms, and KPIs sit two across. */
[hidden]{display:none!important}
.card,.grid>*,.tablewrap{min-width:0}
.tabbar,.sheet-backdrop{display:none}
@media (max-width:1024px){
  *{scrollbar-width:none} ::-webkit-scrollbar{display:none;width:0;height:0}
  .shell{grid-template-columns:minmax(0,1fr)}
  .topbar,main{grid-column:1}
  main{padding:16px 14px calc(84px + env(safe-area-inset-bottom,0px))}
  .rail{display:flex;position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;max-height:82vh;overflow-y:auto;z-index:45;border:0;border-top:1px solid var(--line-2);border-radius:18px 18px 0 0;padding:18px 14px calc(16px + env(safe-area-inset-bottom,0px));transform:translateY(105%);transition:transform .22s ease;box-shadow:var(--shadow)}
  .rail::before{content:"";width:38px;height:4px;border-radius:4px;background:var(--line-2);align-self:center;margin:-8px 0 10px;flex:none}
  .rail .brand{display:none}
  .rail-sub{display:flex} .rail a{padding:11px 12px;font-size:15px} .rail-sub a{padding:9px 12px 9px 40px;font-size:14px}
  body.more-open .rail{transform:none}
  .sheet-backdrop{position:fixed;inset:0;z-index:44;background:rgba(10,20,25,.5)}
  body.more-open .sheet-backdrop{display:block}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);padding:4px 4px env(safe-area-inset-bottom,0px)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 0 6px;min-height:52px;color:var(--ink-3);font:600 10.5px var(--body);letter-spacing:.02em}
  .tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar .on{color:var(--accent-deep)}
  .toast,#stale{bottom:calc(76px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px);white-space:normal;text-align:center}
  .sticky-foot{bottom:calc(60px + env(safe-area-inset-bottom,0px))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3,.g-2-1,.g-1-2,.g-3-2{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:15px}
  input,select,textarea,.search input{font-size:16px}
  .topbar{gap:8px;padding-left:12px;padding-right:12px}
  .search{max-width:none} .search kbd{display:none}
  .person{padding:3px;gap:0} .person .who{display:none}
  .person-menu{width:min(300px,calc(100vw - 24px))}
  h1{font-size:24px}
  .g2{grid-template-columns:1fr}
  .kpi .val{font-size:28px}
  .page-head{flex-direction:column;align-items:stretch}
  .page-head .actions{width:100%}
  .kv{grid-template-columns:1fr;gap:2px 0} .kv dt{margin-top:6px}
  .panel{width:100%}
  .btn{min-height:38px}
  /* tables become cards */
  .tablewrap{overflow:visible}
  .tablewrap table,.tablewrap tbody,.tablewrap tfoot{display:block}
  .tablewrap thead{display:none}
  .tablewrap tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .tablewrap tbody tr:last-child{border-bottom:0}
  .tablewrap td{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0;border:0;grid-column:1/-1;min-width:0;text-align:right;overflow-wrap:anywhere}
  .tablewrap td[data-label]::before{content:attr(data-label);font:600 10.5px var(--body);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);text-align:left;flex:none}
  .tablewrap td:empty{display:none}
  .tablewrap td:first-child{justify-content:flex-start;text-align:left;font-weight:600}
  .tablewrap td:first-child::before{display:none}
  .tablewrap tr.span-row td{justify-content:flex-start;text-align:left}
  .tablewrap tbody tr.row:hover td{background:none}
  .tablewrap tbody tr.row:active{background:var(--surface-2)}
}

/* ---------- Konstrukta CRM additions ---------- */
.brand img{width:38px;border-radius:0}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm b{font:800 17px/1 var(--display);letter-spacing:.06em;color:var(--ink)}
.brand .wm span{font-size:8.5px;letter-spacing:.2em;color:var(--accent);font-weight:600;margin-top:4px}
.rail .by{font-size:11px;color:var(--ink-3);padding:8px 10px 0}
h1,h2{letter-spacing:-.01em;font-weight:700}
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
.lane{background:var(--surface-2);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.lane h4{margin:0 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);display:flex;justify-content:space-between}
.lane .tot{font:11px var(--mono);color:var(--ink-3)}
.bcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 10px;color:var(--ink)}
.bcard:hover{border-color:var(--accent)}
.bcard b{display:block;font-weight:600;font-size:13px}
.bcard .m{display:flex;justify-content:space-between;gap:6px;font-size:11.5px;color:var(--ink-3);margin-top:4px}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line)}
.checklist li:last-child{border-bottom:0}
.checklist li.done span{text-decoration:line-through;color:var(--ink-3)}
.folder{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.folder code{font:12px var(--mono);background:var(--surface-2);padding:3px 7px;border-radius:5px}
.stack{display:grid;gap:16px;align-content:start}
.health{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ink-3)}
.health.Green{background:var(--good)} .health.Yellow{background:var(--warn)} .health.Red{background:var(--crit)}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}
td.money{white-space:nowrap}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.day{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:180px}
.day.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.day h4{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.day .ev{border-left:3px solid var(--accent);padding:2px 0 2px 8px;font-size:12.5px}
.day .it{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:12.5px;color:var(--ink)}
@media (max-width:1100px){.week{grid-template-columns:1fr}.day{min-height:0}}
/* Assistant: suggested text, and small section headings inside a card */
.draft{background:var(--surface-2);border-radius:8px;padding:10px 12px;display:grid;gap:8px;justify-items:start;font-size:13px}
.card h4{margin:12px 0 6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
/* Part 2: job cost, inbox, field, schedule, reports */
.note{background:var(--warn-soft);color:var(--ink);border-radius:8px;padding:8px 12px;font-size:13px}
td.neg,.crit{color:var(--crit)}
tfoot td{border-top:1px solid var(--line-2)}
details>summary{cursor:pointer}
.seg{display:inline-flex;gap:2px}
.seg label{cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:6px;background:var(--surface-2);font-size:12.5px}
.seg input:checked+span{background:var(--accent);color:var(--accent-ink)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block}
.docs-up{align-items:center}
.inbox{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:16px;align-items:start}
.threads{max-height:calc(100vh - 230px);overflow:auto}
.thread{display:grid;gap:3px;padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink)}
.thread .t1{display:flex;gap:6px;align-items:center}
.thread .t1 .small{margin-left:auto;white-space:nowrap}
.thread.on{background:var(--accent-soft)}
.thread.unread b{font-weight:800}
.thread:not(.unread) b{font-weight:500}
.msgs{display:grid;gap:10px;padding:14px;max-height:52vh;overflow:auto}
.msg{max-width:85%;padding:10px 12px;border-radius:10px;background:var(--surface-2)}
.msg.out{justify-self:end;background:var(--accent-soft)}
.reply{display:grid;gap:8px;border-top:1px solid var(--line)}
.field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.btn.big{padding:14px;font-size:15px;justify-content:center;width:100%}
.gantt-wrap{overflow-x:auto}
.gantt{display:grid;grid-template-columns:minmax(180px,220px) repeat(var(--days),minmax(22px,1fr));min-width:820px;font-size:12px}
.g-head,.g-row{display:contents}
.g-head span{padding:6px 2px;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--ink-2)}
.g-head span.mon{border-left:1px solid var(--line)}
.g-head span.today{background:var(--accent-soft)}
.g-job{grid-column:1/-1;padding:10px 12px 4px;font-weight:700}
.g-row>span:first-child{padding:4px 12px;grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-bar{margin:3px 0;border-radius:5px;background:var(--line-2);color:var(--ink);padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;grid-row:auto}
.g-bar.acc{background:var(--accent);color:var(--accent-ink)}
.g-bar.good{background:var(--good-soft);color:var(--good)}
.g-bar.crit,.g-bar.clash{background:var(--crit);color:#fff}
.cash{display:grid;gap:8px}
.cw{display:grid;grid-template-columns:60px 1fr 150px;gap:8px;align-items:center}
.cw .bars{display:grid;gap:2px}
.cw .bars i{display:block;height:7px;border-radius:3px;min-width:1px}
.cw .bars i.in{background:var(--good)}
.cw .bars i.out{background:var(--crit)}
.cw .r{text-align:right}
@media (max-width:900px){
  .inbox{grid-template-columns:1fr}
  .inbox.has-thread .threads{display:none}
  .field-grid{grid-template-columns:1fr}
  .cw{grid-template-columns:52px 1fr 110px}
}
.btn.big{display:flex;align-items:center;gap:8px}
.btn.big svg{width:18px;height:18px;flex:none}
.hrs{display:grid;grid-template-columns:84px 1fr auto;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}