
:root{color-scheme:dark;--bg:#0d1015;--surface:#161b23;--surface-2:#1d2430;--accent:#7c6cff;--accent-2:#6a59ff;--text:#e8eaf0;--muted:#9aa3b2;--border:#262e3b;--warn:#ffcf7a;--warn-bg:#3a2d12;--danger:#ff8391}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;-webkit-text-size-adjust:100%}
main{width:100%;max-width:440px;padding:32px 16px 16px}
main.wide{max-width:1040px}
.brand{display:flex;align-items:center;gap:10px;margin:0 0 20px;color:var(--text);font-weight:650;font-size:1.1rem;letter-spacing:-.01em}
.brand img{width:28px;height:28px;display:block}
.beta{display:inline-block;padding:1px 7px;border:1px solid var(--accent);border-radius:999px;color:#a99fff;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px}
.card+.card{margin-top:16px}
h1{font-size:1.35rem;line-height:1.3;margin:0 0 8px}
h2{font-size:1.05rem;margin:0 0 12px}
p{margin:0 0 16px;color:var(--muted)}
p strong{color:var(--text);word-break:break-word}
a{color:var(--accent)}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font:inherit;font-weight:600;text-align:center;text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2)}
.btn-danger{border-color:var(--danger);color:var(--danger)}
.btn-danger:hover{border-color:var(--danger);background:#2a1418}
.btn-danger.solid{background:var(--danger);color:#1a0b0e}
.btn-danger.solid:hover{background:#ff6b7c}
ul.bullets{margin:0 0 16px;padding-left:20px;color:var(--muted)}
ul.bullets li+li{margin-top:6px}
label.check{display:flex;gap:10px;align-items:flex-start;color:var(--text);font-size:.95rem;margin:0}
label.check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--danger)}
ul.places{list-style:none;padding:0;margin:0 0 16px}
ul.places li{padding:12px 0;border-bottom:1px solid var(--border)}
ul.places li:last-child{border-bottom:0}
ul.places .btn{margin-top:10px}
.place-name{font-weight:600}
.state{display:block;font-size:.9rem;color:var(--muted);margin-top:2px}
.state-done{color:#7ee2a8}
.state-warn{color:var(--warn)}
.btn.current{flex-direction:column;gap:2px;border-color:var(--accent)}
.btn.current .state{margin:0;font-weight:400}
.stack>*+*{margin-top:12px}
.stack label{margin-top:4px}
form{margin:0}
label{display:block;font-size:.9rem;color:var(--muted);margin:0 0 6px}
input[type=email],input[type=password]{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit}
.dev{margin-top:20px;padding-top:16px;border-top:1px dashed var(--border)}
.badge{display:inline-block;font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--warn-bg);color:var(--warn);margin-bottom:10px}
.note{font-size:.85rem;color:var(--muted);margin:10px 0 0}
.notice{border:1px solid var(--warn-bg);background:#221c10;color:var(--warn);border-radius:12px;padding:10px 12px;margin:0 0 16px;font-size:.92rem}
.error{color:var(--danger)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;color:var(--muted);word-break:break-all}
ul.links{list-style:none;padding:0;margin:0}
ul.links li+li{margin-top:10px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--border);vertical-align:top;white-space:nowrap}
td.wrap{white-space:normal;min-width:180px}
th{color:var(--muted);font-weight:600}
.muted{color:var(--muted)}
.status-active{color:#7ee2a8}.status-suspended{color:var(--danger)}.status-provisioning{color:var(--warn)}
footer{color:var(--muted);font-size:.8rem;padding:8px 16px 24px}
@media (min-width:600px){main{padding-top:64px}.card{padding:32px}}
