:root {
  --sidebar-width: 292px;
  --page: #07080b;
  --sidebar: #101218;
  --panel: #0d0f14;
  --line: #242731;
  --text: #f3f4f8;
  --muted: #858b9d;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; overflow-x: hidden; background: var(--page); color: var(--text); }
html { scroll-behavior: smooth; }
body { font-family: "Manrope", sans-serif; }
button, input { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }

/* Long rankings and lists only paint the rows that are close to the viewport. */
.level-card, .ranking-player, .update-card, .player-editor-record {
  content-visibility: auto;
  contain-intrinsic-size: auto 88px;
}

.app-shell { min-height: 100vh; width: 100%; overflow: clip; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 20; width: var(--sidebar-width); min-width: 0;
  padding: 27px 18px 22px; display: flex; flex-direction: column; overflow: visible;
  background: var(--sidebar); border-right: 1px solid #252833;
  transition: width .25s ease, transform .25s ease;
}
.brand-row { position: static; min-height: 120px; padding: 0 64px 28px 12px; display: flex; align-items: flex-start; }
.brand { display: flex; align-items: center; gap: 13px; color: white; text-decoration: none; font-size: 12px; font-weight: 700; line-height: 1.25; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.brand-mark { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; color: #eef0f7; }
.brand-mark svg { width: 30px; height: 30px; stroke-width: 1.7; }
.brand-mark img { width: 38px; height: 38px; object-fit: contain; }
.brand > span:last-child { max-width: 150px; opacity: 1; overflow: hidden; transition: max-width .22s ease, opacity .16s ease; }
.close-menu { display: none; border: 0; background: none; color: white; font-size: 25px; cursor: pointer; }
.collapse-button {
  position: absolute; top: 88px; left: auto; right: -22px; z-index: 4; width: 43px; height: 43px;
  display: grid; place-items: center; padding: 0; border: 1px solid #343844; border-radius: 11px;
  background: #171920; color: #aeb4c5; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 7px 18px rgba(0,0,0,.18);
}
.collapse-button svg { display: block; width: 20px; height: 20px; margin: auto; stroke-width: 1.9; transition: transform .25s ease; }
.collapse-button:hover { color: white; border-color: #4a4f5d; }

.nav { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-label { width: 96px; margin: 20px 0 8px -18px; color: #606678; font: 500 9px/1 "DM Mono"; letter-spacing: .18em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.nav-link {
  position: relative; width: 100%; min-height: 52px; padding: 0 13px; display: flex; align-items: center;
  gap: 14px; overflow: hidden; border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: #9298aa; font-size: 13px; text-decoration: none; text-align: left; cursor: pointer; white-space: nowrap;
  margin-bottom: 6px; transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.nav-link:hover { color: #f3f4f8; background: #171a21; }
.nav-link.active {
  color: #f6f7fb; font-weight: 600; border-color: #383c49;
  background: linear-gradient(100deg, #252833, #1a1c24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), inset 0 -1px 0 rgba(0,0,0,.2);
}
.nav-link.active::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 3px; height: 20px;
  border-radius: 2px; background: #f3f4f8; transform: translateY(-50%);
}
.nav-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; color: #9299aa; }
.nav-icon svg { display: block; width: 25px; height: 25px; stroke-width: 1.7; }
.nav-link:hover .nav-icon, .nav-link.active .nav-icon, .locked-link:hover .nav-icon { color: #f2f3f8; }
.nav-text { max-width: 190px; overflow: hidden; opacity: 1; text-overflow: ellipsis; transition: max-width .22s ease, opacity .14s ease; }
.list-group { flex: 0 0 auto; }
.list-group summary { list-style: none; padding-right: 30px; }
.list-group summary::-webkit-details-marker { display: none; }
.subnav { margin: 3px 0 7px 30px; padding: 3px 0 4px 28px; border-left: 1px solid #303440; display: grid; }
.subnav-link { position: relative; height: 27px; padding: 0 8px; display: flex; align-items: center; color: #73798a; font-size: 11px; text-decoration: none; }
.subnav-link:hover, .subnav-link.selected { color: #f5f6fa; }
.subnav-link::before { content: ""; position: absolute; left: -31.5px; top: 10px; width: 6px; height: 6px; border: 1px solid #555c6d; border-radius: 50%; background: #101218; opacity: 0; }
.subnav-link.selected::before { border-color: #f5f6fa; background: #f5f6fa; opacity: 1; }
.protected-area { flex: 0 0 auto; padding-top: 2px; border-top: 1px solid #292c35; }
.locked-link { position: relative; width: 100%; height: 52px; min-height: 52px; padding: 0 13px; display: flex; align-items: center; gap: 13px; overflow: hidden; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #9298aa; text-align: left; cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease; }
.locked-link strong, .locked-link small { display: block; white-space: nowrap; }
.locked-link strong { margin-bottom: 4px; font-size: 11px; }
.locked-link small { color: #606678; font-size: 8px; }

.main { width: auto; min-width: 0; min-height: 100vh; margin-left: var(--sidebar-width); background: var(--page); transition: margin-left .25s ease; }
.topbar { height: 72px; padding: 0 4.5vw; display: flex; align-items: center; border-bottom: 1px solid #1f222a; background: #08090c; }
.topbar p { margin: 0; color: #f2f3f7; font: 500 10px/1 "DM Mono"; text-transform: uppercase; letter-spacing: .08em; }
.topbar p span { padding: 0 8px; color: #555b6a; }
.menu-button { display: none; width: 30px; border: 0; background: none; color: white; cursor: pointer; }
.menu-button span { display: block; height: 1px; margin: 6px 0; background: currentColor; }
.mobile-backdrop { display: none; }
.content { width: min(1110px, calc(100% - 9vw)); margin: 0 auto; }
.hero { padding: clamp(60px, 8vw, 100px) 0 48px; display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid #2b2f39; }
h1 { margin: 0; color: #f6f7fb; font-size: clamp(46px, 7vw, 88px); font-weight: 600; line-height: .92; letter-spacing: -.065em; }
.hero-meta { display: flex; padding-bottom: 4px; }
.hero-meta div { display: grid; gap: 7px; }
.hero-meta strong { color: #f5f6fa; font: 500 22px/1 "DM Mono"; }
.hero-meta span { color: #777e90; font: 400 8px/1 "DM Mono"; text-transform: uppercase; }
.list-section { padding-top: 27px; }
.section-head { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }
h2 { margin: 0; color: #c9ccd6; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.controls { display: flex; align-items: stretch; gap: 9px; }
.filter-control { position: relative; }
.filter-toggle { position: relative; min-width: 91px; height: 41px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #282b34; border-radius: 7px; background: #0c0e12; color: #7e8595; font: 500 8px/1 "DM Mono"; text-transform: uppercase; cursor: pointer; }
.filter-toggle:hover, .filter-toggle.active { border-color: #444a56; color: #e2e5eb; }
.filter-toggle svg { width: 14px; height: 14px; }
.filter-toggle b { min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; background: #e4e7ed; color: #090b0f; font-size: 7px; }
.filter-toggle b[hidden], .filter-panel[hidden] { display: none; }
.filter-panel { position: absolute; z-index: 18; top: calc(100% + 8px); right: 0; width: min(330px,calc(100vw - 40px)); padding: 15px; border: 1px solid #343945; border-radius: 7px; background: #11141a; box-shadow: 0 18px 46px rgba(0,0,0,.45); }
.filter-panel header { padding-bottom: 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #292d36; }
.filter-panel header > div { display: flex; align-items: center; gap: 8px; }
.filter-panel header svg { width: 14px; height: 14px; color: #9098a8; }
.filter-panel header strong { font-size: 11px; }
.filter-panel header button { padding: 0; border: 0; background: transparent; color: #777f90; font: 500 8px/1 "DM Mono"; text-transform: uppercase; cursor: pointer; }
.filter-fields { padding-top: 13px; display: grid; gap: 12px; }
.filter-fields label { display: grid; gap: 7px; }
.filter-fields label > span { color: #747c8d; font: 500 8px/1 "DM Mono"; text-transform: uppercase; }
.filter-fields select { width: 100%; padding: 10px; border: 1px solid #2e333d; border-radius: 5px; outline: 0; background: #0c0f14; color: #d7dbe3; font-size: 10px; }
.filter-fields .filter-check { min-height: 40px; padding: 0 10px; display: flex; align-items: center; grid-template-columns: auto 1fr; gap: 9px; border: 1px solid #2e333d; border-radius: 5px; cursor: pointer; }
.filter-check input { accent-color: #dce0e8; }
.search-field { width: 250px; padding: 0 12px; display: flex; align-items: center; border: 1px solid #282b34; border-radius: 7px; background: #0c0e12; color: #73798b; }
.search-field input { width: 100%; min-width: 0; padding: 11px 8px; border: 0; outline: 0; background: transparent; color: #eceef4; font-size: 10px; }
.search-field input::placeholder { color: #5f6575; }
.view-switcher { padding: 3px; display: flex; align-items: center; gap: 2px; border: 1px solid #282b34; border-radius: 7px; background: #0c0e12; }
.view-button { width: 35px; height: 33px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #686f80; cursor: pointer; }
.view-button:hover { color: #d8dbe4; }
.view-button.active { background: #20232b; color: #f3f4f8; }
.view-button svg { width: 16px; height: 16px; stroke-width: 1.7; }
.column-labels { padding: 0 20px 8px; display: grid; grid-template-columns: 1fr 260px; color: #5d6372; font: 500 8px/1 "DM Mono"; text-transform: uppercase; letter-spacing: .15em; }
.level-list { border-top: 1px solid #242730; }
.level-card { position: relative; min-height: 140px; padding: 17px 20px; display: grid; grid-template-columns: 195px minmax(290px,1fr) 260px; align-items: center; gap: 30px; border-bottom: 1px solid #20232b; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.new-level-badge { position: absolute; z-index: 5; left: 10px; top: 10px; width: max-content; height: 24px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(139,191,224,.34); border-radius: 4px; background: linear-gradient(135deg,rgba(27,45,59,.94),rgba(10,20,29,.94)); color: #d0ecfc; font: 700 10px/1 "DM Mono"; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 5px 13px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(6px); pointer-events: none; }
.grid-view .new-level-badge { left: 10px; top: 10px; }
.level-card:hover { background: #0d0f14; transform: translateX(3px); }
.thumbnail { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #252932; border-radius: 4px; background: #282825; }
.thumbnail-button { display: block; padding: 0; color: white; cursor: pointer; }
.thumbnail-button:focus-visible, .level-card:focus-visible { outline: 1px solid #dfe2eb; outline-offset: 3px; }
.thumbnail::before, .thumbnail::after { content: ""; position: absolute; }
.thumbnail::before { inset: 17% 12%; border: 1px solid rgba(255,255,255,.42); transform: skew(-18deg); box-shadow: 18px 10px 0 rgba(255,255,255,.12), -14px 16px 0 rgba(0,0,0,.5); }
.thumbnail::after { left: calc(50% - 16px); top: calc(50% - 16px); width: 32px; height: 32px; border: 5px solid white; transform: rotate(45deg); box-shadow: 0 0 30px #fff; }
.thumbnail.has-image::before, .thumbnail.has-image::after { display: none; }
.thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.thumbnail.has-image::selection { background: transparent; }
.theme-2 { background: repeating-linear-gradient(135deg,#0e0e0d 0 12px,#393936 12px 24px); }
.theme-3 { background: radial-gradient(circle at 70% 35%,#b1b0aa 0 4%,#282825 5% 19%,#080808 20% 100%); }
.theme-4 { background: linear-gradient(160deg,#b8b7b0,#161615 52%,#050505); }
.theme-5 { background: repeating-radial-gradient(circle at 30% 55%,#92918b 0 3px,#171716 4px 15px); }
.play-mark { position: absolute; z-index: 3; left: 50%; top: 50%; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(7,8,11,.72); color: white; opacity: 0; transform: translate(-50%,-50%) scale(.9); transition: opacity .18s ease, transform .18s ease; backdrop-filter: blur(5px); }
.play-mark svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.thumbnail-button:hover .play-mark, .thumbnail-button:focus-visible .play-mark, .detail-video:hover .play-mark, .detail-video:focus-visible .play-mark { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.level-main { min-width: 0; }
.title-line { min-width: 0; display: flex; align-items: baseline; gap: 17px; }
.rank { color: #7d8393; font: 500 18px/1 "DM Mono"; }
.rank-placeholder { visibility: hidden; }
.level-name { margin: 0; overflow: hidden; color: #f3f4f8; font-size: 22px; font-weight: 600; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.credits { margin-top: 14px; padding-left: 48px; display: flex; align-items: center; gap: 10px; color: #7c8292; font-size: 10px; }
.credits .publisher { color: #cfd2dc; }
.credits .verifier { color: #969cad; }
.credits.no-rank { padding-left: 0; }
.credit-divider { width: 1px; height: 11px; background: #3b3f4a; }
.rewards { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.reward { display: grid; gap: 6px; }
.reward span { color: #747b8c; font: 500 9px/1 "DM Mono"; text-transform: uppercase; }
.reward strong { color: #f3f4f8; font: 500 18px/1 "DM Mono"; }
.reward strong em { color: #8d94a4; font-size: .72em; font-style: normal; font-weight: 400; }
.future-progress { min-width: 0; display: grid; gap: 13px; }
.progress-copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.progress-copy span { color: #747b8c; font: 500 9px/1 "DM Mono"; text-transform: uppercase; }
.progress-copy strong { color: #f3f4f8; font: 500 17px/1 "DM Mono"; white-space: nowrap; }
.progress-track { position: relative; height: 4px; overflow: hidden; border-radius: 99px; background: #242832; }
.progress-track i { position: absolute; top: 0; height: 100%; display: block; border-radius: inherit; background: #e9ebf2; }
.single-reward { grid-template-columns: 1fr; }
.grid-view .future-progress { grid-column: 1 / -1; grid-row: 2; padding: 20px 3px 3px; border-top: 1px solid #20242c; }
.empty-records { margin: 0; padding: 30px 4px; color: #717787; font-size: 12px; }
.empty-state { display: none; padding: 55px 0; border-bottom: 1px solid #20232b; color: #7d8393; font-size: 12px; text-align: center; }
.list-section.grid-mode .column-labels { display: none; }
.level-list.grid-view { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border-top: 0; }
.grid-view .level-card { min-width: 0; min-height: 235px; padding: 16px; grid-template-columns: minmax(155px, 42%) minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; align-items: center; gap: 18px; border: 1px solid #242832; border-radius: 7px; background: #0a0c10; animation: card-in .2s ease both; }
.grid-view .level-card:hover { background: #0e1015; transform: translateY(-2px); border-color: #343844; }
.grid-view .thumbnail { grid-column: 1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.grid-view .level-main { grid-column: 2; grid-row: 1; padding: 2px 3px 0; }
.grid-view .credits { padding-left: 45px; }
.grid-view .rewards { grid-column: 1 / -1; grid-row: 2; padding: 17px 3px 2px; border-top: 1px solid #20242c; }
@keyframes card-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Level detail */
.show-detail > .hero, .show-detail > .list-section { display: none; }
.detail-page { padding: 52px 0 10px; animation: detail-in .25s ease both; }
.detail-page[hidden] { display: none; }
@keyframes detail-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.detail-back { padding: 0; display: inline-flex; align-items: center; gap: 9px; border: 0; background: none; color: #858b9d; font: 500 9px/1 "DM Mono"; text-transform: uppercase; cursor: pointer; }
.detail-back:hover { color: white; }
.detail-back svg { width: 15px; height: 15px; }
.detail-header { margin-top: 58px; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 25px; }
.detail-header.no-rank { grid-template-columns: 1fr; }
.detail-rank { padding-top: 10px; color: #7d8393; font: 500 clamp(24px,3vw,36px)/1 "DM Mono"; }
.detail-header h1 { font-size: clamp(54px,7vw,94px); }
.detail-credits { margin-top: 24px; display: flex; align-items: center; gap: 13px; color: #7e8494; font-size: 13px; }
.detail-credits b { color: #e6e8ee; font-weight: 600; }
.detail-credits i { width: 1px; height: 13px; background: #383c46; }
.level-description { max-width: 720px; margin: 33px 0 38px 67px; color: #9ba1b1; font-size: 14px; line-height: 1.75; }
.detail-video { width: 100%; padding: 0; display: block; aspect-ratio: 16 / 9; border-radius: 8px; cursor: pointer; }
.detail-video::before { inset: 20% 14%; }
.detail-video .play-mark.large { width: 68px; height: 68px; }
.detail-video .play-mark.large svg { width: 25px; height: 25px; }
.detail-video small { position: absolute; z-index: 3; left: 50%; top: calc(50% + 52px); color: white; font: 500 8px/1 "DM Mono"; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transform: translateX(-50%); transition: opacity .18s ease; }
.detail-video:hover small, .detail-video:focus-visible small { opacity: 1; }
.metadata-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 48px; border-top: 1px solid #30333c; }
.meta-item { min-height: 76px; padding: 0 3px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 0; border-bottom: 1px solid #242730; background: transparent; color: inherit; text-align: left; }
.meta-item span { color: #747b8c; font: 500 10px/1 "DM Mono"; letter-spacing: .1em; text-transform: uppercase; }
.meta-item strong { margin-left: auto; overflow: hidden; color: #edf0f5; font: 500 17px/1.2 "DM Mono"; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.meta-item strong em { color: #8a91a1; font-size: 12px; font-style: normal; font-weight: 400; }
.meta-item small { display: flex; align-items: center; gap: 6px; color: #7e8595; font: 500 8px/1 "DM Mono"; text-transform: uppercase; }
.meta-item small svg { width: 11px; height: 11px; }
.copy-id { cursor: pointer; transition: color .18s ease; }
.copy-id:hover strong { color: white; }
.song-item { grid-column: span 2; }
.detail-block { margin-top: 46px; }
.detail-section-title { padding-bottom: 14px; display: flex; justify-content: space-between; border-bottom: 1px solid #2a2d36; }
.detail-section-title span { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.detail-section-title small { color: #737a8a; font: 500 9px/1 "DM Mono"; text-transform: uppercase; }
.creator-list { padding: 19px 0 2px; display: flex; flex-wrap: wrap; gap: 9px; }
.creator-list span { width: max-content; padding: 13px 17px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #2b2f39; border-radius: 5px; background: #0b0d11; color: #d8dbe3; font-size: 12px; transition: background .18s ease, border-color .18s ease; }
.creator-list span:hover { border-color: #414653; background: #111319; }
.records-list { border-bottom: 0; }
.record-row { min-height: 76px; padding: 0 17px; display: grid; grid-template-columns: 38px minmax(140px,1fr) 84px; align-items: center; gap: 14px; border-bottom: 1px solid #20232b; cursor: pointer; transition: background .18s ease; }
.record-row:last-child { border-bottom: 0; }
.records-block { margin-bottom: 6px; }
.record-row:hover { background: #0d0f14; }
.player-flag { font-size: 22px; }
.player-identity { min-width: 0; display: flex; align-items: center; gap: 9px; }
.player-link { width: max-content; padding: 0; border: 0; background: none; color: #e8eaf0; font-size: 14px; font-weight: 600; cursor: pointer; }
.player-link:hover { text-decoration: underline; }
.verifier-tag { padding: 5px 7px; border: 1px solid #3a3e49; border-radius: 3px; color: #a7adbb; font: 500 8px/1 "DM Mono"; text-transform: uppercase; }
.hardest-tag { padding: 5px 7px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #555c6d; border-radius: 3px; color: #dce0e9; font: 500 8px/1 "DM Mono"; text-transform: uppercase; }
.hardest-tag svg { width: 10px; height: 10px; fill: currentColor; }
.record-percent { width: 84px; color: #e8eaf0; font: 500 16px/1 "DM Mono"; text-align: right; }
.history-empty { min-height: 98px; display: flex; align-items: center; justify-content: center; gap: 10px; border-bottom: 1px solid #20232b; color: #687080; font: 500 10px/1 "DM Mono"; text-transform: uppercase; }
.history-empty svg { width: 16px; height: 16px; }

/* Home */
.home-page[hidden] { display: none; }
.show-home > .hero, .show-home > .list-section, .show-home > .detail-page, .show-home > .player-rankings-page, .show-home > .time-machine-page, .show-home > .updates-page, .show-home > .list-editor-page { display: none; }
.home-page { padding: clamp(44px,6vw,78px) 0 25px; animation: detail-in .3s ease both; }
.home-hero { min-height: 510px; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(330px,.92fr); align-items: center; gap: 42px; border-bottom: 1px solid #292d36; }
.home-hero-copy .eyebrow, .home-section .eyebrow, .home-dashboard .eyebrow { color: #6f7789; font: 500 9px/1 "DM Mono"; letter-spacing: .16em; text-transform: uppercase; }
.home-hero h1 { margin-top: 20px; max-width: 720px; font-size: clamp(58px,7vw,102px); line-height: .93; letter-spacing: -.065em; }
.home-hero h1 em { color: #81899a; font-style: normal; }
.home-hero-copy > p { max-width: 610px; margin-top: 25px; color: #9299a8; font-size: 14px; line-height: 1.75; }
.home-actions { margin-top: 31px; display: flex; flex-wrap: wrap; gap: 10px; }
.home-actions button, .home-section > header button, .home-dashboard header button, .home-archive-panel > button { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #343945; border-radius: 5px; background: #12151a; color: #b7bdc9; font: 500 9px/1 "DM Mono"; text-transform: uppercase; cursor: pointer; }
.home-actions .home-primary { border-color: #dfe3eb; background: #e8ebf1; color: #090b0f; }
.home-actions svg, .home-section > header button svg, .home-archive-panel > button svg { width: 14px; height: 14px; }
.home-emblem { position: relative; min-height: 420px; display: grid; place-items: center; isolation: isolate; }
.home-emblem::before { content: ""; position: absolute; z-index: -2; width: 72%; aspect-ratio: 1; border: 1px solid #252a34; border-radius: 50%; }
.home-emblem::after { content: ""; position: absolute; z-index: -3; width: 60%; aspect-ratio: 1; border-radius: 50%; background: rgba(0,133,255,.16); filter: blur(65px); }
.home-emblem span { position: absolute; z-index: -1; width: 82%; height: 1px; background: linear-gradient(90deg,transparent,#333946,transparent); transform: rotate(-24deg); }
.home-emblem img { width: min(92%,440px); max-height: 390px; object-fit: contain; filter: drop-shadow(0 22px 34px rgba(0,95,255,.13)); }
.home-stats { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid #292d36; }
.home-stats article { min-height: 126px; padding: 25px 24px; display: grid; align-content: center; gap: 9px; border-right: 1px solid #292d36; }
.home-stats article:first-child { padding-left: 0; }
.home-stats article:last-child { border-right: 0; }
.home-stats strong { font: 600 30px/1 "DM Mono"; }
.home-stats span { color: #71798a; font: 500 8px/1 "DM Mono"; letter-spacing: .09em; text-transform: uppercase; }
.home-section { padding: 72px 0 20px; }
.home-section > header, .home-updates-panel > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.home-section h2, .home-dashboard h2 { margin-top: 10px; font-size: 29px; letter-spacing: -.035em; }
.home-podium { margin-top: 27px; padding-top: 60px; display: grid; grid-template-columns: repeat(3,1fr); align-items: end; gap: 12px; }
.home-level-card { position: relative; min-width: 0; padding: 0; overflow: visible; border: 1px solid #292d36; border-radius: 7px; background: #0b0d11; color: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, transform .18s ease; }
.home-level-card:hover { border-color: #474d59; transform: translateY(-3px); }
.home-level-card.podium-rank-1 { z-index: 2; border-color: #3d5269; background: linear-gradient(180deg,#101722,#0b0d11 55%); transform: translateY(-48px); box-shadow: 0 24px 55px rgba(0,88,190,.12); }
.home-level-card.podium-rank-1:hover { border-color: #6484a5; transform: translateY(-53px); }
.home-level-card.podium-rank-2 { border-bottom: 3px solid #858d9b; }
.home-level-card.podium-rank-3 { border-bottom: 3px solid #685343; }
.podium-crown { position: absolute; z-index: 4; top: -35px; left: 50%; height: 28px; padding: 0 10px; display: flex; align-items: center; gap: 6px; border: 1px solid #496782; border-radius: 14px; background: #111a24; color: #9cc9ed; font: 600 7px/1 "DM Mono"; letter-spacing: .08em; text-transform: uppercase; transform: translateX(-50%); white-space: nowrap; }
.podium-crown svg { width: 12px; height: 12px; }
.home-level-card > svg { position: absolute; right: 16px; bottom: 18px; width: 17px; height: 17px; color: #737b8c; }
.home-level-image { position: relative; aspect-ratio: 16/9; display: block; overflow: hidden; border-radius: 6px 6px 0 0; background: #11141a; }
.home-level-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 50%,rgba(4,5,8,.52)); }
.home-level-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .3s ease; }
.home-level-card:hover img { transform: scale(1.025); }
.home-level-image b { position: absolute; z-index: 2; left: 14px; bottom: 12px; color: white; font: 600 16px/1 "DM Mono"; }
.home-level-copy { min-height: 112px; padding: 17px 45px 17px 16px; display: grid; align-content: center; gap: 7px; }
.home-level-copy small { color: #6f7788; font: 500 7px/1 "DM Mono"; letter-spacing: .1em; text-transform: uppercase; }
.home-level-copy strong { overflow: hidden; color: #eef0f5; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.home-level-copy > span { display: flex; align-items: center; gap: 8px; overflow: hidden; color: #858c9d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.home-level-copy i { width: 1px; height: 11px; background: #353a45; }
.home-dashboard { padding: 64px 0 25px; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 12px; }
.home-updates-panel, .home-archive-panel { min-height: 360px; padding: 25px; border: 1px solid #292d36; border-radius: 7px; background: #0a0c10; }
.home-updates-panel > header { padding-bottom: 19px; border-bottom: 1px solid #282c35; }
.home-updates-panel header button { min-height: 36px; }
.home-update-row { width: 100%; min-height: 65px; padding: 9px 2px; display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; align-items: center; gap: 11px; border: 0; border-bottom: 1px solid #20242c; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.home-update-row > span { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #343a45; border-radius: 50%; color: #99a1b0; }
.home-update-row > span svg, .home-update-row > svg { width: 13px; height: 13px; }
.home-update-row > div { min-width: 0; display: grid; gap: 5px; }
.home-update-title { min-width: 0; display: flex; align-items: center; gap: 8px; }
.home-update-row strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.home-update-row small { color: #707889; font: 500 7px/1 "DM Mono"; text-transform: uppercase; }
.home-update-row .home-source-badge { flex: 0 0 auto; padding: 4px 6px; border: 1px solid #3b424e; border-radius: 3px; color: #aeb5c2; font-size: 7px; line-height: 1; letter-spacing: .05em; }
.home-update-row .home-source-badge.challenge { border-color: #4e4337; color: #c9a97e; }
.home-update-row .home-source-badge.unlisted { border-color: #374b5e; color: #94b8d7; }
.home-update-row > svg { color: #5f6675; }
.home-updates-empty { min-height: 220px; display: grid; place-content: center; justify-items: center; gap: 10px; color: #697181; font: 500 9px/1 "DM Mono"; text-transform: uppercase; }
.home-updates-empty svg { width: 23px; height: 23px; }
.home-archive-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: linear-gradient(145deg,#10131a,#090b0f); }
.home-archive-panel::after { content: ""; position: absolute; right: -80px; top: 50px; width: 220px; height: 220px; border: 1px solid #29303d; border-radius: 50%; box-shadow: 0 0 80px rgba(24,111,255,.08); }
.home-archive-panel > div { position: relative; z-index: 1; }
.home-archive-panel > div > svg { width: 35px; height: 35px; color: #9da5b5; }
.home-archive-panel h2 { max-width: 280px; margin-top: 22px; font-size: 35px; }
.home-archive-panel p { max-width: 330px; margin-top: 13px; color: #7e8696; font-size: 11px; line-height: 1.65; }
.home-archive-panel > button { position: relative; z-index: 1; align-self: flex-start; }
.position-history-track { position: relative; padding: 42px 12px 20px; display: flex; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #4b5160 transparent; }
.position-history-track::before { content: ""; position: absolute; left: 20px; right: 20px; top: 48px; height: 1px; background: #363b47; }
.position-event { position: relative; width: 172px; min-width: 172px; padding: 26px 8px 8px; display: grid; justify-items: center; gap: 7px; outline: 0; text-align: center; }
.position-event-dot { position: absolute; z-index: 2; top: 0; left: 50%; width: 13px; height: 13px; border: 3px solid #090b0f; border-radius: 50%; background: #9aa1b1; box-shadow: 0 0 0 1px #525866; transform: translateX(-50%); }
.position-event strong { color: #e3e6ec; font-size: 12px; }
.position-event > small { display: flex; align-items: center; gap: 6px; color: #747b8b; font: 500 8px/1 "DM Mono"; text-transform: uppercase; }
.position-event > small svg { width: 10px; height: 10px; }
.position-event-tooltip { position: fixed; z-index: 80; width: 250px; padding: 12px; display: grid; gap: 9px; border: 1px solid #3b404b; border-radius: 5px; background: #15181e; opacity: 0; pointer-events: none; transform: translateX(-4px); transition: opacity .14s ease, transform .14s ease; box-shadow: 0 12px 35px rgba(0,0,0,.38); text-align: left; }
.position-event-tooltip.visible { opacity: 1; transform: translateX(0); }
.position-event-tooltip b { color: #d9dde5; font-size: 10px; line-height: 1.45; }
.position-event-tooltip span { color: #8f96a6; font: 500 8px/1 "DM Mono"; text-transform: uppercase; }
.position-event-tooltip svg { width: 11px; height: 11px; }
.type-added .position-event-dot, .type-restored .position-event-dot, .history-editor-event.type-added .history-type-dot, .history-editor-event.type-restored .history-type-dot { background: #75b48b; }
.type-removed .position-event-dot, .history-editor-event.type-removed .history-type-dot { background: #c5777e; }
.type-moved_up .position-event-dot, .history-editor-event.type-moved_up .history-type-dot { background: #7ba4cf; }
.type-moved_down .position-event-dot, .history-editor-event.type-moved_down .history-type-dot { background: #c59d68; }

/* Player Rankings */
.show-player-rankings > .hero, .show-player-rankings > .list-section, .show-player-rankings > .detail-page { display: none; }
.player-rankings-page[hidden] { display: none; }
.player-rankings-page { padding: clamp(55px,7vw,90px) 0 18px; animation: detail-in .25s ease both; }
.rankings-hero { padding-bottom: 43px; display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid #2b2f39; }
.rankings-hero .eyebrow { display: block; margin-bottom: 16px; color: #707789; font: 500 9px/1 "DM Mono"; letter-spacing: .16em; text-transform: uppercase; }
.rankings-hero h1 { font-size: clamp(50px,7vw,82px); }
.ranked-player-total { padding-bottom: 3px; display: grid; justify-items: end; gap: 7px; }
.ranked-player-total strong { color: #f1f3f7; font: 500 25px/1 "DM Mono"; }
.ranked-player-total small { color: #737a8b; font: 500 8px/1 "DM Mono"; letter-spacing: .1em; text-transform: uppercase; }
.ranking-tabs { margin-top: 26px; padding-bottom: 17px; display: flex; gap: 5px; border-bottom: 1px solid #22252d; }
.ranking-tab { min-width: 112px; padding: 11px 17px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #777e8f; font: 500 10px/1 "DM Mono"; text-transform: uppercase; cursor: pointer; }
.ranking-tab:hover { color: #d7dae2; }
.ranking-tab.active { border-color: #353944; background: #1b1e26; color: #f2f3f7; }
.ranking-search { width: 320px; margin: 20px 0; padding: 0 14px; display: flex; align-items: center; gap: 9px; border: 1px solid #282c35; border-radius: 7px; background: #0c0e12; color: #6e7586; }
.ranking-search svg { width: 15px; height: 15px; }
.ranking-search input { width: 100%; padding: 12px 0; border: 0; outline: 0; background: transparent; color: #eceef4; font-size: 11px; }
.player-ranking-layout { display: grid; grid-template-columns: minmax(310px, .72fr) minmax(0, 1.45fr); gap: 18px; align-items: start; }
.ranking-board, .player-profile { overflow: hidden; border: 1px solid #252932; border-radius: 8px; background: #090b0f; }
.ranking-board-head { min-height: 42px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #272b34; color: #62697a; font: 500 8px/1 "DM Mono"; letter-spacing: .1em; text-transform: uppercase; }
#playerRankingList { max-height: 1080px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #464b59 transparent; overscroll-behavior: contain; }
#playerRankingList::-webkit-scrollbar { width: 5px; }
#playerRankingList::-webkit-scrollbar-thumb { border-radius: 6px; background: #464b59; }
.ranking-player { width: 100%; min-height: 54px; padding: 0 17px; display: grid; grid-template-columns: 42px 29px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid #20232b; background: transparent; color: #dfe2e9; text-align: left; cursor: pointer; transition: background .18s ease; }
.ranking-player:last-child { border-bottom: 0; }
.ranking-player:hover, .ranking-player.selected { background: #12151b; }
.ranking-player.selected { box-shadow: inset 2px 0 #e7e9ef; }
.ranking-position { color: #737a8b; font: 500 11px/1 "DM Mono"; }
.ranking-flag { font-size: 18px; }
.ranking-name { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ranking-player strong { color: #eef0f5; font: 500 12px/1 "DM Mono"; }
.ranking-empty { margin: 0; padding: 45px 20px; color: #707788; font-size: 11px; text-align: center; }
.player-profile { padding: 25px; }
.profile-head { padding-bottom: 23px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #272b34; }
.profile-flag { display: block; font-size: 34px; line-height: 1; transform: translateY(5px); }
.profile-head > div > span { color: #747b8c; font: 500 8px/1 "DM Mono"; text-transform: uppercase; }
.profile-head h2 { margin: 5px 0 4px; color: #f2f4f8; font-size: 25px; letter-spacing: -.03em; text-transform: none; }
.profile-head p { margin: 0; color: #808798; font-size: 11px; }
.profile-stats { padding: 22px 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; border-bottom: 1px solid #272b34; }
.profile-stats div { min-width: 0; display: grid; gap: 8px; }
.profile-stats span { color: #6f7687; font: 500 8px/1 "DM Mono"; text-transform: uppercase; }
.profile-stats strong { overflow: hidden; color: #eff1f5; font: 500 16px/1.25 "DM Mono"; text-overflow: ellipsis; white-space: nowrap; }
.profile-stats .hardest-stat { margin: -8px 0; padding: 10px 13px; border: 1px solid rgba(240,197,99,.38); border-radius: 6px; background: linear-gradient(120deg,rgba(240,197,99,.14),rgba(240,197,99,.025)); box-shadow: inset 2px 0 #e5bd62; }
.hardest-stat span { display: flex; align-items: center; gap: 6px; color: #cfad62; }
.hardest-stat span svg { width: 12px; height: 12px; fill: currentColor; }
.profile-stats .hardest-stat strong { color: #ffe5a6; font-size: 17px; }
.profile-categories { padding: 15px 0 7px; display: grid; grid-template-columns: 1fr; gap: 7px; }
.profile-category { border: 1px solid #262a33; border-radius: 5px; background: #0c0e12; }
.profile-category summary { min-height: 58px; padding: 0 17px; display: grid; grid-template-columns: minmax(0,1fr) auto 15px; align-items: center; gap: 12px; color: #c8ccd5; font-size: 12px; font-weight: 600; list-style: none; cursor: pointer; }
.profile-category summary::-webkit-details-marker { display: none; }
.profile-category summary strong { color: #edf0f5; font: 500 12px/1 "DM Mono"; }
.profile-category summary svg { width: 14px; transition: transform .18s ease; }
.profile-category[open] summary svg { transform: rotate(180deg); }
.profile-category > .profile-category-levels { padding: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid #242832; }
.profile-category-level { width: max-content; max-width: 100%; min-height: 42px; padding: 0 13px; display: inline-flex; align-items: center; gap: 12px; border: 1px solid #292d36; border-radius: 5px; background: #111319; transition: border-color .18s ease, background .18s ease; }
.profile-category-level:hover { border-color: #3b404c; background: #15181e; }
.profile-cell-title { min-width: 0; display: inline-flex; align-items: center; gap: 9px; }
.profile-cell-title > span { color: #777e8f; font: 500 11px/1 "DM Mono"; }
.profile-category-level button { width: max-content; max-width: 100%; padding: 0; overflow: hidden; border: 0; background: none; color: #dfe2e9; font-size: 12px; font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.profile-category-level button:hover { color: white; text-decoration: underline; }
.profile-cell-meta { display: inline-flex; align-items: center; gap: 7px; }
.profile-category-level strong { color: #edf0f5; font: 500 10px/1 "DM Mono"; white-space: nowrap; }
.profile-category-level .mini-verifier { padding: 4px 6px; border: 1px solid #3b404c; border-radius: 3px; color: #aeb4c2; font: 500 7px/1 "DM Mono"; text-transform: uppercase; }
.profile-category-level .source-tag { padding: 4px 6px; border: 1px solid #3c4652; border-radius: 3px; color: #9cabbc; font: 500 7px/1 "DM Mono"; text-transform: uppercase; }
.profile-category > p { margin: 0; padding: 0 11px 12px; color: #606777; font-size: 9px; }
.profile-records { margin-top: 20px; }
.profile-section-head { padding-bottom: 12px; display: flex; justify-content: space-between; border-bottom: 1px solid #2a2d36; }
.profile-section-head > span { color: #d9dce4; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.profile-section-head small { color: #737a8a; font: 500 8px/1 "DM Mono"; text-transform: uppercase; }
.profile-record { min-height: 58px; display: grid; grid-template-columns: 44px minmax(0,1fr) 55px; align-items: center; gap: 10px; border-bottom: 1px solid #20232b; cursor: pointer; }
.profile-record:last-child { border-bottom: 0; }
.profile-record:hover { background: #0e1015; }
.profile-level-rank { color: #777e8f; font: 500 10px/1 "DM Mono"; }
.profile-record button { width: max-content; max-width: 100%; padding: 0; overflow: hidden; border: 0; background: none; color: #e3e6ec; font-size: 12px; font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.profile-record button:hover { text-decoration: underline; }
.profile-record strong { color: #eef0f5; font: 500 12px/1 "DM Mono"; text-align: right; }
.no-profile-records { margin: 0; padding: 30px 0 10px; color: #687080; font-size: 10px; text-align: center; }
.profile-empty { min-height: 300px; display: grid; place-content: center; justify-items: center; gap: 12px; color: #687080; font-size: 11px; }
.profile-empty svg { width: 28px; height: 28px; }

/* List Editor */
.list-editor-page[hidden] { display: none; }
.show-list-editor > .hero, .show-list-editor > .list-section, .show-list-editor > .detail-page, .show-list-editor > .player-rankings-page, .show-list-editor > .time-machine-page { display: none; }
.list-editor-page { padding: clamp(48px,6vw,75px) 0 22px; animation: detail-in .25s ease both; }
.editor-hero { padding-bottom: 34px; display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; border-bottom: 1px solid #2b2f39; }
.locked-link.active {
  border-color: #383c49;
  background: linear-gradient(100deg, #252833, #1a1c24);
  color: #f6f7fb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), inset 0 -1px 0 rgba(0,0,0,.2);
}
.locked-link.active::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 3px; height: 20px;
  border-radius: 2px; background: #f3f4f8; transform: translateY(-50%);
}
.editor-hero .eyebrow { display: block; margin-bottom: 14px; color: #707789; font: 500 9px/1 "DM Mono"; letter-spacing: .16em; text-transform: uppercase; }
.editor-hero h1 { font-size: clamp(48px,7vw,80px); }
.editor-hero p { margin: 18px 0 0; color: #858c9d; font-size: 11px; }
.draft-status { padding: 8px 10px; border: 1px solid #30343e; border-radius: 4px; color: #858c9d; font: 500 8px/1 "DM Mono"; text-transform: uppercase; }
.draft-status.dirty { border-color: #6b5b38; background: #1a1710; color: #dfc27d; }
.editor-toolbar { margin: 20px 0; display: grid; grid-template-columns: repeat(6,auto) 1fr auto auto; gap: 7px; }
.editor-toolbar button, .editor-panel-head button, .editor-form-head button, .record-add-form button, .editor-transfer-actions button { min-height: 40px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #30343e; border-radius: 5px; background: #14171d; color: #b7bdca; font: 500 9px/1 "DM Mono"; text-transform: uppercase; cursor: pointer; }
.editor-toolbar button:hover, .editor-panel-head button:hover { border-color: #4a505e; color: white; }
.editor-toolbar button:disabled { opacity: .3; cursor: default; }
.editor-toolbar svg, .editor-panel-head svg, .editor-form-head svg, .editor-transfer-actions svg { width: 13px; height: 13px; }
.editor-toolbar .editor-save, .editor-form-head button { border-color: #d9dce4; background: #e5e7ed; color: #0b0d11; }
.editor-toolbar .editor-discard { color: #a98f92; }
.editor-list-picker { margin-bottom: 18px; padding: 6px; display: flex; justify-content: space-between; gap: 12px; border: 1px solid #282c35; border-radius: 7px; background: #0b0d11; }
.editor-list-picker > div { display: flex; gap: 4px; }
.editor-list-picker button { min-height: 40px; padding: 0 15px; border: 0; border-radius: 4px; background: transparent; color: #777e8f; font: 500 10px/1 "DM Mono"; text-transform: uppercase; cursor: pointer; }
.editor-list-picker button.active { background: #20232b; color: #f0f2f6; }
.editor-list-picker button svg { width: 14px; height: 14px; }
.editor-central-note { padding: 0 12px; align-self: center; color: #6f7686; font: 500 9px/1 "DM Mono"; text-transform: uppercase; white-space: nowrap; }
.editor-workspace { display: grid; grid-template-columns: minmax(310px,.7fr) minmax(0,1.35fr); gap: 14px; align-items: start; }
.editor-level-panel, .editor-form-panel { border: 1px solid #292d36; border-radius: 8px; background: #090b0f; }
.editor-level-panel { overflow: hidden; }
.editor-panel-head { min-height: 74px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #292d36; }
.editor-panel-head > div { display: grid; gap: 6px; }
.editor-panel-head span { color: #e3e6ec; font-size: 14px; font-weight: 600; }
.editor-panel-head small { color: #737a8b; font: 500 9px/1 "DM Mono"; text-transform: uppercase; }
.editor-level-list { max-height: 720px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #444957 transparent; }
.editor-level-row { min-height: 70px; padding: 0 13px; display: grid; grid-template-columns: 42px minmax(0,1fr) minmax(58px,.6fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid #20232b; color: #7b8292; cursor: pointer; }
.editor-level-row:hover, .editor-level-row.selected { background: #12151b; }
.editor-level-row.selected { box-shadow: inset 2px 0 #e4e6ec; }
.editor-level-row > span { font: 500 11px/1 "DM Mono"; }
.editor-level-row > strong { overflow: hidden; color: #dfe2e8; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.player-editor-row { grid-template-columns: 42px minmax(0,1fr) auto; }
.player-editor-row > span { font-size: 20px; }
.update-editor-row > span { display: grid; place-items: center; }
.update-editor-row > span svg { width: 17px; height: 17px; }
.editor-level-row > small { overflow: hidden; color: #6f7687; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.editor-level-row > div { display: flex; gap: 3px; }
.editor-level-row button, .editor-record-actions button { width: 27px; height: 27px; padding: 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #777e8e; cursor: pointer; }
.editor-level-row button:hover, .editor-record-actions button:hover { border-color: #363b46; background: #1a1d24; color: white; }
.editor-level-row svg, .editor-record-actions svg { width: 12px; height: 12px; }
.removed-levels { border-top: 1px solid #292d36; }
.removed-levels > summary { min-height: 52px; padding: 0 14px; display: grid; grid-template-columns: 1fr auto 14px; align-items: center; gap: 8px; color: #8b92a2; font-size: 10px; list-style: none; cursor: pointer; }
.removed-levels > summary::-webkit-details-marker { display: none; }
.removed-levels > summary strong { font: 500 10px/1 "DM Mono"; }
.removed-levels > summary svg { width: 13px; }
.removed-level-row { padding: 11px 13px; display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center; gap: 6px; border-top: 1px solid #20232b; opacity: .7; }
.removed-level-row > div { display: grid; gap: 5px; }
.removed-level-row strong { color: #b7bdc9; font-size: 10px; }
.removed-level-row small { color: #6e7585; font-size: 8px; }
.removed-level-row button { min-height: 27px; padding: 0 7px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #30343e; border-radius: 4px; background: #14171d; color: #858c9c; font-size: 7px; cursor: pointer; }
.removed-level-row svg { width: 10px; height: 10px; }
.editor-form-panel { min-height: 360px; padding: 20px; }
.editor-form-empty { min-height: 320px; display: grid; place-content: center; justify-items: center; gap: 12px; color: #666d7d; font-size: 10px; }
.editor-form-empty svg { width: 27px; height: 27px; }
.editor-form-head { padding-bottom: 18px; display: flex; justify-content: space-between; gap: 15px; border-bottom: 1px solid #292d36; }
.editor-form-head > div > span { color: #707789; font: 500 8px/1 "DM Mono"; text-transform: uppercase; }
.editor-form-head h2 { margin-top: 6px; color: #edf0f5; font-size: 28px; letter-spacing: -.03em; text-transform: none; }
.editor-form-head-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.editor-form-head-actions .transfer-button { border-color: #353a45; background: #11141a; color: #c5cad5; }
.editor-form-head-actions .player-delete-button { border-color: #553b3d; background: #181012; color: #c99397; }
.editor-form-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.editor-field { min-width: 0; display: grid; gap: 7px; }
.editor-field-wide { grid-column: 1 / -1; }
.editor-field > span { color: #747b8c; font: 500 9px/1 "DM Mono"; text-transform: uppercase; }
.editor-field input, .editor-field textarea, .editor-field select, .record-add-form input { width: 100%; min-width: 0; padding: 12px 13px; border: 1px solid #2c3039; border-radius: 5px; outline: 0; background: #0e1015; color: #e5e7ec; font-size: 12px; }
.editor-field-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.editor-field textarea { resize: vertical; line-height: 1.5; }
.editor-field input:focus, .editor-field textarea:focus, .editor-field select:focus, .record-add-form input:focus { border-color: #555c69; }
.editor-subsection { margin-top: 26px; }
.editor-subsection > header { padding-bottom: 11px; border-bottom: 1px solid #292d36; }
.editor-subsection > header > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.editor-subsection > header span { color: #d5d8e0; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.editor-subsection > header small { color: #707789; font: 500 8px/1 "DM Mono"; }
.thumbnail-editor { padding: 14px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.thumbnail-editor label { display: flex; align-items: center; gap: 6px; color: #9ca3b2; font-size: 9px; }
.thumbnail-editor input[type=file] { max-width: 190px; color: #777e8f; font-size: 8px; }
.thumbnail-file-name { color: #626979; font: 500 8px/1 "DM Mono"; }
.editor-record-list { display: grid; }
.editor-record-row { min-height: 55px; padding: 0 8px; display: grid; grid-template-columns: minmax(0,1fr) 75px auto; align-items: center; gap: 9px; border-bottom: 1px solid #20232b; }
.editor-record-row.featured { background: transparent; box-shadow: none; }
.record-hardest { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #64552f; color: #d8bb70; }
.record-hardest svg { width: 9px; height: 9px; fill: currentColor; }
.editor-record-row > div:first-child { display: flex; align-items: center; gap: 8px; }
.editor-record-row strong { color: #e3e6ec; font-size: 10px; }
.editor-record-row span { color: #969dad; font: 500 9px/1 "DM Mono"; }
.editor-record-row small { padding: 4px 6px; border-radius: 3px; font: 500 7px/1 "DM Mono"; text-transform: uppercase; }
.record-valid { border: 1px solid #385044; color: #8eb79c; }
.record-invalid { border: 1px solid #553b3d; color: #c28c90; }
.record-video { font-size: 7px !important; text-transform: uppercase; }
.editor-record-actions { display: flex; }
.record-add-form { margin-top: 12px; display: grid; grid-template-columns: .8fr .55fr 1.2fr auto; gap: 7px; }
.editor-collapsible { border-top: 1px solid #292d36; }
.editor-collapsible > summary { min-height: 54px; display: flex; align-items: center; gap: 10px; color: #e0e3e9; cursor: pointer; list-style: none; }
.editor-collapsible > summary::-webkit-details-marker, .history-editor-event > summary::-webkit-details-marker { display: none; }
.editor-collapsible > summary > span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.editor-collapsible > summary > small { margin-left: auto; color: #737a8a; font: 500 8px/1 "DM Mono"; text-transform: uppercase; }
.editor-collapsible > summary > svg { width: 14px; height: 14px; transition: transform .18s ease; }
.editor-collapsible[open] > summary > svg, .history-editor-event[open] > summary > svg { transform: rotate(180deg); }
.editor-collapsible-body { padding-bottom: 8px; }
.history-editor-list { display: grid; gap: 7px; }
.history-editor-event { border: 1px solid #292d36; border-radius: 5px; background: #0d0f14; }
.history-editor-event > summary { min-height: 47px; padding: 0 11px; display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; }
.history-type-dot { width: 8px; height: 8px; border-radius: 50%; background: #8e95a5; }
.history-editor-event summary strong { color: #dfe2e8; font-size: 11px; }
.history-editor-event summary small { margin-left: auto; color: #747b8b; font: 500 8px/1 "DM Mono"; }
.history-editor-event summary svg { width: 13px; height: 13px; color: #777e8f; transition: transform .18s ease; }
.history-quick-delete { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #8c6468; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.history-quick-delete:hover, .history-quick-delete:focus-visible { border-color: #553b3f; outline: 0; background: #181113; color: #d09096; }
.history-quick-delete svg { width: 13px !important; height: 13px !important; color: currentColor !important; }
.history-editor-grid { padding: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; border-top: 1px solid #252932; }
.history-editor-footer { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.history-delete-button, .history-add-button, .history-reset-button { min-height: 38px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #3b3034; border-radius: 4px; background: #151013; color: #bd858a; font: 500 8px/1 "DM Mono"; text-transform: uppercase; cursor: pointer; }
.history-delete-button { align-self: end; justify-self: start; }
.history-add-button { border-color: #343944; background: #11141a; color: #bbc1cd; }
.history-reset-button { border-color: #504238; background: #17130f; color: #d1a77e; }
.history-reset-button:hover, .history-reset-button:focus-visible { border-color: #765b45; outline: 0; background: #211913; color: #f1c79e; }
.history-delete-button svg, .history-add-button svg, .history-reset-button svg { width: 12px; height: 12px; }
.player-editor-records { display: grid; }
.player-editor-record { min-height: 68px; padding: 9px 8px; display: grid; grid-template-columns: minmax(160px,.8fr) 105px minmax(180px,1fr) 36px; align-items: center; gap: 8px; border-bottom: 1px solid #20232b; }
.player-editor-record > div { min-width: 0; display: grid; gap: 5px; }
.player-editor-record small { overflow: hidden; color: #6f7686; font: 500 8px/1 "DM Mono"; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.player-editor-record strong { overflow: hidden; color: #e1e4ea; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.player-editor-record input { width: 100%; min-width: 0; padding: 10px; border: 1px solid #2c3039; border-radius: 5px; outline: 0; background: #0e1015; color: #e5e7ec; font-size: 11px; }
.player-editor-record button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #3b3034; border-radius: 4px; background: #151013; color: #b77f84; cursor: pointer; }
.player-editor-record button svg { width: 13px; height: 13px; }
.editor-inline-empty { margin: 0; padding: 25px 15px; color: #656c7c; font-size: 9px; text-align: center; }
.position-editor-placeholder p { margin: 0; padding: 16px 0 0; color: #687080; font-size: 9px; }
.editor-transfer-actions { margin-top: 24px; padding-top: 17px; display: flex; flex-wrap: wrap; gap: 7px; border-top: 1px solid #292d36; }
.editor-transfer-actions .transfer-button { color: #c6cad4; }
.preview-level { min-height: 72px; padding: 0 22px; display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 15px; border-bottom: 1px solid #20232b; }
.preview-level > span { color: #777e8f; font: 500 11px/1 "DM Mono"; }
.preview-level > div { display: grid; gap: 7px; }
.preview-level strong { color: #edf0f5; font-size: 14px; }
.preview-level small { color: #777e8f; font-size: 9px; }
.preview-level em { color: #dfe2e9; font: normal 500 11px/1 "DM Mono"; }

/* Time Machine */
.history-mode-banner[hidden], .time-machine-page[hidden] { display: none; }
.history-mode-banner { margin-top: 20px; min-height: 52px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #3b404b; border-radius: 6px; background: #13161c; color: #aeb4c1; }
.history-mode-banner > div { display: flex; align-items: center; gap: 10px; }
.history-mode-banner svg { width: 15px; height: 15px; }
.history-mode-banner span { font: 500 9px/1 "DM Mono"; text-transform: uppercase; }
.history-mode-banner strong { color: #f0f2f6; font: 500 11px/1 "DM Mono"; }
.history-mode-banner button { padding: 8px 10px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #3a3f4a; border-radius: 4px; background: #1b1e25; color: #e5e7ed; font: 500 8px/1 "DM Mono"; text-transform: uppercase; cursor: pointer; }
.editor-preview-banner[hidden] { display: none; }
.editor-preview-banner { margin-top: 20px; min-height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #5b5137; border-radius: 6px; background: #17150f; color: #c8bd9e; }
.editor-preview-banner > div, .editor-preview-banner button { display: flex; align-items: center; gap: 9px; }
.editor-preview-banner svg { width: 15px; height: 15px; }
.editor-preview-banner span { font: 500 9px/1 "DM Mono"; text-transform: uppercase; }
.editor-preview-banner strong { color: #f0e7ca; font: 500 11px/1 "DM Mono"; }
.editor-preview-banner button { padding: 9px 11px; border: 1px solid #5b5137; border-radius: 4px; background: #211d13; color: #f0e7ca; font: 500 8px/1 "DM Mono"; text-transform: uppercase; cursor: pointer; }
.pending-detail-badges { position: absolute; z-index: 4; top: 14px; right: 14px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.pending-detail-badges span { padding: 7px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; background: rgba(8,10,14,.82); color: #e8ebf1; font: 500 8px/1 "DM Mono"; text-transform: uppercase; backdrop-filter: blur(8px); }
.pending-detail-badges .priority-high, .pending-detail-badges .priority-urgent { border-color: #70474c; color: #e0a7ad; }
.show-time-machine > .hero, .show-time-machine > .list-section, .show-time-machine > .detail-page, .show-time-machine > .player-rankings-page { display: none; }
.time-machine-page { padding: clamp(55px,7vw,90px) 0 24px; animation: detail-in .25s ease both; }
.time-machine-hero { padding-bottom: 40px; border-bottom: 1px solid #2b2f39; }
.time-machine-hero .eyebrow { display: block; margin-bottom: 16px; color: #707789; font: 500 9px/1 "DM Mono"; letter-spacing: .16em; text-transform: uppercase; }
.time-machine-hero h1 { font-size: clamp(52px,8vw,90px); }
.time-machine-hero p { max-width: 580px; margin: 25px 0 0; color: #858c9d; font-size: 12px; line-height: 1.7; }
.calendar-shell { max-width: 820px; margin: 35px auto 0; padding: 26px; border: 1px solid #292d36; border-radius: 9px; background: #090b0f; }
.calendar-toolbar { min-height: 48px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; }
.calendar-toolbar h2 { color: #f2f3f7; font-size: 25px; font-weight: 600; text-align: center; text-transform: none; }
.calendar-toolbar button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #30343e; border-radius: 5px; background: #14171d; color: #d8dbe3; cursor: pointer; }
.calendar-toolbar button:last-child { justify-self: end; }
.calendar-toolbar button:disabled { opacity: .25; cursor: default; }
.calendar-toolbar svg { width: 16px; height: 16px; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 7px; }
.calendar-weekdays { margin: 21px 0 8px; }
.calendar-weekdays span { padding: 12px 0; color: #8b92a2; font: 500 12px/1 "DM Mono"; text-align: center; text-transform: uppercase; }
.calendar-day, .calendar-spacer { min-height: 82px; }
.calendar-day { position: relative; padding: 14px; display: flex; align-items: flex-start; justify-content: flex-start; border: 1px solid #1d2027; border-radius: 5px; background: #0b0d11; color: #3f4552; font: 500 23px/1 "DM Mono"; cursor: default; }
.calendar-day.available { border-color: #343944; background: #15181e; color: #eef0f5; cursor: pointer; }
.calendar-day.available:hover { border-color: #555c6b; background: #1b1f27; }
.calendar-day i { position: absolute; right: 10px; bottom: 10px; width: 5px; height: 5px; border-radius: 50%; background: #e6e8ee; }
.calendar-day.today span::after { content: "Today"; margin-left: 9px; color: #939aaa; font-size: 10px; text-transform: uppercase; }
.calendar-day.selected { border-color: #e1e4eb; box-shadow: inset 0 0 0 1px #e1e4eb; }
.calendar-legend { margin-top: 20px; padding-top: 18px; display: flex; gap: 24px; border-top: 1px solid #252932; color: #72798a; font: 500 8px/1 "DM Mono"; text-transform: uppercase; }
.calendar-legend span { display: flex; align-items: center; gap: 8px; }
.calendar-legend i { width: 7px; height: 7px; border-radius: 50%; }
.current-date-dot { background: #e2e5eb; }

/* Updates */
.updates-page[hidden] { display: none; }
.show-updates > .hero, .show-updates > .list-section, .show-updates > .detail-page, .show-updates > .player-rankings-page, .show-updates > .time-machine-page, .show-updates > .list-editor-page { display: none; }
.updates-page { padding: clamp(55px,7vw,90px) 0 30px; animation: detail-in .25s ease both; }
.updates-hero { padding-bottom: 38px; border-bottom: 1px solid #2b2f39; }
.updates-hero .eyebrow { color: #737a8b; font: 500 9px/1 "DM Mono"; letter-spacing: .15em; text-transform: uppercase; }
.updates-hero h1 { margin-top: 14px; font-size: clamp(48px,6vw,78px); }
.updates-hero p { max-width: 680px; margin-top: 15px; color: #858c9b; font-size: 13px; line-height: 1.6; }
.updates-feed { display: grid; }
.update-card { width: 100%; min-height: 124px; padding: 22px 7px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 18px; border: 0; border-bottom: 1px solid #242832; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .16s ease; }
.update-card:hover, .update-card:focus-visible { background: #0d1015; outline: 0; }
.update-symbol { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #353a45; border-radius: 50%; color: #aeb5c2; }
.update-symbol svg { width: 18px; height: 18px; }
.update-meta { display: flex; gap: 12px; color: #6f7686; font: 500 8px/1 "DM Mono"; text-transform: uppercase; }
.update-card h2 { margin-top: 9px; color: #ebedf2; font-size: 20px; }
.update-card p { margin-top: 7px; color: #9299a8; font-size: 11px; }
.update-card > strong { min-width: 104px; padding: 10px 13px; border: 1px solid #404651; border-radius: 5px; color: #c8cdd7; font: 600 10px/1 "DM Mono"; text-align: center; text-transform: uppercase; }
.update-card.type-added .update-symbol, .update-card.type-restored .update-symbol { border-color: #355344; color: #86bd99; }
.update-card.type-removed .update-symbol { border-color: #593b3e; color: #cd858b; }
.update-card.type-moved_up .update-symbol { border-color: #354b61; color: #83afd8; }
.update-card.type-moved_down .update-symbol { border-color: #574832; color: #d0a56e; }
.updates-empty { min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 10px; color: #6e7585; }
.updates-empty svg { width: 27px; height: 27px; }
.updates-empty strong { color: #c7cbd4; font-size: 13px; }
.updates-empty span { font-size: 10px; }
footer { margin-top: 38px; padding: 26px 0 25px; display: flex; justify-content: space-between; border-top: 1px solid #1d2027; color: #555b68; font: 400 7px/1 "DM Mono"; text-transform: uppercase; letter-spacing: .08em; }
.show-detail footer { margin-top: 24px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 30; max-width: 320px; padding: 17px 20px; display: flex; align-items: center; gap: 14px; border: 1px solid #292d36; background: #13151b; color: white; transform: translateY(150%); opacity: 0; transition: .3s ease; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast strong, .toast span:last-child { display: block; }
.toast strong { margin-bottom: 4px; font-size: 11px; }
.toast span:last-child { color: #a6a69f; font-size: 9px; line-height: 1.4; }
.lock-icon { position: relative; width: 13px; height: 11px; flex: 0 0 auto; display: inline-block; border: 1px solid currentColor; border-radius: 2px; }
.lock-icon::before { content: ""; position: absolute; left: 2px; top: -7px; width: 7px; height: 6px; border: 1px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; }

body.sidebar-collapsed { --sidebar-width: 96px; }
body.sidebar-collapsed .brand-row { min-height: 120px; justify-content: flex-start; }
body.sidebar-collapsed .brand { justify-content: flex-start; }
body.sidebar-collapsed .brand > span:last-child, body.sidebar-collapsed .nav-text { max-width: 0; opacity: 0; }
body.sidebar-collapsed .nav-label { display: block; }
body.sidebar-collapsed .collapse-button { top: 88px; left: auto; right: -22px; transform: none; }
body.sidebar-collapsed .collapse-button svg { transform: rotate(180deg); }
body.sidebar-collapsed .nav-link { padding-right: 0; gap: 0; justify-content: flex-start; overflow: hidden; }
body.sidebar-collapsed .nav-link.active::after { right: 5px; }
body.sidebar-collapsed .subnav { padding-left: 0; display: grid; width: 48px; }
body.sidebar-collapsed .subnav-link { position: relative; width: 44px; height: 27px; margin-left: -22px; padding: 0; overflow: visible; color: transparent; font-size: 0; cursor: pointer; }
body.sidebar-collapsed .subnav-link::before { left: 18.5px; opacity: 1; }
body.sidebar-collapsed .locked-link { justify-content: flex-start; }
body.sidebar-collapsed .locked-link.active::after { right: 5px; }

@media (max-width: 1080px) {
  .level-card { grid-template-columns: 155px minmax(240px,1fr) 215px; gap: 20px; }
  .player-ranking-layout { grid-template-columns: 300px minmax(0,1fr); }
  .editor-workspace { grid-template-columns: 300px minmax(0,1fr); }
  .editor-toolbar { grid-template-columns: repeat(4,auto) 1fr auto auto; }
  .editor-toolbar button:nth-child(5), .editor-toolbar button:nth-child(6) { display: none; }
}

@media (max-width: 900px) {
  .home-hero { min-height: auto; grid-template-columns: 1fr; padding-bottom: 45px; }
  .home-emblem { min-height: 330px; grid-row: 1; }
  .home-emblem img { max-height: 300px; }
  .home-stats { grid-template-columns: repeat(2,1fr); }
  .home-stats article:nth-child(2) { border-right: 0; }
  .home-stats article:first-child { padding-left: 24px; }
  .home-podium, .home-dashboard { grid-template-columns: 1fr; }
  .home-podium { padding-top: 15px; }
  .home-level-card.podium-rank-1, .home-level-card.podium-rank-1:hover { order: 1; transform: none; }
  .home-level-card.podium-rank-2 { order: 2; }
  .home-level-card.podium-rank-3 { order: 3; }
  .podium-crown { top: 12px; left: auto; right: 12px; transform: none; }
  body.sidebar-collapsed { --sidebar-width: 250px; }
  .sidebar, body.sidebar-collapsed .sidebar { width: 250px; padding: 27px 18px 22px; transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .brand-row, body.sidebar-collapsed .brand-row { min-height: 67px; padding: 0 42px 28px 10px; justify-content: flex-start; }
  body.sidebar-collapsed .brand { justify-content: flex-start; }
  body.sidebar-collapsed .brand > span:last-child, body.sidebar-collapsed .nav-text { display: initial; max-width: 190px; opacity: 1; }
  body.sidebar-collapsed .nav-label { width: auto; margin: 20px 12px 8px; display: block; font-size: 9px; letter-spacing: .18em; text-align: left; }
  body.sidebar-collapsed .subnav { width: auto; margin: 3px 0 7px 30px; padding: 3px 0 4px 28px; display: grid; }
  body.sidebar-collapsed .subnav-link { width: auto; height: auto; margin-left: 0; padding: 8px; overflow: visible; color: #73798a; font-size: 11px; }
  body.sidebar-collapsed .subnav-link.selected { color: #f5f6fa; }
  body.sidebar-collapsed .subnav-link.selected::before { left: -31.5px; top: 10px; }
  body.sidebar-collapsed .nav-link { padding: 0 13px; gap: 14px; justify-content: flex-start; }
  body.sidebar-collapsed .nav-link.active::after { right: 12px; }
  body.sidebar-collapsed .locked-link { padding-inline: 12px; justify-content: flex-start; }
  body.sidebar-collapsed .locked-link.active::after { right: 12px; }
  .collapse-button { display: none; }
  .close-menu { display: block; margin-left: auto; }
  .main { margin-left: 0; }
  .topbar { padding: 0 24px; }
  .menu-button { display: block; margin-right: 18px; }
  .mobile-backdrop { position: fixed; inset: 0; z-index: 15; background: rgba(0,0,0,.45); }
  .mobile-backdrop.open { display: block; }
  .content { width: calc(100% - 48px); }
  .player-ranking-layout { grid-template-columns: 1fr; }
  .editor-workspace { grid-template-columns: 1fr; }
  .editor-level-list { max-height: 480px; }
}

@media (max-width: 690px) {
  .home-page { padding-top: 35px; }
  .home-hero h1 { font-size: 54px; }
  .home-emblem { min-height: 245px; }
  .home-emblem img { max-height: 230px; }
  .home-stats article { min-height: 105px; padding: 20px 14px !important; }
  .home-stats strong { font-size: 24px; }
  .home-section { padding-top: 52px; }
  .home-section > header { align-items: flex-start; flex-direction: column; }
  .home-updates-panel, .home-archive-panel { padding: 19px; }
  .hero { display: block; padding-top: 46px; }
  h1 { font-size: 49px; }
  .hero-meta { margin-top: 38px; }
  .section-head { display: grid; gap: 18px; }
  .rankings-hero { display: grid; gap: 25px; }
  .ranked-player-total { justify-items: start; }
  .ranking-tabs { overflow-x: auto; }
  .ranking-tab { min-width: 104px; }
  .ranking-search { width: 100%; }
  .player-profile { padding: 18px; }
  .profile-stats { grid-template-columns: 1fr 1fr; }
  .profile-stats div:last-child { grid-column: 1 / -1; }
  .editor-hero { display: grid; }
  .editor-toolbar { grid-template-columns: repeat(2,1fr); }
  .editor-toolbar > span { display: none; }
  .editor-toolbar button:nth-child(5), .editor-toolbar button:nth-child(6) { display: inline-flex; }
  .editor-list-picker { display: grid; overflow-x: auto; }
  .editor-list-picker > div { min-width: max-content; }
  .editor-form-grid, .record-add-form, .editor-field-pair { grid-template-columns: 1fr; }
  .editor-level-row { grid-template-columns: 34px minmax(0,1fr) auto; }
  .editor-level-row > small { display: none; }
  .player-editor-record { grid-template-columns: 1fr 80px 36px; }
  .player-editor-record input[data-player-record="video"] { grid-column: 1 / -1; grid-row: 2; }
  .history-editor-grid { grid-template-columns: 1fr; }
  .update-card { grid-template-columns: 42px minmax(0,1fr); }
  .update-card > strong { grid-column: 2; justify-self: start; }
  .removed-level-row { grid-template-columns: 1fr; }
  .history-mode-banner, .editor-preview-banner { padding-block: 12px; align-items: flex-start; flex-direction: column; }
  .calendar-shell { padding: 14px; }
  .calendar-weekdays, .calendar-grid { gap: 4px; }
  .calendar-day, .calendar-spacer { min-height: 58px; }
  .calendar-day { padding: 8px; }
  .calendar-day.today span::after { display: none; }
  .controls { width: 100%; }
  .search-field { width: auto; flex: 1; }
  .filter-toggle { min-width: 42px; width: 42px; padding: 0; }
  .filter-toggle > span { display: none; }
  .filter-panel { position: fixed; top: 115px; left: 20px; right: 20px; width: auto; }
  .view-switcher { display: none; }
  .column-labels { display: none; }
  .level-card { min-height: 160px; padding: 18px 0; grid-template-columns: 105px 1fr; gap: 15px; }
  .new-level-badge, .grid-view .new-level-badge { left: 8px; top: 8px; height: 23px; padding-inline: 6px; font-size: 9px; }
  .level-list.grid-view { grid-template-columns: 1fr; gap: 0; border-top: 1px solid #242730; }
  .grid-view .level-card { min-height: 160px; padding: 18px 0; grid-template-columns: 105px 1fr; grid-template-rows: auto auto; gap: 15px; border: 0; border-bottom: 1px solid #20232b; border-radius: 0; background: transparent; }
  .grid-view .thumbnail { grid-column: 1; grid-row: 1; }
  .grid-view .level-main { grid-column: 2; grid-row: 1; padding: 0; }
  .grid-view .rewards { grid-column: 2; grid-row: 2; margin-top: -58px; padding: 0; border-top: 0; }
  .grid-view .future-progress, .future-progress { grid-column: 2; grid-row: 2; margin-top: -58px; padding: 0; border-top: 0; }
  .thumbnail { height: auto; align-self: start; }
  .title-line { gap: 10px; }
  .rank { font-size: 12px; }
  .level-name { font-size: 17px; }
  .credits { margin-top: 10px; padding-left: 31px; gap: 7px; flex-wrap: wrap; }
  .rewards { grid-column: 2; grid-row: 2; margin-top: -58px; gap: 12px; }
  .reward strong { font-size: 13px; }
  .detail-page { padding-top: 35px; }
  .detail-header { margin-top: 40px; grid-template-columns: 1fr; gap: 10px; }
  .detail-rank { padding: 0; font-size: 18px; }
  .detail-header h1 { font-size: 47px; }
  .detail-credits { margin-top: 18px; flex-wrap: wrap; }
  .level-description { margin: 25px 0 30px; }
  .detail-video .play-mark.large { width: 55px; height: 55px; opacity: 1; }
  .metadata-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .song-item { grid-column: span 2; }
  .meta-item { min-height: 70px; }
  .meta-item strong { font-size: 14px; }
  .creator-list { grid-template-columns: 1fr; }
  .creator-list span { width: max-content; }
  .record-row { padding-inline: 8px; grid-template-columns: 30px minmax(100px,1fr) 58px; gap: 8px; }
  .record-percent { width: 58px; }
  footer { display: grid; gap: 9px; }
}

/* Larger desktop interface for high-resolution displays. */
@media (min-width: 1200px) {
  .content { width: min(1320px, calc(100% - 7vw)); }
  .topbar p { font-size: 11px; }

  .hero { padding-bottom: 56px; }
  .hero-meta strong { font-size: 25px; }
  .hero-meta span, .column-labels { font-size: 9px; }
  .list-section { padding-top: 32px; }
  .section-head { margin-bottom: 24px; }
  .section-head h2 { font-size: 14px; }
  .filter-toggle { min-width: 105px; height: 46px; font-size: 9px; }
  .search-field { width: 290px; }
  .search-field input { padding-block: 13px; font-size: 12px; }
  .view-button { width: 40px; height: 38px; }
  .filter-panel { width: 370px; padding: 18px; }
  .filter-panel header strong { font-size: 13px; }
  .filter-fields label > span, .filter-panel header button { font-size: 9px; }
  .filter-fields select { padding: 12px; font-size: 12px; }

  .column-labels { grid-template-columns: 1fr 290px; padding: 0 24px 10px; }
  .level-card { min-height: 158px; padding: 20px 24px; grid-template-columns: 230px minmax(330px,1fr) 290px; gap: 35px; }
  .new-level-badge { height: 26px; padding-inline: 8px; font-size: 11px; }
  .rank { font-size: 20px; }
  .level-name { font-size: 25px; }
  .credits { margin-top: 16px; padding-left: 53px; font-size: 12px; }
  .reward span, .progress-copy span { font-size: 10px; }
  .reward strong { font-size: 21px; }
  .progress-copy strong { font-size: 20px; }
  .play-mark { width: 50px; height: 50px; }
  .grid-view .level-card { min-height: 270px; padding: 20px; gap: 21px; }
  .grid-view .level-name { font-size: 23px; }
  .grid-view .rewards { padding-top: 20px; }

  .home-hero-copy .eyebrow, .home-section .eyebrow, .home-dashboard .eyebrow { font-size: 10px; }
  .home-hero-copy > p { font-size: 16px; }
  .home-actions button, .home-section > header button, .home-dashboard header button, .home-archive-panel > button { min-height: 49px; padding-inline: 19px; font-size: 10px; }
  .home-stats article { min-height: 142px; }
  .home-stats strong { font-size: 34px; }
  .home-stats span { font-size: 9px; }
  .home-section h2, .home-dashboard h2 { font-size: 33px; }
  .home-level-copy { min-height: 128px; padding: 20px 50px 20px 19px; }
  .home-level-copy small { font-size: 8px; }
  .home-level-copy strong { font-size: 21px; }
  .home-level-copy > span { font-size: 11px; }
  .home-updates-panel, .home-archive-panel { min-height: 405px; padding: 29px; }
  .home-update-row { min-height: 74px; grid-template-columns: 39px minmax(0,1fr) 20px; }
  .home-update-row > span { width: 34px; height: 34px; }
  .home-update-row strong { font-size: 13px; }
  .home-update-row small { font-size: 8px; }
  .home-update-row .home-source-badge { padding: 5px 7px; font-size: 8px; }
  .home-archive-panel p { font-size: 13px; }

  .rankings-hero .eyebrow { font-size: 10px; }
  .ranked-player-total strong { font-size: 29px; }
  .ranked-player-total small { font-size: 9px; }
  .ranking-tab { min-width: 128px; padding: 13px 20px; font-size: 11px; }
  .ranking-search { width: 370px; }
  .ranking-search input { padding-block: 14px; font-size: 13px; }
  .player-ranking-layout { grid-template-columns: minmax(370px,.78fr) minmax(0,1.45fr); gap: 22px; }
  .ranking-board-head { min-height: 48px; padding-inline: 20px; font-size: 9px; }
  .ranking-player { min-height: 64px; padding-inline: 20px; grid-template-columns: 48px 33px minmax(0,1fr) auto; gap: 12px; }
  .ranking-position { font-size: 12px; }
  .ranking-flag { font-size: 21px; }
  .ranking-name { font-size: 15px; }
  .ranking-player strong { font-size: 13px; }
  .player-profile { padding: 30px; }
  .profile-head h2 { font-size: 29px; }
  .profile-head p { font-size: 13px; }
  .profile-stats span, .profile-head > div > span { font-size: 9px; }
  .profile-stats strong { font-size: 18px; }
  .profile-stats .hardest-stat strong { font-size: 20px; }
  .profile-category summary { min-height: 66px; padding-inline: 20px; font-size: 14px; }
  .profile-category-level { min-height: 48px; padding-inline: 15px; }
  .profile-category-level button { font-size: 14px; }
  .profile-cell-title > span, .profile-category summary strong { font-size: 12px; }
  .profile-record { min-height: 66px; }
  .profile-record button, .profile-record strong { font-size: 14px; }

  .update-card { min-height: 142px; padding: 25px 9px; grid-template-columns: 54px minmax(0,1fr) auto; gap: 21px; }
  .update-symbol { width: 42px; height: 42px; }
  .update-card h2 { font-size: 23px; }
  .update-card p { font-size: 13px; }
  .update-meta { font-size: 9px; }
  .update-card > strong { min-width: 120px; padding: 12px 15px; font-size: 11px; }

  .editor-hero .eyebrow { font-size: 10px; }
  .editor-hero p { font-size: 13px; }
  .draft-status { padding: 10px 12px; font-size: 9px; }
  .editor-toolbar { margin-block: 24px; gap: 9px; }
  .editor-toolbar button, .editor-panel-head button, .editor-form-head button, .record-add-form button, .editor-transfer-actions button { min-height: 46px; padding-inline: 16px; font-size: 10px; }
  .editor-list-picker { margin-bottom: 22px; padding: 7px; }
  .editor-list-picker button { min-height: 46px; padding-inline: 18px; font-size: 11px; }
  .editor-workspace { grid-template-columns: minmax(380px,.76fr) minmax(0,1.35fr); gap: 18px; }
  .editor-panel-head { min-height: 84px; padding-inline: 19px; }
  .editor-panel-head span { font-size: 16px; }
  .editor-panel-head small { font-size: 10px; }
  .editor-level-row { min-height: 78px; padding-inline: 16px; grid-template-columns: 46px minmax(0,1fr) minmax(70px,.6fr) auto; gap: 11px; }
  .editor-level-row > span { font-size: 12px; }
  .editor-level-row > strong { font-size: 15px; }
  .editor-level-row > small { font-size: 9px; }
  .editor-level-row button, .editor-record-actions button { width: 31px; height: 31px; }
  .editor-form-panel { padding: 26px; }
  .editor-form-head > div > span { font-size: 9px; }
  .editor-form-head h2 { font-size: 32px; }
  .editor-form-grid { margin-top: 22px; gap: 15px; }
  .editor-field > span { font-size: 10px; }
  .editor-field input, .editor-field textarea, .editor-field select, .record-add-form input { padding: 14px 15px; font-size: 14px; }
  .editor-subsection > header span, .editor-collapsible > summary > span { font-size: 13px; }
  .editor-record-row { min-height: 64px; }
  .editor-record-row strong { font-size: 12px; }
  .editor-record-row span { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.editor-account { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.editor-account > span:first-child { color:#aeb6c9; font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
#editorSignOut { border:1px solid #303644; border-radius:9px; background:#151820; color:#d7dbe5; padding:9px 12px; cursor:pointer; }
.auth-dialog { width:min(430px,calc(100vw - 32px)); border:1px solid #303644; border-radius:18px; padding:0; background:#0e1016; color:#f4f5f8; box-shadow:0 28px 90px rgba(0,0,0,.65); }
.auth-dialog::backdrop { background:rgba(2,3,7,.78); backdrop-filter:blur(8px); }
.auth-card { position:relative; display:grid; gap:16px; padding:34px; }
.auth-card h2 { margin:0; font-size:29px; }
.auth-card > p { margin:0; color:#929bad; font-size:13px; }
.auth-card label { display:grid; gap:7px; color:#8791a7; font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.12em; }
.auth-card input { border:1px solid #2b303b; border-radius:10px; background:#11141b; color:#fff; padding:14px 15px; font:500 14px Manrope,sans-serif; outline:none; }
.auth-card input:focus { border-color:#7d879e; }
.auth-submit,.auth-reset { min-height:45px; border-radius:10px; cursor:pointer; }
.auth-submit { border:1px solid #e9ebf1; background:#e9ebf1; color:#090a0e; font-weight:700; }
.auth-reset { border:0; background:transparent; color:#9da7bb; }
.auth-local-recovery { display:grid; gap:8px; margin-top:2px; padding-top:15px; border-top:1px solid #242934; text-align:center; }
.auth-local-recovery span { color:#747f94; font:500 9px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.auth-local-recovery button { min-height:42px; border:1px solid #303744; border-radius:10px; background:#151922; color:#d7dce7; font-weight:650; cursor:pointer; }
.auth-local-recovery button:hover { border-color:#525d72; background:#191e28; }
.auth-close { position:absolute; right:18px; top:18px; width:36px; height:36px; border:1px solid #2b303b; border-radius:9px; background:#151820; color:#b8c0d0; cursor:pointer; }
.auth-error { color:#ff9e9e !important; }