@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --p-ink:#102738; --p-soft:#657985; --p-line:rgba(16,39,56,.14); --p-ice:#edf5f7; --p-white:#fbfdfd; --p-cyan:#4db3c7; --p-blue:#176d8b; --p-gold:#cf9e40; --p-coral:#d86d62; --p-shadow:0 24px 70px rgba(19,55,72,.15); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--p-ink); font-family:'Manrope',sans-serif; -webkit-font-smoothing:antialiased; } button,input,select { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } .hidden { display:none !important; } .portal-kicker { color:var(--p-blue); font:700 10px/1.2 'DM Mono',monospace; letter-spacing:.18em; text-transform:uppercase; }

.portal-body { min-height:100vh; background:#deebee; background-image:linear-gradient(rgba(16,39,56,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(16,39,56,.045) 1px,transparent 1px); background-size:42px 42px; }
.portal-frame { display:grid; grid-template-columns:minmax(480px,1.06fr) minmax(470px,.94fr); min-height:100vh; max-width:1680px; margin:0 auto; background:var(--p-white); box-shadow:0 0 80px rgba(16,39,56,.12); }
.portal-visual { min-height:100vh; padding:32px 6vw 24px; overflow:hidden; position:relative; isolation:isolate; background:radial-gradient(circle at 70% 24%,rgba(113,211,228,.43),transparent 16rem),linear-gradient(135deg,#f7fbfc 0%,#dbecef 100%); }
.portal-visual::before { content:''; position:absolute; inset:0; z-index:-1; opacity:.42; background-image:radial-gradient(rgba(16,39,56,.42) 1px,transparent 1px); background-size:23px 23px; mask-image:linear-gradient(125deg,transparent 8%,#000 45%,transparent 100%); }
.portal-visual::after { content:''; position:absolute; z-index:-1; width:560px; height:560px; left:50%; bottom:-225px; transform:translateX(-50%); border:1px solid rgba(23,109,139,.1); border-radius:50%; box-shadow:0 0 0 50px rgba(23,109,139,.03),0 0 0 100px rgba(23,109,139,.025); }
.portal-brand { display:flex; align-items:center; gap:11px; font-size:12px; font-weight:800; letter-spacing:.05em; } .portal-brand b { color:var(--p-blue); } .brand-orbit { width:31px; height:31px; border-radius:50%; display:grid; place-items:center; position:relative; color:white; background:var(--p-ink); box-shadow:0 7px 15px rgba(16,39,56,.2); } .brand-orbit::before,.brand-orbit::after { content:''; position:absolute; border:1px solid var(--p-cyan); border-radius:50%; transform:rotate(-28deg); } .brand-orbit::before { width:24px; height:10px; } .brand-orbit::after { width:10px; height:24px; } .brand-orbit i { z-index:1; width:5px; height:5px; border-radius:50%; background:var(--p-gold); }
.visual-copy { position:relative; z-index:2; margin-top:15vh; max-width:495px; } .visual-copy h1 { margin:17px 0 20px; font-size:clamp(44px,5.2vw,75px); line-height:.94; letter-spacing:-.085em; } .visual-copy h1 em { color:var(--p-blue); font-style:normal; } .visual-copy p { max-width:390px; margin:0; color:var(--p-soft); font-size:14px; line-height:1.8; } .visual-metrics { display:flex; gap:30px; margin-top:43px; padding-top:17px; border-top:1px solid var(--p-line); } .visual-metrics div { display:grid; gap:4px; } .visual-metrics strong { font-size:21px; letter-spacing:-.06em; } .visual-metrics span { color:var(--p-soft); font:500 9px 'DM Mono',monospace; letter-spacing:.1em; }
.orbit-stage { width:min(500px,70vw); height:390px; position:absolute; right:2%; bottom:6%; display:grid; place-items:center; } .orbit-ring { position:absolute; border:1px solid rgba(23,109,139,.25); border-radius:50%; transform:rotate(-18deg); } .ring-a { width:515px; height:155px; } .ring-b { width:385px; height:265px; transform:rotate(54deg); } .ring-c { width:260px; height:450px; transform:rotate(35deg); } .orbit-planet { width:205px; height:205px; z-index:1; position:relative; border-radius:50%; background:radial-gradient(circle at 31% 26%,#f6ffff 0 5%,#acdfe4 17%,#4aaac0 50%,#14506c 100%); box-shadow:inset -25px -29px 39px rgba(5,47,64,.33),0 25px 45px rgba(30,110,132,.22); } .orbit-planet::after { content:''; position:absolute; inset:10px; border-radius:50%; opacity:.6; background:repeating-linear-gradient(166deg,transparent 0 24px,rgba(255,255,255,.2) 27px 32px,transparent 35px 59px); } .orbit-planet i { position:absolute; width:35px; height:12px; left:47px; top:61px; z-index:2; border-radius:50%; background:rgba(20,80,108,.3); transform:rotate(-22deg); } .satellite { position:absolute; z-index:2; width:9px; height:9px; border-radius:50%; background:var(--p-gold); box-shadow:0 0 0 6px rgba(207,158,64,.16); } .sat-a { right:5%; top:77px; } .sat-b { left:8%; bottom:43px; background:var(--p-coral); box-shadow:0 0 0 6px rgba(216,109,98,.16); } .signal-card { position:absolute; z-index:3; top:21px; left:3%; display:flex; gap:9px; align-items:center; padding:11px 13px; background:rgba(255,255,255,.72); border:1px solid rgba(16,39,56,.11); box-shadow:0 13px 28px rgba(16,39,56,.1); backdrop-filter:blur(12px); } .signal-card b,.signal-card small { display:block; } .signal-card b { font:700 9px 'DM Mono',monospace; letter-spacing:.1em; } .signal-card small { margin-top:4px; color:var(--p-soft); font-size:9px; } .live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#3cb189; box-shadow:0 0 0 4px rgba(60,177,137,.14); }
.visual-foot,.panel-foot { position:absolute; left:6vw; right:6vw; bottom:24px; display:flex; justify-content:space-between; color:var(--p-soft); font:500 9px 'DM Mono',monospace; letter-spacing:.08em; } .panel-foot { left:45px; right:45px; }
.portal-panel { min-height:100vh; position:relative; display:flex; flex-direction:column; background:rgba(251,253,253,.92); } .panel-top { display:flex; justify-content:space-between; align-items:center; padding:32px 45px 0; color:var(--p-soft); font:500 9px 'DM Mono',monospace; letter-spacing:.12em; } .panel-code i { width:6px; height:6px; display:inline-block; margin-left:7px; border-radius:50%; background:#45b18f; box-shadow:0 0 0 4px rgba(69,177,143,.12); } .panel-status { color:var(--p-blue); } .portal-form-wrap { width:min(420px,calc(100% - 90px)); margin:auto; padding:45px 0 75px; } .portal-form-wrap h2 { margin:11px 0 10px; font-size:34px; letter-spacing:-.07em; line-height:1.05; } .form-intro { margin:0 0 30px; max-width:370px; color:var(--p-soft); font-size:12px; line-height:1.7; } .portal-form { display:grid; gap:17px; } .portal-form label,.settings-form-grid label { display:grid; gap:7px; color:var(--p-ink); font-size:11px; font-weight:800; } .portal-form label>span,.settings-form-grid label>span { color:var(--p-soft); font:500 9px 'DM Mono',monospace; letter-spacing:.09em; } .portal-form input,.settings-form-grid input,.settings-form-grid select { width:100%; padding:13px 14px; outline:none; color:var(--p-ink); border:1px solid var(--p-line); background:#f8fbfb; font-size:12px; transition:border .2s,box-shadow .2s,background .2s; } .portal-form input:focus,.settings-form-grid input:focus,.settings-form-grid select:focus { border-color:var(--p-cyan); background:#fff; box-shadow:0 0 0 3px rgba(77,179,199,.12); } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .form-options { display:flex; justify-content:space-between; align-items:center; margin-top:-4px; color:var(--p-soft); font-size:10px; } .form-options a,.form-switch a { color:var(--p-blue); font-weight:800; } .check { display:flex !important; grid-template-columns:none !important; align-items:center; gap:8px !important; color:var(--p-soft) !important; font-size:10px !important; font-weight:500 !important; } .check input { position:absolute; opacity:0; width:1px !important; } .check span { width:14px; height:14px; display:inline-block; flex:none; border:1px solid var(--p-line); background:#fff; } .check input:checked+span { border-color:var(--p-blue); background:var(--p-blue); box-shadow:inset 0 0 0 3px #fff; } .portal-button { display:flex; align-items:center; justify-content:center; gap:16px; min-height:45px; padding:12px 17px; border:1px solid transparent; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; transition:transform .2s,box-shadow .2s,background .2s; } .portal-button:hover { transform:translateY(-2px); } .portal-button b { margin-left:auto; font-size:14px; } .portal-button.primary { color:#fff; background:var(--p-ink); box-shadow:0 12px 21px rgba(16,39,56,.18); } .portal-button.primary:hover { background:var(--p-blue); } .portal-button.secondary { color:var(--p-ink); background:#fff; border-color:var(--p-line); } .portal-button.secondary:hover { border-color:var(--p-cyan); background:#f4fbfc; } .portal-button.gold { color:#fff; background:var(--p-gold); } .portal-button.compact { min-height:37px; padding:9px 13px; font-size:9px; } .divider { display:flex; align-items:center; gap:13px; margin:23px 0 17px; color:var(--p-soft); font:500 9px 'DM Mono',monospace; } .divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--p-line); } .form-switch { color:var(--p-soft); margin:24px 0 0; font-size:11px; text-align:center; } .terms { margin:2px 0 2px; line-height:1.6; } .terms em { font-style:normal; } .notice { padding:12px 14px; margin:-8px 0 22px; border-left:2px solid #43ad8d; background:#e9f7f3; color:#25785f; font-size:11px; line-height:1.5; } .portal-toast { position:fixed; right:22px; bottom:22px; z-index:20; max-width:340px; padding:13px 16px; color:#fff; background:var(--p-ink); box-shadow:var(--p-shadow); font-size:11px; opacity:0; transform:translateY(14px); pointer-events:none; transition:.25s; } .portal-toast.show { opacity:1; transform:translateY(0); }
.protocol-list { display:grid; gap:14px; margin-top:38px; } .protocol-list>div { display:grid; grid-template-columns:25px 1fr; column-gap:10px; border-top:1px solid var(--p-line); padding-top:12px; } .protocol-list span { grid-row:span 2; color:var(--p-coral); font:500 10px 'DM Mono',monospace; } .protocol-list b { font-size:11px; } .protocol-list small { margin-top:4px; color:var(--p-soft); font-size:10px; }

/* Server chooser */
.portal-app { min-height:100vh; background:#e6f0f2; background-image:linear-gradient(rgba(16,39,56,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(16,39,56,.04) 1px,transparent 1px); background-size:38px 38px; } .app-topbar { min-height:72px; display:flex; align-items:center; gap:32px; padding:0 35px; background:rgba(249,252,252,.88); border-bottom:1px solid var(--p-line); box-shadow:0 3px 12px rgba(16,39,56,.04); } .dark-brand { flex:none; } .app-breadcrumb { display:flex; align-items:center; gap:11px; color:var(--p-soft); font:500 9px 'DM Mono',monospace; letter-spacing:.13em; } .app-breadcrumb i { width:4px; height:4px; background:var(--p-cyan); border-radius:50%; } .app-breadcrumb b { color:var(--p-ink); } .app-actions { display:flex; align-items:center; gap:14px; margin-left:auto; } .online-status { color:var(--p-soft); font:500 9px 'DM Mono',monospace; letter-spacing:.08em; } .online-status i { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#3cb189; } .app-user { display:flex; align-items:center; gap:8px; padding-left:15px; border-left:1px solid var(--p-line); color:var(--p-ink); font-size:10px; font-weight:800; } .app-user b { color:var(--p-soft); } .avatar { width:27px; height:27px; display:grid; place-items:center; color:#fff; background:var(--p-blue); border-radius:50%; font-size:10px; } .icon-link { display:grid; place-items:center; width:27px; height:27px; color:var(--p-soft); border:1px solid var(--p-line); font-size:14px; } .app-main { max-width:1280px; margin:0 auto; padding:65px 30px 35px; } .app-hero { display:flex; justify-content:space-between; gap:30px; align-items:end; padding-bottom:45px; border-bottom:1px solid var(--p-line); } .app-hero h1 { margin:14px 0 18px; font-size:clamp(36px,5vw,63px); line-height:.95; letter-spacing:-.08em; } .app-hero p { max-width:550px; margin:0; color:var(--p-soft); font-size:13px; line-height:1.8; } .hero-marks { display:flex; gap:30px; padding-bottom:6px; } .hero-marks div { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; } .hero-marks strong { font-size:24px; letter-spacing:-.06em; } .hero-marks span { color:var(--p-soft); font:500 8px/1.5 'DM Mono',monospace; letter-spacing:.09em; } .server-toolbar { display:flex; justify-content:space-between; align-items:center; padding:25px 0 17px; } .toolbar-label { margin-right:11px; font:700 10px 'DM Mono',monospace; letter-spacing:.15em; } .toolbar-count { color:var(--p-soft); font-size:10px; } .toolbar-filters { display:flex; gap:16px; } .filter { padding:0 0 7px; color:var(--p-soft); border:0; border-bottom:1px solid transparent; background:none; font-size:10px; font-weight:800; } .filter.active { color:var(--p-blue); border-color:var(--p-blue); } .server-deck { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .server-hero-card { overflow:hidden; background:rgba(250,253,253,.75); border:1px solid var(--p-line); box-shadow:0 10px 28px rgba(16,39,56,.05); transition:transform .25s,box-shadow .25s,border .25s; } .server-hero-card:hover { transform:translateY(-5px); border-color:rgba(77,179,199,.6); box-shadow:var(--p-shadow); } .server-card-top { display:flex; justify-content:space-between; padding:16px 18px 0; color:var(--p-soft); font:500 9px 'DM Mono',monospace; letter-spacing:.1em; } .server-live { color:#319875; } .server-live i { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#3cb189; } .server-art { height:220px; display:grid; place-items:center; position:relative; overflow:hidden; } .server-art::before { content:''; position:absolute; inset:0; opacity:.43; background-image:radial-gradient(rgba(16,39,56,.4) 1px,transparent 1px); background-size:19px 19px; } .art-genesis { background:radial-gradient(circle at 50% 55%,rgba(94,202,215,.5),transparent 45%),#d8eff0; } .art-vesper { background:radial-gradient(circle at 50% 55%,rgba(216,109,98,.32),transparent 45%),#e9e5da; } .art-helios { background:radial-gradient(circle at 50% 55%,rgba(207,158,64,.42),transparent 45%),#ebebdc; } .planet-core { width:125px; height:125px; z-index:1; border-radius:50%; position:relative; background:radial-gradient(circle at 32% 23%,#fff 0 5%,#a8dee0 18%,#3a91aa 57%,#133f58 100%); box-shadow:inset -18px -23px 28px rgba(4,45,61,.3),0 15px 27px rgba(16,71,88,.16); } .art-vesper .planet-core { background:radial-gradient(circle at 32% 23%,#fff 0 5%,#efd2b6 19%,#ad6e5f 58%,#483b51 100%); } .art-helios .planet-core { background:radial-gradient(circle at 32% 23%,#fff 0 5%,#f2e4b2 19%,#d89443 58%,#653d2f 100%); } .art-orbit { position:absolute; z-index:2; border:1px solid rgba(23,109,139,.42); border-radius:50%; } .ao-1 { width:240px; height:70px; transform:rotate(-22deg); } .ao-2 { width:140px; height:210px; transform:rotate(35deg); } .art-signal { position:absolute; z-index:3; top:28px; right:25%; color:var(--p-gold); font-size:15px; } .server-card-copy { padding:0 18px 19px; } .server-title-row { display:flex; align-items:end; justify-content:space-between; } .server-title-row h2 { margin:0; font-size:27px; letter-spacing:-.07em; } .server-title-row span { color:var(--p-soft); font:500 20px 'DM Mono',monospace; } .server-subtitle { margin-top:4px; color:var(--p-blue); font:700 9px 'DM Mono',monospace; letter-spacing:.13em; } .server-card-copy p { min-height:61px; margin:14px 0 17px; color:var(--p-soft); font-size:11px; line-height:1.65; } .server-data { display:grid; grid-template-columns:1.1fr 1fr .9fr; gap:9px; padding:13px 0 16px; border-top:1px solid var(--p-line); border-bottom:1px solid var(--p-line); } .server-data div { display:grid; gap:5px; } .server-data span { color:var(--p-soft); font:500 8px 'DM Mono',monospace; letter-spacing:.08em; } .server-data b { font-size:10px; } .server-data em { height:3px; overflow:hidden; background:#d7e5e8; } .server-data em i { display:block; height:100%; background:var(--p-cyan); } .server-launch { width:100%; display:flex; justify-content:space-between; align-items:center; margin-top:15px; padding:12px 0 0; color:var(--p-blue); border:0; background:none; border-top:1px solid transparent; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .server-launch:hover { color:var(--p-ink); } .server-launch b { font-size:14px; } .account-strip { display:flex; align-items:center; gap:13px; margin-top:18px; padding:17px 19px; background:rgba(250,253,253,.68); border:1px solid var(--p-line); } .strip-icon { width:28px; height:28px; display:grid; place-items:center; color:var(--p-blue); border:1px solid rgba(77,179,199,.4); } .account-strip div { display:grid; gap:4px; flex:1; } .account-strip b { font-size:11px; } .account-strip span { color:var(--p-soft); font-size:10px; } .account-strip a { color:var(--p-blue); font-size:10px; font-weight:800; } .app-footer { max-width:1280px; margin:0 auto; display:flex; justify-content:space-between; padding:20px 30px 25px; color:var(--p-soft); font:500 9px 'DM Mono',monospace; letter-spacing:.08em; }

/* Settings */
.settings-main { display:grid; grid-template-columns:275px 1fr; gap:55px; max-width:1190px; margin:0 auto; padding:50px 30px 70px; min-height:calc(100vh - 120px); } .settings-side { padding:15px 0; border-right:1px solid var(--p-line); } .side-profile { display:flex; align-items:center; gap:12px; padding:0 25px 31px 0; border-bottom:1px solid var(--p-line); } .large-avatar { width:50px; height:50px; display:grid; place-items:center; flex:none; color:#fff; border-radius:50%; background:linear-gradient(135deg,var(--p-blue),var(--p-cyan)); font-weight:800; } .side-rank { color:var(--p-blue); font:500 8px 'DM Mono',monospace; letter-spacing:.08em; } .side-profile h1 { margin:5px 0; font-size:16px; letter-spacing:-.05em; } .side-profile div>span { color:var(--p-soft); font-size:9px; } .side-profile div>span b { color:var(--p-ink); } .settings-nav { display:grid; gap:4px; padding:26px 25px 26px 0; } .settings-nav button { display:flex; align-items:center; gap:11px; padding:12px 0; color:var(--p-soft); border:0; background:none; text-align:left; font-size:11px; font-weight:700; } .settings-nav button span { width:22px; color:var(--p-cyan); font-size:16px; } .settings-nav button b { margin-left:auto; opacity:0; color:var(--p-blue); } .settings-nav button.active { color:var(--p-ink); } .settings-nav button.active b { opacity:1; } .side-note { display:flex; gap:10px; align-items:center; padding:13px; margin-right:25px; background:rgba(255,255,255,.55); border:1px solid var(--p-line); } .side-note b,.side-note small { display:block; } .side-note b { font:700 8px 'DM Mono',monospace; letter-spacing:.08em; } .side-note small { margin-top:5px; color:var(--p-soft); font-size:9px; } .settings-heading { display:flex; justify-content:space-between; align-items:end; gap:25px; padding-bottom:30px; border-bottom:1px solid var(--p-line); } .settings-heading h2 { margin:11px 0 10px; font-size:38px; line-height:1; letter-spacing:-.07em; } .settings-heading p { margin:0; color:var(--p-soft); font-size:12px; line-height:1.6; } .settings-tabs { display:flex; gap:22px; border-bottom:1px solid var(--p-line); } .settings-tabs button { padding:18px 0 14px; color:var(--p-soft); border:0; border-bottom:2px solid transparent; background:none; font-size:10px; font-weight:800; } .settings-tabs button.active { color:var(--p-blue); border-color:var(--p-blue); } .settings-pane { display:none; padding-top:19px; } .settings-pane.active { display:block; } .settings-card { padding:23px 24px; margin-bottom:14px; background:rgba(250,253,253,.78); border:1px solid var(--p-line); } .card-heading { display:flex; justify-content:space-between; gap:20px; padding-bottom:21px; margin-bottom:22px; border-bottom:1px solid var(--p-line); } .card-heading h3 { margin:8px 0 0; font-size:18px; letter-spacing:-.06em; } .card-code { color:var(--p-soft); font:500 9px 'DM Mono',monospace; } .settings-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 14px; } .card-actions { display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding-top:16px; border-top:1px solid var(--p-line); color:var(--p-soft); font-size:10px; } .danger-card { display:flex; align-items:center; justify-content:space-between; gap:25px; } .danger-card h3 { margin:7px 0; font-size:15px; } .danger-card p { max-width:480px; margin:0; color:var(--p-soft); font-size:10px; line-height:1.55; } .security-row { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--p-line); } .security-row:last-child { border-bottom:0; padding-bottom:0; } .security-icon { width:30px; height:30px; display:grid; place-items:center; color:var(--p-blue); border:1px solid rgba(77,179,199,.35); } .security-row div { flex:1; display:grid; gap:4px; } .security-row b { font-size:11px; } .security-row small { color:var(--p-soft); font-size:10px; } .toggle-row { display:flex; align-items:center; gap:18px; padding:15px 0; border-bottom:1px solid var(--p-line); } .toggle-row:last-child { border-bottom:0; } .toggle-row span { flex:1; display:grid; gap:4px; } .toggle-row b { font-size:11px; } .toggle-row small { color:var(--p-soft); font-size:10px; } .toggle-row input { position:absolute; opacity:0; } .toggle-row>i { width:34px; height:19px; position:relative; flex:none; border-radius:20px; background:#cbdadd; } .toggle-row>i::after { content:''; width:13px; height:13px; position:absolute; top:3px; left:3px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.17); transition:.2s; } .toggle-row input:checked+i { background:var(--p-blue); } .toggle-row input:checked+i::after { left:18px; }

@media (max-width:1050px) { .portal-frame { grid-template-columns:1fr; } .portal-visual { min-height:620px; } .portal-panel { min-height:650px; } .orbit-stage { right:9%; bottom:-35px; } .server-deck { grid-template-columns:1fr 1fr; } .server-hero-card:last-child { grid-column:span 2; display:grid; grid-template-columns:1fr 1fr; } .server-hero-card:last-child .server-art { height:100%; } }
@media (max-width:760px) { .app-topbar { padding:13px 16px; gap:14px; flex-wrap:wrap; } .app-breadcrumb { order:3; width:100%; } .app-actions { gap:8px; } .online-status { display:none; } .app-main { padding:38px 16px 25px; } .app-hero { display:block; padding-bottom:30px; } .hero-marks { margin-top:25px; } .server-toolbar { display:block; } .toolbar-filters { margin-top:17px; } .server-deck { grid-template-columns:1fr; } .server-hero-card:last-child { display:block; grid-column:auto; } .server-hero-card:last-child .server-art { height:220px; } .account-strip { align-items:flex-start; flex-wrap:wrap; } .account-strip a { margin-left:41px; } .app-footer { display:block; padding:15px 16px 22px; line-height:2; } .settings-main { grid-template-columns:1fr; gap:25px; padding:28px 16px 50px; } .settings-side { border:0; padding:0; } .settings-nav { display:flex; overflow:auto; gap:20px; padding:18px 0; border-bottom:1px solid var(--p-line); } .settings-nav button { white-space:nowrap; } .settings-nav button b { display:none; } .side-note { display:none; } .settings-heading { align-items:flex-start; flex-direction:column; } .settings-heading h2 { font-size:34px; } .settings-tabs { gap:13px; overflow:auto; } .settings-tabs button { white-space:nowrap; } }
@media (max-width:570px) { .portal-visual { min-height:560px; padding:23px 22px; } .visual-copy { margin-top:9vh; } .visual-copy h1 { font-size:50px; } .visual-metrics { gap:16px; } .orbit-stage { transform:scale(.72); transform-origin:right bottom; right:-40px; bottom:-40px; } .visual-foot { left:22px; right:22px; bottom:18px; font-size:8px; } .panel-top { padding:22px 22px 0; } .portal-form-wrap { width:calc(100% - 44px); padding:35px 0 70px; } .portal-form-wrap h2 { font-size:29px; } .panel-foot { left:22px; right:22px; font-size:8px; } .form-grid,.settings-form-grid { grid-template-columns:1fr; } .settings-card { padding:19px 17px; } .card-actions,.danger-card { display:block; } .card-actions button,.danger-card button { margin-top:15px; } .security-row { align-items:flex-start; flex-wrap:wrap; } .security-row button { margin-left:42px; } }

/* Admin console readability pass. */
.admin-shell .admin-head h1 { font-size:52px; }
.admin-shell .admin-head p { font-size:15px; }
.admin-shell .admin-card-head span,.admin-shell .admin-kicker { font-size:11px; }
.admin-shell .admin-card-head h2 { font-size:27px; }
.admin-shell .server-table th { font-size:11px; }
.admin-shell .server-table td { font-size:15px; }
.admin-shell .server-table td small { font-size:11px; }
.admin-shell .status-pill { padding:8px 10px; font-size:10px; }
.admin-shell .admin-button { padding:12px 15px; font-size:11px; }
.admin-shell .admin-form label { font-size:11px; }
.admin-shell .admin-form input,.admin-shell .admin-form select,.admin-shell .admin-form textarea { padding:14px 15px; font-size:14px; }
.admin-shell .admin-note { font-size:13px; }
.admin-shell .admin-user { font-size:11px; }
@media (max-width:760px) { .admin-shell .admin-head h1 { font-size:39px; } .admin-shell .admin-head p { font-size:13px; } .admin-shell .admin-card-head h2 { font-size:23px; } .admin-shell .server-table td { font-size:14px; } }

.admin-shell .admin-form label:has(input[name="slug"]),.admin-shell .admin-form label:has(input[name="art_key"]){display:none!important}
.admin-shell .admin-form label:has(input[name="display_name"]),.admin-shell .admin-form label:has(input[name="hostname"]),.admin-shell .admin-form label:has(input[name="db_host"]),.admin-shell .admin-form label:has(input[name="db_name"]),.admin-shell .admin-form label:has(input[name="db_user"]),.admin-shell .admin-form label:has(input[name="db_password"]),.admin-shell .admin-form label:has(select[name="status"]),.admin-shell .admin-form label:has(input[name="sort_order"]),.admin-shell .admin-form label:has(input[name="description"]){font-size:0!important}
.admin-shell .admin-form label:has(input[name="display_name"])::before{content:'Oyuncuların göreceği sunucu adı';font-size:11px}.admin-shell .admin-form label:has(input[name="hostname"])::before{content:'cPanel subdomain adresi';font-size:11px}.admin-shell .admin-form label:has(input[name="db_host"])::before{content:'Veritabanı sunucusu (genelde localhost)';font-size:11px}.admin-shell .admin-form label:has(input[name="db_name"])::before{content:'cPanel veritabanı adı';font-size:11px}.admin-shell .admin-form label:has(input[name="db_user"])::before{content:'cPanel veritabanı kullanıcı adı';font-size:11px}.admin-shell .admin-form label:has(input[name="db_password"])::before{content:'cPanel veritabanı şifresi';font-size:11px}.admin-shell .admin-form label:has(select[name="status"])::before{content:'Sunucu durumu';font-size:11px}.admin-shell .admin-form label:has(input[name="sort_order"])::before{content:'Sunucu listesindeki sırası';font-size:11px}.admin-shell .admin-form label:has(input[name="description"])::before{content:'Oyunculara gösterilecek kısa açıklama';font-size:11px}

.admin-shell{max-width:1380px;margin:0 auto;padding:34px 28px 70px}.admin-head{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:28px}.admin-head h1{margin:8px 0 0;font-size:52px;letter-spacing:-.07em}.admin-head p{max-width:650px;margin:0;color:#98b8bc;font-size:15px;line-height:1.7}.admin-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px}.admin-card{border:1px solid rgba(158,221,220,.18);background:linear-gradient(145deg,rgba(20,55,66,.82),rgba(7,24,34,.9));box-shadow:0 22px 70px rgba(0,0,0,.22)}.admin-card-head{display:flex;justify-content:space-between;padding:20px 22px;border-bottom:1px solid rgba(158,221,220,.14)}.admin-card-head span,.admin-kicker{color:#7bd9d7;font:700 11px 'DM Mono',monospace;letter-spacing:.14em;text-transform:uppercase}.admin-card-head h2{margin:7px 0 0;font-size:27px}.server-table{width:100%;border-collapse:collapse}.server-table th,.server-table td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(158,221,220,.1);font-size:15px}.server-table th{color:#739399;font:700 11px 'DM Mono',monospace;text-transform:uppercase}.server-table td small{display:block;margin-top:4px;color:#86a8ad;font:500 11px 'DM Mono',monospace}.status-pill{display:inline-flex;padding:8px 10px;color:#76d8af;border:1px solid rgba(90,202,164,.3);background:rgba(90,202,164,.08);font:700 10px 'DM Mono',monospace;text-transform:uppercase}.status-pill.maintenance{color:#e1bc68;border-color:rgba(225,188,104,.3)}.status-pill.hidden{color:#a7afb0;border-color:rgba(167,175,176,.24)}.admin-actions,.form-actions{display:flex;gap:7px}.admin-button{padding:12px 15px;color:#c6eeec;border:1px solid rgba(123,217,215,.3);background:rgba(123,217,215,.06);font:700 11px 'DM Mono',monospace;text-transform:uppercase}.admin-button:hover{color:#07181f;background:#7bd9d7}.admin-button.gold{color:#e4c36f;border-color:rgba(228,195,111,.32)}.admin-button.danger{color:#ef9b90;border-color:rgba(239,155,144,.28)}.admin-form{display:grid;gap:13px;padding:22px}.admin-form label{display:grid;gap:6px;color:#8aaeb2;font:700 11px 'DM Mono',monospace;text-transform:uppercase}.admin-form input,.admin-form select,.admin-form textarea{width:100%;padding:14px 15px;color:#e9fbfa;border:1px solid rgba(158,221,220,.18);outline:0;background:rgba(5,19,27,.6);font:500 14px Manrope,sans-serif}.admin-form textarea{min-height:76px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.admin-note{margin:0 22px 22px;padding:12px;color:#a8c6c8;border-left:2px solid #e4c36f;font-size:13px;line-height:1.6}.admin-user{color:#91b4b8;font:500 11px 'DM Mono',monospace}.toast-admin{position:fixed;right:25px;bottom:25px;max-width:360px;padding:13px 15px;opacity:0;color:#e9fbfa;border:1px solid rgba(123,217,215,.35);background:#0d2a35;transition:.2s}.toast-admin.show{opacity:1}@media(max-width:900px){.admin-layout{grid-template-columns:1fr}.admin-head{display:block}.server-table{min-width:760px}.admin-card:first-child{overflow:auto}}@media(max-width:760px){.admin-head h1{font-size:39px}.admin-head p{font-size:13px}.admin-card-head h2{font-size:23px}.server-table td{font-size:14px}}