:root {
    color-scheme: dark;
    --bg: #0b0b0d;
    --panel: #151518;
    --panel2: #1c1c20;
    --line: #2b2b31;
    --text: #f0f0f2;
    --muted: #a1a1aa;
    --dim: #686873;
    --hot: #f87171;
    --ok: #6ee7b7;
    --warn: #facc15;
    --blue: #7dd3fc;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  a { color: inherit; }
  button, input, select, textarea { font: inherit; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid rgba(248,113,113,.9);
    outline-offset: 2px;
  }
  .mono { font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: calc(env(safe-area-inset-top, 0) + .7rem) .9rem .7rem;
    border-bottom: 1px solid var(--line);
    background: rgba(11,11,13,.94);
    backdrop-filter: blur(12px);
  }
  .statusbar {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0) + 47px);
    z-index: 4;
    display: flex;
    gap: .45rem;
    overflow-x: auto;
    padding: .42rem .9rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(17,17,21,.92);
    color: var(--muted);
    font-size: 11px;
  }
  .statusbar .pill {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .22rem .48rem;
    background: #0f0f13;
    color: var(--muted);
  }
  .statusbar .pill.ok { color: var(--ok); border-color: rgba(110,231,183,.35); }
  .statusbar .pill.warn { color: var(--warn); border-color: rgba(250,204,21,.35); }
  .brand { font-size: 1.05rem; font-weight: 800; white-space: nowrap; text-decoration: none; color: var(--text); letter-spacing: -.01em; }
  .brand span { color: var(--hot); }
  .spacer { flex: 1; }
  .top {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: .38rem .58rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
  }
  .top:hover, .btn:hover, .tile:hover { border-color: rgba(248,113,113,.45); color: #fff; }
  main {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 1rem .9rem calc(env(safe-area-inset-bottom, 0) + 2rem);
  }
  .hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: end;
    margin-bottom: 1.3rem;
    padding: 1.4rem 1.3rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background:
      radial-gradient(120% 140% at 0% 0%, rgba(248,113,113,.14), transparent 46%),
      radial-gradient(90% 120% at 100% 10%, rgba(125,211,252,.10), transparent 50%),
      linear-gradient(180deg, var(--panel2), var(--panel));
    box-shadow: 0 18px 44px rgba(6,8,16,.45), inset 0 1px 0 rgba(255,255,255,.05);
    overflow: hidden;
  }
  h1 { margin: 0; font-size: clamp(1.7rem, 3.6vw, 2.45rem); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; }
  .sub { margin: .4rem 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; max-width: 46ch; }
  .health {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
  }
  .spine-health {
    grid-column: 1 / -1;
    display: grid;
    gap: .55rem;
    margin-top: .35rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: .72rem;
    background: rgba(8,8,12,.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .spine-health.healthy { border-color: rgba(110,231,183,.32); }
  .spine-health.degraded { border-color: rgba(250,204,21,.36); }
  .spine-health.offline { border-color: rgba(248,113,113,.45); }
  .spine-health-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
  }
  .spine-health-title { color: var(--text); font-size: 12px; font-weight: 800; letter-spacing: -.01em; }
  .spine-health-sub { margin-top: .1rem; color: var(--dim); font-size: 10px; }
  .spine-health-state {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .18rem .46rem;
    color: var(--muted);
    font: 700 10px/1 ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    text-transform: uppercase;
  }
  .spine-health-state.healthy { color: var(--ok); border-color: rgba(110,231,183,.36); }
  .spine-health-state.degraded { color: var(--warn); border-color: rgba(250,204,21,.4); }
  .spine-health-state.offline { color: var(--hot); border-color: rgba(248,113,113,.5); }
  .spine-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: .4rem;
  }
  .spine-health-card {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .34rem;
    align-items: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: .42rem .48rem;
    background: rgba(0,0,0,.24);
    color: var(--muted);
    font-size: 11px;
  }
  .spine-health-card.healthy { border-color: rgba(110,231,183,.2); }
  .spine-health-card.degraded { border-color: rgba(250,204,21,.28); }
  .spine-health-card.offline { border-color: rgba(248,113,113,.38); }
  .spine-health-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--dim); }
  .spine-health-card.healthy .spine-health-dot { background: var(--ok); }
  .spine-health-card.degraded .spine-health-dot, .spine-health-card.checking .spine-health-dot { background: var(--warn); }
  .spine-health-card.offline .spine-health-dot { background: var(--hot); }
  .spine-health-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(240,240,242,.86); }
  .spine-health-meta { color: var(--dim); font-size: 10px; white-space: nowrap; }
  .spine-health-error { grid-column: 2 / -1; min-width: 0; color: var(--hot); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: .34rem;
    min-height: 28px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .26rem .5rem;
    color: var(--muted);
    background: #111115;
    font-size: 11px;
  }
  .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--dim); }
  .dot.ok { background: var(--ok); }
  .dot.warn { background: var(--warn); }
  .dot.bad { background: var(--hot); }
  .grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
    gap: .9rem;
    align-items: start;
  }
  .panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    overflow: hidden;
  }
  .panel h2 {
    margin: 0;
    padding: .82rem .9rem;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
  }
  .tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .7rem;
    padding: .75rem;
  }
  .tile {
    position: relative;
    min-height: 154px;
    display: grid;
    align-content: end;
    gap: .4rem;
    border: 1px solid #26262c;
    border-radius: 8px;
    background: #101014;
    padding: .82rem;
    overflow: hidden;
    text-decoration: none;
    isolation: isolate;
  }
  .tile-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
  }
  .tile-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(1.08) brightness(.78);
    transform: scale(1.01);
    transition: transform .28s ease, filter .28s ease;
  }
  .tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--tile-image);
    background-size: cover;
    background-position: center;
    transform: scale(1.01);
    filter: saturate(1.08) brightness(.78);
    transition: transform .28s ease, filter .28s ease;
  }
  .tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(180deg, rgba(10,10,12,.1), rgba(10,10,12,.24) 34%, rgba(10,10,12,.92)),
      radial-gradient(circle at 18% 10%, rgba(125,211,252,.14), transparent 34%);
  }
  .tile:hover::before { transform: scale(1.045); filter: saturate(1.18) brightness(.9); }
  .tile:hover .tile-media img { transform: scale(1.045); filter: saturate(1.18) brightness(.9); }
  .tile strong { font-size: .95rem; line-height: 1.15; }
  .tile span { color: rgba(240,240,242,.76); font-size: 12px; line-height: 1.35; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
  .tile .label {
    width: fit-content;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(0,0,0,.38);
    color: rgba(255,255,255,.82);
    padding: .18rem .44rem;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .tile.hot { border-color: rgba(248,113,113,.4); }
  .rows { display: grid; }
  .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .76rem .82rem;
    border-bottom: 1px solid #24242a;
  }
  .row:last-child { border-bottom: 0; }
  .row strong { display: block; font-size: 13px; }
  .row span { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; margin-top: .15rem; }
  .btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    padding: .42rem .62rem;
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
  }
  .btn.hot { color: var(--hot); border-color: rgba(248,113,113,.4); }
  .stack { display: grid; gap: .9rem; }
  .askbox {
    display: grid;
    gap: .5rem;
    padding: .75rem;
  }
  .ask-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
  }
  select, textarea, input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #101014;
    color: var(--text);
  }
  select { min-height: 36px; padding: .42rem .55rem; }
  textarea {
    min-height: 76px;
    resize: vertical;
    padding: .62rem .68rem;
  }
  .result {
    min-height: 36px;
    border: 1px solid #25252b;
    border-radius: 7px;
    background: var(--panel2);
    color: var(--muted);
    padding: .6rem .68rem;
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-wrap;
  }
  .ask-tools {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
  }
  .btn.ghost {
    min-height: 30px;
    border-color: rgba(255,255,255,.1);
    background: rgba(255,255,255,.03);
    color: var(--dim);
    font-size: 11px;
    padding: .34rem .55rem;
  }
  .btn.ghost:hover { color: var(--text); border-color: rgba(255,255,255,.22); }
  .ask-tools-status {
    flex: 1;
    min-width: 0;
    color: var(--dim);
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .btn {
    transition: border-color .18s, color .18s, background .18s, transform .12s;
  }
  .btn:active { transform: scale(.97); }
  .panel { box-shadow: 0 10px 30px rgba(6,8,16,.32); }
  .tile { box-shadow: 0 12px 30px rgba(6,8,16,.4); transition: transform .22s ease, box-shadow .22s ease; }
  .tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(6,8,16,.55); }
  .statusbar { font-size: 10.5px; opacity: .82; }
  .statusbar .pill { background: rgba(15,15,19,.6); }
  @media (max-width: 860px) {
    header { overflow-x: auto; }
    .hero, .grid { grid-template-columns: 1fr; }
    .health { justify-content: flex-start; }
    .tiles { grid-template-columns: 1fr; }
    .tile { min-height: 132px; }
  }


/* Warm Schaltzentrale pass — Dee: no urn gallery. */
:root {
  --bg: #120c0b;
  --panel: rgba(32, 23, 20, .78);
  --panel2: rgba(49, 32, 25, .82);
  --line: rgba(255, 213, 161, .16);
  --text: #fff7ed;
  --muted: #d8bca0;
  --dim: #8f745f;
  --hot: #ff7a59;
  --ok: #74f0b4;
  --warn: #ffd166;
  --blue: #8bd3ff;
  --brass: #e8b15b;
  --rose: #ff6b8a;
  --cream: #fff2da;
}
html, body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv01", "ss03";
  background:
    radial-gradient(900px 520px at 16% -12%, rgba(255, 122, 89, .22), transparent 62%),
    radial-gradient(760px 480px at 95% 8%, rgba(232, 177, 91, .16), transparent 58%),
    radial-gradient(650px 520px at 58% 110%, rgba(145, 64, 30, .18), transparent 62%),
    linear-gradient(135deg, #160e0c 0%, #0b0a0d 48%, #17100e 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 40% 15%, #000 0, transparent 72%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, transparent 0 48%, rgba(0,0,0,.32) 100%);
}
.mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; }
header {
  border-bottom-color: rgba(255, 213, 161, .12);
  background: rgba(18, 12, 11, .72);
  box-shadow: 0 18px 46px rgba(0,0,0,.22);
}
.brand { font-weight: 800; letter-spacing: -.035em; }
.brand span { color: var(--brass); text-shadow: 0 0 22px rgba(232, 177, 91, .42); }
.top, .btn {
  border-color: rgba(255, 213, 161, .18);
  background: rgba(255, 242, 218, .045);
  color: #e7c8a8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.top:hover, .btn:hover {
  border-color: rgba(255, 179, 102, .55);
  background: rgba(255, 122, 89, .12);
  color: #fff7ed;
}
.statusbar {
  border-bottom-color: rgba(255, 213, 161, .10);
  background: rgba(25, 15, 13, .74);
  color: #bfa287;
}
.statusbar .pill {
  border-color: rgba(255, 213, 161, .14);
  background: rgba(255, 242, 218, .045);
}
main { width: min(1240px, 100%); padding-top: 1.15rem; }
.cockpit-stage {
  min-height: 280px;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  align-items: stretch;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  border-radius: 28px;
  border-color: rgba(255, 218, 176, .22);
  background:
    linear-gradient(135deg, rgba(255, 245, 226, .08), rgba(255,255,255,.018) 38%, rgba(255, 106, 74, .10)),
    radial-gradient(820px 300px at 10% 20%, rgba(255, 122, 89, .28), transparent 65%),
    radial-gradient(620px 280px at 75% 0%, rgba(255, 209, 102, .20), transparent 66%),
    rgba(28, 18, 16, .72);
  box-shadow: 0 28px 90px rgba(36, 12, 8, .52), inset 0 1px 0 rgba(255,255,255,.10);
}
.aurora { position: absolute; inset: -25%; z-index: -1; filter: blur(32px); opacity: .72; }
.aurora span { position: absolute; width: 34%; aspect-ratio: 1; border-radius: 999px; mix-blend-mode:screen; }
.aurora span:nth-child(1) { left: 7%; top: 20%; background: rgba(255, 100, 62, .58); }
.aurora span:nth-child(2) { right: 12%; top: 6%; background: rgba(232, 177, 91, .44); }
.aurora span:nth-child(3) { left: 42%; bottom: 2%; background: rgba(255, 107, 138, .32); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.eyebrow {
  width: fit-content;
  margin-bottom: .85rem;
  border: 1px solid rgba(255, 213, 161, .22);
  border-radius: 999px;
  padding: .32rem .62rem;
  background: rgba(0,0,0,.24);
  color: #ffdca8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
h1 {
  font-size: clamp(2.5rem, 8vw, 5.7rem);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.07em;
  color: var(--cream);
  text-shadow: 0 18px 70px rgba(255, 122, 89, .32);
}
.sub { max-width: 58ch; margin-top: .85rem; color: #ead0b2; font-size: clamp(15px, 1.7vw, 18px); }
.hero-actions { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1.15rem; }
.hero-cta { min-height: 40px; padding-inline: .95rem; border-radius: 999px; font-weight: 750; }
.btn.hot, .hero-cta.hot {
  color: #24100b;
  border-color: rgba(255, 214, 156, .54);
  background: linear-gradient(135deg, #ffd166, #ff7a59 72%, #ff6b8a);
  box-shadow: 0 12px 32px rgba(255, 122, 89, .26), inset 0 1px 0 rgba(255,255,255,.32);
}
.activity-card {
  position: relative;
  display: grid;
  align-content: end;
  gap: .36rem;
  border: 1px solid rgba(255, 213, 161, .22);
  border-radius: 22px;
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    radial-gradient(260px 150px at 80% 0%, rgba(255, 209, 102, .22), transparent 62%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 46px rgba(0,0,0,.22);
  overflow: hidden;
}
.activity-card::before { content: ""; position: absolute; inset: auto -20% -42% 18%; height: 65%; background: radial-gradient(circle, rgba(255,122,89,.35), transparent 70%); }
.activity-kicker { color: #ffdca8; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.activity-card strong { font-size: 1.35rem; letter-spacing: -.04em; color: #fff6ea; }
.activity-card span:not(.activity-kicker) { color: #dfbea0; font-size: 13px; line-height: 1.35; }
.activity-flow { display: flex; gap: .36rem; margin-top: .55rem; }
.activity-flow i { width: 34px; height: 5px; border-radius: 999px; background: linear-gradient(90deg, #ffd166, #ff7a59); box-shadow: 0 0 18px rgba(255,122,89,.38); }
.spine-health {
  background: rgba(21, 13, 12, .54);
  border-color: rgba(255, 218, 176, .18);
  border-radius: 18px;
  backdrop-filter: blur(16px);
}
.spine-health-title { color: #fff2da; font-size: 13px; }
.spine-health-sub { color: #b89777; }
.spine-health-card { background: rgba(255, 242, 218, .045); border-color: rgba(255, 218, 176, .12); border-radius: 13px; }
.spine-health-label { color: rgba(255, 247, 237, .86); }
.grid { grid-template-columns: minmax(0, 1fr) minmax(310px, .42fr); gap: 1rem; }
.panel {
  border-radius: 22px;
  border-color: rgba(255, 213, 161, .16);
  background: linear-gradient(180deg, rgba(255, 242, 218, .065), rgba(255,255,255,.024)), rgba(20, 13, 12, .78);
  box-shadow: 0 24px 70px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(18px);
}
.panel h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  border-bottom-color: rgba(255, 213, 161, .12);
  color: #fff2da;
  font-size: 1.05rem;
  padding: 1rem 1.05rem;
}
.panel h2 small { color: #a9896d; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tiles { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: .82rem; padding: .95rem; }
.tile {
  min-height: 166px;
  border-radius: 20px;
  border-color: rgba(255, 213, 161, .14);
  background: rgba(24, 14, 12, .78);
  padding: .95rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07);
}
.tile.priority { grid-column: span 2; min-height: 205px; }
.tile.hot { border-color: rgba(255, 179, 102, .34); }
.tile::after {
  background:
    linear-gradient(180deg, rgba(19,10,8,.05), rgba(19,10,8,.20) 34%, rgba(19,10,8,.92)),
    radial-gradient(circle at 14% 6%, rgba(255,209,102,.20), transparent 36%),
    radial-gradient(circle at 84% 12%, rgba(255,107,138,.16), transparent 34%);
}
.tile-media img, .tile::before { filter: saturate(1.22) contrast(1.04) brightness(.84); }
.tile:hover {
  transform: translateY(-6px) scale(1.012);
  border-color: rgba(255, 208, 144, .64);
  box-shadow: 0 26px 70px rgba(56, 18, 10, .48), 0 0 0 1px rgba(255, 213, 161, .09) inset;
}
.tile:hover::before, .tile:hover .tile-media img { transform: scale(1.08); filter: saturate(1.42) brightness(1.02); }
.tile strong { font-size: 1.07rem; letter-spacing: -.035em; color: #fff7ed; }
.tile.priority strong { font-size: clamp(1.2rem, 2vw, 1.55rem); }
.tile span { color: rgba(255, 237, 213, .78); }
.tile .label {
  border-color: rgba(255, 218, 176, .24);
  background: rgba(20, 10, 8, .50);
  color: #ffdca8;
}
.tile::marker { display:none; }
.row { border-bottom-color: rgba(255, 213, 161, .12); padding: .95rem 1rem; }
.row span, .result, select, textarea, input { color: #d9bea5; }
select, textarea, input, .result { border-color: rgba(255, 213, 161, .16); background: rgba(10, 7, 7, .34); }
textarea:focus, select:focus { border-color: rgba(255, 179, 102, .5); box-shadow: 0 0 0 4px rgba(255, 122, 89, .10); }
#ask.panel { border-color: rgba(255, 122, 89, .25); }
#ask textarea { min-height: 108px; }
.spanish-panel { border-color: rgba(251, 191, 36, .26); }
.spanish-body { display: grid; gap: .95rem; padding: 1rem; }
.spanish-title { display: block; margin-bottom: .55rem; color: #fff2da; font-size: .92rem; }
.spanish-words { display: grid; gap: .48rem; }
.spanish-word { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: .55rem; align-items: baseline; border: 1px solid rgba(255, 213, 161, .13); border-radius: 14px; padding: .55rem .65rem; background: rgba(255, 242, 218, .045); }
.spanish-word b { color: #ffd166; font-size: 1.05rem; }
.spanish-word span { color: #ead0b2; font-size: .88rem; }
.spanish-word small { grid-column: 1 / -1; color: rgba(255, 237, 213, .62); font-style: italic; }
.spanish-quiz { display: grid; gap: .58rem; border-top: 1px solid rgba(255, 213, 161, .12); padding-top: .9rem; }
.spanish-quiz-fields { display: grid; gap: .5rem; }
.spanish-quiz label { display: grid; gap: .3rem; color: #d9bea5; font-size: .82rem; }
.spanish-quiz input { min-height: 38px; border-radius: 12px; }
.spanish-score { color: #ffd166; }
@keyframes warmPulse {
  0%, 100% { opacity: .58; transform: scaleX(.75); }
  50% { opacity: 1; transform: scaleX(1); }
}
.activity-flow i:nth-child(1) { animation: warmPulse 1.8s ease-in-out infinite; transform-origin: left; }
.activity-flow i:nth-child(2) { animation: warmPulse 1.8s ease-in-out .22s infinite; transform-origin: left; }
.activity-flow i:nth-child(3) { animation: warmPulse 1.8s ease-in-out .44s infinite; transform-origin: left; }
@media (prefers-reduced-motion: reduce) {
  .activity-flow i { animation: none; }
  .tile, .tile::before, .tile-media img { transition: none; }
}
@media (max-width: 1040px) { .tile.priority { grid-column: span 1; } }
@media (max-width: 860px) {
  .cockpit-stage { grid-template-columns: 1fr; min-height: auto; }
  .activity-card { min-height: 150px; }
  h1 { font-size: clamp(2.4rem, 15vw, 4rem); }
}


/* Warm tune 2: make cards action-oriented, not plaques. */
.hero-cta.ghost {
  color: #ffe4bc;
  border-color: rgba(255, 218, 176, .32);
  background: rgba(255, 242, 218, .10);
}
.hero-cta.ghost:hover {
  color: #24100b;
  background: linear-gradient(135deg, rgba(255, 209, 102, .92), rgba(255, 122, 89, .86));
}
.tile > span:not(.tile-media):last-child::after {
  content: " · Öffnen →";
  color: #ffd166;
  font-weight: 800;
  white-space: nowrap;
}
.tile:hover > span:not(.tile-media):last-child::after { color: #fff2da; }
.tile:nth-child(3n+1)::after { background: linear-gradient(180deg, rgba(19,10,8,.04), rgba(19,10,8,.18) 34%, rgba(19,10,8,.90)), radial-gradient(circle at 16% 8%, rgba(255, 209, 102, .23), transparent 36%); }
.tile:nth-child(3n+2)::after { background: linear-gradient(180deg, rgba(19,10,8,.04), rgba(19,10,8,.18) 34%, rgba(19,10,8,.90)), radial-gradient(circle at 82% 10%, rgba(255, 107, 138, .18), transparent 36%); }
.tile:nth-child(3n)::after { background: linear-gradient(180deg, rgba(19,10,8,.04), rgba(19,10,8,.18) 34%, rgba(19,10,8,.90)), radial-gradient(circle at 20% 12%, rgba(139, 211, 255, .15), transparent 35%); }
.tile strong::before {
  content: "";
  display: inline-block;
  width: .48rem;
  height: .48rem;
  margin-right: .42rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd166, #ff7a59);
  box-shadow: 0 0 14px rgba(255, 122, 89, .48);
  vertical-align: .08em;
}

/* Mobile guard: later warm grid rules must not reintroduce two columns. */
@media (max-width: 860px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  header { gap: .42rem; padding-inline: .75rem; }
  .brand { font-size: .98rem; }
  .top { padding-inline: .5rem; font-size: 11px; }
  main { width: 100%; padding: .85rem .85rem calc(env(safe-area-inset-bottom, 0) + 5.5rem); overflow: hidden; }
  .statusbar { top: calc(env(safe-area-inset-top, 0) + 47px); padding-inline: .85rem; scroll-snap-type: x proximity; }
  .statusbar .pill { scroll-snap-align: start; max-width: 82vw; overflow: hidden; text-overflow: ellipsis; }
  .cockpit-stage { width: 100%; grid-template-columns: minmax(0, 1fr); gap: .85rem; border-radius: 24px; padding: 1.15rem; margin-bottom: 1rem; }
  .hero-copy, .activity-card, .spine-health, .panel, .stack { min-width: 0; }
  h1 { font-size: clamp(2.85rem, 14.5vw, 4.4rem); overflow-wrap: anywhere; }
  .sub { font-size: 15px; }
  .activity-card { min-height: 130px; }
  .spine-health-grid { grid-template-columns: 1fr; }
  .grid { width: 100%; grid-template-columns: minmax(0, 1fr) !important; gap: 1rem; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile, .tile.priority { grid-column: auto; min-height: 150px; }
  .row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .row .btn { width: fit-content; }
  #ask textarea { min-height: 118px; }
}

@media (max-width: 420px) {
  header .top { min-height: 34px; }
  .hero-actions { gap: .5rem; }
  .hero-cta { flex: 1 1 auto; min-width: 135px; }
  .spine-health-head { align-items: flex-start; }
  .spine-health-meta { display: none; }
  .ask-controls { grid-template-columns: minmax(0, 1fr) 58px; }
  .askbox { padding: .7rem; }
}


/* Warm image-card polish: make cockpit tiles feel like living surfaces. */
.tile-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .26), transparent 24%),
    radial-gradient(circle at 82% 12%, rgba(251, 191, 36, .28), transparent 34%),
    linear-gradient(135deg, rgba(255, 122, 89, .18), transparent 46%);
  mix-blend-mode:screen;
  opacity: .62;
  pointer-events: none;
}
.tile.priority .tile-media::after {
  opacity: .82;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .34), transparent 24%),
    radial-gradient(circle at 82% 10%, rgba(251, 191, 36, .36), transparent 36%),
    linear-gradient(135deg, rgba(255, 122, 89, .24), rgba(255, 107, 138, .10) 58%, transparent);
}
.tile-image-shine {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 38%, rgba(255, 242, 218, .16) 48%, transparent 58% 100%);
  opacity: .0;
  transform: translateX(-38%);
  transition: opacity .24s ease, transform .42s ease;
}
.tile:hover .tile-image-shine { opacity: .95; transform: translateX(34%); }