:root{
  --accent:#f9740a;
  --bg:#0b0b0f;
  --card:#12121a;
  --text:#f5f6f7;
  --muted:#a9acb2;
  --border:rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius: 16px;
  --max: 1160px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
[data-theme="light"]{
  --bg:#ffffff;
  --card:#f7f7fb;
  --text:#101114;
  --muted:#5c5f66;
  --border:rgba(0,0,0,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 16px}
.nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:12px}
.menu{display:flex;gap:14px;align-items:center;color:var(--muted)}
.menu a:hover{color:var(--text)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:12px;border:1px solid var(--border);
  background:var(--bg);color:var(--text);cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#111;border-color:transparent;font-weight:800}
.btn-ghost{background:transparent}
.grid{display:grid;gap:14px}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.hero{padding:44px 0 10px}
.hero-wrap{display:grid;gap:18px;grid-template-columns: 1.2fr .8fr; align-items:center}
.hero h1{font-size:44px;line-height:1.05;margin:0}
.hero p{color:var(--muted);margin:10px 0 18px;font-size:16px}
.hero-media{padding:18px;display:flex;align-items:center;justify-content:center;min-height:280px}
.tabs{display:flex;gap:10px;margin:8px 0 10px}
.tab{padding:8px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);cursor:pointer}
.tab.active{border-color:color-mix(in oklab, var(--accent) 60%, var(--border));color:var(--text); background:#f7e7dd;}
.section{padding:22px 0}
.section h2{margin:0 0 12px;font-size:22px}
.muted{color:var(--muted)}
.bento{grid-template-columns: repeat(3, minmax(0, 1fr))}
.bento .card{padding:16px}
.kpi{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.kpi .badge{border-color:color-mix(in oklab, var(--accent) 20%, var(--border))}
.catgrid{grid-template-columns: repeat(4, minmax(0, 1fr))}
.catgrid .card{padding:14px}
.card .title{font-weight:800;margin:8px 0 6px}
.card .desc{color:var(--muted);font-size:13px;line-height:1.4}

.admin-wrap{display:grid;grid-template-columns: 250px 1fr; gap:16px; align-items:start}
.sidebar{position:sticky;top:78px}
.side{padding:12px}
.side a{display:flex;gap:10px;align-items:center;padding:10px 10px;border-radius:12px;color:var(--muted)}
.side a.active, .side a:hover{background:color-mix(in oklab, var(--accent) 12%, transparent);color:var(--text);border:1px solid color-mix(in oklab, var(--accent) 18%, var(--border))}
.flash{padding:10px 12px;border-radius:12px;border:1px solid color-mix(in oklab, var(--accent) 30%, var(--border));background:color-mix(in oklab, var(--accent) 12%, transparent);margin-bottom:12px}

.footer{padding:34px 0;border-top:1px solid var(--border);color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

@media (max-width: 980px){
  .hero-wrap{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  .bento{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .catgrid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .menu{display:none}
  .admin-wrap{grid-template-columns: 1fr}
  .sidebar{position:relative;top:auto}
}

@media only screen and (max-width: 480px) {
.nav-inner{discplay:flex;align-items:center;justvify-content:space-between;padding:12px 0;gap:6px}

}