:root { --ink:#172235; --muted:#65718a; --line:#e5eaf2; --surface:#fff; --navy:#172b4d; --blue:#3164f5; --violet:#7355ea; --soft:#f6f8fc; --green:#078a5a; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; display:flex; flex-direction:column; background:#f7f9fd; 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:#dce8ff; opacity:.8; }
.page-glow-two { width:360px; height:360px; top:120px; right:-180px; background:#e8dcff; opacity:.58; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px, calc((100vw - 1120px) / 2)); background:rgba(255,255,255,.84); border-bottom:1px solid rgba(221,227,238,.9); 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-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; }
.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 rgba(224,230,240,.95); border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 12px 38px rgb(24 44 87 / 6%); }
.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 #d8dfeb; border-radius:10px; outline:none; color:var(--ink); font:inherit; background:#fff; 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; }
.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 18px; }.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; }.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; }.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; }
.link { padding:7px 9px; border-radius:7px; background:transparent; color:#5b6eae; font-size:12px; font-weight:700; }.link:hover { background:#eef2ff; }
.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 { 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 { padding:20px 21px 15px; gap:8px; } th,td { padding:12px 15px; } }