.playground-page {
  background:
    radial-gradient(circle at 15% 8%, rgba(34,211,238,.08), transparent 26%),
    radial-gradient(circle at 85% 8%, rgba(217,70,239,.09), transparent 28%),
    #07070b;
}
.playground-main { padding: 145px 0 0; }
.playground-intro { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:64px; align-items:end; padding-bottom:52px; }
.playground-intro h1 { max-width:950px; margin:24px 0 18px; font-size:clamp(58px,7.2vw,108px); line-height:.91; letter-spacing:-.045em; }
.playground-intro h1 span { display:block; }
.playground-intro p { max-width:760px; margin:0; color:#a5a5b3; font-size:18px; line-height:1.7; }
.playground-intro-meta { display:grid; gap:1px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--line); }
.playground-intro-meta div { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 18px; background:rgba(11,11,18,.96); }
.playground-intro-meta span { color:var(--muted-2); font:9px var(--font-mono); letter-spacing:.12em; }
.playground-intro-meta strong { color:#d8d8e1; font:11px var(--font-mono); }

.playground-workbench { padding-bottom:105px; }
.workbench-toolbar { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border:1px solid var(--line); border-bottom:0; border-radius:22px 22px 0 0; background:linear-gradient(180deg,rgba(255,255,255,.036),rgba(255,255,255,.012)); }
.workbench-title { display:flex; align-items:center; gap:12px; }
.workbench-title > div { display:flex; flex-direction:column; gap:3px; }
.workbench-title strong { font:11px var(--font-mono); letter-spacing:.12em; }
.workbench-title small { color:var(--muted-2); font-size:10px; }
.toolbar-light { width:8px; height:8px; border-radius:50%; background:var(--fuchsia); box-shadow:0 0 18px rgba(217,70,239,.8); }
.workbench-status { display:flex; align-items:center; gap:8px; color:#aaaab7; font:9px var(--font-mono); letter-spacing:.1em; }
.workbench-status i { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 14px rgba(0,229,139,.7); }

.lab-grid { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr) minmax(0,1fr); border:1px solid var(--line); border-radius:0 0 28px 28px; overflow:hidden; background:#0a0a11; box-shadow:0 35px 120px rgba(0,0,0,.42); }
.lab-panel { min-width:0; min-height:760px; padding:22px; background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 18%); }
.lab-panel + .lab-panel { border-left:1px solid var(--line); }
.panel-header { min-height:62px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.panel-header > div { display:flex; align-items:flex-start; gap:11px; }
.panel-index { display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(139,92,246,.25); border-radius:8px; color:#d7c5ff; background:rgba(139,92,246,.08); font:9px var(--font-mono); }
.panel-header h2 { margin:0; font-size:16px; letter-spacing:-.02em; }
.panel-header p { margin:4px 0 0; color:var(--muted-2); font-size:10px; line-height:1.45; }
.panel-badge { padding:6px 8px; border:1px solid var(--line); border-radius:7px; color:var(--muted-2); font:8px var(--font-mono); letter-spacing:.1em; }

.scenario-list { display:grid; gap:8px; margin:18px 0; }
.scenario-chip { position:relative; width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.018); color:#b8b8c4; text-align:left; cursor:pointer; transition:border-color .2s ease,background .2s ease,transform .2s ease; }
.scenario-chip:hover,.scenario-chip.active { transform:translateX(2px); border-color:rgba(217,70,239,.3); background:rgba(139,92,246,.07); }
.scenario-chip span { font-size:11px; }
.scenario-chip small { color:var(--muted-2); font:8px var(--font-mono); }
.scenario-dot { width:7px; height:7px; border-radius:50%; }
.scenario-dot.allow { background:var(--green); box-shadow:0 0 12px rgba(0,229,139,.55); }
.scenario-dot.approval { background:var(--fuchsia); box-shadow:0 0 12px rgba(217,70,239,.55); }
.scenario-dot.deny { background:var(--red); box-shadow:0 0 12px rgba(255,59,92,.55); }

.terminal-window { border:1px solid var(--line); border-radius:17px; overflow:hidden; background:#07070c; }
.terminal-titlebar { height:40px; display:flex; align-items:center; gap:7px; padding:0 12px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.025); }
.terminal-titlebar > span { width:7px; height:7px; border-radius:50%; background:#343440; }
.terminal-titlebar > span:nth-child(1) { background:#ff5f57; }
.terminal-titlebar > span:nth-child(2) { background:#febc2e; }
.terminal-titlebar > span:nth-child(3) { background:#28c840; }
.terminal-titlebar small { margin-left:auto; color:var(--muted-2); font:8px var(--font-mono); }
.terminal-body { padding:16px; }
.terminal-body > label { color:var(--cyan); font:8px var(--font-mono); letter-spacing:.12em; }
.command-line { display:grid; grid-template-columns:auto 1fr; gap:10px; margin-top:10px; padding:13px 14px; border:1px solid rgba(34,211,238,.15); border-radius:12px; background:rgba(34,211,238,.025); }
.command-line > span { color:var(--green); font:13px var(--font-mono); }
.command-line textarea { width:100%; resize:vertical; min-height:66px; padding:0; border:0; outline:0; background:transparent; color:#e4e4ec; font:12px/1.55 var(--font-mono); }
.terminal-context { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0; }
.terminal-context div { min-width:0; padding:9px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.012); }
.terminal-context span { display:block; color:var(--muted-2); font:7px var(--font-mono); letter-spacing:.08em; }
.terminal-context strong { display:block; overflow:hidden; margin-top:5px; color:#bfbfca; font:8px var(--font-mono); text-overflow:ellipsis; white-space:nowrap; }
.run-request { width:100%; min-height:46px; }
.simulation-note { display:flex; align-items:flex-start; gap:8px; margin:13px 0 0; color:#777786; font-size:9px; line-height:1.5; }
.simulation-note i { flex:0 0 auto; display:grid; place-items:center; width:16px; height:16px; border:1px solid var(--line); border-radius:50%; color:#aaaab8; font:10px var(--font-mono); }

.pipeline { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:5px; margin:18px 0; }
.pipeline b { color:#363642; font-size:10px; }
.pipeline-step { display:flex; flex-direction:column; align-items:center; gap:7px; color:#555563; font:7px var(--font-mono); text-transform:uppercase; letter-spacing:.05em; text-align:center; transition:color .25s ease; }
.pipeline-step i { width:9px; height:9px; border-radius:50%; border:1px solid #393946; background:#111119; transition:background .25s ease,box-shadow .25s ease,border-color .25s ease; }
.pipeline-step.active { color:#d4d4de; }
.pipeline-step.active i { border-color:var(--cyan); background:var(--cyan); box-shadow:0 0 16px rgba(34,211,238,.65); }
.pipeline-step.done i { border-color:var(--green); background:var(--green); box-shadow:0 0 16px rgba(0,229,139,.45); }

.decision-core { min-height:232px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; border:1px solid var(--line); border-radius:20px; text-align:center; background:radial-gradient(circle at 50% 35%,rgba(139,92,246,.1),transparent 48%),rgba(255,255,255,.012); transition:border-color .3s ease,box-shadow .3s ease,background .3s ease; }
.decision-symbol { display:grid; place-items:center; width:66px; height:66px; border:1px solid rgba(139,92,246,.25); border-radius:21px; color:#c9b7ff; background:rgba(139,92,246,.08); box-shadow:0 0 42px rgba(139,92,246,.12); font:30px var(--font-mono); }
.decision-kicker { margin-top:15px; color:var(--muted-2); font:8px var(--font-mono); letter-spacing:.13em; }
.decision-core h3 { margin:7px 0; font-size:24px; letter-spacing:-.035em; }
.decision-core p { max-width:310px; margin:0; color:#8f8f9d; font-size:11px; line-height:1.55; }
.decision-core.is-analyzing .decision-symbol { animation:decision-pulse .8s ease-in-out infinite alternate; }
.decision-core.is-allowed { border-color:rgba(0,229,139,.28); box-shadow:0 0 50px rgba(0,229,139,.08); background:radial-gradient(circle at 50% 35%,rgba(0,229,139,.1),transparent 48%),rgba(255,255,255,.012); }
.decision-core.is-allowed .decision-symbol { color:var(--green); border-color:rgba(0,229,139,.35); background:rgba(0,229,139,.08); }
.decision-core.is-blocked { border-color:rgba(255,59,92,.28); box-shadow:0 0 50px rgba(255,59,92,.08); background:radial-gradient(circle at 50% 35%,rgba(255,59,92,.1),transparent 48%),rgba(255,255,255,.012); }
.decision-core.is-blocked .decision-symbol { color:var(--red); border-color:rgba(255,59,92,.35); background:rgba(255,59,92,.08); }
.decision-core.is-approval { border-color:rgba(217,70,239,.3); box-shadow:0 0 55px rgba(217,70,239,.09); background:radial-gradient(circle at 50% 35%,rgba(217,70,239,.12),transparent 48%),rgba(255,255,255,.012); }
.decision-core.is-approval .decision-symbol { color:var(--fuchsia); border-color:rgba(217,70,239,.38); background:rgba(217,70,239,.09); }

.decision-facts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.decision-facts div { min-width:0; padding:10px 11px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.012); }
.decision-facts dt { color:var(--muted-2); font:7px var(--font-mono); letter-spacing:.08em; }
.decision-facts dd { overflow:hidden; margin:5px 0 0; color:#c4c4ce; font:9px var(--font-mono); text-overflow:ellipsis; white-space:nowrap; }

.approval-box { padding:14px; border:1px solid rgba(217,70,239,.25); border-radius:14px; background:rgba(139,92,246,.06); }
.approval-box > span { color:#efadfa; font:8px var(--font-mono); letter-spacing:.11em; }
.approval-box p { margin:7px 0 12px; color:#9b9baa; font-size:10px; line-height:1.45; }
.approval-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.approval-button { min-height:36px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.025); color:#c9c9d3; cursor:pointer; font-size:9px; transition:border-color .2s ease,background .2s ease; }
.approval-button:hover { border-color:rgba(217,70,239,.35); background:rgba(217,70,239,.08); }
.approval-button.create-rule { grid-column:1/-1; }
.allow-once:hover { border-color:rgba(0,229,139,.35); background:rgba(0,229,139,.07); }
.deny-now:hover { border-color:rgba(255,59,92,.35); background:rgba(255,59,92,.07); }

.trace-list { display:grid; gap:1px; margin-top:12px; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--line); }
.trace-row { display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:7px; padding:9px 10px; background:#0c0c13; }
.trace-row > span { color:#555564; font:8px var(--font-mono); }
.trace-row strong { color:#8e8e9c; font-size:9px; font-weight:500; }
.trace-row small { color:#4e4e5a; font:7px var(--font-mono); }
.trace-row.active strong { color:#e0e0e8; }
.trace-row.active small { color:var(--cyan); }
.trace-row.done small { color:var(--green); }

.audit-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:18px 0 12px; }
.chain-state { display:flex; align-items:center; gap:7px; color:#8e8e9a; font:7px var(--font-mono); letter-spacing:.07em; }
.chain-state i { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 12px rgba(0,229,139,.6); }
.audit-toolbar > div:last-child { display:flex; gap:6px; }
.icon-button { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.018); color:#8e8e9b; cursor:pointer; }
.icon-button:hover { color:#fff; border-color:rgba(217,70,239,.28); }
.audit-stream { height:520px; overflow:auto; padding-right:4px; scrollbar-color:#32323f transparent; scrollbar-width:thin; }
.audit-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px; text-align:center; }
.audit-empty > span { display:grid; place-items:center; width:56px; height:56px; border:1px solid var(--line); border-radius:18px; color:#5e5e6c; background:rgba(255,255,255,.015); font-size:24px; }
.audit-empty strong { margin-top:14px; color:#aaaab6; font-size:13px; }
.audit-empty p { max-width:250px; margin:7px 0 0; color:#666674; font-size:10px; line-height:1.55; }
.audit-entry { position:relative; margin-bottom:9px; padding:12px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.014); animation:audit-in .35s ease both; }
.audit-entry::before { content:""; position:absolute; left:-1px; top:12px; bottom:12px; width:2px; border-radius:2px; background:var(--entry-color,var(--purple)); }
.audit-entry-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.audit-entry-head span { color:var(--entry-color,var(--purple)); font:8px var(--font-mono); letter-spacing:.08em; }
.audit-entry-head time { color:#5d5d6b; font:7px var(--font-mono); }
.audit-command { overflow:hidden; margin:9px 0; color:#d2d2db; font:9px/1.5 var(--font-mono); text-overflow:ellipsis; white-space:nowrap; }
.audit-meta { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.audit-meta div { min-width:0; }
.audit-meta span { display:block; color:#555563; font:7px var(--font-mono); }
.audit-meta strong { display:block; overflow:hidden; margin-top:3px; color:#888896; font:7px var(--font-mono); text-overflow:ellipsis; white-space:nowrap; }
.audit-hash { margin-top:9px; padding-top:8px; border-top:1px solid var(--line); color:#555562; font:7px var(--font-mono); }
.audit-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:12px; }
.audit-summary div { padding:9px 6px; border:1px solid var(--line); border-radius:9px; text-align:center; background:rgba(255,255,255,.012); }
.audit-summary span { display:block; color:#555563; font:6px var(--font-mono); letter-spacing:.06em; }
.audit-summary strong { display:block; margin-top:5px; color:#c4c4ce; font:13px var(--font-mono); }

.playground-explainer { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:end; padding:90px 0 120px; border-top:1px solid var(--line); }
.playground-explainer h2 { max-width:650px; margin:15px 0 0; font-size:clamp(38px,5vw,66px); line-height:1; letter-spacing:-.035em; }
.playground-explainer p { margin:0; color:#9696a4; font-size:16px; line-height:1.75; }

@keyframes decision-pulse { from{transform:scale(.96);box-shadow:0 0 25px rgba(139,92,246,.08)} to{transform:scale(1.03);box-shadow:0 0 45px rgba(217,70,239,.18)} }
@keyframes audit-in { from{opacity:0;transform:translateY(-7px)} to{opacity:1;transform:none} }

@media (max-width: 1180px) {
  .lab-grid { grid-template-columns:1fr 1fr; }
  .audit-panel { grid-column:1/-1; min-height:auto; border-left:0 !important; border-top:1px solid var(--line); }
  .audit-stream { height:360px; }
}
@media (max-width: 900px) {
  .playground-intro { grid-template-columns:1fr; gap:32px; }
  .playground-intro-meta { max-width:520px; }
  .lab-grid { grid-template-columns:1fr; }
  .lab-panel { min-height:auto; }
  .lab-panel + .lab-panel { border-left:0; border-top:1px solid var(--line); }
  .audit-panel { grid-column:auto; }
  .playground-explainer { grid-template-columns:1fr; gap:24px; }
}
@media (max-width: 720px) {
  .playground-main { padding-top:105px; }
  .playground-intro { padding-bottom:34px; }
  .playground-intro h1 { font-size:clamp(48px,15vw,72px); }
  .playground-intro p { font-size:15px; }
  .workbench-toolbar { height:auto; min-height:64px; padding:13px 14px; }
  .workbench-status { display:none; }
  .lab-panel { padding:16px; }
  .scenario-chip { grid-template-columns:auto 1fr; }
  .scenario-chip small { display:none; }
  .terminal-context { grid-template-columns:1fr; }
  .pipeline { gap:3px; }
  .pipeline-step span { display:none; }
  .decision-facts { grid-template-columns:1fr; }
  .approval-actions { grid-template-columns:1fr; }
  .approval-button.create-rule { grid-column:auto; }
  .audit-summary { grid-template-columns:1fr 1fr; }
  .playground-explainer { padding:72px 0 90px; }
}