.components-page-body{margin:0;padding:0;min-height:100vh;background-color:var(--background);color:var(--foreground)}.components-page-wrapper{max-width:1080px;margin:0 auto;padding:32px 24px 80px;display:flex;flex-direction:column;gap:36px}.components-top-nav{position:relative;display:flex;justify-content:space-between;align-items:center;padding-bottom:22px;border-bottom:var(--border-default)}.components-nav-left{display:flex;align-items:center;gap:16px;flex-shrink:0}.components-back-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;font-size:var(--text-xs);font-weight:var(--font-semibold);border-radius:var(--radius-full);background-color:color-mix(in srgb,var(--card) 60%,transparent);border:1px solid var(--border);color:var(--foreground);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform var(--duration-fast) var(--spring-hover),background-color var(--duration-fast) var(--ease-soft-out),border-color var(--duration-fast) var(--ease-soft-out),box-shadow var(--duration-fast) var(--ease-soft-out)}.components-back-btn:hover{background-color:color-mix(in srgb,var(--primary) 20%,var(--card));border-color:var(--primary);color:var(--foreground);transform:translateY(-2px);box-shadow:var(--shadow-sm);filter:none}.components-brand-badge{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);font-weight:var(--font-semibold)}.brand-sparkle{color:var(--primary);font-size:16px}.brand-name{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em}.brand-sep{color:var(--muted-foreground);opacity:.5}.brand-page{color:var(--muted-foreground);font-weight:500}.components-nav-right{display:flex;align-items:center;gap:12px}.components-count-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--radius-full);background-color:var(--card);border:var(--border-default);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--muted-foreground);box-shadow:var(--shadow-xs)}.count-dot{font-size:8px;color:var(--secondary)}.components-mobile-toggle{display:none!important;align-items:center;justify-content:center;border-radius:var(--radius-xs);cursor:pointer}.components-mobile-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:100;background-color:var(--card);border:var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:8px;animation:mobileMenuIn .2s var(--ease-spring)}.components-mobile-menu.is-open{display:block}.components-mobile-menu-inner{display:flex;flex-direction:column;gap:4px}.components-mobile-nav-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-sm);color:var(--foreground);font-size:var(--text-sm);font-weight:600;text-decoration:none;transition:background-color var(--duration-fast) var(--ease-soft-out)}.components-mobile-nav-item:hover{background-color:color-mix(in srgb,var(--primary) 12%,var(--card))}@media (max-width: 1024px){.components-nav-right a[href*=github]{display:none!important}}@media (max-width: 860px){.comp-desktop-only{display:none!important}.components-mobile-toggle{display:inline-flex!important}.components-nav-right{gap:8px}.components-top-nav{padding-bottom:16px}}@media (max-width: 640px){.components-brand-badge .brand-name,.components-brand-badge .brand-sep,.components-brand-badge .brand-page,.catalog-badge,#component-count-badge{display:none!important}.components-top-nav{padding-bottom:12px;gap:8px}.components-nav-left{gap:10px}}@media (max-width: 400px){.components-back-btn span{display:none!important}.components-back-btn{padding:6px 10px}}.catalog-hero-section{display:flex;flex-direction:column;gap:20px}.catalog-pill-tag{display:inline-flex;align-items:center;gap:8px;padding:3px 12px;border-radius:var(--radius-full);background-color:color-mix(in srgb,var(--primary) 18%,var(--card));border:1px solid color-mix(in srgb,var(--primary) 35%,transparent);font-size:11px;font-weight:600;color:var(--foreground);width:fit-content;margin-bottom:10px}.tag-divider{opacity:.4}.catalog-hero-title{font-family:var(--font-display);font-size:clamp(2rem,3.2vw,2.8rem);line-height:1.28;letter-spacing:-.02em;margin-bottom:10px;color:var(--foreground)}.catalog-hero-subtitle{font-size:var(--text-base);line-height:1.65;color:var(--muted-foreground);max-width:640px}.catalog-controls-container{display:flex;flex-direction:column;gap:14px;margin-top:8px}.catalog-search-bar{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:14px;width:17px;height:17px;color:var(--muted-foreground);pointer-events:none}.catalog-search-input{width:100%;padding:12px 64px 12px 42px;font-family:var(--font-body);font-size:var(--text-sm);background-color:var(--card);border:var(--border-default);border-radius:var(--radius-md);color:var(--foreground);outline:none;box-shadow:var(--shadow-xs);transition:border-color var(--duration-fast) var(--ease-soft-out),box-shadow var(--duration-fast) var(--ease-soft-out)}.catalog-search-input:focus{border-color:var(--primary);box-shadow:var(--glow-primary)}.catalog-search-input::-webkit-search-cancel-button{display:none}.search-clear-btn{position:absolute;right:42px;background:none;border:none;color:var(--muted-foreground);cursor:pointer;padding:4px;font-size:13px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;transition:color var(--duration-fast) var(--ease-soft-out)}.search-clear-btn:hover{color:var(--foreground)}.search-kbd-shortcut{position:absolute;right:14px;pointer-events:none}.catalog-filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%}.catalog-filter-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold);border:1px solid var(--border);background-color:var(--card);color:var(--muted-foreground);cursor:pointer;white-space:nowrap;transition:all var(--duration-fast) var(--ease-soft-out)}.catalog-filter-pill:hover{color:var(--foreground);border-color:color-mix(in srgb,var(--primary) 50%,var(--border));background-color:var(--muted)}.catalog-filter-pill.is-active{background-color:var(--primary);color:var(--primary-foreground);border-color:var(--primary);box-shadow:var(--shadow-xs)}.filter-count-badge{font-size:10px;opacity:.8;padding:1px 5px;border-radius:var(--radius-full);background-color:#00000014}.dark .filter-count-badge{background-color:#ffffff26}.catalog-results-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:var(--text-xs);color:var(--muted-foreground);padding:0 4px}.results-hint{font-size:11px;opacity:.85}.ui-catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr));gap:var(--space-5);width:100%}@media (max-width: 640px){.ui-catalog-grid{gap:var(--space-4)}}.ui-catalog-card{position:relative;height:235px;background-color:var(--card);border:1.5px solid var(--border);border-radius:22px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;cursor:pointer;box-shadow:var(--shadow-xs);transition:transform .26s var(--spring-hover),box-shadow .24s var(--ease-soft-out),border-color .2s var(--ease-soft-out)}.ui-catalog-card:hover{transform:translateY(-5px);border-color:var(--primary);box-shadow:0 16px 36px -6px #3a35411f,0 0 0 1px var(--primary)}.dark .ui-catalog-card:hover{box-shadow:0 16px 36px -6px #0009,0 0 0 1px var(--primary)}.ui-catalog-card:focus-visible{outline:2px solid var(--primary);outline-offset:3px}.ui-catalog-card-header{z-index:2;pointer-events:none;max-width:52%;display:flex;flex-direction:column;gap:3px}.ui-catalog-badge{display:inline-block;font-size:10px;text-transform:uppercase;font-weight:700;letter-spacing:.08em;color:var(--primary);margin-bottom:2px}.ui-catalog-title{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--foreground);line-height:1.25;margin-bottom:4px}.ui-catalog-desc-snippet{font-size:12px;color:var(--muted-foreground);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.ui-catalog-inspect-hint{z-index:2;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--primary);transition:transform var(--duration-fast) var(--ease-soft-out)}.ui-catalog-card:hover .ui-catalog-inspect-hint{transform:translate(3px)}.ui-catalog-preview-corner{position:absolute;right:0;bottom:0;width:48%;height:56%;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 14px;background:color-mix(in srgb,var(--muted) 40%,transparent);border-top-left-radius:18px;border-top:1.5px dashed color-mix(in srgb,var(--primary) 45%,var(--border));border-left:1.5px dashed color-mix(in srgb,var(--primary) 45%,var(--border));pointer-events:none;z-index:1;transform:none;overflow:hidden;transition:background-color .24s var(--ease-soft-out),border-color .24s var(--ease-soft-out)}.ui-catalog-preview-corner>*{margin:auto!important;max-width:100%}.ui-catalog-card:hover .ui-catalog-preview-corner{background-color:color-mix(in srgb,var(--primary) 12%,transparent);border-color:var(--primary)}.ui-catalog-card[data-component-id=button]:hover .ui-button--primary{transform:translateY(-3px);box-shadow:var(--shadow-sm)}.ui-catalog-card[data-component-id=chip]:hover .ui-chip--primary{transform:translateY(-2px);box-shadow:var(--shadow-xs)}.ui-catalog-card[data-component-id=controls]:hover .ui-switch-track{background-color:var(--primary)}.ui-catalog-card[data-component-id=controls]:hover .ui-switch-thumb{transform:translate(20px)}.ui-catalog-card[data-component-id=controls]:hover .ui-checkbox input{border-color:var(--primary);transform:scale(1.08)}.ui-catalog-card[data-component-id=form]:hover .ui-input{border-color:var(--primary);box-shadow:var(--glow-primary)}.ui-catalog-card[data-component-id=dropdown]:hover .ui-dropdown-menu{opacity:.95;visibility:visible;transform:translateY(0) scale(.98)}.ui-catalog-card[data-component-id=popover]:hover .ui-button,.ui-catalog-card[data-component-id=modal]:hover .ui-button,.ui-catalog-card[data-component-id=drawer]:hover .ui-button{transform:translateY(-2px);box-shadow:var(--shadow-sm)}.ui-catalog-card[data-component-id=toast]:hover .ui-toast{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-md)}.ui-catalog-card[data-component-id=accordion]:hover .ui-accordion-icon{transform:rotate(180deg);color:var(--primary)}.ui-catalog-card[data-component-id=tooltip]:hover [data-tooltip]:before,.ui-catalog-card[data-component-id=tooltip]:hover [data-tooltip]:after{opacity:1;visibility:visible;transform:translate(-50%) translateY(-6px) scale(1)}.ui-catalog-card[data-component-id=theme-toggle]:hover .ui-theme-orb{transform:scale(1.1)}.ui-catalog-card[data-component-id=avatar]:hover .ui-avatar{margin-left:-5px}.ui-catalog-card[data-component-id=avatar]:hover .ui-avatar:nth-child(2){transform:translateY(-4px) scale(1.1);z-index:5}.ui-catalog-card[data-component-id=slider]:hover .ui-slider::-webkit-slider-thumb{transform:scale(1.2);box-shadow:var(--glow-primary)}.ui-catalog-card[data-component-id=kbd]:hover .ui-kbd{transform:translateY(1.5px);border-bottom-width:1px}.ui-catalog-card[data-component-id=progress]:hover .ui-progress-fill{width:90%!important}.ui-catalog-card[data-component-id=breadcrumb]:hover .ui-breadcrumb-link{color:var(--primary)}.ui-catalog-card[data-component-id=stat]:hover .ui-stat{transform:translateY(-3px);box-shadow:var(--shadow-md)}.ui-catalog-card[data-component-id=alert]:hover .ui-alert{transform:translateY(-2px);box-shadow:var(--shadow-sm)}.ui-catalog-card[data-component-id=skeleton]:hover .ui-skeleton{opacity:.85}.catalog-empty-state{text-align:center;padding:54px 20px;background-color:var(--card);border:var(--border-default);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;gap:12px}.empty-state-icon{font-size:32px;color:var(--primary)}.empty-state-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700}.empty-state-desc{font-size:var(--text-sm);color:var(--muted-foreground);max-width:380px}.components-footer{border-top:var(--border-default);padding-top:32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:var(--text-xs);color:var(--muted-foreground)}.footer-left{display:flex;align-items:center;gap:8px}.footer-right{display:flex;align-items:center;flex-wrap:wrap;gap:16px}.footer-link{color:var(--muted-foreground);text-decoration:none;transition:color var(--duration-fast) var(--ease-soft-out)}.footer-link:hover{color:var(--foreground)}.ui-inspector-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#1e1b24c2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:2000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);opacity:0;visibility:hidden;transition:opacity var(--duration-base) var(--ease-soft-out),visibility var(--duration-base)}.ui-inspector-backdrop.is-open{opacity:1;visibility:visible}.ui-inspector-window{width:100%;max-width:1040px;max-height:90vh;background-color:var(--card);border:var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;transform:scale(.94) translateY(14px);opacity:0;transition:transform var(--duration-slow) var(--ease-spring),opacity var(--duration-base) var(--ease-soft-out)}@media (min-width: 641px) and (max-width: 1024px){.ui-inspector-window{width:95vw;max-width:95vw;max-height:92vh}.ui-inspector-sidebar{width:240px}.inspector-sidebar-inner{width:240px;padding:var(--space-4)}.ui-inspector-stage-area{padding:var(--space-4)}}@media (max-width: 640px){.ui-inspector-backdrop{padding:8px}.ui-inspector-window{max-height:96vh;border-radius:var(--radius-md)}.ui-inspector-header{position:relative;padding:14px 14px 10px;gap:6px;display:flex;flex-direction:column;align-items:stretch}.inspector-header-info{width:calc(100% - 44px);gap:3px}.inspector-title{font-size:1.15rem;line-height:1.3;margin:0}.inspector-desc{font-size:11px;line-height:1.45;margin:0}.inspector-close-btn{position:absolute!important;top:10px!important;right:10px!important;padding:4px 6px!important;z-index:20!important}.inspector-close-kbd,.inspector-sidebar-toggle,#sidebar-toggle-btn,.ui-inspector-sidebar,#inspector-sidebar{display:none!important}.ui-inspector-main-layout{display:block!important;grid-template-columns:1fr!important}.ui-inspector-stage-area{padding:12px 10px;width:100%!important;max-width:100%!important}.inspector-header-actions{width:100%;justify-content:flex-end;margin-top:2px}.inspector-nav-group{padding:2px 4px}.inspector-nav-btn{padding:3px 6px;font-size:11px}.inspector-index-text{font-size:10px}.ui-code-toolbar{flex-direction:column;align-items:stretch;gap:8px;padding:8px 10px}.ui-code-tabs{display:flex;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;gap:4px}.ui-code-tabs::-webkit-scrollbar{display:none}.ui-code-tab-btn{white-space:nowrap;flex-shrink:0;padding:5px 10px;font-size:11px}.ui-code-actions{display:flex;justify-content:space-between;align-items:center;width:100%}.code-meta-badge{font-size:10px}.copy-code-btn{padding:4px 10px;font-size:11px}.ui-code-view{padding:12px 10px;font-size:11px;overflow-x:auto;-webkit-overflow-scrolling:touch}}.ui-inspector-backdrop.is-open .ui-inspector-window{transform:scale(1) translateY(0);opacity:1}.ui-inspector-header{padding:var(--space-4) var(--space-6);border-bottom:var(--border-default);display:flex;justify-content:space-between;align-items:center;gap:16px;background-color:color-mix(in srgb,var(--muted) 30%,var(--card));z-index:10}.inspector-header-info{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:65%}.inspector-title{font-size:var(--text-xl);font-weight:700;line-height:1.3;color:var(--foreground);margin:0}.inspector-desc{font-size:var(--text-xs);line-height:1.5;color:var(--muted-foreground);margin:0}.inspector-header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.inspector-sidebar-toggle{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;font-size:11px;font-weight:600;border-radius:var(--radius-full);transition:all var(--duration-fast) var(--ease-soft-out)}.inspector-sidebar-toggle.is-active{background-color:color-mix(in srgb,var(--primary) 22%,var(--card));border-color:var(--primary);color:var(--foreground)}.inspector-nav-group{display:inline-flex;align-items:center;gap:4px;background-color:var(--card);border:var(--border-default);border-radius:var(--radius-full);padding:2px 6px}.inspector-nav-btn{background:none;border:none;color:var(--muted-foreground);cursor:pointer;padding:4px 8px;font-size:13px;font-weight:700;border-radius:var(--radius-full);transition:all var(--duration-fast) var(--ease-soft-out)}.inspector-nav-btn:hover{color:var(--foreground);background-color:var(--muted)}.inspector-index-text{font-size:11px;font-weight:600;color:var(--muted-foreground);padding:0 4px}.inspector-close-btn{padding:6px 12px;font-size:var(--text-xs);font-weight:600}.ui-inspector-main-layout{display:flex;position:relative;overflow:hidden;flex:1;min-height:0;max-height:calc(90vh - 75px)}.ui-inspector-stage-area{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);overflow-y:auto;transition:all .3s var(--ease-spring)}.ui-view-switcher{display:inline-flex;align-items:center;background-color:var(--muted);border:var(--border-default);border-radius:var(--radius-full);padding:3px;gap:3px;width:fit-content;box-shadow:var(--shadow-xs)}.ui-view-tab-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;font-size:12px;font-weight:600;color:var(--muted-foreground);background:transparent;border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast) var(--ease-soft-out)}.ui-view-tab-btn:hover{color:var(--foreground)}.ui-view-tab-btn.is-active{background-color:var(--card);color:var(--foreground);box-shadow:var(--shadow-xs)}.view-tab-icon{font-size:11px;color:var(--primary);font-weight:700}.inspector-view-pane{display:none;flex:1;min-height:0;flex-direction:column;animation:fadeInPane .22s var(--ease-soft-out)}.inspector-view-pane.is-active{display:flex}@keyframes fadeInPane{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}#pane-code .ui-code-panel{display:flex;flex-direction:column;flex:1;min-height:300px}#pane-code .ui-code-view{flex:1;min-height:240px;max-height:480px}.ui-inspector-sidebar{width:290px;flex-shrink:0;border-left:var(--border-default);background-color:color-mix(in srgb,var(--muted) 38%,var(--card));overflow-y:auto;overflow-x:hidden;transition:width .3s var(--spring-gentle),opacity .2s var(--ease-soft-out),transform .3s var(--spring-gentle)}.ui-inspector-sidebar.is-collapsed{width:0!important;opacity:0!important;border-left-color:transparent!important;pointer-events:none!important;transform:translate(16px)}.inspector-sidebar-inner{width:290px;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-5)}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:var(--border-default)}.sidebar-header-title{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--foreground)}.sidebar-dot{width:6px;height:6px;border-radius:50%;background-color:var(--primary);box-shadow:0 0 6px var(--primary)}.sidebar-close-btn{background:transparent;border:none;color:var(--muted-foreground);cursor:pointer;font-size:12px;padding:3px 6px;border-radius:var(--radius-xs);transition:all var(--duration-fast)}.sidebar-close-btn:hover{color:var(--foreground);background-color:var(--muted)}.sidebar-section{display:flex;flex-direction:column;gap:12px}.sidebar-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}.sidebar-field{display:flex;flex-direction:column;gap:6px}.sidebar-field-label{font-size:11px;font-weight:600;color:var(--foreground)}.playground-segmented{display:inline-flex;align-items:center;background-color:var(--muted);border:var(--border-default);border-radius:var(--radius-xs);padding:2px;gap:2px;width:100%}.playground-segmented--wrap{flex-wrap:wrap}.playground-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;font-size:11px;font-weight:600;color:var(--muted-foreground);background:transparent;border:none;border-radius:calc(var(--radius-xs) - 2px);cursor:pointer;transition:all var(--duration-fast) var(--ease-soft-out);white-space:nowrap}.playground-btn:hover{color:var(--foreground)}.playground-btn.is-active{background-color:var(--card);color:var(--foreground);box-shadow:var(--shadow-xs)}.swatch-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.swatch-lilac{background-color:var(--lilac)}.swatch-sage{background-color:var(--sage)}.swatch-butter{background-color:var(--butter)}.swatch-blush{background-color:var(--blush)}.stage-control-group{display:flex;align-items:center;background-color:var(--muted);border:var(--border-default);border-radius:var(--radius-xs);padding:2px;gap:2px;width:100%}.stage-control-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;font-size:11px;font-weight:600;color:var(--muted-foreground);background:transparent;border:none;border-radius:calc(var(--radius-xs) - 2px);cursor:pointer;transition:all var(--duration-fast) var(--ease-soft-out)}.stage-control-btn:hover{color:var(--foreground)}.stage-control-btn.is-active{background-color:var(--card);color:var(--foreground);box-shadow:var(--shadow-xs)}.sidebar-section--footer{margin-top:auto;padding-top:10px;border-top:var(--border-default)}.sidebar-shortcuts-list{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted-foreground)}.sidebar-shortcut-row{display:flex;justify-content:space-between;align-items:center}.inspector-stage-container{display:flex;flex-direction:column;gap:8px}.ui-inspector-stage-wrapper{display:flex;justify-content:center;align-items:center;width:100%;flex:1}.ui-inspector-stage{position:relative;width:100%;min-height:280px;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle,var(--muted) 12%,transparent 13%);background-size:16px 16px;border:var(--border-default);border-radius:var(--radius-md);padding:var(--space-6);transition:max-width .3s cubic-bezier(.34,1.2,.64,1),background-color var(--duration-base) var(--ease-soft-out);box-sizing:border-box}.ui-inspector-stage>*{margin:auto!important}.ui-inspector-stage.bg-clean{background:var(--card)}.ui-inspector-stage.bg-dark{background:#18151d;border-color:#2f293a}.ui-inspector-stage.viewport-tablet{max-width:580px;box-shadow:0 12px 36px -4px #00000040,0 0 0 1px var(--primary);border-radius:var(--radius-lg)}.ui-inspector-stage.viewport-mobile{max-width:340px;box-shadow:0 16px 48px -4px #00000059,0 0 0 2px var(--primary);border-radius:28px;padding:20px 14px}.ui-inspector-stage.viewport-mobile .ui-button-group,.ui-inspector-stage.viewport-mobile .ui-avatar-group,.ui-inspector-stage.viewport-mobile .ui-tabs-list,.ui-inspector-stage.viewport-mobile .ui-form-group,.ui-inspector-stage.viewport-mobile [style*="display: flex"],.ui-inspector-stage.viewport-mobile [style*="display:flex"]{max-width:100%!important;flex-wrap:wrap!important}.ui-inspector-stage.viewport-mobile .ui-card,.ui-inspector-stage.viewport-mobile .ui-dialog-card,.ui-inspector-stage.viewport-mobile .ui-counter-card,.ui-inspector-stage.viewport-mobile .ui-alert,.ui-inspector-stage.viewport-mobile .ui-input,.ui-inspector-stage.viewport-mobile .ui-combobox{width:100%!important;max-width:100%!important;box-sizing:border-box!important}.ui-inspector-stage.viewport-mobile [style*=grid-template-columns]{grid-template-columns:1fr!important}@media (max-width: 640px){.ui-inspector-stage{padding:20px 12px!important;min-height:200px;max-width:100%!important;overflow-x:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}.ui-inspector-stage .ui-button-group,.ui-inspector-stage .ui-avatar-group,.ui-inspector-stage .ui-tabs-list,.ui-inspector-stage .ui-form-group,.ui-inspector-stage .ui-segmented,.ui-inspector-stage [style*="display: flex"],.ui-inspector-stage [style*="display:flex"]{max-width:100%!important;flex-wrap:wrap!important}.ui-inspector-stage .ui-card,.ui-inspector-stage .ui-dialog-card,.ui-inspector-stage .ui-counter-card,.ui-inspector-stage .ui-alert,.ui-inspector-stage .ui-input,.ui-inspector-stage .ui-combobox,.ui-inspector-stage .ui-slider-container,.ui-inspector-stage .ui-dropzone,.ui-inspector-stage .ui-code-view,.ui-inspector-stage .ui-table-container{width:100%!important;max-width:100%!important;box-sizing:border-box!important}.ui-inspector-stage [style*=grid-template-columns]{grid-template-columns:1fr!important}.ui-inspector-stage>*{max-width:100%!important;box-sizing:border-box!important}}@media (max-width: 480px){.ui-catalog-card{height:auto;min-height:220px;padding:18px 16px}.ui-catalog-card-header{max-width:55%}.ui-catalog-preview-corner{width:45%;height:52%;padding:6px 10px}}.ui-inspector-stage .ui-modal-backdrop,.ui-inspector-stage .ui-drawer-backdrop{z-index:3000!important}.ui-toast-container{z-index:99999!important}.ui-code-panel{display:flex;flex-direction:column;border:var(--border-default);border-radius:var(--radius-sm);background-color:var(--background);overflow:hidden}.ui-code-toolbar{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) var(--space-3);background-color:var(--muted);border-bottom:var(--border-default)}.ui-code-tabs{display:flex;gap:var(--space-1)}.ui-code-tab-btn{display:inline-flex;align-items:center;gap:6px;padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--muted-foreground);background:transparent;border:none;border-radius:var(--radius-xs);cursor:pointer;transition:all var(--duration-fast) var(--ease-soft-out)}.ui-code-tab-btn:hover{color:var(--foreground)}.ui-code-tab-btn.is-active{background-color:var(--card);color:var(--foreground);box-shadow:var(--shadow-xs);transform:translateY(-1px)}.tab-lang-dot{width:6px;height:6px;border-radius:var(--radius-full)}.tab-lang-dot--html{background-color:var(--destructive)}.tab-lang-dot--css{background-color:var(--primary)}.tab-lang-dot--js{background-color:var(--accent)}.ui-code-actions{display:flex;align-items:center;gap:10px}.code-meta-badge{font-size:11px;color:var(--muted-foreground);font-family:var(--font-mono, monospace)}.copy-code-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;font-size:11px;font-weight:600;border-radius:var(--radius-xs)}.copy-icon{width:14px;height:14px}.ui-code-view{margin:0;padding:var(--space-4);font-family:"JetBrains Mono",var(--font-mono, monospace);font-size:12px;line-height:1.65;max-height:270px;overflow-y:auto;color:var(--foreground);background-color:color-mix(in srgb,var(--card) 40%,var(--background));-moz-tab-size:2;tab-size:2}.token-tag{color:var(--destructive);font-weight:600}.token-attr{color:var(--primary);font-weight:500}.token-string{color:var(--secondary)}.token-keyword{color:var(--destructive);font-weight:600}.token-function{color:var(--primary);font-weight:600}.token-comment{color:var(--muted-foreground);font-style:italic;opacity:.8}.token-property{color:var(--primary);font-weight:600}.token-number{color:var(--accent)}.token-selector{color:var(--foreground);font-weight:600}.token-punct{color:var(--muted-foreground)}