:root{font-family:Inter,system-ui,sans-serif;color:#ecf1f8;background:#050c16;color-scheme:dark;font-size:16px;font-synthesis:none;--gold:#efb854;--blue:#78b7ff;--line:#263b54;--muted:#a6b6ca}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 80% 0,#14294180,transparent 65%);min-height:100vh}
header{min-height:88px;background:#060e19ed;border-bottom:1px solid #b386424d;padding:18px max(24px,calc((100vw - 1200px)/2));display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#edf2fa;font-weight:750;letter-spacing:.16em;font-size:1rem}
.mark{width:40px;height:40px;color:var(--gold);display:grid;place-items:center}
.mark svg{width:100%;height:100%}
.subbrand{letter-spacing:0;font-weight:450;color:var(--muted);border-left:1px solid var(--line);padding-left:16px;margin-left:8px}
main{max-width:1200px;padding:32px 24px;margin:auto}
h1{font-size:2.65rem;letter-spacing:-.035em;line-height:1.12;margin:6px 0 14px;font-weight:650}
h2{font-size:1.3rem;margin:0 0 8px}
.eyebrow{font-size:.75rem;letter-spacing:.2em;color:var(--gold);font-weight:650;margin:0 0 12px}
.muted{color:var(--muted);line-height:1.6}
.heading,.actions{display:flex;justify-content:space-between;align-items:center;gap:12px}
.heading{min-height:400px;padding:34px;border:1px solid #bc914b60;border-radius:16px;background:linear-gradient(90deg,#07101af5 0%,#07101ab5 40%,#07101a18 100%),url('assets/nordic-fjord.png') right bottom/auto 100% no-repeat #07101a;position:relative;overflow:hidden}
.heading:after{content:'';position:absolute;inset:auto 34px 0;height:2px;background:linear-gradient(90deg,var(--gold),transparent);pointer-events:none}
.heading .actions{align-self:flex-end}
.heading .muted{max-width:330px;margin:0;font-size:.9rem}
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0}
.summary>div{background:linear-gradient(135deg,#13253b,#0c1829);border:1px solid #35547b;border-radius:12px;padding:24px;box-shadow:0 10px 28px #0002}
.summary>div:first-child{border-color:#9b763e}
.summary strong{display:block;font-size:2.1rem;font-weight:600;letter-spacing:-.025em;margin:12px 0 4px}
.summary small{color:#b6c7dd;font-size:.875rem}
.billing-link{color:var(--gold);text-underline-offset:3px;font-weight:600}
.billing-link:hover{color:#ffda93}
.link-hint{font-size:.75rem}
.note{font-size:.8rem;margin-bottom:28px;border-left:2px solid #846633;padding-left:14px}
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.app{background:linear-gradient(155deg,#101e30,#0a1422);border:1px solid var(--line);border-top:2px solid #447abb;border-radius:12px;padding:24px;min-width:0}
.app .spend{font-size:2.1rem;font-weight:600;letter-spacing:-.04em;margin:22px 0 8px}
.badge{display:inline-block;border-radius:5px;padding:5px 8px;font-size:.75rem;background:#16314b;color:#a2ceff;border:1px solid #31597e}
.badge.warning{background:#342814;color:#ffd98a;border-color:#72552a}
.badge.danger{background:#3c1c26;color:#ffb3bd;border-color:#804351}
label{display:block;font-size:.875rem;font-weight:600;margin:18px 0 8px}
input,textarea,select{font:inherit;width:100%;margin-top:7px;border:1px solid #3c526f;border-radius:7px;padding:11px;background:#07111f;color:#edf2fa}
input::placeholder{color:#90a1b8}
button{font:inherit;font-size:.875rem;font-weight:600;border:1px solid #42648a;border-radius:7px;background:#10263d;color:#dceaff;padding:11px 15px;cursor:pointer;transition:background .15s,border-color .15s}
button:hover{background:#1b3a5b;border-color:#78b7ff}
button:disabled{opacity:.6;cursor:wait}
.primary{background:linear-gradient(135deg,#f5ca79,#dca347);color:#121820;border-color:#edbb65}
.primary:hover{background:#ffda93;border-color:#ffda93}
input:focus-visible,button:focus-visible,summary:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.login{max-width:460px;margin:40px 0;padding:34px;background:#091322ee;border:1px solid #b68b496b;border-radius:14px;box-shadow:0 20px 80px #0006}
.login h1{font-size:2.5rem}
.login button{width:100%;margin-top:18px}
body:has(.login:not([hidden])){background:linear-gradient(90deg,#040c16b0,#040c1620),url('assets/nordic-fjord.png') center center/100% auto no-repeat fixed #050c16}
body:has(.login:not([hidden])) main{min-height:calc(100vh - 166px)}
.check{display:flex;align-items:center;gap:10px}
.check input{width:18px;height:18px;margin:0;accent-color:var(--gold)}
.app form button{width:100%;margin:16px 0}
.small{overflow-wrap:anywhere;font-size:.8rem;line-height:1.5;color:var(--muted)}
.progress{height:5px;background:#20344d;border-radius:5px;margin:14px 0;overflow:hidden}
.progress progress{width:100%;height:5px;display:block;accent-color:var(--blue)}
progress::-webkit-progress-bar{background:#20344d}
progress::-webkit-progress-value{background:var(--blue)}
.app details{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
summary{cursor:pointer;font-size:.875rem;font-weight:600;color:#c6dcf7}
table{width:100%;font-size:.8rem;border-collapse:collapse;margin-top:14px}
th,td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
th{color:var(--muted);font-weight:500}
td:last-child,th:last-child{text-align:right;white-space:nowrap;padding-left:8px}
th:nth-child(2),td:nth-child(2){white-space:nowrap;padding-left:8px}
dialog{background:#0d1b2d;border:1px solid #b68b49;border-radius:14px;padding:30px;max-width:480px;width:calc(100% - 32px);color:inherit;box-shadow:0 30px 100px #0008}
dialog::backdrop{background:#020812c9;backdrop-filter:blur(4px)}
dialog .actions{margin-top:24px}
code{font-size:.85em;overflow-wrap:anywhere;color:#b7d7ff}
#message{background:#122d48;border:1px solid #4c7ba7;border-radius:8px;padding:16px;line-height:1.5}
#message.error{background:#3c1c26;border-color:#99525d}
.audit{margin-top:30px;padding:20px;border:1px solid var(--line);border-radius:10px}
.audit li{font-size:.875rem;margin:12px 0;color:var(--muted);overflow-wrap:anywhere}
footer{text-align:center;color:var(--muted);font-size:.75rem;letter-spacing:.08em;padding:26px;border-top:1px solid #b3864233}
.app select{font-size:.8rem}
.app details button{margin:4px 4px 4px 0}
[hidden]{display:none!important}
@media(max-width:960px){.apps{grid-template-columns:1fr}
.summary strong{font-size:1.6rem}
.heading{background-position:right bottom}
}
@media(max-width:600px){header{min-height:76px;padding:16px}
.brand{gap:8px;font-size:.85rem}
.subbrand{display:none}
main{padding:22px 16px}
.summary{grid-template-columns:1fr;gap:10px}
.summary>div{padding:18px}
.summary strong{margin:8px 0}
.heading{align-items:flex-start;flex-direction:column;min-height:350px;padding:24px;background-position:right bottom;background-size:auto,auto 220px}
.heading .actions{align-self:flex-start}
.heading:after{inset:auto 24px 0}
h1{font-size:2.2rem}
.login{margin:180px auto 24px;padding:26px}
body:has(.login:not([hidden])){background-position:center,center 76px;background-size:auto,100% auto}
.login h1{font-size:2.2rem}
.actions{flex-wrap:wrap}
.app{padding:20px}
}