/* ============ Клубер — clean CSS (tokens from ds/*.css) ============ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink-900); font-family: var(--font-sans); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
#foot-about a { text-decoration: underline; }
input { background-color: transparent; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
  -webkit-text-fill-color: var(--ink-900);
  caret-color: var(--ink-900);
  transition: background-color 9999s ease-out 0s;
}
.search-box input:-webkit-autofill, .news-field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
  -webkit-text-fill-color: var(--ink-900);
  animation-name: onAutoFillStart;
}
@keyframes onAutoFillStart { from { opacity: 1; } to { opacity: 1; } }
::selection { background: var(--accent); color: #fff; }
img { max-width: 100%; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
[hidden] { display: none !important; }

/* svg icons inherit color & size */
.ic-radio svg, .ic-bell svg, .ic-bookmark svg, .ic-search svg, .ic-user svg, .ic-grid svg,
.ic-bolt svg, .ic-clock svg, .ic-eye svg, .ic-mail svg, .ic-check svg, .ic-close svg,
.ic-burger svg, .chev svg, .ic-mail-sm svg, .ic-user-sm svg, .ic-lock svg, .ic-eye-toggle svg { display: block; }

/* ---------- keyframes ---------- */
@keyframes clbEq { 0%,100% { height: 3px; } 50% { height: 13px; } }
@keyframes clbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes clbModalIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes clbSpin { to { transform: rotate(360deg); } }
@keyframes clbInkCore { 0%,100% { transform: translate(-50%,-50%) scale(1); border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%; } 50% { transform: translate(-50%,-50%) scale(1.05); border-radius: 54% 46% 48% 52% / 46% 54% 50% 50%; } }
@keyframes clbSat1 { 0%,100% { transform: translate(-50%,-50%) translate(-260px,-58px) scale(.8); } 50% { transform: translate(-50%,-50%) translate(-110px,-16px) scale(1.05); } }
@keyframes clbSat2 { 0%,100% { transform: translate(-50%,-50%) translate(270px,58px) scale(.85); } 50% { transform: translate(-50%,-50%) translate(110px,14px) scale(1.05); } }
@keyframes clbSat3 { 0%,100% { transform: translate(-50%,-50%) translate(40px,86px) scale(.9); } 50% { transform: translate(-50%,-50%) translate(10px,34px) scale(1.12); } }
@keyframes clbSat4 { 0%,100% { transform: translate(-50%,-50%) translate(240px,-70px) scale(.7); } 50% { transform: translate(-50%,-50%) translate(100px,-26px) scale(.95); } }
@keyframes clbSat5 { 0%,100% { transform: translate(-50%,-50%) translate(230px,78px) scale(.5); } 50% { transform: translate(-50%,-50%) translate(92px,38px) scale(.8); } }
@keyframes clbSat6 { 0%,100% { transform: translate(-50%,-50%) translate(-250px,52px) scale(.5); } 50% { transform: translate(-50%,-50%) translate(-110px,22px) scale(.72); } }
@keyframes clbSat7 { 0%,100% { transform: translate(-50%,-50%) translate(-440px,-20px) scale(.4); } 50% { transform: translate(-50%,-50%) translate(-390px,-64px) scale(.58); } }
@keyframes clbSat8 { 0%,100% { transform: translate(-50%,-50%) translate(450px,46px) scale(.42); } 50% { transform: translate(-50%,-50%) translate(495px,92px) scale(.6); } }
@keyframes clbSat9 { 0%,100% { transform: translate(-50%,-50%) translate(300px,-130px) scale(.34); } 50% { transform: translate(-50%,-50%) translate(350px,-150px) scale(.5); } }
@keyframes clbSat10 { 0%,100% { transform: translate(-50%,-50%) translate(-300px,120px) scale(.32); } 50% { transform: translate(-50%,-50%) translate(-260px,150px) scale(.46); } }
@keyframes clbSat11 { 0%,100% { transform: translate(-50%,-50%) translate(-470px,-90px) scale(.5); } 50% { transform: translate(-50%,-50%) translate(-420px,-130px) scale(.66); } }
@keyframes clbSat12 { 0%,100% { transform: translate(-50%,-50%) translate(480px,115px) scale(.5); } 50% { transform: translate(-50%,-50%) translate(520px,155px) scale(.66); } }

/* ---------- header shell ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--walnut-800); color: #fff; transition: box-shadow .2s ease; }
.hdr.scrolled { box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.hdr.scrolled [data-collapse] { display: none; }
.hdr [data-scrolled-only] { display: none; }
.hdr.scrolled [data-scrolled-only] { display: flex; }
.hdr-spacer-d { height: 148px; background: var(--walnut-800); }
.hdr-spacer-m { height: 90px; background: var(--walnut-800); display: none; }
.hdr-desktop.scrolled ~ .hdr-spacer-d { height: 100px; }

.wood { background-color: var(--walnut-900); background-image: linear-gradient(rgba(20,11,5,.62),rgba(20,11,5,.62)), url(assets/bg-wood.jpg); }

.hdr-util { background-color: var(--walnut-900); background-image: linear-gradient(rgba(20,11,5,.62),rgba(20,11,5,.62)), url(assets/bg-wood.jpg); }
.hdr-util-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 40px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.lang { display: flex; align-items: center; gap: 8px; }
.lang a { text-decoration: none; cursor: pointer; color: var(--on-dark-muted); }
.lang a.on { color: #fff; font-weight: 600; }
.dot-sep { color: var(--walnut-600); }
.util-radio { display: flex; align-items: center; gap: 8px; }
.radio-name { color: #fff; font-weight: 600; white-space: nowrap; }
.radio-status { color: var(--on-dark-muted); white-space: nowrap; }
.radio-dot { width: 22px; height: 22px; border-radius: 100px; border: none; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.radio-dot.sm { width: 20px; height: 20px; }
.fm-pill .radio-dot { width: 26px; height: 26px; }
.eq { display: none; align-items: flex-end; gap: 2px; height: 13px; margin-left: 2px; }
.eq i { width: 3px; background: currentColor; border-radius: 1px; height: 4px; animation: clbEq .85s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .28s; }
.eq i:nth-child(3) { animation-delay: .56s; }
.playing .eq { display: inline-flex; }
.util-radio .eq, .fm-name .eq, .m-fm-label .eq { color: #fff; }

.hdr-mast { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 60px; display: flex; align-items: center; justify-content: space-between; transition: height .2s ease; }
.hdr.scrolled .hdr-mast { height: 54px; }
.mast-left { display: flex; align-items: center; gap: 22px; flex: 1 1 0; min-width: 0; }
.logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo img { height: 34px; display: block; transition: height .2s ease; }
.hdr.scrolled .logo img { height: 28px; }
.search-box { display: flex; align-items: center; gap: 9px; background: transparent; border: 1px solid var(--walnut-600); border-radius: 100px; padding: 11px 18px; width: 320px; max-width: 38vw; min-width: 0; transition: border-color .15s ease; }
.search-box .ic-search { color: #c4ac81; flex-shrink: 0; }
.search-box input { background: none; border: none; outline: none; color: #fff; font-family: var(--font-sans); font-size: 13.5px; width: 100%; min-width: 0; }
/* search results page: hide the header search until the hero scrolls away, then reveal it */
.srch-body #clb-search { width: 0; min-width: 0; padding-left: 0; padding-right: 0; border-color: transparent; opacity: 0; overflow: hidden; pointer-events: none; transition: width .26s ease, opacity .2s ease, padding .26s ease; }
.srch-body.search-revealed #clb-search { width: 320px; padding-left: 18px; padding-right: 18px; border-color: var(--walnut-600); opacity: 1; pointer-events: auto; }
.search-box:focus-within { background: var(--paper); border-color: var(--paper); }
.search-box:focus-within input { color: var(--ink-900); }
.search-box:focus-within .ic-search { color: var(--ink-900); }
.search-box input::placeholder { color: var(--on-dark-muted); }
.search-box:focus-within input::placeholder { color: var(--gray-500); }

.mast-right { display: flex; align-items: center; gap: 5px; }
.icon-btn { width: 38px; height: 38px; border-radius: 100px; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; cursor: pointer; position: relative; }
.icon-btn:hover { background: var(--walnut-700); }
.notif-dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 100px; background: var(--accent); border: 1.5px solid var(--walnut-800); }
.notif-dot.hide { display: none; }
.vrule { width: 1px; height: 22px; background: var(--walnut-600); margin: 0 9px; }
.vrule.sm { height: 18px; margin: 0; }
.btn-login { display: flex; align-items: center; gap: 8px; border: 1px solid var(--walnut-600); border-radius: 100px; padding: 8px 18px; color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.btn-login:hover { border-color: #fff; }

/* fm pill */
.fm-wrap { position: relative; display: flex; margin-right: 4px; }
.fm-pill { display: flex; align-items: center; gap: 7px; height: 38px; border: 1px solid var(--walnut-600); border-radius: 100px; padding: 5px 5px 5px 6px; position: relative; z-index: 202; }
.fm-pill:hover { border-color: #fff; }
.fm-name { display: flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; color: #fff; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; white-space: nowrap; padding: 0 6px 0 0; }
.fm-wrap.is-open .fm-pill { background: var(--accent); border-color: var(--accent); border-radius: 12px 12px 0 0; }
.fm-wrap.is-open .fm-name { color: #fff; }
.fm-wrap.is-open .radio-dot { background: #fff; color: var(--accent); }

/* merged-tab triggers (desktop bm/notif) */
.trig-wrap { position: relative; display: flex; }
.trig-wrap.is-open .icon-btn { background: var(--paper); color: var(--ink-900); border-radius: 12px 12px 0 0; z-index: 202; }
.trig-wrap.is-open .icon-btn:hover { background: var(--paper); }

/* desktop dropdown panels */
.panel { position: absolute; top: 38px; background: var(--paper); box-shadow: 0 18px 48px rgba(40,22,8,.26); overflow: hidden; z-index: 200; animation: clbFadeIn .14s ease-out; }
.radio-panel { left: 0; width: 340px; max-width: 90vw; border-radius: 0 16px 16px 16px; }
.bm-panel { right: 0; width: 380px; max-width: 90vw; border-radius: 16px 0 16px 16px; }
.notif-panel { right: 0; width: 372px; max-width: 88vw; border-radius: 16px 0 16px 16px; }

/* nav */
.hdr-nav { border-top: 1px solid var(--walnut-700); }
.hdr-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 46px; display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 600; }
.nav-all { display: flex; align-items: center; gap: 8px; color: #fff; background: none; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 14px; font-weight: 700; padding: 0; white-space: nowrap; flex-shrink: 0; }
.nav-all .ic-grid { color: var(--tan-link); }
.nav-cats { display: flex; align-items: center; gap: 22px; }
.nav-cats a { text-decoration: none; white-space: nowrap; padding-bottom: 3px; border-bottom: 2px solid transparent; color: var(--on-dark-muted); transition: color .15s ease; }
.nav-cats a:hover { color: #fff; }
.nav-cats a.active { color: #fff; border-color: var(--accent); }
.chev { display: flex; transition: transform .15s ease; }
.js-mega.open .chev { transform: rotate(180deg); }

/* mega */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--walnut-800); color: #fff; border-top: 1px solid var(--walnut-700); border-bottom: 1px solid var(--walnut-700); box-shadow: 0 18px 30px rgba(0,0,0,.35); z-index: 120; }
.mega-inner { max-width: 1200px; margin: 0 auto; padding: 26px 32px 30px; }
.mega-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mega-head .bar, .sec-head .bar { width: 26px; height: 4px; background: var(--accent); border-radius: 2px; display: inline-block; flex-shrink: 0; }
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; }
.mega-grid a { display: flex; align-items: center; gap: 10px; padding: 9px 0; text-decoration: none; font-size: 14px; color: var(--on-dark-muted); border-bottom: 1px solid var(--walnut-700); }
.mega-grid a:hover { color: #fff; }
.mega-grid a .ric { color: var(--accent); display: flex; flex-shrink: 0; }
.mega-grid a .mg-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mega-sections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
.mega-lib { display: flex; align-items: center; gap: 13px; padding: 14px 14px; border-radius: var(--r-md); background: transparent; text-decoration: none; transition: background .18s ease; }
.mega-lib:hover { background: rgba(255,255,255,.045); }
.mega-lib-ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(202,54,39,.16); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .18s ease, color .18s ease; }
.mega-lib:hover .mega-lib-ic { background: var(--accent); color: #fff; }
.mega-lib-txt { min-width: 0; }
.mega-lib-txt b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #fff; }
.mega-lib-txt span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--on-dark-muted); line-height: 1.35; }
@media (max-width: 640px) { .mega-sections { grid-template-columns: 1fr; } }

/* ---------- panel inner (shared) ---------- */
.pnl-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; }
.pnl-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink-900); }
.pnl-act { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; cursor: pointer; white-space: nowrap; }
.pnl-list { max-height: 60vh; overflow-y: auto; padding: 2px 8px 10px; }
.pnl-foot { display: block; padding: 13px; text-align: center; border-top: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.n-row { display: flex; gap: 13px; align-items: center; padding: 11px 12px; border-radius: 12px; text-decoration: none; }
.n-row:hover { background: var(--white); }
.n-vis { flex-shrink: 0; }
.n-plaque { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; }
.n-av { width: 48px; height: 48px; border-radius: 100px; position: relative; flex-shrink: 0; }
.n-av img { width: 48px; height: 48px; border-radius: 100px; object-fit: cover; display: block; }
.n-av .badge { position: absolute; right: -2px; bottom: -2px; width: 21px; height: 21px; border-radius: 100px; border: 2px solid var(--white); display: flex; align-items: center; justify-content: center; color: #fff; }
.n-txt { flex: 1; min-width: 0; }
.n-txt .t { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-900); text-wrap: pretty; }
.n-txt .time { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--accent); }
.n-unread { width: 9px; height: 9px; border-radius: 100px; background: var(--accent); flex-shrink: 0; }

/* bookmarks */
.bm-tabs { padding: 16px 18px 0; }
.bm-tabs .pnl-title { display: block; }
.bm-tabrow { display: flex; gap: 24px; margin-top: 13px; border-bottom: 1px solid var(--border); }
.bm-tab { border: none; background: none; cursor: pointer; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; padding: 0 0 11px; margin-bottom: -1px; color: var(--gray-500); border-bottom: 2px solid transparent; }
.bm-tab.on { color: var(--ink-900); border-bottom-color: var(--accent); }
.bm-list { max-height: 62vh; overflow-y: auto; padding: 8px 8px 10px; }
.bm-row { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 12px; }
.bm-row:hover { background: var(--white); }
.bm-thumb { width: 60px; height: 46px; border-radius: 9px; overflow: hidden; flex-shrink: 0; background: var(--white); }
.bm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-meta { flex: 1; min-width: 0; text-decoration: none; }
.bm-cat { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.bm-title { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600; line-height: 1.32; color: var(--ink-900); text-wrap: pretty; }
.bm-when { display: block; margin-top: 3px; font-size: 11.5px; color: var(--gray-500); }
.bm-x { width: 30px; height: 30px; flex-shrink: 0; border: none; background: none; border-radius: 100px; color: var(--gray-400); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bm-x:hover { background: var(--gray-100); color: var(--ink-900); }
.bm-empty, .bm-auth { padding: 30px 24px 28px; text-align: center; }
.bm-empty-ic, .bm-auth-ic { display: inline-flex; width: 50px; height: 50px; border-radius: 100px; background: var(--white); align-items: center; justify-content: center; }
.bm-auth-ic { color: var(--accent); box-shadow: var(--shadow-card); }
.bm-empty-ic { width: 46px; height: 46px; color: var(--gray-400); }
.bm-auth-title { margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.25; color: var(--ink-900); }
.bm-auth-sub { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--gray-600); max-width: 280px; margin-left: auto; margin-right: auto; }
.bm-auth-btns { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.bm-reg { border: 1px solid var(--gray-200); background: var(--white); color: var(--ink-900); font-family: var(--font-sans); font-weight: 600; font-size: 14.5px; padding: 12px; border-radius: 100px; cursor: pointer; }
.bm-reg:hover { border-color: var(--gray-400); }
.bm-empty-title { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink-900); }
.bm-empty-sub { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--gray-500); }

/* radio panel inner — cover banner (1c) */
.rp-cv { position: relative; height: 150px; background: linear-gradient(135deg, var(--accent), var(--cta)); overflow: hidden; }
.rp-cv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,11,5,.05) 0%, rgba(20,11,5,.5) 100%); }
.rp-cv-art { position: absolute; right: -10px; top: -6px; opacity: .22; color: #fff; }
.rp-cv-top { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; z-index: 2; }
.rp-cv-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.rp-cv-live .d { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex-shrink: 0; }
html.playing .rp-cv-live .d { animation: rpPulseW 1.8s ease-out infinite; }
@keyframes rpPulseW { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.rp-cv-listeners { display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,.32); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 100px; white-space: nowrap; }
.rp-cv-listeners b { font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-cv-titles { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #fff; }
.rp-cv-track { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.2; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.rp-cv-host { margin-top: 3px; font-size: 12px; color: rgba(255,255,255,.82); }
.rp-controls { display: flex; align-items: center; gap: 14px; padding: 16px 18px 14px; }
.rp-play { width: 52px; height: 52px; border-radius: 100px; border: none; background: var(--cta); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; box-shadow: var(--shadow-cta); transition: background .15s ease, transform .12s ease; }
.rp-play:hover { background: var(--cta-hover); }
.rp-play:active { transform: scale(.95); }
.rp-volwrap { flex: 1; display: flex; align-items: center; gap: 11px; min-width: 0; }
.rp-volic { display: flex; color: var(--gray-500); flex-shrink: 0; }
.rp-voltrack { position: relative; flex: 1; height: 5px; border-radius: 3px; background: var(--gray-200); cursor: pointer; }
.rp-volfill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; background: var(--accent); }
.rp-volknob { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(40,22,8,.25); }
.rp-quality { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px 16px; }
.rp-quality-l { font-size: 12px; color: var(--gray-500); }
.rp-rate { display: flex; align-items: center; gap: 4px; }
.rp-rate-b { border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-500); border-radius: 100px; padding: 5px 11px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all .15s ease; }
.rp-rate-b:hover { border-color: var(--gray-400); color: var(--ink-900); }
.rp-rate-b.on { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.rp-rate-u { font-size: 10.5px; color: var(--gray-400); margin-left: 2px; }
.rp-popout { display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-top: 1px solid var(--border); text-decoration: none; cursor: pointer; }
.rp-popout:hover { background: var(--white); }
.rp-popout-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--white); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.rp-popout b { display: block; font-size: 13px; font-weight: 600; color: var(--ink-900); }
.rp-popout span.s { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.4; color: var(--gray-500); }

/* ---------- mobile header ---------- */
.hdr-mobile { display: none; }
.mhdr-util { background-color: var(--walnut-900); background-image: linear-gradient(rgba(20,11,5,.62),rgba(20,11,5,.62)), url(assets/bg-wood.jpg); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; height: 36px; font-size: 12px; }
.mhdr-bar { background: var(--walnut-800); display: flex; align-items: stretch; justify-content: space-between; padding: 0 12px; height: 54px; gap: 8px; }
.mhdr-left { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.mhdr-left .logo img { height: 24px; }
.burger { background: none; border: none; color: #fff; display: flex; align-items: center; cursor: pointer; padding: 8px; margin-left: -8px; }
.burger .ic-burger { display: flex; }
.burger .bg-x { display: none; }
.burger.is-open .bg-lines { display: none; }
.burger.is-open .bg-x { display: block; }
.mhdr-icons { display: flex; align-items: center; gap: 1px; }
.mhdr-icons .icon-btn { width: 40px; }
.mhdr-icons .icon-btn:hover { background: none; }
.mhdr-icons .m-tab.is-open, .mhdr-icons .m-tab.is-open:hover { background: var(--paper); color: var(--ink-900); }
.m-fm { display: flex; align-items: center; gap: 5px; border: 1px solid var(--walnut-600); border-radius: 100px; padding: 3px 4px; margin-right: 5px; flex-shrink: 0; align-self: center; cursor: pointer; }
.m-fm .radio-dot { width: 26px; height: 26px; }
.m-fm-label { display: flex; align-items: center; gap: 5px; color: #fff; font-size: 12px; font-weight: 600; padding: 0 5px 0 1px; }
/* mobile active tab (merged) */
.m-tab.is-open, .m-fm.is-open { align-self: stretch; margin-top: 8px; background: var(--paper); color: var(--ink-900); border-radius: 12px 12px 0 0; height: auto; }
.m-fm.is-open { align-self: stretch; margin-top: 8px; border-radius: 12px 12px 0 0; height: auto; background: var(--accent); border-color: var(--accent); color: #fff; }
.m-fm.is-open .m-fm-label { color: #fff; }
.m-fm.is-open .radio-dot { background: #fff; color: var(--accent); }
.m-panel { background: var(--paper); }
.menu-panel { background: var(--walnut-800); border-top: 1px solid var(--walnut-700); padding: 14px 18px 18px; }
.menu-panel .mega-head { color: #fff; margin-bottom: 12px; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.menu-grid a { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--walnut-700); text-decoration: none; font-size: 13px; min-width: 0; }
.menu-grid a .ric { color: var(--accent); display: flex; flex-shrink: 0; }
.menu-grid a span.lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-grid a.reg { color: var(--on-dark-muted); font-weight: 500; }
/* mobile "Разделы" block reuses the desktop card design, stacked 1 per row */
.mega-sections-m { grid-template-columns: 1fr; gap: 8px; margin-bottom: 18px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 10px; }
.eyebrow.tan { color: var(--tan-link); margin-bottom: 4px; }
.search-panel-m { padding: 14px 16px 18px; }
.search-drop { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 100px; padding: 13px 18px; }
.search-drop .ic-search { color: var(--gray-400); flex-shrink: 0; }
.search-drop input { background: none; border: none; outline: none; color: var(--ink-900); font-family: var(--font-sans); font-size: 15px; width: 100%; min-width: 0; }
.search-pop { margin-top: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 100px; padding: 8px 14px; text-decoration: none; font-size: 13px; color: var(--ink-900); }
.chips a .ic-search { color: var(--gray-400); }
.m-pnl-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 11px; }
.bm-panel-m, .notif-panel-m { max-height: 74vh; overflow-y: auto; }

/* ---------- hero ---------- */
.hero { width: 100%; background: var(--walnut-900); color: #fff; }
.cover { position: relative; display: block; width: 100%; height: 430px; overflow: hidden; text-decoration: none; color: inherit; }
.cover-img { position: absolute; inset: 0; overflow: hidden; }
.cover-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.cover:hover .cover-img img { transform: scale(1.04); }
.cover-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,10,4,.12) 0%, rgba(20,10,4,.3) 45%, rgba(20,10,4,.88) 100%); }
.badge-molniya { position: absolute; top: 22px; left: 0; z-index: 4; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 8px 22px 8px 18px; white-space: nowrap; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%); }
.cover-body { position: absolute; left: 0; right: 0; bottom: 0; }
.cover-body .wrap { padding-bottom: 34px; }
.cover h1 { margin: 0; max-width: 20ch; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,3.6vw,46px); line-height: 1.08; letter-spacing: -.015em; color: #fff; text-wrap: balance; text-shadow: 0 2px 22px rgba(0,0,0,.4); }
.cover-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.cta { display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14.5px; padding: 12px 24px; border-radius: 100px; text-decoration: none; transition: background .15s ease; }
.cta:hover { background: var(--accent-hover); }
.byline { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(255,255,255,.84); }
.byline .avatar { width: 26px; height: 26px; border-radius: 100px; overflow: hidden; flex-shrink: 0; }
.byline .avatar img { width: 100%; height: 100%; object-fit: cover; }
.byline b { color: #fff; font-weight: 600; }
.byline .o { opacity: .5; }
.byline .mt { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- sections ---------- */
.sec { padding-top: 52px; }
.sec-head { display: flex; align-items: center; gap: 13px; margin-bottom: 30px; }
.sec-title { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-900); white-space: nowrap; }
.sec-head .rule { flex: 1; height: 1px; background: var(--border); }
.sec-head .rule.light { background: var(--gray-200); }
.sec-link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }

.fresh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 42px 28px; }
.card { display: flex; flex-direction: column; gap: 13px; text-decoration: none; }
.card .img { aspect-ratio: 16/10; border-radius: var(--r-md); overflow: hidden; background: var(--gray-100); }
.card .img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.card:hover .img img { transform: scale(1.04); }
.card .cat { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.card .title { font-weight: 600; font-size: 16px; line-height: 1.34; color: var(--ink-900); text-wrap: pretty; }
.card:hover .title { color: var(--accent); }
.card .meta { font-size: 12px; color: var(--gray-500); display: flex; align-items: center; gap: 14px; }
.card .meta .mt { display: inline-flex; align-items: center; gap: 5px; }

.sec-pop { background: var(--paper); margin-top: 66px; }
.sec-pop .wrap { padding-top: 54px; padding-bottom: 56px; }
.pop-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.pop-cell { display: block; text-decoration: none; padding: 2px 22px; border-left: 1px solid var(--gray-200); }
.pop-cell:first-child { padding-left: 0; border-left: none; }
.pop-cell .rank { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--accent); line-height: 1; }
.pop-cell .title { display: block; margin-top: 10px; font-weight: 600; font-size: 14px; line-height: 1.32; color: var(--ink-900); text-wrap: pretty; }
.pop-cell:hover .title { color: var(--accent); }
.pop-cell .views { display: block; margin-top: 8px; font-size: 12px; color: var(--gray-500); display: flex; align-items: center; gap: 4px; }

.rubric-chips { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.rchip { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 100px; padding: 8px 16px; text-decoration: none; white-space: nowrap; transition: background .15s ease, border-color .15s ease; }
.rchip .ric { color: var(--accent); display: flex; flex-shrink: 0; }
.rchip span.lab { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.rchip:hover { background: var(--accent); border-color: var(--accent); }
.rchip:hover .ric, .rchip:hover .lab { color: #fff; }

/* newsletter */
.news { margin-top: 70px; width: 100%; background-color: var(--walnut-900); background-image: linear-gradient(rgba(20,11,5,.72),rgba(20,11,5,.72)), url(assets/bg-wood.jpg); color: #fff; }
.sec-pop + .news { margin-top: 0; }
.page:has(.acc-wrap) + .news { margin-top: 0; }
.acc-body .news { display: none; }
.acc-body .slogan { margin-top: 0; }
.news-inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding-top: 56px; padding-bottom: 56px; }
.news-copy { max-width: 440px; }
.news-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.news-ic { width: 30px; height: 30px; border-radius: 100px; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.news-eyebrow span:last-child { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tan-link); }
.news-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px,3vw,34px); line-height: 1.16; color: #fff; text-wrap: balance; }
.news-sub { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--on-dark-muted); }
.news-form-wrap { flex: 1; min-width: 300px; max-width: 600px; }
.news-form { display: flex; gap: 11px; }
.news-field { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; background: transparent; border: 1px solid var(--walnut-600); border-radius: 100px; padding: 16px 22px; transition: border-color .15s ease; }
.news-field .ic-mail { color: #c4ac81; flex-shrink: 0; }
.news-field input { background: none; border: none; outline: none; color: #fff; font-family: var(--font-sans); font-size: 16px; width: 100%; min-width: 0; }
.news-field:focus-within, .news-field.filled { background: var(--paper); border-color: var(--paper); }
.news-field:focus-within input, .news-field.filled input { color: var(--ink-900); }
.news-field:focus-within .ic-mail, .news-field.filled .ic-mail { color: var(--ink-900); }
.news-field input::placeholder { color: var(--on-dark-muted); }
.news-field:focus-within input::placeholder { color: var(--gray-500); }
.btn-cta { border: none; background: var(--cta); color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 16px; padding: 17px 34px; border-radius: 100px; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-cta); }
.btn-cta:hover { background: var(--cta-hover); }
.news-note { margin-top: 14px; font-size: 12.5px; color: var(--on-dark-faint); display: flex; align-items: center; gap: 7px; }
.news-done { animation: clbFadeIn .3s ease-out both; background: rgba(255,255,255,.05); border: 1px solid var(--walnut-600); border-radius: 16px; padding: 22px 24px; }
.news-done-card { display: flex; align-items: flex-start; gap: 14px; }
.news-done-ic { width: 38px; height: 38px; border-radius: 100px; background: var(--cta); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; box-shadow: 0 4px 12px rgba(255,108,36,.32); }
.news-done-ic .ic-check { display: flex; }
.news-done-text { flex: 1; min-width: 0; }
.news-done-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; color: #fff; }
.news-done-sub { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--on-dark-muted); }
.news-done-sub b { color: #fff; font-weight: 600; word-break: break-all; }
.news-done-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--walnut-600); }
.news-done-hint { font-size: 12.5px; line-height: 1.5; color: var(--on-dark-faint); }
.news-done-undo { background: none; border: none; padding: 0; color: var(--tan-link); font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
.news-done-undo:hover { color: #fff; }

/* slogan */
.slogan { position: relative; width: 100%; min-height: 280px; background: #080808; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.goo-def { position: absolute; }
.goo { position: absolute; inset: 0; filter: url(#clbGoo); }
.goo .ink { position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%,-50%); }
.slogan-body { position: relative; z-index: 2; max-width: 620px; padding: 40px 32px; text-align: center; }
.slogan-glyph { display: block; margin: 0 auto 6px; fill: #161616; }
.slogan-text { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,2.8vw,32px); line-height: 1.22; letter-spacing: -.01em; color: #161616; text-wrap: balance; }
.slogan-url { margin-top: 16px; font-size: 10px; font-weight: 700; letter-spacing: .2em; color: #161616; }

/* footer */
.footer { background: var(--walnut-800); color: var(--on-dark-faint); position: relative; overflow: hidden; }
.foot-art { position: absolute; right: 40px; bottom: 14px; width: 226px; height: auto; transform: rotate(4deg); transform-origin: bottom center; filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)); z-index: 1; pointer-events: none; }
.foot-art-wrap { position: absolute; right: 40px; bottom: 14px; width: 226px; transform: rotate(4deg); transform-origin: bottom center; z-index: 1; filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)); cursor: pointer; }
.foot-art-wrap .foot-art { position: static; right: auto; bottom: auto; width: 100%; transform: none; filter: none; display: block; }
.foot-lang { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 9px; background: var(--paper); border: none; border-radius: 100px; padding: 7px 9px 7px 14px; font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--ink-900); cursor: pointer; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.28); pointer-events: auto; transition: transform .14s ease; }
.foot-lang:hover { transform: translateX(-50%) translateY(-1px); }
.foot-lang:active { transform: translateX(-50%) translateY(1px) scale(.99); }
.foot-lang-flag { width: 16px; height: 11px; border-radius: 2px; flex-shrink: 0; background: linear-gradient(#3aa0e6 0 50%, #f4c542 50% 100%); }
.foot-lang-txt { line-height: 1; }
.foot-lang-sw { position: relative; width: 34px; height: 20px; border-radius: 100px; background: var(--gray-300); flex-shrink: 0; transition: background .18s ease; }
.foot-lang-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 100px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .18s ease; }
.foot-lang.on .foot-lang-sw { background: var(--accent); }
.foot-lang.on .foot-lang-knob { transform: translateX(14px); }
.foot-inner { padding-top: 54px; padding-bottom: 40px; }
.foot-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; }
.foot-brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.foot-logo { height: 30px; width: auto; display: block; }
.foot-brand p { margin: 0; max-width: 400px; font-size: 13.5px; line-height: 1.65; color: var(--on-dark-muted); }
.foot-about-title { font-family: var(--font-display); font-size: 16px; color: var(--on-dark); font-weight: 700; margin-bottom: 15px; }
.foot-about ul, #foot-about { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#foot-about a { font-size: 13px; line-height: 1.3; color: var(--tan-link); text-decoration: underline; }
#foot-about a:hover { color: #fff; }
.foot-strip { background: var(--walnut-800); border-top: 1px solid var(--walnut-700); position: relative; z-index: 2; }
.foot-strip-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 18px; padding-bottom: 18px; font-size: 12px; color: var(--on-dark-faint); }
.foot-badge img { height: 32px; display: block; }

/* auth modal */
.auth-overlay { position: fixed; inset: 0; z-index: 300; background: radial-gradient(circle at 50% 44%, rgba(232,185,116,.38) 0%, rgba(206,150,86,.22) 28%, rgba(20,11,5,.82) 60%); display: flex; align-items: center; justify-content: center; padding: 24px; animation: clbFadeIn .18s ease-out; }
.auth-dialog { position: relative; width: 440px; max-width: 100%; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; background: transparent; border-radius: 18px; box-shadow: 0 30px 80px rgba(20,11,5,.45); animation: clbModalIn .24s cubic-bezier(.2,.7,.2,1); }
.auth-head { position: relative; background: var(--walnut-800); border-radius: 18px 18px 0 0; padding: 30px 32px 26px; text-align: center; }
.auth-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 100px; border: none; background: rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.auth-x:hover { background: rgba(255,255,255,.16); }
.auth-logo { height: 30px; display: block; margin: 0 auto; }
.auth-title { margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; color: #fff; text-wrap: balance; }
.auth-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--on-dark-muted); max-width: 320px; margin-left: auto; margin-right: auto; }
.auth-body { padding: 26px 32px 30px; overflow-y: auto; background: var(--white); border-radius: 0 0 18px 18px; }
.auth-social { display: flex; flex-direction: column; gap: 10px; }
.soc { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; border: 1px solid var(--gray-200); background: var(--white); border-radius: 100px; padding: 13px 18px; cursor: pointer; font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; color: var(--ink-900); }
.soc:hover { background: var(--paper); border-color: var(--gray-400); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.auth-or span { flex: 1; height: 1px; background: var(--gray-200); }
.auth-or em { font-style: normal; font-size: 12px; color: var(--gray-500); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-label { display: block; }
.auth-label > span { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-900); }
.auth-row > span { font-size: 12.5px; font-weight: 600; color: var(--ink-900); }
.auth-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.auth-forgot { font-size: 12.5px; color: var(--accent); text-decoration: none; }
.auth-field { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--gray-200); border-radius: 100px; padding: 13px 18px; transition: border-color .15s ease; }
.auth-field:focus-within { border-color: var(--ink-900); }
.auth-field input { background: none; border: none; outline: none; color: var(--ink-900); font-family: var(--font-sans); font-size: 15px; width: 100%; min-width: 0; }
.auth-field .ic-mail-sm, .auth-field .ic-user-sm, .auth-field .ic-lock { color: var(--gray-400); flex-shrink: 0; }
.auth-eye { background: none; border: none; cursor: pointer; color: var(--gray-400); display: flex; flex-shrink: 0; padding: 0; }
.auth-submit { width: 100%; margin-top: 6px; padding: 15px; }
.auth-terms { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--gray-500); text-align: center; }
.auth-alt { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--gray-200); text-align: center; font-size: 13.5px; color: var(--gray-600); }
.auth-alt a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* delete-account confirm modal */
.del-overlay { position: fixed; inset: 0; z-index: 320; background: rgba(20,11,5,.55); display: flex; align-items: center; justify-content: center; padding: 24px; animation: clbFadeIn .18s ease-out; }
.del-dialog { position: relative; width: 420px; max-width: 100%; background: var(--white); border-radius: 18px; padding: 30px 30px 26px; text-align: center; box-shadow: 0 30px 80px rgba(20,11,5,.45); animation: clbModalIn .24s cubic-bezier(.2,.7,.2,1); }
.del-icon { width: 54px; height: 54px; margin: 0 auto; border-radius: 100px; background: rgba(202,54,39,.1); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.del-title { margin: 16px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--ink-900); text-wrap: balance; }
.del-text { margin: 9px auto 0; max-width: 330px; font-size: 13.5px; line-height: 1.55; color: var(--gray-600); }
.del-label { display: block; margin: 22px 0 8px; font-size: 12.5px; color: var(--gray-600); text-align: left; }
.del-label b { color: var(--accent); font-weight: 700; letter-spacing: .04em; }
.del-input { width: 100%; box-sizing: border-box; background: var(--paper); border: 1px solid var(--gray-200); border-radius: 100px; padding: 13px 18px; font-family: var(--font-sans); font-size: 15px; color: var(--ink-900); outline: none; transition: border-color .15s ease; }
.del-input:focus { border-color: var(--accent); }
.del-actions { display: flex; gap: 10px; margin-top: 20px; }
.del-cancel, .del-confirm { flex: 1; border-radius: 100px; padding: 14px; font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease, opacity .15s ease; }
.del-cancel { background: var(--white); border: 1px solid var(--gray-200); color: var(--ink-900); }
.del-cancel:hover { background: var(--paper); border-color: var(--gray-400); }
.del-confirm { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.del-confirm:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.del-confirm:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- archive / listing page ---------- */
.crumbs { padding-top: 22px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--gray-500); }
.crumbs a { text-decoration: none; color: var(--gray-500); }
.crumbs a:hover { color: var(--accent); }
.crumb-sep { color: var(--gray-400); }
.crumb-cur { color: var(--ink-900); font-weight: 600; }
.arch-head { padding-top: 20px; }
.arch-title { margin: 0; max-width: 880px; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px,3.6vw,44px); line-height: 1.12; letter-spacing: -.01em; color: var(--ink-900); text-wrap: balance; }
.arch-title-sm { max-width: none; font-size: clamp(28px,3.2vw,40px); }
/* rubric hero */
.rub-hero { display: grid; grid-template-columns: 1fr 1.55fr; gap: 30px; padding-top: 24px; align-items: stretch; }
.feat-tag { position: absolute; top: 20px; left: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 7px 14px; border-radius: 100px; }
.rub-lead { display: flex; }
.rub-feat { position: relative; display: flex; align-items: flex-end; min-height: 300px; width: 100%; border-radius: var(--r-md); overflow: hidden; text-decoration: none; background: var(--gray-100); }
.rub-feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.rub-feat:hover img { transform: scale(1.04); }
.rub-feat .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,10,4,.05) 0%, rgba(20,10,4,.32) 45%, rgba(20,10,4,.9) 100%); }
.rub-feat .body { position: relative; padding: 30px 32px; color: #fff; }
.rub-feat .pill { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; }
.rub-feat h2 { margin: 13px 0 0; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px,2.4vw,32px); line-height: 1.14; max-width: 20ch; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.rub-feat .ex { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.86); max-width: 46ch; }
.eyebrow-line { display: flex; }
.feat-foot { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); }
.feat-meta { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: rgba(255,255,255,.8); }
.feat-meta .mt { display: inline-flex; align-items: center; gap: 5px; }
.rub-feat .by { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.82); }
.rub-feat .by .av { width: 24px; height: 24px; border-radius: 100px; overflow: hidden; flex-shrink: 0; }
.rub-feat .by .av img { position: static; width: 100%; height: 100%; object-fit: cover; }
.rub-feat .by b { color: #fff; font-weight: 600; }
.rub-feat .by .o { opacity: .5; }
.rub-aside { background: var(--paper); border-radius: var(--r-md); padding: 28px 26px; display: flex; flex-direction: column; }
.rub-aside-ic { width: 52px; height: 52px; border-radius: 15px; background: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.rub-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--ink-900); }
.rub-desc { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--gray-600); }
.rub-sub-lbl { margin-top: 22px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); }
.rub-subs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rub-sub { background: var(--white); border: 1px solid var(--border); border-radius: 100px; padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--ink-900); text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.rub-sub:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.rub-stats { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--gray-500); }
.rub-stats b { color: var(--ink-900); font-weight: 700; }
.rub-dot { width: 3px; height: 3px; border-radius: 100px; background: var(--gray-400); }
.sec-head .arch-bar-tools { margin-left: 4px; }
/* popular-in-rubric rail */
.rub-pop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
.flame-ic { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.rub-pop-cell { display: flex; gap: 16px; align-items: flex-start; text-decoration: none; padding: 4px 22px 4px 0; }
.rub-pop-cell + .rub-pop-cell { border-left: 1px solid var(--gray-200); padding-left: 22px; }
.rub-pop-rank { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--accent); flex-shrink: 0; }
.rub-pop-txt .t { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.35; color: var(--ink-900); text-wrap: pretty; }
.rub-pop-cell:hover .t { color: var(--accent); }
.rub-pop-txt .m { display: flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 12px; color: var(--gray-500); }
.arch-lede { margin: 14px 0 0; max-width: 760px; font-size: 16px; line-height: 1.65; color: var(--gray-600); text-wrap: pretty; }
.seo-block { padding-top: 60px; padding-bottom: 8px; }
.seo-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: start; }
.seo-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.seo-h { margin: 0 0 18px; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.22; color: var(--ink-900); }
.seo-body { max-width: none; }
.seo-body p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.7; color: var(--gray-600); text-wrap: pretty; }
.seo-body p:last-child { margin-bottom: 0; }
.seo-body a { color: var(--accent); text-decoration: none; font-weight: 500; }
.seo-body a:hover { text-decoration: underline; }
/* FAQ accordion */
.seo-faq { margin-top: 24px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; cursor: pointer; list-style: none; font-family: var(--font-sans); font-size: 15.5px; font-weight: 600; color: var(--ink-900); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-ic { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-ic::before, .faq-ic::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; transition: opacity .15s ease, transform .2s ease; }
.faq-ic::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq-ic::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item[open] .faq-ic::after { opacity: 0; transform: rotate(90deg); }
.faq-a { padding: 0 0 18px; font-size: 14px; line-height: 1.65; color: var(--gray-600); max-width: 60ch; text-wrap: pretty; }
.faq-a a { color: var(--accent); text-decoration: none; }
.faq-a a:hover { text-decoration: underline; }
/* aside card */
.seo-card { background: transparent; border: 1px solid var(--border); border-radius: var(--r-md); padding: 26px 24px; position: sticky; top: 96px; }
.seo-card-lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 14px; }
.seo-card-subs { display: flex; flex-wrap: wrap; gap: 8px; }
.seo-card-subs a { display: inline-flex; background: var(--white); border: 1px solid var(--border); border-radius: 100px; padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--ink-900); text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.seo-card-subs a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.seo-card-quote { padding: 0; border: none; margin: 0; position: relative; }
.seo-card-mark { display: block; font-family: var(--font-display); font-size: 64px; line-height: .7; height: 28px; margin-bottom: 0; color: transparent; -webkit-text-stroke: 1.5px var(--accent); opacity: .55; }
.seo-card-quote p { margin: 0; font-family: var(--font-display); font-size: 17px; font-style: italic; line-height: 1.5; color: var(--ink-900); text-wrap: pretty; }
.seo-card-by { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 12.5px; color: var(--gray-500); }
.seo-card-av { width: 36px; height: 36px; border-radius: 100px; overflow: hidden; flex-shrink: 0; }
.seo-card-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seo-card-by b { display: block; color: var(--ink-900); font-weight: 600; font-size: 13px; }
.seo-card-byinfo { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.seo-card-byinfo > span { font-size: 12px; color: var(--gray-500); }
.arch-bar { display: flex; align-items: flex-end; gap: 16px; margin-top: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.arch-chips { display: flex; flex-wrap: wrap; gap: 9px; flex: 1; min-width: 0; }
.arch-chips .tag-chip { flex-shrink: 0; }
.arch-bar-tools { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.arch-views { display: inline-flex; border: 1px solid var(--gray-200); border-radius: 100px; overflow: hidden; }
.arch-view { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: none; background: var(--white); color: var(--gray-500); cursor: pointer; }
.arch-view:hover { color: var(--ink-900); }
.arch-view.on { background: var(--accent); color: #fff; }
.arch-view svg { display: block; }
.arch-count2 { margin-top: 16px; font-size: 13.5px; color: var(--gray-500); }
.arch-count2 b { color: var(--ink-900); font-weight: 700; }
.arch-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.tag-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 100px; padding: 7px 15px; text-decoration: none; font-size: 13px; font-weight: 500; color: var(--ink-900); background: var(--white); transition: background .15s ease, border-color .15s ease, color .15s ease; }
.tag-chip .ric { color: var(--accent); display: flex; flex-shrink: 0; transition: color .15s ease; }
.tag-chip:hover { border-color: var(--accent); color: var(--accent); }
.tag-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tag-chip.on .ric { color: #fff; }
.tag-chip:hover .ric { color: var(--accent); }
.tag-chip.on:hover .ric { color: #fff; }
.arch-intro { margin: 22px 0 0; max-width: 820px; font-size: 16px; line-height: 1.65; color: var(--gray-600); }
/* list view */
.arch-body { display: flex; flex-direction: column; gap: 9px; }
.arch-grid.list { grid-template-columns: 1fr; gap: 0; }
.arch-grid.list .arch-card { flex-direction: row; gap: 22px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--border); }
.arch-grid.list .arch-card .img { width: 230px; flex-shrink: 0; aspect-ratio: 16/10; }
.arch-grid.list .arch-card .arch-body { max-width: 640px; }
.arch-grid.list .arch-card .title { font-size: 18px; }
.arch-toolbar { margin-top: 34px; padding-bottom: 6px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.arch-count { font-size: 13.5px; color: var(--gray-600); white-space: nowrap; }
.arch-count b { color: var(--ink-900); font-weight: 700; }
.arch-sort { position: relative; display: flex; align-items: center; gap: 8px; }
.arch-sort-lbl { font-size: 13px; color: var(--gray-500); }
.arch-sort-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--ink-900); padding: 6px 0; white-space: nowrap; }
.arch-sort-btn .ic-chev-sm { color: var(--gray-400); display: flex; transition: transform .15s ease; }
.arch-sort.open .ic-chev-sm { transform: rotate(180deg); }
.arch-sort-menu { position: absolute; top: 36px; right: 0; background: var(--white); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(40,22,8,.18); overflow: hidden; z-index: 50; min-width: 210px; padding: 6px; animation: clbFadeIn .14s ease-out; }
.arch-sort-opt { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-900); padding: 10px 12px; border-radius: 8px; }
.arch-sort-opt:hover { background: var(--paper); }
.arch-sort-opt.on { color: var(--accent); font-weight: 600; }
.arch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 28px; align-items: start; }
.arch-card .img { position: relative; }
.arch-pill { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; }
.arch-excerpt { font-size: 13.5px; line-height: 1.55; color: var(--gray-600); text-wrap: pretty; }
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 52px 0 0; }
.pg-box { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 11px; border-radius: var(--r-sm); font-size: 14px; text-decoration: none; border: 1px solid var(--border); color: var(--ink-900); background: var(--white); }
.pg-box:hover { border-color: var(--accent); color: var(--accent); }
.pg-box.on { border: 1.5px solid var(--accent); color: var(--accent); font-weight: 700; }
.pg-dots { color: var(--gray-400); }
.pg-edge { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--white); color: var(--ink-900); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.pg-edge:hover { border-color: var(--accent); color: var(--accent); }
.pg-edge[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.pg-edge svg { display: block; }
.pager-jump { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 16px 0 8px; font-size: 13px; color: var(--gray-600); }
.pager-jump b { color: var(--ink-900); font-weight: 700; }
.pg-jump-field { width: 56px; text-align: center; border: 1px solid var(--gray-200); border-radius: 100px; padding: 7px 8px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 700; color: var(--ink-900); background: var(--paper); outline: none; }
.pg-jump-field:focus { border-color: var(--ink-900); }
/* archive pager — chunky split arrows (variant I) */
.pgi { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 52px 0 0; }
.pgi-arr { display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 26px; border-radius: 100px; background: var(--ink-900); color: #fff; font-family: var(--font-sans); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s ease; }
.pgi-arr:hover { background: #000; }
.pgi-arr[aria-disabled="true"] { background: var(--gray-100); color: var(--gray-400); pointer-events: none; }
.pgi-arr.next { background: var(--accent); }
.pgi-arr.next:hover { background: var(--accent-hover); }
.pgi-arr svg { display: block; }
.pgi-nums { display: inline-flex; align-items: center; gap: 4px; }
.pgi-num { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; text-decoration: none; color: var(--ink-900); }
.pgi-num:hover { background: var(--paper); }
.pgi-num.on { background: var(--accent); color: #fff; font-weight: 700; font-size: 17px; }
.pgi-num.dots { pointer-events: none; color: var(--gray-400); min-width: 24px; }
.pgi-range { display: flex; justify-content: center; margin: 18px 0 8px; }
.pgi-range > span { display: inline-flex; align-items: center; gap: 7px; padding: 0; font-size: 12.5px; color: var(--gray-500); letter-spacing: .01em; white-space: nowrap; }
.pgi-range b { color: var(--accent); font-weight: 700; }
.pgi-range .sep { width: 3px; height: 3px; border-radius: 100px; background: var(--gray-400); }

/* ---------- search results page ---------- */
.srch-hero { max-width: 720px; margin: 0 auto; padding: 44px 24px 32px; text-align: center; }
.srch-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.srch-eyebrow svg { display: block; }
.srch-h1 { margin: 14px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px,3.2vw,38px); line-height: 1.14; letter-spacing: -.01em; color: var(--ink-900); text-wrap: balance; }
.srch-q { color: var(--accent); }
.srch-form { display: flex; align-items: center; gap: 10px; margin: 26px auto 0; max-width: 600px; background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 100px; padding: 7px 7px 7px 22px; box-shadow: var(--shadow-card); transition: border-color .15s ease, box-shadow .15s ease; }
.srch-form:focus-within { border-color: var(--accent); box-shadow: 0 10px 28px rgba(202,54,39,.14); }
.srch-form-ic { color: var(--gray-400); display: flex; flex-shrink: 0; }
.srch-form:focus-within .srch-form-ic { color: var(--accent); }
.srch-form input { flex: 1; min-width: 0; background: none; border: none; outline: none; font-family: var(--font-sans); font-size: 16px; color: var(--ink-900); }
.srch-form input::placeholder { color: var(--gray-400); }
.srch-go { flex-shrink: 0; background: var(--cta); color: #fff; border: none; border-radius: 100px; font-family: var(--font-sans); font-weight: 600; font-size: 14.5px; padding: 0 24px; height: 44px; cursor: pointer; box-shadow: var(--shadow-cta); transition: background .15s ease, transform .1s ease; }
.srch-go:hover { background: var(--cta-hover); }
.srch-go:active { transform: translateY(1px) scale(.99); }
.srch-related-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.srch-related-lbl { font-size: 13px; color: var(--gray-500); }
.srch-related { display: inline-flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.srch-rel { display: inline-flex; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--border); border-radius: 100px; padding: 6px 13px; font-size: 13px; color: var(--gray-600); text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.srch-rel svg { color: var(--gray-400); }
.srch-rel:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.srch-rel:hover svg { color: #fff; }

.srch-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px 22px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 38px; }
.srch-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.srch-cat { display: inline-flex; align-items: center; gap: 7px; background: var(--white); border: 1px solid var(--border); border-radius: 100px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-900); text-decoration: none; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.srch-cat-n { font-size: 12px; font-weight: 600; color: var(--gray-400); }
.srch-cat:hover { border-color: var(--gray-400); }
.srch-cat.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.srch-cat.on .srch-cat-n { color: rgba(255,255,255,.72); }
.srch-bar-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.srch-count { font-size: 13.5px; color: var(--gray-600); white-space: nowrap; }
.srch-count b { color: var(--ink-900); font-weight: 700; }
.srch-count-time { color: var(--gray-400); }

.srch-mark { background: rgba(202,54,39,.13); color: var(--accent); border-radius: 3px; padding: 0 2px; font-weight: 700; }

.srch-empty { max-width: 560px; margin: 0 auto; padding: 36px 24px 76px; text-align: center; }
.srch-empty-ic { width: 74px; height: 74px; margin: 0 auto; border-radius: 100px; background: var(--paper); color: var(--gray-400); display: flex; align-items: center; justify-content: center; }
.srch-empty-h { margin: 24px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 25px; line-height: 1.2; color: var(--ink-900); text-wrap: balance; }
.srch-empty-h span { color: var(--accent); }
.srch-empty-sub { margin: 11px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--gray-600); }
.srch-empty-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.srch-empty-btn { display: inline-block; margin-top: 28px; background: var(--ink-900); color: #fff; border-radius: 100px; padding: 13px 28px; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background .15s ease; }
.srch-empty-btn:hover { background: #000; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .foot-art { width: 200px; right: 10px; bottom: 24px; transform: rotate(6deg); }
  .foot-art-wrap { width: 200px; right: 10px; bottom: 24px; transform: rotate(6deg); }
}
@media (max-width: 980px) {
  .fresh-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .arch-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .pop-grid { grid-template-columns: 1fr; }
  .pop-cell { border-left: none; padding: 13px 0; border-top: 1px solid var(--gray-200); }
  .pop-cell:first-child { border-top: none; }
  .rub-hero { grid-template-columns: 1fr; gap: 20px; }
  .rub-feat { min-height: 320px; }
  .rub-feat h2 { max-width: none; }
  .rub-pop { grid-template-columns: repeat(2, 1fr); row-gap: 0; }
  .rub-pop-cell:nth-child(3) { border-left: none; padding-left: 0; border-top: 1px solid var(--gray-200); padding-top: 16px; margin-top: 12px; }
}
@media (max-width: 860px) {
  .hdr-desktop, .hdr-spacer-d { display: none; }
  .hdr-mobile { display: block; }
  .hdr-spacer-m { display: block; }
  .wrap { padding-left: 18px; padding-right: 18px; }
  .cover { height: 360px; }
  .news-inner { flex-direction: column; align-items: stretch; gap: 28px; }
  .news-copy { max-width: none; }
  .news-form-wrap { width: 100%; min-width: 0; max-width: none; }
  .news-form { flex-direction: column; }
  .news-field, .news-form .btn-cta { width: 100%; }
  .foot-top { grid-template-columns: 1fr; gap: 30px; }
  .foot-art { width: 200px; right: 6px; bottom: 26px; transform: rotate(7deg); }
  .foot-art-wrap { width: 200px; right: 6px; bottom: 26px; transform: rotate(7deg); }
  .foot-strip-inner { padding-left: 18px; padding-right: 18px; flex-wrap: nowrap; gap: 16px; }
  .foot-badge { flex-shrink: 0; }
  .arch-bar { flex-direction: column; align-items: stretch; gap: 14px; }
  .arch-bar-tools { justify-content: space-between; }
  .arch-grid { grid-template-columns: 1fr; gap: 26px; }
  .rub-pop { grid-template-columns: 1fr; gap: 0; }
  .rub-pop-cell { padding: 16px 0; }
  .rub-pop-cell + .rub-pop-cell { border-left: none; padding-left: 0; border-top: 1px solid var(--gray-200); }
  .arch-grid.list .arch-card { flex-direction: column; gap: 13px; }
  .arch-grid.list .arch-card .img { width: 100%; }
  .seo-grid { grid-template-columns: 1fr; gap: 30px; }
  .seo-card { position: static; }
}
@media (max-width: 560px) {
  .rub-feat .body { padding: 22px 20px; }
  .rub-feat h2 { font-size: 24px; }
  .feat-foot { gap: 10px; }
  .srch-form { flex-wrap: wrap; border-radius: 26px; padding: 12px 16px; }
  .srch-go { flex-basis: 100%; }
  .srch-bar { gap: 14px; }
  .srch-bar-right { width: 100%; justify-content: space-between; }
}

/* ============ ARTICLE PAGE ============ */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 200; transition: width .08s linear; }
.art-crumbs { max-width: 760px; margin: 0 auto; padding: 26px 24px 0; }
.article { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.art-head { padding-top: 38px; }
.art-cat { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.art-cat:hover { text-decoration: underline; }
.art-title { margin: 12px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px,4vw,42px); line-height: 1.14; letter-spacing: -.01em; color: var(--ink-900); text-wrap: balance; }
.art-lede { margin: 18px 0 0; font-size: 19px; line-height: 1.55; color: var(--gray-600); text-wrap: pretty; }
.art-byline { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
.art-author { display: flex; align-items: center; gap: 13px; text-decoration: none; min-width: 0; }
.art-av { width: 48px; height: 48px; border-radius: 100px; overflow: hidden; flex-shrink: 0; background: var(--paper); }
.art-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-author-info { display: flex; flex-direction: column; gap: 4px; line-height: 1.25; min-width: 0; }
.art-author-info b { color: var(--ink-900); font-weight: 700; font-size: 15px; }
.art-author:hover b { color: var(--accent); }
.art-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 11px; font-size: 12.5px; color: var(--gray-500); }
.art-meta-row .m { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.art-meta-row .m svg { color: var(--gray-400); }
.art-meta-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--paper); border-radius: 100px; padding: 3px 9px; font-weight: 600; color: var(--ink-700); white-space: nowrap; }
.art-meta-pill svg { color: var(--accent); }
.art-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; position: relative; }
.art-save { display: inline-flex; align-items: center; gap: 8px; background: var(--white); color: var(--ink-900); border: 1px solid var(--gray-200); border-radius: 100px; padding: 10px 21px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease, transform .1s ease; }
.art-save:hover { border-color: var(--accent); color: var(--accent); }
.art-save:active { transform: translateY(1px) scale(.99); }
.art-save.on { border-color: var(--accent); color: #fff; background: var(--accent); }
.art-save svg { display: block; }
.art-ghost { width: 44px; height: 44px; border-radius: 100px; border: 1px solid var(--gray-200); background: var(--white); color: var(--ink-900); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: border-color .15s ease, color .15s ease; }
.art-ghost:hover { border-color: var(--accent); color: var(--accent); }
.art-ghost.ok { border-color: var(--accent); color: var(--accent); }
.art-ghost svg { display: block; }
.art-share-tip { position: absolute; bottom: calc(100% + 9px); right: 0; background: var(--ink-900); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 8px; white-space: nowrap; opacity: 0; transform: translateY(5px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 4; }
.art-share-tip::after { content: ""; position: absolute; top: 100%; right: 18px; border: 5px solid transparent; border-top-color: var(--ink-900); }
.art-share-tip.show { opacity: 1; transform: none; }
@media (max-width: 560px) {
  .art-byline { gap: 18px; }
  .art-author { width: 100%; }
  .art-actions { width: 100%; }
  .art-save { flex: 1; justify-content: center; padding: 12px 18px; }
}
.art-hero { margin: 28px 0 0; }
.art-hero img { width: 100%; border-radius: var(--r-md); aspect-ratio: 16/9; object-fit: cover; display: block; }
.art-hero figcaption { margin-top: 10px; font-size: 12.5px; color: var(--gray-500); text-align: center; }

/* "Слушать" button (byline) — matches the "Сохранить" button exactly */
.art-listen { display: inline-flex; align-items: center; gap: 8px; background: var(--white); color: var(--ink-900); border: 1px solid var(--gray-200); border-radius: 100px; padding: 10px 21px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease, transform .1s ease; }
.art-listen .aa-btn-ic { display: flex; }
.art-listen:hover { border-color: var(--accent); color: var(--accent); }
.art-listen:active { transform: translateY(1px) scale(.99); }
.art-listen.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* sticky mini audio player */
.aa-bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(8px); z-index: 90; display: flex; align-items: center; gap: 14px; width: 560px; max-width: calc(100vw - 32px); padding: 12px 14px; background: var(--white); border-radius: 16px; box-shadow: 0 14px 40px rgba(40,22,8,.24), 0 2px 8px rgba(40,22,8,.12); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
.aa-bar.show { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.aa-bar-play { flex-shrink: 0; width: 44px; height: 44px; border-radius: 100px; border: none; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 5px 14px rgba(202,54,39,.32); transition: background .15s ease, transform .1s ease; }
.aa-bar-play:hover { background: var(--accent-hover); }
.aa-bar-play:active { transform: scale(.96); }
.aa-play-ic { display: flex; }
.aa-bar-main { flex: 1; min-width: 0; }
.aa-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.aa-bar-title { font-size: 13.5px; font-weight: 700; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-bar-time { flex-shrink: 0; font-size: 12px; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.aa-bar-time .aa-cur { color: var(--accent); font-weight: 600; }
.aa-track { position: relative; height: 6px; border-radius: 100px; background: var(--gray-200); cursor: pointer; }
.aa-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 100px; background: var(--accent); }
.aa-knob { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 100px; background: #fff; border: 2px solid var(--accent); transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.aa-rate { flex-shrink: 0; background: var(--paper); border: 1px solid var(--border); border-radius: 100px; padding: 7px 11px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; color: var(--ink-900); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.aa-rate:hover { border-color: var(--accent); color: var(--accent); }
.aa-bar-x { flex-shrink: 0; width: 34px; height: 34px; border-radius: 100px; border: none; background: none; color: var(--gray-400); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, color .15s ease; }
.aa-bar-x:hover { background: var(--paper); color: var(--ink-700); }
@media (max-width: 560px) {
  .aa-bar { bottom: 12px; gap: 10px; padding: 10px 12px; }
  .aa-bar-title { font-size: 12.5px; }
}
body.ad-bottom-on .aa-bar { bottom: 88px; }
.art-body { margin-top: 32px; }
.art-body p { margin: 0 0 1.15em; font-size: 18px; line-height: 1.75; color: var(--ink-900); text-wrap: pretty; }
.art-body > p:first-of-type { }
.art-body h2 { font-family: var(--font-display); font-weight: 700; font-size: 27px; line-height: 1.25; margin: 38px 0 14px; color: var(--ink-900); }
.art-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.3; margin: 30px 0 10px; color: var(--ink-900); }
.art-body strong { font-weight: 700; color: var(--ink-900); }
.art-body em { font-style: italic; }
.art-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.art-list { margin: 0 0 1.15em; padding: 0; list-style: none; }
.art-list li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 18px; line-height: 1.65; color: var(--ink-900); }
.art-list li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 100px; background: var(--accent); }
.art-olist { margin: 0 0 1.15em; padding: 0; list-style: none; counter-reset: art-ol; }
.art-olist li { position: relative; padding-left: 40px; margin-bottom: 12px; font-size: 18px; line-height: 1.65; color: var(--ink-900); min-height: 28px; }
.art-olist li::before { counter-increment: art-ol; content: counter(art-ol); position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border-radius: 100px; background: var(--accent); color: #fff; font-family: var(--font-sans); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.art-quote { margin: 30px 0; padding: 0 0 0 24px; border-left: 3px solid var(--accent); }
.art-quote p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--ink-900); text-wrap: pretty; }
.art-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--gray-500); }
.art-quote cite::before { content: "— "; }
.art-fig { margin: 30px 0; }
.art-fig img { width: 100%; border-radius: var(--r-md); aspect-ratio: 16/9; object-fit: cover; display: block; }
.art-fig figcaption { margin-top: 10px; font-size: 12.5px; color: var(--gray-500); text-align: center; }
.art-note { display: flex; gap: 14px; background: var(--paper); border-radius: var(--r-md); padding: 20px 22px; margin: 28px 0; }
.art-note-ic { width: 34px; height: 34px; border-radius: 100px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.art-note-ic svg { display: block; }
.art-note-body b { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.art-note-body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-900); }
.art-table-wrap { margin: 26px 0; overflow-x: auto; }
.art-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.art-table th { text-align: left; font-weight: 700; color: var(--ink-900); padding: 12px 16px; background: var(--paper); border-bottom: 2px solid var(--border); }
.art-table th:first-child { border-top-left-radius: 10px; }
.art-table th:last-child { border-top-right-radius: 10px; }
.art-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--gray-600); line-height: 1.5; vertical-align: top; }
.art-table tr:last-child td { border-bottom: none; }
.art-hr { border: none; height: 1px; background: var(--border); margin: 36px 0; width: 100%; }
.art-pq { display: flex; gap: 18px; background: #eef1f6; border-radius: var(--r-md); padding: 24px 26px; margin: 26px 0; }
.art-pq-bar { width: 4px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
.art-pq p { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.5; color: var(--ink-900); text-wrap: pretty; }
.art-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 36px; }
.art-tags-lbl { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); margin-right: 4px; }
.art-tag { display: inline-flex; border: 1px solid var(--border); border-radius: 100px; padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--ink-900); text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.art-tag:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.art-share { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 32px 0 4px; padding: 22px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.art-share-lbl { font-size: 14.5px; font-weight: 600; color: var(--ink-900); }
.art-share-btns { display: flex; gap: 10px; }
.art-share-btn { width: 42px; height: 42px; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: transform .15s ease, filter .15s ease; }
.art-share-btn:hover { transform: translateY(-2px); }
.art-share-btn.tg { background: #2aabee; }
.art-share-btn.wa { background: #25d366; }
.art-share-btn.cp { background: var(--ink-900); }
/* author bio */
.art-bio-wrap { max-width: 760px; margin: 0 auto; padding-top: 44px; }
.art-bio { display: flex; gap: 22px; background: var(--paper); border-radius: var(--r-md); padding: 28px; align-items: flex-start; }
.art-bio-av { width: 78px; height: 78px; border-radius: 100px; overflow: hidden; flex-shrink: 0; }
.art-bio-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-bio-lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); }
.art-bio-name { margin: 6px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink-900); }
.art-bio-desc { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--gray-600); max-width: 56ch; text-wrap: pretty; }
.art-bio-link { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.art-bio-link:hover { text-decoration: underline; }
.art-related { padding-top: 56px; }
.rel-grid { grid-template-columns: repeat(3, 1fr); }
/* comments */
.comments { max-width: 760px; margin: 0 auto; padding-top: 56px; padding-bottom: 8px; }
.comments-head { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.comments-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink-900); }
.comments-count { font-size: 13px; font-weight: 700; color: var(--accent); background: var(--paper); border-radius: 100px; padding: 4px 12px; }
.comments-composer { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 28px; }
.comments-composer.cmt-guest { align-items: center; flex-wrap: wrap; gap: 14px 16px; background: var(--paper); border-radius: 14px; padding: 18px 20px; }
.cmt-auth-ic { width: 42px; height: 42px; border-radius: 100px; background: var(--white); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cmt-auth-text { flex: 1; min-width: 200px; }
.cmt-auth-text b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink-900); }
.cmt-auth-text span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--gray-600); }
.cmt-auth-btns { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cmt-guest .btn-cta.js-auth { padding: 11px 22px; font-size: 14px; }
.cmt-auth-reg { background: none; border: 1px solid var(--gray-200); border-radius: 100px; padding: 11px 18px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink-900); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.cmt-auth-reg:hover { border-color: var(--accent); color: var(--accent); }

/* empty comments state */
.comments-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 38px 20px 14px; }
.comments-empty[hidden] { display: none; }
.comments-empty-ic { width: 56px; height: 56px; border-radius: 100px; background: var(--paper); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.comments-empty b { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink-900); }
.comments-empty-sub { font-size: 14.5px; line-height: 1.55; color: var(--gray-500); max-width: 360px; text-wrap: pretty; }

/* ============ EMAIL CONFIRM (confirm.html) ============ */
.cfm { flex: 1; display: flex; align-items: center; justify-content: center; padding: 72px 24px 88px; background: var(--paper); }
.cfm-card { width: 100%; max-width: 520px; background: var(--white); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-card); padding: 44px 44px 40px; text-align: center; }
.cfm-state { display: none; flex-direction: column; align-items: center; }
.cfm-state.on { display: flex; }
.cfm-ic { width: 76px; height: 76px; border-radius: 100px; display: flex; align-items: center; justify-content: center; color: #fff; }
.cfm-ic.ok { background: #1f8a5b; box-shadow: 0 8px 22px rgba(31,138,91,.32); }
.cfm-ic.warn { background: var(--cta); box-shadow: 0 8px 22px rgba(255,108,36,.3); }
.cfm-ic.info { background: #2f6db0; box-shadow: 0 8px 22px rgba(47,109,176,.3); }
.cfm-eyebrow { margin-top: 22px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.cfm-title { margin: 10px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 31px); line-height: 1.15; color: var(--ink-900); text-wrap: balance; }
.cfm-sub { margin: 14px auto 0; max-width: 400px; font-size: 16px; line-height: 1.62; color: var(--gray-600); text-wrap: pretty; }
.cfm-sub b { color: var(--ink-900); font-weight: 600; word-break: break-all; }
.cfm-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.cfm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--cta); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; padding: 13px 26px; border-radius: var(--r-pill); box-shadow: var(--shadow-cta); border: none; cursor: pointer; transition: background .15s ease; }
.cfm-btn:hover { background: var(--cta-hover); }
.cfm-btn.ghost { background: transparent; color: var(--ink-900); border: 1px solid var(--gray-200); box-shadow: none; }
.cfm-btn.ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.cfm-foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.55; color: var(--gray-500); }
.cfm-foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
.cfm-foot a:hover { text-decoration: underline; }
@media (max-width: 520px) {
  .cfm { padding: 48px 16px 60px; }
  .cfm-card { padding: 34px 24px 30px; }
  .cfm-actions { flex-direction: column; align-items: stretch; }
}

/* ============ STANDALONE LOGIN (login.html) ============ */
.login { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 64px 24px 88px; background: var(--paper); }
.login-card { width: 100%; max-width: 460px; background: var(--white); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-card); padding: 42px 44px 34px; text-align: center; }
.login-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.login-title { margin: 10px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 30px); line-height: 1.15; color: var(--ink-900); text-wrap: balance; }
.login-sub { margin: 12px auto 0; max-width: 360px; font-size: 15px; line-height: 1.55; color: var(--gray-600); text-wrap: pretty; }
.login-form-wrap { margin-top: 26px; text-align: left; }
.login-card .auth-or { margin: 18px 0; }
.login-card .auth-form { gap: 14px; }

/* cloudflare turnstile (mock) */
.turnstile { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box; background: #fafafa; border: 1px solid var(--gray-200); border-radius: 8px; padding: 11px 14px; }
.ts-main { display: flex; align-items: center; gap: 11px; }
.ts-check { width: 26px; height: 26px; flex-shrink: 0; padding: 0; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ts-box { width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--gray-400); background: #fff; position: relative; transition: border-color .2s ease, background .2s ease; }
.turnstile.verifying .ts-check { cursor: default; }
.turnstile.verifying .ts-box { border-color: var(--gray-200); border-top-color: #2f8f5b; animation: tsSpin .7s linear infinite; }
@keyframes tsSpin { to { transform: rotate(360deg); } }
.turnstile.success .ts-check { cursor: default; }
.turnstile.success .ts-box { border-color: #1f8a5b; background: #1f8a5b; animation: tsPop .25s ease; }
@keyframes tsPop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.turnstile.success .ts-box::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ts-label { font-size: 13.5px; color: var(--ink-900); }
.ts-brand { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ts-cf { display: flex; align-items: center; gap: 5px; }
.ts-cf-name { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #404041; }
.ts-links { display: flex; gap: 9px; }
.ts-links a { font-size: 9px; color: var(--gray-500); text-decoration: underline; white-space: nowrap; }
.ts-links a:hover { color: var(--accent); }
.login-foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--gray-500); }
.login-foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }
@media (max-width: 520px) {
  .login { padding: 40px 16px 60px; }
  .login-card { padding: 32px 24px 28px; }
}
.cmt-av { width: 42px; height: 42px; border-radius: 100px; overflow: hidden; flex-shrink: 0; background: var(--paper); display: block; }
.cmt-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmt-av-me { background: linear-gradient(135deg, var(--accent), var(--cta)); }
.cmt-av.ini { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-sans); font-size: 16px; font-weight: 700; }
.cmt-av.c1 { background: #7c5cbf; }
.cmt-av.c2 { background: #0e7c66; }
.cmt-av.c3 { background: #c2410c; }
.cmt-av.c4 { background: #2563a8; }
.cmt-av.c5 { background: #b08400; }
.cmt-form { flex: 1; display: flex; gap: 10px; min-width: 0; }
.cmt-form input { flex: 1; min-width: 0; border: 1px solid var(--gray-200); border-radius: 100px; padding: 13px 20px; font-family: var(--font-sans); font-size: 14.5px; color: var(--ink-900); outline: none; background: var(--white); }
.cmt-form input:focus { border-color: var(--ink-900); }
.cmt-send { padding: 13px 24px; font-size: 14.5px; box-shadow: none; }
.comments-list { display: flex; flex-direction: column; gap: 24px; }
.cmt { display: flex; gap: 12px; }
.cmt-body { flex: 1; min-width: 0; }
.cmt-top { display: flex; align-items: center; gap: 9px; }
.cmt-name { font-size: 14px; font-weight: 700; color: var(--ink-900); }
.cmt-badge { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 100px; padding: 2px 8px; }
.cmt-time { font-size: 12.5px; color: var(--gray-500); }
.cmt-text { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-900); text-wrap: pretty; }
.cmt-actions { display: flex; align-items: center; gap: 16px; margin-top: 9px; }
.cmt-like { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; cursor: pointer; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--gray-500); padding: 0; }
.cmt-like:hover, .cmt-like.on { color: var(--accent); }
.cmt-like svg { display: block; }
.cmt-reply { border: none; background: none; cursor: pointer; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--gray-500); padding: 0; }
.cmt-reply:hover { color: var(--ink-900); }
.cmt-child { margin-top: 18px; padding-left: 18px; border-left: 2px solid var(--border); }
.comments-more { display: block; width: 100%; margin-top: 28px; border: 1px solid var(--gray-200); background: var(--white); border-radius: 100px; padding: 13px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink-900); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.comments-more:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 860px) {
  .rel-grid { grid-template-columns: 1fr; }
  .art-bio { flex-direction: column; gap: 16px; }
  .art-body p { font-size: 17px; }
  .art-list li { font-size: 17px; }
  .art-olist li { font-size: 17px; }
}
@media (max-width: 560px) {
  .art-byline { gap: 14px; }
  .cmt-form { flex-direction: column; }
  .cmt-form .cmt-send { width: 100%; }
}

/* ---- article rich set: TOC, callouts, embeds, etc ---- */
.art-toc { background: var(--paper); border-radius: var(--r-md); padding: 20px 24px; margin: 0 0 30px; }
.art-toc-lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 12px; }
.art-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.art-toc li { counter-increment: toc; position: relative; padding-left: 30px; margin-bottom: 9px; }
.art-toc li:last-child { margin-bottom: 0; }
.art-toc li::before { content: counter(toc); position: absolute; left: 0; top: 0; width: 21px; height: 21px; border-radius: 100px; background: var(--white); border: 1px solid var(--border); color: var(--accent); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.art-toc a { font-size: 15px; color: var(--ink-900); text-decoration: none; font-weight: 500; }
.art-toc a:hover { color: var(--accent); }
.art-body h4 { font-family: var(--font-sans); font-weight: 700; font-size: 17px; margin: 26px 0 8px; color: var(--ink-900); }
.art-body mark { background: rgba(244,124,32,.22); color: inherit; padding: 1px 3px; border-radius: 3px; }
/* callout variants */
.art-note.tip .art-note-ic { background: var(--cta); }
.art-note.tip .art-note-body b { color: var(--cta); }
.art-note.warn { background: #fdeee9; }
.art-note.warn .art-note-ic { background: var(--accent); }
.art-note.warn .art-note-body b { color: var(--accent); }
/* read-more inline card */
.art-readmore { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; margin: 24px 0; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.art-readmore:hover { border-color: var(--accent); box-shadow: var(--shadow-card); text-decoration: none; }
.art-body a.art-readmore, .art-body a.art-readmore:hover { text-decoration: none; }
.art-readmore-title { text-decoration: none; }
.art-readmore-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--paper); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.art-readmore-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.art-readmore-lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.art-readmore-title { font-size: 15.5px; font-weight: 600; color: var(--ink-900); margin-top: 2px; }
.art-readmore-arrow { color: var(--accent); font-size: 20px; flex-shrink: 0; }
/* gallery */
.art-gallery { margin: 30px 0; }
.art-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.art-gallery-grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-md); display: block; }
.art-gallery figcaption { margin-top: 10px; font-size: 12.5px; color: var(--gray-500); text-align: center; }
/* expert quote */
.art-expert { display: flex; gap: 18px; align-items: flex-start; background: var(--paper); border-radius: var(--r-md); padding: 24px 26px; margin: 30px 0; }
.art-expert-av { width: 60px; height: 60px; border-radius: 100px; overflow: hidden; flex-shrink: 0; }
.art-expert-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-expert-body p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ink-900); text-wrap: pretty; }
.art-expert-by { margin-top: 12px; }
.art-expert-by b { display: block; font-size: 14px; color: var(--ink-900); }
.art-expert-by span { font-size: 13px; color: var(--gray-500); }
/* full-bleed wide image */
.art-wide { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 1180px; margin: 38px 0; }
.art-wide img { width: 100%; aspect-ratio: 21/9; object-fit: cover; display: block; border-radius: 0; }
.art-wide figcaption { margin-top: 10px; font-size: 12.5px; color: var(--gray-500); text-align: center; padding: 0 24px; }
/* video embed */
.art-embed-video { position: relative; margin: 30px 0; border-radius: var(--r-md); overflow: hidden; cursor: pointer; }
.art-embed-video img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.art-embed-scrim { position: absolute; inset: 0; background: rgba(20,11,5,.28); }
.art-embed-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 100px; background: rgba(255,255,255,.92); color: var(--accent); display: flex; align-items: center; justify-content: center; padding-left: 4px; transition: transform .15s ease; }
.art-embed-video:hover .art-embed-play { transform: translate(-50%,-50%) scale(1.08); }
.art-embed-lbl { position: absolute; left: 16px; bottom: 14px; color: #fff; font-size: 13px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
/* social embed */
.art-embed-social { border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px 22px; margin: 30px 0; }
.art-embed-social-top { display: flex; align-items: center; gap: 11px; }
.art-embed-social-av { width: 40px; height: 40px; border-radius: 100px; background: linear-gradient(135deg, var(--accent), var(--cta)); flex-shrink: 0; }
.art-embed-social-name { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; color: var(--ink-900); line-height: 1.3; }
.art-embed-social-handle { font-size: 13px; font-weight: 500; color: var(--gray-500); }
.art-embed-social p { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-900); }
.art-embed-social-meta { margin-top: 12px; font-size: 13px; color: var(--gray-500); }
/* inline CTA */
.art-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--paper); border-radius: var(--r-md); padding: 22px 26px; margin: 30px 0; }
.art-cta-text { display: flex; flex-direction: column; }
.art-cta-text b { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink-900); }
.art-cta-text span { font-size: 14px; color: var(--gray-600); margin-top: 3px; }
.art-body a.art-cta-btn, .art-body a.art-cta-btn:hover { color: #fff; text-decoration: none; }
.art-cta-btn { box-shadow: none; flex-shrink: 0; color: #fff; text-decoration: none; }
.art-cta-btn:hover { color: #fff; text-decoration: none; }
/* sources */
.art-sources { max-width: 720px; margin: 36px auto 0; padding: 22px 0 0; border-top: 1px solid var(--border); }
.art-sources-lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 12px; }
.art-sources ol { margin: 0; padding-left: 20px; }
.art-sources li { font-size: 13.5px; line-height: 1.6; color: var(--gray-600); margin-bottom: 6px; }
@media (max-width: 560px) {
  .art-gallery-grid { grid-template-columns: 1fr; }
  .art-expert { flex-direction: column; gap: 14px; }
  .art-cta { flex-direction: column; align-items: stretch; }
  .art-cta-btn { width: 100%; text-align: center; }
}

/* ============ STATIC PAGE (page.php) ============ */
.page-wrap { max-width: 1120px; margin: 0 auto; padding: 36px 32px 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 60px; align-items: start; }

/* left sidebar — sibling pages of the section ("О сайте") */
.page-side { position: sticky; top: 92px; }
.page-side-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); padding: 0 14px 12px; }
.page-menu { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.page-menu a { display: block; padding: 9px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 15px; line-height: 1.4; color: var(--gray-600); text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.page-menu a:hover { color: var(--ink-900); }
.page-menu a.on { color: var(--accent); font-weight: 600; border-left-color: var(--accent); }

/* content column */
.page-content { min-width: 0; }
.page-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-500); flex-wrap: wrap; }
.page-crumbs a { color: var(--gray-500); text-decoration: none; }
.page-crumbs a:hover { color: var(--accent); }
.page-crumbs .sep { color: var(--gray-400); }
.page-crumbs .cur { color: var(--ink-900); font-weight: 600; }
.page-title { margin: 16px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px,4vw,44px); line-height: 1.12; letter-spacing: -.015em; color: var(--ink-900); text-wrap: balance; }
.page-lede { margin: 16px 0 0; font-size: 19px; line-height: 1.6; color: var(--gray-600); text-wrap: pretty; max-width: 60ch; }
.page-title + .page-body { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); }
.page-lede + .page-body { margin-top: 30px; }
.page-body { margin-top: 30px; }

/* mission pull-quote (serif, big) */
.page-mission { margin: 38px 0; padding: 28px 30px; background: var(--quote-bg); border-radius: var(--r-md); display: flex; gap: 20px; }
.page-mission .bar { width: 4px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
.page-mission p { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.42; color: var(--ink-900); text-wrap: pretty; }
.page-mission cite { display: block; margin-top: 14px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--gray-500); }

/* stats band */
.page-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin: 38px 0; }
.page-stat { background: var(--white); padding: 26px 22px; text-align: center; }
.page-stat-num { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--accent); }
.page-stat-lbl { margin-top: 9px; font-size: 14px; line-height: 1.45; color: var(--gray-600); }

/* values grid */
.page-values { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0; }
.page-value { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px 24px; }
.page-value-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--paper); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.page-value h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 16px 0 6px; color: var(--ink-900); }
.page-value p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--gray-600); }

/* contact CTA */
.page-contact { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin: 42px 0 56px; padding: 28px 32px; border-radius: var(--r-md); background: var(--paper); }
.page-contact-text b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--ink-900); }
.page-contact-text span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--gray-600); max-width: 46ch; }
.page-contact a.btn-cta { flex-shrink: 0; color: #fff; text-decoration: none; }
.page-contact a.btn-cta:hover { color: #fff; text-decoration: none; }

/* — contact page: quick contact methods — */
.page-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 30px 0 6px; }
.page-method { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-md); padding: 20px 22px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.art-body a.page-method, .art-body a.page-method:hover { text-decoration: none; }
.page-method:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.page-method-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--white); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.page-method-lbl { margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); }
.page-method-val { margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--ink-900); }
.page-method-sub { margin-top: 3px; font-size: 13px; color: var(--gray-600); }

/* — contact form — */
.page-form { margin: 8px 0 56px; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pf-field { display: flex; flex-direction: column; }
.pf-field.full { grid-column: 1 / -1; }
.pf-label { font-size: 13.5px; font-weight: 600; color: var(--ink-900); margin-bottom: 8px; }
.pf-label .opt { color: var(--gray-500); font-weight: 400; }
.pf-input, .pf-select, .pf-textarea { width: 100%; box-sizing: border-box; font-family: var(--font-sans); font-size: 15px; color: var(--ink-900); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 15px; transition: border-color .15s ease, box-shadow .15s ease; }
.pf-input::placeholder, .pf-textarea::placeholder { color: var(--gray-400); }
.pf-input:focus, .pf-select:focus, .pf-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(202,54,39,.12); }
.pf-textarea { min-height: 158px; resize: vertical; line-height: 1.6; }
.pf-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 42px; cursor: pointer; }
.pf-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 2px; }
.pf-actions .btn-cta { flex-shrink: 0; }
.pf-privacy { font-size: 13px; line-height: 1.5; color: var(--gray-500); max-width: 42ch; }
.pf-privacy a { color: var(--accent); text-decoration: none; }
.pf-privacy a:hover { text-decoration: underline; }
/* sent state */
.page-form-done { display: none; background: var(--paper); border-radius: var(--r-md); padding: 32px 30px; text-align: center; }
.page-form.sent .pf-grid { display: none; }
.page-form.sent .page-form-done { display: block; }
.pf-done-ic { width: 52px; height: 52px; border-radius: 100px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.pf-done-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink-900); margin-top: 16px; }
.pf-done-sub { font-size: 16px; line-height: 1.55; color: var(--gray-600); margin-top: 8px; max-width: 44ch; margin-left: auto; margin-right: auto; }

@media (max-width: 860px) {
  .page-wrap { grid-template-columns: 1fr; gap: 0; padding-top: 26px; }
  .page-side { position: static; margin-bottom: 24px; }
  .page-side-title { padding: 0 0 10px; }
  .page-menu { display: flex; flex-wrap: wrap; gap: 8px; border-left: none; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
  .page-menu a { margin-left: 0; border-left: none; border: 1px solid var(--border); border-radius: 100px; padding: 8px 15px; font-size: 13.5px; }
  .page-menu a.on { border-color: var(--accent); background: var(--accent); color: #fff; }
}
@media (max-width: 560px) {
  .page-stats { grid-template-columns: 1fr; }
  .page-values { grid-template-columns: 1fr; }
  .page-methods { grid-template-columns: 1fr; }
  .pf-grid { grid-template-columns: 1fr; }
  .page-contact { flex-direction: column; align-items: flex-start; }
  .page-mission p { font-size: 20px; }
}

/* ============ ADS / MONETIZATION SLOTS ============ */
.art-layout { max-width: 1116px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 720px) 300px; grid-template-areas: "head ." "hero ." "main rail"; column-gap: 48px; justify-content: center; align-items: start; }
.art-layout .art-head { grid-area: head; }
.art-layout .art-hero { grid-area: hero; }
.art-main { grid-area: main; min-width: 0; }
.art-rail { grid-area: rail; align-self: stretch; }
.art-rail-inner { display: flex; flex-direction: column; gap: 24px; height: 100%; }
.art-rail-seg { flex: 1 1 0; min-height: 600px; }
.ad-sticky { position: sticky; top: 88px; }

/* post-article sections aligned under the reading column */
.art-after { max-width: 1116px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 720px) 300px; column-gap: 48px; justify-content: center; align-items: start; }
.art-after > .comments, .art-after > .art-bio-wrap { grid-column: 1; max-width: none; margin: 0; padding-left: 0; padding-right: 0; min-width: 0; }
.art-after > .art-related { grid-column: 1 / -1; max-width: none; margin: 0; padding-left: 0; padding-right: 0; }

/* === KILL-SWITCH: add class "no-ads" to <body> to disable all ad slots
   and re-center the article exactly as it was before monetization === */
body.no-ads .art-rail,
body.no-ads .ad-incontent,
body.no-ads .ad-bottom { display: none !important; }
body.no-ads .art-layout { grid-template-columns: minmax(0, 720px); grid-template-areas: "head" "hero" "main"; max-width: 760px; column-gap: 0; }
body.no-ads .art-after { grid-template-columns: minmax(0, 720px); max-width: 760px; column-gap: 0; }
body.no-ads.ad-bottom-on { padding-bottom: 0 !important; }

/* ============ LOGGED-IN STATE: user chip + menu ============ */
.user-chip { display: flex; align-items: center; gap: 9px; background: none; border: none; border-radius: 100px; padding: 6px 14px 6px 7px; color: #fff; cursor: pointer; font-family: var(--font-sans); }
.user-chip:hover { background: var(--walnut-700); }
.user-wrap.is-open .user-chip { background: var(--paper); color: var(--ink-900); border-color: var(--paper); border-radius: 12px 12px 0 0; z-index: 202; }
.user-av { width: 30px; height: 30px; border-radius: 100px; overflow: hidden; flex-shrink: 0; background: var(--walnut-600); display: block; }
.user-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.user-av.ini { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--cta)); color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 13px; }
.um-av.ini { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--cta)); color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 19px; }
.user-chev { display: flex; transition: transform .15s ease; }
.user-wrap.is-open .user-chev { transform: rotate(180deg); }
.user-panel { right: 0; top: 42px; width: 264px; border-radius: 16px 0 16px 16px; }
.user-btn-m { padding: 0; background: none; border: none; }
.user-btn-m .user-av.sm { width: 30px; height: 30px; }
.user-panel-m { padding-bottom: 8px; }

.um-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.um-head.no-av { padding: 15px 18px 14px; }
.um-av { width: 46px; height: 46px; border-radius: 100px; overflow: hidden; flex-shrink: 0; }
.um-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.um-id { display: flex; flex-direction: column; min-width: 0; }
.um-id b { font-size: 15px; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-id span { font-size: 12.5px; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-list { padding: 6px 8px; border-top: 1px solid var(--border); }
.um-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink-900); font-size: 14px; font-weight: 500; background: none; border: none; cursor: pointer; font-family: var(--font-sans); text-align: left; white-space: nowrap; }
.um-row:hover { background: var(--white); color: var(--accent); }
.um-row svg { color: var(--gray-500); flex-shrink: 0; }
.um-row:hover svg { color: var(--accent); }
.um-sep { height: 1px; background: var(--border); margin: 0 12px; }
.um-foot { padding: 6px 8px; }
.um-logout { color: var(--accent); }
.um-logout svg { color: var(--accent); }

/* reserved-slot look (placeholder until a network/creative is wired in) */
.ad-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-400); margin: 0 0 8px; }
.ad-slot { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--gray-400); }
.ad-slot-size { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--gray-500); }
.ad-slot-tag { font-size: 12px; margin-top: 5px; }
.ad-300x600 { width: 300px; height: 600px; }

/* in-content slot (lives inside the reading column) */
.ad-incontent { margin: 36px 0; }
.ad-incontent .ad-slot { width: 100%; min-height: 282px; }

/* mobile sticky bottom banner */
.ad-bottom { display: none; }
.ad-bottom.hide { display: none !important; }
body.ad-bottom-on { /* padding applied only on mobile, see below */ }

@media (max-width: 980px) {
  .art-layout { grid-template-columns: 1fr; grid-template-areas: "head" "hero" "main"; max-width: 760px; column-gap: 0; }
  .art-rail { display: none; }
  .art-after { grid-template-columns: 1fr; max-width: 760px; column-gap: 0; }
  .ad-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: #fff; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 9px 12px; box-shadow: 0 -4px 16px rgba(40,22,8,.08); }
  .ad-bottom .ad-label { display: none; }
  .ad-bottom .ad-slot { width: 320px; height: 50px; min-height: 0; flex-direction: row; gap: 8px; }
  .ad-bottom-x { position: absolute; top: -32px; right: 10px; width: 30px; height: 30px; border-radius: 100px; background: #fff; border: 1px solid var(--border); color: var(--gray-600); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-card); }
  body.ad-bottom-on { padding-bottom: 76px; }
}

/* ============ TOAST NOTIFICATIONS (bottom-left) ============ */
.clb-toasts { position: fixed; left: 24px; bottom: 24px; z-index: 200; display: flex; flex-direction: column-reverse; gap: 12px; max-width: 380px; width: calc(100% - 48px); pointer-events: none; }
.clb-toast { display: flex; align-items: center; gap: 13px; background: var(--white); border-radius: 14px; box-shadow: 0 12px 34px rgba(40,22,8,.20), 0 2px 8px rgba(40,22,8,.10); padding: 14px 14px 14px 16px; pointer-events: auto; opacity: 0; transform: translateX(-16px) scale(.98); transition: opacity .26s cubic-bezier(.2,.7,.3,1), transform .26s cubic-bezier(.2,.7,.3,1); }
.clb-toast.in { opacity: 1; transform: none; }
.clb-toast.out { opacity: 0; transform: translateX(-16px) scale(.98); }
.clb-toast-ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 100px; background: var(--paper); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.clb-toast.accent .clb-toast-ic { background: var(--accent); color: #fff; }
.clb-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clb-toast-text { font-size: 14px; font-weight: 600; color: var(--ink-900); line-height: 1.3; }
.clb-toast-sub { font-size: 12.5px; color: var(--gray-500); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clb-toast-action { flex-shrink: 0; background: none; border: none; padding: 6px 10px; font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--accent); cursor: pointer; border-radius: 8px; transition: background .15s ease; }
.clb-toast-action:hover { background: var(--paper); }
.clb-toast-x { flex-shrink: 0; width: 28px; height: 28px; border-radius: 100px; border: none; background: none; color: var(--gray-400); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, color .15s ease; }
.clb-toast-x:hover { background: var(--paper); color: var(--ink-700); }
@media (max-width: 980px) {
  body.ad-bottom-on .clb-toasts { bottom: 96px; }
}
@media (max-width: 560px) {
  .clb-toasts { left: 12px; bottom: 12px; width: calc(100% - 24px); }
  body.ad-bottom-on .clb-toasts { bottom: 84px; }
}

/* ============ ACCOUNT / LOGGED-IN PAGES ============ */
.page:has(.acc-wrap) { background: var(--paper); }
.acc-wrap { max-width: 1120px; margin: 0 auto; padding: 36px 32px 52px; display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 48px; align-items: start; }
.acc-side { position: sticky; top: 92px; display: flex; flex-direction: column; }
.acc-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px 20px; text-align: center; }
.acc-card-av { width: 72px; height: 72px; margin: 0 auto; border-radius: 100px; overflow: hidden; display: block; }
.acc-card-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc-card-av.ini { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--cta)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 28px; }
.acc-card-name { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--ink-900); }
.acc-card-status { margin: 8px auto 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 9px; border-radius: 100px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; text-decoration: none; color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, #fff); border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent); transition: background .15s ease; }
.acc-card-status:hover { background: color-mix(in srgb, var(--sc) 22%, #fff); }
.acc-card-status svg { flex-shrink: 0; }
.acc-card-email { margin-top: 10px; font-size: 12.5px; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; }
.acc-card-joined { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--gray-500); }
.acc-card-edit { margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; background: var(--white); color: var(--ink-900); border: 1px solid var(--border); border-radius: 100px; padding: 9px 14px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s; }
.acc-card-edit:hover { background: var(--paper); border-color: var(--gray-400); }
.acc-nav { display: flex; flex-direction: column; margin-top: 18px; }
.acc-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-md); text-decoration: none; color: var(--ink-700); font-size: 14.5px; font-weight: 500; transition: background .15s ease, color .15s ease; }
.acc-link-ic { display: flex; color: var(--gray-400); transition: color .15s ease; }
.acc-link-lbl { flex: 1; }
.acc-link-n { font-size: 12px; font-weight: 700; color: var(--gray-400); background: var(--paper); border-radius: 100px; padding: 1px 8px; }
.acc-link:hover { background: var(--paper); color: var(--ink-900); }
.acc-link:hover .acc-link-ic { color: var(--ink-900); }
.acc-link.on { background: var(--accent); color: #fff; }
.acc-link.on .acc-link-ic { color: #fff; }
.acc-link.on .acc-link-n { background: rgba(255,255,255,.2); color: #fff; }
.acc-logout { display: flex; align-items: center; gap: 11px; margin-top: 8px; padding: 11px 14px; border: none; background: none; border-radius: var(--r-md); cursor: pointer; font-family: var(--font-sans); font-size: 14.5px; font-weight: 500; color: var(--accent); transition: background .15s ease; }
.acc-logout svg { color: var(--accent); }
.acc-logout:hover { background: rgba(202,54,39,.07); }

.acc-content { min-width: 0; }
.acc-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 30px; }
.acc-page-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px,3vw,34px); line-height: 1.12; color: var(--ink-900); }
.acc-page-sub { margin: 7px 0 0; font-size: 14.5px; color: var(--gray-600); }
.acc-page-tools { display: flex; align-items: center; gap: 10px; }

/* profile hero */
.acc-hero { display: flex; align-items: center; gap: 24px; background: var(--walnut-800); background-image: linear-gradient(rgba(28,16,8,.74), rgba(28,16,8,.74)), url(assets/bg-wood.jpg); background-size: cover; border-radius: 16px; padding: 30px 32px; color: #fff; }
.acc-hero-av { width: 92px; height: 92px; border-radius: 100px; overflow: hidden; flex-shrink: 0; border: 3px solid rgba(255,255,255,.14); }
.acc-hero-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc-hero-av.ini { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--cta)); font-family: var(--font-display); font-weight: 700; font-size: 38px; }
.acc-hero-info { flex: 1; min-width: 0; }
.acc-hero-name { font-family: var(--font-display); font-weight: 700; font-size: 27px; line-height: 1.15; }
.acc-hero-email { margin-top: 4px; font-size: 14px; color: var(--on-dark-muted); }
.acc-hero-joined { margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--on-dark-muted); }
.acc-hero-edit { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 100px; padding: 10px 18px; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background .15s ease; }
.acc-hero-edit:hover { background: rgba(255,255,255,.2); }

/* profile status showcase */
.acc-status { display: flex; align-items: center; gap: 24px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 30px 34px; color: var(--ink-900); }
.acc-status-emblem { width: 70px; height: 70px; border-radius: 100px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.acc-status-body { flex: 1; min-width: 0; }
.acc-status-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); }
.acc-status-name { margin-top: 5px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--ink-900); }
.acc-status-step { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--gray-500); letter-spacing: .01em; white-space: nowrap; }
.acc-status-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.acc-status-track { margin-top: 14px; height: 8px; border-radius: 100px; background: rgba(0,0,0,.09); overflow: hidden; max-width: 460px; }
.acc-status-hint { margin-top: 16px; font-size: 13.5px; color: var(--gray-600); }
.acc-status-hint b { color: var(--ink-900); font-weight: 700; }
.acc-ladder { position: relative; margin-top: 22px; }
.acc-ladder-line { position: absolute; left: 7px; right: 7px; top: 6px; height: 4px; border-radius: 100px; background: rgba(0,0,0,.08); overflow: hidden; }
.acc-ladder-line span { display: block; height: 100%; border-radius: 100px; transition: width .5s ease; }
.acc-ladder-rungs { position: relative; display: flex; justify-content: space-between; }
.acc-rung { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.acc-rung-dot { width: 14px; height: 14px; border-radius: 100px; background: var(--white); border: 2px solid rgba(0,0,0,.15); box-shadow: 0 0 0 4px var(--white); transition: transform .2s; }
.acc-rung.is-done .acc-rung-dot { background: var(--rc); border-color: var(--rc); }
.acc-rung.is-current .acc-rung-dot { width: 18px; height: 18px; background: var(--rc); border-color: var(--rc); box-shadow: 0 0 0 4px var(--white), 0 0 0 7px color-mix(in srgb, var(--rc) 22%, transparent); }
.acc-rung-name { font-size: 11.5px; font-weight: 600; color: var(--gray-500); text-align: center; line-height: 1.25; letter-spacing: .005em; }
.acc-rung.is-done .acc-rung-name { color: var(--gray-600); }
.acc-rung.is-current .acc-rung-name { color: var(--ink-900); font-weight: 700; }
.acc-status-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 11px; }
.acc-status-edit { display: inline-flex; align-items: center; gap: 8px; background: var(--white); color: var(--ink-900); border: 1px solid var(--border); border-radius: 100px; padding: 9px 17px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s ease, border-color .15s ease; }
.acc-status-edit:hover { background: var(--paper); border-color: var(--gray-400); }
.acc-status-joined { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gray-500); white-space: nowrap; }

/* stat tiles */
.acc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.acc-stat { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px 24px; }
.acc-stat-num { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; color: var(--ink-900); }
.acc-stat-lbl { margin-top: 7px; font-size: 13px; color: var(--gray-600); }
.acc-stat-num span { font-size: 16px; color: var(--accent); }

/* section blocks */
.acc-block { margin-top: 24px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 26px 28px; }
.acc-block-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.acc-block-title { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink-900); white-space: nowrap; }
.acc-block-title .bar { width: 22px; height: 4px; background: var(--accent); border-radius: 2px; flex-shrink: 0; }
.acc-block-link { font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.acc-block-link:hover { text-decoration: underline; }
.acc-block-meta { font-size: 13.5px; color: var(--gray-600); white-space: nowrap; }
.acc-block-meta b { color: var(--ink-900); font-weight: 700; }
.acc-content > .acc-block:first-child { margin-top: 0; }
.acc-listhead { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }

/* resume reading */
.acc-resume-card { display: flex; gap: 20px; align-items: center; background: var(--paper); border: 1px solid transparent; border-radius: var(--r-md); padding: 16px; text-decoration: none; transition: border-color .15s ease; }
.acc-resume-card:hover { border-color: var(--accent); }
.acc-resume-img { position: relative; width: 168px; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.acc-resume-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc-resume-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0,0,0,.25); }
.acc-resume-bar span { display: block; height: 100%; background: var(--accent); }
.acc-resume-body { min-width: 0; }
.acc-resume-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.acc-resume-title { display: block; margin-top: 9px; font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.28; color: var(--ink-900); text-wrap: pretty; }
.acc-resume-meta { display: block; margin-top: 8px; font-size: 13px; color: var(--gray-600); }

/* saved grid */
.acc-bm-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.acc-bm-tab { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--border); border-radius: 100px; padding: 7px 15px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--ink-900); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.acc-bm-tab:hover { border-color: var(--gray-400); }
.acc-bm-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.acc-bm-tab-n { font-size: 12px; font-weight: 600; color: var(--gray-400); }
.acc-bm-tab.on .acc-bm-tab-n { color: rgba(255,255,255,.72); }
.acc-bm-group + .acc-bm-group { margin-top: 36px; }
.acc-bm-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 22px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; transition: gap .15s ease; }
.acc-bm-more:hover { gap: 9px; }
.acc-bm-more svg { stroke-width: 2.4; }
.acc-bm-grouphead { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 18px; }
.acc-bm-grouphead span { color: var(--gray-400); font-weight: 600; letter-spacing: 0; }
.acc-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: 0; row-gap: 0; margin: 0 -28px; padding: 0 28px; background-image: repeating-linear-gradient(180deg, transparent 0, transparent 230px, rgba(255,242,214,.85) 230px, rgba(255,242,214,.85) 233px, #bb8c57 233px, #9a6c3d 240px, #6f4a28 249px, #4a2f18 252px, transparent 252px, transparent 380px); }
.acc-saved-lib { position: relative; }
.acc-saved-lib .lib-title { color: var(--ink-900); }
.acc-saved-lib .lib-author { color: var(--gray-500); }
.acc-saved-lib .lib-meta { color: var(--gray-400); }
.acc-saved-lib .lib-book:hover .lib-title { color: var(--accent); }
.acc-saved-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px; }
.acc-saved { position: relative; }
.acc-saved-link { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.acc-saved-img { position: relative; aspect-ratio: 16/10; border-radius: var(--r-md); overflow: hidden; background: var(--gray-100); }
.acc-saved-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.acc-saved-link:hover .acc-saved-img img { transform: scale(1.04); }
.acc-saved-body { display: flex; flex-direction: column; gap: 8px; }
.acc-saved-title { font-weight: 600; font-size: 15.5px; line-height: 1.34; color: var(--ink-900); text-wrap: pretty; }
.acc-saved-link:hover .acc-saved-title { color: var(--accent); }
.acc-saved-when { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-500); }
.acc-saved-when svg { color: var(--accent); }
.acc-saved-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 100px; border: none; background: rgba(255,255,255,.92); color: var(--ink-700); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-card); opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease; }
.acc-saved:hover .acc-saved-x { opacity: 1; }
.acc-saved-x:hover { background: var(--accent); color: #fff; }

/* comments list */
.acc-cmt-list { display: flex; flex-direction: column; }
.acc-cmt { padding: 16px 0; }
.acc-cmt:first-child { padding-top: 4px; }
.acc-cmt:last-child { padding-bottom: 4px; }
.acc-cmt-art { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; max-width: 100%; }
.acc-cmt-thumb { width: 46px; height: 46px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.acc-cmt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc-cmt-arttext { min-width: 0; }
.acc-cmt-cat { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.acc-cmt-arttitle { display: block; margin-top: 2px; font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--ink-900); }
.acc-cmt-art:hover .acc-cmt-arttitle { color: var(--accent); }
.acc-cmt-text { position: relative; margin: 16px 0 0; padding: 13px 17px; background: #fff; border: 1px solid var(--border); border-radius: 13px; font-size: 14.5px; line-height: 1.6; color: var(--ink-700); text-wrap: pretty; }
.acc-cmt-text::before { content: ''; position: absolute; top: -6px; left: 22px; width: 11px; height: 11px; background: #fff; border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); border-radius: 2px 0 0 0; }
.acc-cmt-foot { display: flex; align-items: center; gap: 18px; margin-top: 13px; font-size: 12.5px; color: var(--gray-500); }
.acc-cmt-time { color: var(--gray-500); }
.acc-cmt-stat { display: inline-flex; align-items: center; gap: 6px; }
.acc-cmt-stat svg { color: var(--gray-400); }
.acc-cmt-acts { margin-left: auto; position: relative; }
.acc-cmt-kebab { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -6px -6px -6px 0; border: none; border-radius: 100px; background: none; color: var(--gray-400); cursor: pointer; transition: background .15s ease, color .15s ease; }
.acc-cmt-kebab:hover, .acc-cmt-kebab[aria-expanded="true"] { background: var(--paper); color: var(--ink-900); }
.acc-cmt-menu { position: absolute; top: 32px; right: 0; z-index: 5; min-width: 168px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(40,22,8,.18); overflow: hidden; padding: 5px; }
.acc-cmt-menu[hidden] { display: none; }
.acc-cmt-mi { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 9px 11px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--ink-900); cursor: pointer; }
.acc-cmt-mi svg { color: var(--gray-500); flex-shrink: 0; }
.acc-cmt-mi:hover { background: var(--paper); }
.acc-cmt-mi.danger { color: var(--accent); }
.acc-cmt-mi.danger svg { color: var(--accent); }
.acc-cmt-mi.danger:hover { background: rgba(202,54,39,.07); }
.acc-cmt-editbox { margin-top: 14px; }
.acc-cmt-edit-area { width: 100%; min-height: 92px; resize: vertical; box-sizing: border-box; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.6; color: var(--ink-900); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 15px; outline: none; transition: border-color .15s ease; }
.acc-cmt-edit-area:focus { border-color: var(--ink-900); }
.acc-cmt-edit-acts { display: flex; gap: 10px; margin-top: 11px; }
.acc-cmt-save { background: var(--cta); color: #fff; border: none; border-radius: 100px; padding: 9px 20px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.acc-cmt-save:hover { background: var(--cta-hover); }
.acc-cmt-cancel { background: none; border: 1px solid var(--gray-200); border-radius: 100px; padding: 9px 18px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--ink-700); cursor: pointer; transition: border-color .15s ease; }
.acc-cmt-cancel:hover { border-color: var(--gray-400); }

/* pager */
.acc-pager { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 28px; }
.acc-pg-num, .acc-pg-arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink-700); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.acc-pg-num:hover, .acc-pg-arrow:hover:not(:disabled) { border-color: var(--ink-900); color: var(--ink-900); }
.acc-pg-num.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.acc-pg-arrow:disabled { opacity: .4; cursor: default; color: var(--gray-400); }

/* history */
.acc-hist-group { margin-bottom: 28px; }
.acc-hist-day { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 4px; }
.acc-hist-rows { display: flex; flex-direction: column; }
.acc-hist-row { display: flex; align-items: center; gap: 16px; padding: 14px 12px; margin: 0 -12px; border-radius: var(--r-md); text-decoration: none; border-bottom: 1px solid var(--border); transition: background .15s ease; }
.acc-hist-row:last-child { border-bottom: none; }
.acc-hist-row:hover { background: var(--paper); }

/* notifications page */
.acc-notif-group { margin-bottom: 26px; }
.acc-notif-group:last-child { margin-bottom: 0; }
.acc-notif-day { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 6px; }
.acc-notif-rows { display: flex; flex-direction: column; }
.acc-notif-row { display: flex; align-items: center; gap: 15px; padding: 15px 12px; margin: 0 -12px; border-radius: var(--r-md); text-decoration: none; border-bottom: 1px solid var(--border); transition: background .15s ease; }
.acc-notif-row:last-child { border-bottom: none; }
.acc-notif-row:hover { background: var(--paper); }
.acc-notif-row.unread { background: rgba(202,54,39,.045); }
.acc-notif-row.unread:hover { background: rgba(202,54,39,.07); }
.acc-notif-vis { flex-shrink: 0; }
.acc-notif-txt { flex: 1; min-width: 0; }
.acc-notif-txt .t { display: block; font-size: 14.5px; line-height: 1.45; color: var(--ink-900); text-wrap: pretty; }
.acc-notif-txt .time { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--accent); }
.acc-notif-unread { width: 9px; height: 9px; border-radius: 100px; background: var(--accent); flex-shrink: 0; }
.acc-hist-thumb { width: 64px; height: 48px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.acc-hist-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc-hist-main { flex: 1; min-width: 0; }
.acc-hist-cat { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.acc-hist-title { display: block; margin-top: 3px; font-weight: 600; font-size: 15px; line-height: 1.32; color: var(--ink-900); text-wrap: pretty; }
.acc-hist-row:hover .acc-hist-title { color: var(--accent); }
.acc-hist-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; text-align: right; }
.acc-hist-prog { font-size: 11.5px; font-weight: 700; color: var(--gray-500); background: var(--paper); border-radius: 100px; padding: 2px 9px; white-space: nowrap; }
.acc-hist-prog.done { color: #0e7c66; background: rgba(14,124,102,.1); }
.acc-hist-time { font-size: 12px; color: var(--gray-400); white-space: nowrap; }

/* empty states */
.acc-empty { text-align: center; padding: 56px 24px; border: 1px dashed var(--gray-200); border-radius: var(--r-md); }
.acc-empty-ic { width: 60px; height: 60px; margin: 0 auto; border-radius: 100px; background: var(--paper); color: var(--gray-400); display: flex; align-items: center; justify-content: center; }
.acc-empty-title { margin-top: 16px; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink-900); }
.acc-empty-sub { margin-top: 7px; font-size: 14px; color: var(--gray-600); }
.acc-empty-btn { display: inline-block; margin-top: 20px; background: var(--accent); color: #fff; border-radius: 100px; padding: 11px 24px; font-size: 14px; font-weight: 600; text-decoration: none; }
.acc-empty-btn:hover { background: var(--accent-hover); }

/* settings */
.acc-set { display: flex; flex-direction: column; gap: 24px; }
.acc-set-section { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 26px 28px; }
.acc-set-shead { margin-bottom: 20px; }
.acc-set-stitle { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink-900); }
.acc-set-stitle::before { content: ""; width: 22px; height: 4px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
.acc-set-sdesc { margin-top: 5px; padding-left: 33px; font-size: 13px; color: var(--gray-600); }
.acc-set-body { display: flex; flex-direction: column; gap: 18px; }
.acc-field { display: flex; flex-direction: column; gap: 7px; }
.acc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.acc-field label { font-size: 13px; font-weight: 600; color: var(--ink-900); }
/* avatar upload / color picker */
.acc-avatar-row { display: flex; align-items: center; gap: 20px; }
.acc-avatar { width: 76px; height: 76px; border-radius: 100px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 30px; }
.acc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc-avatar-ctrl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.acc-avatar-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acc-avatar-upload { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; border-radius: 100px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.acc-avatar-upload:hover { background: var(--accent-hover); }
.acc-avatar-upload .ic-up { display: flex; }
.acc-avatar-remove { background: none; border: 1px solid var(--gray-200); border-radius: 100px; padding: 9px 16px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--ink-700); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.acc-avatar-remove:hover { border-color: var(--accent); color: var(--accent); }
.acc-avatar-colors { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.acc-avatar-clbl { font-size: 12.5px; color: var(--gray-600); }
.acc-swatches { display: flex; gap: 8px; }
.acc-swatch { width: 28px; height: 28px; border-radius: 100px; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform .12s ease; position: relative; }
.acc-swatch:hover { transform: scale(1.1); }
.acc-swatch.on { border-color: var(--ink-900); }
.acc-swatch.on::after { content: ""; position: absolute; inset: 0; border-radius: 100px; border: 2px solid #fff; }
.acc-avatar-hint { font-size: 12px; color: var(--gray-500); }
/* email confirm flow */
.acc-email-view { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 11px 14px; }
.acc-email-val { font-size: 14.5px; color: var(--ink-900); font-weight: 600; }
.acc-email-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #0e7c66; background: rgba(14,124,102,.1); border-radius: 100px; padding: 3px 10px; }
.acc-email-badge .ic-ok { display: flex; }
.acc-email-change { margin-left: auto; background: none; border: none; padding: 0; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--accent); cursor: pointer; }
.acc-email-change:hover { text-decoration: underline; }
.acc-email-edit { display: flex; flex-direction: column; gap: 10px; }
.acc-email-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.acc-email-send { background: var(--cta); color: #fff; border: none; border-radius: 100px; padding: 10px 20px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-cta); transition: background .15s ease; }
.acc-email-send:hover { background: var(--cta-hover); }
.acc-email-cancel { background: none; border: 1px solid var(--gray-200); border-radius: 100px; padding: 10px 18px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink-700); cursor: pointer; }
.acc-email-cancel:hover { border-color: var(--gray-400); }
.acc-email-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--gray-500); }
.acc-email-pending { display: flex; align-items: flex-start; gap: 11px; background: rgba(217,136,26,.08); border: 1px solid rgba(217,136,26,.28); border-radius: 10px; padding: 13px 15px; }
.acc-email-pending .ic-clock { display: flex; color: #b9760f; flex-shrink: 0; margin-top: 1px; }
.acc-email-pending-text { font-size: 13.5px; line-height: 1.5; color: var(--ink-700); }
.acc-email-pending-text b { color: var(--ink-900); }
.acc-email-pending-acts { display: block; margin-top: 6px; font-size: 13px; color: var(--gray-500); }
.acc-email-pending-acts button { background: none; border: none; padding: 0; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; }
.acc-email-pending-acts button:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .acc-avatar-row { flex-direction: column; align-items: flex-start; gap: 14px; }
}
.acc-input { width: 100%; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 14px; font-family: var(--font-sans); font-size: 14.5px; color: var(--ink-900); outline: none; transition: border-color .15s ease; }
.acc-input:focus { border-color: var(--accent); }
textarea.acc-input { resize: vertical; min-height: 84px; line-height: 1.5; }
.acc-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.acc-toggle-text b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink-900); }
.acc-toggle-text span { display: block; margin-top: 2px; font-size: 13px; color: var(--gray-600); line-height: 1.45; }
.switch { position: relative; flex-shrink: 0; width: 46px; height: 27px; display: inline-block; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-ui { position: absolute; inset: 0; background: var(--gray-200); border-radius: 100px; transition: background .18s ease; cursor: pointer; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 100px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s ease; }
.switch input:checked + .switch-ui { background: var(--accent); }
.switch input:checked + .switch-ui::after { transform: translateX(19px); }
.acc-set-divider { height: 1px; background: var(--border); }
.acc-set-foot { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.acc-set-save { background: var(--cta); color: #fff; border: none; border-radius: 100px; padding: 13px 30px; font-family: var(--font-sans); font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-cta); transition: background .15s ease, transform .1s ease; }
.acc-set-save:hover { background: var(--cta-hover); }
.acc-set-save:active { transform: translateY(1px) scale(.99); }
.acc-set-toast { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #0e7c66; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.acc-set-toast.show { opacity: 1; transform: none; }
.acc-set-danger { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.acc-set-danger-text { margin: 0; max-width: 52ch; font-size: 13px; line-height: 1.5; color: var(--gray-500); }
.acc-set-danger-btn { flex-shrink: 0; white-space: nowrap; background: none; border: none; padding: 4px 0; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--accent); cursor: pointer; border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.acc-set-danger-btn:hover { border-bottom-color: var(--accent); }
.acc-danger-btn { align-self: flex-start; white-space: nowrap; background: none; border: 1px solid var(--accent); color: var(--accent); border-radius: 100px; padding: 10px 20px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; }
.acc-danger-btn:hover { background: var(--accent); color: #fff; }

@media (max-width: 980px) {
  .acc-saved-grid { grid-template-columns: repeat(2, 1fr); }
  .acc-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .acc-wrap { grid-template-columns: 1fr; gap: 0; padding-top: 26px; }
  .acc-side { position: static; margin-bottom: 28px; }
  .acc-card { display: flex; align-items: center; gap: 16px; text-align: left; padding: 16px 18px; }
  .acc-card-av { margin: 0; width: 56px; height: 56px; }
  .acc-card-name { margin-top: 0; }
  .acc-card-status { margin: 4px 0 0; }
  .acc-card-joined, .acc-card-edit { display: none; }
  .acc-nav { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .acc-logout { margin-top: 4px; }
}
@media (max-width: 560px) {
  .acc-hero { flex-direction: column; text-align: center; padding: 26px 20px; }
  .acc-hero-edit { width: 100%; justify-content: center; }
  .acc-status { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; }
  .acc-card-edit { margin-top: 12px; }
  .acc-rung-name { font-size: 10px; }
  .acc-saved-grid { grid-template-columns: 1fr; }
  .acc-lib-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .acc-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .acc-resume-card { flex-direction: column; align-items: stretch; }
  .acc-resume-img { width: 100%; aspect-ratio: 16/9; }
  .acc-field-row { grid-template-columns: 1fr; }
  .acc-nav { grid-template-columns: 1fr; }
}

/* ============ 404 ============ */
.nf { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 84px 24px 96px; color: #fff; background-color: var(--walnut-900); background-image: linear-gradient(rgba(18,10,5,.72), rgba(18,10,5,.72)), url(assets/bg-wood.jpg); }
.nf-inner { max-width: 760px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.nf-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 7px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-pill); white-space: nowrap; }
.nf-num { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 28px 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 188px; line-height: .9; color: #fff; letter-spacing: -.02em; }
.nf-enso { display: inline-flex; align-items: center; justify-content: center; width: .86em; height: .86em; }
.nf-enso svg { width: 100%; height: 100%; display: block; transform: rotate(-32deg); }
.nf-title { margin: 30px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.14; color: #fff; text-wrap: balance; }
.nf-lede { margin: 20px auto 0; max-width: 516px; font-size: 17px; line-height: 1.62; color: var(--on-dark-muted); text-wrap: pretty; }
.nf-card { margin-top: 34px; width: 100%; max-width: 540px; text-align: left; background: rgba(255,255,255,.04); border: 1px solid var(--walnut-600); border-radius: var(--r-md); padding: 24px 26px; }
.nf-card-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tan-link); margin-bottom: 16px; }
.nf-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.nf-reasons li { display: flex; align-items: flex-start; gap: 13px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.86); }
.nf-reasons .emo { flex-shrink: 0; font-size: 18px; line-height: 1.35; }
.nf-cta { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.nf-home { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--cta); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; padding: 15px 30px; border-radius: var(--r-pill); box-shadow: var(--shadow-cta); transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.nf-home:hover { background: var(--cta-hover); box-shadow: 0 14px 34px rgba(255,108,36,.46); transform: translateY(-1px); }
.nf-ghost { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--on-dark-muted); font-size: 16px; font-weight: 600; text-decoration: none; padding: 15px 26px; border-radius: var(--r-pill); border: 1px solid var(--walnut-600); transition: border-color .18s ease, color .18s ease; }
.nf-ghost:hover { border-color: rgba(255,255,255,.55); color: #fff; }
.nf-search { margin-top: 24px; width: 100%; max-width: 420px; }
.nf-search-box { display: flex; align-items: center; gap: 11px; background: rgba(0,0,0,.22); border: 1px solid var(--walnut-600); border-radius: var(--r-pill); padding: 14px 20px; transition: border-color .15s ease; }
.nf-search-box:focus-within { border-color: var(--tan-link); }
.nf-search-box .ic-search { color: var(--tan-link); display: flex; }
.nf-search-box input { flex: 1; background: none; border: none; outline: none; font-family: var(--font-sans); font-size: 15px; color: #fff; min-width: 0; }
.nf-search-box input::placeholder { color: var(--on-dark-muted); opacity: 1; }
@media (max-width: 560px) {
  .nf { padding: 56px 20px 64px; }
  .nf-num { font-size: 132px; gap: 4px; }
  .nf-cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; }
}

/* ============ LIBRARY (book / movie shelves) ============ */
.lib { background-color: var(--walnut-900); background-image: linear-gradient(rgba(18,10,5,.66), rgba(18,10,5,.72)), url(assets/bg-wood.jpg); }
.lib-wrap { max-width: 1200px; margin: 0 auto; padding: 44px 32px 56px; }
.lib-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.lib-titleblock { color: #fff; }
.lib-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tan-link); }
.lib-h1 { margin: 12px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; color: #fff; }
.lib-sub { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--on-dark-muted); max-width: 560px; }
.lib-sub b { color: #fff; }
.lib-filters { display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0 38px; }
.lib-filter { background: rgba(255,255,255,.06); border: 1px solid var(--walnut-600); border-radius: var(--r-pill); padding: 8px 16px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--on-dark-muted); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.lib-filter:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.lib-filter.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); column-gap: 0; row-gap: 0; padding: 0 40px; background-image: repeating-linear-gradient(180deg, transparent 0, transparent 230px, rgba(255,242,214,.85) 230px, rgba(255,242,214,.85) 233px, #bb8c57 233px, #9a6c3d 240px, #6f4a28 249px, #4a2f18 252px, rgba(0,0,0,.34) 252px, rgba(0,0,0,0) 266px, transparent 266px, transparent 380px); }
.lib-book { display: flex; flex-direction: column; text-decoration: none; height: 380px; min-width: 0; }
.lib-cover { position: relative; height: 230px; margin: 0 18px; display: flex; align-items: flex-end; justify-content: center; border-radius: 3px 3px 1px 1px; overflow: hidden; transition: transform .2s ease; z-index: 2; }
.lib-cover-frame { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; text-align: center; padding: 24px 16px; border: 1px solid; border-radius: inherit; }
.lib-cover-author { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lib-cover-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.18; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.lib-cap { margin-top: 22px; height: 74px; padding: 12px 16px 0; min-width: 0; overflow: hidden; }
.lib-title { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 14px; line-height: 1.3; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-author { display: block; margin-top: 3px; font-size: 12.5px; color: var(--on-dark-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-meta { display: flex; align-items: center; gap: 13px; margin-top: 8px; font-size: 12px; color: var(--on-dark-faint); }
.lib-meta .mt { display: inline-flex; align-items: center; gap: 5px; }
.lib-meta .mt svg { opacity: .8; }
.lib-book:hover .lib-cover { transform: translateY(-9px); }
.lib-book:hover .lib-title { color: var(--tan-link); }

.lib-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 0; }
.lib .lib-wrap:last-child { padding-top: 6px; padding-bottom: 46px; }
.lib-pager .pg, .lib-pager .pg-arrow { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 100px; border: 1px solid var(--walnut-600); background: rgba(255,255,255,.03); font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--on-dark-muted); text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; }
.lib-pager .pg:hover, .lib-pager .pg-arrow:not(.disabled):hover { color: #fff; border-color: var(--tan-link); background: rgba(255,255,255,.08); }
.lib-pager .pg.cur { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(202,54,39,.4); }
.lib-pager .pg.cur:hover { background: var(--accent); color: #fff; }
.lib-pager .pg-arrow { font-size: 20px; line-height: 1; }
.lib-pager .pg-arrow.disabled { opacity: .35; cursor: default; }
.lib-pager .pg-dots { color: var(--on-dark-faint); padding: 0 2px; letter-spacing: .05em; }
.lib-pager .pg-next { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 20px; border-radius: 100px; background: rgba(255,255,255,.05); border: 1px solid var(--walnut-600); font-family: var(--font-sans); font-size: 14.5px; font-weight: 700; color: var(--tan-link); text-decoration: none; margin-left: 4px; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.lib-pager .pg-next span { font-size: 19px; line-height: 1; transition: transform .15s ease; }
.lib-pager .pg-next:hover { color: #fff; border-color: var(--tan-link); background: rgba(255,255,255,.1); }
.lib-pager .pg-next:hover span { transform: translateX(3px); }

@media (max-width: 520px) {
  .lib-wrap { padding: 28px 16px 40px; }
  .lib-grid { grid-template-columns: repeat(2, 1fr); padding: 0 12px; }
  .lib-cap { padding: 12px 10px 0; }
}

/* ============ BOOK SINGLE (book review page) ============ */
.book-hero { display: flex; gap: 40px; align-items: flex-start; margin-bottom: 14px; }
.book-cover { position: relative; flex-shrink: 0; width: 232px; aspect-ratio: 2/3; border-radius: 4px; overflow: hidden; box-shadow: 0 18px 40px -16px rgba(40,22,8,.5); display: flex; align-items: flex-start; justify-content: center; }
.book-cover-frame { position: absolute; inset: 0; border: 1px solid; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; padding: 32px 22px; border-radius: inherit; }
.book-cover-author { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; }
.book-cover-title { font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1.16; }
.book-hero-main { flex: 1; min-width: 0; padding-top: 4px; }
.book-cat { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.book-title { margin: 12px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.01em; color: var(--ink-900); text-wrap: balance; }
.book-author-line { margin-top: 10px; font-size: 16px; color: var(--gray-600); }
.book-author-line b { color: var(--ink-900); font-weight: 700; }
.book-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; font-size: 13px; color: var(--gray-500); }
.book-meta .m { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.book-meta .m svg { color: var(--gray-400); }
.book-meta .dot { width: 3px; height: 3px; border-radius: 100px; background: var(--gray-300); }
.book-rating { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.book-stars { display: inline-flex; gap: 2px; color: var(--cta); }
.book-rating-lbl { font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
.book-verdict { margin-top: 18px; background: var(--paper); border-radius: var(--r-md); padding: 16px 18px; display: flex; gap: 12px; }
.book-verdict-bar { width: 4px; flex-shrink: 0; border-radius: 2px; background: var(--accent); }
.book-verdict-text { font-size: 15px; line-height: 1.55; color: var(--ink-700); }
.book-verdict-text b { color: var(--accent); }
.book-hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }

.book-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin: 0 0 8px; }
.book-fact { background: var(--white); padding: 14px 16px; }
.book-fact-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-400); }
.book-fact-val { margin-top: 4px; font-size: 14.5px; font-weight: 600; color: var(--ink-900); }

.book-ideas { margin: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 22px 0; }
.book-ideas-lbl { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink-900); margin-bottom: 16px; }
.book-ideas-lbl .bar { width: 22px; height: 4px; background: var(--accent); border-radius: 2px; }
.book-ideas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.book-ideas li { display: flex; align-items: flex-start; gap: 13px; font-size: 16px; line-height: 1.55; color: var(--ink-700); }
.book-ideas .n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 100px; background: var(--accent); color: #fff; font-family: var(--font-sans); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.book-where { margin: 28px 0; background: var(--paper); border-radius: 14px; padding: 22px 24px; }
.book-where-lbl { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink-900); }
.book-where-sub { margin-top: 4px; font-size: 13.5px; color: var(--gray-600); }
.book-where-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.book-where-link { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 100px; padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--ink-900); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.book-where-link:hover { border-color: var(--accent); color: var(--accent); }
.book-where-link svg { color: var(--gray-400); }

.book-rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.book-rel { text-decoration: none; }
.book-rel-cover { position: relative; aspect-ratio: 2/3; border-radius: 4px; overflow: hidden; box-shadow: 0 10px 22px -10px rgba(40,22,8,.4); display: flex; align-items: flex-start; justify-content: center; transition: transform .2s ease; }
.book-rel:hover .book-rel-cover { transform: translateY(-5px); }
.book-rel-frame { position: absolute; inset: 0; border: 1px solid; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; padding: 22px 16px; }
.book-rel-frame .a { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.book-rel-frame .t { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.18; }
.book-rel-title { display: block; margin-top: 12px; font-weight: 600; font-size: 14.5px; line-height: 1.3; color: var(--ink-900); }
.book-rel:hover .book-rel-title { color: var(--accent); }
.book-rel-author { display: block; margin-top: 3px; font-size: 12.5px; color: var(--gray-500); }

@media (max-width: 720px) {
  .book-hero { flex-direction: column; align-items: center; text-align: center; gap: 24px; }
  .book-cover { width: 180px; }
  .book-meta, .book-rating, .book-hero-actions { justify-content: center; }
  .book-verdict { text-align: left; }
  .book-facts { grid-template-columns: 1fr 1fr; }
  .book-rel-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ BOOK PRODUCT CARD ============ */
.bookp { background: var(--white); }
.bookp-wrap { max-width: 1120px; margin: 0 auto; padding: 30px 32px 8px; }
.bookp-top { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 48px; align-items: start; }
.bookp-left { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.bookp-cover { position: relative; width: 100%; aspect-ratio: 2/3; border-radius: 5px; overflow: hidden; box-shadow: 0 22px 48px -18px rgba(40,22,8,.55); display: flex; align-items: flex-start; justify-content: center; }
.bookp-cover-frame { position: absolute; inset: 0; border: 1px solid; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; padding: 38px 26px; }
.bookp-cover-author { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; }
.bookp-cover-title { font-family: var(--font-display); font-weight: 700; font-size: 27px; line-height: 1.15; }
.bookp-buy { border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.bookp-buy-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink-900); margin-bottom: 4px; }
.bookp-buy-sub { font-size: 12.5px; color: var(--gray-500); margin-bottom: 14px; line-height: 1.45; }
.bookp-format { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); text-decoration: none; }
.bookp-format-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--paper); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bookp-format-main { flex: 1; min-width: 0; }
.bookp-format-name { display: block; font-size: 14px; font-weight: 700; color: var(--ink-900); }
.bookp-format-where { display: block; font-size: 12.5px; color: var(--gray-500); margin-top: 1px; }
.bookp-format-arrow { color: var(--gray-300); transition: transform .15s ease, color .15s ease; }
.bookp-format:hover .bookp-format-name { color: var(--accent); }
.bookp-format:hover .bookp-format-arrow { color: var(--accent); transform: translateX(3px); }
.bookp-actions { display: flex; gap: 10px; }
.bookp-save { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--cta); color: #fff; border: none; border-radius: 100px; padding: 13px 18px; font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-cta); transition: background .15s ease; }
.bookp-save:hover { background: var(--cta-hover); }
.bookp-save.on { background: var(--accent); box-shadow: none; }
.bookp-ghost { width: 46px; height: 46px; flex-shrink: 0; border-radius: 100px; border: 1px solid var(--gray-200); background: var(--white); color: var(--ink-700); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.bookp-ghost:hover { border-color: var(--accent); color: var(--accent); }

.bookp-cat { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.bookp-title { margin: 12px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.01em; color: var(--ink-900); text-wrap: balance; }
.bookp-author { margin-top: 10px; font-size: 16.5px; color: var(--gray-600); }
.bookp-author a { color: var(--accent); text-decoration: none; font-weight: 600; }
.bookp-author a:hover { text-decoration: underline; }
.bookp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bookp-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--paper); border-radius: 100px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; color: var(--ink-700); white-space: nowrap; }
.bookp-chip.accent { background: rgba(202,54,39,.08); color: var(--accent); }
.bookp-ratingrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.bookp-stars { display: inline-flex; gap: 2px; color: var(--cta); }
.bookp-rate-num { font-size: 15px; font-weight: 700; color: var(--ink-900); }
.bookp-rate-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gray-500); }
.bookp-rate-meta svg { color: var(--gray-400); }
.bookp-rate-dot { width: 3px; height: 3px; border-radius: 100px; background: var(--gray-300); }
.bookp-verdict { margin-top: 20px; background: var(--paper); border-radius: var(--r-md); padding: 18px 20px; display: flex; gap: 13px; }
.bookp-verdict-bar { width: 4px; flex-shrink: 0; border-radius: 2px; background: var(--accent); }
.bookp-verdict-text { font-size: 15.5px; line-height: 1.58; color: var(--ink-700); }
.bookp-verdict-text b { color: var(--accent); }
.bookp-section { margin-top: 30px; }
.bookp-section h2 { font-family: var(--font-display); font-weight: 700; font-size: 27px; line-height: 1.25; color: var(--ink-900); margin: 0 0 14px; }
.bookp-section p { font-size: 18px; line-height: 1.75; color: var(--ink-900); margin: 0 0 1.15em; text-wrap: pretty; }
.bookp-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.bookp-spec { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.bookp-spec .k { color: var(--gray-500); }
.bookp-spec .v { color: var(--ink-900); font-weight: 600; text-align: right; }

@media (max-width: 860px) {
  .bookp-top { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 680px) {
  .bookp-wrap { padding: 22px 18px 0; }
  .bookp-top { grid-template-columns: 1fr; gap: 26px; }
  .bookp-left { position: static; flex-direction: column; align-items: stretch; }
  .bookp-cover { width: 200px; margin: 0 auto; }
  .bookp-specs { grid-template-columns: 1fr; }
}