/* Demo app */
.demo{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-lg);overflow:hidden}
.demo-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;background:var(--ink-2);color:#fff}
.demo-top .lbl{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;color:var(--cyan);text-transform:uppercase;margin-right:8px}
.demo-domains{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dpill{padding:9px 15px;border-radius:999px;border:1px solid rgba(160,210,185,.25);background:rgba(255,255,255,.04);color:#C6DDD0;font:600 .86rem var(--f-body);cursor:pointer;transition:.2s}
.dpill:hover{border-color:#fff;color:#fff}
.dpill[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 20px -8px rgba(22,154,94,.8)}
.dn-auto{padding:9px 15px;border-radius:999px;border:1px solid rgba(70,214,156,.4);background:rgba(70,214,156,.08);color:var(--cyan);font:600 .84rem var(--f-body);cursor:pointer}
.stepper{list-style:none;margin:0;padding:16px 22px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;border-bottom:1px solid var(--line);background:#FAFBF8}
.stepper button{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid transparent;background:none;cursor:pointer;font:600 .88rem var(--f-body);color:var(--muted);text-align:left;transition:.2s}
.stepper b{width:28px;height:28px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.stepper button:hover{background:#fff;border-color:var(--line)}
.stepper .done b{background:var(--blue-soft);color:var(--blue);border-color:#C2E0CF}
.stepper .done{color:var(--text)}
.stepper .cur{background:#fff;border-color:#B9DCC8;color:var(--text);box-shadow:var(--shadow)}
.stepper .cur b{background:var(--grad);color:#fff;border-color:transparent}
.demo-body{display:grid;grid-template-columns:1fr 360px;min-height:560px}
#stage{padding:26px;min-width:0}
#stage.fade{animation:fadeUp .4s ease}
#explain{padding:26px;border-left:1px solid var(--line);background:#FAFBF8;font-size:.92rem;min-width:0}
#explain h4{font-size:1.08rem;margin:0 0 10px}
#explain p{color:var(--muted)}
.ex-k{display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:18px 0 10px}
.ex-k:first-child{margin-top:0}
.ex-list{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:8px}
.ex-list li{padding-left:22px;position:relative;font-size:.88rem}
.ex-list li::before{content:"✓";position:absolute;left:0;color:var(--mint);font-weight:700}
.ex-list.warn li::before{content:"!";color:#fff;background:var(--rose);width:15px;height:15px;border-radius:50%;font-size:.65rem;display:grid;place-items:center;top:3px}
.stage-h{margin-bottom:20px}
.stage-h h3{font-size:1.35rem;margin-bottom:6px}
.stage-h p{color:var(--muted);margin:0;font-size:.95rem}
.mut{color:var(--muted)}
.src-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.src{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.src-h{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--bg);border-bottom:1px solid var(--line);font-size:.85rem}
.src-h .mono{font-size:.72rem;color:var(--muted)}
.tbl-wrap{overflow-x:auto}
.demo table{width:100%;border-collapse:collapse;font-size:.8rem}
.demo th{font-family:var(--f-mono);font-weight:500;font-size:.7rem;color:var(--muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:#fff}
.demo td{padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.src td{font-family:var(--f-mono);font-size:.74rem}
.map-t tr{animation:fadeUp .4s both}
.map-t td{font-size:.78rem}
.map-t td:first-child{white-space:normal;word-break:break-word;min-width:160px}
.map-t .arr{color:var(--blue);font-weight:700}
.map-t .cls{color:var(--blue)}
.map-t .note{font-style:normal;font-size:.66rem;background:var(--blue-soft);color:var(--blue);padding:2px 6px;border-radius:5px;margin-left:4px}
.sb{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:7px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff);border:1px solid color-mix(in srgb,var(--c) 35%,#fff);white-space:nowrap}
.sb::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.sbar{display:flex;height:12px;border-radius:6px;overflow:hidden;margin-bottom:10px}
.slegend{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.8rem;margin-top:10px}
.code.mini{margin-top:16px;border-radius:14px;box-shadow:none}
.code.mini pre{font-size:.72rem;padding:14px;white-space:pre-wrap;word-break:break-word}
.kg-wrap{border:1px solid var(--line);border-radius:18px;background:radial-gradient(circle at 50% 50%,#F1F8F3,#fff);padding:8px}
.kg{width:100%;height:auto}
.kg-e{stroke:#C2DCCD;stroke-width:1.6}
.kg-e.on{stroke:var(--blue);stroke-width:2.6;stroke-dasharray:6 6;animation:dash 1s linear infinite}
.kg-el{font:500 10px var(--f-mono);fill:#4F665A;text-anchor:middle;paint-order:stroke;stroke:#F6FAF7;stroke-width:5px;stroke-linejoin:round;pointer-events:none}
.kg-n{cursor:pointer;animation:fadeUp .5s both;transition:opacity .3s}
.kg-n.dim{opacity:.28}
.kg-n:hover circle:nth-child(2),.kg-n.sel circle:nth-child(2){stroke-width:4}
.kg-n.sel circle:first-child{opacity:.3}
.kg-n:focus{outline:none}
.kg-n:focus-visible circle:nth-child(2){stroke:var(--cyan)}
.kg-l{font:600 10.5px var(--f-display);fill:var(--text);text-anchor:middle}
.kg-s{font:500 8px var(--f-mono);fill:var(--muted);text-anchor:middle}
.dd-allow{fill:#22C58B;stroke:#fff;stroke-width:2}.dd-mask{fill:#F5B524;stroke:#fff;stroke-width:2}.dd-deny{fill:#F43F5E;stroke:#fff;stroke-width:2}
.facts{display:grid;gap:8px}
.facts div{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:12px;align-items:center}
.facts .mono{font-size:.72rem;color:var(--muted);grid-column:1}
.facts b{grid-column:1;font-size:.88rem;font-weight:600;word-break:break-word}
.facts .sb{grid-column:2;grid-row:1/3}
.personas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.persona{text-align:left;border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px;cursor:pointer;font-family:var(--f-body);display:grid;gap:6px;transition:.2s;color:var(--text)}
.persona b{font-size:.95rem}
.persona .mono{font-size:.7rem;color:var(--blue);line-height:1.5}
.persona small{color:var(--muted);font-size:.78rem;line-height:1.4}
.persona[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,154,94,.12)}
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.matrix .hl{background:#F1F8F3}
.matrix th.hl{color:var(--blue)}
.demo .tag{font-family:var(--f-mono)}
.demo .t-allow{color:#0E8F5E;background:#E7F8F1;border-color:#B7EBD5}
.demo .t-mask{color:#A06C00;background:#FFF6DE;border-color:#F8DE9A}
.demo .t-deny{color:#C21E3B;background:#FFE9ED;border-color:#F9BDC8}
.demo .t-info{color:var(--blue);background:var(--blue-soft);border-color:#C2E0CF}
.ask-top{display:flex;gap:12px;margin-bottom:12px}
.ask-top label{display:flex;align-items:center;gap:10px;font-size:.75rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.ask-top select{font:600 .9rem var(--f-body);padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text);text-transform:none;letter-spacing:0}
.qs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.q{padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;font:500 .86rem var(--f-body);cursor:pointer;color:var(--text);text-align:left;transition:.2s}
.q:hover{border-color:var(--blue)}
.q[aria-pressed="true"]{background:var(--ink-2);color:#fff;border-color:var(--ink-2)}
.ask-grid{display:grid;grid-template-columns:1fr;gap:14px}
.kg-wrap.small{padding:4px}
.trace{background:#072116;border-radius:18px;overflow:hidden;color:#C6DDD0;font-family:var(--f-mono);font-size:.74rem}
.trace-h{padding:10px 14px;border-bottom:1px solid var(--line-dark);color:#92AE9F;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.trace-b{padding:10px 14px}
.tl{display:flex;gap:10px;padding:5px 0;opacity:0;transform:translateY(4px);transition:.3s;align-items:flex-start;line-height:1.6}
.tl.show{opacity:1;transform:none}
.tl .k{color:#6F8E7E;min-width:62px;flex-shrink:0}
.tl b{color:#8FDDB8;font-weight:500}
.trace .tag{font-size:.62rem}
.trace .t-allow{background:rgba(34,197,139,.15);color:#4BE3A9;border-color:rgba(34,197,139,.35)}
.trace .t-mask{background:rgba(245,181,36,.14);color:#FFCB52;border-color:rgba(245,181,36,.35)}
.trace .t-deny{background:rgba(244,63,94,.14);color:#FF6D86;border-color:rgba(244,63,94,.35)}
.trace .t-info{background:rgba(22,154,94,.16);color:#8FDDB8;border-color:rgba(22,154,94,.35)}
.trace .sb{background:transparent;font-size:.62rem}
.trace .mut{color:#FFCB52}
.ans-tabs{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:12px}
.ans-tabs button{border:0;background:none;padding:8px 12px;border-radius:9px;font:600 .82rem var(--f-body);cursor:pointer;color:var(--muted)}
.ans-tabs button[aria-pressed="true"]{background:#fff;color:var(--text);box-shadow:var(--shadow)}
.answer{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;font-size:.92rem;line-height:1.75}
.answer.naive{border-color:#F9BDC8;background:#FFF8F9}
.answer b{font-weight:600}
.answer mark{padding:1px 6px;border-radius:6px;font-weight:600;font-size:.86rem}
mark.mk{background:#FFF1C9;color:#8A5B00}
mark.wh{background:#FFE1E7;color:#C21E3B;font-family:var(--f-mono);font-size:.74rem}
mark.leak{background:#F43F5E;color:#fff}
.verdict{margin-top:12px;padding:12px 14px;border-radius:12px;font-size:.86rem}
.verdict.ok{background:#E7F8F1;color:#0B6E48}
.verdict.bad{background:#FFE9ED;color:#A3162F}
.demo-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-top:1px solid var(--line);background:#FAFBF8}
.dn-count{font-family:var(--f-mono);font-size:.78rem;color:var(--muted)}
.demo-nav .btn:disabled{opacity:.4;cursor:not-allowed}
.demo-note{font-size:.82rem;color:var(--muted);text-align:center;margin-top:18px}
@media (max-width:1100px){.demo-body{grid-template-columns:1fr}#explain{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:760px){.stepper{grid-template-columns:repeat(5,auto);overflow-x:auto}.stepper span{display:none}.stepper .cur span{display:inline}.src-grid,.personas{grid-template-columns:1fr}#stage,#explain{padding:18px}.dn-count{display:none}}
@media (max-width:760px){.demo-nav .btn{white-space:normal;text-align:center;line-height:1.3}}

/* QA fixes */
.ask-top label{flex-wrap:wrap;max-width:100%}
.ask-top select{max-width:100%;min-width:0}
.ask-top{min-width:0}