/* =========================================================================
   BATALANTO LAB — Explore AI (members only, added 2026-10-17)
   Builds on bt.css tokens: same black canvas, Clash Display caps, yellow / orange,
   pastel cards and ghost words. Everything here is prefixed lab-, lx- or hl- so the
   existing app and the public pages are untouched.
   ========================================================================= */

:root { --cobalt: #2d5bff; --cream: #FFF6E0; --lab-grid: rgba(0, 0, 0, .075); --lab-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.c-cobalt { background: var(--cobalt); color: #fff; }
.c-cream { background: var(--cream); color: #000; }
.c-ink { background: #0b0b0b; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(244, 198, 0, .5); }
.c-cream .ghost-word { color: rgba(0, 0, 0, .07); }
.c-cobalt .ghost-word, .c-ink .ghost-word { color: rgba(255, 255, 255, .08); }

/* ---------- Hub hero ---------- */
.lab-hub-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; padding: 24px 20px; background: #0b0b0b; color: #fff; display: grid; gap: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.lab-hub-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-mask-image: radial-gradient(120% 90% at 80% 20%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 90% at 80% 20%, #000 30%, transparent 75%);
}
.lab-hub-hero h1 { font-size: clamp(44px, 13vw, 104px); line-height: .9; font-weight: 700; }
.lab-hub-hero .lede { color: #cfcfcf; font-size: 17px; max-width: 560px; }
.lab-hub-hero .k { color: #a3a3a3; }
.lab-orbit { position: absolute; right: -40px; top: -40px; width: 300px; height: 300px; z-index: -1; opacity: .9; }
.lab-orbit i { position: absolute; display: block; border-radius: 50%; }
.lab-orbit i:nth-child(1) { inset: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.lab-orbit i:nth-child(2) { inset: 50px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.lab-orbit i:nth-child(3) { width: 26px; height: 26px; background: var(--yellow); left: 50%; top: -13px; transform-origin: 13px 163px; }
.lab-orbit i:nth-child(4) { width: 18px; height: 18px; background: var(--orange); left: 50%; top: 41px; transform-origin: 9px 109px; }
.lab-orbit i:nth-child(5) { width: 62px; height: 62px; background: var(--pink); left: 119px; top: 119px; }
.lab-orbit i:nth-child(6) { width: 22px; height: 22px; background: #000; left: 139px; top: 139px; }
@media (prefers-reduced-motion: no-preference) {
  .lab-orbit i:nth-child(3) { animation: lxOrbit 14s linear infinite; }
  .lab-orbit i:nth-child(4) { animation: lxOrbit 9s linear infinite reverse; }
  .lab-orbit i:nth-child(5) { animation: lxPulse 4s ease-in-out infinite; }
}
@keyframes lxOrbit { to { transform: rotate(360deg); } }
@keyframes lxPulse { 50% { transform: scale(1.12); } }
.lab-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-stat { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.lab-stat b { font: 600 22px var(--display); color: var(--yellow); }
.lab-stat span { font: 500 11px var(--display); letter-spacing: .14em; text-transform: uppercase; color: #bdbdbd; }

/* Verbs marquee (reuses .marquee timing) */
.lab-verbs { overflow: hidden; border-block: 1px solid var(--line); padding: 12px 0; margin: 22px 0 4px; }
.lab-verbs div { display: flex; gap: 34px; width: max-content; animation: mq 34s linear infinite; font: 600 20px var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--marq); }
.lab-verbs b { color: var(--ytext); font-weight: 600; }

/* ---------- Space cards ---------- */
.lab-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.lab-grid > * { min-width: 0; }
.lab-card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); padding: 18px; min-height: 230px;
  display: flex; flex-direction: column; gap: 10px; transition: transform .3s var(--ease), box-shadow .3s;
}
@media (hover: hover) { .lab-card:hover { transform: translateY(-4px) rotate(-.35deg); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); } }
.lab-card:focus-visible { outline-offset: 4px; }
.lab-card .ghost-word { right: -8px; bottom: 50px; font-size: 66px; }
.lab-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.lab-card .num { font: 700 42px/1 var(--display); letter-spacing: -.02em; }
.lab-card .glyph { width: 58px; height: 58px; flex: none; transition: transform .6s var(--ease); }
@media (hover: hover) { .lab-card:hover .glyph { transform: rotate(-12deg) scale(1.06); } }
.lab-card .title { font: 600 23px/1.04 var(--display); text-transform: uppercase; margin-top: auto; }
.lab-card .tag { font-size: 14px; opacity: .78; }
.lab-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lab-card .go { width: 44px; height: 44px; border-radius: 50%; background: #000; color: #fff; display: grid; place-items: center; flex: none; transition: transform .25s var(--ease); }
@media (hover: hover) { .lab-card:hover .go { transform: translateX(3px); } }
.lab-card.c-grey .go, .lab-card.c-orange .go, .lab-card.c-cobalt .go, .lab-card.c-ink .go { background: #fff; color: #000; }
.lab-card .seen { font: 600 10.5px var(--display); letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px; border-radius: 99px; background: rgba(0, 0, 0, .78); color: #fff; }
.lab-card.flag { min-height: 300px; }
.lab-card.flag .title { font-size: clamp(28px, 6vw, 40px); }
.lab-card.flag .ghost-word { font-size: 110px; bottom: 40px; }
.lab-flag-k { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px var(--display); letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; background: #000; color: var(--yellow); }
.c-ink .lab-flag-k, .c-cobalt .lab-flag-k { background: var(--yellow); color: #000; }

/* Hazard stripe (security identity) */
.hazard { height: 10px; border-radius: 99px; background: repeating-linear-gradient(-45deg, var(--yellow) 0 10px, #000 10px 20px); }
.c-ink .hazard { margin-top: 2px; }
@media (prefers-reduced-motion: no-preference) { .hazard.run { background-size: 28.28px 28.28px; animation: lxHaz 1.6s linear infinite; } }
@keyframes lxHaz { to { background-position: 28.28px 0; } }

/* ---------- Space hero ---------- */
.lab-hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); padding: 20px; min-height: 280px;
  display: flex; flex-direction: column; gap: 12px;
}
.lab-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--lab-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lab-grid) 1px, transparent 1px); background-size: 26px 26px;
}
.lab-hero.c-grey::before, .lab-hero.c-orange::before, .lab-hero.c-cobalt::before, .lab-hero.c-ink::before { --lab-grid: rgba(255, 255, 255, .07); }
.lab-hero::after {
  content: ''; position: absolute; left: 0; right: 0; top: -40%; height: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(transparent, rgba(255, 255, 255, .22), transparent);
}
@media (prefers-reduced-motion: no-preference) { .lab-hero::after { animation: lxScan 7s cubic-bezier(.4, 0, .2, 1) infinite; } }
@keyframes lxScan { 0% { top: -40%; } 60%, 100% { top: 110%; } }
.lab-hero .ghost-word { font-size: clamp(90px, 22vw, 180px); right: -16px; bottom: -18px; }
.lab-hero .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lab-hero .num { font: 700 64px/0.9 var(--display); letter-spacing: -.03em; }
.lab-hero .glyph { width: 92px; height: 92px; flex: none; }
@media (prefers-reduced-motion: no-preference) { .lab-hero .glyph { animation: bob 6s ease-in-out infinite; } }
.lab-hero h1 { font-size: clamp(34px, 8.6vw, 62px); line-height: .95; margin-top: auto; padding-top: 20px; }
.lab-hero .tagline { font: 500 13px var(--display); letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.lab-hero .intro { font-size: 16px; max-width: 640px; opacity: .88; margin: 0; }
.lab-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 14px; }
.lab-crumbs a { font: 600 11px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
@media (hover: hover) { .lab-crumbs a:hover { color: var(--text); } }
.lab-crumbs span { color: var(--dim); }

/* ---------- Panels ---------- */
.lab-body { display: grid; gap: 16px; margin-top: 16px; }
.lab-body > * { min-width: 0; }
.lab-panel { background: var(--s1); border-radius: var(--r-lg); padding: 18px; box-shadow: inset 0 0 0 1px var(--line); position: relative; min-width: 0; }
.lab-panel > h2, .lab-panel > h3 { margin-bottom: 6px; }
.lab-panel .lede { color: var(--mut); font-size: 15px; margin: 0 0 14px; }
.lab-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lab-h h2 { font-size: 22px; min-width: 0; }
.lab-h > .row { flex-wrap: wrap; }
.lab-k { display: inline-flex; align-items: center; gap: 8px; font: 600 10.5px var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--mut); }
.lab-k::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(244, 198, 0, .15); }
@media (prefers-reduced-motion: no-preference) { .lab-k.live::before { animation: lxBlink 2.2s ease-in-out infinite; } }
@keyframes lxBlink { 50% { box-shadow: 0 0 0 7px rgba(244, 198, 0, 0); } }
.lab-cols { display: grid; gap: 14px; grid-template-columns: 1fr; }
.lab-cols > * { min-width: 0; }
.lab-split { display: grid; gap: 14px; grid-template-columns: 1fr; }
.lab-split > * { min-width: 0; }

/* Explanations (why this matters) */
.lab-explain { border-radius: var(--r-md); padding: 16px; background: var(--s2); display: grid; gap: 8px; }
.lab-explain .lab-k::before { background: var(--sky); box-shadow: 0 0 0 4px rgba(159, 211, 255, .15); }
.lab-explain p { margin: 0; font-size: 15px; }
details.lab-acc { border-radius: 18px; background: var(--s2); overflow: hidden; }
details.lab-acc + details.lab-acc { margin-top: 8px; }
details.lab-acc summary { list-style: none; cursor: pointer; padding: 15px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; font: 600 15px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; }
details.lab-acc summary::-webkit-details-marker { display: none; }
details.lab-acc summary::after { content: '+'; font: 500 24px/1 var(--body); color: var(--ytext); transition: transform .25s var(--ease); flex: none; }
details.lab-acc[open] summary::after { transform: rotate(45deg); }
details.lab-acc .acc-b { padding: 0 16px 16px; color: var(--lede); font-size: 15px; }
details.lab-acc .acc-b ul { margin: 6px 0 0; padding-left: 18px; }
details.lab-acc .acc-b li { margin-bottom: 5px; }

/* Warnings */
.lab-warn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; border-radius: 18px; padding: 14px 16px; background: rgba(244, 198, 0, .1); box-shadow: inset 3px 0 0 var(--yellow); font-size: 14.5px; }
.lab-warn .ic { color: var(--ytext); width: 22px; height: 22px; margin-top: 1px; }
.lab-warn b { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.lab-warn p { margin: 0; }
.lab-warn.hot { background: rgba(235, 100, 52, .14); box-shadow: inset 3px 0 0 var(--orange), inset 0 0 0 1px rgba(235, 100, 52, .35); }
.lab-warn.hot .ic { color: var(--orange); }
.lab-warn.info { background: var(--s2); box-shadow: inset 3px 0 0 var(--sky); }
.lab-warn.info .ic { color: var(--sky); }
[data-theme="light"] .lab-warn.info .ic { color: #1f6fb0; }

/* Simulated vs live label */
.lab-sim { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font: 600 10.5px var(--display); letter-spacing: .12em; text-transform: uppercase; background: var(--s3); color: var(--text); white-space: nowrap; }
.lab-sim::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lilac); }
.lab-sim.spec::before { background: var(--orange); }
.lab-sim.fact::before { background: var(--mint); }

/* ---------- Platforms ---------- */
.lab-plats { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.lab-plat { position: relative; overflow: hidden; border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 172px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); transition: transform .25s var(--ease); }
@media (hover: hover) { .lab-plat:hover { transform: translateY(-2px); } }
.lab-plat .mono { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font: 700 17px var(--display); flex: none; }
.lab-plat .nm { font: 600 17px/1.05 var(--display); text-transform: uppercase; }
.lab-plat .by { font-size: 12px; color: var(--mut); }
.lab-plat .ds { font-size: 13px; color: var(--lede); flex: 1; }
.lab-plat .btn { min-height: 40px; font-size: 12px; padding: 0 12px; border-radius: 11px; }
.lab-plat.p-chatgpt .mono { background: #fff; color: #000; box-shadow: inset 0 0 0 1.5px #000; }
.lab-plat.p-gemini .mono { background: linear-gradient(135deg, #4285F4, #9B72CB 55%, #D96570); color: #fff; }
.lab-plat.p-claude .mono { background: #D97757; color: #1a0f0a; }
.lab-plat.p-deepseek .mono { background: #4D6BFE; color: #fff; }
.lab-plat.p-deepseek { box-shadow: inset 0 0 0 1.5px rgba(235, 100, 52, .55); }
.lab-plat .flag { position: absolute; top: 12px; right: 12px; }
.lab-plat-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-plat-strip a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 5px; border-radius: 99px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); font: 600 12px var(--display); letter-spacing: .06em; text-transform: uppercase; transition: background .2s; }
@media (hover: hover) { .lab-plat-strip a:hover { background: var(--s3); } }
.lab-plat-strip .mono { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--display); }
.lab-plat-strip .p-chatgpt .mono { background: #fff; color: #000; box-shadow: inset 0 0 0 1.5px #000; }
.lab-plat-strip .p-gemini .mono { background: linear-gradient(135deg, #4285F4, #9B72CB 55%, #D96570); color: #fff; }
.lab-plat-strip .p-claude .mono { background: #D97757; color: #1a0f0a; }
.lab-plat-strip .p-deepseek .mono { background: #4D6BFE; color: #fff; }

/* ---------- Inputs ---------- */
.lab-ta { width: 100%; min-height: 150px; padding: 15px 16px; border-radius: 16px; border: 1.5px solid var(--line2); background: var(--s1); color: var(--text); font: 15px/1.55 var(--body); resize: vertical; outline: none; transition: border-color .2s, background .2s; }
.lab-ta:focus { border-color: var(--yellow); background: var(--focus-bg); }
.lab-ta::placeholder { color: var(--ph); }
.lab-in { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 13px; border: 1.5px solid var(--line2); background: var(--s1); color: var(--text); font: 15px var(--body); outline: none; -webkit-appearance: none; appearance: none; }
.lab-in:focus { border-color: var(--yellow); background: var(--focus-bg); }
select.lab-in { background-image: var(--chev); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.lab-pre { white-space: pre-wrap; word-wrap: break-word; background: var(--pre); box-shadow: inset 0 0 0 1px var(--line2); border-radius: 16px; padding: 16px; font: 14px/1.6 var(--body); margin: 0; max-height: 60vh; overflow: auto; }
.lab-pre.mono { font: 12.5px/1.6 var(--lab-mono); }
.lab-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lab-actions .btn { min-height: 44px; }
.lab-range { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; }
.lab-range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--yellow) var(--p, 50%), var(--s3) var(--p, 50%)); }
.lab-range::-moz-range-track { height: 6px; border-radius: 99px; background: var(--s3); }
.lab-range::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--yellow); }
.lab-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--inv); margin-top: -9px; box-shadow: 0 0 0 4px var(--bg), 0 4px 10px rgba(0, 0, 0, .3); transition: transform .15s; }
.lab-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--inv); box-shadow: 0 0 0 4px var(--bg); }
.lab-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.lab-slider { display: grid; gap: 2px; }
.lab-slider .row { justify-content: space-between; }
.lab-slider label, .lab-slider .lbl { font: 500 11px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.lab-slider output { font: 600 14px var(--display); color: var(--ytext); }
.lab-slider .ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); }

/* Meter + score ring */
.lab-meter { height: 10px; border-radius: 99px; background: var(--s3); overflow: hidden; }
.lab-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--yellow); transition: width .6s var(--ease), background .3s; }
.lab-ring { --v: 0; --c: var(--yellow); width: 92px; height: 92px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--s3) 0); transition: --v .6s; position: relative; }
.lab-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--s1); }
.lab-ring b { position: relative; font: 600 26px var(--display); }

/* Checklists */
.lab-checks { display: grid; gap: 8px; }
.lab-check { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: 16px; background: var(--s2); font-size: 14.5px; transition: background .2s; }
.lab-check .bx { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--s3); color: transparent; transition: background .2s, color .2s; }
.lab-check .bx .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.lab-check.ok .bx { background: var(--mint); color: #000; }
.lab-check.miss .bx { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line2); }
.lab-check b { display: block; font-weight: 600; }
.lab-check span { color: var(--mut); font-size: 13.5px; }
label.lab-check { cursor: pointer; }
label.lab-check input { position: absolute; opacity: 0; pointer-events: none; }
label.lab-check:has(input:checked) .bx { background: var(--yellow); color: #000; }
label.lab-check:has(input:focus-visible) { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* Answer chips (yes / no / unsure) */
.lab-q { padding: 14px; border-radius: 18px; background: var(--s2); display: grid; gap: 10px; }
.lab-q .qt { font-weight: 600; }
.lab-q .seg { background: var(--s1); }
.lab-q .seg button { min-height: 38px; font-size: 12px; }
.lab-q .rec { font-size: 14px; color: var(--lede); padding: 10px 12px; border-radius: 12px; background: var(--s1); }
.lab-q .rec.hot { box-shadow: inset 3px 0 0 var(--orange); }
.lab-q .rec.ok { box-shadow: inset 3px 0 0 var(--mint); }

/* ---------- Highlights in analysed text ---------- */
.lab-read { font-size: 15.5px; line-height: 1.75; white-space: pre-wrap; word-wrap: break-word; }
.hl { border-radius: 5px; padding: 1px 2px; cursor: help; transition: background .2s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-claim { background: rgba(159, 211, 255, .22); box-shadow: inset 0 -2px 0 var(--sky); }
.hl-num { background: rgba(244, 198, 0, .22); box-shadow: inset 0 -2px 0 var(--yellow); }
.hl-opinion { background: rgba(243, 168, 230, .2); box-shadow: inset 0 -2px 0 var(--pink); }
.hl-spec { background: rgba(199, 182, 255, .22); box-shadow: inset 0 -2px 0 var(--lilac); }
.hl-risk { background: rgba(235, 100, 52, .22); box-shadow: inset 0 -2px 0 var(--orange); }
.hl-agree { background: rgba(198, 245, 192, .22); box-shadow: inset 0 -2px 0 var(--mint); }
[data-theme="light"] .hl-claim { background: rgba(60, 140, 220, .16); box-shadow: inset 0 -2px 0 #3c8cdc; }
[data-theme="light"] .hl-num { background: rgba(244, 198, 0, .3); box-shadow: inset 0 -2px 0 #c9a300; }
[data-theme="light"] .hl-opinion { background: rgba(200, 80, 180, .14); box-shadow: inset 0 -2px 0 #c850b4; }
[data-theme="light"] .hl-spec { background: rgba(120, 90, 220, .14); box-shadow: inset 0 -2px 0 #785adc; }
[data-theme="light"] .hl-agree { background: rgba(40, 160, 70, .14); box-shadow: inset 0 -2px 0 #28a046; }
.lab-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; color: var(--mut); }
.lab-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lab-legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }

/* Findings list */
.lab-finds { display: grid; gap: 8px; }
.lab-find { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--s2); font-size: 14.5px; align-items: start; }
.lab-find .tg { font: 600 10px var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border-radius: 99px; background: var(--s3); white-space: nowrap; }
.lab-find .tg.claim { background: var(--sky); color: #000; }
.lab-find .tg.num { background: var(--yellow); color: #000; }
.lab-find .tg.opinion { background: var(--pink); color: #000; }
.lab-find .tg.spec { background: var(--lilac); color: #000; }
.lab-find .tg.risk { background: var(--orange); color: #fff; }
.lab-find .tg.agree { background: var(--mint); color: #000; }
.lab-find .q { color: var(--mut); font-size: 13.5px; margin-top: 4px; }

/* ---------- Steps (method) ---------- */
.lab-steps { display: grid; gap: 10px; counter-reset: st; }
.lab-step { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s, background .25s; }
.lab-step .n { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font: 700 26px var(--display); background: var(--s3); transition: background .25s, color .25s; }
.lab-step.on { box-shadow: inset 0 0 0 1.5px var(--yellow); }
.lab-step.on .n { background: var(--yellow); color: #000; }
.lab-step.done .n { background: var(--mint); color: #000; }
.lab-step h3 { font-size: 17px; margin: 4px 0 6px; }
.lab-step p { margin: 0 0 8px; color: var(--lede); font-size: 14.5px; }
.lab-step .more { display: none; }
.lab-step.on .more { display: block; animation: viewIn .3s var(--ease); }

/* ---------- Comparison workspace ---------- */
.cmp-cols { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: thin; }
.cmp-col { flex: none; width: 86%; scroll-snap-align: start; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); padding: 14px; display: grid; gap: 10px; align-content: start; }
.cmp-col .head { display: flex; align-items: center; gap: 10px; }
.cmp-col .head .mono { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font: 700 14px var(--display); flex: none; }
.cmp-col .head .nm { font: 600 16px var(--display); text-transform: uppercase; flex: 1; min-width: 0; }
.cmp-col.p-chatgpt .mono { background: #fff; color: #000; box-shadow: inset 0 0 0 1.5px #000; }
.cmp-col.p-gemini .mono { background: linear-gradient(135deg, #4285F4, #9B72CB 55%, #D96570); color: #fff; }
.cmp-col.p-claude .mono { background: #D97757; color: #1a0f0a; }
.cmp-col.p-deepseek .mono { background: #4D6BFE; color: #fff; }
.cmp-col .lab-ta { min-height: 220px; font-size: 14px; }
.cmp-col .meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--mut); }
.cmp-col .meta span { padding: 3px 8px; border-radius: 99px; background: var(--s2); }
.cmp-matrix { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 14px; }
.cmp-matrix th { text-align: left; font: 600 10.5px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); padding: 0 8px; }
.cmp-matrix td { background: var(--s2); padding: 10px; vertical-align: top; }
.cmp-matrix td:first-child { border-radius: 12px 0 0 12px; }
.cmp-matrix td:last-child { border-radius: 0 12px 12px 0; }
.cmp-dot { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 12px var(--display); }
.cmp-dot.y { background: var(--mint); color: #000; }
.cmp-dot.n { background: var(--s3); color: var(--dim); }
.cmp-dot.x { background: var(--orange); color: #fff; }
.cmp-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.cmp-saved { display: grid; gap: 8px; }
.cmp-saved .li { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--s2); }

/* ---------- Prompt Lab ---------- */
.pl-mode { max-width: 360px; }
.pl-fields { display: grid; gap: 12px; }
.pl-field { display: grid; gap: 6px; }
.pl-field > span { display: flex; justify-content: space-between; gap: 8px; font: 500 11px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.pl-field > span em { font-style: normal; color: var(--dim); letter-spacing: .06em; text-transform: none; font-family: var(--body); font-size: 12px; }
.pl-field textarea.lab-in { min-height: 76px; resize: vertical; line-height: 1.5; }
.pl-score { display: flex; gap: 16px; align-items: center; }
.pl-tpl { display: grid; gap: 8px; grid-template-columns: 1fr; }
.pl-tpl button { text-align: left; padding: 14px; border-radius: 18px; background: var(--s2); display: grid; gap: 4px; transition: background .2s, transform .2s var(--ease); }
@media (hover: hover) { .pl-tpl button:hover { background: var(--s3); transform: translateY(-2px); } }
.pl-tpl b { font: 600 14px var(--display); text-transform: uppercase; }
.pl-tpl span { font-size: 13px; color: var(--mut); }
.pl-ba { display: grid; gap: 10px; grid-template-columns: 1fr; }
.pl-ba > div { border-radius: 18px; padding: 14px; display: grid; gap: 8px; align-content: start; }
.pl-ba .before { background: var(--s2); }
.pl-ba .after { background: rgba(244, 198, 0, .1); box-shadow: inset 0 0 0 1.5px rgba(244, 198, 0, .45); }
.pl-ba .lbl { font: 600 10.5px var(--display); letter-spacing: .16em; text-transform: uppercase; }
.pl-ba .before .lbl { color: var(--mut); }
.pl-ba .after .lbl { color: var(--ytext); }
.pl-ba p { margin: 0; font-size: 14.5px; white-space: pre-wrap; }
.pl-why { font-size: 13.5px; color: var(--mut); }

/* ---------- Prompt library extras ---------- */
.lib-cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 0 16px; }
.lib-cats::-webkit-scrollbar { display: none; }
.lib-cat { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 99px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); font: 600 12px var(--display); letter-spacing: .06em; text-transform: uppercase; transition: background .2s, color .2s; }
.lib-cat i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 14px; }
.lib-cat.on { background: var(--inv); color: var(--inv-t); box-shadow: none; }
.lib-cat b { font-weight: 500; opacity: .6; }
.lib-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.lib-diff { display: inline-flex; align-items: center; gap: 3px; }
.lib-diff i { width: 6px; height: 12px; border-radius: 2px; background: currentColor; opacity: .25; }
.lib-diff i.on { opacity: 1; }
.prompt-card .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--mut); }
.prompt-card .meta .v2 { color: var(--ytext); font: 600 10.5px var(--display); letter-spacing: .12em; text-transform: uppercase; }
.lib-tabs { margin: 4px 0 14px; }
.lib-related { display: grid; gap: 8px; }
.lib-related button { text-align: left; padding: 12px 14px; border-radius: 16px; background: var(--s2); display: flex; gap: 10px; align-items: center; transition: background .2s; }
@media (hover: hover) { .lib-related button:hover { background: var(--s3); } }
.lib-related b { font: 600 13px var(--display); text-transform: uppercase; flex: 1; min-width: 0; }
.lib-banner { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); padding: 16px 18px; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.lib-banner .ghost-word { right: -6px; bottom: -10px; font-size: 64px; }
.lib-banner .t { font: 600 18px/1.1 var(--display); text-transform: uppercase; }
.lib-banner .s { font-size: 13.5px; opacity: .8; }

/* ---------- Footprint ---------- */
.fp-grid { display: grid; gap: 8px; grid-template-columns: 1fr; }
.fp-item { padding: 12px 14px; border-radius: 16px; background: var(--s2); display: grid; gap: 4px; min-width: 0; }
.fp-item .k { font-size: 10px; }
.fp-item .v { font: 500 14px var(--lab-mono); word-break: break-word; }
.fp-item .w { font-size: 12.5px; color: var(--mut); }
.fp-item.risk { box-shadow: inset 3px 0 0 var(--orange); }
.fp-hash { font: 600 clamp(20px, 6vw, 34px) var(--lab-mono); letter-spacing: .06em; color: var(--ytext); word-break: break-all; }
.fp-drop { border: 2px dashed var(--line2); border-radius: 22px; padding: 26px; text-align: center; display: grid; gap: 8px; place-items: center; transition: border-color .2s, background .2s; cursor: pointer; }
.fp-drop.over { border-color: var(--yellow); background: rgba(244, 198, 0, .06); }
@media (hover: hover) { .fp-drop:hover { border-color: var(--yellow); background: rgba(244, 198, 0, .06); } }
.fp-drop .ic { width: 34px; height: 34px; color: var(--ytext); }

/* ---------- Synthetic ---------- */
.syn-pair { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.syn-pair canvas, .syn-canvas { width: 100%; height: auto; border-radius: 18px; display: block; background: #111; cursor: crosshair; }
.syn-opt { display: grid; gap: 8px; }
.syn-opt button { text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--s2); font-size: 14.5px; transition: background .2s, box-shadow .2s; }
@media (hover: hover) { .syn-opt button:hover { background: var(--s3); } }
.syn-opt button.right { box-shadow: inset 0 0 0 2px var(--mint); }
.syn-opt button.wrong { box-shadow: inset 0 0 0 2px var(--orange); }
.syn-opt button[disabled] { cursor: default; }
.syn-card { border-radius: 22px; padding: 18px; background: var(--s2); display: grid; gap: 10px; }
.syn-card .scene { font: 500 18px/1.35 var(--display); }
.syn-wave { display: flex; align-items: center; gap: 3px; height: 54px; }
.syn-wave i { flex: 1; border-radius: 99px; background: var(--lilac); min-height: 4px; }

/* ---------- Algorithm room ---------- */
.alg-feed { display: grid; gap: 8px; }
.alg-post { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: var(--s2); animation: viewIn .35s var(--ease); }
.alg-post .dot { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; }
.alg-post .t { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.alg-post .s { font-size: 12px; color: var(--mut); }
.alg-post .why { font: 500 11px var(--lab-mono); color: var(--dim); }
.alg-post .acts { display: flex; gap: 6px; }
.alg-post .acts button { width: 36px; height: 36px; border-radius: 50%; background: var(--s3); display: grid; place-items: center; transition: background .2s, transform .15s; }
@media (hover: hover) { .alg-post .acts button:hover { background: var(--s4); } }
.alg-post .acts button.on { background: var(--yellow); color: #000; }
.alg-post .acts button:active { transform: scale(.9); }
.alg-bars { display: grid; gap: 6px; }
.alg-bar { display: grid; grid-template-columns: 96px 1fr 40px; gap: 8px; align-items: center; font-size: 12.5px; }
.alg-bar .lab-meter { height: 8px; }
.alg-chart { width: 100%; height: 120px; display: block; }

/* ---------- Persona ---------- */
.ps-chat { display: grid; gap: 10px; }
.ps-bub { max-width: 92%; padding: 12px 15px; border-radius: 20px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.ps-bub.u { justify-self: end; background: var(--yellow); color: #000; border-bottom-right-radius: 6px; }
.ps-bub.a { background: var(--s2); border-bottom-left-radius: 6px; }

/* ---------- Automation ---------- */
.wf-flow { display: grid; gap: 0; }
.wf-node { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s, background .25s; }
.wf-node + .wf-node { margin-top: 22px; }
.wf-node + .wf-node::before { content: ''; position: absolute; left: 33px; top: -22px; width: 2px; height: 22px; background: repeating-linear-gradient(var(--line2) 0 4px, transparent 4px 7px); }
.wf-node .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; }
.wf-node .t { font: 600 14px var(--display); text-transform: uppercase; }
.wf-node .s { font-size: 13px; color: var(--mut); }
.wf-node .ctl { display: flex; gap: 4px; }
.wf-node .ctl button { width: 32px; height: 32px; border-radius: 50%; background: var(--s3); display: grid; place-items: center; }
.wf-node .ctl button .ic { width: 15px; height: 15px; }
.wf-node.trig .ico { background: var(--yellow); color: #000; }
.wf-node.cond .ico { background: var(--lilac); color: #000; }
.wf-node.act .ico { background: var(--mint); color: #000; }
.wf-node.ai .ico { background: var(--pink); color: #000; }
.wf-node.human .ico { background: var(--orange); color: #fff; }
.wf-node.run { box-shadow: inset 0 0 0 2px var(--yellow); background: var(--s3); }
.wf-node.ok { box-shadow: inset 0 0 0 1.5px var(--mint); }
.wf-node.skip { opacity: .5; }
.wf-pal { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-log { font: 12.5px/1.7 var(--lab-mono); background: var(--pre); border-radius: 16px; padding: 14px; box-shadow: inset 0 0 0 1px var(--line2); max-height: 260px; overflow: auto; white-space: pre-wrap; }

/* ---------- Ethics ---------- */
.eth-case { border-radius: var(--r-lg); padding: 18px; display: grid; gap: 12px; }
.eth-args { display: grid; gap: 10px; grid-template-columns: 1fr; }
.eth-arg { padding: 14px; border-radius: 18px; background: var(--s2); font-size: 14.5px; display: grid; gap: 6px; }
.eth-arg .who { font: 600 10.5px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.eth-pos { display: grid; gap: 8px; }
.eth-pos button { text-align: left; padding: 14px; border-radius: 16px; background: var(--s2); display: grid; gap: 4px; transition: background .2s, box-shadow .2s; }
@media (hover: hover) { .eth-pos button:hover { background: var(--s3); } }
.eth-pos button.on { box-shadow: inset 0 0 0 2px var(--yellow); background: var(--s3); }
.eth-pos b { font-weight: 600; }
.eth-pos span { font-size: 13.5px; color: var(--mut); }
.eth-dist { display: grid; gap: 6px; }

/* ---------- Future ---------- */
.fut-out { display: grid; gap: 10px; }
.fut-card { border-radius: 20px; padding: 16px; background: var(--s2); display: grid; gap: 8px; animation: viewIn .35s var(--ease); }
.fut-card h3 { font-size: 16px; }
.fut-card p { margin: 0; font-size: 14.5px; color: var(--lede); }
.fut-sig { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Injection demo ---------- */
.inj-doc { border-radius: 18px; padding: 16px; background: #fff; color: #111; font: 14px/1.6 Georgia, 'Times New Roman', serif; position: relative; }
.inj-doc .hid { color: #fff; font-size: 2px; line-height: 1; }
.inj-doc.reveal .hid { color: #c2410c; font-size: 13px; background: rgba(235, 100, 52, .12); outline: 1.5px dashed #c2410c; border-radius: 4px; padding: 2px 4px; font-family: var(--lab-mono); line-height: 1.5; }
.inj-mail { border-radius: 18px; background: var(--s2); padding: 14px; font-size: 14px; display: grid; gap: 6px; }
.inj-mail .hdr { font: 12.5px/1.5 var(--lab-mono); color: var(--mut); }
.inj-spot { cursor: pointer; border-radius: 4px; transition: background .2s; }
@media (hover: hover) { .inj-spot:hover { background: rgba(244, 198, 0, .18); } }
.inj-spot.found { background: rgba(235, 100, 52, .25); box-shadow: inset 0 -2px 0 var(--orange); }

/* Related + next */
.lab-next { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); padding: 20px; display: grid; gap: 12px; }
.lab-next .ghost-word { right: -10px; bottom: -12px; font-size: 80px; }
.lab-next .t { font: 600 clamp(22px, 5vw, 30px)/1.02 var(--display); text-transform: uppercase; }
.lab-rel { display: grid; gap: 10px; grid-template-columns: 1fr; }
.lab-rel a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, transform .2s var(--ease); }
@media (hover: hover) { .lab-rel a:hover { background: var(--hover); transform: translateX(3px); } }
.lab-rel .sw { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; font: 700 15px var(--display); }
.lab-rel b { font: 600 14px var(--display); text-transform: uppercase; display: block; }
.lab-rel span.s { font-size: 12.5px; color: var(--mut); }

/* Admin lab card */
.lab-admin-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lab-admin-row:last-child { border-bottom: 0; }

/* Light theme tweaks */
[data-theme="light"] .lab-hub-hero { box-shadow: 0 18px 40px rgba(60, 40, 0, .14); }
@media (hover: hover) { [data-theme="light"] .lab-card:hover { box-shadow: 0 18px 40px rgba(60, 40, 0, .16); } }
[data-theme="light"] .pl-ba .after { background: rgba(244, 198, 0, .16); }
[data-theme="light"] .lab-warn { background: rgba(244, 198, 0, .16); }
[data-theme="light"] .lab-warn.hot { background: rgba(235, 100, 52, .1); }
[data-theme="light"] .lab-warn.info { background: var(--s2); }

/* ---------- iPad ---------- */
@media (min-width: 760px) {
  .lab-hub-hero { padding: 34px; }
  .lab-orbit { width: 380px; height: 380px; right: -30px; top: -60px; }
  .lab-orbit i:nth-child(3) { transform-origin: 13px 203px; }
  .lab-orbit i:nth-child(4) { transform-origin: 9px 149px; }
  .lab-orbit i:nth-child(5) { left: 159px; top: 159px; }
  .lab-orbit i:nth-child(6) { left: 179px; top: 179px; }
  .lab-grid { grid-template-columns: 1fr 1fr; }
  .lab-grid.flags { grid-template-columns: 1fr 1fr; }
  .lab-hero { padding: 28px; min-height: 320px; }
  .lab-panel { padding: 22px; }
  .lab-cols { grid-template-columns: 1fr 1fr; }
  .lab-plats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lab-rel { grid-template-columns: 1fr 1fr; }
  .cmp-cols { margin: 0; padding: 2px 0 8px; }
  .cmp-col { width: calc(50% - 6px); }
  .pl-tpl { grid-template-columns: 1fr 1fr; }
  .pl-ba { grid-template-columns: 1fr 1fr; }
  .fp-grid { grid-template-columns: 1fr 1fr; }
  .eth-args { grid-template-columns: 1fr 1fr; }
  .lib-cats { margin: 0 0 12px; padding: 0; flex-wrap: wrap; overflow: visible; }
}
@media (min-width: 1180px) {
  .lab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lab-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .lab-split.even { grid-template-columns: 1fr 1fr; }
  .lab-split > .sticky { position: sticky; top: 84px; }
  .cmp-cols { overflow: visible; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cmp-col { width: auto; }
  .fp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lab-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 419px) {
  .lab-plats { grid-template-columns: 1fr; }
  .lab-plat { min-height: 0; }
  .lab-hero .glyph { width: 70px; height: 70px; }
  .lab-hero .num { font-size: 52px; }
}
@media print {
  body.authed .side, body.authed .tabbar, body.authed .topbar, .lab-actions, .no-print { display: none !important; }
  .view { padding: 0 !important; }
  .lab-panel { box-shadow: none; border: 1px solid #ccc; }
}
.lib-banner .glyph { width: 56px; height: 56px; flex: none; }
.gl-s { width: 30px; height: 30px; display: block; }
/* Long Dutch and German compounds (Automatiseringsspeeltuin) must not push past the edge */
.lab-next .t, .lab-card .title, .lab-hero h1, .lib-banner .t, .lab-rel b, .eth-case h2, .fut-out h2 { overflow-wrap: anywhere; }
/* Ghost buttons inherited white text, invisible on the light theme inside the app */
body.authed .btn.ghost { color: var(--text); }

/* 2026-10-18: titles with a very long word scale down so the word stays whole */
.lab-card { container-type: inline-size; }
.lab-card .title.fit { overflow-wrap: normal; word-break: keep-all; font-size: min(23px, calc((100cqw - 36px) / (var(--ch) * .6))); }
.lab-card.flag .title.fit { font-size: min(40px, calc((100cqw - 36px) / (var(--ch) * .6))); }

/* 2026-10-18: lab hero titles keep whole words too (fitText in core.js shrinks them) */
.lab-hero h1 { overflow-wrap: normal; }