/* LLMinONE — Dream Machine (Windows-style desktop, light default) */
* { box-sizing: border-box; }
:root {
  --accent: #0067c0;
  --accent-2: #8b5cf6;
  --ink: #1a1a1a;
  --mut: #5f6368;
  --line: #e3e3e3;
  --win-bg: #ffffff;
  --bar: #f3f3f3;
  --cta: linear-gradient(120deg, #0067c0, #5b2fd6);

  /* light theme (default) */
  --wall:
    radial-gradient(90% 70% at 15% 10%, #d6e7ff 0%, transparent 55%),
    radial-gradient(80% 70% at 88% 6%, #eadfff 0%, transparent 52%),
    radial-gradient(100% 100% at 50% 112%, #d5f0f5 0%, transparent 55%),
    linear-gradient(160deg, #eef2f9 0%, #f7f9fd 55%, #eaf0f8 100%);
  --dot: rgba(28, 48, 100, .07);
  --boot-ink: #16233a;
  --boot-sub: #5b6a85;
  --boot-link: #3f62c8;
  --taskbar: rgba(255, 255, 255, .93);
  --taskbar-border: rgba(0, 0, 0, .08);
  --task-ink: #131a26;
  --task-dim: #1a2230;
  --task-btn: rgba(0, 0, 0, .05);
  --task-btn-hover: rgba(0, 0, 0, .1);
  --task-btn-on: rgba(0, 0, 0, .12);
  --menu-bg: #ffffff;
  --menu-border: rgba(0, 0, 0, .12);
  --menu-hover: #eef3fb;
  --menu-label: #686f7d;
  --quick-bg: rgba(255, 255, 255, .6);
  --quick-border: rgba(28, 48, 100, .16);
  --quick-ink: #16233a;
  --quick-ico: #3f62c8;
}
[data-theme="dark"] {
  --wall:
    radial-gradient(120% 90% at 12% 8%, #173a6b 0%, transparent 55%),
    radial-gradient(110% 90% at 90% 12%, #4b2a86 0%, transparent 52%),
    radial-gradient(120% 120% at 50% 110%, #0d3a5c 0%, transparent 60%),
    linear-gradient(160deg, #0a1430 0%, #0b1020 55%, #0a1a2e 100%);
  --dot: rgba(255, 255, 255, .06);
  --boot-ink: #eaf2ff;
  --boot-sub: #b9c4dd;
  --boot-link: #9fb4e8;
  --taskbar: rgba(24, 28, 40, .74);
  --taskbar-border: rgba(255, 255, 255, .08);
  --task-ink: #dbe4f7;
  --task-dim: #8b97b8;
  --task-btn: rgba(255, 255, 255, .06);
  --task-btn-hover: rgba(255, 255, 255, .13);
  --task-btn-on: rgba(255, 255, 255, .18);
  --menu-bg: #161b28;
  --menu-border: rgba(255, 255, 255, .1);
  --menu-hover: rgba(255, 255, 255, .08);
  --menu-label: #8b97b8;
  --quick-bg: rgba(255, 255, 255, .07);
  --quick-border: rgba(255, 255, 255, .14);
  --quick-ink: #eaf2ff;
  --quick-ico: #7dd3fc;
}

html, body { margin: 0; height: 100%; }
body {
  font: 14.5px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  color: var(--ink);
  background: #0b1020;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
button { font: inherit; cursor: pointer; }
/* r9-accent: the resting link is parked off-screen, so any background walk resolves its
   backdrop to body's #0b1020 and the accent ink measures 3.59:1 (check-site-paths:
   skip-link contrast on start [de]+[en]). The plate this link paints in is white in EVERY
   theme, so ink and ring must be the ON-WHITE pair — #0b6ad0 = 5.27:1, ring #0b4ea2 =
   8:1 — never the dark-surface pair (--accent #0a84ff = 3.65:1 on white, dark
   --focus-ring #8ab4f8 = 1.95:1 on white). Paint only; the :focus geometry is untouched. */
.skip { position: absolute; left: -9999px; top: 0; background: #fff; color: #0b6ad0; }
.skip:focus { left: 12px; top: 12px; z-index: 1000; padding: 8px 12px; border-radius: 8px; }

/* ---------- desktop + wallpaper ---------- */
.desktop { position: fixed; inset: 0 0 var(--tb-h, 48px) 0; overflow: hidden; }
.wallpaper { position: absolute; inset: 0; background: var(--wall); transition: background .4s ease; }
.wallpaper::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: linear-gradient(#000, transparent 90%);
}
.win-layer { position: absolute; inset: 0; }
/* floating magic dust */
.magic-dust { position: absolute; bottom: -12px; border-radius: 50%; pointer-events: none; opacity: 0; animation: dustRise linear infinite; will-change: transform, opacity; }
@keyframes dustRise { 0% { transform: translateY(0) scale(.5); opacity: 0; } 12% { opacity: .85; } 55% { opacity: .4; } 100% { transform: translateY(-96vh) scale(1.1); opacity: 0; } }

/* ---------- boot hint ---------- */
.boot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; color: var(--boot-ink); max-width: 660px; padding: 24px; width: calc(100% - 32px);
}
.boot-logo {
  font-size: 46px; line-height: 1; margin-bottom: 10px;
  background: linear-gradient(120deg, #22d3ee, #8b5cf6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: float 5s ease-in-out infinite, logoGlow 3.2s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes logoGlow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(34,211,238,.45)); } 50% { filter: drop-shadow(0 0 15px rgba(139,92,246,.9)); } }
.boot h1 {
  margin: 0; font-size: 34px; letter-spacing: .5px; font-weight: 700;
  background: linear-gradient(100deg, #0ea5e9, #8b5cf6 35%, #ec4899 65%, #0ea5e9);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }
.boot-tag { margin: 8px 0 22px; color: var(--boot-sub); font-size: 15px; }
.cta {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 10px; padding: 12px 22px; font-weight: 600; font-size: 15px;
  background: var(--cta); color: #fff;
  box-shadow: 0 8px 26px rgba(34, 120, 255, .35);
}
.cta:hover { filter: brightness(1.08); }
.cta.sm { padding: 9px 16px; font-size: 14px; }
.cta .material-symbols-outlined { font-size: 20px; }
.quick { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.quick button {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--quick-bg); border: 1px solid var(--quick-border);
  color: var(--quick-ink); border-radius: 999px; padding: 9px 16px; font-weight: 500;
  backdrop-filter: blur(8px);
}
.quick button:hover { filter: brightness(1.04); border-color: var(--accent); }
.quick .material-symbols-outlined { font-size: 18px; color: var(--quick-ico); }
.boot-foot { margin-top: 22px; font-size: 12px; color: var(--boot-sub); }
.boot-foot a { color: var(--boot-link); margin: 0 4px; }
.boot-how { margin-top: 16px; font-size: 12px; color: var(--boot-sub); }
.boot-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 14px 0 0; font-size: 13.5px; }
.boot-links a { color: var(--boot-link, #3f62c8); text-decoration: none; border-bottom: 1px solid transparent; }
.boot-links a:hover { border-bottom-color: currentColor; }
.boot[hidden] { display: none; }

/* ---------- window ---------- */
.win {
  position: absolute; display: flex; flex-direction: column;
  min-width: 280px; min-height: 180px; width: 520px; height: 420px;
  background: var(--win-bg); border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 14px 44px rgba(0,0,0,.42);
  animation: win-in .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes win-in { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
.win.max { left: 4px !important; top: 4px !important; width: calc(100% - 8px) !important; height: calc(100% - 8px) !important; border-radius: 8px; }
.win-bar {
  display: flex; align-items: center; gap: 9px; height: 40px; flex: 0 0 40px;
  background: var(--bar); border-bottom: 1px solid var(--line);
  padding: 0 8px 0 12px; user-select: none; cursor: default;
}
.win-ico { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; color: #fff; font-size: 12px; flex: 0 0 20px; }
.win-title { flex: 1 1 auto; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-ctl { display: flex; flex: 0 0 auto; }
.win-ctl button {
  width: 40px; height: 32px; border: 0; background: transparent; color: #3a3a3a;
  font-size: 12px; display: grid; place-items: center; border-radius: 6px;
}
.win-ctl button:hover { background: rgba(0,0,0,.08); }
.win-ctl button.close:hover { background: #e81123; color: #fff; }
.win-body { flex: 1 1 auto; position: relative; min-height: 0; background: #fff; }
.win-body iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* play-only artifact stage: the app runs instantly; slim toolbar, no code ever */
.art-stage { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.art-bar { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--bar); flex: 0 0 auto; }
.art-kind { font-size: 16px; color: var(--accent); }
.art-title { font-size: 12px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; min-width: 0; }
.art-flex { flex: 1 1 auto; }
.art-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: #fff; color: #33415e; font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 7px; cursor: pointer; flex: 0 0 auto; white-space: nowrap; }
.art-btn:hover { border-color: var(--accent); color: var(--accent); }
.art-btn.danger:hover { border-color: #e0555f; color: #b3404a; }
.art-btn .material-symbols-outlined { font-size: 15px; }
.art-frame { flex: 1 1 auto; min-height: 0; position: relative; }
.art-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
[data-theme="dark"] .art-bar { background: rgba(255,255,255,.05); }
[data-theme="dark"] .art-btn { background: #1a2130; color: #c3cfe8; border-color: rgba(255,255,255,.12); }
.win.drag { transition: none; }

.win-building .win-body { display: grid; place-items: center; }
.build-progress { text-align: center; color: var(--mut); }
.build-progress .bp-orb { position: relative; width: 68px; height: 68px; margin: 0 auto 16px; }
.build-progress .bp-orb::before {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft, #c5f27740), transparent 70%);
  animation: bpGlow 2.4s ease-in-out infinite;
}
.build-progress .bp-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-soft, #c5f277) 45%, transparent 75%, var(--accent));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  animation: spin 1.1s linear infinite;
}
.build-progress .bp-ico {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 28px; color: var(--accent); animation: bpPulse 2.2s ease-in-out infinite;
}
.build-progress .bp-status { font-size: 14px; font-weight: 600; color: var(--ink, #1a1a1a); margin-bottom: 4px; min-height: 18px; }
.build-progress .bp-time { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }
.cbubble .chat-tick { display: block; font-size: 11px; color: var(--mut); margin-top: 6px; font-variant-numeric: tabular-nums; }
.cbubble .stream-status { display: block; font-size: 11px; color: var(--mut); margin-top: 6px; font-variant-numeric: tabular-nums; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bpGlow { 0%, 100% { opacity: .5; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes bpPulse { 0%, 100% { opacity: .5; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }

/* ---------- v16-menu-dd: app list as a dropdown in the start menu ---------- */
.sm-dd { display: block; }
.sm-dd-sum { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; border-radius: 9px; cursor: pointer; font-size: 13.5px; color: var(--ink); list-style: none; }
.sm-dd-sum::-webkit-details-marker { display: none; }
.sm-dd-sum:hover { background: var(--menu-hover); }
.sm-dd-sum .material-symbols-outlined { font-size: 18px; color: var(--accent); }
.sm-dd[open] .sm-dd-sum { background: var(--menu-hover); }
.sm-ddc { margin-left: auto; font-size: 11px; font-weight: 700; color: #6b7280; background: rgba(0,0,0,.07); border-radius: 999px; padding: 1px 8px; }
[data-theme=dark] .sm-ddc { background: rgba(255,255,255,.1); color: #cbd5e1; }
.sm-dd .sm-chev { margin-left: 2px; transition: transform .18s ease; }
.sm-dd[open] .sm-chev { transform: rotate(90deg); }
.sm-dd #projFilter { width: calc(100% - 12px); margin: 2px 6px 6px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--menu-border); background: var(--menu-bg); color: var(--ink); font-size: 13px; }
/* a CLOSED <details> keeps its children's layout box in Chrome (content-visibility) — the
   collapsed app list still pushed the menu to its max height. Take it out of the layout. */
.sm-dd:not([open]) > *:not(summary) { display: none; }   /* a closed <details> still reserves layout in Chrome */
.sm-dd:not([open]) .sm-projects, .sm-dd:not([open]) #projFilter { display: none; }
.sm-dd .sm-projects { max-height: 38vh; overflow: auto; padding-left: 6px; }
.sm-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-cur { color: var(--accent); font-weight: 700; }
/* ---------- taskbar ---------- */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--tb-h, 48px); min-height: 48px;
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: var(--taskbar); backdrop-filter: blur(20px);
  border-top: 1px solid var(--taskbar-border); z-index: 70;
}
.start-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; flex: 0 0 auto;
  /* a11y A6: the bright --cta gradient held white text at only 4.23:1; a deeper, same-hue
     gradient keeps the white-ink CTA look and clears the worst gradient pixel with margin */
  border: 0; border-radius: 8px; background: linear-gradient(120deg, #1d4ed8, #5b21b6);
  color: #fff; padding: 0 12px; font-weight: 600;
}
.start-btn .material-symbols-outlined { font-size: 18px; }
.task-items { display: flex; gap: 6px; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.task-items::-webkit-scrollbar { display: none; }
.task-item {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; max-width: 180px;
  border: 0; border-radius: 8px; background: var(--task-btn); color: var(--task-ink);
  padding: 0 12px; font-size: 12.5px; white-space: nowrap;
}
.task-item:hover { background: var(--task-btn-hover); }
.task-item.on { background: var(--task-btn-on); box-shadow: inset 0 -2px 0 var(--accent); }
.task-item .material-symbols-outlined { font-size: 16px; color: var(--accent); }
.task-item span { overflow: hidden; text-overflow: ellipsis; }
.tb-composer {
  display: flex; align-items: center; gap: 6px; flex: 0 1 340px; min-width: 120px;
  height: auto; min-height: 34px; background: var(--task-btn); border: 1px solid var(--taskbar-border);
  border-radius: 8px; padding: 3px 4px 3px 12px;
}
.tb-composer textarea {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0; resize: none;
  color: var(--task-ink); font: 13px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; padding: 3px 0;
  /* a11y 2.5.8: the target was 18.84px high (13px x 1.45) — below the 24px AA minimum at
     every width. padding 3px 0 lifts it to 24.85px; the line box inside keeps its position
     (composer content 24.85+6 = 30.85 < min-height 34px), so no box moves: measured
     .tb-composer 340x34, .taskbar 1440x48 desktop / 390x52 mobile, before and after. */
}
.tb-composer textarea::placeholder { color: var(--task-dim); }
.tb-send {
  display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: var(--cta); color: #fff; flex: 0 0 auto;
}
.tb-send .material-symbols-outlined { font-size: 16px; }
.task-right { display: flex; align-items: center; gap: 12px; color: var(--task-ink); font-size: 12px; margin-left: auto; flex: 0 0 auto; }
.engine-dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; }
.engine-dot.live { background: #34d399; box-shadow: 0 0 8px #34d399; }
.engine-dot.demo { background: #f5a97f; }
.ver { font-size: 10px; color: var(--task-dim); opacity: .75; letter-spacing: .3px; }

/* ---------- start menu (all-text) ---------- */
.start-menu {
  position: fixed; left: 10px; bottom: calc(var(--tb-h, 48px) + 8px); z-index: 80; width: 288px;
  max-height: calc(100vh - 70px); overflow-y: auto; overflow-x: hidden;
  background: var(--menu-bg); border: 1px solid var(--menu-border); border-radius: 14px;
  box-shadow: 0 22px 70px rgba(0,0,0,.32);
  padding: 8px; animation: menu-in .16s ease;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.sm-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--menu-border); }
.sm-logo { font-size: 22px; background: linear-gradient(120deg, #22d3ee, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sm-head b { display: block; color: var(--task-ink); font-size: 14px; }
.sm-head small { color: var(--menu-label); font-size: 11px; }
.sm-group { padding: 6px 0; }
.sm-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--menu-label); padding: 4px 12px; }
.sm-group button, .sm-group a {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--task-ink); border-radius: 8px;
  padding: 9px 12px; font-size: 13.5px; text-decoration: none; white-space: nowrap;
}
.sm-group button:hover, .sm-group a:hover { background: var(--menu-hover); }
.sm-group button .material-symbols-outlined, .sm-group a .material-symbols-outlined { width: 22px; flex: 0 0 22px; text-align: center; }
/* v11 — "For industries/education/life/work" submenus */
.sm-sub { justify-content: flex-start; font-weight: 600; }
.sm-sub .sm-chev { margin-left: auto; font-size: 17px; color: var(--menu-label); transition: transform .16s ease; }
.sm-sub.open .sm-chev { transform: rotate(90deg); }
.sm-submenu { margin: 2px 8px 2px 8px; padding: 4px; border-left: 2px solid var(--line, #e5e7eb); background: var(--quick-bg, rgba(255,255,255,.5)); border-radius: 0 8px 8px 0; max-height: 34vh; overflow-y: auto; }
.sm-submenu .sm-subitem { font-size: 12.5px; padding: 7px 10px; border-radius: 7px; }
.sm-submenu .sm-subitem .material-symbols-outlined { font-size: 16px; width: 18px; flex: 0 0 18px; }
.start-menu[hidden] { display: none; }

/* ---------- wizard ---------- */
.wizard {
  border: 0; border-radius: 14px; padding: 0; max-width: 560px; width: calc(100% - 24px);
  background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.wizard::backdrop { background: rgba(6, 10, 22, .5); backdrop-filter: blur(3px); }
.wiz-body { padding: 20px 22px 16px; }
.wiz-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.wiz-ico { font-size: 26px; line-height: 1; }
.wiz-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: #1a1a1a; }
.wiz-head p { margin: 2px 0 0; color: #5f6368; font-size: 13px; }
.wiz-x { margin-left: auto; border: 0; background: transparent; color: #5f6368; font-size: 22px; line-height: 1; padding: 0 4px; }
.wiz-x:hover { color: #1a1a1a; }
.wiz-steps { display: flex; flex-direction: column; gap: 14px; min-height: 120px; max-height: 46vh; overflow: auto; }
.wiz-opt {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: #fff; border-radius: 10px;
  padding: 11px 14px; font-size: 13.5px; font-weight: 500; color: #1a1a1a;
}
.wiz-opt:hover { border-color: var(--accent); background: #f0f6ff; }
.wiz-opt .material-symbols-outlined { font-size: 19px; color: var(--accent); }
.wiz-opt.sel { border-color: var(--accent); background: #eaf3ff; box-shadow: inset 0 0 0 1px var(--accent); }
.wiz-nav { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.wiz-nav .ghost { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 8px 14px; color: #5f6368; }
.wiz-nav .ghost:hover { background: #f5f5f5; }
.wiz-field { display: flex; flex-direction: column; gap: 4px; }
.wiz-field label { font-size: 12px; color: #5f6368; }
.wiz-field input, .wiz-field textarea {
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font: inherit; width: 100%; resize: none;
}
/* a11y A11 (r5): the ring was `outline-offset: 0` and got CLIPPED to a 516px top line:
   `.wiz-steps { overflow: auto }` is exactly flush with this input (x 462..978, y 262..619),
   so only the top edge had room — measured band pixels per side top 1018 / bottom 0 /
   left 0 / right 0. `outline-offset: -2px` draws the same 2px outline inside the border box
   (kept as outline, not box-shadow, so forced-colors mode still shows it); all four sides
   measured >=3:1 (light and dark: --accent #0a84ff on the white field 3.647:1). */
.wiz-field input:focus, .wiz-field textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-color: transparent; }
.faint { color: #5f6368; }
.wiz-summary {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #333;
  background: #f0f6ff; border: 1px solid #d7e6ff; border-radius: 10px; padding: 10px 12px;
}
.wiz-summary .material-symbols-outlined { color: #0067c0; font-size: 18px; }
.wiz-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.wiz-toggle {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px;
  font-size: 13px; font-weight: 500; color: #333;
}
.wiz-toggle:hover { border-color: var(--accent); }
.wiz-toggle.on { background: #eaf3ff; border-color: var(--accent); color: #0b57d0; box-shadow: inset 0 0 0 1px var(--accent); }
.wiz-foot { margin-top: 12px; font-size: 11.5px; text-align: center; color: #666e7b; }

/* ---------- responsive: mobile / tablet ---------- */
@media (max-width: 640px) {
  .desktop { inset: 0 0 var(--tb-h, 52px) 0; }
  .taskbar { height: var(--tb-h, 52px); min-height: 52px; gap: 6px; padding: 0 8px; }
  .start-btn b { display: none; }
  .win { width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; border-radius: 0; }
  .tb-composer { flex: 1 1 auto; }
  .task-items { display: none; }
  .task-right .ver { display: none; }
  .boot h1 { font-size: 28px; }
  .quick button { padding: 8px 12px; font-size: 13px; }
  .start-menu { left: 8px; right: 8px; width: auto; bottom: calc(var(--tb-h, 52px) + 8px); max-height: 72vh; overflow: auto; }
  .wizard { max-width: none; width: calc(100% - 12px); }
  .examples { max-width: none; width: calc(100% - 12px); }
  .ex-cats, .ex-areas { grid-template-columns: 1fr; }
  body.has-wins .anon-banner { bottom: calc(var(--tb-h, 52px) + 10px); }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .win { width: 600px; height: 460px; }
  .tb-composer { flex: 1 1 280px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
/* v10 §13 a11y: a visible ring on every keyboard-focused interactive element.
   a11y A11 (r4): the ring was --accent (#0a84ff) and measured 1.923:1 on the taskbar
   surface — below the 3:1 non-text threshold. --focus-ring is a darker same-hue blue:
   #0b4ea2 gives 4.22:1 on rgb(186,188,195) and 6.63:1 on the lightest surface the ring
   lands on rgb(221,234,253). Dark theme flips to a light ring; only colour changes. */
:where(button, a, [role="menuitem"], [role="button"], input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring, #0b4ea2);
  outline-offset: 2px;
  border-radius: 6px;
}
/* a11y A11 (r4): `.tb-composer textarea { outline: 0 }` (0,1,1) outranks the :where()
   rule above (0,1,0), so the main input had ZERO indicator (0 changed px measured).
   `.tb-composer` is a <form> and the ring is carried by the composer instead — outline
   only, so the box geometry is untouched. */
.tb-composer:focus-within { outline: 2px solid var(--focus-ring, #0b4ea2); outline-offset: 2px; }

/* ---------- v3: chat / files / auth / admin ---------- */
.chat { display: flex; flex-direction: column; height: 100%; background: #fff; }
.chat-msgs { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-composer { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: #fafafa; flex: 0 0 auto; }
/* v18-ux: the composer was the largest and loosest type on screen (measured 15.5px on a
   22.5px line box) while every other chat surface sits at 14.5px — that is the "soft" look
   users report. Body size + a 1.45 line box (21px) keeps the glyphs crisp and the box tight;
   min-height 46px = 21px line + 24px padding + 2px border, so a one-line input is exactly as
   tall as it renders (no dead space). The auto-grow JS reads scrollHeight, so it adapts. */
.chat-composer textarea { flex: 1 1 auto; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 14.5px; min-width: 0; min-height: 46px; max-height: 240px; resize: none; overflow-y: auto; line-height: 1.45; }
.chat-composer textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
/* v18-ux: the submit button measured 85x22 against a 46px input — visibly stunted and below
   the 24px target minimum. Give it the same height as the input so the composer row aligns on
   one baseline, and keep a comfortable width. (The attach circle is 42px; both now sit inside
   the same row height instead of one towering over the other.) */
.chat-composer button { border: 0; border-radius: 9px; background: var(--cta); color: #fff; padding: 0 16px; font-weight: 600; min-height: 46px; min-width: 64px; display: inline-flex; align-items: center; justify-content: center; }
.cmsg { display: flex; gap: 8px; align-items: flex-start; }
.cmsg .cava { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(120deg, #0067c0, #8b5cf6); }
.cmsg.user { flex-direction: row-reverse; }
.cmsg.user .cava { background: #22c55e; }
.cbubble { max-width: 78%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; background: #f1f4f9; color: #1a1a1a; white-space: pre-wrap; }
.cmsg.user .cbubble { background: #eaf3ff; }
.c-empty { color: #666e7b; text-align: center; padding: 30px 16px; font-size: 13px; }
/* inline artifact card: the build runs inside the chat bubble */
.cbubble.cart-b { max-width: 94%; padding: 10px; }
.cart { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.cart-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #f8fafd; border-bottom: 1px solid var(--line); }
.cart-head b { font-size: 12.5px; color: #1a1a1a; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-head > .material-symbols-outlined { font-size: 16px; color: var(--accent); }
.cart-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: #fff; color: #33415e; font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.cart-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cart-btn:disabled { opacity: .6; cursor: default; }
.cart-frame { height: 320px; position: relative; background: #fff; }
.cart-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
/* "Loading…" veil until the WHOLE app is confirmed written into the frame */
.cart-frame:not([data-mounted])::after, .art-frame:not([data-mounted])::after {
  content: 'Loading…'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #686f7d; font-size: 12.5px; background: #fff; z-index: 2;
}
.cart-cap { font-size: 12px; color: var(--dim); margin-top: 6px; white-space: pre-wrap; }
.typing { display: inline-flex; gap: 3px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: #9aa3b2; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
/* v16-stages: real build stages (Senden → Denken → Schreiben → Speichern) */
.build-stages { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 2px; font-size: 12.5px; line-height: 1.4; }
.build-stages .bst { color: #8b94a5; opacity: .55; transition: opacity .25s, color .25s; white-space: nowrap; }
.build-stages .bst.active { color: #ffd77d; opacity: 1; animation: stagePulse 1.6s ease-in-out infinite; }
.build-stages .bst.done { color: #7ce0b4; opacity: 1; }
@keyframes stagePulse { 0%,100% { text-shadow: 0 0 0 rgba(255,215,125,0); } 50% { text-shadow: 0 0 10px rgba(255,215,125,.75); } }
@keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.sm-projects { max-height: 40vh; overflow-y: auto; }
.sm-hint { font-size: 11px; color: var(--menu-label); padding: 2px 12px 6px; }
.files { padding: 14px; height: 100%; overflow-y: auto; background: #fff; }
.files-head { font-weight: 700; margin-bottom: 10px; color: #1a1a1a; }
.file-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 8px; }
.file-row span { font-weight: 600; flex: 0 0 auto; }
.file-row small { color: #666e7b; flex: 1 1 auto; }
.file-row button { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 4px 10px; font-size: 12px; }
.file-row a { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 4px 10px; font-size: 12px; color: inherit; text-decoration: none; }
.file-row button:hover { border-color: var(--accent); }
/* v17 uploads: the + button, the uploads section in the Files window.
   Two classes deep on the button because `.chat-composer button` already paints every
   composer button as the CTA — a bare `.chat-attach` would lose the specificity race. */
.chat-composer .chat-attach { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: #eef1f6; color: #1a1a1a; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.chat-composer .chat-attach .material-symbols-outlined { font-size: 22px; }
.chat-composer .chat-attach:hover { background: #e2e7f0; }
.chat-composer .chat-attach.off { opacity: .45; filter: grayscale(1); cursor: not-allowed; }
.win.chat-win.ide-mode .chat-composer .chat-attach { background: #161d29; color: #e6edf3; }
.win.chat-win.ide-mode .chat-composer .chat-attach:hover { background: #1e2735; }
/* v18 T8: the composer tray — one row per picked file, above the composer, scrollable.
   A row is a THUMBNAIL (real <img>/<video> for image/video, a kind glyph otherwise) +
   name/size/kind + the phase chip + the remove button. */
.chat-ups { flex: 0 0 auto; max-height: 38%; overflow-y: auto; border-top: 1px solid var(--line); background: #f4f6f9; padding: 2px 8px; }
.chat-ups[hidden] { display: none; }
/* v18 T13: the vertical's hint line — one row between the tray and the composer. The
   `[hidden]` rule is explicit because an author `display` would outrank the UA one. */
.chat-hint { flex: 0 0 auto; padding: 6px 12px; border-top: 1px solid var(--line); background: #eef4ff; color: #2b3a55; font-size: 12px; line-height: 1.4; }
.chat-hint[hidden] { display: none; }
.win.chat-win.ide-mode .chat-hint { background: #131b28; color: #9fb3d1; border-top-color: rgba(255,255,255,.08); }
.up-row { display: flex; align-items: center; gap: 9px; padding: 6px 2px; border-bottom: 1px solid rgba(0,0,0,.06); }
.up-row:last-child { border-bottom: 0; }
.up-row.bad { background: #fff5f5; }
.up-thumb { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 7px; object-fit: cover; background: #e7ebf1; }
.up-glyph { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: #4a5566; }
.up-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.up-meta b { font-size: 12.5px; font-weight: 600; color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-meta small { font-size: 11px; color: #666e7b; }
.up-phase { align-self: flex-start; font-size: 11px; line-height: 1.5; color: #47526a; }
.up-phase.ready { color: #17703a; }
.up-phase.analysing, .up-phase.transcribing { color: #8a5a00; }
.up-phase.stored { color: #666e7b; }
.up-phase.failed { color: #a11b1b; }
.up-warn { font-size: 11px; line-height: 1.45; color: #8a5a00; display: flex; align-items: center; gap: 4px; }
.up-warn .material-symbols-outlined { font-size: 14px; }
.up-spin { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border: 2px solid #c9d2de; border-top-color: #1a56c4; border-radius: 50%; animation: up-spin .8s linear infinite; vertical-align: -1px; }
@keyframes up-spin { to { transform: rotate(360deg); } }
.up-x { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: #5b6577; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.up-x:hover { background: #e2e7f0; color: #a11b1b; }
.up-x .material-symbols-outlined { font-size: 17px; }
/* v18 T12: the → Bauen action on every upload row (tray AND Files window) — the fast path
   from a file to a build. In the Files window `.file-acts button` supplies the box. */
.up-build { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; border-radius: 999px; color: #1a56c4; font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.6; padding: 2px 10px; cursor: pointer; white-space: nowrap; }
.up-build:hover { border-color: var(--accent); background: #f2f6ff; }
.win.chat-win.ide-mode .up-build { background: #161d29; color: #8fd0ff; border-color: rgba(255,255,255,.14); }
/* v18 T12: dropping files on the chat window. The overlay is the VISIBLE drop state — without
   it a drop looks like nothing happened. `content:attr(data-drop)` keeps the wording in the
   i18n table, not in the stylesheet; `pointer-events:none` so the overlay never eats the drop.
   The dashed line uses --accent (a SOLID colour): --cta is a linear-gradient, which is invalid
   for border-color/outline-color — the whole shorthand would fall back to `none` and the cue
   would never render (measured: outlineStyle stayed "none" with var(--cta)). */
.win.chat-win.drop-on { outline: 2px dashed var(--accent); outline-offset: -3px; }
.win.chat-win.drop-on::after {
  content: attr(data-drop); position: absolute; inset: 44px 8px 8px; z-index: 5;
  display: flex; align-items: center; justify-content: center; padding: 10px; text-align: center;
  border: 2px dashed var(--accent); border-radius: 10px; background: rgba(37,99,235,.12);
  color: #12307a; font: 600 13px/1.45 'Segoe UI', system-ui, sans-serif; pointer-events: none;
}
.win.chat-win.ide-mode.drop-on::after { background: rgba(34,211,238,.14); color: #d7ecff; }
.win.chat-win.ide-mode .chat-ups { background: #0b0f16; border-top-color: rgba(255,255,255,.08); }
.win.chat-win.ide-mode .up-row { border-bottom-color: rgba(255,255,255,.06); }
.win.chat-win.ide-mode .up-meta b { color: #e6edf3; }
.win.chat-win.ide-mode .up-meta small { color: #8b98ab; }
.win.chat-win.ide-mode .up-glyph { background: #161d29; color: #aeb9c9; }
.win.chat-win.ide-mode .up-x:hover { background: #1e2735; }
@media (prefers-reduced-motion: reduce) { .up-spin { animation: none; } }
/* TCX: the SENT message's attachments in the transcript. The rows reuse the tray vocabulary
   (up-row/up-thumb/up-meta/up-phase); `.cup` adds only "this is a control that opens the file"
   — keyboard-reachable, with the focus ring the rest of the app uses. `white-space:normal`
   because the bubble is pre-wrap. */
.cups { display: flex; flex-direction: column; margin-top: 6px; padding-top: 4px; border-top: 1px solid rgba(0,0,0,.09); }
.cup { width: 100%; white-space: normal; text-align: left; font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 0; padding: 4px 2px; border-radius: 7px; cursor: pointer; }
.cup:hover { background: rgba(0,0,0,.05); }
.cup:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cup.flat { cursor: default; }
.cup .up-thumb { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 6px; }
.win.chat-win.ide-mode .cups { border-top-color: rgba(255,255,255,.1); }
.win.chat-win.ide-mode .cup:hover { background: rgba(255,255,255,.06); }
/* TCX: the chat toolbar's persistent Files entry + its upload-count badge (the count comes
   from the ?action=list answer the composer already loads). */
/* v18-ux: 26x22 was under the 24px target minimum; 32x32 matches the other title-bar controls
   and keeps the count badge legible. */
.chat-files { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 4px; padding: 0; border: 0; border-radius: 7px; background: rgba(0,0,0,.06); color: #4a5568; cursor: pointer; }
.chat-files:hover { background: rgba(0,0,0,.12); }
.chat-files .material-symbols-outlined { font-size: 16px; }
.chat-files-n { position: absolute; top: -5px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: #1a56c4; color: #fff; font: 700 9.5px/15px "Segoe UI", system-ui, sans-serif; text-align: center; }
.chat-files-n[hidden] { display: none; }
.win.chat-win.ide-mode .chat-files { background: rgba(255,255,255,.07); color: #9fb0c9; }
.win.chat-win.ide-mode .chat-files:hover { background: rgba(255,255,255,.12); }
.up-head { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 700; color: #1a1a1a; }
.up-head small { margin-left: auto; font-weight: 400; color: #666e7b; }
.files-hint { font-size: 12px; line-height: 1.45; color: #666e7b; margin: 2px 0 6px; }
/* v18 T11: the Files window — two groups, ONE filter bar over both, a preview pane
   (image/video/audio inline from the token URL, documents as digest + opening lines)
   and the storage bar (width = bytes/limit). Rows are hidden with the `hidden`
   attribute AND an explicit display:none: `.file-row{display:flex}` outranks the UA
   rule for [hidden], so an attribute alone would leave the row on screen (checkVisibility
   would then still report it as visible). */
.files { display: flex; flex-direction: column; gap: 10px; }
.files-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.files-filters .ff { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 12px; color: #333; cursor: pointer; }
.files-filters .ff:hover { border-color: var(--accent); }
.files-filters .ff.on { background: var(--cta); border-color: var(--cta); color: #fff; }
.files-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.files-list { min-width: 0; }
.fgroup + .fgroup { margin-top: 14px; }
.fgroup-head { display: flex; align-items: baseline; gap: 8px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }
.fgroup-head small { font-weight: 400; color: #666e7b; }
.file-row .file-ico { flex: 0 0 auto; font-size: 19px; color: #4a5566; }
.file-row .file-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row { cursor: pointer; }
.file-row.on { border-color: var(--cta); background: #f2f6ff; }
.file-row[hidden] { display: none; }
.file-row .file-acts { flex: 0 0 auto; display: flex; gap: 4px; align-items: center; }
.file-acts button, .file-acts a { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 3px 7px; font-size: 12px; color: #333; cursor: pointer; display: inline-flex; align-items: center; }
.file-acts button:hover, .file-acts a:hover { border-color: var(--accent); }
.file-acts .material-symbols-outlined { font-size: 16px; }
.fbar { height: 8px; border-radius: 999px; background: #e7ebf1; overflow: hidden; }
.fbar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22d3ee, #2563eb); }
.fbar-label { font-size: 11px; color: #666e7b; margin: 4px 0 8px; }
.fprev { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #f8fafc; min-height: 120px; }
.fprev h4 { margin: 0 0 8px; font-size: 12.5px; color: #1a1a1a; overflow-wrap: anywhere; }
.fprev-media { display: block; width: 100%; max-height: 240px; border-radius: 8px; background: #0b0f16; object-fit: contain; }
audio.fprev-media { background: transparent; }
.fprev-note { font-size: 12px; color: #666e7b; margin: 0 0 6px; }
.fprev-digest { font-size: 12px; line-height: 1.5; color: #333; margin: 6px 0; overflow-wrap: anywhere; }
.fprev-text { font-size: 11.5px; line-height: 1.45; color: #333; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px; max-height: 200px; overflow: auto; white-space: pre-wrap; margin: 6px 0 0; }
@media (max-width: 720px) { .files-cols { grid-template-columns: minmax(0, 1fr); } }

/* v18 A4: App-Daten — the creator's window into an app's users and rows (IDE only) */
.appdata { padding: 14px; height: 100%; overflow: auto; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.ad-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ad-field { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #333; }
.ad-field select { border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12.5px; background: #fff; color: inherit; max-width: 220px; }
.ad-quota { display: flex; flex-direction: column; gap: 4px; }
.ad-bar { height: 8px; border-radius: 999px; background: #e7ebf1; overflow: hidden; }
.ad-bar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22d3ee, #2563eb); }
.ad-bar-label { font-size: 11px; color: #666e7b; }
.ad-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; align-items: start; }
.ad-sec { min-width: 0; }
.ad-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12.5px; color: #1a1a1a; }
.ad-sec-head small { color: #666e7b; }
.ad-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.ad-table th { text-align: left; font-weight: 600; color: #666e7b; border-bottom: 1px solid var(--line); padding: 5px 6px; }
.ad-table td { border-bottom: 1px solid var(--line); padding: 5px 6px; color: #333; vertical-align: top; }
.ad-table tbody tr[role="button"] { cursor: pointer; }
.ad-table tbody tr.on { background: #f2f6ff; }
.ad-table .ad-id { font-size: 11.5px; overflow-wrap: anywhere; }
.ad-table .ad-val { overflow-wrap: anywhere; }
.ad-table .ad-acts { width: 92px; text-align: right; }
.ad-tag { display: inline-block; font-size: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; color: #666e7b; }
.ad-chip { font-size: 11px; border-radius: 999px; padding: 2px 8px; background: #eef2ff; color: #1e3a8a; }
.ad-btn { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 4px 10px; font-size: 12px; color: inherit; cursor: pointer; }
.ad-btn:hover { border-color: var(--accent); }
.ad-btn.danger { color: #b42318; }
.ad-btn.danger:hover { border-color: #b42318; }
.ad-empty, .ad-note { font-size: 12px; color: #666e7b; line-height: 1.5; margin: 6px 0 0; }
.ad-totals { font-size: 11.5px; color: #666e7b; margin-top: 6px; }
@media (max-width: 820px) { .ad-cols { grid-template-columns: minmax(0, 1fr); } }
.adm-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #333; }
.adm-check input { width: 16px; height: 16px; }
#admSteps, #authSteps { display: flex; flex-direction: column; gap: 12px; max-height: 52vh; overflow: auto; }
#adm_systemOverlay { border: 1px solid var(--line); border-radius: 9px; padding: 8px; font: inherit; width: 100%; resize: vertical; }

/* v3.1: files rename + admin insights */
.files-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.files-head input { flex: 1 1 auto; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font: inherit; min-width: 0; }
.files-head button { border: 0; border-radius: 8px; background: var(--cta); color: #fff; padding: 7px 12px; flex: 0 0 auto; }
.adm-insights { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.ins-row { display: flex; justify-content: space-between; font-size: 13px; color: #333; }
.ins-row b { color: #0b57d0; }

/* v3.2: admin dashboard + editor */
.dash { height: 100%; overflow-y: auto; background: #f6f8fb; padding: 16px; }
.dash-head { font-weight: 700; font-size: 14px; color: #1a1a1a; margin-bottom: 12px; }
.dash-head span { font-weight: 400; color: #666e7b; font-size: 12px; }
.dstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }
.dstat { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.dstat b { display: block; font-size: 18px; color: #0b57d0; }
.dstat span { font-size: 11px; color: #666e7b; }
.dsec { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 12px; font-size: 13px; color: #1a1a1a; }
.dbars { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin-top: 8px; }
.dbar { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.dbar-fill { width: 70%; background: linear-gradient(180deg, #5b8def, #0067c0); border-radius: 3px 3px 0 0; min-height: 2px; }
.dbar small { font-size: 9px; color: #666e7b; margin-top: 3px; }
.dcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.dtable th, .dtable td { text-align: left; padding: 5px 8px; border-bottom: 1px solid #eef1f5; word-break: break-all; }
.dtable th { color: #666e7b; font-weight: 600; }
.dtable .vrow { cursor: pointer; }
.dtable .vrow:hover td { background: #f6f8fb; }
.dtable .vrow.sel td { background: #eaf1ff; }
#editorDialog textarea { width: 100%; min-width: 60vw; border: 1px solid var(--line); border-radius: 9px; padding: 10px; font: 12px/1.5 ui-monospace, Menlo, monospace; resize: vertical; }
@media (max-width: 640px) { .dcols { grid-template-columns: 1fr; } #editorDialog textarea { min-width: calc(100vw - 60px); } }

/* v3.3: showcase + icon polish */
.sm-group .material-symbols-outlined { font-size: 19px; width: 22px; text-align: center; color: var(--accent); font-variation-settings: 'FILL' 1; }
.wiz-ico.material-symbols-outlined { color: var(--accent); font-variation-settings: 'FILL' 1; }
.sm-warn { color: #b45309; background: #fef3c7; border-radius: 8px; padding: 6px 10px; margin: 2px 4px 4px; }
.showcase { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.showcase-steps { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.step { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 116px; background: var(--quick-bg); border: 1px solid var(--quick-border); border-radius: 12px; padding: 11px 8px; backdrop-filter: blur(8px); }
.step .material-symbols-outlined { font-size: 24px; color: var(--quick-ico); font-variation-settings: 'FILL' 1; }
.step b { font-size: 12.5px; color: var(--boot-ink); }
.step small { font-size: 10.5px; color: var(--boot-sub); }
.showcase-examples { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* v3.4: anon banner + animated showcase demo */
[hidden] { display: none !important; }
.boot { max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: none; }
.boot::-webkit-scrollbar { display: none; }
.anon-banner {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; align-items: center; gap: 12px;
  background: #fff7ed; border: 1px solid #fcd34d; color: #7c2d12;
  border-radius: 12px; padding: 12px 16px; max-width: 640px; width: calc(100% - 24px);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.anon-banner > .material-symbols-outlined { color: #d97706; font-size: 24px; flex: 0 0 auto; }
.anon-text { display: flex; flex-direction: column; min-width: 0; }
.anon-text strong { font-size: 14px; }
.anon-text span { font-size: 12.5px; color: #b45309; }
.anon-signin { border: 0; border-radius: 8px; background: #b45309; color: #fff; padding: 8px 14px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.anon-signin:hover { background: #92400e; }
.anon-x { border: 0; background: transparent; color: #b45309; font-size: 20px; line-height: 1; padding: 2px 6px; }
/* windows open → dock the banner bottom-right so it never covers a title bar or the taskbar composer */
body.has-wins .anon-banner { top: auto; bottom: calc(var(--tb-h, 48px) + 12px); right: 12px; left: auto; transform: none; width: min(420px, calc(100% - 24px)); }

.showcase-demo {
  width: 460px; max-width: 94%; height: 236px; margin: 12px auto 0;
  border: 1px solid rgba(0,0,0,.16); border-radius: 14px; overflow: hidden;
  background: #070b16; box-shadow: 0 22px 60px rgba(0,0,0,.35); position: relative;
}
/* v15.14c: examples popup — the showcase + 12 rich wish cards live in a dialog now */
.examples { border: 0; border-radius: 20px; padding: 0; max-width: 780px; width: calc(100% - 24px); background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.examples::backdrop { background: rgba(6, 10, 22, .55); backdrop-filter: blur(6px); }
.ex-body { max-height: min(84vh, 740px); overflow-y: auto; padding: 18px 22px 16px; }
.ex-head { display: flex; align-items: flex-start; gap: 12px; }
.ex-ico { font-size: 26px; line-height: 1; }
.ex-head h2 { margin: 0; font-size: 19px; font-weight: 700; color: #1a1a1a; }
.ex-head p { margin: 3px 0 0; color: #5f6368; font-size: 13px; }
.ex-x { margin-left: auto; border: 0; background: transparent; color: #5f6368; font-size: 22px; line-height: 1; padding: 0 4px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.ex-x:hover { color: #1a1a1a; }
.examples .showcase-demo { width: 100%; max-width: none; margin: 14px 0 0; }
/* v15.14d: two-level drill-down — category tiles (level 1) + area submenu (level 2) */
.ex-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); gap: 10px; margin-top: 14px; }
/* v16-examples: wish-library feed — section label + feed tiles under the demo cats */
.ex-lib-label { margin: 16px 0 2px; font-size: 13px; font-weight: 600; color: var(--muted, #777); }
.ex-feeds { margin-top: 0; }
.ex-areagroup { margin: 14px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted, #777); }
.ex-empty { color: var(--muted, #777); font-size: 14px; padding: 10px 0; }
.ex-cat { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line, #e2e2df); background: #fff; border-radius: 12px; padding: 11px 13px; cursor: pointer; font: inherit; color: #1a1a1a; }
.ex-cat:hover { border-color: var(--accent, #0067c0); box-shadow: 0 6px 18px rgba(34, 120, 255, .12); transform: translateY(-1px); }
.ex-cat .material-symbols-outlined { font-size: 22px; color: var(--accent, #0067c0); }
.ex-catbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-catbody b { font-size: 14px; color: #1a1a1a; }
.ex-catbody small { font-size: 11.5px; color: #5f6368; }
.ex-chev { margin-left: auto; color: #9aa0a6; font-size: 18px; line-height: 1; }
.ex-lv2 { margin-top: 10px; }
.ex-back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--accent, #0067c0); font: 600 13px 'Segoe UI', system-ui, sans-serif; cursor: pointer; padding: 4px 2px; min-height: 44px; }
.ex-back:hover { text-decoration: underline; }
.ex-area-title { margin: 6px 0 8px; font-size: 15px; font-weight: 700; color: #1a1a1a; }
.ex-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 10px; }
.ex-area { display: flex; flex-direction: column; gap: 6px; text-align: left; border: 1px solid var(--line, #e2e2df); background: #fff; border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; color: #1a1a1a; }
.ex-area:hover { border-color: var(--accent, #0067c0); box-shadow: 0 6px 18px rgba(34, 120, 255, .12); transform: translateY(-1px); }
.ex-area b { font-size: 14px; color: #1a1a1a; }
.ex-wish { font-size: 12.5px; line-height: 1.5; color: #5f6368; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ex-foot { margin-top: 12px; font-size: 11.5px; text-align: center; color: #666e7b; }
/* v17-exdlg: Ebene 2 ERSETZT Ebene 1 (gemessen: sonst standen die Bereiche 2149px unter dem
   709px hohen Body, waehrend nach oben gescrollt wurde — ein Tipp fuehlte sich an wie nichts).
   Klasse statt [hidden]: `.ex-cats{display:grid}` schlaegt die UA-Regel `[hidden]{display:none}`. */
.examples.lv2 #exCats, .examples.lv2 #exFeeds, .examples.lv2 .ex-lib-label { display: none; }
@media (max-width: 640px) {
  /* die laufende Showcase-Animation ass 236px ueber der ersten Kachel (erste .ex-cat bei y=468) */
  #examplesDlg .showcase-demo { display: none; }
}

.examples-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; border: 0; cursor: pointer; border-radius: 999px; padding: 11px 20px;
  font: 600 14.5px 'Segoe UI', system-ui, sans-serif; color: #fff;
  /* a11y A6: the bright cyan→violet gradient held white text at 1.8–2.9:1 (icon 2.22:1);
     the same hues one step deeper clear 4.5:1 for text and 3:1 for the icon */
  background: linear-gradient(120deg, #0e7490, #6d28d9);
  box-shadow: 0 10px 30px -10px rgba(139,92,246,.55);
}
.examples-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.examples-btn .ex-count { background: rgba(0,0,0,.28); /* a11y A6: a 25% white pill lifted the 16-badge toward the ink side; a dark pill keeps it above 4.5:1 */ border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; }
/* the same chat field as the taskbar, right below the showcase */
.boot-composer {
  display: flex; align-items: center; gap: 8px;
  width: 700px; max-width: 96%; height: auto; min-height: 64px; margin: 20px auto 0;
  background: rgba(255,255,255,.96); border: 1px solid rgba(0,0,0,.14);
  border-radius: 18px; padding: 6px 7px 6px 22px;
  box-shadow: 0 0 0 1px rgba(139,92,246,.18), 0 22px 60px -16px rgba(34,211,238,.55);
}
/* a11y A11 (r5): #0067c0 measured 2.051:1 in the dark theme (its adjacent surface is the
   cyan glow over the dark wallpaper, rgb(17,60,86)); --focus-ring gives 5.5:1 there and
   6.6:1 on the light glow, rgb(203,240,249). Colour only — spread and offset untouched.
   r9-accent: this ring hugs a plate that is rgba(255,255,255,.96) in EVERY theme, so in the
   dark theme the light --focus-ring (#8ab4f8) has a white neighbour and measured 1.95:1 on
   it. --ring-plate is the blue that clears the 3:1 floor on BOTH neighbours of that plate —
   measured 3.19:1 on the plate (rgb 245,246,247), 4.45:1 on the wallpaper (rgb 17,36,72) and
   3.20:1 on the brightest cyan-glow pixel touching the ring (rgb 17,64,90); the light
   theme's #0b4ea2 already clears 8:1 inside and 7:1 outside. 3.19 is the ceiling for ONE
   colour here: a darker blue lifts the plate ratio and drops the glow ratio under 3:1. */
.boot-composer:focus-within { box-shadow: 0 0 0 2px var(--ring-plate, #0b4ea2), 0 22px 60px -16px rgba(34,211,238,.55); }
/* r9-accent: the composer plate is white in BOTH themes (rgba(255,255,255,.96)), so the
   dark ring was painted on it and measured 1.95:1 (non-text floor 3:1); light is unchanged
   at 8:1. Anything inside the white plate takes the on-white ring. */
.boot-composer :focus-visible { outline-color: #0b4ea2; }
.boot-composer textarea {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0; resize: none;
  color: #1a1a1a; font: 17px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; padding: 9px 0;
}
.boot-composer textarea::placeholder { color: #8a94a6; }
.boot-send {
  display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 12px;
  background: linear-gradient(120deg,#22d3ee,#8b5cf6); color: #fff; flex: 0 0 auto; cursor: pointer;
}
.boot-send .material-symbols-outlined { font-size: 21px; }
.demo-chat { display: flex; flex-direction: column; height: 100%; }
.demo-msgs { flex: 1 1 auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.demo-msg.user { align-self: flex-end; max-width: 86%; background: linear-gradient(120deg, #0067c0, #5b2fd6); color: #fff; border-radius: 12px 12px 2px 12px; padding: 8px 12px; font-size: 13px; white-space: pre-wrap; }
.demo-input { display: flex; align-items: flex-start; gap: 6px; margin: 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 10px 12px; font: 13px/1.4 ui-monospace, monospace; color: #eaf2ff; background: rgba(255,255,255,.05); min-height: 40px; }
#demoTyped { white-space: pre-wrap; flex: 1 1 auto; }
.demo-cursor { width: 8px; height: 16px; background: #22d3ee; animation: blink 1s steps(2) infinite; flex: 0 0 auto; }
.demo-cursor.spinning { width: 16px; height: 16px; border-radius: 50%; background: transparent; border: 2px solid rgba(255,255,255,.25); border-top-color: #22d3ee; animation: spin .6s linear infinite; }
.demo-building { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #eaf2ff; }
.demo-spin { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: #22d3ee; animation: spin 1s linear infinite; }
.demo-status { font-size: 13.5px; color: #b9c4dd; }
.demo-bar { width: 70%; height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.demo-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #22d3ee, #8b5cf6); transition: width .3s ease; }
.demo-app { display: flex; flex-direction: column; height: 100%; }
.demo-appbar { display: flex; align-items: center; gap: 8px; height: 34px; flex: 0 0 34px; background: #f3f3f3; border-bottom: 1px solid #e3e3e3; padding: 0 10px; font-size: 12px; color: #1a1a1a; }
.demo-appbar i { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(120deg, #22d3ee, #8b5cf6); }
.demo-appbar b { flex: 1; }
.demo-appbar span { color: #9aa3b2; letter-spacing: 2px; }
.demo-app canvas { display: block; width: 100%; height: calc(100% - 34px); }
/* big-bang confetti */
.confetti { position: fixed; z-index: 9999; pointer-events: none; border-radius: 1px; will-change: transform, opacity; }
.confetti.bang-flash { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle, rgba(255,244,200,.95) 0%, rgba(255,215,106,.55) 45%, rgba(255,215,106,0) 72%); box-shadow: 0 0 50px 16px rgba(255,220,120,.5); animation: bangflash .72s ease-out forwards; }
@keyframes bangflash { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(28); opacity: 0; } }

/* v3.5: tighter showcase + brand */
.demo-brand { font-size: 11px; color: #7c8bb5; letter-spacing: .3px; }
.boot .cta { margin-top: 18px; }
.boot-tag { margin: 8px 0 12px; }

/* v3.6: share dialog */
.share-row { display: flex; gap: 8px; }
.share-row input { flex: 1 1 auto; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; font: 12.5px ui-monospace, monospace; min-width: 0; background: #f8fafc; }
/* v10 share preview: a live, same-origin frame of the shared app */
.share-preview { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.share-preview iframe { display: block; width: 100%; height: 180px; border: 0; }
.share-social { display: flex; gap: 8px; flex-wrap: wrap; }
.share-btn { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: #1a1a1a; text-decoration: none; background: #fff; }
.share-btn:hover { border-color: var(--accent); color: var(--accent); }
/* v9 version-history dialog */
.hist-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; margin-top: 4px; }
.hist-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: #fff; font: inherit; cursor: pointer; }
.hist-row:hover:not(.on) { border-color: var(--accent); }
.hist-row.on { background: #eef4ff; border-color: var(--accent); }
.hist-badge { font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.hist-when { font-size: 12.5px; color: #5f6368; }
.hist-cur { color: var(--accent); font-weight: 700; }
.hist-restore { font-size: 12px; font-weight: 600; color: var(--accent); }
/* v10 team/org role badge in the project list */
.role-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #eef4ff; color: var(--accent); font-size: 10px; font-weight: 700; vertical-align: 1px; }

/* v3.7: demo body + premium trading terminal */
#demoBody { flex: 1 1 auto; overflow: hidden; background: #0a0f1e; }
#demoBody canvas { display: block; width: 100%; height: 100%; }

/* v3.8: chat head + dashboard tf/prompts */
.chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #fafafa; flex: 0 0 auto; }
.chat-head b { flex: 1 1 auto; font-size: 13px; color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head .material-symbols-outlined { font-size: 17px; color: var(--accent); }
.chat-head button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--accent); }
.chat-head button:hover { border-color: var(--accent); }
/* editable project name (one chat = one app, easy to rename) */
.chat-head input#chatProjName { flex: 1 1 auto; min-width: 0; border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 3px 6px; font: 600 13px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; color: #1a1a1a; }
.chat-head input#chatProjName:hover { border-color: var(--line); }
.chat-head input#chatProjName:focus { border-color: var(--accent); background: #fff; outline: none; }
.chat-ver { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #666e7b; background: #eef2f7; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
/* persistent latest-build preview banner (wide + short), chat sits below */
.chat-preview { flex: 0 0 auto; display: flex; align-items: stretch; gap: 0; height: 56px; border-bottom: 1px solid var(--line); background: #0a0f1e; cursor: pointer; }
.chat-preview:hover .chat-preview-head b { color: #7dd3fc; }
.chat-preview-head { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 0 0 150px; padding: 6px 12px; font-size: 11px; color: #9aa6bd; background: #0e1424; border-right: 1px solid rgba(255,255,255,.06); }
.chat-preview-head b { color: #eaf2ff; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-preview-head .material-symbols-outlined { font-size: 13px; color: #22d3ee; }
.chat-preview-frame { flex: 1 1 auto; height: 56px; overflow: hidden; position: relative; }
.chat-preview-frame iframe { width: 666.67%; height: 373px; border: 0; transform: scale(.15); transform-origin: 0 0; pointer-events: none; background: #fff; }
.tf-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tf-chip { display: inline-flex; align-items: baseline; gap: 4px; background: #eef3fb; border-radius: 8px; padding: 5px 10px; font-size: 11.5px; color: #686f7d; }
.tf-chip b { color: #0b57d0; font-size: 13px; }
.prompts { display: flex; flex-direction: column; gap: 5px; }
.prompt-row { display: flex; gap: 8px; font-size: 12px; color: #333; align-items: baseline; }
.prompt-row i { font-style: normal; color: #666e7b; min-width: 14px; text-align: right; }
.prompt-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v3.9: desk + modify toggle */
/* v19-desk: the desk SCROLLS — with 12+ apps `place-items:center` clipped the top of an
   overflowing grid, so a project was unreachable. `margin:auto` keeps it centered while
   short AND fully scrollable once it is tall. */
.desk { position: absolute; inset: 0; display: flex; overflow: auto; padding: 18px 0 26px; }
.desk-inner { display: flex; flex-direction: column; gap: 4px; width: min(1120px, 94vw); margin: auto; }
.desk-link { display: inline-flex; align-items: center; gap: 6px; color: var(--boot-link); font-weight: 600; font-size: 13px; }
.chat-head button.on { background: #eaf3ff; border-color: var(--accent); color: var(--accent); }

/* v3.10: polished dashboard */
.dstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.dstat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.dstat .material-symbols-outlined { font-size: 20px; color: var(--accent); }
.dstat b { font-size: 20px; color: #0b57d0; }
.dstat small { font-size: 11px; color: #666e7b; }
.dsec-head { font-weight: 700; font-size: 13px; color: #1a1a1a; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.hbar { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 5px 0; }
.hbar span { width: 92px; flex: 0 0 auto; color: #31415c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { flex: 1 1 auto; height: 8px; border-radius: 999px; background: #eef1f5; overflow: hidden; }
.hbar-track i { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.hbar b { flex: 0 0 auto; min-width: 28px; text-align: right; color: #0b57d0; }

/* v3.11: audit + cost */
.dash-btns { display: flex; gap: 8px; margin-left: auto; }
.dash-btns button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--accent); }
.dash-btns button:hover { border-color: var(--accent); }
.dash-btns .material-symbols-outlined { font-size: 16px; }
.trunc { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rate-row { display: flex; gap: 5px; flex-wrap: wrap; }
.rate-btn { width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; border-radius: 8px; font-weight: 700; color: #31415c; }
.rate-btn.on { background: linear-gradient(120deg, #0067c0, #5b2fd6); border-color: transparent; color: #fff; }
#rtFb, #rpText { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px; font: 13px/1.5 ui-monospace, monospace; resize: vertical; }
#rpText { min-width: 60vw; }
@media (max-width: 640px) { #rpText { min-width: calc(100vw - 60px); } }

/* v3.12: prominent audit hero */
.dash-hero { display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg, #0b57d0, #5b2fd6); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; color: #fff; flex-wrap: wrap; }
.dash-hero-txt { flex: 1 1 200px; display: flex; flex-direction: column; }
.dash-hero-txt b { font-size: 15px; }
.dash-hero-txt span { font-size: 12px; opacity: .85; }
.dash-hero button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 9px; padding: 10px 16px; font-weight: 700; font-size: 13px; cursor: pointer; }
.dash-hero button#dashAudit { background: #fff; color: #0b57d0; }
.dash-hero button#dashReport { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.dash-hero button:hover { filter: brightness(.96); }
.dash-hero .material-symbols-outlined { font-size: 18px; }

/* v3.9: pixel-perfect showcase demos */
.dx { display: flex; flex-direction: column; height: 100%; background: linear-gradient(180deg, #0c1222, #070b16); color: #dbe4f7; font: 12px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; }
.dx-head { flex: 0 0 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.dx-head b { font-size: 11.5px; font-weight: 700; color: #fff; letter-spacing: .15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-chip { margin-left: auto; flex: 0 0 auto; font: 700 8.5px/1 ui-monospace, monospace; letter-spacing: .8px; color: #34d399; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.28); border-radius: 999px; padding: 3px 8px; }
.dx-body { flex: 1 1 auto; min-height: 0; padding: 10px 12px; display: flex; gap: 10px; position: relative; }
.dx-foot { flex: 0 0 22px; display: flex; align-items: center; padding: 0 12px; border-top: 1px solid rgba(239,68,68,.25); background: rgba(239,68,68,.1); font: 700 9px/1 ui-monospace, monospace; color: #fca5a5; letter-spacing: .3px; }
.kpi { flex: 1 1 0; min-width: 0; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: 7px 10px; display: flex; flex-direction: column; gap: 1px; }
.kpi i { font-style: normal; font: 700 8px/1.2 ui-monospace, monospace; letter-spacing: .9px; color: #8b97b8; }
.kpi b { font-size: 17px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi small { font-size: 9px; color: #34d399; font-weight: 600; }
.gauge { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gauge i { font-style: normal; font: 700 7.5px/1 ui-monospace, monospace; letter-spacing: .8px; color: #8b97b8; }
.bar-row { display: flex; flex-direction: column; gap: 3px; }
.bar-row i { font-style: normal; font: 700 8px/1 ui-monospace, monospace; letter-spacing: .6px; color: #8b97b8; }
.bar { height: 10px; border-radius: 5px; background: rgba(255,255,255,.07); overflow: hidden; }
.bar b { display: block; height: 100%; border-radius: 5px; }
.scada-left { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 96px; }
.tank { width: 74px; height: 96px; border: 2px solid #3b5a75; border-radius: 8px; position: relative; overflow: hidden; background: rgba(34,211,238,.05); }
.tank-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; background: linear-gradient(180deg, #22d3ee, #0e7490); }
.tank-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.55); }
.scada-txt { font: 700 9px/1 ui-monospace, monospace; color: #9fb0cc; }
.scada-txt b { color: #7dd3fc; }
.scada-pump { display: flex; align-items: center; gap: 5px; font: 700 9px/1 ui-monospace, monospace; color: #9fb0cc; }
.scada-pump span { display: inline-block; color: #0ea5e9; }
.scada-mid { flex: 0 0 112px; display: flex; align-items: center; gap: 12px; justify-content: center; }
.scada-right { flex: 1; display: flex; flex-direction: column; gap: 9px; justify-content: center; padding-left: 4px; }
.pt-grid { flex: 1; display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: 1fr; gap: 3px; align-content: stretch; }
.pt { border: 1px solid; border-radius: 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.1; background: rgba(255,255,255,.03); }
.pt b { font: 700 10px/1 ui-monospace, monospace; }
.pt i { font: 600 7.5px/1.3 ui-monospace, monospace; font-style: normal; color: #7a86a3; }
.pt.on { background: #e0f2fe; }
.pt.on b { color: #0a0e1a; }
.pt.on i { color: #33415c; }
.pt-info { font: 700 9.5px/1 ui-monospace, monospace; color: #7dd3fc; }
.vit { flex: 0 0 118px; display: flex; flex-direction: column; gap: 7px; }
.vit .kpi b { font-size: 20px; }
.ecg-box { flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: #0a1220; overflow: hidden; }
.chart-box canvas { display: block; width: 100%; height: 100%; }

/* v3.6: enterprise admin dashboard window (submenus + deep-insight views) */
.adm { display: grid; grid-template-columns: 208px minmax(0, 1fr); height: 100%; background: #f6f8fb; }
.adm-side { background: linear-gradient(180deg, #0e1322, #161d33); color: #9aa7c7; display: flex; flex-direction: column; padding: 12px 10px; min-height: 0; }
.adm-brand { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 14px; padding: 4px 8px 14px; }
.adm-brand .material-symbols-outlined { color: #7dd3fc; font-size: 19px; }
.adm-brand small { margin-left: auto; color: #5c6a8f; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; }
.adm-nav { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.adm-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; color: #9aa7c7; font-size: 12.5px; font-weight: 500; cursor: pointer; user-select: none; }
.adm-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.adm-item.on { background: linear-gradient(120deg, #0067c0, #5b2fd6); color: #fff; box-shadow: 0 6px 18px rgba(0, 103, 192, .35); }
.adm-item .material-symbols-outlined { font-size: 17px; }
.adm-label { display: flex; align-items: center; gap: 2px; width: 100%; padding: 6px 8px; background: none; border: 0; cursor: pointer; text-align: left; color: #5c6a8f; font: inherit; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; border-radius: 8px; }
.adm-label:hover { color: #9aa7c7; background: rgba(255, 255, 255, .06); }
.adm-chev { font-size: 14px !important; transition: transform .15s ease; }
.adm-group.open .adm-chev { transform: rotate(90deg); }
.adm-items { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 8px 4px; }
.adm-group:not(.open) .adm-items { display: none; }
.adm-items .adm-item { padding-left: 26px; }
.adm-foot { border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 10px; flex: 0 0 auto; }
.adm-foot a { display: flex; align-items: center; gap: 8px; color: #9aa7c7; font-size: 11.5px; text-decoration: none; padding: 4px 8px; }
.adm-foot a:hover { color: #fff; }
.adm-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.adm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fff; flex: 0 0 auto; }
.adm-crumb { font-size: 12.5px; font-weight: 700; color: #1a1a1a; }
.adm-actions { display: flex; align-items: center; gap: 8px; }
.adm-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; background: var(--cta); color: #fff; padding: 6px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.adm-btn:hover { filter: brightness(1.08); }
.adm-btn.ghost { background: #fff; color: #31415c; border: 1px solid var(--line); }
.adm-btn .material-symbols-outlined { font-size: 15px; }
#dashUpdated { font-size: 11px; color: #666e7b; white-space: nowrap; }
.adm-body { flex: 1 1 auto; overflow-y: auto; padding: 14px; min-height: 0; }
.adm-body .dsec { margin-bottom: 12px; }
.adm-body .dstats { margin-bottom: 12px; }
.adm-loading, .adm-error { padding: 24px; color: #666e7b; font-size: 13px; }
.adm-error { color: #b3404a; }
.adm-pill { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-weight: 700; }
.adm-pill.ok { background: #e8f7ee; color: #128038; }
.adm-pill.warn { background: #fdf1e3; color: #b45309; }
.adm-pill.bad { background: #fdecea; color: #b91c1c; }
.adm-pill.mute { background: #eef1f5; color: #475467; }
.adm-meter { display: inline-block; width: 70px; height: 6px; border-radius: 99px; background: #eef1f5; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.adm-meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #17a34a, #34d399); }
.adm-meter i.warn { background: linear-gradient(90deg, #f4b740, #fbbf24); }
.adm-meter i.bad { background: linear-gradient(90deg, #d92d20, #fb7185); }
.dsec-head .tf-chip { vertical-align: middle; }
@media (max-width: 640px) {
  .adm { grid-template-columns: 168px minmax(0, 1fr); }
  .adm-actions .adm-btn { padding: 6px 9px; font-size: 11px; }
  #dashUpdated { display: none; }
}

/* v3.7: language switcher chips in the start menu */
.sm-lang { font-weight: 600; }
.sm-lang.on { color: var(--accent); }
.sm-lang.on::after { content: " ✓"; font-size: 11px; }

/* v3.8+ (V6): project overview — fire desktop, small live previews, no code shown */
/* v19-desk: the heading + the "new app" action stay put while a long grid scrolls —
   the primary action is reachable from every scroll position */
.desk-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 10px 14px; background: var(--quick-bg); border: 1px solid var(--quick-border); border-radius: 16px; backdrop-filter: blur(12px); }
.desk-heading { display: flex; align-items: center; gap: 12px; }
.desk-heading .material-symbols-outlined {
  font-size: 22px; color: #fff; width: 42px; height: 42px; display: grid; place-items: center;
  background: linear-gradient(135deg, #0067c0, #8b5cf6); border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0, 103, 192, .35);
}
.desk-heading b { display: block; font-size: 17px; letter-spacing: -.2px; color: var(--boot-ink, #1a1a1a); }
.desk-heading small { font-size: 11.5px; color: var(--boot-sub, #666e7b); }
.desk-top-actions { display: flex; align-items: center; gap: 10px; }
/* v19-desk: one sane minimum card width (240px) for every breakpoint above the phone one;
   cards stretch to the row height so no row is ragged */
.dproj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.dproj {
  background: var(--quick-bg); border: 1px solid var(--quick-border); border-radius: 16px;
  overflow: hidden; box-shadow: 0 2px 8px rgba(16,24,40,.06); backdrop-filter: blur(10px);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dproj:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(16,24,40,.14); }
.dproj.on { border-color: rgba(0,103,192,.4); box-shadow: 0 0 0 3px rgba(0,103,192,.12), 0 14px 34px rgba(16,24,40,.16); }
.dproj-head { display: flex; align-items: center; gap: 9px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--quick-border); }
.dproj-head:hover { background: rgba(0,103,192,.05); }
.dproj-head .material-symbols-outlined { font-size: 18px; color: var(--accent); font-variation-settings: 'FILL' 1; }
.dproj-name { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 14px; color: var(--boot-ink, #1a1a1a); padding: 3px 6px; border-radius: 7px; }
.dproj-meta { font-size: 10.5px; font-weight: 600; color: var(--boot-sub, #8a94a6); background: rgba(148,163,255,.12); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.dproj-chev { transition: transform .18s ease; font-size: 18px !important; color: var(--boot-sub, #8a94a6) !important; }
.dproj.on .dproj-chev { transform: rotate(180deg); }
.dproj-body { padding: 12px 14px 14px; }
.dproj-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.dprev { border: 1px solid var(--quick-border); border-radius: 11px; overflow: hidden; background: rgba(255,255,255,.04); transition: border-color .15s ease, box-shadow .15s ease; }
.dprev:hover { border-color: rgba(0,103,192,.5); box-shadow: 0 6px 18px rgba(0,103,192,.18); }
.dprev-frame { position: relative; width: 100%; aspect-ratio: 16 / 10; background: rgba(148,163,255,.08); overflow: hidden; }
.dprev-frame iframe { width: 400%; height: 250%; border: 0; transform: scale(.25); transform-origin: 0 0; pointer-events: none; background: #fff; }
.dprev-frame[data-mounted="1"]::after {
  content: '● LIVE'; position: absolute; top: 5px; right: 6px; font: 700 7.5px/1 ui-monospace, monospace;
  color: #34d399; background: rgba(5,20,14,.65); border: 1px solid rgba(52,211,153,.4);
  border-radius: 999px; padding: 2.5px 6px; letter-spacing: .5px;
}
.dprev-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 9px; border-top: 1px solid var(--quick-border); }
.dprev-bar b { font-size: 12px; font-weight: 600; color: var(--boot-ink, #1a1a1a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.dprev-actions { display: flex; gap: 2px; flex: 0 0 auto; }
.dprev-actions button { border: 0; background: transparent; border-radius: 8px; padding: 5px; cursor: pointer; color: var(--boot-sub, #666e7b); display: inline-grid; place-items: center; transition: color .12s ease, background .12s ease; }
.dprev-actions button:hover { background: rgba(0,103,192,.12); color: var(--accent); }
.dprev-actions .material-symbols-outlined { font-size: 16px; }
.dproj-foot { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.dproj-foot .ghost { border: 1px solid var(--quick-border); background: transparent; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--boot-sub, #666e7b); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.dproj-foot .ghost:hover { color: var(--accent); border-color: var(--accent); }
.dproj-foot .ghost .material-symbols-outlined { font-size: 15px; }


/* v3.9: AI chat + cyber console demos */
.aichat { display: flex; flex-direction: column; height: 100%; background: #0a0f1e; color: #dbe4f7; font: 12px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; }
.aichat-head { flex: 0 0 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.aichat-head b { font-size: 12px; color: #fff; }
.aichat-head .material-symbols-outlined { font-size: 15px; color: #22d3ee; }
.aichat-live { margin-left: auto; font: 700 8.5px/1 ui-monospace, monospace; letter-spacing: .5px; color: #34d399; }
.aichat-msgs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; overflow: hidden; }
.aichat-msg { max-width: 86%; padding: 6px 10px; border-radius: 10px; font-size: 11.5px; line-height: 1.4; }
.aichat-msg.user { align-self: flex-end; background: linear-gradient(120deg, #0067c0, #5b2fd6); color: #fff; }
.aichat-msg.ai { align-self: flex-start; background: #141b2e; color: #c7d4ee; border: 1px solid rgba(255,255,255,.07); }
.aichat-msg.ai.done { border-color: rgba(34,211,238,.25); }
.aichat-msg.ai i { display: inline-block; width: 4px; height: 4px; margin-right: 3px; border-radius: 50%; background: #22d3ee; animation: ai-blink 1s infinite; }
.aichat-msg.ai i:nth-child(2) { animation-delay: .2s; } .aichat-msg.ai i:nth-child(3) { animation-delay: .4s; }
@keyframes ai-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.aichat-input { flex: 0 0 26px; display: flex; align-items: center; gap: 4px; margin: 0 12px 10px; padding: 0 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #8b97b8; font-size: 11px; background: #0d1424; }
.cyber { display: flex; flex-direction: column; height: 100%; background: linear-gradient(180deg, #070b16, #0a1220); color: #dbe4f7; font: 12px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; }
.cyber-head { flex: 0 0 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.cyber-head b { font-size: 12px; color: #fff; letter-spacing: .3px; }
.cyber-head .material-symbols-outlined { font-size: 15px; color: #22d3ee; }
.cyber-live { margin-left: auto; font: 700 8.5px/1 ui-monospace, monospace; letter-spacing: .5px; color: #34d399; }
.cyber-stats { flex: 0 0 auto; display: flex; gap: 8px; padding: 8px 12px; }
.cyber-feed { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 0 12px 10px; overflow: hidden; }
.cy-row { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 7px; background: rgba(255,255,255,.03); font: 9px/1 ui-monospace, monospace; }
.cy-dot { width: 6px; height: 6px; border-radius: 50%; background: #f43f5e; box-shadow: 0 0 6px #f43f5e; animation: ai-blink 1s infinite; }
.cy-row b { color: #fca5a5; font-size: 9px; }
.cy-row span { color: #8b97b8; }
.cy-row em { margin-left: auto; font-style: normal; font-weight: 700; color: #34d399; font-size: 8px; letter-spacing: .5px; }

/* v3.9: flagship showcase polish */
.showcase-demo { border: 1px solid rgba(34,211,238,.28); box-shadow: 0 0 0 1px rgba(139,92,246,.12), 0 0 42px rgba(34,211,238,.14), 0 22px 60px rgba(0,0,0,.38); }
.demo-appbar { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); }

/* v16-ui: release-notes accordion + pulse bar removed (User-Direktiven) */
.onboard-hint { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px auto 0; max-width: 560px; padding: 8px 14px; border: 1px solid rgba(34,211,238,.3); border-radius: 999px; background: rgba(34,211,238,.08); color: var(--quick-ink); font-size: 12px; backdrop-filter: blur(8px); }
.onboard-hint:hover { border-color: var(--accent); }
.onb-chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.25); white-space: nowrap; }
.onb-x { border: 0; background: transparent; color: var(--quick-ink); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 7px; border-radius: 50%; }
.onb-x:hover { background: rgba(34,211,238,.18); }
.onboard-hint[hidden] { display: none; }

@media (max-width: 640px) {
  .dproj-grid { grid-template-columns: 1fr; }
  .desk-top { flex-direction: column; align-items: flex-start; }
}

/* V6.1: project thumbnails on collapsed cards — the drawn spec tile (v16-thumbs) */
.dproj-thumb { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 9px; overflow: hidden; border: 1px solid var(--quick-border); background: rgba(148,163,255,.08); position: relative; }
/* v19-desk: the live frame lives in .dproj-live (see the tile block), never inside the thumb */

/* ---- one chat = one app: split window (chat left, live app right) ---- */
.win.chat-win { width: min(96vw, 1060px); height: min(88vh, 720px); }
.chat { flex-direction: row; }
.chat-left { display: flex; flex-direction: column; flex: 0 0 40%; min-width: 300px; max-width: 460px; border-right: 1px solid var(--line); height: 100%; min-height: 0; }
.chat-left .chat-msgs { flex: 1 1 auto; min-height: 0; }
.chat-app { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; height: 100%; min-height: 0; background: #0a0f1e; }
.chat-app[hidden] { display: none; }
.chat-app-head { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 7px 11px; background: #0e1424; border-bottom: 1px solid rgba(255,255,255,.08); color: #eaf2ff; }
.chat-app-head .material-symbols-outlined { font-size: 15px; color: #22d3ee; }
.chat-app-head b { font-size: 12.5px; font-weight: 600; color: #eaf2ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-app-head .art-btn { border-color: rgba(255,255,255,.18); background: #182136; color: #d6e0f2; min-width: 34px; min-height: 30px; padding: 0 9px; border-radius: 9px; }
.chat-app-head .art-btn .material-symbols-outlined { font-size: 19px; }
.chat-app-head .art-btn:hover { border-color: #22d3ee; color: #22d3ee; }
.chat-app-head .art-btn.danger:hover { border-color: #e0555f; color: #ff9aa0; }
.chat-app-head .chat-ver { background: rgba(34,211,238,.15); color: #7dd3fc; }
.chat-app-frame { flex: 1 1 auto; min-height: 0; position: relative; }
.chat-app-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
/* ---- AppHub gallery ---- */
.apphub { padding: 16px; height: 100%; overflow-y: auto; background: #f6f8fb; }
.apphub-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #33415e; }
.apphub-head .material-symbols-outlined { font-size: 22px; color: var(--accent); }
.apphub-head b { font-size: 16px; }
.apphub-refresh { margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #5f6b83; cursor: pointer; }
.apphub-refresh:hover { border-color: var(--accent); color: var(--accent); }
.apphub-refresh .material-symbols-outlined { font-size: 19px; }
.apphub-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.apphub-tabs button { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: #5f6b83; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.apphub-tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.apphub-bar { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 10px; }
.apphub-sec { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #33415e; }
.apphub-count { font-size: 12px; color: #666e7b; }
.apphub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-items: stretch; }
/* min-height is the skeleton's contract too: .app-card-skel carries .app-card, so data
   landing can never move the grid (measured: both are exactly 268 px tall) */
.app-card { min-height: 268px; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(20,28,50,.04); }
.app-card-prev { position: relative; flex: 0 0 auto; height: 86px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.app-ava { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); font-weight: 700; font-size: 19px; text-transform: uppercase; }
.app-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.app-card-t { min-width: 0; }
.app-card-t b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #33415e; }
.app-card-t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #666e7b; font-size: 11.5px; }
.app-card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #666e7b; }
.app-card-meta b { color: #33415e; }
.app-stars { color: #f59e0b; letter-spacing: 1px; }
.app-dl { margin-left: auto; }
.app-card-desc { color: #5f6b83; font-size: 12.5px; line-height: 1.45; margin: 0; flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app-card-actions { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin-top: auto; }
.app-card-actions button { min-height: 34px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: #33415e; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.app-card-actions button:hover { border-color: var(--accent); color: var(--accent); }
.app-card-actions .app-install { background: var(--accent); border-color: var(--accent); color: #fff; }
.app-card-actions .app-install:hover { color: #fff; filter: brightness(1.06); }
.app-card-actions .app-ico { width: 40px; padding: 0; display: grid; place-items: center; }
.app-card-actions .app-ico .material-symbols-outlined { font-size: 18px; }
.app-card-actions .app-fav { font-size: 15px; line-height: 1; }
.app-card-actions .app-fav.on { color: #f59e0b; border-color: #f59e0b; }
.app-card-skel { pointer-events: none; }
.app-card-skel .sk { display: block; border-radius: 8px; background: linear-gradient(90deg,#eef1f7 25%,#e2e8f2 37%,#eef1f7 63%); background-size: 400% 100%; animation: apphub-sk 1.3s ease infinite; }
.app-card-skel .app-card-prev.sk { height: 86px; border-radius: 12px; }
.app-card-skel .sk-line { height: 12px; }
.app-card-skel .sk-line.w2 { width: 45%; }
.app-card-skel .sk-desc { height: 34px; }
.app-card-skel .sk-btn { height: 34px; margin-top: auto; }
@keyframes apphub-sk { from { background-position: 100% 0; } to { background-position: 0 0; } }
.apphub-empty { grid-column: 1 / -1; text-align: center; padding: 44px 16px; color: #666e7b; }
.apphub-empty .material-symbols-outlined { display: block; font-size: 34px; color: #a9b4c8; margin-bottom: 8px; }
.apphub-empty b { display: block; font-size: 14px; color: #33415e; margin-bottom: 4px; }
.apphub-empty p { margin: 0; font-size: 12.5px; }
[data-theme="dark"] .apphub { background: #0b1120; }
[data-theme="dark"] .apphub-tabs button, [data-theme="dark"] .apphub-refresh { background: #1a2130; color: #c3cfe8; }
[data-theme="dark"] .apphub-head, [data-theme="dark"] .apphub-sec, [data-theme="dark"] .app-card-t b, [data-theme="dark"] .app-card-meta b, [data-theme="dark"] .apphub-empty b { color: #c3cfe8; }
[data-theme="dark"] .app-card { background: #141c30; }
[data-theme="dark"] .app-card-actions button { background: #1a2130; color: #c3cfe8; }
[data-theme="dark"] .app-card-actions .app-install { background: var(--accent); color: #fff; }
[data-theme="dark"] .app-card-skel .sk { background: linear-gradient(90deg,#141c30 25%,#1c2540 37%,#141c30 63%); background-size: 400% 100%; }
@media (max-width: 700px) {
  .chat { flex-direction: column; }
  .chat-left { flex: 1 1 auto; min-width: 0; max-width: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .chat-app { flex: 1 1 auto; }
}

/* ---- desk: one app per tile (thumb + name + updated + actions) — no folders ---- */
.dproj { position: relative; cursor: pointer; }
.dproj-thumb { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; border: 0; }
.dproj-name { display: flex; align-items: center; gap: 7px; padding: 9px 12px 6px; font: 600 13px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; color: var(--boot-ink, #1a1a1a); }
.dproj-name .material-symbols-outlined { font-size: 16px; color: var(--accent); }
.dproj-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dproj-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 8px 12px; }
.dproj-time { font-size: 11px; font-weight: 600; color: var(--boot-sub, #8a94a6); white-space: nowrap; }
.dproj-time[hidden] { display: none; }
.dproj-acts { display: flex; gap: 2px; flex: 0 0 auto; }
.dproj-acts button { border: 0; background: transparent; border-radius: 8px; padding: 6px; cursor: pointer; color: var(--boot-sub, #666e7b); display: inline-grid; place-items: center; }
.dproj-acts button:hover { background: rgba(0,103,192,.12); color: var(--accent); }
.dproj-acts .material-symbols-outlined { font-size: 17px; }
/* v19-desk: the live frame covers the DRAWN thumb, never replaces it — a preview that
   fails to mount, or a card beyond DESK_PREVIEW_MAX, still shows the drawn spec tile.
   visibility (not display) gates it until the relay ACKS, so the drawn tile never
   becomes a white flash while the app is still being written into the frame */
.dproj-live { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 16 / 10; overflow: hidden; pointer-events: none; background: #fff; visibility: hidden; }
.dproj-live[data-mounted="1"] { visibility: visible; }
.dproj-live iframe { width: 400%; height: 400%; border: 0; transform: scale(.25); transform-origin: 0 0; pointer-events: none; background: #fff; }
.dproj-live[data-mounted="1"]::after {
  content: '●'; position: absolute; top: 7px; right: 8px; font-size: 8px; color: #34d399;
  background: rgba(5,20,14,.65); border-radius: 999px; padding: 1px 4px;
}
.dproj-del { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(16,24,40,.5); color: #fff; cursor: pointer; opacity: 0; transition: opacity .12s ease; }
.dproj:hover .dproj-del { opacity: 1; }
.dproj-del:hover { background: #e0555f; }
.dproj-del .material-symbols-outlined { font-size: 15px; }

/* ---------- Apple-grade "Dream Machine" polish (trailing overrides) ---------- */
:root {
  --accent: #0b6ad0;
  --focus-ring: #0b4ea2; /* a11y A11: >=3:1 ring on light surfaces (--accent was 1.92:1) */
  --accent-2: #bf5af2;
  --ink: #1d1d1f;
  --mut: #6e6e73;
  --line: #e5e5ea;
  --win-bg: #ffffff;
  --bar: #f5f5f7;
  --cta: linear-gradient(120deg, #0b6ad0, #6d28d9);
  --menu-bg: rgba(255, 255, 255, .88);
  --menu-hover: #f0f0f3;
  --taskbar: rgba(255, 255, 255, .72);
  --quick-bg: rgba(255, 255, 255, .62);
}
[data-theme="dark"] {
  --accent: #0a84ff;
  --focus-ring: #8ab4f8; /* a11y A11: dark surfaces need a light ring (>=3:1) */
  --ring-plate: #148bf9; /* r9-accent: the white composer plate needs a blue that clears 3:1 on it AND on the cyan glow */
  --accent-2: #bf5af2;
  --ink: #f5f5f7;
  --mut: #a1a1a6;
  --line: #38383d;
  --win-bg: #1c1c1e;
  --bar: #2c2c2e;
  --cta: linear-gradient(120deg, #0a84ff, #8b5cf6);
  --menu-bg: rgba(28, 28, 30, .82);
  --menu-hover: rgba(255, 255, 255, .08);
  --taskbar: rgba(28, 28, 30, .72);
  --quick-bg: rgba(255, 255, 255, .07);
}

/* vibrancy glass */
.taskbar, .start-menu, .quick button { backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); }

/* softer, deeper surfaces */
.win { border-radius: 16px; border: 1px solid rgba(0,0,0,.09); box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.06); }
.win.max { border-radius: 12px; }
.start-menu { border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.26); }
.wizard { border-radius: 20px; }
.quick button { padding: 10px 18px; }
.boot h1 { letter-spacing: -.02em; }

/* hero brand eyebrow */
/* hero brand eyebrow — a11y: 11px was below the 12px floor. line-height is pinned to the
   previous computed 16.5px, so the box keeps its exact height (measured 612x16.5 @414,178.88
   desktop / 310x16.5 @40,94 mobile, before and after): only the glyphs grow. */
.boot-brand { margin: 0 0 4px; font-size: 12px; line-height: 16.5px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--boot-sub); }

/* macOS traffic lights */
/* v18-ux: the dots stay 12x12 (that is the point of the traffic-light look and they must not
   move), but the TARGET was 12x12 too — below the 24px minimum for touch and motor users. An
   absolutely-centred pseudo-element grows the hit area to 30x30 without touching layout,
   colour or the hover glyph. Gaps widen to 30px so neighbouring targets do not overlap:
   the row grows from 52px to 106px, and the title truncates instead of the bar overflowing. */
.win-ctl { gap: 30px; position: relative; }
.win-ctl button {
  width: 12px; height: 12px; padding: 0; border-radius: 50%;
  color: rgba(0,0,0,.55); font-size: 0; line-height: 1;
  display: grid; place-items: center; border: 1px solid rgba(0,0,0,.14);
  position: relative;
}
.win-ctl button::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); }
.win-bar:hover .win-ctl button { font-size: 8px; font-weight: 700; }
.win-ctl button[data-c="close"], .win-ctl button[data-c="close"]:hover { background: #ff5f57; }
.win-ctl button[data-c="min"], .win-ctl button[data-c="min"]:hover { background: #febc2e; }
.win-ctl button[data-c="max"], .win-ctl button[data-c="max"]:hover { background: #28c840; }
.win-ctl button:hover { filter: brightness(.92); }
.win-ico { order: 2; }
.win-title { text-align: center; }

/* example preview traffic lights */
.demo-lights { display: inline-flex; gap: 6px; align-items: center; }
.demo-lights i { width: 10px; height: 10px; border-radius: 50%; background: #9aa3b2; }
.demo-lights i:nth-child(1) { background: #ff5f57; }
.demo-lights i:nth-child(2) { background: #febc2e; }
.demo-lights i:nth-child(3) { background: #28c840; }

/* hero headline — bigger, glowing */
.boot h1 { font-size: clamp(32px, 8vw, 46px); font-weight: 800; letter-spacing: -.03em; filter: drop-shadow(0 3px 22px rgba(139,92,246,.35)); }
.boot-tag { font-size: 16px; line-height: 1.5; }

/* chat + build split view — framed, Apple-grade */
.win.chat-win { width: min(96vw, 1260px); height: min(92vh, 820px); }
.chat-app-frame { padding: 12px; background: #0a0f1e; }
/* v16-panes: the chat sidebar is draggable in IDE mode */
.chat-grip { flex: 0 0 7px; cursor: col-resize; background: var(--grip-bg, #f7f7f8); position: relative; }
.chat-grip::after { content: ''; position: absolute; inset: 0 3px; background: var(--grip-line, rgba(0,0,0,.12)); border-radius: 2px; }
.chat-grip:hover::after, .chat-grip:focus-visible::after { background: var(--accent); }
.chat-grip[hidden] { display: none !important; }
/* v16-ide-inchat: the code pane shares the chat's right half with the preview frame */
.chat-code { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: #0d1117; }
.chat-code[hidden] { display: none !important; }

/* ---------- v16-chat-mode: "Classic <-> IDE" switch on the chat window ---------- */
.mode-sw { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(0,0,0,.06); }
/* v18-ux: the Classic/IDE chips measured 19px tall (font 11.5px, padding 3px) — under the 24px
   target minimum and below the 12px type floor. 12px + min-height 24px keeps the look and makes
   the control reliably tappable; the switch container grows 23px -> 28px inside the title bar. */
.mode-sw button { border: 0; background: transparent; color: #4a5568; font: 600 12px "Segoe UI", system-ui, sans-serif; padding: 3px 9px; border-radius: 6px; cursor: pointer; min-height: 24px; display: inline-flex; align-items: center; }
.mode-sw button:hover { background: rgba(0,0,0,.06); }
.mode-sw button.on { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
/* IDE mode = the same window, dark and code-first */
.win.chat-win.ide-mode { background: #0d1117; border-color: #1f2733; --line: rgba(255,255,255,.08); --ink: #e6edf3; }
.win.chat-win.ide-mode .win-bar { background: #0b0f16; border-bottom: 1px solid #1f2733; }
.win.chat-win.ide-mode .win-title { color: #e6edf3; }
.win.chat-win.ide-mode .win-ctl button { color: #c9d1d9; }
.win.chat-win.ide-mode .win-ctl button:hover { background: rgba(255,255,255,.09); }
.win.chat-win.ide-mode .mode-sw { background: rgba(255,255,255,.07); }
.win.chat-win.ide-mode .mode-sw button { color: #9fb0c9; }
.win.chat-win.ide-mode .mode-sw button:hover { background: rgba(255,255,255,.08); }
.win.chat-win.ide-mode .mode-sw button.on { background: #1b2432; color: #7dd3fc; box-shadow: none; }
.win.chat-win.ide-mode { --grip-bg: #0b0f16; --grip-line: rgba(255,255,255,.09); }
.win.chat-win.ide-mode .chat { background: #0d1117; }
.win.chat-win.ide-mode .chat-left { flex: 0 0 320px; max-width: 460px; min-width: 200px; border-right: 1px solid rgba(255,255,255,.08); }
.win.chat-win.ide-mode .chat-grip:hover::after { background: #22d3ee; }
.win.chat-win.ide-mode .chat-head { background: #0b0f16; border-bottom: 1px solid rgba(255,255,255,.08); }
.win.chat-win.ide-mode .chat-head b,
.win.chat-win.ide-mode .chat-head input#chatProjName { color: #e6edf3; }
.win.chat-win.ide-mode .chat-head input#chatProjName:focus { background: #0d1117; border-color: #22d3ee; }
.win.chat-win.ide-mode .chat-head button { background: #141c30; border-color: rgba(255,255,255,.14); color: #7dd3fc; }
.win.chat-win.ide-mode .chat-msgs { background: #0d1117; }
.win.chat-win.ide-mode .cbubble { background: #161d29; color: #dbe4f7; }
.win.chat-win.ide-mode .cmsg.user .cbubble { background: #16283d; }
.win.chat-win.ide-mode .chat-composer { background: #0b0f16; border-top: 1px solid rgba(255,255,255,.08); }
.win.chat-win.ide-mode .chat-composer textarea { background: #0d1117; color: #e6edf3; border-color: rgba(255,255,255,.14); }
.win.chat-win.ide-mode .chat-composer textarea::placeholder { color: #6b7d9e; }
.chat-app-frame iframe { border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 50px rgba(0,0,0,.45); }


/* E3 print: app full-bleed, chat/nav/window chrome hidden. ponytail: parent
   print renders the iframe at 100vh = one printed page — multi-page artifacts
   upgrade path: iframe.contentWindow.print() (allow-modals already set). */
@media print {
  #taskbar, #startMenu, #boot, #anonBanner, #toast, .win:not(.chat-win), .win-bar, .chat-left, .chat-composer, .chat-app-head, .chat-app-tabs, #chatAppUsage { display: none !important; }
  .win.chat-win { position: static !important; width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; animation: none !important; min-height: 0 !important; }
  .chat-app { height: 100vh !important; }
  .chat-app-frame { padding: 0 !important; }
  .chat-app-frame iframe { border-radius: 0 !important; box-shadow: none !important; height: 100vh !important; }
}

/* v14.8: chat thread load-older button */
.cmore { display:block; margin:6px auto; padding:6px 14px; border:1px solid var(--line,#e2e2df); border-radius:999px; background:var(--panel,#fff); color:var(--ink,#16233a); font:12.5px system-ui; cursor:pointer; }

/* v16-ide: full IDE window (premium members + admins) */
.ide { display: flex; flex-direction: column; height: 100%; min-height: 0; background: #0d1117; color: #e6edf3; }
.ide-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; row-gap: 8px; overflow-x: auto; padding: 9px 12px; min-height: 52px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 12.5px; }
/* v16-ide-toolbar: the bar carried 15 labelled buttons = 1150px of content in a 938px
   pane, so the last ones (and half of "Save & run") sat outside. Icons + group
   separators keep every action visible in one row with room between the buttons. */
.ide-group { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding-left: 10px; margin-left: 3px; border-left: 1px solid rgba(255,255,255,.1); }
.ide-bar > .ide-group:first-of-type { border-left: 0; padding-left: 0; margin-left: 0; }
/* long project names must not push the toolbar into a second row */
#ideTitle, #ideMeta { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ide-group.push { margin-left: auto; }   /* the groups sit right; wrap keeps every button visible */
.ide-btn.ico { padding: 7px 10px; min-width: 42px; min-height: 36px; justify-content: center; }
.ide-btn.ico .material-symbols-outlined { font-size: 22px; }
.ide-btn.danger:hover { border-color: #e0555f; color: #ff9aa0; }
.ide-btn.ico.on { background: rgba(34,211,238,.18); border-color: #22d3ee; color: #7dd3fc; }
/* v16-live-code: the engine's stream, rendered where the code belongs */
/* v16-sel-agent: a marked line range must be visible at a glance */
#ideBody .ctxt.on { background: rgba(56,139,253,.22); box-shadow: inset 2px 0 0 #58a6ff; border-radius: 2px; }
#ideBody .ctxt { cursor: text; }
.ide-live-head { display: flex; align-items: center; gap: 8px; padding: 4px 10px 8px; color: #7dd3fc; font: 600 11.5px "Segoe UI", system-ui, sans-serif; position: sticky; top: 0; background: #0d1117; }
.ide-live-head i { width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 0 0 rgba(34,211,238,.6); animation: idePulse 1.4s ease-out infinite; }
.ide-live-meta { margin-left: auto; color: #6b7d9e; font-weight: 500; }
@keyframes idePulse { 0% { box-shadow: 0 0 0 0 rgba(34,211,238,.55); } 70% { box-shadow: 0 0 0 9px rgba(34,211,238,0); } 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); } }
.ide-bar::-webkit-scrollbar { height: 6px; }
.ide-bar b { font-weight: 600; color: #e6edf3; flex: 0 1 auto; min-width: 0; }
.ide-meta { color: #9aa8bd; font-size: 12px; }
.ide-btn { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #c9d1d9; border-radius: 9px; padding: 7px 12px; min-height: 36px; font: 12.5px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.ide-btn:hover { background: rgba(255,255,255,.1); }
.ide-btn.primary { background: linear-gradient(120deg,#1f6feb,#7c3aed); border-color: transparent; color: #fff; font-weight: 600; }
.ide-main { flex: 1 1 auto; display: grid; grid-template-columns: var(--ide-ex, 230px) 7px minmax(180px, 1fr) 7px var(--ide-pv, minmax(180px, 1fr)); min-height: 0; }
.ide-main.pv-off { grid-template-columns: var(--ide-ex, 230px) 7px minmax(180px, 1fr); }
.ide-main.pv-off .ide-grip[data-grip=pv] { display: none; }
.ide-grip { cursor: col-resize; background: #0b0f16; position: relative; touch-action: none; }
.ide-grip::after { content: ''; position: absolute; inset: 0 3px; background: rgba(255,255,255,.09); border-radius: 2px; }
.ide-grip:hover::after, .ide-grip:focus-visible::after { background: #22d3ee; }
.ide-grip:focus-visible { outline: 0; }
.ide-explorer { border-right: 1px solid rgba(255,255,255,.08); overflow: auto; padding: 8px; min-height: 0; }
.ide-explorer-head { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #9aa8bd; margin: 2px 4px 10px; }
.ide-file { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: #d5dde8; border-radius: 9px; padding: 8px 10px; font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.ide-file:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); }
.ide-file:hover { background: rgba(255,255,255,.06); }
.ide-file.on { background: rgba(56,139,253,.18); color: #fff; }
.ide-file small { margin-left: auto; color: #6e7681; font-size: 10.5px; }
.ide-editor { position: relative; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgba(255,255,255,.08); }
.ide-body { flex: 1 1 auto; overflow: auto; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; padding: 10px 0; display: flex; align-items: flex-start; gap: 10px; }
.code-body { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 10px; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; padding: 10px 0; }
.code-gutter { flex: 0 0 auto; text-align: right; padding-left: 12px; color: #7c8a9c; user-select: none; position: sticky; left: 0; background: #0d1117; }
.code-lines { flex: 1 1 auto; min-width: 0; padding-right: 12px; white-space: inherit; }
.ide-editor textarea { flex: 1 1 auto; width: 100%; min-height: 0; resize: none; border: 0; outline: 0; background: #0d1117; color: #e6edf3; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 10px 12px; }
.ide-preview { display: flex; flex-direction: column; min-height: 0; background: #11161f; }
.ide-preview.off { display: none; }
.ide-preview-head { display: flex; align-items: center; gap: 9px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #9aa8bd; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
.ide-preview-file { text-transform: none; letter-spacing: 0; color: #7dd3fc; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.ide-frame { flex: 1 1 auto; min-height: 0; position: relative; }
@media (max-width: 900px) { .ide-main { grid-template-columns: 1fr; } .ide-explorer, .ide-preview { display: none; } }
/* v16-ide-split: a half-width IDE keeps two panes readable — the preview yields */
.ide.narrow .ide-main { grid-template-columns: var(--ide-ex, 190px) 7px minmax(160px, 1fr) 7px var(--ide-pv, minmax(160px, 1fr)); }
.ide.narrow .ide-main.pv-off { grid-template-columns: var(--ide-ex, 190px) 7px minmax(160px, 1fr); }
.ide-tabs { display: flex; gap: 6px; padding: 6px 10px 4px; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,.06); }
.ide-tab { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #cbd5e1; border-radius: 9px 9px 0 0; padding: 7px 12px; font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; white-space: nowrap; }
.ide-tab:hover { color: #fff; }
.ide-tab.on { background: #0d1117; border-bottom-color: transparent; color: #fff; }
.ide-tab i { font-style: normal; color: #6e7681; padding: 0 2px; }
.ide-tab i:hover { color: #f85149; }
.ide-search { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ide-search input { flex: 1 1 auto; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #e6edf3; padding: 5px 10px; font: 12.5px "Segoe UI", system-ui, sans-serif; }
.ide-results { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.ide-hit { text-align: left; background: transparent; border: 0; border-left: 2px solid rgba(56,139,253,.5); color: #c9d1d9; padding: 4px 7px; border-radius: 5px; cursor: pointer; font: 11.5px/1.4 ui-monospace, Menlo, monospace; overflow: hidden; }
.ide-hit:hover { background: rgba(255,255,255,.06); }
.ide-hit small { display: block; color: #79c0ff; }
/* v16-ide: progress bar in the admin dashboard */
.ide-progress { position: relative; height: 22px; background: rgba(148,163,255,.14); border-radius: 999px; overflow: hidden; margin: 4px 0 10px; }
.ide-progress i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg,#0067c0,#22d3ee,#7c3aed); transition: width .4s ease; }
.ide-progress span { position: relative; z-index: 1; font: 600 11.5px/22px "Segoe UI",system-ui,sans-serif; color: #fff; padding-left: 12px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.ide-hint { display: flex; align-items: center; gap: 10px; margin: 6px 10px 0; padding: 7px 12px; border: 1px solid rgba(56,139,253,.35); background: rgba(56,139,253,.10); color: #c9d6ee; border-radius: 10px; font-size: 12.5px; }
.ide-hint button { margin-left: auto; background: transparent; border: 0; color: #8b98ab; font-size: 16px; cursor: pointer; }
.ide-quick { position: absolute; z-index: 40; left: 240px; top: 40px; width: min(460px, 60%); background: #121826; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; box-shadow: 0 24px 60px -24px rgba(0,0,0,.7); padding: 8px; }
.ide-quick input { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #e6edf3; padding: 7px 10px; font: 13px "Segoe UI", system-ui, sans-serif; margin-bottom: 6px; }
/* an author display rule beats the UA [hidden] rule — keep hidden really hidden */
.ide [hidden], .ide[hidden] { display: none !important; }
.ide-problems { max-height: 168px; overflow: auto; border-top: 1px solid rgba(255,255,255,.08); background: #12161f; padding: 6px 10px 8px; }
.ide-prob { display: flex; align-items: center; gap: 8px; font: 12px/1.5 ui-monospace, Menlo, monospace; color: #f0c674; padding: 3px 0; }
.ide-prob span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ide-status { min-height: 30px; display: flex; align-items: center; gap: 14px; padding: 4px 12px; border-top: 1px solid rgba(255,255,255,.10); background: #0a0d13; color: #8b98ab; font: 11.5px ui-monospace, Menlo, monospace; }
.ide-preview-head { display: flex; align-items: center; gap: 8px; }
.ide-noview { position: absolute; inset: 0; overflow: auto; background: #0d1117; }
.ide-noview-head { position: sticky; top: 0; padding: 6px 10px; font: 11.5px "Segoe UI", system-ui, sans-serif; color: #8b98ab; background: #0a0d13; border-bottom: 1px solid rgba(255,255,255,.08); }
.ide-frame { position: relative; }
.ide-search input#ideReplace { flex: 0 1 180px; }
.ide-body.wrap { white-space: pre-wrap; word-break: break-word; }
.ide-editor textarea.wrap { white-space: pre-wrap; }
#ideStatusWrap { cursor: pointer; padding: 0 4px; border-radius: 4px; }
#ideStatusWrap:hover { background: rgba(255,255,255,.08); }
.ide-select { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #c9d1d9; border-radius: 7px; padding: 3px 8px; font: 12px "Segoe UI", system-ui, sans-serif; max-width: 190px; }
.ide-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ide-btn .material-symbols-outlined { font-size: 20px; }

/* ---------- pointer + press feedback (audit: 3 of 17 controls had no hover, 0 :active rules) ----------
   The three primary send/start controls gave neither pointer nor press feedback. Colours stay in
   the existing ramps, one step darker, so the white ink clears 4.5:1 on light AND dark surfaces. */
.boot-send, .start-btn, .tb-send { transition: filter .15s ease, transform .12s ease; }
.boot-send:hover, .start-btn:hover, .tb-send:hover { filter: brightness(1.08); }
.boot-send:active, .start-btn:active, .tb-send:active { transform: scale(.95); filter: brightness(.92); }
/* #22d3ee held white ink at 2.9:1 and --cta's #0a84ff at 3.8:1 (measured on real pixels).
   #0e7490/#6d28d9 is the same cyan->violet ramp one step darker; worst gradient pixel >=5.3:1. */
.boot-send, .tb-send { background: linear-gradient(120deg, #0e7490, #6d28d9); }
/* press feedback for the rest of the app surface — transform only, so nothing reflows */
.task-item:active, .sm-group button:active, .sm-group a:active, .sm-dd-sum:active,
.anon-signin:active, .cta:active, .ghost:active, .examples-btn:active { transform: scale(.97); }

/* ---------- prefers-color-scheme: dark ------------------------------------------------
   The OS preference is the DEFAULT, never an override of an explicit choice:
     [data-theme="dark"]  (0,1,0, declared above) -> dark, whatever the OS says
     [data-theme="light"] (0,1,0)                 -> light: :not([data-theme="light"]) cannot
                                                     match, so this whole block is inert
     no data-theme at all (0,2,0, here)           -> follows prefers-color-scheme
   The dark values are a deliberate repeat of the two [data-theme="dark"] blocks because a media
   condition cannot be part of a selector list. Measured in a real browser: with data-theme
   removed the OS-dark render differs in 96.05 % of the viewport's pixels; with the app running
   it differs in 0 %, because v2/app.js pins the attribute ("light" whenever no theme is stored)
   — and index.html ships it statically too. That pin is the remaining blocker for OS-dark on /,
   and its one-line fix belongs in app.js: this sheet cannot read localStorage. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wall:
      radial-gradient(120% 90% at 12% 8%, #173a6b 0%, transparent 55%),
      radial-gradient(110% 90% at 90% 12%, #4b2a86 0%, transparent 52%),
      radial-gradient(120% 120% at 50% 110%, #0d3a5c 0%, transparent 60%),
      linear-gradient(160deg, #0a1430 0%, #0b1020 55%, #0a1a2e 100%);
    --dot: rgba(255, 255, 255, .06);
    --boot-ink: #eaf2ff;
    --boot-sub: #b9c4dd;
    --boot-link: #9fb4e8;
    --taskbar: rgba(28, 28, 30, .72);
    --taskbar-border: rgba(255, 255, 255, .08);
    --task-ink: #dbe4f7;
    --task-dim: #8b97b8;
    --task-btn: rgba(255, 255, 255, .06);
    --task-btn-hover: rgba(255, 255, 255, .13);
    --task-btn-on: rgba(255, 255, 255, .18);
    --menu-bg: rgba(28, 28, 30, .82);
    --menu-border: rgba(255, 255, 255, .1);
    --menu-hover: rgba(255, 255, 255, .08);
    --menu-label: #8b97b8;
    --quick-bg: rgba(255, 255, 255, .07);
    --quick-border: rgba(255, 255, 255, .14);
    --quick-ink: #eaf2ff;
    --quick-ico: #7dd3fc;
    --accent: #0a84ff;
    --focus-ring: #8ab4f8;
    --ring-plate: #148bf9; /* r9-accent: the white composer plate needs a blue that clears 3:1 on it AND on the cyan glow */
    --accent-2: #bf5af2;
    --ink: #f5f5f7;
    --mut: #a1a1a6;
    --line: #38383d;
    --win-bg: #1c1c1e;
    --bar: #2c2c2e;
    --cta: linear-gradient(120deg, #0a84ff, #8b5cf6);
  }
  :root:not([data-theme="light"]) .art-bar { background: rgba(255,255,255,.05); }
  :root:not([data-theme="light"]) .art-btn { background: #1a2130; color: #c3cfe8; border-color: rgba(255,255,255,.12); }
  :root:not([data-theme="light"]) .sm-ddc { background: rgba(255,255,255,.1); color: #cbd5e1; }
  :root:not([data-theme="light"]) .apphub { background: #0b1120; }
  :root:not([data-theme="light"]) .apphub-tabs button,
  :root:not([data-theme="light"]) .apphub-refresh { background: #1a2130; color: #c3cfe8; }
  :root:not([data-theme="light"]) .apphub-head,
  :root:not([data-theme="light"]) .apphub-sec,
  :root:not([data-theme="light"]) .app-card-t b,
  :root:not([data-theme="light"]) .app-card-meta b,
  :root:not([data-theme="light"]) .apphub-empty b { color: #c3cfe8; }
  :root:not([data-theme="light"]) .app-card { background: #141c30; }
  :root:not([data-theme="light"]) .app-card-actions button { background: #1a2130; color: #c3cfe8; }
  :root:not([data-theme="light"]) .app-card-actions .app-install { background: var(--accent); color: #fff; }
  :root:not([data-theme="light"]) .app-card-skel .sk { background: linear-gradient(90deg,#141c30 25%,#1c2540 37%,#141c30 63%); background-size: 400% 100%; }
  /* v18 A4: App-Daten */
  :root:not([data-theme="light"]) .appdata { background: #0b1120; }
  :root:not([data-theme="light"]) .ad-field,
  :root:not([data-theme="light"]) .ad-sec-head,
  :root:not([data-theme="light"]) .ad-table td { color: #c3cfe8; }
  :root:not([data-theme="light"]) .ad-table th { color: #a1a1a6; }
  :root:not([data-theme="light"]) .ad-table tbody tr.on { background: #141c30; }
  :root:not([data-theme="light"]) .ad-btn,
  :root:not([data-theme="light"]) .ad-field select { background: #1a2130; color: #c3cfe8; }
  :root:not([data-theme="light"]) .ad-btn.danger { color: #f97066; }
  :root:not([data-theme="light"]) .ad-bar { background: #1a2130; }
  :root:not([data-theme="light"]) .ad-chip { background: #1a2130; color: #c3cfe8; }
}