.component-section{margin-bottom:78px;scroll-margin-top:110px}.component-heading{margin-bottom:20px}.component-heading h2{font-size:16px}.component-note{margin-bottom:24px}.component-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:42px}.component-grid.three{grid-template-columns:repeat(3,1fr);gap:20px}.component-grid article>small{display:block;margin-bottom:8px;color:#4a5565}.demo-row,.single-demo{min-height:210px;border:2px solid #e5e7eb;border-radius:20px;background:#fff;display:flex;align-items:center;justify-content:center;gap:22px;padding:24px}.demo-row>div{display:flex;flex-direction:column;align-items:center;gap:14px}.demo-row b{font-size:12px;color:#4a5565}.demo-row em{color:#6a7282;font-size:11px}.demo-row button,.single-demo button{font-weight:700}.round-demo{width:46px;height:46px;border:1px solid #e5e7eb;border-radius:50%;background:#fff}.round-demo.accent{background:var(--accent);color:#fff;border:0}.primary-demo,.secondary-demo,.disabled-demo{width:116px;height:48px;border-radius:12px}.primary-demo{background:var(--accent);color:#fff;border:0}.secondary-demo{background:#fff;border:2px solid #e5e7eb}.disabled-demo{background:#f5f5f5;color:#99a1af;border:1px solid #e5e7eb}.single-demo input{height:48px;border:1px solid #e5e7eb;padding:0 14px}.single-demo .qr-box{width:110px;height:110px}.option-stack{flex-direction:column}.option-stack button{width:210px;padding:14px;border:2px solid #e5e7eb;background:#fff;border-radius:12px}.option-stack button.selected,.option-buttons button.selected{border-color:var(--accent);color:var(--accent);background:var(--soft-pink)}.option-buttons button{width:105px;height:70px;border:2px solid #e5e7eb;border-radius:12px;background:#fff}.step-dots b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff}.step-dots i{width:45px;height:2px;background:#e5e7eb}.loading-lines{flex-direction:column;width:100%}.loading-lines i{width:100%;height:9px;border-radius:99px;background:#e5e7eb;overflow:hidden}.loading-lines span{display:block;height:100%;background:var(--accent)}.animated-ring span{position:relative}.mini-modal{width:210px;padding:20px;border:2px solid #e5e7eb;box-shadow:0 8px 16px rgba(0,0,0,.07)}.mini-modal>i{display:block;height:8px;background:#e5e7eb;margin-bottom:10px}.mini-modal>i:first-child{width:60%}.mini-modal>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mini-modal button{height:32px;border:1px solid #e5e7eb}.mini-modal button:last-child{background:var(--accent)}.image-placeholder{width:128px;height:128px;background:linear-gradient(45deg,transparent 49.5%,#cbd5e1 50%,transparent 50.5%),linear-gradient(-45deg,transparent 49.5%,#cbd5e1 50%,transparent 50.5%),#f5f5f5;display:grid;place-items:center;color:#94a3b8;font-size:10px}
@media(max-width:900px){.component-section{scroll-margin-top:142px}.component-grid,.component-grid.three{grid-template-columns:minmax(0,1fr);gap:24px}.component-grid article{min-width:0}.demo-row,.single-demo{max-width:100%}}@media(max-width:600px){.demo-row{gap:12px;padding:18px;overflow-x:auto}.demo-row>div{min-width:92px}.single-demo{min-height:180px}.component-section{margin-bottom:56px}}
.check-demo,.radio-stack{flex-direction:column;align-items:stretch}.styled-check,.styled-radio{display:flex;align-items:center;gap:10px;min-width:168px;padding:12px 14px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;cursor:pointer;transition:border-color .2s,background-color .2s}.styled-check:hover,.styled-radio:hover{border-color:#ff8daa;background:#fff8fa}.styled-check input,.styled-radio input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.styled-check span{position:relative;flex:none;width:18px;height:18px;border:2px solid #d1d5db;border-radius:4px;background:#fff}.styled-check input:checked+span{border-color:var(--accent);background:var(--accent)}.styled-check input:checked+span::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.styled-radio span{position:relative;flex:none;width:18px;height:18px;border:2px solid #d1d5db;border-radius:50%;background:#fff}.styled-radio input:checked+span{border-color:var(--accent)}.styled-radio input:checked+span::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}.styled-check b,.styled-radio b{font-size:13px;color:#4a5565}.styled-check:has(input:checked),.styled-radio:has(input:checked){border-color:#ff8daa;background:var(--soft-pink)}
.loading-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.animated-loading{min-height:230px;flex-direction:column;gap:16px}.loading-track{width:min(640px,88%);height:14px;border-radius:999px;background:#e5e7eb;overflow:hidden}.loading-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff4f7b,#ff0040);transition:width .08s linear}.animated-loading>b{color:#ff0040;font-size:16px}.animated-loading>em{color:#6a7282;font-size:12px}.loading-ring{--progress:0deg;width:132px;height:132px;padding:11px;border-radius:50%;background:conic-gradient(#ff0040 0 var(--progress),#e5e7eb var(--progress) 360deg);transition:background .08s linear}.loading-ring>div{width:100%;height:100%;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #f3f4f6}.loading-ring b{color:#ff0040;font-size:20px}.loading-grid article{min-width:0}@media(max-width:900px){.loading-grid{grid-template-columns:minmax(0,1fr)}}