:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#0b1f3a;background:#ffffff;font-synthesis:none}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
a{color:#1d4ed8;text-underline-offset:4px}
header{background:#fff;border-bottom:1px solid #dbe5f2;padding:18px max(24px,calc((100% - 1120px)/2));display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px}
header>a:last-child{text-decoration:none}
.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:750;text-decoration:none;color:#0b1f3a}
.brand span{background:#0b1f3a;color:#fff;border-radius:11px;width:34px;height:34px;text-align:center;line-height:32px}
main{max-width:1120px;margin:auto;padding:44px 28px 32px}
.intro{max-width:680px;margin-bottom:24px}
.eyebrow{font-size:11px;font-weight:750;letter-spacing:.12em;color:#52647a;margin:0 0 10px}
h1{font-size:clamp(32px,4vw,46px);letter-spacing:-.045em;line-height:1.12;margin:12px 0 16px}
h2{font-size:23px;letter-spacing:-.025em;line-height:1.25;margin:8px 0 14px}
p{line-height:1.6;max-width:76ch;font-size:14px;color:#52647a}
#account{font-size:13px}
.card{background:#fff;border:1px solid #dbe5f2;border-radius:18px;padding:26px;min-width:0}
.card>p:not(.eyebrow){margin:0 0 22px}
#settings{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:24px;align-items:start;margin-top:24px}
.approval-card{grid-column:1;grid-row:1 / span 2}
.approvals-card{grid-column:2;grid-row:1}
#credentials{grid-column:2;border-color:#b9cfe9;background:#f7faff}
.account-actions{grid-column:1 / -1;border-top:1px solid #dbe5f2;padding-top:8px;text-align:right}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
label,legend{font-weight:650;font-size:13px}
select,textarea{display:block;width:100%;margin:8px 0 18px;font:inherit;font-size:14px;color:#0b1f3a;border:1px solid #7b91ac;border-radius:9px;padding:10px 12px;background:#fff;min-height:44px}
select{height:44px}
textarea{min-height:82px;resize:vertical;overflow-wrap:anywhere;font-family:ui-monospace,monospace;font-size:12px}
fieldset{border:0;border-top:1px solid #e8edf1;padding:20px 0 8px;margin:6px 0 12px}
fieldset>p{margin:4px 0 12px;font-size:13px}
legend{padding-right:12px;font-size:14px}
.scope,.consent{display:flex;gap:11px;align-items:flex-start}
.scope{padding:12px 10px;margin:0 -10px;border-radius:9px}
.scope:has(input:checked){background:#edf4fc}
.scope+.scope{border-top:1px solid #f0f2f4}
.scope input,.consent input{width:18px;height:18px;flex-shrink:0;margin:2px 0;accent-color:#0b1f3a}
.scope small{display:block;line-height:1.45;font-weight:400;color:#52647a;font-size:12px;margin-top:3px}
.consent{border-top:1px solid #e8edf1;padding-top:18px;margin:10px 0 12px}
.consent+p{font-size:12px;line-height:1.6}
.form-actions{border-top:1px solid #e8edf1;margin-top:20px;padding-top:16px}
#approval-help{font-size:12px;margin:0 0 10px}
.action-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 0}
button,.button{font:inherit;font-size:13px;display:inline-flex;align-items:center;justify-content:center;background:#0b1f3a;color:#fff;border:1px solid #0b1f3a;border-radius:9px;padding:10px 15px;min-height:44px;font-weight:650;cursor:pointer;text-decoration:none;line-height:1.3;transition:background .15s,border-color .15s}
button:hover,.button:hover{background:#183b61;border-color:#183b61}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #558bab;outline-offset:3px}
button:disabled{opacity:.48;cursor:not-allowed}
.secondary{background:#fff;border-color:#ccd9e8;color:#24476b}
.secondary:hover{background:#edf4fc;border-color:#94b6de}
.danger{background:#fff;border-color:#edc7a8;color:#8a3f0d}
.danger:hover{background:#fff3e7;border-color:#ce9b6f}
#revoke-all,#logout,#refresh-grants{border-color:transparent;background:transparent;padding:10px 8px}
#revoke-all:hover{background:#fff3e7}
#logout:hover,#refresh-grants:hover{background:#edf4fc}
#status{display:flex;gap:10px;align-items:center;padding:13px 16px;border:1px solid #d1e1f4;border-radius:11px;background:#edf4fc;min-height:48px;overflow-wrap:anywhere;font-size:13px;color:#24476b}
#retry{margin-top:10px}
progress{width:32px;height:8px;flex-shrink:0;accent-color:#0b1f3a}
ul{list-style:none;padding:0;margin:16px 0 0}
.grant{border-top:1px solid #e8edf1;padding:18px 0}
.grant h3{font-size:15px;margin:0 0 8px}
.grant p{margin:6px 0;font-size:12px;overflow-wrap:anywhere}
.grant button{margin-top:8px;background:transparent;border-color:#edc7a8;color:#8a3f0d}
.grant button:hover{background:#fff3e7}
.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.section-header h2{margin-bottom:0}
#refresh-grants{font-size:12px}
.approval-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid #e8edf1;padding-top:10px;margin-top:16px}
#empty{background:#f5f9ff;border-radius:10px;padding:16px;margin:20px 0;font-size:13px}
#confirm-revoke,#uncertain{padding:18px;background:#fcf5ee;border:1px solid #ede0d1;border-radius:11px;margin-top:20px}
#confirm-revoke h3,#uncertain h3{font-size:16px;margin-top:0}
#credential-fields{margin-top:20px;border-top:1px solid #e8edf1;padding-top:18px}
#credential-fields button{background:#fff;border-color:#ccd9e8;color:#24476b;margin-bottom:20px}
#credentials>p{font-size:12px}
footer{display:flex;gap:24px;justify-content:center;padding:16px 0 32px;font-size:12px}
@media(max-width:800px){#settings{grid-template-columns:1fr;gap:18px}
.approval-card,.approvals-card,#credentials,.account-actions{grid-column:1;grid-row:auto}
.card{padding:24px}
#credentials{grid-row:2}
}
@media(max-width:480px){header{padding:14px 18px;font-size:12px}
.brand{font-size:19px}
main{padding:28px 18px}
.intro{margin-bottom:20px}
.card{padding:22px 18px;border-radius:14px}
.form-grid{grid-template-columns:minmax(0,1fr);gap:0}
h2{font-size:21px}
button{max-width:100%;white-space:normal}
.section-header{align-items:flex-start}
#approve{width:100%}
.account-actions{text-align:center}
}
@media(prefers-reduced-motion:reduce){button,.button{transition:none}
}

/* Owner palette: white/navy foundations, blue support, restrained orange accents. */
.scope:has(input:checked){border-left:2px solid #b45309;padding-left:8px}
.eyebrow{color:#24476b}

/* The ready account exposes a quiet shortcut without moving async status. */
.manage-approvals{display:none;width:fit-content;min-height:44px;align-items:center;font-size:13px}
body:has(#settings:not([hidden])) .manage-approvals{display:inline-flex}
#current-approvals{scroll-margin-top:24px}