/* FPSHost V21 / Midnight Circuit. Loaded after the verified V20 mobile layer. */
:root { --v21-surface:#111a2c; --v21-line:#28354c; --v21-muted:#a0aec5; --v21-accent:#85b6ff; --v21-lilac:#b3a0ff; }
body { background: radial-gradient(ellipse at 85% 0%,#152346 0,transparent 38%),#080e1b; color:#edf2fc; }
::selection { background:#526cf3; color:#fff; }
.button { min-height:44px; border-radius:12px; letter-spacing:-.015em; }
.button-primary { background:linear-gradient(115deg,#4d77f8,#6e5aeb); color:white; box-shadow:0 7px 24px #465ce529,inset 0 1px #ffffff30; }
.button-ghost { background:#152036; border-color:#33425b; color:#e7eefc; }
.button:hover { transform:translateY(-2px); filter:brightness(1.09); }
.button:disabled { cursor:not-allowed; transform:none; filter:none; opacity:.5; }
.brand { letter-spacing:-1.2px; }
.brand>span:last-child>span { color:#7fa8ff; }
.kicker,.eyebrow { color:#9cbcff; font-size:11px; letter-spacing:.16em; }
.ambient { opacity:.09; }
.skip-link { position:fixed; top:8px; left:16px; z-index:100; padding:14px 20px; border-radius:10px; background:#fff; color:#101a33; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.public-v21 .site-header { max-width:1220px; border-color:#34415b; background:rgba(13,21,37,.96); box-shadow:0 12px 36px #00000020; }
.public-v21 .site-header nav a { color:#b8c4d9; }
.public-v21 .site-header nav a:hover { color:#fff; }
.public-v21 .hero { min-height:720px; padding-block:88px 68px; gap:48px; }
.public-v21 .hero h1 { font-size:clamp(48px,6.4vw,84px); line-height:1.01; letter-spacing:-.065em; font-weight:850; }
.public-v21 .hero h1 em { background-image:linear-gradient(110deg,#aac9ff,#7b9cff 45%,#b6a0ff); }
.public-v21 .hero-copy>p { font-size:17px; color:#a8b7ce; max-width:460px; }
.public-v21 .hero-copy>.hero-caption { font-size:12px; color:#94a6c4; margin-top:-12px; }
.public-v21 .hero-actions .button { min-height:52px; }
.public-v21 .trust-row { gap:15px; border-top:1px solid #2b3750; padding-top:24px; margin-top:30px; }
.public-v21 .trust-row strong { color:#d6e1f5; }
.public-v21 .trust-row small { color:#9aaac2; }
.public-v21 .trust-row b { color:#9cbcff; }
.public-v21 .hero-visual::before { content:""; position:absolute; inset:0 -12px; border:1px solid #6f85bc20; border-radius:50%; transform:rotate(-22deg); pointer-events:none; }
.public-v21 .mock-window { transform:rotate(-2deg); border-color:#50668c; background:linear-gradient(135deg,#18253d,#0b1527); box-shadow:0 30px 80px #00000060,0 0 0 7px #6285cf08; }
.public-v21 .mock-top { background:#18243b; border-color:#34445f; }
.public-v21 .mock-top .status-dot { color:#b7c9e7; background:#283954; font-size:10px; }
.public-v21 .mock-content { padding:28px 22px; }
.public-v21 .mock-content h3 { font-size:21px; letter-spacing:-.035em; }
.public-v21 .mock-body aside { border-color:#34445f; }
.public-v21 .mock-content small { color:#a4b5cf; }
.public-v21 .server-line,.public-v21 .metric-grid>div { background:#101b30; border-color:#304360; }
.public-v21 .chart { gap:9px; height:95px; border-color:#43597d; }
.public-v21 .chart i { background:linear-gradient(#a596ff,#6087f4); opacity:.85; }
.public-v21 .float-card { right:-12px; bottom:3px; background:#17243b; border-color:#42587d; border-radius:16px; padding:16px 20px; }
.public-v21 .float-card small { color:#a5b6cf; }
.public-v21 .section { padding-block:65px; }
.public-v21 .section-heading h2 { font-size:clamp(30px,3.3vw,44px); letter-spacing:-.045em; line-height:1.1; margin-top:14px; }
.public-v21 .section-heading p { color:#a2b1c9; max-width:650px; line-height:1.7; }
.public-v21 .public-game-grid { gap:20px; }
.public-v21 .public-game-card { min-height:315px; border-radius:22px; padding:24px; border-color:#3b4d68; }
.public-v21 .public-game-card .game-card-copy { max-width:90%; }
.public-v21 .public-game-card .game-card-copy h3 { font-size:28px; letter-spacing:-.035em; }
.public-v21 .public-game-card .game-card-copy p { font-size:14px; color:#c2ccdc; }
.public-v21 .game-card-action { min-height:44px; font-size:12px; color:#c5d8f8; }
.public-v21 .game-badge { font-size:10px; }
.public-v21 .game-state { font-size:11px; }
.public-v21 .future-game { filter:saturate(.45); }
.public-v21 .future-game .game-card-action { color:#b3bdd0; }
.public-v21 .feature-grid { gap:16px; }
.public-v21 .feature-grid article { min-height:240px; padding:28px; background:linear-gradient(140deg,#152038,#101827); border:1px solid #2c3a53; border-radius:18px; position:relative; }
.public-v21 .feature-grid article>b { display:inline-grid; place-items:center; width:38px; height:34px; color:#b3c8f3; font:600 12px ui-monospace,monospace; background:#293858; border-radius:9px; }
.public-v21 .feature-grid h3 { font-size:19px; letter-spacing:-.025em; margin:20px 0 10px; }
.public-v21 .feature-grid p { font-size:14px; line-height:1.7; color:#adbad0; }
.feature-tag { display:block; margin-top:23px; font-size:9px; letter-spacing:.14em; color:#9faee0; }
.public-v21 .free-plan { background:linear-gradient(115deg,#eaf0ff,#f7f8ff 60%,#e4e2fc); border:1px solid #bdc8e5; border-radius:24px; color:#16213c; overflow:hidden; box-shadow:0 24px 80px #00000030; }
.public-v21 .plan-copy { padding:48px; }
.public-v21 .plan-copy .kicker { color:#515ec0; }
.public-v21 .plan-copy h2 { font-size:76px; letter-spacing:-.07em; }
.public-v21 .plan-copy h2 small { font-size:16px; letter-spacing:0; color:#54617b; }
.public-v21 .plan-copy p,.public-v21 .plan-copy li { color:#4e5c76; }
.public-v21 .plan-art { background:none; color:#243552; }
.public-v21 .orb { border-color:#788ced; box-shadow:0 0 0 22px #596ef509,0 0 0 45px #596ef506; background:linear-gradient(135deg,#6b86ff,#7255ce); color:#fff; }
.public-v21 .plan-art p { color:#4e5c76; }
.faq-section .section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; }
.support-link { color:#b2c9ff; font-size:14px; padding-block:12px; }
.faq-list { display:grid; gap:10px; }
.faq-list details { padding:0 24px; background:#101a2d; border:1px solid #2d3a53; border-radius:14px; }
.faq-list summary { cursor:pointer; min-height:70px; padding:23px 28px 23px 0; color:#dde6f8; font-size:16px; font-weight:650; position:relative; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:0; font-size:22px; color:#a99fff; top:20px; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list details[open] { border-color:#6274b0; background:#142039; }
.faq-list p { max-width:760px; color:#aebed7; margin:0 0 23px; font-size:15px; line-height:1.75; }
.public-v21 footer { background:#080f1d; border-top:1px solid #26344b; }
.public-v21 .footer-inner { gap:24px; flex-wrap:wrap; padding-block:30px; }
.public-v21 .footer-inner small { color:#a1aec2; }
.public-v21 .footer-inner>a:not(.brand) { color:#a9bffc; font-size:13px; }
/* Account pages keep a quiet, light form beside the dark brand artwork. */
.auth-page { background:radial-gradient(ellipse at 20% 20%,#1b2e53,transparent 65%),#0a1120; }
.auth-layout { border-color:#3c4c6d; border-radius:26px; }
.auth-v9 .auth-showcase { background:radial-gradient(circle at 0 0,#34417360,transparent 65%),#101b30; padding:65px 42px; }
.auth-showcase h1 { font-size:43px; letter-spacing:-.045em; line-height:1.12; }
.auth-showcase h1 em { background-image:linear-gradient(90deg,#a7c5ff,#a792f8); }
.auth-showcase>p { color:#b3c0d6; font-size:16px; }
.auth-card { background:#f4f6fc; padding:52px; }
.auth-card h2 { font-size:30px; line-height:1.2; letter-spacing:-.045em; }
.auth-card .lead { color:#5c6a84; font-size:15px; }
.auth-tabs { padding:5px; border:1px solid #dfe4f1; background:#e8ecf6; border-radius:14px; }
.auth-tabs a { min-height:46px; }
.auth-tabs a.active { background:linear-gradient(120deg,#526deb,#6c58d8); border-radius:10px; }
.field { margin:20px 0; }
.field input { border-color:#c9d3e6; background:#fff; border-radius:12px; min-height:54px; }
.field input:focus { border-color:#687bea; box-shadow:0 0 0 4px #687bea18; }
.auth-submit { min-height:54px; }
.auth-footer { line-height:1.75; }
.password-shell { position:relative; display:block!important; margin:0!important; }
.password-shell input { padding-right:68px; }
.password-toggle { position:absolute; right:6px; top:5px; height:44px; min-width:54px; border:0; border-radius:8px; background:#ecf0fa; color:#465b9c; font-size:12px; cursor:pointer; }
/* Existing panel and administration structure, polished without changing handlers. */
.panel-v9,.admin-v13 { background:radial-gradient(ellipse at 100% 0,#1e2b4938,transparent 50%),#0a1120; }
.panel-v9 .panel-sidebar,.admin-v13 .admin-sidebar { background:#0f182a; border-color:#27354e; }
.panel-v9 .panel-header,.admin-v13 .admin-topbar { background:rgba(12,20,35,.97); border-color:#2a3750; }
.panel-v9 .panel-nav a { border-radius:12px; min-height:48px; }
.panel-v9 .panel-nav a.active,.admin-v13 .admin-nav button.active { background:linear-gradient(105deg,#4665d8,#6851c6); box-shadow:0 5px 22px #4c55d32a; }
.panel-v9 .panel-hero-card { border-color:#4b5a80; border-radius:22px; box-shadow:0 14px 42px #00000025; }
.panel-v9 .welcome h1 { letter-spacing:-.04em; }
.panel-v9 .stat-card,.panel-v9 .games-section,.admin-v13 .admin-card,.admin-v13 .admin-stats article { background:linear-gradient(130deg,#152036,#101929); border-color:#2e3d56; border-radius:18px; }
.panel-v9 .stat-card small { color:#98aac6; }
.panel-v9 .games-section-heading p,.panel-v9 .welcome p { color:#a7b7d0; }
.panel-v9 .server-management { background:linear-gradient(125deg,#1a2943,#121d32); border-color:#435779; border-radius:18px; }
.panel-v9 .server-management-meta>div { background:#111d31; border-color:#304260; }
.panel-v9 .server-management-meta span { color:#9bb0d0; font-size:10px; }
.panel-v9 .server-controls button { min-height:44px; font-size:12px; border-color:#405579; border-radius:10px; }
.panel-v9 .server-workspace { background:#101a2c; border-color:#344560; border-radius:18px; }
.panel-v9 .server-tabs { background:#131f33; border-color:#31415b; }
.panel-v9 .server-tabs button { color:#a8b9d4; font-size:12px; min-height:44px; }
.panel-v9 .server-tabs button.active { background:linear-gradient(115deg,#4e70e3,#7253d4); }
.panel-v9 .server-console { background:#080f1b; color:#b5d6c8; border-color:#34455f; font-size:12px; line-height:1.8; }
.panel-v9 .tool-heading small,.panel-v9 .credential-note { color:#a2b2cd; }
.panel-v9 .server-tool .button { background:#23324e; color:#e0eaff; border:1px solid #415579; font-size:12px; }
.panel-v9 .server-tool .button.primary { background:linear-gradient(110deg,#4b6bdd,#6753ce); border-color:#7186ce; color:#fff; }
.panel-v9 .file-row { min-height:60px; font-size:13px; border-color:#2b3a53; }
.panel-v9 .file-row:hover { background:#1b2a43; }
.panel-v9 .row-actions button { color:#c0d1eb; background:#22334f; border-color:#405675; }
.panel-v9 .credential-card,.panel-v9 .backup-row { background:#111e32; border-color:#33465f; }
.panel-v9 .credential-grid div { background:#17253b; border-color:#30445f; }
.panel-v9 .credential-grid span { color:#a1b7da; }
.panel-v9 .credential-grid code { color:#e8effd; }
.panel-v9 .config-editor,.panel-v9 .file-editor textarea { background:#090f1c; color:#d9e5f8; border-color:#3c5070; }
.panel-v9 .toast { background:#1c3451; color:#eaf3ff; border-color:#5778a6; max-width:calc(100vw - 24px); }
.panel-v9 .toast.error { background:#462332; border-color:#935369; }
.panel-v9 .server-controls button:disabled { opacity:.42; }
.panel-v9 .tool-heading>div, .panel-v9 .file-editor>div>b { min-width:0; overflow-wrap:anywhere; }
@media(min-width:901px) and (max-width:1100px) {
  .public-v21 .site-header { gap:20px; }
  .public-v21 .site-header nav { gap:16px; }
  .public-v21 .site-header .header-actions .button-primary { display:none; }
  .auth-card { padding:40px 30px; }
  .auth-showcase h1 { font-size:36px; }
}
@media(max-width:900px) {
  .public-v21 .hero { min-height:0; padding-block:54px 35px; gap:42px; }
  .public-v21 .hero h1 { font-size:clamp(48px,8vw,72px); }
  .public-v21 .hero-visual { width:min(560px,100%); margin-inline:auto; }
  .public-v21 .hero-copy>p { max-width:550px; }
  .public-v21 .hero-copy>.hero-caption { margin-top:-8px; }
  .public-v21 .trust-row { max-width:570px; margin-inline:auto; }
  .auth-layout { border-radius:22px; }
  .auth-card { padding:32px; }
  .auth-card .mobile-brand { color:#15203a; }
  .auth-card .brand>span:last-child>span { color:#587be1; }
}
@media(max-width:600px) {
  .public-v21 .site-header { border-radius:16px; }
  .public-v21 .site-header .brand { font-size:21px; }
  .public-v21 .hero { padding:38px 0 24px; gap:28px; }
  .public-v21 .hero h1 { font-size:clamp(44px,12vw,64px); line-height:1.04; margin-block:20px; }
  .public-v21 .eyebrow { font-size:9px; letter-spacing:.1em; }
  .public-v21 .hero-copy>p { font-size:16px; line-height:1.7; }
  .public-v21 .hero-copy>.hero-caption { font-size:11px; }
  .public-v21 .hero-actions { margin-block:24px; }
  .public-v21 .trust-row { background:#111d30; border:1px solid #30415d; padding:18px; margin-top:25px; }
  .public-v21 .hero-visual::before { display:none; }
  .public-v21 .mock-window { transform:none; border-radius:18px; }
  .public-v21 .mock-content { padding:20px 12px; }
  .public-v21 .mock-content h3 { font-size:17px; }
  .public-v21 .mock-body { grid-template-columns:34px minmax(0,1fr); }
  .public-v21 .chart { height:65px; gap:6px; }
  .public-v21 .section { padding-block:34px; }
  .public-v21 .section-heading h2 { font-size:31px; }
  .public-v21 .section-heading p { font-size:15px; }
  .public-v21 .public-game-card { min-height:290px; padding:20px; border-radius:18px; }
  .public-v21 .public-game-card .game-card-copy h3 { font-size:25px; }
  .public-v21 .public-game-card .game-card-copy p { font-size:13px; }
  .public-v21 .feature-grid article { min-height:0; padding:24px; }
  .public-v21 .feature-grid h3 { font-size:20px; }
  .public-v21 .feature-grid p { font-size:15px; }
  .public-v21 .plan-copy { padding:30px 24px; }
  .public-v21 .plan-copy h2 { font-size:66px; }
  .public-v21 .plan-copy .button { width:100%; }
  .faq-section .section-heading { display:block; }
  .support-link { display:inline-block; }
  .faq-list details { padding-inline:18px; }
  .faq-list summary { font-size:15px; line-height:1.5; }
  .public-v21 .footer-inner { align-items:center; gap:14px; }
  .public-v21 .footer-inner small { text-align:center; line-height:1.6; }
  .auth-card { padding:26px 20px; }
  .auth-card h2 { font-size:27px; }
  .auth-layout { border-radius:18px; }
  .panel-v9 .games-section { padding:16px 12px; }
  .panel-v9 .server-management { padding:16px; }
  .panel-v9 .server-tool { padding:12px; }
  .panel-v9 .server-tabs button { font-size:11px; white-space:normal; overflow-wrap:anywhere; }
  .panel-v9 .server-controls { gap:8px; }
  .panel-v9 .server-console { font-size:12px; }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .public-v21 .feature-grid article { transition:border-color .2s,transform .2s; }
  .public-v21 .feature-grid article:hover { border-color:#7284b1; transform:translateY(-4px); }
  .public-v21 .mock-window { animation:panel-arrive .8s ease-out both; }
  @keyframes panel-arrive { from { opacity:.5; translate:0 14px; } to { opacity:1; translate:0 0; } }
}