.demo-modal[hidden]{display:none}.demo-modal{position:fixed;inset:0;background:#000b;z-index:100;display:grid;place-items:center;padding:20px;backdrop-filter:blur(5px)}.modal-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 30px 100px #000;position:relative;text-align:center}.modal-close{position:absolute;right:14px;top:14px;width:36px;height:36px;border:0;border-radius:50%;background:var(--surface2);color:white;font-size:24px}.modal-icon{width:52px;height:52px;border-radius:50%;background:#2c2141;color:#c9adff;display:grid;place-items:center;margin:0 auto 16px;font-size:22px;font-weight:800}.modal-card h2{margin:0 0 10px}.modal-card p{color:var(--muted);line-height:1.6}.modal-actions{display:flex;gap:10px;margin-top:24px}.modal-actions .button{flex:1}.state-switcher{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 22px}.state-switcher a{padding:7px 11px;border:1px solid var(--line);border-radius:20px;color:var(--muted);font-size:11px}.state-switcher a:hover{color:white;border-color:#674898}.empty-state{padding:55px 24px;text-align:center;background:var(--surface);border:1px dashed #3b4250;border-radius:16px}.empty-state>span{width:58px;height:58px;border-radius:50%;background:#211a31;color:#b99df2;display:grid;place-items:center;margin:auto;font-size:24px}.empty-state h2{margin:17px 0 8px}.empty-state p{color:var(--muted);max-width:480px;margin:0 auto 20px}.error-state{border-color:#71333b;background:#211216}.error-state>span{background:#3a1820;color:#ff8995}@media(max-width:760px){.modal-card{padding:26px 18px}.modal-actions{flex-direction:column-reverse}.state-switcher{overflow-x:auto;flex-wrap:nowrap}.state-switcher a{white-space:nowrap}}