/* Demo „Asystent firmowy” — korzysta z tokenów base.css. */
.demo{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;margin-top:40px}
.demo-main,.demo-src{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:24px;min-width:0}
.demo-form{display:flex;gap:10px}
.demo-form input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--paper);background:var(--bg);border:1px solid #62635b;border-radius:10px;padding:12px 14px}
.demo-form input:focus-visible,.demo :is(button,summary):focus-visible{outline:2px solid #ff9977;outline-offset:3px}
.demo-form button{font:inherit;font-weight:600;cursor:pointer;border:0;border-radius:10px;padding:0 20px;background:var(--accent);color:#1b1b19;min-height:48px}
.demo-form button:disabled{opacity:.5;cursor:wait}
.demo-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 8px}
.demo-chips button{font:inherit;font-size:13px;cursor:pointer;color:var(--paper);background:transparent;border:1px solid var(--line);border-radius:20px;padding:8px 14px;text-align:left}
.demo-chips button:hover{border-color:var(--accent)}
.demo-chips button span{font-family:var(--mono);font-size:11px;color:var(--mute);margin-right:6px}
.demo-log{display:grid;gap:16px;margin-top:16px}
.demo-turn{border-top:1px solid var(--line);padding-top:16px}
.demo-q{font-weight:600;margin-bottom:10px}
.demo-q::before{content:"› ";color:var(--accent)}
.demo-a{color:#dcdbd4;font-size:15px}
.demo-a h3{font-family:var(--disp);font-size:19px;font-weight:600;line-height:1.3;margin:2px 0 14px;color:var(--paper)}
.demo-kind{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.demo-wait{color:var(--mute)}
.demo-error{color:#ffb199}
.demo-cites{list-style:none;display:grid;gap:8px;margin-top:12px}
.demo-cites li,.demo-docs li{font-size:13px;color:var(--mute);border-left:2px solid var(--accent);padding:2px 0 2px 12px}
.demo-cites b,.demo-docs b{display:block;color:var(--paper);font-weight:600}
.demo-chart{width:100%;height:auto;display:block}
.demo-chart rect{fill:var(--accent)}
.demo-chart text{fill:var(--mute);font-size:11px;font-family:var(--mono);text-anchor:middle}
.demo-bars{display:grid;gap:8px}
.demo-bar{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:12px;font-size:14px}
.demo-bar i{display:block;height:14px;width:var(--w);background:var(--accent);border-radius:2px}
.demo-bar b{font-family:var(--mono);font-size:13px;font-weight:400;white-space:nowrap}
.demo-a table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px}
.demo-a td{padding:4px 0;border-bottom:1px solid var(--line-2)}
.demo-a td:last-child{text-align:right;font-family:var(--mono)}
.demo-total{margin-top:12px}
.demo-a details{margin-top:14px;font-size:13px;color:var(--mute)}
.demo-a summary{cursor:pointer;color:var(--paper)}
.demo-a pre{font-family:var(--mono);font-size:12px;background:var(--bg);border-radius:8px;padding:12px;margin-top:8px;overflow-x:auto}
.demo-src h3{font-family:var(--disp);font-size:18px;font-weight:600;margin-bottom:6px}
.demo-src p{font-size:13px;color:var(--mute);margin-bottom:14px}
.demo-docs{list-style:none;display:grid;gap:10px;max-height:420px;overflow-y:auto;padding-right:6px}
.demo-note{font-size:12px;color:var(--mute);margin-top:14px}
@media (max-width:900px){.demo{grid-template-columns:1fr}.demo-src{order:2}}
@media (max-width:520px){.demo-main,.demo-src{padding:16px}.demo-form{flex-direction:column}.demo-bar{grid-template-columns:90px 1fr;}.demo-bar b{grid-column:2}}
/* Wpis blogowy */
.post{max-width:70ch;font-size:17px;line-height:1.75;color:#dcdbd4}
.post h2{font-family:var(--disp);font-size:clamp(24px,3vw,32px);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--paper);margin:48px 0 16px}
.post h2:first-child{margin-top:0}
.post p,.post ul,.post ol{margin-bottom:18px}
.post ul,.post ol{padding-left:22px;display:grid;gap:8px}
.post strong{color:var(--paper)}
.post a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* Obsługa klienta */
.demo-src h3:not(:first-child){margin-top:22px}
.demo-orders,.demo-tickets{list-style:none;display:grid;gap:6px;font-size:13px;color:var(--mute);margin-bottom:6px}
.demo-orders b,.demo-tickets b{font-family:var(--mono);font-weight:400;color:var(--paper);margin-right:6px}
.demo-orders span{display:block;font-family:var(--mono);font-size:11px;color:var(--accent)}
.demo-calls{display:grid;gap:4px;margin-top:14px;padding:10px 12px;background:var(--bg);border-radius:8px}
.demo-calls span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.demo-calls code{font-family:var(--mono);font-size:12px;color:#9fe0c0;overflow-wrap:anywhere}
.demo-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:4px 0 14px;font-size:12px;color:var(--mute)}
.demo-steps li{border-top:3px solid var(--line);padding-top:6px}
.demo-steps li.done{border-color:var(--accent);color:var(--paper)}
.demo-events{list-style:none;display:grid;gap:4px;margin-top:10px;font-size:13px}
.demo-events span{font-family:var(--mono);font-size:12px;color:var(--mute);margin-right:10px}
.demo-picks{display:grid;gap:6px;margin-top:10px}
.demo-picks button,.demo-confirm button{font:inherit;font-size:14px;cursor:pointer;text-align:left;color:var(--paper);background:transparent;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.demo-picks button:hover{border-color:var(--accent)}
.demo-picks b{font-family:var(--mono);font-weight:400;margin-right:8px;color:var(--accent)}
.demo-confirm{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px;border:1px dashed var(--accent);border-radius:10px}
.demo-confirm p{font-size:13px;color:var(--mute)}
.demo-confirm button{background:var(--accent);color:#1b1b19;border:0;font-weight:600;min-height:44px}
.demo-followup{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.post code{font-family:var(--mono);font-size:14px;background:var(--bg2);padding:1px 6px;border-radius:4px}