:root {
  color-scheme: dark;
  --bg:#0c0e12; --panel:#151820; --panel2:#1c202a; --line:#2b303c;
  --text:#f2f4f8; --muted:#979eaa; --accent:#ee5c2b; --accent2:#ff845b;
  --ok:#5bd39b; --warn:#f2bd56; --danger:#ff6b76;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--text) }
button,input,select,textarea { font:inherit }
button { color:inherit; border:1px solid var(--line); background:var(--panel2); border-radius:9px; padding:.65rem .9rem; cursor:pointer }
button:hover { border-color:#5b6372 }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible { outline:3px solid #ff9c7a; outline-offset:2px }
button.primary { background:var(--accent); border-color:var(--accent); font-weight:700 }
button.primary:hover { background:var(--accent2) }
.button-link { display:inline-block; color:var(--text); text-decoration:none; border:1px solid var(--line); background:var(--panel2); border-radius:9px; padding:.65rem .9rem }
.skip { position:absolute; left:-999px; top:1rem; z-index:10; background:white; color:black; padding:.7rem }
.skip:focus { left:1rem }
.shell { display:grid; grid-template-columns:250px 1fr; min-height:100vh }
aside { padding:1.25rem; background:#101218; border-right:1px solid var(--line); position:sticky; top:0; height:100vh; overflow:auto }
.brand { display:grid; gap:.45rem; margin-bottom:1.4rem }
.brand img { display:block; width:100%; height:auto; border-radius:10px; background:white }
.brand strong { padding-left:.15rem }
button.danger { color:#fff; background:#8f2630; border-color:#b83b47 }
button.danger:hover { background:#ad303c; border-color:#d45460 }
button.danger:disabled { opacity:.45; cursor:not-allowed }
nav { display:grid; gap:.25rem }
nav button { text-align:left; border-color:transparent; background:transparent; color:var(--muted); padding:.62rem .7rem }
nav button.active,nav button:hover { color:var(--text); background:var(--panel2) }
.connection { margin-top:1.5rem; color:var(--muted); font-size:.82rem }
.connection.online { color:var(--ok) }.connection.offline,.connection.auth-required { color:var(--warn) }
main { padding:2.2rem clamp(1rem,4vw,4rem); min-width:0 }
header { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:2rem }
.header-actions{display:flex;align-items:center;gap:.7rem}.header-actions input{min-width:min(34vw,360px)}
.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;padding:1rem}.action-grid button{display:grid;gap:.25rem;text-align:left}.action-grid strong{font-size:1.6rem;color:var(--accent2)}.action-grid span{color:var(--muted)}
h1 { font-size:clamp(1.7rem,4vw,2.6rem); margin:.15rem 0 }
.eyebrow { color:var(--accent2); text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; font-weight:800; margin:0 }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem }
.card { background:linear-gradient(145deg,var(--panel),#12151b); border:1px solid var(--line); border-radius:14px; padding:1.1rem }
.card p { margin:0;color:var(--muted);font-size:.85rem }.card strong { display:block;font-size:1.7rem;margin-top:.45rem }
.panel { margin-top:1.4rem; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden }
.panel-head { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.1rem; border-bottom:1px solid var(--line) }
.panel-head h2 { margin:0;font-size:1rem }
.table-wrap { overflow:auto }
table { width:100%; border-collapse:collapse }
th,td { text-align:left; padding:.82rem 1rem; border-bottom:1px solid var(--line); white-space:nowrap }
th { color:var(--muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.07em }
td { font-size:.9rem } tr:last-child td { border-bottom:0 }
.empty { padding:3rem 1rem; text-align:center; color:var(--muted) }
.badge { display:inline-block; border-radius:999px; padding:.25rem .5rem; background:#29303b; font-size:.75rem }
.money { font-variant-numeric:tabular-nums }
dialog { width:min(600px,calc(100% - 2rem)); background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:16px; padding:0; box-shadow:0 25px 80px #000b }
dialog::backdrop { background:#000a; backdrop-filter:blur(4px) }
form { padding:1.2rem }.dialog-head,.actions { display:flex; justify-content:space-between; align-items:center; gap:.8rem }
.dialog-head h2 { margin:0 }.icon { font-size:1.5rem;line-height:1;padding:.35rem .55rem }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.3rem 0 }
label { display:grid; gap:.38rem; color:var(--muted); font-size:.82rem }
label.full { grid-column:1/-1 }
input,select,textarea { width:100%; border:1px solid var(--line); border-radius:8px; padding:.7rem; background:#0e1117; color:var(--text) }
textarea { min-height:90px; resize:vertical }
.actions { justify-content:flex-end; margin-top:1rem }.error { color:var(--danger); min-height:1.2rem }
.loading { color:var(--muted); padding:3rem 0 }
.backup-actions { display:flex; gap:.8rem; flex-wrap:wrap; padding:1rem }
.studio-panel { margin-top:1.4rem; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#f4f5f7 }
.studio-frame { display:block; width:100%; height:calc(100vh - 10rem); min-height:760px; border:0; background:#f4f5f7 }
@media (max-width:760px) {
  .shell { grid-template-columns:1fr }
  aside { position:sticky; height:auto; z-index:3; padding:.75rem; border-right:0; border-bottom:1px solid var(--line) }
  .brand { display:flex; align-items:center; margin:0 0 .6rem }.brand img { width:120px }.brand strong { font-size:.9rem }
  nav { display:flex; overflow:auto }.connection { position:absolute;right:.8rem;top:.7rem;margin:0;font-size:.72rem }
  main { padding:1.25rem 1rem 5rem }.fields { grid-template-columns:1fr } label.full { grid-column:auto }
  header { align-items:stretch;flex-direction:column }.header-actions{flex-wrap:wrap}.header-actions input{min-width:0;flex:1} th,td { padding:.7rem }
  .studio-frame { height:calc(100vh - 12rem); min-height:680px }
}
.mobile-workspace{max-width:900px}.mobile-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;padding:1rem;align-items:end}.mobile-controls label{min-width:0}.mobile-controls button,.photo-button{min-height:48px}.photo-button{display:flex;align-items:center;justify-content:center;color:var(--text);border:1px solid var(--line);background:var(--panel2);border-radius:9px;padding:.65rem .9rem;cursor:pointer}.mobile-scan video{display:block;width:100%;max-height:45vh;object-fit:cover;border-radius:12px;grid-column:1/-1;background:#000}.mobile-scan video[hidden]{display:none}.scan-status{margin:0;padding:0 1rem 1rem;color:var(--ok)}.mobile-orders{display:grid;gap:1rem;padding:1rem}.mobile-order{border:1px solid var(--line);border-radius:12px;padding:1rem;background:var(--panel2)}.mobile-order h3,.mobile-order p{margin:.2rem 0 .7rem}.pack-line{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-top:1px solid var(--line)}.mobile-order>button{width:100%;margin-top:.8rem}.mobile-order>button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:760px){.mobile-controls{grid-template-columns:1fr}.mobile-workspace .panel{margin-top:1rem}.mobile-workspace button,.mobile-workspace input,.mobile-workspace select,.photo-button{font-size:1rem}}
@media (prefers-reduced-motion:no-preference) { .card,.panel { animation:rise .25s ease-out } @keyframes rise { from { opacity:0;transform:translateY(6px) } } }
.product-thumb{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--border);background:#fff;display:block}
.product-group td{background:var(--panel2);color:var(--text);font-weight:600}.product-toggle{appearance:none;border:0;background:transparent;color:var(--text);font:inherit;font-weight:700;padding:0;text-align:left}.product-toggle:hover{text-decoration:underline}.product-variant td{background:#11141b;color:var(--text)}.product-variant:hover td{background:#181c25}.product-variant td:nth-child(2),.product-variant td:nth-child(3){padding-left:1.4rem}.product-variant code{color:var(--text);font-size:.82rem}.product-variant button{color:var(--text);background:var(--panel2)}
.expense-items-editor{grid-column:1/-1;border:1px solid var(--border,#343b45);border-radius:12px;padding:12px;min-width:0}.expense-purpose{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:10px;align-items:end;margin:12px 0;padding:14px;border:2px solid var(--accent,#d4312f);border-radius:10px;background:rgba(212,49,47,.08)}.expense-purpose small{grid-column:1/-1}.expense-item-row{display:grid;grid-template-columns:minmax(180px,2fr) repeat(5,minmax(105px,1fr)) auto;gap:8px;align-items:end;padding:10px 0;border-top:1px solid var(--border,#343b45)}.expense-item-row:first-child{border-top:0}.expense-item-row label{min-width:0}.expense-item-row input,.expense-item-row select,.expense-purpose select{width:100%}@media(max-width:850px){.expense-purpose,.expense-item-row{grid-template-columns:1fr 1fr}.expense-purpose label,.expense-purpose small,.expense-item-row label:first-child{grid-column:1/-1}.expense-purpose button,.expense-item-row .danger{grid-column:1/-1}}