/* ShortNews Frontend CSS v2.5
   Key changes:
   - Logo bottom-left + category/date bottom-right on image (no centered badge)
   - Title in bold dark with category color accent (like Way2News)
   - Removed separate sn-card-meta row (meta now on image)
   - Inline ad slot inside card body
   - Better new-post notification banner
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Telugu:wght@400;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --sn-red:     #E8222A;
  --sn-card-bg: #FFFFFF;
  --sn-text:    #1a1a1f;
  --sn-muted:   #6b6b78;
  --sn-border:  #e4e4ec;
  --sn-shadow:  0 8px 40px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
  --sn-radius:  18px;
  --sn-card-w:  390px;
  --sn-card-h:  620px;
}

/* ── Wrapper ── */
.shortnews-wrap {
  width: 100%; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; padding: 20px 16px; box-sizing: border-box;
  background: #dde3ea;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.55) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23b0b8c4' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ── Stage + Arrows ── */
.sn-stage { display:flex; align-items:center; gap:18px; position:relative; margin:0 auto; }
.sn-nav-arrows { display:flex; flex-direction:column; gap:12px; flex-shrink:0; }
.sn-arrow {
  width:46px; height:46px; border-radius:50%;
  border:2px solid var(--sn-red); background:transparent;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .18s, transform .12s; outline:none; color:var(--sn-red);
}
.sn-arrow:hover  { background:rgba(232,34,42,0.08); transform:scale(1.05); }
.sn-arrow:active { transform:scale(0.95); }
.sn-arrow:disabled { opacity:0.3; cursor:default; transform:none; }
.sn-arrow svg { width:20px; height:20px; stroke:var(--sn-red); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

/* ── Viewport — perspective required for 3D flip ── */
.sn-viewport {
  width:var(--sn-card-w); height:var(--sn-card-h);
  position:relative; overflow:hidden;
  border-radius:var(--sn-radius); box-shadow:var(--sn-shadow);
  perspective: 1000px;
  perspective-origin: 50% 50%;
}

/* ── Card base ──
   translateY only — iOS WebKit hard-crashes when
   transform-style:preserve-3d and overflow:hidden
   are on the same element. translateY is equally
   smooth on every device including iPhone. ── */
.sn-card {
  position:absolute; inset:0;
  background:var(--sn-card-bg); border-radius:var(--sn-radius);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(100%);
  pointer-events:none;
  will-change:transform;
}
.sn-card.active    { opacity:1; transform:translateY(0);     pointer-events:auto; }
.sn-card.exit-up   { opacity:0; transform:translateY(-100%); pointer-events:none; }
.sn-card.exit-down { opacity:0; transform:translateY(100%);  pointer-events:none; }

/* ════════════════════════════════════════
   IMAGE — 30%
   Bottom bar: logo left | category+date right
════════════════════════════════════════ */
.sn-card-image {
  position:relative; width:100%; height:48%;
  flex-shrink:0; overflow:hidden; background:#000; /* black fills all letterbox gaps */
}
/* Blurred backdrop — only when .has-image present; fills letterbox gaps on tall/wide images */
.sn-card-image.has-image::before {
  content:'';
  position:absolute; inset:-20px; z-index:0; pointer-events:none;
  background-image:inherit;
  background-size:cover; background-position:center;
  filter:blur(20px) brightness(.4) saturate(1.4);
}
.sn-card-image img {
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:contain;
  object-position:center;
  display:block;;
  display:block;
  user-select:none; -webkit-user-drag:none;
}


.sn-card-image-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 25%, rgba(0,0,0,0.65) 100%);
}
.sn-card-image-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#e8edf2,#ccd3dc); font-size:3rem; color:#a0a8b4;
}

/* ── Image bottom bar (replaces centered badge + separate meta row) ── */
.sn-img-bar {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:14px 10px 8px;
  background:linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%);
  z-index:3;
}
/* Site name — bold white, no background badge */
.sn-img-sitename {
  font-family:'DM Sans',sans-serif; font-size:0.68rem; font-weight:800;
  color:#fff; letter-spacing:.04em; text-shadow:0 1px 4px rgba(0,0,0,.7);
  white-space:nowrap;
}
.sn-img-meta {
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
}
.sn-img-cat {
  font-family:'DM Sans',sans-serif; font-size:0.6rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.sn-img-date {
  font-family:'DM Sans',sans-serif; font-size:0.58rem; font-weight:400;
  color:rgba(255,255,255,0.82); text-shadow:0 1px 3px rgba(0,0,0,.5);
  white-space:nowrap;
}

/* Close button */
.sn-card-close {
  position:absolute; top:8px; right:8px;
  width:28px; height:28px; border-radius:50%;
  background:rgba(0,0,0,0.55); border:none; cursor:pointer;
  color:#fff; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); z-index:5; transition:background .15s;
}
.sn-card-close:hover { background:rgba(0,0,0,0.78); }

/* ════════════════════════════════════════
   CONTENT BODY — 70%
════════════════════════════════════════ */
.sn-card-body {
  padding:12px 18px 6px; flex:1;
  display:flex; flex-direction:column; gap:0;
  overflow:hidden; min-height:0;
}

/* ── Headline — bold, colored like Way2News ── */
.sn-headline {
  font-family:'Noto Sans Telugu','Noto Serif Telugu',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:0.97rem; line-height:1.4;
  color:#1a1a1f;       /* dark base */
  font-weight:700; letter-spacing:0;
  margin:0 0 8px 0; flex-shrink:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  /* Blue accent on first few words is applied via JS if needed */
}
/* When title starts with English word before colon (like "Ukraine : రష్యా...") 
   the English part gets the red accent naturally via text-decoration */
.sn-headline .sn-hl-prefix {
  color:var(--sn-red); font-weight:800;
}

/* ── Gist ── */
.sn-gist {
  font-family:'Noto Sans Telugu','Noto Serif Telugu','DM Sans',system-ui,sans-serif;
  font-size:0.885rem; line-height:1.72; color:#3a3a48;
  flex:1; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; min-height:0;
}

/* ── Inline Ad Slot ── */
.sn-inline-ad {
  width:100%; margin-top:6px;
  display:flex; align-items:center; justify-content:center;
  min-height:50px; max-height:100px; /* cap at 100px — only show if ad fits */
  overflow:hidden; flex-shrink:0;
  background:#f8f8f8;
  border-radius:6px;
}
.sn-inline-ad:empty { display:none; } /* hide if no ad loaded */
.sn-inline-ad ins, .sn-inline-ad iframe {
  display:block!important; margin:0 auto!important;
  max-width:100%!important; max-height:100px!important;
}

/* ════════════════════════════════════════
   YOUTUBE INLINE PLAYER
   Tap play → JS injects iframe replacing thumbnail
════════════════════════════════════════ */
.sn-yt-play {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:4; border:none; background:none; cursor:pointer; padding:0;
}
.sn-yt-btn {
  width:60px; height:60px; border-radius:50%;
  background:rgba(255,0,0,.9);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
  transition:transform .15s, background .15s;
}
.sn-yt-btn:hover { background:#ff0000; transform:scale(1.1); }
/* YouTube badge on thumbnail */
.sn-card-image:has(iframe) .sn-img-bar { display:none; }  /* hide logo bar while video plays */

/* ════════════════════════════════════════
   DAY SIGNIFICANCE CARD
════════════════════════════════════════ */
.sn-daycard { background:#0d1b2a; }
.sn-dc-header {
  padding:16px 18px 12px; background:linear-gradient(135deg,#0d1b2a,#1b2838);
  border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0;
  position:relative;
}
.sn-dc-date {
  font-family:'DM Sans',sans-serif; font-size:.75rem; font-weight:700;
  color:rgba(255,255,255,.5); letter-spacing:.1em; text-transform:uppercase;
}
.sn-dc-title {
  font-family:'DM Sans',sans-serif; font-size:1.05rem; font-weight:700;
  color:#ffffff; margin-top:3px;
}
.sn-dc-body {
  flex:1; overflow-y:auto; padding:10px 16px; display:flex; flex-direction:column; gap:10px;
  scrollbar-width:none;
}
.sn-dc-body::-webkit-scrollbar { display:none; }
.sn-dc-section {
  display:flex; align-items:flex-start; gap:10px;
  background:rgba(255,255,255,.06); border-radius:10px; padding:10px 12px;
  font-family:'DM Sans',sans-serif; font-size:.8rem; color:rgba(255,255,255,.85); line-height:1.45;
}
.sn-dc-icon { font-size:1.1rem; flex-shrink:0; margin-top:1px; }
.sn-dc-births { display:flex; flex-direction:column; gap:7px; }
.sn-dc-person { display:flex; align-items:flex-start; gap:8px; }
.sn-dc-thumb {
  width:32px; height:32px; border-radius:50%; object-fit:cover;
  flex-shrink:0; border:1.5px solid rgba(255,255,255,.2);
}
.sn-dc-events { flex-direction:column; }
.sn-dc-event { margin-bottom:5px; color:rgba(255,255,255,.8); font-size:.78rem; line-height:1.4; }
.sn-dc-event:last-child { margin-bottom:0; }
.sn-daycard .sn-card-footer {
  background:rgba(255,255,255,.04); border-top:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.4);
}
.sn-daycard .sn-card-close { background:rgba(255,255,255,.18); }

/* ════════════════════════════════════════
   FUN CARD — quote / joke / image
════════════════════════════════════════ */
.sn-funcard { overflow:hidden; }
.sn-funcard .sn-card-close { background:rgba(0,0,0,.4); }

/* ════════════════════════════════════════
   POLL CARD — NV Polls shortcode
════════════════════════════════════════ */
.sn-pollcard .sn-card-image { height:28%; }
.sn-pollcard .sn-poll-header { display:flex; align-items:center; justify-content:center; }
.sn-poll-body { overflow-y:auto; }
.sn-poll-wrap { font-family:'DM Sans',sans-serif; font-size:.88rem; }
/* Basic poll reset so it looks OK in the card */
.sn-poll-wrap form { margin:0; }
.sn-poll-wrap input[type="radio"] { accent-color:var(--sn-red); }
.sn-poll-wrap label { cursor:pointer; display:block; padding:6px 0; }
.sn-poll-wrap input[type="submit"],
.sn-poll-wrap button[type="submit"] {
  background:var(--sn-red); color:#fff; border:none;
  padding:8px 20px; border-radius:20px; font-size:.82rem;
  font-weight:700; cursor:pointer; margin-top:8px; width:100%;
}

/* ════════════════════════════════════════
   DOODLE CARD — special day message
════════════════════════════════════════ */
.sn-doodle-card { overflow:hidden; }
.sn-doodle-card .sn-card-close {
  background:rgba(0,0,0,.4)!important;
  backdrop-filter:blur(6px)!important;
}
.sn-doodle-msg {
  animation: sn-doodle-pulse 3s ease-in-out infinite;
}
@keyframes sn-doodle-pulse {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.02); }
}

/* ── Desktop close/back bar ── */
#sn-close-bar {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:8px 16px; box-sizing:border-box;
  font-family:'DM Sans',sans-serif; font-size:.8rem;
  color:rgba(0,0,0,.5); margin-bottom:10px;
}
.sn-close-site {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--sn-red); text-decoration:none; font-weight:600;
  font-size:.82rem; padding:5px 12px; border-radius:20px;
  background:rgba(232,34,42,.08); transition:background .15s;
}
.sn-close-site:hover { background:rgba(232,34,42,.16); }
@media (max-width:640px) { #sn-close-bar { display:none; } }

/* ── Day card chips (movies/OTT) ── */
.sn-dc-chips { display:flex; flex-wrap:wrap; gap:5px; }
.sn-dc-chip {
  background:rgba(255,255,255,.12); border-radius:12px;
  padding:3px 10px; font-size:.75rem; color:rgba(255,255,255,.9);
  white-space:nowrap; border:1px solid rgba(255,255,255,.15);
}

/* ════════════════════════════════════════
   GALLERY CARD — horizontal Instagram-style carousel
════════════════════════════════════════ */
.sn-gallery-card { background:#111; }

.sn-gallery-area {
  position:relative; height:65%; flex-shrink:0;
  overflow:hidden; background:#0d0d0d; cursor:grab;
}
.sn-gallery-area:active { cursor:grabbing; }

.sn-gl-strip {
  display:flex; height:100%;
  will-change:transform; transform:translateX(0);
}
.sn-gl-slide {
  position:relative; min-width:100%; height:100%;
  flex-shrink:0; overflow:hidden; background:#000;
}
/* Blurred background fills letterbox gaps around contained image */
.sn-gl-slide::before {
  content:'';
  position:absolute; inset:-20px; z-index:0;
  background-image:var(--sn-slide-bg);
  background-size:cover; background-position:center;
  filter:blur(22px) brightness(.3) saturate(1.4);
}
.sn-gl-slide img {
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:contain;       /* show full gallery image */
  object-position:center;
  display:block;
  background:#000;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
}
.sn-gl-caption {
  position:absolute; bottom:0; left:0; right:0;
  padding:6px 10px;
  background:linear-gradient(to top, rgba(0,0,0,.7), transparent);
  color:#fff; font-size:.7rem; font-family:'DM Sans',sans-serif; line-height:1.3;
}

.sn-gallery-body { padding:10px 18px 4px; }
.sn-gallery-body .sn-headline { -webkit-line-clamp:2; font-size:.92rem; color:#fff; }
.sn-gallery-body .sn-gist { -webkit-line-clamp:2; font-size:.82rem; color:rgba(255,255,255,.75); }

/* Dot indicators */
.sn-gl-dots {
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:5px; z-index:4;
}
.sn-gl-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.4); cursor:pointer;
  transition:background .2s, transform .2s;
}
.sn-gl-dot.active { background:#fff; transform:scale(1.35); }
.sn-gl-dot-more { font-size:.62rem; color:rgba(255,255,255,.65); font-family:'DM Sans',sans-serif; margin-left:2px; }

/* Chevron arrows (desktop only) */
.sn-gl-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.55); border:none; color:#fff;
  font-size:1.4rem; cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s; backdrop-filter:blur(4px);
}
.sn-gl-arrow:hover { background:rgba(0,0,0,.8); }
.sn-gl-prev { left:8px; }
.sn-gl-next { right:8px; }
@media (max-width:640px) { .sn-gl-arrow { display:none; } }

.sn-gallery-card .sn-card-footer { background:#111; border-top:1px solid rgba(255,255,255,.08); }
.sn-gallery-card .sn-gallery-btn { color:#60b4ff!important; }
.sn-gallery-card .sn-share-btn svg { fill:#fff; }

/* ── Regular news card Gallery CTA button ── */
.sn-gallery-btn { color:#0077cc!important; }

/* ── Footer ── */
.sn-card-footer {
  padding:8px 18px 14px; border-top:1px solid var(--sn-border);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; font-family:'DM Sans',sans-serif;
}
.sn-read-more {
  font-size:.8rem; font-weight:600; color:var(--sn-red);
  text-decoration:none; display:flex; align-items:center; gap:4px; letter-spacing:.01em;
}
.sn-read-more:hover { text-decoration:underline; }
.sn-share-btn {
  width:36px; height:36px; border-radius:50%; background:var(--sn-red);
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .15s, opacity .15s;
}
.sn-share-btn:hover { opacity:.85; transform:scale(1.08); }
.sn-share-btn svg { width:15px; height:15px; fill:white; }

/* ── Watch in Shorts button (on regular post pages) ── */
.sn-watch-btn-wrap { margin:20px 0; }
.sn-watch-btn {
  display:inline-flex!important; align-items:center; gap:7px;
  padding:10px 22px!important; border-radius:25px!important;
  font-weight:700!important; text-decoration:none!important;
  font-size:.9rem!important; letter-spacing:.03em!important;
  transition:opacity .15s, transform .15s;
}
.sn-watch-btn:hover { opacity:.88!important; transform:scale(1.03); text-decoration:none!important; }

/* ── Loading / Empty ── */
.sn-loading {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; height:100%; color:var(--sn-muted); font-family:'DM Sans',sans-serif;
}
.sn-spinner {
  width:32px; height:32px; border:3px solid var(--sn-border);
  border-top-color:var(--sn-red); border-radius:50%;
  animation:sn-spin .7s linear infinite;
}
@keyframes sn-spin { to { transform:rotate(360deg); } }
.sn-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; height:100%; font-family:'DM Sans',sans-serif;
  color:var(--sn-muted); text-align:center; padding:30px;
}
.sn-empty-icon { font-size:2.5rem; }
.sn-empty h3   { color:var(--sn-text); font-size:1rem; margin:0; }
.sn-empty p    { font-size:.85rem; margin:0; }

/* ── Counter + KB hint ── */
.sn-counter {
  position:absolute; bottom:-32px; left:50%; transform:translateX(-50%);
  font-family:'DM Sans',sans-serif; font-size:.75rem; color:rgba(0,0,0,0.45); white-space:nowrap;
}
.sn-kb-hint {
  position:absolute; bottom:-54px; right:0;
  font-family:'DM Sans',sans-serif; font-size:.7rem; color:rgba(0,0,0,0.35);
  display:flex; align-items:center; gap:5px;
}
.sn-kb-hint kbd { background:rgba(0,0,0,0.11); border-radius:4px; padding:2px 6px; font-size:.68rem; font-family:inherit; }

/* ════════════════════════════════════════
   FULL PAGE AD OVERLAY
════════════════════════════════════════ */
.sn-ad-inner {
  position:relative; width:min(460px,92vw); min-height:340px;
  border-radius:16px; overflow:hidden;
  background:#0d0d16; border:1px solid rgba(255,255,255,0.08);
  display:flex; flex-direction:column;
}
.sn-ad-label {
  position:absolute; top:12px; left:14px;
  font-family:'DM Sans',sans-serif; font-size:.63rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.1);
  padding:3px 9px; border-radius:3px;
}
.sn-ad-countdown {
  position:absolute; top:12px; right:56px;
  font-family:'DM Sans',sans-serif; font-size:.78rem; color:rgba(255,255,255,0.6);
  background:rgba(0,0,0,0.4); padding:4px 10px; border-radius:20px;
}
.sn-ad-close {
  position:absolute; top:8px; right:10px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.15); border:none; color:white;
  font-size:1.1rem; cursor:pointer; display:none;
  align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:background .15s;
}
.sn-ad-close:hover { background:rgba(255,255,255,0.28); }
.sn-ad-content {
  flex:1; padding:56px 28px 28px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; min-height:300px;
}
.sn-ad-default-graphic {
  width:220px; height:220px; border-radius:20px;
  background:linear-gradient(135deg,#E8222A,#ff6b35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 16px 50px rgba(232,34,42,0.45);
}
.sn-ad-default-graphic .adg-logo { font-family:'DM Sans',sans-serif; font-size:2rem; font-weight:900; color:white; }
.sn-ad-cta {
  padding:11px 32px; background:white; color:var(--sn-red);
  border:none; border-radius:30px; font-family:'DM Sans',sans-serif;
  font-size:.875rem; font-weight:700; cursor:pointer; letter-spacing:.03em;
}
.sn-ad-continue {
  font-family:'DM Sans',sans-serif; font-size:.8rem; color:rgba(255,255,255,0.5);
  background:none; border:none; cursor:pointer; text-decoration:underline;
}
.sn-ad-continue:hover { color:rgba(255,255,255,0.8); }
.sn-ad-custom { width:100%; text-align:center; }

/* ════════════════════════════════════════
   NEW STORIES NOTIFICATION
   Pill that slides down from top
════════════════════════════════════════ */
@keyframes sn-slidein { from{transform:translateX(-50%) translateY(-100%)} to{transform:translateX(-50%) translateY(0)} }
@keyframes sn-fadein  { from{opacity:0} to{opacity:1} }
#sn-refresh-banner { animation:sn-slidein .35s cubic-bezier(.4,0,.2,1); }

/* ════════════════════════════════════════
   MOBILE  (≤ 640px)
   Same card-stack as desktop — touch events drive the flip.
   No scroll-snap needed.
════════════════════════════════════════ */
@media (max-width: 640px) {
  .shortnews-wrap { padding:0; min-height:100dvh; align-items:flex-start; background:#111; }
  .sn-stage { width:100%; height:100dvh; gap:0; }
  .sn-nav-arrows,.sn-counter,.sn-kb-hint { display:none; }
  .sn-viewport {
    width:100%; height:100dvh; border-radius:0; box-shadow:none;
  }
  .sn-card-body  { padding:10px 16px 6px; }
  .sn-card-footer{ padding:7px 16px 14px; }
  .sn-headline { font-size:.92rem; -webkit-line-clamp:4; }
  .sn-gist { font-size:.86rem; -webkit-line-clamp:6; }

  /* Swipe hint */
  .sn-mobile-hint {
    position:absolute; bottom:72px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:4px;
    animation:sn-bounce 1.5s ease-in-out infinite; opacity:.55; pointer-events:none; z-index:5;
  }
  .sn-mobile-hint span {
    font-size:.65rem; font-weight:600; color:var(--sn-muted);
    letter-spacing:.06em; text-transform:uppercase; font-family:'DM Sans',sans-serif;
  }
  @keyframes sn-bounce {
    0%,100%{ transform:translateX(-50%) translateY(0); }
    50%    { transform:translateX(-50%) translateY(6px); }
  }
}

/* ═══════════════════════════════════════════════════════════
   AD CARD — Way2News style (ad + recommended + flip to skip)
═══════════════════════════════════════════════════════════ */
#sn-ad-overlay {
  position:fixed; inset:0; z-index:99999;
  display:none; flex-direction:column;
  background:#1a1a1a; overflow:hidden;
}
.sn-adc-wrap {
  display:flex; flex-direction:column; height:100%;
  font-family:'DM Sans',sans-serif;
}
.sn-adc-ad-zone {
  flex-shrink:0; padding:12px;
  min-height:160px; background:#111;
  display:flex; align-items:center; justify-content:center;
}
.sn-adc-placeholder {
  display:flex; flex-direction:column; align-items:center;
  gap:6px; color:#aaa; font-size:.85rem;
}
.sn-adc-placeholder b { color:#fff; font-size:1rem; }
.sn-ad-custom { width:100%; }
.sn-adc-rec {
  flex:1; overflow-y:auto; padding:12px 12px 4px;
}
.sn-adc-rec-title {
  font-size:.72rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
  margin:0 0 10px;
}
.sn-adc-rec-list { display:flex; flex-direction:column; gap:8px; }
.sn-adc-loading { color:#888; font-size:.8rem; text-align:center; padding:16px 0; }
.sn-adc-item {
  display:flex; gap:10px; align-items:center;
  text-decoration:none; color:#fff;
  background:rgba(255,255,255,.05); border-radius:8px;
  padding:8px 10px;
}
.sn-adc-item:active { background:rgba(255,255,255,.1); }
.sn-adc-thumb {
  width:68px; height:52px; border-radius:6px;
  overflow:hidden; flex-shrink:0; background:#333;
}
.sn-adc-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.sn-adc-nothumb {
  width:100%; height:100%; display:flex;
  align-items:center; justify-content:center; font-size:1.4rem;
}
.sn-adc-info { flex:1; min-width:0; }
.sn-adc-headline {
  font-size:.82rem; font-weight:600; line-height:1.35;
  color:#fff; margin:0 0 4px;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.sn-adc-meta { font-size:.68rem; color:rgba(255,255,255,.45); }
.sn-adc-skip {
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  gap:6px; width:100%; padding:14px;
  background:rgba(255,255,255,.08);
  border:none; border-top:1px solid rgba(255,255,255,.1);
  color:#fff; font-family:'DM Sans',sans-serif;
  font-size:.78rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer;
}
.sn-adc-skip:disabled { opacity:.4; cursor:not-allowed; }
.sn-adc-skip:not(:disabled):active { background:rgba(255,255,255,.15); }

/* ═══════════════════════════════════════════════════════════
   CATEGORY DRAWER — Way2News sidebar style
   Full-screen overlay: left icon rail + right content panel
═══════════════════════════════════════════════════════════ */
#sn-cat-drawer {
  position:fixed; inset:0; z-index:99998;
  display:flex; transform:translateX(-100%);
  transition:transform .28s cubic-bezier(0.4,0,0.2,1);
  font-family:'DM Sans',sans-serif;
}
#sn-cat-drawer.sn-cd-open { transform:translateX(0); }

/* Left icon rail — dark navy like Way2News */
.sn-cd-rail {
  width:80px; flex-shrink:0;
  background:#14192d;
  display:flex; flex-direction:column;
  align-items:center; padding:8px 0;
  overflow-y:auto;
}
.sn-cd-close {
  background:none; border:none; color:rgba(255,255,255,.6);
  padding:10px; cursor:pointer; margin-bottom:8px;
}
.sn-cd-close:active { color:#fff; }
.sn-cd-icons { display:flex; flex-direction:column; gap:2px; width:100%; }
.sn-cd-icon-btn {
  display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:10px 4px;
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.6); width:100%;
  transition:background .15s;
}
.sn-cd-icon-btn.active {
  background:rgba(255,255,255,.1); color:#fff;
  border-right:3px solid var(--sn-red,#E8222A);
}
.sn-cd-icon-btn:active { background:rgba(255,255,255,.08); }
.sn-cd-icon-emoji { font-size:1.4rem; line-height:1; }
.sn-cd-icon-label {
  font-size:.58rem; font-weight:600; text-align:center;
  line-height:1.2; max-width:68px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Right content panel — light background like Way2News */
.sn-cd-panel {
  flex:1; background:#f2f2f2;
  overflow-y:auto; min-width:0;
}
.sn-cd-panel-inner { padding:12px; }
.sn-cd-sec-title {
  font-size:1rem; font-weight:800; color:#111;
  margin:0 0 12px; padding:0;
}
.sn-cd-loading { color:#888; font-size:.82rem; padding:16px 0; text-align:center; }
.sn-cd-err { color:#c00; font-size:.82rem; padding:8px 0; }
.sn-cd-cards { display:flex; flex-direction:column; gap:8px; }

/* Category post card — thumbnail left, headline right */
.sn-cd-card {
  display:flex; gap:10px; align-items:center;
  background:#fff; border-radius:10px;
  padding:8px 10px; text-decoration:none; color:#111;
  box-shadow:0 1px 4px rgba(0,0,0,.07);
}
.sn-cd-card:active { background:#f8f8f8; }
.sn-cd-card-thumb {
  width:72px; height:54px; border-radius:6px;
  overflow:hidden; flex-shrink:0; background:#ddd;
}
.sn-cd-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.sn-cd-nothumb {
  width:100%; height:100%; display:flex;
  align-items:center; justify-content:center; font-size:1.5rem;
}
.sn-cd-card-body { flex:1; min-width:0; }
.sn-cd-card-headline {
  font-size:.82rem; font-weight:600; line-height:1.4;
  color:#111; margin:0 0 3px;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.sn-cd-card-meta { font-size:.68rem; color:#888; }
.sn-cd-load-more {
  display:block; width:100%; margin-top:10px;
  padding:10px; border-radius:8px;
  background:var(--sn-red,#E8222A); color:#fff;
  border:none; font-family:'DM Sans',sans-serif;
  font-size:.8rem; font-weight:700; cursor:pointer;
  text-align:center;
}
.sn-cd-load-more:active { opacity:.85; }

/* Desktop category menu button in top bar */
.sn-cat-menu-btn {
  background:rgba(255,255,255,.1); border:none; border-radius:6px;
  color:#fff; padding:6px 8px; cursor:pointer;
  display:flex; align-items:center;
}
.sn-cat-menu-btn:hover { background:rgba(255,255,255,.2); }

/* Mobile floating category button */
#sn-mob-cat-btn {
  position:fixed; bottom:80px; left:14px; z-index:9997;
  width:42px; height:42px; border-radius:50%;
  background:rgba(20,25,45,.88); border:none;
  color:#fff; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  box-shadow:0 3px 12px rgba(0,0,0,.35);
}
#sn-mob-cat-btn:active { transform:scale(.94); }