:root {
      --bg: #ffffff;
      --panel: #ffffff;
      --text: #0b0b0b;
      --muted: #4b5563;
      --accent: #ffc000;
      --accent-ink: #0b0b0b;
      --ok: #15803d;
      --warn: #b45309;
      --err: #b91c1c;
      --line: #e5e7eb;
      --chip: #f3f4f6;
      --codebg: #f8fafc;
      --hintbg: #fff8cc;
      --hintline: #ffe168;
      --radius: 14px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg:#000000; --panel:#0a0a0a; --text:#f5f5f5; --muted:#cbd5e1;
        --accent:#ffd400; --accent-ink:#0b0b0b; --line:#111827; --chip:#111827; --codebg:#0f172a;
        --hintbg:#151513; --hintline:#554400;
      }
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    .banner-top{ position: static; background: var(--accent); border-bottom:4px solid #0b0b0b; color: var(--accent-ink); }
    .banner-bottom{ position: static; background:#0b0b0b; border-top:4px solid var(--accent); color: var(--accent); }
    .band-inner{ max-width:1080px; margin:0 auto; padding:8px 16px; display:flex; align-items:center; justify-content:flex-start; gap:12px; min-height:84px; }
    .brand-logo{ height:64px; width:auto; border-radius:4px; display:block; }
    .brand-title { font-weight: 900; letter-spacing: 0.3px; }
    .banner-bottom .band-inner{ min-height:44px; justify-content:center; font-weight:800; }

    .wrap { max-width: 1080px; margin: 30px auto; padding: 0 16px 24px; }
    h1 { font-size: clamp(24px, 3vw, 36px); margin: 0 0 6px; }
    p.sub { margin: 0 0 16px; color: var(--muted); }

    .card {
      background: var(--panel);
      border-radius: var(--radius);
      padding: 18px;
      margin: 14px 0;
      box-shadow: 0 8px 24px rgba(2,6,23,0.06);
      border: 1px solid var(--line);
    }

    .row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
    .row2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
    @media (max-width: 860px) { .row2 { grid-template-columns: 1fr; } }

    .btn {
      border: 2px solid var(--accent);
      background: var(--accent);
      color: var(--accent-ink);
      padding: 10px 14px;
      border-radius: 10px;
      font-weight: 800;
      cursor: pointer;
    }
    .btn.secondary {
      background: transparent;
      color: var(--text);
      border: 2px solid var(--accent);
    }
    .btn:disabled { opacity: 0.6; cursor: not-allowed; }

    .small { font-size: 12px; color: var(--muted); }
    .mono { font-family: var(--mono); }
    .muted { color: var(--muted); }

    .pill {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      border: 1px solid var(--line);
      background: var(--chip);
    }
    .pill.ok { background: rgba(21,128,61,.12); color: var(--ok); border-color: rgba(21,128,61,.35); }
    .pill.warn { background: rgba(180,83,9,.12); color: var(--warn); border-color: rgba(180,83,9,.35); }
    .pill.err { background: rgba(185,28,28,.12); color: var(--err); border-color: rgba(185,28,28,.35); }

    .result-good { border-left-color: var(--ok) !important; }
    .result-mixed { border-left-color: var(--warn) !important; }
    .result-bad { border-left-color: var(--err) !important; }

    .hint {
      background: var(--hintbg);
      border: 1px solid var(--hintline);
      border-radius: 12px;
      padding: 10px 12px;
      margin-top: 10px;
    }

    .flow { list-style:none; padding:0; margin: 10px 0 20px; display:flex; gap:8px; flex-wrap:wrap; }
    .flow li { padding:6px 10px; border-radius:999px; border:1px solid var(--line); background: var(--chip); color:#111827; font-weight:700; font-size:13px; }
    .flow li.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

    .choice-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }

    .choice {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px;
      background: var(--panel);
      cursor: pointer;
      transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
      min-height: 120px;
    }
    .choice:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(2,6,23,0.06); }
    .choice.selected {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(255,192,0,0.18);
      background: #fffdf4;
    }
    @media (prefers-color-scheme: dark) {
      .choice.selected { background: #16140b; }
    }
    .choice h3 { margin: 0 0 6px; font-size: 17px; }
    .choice p { margin: 0; color: var(--muted); font-size: 14px; }

    .snippet {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      background: var(--codebg);
      margin-top: 10px;
    }
    .snippet h4 { margin: 0 0 6px; }
    .snippet p { margin: 0; }

    .metric-grid {
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
      margin-top: 12px;
    }
    .metric {
      border: 1px dashed var(--line);
      border-radius: 12px;
      padding: 12px;
      display: grid;
      grid-template-columns: 1fr 96px;
      gap: 10px;
      align-items: center;
      min-height: 104px;
    }
    .metric-copy { min-width: 0; }
    .metric-image-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    .metric-image {
      width: 92px;
      height: auto;
      max-height: 72px;
      object-fit: contain;
      display: block;
    }
    .metric .label { font-size: 16px; font-weight: 600; color: var(--muted); }
    .metric .value { font-size: 16px; font-weight: 900; margin-top: 4px; }

    .debrief {
      border-left: 6px solid var(--accent);
      padding-left: 14px;
      margin-top: 10px;
    }

    .hidden { display: none !important; }


.selector-layout { align-items: start; }
.selector-grid { grid-template-columns: 1fr; margin-top: 0; }
.selector-card-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.selector-card-meta { margin-top:10px; color: var(--muted); font-size: 14px; }
.choice.selector-choice { min-height: 148px; text-align:left; }
.choice.selector-choice.disabled { opacity: 0.5; cursor: not-allowed; }
.choice.selector-choice.disabled:hover { transform: none; box-shadow: none; }
.choice.selector-choice .selector-tag { margin-top: 10px; }


.org-context-card { padding: 16px; }
.org-context-layout { display:grid; grid-template-columns: 180px 1fr; gap:16px; align-items:center; }
.org-context-image-wrap { display:flex; align-items:center; justify-content:center; min-height:120px; }
.org-context-image { width: 168px; max-width:100%; height:auto; max-height:110px; object-fit:contain; border-radius:12px; border:1px solid var(--line); background: var(--panel); }
.org-context-fallback { width:168px; max-width:100%; min-height:110px; border:1px dashed var(--line); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; }
.org-context-copy { min-width:0; }
.selector-org-choice { display:grid; grid-template-columns: 96px 1fr; gap:14px; align-items:center; min-height:118px; }
.selector-org-copy { min-width:0; }
.selector-org-image-wrap { width:96px; height:96px; border-radius:12px; overflow:hidden; border:1px solid var(--line); background: var(--chip); display:flex; align-items:center; justify-content:center; padding:6px; flex-shrink:0; }
.selector-org-image { width:100%; height:100%; object-fit:contain; display:block; border-radius:8px; }
.selector-org-fallback { color:var(--muted); font-size:12px; padding:6px; text-align:center; line-height:1.25; }
@media (max-width: 860px) { .org-context-layout { grid-template-columns: 1fr; } .org-context-image-wrap { justify-content:flex-start; } .selector-org-choice { grid-template-columns: 72px 1fr; gap:12px; min-height:unset; } .selector-org-image-wrap { width:72px; height:72px; } }