:root{
  --bg:#ffffff;
  --card:#ffffff;
  --muted:#606b85;
  --text:#0e0f11;
  --accent:#0d6efd;
  --ok:#2ecc71;
  --danger:#dc3545;
  --row:#fafbff;
  --select:#e6f3ff;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif}
.container{max-width:95%;margin:24px auto;padding:0 16px}
.card{background:var(--card);border:1px solid #e3e8f0;border-radius:14px;box-shadow:0 4px 20px #0b1a2f0f}

/* Header / toolbar */
.header{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #edf1f7}
.header .title{font-weight:700}
.header .right{display:flex;align-items:center;gap:8px}
.badge{padding:4px 8px;border-radius:999px;background:#f2f6ff;color:var(--muted);font-size:12px;border:1px solid #e1e9ff}

/* Toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-bottom:1px solid #edf1f7;position:sticky;top:0;background:var(--card);z-index:5}
.toolbar .row{display:flex;gap:6px;align-items:center}
.toolbar .spacer{flex:1}
button,input,select,.btn{background:#f6f8fc;color:var(--text);border:1px solid #d5d9e3;border-radius:12px;padding:10px 14px;cursor:pointer}
button:hover,.btn:hover{border-color:#b8c5e3}
.btn-primary{background:#eaf2ff;border-color:#cfe0ff}
.btn-primary:hover{border-color:#9fbaf5}
.btn-danger{background:#fff1f1;border-color:#ffd2d2}
.btn-danger:hover{border-color:#f5a3a3}
.btn-ok{background:#eafaf1;border-color:#cceedd}
input[type="text"],input[type="password"],select{width:100%}

/* Tabs */
.tabs{display:flex;gap:8px;padding:8px 12px;border-bottom:1px solid #edf1f7}
.tab{padding:10px 14px;border:1px solid #d5d9e3;border-radius:12px;background:#f6f8fc;cursor:pointer}
.tab.active{border-color:#b8c5e3;box-shadow:inset 0 0 0 1px #b8c5e3}
.section{display:none}
.section.active{display:block}

/* Table */
.table-wrap{overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{position:sticky;top:0;background:#f2f4f8;padding:10px;border-bottom:1px solid #e4e7ee;text-align:left;font-weight:600;z-index:1}
tbody td{padding:12px;border-bottom:1px solid #eef2f7;background:var(--row);vertical-align:top}
tbody tr:hover td{background:#eef3ff}
td.num{text-align:right;white-space:nowrap}
.row-check{width:40px;text-align:center}

/* Colors */
td.total-green{background:rgb(0 243 103)}
td.clr-blue  { background: rgba(  0,102,255,.08) !important; }
td.clr-yellow{ background: rgb(237 215 62) !important; }
td.clr-red   { background: rgb(243, 5, 5 / 95%) !important; }
td.total-selected{background:var(--select)!important}

/* Footer */
tfoot td{padding:10px;background:#f2f4f8;border-top:1px solid #e4e7ee}

/* Login */
.login{max-width:360px;margin:80px auto}
.note{color:var(--muted);font-size:12px;margin-top:6px}
label{display:block;margin:8px 0 4px}
hr.sep{border:0;border-top:1px solid #eef2f7;margin:12px 0}

/* Layout helpers */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-1{display:grid;grid-template-columns:1fr;gap:8px}
.small{font-size:12px;color:var(--muted)}
.viewing-badge{padding:4px 8px;border-radius:999px;background:#eef5ff;border:1px solid #b6d3ff;color:#1b4fbf;font-size:12px}

/* Bottom-sheet */
.mobile-sheet{position:fixed;left:0;right:0;bottom:-100%;background:#ffffff;border-top-left-radius:16px;border-top-right-radius:16px;box-shadow:0 -10px 30px #0b1a2f1a;transition:bottom .25s ease;padding-bottom:env(safe-area-inset-bottom, 12px);z-index:9999}
.mobile-sheet.open{bottom:0}
.sheet-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #edf1f7}
.sheet-title{font-weight:700}
.sheet-body{padding:12px 16px;max-height:65vh;overflow:auto}
.sheet-grid{display:grid;grid-template-columns:1fr;gap:10px}
.sheet-actions{display:flex;gap:8px;position:sticky;bottom:0;background:#ffffff;padding:12px 16px;border-top:1px solid #edf1f7}

/* Color pills */
.color-row{display:flex;gap:8px;flex-wrap:wrap}
.color-pill{width:34px;height:34px;border-radius:999px;border:1px solid #d5d9e3;background:#f6f8fc}
.pill-blue{background:#eaf2ff;border-color:#cfe0ff}
.pill-yellow{background:#fff7d6;border-color:#ffeaa3}
.pill-red{background:#ffe9ea;border-color:#ffd2d2}
.pill-green{background:rgba(46,204,113,.15);border-color:#bfead1}

/* Mobile accordion row */
.mobile-details-row{display:none}
.mobile-details{padding:10px 12px;background:#fff;border:1px dashed #e0e6f0;border-radius:10px}
.mobile-details dl{display:grid;grid-template-columns:110px 1fr;gap:6px 10px;margin:0}
.mobile-details dt{color:#66708a}
.mobile-details dd{margin:0}

/* Hide many cols on mobile; keep only Product, TOTAL, Mark */
.hide-mobile{display:table-cell}
@media (max-width: 768px){
  body{font-size:16px}
  .container{max-width:100%;margin:8px auto;padding:0 8px}
  .toolbar{gap:6px}
  input, select, button{padding:12px 14px;border-radius:14px}

  /* hide everything except product, total, mark */
  .hide-mobile{display:none !important}
  .col-check{display:none !important}
  .col-product, .col-total, .col-mark{display:table-cell !important}
  thead .col-edit{display:none !important}

  /* make td un-editable on mobile (используем bottom-sheet) */
  td[contenteditable="true"]{pointer-events:none}
}