:root{
  color-scheme: light dark;
  --accent:#10b981; --brand-start:#6C63FF; --brand-end:#FF4D9D;
  --bg:#0b0b0f; --surface:#111318; --text:#e5e7eb; --muted:#9ca3af; --border:#23252c;
  --radius:14px; --container:1440px; --card-min:280px; --card-gap:20px;
  --shadow:0 8px 30px rgba(0,0,0,.25);
}
html[data-theme="light"]{ --bg:#ffffff; --surface:#f6f7f9; --text:#0b0f19; --muted:#475569; --border:#e5e7eb; --shadow:0 8px 24px rgba(10,37,64,.08); }
html[data-theme="dark"] { --bg:#0b0b0f; --surface:#111318; --text:#e5e7eb; --muted:#9ca3af; --border:#23252c; }

*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; background:var(--bg); color:var(--text); line-height:1.6;}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.screen-reader-text,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
:focus-visible{outline:2px solid var(--brand-end); outline-offset:2px}

/* Header */
.site-header{position:sticky;top:0;z-index:60;backdrop-filter:blur(10px); background: color-mix(in oklab,var(--bg) 86%, transparent); border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:16px;height:64px}
.primary-nav{margin-left:auto}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.menu a{color:var(--text);opacity:.9;padding:10px 6px;border-radius:8px}
.menu a:hover{background:var(--surface);text-decoration:none}
.nav-toggle{display:none;border:1px solid var(--border);background:var(--surface);padding:8px;border-radius:10px}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface)}
.icon-btn:hover{background:color-mix(in oklab,var(--surface) 85%, var(--brand-start) 15%)}
.theme-pop{position:relative}
.theme-menu{position:absolute; right:0; top:110%; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:6px; display:grid; gap:6px; min-width:160px; box-shadow:var(--shadow)}

/* HERO PRO */
.hero{position:relative; border-top:1px solid var(--border); overflow:hidden}
.hero-pro{padding:72px 0 52px;
  background:
    radial-gradient(900px 400px at 48% -10%, color-mix(in oklab,var(--brand-start) 16%, transparent), transparent),
    radial-gradient(800px 360px at 72% -14%, color-mix(in oklab,var(--brand-end) 14%, transparent), transparent);
}
.hero-inner{position:relative}
.hero-kicker{color:var(--muted); margin:0 0 6px; font-weight:600; letter-spacing:.02em}
.hero-title{font-size:clamp(32px,4.6vw,56px); margin:0 0 10px; letter-spacing:-0.02em;
  background: linear-gradient(90deg,var(--brand-start),var(--brand-end)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-subtitle{color:var(--muted);max-width:820px;margin:0 0 18px}
.button{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.button-accent{background:linear-gradient(90deg,var(--brand-start),var(--brand-end));color:#0b0f19;border:none}
.button-accent:hover{filter:brightness(.97);text-decoration:none}
.hero-visual{position:absolute; inset:0; pointer-events:none}
.hero-visual .mesh{position:absolute; inset:-10% -20%; background-image: radial-gradient(60% 40% at 20% 10%, color-mix(in oklab,var(--brand-start) 22%, transparent) 0 60%, transparent 60% 100%),
  radial-gradient(60% 40% at 80% 0%, color-mix(in oklab,var(--brand-end) 20%, transparent) 0 60%, transparent 60% 100%);
  filter: blur(40px); opacity:.28;}
.hero-visual .glow{position:absolute; left:10%; top:20%; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(closest-side, color-mix(in oklab,var(--brand-end) 22%, transparent), transparent 70%); filter: blur(18px); opacity:.33;}
.hero-visual .stripes{position:absolute; right:-10%; top:10%; width:60%; height:80%;
  background: repeating-linear-gradient(45deg, color-mix(in oklab,var(--brand-start) 20%, transparent) 0 12px, transparent 12px 28px);
  opacity:.14; transform: skewY(-6deg); filter: blur(1px);}

/* Content grid & post grid */
.content-grid{display:grid; grid-template-columns:1fr; gap:28px; padding:28px 0}
.content-grid.has-sidebar{grid-template-columns:1fr 320px}
.post-grid{display:grid; gap:var(--card-gap); grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr)); align-items: stretch}

/* Card */
.card{position:relative; display:flex; flex-direction:column; gap:10px; background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 94%, transparent), color-mix(in oklab, var(--surface) 100%, transparent)); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.card-link{position:absolute; inset:0}
.card-media{aspect-ratio:16/9; background: linear-gradient(90deg, color-mix(in oklab,var(--brand-start) 16%, transparent), color-mix(in oklab,var(--brand-end) 16%, transparent))}
.card-placeholder{width:100%;height:100%;background: repeating-linear-gradient(45deg, color-mix(in oklab,var(--brand-start) 20%, transparent) 0 6px, transparent 6px 14px)}
.card-body{padding:14px 16px 16px}
.card-meta{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.card-title{font-size:20px;margin:6px 0 6px}
.card-excerpt{color:var(--muted);margin:0}
.card-views{position:absolute; top:10px; right:10px; font-size:12px; background: color-mix(in oklab,var(--surface) 85%, transparent); border:1px solid var(--border); padding:4px 8px; border-radius:999px}

/* Archive/single */
.content-single{padding:28px 0}
.entry{background:linear-gradient(180deg,color-mix(in oklab,var(--surface)94%,transparent),color-mix(in oklab,var(--surface)100%,transparent));border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.entry-title{font-size:clamp(26px,3.5vw,40px);margin:0 0 6px}
.entry-meta{color:var(--muted);font-size:14px;display:flex;gap:8px;align-items:center}
.entry-thumb{margin:12px 0 0;overflow:hidden;border-radius:12px}

/* Overlays & sheet (categories) */
.overlay,.sheet{position:fixed;inset:0;display:none;z-index:80}
.overlay.is-open,.sheet.is-open{display:block}
.overlay-backdrop,.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}
.overlay-panel{position:absolute;left:50%;top:8%;transform:translateX(-50%);width:min(980px, 95vw);background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:18px;max-height:84vh;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}
.overlay-close,.sheet-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text)}

.live-search-form{margin-bottom:10px}
.live-search-input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text)}

.sheet-panel{position:absolute;left:50%;top:6%;transform:translateX(-50%);width:min(1000px,94vw);background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:18px;max-height:88vh;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}
.sheet-header{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:0;background:linear-gradient(180deg, color-mix(in oklab,var(--surface) 98%, transparent), transparent);padding-bottom:10px;z-index:1}
.sheet-filter{flex:0 0 260px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text)}
.sheet-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}
.chip{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:linear-gradient(90deg,var(--brand-start),var(--brand-end));color:#0b0f19;white-space:nowrap}
.chip-outline{background:transparent;color:var(--text)}
.sheet-grid{display:grid;grid-template-columns: repeat(auto-fit, minmax(220px,1fr));gap:12px}
.sheet-item{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:14px;padding:12px;color:var(--text);background:linear-gradient(180deg,color-mix(in oklab,var(--surface)96%,transparent),color-mix(in oklab,var(--surface)100%,transparent))}
.sheet-item:hover{background:color-mix(in oklab,var(--surface)85%,transparent);text-decoration:none}
.sheet-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(90deg,var(--brand-start),var(--brand-end))}
.sheet-name{font-weight:600}.sheet-count{color:var(--muted);margin-left:auto}

@media (max-width: 768px){
  .overlay-panel{left:0;top:0;transform:none;width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:12px}
  .sheet-panel{left:0;top:0;transform:none;width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:12px}
}

/* Mobile dock */
.mobile-dock{position:fixed;left:0;right:0;bottom:0;z-index:70;height:64px;display:flex;justify-content:space-around;align-items:center; backdrop-filter:blur(10px); background: color-mix(in oklab,var(--bg) 86%, transparent); border-top:1px solid var(--border)}
.dock-btn{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;padding:6px 10px;color:var(--text);background:none;border:none}
.dock-btn svg{width:22px;height:22px}
@media (min-width:900px){ .mobile-dock{display:none} }

/* Forms */
.search-form{display:flex;gap:8px}.search-field{flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text)}


/* --- v3 final.1: Mobile‑First grid (1 card by default) --- */
.post-grid{display:grid; gap:var(--card-gap); grid-template-columns: 1fr; align-items: stretch}
@media (min-width: 900px){
  .post-grid{ grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr)); }
}
/* 3-col mode only на >=1100px */
.grid-3col .post-grid{ grid-template-columns: 1fr }
@media (min-width: 1100px){ .grid-3col .post-grid{ grid-template-columns: repeat(3,1fr) } }

/* --- v3 final.1: Card media & text safety --- */
.card-media{position:relative; aspect-ratio:16/9; overflow:hidden}
.card-media img{width:100%; height:100%; object-fit:cover; display:block}
.card-title{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card-excerpt{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card-body{background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 98%, transparent), color-mix(in oklab, var(--surface) 100%, transparent));}

/* --- v3 final.1: Hero collapse UI --- */
.hero-collapse{position:absolute; right:16px; top:16px; z-index:2; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text); opacity:.95}
.hero-restore{position:sticky; top:66px; left:50%; transform:translateX(-50%); z-index:65; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:linear-gradient(90deg,var(--brand-start),var(--brand-end)); color:#0b0f19; box-shadow:var(--shadow); display:none}
body[data-hero="collapsed"] .hero{ display:none !important }
body[data-hero="collapsed"] .hero-restore{ display:inline-flex }