:root{
    --bg:#0F1319;
    --surface:#171D26;
    --surface2:#1E2631;
    --border:#2A3341;
    --text:#E8ECF1;
    --muted:#8A97AA;
    --accent:#4C8DFF;
    --accent-dim:#294169;
    --good:#3DDC97;
    --good-dim:#1E3D30;
    --warn:#F5A623;
    --warn-dim:#4A3714;
    --bad:#FF5C5C;
    --bad-dim:#4A2020;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);}
  body{
    font-family:'Sora',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    padding-bottom:24px;
  }
  .mono{font-family:'IBM Plex Mono',monospace;}
  #app{max-width:520px;margin:0 auto;padding:0 14px;}

  /* header */
  .hdr{display:flex;align-items:center;gap:10px;padding:18px 2px 14px;}
  .hdr-mark{
    width:38px;height:38px;border-radius:10px;
    background:linear-gradient(155deg,var(--accent),#2c5fc7);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .hdr-title{font-size:17px;font-weight:700;letter-spacing:.2px;}
  .hdr-sub{font-size:12px;color:var(--muted);margin-top:1px;}

  /* tabs */
  .tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 14px;scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{
    flex:0 0 auto;padding:8px 14px;border-radius:20px;font-size:13px;font-weight:600;
    color:var(--muted);background:var(--surface);border:1px solid var(--border);
    cursor:pointer;white-space:nowrap;transition:.15s;
  }
  .tab.active{background:var(--accent);color:#fff;border-color:var(--accent);}

  /* generic */
  .card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;}
  .section-title{font-size:13px;font-weight:700;color:var(--muted);text-transform:none;margin:22px 2px 10px;letter-spacing:.2px;}
  .section-title:first-child{margin-top:2px;}
  .row{display:flex;justify-content:space-between;align-items:center;}
  .muted{color:var(--muted);}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    background:var(--accent);color:#fff;border:none;border-radius:10px;
    padding:11px 16px;font-size:14px;font-weight:600;font-family:inherit;
    cursor:pointer;transition:.15s;
  }
  .btn:active{transform:scale(.97);}
  .btn.secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border);}
  .btn.ghost{background:transparent;color:var(--accent);padding:8px 10px;}
  .btn.danger{background:var(--bad-dim);color:var(--bad);}
  .btn.block{width:100%;}
  .btn:disabled{opacity:.4;cursor:not-allowed;}

  input,select,textarea{
    width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);
    border-radius:9px;padding:10px 11px;font-size:14px;font-family:inherit;margin-top:5px;
  }
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);}
  label{font-size:12px;color:var(--muted);font-weight:600;}
  .field{margin-bottom:12px;}
  .field-row{display:flex;gap:10px;}
  .field-row .field{flex:1;}

  /* dashboard stat cards */
  .stat-scroll{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none;}
  .stat-scroll::-webkit-scrollbar{display:none;}
  .stat{
    flex:0 0 148px;background:var(--surface);border:1px solid var(--border);border-radius:14px;
    padding:14px;
  }
  .stat .val{font-size:21px;font-weight:800;margin-top:6px;}
  .stat .lbl{font-size:11.5px;color:var(--muted);font-weight:600;}
  .stat.accentline{border-top:3px solid var(--accent);}
  .stat.warnline{border-top:3px solid var(--warn);}
  .stat.goodline{border-top:3px solid var(--good);}
  .stat.badline{border-top:3px solid var(--bad);}

  /* list items */
  .item{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 14px;margin-bottom:9px;}
  .item-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
  .item-name{font-weight:700;font-size:14.5px;}
  .item-meta{font-size:12px;color:var(--muted);margin-top:2px;}
  .tag{
    display:inline-block;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;
    background:var(--surface2);color:var(--muted);margin-top:6px;
  }
  .tag.blue{background:var(--accent-dim);color:#9CBBFF;}
  .tag.good{background:var(--good-dim);color:var(--good);}
  .tag.warn{background:var(--warn-dim);color:var(--warn);}
  .tag.bad{background:var(--bad-dim);color:var(--bad);}
  .stock-num{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px;}
  .item-actions{display:flex;gap:8px;margin-top:10px;}
  .item-actions .btn{padding:7px 12px;font-size:12.5px;flex:1;}

  .empty{text-align:center;color:var(--muted);font-size:13.5px;padding:34px 10px;}
  .empty svg{opacity:.35;margin-bottom:10px;}

  .fab-form{display:none;margin-bottom:14px;}
  .fab-form.open{display:block;}

  .toast{
    position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
    background:var(--surface2);border:1px solid var(--border);color:var(--text);
    padding:10px 18px;border-radius:30px;font-size:13px;font-weight:600;
    box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:999;opacity:0;transition:.25s;pointer-events:none;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);}

  .confirm-box{
    background:var(--bad-dim);border:1px solid var(--bad);border-radius:10px;padding:10px;
    margin-top:8px;font-size:12.5px;
  }
  .confirm-box .row{margin-top:8px;gap:8px;}
  .confirm-box .btn{flex:1;padding:7px;font-size:12.5px;}

  .loading{display:flex;align-items:center;justify-content:center;padding:60px 0;color:var(--muted);font-size:13px;}
  select option{background:var(--surface2);}