:root{
  --bg: #0d0b0a;
  --bg-elev: #131010;
  --card: #191312;
  --text: #f8efe9;
  --muted: #d9c8be;
  --brand: #ff7a18; /* orange */
  --accent: #ff3d00; /* orange-red */
  --ring: rgba(255,122,24,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.55);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1600px 800px at -10% -20%, rgba(255,122,24,.09), transparent 40%),
              radial-gradient(1600px 1000px at 110% 120%, rgba(255,61,0,.08), transparent 40%),
              linear-gradient(180deg, var(--bg), #0a0908);
  color: var(--text);
  min-height: 100vh;
  letter-spacing: .2px;
}

/* Nav */
.nav{ position: sticky; top:0; z-index:50; backdrop-filter: saturate(140%) blur(8px); background: rgba(12,10,9,.6); border-bottom: 1px solid rgba(255,255,255,.06) }
.nav-inner{ max-width: 1200px; margin: 0 auto; display:flex; align-items:center; justify-content:space-between; padding: 12px 20px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--text); font-weight: 800; letter-spacing:.4px }
.brand-logo{ width:36px;height:36px;border-radius:10px; background: linear-gradient(135deg, var(--brand), var(--accent)); box-shadow: 0 6px 18px var(--ring) }
.nav-links{ display:flex; gap:20px; align-items:center }
.nav-links a{ color:var(--text); text-decoration:none; font-weight:600; opacity:.9; padding:8px 12px; border-radius:10px }
.nav-links a:hover, .nav-links a[aria-current="page"]{ background: rgba(255,255,255,.08); opacity:1 }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); text-decoration:none; color: var(--text); font-weight:800; transition: transform .12s ease, box-shadow .2s ease, background .2s ease; background: linear-gradient(180deg, #201614, #1a1412); box-shadow: var(--shadow) }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 34px rgba(0,0,0,.55) }
.btn-primary{ background: linear-gradient(135deg, var(--brand), var(--accent)); color:#140b09; border:none }
.menu-toggle{ display:none }
.mobile-menu{ display:none }
@media (max-width:900px){
  .nav-links{display:none}
  .menu-toggle{display:inline-flex}
  .mobile-menu{ display:none; position:fixed; inset:64px 12px auto 12px; z-index:40; background: var(--bg-elev); border:1px solid rgba(255,255,255,.08); border-radius: 16px; box-shadow: var(--shadow); padding:12px }
  .mobile-menu a{ display:block; padding:12px; border-radius:10px; text-decoration:none; color:var(--text) }
  .mobile-menu a:hover{ background: rgba(255,255,255,.08) }
}

/* Layouts */
.container{ max-width:1200px; margin: 36px auto; padding: 0 20px }
.hero{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items:center }
@media (max-width: 900px){ .hero{ grid-template-columns: 1fr } }
.kicker{ color: var(--brand); font-weight: 800; letter-spacing: .18em; font-size: 12px; text-transform: uppercase }
.h1{ font-size: clamp(28px, 5vw, 52px); line-height: 1.08; margin: 10px 0 14px }
.lead{ color: var(--muted); font-size: clamp(15px, 2vw, 18px); max-width: 56ch }
.card{ background: var(--card); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow) }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px }
@media (max-width: 1000px){ .grid-3{ grid-template-columns: 1fr 1fr } }
@media (max-width: 640px){ .grid-3{ grid-template-columns: 1fr } }
.placeholder{ border:1px dashed rgba(255,255,255,.18); border-radius: 12px; height: 320px; display:flex; align-items:center; justify-content:center; color:var(--muted) }

.footer{ border-top:1px solid rgba(255,255,255,.08); background:#0a0908; margin-top: 80px }
.footer-inner{ max-width: 1200px; margin: 0 auto; padding: 26px 20px; display:flex; gap: 24px; align-items:center; justify-content:space-between; flex-wrap:wrap }
.footer a{ color: var(--muted); text-decoration:none }
.footer a:hover{ color: var(--text) }

/* Dashboard */
.layout{ display:grid; grid-template-columns: 240px 1fr; gap: 20px }
@media (max-width: 1000px){ .layout{ grid-template-columns: 1fr } }
.sidebar{ background: var(--card); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 16px; position: sticky; top: 84px; height: fit-content }
.side-item{ display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: var(--text); text-decoration:none }
.side-item:hover{ background: rgba(255,255,255,.08) }
.kpis{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
@media (max-width: 900px){ .kpis{ grid-template-columns: 1fr 1fr } }
.kpi{ background: var(--card); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 16px }
.kpi .label{ margin: 0; font-size: 12px }
.kpi .value{ font-size: 24px; font-weight: 900; margin-top: 6px }
.table{ width:100%; border-collapse: collapse; margin-top: 8px }
.table th, .table td{ text-align:left; padding: 12px 10px; border-bottom:1px solid rgba(255,255,255,.08) }
.badge{ padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight:900; color:#140b09; background: linear-gradient(135deg, var(--brand), var(--accent)) }

/* Forms */
.input{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:#120e0d; color:var(--text); outline:none }
.input:focus{ border-color: var(--brand); box-shadow: 0 0 0 6px var(--ring) }
.label{ color: var(--muted); font-weight:700; font-size:14px; margin-bottom:8px; display:block }

/* Admin */
.admin-controls{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px }
textarea.json{ width:100%; min-height: 140px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:#120e0d; color:var(--text); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:12px }