*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--brand);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{max-width:100%}
.icon{width:20px;height:20px;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon--sm{width:16px;height:16px}
.icon--lg{width:24px;height:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:8px;z-index:200;transform:translateY(-160%);background:var(--ink);color:var(--panel);padding:10px 16px;border-radius:10px;transition:transform .15s}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid rgba(59,91,253,.42);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:11px 18px;border:1px solid transparent;border-radius:var(--radius-btn);background:var(--panel);color:var(--ink);font-size:14px;font-weight:700;line-height:1.2;text-align:center;transition:background-color .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s}
.btn:hover{box-shadow:0 6px 18px rgba(20,23,28,.08)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--brand);border-color:var(--brand);color:var(--panel)}
.btn--primary:hover{filter:brightness(.94)}
.btn--ghost{background:var(--panel);border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--muted2)}
.btn--quiet{background:transparent;border-color:transparent;color:var(--brand);padding-inline:8px}
.btn--danger{background:var(--panel);border-color:var(--line);color:var(--bad)}
.btn--danger:hover{border-color:var(--bad)}
.btn--block{width:100%}
.btn--lg{min-height:48px;padding:14px 22px;font-size:15px}
.btn--sm{min-height:34px;padding:7px 12px;font-size:13px;border-radius:10px}
.btn[aria-disabled="true"],.btn.is-disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn[aria-disabled="true"]:active,.btn.is-disabled:active{transform:none}
.badge{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--brand{background:var(--brand-soft);color:var(--brand)}
.badge--ok{background:var(--ok-soft);color:var(--ok)}
.badge--warn{background:var(--warn-soft);color:var(--warn)}
.badge--bad{background:var(--bad-soft);color:var(--bad)}
.badge--muted{background:var(--bg);color:var(--muted)}
.badge--plain::before{display:none}
.field{display:flex;flex-direction:column;gap:6px}
.field > label,.field > .label{font-size:13px;font-weight:700;color:var(--ink2)}
.field .hint{font-size:12px;color:var(--muted)}
.input,.select,.textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:11px 13px;font-size:14px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.input:hover,.select:hover,.textarea:hover{border-color:var(--muted2)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(59,91,253,.14)}
.textarea{min-height:92px;resize:vertical;line-height:1.65}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--bad)}
.err{font-size:12px;color:var(--bad);min-height:0}
.alert{display:flex;align-items:flex-start;gap:8px;border:1px solid var(--line);border-radius:10px;background:var(--bad-soft);color:var(--bad);padding:10px 12px;font-size:13px;line-height:1.55}
.alert:empty{display:none}
.alert--warn{background:var(--warn-soft);color:var(--warn)}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:44px 24px}
.empty__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--brand-soft);color:var(--brand);margin-bottom:4px}
.empty h3{font-size:16px;font-weight:800;color:var(--ink)}
.empty p{max-width:34ch;font-size:13px;color:var(--muted)}
.empty .btn{margin-top:8px}
.toast{position:fixed;left:50%;bottom:28px;z-index:300;transform:translate(-50%,12px);max-width:calc(100% - 32px);padding:11px 16px;border-radius:10px;background:var(--ink);color:var(--panel);font-size:13px;line-height:1.5;box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;transition:transform .2s,opacity .2s}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast--ok{background:var(--ok)}
.toast--bad{background:var(--bad)}
.demo-foot{padding:20px 20px 28px;text-align:center;font-size:12px;color:var(--muted2)}
.end-tag{margin:0 auto 10px;max-width:480px;padding:0 4px;font-size:12px;color:var(--muted);letter-spacing:.02em}
.end-tag strong{color:var(--ink2);font-weight:700}
@media (max-width:639px){.end-tag{display:none}}
.fade-in{animation:fade-up .32s cubic-bezier(.22,.8,.3,1) both}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(59,91,253,.32)}70%{box-shadow:0 0 0 9px rgba(59,91,253,0)}100%{box-shadow:0 0 0 0 rgba(59,91,253,0)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}