/* ============================================================
   Nichora — dark glass

   A near-black canvas lit from behind by three soft colour
   fields. Every panel is a frosted sheet floating over that
   light, so the colour reads through the glass rather than
   sitting on top of it.

   Two colours carry meaning and nothing else does:
     lime   — the interface, and any figure worth reading
     ember  — reserved for videos past 30x their own median

   Long lists drop the blur on purpose. Frosted glass under a
   hundred scrolling rows costs legibility and frame rate, and
   neither is worth a texture.
   ============================================================ */

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

:root {
  --void:   #0b0c0e;
  --panel:  rgba(20, 21, 24, .72);
  --solid:  #151719;
  --raised: rgba(255, 255, 255, .06);
  --rule:   rgba(255, 255, 255, .07);
  --rule-2: rgba(255, 255, 255, .14);

  --bone:  #eceef2;
  --mute:  #9aa2b1;
  --faint: #7f8694;

  --lime:    #c4f042;
  --lime-in: #1a2408;
  --ember:   #ff8a3d;
  --ember-in:#2b1305;

  --hot:   var(--lime);
  --cool:  #6fdcb6;
  --alert: #ff6b5e;

  /* legacy names kept so page-level CSS keeps working */
  --t0: rgba(255,255,255,.16);
  --t1: #8fb33a;
  --t2: #a8d13e;
  --t3: var(--ember);
  --t4: var(--lime);

  --glass: blur(26px) saturate(140%);
  --r-card: 22px;
  --r-soft: 14px;

  --display: 'Inter Tight', system-ui, sans-serif;
  --ui: 'Inter Tight', system-ui, -apple-system, sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh;
  font-family: var(--ui);
  font-variant-numeric: tabular-nums;
  font-size: 14px; line-height: 1.55;
  color: var(--bone);
  background: var(--void);
  background-image:
    radial-gradient(680px 380px at 12% -4%,  rgba(95, 122, 18, .40) 0%, rgba(0,0,0,0) 64%),
    radial-gradient(720px 400px at 90%  4%,  rgba(122, 77, 18, .34) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(820px 460px at 58% 104%, rgba(47, 74, 58, .38) 0%, rgba(0,0,0,0) 62%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
::selection { background: var(--lime); color: var(--lime-in); }

/* ------------------------------------------------- the sheet */
.sheet, .card, .rival, .curve, .stats, .read, .hook, .toast {
  background: var(--panel);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  border: 1px solid var(--rule);
}

/* ------------------------------------------------------ nav */
header {
  position: sticky; top: 14px; z-index: 40;
  margin: 14px 16px 0;
  display: flex; align-items: center; gap: 14px;
  padding: 7px 7px 7px 18px;
  border-radius: 999px;
  background: var(--panel);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  border: 1px solid var(--rule);
}
.mark { font-size: 15.5px; font-weight: 700; letter-spacing: -.035em; }
.mark i { font-style: normal; color: var(--lime); }

nav { margin-left: auto; display: flex; gap: 2px; }
nav a {
  color: var(--mute); text-decoration: none; font-size: 12.5px; font-weight: 500;
  padding: 7px 15px; border-radius: 999px;
}
nav a:hover { color: var(--bone); background: var(--raised); }
nav a.on { background: var(--lime); color: var(--lime-in); font-weight: 600; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--lime); outline-offset: 2px;
}

main { padding: 22px 16px 80px; }

/* ----------------------------------------------- typography */
h1, h2, h3 { font-family: var(--display); letter-spacing: -.03em; margin: 0; }
h1 { font-size: 21px; font-weight: 700; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 5px; }

.sub, .lede, .hint, .tag { color: var(--faint); margin: 0 0 16px; max-width: 64ch; }
.hint { font-size: 12.5px; margin: 10px 4px 0; }
.err, .note.bad { color: var(--alert); margin: 18px 4px; }
.note.good { color: var(--cool); }
.state, .skeleton, .empty { color: var(--faint); padding: 52px 0; text-align: center; }
.dim { color: var(--faint); }

/* ---------------------------------------------------- forms */
input, select, textarea {
  font: inherit; color: var(--bone);
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 10px; padding: 9px 13px;
}
input::placeholder { color: var(--faint); }
input:focus, select:focus { border-color: var(--rule-2); }

button {
  font: inherit; cursor: pointer;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--lime); color: var(--lime-in);
  font-weight: 650; padding: 9px 20px;
}
button:hover { filter: brightness(1.06); }
button:disabled { opacity: .4; cursor: default; filter: none; }

button.quiet, .reset, .act, .drop, .tools button, .tabs button {
  background: var(--raised); color: var(--mute);
  border: 1px solid var(--rule); font-weight: 500;
}
button.quiet:hover, .reset:hover, .act:hover, .tools button:hover, .tabs button:hover {
  color: var(--bone); border-color: var(--rule-2);
}
.act.danger:hover, .drop:hover { color: var(--alert); border-color: var(--alert); }
.act.go:hover { color: var(--cool); border-color: var(--cool); }
.tools button.done { color: var(--cool); border-color: var(--cool); }
.tabs button[aria-pressed="true"] {
  background: var(--lime); color: var(--lime-in); border-color: var(--lime); font-weight: 650;
}

.search { display: flex; gap: 10px; }
.search input { flex: 1; padding: 14px 18px; font-size: 15px; border-radius: 999px; }
.search button { padding: 14px 28px; font-size: 14.5px; font-weight: 700; }

/* ---------------------------------------------------- tables */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-weight: 500; font-size: 11.5px; color: var(--faint);
  padding: 0 14px 9px 0; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); }
tr:hover td { background: var(--raised); }
td a { color: inherit; text-decoration: none; }
td a:hover { color: var(--lime); }
.num { text-align: right; }

/* ------------------------------------------------- the signal */
.bar, .meter {
  height: 4px; border-radius: 4px;
  background: rgba(255,255,255,.07); margin-top: 8px; overflow: hidden;
}
.bar i, .meter i { display: block; height: 100%; border-radius: 4px; background: var(--lime); }
.bar.blaze i, .meter.hot i { background: var(--ember); }

/* the multiple, as a filled pill */
.mult, .mx { text-align: right; min-width: 64px; }
.mult b, .mx b {
  display: inline-block; font-size: 13px; font-weight: 650; letter-spacing: -.02em;
  padding: 6px 14px; border-radius: 999px;
  background: var(--lime); color: var(--lime-in);
}
.mult.blaze b, .mx.hot b { background: var(--ember); color: var(--ember-in); }
.mult.flat b, .mx.flat b { background: var(--raised); color: var(--mute); }
.mult span, .mx span { display: block; color: var(--faint); font-size: 10.5px; margin-top: 4px; }

.pill, .badge, .kind, .word {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
  background: var(--raised); color: var(--mute);
}
.p-blaze { background: var(--ember); color: var(--ember-in); font-weight: 650; }
.p-warm  { background: var(--lime); color: var(--lime-in); font-weight: 650; }
.p-flat  { background: var(--raised); color: var(--faint); }
.active { background: rgba(111,220,182,.16); color: var(--cool); }
.suspended { background: rgba(255,107,94,.16); color: #ffa89f; }
.locked { background: rgba(255,138,61,.16); color: var(--ember); }
.free { background: var(--raised); color: var(--faint); }
.pro { background: rgba(143,179,58,.18); color: #cbe97a; }
.agency { background: var(--lime); color: var(--lime-in); font-weight: 600; }
.win { color: var(--cool); }
.fail { color: var(--alert); }

.heat { position: relative; display: inline-block; min-width: 46px; padding: 3px 10px; border-radius: 999px; }
.heat::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--alert); opacity: calc(var(--w) * .5); }
.heat span { position: relative; font-weight: 700; }

/* --------------------------------------------- panels, rows */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-radius: var(--r-soft); overflow: hidden; gap: 0;
}
.stat { padding: 15px 18px; border-left: 1px solid var(--rule); }
.stat:first-child { border-left: 0; }
.stat b { display: block; font-size: 23px; font-weight: 650; letter-spacing: -.03em; }
.stat span { color: var(--faint); font-size: 11.5px; }

.read, .hook {
  border-radius: var(--r-soft); padding: 16px 20px;
  line-height: 1.75; color: var(--mute);
}
.read { margin: 20px 0 40px; border-left: 2px solid var(--lime); }
.read b, .hook { color: var(--bone); }
.hook { font-size: 15.5px; margin-bottom: 30px; border-left: 2px solid var(--lime); }

.curve { border-radius: var(--r-card); padding: 22px; }
section { margin-bottom: 44px; }

/* video rows — solid, no blur, so long lists stay crisp */
.vid {
  display: grid; grid-template-columns: 150px 1fr auto;
  gap: 16px; align-items: center; padding: 12px;
  border-radius: var(--r-soft); text-decoration: none; color: inherit; position: relative;
}
.vid:hover { background: var(--raised); }
.vid + .vid { margin-top: 2px; }
.vid .thumb, .vid img {
  width: 150px; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 12px; background: var(--raised); display: block;
}
.vid .title, .vid .t {
  font-weight: 500; margin-bottom: 6px; color: inherit; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vid:hover .title, .vid .t:hover { color: var(--lime); }
.vid .facts, .vid .f { color: var(--faint); font-size: 12px; }
.vid .f a { color: var(--mute); text-decoration: none; }
.vid .f a:hover { color: var(--lime); }

/* channel cards */
.card { border-radius: var(--r-card); padding: 17px; position: relative; }
.card:hover, .rival:hover { border-color: var(--rule-2); }
.card .top { display: flex; gap: 12px; align-items: center; margin-bottom: 13px; }
.card img, .rival img { width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--raised); }
.card .nm, .rival .nm {
  font-weight: 600; text-decoration: none; color: inherit; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card .nm:hover, .rival:hover .nm { color: var(--lime); }
.card .hd, .rival .sm { color: var(--faint); font-size: 11.5px; }
.card .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.card .row span { color: var(--faint); }
.big { color: var(--lime); font-weight: 700; font-size: 15px; }

.rival { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r-soft); }
.rival .match { margin-left: auto; text-align: right; flex: none; }
.rival .match b { display: block; color: var(--lime); font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.rival .match span { color: var(--faint); font-size: 10.5px; }

.grid, .rivals { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 11px; }

.save {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: 0; cursor: pointer; padding: 3px;
  color: var(--faint); font-size: 17px; line-height: 1; border-radius: 50%;
}
.save:hover, .save.on { color: var(--lime); background: transparent; }

.words { display: flex; flex-wrap: wrap; gap: 7px; }
.word b { color: var(--lime); font-weight: 700; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  border-radius: 999px; padding: 11px 22px; z-index: 60;
}
.toast:empty { display: none; }

.hide { display: none; }

@media (max-width: 880px) {
  header { margin: 10px 10px 0; padding: 6px 6px 6px 14px; gap: 8px; flex-wrap: wrap; border-radius: 20px; }
  nav { gap: 0; width: 100%; overflow-x: auto; }
  nav a { padding: 6px 11px; font-size: 12px; }
  main { padding: 18px 12px 70px; }
  .vid { grid-template-columns: 108px 1fr; }
  .vid .thumb, .vid img { width: 108px; }
  .mult, .mx { grid-column: 2; text-align: left; padding-right: 0; }
}

/* ============================================================
   Motion

   Three rules kept throughout:
   1. Motion that answers a click is always welcome.
   2. Motion that reveals data is welcome — a bar filling to 65×
      makes the number mean something before you read it.
   3. Motion for its own sake is not. Nothing fades in just
      because it exists.

   Everything below is switched off entirely for anyone who has
   asked their system to reduce motion.
   ============================================================ */

@keyframes nch-rise   { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
@keyframes nch-in     { from { opacity:0 } to { opacity:1 } }
@keyframes nch-pop    { 0% { transform:scale(.86); opacity:0 } 60% { transform:scale(1.04) } 100% { transform:scale(1); opacity:1 } }
@keyframes nch-toast  { from { opacity:0; transform:translate(-50%, 16px) } to { opacity:1; transform:translate(-50%, 0) } }
@keyframes nch-sweep  { from { background-position:-220% 0 } to { background-position:320% 0 } }
@keyframes nch-drift  {
  0%   { transform:translate3d(0,0,0) scale(1) }
  50%  { transform:translate3d(-1.5%, 1.5%, 0) scale(1.04) }
  100% { transform:translate3d(0,0,0) scale(1) }
}
@keyframes nch-spin   { to { transform:rotate(360deg) } }

/* ---- the light behind the glass breathes, very slowly ---- */
body::before {
  content: ''; position: fixed; inset: -12%; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(680px 380px at 12% 4%,  rgba(95, 122, 18, .34) 0%, rgba(0,0,0,0) 64%),
    radial-gradient(720px 400px at 88% 10%, rgba(122, 77, 18, .28) 0%, rgba(0,0,0,0) 62%);
  animation: nch-drift 34s ease-in-out infinite;
}

/* ---- entrance: one orchestrated moment, not a parade ---- */
.rise { animation: nch-rise .5s cubic-bezier(.22,.9,.3,1) both; }
.rise-1 { animation-delay: .04s } .rise-2 { animation-delay: .1s }
.rise-3 { animation-delay: .16s } .rise-4 { animation-delay: .22s }
.rise-5 { animation-delay: .28s } .rise-6 { animation-delay: .34s }

/* results arriving: a short stagger, capped so long lists do not crawl */
.vid, .card, .rival, .item {
  animation: nch-rise .38s cubic-bezier(.22,.9,.3,1) both;
  animation-delay: calc(var(--i, 0) * 26ms);
}

/* ---- the bar is the point: it fills to its value ---- */
.bar i, .meter i {
  width: 0;
  transition: width .85s cubic-bezier(.16,1,.3,1);
}
.bar.ready i, .meter.ready i { width: var(--w, 0%); }

/* ---- the multiple lands with a small pop ---- */
.mult b, .mx b, .tag { animation: nch-pop .34s cubic-bezier(.2,1.2,.3,1) both; animation-delay: 260ms; }

/* ---- interaction ---- */
a, button, .card, .rival, .vid, .item, nav a, .save, input, select {
  transition: color .16s ease, background-color .16s ease, border-color .16s ease,
              transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .2s ease, filter .16s ease;
}
.card:hover, .rival:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.32); }
.vid:hover, .item:hover { transform: translateX(3px); }
button:active, .card:active, .rival:active { transform: translateY(0) scale(.985); }
.save:hover { transform: scale(1.18); }
.save.on { animation: nch-pop .34s cubic-bezier(.2,1.4,.3,1) both; }

/* thumbnails lean in slightly on hover */
.vid .thumb, .vid img, .item img { transition: transform .4s cubic-bezier(.2,.9,.3,1); }
.vid:hover .thumb, .vid:hover img { transform: scale(1.035); }

/* nav pill slides its highlight rather than snapping */
nav a { position: relative; }
nav a.on { animation: nch-pop .28s cubic-bezier(.2,1.2,.3,1) both; }

.toast { animation: nch-toast .28s cubic-bezier(.2,.9,.3,1) both; }

/* ---- loading: a sweep across the shape the content will take ---- */
.state, .skeleton { animation: nch-in .3s ease both; }
.shimmer {
  background: linear-gradient(100deg,
    rgba(255,255,255,.04) 28%, rgba(255,255,255,.09) 46%, rgba(255,255,255,.04) 62%);
  background-size: 260% 100%;
  animation: nch-sweep 1.5s linear infinite;
  border-radius: var(--r-soft);
}
.spin {
  display: inline-block; width: 15px; height: 15px; vertical-align: -2px;
  border: 2px solid var(--rule-2); border-top-color: var(--lime);
  border-radius: 50%; animation: nch-spin .7s linear infinite;
}

/* ---- counters hold their width so the layout does not jitter ---- */
.tick { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .rise, .vid, .card, .rival, .item, .mult b, .mx b, .tag, .toast, .save.on, nav a.on { animation: none !important; }
  .bar i, .meter i { transition: none; width: var(--w, 0%); }
  .card:hover, .rival:hover, .vid:hover, .item:hover { transform: none; box-shadow: none; }
  .shimmer, .spin { animation: none; }
}