*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --navy: #1a2744; --navy-dark: #111c35; --navy-mid: #1e2e55;
  --gold: #c9a84c; --gold-light: #e8c96a; --gold-dim: rgba(201,168,76,0.12);
  --gold-border: rgba(201,168,76,0.25);
  --white: #ffffff; --text: #dde4f0; --muted: #8a9ab5;
  --card: #1e2e55; --success: #4cd98a; --danger: #e25454;
  --font: 'Inter', sans-serif;
}
html,body { height:100%; }
body { background:var(--navy); color:var(--text); font-family:var(--font); }

/* LOGIN */
.login-screen {
  min-height:100vh;
  background: radial-gradient(ellipse at 50% 0%, #243356 0%, #111c35 100%);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
.login-card {
  background:var(--navy-mid);
  border:1px solid var(--gold-border);
  border-radius:16px;
  padding:2.5rem 2rem;
  width:100%; max-width:380px;
  text-align:center;
}
.login-logo {
  width:80px; height:80px; border-radius:50%; object-fit:cover;
  border:3px solid var(--gold); margin-bottom:1.25rem;
  box-shadow:0 0 30px rgba(201,168,76,0.3);
}
.login-card h2 { font-size:20px; color:var(--gold); margin-bottom:4px; }
.login-sub { font-size:12px; color:var(--muted); margin-bottom:1.75rem; }
.login-form { text-align:left; }
.inp-wrap { margin-bottom:1rem; }
.inp-wrap label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
.inp-wrap input {
  width:100%;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--gold-border);
  border-radius:8px;
  padding:10px 12px;
  color:var(--white); font-size:14px; font-family:var(--font);
  outline:none; transition:border-color 0.2s;
}
.inp-wrap input:focus { border-color:var(--gold); }
.login-error { color:var(--danger); font-size:12px; margin-bottom:0.75rem; min-height:18px; }
.btn-login {
  width:100%;
  background:linear-gradient(135deg,var(--gold) 0%,#a07c2a 100%);
  color:var(--navy-dark);
  border:none; border-radius:8px;
  padding:11px;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:opacity 0.2s;
}
.btn-login:hover { opacity:0.9; }
.back-link { display:block; margin-top:1.25rem; font-size:12px; color:var(--muted); }
.back-link:hover { color:var(--gold); }

/* SHELL */
.admin-shell { display:flex; height:100vh; overflow:hidden; }

/* SIDEBAR */
.sidebar {
  width:220px; min-width:220px;
  background:var(--navy-dark);
  border-right:1px solid var(--gold-border);
  display:flex; flex-direction:column;
  overflow-y:auto;
  transition:transform 0.3s;
}
.sidebar-brand {
  display:flex; align-items:center; gap:10px;
  padding:1.25rem 1rem;
  border-bottom:1px solid var(--gold-border);
}
.sb-logo { width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-border); }
.sb-name { font-size:13px; font-weight:600; color:var(--gold); }
.sb-sub { font-size:10px; color:var(--muted); }
.sb-nav { flex:1; padding:1rem 0.75rem; display:flex; flex-direction:column; gap:4px; }
.sb-btn {
  width:100%;
  display:flex; align-items:center; gap:10px;
  background:none; border:none; border-radius:8px;
  padding:10px 12px;
  font-size:13px; color:var(--muted); cursor:pointer;
  font-family:var(--font); text-align:left;
  transition:all 0.2s;
}
.sb-btn:hover { background:var(--gold-dim); color:var(--text); }
.sb-btn.active { background:var(--gold-dim); color:var(--gold); border-left:2px solid var(--gold); }
.sb-icon { font-size:16px; }
.sb-footer { padding:1rem 0.75rem; border-top:1px solid var(--gold-border); display:flex; flex-direction:column; gap:6px; }
.sb-store-link {
  display:block; text-align:center; font-size:12px;
  color:var(--gold); padding:7px;
  border:1px solid var(--gold-border); border-radius:6px;
  transition:background 0.2s;
}
.sb-store-link:hover { background:var(--gold-dim); }
.sb-logout {
  background:rgba(226,84,84,0.1); border:1px solid rgba(226,84,84,0.2);
  color:#e27070; border-radius:6px; padding:7px;
  font-size:12px; cursor:pointer; font-family:var(--font);
  transition:background 0.2s;
}
.sb-logout:hover { background:rgba(226,84,84,0.2); }

/* MAIN */
.admin-main { flex:1; overflow-y:auto; display:flex; flex-direction:column; }
.topbar {
  position:sticky; top:0; z-index:50;
  background:rgba(17,28,53,0.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gold-border);
  padding:0 1.5rem;
  height:56px;
  display:flex; align-items:center; gap:12px;
}
.topbar-menu {
  display:none;
  background:none; border:none; color:var(--gold); font-size:20px; cursor:pointer;
}
.topbar-title { flex:1; font-size:16px; font-weight:600; color:var(--gold); }
.topbar-user { font-size:13px; color:var(--muted); }

.page-content { display:none; padding:1.5rem; }
.page-content.active { display:block; }

/* STATS */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; margin-bottom:2rem; }
.stat-card {
  background:var(--card); border:1px solid rgba(255,255,255,0.07);
  border-radius:12px; padding:1.25rem;
  text-align:center;
}
.stat-card.gold { border-color:var(--gold-border); }
.stat-card.red { border-color:rgba(226,84,84,0.25); }
.stat-card.blue { border-color:rgba(100,149,237,0.25); }
.sc-val { font-size:28px; font-weight:600; color:var(--gold); }
.stat-card.red .sc-val { color:var(--danger); }
.stat-card.blue .sc-val { color:#7ba0e8; }
.sc-lbl { font-size:11px; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:0.5px; }

.dash-section-title { font-size:14px; color:var(--gold); margin-bottom:1rem; }
.recent-table { width:100%; border-collapse:collapse; font-size:13px; }
.recent-table td { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.05); }
.recent-table tr:last-child td { border:none; }
.recent-table .rt-name { color:var(--text); font-weight:500; }
.recent-table .rt-cat { color:var(--muted); font-size:11px; }
.recent-table .rt-price { color:var(--gold); font-weight:600; }

/* TOOLBAR */
.page-toolbar { display:flex; gap:10px; margin-bottom:1.25rem; flex-wrap:wrap; }
.search-inp {
  flex:1; min-width:180px;
  background:rgba(255,255,255,0.06); border:1px solid var(--gold-border);
  border-radius:8px; padding:9px 12px; color:var(--white); font-size:13px;
  font-family:var(--font); outline:none;
}
.search-inp:focus { border-color:var(--gold); }
.search-sel {
  background:rgba(255,255,255,0.06); border:1px solid var(--gold-border);
  border-radius:8px; padding:9px 12px; color:var(--white); font-size:13px;
  font-family:var(--font); outline:none; cursor:pointer;
}
.search-sel option { background:var(--navy-dark); }

/* TABLE */
.products-table-wrap { overflow-x:auto; }
.products-table { width:100%; border-collapse:collapse; font-size:13px; }
.products-table th {
  padding:10px 12px; text-align:left;
  font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px;
  border-bottom:1px solid var(--gold-border);
  white-space:nowrap;
}
.products-table td {
  padding:12px; border-bottom:1px solid rgba(255,255,255,0.05);
  vertical-align:middle;
}
.products-table tr:hover td { background:rgba(255,255,255,0.02); }
.pt-name { font-weight:500; color:var(--text); }
.pt-cat { font-size:11px; color:var(--muted); margin-top:2px; }
.pt-price { color:var(--gold); font-weight:600; }
.pt-orig { font-size:11px; color:var(--muted); text-decoration:line-through; }
.pt-disc { display:inline-block; background:rgba(226,84,84,0.15); color:#e27070; font-size:11px; padding:2px 7px; border-radius:5px; }
.badge-in { display:inline-block; background:rgba(76,217,138,0.15); color:var(--success); font-size:11px; padding:3px 9px; border-radius:6px; border:1px solid rgba(76,217,138,0.2); }
.badge-out { display:inline-block; background:rgba(226,84,84,0.15); color:#e27070; font-size:11px; padding:3px 9px; border-radius:6px; border:1px solid rgba(226,84,84,0.2); }
.badge-feat { display:inline-block; background:var(--gold-dim); color:var(--gold-light); font-size:11px; padding:3px 9px; border-radius:6px; border:1px solid var(--gold-border); }
.action-btns { display:flex; gap:6px; }
.btn-edit-sm {
  background:var(--gold-dim); border:1px solid var(--gold-border);
  color:var(--gold-light); padding:5px 10px; border-radius:6px;
  font-size:11px; cursor:pointer; transition:background 0.2s;
}
.btn-edit-sm:hover { background:rgba(201,168,76,0.25); }
.btn-del-sm {
  background:rgba(226,84,84,0.1); border:1px solid rgba(226,84,84,0.2);
  color:#e27070; padding:5px 10px; border-radius:6px;
  font-size:11px; cursor:pointer; transition:background 0.2s;
}
.btn-del-sm:hover { background:rgba(226,84,84,0.2); }

/* FORM */
.form-card {
  background:var(--card); border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:1.75rem;
  max-width:760px;
}
.form-title { font-size:16px; font-weight:600; color:var(--gold); margin-bottom:1.5rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-size:12px; color:var(--muted); }
.form-group input, .form-group select, .form-group textarea {
  background:rgba(255,255,255,0.06); border:1px solid var(--gold-border);
  border-radius:8px; padding:9px 12px; color:var(--white);
  font-size:13px; font-family:var(--font); outline:none;
  transition:border-color 0.2s; resize:vertical;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--gold); }
.form-group select option { background:var(--navy-dark); }
.check-label { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--text); margin-top:4px; }
.check-label input { width:auto; }

.img-upload-area {
  border:2px dashed var(--gold-border); border-radius:10px;
  padding:1.5rem; text-align:center; cursor:pointer;
  transition:border-color 0.2s, background 0.2s;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.img-upload-area:hover { border-color:var(--gold); background:var(--gold-dim); }
.img-upload-icon { font-size:28px; }
.img-upload-text { font-size:13px; color:var(--text); }
.img-upload-hint { font-size:11px; color:var(--muted); }

.form-actions { display:flex; gap:10px; margin-top:1.5rem; flex-wrap:wrap; }
.btn-save {
  background:linear-gradient(135deg,var(--gold) 0%,#a07c2a 100%);
  color:var(--navy-dark); border:none; border-radius:8px;
  padding:10px 24px; font-size:13px; font-weight:600; cursor:pointer;
  transition:opacity 0.2s, transform 0.1s; font-family:var(--font);
}
.btn-save:hover { opacity:0.9; }
.btn-save:active { transform:scale(0.98); }
.btn-cancel {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  color:var(--muted); border-radius:8px; padding:10px 20px;
  font-size:13px; cursor:pointer; font-family:var(--font); transition:all 0.2s;
}
.btn-cancel:hover { background:rgba(255,255,255,0.1); color:var(--text); }
.form-msg { margin-top:10px; font-size:13px; min-height:18px; }
.form-msg.ok { color:var(--success); }
.form-msg.err { color:var(--danger); }

/* CONFIRM MODAL */
.confirm-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.7);
  backdrop-filter:blur(6px); z-index:1000;
  display:none; align-items:center; justify-content:center;
}
.confirm-overlay.open { display:flex; }
.confirm-box {
  background:var(--navy-mid); border:1px solid var(--gold-border);
  border-radius:14px; padding:2rem;
  text-align:center; max-width:320px; width:90%;
}
.confirm-icon { font-size:36px; margin-bottom:0.75rem; }
.confirm-box h3 { font-size:16px; color:var(--text); margin-bottom:6px; }
.confirm-box p { font-size:13px; color:var(--muted); margin-bottom:1.5rem; }
.confirm-btns { display:flex; gap:10px; justify-content:center; }
.btn-confirm-yes {
  background:rgba(226,84,84,0.8); color:#fff;
  border:none; border-radius:8px; padding:9px 20px;
  font-size:13px; cursor:pointer; font-family:var(--font); transition:background 0.2s;
}
.btn-confirm-yes:hover { background:var(--danger); }
.btn-confirm-no {
  background:rgba(255,255,255,0.08); color:var(--text);
  border:1px solid rgba(255,255,255,0.15); border-radius:8px; padding:9px 20px;
  font-size:13px; cursor:pointer; font-family:var(--font);
}

/* TOAST */
.toast {
  position:fixed; bottom:20px; right:20px;
  background:var(--gold); color:var(--navy-dark);
  padding:10px 20px; border-radius:8px;
  font-size:13px; font-weight:600; z-index:2000;
  transform:translateY(80px); transition:transform 0.3s;
  pointer-events:none;
}
.toast.show { transform:translateY(0); }
.toast.err { background:var(--danger); color:#fff; }

@media (max-width:768px) {
  .sidebar { position:fixed; left:0; top:0; bottom:0; z-index:100; transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .topbar-menu { display:block; }
  .form-grid { grid-template-columns:1fr; }
  .form-group.full { grid-column:1; }
}