:root{color-scheme:dark;font:16px/1.55 system-ui,sans-serif;background:#071c29;color:#eef7fb}*{box-sizing:border-box}body{margin:0}header{padding:23px max(24px,calc((100vw - 1120px)/2));border-bottom:1px solid #2a4556;display:flex;justify-content:space-between;gap:16px;align-items:center;background:#0c2331}a{color:#90decf}.brand{display:block;flex:0 0 auto;width:190px;max-width:100%;text-decoration:none}.brand img{display:block;width:100%;height:auto}header>div{display:flex;gap:16px;align-items:center}main{max-width:1120px;margin:0 auto;padding:44px 24px}.intro{margin-bottom:30px}.eyebrow{font-size:11px;letter-spacing:.17em;font-weight:700;color:#90decf}h1{font-size:clamp(32px,5vw,46px);line-height:1.15;letter-spacing:-.03em;margin:12px 0}h2{font-size:21px;line-height:1.3;margin:0 0 12px}p{color:#b9cbd5;margin:8px 0 20px}.card,.user{border:1px solid #2e4a5c;border-radius:14px;padding:26px;background:#102b3b;margin-bottom:22px}.narrow{max-width:600px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:28px 0 14px}.section-heading .eyebrow{margin:0 0 6px}label{display:block;font-size:14px;color:#dce8ee;margin:14px 0}input,select{display:block;width:100%;padding:12px 14px;background:#081f2d;border:1px solid #4b6574;border-radius:7px;color:#fff;font:inherit;margin-top:7px}input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid #9aeadb;outline-offset:3px}button{background:#99e0cf;color:#082a2b;border:0;border-radius:7px;padding:12px 18px;font:600 14px system-ui;cursor:pointer;min-height:44px}button:hover{filter:brightness(1.1)}button:disabled{opacity:.6;cursor:wait}.secondary,#signout,#refresh{background:#213f51;color:#e3f1f5;border:1px solid #4b6574}.danger{background:#482c35;color:#ffd8dc;border:1px solid #89616a}.hint{font-size:13px;color:#a7c1cf}.permissions{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 16px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.user-head{display:flex;justify-content:space-between;gap:15px;align-items:center}.badge{font-size:12px;color:#a2e5d6;border:1px solid #46726d;border-radius:20px;padding:4px 12px}.pending{padding:16px 0;border-bottom:1px solid #365262}.pending p{font-size:13px;margin:5px 0 12px}#message:empty{display:none}#message{padding:14px 18px;border:1px solid #668e94;border-radius:8px;background:#173b48;color:#eef9fb}#message.error{border-color:#b0717b;background:#422c38}footer{font-size:13px;color:#91acbc;padding:26px 0;border-top:1px solid #2a4556;margin-top:36px}[hidden]{display:none!important}@media(max-width:700px){.two-col{grid-template-columns:1fr}header{flex-wrap:wrap}.card,.user{padding:20px}main{padding-top:28px}}

.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px;margin:20px 0 32px}.product-card{display:flex;flex-direction:column;text-decoration:none;color:#eef7fb;border:1px solid #3f697b;border-radius:14px;background:#102b3b;padding:24px;min-height:185px}.product-card h3{margin:0 0 10px;font-size:19px}.product-card p{font-size:14px;margin:0 0 22px}.product-access{margin-top:auto;color:#99e0cf;font-size:13px;font-weight:600}a.product-card:hover{background:#193b4d;border-color:#99e0cf}.product-card.unavailable{border-color:#2e4a5c;background:#0c2331}.product-card.unavailable .product-access{color:#a7bac6}

.account-tabs{display:flex;gap:10px;border-bottom:1px solid #355264;margin:24px 0;padding-bottom:12px}.account-tabs [aria-selected="false"]{background:#173342;color:#bdd0db}.account-tabs [aria-selected="true"]{background:#99e0cf;color:#082a2b}

.account-details-form{padding-bottom:24px;margin-bottom:20px;border-bottom:1px solid #2e4a5c}.account-details-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 16px}.account-details-fields input[readonly]{color:#a7c1cf;background:#102634}.account-details-form .actions{align-items:center;margin-top:12px}.details-status{font-size:14px;color:#99e0cf}@media(max-width:850px){.account-details-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.account-details-fields{grid-template-columns:1fr}}

.user-company{margin:4px 0 18px;font-size:14px;overflow-wrap:anywhere}.user-company span{color:#a7c1cf}.user-company strong{color:#99e0cf;font-weight:600}

#profileDialog{width:min(600px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow:auto;padding:28px;border:1px solid #3b5d70;border-radius:16px;background:#102b3b;color:#eef7fb;box-shadow:0 24px 80px #0008}#profileDialog::backdrop{background:#03111dcc;backdrop-filter:blur(4px)}#profileStatus:empty{display:none}#profileStatus{margin:18px 0 0;color:#99e0cf}#profileStatus.error{color:#ffb7c0}header>div{flex-wrap:wrap}

.profile-password{border-top:1px solid #355264;margin-top:28px;padding-top:24px}.profile-password h2{font-size:20px}

#profileDialog.owner-profile{width:min(1100px,calc(100% - 32px))}#profilePanel{max-width:600px}#profileTabs{flex-wrap:wrap}#profileDialog .card{margin-bottom:20px}

.owner-shortcuts{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px}

.password-field{position:relative;margin:-7px 0 14px}.password-field input{padding-right:58px}.password-toggle{position:absolute;right:2px;top:2px;bottom:2px;width:46px;min-height:40px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;color:#99e0cf}.password-toggle:hover{background:#213f51}

.text-button{background:transparent;color:#99e0cf;text-decoration:underline;text-underline-offset:3px;margin-left:8px}.text-button:hover{background:#213f51}

.user-list-header,.user-list-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:16px 20px}.user-list-header{color:#a7c1cf;font-size:13px;border-bottom:1px solid #365262}.user-list-row{color:#eef7fb;text-decoration:none;border-bottom:1px solid #365262;align-items:center;overflow-wrap:anywhere}.user-list-row:hover{background:#213f51}.user-list-name{font-weight:650}.user-list-name small{display:block;font-weight:400;color:#a7c1cf;margin-top:3px}.user-invitations{margin-top:24px}.user-invitations summary{cursor:pointer;color:#99e0cf;padding:12px 0}.user-invitations .two-col{margin-top:20px}.back-users{display:inline-block;margin:0 0 20px}#userDetailPage #emailUser{opacity:1}#userDetailPage .two-col{display:block}

/* Keep the sign-in screen separate from account management. */
body:has(#signed[hidden]){background:#081722;min-height:100dvh}
body:has(#signed[hidden]) header{background:transparent;border:0;padding:24px 32px}
body:has(#signed[hidden]) main{width:min(100%,488px);padding:clamp(32px,8vh,88px) 24px 48px}
body:has(#signed[hidden]) .intro{display:none}
body:has(#signed[hidden]) .card{background:#102431;border:1px solid #2a3e4d;border-radius:12px;padding:32px;margin:0}
.login-brand{font-size:14px;font-weight:650;color:#a9bed0;margin:0 0 24px}
#login h2{font-size:32px;letter-spacing:-.025em;margin-bottom:8px}
#login h2+p{font-size:15px;color:#a9bed0;margin-bottom:28px}
#login input{background:#0b1c29;border-color:#3b5060;min-height:48px}
#loginForm>button[type=submit]{width:100%;background:#1685ec;color:#fff;margin-top:10px}
#loginForm .text-button{display:block;margin:14px auto 0;font-weight:500;color:#b8cddd}
#login .password-toggle{color:#b8cddd}
@media(max-width:480px){body:has(#signed[hidden]) header{padding:20px 24px}body:has(#signed[hidden]) .card{padding:26px 22px}}

/* Account forms must fit touch screens without zooming or horizontal scrolling. */
input,select{font-size:16px;min-height:48px;min-width:0;max-width:100%}
header>div,.section-heading>div,.user-head>*,.two-col>*,.permissions>*,.account-details-fields>*,.actions>*{min-width:0}
#identity,.badge,.details-status,.pending strong,.user-head h2{overflow-wrap:anywhere}
.section-heading,.user-head{flex-wrap:wrap;gap:12px}
.actions button{max-width:100%;white-space:normal}
.back-users{min-height:44px;padding:10px 0}
#profileDialog{overscroll-behavior:contain;scroll-padding:20px;max-height:calc(100dvh - 32px)}
#profileDialog input,#profileDialog select{scroll-margin-block:24px}
@media(max-width:900px){
 .two-col{grid-template-columns:minmax(0,1fr)}
 header{padding:18px 24px;flex-wrap:wrap}
 header>div{flex:1 1 280px;justify-content:flex-end}
 #identity{flex:1 1 100%;text-align:right}
 #profileDialog.owner-profile{padding:22px}
 .permissions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 main{padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
 header{padding:16px;gap:12px}
 header>div{flex-basis:100%;justify-content:flex-start;gap:10px}
 #identity{text-align:left}
 .brand{width:170px}
 .card,.user{padding:18px;border-radius:10px}
 #profileDialog,#profileDialog.owner-profile{width:calc(100% - 16px);max-width:none;max-height:calc(100dvh - 16px);padding:16px;margin:auto;border-radius:12px}
 #profileDialog .card{padding:14px}
 .account-details-fields{grid-template-columns:minmax(0,1fr)}
 .account-tabs{gap:6px;margin:18px 0}
 .account-tabs button{flex:1 1 0;padding:12px 8px}
 .actions{gap:10px}
 .actions button,.owner-shortcuts button{flex:1 1 180px}
 .section-heading{align-items:flex-start}
 .section-heading>.actions{width:100%;margin-top:0}
 .user-list-header,.user-list-row{padding:14px 8px;gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
 .permissions{grid-template-columns:minmax(0,1fr)}
 #recoveryForm>button,#acceptForm>button{width:100%;margin:10px 0 0}
 body:has(#signed[hidden]) header{padding:16px}
 body:has(#signed[hidden]) header>div:has(#openProfile[hidden]){display:none}
 body:has(#signed[hidden]) main{padding:20px 16px calc(24px + env(safe-area-inset-bottom))}
 body:has(#signed[hidden]) .card{padding:24px 20px}
}
@media(max-height:500px) and (orientation:landscape){
 body:has(#signed[hidden]) main{padding-top:12px}
 #profileDialog,#profileDialog.owner-profile{max-height:calc(100dvh - 12px)}
}
body:has(dialog[open]){overflow:hidden}