:root{
  --bg:#eff3f8;
  --panel:#ffffff;
  --panel-2:#f8fbff;
  --line:#e7edf5;
  --text:#121826;
  --muted:#6f7a8b;
  --primary:#2563eb;
  --primary-2:#38bdf8;
  --success:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;
  --purple:#7c3aed;
  --shadow:0 20px 50px rgba(15,23,42,.08);
  --shadow-sm:0 10px 24px rgba(15,23,42,.06);
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:16px;
  --radius-sm:12px;
}
body.dark{
  --bg:#0b1220;
  --panel:#10192b;
  --panel-2:#0f1728;
  --line:#1f2b44;
  --text:#e6edf7;
  --muted:#94a3b8;
  --primary:#60a5fa;
  --primary-2:#22d3ee;
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --shadow-sm:0 12px 28px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:
  radial-gradient(circle at top left, rgba(37,99,235,.10), transparent 20%),
  radial-gradient(circle at bottom right, rgba(56,189,248,.10), transparent 22%),
  var(--bg);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
.shell{
  max-width:1500px;margin:18px auto;padding:18px;border-radius:34px;
  background:rgba(255,255,255,.35);backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
}
body.dark .shell{background:rgba(16,25,43,.45)}
.app{
  display:grid;grid-template-columns:290px 1fr;gap:18px;min-height:calc(100vh - 36px);
}
.sidebar,.content,.auth-card,.doc{
  background:var(--panel);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);
}
.sidebar{padding:18px;display:flex;flex-direction:column}
.brand{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:18px
}
.brand-left{display:flex;gap:12px;align-items:center}
.logo{
  width:48px;height:48px;border-radius:16px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 16px 30px rgba(37,99,235,.25);position:relative;overflow:hidden
}
.logo:before,.logo:after{content:"";position:absolute;background:rgba(255,255,255,.92);border-radius:8px}
.logo:before{width:22px;height:22px;left:8px;top:14px;clip-path:polygon(0 0,100% 0,58% 50%,58% 100%,0 100%)}
.logo:after{width:17px;height:17px;right:8px;top:8px}
.brand h1{margin:0;font-size:1.15rem;font-weight:800;letter-spacing:-.03em}
.brand p{margin:4px 0 0;color:var(--muted);font-size:.88rem}
.muted{color:var(--muted)}
.menu-label{margin:22px 2px 10px;color:var(--muted);font-weight:700;font-size:.9rem}
.menu{display:grid;gap:6px}
.menu-item{
  display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:16px;
  transition:.2s ease;color:var(--text);font-weight:600
}
.menu-left{display:flex;align-items:center;gap:14px}
.menu-item:hover{background:var(--panel-2);transform:translateX(2px)}
.menu-item.active{background:linear-gradient(180deg,rgba(37,99,235,.12),rgba(56,189,248,.08));color:var(--primary)}
.icon-btn,.circle-btn,.ghost-btn,.solid-btn,.tag{
  border:1px solid var(--line);background:var(--panel);color:var(--text)
}
.badge{
  min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:#ff5f57;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800
}
.sidebar-footer{margin-top:auto;display:grid;gap:14px}
.divider{height:1px;background:var(--line);margin:10px 0 4px}
.pro{
  padding:18px;border-radius:20px;border:1px solid rgba(124,58,237,.12);
  background:linear-gradient(180deg,rgba(253,242,248,.95),rgba(238,242,255,.95))
}
body.dark .pro{background:linear-gradient(180deg,rgba(88,28,135,.20),rgba(30,41,59,.55))}
.pro .star{
  width:28px;height:28px;border-radius:999px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#e11d48,#7c3aed);margin-bottom:10px
}
.pro h3{margin:0 0 8px;font-size:1.35rem}
.pro p{margin:0 0 16px;color:var(--muted);line-height:1.5;font-size:.94rem}
.solid-btn{
  height:48px;padding:0 18px;border-radius:14px;cursor:pointer;border:none;
  background:linear-gradient(180deg,var(--primary-2),var(--primary));color:#fff;font-weight:700;
  box-shadow:0 16px 30px rgba(37,99,235,.22)
}
.ghost-btn{height:46px;padding:0 16px;border-radius:14px;cursor:pointer;font-weight:700}
.icon-btn,.circle-btn{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;cursor:pointer
}
.circle-btn{border-radius:50%;position:relative}
.circle-btn .dot{
  position:absolute;right:11px;top:11px;width:8px;height:8px;border-radius:999px;
  background:#ff5f57;border:2px solid var(--panel)
}
.content{overflow:hidden}
.topbar{
  display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 22px;
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.55))
}
body.dark .topbar{background:linear-gradient(180deg,rgba(16,25,43,.85),rgba(16,25,43,.55))}
.hero h2{margin:0;font-size:2rem;font-weight:800;letter-spacing:-.04em}
.hero p{margin:8px 0 0;color:var(--muted)}
.topbar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.search{
  min-width:370px;height:54px;border-radius:16px;border:1px solid var(--line);background:var(--panel);
  display:flex;align-items:center;gap:10px;padding:0 16px
}
.search input,.mini-search input,.auth-field input{
  width:100%;border:none;outline:none;background:transparent;color:var(--text)
}
.profile{
  display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;border:1px solid var(--line);
  background:var(--panel);border-radius:999px
}
.avatar{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1d4ed8
}
.main{padding:20px;display:grid;gap:18px;background:linear-gradient(180deg,var(--panel),var(--panel-2))}
.grid-top{display:grid;grid-template-columns:1.25fr 1fr;gap:18px}
.left-grid{display:grid;gap:18px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(230px,1fr));gap:18px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)
}
.stat-head,.section-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 18px 12px
}
.stat-title{display:flex;align-items:center;gap:12px;font-weight:700}
.stat-icon{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center
}
.stat-icon.blue{background:rgba(37,99,235,.12);color:var(--primary)}
.stat-icon.gold{background:rgba(245,158,11,.12);color:var(--warning)}
.stat-body{
  padding:14px 18px 20px;border-top:1px solid var(--line);display:flex;align-items:end;justify-content:space-between;gap:12px
}
.value{font-size:2rem;font-weight:800;letter-spacing:-.04em}
.trend{color:var(--muted);font-size:.94rem}.up{color:var(--success);font-weight:800}.down{color:var(--danger);font-weight:800}
.chart-card{padding-bottom:8px}
.legend{display:flex;gap:16px;color:var(--muted);font-size:.92rem;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{width:10px;height:10px;border-radius:999px;display:inline-block}
.select{
  height:42px;border-radius:12px;padding:0 14px;border:1px solid var(--line);background:var(--panel);color:var(--text)
}
.chart-wrap{padding:10px 10px 16px}
.cards-panel .section-head{padding-bottom:16px;border-bottom:1px solid var(--line)}
.cards-list{display:grid;gap:14px;padding:16px}
.pay-card{
  display:grid;grid-template-columns:1fr 190px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,var(--panel),var(--panel-2))
}
.pay-main{padding:18px;display:grid;gap:8px}
.pay-side{padding:18px 16px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:16px;justify-content:center}
.amount{font-size:1.18rem;font-weight:800;letter-spacing:-.03em}
.pill{
  width:max-content;padding:8px 14px;border-radius:10px;font-size:.86rem;font-weight:700
}
.pill.success{background:rgba(34,197,94,.12);color:var(--success)}
.pill.danger{background:rgba(239,68,68,.12);color:var(--danger)}
.brand-row,.num-row{display:flex;justify-content:space-between;gap:10px}
.num-row{letter-spacing:.14em;color:var(--muted);font-weight:700;font-size:.82rem}
.mc,.visa,.amz{
  width:38px;height:24px;border-radius:8px;display:inline-block;position:relative;overflow:hidden
}
.mc:before,.mc:after{content:"";position:absolute;top:2px;width:20px;height:20px;border-radius:50%}
.mc:before{left:6px;background:#ef4444}.mc:after{right:6px;background:#f59e0b}
.visa{background:#1d4ed8;color:#fff;font:700 10px/24px Inter,sans-serif;text-align:center}
.visa:before{content:"VISA"}
.amz{background:#111827;color:#fff;font:700 8px/24px Inter,sans-serif;text-align:center}
.amz:before{content:"amazon"}
.table-card{padding-top:8px}
.table-tools{
  display:flex;justify-content:space-between;gap:14px;align-items:center;padding:8px 18px 18px;flex-wrap:wrap
}
.mini-search{
  width:240px;height:46px;border-radius:14px;border:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--panel)
}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
thead th{
  text-align:left;padding:16px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  color:var(--muted);font-size:.9rem;background:var(--panel);white-space:nowrap
}
tbody td{padding:16px 18px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:.95rem}
tbody tr:hover td{background:rgba(37,99,235,.03)}
.customer{display:flex;align-items:center;gap:10px}
.photo{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.82rem;font-weight:800
}
.one{background:linear-gradient(135deg,#fb923c,#ef4444)}
.two{background:linear-gradient(135deg,#818cf8,#2563eb)}
.three{background:linear-gradient(135deg,#2dd4bf,#14b8a6)}
.four{background:linear-gradient(135deg,#f59e0b,#f97316)}
.status{
  display:inline-flex;min-width:90px;justify-content:center;padding:8px 12px;border-radius:10px;font-size:.86rem;font-weight:800
}
.status.success{background:rgba(34,197,94,.12);color:var(--success)}
.status.pending{background:rgba(239,68,68,.12);color:var(--danger)}
.status.review{background:rgba(245,158,11,.12);color:var(--warning)}
.actions-col button{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--panel);cursor:pointer;color:var(--muted)
}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kpi{
  padding:18px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel-2))
}
.kpi small{color:var(--muted);display:block;margin-bottom:8px;font-weight:600}
.kpi strong{font-size:1.45rem;letter-spacing:-.03em}
.drawer{
  position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;padding:20px;z-index:50
}
.drawer.show{display:flex}
.modal{
  width:min(560px,100%);background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:22px
}
.modal h3{margin:0 0 6px}
.modal p{margin:0 0 18px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:8px}
.field input,.field select{
  height:48px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);padding:0 14px;outline:none
}
.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:18px}
.auth-page{
  min-height:100vh;display:grid;place-items:center;padding:24px;background:
  radial-gradient(circle at top left, rgba(37,99,235,.14), transparent 24%),
  radial-gradient(circle at bottom right, rgba(124,58,237,.10), transparent 20%),
  var(--bg)
}
.auth-wrap{
  width:min(1100px,100%);display:grid;grid-template-columns:1.1fr .9fr;gap:20px
}
.auth-showcase{
  padding:28px;border-radius:28px;background:linear-gradient(135deg,#0f172a,#1d4ed8 55%,#22d3ee);color:#fff;
  box-shadow:var(--shadow);min-height:650px;display:flex;flex-direction:column;justify-content:space-between
}
.auth-showcase h1{font-size:3rem;line-height:1.02;margin:0 0 16px;letter-spacing:-.05em}
.auth-showcase p{max-width:520px;color:rgba(255,255,255,.82);line-height:1.6}
.feature-list{display:grid;gap:12px;margin-top:24px}
.feature-item{
  padding:14px 16px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.08);backdrop-filter:blur(6px)
}
.auth-card{padding:30px}
.auth-card h2{margin:0;font-size:2rem;letter-spacing:-.04em}
.auth-card p{color:var(--muted);line-height:1.6}
.auth-stack{display:grid;gap:14px}
.auth-field{display:grid;gap:8px}
.auth-field input{
  height:52px;padding:0 16px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text)
}
.demo-box{
  margin-top:18px;padding:16px;border-radius:18px;border:1px solid var(--line);background:var(--panel-2)
}
.demo-grid{display:grid;gap:10px}
.demo-login{
  padding:12px 14px;border-radius:14px;border:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center
}
.doc-shell{max-width:1080px;margin:24px auto;padding:20px}
.doc{padding:28px}
.doc h1,.doc h2,.doc h3{letter-spacing:-.03em}
.doc code{background:var(--panel-2);padding:2px 6px;border-radius:8px}
.doc pre{
  padding:18px;background:var(--panel-2);border:1px solid var(--line);border-radius:18px;overflow:auto
}
@media (max-width:1200px){
  .app{grid-template-columns:100px 1fr}
  .brand h1,.brand p,.menu-label,.label-text,.pro h3,.pro p,.pro button span{display:none}
  .brand,.menu-item,.pro{justify-content:center}
  .brand-left{justify-content:center}
}
@media (max-width:1050px){
  .grid-top,.auth-wrap{grid-template-columns:1fr}
  .stats,.kpi-row{grid-template-columns:repeat(2,1fr)}
  .search{min-width:100%}
}
@media (max-width:820px){
  .shell{margin:0;padding:10px;border-radius:0}
  .app{grid-template-columns:1fr}
  .sidebar{order:2}.content{order:1}
  .pay-card{grid-template-columns:1fr}
  .pay-side{border-left:none;border-top:1px solid var(--line)}
  .stats,.kpi-row,.form-grid{grid-template-columns:1fr}
  .topbar,.table-tools{align-items:stretch;flex-direction:column}
  .mini-search{width:100%}
}