.demo-intro{padding-top:64px;padding-bottom:40px}.demo-intro h1{font-size:clamp(2.4rem,5vw,3.6rem)}
.demo-intro .lead{max-width:720px}.demo-shell{border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.demo-bar{padding:17px 26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;background:var(--navy);color:white;font-size:.85rem}
.demo-bar strong{font-weight:500;color:#d9e3ff}.demo-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#8ce0c0;margin-right:8px}
.demo-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:20px;gap:8px;background:var(--background);border-bottom:1px solid var(--border)}
.demo-nav a{padding:12px 14px;color:var(--muted);font-size:.94rem;font-weight:650;text-decoration:none;border-radius:10px;border:1px solid transparent}
.demo-nav a span{display:block;font-size:.78rem;letter-spacing:.08em}.demo-nav a[aria-current]{background:white;color:var(--blue);border-color:var(--border)}
.demo-content{padding:34px}.demo-panel{padding:0}.demo-panel[hidden],.demo-controls[hidden]{display:none}.demo-panel+.demo-panel:not([hidden]){margin-top:30px}
.demo-kicker{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:750;color:var(--blue)}
.demo-heading h2{font-size:clamp(1.7rem,3vw,2.2rem);margin:8px 0 12px}.demo-heading p{max-width:760px;color:var(--muted);margin:0 0 26px}
.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.demo-card{padding:25px;border:1px solid var(--border);border-radius:14px;background:white}
.demo-monogram{display:inline-grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-weight:800;width:44px;height:44px;border-radius:12px;margin-bottom:16px}
.demo-card p{color:var(--muted)}.demo-status{color:#166534!important;font-weight:650}.demo-warning{color:#8b5700;font-weight:650}.demo-muted{color:var(--muted)}
.demo-key{border-block:1px solid var(--border);padding:13px 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.9rem}.demo-key code{color:var(--muted)}
.demo-note{padding:17px 20px;background:var(--background);border-left:3px solid #c7d5f8;color:var(--muted);font-size:.9rem;margin:24px 0 0}
.demo-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:24px}.demo-totals div{padding:18px;background:var(--background);border-radius:12px}.demo-totals span{display:block;color:var(--muted);font-size:.86rem}.demo-totals strong{font-size:1.6rem;color:var(--navy)}
.demo-table-wrap{overflow-x:auto}.demo-table-wrap table{width:100%;border-collapse:collapse;text-align:left;font-size:.94rem}.demo-table-wrap th{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:600}.demo-table-wrap td,.demo-table-wrap th{padding:16px 12px;border-bottom:1px solid var(--border);vertical-align:top}.demo-table-wrap small{display:block;color:var(--muted);margin-top:4px}.demo-table-wrap caption{text-align:left;font-size:.84rem;color:var(--muted);padding-bottom:8px}
.demo-controls{display:flex;gap:15px;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding:20px 34px}.demo-controls button:disabled{opacity:.5;cursor:default}.demo-controls span{font-size:.85rem;color:var(--muted)}
.demo-outro{max-width:850px}.demo-outro p{color:var(--muted)}
@media(max-width:680px){.demo-intro{padding-top:38px}.demo-shell{width:calc(100% - 24px)}.demo-nav{grid-template-columns:1fr 1fr;padding:12px}.demo-content{padding:20px}.demo-grid{grid-template-columns:1fr}.demo-bar{padding:15px 20px}.demo-totals{grid-template-columns:1fr}.demo-totals div{display:flex;align-items:center;justify-content:space-between;gap:12px}.demo-totals strong{font-size:1.25rem}.demo-controls{padding:18px;flex-wrap:wrap}.demo-controls span{order:3;width:100%;text-align:center}.demo-controls .button{padding:10px 15px;font-size:.88rem}.demo-table-wrap table{min-width:510px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}