:root {
  --bg: #0b1020;
  --panel: #12182b;
  --panel-2: #1a233a;
  --line: rgba(255,255,255,.08);
  --text: #eef2ff;
  --muted: #9aa8c7;
  --brand: #caa45f;
  --brand-2: #f3d48f;
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: linear-gradient(180deg,#050814 0%,#0b1020 100%); color: var(--text); }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.sidebar { background: rgba(10,14,28,.97); border-right: 1px solid var(--line); padding: 24px 16px; }
.brand-block h1 { margin: 0 0 6px; font-size: 22px; }
.brand-block p { margin: 0; color: var(--muted); }
.menu { display: grid; gap: 10px; margin-top: 26px; }
.menu a { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); }
.content { padding: 24px; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.muted { color: var(--muted); }
.panel { background: linear-gradient(180deg, rgba(18,24,43,.98), rgba(26,35,58,.98)); border: 1px solid var(--line); border-radius: 22px; padding: 18px; margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
input, select, textarea, button { width: 100%; border-radius: 14px; padding: 12px 14px; border: 1px solid var(--line); background: #0b1020; color: var(--text); }
button, .btn { cursor:pointer; font-weight:700; text-align:center; }
.btn-primary { background: linear-gradient(135deg,var(--brand),var(--brand-2)); color:#111827; border:0; }
.btn-dark { background: rgba(255,255,255,.04); }
.btn-danger { background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.35); }
.inline-form { display:inline; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius: 18px; }
table { width:100%; border-collapse: collapse; min-width: 780px; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align:left; }
.flash { padding: 12px 14px; border-radius: 14px; margin-bottom: 16px; }
.flash.success { background: rgba(22,163,74,.12); color: #bbf7d0; }
.flash.error { background: rgba(220,38,38,.12); color: #fecaca; }
.flash.info { background: rgba(59,130,246,.12); color: #bfdbfe; }
.login-wrap { min-height: 100vh; display:grid; place-items:center; padding:20px; }
.login-card { width:min(420px,100%); background: linear-gradient(180deg, rgba(18,24,43,.98), rgba(26,35,58,.98)); border: 1px solid var(--line); border-radius: 24px; padding: 24px; }
.form-grid { display:grid; gap:12px; }
.products-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 14px; }
.product { background: rgba(255,255,255,.03); border:1px solid var(--line); border-radius: 18px; padding: 16px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.actions form, .actions a { flex:1; }
.stat { font-size: 28px; font-weight: 700; margin-top: 8px; }
@media (max-width: 900px){
  .app-shell { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}