:root {
      --bg: #11140f;
      --panel: #1d2419;
      --panel2: #263021;
      --text: #f2f5e9;
      --muted: #b9c3aa;
      --accent: #d9ff8f;
      --danger: #ff9a8f;
      --good: #9fffb7;
      --warn: #ffe38f;
      --border: #3a4731;
      --body-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --display-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --log-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      --heading: var(--text);
      --button-border: #516241;
      --button-top: #35442a;
      --button-bottom: #24301e;
      --pill-bg: #151c12;
      --pill-border: #405135;
      --chaos-glow: rgba(217, 255, 143, 0.00);
      --chaos-outline: rgba(217, 255, 143, 0.00);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: var(--body-font);
      background: radial-gradient(circle at top, #1e2b18, var(--bg) 55%);
      color: var(--text);
      padding: 16px;
    }

    .app {
      max-width: 920px;
      margin: 0 auto;
    }

    h1 {
      margin: 0 0 4px;
      font-size: clamp(1.7rem, 5vw, 3rem);
      letter-spacing: 0.02em;
    }

    .subtitle {
      color: var(--muted);
      margin-bottom: 16px;
    }

    .topbar {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }

    .stat, .panel, .card {
      background: rgba(29, 36, 25, 0.92);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    }

    .stat {
      padding: 10px;
    }

    .label {
      color: var(--muted);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .value {
      font-size: 1.25rem;
      font-weight: 800;
      margin-top: 2px;
    }

    .grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 12px;
    }

    @media (max-width: 760px) {
      .grid { grid-template-columns: 1fr; }
    }

    .panel {
      padding: 14px;
      margin-bottom: 12px;
    }

    .panel h2 {
      margin: 0 0 10px;
      font-size: 1.05rem;
    }

    .buttons {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
      gap: 8px;
    }

    .menu-grid {
      margin-top: 10px;
    }

    .landing-hero {
      border: 1px solid #39472f;
      background: linear-gradient(180deg, rgba(50, 68, 39, 0.52), rgba(16, 21, 13, 0.65));
    }

    .landing-note {
      margin: 0 0 10px 0;
      color: var(--muted);
      line-height: 1.45;
    }

    .mode-ready-card {
      margin-bottom: 10px;
      border-color: rgba(217, 255, 143, 0.34);
      background:
        radial-gradient(circle at 85% 15%, rgba(217, 255, 143, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(32, 49, 27, 0.95), rgba(14, 23, 12, 0.96));
    }

    .mode-ready-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 8px;
    }

    .mode-ready-grid button {
      text-align: left;
      min-height: 74px;
    }

    .mode-ready-grid button[data-mode-active="true"] {
      border-color: var(--accent);
      box-shadow: inset 0 0 0 1px rgba(217, 255, 143, 0.13);
    }

    .mode-status-line {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 650;
      line-height: 1.3;
    }

    @media (max-width: 520px) {
      .mode-ready-grid { grid-template-columns: 1fr; }
    }

    body.myco-main-suspended > .app,
    body.myco-main-suspended > .vibe-layer {
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
    }

    body.myco-main-suspended > .app *,
    body.myco-main-suspended > .vibe-layer * {
      animation-play-state: paused !important;
    }

    .backline {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 10px;
    }

    .mini-list {
      display: grid;
      gap: 6px;
      color: var(--muted);
      line-height: 1.4;
    }

    .mono {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    button {
      border: 1px solid var(--button-border);
      background: linear-gradient(var(--button-top), var(--button-bottom));
      color: var(--text);
      border-radius: 12px;
      padding: 11px 12px;
      font-weight: 750;
      cursor: pointer;
      min-height: 46px;
    }

    button:hover:not(:disabled) {
      border-color: var(--accent);
      transform: translateY(-1px);
    }

    button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .danger {
      border-color: #7f3a35;
      background: linear-gradient(#4a2925, #2b1715);
    }

    .endday {
      border-color: #7f7b35;
      background: linear-gradient(#514b21, #302d16);
    }

    .cards {
      display: grid;
      gap: 8px;
    }

    .card {
      padding: 12px;
      background: rgba(38, 48, 33, 0.92);
    }

    .card-title {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
      font-weight: 850;
    }

    .tiny {
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.35;
    }

    .bar {
      height: 9px;
      background: #11170e;
      border: 1px solid #36462b;
      border-radius: 99px;
      overflow: hidden;
      margin: 8px 0;
    }

    .fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #8de36f, #d9ff8f);
    }

    .log {
      height: 260px;
      overflow: auto;
      background: rgba(10, 13, 9, 0.55);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.86rem;
      line-height: 1.45;
    }

    .log p {
      margin: 0 0 8px;
    }

    .good { color: var(--good); }
    .warn { color: var(--warn); }
    .bad { color: var(--danger); }

    .footer {
      color: var(--muted);
      font-size: 0.85rem;
      margin-top: 10px;
    }

    .hidden {
      display: none !important;
    }

    .character-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }

    .character-card button {
      width: 100%;
      margin-top: 10px;
    }

    .character-portrait {
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      object-position: center top;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.14);
      margin-bottom: 12px;
      background: rgba(255,255,255,0.04);
      display: block;
    }

    .character-badge {
      display: inline-block;
      margin-top: 8px;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 0.78rem;
      color: var(--muted);
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
    }

    .portrait-card {
      display: flex;
      gap: 14px;
      align-items: center;
      flex-wrap: wrap;
    }

    .portrait-card .summary-portrait,
    .portrait-card .outcome-portrait {
      width: 112px;
      height: 140px;
      object-fit: cover;
      object-position: center top;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.14);
      flex: 0 0 auto;
      background: rgba(255,255,255,0.04);
    }

    .portrait-card .summary-text,
    .portrait-card .outcome-text {
      flex: 1 1 220px;
      min-width: 0;
    }

    .portrait-card .summary-text .tiny,
    .portrait-card .outcome-text .tiny {
      margin-top: 6px;
    }

    .outcome-art-slot {
      width: 112px;
      min-height: 140px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.14);
      flex: 0 0 auto;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 12px 10px;
      box-sizing: border-box;
      text-align: center;
    }

    .outcome-art-icon {
      font-size: 1.75rem;
      line-height: 1;
    }

    .outcome-art-kicker {
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .outcome-art-name {
      font-size: 0.92rem;
      font-weight: 800;
      line-height: 1.12;
    }

    .run-title-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.04);
      font-size: 0.82rem;
      color: var(--muted);
    }

    .portrait-card.outcome-hero-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .portrait-card.outcome-hero-card .outcome-portrait,
    .portrait-card.outcome-hero-card .outcome-art-slot {
      width: min(100%, 280px);
      height: auto;
      min-height: 0;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      object-position: center center;
      margin: 0 auto;
      box-shadow: 0 12px 32px rgba(0,0,0,0.28);
    }

    .portrait-card.outcome-hero-card .outcome-art-slot {
      padding: 18px 16px;
    }

    .portrait-card.outcome-hero-card .outcome-text {
      width: 100%;
      max-width: 780px;
    }

    .portrait-card.outcome-hero-card .run-title-chip {
      display: inline-flex;
      margin-top: 10px;
    }

    @media (max-width: 700px) {
      .portrait-card.outcome-hero-card {
        align-items: center;
      }

      .portrait-card.outcome-hero-card .outcome-portrait,
      .portrait-card.outcome-hero-card .outcome-art-slot {
        width: min(100%, 320px);
      }
    }

    .anomaly-contam-card {
      border-color: rgba(211, 255, 107, 0.72);
      box-shadow: 0 0 0 1px rgba(211, 255, 107, 0.16), 0 12px 28px rgba(78, 14, 93, 0.28);
      background:
        radial-gradient(circle at 85% 15%, rgba(219, 255, 108, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(64, 28, 66, 0.94), rgba(29, 36, 25, 0.96));
    }

    .anomaly-contam-card .card-title .anomaly-badge {
      color: #eaff9b;
      text-shadow: 0 0 12px rgba(217, 255, 143, 0.7);
    }

    .anomaly-taste-btn {
      border-color: #d9ff8f;
      background: linear-gradient(180deg, #5d3264, #24152c);
      box-shadow: inset 0 0 0 1px rgba(217, 255, 143, 0.12), 0 0 16px rgba(217, 255, 143, 0.08);
    }

    .anomaly-taste-btn:hover:not(:disabled) {
      box-shadow: inset 0 0 0 1px rgba(217, 255, 143, 0.28), 0 0 22px rgba(217, 255, 143, 0.18);
    }

    body.anomaly-palette-active {
      --bg: #0d0711;
      --panel: #24132b;
      --panel2: #35183c;
      --text: #f8f1d2;
      --muted: #c8b3d3;
      --accent: #d8ff64;
      --good: #9dffc9;
      --warn: #ffd96b;
      --danger: #ff8da9;
      --border: #734d78;
      --heading: #f6dfac;
      --button-border: #93699a;
      --button-top: #4c2855;
      --button-bottom: #25132c;
      --pill-bg: #32183a;
      --pill-border: #806087;
      background:
        radial-gradient(circle at 16% 8%, rgba(216, 255, 100, 0.13), transparent 27%),
        radial-gradient(circle at 84% 16%, rgba(209, 88, 255, 0.16), transparent 31%),
        radial-gradient(circle at top, #30183b, #0d0711 62%);
    }

    body.anomaly-palette-active .panel,
    body.anomaly-palette-active .card,
    body.anomaly-palette-active .stat,
    body.anomaly-palette-active .action-drawer,
    body.anomaly-palette-active .log {
      box-shadow: 0 0 0 1px rgba(216, 255, 100, 0.06), 0 10px 26px rgba(0,0,0,0.28);
    }

    .anomaly-glyph {
      font-family: Wingdings, Webdings, "Segoe UI Symbol", sans-serif;
      color: var(--accent);
      letter-spacing: 0.08em;
      text-shadow: 0 0 8px rgba(217, 255, 143, 0.55);
      white-space: nowrap;
    }

    .anomaly-whisper {
      display: block;
      margin-top: 4px;
      color: var(--accent);
      font-size: 0.68rem;
      font-style: italic;
      font-weight: 650;
      opacity: 0.82;
      letter-spacing: 0.02em;
    }

    .anomaly-archive-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 8px;
      margin-top: 8px;
    }

    .anomaly-count-card {
      text-align: center;
      min-height: 108px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .anomaly-count-value {
      font-size: 2rem;
      font-weight: 900;
      line-height: 1;
      margin: 7px 0 4px;
      color: var(--accent);
    }

    .tester-number-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: stretch;
      margin-top: 8px;
    }

    .tester-number-input {
      width: 100%;
      min-height: 46px;
      border-radius: 12px;
      border: 1px solid var(--button-border);
      background: rgba(8, 12, 7, 0.68);
      color: var(--text);
      padding: 10px 12px;
      font: 800 1rem var(--body-font);
    }

    .tester-number-input:focus {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
    }

    @media (max-width: 520px) {
      .tester-number-row {
        grid-template-columns: 1fr;
      }
    }

    .log p.observer {
      color: #d9b4ff;
      border-left: 2px solid rgba(217, 180, 255, 0.42);
      padding-left: 9px;
      text-shadow: 0 0 10px rgba(188, 117, 255, 0.18);
    }

    body.anomaly-colonized .log p.observer {
      color: var(--accent);
      border-left-color: var(--accent);
      text-shadow: 0 0 12px rgba(217, 255, 143, 0.42);
    }

    .anomaly-growth-host {
      position: relative;
      overflow: visible !important;
      isolation: isolate;
    }

    .anomaly-growth-cluster {
      position: absolute;
      z-index: 5;
      pointer-events: none;
      user-select: none;
      line-height: 1;
      white-space: nowrap;
      filter: drop-shadow(0 3px 4px rgba(0,0,0,0.52));
      transform-origin: bottom center;
      animation: anomalyMushroomSway 4.8s ease-in-out infinite alternate;
    }

    .anomaly-growth-cluster.growth-pos-0 { top: -11px; right: 15px; }
    .anomaly-growth-cluster.growth-pos-1 { bottom: -10px; left: 18px; animation-delay: -1.4s; }
    .anomaly-growth-cluster.growth-pos-2 { top: 28%; left: -13px; animation-delay: -2.8s; }
    .anomaly-growth-cluster.growth-pos-3 { bottom: 22%; right: -13px; animation-delay: -3.6s; }

    .anomaly-growth-cluster.growth-small { font-size: 0.82rem; opacity: 0.72; }
    .anomaly-growth-cluster.growth-medium { font-size: 1.05rem; opacity: 0.84; }
    .anomaly-growth-cluster.growth-large { font-size: 1.32rem; opacity: 0.96; }

    body.anomaly-bloom-active .anomaly-growth-cluster,
    body.anomaly-colonized .anomaly-growth-cluster {
      filter: drop-shadow(0 0 7px rgba(217,255,143,0.44)) drop-shadow(0 4px 5px rgba(0,0,0,0.58));
    }

    .anomaly-breathing {
      transform-origin: center center;
      animation: anomalyPanelBreathe var(--anomaly-breath-duration, 6.8s) ease-in-out infinite;
      animation-delay: var(--anomaly-breath-delay, 0s);
      will-change: transform, box-shadow;
    }

    body.anomaly-colonized .anomaly-breathing {
      animation-name: anomalyPanelBreatheColonized;
    }

    .anomaly-shadowed {
      animation: anomalyShadowDrift var(--anomaly-shadow-duration, 5.6s) ease-in-out infinite alternate;
      animation-delay: var(--anomaly-shadow-delay, 0s);
      will-change: filter;
    }

    body.anomaly-bloom-active .anomaly-shadowed,
    body.anomaly-colonized .anomaly-shadowed {
      animation-name: anomalyShadowDriftBloom;
    }

    .anomaly-breathing.anomaly-shadowed {
      animation-name: anomalyPanelBreathe, anomalyShadowDrift;
      animation-duration: var(--anomaly-breath-duration, 6.8s), var(--anomaly-shadow-duration, 5.6s);
      animation-timing-function: ease-in-out, ease-in-out;
      animation-iteration-count: infinite, infinite;
      animation-direction: normal, alternate;
      animation-delay: var(--anomaly-breath-delay, 0s), var(--anomaly-shadow-delay, 0s);
    }

    body.anomaly-bloom-active .anomaly-breathing.anomaly-shadowed {
      animation-name: anomalyPanelBreathe, anomalyShadowDriftBloom;
    }

    body.anomaly-colonized .anomaly-breathing.anomaly-shadowed {
      animation-name: anomalyPanelBreatheColonized, anomalyShadowDriftBloom;
    }

    body.anomaly-colonized #gameTitle {
      text-shadow: 0 0 16px rgba(217,255,143,0.30), 8px -4px 0 rgba(163,82,190,0.14);
    }

    @keyframes anomalyMushroomSway {
      from { transform: rotate(-4deg) translateY(1px) scale(0.98); }
      to { transform: rotate(5deg) translateY(-2px) scale(1.04); }
    }

    @keyframes anomalyPanelBreathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.0035); }
    }

    @keyframes anomalyPanelBreatheColonized {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.007); }
    }

    @keyframes anomalyShadowDrift {
      0% {
        filter: drop-shadow(9px -5px 0 rgba(178, 96, 209, 0.17))
                drop-shadow(-4px 7px 0 rgba(217, 255, 143, 0.08));
      }
      100% {
        filter: drop-shadow(-7px 6px 0 rgba(178, 96, 209, 0.15))
                drop-shadow(6px -3px 0 rgba(217, 255, 143, 0.10));
      }
    }

    @keyframes anomalyShadowDriftBloom {
      0% {
        filter: drop-shadow(13px -8px 0 rgba(178, 96, 209, 0.25))
                drop-shadow(-8px 11px 0 rgba(217, 255, 143, 0.14));
      }
      100% {
        filter: drop-shadow(-12px 9px 0 rgba(178, 96, 209, 0.23))
                drop-shadow(10px -7px 0 rgba(217, 255, 143, 0.16));
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .anomaly-growth-cluster,
      .anomaly-breathing,
      .anomaly-shadowed {
        animation: none !important;
      }
    }

    .vibe-layer {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      overflow: hidden;
      opacity: 0.42;
      font-size: 2rem;
      line-height: 1;
      white-space: pre-wrap;
    }

    .vibe-layer span {
      position: absolute;
      animation: drift 8s ease-in-out infinite alternate;
    }

    @keyframes drift {
      from { transform: translateY(0) rotate(-3deg); opacity: 0.25; }
      to { transform: translateY(-18px) rotate(4deg); opacity: 0.85; }
    }

    body.event-social-party {
      background:
        radial-gradient(circle at 15% 10%, rgba(255, 230, 120, 0.22), transparent 28%),
        radial-gradient(circle at top, #263c1d, var(--bg) 58%);
    }

    body.event-chaos-weird {
      background:
        radial-gradient(circle at 20% 15%, rgba(130, 255, 180, 0.18), transparent 26%),
        radial-gradient(circle at 80% 20%, rgba(180, 90, 255, 0.16), transparent 30%),
        radial-gradient(circle at top, #241433, #071b17 62%);
    }

    body.event-eureka-storm {
      background:
        radial-gradient(circle at 50% 0%, rgba(120, 210, 255, 0.25), transparent 32%),
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.12), transparent 22%),
        radial-gradient(circle at top, #13253a, var(--bg) 60%);
    }

    #eventPanel {
      border-color: rgba(255, 227, 143, 0.55);
      box-shadow: 0 8px 24px rgba(255, 227, 143, 0.08), 0 8px 20px rgba(0,0,0,0.18);
    }

    #eventPanel h2::before {
      content: "📋 ";
      color: var(--warn);
    }

    .situation-list {
      display: grid;
      gap: 7px;
    }

    .situation-alert {
      border: 1px solid #2f3e28;
      background: rgba(8, 12, 7, 0.42);
      border-radius: 12px;
      padding: 8px 10px;
    }

    .situation-alert .situation-title {
      font-weight: 900;
      font-size: 0.88rem;
      letter-spacing: 0.02em;
      margin-bottom: 2px;
    }

    .situation-alert.good {
      border-color: rgba(116, 211, 136, 0.42);
      background: rgba(22, 77, 41, 0.16);
    }

    .situation-alert.warn {
      border-color: rgba(255, 227, 143, 0.50);
      background: rgba(110, 77, 18, 0.18);
    }

    .situation-alert.bad {
      border-color: rgba(255, 122, 122, 0.50);
      background: rgba(91, 23, 23, 0.20);
    }

    .pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 99px;
      background: var(--pill-bg);
      border: 1px solid var(--pill-border);
      color: var(--muted);
      font-size: 0.78rem;
      margin-left: 6px;
    }

    .action-drawer {
      margin-top: 8px;
      border: 1px solid #314128;
      border-radius: 14px;
      background: rgba(7, 16, 8, 0.48);
      padding: 8px 10px;
    }

    .action-drawer summary {
      cursor: pointer;
      font-weight: 900;
      color: var(--text);
      letter-spacing: 0.01em;
      list-style-position: inside;
    }

    .action-drawer .drawer-note {
      display: block;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 600;
      margin-top: 2px;
    }

    .action-drawer .buttons {
      margin-top: 8px;
    }
  

    h1, h2, .card-title, button, .value {
      font-family: var(--display-font);
    }

    h1, h2, .card-title, .value {
      color: var(--heading);
    }

    .log {
      font-family: var(--log-font);
    }

    body.chaos-ui-active .app {
      outline: 2px solid var(--chaos-outline);
      outline-offset: 6px;
      border-radius: 22px;
    }

    body.chaos-ui-active .stat,
    body.chaos-ui-active .panel,
    body.chaos-ui-active .card,
    body.chaos-ui-active .action-drawer,
    body.chaos-ui-active .log {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px var(--chaos-outline), 0 10px 24px var(--chaos-glow), 0 8px 20px rgba(0,0,0,0.24);
    }

    body.chaos-ui-active button {
      border-color: var(--button-border);
      background: linear-gradient(var(--button-top), var(--button-bottom));
    }

    body.chaos-ui-active .danger {
      border-color: var(--danger);
      background: linear-gradient(rgba(130, 35, 35, 0.72), rgba(52, 18, 18, 0.90));
    }

    body.chaos-ui-active .endday {
      border-color: var(--warn);
      background: linear-gradient(rgba(116, 93, 28, 0.76), rgba(46, 34, 12, 0.90));
    }

    body.chaos-ui-active .pill {
      border-color: var(--accent);
      background: var(--pill-bg);
      color: var(--heading);
    }

    body.chaos-ui-active .fill {
      background: linear-gradient(90deg, var(--good), var(--accent));
    }

    body.chaos-ui-active .bar {
      border-color: var(--accent);
    }


    .run-panel > h2,
    .run-panel > .card-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      user-select: none;
    }

    .run-panel > h2 > span:first-child,
    .run-panel > .card-title > span:first-child {
      min-width: 0;
    }

    .panel-toggle-btn {
      padding: 6px 10px;
      width: auto;
      min-width: 86px;
      font-size: 0.72rem;
      line-height: 1;
      border-radius: 999px;
      opacity: 0.9;
      white-space: nowrap;
    }

    .run-panel.panel-collapsed > :not(h2):not(.card-title) {
      display: none !important;
    }

    .run-panel.panel-collapsed > h2,
    .run-panel.panel-collapsed > .card-title {
      display: flex !important;
    }

    .run-panel.panel-collapsed {
      padding-bottom: 14px;
    }

    .run-panel.panel-collapsed h2,
    .run-panel.panel-collapsed .card-title {
      margin-bottom: 0;
    }

    .receipt-accordion {
      padding: 0;
      overflow: hidden;
    }

    .receipt-accordion summary {
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      padding: 12px;
      cursor: pointer;
      font-weight: 850;
    }

    .receipt-accordion summary::-webkit-details-marker {
      display: none;
    }

    .receipt-accordion summary::before {
      content: "▶";
      color: var(--accent);
      margin-right: 6px;
      flex: 0 0 auto;
    }

    .receipt-accordion[open] summary::before {
      content: "▼";
    }

    .receipt-accordion summary span:first-child {
      flex: 1;
    }

    .receipt-accordion summary span:last-child {
      color: var(--accent);
      text-align: right;
      flex: 0 0 auto;
      max-width: 45%;
    }

    .receipt-accordion > :not(summary) {
      margin: 0 12px 12px;
    }

    .receipt-accordion .buttons {
      margin-top: 8px;
    }