/* Photographer studio presentation. Data and payment flows live in photographer.js. */
:root {
    --ph-bg: #f5f6f4;
    --ph-text: #202c28;
    --ph-text-dim: #66716b;
    --ph-text-mute: #737f78;
    --ph-border: #e2e7e1;
    --ph-accent: #32664f;
    --ph-accent-soft: #edf4ee;
    --ph-success: #327557;
    --ph-radius: 16px;
    --ph-radius-sm: 9px;
}
body { font-family: Inter, 'Segoe UI', sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:where(button, a, summary, input, select):focus-visible { outline: 3px solid #8ea88a; outline-offset: 3px; }
.studio-icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.sidebar { width: 238px; position: sticky; top: 0; height: 100dvh; background: #182a23; border: 0; color: #f4f7ef; padding: 32px 16px 22px; }
.sidebar-brand { padding: 0 12px 29px; border-color: #ffffff15; margin-bottom: 22px; }
.sidebar-brand h1 { font-size: 23px; letter-spacing: -1px; font-weight: 700; }
.brand-dot { color: #bdda91; }
.sidebar-brand .studio-brand-label { display: block; font-size: 9px; letter-spacing: 2px; margin-top: 7px; color: #a8b9ad; }
.sidebar-user { padding: 0; margin-bottom: 22px; }
.sidebar-user-button { padding: 10px; border: 1px solid #ffffff15; border-radius: 12px; color: #edf4ed; gap: 10px; }
.sidebar-user-button:hover, .sidebar-user-button[aria-expanded="true"] { background: #ffffff09; border-color: #ffffff30; }
.sidebar-user-meta #photographer-name { color: #f4f7ef; font-size: 13px; }
.sidebar-user-chevron { color: #9caf9f; }
.user-avatar { width: 36px; height: 36px; border-color: #ffffff25; }
.live-indicator { background: transparent; color: #c0d5ba; padding: 0; font-size: 9px; letter-spacing: 1px; }
.live-indicator-dot { width: 5px; height: 5px; background: #bdda91; }
.sidebar-nav { padding: 0; gap: 7px; }
.nav-item { min-height: 46px; padding: 12px 15px; color: #b6c5bd; gap: 12px; font-size: 13px; }
.nav-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.nav-item:hover { color: #fff; background: #ffffff09; }
.nav-item.active { background: #d8e9c2; color: #233d2c; font-weight: 600; }
.studio-public-link { margin: auto 12px 0; padding-top: 26px; border-top: 1px solid #ffffff18; display: flex; justify-content: space-between; font-size: 12px; text-decoration: none; color: #c1cec6; }
.studio-public-link:hover { color: #fff; }
.main-content { padding: 42px clamp(22px, 3vw, 56px) 60px; max-width: 1700px; margin: 0 auto; width: 100%; }
.studio-eyebrow { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.7px; color: #718174; margin-bottom: 8px; }
.page-header { margin-bottom: 28px; align-items: center; }
.page-header h2 { font-size: clamp(26px, 2.3vw, 34px); font-weight: 600; letter-spacing: -1.2px; margin-bottom: 6px; }
.page-header p { font-size: 12px; }
.range-tabs { padding: 5px; border-radius: 11px; background: #ecefea; border: 0; gap: 2px; flex-shrink: 0; }
.range-tab { padding: 9px 13px; border-radius: 7px; font-size: 11px; min-height: 36px; }
.range-tab.active { background: #fff; color: #24382c; box-shadow: 0 1px 4px #1f382114; }
.range-tab:hover:not(.active) { background: #e2e8df; }
.today-callout { position: relative; overflow: hidden; border: 0; border-radius: 18px; padding: 26px 30px; margin-bottom: 22px; gap: 34px; background: #253e32; color: #fff; box-shadow: 0 8px 24px #203b2a0a; }
.today-callout::after { content: ''; position: absolute; width: 220px; height: 220px; border: 1px solid #c5dcb91a; border-radius: 50%; right: -60px; top: -130px; pointer-events: none; box-shadow: 0 0 0 32px #c5dcb907, 0 0 0 64px #c5dcb906; }
.today-callout-main { align-items: flex-start; gap: 0; }
.today-callout .studio-eyebrow { color: #c0d4b5; font-size: 9px; }
.today-callout-amount { color: #eef6e7; font-size: 36px; line-height: 1.25; letter-spacing: -1.4px; font-weight: 600; }
.today-callout-label { color: #a9bfac; font-size: 11px; letter-spacing: 0; text-transform: none; margin-top: 5px; }
.today-callout-divider { background: #ffffff20; height: 58px; }
.today-callout-stats { gap: 35px; }
.today-callout-stat-label { color: #bbcabc; font-size: 10px; letter-spacing: .6px; }
.today-callout-stat-value { color: #f1f6eb; font-size: 22px; }
.today-callout-stat-value.down { color: #ffb8a7; }
.today-callout-stat-value.up { color: #d0e8a6; }
.stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card { min-width: 0; padding: 21px 23px 14px; border-radius: 14px; box-shadow: 0 2px 3px #25352602; }
.stat-card .stat-icon { display: flex; align-items: center; gap: 9px; color: #69756b; font-size: 11px; margin-bottom: 13px; }
.stat-card .stat-icon .studio-icon { width: 17px; height: 17px; color: #839383; }
.stat-value { font-size: clamp(23px, 2vw, 29px); letter-spacing: -.9px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-sparkline { height: 27px; margin-top: 15px; opacity: .7; }
.sparkline-line { stroke: #8a9a8a; }
.sparkline-line.sparkline-deduct { stroke: #af9280; }
.stat-card.stat-profit { background: #edf3e7; border-color: #d4e2c7; }
.stat-card.stat-profit .stat-value { color: #315e3f; }
.sparkline-line.sparkline-profit { stroke: #4c815a; }
.premium-panel { border-radius: 16px; padding: 23px 25px; margin-bottom: 20px; box-shadow: 0 2px 3px #25352602; }
.panel-heading { margin-bottom: 18px; }
.panel-heading h3 { font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.achievements-panel { background: #fafbf8; }
.achievements-heading { cursor: pointer; margin-bottom: 0; list-style: none; }
.achievements-heading::-webkit-details-marker { display: none; }
.achievements-panel[open] .achievements-heading { margin-bottom: 22px; }
.achievements-heading-main { flex-wrap: wrap; row-gap: 7px; }
.achievements-level { color: #5b744a; font-size: 11px; }
.achievements-xp-bar { background: #77945b; }
.studio-expand { font-size: 11px; color: #607154; display: flex; gap: 12px; align-items: center; }
.studio-expand span { font-size: 20px; transition: transform .2s; }
.achievements-panel[open] .studio-expand span { transform: rotate(180deg); }
.achievements-ladders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ladder { padding: 14px; background: #f2f5ee; }
.tier { padding-top: 10px; padding-bottom: 10px; }
.tier.active { border-color: #cedcbf; background: #fafff2; box-shadow: none; }
.tier-next-badge { background: #718653; }
.tier-bar-fill { background: #92ab73; }
.insights-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.insight-card { background: #f8faf6; border: 1px solid #e2e9dd; border-radius: 12px; padding: 20px; }
.insight-card.good { border-left-color: #d1dfc6; }
.insight-text { max-width: 65ch; font-size: 12px; line-height: 1.7; }
.insight-title { font-size: 13px; }
.btn { min-height: 40px; padding: 10px 16px; border-radius: 9px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
.btn-primary:hover { background: #274f3e; }
.btn-secondary:hover { border-color: #b8c8b5; background: #f4f8f0; }
.form-group input, .form-group select, .settings-field input, .orders-toolbar-field select { min-height: 44px; border-radius: 8px; }
.form-group label { font-size: 12px; }
.form-row { gap: 18px; }
.form-group code, code { overflow-wrap: anywhere; }
.data-table { font-size: 12px; }
.data-table thead th { background: #f6f8f3; font-size: 10px; letter-spacing: .5px; padding: 13px 14px; }
.data-table tbody td { padding: 16px 14px; }
.data-table tbody tr:hover { background: #f5f8f1; }
#gallery-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 22px; }
.gallery-card { border-radius: 14px; box-shadow: 0 4px 14px #20302304; }
.gallery-card:hover { border-color: #b5c8ac; box-shadow: 0 8px 24px #2030230b; }
.gallery-card-cover { aspect-ratio: 16 / 10; }
.gallery-card-body { padding: 19px 20px 12px; }
.gallery-card-title { font-size: 16px; font-weight: 600; letter-spacing: -.4px; }
.gallery-card-meta { font-size: 11px; line-height: 1.7; }
.gallery-card-actions { padding: 8px 20px 20px; flex-wrap: wrap; gap: 8px; }
.user-menu { color: #23382c; }
.login-screen { padding: 24px; background: radial-gradient(ellipse at 20% 20%, #375542 0, #182a23 65%); }
.login-box { max-width: 410px; padding: 44px 36px 28px; border-radius: 22px; box-shadow: 0 22px 80px #0003; }
.login-box h1 { font-size: 30px; letter-spacing: -1px; }
.login-box p { font-size: 12px; margin-top: 9px; margin-bottom: 30px; }
.login-box input { min-height: 46px; margin-bottom: 18px; }
.login-box button { min-height: 46px; }
.login-box button:hover { background: #274f3e; }
.studio-login-label { display: block; text-align: left; font-size: 12px; font-weight: 500; margin-bottom: 7px; }
.login-box .login-error { margin-bottom: 0; }
@media (min-width: 1600px) { .stats-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .stat-card { padding: 20px 17px 14px; } .stat-value { font-size: 25px; } }
@media (max-width: 1100px) { .sidebar { width: 210px; } .main-content { padding: 28px 22px; } .page-header { flex-wrap: wrap; } .achievements-ladders { grid-template-columns: 1fr; } .achievements-xp-wrap { max-width: none; } }
@media (max-width: 768px) {
    .sidebar { width: 100%; height: auto; position: relative; flex-direction: row; flex-wrap: wrap; padding: 18px 18px 12px; gap: 16px; align-items: center; }
    .sidebar-brand { margin: 0 auto 0 0; padding: 0; border: 0; }
    .sidebar-brand h1 { font-size: 21px; }
    .sidebar-brand .studio-brand-label { font-size: 8px; letter-spacing: 1px; margin-top: 3px; }
    .sidebar-user { margin: 0; padding: 0; }
    .sidebar-user-button { padding: 7px; gap: 7px; }
    .sidebar-user-meta #photographer-name { max-width: 95px; font-size: 11px; }
    .sidebar-nav { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; overflow: visible; }
    .nav-item { min-width: 0; width: 100%; justify-content: center; padding: 11px 5px; font-size: 11px; gap: 6px; }
    .nav-icon, .nav-icon .studio-icon { width: 16px; height: 16px; }
    .nav-badge { margin-left: 0; min-width: 16px; padding: 0 3px; font-size: 9px; }
    .studio-public-link { display: none; }
    .main-content { padding: 26px 16px 40px; }
    .page-header { align-items: stretch; gap: 19px; margin-bottom: 20px; }
    .page-header > div.range-tabs { flex-direction: row; display: flex; justify-content: space-between; }
    .range-tab { flex: 1; padding: 8px 9px; }
    .today-callout { padding: 23px; gap: 20px; flex-wrap: wrap; }
    .today-callout-amount { font-size: 32px; }
    .today-callout-stats { gap: 24px; }
    .today-callout-divider { display: none; }
    .today-callout-stat-value { font-size: 19px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat-card { padding: 16px 14px 9px; }
    .stat-card .stat-icon { font-size: 10px; gap: 6px; min-height: 28px; margin-bottom: 8px; }
    .stat-card .stat-icon .studio-icon { width: 15px; height: 15px; }
    .stat-value { font-size: 23px; }
    .premium-panel { padding: 19px 16px; }
    .achievements-heading-main { flex-basis: 100%; }
    .achievements-xp-wrap { min-width: 120px; }
    .achievements-xp-text { text-align: left; }
    .studio-expand { font-size: 10px; }
    .orders-toolbar, .payout-request-row { flex-wrap: wrap; }
    .payout-request-row input[type="text"], .payout-request-row input[type="number"] { width: 100%; min-width: 0; }
    .top-photo-share { opacity: 1; transform: none; }
    .user-menu { right: 0; left: auto; min-width: 190px; }
}
@media (max-width: 370px) { .sidebar { padding: 14px 12px; } .sidebar-user-meta { display: none; } .stat-value { font-size: 20px; } .today-callout-stats { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* Achievement vault: game-style rewards, scoped to this component. */
#achievements-panel {
    --game-accent: #a5b7ff;
    background: radial-gradient(ellipse at 5% 0%, #293356 0, transparent 48%), #141b2b;
    color: #edf1fc; border: 1px solid #303950; padding: 28px;
    box-shadow: 0 12px 30px #101a2814; border-radius: 20px;
}
#achievements-panel .achievements-heading { gap: 22px; }
#achievements-panel .achievements-heading-main { align-items: center; gap: 30px; }
#achievements-panel .achievements-heading h3 { display: block; font-size: 21px; letter-spacing: -.7px; color: #f4f6ff; }
.game-header-kicker { display: block; color: #a4aed0; font-size: 9px; letter-spacing: 2.2px; margin-bottom: 7px; font-weight: 500; }
#achievements-panel .achievements-count { background: #ffffff0d; color: #bfc9e1; border: 1px solid #ffffff10; font-size: 10px; padding: 3px 8px; vertical-align: middle; }
#achievements-panel .achievements-level { display: flex; gap: 11px; color: #aebcff; }
#achievements-panel .achievements-level .game-medal { width: 49px; height: 56px; }
#achievements-panel .achievements-level small { display: block; font-size: 9px; letter-spacing: 1.8px; color: #a2adcc; margin-bottom: 3px; }
#achievements-panel .achievements-level strong { font-size: 14px; color: #e6eaff; font-weight: 600; }
#achievements-panel .achievements-xp-wrap { min-width: 170px; }
#achievements-panel .achievements-xp-text { color: #b6c2e1; font-size: 10px; margin-bottom: 4px; }
#achievements-panel .achievements-xp-track { height: 8px; border: 1px solid #ffffff0d; background: #0d1423; padding: 1px; }
#achievements-panel .achievements-xp-bar { background: linear-gradient(90deg, #747ef7, #b4adff); box-shadow: 0 0 12px #8b83ff66; }
#achievements-panel .studio-expand { color: #aab6d0; font-size: 10px; }
#achievements-panel[open] .achievements-heading { margin-bottom: 26px; }
#achievements-panel .achievements-ladders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.game-track { --game-accent: #9bb8ff; --game-glow: #6e8ff726; border: 1px solid #ffffff12; border-radius: 15px; padding: 20px 18px 18px; min-width: 0; background: linear-gradient(155deg, #ffffff07, transparent 65%), #1b2436; }
.game-track[data-ladder="profit"] { --game-accent: #f1cc82; --game-glow: #f1ba5020; }
.game-track[data-ladder="galleries"] { --game-accent: #82ddc9; --game-glow: #52cbb520; }
.game-track-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.game-track-header h4 { font-size: 13px; font-weight: 600; color: #e6edfc; margin: 0; }
.game-track-header > span { color: #a7b4cc; font-size: 9px; border: 1px solid #ffffff12; border-radius: 6px; padding: 3px 6px; }
.game-feature { display: flex; align-items: center; gap: 16px; margin: 22px 0 20px; min-height: 100px; }
.game-feature-medal { width: 92px; flex-shrink: 0; position: relative; background: radial-gradient(ellipse, var(--game-glow), transparent 72%); }
.game-medal { display: block; width: 100%; height: auto; color: var(--game-accent); overflow: visible; }
.medal-shell { fill: var(--game-glow, #7b8aff22); stroke: currentColor; stroke-width: 1.2; }
.medal-inset { fill: #ffffff03; stroke: currentColor; stroke-width: .5; opacity: .5; }
.medal-rank { fill: currentColor; font-family: Inter, 'Segoe UI', sans-serif; font-size: 7px; letter-spacing: 1px; font-weight: 700; }
.game-feature-medal .game-medal { filter: drop-shadow(0 3px 12px var(--game-glow)); }
.game-feature-copy { min-width: 0; }
.game-rarity { color: var(--game-accent); font-size: 8px; letter-spacing: 1.5px; font-weight: 600; }
.game-feature h5 { color: #f3f6ff; font-size: 21px; font-weight: 600; letter-spacing: -.6px; margin: 6px 0 8px; line-height: 1.25; }
.game-xp-reward { display: inline-block; color: var(--game-accent); background: var(--game-glow); border-radius: 5px; padding: 4px 7px; font-size: 9px; }
.game-progress-label { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: #a8b6cd; margin-bottom: 9px; }
.game-progress-label strong { color: #dce5f4; font-weight: 500; text-align: right; }
.game-progress { height: 6px; border-radius: 4px; background: #0f1726; overflow: hidden; }
.game-progress > span { display: block; height: 100%; background: var(--game-accent); border-radius: inherit; box-shadow: 0 0 8px var(--game-accent); transition: width .4s ease; }
.game-collection-label { font-size: 8px; letter-spacing: 1.6px; color: #8e9db8; margin: 23px 0 12px; padding-top: 17px; border-top: 1px solid #ffffff0d; }
.game-collection { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; align-items: stretch; }
.game-reward { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 3px; border-radius: 8px; border: 1px solid #ffffff09; background: #111a29; min-width: 0; }
.game-reward .game-medal { width: 42px; max-width: 100%; margin: 7px 0; }
.game-reward-xp { font-size: 7px; color: #a0aec7; white-space: nowrap; }
.game-reward strong { color: #c5cfe1; font-size: 8px; font-weight: 500; line-height: 1.4; min-height: 23px; }
.game-reward-state { margin-top: 6px; font-size: 7px; color: #8c9bb7; }
.game-reward.is-earned { background: var(--game-glow); border-color: color-mix(in srgb, var(--game-accent) 30%, transparent); }
.game-reward.is-earned .game-reward-state { color: var(--game-accent); }
.game-reward.is-next { border: 1px dashed color-mix(in srgb, var(--game-accent) 45%, transparent); }
.game-reward.is-next .game-reward-state { color: var(--game-accent); }
.game-reward.is-locked .game-medal { color: #596b86; --game-glow: #ffffff03; }
.game-unlock-date { color: #b0c0d4; font-size: 7px; margin-top: 3px; }
#achievements-panel .achievements-timeline { color: #c0cce3; border-color: #ffffff16; background: #ffffff04; border-radius: 10px; padding: 15px; }
#achievements-panel .achievements-timeline-header, #achievements-panel .achievements-timeline-month-label, #achievements-panel .achievements-timeline-tier { color: #c4d0e8; }
#achievements-panel .achievements-timeline-ladder, #achievements-panel .achievements-timeline-date { color: #a7b9d5; }
@media (min-width: 1600px) { .game-reward .game-medal { width: 51px; } .game-reward strong { font-size: 9px; } .game-reward-state, .game-reward-xp { font-size: 8px; } }
@media (max-width: 1200px) { #achievements-panel .achievements-ladders { grid-template-columns: 1fr; } .game-collection { grid-template-columns: repeat(5, minmax(0, 1fr)); } .game-reward .game-medal { width: 52px; } .game-reward strong { font-size: 10px; } .game-reward-state, .game-reward-xp { font-size: 9px; } .game-feature { margin: 16px 0; } .game-feature-medal { width: 82px; } }
@media (max-width: 768px) {
    #achievements-panel { padding: 21px 15px; }
    #achievements-panel .achievements-heading-main { gap: 18px; justify-content: space-between; }
    #achievements-panel .achievements-heading h3 { font-size: 19px; }
    #achievements-panel .achievements-level { width: 100%; }
    #achievements-panel .achievements-level .game-medal { width: 40px; height: 46px; }
    #achievements-panel .achievements-heading { gap: 17px; }
    #achievements-panel .achievements-xp-wrap { min-width: 150px; }
    .game-track { padding: 18px 13px; }
    .game-collection { gap: 4px; }
    .game-reward { padding: 7px 2px; }
    .game-reward .game-medal { width: 40px; }
    .game-reward strong { font-size: 8px; }
    .game-reward-state, .game-reward-xp { font-size: 7px; }
}
.game-track[data-ladder="profit"] .game-collection,
.game-track[data-ladder="galleries"] .game-collection { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Trophy shelf: awarded medals replace the old chronological list. */
.achievements-earned { margin-bottom: 24px; padding: 22px; border: 1px solid #ffffff12; background: #ffffff03; border-radius: 15px; }
.achievements-earned[hidden] { display: none; }
.earned-shelf-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.earned-shelf-heading h4 { margin: 0; font-size: 16px; font-weight: 600; color: #edf1fc; }
.earned-shelf-heading h4 span { font-size: 10px; border-radius: 6px; background: #ffffff0b; color: #b8c6de; padding: 3px 7px; margin-left: 6px; }
.earned-shelf-heading p { font-size: 11px; margin: 0; color: #a6b5d0; }
.earned-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px; }
.earned-badge { --game-accent: #9bb8ff; --game-glow: #6e8ff726; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 12px 15px; border: 1px solid color-mix(in srgb, var(--game-accent) 28%, transparent); border-radius: 13px; background: radial-gradient(ellipse at 50% 35%, var(--game-glow), transparent 70%), #182235; }
.earned-badge[data-ladder="profit"] { --game-accent: #f1cc82; --game-glow: #f1ba5020; }
.earned-badge[data-ladder="galleries"] { --game-accent: #82ddc9; --game-glow: #52cbb520; }
.earned-badge .game-medal { width: 76px; margin: 15px 0 12px; filter: drop-shadow(0 3px 10px var(--game-glow)); }
.earned-badge-category { text-transform: uppercase; letter-spacing: 1.8px; font-size: 8px; color: var(--game-accent); }
.earned-badge-check { position: absolute; top: 12px; right: 12px; color: var(--game-accent); font-size: 9px; border: 1px solid #ffffff18; border-radius: 50%; width: 18px; height: 18px; line-height: 16px; }
.earned-badge h5 { margin: 0 0 8px; color: #f2f5ff; font-size: 13px; font-weight: 600; }
.earned-badge-xp { color: var(--game-accent); font-size: 10px; padding: 3px 8px; border-radius: 5px; background: var(--game-glow); }
.earned-badge-date { font-size: 9px; color: #a5b5ce; margin-top: 12px; }
@media (max-width: 768px) {
    .achievements-earned { padding: 16px 12px; }
    .earned-shelf-heading { flex-wrap: wrap; gap: 6px; }
    .earned-shelf-heading p { font-size: 10px; }
    .earned-badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .earned-badge { padding: 16px 6px 13px; }
    .earned-badge .game-medal { width: 62px; }
    .earned-badge h5 { font-size: 11px; }
    .earned-badge-category { font-size: 7px; }
    .earned-badge-check { right: 7px; top: 8px; width: 14px; height: 14px; line-height: 12px; font-size: 8px; }
}
/* Compact dashboard summary; expand once for the single full badge collection. */
#achievements-panel { padding: 18px 22px; border-radius: 15px; box-shadow: none; }
#achievements-panel .achievements-heading { display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(150px, 220px) auto; gap: 22px; align-items: center; }
#achievements-panel .achievements-heading-main { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
#achievements-panel .achievements-heading h3 { font-size: 13px; letter-spacing: -.1px; }
#achievements-panel .achievements-count { font-size: 9px; padding: 2px 6px; }
#achievements-panel .achievements-level { gap: 7px; }
#achievements-panel .achievements-level .game-medal { width: 24px; height: 28px; }
#achievements-panel .achievements-level > span { display: flex; align-items: center; gap: 7px; }
#achievements-panel .achievements-level small { margin: 0; font-size: 8px; letter-spacing: .5px; }
#achievements-panel .achievements-level strong { font-size: 10px; font-weight: 500; }
#achievements-panel .achievements-xp-wrap { min-width: 0; width: 100%; }
#achievements-panel .achievements-xp-text { font-size: 9px; }
#achievements-panel .achievements-xp-track { height: 5px; padding: 0; }
#achievements-panel .studio-expand { white-space: nowrap; font-size: 10px; gap: 8px; }
.compact-badges { display: flex; align-items: center; gap: 6px; min-width: 0; }
.compact-badge { --game-accent: #9bb8ff; --game-glow: #6e8ff726; display: block; }
.compact-badge[data-ladder="profit"] { --game-accent: #f1cc82; --game-glow: #f1ba5020; }
.compact-badge[data-ladder="galleries"] { --game-accent: #82ddc9; --game-glow: #52cbb520; }
.compact-badge .game-medal { width: 32px; height: 38px; }
.compact-badge-more { font-size: 10px; color: #c5d0e7; padding: 4px; }
.compact-badge-empty { color: #a9b9d2; font-size: 10px; }
.badge-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#achievements-panel[open] .achievements-heading { margin-bottom: 18px; }
#achievements-panel .game-track { padding: 14px; }
#achievements-panel .game-feature { margin: 12px 0; min-height: 0; gap: 0; }
#achievements-panel .game-feature-medal, #achievements-panel .game-rarity { display: none; }
#achievements-panel .game-feature-copy { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 10px; }
#achievements-panel .game-feature h5 { font-size: 12px; letter-spacing: 0; margin: 0; }
#achievements-panel .game-xp-reward { font-size: 8px; padding: 3px 5px; }
#achievements-panel .game-progress-label { font-size: 9px; margin-bottom: 6px; }
#achievements-panel .game-progress { height: 4px; }
#achievements-panel .game-collection-label { display: none; }
#achievements-panel .game-collection { margin-top: 16px; }
#achievements-panel .game-reward .game-medal { width: 35px; margin: 5px 0; }
#achievements-panel .game-reward { padding: 7px 3px; }
#achievements-panel .game-reward strong { font-size: 8px; min-height: 22px; }
#achievements-panel .game-reward-xp, #achievements-panel .game-reward-state { font-size: 7px; }
@media (max-width: 1200px) {
    #achievements-panel .achievements-heading { grid-template-columns: 1fr auto; gap: 12px 20px; }
    #achievements-panel .achievements-heading-main { grid-column: 1; grid-row: 1; }
    #achievements-panel .achievements-xp-wrap { grid-column: 2; grid-row: 1; width: 170px; }
    #achievements-panel .compact-badges { grid-column: 1; grid-row: 2; }
    #achievements-panel .studio-expand { grid-column: 2; grid-row: 2; justify-self: end; }
    #achievements-panel .achievements-ladders { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 900px) { #achievements-panel .achievements-ladders { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    #achievements-panel { padding: 16px; }
    #achievements-panel .achievements-heading { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
    #achievements-panel .achievements-heading-main { gap: 5px; }
    #achievements-panel .achievements-heading h3 { font-size: 12px; }
    #achievements-panel .achievements-level { width: auto; }
    #achievements-panel .achievements-level > span { display: block; }
    #achievements-panel .achievements-level small { font-size: 7px; margin-bottom: 2px; }
    #achievements-panel .achievements-level strong { font-size: 9px; }
    #achievements-panel .achievements-xp-wrap { width: 115px; }
    #achievements-panel .achievements-xp-text { font-size: 8px; text-align: right; }
    .compact-badge .game-medal { width: 27px; height: 32px; }
    .compact-badges { gap: 4px; }
    #achievements-panel .game-reward .game-medal { width: 40px; }
}