:root{--color-background:#f3f4fa;--color-background-secondary:#eaebf4;--color-surface:#ffffff;--color-surface-muted:#f7f8fc;--color-surface-elevated:#ffffff;--color-overlay:rgb(27 31 50/45%);--color-skeleton:#e8eaf3;--color-disabled-fill:#f0f1f7;--color-text-primary:#1b1f32;--color-text-secondary:#5a5f78;--color-text-muted:#8a90a5;--color-text-disabled:#b8bccb;--color-text-inverse:#ffffff;--color-brand-primary:#5b6ef6;--color-brand-primary-hover:#4a5ce8;--color-brand-primary-pressed:#3d4ed4;--color-brand-primary-light:#eef1ff;--color-brand-primary-lighter:#f6f7ff;--color-brand-on-primary:#ffffff;--color-success:#159947;--color-success-light:#e6f7ec;--color-success-lighter:#f3fbf6;--color-success-on-light:#0f6b32;--color-warning:#e08a00;--color-warning-light:#fff4e0;--color-warning-lighter:#fffaF3;--color-warning-on-light:#9a5e00;--color-danger:#e24b4a;--color-danger-light:#fdecec;--color-danger-lighter:#fff6f6;--color-danger-on-light:#b42322;--color-info:#3b6fe8;--color-info-light:#e8effc;--color-info-lighter:#f4f7fe;--color-info-on-light:#1e4bb8;--color-border:#e4e6f0;--color-border-subtle:#eef0f6;--color-border-strong:#c5c9d8;--color-border-focused:var(--color-brand-primary);--color-chart-primary:var(--color-brand-primary);--color-chart-secondary:#8b7cf7;--color-chart-tertiary:#e8a317;--color-chart-quaternary:#2fa36b;--font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:700;--text-display-size:2rem;--text-display-line:2.5rem;--text-large-number-size:1.75rem;--text-large-number-line:2.25rem;--text-h1-size:1.5rem;--text-h1-line:2rem;--text-h2-size:1.25rem;--text-h2-line:1.75rem;--text-h3-size:1rem;--text-h3-line:1.5rem;--text-body-size:0.875rem;--text-body-line:1.25rem;--text-body-small-size:0.8125rem;--text-body-small-line:1.125rem;--text-caption-size:0.75rem;--text-caption-line:1rem;--text-button-size:0.875rem;--text-button-line:1.25rem;--text-label-size:0.8125rem;--text-label-line:1.125rem;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-control-y:0.625rem;--space-control-x:0.875rem;--space-card:1.25rem;--space-page:1.5rem;--space-page-mobile:1rem;--space-section:1.5rem;--space-grid:1rem;--space-form:0.75rem;--space-compact:0.5rem;--space-section-lg:2.5rem;--layout-sidebar-width:15.5rem;--layout-sidebar-collapsed:4.5rem;--layout-header-height:4rem;--layout-content-max:75rem;--layout-form-max:27.5rem;--layout-dialog-sm:25rem;--layout-dialog-md:35rem;--layout-dialog-lg:45rem;--layout-drawer-width:25rem;--layout-bottom-nav-height:4rem;--layout-table-row:3rem;--layout-touch:2.75rem;--radius-xs:0.375rem;--radius-sm:0.5rem;--radius-md:0.75rem;--radius-lg:1rem;--radius-xl:1.25rem;--radius-pill:999px;--shadow-none:none;--shadow-card:0 1px 2px rgb(27 31 50/4%),0 4px 16px rgb(27 31 50/4%);--shadow-hover:0 2px 4px rgb(27 31 50/6%),0 8px 24px rgb(27 31 50/6%);--shadow-modal:0 8px 16px rgb(27 31 50/8%),0 24px 48px rgb(27 31 50/12%);--focus-ring-color:var(--color-brand-primary);--focus-ring-width:2px;--focus-ring-offset:2px;--duration-fast:120ms;--duration-normal:200ms;--duration-slow:320ms;--ease-standard:cubic-bezier(0.25,0.1,0.25,1);--ease-emphasized:cubic-bezier(0.2,0.8,0.2,1);--z-base:0;--z-sticky:20;--z-dropdown:30;--z-popover:40;--z-modal:50;--z-toast:60;--z-tooltip:70;--product-image-sm:2.5rem;--product-image-md:4.5rem;--product-image-lg:7.5rem}.dark{--color-background:#12141f;--color-background-secondary:#1a1c2a;--color-surface:#1e2130;--color-surface-muted:#262a3c;--color-surface-elevated:#262a3c;--color-overlay:rgb(0 0 0/60%);--color-skeleton:#2c3044;--color-disabled-fill:#262a3c;--color-text-primary:#f3f4fa;--color-text-secondary:#b8bccb;--color-text-muted:#8a90a5;--color-text-disabled:#5a5f78;--color-border:#2e3348;--color-border-subtle:#262a3c;--color-border-strong:#3d435c;--color-brand-primary-light:#2a3160;--color-brand-primary-lighter:#22284a}@media (prefers-reduced-motion:reduce){:root{--duration-fast:0ms;--duration-normal:0ms;--duration-slow:0ms}}.ui-focus:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.ui-btn,a.ui-btn,button.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:1px solid transparent;font-family:var(--font-sans);font-size:var(--text-button-size);line-height:var(--text-button-line);font-weight:var(--font-weight-medium);text-decoration:none;cursor:pointer;border-radius:var(--radius-md);transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}.ui-btn:focus{outline:none}.ui-btn:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}button.ui-btn:disabled{cursor:not-allowed;opacity:1}.ui-btn--sm{min-height:2.25rem;padding:0 var(--space-3);font-size:var(--text-caption-size)}.ui-btn--md{min-height:var(--layout-touch);padding:0 var(--space-4)}.ui-btn--lg{min-height:3rem;padding:0 var(--space-5)}.ui-btn--primary,a.ui-btn--primary:active,a.ui-btn--primary:focus,a.ui-btn--primary:hover,a.ui-btn--primary:visited{background:var(--color-brand-primary);color:var(--color-brand-on-primary)}.ui-btn--primary:hover:not(:disabled),a.ui-btn--primary:hover{background:var(--color-brand-primary-hover);color:var(--color-brand-on-primary)}.ui-btn--primary:active:not(:disabled){background:var(--color-brand-primary-pressed)}.ui-btn--primary:disabled{background:var(--color-disabled-fill);color:var(--color-text-disabled)}.ui-btn--secondary{background:var(--color-surface);color:var(--color-text-primary);border-color:var(--color-border)}.ui-btn--secondary:hover:not(:disabled){background:var(--color-surface-muted);border-color:var(--color-border-strong)}.ui-btn--secondary:active:not(:disabled){background:var(--color-background-secondary)}.ui-btn--secondary:disabled{color:var(--color-text-disabled);border-color:var(--color-border-subtle);background:var(--color-disabled-fill)}.ui-btn--ghost{background:transparent;color:var(--color-text-primary)}.ui-btn--ghost:hover:not(:disabled){background:var(--color-brand-primary-lighter);color:var(--color-brand-primary)}.ui-btn--ghost:active:not(:disabled){background:var(--color-brand-primary-light)}.ui-btn--ghost:disabled{color:var(--color-text-disabled);background:transparent}.ui-btn--danger{background:var(--color-danger);color:var(--color-text-inverse)}.ui-btn--danger:hover:not(:disabled){background:var(--color-danger-on-light)}.ui-btn--danger:active:not(:disabled){filter:brightness(.92)}.ui-btn--danger:disabled{background:var(--color-disabled-fill);color:var(--color-text-disabled);filter:none}.ui-btn__spinner{width:1rem;height:1rem;border:2px solid;border-right:2px solid transparent;border-radius:var(--radius-pill);animation:ui-spin var(--duration-slow) linear infinite}@keyframes ui-spin{to{transform:rotate(1turn)}}.ui-icon-btn{width:var(--layout-touch);min-width:var(--layout-touch);padding:0}.ui-icon-btn--sm{width:2.25rem;min-width:2.25rem;min-height:2.25rem}.ui-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);color:var(--color-text-primary)}.ui-card--pad{padding:var(--space-card)}.ui-card--emphasized{border-color:var(--color-brand-primary-light);box-shadow:var(--shadow-card);background:linear-gradient(180deg,var(--color-brand-primary-lighter) 0,var(--color-surface) 48%)}.ui-card__header{margin-bottom:var(--space-3)}.ui-card__footer{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--color-border-subtle)}.ui-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:.125rem .625rem;border-radius:var(--radius-pill);font-size:var(--text-caption-size);line-height:var(--text-caption-line);font-weight:var(--font-weight-medium);border:1px solid transparent;white-space:nowrap}.ui-badge--neutral{background:var(--color-surface-muted);color:var(--color-text-secondary);border-color:var(--color-border)}.ui-badge--success{background:var(--color-success-light);color:var(--color-success-on-light)}.ui-badge--warning{background:var(--color-warning-light);color:var(--color-warning-on-light)}.ui-badge--danger{background:var(--color-danger-light);color:var(--color-danger-on-light)}.ui-badge--info{background:var(--color-info-light);color:var(--color-info-on-light)}.ui-field{display:flex;flex-direction:column;gap:var(--space-1);width:100%}label.ui-field__label{display:block;font-size:var(--text-label-size);line-height:var(--text-label-line);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.ui-field__control{display:flex;align-items:center;gap:var(--space-2);min-height:var(--layout-touch);padding:0 var(--space-control-x);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}.ui-field__control:focus-within{border-color:var(--color-border-focused);box-shadow:0 0 0 3px var(--color-brand-primary-light)}.ui-field__control--error{border-color:var(--color-danger)}.ui-field__control--error:focus-within{box-shadow:0 0 0 3px var(--color-danger-light)}.ui-field__control--disabled{background:var(--color-disabled-fill);color:var(--color-text-disabled)}.ui-field__input,input.ui-field__input{flex:1 1;min-width:0;border:0;background:transparent;padding:0;font:inherit;font-size:var(--text-body-size);line-height:var(--text-body-line);color:var(--color-text-primary);min-height:calc(var(--layout-touch) - 2px);border-radius:0}.ui-field__input::placeholder{color:var(--color-text-muted)}.ui-field__input:disabled{color:var(--color-text-disabled);cursor:not-allowed}.ui-field__input:focus{outline:none}.ui-field__affix{display:flex;align-items:center;flex-shrink:0}.ui-field__affix .ui-icon-btn{width:2rem;min-width:2rem;min-height:2rem;margin-right:calc(var(--space-2) * -1)}.ui-field__hint{color:var(--color-text-muted)}.ui-field__error,.ui-field__hint{font-size:var(--text-caption-size);line-height:var(--text-caption-line)}.ui-field__error{color:var(--color-danger)}.ui-stat{display:flex;flex-direction:column;gap:var(--space-2)}.ui-stat__top{display:flex;align-items:center;gap:var(--space-3)}.ui-stat__icon{display:grid;place-items:center;width:2.25rem;height:2.25rem;flex-shrink:0;border-radius:var(--radius-md);background:var(--color-brand-primary-light);color:var(--color-brand-primary)}.ui-stat--emphasized .ui-stat__icon{background:var(--color-brand-primary);color:var(--color-brand-on-primary)}.ui-stat__label{font-size:var(--text-caption-size);line-height:var(--text-caption-line);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);text-transform:none}.ui-stat__value{font-size:var(--text-large-number-size);line-height:var(--text-large-number-line);font-weight:var(--font-weight-bold);letter-spacing:-.02em;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:var(--color-text-primary)}.ui-stat__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.ui-stat__trend{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:var(--radius-pill);font-size:var(--text-caption-size);font-weight:var(--font-weight-medium)}.ui-stat__trend--up{color:var(--color-success-on-light);background:var(--color-success-light)}.ui-stat__trend--down{color:var(--color-danger-on-light);background:var(--color-danger-light)}.ui-stat__hint{font-size:var(--text-caption-size);color:var(--color-text-muted)}.ui-divider{height:1px;background:var(--color-border);border:0;margin:0}.ui-avatar{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:var(--radius-pill);background:var(--color-brand-primary-light);color:var(--color-brand-primary);font-size:var(--text-body-small-size);font-weight:var(--font-weight-medium);overflow:hidden}.ui-avatar img{width:100%;height:100%;object-fit:cover}.ui-skeleton{background:var(--color-skeleton);border-radius:var(--radius-sm);animation:ui-pulse 1.2s var(--ease-standard) infinite}@keyframes ui-pulse{50%{opacity:.55}}.ui-product-image{display:grid;place-items:center;aspect-ratio:1;background:var(--color-surface-muted);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);overflow:hidden;color:var(--color-text-muted)}.ui-product-image img{width:100%;height:100%;object-fit:cover}.ui-product-image--sm{width:var(--product-image-sm)}.ui-product-image--md{width:var(--product-image-md)}.ui-product-image--lg{width:var(--product-image-lg)}.ui-product-image--fill{width:100%;height:100%}.ds-shell{min-height:100dvh;background:var(--color-background);color:var(--color-text-primary);font-family:var(--font-inter),var(--font-sans);font-size:var(--text-body-size);line-height:var(--text-body-line)}.ds-header{position:-webkit-sticky;position:sticky;top:0;z-index:var(--z-sticky);height:var(--layout-header-height);display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-page);background:var(--color-surface);border-bottom:1px solid var(--color-border)}.ds-page{max-width:var(--layout-content-max);margin:0 auto;padding:var(--space-page);display:flex;flex-direction:column;gap:var(--space-section-lg)}.ds-section h2{margin:0 0 var(--space-2);font-size:var(--text-h2-size);line-height:var(--text-h2-line);font-weight:var(--font-weight-bold)}.ds-section p.lead{margin:0 0 var(--space-4);color:var(--color-text-secondary)}.ds-grid{display:grid;grid-gap:var(--space-grid);gap:var(--space-grid)}.ds-grid--swatches{grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr))}.ds-grid--stats{grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}.ds-grid--two{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.ds-grid--radius{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));align-items:end}.ds-swatch{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface)}.ds-swatch__chip{height:4.5rem}.ds-swatch__meta{padding:var(--space-3);display:flex;flex-direction:column;gap:2px}.ds-swatch__meta span,.ds-swatch__meta strong{font-size:var(--text-caption-size)}.ds-swatch__meta span{color:var(--color-text-muted)}.ds-type-row{padding:var(--space-3) 0;border-bottom:1px solid var(--color-border-subtle)}.ds-space-row{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-2)}.ds-space-bar{height:1.5rem;border-radius:var(--radius-xs)}.ds-radius-box,.ds-space-bar{background:var(--color-brand-primary-light)}.ds-radius-box{width:4.5rem;height:4.5rem;border:1px solid var(--color-brand-primary)}.ds-shadow-box{height:5.5rem;background:var(--color-surface)}.ds-layout-demo,.ds-shadow-box{border:1px solid var(--color-border);border-radius:var(--radius-lg)}.ds-layout-demo{display:grid;grid-template-columns:var(--layout-sidebar-width) 1fr;min-height:8rem;overflow:hidden;background:var(--color-background)}.ds-layout-demo__side{background:var(--color-background-secondary);border-right:1px solid var(--color-border)}.ds-layout-demo__main{display:flex;flex-direction:column}.ds-layout-demo__head{height:var(--layout-header-height);background:var(--color-surface);border-bottom:1px solid var(--color-border)}.ds-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}@media (max-width:767px){.ds-page{padding:var(--space-page-mobile)}.ds-layout-demo{grid-template-columns:1fr}.ds-header{padding:0 var(--space-page-mobile)}}