* { box-sizing: border-box; }
:root {
  --bg:#0a0b10;
  --panel:#11131b;
  --panel-2:#171a24;
  --line:#262a36;
  --text:#f5f7fb;
  --muted:#9da5b5;
  --accent:#8b5cf6;
  --accent-2:#6d28d9;
  --danger:#ef4444;
  --radius:18px;
}
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.tiny { font-size:12px; color:var(--muted); }
.eyebrow { font-size:11px; letter-spacing:.16em; color:#a9b1c1; text-transform:uppercase; font-weight:800; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:#151823; text-decoration:none; }
.btn:hover { border-color:#3c4252; }
.btn.primary { background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent; }
.btn.danger { color:#fecaca; border-color:#5b1f25; background:#251114; }
.btn.small { padding:8px 12px; font-size:13px; }
.btn.full { width:100%; }
.screen { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-screen { background:radial-gradient(circle at 50% 0%, rgba(139,92,246,.16), transparent 35%), var(--bg); }
.login-card { width:min(420px,100%); background:rgba(17,19,27,.94); border:1px solid var(--line); border-radius:24px; padding:32px; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.brand-mark { width:64px; height:64px; display:grid; place-items:center; border-radius:17px; margin:0 auto 14px; font-weight:900; font-size:20px; background:linear-gradient(135deg,var(--accent),#4f46e5); }
.brand-mark.small { width:42px; height:42px; border-radius:12px; margin:0; font-size:15px; }
.brand-title { text-align:center; font-size:24px; font-weight:900; letter-spacing:.03em; }
.brand-title span { color:#a78bfa; }
.small-title { text-align:left; font-size:16px; }
.login-card form, .stack-form { display:flex; flex-direction:column; gap:10px; margin-top:22px; }
label { font-size:13px; color:#c9ced8; margin-top:3px; }
input,textarea,select { width:100%; background:#0d0f15; color:var(--text); border:1px solid var(--line); border-radius:12px; padding:12px 13px; outline:none; }
input:focus,textarea:focus,select:focus { border-color:#6951b8; }
textarea { resize:vertical; }
.form-message { min-height:20px; color:#fca5a5; font-size:13px; }
.app { min-height:100vh; display:grid; grid-template-columns:260px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; border-right:1px solid var(--line); padding:20px 14px; display:flex; flex-direction:column; background:#0d0f15; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:6px 8px 20px; }
.category-nav { overflow:auto; display:flex; flex-direction:column; gap:4px; }
.side-link { width:100%; border:0; background:transparent; color:#b9c0cd; text-align:left; padding:11px 12px; border-radius:11px; text-decoration:none; display:flex; align-items:center; gap:8px; }
.side-link:hover { background:#151823; color:white; }
.logout { margin-top:auto; }
.sidebar-bottom { margin-top:auto; border-top:1px solid var(--line); padding-top:10px; }
.main { min-width:0; }
.topbar { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:22px 28px; border-bottom:1px solid var(--line); background:rgba(10,11,16,.86); backdrop-filter:blur(18px); }
.topbar h1 { margin:4px 0 0; font-size:28px; }
.user-pill { display:flex; align-items:center; gap:9px; color:#d5dae4; }
.avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#252939; font-weight:800; }
.content-wrap { padding:28px; }
.hero { padding:30px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg,#171a24,#10121a); margin-bottom:24px; }
.hero h2 { font-size:34px; max-width:800px; margin:8px 0; }
.grid { display:grid; gap:18px; }
.cards-grid { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.feature-card,.content-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#10121a; padding:0; color:var(--text); min-height:220px; text-align:left; }
.feature-card img,.content-card img { width:100%; height:100%; min-height:220px; object-fit:cover; display:block; }
.feature-placeholder,.content-placeholder { min-height:220px; display:grid; place-items:center; background:linear-gradient(135deg,#171a24,#0f1118); font-weight:900; letter-spacing:.14em; color:#bda8ff; text-align:center; }
.feature-overlay { position:absolute; inset:auto 0 0; padding:22px 16px 15px; background:linear-gradient(transparent,rgba(0,0,0,.92)); }
.feature-name { font-size:16px; font-weight:800; }
.feature-cta,.content-action { margin-top:8px; font-size:11px; letter-spacing:.11em; font-weight:900; color:#c7b2ff; }
.content-card { min-height:270px; }
.content-card img,.content-card .content-placeholder { min-height:270px; }
.content-info { position:absolute; inset:auto 0 0; padding:28px 16px 15px; background:linear-gradient(transparent,rgba(0,0,0,.96)); }
.content-title { font-weight:800; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:18px; margin:20px 0; }
.section-head h2 { margin:5px 0 0; }
.count-badge { border:1px solid var(--line); background:#141720; border-radius:999px; padding:7px 11px; font-size:12px; color:#c7ccd6; }
.back-btn { border:0; background:transparent; color:#c5cbd7; padding:0; margin-bottom:16px; }
.detail-card { display:grid; grid-template-columns:minmax(280px,44%) 1fr; background:#11131b; border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.detail-image-wrap { background:#0b0d12; min-height:500px; display:grid; place-items:center; }
.detail-image-wrap img { width:100%; height:100%; object-fit:cover; }
.detail-body { padding:28px; }
.detail-body h2 { font-size:32px; margin:8px 0 10px; }
.prompt-box { margin-top:22px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#0b0d12; }
.prompt-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); }
.prompt-box pre { white-space:pre-wrap; margin:0; padding:16px; line-height:1.55; color:#dfe3ea; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.video-area { margin-top:28px; }
.video-frame { aspect-ratio:16/9; border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:10px; }
.video-frame iframe { width:100%; height:100%; border:0; }
.toast { position:fixed; right:20px; bottom:20px; z-index:1000; padding:13px 16px; border-radius:12px; background:#1b2030; border:1px solid #353c50; color:#fff; transform:translateY(20px); opacity:0; pointer-events:none; transition:.25s; }
.toast.show { transform:translateY(0); opacity:1; }
.toast.error { border-color:#6e2c35; background:#281316; }
.admin-page { min-height:100vh; }
.admin-topbar { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:#0d0f15; border-bottom:1px solid var(--line); }
.top-actions { display:flex; gap:8px; }
.admin-main { padding:28px; max-width:1400px; margin:0 auto; }
.admin-hero { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:20px; }
.admin-hero h1 { margin:6px 0; font-size:34px; }
.admin-layout { display:grid; grid-template-columns:340px 1fr; gap:18px; }
.panel { background:#11131b; border:1px solid var(--line); border-radius:18px; padding:20px; margin-bottom:18px; }
.panel-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:14px; }
.panel-head h2 { margin:0; font-size:20px; }
.admin-list { margin-top:18px; display:flex; flex-direction:column; gap:9px; }
.admin-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:12px; background:#0c0f15; }
.row-main { display:flex; flex-direction:column; gap:4px; min-width:0; }
.row-actions { display:flex; gap:7px; flex-shrink:0; }
.two-cols { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; }
.check-row { display:flex; align-items:center; gap:8px; }
.check-row input { width:auto; }
.wide { max-height:600px; overflow:auto; }
@media (max-width:900px) {
  .app { grid-template-columns:1fr; }
  .sidebar { position:relative; height:auto; border-right:0; border-bottom:1px solid var(--line); }
  .category-nav { flex-direction:row; overflow:auto; padding-bottom:5px; }
  .category-link { min-width:max-content; width:auto; }
  .sidebar-bottom { border:0; padding:0; margin-top:8px; display:flex; gap:8px; }
  .sidebar-bottom .side-link { width:auto; }
  .admin-layout { grid-template-columns:1fr; }
  .detail-card { grid-template-columns:1fr; }
  .detail-image-wrap { min-height:340px; }
  .topbar { padding:16px; }
  .content-wrap { padding:16px; }
  .hero h2 { font-size:27px; }
}