/* Teddy's Future Lab — approved futuristic look ("Future Glass"), R5.
   Applies ONLY to lab.html (html[data-gui="future"]) in the dark look and never when strong contrast is on. Classic V1 does not load it.
   Source of the look: APPROVED_VISUAL_REFERENCES/SHOWCASE_20_PANELS_EXACT.png — deep navy glass, cyan neon edges, glossy blue buttons,
   glowing icon tiles. Pure CSS: every control stays a real link/button; nothing is painted. */
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]){--fg-neon:#38c6ff;--fg-neon-2:#7fe3ff;--fg-gold:#ffd166;
 --fg-glass:linear-gradient(180deg,rgba(18,58,122,.86) 0%,rgba(7,26,64,.93) 60%,rgba(4,16,44,.96) 100%);
 --fg-edge:0 0 0 1px rgba(80,200,255,.7),0 0 18px rgba(40,170,255,.36),inset 0 0 26px rgba(70,180,255,.12);
 --fg-btn:linear-gradient(180deg,#7ad9ff 0%,#2b9af0 18%,#1468d4 55%,#0a3f98 100%);
 --fg-btn-edge:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -3px 6px rgba(0,20,70,.55),0 0 0 1px #8fe1ff,0 0 12px rgba(56,198,255,.5),0 3px 0 #03204f}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]),:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) body,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) body.kid-mode{--bg:#040c24;--bg2:#071637;--panel:#0b214b;--panel2:#0f2b5e;--panel3:#143672;--line:#1d5596;--line2:#3fb6ff;--text:#f2f8ff;--muted:#b9cff0;--faint:#86a3cf;
 --gold:#ffcb3d;--gold2:#ffe27f;--gold-ink:#2a1a00;--blue:#2f9bff;--blue2:#7fd6ff;--chip:#0e2a60;--input:#061633;--her:#0c2350;
 --glow:0 0 0 1px rgba(80,200,255,.6),0 0 20px rgba(40,170,255,.28),0 10px 30px rgba(0,0,0,.45);--shadow:0 10px 30px rgba(0,0,0,.45);
 --bar:linear-gradient(180deg,rgba(10,34,82,.97),rgba(5,18,48,.97));--bar-ink:#ffffff;--card-shade:rgba(0,0,0,.3);
 --sky:radial-gradient(1100px 620px at 82% -12%,rgba(56,160,255,.42),transparent 60%),radial-gradient(900px 600px at -8% 104%,rgba(96,70,255,.30),transparent 60%),radial-gradient(700px 420px at 50% 120%,rgba(30,200,255,.18),transparent 70%),linear-gradient(180deg,#030a20 0%,#061a40 55%,#08214f 100%)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) body{background:var(--sky);background-attachment:fixed}

/* ---------- top bar ---------- */
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) #topbar,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) #app.kid #topbar{background:var(--bar);color:#fff;border-bottom:1px solid rgba(80,200,255,.65);box-shadow:0 0 22px rgba(40,170,255,.32),0 6px 18px rgba(0,0,0,.4)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) #topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,#7fe3ff 30%,#38c6ff 50%,#7fe3ff 70%,transparent);pointer-events:none}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) #app.kid #topbar .kstat,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) #app.kid #topbar .grownup-btn{background:linear-gradient(180deg,rgba(32,98,190,.75),rgba(10,40,98,.85));border:1px solid rgba(127,227,255,.85);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 10px rgba(56,198,255,.35)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) #app.kid #topbar .grownup-btn{border-style:dashed}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) #app.kid #topbar .kme{background:linear-gradient(180deg,rgba(32,98,190,.85),rgba(10,40,98,.92));border:1px solid #8fe1ff;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 12px rgba(56,198,255,.45)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) #app.kid #topbar .kme .av{background:#0e2a60}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) #app.kid #topbar .kstat.talk-toggle{background:var(--fg-btn);border:0;color:#fff;box-shadow:var(--fg-btn-edge)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) #app.kid #topbar .kstat.talk-toggle.on{background:linear-gradient(180deg,#ffe58a,#ffc21a 55%,#d99100);color:#2a1a00;box-shadow:inset 0 1px 0 #fff8,0 0 0 1px #ffe9a8,0 0 16px rgba(255,209,102,.7)}

/* ---------- side navigation ---------- */
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) #sidebar,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) #app.kid #sidebar{background:linear-gradient(180deg,rgba(7,24,58,.94),rgba(4,14,38,.96));border-right:1px solid rgba(80,200,255,.45);box-shadow:inset -12px 0 24px rgba(40,140,255,.08)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .knav{color:#e6f2ff;border:1px solid transparent;border-radius:14px}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .knav .ico{background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.45),rgba(255,255,255,0) 46%),linear-gradient(160deg,color-mix(in srgb,var(--c,var(--blue)) 85%,#fff 0%),color-mix(in srgb,var(--c,var(--blue)) 55%,#001a4a));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(160,230,255,.55),0 0 10px color-mix(in srgb,var(--c,var(--blue)) 55%,transparent)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .knav:hover{background:rgba(30,90,180,.35);border-color:rgba(127,227,255,.55)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .knav.active{background:linear-gradient(90deg,rgba(40,150,255,.55),rgba(14,56,130,.35));border-color:#7fe3ff;color:#fff;box-shadow:0 0 16px rgba(56,198,255,.45),inset 0 1px 0 rgba(255,255,255,.25)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .knav.active .ico{background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 46%),var(--c,var(--blue))}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .navlink{color:#e6f2ff;border-radius:12px}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .navlink .ico{background:linear-gradient(160deg,#2b8cf0,#0c3d8f);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 8px rgba(56,198,255,.4)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .navlink:hover{background:rgba(30,90,180,.35)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .navlink.active{background:linear-gradient(90deg,rgba(40,150,255,.5),rgba(14,56,130,.3));box-shadow:inset 0 0 0 1px #7fe3ff,0 0 14px rgba(56,198,255,.4);color:#fff}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .navgroup{color:#7fd6ff;letter-spacing:.12em}

/* ---------- page headers ---------- */
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) body.kid-mode .khead,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) body.kid-mode[data-page] .khead{background:var(--fg-glass);background-color:transparent;color:#fff;border-radius:22px;box-shadow:var(--fg-edge),inset 4px 0 0 color-mix(in srgb,var(--c,var(--blue)) 85%,#fff 0%)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) body.kid-mode .khead::after{background:radial-gradient(circle,color-mix(in srgb,var(--c,var(--blue)) 40%,transparent),transparent 70%)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) body.kid-mode .khead h1{color:#fff;text-shadow:0 0 16px rgba(80,190,255,.6)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) body.kid-mode .khead p{color:#cfe4ff}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) body.kid-mode .khead .emoji,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .pagehead .emoji{background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.5),rgba(255,255,255,0) 46%),linear-gradient(160deg,#3fb2ff,#1650c9 60%,#2a1f8f);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(160,230,255,.9),0 0 14px rgba(56,198,255,.55)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) body.kid-mode .khead .back{background:rgba(20,70,150,.6);border:1px solid #8fe1ff;color:#fff;box-shadow:0 0 10px rgba(56,198,255,.4)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .pagehead h1{color:#fff;text-shadow:0 0 16px rgba(80,190,255,.5)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .pagehead p{color:#cfe4ff}

/* ---------- glass cards ---------- */
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .kcard,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .card{background:var(--fg-glass);border:0;border-radius:20px;box-shadow:var(--fg-edge);color:var(--text)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .kcard>h2,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .kcard>h3,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .card h2,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .card h3{color:#fff}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .card.click:hover{box-shadow:var(--fg-edge),0 0 26px rgba(56,198,255,.45)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .stat{background:var(--fg-glass);box-shadow:var(--fg-edge);border:0;border-radius:18px}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .stat .v{color:#fff;text-shadow:0 0 12px rgba(80,190,255,.6)}

/* ---------- icon tiles ---------- */
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .ktile{color:#fff;background:linear-gradient(180deg,rgba(32,98,190,.95) 0%,rgba(10,42,104,.98) 70%,rgba(5,22,62,1) 100%);border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -6px 14px rgba(0,10,40,.6),0 0 0 1px color-mix(in srgb,var(--c,#7fd8ff) 70%,#bff0ff),0 0 16px color-mix(in srgb,var(--c,#38c6ff) 45%,transparent)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .ktile .e{display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:.42em;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.45),rgba(255,255,255,0) 46%),linear-gradient(160deg,color-mix(in srgb,var(--c,#3fb2ff) 90%,#fff 0%),color-mix(in srgb,var(--c,#1650c9) 55%,#0a1450));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(200,240,255,.6),0 0 14px color-mix(in srgb,var(--c,#38c6ff) 60%,transparent)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .ktile:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px #bff0ff,0 0 24px rgba(56,198,255,.6)}

/* ---------- buttons, chips, tabs ---------- */
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .kbtn{position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 6px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--c) 55%,#cfefff),0 0 12px color-mix(in srgb,var(--c) 55%,transparent),0 3px 0 color-mix(in srgb,var(--c) 45%,#000)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .kbtn:not(.gold):not(.green):not(.red):not(.purple):not(.pink):not(.orange):not(.ghost){background:var(--fg-btn);color:#fff}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .kbtn.ghost{background:rgba(14,46,104,.75);color:#fff;box-shadow:inset 0 0 0 1px #7fe3ff,0 0 10px rgba(56,198,255,.3)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .btn{border-radius:12px}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .btn.primary,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .btn.blue{background:var(--fg-btn);color:#fff;border:0;box-shadow:var(--fg-btn-edge)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .btn.ghost,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .btn:not(.primary):not(.blue):not(.gold):not(.danger){background:rgba(14,46,104,.7);color:#fff;border:1px solid rgba(127,227,255,.8);box-shadow:0 0 10px rgba(56,198,255,.25)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .kchip,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .chip,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .tab{background:rgba(14,46,104,.7);color:#e6f2ff;border:1px solid rgba(127,227,255,.6)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .kchip.on,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .chip.on,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) .tab.on{background:var(--fg-btn);color:#fff;border-color:#bff0ff;box-shadow:0 0 14px rgba(56,198,255,.55)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) input:not([type=checkbox]):not([type=radio]):not([type=range]),:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) select,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) textarea{background:#061633;color:#f2f8ff;border:1px solid rgba(80,200,255,.6);box-shadow:inset 0 0 12px rgba(40,140,255,.15)}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) input::placeholder,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) textarea::placeholder{color:#8fb1dc}
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) input:focus,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) select:focus,:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) textarea:focus{outline:2px solid #7fe3ff;outline-offset:1px;box-shadow:0 0 14px rgba(56,198,255,.5)}

/* ---------- mobile tab bar ---------- */
:root[data-gui="future"][data-theme="dark"]:not([data-contrast="high"]) #tabbar{background:linear-gradient(180deg,rgba(7,24,58,.96),rgba(3,12,32,.98));border-top:1px solid rgba(80,200,255,.6);box-shadow:0 -6px 20px rgba(40,140,255,.2)}