:root {
  --bg:#0b0f14; 
  --bg-accent:#10253f; 
  --fg:#E6EDF3; 
  --muted:#9FB0C3; 
  --card: rgba(255,255,255,0.04); 
  --border: rgba(255,255,255,0.10); 
  --accent-grad: linear-gradient(135deg, #6ce5e8, #8b6cf6, #ff7ac6);
  --brand-1:#1f9cf0;
  --brand-2:#ef4444;
  --link:#60a5fa;
}
.theme-light { 
  --bg:#f5f7fb; 
  --bg-accent:#e8eef7; 
  --fg:#1f2937; 
  --muted:#475569; 
  --card:#ffffff; 
  --border: rgba(0,0,0,0.08); 
  --accent-grad: linear-gradient(135deg, #06b6d4, #8b5cf6, #fb7185);
  --brand-1:#0ea5e9;
  --brand-2:#ef4444;
  --link:#0ea5e9;
}

* { box-sizing: border-box }
html, body { height: 100% }
body { 
  margin:0; 
  background: radial-gradient(1000px 600px at 20% -10%, var(--bg-accent) 0%, var(--bg) 60%), var(--bg); 
  color: var(--fg); 
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; 
  line-height: 1.5;
}

.container { max-width: 980px; margin: 20px auto; padding: 0 16px }

header.app-header { 
  display:grid; 
  grid-template-columns:auto 1fr auto; 
  gap:12px; 
  align-items:center; 
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-1) 18%, transparent), color-mix(in srgb, var(--brand-2) 18%, transparent)); 
  border:1px solid var(--border); 
  padding: 10px 12px; 
  border-radius: 14px; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
  backdrop-filter: blur(6px); 
}
.brand { display:flex; align-items:center; gap:10px }
.brand-logo { width:28px; height:28px; border-radius:7px; box-shadow: 0 4px 12px rgba(0,0,0,0.2) }
.title { margin:0; font-size:18px; font-weight:800 }
.subtitle { margin:0; font-size:12px; color: var(--muted); line-height:1 }
.header-actions { display:flex; align-items:center; gap:10px }
.bsky-link { display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:50%; background: color-mix(in srgb, var(--brand-1) 20%, transparent); text-decoration:none }

.theme-toggle, .chip, .btn {
  background: transparent; 
  border:1px solid var(--border); 
  color: var(--fg); 
  padding:6px 10px; 
  border-radius:999px; 
  font-size:12px; 
  cursor:pointer;
}
.btn.primary { background: var(--accent-grad); color:#fff; border:none }
.chip.active { border-color: var(--brand-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 20%, transparent) }
.chip[disabled] { opacity: 0.6; cursor: default }

.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0 }
.chips { display:flex; gap:8px; flex-wrap:wrap }

.cards { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr } }

.card { 
  background: var(--card); 
  border: 1px solid var(--border); 
  border-radius: 16px; 
  padding: 16px; 
  backdrop-filter: blur(8px) saturate(110%); 
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  overflow: hidden;
}
.card:hover { transform: translateY(-1px); transition: transform .12s ease }

.muted { color: var(--muted) }
a { color: var(--link); text-decoration: none }
a:hover { text-decoration: underline }

/* Prevent long strings/URLs from overflowing */
.card, .card * { word-break: break-word; overflow-wrap: anywhere; }

.url-card .header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.meta { display:flex; align-items:center; gap:10px }
.rank-badge { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; font-weight:800; font-size:12px; color:#fff; }
.rank-badge.top { background: linear-gradient(135deg, #FF6B35, #FFA500) }
.rank-badge.high { background: linear-gradient(135deg, #2E86DE, #54A0FF) }
.rank-badge.normal { background: #2eae7a }
.badge { font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background: color-mix(in srgb, var(--card) 60%, transparent) }

.thumb { position:relative; display:block; width:100%; overflow:hidden; border-radius:12px; border:1px solid var(--border); background: color-mix(in srgb, var(--card) 40%, transparent); aspect-ratio: 16/9; margin:8px 0 }
.thumb img { width:100%; height:100%; object-fit:cover; display:block }

.metrics { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px }
.metrics .left { display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.metric { display:flex; align-items:center; gap:6px; font-size:13px; color: var(--fg) }
.metric .icon { width:16px; height:16px; opacity:0.9 }

.stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px }
@media (max-width: 740px) { .stats-grid { grid-template-columns: repeat(2, 1fr) } }
.stat { text-align:center; padding:10px; border-radius:10px; border:1px solid var(--border); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-1) 12%, transparent), color-mix(in srgb, var(--brand-2) 12%, transparent)) }
.stat .num { font-size:18px; font-weight:800 }
.stat .label { font-size:11px; color: var(--muted) }

.section-title { font-size:16px; font-weight:700; margin-bottom:8px }
.posts { display:flex; flex-direction:column; gap:10px }
.post { padding:12px; border-left:4px solid color-mix(in srgb, var(--brand-1) 60%, transparent); border-radius:8px; background: color-mix(in srgb, var(--card) 60%, transparent); border:1px solid var(--border) }
.post .row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px }
.post .handle { font-weight:700 }
.post .time { font-size:12px; color: var(--muted) }

h1.page { font-size:18px; font-weight:800; margin:0 0 6px }

/* Utilities */
.spacer { height: 8px }
.mb-16 { margin-bottom: 16px }
.mb-8 { margin-bottom: 8px }
.mt-8 { margin-top: 8px }

/* Detail layout */
.detail-grid { display:grid; grid-template-columns: 2fr 1fr; gap:16px }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr } }
.span-2 { grid-column: 1 / -1 }

/* Posts grid inside the Recent Posts card */
.posts-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px }
@media (max-width: 900px) { .posts-grid { grid-template-columns: 1fr } }

/* Line clamp helpers */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }