:root{
    --bg:#1b1611;
    --panel:#241d16;
    --panel-2:#2c2319;
    --line:rgba(240,230,214,0.10);
    --line-strong:rgba(240,230,214,0.20);
    --text:#f1e8d8;
    --text-dim:#b7a992;
    --text-faint:#8a7c66;
    --copper:#c9803f;
    --copper-bright:#e0995a;
    --green:#7c9a63;
    --red:#c1544a;
    --amber:#d3a24a;
    --radius:10px;
    --shadow:0 8px 24px rgba(0,0,0,0.35);
  }
  *{box-sizing:border-box;}
  body{margin:0;background:
      radial-gradient(1200px 600px at 85% -10%, rgba(201,128,63,0.10), transparent),
      var(--bg);
    color:var(--text); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;}
  .mono{font-family:'JetBrains Mono',monospace;}
  h1,h2,h3,.display{font-family:'Fraunces',serif;}
  #app{display:flex; min-height:100vh;}

  /* Sidebar */
  .sidebar{width:220px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--line);
    padding:22px 14px; display:flex; flex-direction:column; gap:4px;}
  .brand{padding:4px 8px 20px 8px;}
  .brand .name{font-family:'Fraunces',serif; font-weight:700; font-size:19px; letter-spacing:0.3px; color:var(--copper-bright);}
  .brand .sub{font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:1.5px; margin-top:2px;}
  .nav-btn{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; border:none;
    background:transparent; color:var(--text-dim); font-size:14px; font-weight:500; cursor:pointer; text-align:left; width:100%;
    transition:background .15s, color .15s;}
  .nav-btn:hover{background:var(--panel-2); color:var(--text);}
  .nav-btn.active{background:linear-gradient(90deg, rgba(201,128,63,0.18), rgba(201,128,63,0.04)); color:var(--copper-bright); border-left:2px solid var(--copper);}
  .nav-dot{width:7px; height:7px; border-radius:50%; background:var(--text-faint); flex-shrink:0;}
  .nav-btn.active .nav-dot{background:var(--copper-bright);}
  .nav-badge{margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10px; background:var(--red); color:#fff; padding:1px 6px; border-radius:20px;}
  .sidebar-foot{margin-top:auto; padding:10px 8px; font-size:11px; color:var(--text-faint); border-top:1px solid var(--line); padding-top:14px;}
  .user-field{padding:0 8px 14px 8px;}
  .user-field label{display:block; font-size:10px; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-faint); margin-bottom:4px;}
  .user-field input{width:100%; background:var(--bg); border:1px solid var(--line-strong); color:var(--text); padding:6px 8px; border-radius:6px; font-size:12.5px;}
  .batch-table td{font-size:12.5px;}
  .repeat-row{display:flex; gap:8px; align-items:flex-end; margin-bottom:8px;}
  .repeat-row .field{flex:1; margin-bottom:0;}
  .repeat-row .rm-btn{background:none; border:none; color:var(--red); cursor:pointer; font-size:16px; padding:8px 4px;}
  .section-sub{font-size:11px; text-transform:uppercase; letter-spacing:0.8px; color:var(--copper-bright); margin:16px 0 8px 0; font-weight:600;}
  .variance-neg{color:var(--red); font-weight:600;}
  .variance-pos{color:var(--green); font-weight:600;}

  /* Main */
  main{flex:1; padding:28px 36px 60px 36px; max-width:1180px;}
  .topbar{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; gap:16px; flex-wrap:wrap;}
  .topbar h1{font-size:26px; margin:0 0 4px 0; color:var(--text); font-weight:600;}
  .topbar .desc{color:var(--text-dim); font-size:13.5px; max-width:560px; line-height:1.5;}
  .topbar-actions{display:flex; gap:8px; flex-wrap:wrap;}

  button{font-family:'Inter',sans-serif;}
  .btn{background:var(--panel-2); color:var(--text); border:1px solid var(--line-strong); padding:8px 14px; border-radius:8px;
    font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; white-space:nowrap;}
  .btn:hover{border-color:var(--copper); color:var(--copper-bright);}
  .btn-primary{background:var(--copper); color:#231a10; border:1px solid var(--copper); font-weight:600;}
  .btn-primary:hover{background:var(--copper-bright); color:#231a10;}
  .btn-danger{color:var(--red); border-color:rgba(193,84,74,0.4);}
  .btn-danger:hover{border-color:var(--red); color:#e88880;}
  .btn-sm{padding:5px 10px; font-size:12px; border-radius:6px;}

  /* Cards / sections */
  .card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:18px; overflow:hidden;}
  .card-head{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--panel-2);}
  .card-head h3{margin:0; font-size:15px; font-weight:600; color:var(--text); letter-spacing:.2px;}
  .card-head .count{color:var(--text-faint); font-size:12px; margin-left:8px;}
  .card-totals{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--amber);}
  .card-body{padding:0;}

  table{width:100%; border-collapse:collapse; font-size:13px;}
  th{text-align:left; padding:9px 16px; color:var(--text-faint); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.6px; border-bottom:1px solid var(--line);}
  td{padding:10px 16px; border-bottom:1px solid var(--line); color:var(--text); vertical-align:middle;}
  tr:last-child td{border-bottom:none;}
  tr.low-stock td{background:rgba(193,84,74,0.08);}
  .row-actions{display:flex; gap:6px; justify-content:flex-end;}
  .qty{font-family:'JetBrains Mono',monospace; font-weight:600;}
  .val{font-family:'JetBrains Mono',monospace; color:var(--text-dim);}
  .badge{font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; text-transform:uppercase; letter-spacing:0.4px;}
  .badge-low{background:rgba(193,84,74,0.18); color:#e8938a; border:1px solid rgba(193,84,74,0.4);}
  .badge-ok{background:rgba(124,154,99,0.15); color:#a3c187; border:1px solid rgba(124,154,99,0.3);}
  .empty-row td{color:var(--text-faint); font-style:italic; padding:16px;}

  /* Dashboard stat grid */
  .stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:12px; margin-bottom:22px;}
  .stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;}
  .stat .label{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-faint); margin-bottom:6px;}
  .stat .value{font-family:'Fraunces',serif; font-size:24px; font-weight:600; color:var(--copper-bright);}
  .stat.alert .value{color:var(--red);}

  .alert-list{list-style:none; margin:0; padding:0;}
  .alert-list li{display:flex; justify-content:space-between; padding:10px 18px; border-bottom:1px solid var(--line); font-size:13px;}
  .alert-list li:last-child{border-bottom:none;}
  .alert-list .where{color:var(--text-faint); font-size:11.5px;}

  /* Modal */
  .overlay{position:fixed; inset:0; background:rgba(10,7,4,0.6); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;}
  .modal{background:var(--panel); border:1px solid var(--line-strong); border-radius:12px; width:100%; max-width:440px; box-shadow:var(--shadow); max-height:90vh; overflow-y:auto;}
  .modal-head{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
  .modal-head h3{margin:0; font-size:16px;}
  .modal-close{background:none; border:none; color:var(--text-faint); font-size:20px; cursor:pointer; line-height:1;}
  .modal-body{padding:18px 20px;}
  .field{margin-bottom:14px;}
  .field label{display:block; font-size:12px; color:var(--text-dim); margin-bottom:5px; font-weight:500;}
  .field input, .field select, .field textarea{width:100%; background:var(--bg); border:1px solid var(--line-strong); color:var(--text);
    padding:9px 10px; border-radius:7px; font-size:13.5px; font-family:'Inter',sans-serif;}
  .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--copper);}
  .field-row{display:flex; gap:10px;}
  .field-row .field{flex:1;}
  .modal-foot{padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px;}
  .hint{font-size:11.5px; color:var(--text-faint); margin-top:4px;}

  .log-item{display:flex; gap:12px; padding:11px 18px; border-bottom:1px solid var(--line); font-size:13px; align-items:baseline;}
  .log-item:last-child{border-bottom:none;}
  .log-ts{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-faint); width:135px; flex-shrink:0;}
  .log-flow{color:var(--copper-bright); font-weight:600;}
  .toast{position:fixed; bottom:20px; right:20px; background:var(--panel-2); border:1px solid var(--copper); color:var(--text);
    padding:10px 16px; border-radius:8px; font-size:13px; box-shadow:var(--shadow); z-index:100; opacity:0; transform:translateY(8px); transition:all .2s;}
  .toast.show{opacity:1; transform:translateY(0);}
  ::-webkit-scrollbar{width:10px; height:10px;}
  ::-webkit-scrollbar-thumb{background:var(--panel-2); border-radius:6px;}
  @media(max-width:820px){
    #app{flex-direction:column;}
    .sidebar{width:100%; flex-direction:row; overflow-x:auto; padding:12px;}
    .nav-btn{flex-shrink:0; width:auto;}
    main{padding:20px;}
  }
/* Loading overlay */
.loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 7, 4, 0.65);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.loading-overlay.active { display: flex; }
.loading-spinner {
  width: 42px; height: 42px;
  border: 3px solid rgba(240,230,214,0.15);
  border-top-color: var(--copper-bright);
  border-radius: 50%;
  animation: tfms-spin 0.7s linear infinite;
}
@keyframes tfms-spin { to { transform: rotate(360deg); } }

/* Login page */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(201,128,63,0.14), transparent),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 28px 26px 24px;
}
.login-brand { margin-bottom: 22px; }
.login-brand .name { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 700; color: var(--copper-bright); }
.login-brand .sub { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 4px; }
.login-error {
  background: rgba(193,84,74,0.15);
  border: 1px solid rgba(193,84,74,0.4);
  color: #e8938a;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}
.login-card .field { margin-bottom: 14px; }
.login-card .field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; font-weight: 500; }
.login-card .field input {
  width: 100%; background: var(--bg); border: 1px solid var(--line-strong); color: var(--text);
  padding: 10px 12px; border-radius: 7px; font-size: 14px; font-family: 'Inter', sans-serif;
}
.login-card .field input:focus { outline: none; border-color: var(--copper); }
.login-actions { margin-top: 18px; }
.login-actions .btn { width: 100%; padding: 11px 14px; font-size: 14px; }
.login-hint { margin-top: 14px; font-size: 12px; color: var(--text-faint); line-height: 1.45; }
.login-hint a { color: var(--copper-bright); }
.login-hint code { font-family: 'JetBrains Mono', monospace; font-size: 11px; }