*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html:not(.nova-ready) *,html:not(.nova-ready) *::before,html:not(.nova-ready) *::after{transition:none!important;animation:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
:root{--bg:#06070d;--bg2:#0b0e18;--surface:rgba(255,255,255,.035);--surface-2:rgba(255,255,255,.06);--border:rgba(255,255,255,.09);--border-strong:rgba(255,255,255,.16);--text:#e9ecf5;--muted:#9aa3b8;--primary:#22d3ee;--accent:#a855f7;--radius:18px;--radius-sm:12px;--shadow:0 24px 60px -24px rgba(0,0,0,.85);--font:'Inter',system-ui,-apple-system,sans-serif;--font-display:'Space Grotesk',system-ui,sans-serif;--grad:linear-gradient(135deg,var(--primary),var(--accent))}
html[data-theme="light"]{--bg:#f2f5fb;--bg2:#ffffff;--surface:rgba(255,255,255,.75);--surface-2:#ffffff;--border:rgba(12,22,54,.1);--border-strong:rgba(12,22,54,.2);--text:#0c1224;--muted:#5a6478;--shadow:0 24px 60px -28px rgba(20,30,80,.28)}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.7;min-height:100vh;overflow-x:clip;-webkit-font-smoothing:antialiased}
@supports not (overflow-x:clip){body{overflow-x:hidden}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--primary);color:#04060d}
#readProgress{position:fixed;top:0;left:0;height:3px;background:var(--grad);z-index:60;width:0;transition:width .1s;box-shadow:0 0 10px var(--primary)}
.bg-decor{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;isolation:isolate}
.bg-decor::before,.bg-decor::after{content:"";position:absolute;width:60vw;height:60vw;border-radius:50%;filter:blur(120px);opacity:.35;will-change:transform}
.bg-decor::before{background:radial-gradient(circle,var(--primary),transparent 70%);top:-20vw;left:-15vw;animation:float1 22s ease-in-out infinite}
.bg-decor::after{background:radial-gradient(circle,var(--accent),transparent 70%);bottom:-25vw;right:-15vw;animation:float2 26s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(6vw,4vw)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-5vw,-6vw)}}
html[data-theme="light"] .bg-decor::before,html[data-theme="light"] .bg-decor::after{opacity:.18}
.bg-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(circle at 50% 30%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(circle at 50% 30%,#000 20%,transparent 75%);isolation:isolate}
html[data-theme="light"] .bg-grid{background-image:linear-gradient(rgba(12,22,54,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(12,22,54,.05) 1px,transparent 1px)}
html[data-bg-decor="off"] .bg-decor{display:none!important}
html[data-bg-grid="off"] .bg-grid{display:none!important}
.container{width:min(1240px,100% - 40px);margin-inline:auto}
@media(max-width:640px){.container{width:calc(100% - 28px)}}
.gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hidden{display:none!important}
.center-empty{padding:80px 20px;text-align:center;color:var(--muted)}
.loadmore-wrap{display:flex;justify-content:center;margin-top:34px;gap:8px}
*,*::before,*::after{min-width:0}
html,body{max-width:100%}
.container{width:min(1240px,calc(100% - 32px));margin-inline:auto;padding-inline:0}
@media(max-width:640px){.container{width:calc(100% - 20px)}}
.site-header{max-width:100%}
.header-inner{min-width:0;max-width:100%}
.logo{min-width:0;max-width:min(200px,40vw)}
.logo-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main-nav{scrollbar-width:none;-ms-overflow-style:none}
.main-nav::-webkit-scrollbar{display:none}
.header-actions{min-width:0;flex-shrink:0}
.card,.popular-item,.hero-card{min-width:0;max-width:100%}
.card-body h3,.popular-item .info h4,.hero-content h1,.article-hero h1{overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.card-body p,.article-body,.comment-body{overflow-wrap:anywhere;word-break:break-word}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--card-gap,16px);width:100%;max-width:100%}
.popular-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.chips{max-width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}
@media(min-width:700px){.chips{flex-wrap:wrap;overflow:visible}}
.chip{flex-shrink:0}
.filters-bar{max-width:100%}
.filters-bar .select{min-width:0;max-width:100%}
.table{table-layout:auto}
.table td,.table th{vertical-align:top;word-break:break-word}
.admin-table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
#admin{max-width:100vw}
.admin-main{min-width:0;max-width:100%;overflow-x:hidden}
.admin-side{min-width:0}
.admin-nav button{min-width:0}
.modal{align-items:start;padding:max(12px,2vh) 12px}
.modal-card{width:min(760px,calc(100vw - 24px));max-width:100%;max-height:min(92vh,100%);margin:auto}
.modal-card.wide{width:min(1000px,calc(100vw - 24px))}
.modal-body{overflow-x:hidden;overflow-y:auto}
.row{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.field input,.field textarea,.field select,.input,.textarea,.select{max-width:100%}
.img-url-row{flex-wrap:wrap}
.img-url-row .input{min-width:0;flex:1}
.article-cover{max-width:100%;aspect-ratio:21/9;min-height:140px}
@media(max-width:640px){.article-cover{aspect-ratio:16/9}}
.article-body pre,.article-body code{overflow-x:auto;max-width:100%;white-space:pre-wrap;word-break:break-word}
.video-frame{max-width:100%}
.hero-content{max-width:100%}
.hero-card{min-height:min(440px,70vh)}
@media(max-width:700px){.hero-card{min-height:300px}.hero-content{padding:22px 18px}}
#stickyAdRoot{max-width:100vw}
body.has-sticky-ad{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
@media (max-width:640px){
  body.has-sticky-ad{padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px))}
}
.preset-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr))}
.media-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr))}
.stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr))}
.section-head{min-width:0}
.section-head h2{min-width:0;overflow-wrap:anywhere}
.article-actions,.share{max-width:100%}
.editor-content,.editor-html{max-width:100%;overflow-x:auto}
.editor-toolbar{max-width:100%;overflow-x:auto}
img,video,iframe{max-width:100%;height:auto}
.video-frame iframe,.video-frame video{height:100%}
.ad-slot{position:relative;margin:20px 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--surface);transition:.25s}
.ad-slot:hover{border-color:var(--border-strong)}
.ad-slot[data-pos="top-banner"]{margin:16px 0 8px}
.ad-slot[data-pos="home-mid"]{margin:28px 0}
.ad-slot[data-pos="under-cards"]{margin:24px 0 8px}
.ad-slot[data-pos="article-bottom"]{margin:32px auto;max-width:760px}
.ad-slot[data-pos="article-mid"],
.article-mid-ad .ad-slot{
  margin:28px 0;
  max-width:100%;
}
.article-mid-ad{
  margin:28px 0;
  width:100%;
}
.ad-slot[data-pos="footer-banner"]{margin:0 0 24px}
.ad-slot[data-pos="sticky-bottom"]{position:fixed;bottom:0;left:0;right:0;z-index:40;margin:0;border-radius:0;border-left:none;border-right:none;border-bottom:none;background:var(--bg2);box-shadow:0 -8px 30px -12px rgba(0,0,0,.5);padding:12px 20px}
.ad-slot[data-pos="infeed"]{
  grid-column:1 / -1 !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:16px 0 !important;
  padding:0 !important;
  box-sizing:border-box;
  overflow:hidden;
  position:relative;
}
.home-mosaic > .ad-slot[data-pos="infeed"],
.grid > .ad-slot[data-pos="infeed"],
.home-list > .ad-slot[data-pos="infeed"],
.list-magazine .ad-slot[data-pos="infeed"]{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:100% !important;
}
.ad-slot[data-pos="infeed"] > .ad-link{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:100%;
  box-sizing:border-box;
  color:inherit;
  text-decoration:none;
}
.ad-slot[data-pos="infeed"] .ad-banner-inner{
  position:relative;
  display:block;
  width:100% !important;
  max-width:100% !important;
  min-height:140px;
  aspect-ratio:16 / 9;
  overflow:hidden;
  box-sizing:border-box;
  background-color:var(--surface-2);
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.ad-slot[data-pos="infeed"] .ad-banner-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  border:0;
  z-index:0;
  pointer-events:none;
}
.ad-slot[data-pos="infeed"] .ad-banner-inner::after{
  content:"";
  position:absolute;inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.4) 40%,rgba(0,0,0,.15) 100%);
  pointer-events:none;
}
.ad-slot[data-pos="infeed"] .ad-banner-copy{
  position:absolute;
  left:0;right:auto;bottom:0;
  z-index:2;
  padding:18px 22px;
  max-width:min(560px,92%);
  color:#fff;
  box-sizing:border-box;
}
.ad-slot[data-pos="infeed"] .ad-banner-copy h4{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,2.2vw,1.45rem);
  margin:0 0 6px;
  line-height:1.25;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
  color:#fff;
}
.ad-slot[data-pos="infeed"] .ad-banner-copy p{
  margin:0;
  font-size:.9rem;
  opacity:.92;
  line-height:1.4;
  color:#fff;
}
.ad-slot[data-pos="infeed"] .ad-banner-copy .ad-banner-foot{
  margin-top:8px;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  opacity:.8;
  color:#fff;
}
.ad-slot[data-pos="infeed"] .ad-label{
  color:rgba(255,255,255,.8);
  z-index:3;
}
@media(max-width:640px){
  .ad-slot[data-pos="infeed"] .ad-banner-inner{aspect-ratio:16/9;min-height:120px}
  .ad-slot[data-pos="infeed"] .ad-banner-copy{padding:14px 16px}
}
/* In-feed карточка — как .card */
.card.ad-as-card{position:relative}
.card.ad-as-card .card-cat{background:var(--grad)!important;color:#04060d!important}
.ad-label{position:absolute;top:8px;right:10px;font-size:.62rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);opacity:.7;z-index:2;pointer-events:none}
.ad-slot[data-pos="infeed"] .ad-label{color:rgba(255,255,255,.75)}
.ad-link{display:block;color:inherit;text-decoration:none;cursor:pointer;width:100%;box-sizing:border-box}
.ad-image-wrap{aspect-ratio:16/9;background-size:cover;background-position:center;min-height:120px;display:block;width:100%}
.ad-image-wrap.tall{aspect-ratio:16/9;min-height:160px}
.ad-text-body{padding:18px 22px}
.ad-text-body h4{font-family:var(--font-display);font-size:1.05rem;margin-bottom:6px}
@media(max-width:640px){
  .ad-slot[data-pos="infeed"] .ad-banner-inner{aspect-ratio:16/9;min-height:140px}
}
.ad-text-body p{font-size:.88rem;color:var(--muted);margin:0}
.ad-close{position:absolute;top:6px;left:8px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.45);border:none;color:#fff;cursor:pointer;display:grid;place-items:center;font-size:.75rem;z-index:3;opacity:.7;transition:.2s}
.ad-close:hover{opacity:1}
.ad-slot.dismissed{display:none!important}
@media(max-width:640px){.ad-slot[data-pos="sticky-bottom"]{padding:10px 14px}.ad-image-wrap{aspect-ratio:16/9;min-height:100px}}
.site-header{position:sticky;top:0;z-index:50;background:rgba(6,7,13,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
html[data-theme="light"] .site-header{background:rgba(242,245,251,.82)}
.header-inner{display:flex;align-items:center;gap:16px;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:.5px;flex-shrink:0}
.logo-mark{width:34px;height:34px;border-radius:10px;background:var(--grad);position:relative;display:grid;place-items:center;box-shadow:0 0 24px -4px var(--primary)}
.logo-mark::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 3px var(--bg)}
.logo-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.main-nav{display:flex;gap:4px;margin-left:12px;flex:1;min-width:0;overflow:visible}
.main-nav a{padding:8px 14px;border-radius:10px;font-size:.92rem;font-weight:500;color:var(--muted);transition:.2s;white-space:nowrap}
.main-nav a:hover,.main-nav a.active{color:var(--text);background:var(--surface-2)}
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.search-form{position:relative;display:flex;align-items:center}
.search-form input{width:200px;padding:9px 14px 9px 38px;border-radius:11px;border:1px solid var(--border);background:var(--surface);font-size:.88rem;transition:.25s;outline:none}
.search-form input:focus{width:250px;border-color:var(--primary);box-shadow:0 0 0 3px rgba(34,211,238,.18)}
.search-form svg{position:absolute;left:12px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:.2s;color:var(--text);position:relative;text-decoration:none}
.icon-btn:hover{border-color:var(--border-strong);background:var(--surface-2);transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px}
.icon-btn .badge-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;background:var(--accent);color:#fff;border-radius:8px;font-size:.62rem;font-weight:700;display:grid;place-items:center}
#menuBtn{display:none}
@media(max-width:900px){
  .main-nav{
    position:fixed;top:62px;left:0;right:0;
    flex-direction:column;gap:4px;
    background:var(--bg2);border-bottom:1px solid var(--border);
    padding:12px;margin:0;
    transform:translateY(-20px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s, transform .2s, visibility 0s .2s;
    box-shadow:var(--shadow);
    max-height:calc(100vh - 62px);
    overflow-y:auto;
    overflow-x:hidden;
  }
  .main-nav.open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .25s, transform .25s, visibility 0s 0s;
  }
  .main-nav a{padding:11px 14px}
  #menuBtn{display:grid}
  .search-form input{width:140px}
  .search-form input:focus{width:170px}
  /* ⚠️ КЛЮЧЕВОЙ ФИКС: на мобильном подменю наследует pointer-events от .main-nav,
     а не задаёт auto — иначе закрытое меню перехватывает тапы по карточкам */
  .nav-drop{display:block;width:100%}
  .nav-drop-menu{
    position:static;
    opacity:1;
    transform:none;
    box-shadow:none;
    border:none;
    background:transparent;
    padding:0 0 0 16px;
    pointer-events:inherit;
  }
  .nav-drop-menu a{padding:8px 12px}
  /* Дополнительная страховка: когда меню закрыто — ни один потомок
     не должен ловить события, даже с собственным pointer-events */
  .main-nav:not(.open){
    pointer-events:none !important;
    visibility:hidden !important;
    height:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
    padding:0 !important;
    border:none !important;
  }
  .main-nav:not(.open) *{
    pointer-events:none !important;
  }
}
@media(max-width:600px){
  .header-inner{height:62px;position:relative}
  .search-form{
    display:none;
    position:absolute;left:10px;right:10px;top:calc(100% + 6px);
    z-index:60;padding:8px;border-radius:12px;
    background:var(--bg2);border:1px solid var(--border);box-shadow:var(--shadow);
  }
  .search-form.is-open{display:flex}
  .search-form input,.search-form input:focus{width:100%!important;flex:1;min-width:0}
  #searchToggle{display:grid!important}
}
#searchToggle{display:none}
@keyframes novaCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.card-enter{animation:novaCardIn .38s ease}
.news-grid-loading{pointer-events:none}
.loadmore-wrap.is-loading .btn{opacity:.65;pointer-events:none}

/* FIX #3: Nested category dropdown — без разрыва hover */
.nav-drop{position:relative;display:inline-flex;align-items:center}
.nav-drop-toggle{display:inline-flex;align-items:center;gap:4px}
.nav-drop-menu{
  position:absolute;top:100%;left:0;min-width:200px;padding:10px 0 0; /* padding-top = мост для курсора */
  background:transparent;border:none;box-shadow:none;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:80;
}
.nav-drop-menu-inner{
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:6px;
  box-shadow:var(--shadow);
}
/* Only true pointer devices — on touch first tap must follow the link */
@media (hover:hover) and (pointer:fine){
  .nav-drop:hover .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  }
}
/* Touch/desktop-horizontal: hide absolute dropdown so it doesn't block content.
   Mobile drawer (max-width:900px) overrides this and shows nested list. */
@media (hover:none), (pointer:coarse){
  .nav-drop-menu{
    display:none !important;
  }
}
.nav-drop-menu a{display:block;padding:8px 12px;border-radius:8px}
.nav-drop-menu a:hover{background:var(--surface-2)}
@media(max-width:900px){
  .nav-drop{display:block;width:100%}
  /* Mobile drawer: always show subcategories as indented list */
  .main-nav .nav-drop-menu{
    display:block !important;
    position:static;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    box-shadow:none;
    border:none;
    background:transparent;
    padding:0 0 0 16px;
  }
  .main-nav .nav-drop-menu-inner{
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
    border-radius:0;
  }
  .main-nav .nav-drop-menu a{padding:8px 12px}
  .main-nav .nav-drop-toggle svg{opacity:.55;margin-left:2px}
}
.site-footer{position:relative;margin-top:64px;padding:48px 0 24px;background:var(--bg2);border-top:1px solid var(--border)}
.footer-glow{display:none}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px 40px;align-items:flex-start}
.footer-brand{flex:1 1 240px;max-width:360px}
.footer-brand .logo{margin-bottom:4px}
.footer-brand p{color:var(--muted);font-size:.9rem;line-height:1.55;margin-top:12px}
.footer-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:.75rem;font-weight:600;text-decoration:none;transition:.15s}
.footer-social a:hover{border-color:var(--primary);color:var(--primary)}
.footer-email{display:inline-block;margin-top:12px;font-size:.86rem;color:var(--primary);text-decoration:none}
.footer-email:hover{text-decoration:underline}
.footer-cols{display:flex;flex-wrap:wrap;gap:28px 40px;flex:2 1 320px}
.footer-col{min-width:120px}
.footer-col h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 12px;font-weight:600}
.footer-col a{display:block;font-size:.9rem;padding:4px 0;color:var(--text);opacity:.8;text-decoration:none;transition:.15s}
.footer-col a:hover{opacity:1;color:var(--primary)}
.footer-bottom{margin-top:32px;padding-top:18px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;font-size:.82rem;color:var(--muted)}
.footer-bottom-meta{opacity:.75}
@media(max-width:640px){
  .footer-inner{flex-direction:column;gap:28px}
  .footer-cols{gap:24px 28px}
  .footer-bottom{flex-direction:column;text-align:center}
  .site-footer{padding:40px 0 24px;margin-top:56px}
}
#backTop{
  position:fixed !important;
  left:auto !important;
  right:20px !important;
  bottom:20px !important;
  top:auto !important;
  z-index:2147483646 !important;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:#22d3ee !important;
  background-image:linear-gradient(135deg,#22d3ee,#a855f7) !important;
  color:#0a0a12 !important;
  cursor:pointer !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 8px 24px rgba(0,0,0,.35) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
  transition:none !important;
}
#backTop.is-visible{display:flex !important}
body.has-sticky-ad #backTop{bottom:100px !important}
#backTop svg{width:20px;height:20px;pointer-events:none;display:block}
#cookieBanner{position:fixed;left:20px;right:20px;bottom:20px;z-index:80;max-width:800px;margin:auto;padding:16px 22px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;flex-wrap:wrap;transform:translateY(150%);transition:.4s}
#cookieBanner.show{transform:translateY(0)}
#cookieBanner p{flex:1;font-size:.88rem;color:var(--muted);min-width:200px}
#toasts{position:fixed;bottom:22px;right:22px;z-index:300;display:flex;flex-direction:column;gap:10px}
.toast{padding:12px 18px;border-radius:12px;background:var(--bg2);border:1px solid var(--border);box-shadow:var(--shadow);font-size:.88rem;font-weight:500;animation:slidein .3s ease;max-width:340px;border-left:3px solid var(--primary)}
.toast.success{border-left-color:#10b981}
.toast.error{border-left-color:#ff5b6e}
.toast.warn{border-left-color:#f59e0b}
@keyframes slidein{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
.modal{position:fixed;inset:0;z-index:200;background:rgba(4,6,14,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;overflow-y:auto}
.modal-card{background:var(--bg2);border:1px solid var(--border);border-radius:22px;width:min(760px,100%);max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--shadow);animation:pop .25s ease}
.modal-card.wide{width:min(1000px,100%)}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--border);gap:10px;flex-shrink:0}
.modal-head h3{font-family:var(--font-display);font-size:1.1rem}
.modal-body{padding:22px;overflow-y:auto;flex:1;min-height:0}
.modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;flex-shrink:0}
.close-x{background:none;border:none;cursor:pointer;color:var(--muted);width:34px;height:34px;display:grid;place-items:center;border-radius:9px;transition:.2s;font-size:1.1rem}
.close-x:hover{background:var(--surface-2);color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;font-weight:600;font-size:.9rem;transition:.2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);border-color:var(--border-strong)}
.btn-primary{background:var(--grad);color:#04060d;border:none;box-shadow:0 8px 28px -10px var(--primary)}
.btn-primary:hover{box-shadow:0 12px 34px -10px var(--primary);filter:brightness(1.08)}
.btn-ghost{background:transparent}
.btn-danger{color:#ff5b6e;border-color:rgba(255,91,110,.3)}
.btn-danger:hover{background:rgba(255,91,110,.1)}
.btn-sm{padding:6px 11px;font-size:.78rem;border-radius:9px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.input,.textarea,.select{width:100%;padding:11px 14px;border-radius:11px;border:1px solid var(--border);background:var(--bg2);color:var(--text);outline:none;transition:.2s;font-size:.92rem}
.input:focus,.textarea:focus,.select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(34,211,238,.18)}
.textarea{resize:vertical;min-height:100px;font-family:var(--font);line-height:1.6}
.label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.field{margin-bottom:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.row{grid-template-columns:1fr}}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 15px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:.85rem;font-weight:500;cursor:pointer;transition:.2s;color:var(--muted)}
.chip:hover{color:var(--text);border-color:var(--border-strong)}
.chip.active{background:var(--grad);color:#04060d;border-color:transparent;font-weight:700}
.filters-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px;padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:40px 0 20px;flex-wrap:wrap}
.section-head h2{font-family:var(--font-display);font-size:1.45rem;letter-spacing:-.3px;display:flex;align-items:center;gap:10px}
.section-head h2::before{content:"";width:6px;height:24px;border-radius:3px;background:var(--grad)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--card-gap,16px);width:100%;max-width:100%}
.card{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:.3s;position:relative;min-width:0;max-width:100%;width:100%;box-sizing:border-box;content-visibility:auto;contain-intrinsic-size:auto 280px}
.card:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.45);box-shadow:0 26px 60px -30px var(--primary);background:var(--surface-2)}
/* Overlay cards (like news portals) */
.card-overlay{border:none;background:transparent;padding:0;min-width:0;max-width:100%}
.card-overlay:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(0,0,0,.55);border:none}
.card-overlay-media{position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;background-size:cover;background-position:center;min-height:140px;width:100%}
.card-overlay-grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.82) 100%);pointer-events:none}
.card-overlay-body{position:absolute;left:0;right:0;bottom:0;padding:12px 14px 14px;z-index:1;color:#fff;max-width:100%;box-sizing:border-box}
.card-overlay-body h3{font-family:var(--font-display);font-size:1.02rem;line-height:1.3;margin:0;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.35);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;word-break:break-word}
.card-overlay-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:.72rem;opacity:.9;margin-bottom:6px}
.card-overlay-meta .dot{opacity:.6}
.card-hero-overlay .card-overlay-media{aspect-ratio:2.1/1;min-height:200px}
.card-hero-overlay .card-overlay-body{padding:18px 18px 20px}
.card-hero-overlay .card-overlay-body h3{font-size:clamp(1.15rem,4vw,2rem);-webkit-line-clamp:3}
.card-wide .card-overlay-media{aspect-ratio:16/9;min-height:160px}
.card-compact{min-width:0;max-width:100%}
.card-compact .card-body p{display:none}
.card-compact .card-media{aspect-ratio:16/9}
.card-horizontal{flex-direction:row;min-height:110px;min-width:0;max-width:100%}
.card-horizontal .card-media{width:38%;min-width:100px;max-width:160px;aspect-ratio:auto;align-self:stretch;flex-shrink:0}
.card-horizontal .card-body{flex:1;min-width:0;padding:12px 14px;display:flex;flex-direction:column;justify-content:center}
.card-horizontal .card-body h3{font-size:1rem;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.card-horizontal .card-body p{-webkit-line-clamp:2;margin-bottom:0}
.card-horizontal:hover{transform:translateY(-3px)}
/* Layouts — grid-column ONLY inside mosaic */
.home-mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;width:100%;max-width:100%}
.home-mosaic > *{min-width:0;max-width:100%}
.home-mosaic .card-hero-overlay{grid-column:1 / -1}
.home-mosaic .card-wide{grid-column:span 3}
.home-mosaic .card-overlay:not(.card-wide):not(.card-hero-overlay){grid-column:span 2}
.list-magazine{display:block;width:100%;max-width:100%}
.list-magazine .home-magazine{margin-bottom:0}
.home-magazine{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start;width:100%;max-width:100%}
.home-magazine .mag-main,.home-magazine .mag-side{min-width:0;max-width:100%}
.home-magazine .mag-main .card-hero-overlay .card-overlay-media{min-height:280px}
.home-magazine .mag-side{display:flex;flex-direction:column;gap:12px}
.home-magazine .mag-side .card-overlay-media{aspect-ratio:16/9;min-height:90px}
.home-magazine .mag-side .card-overlay-body h3{font-size:.92rem;-webkit-line-clamp:2}
.home-list{display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto;width:100%}
.home-list .card{width:100%;max-width:100%}
/* Classic grid — no overflow on narrow screens */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--card-gap,16px);width:100%;max-width:100%}
.grid > *{min-width:0;max-width:100%}
/* Mobile layouts */
@media(max-width:900px){
  .home-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .home-mosaic .card-hero-overlay{grid-column:1 / -1}
  .home-mosaic .card-wide,
  .home-mosaic .card-overlay:not(.card-hero-overlay){grid-column:span 1 !important}
  .home-magazine{grid-template-columns:1fr;gap:12px}
  .home-magazine .mag-main .card-hero-overlay .card-overlay-media{min-height:200px;aspect-ratio:16/10}
  .card-horizontal{flex-direction:column}
  .card-horizontal .card-media{width:100%;max-width:none;min-width:0;aspect-ratio:16/9}
  .card-hero-overlay .card-overlay-body{padding:14px 16px 16px}
}
@media(max-width:560px){
  .home-mosaic{grid-template-columns:1fr;gap:12px}
  .home-mosaic .card-hero-overlay,
  .home-mosaic .card-wide,
  .home-mosaic .card-overlay{grid-column:1 / -1 !important}
  .card-hero-overlay .card-overlay-media{min-height:180px;aspect-ratio:16/10}
  .card-overlay-media{min-height:140px}
  .card-overlay-body{padding:10px 12px 12px}
  .card-overlay-body h3{font-size:.95rem;-webkit-line-clamp:3}
  .card-body{padding:12px 14px 14px}
  .card-body h3{font-size:1rem}
  .home-list{gap:10px}
  .grid{grid-template-columns:1fr;gap:12px}
}
.mosaic-hero-wrap{width:100%;max-width:100%;margin-top:var(--mosaic-hero-top,20px);margin-bottom:8px;padding-inline:0}
.mosaic-hero-wrap + .section-head{margin-top:20px}
.mosaic-hero-wrap .card-hero-overlay{border-radius:var(--radius)}
.mosaic-hero-wrap .card-hero-overlay .card-overlay-media{
  aspect-ratio:var(--mosaic-hero-ratio,2.4/1);
  min-height:var(--mosaic-hero-min,140px);
  max-height:var(--mosaic-hero-max,280px);
  height:auto;
}
.mosaic-hero-wrap .card-hero-overlay .card-overlay-body h3{font-size:clamp(1.05rem,2.8vw,1.65rem)}
.card-hero-overlay .card-overlay-media{min-height:200px;aspect-ratio:16/10}
@media(max-width:700px){
  .mosaic-hero-wrap{margin-top:var(--mosaic-hero-top-mobile,12px)}
  .mosaic-hero-wrap .card-hero-overlay .card-overlay-media{max-height:var(--mosaic-hero-max-mobile,200px);min-height:120px}
}
.card-media{aspect-ratio:16/9;background-size:cover;background-position:center;position:relative;overflow:hidden;width:100%;min-height:0}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.35))}
.card-cat{position:absolute;top:12px;left:12px;z-index:2;padding:4px 11px;border-radius:999px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#04060d}
/* FIX #7: Badge styles/sizes */
.card-cat-sm{font-size:.62rem !important;padding:2px 8px !important}
.card-cat-lg{font-size:.82rem !important;padding:6px 14px !important}
.card-cat-ribbon{top:14px !important;left:-8px !important;border-radius:0 4px 4px 0 !important;background:var(--cat-color) !important;box-shadow:0 2px 8px rgba(0,0,0,.3);padding:5px 14px 5px 18px !important;clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%)}
.card-cat-corner{top:0 !important;left:auto !important;right:0 !important;border-radius:0 0 0 12px !important;background:var(--cat-color) !important;padding:6px 12px !important}
.card-cat-soft{background:color-mix(in srgb, var(--cat-color) 22%, transparent) !important;color:var(--cat-color) !important;border:1px solid color-mix(in srgb, var(--cat-color) 45%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.card-bookmark{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.2s}
.card-bookmark:hover{background:rgba(0,0,0,.7);transform:scale(1.05)}
.card-bookmark.active{background:var(--primary);color:#04060d;border-color:transparent}
.card-bookmark svg{width:16px;height:16px}
.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-family:var(--font-display);font-size:1.08rem;line-height:1.3;margin-bottom:10px;letter-spacing:-.2px}
.card-body p{font-size:.88rem;color:var(--muted);flex:1;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{display:flex;align-items:center;gap:12px;font-size:.76rem;color:var(--muted);border-top:1px solid var(--border);padding-top:12px;flex-wrap:wrap}
.popular-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:14px}
.popular-item{display:flex;gap:14px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;cursor:pointer;transition:.2s}
.popular-item:hover{background:var(--surface-2);border-color:var(--primary)}
.popular-item .rank{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--primary);opacity:.6;line-height:1;min-width:32px}
.popular-item .info h4{font-family:var(--font-display);font-size:.92rem;line-height:1.3;margin-bottom:4px}
.popular-item .info span{font-size:.74rem;color:var(--muted)}
.img-upload{border:2px dashed var(--border);border-radius:12px;padding:16px;text-align:center;transition:.2s;cursor:pointer;background:var(--surface)}
.img-upload:hover,.img-upload.drag{border-color:var(--primary);background:var(--surface-2)}
.img-upload .upload-icon{font-size:1.6rem;margin-bottom:6px;opacity:.6}
.img-upload p{font-size:.85rem;color:var(--muted);margin-bottom:8px}
.img-preview{margin-top:10px;text-align:center}
.img-preview img{max-width:100%;max-height:180px;border-radius:10px;border:1px solid var(--border);display:inline-block}
.img-url-row{display:flex;gap:8px;margin-top:10px}
.loader{display:inline-block;width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero{padding:36px 0 16px}
.hero-card{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--border);min-height:440px;display:flex;align-items:flex-end;cursor:pointer;transition:.35s;background:var(--bg2);isolation:isolate}
.hero-card:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.55);box-shadow:0 30px 80px -30px var(--primary)}
.hero-media{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;transition:.6s}
.hero-card:hover .hero-media{transform:scale(1.04)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(4,6,14,.55) 55%,rgba(4,6,14,.94) 100%)}
.hero-content{padding:44px 40px;max-width:780px;color:#fff;position:relative;z-index:2}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;background:var(--grad);color:#04060d}
.hero-content h1{font-family:var(--font-display);font-size:clamp(1.7rem,4vw,2.9rem);line-height:1.1;margin:16px 0 14px;letter-spacing:-.5px;color:#fff}
.hero-content p{color:rgba(255,255,255,.78);font-size:1.02rem;margin-bottom:18px;max-width:640px}
.meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:.82rem;color:rgba(255,255,255,.62)}
.meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}
@media(max-width:700px){.hero-card{min-height:360px}.hero-content{padding:26px 22px}}
.article-page{padding:28px 0 80px;--art-w:720px;--art-cover-r:18px;--art-cover-ratio:21/9;--art-title:clamp(1.75rem,4vw,2.75rem);--art-body:1.125rem}
.article-page .art-col{max-width:var(--art-w);margin-left:auto;margin-right:auto;padding:0 16px;box-sizing:border-box;width:100%}
.article-page.art-style-magazine{padding-top:0}
.article-page.art-style-magazine .article-cover{max-width:100%;border-radius:0;margin:0 0 28px;aspect-ratio:2.4/1;min-height:220px}
.article-page.art-style-minimal .article-hero h1{font-weight:600;letter-spacing:-0.5px}
.article-page.art-style-minimal .article-cover{border:none;box-shadow:none}
.article-page.art-style-card .art-col{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px 24px 36px;box-shadow:0 20px 50px -30px rgba(0,0,0,.5)}
.article-page.art-style-card .article-cover{margin-left:-24px;margin-right:-24px;width:calc(100% + 48px);max-width:none;border-radius:0;border-left:none;border-right:none}
.article-page .article-hero h1{font-size:var(--art-title)}
.article-page .article-body{font-size:var(--art-body);max-width:none;margin:0;padding:0}
.article-page.art-dropcap .article-body > p:first-of-type::first-letter{float:left;font-size:3.2em;line-height:0.85;padding:6px 10px 0 0;font-weight:700;font-family:var(--font-display);color:var(--primary)}
.article-page.art-justify .article-body{text-align:justify;hyphens:auto}
.article-page .article-cover{aspect-ratio:var(--art-cover-ratio);border-radius:var(--art-cover-r);margin:0;max-width:100%;width:100%}
.art-cover-col{width:100%;max-width:var(--art-cover-w,960px);margin:22px auto 28px;padding:0 16px;box-sizing:border-box}
.art-cover-col .article-cover{display:block}
.article-page.art-style-magazine .art-cover-col{max-width:100%;padding:0;margin:0 0 28px}
.article-page.art-style-magazine .art-cover-col .article-cover{border-radius:0}
@media(max-width:640px){
  .art-cover-col{margin:16px auto 20px;padding:0 12px}
  .art-cover-col .article-cover{border-radius:12px}
}
.article-page .article-tags,.article-page .article-footer,.article-page .toc-wrap{max-width:var(--art-w);margin-left:auto;margin-right:auto}
.article-page .breadcrumbs{max-width:var(--art-w)}
.article-meta-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:.84rem;color:var(--muted);margin:14px 0 6px}
.article-meta-bar .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.5;display:inline-block}
.article-meta-bar a:hover{color:var(--primary)}
.article-hero .badge{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;font-size:.75rem;font-weight:600;color:#fff;margin-bottom:12px}
.article-divider{height:1px;background:var(--border);margin:28px 0;border:none}
.article-body h2{font-family:var(--font-display);font-size:1.45em;margin:1.6em 0 .6em;line-height:1.25;letter-spacing:-.02em}
.article-body h3{font-family:var(--font-display);font-size:1.2em;margin:1.4em 0 .5em;line-height:1.3}
.article-body p{margin:0 0 1.15em}
.article-body img{border-radius:12px;margin:1.2em 0}
.article-body blockquote{margin:1.4em 0;padding:14px 18px;border-left:3px solid var(--primary);background:var(--surface);border-radius:0 12px 12px 0;color:var(--muted)}
.article-body ul,.article-body ol{margin:0 0 1.15em;padding-left:1.35em}
.article-body li{margin:.35em 0}
.article-body a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{opacity:.85}
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin:28px auto 0;padding:0 16px}
.article-tags .tag-link{display:inline-flex;padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:.8rem;color:var(--muted);transition:.15s}
.article-tags .tag-link:hover{border-color:var(--primary);color:var(--primary)}
.article-footer{max-width:var(--art-w);margin:28px auto 0;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:14px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;box-sizing:border-box}
.article-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.art-cat-link{color:var(--cat-c,var(--primary))!important;font-weight:600;text-decoration:none!important;font-size:.82rem;letter-spacing:.02em;text-transform:uppercase}
.art-cat-link:hover{opacity:.85}
.article-meta-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.84rem;color:var(--muted);margin:12px 0 4px;line-height:1.4}
.article-meta-bar .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.4;flex-shrink:0}
.article-meta-bar a{color:inherit}
.article-meta-bar a:hover{color:var(--primary)}
.breadcrumbs-compact{max-width:var(--art-w,720px);margin:0 auto 12px;padding:0 16px;font-size:.78rem;opacity:.85}
.breadcrumbs-compact .bc-current{color:var(--text);font-weight:500}
.cat-page{width:min(1240px,100% - 32px);margin:0 auto;padding:12px 0 48px;box-sizing:border-box}
.cat-page .breadcrumbs{max-width:none;margin:0 0 12px;padding:0}
.cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 24px}
.cat-title{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:700;margin:0;display:flex;align-items:center;gap:12px;letter-spacing:-.02em}
.cat-bar{width:6px;height:1.15em;border-radius:4px;flex-shrink:0;display:inline-block}
.cat-count{color:var(--muted);font-size:.88rem;white-space:nowrap}
.article-page .article-hero h1{margin:0 0 4px;line-height:1.15;overflow-wrap:anywhere;hyphens:auto}
.article-page .art-col{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}
@media(max-width:640px){
  .article-page{padding:16px 0 48px}
  .article-page .article-hero h1{font-size:clamp(1.35rem,6vw,1.85rem)!important}
  .article-meta-bar{font-size:.78rem;gap:4px 8px}
  .article-actions{margin-top:10px}
  .article-page .article-cover{border-radius:12px;margin:16px 0 20px}
  .breadcrumbs{font-size:.75rem;gap:4px 6px}
  .cat-page{width:calc(100% - 24px);padding-top:8px}
  .cat-head{margin-bottom:16px}
  .cat-title{font-size:1.35rem}
}

.breadcrumbs{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;font-size:.82rem;line-height:1.5;color:var(--muted);margin:0 auto 20px;padding:0 16px;max-width:820px;box-sizing:border-box}
.article-page > .breadcrumbs{max-width:820px}
.breadcrumbs a{color:var(--muted);text-decoration:none;white-space:nowrap}
.breadcrumbs a:hover{color:var(--primary)}
.breadcrumbs .sep{opacity:.45;user-select:none;flex-shrink:0}
.breadcrumbs .bc-current{color:var(--text);font-weight:500;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.article-hero{max-width:var(--art-w,720px);margin:0 auto}
.article-hero h1{font-family:var(--font-display);font-size:clamp(1.8rem,4.5vw,3rem);line-height:1.12;margin:18px 0;letter-spacing:-1px}
.article-hero .meta{color:var(--muted);margin-bottom:14px}
.article-hero .meta a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.article-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.article-cover{margin:22px auto;max-width:100%;border-radius:var(--art-cover-r,var(--radius));overflow:hidden;aspect-ratio:var(--art-cover-ratio,21/9);background-size:cover;background-position:center;border:1px solid var(--border);background-color:var(--surface-2)}
/* FIX #13: Beautiful article TOC */
.article-toc{max-width:760px;width:100%;margin:24px auto 0;padding:0;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;position:relative;float:none;box-shadow:0 12px 32px -22px rgba(0,0,0,.5)}
.article-toc-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--surface-2);border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
.article-toc-head h4{font-family:var(--font-display);font-size:.92rem;font-weight:700;text-transform:none;letter-spacing:0;color:var(--text);margin:0;display:flex;align-items:center;gap:8px}
.article-toc-head h4::before{content:"≡";font-size:1.2rem;color:var(--primary);line-height:1}
.article-toc-head .chev{transition:.2s;opacity:.6}
.article-toc.collapsed .chev{transform:rotate(-90deg)}
.article-toc.collapsed .article-toc-body{display:none}
.article-toc.toc-style-compact{max-width:560px;border-radius:12px}
.article-toc.toc-style-compact .article-toc-head{padding:10px 14px}
.article-toc.toc-style-compact a{padding:5px 12px;font-size:.85rem}
.article-toc.toc-style-minimal{background:transparent;border:none;box-shadow:none;border-left:3px solid var(--primary);border-radius:0}
.article-toc.toc-style-minimal .article-toc-head{background:transparent;border:none;padding:8px 12px}
.article-toc.toc-style-minimal .article-toc-progress{display:none}
.article-toc.toc-style-numbered .toc-num{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-right:8px;border-radius:6px;background:var(--surface-2);font-size:.75rem;font-weight:700;color:var(--primary);flex-shrink:0}
.article-toc.toc-style-numbered li{display:flex;align-items:flex-start;gap:0}
.article-toc.toc-style-numbered a{flex:1;min-width:0}
.toc-wrap{display:block;clear:both;max-width:680px;width:100%;margin:20px auto 24px;padding:0 16px;box-sizing:border-box;float:none;position:relative;z-index:1}
.toc-wrap .article-toc{max-width:100%;margin:0}
.toc-ad-wrap{margin-top:12px}
.toc-ad-wrap .ad-slot{margin:0}
.article-page.has-toc-sidebar{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr);grid-template-rows:auto;column-gap:28px;max-width:1100px;margin-left:auto;margin-right:auto;padding:0 16px;box-sizing:border-box}
.article-page.has-toc-sidebar > .breadcrumbs,
.article-page.has-toc-sidebar > .article-hero,
.article-page.has-toc-sidebar > .article-cover,
.article-page.has-toc-sidebar > .article-actions,
.article-page.has-toc-sidebar > .section-head,
.article-page.has-toc-sidebar > .article-infinite,
.article-page.has-toc-sidebar > .ad-slot{grid-column:1 / -1}
.article-page.has-toc-sidebar > .toc-wrap-sidebar{grid-column:1;grid-row:auto;margin:0;padding:0;position:sticky;top:80px;align-self:start;max-height:calc(100vh - 100px);overflow:auto}
.article-page.has-toc-sidebar > .article-body{grid-column:2;max-width:none;margin:0;padding:0}
@media (max-width:900px){
  .article-page.has-toc-sidebar{display:block;max-width:none;padding:0}
  .article-page.has-toc-sidebar > .toc-wrap-sidebar{position:static;max-height:none;margin:20px auto;padding:0 16px;max-width:680px}
  .article-page.has-toc-sidebar > .article-body{max-width:680px;margin:0 auto}
}
.article-infinite{max-width:760px;margin:48px auto 0;padding:0 16px}
.article-infinite .section-head{margin-bottom:20px}
.article-infinite-list{display:flex;flex-direction:column;gap:28px}
.article-infinite-item{padding-bottom:28px;border-bottom:1px solid var(--border)}
.article-infinite-item h2{font-family:var(--font-display);font-size:1.35rem;margin:0 0 8px}
.article-infinite-item h2 a:hover{color:var(--primary)}
.article-infinite-item .ai-meta{font-size:.82rem;color:var(--muted);margin-bottom:10px;display:flex;gap:10px;flex-wrap:wrap}
.article-infinite-item .ai-excerpt{color:var(--muted);line-height:1.65;margin-bottom:12px}
.article-infinite-item .ai-full{line-height:1.75}
.article-infinite-sentinel{height:1px;margin:20px 0}

.article-toc-body{padding:10px 8px 12px}
.article-toc ul{list-style:none;font-size:.92rem;margin:0}
.article-toc li{margin:0}
.article-toc a{display:block;padding:8px 14px;color:var(--muted);transition:.15s;border-radius:8px;position:relative;line-height:1.4}
.article-toc a:hover{color:var(--text);background:var(--surface-2)}
.article-toc a.active{color:var(--primary);background:color-mix(in srgb, var(--primary) 12%, transparent);font-weight:600}
.article-toc a.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--primary)}
.article-toc li.lvl-3 a{padding-left:26px;font-size:.86rem}
.article-toc-progress{position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);transform-origin:left;transform:scaleX(0);transition:transform .15s}
/* TOC float removed — use tocPosition=sidebar instead */
.article-body{max-width:none;margin:0;font-size:var(--art-body,1.125rem);line-height:1.8;letter-spacing:.01em;color:var(--text)}
.article-body h2{font-family:var(--font-display);font-size:1.45rem;line-height:1.3;margin:2.2em 0 .7em;letter-spacing:-.3px;scroll-margin-top:90px}
.article-body h3{font-family:var(--font-display);font-size:1.18rem;line-height:1.35;margin:1.8em 0 .55em;scroll-margin-top:90px}
.article-body p{margin-bottom:1.15em}
.article-body ul,.article-body ol{margin:0 0 1.15em 1.4em}
.article-body li{margin-bottom:.55em;line-height:1.7}
.article-body img{border-radius:12px;margin:1.4em 0}
.article-body blockquote{border-left:3px solid var(--primary);padding:1em 1.25em;margin:1.6em 0;border-radius:0 12px 12px 0;background:var(--surface);font-style:italic;color:var(--muted);line-height:1.7}
.article-body a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.article-hero h1{max-width:34ch;line-height:1.15}
.card-body p{line-height:1.55}
.hero-content p{line-height:1.55}
@media(min-width:900px){.article-body{font-size:1.15rem}}
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin:28px auto 0;max-width:var(--art-w,720px);padding:0 16px;box-sizing:border-box}
.tag-link{padding:5px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:.8rem;color:var(--muted);transition:.2s}
.tag-link:hover{border-color:var(--primary);color:var(--primary)}
.tag-link::before{content:"# ";opacity:.6}
.article-footer{max-width:var(--art-w,720px);margin:28px auto 0;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:14px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;box-sizing:border-box}
.share{display:flex;gap:8px;flex-wrap:wrap}
.share-btn{width:38px;height:38px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);cursor:pointer;display:grid;place-items:center;transition:.2s}
.share-btn:hover{background:var(--primary);color:#04060d;border-color:transparent;transform:translateY(-2px)}
.share-btn svg{width:16px;height:16px}
.comments{max-width:760px;margin:40px auto 0}
.comments h3{font-family:var(--font-display);font-size:1.2rem;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.comment-form{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:24px}
.comment{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin-bottom:12px}
.comment-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.85rem;gap:10px;flex-wrap:wrap}
.comment-head strong{color:var(--primary)}
.comment-head time{color:var(--muted);font-size:.78rem}
.comment-body{font-size:.92rem;line-height:1.6}
#announceBar{background:var(--grad);color:#04060d;font-size:.88rem;font-weight:600;padding:9px 16px;text-align:center;position:relative;z-index:55;line-height:1.4}
#announceBar a{color:inherit;text-decoration:underline;margin-left:8px;font-weight:700}
html[data-theme="light"] #announceBar{color:#0c1224}
.author-hero,.tag-hero{padding:40px 0;text-align:center;border-bottom:1px solid var(--border);margin-bottom:30px}
.author-hero .avatar{width:80px;height:80px;border-radius:50%;background:var(--grad);display:inline-grid;place-items:center;font-family:var(--font-display);font-size:2rem;font-weight:700;color:#04060d;margin-bottom:14px}
.author-hero h1,.tag-hero h1{font-family:var(--font-display);font-size:2rem;letter-spacing:-.5px;margin-bottom:8px}
.author-hero p,.tag-hero p{color:var(--muted)}
#admin{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;grid-template-columns:240px 1fr;overflow:hidden}
.admin-side{background:var(--bg2);border-right:1px solid var(--border);padding:22px 12px;overflow-y:auto}
.admin-logo{font-family:var(--font-display);font-weight:700;font-size:1.15rem;padding:0 10px 20px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--border);margin-bottom:16px}
.admin-nav{display:flex;flex-direction:column;gap:4px}
.admin-nav button{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;background:transparent;border:none;cursor:pointer;text-align:left;font-size:.88rem;font-weight:500;color:var(--muted);transition:.2s;width:100%;position:relative}
.admin-nav button:hover{background:var(--surface);color:var(--text)}
.admin-nav button.active{background:var(--grad);color:#04060d;font-weight:700}
.admin-nav svg{width:16px;height:16px;flex-shrink:0}
.admin-nav .nav-count{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);padding:1px 7px;border-radius:8px;font-size:.68rem;font-weight:700}
.admin-nav button.active .nav-count{background:rgba(0,0,0,.15)}
.admin-main{overflow-y:auto;padding:24px 28px 60px}
.admin-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.admin-top h2{font-family:var(--font-display);font-size:1.4rem;letter-spacing:-.4px}
.admin-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:20px}
.admin-panel h3{font-family:var(--font-display);font-size:1.05rem;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.stat .num{font-family:var(--font-display);font-size:1.9rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.table{width:100%;border-collapse:collapse;font-size:.87rem}
.table th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.table td{padding:11px 12px;border-bottom:1px solid var(--border)}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:var(--surface-2)}
.table .actions{display:flex;gap:6px;justify-content:flex-end}
.badge-sm{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.7rem;font-weight:700;color:#04060d}
.badge-status{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.7rem;font-weight:700}
.badge-published{background:rgba(16,185,129,.15);color:#10b981}
.badge-draft{background:rgba(245,158,11,.15);color:#f59e0b}
.empty{padding:40px;text-align:center;color:var(--muted);font-size:.9rem}
.bulk-bar{display:flex;gap:10px;align-items:center;padding:12px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;margin-bottom:14px;flex-wrap:wrap}
.bulk-bar strong{color:var(--primary)}
.admin-table-scroll{overflow-x:auto}
@media(max-width:900px){#admin{grid-template-columns:1fr;grid-template-rows:auto 1fr}.admin-side{padding:10px;border-right:none;border-bottom:1px solid var(--border);overflow-x:auto}.admin-logo{display:none}.admin-nav{flex-direction:row;overflow-x:auto;gap:6px}.admin-nav button{white-space:nowrap;width:auto;padding:8px 12px}.admin-nav .nav-count{position:static;transform:none;margin-left:4px}.admin-main{padding:16px}}
.editor-wrap{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg2)}
.editor-toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:6px;background:var(--surface);border-bottom:1px solid var(--border)}
.editor-toolbar button{width:32px;height:32px;border-radius:7px;background:transparent;border:none;color:var(--text);cursor:pointer;display:grid;place-items:center;transition:.15s;font-size:.85rem;font-weight:700}
.editor-toolbar button:hover{background:var(--surface-2)}
.editor-toolbar button.active{background:var(--primary);color:#04060d}
.editor-toolbar .sep{width:1px;background:var(--border);margin:0 4px}
.editor-content{min-height:280px;max-height:480px;overflow-y:auto;padding:16px 18px;outline:none;font-size:.95rem;line-height:1.7}
.editor-content:empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none}
.editor-content h2{font-family:var(--font-display);font-size:1.3rem;margin:16px 0 8px}
.editor-content h3{font-family:var(--font-display);font-size:1.1rem;margin:12px 0 6px}
.editor-content blockquote{border-left:3px solid var(--primary);padding:10px 16px;margin:12px 0;background:var(--surface);font-style:italic}
.editor-content img{max-width:100%;border-radius:8px;margin:10px 0}
.editor-content ul,.editor-content ol{margin:10px 0 10px 24px}
.editor-html{min-height:280px;max-height:480px;font-family:'Consolas','Monaco',monospace;font-size:.85rem;line-height:1.5;background:var(--bg);border:none;color:var(--text);padding:16px 18px;outline:none;resize:vertical;width:100%}
.serp{background:#fff;color:#1a0dab;border-radius:12px;padding:16px;font-family:Arial,sans-serif}
.serp .url{font-size:12px;color:#0d652d;margin-bottom:3px}
.serp .title{font-size:18px;line-height:1.3;margin-bottom:4px}
.serp .desc{font-size:13px;color:#4d5156;line-height:1.5}
html{--glass-blur:20px;--glass-op:.14;--radius:18px;--radius-sm:12px;--font-scale:1;--card-gap:22px;--section-gap:40px}
body{font-size:calc(1rem * var(--font-scale))}
html[data-density="compact"]{--card-gap:14px;--section-gap:28px}
html[data-density="compact"] .card-body{padding:14px 16px 16px}
html[data-density="compact"] .section-head{margin:24px 0 14px}
html[data-density="spacious"]{--card-gap:28px;--section-gap:52px}
html[data-density="spacious"] .card-body{padding:22px 24px 24px}
html[data-density="spacious"] .article-body{line-height:1.85}
.grid{gap:var(--card-gap)}
.section-head{margin:var(--section-gap) 0 20px}
html[data-anim="off"] *,html[data-anim="off"] *::before,html[data-anim="off"] *::after{animation:none!important;transition:none!important}
html[data-bg-decor="off"] .bg-decor{display:none}
html[data-bg-grid="off"] .bg-grid{display:none}
html[data-card-lift="off"] .card:hover,html[data-card-lift="off"] .hero-card:hover{transform:none;box-shadow:none}
html[data-glass="on"] .site-header{background:rgba(12,14,24,calc(var(--glass-op) + .35));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);backdrop-filter:blur(var(--glass-blur)) saturate(1.4);border-bottom-color:rgba(255,255,255,.12)}
html[data-theme="light"][data-glass="on"] .site-header{background:rgba(255,255,255,calc(var(--glass-op) + .55))}
html[data-glass="on"] .card,html[data-glass="on"] .admin-panel,html[data-glass="on"] .filters-bar,html[data-glass="on"] .comment,html[data-glass="on"] .comment-form,html[data-glass="on"] .article-toc,html[data-glass="on"] .article-footer,html[data-glass="on"] .popular-item,html[data-glass="on"] .modal-card,html[data-glass="on"] .stat,html[data-glass="on"] .toast,html[data-glass="on"] #cookieBanner{background:rgba(255,255,255,var(--glass-op));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.35);backdrop-filter:blur(var(--glass-blur)) saturate(1.35);border-color:rgba(255,255,255,.16);box-shadow:0 8px 32px -12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12)}
html[data-theme="light"][data-glass="on"] .card,html[data-theme="light"][data-glass="on"] .admin-panel,html[data-theme="light"][data-glass="on"] .filters-bar,html[data-theme="light"][data-glass="on"] .comment,html[data-theme="light"][data-glass="on"] .comment-form,html[data-theme="light"][data-glass="on"] .article-toc,html[data-theme="light"][data-glass="on"] .article-footer,html[data-theme="light"][data-glass="on"] .popular-item,html[data-theme="light"][data-glass="on"] .modal-card,html[data-theme="light"][data-glass="on"] .stat,html[data-theme="light"][data-glass="on"] .toast,html[data-theme="light"][data-glass="on"] #cookieBanner{background:rgba(255,255,255,calc(var(--glass-op) + .55));border-color:rgba(12,22,54,.1);box-shadow:0 10px 40px -18px rgba(20,30,80,.2), inset 0 1px 0 rgba(255,255,255,.8)}
html[data-glass="on"] .card:hover{border-color:rgba(255,255,255,.28);box-shadow:0 20px 50px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.18)}
html[data-glass="on"] .btn,html[data-glass="on"] .icon-btn,html[data-glass="on"] .chip,html[data-glass="on"] .input,html[data-glass="on"] .textarea,html[data-glass="on"] .select{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html[data-glass="on"] .hero-card{border-color:rgba(255,255,255,.2);box-shadow:0 30px 80px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.15)}
html[data-glass="on"] .bg-decor::before,html[data-glass="on"] .bg-decor::after{opacity:.45;filter:blur(140px)}
html[data-glass="on"] .bg-grid{opacity:.35}
html[data-style="liquid-glass"] body{background:radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 60%),radial-gradient(900px 500px at 90% 10%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 55%),radial-gradient(800px 400px at 50% 100%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 50%),var(--bg)}
html[data-style="liquid-glass"] .card,html[data-style="liquid-glass"] .modal-card,html[data-style="liquid-glass"] .admin-panel{background:linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 40%, rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.22);box-shadow:0 12px 40px -16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.06)}
html[data-theme="light"][data-style="liquid-glass"] .card,html[data-theme="light"][data-style="liquid-glass"] .modal-card,html[data-theme="light"][data-style="liquid-glass"] .admin-panel{background:linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.55));border-color:rgba(255,255,255,.7)}
html[data-style="liquid-glass"] .site-header{background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04));border-bottom:1px solid rgba(255,255,255,.15)}
html[data-style="liquid-glass"] .card-media::after{background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.25))}
html[data-style="liquid-glass"] .logo-mark{box-shadow:0 0 28px -2px var(--primary), inset 0 1px 0 rgba(255,255,255,.4)}
html[data-style="midnight"]{--bg:#030712;--bg2:#0a0f1e}
html[data-style="aurora"] .bg-decor::before{background:radial-gradient(circle,#34d399,transparent 70%)}
html[data-style="aurora"] .bg-decor::after{background:radial-gradient(circle,#f472b6,transparent 70%)}
html[data-style="neon"] .card:hover{box-shadow:0 0 0 1px var(--primary),0 20px 50px -20px var(--primary)}
html[data-style="paper"] .bg-decor,html[data-style="paper"] .bg-grid{opacity:.25}
html[data-style="ocean"] .bg-decor::before{background:radial-gradient(circle,#38bdf8,transparent 70%)}
html[data-style="ocean"] .bg-decor::after{background:radial-gradient(circle,#818cf8,transparent 70%)}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.preset-card{border:1px solid var(--border);border-radius:14px;padding:12px;cursor:pointer;background:var(--surface);transition:.2s;text-align:left}
.preset-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.preset-card.active{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 35%,transparent)}
.preset-swatch{height:44px;border-radius:10px;margin-bottom:10px;border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden}
.preset-swatch span{position:absolute;inset:0;opacity:.9}
.preset-card strong{display:block;font-size:.88rem;margin-bottom:2px}
.preset-card small{color:var(--muted);font-size:.75rem;line-height:1.35}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:#000;margin:18px 0}
.video-frame iframe,.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-frame.native video{object-fit:contain;background:#000}
.card-video-badge{position:absolute;bottom:12px;left:12px;z-index:2;padding:4px 10px;border-radius:999px;font-size:.7rem;font-weight:700;background:rgba(0,0,0,.65);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;transition:opacity .25s}
.has-card-video.is-playing .card-video-badge{opacity:0}
/* Video as card cover — same box geometry as photo cards */
.card-media.has-card-video,
.card-overlay-media.has-card-video,
.hero-media.has-card-video{
  background-color:#0a0c12;
  position:relative;
  overflow:hidden;
  isolation:isolate; /* keep <video> under gradient/title */
}
.card:has(.has-card-video),.card:has(.card-video){
  content-visibility:visible;
}
.article-cover-video,.article-cover-video video,.article-cover-video .video-frame{pointer-events:auto !important}
.nova-article-video{pointer-events:auto !important}
/* Do NOT override aspect-ratio — inherit 16/10 overlay / classic media rules */
.card-horizontal .card-media.has-card-video{
  aspect-ratio:auto;
  min-height:100%;
  align-self:stretch;
}
.card-video,
.card-video-thumb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  z-index:0;
  pointer-events:none;
  background:#0a0c12;
}
.card-video{opacity:1}
.has-card-video.is-playing{background-image:none !important}
.has-card-video.is-playing .card-video-thumb{opacity:0;transition:opacity .25s}
/* Gradient + title MUST stay above the video layer */
.card-overlay-media.has-card-video .card-overlay-grad{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.card-overlay-media.has-card-video .card-overlay-body{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:3;
  pointer-events:none;
}
.card-overlay-media.has-card-video .card-bookmark,
.card-overlay-media.has-card-video .card-flags,
.card-overlay-media.has-card-video .card-video-badge{
  z-index:4;
}
.card-media.has-card-video .card-bookmark,
.card-media.has-card-video .card-flags,
.card-media.has-card-video .card-video-badge,
.card-media.has-card-video .card-cat{
  z-index:2;
  position:absolute;
}
.hero-media.has-card-video .card-video{z-index:0}
.hero-media.has-card-video::after{z-index:1}
.card-media.has-card-video::after{z-index:1;pointer-events:none}
/* In-feed full-width slots stay stable inside grids */
.grid > .ad-slot[data-pos="infeed"],
.home-mosaic > .ad-slot[data-pos="infeed"]{
  width:100%;
  min-width:0;
}
/* Load-more / infinite sentinel — no layout shift */
.loadmore-wrap{min-height:48px;display:flex;justify-content:center;align-items:center}
#loadSentinel{display:block;width:100%;height:8px;pointer-events:none;opacity:0}
/* Article cover video — parent keeps aspect-ratio, media fills it (iOS-safe) */
.article-cover.article-cover-video{
  position:relative;
  background:#0a0c12;
  padding:0;
  overflow:hidden;
  isolation:isolate;
}
.article-cover.article-cover-video .video-frame{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  border:none !important;
  border-radius:0 !important;
  aspect-ratio:auto !important;
  min-height:0 !important;
  background:#000;
}
.article-cover.article-cover-video .video-frame iframe,
.article-cover.article-cover-video .video-frame video,
.article-cover.article-cover-video video.nova-article-video{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover;
  border:0;
  background:#000;
}
/* Standalone article player (not cover): keep 16:9, contain */
.video-frame.native{
  background:#000;
}
.video-frame.native video.nova-article-video{
  object-fit:contain;
  background:#000;
  width:100%;
  height:100%;
  max-width:none;
}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.media-item{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.media-item .thumb{aspect-ratio:16/10;background:#111 center/cover no-repeat;display:grid;place-items:center;color:var(--muted);font-size:.8rem}
.media-item .meta{padding:8px 10px;font-size:.75rem;color:var(--muted)}
.media-item .meta strong{display:block;color:var(--text);font-size:.8rem;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media print{.site-header,.site-footer,.article-actions,.article-tags,.article-footer,.comments,.breadcrumbs,#backTop,#cookieBanner,#readProgress,.article-toc,.ad-slot,#stickyAdRoot{display:none!important}body{background:#fff;color:#000}.article-body{color:#000;max-width:none}}
.article-body,.article-body *{max-width:100%}
.article-body img,.article-body video,.article-body svg,.article-body canvas{max-width:100%;height:auto}
.article-body img{display:block;margin-left:auto;margin-right:auto}
.article-body img.img-broken,.article-body a:has(> img.img-broken){display:none}
.article-body a.highslide,.article-body a.fancybox{display:block;text-decoration:none}
.article-body figure{margin:1.4em 0}
.article-body figcaption{font-size:.85rem;color:var(--muted);text-align:center;margin-top:.5em}
.article-body iframe,.article-body embed,.article-body object{width:100%;max-width:100%;border:0;border-radius:12px;margin:1.2em 0}
.article-body iframe[src*="youtube"],.article-body iframe[src*="youtu.be"],.article-body iframe[src*="vimeo"],.article-body iframe[src*="rutube"],.article-body iframe[src*="vk.com"],.article-body iframe[src*="vkvideo"]{aspect-ratio:16/9;height:auto}
.article-body table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1.4em 0;-webkit-overflow-scrolling:touch}
.article-body th,.article-body td{border:1px solid var(--border);padding:8px 12px;vertical-align:top;overflow-wrap:normal;word-break:normal}
.article-body th{background:var(--surface-2)}
.article-body pre{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin:1.4em 0}
.article-body hr{border:0;border-top:1px solid var(--border);margin:2em 0}
.article-body h1,.article-body h4,.article-body h5,.article-body h6{font-family:var(--font-display);line-height:1.3;margin:1.6em 0 .6em}
.article-body h1{font-size:1.6rem}
.article-body .quote_block,.article-body div.quote,.article-body .scriptcode{border-left:3px solid var(--primary);padding:1em 1.25em;margin:1.6em 0;border-radius:0 12px 12px 0;background:var(--surface);color:var(--muted)}
.article-body .quote_block>div,.article-body .quote_body{margin:0}
.article-body .title_quote{font-weight:700;font-size:.85rem;margin-bottom:.4em}
.article-body [style*="position"]{position:static !important}
.article-body [style*="float"]{float:none !important}
.article-body [style*="white-space"]{white-space:normal !important}
.article-body [style*="font-family"],.article-body font{font-family:inherit !important}
.article-body [style*="font-size"],.article-body [style*="line-height"]{font-size:inherit !important;line-height:inherit !important}
.article-body span[style*="color"],.article-body p[style*="color"],.article-body div[style*="color"],.article-body font{color:inherit !important}
.article-body span[style*="background"],.article-body p[style*="background"],.article-body div[style*="background"]{background:transparent !important}
.article-body [align]{float:none}
.article-body :is(p,div)[style*="margin"]{margin-left:0 !important;margin-right:0 !important}
@media(min-width:900px){.article-body img[style*="float"]{float:none !important}}
.sr-opts{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.9rem;margin-top:4px}
.sr-opts label,.sr-fields label,.sr-scope-title{display:flex;align-items:center;gap:7px;cursor:pointer}
.sr-opts input,.sr-fields input,.sr-scope-title input,.sr-head input{width:16px;height:16px;accent-color:var(--primary);flex-shrink:0}
.sr-opts small{color:var(--muted)}
.sr-scope{padding:10px 0;border-top:1px solid var(--border)}
.sr-scope:first-of-type{border-top:0;padding-top:0}
.sr-scope-title{font-weight:600;margin-bottom:6px}
.sr-fields{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.86rem;padding-left:23px;color:var(--muted)}
.sr-summary-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sr-item{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--surface)}
.sr-head{display:flex;align-items:center;gap:10px;cursor:pointer;flex-wrap:wrap}
.sr-head strong{flex:1;min-width:0;overflow-wrap:anywhere}
.sr-count{font-size:.75rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.sr-field{margin:8px 0 0 26px}
.sr-fname{font-size:.74rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:4px}
.sr-snip{font:.82rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:6px 10px;margin-bottom:4px}
.sr-snip del{background:rgba(255,91,110,.22);color:inherit;text-decoration:line-through;border-radius:3px;padding:0 2px}
.sr-snip ins{background:rgba(16,185,129,.25);color:inherit;text-decoration:none;border-radius:3px;padding:0 2px}
.sr-warn{font-size:.85rem;color:#f59e0b;margin-bottom:10px}
.sr-hist{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border)}
.sr-hist:first-child{border-top:0}
.sr-hist code{overflow-wrap:anywhere}
/* Admin settings accordion */
.settings-acc{margin:0 0 12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}
.settings-acc-sum{cursor:pointer;padding:14px 18px;font-weight:700;font-family:var(--font-display);font-size:1rem;list-style:none;display:flex;align-items:center;gap:10px;user-select:none;transition:background .15s}
.settings-acc-sum::-webkit-details-marker{display:none}
.settings-acc-sum::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .2s;opacity:.7}
.settings-acc[open] > .settings-acc-sum{border-bottom:1px solid var(--border);background:var(--surface-2)}
.settings-acc[open] > .settings-acc-sum::after{transform:rotate(45deg)}
.settings-acc-sum:hover{background:var(--surface-2)}
.settings-acc-body{padding:16px 16px 8px}
.settings-acc-body .admin-panel{margin-bottom:14px}
.settings-acc-body .admin-panel:last-child{margin-bottom:8px}
.settings-savebar{position:sticky;bottom:12px;z-index:5;display:flex;justify-content:flex-end;padding:12px 0 4px;margin-top:8px}
.settings-savebar .btn{box-shadow:0 8px 28px -8px rgba(0,0,0,.45)}
/* Footer mobile empty space fix */
.footer-cols[hidden],.footer-cols[style*="display: none"]{display:none!important;margin:0;padding:0;min-height:0}
.footer-col[style*="display: none"]{display:none!important}
.footer-brand-compact{margin-bottom:0}
@media(max-width:640px){
  .footer-inner{gap:20px}
  .footer-brand{max-width:none;width:100%;flex:1 1 auto}
  .footer-cols{flex:1 1 auto;width:100%;gap:20px 24px;min-height:0}
  .footer-col{min-width:0;flex:1 1 140px}
  .footer-col:empty,.footer-col:not(:has(a)){display:none}
  .footer-bottom{margin-top:20px;padding-top:14px}
  .site-footer{padding:32px 0 20px;margin-top:40px}
}
/* FIX #15: Like animation */
.like-pop{animation:likePop .35s ease}
@keyframes likePop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes likeFloat{0%{opacity:1;transform:translate(-50%,-50%) scale(.8)}100%{opacity:0;transform:translate(-50%,-160%) scale(1.4)}}
/* Категории: drag&drop */
tr.cat-dragging{opacity:.4}
tr.cat-drop-target td{background:color-mix(in srgb, var(--primary) 18%, transparent) !important;outline:1px dashed var(--primary)}
#catRootDrop.cat-drop-target{border-color:var(--primary);background:var(--surface-2);color:var(--text)}
.cat-order-cell{white-space:nowrap}
.cat-order-cell .btn{padding:2px 6px;font-size:.7rem;min-width:22px}

/* Mobile tap robustness */
.card, .hero-card, .popular-item, .card-bookmark, .nav-drop-toggle {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Декоративные слои не должны перехватывать тап */
.card-cat, .card-media::after, .hero-media::after, .card-video-badge {
  pointer-events: none;
}
/* Отключаем «залипание» hover на мобильном — оно сдвигает карточку
   и следующий тап попадает уже не туда */
@media (hover: none) {
  .card:hover, .hero-card:hover, .popular-item:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--border) !important;
    background: var(--surface) !important;
  }
  .card:active, .popular-item:active {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
  }
}
/* ========== Admin mobile overhaul ========== */
@media (max-width: 900px) {
  #admin {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    height: 100dvh;
    height: 100vh;
  }
  .admin-side {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 8px 10px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg2) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: visible !important;
  }
  .admin-logo {
    display: none !important;
  }
  .admin-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0 4px;
    max-width: 100%;
  }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav button {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    padding: 9px 12px !important;
    font-size: .8rem !important;
    border: 1px solid var(--border);
    border-radius: 999px !important;
    background: var(--surface);
  }
  .admin-nav button.active {
    border-color: transparent;
  }
  .admin-nav .nav-count {
    position: static !important;
    transform: none !important;
    margin-left: 6px;
    font-size: .65rem;
  }
  .admin-nav svg {
    width: 14px;
    height: 14px;
  }
  .admin-main {
    padding: 12px 12px 88px !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .admin-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  .admin-top h2 {
    font-size: 1.2rem !important;
  }
  .admin-top > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .admin-top .btn,
  .admin-top a.btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 40px;
  }
  .admin-panel {
    padding: 14px !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
  }
  .admin-panel h3 {
    font-size: .98rem !important;
    margin-bottom: 12px !important;
  }
  .admin-table-scroll,
  .table-wrap,
  #adminContent .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px;
    padding-bottom: 4px;
  }
  #adminContent table.table,
  #adminContent .table {
    min-width: 520px;
    font-size: .82rem;
  }
  #adminContent .row {
    grid-template-columns: 1fr !important;
  }
  #adminContent .field,
  #adminContent .input,
  #adminContent textarea,
  #adminContent select,
  #adminContent .btn {
    max-width: 100%;
  }
  #adminContent textarea {
    min-height: 120px;
  }
  #adminContent .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #adminContent .stat {
    padding: 12px !important;
  }
  #adminContent .stat .num {
    font-size: 1.15rem !important;
  }
  /* Editor / modal inside admin */
  #admin .modal-card,
  .modal-card.wide {
    width: calc(100% - 16px) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 8px auto !important;
    border-radius: 14px !important;
  }
  #admin .modal-body {
    padding: 12px !important;
    max-height: min(70dvh, 520px);
    overflow: auto;
  }
  #admin .modal-foot {
    flex-wrap: wrap;
    gap: 8px;
  }
  #admin .modal-foot .btn {
    flex: 1 1 120px;
  }
  /* Media grid */
  #adminContent .media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  /* Login form */
  #adminContent .admin-panel[style*="max-width"] {
    max-width: 100% !important;
    margin: 24px 0 !important;
  }
  /* Performance checkboxes */
  #adminContent .row {
    display: grid !important;
    gap: 8px !important;
  }
}

@media (max-width: 560px) {
  .admin-nav button {
    padding: 8px 10px !important;
    font-size: .75rem !important;
    gap: 6px !important;
  }
  /* Hide long labels on very small screens — keep icon + short text via CSS if data attrs not present: clip */
  .admin-main {
    padding: 10px 10px 96px !important;
  }
  #adminContent .stats {
    grid-template-columns: 1fr 1fr !important;
  }
  #adminContent .media-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .admin-panel {
    padding: 12px !important;
  }
  /* Stack action button groups */
  #adminContent div[style*="display:flex"] {
    flex-wrap: wrap !important;
  }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    .admin-side {
      padding-left: max(10px, env(safe-area-inset-left)) !important;
      padding-right: max(10px, env(safe-area-inset-right)) !important;
    }
    .admin-main {
      padding-bottom: max(88px, calc(24px + env(safe-area-inset-bottom))) !important;
    }
  }
}


/* Highlighted / pinned cards */
.card.card-highlight,
.card-horizontal.card-highlight,
.hero-card.card-highlight,
.mag-main .card.card-highlight,
.mag-side .card.card-highlight{
  border-color:var(--hl-mid,var(--primary))!important;
  box-shadow:0 0 0 1px var(--hl-soft,transparent),0 18px 40px -22px var(--hl,var(--primary));
  background:linear-gradient(180deg,var(--hl-soft,transparent),transparent 48%),var(--surface);
  position:relative;
}
.card.card-highlight::before,
.hero-card.card-highlight::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--hl,var(--primary));
  border-radius:4px 0 0 4px;
  z-index:2;
  pointer-events:none;
}
.card.card-highlight:hover,
.hero-card.card-highlight:hover{
  border-color:var(--hl,var(--primary))!important;
  box-shadow:0 0 0 1px var(--hl),0 26px 50px -22px var(--hl);
}
.card-flags{position:absolute;top:10px;left:10px;z-index:3;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none;max-width:70%}
.card-media,.card-overlay-media{position:relative}
.card-flag{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:999px;font-size:.72rem;font-weight:700;line-height:1.2;background:rgba(4,6,13,.72);color:#fff;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14)}
.card-flag-label{background:color-mix(in srgb,var(--flag-c,var(--primary)) 85%,#000);border-color:transparent}
html[data-theme="light"] .card-flag{background:rgba(255,255,255,.9);color:#0c1224;border-color:rgba(12,22,54,.1)}
html[data-theme="light"] .card-flag-label{color:#fff}

.footer-heading{font-family:var(--font-display);font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}

/* Static pages /slug.html */
.page-static .page-body{line-height:1.7}
.page-static .page-hero{padding-top:12px}
.page-layout-full .page-body,.page-layout-full .page-hero{max-width:100%!important}

/* Full-card hit target — first click always navigates */
.card,.hero-card,.popular-item{position:relative}
a.card-stretch-link,
a.card-link-cover{
  position:absolute;inset:0;z-index:1;
  border-radius:inherit;text-indent:-9999px;overflow:hidden;
  color:transparent;background:transparent;
}
/* Let clicks pass through text areas to the stretch link underneath */
.card-body,
.card-overlay-body,
.hero-content,
.popular-item .info,
.popular-item .rank{
  pointer-events:none;
}
.card-bookmark,.card-flags,.card-flag,.card-video-badge,.ad-close,.ad-label{
  position:relative;z-index:2;
}
.card-bookmark{position:absolute;z-index:3}
.card a.card-stretch-link:focus-visible,
.card a.card-link-cover:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* Ads must not inherit card stretch-link overlay */
.card.ad-as-card > a.card-stretch-link,
.card.ad-as-card > a.card-link-cover{display:none!important}
.ad-slot a.card-stretch-link,
.ad-slot a.card-link-cover{display:none!important}
/* Stabilize in-feed / banner boxes inside grids */
.ad-slot[data-pos="infeed"],
.ad-slot[data-pos="top-banner"],
.ad-slot[data-pos="home-mid"],
.ad-slot[data-pos="under-cards"],
.ad-slot[data-pos="footer-banner"],
.ad-slot[data-pos="article-top"],
.ad-slot[data-pos="article-mid"],
.ad-slot[data-pos="article-bottom"]{
  align-self:start;
  justify-self:stretch;
}
.ad-slot[data-pos="top-banner"] .ad-banner-inner,
.ad-slot[data-pos="home-mid"] .ad-banner-inner,
.ad-slot[data-pos="footer-banner"] .ad-banner-inner{
  position:relative;
  width:100%;
  max-width:100%;
  overflow:hidden;
  box-sizing:border-box;
  min-height:90px;
  aspect-ratio:16/9;
}
.ad-slot[data-pos="top-banner"] .ad-banner-bg,
.ad-slot[data-pos="home-mid"] .ad-banner-bg,
.ad-slot[data-pos="footer-banner"] .ad-banner-bg,
.ad-slot[data-pos="infeed"] .ad-banner-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
}
.grid > .card.ad-as-card,
.home-mosaic > .card.ad-as-card{
  min-width:0;
  height:100%;
}

/* —— Ad banners: image must fill the whole box (no empty top strip) —— */
.ad-slot .ad-banner-inner,
.ad-slot .ad-image-wrap{
  position:relative !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.ad-slot .ad-banner-inner{
  min-height:120px;
  aspect-ratio:16 / 9;
}
.ad-slot .ad-banner-inner.ad-banner-tall{aspect-ratio:16 / 9}
.ad-slot[data-pos="top-banner"] .ad-banner-inner,
.ad-slot[data-pos="home-mid"] .ad-banner-inner,
.ad-slot[data-pos="footer-banner"] .ad-banner-inner,
.ad-slot[data-pos="article-bottom"] .ad-banner-inner{
  aspect-ratio:16 / 9;
  min-height:100px;
}
.ad-slot[data-pos="infeed"] .ad-banner-inner{
  aspect-ratio:16 / 9;
  min-height:140px;
}
@media(max-width:640px){
  .ad-slot .ad-banner-inner{aspect-ratio:16 / 9;min-height:120px}
}
/* Kill global img{height:auto} inside ads */
.ad-slot img.ad-banner-bg,
.ad-slot .ad-banner-bg{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
}
.ad-slot .ad-banner-inner::after{
  content:"";
  position:absolute;inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 42%,rgba(0,0,0,.1) 100%);
  pointer-events:none;
}
.ad-slot .ad-banner-copy{
  position:absolute;
  left:0;bottom:0;
  z-index:2;
  padding:18px 22px;
  max-width:min(560px,92%);
  color:#fff;
  box-sizing:border-box;
}
.ad-slot .ad-banner-copy h4{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,2.2vw,1.45rem);
  margin:0 0 6px;
  line-height:1.25;
  color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.ad-slot .ad-banner-copy p{
  margin:0;
  font-size:.9rem;
  opacity:.92;
  line-height:1.4;
  color:#fff;
}
.ad-slot .ad-banner-copy .ad-banner-foot{
  margin-top:8px;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  opacity:.8;
  color:#fff;
}
.ad-slot .ad-label{z-index:3}


/* ========== AD BANNERS v2: no empty strips ========== */
.ad-slot{
  position:relative;
  margin:16px 0;
  padding:0 !important;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background:transparent;
  line-height:0;
  font-size:0;
}
.ad-slot > .ad-link{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
  font-size:0 !important;
  border:0 !important;
  color:inherit;
  text-decoration:none;
}
.ad-slot .ad-banner-inner{
  position:relative !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  line-height:0 !important;
  font-size:0 !important;
  background-color:#0a0a12;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
/* Default ratios — image always covers the box */
.ad-slot .ad-banner-inner.ad-ratio-banner{aspect-ratio:16 / 9;min-height:140px;max-height:none}
.ad-slot .ad-banner-inner.ad-ratio-infeed{aspect-ratio:16 / 9;min-height:140px;max-height:none}
.ad-slot .ad-banner-inner.ad-ratio-sticky{aspect-ratio:21 / 9;min-height:64px;max-height:140px}
.ad-slot .ad-banner-inner.ad-banner-html{
  aspect-ratio:auto !important;
  min-height:60px;
  max-height:none;
  line-height:normal;
  font-size:1rem;
  padding:12px;
}
@media(max-width:640px){
  .ad-slot .ad-banner-inner.ad-ratio-banner,
  .ad-slot .ad-banner-inner.ad-ratio-infeed{aspect-ratio:16 / 9;min-height:120px;max-height:none}
}
/* Gradient + copy over the image */
.ad-slot .ad-banner-inner::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,.08) 100%);
}
.ad-slot .ad-banner-copy{
  position:absolute !important;
  left:0;bottom:0;right:0;
  z-index:2;
  padding:16px 20px !important;
  max-width:min(560px,100%);
  box-sizing:border-box;
  line-height:1.35 !important;
  font-size:1rem !important;
  color:#fff;
  text-align:left;
  pointer-events:none;
}
.ad-slot .ad-banner-copy h4{
  font-family:var(--font-display);
  font-size:clamp(1rem,2vw,1.35rem) !important;
  margin:0 0 4px !important;
  line-height:1.25 !important;
  color:#fff !important;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.ad-slot .ad-banner-copy p{
  margin:0 !important;
  font-size:.88rem !important;
  line-height:1.4 !important;
  color:rgba(255,255,255,.92) !important;
}
.ad-slot .ad-banner-copy .ad-banner-foot{
  margin-top:6px !important;
  font-size:.68rem !important;
  text-transform:uppercase;
  letter-spacing:.5px;
  opacity:.8;
  color:#fff !important;
}
.ad-slot .ad-label{
  position:absolute !important;
  top:8px !important;
  left:10px !important;
  right:auto !important;
  z-index:4 !important;
  font-size:.62rem !important;
  line-height:1 !important;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:rgba(255,255,255,.8) !important;
  pointer-events:none;
  background:rgba(0,0,0,.35);
  padding:3px 7px;
  border-radius:6px;
}
.ad-slot[data-hide-label="1"] .ad-label{display:none !important}
.ad-slot[data-pos="infeed"]{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:100% !important;
  margin:16px 0 !important;
}
.ad-slot[data-pos="sticky-bottom"]{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  margin:0;border-radius:0;border-left:none;border-right:none;border-bottom:none;
}
.ad-slot .ad-text-body{
  line-height:1.45 !important;
  font-size:.95rem !important;
  padding:18px 22px;
}
/* No stray img rules inside banners */
.ad-slot img{
  max-width:none !important;
  height:auto;
}


/* ——— Image lightbox (article) ——— */
.article-body img:not(.no-zoom),
.page-body img:not(.no-zoom){
  cursor:zoom-in;
}
.nova-lightbox{
  position:fixed;inset:0;z-index:300;
  display:none;
  align-items:center;justify-content:center;
  padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background:rgba(0,0,0,.88);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .2s ease;
  cursor:zoom-out;
}
.nova-lightbox.is-open{
  display:flex !important;
  opacity:1;
}
.nova-lightbox[hidden]{display:none !important;opacity:0}
.nova-lightbox img{
  max-width:min(96vw, 1400px);
  max-height:min(92vh, 100%);
  width:auto;height:auto;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  transform:scale(.96);
  transition:transform .22s ease;
  cursor:default;
  background:#111;
}
.nova-lightbox.is-open img{transform:scale(1)}
.nova-lightbox-close{
  position:absolute;
  top:max(12px, env(safe-area-inset-top));
  right:max(12px, env(safe-area-inset-right));
  width:44px;height:44px;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;font-size:28px;line-height:1;
  cursor:pointer;
  display:grid;place-items:center;
  transition:background .15s;
  z-index:2;
}
.nova-lightbox-close:hover{background:rgba(255,255,255,.22)}
.nova-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:28px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:background .15s;
  z-index:2;
}
.nova-lightbox-nav:hover{background:rgba(255,255,255,.22)}
.nova-lightbox-prev{left:max(10px, env(safe-area-inset-left))}
.nova-lightbox-next{right:max(10px, env(safe-area-inset-right))}
.nova-lightbox-counter{
  position:absolute;
  bottom:max(14px, env(safe-area-inset-bottom));
  left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.75);
  font-size:.85rem;
  pointer-events:none;
}
@media(max-width:640px){
  .nova-lightbox-nav{width:40px;height:40px;font-size:22px}
}


/* ——— Shorts / short videos ——— */
.shorts-page{padding-bottom:40px}
.shorts-page .section-head h1{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);margin:0 0 6px}
.shorts-page .muted{color:var(--muted);margin:0 0 16px}
.shorts-cta{margin:0 0 18px}
.shorts-grid{
  display:grid;
  grid-template-columns:repeat(var(--shorts-cols,3),minmax(0,1fr));
  gap:16px;
  width:100%;
}
@media(max-width:900px){
  .shorts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media(max-width:560px){
  .shorts-grid{grid-template-columns:1fr;gap:14px;max-width:420px;margin:0 auto}
}
.shorts-feed{
  display:flex;flex-direction:column;gap:20px;
  max-width:420px;margin:0 auto;width:100%;
}
.short-card{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface);
  display:flex;flex-direction:column;
  min-width:0;
}
.short-media{
  position:relative;
  aspect-ratio:var(--short-ratio,9/16);
  background:#0a0c12;
  overflow:hidden;
  cursor:pointer;
}
.short-media video.short-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  background:#000;
}
.short-overlay{
  position:absolute;inset:0;
  display:grid;place-items:center;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.45) 100%);
  pointer-events:none;
  transition:opacity .2s;
}
.short-card.is-playing .short-overlay{opacity:0}
.short-play{
  pointer-events:auto;
  width:56px;height:56px;border-radius:50%;
  border:0;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;
  font-size:1.25rem;
  display:grid;place-items:center;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.short-meta{padding:10px 12px 12px}
.short-title{
  font-weight:600;font-size:.92rem;line-height:1.35;
  margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.short-stats{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  font-size:.8rem;color:var(--muted);
}
.short-like{
  border:0;background:transparent;color:var(--muted);
  cursor:pointer;font:inherit;padding:0;
  display:inline-flex;align-items:center;gap:4px;
}
.short-like.is-liked{color:#f43f5e}
.short-like:hover{color:var(--text)}


/* ——— Shorts fullscreen reel (mobile Instagram-style) ——— */
body.shorts-reel-open{
  overflow:hidden !important;
  overscroll-behavior:none;
  touch-action:none;
}
body.shorts-reel-open .site-header,
body.shorts-reel-open .site-footer,
body.shorts-reel-open #backTop,
body.shorts-reel-open #cookieBanner,
body.shorts-reel-open #stickyAdRoot,
body.shorts-reel-open .announce-bar{
  display:none !important;
}
body.shorts-reel-open #view{
  padding:0 !important;
  margin:0 !important;
  max-width:none !important;
}
.shorts-reel-root{
  position:fixed;
  inset:0;
  z-index:180;
  background:#000;
  color:#fff;
}
.shorts-reel-scroller{
  height:100%;
  width:100%;
  overflow-y:scroll;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
}
.short-reel-slide{
  position:relative;
  height:100%;
  min-height:100%;
  width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:#000;
}
.short-reel-media{
  position:absolute;
  inset:0;
}
.short-reel-media video.short-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#000;
}
.short-reel-ui{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 18%,transparent 55%,rgba(0,0,0,.55) 100%);
}
.short-reel-bottom{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:16px 16px max(20px, env(safe-area-inset-bottom));
  pointer-events:auto;
}
.short-reel-title{
  font-weight:600;
  font-size:1rem;
  line-height:1.35;
  margin:0 0 10px;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
  max-width:85%;
}
.short-reel-bottom .short-stats{
  color:rgba(255,255,255,.9);
  gap:16px;
  font-size:.9rem;
}
.short-reel-like{
  color:#fff !important;
  font-size:1rem;
}
.short-reel-like.is-liked{color:#f43f5e !important}
.short-reel-close{
  position:fixed;
  top:max(10px, env(safe-area-inset-top));
  left:max(10px, env(safe-area-inset-left));
  z-index:190;
  width:40px;height:40px;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,0,0,.45);
  color:#fff;
  text-decoration:none;
  font-size:1.1rem;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.short-reel-hint{
  position:fixed;
  left:50%;
  bottom:max(28px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:185;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.5);
  color:#fff;
  font-size:.8rem;
  pointer-events:none;
  transition:opacity .4s;
}
.short-reel-hint.is-hide{opacity:0}