*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--brand:#01E46F;--brand-dim:rgba(1,228,111,0.10);--brand-dim-h:rgba(1,228,111,0.16);--g-dark:#05853E;--blue:#0090FF;--blue-dim:rgba(0,144,255,0.12);--amber:#FFC53D;--amber-text:#9A5B00;--amber-dim:rgba(255,197,61,0.18);--red:#E32627;--red-dim:rgba(227,38,39,0.10);--purple:#7C3AED;--purple-dim:rgba(124,58,237,0.12);--side-w:248px;--side-w-collapsed:68px;--sidebar-w:var(--side-w);--topbar-h:60px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-f:999px;--font:"General Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mono:"SF Mono","Fira Code","Cascadia Code",monospace;--transition:0.18s ease}[data-theme=dark]{color-scheme:dark;--ink:#EEF1F5;--bg:#0F1116;--bg-sidebar:#181B21;--bg-surface:#181B21;--bg-elevated:#1F232B;--bg-input:#20242C;--bg-hover:#262B34;--surface:var(--bg-surface);--hover:var(--bg-hover);--grey1:#1F232B;--grey2:#262B34;--border:#2D323C;--border-soft:#252932;--text-1:#EAECF0;--text-2:#A6AEBA;--text-3:#7E8591;--text-primary:var(--text-1);--text-secondary:var(--text-2);--text-muted:var(--text-3);--toggle-bg:#262B34;--toggle-knob:#3A4150;--scrollbar:#2D323C;--sh-card:0 2px 14px 0 rgba(0,0,0,0.45);--card-shadow:var(--sh-card);--g-dark:#35D982;--brand-dim:rgba(1,228,111,0.15);--brand-dim-h:rgba(1,228,111,0.24);--blue:#3BA5FF;--blue-dim:rgba(0,144,255,0.20);--amber:#FFD166;--amber-text:#F0B94A;--amber-dim:rgba(255,197,61,0.16);--red:#FF5B5D;--red-dim:rgba(255,91,93,0.16);--purple:#A78BFA;--purple-dim:rgba(167,139,250,0.18);--input-bg:var(--bg-input)}[data-theme=light]{color-scheme:light;--ink:#0F1D13;--bg:#F5F6FA;--bg-sidebar:#ffffff;--bg-surface:#ffffff;--bg-elevated:#ffffff;--bg-input:#ffffff;--bg-hover:#F0F1F4;--surface:var(--bg-surface);--hover:var(--bg-hover);--grey1:#FAFAFA;--grey2:#F4F4F5;--border:#E8E8EC;--border-soft:#EFEFF2;--text-1:#111111;--text-2:#555555;--text-3:#888888;--text-primary:var(--text-1);--text-secondary:var(--text-2);--text-muted:var(--text-3);--toggle-bg:#E8E8EC;--toggle-knob:#ffffff;--scrollbar:#D5D5D5;--sh-card:2px 3px 16px 0 rgba(193,197,210,0.18);--card-shadow:var(--sh-card);--g-dark:#05853E;--input-bg:var(--bg-input)}body,html{height:100%}body{background:var(--bg);color:var(--text-primary);font-family:var(--font);font-size:14px;line-height:1.5;display:flex}.brand-token,.meta-bar,.nav-item,.sidebar,.swatch-meta,.usage-block,body{transition:background var(--transition),border-color var(--transition),color var(--transition)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:3px}.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;overflow-y:auto}.sidebar-logo{padding:14px 12px 12px;display:flex;align-items:center;gap:8px;margin-bottom:4px}.logo-icon{width:24px;height:24px;flex-shrink:0}.logo-text{display:flex;flex-direction:column}.logo-name{font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:-.1px;line-height:1.2}.logo-sub{font-size:11px;color:var(--text-muted);font-weight:400}.sidebar-nav{padding:4px 0 24px;flex:1}.nav-section{margin-bottom:4px}.nav-section-toggle{display:flex;align-items:center;justify-content:space-between;padding:7px 16px;font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:color .1s}.nav-section-toggle:hover{color:var(--text-primary)}.nav-chevron{width:14px;height:14px;flex-shrink:0;transition:transform .18s ease;opacity:.5}.nav-section.collapsed .nav-chevron{transform:rotate(-90deg)}.nav-section-items{overflow:hidden;transition:max-height .2s ease}.nav-section.collapsed .nav-section-items{max-height:0!important}.nav-item{display:flex;align-items:center;gap:10px;padding:6px 16px 6px 18px;font-size:13px;font-weight:400;color:var(--text-secondary);cursor:pointer;text-decoration:none;transition:color .1s,background .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-item.active,.nav-item:hover{color:var(--text-primary);background:var(--bg-hover)}.nav-item.active{font-weight:500}.nav-icon{width:15px;height:15px;flex-shrink:0;opacity:.6}.nav-item.active .nav-icon,.nav-item:hover .nav-icon{opacity:1}.nav-divider{height:1px;background:var(--border-soft);margin:8px 16px}.sidebar-footer{padding:12px 12px 16px;border-top:1px solid var(--border-soft);display:flex;align-items:center;justify-content:space-between}.sidebar-version{font-size:11px;color:var(--text-muted);font-family:var(--mono)}.sidebar-tag{font-size:10px;font-weight:500;color:var(--brand);background:var(--brand-dim);border-radius:4px;padding:2px 6px;letter-spacing:.02em}.main{flex:1;min-width:0;height:100vh;overflow-y:auto}.meta-bar{justify-content:space-between;padding:0 48px;height:44px;border-bottom:1px solid var(--border-soft);font-size:12px;color:var(--text-muted);font-family:var(--mono);position:sticky;top:0;background:var(--bg);z-index:10}.meta-bar,.meta-breadcrumb{display:flex;align-items:center}.meta-breadcrumb{gap:8px}.meta-breadcrumb span{color:var(--text-muted)}.meta-breadcrumb .sep{color:#2a2a2a}.meta-badge{font-size:11px;color:var(--text-muted);font-family:var(--mono)}.content{padding:56px 48px 80px;max-width:1200px;margin:0 auto;width:100%}.page-title{font-size:32px;font-weight:600;letter-spacing:-.5px;color:var(--text-primary);margin-bottom:10px;line-height:1.1}.page-desc{font-size:15px;color:var(--text-secondary);max-width:560px;line-height:1.6}.color-family{margin-bottom:56px}.color-family-header{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border-soft)}.color-family-name{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:6px;letter-spacing:-.2px}.color-family-desc{font-size:13px;color:var(--text-secondary);line-height:1.5}.color-scale-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;margin-top:20px}.color-scale-label:first-of-type{margin-top:0}.swatches{display:flex;gap:4px;flex-wrap:nowrap}.swatch{flex:1;min-width:0;cursor:pointer;position:relative;border-radius:6px;overflow:hidden}.swatch-color{height:56px;width:100%;border-radius:6px 6px 0 0;transition:transform .1s}.swatch:hover .swatch-color{transform:scaleY(1.04)}.swatch-meta{background:var(--bg-surface);border:1px solid var(--border-soft);border-top:none;border-radius:0 0 6px 6px;padding:7px 8px}.swatch-step{font-size:10px;font-weight:600;color:var(--text-secondary);margin-bottom:2px}.swatch-hex{font-family:var(--mono);font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-strip{display:flex;gap:12px;margin-bottom:16px}.brand-token{display:flex;align-items:center;gap:14px;background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:8px;padding:14px 18px;flex:1}.brand-token-dot{width:36px;height:36px;border-radius:50%;flex-shrink:0;border:1px solid var(--border)}.brand-token-info{display:flex;flex-direction:column;gap:2px}.brand-token-name{font-size:13px;font-weight:500;color:var(--text-primary)}.brand-token-hex{font-family:var(--mono);font-size:12px;color:var(--text-secondary)}.brand-token-use{font-size:11px;color:var(--text-muted);margin-top:2px}.usage-block{background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:8px;padding:16px 20px;margin-top:20px}.usage-block-label{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}.usage-list{list-style:none;display:flex;flex-direction:column;gap:6px}.usage-list li{font-size:13px;color:var(--text-secondary);display:flex;align-items:flex-start;gap:8px}.usage-list li:before{content:"·";color:var(--text-muted);flex-shrink:0}.section-divider{border:none;border-top:1px solid var(--border-soft);margin:48px 0}.theme-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.theme-toggle-label{font-size:11px;color:var(--text-muted);font-family:var(--font);letter-spacing:.01em;transition:color var(--transition)}.toggle-track{width:36px;height:20px;border-radius:999px;background:var(--toggle-bg);border:1px solid var(--border);position:relative;transition:background var(--transition),border-color var(--transition);flex-shrink:0}.toggle-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--toggle-knob);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s cubic-bezier(.4,0,.2,1),background .2s}[data-theme=dark] .toggle-knob{transform:translateX(16px);background:var(--brand)}[data-theme=light] .toggle-knob{transform:translateX(0);background:#555555}.copied-tip{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;padding:8px 16px;font-size:12px;color:var(--brand);font-family:var(--mono);pointer-events:none;opacity:0;transition:opacity .2s;z-index:100}.copied-tip.show{opacity:1}.type-specimen{margin-bottom:56px;padding:36px 40px;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px}.specimen-top{display:flex;align-items:center;gap:12px;margin-bottom:20px}.specimen-font-name{font-size:16px;font-weight:600;color:var(--text-primary);font-family:"General Sans",var(--font)}.specimen-tag{font-size:10px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);font-family:var(--mono);background:var(--bg-hover);padding:2px 8px;border-radius:4px}.specimen-glyph{font-size:96px;line-height:1;font-weight:700;color:var(--text-primary);letter-spacing:-3px;margin-bottom:16px}.specimen-alphabet,.specimen-glyph{font-family:"General Sans",var(--font)}.specimen-alphabet{font-size:14px;line-height:2;color:var(--text-secondary);margin-bottom:28px;word-break:break-all}.specimen-weights{display:flex;gap:40px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--border-soft)}.weight-chip-sample{font-size:20px;color:var(--text-primary);font-family:"General Sans",var(--font);line-height:1.2;margin-bottom:4px}.weight-chip-label{font-size:11px;font-family:var(--mono);color:var(--text-muted)}.type-scale-section{margin-bottom:56px}.type-scale-header{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border-soft)}.type-scale-name{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:6px;letter-spacing:-.2px}.type-scale-desc{font-size:13px;color:var(--text-secondary);line-height:1.5;max-width:520px}.type-row{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--border-soft)}.type-row:last-child{border-bottom:none}.type-token{display:inline-block;color:var(--brand);background:var(--brand-dim);padding:2px 7px;border-radius:4px;margin-bottom:6px}.type-row-specs,.type-token{font-family:var(--mono);font-size:11px}.type-row-specs{color:var(--text-muted);line-height:2}.type-preview{font-family:"General Sans",var(--font);color:var(--text-primary);font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logo-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.logo-grid,.logo-grid-2{display:grid;gap:16px;margin-bottom:48px}.logo-grid-2{grid-template-columns:repeat(2,1fr)}.logo-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:48px}.logo-card{border-radius:12px;overflow:hidden;border:1px solid var(--border)}.logo-canvas{display:flex;align-items:center;justify-content:center;padding:48px 40px;min-height:160px}.logo-canvas.bg-white{background:#ffffff}.logo-canvas.bg-black{background:#111111}.logo-canvas.bg-gray{background:#f4f4f4}.logo-canvas.bg-brand{background:var(--brand)}.logo-canvas.bg-surface,.logo-card-label{background:var(--bg-surface)}.logo-card-label{padding:10px 14px;font-size:11px;font-weight:500;color:var(--text-secondary);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.logo-card-label .logo-card-tag{font-size:10px;color:var(--text-muted);font-family:var(--mono)}.logo-mark-inline{display:flex;align-items:center;gap:12px}.logo-wordmark{font-family:"General Sans",var(--font);font-weight:700;font-size:28px;letter-spacing:-.5px;line-height:1}.logo-wordmark.on-dark{color:#ffffff}.logo-wordmark.on-brand,.logo-wordmark.on-light{color:#111111}.logo-section-divider{border:none;border-top:1px solid var(--border);margin:8px 0 40px}.logo-usage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:48px}.logo-usage-card{border-radius:10px;overflow:hidden;border:1px solid var(--border)}.logo-usage-canvas{display:flex;align-items:center;justify-content:center;padding:32px 24px;background:var(--bg-surface);min-height:120px;position:relative}.logo-usage-canvas.do:after{content:"✓ Do";color:var(--brand)}.logo-usage-canvas.do:after,.logo-usage-canvas.dont:after{position:absolute;top:8px;right:10px;font-size:10px;font-weight:600}.logo-usage-canvas.dont:after{content:"✗ Don't";color:#f87171}.logo-dont-overlay{position:relative}.logo-dont-overlay:before{content:"";position:absolute;inset:-4px;border:1.5px dashed rgba(248,113,113,.5);border-radius:6px;pointer-events:none}.logo-usage-desc{padding:10px 12px;font-size:11px;color:var(--text-secondary);border-top:1px solid var(--border);background:var(--bg-surface);line-height:1.5}.clearspace-diagram{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:48px;display:flex;align-items:center;justify-content:center;margin-bottom:48px}.clearspace-inner{position:relative;display:inline-flex;padding:24px;border:1.5px dashed rgba(1,228,111,.4);border-radius:4px}.clearspace-arrow{position:absolute;font-size:10px;font-family:var(--mono);color:var(--brand);font-weight:500}.clearspace-arrow.top{top:-18px;left:50%;transform:translateX(-50%)}.clearspace-arrow.bottom{bottom:-18px;left:50%;transform:translateX(-50%)}.clearspace-arrow.left{left:-28px;top:50%;transform:translateY(-50%)}.clearspace-arrow.right{right:-28px;top:50%;transform:translateY(-50%)}.icon-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.icon-search-wrap{position:relative;flex:1;min-width:200px}.icon-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-muted);pointer-events:none}.icon-search{width:100%;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;padding:9px 36px;font-size:13px;color:var(--text-primary);font-family:var(--font);outline:none;transition:border-color var(--transition)}.icon-search::-moz-placeholder{color:var(--text-muted)}.icon-search::placeholder{color:var(--text-muted)}.icon-search:focus{border-color:var(--brand)}.icon-search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:16px;line-height:1;padding:2px 4px;display:none}.icon-search-clear:hover{color:var(--text-primary)}.icon-stats{font-size:12px;color:var(--text-muted);white-space:nowrap;flex-shrink:0}.icon-cats{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:20px;scrollbar-width:none;-ms-overflow-style:none}.icon-cats::-webkit-scrollbar{display:none}.icon-cat-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:100px;border:1px solid var(--border);background:var(--bg-surface);font-size:12px;color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:all var(--transition);flex-shrink:0}.icon-cat-chip:hover{border-color:var(--text-muted);color:var(--text-primary)}.icon-cat-chip.active{background:var(--brand-dim);border-color:rgba(0,217,100,.3);color:var(--brand);font-weight:500}.icon-cat-chip .chip-count{font-size:10px;opacity:.65}.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-surface);cursor:pointer;transition:border-color var(--transition),background var(--transition),transform var(--transition),box-shadow var(--transition);min-height:80px;overflow:visible}.icon-card:hover{border-color:rgba(0,217,100,.45);background:var(--bg-hover);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.12)}.icon-card:active{transform:translateY(0) scale(.97);box-shadow:none}.icon-card-overlay{position:absolute;top:-10px;right:-10px;width:28px;height:28px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .15s cubic-bezier(.34,1.56,.64,1);pointer-events:none;box-shadow:0 2px 8px rgba(0,217,100,.4);z-index:2}.icon-card:hover .icon-card-overlay{opacity:1;transform:scale(1)}.icon-card-overlay svg{width:12px;height:12px;flex-shrink:0;overflow:visible}.icon-card-overlay svg *{fill:none!important;stroke:#ffffff!important;stroke-width:2px!important;stroke-linecap:round!important;stroke-linejoin:round!important}.icon-card-overlay-label{display:none}.icon-card.copied{border-color:var(--brand);animation:icon-copied-flash .5s ease forwards}.icon-card.copied .icon-card-overlay{opacity:1;transform:scale(1)}@keyframes icon-copied-flash{0%{box-shadow:0 0 0 3px rgba(0,217,100,.25)}60%{box-shadow:0 0 0 6px rgba(0,217,100,.08)}to{box-shadow:none}}.icon-card svg{width:24px;height:24px;flex-shrink:0}[data-theme=dark] .icon-card>svg circle,[data-theme=dark] .icon-card>svg path,[data-theme=dark] .icon-card>svg polygon,[data-theme=dark] .icon-card>svg polyline,[data-theme=dark] .icon-card>svg rect{fill:#ffffff!important}[data-theme=light] .icon-card>svg circle,[data-theme=light] .icon-card>svg path,[data-theme=light] .icon-card>svg polygon,[data-theme=light] .icon-card>svg polyline,[data-theme=light] .icon-card>svg rect{fill:#202020!important}.icon-card-name{font-size:10px;color:var(--text-muted);text-align:center;word-break:break-all;line-height:1.3;max-width:100%}.icon-card:hover .icon-card-name{color:var(--text-secondary)}.icon-empty{grid-column:1/-1;padding:64px 32px;text-align:center;color:var(--text-muted);font-size:14px}.icon-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--text-primary);color:var(--bg);font-size:12px;font-weight:500;padding:8px 16px;border-radius:100px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9999;white-space:nowrap}.icon-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.hamburger{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--bg-surface);cursor:pointer;flex-shrink:0;transition:background var(--transition)}.hamburger:hover{background:var(--bg-hover)}.hamburger svg{width:18px;height:18px;color:var(--text-secondary)}.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}@media (min-width:1600px){body{justify-content:center}.sidebar{position:sticky;flex-shrink:0}}@media (max-width:1024px){.content{padding:40px 28px 64px}.meta-bar{padding:0 28px}.type-specimen{padding:28px}.logo-grid-4{grid-template-columns:repeat(2,1fr)}.specimen-glyph{font-size:72px}}@media (max-width:768px){:root{--sidebar-w:280px}.hamburger{display:flex}.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:100;transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s ease;height:100%}.sidebar.sidebar-open{transform:translateX(0);box-shadow:8px 0 32px rgba(0,0,0,.35)}.sidebar-overlay{display:block;opacity:0;pointer-events:none;transition:opacity .26s ease}.sidebar-overlay.show{opacity:1;pointer-events:auto}.main{width:100%}.meta-bar{padding:0 16px}.meta-badge{display:none}.content{padding:24px 16px 56px}.page-title{font-size:22px;letter-spacing:-.3px}.page-desc{font-size:13px}.section-title{font-size:15px}.section-divider{margin:32px 0}.brand-strip{flex-direction:column;gap:10px}.brand-token{flex:none;width:100%}.color-family{margin-bottom:40px}.color-family-name{font-size:16px}.usage-block{padding:14px 16px}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.swatch{min-width:0;flex:none}.usage-list li{flex-direction:column;gap:2px}.usage-list li:before{display:none}.usage-list li strong:first-child{display:block;font-size:13px}.usage-list li{padding-left:12px;border-left:2px solid var(--border);gap:3px}.type-specimen{padding:22px 18px;margin-bottom:36px}.specimen-glyph{font-size:56px;letter-spacing:-1px;margin-bottom:12px}.specimen-alphabet{font-size:13px;margin-bottom:20px}.specimen-weights{gap:24px}.weight-chip-sample{font-size:16px}.type-row{grid-template-columns:1fr;gap:8px;padding:14px 0}.type-row-specs{line-height:1.8}.type-scale-section{margin-bottom:40px}.type-scale-header{margin-bottom:16px}.type-scale-name{font-size:16px}.type-scale-desc{font-size:13px}.logo-grid,.logo-grid-2{grid-template-columns:1fr;gap:12px}.logo-grid-4,.logo-usage-grid{grid-template-columns:repeat(2,1fr);gap:10px}.logo-canvas{padding:32px 24px;min-height:120px}.clearspace-diagram{padding:24px 16px}.clearspace-inner{padding:16px}.icon-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px}.icon-toolbar{flex-wrap:wrap;gap:8px}.icon-search-wrap{min-width:0;flex:1 1 100%}.icon-stats{flex:1;text-align:right}}@media (max-width:480px){.content{padding:20px 12px 48px}.page-title{font-size:20px}.swatches{grid-template-columns:repeat(4,1fr)}.brand-token{padding:12px 14px;gap:10px}.brand-token-dot{width:28px;height:28px}.specimen-glyph{font-size:44px}.specimen-weights{gap:16px}.logo-grid-4,.logo-usage-grid{grid-template-columns:1fr}.logo-canvas{padding:24px 16px;min-height:100px}.icon-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:5px}.icon-card{padding:12px 6px 10px;min-height:70px}.icon-card-name{font-size:9px}}.shadow-group{background:#f7f7f7;border:1px solid #e8e8e8;border-radius:20px;padding:40px 36px 32px;margin-bottom:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}[data-theme=dark] .shadow-group{background:#191919;border-color:#252525}.shadow-item{display:flex;flex-direction:column;align-items:center;gap:24px}.shadow-box{width:100%;aspect-ratio:1;border-radius:16px;background:#ffffff;flex-shrink:0}[data-theme=dark] .shadow-box{background:#2a2a2a}.shadow-name{font-size:12px;color:var(--text-secondary);text-align:center;font-weight:400}.shadow-meta{padding:14px 16px}.shadow-token{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--brand);background:var(--brand-dim);padding:2px 7px;border-radius:4px;margin-bottom:6px}.shadow-value{font-family:var(--mono);font-size:10px;color:var(--text-muted);line-height:1.6;margin-top:6px}.shadow-desc{font-size:12px;color:var(--text-secondary);margin-top:4px}.blur-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:48px}.blur-card{border-radius:12px;overflow:hidden;border:1px solid var(--border)}.blur-preview{position:relative;height:130px;background:linear-gradient(135deg,var(--brand) 0,#0070f3 50%,#9333ea 100%);display:flex;align-items:center;justify-content:center}.blur-pane{width:80px;height:64px;border-radius:10px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3)}.blur-meta{padding:14px 16px;background:var(--bg-surface);border-top:1px solid var(--border)}.spacing-scale{display:flex;flex-direction:column;gap:4px;margin-bottom:48px}.spacing-row{display:grid;grid-template-columns:80px 56px 1fr;align-items:center;gap:16px;padding:8px 0;border-bottom:1px solid var(--border-soft)}.spacing-row:last-child{border-bottom:none}.spacing-token{color:var(--brand)}.spacing-px,.spacing-token{font-family:var(--mono);font-size:11px}.spacing-px{color:var(--text-muted)}.spacing-bar,.spacing-bar-wrap{display:flex;align-items:center}.spacing-bar{height:20px;background:var(--brand-dim);border:1px solid rgba(1,228,111,.25);border-radius:3px;justify-content:flex-end;padding-right:6px;min-width:4px}.breakpoint-table{width:100%;border-collapse:collapse;margin-bottom:48px;font-size:13px}.breakpoint-table th{text-align:left;padding:10px 14px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border)}.breakpoint-table td{padding:12px 14px;border-bottom:1px solid var(--border-soft);color:var(--text-secondary);vertical-align:middle}.breakpoint-table tr:last-child td{border-bottom:none}.breakpoint-table td:first-child{color:var(--text-primary);font-weight:500}.bp-token{font-family:var(--mono);font-size:11px;color:var(--brand);background:var(--brand-dim);padding:2px 7px;border-radius:4px}.bp-bar-row{display:flex;align-items:center;gap:6px}.bp-bar{height:6px;border-radius:3px;background:var(--brand-dim);border:1px solid rgba(1,228,111,.25)}.column-demo{border-radius:12px;overflow:hidden;border:1px solid var(--border);margin-bottom:48px}.column-demo-header{padding:12px 16px;background:var(--bg-surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.column-demo-label{font-size:12px;font-weight:500;color:var(--text-secondary)}.column-demo-body{padding:20px 16px;background:var(--bg)}.col-grid{display:flex;gap:8px}.col-unit{flex:1;height:48px;border-radius:4px;background:rgba(1,228,111,.08);border:1px dashed rgba(1,228,111,.3);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--brand);font-family:var(--mono)}@media (max-width:768px){.blur-grid,.shadow-group{grid-template-columns:repeat(2,1fr)}.spacing-row{grid-template-columns:64px 48px 1fr;gap:10px}.breakpoint-table td:nth-child(4),.breakpoint-table th:nth-child(4){display:none}}@media (max-width:480px){.blur-grid{grid-template-columns:1fr}.breakpoint-table td:nth-child(3),.breakpoint-table th:nth-child(3){display:none}}.section-block{margin-bottom:80px}.section-heading{font-size:19px;font-weight:600;color:var(--text-primary);letter-spacing:-.25px;margin-bottom:6px;padding-left:14px;position:relative}.section-heading:before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;background:var(--brand);border-radius:2px}.section-sub{font-size:13.5px;color:var(--text-secondary);line-height:1.65;max-width:580px;margin-bottom:28px;padding-left:14px}.comp-surface{background:var(--bg-surface);border:1px solid var(--border);border-radius:16px;padding:44px 40px}.comp-label{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.page-header{margin-bottom:56px;padding-bottom:40px;border-bottom:1px solid var(--border-soft)}.ds-demo-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}.ds-demo-block{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:36px 32px;margin-bottom:16px}.ds-demo-block-label{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:24px}.ds-demo-dark{background:#111111}.btn-variant-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.btn-variant-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--bg-surface)}.btn-variant-card-preview{min-height:120px;display:flex;align-items:center;justify-content:center;padding:28px 24px;background:var(--bg)}.btn-variant-card-preview--primary{background:linear-gradient(135deg,rgba(1,228,111,.06) 0,var(--bg) 60%)}.btn-variant-card-meta{padding:18px 20px 20px;border-top:1px solid var(--border)}.btn-variant-card-name{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:6px;letter-spacing:-.1px}.btn-variant-card-desc{font-size:12px;color:var(--text-secondary);line-height:1.55;margin-bottom:12px}.btn-variant-card-token code{font-family:var(--mono);font-size:11px;color:var(--brand);background:var(--brand-dim);padding:2px 7px;border-radius:5px}.btn-size-showcase{display:flex;flex-direction:column;gap:0}.btn-size-row{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--border-soft);flex-wrap:wrap}.btn-size-spec{width:140px;flex-shrink:0}.btn-size-name{font-size:13px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:6px}.btn-size-name,.btn-size-px{font-family:var(--mono);margin-bottom:2px}.btn-size-px{font-size:12px;color:var(--text-muted)}.btn-size-use{font-size:11.5px;color:var(--text-secondary)}.btn-size-default-badge{font-family:"General Sans",var(--font);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--brand-dim);color:var(--brand);border-radius:4px;padding:1px 5px}.btn-states-grid{display:grid;grid-template-columns:120px repeat(5,1fr);gap:0;align-items:center}.btn-states-grid--4col{grid-template-columns:repeat(4,auto);justify-content:start;gap:0 32px}.btn-states-col-head{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);padding:0 0 16px;text-align:center}.btn-states-row-label{font-size:12px;font-weight:500;color:var(--text-secondary);padding:14px 0}.btn-states-cell,.btn-states-row-label{border-top:1px solid var(--border-soft)}.btn-states-cell{display:flex;justify-content:center;align-items:center;padding:14px 8px}.btn-states-grid--4col .btn-states-cell{border-top:none;padding:10px 8px}.btn-states-grid--4col .btn-states-col-head{padding-bottom:12px}.btn-icon-positions-grid{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}.btn-icon-positions-item{display:flex;flex-direction:column;align-items:center;gap:10px}.btn-icon-label{font-size:11px;color:var(--text-muted);font-weight:500;text-align:center}@media (max-width:900px){.btn-variant-cards{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.btn-variant-cards{grid-template-columns:1fr}.btn-states-grid{grid-template-columns:80px repeat(5,1fr)}.btn-states-grid .btn-states-cell:nth-child(9n+5),.btn-states-grid .btn-states-col-head:nth-child(5){display:none}.btn-size-spec{width:100px}}.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:"General Sans",var(--font);font-weight:500;border:1.5px solid transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease,box-shadow .15s ease;white-space:nowrap;text-decoration:none;line-height:1;position:relative;letter-spacing:-.01em}.ds-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.ds-btn svg{flex-shrink:0}.ds-btn-sm{height:36px;padding:0 14px;font-size:13px;border-radius:8px}.ds-btn-md{height:40px;padding:0 18px;font-size:14px;border-radius:9px}.ds-btn-lg{height:44px;padding:0 20px}.ds-btn-lg,.ds-btn-xl{font-size:15px;border-radius:10px;gap:8px}.ds-btn-xl{height:48px;padding:0 22px}.ds-btn-2xl{height:60px;padding:0 28px;font-size:17px;border-radius:12px;gap:10px}.ds-btn-icon-sm{width:36px;padding:0}.ds-btn-icon-md{width:40px;padding:0}.ds-btn-icon-lg{width:44px;padding:0}.ds-btn-icon-xl{width:48px;padding:0}.ds-btn-icon-2xl{width:60px;padding:0}.ds-btn-primary{background:var(--brand);border-color:var(--brand);color:#111111}.ds-btn-primary:hover{background:#00c45b;border-color:#00c45b}.ds-btn-primary:active{background:#00b351;border-color:#00b351}.ds-btn-primary.disabled,.ds-btn-primary:disabled{background:rgba(1,228,111,.3);border-color:transparent;color:rgba(17,17,17,.45);cursor:not-allowed;pointer-events:none}.ds-btn-secondary{background:transparent;border-color:var(--border);color:var(--text-primary)}.ds-btn-secondary:hover{border-color:var(--text-muted)}.ds-btn-secondary:active,.ds-btn-secondary:hover{background:var(--bg-hover)}.ds-btn-secondary.disabled,.ds-btn-secondary:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ds-btn-tertiary-color{background:transparent;border-color:transparent;color:var(--brand)}.ds-btn-tertiary-color:hover{background:rgba(1,228,111,.1)}.ds-btn-tertiary-color:active{background:rgba(1,228,111,.15)}.ds-btn-tertiary-color.disabled,.ds-btn-tertiary-color:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ds-btn-tertiary-gray{background:transparent;border-color:transparent;color:var(--text-secondary)}.ds-btn-tertiary-gray:hover{background:var(--bg-hover);color:var(--text-primary)}.ds-btn-tertiary-gray:active{background:var(--bg-hover)}.ds-btn-tertiary-gray.disabled,.ds-btn-tertiary-gray:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ds-btn-link-color{background:transparent;border-color:transparent;color:var(--brand);padding-left:4px;padding-right:4px;height:auto;text-decoration:underline;text-underline-offset:3px}.ds-btn-link-color:hover{color:#00b351}.ds-btn-link-color.disabled,.ds-btn-link-color:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ds-btn-link-gray{background:transparent;border-color:transparent;color:var(--text-secondary);padding-left:4px;padding-right:4px;height:auto;text-decoration:underline;text-underline-offset:3px}.ds-btn-link-gray:hover{color:var(--text-primary)}.ds-btn-link-gray.disabled,.ds-btn-link-gray:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ds-btn-destructive{background:#ef4444;border-color:#ef4444;color:#ffffff}.ds-btn-destructive:hover{background:#dc2626;border-color:#dc2626}.ds-btn-destructive:active{background:#b91c1c;border-color:#b91c1c}.ds-btn-destructive.disabled,.ds-btn-destructive:disabled{background:rgba(239,68,68,.35);border-color:transparent;color:rgba(255,255,255,.5);cursor:not-allowed;pointer-events:none}.ds-btn-destructive-secondary{background:transparent;border-color:rgba(239,68,68,.45);color:#ef4444}.ds-btn-destructive-secondary:hover{background:rgba(239,68,68,.08);border-color:#ef4444}.ds-btn-destructive-tertiary{background:transparent;border-color:transparent;color:#ef4444}.ds-btn-destructive-tertiary:hover{background:rgba(239,68,68,.08)}.ds-btn-loading{pointer-events:none}.ds-btn-loading .ds-btn-text{opacity:0}.ds-btn-spinner{position:absolute;width:14px;height:14px;border:2px solid;border-top:2px solid transparent;border-radius:50%;animation:ds-spin .7s linear infinite;opacity:.7}@keyframes ds-spin{to{transform:rotate(1turn)}}.ds-btn-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}.ds-btn-primary .ds-btn-dot{background:rgba(17,17,17,.55)}.ds-btn-destructive .ds-btn-dot{background:rgba(255,255,255,.6)}.btn-variant-table{width:100%;border-collapse:collapse;margin-bottom:48px}.btn-variant-table th{text-align:left;padding:10px 16px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border)}.btn-variant-table td{padding:16px;border-bottom:1px solid var(--border-soft);vertical-align:middle}.btn-variant-table tr:last-child td{border-bottom:none}.btn-variant-table td:first-child{font-size:13px;font-weight:500;color:var(--text-primary);width:160px}.btn-variant-table td:nth-child(2){font-size:12px;color:var(--text-secondary)}@media (max-width:768px){.ds-demo-block{padding:20px 16px}.btn-variant-table td:nth-child(2),.btn-variant-table th:nth-child(2){display:none}.ds-btn-2xl{height:52px;font-size:15px}}.btn-group{display:inline-flex;align-items:center}.btn-group .ds-btn{border-radius:0;margin-left:-1.5px;position:relative;z-index:0}.btn-group .ds-btn:first-child{margin-left:0}.btn-grp-leading{border-radius:9px 0 0 9px!important}.btn-grp-trailing{border-radius:0 9px 9px 0!important}.btn-grp-middle{border-radius:0!important}.ds-btn-sm.btn-grp-leading,.ds-btn-sm.btn-grp-trailing{border-radius:8px}.ds-btn-lg.btn-grp-leading,.ds-btn-lg.btn-grp-trailing,.ds-btn-xl.btn-grp-leading,.ds-btn-xl.btn-grp-trailing{border-radius:10px}.ds-btn-sm.btn-grp-leading{border-radius:8px 0 0 8px!important}.ds-btn-sm.btn-grp-trailing{border-radius:0 8px 8px 0!important}.ds-btn-lg.btn-grp-leading{border-radius:10px 0 0 10px!important}.ds-btn-lg.btn-grp-trailing{border-radius:0 10px 10px 0!important}.ds-btn-xl.btn-grp-leading{border-radius:10px 0 0 10px!important}.ds-btn-xl.btn-grp-trailing{border-radius:0 10px 10px 0!important}.btn-group .btn-grp-active{background:var(--brand-dim)!important;border-color:rgba(0,217,100,.3)!important;color:var(--brand)!important;z-index:1}.btn-group .ds-btn:hover:not(:disabled){z-index:2}.btn-grp-icon-only{width:40px;padding:0}.ds-btn-sm.btn-grp-icon-only{width:36px}.ds-btn-lg.btn-grp-icon-only{width:44px}.btn-stepper{display:inline-flex;align-items:center}.btn-stepper .ds-btn{border-radius:0;margin-left:-1.5px}.btn-stepper .ds-btn:first-child{margin-left:0;border-radius:9px 0 0 9px!important}.btn-stepper .ds-btn:last-child{border-radius:0 9px 9px 0!important}.btn-step-val{display:flex;align-items:center;justify-content:center;height:40px;min-width:44px;padding:0 6px;font-size:14px;font-weight:600;font-family:"General Sans",var(--font);color:var(--text-primary);background:var(--bg-surface);border-top:1.5px solid var(--border);border-bottom:1.5px solid var(--border);border-left:none;border-right:none;letter-spacing:-.01em}.btn-stepper-sm .btn-step-val{height:36px;font-size:13px;min-width:36px}@media (max-width:480px){.btn-group{flex-wrap:nowrap}}.ds-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:500;font-family:"General Sans",var(--font);letter-spacing:-.01em;line-height:1;white-space:nowrap;border:1px solid transparent;vertical-align:middle}.ds-badge-sm{height:18px;padding:0 6px;font-size:11px;border-radius:5px;gap:4px}.ds-badge-lg{height:26px;padding:0 10px;font-size:13px;border-radius:7px;gap:6px}.ds-badge-dot:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}.ds-badge-sm.ds-badge-dot:before{width:5px;height:5px}.ds-badge-brand.ds-badge-solid{background:var(--brand);color:#111111;border-color:var(--brand)}.ds-badge-brand.ds-badge-subtle{background:rgba(1,228,111,.12);color:var(--brand);border-color:rgba(1,228,111,.2)}.ds-badge-brand.ds-badge-outline{background:transparent;color:var(--brand);border-color:rgba(1,228,111,.4)}.ds-badge-grey.ds-badge-solid{background:var(--text-secondary);color:var(--bg);border-color:transparent}.ds-badge-grey.ds-badge-subtle{background:rgba(141,141,141,.12);color:var(--text-secondary);border-color:rgba(141,141,141,.2)}.ds-badge-grey.ds-badge-outline{background:transparent;color:var(--text-secondary);border-color:var(--border)}.ds-badge-red.ds-badge-solid{background:#ef4444;color:#ffffff;border-color:#ef4444}.ds-badge-red.ds-badge-subtle{background:rgba(239,68,68,.1);color:#f87171;border-color:rgba(239,68,68,.2)}.ds-badge-red.ds-badge-outline{background:transparent;color:#f87171;border-color:rgba(239,68,68,.4)}.ds-badge-orange.ds-badge-solid{background:#f97316;color:#ffffff;border-color:#f97316}.ds-badge-orange.ds-badge-subtle{background:rgba(249,115,22,.1);color:#fb923c;border-color:rgba(249,115,22,.2)}.ds-badge-orange.ds-badge-outline{background:transparent;color:#fb923c;border-color:rgba(249,115,22,.4)}.ds-badge-yellow.ds-badge-solid{background:#eab308;color:#111111;border-color:#eab308}.ds-badge-yellow.ds-badge-subtle{background:rgba(234,179,8,.12);color:#ca8a04;border-color:rgba(234,179,8,.25)}.ds-badge-yellow.ds-badge-outline{background:transparent;color:#ca8a04;border-color:rgba(234,179,8,.45)}[data-theme=dark] .ds-badge-yellow.ds-badge-subtle{color:#facc15}[data-theme=dark] .ds-badge-yellow.ds-badge-outline{color:#facc15;border-color:rgba(234,179,8,.35)}.ds-badge-blue.ds-badge-solid{background:#3b82f6;color:#ffffff;border-color:#3b82f6}.ds-badge-blue.ds-badge-subtle{background:rgba(59,130,246,.1);color:#60a5fa;border-color:rgba(59,130,246,.2)}.ds-badge-blue.ds-badge-outline{background:transparent;color:#60a5fa;border-color:rgba(59,130,246,.4)}.ds-badge-purple.ds-badge-solid{background:#8b5cf6;color:#ffffff;border-color:#8b5cf6}.ds-badge-purple.ds-badge-subtle{background:rgba(139,92,246,.1);color:#a78bfa;border-color:rgba(139,92,246,.2)}.ds-badge-purple.ds-badge-outline{background:transparent;color:#a78bfa;border-color:rgba(139,92,246,.4)}.ds-badge-pink.ds-badge-solid{background:#ec4899;color:#ffffff;border-color:#ec4899}.ds-badge-pink.ds-badge-subtle{background:rgba(236,72,153,.1);color:#f472b6;border-color:rgba(236,72,153,.2)}.ds-badge-pink.ds-badge-outline{background:transparent;color:#f472b6;border-color:rgba(236,72,153,.4)}.badge-color-grid{display:flex;flex-direction:column;gap:12px}.badge-color-row{display:flex;align-items:center;gap:12px}.badge-color-label{font-size:12px;font-weight:500;color:var(--text-secondary);width:56px;flex-shrink:0}.badge-samples{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ds-badge-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;font-size:11px;font-weight:700;font-family:"General Sans",var(--font);letter-spacing:-.01em;line-height:1}.ds-badge-count-brand{background:var(--brand);color:#111111}.ds-badge-count-red{background:#ef4444;color:#ffffff}.ds-badge-count-grey{background:rgba(141,141,141,.2);color:var(--text-secondary)}.ds-badge-dot-only{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}.ds-badge-dot-brand{background:var(--brand);box-shadow:0 0 0 2px rgba(1,228,111,.25)}.ds-badge-dot-red{background:#ef4444;box-shadow:0 0 0 2px rgba(239,68,68,.25)}@media (max-width:480px){.badge-color-row{flex-wrap:wrap}.badge-color-label{width:100%}}.dd-menu{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06);min-width:220px;overflow:hidden;padding:4px}.dd-header{padding:8px 12px 4px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}.dd-divider{height:1px;background:var(--border-soft);margin:4px 0}.dd-item{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;border-radius:8px;cursor:pointer;font-size:13.5px;font-family:"General Sans",var(--font);font-weight:400;color:var(--text-primary);transition:background .1s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative}.dd-item:hover{background:var(--bg-hover)}.dd-item.dd-item--active{color:var(--brand)}.dd-item.dd-item--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.dd-item-icon{width:16px;height:16px;flex-shrink:0;color:var(--text-secondary);display:flex;align-items:center;justify-content:center}.dd-item--active .dd-item-icon{color:var(--brand)}.dd-item-check{width:16px;height:16px;border:1.5px solid var(--border);border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .1s,border-color .1s}.dd-item--checked .dd-item-check{background:var(--brand);border-color:var(--brand)}.dd-item-label{flex:1}.dd-item-sublabel{font-size:11.5px;color:var(--text-secondary);margin-top:1px}.dd-item-shortcut{font-size:11px;color:var(--text-muted);font-family:var(--mono);background:var(--bg-hover);border:1px solid var(--border);border-radius:5px;padding:1px 6px;letter-spacing:0;white-space:nowrap;flex-shrink:0}.dd-item-avatar{width:24px;height:24px;-o-object-fit:cover;object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#111}.dd-item-avatar,.dd-item-dot{border-radius:50%;flex-shrink:0}.dd-item-dot{width:8px;height:8px}.dd-item-check-mark{width:10px;height:10px;margin-left:auto;flex-shrink:0;opacity:0}.dd-item--active .dd-item-check-mark{opacity:1}.dd-trigger{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;background:transparent;border:1.5px solid var(--border);border-radius:9px;font-size:14px;font-family:"General Sans",var(--font);font-weight:500;color:var(--text-primary);cursor:pointer;transition:background .12s,border-color .12s}.dd-trigger:hover{background:var(--bg-hover);border-color:var(--text-muted)}.dd-trigger.dd-trigger--open{border-color:var(--brand);box-shadow:0 0 0 3px rgba(1,228,111,.15)}.dd-trigger-chevron{transition:transform .2s ease;color:var(--text-secondary)}.dd-trigger.dd-trigger--open .dd-trigger-chevron{transform:rotate(180deg)}.dd-input-wrap{display:flex;flex-direction:column;gap:4px;min-width:220px}.dd-input-label-text{font-size:12px;font-weight:500;color:var(--text-secondary)}.dd-input{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;background:var(--bg-surface);border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:"General Sans",var(--font);font-weight:400;color:var(--text-primary);cursor:pointer;transition:border-color .12s,box-shadow .12s;position:relative}.dd-input:hover{border-color:var(--text-muted)}.dd-input.dd-input--open{border-color:var(--brand);box-shadow:0 0 0 3px rgba(1,228,111,.15)}.dd-input--placeholder .dd-input-value{color:var(--text-muted)}.dd-input-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dd-input-chevron{color:var(--text-muted);flex-shrink:0;transition:transform .2s ease}.dd-input.dd-input--open .dd-input-chevron{transform:rotate(180deg);color:var(--brand)}.dd-input-support{font-size:11.5px;color:var(--text-secondary)}.dd-live{position:relative;display:inline-block}.dd-live .dd-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:50;display:none;min-width:100%}.dd-live.dd-live--open .dd-menu{display:block}.dd-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.dd-showcase-cell{display:flex;flex-direction:column;gap:10px}.dd-showcase-cell .comp-label{margin-bottom:4px}.dd-input-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}@media (max-width:768px){.dd-showcase{grid-template-columns:1fr}.dd-input-grid{grid-template-columns:1fr 1fr}}@media (max-width:480px){.dd-input-grid{grid-template-columns:1fr}}.states-band{display:flex;flex-direction:column;gap:8px}.states-row{display:flex;align-items:center;gap:16px;background:var(--bg);border-radius:14px;padding:18px 20px 18px 24px}.states-row-name{width:110px;flex-shrink:0;font-size:12.5px;font-weight:500;color:var(--text-secondary);font-family:"General Sans",var(--font)}.states-swatches{flex:1;gap:8px;flex-wrap:wrap}.state-swatch,.states-swatches{display:flex;align-items:center}.state-swatch{flex:1;min-width:68px;flex-direction:column;gap:12px;padding:18px 8px 14px;background:var(--bg-surface);border-radius:10px}.state-swatch-tag{font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}.inp-state-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.inp-state-card{background:var(--bg);border-radius:14px;padding:18px 20px 20px;display:flex;flex-direction:column;gap:14px}.inp-state-tag{font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);background:var(--bg-surface);border-radius:6px;padding:3px 8px;align-self:flex-start}.size-strips{display:flex;flex-direction:column;gap:8px}.size-strip{display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:var(--bg);border-radius:12px;padding:16px 24px}@media (max-width:640px){.inp-state-cards{grid-template-columns:1fr 1fr}.states-row-name{width:78px}.state-swatch{min-width:56px;padding:12px 6px 10px}}.cbx{position:relative;display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cbx input{position:absolute;opacity:0;width:0;height:0}.cbx-box{flex-shrink:0;width:18px;height:18px;border-radius:5px;border:1.75px solid var(--border);background:var(--bg-surface);display:flex;align-items:center;justify-content:center;transition:border-color .12s,background .12s,box-shadow .12s;margin-top:1px}.cbx:hover .cbx-box{border-color:var(--text-muted)}.cbx input:checked~.cbx-box{background:var(--brand);border-color:var(--brand)}.cbx input:indeterminate~.cbx-box{background:var(--brand);border-color:var(--brand)}.cbx input:focus-visible~.cbx-box{box-shadow:0 0 0 3px rgba(1,228,111,.25)}.cbx-check{display:none;pointer-events:none}.cbx input:checked~.cbx-box .cbx-check{display:block}.cbx-dash{display:none;pointer-events:none}.cbx input:indeterminate~.cbx-box .cbx-dash{display:block}.cbx input:checked~.cbx-box .cbx-dash{display:none}.cbx--disabled{cursor:not-allowed;opacity:.4}.cbx--disabled .cbx-box{pointer-events:none}.cbx-label-col{display:flex;flex-direction:column;gap:2px}.cbx-label{font-size:14px;font-weight:500;color:var(--text-primary);font-family:"General Sans",var(--font);line-height:1.4}.cbx-sub{font-size:12px;color:var(--text-secondary);line-height:1.5}.cbx-group{display:flex;flex-direction:column;gap:16px}.cbx-list-row{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border-soft);gap:16px}.cbx-list-row:last-child{border-bottom:none}.cbx-variant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.cbx-variant-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--bg-surface)}.cbx-variant-preview{min-height:110px;display:flex;align-items:center;justify-content:center;padding:28px 24px;background:var(--bg);position:relative}.cbx-variant-preview:before{content:none}.cbx-variant-preview>*{position:relative;z-index:1}.cbx-variant-meta{padding:16px 18px 18px;border-top:1px solid var(--border)}.cbx-variant-name{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:3px}.cbx-variant-desc{font-size:12px;color:var(--text-secondary);line-height:1.5}@media (max-width:768px){.cbx-variant-grid{grid-template-columns:1fr 1fr}}@media (max-width:480px){.cbx-variant-grid{grid-template-columns:1fr}}.av{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:"General Sans",var(--font);font-weight:600;flex-shrink:0;overflow:hidden;position:relative}.av--xs{width:24px;height:24px;font-size:9px}.av--sm{width:32px;height:32px;font-size:11px}.av--md{width:40px;height:40px;font-size:14px}.av--lg{width:48px;height:48px;font-size:16px}.av--xl{width:56px;height:56px;font-size:18px}.av--2xl{width:72px;height:72px;font-size:22px}.av--square{border-radius:8px}.av--xs.av--square{border-radius:5px}.av--sm.av--square{border-radius:7px}.av--lg.av--square{border-radius:10px}.av--xl.av--square{border-radius:12px}.av--2xl.av--square{border-radius:16px}.av--green{background:var(--brand);color:#0a1a0f}.av--blue{background:#3b82f6;color:#fff}.av--purple{background:#8b5cf6;color:#fff}.av--amber{background:#f59e0b;color:#1c1200}.av--red{background:#ef4444;color:#fff}.av--grey{background:var(--bg-hover);color:var(--text-secondary);border:1.5px solid var(--border)}.av img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:inherit}.av-wrap{position:relative;display:inline-flex}.av-status{position:absolute;border-radius:50%;border:2px solid var(--bg-surface);bottom:0;right:0}.av--xs~.av-status,.av-wrap--xs .av-status{width:7px;height:7px;bottom:-1px;right:-1px}.av--sm~.av-status,.av-wrap--sm .av-status{width:9px;height:9px}.av--md~.av-status,.av-wrap--md .av-status{width:11px;height:11px}.av--lg~.av-status,.av-wrap--lg .av-status{width:12px;height:12px}.av--xl~.av-status,.av-wrap--xl .av-status{width:14px;height:14px}.av--2xl~.av-status,.av-wrap--2xl .av-status{width:16px;height:16px}.av-status--online{background:var(--brand)}.av-status--offline{background:var(--text-muted)}.av-status--busy{background:#ef4444}.av-status--away{background:#f59e0b}.av-stack{display:flex;flex-direction:row-reverse}.av-stack .av{border:2.5px solid var(--bg-surface);margin-left:-10px}.av-stack .av:last-child{margin-left:0}.av-stack--sm .av{margin-left:-8px;border-width:2px}.av-stack--lg .av{margin-left:-14px;border-width:3px}.av-stack-count{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-hover);color:var(--text-secondary);font-size:11px;font-weight:600;font-family:"General Sans",var(--font);border:2.5px solid var(--bg-surface);margin-left:-10px}.av-row{display:flex;align-items:center;gap:12px}.av-row-name{font-size:14px;font-weight:500;color:var(--text-primary);line-height:1.3}.av-row-sub{font-size:12px;color:var(--text-secondary)}.av-variant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.av-variant-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--bg-surface)}.av-variant-preview{min-height:110px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:28px 24px;background:var(--bg);position:relative}.av-variant-preview:before{content:none}.av-variant-preview>*{position:relative;z-index:1}.av-variant-meta{padding:16px 18px 18px;border-top:1px solid var(--border)}.av-variant-name{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:3px}.av-variant-desc{font-size:12px;color:var(--text-secondary);line-height:1.5}@media (max-width:768px){.av-variant-grid{grid-template-columns:1fr 1fr}}@media (max-width:480px){.av-variant-grid{grid-template-columns:1fr}}.tip-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}.tip{position:absolute;background:var(--text-primary);color:var(--bg-surface);font-size:12px;font-weight:500;font-family:"General Sans",var(--font);line-height:1.4;padding:6px 10px;border-radius:7px;white-space:nowrap;pointer-events:none;z-index:10;max-width:220px;white-space:normal;text-align:center;opacity:0;transition:opacity .15s ease}.tip-wrap:hover .tip{opacity:1}.tip:after{content:"";position:absolute;width:0;height:0;border:5px solid transparent}.tip--top{bottom:calc(100% + 8px)}.tip--bottom,.tip--top{left:50%;transform:translateX(-50%)}.tip--bottom{top:calc(100% + 8px)}.tip--left{right:calc(100% + 8px)}.tip--left,.tip--right{top:50%;transform:translateY(-50%)}.tip--right{left:calc(100% + 8px)}.tip--top:after{top:100%;border-top-color:var(--text-primary)}.tip--bottom:after,.tip--top:after{left:50%;transform:translateX(-50%)}.tip--bottom:after{bottom:100%;border-bottom-color:var(--text-primary)}.tip--left:after{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--text-primary)}.tip--right:after{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--text-primary)}.tip--sm{font-size:11px;padding:4px 8px;border-radius:6px}.tip--lg{font-size:13px;padding:8px 12px;border-radius:8px}.tip--rich{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06);padding:12px 14px;border-radius:12px;text-align:left;white-space:normal;min-width:200px}.tip--rich:after{border-top-color:var(--bg-surface)}.tip-rich-title{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.tip-rich-body{font-size:12px;color:var(--text-secondary);line-height:1.55}.tip-placement-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.tip-placement-cell{background:var(--bg);border-radius:12px;padding:48px 16px;display:flex;align-items:center;justify-content:center;position:relative}@media (max-width:640px){.tip-placement-grid{grid-template-columns:1fr 1fr}}.prog-bar-track{width:100%;height:8px;background:var(--bg-hover);border-radius:100px;overflow:hidden}.prog-bar-fill{height:100%;border-radius:100px;background:var(--brand);transition:width .4s ease}.prog-bar-track--sm{height:4px}.prog-bar-track--lg{height:12px}.prog-bar-fill--striped{background:repeating-linear-gradient(45deg,var(--brand) 0,var(--brand) 8px,rgba(0,0,0,.12) 8px,rgba(0,0,0,.12) 16px);background-size:22px 22px;animation:stripe-move .7s linear infinite}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}.prog-bar-fill--error{background:#ef4444}.prog-bar-fill--warning{background:#f59e0b}.prog-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.prog-label{font-size:13px;font-weight:500;color:var(--text-primary);font-family:"General Sans",var(--font)}.prog-pct{font-size:12px;font-weight:600;color:var(--text-secondary);font-family:var(--mono)}.prog-ring-wrap{display:inline-flex;flex-direction:column;align-items:center;gap:10px}.prog-ring{transform:rotate(-90deg)}.prog-ring-track{fill:none;stroke:var(--bg-hover)}.prog-ring-fill{fill:none;stroke:var(--brand);stroke-linecap:round;transition:stroke-dashoffset .5s ease}.prog-ring-fill--error{stroke:#ef4444}.prog-ring-fill--warning{stroke:#f59e0b}.prog-spinner{width:36px;height:36px;border:3px solid var(--bg-hover);border-top-color:var(--brand);border-radius:50%;animation:spin .75s linear infinite;display:inline-block}.prog-spinner--sm{width:20px;height:20px;border-width:2px}.prog-spinner--lg{width:52px;height:52px;border-width:4px}@keyframes spin{to{transform:rotate(1turn)}}.prog-steps{gap:0}.prog-step,.prog-steps{display:flex;align-items:center}.prog-step{flex-direction:column;gap:8px;flex:1;position:relative}.prog-step:before{content:"";position:absolute;top:14px;left:calc(-50% + 14px);right:calc(50% + 14px);height:2px;background:var(--border)}.prog-step:first-child:before{display:none}.prog-step--active:before,.prog-step--done:before{background:var(--brand)}.prog-step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:2px solid var(--border);background:var(--bg-surface);color:var(--text-muted);font-family:"General Sans",var(--font);position:relative;z-index:1;transition:background .2s,border-color .2s}.prog-step--done .prog-step-dot{background:var(--brand);border-color:var(--brand);color:#0a1a0f}.prog-step--active .prog-step-dot{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 3px rgba(1,228,111,.2)}.prog-step-label{font-size:11.5px;font-weight:500;color:var(--text-muted);font-family:"General Sans",var(--font);text-align:center}.prog-step--done .prog-step-label{color:var(--text-secondary)}.prog-step--active .prog-step-label{color:var(--brand);font-weight:600}.prog-list-row{display:flex;flex-direction:column;gap:10px;padding:18px 0;border-bottom:1px solid var(--border-soft)}.prog-list-row:last-child{border-bottom:none}.sld-wrap{display:flex;flex-direction:column;gap:6px;width:100%}.sld-row{display:flex;align-items:center;gap:14px}.sld-value{font-size:12px;font-weight:600;font-family:var(--mono);color:var(--text-secondary);min-width:36px;text-align:right;flex-shrink:0}.sld{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:5px;border-radius:100px;background:var(--bg-hover);outline:none;cursor:pointer;flex:1;background:linear-gradient(to right,var(--brand) 0,var(--brand) var(--pct,50%),var(--bg-hover) var(--pct,50%),var(--bg-hover) 100%)}.sld::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--bg-surface);border:2px solid var(--brand);box-shadow:0 1px 4px rgba(0,0,0,.15);cursor:pointer;-webkit-transition:box-shadow .15s;transition:box-shadow .15s}.sld::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--bg-surface);border:2px solid var(--brand);box-shadow:0 1px 4px rgba(0,0,0,.15);cursor:pointer}.sld:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(1,228,111,.2)}.sld:focus::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(1,228,111,.3)}.sld:disabled{opacity:.4;cursor:not-allowed}.sld:disabled::-webkit-slider-thumb{cursor:not-allowed}.sld--sm{height:3px}.sld--sm::-webkit-slider-thumb{width:14px;height:14px}.sld--lg{height:8px}.sld--lg::-webkit-slider-thumb{width:22px;height:22px}.sld-ticks{display:flex;justify-content:space-between;padding:0 2px}.sld-tick{font-size:10px;color:var(--text-muted);font-family:var(--mono)}.sld-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.sld-label{font-size:13px;font-weight:500;color:var(--text-primary);font-family:"General Sans",var(--font)}.sld-range-vals{font-size:12px;font-weight:600;font-family:var(--mono);color:var(--text-secondary)}.sld--warning{background:linear-gradient(to right,#f59e0b 0,#f59e0b var(--pct,40%),var(--bg-hover) var(--pct,40%),var(--bg-hover) 100%)}.sld--warning::-webkit-slider-thumb{border-color:#f59e0b}.sld--error{background:linear-gradient(to right,#ef4444 0,#ef4444 var(--pct,20%),var(--bg-hover) var(--pct,20%),var(--bg-hover) 100%)}.sld--error::-webkit-slider-thumb{border-color:#ef4444}.nb-shell{display:flex;height:420px;border-radius:16px;overflow:hidden;border:1px solid var(--border)}.nb-sidebar{width:220px;flex-shrink:0;background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px 10px;gap:2px}.nb-sidebar-logo{gap:10px;padding:8px 10px 18px;margin-bottom:4px}.nb-logo-mark,.nb-sidebar-logo{display:flex;align-items:center}.nb-logo-mark{width:28px;height:28px;border-radius:8px;background:var(--brand);justify-content:center;flex-shrink:0}.nb-logo-name{font-size:14px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px}.nb-group-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:10px 10px 6px}.nb-item{display:flex;align-items:center;gap:9px;height:36px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:background .1s,color .1s;text-decoration:none}.nb-item:hover{background:var(--bg-hover);color:var(--text-primary)}.nb-item--active{background:var(--brand-dim);color:var(--brand)}.nb-item svg{flex-shrink:0}.nb-item-badge{margin-left:auto;font-size:10px;font-weight:700;background:var(--brand);color:#0a1a0f;border-radius:100px;padding:1px 6px;line-height:1.5}.nb-item-badge--red{background:#ef4444;color:#fff}.nb-content{flex:1;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:13px}.nb-sidebar--collapsed{width:56px;padding:16px 8px}.nb-sidebar--collapsed .nb-group-label,.nb-sidebar--collapsed .nb-item-badge,.nb-sidebar--collapsed .nb-item-text,.nb-sidebar--collapsed .nb-logo-name{display:none}.nb-sidebar--collapsed .nb-item{justify-content:center;padding:0;width:40px}.nb-sidebar--collapsed .nb-sidebar-logo{padding:8px 4px 18px;justify-content:center}.nb-topbar{gap:4px;background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:6px 8px}.nb-top-item,.nb-topbar{display:flex;align-items:center}.nb-top-item{gap:7px;height:34px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:background .1s,color .1s;white-space:nowrap;text-decoration:none}.nb-top-item:hover{background:var(--bg-hover);color:var(--text-primary)}.nb-top-item--active{background:var(--brand-dim);color:var(--brand)}.inp-field{display:flex;flex-direction:column;gap:8px}.inp-label{font-size:13px;font-weight:500;color:var(--text-primary);font-family:"General Sans",var(--font)}.inp-label-required{color:#e54d2e;margin-left:2px}.inp-wrap{position:relative;display:flex;align-items:center}.inp{width:100%;height:44px;padding:0 14px;background:var(--bg-surface);border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:"General Sans",var(--font);font-weight:400;color:var(--text-primary);outline:none;transition:border-color .12s,box-shadow .12s;box-sizing:border-box;-moz-appearance:none;appearance:none;-webkit-appearance:none}.inp::-moz-placeholder{color:var(--text-muted)}.inp::placeholder{color:var(--text-muted)}.inp:hover:not(:focus):not(.inp--error):not(:disabled){border-color:var(--text-muted)}.inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(1,228,111,.15)}.inp--error{border-color:#e54d2e!important}.inp--error:focus{box-shadow:0 0 0 3px rgba(229,77,46,.15)}.inp:disabled{opacity:.45;cursor:not-allowed;background:var(--bg)}.inp--lead{padding-left:40px}.inp--trail{padding-right:40px}.inp--lead.inp--trail{padding-left:40px;padding-right:40px}.inp-icon-lead{left:12px}.inp-icon-lead,.inp-icon-trail{position:absolute;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;display:flex;align-items:center}.inp-icon-trail{right:12px}.inp-icon-trail.inp-icon-trail--btn{pointer-events:auto;cursor:pointer;padding:4px;border-radius:6px;right:8px}.inp-icon-trail.inp-icon-trail--btn:hover{background:var(--bg-hover);color:var(--text-primary)}.inp-hint{font-size:12px;color:var(--text-secondary);line-height:1.5}.inp-hint--error{color:#e54d2e}.inp-textarea{width:100%;min-height:100px;padding:12px 14px;background:var(--bg-surface);border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:"General Sans",var(--font);font-weight:400;color:var(--text-primary);outline:none;transition:border-color .12s,box-shadow .12s;resize:vertical;box-sizing:border-box;line-height:1.55}.inp-textarea::-moz-placeholder{color:var(--text-muted)}.inp-textarea::placeholder{color:var(--text-muted)}.inp-textarea:hover:not(:focus){border-color:var(--text-muted)}.inp-textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(1,228,111,.15)}.inp--sm{height:36px;padding:0 12px;font-size:13px;border-radius:8px}.inp--sm.inp--lead{padding-left:34px}.inp--lg{height:52px;padding:0 16px;font-size:15px;border-radius:12px}.inp--lg.inp--lead{padding-left:44px}.inp-states-grid{display:grid;grid-template-columns:100px 1fr;gap:0;align-items:center}.inp-state-label{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);padding:16px 0}.inp-state-cell,.inp-state-label{border-top:1px solid var(--border-soft)}.inp-state-cell{padding:16px 0 16px 16px}.inp-states-grid .inp-state-cell:nth-child(2),.inp-states-grid .inp-state-label:first-child{border-top:none}.inp-variant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.inp-variant-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--bg-surface)}.inp-variant-preview{padding:28px 24px;background:var(--bg);position:relative}.inp-variant-preview:before{content:none}.inp-variant-preview>*{position:relative;z-index:1}.inp-variant-meta{padding:16px 18px 18px;border-top:1px solid var(--border)}.inp-variant-name{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:3px}.inp-variant-desc{font-size:12px;color:var(--text-secondary);line-height:1.5}.inp-size-row{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--border-soft);flex-wrap:wrap}.inp-size-spec{width:140px;flex-shrink:0}.inp-size-name{font-size:13px;font-weight:600;font-family:var(--mono)}.inp-size-px{font-size:12px;color:var(--text-muted);font-family:var(--mono)}.inp-size-default-badge{font-size:10px;font-weight:600;background:var(--brand-dim);color:var(--brand);border-radius:4px;padding:1px 5px}@media (max-width:768px){.inp-variant-grid{grid-template-columns:1fr 1fr}}@media (max-width:480px){.inp-variant-grid{grid-template-columns:1fr}.inp-states-grid{grid-template-columns:80px 1fr}}.tgl{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;gap:10px}.tgl input{position:absolute;opacity:0;width:0;height:0}.tgl-track{position:relative;flex-shrink:0;border-radius:100px;background:var(--border);transition:background .2s ease}.tgl-thumb{position:absolute;top:50%;transform:translateY(-50%);border-radius:50%;background:#fff;transition:left .2s ease,width .15s ease;box-shadow:0 1px 3px rgba(0,0,0,.25)}.tgl input:checked~.tgl-track{background:var(--brand)}.tgl--sm .tgl-track{width:32px;height:18px}.tgl--sm .tgl-thumb{width:12px;height:12px;left:3px}.tgl--sm input:checked~.tgl-track .tgl-thumb{left:17px}.tgl--md .tgl-track{width:42px;height:24px}.tgl--md .tgl-thumb{width:16px;height:16px;left:4px}.tgl--md input:checked~.tgl-track .tgl-thumb{left:22px}.tgl--lg .tgl-track{width:52px;height:30px}.tgl--lg .tgl-thumb{width:22px;height:22px;left:4px}.tgl--lg input:checked~.tgl-track .tgl-thumb{left:26px}.tgl input:focus-visible~.tgl-track{box-shadow:0 0 0 3px rgba(1,228,111,.25)}.tgl--disabled{cursor:not-allowed;opacity:.4}.tgl-label-text{font-size:14px;font-weight:500;color:var(--text-primary);font-family:"General Sans",var(--font)}.tgl-label-sub{font-size:12px;color:var(--text-secondary);margin-top:1px}.tgl-label-col{display:flex;flex-direction:column}.tgl-sizes-grid{display:grid;grid-template-columns:80px repeat(4,auto);gap:0;justify-content:start;align-items:center}.tgl-col-head{padding:0 28px 16px 0}.tgl-col-head,.tgl-row-label{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}.tgl-row-label{padding:16px 0;border-top:1px solid var(--border-soft)}.tgl-row-cell{padding:16px 28px 16px 0;border-top:1px solid var(--border-soft)}.tgl-list-row,.tgl-row-cell{display:flex;align-items:center}.tgl-list-row{justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--border-soft);gap:20px}.tgl-list-row:last-child{border-bottom:none}.tgl-list-title{font-size:14px;font-weight:500;color:var(--text-primary)}.tgl-list-desc{font-size:12.5px;color:var(--text-secondary);margin-top:2px}.tgl-variant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.tgl-variant-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--bg-surface)}.tgl-variant-preview{min-height:110px;display:flex;align-items:center;justify-content:center;padding:28px 24px;background:var(--bg);position:relative}.tgl-variant-preview:before{content:none}.tgl-variant-preview>*{position:relative;z-index:1}.tgl-variant-meta{padding:16px 18px 18px;border-top:1px solid var(--border)}.tgl-variant-name{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:3px}.tgl-variant-desc{font-size:12px;color:var(--text-secondary);line-height:1.5}@media (max-width:768px){.tgl-variant-grid{grid-template-columns:1fr 1fr}.tgl-sizes-grid{grid-template-columns:70px repeat(4,auto)}.tgl-col-head,.tgl-row-cell{padding-right:18px}}@media (max-width:480px){.tgl-variant-grid{grid-template-columns:1fr}}.tab-bar{display:flex;align-items:center;gap:2px;border-bottom:1.5px solid var(--border)}.tab-bar--pill{border-bottom:none;background:var(--bg-surface);border-radius:10px;padding:4px;gap:4px}.tab-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:8px 8px 0 0;font-size:13px;font-weight:500;color:var(--text-secondary);background:none;border:none;cursor:pointer;transition:color .13s,background .13s;position:relative;white-space:nowrap}.tab-btn:after{content:"";position:absolute;bottom:-1.5px;left:0;right:0;height:2px;background:var(--brand);border-radius:2px 2px 0 0;opacity:0;transition:opacity .13s}.tab-btn.active{color:var(--brand)}.tab-btn.active:after{opacity:1}.tab-btn:hover:not(.active){color:var(--text-primary);background:var(--bg-hover)}.tab-btn.disabled{opacity:.38;pointer-events:none}.tab-bar--pill .tab-btn{border-radius:7px}.tab-bar--pill .tab-btn:after{display:none}.tab-bar--pill .tab-btn.active{background:var(--brand);color:#fff}.tab-badge,.tab-bar--pill .tab-btn:hover:not(.active){background:var(--bg-hover)}.tab-badge{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:18px;padding:0 5px;border-radius:9px;font-size:10px;font-weight:700;color:var(--text-secondary)}.tab-btn.active .tab-badge{background:var(--brand-dim);color:var(--brand)}.tab-bar--pill .tab-btn.active .tab-badge{background:rgba(255,255,255,.25);color:#fff}.tab-panel{padding:20px 0 0;font-size:13.5px;color:var(--text-secondary);line-height:1.65}.upload-zone{border:2px dashed var(--border);border-radius:14px;padding:36px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:border-color .15s,background .15s;background:var(--bg)}.upload-zone.drag-over,.upload-zone:hover{border-color:var(--brand);background:var(--brand-dim)}.upload-zone-icon{width:44px;height:44px;border-radius:12px;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.upload-zone-title{font-size:14px;font-weight:600;color:var(--text-primary)}.upload-zone-sub{font-size:12px;color:var(--text-muted);text-align:center}.upload-zone-btn{margin-top:4px;height:32px;padding:0 16px;border-radius:8px;background:var(--brand);color:#fff;font-size:12.5px;font-weight:600;border:none;cursor:pointer}.upload-file-list{display:flex;flex-direction:column;gap:8px}.upload-file-row{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:12px;padding:12px 16px}.upload-file-icon{width:36px;height:36px;border-radius:9px;flex-shrink:0;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-secondary)}.upload-file-info{flex:1;min-width:0}.upload-file-name{font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upload-file-size{font-size:11.5px;color:var(--text-muted);margin-top:2px}.upload-file-status{flex-shrink:0;display:flex;align-items:center;gap:8px}.upload-prog-track{width:100px;height:4px;border-radius:2px;background:var(--border)}.upload-prog-fill{height:4px;border-radius:2px;background:var(--brand)}.upload-status-dot{width:8px;height:8px;border-radius:50%}.upload-status-dot--done{background:#30a46c}.upload-status-dot--error{background:#e54d2e}.upload-file-remove{width:24px;height:24px;border-radius:6px;border:none;background:none;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s}.upload-file-remove:hover{background:var(--bg-hover);color:var(--text-primary)}input::-moz-placeholder,textarea::-moz-placeholder{color:var(--text-secondary);opacity:1}input::placeholder,textarea::placeholder{color:var(--text-secondary);opacity:1}