/* Demo Workbench — layout, input console, scenario bar */
.demo-input-console{display:flex;gap:.75rem;align-items:center;margin-bottom:1rem;padding:10px 14px;border-radius:16px;background:rgba(0,0,0,.3);border:1px solid rgba(200,117,51,.18)}
.demo-input-console input{flex:1;min-width:0;padding:10px 14px;border-radius:12px;background:rgba(2,6,23,.5);border:1px solid rgba(148,163,184,.18);color:#f8fafc;font-size:.88rem;outline:none;font-family:inherit;transition:border-color .25s,box-shadow .25s}
.demo-input-console input:focus{border-color:rgba(200,117,51,.5);box-shadow:0 0 0 3px rgba(200,117,51,.12)}
.demo-input-console button{padding:10px 20px;border-radius:12px;border:none;background:linear-gradient(135deg,#c87533,#b45309);color:#fff;font-weight:800;font-size:.82rem;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s;box-shadow:0 6px 18px rgba(200,117,51,.25)}
.demo-input-console button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(200,117,51,.35)}
.demo-credit-badge{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 10px;border-radius:999px;border:1px solid rgba(34,211,238,.22);background:rgba(34,211,238,.09);color:#a5f3fc;font-size:.74rem;font-weight:900;white-space:nowrap}
.demo-scenario-bar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 auto 1.5rem;max-width:920px}
.table-scroll-hint{text-align:center;margin-bottom:6px}
.table-scroll-hint span{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:600;color:rgba(148,163,184,.65);letter-spacing:.02em}
.demo-inline-notice{margin-top:.75rem;padding:.7rem .85rem;border:1px solid rgba(245,158,11,.24);border-radius:14px;background:rgba(245,158,11,.08);color:#f8d38d;font-size:.78rem;line-height:1.45}
@media(max-width:640px){
  .demo-input-console{flex-direction:column}
  .demo-input-console button{width:100%}
  .demo-credit-badge{width:100%}
}

/* Replay badge */
.demo-replay-badge{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:14px;border:1px solid rgba(52,211,153,.22);background:rgba(52,211,153,.08);color:#a7f3d0;font-size:.76rem;font-weight:700;margin-bottom:.65rem;animation:demoResultReveal .32s ease both}
.demo-replay-badge span{flex:1}
.demo-replay-refresh{padding:5px 12px;border-radius:999px;border:1px solid rgba(52,211,153,.28);background:rgba(52,211,153,.12);color:#6ee7b7;font-size:.72rem;font-weight:800;cursor:pointer;white-space:nowrap;transition:background .2s}
.demo-replay-refresh:hover{background:rgba(52,211,153,.22)}
.demo-export-replay{display:inline-flex;align-items:center;min-height:30px;margin-left:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(52,211,153,.24);background:rgba(52,211,153,.09);color:#86efac;font-size:.68rem;font-weight:850;letter-spacing:0;white-space:normal;animation:demoResultReveal .24s ease both}

/* Scenario cards — compact pill layout */
#demo .demo-scenario-groups{display:grid;gap:14px;margin:0 auto 1.4rem;max-width:1180px}
#demo .demo-scenario-group{position:relative;overflow:hidden;padding:14px 16px;border-radius:22px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(180deg,rgba(15,23,42,.72),rgba(2,6,23,.84));box-shadow:0 14px 40px rgba(2,6,23,.18)}
#demo .demo-scenario-group::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:1px;background:linear-gradient(90deg,rgba(34,211,238,.46),rgba(245,158,11,.14),transparent)}
#demo .demo-scenario-group--guided{padding:10px 16px;background:linear-gradient(180deg,rgba(15,23,42,.82),rgba(12,18,34,.94))}
#demo .demo-scenario-group__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;margin-bottom:10px}
#demo .demo-scenario-group__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#67e8f9}
#demo .demo-scenario-group__head h3{margin:0;font-size:.95rem;line-height:1.2;color:#f8fafc}
#demo .demo-scenario-group__head p{margin:.25rem 0 0;color:rgba(226,232,240,.72);font-size:.82rem;line-height:1.45;max-width:62ch}
#demo .demo-scenario-group__head small{display:inline-flex;align-items:center;justify-content:flex-end;font-size:.72rem;font-weight:700;color:rgba(148,163,184,.74)}
#demo .demo-scenario-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#demo .demo-scenario-grid--guided{display:flex;flex-wrap:wrap;gap:8px}
#demo .demo-scenario-card{position:relative;display:flex;flex-direction:row;align-items:center;gap:.55rem;min-height:0;padding:10px 14px;border-radius:16px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(180deg,rgba(12,18,33,.92),rgba(15,23,42,.86));text-align:left;box-shadow:0 10px 28px rgba(2,6,23,.14);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;cursor:pointer}
#demo .demo-scenario-card:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.32);box-shadow:0 16px 38px rgba(2,6,23,.22)}
#demo .demo-sample-pill--active.demo-scenario-card{border-color:rgba(245,158,11,.52)!important;background:linear-gradient(180deg,rgba(74,30,7,.42),rgba(15,23,42,.92))!important;color:#f8fafc!important;box-shadow:0 18px 44px rgba(245,158,11,.14)}
#demo .demo-scenario-card--guided{padding:8px 12px;flex:0 0 auto;background:linear-gradient(180deg,rgba(5,11,24,.96),rgba(12,18,33,.96))}
#demo .demo-scenario-badge{display:inline-flex;align-items:center;min-height:22px;padding:3px 8px;border-radius:999px;font-size:.64rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
#demo .demo-scenario-badge--verified{background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.26);color:#67e8f9}
#demo .demo-scenario-badge--guided{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.28);color:#fbbf24}
#demo .demo-scenario-sector{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;color:rgba(191,219,254,.86)}
#demo .demo-scenario-title{display:block;font-size:.86rem;line-height:1.28;color:#f8fafc}
#demo .demo-scenario-summary{display:none}
#demo .demo-scenario-proof{display:inline-flex;align-items:center;min-height:24px;padding:4px 8px;border-radius:999px;border:1px solid rgba(148,163,184,.14);background:rgba(255,255,255,.04);color:#f8fafc;font-size:.66rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
#demo .demo-scenario-group--verified .demo-scenario-proof{border-color:rgba(34,211,238,.2);background:rgba(34,211,238,.08);color:#a5f3fc}
#demo .demo-scenario-group--guided .demo-scenario-proof{border-color:rgba(245,158,11,.2);background:rgba(245,158,11,.08);color:#fde68a}
#demo .demo-scenario-lanes{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto;font-size:.72rem;color:rgba(191,219,254,.82)}
#demo .demo-scenario-lanes b{color:#f8fafc}
#demo .demo-history-state{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 9px;border-radius:999px;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.18);color:#a5f3fc;font-size:.72rem;font-weight:800}
#demo .demo-loading--panel{display:grid;gap:14px;padding:18px;border-radius:22px;border:1px solid rgba(34,211,238,.18);background:linear-gradient(180deg,rgba(10,14,26,.96),rgba(11,18,32,.92));box-shadow:0 20px 50px rgba(2,6,23,.22)}
#demo .demo-loading-head{display:flex;align-items:flex-start;gap:12px}
#demo .demo-loading-head strong{display:block;color:#f8fafc;font-size:.95rem}
#demo .demo-loading-head p{margin:4px 0 0;color:rgba(226,232,240,.68);font-size:.82rem}
#demo .demo-loading-stages{display:grid;gap:10px;margin:0;padding:0;list-style:none}
#demo .demo-loading-stage{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;border:1px solid rgba(148,163,184,.14);background:rgba(15,23,42,.72);color:rgba(226,232,240,.74);transition:border-color .2s ease,background .2s ease,color .2s ease}
#demo .demo-loading-stage span{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:999px;background:rgba(148,163,184,.12);font-size:.74rem;font-weight:900}
#demo .demo-loading-stage strong{font-size:.82rem;line-height:1.35}
#demo .demo-loading-stage.is-active{border-color:rgba(34,211,238,.34);background:rgba(34,211,238,.08);color:#ecfeff}
#demo .demo-loading-stage.is-done{border-color:rgba(52,211,153,.24);background:rgba(52,211,153,.08);color:#d1fae5}
#demo .demo-loading-stage.is-done span{background:rgba(52,211,153,.18)}
#demo .demo-clarify-body,#demo .demo-gap-body{display:grid;gap:14px}
#demo .demo-clarify-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#demo .demo-clarify-option{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 14px 13px;border-radius:18px;border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.74);color:#f8fafc;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
#demo .demo-clarify-option:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.34);box-shadow:0 14px 34px rgba(2,6,23,.2)}
#demo .demo-clarify-option span{font-size:.69rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#67e8f9}
#demo .demo-clarify-option strong{font-size:.88rem;line-height:1.35;text-align:left}
#demo .demo-clarify-option small{font-size:.72rem;color:rgba(191,219,254,.74)}
#demo .demo-clarify-custom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding:12px;border-radius:18px;border:1px solid rgba(34,211,238,.18);background:linear-gradient(135deg,rgba(8,47,73,.46),rgba(15,23,42,.72))}
#demo .demo-clarify-custom label{display:grid;gap:6px;min-width:0}
#demo .demo-clarify-custom span{font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#67e8f9}
#demo .demo-clarify-custom input{width:100%;min-width:0;border:1px solid rgba(148,163,184,.18);border-radius:14px;background:rgba(2,6,23,.62);color:#f8fafc;padding:11px 12px;font:inherit;outline:none}
#demo .demo-clarify-custom input:focus{border-color:rgba(34,211,238,.48);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
#demo .demo-clarify-custom button{border:0;border-radius:14px;background:linear-gradient(135deg,#22d3ee,#2563eb);color:#f8fafc;font-weight:950;padding:12px 14px;box-shadow:0 16px 34px rgba(37,99,235,.18);cursor:pointer;white-space:nowrap}
#demo .demo-gap-orb{position:absolute;right:22px;top:18px;width:68px;height:68px;border-radius:999px;background:radial-gradient(circle at 30% 30%,rgba(245,158,11,.42),rgba(245,158,11,0));filter:blur(3px);pointer-events:none}
#demo .demo-gap-query{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 14px;border-radius:18px;background:rgba(15,23,42,.72);border:1px solid rgba(148,163,184,.16)}
#demo .demo-gap-query span{font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#67e8f9}
#demo .demo-gap-query strong{font-size:.92rem;color:#f8fafc}
#demo .demo-gap-rail{display:flex;flex-wrap:wrap;gap:10px}
#demo .demo-gap-rail span{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.18);color:#f8d38d;font-size:.76rem;font-weight:800;line-height:1.4}
@keyframes demoResultReveal{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
#demo .demo-result--revealed{animation:demoResultReveal .42s cubic-bezier(.2,.8,.2,1) both}

[data-theme="light"] #demo .demo-scenario-group{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,250,252,.96));border-color:rgba(15,23,42,.1);box-shadow:0 18px 48px rgba(15,23,42,.08)}
[data-theme="light"] #demo .demo-scenario-group__head h3{color:#0f172a}
[data-theme="light"] #demo .demo-scenario-group__head p,
[data-theme="light"] #demo .demo-scenario-group__head small,
[data-theme="light"] #demo .demo-scenario-summary{color:rgba(15,23,42,.7)}
[data-theme="light"] #demo .demo-scenario-card{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.94));border-color:rgba(15,23,42,.12);box-shadow:0 16px 38px rgba(15,23,42,.08)}
[data-theme="light"] #demo .demo-scenario-title,
[data-theme="light"] #demo .demo-scenario-lanes b{color:#0f172a}
[data-theme="light"] #demo .demo-scenario-proof{background:rgba(255,255,255,.92);border-color:rgba(15,23,42,.1);color:#0f172a}
[data-theme="light"] #demo .demo-scenario-lanes{color:rgba(15,23,42,.72)}
[data-theme="light"] #demo .demo-loading--panel{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96));border-color:rgba(15,23,42,.1);box-shadow:0 18px 42px rgba(15,23,42,.08)}
[data-theme="light"] #demo .demo-loading-head strong,
[data-theme="light"] #demo .demo-gap-query strong{color:#0f172a}
[data-theme="light"] #demo .demo-loading-head p,
[data-theme="light"] #demo .demo-loading-stage,
[data-theme="light"] #demo .demo-clarify-option,
[data-theme="light"] #demo .demo-gap-query{color:rgba(15,23,42,.76);background:rgba(255,255,255,.92);border-color:rgba(15,23,42,.1)}
[data-theme="light"] #demo .demo-clarify-custom{background:rgba(255,255,255,.9);border-color:rgba(14,165,233,.18)}
[data-theme="light"] #demo .demo-clarify-custom input{background:rgba(248,250,252,.96);color:#0f172a;border-color:rgba(15,23,42,.1)}
[data-theme="light"] #demo .demo-history-state{background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.18);color:#0369a1}
[data-theme="light"] #demo .demo-gap-rail span{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.14);color:#b45309}
[data-theme="light"] .demo-replay-badge{background:rgba(52,211,153,.06);border-color:rgba(52,211,153,.16);color:#047857}
[data-theme="light"] .demo-replay-refresh{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.18);color:#059669}
[data-theme="light"] .demo-export-replay{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.18);color:#047857}

@media(max-width:1100px){
  #demo .demo-scenario-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  #demo .demo-scenario-group{padding:12px}
  #demo .demo-scenario-group__head{grid-template-columns:1fr}
  #demo .demo-scenario-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #demo .demo-scenario-grid--guided{flex-direction:column}
  #demo .demo-clarify-options{grid-template-columns:1fr}
  #demo .demo-clarify-custom{grid-template-columns:1fr}
  #demo .demo-scenario-card{min-height:0;padding:8px 12px}
}