:root { --ink:#0e0f12; --panel:#171a20; --line:#2d333e; --text:#f1eee8; --muted:#a8adb7; --blue:#5b8cff; --green:#6fcf97; --orange:#f2a65a; --red:#ef6b63; }
* { box-sizing:border-box; } body { margin:0; background:var(--ink); color:var(--text); font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
button,input { font:inherit; } button { cursor:pointer; } .loading { min-height:100vh; display:grid; place-content:center; text-align:center; color:var(--muted); gap:10px; } .mark { color:var(--blue); font-size:40px; }
.shell { min-height:100vh; display:grid; grid-template-columns:238px 1fr; } aside { background:#121419; border-right:1px solid var(--line); padding:24px 14px; display:flex; flex-direction:column; gap:26px; } .brand { font-weight:750; letter-spacing:.14em; font-size:13px; color:#fff; } .brand small { display:block; margin-top:4px; color:var(--muted); letter-spacing:.12em; font-size:9px; } .nav-label { color:#737b88; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; padding:0 10px; } .nav-item { color:var(--muted); padding:10px; border-radius:7px; } .nav-item.active { background:#202633; color:#fff; border:1px solid #303a50; } .account { margin-top:auto; border-top:1px solid var(--line); padding:16px 10px 0; color:var(--muted); overflow-wrap:anywhere; } .account strong { display:block; color:#fff; margin-bottom:2px; font-size:12px; }
.content { padding:38px clamp(22px,4vw,60px); max-width:1500px; width:100%; margin:auto; } header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:34px; } h1 { margin:0; font-size:27px; letter-spacing:-.035em; } .sub { color:var(--muted); margin:7px 0 0; } .badge { border:1px solid #2f5142; color:var(--green); background:#14251d; font-size:11px; padding:6px 9px; border-radius:99px; white-space:nowrap; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; } .card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:19px; } .eyebrow { color:#8892a2; font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; } .value { font-size:32px; letter-spacing:-.045em; margin:9px 0 4px; } .detail { color:var(--muted); font-size:12px; }
.section { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:39px 0 14px; } h2 { margin:0; font-size:16px; } .primary, .secondary { padding:10px 14px; border-radius:7px; border:1px solid transparent; font-weight:650; } .primary { background:var(--blue); color:#fff; } .secondary { background:transparent; color:#e5e9f4; border-color:#3c4350; }
.table { width:100%; border-collapse:collapse; } .table th { text-align:left; color:#8892a2; text-transform:uppercase; letter-spacing:.1em; font-size:10px; padding:11px 0; border-bottom:1px solid var(--line); } .table td { padding:14px 0; border-bottom:1px solid #262b34; } .status { color:var(--green); font-size:12px; } .empty { color:var(--muted); padding:28px 0; }
dialog { background:#181b22; border:1px solid #3a4250; color:var(--text); border-radius:10px; padding:0; width:min(460px,calc(100vw - 34px)); box-shadow:0 30px 100px #000a; } dialog::backdrop { background:#0009; } .modal { padding:24px; } .modal h2 { margin-bottom:6px; } .modal p { color:var(--muted); margin:0 0 20px; } label { display:grid; gap:7px; color:#c5cad3; font-size:12px; margin:14px 0; } input { background:#101217; border:1px solid #3b4351; color:#fff; border-radius:6px; padding:11px; } .actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; } .notice { margin:0 0 18px; padding:10px 12px; border-radius:7px; background:#222b3d; color:#dce6ff; font-size:12px; } .error { background:#3a2022; color:#ffd8d8; } .hidden { display:none; }
@media(max-width:760px) { .shell { grid-template-columns:1fr; } aside { display:none; } .content { padding:26px 18px; } header { align-items:flex-start; flex-direction:column; } .grid { grid-template-columns:1fr; } .section { align-items:flex-start; flex-direction:column; } }
.setup { margin-top:28px; } .section.compact { margin:0 0 18px; } .steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; } .step { min-height:94px; display:grid; align-content:start; gap:7px; padding:14px; border:1px solid #343b48; border-radius:8px; color:var(--muted); } .step b { color:#dce2ee; font-size:12px; } .step span { font-size:12px; } .step.done { border-color:#2e5b47; background:#14251d; } .inline-form { display:grid; grid-template-columns:minmax(180px,1fr) minmax(140px,.55fr) auto; align-items:end; gap:12px; margin-top:18px; }
.mapping-grid { display:grid; gap:12px; margin-top:18px; } .mapping-grid .inline-form { margin-top:0; }
@media(max-width:760px) { .steps,.inline-form { grid-template-columns:1fr; } }