@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --bg:#050505; --surface:#120C0D; --card:#1A1113; --card-hover:#251519;
  --purple:#6B0F1D; --purple-2:#A8253B; --gold:#7A1420; --gold-bright:#B8293F;
  --text:#F3E9EA; --muted:#8F7678; --line:#2E1417;
  --stock:#4CC38A; --soldout:#8A5458; --preorder:#4C9FE2;
  --radius:12px;
}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  font-family:'Manrope',system-ui,sans-serif;
}
.mono{font-family:'JetBrains Mono',monospace;}
h1,h2,h3{font-family:'Cinzel',serif;}
a{color:inherit;}
input,select,textarea,button{font-family:inherit;}

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; background:var(--surface); border-bottom:1px solid var(--line);
}
.topbar-brand{font-family:'Cinzel',serif; font-weight:700; font-size:15px;}
.topbar-brand span{color:var(--gold-bright); font-weight:600; font-size:13px; margin-left:4px;}
.topbar-user{display:flex; align-items:center; gap:12px;}
.tu-text{text-align:right;}
.tu-name{font-size:13.5px; font-weight:700;}
.tu-role{font-size:11px; color:var(--gold-bright);}
.avatar{
  width:36px; height:36px; border-radius:50%; background:var(--card); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--gold-bright);
}

/* ---------- Stat cards ---------- */
.stat-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:26px;}
.stat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px;
}
.stat-icon{
  width:38px; height:38px; border-radius:9px; background:rgba(184,41,63,.14); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:14px;
}
.stat-label{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; margin-bottom:6px;}
.stat-value{font-family:'JetBrains Mono',monospace; font-size:24px; font-weight:700;}
.stat-sub{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); margin-top:2px;}

/* ---------- Chart card ---------- */
.chart-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px;}
.chart-card h3{margin:0 0 18px; font-size:16px;}

@media (max-width:700px){
  .stat-cards{grid-template-columns:1fr 1fr;}
  .topbar{padding:12px 16px;}
  .tu-text{display:none;}
}

/* ---------- Product groups (grouped by category) ---------- */
.product-group{margin-bottom:20px;}
.group-head{
  display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--card);
  border:1px solid var(--line); border-radius:10px 10px 0 0;
}
.group-title{font-size:12px; font-weight:800; letter-spacing:.05em; color:var(--gold-bright);}
.product-list{border:1px solid var(--line); border-top:none; border-radius:0 0 10px 10px; overflow:hidden;}
.product-row{
  display:flex; align-items:center; gap:14px; padding:12px 14px; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.product-row:last-child{border-bottom:none;}
.product-row:hover{background:var(--card);}
.drag-handle{color:var(--muted); cursor:grab; font-size:16px;}
.pr-info{flex:1; min-width:0;}
.pr-name{font-weight:700; font-size:14px; margin-bottom:4px;}
.pr-tags{display:flex; gap:6px; flex-wrap:wrap;}
.pr-price{width:80px; text-align:right; font-size:13.5px; font-weight:700;}
.pr-stock{width:40px; text-align:center; font-size:13.5px;}
.pr-stock.zero{color:var(--soldout);}

/* ---------- Tag badges ---------- */
.tag{
  display:inline-block; padding:3px 9px; border-radius:5px; font-size:10.5px; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase;
}
.tag-origin{background:var(--card); color:var(--gold-bright); border:1px solid var(--line);}
.tag-stock{background:rgba(76,195,138,.14); color:var(--stock);}
.tag-soldout{background:rgba(138,84,88,.18); color:var(--soldout);}
.tag-preorder{background:rgba(76,159,226,.14); color:var(--preorder);}
.tag-special{background:rgba(184,41,63,.16); color:var(--gold-bright);}
.tag-tophit{background:rgba(76,159,226,.14); color:var(--preorder);}
.tag-count{background:var(--bg); color:var(--muted); border:1px solid var(--line);}

/* ---------- Login screen ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:radial-gradient(900px 500px at 50% -10%, rgba(107,15,29,.30), transparent 60%), var(--bg);}
.login-card{width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:36px 30px; text-align:center;}
.logo-mark{width:56px; height:56px; margin:0 auto 16px; object-fit:contain; display:block;
  filter: drop-shadow(0 4px 14px rgba(168,37,59,.35));}
.logo-mark.sidebar-sm{width:38px; height:38px; margin:0;}
.login-card h1{font-size:20px; margin:0 0 4px;}
.login-card .sub{color:var(--muted); font-size:13px; margin-bottom:26px;}
.field{text-align:left; margin-bottom:14px;}
.field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px; font-weight:600;}
.field input{width:100%; padding:11px 13px; border-radius:9px; border:1px solid var(--line);
  background:var(--card); color:var(--text); font-size:14px;}
.field input:focus{outline:none; border-color:var(--purple-2);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px;
  border-radius:9px; font-weight:700; font-size:14px; cursor:pointer; border:1px solid transparent; width:100%;}
.btn-gold{background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#1a1208;}
.btn-gold:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--text);}
.btn-danger{background:transparent; border:1px solid var(--soldout); color:var(--soldout);}
.error-msg{color:var(--soldout); font-size:12.5px; margin-top:10px; min-height:16px;}

/* ---------- Dashboard shell ---------- */
.shell{display:flex; min-height:100vh;}
.sidebar{width:230px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--line);
  padding:22px 16px; display:flex; flex-direction:column; gap:22px;}
.sidebar .brand{display:flex; align-items:center; gap:10px;}
.sidebar .brand span.name{font-weight:700; font-size:15px;}
.sidebar .brand span.role{font-size:11px; color:var(--muted); display:block;}
.side-nav{display:flex; flex-direction:column; gap:4px;}
.side-nav button{
  text-align:left; background:none; border:none; color:var(--muted); font-weight:600; font-size:14px;
  padding:10px 14px; border-radius:9px; cursor:pointer;}
.side-nav button.active{background:var(--purple); color:#fff;}
.side-nav button:hover:not(.active){background:var(--card);}
.logout-btn{margin-top:auto;}

.main{flex:1; padding:28px 34px; max-width:1100px;}
.page-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:12px;}
.page-head h2{margin:0; font-size:22px;}
.page-head p{margin:4px 0 0; color:var(--muted); font-size:13px;}

.toolbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.toolbar select, .toolbar input[type=text]{
  background:var(--card); border:1px solid var(--line); color:var(--text); padding:9px 12px; border-radius:8px; font-size:13px;}

table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
thead th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  padding:12px 14px; border-bottom:1px solid var(--line); background:var(--card);}
tbody td{padding:11px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--card);}
.thumb{width:40px; height:40px; border-radius:7px; object-fit:cover; background:var(--card);}
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; border:1px solid currentColor;}
.badge.stock{color:var(--stock);}
.badge.soldout{color:var(--soldout);}
.badge.preorder{color:var(--preorder);}
.row-actions{display:flex; gap:8px;}
.icon-btn{background:var(--card); border:1px solid var(--line); color:var(--text); border-radius:7px; padding:6px 10px; cursor:pointer; font-size:12.5px;}
.icon-btn.danger{color:var(--soldout); border-color:var(--soldout);}
.icon-btn:hover{border-color:var(--purple-2);}

/* ---------- Modal / form ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(8,5,15,.65); display:none; align-items:flex-start;
  justify-content:center; z-index:100; padding:40px 16px; overflow-y:auto;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 26px 22px;
  width:100%; max-width:520px;}
.modal h3{margin:0 0 18px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-grid .full{grid-column:1/-1;}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:5px; font-weight:600;}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line); background:var(--card);
  color:var(--text); font-size:13.5px;}
.field textarea{resize:vertical; min-height:60px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}
.modal-actions .btn{width:auto; padding:10px 20px;}
.help{font-size:11.5px; color:var(--muted); margin-top:4px;}

.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); z-index:200;
  background:var(--card); border:1px solid var(--gold); padding:12px 20px; border-radius:10px; font-size:13.5px;
  font-weight:600; opacity:0; pointer-events:none; transition:.2s;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.error{border-color:var(--soldout);}

.empty{color:var(--muted); text-align:center; padding:40px; font-size:13.5px;}

@media (max-width:800px){
  .shell{flex-direction:column;}
  .sidebar{width:100%; flex-direction:row; align-items:center; overflow-x:auto;}
  .side-nav{flex-direction:row;}
  .logout-btn{margin-top:0;}
  .main{padding:20px;}
  .form-grid{grid-template-columns:1fr;}
}