/* ─────────────────────────────────────────────────────────────────
   Nino Hub — styles
   ───────────────────────────────────────────────────────────────── */
:root{
  --bg:#f5f5f7;
  --paper:#ffffff;
  --ink:#0a0a0c;
  --ink-soft:#5e5e63;
  --rule:#e2e2e6;
  --accent:#1d4ed8;
}
html.dark{
  --bg:#0a0a0c;
  --paper:#141417;
  --ink:#f5f5f7;
  --ink-soft:#a1a1a8;
  --rule:#27272c;
  --accent:#f5f5f7;
}
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--ink);
  font-family:'Inter Tight','Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .25s ease, color .25s ease;
  min-height:100vh;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}

/* Subtle bg dotgrid */
body::before{
  content:""; position:fixed; inset:0;
  background-image:radial-gradient(circle, var(--rule) 1px, transparent 1px);
  background-size:24px 24px;
  opacity:.5; pointer-events:none; z-index:0;
}

/* Page shell — centered narrow column */
.page{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding:48px 20px 32px;
  position:relative; z-index:1;
}
.col{ width:100%; max-width:520px; display:flex; flex-direction:column; gap:14px }

/* ── Header ───────────────────────────────────────────────────── */
.head{ text-align:center; margin-bottom:8px }
.avatar{
  width:104px; height:104px; border-radius:50%;
  margin:0 auto 18px;
  background:#0a0a0c;
  position:relative; overflow:hidden;
  border:2px solid var(--paper);
  box-shadow:0 8px 30px -10px rgba(0,0,0,.25), 0 0 0 1px var(--rule);
}
.avatar img{
  width:100%; height:100%; object-fit:cover;
  display:block;
}
.avatar .verified{
  position:absolute; bottom:-2px; right:-2px;
  width:28px; height:28px; border-radius:50%;
  background:#1d4ed8; border:3px solid var(--bg);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.name{
  font-family:'Inter Tight',sans-serif; font-weight:700;
  font-size:32px; letter-spacing:-0.025em; line-height:1.05;
  margin:0;
}
.name .serif{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400 }
.handle{
  margin-top:8px;
  font-family:'Inter',sans-serif; font-size:14px; color:var(--ink-soft);
}
.tag-row{ display:flex; gap:6px; justify-content:center; margin-top:14px; flex-wrap:wrap }
.tag{
  font-size:11px; font-weight:500;
  padding:4px 10px; border-radius:999px;
  border:1px solid var(--rule);
  color:var(--ink-soft);
  white-space:nowrap;
}
.tag.solid{ background:var(--ink); color:var(--bg); border-color:var(--ink) }
.tag .led{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:#ff3b30; margin-right:5px; vertical-align:1px;
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%   { box-shadow:0 0 0 0 rgba(255,59,48,.5) }
  100% { box-shadow:0 0 0 6px rgba(255,59,48,0) }
}

/* ── Stats bar ────────────────────────────────────────────────── */
.stats{
  display:flex; justify-content:space-around; align-items:center;
  background:var(--paper); border-radius:14px;
  padding:14px 8px;
  margin:8px 0 4px;
}
.stat{ text-align:center; flex:1; padding:0 8px }
.stat-num{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:22px; letter-spacing:-0.02em; line-height:1 }
.stat-lbl{ font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-top:5px }
.stat-divider{ width:1px; height:28px; background:var(--rule); flex:0 0 auto }
.shimmer{
  display:inline-block; opacity:.4;
  animation:shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer{ 50% { opacity:.15 } }

/* ── Featured (last video) card ───────────────────────────────── */
.featured{
  background:var(--paper); border-radius:16px;
  overflow:hidden;
  display:flex; align-items:stretch;
  transition:transform .15s ease, box-shadow .2s ease;
  cursor:pointer;
}
.featured:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -22px rgba(0,0,0,.22) }
.featured-thumb{
  flex:0 0 140px;
  background:radial-gradient(80% 100% at 40% 30%, #2a2a30 0%, #0a0a0c 70%);
  position:relative;
  background-size:cover; background-position:center;
}
.featured-thumb::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.04) 14px 15px);
}
.featured-thumb .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.96); color:#0a0a0c;
  display:flex; align-items:center; justify-content:center;
  z-index:1;
}
.featured-thumb .play svg{ margin-left:2px }
.featured-body{ flex:1; padding:14px 16px; display:flex; flex-direction:column; justify-content:center }
.featured-eyebrow{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
  display:flex; align-items:center; gap:6px;
}
.featured-eyebrow .led{ width:6px; height:6px; border-radius:50%; background:#ff3b30; animation:pulse 1.8s ease-out infinite }
.featured-title{
  margin-top:8px;
  font-family:'Inter Tight',sans-serif; font-weight:600;
  font-size:16px; letter-spacing:-0.015em; line-height:1.25;
  color:var(--ink);
}
.featured-meta{ margin-top:6px; font-size:12px; color:var(--ink-soft) }

/* ── Section divider ──────────────────────────────────────────── */
.divider{
  display:flex; align-items:center; gap:12px;
  margin:14px 4px 0;
}
.divider .lbl{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:600 }
.divider .line{ flex:1; height:1px; background:var(--rule) }

/* ── Link rows ────────────────────────────────────────────────── */
.link{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  background:var(--paper);
  border-radius:14px;
  transition:transform .12s ease, box-shadow .2s ease;
  cursor:pointer;
  position:relative; overflow:hidden;
}
.link:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -18px rgba(0,0,0,.22) }
.link .icon{
  flex:0 0 42px; width:42px; height:42px; border-radius:11px;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  border:1px solid var(--rule);
}
.link.brand-yt .icon  { background:#FF0000; color:#fff; border-color:transparent }
.link.brand-gh .icon  { background:#0a0a0c; color:#fff; border-color:transparent }
.link.brand-x  .icon  { background:#0a0a0c; color:#fff; border-color:transparent }
.link.brand-ig .icon  { background:linear-gradient(135deg,#f58529,#dd2a7b 50%,#8134af 90%); color:#fff; border-color:transparent }
.link.brand-tt .icon  { background:#0a0a0c; color:#fff; border-color:transparent }
.link.brand-mail .icon{ background:var(--accent); color:#fff; border-color:transparent }
html.dark .link.brand-gh .icon{ background:#f5f5f7; color:#0a0a0c }
html.dark .link.brand-x  .icon{ background:#f5f5f7; color:#0a0a0c }
html.dark .link.brand-tt .icon{ background:#f5f5f7; color:#0a0a0c }

.link .body{ flex:1; min-width:0 }
.link .title{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:16px; letter-spacing:-0.01em; line-height:1.15 }
.link .sub{ font-size:13px; color:var(--ink-soft); margin-top:2px }
.link .count{
  font-family:'Inter Tight',sans-serif; font-weight:600; font-size:14px;
  color:var(--ink-soft);
  background:var(--bg);
  padding:4px 9px; border-radius:8px;
  border:1px solid var(--rule);
  white-space:nowrap;
}
.link .arrow{ flex:0 0 auto; color:var(--ink-soft); transition:transform .2s ease, color .2s ease }
.link:hover .arrow{ transform:translateX(4px); color:var(--ink) }

/* ── Footer ───────────────────────────────────────────────────── */
footer{
  margin-top:32px; padding-top:24px;
  text-align:center;
  font-size:12px; color:var(--ink-soft);
  display:flex; flex-direction:column; gap:6px;
}
footer .copy{ font-family:'Inter',sans-serif }
footer .mode{
  display:inline-flex; gap:4px; margin-top:12px;
  background:var(--paper); padding:4px; border-radius:999px;
  align-self:center;
}
footer .mode button{
  padding:6px 14px; border-radius:999px;
  font-size:12px; color:var(--ink-soft); font-weight:500;
}
footer .mode button.on{ background:var(--ink); color:var(--bg) }