/* Portal layouts and business-specific components; load after design.css. */
.topbar{background:var(--navy);color:#edf4fa;border-bottom:1px solid #243344}
.nav-wrap{max-width:1420px;margin:auto;display:flex;align-items:center;gap:48px;min-height:82px;padding:16px 36px}
.brand{color:#edf4fa;display:flex;gap:11px;align-items:center;font-size:13px;font-weight:750;letter-spacing:1.2px;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand small{display:block;color:#90a5bb;font-size:11px;font-weight:450;letter-spacing:.3px;margin-top:1px}
.brand-mark{display:grid;place-items:center;width:34px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--cyan),#7f8cfa);color:#0b1b2b;font-size:21px;box-shadow:0 3px 20px #48d7ec23}
nav{display:flex;align-self:stretch;gap:27px;align-items:center}
nav>a{font-size:13px;color:#a4b4c5;padding:12px 0;border-bottom:2px solid transparent}
nav>a[aria-current]{color:#fff;border-color:var(--cyan)}
nav>a:hover{color:#fff;text-decoration:none}
.nav-account{margin-left:auto;display:flex;align-items:center;gap:15px}
.account-email{color:#a4b4c5;font-size:12px;max-width:225px;overflow:hidden;text-overflow:ellipsis}
.nav-button{display:inline-flex;background:#1a293a;border:1px solid #35465a;color:#e8f0f6;border-radius:9px;padding:8px 13px;font-size:12px;white-space:nowrap}
.nav-button:hover{background:#283b50;text-decoration:none}
.page{max-width:1420px;margin:0 auto;padding:42px 36px 60px;min-height:calc(100vh - 160px)}
.eyebrow{display:block;font-size:10px;letter-spacing:1.9px;font-weight:750;color:var(--accent);margin-bottom:14px}
.page-heading{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:27px}
.page-heading p{margin:0;max-width:650px}
.network-chip{display:flex;align-items:center;gap:10px;white-space:nowrap;padding:10px 15px;border:1px solid var(--border);background:#fff;border-radius:100px;font-size:12px;color:var(--muted)}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:100%;background:#17a390;box-shadow:0 0 0 4px #17a39012}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 28px}
.workspace{display:grid;grid-template-columns:345px minmax(0,1fr);gap:24px;align-items:start}
.enroll-card{padding:24px}
.card-heading{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.card-heading h2{font-size:18px;margin:0 0 2px}
.card-heading p{font-size:12px;margin:0}
.enroll-form label{display:block;font-size:12px;font-weight:650;margin:17px 0 7px}
.enroll-form>small{display:block;font-size:11px;line-height:1.6;margin-top:7px}
.optional{color:#8996a4;font-size:10px;font-weight:450;float:right}
.form-footnote{font-size:10px;line-height:1.7;margin:12px 0 0}
.install-help{margin-top:16px;box-shadow:none}
.install-help>summary{padding:18px 20px;font-weight:600;font-size:12px}
.details-body{padding:0 20px 8px}
.details-body p{font-size:12px;line-height:1.7}
.details-body strong{color:var(--text)}
.devices-card{min-width:0;overflow:hidden;box-shadow:none}
.section-heading{padding:24px;display:flex;justify-content:space-between;gap:14px;align-items:start}
.section-heading h2{margin-bottom:4px}
.section-heading p{font-size:12px;margin:0}
.tabs{display:flex;border-bottom:1px solid var(--border);padding:0 24px;gap:26px}
.tabs a{font-size:12px;font-weight:600;color:var(--muted);padding:0 0 14px;border-bottom:2px solid transparent}
.tabs a[aria-current]{color:#0c6b83;border-color:#119bb7}
.tabs a:hover{text-decoration:none}
.filters{display:grid;grid-template-columns:minmax(0,1fr) 145px auto;gap:10px;padding:20px 24px;border-bottom:1px solid #edf0f4}
.filters input,.filters select,.filters button{min-height:39px;font-size:12px}
.device-row{display:grid;grid-template-columns:minmax(150px,1fr) 144px 105px;gap:12px;align-items:center;padding:20px 24px;border-bottom:1px solid #edf0f4}
.device-row:last-child{border-bottom:0}
.device-main{display:flex;gap:12px;align-items:center;min-width:0}
.device-icon{flex-shrink:0;display:grid;place-items:center;width:37px;height:42px;border-radius:9px;border:1px solid #e0e7ed;background:#f6f8fa;color:#647789;font-size:14px;font-weight:650}
.device-identity{min-width:0}
.device-identity h3{font-size:13px;line-height:1.4;overflow-wrap:anywhere;margin-bottom:4px}
.device-meta{display:flex;gap:6px;flex-wrap:wrap;font-size:10px;color:var(--muted)}
.device-meta code{font-size:10px}
.owner{font-size:10px;margin-top:4px;color:#7e8c9e;overflow-wrap:anywhere}
.device-state>small{display:block;font-size:10px;margin-top:5px}
.device-state>small+small{margin-top:0}
.device-actions{text-align:right;align-self:start;padding-top:2px}
.revoke-confirm>summary{display:inline-block;list-style:none;color:#9c3d48;font-size:11px;font-weight:600;border:1px solid #e3d9df;border-radius:8px;padding:7px 12px}
.revoke-confirm>summary::-webkit-details-marker{display:none}
.revoke-confirm[open]{grid-column:1/-1}
.confirm-panel{padding:12px;background:#fff8f8;border:1px solid #eedbe0;border-radius:9px;text-align:left;margin-top:9px}
.confirm-panel strong{font-size:11px}
.confirm-panel p{font-size:10px;margin:6px 0 10px}
.device-row:has(.revoke-confirm[open]){grid-template-columns:minmax(150px,1fr) 144px}
.device-row:has(.revoke-confirm[open]) .device-actions{grid-column:1/-1}
.list-footnote{padding:17px 24px;background:#fbfcfd;border-top:1px solid var(--border);font-size:10px;color:var(--muted);line-height:1.7}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:65px;align-items:center;background:radial-gradient(ellipse at top right,#163a4c 0,transparent 65%),#0e1928;color:#f1f7fb;border:1px solid #24384a;border-radius:22px;padding:64px 55px;box-shadow:0 18px 50px #14273c10}
.hero .eyebrow{color:var(--cyan)}
.hero h1{font-size:43px;letter-spacing:-1.5px;line-height:1.15;margin:16px 0 23px}
.hero-copy{color:#acbed0;font-size:14px;line-height:1.8;max-width:450px}
.hero .button{margin-top:9px;font-size:13px;min-width:240px}
.hero-footnote{color:#7f97ad;font-size:11px;margin:16px 0 0}
.access-preview{border:1px solid #34495d;background:#162434b5;border-radius:17px;padding:28px}
.preview-label{font-size:9px;font-weight:650;letter-spacing:1.5px;color:#8da7bd}
.journey{list-style:none;padding:0;margin:27px 0 24px}
.journey li{display:flex;gap:17px;position:relative;padding:0 0 28px}
.journey li:last-child{padding-bottom:0}
.journey li>span{width:33px;height:33px;flex-shrink:0;display:grid;place-items:center;border:1px solid #326075;border-radius:10px;background:#1b394a;color:var(--cyan);font-size:10px;font-weight:700}
.journey li strong{font-size:14px}
.journey li p{color:#93a8bc;font-size:11px;line-height:1.7;margin:4px 0 0}
.preview-footer{border-top:1px solid #314457;padding-top:17px;font-size:10px;color:#91a8bb;display:flex;gap:10px;align-items:center}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:27px 0}
.feature{padding:30px}
.feature .icon-tile{margin-bottom:20px}
.feature h2{font-size:18px}
.feature p{font-size:13px;max-width:480px}
.quiet-note{padding:19px 24px;color:#67798b;font-size:12px;line-height:1.8}
.quiet-note strong{color:#344d63}
.footer{max-width:1420px;margin:auto;display:flex;justify-content:space-between;gap:24px;padding:23px 36px;border-top:1px solid var(--border);font-size:10px;color:#8997a7}
.footer-divider{padding:0 10px;color:#bac5cf}
.guide-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);gap:26px;align-items:start}
.guide-step{padding:30px;margin-bottom:20px}
.step-number{display:block;font-size:11px;font-weight:700;color:#0787a5;margin-bottom:12px}
.guide-step h2{font-size:21px}
.guide-step p{font-size:13px}
.code-option{border-top:1px solid var(--border);margin-top:20px;padding-top:15px}
.code-option>summary{font-size:12px;font-weight:650}
.code-option>p{font-size:11px}
.guide-aside{padding:30px;background:#edf4f8;box-shadow:none}
.guide-aside .icon-tile{margin-bottom:24px}
.guide-aside h2{font-size:20px;line-height:1.4}
.guide-aside p{font-size:12px;line-height:1.8}
.divider{height:1px;background:#d6e2ea;margin:24px 0}
.error-card{max-width:650px;margin:50px auto;padding:44px}
.error-card h1{font-size:29px}
.error-actions{display:flex;align-items:center;gap:24px;margin:25px 0}
@media(min-width:1600px){
.hero{padding:72px}
.workspace{grid-template-columns:365px minmax(0,1fr)}
}
@media(max-width:1100px){
.nav-wrap{gap:28px;padding:16px 24px}
.page{padding:32px 24px 50px}
.account-email{display:none}
.workspace{grid-template-columns:310px minmax(0,1fr);gap:18px}
.enroll-card{padding:20px}
.device-row{grid-template-columns:minmax(0,1fr) 125px;gap:13px;padding:18px}
.device-actions{grid-column:1/-1;text-align:left;margin-left:49px}
.device-state{align-self:start}
.filters{grid-template-columns:minmax(0,1fr) 125px auto;padding:16px}
.section-heading{padding:22px 18px}
.hero{gap:32px;padding:42px 34px}
.hero h1{font-size:36px}
.access-preview{padding:22px}
.guide-layout{grid-template-columns:minmax(0,1.5fr) 260px}
.guide-step,.guide-aside{padding:24px}
}
@media(max-width:760px){
.nav-wrap{flex-wrap:wrap;gap:10px 20px;padding:16px 20px 0}
.brand{font-size:12px}
.nav-account{margin-left:auto}
.nav-wrap nav{order:3;flex-basis:100%;gap:25px;margin-top:7px}
nav>a{font-size:12px;padding:10px 0 13px}
.page{padding:28px 18px 38px}
.page-heading{display:block;margin-bottom:22px}
.page-heading h1{font-size:28px}
.page-heading p{font-size:13px}
.network-chip{width:max-content;margin-top:18px;font-size:11px;padding:8px 13px}
.stats{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}
.workspace{display:flex;flex-direction:column;gap:21px}
.enroll-column,.devices-card{width:100%}
.enroll-card{padding:23px}
.enroll-form input,.enroll-form select{font-size:16px}
.enroll-form label{font-size:12px}
.enroll-form>small{font-size:11px}
.enroll-form .button{min-height:46px;font-size:12px}
.install-help{margin-top:12px}
.section-heading{padding:22px 20px}
.section-heading p{font-size:11px}
.section-heading>.badge{font-size:9px}
.tabs{padding:0 20px}
.filters{grid-template-columns:minmax(0,1fr) auto;padding:16px 20px}
.search-field{grid-column:1/-1}
.filters input{font-size:16px}
.device-row,.device-row:has(.revoke-confirm[open]){padding:19px 20px;grid-template-columns:minmax(0,1fr) 117px;gap:12px}
.device-identity h3{font-size:13px}
.device-icon{width:32px;height:37px}
.device-main{gap:10px}
.device-meta{font-size:9px}
.device-meta code{font-size:9px}
.device-state .badge{font-size:9px}
.device-state>small{font-size:9px}
.device-actions{margin-left:42px}
.device-state .badge.pending{white-space:normal;text-align:left}
.list-footnote{padding:16px 20px}
.hero{grid-template-columns:1fr;padding:31px 24px;gap:30px;border-radius:17px}
.hero h1{font-size:35px;margin-top:16px}
.hero-copy{font-size:13px}
.hero .button{width:100%;font-size:13px}
.hero-footnote{font-size:10px}
.access-preview{padding:21px}
.journey{margin:22px 0}
.journey li{padding-bottom:23px}
.feature-grid{grid-template-columns:1fr;gap:16px;margin-top:20px}
.feature{padding:25px}
.feature h2{font-size:18px}
.quiet-note{padding:10px 4px;font-size:11px}
.footer{padding:22px 20px;flex-direction:column;gap:8px;font-size:10px}
.guide-layout{grid-template-columns:1fr}
.guide-step{padding:24px 20px}
.guide-step h2{font-size:20px}
.guide-step p{font-size:12px}
.guide-aside{padding:24px}
.guide-layout pre{margin-left:0;margin-right:0;padding:14px}
.guide-layout pre code{font-size:10px}
.error-card{padding:28px 23px;margin:15px auto}
.error-card h1{font-size:26px}
.error-actions{flex-wrap:wrap;gap:17px}
.account-email{display:none}
}
.preferences{display:flex;gap:8px;align-items:center}
.preferences select{min-height:34px;width:auto;max-width:118px;padding:6px 24px 6px 10px;font-size:11px;border-color:#34475e;background:#142132;color:#d7e5f2;border-radius:8px}
.language-form{display:flex;gap:8px}
.nav-account{gap:12px}
.account-email{max-width:160px}
.brand-mark{box-shadow:0 6px 24px #43def52b,inset 0 1px 0 #ffffff69}
.nav-button,.revoke-confirm>summary{transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s,filter .16s,background .16s,border-color .16s}
.nav-button:active{transform:scale(.985)}
.nav-button:hover{transform:translateY(-1px)}
.nav-button:focus-visible,.revoke-confirm>summary:focus-visible{outline:2px solid #43def5;outline-offset:3px;box-shadow:0 0 0 5px #43def51c}
.device-icon{background:linear-gradient(145deg,#f8fbfd,#edf3f8)}
[data-theme="dark"] .topbar{background:#070d16eF;border-color:#25364a}
[data-theme="dark"] .network-chip{background:#132334;border-color:#30475d;color:#a4b8cc}
[data-theme="dark"] .preferences select{background:#142132;color:#d7e5f2;border-color:#34475e}
[data-theme="dark"] .tabs a[aria-current]{color:#63e2f5;border-color:#43def5}
[data-theme="dark"] .filters,[data-theme="dark"] .device-row{border-color:#9db7d61a}
[data-theme="dark"] .device-icon{background:linear-gradient(145deg,#1d3246,#132134);border-color:#34506a;color:#90cfe5}
[data-theme="dark"] .owner{color:#9bafc7}
[data-theme="dark"] .revoke-confirm>summary{background:#39202a;color:#ff9aae;border-color:#6e3948}
[data-theme="dark"] .revoke-confirm>summary:hover{background:#4b2835}
[data-theme="dark"] .confirm-panel{background:#291b29;border-color:#754355}
[data-theme="dark"] .confirm-panel strong{color:#ffd9df}
[data-theme="dark"] .list-footnote{background:#0b1726;color:#96aac2}
[data-theme="dark"] .hero{background:radial-gradient(ellipse at top right,#15394c,transparent 70%),#0e1928;border-color:#34506a;box-shadow:0 20px 60px #0003}
[data-theme="dark"] .quiet-note{color:#a6b9cd}
[data-theme="dark"] .quiet-note strong{color:#d3e9f6}
[data-theme="dark"] .guide-aside{background:linear-gradient(145deg,#192c3e,#102133)}
[data-theme="dark"] .divider{background:#34506a}
[data-theme="dark"] .footer{color:#8da4be}
[data-theme="dark"] .footer-divider{color:#53667c}
@media(max-width:1250px){
.account-email{display:none}
.nav-wrap{gap:26px}
}
@media(max-width:760px){
.nav-wrap{gap:12px}
.preferences{gap:6px}
.preferences select{font-size:11px;max-width:100px;padding-left:8px;padding-right:17px;min-height:35px}
.nav-account{gap:8px}
.nav-button{font-size:11px;padding:8px 9px}
.brand{font-size:10px;gap:7px}
.brand small{font-size:9px}
.brand-mark{width:29px;height:31px;font-size:19px}
.nav-wrap nav{margin-top:0}
.stats .stat>small{font-size:10px}
}
@media(max-width:420px){
.nav-wrap{padding-left:15px;padding-right:15px}
.nav-account{flex-wrap:wrap;justify-content:flex-end;max-width:218px}
.preferences select{max-width:93px}
.brand{align-self:flex-start;padding-top:2px}
.nav-account>.nav-button,.nav-account>form{margin-top:0}
.nav-wrap nav{padding-top:0}
}
@media(prefers-reduced-motion:reduce){
.nav-button:hover,.nav-button:active{transform:none;filter:none}
}