@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500&display=swap');

:root {
    --bg: #0b0e13;
    --surface: rgba(16, 20, 28, .74);
    --surface-2: #10141c;
    --line: rgba(212, 175, 55, .22);
    --line-faint: rgba(212, 175, 55, .08);
    --text: #e6dfd3;
    --muted: #8c98a8;
    --ice: #88a0c0;
    --violet: #c5a059;
    --mint: #91b4a5;
    --amber: #c5a059;
    --font-title: 'Cinzel', serif;
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Inter', sans-serif;
}

* { box-sizing: border-box; }
body {
    min-height: 100vh;
    color: var(--text);
    background-color: var(--bg);
    background-image: radial-gradient(ellipse at 50% -10%, rgba(136,160,192,.1), transparent 70%), radial-gradient(circle at 80% 90%, rgba(197,160,89,.04), transparent 50%);
    background-attachment: fixed;
    font-family: var(--font-sans);
    font-weight: 300;
    position: relative;
    overflow-x: hidden;
}
a { color: inherit; }
.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(90px); opacity: .13; }
.ambient-one { width: 28rem; height: 28rem; right: -12rem; top: 18%; background: var(--violet); }
.ambient-two { width: 22rem; height: 22rem; left: -12rem; bottom: 5%; background: var(--ice); }

.frost-nav { background: rgba(8, 13, 24, .82); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.navbar-brand .brand-mark { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; color: var(--ice); background: linear-gradient(145deg, rgba(143,220,255,.18), rgba(155,140,255,.1)); border: 1px solid rgba(143,220,255,.28); border-radius: .8rem; }
.navbar-brand strong { display: block; font-size: .96rem; letter-spacing: .18em; }
.navbar-brand small { display: block; color: var(--muted); font-size: .58rem; letter-spacing: .36em; }
.navbar .nav-link { color: var(--muted); border-radius: .65rem; padding: .6rem .85rem !important; font-size: .9rem; font-weight: 600; }
.navbar .nav-link i { margin-right: .38rem; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--text); background: rgba(143,220,255,.08); }

.section-kicker { color: var(--ice); font-size: .68rem; font-weight: 800; letter-spacing: .18em; }
.presence { display: inline-block; width: .46rem; height: .46rem; margin-right: .3rem; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 .25rem rgba(105,221,189,.1); }

.metric-card, .panel, .training-card, .member-card, .callout { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1rem 3rem rgba(0,0,0,.12); backdrop-filter: blur(12px); }
.metric-card { display: flex; min-height: 7.2rem; align-items: center; gap: 1rem; padding: 1.2rem; border-radius: 1rem; }
.metric-card > i { display: grid; flex: 0 0 2.75rem; height: 2.75rem; place-items: center; border-radius: .8rem; font-size: 1.15rem; background: rgba(255,255,255,.05); }
.metric-card strong { display: block; font-size: 1.65rem; line-height: 1; }
.metric-card span { display: block; margin-top: .4rem; color: var(--muted); font-size: .76rem; }
.tone-ice > i { color: var(--ice); }.tone-violet > i { color: var(--violet); }.tone-mint > i { color: var(--mint); }.tone-amber > i { color: var(--amber); }

.panel { overflow: hidden; border-radius: 1.15rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 1.35rem 1.4rem 1rem; }
.panel-head h2 { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 750; }
.soft-link { color: var(--muted); text-decoration: none; font-size: .8rem; }
.soft-link:hover { color: var(--ice); }
.score-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.4rem; border-top: 1px solid var(--line); }
.rank { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid rgba(143,220,255,.22); border-radius: .75rem; color: var(--ice); background: rgba(143,220,255,.07); font-size: .78rem; font-weight: 900; }
.rank-s, .rank-ss, .rank-x, .rank-xh, .rank-sh { color: var(--amber); border-color: rgba(240,200,117,.25); background: rgba(240,200,117,.08); }
.rank-sm { display: inline-grid; width: 2rem; height: 2rem; border-radius: .55rem; }
.score-main { min-width: 0; }
.score-main strong, .score-main span, .score-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-main span, .score-main small { color: var(--muted); }
.score-main span { margin-top: .12rem; font-size: .8rem; }
.score-main small { margin-top: .3rem; font-size: .68rem; }
.score-stats { text-align: right; }
.score-stats strong { display: block; font-size: 1.05rem; }
.score-stats strong small, .score-stats span { color: var(--muted); font-size: .7rem; }
.score-stats .bi-star-fill, .score-table .bi-star-fill, .training-map .bi-star-fill { margin-left: .15rem; color: var(--amber); font-size: .62rem; }

.leader-list { padding: 0 .65rem; }
.leader-row { display: grid; grid-template-columns: 2rem 1fr auto; gap: .65rem; align-items: center; padding: .85rem .75rem; border-top: 1px solid var(--line); }
.leader-place { color: var(--muted); font-weight: 800; text-align: center; }
.leader-row div strong, .leader-row div small { display: block; }
.leader-row div small, .leader-row > span:last-child small { color: var(--muted); font-size: .68rem; }
.leader-row > span:last-child { color: var(--ice); font-weight: 700; }
.panel-note { margin: 1rem 1.4rem 1.3rem; color: var(--muted); font-size: .68rem; line-height: 1.5; }

.search-bar { display: flex; gap: .75rem; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.search-bar > i { color: var(--muted); }
.search-bar .form-control { color: var(--text); background: transparent; border: 0; box-shadow: none; }
.search-bar .form-control::placeholder { color: #65728a; }
.btn-ghost { color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.score-table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--line); font-size: .82rem; }
.score-table th { padding: .8rem 1rem; color: var(--muted); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.score-table td { padding: .9rem 1rem; }
.score-table td strong, .score-table td small { display: block; }
.score-table td small { margin-top: .18rem; color: var(--muted); font-size: .68rem; }
.mod-badge, .status { display: inline-flex; padding: .3rem .5rem; color: var(--ice); background: rgba(143,220,255,.08); border: 1px solid rgba(143,220,255,.14); border-radius: .45rem; font-size: .65rem; font-weight: 800; }
.empty-state { padding: 3rem !important; color: var(--muted) !important; text-align: center; }

.callout { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 1rem; }
.callout > i { color: var(--ice); font-size: 1.4rem; }
.callout strong, .callout span { display: block; }
.callout span { margin-top: .2rem; color: var(--muted); font-size: .78rem; }
.training-card { display: flex; flex-direction: column; padding: 1.15rem; border-radius: 1rem; }
.plan-id { color: var(--muted); font-size: .66rem; }
.status-completed { color: var(--mint); border-color: rgba(105,221,189,.18); background: rgba(105,221,189,.08); }
.status-replaced, .status-skipped { color: var(--muted); }
.training-map { padding: 1.4rem 0 1.1rem; border-bottom: 1px solid var(--line); }
.training-map > span { color: var(--violet); font-size: .7rem; font-weight: 750; }
.training-map h2 { margin: .25rem 0; font-size: 1.15rem; }
.training-map p { margin: 0; color: var(--muted); font-size: .74rem; }
.training-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1rem 0 0; }
.training-meta dt { color: var(--muted); font-size: .63rem; font-weight: 600; }
.training-meta dd { margin: .2rem 0 0; font-size: .76rem; overflow-wrap: anywhere; }

.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem; }
.member-card { position: relative; display: flex; align-items: center; gap: .85rem; padding: .9rem; border-radius: 1rem; transition: transform .18s ease, border-color .18s ease; }
.member-card:hover { transform: translateY(-2px); border-color: rgba(143,220,255,.28); }
.avatar-wrap { position: relative; flex: 0 0 3rem; }
.avatar-wrap img { width: 3rem; height: 3rem; object-fit: cover; border-radius: .8rem; }
.avatar-wrap .presence { position: absolute; right: -.1rem; bottom: -.1rem; width: .62rem; height: .62rem; margin: 0; background: #49576c; border: 2px solid var(--surface-2); box-shadow: none; }
.avatar-wrap .presence.online { background: var(--mint); }
.member-body { min-width: 0; flex: 1; }
.member-body h2 { overflow: hidden; margin: 0; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.member-body p, .member-body small { display: block; margin: .25rem 0 0; color: var(--muted); font-size: .68rem; }
.member-body p i { color: var(--violet); }
.country { color: var(--muted); font-size: .65rem; }
.member-card > a { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: .6rem; text-decoration: none; }
.member-card > a:hover { color: var(--ice); }
.player-link { color: inherit; text-decoration: none; }
.player-link:hover { color: var(--ice); }

.profile-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.35rem; background: linear-gradient(120deg, rgba(143,220,255,.09), rgba(155,140,255,.06)), var(--surface); border: 1px solid var(--line); border-radius: 1.15rem; }
.profile-identity { display: flex; align-items: center; gap: 1.15rem; min-width: 0; }
.profile-avatar { position: relative; flex: 0 0 5rem; }
.profile-avatar img { width: 5rem; height: 5rem; object-fit: cover; border: 1px solid rgba(143,220,255,.28); border-radius: 1.15rem; }
.profile-avatar .presence { position: absolute; right: -.15rem; bottom: -.1rem; width: .8rem; height: .8rem; border: 3px solid #121b2e; }
.profile-identity h2 { margin: .2rem 0; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; letter-spacing: -.035em; }
.profile-identity p { margin: 0; color: var(--muted); font-size: .76rem; }
.profile-badges { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; }
.profile-badges span { padding: .3rem .5rem; color: var(--mint); background: rgba(105,221,189,.07); border: 1px solid rgba(105,221,189,.14); border-radius: .45rem; font-size: .65rem; }
.osu-button { flex: none; color: var(--bg); background: var(--ice); border: 0; font-size: .78rem; font-weight: 800; }
.osu-button:hover { color: var(--bg); background: #b7e9ff; }
.profile-metric { height: 100%; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: .9rem; }
.profile-metric strong, .profile-metric span { display: block; }
.profile-metric strong { color: var(--ice); font-size: 1.05rem; }
.profile-metric span { margin-top: .3rem; color: var(--muted); font-size: .65rem; line-height: 1.3; }

.skill-list { padding: 0 .65rem; }
.skill-row { padding: .85rem .75rem; border-top: 1px solid var(--line); }
.skill-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.skill-head strong, .skill-head small { display: block; }
.skill-head small, .confidence { color: var(--muted); font-size: .63rem; }
.skill-head > span { color: var(--ice); font-size: .9rem; font-weight: 800; }
.skill-head > span small { display: inline; margin-left: .1rem; }
.skill-track { height: .35rem; margin: .65rem 0 .38rem; overflow: hidden; background: rgba(143,220,255,.08); border-radius: 99px; }
.skill-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--ice)); border-radius: inherit; }
.confidence { display: block; }

.weakness-list { padding: 0 .65rem; }
.weakness-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .85rem .75rem; border-top: 1px solid var(--line); }
.weakness-rank { color: var(--violet); font-size: .72rem; font-weight: 900; text-align: center; }
.weakness-row strong, .weakness-row small { display: block; }
.weakness-row strong { font-size: .8rem; }
.weakness-row small { margin-top: .15rem; color: var(--muted); font-size: .62rem; }
.priority { padding: .25rem .42rem; border-radius: .4rem; color: var(--muted); background: rgba(255,255,255,.04); font-size: .58rem; font-weight: 800; }
.priority-high { color: #ff9b9b; background: rgba(255,110,110,.08); }
.priority-medium { color: var(--amber); background: rgba(240,200,117,.08); }
.priority-low { color: var(--mint); background: rgba(105,221,189,.08); }
.profile-training-list { padding: 0 .65rem .5rem; }
.profile-training-list article { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; padding: .85rem .75rem; border-top: 1px solid var(--line); }
.profile-training-list strong, .profile-training-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-training-list strong { font-size: .78rem; }
.profile-training-list small { margin-top: .18rem; color: var(--muted); font-size: .62rem; }

.detail-link { color: inherit; text-decoration: none; }
.detail-link:hover { color: var(--ice); }
.detail-hero { position: relative; min-height: 15rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1.15rem; background: var(--surface-2); }
.detail-cover, .detail-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.detail-cover { object-fit: cover; }
.detail-shade { background: linear-gradient(90deg, rgba(8,13,24,.96) 0%, rgba(8,13,24,.78) 48%, rgba(8,13,24,.28) 100%), linear-gradient(0deg, rgba(8,13,24,.72), transparent); }
.detail-content { position: relative; z-index: 1; display: flex; min-height: 15rem; align-items: center; gap: 1.2rem; padding: 2rem; }
.rank-large { flex: 0 0 4.5rem; width: 4.5rem; height: 4.5rem; border-radius: 1.1rem; font-size: 1.3rem; }
.detail-title { min-width: 0; flex: 1; }
.detail-title > span { color: var(--ice); font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.detail-title h2 { margin: .25rem 0; font-size: clamp(1.65rem, 4vw, 2.65rem); font-weight: 850; letter-spacing: -.045em; }
.detail-title p { margin: 0; color: #b6c3d8; font-size: .78rem; }
.map-difficulties { display: flex; max-width: min(47rem,65vw); gap: .4rem; margin-top: .9rem; padding: .18rem 0 .4rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(197,160,89,.4) transparent; }
.map-difficulty { --difficulty-color: #8aa4c7; display: inline-grid; grid-template-columns: auto minmax(0,auto) auto; flex: 0 0 auto; align-items: center; gap: .4rem; min-height: 2rem; padding: .35rem .55rem; color: #b7c1d1; text-decoration: none; background: rgba(8,12,18,.72); border: 1px solid rgba(136,160,192,.2); border-radius: 2px; transition: color .16s ease,border-color .16s ease,background-color .16s ease,transform .16s ease; }
.map-difficulty > i { color: var(--difficulty-color); font-size: .48rem; filter: drop-shadow(0 0 5px var(--difficulty-color)); }
.map-difficulty span { max-width: 12rem; overflow: hidden; font-size: .63rem; font-weight: 650; letter-spacing: .015em; text-overflow: ellipsis; white-space: nowrap; }
.map-difficulty small { display: inline-flex; align-items: center; gap: .15rem; color: #78869b; font-size: .55rem; white-space: nowrap; }
.map-difficulty small i { color: var(--difficulty-color); font-size: .48rem; }
.map-difficulty:hover,.map-difficulty:focus-visible { color: var(--text); background: rgba(20,27,38,.88); border-color: color-mix(in srgb,var(--difficulty-color) 58%,transparent); transform: translateY(-1px); }
.map-difficulty.active { color: #f2eee4; background: color-mix(in srgb,var(--difficulty-color) 12%,rgba(8,12,18,.9)); border-color: var(--difficulty-color); box-shadow: inset 0 -2px 0 var(--difficulty-color),0 0 14px color-mix(in srgb,var(--difficulty-color) 18%,transparent); }
.difficulty-easy { --difficulty-color: #88c957; }.difficulty-normal { --difficulty-color: #57b7db; }.difficulty-hard { --difficulty-color: #d4b24d; }.difficulty-insane { --difficulty-color: #d968a5; }.difficulty-expert { --difficulty-color: #d85b55; }.difficulty-expert-plus { --difficulty-color: #9b77d4; }
.score-open-link { display: inline-grid; width: 2rem; height: 2rem; place-items: center; color: var(--ice); text-decoration: none; background: rgba(136,160,192,.07); border: 1px solid rgba(136,160,192,.22); border-radius: 2px; transition: color .16s ease,background-color .16s ease,border-color .16s ease,transform .16s ease; }
.score-open-link:hover,.score-open-link:focus-visible { color: var(--amber); background: rgba(197,160,89,.09); border-color: rgba(197,160,89,.55); transform: translateY(-1px); }
.score-history-panel { position: relative; overflow: hidden; }
.score-history-panel::before { position: absolute; top: -5rem; right: 8%; width: 18rem; height: 10rem; content: ''; pointer-events: none; background: radial-gradient(ellipse,rgba(136,160,192,.1),transparent 68%); filter: blur(12px); }
.score-history-table { position: relative; }
.score-history-row { cursor: pointer; outline: none; }
.score-history-row td { position: relative; background: transparent; border-color: rgba(136,160,192,.1); transition: color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease; }
.score-history-row td:first-child::before { position: absolute; inset: 0 auto 0 0; width: 2px; content: ''; background: linear-gradient(180deg,transparent,var(--ice),var(--amber),transparent); opacity: 0; transform: scaleY(.35); transition: opacity .2s ease,transform .2s ease; }
.score-history-row:hover td,.score-history-row:focus-visible td { color: #f0eee8; background: linear-gradient(90deg,rgba(136,160,192,.1),rgba(197,160,89,.035)); border-color: rgba(136,160,192,.25); box-shadow: inset 0 1px rgba(255,255,255,.018),inset 0 -1px rgba(136,160,192,.08); }
.score-history-row:hover td:first-child::before,.score-history-row:focus-visible td:first-child::before,.score-history-row.selected td:first-child::before { opacity: 1; transform: scaleY(1); }
.score-history-row.selected td { background: linear-gradient(90deg,rgba(197,160,89,.105),rgba(136,160,192,.045)); border-color: rgba(197,160,89,.28); }
.score-history-row.selected td:first-child { box-shadow: inset 3px 0 rgba(197,160,89,.72); }
.score-history-date { display: grid; gap: .28rem; min-width: 9.5rem; }
.score-history-date strong { color: var(--text); font-family: var(--font-serif); font-weight: 500; }
.selected-score-marker { display: inline-flex; width: max-content; align-items: center; gap: .25rem; color: var(--amber); font-size: .52rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.selected-score-marker i { filter: drop-shadow(0 0 6px rgba(197,160,89,.7)); }
.score-history-open { display: inline-grid; width: 1.85rem; height: 1.85rem; place-items: center; color: #718098; text-decoration: none; border: 1px solid rgba(136,160,192,.18); border-radius: 50%; transition: color .2s ease,border-color .2s ease,background-color .2s ease,transform .2s ease; }
.score-history-row:hover .score-history-open,.score-history-row:focus-visible .score-history-open { color: var(--amber); background: rgba(197,160,89,.08); border-color: rgba(197,160,89,.5); transform: translateX(2px); }
.map-requirement-card { position: relative; overflow: hidden; background-image: radial-gradient(circle at 88% 8%,rgba(197,160,89,.11),transparent 26%),linear-gradient(145deg,rgba(136,160,192,.045),transparent 58%); }
.map-requirement-card::after { position: absolute; right: -2.5rem; bottom: -3rem; width: 9rem; height: 9rem; content: ''; pointer-events: none; border: 1px solid rgba(197,160,89,.08); transform: rotate(45deg); }
.requirement-sigil { position: absolute; top: 1.1rem; right: 1.1rem; display: grid; width: 2.2rem; height: 2.2rem; place-items: center; color: var(--amber); border: 1px solid rgba(197,160,89,.24); transform: rotate(45deg); }
.requirement-sigil i { filter: drop-shadow(0 0 7px rgba(197,160,89,.55)); transform: rotate(-45deg); }
.map-requirement-card .panel-head { padding-right: 3.8rem; }
.requirement-state { display: inline-flex; align-items: center; gap: .25rem; color: #8eb7a2; font-size: .53rem; letter-spacing: .04em; text-transform: uppercase; }
.requirement-intro { margin: -.35rem 1.1rem .85rem; color: var(--muted); font-family: var(--font-serif); font-size: .72rem; font-style: italic; line-height: 1.45; }
.requirement-basics { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 1.1rem 1rem; border: 1px solid rgba(197,160,89,.16); }
.requirement-basics div { display: grid; gap: .15rem; padding: .55rem .35rem; text-align: center; background: rgba(8,12,18,.38); border-right: 1px solid rgba(197,160,89,.12); }
.requirement-basics div:last-child { border-right: 0; }.requirement-basics span { color: #7f8ba0; font-size: .5rem; letter-spacing: .07em; text-transform: uppercase; }.requirement-basics strong { color: #ddd7c9; font-family: var(--font-serif); font-size: .9rem; font-weight: 500; }
.requirement-list { display: grid; gap: .65rem; padding: 0 1.1rem 1.1rem; }
.requirement-list article { display: grid; gap: .28rem; }.requirement-list article > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }.requirement-list span { color: #b8c1d0; font-size: .58rem; }.requirement-list strong { color: var(--amber); font-family: var(--font-serif); font-size: .72rem; font-weight: 500; }
.requirement-track { height: 3px; overflow: hidden; background: rgba(136,160,192,.1); }.requirement-track i { display: block; height: 100%; background: linear-gradient(90deg,#6f849f,var(--ice),var(--amber)); box-shadow: 0 0 8px rgba(136,160,192,.45); }
.requirement-list small { color: #59677b; font-size: .48rem; }
.requirement-missing { display: flex; align-items: flex-start; gap: .65rem; margin: 0 1.1rem 1.1rem; padding: .8rem; background: rgba(8,12,18,.38); border: 1px solid rgba(136,160,192,.12); }
.requirement-missing > i { color: var(--ice); filter: drop-shadow(0 0 6px rgba(136,160,192,.55)); }.requirement-missing div { display: grid; gap: .25rem; }.requirement-missing strong { color: #d5d9df; font-family: var(--font-serif); font-size: .74rem; font-weight: 500; }.requirement-missing span { color: var(--muted); font-size: .54rem; line-height: 1.5; }
.detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
.btn-frost { color: var(--bg); background: var(--ice); border: 0; font-size: .76rem; font-weight: 800; }
.btn-frost:hover { color: var(--bg); background: #b7e9ff; }
.map-star { display: grid; flex: 0 0 4.5rem; height: 4.5rem; place-items: center; color: var(--amber); background: rgba(8,13,24,.72); border: 1px solid rgba(240,200,117,.25); border-radius: 1.1rem; }
.map-star strong { align-self: end; font-size: 1.15rem; }
.map-star i { align-self: start; font-size: .72rem; }

.hit-stack { padding: 0 1.35rem 1.2rem; }
.hit-row { display: grid; grid-template-columns: 2.7rem minmax(0,1fr) 3.5rem; align-items: center; gap: .75rem; margin-top: .75rem; }
.hit-row > span { color: var(--muted); font-size: .72rem; }
.hit-row > strong { font-size: .72rem; text-align: right; }
.hit-track { height: .48rem; overflow: hidden; background: rgba(255,255,255,.04); border-radius: 99px; }
.hit-track span { display: block; height: 100%; min-width: .2rem; border-radius: inherit; }
.hit-300 { background: var(--ice); }.hit-100 { background: var(--mint); }.hit-50 { background: var(--amber); }.hit-miss { background: #ff7c8a; }
.detail-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }
.detail-grid > div { padding: 1rem 1.15rem; border-right: 1px solid var(--line); }
.detail-grid > div:last-child { border-right: 0; }
.detail-grid span, .detail-grid strong { display: block; }
.detail-grid span { color: var(--muted); font-size: .62rem; }
.detail-grid strong { margin-top: .25rem; font-size: .82rem; }
.detail-grid.compact { grid-template-columns: repeat(2,1fr); }
.detail-grid.compact > div { border-bottom: 1px solid var(--line); }
.timing-primary { padding: 1rem 1.35rem 1.25rem; }
.timing-primary span, .timing-primary strong { display: block; }
.timing-primary span { color: var(--muted); font-size: .65rem; }
.timing-primary strong { margin-top: .1rem; color: var(--ice); font-size: 2.2rem; letter-spacing: -.04em; }
.status-analyzed { color: var(--mint); border-color: rgba(105,221,189,.18); background: rgba(105,221,189,.08); }

.repeat-list { padding: 0 .65rem; }
.repeat-list article { display: grid; grid-template-columns: 1.6rem minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .8rem .75rem; border-top: 1px solid var(--line); }
.repeat-list article > span { color: var(--violet); font-size: .68rem; font-weight: 800; text-align: center; }
.repeat-list article div strong, .repeat-list article div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repeat-list article div strong { font-size: .76rem; }
.repeat-list article div small { margin-top: .15rem; color: var(--muted); font-size: .6rem; }
.repeat-list article > strong { color: var(--ice); font-size: .78rem; }
.map-params { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 1rem; border-top: 1px solid var(--line); }
.map-params div { padding: .85rem .5rem; text-align: center; border-right: 1px solid var(--line); }
.map-params div:last-child { border-right: 0; }
.map-params span, .map-params strong { display: block; }
.map-params span { color: var(--muted); font-size: .58rem; }
.map-params strong { margin-top: .15rem; font-size: .8rem; }


.achievement-list { padding: 0 .65rem .5rem; }
.achievement-list article { display: grid; grid-template-columns: 2.7rem minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: .85rem .75rem; border-top: 1px solid var(--line); }
.achievement-icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; background: rgba(143,220,255,.06); border: 1px solid var(--line); border-radius: .75rem; font-size: 1rem; }
.achievement-list strong, .achievement-list p, .achievement-list small { display: block; margin: 0; }
.achievement-list strong { font-size: .8rem; }
.achievement-list p { overflow: hidden; margin-top: .12rem; color: var(--muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.achievement-list small { margin-top: .22rem; color: var(--muted); font-size: .6rem; }
.rarity-label { padding: .25rem .4rem; border-radius: .4rem; background: rgba(255,255,255,.04); font-size: .56rem; font-weight: 800; }
.rarity-text-common { color: var(--muted); }.rarity-text-uncommon { color: var(--mint); }.rarity-text-rare { color: var(--ice); }.rarity-text-epic { color: var(--violet); }.rarity-text-legendary { color: var(--amber); }.rarity-text-mythic { color: #ff9fcf; }
.rarity-uncommon { border-color: rgba(105,221,189,.22); }.rarity-rare { border-color: rgba(143,220,255,.25); }.rarity-epic { border-color: rgba(155,140,255,.28); }.rarity-legendary { border-color: rgba(240,200,117,.3); }.rarity-mythic { border-color: rgba(255,159,207,.32); }

.highlight-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; padding: 0 1rem 1rem; }
.highlight-list article { min-width: 0; padding: .85rem; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: .75rem; }
.highlight-type { color: var(--violet); font-size: .56rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.highlight-list h3 { overflow: hidden; margin: .3rem 0 .12rem; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.highlight-list p { overflow: hidden; margin: 0; color: var(--muted); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.highlight-list article > div { display: flex; justify-content: space-between; gap: .5rem; margin-top: .6rem; color: var(--muted); font-size: .58rem; }
.table-note { color: var(--muted); font-size: .62rem; }
.community-rank { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; color: var(--muted); border-radius: .5rem; font-size: .68rem; font-weight: 850; }
.community-rank.top { color: var(--amber); background: rgba(240,200,117,.08); border: 1px solid rgba(240,200,117,.15); }
.delta { color: var(--muted); font-size: .62rem; }
.delta.positive { color: var(--mint); }

.decision-list { padding: 0 .65rem .5rem; }
.decision-list article { display: grid; grid-template-columns: 2.3rem minmax(0,1fr) auto; align-items: center; gap: .75rem; padding: .85rem .75rem; border-top: 1px solid var(--line); }
.decision-direction { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; color: var(--violet); background: rgba(155,140,255,.07); border-radius: .65rem; }
.decision-list strong, .decision-list p, .decision-list small { display: block; margin: 0; }
.decision-list strong { font-size: .77rem; }
.decision-list p { margin-top: .14rem; color: var(--muted); font-size: .61rem; }
.decision-list small { margin-top: .22rem; color: #78879e; font-size: .57rem; }
.decision-result { text-align: right; }
.decision-result span, .decision-result a { display: block; font-size: .59rem; }
.decision-result span { color: var(--mint); }
.decision-result a { margin-top: .3rem; color: var(--ice); text-decoration: none; }
.event-list { padding: 0 .8rem .8rem; }
.event-list article { display: grid; grid-template-columns: .7rem minmax(0,1fr); gap: .65rem; padding: .8rem .4rem; border-top: 1px solid var(--line); }
.event-list article > span { width: .5rem; height: .5rem; margin-top: .2rem; background: var(--ice); border-radius: 50%; box-shadow: 0 0 0 .25rem rgba(143,220,255,.07); }
.event-list strong, .event-list p, .event-list small { display: block; margin: 0; }
.event-list strong { font-size: .73rem; }
.event-list p { margin-top: .15rem; color: var(--muted); font-size: .61rem; }
.event-list small { margin-top: .25rem; color: #6f7e94; font-size: .57rem; }

.filter-panel { padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; }
.filter-panel .form-label { color: var(--muted); font-size: .62rem; font-weight: 700; }
.filter-panel .form-control, .filter-panel .form-select, .filter-panel .input-group-text { min-height: 2.7rem; color: var(--text); background: rgba(255,255,255,.035); border-color: var(--line); font-size: .72rem; }
.filter-panel .form-control:focus, .filter-panel .form-select:focus { border-color: rgba(143,220,255,.45); box-shadow: 0 0 0 .2rem rgba(143,220,255,.08); }
.library-cover { position: relative; display: grid; height: 7.2rem; place-items: center; overflow: hidden; color: var(--ice); background: linear-gradient(135deg,rgba(155,140,255,.14),rgba(143,220,255,.05)); font-size: 1.4rem; }
.library-cover img, .library-cover > span { position: absolute; inset: 0; width: 100%; height: 100%; }.library-cover img { object-fit: cover; }.library-cover > span { background: linear-gradient(0deg,rgba(8,13,24,.72),transparent 65%); }
.library-copy { padding: .85rem; }.library-copy h2 { overflow: hidden; margin: .3rem 0 .15rem; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }.library-copy p { margin: 0; color: var(--muted); font-size: .62rem; }
.library-copy > div { display: flex; gap: .8rem; margin-top: .75rem; padding-top: .65rem; color: var(--muted); border-top: 1px solid var(--line); font-size: .56rem; }.library-copy > div strong { color: var(--text); font-size: .64rem; }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; }.pager > span { color: var(--muted); font-size: .62rem; text-align: center; }.pager > :last-child { justify-self: end; }
.history-track { height: .38rem; overflow: hidden; background: rgba(143,220,255,.07); border-radius: 99px; }.history-track > span { display: block; height: 100%; background: linear-gradient(90deg,var(--violet),var(--ice)); border-radius: inherit; }
.progress-list { padding: 0 .8rem .8rem; }.progress-list article { padding: .7rem .25rem; border-top: 1px solid var(--line); }
.progress-list article > div:first-child { display: grid; grid-template-columns: 2.3rem minmax(0,1fr); align-items: center; gap: .7rem; margin-bottom: .55rem; }.progress-list strong, .progress-list small { display: block; }.progress-list strong { font-size: .69rem; }.progress-list small { margin-top: .14rem; color: var(--muted); font-size: .56rem; }

.replay-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.3rem; background: linear-gradient(120deg,rgba(143,220,255,.09),rgba(155,140,255,.05)),var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; }.replay-hero h2 { margin: .25rem 0; font-size: clamp(1.25rem,3vw,1.85rem); }.replay-hero p { margin: 0; color: var(--muted); font-size: .66rem; }.replay-actions { display: flex; align-items: center; gap: .55rem; }
.analysis-state { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .65rem; color: var(--muted); background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: .65rem; font-size: .61rem; font-weight: 800; white-space: nowrap; }.analysis-state.state-complete { color: var(--mint); }.analysis-state.state-warning, .analysis-state.state-pending { color: var(--amber); }.analysis-state.state-error, .analysis-state.state-blocked { color: #ff879b; }
.analysis-notice { display: grid; grid-template-columns: 2.3rem minmax(0,1fr); align-items: center; gap: .8rem; padding: .9rem 1rem; background: rgba(143,220,255,.045); border: 1px solid var(--line); border-radius: .9rem; }.analysis-notice > i { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; color: var(--ice); background: rgba(143,220,255,.07); border-radius: .65rem; }.analysis-notice strong, .analysis-notice span, .analysis-notice small { display: block; }.analysis-notice strong { font-size: .72rem; }.analysis-notice span { margin-top: .12rem; color: var(--muted); font-size: .62rem; }.analysis-notice small { margin-top: .24rem; color: #718098; font-size: .55rem; }.analysis-notice.notice-error, .analysis-notice.notice-blocked { border-color: rgba(255,120,145,.2); }.analysis-notice.notice-pending { border-color: rgba(240,200,117,.2); }
.replay-metric-grid { display: grid; grid-template-columns: repeat(3,1fr); padding: 0 1rem 1rem; }.replay-metric-grid div { padding: .75rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.replay-metric-grid div:nth-child(3n+1) { border-left: 0; }.replay-metric-grid span, .replay-metric-grid strong { display: block; }.replay-metric-grid span { color: var(--muted); font-size: .55rem; }.replay-metric-grid strong { margin-top: .18rem; font-size: .69rem; }
.judgment-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: .4rem; padding: 0 1rem 1rem; }.judgment-strip span { padding: .5rem; color: var(--muted); background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: .55rem; font-size: .53rem; text-align: center; }.judgment-strip strong { display: block; margin-bottom: .12rem; color: var(--text); font-size: .67rem; }
.skill-comparison-list { padding: 0 1rem 1rem; }.skill-comparison-list article { display: grid; grid-template-columns: 9rem minmax(0,1fr); gap: .65rem 1rem; padding: .8rem .25rem; border-top: 1px solid var(--line); }.comparison-title strong, .comparison-title small { display: block; }.comparison-title strong { font-size: .7rem; }.comparison-title small { margin-top: .15rem; color: var(--muted); font-size: .54rem; }.comparison-bars { display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; }.comparison-bars > div { display: grid; grid-template-columns: 2.7rem minmax(0,1fr) 1.7rem; align-items: center; gap: .35rem; }.comparison-bars span, .comparison-bars strong { color: var(--muted); font-size: .53rem; }.comparison-bars strong { color: var(--text); text-align: right; }.comparison-track { height: .38rem; overflow: hidden; background: rgba(255,255,255,.045); border-radius: 99px; }.comparison-track i { display: block; height: 100%; background: var(--muted); border-radius: inherit; }.comparison-track.player i { background: var(--ice); }.comparison-track.replay i { background: var(--violet); }.comparison-evidence { grid-column: 2; color: #718098; font-size: .52rem; }
.replay-object-table th, .replay-object-table td { white-space: nowrap; }.judgment { padding: .2rem .35rem; color: var(--muted); background: rgba(255,255,255,.035); border-radius: .35rem; font-size: .55rem; }.judgment-miss { color: #ff879b; }.judgment-hit300 { color: var(--mint); }
.pattern-error-list, .analysis-event-list { padding: 0 .75rem .7rem; }.pattern-error-list article { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .7rem .25rem; border-top: 1px solid var(--line); }.pattern-error-list strong, .pattern-error-list small { display: block; }.pattern-error-list strong { font-size: .66rem; }.pattern-error-list small { margin-top: .12rem; color: var(--muted); font-size: .54rem; }.pattern-error-list article > span { color: var(--ice); font-size: .67rem; }
.analysis-event-list article { display: grid; grid-template-columns: .7rem minmax(0,1fr); align-items: start; gap: .7rem; padding: .7rem .25rem; border-top: 1px solid var(--line); }.event-state { width: .5rem; height: .5rem; margin-top: .18rem; background: #ff879b; border-radius: 50%; }.event-state.success { background: var(--mint); }.analysis-event-list strong, .analysis-event-list small { display: block; }.analysis-event-list strong { font-size: .66rem; }.analysis-event-list small { margin-top: .15rem; color: var(--muted); font-size: .55rem; }

.highlight-type-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.highlight-type-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .35rem .8rem; padding: 1rem; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; text-decoration: none; }
.highlight-type-card:hover, .highlight-type-card.active { color: var(--text); border-color: rgba(143,220,255,.32); transform: translateY(-1px); }
.highlight-type-card > span { align-self: end; color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; }.highlight-type-card > strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--ice); font-size: 1.4rem; }.highlight-type-card > small { color: var(--muted); font-size: .57rem; }
.highlight-type-card.type-hall_of_fame { background: linear-gradient(135deg,rgba(240,200,117,.08),transparent),var(--surface); }.highlight-type-card.type-hall_of_shame { background: linear-gradient(135deg,rgba(255,120,145,.08),transparent),var(--surface); }
.highlight-candidate-list { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; }
.candidate-row { display: grid; grid-template-columns: 2.6rem minmax(0,1fr) auto 2rem; align-items: center; gap: .85rem; padding: .85rem 1rem; border-top: 1px solid var(--line); }.candidate-row:first-child { border-top: 0; }
.candidate-mark { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; color: var(--violet); background: rgba(155,140,255,.08); border: 1px solid rgba(155,140,255,.14); border-radius: .75rem; }.type-hall_of_fame .candidate-mark { color: var(--amber); background: rgba(240,200,117,.08); border-color: rgba(240,200,117,.16); }.type-hall_of_shame .candidate-mark { color: #ff7891; background: rgba(255,120,145,.08); border-color: rgba(255,120,145,.16); }
.candidate-main { min-width: 0; }.candidate-main > div { display: flex; align-items: center; gap: .45rem; }.candidate-main h2 { overflow: hidden; margin: .28rem 0 .12rem; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }.candidate-main p { overflow: hidden; margin: 0; color: var(--muted); font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.posting-status { display: inline-flex; padding: .22rem .4rem; color: var(--amber); background: rgba(240,200,117,.07); border: 1px solid rgba(240,200,117,.13); border-radius: .4rem; font-size: .55rem; font-weight: 800; }.posting-status.posted { color: var(--mint); background: rgba(105,221,189,.07); border-color: rgba(105,221,189,.13); }
.candidate-stats { display: flex; gap: .9rem; }.candidate-stats span { color: var(--muted); font-size: .55rem; text-align: right; }.candidate-stats strong { display: block; color: var(--text); font-size: .66rem; }.candidate-open { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: .55rem; text-decoration: none; }
.highlight-detail-hero { display: grid; grid-template-columns: 3rem minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: 1.3rem; background: linear-gradient(120deg,rgba(155,140,255,.09),transparent),var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; }.highlight-detail-hero.type-hall_of_fame { background: linear-gradient(120deg,rgba(240,200,117,.1),transparent),var(--surface); }.highlight-detail-hero h2 { margin: .25rem 0; font-size: clamp(1.25rem,3vw,1.8rem); }.highlight-detail-hero p { margin: 0; color: var(--muted); font-size: .66rem; }
.message-preview { min-height: 13rem; margin: 0 1rem 1rem; padding: 1rem; color: var(--text); background: rgba(5,9,17,.55); border: 1px solid var(--line); border-radius: .8rem; font: .7rem/1.75 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre-wrap; }
.highlight-meta { margin: 0; padding: 0 1rem; }.highlight-meta div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }.highlight-meta dt { color: var(--muted); font-size: .61rem; }.highlight-meta dd { margin: 0; font-size: .64rem; text-align: right; }.detail-link-stack { display: grid; gap: .5rem; padding: 1rem; }
.team-history-chart { display: flex; height: 12rem; align-items: end; gap: 2px; padding: 1rem 1rem 0; }.team-history-chart article { display: flex; height: 100%; min-width: 2px; flex: 1; align-items: end; }.team-history-chart article > span { display: block; width: 100%; min-height: .45rem; background: linear-gradient(0deg,var(--violet),var(--ice)); border-radius: .2rem .2rem 0 0; opacity: .72; }.team-history-chart article:hover > span { opacity: 1; }
.team-history-legend { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem 1rem .9rem; color: var(--muted); font-size: .57rem; }.team-history-legend strong { color: var(--text); font-size: .62rem; }
.team-long-metrics { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }.team-long-metrics div { padding: .85rem 1rem; border-left: 1px solid var(--line); }.team-long-metrics div:first-child { border-left: 0; }.team-long-metrics span, .team-long-metrics strong { display: block; }.team-long-metrics span { color: var(--muted); font-size: .56rem; }.team-long-metrics strong { margin-top: .2rem; font-size: .72rem; }
.membership-events { padding: 0 .75rem .6rem; }.membership-events article { display: grid; grid-template-columns: 2rem minmax(0,1fr); align-items: center; gap: .7rem; padding: .7rem .25rem; border-top: 1px solid var(--line); }.event-type { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--mint); background: rgba(105,221,189,.07); border-radius: .55rem; }.event-type.event-left { color: #ff7891; background: rgba(255,120,145,.07); }.membership-events strong, .membership-events small { display: block; }.membership-events strong { font-size: .68rem; }.membership-events small { margin-top: .12rem; color: var(--muted); font-size: .56rem; }
.registration-groups { display: flex; flex-wrap: wrap; gap: .45rem; }.registration-groups span { padding: .35rem .55rem; color: var(--muted); background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: .55rem; font-size: .57rem; }.registration-groups strong { color: var(--ice); }
.member-grid-detailed { grid-template-columns: repeat(auto-fill,minmax(22rem,1fr)); }.member-card-detailed { align-items: flex-start; }.member-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }.member-tags span { padding: .2rem .35rem; color: var(--muted); background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: .38rem; font-size: .53rem; }.member-tags .linked { color: var(--mint); }.member-tags .unlinked { color: var(--amber); }.member-tags .role-leader { color: var(--violet); }
.member-contribution { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; margin: .7rem 0; padding: .6rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.member-contribution strong, .member-contribution span { display: block; }.member-contribution strong { font-size: .67rem; }.member-contribution span { margin-top: .1rem; color: var(--muted); font-size: .51rem; }

/* Grimoire design language adapted from the supplied reference. */
#mana-canvas { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; mix-blend-mode: screen; }
.frost-nav, main, body > footer { position: relative; z-index: 2; }
.archive-container { max-width: 1320px; }
.ambient { opacity: .035; filter: blur(120px); }

h1, h2, h3, .navbar-brand strong { color: var(--text); font-family: var(--font-serif); font-weight: 400 !important; letter-spacing: .035em !important; }
.frost-nav { background: rgba(11,14,19,.88); border-bottom-color: var(--line); backdrop-filter: blur(14px); }
.navbar-brand .brand-mark { color: var(--amber); background: rgba(197,160,89,.045); border-color: rgba(197,160,89,.32); border-radius: 2px; transform: rotate(45deg); }
.navbar-brand .brand-mark i { transform: rotate(-45deg); }
.navbar-brand strong { font-family: var(--font-title); font-size: .88rem; letter-spacing: .18em !important; }
.navbar-brand small { color: var(--amber); font-family: var(--font-serif); font-size: .62rem; font-style: italic; letter-spacing: .28em; }
.navbar .nav-link { color: var(--muted); border: 1px solid transparent; border-radius: 2px; font-family: var(--font-serif); font-size: .94rem; font-weight: 400; letter-spacing: .035em; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--text); background: rgba(197,160,89,.045); border-color: var(--line-faint); }
.navbar .nav-link.active { border-bottom-color: var(--amber); }

.section-kicker { color: var(--amber); font-family: var(--font-serif); font-size: .72rem; font-style: italic; font-weight: 400; letter-spacing: .15em; text-transform: none; }
.presence { background: var(--mint); box-shadow: 0 0 0 .2rem rgba(145,180,165,.08); }

.metric-card, .panel, .training-card, .member-card, .callout, .filter-panel, .profile-hero, .profile-metric, .detail-hero, .highlight-candidate-list, .highlight-detail-hero, .replay-hero, .analysis-notice { background-color: var(--surface); border-color: var(--line); border-right-color: var(--line-faint); border-left-color: var(--line-faint); border-radius: 2px; box-shadow: 0 10px 30px rgba(0,0,0,.32); backdrop-filter: blur(8px); }
.panel, .filter-panel { position: relative; }
.panel::before, .filter-panel::before { content: '✦'; position: absolute; z-index: 3; top: 6px; left: 8px; color: var(--amber); font-size: .55rem; opacity: .42; pointer-events: none; }
.panel::after, .filter-panel::after { content: '✦'; position: absolute; z-index: 3; right: 8px; bottom: 6px; color: var(--amber); font-size: .55rem; opacity: .32; pointer-events: none; }
.metric-card { border-top-color: var(--line); border-bottom-color: var(--line); }
.metric-card > i, .achievement-icon, .candidate-mark, .event-type { color: var(--ice); background: rgba(136,160,192,.055); border-color: rgba(136,160,192,.2); border-radius: 2px; }
.metric-card strong, .profile-metric strong { color: var(--text); font-family: var(--font-serif); font-weight: 600; }
.metric-card span, .profile-metric span { font-family: var(--font-serif); font-size: .78rem; }
.panel-head { padding-top: 1.55rem; }
.panel-head h2, .section-caption { color: var(--text); font-family: var(--font-serif); font-size: 1.25rem; font-weight: 400; letter-spacing: .04em; }
.panel-note { font-family: var(--font-serif); font-size: .78rem; font-style: italic; }

.score-row, .leader-row, .skill-row, .weakness-row, .achievement-list article, .membership-events article, .pattern-error-list article, .analysis-event-list article { border-top-color: var(--line-faint); transition: color .25s ease, background .25s ease; }
.score-row:hover, .leader-row:hover, .skill-row:hover, .weakness-row:hover { background: rgba(136,160,192,.035); }
.rank, .mod-badge, .status, .rune-tag, .posting-status, .rarity-label, .priority, .member-tags span, .registration-groups span { border-radius: 2px; }
.rank { color: var(--ice); background: rgba(136,160,192,.055); border-color: rgba(136,160,192,.23); font-family: var(--font-serif); }
.rank-s, .rank-ss, .rank-x, .rank-xh, .rank-sh { color: var(--amber); background: rgba(197,160,89,.055); border-color: rgba(197,160,89,.25); }
.score-main strong, .training-map h2, .member-body h2, .detail-title h2, .library-copy h2 { font-family: var(--font-serif); font-weight: 600 !important; }
.score-main span, .score-main small, .score-stats, .table-note { font-family: var(--font-serif); }
.soft-link, .detail-link:hover, .player-link:hover { color: var(--ice); }

.score-table { --bs-table-bg: transparent; --bs-table-color: var(--muted); --bs-table-border-color: var(--line-faint); font-family: var(--font-sans); }
.score-table th { color: var(--amber); font-family: var(--font-serif); font-size: .83rem; font-weight: 400; letter-spacing: .05em; text-transform: none; }
.score-table tbody tr:hover td { color: var(--text); background: rgba(136,160,192,.035); }
.score-table td strong, .val-highlight { color: var(--text); font-family: var(--font-serif); font-size: .92rem; font-weight: 600; }

.filter-panel { padding: 1.5rem 1.35rem; }
.filter-panel .form-label { color: var(--amber); font-family: var(--font-serif); font-size: .76rem; font-weight: 400; letter-spacing: .09em; text-transform: uppercase; }
.filter-panel .form-control, .filter-panel .form-select, .search-bar .form-control { color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-family: var(--font-serif); font-size: 1rem; box-shadow: none; }
.filter-panel .input-group-text { color: var(--amber); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.filter-panel .form-control:focus, .filter-panel .form-select:focus { border-color: var(--ice); box-shadow: none; }
.filter-panel .form-select option { color: var(--text); background: var(--surface-2); }
.btn-frost, .osu-button { color: var(--amber); background: transparent; border: 1px solid var(--line); border-radius: 2px; font-family: var(--font-serif); font-size: .88rem; font-weight: 400; letter-spacing: .06em; }
.btn-frost:hover, .osu-button:hover { color: var(--text); background: rgba(197,160,89,.065); border-color: var(--text); box-shadow: 0 0 15px rgba(197,160,89,.1); }
.btn-ghost { border-color: var(--line-faint); border-radius: 2px; font-family: var(--font-serif); }
.btn-ghost:hover { color: var(--text); border-color: var(--line); }

.skill-track, .history-track, .comparison-track { background: rgba(136,160,192,.055); border-radius: 0; }
.skill-track span, .history-track > span, .team-history-chart article > span { background: linear-gradient(90deg,var(--amber),var(--ice)); border-radius: 0; opacity: .72; }
.team-development-panel .panel-head { align-items: end; padding-bottom: 1.2rem; }
.team-history-range { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .58rem; color: var(--text); background: rgba(197,160,89,.045); border: 1px solid var(--line); font-family: var(--font-serif); font-size: .76rem; letter-spacing: .025em; white-space: nowrap; }
.team-history-range i { color: var(--amber); font-size: .68rem; }
.team-history-chart { height: 10rem; align-items: end; gap: 3px; margin: 0 1rem; padding: .85rem .35rem 0; background-image: repeating-linear-gradient(0deg,transparent 0,transparent calc(25% - 1px),rgba(212,175,55,.055) 25%); border-top: 1px solid var(--line-faint); border-bottom: 1px solid var(--line-faint); }
.team-history-chart article { justify-content: center; }
.team-history-chart article > span { width: min(100%,7px); min-height: .45rem; background: linear-gradient(180deg,rgba(197,160,89,.82),rgba(197,160,89,.18)); border: 0; box-shadow: 0 0 8px rgba(197,160,89,.06); opacity: .78; }
.team-history-chart article:last-child > span { background: linear-gradient(180deg,rgba(230,223,211,.92),rgba(197,160,89,.3)); box-shadow: 0 0 10px rgba(230,223,211,.12); opacity: 1; }
.team-history-chart article:hover > span { background: var(--text); box-shadow: 0 0 12px rgba(197,160,89,.2); opacity: 1; }
.team-history-legend { padding-top: .75rem; font-family: var(--font-serif); font-size: .68rem; }.team-history-legend strong { color: var(--amber); font-size: .76rem; font-weight: 400; }
.profile-avatar img, .avatar-wrap img, .detail-cover, .library-cover { border-radius: 2px; }
.profile-hero, .replay-hero, .highlight-detail-hero { background-image: linear-gradient(120deg,rgba(136,160,192,.045),rgba(197,160,89,.025)); }
.detail-shade { background: linear-gradient(90deg,rgba(11,14,19,.97),rgba(11,14,19,.78) 52%,rgba(11,14,19,.35)),linear-gradient(0deg,rgba(11,14,19,.72),transparent); }
.detail-title > span, .training-map > span, .weakness-rank, .highlight-type { color: var(--amber); }
.training-card, .member-card { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.training-card:hover, .member-card:hover { transform: translateY(-2px); border-color: rgba(212,175,55,.32); }

footer { display: flex; align-items: center; justify-content: space-between; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1.2rem; font-family: var(--font-serif); }
footer span, footer small { display: block; }
footer span { color: var(--text); font-size: .78rem; font-weight: 700; }
footer small { margin-top: .2rem; font-size: .63rem; }
footer > i { color: var(--ice); }

@media (max-width: 767.98px) {
    .score-row { grid-template-columns: 2.3rem minmax(0, 1fr); padding: .9rem 1rem; }
    .score-stats { grid-column: 2; display: flex; gap: .65rem; align-items: baseline; text-align: left; }
    .score-stats strong, .score-stats span { display: inline; }
    .metric-card { min-height: 6.3rem; padding: .9rem; }
    .metric-card > i { display: none; }
    .metric-card strong { font-size: 1.35rem; }
    .profile-hero { align-items: flex-start; }
    .profile-avatar { flex-basis: 3.8rem; }
    .profile-avatar img { width: 3.8rem; height: 3.8rem; }
    .profile-identity p { line-height: 1.55; }
    .osu-button { width: 2.6rem; overflow: hidden; white-space: nowrap; color: transparent; }
    .osu-button i { color: var(--bg); }
    .detail-content { align-items: flex-start; flex-wrap: wrap; padding: 1.2rem; }
    .rank-large, .map-star { flex-basis: 3.7rem; width: 3.7rem; height: 3.7rem; }
    .detail-title { flex-basis: calc(100% - 5rem); }
    .map-difficulties { max-width: calc(100vw - 7rem); }
    .detail-actions { flex-basis: 100%; justify-content: flex-start; }
    .detail-grid { grid-template-columns: repeat(2,1fr); }
    .detail-grid > div:nth-child(2) { border-right: 0; }
    .detail-grid > div { border-bottom: 1px solid var(--line); }
    .achievement-list article { grid-template-columns: 2.4rem minmax(0,1fr); }
    .rarity-label { display: none; }
    .highlight-list { grid-template-columns: 1fr; }
    .decision-list article { grid-template-columns: 2rem minmax(0,1fr); }
    .decision-result { grid-column: 2; display: flex; justify-content: space-between; text-align: left; }
    .highlight-type-grid { grid-template-columns: repeat(2,1fr); }
    .candidate-row { grid-template-columns: 2.4rem minmax(0,1fr) 2rem; }.candidate-stats { grid-column: 2 / -1; justify-content: flex-start; }.candidate-stats span { text-align: left; }.candidate-open { grid-column: 3; grid-row: 1; }
    .highlight-detail-hero { grid-template-columns: 2.6rem minmax(0,1fr); }.highlight-detail-hero > .posting-status { grid-column: 2; justify-self: start; }
    .team-long-metrics { grid-template-columns: repeat(2,1fr); }.team-long-metrics div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }.team-long-metrics div:nth-child(4) { border-top: 1px solid var(--line); }
    .replay-hero { display: block; }.replay-actions { flex-wrap: wrap; margin-top: 1rem; }.replay-metric-grid { grid-template-columns: repeat(2,1fr); }.replay-metric-grid div:nth-child(3n+1) { border-left: 1px solid var(--line); }.replay-metric-grid div:nth-child(odd) { border-left: 0; }
    .skill-comparison-list article { grid-template-columns: 1fr; }.comparison-bars { grid-template-columns: 1fr; }.comparison-evidence { grid-column: 1; }
    .team-development-panel .panel-head { align-items: flex-start; gap: .75rem; }.team-history-range { font-size: .68rem; }.team-history-chart { height: 8rem; gap: 2px; margin: 0 .65rem; }
}

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

/* WOSU-only additions. Original webview3 CSS above remains untouched. */
.realtime-toast{position:fixed;right:1.2rem;bottom:1.2rem;z-index:1080;display:flex;align-items:center;gap:.65rem;padding:.75rem .9rem;border:1px solid var(--line);border-radius:13px;background:rgba(8,13,24,.94);backdrop-filter:blur(18px);box-shadow:0 18px 44px rgba(0,0,0,.35);color:var(--text);opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s ease}.realtime-toast.show{opacity:1;transform:none}.realtime-toast i{color:var(--mint)}.realtime-toast small{display:block;color:var(--muted)}

/* WOSU 0.7.0 — overview ranking, performance snapshot and language switcher. */
.language-switcher { display:flex; align-items:center; gap:.28rem; }
.language-switcher a { min-width:2.15rem; padding:.28rem .42rem; color:var(--muted); border:1px solid var(--line-faint); text-align:center; font-family:var(--font-serif); font-size:.68rem; letter-spacing:.08em; text-decoration:none; }
.language-switcher a:hover,.language-switcher a.active { color:var(--text); border-color:var(--line); background:rgba(197,160,89,.07); }
.overview-rank-table .rank-player { display:flex; flex-direction:column; gap:.12rem; min-width:9rem; }
.overview-rank-table .rank-player small { color:var(--muted); font-size:.62rem; }
.overview-rank-table .rank-player-inactive { opacity:.42; filter:saturate(.35); }
.overview-rank-table .rank-player-inactive:hover { opacity:.68; }
.rank-change { display:inline-flex; min-width:3.6rem; align-items:center; gap:.15rem; font-family:var(--font-serif); font-weight:600; }
.rank-change i { font-size:1.2rem; line-height:1; }
.rank-change.up,.metric-delta.up { color:#86cba8; }
.rank-change.down,.metric-delta.down { color:#d68383; }
.rank-change.flat,.metric-delta.flat { color:var(--muted); }
.performance-snapshot .panel-head { gap:1rem; }
.performance-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); }
.performance-metric-grid article { padding:1rem 1.15rem; border-left:1px solid var(--line-faint); }
.performance-metric-grid article:first-child { border-left:0; }
.performance-metric-grid span,.performance-metric-grid strong,.performance-metric-grid small { display:block; }
.performance-metric-grid > article > span { color:var(--muted); font-family:var(--font-serif); font-size:.72rem; }
.performance-metric-grid strong { margin-top:.25rem; color:var(--text); font-family:var(--font-serif); font-size:1.28rem; font-weight:600; }
.performance-metric-grid small { margin-top:.25rem; font-size:.62rem; }
@media (max-width:991.98px){ .language-switcher{margin-left:0!important;padding-bottom:.5rem}.performance-metric-grid{grid-template-columns:repeat(2,1fr)}.performance-metric-grid article:nth-child(3){border-left:0;border-top:1px solid var(--line-faint)}.performance-metric-grid article:nth-child(4){border-top:1px solid var(--line-faint)}.performance-snapshot .panel-head{align-items:flex-start} }
@media (max-width:575.98px){ .performance-metric-grid{grid-template-columns:1fr}.performance-metric-grid article{border-left:0!important;border-top:1px solid var(--line-faint)} }

/* WOSU 0.7.1 — unified readable typography + compact overview density. */
:root {
  --text-xs: .78rem;
  --text-sm: .9rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.6rem;
  --line-compact: 1.25;
  --line-normal: 1.45;
  --space-card-x: 1rem;
  --space-card-y: .8rem;
}

/* Shared typography hierarchy: fewer component-specific microscopic sizes. */
body { font-size: var(--text-base); line-height: var(--line-normal); }
.navbar .nav-link { font-size: var(--text-base); }
.section-kicker { font-size: var(--text-sm); }
.panel-head h2, .section-caption { font-size: var(--text-xl); }
.soft-link, .panel-note, .table-note { font-size: var(--text-sm); }
.metric-card span, .profile-metric span { font-size: var(--text-sm); }
.metric-card strong { font-size: var(--text-2xl); }
.score-main span, .score-main small,
.leader-row div small, .leader-row > span:last-child small,
.score-table td small { font-size: var(--text-sm); }
.score-stats strong { font-size: var(--text-lg); }
.score-stats strong small, .score-stats span { font-size: var(--text-sm); }
.score-table { font-size: var(--text-base); }
.score-table th { font-size: var(--text-sm); }
.score-table td strong, .val-highlight { font-size: var(--text-base); }
.language-switcher a { font-size: var(--text-sm); }
.performance-metric-grid > article > span,
.performance-metric-grid small { font-size: var(--text-sm); }
.performance-metric-grid strong { font-size: var(--text-xl); }

/* Overview: cards fit their content instead of reserving decorative height. */
body[data-page="overview"] .metric-card {
  min-height: 0;
  padding: var(--space-card-y) var(--space-card-x);
}
body[data-page="overview"] .metric-card > i {
  flex-basis: 2.35rem;
  width: 2.35rem;
  height: 2.35rem;
}
body[data-page="overview"] .panel-head {
  padding: 1rem var(--space-card-x) .75rem;
}
body[data-page="overview"] .score-row {
  gap: .75rem;
  padding: .68rem var(--space-card-x);
}
body[data-page="overview"] .leader-row {
  gap: .55rem;
  padding: .55rem .75rem;
}
body[data-page="overview"] .panel-note {
  margin: .7rem var(--space-card-x) .85rem;
  line-height: var(--line-normal);
}

/* Performance snapshot belongs first and stays compact/readable. */
body[data-page="overview"] .performance-snapshot {
  margin-bottom: 1rem !important;
}
body[data-page="overview"] .performance-metric-grid article {
  padding: .72rem var(--space-card-x);
}
body[data-page="overview"] .performance-metric-grid strong {
  margin-top: .12rem;
}
body[data-page="overview"] .performance-metric-grid small {
  margin-top: .12rem;
}

/* Ranking: readable type, but one compact row per player. */
body[data-page="overview"] .overview-rank-table {
  line-height: var(--line-compact);
  white-space: nowrap;
}
body[data-page="overview"] .overview-rank-table th {
  padding: .5rem .72rem;
}
body[data-page="overview"] .overview-rank-table td {
  padding: .42rem .72rem;
  vertical-align: middle;
}
body[data-page="overview"] .overview-rank-table .community-rank {
  width: 1.55rem;
  height: 1.55rem;
  font-size: var(--text-sm);
}
body[data-page="overview"] .overview-rank-table .rank-player {
  display: inline-flex;
  min-width: 0;
  flex-direction: row;
  align-items: baseline;
  gap: .5rem;
  white-space: nowrap;
}
body[data-page="overview"] .overview-rank-table .rank-player small {
  margin: 0;
  font-size: var(--text-sm);
  white-space: nowrap;
}
body[data-page="overview"] .overview-rank-table .rank-change {
  min-width: 2.8rem;
}
body[data-page="overview"] .overview-rank-table .rank-change i {
  font-size: var(--text-lg);
}

@media (max-width: 991.98px) {
  :root {
    --text-xs: .76rem;
    --text-sm: .86rem;
    --text-base: .96rem;
    --text-lg: 1.08rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.45rem;
  }
  body[data-page="overview"] .overview-rank-table { min-width: 64rem; }
}

/* WOSU 0.7.2 — large-display shell scaling. */
.archive-container,
.frost-nav > .container {
  width: calc(100% - 2rem);
  max-width: clamp(1320px, 65vw, 2200px);
}

/* On very large displays reduce dead vertical space rather than scaling text endlessly. */
@media (min-width: 2200px) {
  .archive-container {
    padding-top: 2rem !important;
    padding-bottom: 2.5rem !important;
  }
}

@media (max-width: 1399.98px) {
  .archive-container,
  .frost-nav > .container {
    width: calc(100% - 1.5rem);
    max-width: 1320px;
  }
}

/* Large high-density monitors need modest type scaling as well as more width. */
@media (min-width: 2200px) {
  html { font-size: 17px; }
  body[data-page="overview"] .overview-rank-table th { padding-top: .42rem; padding-bottom: .42rem; }
  body[data-page="overview"] .overview-rank-table td { padding-top: .32rem; padding-bottom: .32rem; }
}
@media (min-width: 3200px) {
  html { font-size: 18px; }
  body[data-page="overview"] .overview-rank-table th { padding-top: .38rem; padding-bottom: .38rem; }
  body[data-page="overview"] .overview-rank-table td { padding-top: .28rem; padding-bottom: .28rem; }
}

/* WOSU 0.8.0 — progress sparklines + flowing cached map browser. */
.overview-rank-table .spark-cell { width: 10.5rem; min-width: 8.5rem; }
.rank-sparkline { display:block; width:100%; max-width:9.5rem; height:1.55rem; overflow:visible; }
.rank-sparkline polyline { fill:none; stroke:var(--ice); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 4px rgba(136,160,192,.18)); }
.rank-sparkline.up polyline { stroke:var(--mint); }
.rank-sparkline.down polyline { stroke:#c77f86; }
.rank-sparkline.flat polyline { stroke:var(--muted); }
.rank-sparkline.spark-pp polyline { stroke:var(--amber); }
.spark-empty { color:var(--muted); }

.map-browser { overflow:hidden; container-type:inline-size; }
.map-browser-head { gap:1rem; }
.map-browser-actions { display:flex; align-items:center; gap:.6rem; }
.map-browser-state { display:inline-flex; align-items:center; gap:.35rem; color:var(--muted); font-family:var(--font-serif); font-size:var(--text-sm); white-space:nowrap; }
.map-browser-state.ready { color:var(--mint); }
.map-browser-state.syncing { color:var(--amber); }
.map-browser-pause { display:grid; width:2.35rem; height:2.35rem; place-items:center; color:var(--text); background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:2px; }
.map-wall { display:grid; gap:.72rem; padding:.55rem 0 .8rem; }
.map-loop-viewport { position:relative; overflow:hidden; padding:.18rem 0; outline:none; mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%); }
.map-loop-viewport:focus-visible { box-shadow:inset 0 0 0 1px var(--amber); }
.map-loop-track { display:flex; width:max-content; gap:.9rem; padding:0 .9rem; will-change:transform; }
.map-loop-card { flex:0 0 clamp(17rem,21cqw,19rem); overflow:hidden; background:rgba(16,20,28,.78); border:1px solid var(--line-faint); border-top-color:var(--line); border-radius:2px; box-shadow:0 8px 22px rgba(0,0,0,.24); transform:translateZ(0); }
.map-loop-card .library-cover { height:9.6rem; }
.map-loop-card .library-copy { padding:.9rem 1rem 1rem; }
.map-loop-card .library-copy h2 { margin:.12rem 0 .35rem; font-size:var(--text-lg); }
.map-loop-card .library-copy p { font-size:var(--text-sm); }
.map-loop-card .library-copy > div { font-size:var(--text-sm); }
.map-loop-card .library-copy > div strong { font-size:var(--text-sm); }
.map-browser-foot { display:flex; justify-content:space-between; gap:1rem; padding:.65rem 1rem .85rem; color:var(--muted); border-top:1px solid var(--line-faint); font-family:var(--font-serif); font-size:var(--text-sm); }
.map-browser-foot i { color:var(--amber); }

@media (max-width: 767.98px) {
  .overview-rank-table .spark-cell { min-width:7.5rem; }
  .map-browser-head { align-items:flex-start; }
  .map-browser-actions { align-items:flex-end; flex-direction:column-reverse; }
  .map-wall { display:block; }
  .map-loop-viewport { display:none; overflow-x:auto; mask-image:none; scrollbar-width:thin; }
  .map-loop-viewport:first-child { display:block; }
  .map-loop-track { transform:none !important; }
  .map-loop-card { flex-basis:17rem; }
  .map-browser-foot { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  .map-loop-viewport { overflow-x:auto; mask-image:none; scrollbar-width:thin; }
  .map-loop-track { transform:none !important; }
}

/* WOSU 0.8.1 — compact period leaderboard. */
.overview-rank-compact { max-width:100%; }
.compact-rank-head { align-items:flex-start; gap:1rem; }
.compact-rank-tools { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; justify-content:flex-end; }
.compact-rank-tabs { display:flex; gap:.25rem; padding:.2rem; border:1px solid var(--line-faint); background:rgba(255,255,255,.018); }
.compact-rank-tabs button,.compact-rank-limit { border:0; background:transparent; color:var(--muted); font-family:var(--font-serif); font-size:var(--text-sm); line-height:1; padding:.55rem .7rem; white-space:nowrap; }
.compact-rank-tabs button.active { color:var(--text); background:rgba(197,160,89,.09); box-shadow:inset 0 -1px 0 var(--amber); }
.compact-rank-limit { display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--line-faint); }
.compact-rank-list { display:grid; gap:.18rem; }
.compact-rank-row { display:grid; grid-template-columns:2.25rem minmax(10rem,1fr) minmax(7rem,.7fr); align-items:center; min-height:2.5rem; padding:.25rem .65rem; border-top:1px solid var(--line-faint); transition:opacity .2s ease,transform .2s ease; }
.compact-rank-row:first-child { border-top-color:var(--line); }
.compact-rank-row.rank-player-inactive { opacity:.45; filter:saturate(.35); }
.compact-rank-place { font-family:var(--font-title); color:var(--muted); text-align:center; }
.compact-rank-place.top { color:var(--amber); }
.compact-rank-player { min-width:0; display:flex; align-items:baseline; gap:.55rem; }
.compact-rank-player a { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compact-rank-player small { color:var(--muted); white-space:nowrap; }
.compact-rank-value { justify-self:end; display:flex; align-items:center; gap:.5rem; min-width:0; }
.compact-rank-value strong { font-size:var(--text-base); font-weight:500; }
.compact-rank-value .mini-bar { width:5.25rem; height:.22rem; background:rgba(255,255,255,.045); overflow:hidden; }
.compact-rank-value .mini-bar i { display:block; height:100%; background:var(--ice); transform-origin:left center; }
.compact-rank-row[data-metric="skill_change"] .mini-bar i.positive { background:var(--mint); }
.compact-rank-row[data-metric="skill_change"] .mini-bar i.negative { background:#c77f86; }
.compact-rank-foot { display:flex; justify-content:space-between; gap:1rem; padding:.6rem .7rem .05rem; color:var(--muted); font-family:var(--font-serif); font-size:var(--text-sm); }
.compact-rank-foot i { color:var(--mint); }
@media (max-width: 767.98px) {
  .compact-rank-head { flex-direction:column; }
  .compact-rank-tools { justify-content:flex-start; width:100%; }
  .compact-rank-tabs { width:100%; overflow-x:auto; }
  .compact-rank-row { grid-template-columns:2rem minmax(8rem,1fr) auto; padding-inline:.35rem; }
  .compact-rank-player small,.compact-rank-value .mini-bar { display:none; }
}

/* Generic UI composition primitives — Section -> Header -> Grid -> Cards. */
.ui-section {
  position:relative;
  display:grid;
  gap:.85rem;
  padding:.8rem;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-right-color:var(--line-faint);
  border-left-color:var(--line-faint);
  border-radius:2px;
  box-shadow:0 10px 30px rgba(0,0,0,.32);
  backdrop-filter:blur(8px);
}
.ui-section::before { content:'✦'; position:absolute; z-index:3; top:6px; left:8px; color:var(--amber); font-size:.55rem; opacity:.42; pointer-events:none; }
.ui-section::after { content:'✦'; position:absolute; z-index:3; right:8px; bottom:6px; color:var(--amber); font-size:.55rem; opacity:.32; pointer-events:none; }
.ui-section__header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; min-width:0; padding:.35rem .35rem .1rem; border-bottom:1px solid var(--line-faint); }
.ui-section__header > div { min-width:0; }
.ui-section__header h2 { margin:.08rem 0 0; color:var(--text); font-family:var(--font-title); font-size:var(--text-xl); font-weight:400; }
.ui-section__meta { display:inline-flex; flex:0 0 auto; align-items:center; gap:.35rem; padding:.28rem .45rem; color:var(--muted); font-family:var(--font-serif); font-size:var(--text-sm); border:1px solid var(--line-faint); background:rgba(255,255,255,.018); }
.ui-section__meta i { color:var(--mint); }
.ui-section__grid { display:grid; gap:.8rem; min-width:0; }
.ui-section__grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ui-section__grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ui-section__grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ui-section__grid--3-1 { grid-template-columns:minmax(0,3fr) minmax(15rem,1fr); }
@media (max-width:1399.98px) { .ui-section__grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:991.98px) { .ui-section__grid--3,.ui-section__grid--2,.ui-section__grid--3-1 { grid-template-columns:1fr; } }
@media (max-width:767.98px) {
  .ui-section { padding:.65rem; }
  .ui-section__header { align-items:flex-start; flex-direction:column; }
  .ui-section__grid--4 { grid-template-columns:1fr; }
}

/* WOSU 0.8.2 — four-card Frieren-style adventurer chronicle. */
.period-rank-card { min-width:0; padding:.8rem .75rem .65rem; overflow:hidden; }
.period-rank-head { display:flex; align-items:center; justify-content:space-between; min-height:3.15rem; margin-bottom:.35rem; }
.period-rank-head > div { display:flex; align-items:center; gap:.65rem; min-width:0; }
.period-rank-icon { display:grid; place-items:center; flex:0 0 2.25rem; width:2.25rem; height:2.25rem; border:1px solid var(--line); color:var(--amber); background:rgba(197,160,89,.045); }
.period-rank-head h3 { margin:.08rem 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-title); font-size:var(--text-base); font-weight:400; }
.period-rank-card .compact-rank-list { gap:0; }
.period-rank-card .compact-rank-row { grid-template-columns:1.75rem minmax(0,1fr) auto; min-height:2.25rem; padding:.18rem .15rem; }
.period-rank-card .compact-rank-place { font-size:var(--text-sm); }
.period-rank-card .compact-rank-player { min-width:0; display:block; }
.period-rank-card .compact-rank-player a { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.period-rank-card .compact-rank-value { gap:.35rem; }
.period-rank-card .compact-rank-value strong { min-width:3.2rem; text-align:right; font-size:var(--text-sm); }
.period-rank-card .compact-rank-value .mini-bar { width:2.75rem; }
.period-rank-card footer { min-height:2.35rem; margin-top:.35rem; padding:.45rem .15rem 0; border-top:1px solid var(--line-faint); color:var(--muted); font-family:var(--font-serif); font-size:var(--text-xs); line-height:1.25; }
.compact-rank-empty { display:grid; min-height:11.25rem; place-items:center; color:var(--muted); }
@media (max-width: 767.98px) {
  .period-rank-card .compact-rank-value .mini-bar { width:3.5rem; }
}

/* WOSU 0.8.3 — latest scores stay on one line whenever possible. */
body[data-page="overview"] .overview-score-wrap { overflow-x:auto; }
body[data-page="overview"] .overview-score-table {
  width:100%;
  min-width:58rem;
  table-layout:auto;
  line-height:var(--line-compact);
  white-space:nowrap;
}
body[data-page="overview"] .overview-score-table th {
  padding:.45rem .55rem;
}
body[data-page="overview"] .overview-score-table td {
  padding:.42rem .55rem;
  vertical-align:middle;
}
body[data-page="overview"] .overview-score-table tbody tr {
  cursor:pointer;
}
body[data-page="overview"] .overview-score-table .rank {
  width:1.65rem;
  height:1.65rem;
  font-size:var(--text-sm);
}
body[data-page="overview"] .overview-score-map {
  min-width:13rem;
  max-width:22rem;
}
body[data-page="overview"] .overview-score-map a,
body[data-page="overview"] .overview-score-map span,
body[data-page="overview"] .overview-score-diff {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-page="overview"] .overview-score-map a {
  display:inline-block;
  max-width:13rem;
  vertical-align:middle;
}
body[data-page="overview"] .overview-score-map span {
  display:inline-block;
  max-width:7.5rem;
  margin-left:.4rem;
  color:var(--muted);
  vertical-align:middle;
}
body[data-page="overview"] .overview-score-map span::before { content:'· '; }
body[data-page="overview"] .overview-score-diff { max-width:10rem; }
body[data-page="overview"] .overview-score-table td strong { display:inline; }
@media (max-width: 767.98px) {
  body[data-page="overview"] .overview-score-table { min-width:54rem; }
}
body[data-page="overview"] .overview-score-table th,
body[data-page="overview"] .overview-score-table td { padding-left:.4rem; padding-right:.4rem; }

/* WOSU 0.8.4 — encouraging metric magic + footer shell parity. */
.performance-encouragement {
  position:relative;
  display:flex;
  align-items:center;
  gap:.7rem;
  min-height:2.65rem;
  padding:.62rem var(--space-card-x) .72rem;
  overflow:hidden;
  border-top:1px solid var(--line-faint);
  color:var(--text);
  font-family:var(--font-serif);
  font-size:var(--text-base);
}
.performance-encouragement::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(145,180,165,.055),transparent 42%,rgba(197,160,89,.035));
}
.performance-encouragement i {
  position:relative;
  flex:0 0 auto;
  color:var(--amber);
  filter:drop-shadow(0 0 6px rgba(197,160,89,.22));
}
.performance-encouragement span { position:relative; }
.performance-encouragement.mood-rising i,
.performance-encouragement.mood-growing i { color:var(--mint); }

/* Footer follows the exact responsive shell width without inheriting main-content padding. */
.site-footer-shell {
  width:calc(100% - 2rem);
  max-width:clamp(1320px,65vw,2200px);
}
@media (max-width:1399.98px) {
  .site-footer-shell {
    width:calc(100% - 1.5rem);
    max-width:1320px;
  }
}

/* WOSU 0.9.0 — living grimoire companion. */
.grimoire-companion {
  position:fixed;
  z-index:1060;
  right:clamp(1rem,2vw,2.5rem);
  bottom:clamp(1rem,2vw,2rem);
  width:min(24rem,calc(100vw - 1.5rem));
  pointer-events:none;
}
.grimoire-spirit {
  position:relative;
  display:grid;
  width:4.4rem;
  height:4.4rem;
  margin-left:auto;
  place-items:center;
  border:1px solid rgba(197,160,89,.38);
  border-radius:50%;
  background:radial-gradient(circle at 42% 35%,rgba(136,160,192,.18),rgba(11,14,19,.94) 68%);
  color:var(--amber);
  box-shadow:0 0 0 1px rgba(255,255,255,.025),0 12px 34px rgba(0,0,0,.42),0 0 24px rgba(136,160,192,.10);
  pointer-events:auto;
  cursor:pointer;
}
.grimoire-book { position:relative; z-index:3; display:grid; place-items:center; width:2.5rem; height:2.5rem; }
.grimoire-book .bi-book-half { font-size:1.85rem; filter:drop-shadow(0 0 7px rgba(197,160,89,.24)); }
.grimoire-book .bi-stars { position:absolute; right:-.2rem; top:-.25rem; color:var(--ice); font-size:.72rem; }
.grimoire-pulse { position:absolute; inset:.48rem; border:1px solid rgba(136,160,192,.28); border-radius:50%; animation:grimoirePulse 3.2s ease-in-out infinite; }
.grimoire-orbit { position:absolute; inset:.2rem; border-radius:50%; border:1px solid transparent; pointer-events:none; }
.grimoire-orbit::before { content:''; position:absolute; width:.3rem; height:.3rem; border-radius:50%; background:var(--ice); box-shadow:0 0 8px rgba(136,160,192,.8); }
.orbit-a { border-top-color:rgba(136,160,192,.16); animation:grimoireOrbit 8s linear infinite; }
.orbit-a::before { top:-.13rem; left:50%; }
.orbit-b { inset:.65rem; border-bottom-color:rgba(197,160,89,.15); animation:grimoireOrbit 11s linear infinite reverse; }
.orbit-b::before { bottom:-.12rem; right:22%; background:var(--amber); box-shadow:0 0 8px rgba(197,160,89,.8); }
.grimoire-bubble {
  position:relative;
  margin:0 1rem .8rem 0;
  padding:.9rem 2.45rem .85rem 1rem;
  border:1px solid var(--line);
  border-left:2px solid rgba(197,160,89,.62);
  background:linear-gradient(145deg,rgba(18,23,31,.97),rgba(10,13,18,.96));
  box-shadow:0 18px 44px rgba(0,0,0,.42),0 0 28px rgba(136,160,192,.06);
  backdrop-filter:blur(12px);
  pointer-events:auto;
  transform-origin:calc(100% - 2rem) 100%;
}
.grimoire-bubble::after { content:''; position:absolute; right:1.4rem; bottom:-.48rem; width:.85rem; height:.85rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#0d1117; transform:rotate(45deg); }
.grimoire-bubble-kicker { display:block; margin-bottom:.35rem; color:var(--amber); font-family:var(--font-serif); font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; }
.grimoire-bubble p { margin:0; color:var(--text); font-family:var(--font-serif); font-size:var(--text-base); line-height:1.4; }
.grimoire-bubble-close { position:absolute; right:.55rem; top:.5rem; display:grid; width:1.8rem; height:1.8rem; place-items:center; border:0; background:transparent; color:var(--muted); }
.grimoire-quest-detail { display:grid; gap:.35rem; margin-top:.75rem; padding-top:.65rem; border-top:1px solid var(--line-faint); }
.grimoire-quest-map { color:var(--text); font-family:var(--font-serif); font-size:var(--text-sm); }
.grimoire-quest-meta { display:flex; flex-wrap:wrap; gap:.4rem .7rem; color:var(--muted); font-size:var(--text-sm); }
.grimoire-quest-detail a { justify-self:start; color:var(--amber); font-family:var(--font-serif); font-size:var(--text-sm); text-decoration:none; }
.grimoire-progress { margin-top:.6rem; color:var(--muted); font-family:var(--font-serif); font-size:var(--text-xs); }
.grimoire-companion.kind-quest .grimoire-spirit { border-color:rgba(197,160,89,.72); box-shadow:0 12px 34px rgba(0,0,0,.42),0 0 32px rgba(197,160,89,.18); }
.grimoire-companion.kind-rare .grimoire-spirit { border-color:rgba(170,145,210,.62); color:#bfa8dd; box-shadow:0 12px 34px rgba(0,0,0,.42),0 0 32px rgba(170,145,210,.2); }
@keyframes grimoirePulse { 0%,100%{transform:scale(.88);opacity:.25} 50%{transform:scale(1.08);opacity:.8} }
@keyframes grimoireOrbit { to{transform:rotate(360deg)} }
@media (max-width:767.98px) {
  .grimoire-companion { right:.75rem; bottom:.75rem; width:calc(100vw - 1.5rem); }
  .grimoire-spirit { width:3.8rem; height:3.8rem; }
  .grimoire-bubble { margin-right:.25rem; }
}
@media (prefers-reduced-motion:reduce) {
  .grimoire-pulse,.grimoire-orbit { animation:none!important; }
}
.grimoire-companion.has-active-quest .grimoire-book::after {
  content:'!';
  position:absolute;
  right:-.7rem;
  bottom:-.35rem;
  display:grid;
  width:1rem;
  height:1rem;
  place-items:center;
  border:1px solid rgba(197,160,89,.55);
  border-radius:50%;
  background:#15120c;
  color:var(--amber);
  font-family:var(--font-title);
  font-size:.65rem;
  box-shadow:0 0 8px rgba(197,160,89,.18);
}

/* WOSU 0.9.1 — provoked grimoire demon escape game. */
.grimoire-demon-icon { display:none; font-size:2rem; line-height:1; filter:drop-shadow(0 0 8px rgba(190,82,120,.45)); }
.grimoire-companion.demon-mode .grimoire-normal-icon,
.grimoire-companion.demon-mode .grimoire-book .bi-stars { display:none; }
.grimoire-companion.demon-mode .grimoire-demon-icon { display:block; }
.grimoire-companion.demon-mode .grimoire-spirit {
  z-index:1095;
  border-color:rgba(190,82,120,.72);
  background:radial-gradient(circle at 42% 35%,rgba(128,58,104,.28),rgba(15,8,17,.96) 68%);
  color:#d6769d;
  box-shadow:0 0 0 1px rgba(255,255,255,.025),0 12px 34px rgba(0,0,0,.5),0 0 34px rgba(190,82,120,.22);
  cursor:crosshair;
}
.grimoire-companion.demon-mode .grimoire-pulse { border-color:rgba(190,82,120,.38); animation-duration:1.15s; }
.grimoire-companion.demon-mode .orbit-a::before { background:#c55b86; box-shadow:0 0 10px rgba(197,91,134,.9); }
.grimoire-companion.demon-mode .orbit-b::before { background:#8f6ac2; box-shadow:0 0 10px rgba(143,106,194,.9); }
.grimoire-flight-spark {
  position:fixed;
  z-index:1090;
  width:.28rem;
  height:.28rem;
  margin:-.14rem 0 0 -.14rem;
  border-radius:45% 55% 60% 40%;
  background:currentColor;
  color:var(--ice);
  box-shadow:0 0 8px currentColor;
  pointer-events:none;
  transform:rotate(45deg);
}
.grimoire-flight-spark:nth-of-type(3n) { color:var(--amber); }
.grimoire-demon-taunt {
  position:fixed;
  z-index:1100;
  max-width:15rem;
  padding:.42rem .68rem;
  border:1px solid rgba(190,82,120,.42);
  border-radius:.45rem;
  background:rgba(16,9,18,.94);
  color:#e5b1c6;
  box-shadow:0 8px 24px rgba(0,0,0,.38),0 0 18px rgba(190,82,120,.12);
  font-family:var(--font-serif);
  font-size:var(--text-sm);
  line-height:1.2;
  text-align:center;
  white-space:normal;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce) {
  .grimoire-companion.demon-mode .grimoire-pulse { animation:none!important; }
  .grimoire-flight-spark { display:none!important; }
}

/* WOSU 0.9.2 — demon rage on successful catches. */
.grimoire-companion.demon-mode .grimoire-spirit {
  transform-origin:center;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.grimoire-companion.demon-mode .grimoire-demon-icon {
  filter:drop-shadow(0 0 calc(8px + var(--demon-rage-level,0) * 2px) rgba(235,75,84,.68));
}
.grimoire-companion.demon-mode .grimoire-spirit {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.025),
    0 12px 34px rgba(0,0,0,.5),
    0 0 calc(34px + var(--demon-rage-level,0) * 5px) rgba(215,67,91,.28);
}
.grimoire-fire-particle {
  position:fixed;
  z-index:1102;
  width:.38rem;
  height:.58rem;
  margin:-.29rem 0 0 -.19rem;
  border-radius:60% 40% 65% 35%;
  background:radial-gradient(circle at 50% 75%,#ffe59a 0 18%,#ff9a42 38%,#d94a46 68%,rgba(112,24,55,.35) 100%);
  box-shadow:0 0 8px rgba(255,123,55,.78),0 0 15px rgba(220,58,68,.38);
  pointer-events:none;
  transform:rotate(45deg);
}
@media (prefers-reduced-motion:reduce) {
  .grimoire-fire-particle { display:none!important; }
}

/* WOSU 0.9.3 — dense readable overview metrics + osu!-inspired score grades. */
body[data-page="overview"] .performance-metric-grid article {
  display:grid;
  gap:.34rem;
  padding:.62rem .85rem .58rem;
}
body[data-page="overview"] .performance-metric-main {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
  min-width:0;
}
body[data-page="overview"] .performance-metric-main > span {
  min-width:0;
  color:var(--muted);
  font-family:var(--font-serif);
  font-size:clamp(.88rem,.76rem + .12vw,1.02rem);
  line-height:1.15;
  white-space:nowrap;
}
body[data-page="overview"] .performance-metric-main > strong {
  margin:0;
  color:var(--text);
  font-family:var(--font-serif);
  font-size:clamp(1.22rem,1.05rem + .22vw,1.55rem);
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}
body[data-page="overview"] .performance-metric-grid .metric-delta {
  display:flex;
  align-items:center;
  gap:.16rem;
  min-width:0;
  margin:0;
  font-size:clamp(.72rem,.65rem + .07vw,.82rem);
  line-height:1.1;
  white-space:nowrap;
}
body[data-page="overview"] .performance-metric-grid .metric-delta i {
  flex:0 0 auto;
  font-size:1rem;
  line-height:.8;
}

body[data-page="overview"] .overview-stat-card {
  min-height:0;
  gap:.72rem;
  padding:.62rem .78rem;
}
body[data-page="overview"] .overview-stat-card > i {
  flex:0 0 2.15rem;
  width:2.15rem;
  height:2.15rem;
  font-size:1rem;
}
body[data-page="overview"] .overview-stat-copy {
  display:flex;
  flex:1 1 auto;
  min-width:0;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
}
body[data-page="overview"] .overview-stat-copy > span {
  margin:0;
  overflow:hidden;
  color:var(--muted);
  font-size:clamp(.86rem,.78rem + .09vw,.98rem);
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-page="overview"] .overview-stat-copy > strong {
  margin:0;
  color:var(--text);
  font-size:clamp(1.18rem,1.05rem + .18vw,1.48rem);
  line-height:1;
  white-space:nowrap;
}

.osu-rank-badge {
  position:relative;
  isolation:isolate;
  width:1.9rem;
  height:1.9rem;
  border-radius:.34rem;
  border-width:1px;
  font-family:var(--font-title);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  text-shadow:0 0 7px currentColor;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 0 10px color-mix(in srgb,currentColor 22%,transparent);
}
.osu-rank-badge::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:3px;
  border-radius:.18rem;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.16),transparent 54%);
  opacity:.85;
}
.rank.osu-rank-badge.rank-x {
  color:#f6d56f;
  border-color:rgba(246,213,111,.58);
  background:linear-gradient(145deg,rgba(104,82,24,.48),rgba(30,25,14,.86));
}
.rank.osu-rank-badge.rank-xh {
  color:#d9f3ff;
  border-color:rgba(198,231,244,.62);
  background:linear-gradient(145deg,rgba(112,145,158,.34),rgba(18,28,34,.9));
}
.rank.osu-rank-badge.rank-s {
  color:#ffd76a;
  border-color:rgba(255,215,106,.5);
  background:linear-gradient(145deg,rgba(100,72,19,.42),rgba(31,24,12,.88));
}
.rank.osu-rank-badge.rank-sh {
  color:#d6ecf6;
  border-color:rgba(204,228,238,.52);
  background:linear-gradient(145deg,rgba(96,126,140,.3),rgba(19,28,33,.9));
}
.rank.osu-rank-badge.rank-a {
  color:#9eea7d;
  border-color:rgba(158,234,125,.48);
  background:linear-gradient(145deg,rgba(52,98,43,.36),rgba(16,34,18,.88));
}
.rank.osu-rank-badge.rank-b {
  color:#6ec9ff;
  border-color:rgba(110,201,255,.46);
  background:linear-gradient(145deg,rgba(31,79,108,.4),rgba(12,28,39,.9));
}
.rank.osu-rank-badge.rank-c {
  color:#d399ff;
  border-color:rgba(211,153,255,.45);
  background:linear-gradient(145deg,rgba(79,43,105,.4),rgba(29,15,38,.9));
}
.rank.osu-rank-badge.rank-d,
.rank.osu-rank-badge.rank-f {
  color:#ff7d8d;
  border-color:rgba(255,125,141,.46);
  background:linear-gradient(145deg,rgba(111,39,51,.4),rgba(40,15,20,.9));
}
tr:hover .osu-rank-badge {
  filter:brightness(1.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),0 0 15px color-mix(in srgb,currentColor 34%,transparent);
}
@media (max-width:767.98px) {
  body[data-page="overview"] .performance-metric-main > span,
  body[data-page="overview"] .performance-metric-main > strong,
  body[data-page="overview"] .performance-metric-grid .metric-delta { white-space:nowrap; }
  body[data-page="overview"] .overview-stat-card { padding:.58rem .65rem; }
  body[data-page="overview"] .overview-stat-card > i { display:grid; }
  body[data-page="overview"] .overview-stat-copy { gap:.4rem; }
}

/* WOSU 0.9.4 — centered Fire Frieren background with a restrained nostalgic veil. */
html {
  min-height:100%;
  background-color:#080a0e;
  background-image:url('/assets/images/fire-frieren-bg.jpeg');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-attachment:fixed;
}
body {
  background-color:rgba(8,10,14,.30);
  background-image:
    radial-gradient(ellipse at 50% 42%,rgba(224,183,124,.055) 0%,rgba(82,59,46,.045) 32%,rgba(8,10,14,.30) 67%,rgba(5,7,10,.64) 100%),
    linear-gradient(180deg,rgba(12,15,20,.20) 0%,rgba(10,11,15,.34) 54%,rgba(7,8,11,.52) 100%),
    repeating-linear-gradient(0deg,rgba(255,239,214,.012) 0 1px,transparent 1px 3px);
  background-attachment:fixed;
  background-blend-mode:normal,normal,soft-light;
}
body::before {
  content:'';
  position:fixed;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 44%,transparent 0 36%,rgba(10,8,9,.08) 58%,rgba(4,5,8,.42) 100%),
    linear-gradient(110deg,rgba(139,92,60,.045),transparent 31%,rgba(181,139,90,.028) 56%,transparent 77%);
  mix-blend-mode:soft-light;
}
body > nav,
body > main,
body > footer { position:relative; z-index:2; }
body > .grimoire-companion { position:fixed; z-index:1060; }
#mana-canvas { z-index:1; }
.ambient { z-index:1; opacity:.10; }

/* Keep the glass surfaces readable while allowing the scene to remain visible. */
body .panel,
body .metric-card,
body .training-card,
body .member-card,
body .callout,
body .filter-panel,
body .profile-hero,
body .detail-hero,
body .highlight-detail-hero,
body .replay-hero,
body .analysis-notice {
  background-color:rgba(13,17,23,.78);
  backdrop-filter:blur(10px) saturate(.88);
}
body .frost-nav {
  background:rgba(7,10,15,.78);
  backdrop-filter:blur(17px) saturate(.86);
}
@media (max-width:767.98px) {
  html { background-position:center center; background-attachment:scroll; }
  body { background-attachment:scroll; }
}
@media (prefers-reduced-motion:reduce) {
  html,body { background-attachment:scroll; }
}


/* WOSU 0.9.6 — overview Progress + Precision rankings. */
.core-ranking-card { min-width:0; padding:.9rem .85rem .75rem; overflow:hidden; }
.core-ranking-head { display:flex; align-items:center; justify-content:space-between; gap:.9rem; min-height:3.15rem; margin-bottom:.35rem; }
.core-ranking-head > div { display:flex; align-items:center; gap:.65rem; min-width:0; }
.core-ranking-head h3 { margin:.08rem 0 0; font-family:var(--font-title); font-size:var(--text-lg); font-weight:400; }
.core-ranking-badge { flex:0 0 auto; padding:.26rem .45rem; border:1px solid var(--line-faint); color:var(--muted); font-family:var(--font-serif); font-size:var(--text-xs); letter-spacing:.06em; }
.core-ranking-list { display:grid; }
.core-ranking-row { display:grid; grid-template-columns:2rem minmax(8rem,1fr) auto; align-items:center; gap:.65rem; min-height:3.2rem; padding:.38rem .2rem; border-top:1px solid var(--line-faint); }
.core-ranking-row:first-child { border-top-color:var(--line); }
.core-ranking-row.rank-player-inactive { opacity:.45; filter:saturate(.35); }
.core-ranking-place { font-family:var(--font-title); color:var(--muted); text-align:center; }
.core-ranking-place.top { color:var(--amber); }
.core-ranking-player { min-width:0; display:flex; align-items:center; gap:.45rem; }
.core-ranking-player a { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.core-ranking-country { color:var(--muted); font-size:var(--text-xs); }
.core-ranking-value { min-width:12rem; text-align:right; }
.core-ranking-value > strong { display:block; font-family:var(--font-title); font-size:var(--text-lg); font-weight:400; color:var(--ice); }
.core-ranking-value > small { display:block; margin-top:.1rem; color:var(--muted); font-family:var(--font-serif); font-size:var(--text-xs); white-space:nowrap; }
.core-ranking-card[data-core-ranking="precision"] .core-ranking-value > strong { color:var(--mint); }
.core-ranking-card footer { margin-top:.35rem; padding:.5rem .2rem 0; border-top:1px solid var(--line-faint); color:var(--muted); font-family:var(--font-serif); font-size:var(--text-xs); line-height:1.3; }
@media (max-width: 575.98px) {
  .core-ranking-row { grid-template-columns:1.7rem minmax(0,1fr) auto; gap:.4rem; }
  .core-ranking-value { min-width:0; }
  .core-ranking-value > small { display:none; }
  .core-ranking-badge { display:none; }
}


/* Personal score history: client-side search and user-controlled sorting. */
body[data-page="scores"] .score-history-tools { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }
body[data-page="scores"] .score-history-search { flex:1 1 34rem; margin:0; }
body[data-page="scores"] .score-history-count { flex:0 0 auto; color:var(--muted); font-family:var(--font-serif); font-size:var(--text-sm); white-space:nowrap; }
body[data-page="scores"] .score-history-count strong { color:var(--text); font-size:var(--text-base); }
body[data-page="scores"] .score-history-list th { padding:0; }
body[data-page="scores"] .score-sort { width:100%; min-height:2.55rem; display:flex; align-items:center; gap:.4rem; padding:.55rem .75rem; border:0; background:transparent; color:var(--muted); font:inherit; font-weight:600; text-align:left; white-space:nowrap; }
body[data-page="scores"] .score-sort:hover, body[data-page="scores"] .score-sort:focus-visible { color:var(--text); background:rgba(255,255,255,.025); }
body[data-page="scores"] .score-sort.active { color:var(--ice); }
body[data-page="scores"] .score-sort i { font-size:.8rem; opacity:.7; }
body[data-page="scores"] .score-history-list tbody tr[hidden] { display:none; }
@media (max-width:767.98px) { body[data-page="scores"] .score-history-tools { align-items:stretch; flex-direction:column; } body[data-page="scores"] .score-history-count { align-self:flex-end; } }

/* Score detail readability + personal attempt history. */
body[data-page="score"] .detail-title > span { font-size:clamp(.9rem,.82rem + .12vw,1.05rem); }
body[data-page="score"] .detail-title h2 { font-size:clamp(2rem,1.55rem + 1.15vw,3.15rem); line-height:1.02; }
body[data-page="score"] .detail-title p { font-size:clamp(.88rem,.8rem + .12vw,1rem); line-height:1.5; }
body[data-page="score"] .score-hero-rank { flex-basis:5.3rem; width:5.3rem; height:5.3rem; font-size:1.7rem; }
body[data-page="score"] .profile-metric { min-height:5.75rem; padding:1.05rem 1.1rem; }
body[data-page="score"] .profile-metric strong { font-size:clamp(1.12rem,1.02rem + .2vw,1.35rem); line-height:1.15; }
body[data-page="score"] .profile-metric span { margin-top:.48rem; font-size:clamp(.78rem,.73rem + .08vw,.88rem); }
body[data-page="score"] .panel-head h2 { font-size:clamp(1.25rem,1.1rem + .28vw,1.55rem); }
body[data-page="score"] .panel-head .section-kicker { font-size:.76rem; }
body[data-page="score"] .hit-row, body[data-page="score"] .detail-grid > div, body[data-page="score"] .requirement-list article { font-size:.94rem; }
body[data-page="score"] .detail-grid strong, body[data-page="score"] .hit-row strong { font-size:1rem; }

body[data-page="score"] .score-attempt-history { padding:1.2rem; overflow:visible; }
body[data-page="score"] .score-attempt-history::before { right:4%; width:24rem; height:13rem; opacity:.7; }
body[data-page="score"] .score-attempt-history-head { align-items:flex-end; margin-bottom:1rem; padding-bottom:.9rem; border-bottom:1px solid var(--line); }
body[data-page="score"] .score-attempt-history-head h2 { margin:.2rem 0 .25rem; font-size:clamp(1.35rem,1.15rem + .45vw,1.8rem); }
body[data-page="score"] .score-attempt-history-head p { margin:0; color:var(--muted); font-size:.9rem; }
body[data-page="score"] .score-attempt-count { display:flex; align-items:baseline; gap:.45rem; color:var(--muted); font-family:var(--font-serif); font-size:.85rem; white-space:nowrap; }
body[data-page="score"] .score-attempt-count strong { color:var(--amber); font-size:1.55rem; font-weight:600; }
body[data-page="score"] .score-attempt-list { display:grid; gap:.55rem; }
body[data-page="score"] .score-attempt-row { position:relative; display:grid; grid-template-columns:minmax(11rem,1.45fr) 4rem repeat(5,minmax(5rem,.72fr)) minmax(7rem,.9fr) 2.7rem; align-items:stretch; min-height:5.25rem; overflow:hidden; border:1px solid var(--line-faint); background:linear-gradient(90deg,rgba(255,255,255,.018),rgba(136,160,192,.018)); cursor:pointer; outline:none; transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease; }
body[data-page="score"] .score-attempt-row:hover, body[data-page="score"] .score-attempt-row:focus-visible { border-color:rgba(136,160,192,.38); background:linear-gradient(90deg,rgba(136,160,192,.075),rgba(197,160,89,.035)); box-shadow:0 8px 22px rgba(0,0,0,.22); transform:translateY(-1px); }
body[data-page="score"] .score-attempt-row.selected { border-color:rgba(197,160,89,.52); background:linear-gradient(90deg,rgba(197,160,89,.11),rgba(136,160,192,.035)); box-shadow:inset 3px 0 var(--amber),0 8px 24px rgba(0,0,0,.2); }
body[data-page="score"] .score-attempt-date, body[data-page="score"] .score-attempt-stat, body[data-page="score"] .score-attempt-replay, body[data-page="score"] .score-attempt-grade { display:flex; min-width:0; flex-direction:column; justify-content:center; padding:.75rem .85rem; border-right:1px solid var(--line-faint); }
body[data-page="score"] .score-attempt-date { gap:.14rem; }
body[data-page="score"] .score-attempt-date > span, body[data-page="score"] .score-attempt-stat > span, body[data-page="score"] .score-attempt-replay > span { color:var(--muted); font-family:var(--font-serif); font-size:.7rem; letter-spacing:.035em; }
body[data-page="score"] .score-attempt-date > strong { color:var(--text); font-family:var(--font-serif); font-size:1rem; font-weight:600; white-space:nowrap; }
body[data-page="score"] .score-attempt-date .selected-score-marker { margin-top:.18rem; font-size:.59rem; }
body[data-page="score"] .score-attempt-grade { align-items:center; padding-inline:.4rem; }
body[data-page="score"] .score-attempt-rank { width:2.65rem; height:2.65rem; font-size:.92rem; }
body[data-page="score"] .score-attempt-stat { gap:.18rem; }
body[data-page="score"] .score-attempt-stat > strong:not(.mod-badge) { color:var(--text); font-family:var(--font-serif); font-size:1.08rem; font-weight:600; white-space:nowrap; }
body[data-page="score"] .score-attempt-stat.score-attempt-mods { align-items:flex-start; }
body[data-page="score"] .score-attempt-mods .mod-badge { margin-top:.08rem; font-size:.76rem; }
body[data-page="score"] .score-attempt-replay { gap:.25rem; }
body[data-page="score"] .score-attempt-replay .status { width:max-content; max-width:100%; font-size:.69rem; }
body[data-page="score"] .score-attempt-row .score-history-open { align-self:center; justify-self:center; width:2rem; height:2rem; }

@media (max-width:1399.98px) {
  body[data-page="score"] .score-attempt-row { grid-template-columns:minmax(10.5rem,1.35fr) 3.7rem repeat(3,minmax(5.25rem,.8fr)) minmax(6rem,.8fr) 2.7rem; }
  body[data-page="score"] .score-attempt-row .score-attempt-stat:nth-of-type(6), body[data-page="score"] .score-attempt-replay { display:none; }
}
@media (max-width:991.98px) {
  body[data-page="score"] .score-attempt-history { padding:.85rem; }
  body[data-page="score"] .score-attempt-history-head { align-items:flex-start; flex-direction:column; }
  body[data-page="score"] .score-attempt-row { grid-template-columns:minmax(9.5rem,1.35fr) 3.6rem repeat(2,minmax(5.25rem,.8fr)) 2.6rem; }
  body[data-page="score"] .score-attempt-row .score-attempt-stat:nth-of-type(n+5) { display:none; }
}
@media (max-width:575.98px) {
  body[data-page="score"] .score-attempt-history { overflow:hidden; }
  body[data-page="score"] .score-hero-rank { flex-basis:4.2rem; width:4.2rem; height:4.2rem; font-size:1.4rem; }
  body[data-page="score"] .score-attempt-row { grid-template-columns:minmax(0,1fr) 3.5rem 5.4rem 2.5rem; min-height:4.9rem; }
  body[data-page="score"] .score-attempt-row .score-attempt-stat { display:none; }
  body[data-page="score"] .score-attempt-row .score-attempt-stat:nth-of-type(3) { display:flex; }
  body[data-page="score"] .score-attempt-date { padding-inline:.65rem; }
  body[data-page="score"] .score-attempt-date > strong { font-size:.88rem; white-space:normal; }
}

/* Score detail is already its own contextual hero; do not duplicate the generic page hero above it. */
body[data-page="score"] .score-detail-main { padding-top:1.5rem !important; }
body[data-page="score"] .detail-hero { min-height:12.5rem; }
body[data-page="score"] .detail-content { padding:1.35rem 1.55rem; gap:1.15rem; }
body[data-page="score"] .detail-title > span { font-size:.82rem; }
body[data-page="score"] .detail-title h2 { font-size:clamp(1.7rem,1.4rem + .75vw,2.4rem); line-height:1.06; letter-spacing:.015em; }
body[data-page="score"] .detail-title p { font-size:.82rem; line-height:1.45; }
body[data-page="score"] .score-hero-rank { flex-basis:4.4rem; width:4.4rem; height:4.4rem; font-size:1.35rem; }
body[data-page="score"] .profile-metric { min-height:4.8rem; padding:.85rem .95rem; }
body[data-page="score"] .profile-metric strong { font-size:clamp(1rem,.94rem + .14vw,1.16rem); }
body[data-page="score"] .profile-metric span { margin-top:.34rem; font-size:clamp(.72rem,.69rem + .05vw,.8rem); }
body[data-page="score"] .panel-head h2 { font-size:clamp(1.15rem,1.06rem + .18vw,1.35rem); }
body[data-page="score"] .panel-head .section-kicker { font-size:.68rem; }
body[data-page="score"] .hit-row, body[data-page="score"] .detail-grid > div, body[data-page="score"] .requirement-list article { font-size:.88rem; }
body[data-page="score"] .detail-grid strong, body[data-page="score"] .hit-row strong { font-size:.94rem; }
@media (max-width:767.98px) { body[data-page="score"] .score-detail-main { padding-top:.8rem !important; } body[data-page="score"] .detail-content { padding:1rem; } }

/* Replay analysis belongs to the selected score attempt, directly below its personal history. */
body[data-page="score"] .score-replay-entry { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; padding:1rem 1.1rem; border:1px solid var(--line); background:linear-gradient(90deg,rgba(136,160,192,.045),rgba(197,160,89,.025)),var(--surface); box-shadow:0 10px 30px rgba(0,0,0,.2); }
body[data-page="score"] .score-replay-entry-copy { min-width:0; }
body[data-page="score"] .score-replay-entry-copy > div { display:flex; align-items:center; gap:.55rem; margin-top:.22rem; min-width:0; }
body[data-page="score"] .score-replay-entry-copy > div > i { color:var(--amber); font-size:1.05rem; }
body[data-page="score"] .score-replay-entry-copy strong { color:var(--text); font-family:var(--font-serif); font-size:1rem; font-weight:600; }
body[data-page="score"] .score-replay-entry-copy span:not(.section-kicker) { overflow:hidden; color:var(--muted); font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
body[data-page="score"] .score-replay-entry-actions { display:flex; align-items:center; gap:.65rem; flex:0 0 auto; }
@media (max-width:767.98px) { body[data-page="score"] .score-replay-entry { align-items:flex-start; flex-direction:column; } body[data-page="score"] .score-replay-entry-copy > div { align-items:flex-start; flex-wrap:wrap; } body[data-page="score"] .score-replay-entry-copy span:not(.section-kicker) { width:100%; white-space:normal; } body[data-page="score"] .score-replay-entry-actions { width:100%; justify-content:space-between; } }

body[data-page="replay"] .archive-container { padding-top:1.5rem !important; }

/* Replay analysis is embedded in the selected score detail; there is no separate replay page in the UI. */
body[data-page="score"] .score-inline-replay { scroll-margin-top:6rem; }
body[data-page="score"] .score-inline-replay-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem; padding:1rem 1.1rem; border:1px solid var(--line); background:linear-gradient(90deg,rgba(136,160,192,.055),rgba(197,160,89,.028)),var(--surface); box-shadow:0 10px 30px rgba(0,0,0,.2); }
body[data-page="score"] .score-inline-replay-head h2 { margin:.15rem 0 .2rem; font-family:var(--font-title); font-size:clamp(1.25rem,1.08rem + .35vw,1.6rem); font-weight:400; }
body[data-page="score"] .score-inline-replay-head p { margin:0; color:var(--muted); font-family:var(--font-serif); font-size:.8rem; }
body[data-page="score"] .score-inline-replay > .analysis-notice { margin-top:0; }
@media (max-width:767.98px) { body[data-page="score"] .score-inline-replay-head { align-items:flex-start; flex-direction:column; } }

/* Score attempts switch the selected score in place; navigation and page chrome stay mounted. */
body[data-page="score"] [data-score-detail-dynamic] { transition:opacity .16s ease,filter .16s ease; }
body[data-page="score"] [data-score-detail-dynamic].is-loading { opacity:.62; filter:saturate(.82); pointer-events:none; }


/* Map detail owns its own hero and exposes the per-difficulty LOSU skill profile. */
body[data-page="map"] .archive-container { padding-top:1.5rem !important; }
body[data-page="map"] .map-skill-profile { padding:1.15rem; }
body[data-page="map"] .map-skill-profile-head { align-items:flex-end; margin-bottom:1rem; padding-bottom:.85rem; border-bottom:1px solid var(--line); }
body[data-page="map"] .map-skill-profile-head h2 { margin:.18rem 0 .22rem; font-family:var(--font-title); font-size:clamp(1.3rem,1.12rem + .36vw,1.65rem); font-weight:400; }
body[data-page="map"] .map-skill-profile-head p { margin:0; color:var(--muted); font-family:var(--font-serif); font-size:.8rem; }
body[data-page="map"] .map-skill-profile-state { display:flex; align-items:flex-end; flex-direction:column; gap:.35rem; }
body[data-page="map"] .map-skill-profile-state small { color:var(--muted); font-family:var(--font-serif); font-size:.72rem; }
body[data-page="map"] .map-skill-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
body[data-page="map"] .map-skill-card { min-width:0; padding:.95rem; border:1px solid var(--line-faint); background:linear-gradient(145deg,rgba(136,160,192,.045),rgba(197,160,89,.018)); }
body[data-page="map"] .map-skill-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; }
body[data-page="map"] .map-skill-card-head > div { min-width:0; }
body[data-page="map"] .map-skill-card-head span { display:block; overflow:hidden; color:var(--muted); font-size:.64rem; letter-spacing:.06em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
body[data-page="map"] .map-skill-card-head strong { display:block; margin-top:.18rem; color:var(--text); font-family:var(--font-serif); font-size:1rem; font-weight:600; }
body[data-page="map"] .map-skill-card-head b { flex:0 0 auto; color:var(--amber); font-family:var(--font-title); font-size:1.35rem; font-weight:400; }
body[data-page="map"] .map-skill-card-head b small { color:var(--muted); font-family:var(--font-serif); font-size:.62rem; }
body[data-page="map"] .map-skill-track { height:5px; margin:.75rem 0; overflow:hidden; background:rgba(255,255,255,.035); }
body[data-page="map"] .map-skill-track i { display:block; height:100%; background:linear-gradient(90deg,var(--ice),var(--amber)); box-shadow:0 0 10px rgba(197,160,89,.18); }
body[data-page="map"] .map-skill-card p { min-height:2.4em; margin:0 0 .7rem; color:var(--muted); font-size:.74rem; line-height:1.45; }
body[data-page="map"] .map-skill-card footer { display:flex; justify-content:space-between; gap:.6rem; color:#8390a1; font-size:.66rem; }
@media (max-width:991.98px) { body[data-page="map"] .map-skill-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:575.98px) { body[data-page="map"] .map-skill-profile-head { align-items:flex-start; flex-direction:column; } body[data-page="map"] .map-skill-profile-state { align-items:flex-start; } body[data-page="map"] .map-skill-grid { grid-template-columns:1fr; } }


/* Map Browser owns its compact title; wheel interaction is intentionally limited to the map wall. */
body[data-page="library"] .archive-container { padding-top:1.5rem !important; }
body[data-page="library"] .filter-panel { margin-top:0; }
body[data-page="library"] .map-browser-head { padding-top:.75rem; padding-bottom:.65rem; }
body[data-page="library"] .map-browser-head h2 { margin:.12rem 0 0; font-size:clamp(1.15rem,1.02rem + .22vw,1.4rem); }

/* WOSU 0.10.15 — player-defined Map Browser filters. */
body[data-page="library"] .map-filter-panel { padding:.85rem 1rem; }
body[data-page="library"] .map-filter-search-row { display:grid; grid-template-columns:minmax(16rem,1fr) auto auto; gap:.65rem; align-items:center; }
body[data-page="library"] .map-filter-search { min-width:0; }
body[data-page="library"] .map-filter-ranges { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin-top:.7rem; }
body[data-page="library"] .map-filter-range { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:end; gap:.4rem; min-width:0; margin:0; padding:.55rem .65rem .65rem; border:1px solid var(--line-faint); }
body[data-page="library"] .map-filter-range legend { float:none; width:auto; margin:0 0 .35rem; padding:0 .2rem; color:var(--muted); font-family:var(--font-serif); font-size:.68rem; line-height:1; }
body[data-page="library"] .map-filter-range label { min-width:0; }
body[data-page="library"] .map-filter-range label span { display:block; margin-bottom:.22rem; color:#7f8998; font-size:.62rem; }
body[data-page="library"] .map-filter-range > span { align-self:center; padding-top:1rem; color:var(--muted); }
body[data-page="library"] .map-filter-range .form-control { min-width:0; height:2rem; padding:.3rem .5rem; font-size:.78rem; }
body[data-page="library"] .map-filter-options { display:flex; align-items:center; gap:.55rem 1rem; flex-wrap:wrap; margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--line-faint); }
body[data-page="library"] .map-filter-statuses { display:flex; gap:.35rem; flex-wrap:wrap; }
body[data-page="library"] .map-filter-check { position:relative; margin:0; cursor:pointer; }
body[data-page="library"] .map-filter-check input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
body[data-page="library"] .map-filter-check span { display:inline-flex; min-height:1.9rem; align-items:center; gap:.35rem; padding:.3rem .52rem; color:var(--muted); background:rgba(255,255,255,.018); border:1px solid var(--line-faint); font-family:var(--font-serif); font-size:.68rem; transition:color .15s ease,border-color .15s ease,background .15s ease; }
body[data-page="library"] .map-filter-check:hover span { color:var(--text); border-color:var(--line); }
body[data-page="library"] .map-filter-check input:focus-visible + span { outline:1px solid var(--amber); outline-offset:2px; }
body[data-page="library"] .map-filter-check input:checked + span { color:var(--amber); background:rgba(197,160,89,.07); border-color:rgba(197,160,89,.36); }
body[data-page="library"] .map-filter-personal input:checked + span { color:var(--mint); background:rgba(105,221,189,.06); border-color:rgba(105,221,189,.28); }
body[data-page="library"] .map-filter-active { margin-left:auto; color:var(--muted); font-family:var(--font-serif); font-size:.68rem; white-space:nowrap; }
body[data-page="library"] .map-card-status { color:var(--amber); }
body[data-page="library"] .map-card-played { color:var(--mint); }
@media (max-width:991.98px) {
  body[data-page="library"] .map-filter-search-row { grid-template-columns:minmax(0,1fr) auto; }
  body[data-page="library"] .map-filter-search { grid-column:1 / -1; }
  body[data-page="library"] .map-filter-ranges { grid-template-columns:1fr; }
  body[data-page="library"] .map-filter-active { width:100%; margin-left:0; }
}
@media (max-width:575.98px) {
  body[data-page="library"] .map-filter-panel { padding:.7rem; }
  body[data-page="library"] .map-filter-search-row { grid-template-columns:1fr 1fr; }
  body[data-page="library"] .map-filter-search-row .btn { min-width:0; padding-inline:.5rem; }
  body[data-page="library"] .map-filter-options { align-items:stretch; flex-direction:column; }
  body[data-page="library"] .map-filter-statuses { width:100%; }
  body[data-page="library"] .map-filter-check span { justify-content:center; }
  body[data-page="library"] .map-filter-personal span { width:100%; }
}


/* WOSU 0.10.16 — keep numeric Map Browser filters out of the way until requested. */
body[data-page="library"] .map-filter-more { position:relative; }
body[data-page="library"] .map-filter-more > summary { display:inline-flex; min-height:1.9rem; align-items:center; gap:.4rem; padding:.3rem .55rem; color:var(--muted); background:rgba(255,255,255,.018); border:1px solid var(--line-faint); cursor:pointer; list-style:none; font-family:var(--font-serif); font-size:.68rem; user-select:none; }
body[data-page="library"] .map-filter-more > summary::-webkit-details-marker { display:none; }
body[data-page="library"] .map-filter-more > summary::after { content:'+'; margin-left:.15rem; color:var(--amber); font-family:var(--font-mono); }
body[data-page="library"] .map-filter-more[open] > summary { color:var(--amber); border-color:rgba(197,160,89,.36); background:rgba(197,160,89,.055); }
body[data-page="library"] .map-filter-more[open] > summary::after { content:'−'; }
body[data-page="library"] .map-filter-more > summary small { padding:.08rem .3rem; color:var(--mint); border:1px solid rgba(105,221,189,.22); font-size:.58rem; }
body[data-page="library"] .map-filter-more .map-filter-ranges { position:absolute; top:calc(100% + .45rem); left:0; z-index:30; width:min(52rem,calc(100vw - 4rem)); margin-top:0; padding:.65rem; background:rgba(13,17,22,.985); border:1px solid var(--line); box-shadow:0 16px 40px rgba(0,0,0,.48); }
body[data-page="library"] .map-filter-more:not([open]) .map-filter-ranges { display:none; }
@media (max-width:991.98px) { body[data-page="library"] .map-filter-more { width:auto; } body[data-page="library"] .map-filter-more .map-filter-ranges { left:auto; right:0; grid-template-columns:1fr; width:min(24rem,calc(100vw - 2rem)); } }
@media (max-width:575.98px) { body[data-page="library"] .map-filter-more { width:100%; } body[data-page="library"] .map-filter-more > summary { width:100%; justify-content:center; } body[data-page="library"] .map-filter-more .map-filter-ranges { position:static; width:100%; margin-top:.45rem; box-shadow:none; } }


/* WOSU 0.10.17 — keep the numeric filter popover inside the filter surface and above the map wall. */
body[data-page="library"] .map-filter-panel { z-index:40; overflow:visible; }
body[data-page="library"] .map-browser { z-index:1; }
body[data-page="library"] .map-filter-more .map-filter-ranges { left:auto; right:0; z-index:60; }
/* Anchor the desktop/tablet numeric popover to the whole filter panel, not the trigger chip. */
body[data-page="library"] .map-filter-more { position:static; }
body[data-page="library"] .map-filter-more .map-filter-ranges { top:calc(100% + .45rem); left:auto; right:1rem; width:min(52rem,calc(100% - 2rem)); }
@media (max-width:991.98px) { body[data-page="library"] .map-filter-more .map-filter-ranges { left:auto; right:1rem; width:min(24rem,calc(100% - 2rem)); } }
@media (max-width:575.98px) { body[data-page="library"] .map-filter-more .map-filter-ranges { position:static; width:100%; } }


/* WOSU 0.10.23 — centralized Map Browser interaction polish. */
body[data-page="library"] .map-loop-card { transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease; }
body[data-page="library"] .map-card-cover-link { color:inherit; text-decoration:none; }
body[data-page="library"] .map-card-cover-link img { transition:filter .18s ease,opacity .18s ease; }
@media (hover:hover) and (pointer:fine) {
  body[data-page="library"] .map-loop-card:hover,
  body[data-page="library"] .map-loop-card:focus-within { border-color:rgba(197,160,89,.28); background-color:rgba(18,23,31,.86); box-shadow:0 10px 26px rgba(0,0,0,.3); }
  body[data-page="library"] .map-loop-card:hover .map-card-cover-link img,
  body[data-page="library"] .map-loop-card:focus-within .map-card-cover-link img { filter:brightness(1.055); }
}
body[data-page="library"] .map-browser-help-mobile { display:none; }
@media (max-width:767.98px) {
  body[data-page="library"] .map-browser-pause,
  body[data-page="library"] .map-browser-help-desktop { display:none; }
  body[data-page="library"] .map-browser-help-mobile { display:inline-flex; align-items:center; gap:.35rem; }
}

/* WOSU 0.10.24 — personal Progress page. */
body[data-page="analytics"] .progress-hero { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem 1.4rem; border:1px solid var(--line); background:linear-gradient(120deg,rgba(136,160,192,.055),rgba(197,160,89,.035)),var(--surface); box-shadow:0 10px 30px rgba(0,0,0,.32); }
body[data-page="analytics"] .progress-identity { display:flex; align-items:center; gap:1rem; min-width:0; }
body[data-page="analytics"] .progress-avatar { width:4.4rem; height:4.4rem; flex:0 0 4.4rem; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(212,175,55,.26); background:rgba(136,160,192,.06); }
body[data-page="analytics"] .progress-avatar img { width:100%; height:100%; object-fit:cover; }
body[data-page="analytics"] .progress-avatar > i { font-size:1.6rem; color:var(--amber); }
body[data-page="analytics"] .progress-identity h2 { margin:.18rem 0 .25rem; font-size:clamp(1.5rem,1.2rem + .7vw,2.1rem); font-family:var(--font-serif); }
body[data-page="analytics"] .progress-identity p { margin:0; max-width:46rem; color:var(--muted); font-size:.82rem; }
body[data-page="analytics"] .progress-skill-score { min-width:15rem; padding-left:1.25rem; border-left:1px solid var(--line); text-align:right; }
body[data-page="analytics"] .progress-skill-score > span,body[data-page="analytics"] .progress-skill-score > small { display:block; color:var(--muted); }
body[data-page="analytics"] .progress-skill-score > span { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
body[data-page="analytics"] .progress-skill-score > strong { display:block; margin:.05rem 0; font-size:clamp(2rem,1.6rem + 1vw,3rem); line-height:1; font-family:var(--font-serif); color:var(--text); }
body[data-page="analytics"] .progress-skill-score > small { margin-top:.45rem; font-size:.68rem; }
body[data-page="analytics"] .progress-metric { position:relative; min-height:6.1rem; padding:1rem 1rem .9rem; overflow:hidden; }
body[data-page="analytics"] .progress-metric > i { position:absolute; right:.8rem; top:.75rem; color:rgba(197,160,89,.34); font-size:1.05rem; }
body[data-page="analytics"] .progress-metric strong { padding-right:1.2rem; font-size:clamp(1.05rem,.98rem + .2vw,1.3rem); }
body[data-page="analytics"] .progress-metric span { margin-top:.5rem; font-size:.74rem; }
body[data-page="analytics"] .progress-encouragement { position:relative; isolation:isolate; display:flex; align-items:flex-start; gap:.9rem; overflow:hidden; padding:1.05rem 1.2rem; border:1px solid rgba(197,160,89,.2); background:linear-gradient(90deg,rgba(197,160,89,.035),rgba(136,160,192,.018)),rgba(8,12,18,.88); box-shadow:0 8px 24px rgba(0,0,0,.24); backdrop-filter:blur(6px); }
body[data-page="analytics"] .progress-encouragement::before { content:''; position:absolute; z-index:0; inset:-20% -35%; pointer-events:none; opacity:0; background:linear-gradient(105deg,transparent 38%,rgba(230,223,211,.045) 48%,rgba(197,160,89,.055) 52%,transparent 62%); transform:translateX(-55%); animation:progress-encouragement-glint 10s ease-in-out infinite; }
body[data-page="analytics"] .progress-encouragement > * { position:relative; z-index:1; }
body[data-page="analytics"] .progress-encouragement > i { margin-top:.08rem; color:var(--amber); font-size:1rem; }
body[data-page="analytics"] .progress-encouragement strong { display:block; font-family:var(--font-serif); font-size:.92rem; font-weight:600; }
body[data-page="analytics"] .progress-encouragement p { margin:.28rem 0 0; color:var(--muted); font-size:.76rem; line-height:1.55; }
@keyframes progress-encouragement-glint {
  0%,72%,100% { opacity:0; transform:translateX(-55%); }
  76% { opacity:.7; }
  88% { opacity:.7; transform:translateX(55%); }
  92% { opacity:0; transform:translateX(55%); }
}
@media (prefers-reduced-motion:reduce) { body[data-page="analytics"] .progress-encouragement::before { animation:none; } }
body[data-page="analytics"] .progress-chart-panel { overflow:hidden; }
body[data-page="analytics"] .progress-chart { min-height:14rem; padding:.15rem .7rem .4rem; }
body[data-page="analytics"] .progress-chart svg { display:block; width:100%; height:14rem; overflow:visible; }
body[data-page="analytics"] .progress-chart .chart-grid { stroke:rgba(136,160,192,.11); stroke-width:1; }
body[data-page="analytics"] .progress-chart .chart-axis-label { fill:var(--muted); font-size:10px; }
body[data-page="analytics"] .progress-chart .chart-area { fill:rgba(197,160,89,.075); }
body[data-page="analytics"] .progress-chart .chart-line { fill:none; stroke:rgba(230,223,211,.9); stroke-width:2; vector-effect:non-scaling-stroke; }
body[data-page="analytics"] .progress-chart .chart-point { fill:var(--amber); stroke:rgba(16,20,27,.9); stroke-width:1.5; }
body[data-page="analytics"] .progress-chart .chart-bar { fill:rgba(197,160,89,.46); }
body[data-page="analytics"] .progress-chart .chart-bar-latest { fill:rgba(230,223,211,.84); }
body[data-page="analytics"] .progress-chart-empty { height:14rem; display:grid; place-items:center; color:var(--muted); font-size:.76rem; }
body[data-page="analytics"] .progress-chart-foot { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-chart-foot > span { padding:.7rem .9rem; color:var(--muted); font-size:.68rem; text-align:center; }
body[data-page="analytics"] .progress-chart-foot > span + span { border-left:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-chart-foot strong { margin-left:.25rem; color:var(--text); font-family:var(--font-serif); font-weight:600; }
body[data-page="analytics"] .progress-skill-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
body[data-page="analytics"] .progress-skill-card { padding:1rem; overflow:hidden; }
body[data-page="analytics"] .progress-skill-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; }
body[data-page="analytics"] .progress-skill-card-head span,body[data-page="analytics"] .progress-skill-card-head small { display:block; }
body[data-page="analytics"] .progress-skill-card-head span { font-family:var(--font-serif); font-size:.88rem; font-weight:600; }
body[data-page="analytics"] .progress-skill-card-head div small { margin-top:.22rem; color:var(--muted); font-size:.64rem; }
body[data-page="analytics"] .progress-skill-card-head > strong { font-family:var(--font-serif); font-size:1.35rem; line-height:1; }
body[data-page="analytics"] .progress-skill-card-head > strong small { display:inline; margin-left:.12rem; color:var(--muted); font-size:.62rem; }
body[data-page="analytics"] .progress-skill-track,body[data-page="analytics"] .progress-mini-track,body[data-page="analytics"] .progress-plan-track { height:.34rem; overflow:hidden; background:rgba(136,160,192,.07); }
body[data-page="analytics"] .progress-skill-track { margin:.8rem 0 .55rem; }
body[data-page="analytics"] .progress-skill-track i,body[data-page="analytics"] .progress-mini-track i,body[data-page="analytics"] .progress-plan-track i { display:block; height:100%; background:linear-gradient(90deg,rgba(197,160,89,.5),rgba(230,223,211,.88)); }
body[data-page="analytics"] .progress-skill-card footer { padding-top:.55rem; border-top:1px solid var(--line-faint); color:var(--muted); font-size:.62rem; }
body[data-page="analytics"] .progress-rank-list,body[data-page="analytics"] .progress-distribution-list,body[data-page="analytics"] .progress-training-fields { padding:0 .9rem .9rem; }
body[data-page="analytics"] .progress-rank-list article,body[data-page="analytics"] .progress-distribution-list article { display:grid; grid-template-columns:3.1rem minmax(0,1fr) 4.4rem; align-items:center; gap:.7rem; min-height:2.65rem; border-top:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-rank-list article > strong,body[data-page="analytics"] .progress-distribution-list article > strong { text-align:right; font-family:var(--font-serif); font-size:.74rem; }
body[data-page="analytics"] .progress-rank-list article > strong small { display:block; color:var(--muted); font-size:.55rem; font-weight:400; }
body[data-page="analytics"] .progress-distribution-list article > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:.68rem; }
body[data-page="analytics"] .progress-plan-summary { padding:0 1rem 1rem; }
body[data-page="analytics"] .progress-plan-summary > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.2rem 0 .55rem; color:var(--muted); font-size:.72rem; }
body[data-page="analytics"] .progress-plan-summary > div:first-child strong { color:var(--text); font-family:var(--font-serif); }
body[data-page="analytics"] .progress-plan-track { height:.45rem; }
body[data-page="analytics"] .progress-plan-stats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:1rem; border:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-plan-stats > span { padding:.75rem; text-align:center; }
body[data-page="analytics"] .progress-plan-stats > span + span { border-left:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-plan-stats strong,body[data-page="analytics"] .progress-plan-stats small { display:block; }
body[data-page="analytics"] .progress-plan-stats strong { font-family:var(--font-serif); font-size:1rem; }
body[data-page="analytics"] .progress-plan-stats small { margin-top:.18rem; color:var(--muted); font-size:.61rem; }
body[data-page="analytics"] .progress-focus { margin-top:1rem; }
body[data-page="analytics"] .progress-focus > span { display:block; margin-bottom:.45rem; color:var(--muted); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }
body[data-page="analytics"] .progress-focus > div { display:flex; flex-wrap:wrap; gap:.45rem; }
body[data-page="analytics"] .progress-focus > div > span { padding:.45rem .6rem; border:1px solid rgba(197,160,89,.18); background:rgba(197,160,89,.035); font-family:var(--font-serif); font-size:.72rem; }
body[data-page="analytics"] .progress-focus small { margin-left:.3rem; color:var(--muted); font-size:.58rem; }
body[data-page="analytics"] .progress-training-fields article { display:grid; grid-template-columns:2rem minmax(0,1fr) auto; align-items:center; gap:.65rem; padding:.72rem .15rem; border-top:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-training-fields article > span:first-child { color:var(--amber); font-size:.68rem; font-weight:700; text-align:center; }
body[data-page="analytics"] .progress-training-fields strong,body[data-page="analytics"] .progress-training-fields small { display:block; }
body[data-page="analytics"] .progress-training-fields strong { font-size:.76rem; }
body[data-page="analytics"] .progress-training-fields small { margin-top:.15rem; color:var(--muted); font-size:.6rem; }
@media (max-width:991.98px) {
  body[data-page="analytics"] .progress-hero { align-items:flex-start; }
  body[data-page="analytics"] .progress-skill-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767.98px) {
  body[data-page="analytics"] .progress-hero { display:block; padding:1rem; }
  body[data-page="analytics"] .progress-avatar { width:3.7rem; height:3.7rem; flex-basis:3.7rem; }
  body[data-page="analytics"] .progress-identity p { font-size:.73rem; }
  body[data-page="analytics"] .progress-skill-score { min-width:0; margin-top:1rem; padding:1rem 0 0; border-top:1px solid var(--line); border-left:0; text-align:left; }
  body[data-page="analytics"] .progress-skill-score > strong { font-size:2rem; }
  body[data-page="analytics"] .progress-encouragement { padding:.9rem; }
  body[data-page="analytics"] .progress-encouragement p { font-size:.7rem; }
  body[data-page="analytics"] .progress-chart { min-height:12rem; padding:0 .15rem .25rem; }
  body[data-page="analytics"] .progress-chart svg { height:12rem; }
  body[data-page="analytics"] .progress-chart-foot { grid-template-columns:1fr; }
  body[data-page="analytics"] .progress-chart-foot > span { display:flex; justify-content:space-between; text-align:left; }
  body[data-page="analytics"] .progress-chart-foot > span + span { border-top:1px solid var(--line-faint); border-left:0; }
  body[data-page="analytics"] .progress-skill-grid { grid-template-columns:1fr; }
  body[data-page="analytics"] .progress-plan-stats { grid-template-columns:1fr; }
  body[data-page="analytics"] .progress-plan-stats > span { display:flex; align-items:center; justify-content:space-between; }
  body[data-page="analytics"] .progress-plan-stats > span + span { border-top:1px solid var(--line-faint); border-left:0; }
}

/* WOSU 0.10.25 — clearer personal mod distribution without visual noise. */
body[data-page="analytics"] .progress-mod-list .progress-mod-row {
  grid-template-columns:4.35rem minmax(0,1fr) 4.1rem;
  min-height:3rem;
  padding:.15rem .3rem;
  margin:0 -.3rem;
  transition:background .18s ease,border-color .18s ease;
}
body[data-page="analytics"] .progress-mod-list .progress-mod-row:hover {
  background:linear-gradient(90deg,rgba(197,160,89,.045),rgba(136,160,192,.018));
}
body[data-page="analytics"] .progress-mod-badge {
  min-width:3.85rem;
  min-height:1.85rem;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:.38rem;
  padding:.34rem .48rem;
  color:var(--text);
  background:linear-gradient(135deg,rgba(136,160,192,.11),rgba(197,160,89,.035));
  border-color:rgba(136,160,192,.27);
  font-family:var(--font-serif);
  font-size:.69rem;
  letter-spacing:.02em;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
body[data-page="analytics"] .progress-mod-badge i {
  color:var(--amber);
  font-size:.64rem;
  opacity:.68;
}
body[data-page="analytics"] .progress-mod-badge b { font-weight:600; }
body[data-page="analytics"] .progress-mod-row:hover .progress-mod-badge {
  color:var(--text);
  background:linear-gradient(135deg,rgba(197,160,89,.09),rgba(136,160,192,.075));
  border-color:rgba(197,160,89,.3);
}
body[data-page="analytics"] .progress-mod-track {
  position:relative;
  height:.42rem;
  background:linear-gradient(90deg,rgba(136,160,192,.075),rgba(136,160,192,.035));
}
body[data-page="analytics"] .progress-mod-track i {
  background:linear-gradient(90deg,rgba(197,160,89,.62),rgba(230,223,211,.82));
  box-shadow:0 0 10px rgba(197,160,89,.08);
}
body[data-page="analytics"] .progress-mod-row > strong {
  line-height:1.05;
}
body[data-page="analytics"] .progress-mod-row > strong small {
  display:block;
  margin-top:.2rem;
  color:var(--muted);
  font-family:var(--font-sans);
  font-size:.54rem;
  font-weight:400;
}
@media (max-width:575.98px) {
  body[data-page="analytics"] .progress-mod-list .progress-mod-row { grid-template-columns:4.1rem minmax(0,1fr) 3.65rem; }
  body[data-page="analytics"] .progress-mod-badge { min-width:3.65rem; }
}

/* WOSU 0.10.26 — Training is part of personal Progress, including past plans. */
body[data-page="analytics"] .progress-plan-history { margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-plan-history > span { display:block; margin-bottom:.5rem; color:var(--muted); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }
body[data-page="analytics"] .progress-plan-history > div { display:flex; flex-wrap:wrap; gap:.45rem; }
body[data-page="analytics"] .progress-plan-history-link { display:flex; flex-direction:column; min-width:10.5rem; gap:.12rem; padding:.52rem .65rem; color:var(--text); background:rgba(136,160,192,.025); border:1px solid var(--line-faint); text-decoration:none; transition:background .18s ease,border-color .18s ease; }
body[data-page="analytics"] .progress-plan-history-link:hover,body[data-page="analytics"] .progress-plan-history-link.active { background:rgba(197,160,89,.055); border-color:rgba(197,160,89,.3); }
body[data-page="analytics"] .progress-plan-history-link strong { font-family:var(--font-serif); font-size:.7rem; font-weight:600; }
body[data-page="analytics"] .progress-plan-history-link small { color:var(--muted); font-size:.56rem; }
body[data-page="analytics"] .progress-plan-detail { overflow:hidden; scroll-margin-top:6rem; }
body[data-page="analytics"] .progress-plan-detail-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.2rem; padding:1.4rem 1.25rem 1rem; background:linear-gradient(120deg,rgba(197,160,89,.045),rgba(136,160,192,.02)); border-bottom:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-plan-detail-head h2 { margin:.16rem 0 .22rem; font-family:var(--font-serif); font-size:1.3rem; font-weight:500; }
body[data-page="analytics"] .progress-plan-detail-head p { margin:0; color:var(--muted); font-size:.66rem; }
body[data-page="analytics"] .progress-plan-detail-status { flex:0 0 auto; text-align:right; }
body[data-page="analytics"] .progress-plan-detail-status span,body[data-page="analytics"] .progress-plan-detail-status strong { display:block; }
body[data-page="analytics"] .progress-plan-detail-status span { color:var(--muted); font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; }
body[data-page="analytics"] .progress-plan-detail-status strong { margin-top:.16rem; font-family:var(--font-serif); font-size:1.15rem; font-weight:600; }
body[data-page="analytics"] .progress-plan-map-list { padding:.15rem .9rem; }
body[data-page="analytics"] .progress-plan-map-row { display:grid; grid-template-columns:5rem 4.4rem minmax(0,1.25fr) minmax(9rem,.75fr) 4.8rem; align-items:center; gap:.75rem; min-height:4.4rem; padding:.62rem .15rem; border-top:1px solid var(--line-faint); transition:background .18s ease; }
body[data-page="analytics"] .progress-plan-map-row:first-child { border-top:0; }
body[data-page="analytics"] .progress-plan-map-row:hover { background:rgba(136,160,192,.025); }
body[data-page="analytics"] .progress-plan-map-cover { width:5rem; height:3.05rem; overflow:hidden; display:block; background:rgba(136,160,192,.05); border:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-plan-map-cover img,body[data-page="analytics"] .progress-plan-map-cover > span { width:100%; height:100%; }
body[data-page="analytics"] .progress-plan-map-cover img { display:block; object-fit:cover; transition:filter .18s ease; }
body[data-page="analytics"] .progress-plan-map-cover > span { display:grid; place-items:center; color:var(--amber); }
body[data-page="analytics"] .progress-plan-map-row:hover .progress-plan-map-cover img { filter:brightness(1.08); }
body[data-page="analytics"] .progress-plan-map-position { display:flex; flex-direction:column; align-items:flex-start; gap:.28rem; }
body[data-page="analytics"] .progress-plan-map-position > strong { color:var(--amber); font-family:var(--font-serif); font-size:.68rem; }
body[data-page="analytics"] .progress-plan-map-position .status { font-size:.52rem; padding:.22rem .34rem; }
body[data-page="analytics"] .progress-plan-map-main,body[data-page="analytics"] .progress-plan-map-focus { min-width:0; }
body[data-page="analytics"] .progress-plan-map-main > span,body[data-page="analytics"] .progress-plan-map-main > small,body[data-page="analytics"] .progress-plan-map-focus > span,body[data-page="analytics"] .progress-plan-map-focus > small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body[data-page="analytics"] .progress-plan-map-main > span { color:var(--amber); font-size:.58rem; }
body[data-page="analytics"] .progress-plan-map-main h3 { overflow:hidden; margin:.12rem 0; font-family:var(--font-serif); font-size:.82rem; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
body[data-page="analytics"] .progress-plan-map-main h3 a { color:var(--text); text-decoration:none; }
body[data-page="analytics"] .progress-plan-map-main h3 a:hover { color:var(--ice); }
body[data-page="analytics"] .progress-plan-map-main > small,body[data-page="analytics"] .progress-plan-map-focus > small { color:var(--muted); font-size:.57rem; }
body[data-page="analytics"] .progress-plan-map-focus > span { color:var(--text); font-size:.66rem; }
body[data-page="analytics"] .progress-plan-map-attempts { text-align:right; }
body[data-page="analytics"] .progress-plan-map-attempts strong,body[data-page="analytics"] .progress-plan-map-attempts span,body[data-page="analytics"] .progress-plan-map-attempts small { display:block; }
body[data-page="analytics"] .progress-plan-map-attempts strong { font-family:var(--font-serif); font-size:.9rem; }
body[data-page="analytics"] .progress-plan-map-attempts span,body[data-page="analytics"] .progress-plan-map-attempts small { color:var(--muted); font-size:.54rem; }
body[data-page="analytics"] .progress-plan-detail-foot { display:flex; flex-wrap:wrap; gap:.55rem 1.2rem; padding:.72rem 1rem; color:var(--muted); border-top:1px solid var(--line-faint); font-size:.59rem; }
body[data-page="analytics"] .progress-plan-detail-foot i { margin-right:.3rem; color:var(--amber); }
body[data-page="analytics"] .progress-plan-more { display:grid; gap:.75rem; }
body[data-page="analytics"] .progress-plan-disclosure { overflow:hidden; }
body[data-page="analytics"] .progress-plan-disclosure > summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.15rem; cursor:pointer; list-style:none; font-family:var(--font-serif); }
body[data-page="analytics"] .progress-plan-disclosure > summary::-webkit-details-marker { display:none; }
body[data-page="analytics"] .progress-plan-disclosure > summary > span { display:flex; align-items:center; gap:.55rem; }
body[data-page="analytics"] .progress-plan-disclosure > summary i { color:var(--amber); }
body[data-page="analytics"] .progress-plan-disclosure > summary > strong { color:var(--muted); font-size:.7rem; }
body[data-page="analytics"] .progress-plan-disclosure[open] > summary { border-bottom:1px solid var(--line-faint); background:rgba(197,160,89,.025); }
body[data-page="analytics"] .progress-plan-disclosure .score-table { margin:0; }
body[data-page="analytics"] .progress-plan-events { border-left:1px solid var(--line-faint); }
@media (max-width:991.98px) {
  body[data-page="analytics"] .progress-plan-map-row { grid-template-columns:4.6rem 4rem minmax(0,1fr) 4.2rem; }
  body[data-page="analytics"] .progress-plan-map-cover { width:4.6rem; height:2.8rem; }
  body[data-page="analytics"] .progress-plan-map-focus { grid-column:3; }
  body[data-page="analytics"] .progress-plan-map-attempts { grid-column:4; grid-row:1 / span 2; }
  body[data-page="analytics"] .progress-plan-events { border-top:1px solid var(--line-faint); border-left:0; }
}
@media (max-width:575.98px) {
  body[data-page="analytics"] .progress-plan-detail-head { display:block; padding:1.15rem .9rem .8rem; }
  body[data-page="analytics"] .progress-plan-detail-status { margin-top:.8rem; padding-top:.7rem; border-top:1px solid var(--line-faint); text-align:left; }
  body[data-page="analytics"] .progress-plan-map-list { padding:.1rem .65rem; }
  body[data-page="analytics"] .progress-plan-map-row { grid-template-columns:4.1rem minmax(0,1fr) 3.6rem; gap:.55rem; padding:.7rem 0; }
  body[data-page="analytics"] .progress-plan-map-cover { width:4.1rem; height:2.55rem; grid-row:1 / span 2; }
  body[data-page="analytics"] .progress-plan-map-position { grid-column:2; grid-row:1; flex-direction:row; align-items:center; }
  body[data-page="analytics"] .progress-plan-map-main { grid-column:2; grid-row:2; }
  body[data-page="analytics"] .progress-plan-map-focus { grid-column:2 / 4; grid-row:3; padding-left:4.65rem; }
  body[data-page="analytics"] .progress-plan-map-attempts { grid-column:3; grid-row:1 / span 2; }
  body[data-page="analytics"] .progress-plan-history > div { display:grid; grid-template-columns:1fr; }
  body[data-page="analytics"] .progress-plan-history-link { min-width:0; }
}

/* WOSU 0.10.27 — Progress must be readable and self-explanatory, not decorative. */
body[data-page="analytics"] .progress-identity p { color:rgba(230,223,211,.68); font-size:.9rem; }
body[data-page="analytics"] .progress-skill-score > span,body[data-page="analytics"] .progress-skill-score > small { color:rgba(230,223,211,.66); }
body[data-page="analytics"] .progress-skill-score > span { font-size:.78rem; }
body[data-page="analytics"] .progress-skill-score > small { font-size:.76rem; line-height:1.45; }
body[data-page="analytics"] .progress-metric { min-height:7rem; padding:1.15rem 1.05rem 1rem; }
body[data-page="analytics"] .progress-metric > i { opacity:.82; font-size:1.15rem; }
body[data-page="analytics"] .progress-metric strong { font-size:clamp(1.35rem,1.17rem + .35vw,1.65rem); line-height:1.05; }
body[data-page="analytics"] .progress-metric span { margin-top:.62rem; color:rgba(230,223,211,.68); font-size:.82rem; line-height:1.25; }
body[data-page="analytics"] .progress-chart-panel .table-note,body[data-page="analytics"] .progress-skill-section .ui-section__meta { color:rgba(230,223,211,.62); font-size:.72rem; }
body[data-page="analytics"] .progress-chart .chart-axis-label { fill:#aeb7c4; font-size:12px; font-weight:500; }
body[data-page="analytics"] .progress-chart-foot > span { padding:.78rem .9rem; color:rgba(230,223,211,.64); font-size:.78rem; }
body[data-page="analytics"] .progress-chart-foot strong { color:var(--text); font-size:.88rem; }
body[data-page="analytics"] .progress-skill-card { padding:1.05rem 1.1rem 1rem; }
body[data-page="analytics"] .progress-skill-card-head span { font-size:1rem; }
body[data-page="analytics"] .progress-skill-card-head div small { margin-top:.26rem; color:rgba(230,223,211,.62); font-size:.72rem; }
body[data-page="analytics"] .progress-skill-card-head > strong { font-size:1.55rem; }
body[data-page="analytics"] .progress-skill-card-head > strong small { color:rgba(230,223,211,.58); font-size:.68rem; }
body[data-page="analytics"] .progress-skill-track { height:.42rem; margin:.85rem 0 .65rem; }
body[data-page="analytics"] .progress-dimension-chart { height:7.25rem; margin:.05rem 0 .2rem; }
body[data-page="analytics"] .progress-dimension-chart svg { display:block; width:100%; height:100%; overflow:visible; }
body[data-page="analytics"] .progress-dimension-chart .dimension-grid { stroke:rgba(136,160,192,.10); stroke-width:1; vector-effect:non-scaling-stroke; }
body[data-page="analytics"] .progress-dimension-chart .dimension-grid-mid { stroke:rgba(197,160,89,.18); }
body[data-page="analytics"] .progress-dimension-chart .dimension-axis-label,body[data-page="analytics"] .progress-dimension-chart .dimension-date-label { fill:#9faaba; font-family:var(--font-sans); font-size:9px; font-weight:500; }
body[data-page="analytics"] .progress-dimension-chart .dimension-area { fill:rgba(197,160,89,.07); }
body[data-page="analytics"] .progress-dimension-chart .dimension-line { fill:none; stroke:rgba(230,223,211,.86); stroke-width:1.8; vector-effect:non-scaling-stroke; }
body[data-page="analytics"] .progress-dimension-chart .dimension-point { stroke:rgba(11,14,19,.9); stroke-width:1.5; vector-effect:non-scaling-stroke; }
body[data-page="analytics"] .progress-dimension-chart .dimension-point-start { fill:var(--ice); }
body[data-page="analytics"] .progress-dimension-chart .dimension-point-current { fill:var(--amber); }
body[data-page="analytics"] .progress-dimension-summary { display:grid; grid-template-columns:auto 1rem auto minmax(0,1fr); align-items:center; gap:.45rem; min-height:2.7rem; margin:.05rem 0 .55rem; padding:.55rem .6rem; background:rgba(136,160,192,.025); border:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-dimension-summary > span small,body[data-page="analytics"] .progress-dimension-summary > span strong { display:block; }
body[data-page="analytics"] .progress-dimension-summary > span small { color:rgba(230,223,211,.55); font-size:.56rem; text-transform:uppercase; letter-spacing:.06em; }
body[data-page="analytics"] .progress-dimension-summary > span strong { margin-top:.08rem; font-family:var(--font-serif); font-size:.88rem; font-weight:600; }
body[data-page="analytics"] .progress-dimension-summary > i { color:var(--muted); font-size:.7rem; text-align:center; }
body[data-page="analytics"] .dimension-trend { justify-self:end; font-family:var(--font-serif); font-size:.73rem; font-style:normal; font-weight:600; white-space:nowrap; }
body[data-page="analytics"] .dimension-trend-up { color:var(--mint); }
body[data-page="analytics"] .dimension-trend-down { color:#caa7a7; }
body[data-page="analytics"] .dimension-trend-flat { color:rgba(230,223,211,.65); }
body[data-page="analytics"] .progress-skill-card footer { color:rgba(230,223,211,.61); font-size:.72rem; }
body[data-page="analytics"] [data-progress-training-card].is-loading,body[data-page="analytics"] [data-progress-training-detail-root].is-loading { opacity:.52; pointer-events:none; transition:opacity .15s ease; }
@media (max-width:575.98px) {
  body[data-page="analytics"] .progress-metric { min-height:6.5rem; }
  body[data-page="analytics"] .progress-metric strong { font-size:1.3rem; }
  body[data-page="analytics"] .progress-metric span { font-size:.76rem; }
  body[data-page="analytics"] .progress-dimension-chart { height:7rem; }
  body[data-page="analytics"] .progress-dimension-summary { grid-template-columns:auto 1rem auto; }
  body[data-page="analytics"] .dimension-trend { grid-column:1 / -1; justify-self:start; padding-top:.38rem; border-top:1px solid var(--line-faint); width:100%; }
}

/* WOSU 0.11.4 — official osu! rank history on personal Progress. */
body[data-page="analytics"] .progress-official-rank-panel { overflow:hidden; }
body[data-page="analytics"] .progress-official-rank-head { margin-bottom:0; }
body[data-page="analytics"] .progress-official-rank-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(19rem,.8fr); border-top:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-official-rank-chart-wrap { min-width:0; padding-top:.95rem; border-right:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-official-current { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:0 1.15rem .5rem; }
body[data-page="analytics"] .progress-official-current > div > span,body[data-page="analytics"] .progress-official-current > div > strong { display:block; }
body[data-page="analytics"] .progress-official-current > div > span { color:rgba(230,223,211,.64); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; }
body[data-page="analytics"] .progress-official-current > div > strong { margin-top:.12rem; font-family:var(--font-serif); font-size:clamp(2rem,1.55rem + 1vw,2.8rem); font-weight:600; line-height:1; }
body[data-page="analytics"] .progress-official-current > small { color:rgba(230,223,211,.58); font-size:.72rem; text-align:right; }
body[data-page="analytics"] .progress-rank-chart { min-height:13rem; }
body[data-page="analytics"] .progress-rank-chart svg { height:13rem; }
body[data-page="analytics"] .progress-official-rank-side { padding:1rem; background:linear-gradient(145deg,rgba(136,160,192,.025),rgba(197,160,89,.018)); }
body[data-page="analytics"] .progress-rank-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-rank-facts article { min-width:0; padding:.8rem .85rem; }
body[data-page="analytics"] .progress-rank-facts article:nth-child(even) { border-left:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-rank-facts article:nth-child(n+3) { border-top:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-rank-facts span,body[data-page="analytics"] .progress-rank-facts strong,body[data-page="analytics"] .progress-rank-facts small { display:block; }
body[data-page="analytics"] .progress-rank-facts span { color:rgba(230,223,211,.6); font-size:.68rem; }
body[data-page="analytics"] .progress-rank-facts strong { margin-top:.18rem; overflow:hidden; font-family:var(--font-serif); font-size:1.05rem; text-overflow:ellipsis; }
body[data-page="analytics"] .progress-rank-facts small { margin-top:.22rem; color:rgba(230,223,211,.5); font-size:.58rem; }
body[data-page="analytics"] .progress-rank-deltas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin-top:.75rem; }
body[data-page="analytics"] .progress-rank-deltas article { padding:.68rem .72rem; border:1px solid var(--line-faint); background:rgba(8,12,18,.22); }
body[data-page="analytics"] .progress-rank-deltas span,body[data-page="analytics"] .progress-rank-deltas strong,body[data-page="analytics"] .progress-rank-deltas small { display:block; }
body[data-page="analytics"] .progress-rank-deltas span { color:rgba(230,223,211,.58); font-size:.62rem; }
body[data-page="analytics"] .progress-rank-deltas strong { margin-top:.12rem; font-family:var(--font-serif); font-size:1rem; }
body[data-page="analytics"] .progress-rank-deltas small { margin-top:.12rem; font-size:.58rem; }
body[data-page="analytics"] .rank-change-up strong,body[data-page="analytics"] .rank-change-up small,body[data-page="analytics"] .rank-history-delta.rank-change-up { color:var(--mint); }
body[data-page="analytics"] .rank-change-down strong,body[data-page="analytics"] .rank-change-down small,body[data-page="analytics"] .rank-history-delta.rank-change-down { color:#caa7a7; }
body[data-page="analytics"] .rank-change-flat strong,body[data-page="analytics"] .rank-change-flat small,body[data-page="analytics"] .rank-history-delta.rank-change-flat { color:rgba(230,223,211,.7); }
body[data-page="analytics"] .rank-change-na strong,body[data-page="analytics"] .rank-change-na small,body[data-page="analytics"] .rank-history-delta.rank-change-na { color:rgba(230,223,211,.46); }
body[data-page="analytics"] .progress-rank-note { margin:.8rem 0 0; padding:0; border:0; }
body[data-page="analytics"] .progress-rank-history-detail { border-top:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-rank-history-detail > summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.1rem; cursor:pointer; list-style:none; font-family:var(--font-serif); }
body[data-page="analytics"] .progress-rank-history-detail > summary::-webkit-details-marker { display:none; }
body[data-page="analytics"] .progress-rank-history-detail > summary span { display:flex; align-items:center; gap:.5rem; }
body[data-page="analytics"] .progress-rank-history-detail > summary i { color:var(--amber); }
body[data-page="analytics"] .progress-rank-history-detail > summary strong { color:rgba(230,223,211,.58); font-size:.7rem; }
body[data-page="analytics"] .progress-rank-history-detail[open] > summary { background:rgba(197,160,89,.025); border-bottom:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-rank-history-detail .score-table th,body[data-page="analytics"] .progress-rank-history-detail .score-table td { vertical-align:middle; }
body[data-page="analytics"] .rank-history-delta { display:inline-flex; flex-direction:column; font-family:var(--font-serif); font-weight:600; }
body[data-page="analytics"] .rank-history-delta small { margin-top:.08rem; font-family:var(--font-sans); font-size:.54rem; font-weight:400; white-space:nowrap; }
@media (max-width:991.98px) {
  body[data-page="analytics"] .progress-official-rank-layout { grid-template-columns:1fr; }
  body[data-page="analytics"] .progress-official-rank-chart-wrap { border-right:0; border-bottom:1px solid var(--line-faint); }
}
@media (max-width:575.98px) {
  body[data-page="analytics"] .progress-official-current { display:block; padding:0 .85rem .4rem; }
  body[data-page="analytics"] .progress-official-current > small { display:block; margin-top:.45rem; text-align:left; }
  body[data-page="analytics"] .progress-rank-facts,body[data-page="analytics"] .progress-rank-deltas { grid-template-columns:1fr 1fr; }
  body[data-page="analytics"] .progress-rank-chart { min-height:11.5rem; padding-left:0; padding-right:.1rem; }
  body[data-page="analytics"] .progress-rank-chart svg { height:11.5rem; }
}

/* WOSU 0.12.0 — personal Achievements belong to Progress; Community is team-scoped social context. */
body[data-page="analytics"] .progress-achievement-section { scroll-margin-top:6rem; }
body[data-page="analytics"] .progress-achievement-section .ui-section__meta strong { color:var(--text); font-family:var(--font-serif); font-size:.92rem; }
body[data-page="analytics"] .progress-achievement-titles { overflow:hidden; padding:1rem 1.05rem; }
body[data-page="analytics"] .progress-achievement-titles-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-achievement-titles-head > span { display:flex; align-items:center; gap:.5rem; font-family:var(--font-serif); font-size:1rem; }
body[data-page="analytics"] .progress-achievement-titles-head i { color:var(--amber); }
body[data-page="analytics"] .progress-achievement-titles-head small { color:rgba(230,223,211,.58); font-size:.72rem; text-align:right; }
body[data-page="analytics"] .progress-title-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; padding-top:.85rem; }
body[data-page="analytics"] .progress-title-list article { display:grid; grid-template-columns:2.55rem minmax(0,1fr); align-items:center; gap:.65rem; min-width:0; padding:.7rem; background:rgba(136,160,192,.025); border:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-title-list .achievement-icon { width:2.55rem; height:2.55rem; }
body[data-page="analytics"] .progress-title-list strong,body[data-page="analytics"] .progress-title-list small { display:block; overflow:hidden; text-overflow:ellipsis; }
body[data-page="analytics"] .progress-title-list strong { font-family:var(--font-serif); font-size:.82rem; white-space:nowrap; }
body[data-page="analytics"] .progress-title-list small { margin-top:.18rem; color:rgba(230,223,211,.58); font-size:.64rem; line-height:1.35; }
body[data-page="analytics"] .progress-achievement-section .panel-head h3 { margin:.18rem 0 0; font-family:var(--font-serif); font-size:1.15rem; font-weight:400; }
body[data-page="analytics"] .progress-achievement-list article { min-height:4.7rem; }
body[data-page="analytics"] .progress-achievement-list strong { font-size:.86rem; }
body[data-page="analytics"] .progress-achievement-list p,body[data-page="analytics"] .progress-achievement-list small { font-size:.7rem; }
body[data-page="analytics"] .progress-achievement-next article > div:first-child { grid-template-columns:2.4rem minmax(0,1fr) auto; }
body[data-page="analytics"] .progress-achievement-next article > div:first-child > b { font-family:var(--font-serif); font-size:.8rem; font-weight:600; }
body[data-page="analytics"] .progress-achievement-next .achievement-icon { width:2.4rem; height:2.4rem; }
body[data-page="analytics"] .progress-achievement-next strong { font-size:.78rem; }
body[data-page="analytics"] .progress-achievement-next small { font-size:.66rem; }
body[data-page="analytics"] .progress-achievement-catalog { overflow:hidden; scroll-margin-top:6rem; }
body[data-page="analytics"] .progress-achievement-catalog > summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; cursor:pointer; list-style:none; font-family:var(--font-serif); }
body[data-page="analytics"] .progress-achievement-catalog > summary::-webkit-details-marker { display:none; }
body[data-page="analytics"] .progress-achievement-catalog > summary > span { display:flex; align-items:center; gap:.55rem; }
body[data-page="analytics"] .progress-achievement-catalog > summary i { color:var(--amber); }
body[data-page="analytics"] .progress-achievement-catalog > summary strong { color:rgba(230,223,211,.62); font-size:.8rem; }
body[data-page="analytics"] .progress-achievement-catalog[open] > summary { background:rgba(197,160,89,.025); border-bottom:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-achievement-catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
body[data-page="analytics"] .progress-achievement-catalog-item { display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:.75rem; min-width:0; padding:.9rem 1rem; border-top:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-achievement-catalog-item:nth-child(odd) { border-right:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-achievement-catalog-item:nth-child(-n+2) { border-top:0; }
body[data-page="analytics"] .progress-achievement-catalog-item.open { opacity:.76; }
body[data-page="analytics"] .progress-achievement-catalog-item > div { min-width:0; }
body[data-page="analytics"] .progress-achievement-catalog-item strong,body[data-page="analytics"] .progress-achievement-catalog-item p { display:block; }
body[data-page="analytics"] .progress-achievement-catalog-item strong { margin-top:.15rem; font-family:var(--font-serif); font-size:.82rem; }
body[data-page="analytics"] .progress-achievement-catalog-item p { margin:.2rem 0 0; color:rgba(230,223,211,.58); font-size:.66rem; line-height:1.4; }
body[data-page="analytics"] .progress-achievement-catalog-item footer { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.55rem; padding-top:.5rem; color:rgba(230,223,211,.58); border-top:1px solid var(--line-faint); font-size:.62rem; }
body[data-page="analytics"] .progress-achievement-catalog-item footer span { color:var(--text); font-size:.66rem; }
body[data-page="analytics"] .achievement-state.unlocked { color:var(--mint); }

body[data-page="community"] .community-chronicle { overflow:hidden; }
body[data-page="community"] .community-event { display:grid; grid-template-columns:2rem minmax(0,1fr); align-items:center; gap:.7rem; min-height:3.2rem; padding:.38rem .8rem; border-top:1px solid var(--line-faint); }
body[data-page="community"] .community-event:first-child { border-top:0; }
body[data-page="community"] .community-event:hover { background:rgba(136,160,192,.025); }
body[data-page="community"] .community-event-icon { display:grid; width:2rem; height:2rem; place-items:center; color:var(--ice); background:rgba(136,160,192,.05); border:1px solid var(--line-faint); font-size:var(--text-sm); }
body[data-page="community"] .community-event.event-personal_best .community-event-icon { color:var(--amber); }
body[data-page="community"] .community-event.event-hall .community-event-icon { color:var(--violet); }
body[data-page="community"] .community-event-copy { display:grid; grid-template-columns:minmax(7.5rem,.7fr) minmax(12rem,1fr) minmax(0,1.55fr) auto; grid-template-areas:'player event detail time'; align-items:center; gap:.8rem; min-width:0; }
body[data-page="community"] .community-event-player { grid-area:player; min-width:0; overflow:hidden; font-family:var(--font-serif); font-size:var(--text-base); font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
body[data-page="community"] .community-event-copy h3 { grid-area:event; overflow:hidden; margin:0; font-family:var(--font-serif); font-size:var(--text-base); font-weight:500; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
body[data-page="community"] .community-event-copy p { grid-area:detail; min-width:0; overflow:hidden; margin:0; color:rgba(230,223,211,.65); font-size:var(--text-sm); line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
body[data-page="community"] .community-event-copy time { grid-area:time; color:rgba(230,223,211,.52); font-size:var(--text-sm); text-align:right; white-space:nowrap; }
body[data-page="community"] .community-ranking-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; margin-bottom:.7rem; }
body[data-page="community"] .community-ranking-tab { display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-height:2.75rem; padding:.55rem .75rem; color:rgba(230,223,211,.62); background:rgba(8,12,18,.46); border:1px solid var(--line-faint); font-family:var(--font-serif); }
body[data-page="community"] .community-ranking-tab:hover,body[data-page="community"] .community-ranking-tab.active { color:var(--text); background:rgba(197,160,89,.05); border-color:rgba(197,160,89,.27); }
body[data-page="community"] .community-ranking-tab span { font-size:.82rem; }
body[data-page="community"] .community-ranking-tab small { color:var(--amber); font-size:.68rem; }
body[data-page="community"] .community-ranking-panel { overflow:hidden; }
body[data-page="community"] .community-ranking-panel[hidden] { display:none!important; }
body[data-page="community"] .community-ranking-panel .panel-head h3 { margin:.18rem 0 0; font-family:var(--font-serif); font-size:1.15rem; font-weight:400; }
body[data-page="community"] .community-table td { vertical-align:middle; }
body[data-page="community"] .community-table td:nth-child(2) small { display:block; margin-top:.12rem; color:var(--muted); font-size:.62rem; }
body[data-page="community"] .ranking-ineligible { opacity:.54; }
body[data-page="community"] .official-rank-delta { font-family:var(--font-serif); font-weight:600; }
body[data-page="community"] .official-rank-delta.up { color:var(--mint); }
body[data-page="community"] .official-rank-delta.down { color:#caa7a7; }
body[data-page="community"] .official-rank-delta.flat { color:var(--muted); }
body[data-page="community"] .community-hall-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
body[data-page="community"] .community-highlight-list { grid-template-columns:repeat(3,minmax(0,1fr)); padding:1rem; }
body[data-page="community"] .community-highlight-list article { margin:0; }

@media (max-width:991.98px) {
  body[data-page="analytics"] .progress-title-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="community"] .community-highlight-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767.98px) {
  body[data-page="analytics"] .progress-achievement-titles-head { align-items:flex-start; flex-direction:column; }
  body[data-page="analytics"] .progress-achievement-titles-head small { text-align:left; }
  body[data-page="analytics"] .progress-achievement-catalog-grid { grid-template-columns:1fr; }
  body[data-page="analytics"] .progress-achievement-catalog-item { border-right:0!important; }
  body[data-page="analytics"] .progress-achievement-catalog-item:nth-child(2) { border-top:1px solid var(--line-faint); }
  body[data-page="community"] .community-ranking-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="community"] .community-hall-summary { grid-template-columns:1fr; }
  body[data-page="community"] .community-highlight-list { grid-template-columns:1fr; }
}
@media (max-width:575.98px) {
  body[data-page="analytics"] .progress-title-list { grid-template-columns:1fr; }
  body[data-page="community"] .community-event { grid-template-columns:1.9rem minmax(0,1fr); gap:.55rem; min-height:0; padding:.48rem .6rem; }
  body[data-page="community"] .community-event-icon { width:1.9rem; height:1.9rem; }
  body[data-page="community"] .community-event-copy { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'player time' 'event detail'; gap:.16rem .55rem; }
  body[data-page="community"] .community-event-player,body[data-page="community"] .community-event-copy h3,body[data-page="community"] .community-event-copy p { font-size:var(--text-sm); }
  body[data-page="community"] .community-event-copy h3,body[data-page="community"] .community-event-copy p { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}


/* WOSU 0.13.5 — compact and explanatory player detail. */
body[data-page="player"] .player-chart-panel { overflow:hidden; }
body[data-page="player"] .player-chart { min-height:13.5rem; padding:.15rem .75rem .35rem; border-top:1px solid var(--line-faint); }
body[data-page="player"] .player-chart svg { display:block; width:100%; height:13.5rem; overflow:visible; }
body[data-page="player"] .player-chart .chart-grid { stroke:rgba(136,160,192,.12); stroke-width:1; }
body[data-page="player"] .player-chart .chart-axis-label { fill:#aeb7c4; font-size:11px; font-weight:500; }
body[data-page="player"] .player-chart .chart-axis-label-right { fill:rgba(197,160,89,.8); }
body[data-page="player"] .player-chart .chart-area { fill:rgba(197,160,89,.075); }
body[data-page="player"] .player-chart .chart-line { fill:none; stroke:rgba(230,223,211,.92); stroke-width:2; vector-effect:non-scaling-stroke; }
body[data-page="player"] .player-chart .chart-point { fill:var(--amber); stroke:rgba(16,20,27,.92); stroke-width:1.5; }
body[data-page="player"] .player-chart .chart-bar { fill:rgba(136,160,192,.34); }
body[data-page="player"] .player-chart .chart-bar-latest { fill:rgba(230,223,211,.76); }
body[data-page="player"] .player-chart .chart-line-secondary { fill:none; stroke:var(--amber); stroke-width:2; vector-effect:non-scaling-stroke; }
body[data-page="player"] .player-chart .chart-point-secondary { fill:var(--amber); stroke:rgba(16,20,27,.92); stroke-width:1.5; }
body[data-page="player"] .player-chart .chart-empty { height:13rem; display:grid; place-items:center; color:var(--muted); font-size:.76rem; }
body[data-page="player"] .player-chart-legend { display:flex; justify-content:flex-end; gap:1rem; padding:0 1rem .45rem; color:var(--muted); font-size:.66rem; }
body[data-page="player"] .player-chart-legend span { display:inline-flex; align-items:center; gap:.4rem; }
body[data-page="player"] .player-chart-legend i { display:inline-block; width:.9rem; height:.22rem; background:rgba(136,160,192,.5); }
body[data-page="player"] .player-chart-legend i.line { height:2px; background:var(--amber); }
body[data-page="player"] .player-chart-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line-faint); }
body[data-page="player"] .player-chart-facts article { min-width:0; padding:.72rem .85rem; text-align:center; }
body[data-page="player"] .player-chart-facts article + article { border-left:1px solid var(--line-faint); }
body[data-page="player"] .player-chart-facts span,body[data-page="player"] .player-chart-facts strong { display:block; }
body[data-page="player"] .player-chart-facts span { color:var(--muted); font-size:.64rem; }
body[data-page="player"] .player-chart-facts strong { margin-top:.18rem; font-family:var(--font-serif); font-size:.92rem; }
body[data-page="player"] .player-chart-facts strong.up { color:var(--mint); }
body[data-page="player"] .player-chart-facts strong.down { color:#caa7a7; }
body[data-page="player"] .player-chart-facts strong.flat { color:var(--text); }
body[data-page="player"] .player-chart-panel .panel-note { margin-top:.85rem; }

body[data-page="player"] .player-score-panel { overflow:hidden; }
body[data-page="player"] .player-score-list { padding:0 .8rem .65rem; }
body[data-page="player"] .player-score-row { display:grid; grid-template-columns:2rem minmax(0,1fr) 3.25rem 5rem 4.2rem 3.25rem; align-items:center; gap:.62rem; min-height:3.05rem; padding:.38rem .2rem; border-top:1px solid var(--line-faint); cursor:pointer; transition:background .18s ease; }
body[data-page="player"] .player-score-row:first-child { border-top:0; }
body[data-page="player"] .player-score-row:hover,body[data-page="player"] .player-score-row:focus-visible { background:rgba(136,160,192,.035); outline:none; }
body[data-page="player"] .player-score-rank { width:1.85rem; height:1.85rem; }
body[data-page="player"] .player-score-map { min-width:0; }
body[data-page="player"] .player-score-map strong,body[data-page="player"] .player-score-map small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body[data-page="player"] .player-score-map strong { font-family:var(--font-serif); font-size:.78rem; line-height:1.15; }
body[data-page="player"] .player-score-map small { margin-top:.16rem; color:var(--muted); font-size:.59rem; }
body[data-page="player"] .player-score-map .bi-star-fill { margin-left:.14rem; color:var(--amber); font-size:.52rem; }
body[data-page="player"] .player-score-mods { justify-self:center; min-width:2.4rem; padding:.22rem .28rem; font-size:.56rem; text-align:center; }
body[data-page="player"] .player-score-stat { min-width:0; text-align:right; }
body[data-page="player"] .player-score-stat small,body[data-page="player"] .player-score-stat strong { display:block; white-space:nowrap; }
body[data-page="player"] .player-score-stat small { color:var(--muted); font-size:.5rem; letter-spacing:.08em; }
body[data-page="player"] .player-score-stat strong { margin-top:.05rem; font-family:var(--font-serif); font-size:.7rem; }
body[data-page="player"] .player-score-pp strong { color:var(--amber); }
body[data-page="player"] .player-score-row time { color:var(--muted); font-size:.58rem; text-align:right; white-space:nowrap; }

body[data-page="player"] .training-readiness { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .48rem; border:1px solid var(--line-faint); font-size:.62rem; white-space:nowrap; }
body[data-page="player"] .training-readiness.ready { color:var(--mint); border-color:rgba(145,180,165,.22); background:rgba(145,180,165,.035); }
body[data-page="player"] .training-readiness.waiting { color:var(--amber); border-color:rgba(197,160,89,.22); background:rgba(197,160,89,.035); }
body[data-page="player"] .player-training-empty { margin:0 .85rem .85rem; padding:.9rem; background:rgba(8,12,18,.24); border:1px solid var(--line-faint); }
body[data-page="player"] .player-training-empty-head { display:grid; grid-template-columns:2.45rem minmax(0,1fr); align-items:center; gap:.75rem; padding-bottom:.8rem; border-bottom:1px solid var(--line-faint); }
body[data-page="player"] .player-training-empty-head > span { display:grid; width:2.45rem; height:2.45rem; place-items:center; color:var(--amber); border:1px solid var(--line); background:rgba(197,160,89,.04); }
body[data-page="player"] .player-training-empty.ready .player-training-empty-head > span { color:var(--mint); background:rgba(145,180,165,.04); }
body[data-page="player"] .player-training-empty-head strong,body[data-page="player"] .player-training-empty-head p { display:block; }
body[data-page="player"] .player-training-empty-head strong { font-family:var(--font-serif); font-size:.88rem; }
body[data-page="player"] .player-training-empty-head p { margin:.18rem 0 0; color:var(--muted); font-size:.66rem; line-height:1.4; }
body[data-page="player"] .player-training-flow { padding-top:.45rem; }
body[data-page="player"] .player-training-flow article { display:grid; grid-template-columns:1.8rem minmax(0,1fr); gap:.6rem; align-items:start; padding:.55rem .1rem; border-top:1px solid var(--line-faint); }
body[data-page="player"] .player-training-flow article:first-child { border-top:0; }
body[data-page="player"] .player-training-flow b { display:grid; width:1.55rem; height:1.55rem; place-items:center; color:var(--muted); border:1px solid var(--line); font-size:.6rem; font-weight:600; }
body[data-page="player"] .player-training-flow article.done b { color:var(--mint); border-color:rgba(145,180,165,.3); }
body[data-page="player"] .player-training-flow strong,body[data-page="player"] .player-training-flow small { display:block; }
body[data-page="player"] .player-training-flow strong { font-family:var(--font-serif); font-size:.72rem; }
body[data-page="player"] .player-training-flow small { margin-top:.12rem; color:var(--muted); font-size:.61rem; line-height:1.4; }

@media (max-width:767.98px) {
  body[data-page="player"] .player-chart { min-height:11.5rem; padding:.05rem .15rem .25rem; }
  body[data-page="player"] .player-chart svg { height:11.5rem; }
  body[data-page="player"] .player-chart-legend { justify-content:flex-start; padding-left:.75rem; }
  body[data-page="player"] .player-chart-facts { grid-template-columns:1fr; }
  body[data-page="player"] .player-chart-facts article { display:flex; justify-content:space-between; align-items:baseline; text-align:left; }
  body[data-page="player"] .player-chart-facts article + article { border-top:1px solid var(--line-faint); border-left:0; }
  body[data-page="player"] .player-score-list { padding:0 .55rem .55rem; }
  body[data-page="player"] .player-score-row { grid-template-columns:1.9rem minmax(0,1fr) 4.4rem 3.8rem; gap:.48rem; min-height:3rem; padding:.38rem .12rem; }
  body[data-page="player"] .player-score-mods,body[data-page="player"] .player-score-row time { display:none; }
  body[data-page="player"] .player-score-stat { text-align:right; }
  body[data-page="player"] .player-score-map strong { font-size:.74rem; }
  body[data-page="player"] .player-score-map small { font-size:.55rem; }
  body[data-page="player"] .player-training-panel .panel-head { align-items:flex-start; flex-direction:column; gap:.55rem; }
}
@media (max-width:420px) {
  body[data-page="player"] .player-score-row { grid-template-columns:1.9rem minmax(0,1fr) 3.8rem; }
  body[data-page="player"] .player-score-stat:not(.player-score-pp) { display:none; }
}

/* WOSU 0.13.7 — personal Achievements and transferable team Crowns. */
.overview-crown-section,.player-achievement-section { --text-sm:.9rem; --text-base:1rem; }
.overview-crown-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.overview-crown-card { display:grid; grid-template-columns:2.5rem minmax(0,1fr) auto; align-items:center; gap:.7rem; min-width:0; padding:.72rem .78rem; color:var(--text); text-decoration:none; background:rgba(8,12,18,.28); border:1px solid var(--line-faint); transition:border-color .16s ease,background-color .16s ease,transform .16s ease; }
.overview-crown-card:hover { color:var(--text); border-color:rgba(197,160,89,.35); background:rgba(197,160,89,.035); transform:translateY(-1px); }
.overview-crown-card.is-owned { border-color:rgba(197,160,89,.3); box-shadow:inset 2px 0 var(--amber); }
.overview-crown-icon { display:grid; width:2.5rem; height:2.5rem; place-items:center; font-size:1.25rem; background:rgba(197,160,89,.04); border:1px solid var(--line); }
.overview-crown-copy { min-width:0; }
.overview-crown-copy strong,.overview-crown-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.overview-crown-copy strong { margin-top:.08rem; font-family:var(--font-serif); font-size:var(--text-base); font-weight:500; }
.overview-crown-copy small { margin-top:.14rem; color:var(--muted); font-size:var(--text-sm); }
.overview-crown-state { color:var(--muted); font-family:var(--font-serif); font-size:var(--text-sm); white-space:nowrap; }
.overview-crown-state.owned { color:var(--amber); }

.player-achievement-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.8rem; }
.player-achievement-list { padding:0 .8rem .7rem; }
.player-achievement-item { display:grid; grid-template-columns:2.35rem minmax(0,1fr) auto; align-items:center; gap:.65rem; padding:.62rem .15rem; color:var(--text); text-decoration:none; border-top:1px solid var(--line-faint); }
.player-achievement-item:first-child { border-top:0; }
.player-achievement-item:hover strong { color:var(--ice); }
.player-achievement-item .achievement-icon { display:grid; width:2.35rem; height:2.35rem; place-items:center; border:1px solid var(--line); font-size:1rem; }
.player-achievement-item strong,.player-achievement-item small { display:block; }
.player-achievement-item strong { font-family:var(--font-serif); font-size:var(--text-base); font-weight:500; }
.player-achievement-item small { margin-top:.16rem; color:var(--muted); font-size:var(--text-sm); }
.player-achievement-item > i { color:var(--muted); font-size:var(--text-sm); }
.player-held-crowns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; padding:0 .8rem .75rem; }
.player-held-crown { display:grid; grid-template-columns:2rem minmax(0,1fr); align-items:center; gap:.55rem; min-width:0; padding:.55rem; color:var(--text); text-decoration:none; background:rgba(197,160,89,.035); border:1px solid rgba(197,160,89,.16); }
.player-held-crown > span { display:grid; width:2rem; height:2rem; place-items:center; }
.player-held-crown strong,.player-held-crown small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-held-crown strong { font-family:var(--font-serif); font-size:var(--text-base); font-weight:500; }
.player-held-crown small { color:var(--muted); font-size:var(--text-sm); }
.player-crown-empty { display:grid; grid-template-columns:2.4rem minmax(0,1fr); align-items:center; gap:.7rem; margin:0 .8rem .75rem; padding:.7rem; border:1px dashed var(--line); }
.player-crown-empty > i { color:var(--amber); font-size:1.1rem; text-align:center; }
.player-crown-empty strong,.player-crown-empty span { display:block; }
.player-crown-empty strong { font-family:var(--font-serif); font-size:var(--text-base); }
.player-crown-empty span { margin-top:.16rem; color:var(--muted); font-size:var(--text-sm); }
.player-crown-near { margin:0 .8rem .7rem; padding-top:.65rem; border-top:1px solid var(--line-faint); }
.player-crown-near > a { display:grid; grid-template-columns:2rem minmax(0,1fr) auto; gap:.5rem; align-items:center; padding:.42rem 0; color:var(--text); text-decoration:none; }
.player-crown-near > a > span { color:var(--amber); font-family:var(--font-serif); font-size:var(--text-sm); }
.player-crown-near > a > strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-serif); font-size:var(--text-base); font-weight:500; }
.player-crown-near > a > small { color:var(--muted); font-size:var(--text-sm); white-space:nowrap; }
.player-achievement-more { display:inline-block; margin:0 .8rem .8rem; }

body[data-page="achievements"],body[data-page="achievement"] { --text-sm:.9rem; --text-base:1rem; }

body[data-page="achievements"] .achievement-hero { position:relative; display:grid; grid-template-columns:4.4rem minmax(0,1fr) auto; align-items:center; gap:1.15rem; min-width:0; padding:1.25rem 1.4rem; background:linear-gradient(120deg,rgba(136,160,192,.055),rgba(197,160,89,.035)),var(--surface-2); border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.32); overflow:hidden; }
body[data-page="achievements"] .achievement-hero::after { content:none; }
body[data-page="achievements"] .achievement-hero-mark { display:grid; width:4.4rem; height:4.4rem; place-items:center; color:var(--amber); background:rgba(136,160,192,.055); border:1px solid rgba(197,160,89,.26); }
body[data-page="achievements"] .achievement-hero-mark i { font-size:1.45rem; }
body[data-page="achievements"] .achievement-hero h2 { margin:.16rem 0 .3rem; font-family:var(--font-title); font-size:clamp(1.5rem,1.2rem + .7vw,2.1rem); line-height:1.12; font-weight:400; }
body[data-page="achievements"] .achievement-hero p { margin:0; max-width:52rem; color:var(--muted); font-size:var(--text-base); line-height:1.5; }
body[data-page="achievements"] .achievement-jump-nav { position:relative; z-index:2; display:flex; gap:.45rem; flex-wrap:wrap; justify-content:flex-end; }
body[data-page="achievements"] .achievement-jump-nav a { min-height:2.65rem; display:inline-flex; align-items:center; gap:.38rem; padding:.55rem .75rem; color:var(--muted); text-decoration:none; background:rgba(255,255,255,.018); border:1px solid var(--line); font-family:var(--font-serif); font-size:var(--text-sm); }
body[data-page="achievements"] .achievement-jump-nav a:hover { color:var(--amber); border-color:rgba(197,160,89,.35); }
body[data-page="achievements"] .ui-section,
body[data-page="achievements"] .achievement-family,
body[data-page="achievements"] .callout { background:var(--surface-2); backdrop-filter:none; }
body[data-page="achievements"] .achievement-summary-strip article { height:100%; min-height:5.6rem; padding:1rem 1.05rem; background:var(--surface-2); border:1px solid var(--line-faint); box-shadow:0 8px 22px rgba(0,0,0,.18); }
body[data-page="achievements"] .achievement-summary-strip span,body[data-page="achievements"] .achievement-summary-strip strong { display:block; }
body[data-page="achievements"] .achievement-summary-strip span { color:var(--muted); font-size:var(--text-sm); }
body[data-page="achievements"] .achievement-summary-strip strong { margin-top:.28rem; color:var(--amber); font-family:var(--font-serif); font-size:var(--text-xl); font-weight:500; line-height:1.1; }
body[data-page="achievements"] .achievement-next-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; }
body[data-page="achievements"] .achievement-next-card { min-width:0; padding:.9rem; color:var(--text); text-decoration:none; background:var(--surface-2); border:1px solid var(--line-faint); }
body[data-page="achievements"] .achievement-next-card > div:first-child { display:grid; grid-template-columns:2.1rem minmax(0,1fr) auto; gap:.55rem; align-items:start; }
body[data-page="achievements"] .achievement-next-card .achievement-icon { display:grid; width:2.1rem; height:2.1rem; place-items:center; border:1px solid var(--line); }
body[data-page="achievements"] .achievement-next-card strong,body[data-page="achievements"] .achievement-next-card small { display:block; }
body[data-page="achievements"] .achievement-next-card strong { font-family:var(--font-serif); font-size:var(--text-base); font-weight:500; line-height:1.25; }
body[data-page="achievements"] .achievement-next-card small { margin-top:.22rem; color:var(--muted); font-size:var(--text-sm); line-height:1.45; }
body[data-page="achievements"] .achievement-next-card b { color:var(--amber); font-family:var(--font-serif); font-size:var(--text-sm); font-weight:500; }
body[data-page="achievements"] .achievement-next-card .history-track { margin-top:.6rem; }
body[data-page="achievements"] .achievement-family-stack { display:grid; gap:.6rem; }
body[data-page="achievements"] .achievement-family { overflow:hidden; }
body[data-page="achievements"] .achievement-family > summary { display:flex; align-items:center; justify-content:space-between; gap:.9rem; padding:1rem 1.05rem; cursor:pointer; list-style:none; }
body[data-page="achievements"] .achievement-family > summary::-webkit-details-marker { display:none; }
body[data-page="achievements"] .achievement-family > summary > span { display:flex; align-items:center; gap:.55rem; min-width:0; }
body[data-page="achievements"] .achievement-family > summary i { color:var(--amber); transition:transform .15s ease; }
body[data-page="achievements"] .achievement-family[open] > summary i { transform:rotate(90deg); }
body[data-page="achievements"] .achievement-family > summary strong { font-family:var(--font-serif); font-size:var(--text-base); font-weight:500; }
body[data-page="achievements"] .achievement-family > summary small { color:var(--muted); font-size:var(--text-sm); }
body[data-page="achievements"] .achievement-family > summary b { color:var(--ice); font-family:var(--font-serif); font-size:var(--text-sm); font-weight:500; }
body[data-page="achievements"] .achievement-family-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line-faint); }
body[data-page="achievements"] .achievement-catalog-card { display:grid; grid-template-columns:2.7rem minmax(0,1fr); gap:.8rem; min-width:0; padding:.95rem; color:var(--text); text-decoration:none; border-bottom:1px solid var(--line-faint); }
body[data-page="achievements"] .achievement-catalog-card:nth-child(odd) { border-right:1px solid var(--line-faint); }
body[data-page="achievements"] .achievement-catalog-card:hover { background:rgba(136,160,192,.025); }
body[data-page="achievements"] .achievement-catalog-card.open { opacity:.72; }
body[data-page="achievements"] .achievement-catalog-card .achievement-icon { display:grid; width:2.3rem; height:2.3rem; place-items:center; border:1px solid var(--line); }
body[data-page="achievements"] .achievement-catalog-card strong,body[data-page="achievements"] .achievement-catalog-card p { display:block; }
body[data-page="achievements"] .achievement-catalog-card strong { font-family:var(--font-serif); font-size:var(--text-base); font-weight:500; line-height:1.25; }
body[data-page="achievements"] .achievement-catalog-card p { margin:.22rem 0 .55rem; color:var(--muted); font-size:var(--text-sm); line-height:1.45; }
body[data-page="achievements"] .achievement-catalog-card footer { display:flex; justify-content:space-between; gap:.65rem; color:var(--muted); font-size:var(--text-sm); }
body[data-page="achievements"] .achievement-catalog-card.unlocked footer span { color:var(--mint); }
body[data-page="achievements"] .achievement-crown-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
body[data-page="achievements"] .achievement-crown-card { min-width:0; background:var(--surface-2); border:1px solid var(--line-faint); }
body[data-page="achievements"] .achievement-crown-card.is-owned { border-color:rgba(197,160,89,.32); box-shadow:inset 2px 0 var(--amber); }
body[data-page="achievements"] .achievement-crown-card-head { display:grid; grid-template-columns:3rem minmax(0,1fr) auto; gap:.85rem; align-items:center; padding:1rem; color:var(--text); text-decoration:none; }
body[data-page="achievements"] .crown-sigil { display:grid; width:2.7rem; height:2.7rem; place-items:center; font-size:1.2rem; border:1px solid rgba(197,160,89,.2); background:rgba(197,160,89,.035); }
body[data-page="achievements"] .achievement-crown-card-head strong,body[data-page="achievements"] .achievement-crown-card-head small { display:block; }
body[data-page="achievements"] .achievement-crown-card-head strong { font-family:var(--font-serif); font-size:var(--text-base); font-weight:500; }
body[data-page="achievements"] .achievement-crown-card-head small { margin-top:.18rem; color:var(--muted); font-size:var(--text-sm); }
body[data-page="achievements"] .achievement-crown-card-head > i { color:var(--muted); }
body[data-page="achievements"] .achievement-crown-holder { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.75rem; align-items:center; padding:.75rem 1rem; background:rgba(197,160,89,.035); border-top:1px solid var(--line-faint); border-bottom:1px solid var(--line-faint); font-size:var(--text-sm); }
body[data-page="achievements"] .achievement-crown-holder > span { color:var(--muted); }
body[data-page="achievements"] .achievement-crown-holder a { color:var(--amber); text-decoration:none; }
body[data-page="achievements"] .achievement-crown-holder b { font-family:var(--font-serif); font-weight:500; }
body[data-page="achievements"] .achievement-crown-race { padding:.45rem 1rem; }
body[data-page="achievements"] .achievement-crown-race > div { display:grid; grid-template-columns:2.25rem minmax(0,1fr) auto; gap:.55rem; padding:.5rem 0; color:var(--muted); border-top:1px solid var(--line-faint); font-size:var(--text-sm); }
body[data-page="achievements"] .achievement-crown-race > div:first-child { border-top:0; }
body[data-page="achievements"] .achievement-crown-race > div.is-focus { color:var(--text); }
body[data-page="achievements"] .achievement-crown-race a { color:inherit; text-decoration:none; }
body[data-page="achievements"] .achievement-crown-race strong { color:var(--text); font-family:var(--font-serif); font-weight:500; }
body[data-page="achievements"] .achievement-crown-card > footer { display:flex; justify-content:space-between; gap:.75rem; padding:.7rem 1rem; color:var(--muted); border-top:1px solid var(--line-faint); font-size:var(--text-sm); }
body[data-page="achievements"] .achievement-crown-card > footer a { color:var(--ice); text-decoration:none; }
body[data-page="achievements"] .crown-owned { color:var(--amber); }

body[data-page="achievement"] .achievement-detail-hero { position:relative; display:grid; grid-template-columns:5rem minmax(0,1fr) auto; gap:1rem; align-items:center; padding:1.25rem; background:linear-gradient(120deg,rgba(136,160,192,.055),rgba(197,160,89,.035)),var(--surface-2); border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.32); overflow:hidden; }
body[data-page="achievement"] .achievement-detail-sigil { position:relative; display:grid; width:4.4rem; height:4.4rem; place-items:center; color:var(--amber); border:1px solid rgba(197,160,89,.3); transform:rotate(45deg); }
body[data-page="achievement"] .achievement-detail-sigil > span { font-size:1.6rem; transform:rotate(-45deg); }
body[data-page="achievement"] .achievement-detail-sigil > i { position:absolute; right:-.25rem; top:-.3rem; color:var(--ice); font-size:.7rem; transform:rotate(-45deg); }
body[data-page="achievement"] .achievement-detail-title h2 { margin:.12rem 0 .25rem; font-family:var(--font-title); font-size:clamp(1.45rem,1.15rem + .8vw,2.15rem); font-weight:400; }
body[data-page="achievement"] .achievement-detail-title p { max-width:54rem; margin:0; color:var(--muted); font-size:var(--text-base); line-height:1.5; }
body[data-page="achievement"] .achievement-detail-title > div { display:flex; gap:.55rem; align-items:center; margin-top:.65rem; color:var(--muted); font-size:var(--text-sm); }
body[data-page="achievement"] .detail-actions { display:flex; gap:.45rem; flex-wrap:wrap; justify-content:flex-end; }
body[data-page="achievement"] .btn-ghost { color:var(--muted); border:1px solid var(--line); border-radius:2px; font-family:var(--font-serif); font-size:var(--text-sm); }
body[data-page="achievement"] .achievement-progress-detail { overflow:hidden; }
body[data-page="achievement"] .achievement-detail-state { display:inline-flex; align-items:center; gap:.35rem; color:var(--muted); font-size:var(--text-sm); }
body[data-page="achievement"] .achievement-detail-state.unlocked { color:var(--mint); }
body[data-page="achievement"] .achievement-rule-main { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:.8rem; padding:1rem 1.2rem; border-top:1px solid var(--line-faint); }
body[data-page="achievement"] .achievement-rule-main > div { text-align:center; }
body[data-page="achievement"] .achievement-rule-main span,body[data-page="achievement"] .achievement-rule-main strong,body[data-page="achievement"] .achievement-rule-main small { display:block; }
body[data-page="achievement"] .achievement-rule-main span { color:var(--muted); font-size:var(--text-sm); }
body[data-page="achievement"] .achievement-rule-main strong { margin:.12rem 0; color:var(--amber); font-family:var(--font-serif); font-size:1.35rem; font-weight:500; }
body[data-page="achievement"] .achievement-rule-main small { color:var(--muted); font-size:var(--text-sm); }
body[data-page="achievement"] .achievement-rule-main > i { color:var(--ice); }
body[data-page="achievement"] .achievement-progress-bar { height:.42rem; margin:0 1.2rem 1rem; background:rgba(136,160,192,.07); }
body[data-page="achievement"] .achievement-progress-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--amber),var(--ice)); }
body[data-page="achievement"] .achievement-unlock-note { margin:0 1.2rem 1rem; color:var(--mint); font-size:var(--text-sm); }
body[data-page="achievement"] .achievement-detail-meta { margin:0; padding:0 1rem 1rem; }
body[data-page="achievement"] .achievement-detail-meta > div { display:flex; justify-content:space-between; gap:.9rem; padding:.7rem .15rem; border-top:1px solid var(--line-faint); font-size:var(--text-sm); }
body[data-page="achievement"] .achievement-detail-meta dt { color:var(--muted); font-weight:400; }
body[data-page="achievement"] .achievement-detail-meta dd { margin:0; color:var(--text); text-align:right; }
body[data-page="achievement"] .crown-detail-holder { display:grid; grid-template-columns:3.4rem minmax(0,1fr) auto; gap:.75rem; align-items:center; margin:0 .9rem .75rem; padding:.8rem; background:rgba(197,160,89,.04); border:1px solid rgba(197,160,89,.18); }
body[data-page="achievement"] .crown-detail-holder-icon { display:grid; width:3.4rem; height:3.4rem; place-items:center; font-size:1.45rem; }
body[data-page="achievement"] .crown-detail-holder small,body[data-page="achievement"] .crown-detail-holder strong,body[data-page="achievement"] .crown-detail-holder span { display:block; }
body[data-page="achievement"] .crown-detail-holder small,body[data-page="achievement"] .crown-detail-holder span { color:var(--muted); font-size:var(--text-sm); }
body[data-page="achievement"] .crown-detail-holder strong { font-family:var(--font-serif); font-size:var(--text-lg); font-weight:500; }
body[data-page="achievement"] .crown-detail-holder strong a { color:var(--amber); text-decoration:none; }
body[data-page="achievement"] .crown-detail-holder > b { color:var(--amber); font-family:var(--font-serif); font-size:1.25rem; font-weight:500; }
body[data-page="achievement"] .crown-detail-podium { padding:0 .9rem .8rem; }
body[data-page="achievement"] .crown-detail-podium article { display:grid; grid-template-columns:2.4rem minmax(0,1fr) auto; gap:.65rem; align-items:center; padding:.62rem .4rem; border-top:1px solid var(--line-faint); }
body[data-page="achievement"] .crown-detail-podium article.is-target { background:rgba(136,160,192,.035); box-shadow:inset 2px 0 var(--ice); }
body[data-page="achievement"] .crown-place { color:var(--amber); font-family:var(--font-serif); font-size:var(--text-sm); }
body[data-page="achievement"] .crown-detail-podium a,body[data-page="achievement"] .crown-detail-podium small { display:block; }
body[data-page="achievement"] .crown-detail-podium a { color:var(--text); font-family:var(--font-serif); font-size:var(--text-base); text-decoration:none; }
body[data-page="achievement"] .crown-detail-podium small { margin-top:.12rem; color:var(--muted); font-size:var(--text-sm); }
body[data-page="achievement"] .crown-detail-podium strong { font-family:var(--font-serif); font-size:var(--text-base); font-weight:500; }
body[data-page="achievement"] .crown-player-rank { display:grid; justify-items:center; padding:.8rem 1rem 1rem; text-align:center; border-top:1px solid var(--line-faint); }
body[data-page="achievement"] .crown-player-rank span,body[data-page="achievement"] .crown-player-rank small { color:var(--muted); font-size:var(--text-sm); }
body[data-page="achievement"] .crown-player-rank strong { margin:.1rem 0; color:var(--amber); font-family:var(--font-serif); font-size:2rem; font-weight:500; }

@media (max-width:1199.98px) {
  .overview-crown-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="achievements"] .achievement-next-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:991.98px) {
  .player-achievement-layout { grid-template-columns:1fr; }
  body[data-page="achievements"] .achievement-hero,body[data-page="achievement"] .achievement-detail-hero { grid-template-columns:4rem minmax(0,1fr); }
  body[data-page="achievements"] .achievement-jump-nav,body[data-page="achievement"] .detail-actions { grid-column:1/-1; justify-content:flex-start; }
  body[data-page="achievements"] .achievement-crown-grid { grid-template-columns:1fr; }
}
@media (max-width:767.98px) {
  .overview-crown-grid { grid-template-columns:1fr; }
  .player-held-crowns { grid-template-columns:1fr; }
  .player-crown-near > a { grid-template-columns:2rem minmax(0,1fr); }
  .player-crown-near > a > small { grid-column:2; }
  body[data-page="achievements"] .achievement-family-grid { grid-template-columns:1fr; }
  body[data-page="achievements"] .achievement-catalog-card:nth-child(odd) { border-right:0; }
}
@media (max-width:575.98px) {
  body[data-page="achievements"] .achievement-hero,body[data-page="achievement"] .achievement-detail-hero { grid-template-columns:1fr; padding:1rem; }
  body[data-page="achievements"] .achievement-hero-mark,body[data-page="achievement"] .achievement-detail-sigil { width:3.5rem; height:3.5rem; margin:0; }
  body[data-page="achievements"] .achievement-next-grid { grid-template-columns:1fr; }
  body[data-page="achievements"] .achievement-family > summary { align-items:flex-start; }
  body[data-page="achievements"] .achievement-family > summary > span { align-items:flex-start; flex-wrap:wrap; }
  body[data-page="achievements"] .achievement-crown-holder { grid-template-columns:1fr auto; }
  body[data-page="achievements"] .achievement-crown-holder > span { grid-column:1/-1; }
  body[data-page="achievement"] .achievement-rule-main { grid-template-columns:1fr; }
  body[data-page="achievement"] .achievement-rule-main > i { transform:rotate(90deg); justify-self:center; }
  body[data-page="achievement"] .crown-detail-holder { grid-template-columns:2.7rem minmax(0,1fr); }
  body[data-page="achievement"] .crown-detail-holder-icon { width:2.7rem; height:2.7rem; }
  body[data-page="achievement"] .crown-detail-holder > b { grid-column:2; }
}

/* WOSU 0.13.11 — phone-only row reflow for Galaxy-class narrow viewports. */
@media (max-width:575.98px) {
  /* Personal score history keeps one <tr> per score; only its cells reflow inside that row. */
  body[data-page="scores"] .score-history-tools {
    gap:.35rem;
    margin-bottom:0;
    padding:.55rem .7rem .45rem;
  }
  body[data-page="scores"] .score-history-search {
    flex:0 0 auto;
    width:100%;
    min-height:0;
    padding:.5rem .2rem;
  }
  body[data-page="scores"] .score-history-search .form-control {
    min-width:0;
    padding:.35rem .25rem;
    font-size:.95rem;
  }
  body[data-page="scores"] .score-history-count {
    align-self:flex-end;
    padding:.05rem .2rem .15rem;
  }
  body[data-page="scores"] .score-history-panel > .table-responsive { overflow:visible; }
  body[data-page="scores"] .score-history-list,
  body[data-page="scores"] .score-history-list thead,
  body[data-page="scores"] .score-history-list tbody {
    display:block;
    width:100%;
  }
  body[data-page="scores"] .score-history-list thead {
    border-top:1px solid var(--line-faint);
    border-bottom:1px solid var(--line-faint);
  }
  body[data-page="scores"] .score-history-list thead tr {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
  }
  body[data-page="scores"] .score-history-list thead th {
    display:block;
    min-width:0;
    padding:0;
    border:0;
  }
  body[data-page="scores"] .score-sort {
    justify-content:center;
    min-height:2.25rem;
    padding:.4rem .3rem;
    font-size:.78rem;
  }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] {
    display:grid;
    grid-template-columns:2.5rem minmax(0,1fr) auto;
    grid-template-areas:
      'rank map map'
      'rank acc pp'
      'rank mods time';
    gap:.26rem .6rem;
    width:100%;
    min-width:0;
    padding:.7rem .72rem;
    border-bottom:1px solid var(--line-faint);
  }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td {
    display:block;
    min-width:0;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(1) { grid-area:rank; align-self:center; }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(2) { grid-area:map; }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(3) { grid-area:acc; }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(4) { grid-area:pp; justify-self:end; text-align:right; }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(5) { grid-area:mods; align-self:end; }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(6) {
    grid-area:time;
    align-self:end;
    justify-self:end;
    color:var(--muted);
    font-size:.78rem;
    text-align:right;
  }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(3)::before,
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(4)::before {
    margin-right:.35rem;
    color:var(--muted);
    font-size:.68rem;
    letter-spacing:.06em;
  }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(3)::before { content:'ACC'; }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(4)::before { content:'PP'; }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(2) strong,
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(2) small {
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(2) strong {
    display:-webkit-box;
    overflow:hidden;
    line-height:1.22;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(2) small {
    display:block;
    margin-top:.12rem;
    overflow:hidden;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(3),
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(4),
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(5),
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(6) {
    line-height:1.2;
  }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] > td:nth-child(4) strong {
    display:inline;
    font-size:inherit;
  }
  body[data-page="scores"] .score-history-list tbody tr[data-score-history-row] .rank {
    width:2.25rem;
    height:2.25rem;
  }
  body[data-page="scores"] .score-history-list tr[data-score-history-empty] { display:block; }
  body[data-page="scores"] .score-history-list tr[data-score-history-empty] > td { display:block; width:100%; }

  /* Chronicle stays one event record; its fields stack inside that record instead of ellipsizing. */
  body[data-page="community"] .community-event {
    align-items:start;
    padding:.5rem .6rem;
  }
  body[data-page="community"] .community-event-icon { margin-top:.08rem; }
  body[data-page="community"] .community-event-copy {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      'player time'
      'event event'
      'detail detail';
    gap:.12rem .45rem;
  }
  body[data-page="community"] .community-event-player {
    font-size:.95rem;
  }
  body[data-page="community"] .community-event-copy time {
    font-size:.78rem;
    font-variant-numeric:tabular-nums;
  }
  body[data-page="community"] .community-event-copy h3,
  body[data-page="community"] .community-event-copy p {
    min-width:0;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
  }
  body[data-page="community"] .community-event-copy h3 {
    font-size:.9rem;
    line-height:1.25;
  }
  body[data-page="community"] .community-event-copy p {
    font-size:.82rem;
    line-height:1.3;
  }
}

/* WOSU authentication/backend foundation */
.auth-page { min-height:100vh; }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:2rem 1rem; }
.auth-card { width:min(100%,31rem); padding:1.6rem; }
.auth-brand { display:flex; align-items:center; gap:.8rem; padding-bottom:1.25rem; border-bottom:1px solid var(--line); }
.auth-brand .brand-mark { display:grid; width:2.8rem; height:2.8rem; place-items:center; color:var(--amber); border:1px solid var(--line); border-radius:.8rem; background:rgba(197,160,89,.08); }
.auth-brand strong,.auth-brand small { display:block; }.auth-brand strong { font-family:var(--font-title); letter-spacing:.18em; }.auth-brand small { color:var(--muted); font-size:.58rem; letter-spacing:.35em; }
.auth-copy { padding:1.5rem 0 1rem; }.auth-copy h1,.error-card h1,.admin-foundation h1 { margin:.3rem 0 .45rem; font-family:var(--font-title); font-size:clamp(1.45rem,5vw,2rem); }.auth-copy p { margin:0; color:var(--muted); }
.auth-form { display:grid; gap:1rem; margin-top:1rem; }.auth-form label>span { display:block; margin-bottom:.4rem; color:var(--muted); font-size:.76rem; font-weight:600; }.auth-form .form-control { min-height:2.8rem; color:var(--text); background:rgba(4,7,12,.55); border:1px solid var(--line); }.auth-form .form-control:focus { color:var(--text); background:rgba(4,7,12,.72); border-color:rgba(136,160,192,.55); box-shadow:0 0 0 .2rem rgba(136,160,192,.08); }.auth-submit { min-height:2.8rem; margin-top:.2rem; }
.auth-alert { display:flex; gap:.7rem; align-items:flex-start; margin:.3rem 0 1rem; padding:.8rem .9rem; color:#e8c7b9; background:rgba(186,92,66,.09); border:1px solid rgba(186,92,66,.22); border-radius:.7rem; font-size:.8rem; }.auth-alert i { margin-top:.08rem; }
.auth-languages { display:flex; justify-content:center; gap:.45rem; margin-top:1.4rem; }.auth-languages a { padding:.25rem .5rem; color:var(--muted); border:1px solid transparent; border-radius:.4rem; font-size:.68rem; font-weight:700; text-decoration:none; }.auth-languages a.active,.auth-languages a:hover { color:var(--text); border-color:var(--line); background:rgba(255,255,255,.025); }
.error-card { text-align:left; }.error-reference { margin:1rem 0; padding:.65rem .75rem; color:var(--muted); border-left:2px solid var(--amber); background:rgba(197,160,89,.05); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; overflow-wrap:anywhere; }
.admin-foundation { max-width:68rem; margin:0 auto; }.admin-foundation .panel-head h1 { font-size:1.45rem; }.admin-foundation-body { padding:0 1.4rem 1.4rem; }.admin-foundation-body>p:first-child { color:var(--muted); }
.navbar-auth-actions { display:flex; align-items:center; gap:.35rem; }
.nav-auth-form { margin:0; }
.nav-auth-link { display:inline-flex; align-items:center; gap:.35rem; min-height:2rem; padding:.35rem .55rem; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:.45rem; font:inherit; font-size:.7rem; text-decoration:none; }
button.nav-auth-link { cursor:pointer; }
.nav-auth-link:hover { color:var(--text); border-color:var(--line); background:rgba(255,255,255,.025); }
@media (max-width:991.98px) { .navbar-auth-actions { padding-top:.35rem; border-top:1px solid var(--line-faint); } }

/* WOSU administration */
.admin-page { min-height:100vh; }
.admin-topbar { position:sticky; top:0; z-index:1030; background:rgba(8,12,18,.9); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); }
.admin-topbar-inner { min-height:4.2rem; display:flex; align-items:center; gap:.75rem; }
.admin-brand { display:flex; align-items:center; gap:.7rem; margin-right:auto; color:var(--text); text-decoration:none; }.admin-brand .brand-mark { display:grid; width:2.45rem; height:2.45rem; place-items:center; color:var(--amber); border:1px solid var(--line); border-radius:.7rem; background:rgba(197,160,89,.07); }.admin-brand strong,.admin-brand small,.admin-user span,.admin-user small { display:block; }.admin-brand strong { font-family:var(--font-title); letter-spacing:.18em; font-size:.8rem; }.admin-brand small { color:var(--muted); font-size:.5rem; letter-spacing:.25em; }.admin-user { padding-right:.5rem; text-align:right; }.admin-user span { font-size:.75rem; font-weight:600; }.admin-user small { color:var(--muted); font-size:.62rem; }
.admin-layout { display:grid; grid-template-columns:14rem minmax(0,1fr); gap:1.25rem; align-items:start; padding-top:1.5rem; padding-bottom:3rem; }.admin-sidebar { position:sticky; top:5.7rem; padding:.65rem; }.admin-sidebar nav { display:grid; gap:.2rem; }.admin-sidebar nav a { display:flex; align-items:center; gap:.65rem; padding:.65rem .75rem; color:var(--muted); text-decoration:none; border-radius:.55rem; font-size:.78rem; }.admin-sidebar nav a:hover,.admin-sidebar nav a.active { color:var(--text); background:rgba(136,160,192,.08); }.admin-sidebar nav i { width:1rem; text-align:center; }.admin-role-list { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.8rem; padding:.8rem .6rem .2rem; border-top:1px solid var(--line-faint); }.admin-role-list small { width:100%; color:var(--muted); font-size:.55rem; letter-spacing:.15em; }.admin-role-list span,.admin-chip-list span { padding:.22rem .4rem; color:var(--mint); background:rgba(145,180,165,.07); border:1px solid rgba(145,180,165,.14); border-radius:.35rem; font-size:.62rem; }
.admin-content { min-width:0; }.admin-page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.2rem; }.admin-page-head h1 { margin:.25rem 0; font-family:var(--font-title); font-size:clamp(1.45rem,3vw,2rem); }.admin-page-head p { margin:0; color:var(--muted); font-size:.8rem; }.admin-page-head-row .soft-link { display:block; margin-bottom:.55rem; }.admin-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.8rem; margin-bottom:1rem; }.admin-stat-grid .metric-card { min-height:5.7rem; }.admin-stat-grid .metric-card strong { font-size:1.4rem; }
.admin-panel-body { padding:0 1.4rem 1.4rem; color:var(--muted); font-size:.82rem; }.admin-panel-body code { display:block; padding:.75rem; color:var(--ice); background:rgba(0,0,0,.2); border:1px solid var(--line-faint); border-radius:.5rem; }.admin-info-panel .panel-head h2,.admin-form-panel .panel-head h2 { font-size:1rem; }.admin-form-panel>summary { padding:1rem 1.2rem; cursor:pointer; font-weight:600; }.admin-form-panel>summary i { margin-right:.4rem; color:var(--ice); }.admin-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; padding:1.2rem; border-top:1px solid var(--line-faint); }.admin-form-grid label>span,.admin-inline-form>small { display:block; margin-bottom:.35rem; color:var(--muted); font-size:.68rem; }.admin-form-grid .form-control,.admin-form-grid .form-select,.admin-inline-form .form-control { color:var(--text); background:rgba(5,8,12,.55); border-color:var(--line); }.admin-form-grid textarea { min-height:6rem; }.admin-wide { grid-column:1/-1; }.admin-inline-form { display:grid; grid-template-columns:minmax(14rem,1fr) auto; gap:.65rem; align-items:center; padding:0 1.4rem 1.4rem; }.admin-inline-form small { grid-column:1/-1; margin:0; }.admin-search { display:flex; gap:.6rem; align-items:center; padding:.8rem 1rem; border-bottom:1px solid var(--line); }.admin-search>i { color:var(--muted); }.admin-search .form-control { color:var(--text); background:transparent; border:0; box-shadow:none; }
.admin-table td { vertical-align:middle; }.admin-table td small { display:block; margin-top:.2rem; color:var(--muted); font-size:.65rem; }.admin-chip-list { display:flex; flex-wrap:wrap; gap:.25rem; }.admin-two-col { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(15rem,.8fr); gap:1rem; }.admin-kv { display:grid; grid-template-columns:minmax(8rem,.7fr) minmax(0,1.3fr); gap:.55rem .9rem; }.admin-kv span { color:var(--muted); }.admin-kv strong { color:var(--text); font-weight:500; overflow-wrap:anywhere; }.admin-check-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.55rem; padding:0 1.4rem 1.4rem; }.admin-check { display:flex; gap:.6rem; align-items:flex-start; padding:.7rem; border:1px solid var(--line-faint); border-radius:.55rem; background:rgba(255,255,255,.015); }.admin-check input { margin-top:.2rem; }.admin-check strong,.admin-check small { display:block; }.admin-check strong { font-size:.75rem; }.admin-check small { margin-top:.15rem; color:var(--muted); font-size:.62rem; }.admin-permission-list { display:flex; flex-wrap:wrap; gap:.45rem; }.admin-permission-list>span { display:grid; grid-template-columns:auto 1fr; gap:0 .45rem; min-width:14rem; padding:.55rem .65rem; border:1px solid var(--line-faint); border-radius:.5rem; }.admin-permission-list i { grid-row:1/3; color:var(--ice); }.admin-permission-list strong,.admin-permission-list small { display:block; }.admin-permission-list strong { font-size:.68rem; }.admin-permission-list small { color:var(--muted); font-size:.6rem; }
.admin-notice { display:flex; align-items:center; gap:.55rem; margin-bottom:1rem; padding:.65rem .8rem; color:var(--mint); background:rgba(145,180,165,.06); border:1px solid rgba(145,180,165,.16); border-radius:.55rem; font-size:.75rem; text-transform:capitalize; }.admin-danger-panel { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.2rem; border-color:rgba(190,80,80,.25); }.admin-danger-panel p { margin:.2rem 0 0; color:var(--muted); font-size:.7rem; }.admin-audit-table pre,.admin-occurrence pre { max-width:60rem; max-height:24rem; overflow:auto; margin:.6rem 0 0; padding:.75rem; color:#c9d2de; background:#07090d; border:1px solid var(--line-faint); border-radius:.45rem; font-size:.68rem; white-space:pre-wrap; overflow-wrap:anywhere; }.admin-audit-table details summary,.admin-occurrence details summary { color:var(--ice); cursor:pointer; font-size:.68rem; }.admin-severity { display:inline-flex; padding:.25rem .45rem; border:1px solid var(--line); border-radius:.35rem; font-size:.65rem; text-transform:uppercase; }.severity-critical { color:#ffb1ad; border-color:rgba(255,100,90,.35); }.severity-error { color:#e8b7a6; border-color:rgba(210,120,90,.3); }.severity-warning { color:#e3d09a; border-color:rgba(210,180,90,.3); }.severity-info { color:var(--ice); }.admin-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.68rem; }.admin-occurrences>h2 { margin:0 0 .8rem; font-family:var(--font-title); font-size:1.1rem; }.admin-occurrence { margin-bottom:.7rem; padding:1rem; }.admin-occurrence header { display:flex; justify-content:space-between; gap:1rem; }.admin-occurrence header strong,.admin-occurrence header small { display:block; }.admin-occurrence header small { margin-top:.15rem; color:var(--muted); font-size:.65rem; }.admin-occurrence>p { margin:.8rem 0; font-size:.78rem; overflow-wrap:anywhere; }
@media (max-width:991.98px) { .admin-layout { grid-template-columns:1fr; }.admin-sidebar { position:static; }.admin-sidebar nav { grid-template-columns:repeat(3,1fr); }.admin-sidebar nav a { justify-content:center; }.admin-two-col { grid-template-columns:1fr; } }
@media (max-width:575.98px) { .admin-topbar-inner { flex-wrap:wrap; padding:.55rem .75rem; }.admin-user { order:4; width:100%; text-align:left; }.admin-layout { padding-left:.7rem; padding-right:.7rem; }.admin-sidebar nav { grid-template-columns:1fr 1fr; }.admin-form-grid,.admin-inline-form { grid-template-columns:1fr; }.admin-wide,.admin-inline-form small { grid-column:1; }.admin-page-head { display:block; }.admin-kv { grid-template-columns:1fr; }.admin-kv strong { margin-bottom:.35rem; } }

/* WOSU 0.14.4 — compact authenticated navbar utilities. */
@media (min-width:992px) {
  .frost-nav .navbar-nav { gap:.12rem !important; }
  .frost-nav .navbar-nav .nav-link { padding-left:.62rem; padding-right:.62rem; white-space:nowrap; }
}
.navbar-utility { display:flex; align-items:center; gap:.22rem; flex:0 0 auto; }
.nav-auth-form { margin:0; }
.nav-language { position:relative; }
.nav-language > summary,
.nav-utility-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  min-height:2rem;
  color:var(--muted);
  background:rgba(255,255,255,.012);
  border:1px solid transparent;
  border-radius:2px;
  font-family:var(--font-serif);
  font-size:.72rem;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.nav-language > summary { min-width:3.45rem; padding:.42rem .48rem; list-style:none; }
.nav-language > summary::-webkit-details-marker { display:none; }
.nav-language > summary::marker { display:none; content:''; }
.nav-language > summary > span { color:var(--text); letter-spacing:.08em; }
.nav-language > summary > i:first-child { color:var(--amber); font-size:.76rem; }
.nav-language-chevron { color:var(--muted); font-size:.52rem; transition:transform .16s ease; }
.nav-language[open] .nav-language-chevron { transform:rotate(180deg); }
.nav-language > summary:hover,
.nav-language[open] > summary,
.nav-utility-action:hover,
.nav-utility-action:focus-visible { color:var(--text); border-color:var(--line); background:rgba(197,160,89,.055); }
.nav-language-menu {
  position:absolute;
  top:calc(100% + .45rem);
  right:0;
  z-index:1050;
  min-width:9.5rem;
  padding:.3rem;
  background:rgba(8,11,16,.97);
  border:1px solid var(--line);
  box-shadow:0 14px 38px rgba(0,0,0,.38);
  backdrop-filter:blur(18px);
}
.nav-language-menu a { display:grid; grid-template-columns:2rem minmax(0,1fr); align-items:center; gap:.45rem; padding:.48rem .55rem; color:var(--muted); text-decoration:none; border:1px solid transparent; }
.nav-language-menu a:hover,.nav-language-menu a.active { color:var(--text); border-color:var(--line-faint); background:rgba(197,160,89,.055); }
.nav-language-menu a > span { font-family:var(--font-serif); font-size:.72rem; letter-spacing:.08em; }
.nav-language-menu a > small { color:inherit; font-size:.65rem; white-space:nowrap; }
.nav-utility-action { width:2rem; padding:0; appearance:none; }
button.nav-utility-action { cursor:pointer; }
.nav-utility-action > i { font-size:.76rem; }
.nav-utility-action > span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width:991.98px) {
  .navbar-utility { margin-left:0 !important; padding:.65rem 0 .15rem; border-top:1px solid var(--line-faint); }
  .nav-language { flex:0 0 auto; }
  .nav-language-menu { left:0; right:auto; }
  .nav-utility-action { width:auto; padding:.42rem .58rem; }
  .nav-utility-action > span { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal; }
}

/* WOSU 0.14.5 — navbar dropdowns must paint above page content. */
body .frost-nav {
  z-index:1040;
  overflow:visible;
}
body .frost-nav > .container,
body .frost-nav .navbar-collapse,
body .navbar-utility,
body .nav-language {
  overflow:visible;
}