:root {
  color-scheme: dark;
  --background: #0b0d0a;
  --card: #151712;
  --text: #f0eee4;
  --muted: #a0a298;
  --line: #303329;
  --soft: #1c1f19;
  --disabled: #686b62;
  --orange: #efa11e;
  --green: #8eb181;
  --danger: #dd8171;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding: 34px 16px;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.checkout {
  position: relative;
  width: min(560px, 100%);
  margin: auto;
  background: var(--card);
  border: 1px solid #393c31;
  border-radius: 14px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .42);
  overflow: hidden;
}

.checkout-page {
  --background: #100b15;
  --card: #1b1422;
  --text: #fff7fd;
  --muted: #c6b8ca;
  --line: #433347;
  --soft: #261b2c;
  --orange: #ff66bd;
  height: 100dvh;
  min-height: 0;
  padding: 8px 12px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 18%, #30203a 0%, #100b15 62%);
}
.checkout-page .checkout { max-width: 100%; max-height: calc(100dvh - 16px); display: flex; flex-direction: column; border-color: #57405a; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.checkout-hero {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 4 / 1;
  overflow: hidden;
  background: #390824;
}
.checkout-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; }

.checkout-page .product { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 24px; }
h1 { margin: 0; color: #f6f3e8; font-size: 26px; font-weight: 760; letter-spacing: -.025em; }
.checkout-page .product > p { max-width: 300px; margin: 0; color: #f0e5ef; font-size: 14px; line-height: 1.35; }
.checkout-page .product > strong { flex: 0 0 auto; color: #fff7fd; font-size: 21px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout-page .product > strong span { display: block; margin-top: 1px; color: #c6b8ca; font-size: 12px; font-weight: 600; text-align: right; }

.step { border-top: 1px solid var(--line); transition: opacity .18s ease; }
.step.locked { opacity: .34; }
.step-heading { display: grid; grid-template-columns: 27px 1fr auto; gap: 12px; align-items: center; padding: 21px 30px 16px; }
.step-number { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #55594a; border-radius: 7px; color: #b5b7aa; background: #1b1e18; font-size: 11px; font-weight: 800; }
.step.complete .step-number { border-color: var(--orange); background: var(--orange); color: #171810; }
.step-heading h2 { margin: 0; color: #f3f1e7; font-size: 15px; letter-spacing: -.01em; }
.step-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.step-check { display: none; color: var(--green); font-weight: 800; }
.step.complete .step-check { display: block; }
.step-body { margin: 0; padding: 0 30px 24px 69px; border: 0; min-width: 0; }
.checkout-page .step-body { padding: 13px 24px; }
.checkout-page #payment-step .step-body { padding-top: 10px; padding-bottom: 15px; }
.checkout-page .button { min-height: 46px; font-size: 15px; }

.button { width: 100%; min-height: 45px; border: 1px solid transparent; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; cursor: pointer; text-decoration: none; font-weight: 750; font-size: 13px; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.button:disabled, .small-button:disabled { cursor: wait; opacity: .55; }
.button:active:not(:disabled) { transform: translateY(1px); }
.primary { background: var(--orange); color: #171810; border-color: #f8b640; box-shadow: 0 7px 22px rgba(239, 161, 30, .12); }
.primary:hover:not(:disabled) { background: #ffad27; border-color: #ffc057; }
.checkout-page .primary { background: #ff66bd; color: #220c1d; border-color: #ff8dce; box-shadow: 0 7px 22px rgba(255, 102, 189, .18); }
.checkout-page .primary:hover:not(:disabled) { background: #ff85cc; border-color: #ffb2dd; }
.checkout-page .steam-button { background: #322438; color: #fff7fd; border-color: #68516a; }
.checkout-page .steam-button:hover { background: #403047; border-color: #96739a; }
.checkout-page .steam-button svg { fill: #ff93d2; }
.steam-button { background: linear-gradient(#272a22, #20231c); color: #f4f2e8; border-color: #414538; }
.steam-button:hover { background: linear-gradient(#2e3228, #25281f); border-color: #555a48; }
.steam-button svg { width: 20px; height: 20px; margin-right: 9px; fill: var(--orange); }

.account-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid #30342a; border-left: 2px solid #686d55; border-radius: 8px; background: #1a1d17; }
.checkout-page .account-row { border-color: #513e55; border-left-color: #ff8dce; background: #251b2b; }
.checkout-page .account-row { min-height: 52px; padding: 6px 9px; }
.checkout-page .profile-identity strong { font-size: 14px; }
.checkout-page .profile-identity span { font-size: 11px; }
.checkout-page #account-profile { display: none; }
.checkout-page .link-button { font-size: 12px; }
.account-row.no-avatar { grid-template-columns: minmax(0, 1fr) auto; }
.profile-avatar { width: 46px; height: 46px; border: 1px solid #45493b; border-radius: 7px; object-fit: cover; background: var(--soft); }
.profile-identity { min-width: 0; }
.profile-identity strong, .profile-identity span { display: block; }
.profile-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.profile-identity span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.profile-identity a { display: inline-block; margin-top: 4px; color: #c5a36a; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.profile-identity a:hover { color: var(--orange); }
.account-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.link-button { padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.link-button:hover { color: var(--text); }

.players { display: grid; gap: 8px; margin: 12px 0 15px; }
.checkout-page .players:empty { display: none; }
.player { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid #30342a; background: var(--soft); border-radius: 8px; }
.player.no-avatar { grid-template-columns: minmax(0, 1fr) auto; }
.player .profile-avatar { width: 42px; height: 42px; border-radius: 8px; }
.player .profile-identity strong { font-size: 12px; }
.player-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.active-tag { color: var(--green); font-size: 10px; font-weight: 750; }
.remove-player { width: auto; height: auto; padding: 0; border: 0; background: none; color: #8e9087; cursor: pointer; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.remove-player:hover { color: var(--danger); }

.checkout-page .gift-controls { margin-top: 7px; }
.gift-toggle { width: 100%; padding: 9px 2px 3px; border: 0; background: none; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; text-align: left; font-size: 11px; }
.checkout-page .gift-toggle { padding: 8px 2px 2px; color: #ffb8e1; font-size: 14px; font-weight: 700; }
.gift-toggle:hover { color: #d8d7cc; }
.gift-toggle-mark { color: var(--orange); font-size: 16px; line-height: 1; }
.gift-panel { margin-top: 10px; padding-top: 13px; border-top: 1px solid var(--line); }
.checkout-page .gift-panel { max-height: clamp(56px, calc(100dvh - 430px), 210px); margin-top: 8px; padding-top: 8px; overflow-y: auto; }
.checkout-page .gift-panel > p { font-size: 12px; }
.checkout-page .add-player label { font-size: 12px; }
.checkout-page .add-player input { font-size: 13px; }
.checkout-page .add-player .small-button { font-size: 13px; }
.gift-panel > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.add-player label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11px; }
.input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.checkout-page input { border-color: #59445e; background: #160f1b; }
.checkout-page .small-button { border-color: #6b5070; background: #38283e; color: #fff7fd; }
.checkout-page .small-button:hover:not(:disabled) { background: #4b3552; }
input { min-width: 0; height: 43px; padding: 0 11px; border: 1px solid #3b3f33; border-radius: 7px 0 0 7px; outline: none; color: var(--text); background: #10120e; font-size: 12px; caret-color: #d3d3c7; }
input::placeholder { color: #73766d; }
input:focus { border-color: #797d6d; }
input:focus-visible { outline: none; }
.small-button { min-width: 58px; border: 1px solid #464a3c; border-left: 0; border-radius: 0 7px 7px 0; background: #30342a; color: #f0eee4; cursor: pointer; font-size: 12px; font-weight: 750; }
.small-button:hover:not(:disabled) { background: #3a3f32; }
.field-message { min-height: 16px; margin: 6px 0 10px; color: var(--danger); font-size: 10px; }
.checkout-page .field-message:empty { display: none; }

.summary { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
.checkout-page .summary { padding: 0 0 9px; border: 0; font-size: 14px; }
.checkout-page .summary strong { font-size: 16px; }
.summary strong { color: var(--orange); }
.summary-note { min-height: 16px; margin: 8px 0; color: var(--muted); font-size: 10px; }
.checkout-page .summary-note { min-height: 0; margin: 0 0 7px; font-size: 12px; }
.checkout-page .summary-note:empty { display: none; }
.secure { margin: 9px 0 0; color: #7c7f75; text-align: center; font-size: 10px; }
.checkout-page .secure { color: #bcaec1; font-size: 11px; }

footer { display: flex; align-items: center; gap: 15px; padding: 16px 30px; border-top: 1px solid var(--line); background: rgba(8, 9, 7, .18); }
.checkout-page footer { flex: 0 0 auto; gap: 14px; padding: 11px 24px; background: #170f1c; }
.checkout-page footer a { font-size: 12px; }
footer a { color: var(--muted); font-size: 10px; }
footer a:hover { color: var(--text); }
footer .footer-primary { margin-right: auto; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(440px, calc(100% - 32px)); padding: 12px 15px; border: 1px solid #4b503f; border-radius: 8px; background: #20231c; color: var(--text); text-align: center; font-size: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.4); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.callback-card { width: min(330px, 100%); margin: auto; padding: 35px; border: 1px solid #393c31; border-radius: 14px; background: var(--card); box-shadow: 0 26px 70px rgba(0,0,0,.42); text-align: center; }
.callback-card h1 { margin-top: 18px; font-size: 18px; }
.callback-card p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.callback-spinner { position: relative; width: 44px; height: 44px; margin: auto; }
.callback-spinner::before { content: ""; position: absolute; inset: 0; border: 2px solid #363a2f; border-top-color: var(--orange); border-radius: 50%; animation: turn .75s linear infinite; }
.callback-spinner::after { content: ""; position: absolute; width: 7px; height: 7px; left: 18.5px; top: 18.5px; border-radius: 50%; background: var(--orange); animation: pulse 1s ease-in-out infinite; }
.callback-card.done .callback-spinner::before { border: 0; background: #253023; animation: none; }
.callback-card.done .callback-spinner::after { content: "✓"; width: 44px; height: 44px; left: 0; top: 0; display: grid; place-items: center; background: none; color: var(--green); font-size: 24px; font-weight: 800; animation: none; }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(.55); opacity: .5; } }

.legal { width: min(680px, calc(100% - 40px)); margin: 40px auto; padding: 35px; border: 1px solid #393c31; border-radius: 14px; background: var(--card); box-shadow: 0 26px 70px rgba(0,0,0,.36); }
.legal h1 { font-size: 24px; }
.legal p { color: #b2b3aa; font-size: 13px; line-height: 1.7; }
.legal a { color: var(--text); }

.portal-page { display: block; padding: 38px 18px 60px; }
.portal-shell { width: min(680px, 100%); margin: 0 auto; }
.portal-shell.wide { width: min(760px, 100%); }
.portal-shell.admin-shell { width: min(1080px, 100%); }
.portal-brand { display: inline-block; width: min(250px, 72vw); margin: 0 0 22px; }
.portal-brand img { display: block; width: 100%; height: auto; }
.portal-brand strong { display: block; color: #f0eee4; font-size: 23px; font-weight: 800; letter-spacing: -.035em; }
.portal-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.portal-header .quiet-link { margin-bottom: 22px; }
.portal-card { border: 1px solid #393c31; border-radius: 12px; background: var(--card); box-shadow: 0 22px 60px rgba(0, 0, 0, .32); }
.centered-state { padding: 48px 36px; text-align: center; }
.centered-state h1 { margin-top: 17px; font-size: 21px; }
.centered-state h2 { margin: 0; font-size: 17px; }
.centered-state p { max-width: 430px; margin: 8px auto 22px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.centered-state .button { max-width: 310px; margin-inline: auto; }
.quiet-link { color: var(--muted); font-size: 11px; text-underline-offset: 3px; }
.quiet-link:hover { color: var(--text); }
.centered-state > .quiet-link { display: block; margin-top: 17px; }
.loading-ring { display: block; width: 38px; height: 38px; margin: 0 auto; border: 2px solid #363a2f; border-top-color: var(--orange); border-radius: 50%; animation: turn .75s linear infinite; }
.state-mark { width: 38px; height: 38px; margin: 0 auto; display: grid; place-items: center; border: 1px solid #4b503f; border-radius: 50%; color: var(--orange); background: #20231c; font-size: 17px; font-weight: 800; }
.state-mark.success { border-color: #40503a; color: var(--green); background: #20291e; }
.state-mark.error { border-color: #5d3d37; color: var(--danger); background: #291c19; }
.secondary { border-color: #43473a; background: #24271f; color: var(--text); }
.secondary:hover:not(:disabled) { border-color: #5a5f4d; background: #2b2f25; }
.button.fit { width: auto; min-width: 128px; }
.eyebrow { margin: 0 0 5px; color: #999c91; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.success-card { overflow: hidden; }
.success-heading { display: flex; align-items: center; gap: 16px; padding: 27px 30px; border-bottom: 1px solid var(--line); }
.success-heading .state-mark { flex: 0 0 auto; margin: 0; }
.success-heading h1 { font-size: 22px; }
.success-heading p:last-child { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.reconnect-callout { margin: 25px 30px 0; padding: 20px; border: 1px solid #434a39; border-left: 3px solid var(--green); border-radius: 8px; background: #1b2018; }
.reconnect-callout h2 { margin: 2px 0 6px; font-size: 19px; }
.reconnect-callout p { margin: 0; color: #b9bcb0; font-size: 12px; line-height: 1.6; }
.reconnect-callout strong { color: var(--text); }
.portal-section { padding: 25px 30px 8px; }
.portal-section > h2 { margin: 0 0 12px; font-size: 13px; }
.identity-list { display: grid; gap: 8px; }
.identity-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 10px; border: 1px solid #30342a; border-radius: 8px; background: #1a1d17; }
.identity-row.no-avatar { grid-template-columns: minmax(0, 1fr) auto; }
.identity-row.compact { padding: 0; border: 0; background: transparent; }
.identity-row.compact .profile-avatar { width: 38px; height: 38px; }
.status-chip { display: inline-flex; align-items: center; width: max-content; padding: 4px 7px; border: 1px solid #45483e; border-radius: 999px; color: #a9aaa3; background: #20221d; font-size: 9px; font-weight: 750; text-transform: capitalize; white-space: nowrap; }
.status-chip.active { border-color: #42533d; color: #a9c79f; background: #202a1e; }
.receipt-list { margin: 22px 30px 0; border-top: 1px solid var(--line); }
.receipt-list > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.receipt-list dt { color: var(--muted); }
.receipt-list dd { margin: 0; min-width: 0; color: var(--text); text-align: right; }
.receipt-list code { display: inline-block; max-width: calc(100% - 42px); overflow: hidden; color: #d5d3c9; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
.copy-button { margin-left: 8px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.copy-button:hover { color: var(--text); }
.portal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 25px 30px 30px; }

.account-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; }
.account-card > div { min-width: 0; }
.account-card .identity-row { min-width: min(390px, 62vw); }
.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin: 34px 0 16px; }
.page-title-row h1 { font-size: 25px; }
.page-title-row p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.subscription-list { display: grid; gap: 13px; }
.subscription-card { padding: 23px; }
.subscription-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.subscription-heading h2 { margin: 0; font-size: 17px; }
.subscription-detail { margin: 8px 0 18px; color: var(--muted); font-size: 11px; }
.subscription-players { margin-top: 8px; }
.subscription-controls { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.text-action { padding: 0; border: 0; background: none; color: #b7b9ae; cursor: pointer; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.text-action:hover { color: var(--text); }
.text-action.danger:hover, .text-action.danger.confirming { color: var(--danger); }
.text-action:disabled { cursor: wait; opacity: .55; }

.admin-title { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 10px 0 20px; }
.admin-title h1 { font-size: 27px; }
.admin-account { display: flex; align-items: center; gap: 13px; }
.admin-account .identity-row { max-width: 280px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.stat-grid article { min-width: 0; padding: 17px 18px; border: 1px solid #34382d; border-radius: 9px; background: #151712; }
.stat-grid span { display: block; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.stat-grid strong { display: block; margin-top: 8px; overflow: hidden; color: #f4f1e7; font-size: 24px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.admin-columns { display: grid; grid-template-columns: 1.16fr .84fr; gap: 12px; }
.admin-panel { padding: 22px; box-shadow: 0 16px 45px rgba(0,0,0,.24); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-heading h2 { margin: 0; font-size: 16px; }
.panel-count { color: var(--muted); font-size: 10px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(142,177,129,.1); }
.live-dot.offline { background: var(--danger); box-shadow: 0 0 0 4px rgba(221,129,113,.1); }
.fleet-server-list { display: grid; gap: 8px; margin-top: 17px; }
.fleet-server { padding: 13px 14px; border: 1px solid #34382d; border-radius: 8px; background: #10120e; }
.fleet-server.offline { border-color: rgba(221,129,113,.38); }
.fleet-server header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.fleet-server header strong, .fleet-server header span { display: block; }
.fleet-server header strong { font-size: 11px; }
.fleet-server header span { margin-top: 2px; color: var(--green); font-size: 9px; }
.fleet-server.offline header span { color: var(--danger); }
.fleet-server header b { color: #f4f1e7; font-size: 12px; font-variant-numeric: tabular-nums; }
.fleet-server dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 11px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.fleet-server dl div { min-width: 0; }
.fleet-server dt { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.fleet-server dd { margin: 3px 0 0; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.fleet-server-name { margin: 10px 0 0; overflow: hidden; color: #85887e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.data-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 25px; margin: 17px 0 0; }
.data-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 10px; }
.data-list > div.full { grid-column: 1 / -1; }
.data-list dt { color: var(--muted); }
.data-list dd { margin: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.sync-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.sync-row span, .sync-row strong { display: block; }
.sync-row span { color: var(--muted); font-size: 9px; }
.sync-row strong { margin-top: 3px; font-size: 12px; font-variant-numeric: tabular-nums; }
.panel-note { margin: 10px 0 0; color: #85887e; font-size: 9px; }
.admin-form { display: grid; margin-top: 18px; }
.admin-form label { margin: 0 0 6px; color: var(--muted); font-size: 10px; }
.admin-form input, .admin-form select { width: 100%; height: 42px; margin-bottom: 13px; padding: 0 11px; border: 1px solid #3b3f33; border-radius: 7px; outline: none; color: var(--text); background: #10120e; font-size: 11px; }
.admin-form input:focus, .admin-form select:focus { border-color: #797d6d; }
.admin-form select { color-scheme: dark; }
.admin-form .field-message { margin-bottom: 0; }
.table-panel { margin-top: 12px; }
.admin-table { margin-top: 15px; }
.admin-table-row { display: grid; align-items: center; gap: 14px; min-height: 54px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 10px; }
.grant-row { grid-template-columns: minmax(190px, 1.5fr) 80px minmax(130px, 1fr) 90px; }
.subscription-row { grid-template-columns: minmax(190px, 1.5fr) 90px 90px minmax(105px, 1fr); }
.admin-profile-link { min-width: 0; overflow: hidden; color: #dddacf; font-size: 11px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.admin-profile-link:hover { color: var(--orange); }
.admin-profile-link small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.muted-cell { color: var(--muted); }
.align-right { text-align: right; }
.empty-row { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.audit-list { margin-top: 15px; }
.audit-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 50px; padding: 8px 0; border-top: 1px solid var(--line); }
.audit-row strong, .audit-row span { display: block; }
.audit-row strong { font-size: 10px; font-weight: 700; }
.audit-row span, .audit-row time { margin-top: 3px; color: var(--muted); font-size: 9px; }
.audit-row time { flex: 0 0 auto; }

@media (max-width: 520px) {
  body { padding: 12px; }
  .checkout { border-radius: 11px; }
  .checkout-page { padding: 6px 8px; }
  .checkout-page .checkout { max-height: calc(100dvh - 12px); }
  .checkout-page .checkout-hero { min-height: 0; padding: 9px 17px; background-position: center; }
  .checkout-page .checkout-hero::before { background: linear-gradient(90deg, rgba(5, 12, 24, .86) 0%, rgba(5, 12, 24, .42) 70%, transparent 100%); }
  .checkout-page .checkout-hero-copy { max-width: 78%; }
  .checkout-page .checkout-hero h1 { font-size: clamp(21px, 6vw, 27px); }
  .checkout-page .checkout-hero p { margin-top: 3px; font-size: 16px; }
  .checkout-page .product { gap: 10px; padding: 13px 17px; }
  .checkout-page .product > p { font-size: 14px; }
  .checkout-page .product > strong { font-size: 19px; }
  .checkout-page .step-body { padding-inline: 17px; }
  .checkout-page footer { gap: 10px; padding: 10px 17px; }
  .checkout-page footer a { font-size: 11px; }
  h1 { font-size: 22px; }
  .step-heading { padding: 18px 20px 14px; }
  .step-body { padding: 0 20px 21px 59px; }
  footer { padding-inline: 20px; }
  .portal-page { padding: 22px 12px 40px; }
  .portal-header { align-items: flex-start; }
  .centered-state { padding: 38px 22px; }
  .success-heading, .portal-section { padding-inline: 20px; }
  .reconnect-callout, .receipt-list { margin-inline: 20px; }
  .portal-actions { grid-template-columns: 1fr; padding-inline: 20px; }
  .receipt-list > div { grid-template-columns: 90px minmax(0, 1fr); }
  .account-card, .page-title-row, .admin-title { align-items: flex-start; flex-direction: column; }
  .account-card .identity-row { min-width: 0; width: 100%; }
  .page-title-row .button { width: 100%; }
  .subscription-card { padding: 19px; }
  .identity-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 9px; }
  .identity-row .profile-avatar { width: 40px; height: 40px; }
  .admin-account { width: 100%; justify-content: space-between; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .admin-columns { grid-template-columns: 1fr; }
  .data-list { grid-template-columns: 1fr; }
  .data-list > div.full { grid-column: auto; }
  .grant-row, .subscription-row { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 13px; padding: 13px 0; }
  .grant-row > :nth-child(3), .subscription-row > :nth-child(3) { grid-column: 1; }
  .grant-row > :nth-child(4), .subscription-row > :nth-child(4) { grid-column: 2; }
  .audit-row { align-items: flex-start; flex-direction: column; gap: 2px; }
}

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

/* WARDOGS control */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ops-page { display: block; min-width: 320px; padding: 0; background: #090b09; color: #e8e7df; }
.ops-page button, .ops-page input, .ops-page select { font: inherit; }
.ops-gate { width: min(430px, calc(100% - 32px)); min-height: 100svh; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ops-gate > img { width: min(260px, 80%); height: auto; margin-bottom: 38px; }
.ops-gate h1 { margin-top: 18px; font-size: 22px; }
.ops-gate p { margin: 8px 0 24px; color: #858a80; font-size: 12px; }
.ops-gate .button { max-width: 290px; }
.ops-layout { min-height: 100svh; display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.ops-rail { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding: 28px 20px 22px; border-right: 1px solid #292d27; background: #0d0f0c; }
.ops-brand { display: block; color: #898d84; text-decoration: none; }
.ops-brand img { display: block; width: 158px; height: auto; }
.ops-brand strong, .ops-text-brand { display: block; color: #e8e7df; font-size: 17px; font-weight: 800; letter-spacing: -.035em; }
.ops-brand span { display: block; margin: 10px 0 0 2px; font-size: 8px; font-weight: 800; letter-spacing: .2em; }
.ops-nav { display: grid; gap: 3px; margin-top: 58px; }
.ops-nav button { height: 43px; display: flex; align-items: center; gap: 13px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #898d84; cursor: pointer; font-size: 11px; font-weight: 650; text-align: left; }
.ops-nav button span { color: #4f544d; font-size: 8px; font-variant-numeric: tabular-nums; }
.ops-nav button:hover { color: #d7d7d0; background: #141713; }
.ops-nav button.active { border-color: #343a30; color: #f0efe7; background: #1a1e18; }
.ops-nav button.active span { color: #efa11e; }
.ops-rail-status { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 13px 11px; border-top: 1px solid #292d27; }
.ops-rail-status strong, .ops-rail-status small { display: block; }
.ops-rail-status strong { color: #d9dad3; font-size: 10px; }
.ops-rail-status small { max-width: 155px; margin-top: 2px; overflow: hidden; color: #70756c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ops-pulse { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #8eb181; box-shadow: 0 0 0 3px rgba(142,177,129,.08); }
.ops-pulse.sampling { background: #d5a44e; animation: pulse 1s infinite; }
.ops-pulse.error { background: #c86f62; box-shadow: 0 0 0 3px rgba(200,111,98,.08); }
.ops-main { min-width: 0; }
.ops-topbar { position: sticky; z-index: 10; top: 0; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 0 34px; border-bottom: 1px solid #292d27; background: rgba(9,11,9,.96); }
.ops-search-wrap { position: relative; width: min(650px, 62%); }
.ops-search-wrap > span { position: absolute; z-index: 1; left: 13px; top: 10px; color: #747970; font-size: 17px; }
.ops-search-wrap > input { width: 100%; height: 39px; padding: 0 46px 0 39px; border: 1px solid #30352e; border-radius: 7px; background: #111410; color: #e9e8df; font-size: 11px; }
.ops-search-wrap > input:focus { border-color: #555d50; }
.ops-search-wrap kbd { position: absolute; right: 11px; top: 10px; min-width: 20px; padding: 3px 6px; border: 1px solid #343932; border-radius: 4px; color: #777c73; background: #171a16; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.ops-search-results { position: absolute; z-index: 30; top: 47px; left: 0; right: 0; max-height: min(520px, 70vh); overflow: auto; padding: 6px; border: 1px solid #3a4036; border-radius: 8px; background: #131612; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.ops-search-result { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 12px; border: 0; border-radius: 5px; color: #d8d9d2; background: transparent; cursor: pointer; text-align: left; }
.ops-search-result:hover { background: #20251e; }
.ops-search-result span, .ops-search-result small, .ops-search-result strong { display: block; }
.ops-search-result small { color: #d69a35; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.ops-search-result strong { margin-top: 3px; font-size: 11px; }
.ops-search-result span span { margin-top: 2px; color: #777d73; font-size: 9px; }
.ops-search-result > b { color: #747970; font-size: 12px; }
.ops-search-empty { margin: 0; padding: 18px; color: #81867d; font-size: 10px; text-align: center; }
.ops-admin-account { display: flex; align-items: center; gap: 10px; }
.ops-admin-account .identity-row { min-width: 180px; padding: 0; border: 0; background: none; }
.ops-admin-account .profile-avatar { width: 34px; height: 34px; }
.ops-admin-account .profile-identity strong { font-size: 10px; }
.ops-admin-account .profile-identity span, .ops-admin-account .profile-identity a { font-size: 8px; }
.ops-icon-button { width: 34px; height: 34px; border: 1px solid #343932; border-radius: 6px; color: #8d9288; background: #151814; cursor: pointer; }
.ops-icon-button:hover { color: #e5e5dd; border-color: #4a5146; }
.ops-canvas { width: min(1440px, 100%); margin: 0 auto; padding: 34px 36px 80px; }
.ops-view { animation: ops-in .16s ease-out; }
@keyframes ops-in { from { opacity: .4; transform: translateY(3px); } }
.ops-page-heading { min-height: 58px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.ops-page-heading h1 { font-size: 26px; }
.ops-heading-meta { display: flex; align-items: center; gap: 14px; color: #747970; font-size: 9px; }
.ops-text-button { padding: 0; border: 0; color: #b8bbb2; background: none; cursor: pointer; font-size: 9px; text-decoration: underline; text-underline-offset: 4px; }
.ops-text-button:hover { color: #efa11e; }
.ops-alert { margin: -6px 0 16px; padding: 12px 14px; border: 1px solid #603d36; border-radius: 7px; color: #e2aea5; background: #211714; font-size: 10px; }
.ops-metrics { display: grid; grid-template-columns: repeat(6, minmax(125px, 1fr)); gap: 8px; margin-bottom: 34px; }
.ops-metrics article { min-width: 0; padding: 15px 16px; border: 1px solid #30352e; border-radius: 7px; background: #111410; }
.ops-metrics span, .ops-metrics small { display: block; overflow: hidden; color: #73786f; font-size: 8px; font-weight: 700; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ops-metrics strong { display: block; margin: 8px 0 5px; overflow: hidden; color: #f0efe8; font-size: 23px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; text-overflow: ellipsis; }
.ops-metrics small { color: #555b53; font-weight: 500; text-transform: none; }
.ops-section-heading, .ops-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ops-section-heading { margin: 0 0 13px; }
.ops-section-heading.compact { margin-bottom: 0; }
.ops-section-heading h2, .ops-panel-heading h2 { margin: 0; color: #e9e8e0; font-size: 15px; }
.ops-section-heading > span, .ops-section-heading > input, .ops-panel-heading > span { color: #747970; font-size: 9px; }
.ops-section-heading > input { width: min(280px, 45%); height: 34px; padding: 0 10px; border: 1px solid #343932; border-radius: 6px; background: #0e110d; }
.ops-server-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 26px; }
.ops-server-card { min-width: 0; padding: 15px; border: 1px solid #30352e; border-radius: 7px; color: inherit; background: #111410; cursor: pointer; text-align: left; }
.ops-server-card:hover { border-color: #495144; background: #151914; }
.ops-server-card.offline { border-color: #573b35; }
.ops-server-card.drift { border-color: #5c4d2d; }
.ops-server-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.ops-server-card-top > b { color: #d3d4cc; font-size: 11px; }
.ops-health-state { color: #93b287; font-size: 7px; font-weight: 850; letter-spacing: .13em; }
.ops-server-card.offline .ops-health-state { color: #d07b6e; }
.ops-server-card.drift .ops-health-state { color: #d6a24a; }
.ops-server-card > strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.ops-scenario { display: block; min-height: 13px; margin-top: 4px; overflow: hidden; color: #747970; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ops-server-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #272b25; }
.ops-server-card-stats small, .ops-server-card-stats b { display: block; }
.ops-server-card-stats small { color: #5f655d; font-size: 7px; }
.ops-server-card-stats b { margin-top: 3px; color: #c9cac3; font-size: 10px; font-variant-numeric: tabular-nums; }
.ops-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ops-panel { min-width: 0; padding: 20px; border: 1px solid #30352e; border-radius: 8px; background: #111410; }
.ops-safe-label, .ops-warning-label { padding: 4px 7px; border: 1px solid #3b4938; border-radius: 999px; color: #94ad8c !important; background: #192018; font-size: 7px !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ops-warning-label { border-color: #5b3d36; color: #cf8478 !important; background: #211715; }
.ops-inline-form, .ops-stack-form { margin-top: 18px; }
.ops-inline-form > label, .ops-stack-form > label, .ops-dialog-field label, .ops-dialog > form > label { display: block; margin: 0 0 6px; color: #7f847a; font-size: 8px; font-weight: 650; }
.ops-inline-form > select, .ops-stack-form > select, .ops-stack-form > input, .ops-dialog input, .ops-dialog select { width: 100%; height: 39px; margin: 0 0 13px; padding: 0 10px; border: 1px solid #343a32; border-radius: 6px; outline: none; color: #e3e3dc; background: #0b0e0b; font-size: 10px; }
.ops-inline-form > select:focus, .ops-stack-form > select:focus, .ops-stack-form > input:focus, .ops-dialog input:focus, .ops-dialog select:focus { border-color: #5b6355; }
.ops-command-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.ops-command-row input { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #343a32; border-radius: 6px 0 0 6px; color: #e7e6df; background: #0b0e0b; font-size: 10px; }
.ops-command-row button { min-width: 72px; border: 1px solid #4b513f; border-left: 0; border-radius: 0 6px 6px 0; color: #161710; background: #d79a32; cursor: pointer; font-size: 9px; font-weight: 800; }
.ops-command-row button:hover { background: #e8a53a; }
.ops-form-status { min-height: 14px; margin: 8px 0 0; color: #777d73; font-size: 8px; line-height: 1.5; }
.ops-definition-list { margin: 17px 0 16px; }
.ops-definition-list > div { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-top: 1px solid #272b25; font-size: 9px; }
.ops-definition-list dt { color: #777d73; }
.ops-definition-list dd { margin: 0; color: #c8c9c2; text-align: right; }
.ops-secondary-button, .ops-primary-button, .ops-danger-button { min-height: 38px; padding: 0 14px; border: 1px solid #3e443a; border-radius: 6px; color: #d9dad3; background: #1d211b; cursor: pointer; font-size: 9px; font-weight: 750; }
.ops-secondary-button:hover { border-color: #596151; background: #252a22; }
.ops-primary-button { border-color: #dfa03a; color: #161710; background: #dfa03a; }
.ops-danger-button { border-color: #7a4a42; color: #f0c1b9; background: #38221e; }
.ops-secondary-button:disabled, .ops-primary-button:disabled, .ops-danger-button:disabled { cursor: wait; opacity: .55; }
.ops-stack-form > button { width: 100%; }
.ops-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ops-form-actions button { width: 100%; }
.ops-count { color: #777d73; font-size: 9px; }
.ops-player-heading-meta { display: flex; align-items: center; gap: 15px; color: #6f756c; font-size: 8px; }
.ops-live-count { display: inline-flex; align-items: center; gap: 7px; color: #bfc3b9; font-variant-numeric: tabular-nums; }
.ops-live-count i { width: 6px; height: 6px; border-radius: 50%; background: #8eb181; box-shadow: 0 0 0 3px rgba(142,177,129,.08); }
.ops-live-count b { font-size: 9px; font-weight: 750; }
.ops-player-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.ops-player-metrics article { min-width: 0; padding: 15px 16px; border: 1px solid #30352e; border-radius: 7px; background: #111410; }
.ops-player-metrics span, .ops-player-metrics small { display: block; overflow: hidden; color: #73786f; font-size: 7px; font-weight: 750; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ops-player-metrics strong { display: block; margin: 8px 0 5px; overflow: hidden; color: #f0efe8; font-size: 21px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.ops-player-metrics small { color: #5e645b; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ops-player-intelligence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.ops-intel-panel { min-height: 258px; padding: 17px 18px; }
.ops-intel-panel .ops-panel-heading > span { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-ranked-list, .ops-breakdown-list { margin-top: 12px; }
.ops-ranked-row, .ops-breakdown-row { width: 100%; min-width: 0; border: 0; border-top: 1px solid #272b25; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.ops-ranked-row { min-height: 38px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 0; }
.ops-ranked-row:hover, .ops-breakdown-row:not(:disabled):hover { background: #151914; }
.ops-ranked-row > i { color: #555b53; font-size: 7px; font-style: normal; font-variant-numeric: tabular-nums; }
.ops-ranked-row > span { min-width: 0; }
.ops-ranked-row strong, .ops-ranked-row small, .ops-ranked-value b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-ranked-row strong { color: #dfe0d8; font-size: 9px; font-weight: 680; }
.ops-ranked-row small { margin-top: 2px; color: #62685f; font-size: 7px; font-variant-numeric: tabular-nums; }
.ops-ranked-value { padding-left: 10px; text-align: right; }
.ops-ranked-value b { color: #afc4a7; font-size: 9px; font-variant-numeric: tabular-nums; }
.ops-breakdown-row { display: block; padding: 8px 0 7px; }
.ops-breakdown-row:disabled { cursor: default; opacity: 1; }
.ops-breakdown-heading, .ops-breakdown-detail { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ops-breakdown-heading strong { overflow: hidden; color: #d7d9d0; font-size: 9px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.ops-breakdown-heading b { flex: 0 0 auto; color: #c5c8bd; font-size: 8px; font-variant-numeric: tabular-nums; }
.ops-breakdown-track { width: 100%; height: 2px; display: block; margin: 6px 0; overflow: hidden; border: 0; appearance: none; background: #252a23; }
.ops-breakdown-track::-webkit-progress-bar { background: #252a23; }
.ops-breakdown-track::-webkit-progress-value { background: #8b927f; }
.ops-breakdown-track::-moz-progress-bar { background: #8b927f; }
.ops-breakdown-detail { color: #62685f; font-size: 7px; font-variant-numeric: tabular-nums; }
.ops-intel-empty { margin: 0; padding: 28px 4px; color: #646a61; font-size: 8px; text-align: center; }
.ops-player-table-panel { min-width: 0; margin-top: 0 !important; padding: 0; overflow: hidden; }
.ops-player-toolbar { display: grid; grid-template-columns: minmax(230px, 1fr) 145px 145px 155px; gap: 8px; padding: 18px 18px 14px; }
.ops-player-toolbar label { min-width: 0; }
.ops-player-toolbar label > span { display: block; margin: 0 0 6px 1px; color: #70766d; font-size: 7px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.ops-player-toolbar input, .ops-player-toolbar select, .server-heading select { width: 100%; height: 38px; padding: 0 11px; border: 1px solid #343a32; border-radius: 6px; outline: none; color: #deded7; background: #0b0e0b; font-size: 9px; }
.ops-player-toolbar input:focus, .ops-player-toolbar select:focus { border-color: #626b5c; box-shadow: 0 0 0 2px rgba(98,107,92,.1); }
.ops-table-summary { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 18px; border-top: 1px solid #292e28; color: #6d736a; background: #0e110e; font-size: 8px; }
.ops-table-summary > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-table-summary button { padding: 0; border: 0; color: #aeb2a8; background: none; cursor: pointer; font-size: 8px; text-decoration: underline; text-underline-offset: 3px; }
.ops-table-summary button:disabled { color: #4f554d; cursor: default; text-decoration: none; }
.ops-player-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: #444b40 #111410; scrollbar-width: thin; }
.ops-player-table-wrap:focus-visible { outline: 1px solid #66705f; outline-offset: -1px; }
.ops-player-grid, .ops-data-table.players .ops-table-row { width: 100%; min-width: 1050px; display: grid; grid-template-columns: minmax(180px, 1.5fr) 58px 105px 70px 100px 68px 286px; align-items: center; gap: 14px; padding-inline: 18px; }
.ops-player-table-head { min-height: 35px; border-top: 1px solid #292e28; border-bottom: 1px solid #292e28; color: #62685f; background: #151814; font-size: 7px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ops-player-table-head > :last-child { text-align: right; }
.ops-data-table.players { margin-top: 0; }
.ops-data-table.players .ops-table-row { min-height: 58px; padding-block: 8px; border-top: 0; border-bottom: 1px solid #272b25; }
.ops-data-table.players .ops-table-row:hover { background: #141814; }
.ops-data-table.players + .ops-empty { min-width: 100%; margin: 0; padding: 28px 18px; border-top: 0; }
.server-heading select { min-width: 160px; }
.ops-table-panel { margin-top: 10px; }
.ops-data-table { margin-top: 12px; }
.ops-table-row { min-height: 57px; display: grid; align-items: center; gap: 13px; padding: 9px 0; border-top: 1px solid #272b25; color: #aeb1a8; font-size: 9px; }
.ops-data-table.accounts .ops-table-row { grid-template-columns: minmax(190px, 1.4fr) minmax(100px, 1fr) 75px 80px; }
.ops-data-table.grants .ops-table-row { grid-template-columns: minmax(190px, 1.4fr) 75px minmax(120px, 1fr) 75px; }
.ops-data-table.subscriptions .ops-table-row { grid-template-columns: minmax(180px, 1.3fr) 70px 60px minmax(130px, 1fr) 100px; }
.ops-player-identity a, .ops-player-identity small { display: block; }
.ops-player-identity a, .ops-compact-row a { overflow: hidden; color: #e0e0d8; font-size: 10px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.ops-player-identity a:hover, .ops-compact-row a:hover { color: #efa11e; }
.ops-player-identity small { margin-top: 3px; color: #666c63; font-size: 8px; font-variant-numeric: tabular-nums; }
.ops-server-cell { color: #d1a352; font-weight: 750; }
.ops-faction-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-cash-cell { color: #b7c9b0; font-weight: 720; }
.ops-review-value { color: #dfa06c; font-weight: 760; text-decoration: underline dotted #755849; text-underline-offset: 4px; }
.ops-ping-cell.high { color: #dc957e; }
.ops-numeric { font-variant-numeric: tabular-nums; }
.ops-mono { overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ops-row-actions { display: flex; justify-content: flex-end; gap: 5px; }
.ops-row-actions button { min-height: 27px; padding: 0 8px; border: 1px solid #343a32; border-radius: 4px; color: #aeb2aa; background: #171b16; cursor: pointer; font-size: 8px; }
.ops-row-actions button:hover { border-color: #535b4e; color: #ededE5; }
.ops-row-actions button.danger:hover { border-color: #69443d; color: #da9185; }
.ops-identity { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.ops-identity img { width: 34px; height: 34px; border: 1px solid #3a4037; border-radius: 5px; object-fit: cover; }
.ops-identity > span { min-width: 0; }
.ops-identity strong, .ops-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-identity strong { color: #ddded7; font-size: 10px; }
.ops-identity small { margin-top: 3px; color: #686e65; font-size: 8px; }
.ops-state-pill { width: max-content; padding: 3px 6px; border: 1px solid #41463e; border-radius: 999px; color: #8c9188; background: #191c18; font-size: 7px; font-weight: 800; letter-spacing: .06em; }
.ops-state-pill.active { border-color: #40513c; color: #a4bf9b; background: #1a2219; }
.ops-empty { margin: 12px 0 0; padding: 18px 0 2px; border-top: 1px solid #272b25; color: #6e746b; font-size: 9px; text-align: center; }
.ops-resolved-player { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 12px; border: 1px solid #343a32; border-radius: 7px; background: #0d100d; font-size: 9px; }
.ops-fleet-identity { margin-bottom: 10px; }
.ops-fleet-identity form { margin-top: 18px; }
.ops-branding-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 12px; }
.ops-branding-fields label { min-width: 0; }
.ops-branding-fields label > span { display: block; margin-bottom: 7px; color: #8d9288; font-size: 10px; font-weight: 700; }
.ops-branding-fields input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #3b4138; border-radius: 6px; outline: none; color: #e5e4dc; background: #0b0e0b; font-size: 12px; }
.ops-branding-fields input:focus { border-color: #67715f; }
.ops-branding-fields small { display: block; min-height: 17px; margin-top: 6px; color: #747a70; font-size: 10px; }
.ops-branding-fields small a { color: #c7aa74; }
.ops-branding-fields code { color: #c7aa74; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; }
.ops-branding-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 17px; padding-top: 14px; border-top: 1px solid #292e28; color: #777d73; font-size: 10px; }
.ops-branding-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.ops-branding-preview-row { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 39px; padding: 7px 9px; border: 1px solid #2f342d; border-radius: 5px; background: #0e110e; }
.ops-branding-preview-row > b { color: #d39c41; font-size: 10px; font-variant-numeric: tabular-nums; }
.ops-branding-preview-row > code { min-width: 0; overflow: hidden; color: #d2d4cc; font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.ops-branding-preview-row > span { color: #787e74; font-size: 8px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.ops-branding-preview-row.exact > span { color: #98b18f; }
.ops-branding-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; }
.ops-branding-footer p { margin: 0; color: #797f75; font-size: 10px; line-height: 1.5; }
.ops-branding-footer p.error { color: #dc9184; }
.ops-branding-footer button { flex: 0 0 auto; min-width: 175px; }
.ops-server-hero { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 34px; padding: 22px; border: 1px solid #343a32; border-radius: 8px; background: #111410; }
.ops-server-number { margin-bottom: 6px; color: #d49a38; font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.ops-server-hero h2 { margin: 0; font-size: 20px; }
.ops-server-hero p { margin: 5px 0 0; overflow: hidden; color: #747970; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ops-server-hero-stats { display: flex; gap: 25px; }
.ops-server-hero-stats span, .ops-server-hero-stats strong { display: block; }
.ops-server-hero-stats span { color: #656b62; font-size: 7px; text-transform: uppercase; }
.ops-server-hero-stats strong { margin-top: 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ops-code { max-width: 210px; padding: 9px 11px; border: 1px solid #3a4137; border-radius: 6px; color: #cfd0c9; background: #171a16; cursor: pointer; text-align: left; }
.ops-code span, .ops-code code { display: block; }
.ops-code span { color: #6e746b; font-size: 7px; text-transform: uppercase; }
.ops-code code { margin-top: 4px; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ops-code:hover { border-color: #596151; }
.ops-code:disabled { cursor: default; opacity: .55; }
.server-tools { grid-template-columns: 1.12fr .88fr; }
.danger-panel { border-color: #48332e; }
.ops-panel-copy { margin: 18px 0; color: #858a80; font-size: 10px; line-height: 1.65; }
.ops-danger-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ops-danger-actions button { min-height: 39px; border: 1px solid #593a34; border-radius: 6px; color: #cf8b80; background: #211714; cursor: pointer; font-size: 9px; font-weight: 750; }
.ops-danger-actions button:hover { border-color: #754a42; background: #2a1b17; }
.ops-capability-strip { margin-top: 20px; padding-top: 14px; border-top: 1px solid #302824; color: #666c63; font-size: 8px; line-height: 1.6; }
.ops-compact-list { margin-top: 10px; }
.ops-compact-row { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 8px 0; border-top: 1px solid #272b25; }
.ops-compact-row > div { min-width: 0; }
.ops-compact-row small { display: block; margin-top: 3px; overflow: hidden; color: #686e65; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ops-compact-row > button { padding: 0; border: 0; color: #be776c; background: none; cursor: pointer; font-size: 8px; text-decoration: underline; text-underline-offset: 3px; }
.ops-audit-stream { margin-top: 10px; }
.ops-audit-event { min-height: 48px; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 8px 0; border-top: 1px solid #272b25; }
.ops-audit-marker { width: 5px; height: 5px; border: 1px solid #7c8375; border-radius: 50%; }
.ops-audit-event strong, .ops-audit-event span { display: block; }
.ops-audit-event strong { color: #cfd0c9; font-size: 9px; }
.ops-audit-event div span, .ops-audit-event time { margin-top: 3px; color: #686e65; font-size: 8px; }
.ops-audit-event time { white-space: nowrap; }
.ops-empty-workspace { color: #777d73; font-size: 10px; text-align: center; }
.ops-dialog { width: min(480px, calc(100% - 28px)); padding: 0; border: 1px solid #464d41; border-radius: 9px; color: #e8e7df; background: #121511; box-shadow: 0 35px 90px rgba(0,0,0,.62); }
.ops-dialog::backdrop { background: rgba(4,5,4,.76); backdrop-filter: blur(2px); }
.ops-dialog form { padding: 22px; }
.ops-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.ops-dialog-heading h2 { margin: 0; font-size: 18px; }
.ops-dialog-heading > button { width: 28px; height: 28px; border: 1px solid #343a32; border-radius: 5px; color: #92978d; background: #191c18; cursor: pointer; font-size: 17px; }
.ops-dialog form > p:not(.ops-form-status) { margin: 14px 0 18px; color: #858a80; font-size: 10px; line-height: 1.6; }
.ops-dialog-field { margin-bottom: 10px; }
.ops-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 17px; }

@media (max-width: 1180px) {
  .ops-metrics { grid-template-columns: repeat(3, 1fr); }
  .ops-player-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ops-player-intelligence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-player-intelligence > :last-child { grid-column: 1 / -1; min-height: 0; }
  .ops-player-toolbar { grid-template-columns: minmax(200px, 1fr) repeat(3, 130px); }
}

@media (max-width: 900px) {
  .ops-layout { grid-template-columns: 1fr; }
  .ops-rail { position: sticky; z-index: 20; width: 100%; height: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid #292d27; }
  .ops-brand img { width: 130px; }
  .ops-brand span { display: none; }
  .ops-nav { display: flex; justify-content: center; gap: 2px; margin: 0; }
  .ops-nav button { width: 39px; height: 35px; justify-content: center; padding: 0; font-size: 0; }
  .ops-nav button span { font-size: 8px; }
  .ops-rail-status { margin: 0; padding: 0; border: 0; }
  .ops-rail-status div { display: none; }
  .ops-topbar { top: 60px; height: 67px; padding-inline: 20px; }
  .ops-search-wrap { width: min(540px, 72%); }
  .ops-admin-account .identity-row { display: none; }
  .ops-canvas { padding: 27px 22px 65px; }
  .ops-server-grid { grid-template-columns: repeat(2, 1fr); }
  .ops-data-table.subscriptions .ops-table-row { grid-template-columns: minmax(170px,1.2fr) 65px 55px minmax(115px,1fr); }
  .ops-data-table.subscriptions .ops-table-row > :nth-child(5) { display: none; }
  .ops-server-hero { grid-template-columns: 1fr auto; }
  .ops-server-hero-stats { display: none; }
}

@media (max-width: 650px) {
  .ops-rail { grid-template-columns: 1fr auto; }
  .ops-brand { display: none; }
  .ops-nav { justify-content: flex-start; }
  .ops-topbar { top: 60px; padding-inline: 12px; }
  .ops-search-wrap { width: calc(100% - 45px); }
  .ops-canvas { padding: 22px 12px 55px; }
  .ops-page-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .ops-page-heading h1 { font-size: 22px; }
  .ops-heading-meta { width: 100%; justify-content: space-between; }
  .ops-metrics { grid-template-columns: repeat(2, 1fr); }
  .ops-player-heading-meta { width: 100%; justify-content: space-between; }
  .ops-player-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-player-intelligence { grid-template-columns: 1fr; }
  .ops-player-intelligence > :last-child { grid-column: auto; }
  .ops-intel-panel { min-height: 0; }
  .ops-player-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 15px 14px 13px; }
  .ops-player-search { grid-column: 1 / -1; }
  .ops-player-toolbar label:last-child { grid-column: 1 / -1; }
  .ops-table-summary { padding-inline: 14px; }
  .ops-server-grid, .ops-split, .server-tools { grid-template-columns: 1fr; }
  .ops-branding-fields, .ops-branding-preview { grid-template-columns: 1fr; }
  .ops-branding-footer { align-items: stretch; flex-direction: column; gap: 10px; }
  .ops-branding-footer button { width: 100%; }
  .ops-server-hero { grid-template-columns: 1fr; gap: 15px; }
  .ops-code { width: 100%; max-width: none; }
  .ops-data-table.accounts .ops-table-row, .ops-data-table.grants .ops-table-row, .ops-data-table.subscriptions .ops-table-row { grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 13px 0; }
  .ops-data-table.accounts .ops-table-row > :nth-child(2), .ops-data-table.grants .ops-table-row > :nth-child(3), .ops-data-table.subscriptions .ops-table-row > :nth-child(3), .ops-data-table.subscriptions .ops-table-row > :nth-child(4), .ops-data-table.subscriptions .ops-table-row > :nth-child(5) { display: none; }
  .ops-data-table.grants .ops-row-actions { grid-column: 2; }
  .ops-section-heading.compact { align-items: flex-start; }
  .ops-section-heading > input { width: 48%; }
  .ops-audit-event { grid-template-columns: 8px minmax(0,1fr); }
  .ops-audit-event time { grid-column: 2; }
}

/* Operator dashboard hierarchy and analytics */
.ops-page { font-size: 14px; }
.ops-nav button { font-size: 12px; }
.ops-search-wrap > input { font-size: 13px; }
.ops-search-result small { font-size: 9px; }
.ops-search-result strong { font-size: 13px; }
.ops-search-result span span { font-size: 11px; }
.ops-heading-meta, .ops-text-button, .ops-section-heading > span, .ops-panel-heading > span, .ops-count { font-size: 11px; }
.ops-section-heading h2, .ops-panel-heading h2 { font-size: 17px; }
.ops-panel-copy { color: #858a80; font-size: 12px; line-height: 1.55; }

.ops-command-brief { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.7fr); margin-bottom: 12px; overflow: hidden; border: 1px solid #353a32; border-radius: 9px; background: #111410; }
.ops-revenue-card { padding: 25px 26px; border-right: 1px solid #353a32; background: #161812; }
.ops-revenue-card > span { color: #94998f; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.ops-revenue-card > strong { display: block; margin: 9px 0 20px; color: #f2f0e6; font-size: clamp(38px, 4.3vw, 58px); font-variant-numeric: tabular-nums; font-weight: 720; letter-spacing: -.055em; line-height: .95; }
.ops-revenue-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 0; }
.ops-revenue-card dl > div { min-width: 0; padding-top: 10px; border-top: 1px solid #33372f; }
.ops-revenue-card dt, .ops-revenue-card dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-revenue-card dt { color: #72786f; font-size: 10px; }
.ops-revenue-card dd { margin: 5px 0 0; color: #d8d8cf; font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 720; }
.ops-brief-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ops-brief-stats article { min-width: 0; padding: 23px 25px; border-bottom: 1px solid #2e332c; }
.ops-brief-stats article:nth-child(odd) { border-right: 1px solid #2e332c; }
.ops-brief-stats article:nth-last-child(-n+2) { border-bottom: 0; }
.ops-brief-stats span, .ops-brief-stats small { display: block; color: #7b8178; font-size: 10px; }
.ops-brief-stats span { font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
.ops-brief-stats strong { display: block; margin: 7px 0 4px; color: #e9e8df; font-size: 25px; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.ops-brief-stats small { color: #62685f; }

.ops-overview-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr); gap: 10px; margin-top: 10px; }
.ops-overview-grid.lower { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); }
.ops-funnel-panel, .ops-review-panel, .ops-intent-panel, .ops-finance-panel { min-height: 0; }
.ops-funnel-stages { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 13px; margin: 22px 0 20px; }
.ops-funnel-stages > div { min-width: 0; }
.ops-funnel-stages > i { color: #565c53; font-size: 17px; font-style: normal; }
.ops-funnel-stages strong, .ops-funnel-stages span, .ops-funnel-stages small { display: block; }
.ops-funnel-stages strong { color: #efeee5; font-size: 30px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.ops-funnel-stages span { margin-top: 3px; color: #aeb2a8; font-size: 12px; font-weight: 700; }
.ops-funnel-stages small { margin-top: 4px; color: #666c63; font-size: 10px; }
.ops-analytics-chart { display: grid; gap: 7px; padding: 13px 0; border-top: 1px solid #2d312b; border-bottom: 1px solid #2d312b; }
.ops-chart-row { display: grid; grid-template-columns: 53px minmax(80px, 1fr) 28px 45px; align-items: center; gap: 9px; min-width: 0; }
.ops-chart-row time, .ops-chart-row small { color: #70766d; font-size: 9px; }
.ops-chart-row b { color: #cfd1c8; font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
.ops-chart-bars { display: grid; gap: 2px; }
.ops-chart-bars progress { width: 100%; height: 4px; overflow: hidden; border: 0; border-radius: 99px; appearance: none; background: #282d26; }
.ops-chart-bars progress::-webkit-progress-bar { background: #282d26; }
.ops-chart-bars .ops-chart-visits::-webkit-progress-value { background: #8f9785; }
.ops-chart-bars .ops-chart-visits::-moz-progress-bar { background: #8f9785; }
.ops-chart-bars .ops-chart-paid::-webkit-progress-value { background: #d59a37; }
.ops-chart-bars .ops-chart-paid::-moz-progress-bar { background: #d59a37; }
.ops-funnel-foot { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 15px; color: #747a71; font-size: 10px; }
.ops-funnel-foot b { margin-right: 3px; color: #cdd0c6; font-size: 12px; font-variant-numeric: tabular-nums; }

.ops-review-panel .ops-panel-copy { margin: 13px 0 4px; }
.ops-review-list, .ops-intent-list, .ops-finance-breakdown { margin-top: 12px; }
.ops-review-row { width: 100%; display: grid; grid-template-columns: minmax(135px, .8fr) minmax(180px, 1.35fr) auto; align-items: center; gap: 13px; min-height: 61px; padding: 9px 0; border: 0; border-top: 1px solid #2b3029; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.ops-review-row:hover { background: #161a15; }
.ops-review-row.high { border-left: 2px solid #a96357; padding-left: 10px; }
.ops-review-row span, .ops-review-row strong, .ops-review-row small, .ops-review-row b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-review-row strong, .ops-review-row b { color: #dedfd6; font-size: 12px; }
.ops-review-row small { margin-top: 4px; color: #686e65; font-size: 9px; }
.ops-review-row i { color: #b69a67; font-size: 10px; font-style: normal; white-space: nowrap; }
.ops-overview-empty { margin: 0; padding: 27px 4px; color: #777d73; font-size: 12px; line-height: 1.55; text-align: center; }

.ops-intent-row { min-height: 59px; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 9px 0; border-top: 1px solid #2b3029; }
.ops-intent-type { color: #777d73; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ops-intent-row.checkout_completed .ops-intent-type { color: #9fbc94; }
.ops-intent-row.checkout_started .ops-intent-type { color: #d5a24a; }
.ops-intent-copy { min-width: 0; }
.ops-intent-headline, .ops-intent-targets { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.ops-intent-targets { margin-top: 5px; }
.ops-intent-targets > small { color: #666c63; font-size: 9px; }
.ops-steam-chip { max-width: 180px; overflow: hidden; color: #d9dad2; font-size: 11px; font-weight: 680; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.ops-steam-chip:hover { color: #efa11e; text-decoration: underline; text-underline-offset: 3px; }
.ops-intent-targets .ops-steam-chip { max-width: 125px; color: #8e958a; font-size: 9px; font-weight: 600; }
.ops-intent-meta { text-align: right; }
.ops-intent-meta b, .ops-intent-meta time { display: block; }
.ops-intent-meta b { color: #d8d9d0; font-size: 11px; font-variant-numeric: tabular-nums; }
.ops-intent-meta time { margin-top: 4px; color: #686e65; font-size: 9px; }
.ops-finance-row { min-height: 49px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid #2b3029; }
.ops-finance-row span, .ops-finance-row strong, .ops-finance-row small { display: block; }
.ops-finance-row strong { color: #d6d8cf; font-size: 11px; text-transform: capitalize; }
.ops-finance-row small { margin-top: 3px; color: #686e65; font-size: 9px; }
.ops-finance-row > b { color: #d8dad0; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ops-finance-row.warning > b { color: #d69a70; }

.ops-fleet-heading { margin-top: 30px; }
.ops-fleet-summary { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; color: #747970; font-size: 10px; }
.ops-fleet-summary span { color: #747970; font-size: 10px; }
.ops-fleet-summary b { color: #c9cbc2; font-size: 11px; font-variant-numeric: tabular-nums; }
.ops-server-grid-compact .ops-server-card { padding: 13px 14px; }
.ops-server-grid-compact .ops-server-card-top { margin-bottom: 8px; }
.ops-server-grid-compact .ops-server-card > strong { font-size: 13px; }
.ops-server-grid-compact .ops-server-card-stats { margin-top: 10px; padding-top: 9px; }

/* Readable operator controls */
.ops-player-heading-meta, .ops-live-count b { font-size: 11px; }
.ops-player-metrics span, .ops-player-metrics small, .ops-player-toolbar label > span, .ops-player-table-head { font-size: 9px; }
.ops-player-metrics strong { font-size: 24px; }
.ops-ranked-row strong, .ops-ranked-value b, .ops-breakdown-heading strong, .ops-data-table .ops-table-row { font-size: 11px; }
.ops-ranked-row small, .ops-breakdown-detail, .ops-player-identity small { font-size: 9px; }
.ops-player-toolbar input, .ops-player-toolbar select, .server-heading select { font-size: 11px; }
.ops-player-identity a, .ops-compact-row a { font-size: 12px; }
.ops-row-actions button { font-size: 9px; }
.ops-inline-form > label, .ops-stack-form > label, .ops-dialog-field label, .ops-dialog > form > label { font-size: 10px; }
.ops-inline-form > select, .ops-stack-form > select, .ops-stack-form > input, .ops-dialog input, .ops-dialog select, .ops-command-row input { font-size: 12px; }
.ops-form-status, .ops-definition-list > div { font-size: 10px; }

@media (max-width: 1100px) {
  .ops-command-brief { grid-template-columns: minmax(270px, .8fr) minmax(0, 1.2fr); }
  .ops-overview-grid, .ops-overview-grid.lower { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .ops-nav button { width: auto; padding-inline: 11px; font-size: 11px; }
  .ops-nav button span { display: none; }
  .ops-command-brief { grid-template-columns: 1fr; }
  .ops-revenue-card { border-right: 0; border-bottom: 1px solid #353a32; }
}

@media (max-width: 720px) {
  .ops-brand { display: none; }
  .ops-rail { grid-template-columns: 1fr auto; }
}

@media (max-width: 650px) {
  .ops-layout { display: block; }
  .ops-rail { position: fixed; z-index: 40; inset: auto 0 0; width: 100%; height: 68px; display: block; padding: 7px 8px max(7px, env(safe-area-inset-bottom)); border: 0; border-top: 1px solid #353a32; background: rgba(13,15,12,.98); }
  .ops-rail-status, .ops-brand { display: none; }
  .ops-nav { width: 100%; height: 53px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: 0; }
  .ops-nav button { width: 100%; height: 49px; justify-content: center; padding: 0 2px; border-radius: 5px; font-size: 10px; text-align: center; }
  .ops-nav button span { display: none; }
  .ops-topbar { top: 0; height: 61px; padding-inline: 10px; }
  .ops-search-wrap { width: calc(100% - 44px); }
  .ops-search-wrap > input { height: 41px; padding-right: 14px; font-size: 13px; }
  .ops-search-wrap kbd { display: none; }
  .ops-canvas { padding: 20px 11px calc(96px + env(safe-area-inset-bottom)); }
  .ops-page-heading { margin-bottom: 18px; }
  .ops-page-heading h1 { font-size: 25px; }
  .ops-command-brief { margin-inline: 0; }
  .ops-revenue-card { padding: 21px 19px; }
  .ops-revenue-card > strong { font-size: 44px; }
  .ops-revenue-card dl { gap: 9px; }
  .ops-revenue-card dt { font-size: 9px; }
  .ops-revenue-card dd { font-size: 12px; }
  .ops-brief-stats article { padding: 18px 17px; }
  .ops-brief-stats strong { font-size: 23px; }
  .ops-overview-grid { margin-top: 9px; }
  .ops-panel { padding: 18px 16px; }
  .ops-funnel-stages { gap: 7px; }
  .ops-funnel-stages > i { font-size: 12px; }
  .ops-funnel-stages strong { font-size: 25px; }
  .ops-funnel-stages span { font-size: 10px; }
  .ops-funnel-stages small { font-size: 9px; }
  .ops-chart-row { grid-template-columns: 47px minmax(70px, 1fr) 24px 40px; gap: 6px; }
  .ops-review-row { grid-template-columns: 1fr auto; gap: 8px; padding-block: 12px; }
  .ops-review-reason { grid-column: 1 / -1; grid-row: 2; }
  .ops-review-row > i { grid-column: 2; grid-row: 1; }
  .ops-intent-row { grid-template-columns: 57px minmax(0, 1fr); gap: 8px 10px; padding-block: 11px; }
  .ops-intent-meta { grid-column: 2; display: flex; align-items: center; justify-content: space-between; text-align: left; }
  .ops-intent-meta time { margin-top: 0; }
  .ops-fleet-heading { align-items: flex-start; flex-direction: column; }
  .ops-fleet-summary { justify-content: flex-start; }

  .ops-player-table-wrap { overflow: visible; }
  .ops-player-table-head { display: none; }
  .ops-data-table.players { display: grid; gap: 9px; padding: 9px; background: #0c0f0c; }
  .ops-data-table.players .ops-table-row { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 18px; padding: 15px; border: 1px solid #30352e; border-radius: 8px; background: #121511; }
  .ops-data-table.players .ops-table-row:hover { background: #151914; }
  .ops-data-table.players .ops-player-identity { grid-column: 1 / -1; padding-bottom: 10px; border-bottom: 1px solid #2b3029; }
  .ops-data-table.players .ops-table-row > span { min-width: 0; }
  .ops-data-table.players .ops-table-row > span::before { content: attr(data-label); display: block; margin-bottom: 4px; color: #686e65; font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
  .ops-data-table.players .ops-row-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding-top: 9px; border-top: 1px solid #2b3029; }
  .ops-data-table.players .ops-row-actions button { min-width: 0; min-height: 34px; padding-inline: 4px; font-size: 9px; }
  .ops-player-toolbar { grid-template-columns: 1fr; }
  .ops-player-search, .ops-player-toolbar label:last-child { grid-column: auto; }
  .ops-player-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-player-metrics article { padding: 14px; }
  .ops-player-metrics strong { font-size: 22px; }
}

@media (max-width: 410px) {
  .ops-nav button { font-size: 9px; }
  .ops-revenue-card dl { grid-template-columns: 1fr; }
  .ops-revenue-card dl > div { display: flex; justify-content: space-between; gap: 12px; }
  .ops-revenue-card dd { margin: 0; }
  .ops-brief-stats { grid-template-columns: 1fr 1fr; }
  .ops-brief-stats article { padding: 16px 14px; }
  .ops-funnel-stages strong { font-size: 22px; }
  .ops-funnel-stages small { display: none; }
  .ops-funnel-foot { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-height: 480px) {
  .checkout-page .checkout-hero { display: none; }
  .checkout-page .product { padding-block: 5px; }
  .checkout-page .step-body { padding-block: 7px; }
  .checkout-page .gift-controls { margin-top: 0; }
  .checkout-page .gift-toggle { padding-block: 5px 0; }
  .checkout-page #payment-step .step-body { padding-block: 7px; }
  .checkout-page .summary { padding-bottom: 5px; }
  .checkout-page .secure { margin-top: 3px; font-size: 10px; }
  .checkout-page footer { padding-block: 6px; }
  .checkout-page .gift-panel { max-height: 90px; }
}

/* Checkout */
.checkout-page {
  color-scheme: light;
  --background: #f6f7f9;
  --card: #ffffff;
  --text: #202b3a;
  --muted: #667386;
  --line: #e2e7ed;
  --soft: #f7f9fb;
  --orange: #2157cf;
  --green: #197454;
  --danger: #b9323c;
  padding: 12px;
  background: #f6f7f9;
}
.checkout-page .checkout {
  width: min(840px, 100%);
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  border: 1px solid #e0e5ec;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 20px 55px rgba(27, 39, 57, .08);
}
.checkout-intro {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 34px 36px;
  background: #fafbfc;
  border-right: 1px solid #e9edf2;
}
.checkout-brand { margin: 0; color: #182538; font-size: 17px; font-weight: 760; letter-spacing: -.025em; }
.checkout-page .product { display: block; margin: auto 0; padding: 28px 0 0; }
.product-kind { margin: 0 0 6px; color: #64748b; font-size: 12px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.checkout-page .product h1 { color: #172235; font-size: 31px; font-weight: 760; line-height: 1.13; }
.checkout-page .product > p:not(.product-kind) { max-width: 330px; margin: 13px 0 24px; color: #546175; font-size: 15px; line-height: 1.48; }
.checkout-page .product > strong { display: block; color: #172235; font-size: 31px; font-weight: 760; line-height: 1.08; }
.checkout-page .product > strong span { display: block; margin-top: 5px; color: #657186; font-size: 13px; font-weight: 500; text-align: left; }
.checkout-flow { min-width: 0; display: flex; flex-direction: column; background: #ffffff; }
.checkout-flow-title { margin: 0; padding: 31px 34px 16px; color: #182538; font-size: 20px; font-weight: 720; }
.account-label { margin: 0 0 9px; color: #344258; font-size: 13px; font-weight: 700; }
.checkout-page .step { border-top: 0; }
.checkout-page .step-body { padding: 0 34px 17px; }
.checkout-page #payment-step .step-body { padding: 4px 34px 19px; }
.checkout-page .button { min-height: 48px; border-radius: 7px; font-size: 15px; }
.checkout-page .steam-button { border-color: #d2d9e4; color: #172235; background: #ffffff; box-shadow: none; }
.checkout-page .steam-button:hover { border-color: #9aaac2; background: #f9fafc; }
.checkout-page .steam-button svg { fill: #172235; }
.checkout-page .primary { border-color: #2157cf; color: #ffffff; background: #2157cf; box-shadow: none; }
.checkout-page .primary:hover:not(:disabled) { border-color: #1948b4; background: #1948b4; }
.checkout-page .account-row { min-height: 52px; border: 1px solid #d8dfe8; border-radius: 7px; background: #ffffff; }
.checkout-page .profile-avatar { border-color: #d8dfe8; }
.checkout-page .account-row .profile-identity strong { color: #1d2939; }
.checkout-page .account-row .profile-identity span { color: #667386; }
.checkout-page .link-button { color: #3a5d9f; font-size: 12px; }
.checkout-page .link-button:hover { color: #2157cf; }
.checkout-page .gift-controls { margin-top: 6px; }
.checkout-page .gift-toggle { padding: 9px 0 0; color: #2157cf; font-size: 13px; font-weight: 650; }
.checkout-page .gift-toggle:hover { color: #1948b4; }
.checkout-page .gift-toggle-mark { color: #2157cf; }
.checkout-page .gift-panel { margin-top: 9px; padding-top: 10px; border-color: #e2e7ed; }
.checkout-page .add-player label { color: #546175; font-size: 12px; }
.checkout-page input { border-color: #cbd5e1; color: #1d2939; background: #ffffff; }
.checkout-page input::placeholder { color: #8490a0; }
.checkout-page input:focus { border-color: #2157cf; }
.checkout-page .small-button { border-color: #cbd5e1; color: #2157cf; background: #f7f9fc; }
.checkout-page .small-button:hover:not(:disabled) { background: #edf3fe; }
.checkout-page .player { border-color: #dfe5ed; background: #f9fafc; }
.checkout-page .summary { padding: 13px 0 10px; border-top: 1px solid #e2e7ed; color: #475569; font-size: 13px; }
.checkout-page .summary strong { color: #172235; font-size: 17px; }
.checkout-page .summary-note { color: #667386; }
.checkout-page .secure { margin-top: 9px; color: #697689; font-size: 11px; }
.checkout-page footer { margin-top: auto; padding: 13px 34px 16px; border-color: #edf0f4; background: #ffffff; }
.checkout-page footer a { color: #6c7787; font-size: 11px; }
.checkout-page footer a:hover { color: #2157cf; }
.checkout-page .toast { border-color: #d2d9e4; color: #172235; background: #ffffff; }

@media (max-width: 650px) {
  .checkout-page { padding: 8px; }
  .checkout-page .checkout { width: min(440px, 100%); max-height: calc(100dvh - 16px); display: flex; flex-direction: column; }
  .checkout-intro { padding: 19px 21px 17px; border-right: 0; border-bottom: 1px solid #e9edf2; }
  .checkout-brand { font-size: 15px; }
  .checkout-page .product { margin: 13px 0 0; padding: 0; }
  .product-kind { font-size: 10px; }
  .checkout-page .product h1 { font-size: 25px; }
  .checkout-page .product > p:not(.product-kind) { margin: 7px 0 13px; font-size: 13px; line-height: 1.3; }
  .checkout-page .product > strong { font-size: 26px; }
  .checkout-page .product > strong span { margin-top: 2px; font-size: 12px; }
  .checkout-flow-title { padding: 16px 21px 12px; font-size: 18px; }
  .checkout-page .step-body { padding: 0 21px 14px; }
  .checkout-page #payment-step .step-body { padding: 0 21px 15px; }
  .checkout-page footer { padding: 11px 21px 12px; }
}

@media (max-width: 650px) and (max-height: 480px) {
  .checkout-page { padding: 5px; }
  .checkout-page .checkout { max-height: calc(100dvh - 10px); }
  .checkout-intro { padding: 9px 17px 8px; }
  .checkout-brand { font-size: 13px; }
  .checkout-page .product { margin-top: 4px; }
  .product-kind { display: none; }
  .checkout-page .product h1 { font-size: 18px; }
  .checkout-page .product > p:not(.product-kind) { margin: 4px 0 6px; font-size: 11px; line-height: 1.2; }
  .checkout-page .product > strong { font-size: 20px; }
  .checkout-page .product > strong span { display: inline; margin-left: 5px; font-size: 11px; }
  .checkout-flow-title { display: none; }
  .checkout-page .step-body { padding: 7px 17px; }
  .checkout-page #payment-step .step-body { padding: 2px 17px 8px; }
  .checkout-page .gift-controls { margin-top: 0; }
  .checkout-page .gift-toggle { padding-top: 4px; }
  .checkout-page .gift-panel { max-height: 90px; margin-top: 4px; padding-top: 5px; }
  .checkout-page .summary { padding: 5px 0; }
  .checkout-page .secure { margin-top: 4px; }
  .checkout-page footer { padding: 5px 17px; }
  .checkout-page:has(#gift-panel:not([hidden])) #coverage-copy { display: none; }
}

@media (max-width: 650px) {
  .checkout-page:has(#gift-panel:not([hidden])) .checkout-intro { padding-block: 10px; }
  .checkout-page:has(#gift-panel:not([hidden])) .product { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 5px; }
  .checkout-page:has(#gift-panel:not([hidden])) .product h1 { font-size: 19px; }
  .checkout-page:has(#gift-panel:not([hidden])) #coverage-copy { display: none; }
  .checkout-page:has(#gift-panel:not([hidden])) .product > strong { font-size: 19px; white-space: nowrap; }
  .checkout-page:has(#gift-panel:not([hidden])) .product > strong span { display: none; }
}

@media (max-height: 480px) {
  .checkout-flow-title { display: none; }
  .checkout-page .step-body { padding-top: 7px; padding-bottom: 7px; }
  .checkout-page #payment-step .step-body { padding-top: 2px; padding-bottom: 7px; }
  .checkout-page .summary { padding-block: 5px; }
  .checkout-page .secure { margin-top: 4px; }
  .checkout-page footer { padding-block: 6px; }
}

@media (max-width: 650px) and (max-height: 400px) {
  .checkout-page:has(#gift-panel:not([hidden])) .checkout-brand { display: none; }
}