/* Articles module — shares the main site's design tokens */
.article-home-section { padding-top: 2.5rem; padding-bottom: 2.75rem; }
.article-home-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.article-home-eyebrow { color:var(--gold-tx); font-size:11.5px; font-weight:700; display:block; margin-bottom:5px; }
.article-home-title { font-size:25px; font-weight:800; letter-spacing:-.35px; }
.article-home-title span { color:var(--gold-tx); }
.hscroll-wrap { max-width:1180px; margin:0 auto; }
.hscroll { display:flex; gap:12px; overflow-x:auto; padding:4px 2px 15px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.hscroll::-webkit-scrollbar { display:none; }
.hscroll .rcard { flex:0 0 155px; scroll-snap-align:start; }
.home-articles-cta { width:100%; display:flex; align-items:center; justify-content:center; gap:9px; margin-top:4px; background:linear-gradient(135deg,var(--gold-h),var(--gold)); color:#100C02; font-weight:800; font-size:14px; padding:15px; border-radius:var(--rl); border:0; cursor:pointer; box-shadow:0 6px 22px rgba(200,154,10,.2); transition:.2s; }
.home-articles-cta:hover { transform:translateY(-2px); filter:brightness(1.06); }

.article-page { max-width:1180px; margin:0 auto; padding:42px 20px 70px; }
.article-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:21px; flex-wrap:wrap; }
.article-page-sub { color:var(--gold-tx); font-size:11.5px; font-weight:700; margin-bottom:4px; }
.article-page-title { font-size:27px; font-weight:800; letter-spacing:-.35px; }
.article-page-title span { color:var(--gold-tx); }
.article-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.article-chip { border:1px solid var(--border2); background:var(--surf); color:var(--text2); padding:7px 15px; border-radius:999px; font-size:12px; cursor:pointer; transition:.18s; }
.article-chip:hover { color:var(--gold-tx); border-color:var(--gold-mu); }
.article-chip.on { background:linear-gradient(135deg,var(--gold-h),var(--gold)); color:#100C02; border-color:var(--gold); font-weight:800; }
.reel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:14px; }

.rcard { position:relative; aspect-ratio:9/16; border-radius:var(--rl); overflow:hidden; border:1px solid var(--border); background:var(--card) center/cover; cursor:pointer; transition:transform .3s cubic-bezier(.34,1.2,.64,1),border-color .3s,box-shadow .3s; }
.rcard:hover { transform:translateY(-6px); border-color:var(--gold-mu); box-shadow:0 16px 34px -14px rgba(0,0,0,.65),0 0 0 1px rgba(200,154,10,.15); }
.rcard > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.6,.2,1),filter .5s; }
.rcard:hover > img { transform:scale(1.065); filter:brightness(.82) saturate(1.05); }
.rcard::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,6,10,0) 28%,rgba(7,6,10,.48) 61%,rgba(7,6,10,.96) 100%); pointer-events:none; }
.rc-badge { position:absolute; top:10px; right:10px; z-index:2; width:28px; height:28px; border-radius:50%; background:rgba(7,6,10,.56); backdrop-filter:blur(7px); border:1px solid rgba(240,200,64,.42); display:flex; align-items:center; justify-content:center; color:var(--gold-s); font-size:12px; }
.rc-lock { position:absolute; top:46px; right:10px; z-index:2; padding:4px 8px; border-radius:999px; color:#fff; background:rgba(7,6,10,.7); backdrop-filter:blur(7px); border:1px solid rgba(240,200,64,.38); font-size:9.5px; font-weight:750; }
.rc-cat { position:absolute; top:10px; left:10px; z-index:2; font-size:10px; font-weight:700; color:var(--gold-tx); background:rgba(7,6,10,.57); backdrop-filter:blur(7px); border:1px solid var(--border2); padding:4px 9px; border-radius:999px; max-width:70%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-dur { position:absolute; bottom:72px; left:10px; z-index:2; font-size:10px; font-weight:600; color:#fff; background:rgba(7,6,10,.6); backdrop-filter:blur(6px); padding:3px 8px; border-radius:6px; }
.rc-body { position:absolute; right:0; left:0; bottom:0; z-index:2; padding:13px 11px 12px; }
.rc-title { font-size:12.8px; font-weight:750; color:#fff; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:8px; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.rc-meta { display:flex; align-items:center; gap:7px; font-size:10.5px; color:rgba(237,232,216,.76); white-space:nowrap; overflow:hidden; }
.rc-avatar { width:16px; height:16px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.3); flex-shrink:0; }
.rcard.is-text { background:linear-gradient(160deg,#232030,var(--surf) 75%); }
.rcard.is-text::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 25% 15%,rgba(200,154,10,.17),transparent 55%),repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 2px,transparent 2px 6px); z-index:1; }
.txt-fill { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px 18px 70px; text-align:center; }
.txt-mark { font-family:Georgia,serif; color:var(--gold-mu); font-size:30px; line-height:1; margin-bottom:10px; }
.txt-fill p { color:var(--gold-tx); font-size:13.2px; line-height:1.9; font-weight:750; }
.article-empty { grid-column:1/-1; padding:4rem 1rem; text-align:center; color:var(--muted); border:1px dashed var(--border2); border-radius:var(--rl); background:var(--surf); }

.art-screen { position:fixed; inset:0; z-index:1500; display:none; overflow-y:auto; background:var(--bg); overscroll-behavior:contain; }
.art-screen.open { display:block; animation:articleScreenIn .3s cubic-bezier(.2,.7,.3,1); }
@keyframes articleScreenIn { from{opacity:0;transform:scale(.985)} to{opacity:1;transform:scale(1)} }
.art-progress { position:fixed; top:0; right:0; left:0; height:2px; z-index:1510; background:transparent; }
.art-progress-bar { width:0; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-s)); }
.art-top { position:sticky; top:0; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; background:rgba(7,6,10,.77); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.art-back { display:flex; align-items:center; gap:7px; color:var(--text2); font-size:12.5px; border:1px solid var(--border2); background:var(--surf); padding:7px 14px; border-radius:999px; cursor:pointer; }
.art-back:hover { color:var(--gold-tx); border-color:var(--gold-mu); }
.art-actions { display:flex; gap:8px; }
.art-icon-btn { width:35px; height:35px; border-radius:50%; border:1px solid var(--border2); background:var(--surf); color:var(--text2); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.art-icon-btn:hover { color:var(--gold-tx); border-color:var(--gold-mu); }
.art-hero { position:relative; max-width:780px; margin:0 auto; aspect-ratio:16/9; overflow:hidden; background:#000; }
.art-hero img,.art-hero video { width:100%; height:100%; display:block; object-fit:cover; }
.art-hero::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(7,6,10,.05),rgba(7,6,10,0) 50%,var(--bg) 100%); }
.art-hero.has-video::after { display:none; }
.art-text-hero { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:2rem; text-align:center; background:radial-gradient(circle at 25% 15%,rgba(200,154,10,.18),transparent 50%),linear-gradient(160deg,#252131,#0d0b12); color:var(--gold-tx); font-size:clamp(21px,4vw,34px); font-weight:800; line-height:1.8; }
.art-vlen { position:absolute; left:14px; bottom:14px; z-index:3; background:rgba(7,6,10,.65); color:#fff; padding:5px 10px; border-radius:7px; font-size:11px; }
.art-body { max-width:710px; margin:-30px auto 60px; padding:0 22px; position:relative; z-index:3; }
.art-cat-row { display:flex; align-items:center; gap:8px; margin-bottom:13px; font-size:12px; }
.art-cat { color:var(--gold-tx); font-weight:700; }
.art-cat-dot { width:3px; height:3px; border-radius:50%; background:var(--muted); }
.art-read-time { color:var(--text2); }
.art-title { font-size:clamp(22px,4vw,29px); line-height:1.55; font-weight:850; letter-spacing:-.4px; margin-bottom:20px; }
.art-author-row { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:15px 0; margin-bottom:25px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.art-author { display:flex; align-items:center; gap:11px; }
.art-author img,.art-author-fallback { width:42px; height:42px; border-radius:50%; object-fit:cover; border:1.5px solid var(--gold-mu); }
.art-author-fallback { display:flex;align-items:center;justify-content:center;background:var(--surf);color:var(--gold-tx);font-weight:800; }
.art-author-name { font-size:13.5px; font-weight:750; }
.art-author-role { color:var(--text2); font-size:11.5px; margin-top:1px; }
.art-meta-mini { display:flex; align-items:center; gap:13px; font-size:11.5px; color:var(--text2); }
.art-excerpt { font-size:15.5px; color:var(--text); font-weight:650; line-height:2; margin-bottom:21px; }
.art-text { color:var(--text2); font-size:15.2px; line-height:2.08; margin-bottom:20px; white-space:pre-wrap; }
.article-gallery { display:grid; gap:12px; margin:25px 0; }
.article-gallery img { width:100%; display:block; border-radius:var(--rl); border:1px solid var(--border); }
.article-content-block { margin:28px 0; }
.article-block-image,.article-block-video { width:100%; display:block; max-height:680px; object-fit:contain; border-radius:var(--rl); border:1px solid var(--border); background:#080808; box-shadow:0 12px 35px rgba(0,0,0,.18); }
.protected-article-media { -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }
.article-block-copy { margin-top:18px; }
.article-block-copy .art-text:last-child { margin-bottom:0; }
.article-block-audio { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px 14px; padding:18px; border-radius:var(--rl); border:1px solid var(--border2); background:linear-gradient(135deg,var(--surf),rgba(200,154,10,.08)); }
.article-block-audio-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:var(--gold-dim); color:var(--gold-tx); font-size:23px; }
.article-block-audio-info { display:flex; flex-direction:column; gap:3px; }
.article-block-audio-info strong { color:var(--text); font-size:13px; }
.article-block-audio-info span { color:var(--muted); font-size:11px; }
.article-block-audio audio { grid-column:1/-1; width:100%; height:42px; }
.art-tags { display:flex; gap:8px; flex-wrap:wrap; margin:30px 0 38px; }
.art-tag { font-size:11.5px; color:var(--text2); border:1px solid var(--border2); background:var(--surf); padding:6px 12px; border-radius:999px; }
.art-related-hd { font-size:15.5px; font-weight:750; margin-bottom:14px; }
.art-related { display:grid; grid-template-columns:repeat(auto-fill,minmax(135px,1fr)); gap:10px; }
body.article-open { overflow:hidden; }

.article-cover-box { width:100%; max-width:220px; aspect-ratio:9/12; border:1.5px dashed var(--border2); border-radius:var(--rl); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; background:var(--surf); overflow:hidden; position:relative; transition:.2s; }
.article-cover-box:hover { border-color:var(--gold-mu); }
.article-cover-box img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.article-cover-empty { color:var(--muted); text-align:center; padding:15px; font-size:11.5px; }
.article-type-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.article-type-tab { flex:1; min-width:95px; text-align:center; padding:11px 9px; border-radius:var(--r); border:1px solid var(--border2); background:var(--surf); color:var(--text2); font-size:12px; font-weight:700; cursor:pointer; }
.article-type-tab.on { background:linear-gradient(135deg,var(--gold-h),var(--gold)); border-color:var(--gold); color:#100C02; }
.article-mixed-note { display:flex; align-items:center; gap:10px; padding:12px 14px; margin-bottom:14px; border:1px solid rgba(200,154,10,.25); border-radius:var(--r); background:var(--gold-dim); }
.article-mixed-note>span { color:var(--gold-tx); font-size:25px; }
.article-mixed-note>div { display:flex; flex-direction:column; gap:3px; }
.article-mixed-note strong { color:var(--text); font-size:12.5px; }
.article-mixed-note small { color:var(--text2); font-size:10.5px; line-height:1.7; }
.article-builder-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 12px; }
.article-builder-head>div { display:flex; flex-direction:column; gap:3px; }
.article-builder-head strong { color:var(--text); font-size:14px; }
.article-builder-head span { color:var(--muted); font-size:11px; }
.article-builder-block { padding:16px; margin-bottom:14px; border:1px solid var(--border2); border-radius:var(--rl); background:var(--surf); box-shadow:0 7px 22px rgba(0,0,0,.08); }
.article-builder-block-top { display:flex; align-items:center; gap:8px; margin-bottom:13px; }
.article-builder-block-top>strong { font-size:12.5px; color:var(--text); }
.article-builder-number { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; color:#100C02; background:var(--gold); font-size:11px; font-weight:900; }
.article-builder-actions { display:flex; gap:5px; margin-right:auto; }
.article-builder-actions button { width:29px; height:29px; border:1px solid var(--border2); border-radius:8px; background:var(--bg); color:var(--text2); cursor:pointer; }
.article-builder-actions button:hover:not(:disabled) { border-color:var(--gold); color:var(--gold-tx); }
.article-builder-actions button:disabled { opacity:.3; cursor:default; }
.article-builder-actions button.is-danger:hover { border-color:#F87171; color:#F87171; }
.article-builder-media-row { display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:8px; align-items:center; }
.article-builder-text { margin-top:11px; resize:vertical; line-height:1.9; }
.article-builder-status { min-height:16px; margin-top:5px; color:var(--gold-tx); font-size:10.5px; }
.upload-progress { width:100%; padding:8px 0 3px; }
.upload-progress-meta { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; margin-bottom:6px; font-size:10.5px; }
.upload-progress-meta strong { color:var(--gold-tx); font-size:12px; }
.upload-progress-meta span { color:var(--text2); }
.upload-progress-meta small { color:var(--muted); direction:rtl; }
.upload-progress-track { height:7px; overflow:hidden; border-radius:999px; background:var(--bg); border:1px solid var(--border); }
.upload-progress-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold),var(--gold-s)); box-shadow:0 0 10px rgba(200,154,10,.35); transition:width .18s ease; }
.article-builder-preview { display:block; width:100%; max-height:280px; object-fit:contain; margin-top:8px; border-radius:10px; background:#080808; border:1px solid var(--border); }
.article-builder-audio { width:100%; height:40px; margin-top:8px; }
.article-lock-toggle { display:flex; align-items:flex-start; gap:11px; margin:4px 0 18px; padding:14px; border:1px solid var(--border2); border-radius:var(--r); background:var(--surf); cursor:pointer; transition:.2s; }
.article-lock-toggle:hover { border-color:var(--gold-mu); }
.article-lock-toggle input { position:absolute; opacity:0; pointer-events:none; }
.article-lock-check { width:23px; height:23px; flex:0 0 23px; display:grid; place-items:center; border:1.5px solid var(--border2); border-radius:7px; color:transparent; background:var(--bg); font-size:13px; font-weight:900; transition:.2s; }
.article-lock-toggle input:checked + .article-lock-check { color:#100C02; border-color:var(--gold); background:var(--gold); }
.article-lock-toggle>span:last-child { display:flex; flex-direction:column; gap:4px; }
.article-lock-toggle strong { color:var(--text); font-size:12.5px; }
.article-lock-toggle small { color:var(--muted); font-size:10.5px; line-height:1.8; }
.cat-chip-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1rem; }
.cat-chip { display:flex; align-items:center; gap:7px; padding:6px 9px 6px 12px; border-radius:999px; background:var(--surf); border:1px solid var(--border2); font-size:12px; color:var(--text2); }
.cat-chip-dot { width:8px; height:8px; border-radius:50%; }
.cat-chip-x { border:0; background:none; color:var(--muted); cursor:pointer; font:inherit; }
.cat-chip-x:hover { color:#F87171; }
.article-admin-table { width:100%; border-collapse:collapse; font-size:12.5px; min-width:690px; }
.article-admin-table th { text-align:right; color:var(--muted); font-weight:500; padding:10px 12px; background:var(--surf); }
.article-admin-table td { padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.article-admin-cover { width:38px; height:52px; border-radius:6px; object-fit:cover; background:var(--surf); flex-shrink:0; }
.article-admin-title { display:flex; align-items:center; gap:10px; min-width:220px; }
.article-admin-badge { font-size:10.5px; padding:3px 9px; border-radius:999px; background:var(--gold-dim); color:var(--gold-tx); border:1px solid rgba(200,154,10,.2); white-space:nowrap; }

@media(min-width:640px){ .hscroll .rcard{flex-basis:172px} }
@media(max-width:820px){ .article-page{padding-top:30px}.art-body{max-width:100%;padding:0 16px}.art-related{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){
  .article-page{padding:26px 16px 60px}.article-page-title{font-size:22px}.article-filters{gap:6px;margin-bottom:18px}.article-chip{padding:6px 12px;font-size:11.5px}
  .reel-grid{grid-template-columns:repeat(2,1fr);gap:10px}.rc-title{font-size:11.8px}.rc-dur{bottom:66px}.hscroll .rcard{flex-basis:132px}
  .article-home-section{padding-top:2rem}.article-home-title{font-size:21px}.home-articles-cta{padding:14px;font-size:13px}
  .art-top{padding:10px 13px}.art-back{font-size:11.5px;padding:6px 11px}.art-body{margin-top:-20px;padding:0 14px}.art-author-row{gap:10px}.art-text{font-size:14.5px}
  .article-cover-box{max-width:165px;margin:0 auto}.article-admin-table{font-size:11.5px}.article-admin-cover{width:31px;height:43px}
  .article-builder-head{align-items:flex-end}.article-builder-media-row{grid-template-columns:1fr}.article-builder-media-row .btn{width:100%}.article-builder-block{padding:12px}
  .article-block-audio{padding:14px}.article-content-block{margin:22px 0}
}
@media(max-width:400px){ .reel-grid{gap:8px}.rc-title{font-size:11px}.rc-meta{font-size:9.5px}.art-title{font-size:19px} }

@media(max-width:700px){#mob-nav-admin{overflow-x:auto;justify-content:flex-start;scrollbar-width:none}#mob-nav-admin::-webkit-scrollbar{display:none}#mob-nav-admin .mob-nav-item{min-width:64px;flex:0 0 64px}}