/* Cinematic fork · themed via CSS variables */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --cin-bg: #07090E;
  --cin-accent: #00F59B;
  --cin-accent-dim: #00F59B88;
  --cin-accent-glow: #00F59B44;
  --cin-accent-bg: #00F59B0A;
  --cin-accent-border: #00F59B33;
  --cin-hero-grad: linear-gradient(160deg,#0D1F1A,#07090E 60%);
  --cin-stripe: rgba(0,245,155,.05);
  --cin-hero-h: 420px;
  --cin-font: Rajdhani, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body { background: var(--cin-bg); }

.lab-chip {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,.5); text-decoration: none;
  padding: 6px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
  background: rgba(6, 8, 14, 0.85); backdrop-filter: blur(8px);
}

.app {
  max-width: 430px; margin: 0 auto; min-height: 100dvh;
  font-family: var(--cin-font); color: #fff; padding-bottom: 32px;
  position: relative;
}

@keyframes cin-scan { from { top: -2px; } to { top: 100vh; } }
@keyframes cin-fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.cin-scan { position: fixed; inset: 0; pointer-events: none; z-index: 99; overflow: hidden; }
.cin-scan i {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--cin-accent) 6%, transparent), transparent);
  animation: cin-scan 6s linear infinite;
}

.cin-hero { position: relative; height: var(--cin-hero-h); overflow: hidden; }
.cin-hero-bg { position: absolute; inset: 0; background: var(--cin-hero-grad); }
.cin-hero-grid { position: absolute; inset: 0; opacity: .35; width: 100%; height: 100%; }
.cin-hero-stripe {
  position: absolute; top: -80px; right: -40px; width: 260px; height: 600px;
  background: linear-gradient(160deg, var(--cin-stripe), transparent); transform: rotate(8deg);
}
.cin-photo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 72% 28%, color-mix(in srgb, var(--cin-accent) 18%, transparent), transparent 55%),
    linear-gradient(180deg, transparent 40%, var(--cin-bg) 92%),
    linear-gradient(135deg, #1a2030 0%, #0a0c14 100%);
}
.cin-photo-sil {
  position: absolute; right: -20px; bottom: 0; width: 72%; height: 88%;
  background: linear-gradient(180deg, #ffffff08, #ffffff03);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  opacity: .5;
}
.cin-photo::after {
  content: '⌖'; position: absolute; right: 18%; top: 22%;
  font-size: 80px; opacity: .08;
}

.cin-score {
  position: absolute; top: 48px; right: 16px; z-index: 3; text-align: right;
  animation: cin-fadeUp .6s ease .2s both;
}
.cin-score.glass {
  top: 40px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.06); backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--cin-accent) 35%, transparent);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.cin-score.center {
  left: 50%; right: auto; transform: translateX(-50%); top: auto; bottom: 108px;
  text-align: center; width: max-content;
}
.cin-score-lbl { font-size: 9px; letter-spacing: .22em; color: var(--cin-accent-dim); }
.cin-score-val {
  font-size: 42px; font-weight: 700; line-height: 1; color: var(--cin-accent);
  text-shadow: 0 0 24px var(--cin-accent-glow);
}
.cin-score-votes { font-size: 9px; letter-spacing: .12em; color: #ffffff55; margin-top: 2px; }

.cin-hero-content {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 18px 24px; z-index: 2;
  animation: cin-fadeUp .6s ease .35s both;
}
.cin-jersey { font-size: 11px; letter-spacing: .14em; color: var(--cin-accent-dim); margin-bottom: 4px; }
.cin-name-first { font-size: 18px; letter-spacing: .28em; color: #ffffff88; }
.cin-name-last { font-size: 46px; font-weight: 700; line-height: .92; letter-spacing: .02em; margin: 2px 0 10px; }
.cin-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #ffffff66; flex-wrap: wrap; }
.cin-meta-sep { width: 1px; height: 10px; background: #ffffff22; }
.cin-team-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; font-size: 9px; font-weight: 700;
  border: 1.5px solid; margin-right: 4px; vertical-align: middle;
}

/* Ultra-compact hero (Compact D) */
.cin-hero.compact { height: var(--cin-hero-h); }
.cin-hero.compact .cin-hero-grid { opacity: .22; }
.cin-hero.compact .cin-hero-stripe { opacity: .6; }
.cin-hero.compact .cin-hero-content {
  position: absolute; inset: 0;
  padding: 0 14px 8px;
}
.cin-hero.compact .cin-score-top {
  position: absolute; top: 22px; right: 14px;
  text-align: right; animation: none;
}
.cin-hero.compact .cin-score-top .cin-score-lbl {
  font-size: 8px; margin: 0; line-height: 1;
}
.cin-hero.compact .cin-score-top .cin-score-val {
  font-size: 32px; line-height: 1; margin-top: 5px;
}
.cin-hero.compact .cin-score-top .cin-score-verdict {
  font-size: 15px; font-weight: 700; line-height: 1.15; margin-top: 5px;
}
.cin-hero.compact .cin-score-top .cin-score-stars {
  font-size: 13px; letter-spacing: .08em; margin-top: 2px; line-height: 1;
}
.cin-stars { font-style: normal; letter-spacing: .06em; }
.cin-hero.compact .cin-score-top .cin-score-votes {
  font-size: 8px; margin-top: 3px; line-height: 1.2;
}
.cin-hero.compact .cin-hero-main {
  position: absolute; left: 14px; right: 14px; bottom: 8px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
}
.cin-hero.compact .cin-hero-left {
  min-width: 0; flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
}
.cin-hero.compact .cin-jersey {
  font-size: 10px; margin: 0 0 3px; line-height: 1.2;
}
.cin-hero.compact .cin-name-first {
  font-size: 16px; letter-spacing: .26em; line-height: 1.2;
  margin: 0 0 2px;
}
.cin-hero.compact .cin-name-last {
  font-size: 38px; line-height: 1; letter-spacing: .02em;
  margin: 0; padding: 0;
}
.cin-hero.compact .cin-meta {
  margin-top: 6px; font-size: 11px; gap: 6px; line-height: 1.2;
}
.cin-hero.compact .cin-hero-right {
  flex-shrink: 0; align-self: flex-end;
  transform: translateY(2px);
}
.cin-hero-team-side {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--cin-font); color: inherit;
  -webkit-appearance: none; appearance: none;
  transition: transform .12s;
}
.cin-hero-team-side:active { transform: scale(.96); }
.cin-hero-team-side:focus-visible { outline: 2px solid var(--cin-accent); outline-offset: 3px; border-radius: 8px; }
.cin-hero-team-mark {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1.5px solid; background: rgba(0,0,0,.38);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 4px 14px rgba(0,0,0,.32);
}
.cin-hero-team-lbl {
  font-size: 9px; letter-spacing: .08em; color: #ffffff66;
  text-align: center; line-height: 1.2;
  text-transform: uppercase; white-space: nowrap;
}
.cin-quick.compact .cin-qc { padding: 8px 4px; }
.cin-quick.compact .cin-qv { font-size: 14px; }
.cin-quick.compact .cin-ql { font-size: 7px; margin-top: 1px; }
.cin-quick { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid #ffffff0c; border-bottom: 1px solid #ffffff0c; }
.cin-quick.cin-quick--facts { grid-template-columns: repeat(3,1fr); }
.cin-quick.cin-quick--facts .cin-qc:nth-child(-n+3) { border-bottom: 1px solid #ffffff0c; }
.cin-qc { padding: 12px 6px; text-align: center; border-right: 1px solid #ffffff0c; }
.cin-qc.last { border-right: none; }
.cin-qv { font-size: 16px; font-weight: 700; }
.cin-ql { font-size: 8px; letter-spacing: .14em; color: #ffffff44; margin-top: 2px; }

.cin-tabs {
  display: grid; grid-template-columns: repeat(4,1fr); padding: 0 12px; margin-top: 12px;
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--cin-bg) 92%, transparent);
  backdrop-filter: blur(8px);
}
.cin-tabs--2 { grid-template-columns: 1fr 1fr; }
.cin-tab {
  padding: 10px 4px; border: none; background: transparent; color: #ffffff55;
  font: 600 10px/1 Rajdhani; letter-spacing: .12em; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.cin-tab.on { color: var(--cin-accent); border-bottom-color: var(--cin-accent); }

.cin-body { padding: 16px 14px; }
.cin-sec { font-size: 8px; letter-spacing: .18em; color: #ffffff44; display: block; margin-bottom: 8px; }
.cin-form { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 18px; }
.cin-pill { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.cin-pill.w { background: color-mix(in srgb, var(--cin-accent) 10%, transparent); color: var(--cin-accent); border: 1px solid var(--cin-accent-border); }
.cin-pill.d { background: #F59E0B18; color: #F59E0B; border: 1px solid #F59E0B33; }
.cin-pill.l { background: #FF5C5C18; color: #FF5C5C; border: 1px solid #FF5C5C33; }
.cin-scout { padding: 12px 14px; border-radius: 10px; background: #ffffff06; border: 1px solid #ffffff0c; font-size: 13px; line-height: 1.45; color: #ffffffaa; margin-bottom: 18px; }
.cin-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 18px; }
.cin-stat { padding: 10px; border-radius: 10px; background: #ffffff05; border: 1px solid #ffffff0a; text-align: center; }
.cin-stat-v { font-size: 20px; font-weight: 700; }
.cin-stat-l { font-size: 8px; letter-spacing: .1em; color: #ffffff44; margin-top: 4px; }
.cin-teaser {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px;
  border: 1px solid var(--cin-accent-border);
  background: linear-gradient(135deg, var(--cin-accent-bg), transparent); cursor: pointer;
}
.cin-teaser-score { font-size: 28px; font-weight: 700; color: var(--cin-accent); }
.cin-teaser-sub { font-size: 10px; color: #ffffff55; margin-top: 2px; }
.cin-panel { display: none; }
.cin-panel.on { display: block; animation: cin-fadeUp .35s ease; }

/* Compact tab spec badges */
.cin-tag {
  display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 6px;
  letter-spacing: .1em; padding: 2px 5px; border-radius: 3px; margin-left: 6px; vertical-align: middle;
}
.cin-tag.live { background: #00e67618; color: #00e676; border: 1px solid #00e67633; }
.cin-tag.soon { background: #f59e0b18; color: #f59e0b; border: 1px solid #f59e0b33; }
.cin-tag.hide { background: #ff5c5c12; color: #ff8a8a; border: 1px solid #ff5c5c28; text-decoration: line-through; opacity: .7; }
.cin-id-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.cin-id-cell { padding: 10px 12px; border-radius: 10px; border: 1px solid #ffffff0c; background: #ffffff04; }
.cin-id-cell span { font-size: 9px; color: #ffffff55; letter-spacing: .08em; }
.cin-id-cell b { display: block; font-size: 14px; margin-top: 4px; }
.cin-yours {
  padding: 14px; border-radius: 12px; margin-bottom: 14px;
  border: 1px solid var(--cin-accent-border); background: var(--cin-accent-bg);
}
.cin-yours b { font-size: 22px; color: var(--cin-accent); }
.cin-yours-slim b { font-size: inherit; color: inherit; }
.cin-you-chip {
  display: inline-block; margin-right: 10px; font-size: 13px;
}
.cin-crowd-lead {
  font-size: 14px; color: #ffffff88; margin: -2px 0 12px; line-height: 1.45;
}
.cin-crowd-lead b { font-size: 18px; font-weight: 700; }
.cin-crowd-meta { color: #ffffff55; }
.cin-dist-lab {
  width: 92px; flex-shrink: 0; font-size: 12px; font-weight: 650;
}
.cin-traits {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.cin-trait {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid #ffffff0c; background: #ffffff04;
  font-size: 13px;
}
.cin-trait i { font-style: normal; font-size: 16px; }
.cin-trait b { font-weight: 650; }
.cin-trait em { font-style: normal; color: var(--cin-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.cin-vrow {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%;
  padding: 10px 12px; margin-bottom: 6px;
  border-radius: 10px; border: 1px solid #ffffff0c; background: #ffffff04;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.cin-vrow-v { display: flex; flex-direction: column; gap: 4px; }
.cin-vchip {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 6px;
  font-size: 13px;
}
.cin-vchip > i { font-style: normal; font-size: 10px; color: #ffffff44; }
.cin-vchip-main { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cin-vchip b { font-weight: 700; }
.cin-vchip.dim { color: #ffffff99; }
.cin-vtraits {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  direction: ltr;
  justify-items: stretch;
}
.cin-vtraits em {
  font-style: normal; font-size: 12px; color: #ffffffcc;
  background: #ffffff0a; border: 1px solid #ffffff10;
  border-radius: 6px; padding: 3px 4px;
  text-align: center;
  white-space: nowrap;
}
.cin-powers { margin-bottom: 10px; }
.cin-power {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; margin-bottom: 8px;
  background: #ffffff06; border: 1px solid #ffffff0c;
}
.cin-power-ico { font-size: 20px; width: 28px; text-align: center; }
.cin-power-body { flex: 1; min-width: 0; }
.cin-power-top {
  display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px;
}
.cin-power-track { height: 4px; background: #ffffff12; border-radius: 2px; }
.cin-power-track i { display: block; height: 100%; border-radius: 2px; }
.cin-trend { padding: 0 4px 8px; }
.cin-trend-axis {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #ffffff44; padding: 0 4px 12px;
}
.cin-vlist { margin-bottom: 8px; }
.cin-vrow-m i { display: block; font-style: normal; font-size: 11px; color: #ffffff55; margin-bottom: 2px; }
.cin-vrow-m b { display: block; font-size: 14px; font-weight: 650; }
.cin-dist { margin-bottom: 8px; }
.cin-dist-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px;
}
.cin-dist-track { flex: 1; height: 6px; background: #ffffff10; border-radius: 3px; }
.cin-dist-track i { display: block; height: 100%; border-radius: 3px; }
.cin-row-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 12px 14px; border-radius: 10px; margin-bottom: 8px;
  border: 1px solid #ffffff0c; background: #ffffff04;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.cin-row-btn:active { opacity: .85; }
.cin-row-btn .sub { font-size: 10px; color: #ffffff55; margin-top: 3px; }
.cin-row-btn .scr { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--cin-accent); }
.cin-empty { padding: 20px 14px; text-align: center; font-size: 12px; color: #ffffff55; line-height: 1.45; border: 1px dashed #ffffff15; border-radius: 10px; }
.cin-locked { padding: 24px 16px; text-align: center; border-radius: 12px; border: 1px solid #ffffff12; background: #ffffff04; }
.cin-locked b { display: block; font-size: 13px; margin-bottom: 6px; color: #fff; }
.cin-team-link {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
  border-radius: 10px; border: 1px solid #ffffff0c; background: #ffffff04;
  color: inherit; font: inherit; cursor: pointer; margin-top: 8px;
}
.cin-pulse {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px; margin-bottom: 16px;
}
.cin-pulse-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cin-pulse-mins {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 14px; margin-bottom: 6px;
  border-radius: 10px;
  border: 1px solid var(--cin-accent-border);
  background: var(--cin-accent-bg);
}
.cin-pulse-mins span {
  font-size: 12px; letter-spacing: .1em; color: #ffffff66;
}
.cin-pulse-mins .cin-pulse-foot {
  display: inline; font-size: 11px; color: #ffffff44; margin-left: 6px;
}
.cin-pulse-mins b {
  font-size: 28px; font-weight: 700; line-height: 1; color: var(--cin-accent);
}
.cin-pulse-card {
  padding: 8px 2px 7px; text-align: center; border-radius: 10px;
  border: 1px solid #ffffff0c; background: #ffffff04; min-width: 0;
}
.cin-pulse-ico {
  width: 14px; height: 14px; color: var(--cin-accent); display: block; margin: 0 auto 4px;
}
.cin-pulse-l {
  display: block; font-size: 5.5px; letter-spacing: .04em; color: #ffffff50;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.cin-pulse-card b {
  display: block; font-size: 13px; font-weight: 700; line-height: 1.15; margin: 3px 0 1px;
}
.cin-pulse-foot {
  display: block; font-style: normal; font-size: 5.5px; color: #ffffff40;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cin-usage {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-bottom: 16px;
}
.cin-usage-5 { grid-template-columns: repeat(5, 1fr); }
.cin-usage-3 { grid-template-columns: repeat(3, 1fr); }
.cin-usage-hero {
  grid-template-columns: 1.35fr 1fr;
  margin-bottom: 6px;
}
.cin-usage-xl { padding: 14px 12px; text-align: left; }
.cin-usage-xl b { font-size: 28px; }
.cin-usage-cell {
  padding: 10px 6px; text-align: center; border-radius: 10px;
  border: 1px solid #ffffff0c; background: #ffffff04;
}
.cin-usage-cell b { display: block; font-size: 18px; font-weight: 700; line-height: 1.1; }
.cin-usage-cell span { display: block; font-size: 7px; letter-spacing: .12em; color: #ffffff44; margin-top: 4px; }
.cin-usage-cell.muted { opacity: .45; }
.cin-usage-cell.muted b { color: #ffffff66; }
.cin-usage-cap {
  font-family: 'IBM Plex Mono', monospace; font-size: 7px; line-height: 1.45;
  color: #ffffff38; margin: 0 0 16px;
}
.cin-mtable { margin-bottom: 8px; border: 1px solid #ffffff0c; border-radius: 12px; overflow: hidden; }
.cin-mhead, .cin-mrow {
  display: grid; grid-template-columns: 52px 1fr 68px 32px 36px;
  gap: 4px; align-items: center; padding: 8px 8px;
  font-size: 11px;
}
.cin-mhead {
  font-size: 7px; letter-spacing: .1em; color: #ffffff44;
  border-bottom: 1px solid #ffffff0c; background: #ffffff05;
}
.cin-mrow {
  width: 100%; border: none; border-bottom: 1px solid #ffffff08;
  background: transparent; color: inherit; font: inherit; text-align: left;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.cin-mrow:last-child { border-bottom: none; }
.cin-mrow.on { background: color-mix(in srgb, var(--cin-accent) 10%, transparent); }
.cin-mrow .dim { color: #ffffff55; font-size: 10px; }
.cin-mrow b { font-size: 12px; font-weight: 600; display: block; line-height: 1.2; }
.cin-mrow i { font-style: normal; font-size: 8px; color: #ffffff44; letter-spacing: .06em; }
.cin-mrow .you { color: var(--cin-accent); font-weight: 700; }
.cin-dash { color: #ffffff33; }
.cin-card {
  display: inline-block; width: 8px; height: 11px; border-radius: 1px; margin-right: 2px;
  vertical-align: middle;
}
.cin-card-y { background: #ffd54f; }
.cin-card-r { background: #ef4444; }

.cin-tl { position: relative; padding-left: 16px; margin-bottom: 8px; }
.cin-tl::before {
  content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px;
  width: 1px; background: #ffffff18;
}
.cin-tl-row {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline;
  width: 100%; padding: 0 0 12px 12px;
  border: none; background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none;
  border-radius: 8px;
}
.cin-tl-row:last-child { padding-bottom: 0; }
.cin-tl-row::before {
  content: ""; position: absolute; left: -14px; top: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cin-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cin-accent) 20%, transparent);
}
.cin-tl-row.bench::before { background: #ffffff44; box-shadow: none; }
.cin-tl-row.on { background: color-mix(in srgb, var(--cin-accent) 10%, transparent); }
.cin-tl-row b { display: block; font-size: 14px; font-weight: 650; }
.cin-tl-row i { font-style: normal; font-size: 11px; color: #ffffff55; }
.cin-tl-meta { font-size: 12px; color: #ffffff88; text-align: right; white-space: nowrap; }

.cin-career {
  margin: 0 0 16px;
  border: 1px solid #ffffff0c;
  border-radius: 12px;
  overflow: hidden;
}
.cin-career-head, .cin-career-row {
  display: grid;
  grid-template-columns: 1fr 72px 36px 36px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
}
.cin-career-head {
  font-size: 7px;
  letter-spacing: .1em;
  color: #ffffff44;
  border-bottom: 1px solid #ffffff0c;
  background: #ffffff05;
}
.cin-career-head span:nth-child(3),
.cin-career-head span:nth-child(4) { text-align: right; }
.cin-career-row {
  border-bottom: 1px solid #ffffff08;
  font-size: 12px;
}
.cin-career-row:last-child { border-bottom: none; }
.cin-career-row.is-now { background: color-mix(in srgb, var(--cin-accent) 8%, transparent); }
.cin-career-club { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cin-career-club-txt {
  display: flex; align-items: baseline; gap: 7px; min-width: 0;
}
.cin-career-club b {
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cin-career-fee {
  flex-shrink: 0;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  color: var(--cin-accent);
  font-variant-numeric: tabular-nums;
}
.cin-career-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid;
  font-size: 8px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .02em;
}
.cin-career-years { color: #ffffff66; font-size: 11px; }
.cin-career-apps, .cin-career-goals {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cin-career-apps { color: #ffffffaa; }
.cin-career-goals { color: var(--cin-accent); }
.cin-career-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  border-top: 1px solid #ffffff0c;
  background: #ffffff05;
}
.cin-career-value span {
  font-size: 7px;
  letter-spacing: .1em;
  color: #ffffff44;
}
.cin-career-value b {
  font-size: 14px;
  font-weight: 700;
  color: var(--cin-accent);
  font-variant-numeric: tabular-nums;
}

.cin-spec-note {
  margin-top: 16px; padding: 10px 12px; border-radius: 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 8px; line-height: 1.5;
  color: #ffffff44; border: 1px dashed #ffffff12;
}
.cin-fine { font-size: 10px; color: #ffffff66; letter-spacing: .08em; }
.cin-copy { font-size: 12px; color: #ffffff88; }

/* Type scales · Compact D · labels were 5.5–8px on phone */
.app.cin-type-read .cin-sec { font-size: 11px; letter-spacing: .12em; }
.app.cin-type-read .cin-tag { font-size: 9px; padding: 2px 6px; }
.app.cin-type-read .cin-tab { font: 600 13px/1 Rajdhani; padding: 12px 4px; letter-spacing: .08em; }
.app.cin-type-read .cin-pulse-l,
.app.cin-type-read .cin-pulse-foot { font-size: 8px; letter-spacing: 0; }
.app.cin-type-read .cin-pulse-card b { font-size: 15px; }
.app.cin-type-read .cin-pulse-ico { width: 16px; height: 16px; }
.app.cin-type-read .cin-pulse-card { padding: 10px 4px 8px; }
.app.cin-type-read .cin-usage-cell { padding: 12px 6px; }
.app.cin-type-read .cin-usage-cell b { font-size: 20px; }
.app.cin-type-read .cin-usage-cell span { font-size: 10px; letter-spacing: .08em; }
.app.cin-type-read .cin-usage-xl { padding: 14px 12px; }
.app.cin-type-read .cin-usage-xl b { font-size: 32px; }
.app.cin-type-read .cin-pulse-mins span { font-size: 13px; }
.app.cin-type-read .cin-pulse-mins b { font-size: 32px; }
.app.cin-type-read .cin-tl-row b { font-size: 15px; }
.app.cin-type-read .cin-tl-row i { font-size: 12px; }
.app.cin-type-read .cin-tl-meta { font-size: 13px; }
.app.cin-type-read .cin-mhead { font-size: 10px; }
.app.cin-type-read .cin-mhead,
.app.cin-type-read .cin-mrow { font-size: 13px; padding: 10px 8px; grid-template-columns: 52px 1fr 68px 32px 36px; }
.app.cin-type-read .cin-mrow b { font-size: 14px; }
.app.cin-type-read .cin-mrow i { font-size: 10px; }
.app.cin-type-read .cin-mrow .dim { font-size: 12px; }
.app.cin-type-read .cin-career-head { font-size: 10px; }
.app.cin-type-read .cin-career-head,
.app.cin-type-read .cin-career-row { padding: 10px; }
.app.cin-type-read .cin-career-row { font-size: 14px; }
.app.cin-type-read .cin-career-club b { font-size: 15px; }
.app.cin-type-read .cin-career-fee { font-size: 13px; }
.app.cin-type-read .cin-career-years { font-size: 13px; }
.app.cin-type-read .cin-career-mark { width: 24px; height: 24px; font-size: 9px; }
.app.cin-type-read .cin-career-value span { font-size: 10px; }
.app.cin-type-read .cin-career-value b { font-size: 16px; }
.app.cin-type-read .cin-usage-cap,
.app.cin-type-read .cin-spec-note { font-size: 11px; }
.app.cin-type-read .cin-quick.compact .cin-qc { padding: 10px 4px; }
.app.cin-type-read .cin-quick.compact .cin-qv { font-size: 16px; }
.app.cin-type-read .cin-quick.compact .cin-ql { font-size: 10px; letter-spacing: .1em; }
.app.cin-type-read .cin-hero.compact .cin-jersey { font-size: 12px; }
.app.cin-type-read .cin-hero.compact .cin-name-first { font-size: 18px; }
.app.cin-type-read .cin-hero.compact .cin-name-last { font-size: 42px; }
.app.cin-type-read .cin-hero.compact .cin-score-top .cin-score-val { font-size: 36px; }
.app.cin-type-read .cin-hero.compact .cin-score-top .cin-score-lbl,
.app.cin-type-read .cin-hero.compact .cin-score-top .cin-score-votes { font-size: 10px; }
.app.cin-type-read .cin-hero-team-lbl { font-size: 11px; }
.app.cin-type-read .cin-hero-team-mark { width: 48px; height: 48px; font-size: 12px; }
.app.cin-type-read .cin-crowd-lead { font-size: 15px; }
.app.cin-type-read .cin-crowd-lead b { font-size: 18px; }
.app.cin-type-read .cin-hero.compact .cin-score-top .cin-score-verdict { font-size: 16px; }
.app.cin-type-read .cin-trait { font-size: 14px; }
.app.cin-type-read .cin-dist-lab { font-size: 13px; width: 102px; }
.app.cin-type-read .cin-vchip { font-size: 14px; }
.app.cin-type-read .cin-fine { font-size: 12px; }
.app.cin-type-read .cin-copy { font-size: 14px; }
.app.cin-type-read .cin-teaser-sub { font-size: 12px; }
.app.cin-type-read .cin-row-btn .sub { font-size: 12px; }

.app.cin-type-big .cin-sec { font-size: 12px; letter-spacing: .1em; margin-bottom: 10px; }
.app.cin-type-big .cin-tag { font-size: 10px; padding: 3px 7px; }
.app.cin-type-big .cin-tab { font: 600 14px/1 Rajdhani; padding: 14px 4px; letter-spacing: .06em; }
.app.cin-type-big .cin-pulse {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.app.cin-type-big .cin-pulse-l,
.app.cin-type-big .cin-pulse-foot { font-size: 10px; letter-spacing: .04em; }
.app.cin-type-big .cin-pulse-card b { font-size: 18px; }
.app.cin-type-big .cin-pulse-ico { width: 18px; height: 18px; }
.app.cin-type-big .cin-pulse-card { padding: 12px 6px 10px; }
.app.cin-type-big .cin-usage-cell { padding: 14px 6px; }
.app.cin-type-big .cin-usage-cell b { font-size: 22px; }
.app.cin-type-big .cin-usage-cell span { font-size: 11px; letter-spacing: .08em; }
.app.cin-type-big .cin-mhead,
.app.cin-type-big .cin-mrow {
  font-size: 14px; padding: 12px 10px;
  grid-template-columns: 58px 1fr 76px 36px 40px;
}
.app.cin-type-big .cin-mhead { font-size: 11px; }
.app.cin-type-big .cin-mrow b { font-size: 16px; }
.app.cin-type-big .cin-mrow i { font-size: 11px; }
.app.cin-type-big .cin-mrow .dim { font-size: 13px; }
.app.cin-type-big .cin-career-head,
.app.cin-type-big .cin-career-row {
  padding: 12px 10px;
  grid-template-columns: 1fr 78px 42px 42px;
}
.app.cin-type-big .cin-career-head { font-size: 11px; }
.app.cin-type-big .cin-career-row { font-size: 15px; }
.app.cin-type-big .cin-career-club b { font-size: 16px; }
.app.cin-type-big .cin-career-years { font-size: 14px; }
.app.cin-type-big .cin-career-mark { width: 26px; height: 26px; font-size: 10px; }
.app.cin-type-big .cin-career-value { padding: 12px 10px; }
.app.cin-type-big .cin-career-value span { font-size: 11px; }
.app.cin-type-big .cin-career-value b { font-size: 18px; }
.app.cin-type-big .cin-usage-cap,
.app.cin-type-big .cin-spec-note { font-size: 12px; }
.app.cin-type-big .cin-quick.compact .cin-qc { padding: 12px 4px; }
.app.cin-type-big .cin-quick.compact .cin-qv { font-size: 18px; }
.app.cin-type-big .cin-quick.compact .cin-ql { font-size: 11px; letter-spacing: .08em; }
.app.cin-type-big .cin-hero.compact .cin-jersey { font-size: 13px; }
.app.cin-type-big .cin-hero.compact .cin-name-first { font-size: 19px; }
.app.cin-type-big .cin-hero.compact .cin-name-last { font-size: 44px; }
.app.cin-type-big .cin-hero.compact .cin-score-top .cin-score-val { font-size: 40px; }
.app.cin-type-big .cin-hero.compact .cin-score-top .cin-score-lbl,
.app.cin-type-big .cin-hero.compact .cin-score-top .cin-score-votes { font-size: 11px; }
.app.cin-type-big .cin-hero-team-lbl { font-size: 12px; }
.app.cin-type-big .cin-hero-team-mark { width: 52px; height: 52px; font-size: 13px; }
.app.cin-type-big .cin-yours b { font-size: 26px; }
.app.cin-type-big .cin-fine { font-size: 13px; }
.app.cin-type-big .cin-copy { font-size: 15px; }
.app.cin-type-big .cin-teaser-sub { font-size: 13px; }
.app.cin-type-big .cin-row-btn .sub { font-size: 13px; }
.app.cin-type-big .cin-body { padding: 18px 14px 88px; }

.type-bar {
  position: sticky; top: 0; z-index: 80;
  display: grid; grid-template-columns: 44px 1fr 1fr 1fr;
  gap: 6px; align-items: stretch;
  padding: 10px 10px 10px;
  background: #0b1018;
  border-bottom: 1px solid #34DFFF44;
}
.type-bar-back {
  display: grid; place-items: center;
  border: 1px solid #ffffff22; border-radius: 10px;
  color: #fff; text-decoration: none; font-size: 18px;
  background: #ffffff0c;
}
.type-bar button {
  border: 1px solid #ffffff22; background: #ffffff0c; color: #ffffffcc;
  font: 700 13px/1.15 Rajdhani; letter-spacing: .06em;
  padding: 10px 4px; border-radius: 10px; cursor: pointer;
}
.type-bar button.on {
  border-color: #34DFFF88;
  background: #34DFFF22;
  color: #34DFFF;
}
.type-bar small {
  display: block; font-weight: 500; opacity: .6; margin-top: 3px;
  font-size: 10px; letter-spacing: 0; text-transform: none;
}

.hub { max-width: 520px; margin: 0 auto; padding: 36px 18px 80px; color: #e8ecf4; font-family: 'Barlow Condensed', sans-serif; }
.hub-mark { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: rgba(232,236,244,.5); margin-bottom: 10px; }
.hub h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2rem, 8vw, 2.8rem); letter-spacing: .03em; font-weight: 400; margin-bottom: 8px; }
.hub .lead { font-size: 14px; line-height: 1.5; color: rgba(232,236,244,.5); margin-bottom: 22px; }
.hub-grid { display: flex; flex-direction: column; gap: 10px; }
.hub-card { display: block; text-decoration: none; color: inherit; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.hub-card:hover { border-color: rgba(0,230,118,.35); background: rgba(0,230,118,.06); }
.hub-card .n { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .16em; color: #00e676; margin-bottom: 4px; }
.hub-card .t { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .04em; }
.hub-card .d { font-size: 12px; color: rgba(232,236,244,.5); margin-top: 4px; line-height: 1.35; }
.hub-card.base { border-color: rgba(0,245,155,.35); }