/* Lab Account shell based on C/TPA DOT portal layout */
:root{--navy:#102f55;--navy2:#0b2747;--blue:#24467f;--orange:#ef6c00;--ink:#183653;--muted:#6d7f92;--line:#dce5ef;--soft:#f4f7fb;--shadow:0 14px 34px rgba(24,54,83,.08);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#eef3f8}
*{box-sizing:border-box}body{margin:0;background:#eef3f8}button{cursor:pointer;font:inherit}a{text-decoration:none}
.app{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
.side{position:fixed;inset:0 auto 0 0;width:250px;height:100vh;background:linear-gradient(180deg,var(--navy2),var(--navy));display:flex;flex-direction:column;color:#dae7f3;z-index:30;overflow:hidden;padding:0}
.brand{height:68px;flex-shrink:0;background:#fff;display:flex;align-items:center;justify-content:center;padding:8px 18px;border:0}
.brand img{display:block;max-width:190px;max-height:58px;width:100%;object-fit:contain}
.nav{flex:1;overflow-y:auto;padding:8px 10px 12px;margin:0;min-height:0}
.nav-title{padding:10px 12px 8px;color:#8fa9c3;font-size:.65rem;text-transform:uppercase;font-weight:900;letter-spacing:.12em}
.nav button{width:100%;display:flex;align-items:center;gap:11px;text-align:left;padding:11px 12px;border:0;border-radius:9px;margin:3px 0;background:none;color:#dae7f3;font-size:.83rem;font-weight:720}
.nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.nav button.active{background:#fff;color:var(--navy);box-shadow:inset 4px 0 0 var(--orange)}
.nav .ico{width:20px;flex:none;text-align:center}
.side-foot{flex-shrink:0;border-top:1px solid rgba(255,255,255,.1);padding:12px;overflow-wrap:anywhere}
.side-foot small{display:block;color:#9fb3c7;font-size:.68rem}.side-foot strong{font-size:.75rem;color:#fff}
.main{grid-column:2;min-width:0}
.top{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;position:sticky;top:0;z-index:20}
.top-left,.top-right{display:flex;align-items:center;gap:10px;min-width:0}
.top-right{flex-wrap:wrap;justify-content:flex-end}
.menu{display:none;border:0;background:none;color:var(--navy);font-size:1.4rem}
.top-context{display:flex;flex-direction:column;gap:3px}
.top-eyebrow{font-size:.68rem;color:var(--blue);font-weight:800}
.crumb{font-size:.8rem;color:var(--muted);background:transparent;border:0;padding:0;text-align:left}
.portal-clock{display:flex;flex-direction:column;text-align:right;white-space:nowrap;font-size:.65rem;color:var(--muted)}
.portal-clock strong{color:var(--navy);font-size:.8rem}
.font-sizer{display:inline-flex;align-items:center;gap:2px;padding:3px;background:#f4f7fb;border:1px solid var(--line);border-radius:9px;white-space:nowrap}
.font-sizer button{border:0;background:transparent;color:var(--navy);height:28px;min-width:30px;padding:0 7px;border-radius:6px;font-size:.72rem;font-weight:850}
.font-sizer button:hover{background:#e7eef7}
.pill{padding:6px 9px;background:#edf3fb;color:var(--blue);border-radius:999px;font-size:.66rem;font-weight:900}
.switch{display:inline-flex;align-items:center;justify-content:center;padding:9px 13px;border-radius:9px;background:#ff6b00;color:#fff;font-size:.76rem;font-weight:800;white-space:nowrap}
.signout{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 10px;font-size:.72rem;color:var(--ink)}
.content{padding:24px;max-width:1540px;margin:0 auto}
.hero{background:linear-gradient(120deg,#0f315b,#184f80 70%,#24467f);color:#fff;border-radius:16px;padding:24px 26px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-50px;bottom:-100px;width:280px;height:280px;border:40px solid rgba(239,108,0,.17);border-radius:50%;pointer-events:none}
.hero-kicker{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#ffc28e}
.hero h1{font-size:1.85rem;margin:7px 0}
.hero p{margin:0;max-width:840px;color:#dce9f7;font-size:.86rem;line-height:1.6}
.section{margin-top:18px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;min-height:125px;box-shadow:0 5px 20px rgba(24,54,83,.035)}
.card h2{font-size:1rem;color:var(--navy);margin:0 0 8px}.hint{color:var(--muted);line-height:1.6}
.button{display:inline-block;background:var(--orange);color:#fff;padding:10px 13px;border:0;border-radius:9px;font-size:.8rem;font-weight:800;text-decoration:none}
.button.secondary{background:#edf3fb;color:var(--blue)}
.empty{padding:25px;border:1px dashed #cad6e5;border-radius:10px;color:var(--muted)}
table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:11px 12px;border-bottom:1px solid #e3eaf2}th{font-size:.72rem;color:#75869a}
.footer{padding:24px 2px;color:#7d8da3}
.mobile-nav{display:none}
.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(115deg,#102d50 48%,#f3f6fb 48%);padding:25px}
.login .card{width:min(450px,100%);padding:40px}
.notice{padding:14px;background:#fff4e9;color:#86511e;border-radius:9px;margin:18px 0}
button:focus-visible,a:focus-visible{outline:3px solid #f7ad7b;outline-offset:2px}
@media(max-width:1100px){.portal-clock,.pill{display:none}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.app{display:block}.side{display:none}.main{display:block}.menu{display:block}.top{padding:0 14px}.content{padding:14px}.grid{grid-template-columns:1fr}.mobile-nav{display:none;position:fixed;top:68px;left:0;right:0;bottom:0;background:#102f55;color:white;z-index:29;overflow:auto;padding:18px}.mobile-nav.open{display:block}.mobile-nav-head{padding:10px;font-size:.8rem;color:#a9c5dd;font-weight:800;text-transform:uppercase}.mobile-nav-links{display:grid;gap:5px}.mobile-nav-links button{display:block;width:100%;border:0;border-radius:9px;background:transparent;color:#dae7f3;text-align:left;padding:14px}.mobile-nav-links button.active{background:#fff;color:#102f55}.mobile-nav-links .ico{display:inline-block;width:26px}.top-right .font-sizer{display:none}}
@media(max-width:480px){.top{gap:5px}.top-right{gap:5px}.switch{font-size:.65rem;padding:8px}.signout{font-size:.65rem;padding:8px}.top-eyebrow{font-size:.6rem}.crumb{font-size:.68rem}.hero{padding:20px}.hero h1{font-size:1.6rem}}

/* Lab Add Features: adapted from C/TPA feature-card layout */
.feature-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}
.feature-metrics .card small{display:block;color:#72859a;font-size:.7rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}
.feature-section{display:grid;gap:18px}
.feature-section>.icsup-cardhead{background:#fff;border:1px solid #dce5ef;border-radius:12px;padding:18px}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.feature-card{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid #dce5ef;border-radius:13px;padding:20px}
.feature-card h3{color:#102f55;font-size:1.05rem;margin:0}
.feature-card p{color:#6d7f92;line-height:1.6;flex:1;margin:0}
.feature-card strong{color:#102f55}.feature-card span{color:#657d95;font-size:.82rem}
.feature-card .button{align-self:flex-start}
@media(max-width:700px){.feature-metrics,.feature-grid{grid-template-columns:1fr}}

/* Native C/TPA Add Features source component styles */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.metric{background:#fff;border:1px solid #dce5ef;border-radius:12px;padding:16px}.metric small,.metric span{display:block;color:#6d7f92;font-size:.72rem}.metric strong{display:block;color:#102f55;font-size:1.3rem;margin:7px 0}.feature-section{background:#fff;border:1px solid #dce5ef;border-radius:12px;padding:16px;margin:14px 0}.panel-head h2{font-size:1.1rem;color:#102f55;margin:0}.panel-head p{color:#6d7f92}.feature-card-top{display:flex;justify-content:space-between;gap:10px}.feature-code{font-size:.72rem;color:#8494a6}.feature-card-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}.feature-card-bottom span{color:#6d7f92;font-size:.78rem}.feature-card .btn{border:none;border-radius:9px;padding:10px 14px;background:#ef6c00;color:#fff;font-weight:800}.feature-card .pill{font-size:.7rem}.feature-section .feature-grid{margin-top:12px}@media(max-width:1000px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.metrics{grid-template-columns:1fr}}

/* Styles for the original DOT portal page components reused in the Lab Account shell */
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 5px 20px rgba(24,54,83,.035)}
.panel-head{padding:17px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-head h2{margin:0 0 5px;color:var(--navy);font-size:1.05rem}.panel-head p{margin:0;color:var(--muted)}
.section .section{margin-top:16px}.table-wrap{width:100%;overflow-x:auto}.table-wrap table{min-width:600px}
.table-wrap td small{display:block;color:var(--muted);margin-top:4px}.metrics,.lab-account-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.metric{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}.metric small,.metric span{display:block;color:var(--muted);font-size:.78rem}.metric strong{display:block;color:var(--navy);font-size:1.15rem;margin:8px 0}
.badge{display:inline-block;background:#edf3fb;color:var(--blue);padding:5px 9px;border-radius:99px;font-size:.72rem;font-weight:800}.badge.good{background:#e6f6ed;color:#17643c}.badge.warn{background:#fff1e5;color:#995309}
.btn,.mini-btn{display:inline-block;padding:9px 12px;border:1px solid var(--line);border-radius:8px;color:var(--blue);font-weight:750;background:#fff;cursor:pointer;font-size:.78rem}.btn.primary,.mini-btn.primary{background:var(--orange);border-color:var(--orange);color:white}
.billing-row-actions{display:flex;flex-wrap:wrap;gap:6px}.account-billing-note{padding:15px;background:#eef3fb;margin:0 0 16px}.billing-toolbar{display:flex;gap:10px;margin:0 0 16px}.billing-search{display:flex;gap:8px;flex-wrap:wrap}
.billing-search input,.billing-search select,.support-form input,.support-form textarea,.support-form select{border:1px solid var(--line);padding:10px;border-radius:8px;max-width:100%;font:inherit}
.support-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}.support-form{padding:20px}.support-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:flex;flex-direction:column;gap:6px}.field.full,.support-diagnostics.full{grid-column:1/-1}
.support-form .field label{font-size:.8rem;font-weight:750;color:var(--navy)}.support-form textarea{min-height:105px}.support-empty,.empty{padding:22px;color:var(--muted)}.support-empty span{display:block}
.support-stage-message{padding:12px;background:#fff4e9;border-radius:8px;margin:12px 0}.support-tag{color:var(--blue);font-size:.75rem;font-weight:800}
.lab-account-card{background:white;border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:15px}.lab-account-card-head{display:flex;align-items:center;justify-content:space-between}.lab-account-card h3{margin:0 0 5px}.lab-number-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}.lab-number{background:#f4f7fb;padding:12px;border-radius:9px}.lab-number span,.lab-number strong{display:block}.lab-number span{font-size:.75rem;color:var(--muted)}.lab-number strong{font-size:1rem;color:var(--navy)}
@media(max-width:950px){.metrics,.lab-account-summary,.lab-number-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.metrics,.lab-account-summary,.lab-number-grid,.support-form-grid{grid-template-columns:1fr}}
