:root {
  --bg: #0f172a;
  --card: #111827;
  --card-2: #1f2937;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #38bdf8;
  --good: #22c55e;
  --maybe: #f59e0b;
  --bad: #ef4444;
  --border: rgba(255,255,255,.1);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #1e3a8a 0, var(--bg) 45%);
  color: var(--text);
}

.app { max-width: 1100px; margin: 0 auto; padding: 32px 18px; }
.hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
}
.eyebrow { color: var(--accent); font-weight: 700; margin: 0 0 8px; }
h1 { font-size: clamp(36px, 7vw, 72px); margin: 0; line-height: .95; }
.subtitle { max-width: 680px; color: var(--muted); font-size: 18px; }
.badge {
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}
.grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; }
.card {
  background: rgba(17,24,39,.88);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 20px 70px rgba(0,0,0,.25);
}
h2 { margin-top: 0; }
label { display: block; color: var(--muted); font-size: 14px; margin-bottom: 16px; }
select, input, button {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 16px;
}
select, input { background: var(--card-2); color: var(--text); }
input::placeholder { color: #6b7280; }
button {
  background: var(--accent);
  color: #00111a;
  font-weight: 800;
  cursor: pointer;
}
.iv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.note, .muted { color: var(--muted); }
.note { font-size: 13px; line-height: 1.4; }
.empty { color: var(--muted); padding: 50px 0; text-align: center; }
.hidden { display: none; }
.pokemon-title { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.result-name { font-size: 28px; font-weight: 800; margin: 0 0 4px; }
.decision { padding: 8px 12px; border-radius: 999px; font-weight: 900; }
.decision.keep { background: rgba(34,197,94,.18); color: var(--good); }
.decision.maybe { background: rgba(245,158,11,.18); color: var(--maybe); }
.decision.transfer { background: rgba(239,68,68,.18); color: var(--bad); }
.league-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 24px 0; }
.league-box, .name-box { background: rgba(255,255,255,.045); border: 1px solid var(--border); border-radius: 18px; padding: 16px; }
.league-name { color: var(--muted); margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.rank { font-size: 34px; font-weight: 900; margin: 0 0 6px; }
.copy-row { display: flex; gap: 10px; align-items: center; }
code { flex: 1; background: #020617; padding: 14px; border-radius: 12px; overflow: auto; }
.copy-row button { width: auto; min-width: 110px; margin: 0; }
@media (max-width: 800px) {
  .grid, .league-results { grid-template-columns: 1fr; }
  .hero { flex-direction: column; }
  .iv-grid { grid-template-columns: 1fr; }
}

.type-line {
  display: inline-block;
  margin: 4px 0 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(56,189,248,.12);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-transform: capitalize;
}

.stat-section {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  margin-top: 18px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat-grid div {
  background: rgba(2,6,23,.5);
  border-radius: 14px;
  padding: 12px;
}

.stat-grid span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 4px;
}

.stat-grid strong {
  font-size: 24px;
}

.effective-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.effective-grid > div {
  background: rgba(2,6,23,.5);
  border-radius: 14px;
  padding: 12px;
}

.small-title {
  margin: 0 0 6px;
  font-weight: 800;
  color: var(--text);
}

@media (max-width: 760px) {
  .stat-grid,
  .effective-grid {
    grid-template-columns: 1fr;
  }
}

.family-box {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  margin-top: 18px;
}

.family-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.family-buttons button {
  width: auto;
  margin-top: 0;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 14px;
  background: rgba(56,189,248,.14);
  color: var(--text);
}

.family-buttons button.active {
  background: var(--accent);
  color: #00111a;
}

.family-buttons button small {
  display: block;
  color: inherit;
  opacity: .72;
  font-weight: 600;
}

.small-decision {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  padding: 6px 10px;
}

.rank-good { color: var(--good); }
.rank-maybe { color: var(--maybe); }
.rank-bad { color: var(--bad); }
.rank-none { color: var(--muted); }

.rank-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  margin-top: -4px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: -6px;
}

.good-dot { background: var(--good); }
.maybe-dot { background: var(--maybe); }
.bad-dot { background: var(--bad); }

.left-name-box {
  margin-top: 6px;
}

.left-name-box code {
  min-height: 46px;
}

.fmt-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px}

/* v21 chip-style name format controls */
.name-format-builder {
  margin-bottom: 16px;
}

.name-format-builder > label {
  display: block;
  margin-bottom: 8px;
}

.fmt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.fmt-chip {
  margin: 0;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.fmt-chip input {
  width: auto;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

.fmt-chip:has(input:checked) {
  background: rgba(56,189,248,.16);
  border-color: rgba(56,189,248,.55);
  color: var(--accent);
  font-weight: 800;
}

.legal-page {
  line-height: 1.7;
  max-width: 900px;
  margin: 0 auto;
}

.legal-page h2 {
  font-size: 32px;
  margin-bottom: 8px;
}

.legal-page h3 {
  margin-top: 28px;
  margin-bottom: 8px;
  color: var(--text);
}

.legal-page p {
  color: var(--muted);
}

.legal-page a,
footer a {
  color: var(--accent);
}

.top-rankings-box { margin-top: 16px; }
.top-rankings { overflow-x: auto; margin-top: 10px; }
.top-rankings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.top-rankings-table th,
.top-rankings-table td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.top-rankings-table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.top-rankings-table td:first-child { font-weight: 900; }
.top-rankings-empty { color: var(--muted); font-size: 13px; }

.pokemon-suggestions{
  max-height:260px;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:12px;
  margin-top:6px;
  background:var(--surface);
  display:none;
  position:relative;
  z-index:20;
}
.pokemon-suggestion{
  padding:10px 12px;
  cursor:pointer;
  border-bottom:1px solid var(--border);
}
.pokemon-suggestion:last-child{
  border-bottom:none;
}
.pokemon-suggestion:hover{
  background:rgba(255,255,255,.06);
}

/* v39: Top 250 ranking list with scroll */
.top-rankings {
  max-height: 560px;
  overflow-y: auto;
  overflow-x: auto;
  border-radius: 12px;
}

.top-rankings-table thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
}

/* v40 IV Floor selector */

.quick-results-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:14px 0;
}

.quick-pill{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  font-size:13px;
  font-weight:700;
}

.quick-good{ color:#22c55e; }
.quick-maybe{ color:#facc15; }
.quick-bad{ color:#ef4444; }
.quick-best{ color:#facc15; font-weight:900; }

.quick-view-btn{
  margin-left:auto;
}


/* v44 color scheme */
.rank-one,
.quick-best{
  color:#a855f7 !important; /* purple */
  text-shadow:0 0 10px rgba(168,85,247,.35);
}

.rank-good,
.quick-good{
  color:#ec4899 !important; /* pink */
}

.rank-maybe,
.rank-bad,
.quick-bad{
  color:#ef4444 !important; /* red */
}

.top-rank-one td:first-child{
  color:#a855f7 !important;
}


/* v45: yellow instead of pink */
.rank-good,
.quick-good{
  color:#facc15 !important; /* yellow */
}


/* v46 force consistent colors everywhere */
.rank-one,
.quick-best,
.top-rank-one td:first-child{
  color:#a855f7 !important; /* purple */
}

.rank-good,
.quick-good{
  color:#facc15 !important; /* yellow */
}

.rank-maybe,
.rank-bad,
.quick-bad{
  color:#ef4444 !important; /* red */
}


/* v47 real color fix */
.rank-one {
  color:#a855f7 !important;
  text-shadow:0 0 10px rgba(168,85,247,.35);
}

.quick-best {
  color:#a855f7 !important;
  text-shadow:0 0 10px rgba(168,85,247,.35);
}

.rank-good,
.quick-good {
  color:#facc15 !important;
}

.rank-bad,
.rank-maybe,
.quick-bad,
.quick-maybe {
  color:#ef4444 !important;
}

.top-rank-one,
.top-rank-one td {
  color:#a855f7 !important;
}



.scroll-top-btn:hover{
  transform:translateY(-2px);
}

.scroll-top-btn{
  position:fixed;
  right:20px;
  bottom:20px;
  width:52px;
  height:52px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:900;
  color:white;
  background:#a855f7;
  box-shadow:0 6px 18px rgba(0,0,0,.30);
  opacity:0;
  pointer-events:none;
  transform:translateY(12px);
  transition:opacity .2s ease, transform .2s ease;
}

.scroll-top-btn.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.scroll-top-btn:hover{
  transform:translateY(-2px);
}

.selected-iv-comparison{
  position:sticky;
  top:0;
  z-index:5;
  margin:10px 0;
}

.selected-iv-card{
  display:grid;
  grid-template-columns: repeat(4, minmax(70px, 1fr));
  gap:8px;
  padding:10px;
  border:1px solid rgba(168,85,247,.45);
  border-radius:14px;
  background:rgba(17,24,39,.96);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}

.selected-iv-card div{
  background:rgba(255,255,255,.045);
  border-radius:10px;
  padding:8px;
}

.selected-iv-card span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:3px;
}

.selected-iv-card strong{
  color:var(--text);
  font-size:14px;
}

.selected-iv-card > div:first-child strong{
  color:#a855f7;
  font-size:18px;
}

.selected-label{
  color:#a855f7 !important;
  font-weight:800;
}

.selected-iv-empty{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  color:var(--muted);
}

@media (max-width: 760px){
  .selected-iv-card{
    grid-template-columns: repeat(2, minmax(90px, 1fr));
  }
}

.stat-filters{
  margin:10px 0 12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.045);
}

.stat-filter-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.stat-filter-head .league-name{
  margin:0;
  margin-right:auto;
}

.stat-filter-head button{
  width:auto;
  margin-top:0;
  padding:7px 10px;
  font-size:12px;
}

.stat-filter-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.stat-filter-grid label{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.stat-filter-grid span{
  color:var(--accent);
  font-weight:800;
}

.stat-filter-grid input{
  min-height:38px;
  padding:8px 10px;
  margin-top:5px;
}

@media (max-width:760px){
  .stat-filter-grid{
    grid-template-columns:1fr;
  }
}

/* v54 slider stat filters */
.slider-filter-grid {
  gap: 12px;
}

.slider-filter {
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}

.slider-filter span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
}

.slider-filter strong {
  color: var(--accent);
  font-size: 15px;
}

.slider-filter small {
  display: block;
  margin: 4px 0 8px;
  color: var(--muted);
  opacity: .8;
}

.slider-filter input[type="range"] {
  width: 100%;
  min-height: 28px;
  padding: 0;
  cursor: pointer;
  accent-color: #a855f7;
}

.cmp-box{
  margin-top:18px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.045);
}

.cmp-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.cmp-head .league-name{ margin:0; }

.cmp-leagues{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

.cmp-leagues label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:auto;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  margin:0;
  font-size:13px;
}

.cmp-leagues input{
  width:auto;
  min-height:auto;
}

.cmp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.cmp-card{
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(2,6,23,.45);
}

.cmp-card input,
.cmp-card select{
  margin-bottom:8px;
}

.cmp-iv-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.cmp-iv-grid label{
  font-size:12px;
  margin:0;
}

.cmp-result{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  font-weight:800;
}

.cmp-win{ color:#a855f7; }
.cmp-tie{ color:#facc15; }

@media (max-width:760px){
  .cmp-grid{ grid-template-columns:1fr; }
  .cmp-iv-grid{ grid-template-columns:repeat(3,1fr); }
}


/* v60 PVPium branding */
.top-tools-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.top-tools-nav a,
.top-tools-nav span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  font-size:13px;
}
.top-tools-nav a.active{
  border-color:rgba(168,85,247,.65);
  box-shadow:0 0 0 1px rgba(168,85,247,.25) inset;
}
.top-tools-nav span{
  color:var(--muted);
}
.site-footer{
  margin-top:34px;
  padding:20px 0;
  color:var(--muted);
  text-align:center;
  font-size:12px;
}


.version-corner{
  position:fixed;
  right:12px;
  bottom:10px;
  z-index:999;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(15,23,42,.82);
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  backdrop-filter:blur(8px);
}


/* v61 guide pages */
.guide-page{
  max-width:920px;
  margin:0 auto;
  padding:28px 18px 80px;
}
.guide-article{
  margin-top:24px;
  padding:28px;
  border:1px solid var(--border);
  border-radius:24px;
  background:rgba(15,23,42,.72);
  box-shadow:0 20px 70px rgba(0,0,0,.24);
}
.guide-article h1{
  margin:0 0 14px;
  font-size:clamp(34px,6vw,64px);
  line-height:1.02;
}
.guide-article h2{
  margin:30px 0 10px;
  font-size:clamp(22px,3vw,32px);
}
.guide-article p,
.guide-article li{
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}
.guide-article a{
  color:#38bdf8;
  font-weight:800;
}
.guide-meta{
  color:#38bdf8;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  margin-bottom:10px;
}
.guide-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.guide-nav a{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}
.guide-callout{
  margin:26px 0;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(56,189,248,.35);
  background:rgba(56,189,248,.08);
}
.guides-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.guide-card-link{
  display:block;
  padding:18px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  color:var(--text);
  text-decoration:none;
}
.guide-card-link strong{
  display:block;
  font-size:18px;
  margin-bottom:6px;
}
.guide-card-link span{
  color:var(--muted);
  font-size:14px;
}
@media (max-width:720px){
  .guide-article{padding:20px}
  .guides-list{grid-template-columns:1fr}
}


/* v63 integrated guide pages */
.guide-page{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
  padding:34px 0 90px;
}
.guide-hero{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:start;
  margin-bottom:22px;
}
.guide-brand{
  color:#38bdf8;
  font-weight:900;
  letter-spacing:.02em;
  margin-bottom:8px;
}
.guide-hero h1{
  margin:0;
  font-size:clamp(42px,7vw,84px);
  line-height:.98;
}
.guide-hero p{
  max-width:820px;
  color:var(--muted);
  font-size:clamp(16px,2vw,21px);
  line-height:1.55;
}
.guide-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.guide-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 13px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  font-weight:900;
}
.guide-nav a:hover{
  border-color:rgba(56,189,248,.55);
}
.guide-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:18px;
  align-items:start;
}
.guide-article{
  padding:28px;
  border:1px solid var(--border);
  border-radius:26px;
  background:linear-gradient(180deg,rgba(15,23,42,.86),rgba(15,23,42,.62));
  box-shadow:0 20px 70px rgba(0,0,0,.24);
}
.guide-article h2{
  margin:34px 0 12px;
  font-size:clamp(23px,3vw,33px);
}
.guide-article p,
.guide-article li{
  color:var(--muted);
  font-size:17px;
  line-height:1.78;
}
.guide-article a{
  color:#38bdf8;
  font-weight:900;
}
.guide-meta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#38bdf8;
  background:rgba(56,189,248,.1);
  border:1px solid rgba(56,189,248,.22);
  border-radius:999px;
  padding:7px 10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
  margin-bottom:18px;
}
.guide-callout{
  margin:26px 0;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(56,189,248,.35);
  background:rgba(56,189,248,.08);
}
.guide-sidebar{
  position:sticky;
  top:18px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:22px;
  background:rgba(255,255,255,.045);
}
.guide-sidebar h3{
  margin:0 0 12px;
}
.guide-sidebar a{
  display:block;
  color:var(--text);
  text-decoration:none;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.08);
  font-weight:800;
  font-size:14px;
}
.guide-sidebar a:hover{
  color:#38bdf8;
}
.guides-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.guide-card-link{
  display:block;
  padding:18px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  color:var(--text);
  text-decoration:none;
}
.guide-card-link strong{
  display:block;
  font-size:18px;
  margin-bottom:6px;
}
.guide-card-link span{
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}
.guide-cta{
  margin-top:22px;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(168,85,247,.35);
  background:rgba(168,85,247,.09);
}
.guide-cta a{
  display:inline-flex;
  margin-top:8px;
  padding:10px 14px;
  border-radius:999px;
  background:#38bdf8;
  color:#07111f;
  text-decoration:none;
  font-weight:900;
}
@media (max-width:900px){
  .guide-hero{grid-template-columns:1fr}
  .guide-nav{justify-content:flex-start}
  .guide-layout{grid-template-columns:1fr}
  .guide-sidebar{position:static}
}
@media (max-width:680px){
  .guide-page{width:min(100% - 20px, 1180px);padding-top:20px}
  .guide-article{padding:20px;border-radius:22px}
  .guides-list{grid-template-columns:1fr}
}


@media (max-width: 768px){
  .app{
    padding:16px 12px !important;
    overflow-x:hidden;
  }
  .hero{
    display:block !important;
    margin-bottom:18px !important;
  }
  h1{
    font-size: clamp(28px, 10vw, 52px) !important;
    line-height:1.05 !important;
  }
  .subtitle{
    font-size:15px !important;
  }
  .grid{
    grid-template-columns:1fr !important;
  }
  .card{
    padding:16px !important;
    border-radius:18px !important;
  }
  .tabs, .nav, .guide-nav{
    flex-wrap:wrap !important;
  }
  .version-badge, .version, .v-badge{
    transform:scale(.9);
  }
  body{
    overflow-x:hidden !important;
  }
}