/* qqshop_v100/style.css */

/* Google Font (สวยขึ้นบนมือถือ/แอดมิน) */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600;700;800&display=swap');

 :root{
  --bg:#050505;
  --panel:#0d0d0d;
  --panel-2:#151515;
  --panel-3:#090909;
  --border:rgba(255,255,255,.10);
  --text:#f5f5f5;
  --muted:rgba(255,255,255,.70);
  --muted-2:rgba(255,255,255,.48);
  --accent:#f2f2f2;
  --accent-2:#cfcfcf;
  --accent-soft:rgba(255,255,255,.10);
  --accent-glow:0 0 24px rgba(255,255,255,.08);
  --danger:#f87171;
  --danger-soft:rgba(248,113,113,.14);
  --success:#d4d4d4;
  --success-soft:rgba(255,255,255,.08);
  --warning:#e5e5e5;
  --warning-soft:rgba(255,255,255,.10);
  --shadow:0 14px 34px rgba(0,0,0,.45);
}

*{box-sizing:border-box;font-family:"Kanit",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--text);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;}

/* พื้นหลังแบบ premium */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 400px at 8% 8%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 400px at 92% 18%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 500px at 50% 92%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 38%);
  opacity:.95;
  z-index:-1;
}

/* Ambient background motion (desktop only — ปิดบนมือถือกันกระตุก) */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference){
  body::before{
    animation: ambientGlow 18s ease-in-out infinite alternate;
    transform-origin:center;
    will-change: opacity, transform;
  }
}
@keyframes ambientGlow{
  from{ opacity:.88; transform:scale(1); }
  to{ opacity:1; transform:scale(1.015); }
}

a{color:var(--text);text-decoration:none;}
a:hover{text-decoration:underline;}

code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
pre{margin:0;}

/* ---------- Public page / login ---------- */
.public-container{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
}
.public-container h1{font-size:2rem;margin:0 0 .5rem;}
.public-container p{opacity:.85;margin:0 0 1.5rem;max-width:56ch;}

/* ---------- Buttons ---------- */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  transition:transform .06s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}

.btn:hover,
.btn-secondary:hover{
  background:rgba(255,255,255,.06);
  text-decoration:none;
}

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active{transform:translateY(1px);}

.btn-primary{
  border:none;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  color:#0a0a0a;
}
.btn-primary:hover{opacity:.95;}

.btn-secondary{
  background:var(--panel-2);
}

.btn-danger{
  border:1px solid rgba(248,113,113,.28);
  background:var(--danger-soft);
  color:#fecaca;
}
.btn-danger:hover{background:rgba(248,113,113,.22);text-decoration:none;}

.btn-sm{padding:6px 10px;border-radius:12px;font-size:.85rem;font-weight:700;}

/* Backward compatibility: legacy button class used in v100 */
form .btn-primary{margin-top:12px;}

/* ---------- Inputs / forms ---------- */
form label{display:block;font-size:.85rem;margin:10px 0 6px;color:var(--muted);}

input[type=text],
input[type=password],
input[type=number],
textarea,
select{
  width:100%;
  background:rgba(0,0,0,.18);
  border-radius:12px;
  border:1px solid var(--border);
  padding:10px 12px;
  color:var(--text);
  outline:none;
}
textarea{min-height:90px;resize:vertical;}
input:focus,textarea:focus,select:focus{border-color:rgba(255,255,255,.28);box-shadow:0 0 0 3px rgba(255,255,255,.10);}

/* New (used by categories.php) */
.form-label{display:block;font-size:.85rem;margin:10px 0 6px;color:var(--muted);}
.form-input{width:100%;}
.form-check{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--text);}
.form-check input{width:18px;height:18px;}

/* ---------- Cards / layout blocks ---------- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.card::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:radial-gradient(600px 140px at 10% 0%, rgba(255,255,255,.04), transparent 55%);
  opacity:.9;
  pointer-events:none;
}

.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 46px rgba(0,0,0,.55), var(--accent-glow);
}
.card h1,.card h2,.card h3{margin:0 0 10px;}
.card h2{font-size:1.1rem;color:var(--text);}
.card h3{font-size:1rem;color:var(--text);}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.stat-box{background:var(--panel-2);border:1px solid var(--border);border-radius:16px;padding:12px;}
.stat-label{font-size:.8rem;color:var(--muted);}
.stat-value{font-size:1.5rem;font-weight:800;margin-top:6px;}

/* ---------- Tables ---------- */
.table-wrapper{overflow:auto;border-radius:14px;border:1px solid var(--border);}
.table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:560px;}
.table th,.table td{padding:10px 10px;border-bottom:1px solid var(--border);vertical-align:top;}
.table th{background:var(--panel-2);text-align:left;color:var(--muted);font-weight:800;}
.table th{position:sticky;top:0;z-index:2;backdrop-filter:blur(8px);background:rgba(16,20,38,.92);}
.table tr:hover td{background:rgba(255,255,255,.03);}

/* ---------- Badges / alerts ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:800;}
.badge-green{background:rgba(52,211,153,.16);color:#bbf7d0;border:1px solid rgba(52,211,153,.24);}
.badge-yellow{background:rgba(250,204,21,.18);color:#fde68a;border:1px solid rgba(250,204,21,.24);}
.badge-red{background:rgba(248,113,113,.16);color:#fecaca;border:1px solid rgba(248,113,113,.26);}
.badge-blue{background:rgba(59,130,246,.16);color:#bfdbfe;border:1px solid rgba(59,130,246,.26);}

/* categories.php uses these names */
.badge-success{background:var(--success-soft);color:#bbf7d0;border:1px solid rgba(52,211,153,.24);}
.badge-muted{background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--border);}

.alert{padding:10px 12px;border-radius:14px;border:1px solid var(--border);margin:0 0 12px;}
.alert-success{background:var(--success-soft);border-color:rgba(52,211,153,.26);color:#bbf7d0;}
.alert-error{background:var(--danger-soft);border-color:rgba(248,113,113,.28);color:#fecaca;}

/* Utility */
.mt-4{margin-top:16px;}

/* ---------- Admin shell ---------- */
.admin-body{background:var(--bg);color:var(--text);}

.admin-shell{min-height:100vh;display:flex;}

.admin-sidebar{
  width:260px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 28%),
             linear-gradient(180deg,var(--panel-3),var(--panel));
  border-right:1px solid var(--border);
  padding:14px;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  z-index:20;
  backdrop-filter:blur(12px);
  box-shadow:0 22px 50px rgba(0,0,0,.45);
}

.admin-brand{padding:10px 12px 12px;border-radius:16px;border:1px solid var(--border);background:rgba(0,0,0,.18);}
.admin-brand-title{font-weight:900;color:var(--text);font-size:1.05rem;}
.admin-brand-sub{margin-top:4px;font-size:.82rem;color:var(--muted);}

.admin-nav{margin-top:12px;display:flex;flex-direction:column;gap:6px;}
.nav-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  color:var(--text);
  border:1px solid transparent;
  opacity:.92;
}
.nav-link:hover{background:rgba(255,255,255,.05);text-decoration:none;}
.nav-link.active{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--text);}
.nav-link.danger{color:var(--danger);}
.nav-sep{height:1px;background:var(--border);margin:8px 0;opacity:.75;}

.admin-sidebar-footer{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.admin-user-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:rgba(0,0,0,.16);border:1px solid var(--border);}
.admin-user-dot{width:10px;height:10px;border-radius:999px;background:var(--success);box-shadow:0 0 0 3px rgba(52,211,153,.18);}
.admin-user-name{font-weight:900;font-size:.92rem;}
.admin-user-sub{font-size:.78rem;color:var(--muted);margin-top:2px;}

.admin-user-chip-link{color:inherit;text-decoration:none;}
.admin-user-chip-link:hover{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05);text-decoration:none;transform:none;}
.form-errors{margin:0;padding-left:18px;color:#fecaca;line-height:1.7;}
.danger-notice{border-color:rgba(248,113,113,.24);background:linear-gradient(180deg, rgba(248,113,113,.10), rgba(255,255,255,.03));}
.admin-account-form input{margin-bottom:10px;}

.admin-overlay{display:none;}

.admin-main{flex:1;min-width:0;display:flex;flex-direction:column;}

.admin-topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background:rgba(5,7,17,.68);
  backdrop-filter:blur(10px);
}

.admin-topbar-title{font-weight:900;letter-spacing:.2px;}
.admin-topbar-right{display:flex;align-items:center;gap:10px;}

.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:rgba(0,0,0,.18);
  color:var(--text);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:900;
}

.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:var(--text);font-size:.82rem;font-weight:900;}

.admin-container{padding:16px;max-width:1100px;margin:0 auto;width:100%;}
.admin-container h1{margin:0 0 14px;font-size:1.45rem;font-weight:900;letter-spacing:.2px;}

.admin-footer{padding:10px 16px 18px;border-top:1px solid var(--border);background:rgba(0,0,0,.08);}
.admin-footer-inner{max-width:1100px;margin:0 auto;color:var(--muted-2);font-size:.82rem;text-align:center;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav-toggle{display:inline-flex;}

  .admin-sidebar{
    position:fixed;
    top:0;
    left:0;
    width:min(88vw,340px);
    max-width:340px;
    height:100vh;
    padding:18px 14px calc(24px + env(safe-area-inset-bottom));
    transform:translateX(-110%);
    transition:transform .22s ease;
    background:
      linear-gradient(180deg, rgba(14,24,48,.98), rgba(7,13,28,.985)),
      radial-gradient(480px 260px at 0% 0%, rgba(34,211,238,.10), transparent 60%);
    box-shadow:0 24px 80px rgba(0,0,0,.78);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  body.sidebar-open{overflow:hidden;}
  body.sidebar-open .admin-sidebar{transform:translateX(0);}

  .admin-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(2,6,18,.74);
    backdrop-filter:blur(4px);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    z-index:15;
  }
  body.sidebar-open .admin-overlay{opacity:1;pointer-events:auto;}

  .table{min-width:680px;}
}

@media (max-width:600px){
  .admin-container{padding:14px;}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* Help text (settings) */
.help-text{color:var(--muted-2);font-size:13px;line-height:1.55;margin-top:6px;}
.help-text code{background:rgba(255,255,255,.06);border:1px solid var(--border);padding:2px 6px;border-radius:8px;color:var(--text);}


/* ---------- Utilities ---------- */
.muted{color:var(--muted);margin-top:-6px;}
.grid{display:grid;gap:16px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width: 980px){
  .grid-2{grid-template-columns:1fr;}
}


/* Notice box */
.notice{margin:12px 0;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.notice a{color:inherit;text-decoration:underline}


/* ===== v100 Admin Ultra UI (Red Accent) ===== */
:root{
  --panel-hi:rgba(255,255,255,.06);
  --panel-glass:rgba(11,14,26,.62);
}

.admin-body{
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%),
    var(--bg);
}

.admin-topbar{
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter: blur(14px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(6,8,18,.68);
  border-bottom:1px solid var(--border);
}

.admin-brand{
  background:
    radial-gradient(600px 250px at 20% 0%, rgba(255,255,255,.10), transparent 60%),
    rgba(0,0,0,.16);
}

.nav-link{
  transition: transform .14s ease, background .14s ease, color .14s ease, border-color .14s ease;
}
.nav-link.active{
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.18);
  box-shadow: var(--accent-glow);
}
.nav-link:hover{ transform: translateY(-1px); }

.card{
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(255,255,255,.04), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    var(--panel);
  border-color: rgba(255,255,255,.10);
}

.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 38px rgba(0,0,0,.45), var(--accent-glow);
  transform: translateZ(0);
  transition: transform .12s ease, filter .12s ease;
}
.btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn-primary:active{ transform: translateY(0px) scale(.99); }

input, textarea, select{
  transition: box-shadow .14s ease, border-color .14s ease, transform .14s ease;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 4px rgba(255,255,255,.10);
}

.pill{
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

.table{
  overflow:hidden;
}
.table th{
  position:sticky;
  top:0;
  backdrop-filter: blur(12px);
  background: rgba(10,12,24,.78);
  z-index:1;
}
.table tr:hover td{
  background: rgba(255,255,255,.04);
}

/* Toast */
.toast-stack{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  min-width:240px;
  max-width:92vw;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,12,24,.88);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  display:flex;
  gap:10px;
  align-items:flex-start;
  animation: toastIn .28s ease both;
}
.toast .t-title{ font-weight:800; line-height:1.1; }
.toast .t-msg{ opacity:.82; font-size:.92rem; margin-top:2px; }
.toast.success{ border-color: rgba(52,211,153,.35); }
.toast.danger{ border-color: rgba(248,113,113,.42); }
.toast.info{ border-color: rgba(255,255,255,.18); }
.toast .dot{
  width:10px;height:10px;border-radius:999px;margin-top:4px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,255,255,.10);
}
.toast.success .dot{ background: var(--success); box-shadow: 0 0 0 4px rgba(52,211,153,.18); }
.toast.danger .dot{ background: var(--danger); box-shadow: 0 0 0 4px rgba(248,113,113,.16); }

@keyframes toastIn{
  from{ transform: translateY(10px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}
@keyframes toastOut{
  to{ transform: translateY(10px); opacity:0; }
}

/* Button loading */
.btn.is-loading{
  position:relative;
  opacity:.9;
  pointer-events:none;
}
.btn.is-loading::after{
  content:"";
  width:16px;height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.78);
  position:absolute;
  right:12px;
  top:50%;
  transform: translateY(-50%);
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: translateY(-50%) rotate(360deg);} }

/* Ripple */
.btn, .nav-link, .pill, .card{
  -webkit-tap-highlight-color: transparent;
}
.ripple{
  position:absolute;
  border-radius:999px;
  transform: scale(0);
  animation: ripple .55s ease-out;
  background: rgba(255,255,255,.20);
  pointer-events:none;
}
@keyframes ripple{
  to{ transform: scale(2.3); opacity:0; }
}

/* Login page */
.login-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.login-card{
  width:min(420px, 100%);
  border-radius:22px;
  padding:18px;
  background:
    radial-gradient(800px 260px at 20% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(10,12,24,.70);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 26px 70px rgba(0,0,0,.62);
}
.login-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.login-logo{
  display:flex;align-items:center;gap:10px;
}
.login-badge{
  width:44px;height:44px;border-radius:16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--accent-glow);
}
.login-title{ font-size:1.25rem;font-weight:900;margin:0; }
.login-sub{ margin:0; opacity:.72; font-size:.95rem; }
.login-foot{ margin-top:12px; font-size:.85rem; opacity:.72; }

/* Scrollbar (webkit) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); }
::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.20); }


/* ===== Performance Tweaks (ลดกระตุกบนมือถือ) ===== */
@media (max-width: 900px){
  :root{
    --shadow: 0 10px 22px rgba(0,0,0,.42);
    --accent-glow: 0 0 18px rgba(255,255,255,.08);
  }
  body::before{ animation: none !important; }
  .admin-topbar, .admin-sidebar, .table th{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .card{ transition: border-color .16s ease, box-shadow .16s ease; }
}

@media (hover:none){
  /* บนอุปกรณ์สัมผัส ปิด hover transform/glow เพื่อลด re-paint */
  .card:hover{
    transform:none !important;
    box-shadow: var(--shadow) !important;
    border-color: var(--border) !important;
  }
  .nav-link:hover{ transform:none !important; }
  .btn-primary:hover{ transform:none !important; filter:none !important; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* ---------- Settings page ---------- */
.settings-page-card{padding:20px;}
.settings-page-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px;}
.settings-status-grid{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:10px;min-width:min(100%,420px);}
.mini-stat{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:16px;padding:12px;}
.mini-stat span{display:block;font-size:.8rem;color:var(--muted);margin-bottom:4px;}
.mini-stat strong{font-size:.95rem;}
.mini-stat.is-ready{border-color:rgba(255,255,255,.20);background:rgba(255,255,255,.06);}
.settings-quick-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.chip-link{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);}
.chip-link:hover{text-decoration:none;background:rgba(255,255,255,.08);}
.settings-form-grid{display:grid;gap:16px;}
.settings-section{padding:18px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.02);}
.section-head{margin-bottom:12px;}
.section-help{margin:4px 0 0;color:var(--muted);font-size:.88rem;line-height:1.6;}
.subsection-box{padding:16px;border:1px solid var(--border);border-radius:16px;background:rgba(0,0,0,.14);margin-top:12px;}
.subsection-box h4{margin:0 0 10px;font-size:1rem;}
.info-panel{padding:14px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.03);}
.info-panel-title{font-weight:800;margin-bottom:8px;}
.code-block{display:block;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.24);border:1px solid var(--border);margin:8px 0 12px;overflow:auto;}
.action-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;}
.help-list{display:grid;gap:8px;margin-top:10px;color:var(--muted);font-size:.9rem;}
.code-textarea{min-height:240px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;line-height:1.55;}
.settings-submit-bar{display:flex;justify-content:flex-start;}

@media (max-width: 900px){
  .settings-status-grid{grid-template-columns:1fr;min-width:100%;}
  .settings-page-card{padding:16px;}
  .settings-section{padding:14px;}
}


/* ---------- Admin easy layout ---------- */
.page-intro{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;flex-wrap:wrap;margin:0 0 16px;}
.page-intro h1{margin:0 0 6px;font-size:1.5rem;}
.page-intro p{margin:0;color:var(--muted);max-width:70ch;line-height:1.6;}
.page-intro-actions{display:flex;gap:10px;flex-wrap:wrap;}
.compact-stats{margin-bottom:16px;}
.stack-form{display:grid;gap:2px;}
.inline-check{margin:12px 0 4px;}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.split-actions{justify-content:flex-start;}
.table-title{font-weight:700;}
.table-sub{font-size:.84rem;color:var(--muted-2);margin-top:3px;}
.table-actions{display:flex;gap:8px;flex-wrap:wrap;}
.table-empty{text-align:center;color:var(--muted);padding:18px 10px !important;}
.soft-note{background:rgba(255,255,255,.03);}
.clean-list div{padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02);}
@media (max-width: 900px){
  .page-intro{align-items:flex-start;}
  .page-intro-actions{width:100%;}
  .page-intro-actions .btn{flex:1;}
}


/* --- Admin split settings + catalog hub --- */
.settings-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.settings-hub-card{display:block;padding:20px;border-radius:20px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));color:var(--text);box-shadow:var(--shadow);}
.settings-hub-card:hover{text-decoration:none;border-color:rgba(255,255,255,.18);transform:translateY(-1px);}
.settings-hub-title{font-size:1.08rem;font-weight:800;margin-bottom:8px;}
.settings-hub-desc{color:var(--muted);line-height:1.6;min-height:48px;}
.settings-hub-link{margin-top:14px;font-weight:700;color:var(--text);}
.compact-form textarea,.compact-form input,.compact-form select{margin-bottom:0;}
.admin-easy-grid{align-items:start;}
.table-actions form{display:inline;}
@media (max-width:900px){.settings-hub-grid{grid-template-columns:1fr;} .table-actions{flex-direction:column;align-items:flex-start;}}


/* --- smoother admin refresh --- */
.admin-main{flex:1;min-width:0;animation:fadeSlideIn .28s ease;}
@keyframes fadeSlideIn{from{opacity:.0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.admin-container{width:min(1200px,calc(100% - 32px));margin:0 auto;padding:28px 0 42px;}
.admin-topbar{position:sticky;top:0;z-index:40;background:linear-gradient(180deg, rgba(8,8,8,.98), rgba(8,8,8,.94));backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08);}
.nav-link,.btn,.settings-hub-card,.card,.stat-box,input,textarea,select{transition:all .18s ease;}
.eyebrow{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--muted);font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;}
.dashboard-hero{padding:10px 2px 4px;}
.dashboard-hero h1{font-size:clamp(1.75rem,3vw,2.3rem);margin-bottom:10px;}
.dashboard-hero p{max-width:62ch;}
.settings-panel{padding-top:2px;}
.settings-button-card{position:relative;overflow:hidden;min-height:198px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));}
.settings-button-card::before{content:"";position:absolute;inset:0;background:radial-gradient(440px 160px at 0% 0%, rgba(255,255,255,.09), transparent 55%);opacity:.95;pointer-events:none;}
.settings-hub-tag{display:inline-flex;align-self:flex-start;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-size:.74rem;font-weight:800;color:var(--muted);margin-bottom:auto;position:relative;z-index:1;}
.settings-hub-title,.settings-hub-desc,.settings-hub-link{position:relative;z-index:1;}
.settings-hub-link{display:inline-flex;align-items:center;gap:8px;padding-top:4px;opacity:.95;}
.settings-hub-link::after{content:"→";transition:transform .16s ease;}
.settings-button-card:hover .settings-hub-link::after{transform:translateX(4px);}
.settings-button-card:hover{transform:translateY(-3px);box-shadow:0 22px 52px rgba(0,0,0,.58), var(--accent-glow);}
.stat-grid.compact-stats{grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;}
.stat-grid.compact-stats .stat-box{grid-column:span 4;padding:18px;border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));}
.stat-grid.compact-stats .stat-box:nth-child(4),.stat-grid.compact-stats .stat-box:nth-child(5){grid-column:span 6;}
.stat-box .stat-label{font-size:.92rem;color:var(--muted);}
.stat-box .stat-value{font-size:clamp(1.9rem,4vw,2.5rem);line-height:1.05;letter-spacing:-.03em;}
.table-wrapper{background:rgba(255,255,255,.02);} 
@media (max-width: 1024px){.stat-grid.compact-stats .stat-box{grid-column:span 6}.stat-grid.compact-stats .stat-box:nth-child(4),.stat-grid.compact-stats .stat-box:nth-child(5){grid-column:span 6}}
@media (max-width: 900px){.admin-container{width:min(100% - 24px,1200px);padding:22px 0 36px;}.dashboard-hero{padding-top:4px;}.stat-grid.compact-stats{grid-template-columns:1fr 1fr;gap:12px;}.stat-grid.compact-stats .stat-box,.stat-grid.compact-stats .stat-box:nth-child(4),.stat-grid.compact-stats .stat-box:nth-child(5){grid-column:auto;}.settings-button-card{min-height:172px;padding:18px;}}
@media (max-width: 640px){.stat-grid.compact-stats{grid-template-columns:1fr;}.card{border-radius:18px;padding:15px;}.table{min-width:520px;}.admin-topbar-title{font-size:1.05rem;}}

/* v101 split product/settings hub */
.admin-shortcuts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:0 0 18px;}
.shortcut-card{display:block;padding:18px 16px;border-radius:20px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));color:var(--text);box-shadow:var(--shadow);}
.shortcut-card:hover{text-decoration:none;transform:translateY(-2px);border-color:rgba(255,255,255,.18);}
.shortcut-card.active{border-color:rgba(255,255,255,.24);box-shadow:0 18px 44px rgba(0,0,0,.5), var(--accent-glow);background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.025));}
.shortcut-tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-size:.72rem;font-weight:800;color:var(--muted);margin-bottom:10px;}
.shortcut-title{font-size:1.02rem;font-weight:900;margin-bottom:6px;}
.shortcut-desc{color:var(--muted);line-height:1.55;min-height:44px;}
.shortcut-link{margin-top:12px;font-weight:800;opacity:.95;}
.shortcut-link::after{content:' →';}
.product-shortcuts-grid{margin-top:2px;}
.product-stats-grid .stat-box{grid-column:span 3;}
.settings-shortcuts-grid{margin-bottom:16px;}
.settings-shortcut-card{min-height:174px;display:flex;flex-direction:column;justify-content:flex-start;}
@media (max-width:900px){.product-stats-grid .stat-box{grid-column:auto;}.admin-shortcuts-grid{grid-template-columns:1fr;}}

/* v102 polish */
.nav-link-text{display:inline-flex;align-items:center;gap:10px;font-weight:800;}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:.8rem;}
.nav-arrow{opacity:.45;font-size:1.1rem;transition:transform .16s ease, opacity .16s ease;}
.nav-link:hover .nav-arrow,.nav-link.active .nav-arrow{opacity:.95;transform:translateX(2px);}
.admin-topbar-title-wrap{display:flex;flex-direction:column;gap:2px;min-width:0;}
.admin-topbar-kicker{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800;}
.admin-topbar-title{font-size:1.05rem;}
.settings-catalog-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.settings-catalog-card{min-height:220px;}
.settings-card-icon{position:absolute;top:18px;right:18px;width:54px;height:54px;border-radius:18px;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);z-index:1;}
.settings-overview-stats .stat-box{grid-column:span 4;}
.settings-overview-stats .stat-value{font-size:clamp(1.6rem,3vw,2.2rem);}
.settings-feature-card{min-height:100%;}
.feature-list{display:grid;gap:10px;}
.feature-list.compact{margin:10px 0 4px;}
.feature-item{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.03);}
.feature-item strong{font-size:.92rem;}
.feature-item span{color:var(--muted);text-align:right;word-break:break-word;}
.topup-status-grid .stat-box,.settings-overview-stats .stat-box{grid-column:span 4;}
.table-wrapper::-webkit-scrollbar{height:10px;width:10px;}
.table-wrapper::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px;}
.table-wrapper::-webkit-scrollbar-track{background:rgba(255,255,255,.04);}
.card, .shortcut-card, .settings-button-card, .stat-box{backdrop-filter:blur(12px);}
.page-intro h1{font-size:clamp(1.55rem,3.5vw,2.4rem);}
.page-intro.compact h1{font-size:clamp(1.45rem,3vw,2rem);}
.table td{line-height:1.5;}
.table code{display:inline-block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;}
@media (max-width:900px){
  .settings-catalog-grid{grid-template-columns:1fr;}
  .feature-item{flex-direction:column;align-items:flex-start;}
  .feature-item span{text-align:left;}
  .admin-topbar{padding:12px 14px;}
}
@media (max-width:640px){
  .admin-brand{padding:12px;}
  .admin-sidebar{width:min(86vw,320px);}
  .page-intro{margin-bottom:14px;}
  .shortcut-card,.settings-button-card{padding:16px;min-height:auto;}
  .settings-card-icon{width:46px;height:46px;border-radius:14px;}
  .table{min-width:640px;}
  .btn,.btn-primary,.btn-secondary,.btn-danger{min-height:44px;}
  input[type=text],input[type=password],input[type=number],textarea,select{min-height:46px;font-size:16px;}
}

/* v103 settings round buttons */
.settings-button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:16px;}
.round-action-card{display:flex;align-items:flex-start;gap:14px;padding:18px;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));box-shadow:var(--shadow);color:var(--text);}
.round-action-card:hover{text-decoration:none;transform:translateY(-2px);border-color:rgba(255,255,255,.22);box-shadow:0 18px 44px rgba(0,0,0,.5), var(--accent-glow);}
.round-action-icon{width:54px;height:54px;min-width:54px;border-radius:999px;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);font-size:1.25rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.round-action-body{display:flex;flex-direction:column;gap:6px;min-width:0;}
.round-action-tag{font-size:.76rem;font-weight:800;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;}
.round-action-title{font-size:1.08rem;font-weight:900;line-height:1.3;}
.round-action-desc{color:var(--muted);line-height:1.6;}
.round-action-link{margin-top:4px;font-weight:800;}
.round-action-link::after{content:' →';}
@media (max-width:640px){.settings-button-grid{grid-template-columns:1fr;}.round-action-card{padding:16px;border-radius:20px;}.round-action-icon{width:48px;height:48px;min-width:48px;}}


/* v104 mobile header and settings fixes */
.admin-topbar-title-wrap{flex:1;align-items:center;text-align:center;}
.admin-topbar-right{min-width:90px;justify-content:flex-end;}
.admin-topbar .pill{white-space:nowrap;}
@media (max-width:640px){.admin-topbar{min-height:82px;align-items:center;}.admin-topbar-title-wrap{padding:0 8px;}.admin-topbar-kicker{font-size:.68rem;}.admin-topbar-title{font-size:1.25rem;line-height:1.2;}.admin-topbar-right{min-width:auto;}.page-intro{padding-top:4px;}}


/* v105 product menu cards */
.product-menu-grid{margin:4px 0 20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.product-round-card{position:relative;min-height:170px;padding:20px;border-radius:24px;background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02));overflow:hidden;text-decoration:none !important;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;}
.product-round-card::before{content:"";position:absolute;inset:0;background:radial-gradient(460px 180px at 0% 0%, rgba(255,255,255,.09), transparent 58%);opacity:.95;pointer-events:none;}
.product-round-card > *{position:relative;z-index:1;}
.product-round-card:hover{background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03));}
.product-round-card.active{border-color:rgba(255,255,255,.24);background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04));box-shadow:0 22px 54px rgba(0,0,0,.56), var(--accent-glow);}
.product-round-icon{width:58px;height:58px;min-width:58px;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 30px rgba(0,0,0,.26);font-size:1.45rem;}
.product-round-card .round-action-body{gap:8px;}
.product-round-card .round-action-tag{display:inline-flex;width:max-content;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);}
.product-round-card .round-action-title{font-size:1.14rem;}
.product-round-card .round-action-desc{min-height:48px;}
.round-action-link{margin-top:auto;padding-top:6px;font-weight:800;color:#fff;opacity:.96;}
.round-action-link::after{content:" →";transition:transform .16s ease;display:inline-block;}
.product-round-card:hover .round-action-link::after,.product-round-card.active .round-action-link::after{transform:translateX(4px);}
@media (max-width:900px){.product-menu-grid{grid-template-columns:1fr;gap:14px;}.product-round-card{min-height:auto;padding:18px;border-radius:22px;}}

/* ===== v200 full visual redesign ===== */
:root{
  --bg:#07111f;
  --bg-2:#0b1730;
  --panel:#0d1a30;
  --panel-2:#12213d;
  --panel-3:#0a1530;
  --panel-4:rgba(14,25,48,.74);
  --border:rgba(167,191,255,.16);
  --border-strong:rgba(171,197,255,.28);
  --text:#eef4ff;
  --muted:rgba(223,232,255,.76);
  --muted-2:rgba(191,203,235,.62);
  --accent:#8b5cf6;
  --accent-2:#22d3ee;
  --accent-3:#38bdf8;
  --accent-soft:rgba(139,92,246,.18);
  --success:#34d399;
  --danger:#fb7185;
  --warning:#fbbf24;
  --shadow:0 22px 60px rgba(2,8,23,.48);
  --accent-glow:0 18px 50px rgba(56,189,248,.18);
}

body{
  background:
    radial-gradient(1200px 520px at -10% -10%, rgba(34,211,238,.16), transparent 58%),
    radial-gradient(900px 520px at 110% 0%, rgba(139,92,246,.20), transparent 56%),
    radial-gradient(800px 480px at 50% 100%, rgba(56,189,248,.10), transparent 60%),
    linear-gradient(180deg, #09111e 0%, #081221 48%, #070f1b 100%);
  color:var(--text);
}

body::before{
  background:
    radial-gradient(900px 420px at 5% 8%, rgba(34,211,238,.10), transparent 58%),
    radial-gradient(880px 420px at 94% 8%, rgba(139,92,246,.12), transparent 58%),
    radial-gradient(900px 420px at 50% 100%, rgba(59,130,246,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 38%);
  opacity:1;
}

a{color:inherit;}

a:hover{text-decoration:none;}

.btn,
.btn-primary,
.btn-secondary,
.btn-danger{
  min-height:44px;
  border-radius:16px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:none;
}

.btn{
  background:rgba(255,255,255,.04);
  border-color:var(--border);
}

.btn:hover,
.btn-secondary:hover{
  background:rgba(255,255,255,.08);
  border-color:var(--border-strong);
}

.btn-primary{
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, #8b5cf6 0%, #4f46e5 35%, #06b6d4 100%);
  box-shadow:0 18px 44px rgba(34,211,238,.18), 0 12px 30px rgba(79,70,229,.24);
}

.btn-primary:hover{
  filter:brightness(1.06);
  box-shadow:0 22px 54px rgba(34,211,238,.24), 0 14px 34px rgba(79,70,229,.28);
}

.btn-secondary{
  background:rgba(15,23,42,.64);
  border-color:rgba(167,191,255,.16);
}

.btn-danger{
  background:rgba(251,113,133,.10);
  color:#ffd5dd;
  border-color:rgba(251,113,133,.24);
}

input[type=text],
input[type=password],
input[type=number],
textarea,
select{
  background:rgba(10,19,36,.78);
  border:1px solid rgba(167,191,255,.15);
  border-radius:16px;
  color:var(--text);
  padding:12px 14px;
}

input::placeholder,
textarea::placeholder{color:rgba(211,223,255,.42);}

input:focus,textarea:focus,select:focus{
  border-color:rgba(34,211,238,.45);
  box-shadow:0 0 0 4px rgba(34,211,238,.12), 0 18px 34px rgba(0,0,0,.14);
}

.card,
.shortcut-card,
.settings-button-card,
.round-action-card,
.stat-box,
.settings-hub-card,
.product-round-card,
.login-card,
.public-feature-card,
.hero-window{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(9,18,36,.72);
  border:1px solid rgba(167,191,255,.14);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}

.card::after,
.product-round-card::before{opacity:.7;}

.card:hover,
.shortcut-card:hover,
.settings-hub-card:hover,
.round-action-card:hover,
.product-round-card:hover{
  border-color:rgba(34,211,238,.34);
  box-shadow:0 30px 70px rgba(2,8,23,.55), 0 18px 38px rgba(34,211,238,.10);
}

.badge,
.pill,
.public-chip,
.settings-hub-tag,
.round-action-tag,
.shortcut-tag{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(167,191,255,.14);
  color:var(--text);
}

.badge-green,
.badge-success{
  background:rgba(52,211,153,.12);
  border-color:rgba(52,211,153,.24);
  color:#bbf7d0;
}

.badge-blue{
  background:rgba(56,189,248,.12);
  border-color:rgba(56,189,248,.22);
  color:#c8f3ff;
}

.badge-red{
  background:rgba(251,113,133,.12);
  border-color:rgba(251,113,133,.22);
}

.badge-yellow{
  background:rgba(251,191,36,.12);
  border-color:rgba(251,191,36,.22);
  color:#fde68a;
}

.alert{
  border-radius:18px;
  padding:14px 16px;
  background:rgba(255,255,255,.04);
}

.alert-success{background:rgba(52,211,153,.10);}
.alert-error{background:rgba(251,113,133,.10);}

.table-wrapper{
  border-radius:20px;
  border:1px solid rgba(167,191,255,.12);
  background:rgba(5,12,24,.48);
}

.table th{
  background:rgba(11,20,39,.92);
  color:rgba(226,236,255,.74);
  font-size:.82rem;
  letter-spacing:.02em;
}

.table td{border-bottom:1px solid rgba(167,191,255,.09);}
.table tr:hover td{background:rgba(255,255,255,.03);}

.table-title{font-weight:800;color:var(--text);}
.table-sub,.section-help,.muted,.stat-label{color:var(--muted);}
.table-empty{color:var(--muted-2);text-align:center;padding:24px 16px;}

.page-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin:0 0 18px;
  padding:8px 0 6px;
}

.page-intro h1,
.public-hero h1,
.login-showcase h1{
  margin:0;
  line-height:1.05;
  letter-spacing:-.03em;
}

.page-intro p,
.public-hero p,
.login-showcase p{max-width:62ch;color:var(--muted);}

.eyebrow,
.public-kicker,
.login-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#b7ccff;
}

.eyebrow::before,
.public-kicker::before,
.login-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  box-shadow:0 0 0 6px rgba(56,189,248,.10);
}

.stat-box{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:18px;
}

.stat-box::before{
  content:"";
  position:absolute;
  inset:auto -15% 62% auto;
  width:140px;
  height:140px;
  background:radial-gradient(circle, rgba(34,211,238,.18), transparent 62%);
  pointer-events:none;
}

.stat-value{font-weight:900;letter-spacing:-.04em;}

.admin-shell{position:relative;}

.admin-sidebar{
  background:
    radial-gradient(500px 280px at 0% 0%, rgba(34,211,238,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(8,17,34,.88);
  border-right:1px solid rgba(167,191,255,.12);
  padding:18px 16px;
}

.admin-brand-modern{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(139,92,246,.20), rgba(34,211,238,.12));
  border:1px solid rgba(167,191,255,.16);
}

.admin-brand-mark,
.login-badge-modern,
.public-brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #8b5cf6, #06b6d4);
  color:#fff;
  box-shadow:0 14px 34px rgba(79,70,229,.24);
}

.admin-brand-mark{
  width:48px;
  height:48px;
  border-radius:18px;
  font-size:1.2rem;
  flex:0 0 auto;
}

.nav-link{
  min-height:52px;
  border-radius:18px;
  border:1px solid transparent;
}

.nav-link.active{
  background:linear-gradient(135deg, rgba(139,92,246,.24), rgba(34,211,238,.12));
  border-color:rgba(34,211,238,.18);
}

.nav-link.secondary-link{color:var(--muted);}

.nav-icon{
  width:34px;
  height:34px;
  font-size:1rem;
  background:rgba(255,255,255,.07);
  border-color:rgba(167,191,255,.14);
}

.admin-user-chip{
  background:rgba(255,255,255,.05);
  border-radius:18px;
}

.admin-topbar-modern{
  padding:14px 18px;
  border-bottom:1px solid rgba(167,191,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    rgba(8,15,30,.76);
}

.admin-topbar-right{gap:10px;}
.pill-live{background:rgba(52,211,153,.10);border-color:rgba(52,211,153,.24);color:#bbf7d0;}

.admin-container{max-width:1220px;padding:24px 18px 32px;}
.admin-footer{background:transparent;border-top:1px solid rgba(167,191,255,.08);}
.admin-footer-inner{color:var(--muted-2);}

.toast{
  background:rgba(7,15,30,.88);
  border-color:rgba(167,191,255,.14);
}

/* Public home */
.public-home-page{
  min-height:100vh;
}

.public-shell{
  width:min(1280px, calc(100% - 28px));
  margin:0 auto;
  padding:24px 0 38px;
}

.public-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
}

.public-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.public-brand-mark{
  width:48px;
  height:48px;
  border-radius:18px;
  font-size:1.15rem;
}

.public-brand strong{display:block;font-size:1rem;}
.public-brand small{display:block;color:var(--muted);font-size:.84rem;margin-top:2px;}

.public-main{display:grid;gap:24px;}

.public-hero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  gap:24px;
  align-items:center;
}

.public-hero-copy,
.public-hero-visual{
  position:relative;
}

.public-hero-copy{
  padding:10px 0;
}

.public-hero h1{
  font-size:clamp(2.4rem, 5vw, 4.8rem);
  max-width:10.5ch;
  margin-top:12px;
}

.public-hero p{
  font-size:1rem;
  line-height:1.75;
  margin:18px 0 0;
}

.public-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

.public-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.public-chip{
  border-radius:999px;
  padding:10px 12px;
  font-size:.82rem;
  font-weight:800;
}

.public-hero-visual{
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-window{
  width:min(100%, 520px);
  border-radius:32px;
  padding:18px;
  position:relative;
  overflow:hidden;
}

.hero-window::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(520px 220px at 0% 0%, rgba(34,211,238,.14), transparent 58%), radial-gradient(500px 240px at 100% 0%, rgba(139,92,246,.16), transparent 60%);
  pointer-events:none;
}

.hero-window > *{position:relative;z-index:1;}

.hero-window-top{display:flex;gap:8px;margin-bottom:18px;}
.hero-window-top span{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.32);}

.hero-mini-kpi-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}

.hero-mini-kpi,
.hero-chart-card,
.hero-list-card{
  border-radius:22px;
  padding:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(167,191,255,.12);
}

.hero-mini-kpi label,
.hero-chart-head span,
.hero-list-row span{display:block;color:var(--muted);font-size:.78rem;}
.hero-mini-kpi strong{display:block;font-size:1.45rem;margin-top:10px;}
.hero-mini-kpi small{display:inline-flex;margin-top:10px;padding:6px 9px;border-radius:999px;background:rgba(52,211,153,.12);color:#bbf7d0;font-size:.72rem;font-weight:800;}

.hero-chart-card{padding:16px;}
.hero-chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.hero-chart-bars{display:flex;align-items:flex-end;gap:10px;height:190px;}
.hero-chart-bars i{display:block;flex:1;border-radius:999px;background:linear-gradient(180deg, rgba(139,92,246,.92), rgba(34,211,238,.86));box-shadow:inset 0 1px 0 rgba(255,255,255,.22);}
.hero-chart-bars i:nth-child(1){height:44%;}
.hero-chart-bars i:nth-child(2){height:58%;}
.hero-chart-bars i:nth-child(3){height:72%;}
.hero-chart-bars i:nth-child(4){height:54%;}
.hero-chart-bars i:nth-child(5){height:82%;}
.hero-chart-bars i:nth-child(6){height:66%;}

.hero-list-card{margin-top:14px;display:grid;gap:10px;}
.hero-list-row{display:flex;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1px solid rgba(167,191,255,.08);}
.hero-list-row:last-child{border-bottom:none;}

.public-showcase{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.public-feature-card{
  border-radius:28px;
  padding:24px;
  min-height:210px;
}

.public-feature-tag{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(167,191,255,.12);
  color:#c8d8ff;
  font-size:.76rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.public-feature-card h2{margin:18px 0 10px;font-size:1.35rem;line-height:1.2;}
.public-feature-card p{margin:0;color:var(--muted);line-height:1.7;}

/* Login */
.split-login-shell{
  width:min(1240px, calc(100% - 28px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.82fr);
  gap:24px;
  padding:28px 0;
}

.login-showcase,
.login-panel-card{
  min-height:calc(100vh - 56px);
}

.login-showcase{
  display:flex;
  align-items:center;
  position:relative;
}

.login-showcase-inner{
  max-width:640px;
  padding:22px 8px;
}

.login-badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.login-badge-pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(167,191,255,.14);
  font-size:.8rem;
  font-weight:800;
}

.login-showcase h1{
  font-size:clamp(2.3rem,4vw,4.2rem);
  max-width:11ch;
  margin-bottom:14px;
}

.login-showcase p{line-height:1.8;margin:0 0 24px;}

.login-preview-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.login-preview-card{
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(167,191,255,.13);
}

.login-preview-card strong{display:block;margin-bottom:8px;font-size:1rem;}
.login-preview-card span{display:block;color:var(--muted);line-height:1.6;font-size:.92rem;}

.login-panel-card{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  padding:28px;
  border-radius:34px;
}

.login-head-modern{margin-bottom:0;}
.login-badge-modern{
  width:58px;
  height:58px;
  border-radius:20px;
  font-size:1.3rem;
}

.login-title{font-size:1.6rem;margin-top:4px;}
.login-form-card{border-radius:26px;padding:18px;}
.login-submit-btn{margin-top:16px;}
.modern-login-foot{display:grid;gap:4px;color:var(--muted);font-size:.88rem;}
.modern-login-foot span{color:var(--muted-2);}

/* Extra admin polish */
.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.section-head h2{margin:0;}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
.inline-check{margin-top:14px;}
.table-actions{display:flex;flex-wrap:wrap;gap:8px;}

.product-round-card,
.round-action-card,
.settings-hub-card,
.shortcut-card{overflow:hidden;}

.product-round-icon,
.round-action-icon,
.settings-hub-icon{
  background:linear-gradient(135deg, rgba(139,92,246,.24), rgba(34,211,238,.12));
  border-color:rgba(167,191,255,.16);
}

.round-action-title,
.settings-hub-title,
.shortcut-title{letter-spacing:-.01em;}
.round-action-desc,
.settings-hub-desc,
.shortcut-desc{color:var(--muted);}

/* Responsive */
@media (max-width: 1080px){
  .public-hero,
  .split-login-shell{grid-template-columns:1fr;}
  .public-hero h1,
  .login-showcase h1{max-width:none;}
  .public-hero-visual{min-height:auto;}
  .login-showcase,
  .login-panel-card{min-height:auto;}
}

@media (max-width: 900px){
  .public-shell,
  .split-login-shell{width:min(100% - 22px, 1000px);}
  .public-header{margin-bottom:20px;}
  .public-showcase,
  .login-preview-grid,
  .hero-mini-kpi-grid{grid-template-columns:1fr;}
  .admin-topbar-right .pill:first-child{display:none;}
  .admin-topbar-title-wrap{text-align:left;align-items:flex-start;}
  .admin-container{padding:20px 0 30px;width:min(100% - 8px, 1220px);}
}

@media (max-width: 640px){
  .public-shell{width:min(100% - 18px, 1000px);padding-top:18px;}
  .public-header{flex-direction:column;align-items:flex-start;}
  .public-hero{gap:18px;}
  .public-hero h1{font-size:clamp(2rem, 12vw, 3rem);}
  .public-feature-card,
  .login-panel-card,
  .hero-window{border-radius:24px;}
  .hero-window{padding:14px;}
  .login-panel-card{padding:20px;}
  .login-showcase-inner{padding:10px 0;}
  .login-preview-grid{gap:10px;}
  .login-preview-card{padding:15px;}
  .admin-sidebar{width:min(88vw, 340px);}
  .admin-topbar-modern{padding:12px 14px;}
  .admin-topbar-right .pill:last-child{display:none;}
  .page-intro{margin-bottom:14px;}
  .page-intro h1{font-size:1.55rem;}
}


/* v201 smoother interactions */
html{scroll-behavior:smooth;}
body{overflow-x:hidden;}
body, a, button, input, select, textarea{transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease,opacity .22s ease;}
.admin-sidebar,.admin-topbar,.card,.stat-box,.shortcut-card,.settings-hub-card,.product-round-card,.login-panel-card,.public-feature-card,.hero-window,.table-wrap,table,tr,td,th{transition:background-color .24s ease,border-color .24s ease,box-shadow .24s ease,transform .24s ease,opacity .24s ease;}
.card,.stat-box,.shortcut-card,.settings-hub-card,.product-round-card,.public-feature-card,.hero-window,.login-panel-card{transform:translateZ(0);}
.card:hover,.stat-box:hover,.shortcut-card:hover,.settings-hub-card:hover,.product-round-card:hover,.public-feature-card:hover,.hero-window:hover{transform:translateY(-4px);}
.table-wrap{overflow:hidden;}
table tbody tr{transition:background .18s ease, transform .18s ease;}
table tbody tr:hover{background:rgba(255,255,255,.04);}
.admin-sidebar{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.admin-main,.public-main{animation:pageRise .35s ease both;}
@keyframes pageRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}body, a, button, input, select, textarea,.admin-sidebar,.admin-topbar,.card,.stat-box,.shortcut-card,.settings-hub-card,.product-round-card,.login-panel-card,.public-feature-card,.hero-window,.table-wrap,table,tr,td,th,.admin-main,.public-main{transition:none !important;animation:none !important;}}


/* v106 mobile admin bugfix */
.admin-brand-copy{min-width:0;}
@media (max-width:900px){
  .admin-shell{display:block;overflow-x:hidden;}
  .admin-main{display:block;width:100%;min-width:0;animation:none;}
  .admin-topbar,.admin-topbar-modern{position:sticky;top:0;left:0;right:0;width:100%;} 
  .admin-container{display:block;width:min(100% - 24px,1220px) !important;max-width:none;margin:0 auto;padding:18px 0 28px !important;}
  .admin-footer-inner{width:min(100% - 24px,1220px);max-width:none;}
  body.sidebar-open .admin-overlay{opacity:1;pointer-events:auto;}
}
@media (max-width:640px){
  .admin-container{width:min(100% - 16px,1220px) !important;padding:16px 0 24px !important;}
  .admin-topbar,.admin-topbar-modern{min-height:84px;padding:12px 14px;}
  .admin-sidebar{width:min(86vw,320px);max-width:320px;padding-bottom:22px;}
  .page-intro,.page-intro.compact{margin-bottom:14px;padding-top:0;}
  .page-intro-actions{margin-top:10px;}
}

/* v107 hard mobile admin layout reset */
@media (max-width:900px){
  html,body.admin-body{max-width:100%;overflow-x:hidden;}
  .admin-body{background:var(--bg) !important;}
  .admin-shell{display:block !important;position:relative;min-height:100vh;overflow-x:hidden;}
  .admin-overlay{display:block !important;position:fixed !important;inset:0 !important;background:rgba(2,6,18,.72) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1000 !important;}
  .admin-sidebar{position:fixed !important;top:0 !important;left:0 !important;bottom:0 !important;height:100dvh !important;width:min(82vw,300px) !important;max-width:300px !important;margin:0 !important;transform:translate3d(-108%,0,0) !important;transition:transform .22s ease !important;z-index:1001 !important;overflow-y:auto !important;overscroll-behavior:contain;background:linear-gradient(180deg, rgba(11,19,39,.99), rgba(6,12,26,.99)) !important;box-shadow:0 24px 80px rgba(0,0,0,.7) !important;border-right:1px solid rgba(255,255,255,.08) !important;}
  body.sidebar-open .admin-sidebar{transform:translate3d(0,0,0) !important;}
  body.sidebar-open .admin-overlay{opacity:1 !important;pointer-events:auto !important;}
  .admin-main{display:block !important;width:100% !important;min-width:0 !important;margin:0 !important;padding:0 !important;transform:none !important;animation:none !important;}
  .admin-topbar,.admin-topbar-modern{position:sticky !important;top:0 !important;left:0 !important;right:0 !important;width:100% !important;margin:0 !important;z-index:999 !important;padding:12px 14px !important;min-height:82px !important;background:linear-gradient(180deg, rgba(8,13,28,.98), rgba(8,13,28,.94)) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
  .admin-topbar-title-wrap{flex:1;min-width:0;text-align:left !important;align-items:flex-start !important;}
  .admin-container{display:block !important;position:relative !important;width:calc(100% - 20px) !important;max-width:none !important;margin:0 auto !important;padding:16px 0 28px !important;min-height:calc(100vh - 82px) !important;transform:none !important;filter:none !important;}
  .admin-container > *{max-width:100%;}
  .page-intro,.page-intro.compact,.card,.settings-page-card,.settings-section,.table-wrap,.table-wrapper{transform:none !important;filter:none !important;}
  .grid,.grid-2,.settings-button-grid,.settings-hub-grid,.admin-shortcuts-grid,.stat-grid{grid-template-columns:1fr !important;}
  .admin-footer{padding:10px 0 18px !important;}
  .admin-footer-inner{width:calc(100% - 20px) !important;max-width:none !important;margin:0 auto !important;}
}

@media (max-width:640px){
  .admin-sidebar{width:min(84vw,290px) !important;max-width:290px !important;padding:14px 12px 20px !important;}
  .nav-toggle{display:inline-flex !important;align-items:center;justify-content:center;min-width:44px;min-height:44px;}
  .admin-container{width:calc(100% - 16px) !important;padding:14px 0 24px !important;}
  .card,.settings-section,.settings-page-card{padding:14px !important;border-radius:18px !important;}
}


/* v108 save + scroll hard fixes */
html, body { min-height: 100%; }
body.admin-body { overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: auto; }
.admin-main, .admin-container { overflow: visible; }
.server-flash { display:none; }

@media (max-width: 900px){
  html, body { height: auto !important; min-height: 100% !important; overflow-y: auto !important; }
  body.admin-body { position: static !important; }
  .admin-shell { min-height: 100dvh !important; height: auto !important; }
  .admin-main { min-height: 0 !important; }
  .admin-topbar, .admin-topbar-modern { position: sticky !important; }
  .admin-container { min-height: 0 !important; padding-bottom: 40px !important; }
  body:not(.sidebar-open) .admin-overlay { opacity: 0 !important; pointer-events: none !important; }
  body:not(.sidebar-open) .admin-sidebar { transform: translate3d(-108%,0,0) !important; }
}
@media (max-width: 640px){
  body.admin-body { -webkit-overflow-scrolling: touch; }
  .admin-container { padding-bottom: calc(34px + env(safe-area-inset-bottom)) !important; }
}

/* ==============================
   UI refresh override 2026-03-21
   ============================== */
:root{
  --bg:#070b16;
  --bg-soft:#0d1324;
  --panel:#0f172a;
  --panel-2:#111c34;
  --panel-3:#0b1427;
  --line:rgba(148,163,184,.18);
  --line-strong:rgba(148,163,184,.26);
  --text:#e5eefc;
  --muted:rgba(226,232,240,.72);
  --muted-2:rgba(148,163,184,.76);
  --accent:#7dd3fc;
  --accent-2:#a78bfa;
  --accent-3:#34d399;
  --shadow-lg:0 24px 80px rgba(2,6,23,.38);
  --shadow-md:0 18px 48px rgba(2,6,23,.26);
}

body{
  background:
    radial-gradient(900px 460px at 0% 0%, rgba(125,211,252,.16), transparent 55%),
    radial-gradient(760px 380px at 100% 0%, rgba(167,139,250,.12), transparent 58%),
    radial-gradient(860px 440px at 50% 100%, rgba(52,211,153,.10), transparent 62%),
    linear-gradient(180deg, #060914 0%, #091121 36%, #050913 100%);
  color:var(--text);
}

body::before{
  background:
    radial-gradient(800px 420px at 6% 8%, rgba(125,211,252,.08), transparent 60%),
    radial-gradient(680px 340px at 94% 10%, rgba(167,139,250,.08), transparent 58%),
    radial-gradient(860px 500px at 50% 100%, rgba(52,211,153,.05), transparent 60%);
}

.card,
.stat-box,
.round-action-card,
.settings-hub-card,
.hero-window,
.login-panel-card,
.public-feature-card,
.public-header,
.admin-topbar,
.admin-sidebar{
  border:1px solid var(--line) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)) !important;
  box-shadow:var(--shadow-md) !important;
}

.card,
.stat-box,
.public-feature-card,
.settings-hub-card,
.round-action-card,
.login-panel-card{
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.public-shell-refresh,
.split-login-shell,
.public-shell{
  width:min(100% - 36px, 1260px);
}

.public-header-refresh,
.public-header{
  margin-top:26px;
  padding:18px 20px;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(8,15,31,.85), rgba(10,18,35,.58)) !important;
}

.public-brand{
  gap:14px;
}

.public-brand-mark,
.admin-brand-mark,
.login-badge-modern{
  background:linear-gradient(135deg, rgba(125,211,252,.95), rgba(167,139,250,.95));
  color:#07111f;
  box-shadow:0 14px 28px rgba(125,211,252,.22);
}

.public-brand strong,
.admin-brand-title,
.admin-topbar-title,
.page-intro h1,
.public-hero h1,
.login-title,
.section-head h2,
.stat-value,
.round-action-title,
.settings-hub-title{
  letter-spacing:-.02em;
}

.public-hero-refresh,
.public-hero{
  align-items:center;
  gap:28px;
  padding:34px;
  margin-top:22px;
  border-radius:34px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(10,16,32,.88), rgba(10,17,34,.55));
  box-shadow:var(--shadow-lg);
}

.public-kicker,
.eyebrow,
.admin-topbar-kicker,
.round-action-tag,
.settings-hub-tag,
.public-feature-tag,
.login-kicker{
  color:#c7d6f6 !important;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.72rem;
  font-weight:800;
}

.public-hero-copy p,
.page-intro p,
.login-sub,
.section-help,
.public-feature-card p,
.settings-hub-desc,
.muted,
.help-text,
.table-sub,
.stat-meta,
.hero-panel-sub,
.dashboard-chart-sub{
  color:var(--muted) !important;
}

.public-hero-actions,
.form-actions,
.table-actions,
.page-intro-actions{
  gap:10px;
  flex-wrap:wrap;
}

.public-chip,
.hero-chip,
.pill,
.settings-hub-tag,
.public-feature-tag{
  border:1px solid rgba(148,163,184,.22) !important;
  background:rgba(15,23,42,.56) !important;
  color:#d7e7ff !important;
  box-shadow:none !important;
}

.pill.subtle{opacity:.9;}

.btn,
.btn-primary,
.btn-secondary,
.btn-danger{
  min-height:44px;
  border-radius:14px;
  font-weight:700;
}

.btn-primary{
  background:linear-gradient(135deg, #7dd3fc, #a78bfa) !important;
  color:#07111f !important;
  box-shadow:0 14px 28px rgba(125,211,252,.22);
}

.btn-secondary{
  background:rgba(15,23,42,.68) !important;
  border:1px solid rgba(148,163,184,.24) !important;
}

.btn-danger{
  background:rgba(239,68,68,.14) !important;
  color:#fecaca !important;
  border:1px solid rgba(248,113,113,.24) !important;
}

.hero-window-refresh,
.hero-window{
  min-height:520px;
  border-radius:30px;
  padding:22px;
  background:linear-gradient(180deg, rgba(8,15,31,.92), rgba(11,19,37,.72)) !important;
}

.hero-window-top span{
  background:rgba(226,232,240,.7);
}

.hero-mini-kpi-grid-refresh,
.hero-mini-kpi-grid{
  gap:14px;
}

.hero-mini-kpi,
.hero-chart-card,
.hero-list-card,
.dashboard-hero-panel{
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg, rgba(15,23,42,.78), rgba(15,23,42,.44));
  border-radius:24px;
}

.hero-mini-kpi{
  padding:16px;
}

.hero-mini-kpi strong{
  font-size:1.28rem;
}

.hero-chart-card-refresh,
.hero-chart-card{
  padding:18px;
}

.hero-chart-bars-refresh,
.hero-chart-bars{
  align-items:flex-end;
  min-height:190px;
  gap:10px;
}

.hero-chart-bars i,
.dashboard-chart-bar{
  border-radius:999px 999px 18px 18px;
  background:linear-gradient(180deg, rgba(125,211,252,.98), rgba(167,139,250,.88));
  box-shadow:0 12px 24px rgba(125,211,252,.18);
}

.hero-list-card-refresh,
.hero-list-card{
  padding:16px 18px;
}

.hero-list-row + .hero-list-row{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(148,163,184,.16);
}

.public-showcase-refresh,
.public-showcase{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.public-feature-card{
  padding:24px;
  border-radius:26px;
}

.admin-shell{
  grid-template-columns:300px minmax(0,1fr);
  gap:22px;
  width:min(100% - 26px, 1500px);
  padding:20px 0 24px;
}

.admin-sidebar{
  position:sticky;
  top:18px;
  height:calc(100vh - 36px);
  padding:18px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(8,15,31,.94), rgba(11,19,37,.78)) !important;
}

.admin-nav{
  margin-top:18px;
  gap:8px;
}

.nav-link{
  min-height:52px;
  padding:12px 14px;
  border-radius:18px;
}

.nav-link.active{
  background:linear-gradient(135deg, rgba(125,211,252,.18), rgba(167,139,250,.14)) !important;
  border-color:rgba(125,211,252,.22) !important;
}

.nav-icon{
  display:inline-flex;
  width:28px;
  justify-content:center;
}

.admin-user-chip{
  border-radius:18px;
  padding:12px 14px;
  background:rgba(15,23,42,.52);
  border:1px solid rgba(148,163,184,.18);
}

.admin-user-dot{
  background:linear-gradient(135deg, #34d399, #7dd3fc);
  box-shadow:0 0 0 5px rgba(52,211,153,.12);
}

.admin-main{min-width:0;}

.admin-topbar-modern,
.admin-topbar{
  position:sticky;
  top:18px;
  z-index:50;
  min-height:84px;
  margin-bottom:18px;
  padding:16px 20px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(8,15,31,.9), rgba(10,17,34,.68)) !important;
}

.nav-toggle{
  min-width:48px;
  min-height:48px;
  border-radius:16px;
  color:var(--text);
}

.admin-container{
  width:100%;
  max-width:none;
  padding:4px 0 32px;
}

.page-intro,
.page-intro.compact{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
  padding:10px 2px 2px;
}

.page-intro h1,
.public-hero h1,
.login-title{
  font-size:clamp(2rem, 3vw, 3.3rem);
  line-height:1.05;
  margin:8px 0 10px;
}

.page-intro h1{font-size:clamp(1.8rem, 2.6vw, 2.6rem);}

.dashboard-hero-refresh,
.product-page-hero{
  margin-bottom:22px;
}

.dashboard-hero{
  align-items:stretch;
}

.dashboard-hero-panel{
  min-width:min(100%, 340px);
  padding:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.hero-panel-label{
  color:#cfe1ff;
  font-weight:700;
}

.hero-panel-value{
  margin-top:12px;
  font-size:clamp(1.9rem, 3vw, 2.9rem);
  font-weight:900;
  letter-spacing:-.03em;
}

.hero-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.stat-grid{
  gap:16px;
}

.stat-grid-dashboard,
.compact-stats{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.stat-box{
  position:relative;
  padding:18px 18px 16px;
  border-radius:24px;
  overflow:hidden;
}

.stat-box::after{
  content:"";
  position:absolute;
  inset:auto -10% -55% auto;
  width:110px;
  height:110px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(125,211,252,.12), transparent 68%);
}

.stat-box-accent::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg, #7dd3fc, #a78bfa);
}

.stat-label{
  color:#cbdcfb;
  font-size:.88rem;
  font-weight:700;
}

.stat-value{
  margin-top:10px;
  font-size:clamp(1.45rem, 2vw, 2.15rem);
  font-weight:900;
}

.stat-meta{
  margin-top:8px;
  font-size:.88rem;
}

.dashboard-layout-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(320px, .8fr);
  gap:18px;
  margin-top:18px;
}

.dashboard-chart-card,
.dashboard-breakdown-card,
.dashboard-note-card,
.product-form-card,
.product-list-card{
  border-radius:28px;
}

.section-head-spaced{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.dashboard-chart-columns{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:end;
  min-height:320px;
  margin-top:18px;
}

.dashboard-chart-col{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  text-align:center;
}

.dashboard-chart-bar-wrap{
  width:100%;
  min-height:240px;
  padding:14px 12px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  border-radius:24px;
  border:1px solid rgba(148,163,184,.16);
  background:linear-gradient(180deg, rgba(15,23,42,.58), rgba(15,23,42,.32));
}

.dashboard-chart-bar{
  width:min(72px, 100%);
  min-height:44px;
}

.tone-cyan{background:linear-gradient(180deg, #7dd3fc, #38bdf8) !important;}
.tone-emerald{background:linear-gradient(180deg, #6ee7b7, #10b981) !important;}
.tone-violet{background:linear-gradient(180deg, #c4b5fd, #8b5cf6) !important;}
.tone-amber{background:linear-gradient(180deg, #fde68a, #f59e0b) !important;}

.dashboard-chart-label{font-weight:800;}
.dashboard-chart-value{font-size:.96rem;font-weight:700;}
.dashboard-chart-sub{font-size:.84rem;}

.progress-list{display:flex;flex-direction:column;gap:16px;margin-top:12px;}
.progress-item{padding:14px 16px;border-radius:20px;background:rgba(15,23,42,.42);border:1px solid rgba(148,163,184,.14);}
.progress-head,.progress-foot{display:flex;justify-content:space-between;gap:10px;}
.progress-head strong{font-size:.98rem;}
.progress-track{height:10px;border-radius:999px;background:rgba(148,163,184,.12);overflow:hidden;margin:10px 0 8px;}
.progress-fill{height:100%;border-radius:999px;}
.progress-foot{font-size:.84rem;color:var(--muted);}

.dashboard-bottom-grid{
  margin-top:18px;
  align-items:start;
}

.grid,
.grid-2,
.admin-easy-grid,
.settings-button-grid,
.settings-hub-grid{
  gap:18px;
}

.grid-2,
.admin-easy-grid,
.product-panels-grid,
.admin-account-grid{
  grid-template-columns:minmax(0, .92fr) minmax(0, 1.18fr);
}

.product-menu-grid-refresh,
.product-menu-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:18px;
}

.round-action-card,
.product-round-card{
  min-height:170px;
  padding:18px;
  border-radius:24px;
  text-decoration:none !important;
  background:linear-gradient(180deg, rgba(12,20,38,.85), rgba(12,20,38,.55)) !important;
}

.round-action-card.active,
.product-round-card.active{
  border-color:rgba(125,211,252,.28) !important;
  box-shadow:0 18px 44px rgba(125,211,252,.12), var(--shadow-md) !important;
}

.round-action-icon,
.product-round-icon,
.settings-hub-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(125,211,252,.18), rgba(167,139,250,.16));
  border:1px solid rgba(148,163,184,.16);
}

.round-action-desc{color:var(--muted) !important;line-height:1.65;}
.round-action-link{margin-top:auto;font-weight:800;color:#dcecff;}

.stack-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

input[type=text],
input[type=password],
input[type=number],
textarea,
select{
  min-height:48px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(8,15,31,.76) !important;
  border:1px solid rgba(148,163,184,.18) !important;
  color:var(--text) !important;
}

textarea{min-height:120px;}

input:focus,
textarea:focus,
select:focus{
  border-color:rgba(125,211,252,.42) !important;
  box-shadow:0 0 0 4px rgba(125,211,252,.12) !important;
}

.inline-check,
.checkbox-row,
.form-check{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:10px 14px;
  border-radius:16px;
  background:rgba(15,23,42,.42);
  border:1px solid rgba(148,163,184,.14);
}

.table-wrapper{
  overflow:auto;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(8,15,31,.45);
}

.table{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
}

.table thead th{
  position:sticky;
  top:0;
  z-index:1;
  padding:14px 16px;
  background:rgba(10,17,34,.92);
  color:#dbe8ff;
  font-size:.84rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(148,163,184,.16);
}

.table tbody td{
  padding:14px 16px;
  border-bottom:1px solid rgba(148,163,184,.10);
  vertical-align:top;
}

.table tbody tr:hover{background:rgba(125,211,252,.04);}

.table-title{font-weight:800;margin-bottom:4px;}
.table-sub{font-size:.84rem;line-height:1.55;}
.table-empty{text-align:center;padding:28px 16px;color:var(--muted);}

.badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:800;
  border:1px solid transparent;
}
.badge-blue{background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.2);color:#c7f1ff;}
.badge-green{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.2);color:#ccffe9;}
.badge-red{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.2);color:#ffd5d5;}
.badge-muted{background:rgba(148,163,184,.10);border-color:rgba(148,163,184,.16);color:#dbe7ff;}

.feature-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.feature-item{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.42);
}

.alert,
.notice,
.danger-notice{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(15,23,42,.5);
  color:var(--text);
}

.alert-error,
.danger-notice{
  border-color:rgba(248,113,113,.24);
  background:rgba(127,29,29,.18);
}

.alert-success{
  border-color:rgba(16,185,129,.24);
  background:rgba(6,78,59,.24);
}

.login-shell{
  width:min(100% - 30px, 1220px);
  min-height:100vh;
  padding:28px 0;
  gap:22px;
}

.login-showcase,
.login-panel-card{
  border-radius:30px;
  background:linear-gradient(180deg, rgba(8,15,31,.92), rgba(11,19,37,.7)) !important;
}

.login-showcase-inner,
.login-panel-card{
  padding:28px;
}

.login-preview-card{
  border:1px solid rgba(148,163,184,.16);
  background:rgba(15,23,42,.5);
  border-radius:22px;
}

.toast{
  border:1px solid rgba(148,163,184,.16) !important;
  background:linear-gradient(180deg, rgba(11,18,34,.95), rgba(11,18,34,.84)) !important;
  border-radius:18px !important;
  box-shadow:var(--shadow-md) !important;
}

.admin-footer{
  padding:8px 0 22px;
}

.admin-footer-inner{
  width:100%;
  max-width:none;
  padding:0 4px;
  color:var(--muted);
}

@media (max-width: 1180px){
  .dashboard-layout-grid{grid-template-columns:1fr;}
  .grid-2,
  .admin-easy-grid,
  .product-panels-grid,
  .admin-account-grid{grid-template-columns:1fr;}
}

@media (max-width: 1024px){
  .public-showcase-refresh,
  .public-showcase,
  .product-menu-grid-refresh,
  .product-menu-grid,
  .stat-grid-dashboard,
  .compact-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dashboard-chart-columns{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width: 900px){
  .admin-shell{display:block;width:calc(100% - 18px);padding:12px 0 18px;}
  .admin-topbar-modern,.admin-topbar{top:0;margin-bottom:14px;border-radius:18px;padding:14px;}
  .page-intro,.page-intro.compact{align-items:flex-start;flex-direction:column;}
  .public-shell-refresh,.public-shell,.split-login-shell{width:calc(100% - 18px);}
  .public-header-refresh,.public-header{margin-top:16px;padding:14px 16px;border-radius:20px;}
  .public-hero-refresh,.public-hero{padding:20px;border-radius:24px;}
  .dashboard-hero-panel{width:100%;min-width:0;}
}

@media (max-width: 640px){
  .public-showcase-refresh,
  .public-showcase,
  .product-menu-grid-refresh,
  .product-menu-grid,
  .stat-grid-dashboard,
  .compact-stats,
  .dashboard-chart-columns{grid-template-columns:1fr;}
  .public-header-actions,
  .public-header{width:100%;}
  .public-header{flex-direction:column;align-items:flex-start;gap:14px;}
  .hero-window-refresh,.hero-window{min-height:auto;padding:16px;border-radius:22px;}
  .card,.stat-box,.round-action-card,.settings-hub-card,.login-panel-card,.public-feature-card{border-radius:20px !important;}
  .table{min-width:680px;}
  .feature-item{flex-direction:column;align-items:flex-start;}
}


/* ===== UI refresh v2: shared hero + page polish ===== */
.hero-value{
  font-size:clamp(1.8rem, 4vw, 2.8rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--text);
}

.hero-subvalue{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.6;
}

.page-summary-card{
  min-height:100%;
}

.metric-inline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.42);
}

.metric-inline strong{
  display:block;
  font-size:.95rem;
}

.metric-inline span{
  color:var(--muted);
  text-align:right;
}

.metric-inline + .metric-inline{margin-top:10px;}

.card-head-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.soft-code{
  display:block;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.42);
  overflow:auto;
}

.login-credentials-card{
  margin-top:14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(15,23,42,.42);
}

.login-credentials-card strong{display:block;margin-bottom:8px;}
.login-credentials-card code{
  display:inline-flex;
  padding:5px 9px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.05);
  margin-right:8px;
}

@media (max-width: 640px){
  .metric-inline{flex-direction:column;align-items:flex-start;}
  .metric-inline span{text-align:left;}
  .login-credentials-card code{margin-bottom:8px;}
}


/* ===== v203 mobile/desktop fit overhaul ===== */
:root{
  --shell-gap: clamp(14px, 2vw, 28px);
  --shell-radius: 24px;
}

html, body{
  min-height:100%;
}

.admin-shell{
  display:grid;
  grid-template-columns: minmax(270px, 300px) minmax(0, 1fr);
  gap:0;
}

.admin-sidebar{
  width:auto;
  padding:18px 16px 20px;
  background:
    linear-gradient(180deg, rgba(7,17,37,.96), rgba(8,16,33,.98)),
    radial-gradient(480px 260px at 0% 0%, rgba(34,211,238,.10), transparent 60%);
}

.admin-brand,
.admin-topbar,
.card,
.stat-box,
.round-action-card,
.shortcut-card,
.settings-hub-card,
.settings-button-card{
  border-color:rgba(171,197,255,.16);
}

.admin-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:22px;
}

.admin-brand-mark{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg, rgba(139,92,246,.95), rgba(34,211,238,.9));
  box-shadow:0 16px 36px rgba(34,211,238,.16);
}

.admin-brand-title{
  font-size:1rem;
  line-height:1.2;
}

.admin-brand-sub{
  margin-top:2px;
  line-height:1.45;
}

.nav-link{
  min-height:52px;
  border-radius:18px;
  padding:12px 14px;
}

.admin-main{
  min-width:0;
}

.admin-topbar{
  gap:14px;
  padding:16px clamp(14px, 2vw, 24px);
  min-height:78px;
}

.admin-topbar-title-wrap{
  align-items:flex-start;
  text-align:left;
}

.admin-topbar-title{
  font-size:clamp(1.1rem, 2vw, 1.35rem);
  line-height:1.2;
}

.admin-topbar-right{
  flex-wrap:wrap;
  justify-content:flex-end;
}

.admin-container{
  width:min(1440px, calc(100% - (var(--shell-gap) * 2)));
  padding:clamp(16px, 2vw, 28px) 0 48px;
}

.page-intro,
.dashboard-hero,
.dashboard-hero-refresh{
  gap:18px;
}

.card,
.stat-box,
.round-action-card,
.shortcut-card,
.settings-hub-card,
.settings-button-card{
  border-radius:var(--shell-radius);
}

.card{
  padding:clamp(16px, 2vw, 24px);
}

.stack-form,
.settings-form-grid{
  gap:10px;
}

.section-head{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.section-head h2,
.card h2{
  line-height:1.25;
}

label,
.form-label{
  margin:0;
  font-size:.9rem;
  color:var(--muted);
}

input[type=text],
input[type=password],
input[type=number],
textarea,
select{
  min-height:48px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(6,14,28,.72);
  border-color:rgba(171,197,255,.14);
}

textarea{
  min-height:120px;
}

.form-actions,
.table-actions{
  gap:10px;
}

.form-actions .btn,
.table-actions .btn,
.table-actions form .btn{
  min-width:92px;
}

.table-wrapper{
  width:100%;
  overflow:auto;
  border-radius:20px;
}

.table{
  width:100%;
  min-width:760px;
}

.table th,
.table td{
  padding:14px 12px;
}

.table td{
  word-break:break-word;
}

.table code{
  max-width:100%;
}

.table-actions form{
  margin:0;
}

.table-empty{
  padding:26px 14px !important;
}

.hero-panel-value,
.stat-value{
  word-break:break-word;
}

img,
video,
canvas,
svg{
  max-width:100%;
}

.soft-code,
code.code-block,
.code-block,
.soft-note,
.notice{
  overflow:auto;
}

.admin-footer{
  padding:14px 16px 22px;
}

/* generic responsive table cards */
@media (max-width: 760px){
  .table-wrapper{
    overflow:visible;
    border:none;
    background:transparent;
  }

  .table,
  .table thead,
  .table tbody,
  .table tr,
  .table th,
  .table td{
    display:block;
    width:100%;
  }

  .table{
    min-width:0;
    border-collapse:separate;
    border-spacing:0;
  }

  .table thead{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  .table tbody{
    display:grid;
    gap:12px;
  }

  .table tr{
    border:1px solid rgba(171,197,255,.16);
    border-radius:20px;
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    box-shadow:var(--shadow);
    overflow:hidden;
  }

  .table td{
    border-bottom:1px solid rgba(171,197,255,.10);
    padding:12px 14px;
  }

  .table td:last-child{
    border-bottom:none;
  }

  .table td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:6px;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.02em;
    color:var(--muted);
    text-transform:none;
  }

  .table td[data-label=""]::before{
    display:none;
  }

  .table-actions{
    flex-direction:row;
    flex-wrap:wrap;
  }

  .table-actions .btn,
  .table-actions form,
  .table-actions form .btn{
    width:100%;
  }
}

@media (max-width: 980px){
  .admin-shell{
    display:flex;
  }

  .admin-container{
    width:min(100% - 24px, 1440px);
  }
}

@media (max-width: 900px){
  .admin-topbar{
    min-height:72px;
    padding:14px;
  }

  .admin-topbar-right{
    display:none;
  }

  .admin-topbar-title-wrap{
    align-items:center;
    text-align:center;
    padding-inline:6px;
  }

  .admin-sidebar{
    width:min(88vw, 340px);
    max-width:340px;
    padding:18px 14px calc(26px + env(safe-area-inset-bottom));
  }

  .page-intro,
  .dashboard-hero,
  .dashboard-hero-refresh{
    gap:14px;
  }

  .settings-button-grid,
  .product-menu-grid,
  .admin-shortcuts-grid,
  .settings-hub-grid,
  .settings-catalog-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  body{
    overflow-x:hidden;
  }

  .admin-container{
    width:min(100% - 18px, 1440px);
    padding-top:14px;
  }

  .card,
  .stat-box,
  .round-action-card,
  .shortcut-card,
  .settings-hub-card,
  .settings-button-card{
    border-radius:20px;
  }

  .card{
    padding:16px;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-danger{
    width:100%;
  }

  .form-actions{
    flex-direction:column;
  }

  .hero-chip-row,
  .page-intro-actions,
  .settings-quick-nav{
    width:100%;
  }

  .page-intro-actions .btn,
  .hero-chip-row > *,
  .settings-quick-nav > *{
    flex:1 1 auto;
  }
}