:root { --ink:#172235; --muted:#65718a; --line:#e5eaf2; --surface:#fff; --navy:#172b4d; --blue:#3164f5; --violet:#7355ea; --soft:#f6f8fc; --green:#078a5a; --bg:#f7f9fd; --topbar-bg:rgba(255,255,255,.84); --topbar-line:rgba(221,227,238,.9); --card-bg:rgba(255,255,255,.94); --card-line:rgba(224,230,240,.95); --card-shadow:0 12px 38px rgb(24 44 87 / 6%); --input-bg:#fff; --input-line:#d8dfeb; --glow-one:#dce8ff; --glow-two:#e8dcff; }
html { color-scheme: light; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); font:15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.shell { flex:1; }
.site-footer { padding:22px 20px 34px; text-align:center; }
.site-footer p { margin:0; color:#8a95a8; font-size:12px; letter-spacing:.01em; }
.site-footer .heart { display:inline-block; margin-left:6px; color:#e25d6a; font-size:11px; transform:translateY(-1px); }
.page-glow { position:fixed; z-index:-1; border-radius:999px; filter:blur(5px); pointer-events:none; }
.page-glow-one { width:420px; height:420px; top:-260px; left:12%; background:var(--glow-one); opacity:.8; }
.page-glow-two { width:360px; height:360px; top:120px; right:-180px; background:var(--glow-two); opacity:.58; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px, calc((100vw - 1120px) / 2)); background:var(--topbar-bg); border-bottom:1px solid var(--topbar-line); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; line-height:1.05; }
.brand-mark { display:grid; width:37px; height:37px; place-items:center; color:#fff; border-radius:12px; background:linear-gradient(135deg,var(--blue),var(--violet)); box-shadow:0 7px 16px rgb(73 89 211 / 24%); }
.brand-mark svg { width:21px; }
.brand strong { display:block; font-size:15px; letter-spacing:-.02em; }.brand small { display:block; margin-top:3px; color:#8893a8; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.account { display:flex; align-items:center; gap:10px; }.account-logout { display:flex; align-items:center; gap:10px; }.account-avatar { display:grid; width:32px; height:32px; place-items:center; border-radius:50%; background:#e4ebff; color:#3959bf; font-size:13px; font-weight:800; }.account-name { color:#44506a; font-size:14px; font-weight:600; }
.header-servers { min-height:36px; padding:0 13px; border:1px solid #d4def8; border-radius:9px; background:#eef2ff; color:#3553c9; font-size:13px; font-weight:750; text-decoration:none; display:inline-flex; align-items:center; }.header-servers:hover { border-color:#b7c6f3; background:#e4ebff; }.header-servers.current { border-color:#7187ef; background:#dce7ff; color:#2b46b8; }
.shell { width:min(1120px, calc(100% - 40px)); margin:0 auto; padding:58px 0 40px; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:9px; font-size:clamp(32px,4vw,44px); line-height:1.12; letter-spacing:-.045em; } h1 em { color:#4f58db; font-style:normal; } h2 { margin-bottom:3px; font-size:18px; letter-spacing:-.025em; } .muted,.section-heading p,.history-heading p { color:var(--muted); font-size:13px; }
.hero { display:flex; align-items:end; justify-content:space-between; gap:30px; }.hero > div:first-child > p { margin-bottom:0; color:var(--muted); font-size:16px; }.eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:12px; color:#53617c; font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.pulse-dot { width:7px; height:7px; border-radius:50%; background:#23b57d; box-shadow:0 0 0 4px #d8f5e8; }
.hero-badge { display:flex; align-items:center; gap:10px; min-width:220px; padding:12px 15px; border:1px solid #dde5fa; border-radius:14px; background:rgba(255,255,255,.75); box-shadow:0 8px 28px rgb(42 70 140 / 7%); }.hero-badge-icon { display:grid; width:28px; height:28px; place-items:center; border-radius:9px; background:#e2f8ee; color:#078a5a; font-weight:900; }.hero-badge strong,.hero-badge small { display:block; }.hero-badge strong { font-size:12px; }.hero-badge small { color:#748098; font-size:11px; }
.layout { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr); gap:22px; margin:32px 0 22px; }.card { padding:27px; border:1px solid var(--card-line); border-radius:18px; background:var(--card-bg); box-shadow:var(--card-shadow); }
.section-heading { display:flex; gap:12px; align-items:flex-start; margin-bottom:23px; }.section-heading p { margin-bottom:0; }.step-number { display:grid; width:29px; height:29px; flex:0 0 auto; place-items:center; border-radius:9px; background:#eaf0ff; color:#435cd1; font-size:11px; font-weight:800; }
.stack { display:flex; flex-direction:column; gap:17px; } label { display:flex; flex-direction:column; gap:7px; color:#36435d; font-size:13px; font-weight:700; } input,select { width:100%; min-height:45px; padding:10px 12px; border:1px solid var(--input-line); border-radius:10px; outline:none; color:var(--ink); font:inherit; background:var(--input-bg); transition:border-color .18s,box-shadow .18s; } input::placeholder { color:#9ba5b7; } input:focus,select:focus { border-color:#7187ef; box-shadow:0 0 0 4px rgb(71 100 234 / 12%); }
.file-field { position:relative; display:flex; flex-direction:row; align-items:center; gap:10px; min-height:66px; padding:11px; border:1px dashed #b7c4e7; border-radius:11px; background:#f8faff; cursor:pointer; transition:.18s; }.file-field:hover { border-color:#6d85eb; background:#f4f7ff; }.file-field input { position:absolute; inset:0; opacity:0; cursor:pointer; }.file-field-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:9px; background:#e5edff; color:#4c64db; font-size:19px; }.file-field strong,.file-field small { display:block; }.file-field strong { font-size:12px; }.file-field small { color:var(--muted); font-size:11px; font-weight:500; }.form-divider { display:flex; align-items:center; gap:10px; color:#98a3b6; font-size:11px; }.form-divider::before,.form-divider::after { height:1px; flex:1; background:#edf0f5; content:""; }.domain-status { min-height:20px; margin:-6px 0 0; font-size:12px; }
button { border:0; font:inherit; cursor:pointer; }.button-primary { display:flex; min-height:47px; align-items:center; justify-content:center; gap:10px; border-radius:10px; background:linear-gradient(135deg,#3d65ef,#604ce5); color:#fff; font-size:14px; font-weight:750; box-shadow:0 10px 19px rgb(69 83 213 / 20%); transition:transform .18s,box-shadow .18s; }.button-primary:hover { box-shadow:0 13px 25px rgb(69 83 213 / 28%); transform:translateY(-1px); }.button-primary:disabled { cursor:wait; opacity:.7; transform:none; box-shadow:none; }.button-primary span { font-size:19px; line-height:0; }
.preview-column { display:flex; flex-direction:column; gap:16px; }.preview { padding-bottom:21px; }.file-preview { overflow:hidden; border:1px solid #e0e6f1; border-radius:12px; background:#fbfcff; }.file-preview-top { display:flex; align-items:center; gap:9px; padding:13px; border-bottom:1px solid #e9edf5; }.file-preview-top strong { overflow:hidden; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.html-icon { padding:3px 5px; border-radius:4px; background:#fceae6; color:#c95435; font-size:8px; font-weight:900; letter-spacing:.03em; }.preview pre { overflow-x:auto; margin:0; padding:16px 14px; color:#43516d; font:11px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; }.note { display:flex; gap:7px; margin:14px 0 0; color:#7c8799; font-size:11px; }.note span { display:grid; width:15px; height:15px; flex:0 0 auto; place-items:center; border-radius:50%; background:#edf0f6; color:#71809a; font-size:10px; font-weight:800; }
.help-card { display:flex; gap:11px; padding:15px 17px; border-radius:15px; background:#eef3ff; color:#41507c; }.help-icon { display:grid; width:23px; height:23px; flex:0 0 auto; place-items:center; border-radius:50%; background:#dce7ff; color:#4b61c4; font-weight:800; }.help-card strong { display:block; margin-bottom:2px; color:#344476; font-size:12px; }.help-card p { margin:0; font-size:11px; line-height:1.5; }
.download-white-card { display:flex; width:100%; gap:12px; align-items:flex-start; padding:15px 17px; border:1px solid #e1e7f2; border-radius:15px; background:#f4f6fb; color:#8a95a8; text-align:left; transition:border-color .2s,background .2s,color .2s,box-shadow .2s; }
.download-white-icon { display:grid; width:36px; height:36px; flex:0 0 auto; place-items:center; border-radius:11px; background:#e8ecf4; color:#9aa5b8; font-size:18px; font-weight:800; line-height:1; }
.download-white-card strong,.download-white-card small { display:block; }
.download-white-card strong { margin-bottom:2px; font-size:13px; }
.download-white-card small { font-size:11px; font-weight:500; line-height:1.45; }
.download-white-card:disabled { cursor:default; }
.download-white-card.ready { cursor:pointer; border-color:#8ad7b3; background:#e7f9ef; color:#0b6b48; box-shadow:0 0 0 4px rgb(7 138 90 / 12%),0 8px 20px rgb(35 181 125 / 18%); animation:download-glow 1.8s ease-in-out infinite; }
.download-white-card.ready .download-white-icon { background:#c8f0db; color:#078a5a; }
.download-white-card.ready:hover { background:#d8f6e6; }
.download-white-card.busy { cursor:wait; animation:none; border-color:#b7c6f3; background:#eef2ff; color:#3553c9; box-shadow:none; }
.download-white-card.busy .download-white-icon { background:#dce7ff; color:#3553c9; }
.white-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.open-white-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.open-white-link { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid #e1e7f2; border-radius:12px; background:#f4f6fb; color:#8a95a8; text-decoration:none; }
.open-white-link.ready { border-color:#8ad7b3; background:#e7f9ef; color:#0b6b48; box-shadow:0 0 0 4px rgb(7 138 90 / 12%),0 8px 20px rgb(35 181 125 / 18%); animation:download-glow 1.8s ease-in-out infinite; }
.open-white-link.ready:hover { background:#d8f6e6; }
.open-white-link-icon { display:grid; width:28px; height:28px; flex:0 0 auto; place-items:center; border-radius:9px; background:#e8ecf4; color:#9aa5b8; font-size:14px; font-weight:800; }
.open-white-link.ready .open-white-link-icon { background:#c8f0db; color:#078a5a; }
.open-white-link strong,.open-white-link small { display:block; }
.open-white-link strong { margin-bottom:2px; font-size:13px; }
.open-white-link small { font-size:11px; font-weight:500; line-height:1.45; }
.preview-white-link.ready { border-color:#9bb6f3; background:#eef3ff; color:#3553c9; box-shadow:0 0 0 4px rgb(71 100 234 / 12%),0 8px 20px rgb(69 83 213 / 14%); animation:upload-glow 1.8s ease-in-out infinite; }
.preview-white-link.ready:hover { background:#e4ebff; }
.preview-white-link.ready .open-white-link-icon { background:#dce7ff; color:#3553c9; }
.upload-white-card.ready { border-color:#9bb6f3; background:#eef3ff; color:#3553c9; box-shadow:0 0 0 4px rgb(71 100 234 / 12%),0 8px 20px rgb(69 83 213 / 14%); animation:upload-glow 1.8s ease-in-out infinite; }
.upload-white-card.ready .download-white-icon { background:#dce7ff; color:#3553c9; }
.upload-white-card.ready:hover { background:#e4ebff; }
@keyframes download-glow {
  0%,100% { box-shadow:0 0 0 4px rgb(7 138 90 / 10%),0 8px 18px rgb(35 181 125 / 14%); }
  50% { box-shadow:0 0 0 6px rgb(7 138 90 / 20%),0 10px 24px rgb(35 181 125 / 28%); }
}
@keyframes upload-glow {
  0%,100% { box-shadow:0 0 0 4px rgb(71 100 234 / 10%),0 8px 18px rgb(69 83 213 / 12%); }
  50% { box-shadow:0 0 0 6px rgb(71 100 234 / 20%),0 10px 24px rgb(69 83 213 / 22%); }
}
.achievement-card { position:relative; overflow:hidden; padding:20px; border:1px solid #293b72; border-radius:17px; color:#f7f9ff; background:radial-gradient(circle at 96% 8%,#5973da 0,#31467e 28%,#17264f 66%,#112146 100%); box-shadow:0 14px 28px rgb(25 43 92 / 18%); }.achievement-card::after { position:absolute; right:-24px; bottom:-41px; width:125px; height:125px; border:20px solid rgb(160 181 255 / 10%); border-radius:50%; content:""; }.achievement-heading { position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.achievement-kicker { display:block; margin-bottom:3px; color:#aebcf5; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.achievement-heading h2 { margin:0; color:#fff; font-size:16px; }.achievement-avatar { display:grid; width:31px; height:31px; flex:0 0 auto; place-items:center; border:1px solid rgb(255 255 255 / 22%); border-radius:10px; background:rgb(255 255 255 / 12%); color:#fff; font-size:13px; font-weight:800; }.achievement-total { position:relative; z-index:1; display:flex; align-items:baseline; gap:8px; margin:14px 0 10px; }.achievement-total strong { color:#fff; font-size:30px; line-height:1; letter-spacing:-.05em; }.achievement-total span { color:#c4cef7; font-size:11px; font-weight:600; }.achievement-progress-copy { position:relative; z-index:1; display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; color:#c8d2fa; font-size:10px; font-weight:600; }.achievement-progress { position:relative; z-index:1; display:block; width:100%; height:7px; overflow:hidden; border:0; border-radius:999px; background:#0c1837; }.achievement-progress::-webkit-progress-bar { border-radius:999px; background:#0c1837; }.achievement-progress::-webkit-progress-value { border-radius:999px; background:linear-gradient(90deg,#7f9dff,#d0a6ff); box-shadow:0 0 10px #93a9ff; }.achievement-progress::-moz-progress-bar { border-radius:999px; background:linear-gradient(90deg,#7f9dff,#d0a6ff); }.achievement-badges { position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-top:17px; }.achievement-badge { min-height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border:1px solid rgb(255 255 255 / 9%); border-radius:10px; background:rgb(7 18 48 / 28%); color:#7180ad; text-align:center; transition:transform .2s,background .2s,border-color .2s; }.achievement-badge strong { font-size:12px; line-height:1; }.achievement-badge small { font-size:8px; font-weight:700; line-height:1.25; }.badge-medal { display:block; margin-bottom:2px; color:#6b7aa7; font-size:11px; line-height:1; }.badge-question { display:grid; width:24px; height:24px; place-items:center; border:1px solid rgb(194 208 255 / 20%); border-radius:50%; color:#8594c3; font-size:14px; font-weight:900; }.achievement-badge.earned { border-color:rgb(153 180 255 / 35%); background:rgb(89 115 218 / 25%); color:#eff3ff; }.achievement-badge.earned .badge-medal { color:#f2cf80; }.achievement-badge.current { border-color:#bdcaff; background:linear-gradient(135deg,rgb(113 139 248 / 65%),rgb(145 102 228 / 55%)); box-shadow:0 0 0 2px rgb(198 210 255 / 9%),0 6px 14px rgb(6 11 34 / 22%); transform:translateY(-2px); }.achievement-badge.current .badge-medal { color:#fff4b4; }.achievement-badge.current .badge-question { border-color:rgb(255 255 255 / 45%); color:#fff; background:rgb(255 255 255 / 10%); }
.alert { margin:22px 0 -10px; padding:12px 14px; border-radius:11px; font-size:13px; }.warning { border:1px solid #f6d999; background:#fff9e9; color:#825d0a; }.success { border:1px solid #b7eccf; background:#effcf4; color:#087447; }.error { border:1px solid #f6c4c1; background:#fff2f1; color:#b03b35; }
.history { padding:0; overflow:hidden; }.history-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 27px 12px; }.history-heading p { margin:4px 0 0; }.history-count { padding:5px 9px; border-radius:999px; background:#f0f3f8; color:#718096; font-size:11px; font-weight:700; }.history-toolbar { padding:0 27px 14px; }.history-search { position:relative; display:block; max-width:320px; }.history-search-icon { position:absolute; top:50%; left:12px; color:#9aa5b8; font-size:14px; transform:translateY(-50%); pointer-events:none; }.history-search input { width:100%; min-height:40px; padding:8px 12px 8px 34px; border:1px solid #d8dfeb; border-radius:10px; outline:none; color:var(--ink); font:inherit; background:#fff; }.history-search input:focus { border-color:#7187ef; box-shadow:0 0 0 4px rgb(71 100 234 / 12%); }.table-wrap { overflow-x:auto; } table { width:100%; min-width:700px; border-collapse:collapse; } th,td { padding:13px 20px; border-top:1px solid #edf0f5; text-align:left; white-space:nowrap; } th { color:#8b96a9; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; } td { color:#4b5870; font-size:12px; } td:nth-child(4),td:nth-child(5) { color:#344056; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; }.history-empty { color:#8b96a9 !important; font-family:inherit !important; text-align:center !important; white-space:normal !important; }.status { display:inline-flex; padding:4px 8px; border-radius:999px; font-size:10px; font-weight:800; }.status.success { background:#e7f9ef; color:#078a5a; }.status.error { background:#fff0ef; color:#c1433a; }.history-details { max-width:280px; margin-top:6px; color:#8b96a9; font-size:11px; font-weight:500; line-height:1.35; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }.history-pagination { display:flex; align-items:center; justify-content:center; gap:14px; padding:14px 20px 18px; border-top:1px solid #edf0f5; }.page-btn { min-height:34px; padding:0 12px; border:1px solid #d8dfeb; border-radius:8px; background:#fff; color:#44506a; font-size:12px; font-weight:700; }.page-btn:hover:not(:disabled) { border-color:#aebae0; background:#f7f9ff; }.page-btn:disabled { cursor:default; opacity:.45; }.page-info { color:#718096; font-size:12px; font-weight:700; }
.link { padding:7px 9px; border-radius:7px; background:transparent; color:#5b6eae; font-size:12px; font-weight:700; }.link:hover { background:#eef2ff; }
.theme-toggle { width:36px; height:36px; display:grid; place-items:center; padding:0; border:1px solid #d4def8; border-radius:9px; background:#eef2ff; color:#3553c9; }
.theme-toggle:hover { border-color:#b7c6f3; background:#e4ebff; }
.theme-toggle svg { width:18px; height:18px; }
.theme-toggle .theme-icon-sun { display:none; }
html[data-theme="dark"] .theme-toggle .theme-icon-moon { display:none; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { display:block; }
.servers-dialog { width:min(520px, calc(100% - 32px)); padding:24px; border:1px solid var(--card-line); border-radius:18px; background:var(--surface); box-shadow:0 18px 50px rgb(24 44 87 / 16%); }
.servers-dialog::backdrop { background:rgb(23 34 53 / 38%); }
.servers-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.servers-dialog-head h2 { margin:0; }
.servers-dialog-head p { margin:4px 0 0; color:var(--muted); font-size:13px; font-weight:500; }
.servers-dialog-status { margin:0 0 12px; font-size:12px; }
.servers-dialog-status.error { color:#b03b35; }
.servers-dialog-status.success { color:#087447; }
.servers-list { display:flex; flex-direction:column; gap:8px; max-height:240px; overflow:auto; margin-bottom:18px; }
.servers-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid #edf0f5; border-radius:10px; background:#fbfcff; }
.servers-row strong,.servers-row small { display:block; }
.servers-row strong { font-size:13px; }
.servers-row small { color:var(--muted); font-size:11px; font-weight:600; }
.servers-row .link { color:#c1433a; }
.servers-row .link:hover { background:#fff0ef; }
.servers-empty { padding:18px 8px; color:var(--muted); font-size:13px; text-align:center; }
.servers-add-form { margin-top:4px; }
.back-link { display:inline-block; margin-bottom:10px; color:#5b6eae; font-size:13px; font-weight:700; text-decoration:none; }
.back-link:hover { text-decoration:underline; }
.step-hero { margin-bottom:22px; }
.step-hero > div:first-child > p { max-width:720px; }
.step-builder-card { max-width:780px; }
.step-mode { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.mode-option { flex-direction:row; align-items:flex-start; gap:10px; min-height:auto; padding:14px; border:1px solid #d8dfeb; border-radius:12px; background:#fbfcff; cursor:pointer; }
.mode-option input { width:auto; min-height:0; margin-top:3px; }
.mode-option span { display:flex; flex-direction:column; gap:3px; }
.mode-option strong { font-size:14px; }
.mode-option small { color:var(--muted); font-size:12px; font-weight:500; }
.mode-option:has(input:checked) { border-color:#7187ef; background:#eef2ff; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.step-fieldset { margin:0; padding:16px; border:1px solid #e0e6f1; border-radius:12px; }
.step-fieldset legend { padding:0 6px; font-size:13px; font-weight:800; }
.step-fieldset small { display:block; margin-top:10px; color:var(--muted); font-size:12px; font-weight:500; }
label small { color:var(--muted); font-size:12px; font-weight:500; }
.check { flex-direction:row; align-items:center; gap:10px; font-weight:600; }
.check input { width:auto; min-height:0; }
.login-layout { display:grid; min-height:calc(100vh - 210px); grid-template-columns:1.15fr .85fr; align-items:center; gap:80px; }.login-intro { max-width:560px; }.login-intro > p { max-width:460px; color:var(--muted); font-size:17px; }.login-points { display:grid; gap:11px; margin-top:26px; color:#536079; font-size:13px; }.login-points b { display:inline-grid; width:18px; height:18px; place-items:center; margin-right:7px; border-radius:50%; background:#e1f8ed; color:#078a5a; font-size:11px; }.login { max-width:410px; justify-self:end; padding:31px; }.login h2 { margin:13px 0 5px; font-size:24px; }.login .muted { margin-bottom:25px; }.card-icon { display:grid; width:44px; height:44px; place-items:center; border-radius:13px; background:linear-gradient(135deg,#e6edff,#efeaff); color:#5362d6; }.card-icon svg { width:22px; }.login .button-primary { margin-top:4px; }
@media (max-width:780px) { .shell { width:min(100% - 28px,1120px); padding-top:35px; }.topbar { height:65px; padding:0 16px; }.account-name { display:none; }.hero,.history-heading { align-items:flex-start; flex-direction:column; }.hero-badge { width:100%; }.layout,.login-layout,.form-grid,.step-mode { grid-template-columns:1fr; gap:18px; }.login-layout { min-height:auto; }.login { width:100%; max-width:none; justify-self:stretch; }.login-intro { margin-top:20px; }.card { padding:21px; }.history-heading,.history-toolbar { padding-left:21px; padding-right:21px; } .history-search { max-width:none; } th,td { padding:12px 15px; } .white-actions,.open-white-links { grid-template-columns:1fr; } }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink:#e8eefc;
  --muted:#93a0b8;
  --line:#2c364c;
  --surface:#1a2233;
  --soft:#151c2b;
  --bg:#0f1522;
  --topbar-bg:rgba(15,21,34,.9);
  --topbar-line:rgba(44,54,76,.95);
  --card-bg:rgba(22,30,46,.94);
  --card-line:rgba(52,64,90,.9);
  --card-shadow:0 16px 40px rgb(0 0 0 / 32%);
  --input-bg:#12192a;
  --input-line:#3a4763;
  --glow-one:#1a2c58;
  --glow-two:#3a2470;
}
html[data-theme="dark"] .site-footer p { color:#6f7b91; }
html[data-theme="dark"] .brand small { color:#8b96ab; }
html[data-theme="dark"] .account-avatar { background:#24345c; color:#c5d2ff; }
html[data-theme="dark"] .account-name { color:#c5cee0; }
html[data-theme="dark"] .header-servers,
html[data-theme="dark"] .theme-toggle { border-color:#3a4a6e; background:#1e2a45; color:#b7c6f3; }
html[data-theme="dark"] .header-servers:hover,
html[data-theme="dark"] .theme-toggle:hover { border-color:#5b6fa3; background:#26355a; }
html[data-theme="dark"] .header-servers.current { border-color:#7b91ee; background:#2a3d6e; color:#d7e0ff; }
html[data-theme="dark"] h1 em { color:#9aa4ff; }
html[data-theme="dark"] .eyebrow { color:#9aa6bd; }
html[data-theme="dark"] .pulse-dot { box-shadow:0 0 0 4px rgb(35 181 125 / 22%); }
html[data-theme="dark"] .hero-badge { border-color:#33415f; background:rgba(22,30,46,.78); box-shadow:0 8px 28px rgb(0 0 0 / 22%); }
html[data-theme="dark"] .hero-badge-icon { background:#1a3b30; color:#3dd49a; }
html[data-theme="dark"] .hero-badge small { color:#8b96ab; }
html[data-theme="dark"] .step-number { background:#24345c; color:#c5d2ff; }
html[data-theme="dark"] label { color:#c5cee0; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] .history-search-icon { color:#6f7b91; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .history-search input:focus { box-shadow:0 0 0 4px rgb(123 145 238 / 22%); }
html[data-theme="dark"] select option { background:#12192a; color:#e8eefc; }
html[data-theme="dark"] .file-field { border-color:#3a4a6e; background:#151d2e; }
html[data-theme="dark"] .file-field:hover { border-color:#7b91ee; background:#1a2438; }
html[data-theme="dark"] .file-field-icon { background:#24345c; color:#c5d2ff; }
html[data-theme="dark"] .form-divider { color:#6f7b91; }
html[data-theme="dark"] .form-divider::before,
html[data-theme="dark"] .form-divider::after { background:#2c364c; }
html[data-theme="dark"] .file-preview { border-color:#33415f; background:#151d2e; }
html[data-theme="dark"] .file-preview-top { border-bottom-color:#2c364c; }
html[data-theme="dark"] .preview pre { color:#c5cee0; }
html[data-theme="dark"] .html-icon { background:#3a241f; color:#f0a090; }
html[data-theme="dark"] .note { color:#8b96ab; }
html[data-theme="dark"] .note span { background:#243045; color:#9aa6bd; }
html[data-theme="dark"] .help-card { background:#1c2744; color:#c5d2ff; }
html[data-theme="dark"] .help-icon { background:#24345c; color:#c5d2ff; }
html[data-theme="dark"] .help-card strong { color:#e8eefc; }
html[data-theme="dark"] .download-white-card,
html[data-theme="dark"] .open-white-link { border-color:#33415f; background:#151d2e; color:#8b96ab; }
html[data-theme="dark"] .download-white-icon,
html[data-theme="dark"] .open-white-link-icon { background:#243045; color:#8b96ab; }
html[data-theme="dark"] .download-white-card.ready,
html[data-theme="dark"] .open-white-link.ready { border-color:#2f8a62; background:#143328; color:#8ee7bf; }
html[data-theme="dark"] .download-white-card.ready .download-white-icon,
html[data-theme="dark"] .open-white-link.ready .open-white-link-icon { background:#1a4a38; color:#3dd49a; }
html[data-theme="dark"] .download-white-card.ready:hover,
html[data-theme="dark"] .open-white-link.ready:hover { background:#174033; }
html[data-theme="dark"] .download-white-card.busy { border-color:#3a4a6e; background:#1e2a45; color:#b7c6f3; }
html[data-theme="dark"] .download-white-card.busy .download-white-icon { background:#24345c; color:#b7c6f3; }
html[data-theme="dark"] .preview-white-link.ready,
html[data-theme="dark"] .upload-white-card.ready { border-color:#5b6fa3; background:#1e2a45; color:#c5d2ff; }
html[data-theme="dark"] .preview-white-link.ready:hover,
html[data-theme="dark"] .upload-white-card.ready:hover { background:#26355a; }
html[data-theme="dark"] .preview-white-link.ready .open-white-link-icon,
html[data-theme="dark"] .upload-white-card.ready .download-white-icon { background:#24345c; color:#c5d2ff; }
html[data-theme="dark"] .achievement-card { box-shadow:0 16px 36px rgb(0 0 0 / 35%),0 0 0 1px rgb(153 180 255 / 18%); }
html[data-theme="dark"] .warning { border-color:#6d5420; background:#2a2314; color:#f0d48a; }
html[data-theme="dark"] .success { border-color:#2f8a62; background:#143328; color:#8ee7bf; }
html[data-theme="dark"] .error { border-color:#7a3a36; background:#2a1817; color:#f0a090; }
html[data-theme="dark"] .history-count { background:#243045; color:#9aa6bd; }
html[data-theme="dark"] .history-search input,
html[data-theme="dark"] .page-btn { border-color:var(--input-line); background:var(--input-bg); color:var(--ink); }
html[data-theme="dark"] th,
html[data-theme="dark"] td { border-top-color:#2c364c; }
html[data-theme="dark"] td { color:#c5cee0; }
html[data-theme="dark"] td:nth-child(4),
html[data-theme="dark"] td:nth-child(5) { color:#d7deee; }
html[data-theme="dark"] .history-empty,
html[data-theme="dark"] .history-details { color:#8b96ab !important; }
html[data-theme="dark"] .status.success { background:#143328; color:#8ee7bf; }
html[data-theme="dark"] .status.error { background:#2a1817; color:#f0a090; }
html[data-theme="dark"] .history-pagination { border-top-color:#2c364c; }
html[data-theme="dark"] .page-btn:hover:not(:disabled) { border-color:#5b6fa3; background:#1e2a45; }
html[data-theme="dark"] .link { color:#9eb0e8; }
html[data-theme="dark"] .link:hover { background:#1e2a45; }
html[data-theme="dark"] .back-link { color:#9eb0e8; }
html[data-theme="dark"] .servers-dialog { box-shadow:0 18px 50px rgb(0 0 0 / 45%); }
html[data-theme="dark"] .servers-dialog::backdrop { background:rgb(5 8 16 / 62%); }
html[data-theme="dark"] .servers-dialog-status.error { color:#f0a090; }
html[data-theme="dark"] .servers-dialog-status.success { color:#8ee7bf; }
html[data-theme="dark"] .servers-row { border-color:#2c364c; background:#151d2e; }
html[data-theme="dark"] .servers-row .link:hover { background:#2a1817; }
html[data-theme="dark"] .mode-option { border-color:#33415f; background:#151d2e; }
html[data-theme="dark"] .mode-option:has(input:checked) { border-color:#7b91ee; background:#1e2a45; }
html[data-theme="dark"] .step-fieldset { border-color:#33415f; }
html[data-theme="dark"] .login-points { color:#9aa6bd; }
html[data-theme="dark"] .login-points b { background:#1a3b30; color:#3dd49a; }
html[data-theme="dark"] .card-icon { background:linear-gradient(135deg,#24345c,#3a2470); color:#c5d2ff; }
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color:#e8eefc;
  caret-color:#e8eefc;
  box-shadow:0 0 0 1000px #12192a inset;
  transition:background-color 9999s ease-out;
}