/* KooshaNews website — page-specific layout (composition only; tokens/components from the DS). */

main { padding-bottom: 24px; }
.sec { margin-top: 40px; }

/* Nav links */
.nav-link {
  position: relative; padding: 8px 12px; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600; color: var(--text-2);
  transition: color var(--t-fast) ease, background var(--t-fast) ease;
}
.nav-link:hover { color: var(--text-1); background: var(--surface); }
.nav-link::after {
  content: ""; position: absolute; inset-inline: 12px; bottom: 2px; height: 2px;
  background: var(--cat, var(--gold)); border-radius: 2px; transform: scaleX(0); transition: transform var(--t-base) var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); }

/* Hero */
.hero-grid { display: grid; grid-template-columns: 1.85fr 1fr; gap: 26px; }
.imp-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.imp-item:hover .imp-title { color: var(--gold); }
.imp-num { font-size: var(--t-h2); font-weight: 800; color: var(--line-2); line-height: 1; min-width: 30px; }
.imp-title { font-size: var(--t-h4); font-weight: 700; line-height: var(--lh-snug); color: var(--text-1); transition: color var(--t-fast) ease; }

/* Market watch */
.mw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* Rails */
.rail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* Ad slots */
.ad-slot {
  width: 100%; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, var(--bg-1), var(--bg-1) 10px, var(--bg-2) 10px, var(--bg-2) 20px);
  border: 1px dashed var(--line-2); border-radius: var(--r-md); margin-inline: auto;
}

/* Digest */
.digest-grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; }
.mostread { list-style: none; display: flex; flex-direction: column; }
.mr-item { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.mr-rank { font-size: var(--t-h3); font-weight: 800; color: var(--gold); min-width: 28px; }
.mr-title { flex: 1; font-size: var(--t-body); font-weight: 600; transition: color var(--t-fast) ease; }
.mr-item:hover .mr-title { color: var(--gold); }
.mr-views { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); color: var(--text-3); }

/* Video items */
.vid-item { display: flex; gap: 12px; align-items: center; }
.vid-thumb { position: relative; flex: 0 0 88px; height: 56px; border-radius: var(--r-sm); display: grid; place-items: center; overflow: hidden; }
.vid-dur { position: absolute; bottom: 4px; inset-inline-end: 5px; font-size: 10px; color: #fff; background: rgba(0,0,0,.6); padding: 1px 5px; border-radius: 3px; }
.vid-title { font-size: var(--t-sm); font-weight: 600; line-height: var(--lh-snug); }
.vid-item:hover .vid-title { color: var(--gold); }

/* Live */
.live-strip { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; }
.live-player { position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); display: grid; place-items: center; }
.play-fab { width: 72px; height: 72px; border-radius: 50%; background: var(--live); display: grid; place-items: center; box-shadow: var(--glow-live); transition: transform var(--t-base) var(--ease-out); }
.play-fab:hover { transform: scale(1.08); }
.live-caption { position: absolute; inset-inline: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 3px; z-index: 1; }
.live-caption b { font-size: var(--t-h4); }
.sched-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.sched-row:last-child { border-bottom: none; }

/* Support FAB */
.support-fab { position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 50; width: 56px; height: 56px; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; box-shadow: var(--glow-gold); transition: transform var(--t-base) var(--ease-out); }
.support-fab:hover { transform: scale(1.07); }

/* Responsive */
@media (max-width: 1000px) {
  .hero-grid, .live-strip { grid-template-columns: 1fr; }
  .mw-grid { grid-template-columns: repeat(2, 1fr); }
  .digest-grid { grid-template-columns: 1fr; }
  .rail-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .mw-grid, .rail-grid { grid-template-columns: 1fr; }
  header nav { display: none; }
}

/* ── Category blocks (sport / social / culture) ── */
.cat-blocks { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .cat-blocks{ grid-template-columns:1fr; } }
.cat-block-head { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.cat-dot { width:9px; height:9px; border-radius:50%; background:var(--cat); box-shadow:0 0 0 4px color-mix(in srgb,var(--cat) 20%,transparent); flex:0 0 auto; }
.cat-block-head h2 { color:var(--text-1); }
.cat-item { display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--line); text-decoration:none; color:var(--text-1); }
.cat-item:first-child { border-top:0; }
.cat-item:hover .cat-lead-title, .cat-item:hover .cat-row-title { color:var(--cat); }
.cat-lead-thumb { flex:0 0 84px; height:60px; border-radius:var(--r-sm); }
.cat-lead-title { font-weight:800; font-size:var(--t-h4); line-height:1.4; }
.cat-row-title { font-weight:600; font-size:var(--t-sm); line-height:1.6; }

/* ── Live playlist rows ── */
.pl-row { display:flex; align-items:center; gap:10px; width:100%; text-align:start; padding:9px 10px; border:0; border-radius:var(--r-sm); background:transparent; color:var(--text-1); cursor:pointer; }
.pl-row:hover { background:var(--surface-2); }
.pl-row.is-active { background:var(--gold-soft); }
.pl-row.is-active .pl-title { color:var(--gold); font-weight:700; }
.pl-ico { flex:0 0 18px; display:grid; place-items:center; color:var(--text-3); }
.pl-title { flex:1; font-size:var(--t-sm); line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Category / About / Contact pages ── */
.crumbs { display:flex; align-items:center; gap:7px; font-size:var(--t-xs); color:var(--text-3); padding:6px 0 4px; }
.crumbs a { color:var(--text-3); text-decoration:none; }
.crumbs a:hover { color:var(--gold); }
.cat-page-head { display:flex; align-items:center; gap:11px; margin:6px 0 22px; }
.cat-page-head h1 { color:var(--text-1); }
.cat-layout { display:grid; grid-template-columns:1fr 340px; gap:30px; align-items:start; }
@media (max-width:960px){ .cat-layout{ grid-template-columns:1fr; } }

/* slider */
.slider { --cat:var(--gold); position:relative; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.slide-media { position:relative; aspect-ratio:16/8; display:grid; place-items:center; }
.slide-tag { position:absolute; inset-inline-start:14px; top:14px; }
.slide-vidflag { position:absolute; inset-inline-end:14px; top:14px; display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-size:var(--t-2xs); backdrop-filter:blur(4px); }
.slide-cap { padding:18px 22px 8px; display:flex; flex-direction:column; gap:9px; }
.slide-cap h2 { color:var(--text-1); line-height:1.4; }
.slide-nav { display:flex; align-items:center; justify-content:space-between; padding:8px 18px 16px; }
.slide-nav button { width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); background:var(--bg-2); color:var(--text-1); display:grid; place-items:center; cursor:pointer; }
.slide-nav button:hover { border-color:var(--cat); color:var(--cat); }
.dots { display:flex; gap:7px; }
.dots .dot { width:8px; height:8px; border-radius:50%; background:var(--line-2); cursor:pointer; transition:all .2s; }
.dots .dot.on { background:var(--cat); width:22px; border-radius:99px; }

/* title list */
.title-list { list-style:none; margin:0; padding:0; }
.tl-item { display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--text-1); }
.tl-bullet { flex:0 0 7px; width:7px; height:7px; border-radius:50%; }
.tl-title { flex:1; font-weight:600; font-size:var(--t-base); line-height:1.6; }
.tl-item:hover .tl-title { color:var(--gold); }
.tl-time { flex:0 0 auto; font-size:var(--t-xs); color:var(--text-3); }

/* visual / video news cards */
.visual-card { display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--text-1); padding:7px; border-radius:var(--r-md); }
.visual-card:hover { background:var(--surface-2); }
.vc-thumb { position:relative; flex:0 0 108px; height:68px; border-radius:var(--r-sm); display:grid; place-items:center; }
.vc-dur { position:absolute; inset-inline-end:6px; bottom:6px; font-size:var(--t-2xs); background:rgba(0,0,0,.6); color:#fff; padding:1px 6px; border-radius:6px; }
.vc-title { font-weight:600; font-size:var(--t-sm); line-height:1.55; }

/* about / contact */
.about-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
@media (max-width:760px){ .about-grid{ grid-template-columns:1fr; } }
.contact-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:22px; align-items:start; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
.fld { display:flex; flex-direction:column; gap:6px; font-size:var(--t-sm); color:var(--text-2); }
.inp { background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:11px 13px; color:var(--text-1); font:inherit; font-size:var(--t-sm); }
.inp:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }

/* ── Nav scroll + live link ── */
.nav-scroll { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; max-width:100%; }
.nav-scroll::-webkit-scrollbar { display:none; }
.nav-live { display:inline-flex; align-items:center; gap:7px; color:var(--text-1) !important; }
.nav-live:hover { color:var(--live) !important; }

/* ── AI / tech section ── */
.ai-auto { display:inline-flex; align-items:center; gap:5px; font-size:var(--t-2xs); color:var(--c-tech); background:color-mix(in srgb, var(--c-tech) 14%, transparent); padding:4px 10px; border-radius:999px; }
.ai-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:22px; }
@media (max-width:860px){ .ai-grid{ grid-template-columns:1fr; } }
.ai-lead { display:flex; flex-direction:column; gap:12px; text-decoration:none; color:var(--text-1); }
.ai-lead-thumb { aspect-ratio:16/8; border-radius:var(--r-lg); display:grid; place-items:center; background:linear-gradient(135deg, color-mix(in srgb, var(--c-tech) 26%, var(--bg-2)), var(--bg-1)); border:1px solid var(--line); }
.ai-lead h3 { transition:color .15s; }
.ai-lead:hover h3 { color:var(--c-tech); }
.ai-src { display:inline-flex; align-items:center; gap:5px; font-size:var(--t-xs); color:var(--text-3); }
.ai-src code, .art-meta code { font-family:var(--mono); color:var(--text-2); }
.ai-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.ai-row { display:flex; flex-direction:column; gap:5px; padding:13px 4px; border-bottom:1px solid var(--line); text-decoration:none; }
.ai-row:last-child { border-bottom:none; }
.ai-tag { font-size:var(--t-2xs); color:var(--c-tech); }
.ai-row-title { font-size:var(--t-body); color:var(--text-1); line-height:1.5; font-weight:500; transition:color .15s; }
.ai-row:hover .ai-row-title { color:var(--c-tech); }

/* ── subscription + wallet ── */
.coin-bal { display:inline-flex; align-items:center; gap:6px; font-size:var(--t-sm); color:var(--text-2); }
.coin-bal b { color:var(--gold); }
.sub-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:22px; align-items:start; }
@media (max-width:900px){ .sub-grid{ grid-template-columns:1fr; } }
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:620px){ .tiers{ grid-template-columns:1fr; } }
.tier { position:relative; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 18px; display:flex; flex-direction:column; gap:12px; }
.tier.hot { border-color:color-mix(in srgb, var(--gold) 55%, var(--line)); box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent), 0 14px 40px -18px color-mix(in srgb, var(--gold) 50%, transparent); }
.tier-flag { position:absolute; top:-10px; inset-inline-start:18px; font-size:var(--t-2xs); background:linear-gradient(150deg,var(--gold),var(--gold-600)); color:var(--on-gold); padding:3px 10px; border-radius:999px; font-weight:700; }
.tier-name { font-size:var(--t-h4); font-weight:800; }
.tier-price { font-size:var(--t-h4); color:var(--gold); }
.tier-feats { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; flex:1; }
.tier-feats li { display:flex; align-items:center; gap:8px; font-size:var(--t-sm); color:var(--text-2); }
.wallet { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; display:flex; flex-direction:column; gap:16px; }
.wallet-head { display:flex; align-items:flex-start; justify-content:space-between; }
.wallet-bal { font-size:1.9rem; font-weight:800; display:flex; align-items:center; gap:8px; letter-spacing:-.02em; }
.wbind-tag { font-size:var(--t-2xs); font-family:var(--mono); color:var(--text-3); background:var(--bg-2); padding:3px 8px; border-radius:6px; }
.coin-packs { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.coin-pack { position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); padding:13px 12px; display:flex; flex-direction:column; gap:4px; cursor:pointer; transition:border-color .15s, transform .15s; text-align:start; }
.coin-pack:hover { border-color:var(--gold); transform:translateY(-2px); }
.coin-pack.best { border-color:color-mix(in srgb, var(--gold) 45%, var(--line)); }
.pack-tag { position:absolute; top:8px; inset-inline-end:8px; font-size:9px; color:var(--gold); background:color-mix(in srgb, var(--gold) 16%, transparent); padding:2px 7px; border-radius:999px; }
.pack-coins { font-size:var(--t-h4); font-weight:800; display:flex; align-items:center; gap:6px; }
.pack-bonus { font-size:var(--t-2xs); color:var(--up); }
.pack-price { font-size:var(--t-xs); color:var(--text-3); }
.unlocks { display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:14px; }
.unlock-row { display:flex; align-items:center; gap:10px; }
.unlock-ic { width:28px; height:28px; border-radius:7px; flex:none; display:grid; place-items:center; background:var(--bg-2); color:var(--text-2); }
.unlock-title { flex:1; font-size:var(--t-sm); }
.unlock-cost { font-size:var(--t-xs); color:var(--text-2); display:inline-flex; align-items:center; gap:4px; }
.unlock-cost i { color:var(--text-3); font-style:normal; }

/* ── article page ── */
.article { padding-bottom:20px; }
.art-grid { display:grid; grid-template-columns:1fr 320px; gap:30px; align-items:start; }
@media (max-width:900px){ .art-grid{ grid-template-columns:1fr; } }
.art-title { font-size:var(--t-display); line-height:1.3; margin:12px 0 14px; }
.art-meta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:var(--t-xs); color:var(--text-3); padding-bottom:16px; border-bottom:1px solid var(--line); }
.art-cover { aspect-ratio:16/8; border-radius:var(--r-lg); display:grid; place-items:center; border:1px solid var(--line); margin:18px 0; }
.art-body p { font-size:var(--t-body); line-height:2.05; color:var(--text-2); margin:0 0 18px; }
.art-share { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--line); }
.share-btn { width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--bg-1); color:var(--text-2); display:grid; place-items:center; cursor:pointer; transition:all .15s; }
.share-btn:hover { border-color:var(--gold); color:var(--gold); }
.art-src-note { margin-inline-start:auto; font-size:var(--t-2xs); color:var(--text-3); display:inline-flex; align-items:center; gap:5px; }

/* ── auth modal ── */
.auth-overlay {
  position:fixed; inset:0; z-index:100;
  background:color-mix(in srgb, var(--bg-0) 72%, transparent);
  backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:20px;
  animation:auth-fade .18s ease;
}
@keyframes auth-fade { from{opacity:0;} to{opacity:1;} }
.auth-card {
  position:relative; width:100%; max-width:420px;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:26px 26px 18px; box-shadow:0 24px 60px -12px rgba(0,0,0,.6);
  animation:auth-pop .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes auth-pop { from{transform:translateY(12px) scale(.98); opacity:0;} to{transform:none; opacity:1;} }
.auth-x {
  position:absolute; inset-inline-end:16px; top:16px;
  width:32px; height:32px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg-2); color:var(--text-3); display:grid; place-items:center; cursor:pointer;
}
.auth-x:hover { color:var(--text-1); }
.auth-head { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; margin-bottom:18px; }
.auth-head h3 { font-size:var(--t-h3); margin-top:4px; }
.auth-sub { font-size:var(--t-sm); color:var(--text-3); line-height:1.6; max-width:320px; }
.auth-body { display:flex; flex-direction:column; gap:13px; }
.auth-field { display:flex; flex-direction:column; gap:6px; }
.auth-field > span { font-size:var(--t-xs); color:var(--text-3); }
.auth-field input {
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:11px 13px; color:var(--text-1); font-family:inherit; font-size:var(--t-sm);
  outline:none; transition:border-color var(--t-fast); width:100%;
}
.auth-field input:focus { border-color:var(--gold); }
.auth-field input::placeholder { color:var(--text-3); }
.auth-code { display:flex; gap:8px; }
.auth-code input { flex:1; letter-spacing:.3em; text-align:center; }
.auth-code-btn {
  flex:none; padding:0 14px; border-radius:var(--r-md); white-space:nowrap;
  background:color-mix(in srgb, var(--gold) 14%, transparent); color:var(--gold);
  border:1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
  font-family:inherit; font-size:var(--t-xs); cursor:pointer; transition:background var(--t-fast);
}
.auth-code-btn:hover { background:color-mix(in srgb, var(--gold) 22%, transparent); }
.auth-alt { display:flex; align-items:center; gap:10px; font-size:var(--t-xs); color:var(--text-3); margin-top:2px; }
.auth-link { background:none; border:none; color:var(--gold); font-family:inherit; font-size:inherit; cursor:pointer; padding:0; }
.auth-link:hover { text-decoration:underline; }
.auth-foot { text-align:center; font-size:var(--t-sm); color:var(--text-3); margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.auth-note { display:flex; align-items:center; justify-content:center; gap:6px; font-size:var(--t-2xs); color:var(--text-3); margin-top:12px; }