:root{
  --bg: #14181C;
  --panel: #1D242A;
  --panel-2: #232B32;
  --steel: #4A5A66;
  --line: #313B42;
  --text: #E7EAEC;
  --muted: #9AA7AF;
  --orange: #E8590C;
  --yellow: #F2B705;
  --red: #E86A6A;
  --green: #7CCB7C;
  --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{ background:var(--bg); color:var(--text); font-family:var(--font-body); }
.logo-mark{ width:30px; height:30px; flex:none; background:var(--orange); display:flex; align-items:center; justify-content:center; transform:skewX(-8deg); font-family:var(--font-mono); font-weight:600; font-size:0.78rem; color:#14181C; }
.dot{color:var(--orange);}
.login-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0.02em; font-size:1.05rem; }

/* ---- Login ---- */
#loginScreen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card{ width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line); padding:32px; display:flex; flex-direction:column; gap:16px; }
.login-card .login-logo{ margin-bottom:8px; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:0.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
.field input, .field select{ background:var(--panel-2); border:1px solid var(--line); color:var(--text); padding:11px 12px; font-family:var(--font-body); font-size:0.9rem; outline:none; }
.field input:focus, .field select:focus{ border-color:var(--orange); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; background:var(--orange); color:#14181C; font-weight:600; font-size:0.88rem; border:none; cursor:pointer; font-family:var(--font-body); }
.btn:hover{ background:var(--yellow); }
.btn-outline{ background:transparent; color:var(--text); border:1px solid var(--steel); }
.btn-outline:hover{ border-color:var(--orange); color:var(--orange); background:transparent; }
.btn-danger{ background:var(--red); color:#1c0e0e; }

.msg{ font-size:0.84rem; min-height:1.2em; }
.msg.err{ color:var(--red); }
.msg.ok{ color:var(--green); }

/* ---- Dashboard shell ---- */
.admin-header{ position:sticky; top:0; z-index:10; background:rgba(20,24,28,0.95); border-bottom:1px solid var(--line); backdrop-filter:blur(6px); }
.admin-header-inner{ max-width:1100px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.tabs{ display:flex; gap:6px; }
.tab{ background:transparent; border:1px solid transparent; color:var(--muted); padding:9px 16px; font-size:0.88rem; cursor:pointer; font-family:var(--font-body); display:flex; align-items:center; gap:6px; }
.tab.active{ color:var(--text); border-color:var(--line); background:var(--panel); }
.badge{ background:var(--orange); color:#14181C; font-size:0.68rem; font-weight:700; padding:1px 6px; border-radius:8px; }

.admin-main{ max-width:1100px; margin:0 auto; padding:32px 24px 80px; }
.warning-banner{ background:rgba(242,183,5,0.12); border:1px solid rgba(242,183,5,0.4); color:var(--yellow); padding:12px 16px; margin-bottom:24px; font-size:0.88rem; }

.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.panel-head h2{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.02em; font-size:1.3rem; }

.product-form{ background:var(--panel); border:1px solid var(--line); padding:22px; margin-bottom:24px; display:flex; flex-direction:column; gap:14px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-actions{ display:flex; gap:10px; }

.data-table{ width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); }
.data-table th, .data-table td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); font-size:0.86rem; }
.data-table th{ color:var(--muted); font-weight:600; text-transform:uppercase; font-size:0.72rem; letter-spacing:0.05em; background:var(--panel-2); }
.data-table td.mono{ font-family:var(--font-mono); }
.data-table tr:last-child td{ border-bottom:none; }
.row-actions{ display:flex; gap:8px; }
.row-actions button{ background:none; border:1px solid var(--line); color:var(--muted); padding:5px 10px; font-size:0.76rem; cursor:pointer; }
.row-actions button:hover{ color:var(--text); border-color:var(--steel); }
.row-actions button.danger:hover{ color:var(--red); border-color:var(--red); }

.tag-pill{ font-family:var(--font-mono); font-size:0.72rem; padding:3px 9px; border:1px solid var(--line); display:inline-block; }
.tag-pill.pl{ color:var(--orange); border-color:rgba(232,89,12,0.4); }
.tag-pill.vl{ color:#7fb2c9; border-color:rgba(127,178,201,0.4); }
.tag-pill.stock-in{ color:var(--green); border-color:rgba(124,203,124,0.4); }
.tag-pill.stock-out{ color:var(--muted); }
.status-select{ background:var(--panel-2); border:1px solid var(--line); color:var(--text); padding:6px 8px; font-size:0.8rem; }

@media (max-width:720px){
  .admin-header-inner{ flex-wrap:wrap; }
  .tabs{ order:3; width:100%; }
  .field-row{ grid-template-columns:1fr; }
  .data-table{ display:block; overflow-x:auto; }
}