.custom-config-value { width: 48%; min-width: 240px; max-width: 36rem; overflow-wrap: anywhere; }
.custom-config-table td { vertical-align: middle; }
.custom-config-table td:first-child, .custom-config-table .custom-config-value { white-space: normal; overflow-wrap: anywhere; }
.custom-config-table td:last-child { width: 72px; text-align: right; }
.custom-config-toggle { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; }
.custom-config-toggle input { position: absolute; width: 48px; height: 28px; min-height: 0; padding: 0; margin: 0; opacity: 0; }
.custom-config-toggle-track { width: 48px; height: 28px; border-radius: 20px; background: var(--primary-soft); transition: background .15s; }
.custom-config-toggle-track::after { content: ''; display: block; width: 22px; height: 22px; margin: 3px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 4px #17203333; transition: transform .15s; }
.custom-config-toggle input:checked + .custom-config-toggle-track { background: var(--primary); }
.custom-config-toggle input:checked + .custom-config-toggle-track::after { transform: translateX(20px); }
.custom-config-toggle input:focus-visible + .custom-config-toggle-track { outline: 3px solid #b8c7fa; outline-offset: 3px; }
.custom-config-toggle input:disabled ~ span { opacity: .6; cursor: default; }
.custom-config-slider { display: grid; grid-template-columns: minmax(140px,1fr) auto; align-items: center; gap: 3px 14px; }
.custom-config-slider input[type=range] { padding: 0; border: 0; box-shadow: none; accent-color: var(--primary); }
.custom-config-slider output { min-width: 3ch; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.custom-config-range { grid-column: 1/-1; color: var(--muted); font-size: 14px; }
.custom-config-error { display: block; margin-top: 5px; color: var(--danger); font-size: 14px; }
.custom-config-error:empty { display: none; }
.custom-config-value [aria-invalid=true] { border-color: var(--danger); }
.custom-config-multiselect { border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.custom-config-multiselect summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; }
.custom-config-multiselect summary::after { content: '⌄'; margin-left: auto; color: var(--muted); }
.custom-config-multiselect summary code { color: var(--muted); }
.custom-config-choices { display: grid; gap: 10px; max-height: 240px; overflow-y: auto; border-top: 1px solid var(--line); padding: 12px; }
.custom-config-choices .checkbox { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.custom-config-choices input[type=checkbox] { width: 18px; height: 18px; min-height: 18px; flex: 0 0 auto; padding: 0; margin: 0; accent-color: var(--primary); }
.custom-parameter-options .panel-heading { flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.custom-parameter-options .panel-heading h3 { margin: 0; }
.custom-parameter-option { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 36px; gap: 8px; margin-top: 8px; }
.custom-parameter-option button { padding: 8px; }
.custom-parameter-actions { justify-content: flex-end; }
.custom-parameter-actions .danger-button { margin-right: auto; }
@media(max-width:700px) {
  .custom-config-table { width: 100%; min-width: 0; }
  .custom-config-table thead { display: none; }
  .custom-config-table tbody { display: block; }
  .custom-config-table tr { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  #customConfigList .custom-config-table td { width: auto; padding: 0; border: 0; overflow-wrap: anywhere; }
  .custom-config-table td:first-child { grid-column: 1; grid-row: 1; }
  .custom-config-table td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--muted); }
  .custom-config-table .custom-config-value { grid-column: 1/-1; grid-row: 3; width: 100%; min-width: 0; }
  .custom-config-table td:last-child { grid-column: 2; grid-row: 1/3; width: auto; }
}
/* Theme tokens are defined in console.css. */

/* Clearer text and on-demand explanations. */
body { font-size: 15px; }
:is(.content,dialog) label, :is(.content,dialog) input, :is(.content,dialog) select, :is(.content,dialog) textarea, :is(.content,dialog) button { font-size: 15px; }
:is(.content,dialog) .muted, :is(.content,dialog) .small-text, :is(.content,dialog) .field-hint, :is(.content,dialog) .stat-card .subvalue { font-size: var(--font-caption); line-height: 1.6; }
:is(.content,dialog) .data-table td, :is(.content,dialog) .data-table th, :is(.content,dialog) .uid { font-size: var(--font-body); }
.context-help-source { display: none !important; }
.context-help-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; min-height: 24px; margin-left: 8px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--accent); font: 700 14px/1 sans-serif; vertical-align: middle; }
.context-help-button:hover, .context-help-button:focus-visible { color: var(--accent); background: var(--primary-soft); outline: 2px solid #b8c7fa; outline-offset: 2px; }
.field-label-title { display: flex; align-items: center; }
.context-help-content { padding: 26px; }
.context-help-content h3 { font-size: 20px; }
#contextHelpText { margin: 14px 0 0; font-size: 16px; line-height: 1.85; white-space: pre-wrap; color: var(--ink); }
.health-timestamp, .health-host-meta { color: var(--muted); font-size: 14px; }
.health-alerts { padding: 14px 18px; margin-bottom: 20px; background: var(--warning-soft); border: 1px solid var(--warning-line); border-radius: 12px; color: var(--warning); line-height: 1.7; }
.host-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin: 22px 0 16px; }
.host-metric { display: grid; align-content: start; gap: 14px; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.host-metric > span { font-size: 15px; font-weight: 650; color: var(--muted); }
.host-metric > strong { font-size: 34px; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.host-metric p { margin: 0; color: var(--muted); font-size: 14px; }
.host-meter { display: block; appearance: none; border: 0; width: 100%; height: 7px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.host-meter::-webkit-progress-bar { background: var(--surface-2); }
.host-meter::-webkit-progress-value { background: #5673e4; border-radius: 8px; }
.host-meter::-moz-progress-bar { background: #5673e4; }
.host-meter.meter-warning::-webkit-progress-value { background: #d39527; }
.network-metric > strong { font-size: 25px; }
.network-metric .network-out { font-size: 20px; color: var(--ink); }
.health-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 24px; font-size: 14px; font-weight: 650; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.health-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.health-ok { background: var(--success-soft); color: var(--success); }
.health-warning, .health-stale { background: var(--warning-soft); color: var(--warning); }
.health-error { background: var(--danger-soft); color: var(--danger); }
.health-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.health-service-row { display: grid; grid-template-columns: minmax(85px,1fr) 86px 70px 72px; align-items: center; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.health-service-row > span:nth-last-child(-n+2) { color: var(--muted); text-align: right; }
.health-database-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px 20px; padding: 14px 0; }
.health-database-grid > div { display: grid; gap: 9px; }
.health-database-grid span { color: var(--muted); font-size: 14px; }
.health-database-grid strong { font-size: 21px; }
.health-footer-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; font-size: 14px; }
.health-chart-controls { display: flex; align-items: center; gap: 16px; }
.health-chart-controls select { width: 156px; }
.health-trend-panel .panel-heading h3 { white-space: nowrap; }
.chart-key { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.chart-key::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #5275e5; }
.memory-key::before { background: #159881; }
.disk-key::before { background: #c5993e; }
#healthTrend svg { width: 100%; display: block; min-height: 170px; }
#healthTrend svg text { fill: var(--muted); font-size: 14px; }
.health-grid { stroke: var(--line); fill: none; }
.health-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; }
.health-line-0 { stroke: var(--line); }.health-line-1 { stroke: #159881; }.health-line-2 { stroke: var(--warning-line); }
.health-unavailable, .health-chart-empty { padding: 32px; color: var(--muted); text-align: center; grid-column: 1/-1; }
.health-chart-empty { min-height: 200px; display: grid; place-items: center; }
@media(max-width:1150px) { .host-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }.health-two-columns { grid-template-columns: 1fr; } }
@media(max-width:600px) { .host-metrics { gap: 10px; }.host-metric { padding: 16px; }.host-metric > strong { font-size: 27px; }.network-metric > strong { font-size: 18px; }.health-chart-controls { flex-wrap: wrap; gap: 10px; }.health-database-grid { grid-template-columns: repeat(2,1fr); }.health-footer-row { align-items: flex-start; flex-direction: column; }.health-service-row { grid-template-columns: 1fr 75px 55px 60px; gap: 6px; } }

* { box-sizing: border-box; }
body { margin: 0; overflow-x: hidden; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink); background: var(--bg); }
body.mobile-nav-scroll-lock { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .56; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: 29px; letter-spacing: -.035em; }
h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.02em; }
h3 { margin-bottom: 14px; font-size: 16px; }
.muted { color: var(--muted); font-size: 14px; line-height: 1.55; }
.eyebrow { display: block; margin-bottom: 7px; color: var(--accent); font-size: 14px; font-weight: 850; letter-spacing: .16em; }
.small-text, .field-hint { color: var(--muted); font-size: 14px; font-weight: 400; }
.field-note { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--primary-soft); color: var(--muted); font-size: 14px; }
.field-note strong { color: var(--text); font-size: 14px; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 10% 10%, var(--primary-soft), transparent 38%), linear-gradient(145deg, var(--surface-2), var(--primary-soft)); }
.login-card { width: min(430px, 100%); padding: 38px; background: rgba(255,255,255,.96); border: 1px solid rgba(213,220,236,.9); border-radius: 20px; box-shadow: 0 22px 60px rgba(24, 42, 89, .12); }
.brand-mark { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 15px; background: linear-gradient(145deg, #3f66df, #2649bd); color: var(--ink); font-weight: 850; letter-spacing: .08em; box-shadow: 0 8px 18px rgba(49, 87, 213, .24); }
.brand-mark.small { width: 32px; height: 32px; margin: 0; border-radius: 10px; font-size: 14px; box-shadow: none; }

.stack-form { display: grid; gap: 16px; }
label { display: grid; gap: 7px; font-size: 14px; font-weight: 650; }
input, textarea, select { width: 100%; min-height: 41px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); outline: none; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(49, 87, 213, .12); }
button { border: 0; border-radius: 9px; padding: 9px 15px; font-weight: 680; transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
button:active { transform: translateY(1px); }
.primary { background: var(--primary); color: var(--ink); }
.primary:hover { background: var(--primary-dark); box-shadow: 0 6px 15px rgba(63,95,215,.2); }
.secondary { background: var(--primary-soft); color: var(--accent); }
.secondary:hover { background: var(--primary-soft); }
.ghost { background: transparent; color: var(--muted); }
.ghost:hover { background: var(--surface-2); color: var(--ink); }
.wide { width: 100%; min-height: 45px; }
.small-button { padding: 6px 10px; font-size: 14px; }
.compact-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.form-error { margin: 0; color: var(--danger); font-size: 14px; }

.topbar { position: sticky; z-index: 10; top: 0; min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 25px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.version-badge { padding: 3px 7px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 14px; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.timezone-picker { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 14px; }
.timezone-picker select { width: 180px; min-width: 0; min-height: 38px; font-size: 14px; }
.time-zone-note { display: inline-block; font-size: 14px; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.topbar { flex-wrap: wrap; }
.workspace-link { padding: 7px 11px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 14px; }
.workspace-link:hover { border-color: var(--line); color: var(--accent); background: var(--primary-soft); }
.game-picker { display: flex; grid-template-columns: auto auto; align-items: center; gap: 7px; white-space: nowrap; color: var(--muted); }
.game-picker select { min-height: 35px; width: auto; color: var(--ink); }
.user-badge { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 14px; }

.layout { min-height: calc(100vh - 65px); display: flex; }
.sidebar { position: sticky; top: 66px; width: 232px; height: calc(100vh - 66px); flex: 0 0 232px; padding: 17px 13px 28px; overflow-y: auto; background: var(--sidebar); color: var(--ink); }
.nav-group-label { padding: 11px 12px 7px; color: var(--sidebar-muted); font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nav-button { display: flex; width: 100%; align-items: center; gap: 10px; margin-bottom: 3px; padding: 10px 12px; text-align: left; background: transparent; color: var(--muted); font-size: 14px; }
.nav-button:hover { background: rgba(255,255,255,.07); color: var(--ink); }
.nav-button.active { background: linear-gradient(90deg, rgba(83,111,215,.38), rgba(83,111,215,.13)); color: var(--ink); box-shadow: inset 3px 0 #8199f0; }
.nav-icon { width: 17px; color: var(--muted); font-size: 15px; text-align: center; }
.nav-button.active .nav-icon { color: var(--accent); }
.sidebar-context { margin: 12px 4px 3px; padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.04); }
.sidebar-context .context-name { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-context .context-id { margin-top: 5px; overflow: hidden; color: var(--sidebar-muted); font: 10px ui-monospace, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-context .context-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; color: var(--muted); font-size: 14px; }
.content { width: min(1480px, 100%); min-width: 0; margin: 0 auto; padding: 30px 34px 55px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 22px; }

.panel { padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.panel-heading, .field-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading h3 { margin-bottom: 0; }
.panel-heading > div h3 { margin-bottom: 4px; }
.panel-heading > div p { margin-bottom: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin-bottom: 19px; }
#dashboardCards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card { min-width: 0; padding: 17px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
.stat-card .value { margin-top: 8px; overflow: hidden; font-size: 27px; font-weight: 820; letter-spacing: -.035em; text-overflow: ellipsis; }
.stat-card .label { color: var(--muted); font-size: 14px; }
.stat-card .subvalue { margin-top: 6px; color: var(--muted); font-size: 14px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, .8fr); gap: 16px; }
.status-panel { min-height: 270px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.status-row > span:first-child { flex: 0 0 auto; white-space: nowrap; }
.status-row:last-child { border-bottom: 0; }
.status-ok, .status-warning, .status-error, .status-info { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.status-ok { color: var(--success); }.status-warning { color: var(--warning); }.status-error { color: var(--danger); }.status-info { color: var(--accent); }
.status-ok::before, .status-warning::before, .status-error::before, .status-info::before { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; content: ""; }
.status-ok::before { background: #22a06b; box-shadow: 0 0 0 4px rgba(34,160,107,.11); }
.status-warning::before { background: #d29319; box-shadow: 0 0 0 4px rgba(210,147,25,.11); }
.status-error::before { background: #d34b40; box-shadow: 0 0 0 4px rgba(211,75,64,.11); }
.status-info::before { background: #5976dc; box-shadow: 0 0 0 4px rgba(89,118,220,.11); }
.health-value { min-width: 0; display: grid; justify-items: end; gap: 5px; text-align: right; }
.health-value small { color: var(--muted); font-size: 14px; font-weight: 400; }
.status-note { margin: 17px 0 0; line-height: 1.65; }
.legend { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.active-dot { background: #5272dc; }.new-dot { margin-left: 6px; background: #43b59e; }
.activity-chart { height: 210px; display: flex; align-items: stretch; gap: 7px; margin-top: 20px; padding-top: 14px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--line); }
.chart-day { position: relative; min-width: 54px; flex: 1 0 54px; display: grid; grid-template-rows: 1fr 24px; gap: 5px; padding: 0; border-radius: 0; background: transparent; color: inherit; }
.chart-day:active { transform: none; }.chart-day:focus-visible { outline: 2px solid rgba(63,95,215,.42); outline-offset: -2px; }
.chart-bars { display: flex; align-items: stretch; justify-content: center; gap: 7px; min-height: 0; padding-top: 18px; }
.chart-series { position: relative; width: min(18px, 39%); min-width: 0; display: flex; align-items: flex-end; }
.chart-value { position: absolute; z-index: 1; bottom: 3px; left: 50%; overflow: visible; font-size: 14px; font-weight: 750; line-height: 12px; text-align: center; white-space: nowrap; transform: translateX(-50%); }
.active-value { color: var(--accent); }.new-value { color: var(--success); }
.activity-unavailable .active-value { color: var(--muted); }
.activity-unavailable .chart-bar-track { border-bottom: 1px dashed var(--line); }
.chart-bar-track { width: 100%; height: 100%; display: flex; align-items: flex-end; }
.chart-bar { width: 100%; min-height: 2px; display: block; border-radius: 4px 4px 0 0; transition: height .2s; }
.chart-bar.active { background: #5272dc; }.chart-bar.new { background: #43b59e; }
.chart-bar.h-0 { height: 1px; }.chart-bar.h-1 { height: 5%; }.chart-bar.h-2 { height: 10%; }.chart-bar.h-3 { height: 15%; }.chart-bar.h-4 { height: 20%; }
.chart-bar.h-5 { height: 25%; }.chart-bar.h-6 { height: 30%; }.chart-bar.h-7 { height: 35%; }.chart-bar.h-8 { height: 40%; }.chart-bar.h-9 { height: 45%; }
.chart-bar.h-10 { height: 50%; }.chart-bar.h-11 { height: 55%; }.chart-bar.h-12 { height: 60%; }.chart-bar.h-13 { height: 65%; }.chart-bar.h-14 { height: 70%; }
.chart-bar.h-15 { height: 75%; }.chart-bar.h-16 { height: 80%; }.chart-bar.h-17 { height: 85%; }.chart-bar.h-18 { height: 90%; }.chart-bar.h-19 { height: 95%; }.chart-bar.h-20 { height: 100%; }
.chart-series.level-1 .chart-value { bottom: calc(5% + 3px); }.chart-series.level-2 .chart-value { bottom: calc(10% + 3px); }.chart-series.level-3 .chart-value { bottom: calc(15% + 3px); }.chart-series.level-4 .chart-value { bottom: calc(20% + 3px); }
.chart-series.level-5 .chart-value { bottom: calc(25% + 3px); }.chart-series.level-6 .chart-value { bottom: calc(30% + 3px); }.chart-series.level-7 .chart-value { bottom: calc(35% + 3px); }.chart-series.level-8 .chart-value { bottom: calc(40% + 3px); }.chart-series.level-9 .chart-value { bottom: calc(45% + 3px); }
.chart-series.level-10 .chart-value { bottom: calc(50% + 3px); }.chart-series.level-11 .chart-value { bottom: calc(55% + 3px); }.chart-series.level-12 .chart-value { bottom: calc(60% + 3px); }.chart-series.level-13 .chart-value { bottom: calc(65% + 3px); }.chart-series.level-14 .chart-value { bottom: calc(70% + 3px); }
.chart-series.level-15 .chart-value { bottom: calc(75% + 3px); }.chart-series.level-16 .chart-value { bottom: calc(80% + 3px); }.chart-series.level-17 .chart-value { bottom: calc(85% + 3px); }.chart-series.level-18 .chart-value { bottom: calc(90% + 3px); }.chart-series.level-19 .chart-value { bottom: calc(95% + 3px); }.chart-series.level-20 .chart-value { bottom: calc(100% + 3px); }
.chart-label { overflow: hidden; color: var(--muted); font-size: 14px; text-align: center; white-space: nowrap; }
.chart-tooltip { position: absolute; z-index: 5; top: 4px; left: 50%; min-width: 155px; display: none; gap: 3px; padding: 8px 10px; pointer-events: none; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.98); box-shadow: 0 9px 24px rgba(27,39,68,.14); color: var(--muted); font-size: 14px; text-align: left; transform: translateX(-50%); }
.chart-tooltip strong { color: var(--ink); font-size: 14px; }.chart-day:hover .chart-tooltip, .chart-day:focus-visible .chart-tooltip, .chart-day.selected .chart-tooltip { display: grid; }
.trend-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; margin-top: 13px; }
.trend-item { min-width: 0; display: grid; gap: 3px; padding: 8px 10px; border-radius: 9px; background: var(--surface-2); }
.trend-item > span { color: var(--muted); font-size: 14px; }.trend-item strong { font-size: 14px; }.trend-item em { overflow: hidden; font-size: 14px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.trend-up { color: var(--success); }.trend-down { color: var(--danger); }.trend-flat { color: var(--muted); }
.workspace-health-summary { display: grid; grid-template-columns: 1fr; gap: 7px; margin: 15px 0; }
.workspace-health-item { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 9px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.workspace-health-item > span { color: var(--muted); font-size: 14px; }.workspace-health-item > strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-health-item > small { grid-column: 1 / -1; color: var(--muted); font-size: 14px; line-height: 1.45; }

.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.analytics-panel { min-height: 235px; }.analytics-panel .panel-heading { margin-bottom: 16px; }
.engagement-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.engagement-item { min-width: 0; padding: 12px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.engagement-item span, .engagement-item small { display: block; color: var(--muted); font-size: 14px; }.engagement-item strong { display: block; margin: 7px 0 5px; overflow: hidden; font-size: 19px; text-overflow: ellipsis; }
.retention-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.retention-item { min-width: 0; padding: 11px 8px; border: 1px solid var(--line); border-radius: 10px; text-align: center; }
.retention-item > span { color: var(--accent); font-size: 14px; font-weight: 800; }.retention-item strong { display: block; margin: 7px 0 5px; font-size: 17px; }.retention-item small { display: block; min-height: 28px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.analytics-footnote { grid-column: 1 / -1; margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.distribution-list { display: grid; gap: 12px; }
.distribution-item { display: grid; gap: 6px; }.distribution-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }.distribution-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.distribution-heading span { color: var(--muted); font-size: 14px; text-align: right; }
.distribution-track { height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-2); }.distribution-fill { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #5775dc, #8096e5); }
.distribution-fill.w-0 { width: 1px; }.distribution-fill.w-1 { width: 5%; }.distribution-fill.w-2 { width: 10%; }.distribution-fill.w-3 { width: 15%; }.distribution-fill.w-4 { width: 20%; }
.distribution-fill.w-5 { width: 25%; }.distribution-fill.w-6 { width: 30%; }.distribution-fill.w-7 { width: 35%; }.distribution-fill.w-8 { width: 40%; }.distribution-fill.w-9 { width: 45%; }
.distribution-fill.w-10 { width: 50%; }.distribution-fill.w-11 { width: 55%; }.distribution-fill.w-12 { width: 60%; }.distribution-fill.w-13 { width: 65%; }.distribution-fill.w-14 { width: 70%; }
.distribution-fill.w-15 { width: 75%; }.distribution-fill.w-16 { width: 80%; }.distribution-fill.w-17 { width: 85%; }.distribution-fill.w-18 { width: 90%; }.distribution-fill.w-19 { width: 95%; }.distribution-fill.w-20 { width: 100%; }
.compact-empty { padding: 18px 8px; }

.filter-row { display: flex; flex-wrap: wrap; gap: 13px; align-items: end; margin-bottom: 15px; }
.filter-row label { min-width: 240px; }
.search-panel label { flex: 1; max-width: 540px; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
.data-table th { color: var(--muted); background: var(--surface-2); font-size: 14px; font-weight: 750; letter-spacing: .02em; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-2); }
.clickable-row { cursor: pointer; }
.primary-cell { color: var(--ink); font-weight: 700; }
.unset-profile { color: var(--muted); font-weight: 600; }
.player-identity { min-width: 170px; display: flex; align-items: center; gap: 9px; }
.player-avatar { position: relative; width: 34px; height: 34px; display: grid; flex: 0 0 34px; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: linear-gradient(145deg, var(--primary-soft), var(--primary-soft)); color: var(--accent); font-size: 14px; font-weight: 850; }
.player-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface-2); }
.player-identity-copy { min-width: 0; display: grid; gap: 2px; }
.player-identity-copy > span { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-platform-line { margin: 4px 0 0 43px; }
.uid { max-width: 180px; overflow: hidden; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; text-overflow: ellipsis; }
.empty-state { padding: 24px; color: var(--muted); text-align: center; }
.pagination { min-height: 42px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding-top: 12px; color: var(--muted); font-size: 14px; }
.pagination button:disabled { cursor: default; opacity: .42; }
.pagination .page-current { color: var(--ink); font-weight: 700; }

.status, .read-only-badge { display: inline-flex; padding: 4px 9px; border-radius: 999px; font-size: 14px; font-weight: 750; }
.status-draft { background: var(--surface-2); color: var(--muted); }.status-active { background: var(--success-soft); color: var(--success); }.status-paused { background: var(--warning-soft); color: var(--warning); }.status-ended { background: var(--danger-soft); color: var(--danger); }
.read-only-badge { background: var(--surface-2); color: var(--muted); }
.enabled-badge { color: var(--success); }.disabled-badge { color: var(--danger); }

.detail-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 16px; margin-bottom: 16px; }
.definition-list { display: grid; gap: 0; }
.definition-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.definition-row:last-child { border-bottom: 0; }
.definition-row .term { color: var(--muted); }.definition-row .description { overflow-wrap: anywhere; font-weight: 600; }
.json-panel { margin-top: 16px; }
.json-panel pre { max-height: 480px; margin: 15px 0 0; padding: 16px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--ink); font: 12px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

.leaderboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.leaderboard-card { padding: 19px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
.leaderboard-card h3 { margin: 0 0 5px; font-size: 17px; }
.leaderboard-score { margin: 18px 0 4px; font-size: 30px; font-weight: 820; }
.leaderboard-card .action-row { margin: 15px 0 0; }

.campaign-list { display: grid; gap: 12px; }
.campaign-card { padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
.campaign-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.campaign-name { margin: 0 0 5px; font-size: 17px; }
.campaign-meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; color: var(--muted); font-size: 14px; }
.action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.action-row.compact { margin-bottom: 0; }
.back-button { padding: 0; margin-bottom: 10px; background: transparent; color: var(--accent); }
.form-grid { display: grid; gap: 16px; }.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-actions { display: flex; gap: 10px; padding-top: 4px; }
.reset-schedule-builder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.schedule-preview { margin: -4px 0 0; padding: 10px 12px; border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0; background: var(--primary-soft); color: var(--accent); font-size: 14px; line-height: 1.55; }
.schedule-preview.warning { border-left-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.reward-rows { display: grid; gap: 8px; margin-top: 8px; }
.reward-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 8px; align-items: end; }
.reward-row button { min-height: 41px; background: var(--danger-soft); color: var(--danger); }
.reward-catalog-callout { margin-bottom: 16px; }
.reward-catalog-filter { margin-bottom: 12px; }
.reward-catalog-filter label { width: min(420px, 100%); }
.catalog-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 16px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 14px; }
.catalog-summary strong { color: var(--text); font-size: 14px; }
.code-panels { margin-top: 16px; }
.admin-form { max-width: 760px; margin-top: 16px; }
.configuration-form { margin-bottom: 18px; }
.configuration-callout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--line); box-shadow: var(--shadow); }
.configuration-callout > div { display: grid; gap: 6px; padding: 15px 17px; background: var(--panel); }
.configuration-callout strong { font-size: 14px; }
.configuration-callout span { color: var(--muted); font-size: 14px; line-height: 1.6; }
#gameAuthPolicySection { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; overflow: visible; background: var(--surface-2); }
#gameAuthPolicySection > div { padding: 0; background: transparent; }
#frameRoomConfigSection { grid-template-columns: minmax(0,1fr); gap: 18px; padding: 20px; background: var(--surface-2); }
#frameRoomConfigSection > div { padding: 0; background: transparent; }
#frameRoomConfigSection > .form-actions { display: flex; }
#gameAuthPolicyList { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
#gameAuthPolicyList .data-table th:nth-child(3), #gameAuthPolicyList .data-table td:nth-child(3) { min-width: 240px; white-space: normal; }
.game-auth-setting { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; margin: 3px 0; }
.game-auth-setting .uid { max-width: none; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.configuration-description { max-width: 240px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; }
.configuration-counts { display: flex; flex-wrap: wrap; gap: 5px; }
.configuration-counts span { padding: 3px 7px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 14px; }
.configuration-actions { min-width: 250px; }
.import-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 5px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.import-summary > div:not(.import-direction) { display: grid; gap: 4px; }
.import-summary strong { overflow-wrap: anywhere; }
.import-summary small { color: var(--muted); }
.import-direction { color: var(--accent); font-size: 22px; font-weight: 800; }
.import-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.import-module { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.import-module h4 { margin: 0 0 9px; font-size: 14px; }
.import-module-counts { display: flex; flex-wrap: wrap; gap: 5px 9px; color: var(--muted); font-size: 14px; }
.import-module-counts .create { color: var(--success); }.import-module-counts .update { color: var(--accent); }.import-module-counts .disable { color: var(--warning); }.import-module-counts .conflict { color: var(--danger); }
.import-danger, .import-conflicts, .import-warnings, .import-error { margin-top: 12px; padding: 12px 14px; border-radius: 9px; font-size: 14px; line-height: 1.65; }
.import-danger, .import-conflicts, .import-error { border: 1px solid var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.import-warnings { border: 1px solid var(--warning-line); background: var(--warning-soft); color: var(--warning); }
.import-danger code { display: inline-block; margin: 7px 5px 0 0; }
.import-conflicts ul, .import-warnings ul { margin: 7px 0 0; padding-left: 20px; }
.checksum-line { margin-top: 11px; overflow-wrap: anywhere; color: var(--muted); font-size: 14px; }
.checksum-line code { word-break: break-all; }
.import-confirmation { display: grid; gap: 13px; padding-top: 14px; border-top: 1px solid var(--line); }
.import-confirmation > button { justify-self: start; }
.import-confirmation .checkbox-row { color: var(--danger); border-color: var(--danger-line); background: var(--surface-2); }
.warning-note { margin: 0; padding: 11px 13px; border: 1px solid var(--warning-line); border-radius: 9px; background: var(--warning-soft); color: var(--warning); font-size: 14px; line-height: 1.65; }
.runtime-badge { display: inline-flex; padding: 3px 7px; border-radius: 99px; font-size: 14px; font-weight: 750; }
.runtime-ready { background: var(--success-soft); color: var(--success); }.runtime-pending { background: var(--warning-soft); color: var(--warning); }
.checkbox-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.checkbox-row { display: flex; grid-template-columns: auto 1fr; align-items: center; justify-content: flex-start; gap: 8px; min-height: 38px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.checkbox-row input { width: 16px; min-height: 16px; margin: 0; }
.tips { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.9; font-size: 14px; }

.workspace-heading { align-items: end; margin-bottom: 25px; }
.workspace-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.workspace-stats .stat-card:first-child { border-color: var(--line); background: linear-gradient(145deg, var(--panel), var(--primary-soft)); }
.workspace-main-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(290px, .78fr); gap: 16px; margin-bottom: 28px; }
.chart-panel { min-height: 310px; }
.activity-chart.large { height: 230px; }
.attention-panel { min-height: 310px; }
.count-badge { display: inline-flex; min-width: 25px; min-height: 25px; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 14px; font-weight: 800; }
.attention-list { display: grid; gap: 9px; margin-top: 17px; }
.attention-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 11px; border: 1px solid var(--warning-line); border-radius: 10px; background: var(--warning-soft); }
.attention-item.danger { border-color: var(--danger-line); background: var(--danger-soft); }
.attention-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #d79a1d; }
.attention-item.danger .attention-dot { background: #d64c42; }
.attention-title { font-size: 14px; font-weight: 750; }
.attention-description { margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.healthy-state { display: grid; place-items: center; min-height: 185px; color: var(--muted); text-align: center; }
.healthy-state .healthy-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 50%; background: var(--success-soft); color: var(--success); font-size: 20px; font-weight: 850; }
.workspace-games-section { margin-top: 2px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.section-heading h2 { font-size: 19px; }
.section-heading p { margin: 0; }
.search-compact { display: flex; align-items: center; gap: 12px; }
.search-compact input { width: 265px; min-height: 37px; }
.game-workspace-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.game-workspace-card { position: relative; min-width: 0; padding: 19px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); transition: transform .18s, border-color .18s, box-shadow .18s; }
.game-workspace-card:hover { transform: translateY(-2px); border-color: var(--line); box-shadow: 0 14px 32px rgba(31,42,68,.09); }
.game-workspace-card.has-issue { border-color: var(--danger-line); }
.game-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.game-card-header h3 { margin: 0 0 4px; font-size: 17px; }
.game-card-id { color: var(--muted); font: 10px ui-monospace, Consolas, monospace; }
.game-health { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 99px; background: var(--success-soft); color: var(--success); font-size: 14px; font-weight: 750; }
.game-health::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.game-health.warning { background: var(--danger-soft); color: var(--danger); }
.game-health.info { background: var(--primary-soft); color: var(--accent); }
.game-health.disabled { background: var(--surface-2); color: var(--muted); }
.game-card-description { height: 39px; margin: 13px 0; overflow: hidden; color: var(--muted); font-size: 14px; line-height: 1.6; }
.game-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
.game-metric { padding: 10px; background: var(--surface-2); }
.game-metric strong { display: block; overflow: hidden; font-size: 17px; text-overflow: ellipsis; }
.game-metric span { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; }
.game-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.game-card-footer .muted { margin: 0; font-size: 14px; }
.game-activity-note { min-width: 0; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; }
.game-activity-note::before { width: 6px; height: 6px; flex-basis: 6px; box-shadow: none; }
.load-error-card { border-color: var(--danger-line); background: var(--surface-2); }
.load-error-card .value, .error-state strong { color: var(--danger); }
.error-state p { margin: 6px 0 0; }
.activity-chart > .empty-state, .activity-chart > .loading-state { width: 100%; flex: 1 0 100%; }
.engagement-metrics > .error-state:only-child, .engagement-metrics > .loading-state:only-child,
.retention-metrics > .error-state:only-child, .retention-metrics > .loading-state:only-child { grid-column: 1 / -1; min-height: 125px; display: grid; place-items: center; }

.player-filter-panel { margin-bottom: 14px; }
.filter-primary-row, .filter-secondary-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.filter-primary-row + .filter-secondary-row { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.filter-primary-row label, .filter-secondary-row label { min-width: 155px; }
.filter-primary-row .search-field { min-width: 260px; flex: 1; }
.filter-secondary-row label { flex: 1; }
.result-summary { min-height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 7px; color: var(--muted); font-size: 14px; }
.tag-chips { display: flex; max-width: 260px; flex-wrap: wrap; gap: 4px; }
.tag-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 150px; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--tag-color, #64748b) 28%, var(--line)); border-radius: 99px; background: color-mix(in srgb, var(--tag-color, #64748b) 10%, var(--panel)); color: color-mix(in srgb, var(--tag-color, var(--muted)) 82%, var(--ink)); font-size: 14px; font-weight: 720; }
.tag-chip svg { flex: 0 0 7px; }
.tag-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 99px; font-size: 14px; font-weight: 760; }
.status-pill.normal { background: var(--success-soft); color: var(--success); }
.status-pill.online { background: var(--success-soft); color: var(--success); }
.status-pill.offline { background: var(--surface-2); color: var(--muted); }
.status-pill.banned { background: var(--danger-soft); color: var(--danger); }
.status-pill::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }

.audience-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.audience-summary-card { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.audience-summary-card .summary-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border-radius: 10px; background: var(--primary-soft); color: var(--accent); font-weight: 850; }
.audience-summary-card strong { display: block; font-size: 18px; }
.audience-summary-card span { color: var(--muted); font-size: 14px; }
.audience-grid { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: 16px; }
.tag-management-list, .segment-list { display: grid; gap: 9px; margin-top: 16px; }
.tag-management-item, .segment-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.tag-management-item:hover, .segment-item:hover { border-color: var(--line); background: var(--surface-2); }
.tag-management-main { min-width: 0; }
.tag-management-main .tag-chip { font-size: 14px; }
.item-description { margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.item-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.segment-item { align-items: flex-start; }
.segment-main { min-width: 0; flex: 1; }
.segment-title-row { display: flex; align-items: center; gap: 8px; }
.segment-title-row strong { font-size: 14px; }
.segment-member-count { padding: 3px 7px; border-radius: 99px; background: var(--primary-soft); color: var(--accent); font-size: 14px; font-weight: 750; }
.segment-rule-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.rule-chip { padding: 3px 7px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 14px; }
.audience-editor { margin-top: 16px; border-color: var(--line); box-shadow: var(--shadow-lg); }
.inline-select { display: flex; grid-template-columns: auto auto; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.inline-select select { width: auto; min-height: 34px; }

.restriction-banner { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--danger-line); border-radius: 12px; background: var(--danger-soft); color: var(--danger); }
.restriction-banner .restriction-icon { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 26px; border-radius: 50%; background: #d44940; color: var(--ink); font-weight: 850; }
.restriction-banner strong { display: block; margin-bottom: 4px; font-size: 14px; }
.restriction-banner p { margin: 0; font-size: 14px; line-height: 1.55; }
.player-ops-grid { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); gap: 16px; margin-bottom: 16px; }
.player-tag-choices { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.player-tag-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--muted); font-size: 14px; }
.player-tag-toggle:hover { border-color: var(--tag-color, #8793a8); background: var(--surface-2); }
.player-tag-toggle.assigned { border-color: color-mix(in srgb, var(--tag-color, #64748b) 42%, var(--line)); background: color-mix(in srgb, var(--tag-color, #64748b) 11%, var(--panel)); color: var(--ink); }
.player-tag-toggle .tag-color { width: 8px; height: 8px; border-radius: 50%; background: var(--tag-color, #64748b); }
.note-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 14px; }
.note-compose textarea { min-height: 72px; }
.note-list { display: grid; gap: 8px; max-height: 260px; margin-top: 13px; overflow-y: auto; }
.note-item { padding: 10px 12px; border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; background: var(--surface-2); }
.note-content { color: var(--ink); font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-meta { margin-top: 5px; color: var(--muted); font-size: 14px; }
.danger-button { background: #bd3e35; color: var(--ink); }
.danger-button:hover { background: #a7322a; }

.modal-dialog { width: min(540px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 24px 80px rgba(17,24,39,.25); }
.modal-dialog::backdrop { background: rgba(17,24,39,.48); backdrop-filter: blur(2px); }
.modal-dialog > form { padding: 22px; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.modal-heading > div { display: flex; align-items: flex-start; gap: 12px; }
.modal-heading h3 { margin: 0 0 5px; }
.danger-icon { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 31px; border-radius: 9px; background: var(--danger-soft); color: var(--danger); font-weight: 900; }
.icon-button { padding: 2px 8px; font-size: 22px; line-height: 1; }
.modal-actions { justify-content: flex-end; }

.toast-region { position: fixed; z-index: 100; top: 16px; right: 16px; width: min(390px, calc(100vw - 32px)); display: grid; gap: 9px; pointer-events: none; }
.toast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 13px; border: 1px solid #27344d; border-radius: 11px; background: #172033; color: var(--ink); box-shadow: 0 12px 30px rgba(0,0,0,.18); animation: toast-in .22s ease-out; pointer-events: auto; font-size: 14px; }
.toast::before { width: 8px; height: 8px; border-radius: 50%; background: #9eabc2; content: ""; }
.toast.success { border-color: #27795a; background: #185a43; }.toast.success::before { background: #72d9a9; }
.toast.error { border-color: #b44a43; background: #8f2f29; }.toast.error::before { background: #ffaaa4; }
.toast button { padding: 1px 5px; background: transparent; color: rgba(255,255,255,.7); font-size: 16px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.request-progress { position: fixed; z-index: 110; top: 0; left: 0; width: 0; height: 2px; opacity: 0; background: linear-gradient(90deg, #4566df, #7e95ec); transition: width .25s, opacity .2s; }
.request-progress.active { width: 72%; opacity: 1; }
.request-progress.complete { width: 100%; opacity: 0; }
.loading-state { min-height: 140px; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
.loading-state::before { width: 22px; height: 22px; margin-bottom: 9px; border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin .75s linear infinite; content: ""; }
@keyframes spin { to { transform: rotate(360deg); } }

.payment-section { margin-top: 16px; }
.payment-section > .panel-heading { margin-bottom: 14px; }
.inline-editor { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.payment-channel-list { display: grid; gap: 10px; }
.payment-channel-row { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(180px, 1.2fr) 150px 90px 120px; align-items: end; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.payment-channel-row .checkbox-row { align-self: center; padding-bottom: 8px; }
.payment-reward-row { max-width: 720px; }
.warning-text { color: var(--warning); }
.status-fulfilled { background: var(--primary-soft); color: var(--accent); }
.status-completed { background: var(--success-soft); color: var(--success); }
.status-failed, .status-chargeback { background: var(--danger-soft); color: var(--danger); }
.status-pending, .status-verifying, .status-refund_pending { background: var(--warning-soft); color: var(--warning); }
.status-refunded, .status-cancelled { background: var(--surface-2); color: var(--muted); }
.payment-order-detail { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); box-shadow: var(--shadow-lg); }
.payment-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.payment-detail-grid > div { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.payment-detail-grid span:first-child { display: block; margin-bottom: 5px; color: var(--muted); font-size: 14px; }
.payment-detail-grid strong { display: block; overflow-wrap: anywhere; font-size: 14px; }
.payment-detail-section { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.payment-detail-section h4 { margin: 0 0 9px; font-size: 14px; }
.payment-detail-section p { margin: 0; font-size: 14px; line-height: 1.65; }
.delivery-card { display: grid; gap: 4px; margin-top: 9px; padding: 10px 12px; border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; background: var(--primary-soft); font-size: 14px; }
.delivery-card.revoked { border-left-color: var(--danger-line); background: var(--danger-soft); }
.payment-event-list { display: grid; gap: 7px; }
.payment-event-list > div { display: grid; grid-template-columns: 150px minmax(180px, .7fr) minmax(260px, 1.3fr); align-items: start; gap: 10px; padding: 9px 11px; border-radius: 8px; background: var(--panel); font-size: 14px; }
.payment-event-list > div > span { color: var(--muted); }
.payment-event-list details summary, .payment-provider-response summary { cursor: pointer; color: var(--accent); }
.payment-event-list pre, .payment-provider-response pre { max-height: 220px; overflow: auto; padding: 10px; border-radius: 7px; background: #182034; color: var(--ink); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.payment-provider-response { margin-top: 14px; font-size: 14px; }
.payment-refund-form { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--danger-line); }
.compact-table { font-size: 14px; }

@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #dashboardCards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leaderboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-channel-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-event-list > div { grid-template-columns: 130px 1fr; }
  .payment-event-list details { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .topbar { padding: 0 14px; }.topbar-right { gap: 6px; }.user-badge, .version-badge { display: none; }
  .sidebar { width: 176px; flex-basis: 176px; }.content { padding: 20px 14px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.two, .form-grid.three, .dashboard-grid, .detail-grid, .configuration-callout, .import-module-grid, .workspace-main-grid, .audience-grid, .player-ops-grid, .reset-schedule-builder, .analytics-grid { grid-template-columns: 1fr; }
  .activity-chart { height: 180px; }
}
@media (max-width: 600px) {
  .topbar { position: static; align-items: flex-start; padding-top: 12px; padding-bottom: 12px; flex-direction: column; }
  .layout { display: block; }.sidebar { position: sticky; z-index: 4; top: 0; width: 100%; height: auto; display: flex; gap: 5px; overflow-x: auto; padding: 9px; border-bottom: 1px solid #222d43; }
  .nav-group-label { display: none; }.nav-button { min-width: 94px; margin: 0; text-align: center; white-space: nowrap; }
  .content { padding: 18px 11px; }.page-heading { align-items: stretch; flex-direction: column; }
  .stat-grid { grid-template-columns: 1fr 1fr; }.stat-card { padding: 14px; }.stat-card .value { font-size: 23px; }
  #dashboardCards { grid-template-columns: 1fr 1fr; }
  .reward-row { grid-template-columns: 1fr 92px auto; }.login-card { padding: 28px; }
  .leaderboard-grid { grid-template-columns: 1fr; }.activity-chart { gap: 3px; }
  .definition-row { grid-template-columns: 92px minmax(0, 1fr); }
  .import-summary { grid-template-columns: 1fr; }.import-direction { transform: rotate(90deg); justify-self: center; }
  .sidebar-context { display: none; }.workspace-link { display: none; }
  .game-workspace-grid, .workspace-stats, .audience-summary { grid-template-columns: 1fr; }
  .section-heading, .workspace-heading { align-items: stretch; flex-direction: column; }
  .search-compact { align-items: stretch; flex-direction: column; }.search-compact input { width: 100%; }
  .filter-primary-row, .filter-secondary-row { display: grid; grid-template-columns: 1fr; }.filter-primary-row label, .filter-secondary-row label { min-width: 0; }
  .note-compose { grid-template-columns: 1fr; }
  .payment-channel-row { grid-template-columns: 1fr; }
  .payment-detail-grid { grid-template-columns: 1fr; }
  .trend-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .engagement-metrics, .retention-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .distribution-heading { align-items: flex-start; flex-direction: column; gap: 3px; }.distribution-heading span { text-align: left; }
}

/* Application shell and information hierarchy */
button:focus-visible, summary:focus-visible, .clickable-row:focus-visible { outline: 3px solid rgba(63,95,215,.28); outline-offset: 2px; }
.topbar-main { min-width: 0; display: flex; align-items: center; gap: 20px; }
.mobile-menu-button { display: none; }
.page-location { min-width: 0; display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 9px; padding-left: 20px; border-left: 1px solid var(--line); }
.page-location span { color: var(--muted); font-size: 14px; line-height: 1; }
.page-location strong { grid-row: 2; color: var(--ink); font-size: 14px; line-height: 1; }

.sidebar { width: 248px; flex-basis: 248px; padding: 12px 12px 28px; transition: width .2s ease, flex-basis .2s ease, transform .2s ease; }
.sidebar-heading { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 10px; color: var(--muted); font-size: 14px; font-weight: 800; letter-spacing: .1em; }
.sidebar-collapse { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); color: var(--muted); font-size: 19px; }
.sidebar-collapse:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: var(--ink); }
.mobile-nav-close { width: 32px; height: 32px; display: none; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: var(--muted); font-size: 21px; }
.mobile-nav-close:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: var(--ink); }
.primary-navigation { display: grid; gap: 5px; }
.nav-section { min-width: 0; border-radius: 10px; }
.nav-section-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 11px 7px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 780; letter-spacing: .08em; text-align: left; }
.nav-section-toggle:hover { background: rgba(255,255,255,.04); color: var(--muted); }
.nav-section.has-active > .nav-section-toggle { color: var(--accent); }
.nav-chevron { font-size: 14px; line-height: 1; transition: transform .16s; }
.nav-section.collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-section.collapsed .nav-section-items { display: none; }
.nav-section-items { display: grid; gap: 2px; }
.nav-button { min-height: 40px; margin: 0; padding: 9px 11px; border-radius: 8px; }
.nav-button.active { background: #233257; box-shadow: inset 3px 0 #7892ef; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-icon { flex: 0 0 18px; font-family: "Segoe UI Symbol", "Microsoft YaHei", sans-serif; }
.sidebar-context { margin: 7px 4px 8px; }
.mobile-nav-backdrop { display: none; }

.sidebar-collapsed .sidebar { width: 72px; flex-basis: 72px; padding-right: 9px; padding-left: 9px; }
.sidebar-collapsed .sidebar-heading { justify-content: center; padding: 0; }
.sidebar-collapsed .sidebar-heading > span, .sidebar-collapsed .nav-section-toggle, .sidebar-collapsed .sidebar-context, .sidebar-collapsed .nav-label { display: none; }
.sidebar-collapsed .nav-section-items { display: grid !important; }
.sidebar-collapsed .primary-navigation { gap: 8px; }
.sidebar-collapsed .nav-button { justify-content: center; padding: 9px; }
.sidebar-collapsed .nav-button.active { box-shadow: inset 3px 0 #7892ef; }
.sidebar-collapsed .nav-icon { width: 20px; flex-basis: 20px; font-size: 16px; }

.page-view { animation: page-enter .16s ease-out; }
@keyframes page-enter { from { opacity: .55; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.page-tabs { display: flex; gap: 4px; margin: -2px 0 18px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.page-tabs::-webkit-scrollbar { display: none; }
.page-tab { position: relative; flex: 0 0 auto; padding: 11px 16px 12px; border-radius: 8px 8px 0 0; background: transparent; color: var(--muted); font-size: 14px; }
.page-tab:hover { background: var(--surface-2); color: var(--ink); }
.page-tab.active { color: var(--accent); }
.page-tab.active::after { position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; border-radius: 2px 2px 0 0; background: var(--primary); content: ""; }
.payment-pane { animation: page-enter .14s ease-out; }
.payment-section.payment-pane { margin-top: 0; }

.help-disclosure { margin: 0 0 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
.help-disclosure > summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 16px; cursor: pointer; list-style: none; }
.help-disclosure > summary::-webkit-details-marker { display: none; }
.help-disclosure > summary:hover { background: var(--surface-2); }
.help-disclosure > summary > span:first-child { display: grid; gap: 3px; }
.help-disclosure > summary strong { font-size: 14px; }
.help-disclosure > summary small { color: var(--muted); font-size: 14px; font-weight: 400; }
.disclosure-chevron { color: var(--muted); transition: transform .16s; }
.help-disclosure[open] .disclosure-chevron { transform: rotate(180deg); }
.help-disclosure .configuration-callout { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.game-configuration-help { margin-bottom: 16px; }

.code-action-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; }
.code-action-panel h3 { margin-bottom: 4px; }
.code-action-panel p { margin-bottom: 0; }

/* Layered details and editing tasks */
.drawer-dialog, .editor-dialog { padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--ink); box-shadow: none; }
.drawer-dialog::backdrop, .editor-dialog::backdrop { background: rgba(17,24,39,.48); backdrop-filter: blur(1.5px); }
.drawer-dialog { width: min(940px, calc(100vw - 260px)); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; }
.drawer-dialog[open] { animation: drawer-enter .2s ease-out; }
@keyframes drawer-enter { from { transform: translateX(24px); opacity: .7; } to { transform: translateX(0); opacity: 1; } }
.drawer-frame { height: 100%; display: flex; flex-direction: column; background: var(--bg); box-shadow: -20px 0 55px rgba(20,29,49,.18); }
.layer-topbar { min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 22px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.98); }
.layer-context { min-width: 0; overflow: hidden; color: var(--muted); font-size: 14px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.layer-close { margin-left: auto; }
.drawer-back-button { padding: 6px 8px; color: var(--accent); font-size: 14px; }
.drawer-body { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.drawer-view { min-height: 100%; padding: 26px 28px 50px; }
.drawer-view > .page-heading .back-button { display: none; }
.drawer-view > .page-heading { margin-bottom: 18px; }
.drawer-view .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.drawer-view .player-ops-grid, .drawer-view .detail-grid { grid-template-columns: 1fr; }
.drawer-view .json-panel pre { max-height: 360px; }
#paymentOrderDetailPanel.drawer-view { margin: 0; padding: 26px 28px 50px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#paymentOrderDetailPanel.drawer-view > .panel-heading > #closePaymentOrderDetail { display: none; }

.editor-dialog { width: min(720px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 36px); }
.editor-dialog[data-size="small"] { width: min(520px, calc(100vw - 40px)); }
.editor-dialog[data-size="large"] { width: min(900px, calc(100vw - 40px)); }
.editor-dialog[data-size="xlarge"] { width: min(1120px, calc(100vw - 40px)); }
.editor-dialog[open] { animation: dialog-enter .16s ease-out; }
@keyframes dialog-enter { from { transform: translateY(8px) scale(.99); opacity: .65; } to { transform: translateY(0) scale(1); opacity: 1; } }
.editor-frame { max-height: calc(100dvh - 36px); display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--panel); box-shadow: 0 24px 80px rgba(17,24,39,.24); }
.editor-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 26px 28px; }
.editor-content.panel, .editor-content.configuration-form, .editor-content.admin-form, .editor-content.inline-editor, .editor-content.audience-editor { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.editor-content > .panel-heading:first-child { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.editor-content > .panel-heading:first-child > button { display: none; }
.editor-content .form-actions { justify-content: flex-end; padding-top: 10px; }
.editor-content .payment-channel-row { grid-template-columns: minmax(170px,.8fr) minmax(180px,1.2fr) 140px 80px 110px; }

.confirmation-message { margin: 0; white-space: pre-line; }
.result-icon { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 31px; border-radius: 9px; background: var(--success-soft); color: var(--success); font-weight: 900; }
.copy-value-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.copy-value-row input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 750; }

.filter-primary-row + .filter-secondary-row[hidden] { display: none; }
.filter-secondary-row { animation: page-enter .14s ease-out; }
.data-table th { position: sticky; z-index: 1; top: 0; }

@media (max-width: 980px) {
  .page-location { display: none; }
  .drawer-dialog { width: min(840px, calc(100vw - 80px)); }
  .editor-content .payment-channel-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .topbar { position: sticky; min-height: 62px; padding: 8px 12px; flex-direction: row; align-items: center; }
  .topbar-main { gap: 8px; }
  .mobile-menu-button { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; padding: 0; font-size: 20px; }
  .brand > span:not(.brand-mark) { display: none; }
  .topbar-right { min-width: 0; flex: 1; justify-content: flex-end; }
  .topbar-right { flex-wrap: wrap; }
  .timezone-picker { order: 3; flex: 1 1 100%; justify-content: flex-end; }
  .timezone-picker select { width: min(180px, 55vw); }
  .game-picker-label, .workspace-link, .user-badge, .version-badge { display: none; }
  .game-picker { min-width: 0; flex: 1; }
  .game-picker select { width: 100%; min-width: 0; }
  #logoutButton { padding-right: 8px; padding-left: 8px; }
  .layout { min-height: calc(100vh - 62px); display: block; }
  .sidebar, .sidebar-collapsed .sidebar { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(300px, calc(100vw - 48px)); height: 100dvh; display: block; padding: 12px 12px 28px; overflow-y: auto; border: 0; box-shadow: 20px 0 55px rgba(11,18,32,.26); transform: translateX(-102%); }
  .mobile-nav-open .sidebar { transform: translateX(0); }
  .mobile-nav-backdrop { position: fixed; z-index: 35; inset: 0; width: 100%; display: block; padding: 0; border-radius: 0; background: rgba(17,24,39,.48); }
  .sidebar-heading, .sidebar-collapsed .sidebar-heading { justify-content: space-between; padding: 0 8px 0 10px; }
  .sidebar-collapse { display: none; }
  .mobile-nav-close { display: grid; }
  .sidebar .sidebar-context { display: block; }
  .sidebar .nav-button { min-width: 0; margin: 0; text-align: left; white-space: normal; }
  .sidebar-collapsed .sidebar-heading > span, .sidebar-collapsed .nav-section-toggle, .sidebar-collapsed .nav-label { display: flex; }
  .sidebar-collapsed .nav-section-toggle { display: flex; }
  .sidebar-collapsed .sidebar-context { display: block; }
  .sidebar-collapsed .nav-section.collapsed .nav-section-items { display: none !important; }
  .sidebar-collapsed .nav-button { justify-content: flex-start; padding: 9px 11px; }
  .content { padding: 20px 12px 42px; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .drawer-dialog, .editor-dialog, .editor-dialog[data-size="small"], .editor-dialog[data-size="large"], .editor-dialog[data-size="xlarge"] { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; }
  .editor-frame { height: 100dvh; max-height: none; border-radius: 0; }
  .drawer-view { padding: 20px 14px 36px; }
  .drawer-view .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .editor-dialog-body { padding: 20px 16px 28px; }
  .editor-content .form-grid.two, .editor-content .form-grid.three, .editor-content .reset-schedule-builder, .editor-content .payment-channel-row { grid-template-columns: 1fr; }
  .code-action-panel { align-items: stretch; flex-direction: column; }
  .page-tabs { margin-right: -12px; margin-left: -12px; padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Frame-room monitoring is deliberately pull-only; no visual element starts a timer. */
.frame-room-monitor-notice { margin-bottom: 16px; }
.frame-room-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.frame-room-live-panel { margin-bottom: 16px; }
.frame-room-detail-panel { display: grid; gap: 14px; margin-bottom: 22px; }
.frame-room-history-heading { margin-top: 24px; }
.frame-room-row { cursor: pointer; transition: background-color .12s ease; }
.frame-room-row:focus-within td { background: var(--surface-2); }
.frame-room-row.selected td { background: var(--primary-soft); }
.frame-room-row.selected td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.frame-room-row.selected .frame-room-inspect { background: var(--primary); color: var(--ink); }
.frame-room-elapsed { margin-top: 5px; }
.frame-room-offline { margin-top: 4px; color: var(--danger); font-size: 14px; font-weight: 720; }
.frame-room-stage { display: inline-flex; padding: 4px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 14px; font-weight: 760; }
.frame-room-stage.stage-running { background: var(--success-soft); color: var(--success); }
.frame-room-stage.stage-loading, .frame-room-stage.stage-scheduled { background: var(--warning-soft); color: var(--warning); }
.frame-room-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.frame-room-detail-grid > div { min-width: 0; display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.frame-room-detail-grid span { color: var(--muted); font-size: 14px; }
.frame-room-detail-grid strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; }
.frame-room-participants summary { cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 720; }
.frame-room-participants > div { margin-top: 6px; }

@media (max-width: 900px) {
  .frame-room-stat-grid, .frame-room-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .frame-room-stat-grid, .frame-room-detail-grid { grid-template-columns: 1fr; }
}

/* Telemetry workspace */
.telemetry-heading .action-row { align-items: center; }
.telemetry-collection-badge { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 14px; font-weight: 760; white-space: nowrap; }
.telemetry-collection-badge.enabled { border-color: var(--success-line); background: var(--success-soft); color: var(--success); }
.telemetry-collection-badge.disabled { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.tab-count { display: inline-grid; min-width: 19px; height: 19px; place-items: center; margin-left: 5px; padding: 0 5px; border-radius: 99px; background: var(--danger-soft); color: var(--danger); font-size: 14px; font-weight: 850; }
.telemetry-pane { display: grid; gap: 16px; animation: page-enter .14s ease-out; }
.telemetry-range-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) 150px 155px 155px auto; align-items: end; gap: 12px; margin-bottom: 17px; padding: 14px 16px; box-shadow: none; }
.telemetry-range-toolbar label { min-width: 0; }
.telemetry-range-toolbar input, .telemetry-range-toolbar select { min-height: 38px; }
.telemetry-range-copy { align-self: center; display: grid; gap: 3px; }
.telemetry-range-copy strong { font-size: 14px; }
.telemetry-stat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 0; }
#telemetryAdCards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#telemetryCrashDetailCards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.telemetry-overview-grid, .telemetry-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr); gap: 16px; }
.telemetry-analysis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.telemetry-chart-panel { min-width: 0; }
.telemetry-event-dot { background: #526fd8; }.telemetry-player-dot { margin-left: 6px; background: #36a985; }.telemetry-crash-dot { margin-left: 6px; background: #d85d56; }
.telemetry-line-chart { min-height: 275px; margin-top: 12px; }
.telemetry-svg-scroll { overflow-x: auto; overflow-y: hidden; }
.telemetry-line-chart svg { width: 100%; min-width: 720px; height: 250px; display: block; overflow: visible; }
.telemetry-line-chart svg .grid { stroke: var(--line); stroke-width: 1; }
.telemetry-line-chart svg .series { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.telemetry-line-chart svg .series.events { stroke: var(--line); }.telemetry-line-chart svg .series.players { stroke: #36a985; }.telemetry-line-chart svg .series.crashes { stroke: var(--danger-line); }
.telemetry-line-chart svg circle { stroke: var(--line); stroke-width: 1.5; }
.telemetry-line-chart svg circle.events { fill: var(--accent); }.telemetry-line-chart svg circle.players { fill: var(--success); }.telemetry-line-chart svg circle.crashes { fill: var(--danger); }
.telemetry-line-chart svg text { fill: var(--muted); font-size: 14px; }
.telemetry-chart-note { margin: 5px 0 0; color: var(--muted); font-size: 14px; text-align: right; }
.telemetry-health-panel { min-width: 0; }
.telemetry-health-list { display: grid; gap: 8px; margin-top: 16px; }
.telemetry-health-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); font-size: 14px; }
.telemetry-health-row strong { font-size: 15px; }.telemetry-health-row.success strong { color: var(--success); }.telemetry-health-row.warning strong { color: var(--warning); }
.telemetry-health-footnote { padding: 5px 2px 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.telemetry-top-events-panel { padding-bottom: 8px; }.telemetry-top-events-panel .table-wrap { margin: 14px -10px 0; }
.telemetry-coverage { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border: 1px solid var(--warning-line); border-radius: 10px; background: var(--warning-soft); color: var(--warning); font-size: 14px; line-height: 1.55; }
.telemetry-coverage strong { flex: 0 0 auto; }.telemetry-coverage span { color: var(--warning); }
.telemetry-coverage.info { border-color: var(--line); background: var(--primary-soft); color: var(--accent); }.telemetry-coverage.info span { color: var(--accent); }
.telemetry-load-error { min-height: 100px; display: grid; place-content: center; gap: 6px; padding: 24px; color: var(--danger); text-align: center; }
.telemetry-load-error span { color: var(--muted); font-size: 14px; }

.telemetry-breakdown-heading { align-items: flex-end; }
.telemetry-breakdown-heading > label { width: 170px; flex: 0 0 170px; }
.telemetry-breakdown-controls { display: flex; flex: 0 0 auto; align-items: flex-end; justify-content: flex-end; gap: 10px; }
.telemetry-breakdown-controls > label { width: 145px; }
.telemetry-funnel, .telemetry-breakdown { display: grid; gap: 11px; margin-top: 18px; }
.telemetry-funnel-row { display: grid; grid-template-columns: minmax(130px, .75fr) minmax(150px, 1.25fr) 72px; align-items: center; gap: 13px; }
.telemetry-funnel-row > div:first-child { min-width: 0; display: grid; gap: 2px; }.telemetry-funnel-row span { font-size: 14px; font-weight: 700; }.telemetry-funnel-row code { overflow: hidden; color: var(--muted); font-size: 14px; text-overflow: ellipsis; }
.telemetry-funnel-row > strong { font-size: 14px; text-align: right; }.telemetry-funnel-row.failure > strong { color: var(--danger); }
.telemetry-funnel-bar, .telemetry-breakdown-track { height: 9px; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.telemetry-funnel-bar > span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #526fd8, #7b91e1); }
.telemetry-funnel-row.failure .telemetry-funnel-bar > span { background: linear-gradient(90deg, #d15a52, #e29691); }
.telemetry-funnel-bar > .w-0 { width: 1px; }.telemetry-funnel-bar > .w-1 { width: 5%; }.telemetry-funnel-bar > .w-2 { width: 10%; }.telemetry-funnel-bar > .w-3 { width: 15%; }.telemetry-funnel-bar > .w-4 { width: 20%; }
.telemetry-funnel-bar > .w-5 { width: 25%; }.telemetry-funnel-bar > .w-6 { width: 30%; }.telemetry-funnel-bar > .w-7 { width: 35%; }.telemetry-funnel-bar > .w-8 { width: 40%; }.telemetry-funnel-bar > .w-9 { width: 45%; }
.telemetry-funnel-bar > .w-10 { width: 50%; }.telemetry-funnel-bar > .w-11 { width: 55%; }.telemetry-funnel-bar > .w-12 { width: 60%; }.telemetry-funnel-bar > .w-13 { width: 65%; }.telemetry-funnel-bar > .w-14 { width: 70%; }
.telemetry-funnel-bar > .w-15 { width: 75%; }.telemetry-funnel-bar > .w-16 { width: 80%; }.telemetry-funnel-bar > .w-17 { width: 85%; }.telemetry-funnel-bar > .w-18 { width: 90%; }.telemetry-funnel-bar > .w-19 { width: 95%; }.telemetry-funnel-bar > .w-20 { width: 100%; }
.telemetry-breakdown-row { display: grid; gap: 6px; }.telemetry-breakdown-row > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.telemetry-breakdown-row strong { min-width: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.telemetry-breakdown-row span { color: var(--muted); font-size: 14px; }

.telemetry-event-filters, .telemetry-crash-filters { margin-bottom: 0; box-shadow: none; }
.telemetry-event-filters .search-field, .telemetry-crash-filters .search-field { min-width: 280px; flex: 1; }
.telemetry-event-filters label:not(.search-field), .telemetry-crash-filters label:not(.search-field) { min-width: 150px; }
.telemetry-type { display: inline-flex; padding: 3px 7px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 14px; font-weight: 760; }
.telemetry-type.type-ad { background: var(--warning-soft); color: var(--warning); }.telemetry-type.type-custom { background: var(--primary-soft); color: var(--accent); }.telemetry-type.type-system { background: var(--surface-2); color: var(--success); }
.telemetry-definition-status, .telemetry-crash-status { display: inline-flex; padding: 4px 8px; border-radius: 99px; font-size: 14px; font-weight: 760; }
.telemetry-definition-status.active { background: var(--success-soft); color: var(--success); }.telemetry-definition-status.draft { background: var(--warning-soft); color: var(--warning); }.telemetry-definition-status.disabled { background: var(--surface-2); color: var(--muted); }
.telemetry-definition-table td { vertical-align: top; }
.telemetry-property-editor { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.telemetry-property-editor .field-heading > div { display: grid; gap: 3px; }.telemetry-property-editor .field-heading p { margin: 0; }
.telemetry-property-head, .telemetry-property-row { display: grid; grid-template-columns: minmax(150px, 1fr) 150px 115px 38px; align-items: center; gap: 9px; }
.telemetry-property-head { padding: 0 3px; color: var(--muted); font-size: 14px; font-weight: 720; }
.telemetry-property-rows { display: grid; gap: 8px; }.telemetry-property-row input, .telemetry-property-row select { min-height: 38px; }
.telemetry-dimension-check { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); font-size: 14px; font-weight: 600; }
.telemetry-dimension-check input { width: auto; min-height: 0; margin: 0; }.telemetry-property-remove { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; font-size: 18px; }

.telemetry-crash-title { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.telemetry-crash-status.new { background: var(--danger-soft); color: var(--danger); }.telemetry-crash-status.in_progress { background: var(--warning-soft); color: var(--warning); }.telemetry-crash-status.resolved { background: var(--success-soft); color: var(--success); }.telemetry-crash-status.ignored { background: var(--surface-2); color: var(--muted); }
.telemetry-card-text { font-size: 17px !important; overflow-wrap: anywhere; white-space: normal; }
.telemetry-crash-update-form { margin-bottom: 16px; }.revision-badge { display: inline-flex; padding: 4px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font: 10px ui-monospace, Consolas, monospace; }
.telemetry-occurrence-section { margin-top: 16px; }.telemetry-occurrence-list { display: grid; gap: 10px; margin-top: 16px; }
.telemetry-occurrence { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.telemetry-occurrence > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; cursor: pointer; list-style: none; font-size: 14px; }
.telemetry-occurrence > summary::-webkit-details-marker { display: none; }.telemetry-occurrence > summary > span:first-child { min-width: 0; display: grid; gap: 3px; }.telemetry-occurrence > summary small { color: var(--muted); font-size: 14px; }.telemetry-occurrence > summary > span:last-child { color: var(--muted); text-align: right; }
.telemetry-occurrence[open] > summary { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.telemetry-occurrence-body { display: grid; gap: 11px; padding: 14px; }.telemetry-crash-message { color: var(--danger); font-size: 14px; font-weight: 720; overflow-wrap: anywhere; }
.telemetry-occurrence-body pre, .telemetry-sample-card pre, .telemetry-context-grid pre { max-height: 320px; margin: 0; overflow: auto; padding: 12px; border-radius: 8px; background: #172033; color: var(--ink); font: 10px/1.55 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.telemetry-occurrence-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 14px; }.telemetry-occurrence-meta code { color: var(--accent); }
.telemetry-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.telemetry-context-grid details { min-width: 0; }.telemetry-context-grid summary { margin-bottom: 7px; cursor: pointer; color: var(--accent); font-size: 14px; }

.telemetry-event-analysis-panel { margin-bottom: 18px; }.telemetry-sample-heading { margin: 0 0 10px; }.telemetry-sample-heading h3 { margin-bottom: 3px; }
.telemetry-sample-list { display: grid; gap: 10px; padding: 14px; }.telemetry-sample-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.telemetry-sample-meta { display: grid; grid-template-columns: 180px minmax(0, 1fr) 150px; align-items: center; gap: 12px; padding: 11px 13px; font-size: 14px; }.telemetry-sample-meta span { color: var(--muted); }.telemetry-sample-meta code { overflow: hidden; color: var(--muted); font-size: 14px; text-align: right; text-overflow: ellipsis; }
.telemetry-sample-card details { border-top: 1px solid var(--line); }.telemetry-sample-card summary { padding: 9px 13px; cursor: pointer; color: var(--accent); font-size: 14px; }.telemetry-sample-card details > pre { margin: 0 13px 13px; }
.telemetry-sample-detail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 4px 13px 11px; }.telemetry-sample-detail > div { min-width: 0; display: grid; gap: 3px; }.telemetry-sample-detail span { color: var(--muted); font-size: 14px; }.telemetry-sample-detail code, .telemetry-sample-detail strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; }

.telemetry-settings-form { max-width: 1100px; }.telemetry-settings-section { display: grid; gap: 17px; }.telemetry-toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.setting-switch { min-height: 80px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.setting-switch input { width: 34px; min-height: 20px; margin: 2px 0 0; accent-color: var(--primary); }.setting-switch > span { display: grid; gap: 5px; }.setting-switch strong { font-size: 14px; }.setting-switch small { color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.55; }
.telemetry-settings-actions { justify-content: flex-end; }.telemetry-settings-actions > span { margin-right: auto; align-self: center; }

@media (max-width: 1180px) {
  .telemetry-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #telemetryCrashDetailCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .telemetry-range-toolbar { grid-template-columns: minmax(180px, 1fr) repeat(3, 145px); }
  .telemetry-range-toolbar > button { grid-column: -2 / -1; }
}
@media (max-width: 900px) {
  .telemetry-range-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }.telemetry-range-copy { grid-column: 1 / -1; }
  .telemetry-overview-grid, .telemetry-analysis-grid { grid-template-columns: 1fr; }
  .telemetry-sample-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .telemetry-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #telemetryAdCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .telemetry-range-toolbar { grid-template-columns: 1fr; }.telemetry-range-toolbar > button, .telemetry-range-copy { grid-column: auto; }
  .telemetry-coverage { display: grid; }.telemetry-coverage strong { flex-basis: auto; }
  .telemetry-breakdown-heading { align-items: stretch; flex-direction: column; }.telemetry-breakdown-heading > label { width: 100%; flex-basis: auto; }
  .telemetry-breakdown-controls { width: 100%; align-items: stretch; flex-direction: column; }.telemetry-breakdown-controls > label { width: 100%; }
  .telemetry-funnel-row { grid-template-columns: 105px minmax(90px, 1fr) 55px; gap: 8px; }
  .telemetry-property-head { display: none; }.telemetry-property-row { grid-template-columns: minmax(0, 1fr) 110px 36px; }.telemetry-property-row .telemetry-property-name { grid-column: 1 / -1; }.telemetry-dimension-check { grid-column: 1 / 3; }
  .telemetry-context-grid, .telemetry-toggle-grid { grid-template-columns: 1fr; }
  .telemetry-occurrence > summary { align-items: flex-start; flex-direction: column; }.telemetry-occurrence > summary > span:last-child { text-align: left; }
  .telemetry-sample-meta { grid-template-columns: 1fr; }.telemetry-sample-meta code { text-align: left; }.telemetry-sample-detail { grid-template-columns: 1fr; }
}
/* Date-based payment and cohort reports. */
.brand-mark img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.report-range-form { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; }
.report-range-form label { display: grid; gap: 7px; font-size: 14px; min-width: 150px; }
.report-range-form input, .report-range-form select { min-height: 42px; font-size: 15px; }
.report-range-form > button { min-height: 42px; }
.range-timezone { align-self: center; color: var(--muted); font-size: 14px; }
.range-error { flex-basis: 100%; margin: 0; }
#paymentRangeToolbar { margin-bottom: 20px; }
#paymentSummaryCards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#paymentSummaryCards .value { overflow-wrap: anywhere; }
#paymentSummaryCards .small-text { font-size: 14px; margin-top: 8px; }
.retention-panel { grid-column: 1 / -1; }
.analytics-grid > .analytics-panel:first-child { grid-column: 1 / -1; }
.retention-panel .report-range-form { margin-bottom: 22px; }
.retention-panel .retention-metrics { margin-bottom: 22px; }
.retention-panel .retention-item small { font-size: 14px; }
.retention-table th, .retention-table td { white-space: nowrap; font-size: 14px; }
.retention-table td small { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }
/* Complete diagnostic documents, independently of the visible page. */
.diagnostic-report-dialog { width: min(1080px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: auto; }
.diagnostic-report-content { display: grid; gap: 18px; padding: 24px; }
.diagnostic-report-content .panel-heading { margin: 0; }
.diagnostic-report-content .modal-heading > div { display: block; }
.diagnostic-report-content label { display: grid; gap: 8px; }
.diagnostic-report-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; }
.diagnostic-report-toolbar p { flex: 1 1 200px; align-self: center; margin: 0; overflow-wrap: anywhere; }
.diagnostic-report-preview textarea { min-height: 240px; height: 44dvh; resize: vertical; font: 14px/1.7 Consolas, "Microsoft YaHei", monospace; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); }
@media (max-width: 680px) {
  .diagnostic-report-content { padding: 18px; gap: 14px; }
  .diagnostic-report-toolbar p { flex-basis: 100%; }
  .diagnostic-report-content .modal-actions { flex-wrap: wrap; }
}
@media (max-width: 680px) {
  #paymentSummaryCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-range-form label { flex: 1 1 140px; min-width: 0; }
  .report-range-form > button { flex: 1 1 100%; }
  .range-timezone { flex-basis: 100%; }
}

.leaderboard-summary { display: inline-block; max-width: 22rem; white-space: normal; overflow-wrap: anywhere; }