@cal.macconnachie/web-components 0.0.11 → 0.0.13

package/dist/components/auth.js

@@ -1,5 +1,5 @@
 const z = globalThis, Z = z.ShadowRoot && (z.ShadyCSS === void 0 || z.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Q = Symbol(), ot = /* @__PURE__ */ new WeakMap();
-let wt = class {
+let $t = class {
   constructor(t, s, i) {
     if (this._$cssResult$ = !0, i !== Q) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t, this.t = s;
@@ -17,13 +17,13 @@ let wt = class {
     return this.cssText;
   }
 };
-const xt = (e) => new wt(typeof e == "string" ? e : e + "", void 0, Q), Et = (e, ...t) => {
+const xt = (e) => new $t(typeof e == "string" ? e : e + "", void 0, Q), Et = (e, ...t) => {
   const s = e.length === 1 ? e[0] : t.reduce(((i, r, o) => i + ((a) => {
     if (a._$cssResult$ === !0) return a.cssText;
     if (typeof a == "number") return a;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + a + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(r) + e[o + 1]), e[0]);
-  return new wt(s, e, Q);
+  return new $t(s, e, Q);
 }, Tt = (e, t) => {
   if (Z) e.adoptedStyleSheets = t.map(((s) => s instanceof CSSStyleSheet ? s : s.styleSheet));
   else for (const s of t) {
@@ -279,8 +279,8 @@ class B {
     for (; (r = O.nextNode()) !== null && n.length < c; ) {
       if (r.nodeType === 1) {
         if (r.hasAttributes()) for (const l of r.getAttributeNames()) if (l.endsWith(bt)) {
-          const p = d[a++], u = r.getAttribute(l).split(C), $ = /([.?@])?(.*)/.exec(p);
-          n.push({ type: 1, index: o, name: $[2], strings: u, ctor: $[1] === "." ? zt : $[1] === "?" ? Yt : $[1] === "@" ? Kt : V }), r.removeAttribute(l);
+          const p = d[a++], u = r.getAttribute(l).split(C), w = /([.?@])?(.*)/.exec(p);
+          n.push({ type: 1, index: o, name: w[2], strings: u, ctor: w[1] === "." ? zt : w[1] === "?" ? Yt : w[1] === "@" ? Kt : V }), r.removeAttribute(l);
         } else l.startsWith(C) && (n.push({ type: 6, index: o }), r.removeAttribute(l));
         if (At.test(r.tagName)) {
           const l = r.textContent.split(C), p = l.length - 1;
@@ -609,7 +609,7 @@ const yt = (e, t, s) => {
   const i = /* @__PURE__ */ new Map();
   for (let r = t; r <= s; r++) i.set(e[r], r);
   return i;
-}, $t = kt(class extends Ct {
+}, wt = kt(class extends Ct {
   constructor(e) {
     if (super(e), e.type !== St.CHILD) throw Error("repeat() can only be used in text expressions");
   }
@@ -628,24 +628,24 @@ const yt = (e, t, s) => {
     const r = re(e), { values: o, keys: a } = this.dt(t, s, i);
     if (!Array.isArray(r)) return this.ut = a, o;
     const c = this.ut ??= [], n = [];
-    let h, d, l = 0, p = r.length - 1, u = 0, $ = o.length - 1;
-    for (; l <= p && u <= $; ) if (r[l] === null) l++;
+    let h, d, l = 0, p = r.length - 1, u = 0, w = o.length - 1;
+    for (; l <= p && u <= w; ) if (r[l] === null) l++;
     else if (r[p] === null) p--;
     else if (c[l] === a[u]) n[u] = P(r[l], o[u]), l++, u++;
-    else if (c[p] === a[$]) n[$] = P(r[p], o[$]), p--, $--;
-    else if (c[l] === a[$]) n[$] = P(r[l], o[$]), L(e, n[$ + 1], r[l]), l++, $--;
+    else if (c[p] === a[w]) n[w] = P(r[p], o[w]), p--, w--;
+    else if (c[l] === a[w]) n[w] = P(r[l], o[w]), L(e, n[w + 1], r[l]), l++, w--;
     else if (c[p] === a[u]) n[u] = P(r[p], o[u]), L(e, r[l], r[p]), p--, u++;
-    else if (h === void 0 && (h = yt(a, u, $), d = yt(c, l, p)), h.has(c[l])) if (h.has(c[p])) {
+    else if (h === void 0 && (h = yt(a, u, w), d = yt(c, l, p)), h.has(c[l])) if (h.has(c[p])) {
       const v = d.get(a[u]), A = v !== void 0 ? r[v] : null;
       if (A === null) {
-        const w = L(e, r[l]);
-        P(w, o[u]), n[u] = w;
+        const $ = L(e, r[l]);
+        P($, o[u]), n[u] = $;
       } else n[u] = P(A, o[u]), L(e, r[l], A), r[v] = null;
       u++;
     } else G(r[p]), p--;
     else G(r[l]), l++;
-    for (; u <= $; ) {
-      const v = L(e, n[$ + 1]);
+    for (; u <= w; ) {
+      const v = L(e, n[w + 1]);
       P(v, o[u]), n[u++] = v;
     }
     for (; l <= p; ) {
@@ -674,7 +674,7 @@ const yt = (e, t, s) => {
       refreshToken: p,
       idToken: u
     }) => {
-      const $ = await fetch(`${e}${t.login}`, {
+      const w = await fetch(`${e}${t.login}`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
@@ -687,11 +687,11 @@ const yt = (e, t, s) => {
           idToken: u
         })
       });
-      if (!$.ok) {
-        const v = await $.json();
+      if (!w.ok) {
+        const v = await w.json();
         throw new Error(v.message || v.error || "Login failed");
       }
-      return $.json();
+      return w.json();
     },
     logout: async ({
       accessToken: h,
@@ -753,7 +753,7 @@ const yt = (e, t, s) => {
       phone_number: l,
       family_name: p,
       given_name: u,
-      code: $
+      code: w
     }) => {
       const v = await fetch(`${e}${t.register}`, {
         method: "POST",
@@ -766,7 +766,7 @@ const yt = (e, t, s) => {
           phone_number: l,
           family_name: p,
           given_name: u,
-          code: $
+          code: w
         })
       });
       if (!v.ok) {
@@ -830,11 +830,11 @@ const yt = (e, t, s) => {
       maxAge: l,
       path: p = "/",
       secure: u = window.location.protocol === "https:",
-      sameSite: $ = "lax",
+      sameSite: w = "lax",
       domain: v
     } = d;
     let A = `${encodeURIComponent(n)}=${encodeURIComponent(h)}`;
-    l !== void 0 && (A += `; Max-Age=${l}`), A += `; Path=${p}`, u && (A += "; Secure"), A += `; SameSite=${$}`, v && (A += `; Domain=${v}`), document.cookie = A;
+    l !== void 0 && (A += `; Max-Age=${l}`), A += `; Path=${p}`, u && (A += "; Secure"), A += `; SameSite=${w}`, v && (A += `; Domain=${v}`), document.cookie = A;
   }, t = (n) => {
     const h = encodeURIComponent(n) + "=", d = document.cookie.split(";");
     for (let l = 0; l < d.length; l++) {
@@ -882,20 +882,20 @@ const yt = (e, t, s) => {
     domain: e,
     clientId: i,
     redirectUri: he(r)
-  }, a = (w) => {
-    const _ = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~", k = new Uint8Array(w);
+  }, a = ($) => {
+    const _ = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~", k = new Uint8Array($);
     return crypto.getRandomValues(k), Array.from(k).map((E) => _[E % _.length]).join("");
-  }, c = async (w) => {
-    const k = new TextEncoder().encode(w), E = await crypto.subtle.digest("SHA-256", k);
+  }, c = async ($) => {
+    const k = new TextEncoder().encode($), E = await crypto.subtle.digest("SHA-256", k);
     return btoa(String.fromCharCode(...new Uint8Array(E))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
   }, n = async () => {
-    const w = a(128), _ = await c(w);
-    return sessionStorage.setItem("pkce_code_verifier", w), { codeVerifier: w, codeChallenge: _ };
+    const $ = a(128), _ = await c($);
+    return sessionStorage.setItem("pkce_code_verifier", $), { codeVerifier: $, codeChallenge: _ };
   }, h = () => {
-    const w = a(32);
-    return sessionStorage.setItem("oauth_state", w), w;
+    const $ = a(32);
+    return sessionStorage.setItem("oauth_state", $), $;
   }, d = async () => {
-    const { codeChallenge: w } = await n(), _ = h(), k = new URLSearchParams({
+    const { codeChallenge: $ } = await n(), _ = h(), k = new URLSearchParams({
       response_type: "code",
       client_id: o.clientId,
       redirect_uri: o.redirectUri,
@@ -903,15 +903,15 @@ const yt = (e, t, s) => {
       scope: "openid email profile",
       state: _,
       code_challenge_method: "S256",
-      code_challenge: w,
+      code_challenge: $,
       prompt: "select_account"
     });
     return `${o.domain}/oauth2/authorize?${k.toString()}`;
   }, l = async () => {
-    const w = await d();
-    window.location.href = w;
+    const $ = await d();
+    window.location.href = $;
   }, p = async () => {
-    const { codeChallenge: w } = await n(), _ = h(), k = new URLSearchParams({
+    const { codeChallenge: $ } = await n(), _ = h(), k = new URLSearchParams({
       response_type: "code",
       client_id: o.clientId,
       redirect_uri: o.redirectUri,
@@ -919,32 +919,32 @@ const yt = (e, t, s) => {
       scope: "openid email profile",
       state: _,
       code_challenge_method: "S256",
-      code_challenge: w
+      code_challenge: $
     });
     return `${o.domain}/oauth2/authorize?${k.toString()}`;
   }, u = async () => {
-    const w = await p();
-    window.location.href = w;
-  }, $ = (w) => {
+    const $ = await p();
+    window.location.href = $;
+  }, w = ($) => {
     const _ = sessionStorage.getItem("oauth_state");
-    return sessionStorage.removeItem("oauth_state"), _ === w;
+    return sessionStorage.removeItem("oauth_state"), _ === $;
   }, v = () => {
-    const w = sessionStorage.getItem("pkce_code_verifier");
-    return sessionStorage.removeItem("pkce_code_verifier"), w;
+    const $ = sessionStorage.getItem("pkce_code_verifier");
+    return sessionStorage.removeItem("pkce_code_verifier"), $;
   };
   return {
     redirectToGoogleAuth: l,
     redirectToAppleAuth: u,
-    validateState: $,
+    validateState: w,
     getCodeVerifier: v,
-    exchangeCodeForTokens: async (w) => {
+    exchangeCodeForTokens: async ($) => {
       const _ = v();
       if (!_)
         throw new Error("PKCE code verifier not found. Please restart the authentication flow.");
       const k = new URLSearchParams({
         grant_type: "authorization_code",
         client_id: o.clientId,
-        code: w,
+        code: $,
         redirect_uri: o.redirectUri,
         code_verifier: _
       }), E = await fetch(`${o.domain}/oauth2/token`, {
@@ -2115,7 +2115,7 @@ let m = class extends H {
         <div class="otp-section">
           <label class="otp-label">Enter 6-digit code</label>
           <div class="otp-inputs" role="group" aria-label="One time code">
-            ${$t(
+            ${wt(
         Array.from({ length: 6 }, (e, t) => t),
         (e) => e,
         (e) => y`
@@ -2185,7 +2185,7 @@ let m = class extends H {
         <div class="otp-section">
           <label class="otp-label">Enter 6-digit code</label>
           <div class="otp-inputs" role="group" aria-label="One time code">
-            ${$t(
+            ${wt(
         Array.from({ length: 6 }, (t, s) => s),
         (t) => t,
         (t) => y`
@@ -2506,7 +2506,7 @@ f([
   it(".modal-body")
 ], m.prototype, "modalBody", 2);
 m = f([
-  Zt("auth")
+  Zt("auth-drawer")
 ], m);
 export {
   m as Auth

package/dist/components/theme-toggle.js

@@ -17,12 +17,12 @@ let st = class {
     return this.cssText;
   }
 };
-const ht = (r) => new st(typeof r == "string" ? r : r + "", void 0, I), at = (r, ...t) => {
-  const e = r.length === 1 ? r[0] : t.reduce(((s, i, n) => s + ((o) => {
-    if (o._$cssResult$ === !0) return o.cssText;
-    if (typeof o == "number") return o;
-    throw Error("Value passed to 'css' function must be a 'css' function result: " + o + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-  })(i) + r[n + 1]), r[0]);
+const at = (r) => new st(typeof r == "string" ? r : r + "", void 0, I), ht = (r, ...t) => {
+  const e = r.length === 1 ? r[0] : t.reduce(((s, i, o) => s + ((n) => {
+    if (n._$cssResult$ === !0) return n.cssText;
+    if (typeof n == "number") return n;
+    throw Error("Value passed to 'css' function must be a 'css' function result: " + n + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+  })(i) + r[o + 1]), r[0]);
   return new st(e, r, I);
 }, lt = (r, t) => {
   if (L) r.adoptedStyleSheets = t.map(((e) => e instanceof CSSStyleSheet ? e : e.styleSheet));
@@ -33,7 +33,7 @@ const ht = (r) => new st(typeof r == "string" ? r : r + "", void 0, I), at = (r,
 }, J = L ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const s of t.cssRules) e += s.cssText;
-  return ht(e);
+  return at(e);
 })(r) : r;
 const { is: ct, defineProperty: dt, getOwnPropertyDescriptor: pt, getOwnPropertyNames: ut, getOwnPropertySymbols: $t, getPrototypeOf: mt } = Object, N = globalThis, Z = N.trustedTypes, gt = Z ? Z.emptyScript : "", ft = N.reactiveElementPolyfillSupport, w = (r, t) => r, H = { toAttribute(r, t) {
   switch (t) {
@@ -65,7 +65,7 @@ const { is: ct, defineProperty: dt, getOwnPropertyDescriptor: pt, getOwnProperty
   return e;
 } }, B = (r, t) => !ct(r, t), F = { attribute: !0, type: String, converter: H, reflect: !1, useDefault: !1, hasChanged: B };
 Symbol.metadata ??= Symbol("metadata"), N.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
-let A = class extends HTMLElement {
+let b = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ??= []).push(t);
   }
@@ -79,14 +79,14 @@ let A = class extends HTMLElement {
     }
   }
   static getPropertyDescriptor(t, e, s) {
-    const { get: i, set: n } = pt(this.prototype, t) ?? { get() {
+    const { get: i, set: o } = pt(this.prototype, t) ?? { get() {
       return this[e];
-    }, set(o) {
-      this[e] = o;
+    }, set(n) {
+      this[e] = n;
     } };
-    return { get: i, set(o) {
-      const a = i?.call(this);
-      n?.call(this, o), this.requestUpdate(t, a, s);
+    return { get: i, set(n) {
+      const h = i?.call(this);
+      o?.call(this, n), this.requestUpdate(t, h, s);
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
@@ -162,29 +162,29 @@ let A = class extends HTMLElement {
   _$ET(t, e) {
     const s = this.constructor.elementProperties.get(t), i = this.constructor._$Eu(t, s);
     if (i !== void 0 && s.reflect === !0) {
-      const n = (s.converter?.toAttribute !== void 0 ? s.converter : H).toAttribute(e, s.type);
-      this._$Em = t, n == null ? this.removeAttribute(i) : this.setAttribute(i, n), this._$Em = null;
+      const o = (s.converter?.toAttribute !== void 0 ? s.converter : H).toAttribute(e, s.type);
+      this._$Em = t, o == null ? this.removeAttribute(i) : this.setAttribute(i, o), this._$Em = null;
     }
   }
   _$AK(t, e) {
     const s = this.constructor, i = s._$Eh.get(t);
     if (i !== void 0 && this._$Em !== i) {
-      const n = s.getPropertyOptions(i), o = typeof n.converter == "function" ? { fromAttribute: n.converter } : n.converter?.fromAttribute !== void 0 ? n.converter : H;
+      const o = s.getPropertyOptions(i), n = typeof o.converter == "function" ? { fromAttribute: o.converter } : o.converter?.fromAttribute !== void 0 ? o.converter : H;
       this._$Em = i;
-      const a = o.fromAttribute(e, n.type);
-      this[i] = a ?? this._$Ej?.get(i) ?? a, this._$Em = null;
+      const h = n.fromAttribute(e, o.type);
+      this[i] = h ?? this._$Ej?.get(i) ?? h, this._$Em = null;
     }
   }
   requestUpdate(t, e, s) {
     if (t !== void 0) {
-      const i = this.constructor, n = this[t];
-      if (s ??= i.getPropertyOptions(t), !((s.hasChanged ?? B)(n, e) || s.useDefault && s.reflect && n === this._$Ej?.get(t) && !this.hasAttribute(i._$Eu(t, s)))) return;
+      const i = this.constructor, o = this[t];
+      if (s ??= i.getPropertyOptions(t), !((s.hasChanged ?? B)(o, e) || s.useDefault && s.reflect && o === this._$Ej?.get(t) && !this.hasAttribute(i._$Eu(t, s)))) return;
       this.C(t, e, s);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
   }
-  C(t, e, { useDefault: s, reflect: i, wrapped: n }, o) {
-    s && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(t) && (this._$Ej.set(t, o ?? e ?? this[t]), n !== !0 || o !== void 0) || (this._$AL.has(t) || (this.hasUpdated || s || (e = void 0), this._$AL.set(t, e)), i === !0 && this._$Em !== t && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t));
+  C(t, e, { useDefault: s, reflect: i, wrapped: o }, n) {
+    s && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(t) && (this._$Ej.set(t, n ?? e ?? this[t]), o !== !0 || n !== void 0) || (this._$AL.has(t) || (this.hasUpdated || s || (e = void 0), this._$AL.set(t, e)), i === !0 && this._$Em !== t && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t));
   }
   async _$EP() {
     this.isUpdatePending = !0;
@@ -203,13 +203,13 @@ let A = class extends HTMLElement {
     if (!this.isUpdatePending) return;
     if (!this.hasUpdated) {
       if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
-        for (const [i, n] of this._$Ep) this[i] = n;
+        for (const [i, o] of this._$Ep) this[i] = o;
         this._$Ep = void 0;
       }
       const s = this.constructor.elementProperties;
-      if (s.size > 0) for (const [i, n] of s) {
-        const { wrapped: o } = n, a = this[i];
-        o !== !0 || this._$AL.has(i) || a === void 0 || this.C(i, void 0, n, a);
+      if (s.size > 0) for (const [i, o] of s) {
+        const { wrapped: n } = o, h = this[i];
+        n !== !0 || this._$AL.has(i) || h === void 0 || this.C(i, void 0, o, h);
       }
     }
     let t = !1;
@@ -246,56 +246,56 @@ let A = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-A.elementStyles = [], A.shadowRootOptions = { mode: "open" }, A[w("elementProperties")] = /* @__PURE__ */ new Map(), A[w("finalized")] = /* @__PURE__ */ new Map(), ft?.({ ReactiveElement: A }), (N.reactiveElementVersions ??= []).push("2.1.1");
+b.elementStyles = [], b.shadowRootOptions = { mode: "open" }, b[w("elementProperties")] = /* @__PURE__ */ new Map(), b[w("finalized")] = /* @__PURE__ */ new Map(), ft?.({ ReactiveElement: b }), (N.reactiveElementVersions ??= []).push("2.1.1");
 const V = globalThis, z = V.trustedTypes, G = z ? z.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, it = "$lit$", m = `lit$${Math.random().toFixed(9).slice(2)}$`, rt = "?" + m, _t = `<${rt}>`, y = document, P = () => y.createComment(""), x = (r) => r === null || typeof r != "object" && typeof r != "function", q = Array.isArray, yt = (r) => q(r) || typeof r?.[Symbol.iterator] == "function", D = `[ 	
 \f\r]`, S = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Q = /-->/g, X = />/g, f = RegExp(`>|${D}(?:([^\\s"'>=/]+)(${D}*=${D}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Y = /'/g, tt = /"/g, nt = /^(?:script|style|textarea|title)$/i, At = (r) => (t, ...e) => ({ _$litType$: r, strings: t, values: e }), j = At(1), v = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), et = /* @__PURE__ */ new WeakMap(), _ = y.createTreeWalker(y, 129);
-function ot(r, t) {
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Y = /'/g, tt = /"/g, ot = /^(?:script|style|textarea|title)$/i, bt = (r) => (t, ...e) => ({ _$litType$: r, strings: t, values: e }), j = bt(1), v = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), et = /* @__PURE__ */ new WeakMap(), _ = y.createTreeWalker(y, 129);
+function nt(r, t) {
   if (!q(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return G !== void 0 ? G.createHTML(t) : t;
 }
 const vt = (r, t) => {
   const e = r.length - 1, s = [];
-  let i, n = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = S;
-  for (let a = 0; a < e; a++) {
-    const h = r[a];
+  let i, o = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", n = S;
+  for (let h = 0; h < e; h++) {
+    const a = r[h];
     let c, p, l = -1, u = 0;
-    for (; u < h.length && (o.lastIndex = u, p = o.exec(h), p !== null); ) u = o.lastIndex, o === S ? p[1] === "!--" ? o = Q : p[1] !== void 0 ? o = X : p[2] !== void 0 ? (nt.test(p[2]) && (i = RegExp("</" + p[2], "g")), o = f) : p[3] !== void 0 && (o = f) : o === f ? p[0] === ">" ? (o = i ?? S, l = -1) : p[1] === void 0 ? l = -2 : (l = o.lastIndex - p[2].length, c = p[1], o = p[3] === void 0 ? f : p[3] === '"' ? tt : Y) : o === tt || o === Y ? o = f : o === Q || o === X ? o = S : (o = f, i = void 0);
-    const $ = o === f && r[a + 1].startsWith("/>") ? " " : "";
-    n += o === S ? h + _t : l >= 0 ? (s.push(c), h.slice(0, l) + it + h.slice(l) + m + $) : h + m + (l === -2 ? a : $);
+    for (; u < a.length && (n.lastIndex = u, p = n.exec(a), p !== null); ) u = n.lastIndex, n === S ? p[1] === "!--" ? n = Q : p[1] !== void 0 ? n = X : p[2] !== void 0 ? (ot.test(p[2]) && (i = RegExp("</" + p[2], "g")), n = f) : p[3] !== void 0 && (n = f) : n === f ? p[0] === ">" ? (n = i ?? S, l = -1) : p[1] === void 0 ? l = -2 : (l = n.lastIndex - p[2].length, c = p[1], n = p[3] === void 0 ? f : p[3] === '"' ? tt : Y) : n === tt || n === Y ? n = f : n === Q || n === X ? n = S : (n = f, i = void 0);
+    const $ = n === f && r[h + 1].startsWith("/>") ? " " : "";
+    o += n === S ? a + _t : l >= 0 ? (s.push(c), a.slice(0, l) + it + a.slice(l) + m + $) : a + m + (l === -2 ? h : $);
   }
-  return [ot(r, n + (r[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
+  return [nt(r, o + (r[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
 };
-class O {
+class k {
   constructor({ strings: t, _$litType$: e }, s) {
     let i;
     this.parts = [];
-    let n = 0, o = 0;
-    const a = t.length - 1, h = this.parts, [c, p] = vt(t, e);
-    if (this.el = O.createElement(c, s), _.currentNode = this.el.content, e === 2 || e === 3) {
+    let o = 0, n = 0;
+    const h = t.length - 1, a = this.parts, [c, p] = vt(t, e);
+    if (this.el = k.createElement(c, s), _.currentNode = this.el.content, e === 2 || e === 3) {
       const l = this.el.content.firstChild;
       l.replaceWith(...l.childNodes);
     }
-    for (; (i = _.nextNode()) !== null && h.length < a; ) {
+    for (; (i = _.nextNode()) !== null && a.length < h; ) {
       if (i.nodeType === 1) {
         if (i.hasAttributes()) for (const l of i.getAttributeNames()) if (l.endsWith(it)) {
-          const u = p[o++], $ = i.getAttribute(l).split(m), k = /([.?@])?(.*)/.exec(u);
-          h.push({ type: 1, index: n, name: k[2], strings: $, ctor: k[1] === "." ? Et : k[1] === "?" ? St : k[1] === "@" ? wt : R }), i.removeAttribute(l);
-        } else l.startsWith(m) && (h.push({ type: 6, index: n }), i.removeAttribute(l));
-        if (nt.test(i.tagName)) {
+          const u = p[n++], $ = i.getAttribute(l).split(m), T = /([.?@])?(.*)/.exec(u);
+          a.push({ type: 1, index: o, name: T[2], strings: $, ctor: T[1] === "." ? Et : T[1] === "?" ? St : T[1] === "@" ? wt : R }), i.removeAttribute(l);
+        } else l.startsWith(m) && (a.push({ type: 6, index: o }), i.removeAttribute(l));
+        if (ot.test(i.tagName)) {
           const l = i.textContent.split(m), u = l.length - 1;
           if (u > 0) {
             i.textContent = z ? z.emptyScript : "";
-            for (let $ = 0; $ < u; $++) i.append(l[$], P()), _.nextNode(), h.push({ type: 2, index: ++n });
+            for (let $ = 0; $ < u; $++) i.append(l[$], P()), _.nextNode(), a.push({ type: 2, index: ++o });
             i.append(l[u], P());
           }
         }
-      } else if (i.nodeType === 8) if (i.data === rt) h.push({ type: 2, index: n });
+      } else if (i.nodeType === 8) if (i.data === rt) a.push({ type: 2, index: o });
       else {
         let l = -1;
-        for (; (l = i.data.indexOf(m, l + 1)) !== -1; ) h.push({ type: 7, index: n }), l += m.length - 1;
+        for (; (l = i.data.indexOf(m, l + 1)) !== -1; ) a.push({ type: 7, index: o }), l += m.length - 1;
       }
-      n++;
+      o++;
     }
   }
   static createElement(t, e) {
@@ -303,13 +303,13 @@ class O {
     return s.innerHTML = t, s;
   }
 }
-function b(r, t, e = r, s) {
+function A(r, t, e = r, s) {
   if (t === v) return t;
   let i = s !== void 0 ? e._$Co?.[s] : e._$Cl;
-  const n = x(t) ? void 0 : t._$litDirective$;
-  return i?.constructor !== n && (i?._$AO?.(!1), n === void 0 ? i = void 0 : (i = new n(r), i._$AT(r, e, s)), s !== void 0 ? (e._$Co ??= [])[s] = i : e._$Cl = i), i !== void 0 && (t = b(r, i._$AS(r, t.values), i, s)), t;
+  const o = x(t) ? void 0 : t._$litDirective$;
+  return i?.constructor !== o && (i?._$AO?.(!1), o === void 0 ? i = void 0 : (i = new o(r), i._$AT(r, e, s)), s !== void 0 ? (e._$Co ??= [])[s] = i : e._$Cl = i), i !== void 0 && (t = A(r, i._$AS(r, t.values), i, s)), t;
 }
-class bt {
+class At {
   constructor(t, e) {
     this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
   }
@@ -322,13 +322,13 @@ class bt {
   u(t) {
     const { el: { content: e }, parts: s } = this._$AD, i = (t?.creationScope ?? y).importNode(e, !0);
     _.currentNode = i;
-    let n = _.nextNode(), o = 0, a = 0, h = s[0];
-    for (; h !== void 0; ) {
-      if (o === h.index) {
+    let o = _.nextNode(), n = 0, h = 0, a = s[0];
+    for (; a !== void 0; ) {
+      if (n === a.index) {
         let c;
-        h.type === 2 ? c = new U(n, n.nextSibling, this, t) : h.type === 1 ? c = new h.ctor(n, h.name, h.strings, this, t) : h.type === 6 && (c = new Ct(n, this, t)), this._$AV.push(c), h = s[++a];
+        a.type === 2 ? c = new O(o, o.nextSibling, this, t) : a.type === 1 ? c = new a.ctor(o, a.name, a.strings, this, t) : a.type === 6 && (c = new Ct(o, this, t)), this._$AV.push(c), a = s[++h];
       }
-      o !== h?.index && (n = _.nextNode(), o++);
+      n !== a?.index && (o = _.nextNode(), n++);
     }
     return _.currentNode = y, i;
   }
@@ -337,7 +337,7 @@ class bt {
     for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(t, s, e), e += s.strings.length - 2) : s._$AI(t[e])), e++;
   }
 }
-class U {
+class O {
   get _$AU() {
     return this._$AM?._$AU ?? this._$Cv;
   }
@@ -356,7 +356,7 @@ class U {
     return this._$AB;
   }
   _$AI(t, e = this) {
-    t = b(this, t, e), x(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== v && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : yt(t) ? this.k(t) : this._(t);
+    t = A(this, t, e), x(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== v && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : yt(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -368,22 +368,22 @@ class U {
     this._$AH !== d && x(this._$AH) ? this._$AA.nextSibling.data = t : this.T(y.createTextNode(t)), this._$AH = t;
   }
   $(t) {
-    const { values: e, _$litType$: s } = t, i = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = O.createElement(ot(s.h, s.h[0]), this.options)), s);
+    const { values: e, _$litType$: s } = t, i = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = k.createElement(nt(s.h, s.h[0]), this.options)), s);
     if (this._$AH?._$AD === i) this._$AH.p(e);
     else {
-      const n = new bt(i, this), o = n.u(this.options);
-      n.p(e), this.T(o), this._$AH = n;
+      const o = new At(i, this), n = o.u(this.options);
+      o.p(e), this.T(n), this._$AH = o;
     }
   }
   _$AC(t) {
     let e = et.get(t.strings);
-    return e === void 0 && et.set(t.strings, e = new O(t)), e;
+    return e === void 0 && et.set(t.strings, e = new k(t)), e;
   }
   k(t) {
     q(this._$AH) || (this._$AH = [], this._$AR());
     const e = this._$AH;
     let s, i = 0;
-    for (const n of t) i === e.length ? e.push(s = new U(this.O(P()), this.O(P()), this, this.options)) : s = e[i], s._$AI(n), i++;
+    for (const o of t) i === e.length ? e.push(s = new O(this.O(P()), this.O(P()), this, this.options)) : s = e[i], s._$AI(o), i++;
     i < e.length && (this._$AR(s && s._$AB.nextSibling, i), e.length = i);
   }
   _$AR(t = this._$AA.nextSibling, e) {
@@ -403,19 +403,19 @@ class R {
   get _$AU() {
     return this._$AM._$AU;
   }
-  constructor(t, e, s, i, n) {
-    this.type = 1, this._$AH = d, this._$AN = void 0, this.element = t, this.name = e, this._$AM = i, this.options = n, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = d;
+  constructor(t, e, s, i, o) {
+    this.type = 1, this._$AH = d, this._$AN = void 0, this.element = t, this.name = e, this._$AM = i, this.options = o, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = d;
   }
   _$AI(t, e = this, s, i) {
-    const n = this.strings;
-    let o = !1;
-    if (n === void 0) t = b(this, t, e, 0), o = !x(t) || t !== this._$AH && t !== v, o && (this._$AH = t);
+    const o = this.strings;
+    let n = !1;
+    if (o === void 0) t = A(this, t, e, 0), n = !x(t) || t !== this._$AH && t !== v, n && (this._$AH = t);
     else {
-      const a = t;
-      let h, c;
-      for (t = n[0], h = 0; h < n.length - 1; h++) c = b(this, a[s + h], e, h), c === v && (c = this._$AH[h]), o ||= !x(c) || c !== this._$AH[h], c === d ? t = d : t !== d && (t += (c ?? "") + n[h + 1]), this._$AH[h] = c;
+      const h = t;
+      let a, c;
+      for (t = o[0], a = 0; a < o.length - 1; a++) c = A(this, h[s + a], e, a), c === v && (c = this._$AH[a]), n ||= !x(c) || c !== this._$AH[a], c === d ? t = d : t !== d && (t += (c ?? "") + o[a + 1]), this._$AH[a] = c;
     }
-    o && !i && this.j(t);
+    n && !i && this.j(t);
   }
   j(t) {
     t === d ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
@@ -438,13 +438,13 @@ class St extends R {
   }
 }
 class wt extends R {
-  constructor(t, e, s, i, n) {
-    super(t, e, s, i, n), this.type = 5;
+  constructor(t, e, s, i, o) {
+    super(t, e, s, i, o), this.type = 5;
   }
   _$AI(t, e = this) {
-    if ((t = b(this, t, e, 0) ?? d) === v) return;
-    const s = this._$AH, i = t === d && s !== d || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, n = t !== d && (s === d || i);
-    i && this.element.removeEventListener(this.name, this, s), n && this.element.addEventListener(this.name, this, t), this._$AH = t;
+    if ((t = A(this, t, e, 0) ?? d) === v) return;
+    const s = this._$AH, i = t === d && s !== d || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, o = t !== d && (s === d || i);
+    i && this.element.removeEventListener(this.name, this, s), o && this.element.addEventListener(this.name, this, t), this._$AH = t;
   }
   handleEvent(t) {
     typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
@@ -458,22 +458,22 @@ class Ct {
     return this._$AM._$AU;
   }
   _$AI(t) {
-    b(this, t);
+    A(this, t);
   }
 }
 const Pt = V.litHtmlPolyfillSupport;
-Pt?.(O, U), (V.litHtmlVersions ??= []).push("3.3.1");
+Pt?.(k, O), (V.litHtmlVersions ??= []).push("3.3.1");
 const xt = (r, t, e) => {
   const s = e?.renderBefore ?? t;
   let i = s._$litPart$;
   if (i === void 0) {
-    const n = e?.renderBefore ?? null;
-    s._$litPart$ = i = new U(t.insertBefore(P(), n), n, void 0, e ?? {});
+    const o = e?.renderBefore ?? null;
+    s._$litPart$ = i = new O(t.insertBefore(P(), o), o, void 0, e ?? {});
   }
   return i._$AI(r), i;
 };
 const W = globalThis;
-class C extends A {
+class C extends b {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -496,47 +496,47 @@ class C extends A {
   }
 }
 C._$litElement$ = !0, C.finalized = !0, W.litElementHydrateSupport?.({ LitElement: C });
-const Ot = W.litElementPolyfillSupport;
-Ot?.({ LitElement: C });
+const kt = W.litElementPolyfillSupport;
+kt?.({ LitElement: C });
 (W.litElementVersions ??= []).push("4.2.1");
-const Ut = (r) => (t, e) => {
+const Ot = (r) => (t, e) => {
   e !== void 0 ? e.addInitializer((() => {
     customElements.define(r, t);
   })) : customElements.define(r, t);
 };
-const Tt = { attribute: !0, type: String, converter: H, reflect: !1, hasChanged: B }, kt = (r = Tt, t, e) => {
+const Ut = { attribute: !0, type: String, converter: H, reflect: !1, hasChanged: B }, Tt = (r = Ut, t, e) => {
   const { kind: s, metadata: i } = e;
-  let n = globalThis.litPropertyMetadata.get(i);
-  if (n === void 0 && globalThis.litPropertyMetadata.set(i, n = /* @__PURE__ */ new Map()), s === "setter" && ((r = Object.create(r)).wrapped = !0), n.set(e.name, r), s === "accessor") {
-    const { name: o } = e;
-    return { set(a) {
-      const h = t.get.call(this);
-      t.set.call(this, a), this.requestUpdate(o, h, r);
-    }, init(a) {
-      return a !== void 0 && this.C(o, void 0, r, a), a;
+  let o = globalThis.litPropertyMetadata.get(i);
+  if (o === void 0 && globalThis.litPropertyMetadata.set(i, o = /* @__PURE__ */ new Map()), s === "setter" && ((r = Object.create(r)).wrapped = !0), o.set(e.name, r), s === "accessor") {
+    const { name: n } = e;
+    return { set(h) {
+      const a = t.get.call(this);
+      t.set.call(this, h), this.requestUpdate(n, a, r);
+    }, init(h) {
+      return h !== void 0 && this.C(n, void 0, r, h), h;
     } };
   }
   if (s === "setter") {
-    const { name: o } = e;
-    return function(a) {
-      const h = this[o];
-      t.call(this, a), this.requestUpdate(o, h, r);
+    const { name: n } = e;
+    return function(h) {
+      const a = this[n];
+      t.call(this, h), this.requestUpdate(n, a, r);
     };
   }
   throw Error("Unsupported decorator location: " + s);
 };
-function T(r) {
-  return (t, e) => typeof e == "object" ? kt(r, t, e) : ((s, i, n) => {
-    const o = i.hasOwnProperty(n);
-    return i.constructor.createProperty(n, s), o ? Object.getOwnPropertyDescriptor(i, n) : void 0;
+function U(r) {
+  return (t, e) => typeof e == "object" ? Tt(r, t, e) : ((s, i, o) => {
+    const n = i.hasOwnProperty(o);
+    return i.constructor.createProperty(o, s), n ? Object.getOwnPropertyDescriptor(i, o) : void 0;
   })(r, t, e);
 }
 function Mt(r) {
-  return T({ ...r, state: !0, attribute: !1 });
+  return U({ ...r, state: !0, attribute: !1 });
 }
 var Ht = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, E = (r, t, e, s) => {
-  for (var i = s > 1 ? void 0 : s ? zt(t, e) : t, n = r.length - 1, o; n >= 0; n--)
-    (o = r[n]) && (i = (s ? o(t, e, i) : o(i)) || i);
+  for (var i = s > 1 ? void 0 : s ? zt(t, e) : t, o = r.length - 1, n; o >= 0; o--)
+    (n = r[o]) && (i = (s ? n(t, e, i) : n(i)) || i);
   return s && i && Ht(t, e, i), i;
 };
 let g = class extends C {
@@ -614,7 +614,7 @@ let g = class extends C {
     `;
   }
 };
-g.styles = at`
+g.styles = ht`
     :host {
       display: inline-block;
     }
@@ -632,11 +632,16 @@ g.styles = at`
       font-weight: 500;
       position: relative;
       overflow: hidden;
+      color: inherit;
     }
 
     .theme-toggle:focus {
       outline: none;
-      box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+    }
+
+    .theme-toggle:focus-visible {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
     }
 
     .theme-toggle:hover {
@@ -660,22 +665,25 @@ g.styles = at`
       padding: 1rem;
     }
 
-    /* Variant styles */
+    /* Variant styles - Light mode */
     .btn--ghost {
       background: transparent;
+      border: none;
     }
 
     .btn--ghost:hover {
-      background: rgba(0, 0, 0, 0.05);
+      background: transparent;
+      opacity: 0.7;
     }
 
     .btn--outline {
-      border: 1px solid currentColor;
+      border: 1px solid rgba(0, 0, 0, 0.2);
       background: transparent;
     }
 
     .btn--outline:hover {
       background: rgba(0, 0, 0, 0.05);
+      border-color: rgba(0, 0, 0, 0.3);
     }
 
     .btn--solid {
@@ -686,6 +694,29 @@ g.styles = at`
       background: rgba(0, 0, 0, 0.15);
     }
 
+    /* Dark mode adaptations */
+    :host([theme="dark"]) .btn--ghost:hover {
+      background: transparent;
+      opacity: 0.7;
+    }
+
+    :host([theme="dark"]) .btn--outline {
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+
+    :host([theme="dark"]) .btn--outline:hover {
+      background: rgba(255, 255, 255, 0.1);
+      border-color: rgba(255, 255, 255, 0.3);
+    }
+
+    :host([theme="dark"]) .btn--solid {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    :host([theme="dark"]) .btn--solid:hover {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
     .theme-icon {
       width: 1.25rem;
       height: 1.25rem;
@@ -734,22 +765,22 @@ g.styles = at`
     }
   `;
 E([
-  T({ type: String, reflect: !0 })
+  U({ type: String, reflect: !0 })
 ], g.prototype, "theme", 2);
 E([
-  T({ type: String, attribute: "storage-key" })
+  U({ type: String, attribute: "storage-key" })
 ], g.prototype, "storageKey", 2);
 E([
-  T({ type: String, attribute: "size" })
+  U({ type: String, attribute: "size" })
 ], g.prototype, "size", 2);
 E([
-  T({ type: String, attribute: "variant" })
+  U({ type: String, attribute: "variant" })
 ], g.prototype, "variant", 2);
 E([
   Mt()
 ], g.prototype, "isDark", 2);
 g = E([
-  Ut("cals-theme-toggle")
+  Ot("theme-toggle")
 ], g);
 export {
   g as ThemeToggle

package/dist/index.js

@@ -2506,7 +2506,7 @@ v([
   tt(".modal-body")
 ], A.prototype, "modalBody", 2);
 A = v([
-  Gt("auth")
+  Gt("auth-drawer")
 ], A);
 var hr = Object.defineProperty, dr = Object.getOwnPropertyDescriptor, ie = (t, e, s, r) => {
   for (var i = r > 1 ? void 0 : r ? dr(e, s) : e, o = t.length - 1, n; o >= 0; o--)
@@ -2606,11 +2606,16 @@ F.styles = Kt`
       font-weight: 500;
       position: relative;
       overflow: hidden;
+      color: inherit;
     }
 
     .theme-toggle:focus {
       outline: none;
-      box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+    }
+
+    .theme-toggle:focus-visible {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
     }
 
     .theme-toggle:hover {
@@ -2634,22 +2639,25 @@ F.styles = Kt`
       padding: 1rem;
     }
 
-    /* Variant styles */
+    /* Variant styles - Light mode */
     .btn--ghost {
       background: transparent;
+      border: none;
     }
 
     .btn--ghost:hover {
-      background: rgba(0, 0, 0, 0.05);
+      background: transparent;
+      opacity: 0.7;
     }
 
     .btn--outline {
-      border: 1px solid currentColor;
+      border: 1px solid rgba(0, 0, 0, 0.2);
       background: transparent;
     }
 
     .btn--outline:hover {
       background: rgba(0, 0, 0, 0.05);
+      border-color: rgba(0, 0, 0, 0.3);
     }
 
     .btn--solid {
@@ -2660,6 +2668,29 @@ F.styles = Kt`
       background: rgba(0, 0, 0, 0.15);
     }
 
+    /* Dark mode adaptations */
+    :host([theme="dark"]) .btn--ghost:hover {
+      background: transparent;
+      opacity: 0.7;
+    }
+
+    :host([theme="dark"]) .btn--outline {
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+
+    :host([theme="dark"]) .btn--outline:hover {
+      background: rgba(255, 255, 255, 0.1);
+      border-color: rgba(255, 255, 255, 0.3);
+    }
+
+    :host([theme="dark"]) .btn--solid {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    :host([theme="dark"]) .btn--solid:hover {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
     .theme-icon {
       width: 1.25rem;
       height: 1.25rem;
@@ -2723,7 +2754,7 @@ ie([
   T()
 ], F.prototype, "isDark", 2);
 F = ie([
-  Gt("cals-theme-toggle")
+  Gt("theme-toggle")
 ], F);
 function ss(t, e) {
   return function() {

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)}}.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)}}
+: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)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cal.macconnachie/web-components",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "Web components hosted on a CDN",
   "keywords": [
     "lit",