:root {
  color-scheme: dark;
  --background: #101415;
  --surface: #181e20;
  --border: #2c3538;
  --text: #f1f0eb;
  --muted: #a7b2b5;
  --accent: #eea365;
  --accent-light: #ffc18c;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  font-size: clamp(17px, 0.32vw + 13px, 20px);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; min-height: 100svh; background: var(--background); color: var(--text); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { background: #eea365; color: #101415; }
h1, h2, p { margin: 0; }
.shell { width: min(100% - 3.5rem, 76rem); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 10; padding: .8rem 1rem; background: var(--accent); color: #101415; border-radius: .4rem; }
.skip-link:focus { top: 1rem; }
.site-header { min-height: 6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-size: 1.45rem; font-weight: 650; letter-spacing: -.065em; }
.brand img { width: 2.45rem; height: 2.45rem; }
.nav-link { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.8rem; padding: .65rem 1rem; border: 1px solid var(--border); border-radius: .5rem; font-size: .9rem; color: var(--muted); transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease; }
.nav-link:hover { color: var(--text); border-color: #667074; background: var(--surface); }
.arrow { font-size: 1.1em; }
.eyebrow { display: flex; align-items: center; gap: .65rem; color: var(--accent); font-size: .72rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; }
.hero { min-height: 32rem; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 3rem; padding-block: 5.5rem; }
.hero-copy { position: relative; z-index: 1; animation: arrive 650ms ease-out both; }
.hero h1 { max-width: 13ch; margin-block: 1.3rem 1.5rem; font-size: clamp(2.6rem, 4.8vw, 4.6rem); font-weight: 560; line-height: 1.07; letter-spacing: -.065em; text-wrap: balance; }
.hero h1 em { color: var(--accent); font-style: normal; }
.intro { max-width: 30rem; color: var(--muted); line-height: 1.7; }
.hero-actions { margin-top: 2rem; }
.primary-link { display: inline-flex; justify-content: center; align-items: center; gap: 1.3rem; min-height: 3.1rem; padding: .8rem 1.25rem; border: 1px solid var(--accent); border-radius: .45rem; background: var(--accent); color: #171b1c; font-size: .92rem; font-weight: 650; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; }
.primary-link:hover { background: var(--accent-light); border-color: var(--accent-light); transform: translateY(-2px); }
.brand-art { position: relative; display: grid; place-items: center; isolation: isolate; aspect-ratio: 1; overflow: hidden; border: 1px solid #344043; border-radius: 1.3rem; background: radial-gradient(ellipse at 50% 48%, #eea36514, transparent 65%), linear-gradient(135deg, #1b2326, #111719); animation: arrive 850ms 80ms ease-out both; }
.brand-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#63727515 1px, transparent 1px), linear-gradient(90deg, #63727515 1px, transparent 1px); background-size: 2rem 2rem; mask-image: radial-gradient(ellipse, #000, transparent 75%); }
.art-orbit { position: absolute; width: 76%; aspect-ratio: 1; border: 1px solid #eea36522; border-radius: 50%; transform: rotate(-25deg) scaleY(.64); }
.art-orbit.second { width: 95%; transform: rotate(38deg) scaleY(.59); border-color: #a8bcc525; }
.art-orbit.third { width: 57%; transform: rotate(-70deg) scaleY(.74); border-color: #eea36535; }
.art-mark { width: 43%; height: auto; filter: drop-shadow(0 15px 32px #0005); }
.art-node { position: absolute; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .35rem #eea3650c; }
.art-node.one { top: 22%; left: 28%; }
.art-node.two { bottom: 27%; right: 17%; }
.art-label { position: absolute; bottom: 1.3rem; left: 1.4rem; font-size: .65rem; color: #8e9ca1; letter-spacing: .19em; text-transform: uppercase; }
.games-section { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; padding-block: 2.3rem 4rem; border-top: 1px solid var(--border); }
.games-section h2 { font-size: 1.2rem; font-weight: 550; letter-spacing: -.03em; }
.section-note { margin-top: .55rem; color: var(--muted); font-size: .85rem; }
.game-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.game-list li { display: flex; align-items: center; gap: .8rem; min-height: 3.5rem; padding-block: .75rem; border-bottom: 1px solid var(--border); font-size: 1rem; }
.game-number { color: #79888d; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .68rem; }
.site-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .75rem; }
.site-footer span:first-child { color: var(--text); }
.holding-layout { display: flex; min-height: 100svh; flex-direction: column; }
.holding-main { flex: 1; display: grid; place-items: center; padding-block: 4.5rem; }
.holding-card { position: relative; width: min(100%, 37rem); padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--border); border-radius: 1rem; background: radial-gradient(ellipse at 100% 0%, #eea36508, transparent 65%), var(--surface); animation: arrive 550ms ease-out both; }
.holding-symbol { width: 3rem; height: 3rem; margin-bottom: 2rem; color: var(--accent); }
.holding-card h1 { margin-top: 1rem; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; font-weight: 550; letter-spacing: -.055em; }
.holding-card .intro { margin-top: 1.1rem; }
.holding-card .primary-link { margin-top: 2rem; }
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1800px) { .shell { width: min(100% - 6rem, 90rem); } .hero { min-height: 38rem; } }
@media (max-width: 760px) {
  .shell { width: calc(100% - 2.2rem); }
  .site-header { min-height: 5rem; }
  .brand { font-size: 1.3rem; }
  .brand img { width: 2.1rem; height: 2.1rem; }
  .nav-link { padding: .6rem .8rem; font-size: .8rem; }
  .hero { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3.5rem; }
  .hero h1 { max-width: 15ch; font-size: clamp(2.65rem, 9vw, 4rem); }
  .brand-art { max-width: 27rem; width: 100%; justify-self: center; aspect-ratio: 1.2; }
  .games-section { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 3rem; }
  .game-list { gap: 0 1.2rem; }
  .game-list li { font-size: .95rem; }
}
@media (max-width: 400px) { .game-list { grid-template-columns: 1fr; } .nav-link { gap: .4rem; } .hero { padding-top: 2.75rem; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .primary-link:hover { transform: none; }
}

/* Central commerce workspace: the same visual language on all three hosts. */
:root { font-size: clamp(18px, .25vw + 14px, 21px); --danger:#f19789; --success:#9cceac; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.55; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
input,select,textarea { width:100%; min-width:0; min-height:2.8rem; padding:.65rem .8rem; color:var(--text); background:#101719; border:1px solid #3a464a; border-radius:.4rem; transition:border-color 160ms ease,box-shadow 160ms ease; }
input:hover,select:hover,textarea:hover { border-color:#607075; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); }
textarea { resize:vertical; line-height:1.6; }
input[type=checkbox] { width:1.1rem; min-height:1.1rem; height:1.1rem; flex-shrink:0; accent-color:var(--accent); }
input::placeholder,textarea::placeholder { color:#7e8d92; }
input[readonly] { color:var(--muted); }
[hidden] { display:none !important; }
h2,h3 { font-weight:550; letter-spacing:-.035em; }
h2 { font-size:1.3rem; }
h3 { font-size:1rem; }
button { color:inherit; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:.45rem; min-height:2.65rem; padding:.6rem .95rem; border-radius:.4rem; background:#232d31; border:1px solid #3b484d; color:var(--text); font-size:.86rem; font-weight:550; line-height:1.4; white-space:nowrap; text-align:center; transition:background-color 160ms ease,border-color 160ms ease,transform 160ms ease; }
.button:hover { background:#2c383d; border-color:#65757c; }
.button.primary { color:#181c1d; background:var(--accent); border-color:var(--accent); }
.button.primary:hover { background:var(--accent-light); border-color:var(--accent-light); }
.button.subtle { background:transparent; }
.button.danger { color:#ffb0a5; border-color:#805349; background:#7b3d3029; }
.button.small { min-height:2.2rem; padding:.4rem .65rem; font-size:.78rem; }
.text-button { min-height:2rem; padding:.2rem; border:0; background:transparent; color:var(--accent); font-size:inherit; }
.text-button:hover,.text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.text-link { color:var(--muted); font-size:.9rem; }
.muted { color:var(--muted); line-height:1.65; }
.mono,code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; }
.stack { display:flex; flex-direction:column; gap:1.2rem; min-width:0; }
.stack.large-gap { gap:1.5rem; }
.inline-note { padding:.9rem 1.1rem; color:#dac2aa; border:1px solid #6d554244; background:#eea36508; border-radius:.45rem; font-size:.82rem; line-height:1.6; }
.field { display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.field label { font-size:.85rem; font-weight:550; }
.field-help { font-size:.74rem; line-height:1.55; color:var(--muted); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.form-actions { display:flex; align-items:center; justify-content:flex-end; gap:.7rem; flex-wrap:wrap; }
.form-actions select { width:auto; }
.form-error { color:#ffb0a5; font-size:.82rem; line-height:1.6; }
.form-error:empty { display:none; }
.check-row { display:flex; align-items:center; gap:.65rem; color:var(--muted); font-size:.82rem; line-height:1.6; }
.password-wrap { display:flex; position:relative; }
.password-wrap input { padding-right:5.5rem; }
.password-toggle { position:absolute; right:.35rem; top:.3rem; bottom:.3rem; min-height:0; padding:.2rem .55rem; border:0; font-size:.7rem; }
.badge { display:inline-flex; align-items:center; min-height:1.65rem; padding:.18rem .5rem; border-radius:.3rem; border:1px solid #eea36540; color:var(--accent); background:#eea36509; font-size:.68rem; font-weight:550; line-height:1.4; width:fit-content; white-space:nowrap; }
.badge.success { color:var(--success); border-color:#9cceac40; background:#9cceac08; }
.badge.neutral { color:var(--muted); border-color:var(--border); background:#71858f09; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border:1px solid transparent; border-radius:.35rem; font-size:1.3rem; color:var(--muted); background:transparent; }
.icon-button:hover { color:var(--text); background:var(--surface); border-color:var(--border); }
.public-site .site-header nav { display:flex; align-items:center; gap:1.6rem; }
.public-site .hero { grid-template-columns:1.2fr .9fr; gap:4rem; }
.public-site .hero h1 { max-width:15ch; }
.public-site .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1.5rem; }
.public-section { padding-block:3.3rem; border-top:1px solid var(--border); scroll-margin-top:1rem; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1.5rem; margin-bottom:1.8rem; }
.section-heading h2,.journey h2 { margin-top:.8rem; font-size:clamp(1.5rem,2.3vw,2.2rem); max-width:24ch; line-height:1.2; }
.section-heading>.muted { max-width:20rem; font-size:.85rem; }
.compact-field { display:flex; flex-direction:column; gap:.4rem; font-size:.74rem; color:var(--muted); min-width:12rem; }
.compact-field select { min-height:2.45rem; font-size:.85rem; }
.game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.game-tile { display:flex; align-items:center; gap:1rem; min-height:7rem; padding:1.2rem; background:var(--surface); border:1px solid var(--border); border-radius:.6rem; text-align:left; transition:background-color 170ms ease,border-color 170ms ease,transform 170ms ease; }
.game-tile:hover { transform:translateY(-3px); background:#1d272b; border-color:#7c6351; }
.game-tile>span:last-child { margin-left:auto; color:var(--muted); }
.game-emblem { display:grid; place-items:center; flex-shrink:0; width:2.8rem; height:2.8rem; border:1px solid #eea36538; border-radius:.5rem; color:var(--accent); font-size:.85rem; background:#eea3650c; letter-spacing:-.05em; font-weight:650; }
.game-minecraft_java .game-emblem { color:#a1c6a1; border-color:#8fad8b38; background:#8fad8b0c; }
.game-minecraft_bedrock .game-emblem { color:#bdc4d0; border-color:#bdc4d038; background:#bdc4d00c; }
.game-palworld .game-emblem { color:#9ec5d1; border-color:#9ec5d138; background:#9ec5d10c; }
.game-hytale .game-emblem { color:#d4c494; border-color:#d4c49438; background:#d4c4940c; }
.game-tile-copy { display:flex; flex-direction:column; gap:.45rem; }
.game-tile-copy strong { font-size:.88rem; font-weight:550; }
.game-tile-copy>span { color:var(--muted); font-size:.7rem; }
.offer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.offer-card { display:flex; flex-direction:column; align-items:flex-start; gap:1rem; padding:1.5rem; background:var(--surface); border:1px solid var(--border); border-radius:.6rem; }
.offer-card h3 { font-size:1.35rem; }
.offer-card>.muted { font-size:.8rem; }
.offer-card>.button { align-self:stretch; margin-top:auto; }
.offer-price { font-size:1.8rem; font-weight:550; letter-spacing:-.04em; }
.offer-price>span { color:var(--muted); font-size:.75rem; font-weight:400; margin-left:.4rem; letter-spacing:normal; }
.spec-list { display:flex; flex-direction:column; gap:.65rem; width:100%; margin:0; font-size:.78rem; }
.spec-list>div { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.spec-list dt { color:var(--muted); }
.spec-list dd { margin:0; text-align:right; }
.journey { display:grid; grid-template-columns:1fr 1fr; gap:4rem; padding-block:4rem; }
.journey ol { display:flex; flex-direction:column; gap:1.5rem; list-style:none; margin:0; padding:0; }
.journey li { display:flex; gap:1rem; }
.journey li>span { font-family:ui-monospace,monospace; color:var(--accent); font-size:.7rem; padding-top:.15rem; }
.journey li p { margin-top:.4rem; font-size:.8rem; color:var(--muted); line-height:1.6; }
.empty-state { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.75rem; padding:3rem 1.3rem; border:1px dashed var(--border); border-radius:.55rem; min-height:12rem; }
.empty-glyph { color:var(--accent); font-size:2rem; font-weight:300; }
.empty-state h3 { font-size:1.05rem; }
.empty-state p { color:var(--muted); max-width:32rem; font-size:.82rem; line-height:1.6; }
.empty-state .button { margin-top:.35rem; }
.offer-grid>.empty-state,.game-grid>.empty-state { grid-column:1/-1; }
.loading { display:flex; align-items:center; justify-content:center; gap:.7rem; min-height:10rem; color:var(--muted); font-size:.9rem; }
.spinner { width:1rem; height:1rem; display:inline-block; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.error-panel { padding:1.5rem; border:1px solid #a66b5e66; background:#a66b5e0a; border-radius:.5rem; display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; }
.error-panel p { color:var(--muted); font-size:.85rem; }
.boot-screen { min-height:100svh; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1.5rem; color:var(--muted); }
.auth-layout { min-height:100svh; }
.auth-header { max-width:90rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-inline:auto; padding:1.4rem 2rem; }
.auth-main { display:flex; justify-content:center; padding:3rem 1.2rem 6rem; }
.auth-card { width:min(100%,29rem); padding:2.4rem; border:1px solid var(--border); border-radius:.9rem; background:radial-gradient(ellipse at top right,#eea36506,transparent 60%),var(--surface); animation:arrive 300ms ease-out both; }
.auth-card h1 { font-size:2rem; font-weight:550; line-height:1.15; letter-spacing:-.055em; margin-block:1rem 1.7rem; }
.auth-description { font-size:.85rem; margin-block:-.7rem 1.7rem; }
.auth-switch { text-align:center; font-size:.8rem; color:var(--muted); }
.auth-card form .button.primary { width:100%; }
.qr-code { display:block; width:240px; max-width:100%; height:auto; padding:.7rem; border-radius:.5rem; background:white; align-self:center; }
.manual-secret { border:1px solid var(--border); border-radius:.4rem; padding:.8rem; font-size:.8rem; }
.manual-secret summary { cursor:pointer; color:var(--muted); }
.secret-value { display:block; margin:1rem 0; font-size:.85rem; line-height:1.5; }
.recovery-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; padding:1rem; background:#101719; border:1px solid var(--border); border-radius:.45rem; }
.recovery-grid code { font-size:.85rem; }
.app-layout { display:flex; min-height:100svh; }
.sidebar { position:fixed; inset:0 auto 0 0; display:flex; flex-direction:column; width:15rem; padding:1.4rem .8rem .8rem; border-right:1px solid var(--border); background:#141a1c; z-index:20; overflow-y:auto; }
.sidebar-brand { padding:.25rem .6rem 1.6rem; display:flex; flex-direction:column; gap:.8rem; }
.sidebar-brand .brand { font-size:1.3rem; }
.sidebar-brand .brand img { width:2.2rem; height:2.2rem; }
.sidebar-brand .badge { margin-left:2.9rem; font-size:.6rem; }
.sidebar nav { display:flex; flex-direction:column; gap:.25rem; }
.nav-item { display:flex; align-items:center; width:100%; gap:.8rem; min-height:2.7rem; padding:.65rem .75rem; border:1px solid transparent; border-radius:.4rem; text-align:left; background:transparent; color:#a9b5b9; font-size:.82rem; transition:color 160ms ease,background-color 160ms ease,border-color 160ms ease; }
.nav-item:hover { background:#202a2e; color:var(--text); }
.nav-item.selected { color:var(--accent); border-color:#eea36526; background:#eea36508; }
.nav-icon { font-size:1rem; color:#7f949c; width:1.1rem; text-align:center; }
.nav-item.selected .nav-icon { color:var(--accent); }
.nav-group { margin-top:.6rem; }
.nav-group summary { display:flex; align-items:center; justify-content:space-between; color:#84969e; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; padding:.8rem .75rem; cursor:pointer; list-style:none; }
.nav-group summary::-webkit-details-marker { display:none; }
.nav-group summary::after { content:'⌄'; font-size:1rem; transition:transform 160ms ease; }
.nav-group[open] summary::after { transform:rotate(180deg); }
.nav-group[open]>div { animation:arrive 180ms ease-out both; }
.sidebar-bottom { margin-top:auto; padding-top:2rem; }
.workspace-wrap { width:calc(100% - 15rem); min-width:0; margin-left:15rem; }
.topbar { min-height:4rem; padding:.7rem 1.7rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--border); background:#13191b; }
.breadcrumb { display:flex; align-items:center; gap:.8rem; color:var(--muted); font-size:.72rem; }
.breadcrumb>span:last-child { color:var(--text); }
.account-button { display:flex; align-items:center; gap:.55rem; max-width:15rem; padding:.3rem .6rem .3rem .3rem; border:1px solid var(--border); border-radius:.4rem; background:var(--surface); color:var(--text); font-size:.75rem; }
.account-button>span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar { display:grid; place-items:center; width:1.8rem; height:1.8rem; flex-shrink:0; font-size:.6rem; font-weight:650; color:var(--accent); background:#eea3650c; border:1px solid #eea3653a; border-radius:.3rem; }
.avatar.large { width:3rem; height:3rem; font-size:1rem; }
.workspace { width:100%; max-width:110rem; padding:2.3rem 2rem 4rem; margin-inline:auto; outline:none; }
.page-header { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-bottom:2rem; }
.page-header h1 { font-size:1.9rem; font-weight:550; letter-spacing:-.055em; margin-top:.55rem; }
.page-header .eyebrow { font-size:.6rem; }
.page-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.page-content { min-width:0; animation:arrive 200ms ease-out both; }
.panel { border:1px solid var(--border); background:var(--surface); border-radius:.55rem; min-width:0; }
.panel-heading { padding:1.1rem 1.3rem; border-bottom:1px solid var(--border); }
.panel-heading h2 { font-size:.95rem; }
.panel-body { padding:1.3rem; display:flex; flex-direction:column; gap:1.3rem; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.metric { display:flex; flex-direction:column; gap:.7rem; padding:1.3rem; border:1px solid var(--border); background:var(--surface); border-radius:.5rem; }
.metric>span { font-size:.76rem; line-height:1.5; }
.metric>strong { font-size:1.9rem; font-weight:500; letter-spacing:-.04em; }
.metric small { color:#7f929b; font-size:.64rem; line-height:1.5; }
.detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.detail-grid .metric { border:0; background:#11181b; padding:1rem; }
.detail-grid .metric strong { font-size:1.3rem; }
.table-scroll { overflow:auto; border:1px solid var(--border); border-radius:.5rem; width:100%; }
.panel-body>.table-scroll { border:0; }
table { border-collapse:collapse; width:100%; font-size:.8rem; text-align:left; background:var(--surface); }
th { color:#8da0a8; font-size:.64rem; font-weight:550; text-transform:uppercase; letter-spacing:.055em; background:#141c1f; }
th,td { padding:1.15rem; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#1c272c; }
td { line-height:1.6; }
.cell-title { display:flex; flex-direction:column; gap:.35rem; }
.cell-title strong { font-weight:550; color:var(--text); }
.cell-title small { color:var(--muted); font-size:.7rem; }
.server-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.server-card { display:flex; flex-direction:column; gap:1rem; padding:1.4rem; border:1px solid var(--border); border-radius:.5rem; background:var(--surface); }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.profile-summary { display:flex; align-items:center; gap:1rem; padding-bottom:1.3rem; border-bottom:1px solid var(--border); }
.profile-summary p { font-size:.8rem; overflow-wrap:anywhere; }
.connection-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.connection-row p { font-size:.78rem; margin-top:.35rem; }
.modal { width:min(100% - 2rem,35rem); max-height:calc(100svh - 3rem); padding:0; color:var(--text); border:1px solid #47565e; background:#182125; border-radius:.7rem; box-shadow:0 2rem 8rem #0007; }
.modal::backdrop { background:#070b0ccc; backdrop-filter:blur(5px); }
.modal[open] { animation:arrive 180ms ease-out both; }
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; border-bottom:1px solid var(--border); padding:1.15rem 1.4rem; }
.modal-head h2 { font-size:1.1rem; }
.modal>.stack,.modal>form { padding:1.4rem; }
.order-summary { padding-bottom:1.2rem; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:.65rem; }
.ticket-thread { max-height:25rem; overflow:auto; display:flex; flex-direction:column; gap:.8rem; }
.message { padding:1rem; border:1px solid var(--border); border-radius:.45rem; background:#11191c; }
.message.staff { border-left:2px solid var(--accent); }
.message-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:.7rem; color:var(--muted); }
.message p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.82rem; line-height:1.7; margin-top:.7rem; }
.notifications { position:fixed; right:1.3rem; bottom:1.3rem; z-index:100; display:flex; flex-direction:column; gap:.6rem; max-width:min(28rem,calc(100% - 2.6rem)); }
.toast { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1rem; color:var(--text); border:1px solid #596b75; border-radius:.45rem; background:#202e34; box-shadow:0 .5rem 2rem #0005; font-size:.8rem; line-height:1.5; animation:arrive 180ms ease-out both; }
.toast.error { border-color:#a3675b; background:#382522; }
.toast.success { border-color:#688d74; }
.copy-helper { position:fixed; left:-9999px; top:0; }
.mobile-menu { display:none; }
@media(min-width:1800px) { .workspace { padding:3rem; } .sidebar { width:16rem; } .workspace-wrap { width:calc(100% - 16rem); margin-left:16rem; } }
@media(max-width:1200px) { .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .offer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .settings-grid { grid-template-columns:1fr; } }
@media(max-width:960px) { .sidebar { width:13rem; } .workspace-wrap { margin-left:13rem; width:calc(100% - 13rem); } .workspace { padding:1.5rem; } .page-header { align-items:flex-start; flex-direction:column; } .server-grid { grid-template-columns:1fr; } .public-site .hero { gap:2rem; } }
@media(max-width:760px) {
 .public-site .site-header nav { gap:.7rem; }
 .public-site .site-header nav>.text-link { display:none; }
 .public-site .hero { grid-template-columns:1fr; }
 .journey { grid-template-columns:1fr; gap:2rem; }
 .public-section { padding-block:2.4rem; }
 .section-heading { align-items:flex-start; flex-direction:column; }
 .compact-field { width:100%; }
 .game-grid,.offer-grid { grid-template-columns:1fr; }
 .game-tile { min-height:6rem; }
 .sidebar { transform:translateX(-100%); width:15rem; transition:transform 200ms ease; padding-top:4.6rem; box-shadow:1rem 0 3rem #0004; }
 .navigation-open .sidebar { transform:translateX(0); }
 .workspace-wrap { width:100%; margin-left:0; }
 .topbar { position:relative; z-index:30; padding:.6rem .85rem; gap:.5rem; }
 .breadcrumb { gap:.5rem; }
 .breadcrumb>span:first-of-type { display:none; }
 .mobile-menu { display:inline-flex; }
 .workspace { padding:1.5rem 1rem 3rem; }
 .page-header { margin-bottom:1.5rem; gap:1rem; }
 .page-header h1 { font-size:1.6rem; }
 .metrics-grid { gap:.65rem; }
 .metric { padding:1rem; }
 .metric>strong { font-size:1.55rem; }
 .metric>span { font-size:.7rem; }
 .detail-grid { grid-template-columns:1fr 1fr; }
 .auth-header { padding:1rem; }
 .auth-main { padding:1.2rem 1rem 3rem; }
 .auth-card { padding:1.5rem; }
 .auth-card h1 { font-size:1.8rem; }
 .form-grid { grid-template-columns:1fr; }
 .panel-body { padding:1rem; }
 .connection-row { align-items:flex-start; }
 .modal { width:calc(100% - 1rem); max-height:calc(100svh - 1rem); }
 .account-button { max-width:8rem; }
 th,td { padding:.85rem; }
}
@media(max-width:380px) { .metrics-grid,.detail-grid { grid-template-columns:1fr; } .account-button>span:last-child { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .game-tile:hover { transform:none; } }
/* Keep operational rows and messages readable on wide displays. */
.nav-item { font-size:.9rem; }
td { font-size:.9rem; }
th { font-size:.72rem; }
.message p { font-size:.95rem; }
.game-tile-copy strong { font-size:1rem; }
.field label { font-size:.9rem; }
.skip-link:not(:focus) { clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap; }