@cal.macconnachie/web-components 0.0.19 → 0.0.21

package/dist/index.js

@@ -63,7 +63,7 @@ const { is: Cs, defineProperty: Os, getOwnPropertyDescriptor: xs, getOwnProperty
       }
   }
   return s;
-} }, Ze = (t, e) => !Cs(t, e), gt = { attribute: !0, type: String, converter: ke, reflect: !1, useDefault: !1, hasChanged: Ze };
+} }, Xe = (t, e) => !Cs(t, e), gt = { attribute: !0, type: String, converter: ke, reflect: !1, useDefault: !1, hasChanged: Xe };
 Symbol.metadata ??= Symbol("metadata"), xe.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
 let Q = class extends HTMLElement {
   static addInitializer(e) {
@@ -178,7 +178,7 @@ let Q = class extends HTMLElement {
   requestUpdate(e, s, r) {
     if (e !== void 0) {
       const i = this.constructor, o = this[e];
-      if (r ??= i.getPropertyOptions(e), !((r.hasChanged ?? Ze)(o, s) || r.useDefault && r.reflect && o === this._$Ej?.get(e) && !this.hasAttribute(i._$Eu(e, r)))) return;
+      if (r ??= i.getPropertyOptions(e), !((r.hasChanged ?? Xe)(o, s) || r.useDefault && r.reflect && o === this._$Ej?.get(e) && !this.hasAttribute(i._$Eu(e, r)))) return;
       this.C(e, s, r);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
@@ -247,7 +247,7 @@ let Q = class extends HTMLElement {
   }
 };
 Q.elementStyles = [], Q.shadowRootOptions = { mode: "open" }, Q[de("elementProperties")] = /* @__PURE__ */ new Map(), Q[de("finalized")] = /* @__PURE__ */ new Map(), Ns?.({ ReactiveElement: Q }), (xe.reactiveElementVersions ??= []).push("2.1.1");
-const Xe = globalThis, Ce = Xe.trustedTypes, yt = Ce ? Ce.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, Vt = "$lit$", j = `lit$${Math.random().toFixed(9).slice(2)}$`, Wt = "?" + j, Ls = `<${Wt}>`, G = document, ue = () => G.createComment(""), pe = (t) => t === null || typeof t != "object" && typeof t != "function", Qe = Array.isArray, Is = (t) => Qe(t) || typeof t?.[Symbol.iterator] == "function", He = `[ 	
+const Ze = globalThis, Ce = Ze.trustedTypes, yt = Ce ? Ce.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, Vt = "$lit$", j = `lit$${Math.random().toFixed(9).slice(2)}$`, Wt = "?" + j, Ls = `<${Wt}>`, G = document, ue = () => G.createComment(""), pe = (t) => t === null || typeof t != "object" && typeof t != "function", Qe = Array.isArray, Is = (t) => Qe(t) || typeof t?.[Symbol.iterator] == "function", He = `[ 	
 \f\r]`, le = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, bt = /-->/g, wt = />/g, K = RegExp(`>|${He}(?:([^\\s"'>=/]+)(${He}*=${He}*(?:[^ 	
 \f\r"'\`<>=]|("|')|))|$)`, "g"), St = /'/g, $t = /"/g, Yt = /^(?:script|style|textarea|title)$/i, Bs = (t) => (e, ...s) => ({ _$litType$: t, strings: e, values: s }), w = Bs(1), M = Symbol.for("lit-noChange"), S = Symbol.for("lit-nothing"), At = /* @__PURE__ */ new WeakMap(), W = G.createTreeWalker(G, 129);
 function Jt(t, e) {
@@ -461,8 +461,8 @@ class zs {
     te(this, e);
   }
 }
-const Ks = { I: re }, Vs = Xe.litHtmlPolyfillSupport;
-Vs?.(fe, re), (Xe.litHtmlVersions ??= []).push("3.3.1");
+const Ks = { I: re }, Vs = Ze.litHtmlPolyfillSupport;
+Vs?.(fe, re), (Ze.litHtmlVersions ??= []).push("3.3.1");
 const Ws = (t, e, s) => {
   const r = s?.renderBefore ?? e;
   let i = r._$litPart$;
@@ -504,7 +504,7 @@ const Gt = (t) => (e, s) => {
     customElements.define(t, e);
   })) : customElements.define(t, e);
 };
-const Js = { attribute: !0, type: String, converter: ke, reflect: !1, hasChanged: Ze }, Gs = (t = Js, e, s) => {
+const Js = { attribute: !0, type: String, converter: ke, reflect: !1, hasChanged: Xe }, Gs = (t = Js, e, s) => {
   const { kind: r, metadata: i } = s;
   let o = globalThis.litPropertyMetadata.get(i);
   if (o === void 0 && globalThis.litPropertyMetadata.set(i, o = /* @__PURE__ */ new Map()), r === "setter" && ((t = Object.create(t)).wrapped = !0), o.set(s.name, t), r === "accessor") {
@@ -534,16 +534,16 @@ function O(t) {
 function T(t) {
   return O({ ...t, state: !0, attribute: !1 });
 }
-const Zs = (t, e, s) => (s.configurable = !0, s.enumerable = !0, Reflect.decorate && typeof e != "object" && Object.defineProperty(t, e, s), s);
+const Xs = (t, e, s) => (s.configurable = !0, s.enumerable = !0, Reflect.decorate && typeof e != "object" && Object.defineProperty(t, e, s), s);
 function tt(t, e) {
   return (s, r, i) => {
     const o = (n) => n.renderRoot?.querySelector(t) ?? null;
-    return Zs(s, r, { get() {
+    return Xs(s, r, { get() {
       return o(this);
     } });
   };
 }
-const Zt = { ATTRIBUTE: 1, CHILD: 2 }, Xt = (t) => (...e) => ({ _$litDirective$: t, values: e });
+const Xt = { ATTRIBUTE: 1, CHILD: 2 }, Zt = (t) => (...e) => ({ _$litDirective$: t, values: e });
 class Qt {
   constructor(e) {
   }
@@ -560,9 +560,9 @@ class Qt {
     return this.render(...s);
   }
 }
-const vt = Xt(class extends Qt {
+const vt = Zt(class extends Qt {
   constructor(t) {
-    if (super(t), t.type !== Zt.ATTRIBUTE || t.name !== "class" || t.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
+    if (super(t), t.type !== Xt.ATTRIBUTE || t.name !== "class" || t.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
   }
   render(t) {
     return " " + Object.keys(t).filter(((e) => t[e])).join(" ") + " ";
@@ -582,11 +582,11 @@ const vt = Xt(class extends Qt {
     return M;
   }
 });
-const { I: Xs } = Ks, Et = () => document.createComment(""), ce = (t, e, s) => {
+const { I: Zs } = Ks, Et = () => document.createComment(""), ce = (t, e, s) => {
   const r = t._$AA.parentNode, i = e === void 0 ? t._$AB : e._$AA;
   if (s === void 0) {
     const o = r.insertBefore(Et(), i), n = r.insertBefore(Et(), i);
-    s = new Xs(o, n, t, t.options);
+    s = new Zs(o, n, t, t.options);
   } else {
     const o = s._$AB.nextSibling, n = s._$AM, a = n !== t;
     if (a) {
@@ -609,9 +609,9 @@ const _t = (t, e, s) => {
   const r = /* @__PURE__ */ new Map();
   for (let i = e; i <= s; i++) r.set(t[i], i);
   return r;
-}, Tt = Xt(class extends Qt {
+}, Tt = Zt(class extends Qt {
   constructor(t) {
-    if (super(t), t.type !== Zt.CHILD) throw Error("repeat() can only be used in text expressions");
+    if (super(t), t.type !== Xt.CHILD) throw Error("repeat() can only be used in text expressions");
   }
   dt(t, e, s) {
     let r;
@@ -3085,7 +3085,7 @@ $.from = (t, e, s, r, i, o) => {
   const a = t && t.message ? t.message : "Error", l = e == null && t ? t.code : e;
   return $.call(n, a, l, s, r, i), t && n.cause == null && Object.defineProperty(n, "cause", { value: t, configurable: !0 }), n.name = t && t.name || "Error", o && Object.assign(n, o), n;
 };
-const Zr = null;
+const Xr = null;
 function Ve(t) {
   return d.isPlainObject(t) || d.isArray(t);
 }
@@ -3097,7 +3097,7 @@ function Ct(t, e, s) {
     return i = us(i), !s && o ? "[" + i + "]" : i;
   }).join(s ? "." : "") : e;
 }
-function Xr(t) {
+function Zr(t) {
   return d.isArray(t) && !t.some(Ve);
 }
 const Qr = d.toFlatObject(d, {}, null, function(e) {
@@ -3131,7 +3131,7 @@ function Ne(t, e, s) {
     if (p && !m && typeof p == "object") {
       if (d.endsWith(g, "{}"))
         g = r ? g : g.slice(0, -2), p = JSON.stringify(p);
-      else if (d.isArray(p) && Xr(p) || (d.isFileList(p) || d.endsWith(g, "[]")) && (b = d.toArray(p)))
+      else if (d.isArray(p) && Zr(p) || (d.isFileList(p) || d.endsWith(g, "[]")) && (b = d.toArray(p)))
         return g = us(g), b.forEach(function(E, k) {
           !(d.isUndefined(E) || E === null) && e.append(
             // eslint-disable-next-line no-nested-ternary
@@ -3733,7 +3733,7 @@ function ws(t, e, s) {
   return t && (r || s == !1) ? _i(t, e) : e;
 }
 const Ut = (t) => t instanceof D ? { ...t } : t;
-function Z(t, e) {
+function X(t, e) {
   e = e || {};
   const s = {};
   function r(h, c, u, f) {
@@ -3798,7 +3798,7 @@ function Z(t, e) {
   }), s;
 }
 const Ss = (t) => {
-  const e = Z({}, t);
+  const e = X({}, t);
   let { data: s, withXSRFToken: r, xsrfHeaderName: i, xsrfCookieName: o, headers: n, auth: a } = e;
   if (e.headers = n = D.from(n), e.url = fs(ws(e.baseURL, e.url, e.allowAbsoluteUrls), t.params, t.paramsSerializer), a && n.set(
     "Authorization",
@@ -4041,8 +4041,8 @@ const Ss = (t) => {
           method: "POST",
           body: b,
           duplex: "half"
-        }), X;
-        if (d.isFormData(b) && (X = H.headers.get("content-type")) && Ie.setContentType(X), H.body) {
+        }), Z;
+        if (d.isFormData(b) && (Z = H.headers.get("content-type")) && Ie.setContentType(Z), H.body) {
           const [Be, $e] = Pt(
             ct,
             Oe(Dt(q))
@@ -4068,8 +4068,8 @@ const Ss = (t) => {
         ["status", "statusText", "headers"].forEach((ut) => {
           H[ut] = B[ut];
         });
-        const X = d.toFiniteNumber(B.headers.get("content-length")), [Be, $e] = R && Pt(
-          X,
+        const Z = d.toFiniteNumber(B.headers.get("content-length")), [Be, $e] = R && Pt(
+          Z,
           Oe(Dt(R), !0)
         ) || [];
         B = new r(
@@ -4081,8 +4081,8 @@ const Ss = (t) => {
       }
       U = U || "text";
       let _s = await u[d.findKey(u, U) || "text"](B, p);
-      return !dt && z && z(), await new Promise((H, X) => {
-        bs(H, X, {
+      return !dt && z && z(), await new Promise((H, Z) => {
+        bs(H, Z, {
           data: _s,
           headers: D.from(B.headers),
           status: B.status,
@@ -4114,7 +4114,7 @@ const Ss = (t) => {
 };
 $s();
 const ot = {
-  http: Zr,
+  http: Xr,
   xhr: ki,
   fetch: {
     get: $s
@@ -4269,7 +4269,7 @@ class J {
     }
   }
   _request(e, s) {
-    typeof e == "string" ? (s = s || {}, s.url = e) : s = e || {}, s = Z(this.defaults, s);
+    typeof e == "string" ? (s = s || {}, s.url = e) : s = e || {}, s = X(this.defaults, s);
     const { transitional: r, paramsSerializer: i, headers: o } = s;
     r !== void 0 && Te.assertOptions(r, {
       silentJSONParsing: I.transitional(I.boolean),
@@ -4331,14 +4331,14 @@ class J {
     return c;
   }
   getUri(e) {
-    e = Z(this.defaults, e);
+    e = X(this.defaults, e);
     const s = ws(e.baseURL, e.url, e.allowAbsoluteUrls);
     return fs(s, e.params, e.paramsSerializer);
   }
 }
 d.forEach(["delete", "get", "head", "options"], function(e) {
   J.prototype[e] = function(s, r) {
-    return this.request(Z(r || {}, {
+    return this.request(X(r || {}, {
       method: e,
       url: s,
       data: (r || {}).data
@@ -4348,7 +4348,7 @@ d.forEach(["delete", "get", "head", "options"], function(e) {
 d.forEach(["post", "put", "patch"], function(e) {
   function s(r) {
     return function(o, n, a) {
-      return this.request(Z(a || {}, {
+      return this.request(X(a || {}, {
         method: e,
         headers: r ? {
           "Content-Type": "multipart/form-data"
@@ -4518,7 +4518,7 @@ Object.entries(Ye).forEach(([t, e]) => {
 function Es(t) {
   const e = new J(t), s = ss(J.prototype.request, e);
   return d.extend(s, J.prototype, e, { allOwnKeys: !0 }), d.extend(s, e, null, { allOwnKeys: !0 }), s.create = function(i) {
-    return Es(Z(t, i));
+    return Es(X(t, i));
   }, s;
 }
 const C = Es(be);
@@ -4535,7 +4535,7 @@ C.all = function(e) {
 };
 C.spread = Bi;
 C.isAxiosError = Hi;
-C.mergeConfig = Z;
+C.mergeConfig = X;
 C.AxiosHeaders = D;
 C.formToJSON = (t) => gs(d.isHTMLForm(t) ? new FormData(t) : t);
 C.getAdapter = As.getAdapter;
@@ -4556,8 +4556,8 @@ const ji = ({ baseUrl: t, apiBaseUrl: e }) => {
   let o = !1, n = null;
   return i.interceptors.request.use(
     (a) => {
-      const l = s.getAuthToken("AUTH_TOKEN");
-      return l && a.headers && (a.headers.Authorization = `Bearer ${l}`), a;
+      const l = s.getAuthToken("AUTH_TOKEN"), h = s.getAuthToken("ACCESS_TOKEN");
+      return l && a.headers && (a.headers.Authorization = `Bearer ${l}`, a.headers["X-Access-Token"] = h), a;
     },
     (a) => Promise.reject(a)
   ), i.interceptors.response.use(

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)}}.icon-btn{align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-primary);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)}}
+: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--ghost-danger{background-color:transparent;border-color:transparent;color:var(--color-text-secondary)}.base-button--ghost-danger:hover:not(:disabled):not(.base-button--confirming){background-color:var(--color-error-bg);border-color:var(--color-error);color:var(--color-error)}.base-button--ghost-warning{background-color:transparent;border-color:transparent;color:var(--color-text-secondary)}.base-button--ghost-warning:hover:not(:disabled):not(.base-button--confirming){background-color:var(--color-warning-bg);border-color:var(--color-warning);color:var(--color-warning)}.base-button--ghost-info{background-color:transparent;border-color:transparent;color:var(--color-text-secondary)}.base-button--ghost-info:hover:not(:disabled):not(.base-button--confirming){background-color:var(--color-info-bg);border-color:var(--color-info);color:var(--color-info)}.base-button--ghost-success{background-color:transparent;border-color:transparent;color:var(--color-text-secondary)}.base-button--ghost-success:hover:not(:disabled):not(.base-button--confirming){background-color:var(--color-success-bg);border-color:var(--color-success);color:var(--color-success)}.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)}}.icon-btn{align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-primary);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.19",
+  "version": "0.0.21",
   "description": "Web components hosted on a CDN",
   "keywords": [
     "lit",