:root { color-scheme: dark; font-family: var(--font-ui); background: #101214; color: #f0f2ef; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #c1f77b; outline-offset: 4px; }
.app-shell { min-height: 100vh; }
.brand { font-size: 25px; font-weight: 800; letter-spacing: -1.2px; }
.brand span { color: #bdf37b; }
.active { color: #c1f77b; background: #242d20; border: 1px solid #36432d; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #bdf37b; }
main { min-width: 0; width: 100%; max-width: 1660px; margin-inline: auto; padding: 22px 32px; }
.language-selector { position: relative; }
.language-selector::after { content: ""; position: absolute; right: 14px; top: 15px; width: 6px; height: 6px; border-right: 1.5px solid #a6b59c; border-bottom: 1.5px solid #a6b59c; transform: rotate(45deg); pointer-events: none; }
.language-selector select { appearance: none; min-width: 120px; min-height: 38px; padding: 9px 36px 9px 14px; border: 1px solid #3b4932; border-radius: 6px; background: #232e1e; color: #c1f77b; font-size: 12px; font-weight: 600; line-height: 18px; transition: background-color .15s, border-color .15s; }
.language-selector select:hover { background: #303f28; border-color: #657b50; }
.language-selector select:focus-visible { border-color: #c1f77b; }
.language-selector select option { background: #1a1f1c; color: #e1e5e1; }
.language-selector select option:checked { background: #303f28; color: #c1f77b; }
.page-header, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
h1 { margin: 5px 0 6px; font-size: 30px; letter-spacing: -1.2px; }
h2 { margin: 5px 0 0; font-size: var(--text-heading); font-weight: var(--weight-heading); letter-spacing: -.4px; }
h3 { margin: 0; font-size: var(--text-heading); font-weight: var(--weight-heading); }
p { line-height: 1.6; }
.muted { color: #9ca7a0; font-size: var(--text-body); font-weight: var(--weight-body); }
.page-header .muted { margin: 0; font-size: var(--text-body); font-weight: var(--weight-body); }
.eyebrow { font-size: var(--text-label); letter-spacing: 1.6px; font-weight: var(--weight-body); color: #8e9b90; margin: 0; }
.refresh-button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 9px 15px; border: 1px solid #3b4932; border-radius: 6px; background: #232e1e; color: #c1f77b; font-size: 12px; font-weight: 600; white-space: nowrap; }
.refresh-button span { font-size: 18px; line-height: 1; }
.refresh-button:hover, .button:hover { background: #303f28; }
.refresh-button:disabled { opacity: .5; cursor: wait; }
.notice { padding: 10px 14px; border: 1px solid #343e2d; border-radius: 6px; font-size: var(--text-body); color: #afbea2; background: #192016; margin: 22px 0 18px; font-weight: var(--weight-body); }
.metrics { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.metric-card { position: relative; padding: 19px 20px; border: 1px solid #303638; border-radius: 9px; background: #181d1f; min-width: 0; }
.metric-card::before { content: ''; position: absolute; top: 20px; right: 18px; width: 6px; height: 6px; background: #bdf37b; border-radius: 2px; opacity: .7; }
.metric-card p { margin: 0 0 11px; font-size: var(--text-label); font-weight: var(--weight-body); }
.metric-card strong { display: block; font-size: var(--text-body); font-weight: var(--weight-body); letter-spacing: normal; line-height: 1.15; overflow-wrap: anywhere; }
.metric-value { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.metric-status { padding: 4px 7px; border-radius: 5px; color: #e4c58b; background: #352d1c; font-size: var(--text-label); font-weight: var(--weight-body); }

.metric-card .metric-detail { color: #93a08e; font-size: var(--text-label); margin: 12px 0 0; font-weight: var(--weight-body); }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1fr) 282px; gap: 18px; align-items: start; }
.dashboard-panel { min-width: 0; border: 1px solid #303638; border-radius: 9px; background: #161b1d; overflow: hidden; }
.panel-heading { padding: 20px; border-bottom: 1px solid #2b3234; }
.count-badge { display: grid; place-items: center; min-width: 27px; height: 27px; border: 1px solid #3c4834; border-radius: 6px; color: #bdf37b; background: #232c20; font-size: var(--text-label); font-weight: var(--weight-body); }
.dashboard-aside { display: grid; gap: 18px; }
.server-columns, .server-row { display: grid; grid-template-columns: minmax(170px, 1.8fr) minmax(95px, 1fr) minmax(80px, 1fr) minmax(62px, .65fr); gap: 14px; align-items: center; }
.server-columns { background: #1b2123; padding: 11px 18px; font-size: var(--text-label); color: #9ba69d; letter-spacing: .5px; font-weight: var(--weight-body); }
.server-card { border-top: 1px solid #2b3234; }
.server-card:first-of-type { border-top: 0; }
.server-row { padding: 20px 18px 14px; }
.server-identity, .active-session-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.server-identity h3 { overflow-wrap: anywhere; }
.server-identity .muted { font-size: var(--text-body); display: block; margin-top: 5px; font-weight: var(--weight-body); }
.server-icon, .game-icon, .session-marker { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 34px; border: 1px solid #3b4733; border-radius: 6px; background: #252f20; color: #c1f77b; font-size: 18px; }
.state-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 4px; font-size: var(--text-label); line-height: 1.4; font-weight: var(--weight-body); }
.state-badge > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.state-running { color: #b9ed89; background: #24321d; }
.state-idle { color: #a8b0ad; background: #272e30; }
.state-unknown { color: #e4c58b; background: #352d1c; }
.map-cell { color: #c1cbc4; font-size: var(--text-body); overflow-wrap: anywhere; font-weight: var(--weight-body); }
.players-cell { display: grid; gap: 7px; font-size: var(--text-body); font-weight: var(--weight-body); }
.players-cell .muted { font-size: var(--text-body); font-weight: var(--weight-body); }
meter { display: block; width: 100%; max-width: 74px; height: 5px; accent-color: #bdf37b; }
meter::-webkit-meter-bar { background: #303a30; border: 0; border-radius: 3px; }
meter::-webkit-meter-optimum-value { background: #bdf37b; border-radius: 3px; }
.server-sessions { margin: 0 18px 12px; }
.server-sessions summary { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: var(--text-body); color: #a2b59a; cursor: pointer; font-weight: var(--weight-body); }
.server-sessions summary::before { content: '＋'; }
.server-sessions[open] summary::before { content: '−'; }
.server-sessions summary > span:first-child { margin-right: auto; }
.observation-label { color: #89968c; text-align: right; }
.session-history { display: grid; gap: 10px; padding: 12px 0 4px; border-top: 1px solid #303638; }
.active-session { padding: 18px 20px; border-bottom: 1px solid #2b3234; }
.active-session:last-child { border-bottom: 0; }
.active-session-heading { margin-bottom: 12px; }
.active-session-heading .muted { font-size: var(--text-body); display: block; margin-top: 4px; font-weight: var(--weight-body); }

.game-row { display: flex; gap: 12px; align-items: center; padding: 20px; }
.game-row .muted { display: block; margin-top: 5px; font-size: var(--text-body); font-weight: var(--weight-body); }
.panel-empty { margin: 0; padding: 24px 20px; }
.mobile-label { display: none; }
.empty-state { padding: 36px 20px; text-align: center; }
.empty-state .muted { max-width: 350px; margin: 0 auto 18px; }
.empty-state h3 { margin: 15px 0; }
.empty-icon { font-size: 30px; color: #bdf37b; }
.badge { display: inline-block; padding: 7px 11px; border: 1px solid #3c4536; border-radius: 6px; color: #c0d6ac; font-size: var(--text-label); font-weight: var(--weight-body); }
.page-footer { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 24px; padding-top: 16px; border-top: 1px solid #292e30; color: #859286; font-size: 10px; }
.boot-indicator { width: 40px; height: 40px; margin: 25vh auto; border: 3px solid #303435; border-top-color: #bdf37b; border-radius: 50%; }
@media (max-width: 1200px) { .dashboard-columns { grid-template-columns: minmax(0, 1fr); } .dashboard-aside { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 900px) { .brand { font-size: 22px; } main { padding: 20px; } .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .server-columns { display: none; } .server-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } .server-identity { grid-column: 1 / -1; } .mobile-label { display: block; color: #8e9b90; font-size: var(--text-label); margin-bottom: 6px; font-weight: var(--weight-body); } }
@media (max-width: 600px) { main { padding: 16px; } .page-header { align-items: flex-start; } h1 { font-size: 27px; } .page-header .muted { font-size: var(--text-body); font-weight: var(--weight-body); } .metrics { gap: 10px; } .metric-card { padding: 16px 14px; } .metric-card::before { display: none; } .metric-card strong { font-size: var(--text-body); font-weight: var(--weight-body); }  .metric-card p { font-size: var(--text-label); font-weight: var(--weight-body); } .dashboard-aside { grid-template-columns: 1fr; } .refresh-button { padding: 8px 10px; } .observation-label { max-width: 55%; } }

.session-details { padding: 14px; border: 1px solid #303a35; border-radius: 8px; background: #1b2220; }
.session-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #303a35; }
.session-id { min-width: 0; color: #bac7bf; font-family: ui-monospace, SFMono-Regular, monospace; font-size: var(--text-label); overflow-wrap: anywhere; font-weight: var(--weight-body); }
.session-state { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 5px; font-size: var(--text-label); white-space: nowrap; color: #a8b4ad; background: #303833; font-weight: var(--weight-body); }
.session-state > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.session-state-active { color: #c1f77b; background: #2c3d23; }
.session-state-scheduled { color: #bdd4fb; background: #263344; }
.session-timeline { margin: 0; display: grid; gap: 14px; }
.session-timestamp { position: relative; padding-left: 16px; }
.session-timestamp::before { content: ''; position: absolute; left: 0; top: 4px; width: 5px; height: 5px; border: 1px solid #97b080; border-radius: 50%; background: #1b2220; }
.session-timestamp:first-child::after { content: ''; position: absolute; left: 3px; top: 12px; bottom: -12px; width: 1px; background: #3b493c; }
.session-timestamp dt { color: #95a59a; font-size: var(--text-label); margin-bottom: 5px; font-weight: var(--weight-body); }
.session-timestamp dd { margin: 0; color: #d4dfd7; font-size: var(--text-body); font-weight: var(--weight-body); }
.session-timestamp time { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.session-timestamp time strong { color: #eff5ed; font-size: var(--text-body); font-weight: var(--weight-body); font-variant-numeric: tabular-nums; }
.session-server-state { margin: -3px 0 12px; }

.game-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 12px; border-bottom: 1px solid #303638; margin-top: 26px; }
.game-tab { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 42px; padding: 10px 14px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #a5b0a9; font-size: 12px; text-align: left; }
.game-tab:hover { color: #f0f2ef; background: #202824; }
.game-tab[aria-pressed="true"] { background: #26331f; color: #c1f77b; border-color: #465c36; }
.game-tab > span { min-width: 20px; padding: 2px 5px; border-radius: 4px; background: #ffffff0b; text-align: center; font-size: var(--text-label); font-weight: var(--weight-body); }
@media (max-width: 600px) { .game-tabs { gap: 4px; } .game-tab { width: 100%; } }

.expandable-group + .expandable-group { border-top: 1px solid #364135; }
.expandable-group > summary { display: flex; align-items: center; gap: 10px; padding: 17px 18px; background: #202a20; cursor: pointer; list-style: none; }
.expandable-group > summary::-webkit-details-marker { display: none; }
.group-chevron { color: #9eb58e; font-size: 21px; line-height: 1; transition: transform .15s; }
.expandable-group[open] > summary .group-chevron { transform: rotate(90deg); }
.group-icon { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #46563b; border-radius: 6px; color: #c1f77b; background: #2c3925; }
.group-title { min-width: 0; font-size: var(--text-body); font-weight: var(--weight-body); color: #e2eedb; }
.group-description { margin-left: auto; font-size: var(--text-label); color: #afbea6; text-align: right; font-weight: var(--weight-body); }
.group-content { margin-left: 16px; border-left: 1px solid #3b4737; }
@media (max-width: 600px) { .expandable-group > summary { padding: 14px 12px; gap: 7px; } .group-title { font-size: var(--text-body); font-weight: var(--weight-body); } .group-description { max-width: 74px; } .group-content { margin-left: 10px; } }
@media (prefers-reduced-motion: reduce) { .group-chevron { transition: none; } }

.active-session-cards { display: grid; gap: 12px; padding: 16px; }
.active-session-cards:empty { display: none; }
.compact-session { min-width: 0; padding: 15px; border: 1px solid #354033; border-radius: 9px; background: linear-gradient(145deg, #1e281f, #171d1b 70%); box-shadow: 0 3px 12px #00000014; }
.game-badge { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; color: #b6c1ba; font-size: var(--text-label); line-height: 1.5; overflow-wrap: anywhere; font-weight: var(--weight-body); }
.game-badge > span { min-width: 0; }
.compact-session h3 { margin-top: 10px; font-size: var(--text-heading); line-height: 1.5; overflow-wrap: anywhere; font-weight: var(--weight-heading); }
.compact-session-times { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 13px 0 0; padding-top: 12px; border-top: 1px solid #334032; }
.compact-session-times dt { color: #96a39b; font-size: var(--text-label); margin-bottom: 5px; font-weight: var(--weight-body); }
.compact-session-times dd { margin: 0; font-size: var(--text-body); font-weight: var(--weight-body); font-variant-numeric: tabular-nums; letter-spacing: normal; overflow-wrap: anywhere; }
.compact-session-times .session-remaining { color: #c1f77b; }
.compact-session-times .session-expired { color: #c4ab83; font-size: var(--text-body); letter-spacing: normal; font-weight: var(--weight-body); }

.compact-session-ended { border-color: #514838; background: linear-gradient(145deg, #29261f, #1c1e1a 70%); }
.compact-session-query { margin-top: 8px; }

.arena-link:hover { color: #bdf37b; text-decoration: underline; }
.back-link { display: inline-block; margin-bottom: 18px; color: #bdf37b; font-size: 12px; }
.arena-details-panel { margin-top: 24px; }

.app-header { border-bottom: 1px solid #292e30; background: #141719; }
.app-header-content { max-width: 1660px; margin-inline: auto; padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; min-width: 0; }
.header-identity { flex-shrink: 0; }
.app-header-content .brand { white-space: nowrap; }
.header-dashboard-link, .header-sign-in-link { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 9px 12px; border: 1px solid #3b4932; border-radius: 6px; background: #232e1e; color: #c1f77b; font-size: 12px; font-weight: 600; white-space: nowrap; }
.header-dashboard-link:hover, .header-sign-in-link:hover { background: #303f28; }
.user-menu { position: relative; }
.user-menu-toggle { width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; list-style: none; border: 1px solid #46563e; border-radius: 50%; color: #c1e39d; background: #263223; }
.user-menu-toggle::-webkit-details-marker { display: none; }
.user-menu-toggle:hover, .user-menu[open] .user-menu-toggle { border-color: #a5ce7d; background: #30432a; }
.user-menu-panel { position: absolute; right: 0; top: calc(100% + 12px); z-index: 10; width: min(240px, calc(100vw - 32px)); padding: 4px 6px; border: 1px solid #39413b; border-radius: 12px; background: #1a1f1c; box-shadow: 0 12px 36px #0008; }
.user-menu-identity { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; padding: 4px 8px 8px; border-bottom: 1px solid #343c35; }
.user-menu-avatar { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border: 1px solid #46563e; border-radius: 50%; color: #c1e39d; background: #263223; }
.user-menu-panel h2 { margin: 0; font-size: 15px; }
.user-menu-name { overflow-wrap: anywhere; }
.user-menu-links { display: grid; gap: 0; }
.user-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: #aeb9ae; text-align: left; font: inherit; font-size: 14px; }
.user-menu-item:disabled { opacity: .65; cursor: not-allowed; }
.user-menu-item svg { flex-shrink: 0; }
.user-menu-dashboard { display: none; }
.user-menu-language { display: none; padding: 8px; border-top: 1px solid #343c35; }
.user-menu-language select { width: 100%; }
.user-menu-footer { margin-top: 2px; border-top: 1px solid #343c35; padding-top: 2px; }
@media (max-width: 600px) { .app-header-content { padding: 14px 16px; gap: 10px; } .brand { font-size: 22px; } .header-actions { gap: 8px; } .language-selector select { min-width: 106px; padding-left: 12px; padding-right: 30px; } }

.arena-page-header { margin-bottom: 4px; flex-direction: column; align-items: stretch; }
.arena-page-header .arena-heading { width: 100%; }
.arena-page-header .arena-title > div { min-width: 0; }
.arena-page-header h1 { overflow-wrap: anywhere; }
.arena-page-header .page-header-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); align-items: stretch; }
.arena-page-header .page-header-actions > .button { min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.arena-details-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto min-content 1fr; grid-template-areas: "maintenance maintenance" "main connection" "main aside"; gap: 20px; margin-top: 24px; align-items: start; }
.arena-details-main, .arena-details-aside { display: grid; gap: 20px; min-width: 0; }
.arena-details-main { grid-area: main; }
.arena-maintenance-panel { grid-area: maintenance; min-width: 0; }
.arena-details-aside { grid-area: aside; }
.arena-details-grid > .arena-connection-panel { grid-area: connection; }
.section-panel-heading { min-height: 66px; padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #2b3234; }
.section-panel-heading > div { min-width: 0; overflow-wrap: anywhere; }
.section-panel-heading .button { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.section-panel-heading h2 { margin: 0; font-size: var(--text-heading); font-weight: var(--weight-heading); }
.section-panel-heading p { margin: 5px 0 0; font-size: var(--text-body); font-weight: var(--weight-body); }
.section-panel-body { min-width: 0; padding: 22px; overflow-wrap: anywhere; }
.section-empty { margin: 0; }
.detail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; row-gap: 22px; margin: 0; }
.detail-field { min-width: 0; }
.detail-field dt { color: #95a39a; font-size: var(--text-label); margin-bottom: 7px; font-weight: var(--weight-body); }
.detail-field dd { margin: 0; font-size: var(--text-body); color: #e4ebe5; overflow-wrap: anywhere; font-weight: var(--weight-body); }
.arena-runtime-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 24px; margin: 0; }
.arena-runtime-fields dd { font-size: var(--text-body); letter-spacing: normal; font-weight: var(--weight-body); }
.configuration-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.configuration-list { border-top: 1px solid #2b3234; padding-top: 20px; margin-top: 24px; min-width: 0; }
.configuration-list h3 { font-size: var(--text-label); font-weight: var(--weight-body); color: #95a39a; }
.configuration-list ul { margin: 12px 0 0; padding-left: 18px; color: #c6d2ca; line-height: 1.9; font-size: var(--text-body); font-weight: var(--weight-body); }
.configuration-list p { margin-bottom: 0; }
.map-rotation { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; counter-reset: maps; }
.map-rotation li { counter-increment: maps; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #303b34; border-radius: 5px; background: #1b231f; color: #d0decf; font-size: var(--text-body); font-weight: var(--weight-body); }
.map-rotation li::before { content: counter(maps); color: #82917e; font-size: var(--text-label); font-weight: var(--weight-body); }
.arena-address { padding: 13px 14px; border: 1px solid #354333; border-radius: 6px; background: #19231b; color: #c1f77b; font-size: var(--text-body); overflow-wrap: anywhere; font-weight: var(--weight-body); }
.arena-copy-action { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.arena-copy-action .button { width: 100%; }
.arena-connection-panel { min-width: 0; }
.arena-connection-panel .section-panel-heading { min-height: 0; padding: 16px 18px 0; border-bottom: 0; }
.arena-connection-panel .section-panel-heading h2 { font-size: var(--text-heading); font-weight: var(--weight-heading); }
.arena-connection-panel .section-panel-body { padding: 14px 18px 18px; }
.arena-connection-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); align-items: start; gap: 10px; margin-top: 12px; }
.arena-connection-actions .copy-text-control { min-width: 0; width: 100%; }
.arena-connection-actions .button { width: 100%; min-width: 0; min-height: 44px; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.arena-join-hint { margin: 12px 0 0; font-size: var(--text-body); line-height: 1.5; font-weight: var(--weight-body); }
.arena-current-session { container-type: inline-size; }
@container (max-width: 28rem) {
    .arena-current-session .section-panel-heading > div { flex-basis: 100%; }
    .arena-current-session .section-panel-heading > .button { flex: 1 1 120px; }
}
.arena-current-session .panel-heading { min-height: 66px; padding: 18px 22px; }
.arena-current-session .panel-heading h2 { margin: 0; font-size: var(--text-heading); font-weight: var(--weight-heading); }
.arena-current-session .eyebrow, .arena-current-session .compact-session > .game-badge, .arena-current-session .compact-session > h3 { display: none; }
.arena-current-session .active-session-cards { padding: 22px; }
.arena-current-session .compact-session { padding: 0; border: 0; background: none; box-shadow: none; }
.arena-current-session .compact-session-times { margin: 0; padding-top: 0; border-top: 0; }
.arena-current-session .compact-session-query { margin: 0 0 14px; }
.arena-current-session .panel-empty { padding: 22px; }
.arena-session-history { display: grid; gap: 0; }
.arena-history-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 24px; padding: 18px 0; }
.arena-history-row:first-child { padding-top: 0; }
.arena-history-row:last-child { padding-bottom: 0; }
.arena-history-row + .arena-history-row { border-top: 1px solid #2b3234; }
.arena-history-state { display: grid; align-content: start; justify-items: start; gap: 9px; }
.arena-history-reference { color: #819087; font-size: var(--text-label); font-family: ui-monospace, SFMono-Regular, monospace; font-weight: var(--weight-body); }
.arena-history-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; }
.secret-value { display: flex; width: 100%; max-width: 320px; overflow: hidden; border: 1px solid #3a443d; border-radius: 6px; background: #101713; }
.secret-value:focus-within { border-color: #a1ca7d; outline: 1px solid #a1ca7d; }
.secret-value input { flex: 1; min-width: 0; width: 100%; padding: 9px 12px; border: 0; outline: none; background: transparent; color: #e2ebdf; font: 13px ui-monospace, SFMono-Regular, monospace; }
.secret-toggle { display: grid; place-items: center; flex: 0 0 42px; border: 0; border-left: 1px solid #303b34; background: #1c261e; color: #a5b89d; }
.secret-toggle:hover { color: #c1f77b; background: #283624; }
.secret-toggle:focus-visible { outline: 2px solid #c1f77b; outline-offset: -3px; }
@media (max-width: 1000px) { .arena-details-grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "maintenance" "connection" "main" "aside"; } .arena-details-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (max-width: 600px) { .arena-details-aside, .detail-fields, .configuration-extras { grid-template-columns: 1fr; } .section-panel-heading { padding: 16px 18px; } .section-panel-body { padding: 18px; } .arena-history-row { grid-template-columns: 1fr; gap: 14px; } .arena-history-state { display: flex; align-items: center; } .arena-runtime-fields { grid-template-columns: 1fr; } .arena-runtime-fields dd { font-size: var(--text-body); font-weight: var(--weight-body); } }

.panel-empty-state { padding: 2px 0; }
.panel-empty-state h3 { margin: 0 0 8px; color: #d4dfd5; font-size: var(--text-heading); font-weight: var(--weight-heading); }
.panel-empty-state p { margin: 0; color: #99a79d; font-size: var(--text-body); line-height: 1.7; max-width: 60ch; font-weight: var(--weight-body); }
.arena-session-hint { margin: 0 0 20px; }
.arena-next-session-dates { display: grid; gap: 20px; margin: 0; }
.arena-session-actions { margin-top: 20px; }

.game-art { display: inline-block; flex-shrink: 0; object-fit: contain; vertical-align: middle; }
.game-tab .game-art { margin-right: 7px; }
.server-icon:has(.game-art), .group-icon:has(.game-art) { background: #202629; border-color: #394147; }
.arena-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.arena-game-art { display: grid; place-items: center; width: 66px; height: 66px; flex-shrink: 0; border: 1px solid #3a4247; border-radius: 12px; background: linear-gradient(145deg, #252d31, #171d20); }
.arena-game-name { color: #a6b3aa; font-size: var(--text-body); font-weight: var(--weight-body); }
@media (max-width: 600px) { .arena-title { gap: 11px; } .arena-game-art { width: 50px; height: 56px; border-radius: 9px; } .arena-game-art .game-art { width: 34px; height: 34px; } }

.hosting-fields { display: grid; gap: 20px; margin: 0; }
.match-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team-scores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.team-score { flex: 1; min-width: 100px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border: 1px solid #344237; border-radius: 6px; background: #1b251e; }
.team-score span { color: #a7b8aa; font-size: var(--text-body); font-weight: var(--weight-body); }
.team-score strong { color: #d6e8cb; font-size: var(--text-body); font-variant-numeric: tabular-nums; font-weight: var(--weight-body); }
.players-table-scroll { overflow-x: auto; }
.players-table { border-collapse: collapse; width: 100%; text-align: left; font-size: var(--text-body); font-weight: var(--weight-body); }
.players-table th { color: #8f9f94; font-size: var(--text-label); font-weight: var(--weight-body); padding: 0 14px 13px 0; border-bottom: 1px solid #303a33; }
.players-table td { padding: 15px 14px 15px 0; border-bottom: 1px solid #26312b; overflow-wrap: anywhere; }
.players-table tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.players-table th:last-child, .players-table td:last-child { padding-right: 0; }
.players-table .numeric-cell { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.player-name { color: #e1e9df; }
.player-bot { display: inline-block; margin-left: 8px; padding: 2px 5px; border-radius: 4px; background: #29352b; color: #a5b99d; font-size: var(--text-label); font-weight: var(--weight-body); }
.player-team { display: block; margin-top: 4px; color: #91a392; font-size: var(--text-label); font-weight: var(--weight-body); }
.player-list-note { margin: 0 0 16px; }
@media (max-width: 600px) { .match-fields { grid-template-columns: 1fr; } .players-table { font-size: var(--text-body); font-weight: var(--weight-body); } .players-table td, .players-table th { padding-right: 9px; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.page-header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wizard-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 26px 0; padding: 0; gap: 12px; }
.wizard-steps li { display: flex; gap: 10px; align-items: center; padding: 12px; border-bottom: 2px solid #2c3730; color: #89958d; font-size: 13px; }
.wizard-steps li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #263029; flex-shrink: 0; }
.wizard-steps li.current { color: #c1f77b; border-color: #c1f77b; }
.wizard-steps li.complete { color: #b3c5a6; border-color: #708e55; }
.wizard-panel { padding: 28px; }
.wizard-panel fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.wizard-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.wizard-field { display: flex; flex-direction: column; gap: 9px; color: #bccabe; font-size: var(--text-label); font-weight: var(--weight-body); }
.wizard-field input, .wizard-field select, .wizard-field textarea { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid #3a473e; border-radius: 6px; color: #e3eddf; background: #101713; font: inherit; font-size: var(--text-body); }
.wizard-field input:focus, .wizard-field select:focus, .wizard-field textarea:focus { outline: 2px solid #a6cc7e; outline-offset: 2px; }
.wizard-field textarea { resize: vertical; }
.wizard-wide { grid-column: 1 / -1; }
.wizard-checkbox { display: flex; align-items: center; gap: 10px; color: #b8c8b8; font-size: 13px; }
.wizard-checkbox input { accent-color: #b3e57c; width: 18px; height: 18px; }
.wizard-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.button.secondary { background: #202a23; color: #c2d0bc; border: 1px solid #42503f; }
.wizard-price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.65fr); gap: 28px; align-items: start; }
.wizard-total { border: 1px solid #516b3d; border-radius: 8px; padding: 24px; background: #202d1c; }
.wizard-total > span { font-size: var(--text-label); color: #adbe9f; font-weight: var(--weight-body); }
.wizard-total strong { display: block; margin-top: 10px; font-size: var(--text-body); color: #c1f77b; font-weight: var(--weight-body); }
.wizard-total p { color: #a9b7a0; font-size: var(--text-body); line-height: 1.6; margin-bottom: 0; font-weight: var(--weight-body); }
.wizard-topup { border-top: 1px solid #303b32; padding-top: 18px; margin-top: 26px; }
.wizard-loading { display: flex; gap: 12px; align-items: center; color: #c1f77b; padding-top: 18px; }
.wizard-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid #4c5f3e; border-top-color: #c1f77b; border-radius: 50%; animation: wizard-spin .8s linear infinite; }
@keyframes wizard-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wizard-spinner { animation: none; } }
@media (max-width: 700px) { .wizard-fields, .wizard-price-grid { grid-template-columns: 1fr; } .wizard-steps { grid-template-columns: repeat(2, 1fr); } .wizard-panel { padding: 20px; } .wizard-steps li { padding: 8px 0; font-size: 12px; } }
.local-date-time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.local-date-time-fields input { color-scheme: dark; min-width: 0; }
.session-options { display: flex; flex-wrap: wrap; gap: 16px 24px; }
.session-options legend { padding-bottom: 14px; color: #bccabe; font-size: var(--text-label); font-weight: var(--weight-body); }
@media (max-width: 700px) { .local-date-time-fields { grid-template-columns: 1fr; } }

.map-builder { margin-top: 6px; border: 1px solid #334036; border-radius: 10px; overflow: hidden; background: #111814; }
.map-builder-header { padding: 22px 24px; border-bottom: 1px solid #2e3931; }
.map-builder-header h3 { margin: 0 0 7px; font-size: var(--text-heading); color: #e1ebdd; font-weight: var(--weight-heading); }
.map-builder-header p { margin: 0; color: #95a391; font-size: var(--text-body); line-height: 1.6; font-weight: var(--weight-body); }
.map-builder-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.map-catalog, .map-rotation-panel { min-width: 0; padding: 22px; }
.map-catalog { border-right: 1px solid #2e3931; }
.map-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.map-panel-header h4 { margin: 0; color: #c5d2bf; font-size: var(--text-heading); font-weight: var(--weight-heading); }
.map-count { display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 5px; box-sizing: border-box; border: 1px solid #3a4839; border-radius: 6px; color: #abc78c; background: #202b1d; font-size: var(--text-label); font-weight: var(--weight-body); }
.map-search { margin-bottom: 14px; }
.map-search input { padding: 10px 12px; background: #0d130f; }
.map-catalog-list { display: grid; gap: 6px; list-style: none; padding: 0 5px 0 0; margin: 0; max-height: 326px; overflow-y: auto; scrollbar-color: #40513b transparent; scrollbar-width: thin; }
.map-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 47px; padding: 10px 12px; text-align: left; border: 1px solid #2e3930; border-radius: 6px; background: #18201b; color: #d0deca; cursor: pointer; transition: border-color .15s, background .15s; }
.map-option code { font-size: var(--text-body); overflow-wrap: anywhere; min-width: 0; font-weight: var(--weight-body); }
.map-option-state { margin-left: auto; font-size: var(--text-label); color: #889b7c; white-space: nowrap; font-weight: var(--weight-body); }
.map-option-icon { display: grid; place-items: center; width: 23px; height: 23px; flex-shrink: 0; border-radius: 5px; color: #b1d98c; background: #283522; font-size: 17px; }
.map-option:hover:not(:disabled) { border-color: #7a9e56; background: #202d1c; }
.map-option.is-selected { color: #a9c692; border-color: #425c32; background: #1c2818; opacity: 1; cursor: default; }
.map-option.is-selected .map-option-icon { font-size: 13px; }
.map-option:focus-visible, .rotation-actions button:focus-visible { outline: 2px solid #b8e183; outline-offset: 2px; }
.map-queue-hint { margin: -5px 0 18px; font-size: var(--text-body); color: #8f9e89; font-weight: var(--weight-body); }
.map-queue-empty { display: grid; place-content: center; justify-items: center; min-height: 230px; padding: 22px; border: 1px dashed #3b4c35; border-radius: 8px; text-align: center; }
.map-queue-empty > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #8fac74; background: #222e1d; font-size: 22px; }
.map-queue-empty p { max-width: 230px; margin: 14px 0 0; color: #8f9f87; font-size: var(--text-body); line-height: 1.7; font-weight: var(--weight-body); }
.rotation-queue { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rotation-queue li { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #3d5034; border-radius: 7px; background: #1b2618; }
.rotation-position { display: grid; place-items: center; width: 24px; height: 26px; flex-shrink: 0; color: #b3d294; font-size: var(--text-label); font-variant-numeric: tabular-nums; font-weight: var(--weight-body); }
.rotation-queue code { color: #d5e2cc; font-size: var(--text-body); overflow-wrap: anywhere; min-width: 0; font-weight: var(--weight-body); }
.rotation-actions { display: flex; gap: 3px; margin-left: auto; flex-shrink: 0; }
.rotation-actions button { display: grid; place-items: center; width: 28px; height: 29px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #adbf9f; font-size: 17px; cursor: pointer; }
.rotation-actions button:hover:not(:disabled) { background: #304027; border-color: #526443; }
.rotation-actions button:disabled { opacity: .25; cursor: default; }
.rotation-actions .rotation-remove { margin-left: 3px; color: #94a38b; }
.rotation-actions .rotation-remove:hover { color: #f0b7a9; border-color: #755448; background: #3c2b24; }
.map-loop-note { margin: 16px 0 0; color: #839575; font-size: var(--text-body); line-height: 1.6; font-weight: var(--weight-body); }
.map-catalog-empty { padding: 28px 10px; color: #92a18b; font-size: var(--text-body); line-height: 1.6; font-weight: var(--weight-body); }
@media (max-width: 850px) { .map-builder-columns { grid-template-columns: 1fr; } .map-catalog { border-right: 0; border-bottom: 1px solid #2e3931; } .map-catalog-list { max-height: 230px; } .map-queue-empty { min-height: 130px; } }
.field-error { margin: 8px 0 0; color: #f0b7a9; font-size: var(--text-body); line-height: 1.6; font-weight: var(--weight-body); }
.wizard-field input[aria-invalid="true"] { border-color: #ba7968; background: #241b18; }
.creation-review { width: 100%; }
.review-arena { display: flex; align-items: center; gap: 14px; padding: 0 0 24px; }
.review-arena h2 { margin: 0 0 6px; font-size: var(--text-heading); font-weight: var(--weight-heading); }
.review-arena p { margin: 0; color: #94a18e; font-size: var(--text-body); font-weight: var(--weight-body); }
.review-section { border-top: 1px solid #354030; }
.review-section > h2 { display: flex; align-items: center; gap: 12px; margin: 0; padding: 22px 0 10px; color: #c6d4bf; font-size: var(--text-heading); font-weight: var(--weight-heading); }
.review-section > h2 > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #293522; color: #aec88f; font-size: var(--text-label); font-weight: var(--weight-body); }
.review-section-body { padding: 0 0 22px 37px; }
.creation-review .detail-fields, .creation-success-details .detail-fields { display: block; margin: 0; }
.creation-review .detail-field, .creation-success-details .detail-field { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; padding: 13px 0; border-bottom: 1px solid #293129; align-items: baseline; }
.creation-review .detail-field:last-child, .creation-success-details .detail-field:last-child { border-bottom: 0; }
.creation-review .detail-field dt, .creation-success-details .detail-field dt { margin: 0; line-height: 1.6; }
.creation-review .detail-field dd, .creation-success-details .detail-field dd { line-height: 1.6; }
.creation-review .configuration-extras { display: block; }
.creation-review .configuration-list { margin-top: 12px; padding-top: 5px; }
.creation-review .configuration-list h3 { margin: 12px 0 8px; }
.creation-review .map-rotation { margin-top: 0; }
.creation-review .review-costs dd { text-align: right; font-variant-numeric: tabular-nums; }
.creation-review .review-total { margin: 8px 0; padding: 17px 16px; border: 1px solid #4a6137; border-radius: 6px; background: #23301c; }
.creation-review .review-total dt { color: #d1e4bf; }
.creation-review .review-total dd { color: #c1f77b; font-size: var(--text-body); font-weight: var(--weight-body); }
.review-cost-hint { margin: 15px 0 0; color: #8c9d83; font-size: var(--text-body); line-height: 1.7; font-weight: var(--weight-body); }
.review-confirm { border-top: 1px solid #354030; padding: 22px 0 0; align-items: flex-start; line-height: 1.7; }
.review-confirm input { flex-shrink: 0; margin-top: 2px; }
.creation-success { max-width: 760px; margin: 12px auto 40px; padding: 36px; border: 1px solid #405137; border-radius: 12px; background: #151d17; }
.creation-success-heading { text-align: center; padding-bottom: 30px; }
.creation-success-check { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 19px; border: 1px solid #5f7e40; border-radius: 50%; background: #293b1e; color: #c1f77b; font-size: 27px; }
.creation-success-heading .eyebrow { color: #a4c584; margin: 0 0 10px; }
.creation-success-heading h1 { margin: 0 0 12px; color: #e2edda; font-size: 25px; }
.creation-success-heading > p:last-child { margin: 0; color: #96a68d; font-size: var(--text-body); line-height: 1.7; font-weight: var(--weight-body); }
.creation-success-arena { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid #35472e; border-radius: 8px; background: #1e2b1a; }
.creation-success-arena h2 { margin: 0 0 5px; font-size: var(--text-heading); overflow-wrap: anywhere; font-weight: var(--weight-heading); }
.creation-success-arena p { margin: 0; color: #9eaf93; font-size: var(--text-body); font-weight: var(--weight-body); }
.creation-saved-badge { margin-left: auto; color: #b7d396; padding: 5px 9px; border: 1px solid #526b3c; border-radius: 20px; font-size: var(--text-label); white-space: nowrap; font-weight: var(--weight-body); }
.creation-success-details { padding: 16px 3px 10px; }
.creation-success-note { border-left: 2px solid #536542; padding: 3px 0 3px 13px; color: #8e9e84; font-size: var(--text-body); line-height: 1.8; font-weight: var(--weight-body); }
.creation-success-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 24px; border-top: 1px solid #303e2a; padding-top: 26px; margin-top: 25px; }
.creation-success-actions .button { gap: 25px; display: inline-flex; align-items: center; }
.creation-dashboard-link { color: #acbe9c; font-size: 12px; text-decoration: none; }
.creation-dashboard-link:hover { color: #c1f77b; text-decoration: underline; }
@media (max-width: 600px) { .review-section-body { padding-left: 0; } .creation-review .detail-field, .creation-success-details .detail-field { grid-template-columns: 1fr; gap: 5px; } .creation-review .review-costs .detail-field { grid-template-columns: 1fr 1fr; } .creation-success { padding: 24px 20px; } .creation-success-arena { flex-wrap: wrap; } }

.wizard-review-panel .wizard-actions { margin: 30px 0 0; justify-content: space-between; }

.creation-hosting-summary { margin-bottom: 24px; }

.token-wallet { display: inline-flex; align-items: center; min-height: 38px; gap: 10px; padding: 4px 5px 4px 12px; border: 1px solid #3b4932; border-radius: 6px; background: #1d261b; color: #c1f77b; }
.token-wallet-symbol { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1; }
.token-wallet-symbol + .token-wallet-value { padding-left: 10px; border-left: 1px solid #3b4932; }
.token-wallet-value { font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.token-wallet-value:last-child { margin-right: 7px; }
.token-wallet-action { display: inline-flex; }
.token-wallet-add { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px; color: #c1f77b; background: transparent; font-size: 18px; }
.token-wallet-add:disabled { cursor: default; opacity: .6; }
.token-wallet-pending, .token-wallet-retry { padding-inline: 12px; font-size: 13px; }
@media (max-width: 600px) { .app-header-content { flex-wrap: wrap; } .header-actions { flex-wrap: wrap; justify-content: flex-end; } }

.creation-operation { width: 100%; max-width: 780px; margin: 1.5rem auto 2.5rem; padding: clamp(1.25rem, 3vw, 2rem); }


.creation-operation-ready { border-color: #526342; }
.creation-operation-result { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem; padding-block: 1.25rem; border-top: 1px solid #303638; }
.creation-operation-result .detail-fields { display: block; flex: 1; margin: 0; }

.creation-operation-address { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem; margin-block: 1.5rem 1.25rem; border: 1px solid #3b4932; border-radius: 6px; background: #1d261b; }
.creation-operation-address .muted { margin: 0 0 .35rem; }
.creation-operation-address code { font-size: var(--text-body); color: #c1f77b; overflow-wrap: anywhere; font-weight: var(--weight-body); }

.creation-operation h1 { font-size: 26px; overflow-wrap: anywhere; }
.creation-operation-address > div { min-width: 0; }
@media (max-width: 520px) { .creation-operation { margin-block: 1rem 1.5rem; } .creation-operation h1 { font-size: 23px; } .creation-operation-address { align-items: flex-start; } .creation-operation-result { align-items: flex-start; } }

.copy-text-control { display: inline-flex; flex-direction: column; flex: 0 0 auto; gap: 6px; max-width: 100%; }
.copy-text-button { min-width: 9rem; }
.copy-text-error { color: #ffb4a9; font-size: var(--text-body); line-height: 1.4; font-weight: var(--weight-body); }


.arena-session-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 20px; margin-top: 24px; align-items: stretch; }
.arena-session-workspace .arena-current-session > .dashboard-panel { height: 100%; box-sizing: border-box; }
.session-booking-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.session-booking-configuration { min-width: 0; padding-right: 24px; }
.session-booking-layout h3 { margin: 0 0 16px; font-size: var(--text-heading); font-weight: var(--weight-heading); }
.session-booking-fields { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; min-width: 0; }
.session-start-options { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.session-extension-dates { display: grid; gap: 12px; margin: 0; }
.session-maintenance-hint { margin: 16px 0 0; font-size: var(--text-body); font-weight: var(--weight-body); }
.session-booking-summary { min-width: 0; padding-left: 24px; border-left: 1px solid #394334; }
.session-booking-summary .muted { font-size: var(--text-body); line-height: 1.6; font-weight: var(--weight-body); }
.session-booking-price { display: block; color: #c1f77b; font-size: var(--text-body); font-weight: var(--weight-body); }
@media (max-width: 700px) { .arena-session-workspace, .session-booking-layout { grid-template-columns: minmax(0, 1fr); } .session-booking-layout { gap: 20px; } .session-booking-configuration { padding-right: 0; } .session-booking-summary { padding: 20px 0 0; border-left: 0; border-top: 1px solid #394334; } }

.dismissible-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 0; padding: 14px 18px; border: 1px solid #526342; border-radius: 8px; background: #202b1c; color: #c1f77b; }
.dismissible-notice-close { flex: 0 0 auto; border: 0; border-radius: 4px; background: transparent; color: inherit; padding: 4px 8px; font: inherit; font-size: 22px; cursor: pointer; }
.dismissible-notice-close:hover { background: #ffffff0d; }

.copy-text-control-address { display: flex; align-items: flex-start; width: 100%; gap: 10px; }
.copy-text-address { display: block; box-sizing: border-box; width: 100%; padding: 12px 14px; border: 1px solid #303a35; border-radius: 6px; background: #111719; color: #c1f77b; font-size: var(--text-body); line-height: 1.4; overflow-wrap: anywhere; font-weight: var(--weight-body); }

.modal-dialog { box-sizing: border-box; display: block; margin: 0; width: min(920px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #526342; border-radius: 12px; background: #181d1f; color: #eff5ed; box-shadow: 0 24px 90px #0009; overflow: auto; }
.modal-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid #303638; }
.modal-dialog-heading h2 { margin: 0; font-size: var(--text-heading); font-weight: var(--weight-heading); }
.modal-dialog-close { border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: 26px; padding: 2px 8px; cursor: pointer; }
.modal-dialog-close:hover { background: #ffffff0d; }
.modal-dialog-body { padding: 22px; }
html:has(.modal-overlay) { overflow: hidden; }
.arena-active-session-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #303638; }
@media (max-width: 600px) { .modal-dialog { box-sizing: border-box; display: block; margin: 0; width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; } .modal-dialog-heading, .modal-dialog-body { padding: 18px; } }


.modal-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; box-sizing: border-box; background: #000a; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; bottom: 0; background: #181d1f; margin: 0 22px; padding: 16px 0 22px; border-top: 1px solid #303638; }
@media (max-width: 600px) { .modal-overlay { padding: 0; } .modal-dialog-footer { margin-inline: 18px; padding-bottom: 18px; } }

.session-booking-quote { min-height: 86px; }

.notice-warning { margin: 0 0 20px; padding: 14px 16px; border: 1px solid #9c812d; border-radius: 6px; background: #352e17; color: #ffe08a; font-size: var(--text-body); line-height: 1.5; font-weight: var(--weight-body); }

.header-identity { display: grid; gap: 2px; min-width: 0; }
.header-user-name { color: #a6b2a9; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 18rem; }

.arena-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 0; }
.arena-heading .arena-title { min-width: 0; }
.refresh-button svg { display: block; flex-shrink: 0; }
.refresh-button .refresh-label { font-size: 12px; line-height: 1.4; }
.refresh-button.icon-button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; }