/* GUI rebuild foundation. Surfaces and foregrounds move together in both modes. */
body.connected-lab {
 --bg:#061329; --bg2:#081d38; --panel:#0c2948; --panel2:#103354; --panel3:#174263;
 --card:var(--panel); --input:#071c32; --chip:#183e60; --text:#f4f8ff; --muted:#c5d8eb; --faint:#aec7df;
 --line:#4c86aa; --line2:#77d5f5; --gold:#ffda83; --gold2:#ffe6aa; --gold-ink:#241700;
 --blue:#0764ac; --blue2:#a1eaff; --danger:#ffabb9; --warn:#ffda83; --ok:#9ceac0;
 --sky:radial-gradient(ellipse at 80% 0%,#164473,transparent 65%),#061329;
 background:var(--sky);color:var(--text);color-scheme:dark;
}
:root[data-theme=light] body.connected-lab {
 --bg:#e9f2fc; --bg2:#f8fbff; --panel:#fff; --panel2:#eaf3ff; --panel3:#d9eafa;
 --input:#fff; --chip:#d9eafa; --text:#102e4b; --muted:#36536d; --faint:#425e75;
 --line:#6486a5; --line2:#17608a; --gold:#725000; --gold2:#725000; --gold-ink:#fff;
 --blue:#075ba4; --blue2:#075581; --danger:#9e1935; --warn:#704600; --ok:#08623e;
 --sky:radial-gradient(ellipse at 80% 0%,#d4e9ff,transparent 65%),#e9f2fc;
 color-scheme:light;
}
.connected-lab #topbar,.connected-lab #sidebar,.connected-lab #tabbar{background:var(--bg2);color:var(--text);border-color:var(--line)}
.connected-lab #topbar{box-shadow:0 3px 22px #008dcb22;min-height:64px}
.connected-lab #sidebar{padding:18px 12px;border-right:1px solid var(--line)}
.connected-lab #main{background:var(--sky)}
.connected-lab :is(.card,.kcard,.panel,.auth-card,.who){background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 26px #0002}
.connected-lab :is(h1,h2,h3){color:var(--text)}
.connected-lab a{color:var(--blue2)}
.connected-lab :is(.muted,.small.muted,label,.navgroup){color:var(--muted);opacity:1}
.connected-lab :is(button,.btn,.kbtn){min-height:44px}
.connected-lab :is(input,select,textarea){background:var(--input);color:var(--text);border:1px solid var(--line);font-size:max(16px,1em)}
.connected-lab input::placeholder,.connected-lab textarea::placeholder{color:var(--muted);opacity:1}
.connected-lab .check{color:var(--text)}
.connected-lab .btn{background:var(--panel2);color:var(--text);border:1px solid var(--line2)}
.connected-lab .btn.primary{background:linear-gradient(135deg,#096db8,#04497f);color:#fff;border-color:#73dfff;box-shadow:inset 0 0 0 2px #ffffff15,0 4px 18px #008fd426}
.connected-lab :focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.connected-lab #view{max-width:1600px;margin:auto}
.connected-lab .navlink{color:var(--text);margin:6px 0;border:1px solid transparent;border-radius:12px;min-height:48px}
.connected-lab .navlink.active{background:var(--panel3);color:var(--text);border-color:var(--line2);box-shadow:inset 4px 0 var(--gold)}
.connected-lab .navlink .ico{background:var(--panel2)}
.connected-lab .command-tagline{display:block;color:var(--muted);font-size:9px;letter-spacing:.14em;margin-top:3px}
.connected-lab .command-welcome{padding:clamp(20px,4vw,56px);max-width:1600px;margin:auto}
.connected-lab .command-welcome-grid{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(250px,1.3fr) minmax(200px,.8fr);gap:30px;align-items:center;min-height:540px}
.connected-lab .command-teddy{width:100%;height:auto;filter:drop-shadow(0 0 25px #2dc7ff33)}
.connected-lab .command-intro h1{font-size:clamp(32px,4.2vw,66px);line-height:1.12;margin:20px 0}
.connected-lab .command-intro h1 span{color:var(--gold)}
.connected-lab .command-intro>p{line-height:1.7}
.connected-lab .command-doors{display:grid;gap:14px;margin:26px 0}
.connected-lab .command-doors .btn{justify-content:space-between;padding:18px;white-space:normal;text-align:left}
.connected-lab .command-rail{padding:24px;border:1px solid var(--line2);border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 4px #28c3ff12}
.connected-lab .command-rail h2{color:var(--gold);font-size:21px}
.connected-lab .command-rail a{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none}
.connected-lab .command-rail p,.connected-lab .command-notice{font-size:14px;color:var(--muted);line-height:1.7}
.connected-lab .command-footer{display:flex;gap:22px;flex-wrap:wrap;border-top:1px solid var(--line);padding:24px 0;font-size:13px}
.connected-lab .command-footer span{margin-right:auto;color:var(--gold)}
.connected-lab .command-auth-teddy{width:min(320px,100%);height:auto}
.connected-lab .auth-art{background:var(--sky)}
.connected-lab .command-setup{max-width:1050px;margin:auto;padding:18px}
.connected-lab .setup-masthead{padding:24px 28px;border:1px solid var(--line2);border-radius:18px;background:var(--panel);margin-bottom:24px}
.connected-lab .setup-masthead .lab-kicker{color:var(--gold);font-size:24px;margin:0}
.connected-lab .setup-masthead>p:last-child{color:var(--muted);margin-bottom:0}
.connected-lab .setup-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0;margin:0 0 28px}
.connected-lab .setup-steps li{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;color:var(--muted);background:var(--bg2);font-size:13px}
.connected-lab .setup-steps span{display:grid;place-items:center;border:1px solid var(--line2);border-radius:50%;width:28px;height:28px;flex-shrink:0}
.connected-lab .setup-steps .current{border-color:var(--gold);color:var(--text);background:var(--panel3)}
.connected-lab .setup-steps .complete span{background:#08623e;color:#fff}
.connected-lab .command-empty{max-width:850px;margin:40px auto;padding:36px;background:var(--panel);border:1px solid var(--line2);border-radius:22px}
@media(max-width:1050px){.connected-lab .command-welcome-grid{grid-template-columns:180px 1fr;min-height:0}.connected-lab .command-rail{grid-column:1/-1}.connected-lab .setup-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.connected-lab #view{padding:12px}.connected-lab :is(.row,.grid){min-width:0}.connected-lab img{max-width:100%}.connected-lab .command-welcome-grid{grid-template-columns:1fr;gap:12px}.connected-lab .command-teddy{width:180px;justify-self:center}.connected-lab .command-setup{padding:4px}.connected-lab .command-intro h1{font-size:36px}.connected-lab .command-tagline{display:none}}
@media(prefers-reduced-motion:reduce){.connected-lab *{animation:none!important;transition:none!important}}
/* Reference-inspired command cards are DOM controls; no text or buttons are painted into images. */
.connected-lab .lab-command{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,1fr);gap:clamp(18px,3vw,38px);padding:clamp(20px,4vw,44px);border:1px solid #51cfff;border-radius:26px;background:radial-gradient(ellipse at top left,#163e70,transparent 65%),#071b37;box-shadow:inset 0 0 0 4px #163e59,0 14px 40px #0004;align-items:center}
.connected-lab .lab-kicker{color:#91eaff;letter-spacing:.14em;font-size:.8rem;font-weight:800}.connected-lab .lab-command h2{font-size:clamp(26px,3.4vw,46px);line-height:1.12;margin:12px 0}.connected-lab .lab-command-copy>p:last-child{color:#d0e4f5;line-height:1.6}
.connected-lab .lab-command-actions{display:grid;gap:14px}.connected-lab .lab-command-action{display:grid;grid-template-columns:48px 1fr;gap:3px 14px;align-items:center;padding:18px 22px;border:2px solid #55d7ff;border-radius:22px;background:linear-gradient(135deg,#0d467a,#112756);color:#fff;text-decoration:none;box-shadow:inset 0 0 0 3px #8ceaff15}
.connected-lab .lab-command-action:first-child{border-color:#ffda7c;background:linear-gradient(135deg,#785413,#33240e)}.connected-lab .lab-command-action:last-child{background:linear-gradient(135deg,#492b79,#132452)}
.connected-lab .lab-command-icon{grid-row:1/3;font-size:34px}.connected-lab .lab-command-action strong{font-size:clamp(17px,2vw,23px)}.connected-lab .lab-command-action small{color:#e2eeff;font-size:.9rem}.connected-lab .lab-command-action:hover{box-shadow:0 0 0 2px #fff,0 0 22px #38caff50}
.connected-lab .hm-top .ktile{border:1px solid #53cdec;background:linear-gradient(145deg,#153b61,#0b203b);color:#fff;box-shadow:inset 0 0 0 3px #68ddff12;border-radius:20px}.connected-lab .hm-top .ktile small{color:#cbe4f6}.connected-lab .hm-top .ktile:hover{border-color:#ffda7c}
.connected-lab .sd50{padding:20px;border:1px solid #437da0;border-radius:24px;background:#091e35}.connected-lab .sd50-hero{min-height:0;border:0;background:none}.connected-lab .sd50-copy{padding:0}.connected-lab .sd50-hero::before{content:none}.connected-lab .sd50-card-actions{opacity:1}
.connected-lab .hm-more>.kcard{border-color:#cfac59}.connected-lab .kbar{background:#051226}.connected-lab .kbar>i{background:linear-gradient(90deg,#30bfe5,#ffe093)}
@media(max-width:850px){.connected-lab .lab-command{grid-template-columns:1fr}.connected-lab .lab-command-action{padding:16px}.connected-lab .sd50{padding:14px}}
:root[data-contrast=high] .connected-lab :is(.lab-command,.lab-command-action,.ktile,.sd50,.card,.kcard){background:#000!important;color:#fff!important;box-shadow:none!important;border:2px solid #fff!important}
.connected-lab .lab-command-mascot{width:min(55%,210px);height:auto;float:left;margin:0 18px 10px 0;filter:drop-shadow(0 0 16px #249bed33)}
@media(max-width:500px){.connected-lab .lab-command-mascot{float:none;display:block;width:150px;margin:0 auto 16px}}

/* The dashboard uses the same complete semantic palette as the family forms. */
.connected-lab :is(.lab-command,.sd50,.hm-top .ktile){background:var(--panel);color:var(--text);border-color:var(--line2)}
.connected-lab :is(.lab-command-copy>p:last-child,.hm-top .ktile small){color:var(--muted)}
.connected-lab .lab-kicker{color:var(--blue2)}
:root[data-contrast=high] body.connected-lab{--bg:#000;--bg2:#000;--panel:#000;--panel2:#000;--panel3:#000;--input:#000;--text:#fff;--muted:#fff;--faint:#fff;--gold:#ffeb00;--blue2:#a1eaff;--line:#fff;--line2:#fff;--sky:#000;color-scheme:dark}

.appearance-switch{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2);color:var(--text);text-decoration:none;font:600 12px var(--font);flex-shrink:0}
@media(max-width:600px){.appearance-switch{max-width:84px;white-space:normal;text-align:center;padding:6px}.connected-lab #clock{display:none}}