:root { color-scheme: dark; --bg:#091614; --panel:#10221f; --strong:#0b1a17; --line:#28453f; --ink:#edf6f3; --muted:#a7bbb5; --accent:#39c7b8; --danger:#ff9a9a; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:radial-gradient(circle at 20% 0,#123d36 0,transparent 34rem),var(--bg); color:var(--ink); } .topbar { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px clamp(20px,5vw,72px); border-bottom:1px solid var(--line); background:#091614e8; } .brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; } .brand img { width:44px; height:44px; object-fit:contain; } .brand span { display:grid; gap:3px; } .brand small,.eyebrow { color:var(--accent); font-weight:800; font-size:11px; letter-spacing:.09em; text-transform:uppercase; } .brand strong { font-size:20px; } .account-link { color:var(--accent); font-weight:700; text-decoration:none; } .workspace { width:min(1220px,calc(100% - 32px)); margin:0 auto; padding:32px 0 50px; } .hidden { display:none!important; } .panel { border:1px solid var(--line); border-radius:16px; padding:20px; background:#10221fee; box-shadow:0 16px 50px #0003; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:8px; font-size:clamp(28px,4vw,42px); } h2 { font-size:20px; } h3 { margin-bottom:14px; font-size:16px; } p { color:var(--muted); } .page-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; } .notice { min-height:24px; color:var(--muted); } .notice.error { color:var(--danger); } .summary { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0; } .summary article,.current { display:grid; gap:8px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#0d2420; } .summary span,.current span { color:var(--muted); font-size:13px; font-weight:700; } .summary strong { font-size:30px; } .layout { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.4fr); gap:18px; } label { display:grid; gap:7px; color:var(--muted); font-size:13px; font-weight:700; } input,select { min-height:43px; border:1px solid var(--line); border-radius:9px; padding:9px 11px; background:var(--strong); color:var(--ink); font:inherit; } .user-list { display:grid; gap:8px; margin-top:14px; max-height:600px; overflow:auto; } .user { border:1px solid var(--line); border-radius:11px; padding:12px; text-align:left; color:inherit; background:var(--strong); cursor:pointer; } .user:hover,.user.selected { border-color:var(--accent); background:#164137; } .user strong,.user span { display:block; } .user span { margin-top:3px; color:var(--muted); font-size:12px; } .detail-heading { display:flex; justify-content:space-between; gap:14px; margin-bottom:16px; } .detail-heading h2,.detail-heading p { margin-bottom:4px; } .status { height:max-content; padding:5px 9px; border:1px solid var(--line); border-radius:999px; color:var(--accent); font-size:12px; font-weight:800; } .form { display:grid; gap:14px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); } .grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .button { display:inline-flex; width:max-content; min-height:42px; align-items:center; justify-content:center; border:0; border-radius:9px; padding:9px 14px; background:var(--accent); color:#06201c; font:inherit; font-weight:850; text-decoration:none; cursor:pointer; } .secondary { background:transparent; border:1px solid var(--line); color:var(--ink); } .history { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); } .payment { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); } .payment:last-child { border-bottom:0; } .payment small { color:var(--muted); } .empty { min-height:300px; display:grid; place-content:center; text-align:center; } @media (max-width:760px) { .topbar { padding-inline:20px; } .account-link { font-size:13px; } .workspace { width:min(100% - 24px,1220px); padding-top:20px; } .page-heading,.layout { grid-template-columns:1fr; display:grid; } .summary { grid-template-columns:1fr; } .grid { grid-template-columns:1fr; } }