@cal.macconnachie/web-components 0.0.9 → 0.0.11

package/dist/stylesheets/main.css

@@ -1 +1 @@
-:root{--color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-primary-light:#dbeafe;--color-secondary:#64748b;--color-secondary-hover:#475569;--color-success:#16a34a;--color-warning:#d97706;--color-error:#dc2626;--color-info:#0891b2;--color-success-bg:rgba(22,162,73,.1);--color-success-border:rgba(22,162,73,.2);--color-warning-bg:rgba(217,119,6,.1);--color-warning-border:rgba(217,119,6,.2);--color-error-bg:rgba(220,38,38,.1);--color-error-border:rgba(220,38,38,.2);--color-info-bg:rgba(8,145,178,.1);--color-info-border:rgba(8,145,178,.2);--color-subscription:#6366f1;--color-subscription-bg:rgba(99,102,241,.1);--color-subscription-border:rgba(99,102,241,.2);--color-subscription-bg-gradient-start:rgba(99,102,241,.02);--color-subscription-bg-gradient-end:rgba(99,102,241,.05);--color-onetime:#22c55e;--color-onetime-bg:rgba(34,197,94,.1);--color-onetime-border:rgba(34,197,94,.2);--color-onetime-bg-gradient-start:rgba(34,197,94,.02);--color-onetime-bg-gradient-end:rgba(34,197,94,.05);--color-metered:#a855f7;--color-metered-bg:rgba(168,85,247,.1);--color-metered-border:rgba(168,85,247,.2);--color-metered-bg-gradient-start:rgba(168,85,247,.02);--color-metered-bg-gradient-end:rgba(168,85,247,.05);--color-text-primary:#0f172a;--color-text-secondary:#64748b;--color-text-muted:#94a3b8;--color-text-inverse:#fff;--color-bg-primary:#fff;--color-bg-secondary:#f8fafc;--color-bg-muted:#f1f5f9;--color-bg-inverse-muted:#1e293b;--color-bg-overlay:rgba(15,23,42,.8);--color-border:#e2e8f0;--color-border-hover:#cbd5e1;--color-border-focus:#3b82f6;--font-family-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-family-mono:"SF Mono",Monaco,"Cascadia Code",monospace;--font-size-2xs:0.625rem;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.625;--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-20:5rem;--space-24:6rem;--size-xs:20rem;--size-sm:24rem;--size-md:28rem;--size-lg:32rem;--size-xl:36rem;--size-2xl:42rem;--size-full:100%;--radius-sm:0.125rem;--radius-base:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-full:9999px;--shadow-xs:0 1px 2px 0 rgba(0,0,0,.05);--shadow-sm:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--shadow-base:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--shadow-md:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--shadow-lg:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--shadow-xl:0 25px 50px -12px rgba(0,0,0,.25);--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal:1040;--z-popover:1050;--z-tooltip:1060;--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:200ms cubic-bezier(0.4,0,0.2,1);--transition-slow:300ms cubic-bezier(0.4,0,0.2,1)}[data-theme=dark]{--color-primary:#3b82f6;--color-primary-hover:#2563eb;--color-primary-light:#1e3a8a;--color-secondary:#6b7280;--color-secondary-hover:#9ca3af;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#ef4444;--color-info:#06b6d4;--color-text-primary:#f8fafc;--color-text-secondary:#cbd5e1;--color-text-muted:#94a3b8;--color-text-inverse:#0f172a;--color-bg-primary:#1e293b;--color-bg-secondary:#0f172a;--color-bg-muted:#334155;--color-bg-inverse-muted:#0f172a;--color-bg-overlay:rgba(0,0,0,.8);--color-border:#334155;--color-border-hover:#475569;--color-border-focus:#3b82f6;--shadow-xs:0 1px 2px 0 rgba(0,0,0,.3);--shadow-sm:0 1px 3px 0 rgba(0,0,0,.4),0 1px 2px -1px rgba(0,0,0,.4);--shadow-base:0 4px 6px -1px rgba(0,0,0,.4),0 2px 4px -2px rgba(0,0,0,.4);--shadow-md:0 10px 15px -3px rgba(0,0,0,.4),0 4px 6px -4px rgba(0,0,0,.4);--shadow-lg:0 20px 25px -5px rgba(0,0,0,.5),0 8px 10px -6px rgba(0,0,0,.5);--shadow-xl:0 25px 50px -12px rgba(0,0,0,.6)}*{box-sizing:border-box}body{background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-family-sans);font-size:var(--font-size-base);line-height:var(--line-height-normal);margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{scrollbar-width:none;-ms-overflow-style:none}::-webkit-scrollbar{display:none}:focus{outline:2px solid var(--color-border-focus);outline-offset:2px}:focus:not(:focus-visible){outline:none}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.page{margin:0 auto;max-width:1200px;padding:var(--space-6)}.float-right{float:right}.onboarding-form{gap:var(--space-6);margin-top:var(--space-4)}.form-section,.onboarding-form{box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;width:100%}.form-section{gap:var(--space-3)}.form-section h5,.section-title{color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);margin:0 0 var(--space-3) 0}.form-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}.form-field,.form-grid{box-sizing:border-box;max-width:100%;width:100%}.form-field{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.form-field.full-width{grid-column:1/-1}.form-field label{color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.form-field select{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--font-size-sm);padding:var(--space-2) var(--space-3);transition:border-color .2s ease;width:100%}.form-field select:focus{border-color:var(--color-primary);outline:none}.form-field select:disabled{cursor:not-allowed;opacity:.5}.form-actions{align-items:flex-start;border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-4)}.form-note{color:var(--color-text-secondary);font-size:var(--font-size-sm)}@media (max-width:640px){.form-grid{grid-template-columns:1fr}}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover,select:-webkit-autofill,select:-webkit-autofill:active,select:-webkit-autofill:focus,select:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:active,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{-webkit-background-clip:text!important;-webkit-text-fill-color:var(--color-text-primary)!important;background-color:var(--color-bg-primary)!important;box-shadow:0 0 0 1000px var(--color-bg-primary) inset!important;transition:background-color 5000s ease-in-out 0s!important}.quantity-input-wrapper{align-items:center;display:flex;gap:0;opacity:1;transition:opacity .2s ease,visibility .2s ease;visibility:visible;width:fit-content}.quantity-input-wrapper--hidden{opacity:0;pointer-events:none;visibility:hidden}.quantity-btn{align-items:center;background:var(--color-bg-primary);border:2px solid var(--color-border);color:var(--color-text-primary);cursor:pointer;display:flex;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);height:40px;justify-content:center;transition:all .2s ease;user-select:none;width:40px}.quantity-btn:hover:not(:disabled){background:var(--color-bg-secondary)}.quantity-btn:disabled{cursor:not-allowed}.quantity-btn--minus{border-radius:var(--radius-md) 0 0 var(--radius-md);border-right:none}.quantity-btn--plus{border-left:none;border-radius:0 var(--radius-md) var(--radius-md) 0}.quantity-input{background:var(--color-bg-primary);border:2px solid var(--color-border);border-left:none;border-right:none;color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);height:40px;outline:none;text-align:center;width:60px}.quantity-input::-webkit-inner-spin-button,.quantity-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.quantity-input[type=number]{-moz-appearance:textfield;appearance:textfield}.quantity-btn--xs{font-size:var(--font-size-sm);height:24px;width:24px}.quantity-input--xs{font-size:calc(var(--font-size-sm)*3/4);height:24px;width:32px}.quantity-btn--sm{font-size:var(--font-size-base);height:32px;width:32px}.quantity-input--sm{font-size:var(--font-size-sm);height:32px;width:48px}.quantity-btn--md{font-size:var(--font-size-lg);height:40px;width:40px}.quantity-input--md{font-size:var(--font-size-base);height:40px;width:60px}.quantity-btn--lg{font-size:var(--font-size-xl);height:48px;width:48px}.quantity-input--lg{font-size:var(--font-size-lg);height:48px;width:72px}body.modal-open{height:100%!important;overflow:hidden!important;position:fixed!important;width:100%!important}.base-button{align-items:center;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);gap:var(--space-2);justify-content:center;line-height:var(--line-height-tight);position:relative;text-decoration:none;transition:all var(--transition-fast);user-select:none;white-space:nowrap}.base-button:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.base-button--primary{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.base-button--primary:hover:not(:disabled):not(.base-button--confirming){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.base-button--secondary{background-color:var(--color-secondary);border-color:var(--color-secondary);color:var(--color-text-inverse)}.base-button--secondary:hover:not(:disabled):not(.base-button--confirming){background-color:var(--color-secondary-hover);border-color:var(--color-secondary-hover)}.base-button--outline{background-color:transparent;border-color:var(--color-border);color:var(--color-primary)}.base-button--outline:hover:not(:disabled):not(.base-button--confirming){background-color:var(--color-primary-light);border-color:var(--color-primary)}.base-button--ghost{background-color:transparent;border-color:transparent;color:var(--color-text-secondary)}.base-button--danger,.base-button--ghost:hover:not(:disabled):not(.base-button--confirming){color:var(--color-text-primary)}.base-button--danger{background-color:var(--color-primary-bg);border-color:var(--color-error)}.base-button--danger:hover:not(:disabled):not(.base-button--confirming){background-color:var(--color-error-bg);border-color:var(--color-error)}.base-button--xs{font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2)}.base-button--sm{font-size:var(--font-size-sm);padding:var(--space-2) var(--space-3)}.base-button--md{font-size:var(--font-size-base);padding:var(--space-3) var(--space-4)}.base-button--lg{font-size:var(--font-size-lg);padding:var(--space-4) var(--space-6)}.base-button:disabled{cursor:not-allowed;opacity:.5}.base-button--full-width{width:100%}.base-button--loading{cursor:wait}.loading-text{opacity:.7}.loading-container{filter:brightness(400%)}.base-button--xs .confirm-button{padding:var(--space-1) var(--space-2)}.base-button--sm .confirm-button{padding:var(--space-2) var(--space-3)}.base-button--md .confirm-button{padding:var(--space-3) var(--space-4)}.base-button--lg .confirm-button{padding:var(--space-4) var(--space-6)}.cancel-button{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:0;transition:all var(--transition-fast);width:32px}.cancel-icon{height:16px;width:16px}.confirm-container{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between;width:100%}.confirm-container span{flex:1;text-align:center}.base-card{background-color:var(--color-bg-primary);border-radius:var(--radius-lg);box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;position:relative;transition:all var(--transition-fast)}.base-card--default{border:none}.base-card--elevated{border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}.base-card--padding-auto{padding:auto}.base-card--padding-none{padding:0}.base-card--padding-sm{padding:var(--space-4)}.base-card--padding-md{padding:var(--space-6)}.base-card--padding-lg{padding:var(--space-8)}.base-card--hoverable{cursor:pointer}.base-card--hoverable:hover{box-shadow:var(--shadow-md);transform:translateY(0)}.base-card--expandable{position:relative}.expand-btn{align-items:center;background:none;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;display:flex;justify-content:center;opacity:0;padding:var(--space-2);pointer-events:none;position:absolute;right:var(--space-3);top:var(--space-3);transform:scale(.8);transition:all var(--transition-fast);z-index:10}.base-card--expandable:hover .expand-btn{opacity:1;pointer-events:auto;transform:scale(1)}.expand-btn:hover{background:var(--color-bg-muted);box-shadow:var(--shadow-sm);color:var(--color-text-primary)}.expand-btn:focus{opacity:1;outline:2px solid var(--color-primary);outline-offset:2px;pointer-events:auto;transform:scale(1)}@media (max-width:768px){.expand-btn{opacity:1;pointer-events:auto;transform:scale(1)}}.card-header{margin-bottom:var(--space-4)}.card-title-wrapper{align-items:center;display:flex;gap:var(--space-2)}.card-title{color:var(--color-text-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);margin:0}.card-badge{position:relative;right:var(--space-1)}.card-badge,.card-badge-notitle{align-items:center;background:var(--color-error);border-radius:var(--radius-full);color:#fff;cursor:pointer;display:inline-flex;font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);height:calc(12px + var(--space-1));justify-content:center;line-height:1;min-width:12px;padding:0 var(--space-2)}.card-badge-notitle{left:var(--space-1);position:absolute;top:var(--space-1);z-index:5}.card-badge-notitle:hover,.card-badge:hover{background:var(--color-error-bg)}.card-body{min-width:0}.card-footer{border-top:1px solid var(--color-border);margin-top:var(--space-4);padding-top:var(--space-4)}.base-card--padding-none .card-header{margin-bottom:0;padding:var(--space-6) var(--space-6) 0}.base-card--padding-none .card-body{padding:var(--space-4) var(--space-6)}.base-card--padding-none .card-footer{margin-top:0;padding:0 var(--space-6) var(--space-6)}.base-card:hover{opacity:1;visibility:visible}.desktop-only{display:block}@media (max-width:768px){.desktop-only{display:none}}.input-group{display:flex;flex-direction:column;gap:var(--space-2)}.input-label{align-items:center;color:var(--color-text-primary);display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--space-1);line-height:var(--line-height-tight)}.required-indicator{color:var(--color-error);font-weight:var(--font-weight-bold)}.input-wrapper{align-items:center;display:flex;position:relative}.base-input{background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-family-sans);transition:all var(--transition-fast);width:100%}.base-input:hover:not(:disabled){border-color:var(--color-border-hover)}.base-input:focus{border-color:var(--color-border-focus);box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.base-input::placeholder{color:var(--color-text-muted)}.base-input--sm{font-size:var(--font-size-sm);padding:var(--space-2) var(--space-3)}.base-input--md{font-size:var(--font-size-base);padding:var(--space-3) var(--space-4)}.base-input--lg{font-size:var(--font-size-lg);padding:var(--space-4) var(--space-5)}.base-input--error,.base-input--error:focus{border-color:var(--color-error)}.base-input--error:focus{box-shadow:0 0 0 3px rgba(220,38,38,.1)}.base-input--disabled{background-color:var(--color-bg-muted);cursor:not-allowed;opacity:.5}.input-suffix{align-items:center;color:var(--color-text-muted);display:flex;position:absolute;right:var(--space-3)}.input-error{color:var(--color-error)}.input-error,.input-hint{font-size:var(--font-size-sm);line-height:var(--line-height-tight)}.input-hint{color:var(--color-text-muted)}.base-alert{align-items:flex-start;border:1px solid transparent;border-radius:var(--radius-md);display:flex;gap:var(--space-3);padding:var(--space-4)}.base-alert--info{background-color:rgba(59,130,246,.1);border-color:rgba(59,130,246,.2);color:var(--color-info)}.base-alert--success{background-color:rgba(16,185,129,.1);border-color:rgba(16,185,129,.2);color:var(--color-success)}.base-alert--warning{background-color:rgba(245,158,11,.1);border-color:rgba(245,158,11,.2);color:var(--color-warning)}.base-alert--error{background-color:rgba(239,68,68,.1);border-color:rgba(239,68,68,.2);color:var(--color-error)}.alert-icon{flex-shrink:0;height:1.25rem;margin-top:.125rem;width:1.25rem}.alert-content{flex:1;min-width:0}.alert-title{font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);margin:0 0 var(--space-1) 0}.alert-message,.alert-title{font-size:var(--font-size-sm)}.alert-message{line-height:var(--line-height-normal)}.alert-dismiss{background:none;border:none;color:currentColor;cursor:pointer;flex-shrink:0;height:1.25rem;opacity:.7;padding:0;transition:opacity var(--transition-fast);width:1.25rem}.alert-dismiss:hover{opacity:1}.alert-dismiss:focus{opacity:1;outline:2px solid currentColor;outline-offset:1px}.base-skeleton{animation:shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-bg-muted) 0,var(--color-bg-secondary) 50%,var(--color-bg-muted) 100%);background-size:200% 100%;overflow:hidden;position:relative}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton--text{border-radius:var(--radius-sm);height:1em}.skeleton--rectangle{border-radius:var(--radius-md)}.skeleton--rounded{border-radius:var(--radius-lg)}.skeleton--avatar,.skeleton--rounded-full{border-radius:var(--radius-full)}.skeleton--avatar{height:40px;width:40px}.skeleton--card{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);min-height:200px;padding:var(--space-6)}.skeleton-card{gap:var(--space-4);height:100%}.skeleton-card,.skeleton-header{display:flex;flex-direction:column}.skeleton-header{gap:var(--space-2)}.skeleton-title{animation:shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-bg-muted) 0,var(--color-bg-secondary) 50%,var(--color-bg-muted) 100%);background-size:200% 100%;border-radius:var(--radius-sm);height:24px;width:40%}.skeleton-body{display:flex;flex:1;flex-direction:column;gap:var(--space-3)}.skeleton-line{animation:shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-bg-muted) 0,var(--color-bg-secondary) 50%,var(--color-bg-muted) 100%);background-size:200% 100%;border-radius:var(--radius-sm);height:16px}@media (prefers-reduced-motion:reduce){.base-skeleton,.skeleton-line,.skeleton-title{animation:none;background:var(--color-bg-muted)}}.theme-toggle{align-items:center;display:inline-flex;justify-content:center;transition:all var(--transition-fast)}.theme-toggle:hover{transform:scale(1.05)}.theme-icon{height:1.25rem;transition:transform var(--transition-fast);width:1.25rem}.theme-toggle:active .theme-icon{transform:scale(.95)}@media (prefers-reduced-motion:no-preference){.theme-icon{animation:themeSwitch .3s ease-in-out}}@keyframes themeSwitch{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(.8)}to{transform:rotate(1turn) scale(1)}}
+:root{--color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-primary-light:#dbeafe;--color-secondary:#64748b;--color-secondary-hover:#475569;--color-success:#16a34a;--color-warning:#d97706;--color-error:#dc2626;--color-info:#0891b2;--color-success-bg:rgba(22,162,73,.1);--color-success-border:rgba(22,162,73,.2);--color-warning-bg:rgba(217,119,6,.1);--color-warning-border:rgba(217,119,6,.2);--color-error-bg:rgba(220,38,38,.1);--color-error-border:rgba(220,38,38,.2);--color-info-bg:rgba(8,145,178,.1);--color-info-border:rgba(8,145,178,.2);--color-subscription:#6366f1;--color-subscription-bg:rgba(99,102,241,.1);--color-subscription-border:rgba(99,102,241,.2);--color-subscription-bg-gradient-start:rgba(99,102,241,.02);--color-subscription-bg-gradient-end:rgba(99,102,241,.05);--color-onetime:#22c55e;--color-onetime-bg:rgba(34,197,94,.1);--color-onetime-border:rgba(34,197,94,.2);--color-onetime-bg-gradient-start:rgba(34,197,94,.02);--color-onetime-bg-gradient-end:rgba(34,197,94,.05);--color-metered:#a855f7;--color-metered-bg:rgba(168,85,247,.1);--color-metered-border:rgba(168,85,247,.2);--color-metered-bg-gradient-start:rgba(168,85,247,.02);--color-metered-bg-gradient-end:rgba(168,85,247,.05);--color-text-primary:#0f172a;--color-text-secondary:#64748b;--color-text-muted:#94a3b8;--color-text-inverse:#fff;--color-bg-primary:#fff;--color-bg-secondary:#f8fafc;--color-bg-muted:#f1f5f9;--color-bg-inverse-muted:#1e293b;--color-bg-overlay:rgba(15,23,42,.8);--color-border:#e2e8f0;--color-border-hover:#cbd5e1;--color-border-focus:#3b82f6;--font-family-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-family-mono:"SF Mono",Monaco,"Cascadia Code",monospace;--font-size-2xs:0.625rem;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.625;--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-20:5rem;--space-24:6rem;--size-xs:20rem;--size-sm:24rem;--size-md:28rem;--size-lg:32rem;--size-xl:36rem;--size-2xl:42rem;--size-full:100%;--radius-sm:0.125rem;--radius-base:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-full:9999px;--shadow-xs:0 1px 2px 0 rgba(0,0,0,.05);--shadow-sm:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--shadow-base:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--shadow-md:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--shadow-lg:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--shadow-xl:0 25px 50px -12px rgba(0,0,0,.25);--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal:1040;--z-popover:1050;--z-tooltip:1060;--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:200ms cubic-bezier(0.4,0,0.2,1);--transition-slow:300ms cubic-bezier(0.4,0,0.2,1)}[data-theme=dark]{--color-primary:#3b82f6;--color-primary-hover:#2563eb;--color-primary-light:#1e3a8a;--color-secondary:#6b7280;--color-secondary-hover:#9ca3af;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#ef4444;--color-info:#06b6d4;--color-text-primary:#f8fafc;--color-text-secondary:#cbd5e1;--color-text-muted:#94a3b8;--color-text-inverse:#0f172a;--color-bg-primary:#1e293b;--color-bg-secondary:#0f172a;--color-bg-muted:#334155;--color-bg-inverse-muted:#0f172a;--color-bg-overlay:rgba(0,0,0,.8);--color-border:#334155;--color-border-hover:#475569;--color-border-focus:#3b82f6;--shadow-xs:0 1px 2px 0 rgba(0,0,0,.3);--shadow-sm:0 1px 3px 0 rgba(0,0,0,.4),0 1px 2px -1px rgba(0,0,0,.4);--shadow-base:0 4px 6px -1px rgba(0,0,0,.4),0 2px 4px -2px rgba(0,0,0,.4);--shadow-md:0 10px 15px -3px rgba(0,0,0,.4),0 4px 6px -4px rgba(0,0,0,.4);--shadow-lg:0 20px 25px -5px rgba(0,0,0,.5),0 8px 10px -6px rgba(0,0,0,.5);--shadow-xl:0 25px 50px -12px rgba(0,0,0,.6)}*{box-sizing:border-box}body{background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-family-sans);font-size:var(--font-size-base);line-height:var(--line-height-normal);margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{scrollbar-width:none;-ms-overflow-style:none}::-webkit-scrollbar{display:none}:focus{outline:2px solid var(--color-border-focus);outline-offset:2px}:focus:not(:focus-visible){outline:none}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.page{margin:0 auto;max-width:1200px;padding:var(--space-6)}.float-right{float:right}.onboarding-form{gap:var(--space-6);margin-top:var(--space-4)}.form-section,.onboarding-form{box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;width:100%}.form-section{gap:var(--space-3)}.form-section h5,.section-title{color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);margin:0 0 var(--space-3) 0}.form-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}.form-field,.form-grid{box-sizing:border-box;max-width:100%;width:100%}.form-field{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.form-field.full-width{grid-column:1/-1}.form-field label{color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.form-field select{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--font-size-sm);padding:var(--space-2) var(--space-3);transition:border-color .2s ease;width:100%}.form-field select:focus{border-color:var(--color-primary);outline:none}.form-field select:disabled{cursor:not-allowed;opacity:.5}.form-actions{align-items:flex-start;border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-4)}.form-note{color:var(--color-text-secondary);font-size:var(--font-size-sm)}@media (max-width:640px){.form-grid{grid-template-columns:1fr}}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover,select:-webkit-autofill,select:-webkit-autofill:active,select:-webkit-autofill:focus,select:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:active,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{-webkit-background-clip:text!important;-webkit-text-fill-color:var(--color-text-primary)!important;background-color:var(--color-bg-primary)!important;box-shadow:0 0 0 1000px var(--color-bg-primary) inset!important;transition:background-color 5000s ease-in-out 0s!important}.quantity-input-wrapper{align-items:center;display:flex;gap:0;opacity:1;transition:opacity .2s ease,visibility .2s ease;visibility:visible;width:fit-content}.quantity-input-wrapper--hidden{opacity:0;pointer-events:none;visibility:hidden}.quantity-btn{align-items:center;background:var(--color-bg-primary);border:2px solid var(--color-border);color:var(--color-text-primary);cursor:pointer;display:flex;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);height:40px;justify-content:center;transition:all .2s ease;user-select:none;width:40px}.quantity-btn:hover:not(:disabled){background:var(--color-bg-secondary)}.quantity-btn:disabled{cursor:not-allowed}.quantity-btn--minus{border-radius:var(--radius-md) 0 0 var(--radius-md);border-right:none}.quantity-btn--plus{border-left:none;border-radius:0 var(--radius-md) var(--radius-md) 0}.quantity-input{background:var(--color-bg-primary);border:2px solid var(--color-border);border-left:none;border-right:none;color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);height:40px;outline:none;text-align:center;width:60px}.quantity-input::-webkit-inner-spin-button,.quantity-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.quantity-input[type=number]{-moz-appearance:textfield;appearance:textfield}.quantity-btn--xs{font-size:var(--font-size-sm);height:24px;width:24px}.quantity-input--xs{font-size:calc(var(--font-size-sm)*3/4);height:24px;width:32px}.quantity-btn--sm{font-size:var(--font-size-base);height:32px;width:32px}.quantity-input--sm{font-size:var(--font-size-sm);height:32px;width:48px}.quantity-btn--md{font-size:var(--font-size-lg);height:40px;width:40px}.quantity-input--md{font-size:var(--font-size-base);height:40px;width:60px}.quantity-btn--lg{font-size:var(--font-size-xl);height:48px;width:48px}.quantity-input--lg{font-size:var(--font-size-lg);height:48px;width:72px}body.modal-open{height:100%!important;overflow:hidden!important;position:fixed!important;width:100%!important}.base-button{align-items:center;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);gap:var(--space-2);justify-content:center;line-height:var(--line-height-tight);position:relative;text-decoration:none;transition:all var(--transition-fast);user-select:none;white-space:nowrap}.base-button:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.base-button--primary{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.base-button--primary:hover:not(:disabled):not(.base-button--confirming){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.base-button--secondary{background-color:var(--color-secondary);border-color:var(--color-secondary);color:var(--color-text-inverse)}.base-button--secondary:hover:not(:disabled):not(.base-button--confirming){background-color:var(--color-secondary-hover);border-color:var(--color-secondary-hover)}.base-button--outline{background-color:transparent;border-color:var(--color-border);color:var(--color-primary)}.base-button--outline:hover:not(:disabled):not(.base-button--confirming){background-color:var(--color-primary-light);border-color:var(--color-primary)}.base-button--ghost{background-color:transparent;border-color:transparent;color:var(--color-text-secondary)}.base-button--danger,.base-button--ghost:hover:not(:disabled):not(.base-button--confirming){color:var(--color-text-primary)}.base-button--danger{background-color:var(--color-primary-bg);border-color:var(--color-error)}.base-button--danger:hover:not(:disabled):not(.base-button--confirming){background-color:var(--color-error-bg);border-color:var(--color-error)}.base-button--xs{font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2)}.base-button--sm{font-size:var(--font-size-sm);padding:var(--space-2) var(--space-3)}.base-button--md{font-size:var(--font-size-base);padding:var(--space-3) var(--space-4)}.base-button--lg{font-size:var(--font-size-lg);padding:var(--space-4) var(--space-6)}.base-button:disabled{cursor:not-allowed;opacity:.5}.base-button--full-width{width:100%}.base-button--loading{cursor:wait}.loading-text{opacity:.7}.loading-container{filter:brightness(400%)}.base-button--xs .confirm-button{padding:var(--space-1) var(--space-2)}.base-button--sm .confirm-button{padding:var(--space-2) var(--space-3)}.base-button--md .confirm-button{padding:var(--space-3) var(--space-4)}.base-button--lg .confirm-button{padding:var(--space-4) var(--space-6)}.cancel-button{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:0;transition:all var(--transition-fast);width:32px}.cancel-icon{height:16px;width:16px}.confirm-container{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between;width:100%}.confirm-container span{flex:1;text-align:center}.base-card{background-color:var(--color-bg-primary);border-radius:var(--radius-lg);box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;position:relative;transition:all var(--transition-fast)}.base-card--default{border:none}.base-card--elevated{border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}.base-card--padding-auto{padding:auto}.base-card--padding-none{padding:0}.base-card--padding-sm{padding:var(--space-4)}.base-card--padding-md{padding:var(--space-6)}.base-card--padding-lg{padding:var(--space-8)}.base-card--hoverable{cursor:pointer}.base-card--hoverable:hover{box-shadow:var(--shadow-md);transform:translateY(0)}.base-card--expandable{position:relative}.expand-btn{align-items:center;background:none;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;display:flex;justify-content:center;opacity:0;padding:var(--space-2);pointer-events:none;position:absolute;right:var(--space-3);top:var(--space-3);transform:scale(.8);transition:all var(--transition-fast);z-index:10}.base-card--expandable:hover .expand-btn{opacity:1;pointer-events:auto;transform:scale(1)}.expand-btn:hover{background:var(--color-bg-muted);box-shadow:var(--shadow-sm);color:var(--color-text-primary)}.expand-btn:focus{opacity:1;outline:2px solid var(--color-primary);outline-offset:2px;pointer-events:auto;transform:scale(1)}@media (max-width:768px){.expand-btn{opacity:1;pointer-events:auto;transform:scale(1)}}.card-header{margin-bottom:var(--space-4)}.card-title-wrapper{align-items:center;display:flex;gap:var(--space-2)}.card-title{color:var(--color-text-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);margin:0}.card-badge{position:relative;right:var(--space-1)}.card-badge,.card-badge-notitle{align-items:center;background:var(--color-error);border-radius:var(--radius-full);color:#fff;cursor:pointer;display:inline-flex;font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);height:calc(12px + var(--space-1));justify-content:center;line-height:1;min-width:12px;padding:0 var(--space-2)}.card-badge-notitle{left:var(--space-1);position:absolute;top:var(--space-1);z-index:5}.card-badge-notitle:hover,.card-badge:hover{background:var(--color-error-bg)}.card-body{min-width:0}.card-footer{border-top:1px solid var(--color-border);margin-top:var(--space-4);padding-top:var(--space-4)}.base-card--padding-none .card-header{margin-bottom:0;padding:var(--space-6) var(--space-6) 0}.base-card--padding-none .card-body{padding:var(--space-4) var(--space-6)}.base-card--padding-none .card-footer{margin-top:0;padding:0 var(--space-6) var(--space-6)}.base-card:hover{opacity:1;visibility:visible}.desktop-only{display:block}@media (max-width:768px){.desktop-only{display:none}}.input-group{display:flex;flex-direction:column;gap:var(--space-2)}.input-label{align-items:center;color:var(--color-text-primary);display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--space-1);line-height:var(--line-height-tight)}.required-indicator{color:var(--color-error);font-weight:var(--font-weight-bold)}.input-wrapper{align-items:center;display:flex;position:relative}.base-input{background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-family-sans);transition:all var(--transition-fast);width:100%}.base-input:hover:not(:disabled){border-color:var(--color-border-hover)}.base-input:focus{border-color:var(--color-border-focus);box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.base-input::placeholder{color:var(--color-text-muted)}.base-input--sm{font-size:var(--font-size-sm);padding:var(--space-2) var(--space-3)}.base-input--md{font-size:var(--font-size-base);padding:var(--space-3) var(--space-4)}.base-input--lg{font-size:var(--font-size-lg);padding:var(--space-4) var(--space-5)}.base-input--error,.base-input--error:focus{border-color:var(--color-error)}.base-input--error:focus{box-shadow:0 0 0 3px rgba(220,38,38,.1)}.base-input--disabled{background-color:var(--color-bg-muted);cursor:not-allowed;opacity:.5}.input-suffix{align-items:center;color:var(--color-text-muted);display:flex;position:absolute;right:var(--space-3)}.input-error{color:var(--color-error)}.input-error,.input-hint{font-size:var(--font-size-sm);line-height:var(--line-height-tight)}.input-hint{color:var(--color-text-muted)}.base-alert{align-items:flex-start;border:1px solid transparent;border-radius:var(--radius-md);display:flex;gap:var(--space-3);padding:var(--space-4)}.base-alert--info{background-color:rgba(59,130,246,.1);border-color:rgba(59,130,246,.2);color:var(--color-info)}.base-alert--success{background-color:rgba(16,185,129,.1);border-color:rgba(16,185,129,.2);color:var(--color-success)}.base-alert--warning{background-color:rgba(245,158,11,.1);border-color:rgba(245,158,11,.2);color:var(--color-warning)}.base-alert--error{background-color:rgba(239,68,68,.1);border-color:rgba(239,68,68,.2);color:var(--color-error)}.alert-icon{flex-shrink:0;height:1.25rem;margin-top:.125rem;width:1.25rem}.alert-content{flex:1;min-width:0}.alert-title{font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);margin:0 0 var(--space-1) 0}.alert-message,.alert-title{font-size:var(--font-size-sm)}.alert-message{line-height:var(--line-height-normal)}.alert-dismiss{background:none;border:none;color:currentColor;cursor:pointer;flex-shrink:0;height:1.25rem;opacity:.7;padding:0;transition:opacity var(--transition-fast);width:1.25rem}.alert-dismiss:hover{opacity:1}.alert-dismiss:focus{opacity:1;outline:2px solid currentColor;outline-offset:1px}.base-skeleton{animation:shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-bg-muted) 0,var(--color-bg-secondary) 50%,var(--color-bg-muted) 100%);background-size:200% 100%;overflow:hidden;position:relative}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton--text{border-radius:var(--radius-sm);height:1em}.skeleton--rectangle{border-radius:var(--radius-md)}.skeleton--rounded{border-radius:var(--radius-lg)}.skeleton--avatar,.skeleton--rounded-full{border-radius:var(--radius-full)}.skeleton--avatar{height:40px;width:40px}.skeleton--card{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);min-height:200px;padding:var(--space-6)}.skeleton-card{gap:var(--space-4);height:100%}.skeleton-card,.skeleton-header{display:flex;flex-direction:column}.skeleton-header{gap:var(--space-2)}.skeleton-title{animation:shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-bg-muted) 0,var(--color-bg-secondary) 50%,var(--color-bg-muted) 100%);background-size:200% 100%;border-radius:var(--radius-sm);height:24px;width:40%}.skeleton-body{display:flex;flex:1;flex-direction:column;gap:var(--space-3)}.skeleton-line{animation:shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-bg-muted) 0,var(--color-bg-secondary) 50%,var(--color-bg-muted) 100%);background-size:200% 100%;border-radius:var(--radius-sm);height:16px}@media (prefers-reduced-motion:reduce){.base-skeleton,.skeleton-line,.skeleton-title{animation:none;background:var(--color-bg-muted)}}.theme-toggle{align-items:center;display:inline-flex;justify-content:center;transition:all var(--transition-fast)}.theme-toggle:hover{transform:scale(1.05)}.theme-icon{height:1.25rem;transition:transform var(--transition-fast);width:1.25rem}.theme-toggle:active .theme-icon{transform:scale(.95)}@media (prefers-reduced-motion:no-preference){.theme-icon{animation:themeSwitch .3s ease-in-out}}@keyframes themeSwitch{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(.8)}to{transform:rotate(1turn) scale(1)}}.nav-bar{align-items:center;background:var(--color-bg-primary);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;min-height:60px;padding:var(--space-3) var(--space-6);z-index:var(--z-fixed)}.nav-bar--blur{backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);background:hsla(0,0%,100%,.8)}[data-theme=dark] .nav-bar--blur{background:rgba(28,28,30,.8)}.nav-center,.nav-left,.nav-right{align-items:center;display:flex;flex:1;gap:var(--space-4)}.nav-center{justify-content:center;margin:0 auto;max-width:500px}.nav-right{justify-content:flex-end}.app-title{color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);letter-spacing:-.02em;margin:0}.app-title--gradient{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.search-container{align-items:center;display:flex;max-width:400px;position:relative;width:100%}.search-icon{color:var(--color-text-muted);left:var(--space-3);pointer-events:none;position:absolute}.search-icon,.search-input{font-size:var(--font-size-sm)}.search-input{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-primary);font-family:var(--font-family-sans);padding:var(--space-2) var(--space-10);transition:all var(--transition-base);width:100%}.search-input:hover{border-color:var(--color-border-hover)}.search-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(37,99,235,.1);outline:none}.search-input::placeholder{color:var(--color-text-muted)}.clear-search{align-items:center;background:none;border:none;border-radius:var(--radius-base);color:var(--color-text-muted);cursor:pointer;display:flex;justify-content:center;padding:var(--space-1);position:absolute;right:var(--space-2);transition:all var(--transition-base)}.clear-search:hover{background:var(--color-bg-muted)}.clear-search:hover,.icon-btn{color:var(--color-text-primary)}.icon-btn{align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;display:flex;font-size:var(--font-size-base);justify-content:center;line-height:1;min-height:36px;min-width:36px;padding:var(--space-2);transition:all var(--transition-base)}.icon-btn:hover:not(:disabled){background:var(--color-bg-muted);border-color:var(--color-border-hover);transform:translateY(-1px)}.icon-btn:active:not(:disabled){transform:translateY(0)}.icon-btn:disabled{cursor:not-allowed;opacity:.5}.icon-btn--sm{font-size:var(--font-size-sm);min-height:32px;min-width:32px}.icon-btn--lg{font-size:var(--font-size-lg);min-height:44px;min-width:44px}.toast{align-items:center;border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--space-3);left:50%;max-width:500px;padding:var(--space-4) var(--space-6);position:fixed;top:80px;transform:translateX(-50%);z-index:var(--z-tooltip)}.toast--error{background:var(--color-error);color:#fff}.toast--success{background:var(--color-success);color:#fff}.toast--warning{background:var(--color-warning);color:#fff}.toast--info{background:var(--color-info);color:#fff}.toast-icon{flex-shrink:0;font-size:var(--font-size-xl)}.toast-message{flex:1}.toast-close{align-items:center;background:none;border:none;border-radius:var(--radius-base);color:currentColor;cursor:pointer;display:flex;justify-content:center;opacity:.9;padding:var(--space-1);transition:background var(--transition-base)}.toast-close:hover{background:hsla(0,0%,100%,.2);opacity:1}.toast-enter-active,.toast-leave-active{transition:all var(--transition-slow)}.toast-enter-from,.toast-leave-to{opacity:0;transform:translate(-50%,-20px)}.sidebar{background:var(--color-bg-primary);border-right:1px solid var(--color-border);display:flex;flex-direction:column;max-width:600px;min-width:250px;overflow:hidden;position:relative}.sidebar-header{align-items:center;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:var(--space-4)}.sidebar-title{color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin:0}.sidebar-subtitle{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.sidebar-content{flex:1;overflow-y:auto;padding:var(--space-2)}.sidebar-content::-webkit-scrollbar{width:8px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-base)}.sidebar-content::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}.resize-handle{background:transparent;bottom:0;cursor:col-resize;position:absolute;right:0;top:0;transition:background var(--transition-base);width:4px}.resize-handle:hover{background:var(--color-primary)}.breadcrumb{align-items:center;background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);display:flex;gap:var(--space-2);overflow-x:auto;padding:var(--space-3) var(--space-4);white-space:nowrap}.breadcrumb::-webkit-scrollbar{height:4px}.breadcrumb::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-sm)}.breadcrumb-item{background:none;border:none;border-radius:var(--radius-base);color:var(--color-primary);cursor:pointer;font-family:var(--font-family-sans);font-size:var(--font-size-sm);padding:var(--space-1) var(--space-2);text-decoration:none;transition:all var(--transition-base)}.breadcrumb-item:hover{background:var(--color-primary-light)}.breadcrumb-separator{color:var(--color-text-secondary);font-size:var(--font-size-xs);user-select:none}.toolbar{align-items:center;background:var(--color-bg-primary);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:var(--space-4) var(--space-6)}.toolbar--blur{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:hsla(0,0%,100%,.6)}[data-theme=dark] .toolbar--blur{background:rgba(28,28,30,.6)}.toolbar-left,.toolbar-right{align-items:center;display:flex;gap:var(--space-2)}.toolbar-left{flex:1;gap:var(--space-4);min-width:0}.toolbar-title{color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toolbar-subtitle{color:var(--color-text-secondary);font-size:var(--font-size-sm);white-space:nowrap}.spinner{animation:spin .8s linear infinite;border:3px solid var(--color-border);border-radius:var(--radius-full);border-top-color:var(--color-primary);height:40px;width:40px}.spinner--sm{border-width:2px;height:24px;width:24px}.spinner--lg{border-width:4px;height:56px;width:56px}@keyframes spin{to{transform:rotate(1turn)}}.loading-state{align-items:center;display:flex;flex-direction:column;gap:var(--space-4);height:100%;justify-content:center;padding:var(--space-8)}.loading-state__text{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.empty-state{align-items:center;display:flex;flex-direction:column;gap:var(--space-4);height:100%;justify-content:center;padding:var(--space-8);text-align:center}.empty-state__icon{font-size:4rem;line-height:1;opacity:.5}.empty-state__title{color:var(--color-text-primary);font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);margin:0}.empty-state__description{color:var(--color-text-secondary);font-size:var(--font-size-base);margin:0;max-width:400px}.lightbox{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:var(--color-bg-overlay);inset:0;position:fixed;z-index:var(--z-modal)}.lightbox,.lightbox__close{align-items:center;display:flex;justify-content:center}.lightbox__close{backdrop-filter:blur(20px);background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-primary);cursor:pointer;font-size:var(--font-size-2xl);height:44px;position:absolute;right:var(--space-6);top:var(--space-6);transition:all var(--transition-base);width:44px;z-index:calc(var(--z-modal) + 1)}.lightbox__close:hover{background:var(--color-bg-muted);transform:scale(1.1)}.lightbox__content{max-height:90vh;max-width:90vw;position:relative}.lightbox__content,.lightbox__nav{align-items:center;display:flex;justify-content:center}.lightbox__nav{backdrop-filter:blur(20px);background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-primary);cursor:pointer;font-size:var(--font-size-2xl);height:56px;position:absolute;top:50%;transform:translateY(-50%);transition:all var(--transition-base);width:56px;z-index:calc(var(--z-modal) + 1)}.lightbox__nav:hover{background:var(--color-bg-muted);transform:translateY(-50%) scale(1.1)}.lightbox__nav--prev{left:var(--space-8)}.lightbox__nav--next{right:var(--space-8)}.lightbox__footer{align-items:center;backdrop-filter:blur(20px);background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-xl);bottom:var(--space-8);display:flex;flex-direction:column;gap:var(--space-2);left:50%;padding:var(--space-4) var(--space-6);position:absolute;transform:translateX(-50%);z-index:calc(var(--z-modal) + 1)}.lightbox-enter-active,.lightbox-leave-active{transition:opacity var(--transition-slow)}.lightbox-enter-from,.lightbox-leave-to{opacity:0}.zoom-controls{background:var(--color-bg-primary);box-shadow:var(--shadow-md);gap:var(--space-2);padding:var(--space-2) var(--space-4)}.zoom-btn,.zoom-controls{align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-full);display:flex}.zoom-btn{background:var(--color-bg-secondary);color:var(--color-text-primary);cursor:pointer;font-family:var(--font-family-sans);font-size:var(--font-size-sm);height:32px;justify-content:center;min-width:32px;padding:0 var(--space-3);transition:all var(--transition-base)}.zoom-btn:hover{background:var(--color-bg-muted)}.zoom-level{color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);min-width:50px;text-align:center}@media (max-width:768px){.nav-bar{flex-wrap:wrap;min-height:auto;padding:var(--space-3)}.nav-center{flex:1 1 100%;margin-top:var(--space-3);order:3}.sidebar{bottom:0;box-shadow:var(--shadow-xl);left:0;position:absolute;top:0;z-index:var(--z-dropdown)}.lightbox__nav{height:44px;width:44px}.lightbox__nav--prev{left:var(--space-4)}.lightbox__nav--next{right:var(--space-4)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cal.macconnachie/web-components",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Web components hosted on a CDN",
   "keywords": [
     "lit",
@@ -57,6 +57,7 @@
     "cdk:destroy": "yarn workspace cdn cdk destroy"
   },
   "dependencies": {
+    "axios": "^1.13.2",
     "lit": "^3.3.1"
   },
   "devDependencies": {