:root { --ink:#f3f5fa; --muted:#9fa8ba; --panel:rgba(25,27,35,.88); --line:rgba(255,255,255,.1); --accent:#8b75ff; --green:#6ee7b7; --yellow:#f5c76b; --red:#ff858f; background:#0e1016; color:var(--ink); font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,sans-serif; }
* { box-sizing:border-box } body { margin:0; min-height:100vh; background:radial-gradient(900px 480px at 17% -8%,#2a2355 0%,transparent 65%),radial-gradient(800px 520px at 100% 30%,#142943 0%,transparent 70%),#0e1016; } button,input,select { font:inherit } button { cursor:pointer; border:0; border-radius:10px; background:var(--accent); color:#fff; padding:10px 14px; font-weight:700; } button:hover { filter:brightness(1.1) } button.secondary { background:#292e3a } button.ghost { background:transparent; color:var(--muted) } .shell { max-width:1180px; margin:auto; padding:72px 28px; }.hero { max-width:720px; margin-bottom:38px }.brand { display:flex; align-items:center; gap:9px; font-size:19px; font-weight:800; letter-spacing:-.04em }.mark { color:var(--accent); font-size:26px }.badge,.state { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:5px 9px; font-size:12px; color:var(--muted) }.hero .badge { margin-top:28px }.hero h1 { font-size:clamp(38px,6vw,66px); letter-spacing:-.065em; line-height:.98; margin:16px 0 }.hero p { color:var(--muted); max-width:620px; line-height:1.55 }.panel { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:25px; box-shadow:0 18px 70px rgba(0,0,0,.2); margin:20px 0 }.panel-heading,.toolbar { display:flex; justify-content:space-between; gap:16px; align-items:flex-start }.eyebrow { margin:0 0 4px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.13em; color:#8b95aa }.panel h2,.toolbar h2 { margin:0; letter-spacing:-.035em; font-size:24px }.hint,.message { color:var(--muted); font-size:14px; line-height:1.45 }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:22px }.wide { grid-column:1/-1 } label { display:grid; gap:7px; font-size:13px; color:#cbd1df; font-weight:650 } input,select { width:100%; background:#171a22; border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:11px 12px; outline:none } input:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(139,117,255,.18) }.action-row { display:flex; align-items:center; gap:12px } details { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; line-height:1.6 } summary { cursor:pointer; color:#d9deeb; font-weight:700 } code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:#c5bbff }.toolbar { margin:0 0 22px }.toolbar-actions { display:flex; align-items:center; gap:8px }.operator { color:var(--muted); font-size:13px; padding-right:8px }.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px }.metric { border:1px solid var(--line); background:rgba(23,25,33,.75); border-radius:16px; padding:16px }.metric strong { display:block; font-size:27px; letter-spacing:-.04em }.metric span { color:var(--muted); font-size:12px }.warning { color:var(--yellow); border-color:rgba(245,199,107,.28) }.ok { color:var(--green); border-color:rgba(110,231,183,.28) }.bad { color:var(--red); border-color:rgba(255,133,143,.28) }.table-wrap { overflow:auto } table { width:100%; min-width:780px; border-collapse:collapse; margin-top:17px } th { text-align:left; font-size:11px; color:#8b95aa; text-transform:uppercase; letter-spacing:.08em; padding:10px 8px } td { border-top:1px solid var(--line); padding:13px 8px; font-size:13px } .tenant-id { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:#c7cfdd; font-size:11px }.subtle { color:var(--muted); font-size:12px }.row-action { padding:7px 9px; font-size:12px; background:#292e3a }.empty { color:var(--muted); padding:32px 0; text-align:center }.billing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:18px }.billing-grid div { border-left:2px solid #4d416f; padding-left:13px }.billing-grid h3 { margin:0 0 7px; font-size:15px }.billing-grid p { margin:0; color:var(--muted); line-height:1.5; font-size:13px } dialog { max-width:440px; width:calc(100% - 32px); background:#1b1e27; color:var(--ink); border:1px solid var(--line); border-radius:20px; padding:0; box-shadow:0 25px 100px rgba(0,0,0,.7) } dialog::backdrop { background:rgba(0,0,0,.65); backdrop-filter:blur(4px) } dialog form { display:grid; gap:16px; padding:25px } dialog header,dialog footer { display:flex; justify-content:space-between; align-items:center; gap:12px } .close { font-size:28px; line-height:1; padding:0; background:transparent; color:var(--muted) }.warning-copy { margin:0; color:var(--yellow); font-size:13px; line-height:1.4 } dialog footer { justify-content:flex-end }.message.error { color:var(--red) }.message.success { color:var(--green) } @media(max-width:720px){.shell{padding:40px 16px}.form-grid,.metrics,.billing-grid{grid-template-columns:1fr}.toolbar,.toolbar-actions{align-items:flex-start;flex-direction:column}.panel{padding:19px}.hero h1{font-size:42px}}