:root {
  color-scheme: light dark;
  --v22-bg: #f4fbff;
  --v22-surface: rgba(255, 255, 255, 0.9);
  --v22-text: #17324d;
  --v22-text-soft: #5f748e;
  --v22-border: rgba(65, 108, 158, 0.18);
  --v22-primary: #4c6fff;
  --v22-secondary: #14b8a6;
  --v22-accent: #ff9b3d;
  --v22-danger: #ef4444;
  --v22-warning: #facc15;
  --v22-shadow: 0 18px 40px rgba(43, 72, 121, 0.14);
  --v22-radius: 24px;
  --v22-gradient: linear-gradient(135deg, #4c6fff 0%, #14b8a6 55%, #ff9b3d 100%);
}
body {
  background: radial-gradient(circle at top left, rgba(76, 111, 255, 0.14), transparent 28%), radial-gradient(circle at top right, rgba(20, 184, 166, 0.12), transparent 24%), var(--v22-bg);
}
.v22-page,.post-container,.admin-dashboard,.python-demo,.stories-page,.team-page,.social-page,.videos-page { width:min(1120px, calc(100% - 2rem)); margin:1.5rem auto 0; }
.v22-surface,.blog-card,.story-card,.team-card,.feature-card,.admin-card,.social-card,.python-demo,.post-container,.mode-banner,.admin-panel,.filter-bar,.hero-shell { background:var(--v22-surface); border:1px solid var(--v22-border); border-radius:var(--v22-radius); box-shadow:var(--v22-shadow); backdrop-filter:blur(14px); }
.v22-toolbar { position:sticky; top:0; z-index:1030; background:rgba(12,25,43,.82); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.08); }
.toolbar-container { width:min(1180px, calc(100% - 2rem)); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:72px; }
.toolbar-brand,.toolbar-nav a { color:#f8fbff; text-decoration:none; font-weight:700; }
.toolbar-brand { display:inline-flex; align-items:center; gap:.75rem; font-size:1.05rem; }
.brand-icon { display:inline-grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:999px; background:rgba(255,255,255,.12); }
.toolbar-toggle { display:none; border:0; background:rgba(255,255,255,.12); color:#fff; width:2.75rem; height:2.75rem; border-radius:14px; font-size:1.25rem; }
.toolbar-nav { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; justify-content:flex-end; }
.toolbar-nav a { padding:.75rem 1rem; border-radius:999px; font-size:.95rem; color:rgba(255,255,255,.92); transition:transform .2s ease, background .2s ease, color .2s ease; }
.toolbar-nav a:hover,.toolbar-nav a:focus-visible { background:rgba(255,255,255,.14); color:#fff; transform:translateY(-1px); }
.toolbar-login,.toolbar-admin,.btn-refresh,.btn-v22,.btn-v22-secondary,.btn-v22-ghost,.python-demo .btn,.post-share a { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.8rem 1.15rem; border-radius:999px; font-weight:700; text-decoration:none; border:0; }
.toolbar-login,.btn-v22,.btn-refresh,.post-share a { background:var(--v22-gradient); color:#fff !important; box-shadow:0 14px 24px rgba(76,111,255,.24); }
.toolbar-admin,.btn-v22-secondary { background:rgba(255,255,255,.14); color:#fff !important; border:1px solid rgba(255,255,255,.14); }
.btn-v22-ghost { background:rgba(76,111,255,.08); color:var(--v22-primary); border:1px solid rgba(76,111,255,.16); }
.hero-shell { overflow:hidden; padding:clamp(1.75rem,3vw,2.75rem); margin-bottom:1.5rem; position:relative; }
.hero-shell::after { content:''; position:absolute; inset:auto -8% -35% auto; width:320px; height:320px; background:radial-gradient(circle, rgba(255,155,61,.18), transparent 70%); pointer-events:none; }
.section-kicker,.card-kicker,.eyebrow,.tag,.filter-pill,.status-pill,.metric-pill { display:inline-flex; align-items:center; gap:.35rem; border-radius:999px; padding:.42rem .8rem; font-size:.82rem; font-weight:800; letter-spacing:.02em; text-decoration:none; border:1px solid rgba(76,111,255,.12); background:rgba(76,111,255,.08); color:var(--v22-primary); text-transform:uppercase; }
.filter-pill.active,.tag:hover,.filter-pill:hover { background:var(--v22-primary); color:#fff; }
.section-title,.post-header h1,.admin-dashboard h1,.python-demo h1,.stories-page h1,.team-page h1,.social-page h1,.videos-page h1 { font-size:clamp(2rem,4vw,3.2rem); line-height:1.08; color:var(--v22-text); margin:.9rem 0 .75rem; font-weight:900; }
.section-subtitle,.lead-copy,.post-meta,.admin-muted,.empty-state p,.social-caption,.blog-card p,.story-card p,.team-card p,.feature-card p,.social-card p,.admin-card p { color:var(--v22-text-soft); font-size:1.02rem; }
.blog-grid,.stories-grid,.team-grid,.features-showcase,.social-carousel,.admin-grid,.video-grid,.social-grid { display:grid; gap:1.25rem; }
.blog-grid,.stories-grid,.team-grid,.video-grid,.social-grid { grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.features-showcase { grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
.admin-grid { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.social-carousel { grid-auto-flow:column; grid-auto-columns:minmax(260px, 1fr); overflow-x:auto; padding-bottom:.25rem; scrollbar-width:thin; }
.blog-card,.story-card,.team-card,.feature-card,.social-card,.admin-card { position:relative; overflow:hidden; color:inherit; text-decoration:none; }
.blog-card:hover,.story-card:hover,.team-card:hover,.feature-card:hover,.social-card:hover,.admin-card:hover { transform:translateY(-4px); color:inherit; }
.blog-card-media,.post-cover,.story-card img,.team-card img,.social-card img { width:100%; object-fit:cover; display:block; }
.blog-card-media,.story-card img,.team-card img,.social-card img { height:200px; border-radius:calc(var(--v22-radius) - 8px); margin:.55rem .55rem 0; width:calc(100% - 1.1rem); }
.blog-card-body,.story-card-body,.team-card-body,.social-card-body,.feature-card,.admin-card { padding:1.2rem 1.25rem 1.35rem; }
.blog-card h3,.story-card h3,.team-card h3,.admin-card h3,.feature-card h3,.social-card h3 { color:var(--v22-text); margin-bottom:.55rem; font-weight:800; }
.blog-card-footer,.team-links,.story-card-footer,.post-meta,.post-share,.stats-row,.filter-tags,.admin-actions { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.post-container { padding:clamp(1.25rem,3vw,2rem); }
.post-header { margin-bottom:1.75rem; }
.post-cover { max-height:420px; border-radius:calc(var(--v22-radius) - 8px); margin-bottom:1.25rem; box-shadow:0 16px 32px rgba(32,54,98,.18); }
.post-content { color:var(--v22-text); font-size:1.05rem; line-height:1.82; }
.post-content h1,.post-content h2,.post-content h3,.post-content h4 { color:var(--v22-text); margin:2rem 0 .9rem; font-weight:800; }
.post-content p,.post-content ul,.post-content ol,.post-content blockquote,.post-content pre { margin-bottom:1.15rem; }
.post-content code { background:rgba(23,50,77,.08); padding:.15rem .4rem; border-radius:8px; color:#b42318; }
.post-content pre,.python-demo textarea,.python-demo pre { width:100%; min-height:320px; border:0; border-radius:16px; padding:1rem; background:#0f172a; color:#e2e8f0; font-family:'Fira Code','SFMono-Regular',Consolas,monospace; font-size:.95rem; line-height:1.6; margin-bottom:0; overflow-x:auto; }
.post-content blockquote { padding:1rem 1.2rem; border-left:4px solid var(--v22-secondary); background:rgba(20,184,166,.08); border-radius:0 18px 18px 0; }
.related-posts { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--v22-border); }
.admin-dashboard { padding:clamp(1.25rem,2.5vw,2rem); }
.admin-panel,.filter-bar { padding:1rem 1.1rem; margin-bottom:1rem; }
.admin-card { min-height:160px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid rgba(76,111,255,.1); }
.admin-table { width:100%; border-collapse:collapse; background:var(--v22-surface); border-radius:18px; overflow:hidden; box-shadow:var(--v22-shadow); }
.admin-table th,.admin-table td { padding:.95rem 1rem; border-bottom:1px solid rgba(65,108,158,.12); text-align:left; color:var(--v22-text); vertical-align:top; }
.admin-table th { background:rgba(76,111,255,.08); font-size:.92rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.admin-form,.editor-layout { display:grid; gap:1rem; }
.editor-layout,.python-demo-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:start; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; }
.admin-form label { display:block; font-weight:700; color:var(--v22-text); margin-bottom:.45rem; }
.admin-form input,.admin-form textarea,.admin-form select,.filter-bar input,.filter-bar select,.challenge-panel,.code-panel,.output-panel { width:100%; border-radius:16px; border:1px solid rgba(65,108,158,.16); background:rgba(255,255,255,.85); color:var(--v22-text); padding:.85rem 1rem; }
.admin-form textarea { min-height:170px; resize:vertical; }
.editor-preview { min-height:100%; padding:1.1rem; }
.mode-banner { padding:1rem 1.2rem; margin:1rem 0 1.5rem; font-size:1rem; }
.mode-live { border-color:rgba(239,68,68,.25); background:linear-gradient(135deg, rgba(239,68,68,.14), rgba(255,255,255,.92)); color:#991b1b; }
.mode-test { border-color:rgba(250,204,21,.28); background:linear-gradient(135deg, rgba(250,204,21,.18), rgba(255,255,255,.92)); color:#854d0e; }
.stories-grid .story-card { display:flex; flex-direction:column; min-height:100%; }
.story-avatar,.team-avatar,.social-thumb { background:linear-gradient(135deg, rgba(76,111,255,.2), rgba(20,184,166,.18)); display:grid; place-items:center; color:var(--v22-primary); font-size:2.2rem; font-weight:900; }
.story-avatar,.team-avatar { height:220px; margin:.55rem .55rem 0; border-radius:calc(var(--v22-radius) - 8px); }
.quote-mark { font-size:2.4rem; line-height:1; color:rgba(76,111,255,.25); }
.team-strip { display:flex; flex-wrap:wrap; gap:.75rem; padding:1rem 0 0; }
.tool-chip { padding:.7rem .95rem; border-radius:16px; background:rgba(20,184,166,.08); color:#0f766e; font-weight:700; }
.feature-card { min-height:100%; text-align:left; border:1px solid rgba(76,111,255,.12); }
.feature-icon,.social-icon,.demo-icon { width:3rem; height:3rem; display:inline-grid; place-items:center; border-radius:18px; background:rgba(76,111,255,.1); color:var(--v22-primary); font-size:1.4rem; margin-bottom:.9rem; }
.python-demo { padding:clamp(1.25rem,3vw,2rem); }
.code-panel,.output-panel,.challenge-panel { border-radius:20px; border:1px solid rgba(65,108,158,.14); padding:1rem; }
.empty-state { text-align:center; padding:2.5rem 1.5rem; }
.pagination-v22 { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.6rem; }
.pagination-v22 a,.pagination-v22 span { min-width:2.7rem; height:2.7rem; border-radius:999px; display:inline-grid; place-items:center; text-decoration:none; font-weight:800; background:rgba(76,111,255,.08); color:var(--v22-primary); }
.pagination-v22 .active { background:var(--v22-primary); color:#fff; }
.danger-link { color:var(--v22-danger); }
@media (max-width:991px) { .editor-layout,.python-demo-grid { grid-template-columns:1fr; } }
@media (max-width:820px) { .toolbar-toggle { display:inline-grid; place-items:center; } .toolbar-nav { position:absolute; top:calc(100% + .5rem); left:1rem; right:1rem; display:none; flex-direction:column; align-items:stretch; gap:.2rem; padding:.75rem; border-radius:24px; background:rgba(12,25,43,.97); box-shadow:0 18px 40px rgba(0,0,0,.22); } .toolbar-nav.show { display:flex; } .toolbar-nav a { width:100%; } }
@media (max-width:640px) { .v22-page,.post-container,.admin-dashboard,.python-demo,.stories-page,.team-page,.social-page,.videos-page { width:min(100% - 1rem, 1120px); } .section-title,.post-header h1,.admin-dashboard h1,.python-demo h1,.stories-page h1,.team-page h1,.social-page h1,.videos-page h1 { font-size:1.9rem; } .blog-card-media,.story-card img,.team-card img,.social-card img,.story-avatar,.team-avatar { height:180px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }
@media (prefers-color-scheme: dark) { :root { --v22-bg:#07111f; --v22-surface:rgba(15,23,42,.86); --v22-text:#e5eefb; --v22-text-soft:#a8bdd7; --v22-border:rgba(148,163,184,.2); --v22-shadow:0 20px 44px rgba(2,6,23,.42); } .admin-form input,.admin-form textarea,.admin-form select,.filter-bar input,.filter-bar select,.challenge-panel,.code-panel,.output-panel { background:rgba(15,23,42,.92); color:var(--v22-text); } .section-kicker,.card-kicker,.eyebrow,.tag,.filter-pill,.status-pill,.metric-pill,.tool-chip,.btn-v22-ghost { background:rgba(96,165,250,.14); color:#c8dcff; } .mode-test { color:#fde68a; } .mode-live { color:#fecaca; } }