accessify-widget 0.2.0 → 0.2.2

package/dist/{index-B6b-ij4T.js → index-i-tNypvI.js}

@@ -254,8 +254,6 @@ https://svelte.dev/e/svelte_boundary_reset_onerror`);
 }
 const EACH_ITEM_REACTIVE = 1;
 const EACH_INDEX_REACTIVE = 1 << 1;
-const EACH_IS_CONTROLLED = 1 << 2;
-const EACH_IS_ANIMATED = 1 << 3;
 const EACH_ITEM_IMMUTABLE = 1 << 4;
 const PROPS_IS_IMMUTABLE = 1;
 const PROPS_IS_UPDATED = 1 << 2;
@@ -279,15 +277,6 @@ https://svelte.dev/e/lifecycle_double_unmount`, bold, normal);
     console.warn(`https://svelte.dev/e/lifecycle_double_unmount`);
   }
 }
-function select_multiple_invalid_value() {
-  if (DEV) {
-    console.warn(`%c[svelte] select_multiple_invalid_value
-%cThe \`value\` property of a \`<select multiple>\` element should be an array, but it received a non-array value. The selection will be kept as is.
-https://svelte.dev/e/select_multiple_invalid_value`, bold, normal);
-  } else {
-    console.warn(`https://svelte.dev/e/select_multiple_invalid_value`);
-  }
-}
 function state_proxy_equality_mismatch(operator) {
   if (DEV) {
     console.warn(`%c[svelte] state_proxy_equality_mismatch
@@ -2319,9 +2308,6 @@ function get_proxied_value(value) {
   }
   return value;
 }
-function is(a, b) {
-  return Object.is(get_proxied_value(a), get_proxied_value(b));
-}
 const ARRAY_MUTATING_METHODS = /* @__PURE__ */ new Set([
   "copyWithin",
   "fill",
@@ -2476,7 +2462,7 @@ function clear_text_content(node) {
 function should_defer_append() {
   return false;
 }
-function create_element(tag2, namespace, is2) {
+function create_element(tag2, namespace, is) {
   let options = void 0;
   return (
     /** @type {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element} */
@@ -3421,13 +3407,39 @@ function from_html(content, flags2) {
     return clone;
   };
 }
-function comment() {
-  var frag = document.createDocumentFragment();
-  var start = document.createComment("");
-  var anchor = create_text();
-  frag.append(start, anchor);
-  assign_nodes(start, anchor);
-  return frag;
+// @__NO_SIDE_EFFECTS__
+function from_namespace(content, flags2, ns = "svg") {
+  var has_start = !content.startsWith("<!>");
+  var wrapped = `<${ns}>${has_start ? content : "<!>" + content}</${ns}>`;
+  var node;
+  return () => {
+    if (!node) {
+      var fragment = (
+        /** @type {DocumentFragment} */
+        create_fragment_from_html(wrapped)
+      );
+      var root2 = (
+        /** @type {Element} */
+        /* @__PURE__ */ get_first_child(fragment)
+      );
+      {
+        node = /** @type {Element} */
+        /* @__PURE__ */ get_first_child(root2);
+      }
+    }
+    var clone = (
+      /** @type {TemplateNode} */
+      node.cloneNode(true)
+    );
+    {
+      assign_nodes(clone, clone);
+    }
+    return clone;
+  };
+}
+// @__NO_SIDE_EFFECTS__
+function from_svg(content, flags2) {
+  return /* @__PURE__ */ from_namespace(content, flags2, "svg");
 }
 function append(anchor, dom) {
   if (anchor === null) {
@@ -3822,8 +3834,7 @@ var offscreen_anchor;
 function each(node, flags2, get_collection, get_key, render_fn2, fallback_fn = null) {
   var anchor = node;
   var items = /* @__PURE__ */ new Map();
-  var is_controlled = (flags2 & EACH_IS_CONTROLLED) !== 0;
-  if (is_controlled) {
+  {
     var parent_node = (
       /** @type {Element} */
       node
@@ -3948,31 +3959,17 @@ function skip_to_branch(effect2) {
   return effect2;
 }
 function reconcile(state2, array, anchor, flags2, get_key) {
-  var is_animated = (flags2 & EACH_IS_ANIMATED) !== 0;
   var length = array.length;
   var items = state2.items;
   var current = skip_to_branch(state2.effect.first);
   var seen;
   var prev = null;
-  var to_animate;
   var matched = [];
   var stashed = [];
   var value;
   var key;
   var effect2;
   var i;
-  if (is_animated) {
-    for (i = 0; i < length; i += 1) {
-      value = array[i];
-      key = get_key(value, i);
-      effect2 = /** @type {EachItem} */
-      items.get(key).e;
-      if ((effect2.f & EFFECT_OFFSCREEN) === 0) {
-        effect2.nodes?.a?.measure();
-        (to_animate ?? (to_animate = /* @__PURE__ */ new Set())).add(effect2);
-      }
-    }
-  }
   for (i = 0; i < length; i += 1) {
     value = array[i];
     key = get_key(value, i);
@@ -4007,10 +4004,6 @@ function reconcile(state2, array, anchor, flags2, get_key) {
     }
     if ((effect2.f & INERT) !== 0) {
       resume_effect(effect2);
-      if (is_animated) {
-        effect2.nodes?.a?.unfix();
-        (to_animate ?? (to_animate = /* @__PURE__ */ new Set())).delete(effect2);
-      }
     }
     if (effect2 !== current) {
       if (seen !== void 0 && seen.has(effect2)) {
@@ -4089,26 +4082,10 @@ function reconcile(state2, array, anchor, flags2, get_key) {
     }
     var destroy_length = to_destroy.length;
     if (destroy_length > 0) {
-      var controlled_anchor = (flags2 & EACH_IS_CONTROLLED) !== 0 && length === 0 ? anchor : null;
-      if (is_animated) {
-        for (i = 0; i < destroy_length; i += 1) {
-          to_destroy[i].nodes?.a?.measure();
-        }
-        for (i = 0; i < destroy_length; i += 1) {
-          to_destroy[i].nodes?.a?.fix();
-        }
-      }
+      var controlled_anchor = length === 0 ? anchor : null;
       pause_effects(state2, to_destroy, controlled_anchor);
     }
   }
-  if (is_animated) {
-    queue_micro_task(() => {
-      if (to_animate === void 0) return;
-      for (effect2 of to_animate) {
-        effect2.nodes?.a?.apply();
-      }
-    });
-  }
 }
 function create_item(items, anchor, value, key, index2, render_fn2, flags2, get_collection) {
   var v = (flags2 & EACH_ITEM_REACTIVE) !== 0 ? (flags2 & EACH_ITEM_IMMUTABLE) === 0 ? /* @__PURE__ */ mutable_source(value, false, false) : source(value) : null;
@@ -4245,55 +4222,52 @@ function html(node, get_value, is_controlled = false, svg = false, mathml = fals
     }
   });
 }
-function select_option(select, value, mounting = false) {
-  if (select.multiple) {
-    if (value == void 0) {
-      return;
-    }
-    if (!is_array(value)) {
-      return select_multiple_invalid_value();
-    }
-    for (var option of select.options) {
-      option.selected = value.includes(get_option_value(option));
-    }
-    return;
-  }
-  for (option of select.options) {
-    var option_value = get_option_value(option);
-    if (is(option_value, value)) {
-      option.selected = true;
-      return;
+const whitespace = [..." 	\n\r\f \v\uFEFF"];
+function to_class(value, hash, directives) {
+  var classname = value == null ? "" : "" + value;
+  if (directives) {
+    for (var key of Object.keys(directives)) {
+      if (directives[key]) {
+        classname = classname ? classname + " " + key : key;
+      } else if (classname.length) {
+        var len = key.length;
+        var a = 0;
+        while ((a = classname.indexOf(key, a)) >= 0) {
+          var b = a + len;
+          if ((a === 0 || whitespace.includes(classname[a - 1])) && (b === classname.length || whitespace.includes(classname[b]))) {
+            classname = (a === 0 ? "" : classname.substring(0, a)) + classname.substring(b + 1);
+          } else {
+            a = b;
+          }
+        }
+      }
     }
   }
-  if (!mounting || value !== void 0) {
-    select.selectedIndex = -1;
-  }
-}
-function init_select(select) {
-  var observer = new MutationObserver(() => {
-    select_option(select, select.__value);
-  });
-  observer.observe(select, {
-    // Listen to option element changes
-    childList: true,
-    subtree: true,
-    // because of <optgroup>
-    // Listen to option element value attribute changes
-    // (doesn't get notified of select value changes,
-    // because that property is not reflected as an attribute)
-    attributes: true,
-    attributeFilter: ["value"]
-  });
-  teardown(() => {
-    observer.disconnect();
-  });
+  return classname === "" ? null : classname;
 }
-function get_option_value(option) {
-  if ("__value" in option) {
-    return option.__value;
-  } else {
-    return option.value;
+function set_class(dom, is_html, value, hash, prev_classes, next_classes) {
+  var prev = dom.__className;
+  if (prev !== value || prev === void 0) {
+    var next_class_name = to_class(value, hash, next_classes);
+    {
+      if (next_class_name == null) {
+        dom.removeAttribute("class");
+      } else if (is_html) {
+        dom.className = next_class_name;
+      } else {
+        dom.setAttribute("class", next_class_name);
+      }
+    }
+    dom.__className = value;
+  } else if (next_classes && prev_classes !== next_classes) {
+    for (var key in next_classes) {
+      var is_present = !!next_classes[key];
+      if (prev_classes == null || is_present !== !!prev_classes[key]) {
+        dom.classList.toggle(key, is_present);
+      }
+    }
   }
+  return next_classes;
 }
 const IS_CUSTOM_ELEMENT = Symbol("is custom element");
 const IS_HTML = Symbol("is html");
@@ -4781,7 +4755,7 @@ const deJson = {
   "feature.linkHighlight": "Links hervorheben",
   "feature.linkHighlight.desc": "Alle Links sichtbar unterstreichen",
   "feature.keyboardNav": "Tastaturnavigation",
-  "feature.keyboardNav.desc": "Erweiterte Tastatursteuerung und Shortcuts",
+  "feature.keyboardNav.desc": "Seite nur mit Tastatur bedienen: Direkt zum Inhalt springen, mit Alt+H durch Überschriften navigieren, Alt+L für Seitenbereiche, Alt+K zeigt alle Tastenkombinationen",
   "feature.tts": "Vorlesen",
   "feature.tts.desc": "Text per Klick vorlesen lassen",
   "feature.textSimplify": "Text vereinfachen",
@@ -4870,7 +4844,7 @@ const enJson = {
   "feature.linkHighlight": "Highlight Links",
   "feature.linkHighlight.desc": "Underline and highlight all links",
   "feature.keyboardNav": "Keyboard Nav",
-  "feature.keyboardNav.desc": "Enhanced keyboard controls and shortcuts",
+  "feature.keyboardNav.desc": "Navigate the page using only your keyboard: Skip to main content, Alt+H to jump through headings, Alt+L for page sections, Alt+K shows all shortcuts",
   "feature.tts": "Read Aloud",
   "feature.tts.desc": "Click any text to hear it spoken",
   "feature.textSimplify": "Simplify Text",
@@ -4915,6 +4889,8 @@ const EN_BASE = {
   ...enJson,
   "widget.subtitle": "Adjust contrast, text and navigation on this page",
   "widget.language": "Language",
+  "widget.widgetLang": "Widget language",
+  "widget.moveWidget": "Move widget to other side",
   "widget.poweredBy": "Powered by Accessify-Widget",
   "section.essentials": "Most used",
   "section.essentials.desc": "Start with contrast, text size and keyboard support.",
@@ -4946,6 +4922,8 @@ const DE_BASE = {
   ...deJson,
   "widget.subtitle": "Passe Kontrast, Text und Navigation auf dieser Seite an",
   "widget.language": "Sprache",
+  "widget.widgetLang": "Widget-Sprache",
+  "widget.moveWidget": "Widget auf andere Seite verschieben",
   "widget.poweredBy": "Bereitgestellt von Accessify-Widget",
   "section.essentials": "Am haeufigsten genutzt",
   "section.essentials.desc": "Starte mit Kontrast, Textgroesse und Tastaturhilfe.",
@@ -4980,6 +4958,7 @@ const locales = {
   en: EN_BASE,
   de: DE_BASE,
   zh: withEnglish({
+    "widget.widgetLang": "小组件语言",
     "widget.title": "无障碍",
     "widget.subtitle": "调整此页面的对比度、文字和导航",
     "widget.open": "打开无障碍设置",
@@ -5022,6 +5001,7 @@ const locales = {
     "feature.autoScan": "WCAG 扫描"
   }),
   hi: withEnglish({
+    "widget.widgetLang": "विजेट भाषा",
     "widget.title": "सुलभता",
     "widget.subtitle": "इस पेज पर कंट्रास्ट, टेक्स्ट और नेविगेशन समायोजित करें",
     "widget.open": "सुलभता सेटिंग खोलें",
@@ -5064,6 +5044,7 @@ const locales = {
     "feature.autoScan": "WCAG स्कैन"
   }),
   es: withEnglish({
+    "widget.widgetLang": "Idioma del widget",
     "widget.title": "Accesibilidad",
     "widget.subtitle": "Ajusta contraste, texto y navegacion en esta pagina",
     "widget.open": "Abrir ajustes de accesibilidad",
@@ -5106,6 +5087,7 @@ const locales = {
     "feature.autoScan": "Escaneo WCAG"
   }),
   fr: withEnglish({
+    "widget.widgetLang": "Langue du widget",
     "widget.title": "Accessibilite",
     "widget.subtitle": "Ajustez le contraste, le texte et la navigation sur cette page",
     "widget.open": "Ouvrir les reglages d'accessibilite",
@@ -5148,6 +5130,7 @@ const locales = {
     "feature.autoScan": "Analyse WCAG"
   }),
   ar: withEnglish({
+    "widget.widgetLang": "لغة الأداة",
     "widget.title": "إمكانية الوصول",
     "widget.subtitle": "اضبط التباين والنص والتنقل في هذه الصفحة",
     "widget.open": "افتح إعدادات إمكانية الوصول",
@@ -5232,6 +5215,7 @@ const locales = {
     "feature.autoScan": "WCAG স্ক্যান"
   }),
   pt: withEnglish({
+    "widget.widgetLang": "Idioma do widget",
     "widget.title": "Acessibilidade",
     "widget.subtitle": "Ajuste contraste, texto e navegacao nesta pagina",
     "widget.open": "Abrir configuracoes de acessibilidade",
@@ -5274,6 +5258,7 @@ const locales = {
     "feature.autoScan": "Varredura WCAG"
   }),
   ru: withEnglish({
+    "widget.widgetLang": "Язык виджета",
     "widget.title": "Доступность",
     "widget.subtitle": "Настройте контраст, текст и навигацию на этой странице",
     "widget.open": "Открыть настройки доступности",
@@ -5400,6 +5385,7 @@ const locales = {
     "feature.autoScan": "Pindai WCAG"
   }),
   ja: withEnglish({
+    "widget.widgetLang": "ウィジェットの言語",
     "widget.title": "アクセシビリティ",
     "widget.subtitle": "このページのコントラスト、文字、ナビゲーションを調整します",
     "widget.open": "アクセシビリティ設定を開く",
@@ -5568,6 +5554,7 @@ const locales = {
     "feature.autoScan": "WCAG స్కాన్"
   }),
   tr: withEnglish({
+    "widget.widgetLang": "Widget dili",
     "widget.title": "Erisilebilirlik",
     "widget.subtitle": "Bu sayfada kontrast, metin ve gezinmeyi ayarlayin",
     "widget.open": "Erisilebilirlik ayarlarini ac",
@@ -5694,6 +5681,7 @@ const locales = {
     "feature.autoScan": "Quet WCAG"
   }),
   ko: withEnglish({
+    "widget.widgetLang": "위젯 언어",
     "widget.title": "접근성",
     "widget.subtitle": "이 페이지의 대비, 텍스트, 내비게이션을 조정하세요",
     "widget.open": "접근성 설정 열기",
@@ -5737,26 +5725,16 @@ const locales = {
   })
 };
 const LANGUAGE_OPTIONS = [
-  { code: "en", label: "English" },
-  { code: "zh", label: "中文" },
-  { code: "hi", label: "हिन्दी" },
-  { code: "es", label: "Español" },
-  { code: "fr", label: "Français" },
-  { code: "ar", label: "العربية" },
-  { code: "bn", label: "বাংলা" },
-  { code: "pt", label: "Português" },
-  { code: "ru", label: "Русский" },
-  { code: "ur", label: "اردو" },
-  { code: "id", label: "Bahasa Indonesia" },
-  { code: "de", label: "Deutsch" },
-  { code: "ja", label: "日本語" },
-  { code: "pcm", label: "Naijá" },
-  { code: "mr", label: "मराठी" },
-  { code: "te", label: "తెలుగు" },
-  { code: "tr", label: "Türkçe" },
-  { code: "ta", label: "தமிழ்" },
-  { code: "vi", label: "Tiếng Việt" },
-  { code: "ko", label: "한국어" }
+  { code: "de", label: "Deutsch", flag: "🇩🇪" },
+  { code: "en", label: "English", flag: "🇺🇸" },
+  { code: "es", label: "Español", flag: "🇪🇸" },
+  { code: "fr", label: "Français", flag: "🇫🇷" },
+  { code: "pt", label: "Português", flag: "🇧🇷" },
+  { code: "tr", label: "Türkçe", flag: "🇹🇷" },
+  { code: "ar", label: "العربية", flag: "🇸🇦" },
+  { code: "zh", label: "中文", flag: "🇨🇳" },
+  { code: "ja", label: "日本語", flag: "🇯🇵" },
+  { code: "ru", label: "Русский", flag: "🇷🇺" }
 ];
 const RTL_LANGS = /* @__PURE__ */ new Set(["ar", "ur"]);
 let currentWidgetLang = "en";
@@ -5780,15 +5758,75 @@ function t(key, lang = "en") {
   const resolved = getSupportedLang(lang);
   return locales[resolved]?.[key] || EN_BASE[key] || key;
 }
-var root$5 = /* @__PURE__ */ from_html(`<button class="accessify-trigger"></button>`);
+var root$5 = /* @__PURE__ */ from_html(`<button></button>`);
 function TriggerButton($$anchor, $$props) {
   push($$props, true);
   let lang = prop($$props, "lang", 3, "en"), el = prop($$props, "el", 15, null);
+  let isDragging = /* @__PURE__ */ state(false);
+  onMount(() => {
+    const btn = el();
+    if (!btn) return;
+    let dragStartX = 0;
+    let dragStartY = 0;
+    let startLeft = 0;
+    let startTop = 0;
+    let hasMoved = false;
+    let pointerId = null;
+    function onDown(e) {
+      if ($$props.isOpen) return;
+      const rect = btn.getBoundingClientRect();
+      dragStartX = e.clientX;
+      dragStartY = e.clientY;
+      startLeft = rect.left;
+      startTop = rect.top;
+      hasMoved = false;
+      pointerId = e.pointerId;
+      btn.setPointerCapture(e.pointerId);
+    }
+    function onMove(e) {
+      if (pointerId === null || e.pointerId !== pointerId) return;
+      const dx = e.clientX - dragStartX;
+      const dy = e.clientY - dragStartY;
+      if (!hasMoved && (Math.abs(dx) > 5 || Math.abs(dy) > 5)) {
+        hasMoved = true;
+        set(isDragging, true);
+        btn.style.transition = "none";
+      }
+      if (hasMoved) {
+        const newLeft = Math.max(0, Math.min(window.innerWidth - 60, startLeft + dx));
+        const newTop = Math.max(0, Math.min(window.innerHeight - 60, startTop + dy));
+        btn.style.left = newLeft + "px";
+        btn.style.top = newTop + "px";
+        btn.style.right = "auto";
+        btn.style.bottom = "auto";
+      }
+    }
+    function onUp(e) {
+      if (pointerId === null || e.pointerId !== pointerId) return;
+      btn.releasePointerCapture(e.pointerId);
+      btn.style.transition = "";
+      set(isDragging, false);
+      if (!hasMoved) {
+        $$props.onclick();
+      }
+      pointerId = null;
+    }
+    btn.addEventListener("pointerdown", onDown);
+    btn.addEventListener("pointermove", onMove);
+    btn.addEventListener("pointerup", onUp);
+    return () => {
+      btn.removeEventListener("pointerdown", onDown);
+      btn.removeEventListener("pointermove", onMove);
+      btn.removeEventListener("pointerup", onUp);
+    };
+  });
   var button = root$5();
+  let classes;
   html(button, () => $$props.isOpen ? iconClose() : iconAccessibility(), true);
   bind_this(button, ($$value) => el($$value), () => el());
   template_effect(
     ($0) => {
+      classes = set_class(button, 1, "accessify-trigger", null, classes, { "accessify-trigger--dragging": get(isDragging) });
       set_attribute(button, "aria-expanded", $$props.isOpen);
       set_attribute(button, "aria-label", $0);
     },
@@ -5796,98 +5834,26 @@ function TriggerButton($$anchor, $$props) {
       () => $$props.isOpen ? t("widget.close", lang()) : t("widget.open", lang())
     ]
   );
-  delegated("click", button, function(...$$args) {
-    $$props.onclick?.apply(this, $$args);
-  });
   append($$anchor, button);
   pop();
 }
-delegate(["click"]);
-var root_2$1 = /* @__PURE__ */ from_html(`<option> </option>`);
-var root_1$3 = /* @__PURE__ */ from_html(`<label class="accessify-language-picker"><span class="sr-only"> </span> <span class="accessify-language-icon" aria-hidden="true"></span> <select class="accessify-language-select"></select></label>`);
-var root$4 = /* @__PURE__ */ from_html(`<div class="accessify-header"><div class="accessify-header-copy"><span class="accessify-header-kicker"> </span> <div class="accessify-header-title"><h2> </h2> <p> </p></div></div> <div class="accessify-header-toolbar"><!> <div class="accessify-header-actions"><button class="accessify-header-btn"><!> <span> </span></button> <button class="accessify-header-btn accessify-header-btn--icon"></button></div></div></div>`);
+var root$4 = /* @__PURE__ */ from_html(`<header class="accessify-header"><div class="accessify-header-left"><span class="accessify-logo" aria-label="Accessify"><svg viewBox="0 0 480 80" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="0" y="64" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="72" font-weight="700" letter-spacing="-2">accessify</text></svg></span></div> <div class="accessify-header-actions"><button class="accessify-header-btn"></button> <button class="accessify-header-btn accessify-header-btn--icon accessify-header-btn--close"></button></div></header>`);
 function PanelHeader($$anchor, $$props) {
   push($$props, true);
   let lang = prop($$props, "lang", 3, "en");
-  function handleLanguageChange(event2) {
-    const target = event2.currentTarget;
-    $$props.onlangchange?.(target.value);
-  }
-  var div = root$4();
-  var div_1 = child(div);
-  var span = child(div_1);
-  var text = child(span);
-  var div_2 = sibling(span, 2);
-  var h2 = child(div_2);
-  var text_1 = child(h2);
-  var p = sibling(h2, 2);
-  var text_2 = child(p);
-  var div_3 = sibling(div_1, 2);
-  var node = child(div_3);
-  {
-    var consequent = ($$anchor2) => {
-      var label = root_1$3();
-      var span_1 = child(label);
-      var text_3 = child(span_1);
-      var span_2 = sibling(span_1, 2);
-      html(span_2, iconGlobe, true);
-      var select = sibling(span_2, 2);
-      each(select, 21, () => LANGUAGE_OPTIONS, index, ($$anchor3, option) => {
-        var option_1 = root_2$1();
-        var text_4 = child(option_1);
-        var option_1_value = {};
-        template_effect(() => {
-          set_text(text_4, get(option).label);
-          if (option_1_value !== (option_1_value = get(option).code)) {
-            option_1.value = (option_1.__value = get(option).code) ?? "";
-          }
-        });
-        append($$anchor3, option_1);
-      });
-      var select_value;
-      init_select(select);
-      template_effect(
-        ($0, $1) => {
-          set_text(text_3, $0);
-          set_attribute(select, "aria-label", $1);
-          if (select_value !== (select_value = lang())) {
-            select.value = (select.__value = lang()) ?? "", select_option(select, lang());
-          }
-        },
-        [
-          () => t("widget.language", lang()),
-          () => t("widget.language", lang())
-        ]
-      );
-      delegated("change", select, handleLanguageChange);
-      append($$anchor2, label);
-    };
-    if_block(node, ($$render) => {
-      if ($$props.onlangchange) $$render(consequent);
-    });
-  }
-  var div_4 = sibling(node, 2);
-  var button = child(div_4);
-  var node_1 = child(button);
-  html(node_1, iconReset);
-  var span_3 = sibling(node_1, 2);
-  var text_5 = child(span_3);
+  prop($$props, "activeCount", 3, 0);
+  var header = root$4();
+  var div = sibling(child(header), 2);
+  var button = child(div);
+  html(button, iconReset, true);
   var button_1 = sibling(button, 2);
   html(button_1, iconClose, true);
   template_effect(
-    ($0, $1, $2, $3, $4, $5) => {
-      set_text(text, $0);
-      set_text(text_1, $1);
-      set_text(text_2, $2);
-      set_attribute(button, "aria-label", $3);
-      set_text(text_5, $4);
-      set_attribute(button_1, "aria-label", $5);
+    ($0, $1) => {
+      set_attribute(button, "aria-label", $0);
+      set_attribute(button_1, "aria-label", $1);
     },
     [
-      () => t("control.mostUsed", lang()),
-      () => t("widget.title", lang()),
-      () => t("widget.subtitle", lang()),
-      () => t("widget.reset", lang()),
       () => t("widget.reset", lang()),
       () => t("widget.close", lang())
     ]
@@ -5898,37 +5864,130 @@ function PanelHeader($$anchor, $$props) {
   delegated("click", button_1, function(...$$args) {
     $$props.onclose?.apply(this, $$args);
   });
-  append($$anchor, div);
+  append($$anchor, header);
   pop();
 }
-delegate(["change", "click"]);
-var root_1$2 = /* @__PURE__ */ from_html(`<button class="accessify-status-reset"> </button>`);
-var root$3 = /* @__PURE__ */ from_html(`<div class="accessify-status" role="status" aria-live="polite"><span class="accessify-status-count"> </span> <!></div>`);
-function StatusBar($$anchor, $$props) {
+delegate(["click"]);
+const PROFILES = [
+  {
+    id: "vision-impaired",
+    nameKey: "profile.visionImpaired",
+    descKey: "profile.visionImpaired.desc",
+    iconId: "eye",
+    features: ["contrast", "text-size", "big-cursor", "link-highlight"],
+    featureSettings: { "text-size": 150, contrast: "high" }
+  },
+  {
+    id: "motor-impaired",
+    nameKey: "profile.motorImpaired",
+    descKey: "profile.motorImpaired.desc",
+    iconId: "keyboard",
+    features: ["keyboard-nav", "big-cursor", "link-highlight"]
+  },
+  {
+    id: "cognitive",
+    nameKey: "profile.cognitive",
+    descKey: "profile.cognitive.desc",
+    iconId: "brain",
+    features: ["reading-guide", "text-size", "spacing", "dyslexia-font", "animation-stop"],
+    featureSettings: { "text-size": 130 }
+  },
+  {
+    id: "seizure-safe",
+    nameKey: "profile.seizureSafe",
+    descKey: "profile.seizureSafe.desc",
+    iconId: "shield",
+    features: ["animation-stop", "saturation"],
+    featureSettings: { saturation: "low" }
+  },
+  {
+    id: "adhd-friendly",
+    nameKey: "profile.adhdFriendly",
+    descKey: "profile.adhdFriendly.desc",
+    iconId: "focus",
+    features: ["animation-stop", "reading-mask", "hide-images"]
+  }
+];
+var root_3$2 = /* @__PURE__ */ from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg>`);
+var root_2$2 = /* @__PURE__ */ from_html(`<button class="accessify-accordion-option"><span class="accessify-accordion-option-left"><span class="accessify-accordion-option-icon" aria-hidden="true"></span> <span class="accessify-accordion-option-text"><span class="accessify-accordion-option-name"> </span> <span class="accessify-accordion-option-desc"> </span></span></span> <!></button>`);
+var root_1$3 = /* @__PURE__ */ from_html(`<div class="accessify-accordion-list" role="group"></div>`);
+var root$3 = /* @__PURE__ */ from_html(`<div class="accessify-accordion" role="region"><button class="accessify-accordion-toggle"><span class="accessify-accordion-toggle-left"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 8v4l2 2"></path></svg> <span> </span></span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></button> <!></div>`);
+function ProfileSection($$anchor, $$props) {
   push($$props, true);
-  let activeCount = prop($$props, "activeCount", 3, 0), lang = prop($$props, "lang", 3, "en");
-  let statusText = /* @__PURE__ */ user_derived(() => activeCount() > 0 ? t("status.active", lang()).replace("{count}", String(activeCount())) : t("status.noActive", lang()));
+  let lang = prop($$props, "lang", 3, "en"), activeProfileId = prop($$props, "activeProfileId", 3, null);
+  let isOpen = /* @__PURE__ */ state(false);
+  function getIcon(iconId) {
+    const iconFn = icons[iconId];
+    return iconFn ? iconFn() : "";
+  }
+  let activeProfile = /* @__PURE__ */ user_derived(() => activeProfileId() ? PROFILES.find((p) => p.id === activeProfileId()) : null);
   var div = root$3();
-  var span = child(div);
-  var text = child(span);
-  var node = sibling(span, 2);
+  var button = child(div);
+  var span = child(button);
+  var span_1 = sibling(child(span), 2);
+  var text = child(span_1);
+  var svg = sibling(span, 2);
+  let classes;
+  var node = sibling(button, 2);
   {
-    var consequent = ($$anchor2) => {
-      var button = root_1$2();
-      var text_1 = child(button);
-      template_effect(($0) => set_text(text_1, $0), [() => t("widget.reset", lang())]);
-      delegated("click", button, function(...$$args) {
-        $$props.onreset?.apply(this, $$args);
+    var consequent_1 = ($$anchor2) => {
+      var div_1 = root_1$3();
+      each(div_1, 21, () => PROFILES, (profile) => profile.id, ($$anchor3, profile) => {
+        var button_1 = root_2$2();
+        var span_2 = child(button_1);
+        var span_3 = child(span_2);
+        html(span_3, () => getIcon(get(profile).iconId), true);
+        var span_4 = sibling(span_3, 2);
+        var span_5 = child(span_4);
+        var text_1 = child(span_5);
+        var span_6 = sibling(span_5, 2);
+        var text_2 = child(span_6);
+        var node_1 = sibling(span_2, 2);
+        {
+          var consequent = ($$anchor4) => {
+            var svg_1 = root_3$2();
+            append($$anchor4, svg_1);
+          };
+          if_block(node_1, ($$render) => {
+            if (activeProfileId() === get(profile).id) $$render(consequent);
+          });
+        }
+        template_effect(
+          ($0, $1) => {
+            set_attribute(button_1, "aria-pressed", activeProfileId() === get(profile).id);
+            set_attribute(button_1, "data-active", activeProfileId() === get(profile).id);
+            set_text(text_1, $0);
+            set_text(text_2, $1);
+          },
+          [
+            () => t(get(profile).nameKey, lang()),
+            () => t(get(profile).descKey, lang())
+          ]
+        );
+        delegated("click", button_1, () => $$props.onactivate(get(profile)));
+        append($$anchor3, button_1);
       });
-      append($$anchor2, button);
+      template_effect(($0) => set_attribute(div_1, "aria-label", $0), [() => t("section.profiles", lang())]);
+      append($$anchor2, div_1);
     };
     if_block(node, ($$render) => {
-      if (activeCount() > 0) $$render(consequent);
+      if (get(isOpen)) $$render(consequent_1);
     });
   }
-  template_effect(() => {
-    set_attribute(span, "data-count", activeCount());
-    set_text(text, get(statusText));
+  template_effect(
+    ($0, $1) => {
+      set_attribute(div, "aria-label", $0);
+      set_attribute(button, "aria-expanded", get(isOpen));
+      set_text(text, $1);
+      classes = set_class(svg, 0, "accessify-accordion-chevron", null, classes, { "accessify-accordion-chevron--open": get(isOpen) });
+    },
+    [
+      () => t("section.profiles", lang()),
+      () => get(activeProfile) ? t(get(activeProfile).nameKey, lang()) : t("section.profiles", lang())
+    ]
+  );
+  delegated("click", button, () => {
+    set(isOpen, !get(isOpen));
   });
   append($$anchor, div);
   pop();
@@ -5937,10 +5996,13 @@ delegate(["click"]);
 const DEFAULT_PROXY = "https://accessify-api.accessify.workers.dev";
 const OPENROUTER_BASE = "https://openrouter.ai/api/v1";
 const DEFAULTS = {
-  textModel: "qwen/qwen3-next-80b-a3b-instruct:free",
-  visionModel: "meta-llama/llama-3.3-70b-instruct:free"
+  textModel: "google/gemini-2.0-flash-001",
+  visionModel: "google/gemini-2.0-flash-001"
 };
 function createAIService(config2) {
+  if (config2.apiKey) {
+    return createDirectService(config2);
+  }
   if (config2.siteKey) {
     return createProxyService(config2.siteKey, config2.proxyUrl);
   }
@@ -5954,6 +6016,42 @@ function createProxyService(siteKey, proxyUrl) {
   };
   return {
     async simplifyText(text, level = "einfache", lang = "de") {
+      const blockId = `b-${simpleHash(text)}`;
+      const variant = lang.startsWith("de") ? `de-${level}` : "en-plain";
+      try {
+        const cacheRes = await fetch(`${base}/v1/cache/query`, {
+          method: "POST",
+          headers,
+          body: JSON.stringify({
+            pageUrl: typeof window !== "undefined" ? window.location.href : "",
+            feature: "simplify",
+            variant,
+            blocks: [{ id: blockId, text }]
+          })
+        });
+        if (cacheRes.ok) {
+          const cacheData = await cacheRes.json();
+          if (cacheData.cached?.[blockId]) return cacheData.cached[blockId];
+        }
+      } catch {
+      }
+      try {
+        const processRes = await fetch(`${base}/v1/cache/process`, {
+          method: "POST",
+          headers,
+          body: JSON.stringify({
+            pageUrl: typeof window !== "undefined" ? window.location.href : "",
+            feature: "simplify",
+            variant,
+            blocks: [{ id: blockId, text }]
+          })
+        });
+        if (processRes.ok) {
+          const processData = await processRes.json();
+          if (processData.results?.[blockId]) return processData.results[blockId];
+        }
+      } catch {
+      }
       const res = await fetch(`${base}/v1/ai/simplify`, {
         method: "POST",
         headers,
@@ -5967,11 +6065,11 @@ function createProxyService(siteKey, proxyUrl) {
       const data = await res.json();
       return data.result || "";
     },
-    async generateAltText(imageUrl, context) {
+    async generateAltText(imageUrl, context, lang) {
       const res = await fetch(`${base}/v1/ai/alt-text`, {
         method: "POST",
         headers,
-        body: JSON.stringify({ imageUrl, context })
+        body: JSON.stringify({ imageUrl, context, lang })
       });
       if (!res.ok) {
         const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));
@@ -5983,6 +6081,25 @@ function createProxyService(siteKey, proxyUrl) {
     }
   };
 }
+function simpleHash(str) {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) + hash + str.charCodeAt(i);
+    hash |= 0;
+  }
+  return Math.abs(hash).toString(36);
+}
+function extractContent(data) {
+  const msg = data.choices?.[0]?.message;
+  if (msg?.content && typeof msg.content === "string") return msg.content.trim();
+  if (msg?.reasoning && typeof msg.reasoning === "string") return msg.reasoning.trim();
+  if (Array.isArray(msg?.reasoning_details)) {
+    for (const detail of msg.reasoning_details) {
+      if (detail?.text) return detail.text.trim();
+    }
+  }
+  return "";
+}
 function createDirectService(config2) {
   const headers = {
     "Content-Type": "application/json",
@@ -6011,9 +6128,10 @@ function createDirectService(config2) {
         throw new Error(`AI service error: ${response.status}`);
       }
       const data = await response.json();
-      return data.choices?.[0]?.message?.content?.trim() || "";
+      return extractContent(data);
     },
-    async generateAltText(imageUrl, context) {
+    async generateAltText(imageUrl, context, lang) {
+      const langInstruction = lang && !lang.startsWith("en") ? ` Generate the alt text in ${lang} language.` : "";
       const response = await fetch(`${OPENROUTER_BASE}/chat/completions`, {
         method: "POST",
         headers,
@@ -6024,12 +6142,12 @@ function createDirectService(config2) {
             content: [
               {
                 type: "text",
-                text: `Generate a concise, descriptive alt text for this image for web accessibility. ${context ? "Context: " + context : ""} Return ONLY the alt text, nothing else. Max 125 characters.`
+                text: `Generate a concise, descriptive alt text for this image for web accessibility.${langInstruction} ${context ? "Context: " + context : ""} Return ONLY the alt text, nothing else. Max 125 characters.`
               },
               { type: "image_url", image_url: { url: imageUrl } }
             ]
           }],
-          max_tokens: 100
+          max_tokens: 300
         })
       });
       if (!response.ok) {
@@ -6037,7 +6155,7 @@ function createDirectService(config2) {
         throw new Error(`AI vision error: ${response.status}`);
       }
       const data = await response.json();
-      return data.choices?.[0]?.message?.content?.trim() || "";
+      return extractContent(data);
     }
   };
 }
@@ -6082,16 +6200,12 @@ function getEnglishSimplificationPrompt() {
 
 Return ONLY the simplified text.`;
 }
-var root_3 = /* @__PURE__ */ from_html(`<button class="accessify-chip"> </button>`);
-var root_2 = /* @__PURE__ */ from_html(`<article class="accessify-control-card accessify-control-card--contrast"><div class="accessify-control-copy"><span class="accessify-card-icon" aria-hidden="true"></span> <div><h4> </h4> <p> </p></div></div> <div class="accessify-chip-group" role="group"></div></article>`);
-var root_5 = /* @__PURE__ */ from_html(`<button class="accessify-chip"> </button>`);
-var root_4 = /* @__PURE__ */ from_html(`<article class="accessify-control-card accessify-control-card--text-size"><div class="accessify-control-copy"><span class="accessify-card-icon" aria-hidden="true"></span> <div><h4> </h4> <p> </p></div></div> <div class="accessify-chip-group accessify-chip-group--sizes" role="group"></div></article>`);
-var root_7 = /* @__PURE__ */ from_html(`<button class="accessify-card" role="switch"><div class="accessify-card-top"><span class="accessify-card-icon" aria-hidden="true"></span></div> <span class="accessify-card-label"> </span> <span class="accessify-card-desc"> </span></button>`);
-var root_6 = /* @__PURE__ */ from_html(`<div class="accessify-features"></div>`);
-var root_1$1 = /* @__PURE__ */ from_html(`<section class="accessify-section accessify-section--spotlight"><div class="accessify-section-head"><div><span class="accessify-section-kicker"> </span> <h3> </h3> <p> </p></div></div> <div class="accessify-control-grid"><!> <!></div> <!></section>`);
-var root_10 = /* @__PURE__ */ from_html(`<button class="accessify-card" role="switch"><div class="accessify-card-top"><span class="accessify-card-icon" aria-hidden="true"></span></div> <span class="accessify-card-label"> </span> <span class="accessify-card-desc"> </span></button>`);
-var root_9 = /* @__PURE__ */ from_html(`<section class="accessify-section"><div class="accessify-section-head"><div><h3> </h3> <p> </p></div></div> <div class="accessify-features"></div></section>`);
-var root$2 = /* @__PURE__ */ from_html(`<div class="accessify-body"><!> <!></div>`);
+var root_2$1 = /* @__PURE__ */ from_html(`<button class="accessify-chip accessify-chip--icon"><span class="accessify-chip-icon" aria-hidden="true"></span> <span> </span></button>`);
+var root_1$2 = /* @__PURE__ */ from_html(`<div class="accessify-control-row" role="group"><div class="accessify-control-label"><span class="accessify-control-label-icon" aria-hidden="true"></span> <span class="accessify-control-label-text"> </span></div> <div class="accessify-chip-row"></div></div>`);
+var root_3$1 = /* @__PURE__ */ from_html(`<div class="accessify-control-row" role="group"><div class="accessify-control-label"><span class="accessify-control-label-icon" aria-hidden="true"></span> <span class="accessify-control-label-text"> </span></div> <div class="accessify-stepper"><button class="accessify-stepper-btn" aria-label="Decrease text size">−</button> <span class="accessify-stepper-value" aria-live="polite"> </span> <button class="accessify-stepper-btn" aria-label="Increase text size">+</button></div></div>`);
+var root_5 = /* @__PURE__ */ from_html(`<div class="accessify-card-wrap"><button class="accessify-card" role="switch"><span class="accessify-card-icon" aria-hidden="true"></span> <span class="accessify-card-label"> </span></button> <span class="accessify-card-info" tabindex="0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg> <span class="accessify-card-tooltip"> </span></span></div>`);
+var root_4 = /* @__PURE__ */ from_html(`<div class="accessify-features"></div>`);
+var root$2 = /* @__PURE__ */ from_html(`<!> <!> <div class="accessify-section-divider"></div> <!>`, 1);
 function FeatureGrid($$anchor, $$props) {
   push($$props, true);
   const FEATURE_REGISTRY = {
@@ -6101,12 +6215,6 @@ function FeatureGrid($$anchor, $$props) {
       descKey: "feature.keyboardNav.desc",
       iconId: "keyboard"
     },
-    "focus-highlight": {
-      id: "focus-highlight",
-      nameKey: "feature.focusHighlight",
-      descKey: "feature.focusHighlight.desc",
-      iconId: "focus"
-    },
     "link-highlight": {
       id: "link-highlight",
       nameKey: "feature.linkHighlight",
@@ -6166,72 +6274,57 @@ function FeatureGrid($$anchor, $$props) {
       nameKey: "feature.altText",
       descKey: "feature.altText.desc",
       iconId: "alt-text"
-    },
-    "auto-scan": {
-      id: "auto-scan",
-      nameKey: "feature.autoScan",
-      descKey: "feature.autoScan.desc",
-      iconId: "scan"
     }
   };
-  const SECTIONS = [
+  const VISUAL_IDS = [
+    "keyboard-nav",
+    "link-highlight",
+    "animation-stop",
+    "hide-images",
+    "big-cursor"
+  ];
+  const READING_IDS = ["reading-guide", "reading-mask", "tts"];
+  const AI_IDS = ["text-simplify", "alt-text"];
+  const CONTRAST_MODES = [
     {
-      id: "essentials",
-      labelKey: "section.essentials",
-      descKey: "section.essentials.desc",
-      featureIds: ["keyboard-nav", "focus-highlight", "link-highlight"]
+      id: "light",
+      labelKey: "contrast.mode.light",
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>'
     },
     {
-      id: "support",
-      labelKey: "section.support",
-      descKey: "section.support.desc",
-      featureIds: [
-        "reading-guide",
-        "reading-mask",
-        "animation-stop",
-        "hide-images",
-        "page-structure",
-        "big-cursor",
-        "tts"
-      ]
+      id: "dark",
+      labelKey: "contrast.mode.dark",
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>'
     },
     {
-      id: "ai",
-      labelKey: "section.ai",
-      descKey: "section.ai.desc",
-      featureIds: ["text-simplify", "alt-text", "auto-scan"]
+      id: "high",
+      labelKey: "contrast.mode.high",
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2v20"/><path d="M12 2a10 10 0 0 1 0 20" fill="currentColor"/></svg>'
     }
   ];
-  const CONTRAST_MODES = [
-    { id: "off", labelKey: "control.default" },
-    { id: "light", labelKey: "contrast.mode.light" },
-    { id: "dark", labelKey: "contrast.mode.dark" },
-    { id: "high", labelKey: "contrast.mode.high" }
-  ];
-  const TEXT_SIZE_PRESETS = [100, 120, 140, 160, 180];
+  const TEXT_SIZE_MIN = 100;
+  const TEXT_SIZE_MAX = 200;
+  const TEXT_SIZE_STEP = 10;
   const AI_FEATURES = /* @__PURE__ */ new Set(["text-simplify", "alt-text"]);
   const loadedModules = /* @__PURE__ */ new Map();
   const FEATURE_LOADERS = {
     contrast: () => import("./contrast-CqsICAkU.js"),
     "text-size": () => import("./text-size-C6OFhCGi.js"),
-    "keyboard-nav": () => import("./keyboard-nav-YtijlLYi.js"),
-    "focus-highlight": () => import("./focus-highlight-CjERyyUF.js"),
+    "keyboard-nav": () => import("./keyboard-nav-C9zLmfrJ.js"),
     "link-highlight": () => import("./link-highlight-DBGm067Y.js"),
     "reading-guide": () => import("./reading-guide-VT8NciIL.js"),
     "reading-mask": () => import("./reading-mask-BABChuCz.js"),
     "animation-stop": () => import("./animation-stop-DXebPS8D.js"),
     "hide-images": () => import("./hide-images-DJwmsV2C.js"),
     "big-cursor": () => import("./big-cursor-B2UKu9dQ.js"),
-    "page-structure": () => import("./page-structure-WFqy5QjQ.js"),
-    tts: () => import("./tts-02b9iV0h.js"),
-    "text-simplify": () => import("./text-simplify-CELklw5A.js"),
-    "alt-text": () => import("./alt-text-CrPRUX83.js"),
-    "auto-scan": () => import("./auto-scan-pg-09o7A.js")
+    "page-structure": () => import("./page-structure-GqhCQsl3.js"),
+    tts: () => import("./tts-CjszLRnb.js"),
+    "text-simplify": () => import("./text-simplify-C9gzE3t0.js"),
+    "alt-text": () => Promise.resolve().then(() => altText)
   };
   let contrastMode = /* @__PURE__ */ state(proxy(readStoredContrastMode()));
   let textSize = /* @__PURE__ */ state(proxy(readStoredTextSize()));
   let visibleFeatureIds = /* @__PURE__ */ user_derived(() => new Set($$props.config.features));
-  let essentialFeatures = /* @__PURE__ */ user_derived(() => getFeatureDefs(SECTIONS[0].featureIds));
   let activeSignature = /* @__PURE__ */ user_derived(() => Array.from($$props.activeFeatures.entries()).sort(([left], [right]) => left.localeCompare(right)).map(([id, enabled]) => `${id}:${enabled}`).join("|"));
   let aiService;
   function readStoredContrastMode() {
@@ -6258,7 +6351,7 @@ function FeatureGrid($$anchor, $$props) {
     const iconFn = icons[iconId];
     return iconFn ? iconFn() : "";
   }
-  function getFeatureDefs(ids) {
+  function getVisibleFeatures(ids) {
     return ids.filter((id) => get(visibleFeatureIds).has(id)).map((id) => FEATURE_REGISTRY[id]).filter(Boolean);
   }
   function updateControlState(id, module) {
@@ -6291,7 +6384,10 @@ function FeatureGrid($$anchor, $$props) {
     try {
       const mod = await loader();
       const exported = mod.default ?? mod;
-      const featureModule = typeof exported === "function" ? AI_FEATURES.has(id) ? exported(getAIService(), $$props.config.lang) : exported() : exported;
+      const featureModule = typeof exported === "function" ? AI_FEATURES.has(id) ? exported(getAIService(), $$props.config.lang, {
+        siteKey: $$props.config.siteKey,
+        proxyUrl: $$props.config.proxyUrl
+      }) : exported() : exported;
       loadedModules.set(id, featureModule);
       return featureModule;
     } catch (error) {
@@ -6356,251 +6452,165 @@ function FeatureGrid($$anchor, $$props) {
     set(textSize, value, true);
     $$props.ontoggle("text-size", true);
   }
+  let visualFeatures = /* @__PURE__ */ user_derived(() => getVisibleFeatures(VISUAL_IDS));
+  let readingFeatures = /* @__PURE__ */ user_derived(() => getVisibleFeatures(READING_IDS));
+  let aiFeatures = /* @__PURE__ */ user_derived(() => getVisibleFeatures(AI_IDS));
   user_effect(() => {
     `${$$props.config.features.join("|")}|${get(activeSignature)}`;
     void syncActiveModules();
   });
-  var div = root$2();
-  var node = child(div);
+  var fragment = root$2();
+  var node = first_child(fragment);
   {
-    var consequent_3 = ($$anchor2) => {
-      var section_1 = root_1$1();
-      var div_1 = child(section_1);
-      var div_2 = child(div_1);
-      var span = child(div_2);
-      var text = child(span);
-      var h3 = sibling(span, 2);
-      var text_1 = child(h3);
-      var p = sibling(h3, 2);
-      var text_2 = child(p);
-      var div_3 = sibling(div_1, 2);
-      var node_1 = child(div_3);
-      {
-        var consequent = ($$anchor3) => {
-          var article = root_2();
-          var div_4 = child(article);
-          var span_1 = child(div_4);
-          html(span_1, () => getIcon("contrast"), true);
-          var div_5 = sibling(span_1, 2);
-          var h4 = child(div_5);
-          var text_3 = child(h4);
-          var p_1 = sibling(h4, 2);
-          var text_4 = child(p_1);
-          var div_6 = sibling(div_4, 2);
-          each(div_6, 21, () => CONTRAST_MODES, index, ($$anchor4, mode) => {
-            var button = root_3();
-            var text_5 = child(button);
-            template_effect(
-              ($0) => {
-                set_attribute(button, "data-active", get(contrastMode) === get(mode).id);
-                set_attribute(button, "aria-pressed", get(contrastMode) === get(mode).id);
-                set_text(text_5, $0);
-              },
-              [() => t(get(mode).labelKey, $$props.config.lang)]
-            );
-            delegated("click", button, () => setContrastMode(get(mode).id));
-            append($$anchor4, button);
-          });
-          template_effect(
-            ($0, $1, $2) => {
-              set_text(text_3, $0);
-              set_text(text_4, $1);
-              set_attribute(div_6, "aria-label", $2);
-            },
-            [
-              () => t("feature.contrast", $$props.config.lang),
-              () => t("feature.contrast.desc", $$props.config.lang),
-              () => t("control.chooseMode", $$props.config.lang)
-            ]
-          );
-          append($$anchor3, article);
-        };
-        var d = /* @__PURE__ */ user_derived(() => get(visibleFeatureIds).has("contrast"));
-        if_block(node_1, ($$render) => {
-          if (get(d)) $$render(consequent);
-        });
-      }
-      var node_2 = sibling(node_1, 2);
-      {
-        var consequent_1 = ($$anchor3) => {
-          var article_1 = root_4();
-          var div_7 = child(article_1);
-          var span_2 = child(div_7);
-          html(span_2, () => getIcon("text-size"), true);
-          var div_8 = sibling(span_2, 2);
-          var h4_1 = child(div_8);
-          var text_6 = child(h4_1);
-          var p_2 = sibling(h4_1, 2);
-          var text_7 = child(p_2);
-          var div_9 = sibling(div_7, 2);
-          each(div_9, 21, () => TEXT_SIZE_PRESETS, index, ($$anchor4, preset) => {
-            var button_1 = root_5();
-            var text_8 = child(button_1);
-            template_effect(() => {
-              set_attribute(button_1, "data-active", get(textSize) === get(preset));
-              set_attribute(button_1, "aria-pressed", get(textSize) === get(preset));
-              set_text(text_8, `${get(preset) ?? ""}%`);
-            });
-            delegated("click", button_1, () => setTextSize(get(preset)));
-            append($$anchor4, button_1);
-          });
-          template_effect(
-            ($0, $1, $2) => {
-              set_text(text_6, $0);
-              set_text(text_7, $1);
-              set_attribute(div_9, "aria-label", $2);
-            },
-            [
-              () => t("feature.textSize", $$props.config.lang),
-              () => t("feature.textSize.desc", $$props.config.lang),
-              () => t("feature.textSize", $$props.config.lang)
-            ]
-          );
-          append($$anchor3, article_1);
-        };
-        var d_1 = /* @__PURE__ */ user_derived(() => get(visibleFeatureIds).has("text-size"));
-        if_block(node_2, ($$render) => {
-          if (get(d_1)) $$render(consequent_1);
-        });
-      }
-      var node_3 = sibling(div_3, 2);
-      {
-        var consequent_2 = ($$anchor3) => {
-          var div_10 = root_6();
-          each(div_10, 21, () => get(essentialFeatures), (feature) => feature.id, ($$anchor4, feature) => {
-            const isActive = /* @__PURE__ */ user_derived(() => $$props.activeFeatures.get(get(feature).id) ?? false);
-            var button_2 = root_7();
-            var div_11 = child(button_2);
-            var span_3 = child(div_11);
-            html(span_3, () => getIcon(get(feature).iconId), true);
-            var span_4 = sibling(div_11, 2);
-            var text_9 = child(span_4);
-            var span_5 = sibling(span_4, 2);
-            var text_10 = child(span_5);
-            template_effect(
-              ($0, $1, $2) => {
-                set_attribute(button_2, "data-active", get(isActive));
-                set_attribute(button_2, "aria-checked", get(isActive));
-                set_attribute(button_2, "aria-label", $0);
-                set_text(text_9, $1);
-                set_text(text_10, $2);
-              },
-              [
-                () => t(get(feature).nameKey, $$props.config.lang),
-                () => t(get(feature).nameKey, $$props.config.lang),
-                () => t(get(feature).descKey, $$props.config.lang)
-              ]
-            );
-            delegated("click", button_2, () => handleToggle(get(feature).id));
-            append($$anchor4, button_2);
-          });
-          append($$anchor3, div_10);
-        };
-        if_block(node_3, ($$render) => {
-          if (get(essentialFeatures).length > 0) $$render(consequent_2);
-        });
-      }
+    var consequent = ($$anchor2) => {
+      var div = root_1$2();
+      var div_1 = child(div);
+      var span = child(div_1);
+      html(span, () => getIcon("contrast"), true);
+      var span_1 = sibling(span, 2);
+      var text = child(span_1);
+      var div_2 = sibling(div_1, 2);
+      each(div_2, 21, () => CONTRAST_MODES, index, ($$anchor3, mode) => {
+        var button = root_2$1();
+        var span_2 = child(button);
+        html(span_2, () => get(mode).icon, true);
+        var span_3 = sibling(span_2, 2);
+        var text_1 = child(span_3);
+        template_effect(
+          ($0) => {
+            set_attribute(button, "data-active", get(contrastMode) === get(mode).id);
+            set_attribute(button, "aria-pressed", get(contrastMode) === get(mode).id);
+            set_text(text_1, $0);
+          },
+          [() => t(get(mode).labelKey, $$props.config.lang)]
+        );
+        delegated("click", button, () => setContrastMode(get(contrastMode) === get(mode).id ? "off" : get(mode).id));
+        append($$anchor3, button);
+      });
       template_effect(
-        ($0, $1, $2) => {
-          set_text(text, $0);
-          set_text(text_1, $1);
-          set_text(text_2, $2);
+        ($0, $1) => {
+          set_attribute(div, "aria-label", $0);
+          set_text(text, $1);
         },
         [
-          () => t("control.mostUsed", $$props.config.lang),
-          () => t(SECTIONS[0].labelKey, $$props.config.lang),
-          () => t(SECTIONS[0].descKey, $$props.config.lang)
+          () => t("feature.contrast", $$props.config.lang),
+          () => t("feature.contrast", $$props.config.lang)
         ]
       );
-      append($$anchor2, section_1);
+      append($$anchor2, div);
     };
-    var d_2 = /* @__PURE__ */ user_derived(() => get(visibleFeatureIds).has("contrast") || get(visibleFeatureIds).has("text-size") || getFeatureDefs(SECTIONS[0].featureIds).length > 0);
+    var d = /* @__PURE__ */ user_derived(() => get(visibleFeatureIds).has("contrast"));
     if_block(node, ($$render) => {
-      if (get(d_2)) $$render(consequent_3);
+      if (get(d)) $$render(consequent);
     });
   }
-  var node_4 = sibling(node, 2);
-  each(node_4, 17, () => SECTIONS.slice(1), index, ($$anchor2, section) => {
-    const features = /* @__PURE__ */ user_derived(() => getFeatureDefs(get(section).featureIds));
-    var fragment = comment();
-    var node_5 = first_child(fragment);
-    {
-      var consequent_4 = ($$anchor3) => {
-        var section_2 = root_9();
-        var div_12 = child(section_2);
-        var div_13 = child(div_12);
-        var h3_1 = child(div_13);
-        var text_11 = child(h3_1);
-        var p_3 = sibling(h3_1, 2);
-        var text_12 = child(p_3);
-        var div_14 = sibling(div_12, 2);
-        each(div_14, 21, () => get(features), (feature) => feature.id, ($$anchor4, feature) => {
+  var node_1 = sibling(node, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var div_3 = root_3$1();
+      var div_4 = child(div_3);
+      var span_4 = child(div_4);
+      html(span_4, () => getIcon("text-size"), true);
+      var span_5 = sibling(span_4, 2);
+      var text_2 = child(span_5);
+      var div_5 = sibling(div_4, 2);
+      var button_1 = child(div_5);
+      var span_6 = sibling(button_1, 2);
+      var text_3 = child(span_6);
+      var button_2 = sibling(span_6, 2);
+      template_effect(
+        ($0, $1) => {
+          set_attribute(div_3, "aria-label", $0);
+          set_text(text_2, $1);
+          button_1.disabled = get(textSize) <= TEXT_SIZE_MIN;
+          set_text(text_3, `${get(textSize) ?? ""}%`);
+          button_2.disabled = get(textSize) >= TEXT_SIZE_MAX;
+        },
+        [
+          () => t("feature.textSize", $$props.config.lang),
+          () => t("feature.textSize", $$props.config.lang)
+        ]
+      );
+      delegated("click", button_1, () => setTextSize(Math.max(TEXT_SIZE_MIN, get(textSize) - TEXT_SIZE_STEP)));
+      delegated("click", button_2, () => setTextSize(Math.min(TEXT_SIZE_MAX, get(textSize) + TEXT_SIZE_STEP)));
+      append($$anchor2, div_3);
+    };
+    var d_1 = /* @__PURE__ */ user_derived(() => get(visibleFeatureIds).has("text-size"));
+    if_block(node_1, ($$render) => {
+      if (get(d_1)) $$render(consequent_1);
+    });
+  }
+  var node_2 = sibling(node_1, 4);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var div_6 = root_4();
+      each(
+        div_6,
+        21,
+        () => [
+          ...get(visualFeatures),
+          ...get(readingFeatures),
+          ...get(aiFeatures)
+        ],
+        (feature) => feature.id,
+        ($$anchor3, feature) => {
           const isActive = /* @__PURE__ */ user_derived(() => $$props.activeFeatures.get(get(feature).id) ?? false);
-          var button_3 = root_10();
-          var div_15 = child(button_3);
-          var span_6 = child(div_15);
-          html(span_6, () => getIcon(get(feature).iconId), true);
-          var span_7 = sibling(div_15, 2);
-          var text_13 = child(span_7);
+          var div_7 = root_5();
+          var button_3 = child(div_7);
+          var span_7 = child(button_3);
+          html(span_7, () => getIcon(get(feature).iconId), true);
           var span_8 = sibling(span_7, 2);
-          var text_14 = child(span_8);
+          var text_4 = child(span_8);
+          var span_9 = sibling(button_3, 2);
+          var span_10 = sibling(child(span_9), 2);
+          var text_5 = child(span_10);
           template_effect(
-            ($0, $1, $2) => {
+            ($0, $1, $2, $3) => {
               set_attribute(button_3, "data-active", get(isActive));
               set_attribute(button_3, "aria-checked", get(isActive));
               set_attribute(button_3, "aria-label", $0);
-              set_text(text_13, $1);
-              set_text(text_14, $2);
+              set_text(text_4, $1);
+              set_attribute(span_9, "aria-label", $2);
+              set_text(text_5, $3);
             },
             [
               () => t(get(feature).nameKey, $$props.config.lang),
               () => t(get(feature).nameKey, $$props.config.lang),
+              () => t(get(feature).descKey, $$props.config.lang),
               () => t(get(feature).descKey, $$props.config.lang)
             ]
           );
           delegated("click", button_3, () => handleToggle(get(feature).id));
-          append($$anchor4, button_3);
-        });
-        template_effect(
-          ($0, $1) => {
-            set_text(text_11, $0);
-            set_text(text_12, $1);
-          },
-          [
-            () => t(get(section).labelKey, $$props.config.lang),
-            () => t(get(section).descKey, $$props.config.lang)
-          ]
-        );
-        append($$anchor3, section_2);
-      };
-      if_block(node_5, ($$render) => {
-        if (get(features).length > 0) $$render(consequent_4);
-      });
-    }
-    append($$anchor2, fragment);
-  });
-  append($$anchor, div);
+          append($$anchor3, div_7);
+        }
+      );
+      append($$anchor2, div_6);
+    };
+    if_block(node_2, ($$render) => {
+      if (get(visualFeatures).length > 0 || get(readingFeatures).length > 0 || get(aiFeatures).length > 0) $$render(consequent_2);
+    });
+  }
+  append($$anchor, fragment);
   pop();
 }
 delegate(["click"]);
-var root_1 = /* @__PURE__ */ from_html(`<span aria-hidden="true">&middot;</span> <a target="_blank" rel="noopener noreferrer"> </a>`, 1);
-var root$1 = /* @__PURE__ */ from_html(`<div class="accessify-footer"><span> </span> <!></div>`);
+var root_1$1 = /* @__PURE__ */ from_html(`<span aria-hidden="true">&middot;</span> <a target="_blank" rel="noopener noreferrer"> </a>`, 1);
+var root$1 = /* @__PURE__ */ from_html(`<div class="accessify-footer"><a target="_blank" rel="noopener noreferrer">Accessify Dashboard</a> <!></div>`);
 function PanelFooter($$anchor, $$props) {
   push($$props, true);
   let lang = prop($$props, "lang", 3, "en");
   var div = root$1();
-  var span = child(div);
-  var text = child(span);
-  var node = sibling(span, 2);
+  var a = child(div);
+  var node = sibling(a, 2);
   {
     var consequent = ($$anchor2) => {
-      var fragment = root_1();
-      var a = sibling(first_child(fragment), 2);
-      var text_1 = child(a);
+      var fragment = root_1$1();
+      var a_1 = sibling(first_child(fragment), 2);
+      var text = child(a_1);
       template_effect(
         ($0) => {
-          set_attribute(a, "href", $$props.statementUrl);
-          set_text(text_1, $0);
+          set_attribute(a_1, "href", $$props.statementUrl);
+          set_text(text, $0);
         },
         [() => t("widget.statement", lang())]
       );
@@ -6610,48 +6620,186 @@ function PanelFooter($$anchor, $$props) {
       if ($$props.statementUrl) $$render(consequent);
     });
   }
-  template_effect(($0) => set_text(text, $0), [() => t("widget.poweredBy", lang())]);
+  template_effect(() => set_attribute(a, "href", $$props.dashboardUrl || "https://accessify-dashboard.pages.dev"));
   append($$anchor, div);
   pop();
 }
-var root = /* @__PURE__ */ from_html(`<div class="sr-only" role="status" aria-live="polite" aria-atomic="true"> </div> <!> <div class="accessify-panel" role="dialog"><!> <!> <!> <!></div>`, 1);
-function WidgetApp($$anchor, $$props) {
-  push($$props, true);
-  let config2 = prop($$props, "config", 7);
-  let isOpen = /* @__PURE__ */ state(false);
-  let activeFeatures = /* @__PURE__ */ state(proxy(/* @__PURE__ */ new Map()));
-  let currentTheme = /* @__PURE__ */ state("light");
-  let panelEl = /* @__PURE__ */ state(null);
-  let triggerEl = /* @__PURE__ */ state(null);
-  let announcement = /* @__PURE__ */ state("");
-  let widgetLang = /* @__PURE__ */ state("en");
-  const STORAGE_KEY = "accessify-prefs";
-  let activeCount = /* @__PURE__ */ user_derived(() => Array.from(get(activeFeatures).values()).filter(Boolean).length);
-  function announce(message) {
-    set(announcement, "");
-    requestAnimationFrame(() => {
-      set(announcement, message, true);
-    });
-  }
-  function loadPrefs() {
-    try {
-      const saved = localStorage.getItem(STORAGE_KEY);
-      if (saved) {
-        const prefs = JSON.parse(saved);
-        set(activeFeatures, new Map(Object.entries(prefs)), true);
+let savedNodes = [];
+let currentTranslateLang = null;
+let translating = false;
+const TRANSLATE_URL = "https://translate.googleapis.com/translate_a/single";
+async function translateSingleText(text, sourceLang, targetLang) {
+  const params = new URLSearchParams({
+    client: "gtx",
+    sl: sourceLang,
+    tl: targetLang,
+    dt: "t",
+    q: text
+  });
+  try {
+    const res = await fetch(`${TRANSLATE_URL}?${params.toString()}`);
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const data = await res.json();
+    if (Array.isArray(data[0])) {
+      const parts = [];
+      for (const segment of data[0]) {
+        if (Array.isArray(segment) && typeof segment[0] === "string") {
+          parts.push(segment[0]);
+        }
       }
-    } catch {
+      return parts.join("");
     }
+    return text;
+  } catch {
+    return text;
   }
-  function savePrefs() {
-    try {
-      const obj = Object.fromEntries(get(activeFeatures));
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(obj));
-    } catch {
+}
+async function translateTexts(texts, sourceLang, targetLang) {
+  const CONCURRENCY = 10;
+  const results = new Array(texts.length);
+  for (let start = 0; start < texts.length; start += CONCURRENCY) {
+    const batch = texts.slice(start, start + CONCURRENCY);
+    const translated = await Promise.all(
+      batch.map((text) => translateSingleText(text, sourceLang, targetLang))
+    );
+    for (let j = 0; j < translated.length; j++) {
+      results[start + j] = translated[j];
     }
   }
-  function detectTheme() {
-    if (config2().theme === "light" || config2().theme === "dark") {
+  return results;
+}
+function getTranslatableTextNodes() {
+  const walker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_TEXT,
+    {
+      acceptNode(node) {
+        if (!node.textContent || !node.textContent.trim()) {
+          return NodeFilter.FILTER_REJECT;
+        }
+        const parent = node.parentElement;
+        if (!parent) return NodeFilter.FILTER_REJECT;
+        const tag2 = parent.tagName;
+        if (["SCRIPT", "STYLE", "NOSCRIPT", "CODE", "PRE", "TEXTAREA", "INPUT"].includes(tag2)) {
+          return NodeFilter.FILTER_REJECT;
+        }
+        if (parent.closest("accessify-widget")) {
+          return NodeFilter.FILTER_REJECT;
+        }
+        return NodeFilter.FILTER_ACCEPT;
+      }
+    }
+  );
+  const nodes = [];
+  let current;
+  while (current = walker.nextNode()) {
+    nodes.push(current);
+  }
+  return nodes;
+}
+function createTextTransformService() {
+  return {
+    async translate(targetLang) {
+      if (translating) return;
+      translating = true;
+      try {
+        if (savedNodes.length > 0) {
+          this.restore();
+        }
+        const pageLang = document.documentElement.lang?.split("-")[0] || "auto";
+        const textNodes = getTranslatableTextNodes();
+        if (textNodes.length === 0) {
+          translating = false;
+          return;
+        }
+        savedNodes = textNodes.map((node) => ({
+          node,
+          original: node.textContent
+        }));
+        const uniqueTexts = [...new Set(savedNodes.map((s) => s.original.trim()).filter(Boolean))];
+        const translated = await translateTexts(uniqueTexts, pageLang, targetLang);
+        const lookup = /* @__PURE__ */ new Map();
+        uniqueTexts.forEach((text, i) => {
+          if (translated[i]) {
+            lookup.set(text, translated[i]);
+          }
+        });
+        for (const saved of savedNodes) {
+          const trimmed = saved.original.trim();
+          const replacement = lookup.get(trimmed);
+          if (replacement) {
+            const leading = saved.original.match(/^\s*/)?.[0] || "";
+            const trailing = saved.original.match(/\s*$/)?.[0] || "";
+            saved.node.textContent = leading + replacement + trailing;
+          }
+        }
+        currentTranslateLang = targetLang;
+      } finally {
+        translating = false;
+      }
+    },
+    async simplify(_level, _lang) {
+    },
+    restore() {
+      for (const saved of savedNodes) {
+        saved.node.textContent = saved.original;
+      }
+      savedNodes = [];
+      currentTranslateLang = null;
+    },
+    isTranslated() {
+      return currentTranslateLang !== null;
+    },
+    currentLang() {
+      return currentTranslateLang;
+    }
+  };
+}
+var root_3 = /* @__PURE__ */ from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg>`);
+var root_2 = /* @__PURE__ */ from_html(`<button class="accessify-lang-option" role="option"><span> </span> <!></button>`);
+var root_1 = /* @__PURE__ */ from_html(`<div class="accessify-lang-list" role="listbox"></div>`);
+var root = /* @__PURE__ */ from_html(`<div class="sr-only" role="status" aria-live="polite" aria-atomic="true"> </div> <!> <div class="accessify-panel" role="dialog"><!> <div class="accessify-body"><div class="accessify-lang-dropdown"><button class="accessify-lang-toggle"><span class="accessify-lang-toggle-left"><!> <span> </span></span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></button> <!></div> <div class="accessify-section-divider"></div> <!> <div class="accessify-section-divider"></div> <!></div> <!></div>`, 1);
+function WidgetApp($$anchor, $$props) {
+  push($$props, true);
+  let config2 = prop($$props, "config", 7);
+  let isOpen = /* @__PURE__ */ state(false);
+  let activeFeatures = /* @__PURE__ */ state(proxy(/* @__PURE__ */ new Map()));
+  let currentTheme = /* @__PURE__ */ state("light");
+  let panelEl = /* @__PURE__ */ state(null);
+  let triggerEl = /* @__PURE__ */ state(null);
+  let announcement = /* @__PURE__ */ state("");
+  let widgetLang = /* @__PURE__ */ state("en");
+  let activeProfileId = /* @__PURE__ */ state(null);
+  let langDropdownOpen = /* @__PURE__ */ state(false);
+  const textTransformService = createTextTransformService();
+  const STORAGE_KEY = "accessify-prefs";
+  let activeCount = /* @__PURE__ */ user_derived(() => Array.from(get(activeFeatures).values()).filter(Boolean).length);
+  let currentLangOption = /* @__PURE__ */ user_derived(() => LANGUAGE_OPTIONS.find((o) => o.code === get(widgetLang)));
+  function announce(message) {
+    set(announcement, "");
+    requestAnimationFrame(() => {
+      set(announcement, message, true);
+    });
+  }
+  function loadPrefs() {
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) {
+        const prefs = JSON.parse(saved);
+        set(activeFeatures, new Map(Object.entries(prefs)), true);
+      }
+    } catch {
+    }
+  }
+  function savePrefs() {
+    try {
+      const obj = Object.fromEntries(get(activeFeatures));
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(obj));
+    } catch {
+    }
+  }
+  function detectTheme() {
+    if (config2().theme === "light" || config2().theme === "dark") {
       set(currentTheme, config2().theme, true);
       return;
     }
@@ -6711,14 +6859,43 @@ function WidgetApp($$anchor, $$props) {
   }
   function resetAll() {
     set(activeFeatures, /* @__PURE__ */ new Map(), true);
+    set(activeProfileId, null);
     savePrefs();
+    textTransformService.restore();
     window.dispatchEvent(new CustomEvent("accessify:reset"));
     announce(t("widget.resetConfirm", get(widgetLang)));
   }
+  function handleProfileActivate(profile) {
+    if (get(activeProfileId) === profile.id) {
+      set(activeProfileId, null);
+      for (const fid of profile.features) {
+        get(activeFeatures).set(fid, false);
+      }
+      set(activeFeatures, new Map(get(activeFeatures)), true);
+      savePrefs();
+      window.dispatchEvent(new CustomEvent("accessify:reset"));
+      announce(`${t(profile.nameKey, get(widgetLang))} ${t("status.deactivated", get(widgetLang))}`);
+      return;
+    }
+    set(activeProfileId, profile.id, true);
+    for (const fid of profile.features) {
+      get(activeFeatures).set(fid, true);
+    }
+    set(activeFeatures, new Map(get(activeFeatures)), true);
+    savePrefs();
+    announce(`${t(profile.nameKey, get(widgetLang))} ${t("status.activated", get(widgetLang))}`);
+  }
   function handleLangChange(newLang) {
     set(widgetLang, getSupportedLang(newLang), true);
     config2().lang = get(widgetLang);
+    set(langDropdownOpen, false);
     applyLanguage();
+    const pageLang = document.documentElement.lang?.split("-")[0] || "en";
+    if (get(widgetLang) !== pageLang) {
+      textTransformService.translate(get(widgetLang));
+    } else {
+      textTransformService.restore();
+    }
   }
   function handleKeydown(e) {
     if (e.key === "Escape" && get(isOpen)) {
@@ -6775,24 +6952,69 @@ function WidgetApp($$anchor, $$props) {
     get lang() {
       return get(widgetLang);
     },
-    onclose: close,
-    onreset: resetAll,
-    onlangchange: handleLangChange
-  });
-  var node_2 = sibling(node_1, 2);
-  StatusBar(node_2, {
     get activeCount() {
       return get(activeCount);
     },
+    onclose: close,
+    onreset: resetAll
+  });
+  var div_2 = sibling(node_1, 2);
+  var div_3 = child(div_2);
+  var button = child(div_3);
+  var span = child(button);
+  var node_2 = child(span);
+  html(node_2, iconGlobe);
+  var span_1 = sibling(node_2, 2);
+  var text_1 = child(span_1);
+  var svg = sibling(span, 2);
+  let classes;
+  var node_3 = sibling(button, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var div_4 = root_1();
+      each(div_4, 21, () => LANGUAGE_OPTIONS, index, ($$anchor3, option) => {
+        var button_1 = root_2();
+        var span_2 = child(button_1);
+        var text_2 = child(span_2);
+        var node_4 = sibling(span_2, 2);
+        {
+          var consequent = ($$anchor4) => {
+            var svg_1 = root_3();
+            append($$anchor4, svg_1);
+          };
+          if_block(node_4, ($$render) => {
+            if (get(widgetLang) === get(option).code) $$render(consequent);
+          });
+        }
+        template_effect(() => {
+          set_attribute(button_1, "aria-selected", get(widgetLang) === get(option).code);
+          set_attribute(button_1, "data-active", get(widgetLang) === get(option).code);
+          set_text(text_2, `${(get(option).flag || "") ?? ""} ${get(option).label ?? ""}`);
+        });
+        delegated("click", button_1, () => handleLangChange(get(option).code));
+        append($$anchor3, button_1);
+      });
+      template_effect(($0) => set_attribute(div_4, "aria-label", $0), [() => t("widget.widgetLang", get(widgetLang))]);
+      append($$anchor2, div_4);
+    };
+    if_block(node_3, ($$render) => {
+      if (get(langDropdownOpen)) $$render(consequent_1);
+    });
+  }
+  var node_5 = sibling(div_3, 4);
+  ProfileSection(node_5, {
     get lang() {
       return get(widgetLang);
     },
-    onreset: resetAll
+    get activeProfileId() {
+      return get(activeProfileId);
+    },
+    onactivate: handleProfileActivate
   });
-  var node_3 = sibling(node_2, 2);
+  var node_6 = sibling(node_5, 4);
   {
     let $0 = /* @__PURE__ */ user_derived(() => ({ ...config2(), lang: get(widgetLang) }));
-    FeatureGrid(node_3, {
+    FeatureGrid(node_6, {
       get config() {
         return get($0);
       },
@@ -6802,13 +7024,16 @@ function WidgetApp($$anchor, $$props) {
       ontoggle: handleFeatureToggle
     });
   }
-  var node_4 = sibling(node_3, 2);
-  PanelFooter(node_4, {
+  var node_7 = sibling(div_2, 2);
+  PanelFooter(node_7, {
     get lang() {
       return get(widgetLang);
     },
     get statementUrl() {
       return config2().statementUrl;
+    },
+    get dashboardUrl() {
+      return config2().dashboardUrl;
     }
   });
   bind_this(div_1, ($$value) => set(panelEl, $$value), () => get(panelEl));
@@ -6818,6 +7043,9 @@ function WidgetApp($$anchor, $$props) {
       set_attribute(div_1, "aria-label", $0);
       set_attribute(div_1, "aria-hidden", !get(isOpen));
       set_attribute(div_1, "dir", $1);
+      set_attribute(button, "aria-expanded", get(langDropdownOpen));
+      set_text(text_1, `${(get(currentLangOption)?.flag || "") ?? ""} ${(get(currentLangOption)?.label || get(widgetLang)) ?? ""}`);
+      classes = set_class(svg, 0, "accessify-lang-chevron", null, classes, { "accessify-lang-chevron--open": get(langDropdownOpen) });
       div_1.dir = div_1.dir;
     },
     [
@@ -6825,9 +7053,13 @@ function WidgetApp($$anchor, $$props) {
       () => isRtlLang(get(widgetLang)) ? "rtl" : "ltr"
     ]
   );
+  delegated("click", button, () => {
+    set(langDropdownOpen, !get(langDropdownOpen));
+  });
   append($$anchor, fragment);
   return pop($$exports);
 }
+delegate(["click"]);
 const CHECKMARK_SVG = encodeURIComponent(
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>'
 );
@@ -6836,652 +7068,1105 @@ function createWidgetStyles(config2) {
   const isRight = pos.includes("right");
   const isBottom = pos.includes("bottom");
   const z = config2.zIndex || 999999;
+  const panelRadius = isRight ? "20px 0 0 20px" : "0 20px 20px 0";
+  const hiddenTransform = isRight ? "translateX(24px)" : "translateX(-24px)";
+  const c = config2;
+  const brandOverrides = [
+    c.brandPrimaryColor ? `--surface: ${c.brandPrimaryColor};` : "",
+    c.brandSurfaceColor ? `--surface-dim: ${c.brandSurfaceColor};` : "",
+    c.brandCardColor ? `--surface-card: ${c.brandCardColor};` : "",
+    c.brandHoverColor ? `--surface-hover: ${c.brandHoverColor};` : "",
+    c.brandTextColor ? `--text: ${c.brandTextColor};` : "",
+    c.brandTextDimColor ? `--text-dim: ${c.brandTextDimColor};` : "",
+    c.brandAccentColor ? `--accent: ${c.brandAccentColor}; --accent-soft: ${c.brandAccentColor}26;` : "",
+    c.brandBorderColor ? `--border: ${c.brandBorderColor}; --border-hl: ${c.brandBorderColor};` : ""
+  ].filter(Boolean).join("\n      ");
+  const triggerBg = c.brandTriggerColor || "";
+  const triggerIcon = c.brandTriggerIconColor || "";
+  const panelW = c.panelWidth ? `${c.panelWidth}px` : "420px";
   return `
     :host {
       all: initial;
-      font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", "Segoe UI", sans-serif;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       font-size: 15px;
       line-height: 1.5;
-      color-scheme: light dark;
+      color-scheme: dark;
     }
 
-    *, *::before, *::after {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
     #accessify-mount {
-      --space-1: 4px;
-      --space-2: 8px;
-      --space-3: 12px;
-      --space-4: 16px;
-      --space-5: 20px;
-      --space-6: 24px;
-      --space-7: 32px;
-      --radius-sm: 10px;
-      --radius-md: 16px;
-      --radius-lg: 24px;
-      --radius-pill: 999px;
-      --text-xs: 11px;
-      --text-sm: 13px;
-      --text-base: 15px;
-      --text-lg: 18px;
-      --text-xl: 24px;
-      --font-medium: 500;
-      --font-semibold: 600;
-      --font-bold: 700;
-      --surface: #f6efe4;
-      --surface-strong: #fffdf9;
-      --surface-muted: #ece4d8;
-      --surface-tint: #e2eee8;
-      --text: #17212b;
-      --text-secondary: #52616f;
-      --border: rgba(23, 33, 43, 0.12);
-      --border-strong: rgba(23, 33, 43, 0.22);
-      --accent: #0f766e;
-      --accent-strong: #0b5c56;
-      --accent-soft: rgba(15, 118, 110, 0.12);
-      --signal: #c97a1e;
-      --signal-soft: rgba(201, 122, 30, 0.14);
-      --text-on-accent: #ffffff;
-      --shadow-sm: 0 12px 24px rgba(16, 24, 32, 0.08);
-      --shadow-lg: 0 28px 80px rgba(9, 21, 30, 0.2);
-      --transition-fast: 140ms ease;
-      --transition-normal: 220ms ease;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      #accessify-mount:not([data-theme="light"]) {
-        --surface: #0f1a22;
-        --surface-strong: #132330;
-        --surface-muted: #1a2b38;
-        --surface-tint: #17323a;
-        --text: #f4f7fa;
-        --text-secondary: #b4c3ce;
-        --border: rgba(244, 247, 250, 0.12);
-        --border-strong: rgba(244, 247, 250, 0.22);
-        --accent: #2dd4bf;
-        --accent-strong: #16b5a1;
-        --accent-soft: rgba(45, 212, 191, 0.12);
-        --signal: #f6ad55;
-        --signal-soft: rgba(246, 173, 85, 0.16);
-        --shadow-sm: 0 12px 24px rgba(0, 0, 0, 0.28);
-        --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.45);
-      }
-    }
-
-    #accessify-mount[data-theme="dark"] {
-      --surface: #0f1a22;
-      --surface-strong: #132330;
-      --surface-muted: #1a2b38;
-      --surface-tint: #17323a;
-      --text: #f4f7fa;
-      --text-secondary: #b4c3ce;
-      --border: rgba(244, 247, 250, 0.12);
-      --border-strong: rgba(244, 247, 250, 0.22);
-      --accent: #2dd4bf;
-      --accent-strong: #16b5a1;
-      --accent-soft: rgba(45, 212, 191, 0.12);
-      --signal: #f6ad55;
-      --signal-soft: rgba(246, 173, 85, 0.16);
-      --shadow-sm: 0 12px 24px rgba(0, 0, 0, 0.28);
-      --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.45);
+      --gap: 14px;
+      --pad: 18px;
+      --radius: 12px;
+      --radius-lg: 16px;
+      --pill: 999px;
+      --surface: #3d4775;
+      --surface-card: #4a5387;
+      --surface-dim: #353e6a;
+      --surface-hover: #545d8f;
+      --text: #f0f0f5;
+      --text-dim: #b8bdd4;
+      --border: rgba(255,255,255,0.10);
+      --border-hl: rgba(255,255,255,0.20);
+      --accent: #e8837c;
+      --accent-soft: rgba(232,131,124,0.15);
+      --accent-on: #fff;
+      --shadow: 0 12px 48px rgba(0,0,0,0.35);
+      --fast: 140ms ease;
+      ${brandOverrides}
     }
 
-    .sr-only {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      border-width: 0;
-    }
-
-    *:focus-visible {
-      outline: 3px solid var(--signal);
-      outline-offset: 3px;
-      border-radius: 12px;
-    }
+    .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
+    *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
 
+    /* ─── Trigger ─── */
     .accessify-trigger {
       position: fixed;
       ${isBottom ? "bottom: 20px" : "top: 20px"};
       ${isRight ? "right: 20px" : "left: 20px"};
       z-index: ${z};
-      width: 64px;
-      height: 64px;
-      border: none;
-      border-radius: 22px;
-      background:
-        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.22), transparent 42%),
-        linear-gradient(145deg, #0f766e 0%, #144f67 55%, #c97a1e 100%);
-      color: #ffffff;
+      width: 56px; height: 56px;
+      border: none; border-radius: 16px;
+      background: ${triggerBg || "linear-gradient(135deg, #545d8f, #3d4775)"};
+      color: ${triggerIcon || "#e8837c"};
       cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-shadow: 0 18px 42px rgba(12, 36, 46, 0.34);
-      transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
-    }
-
-    .accessify-trigger:hover {
-      transform: translateY(-2px) scale(1.02);
-      box-shadow: 0 22px 48px rgba(12, 36, 46, 0.42);
-      filter: saturate(1.06);
-    }
-
-    .accessify-trigger:active {
-      transform: translateY(0) scale(0.98);
-    }
-
-    .accessify-trigger svg {
-      width: 30px;
-      height: 30px;
-    }
+      display: flex; align-items: center; justify-content: center;
+      box-shadow: 0 6px 20px rgba(50,60,100,0.5);
+      transition: transform var(--fast), box-shadow var(--fast), opacity var(--fast);
+      touch-action: none;
+    }
+    .accessify-trigger:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(50,60,100,0.6); }
+    .accessify-trigger:active { transform: scale(0.96); }
+    .accessify-trigger[aria-expanded="true"] { opacity:0; pointer-events:none; transform:scale(0.9); }
+    .accessify-trigger svg { width: 26px; height: 26px; }
+    .accessify-trigger--dragging { cursor: grabbing !important; opacity: 0.85; }
 
+    /* ─── Panel ─── */
     .accessify-panel {
-      position: fixed;
-      ${isBottom ? "bottom: 96px" : "top: 96px"};
-      ${isRight ? "right: 20px" : "left: 20px"};
+      position: fixed; top: 0; bottom: 0;
+      ${isRight ? "right: 0" : "left: 0"};
       z-index: ${z - 1};
-      width: 476px;
-      max-height: calc(100vh - 120px);
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      border-radius: 28px;
-      border: 1px solid var(--border);
-      background:
-        radial-gradient(circle at top right, rgba(201, 122, 30, 0.16), transparent 36%),
-        linear-gradient(180deg, var(--surface-strong) 0%, var(--surface) 100%);
+      width: min(${panelW}, 100vw); height: 100vh;
+      display: flex; flex-direction: column;
+      border-radius: ${panelRadius};
+      background: var(--surface);
       color: var(--text);
-      box-shadow: var(--shadow-lg);
-      transform-origin: ${isBottom ? "bottom" : "top"} ${isRight ? "right" : "left"};
-      transition: opacity var(--transition-normal), transform var(--transition-normal);
-      backdrop-filter: blur(18px);
-    }
-
-    .accessify-panel[aria-hidden="true"] {
-      opacity: 0;
-      transform: scale(0.96) translateY(${isBottom ? "12px" : "-12px"});
-      pointer-events: none;
-      display: none;
-    }
-
-    .accessify-panel[aria-hidden="false"] {
-      opacity: 1;
-      transform: scale(1) translateY(0);
+      box-shadow: var(--shadow);
+      transition: opacity 200ms ease, transform 200ms ease;
     }
+    .accessify-panel[aria-hidden="true"] { opacity:0; transform:${hiddenTransform}; pointer-events:none; display:none; }
+    .accessify-panel[aria-hidden="false"] { opacity:1; transform:translateX(0); }
 
+    /* ─── Header ─── */
     .accessify-header {
-      position: relative;
-      display: grid;
-      gap: var(--space-4);
-      padding: var(--space-5);
-      background:
-        radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 34%),
-        linear-gradient(145deg, #0f2430 0%, #103e4c 52%, #1a5d4b 100%);
-      color: #f5fbff;
-    }
-
-    .accessify-header-copy {
-      display: grid;
-      gap: var(--space-2);
-    }
-
-    .accessify-header-kicker {
-      display: inline-flex;
-      align-items: center;
-      width: fit-content;
-      padding: 6px 10px;
-      border-radius: var(--radius-pill);
-      background: rgba(255, 255, 255, 0.12);
-      color: #ffe2b8;
-      font-size: var(--text-xs);
-      font-weight: var(--font-semibold);
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-    }
-
-    .accessify-header-title {
-      display: grid;
-      gap: 6px;
-    }
-
-    .accessify-header h2 {
-      font-size: var(--text-xl);
-      font-weight: var(--font-bold);
-      line-height: 1.1;
-    }
-
-    .accessify-header p {
-      color: rgba(245, 251, 255, 0.82);
-      font-size: var(--text-sm);
-      max-width: 34ch;
-    }
-
-    .accessify-header-toolbar {
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
-      justify-content: space-between;
-      flex-wrap: wrap;
-    }
-
-    .accessify-language-picker {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      gap: 10px;
-      min-width: 172px;
-      padding: 0 14px;
-      border-radius: 16px;
-      border: 1px solid rgba(255, 255, 255, 0.16);
-      background: rgba(10, 23, 29, 0.24);
-      color: #ffffff;
-      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
-    }
-
-    .accessify-language-icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      color: #9ce4da;
-    }
-
-    .accessify-language-icon svg {
-      width: 16px;
-      height: 16px;
-    }
-
-    .accessify-language-select {
-      appearance: none;
-      width: 100%;
-      border: none;
-      background: transparent;
-      color: #ffffff;
-      padding: 12px 0;
-      font-size: var(--text-sm);
-      font-weight: var(--font-medium);
-      cursor: pointer;
-    }
-
-    .accessify-language-select option {
-      color: #17212b;
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 14px var(--pad);
+      border-bottom: 1px solid var(--border);
+      background: var(--surface-dim);
+      flex-shrink: 0;
     }
+    .accessify-header-left { display: flex; align-items: center; gap: 10px; }
+    .accessify-header-actions { display: flex; align-items: center; gap: 6px; }
 
-    .accessify-header-actions {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      flex-wrap: wrap;
-    }
+    .accessify-logo { display: inline-flex; color: var(--accent); }
+    .accessify-logo svg { height: 24px; width: auto; }
 
     .accessify-header-btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      padding: 11px 14px;
-      border: 1px solid rgba(255, 255, 255, 0.16);
-      border-radius: 16px;
-      background: rgba(10, 23, 29, 0.24);
-      color: #f5fbff;
-      cursor: pointer;
-      font-size: var(--text-sm);
-      font-weight: var(--font-medium);
-      transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
-    }
-
-    .accessify-header-btn:hover {
-      background: rgba(255, 255, 255, 0.12);
-      border-color: rgba(255, 255, 255, 0.24);
-      transform: translateY(-1px);
-    }
-
-    .accessify-header-btn svg {
-      width: 16px;
-      height: 16px;
-    }
-
-    .accessify-header-btn--icon {
-      width: 44px;
-      padding-inline: 0;
-    }
-
-    .accessify-status {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--space-3);
-      padding: 14px var(--space-5);
-      border-bottom: 1px solid var(--border);
-      background: linear-gradient(180deg, rgba(15, 118, 110, 0.06), transparent);
-    }
-
-    .accessify-status-count {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      min-height: 36px;
-      padding: 0 14px;
-      border-radius: var(--radius-pill);
-      background: var(--accent-soft);
-      color: var(--accent-strong);
-      font-size: var(--text-sm);
-      font-weight: var(--font-semibold);
-    }
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 34px; height: 34px;
+      border: 1px solid var(--border); border-radius: 10px;
+      background: var(--surface); color: var(--text-dim);
+      cursor: pointer; transition: background var(--fast), color var(--fast);
+    }
+    .accessify-header-btn:hover { background: var(--surface-hover); color: var(--text); }
+    .accessify-header-btn svg { width: 16px; height: 16px; }
+    .accessify-header-btn--icon { padding: 0; }
+    .accessify-header-btn--close { background: transparent; border-color: transparent; }
 
-    .accessify-status-count[data-count="0"] {
-      background: var(--surface-muted);
-      color: var(--text-secondary);
+    /* ─── Shared Accordion (Language + Profiles) ─── */
+    .accessify-lang-dropdown,
+    .accessify-accordion {
+      border-radius: var(--radius);
+      border: 1px solid var(--border);
+      overflow: clip;
     }
 
-    .accessify-status-reset {
-      border: none;
-      background: none;
-      color: var(--text-secondary);
-      cursor: pointer;
-      font-size: var(--text-sm);
-      font-weight: var(--font-medium);
-      padding: 8px 0;
-      transition: color var(--transition-fast);
-    }
+    .accessify-lang-toggle,
+    .accessify-accordion-toggle {
+      display: flex; align-items: center; justify-content: space-between;
+      width: 100%; padding: 14px 14px;
+      border: none; background: var(--surface-card);
+      color: var(--text); cursor: pointer; font-family: inherit;
+      font-size: 15px; font-weight: 700;
+      transition: background var(--fast);
+    }
+    .accessify-lang-toggle:hover,
+    .accessify-accordion-toggle:hover { background: var(--surface-hover); }
 
-    .accessify-status-reset:hover {
-      color: var(--signal);
+    .accessify-lang-toggle-left,
+    .accessify-accordion-toggle-left {
+      display: flex; align-items: center; gap: 10px;
     }
+    .accessify-lang-toggle-left svg,
+    .accessify-accordion-toggle-left svg { width: 20px; height: 20px; color: var(--accent); }
 
-    .accessify-body {
-      display: grid;
-      gap: var(--space-4);
-      padding: var(--space-4);
-      overflow-y: auto;
+    .accessify-lang-chevron,
+    .accessify-accordion-chevron {
+      width: 18px; height: 18px; color: var(--text-dim);
+      transition: transform 200ms ease; flex-shrink: 0;
     }
+    .accessify-lang-chevron--open,
+    .accessify-accordion-chevron--open { transform: rotate(180deg); }
 
-    .accessify-section {
-      display: grid;
-      gap: var(--space-4);
-      padding: var(--space-4);
-      border-radius: var(--radius-lg);
-      border: 1px solid var(--border);
-      background: rgba(255, 255, 255, 0.32);
-      box-shadow: var(--shadow-sm);
+    /* Shared list inside accordion */
+    .accessify-lang-list,
+    .accessify-accordion-list {
+      display: flex; flex-direction: column;
+      max-height: 280px; overflow-y: auto;
+      background: var(--surface-dim);
+      border-top: 1px solid var(--border);
     }
+    .accessify-lang-list::-webkit-scrollbar,
+    .accessify-accordion-list::-webkit-scrollbar { width: 4px; }
+    .accessify-lang-list::-webkit-scrollbar-thumb,
+    .accessify-accordion-list::-webkit-scrollbar-thumb { background: var(--border-hl); border-radius: 2px; }
 
-    .accessify-section--spotlight {
-      background:
-        linear-gradient(180deg, rgba(15, 118, 110, 0.08) 0%, rgba(255, 255, 255, 0.28) 100%);
-      border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
-    }
+    /* Language options */
+    .accessify-lang-option {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 12px var(--pad);
+      border: none; background: transparent;
+      color: var(--text); cursor: pointer;
+      font-size: 14px; font-weight: 500; font-family: inherit;
+      transition: background var(--fast);
+    }
+    .accessify-lang-option:hover { background: var(--surface-hover); }
+    .accessify-lang-option[data-active="true"] { color: var(--accent); font-weight: 700; }
+    .accessify-lang-option svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
 
-    .accessify-section-head {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      gap: var(--space-3);
-    }
+    /* Profile options (with icon + description) */
+    .accessify-accordion-option {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 14px var(--pad);
+      border: none; background: transparent;
+      color: var(--text); cursor: pointer;
+      font-family: inherit; text-align: left;
+      transition: background var(--fast);
+    }
+    .accessify-accordion-option:hover { background: var(--surface-hover); }
+    .accessify-accordion-option[data-active="true"] { background: var(--accent-soft); }
 
-    .accessify-section-head h3 {
-      font-size: var(--text-lg);
-      font-weight: var(--font-semibold);
-      line-height: 1.15;
-      color: var(--text);
+    .accessify-accordion-option-left {
+      display: flex; align-items: center; gap: 12px; min-width: 0;
     }
-
-    .accessify-section-head p {
-      margin-top: 6px;
-      color: var(--text-secondary);
-      font-size: var(--text-sm);
-      max-width: 46ch;
+    .accessify-accordion-option-icon {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 40px; height: 40px; border-radius: 12px;
+      background: var(--surface-card); color: var(--accent); flex-shrink: 0;
     }
-
-    .accessify-section-kicker {
-      display: inline-flex;
-      align-items: center;
-      margin-bottom: 8px;
-      color: var(--signal);
-      font-size: var(--text-xs);
-      font-weight: var(--font-semibold);
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
+    .accessify-accordion-option-icon svg { width: 24px; height: 24px; stroke-width: 2.5; }
+    .accessify-accordion-option-text {
+      display: flex; flex-direction: column; gap: 2px; min-width: 0;
     }
-
-    .accessify-control-grid {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: var(--space-3);
+    .accessify-accordion-option-name {
+      font-size: 14px; font-weight: 700; line-height: 1.3;
     }
-
-    .accessify-control-card {
-      display: grid;
-      gap: var(--space-3);
-      padding: var(--space-4);
-      border-radius: 22px;
-      border: 1px solid var(--border);
-      background: var(--surface-strong);
+    .accessify-accordion-option-desc {
+      font-size: 12px; font-weight: 400; color: var(--text-dim); line-height: 1.3;
     }
-
-    .accessify-control-copy {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      gap: var(--space-3);
-      align-items: start;
+    .accessify-accordion-option > svg {
+      width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-left: 8px;
     }
 
-    .accessify-control-copy h4 {
-      font-size: var(--text-base);
-      font-weight: var(--font-semibold);
-      color: var(--text);
+    /* ─── Scrollable Body ─── */
+    .accessify-body {
+      flex: 1 1 auto;
+      display: flex; flex-direction: column; gap: var(--gap);
+      padding: var(--gap) var(--pad);
+      overflow-y: auto; overscroll-behavior: contain;
     }
 
-    .accessify-control-copy p {
-      margin-top: 4px;
-      color: var(--text-secondary);
-      font-size: var(--text-sm);
-    }
+    /* ─── Contrast Row ─── */
+    .accessify-control-row {
+      display: flex; flex-direction: column; gap: 10px;
+      padding: 14px 16px;
+      border-radius: var(--radius); border: 1px solid var(--border);
+      background: var(--surface-card);
+    }
+    .accessify-control-label {
+      display: flex; align-items: center; gap: 8px;
+    }
+    .accessify-control-label-icon {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 34px; height: 34px; border-radius: 10px;
+      background: var(--surface-dim); color: var(--accent); flex-shrink: 0;
+    }
+    .accessify-control-label-icon svg { width: 18px; height: 18px; }
+    .accessify-control-label-text { font-size: 14px; font-weight: 600; }
 
-    .accessify-chip-group {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
+    /* Contrast chips */
+    .accessify-chip-row {
+      display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
     }
-
     .accessify-chip {
-      min-height: 40px;
-      padding: 0 14px;
-      border-radius: var(--radius-pill);
-      border: 1px solid var(--border);
-      background: var(--surface);
-      color: var(--text);
-      cursor: pointer;
-      font-size: var(--text-sm);
-      font-weight: var(--font-medium);
-      transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
-    }
+      min-height: 48px; padding: 6px 8px;
+      border-radius: 10px; border: 1px solid var(--border);
+      background: var(--surface-dim); color: var(--text);
+      cursor: pointer; font-size: 11px; font-weight: 600; font-family: inherit;
+      display: inline-flex; align-items: center; justify-content: center;
+      text-align: center; line-height: 1.25;
+      transition: background var(--fast), color var(--fast), border-color var(--fast);
+    }
+    .accessify-chip:hover { border-color: var(--border-hl); background: var(--surface-hover); }
+    .accessify-chip[data-active="true"] { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
+    .accessify-chip--icon { gap: 6px; }
+    .accessify-chip-icon { display: inline-flex; width: 14px; height: 14px; flex-shrink: 0; }
+    .accessify-chip-icon svg { width: 14px; height: 14px; }
 
-    .accessify-chip:hover {
-      transform: translateY(-1px);
-      border-color: var(--border-strong);
-      background: var(--surface-strong);
-    }
-
-    .accessify-chip[data-active="true"] {
-      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
-      color: var(--text-on-accent);
-      border-color: transparent;
-      box-shadow: 0 12px 22px rgba(15, 118, 110, 0.24);
-    }
-
-    .accessify-chip-group--sizes .accessify-chip {
-      min-width: 68px;
-      justify-content: center;
+    /* Text Size stepper */
+    .accessify-control-row:has(.accessify-stepper) {
+      flex-direction: row; align-items: center; justify-content: space-between; gap: var(--gap);
+    }
+    .accessify-stepper {
+      display: inline-flex; align-items: center;
+      border-radius: 10px; border: 1px solid var(--border);
+      background: var(--surface-dim); height: 36px; overflow: hidden;
+    }
+    .accessify-stepper-btn {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 36px; height: 100%; border: none; background: transparent;
+      color: var(--text); cursor: pointer; font-size: 18px; font-weight: 700;
+      transition: background var(--fast); font-family: inherit;
+    }
+    .accessify-stepper-btn:hover:not(:disabled) { background: var(--surface-hover); }
+    .accessify-stepper-btn:disabled { opacity: 0.3; cursor: default; }
+    .accessify-stepper-value {
+      min-width: 48px; text-align: center;
+      font-size: 13px; font-weight: 600; color: var(--text); user-select: none;
     }
 
+    /* ─── Feature Cards (2-column grid) ─── */
     .accessify-features {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: var(--space-3);
+      display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap);
     }
-
-    .accessify-card {
+    .accessify-card-wrap {
       position: relative;
-      display: grid;
-      gap: 10px;
-      align-content: start;
-      min-height: 156px;
-      padding: var(--space-4);
-      border-radius: 22px;
-      border: 1px solid var(--border);
-      background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
-      color: var(--text);
-      cursor: pointer;
-      text-align: left;
-      font-family: inherit;
-      font-size: inherit;
-      transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
-    }
-
-    .accessify-card:hover {
-      transform: translateY(-2px);
-      border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
-      box-shadow: var(--shadow-sm);
+      overflow: visible;
     }
-
-    .accessify-card[data-active="true"] {
-      border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
-      background:
-        linear-gradient(180deg, rgba(15, 118, 110, 0.08) 0%, rgba(255, 255, 255, 0.18) 100%);
-      box-shadow: 0 18px 32px rgba(15, 118, 110, 0.16);
-    }
-
+    .accessify-card {
+      position: relative; width: 100%;
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      gap: 8px; padding: 18px 10px; min-height: 105px;
+      border-radius: var(--radius-lg); border: 1px solid var(--border);
+      background: var(--surface-card); color: var(--text);
+      cursor: pointer; text-align: center; font-family: inherit;
+      transition: transform var(--fast), border-color var(--fast), background var(--fast), box-shadow var(--fast);
+    }
+    .accessify-card:hover { transform: translateY(-2px); border-color: var(--border-hl); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
+    .accessify-card[data-active="true"] { border-color: var(--accent); background: var(--accent-soft); }
     .accessify-card[data-active="true"]::after {
-      content: '';
-      position: absolute;
-      top: 14px;
-      right: 14px;
-      width: 20px;
-      height: 20px;
-      border-radius: 999px;
-      background: var(--accent);
+      content: ''; position: absolute; top: 8px; ${isRight ? "right: 8px" : "left: 8px"};
+      width: 18px; height: 18px; border-radius: 999px; background: var(--accent);
       mask-image: url("data:image/svg+xml,${CHECKMARK_SVG}");
-      mask-size: 12px;
-      mask-repeat: no-repeat;
-      mask-position: center;
+      mask-size: 10px; mask-repeat: no-repeat; mask-position: center;
       -webkit-mask-image: url("data:image/svg+xml,${CHECKMARK_SVG}");
-      -webkit-mask-size: 12px;
-      -webkit-mask-repeat: no-repeat;
-      -webkit-mask-position: center;
-    }
-
-    .accessify-card-top {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--space-2);
+      -webkit-mask-size: 10px; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
     }
-
     .accessify-card-icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 44px;
-      height: 44px;
-      border-radius: 16px;
-      background: var(--surface-tint);
-      color: var(--accent-strong);
-      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 48px; height: 48px; border-radius: 14px;
+      background: var(--surface-dim); color: var(--accent);
     }
+    .accessify-card-icon svg { width: 28px; height: 28px; stroke-width: 2.5; }
+    .accessify-card-label { font-size: 12px; font-weight: 600; line-height: 1.25; }
 
-    .accessify-card-icon svg {
-      width: 20px;
-      height: 20px;
-    }
-
-    .accessify-card-label {
-      font-size: var(--text-base);
-      font-weight: var(--font-semibold);
-      line-height: 1.2;
-      color: var(--text);
+    /* Info icon + tooltip */
+    .accessify-card-info {
+      position: absolute; top: 6px; ${isRight ? "right: 6px" : "left: 6px"}; z-index: 10;
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 22px; height: 22px; border-radius: 999px;
+      color: var(--text-dim); cursor: help; background: none; border: none;
+      opacity: 0.35; transition: opacity var(--fast), color var(--fast);
+    }
+    .accessify-card-info svg { width: 14px; height: 14px; }
+    .accessify-card-info:hover, .accessify-card-info:focus-visible { opacity: 1; color: var(--accent); }
+    .accessify-card-tooltip {
+      display: none; position: absolute;
+      top: calc(100% + 6px); ${isRight ? "right: 0" : "left: 0"};
+      width: 180px; padding: 10px 12px;
+      border-radius: 10px; background: #2a3158; color: var(--text);
+      font-size: 12px; font-weight: 500; line-height: 1.4;
+      text-align: left; white-space: normal;
+      box-shadow: 0 6px 24px rgba(0,0,0,0.5);
+      pointer-events: none; z-index: 100;
+    }
+    .accessify-card-info:hover .accessify-card-tooltip,
+    .accessify-card-info:focus-visible .accessify-card-tooltip {
+      display: block;
+    }
+    .accessify-card-tooltip::before {
+      content: ''; position: absolute; bottom: 100%; ${isRight ? "right: 4px" : "left: 4px"};
+      border: 5px solid transparent; border-bottom-color: #2a3158;
     }
 
-    .accessify-card-desc {
-      color: var(--text-secondary);
-      font-size: var(--text-sm);
-      line-height: 1.45;
+    /* ─── Section Divider ─── */
+    .accessify-section-divider {
+      height: 1px;
+      background: var(--border);
+      margin: 4px 0;
+      flex-shrink: 0;
     }
 
+    /* ─── Footer ─── */
     .accessify-footer {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--space-2);
-      padding: 14px var(--space-5) var(--space-5);
+      display: flex; align-items: center; justify-content: center; gap: 8px;
+      padding: 8px var(--pad);
       border-top: 1px solid var(--border);
-      color: var(--text-secondary);
-      font-size: var(--text-xs);
-      text-align: center;
-      background: linear-gradient(180deg, transparent, rgba(15, 118, 110, 0.04));
+      color: var(--text-dim); font-size: 11px;
+      background: var(--surface-dim); flex-shrink: 0;
     }
+    .accessify-footer a { color: var(--accent); text-decoration: none; font-weight: 600; }
+    .accessify-footer a:hover { text-decoration: underline; }
 
-    .accessify-footer a {
-      color: var(--accent-strong);
-      text-decoration: none;
-      font-weight: var(--font-medium);
+    /* ─── Reduced Motion ─── */
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
     }
 
-    .accessify-footer a:hover {
-      text-decoration: underline;
+    /* ─── Mobile ─── */
+    @media (max-width: 640px) {
+      .accessify-panel { width: 100vw; border-radius: 0; }
+      .accessify-features { gap: 8px; }
+      .accessify-body { padding: 8px 12px; }
+      .accessify-trigger {
+        ${isBottom ? "bottom: 16px" : "top: 16px"};
+        ${isRight ? "right: 16px" : "left: 16px"};
+        width: 50px; height: 50px; border-radius: 14px;
+      }
     }
-
-    @media (prefers-reduced-motion: reduce) {
-      *, *::before, *::after {
-        animation-duration: 0.01ms !important;
-        transition-duration: 0.01ms !important;
+  `;
+}
+const IDB_NAME = "accessify-alt-text-cache";
+const IDB_STORE = "alt-texts";
+const IDB_REPORT_STORE = "alt-text-reports";
+const IDB_VERSION = 2;
+function hashSrc(src) {
+  let hash = 5381;
+  const n = src.toLowerCase().trim();
+  for (let i = 0; i < n.length; i++) {
+    hash = (hash << 5) + hash + n.charCodeAt(i);
+    hash |= 0;
+  }
+  return Math.abs(hash).toString(36);
+}
+function openCache() {
+  return new Promise((resolve) => {
+    try {
+      const req = indexedDB.open(IDB_NAME, IDB_VERSION);
+      req.onupgradeneeded = () => {
+        const db = req.result;
+        if (!db.objectStoreNames.contains(IDB_STORE)) db.createObjectStore(IDB_STORE, { keyPath: "key" });
+        if (!db.objectStoreNames.contains(IDB_REPORT_STORE)) db.createObjectStore(IDB_REPORT_STORE, { keyPath: "key" });
+      };
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => resolve(null);
+    } catch {
+      resolve(null);
+    }
+  });
+}
+async function getAllCachedAltTexts() {
+  const db = await openCache();
+  const map = /* @__PURE__ */ new Map();
+  if (!db) return map;
+  return new Promise((resolve) => {
+    try {
+      const tx = db.transaction(IDB_STORE, "readonly");
+      const req = tx.objectStore(IDB_STORE).getAll();
+      req.onsuccess = () => {
+        const results = req.result;
+        for (const r of results) {
+          map.set(r.src, r.altText);
+        }
+        resolve(map);
+      };
+      req.onerror = () => resolve(map);
+    } catch {
+      resolve(map);
+    }
+  });
+}
+async function getCachedAltText(src) {
+  const db = await openCache();
+  if (!db) return null;
+  return new Promise((resolve) => {
+    try {
+      const tx = db.transaction(IDB_STORE, "readonly");
+      const req = tx.objectStore(IDB_STORE).get(hashSrc(src));
+      req.onsuccess = () => resolve(req.result?.altText || null);
+      req.onerror = () => resolve(null);
+    } catch {
+      resolve(null);
+    }
+  });
+}
+async function setCachedAltText(src, altText2, langCode) {
+  const db = await openCache();
+  if (!db) return;
+  return new Promise((resolve) => {
+    try {
+      const tx = db.transaction(IDB_STORE, "readwrite");
+      tx.objectStore(IDB_STORE).put({ key: hashSrc(src), src, altText: altText2, lang: langCode, createdAt: Date.now() });
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => resolve();
+    } catch {
+      resolve();
+    }
+  });
+}
+async function saveReport(src, altText2, langCode) {
+  const db = await openCache();
+  if (!db) return;
+  return new Promise((resolve) => {
+    try {
+      const tx = db.transaction(IDB_REPORT_STORE, "readwrite");
+      tx.objectStore(IDB_REPORT_STORE).put({
+        key: hashSrc(src) + "_" + Date.now(),
+        src,
+        pageUrl: window.location.href,
+        altText: altText2,
+        lang: langCode,
+        reportedAt: Date.now()
+      });
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => resolve();
+    } catch {
+      resolve();
+    }
+  });
+}
+async function removeCachedAltText(src) {
+  const db = await openCache();
+  if (!db) return;
+  return new Promise((resolve) => {
+    try {
+      const tx = db.transaction(IDB_STORE, "readwrite");
+      tx.objectStore(IDB_STORE).delete(hashSrc(src));
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => resolve();
+    } catch {
+      resolve();
+    }
+  });
+}
+const DEFAULT_API_BASE = "https://accessify-api.accessify.workers.dev";
+async function fetchServerAltTexts(siteKey, proxyUrl, lang) {
+  const map = /* @__PURE__ */ new Map();
+  try {
+    const base = proxyUrl || DEFAULT_API_BASE;
+    const pageUrl = window.location.origin + window.location.pathname;
+    const res = await fetch(`${base}/v1/manifest?siteKey=${encodeURIComponent(siteKey)}&url=${encodeURIComponent(pageUrl)}&feature=alt_text&variant=${encodeURIComponent(lang)}`, {
+      headers: { "Accept": "application/json" }
+    });
+    if (!res.ok) return map;
+    const data = await res.json();
+    if (data.blocks) {
+      for (const block2 of data.blocks) {
+        if (block2.selector && block2.result) {
+          map.set(block2.selector, block2.result);
+        }
       }
     }
-
-    @media (max-width: 560px) {
-      .accessify-panel {
-        width: calc(100vw - 24px);
-        ${isRight ? "right: 12px" : "left: 12px"};
-        ${isBottom ? "bottom: 86px" : "top: 86px"};
-        max-height: calc(100vh - 102px);
+  } catch {
+  }
+  return map;
+}
+function persistAltTextToServer(siteKey, proxyUrl, imageUrl, altText2, lang) {
+  try {
+    const base = proxyUrl || DEFAULT_API_BASE;
+    const pageUrl = window.location.origin + window.location.pathname;
+    fetch(`${base}/v1/cache/persist-alt-text`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ siteKey, pageUrl, imageUrl, altText: altText2, lang })
+    }).catch(() => {
+    });
+  } catch {
+  }
+}
+let autoApplied = false;
+async function autoApplyCachedAltTexts() {
+  if (autoApplied) return 0;
+  autoApplied = true;
+  const cache = /* @__PURE__ */ new Map();
+  const widgetConfig = window.Accessify?.config;
+  const siteKey = widgetConfig?.siteKey;
+  const proxyUrl = widgetConfig?.proxyUrl || "";
+  const pageLang = document.documentElement.lang?.split("-")[0] || "en";
+  if (siteKey) {
+    const serverCache = await fetchServerAltTexts(siteKey, proxyUrl, pageLang);
+    for (const [url, alt] of serverCache) {
+      cache.set(url, alt);
+      setCachedAltText(url, alt, pageLang).catch(() => {
+      });
+    }
+  }
+  const localCache = await getAllCachedAltTexts();
+  for (const [url, alt] of localCache) {
+    if (!cache.has(url)) cache.set(url, alt);
+  }
+  if (cache.size === 0) return 0;
+  let applied = 0;
+  const images = document.querySelectorAll("img");
+  images.forEach((img) => {
+    if (img.closest("#accessify-root")) return;
+    const alt = img.getAttribute("alt");
+    if (alt !== null && alt.trim() !== "") return;
+    const cached = cache.get(img.src);
+    if (cached) {
+      img.setAttribute("alt", cached);
+      img.setAttribute("title", cached);
+      applied++;
+    }
+  });
+  const observer = new MutationObserver((mutations) => {
+    for (const m of mutations) {
+      for (const node of m.addedNodes) {
+        const imgs = node instanceof HTMLImageElement ? [node] : node instanceof HTMLElement ? Array.from(node.querySelectorAll("img")) : [];
+        for (const img of imgs) {
+          if (img.closest("#accessify-root")) continue;
+          const a = img.getAttribute("alt");
+          if (a !== null && a.trim() !== "") continue;
+          const c = cache.get(img.src);
+          if (c) {
+            img.setAttribute("alt", c);
+            img.setAttribute("title", c);
+          }
+        }
       }
-
-      .accessify-header,
-      .accessify-status,
-      .accessify-footer {
-        padding-inline: var(--space-4);
+    }
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+  setTimeout(() => observer.disconnect(), 3e4);
+  return applied;
+}
+function createAltTextModule(aiService, initialLang = "de", serverConfig) {
+  const siteKey = serverConfig?.siteKey || "";
+  const proxyUrl = serverConfig?.proxyUrl || "";
+  let enabled = false;
+  let styleEl = null;
+  let badgeEl = null;
+  let missingAltImages = [];
+  const processedImages = /* @__PURE__ */ new Map();
+  let autoGenerating = false;
+  let tooltipEl = null;
+  const infoButtons = /* @__PURE__ */ new Map();
+  let reportPanelEl = null;
+  function lang() {
+    return getCurrentWidgetLang() || initialLang;
+  }
+  function isDE() {
+    return lang().startsWith("de");
+  }
+  const STYLE_ID = "accessify-alt-text-styles";
+  const HIGHLIGHT_CLASS = "accessify-alt-missing";
+  const BADGE_CLASS = "accessify-alt-badge";
+  function getStyles() {
+    return `
+      .${HIGHLIGHT_CLASS} {
+        outline: 3px dashed #e63946 !important;
+        outline-offset: 3px !important;
+        position: relative !important;
+        transition: outline-color 0.2s ease !important;
+      }
+      .${HIGHLIGHT_CLASS}.accessify-alt-generating::after {
+        content: '\\2026';
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        padding: 2px 6px;
+        background: #f77f00;
+        color: #fff;
+        font-family: system-ui, -apple-system, sans-serif;
+        font-size: 10px;
+        font-weight: 700;
+        border-radius: 3px;
+        line-height: 1.4;
+        pointer-events: none;
+        z-index: 1;
+      }
+      .${HIGHLIGHT_CLASS}.accessify-alt-done {
+        outline-color: #2a9d8f !important;
+        outline-style: solid !important;
+      }
+      .${HIGHLIGHT_CLASS}.accessify-alt-done::after {
+        content: none;
       }
 
-      .accessify-body {
-        padding: var(--space-3);
+      .accessify-alt-tooltip {
+        position: fixed;
+        z-index: 2147483647;
+        max-width: 320px;
+        padding: 8px 12px;
+        background: #1a1a2e;
+        color: #e0e0e0;
+        border-radius: 8px;
+        box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+        font-family: system-ui, -apple-system, sans-serif;
+        font-size: 13px;
+        line-height: 1.5;
+        pointer-events: none;
+        word-break: break-word;
+        opacity: 1;
       }
 
-      .accessify-control-grid,
-      .accessify-features {
-        grid-template-columns: 1fr;
+      .accessify-alt-info-btn {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        z-index: 10;
+        width: 22px;
+        height: 22px;
+        padding: 0;
+        border: none;
+        border-radius: 50%;
+        background: rgba(0,0,0,0.6);
+        color: #ccc;
+        font-family: system-ui, -apple-system, sans-serif;
+        font-size: 13px;
+        font-weight: 600;
+        line-height: 22px;
+        text-align: center;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 0.15s ease;
+        backdrop-filter: blur(4px);
+      }
+      .${HIGHLIGHT_CLASS}.accessify-alt-done:hover + .accessify-alt-info-btn,
+      .accessify-alt-info-btn:hover {
+        opacity: 1;
+      }
+      .accessify-alt-info-btn:hover {
+        background: rgba(0,0,0,0.8);
+        color: #fff;
       }
 
-      .accessify-card {
-        min-height: 0;
+      .accessify-alt-report-panel {
+        position: fixed;
+        z-index: 2147483646;
+        width: 240px;
+        padding: 12px;
+        background: #1a1a2e;
+        color: #f0f0f0;
+        border-radius: 10px;
+        box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+        font-family: system-ui, -apple-system, sans-serif;
+        font-size: 12px;
+        line-height: 1.5;
+      }
+      .accessify-alt-report-panel p {
+        margin: 0 0 8px 0;
+        color: #aaa;
+      }
+      .accessify-alt-report-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 5px 10px;
+        border: 1px solid rgba(220,53,69,0.3);
+        border-radius: 6px;
+        background: rgba(220,53,69,0.08);
+        color: #f0a0a8;
+        font-size: 11px;
+        cursor: pointer;
+        transition: background 0.15s ease;
+      }
+      .accessify-alt-report-btn:hover { background: rgba(220,53,69,0.2); }
+      .accessify-alt-report-btn.reported {
+        border-color: rgba(42,157,143,0.3);
+        background: rgba(42,157,143,0.1);
+        color: #2a9d8f;
+        cursor: default;
       }
 
-      .accessify-trigger {
-        ${isBottom ? "bottom: 16px" : "top: 16px"};
-        ${isRight ? "right: 16px" : "left: 16px"};
-        width: 58px;
-        height: 58px;
-        border-radius: 20px;
+      .${BADGE_CLASS} {
+        position: fixed;
+        top: 12px;
+        right: 12px;
+        z-index: 2147483646;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 8px 14px;
+        background: #1a1a2e;
+        color: #f0f0f0;
+        border-radius: 8px;
+        box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+        font-family: system-ui, -apple-system, sans-serif;
+        font-size: 13px;
+        user-select: none;
+      }
+      .${BADGE_CLASS}-count {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 22px;
+        height: 22px;
+        padding: 0 6px;
+        background: #e63946;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 700;
+        border-radius: 11px;
+      }
+    `;
+  }
+  function injectStyles() {
+    if (document.getElementById(STYLE_ID)) return;
+    styleEl = document.createElement("style");
+    styleEl.id = STYLE_ID;
+    styleEl.textContent = getStyles();
+    document.head.appendChild(styleEl);
+  }
+  function removeStyles() {
+    styleEl?.remove();
+    styleEl = null;
+    document.getElementById(STYLE_ID)?.remove();
+  }
+  function showTooltip(img) {
+    const text = img.getAttribute("alt") || processedImages.get(img)?.generatedAlt;
+    if (!text) return;
+    hideTooltip();
+    const tip = document.createElement("div");
+    tip.className = "accessify-alt-tooltip";
+    tip.textContent = text;
+    document.body.appendChild(tip);
+    tooltipEl = tip;
+    const rect = img.getBoundingClientRect();
+    const tipRect = tip.getBoundingClientRect();
+    let top = rect.top - tipRect.height - 8;
+    if (top < 4) top = rect.bottom + 8;
+    let left = rect.left + (rect.width - tipRect.width) / 2;
+    left = Math.max(4, Math.min(left, window.innerWidth - tipRect.width - 4));
+    tip.style.top = `${top}px`;
+    tip.style.left = `${left}px`;
+  }
+  function hideTooltip() {
+    tooltipEl?.remove();
+    tooltipEl = null;
+  }
+  function onMouseEnter(e) {
+    showTooltip(e.currentTarget);
+  }
+  function onMouseLeave() {
+    hideTooltip();
+  }
+  function addInfoButton(img) {
+    if (infoButtons.has(img)) return;
+    const parent = img.parentElement;
+    if (parent) {
+      const pos = getComputedStyle(parent).position;
+      if (pos === "static") parent.style.position = "relative";
+    }
+    const btn = document.createElement("button");
+    btn.className = "accessify-alt-info-btn";
+    btn.textContent = "i";
+    btn.setAttribute("aria-label", isDE() ? "Alt-Text melden" : "Report alt text");
+    btn.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      showReportPanel(img, btn);
+    });
+    img.insertAdjacentElement("afterend", btn);
+    infoButtons.set(img, btn);
+  }
+  function removeInfoButtons() {
+    infoButtons.forEach((btn) => btn.remove());
+    infoButtons.clear();
+  }
+  function showReportPanel(img, anchor) {
+    closeReportPanel();
+    const altText2 = img.getAttribute("alt") || "";
+    const panel = document.createElement("div");
+    panel.className = "accessify-alt-report-panel";
+    const btnRect = anchor.getBoundingClientRect();
+    panel.style.top = `${btnRect.bottom + 6}px`;
+    panel.style.left = `${Math.min(btnRect.left, window.innerWidth - 260)}px`;
+    const desc = document.createElement("p");
+    desc.textContent = isDE() ? "Alt-Text falsch? Melden Sie den Fehler." : "Alt text wrong? Report the error.";
+    panel.appendChild(desc);
+    const reportBtn = document.createElement("button");
+    reportBtn.className = "accessify-alt-report-btn";
+    reportBtn.textContent = isDE() ? "⚠ Fehler melden" : "⚠ Report error";
+    reportBtn.addEventListener("click", async () => {
+      await saveReport(img.src, altText2, lang());
+      await removeCachedAltText(img.src);
+      reportBtn.textContent = isDE() ? "✓ Gemeldet" : "✓ Reported";
+      reportBtn.classList.add("reported");
+    });
+    panel.appendChild(reportBtn);
+    document.body.appendChild(panel);
+    reportPanelEl = panel;
+    setTimeout(() => {
+      const handleOutside = (e) => {
+        if (!panel.contains(e.target) && e.target !== anchor) {
+          closeReportPanel();
+          document.removeEventListener("click", handleOutside);
+        }
+      };
+      document.addEventListener("click", handleOutside);
+    }, 50);
+    const handleEsc = (e) => {
+      if (e.key === "Escape") {
+        closeReportPanel();
+        document.removeEventListener("keydown", handleEsc);
+      }
+    };
+    document.addEventListener("keydown", handleEsc);
+  }
+  function closeReportPanel() {
+    reportPanelEl?.remove();
+    reportPanelEl = null;
+  }
+  function scanForMissingAlt() {
+    const images = document.querySelectorAll("img");
+    const missing = [];
+    images.forEach((img) => {
+      if (img.closest("#accessify-root")) return;
+      if (img.complete && img.naturalWidth > 0 && (img.naturalWidth < 20 || img.naturalHeight < 20)) return;
+      const alt = img.getAttribute("alt");
+      if (alt === null || alt.trim() === "") missing.push(img);
+    });
+    return missing;
+  }
+  function applyAltText(img, altText2) {
+    img.setAttribute("alt", altText2);
+    img.setAttribute("title", altText2);
+    processedImages.set(img, { generatedAlt: altText2 });
+    if (enabled) {
+      img.classList.add("accessify-alt-done");
+      img.classList.remove("accessify-alt-generating");
+      addInfoButton(img);
+    }
+    img.removeEventListener("mouseenter", onMouseEnter);
+    img.removeEventListener("mouseleave", onMouseLeave);
+    img.addEventListener("mouseenter", onMouseEnter);
+    img.addEventListener("mouseleave", onMouseLeave);
+  }
+  async function generateAll() {
+    if (autoGenerating || !enabled || !aiService) return;
+    autoGenerating = true;
+    const CONCURRENCY = 3;
+    const uncached = [];
+    for (const img of missingAltImages) {
+      if (processedImages.has(img)) continue;
+      const cached = await getCachedAltText(img.src);
+      if (cached) {
+        applyAltText(img, cached);
+      } else {
+        uncached.push(img);
       }
     }
-  `;
+    updateBadge();
+    if (!uncached.length) {
+      autoGenerating = false;
+      return;
+    }
+    uncached.forEach((img) => img.classList.add("accessify-alt-generating"));
+    for (let i = 0; i < uncached.length; i += CONCURRENCY) {
+      if (!enabled) break;
+      const batch = uncached.slice(i, i + CONCURRENCY);
+      await Promise.all(batch.map(async (img) => {
+        if (!enabled) return;
+        try {
+          const ctx = gatherImageContext(img);
+          const alt = await aiService.generateAltText(img.src, ctx, lang());
+          if (alt && enabled) {
+            applyAltText(img, alt);
+            setCachedAltText(img.src, alt, lang()).catch(() => {
+            });
+            if (siteKey) persistAltTextToServer(siteKey, proxyUrl, img.src, alt, lang());
+          }
+        } catch (err) {
+          console.warn("[Accessify] Alt-text generation failed:", img.src, err);
+          img.classList.remove("accessify-alt-generating");
+        }
+      }));
+      updateBadge();
+    }
+    autoGenerating = false;
+  }
+  async function generateSingle(img) {
+    if (!aiService || !enabled) return;
+    const cached = await getCachedAltText(img.src);
+    if (cached) {
+      applyAltText(img, cached);
+      updateBadge();
+      return;
+    }
+    img.classList.add("accessify-alt-generating");
+    try {
+      const ctx = gatherImageContext(img);
+      const alt = await aiService.generateAltText(img.src, ctx, lang());
+      if (alt && enabled) {
+        applyAltText(img, alt);
+        setCachedAltText(img.src, alt, lang()).catch(() => {
+        });
+        if (siteKey) persistAltTextToServer(siteKey, proxyUrl, img.src, alt, lang());
+        updateBadge();
+      }
+    } catch (err) {
+      console.warn("[Accessify] Alt-text generation failed:", img.src, err);
+      img.classList.remove("accessify-alt-generating");
+    }
+  }
+  function updateBadge() {
+    removeBadge();
+    const remaining = missingAltImages.filter((img) => !processedImages.has(img)).length;
+    const generating = missingAltImages.filter((img) => img.classList.contains("accessify-alt-generating")).length;
+    if (remaining === 0 && missingAltImages.length > 0) {
+      showBadge(isDE() ? `✓ ${missingAltImages.length} Alt-Texte gesetzt` : `✓ ${missingAltImages.length} alt texts applied`, "#2a9d8f", 0);
+      setTimeout(() => removeBadge(), 5e3);
+      return;
+    }
+    if (remaining === 0) return;
+    if (generating > 0) {
+      showBadge(isDE() ? `${generating} Bilder werden analysiert…` : `Analyzing ${generating} images…`, "#f77f00", generating);
+    } else {
+      showBadge(isDE() ? `${remaining} Bilder ohne Alt-Text` : `${remaining} images missing alt text`, "#e63946", remaining);
+    }
+  }
+  function showBadge(text, color, count) {
+    const badge = document.createElement("div");
+    badge.className = BADGE_CLASS;
+    badge.setAttribute("role", "status");
+    badge.setAttribute("aria-live", "polite");
+    if (count > 0) {
+      const c = document.createElement("span");
+      c.className = `${BADGE_CLASS}-count`;
+      c.style.background = color;
+      c.textContent = String(count);
+      badge.appendChild(c);
+    }
+    const label = document.createElement("span");
+    label.textContent = text;
+    badge.appendChild(label);
+    document.body.appendChild(badge);
+    badgeEl = badge;
+  }
+  function removeBadge() {
+    badgeEl?.remove();
+    badgeEl = null;
+  }
+  function gatherImageContext(img) {
+    const parts = [];
+    try {
+      const url = new URL(img.src, window.location.href);
+      const filename = url.pathname.split("/").pop();
+      if (filename) parts.push(`Filename: ${filename}`);
+    } catch {
+    }
+    const figure = img.closest("figure");
+    if (figure) {
+      const caption = figure.querySelector("figcaption");
+      if (caption?.textContent?.trim()) parts.push(`Caption: ${caption.textContent.trim()}`);
+    }
+    const parent = img.parentElement;
+    if (parent) {
+      const heading = parent.querySelector("h1, h2, h3, h4, h5, h6");
+      if (heading?.textContent?.trim()) parts.push(`Nearby heading: ${heading.textContent.trim()}`);
+    }
+    const describedBy = img.getAttribute("aria-describedby");
+    if (describedBy) {
+      const descEl = document.getElementById(describedBy);
+      if (descEl?.textContent?.trim()) parts.push(`Description: ${descEl.textContent.trim()}`);
+    }
+    return parts.join(". ");
+  }
+  let domObserver = null;
+  function tryRegisterImage(img) {
+    if (!enabled) return;
+    if (img.closest("#accessify-root")) return;
+    if (missingAltImages.includes(img)) return;
+    const alt = img.getAttribute("alt");
+    if (alt !== null && alt.trim() !== "") return;
+    function addIfValid() {
+      if (!enabled || missingAltImages.includes(img)) return;
+      if (img.naturalWidth >= 20 && img.naturalHeight >= 20) {
+        img.classList.add(HIGHLIGHT_CLASS);
+        missingAltImages.push(img);
+        updateBadge();
+        generateSingle(img);
+      }
+    }
+    if (img.complete && img.naturalWidth > 0) addIfValid();
+    else img.addEventListener("load", addIfValid, { once: true });
+  }
+  function activate() {
+    if (enabled) return;
+    enabled = true;
+    injectStyles();
+    missingAltImages = scanForMissingAlt();
+    missingAltImages.forEach((img) => img.classList.add(HIGHLIGHT_CLASS));
+    updateBadge();
+    generateAll();
+    document.querySelectorAll("img").forEach((img) => {
+      if (!img.complete) tryRegisterImage(img);
+    });
+    setTimeout(() => {
+      if (enabled) document.querySelectorAll("img").forEach(tryRegisterImage);
+    }, 2e3);
+    domObserver = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        for (const node of m.addedNodes) {
+          if (node instanceof HTMLImageElement) tryRegisterImage(node);
+          else if (node instanceof HTMLElement) node.querySelectorAll("img").forEach(tryRegisterImage);
+        }
+      }
+    });
+    domObserver.observe(document.body, { childList: true, subtree: true });
+  }
+  function deactivate() {
+    enabled = false;
+    autoGenerating = false;
+    domObserver?.disconnect();
+    domObserver = null;
+    hideTooltip();
+    closeReportPanel();
+    removeInfoButtons();
+    removeBadge();
+    missingAltImages.forEach((img) => {
+      img.classList.remove(HIGHLIGHT_CLASS, "accessify-alt-done", "accessify-alt-generating");
+    });
+    missingAltImages = [];
+    removeStyles();
+  }
+  autoApplyCachedAltTexts().catch(() => {
+  });
+  return {
+    id: "alt-text",
+    name: () => isDE() ? "Alt-Text erzeugen" : "Alt-Text Generator",
+    description: isDE() ? "Bildbeschreibungen automatisch erstellen" : "Auto-generate image descriptions",
+    icon: "alt-text",
+    category: "ai",
+    activate,
+    deactivate,
+    getState: () => ({
+      id: "alt-text",
+      enabled,
+      value: {
+        missingCount: missingAltImages.length,
+        processedCount: processedImages.size
+      }
+    })
+  };
 }
+const altText = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  autoApplyCachedAltTexts,
+  default: createAltTextModule
+}, Symbol.toStringTag, { value: "Module" }));
 const REMOVED_FEATURES = /* @__PURE__ */ new Set([
   "spacing",
   "dyslexia-font",
@@ -7489,7 +8174,10 @@ const REMOVED_FEATURES = /* @__PURE__ */ new Set([
   "color-blindness",
   "saturation",
   "text-align",
-  "line-height"
+  "line-height",
+  "page-structure",
+  "focus-highlight",
+  "auto-scan"
 ]);
 const DEFAULT_CONFIG = {
   position: "bottom-right",
@@ -7502,15 +8190,12 @@ const DEFAULT_CONFIG = {
     "hide-images",
     "reading-guide",
     "reading-mask",
-    "focus-highlight",
     "big-cursor",
     "keyboard-nav",
-    "page-structure",
     "animation-stop",
     "tts",
     "text-simplify",
-    "alt-text",
-    "auto-scan"
+    "alt-text"
   ],
   zIndex: 999999,
   compact: false
@@ -7518,10 +8203,52 @@ const DEFAULT_CONFIG = {
 let widgetInstance = null;
 let containerEl = null;
 let config = { ...DEFAULT_CONFIG };
-function init(userConfig = {}) {
+async function fetchSiteConfig(siteKey, proxyUrl) {
+  try {
+    const base = proxyUrl || "https://accessify-api.accessify.workers.dev";
+    const res = await fetch(`${base}/v1/config/${siteKey}`, {
+      headers: { "Accept": "application/json" }
+    });
+    if (!res.ok) return {};
+    const data = await res.json();
+    const serverCfg = data?.config || {};
+    const mapped = {};
+    if (serverCfg.features?.length) mapped.features = serverCfg.features;
+    if (serverCfg.defaultLang) mapped.lang = serverCfg.defaultLang;
+    if (serverCfg.position) mapped.position = serverCfg.position;
+    if (serverCfg.theme) mapped.theme = serverCfg.theme;
+    if (serverCfg.compact != null) mapped.compact = serverCfg.compact;
+    const brandFields = [
+      "brandPrimaryColor",
+      "brandSurfaceColor",
+      "brandTextColor",
+      "brandBorderColor",
+      "brandCardColor",
+      "brandAccentColor",
+      "brandTextDimColor",
+      "brandTriggerColor",
+      "brandTriggerIconColor",
+      "brandHoverColor"
+    ];
+    for (const field of brandFields) {
+      if (serverCfg[field]) mapped[field] = serverCfg[field];
+    }
+    if (serverCfg.panelWidth) mapped.panelWidth = serverCfg.panelWidth;
+    return mapped;
+  } catch {
+    return {};
+  }
+}
+async function init(userConfig = {}) {
   if (widgetInstance) return;
   const dataConfig = window.__accessify_dataConfig || {};
   config = { ...DEFAULT_CONFIG, ...dataConfig, ...userConfig };
+  const siteKey = config.siteKey || config.siteKey;
+  const proxyUrl = config.proxyUrl || config.proxyUrl;
+  if (siteKey) {
+    const serverConfig = await fetchSiteConfig(siteKey, proxyUrl || "");
+    config = { ...DEFAULT_CONFIG, ...serverConfig, ...dataConfig, ...userConfig };
+  }
   config.features = (config.features || DEFAULT_CONFIG.features).filter((feature) => !REMOVED_FEATURES.has(feature));
   containerEl = document.createElement("div");
   containerEl.id = "accessify-root";
@@ -7562,7 +8289,29 @@ function init(userConfig = {}) {
       if (handled) e.stopImmediatePropagation();
     }, true);
   }
+  window.addEventListener("accessify:reposition", ((e) => {
+    const newPos = e.detail?.position;
+    if (newPos && config) {
+      config.position = newPos;
+      sheet.replaceSync(createWidgetStyles(config));
+    }
+  }));
+  window.addEventListener("message", (e) => {
+    if (e.data?.type === "accessify:preview-config") {
+      const preview = e.data.config || {};
+      Object.assign(config, preview);
+      sheet.replaceSync(createWidgetStyles(config));
+    }
+    if (e.data?.type === "accessify:open") {
+      const panel = shadow.querySelector(".accessify-panel");
+      const trigger = shadow.querySelector(".accessify-trigger");
+      if (panel) panel.setAttribute("aria-hidden", "false");
+      if (trigger) trigger.setAttribute("aria-expanded", "true");
+    }
+  });
   document.body.appendChild(containerEl);
+  autoApplyCachedAltTexts().catch(() => {
+  });
   config.onReady?.();
 }
 function destroy() {
@@ -7588,16 +8337,20 @@ if (api?.q) {
   api.q.forEach((args) => exec(...args));
   api.q = [];
 }
-window.Accessify = function(cmd, ...args) {
+const finalApi = function(cmd, ...args) {
   exec(cmd, ...args);
 };
-window.Accessify._loaded = true;
-window.A11yPlus = window.Accessify;
+finalApi._loaded = true;
+Object.defineProperty(finalApi, "config", {
+  get: () => config,
+  enumerable: true
+});
+window.Accessify = finalApi;
+window.A11yPlus = finalApi;
 export {
-  RateLimitError as R,
   destroy as d,
   getCurrentWidgetLang as g,
   init as i,
   t
 };
-//# sourceMappingURL=index-B6b-ij4T.js.map
+//# sourceMappingURL=index-i-tNypvI.js.map