/* samachar.news — editorial styling layered on Bootstrap 5 */

:root,
[data-bs-theme="light"] {
  --bg:#f6f5f2; --surface:#ffffff; --surface2:#eeece7;
  --text:#1b1a17; --muted:#78756c; --border:#e5e3dc;
  --accent:#c8372c; --accent-soft:#f6e4e1;
}
[data-bs-theme="dark"] {
  --bg:#111110; --surface:#1a1a17; --surface2:#24241f;
  --text:#f1efe8; --muted:#9d9a90; --border:#2e2d28;
  --accent:#e5695d; --accent-soft:#3a211d;
}

* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body {
  background:var(--bg); color:var(--text);
  font-family:'Archivo','Noto Sans Devanagari',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
::-webkit-scrollbar { width:0; height:0; }
* { scrollbar-width:none; }

.serif { font-family:'Newsreader','Noto Serif Devanagari',serif; }
.mono  { font-family:'IBM Plex Mono',monospace; }
.accent { color:var(--accent); }
.dev { font-family:'Noto Serif Devanagari',serif; }

#app { height:100vh; height:100dvh; display:flex; flex-direction:column; }

/* ---------- Header ---------- */
.app-header { flex:0 0 auto; background:var(--surface); border-bottom:1px solid var(--border); z-index:20; padding-top:env(safe-area-inset-top, 0); }
.header-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px clamp(16px,4vw,44px) 10px; }
.brand-wrap { display:flex; align-items:center; gap:12px; min-width:0; }
.brand { display:flex; flex-direction:column; gap:2px; }
.wordmark { font-weight:800; font-size:clamp(19px,2.3vw,26px); letter-spacing:-0.03em; line-height:1; }
.tagline { font-size:11px; color:var(--muted); white-space:nowrap; line-height:1; }
.tagline .dev { color:var(--accent); font-weight:500; }
.header-actions { display:flex; align-items:center; gap:8px; }

.icon-btn { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--border); background:transparent; border-radius:11px; color:var(--muted); cursor:pointer; padding:0; }
.icon-btn:hover { border-color:var(--accent); color:var(--accent); }
.icon-btn svg { width:19px; height:19px; }
.icon-btn.active { color:var(--accent); border-color:var(--accent); }
.moon-cut { fill:var(--surface); stroke:none; }

.pill { display:flex; align-items:center; gap:7px; padding:6px 11px; border:1px solid var(--border); background:var(--surface2); border-radius:999px; color:var(--muted); cursor:pointer; font-size:13px; font-weight:500; max-width:190px; }
.pill:hover { border-color:var(--accent); color:var(--accent); }
.pill .dot { width:7px; height:7px; border-radius:999px; background:var(--accent); flex:0 0 auto; }
.pill span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cat-nav { display:flex; overflow-x:auto; padding:0 clamp(10px,4vw,40px); }
.cat-nav button { background:none; border:none; border-bottom:2px solid transparent; color:var(--muted); font-weight:500; font-size:clamp(13px,1.5vw,15px); padding:6px 4px 12px; margin:4px 9px 0; white-space:nowrap; cursor:pointer; flex:0 0 auto; }
.cat-nav button.active { color:var(--text); font-weight:700; border-bottom-color:var(--accent); }

.progress-line { height:3px; background:var(--surface2); }
.progress-line > div { height:100%; background:var(--accent); width:0; transition:width .25s ease; }

/* ---------- Feed ---------- */
.feed { flex:1 1 auto; overflow-y:auto; scroll-snap-type:y mandatory; scroll-behavior:smooth; position:relative; }
.snap-card { height:100%; min-height:100%; scroll-snap-align:start; scroll-snap-stop:always; display:flex; align-items:stretch; justify-content:center; padding:clamp(14px,3vh,36px) clamp(16px,5vw,48px); }
.card-inner { width:100%; max-width:720px; margin:0 auto; height:100%; display:flex; flex-direction:column; justify-content:center; gap:clamp(11px,2vh,20px); animation:cardUp .5s ease; }
.card-inner > *:not(.summary) { flex:0 0 auto; }
@keyframes cardUp { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:none;} }

.card-img { position:relative; width:100%; height:clamp(120px,20vh,220px); border-radius:14px; overflow:hidden; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.card-img .ph-letter { font-family:'Newsreader',serif; font-size:clamp(64px,12vh,120px); color:rgba(255,255,255,.17); font-weight:600; line-height:1; }
.card-img .ph-label { position:absolute; left:15px; bottom:13px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,.9); text-transform:uppercase; }

.meta-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tag { font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; padding:4px 9px; border-radius:6px; }
.time { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); }
.headline { margin:0; font-family:'Newsreader','Noto Serif Devanagari',serif; font-weight:600; font-size:clamp(24px,3.6vw,38px); line-height:1.16; letter-spacing:-.01em; text-wrap:balance; }
.summary { margin:0; font-family:'Newsreader','Noto Serif Devanagari',serif; font-size:clamp(16px,1.9vw,20px); line-height:1.5; color:var(--text); flex:0 1 auto; min-height:0; display:-webkit-box; -webkit-line-clamp:9; -webkit-box-orient:vertical; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 90%,transparent); mask-image:linear-gradient(180deg,#000 90%,transparent); }
.card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:2px; }
.src { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); }
.card-actions { display:flex; align-items:center; gap:8px; }
.btn-read { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--accent); background:transparent; color:var(--accent); padding:8px 15px; border-radius:10px; font-weight:600; font-size:13px; cursor:pointer; }
.btn-read:hover { background:var(--accent-soft); }
.act { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--border); background:transparent; border-radius:10px; cursor:pointer; color:var(--muted); }
.act:hover { border-color:var(--accent); }
.act svg { width:18px; height:18px; }
.act.saved { color:var(--accent); }

.feed-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:40px; text-align:center; color:var(--muted); }
.feed-empty .serif { font-size:22px; color:var(--text); }

/* ---------- Footer ---------- */
.app-footer { flex:0 0 auto; background:var(--surface); border-top:1px solid var(--border); padding:9px clamp(14px,4vw,40px); display:flex; align-items:center; justify-content:space-between; gap:12px; z-index:20; }
.counter { display:flex; flex-direction:column; gap:1px; min-width:0; }
.counter span:first-child { font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600; }
.counter span:last-child { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-btns { display:flex; align-items:center; gap:10px; }
.round-btn { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--border); background:transparent; border-radius:999px; color:var(--text); cursor:pointer; }
.round-btn:hover { border-color:var(--accent); color:var(--accent); }
.round-btn.primary { width:52px; height:52px; border:none; background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.14); }
.round-btn svg { width:22px; height:22px; }
.foot-hint { display:flex; align-items:center; gap:8px; justify-content:flex-end; min-width:0; }
.foot-hint > span { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); white-space:nowrap; }

/* ---------- Overlays ---------- */
.ov { position:fixed; inset:0; background:var(--bg); z-index:60; display:flex; flex-direction:column; animation:fade .2s ease; }
.ov.center { align-items:center; justify-content:center; padding:clamp(12px,3vw,28px); background:rgba(10,10,8,.55); backdrop-filter:blur(3px); }
@keyframes fade { from{opacity:0;} to{opacity:1;} }
.ov-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px clamp(16px,5vw,44px); border-bottom:1px solid var(--border); background:var(--surface); }
.ov-body { flex:1 1 auto; overflow-y:auto; padding:clamp(18px,4vw,36px) clamp(16px,5vw,44px) 60px; }
.ghost-btn { display:inline-flex; align-items:center; gap:8px; border:none; background:transparent; color:var(--text); font-weight:600; font-size:14px; cursor:pointer; padding:6px 4px; }
.ghost-btn svg { width:20px; height:20px; }

.modal-card { background:var(--surface); border:1px solid var(--border); border-radius:20px; width:100%; max-width:560px; max-height:92vh; overflow-y:auto; padding:clamp(22px,4vw,36px); box-shadow:0 24px 70px rgba(0,0,0,.35); }
.field-label { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:16px 0 8px; }
.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chip { padding:9px 14px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--text); font-weight:500; font-size:14px; cursor:pointer; }
.chip.on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600; }

.search-input { flex:1; border:none; background:transparent; outline:none; font-size:clamp(18px,3vw,26px); font-family:'Newsreader','Noto Serif Devanagari',serif; color:var(--text); min-width:0; }
.result { display:flex; flex-direction:column; gap:6px; width:100%; text-align:left; background:transparent; border:none; border-bottom:1px solid var(--border); padding:18px 4px; cursor:pointer; }
.result .rh { font-family:'Newsreader','Noto Serif Devanagari',serif; font-size:clamp(18px,2.4vw,23px); line-height:1.25; color:var(--text); }

.article-wrap { max-width:720px; margin:0 auto; padding:0 clamp(16px,5vw,44px) 90px; }
.article-hero { position:relative; width:100%; height:clamp(200px,40vh,440px); border-radius:16px; overflow:hidden; margin-top:22px; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.article-body p { margin:0 0 20px; font-family:'Newsreader','Noto Serif Devanagari',serif; font-size:clamp(17px,2.1vw,21px); line-height:1.62; }
.btn-source { display:inline-flex; align-items:center; gap:9px; margin-top:8px; padding:13px 20px; border-radius:12px; background:var(--accent); color:#fff; text-decoration:none; font-weight:700; font-size:15px; }

/* ---------- Watch ---------- */
.country-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.country-tile { display:flex; flex-direction:column; gap:10px; align-items:flex-start; text-align:left; padding:18px; border:1px solid var(--border); background:var(--surface); border-radius:16px; cursor:pointer; }
.country-tile:hover { border-color:var(--accent); }
.country-tile .code { font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14px; letter-spacing:.08em; color:var(--accent); background:var(--accent-soft); padding:5px 10px; border-radius:8px; }
.country-tile .cname { font-family:'Newsreader',serif; font-size:19px; line-height:1.12; }
.country-tile .ccount { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); }
.player-shell { position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#000; border:1px solid var(--border); }
.player-shell iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.net-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.net-card { display:flex; flex-direction:column; gap:6px; align-items:flex-start; text-align:left; padding:13px 15px; border:1px solid var(--border); background:var(--surface); border-radius:12px; cursor:pointer; }
.net-card.on { border-color:var(--accent); background:var(--accent-soft); }
.net-card .nc { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; color:var(--muted); }
.net-card .nn { font-weight:600; font-size:15px; }

/* ---------- Toast + setup ---------- */
.toast-pill { position:fixed; left:50%; bottom:86px; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:11px 20px; border-radius:999px; font-size:14px; font-weight:500; z-index:80; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.setup-screen { max-width:560px; margin:8vh auto; padding:0 24px; font-family:'Archivo',sans-serif; color:var(--text); }
.setup-screen h1 { font-weight:800; letter-spacing:-.03em; }
.setup-screen code { background:var(--surface2); padding:2px 6px; border-radius:5px; font-family:'IBM Plex Mono',monospace; font-size:.9em; }
.setup-screen .err { color:var(--accent); font-family:'IBM Plex Mono',monospace; font-size:13px; }
.spinner-dots { display:flex; gap:9px; }
.spinner-dots span { width:13px; height:13px; border-radius:999px; background:var(--accent); animation:pulse 1s ease-in-out infinite; }
.spinner-dots span:nth-child(2){ animation-delay:.16s; } .spinner-dots span:nth-child(3){ animation-delay:.32s; }
@keyframes pulse { 0%,100%{opacity:.25;transform:scale(.7);} 50%{opacity:1;transform:scale(1);} }
.load-screen { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; text-align:center; padding:40px; color:var(--muted); }
.load-screen .serif { font-size:clamp(22px,3vw,30px); color:var(--text); }
.splash { position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; transition:opacity .4s ease; }
.splash.hide { opacity:0; pointer-events:none; }
.splash-brand { font-weight:800; font-size:clamp(28px,5vw,40px); letter-spacing:-.03em; color:var(--text); }
.splash-brand span { color:var(--accent); }
.splash-tag { font-size:13px; color:var(--muted); }
.splash-tag .dev { font-family:'Noto Serif Devanagari',serif; color:var(--accent); }
.splash-note { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.06em; color:var(--muted); margin-top:6px; }
.progress-track { width:min(420px,80vw); height:8px; background:var(--surface2); border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.progress-bar { height:100%; width:6%; background:var(--accent); border-radius:999px; transition:width .4s ease; }

/* ---------- Login (phone + OTP) ---------- */
.phone-row { display:flex; align-items:center; gap:10px; margin:18px 0 4px; }
.phone-row .cc { font-family:'IBM Plex Mono',monospace; font-size:17px; color:var(--muted); border:1px solid var(--border); border-radius:11px; padding:12px 12px; background:var(--surface2); }
.lg-input { flex:1; width:100%; border:1px solid var(--border); border-radius:11px; padding:12px 14px; font-size:18px; font-family:'Archivo',sans-serif; letter-spacing:.04em; color:var(--text); background:var(--bg); outline:none; }
.lg-input:focus { border-color:var(--accent); }
.lg-input.otp { margin:18px 0 4px; font-family:'IBM Plex Mono',monospace; font-size:26px; letter-spacing:.5em; text-align:center; }
.lg-btn { margin-top:16px; }
.lg-err { color:var(--accent); font-size:13px; min-height:18px; margin-top:8px; }
.lg-resend { margin-top:16px; text-align:center; color:var(--muted); font-size:13px; }
.link-btn { border:none; background:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0; font-size:inherit; font-family:inherit; }
.link-btn:disabled { opacity:.5; cursor:default; }

/* ---------- Video section ---------- */
.video-badge { font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; letter-spacing:.12em; color:#fff; background:var(--accent); padding:3px 8px; border-radius:5px; }
.video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.video-card { display:flex; flex-direction:column; gap:8px; text-align:left; background:transparent; border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; padding:0; }
.video-card.on { border-color:var(--accent); }
.video-thumb { position:relative; width:100%; aspect-ratio:16/9; background:#000 center/cover no-repeat; display:flex; align-items:center; justify-content:center; }
.play-dot { width:42px; height:42px; border-radius:999px; background:rgba(0,0,0,.55); display:grid; place-items:center; color:#fff; }
.play-dot svg { width:20px; height:20px; }
.video-meta { padding:0 12px 12px; }
.video-meta .vtitle { font-family:'Archivo',sans-serif; font-weight:600; font-size:13.5px; line-height:1.3; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Loaders ---------- */
.art-loading { display:flex; align-items:center; gap:9px; color:var(--muted); }
.mini-dots { display:inline-flex; gap:5px; }
.mini-dots span { width:8px; height:8px; border-radius:999px; background:var(--accent); animation:pulse 1s ease-in-out infinite; }
.mini-dots span:nth-child(2){ animation-delay:.16s; } .mini-dots span:nth-child(3){ animation-delay:.32s; }

/* ---------- Collapsible filters ---------- */
.filter-arrow { position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:40; width:30px; height:54px; border:1px solid var(--border); border-left:none; border-radius:0 12px 12px 0; background:var(--surface); color:var(--accent); display:grid; place-items:center; cursor:pointer; box-shadow:2px 2px 10px rgba(0,0,0,.08); }
.filter-arrow svg { width:18px; height:18px; }
.filter-arrow.open { left:min(360px,86vw); transition:left .2s; }
.filter-panel { position:fixed; left:0; top:0; bottom:0; width:min(360px,86vw); background:var(--surface); border-right:1px solid var(--border); z-index:41; overflow-y:auto; box-shadow:6px 0 30px rgba(0,0,0,.15); animation:slideIn .2s ease; }
@keyframes slideIn { from { transform:translateX(-100%); } to { transform:none; } }
.filter-inner { padding:20px clamp(16px,4vw,24px) 40px; }
.filter-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.filter-head strong { font-size:17px; }
.filter-select { width:100%; border:1px solid var(--border); border-radius:11px; padding:11px 12px; font-family:'Archivo',sans-serif; font-size:15px; color:var(--text); background:var(--bg); outline:none; }
.chip.small { padding:7px 12px; font-size:13px; }

/* ---------- Responsive (phones & tablets) ---------- */
@media (max-width: 640px) {
  .header-row { flex-wrap:wrap; gap:10px; padding:10px 14px 8px; }
  .snap-card { padding:10px 16px 12px; }
  .card-inner { gap:9px; justify-content:flex-start; }
  .card-img { height:clamp(92px,15vh,150px); }
  .headline { font-size:22px; line-height:1.14; }
  .summary { font-size:16px; line-height:1.46; }
  .card-foot { flex-wrap:nowrap; }
  .brand-wrap { order:1; width:100%; }
  .header-actions { order:2; width:100%; justify-content:space-between; gap:4px; }
  .icon-btn { width:38px; height:38px; }
  .loc-pill { max-width:60vw; }
  .cat-nav { padding:0 12px; }
  .cat-nav button { margin:4px 7px 0; font-size:13px; }
  .app-footer { padding:8px 14px; }
  .round-btn { width:42px; height:42px; }
  .round-btn.primary { width:48px; height:48px; }
  .foot-hint > span { display:none; }           /* hide "↑ ↓ / swipe" hint on small screens */
  .modal-card { padding:20px 18px; border-radius:16px; }
  .ov-bar { padding:12px 16px; }
  .ov-body { padding:16px 16px 60px; }
  .video-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .country-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
  .net-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}
@media (max-width: 380px) {
  .icon-btn { width:34px; height:34px; }
  .icon-btn svg { width:17px; height:17px; }
  .wordmark { font-size:18px; }
}