@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg:#0f0f0f; --surface:#1a1a1a; --surface2:#242424; --border:#2e2e2e;
  --text:#f0f0f0; --muted:#6b6b6b;
  --accent:#00e5a0; --accent-dim:rgba(0,229,160,0.12);
  --danger:#ff4d4d; --warn:#f5a623;
  --radius:8px;
  --mono:'IBM Plex Mono',monospace; --sans:'Inter',sans-serif;
  --topbar-h:52px;
}

html,body{height:100%;}
body{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;
}

/* ── TOPBAR / NAV ── */
#topbar{
  display:flex;align-items:center;padding:0 14px;height:var(--topbar-h);
  background:var(--surface);border-bottom:1px solid var(--border);
  flex-shrink:0;gap:12px;z-index:10;
}
.logo{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--accent);letter-spacing:-.5px;white-space:nowrap;text-decoration:none;}
.logo span{color:var(--muted);}
.nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;}
.nav::-webkit-scrollbar{display:none;}
.nav a{
  padding:6px 12px;border-radius:20px;font-size:12.5px;font-weight:600;
  color:var(--muted);text-decoration:none;white-space:nowrap;
  border:1px solid transparent;transition:all .15s;
}
.nav a.on,.nav a:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim);}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0;}
.store-chip{font-size:11.5px;color:var(--muted);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.store-chip b{color:var(--text);font-weight:600;}

.icon-btn{
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  border-radius:var(--radius);padding:7px 9px;font-size:14px;cursor:pointer;
  transition:border-color .15s,color .15s;line-height:1;touch-action:manipulation;text-decoration:none;
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ── BUTTONS ── */
.btn{
  padding:10px 14px;border-radius:var(--radius);font-family:var(--sans);
  font-size:13px;font-weight:600;border:none;cursor:pointer;
  transition:opacity .15s,transform .1s;touch-action:manipulation;
}
.btn:active{transform:scale(.97);}
.btn-ghost{background:var(--surface2);color:var(--muted);border:1px solid var(--border);}
.btn-ghost:hover{color:var(--text);border-color:var(--muted);}
.btn-danger-ghost{background:var(--surface2);color:var(--muted);border:1px solid var(--border);}
.btn-danger-ghost:hover{color:var(--danger);border-color:var(--danger);background:rgba(255,77,77,.07);}
.btn-primary{background:var(--accent);color:#0f0f0f;}
.btn-primary:hover{opacity:.85;}
.btn-primary:disabled{opacity:.3;cursor:not-allowed;}

/* ── FORMS ── */
.field{margin-bottom:11px;}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;}
.field input,.field select{
  width:100%;background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);font-family:var(--sans);
  font-size:14px;padding:9px 12px;outline:none;transition:border-color .2s;
}
.field input:focus,.field select:focus{border-color:var(--accent);}
.field input::placeholder{color:var(--muted);}
.field select option{background:var(--surface2);}

/* ── PAGE CONTENT / CARDS / TABLES ── */
.page{flex:1;overflow-y:auto;padding:16px;max-width:1100px;margin:0 auto;width:100%;}
.page::-webkit-scrollbar{width:4px;}
.page::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px;}
.card h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:12px;}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px;}
.stat{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:8px;padding:12px 14px;}
.stat .label{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);}
.stat .value{font-family:var(--mono);font-size:21px;font-weight:600;margin-top:4px;color:var(--text);font-variant-numeric:tabular-nums;}

table.data{width:100%;border-collapse:collapse;font-size:13px;}
table.data th{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  text-align:left;padding:7px 8px;border-bottom:1px solid var(--border);
}
table.data td{padding:8px;border-bottom:1px solid var(--border);vertical-align:middle;font-variant-numeric:tabular-nums;}
table.data tr:last-child td{border-bottom:none;}
table.data td.num,table.data th.num{text-align:right;font-family:var(--mono);white-space:nowrap;}
.row-low td{color:var(--warn);}
.tag{font-family:var(--mono);font-size:10px;padding:2px 7px;border:1px solid var(--border);border-radius:3px;color:var(--muted);}
.tag.green{color:var(--accent);border-color:var(--accent);}
.tag.red{color:var(--danger);border-color:var(--danger);}
.empty-state{text-align:center;color:var(--muted);font-size:13px;padding:34px 14px;}
.empty-state .big{font-size:34px;opacity:.4;display:block;margin-bottom:8px;}

/* ── MODAL ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);
  display:none;align-items:center;justify-content:center;
  z-index:999;backdrop-filter:blur(3px);padding:14px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:20px;width:100%;max-width:460px;max-height:92vh;overflow-y:auto;position:relative;
}
.modal h2{font-size:16px;font-weight:700;margin-bottom:2px;}
.modal .sub{font-size:12px;color:var(--muted);margin-bottom:16px;}
.modal-close{
  position:absolute;top:14px;right:14px;background:none;border:none;color:var(--muted);
  font-size:18px;cursor:pointer;padding:4px;border-radius:4px;touch-action:manipulation;
}
.modal-close:hover{color:var(--text);}

/* ── TOAST ── */
#toast-area{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:6px;z-index:9999;pointer-events:none;
}
.toast{
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  padding:10px 16px;font-size:13px;color:var(--text);
  opacity:0;transform:translateY(8px);transition:all .25s ease;white-space:nowrap;max-width:340px;
  overflow:hidden;text-overflow:ellipsis;
}
.toast.show{opacity:1;transform:translateY(0);}
.toast.success{border-color:var(--accent);color:var(--accent);}
.toast.error{border-color:var(--danger);color:var(--danger);}
.toast.warn{border-color:var(--warn);color:var(--warn);}

@media(max-width:640px){
  .store-chip{display:none;}
  .page{padding:12px;}
}