.toast-viewport{position:fixed;top:92px;right:16px;z-index:120;display:flex;flex-direction:column;gap:8px;width:calc(100% - 2rem);max-width:420px;max-height:100vh}.toast-root{position:relative;pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;overflow:hidden;border-radius:8px;border:1px solid hsl(var(--border));background:hsl(var(--background));color:hsl(var(--foreground));padding:24px 32px 24px 24px;box-shadow:none;transition:transform .2s ease,opacity .2s ease}.toast-default{border-color:hsl(var(--border));background:hsl(var(--background));color:hsl(var(--foreground))}.toast-destructive{border-color:hsl(var(--destructive));background:hsl(var(--destructive));color:hsl(var(--destructive-foreground))}.toast-root[data-state=open]{animation:toast-slide-in .24s ease}.toast-root[data-state=closed]{animation:toast-fade-out .2s ease forwards}.toast-root[data-swipe=move]{transform:translate(var(--radix-toast-swipe-move-x))}.toast-root[data-swipe=cancel]{transform:translate(0)}.toast-root[data-swipe=end]{animation:toast-swipe-out .2s ease forwards}.toast-action{display:inline-flex;align-items:center;justify-content:center;min-height:32px;border-radius:6px;border:1px solid hsl(var(--border));background:transparent;padding:0 12px;font-size:13px;font-weight:600;color:inherit;cursor:pointer}.toast-action:hover{background:hsl(var(--bg-secondary))}.toast-action:disabled{opacity:.5;cursor:not-allowed}.toast-close{position:absolute;top:8px;right:8px;border:none;border-radius:6px;background:transparent;color:inherit;opacity:0;padding:4px;cursor:pointer;transition:opacity .2s ease}.toast-root:hover .toast-close,.toast-close:focus-visible{opacity:1}.toast-close-icon{width:16px;height:16px}.toast-title{font-size:14px;font-weight:600}.toast-description{font-size:14px;opacity:.9}.toast-root[data-state=closed] .toast-close{opacity:0}@keyframes toast-slide-in{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes toast-fade-out{0%{opacity:1}to{opacity:0}}@keyframes toast-swipe-out{0%{transform:translate(var(--radix-toast-swipe-move-x, 0));opacity:1}to{transform:translate(var(--radix-toast-swipe-end-x));opacity:0}}.category-filter{display:flex;flex-wrap:wrap;gap:8px}.filter-btn{border:1px solid #d7dee7;border-radius:8px;background:#fff;color:#475569;padding:8px 12px;display:flex;align-items:center;gap:6px;font-size:13px;line-height:1;min-height:36px;cursor:pointer}.filter-btn svg{width:14px;height:14px}.filter-btn:hover{background:#f8fafc;color:#0f172a}.filter-btn.active{border-color:#f97316;background:#f97316;color:#fff}.search-bar{position:relative;width:100%;max-width:768px;margin:0 auto}.search-bar-icon{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:hsl(var(--primary) / .7)}.search-bar-input{width:100%;border-radius:12px;border:1px solid hsl(var(--border));background:hsl(var(--card) / .85);color:hsl(var(--foreground));padding:14px 16px 14px 46px;box-sizing:border-box;transition:all .2s ease}.search-bar-input::placeholder{color:hsl(var(--muted-foreground))}.search-bar-input:focus{outline:none;border-color:hsl(var(--primary));box-shadow:none}.code-block-wrap{border:1px solid hsl(var(--border));border-radius:10px;overflow:hidden;background:hsl(var(--card))}.code-block-head{height:44px;border-bottom:1px solid hsl(var(--border));background:hsl(var(--bg-secondary));display:flex;align-items:center;justify-content:space-between;padding:0 12px}.code-language{font-size:12px;color:hsl(var(--foreground));font-weight:600}.code-block-head button{border:1px solid hsl(var(--border));background:hsl(var(--bg-secondary));color:hsl(var(--foreground));border-radius:6px;padding:5px 10px;font-size:12px;line-height:1;min-height:30px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.code-block-head button:hover{background:hsl(var(--bg-main))}.code-block-body{background:hsl(var(--card));overflow:auto;max-height:520px}.component-card{border:1px solid #d7dee7;border-radius:12px;overflow:hidden;background:#fff;box-shadow:none;height:100%;display:flex;flex-direction:column;width:100%}.component-card-img-wrap{height:160px;background:#eef2f7;display:flex;align-items:center;justify-content:center;overflow:hidden}.component-card-img-wrap img{width:100%;height:100%;object-fit:contain;padding:10px;box-sizing:border-box}.component-card-fallback{width:54px;height:54px;border-radius:10px;background:#e2e8f0;color:#0f172a;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px}.component-card-body{padding:14px;display:flex;flex-direction:column;flex:1}.component-card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.component-favorite-btn{border:1px solid #d7dee7;background:#fff;color:#0f172a;border-radius:10px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}.component-favorite-btn:hover{background:#f8fafc}.component-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}.component-tag{border:1px solid #d7dee7;background:#f8fafc;color:#334155;border-radius:999px;padding:4px 8px;font-size:12px;line-height:1}.component-card-body h3{margin:0;font-size:16px;color:#111827;line-height:1.35}.component-card-body p{margin:8px 0 12px;color:#64748b;font-size:13px;line-height:1.45}.component-link{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid #1f2937;background:#1f2937;color:#fff;padding:8px 12px;font-size:13px;line-height:1;min-height:36px;margin-top:auto}.component-link:hover{background:#111827}.component-card-actions{display:flex;align-items:center;gap:8px;margin-top:auto;flex-wrap:wrap}.component-delete-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid #dc2626;background:transparent;color:#dc2626;padding:8px 12px;font-size:13px;line-height:1;min-height:36px;cursor:pointer}.component-delete-btn:hover:not(:disabled){background:#dc2626;color:#fff}.component-delete-btn:disabled{opacity:.6;cursor:not-allowed}.app-header{position:fixed;left:0;top:0;width:100%;height:80px;border-bottom:1px solid #dbe2eb;background:#fff;z-index:100}.app-header-content{height:80px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px}.brand{font-size:clamp(20px,2.6vw,26px);font-weight:700;color:#1a1a1a;text-decoration:none;white-space:nowrap;flex-shrink:0}.brand span{color:#f97316}.desktop-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;justify-self:end}.theme-toggle,.btn-outline,.btn-dark{border-radius:6px;text-decoration:none;padding:8px 12px;font-size:13px;line-height:1;min-height:34px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.theme-toggle{border:1px solid #cbd5e1;color:#0f172a;background:#fff;cursor:pointer;width:40px;height:34px;padding:0}.theme-toggle:hover{background:#f8fafc}.theme-toggle-icon{width:18px;height:18px;display:block}.btn-outline{border:1px solid #cbd5e1;color:#0f172a;background:#fff}.btn-dark{border:1px solid #1f2937;color:#fff;background:#1f2937}.mobile-menu-btn{display:none;border:1px solid #cbd5e1;border-radius:6px;background:#fff;height:34px;padding:0 10px;margin-left:auto}.mobile-nav-wrap{border-top:1px solid #dbe2eb;background:#fff}.mobile-nav{display:flex;flex-direction:column;padding:12px 16px;gap:10px}.mobile-nav a{text-decoration:none;color:#334155;font-size:14px}.mobile-nav .theme-toggle{align-self:flex-start}@media(max-width:860px){.app-header-content{display:flex;justify-content:space-between}.desktop-actions{display:none}.mobile-menu-btn{display:block}}@media(max-width:480px){.app-header,.app-header-content{height:72px}}html[data-theme=dark] .app-header{background:hsl(var(--card));border-bottom-color:hsl(var(--border))}html[data-theme=dark] .brand{color:hsl(var(--foreground))}html[data-theme=dark] .mobile-nav-wrap{background:hsl(var(--card));border-top-color:hsl(var(--border))}html[data-theme=dark] .mobile-nav a{color:hsl(var(--foreground))}.app-footer{border-top:1px solid #dbe2eb;background:#f8fafc}.footer-shell{width:100%;max-width:1160px;margin:0 auto;padding:40px 20px 16px}.footer-main{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}.footer-left{max-width:460px;min-width:0}.footer-center,.footer-right{min-width:180px}.footer-section ul{margin:0;padding:0;list-style:none}.footer-section li{margin-bottom:8px}.footer-brand{text-decoration:none;font-size:24px;font-weight:700;color:#111827}.footer-brand span{color:#f97316}.footer-description{margin:8px 0;color:#475569;font-size:13px;word-break:break-word}.footer-contact p{margin:3px 0;font-size:12px;display:grid;grid-template-columns:max-content 1fr;align-items:center;gap:4px}.footer-contact-label{font-weight:600}.footer-contact-value{min-width:0}.footer-contact a{color:inherit;text-decoration:none}.footer-contact a:hover{text-decoration:underline}.footer-section h4{margin:0 0 12px;color:#111827;font-size:14px;font-weight:700}.footer-section a{text-decoration:none;display:block;color:#475569;font-size:13px;word-break:break-word}.footer-section a:hover{text-decoration:underline;color:#111827}.footer-section a:focus-visible,.footer-contact a:focus-visible,.footer-brand:focus-visible{outline:2px solid #f97316;outline-offset:2px;border-radius:4px}.footer-bottom{border-top:1px solid #dbe2eb;margin-top:20px;padding-top:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px}.footer-bottom p{margin:4px 0;color:#64748b;font-size:12px;word-break:break-word;text-align:center}@media(max-width:900px){.footer-main{gap:28px}}@media(max-width:560px){.footer-shell{padding:40px 12px 16px}.footer-main{flex-direction:column;gap:34px}.footer-bottom{justify-content:center}}html[data-theme=dark] .app-footer{background:hsl(var(--card));border-top-color:hsl(var(--border))}html[data-theme=dark] .footer-brand,html[data-theme=dark] .footer-section h4{color:hsl(var(--foreground))}html[data-theme=dark] .footer-description,html[data-theme=dark] .footer-contact p,html[data-theme=dark] .footer-section a,html[data-theme=dark] .footer-bottom p{color:hsl(var(--muted-foreground))}html[data-theme=dark] .footer-section a:hover{color:hsl(var(--foreground))}html[data-theme=dark] .footer-bottom{border-top-color:hsl(var(--border))}.layout-page{min-height:100vh;background:linear-gradient(to bottom,#f3f6fb,#fff);display:flex;flex-direction:column}.skip-link{position:absolute;left:12px;top:-100%;z-index:200;border:1px solid hsl(var(--border));border-radius:8px;background:hsl(var(--card));color:hsl(var(--foreground));padding:8px 12px;text-decoration:none}.skip-link:focus-visible{top:8px}.layout-main{flex:1;padding-top:80px}.layout-container{width:100%;max-width:1380px;margin:0 auto;padding:0 12px;box-sizing:border-box}@media(max-width:640px){.layout-container{padding:0 10px}}.index-page{min-height:calc(100vh - 80px);display:flex;flex-direction:column}.index-hero{padding:60px 0 30px}.hero-content{max-width:760px;margin:0 auto;text-align:center}.hero-content h1{margin:0;display:flex;flex-direction:column;gap:4px}.hero-content h1 span:first-child{font-size:clamp(30px,5.2vw,44px);font-weight:700;color:#0f172a}.hero-content h1 span:last-child{font-size:clamp(30px,5.2vw,44px);font-weight:700;color:#f97316}.hero-content p{margin:14px auto 20px;font-size:15px;color:#475569;max-width:640px}.category-route-note{margin:0 0 12px;display:inline-flex;border-radius:999px;border:1px solid #fed7aa;background:#fff7ed;color:#c2410c;font-size:12px;padding:6px 10px}.index-components{flex:1;padding:12px 0 40px}.category-block{margin-bottom:16px}.sync-warning{margin-bottom:16px;border:1px solid #fdba74;border-radius:10px;background:#fff7ed;color:#9a3412;font-size:13px;line-height:1.5;padding:10px 12px}.component-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;align-items:stretch}.loader-wrap{padding:40px 0;display:flex;justify-content:center}.loader{width:40px;height:40px;border:4px solid #dbe2eb;border-top-color:#f97316;border-radius:50%;animation:spin .8s linear infinite}.empty-state{border:1px solid #dbe2eb;border-radius:10px;background:#fff;text-align:center;color:#64748b;font-size:14px;padding:30px 16px}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:620px){.index-hero{padding:44px 0 24px}.component-grid{grid-template-columns:1fr}}html[data-theme=dark] .hero-content h1 span:first-child{color:hsl(var(--foreground))}html[data-theme=dark] .hero-content h1 span:last-child{color:hsl(var(--accent))}html[data-theme=dark] .sync-warning,html[data-theme=dark] .category-route-note{background:#f973161f;border-color:#f9731659;color:#fdba74}.playground-shell{width:100%;display:grid;gap:12px}.playground-preview{border:1px solid hsl(var(--border));border-radius:10px;background:linear-gradient(135deg,hsl(var(--bg-main)),hsl(var(--card)));padding:16px;min-height:220px;display:flex;align-items:center;justify-content:center}.playground-controls{border:1px solid hsl(var(--border));border-radius:10px;background:hsl(var(--card));padding:12px}.playground-controls h3{margin:0 0 4px;font-size:14px;line-height:1.3}.playground-controls p{margin:0 0 14px;color:hsl(var(--muted-foreground));font-size:12px;line-height:1.45}.playground-control-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;align-items:start}.playground-control{display:grid;gap:6px;font-size:12px;align-content:start}.playground-control span{color:hsl(var(--text-secondary))}.playground-control textarea,.playground-control select,.playground-control input[type=text],.playground-control input[type=number],.playground-control input[type=range]{width:100%;box-sizing:border-box;border-radius:8px;border:1px solid hsl(var(--border));padding:8px 10px;min-height:40px;background:hsl(var(--bg-main));color:hsl(var(--foreground))}.playground-control textarea{resize:none;min-height:40px;height:40px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}.playground-control textarea::-webkit-scrollbar{display:none;width:0;height:0}.playground-control input[type=checkbox]{width:18px;height:18px}.playground-control--checkbox{display:grid;gap:6px;align-content:start;min-height:auto}.playground-control--checkbox span{font-weight:600;line-height:1.2}.playground-checkbox-field{min-height:40px;border:1px solid hsl(var(--border));border-radius:8px;background:hsl(var(--bg-main));display:flex;align-items:center;padding:0 10px;box-sizing:border-box}.playground-control--checkbox input[type=checkbox]{flex-shrink:0;margin:0}.playground-control-input{display:flex;align-items:center;gap:8px}.playground-control-input strong{min-width:30px;font-size:12px}.demo-gradient-button{border:none;border-radius:10px;padding:12px 24px;font-weight:600;color:#fff;cursor:pointer}.demo-gradient-button:disabled{opacity:.6;cursor:not-allowed}.demo-gradient-button--teal{background:linear-gradient(90deg,#0d9488,#0891b2)}.demo-gradient-button--sunset{background:linear-gradient(90deg,#f97316,#ef4444)}.demo-gradient-button--slate{background:linear-gradient(90deg,#334155,#0f172a)}.demo-glass-card{width:min(360px,100%);border-radius:14px;border:1px solid rgba(255,255,255,.45);background:linear-gradient(135deg,#ffffffe0,#ffffffbd);padding:18px;box-shadow:none}.demo-glass-card--elevated{box-shadow:none}.demo-glass-card h3{margin:0;color:#0f172a}.demo-glass-card p{margin:8px 0 0;color:#334155;line-height:1.45}.demo-neon-input-wrap{width:min(420px,100%);display:grid;gap:8px}.demo-neon-input{width:100%;box-sizing:border-box;border-radius:10px;border:1px solid #334155;padding:12px 14px;background:#0f172a;color:#e2e8f0}.demo-neon-input--neutral .demo-neon-input,.demo-neon-input--success .demo-neon-input,.demo-neon-input--error .demo-neon-input{box-shadow:none}.demo-neon-input-wrap span{color:hsl(var(--muted-foreground));font-size:12px}.demo-nav{width:min(680px,100%);display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}.demo-nav button{border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));border-radius:999px;padding:8px 12px;font-size:12px}.demo-nav button.active{background:#f97316;border-color:#f97316;color:#fff}.demo-nav-cta{background:#0f172a!important;border-color:#0f172a!important;color:#fff!important}.demo-toast{width:min(420px,100%);border-radius:10px;border:1px solid transparent;padding:12px 14px;display:flex;gap:8px;align-items:center}.demo-toast p{margin:0;font-size:13px}.demo-toast-icon{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700}.demo-toast--success{background:#10b98126;border-color:#10b98180;color:#047857}.demo-toast--success .demo-toast-icon{background:#04785726}.demo-toast--error{background:#ef444424;border-color:#ef444473;color:#b91c1c}.demo-toast--error .demo-toast-icon{background:#b91c1c2e}.demo-toast--info{background:#06b6d41f;border-color:#06b6d466;color:#0e7490}.demo-toast--info .demo-toast-icon{background:#0e74902e}.demo-profile-card{width:min(280px,100%);border:1px solid hsl(var(--border));border-radius:14px;background:hsl(var(--card));padding:18px;text-align:center}.demo-profile-avatar{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:linear-gradient(135deg,#0ea5e9,#f97316)}.demo-profile-card h3{margin:0}.demo-profile-card p{margin:8px 0;color:hsl(var(--muted-foreground))}.demo-profile-status{display:inline-flex;border-radius:999px;padding:4px 10px;font-size:11px;text-transform:capitalize}.demo-profile-status--available{background:#10b98129;color:#047857}.demo-profile-status--busy{background:#ef444426;color:#b91c1c}.demo-profile-status--away{background:#eab30833;color:#92400e}.demo-modal-shell{display:flex;justify-content:center}.demo-modal-open{border:1px solid #1f2937;background:#1f2937;color:#fff;border-radius:8px;padding:10px 14px}.demo-modal-backdrop{position:fixed;inset:0;background:#0f172a8c;display:grid;place-items:center;z-index:40;padding:16px}.demo-modal-panel{width:min(420px,100%);border-radius:12px;border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));padding:16px}.demo-modal-panel h3{margin:0}.demo-modal-panel p{margin:8px 0 0;color:hsl(var(--muted-foreground))}.demo-modal-actions{margin-top:12px;display:flex;justify-content:flex-end}.demo-modal-actions button{border:1px solid hsl(var(--primary));background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-radius:8px;padding:8px 12px}.demo-accordion{width:min(560px,100%);border:1px solid hsl(var(--border));border-radius:10px;overflow:hidden}.demo-accordion-item{border-bottom:1px solid hsl(var(--border-light))}.demo-accordion-item:last-child{border-bottom:none}.demo-accordion-item button{width:100%;text-align:left;border:none;background:hsl(var(--card));color:hsl(var(--foreground));padding:10px 12px;font-weight:600}.demo-accordion-item p{margin:0;padding:0 12px 12px;color:hsl(var(--muted-foreground));font-size:13px}.demo-tabs{width:min(560px,100%)}.demo-tabs-list{display:flex;flex-wrap:wrap;gap:8px}.demo-tabs-list button{border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));border-radius:8px;padding:8px 12px;font-size:12px}.demo-tabs--line .demo-tabs-list button.active{border-color:#f97316;color:#f97316}.demo-tabs--pill .demo-tabs-list button.active{border-color:#0f172a;background:#0f172a;color:#fff}.demo-tabs-panel{margin-top:10px;border:1px solid hsl(var(--border));border-radius:10px;background:hsl(var(--card));padding:12px;color:hsl(var(--muted-foreground))}.demo-table-container{width:100%}.demo-table-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;color:hsl(var(--muted-foreground))}.demo-table-scroll{width:100%;overflow-x:auto;border:1px solid hsl(var(--border));border-radius:10px}.demo-table{width:100%;border-collapse:collapse;min-width:540px;background:hsl(var(--card))}.demo-table th,.demo-table td{border-bottom:1px solid hsl(var(--border-light));padding:10px;text-align:left;font-size:12px}.demo-table--compact th,.demo-table--compact td{padding:8px}.demo-table th button{border:none;background:transparent;color:inherit;font-weight:700;padding:0;cursor:pointer}.demo-table tr:last-child td{border-bottom:none}.demo-row--highlight td{background:#0ea5e914}.demo-chart-shell{width:100%}.demo-chart-meta{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}.demo-chart-meta strong{font-size:24px}.demo-chart-delta{color:#059669;font-size:12px}.demo-chart-delta--down{color:#dc2626}.demo-chart{width:100%;border-radius:10px;border:1px solid hsl(var(--border));background:hsl(var(--card))}.demo-chart-threshold{stroke:#f97316;stroke-dasharray:5 4;stroke-width:1.2}.demo-chart-area{fill:#0ea5e924}.demo-chart-line{stroke:#0ea5e9;stroke-width:3;fill:none}.demo-chart-node{fill:#0284c7}.demo-chart-footer{margin-top:8px;display:flex;justify-content:space-between;font-size:12px;color:hsl(var(--muted-foreground))}html[data-theme=dark] .demo-glass-card{border-color:#94a3b852;background:linear-gradient(135deg,#1e293bf2,#0f172af0)}html[data-theme=dark] .demo-glass-card h3{color:hsl(var(--foreground))}html[data-theme=dark] .demo-glass-card p{color:hsl(var(--muted-foreground))}html[data-theme=dark] .demo-toast--success{color:#6ee7b7}html[data-theme=dark] .demo-toast--error{color:#fca5a5}html[data-theme=dark] .demo-toast--info{color:#67e8f9}html[data-theme=dark] .demo-profile-status--available{color:#6ee7b7}html[data-theme=dark] .demo-profile-status--busy{color:#fda4af}html[data-theme=dark] .demo-profile-status--away{color:#fde68a}@media(max-width:640px){.playground-preview{padding:12px}.playground-control-grid{grid-template-columns:1fr}.demo-chart-footer,.demo-table-meta{flex-direction:column;align-items:flex-start;gap:4px}}.details-page{min-height:calc(100vh - 160px);padding-top:30px;padding-bottom:30px}.details-state{min-height:calc(100vh - 180px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.details-state h2{margin:0;color:hsl(var(--foreground))}.details-state p{margin:0;color:hsl(var(--muted-foreground))}.back-btn{display:inline-block;margin-bottom:20px;text-decoration:none;border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));border-radius:8px;padding:8px 12px;font-size:13px}.back-btn:hover{background:hsl(var(--bg-main))}.details-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.details-head h1{margin:0;font-size:34px;color:hsl(var(--foreground))}.component-tag{background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:3px 10px;font-size:12px;text-transform:capitalize}.component-mode-badge{border-radius:999px;border:1px solid hsl(var(--border));background:hsl(var(--bg-main));color:hsl(var(--text-secondary));padding:3px 10px;font-size:12px}.component-mode-badge--interactive{border-color:#fdba74;background:#fff7ed;color:#c2410c}.details-head .component-delete-btn{margin-left:auto;padding:7px 16px;font-size:13px;border-radius:8px;border:1px solid #dc2626;background:transparent;color:#dc2626;cursor:pointer}.details-head .component-delete-btn:hover:not(:disabled){background:#dc2626;color:#fff}.details-head .component-delete-btn:disabled{opacity:.6;cursor:not-allowed}.details-desc{margin:8px 0 20px;color:hsl(var(--muted-foreground));font-size:14px}.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.preview-box,.code-pane{border:1px solid hsl(var(--border));border-radius:10px;background:hsl(var(--card));overflow:hidden}.code-pane{display:flex;flex-direction:column}.preview-head{min-height:44px;border-bottom:1px solid hsl(var(--border-light));background:hsl(var(--bg-main));display:flex;align-items:center;justify-content:space-between;padding:0 12px}.preview-head span{font-size:13px;color:hsl(var(--foreground));font-weight:600}.preview-share-btn{border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--text-secondary));border-radius:6px;font-size:12px;padding:5px 10px;min-height:30px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.preview-share-btn:hover{background:hsl(var(--bg-main))}.preview-body{min-height:320px;background:hsl(var(--card));display:flex;align-items:center;justify-content:center;padding:20px}.preview-body--playground{align-items:stretch;justify-content:flex-start;padding:0}.preview-body--playground .playground-shell{gap:0}.preview-body--playground .playground-preview{border:none;border-radius:0;border-bottom:1px solid hsl(var(--border-light))}.preview-body--playground .playground-controls{border:none;border-radius:0;background:transparent;padding:12px}.preview-body p{margin:0;color:hsl(var(--muted-foreground));font-size:13px}.preview-screenshot{width:100%;height:auto;max-height:420px;object-fit:contain}.code-tabs{display:flex;gap:8px;align-items:center;border-bottom:1px solid hsl(var(--border-light));background:hsl(var(--bg-main));padding:8px}.tab-btn{border:1px solid hsl(var(--border));border-radius:6px;background:hsl(var(--card));color:hsl(var(--text-secondary));padding:7px 12px;font-size:12px;min-height:32px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.tab-btn.active{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:hsl(var(--primary))}.code-pane .code-block-wrap{border:none;border-radius:0;background:transparent;display:flex;flex-direction:column;flex:1;min-height:0}.code-pane .code-block-head{border-bottom:1px solid hsl(var(--border-light));background:hsl(var(--card))}.code-pane .code-block-body{background:hsl(var(--card));flex:1}@media(max-width:980px){.details-grid{grid-template-columns:1fr}}html[data-theme=dark] .component-mode-badge{border-color:hsl(var(--border));background:hsl(var(--bg-secondary));color:hsl(var(--foreground))}html[data-theme=dark] .component-mode-badge--interactive{border-color:#f9731659;background:#f973161f;color:#fdba74}html[data-theme=dark] .preview-share-btn{border-color:hsl(var(--border));background:hsl(var(--bg-secondary));color:hsl(var(--foreground))}html[data-theme=dark] .preview-share-btn:hover{background:hsl(var(--bg-main))}.contact-page{padding:40px 0}.contact-card{max-width:760px;margin:0 auto;border:1px solid #d7dee7;border-radius:10px;background:#fff;box-shadow:none;padding:24px}.contact-card h1{margin:0 0 8px;color:#0f172a;font-size:34px}.contact-card p{margin:0 0 16px;color:#64748b;font-size:14px}.contact-items{display:flex;flex-direction:column;gap:10px}.contact-item{border:1px solid #d7dee7;border-radius:8px;background:#f8fafc;padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}.contact-label{display:inline-flex;align-items:center;gap:8px;color:#0f172a;font-weight:600}.contact-item span:last-child{color:#475569}.contact-link{text-decoration:none;color:#2563eb;font-size:14px;text-align:right;justify-self:end}.contact-link:hover{text-decoration:underline}.support-ticket-form{margin-top:18px;border:1px solid #d7dee7;border-radius:8px;background:#f8fafc;padding:14px;display:flex;flex-direction:column;gap:10px}.support-ticket-form h2{margin:0;font-size:18px;color:#0f172a}.support-ticket-form p{margin:0}.support-label{font-size:13px;color:#334155;font-weight:600}.support-input{border:1px solid #cbd5e1;border-radius:8px;padding:10px 12px;min-height:42px;box-sizing:border-box;font-size:14px;line-height:1.3;font-family:inherit}.support-input:focus-visible{outline:2px solid rgba(37,99,235,.35);outline-offset:2px;border-color:#2563eb}.support-textarea{resize:vertical;min-height:120px;font-family:inherit}.support-submit{border:0;border-radius:8px;padding:10px 14px;background:#0f172a;color:#fff;font-weight:600;min-height:40px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.support-submit:disabled{opacity:.7;cursor:not-allowed}@media(max-width:620px){.contact-item{grid-template-columns:1fr;justify-items:start}.contact-link{text-align:left;justify-self:start}}.about-page{padding:48px 0 32px}.about-page-card{max-width:860px;margin:0 auto;border:1px solid #d7dee7;border-radius:14px;background:#fff;box-shadow:none;padding:32px 20px 28px}.about-page-card h1{margin:0 0 18px;color:#0f172a;font-size:2.2rem;line-height:1.1}.about-page-card p{margin:0 0 16px;color:#475569;line-height:1.7;font-size:1.05rem}.about-page-link{display:inline-block;text-decoration:none;border:1px solid #0f172a;background:#0f172a;color:#fff;border-radius:10px;padding:10px 18px;font-size:1rem;margin-top:10px}.about-page-link:hover{background:#1f2937;border-color:#1f2937}html[data-theme=dark] .about-page-card{background:hsl(var(--card));border-color:hsl(var(--border));box-shadow:none}html[data-theme=dark] .about-page-card h1{color:hsl(var(--foreground))}html[data-theme=dark] .about-page-card p{color:hsl(var(--muted-foreground))}html[data-theme=dark] .about-page-link{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}.auth-page{min-height:100vh;background:linear-gradient(to bottom,#a1cbe6,#fff);display:flex;justify-content:center;align-items:center;padding:24px}.auth-page.with-navbar{min-height:calc(100vh - 80px);padding-top:104px;padding-bottom:24px}.auth-card{width:100%;max-width:420px;background:#fff;border-radius:10px;padding:22px;box-shadow:none;display:flex;flex-direction:column}.auth-card h2{margin:0 0 18px;text-align:center;font-size:20px;color:#1c1c1e}.auth-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;margin:0 auto 14px}.auth-avatar img{width:100%;height:100%;object-fit:cover}.auth-card form{width:100%}.input-group{position:relative;margin-bottom:16px}.input-group input{width:100%;height:44px;border:1px solid #f2f2f2;background:#f2f2f2;border-radius:10px;box-sizing:border-box;padding:0 38px;font-size:14px;color:#111827;line-height:1.2}.input-group select{width:100%;height:44px;border:1px solid #f2f2f2;background:#f2f2f2;border-radius:10px;box-sizing:border-box;padding:0 12px;font-size:14px;color:#111827;line-height:1.2}.input-group input.error,.input-group select.error{border:1px solid #ef4444;background:#fef2f2}.input-group input[type=password]::-ms-reveal,.input-group input[type=password]::-ms-clear{display:none}.input-group input[type=password]::-webkit-credentials-auto-fill-button,.input-group input[type=password]::-webkit-contacts-auto-fill-button{display:none!important;visibility:hidden;pointer-events:none}.input-group img{width:16px;height:16px;position:absolute;top:50%;transform:translateY(-50%)}.input-group .left-icon{left:12px}.input-group .right-icon{cursor:pointer}.input-group .icon-toggle .right-icon{position:static;transform:none}.icon-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:transparent;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}.forgot-password{width:100%;text-align:right;margin:2px 0 16px}.forgot-password-link{border:none;background:transparent;padding:0;font-size:13px;color:#0f172a;font-weight:700;cursor:pointer}.forgot-password-link:hover{color:#1f2937}.forgot-password-panel{border:1px solid #e5e7eb;background:#f8fafc;border-radius:10px;padding:12px;margin:0 0 16px}.forgot-password-panel .input-group{margin-bottom:12px}.forgot-password-panel .input-group:last-of-type{margin-bottom:10px}.forgot-password-actions{display:flex;gap:10px}.forgot-password-actions .auth-submit,.forgot-password-actions .auth-cancel{height:38px}.auth-cancel{width:100%;border:1px solid #d1d5db;background:#fff;color:#111827;border-radius:10px;cursor:pointer;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.auth-cancel:hover{background:#f3f4f6}.auth-switch a{font-weight:700;color:#0f172a;text-decoration:none}.auth-submit{width:100%;border:none;height:40px;background:#1c1c1e;color:#fff;border-radius:10px;cursor:pointer;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.auth-submit:hover{background:#363636}.auth-switch{margin:16px 0 0;font-size:13px;text-align:center;color:#475569}.captcha-group{display:flex;align-items:center;gap:10px;margin:0 0 14px}.captcha-image,.captcha-placeholder{width:170px;height:52px;border-radius:8px;border:1px solid #d7dee7;background:#f8fafc}.captcha-placeholder{display:flex;align-items:center;justify-content:center;color:#64748b;font-size:12px}.captcha-refresh{border:1px solid #d7dee7;background:#fff;color:#0f172a;border-radius:8px;padding:8px 10px;font-size:12px;min-height:34px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.captcha-refresh:hover{background:#f8fafc}.toast-inline{display:inline-flex;align-items:center;gap:8px}.toast-inline-icon{width:16px;height:16px}@media(max-width:560px){.auth-page{padding:14px}.auth-page.with-navbar{padding-top:94px;padding-bottom:14px}.auth-card{max-width:100%}}.add-component-page{padding-top:112px;padding-bottom:32px}.add-component-card{width:100%;max-width:760px;margin:0 auto;border-radius:10px;background:#fff;border:1px solid #dbe2eb;box-shadow:none;padding:24px}.add-component-card h1{margin:0;font-size:26px;color:#1c1c1e}.add-component-card p{margin:8px 0 18px;color:#475569}.add-component-card form{display:grid;gap:10px}.add-component-card label{font-size:14px;color:#1f2937;font-weight:600;margin-top:4px}.add-component-card input,.add-component-card select,.add-component-card textarea{width:100%;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc;color:#111827;font-size:14px;padding:10px 12px;min-height:42px;box-sizing:border-box}.add-component-card textarea{resize:vertical;min-height:96px}.add-component-card input.error,.add-component-card select.error,.add-component-card textarea.error{border-color:#ef4444;background:#fef2f2}.field-error{color:#b91c1c;font-size:12px;margin-top:-4px}.add-component-submit{margin-top:10px;border:none;height:40px;border-radius:10px;cursor:pointer;background:#1c1c1e;color:#fff;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.add-component-submit:hover{background:#363636}@media(max-width:560px){.add-component-page{padding-top:96px}.add-component-card{padding:16px}}.notfound-page{min-height:calc(100vh - 160px);display:flex;align-items:center;justify-content:center;padding:20px}.notfound-box{width:100%;max-width:360px;border:1px solid #d7dee7;border-radius:10px;background:#fff;box-shadow:none;text-align:center;padding:24px}.notfound-box h1{margin:0 0 8px;font-size:42px;color:#0f172a}.notfound-box p{margin:0 0 16px;color:#64748b}.notfound-box a{text-decoration:none;border:1px solid #1f2937;border-radius:8px;background:#1f2937;color:#fff;padding:8px 12px;font-size:13px}@layer base{:root{--primary: 186 46% 32%;--primary-dark: 186 47% 24%;--primary-light: 187 40% 85%;--primary-foreground: 0 0% 100%;--accent: 20 88% 57%;--accent-foreground: 0 0% 100%;--secondary: 43 92% 55%;--secondary-foreground: 202 32% 18%;--background: 39 44% 96%;--bg-main: 38 41% 94%;--bg-secondary: 38 35% 90%;--bg-card: 0 0% 100%;--bg-hover: 38 30% 86%;--bg-active: 38 28% 82%;--foreground: 202 32% 18%;--card: 0 0% 100%;--card-foreground: 202 32% 18%;--popover: 0 0% 100%;--popover-foreground: 202 32% 18%;--text-primary: 202 32% 18%;--text-secondary: 199 20% 31%;--text-muted: 199 13% 45%;--muted: 38 24% 90%;--muted-foreground: 199 13% 45%;--destructive: 0 71% 52%;--destructive-foreground: 0 0% 100%;--success: 153 51% 39%;--warning: 37 96% 52%;--info: 199 73% 45%;--border: 34 25% 79%;--border-light: 34 24% 86%;--input: 34 24% 82%;--ring: 20 88% 57%;--radius: .9rem;--header-height: 80px;--sidebar-background: 0 0% 100%;--sidebar-foreground: 202 32% 18%;--sidebar-primary: 186 46% 32%;--sidebar-primary-foreground: 0 0% 100%;--sidebar-accent: 38 35% 90%;--sidebar-accent-foreground: 202 32% 18%;--sidebar-border: 34 25% 79%;--sidebar-ring: 20 88% 57%}html[data-theme=dark]{--primary: 187 62% 64%;--primary-foreground: 210 40% 98%;--accent: 24 95% 61%;--background: 222 47% 11%;--bg-main: 222 42% 14%;--bg-secondary: 222 36% 18%;--bg-card: 222 36% 16%;--foreground: 210 40% 95%;--card: 222 36% 16%;--card-foreground: 210 40% 95%;--text-secondary: 214 25% 78%;--muted: 222 25% 22%;--muted-foreground: 215 18% 72%;--border: 218 22% 32%;--input: 218 22% 32%;--ring: 24 95% 61%}}*{border-color:hsl(var(--border))}html{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;min-height:100vh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:11pt;color:hsl(var(--foreground));background:hsl(var(--background));line-height:1.6;letter-spacing:.01em}h1,h2,h3,.display-font{font-family:inherit;letter-spacing:.01em;margin-top:0;margin-bottom:.5em}code,pre,.font-mono{font-family:JetBrains Mono,Courier New,monospace;font-size:.97em}.text-gradient{background:linear-gradient(to right,hsl(var(--primary)),hsl(var(--accent)),hsl(var(--secondary)));-webkit-background-clip:text;background-clip:text;color:transparent}.glass-card{background:hsl(var(--bg-card) / .9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid hsl(var(--border));box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.code-block{background:hsl(var(--bg-main));border-radius:.5rem;padding:1rem;font-family:JetBrains Mono,Courier New,monospace;font-size:.875rem;overflow-x:auto;border:1px solid hsl(var(--border));box-shadow:0 1px 2px #0000000d}.hover-lift{transition:all .3s ease}.hover-lift:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.scrollbar-thin{scrollbar-width:thin;scrollbar-color:hsl(var(--border)) transparent}.scrollbar-thin::-webkit-scrollbar{width:6px;height:6px}.scrollbar-thin::-webkit-scrollbar-track{background:transparent}.scrollbar-thin::-webkit-scrollbar-thumb{background:hsl(var(--border));border-radius:3px}.app-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;color:#64748b;font-size:1.1rem;padding:2rem 1rem}html[data-theme=dark] body{background:hsl(var(--background));color:hsl(var(--foreground))}html[data-theme=dark] .layout-page,html[data-theme=dark] .auth-page{background:linear-gradient(to bottom,hsl(var(--bg-main)),hsl(var(--background)))}html[data-theme=dark] .app-header,html[data-theme=dark] .mobile-nav-wrap,html[data-theme=dark] .app-footer,html[data-theme=dark] .component-card,html[data-theme=dark] .preview-box,html[data-theme=dark] .code-pane,html[data-theme=dark] .code-tabs,html[data-theme=dark] .auth-card,html[data-theme=dark] .contact-card,html[data-theme=dark] .notfound-box,html[data-theme=dark] .footer-main,html[data-theme=dark] .footer-bottom{background:hsl(var(--card));border-color:hsl(var(--border))}html[data-theme=dark] .brand,html[data-theme=dark] .footer-brand,html[data-theme=dark] .footer-section h4,html[data-theme=dark] .details-head h1,html[data-theme=dark] .contact-card h1,html[data-theme=dark] .component-card-body h3,html[data-theme=dark] .preview-head span,html[data-theme=dark] .code-language,html[data-theme=dark] .input-group input,html[data-theme=dark] .auth-card h2,html[data-theme=dark] .mobile-nav a{color:hsl(var(--foreground))}html[data-theme=dark] .hero-content p,html[data-theme=dark] .component-card-body p,html[data-theme=dark] .details-desc,html[data-theme=dark] .footer-description,html[data-theme=dark] .footer-contact p,html[data-theme=dark] .footer-bottom p,html[data-theme=dark] .footer-section a,html[data-theme=dark] .footer-right a,html[data-theme=dark] .contact-item,html[data-theme=dark] .auth-switch{color:hsl(var(--muted-foreground))}html[data-theme=dark] .search-bar-input,html[data-theme=dark] .tab-btn,html[data-theme=dark] .btn-outline,html[data-theme=dark] .theme-toggle,html[data-theme=dark] .input-group input,html[data-theme=dark] .filter-btn,html[data-theme=dark] .code-block-head button{background:hsl(var(--bg-secondary));border-color:hsl(var(--border));color:hsl(var(--foreground))}html[data-theme=dark] .btn-dark,html[data-theme=dark] .tab-btn.active,html[data-theme=dark] .component-link,html[data-theme=dark] .filter-btn.active{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}html[data-theme=dark] .component-card,html[data-theme=dark] .auth-card,html[data-theme=dark] .contact-card,html[data-theme=dark] .notfound-box,html[data-theme=dark] .toast-root,html[data-theme=dark] .search-bar-input:focus{box-shadow:none!important}.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}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.error-boundary-fallback button{border:1px solid #1f2937;background:#1f2937;color:#fff;border-radius:8px;padding:8px 12px;cursor:pointer}.error-boundary-fallback{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px 12px}.error-boundary-icon{width:52px;height:52px}.toast-content{display:grid;gap:8px}.toast-timer{margin-top:12px}.toast-timer-track{height:6px;width:100%;overflow:hidden;border-radius:999px;background:hsl(var(--muted))}.toast-timer-fill{height:100%;border-radius:999px;background:hsl(var(--foreground) / .6);transition:width .1s linear}