:root { --bg:#f4f6f8; --card:#fff; --ink:#1c2a35; --mute:#667785; --line:#d9e0e6; --brand:#1f5f8b; --brand-ink:#fff; --warn:#b26a00; --warn-bg:#fff4dc; --err:#b3261e; --err-bg:#fde8e6; --ok:#1e7a46; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#12181d; --card:#1b242b; --ink:#e6edf2; --mute:#9aabb8; --line:#2c3943; --brand:#5aa9dd; --brand-ink:#0b1720; --warn:#f2b84b; --warn-bg:#3a2e12; --err:#ff8a80; --err-bg:#3d1b18; --ok:#6fd49a; color-scheme:dark; } }
:root[data-theme="dark"] { --bg:#12181d; --card:#1b242b; --ink:#e6edf2; --mute:#9aabb8; --line:#2c3943; --brand:#5aa9dd; --brand-ink:#0b1720; --warn:#f2b84b; --warn-bg:#3a2e12; --err:#ff8a80; --err-bg:#3d1b18; --ok:#6fd49a; color-scheme:dark; }
* { box-sizing: border-box; }
body { margin:0; padding-left:max(0px, env(safe-area-inset-left, 0px)); padding-right:max(0px, env(safe-area-inset-right, 0px)); background:var(--bg); color:var(--ink); font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; padding-bottom:72px; }
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:30; background:var(--card); }
header { position:sticky; top:env(safe-area-inset-top, 0px); z-index:10; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; color:var(--brand); flex:1 1 auto; }
nav { display:flex; gap:4px; }
nav button, .lang { border:1px solid var(--line); background:transparent; color:var(--ink); padding:8px 12px; border-radius:8px; font:inherit; cursor:pointer; }
nav button.on { background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.tools { display:flex; align-items:center; gap:8px; } .net { color:var(--warn); font-size:13px; }
main { max-width:1180px; margin:0 auto; padding-block:16px; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
.layout { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width: 960px) { .layout { grid-template-columns: minmax(0,1fr) 380px; align-items:start; } .side { position:sticky; top:calc(72px + env(safe-area-inset-top, 0px)); } body { padding-bottom:0; } .bar { display:none !important; } }
.form { display:grid; gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.card h2 { margin:0 0 10px; font-size:15px; text-transform:uppercase; letter-spacing:.04em; color:var(--mute); }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
@media (min-width: 560px) { .grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.grid.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width: 559px) { .g4 .field label { font-size:12px; } .g4 input, .g4 select { padding-left:8px; padding-right:8px; } }
.chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } button.mini { min-height:36px; padding:4px 12px; }
.field { display:flex; flex-direction:column; gap:4px; min-width:0; } .field.wide, .hint.wide { grid-column:1/-1; }
label { font-size:13px; color:var(--mute); }
input, select { width:100%; min-height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font:inherit; }
input:focus, select:focus { outline:2px solid var(--brand); outline-offset:1px; }
.check { display:flex; align-items:center; gap:10px; min-height:44px; color:var(--ink); font-size:16px; } .check input { width:22px; min-height:22px; }
.sub { font-size:12px; color:var(--mute); } .sub.warn { color:var(--warn); } .hint { font-size:12px; color:var(--mute); margin-top:6px; }
.chip { align-self:end; display:inline-block; padding:4px 10px; border-radius:999px; background:var(--warn-bg); color:var(--warn); font-size:13px; width:max-content; }
.result .big { font-size:36px; font-weight:700; line-height:1.1; color:var(--brand); } .result .big span { font-size:16px; font-weight:400; color:var(--mute); }
.result h3 { margin:16px 0 6px; font-size:14px; color:var(--mute); text-transform:uppercase; letter-spacing:.04em; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed var(--line); } .kv.sm { font-size:14px; color:var(--mute); }
.note { margin:8px 0; padding:8px 10px; border-radius:8px; font-size:14px; } .note.warn { background:var(--warn-bg); color:var(--warn); } .note.err { background:var(--err-bg); color:var(--err); }
table { width:100%; border-collapse:collapse; font-size:14px; } th { text-align:left; font-weight:500; color:var(--mute); } td, th { padding:5px 0; border-bottom:1px solid var(--line); } .n { text-align:right; font-variant-numeric:tabular-nums; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
button { min-height:44px; padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); font:inherit; cursor:pointer; }
button.primary { background:var(--brand); color:var(--brand-ink); border-color:var(--brand); font-weight:600; } button.danger { color:var(--err); } button:disabled { opacity:.5; cursor:not-allowed; }
.bar { position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; justify-content:space-between; align-items:center; padding:10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background:var(--card); border-top:1px solid var(--line); box-shadow:0 -2px 8px rgba(0,0,0,.08); }
.bar b { font-size:18px; color:var(--brand); } .bar a { font-size:22px; text-decoration:none; color:var(--brand); padding:4px 12px; }
.saved { display:grid; gap:12px; max-width:760px; } .item { display:grid; gap:6px; } .row { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:8px; z-index:30; }
.grid > .s2 { grid-column:span 2; } .grid > .s3 { grid-column:span 3; } .grid > .s4 { grid-column:1/-1; }
@media (max-width: 559px) { .grid > .m2 { grid-column:span 2; } .grid > .m4 { grid-column:1/-1; } }
.g4 > .field { justify-content: flex-end; }
.grid.g12 { grid-template-columns:repeat(12,minmax(0,1fr)); }
.g12 > .field { justify-content:flex-end; }
.grid > .c2 { grid-column:span 2; } .grid > .c3 { grid-column:span 3; } .grid > .c6 { grid-column:span 6; } .grid > .c12 { grid-column:1/-1; }
@media (max-width: 559px) { .grid > .mc6 { grid-column:span 6; } .grid > .mc12 { grid-column:1/-1; } .grid > .c6 { grid-column:1/-1; } .g12 .field label { font-size:12px; } .g12 input, .g12 select { padding-left:8px; padding-right:8px; } }
.formcol { display:grid; gap:16px; min-width:0; align-content:start; }
fieldset.form { border:0; padding:0; margin:0; min-width:0; }
fieldset.form:disabled { opacity:.85; }
.badge { display:inline-block; padding:2px 10px; border-radius:999px; font-size:13px; background:var(--bg); border:1px solid var(--line); color:var(--mute); white-space:nowrap; }
.badge.st-pending { background:var(--warn-bg); color:var(--warn); border-color:transparent; } .badge.st-approved { background:#dff3e4; color:#1b6b34; border-color:transparent; }
.badge.st-returned { background:#fde2e0; color:#a12b22; border-color:transparent; } .badge.st-archive { color:var(--mute); }
:root[data-theme="dark"] .badge.st-approved { background:#173a24; color:#8fdca6; } :root[data-theme="dark"] .badge.st-returned { background:#44201d; color:#ffb4ab; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge.st-approved { background:#173a24; color:#8fdca6; } :root:not([data-theme="light"]) .badge.st-returned { background:#44201d; color:#ffb4ab; } }
.statusbox { display:grid; gap:8px; } .statusbox textarea { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font:inherit; }
.statusbox .actions { margin-top:0; } .statusbox details summary { cursor:pointer; color:var(--mute); font-size:13px; min-height:28px; }
.who { font-size:13px; color:var(--mute); } button.mini.on { background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.login { max-width:380px; margin:8vh auto 0; display:grid; gap:12px; } .login h2 { margin:0; }
.saved input[type=search] { width:100%; }
@media (max-width:559px) { .who { display:none; } }

.refrow{display:grid;grid-template-columns:1fr 110px 60px;gap:8px;align-items:center;padding:3px 0;border-bottom:1px solid var(--line,#e5e5e5)}
.refrow input{width:100%}.refrow input.chg{background:#fff6d6}.refbody{margin-top:8px}details>summary{cursor:pointer;font-weight:600}

.barbtn { display:flex; align-items:center; gap:4px; } .barbtn button { min-height:40px; }
@media (max-width: 719px) {
  header { gap:6px 8px; padding-top:8px; padding-bottom:6px; }
  .brand { font-size:15px; flex:1 1 0; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; order:1; }
  .tools { order:2; gap:6px; } .tools .who { display:none; }
  .lang { padding:6px 10px; min-height:36px; font-size:14px; }
  nav { order:3; flex:1 0 100%; overflow-x:auto; scrollbar-width:none; gap:6px; margin:0 -16px; padding:0 16px 4px; -webkit-overflow-scrolling:touch; }
  nav::-webkit-scrollbar { display:none; }
  nav button { flex:0 0 auto; min-height:36px; padding:6px 14px; font-size:15px; border-radius:18px; white-space:nowrap; }
  main { padding-block:10px; } .layout, .form, .formcol { gap:10px; }
  .card { padding:12px 12px; border-radius:14px; } .card h2 { font-size:12px; margin-bottom:8px; }
  .grid { gap:8px 10px; } input, select { min-height:44px; }
  .field label, label { font-size:12px; }
  .result .big { font-size:32px; }
  .statusbox .row { align-items:center; }
  .refrow { grid-template-columns:1fr 96px 48px; }
}
@media (max-width: 719px) { .bar > div:first-child { white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; } .bar > div:first-child span { font-size:13px; color:var(--mute); } .bar b { font-size:17px; } }
.card > .row { margin-top:8px; align-items:center; }
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.reft{border-collapse:collapse;font-size:14px;min-width:100%}.reft th,.reft td{padding:4px 6px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left}.reft th.n,.reft td.n{text-align:right}
input.cell{width:84px;min-height:36px;padding:4px 8px;text-align:right}.refcap{margin-top:8px;min-height:20px}
.saved > *, .card, details { min-width:0; } .reft td:has(input.cell) { text-align:right; }

/* CRM */
.crm { display:grid; gap:12px; min-width:0; } .crm .tblwrap { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:4px 8px; }
.fg { grid-template-columns:repeat(4,minmax(0,1fr)); } .fg .s2 { grid-column:span 2; }
@media (max-width: 959px) { .fg { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.crmt th.sortable { cursor:pointer; user-select:none; } .crmt tr.clk { cursor:pointer; } .crmt tr.clk:hover td { background:var(--bg); } .crmt td { white-space:normal; vertical-align:top; padding:8px 6px; }
.cards { display:none; gap:10px; } .clk { cursor:pointer; }
@media (max-width: 719px) { .desk { display:none; } .cards { display:grid; } .fg { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.filters .actions { align-items:center; margin-top:10px; } .remrow { padding:6px 0; border-bottom:1px dashed var(--line); gap:8px; align-items:center; }
.contact { padding:10px 0; border-bottom:1px dashed var(--line); } .contact.add { border-bottom:0; }
.evform textarea, .head textarea, textarea { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font:inherit; }
.evt { padding:10px 0; border-bottom:1px dashed var(--line); display:grid; gap:4px; } .evtext { white-space:pre-wrap; } .cardpage { max-width:860px; }
button.mini.danger { color:var(--err); }
.remrow a { color:var(--ink); text-decoration:none; }

.dupl { display:grid; gap:8px; margin-top:8px; } .dupc { display:grid; grid-template-columns:72px 1fr 82px; gap:8px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:10px; }
.dupk, .dupm { display:grid; justify-items:center; gap:2px; } .dupk input, .dupm input { width:22px; min-height:22px; } .dupinfo { min-width:0; overflow-wrap:anywhere; }
.chip.strong { background:var(--err-bg); color:var(--err); }