style(ui): polish visuals - localize tabs/tooltips, progress bars, light theme, hide empty cards, mobile layout

app.py

@@ -105,14 +105,21 @@ COPY_JS = """(text) => {
 }"""
 
 
-def on_generate(prompt, model, rating, num_variations, creativity, weight_mode, mode, lang, artist_style, selected_artists, use_tandems, selected_tandem_idx, web_enrich, seed, current_preset_state, fx_count, blacklist_text, mirror_blacklist, strip_quality, strip_artist, strip_lora, strip_meta, min_tags, user_preset_state, output_format, *checks) -> tuple[str, ...]:
+def on_generate(prompt, model, rating, num_variations, creativity, weight_mode, mode, lang, artist_style, selected_artists, use_tandems, selected_tandem_idx, web_enrich, seed, current_preset_state, fx_count, blacklist_text, mirror_blacklist, strip_quality, strip_artist, strip_lora, strip_meta, min_tags, user_preset_state, output_format, *checks) -> tuple:
+    def _card_updates(positives):
+        return tuple(
+            gr.update(visible=bool((positives[i] or "").strip()))
+            for i in range(MAX_OUTPUTS)
+        )
+
     try:
         if not prompt or not prompt.strip():
-            return tuple([""] * (MAX_OUTPUTS * 2))
+            return tuple([""] * (MAX_OUTPUTS * 2)) + _card_updates([""] * MAX_OUTPUTS)
         parsed = parse_prompt(prompt)
         if parsed is None:
             msg = t("error_parse", lang)
-            return tuple([msg] + [""] * (MAX_OUTPUTS - 1) + [""] * MAX_OUTPUTS)
+            outs = [msg] + [""] * (MAX_OUTPUTS - 1)
+            return tuple(outs) + tuple([""] * MAX_OUTPUTS) + _card_updates(outs)
         active = [c for c, on in zip(ALL_CATEGORIES, checks) if on]
         if not active:
             active = ["quality", "lighting", "expression"]
@@ -191,12 +198,13 @@ def on_generate(prompt, model, rating, num_variations, creativity, weight_mode,
             categories=active,
             seed=int(seed) if seed is not None and str(seed).strip() else None,
         )
-        return tuple(out[:MAX_OUTPUTS]) + tuple(neg_out[:MAX_OUTPUTS])
+        return tuple(out[:MAX_OUTPUTS]) + tuple(neg_out[:MAX_OUTPUTS]) + _card_updates(out[:MAX_OUTPUTS])
     except Exception as exc:
         import traceback
         traceback.print_exc()
         err_msg = t("generation_error", lang).format(exc=html.escape(str(exc)))
-        return tuple([err_msg] + [""] * (MAX_OUTPUTS - 1) + [""] * MAX_OUTPUTS)
+        outs = [err_msg] + [""] * (MAX_OUTPUTS - 1)
+        return tuple(outs) + tuple([""] * MAX_OUTPUTS) + _card_updates(outs)
 
 
 def on_suggest(prompt, model, rating, lang) -> str:
@@ -262,22 +270,22 @@ def on_web_search(query: str, lang: str) -> str:
     from src.tag_searcher import search_tags
     lc = "ru" if lang == "RU" else "en"
     if not query or not query.strip():
-        return f'<div class="whyx-info-text" style="color:rgba(148,163,184,0.6);font-size:12px;">{t("web_search_empty", lc)}</div>'
+        return f'<div class="whyx-info-text" style="color:var(--text-faint);font-size:12px;">{t("web_search_empty", lc)}</div>'
     try:
         results = search_tags(query, warehouse)
         parts = []
         if results["local"]:
-            parts.append(f'<div style="margin-top:6px;font-size:13px;font-weight:600;">🔍 {t("web_search_offline", lc)} ({len(results["local"])})</div>')
+            parts.append(f'<div style="margin-top:6px;font-size:13px;font-weight:600;color:var(--text);">🔍 {t("web_search_offline", lc)} ({len(results["local"])})</div>')
             for r in results["local"][:15]:
                 safe_tag = html.escape(r["tag"])
                 safe_cat = html.escape(r["category"])
-                parts.append(f'<span style="display:inline-block;background:rgba(79,70,229,0.1);border:1px solid rgba(79,70,229,0.2);border-radius:4px;padding:1px 6px;margin:2px;font-size:12px;">{safe_tag} <span style="color:rgba(148,163,184,0.6);font-size:10px;">[{safe_cat}]</span></span>')
+                parts.append(f'<span style="display:inline-block;background:var(--accent-glow);border:1px solid var(--accent-border);border-radius:4px;padding:1px 6px;margin:2px;font-size:12px;color:var(--text);">{safe_tag} <span style="color:var(--text-faint);font-size:10px;">[{safe_cat}]</span></span>')
         if results["web"]:
-            parts.append(f'<div style="margin-top:8px;font-size:13px;font-weight:600;">🌐 {t("web_search_online", lc)} ({len(results["web"])})</div>')
+            parts.append(f'<div style="margin-top:8px;font-size:13px;font-weight:600;color:var(--text);">🌐 {t("web_search_online", lc)} ({len(results["web"])})</div>')
             for r in results["web"][:MAX_OUTPUTS]:
                 safe_tag = html.escape(r.get("tag", ""))
                 count = r.get("post_count", 0)
-                parts.append(f'<span style="display:inline-block;background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2);border-radius:4px;padding:1px 6px;margin:2px;font-size:12px;">{safe_tag} <span style="color:rgba(148,163,184,0.6);font-size:10px;">({count} posts)</span></span>')
+                parts.append(f'<span style="display:inline-block;background:var(--accent-glow);border:1px solid var(--accent-border);border-radius:4px;padding:1px 6px;margin:2px;font-size:12px;color:var(--text);">{safe_tag} <span style="color:var(--text-faint);font-size:10px;">({count} posts)</span></span>')
         if not parts:
             return f'<div class="whyx-info-text" style="font-size:12px;">{t("web_enrich_no_results", lc)}</div>'
         return '<div style="line-height:1.8;">' + "".join(parts) + '</div>'
@@ -289,7 +297,7 @@ def _format_history_html(lang: str) -> str:
     lc = "ru" if lang == "RU" else "en"
     history = get_history()
     lines = []
-    lines.append("<div style='background:rgba(15,23,42,0.5);border:1px solid rgba(124,58,237,0.12);border-radius:10px;padding:10px 14px;margin-top:4px;'>")
+    lines.append("<div style='background:var(--input-bg);border:1px solid rgba(124,58,237,0.12);border-radius:10px;padding:10px 14px;margin-top:4px;'>")
 
     entries = history.get_all()[:5]
     if not entries:
@@ -490,7 +498,7 @@ def _build_tagger_html(result: dict, lc: str) -> str:
     nl_caption = (result.get("nl_caption") or "").strip()
     if nl_caption:
         lines.append(
-            f"<div class='whyx-tagger-panel-title'>🗣️ {t('tagger_nl_caption', lc)}</div>"
+            f"<div class='whyx-tagger-panel-title'>{t('tagger_nl_caption', lc)}</div>"
             f"<div class='whyx-tagger-nl-caption'>{html.escape(nl_caption)}</div>"
         )
 
@@ -534,8 +542,12 @@ def _build_tagger_html(result: dict, lc: str) -> str:
     for name, score in result["ratings"].items():
         color = rating_colors.get(name, "var(--text-dim)")
         pct = int(score * 100)
-        bar = "▰" * (pct // 10) + "▱" * (10 - pct // 10)
-        lines.append(f"<div class='whyx-tagger-rating-row'><span class='whyx-tagger-rating-name' style='color:{color};'>{name}</span> <span class='whyx-tagger-rating-bar' style='color:{color};'>{bar}</span> <span class='whyx-tagger-rating-pct'>({score:.1%})</span></div>")
+        lines.append(
+            f"<div class='whyx-tagger-rating-row'>"
+            f"<span class='whyx-tagger-rating-name' style='color:{color};'>{name}</span>"
+            f"<span class='whyx-tagger-rating-track'><span class='whyx-tagger-rating-fill' style='width:{pct}%;background:{color};'></span></span>"
+            f"<span class='whyx-tagger-rating-pct'>({score:.1%})</span></div>"
+        )
 
     if result["characters"]:
         lines.append(f"<div class='whyx-tagger-panel-title' style='margin-top:10px;'>{t('tagger_characters', lc)}</div>")
@@ -549,8 +561,12 @@ def _build_tagger_html(result: dict, lc: str) -> str:
     for name, score in list(result["general"].items())[:14]:
         safe = html.escape(name.replace("_", " ").replace("(", "\\(").replace(")", "\\)"))
         pct = int(score * 100)
-        bar = "▰" * (pct // 10) + "▱" * (10 - pct // 10)
-        lines.append(f"<div class='whyx-tagger-gen-row'><span class='whyx-tagger-gen-bar'>{bar}</span><span class='whyx-tagger-gen-name'>{safe}</span><span class='whyx-tagger-badge-pct'>{score:.0%}</span></div>")
+        lines.append(
+            f"<div class='whyx-tagger-gen-row'>"
+            f"<span class='whyx-tagger-gen-track'><span class='whyx-tagger-gen-fill' style='width:{pct}%;'></span></span>"
+            f"<span class='whyx-tagger-gen-name'>{safe}</span>"
+            f"<span class='whyx-tagger-badge-pct'>{score:.0%}</span></div>"
+        )
     lines.append("</div>")
     lines.append("</div>")
     return "\n".join(lines)
@@ -884,6 +900,29 @@ body.whyx-light, body.whyx-light .gradio-container, body.whyx-light .dark {
     --button-secondary-background-fill: transparent !important; --button-secondary-background-fill-hover: rgba(15,23,42,0.05) !important;
     --button-secondary-border-color: rgba(15,23,42,0.16) !important;
 }
+/* --- Light theme component overrides --- */
+body.whyx-light {
+    --tree-node-bg: rgba(255,255,255,0.92);
+    --tree-node-border: rgba(15,23,42,0.08);
+    --tree-node-border-hover: rgba(15,23,42,0.16);
+    --tree-branch-hover: rgba(79,70,229,0.06);
+    --tree-leaf-hover: rgba(241,245,249,0.9);
+}
+body.whyx-light::before { opacity: 0.45 !important; }
+body.whyx-light [role="listbox"], body.whyx-light ul.options, body.whyx-light ul.dropdown-options, body.whyx-light [data-testid="dropdown-options"] {
+    background: rgba(255,255,255,0.98) !important;
+    border: 1px solid rgba(15,23,42,0.12) !important;
+    box-shadow: 0 8px 32px rgba(15,23,42,0.16), 0 0 0 1px rgba(79,70,229,0.05) !important;
+}
+body.whyx-light .gradio-dropdown { background: #FFFFFF !important; }
+body.whyx-light .whyx-tagger-char-badge { background: linear-gradient(135deg, rgba(129,140,248,0.14), rgba(99,102,241,0.1)) !important; border-color: rgba(99,102,241,0.35) !important; color: #3730A3 !important; }
+body.whyx-light .whyx-tagger-badge-pct { color: #6366F1 !important; }
+body.whyx-light .progress-level { background: rgba(255,255,255,0.85) !important; border-color: rgba(124,58,237,0.18) !important; }
+body.whyx-light .whyx-tagger-chips label:has(input:checked) { color: #0F766E !important; }
+body.whyx-light .whyx-slide-trigger { background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(241,245,249,0.65)) !important; border-color: rgba(15,23,42,0.12) !important; }
+body.whyx-light *::-webkit-scrollbar-track { background: rgba(15,23,42,0.05) !important; }
+body.whyx-light *::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.18) !important; }
+body.whyx-light *::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.3) !important; }
 @keyframes whyxBreath { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
 @keyframes whyxFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes progressShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@@ -893,25 +932,10 @@ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-even
 :focus-visible { outline: 2px solid rgba(90,200,245,0.6) !important; outline-offset: 2px !important; }
 *::-webkit-scrollbar { width: 5px; height: 5px; } *::-webkit-scrollbar-track { background: rgba(15,23,42,0.25); } *::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; } *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
 
-.whyx-section-card { background: var(--surface) !important; border: 1px solid var(--glass-border) !important; border-left: 3px solid rgba(110,231,210,0.18) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.03) !important; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition) !important; overflow: visible !important; }
-.whyx-section-card:hover { border-color: var(--glass-border-hover) !important; border-left-color: rgba(16,185,129,0.4) !important; box-shadow: var(--shadow-lg), var(--shadow-glow) !important; transform: translateY(-1px); }
-.whyx-section-header { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin: 0 0 14px !important; padding: 0 0 10px !important; border-bottom: 1px solid var(--glass-border) !important; animation: whyxFadeIn 0.3s ease both !important; }
-.whyx-section-icon { font-size: 18px !important; line-height: 1.4 !important; flex-shrink: 0; }
-.whyx-section-title { color: var(--text) !important; background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; background-clip: unset !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: 1px !important; text-transform: uppercase !important; line-height: 1.4 !important; }
-.whyx-section-desc { color: var(--text-dim) !important; font-size: 11px !important; line-height: 1.45 !important; margin-top: 2px !important; max-width: 640px !important; }
 .whyx-title { background: linear-gradient(135deg, #7C3AED, #4F46E5 38%, #2563EB 70%, #10B981) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; color: transparent !important; display: inline-block !important; font-weight: 800 !important; font-size: 32px !important; letter-spacing: -0.6px !important; line-height: 1.2 !important; }
 .whyx-subtitle { font-size: 12px !important; color: var(--text-dim) !important; margin-top: 2px !important; border-left: 2px solid rgba(110,231,210,0.45) !important; padding-left: 8px !important; }
 .whyx-divider { height: 1px !important; background: linear-gradient(90deg, transparent, rgba(110,231,210,0.2), rgba(176,124,240,0.2), transparent) !important; margin: 10px 0 !important; border: none !important; }
 
-.whyx-stepper { counter-reset: whyx-step; position: relative; gap: 4px; }
-.whyx-stepper::before { content: ""; position: absolute; left: 25px; top: 30px; bottom: 44px; width: 2px; background: linear-gradient(180deg, var(--c0), var(--c1) 50%, var(--c3)); border-radius: 2px; opacity: 0.35; }
-.whyx-step { position: relative; counter-increment: whyx-step; background: var(--surface) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--radius-xl) !important; padding: 16px 18px 16px 60px !important; margin-bottom: 10px !important; box-shadow: var(--shadow-sm) !important; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition) !important; }
-.whyx-step:hover { border-color: var(--glass-border-hover) !important; box-shadow: var(--shadow-md), 0 0 16px rgba(79,70,229,0.08) !important; transform: translateY(-1px); }
-.whyx-step::before { content: counter(whyx-step); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #06121A; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(79,70,229,0.25); z-index: 2; }
-.whyx-step:hover::before { box-shadow: 0 6px 20px rgba(79,70,229,0.4); }
-.whyx-step .whyx-field, .whyx-step .whyx-field:hover { border: none !important; box-shadow: none !important; transform: none !important; }
-.whyx-step .whyx-field:focus-within { box-shadow: 0 0 0 2px rgba(79,70,229,0.14) !important; }
-
 .whyx-field { border: 1px solid var(--input-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm) !important; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition) !important; }
 .whyx-field:hover { border-color: var(--accent-border) !important; box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-sm) !important; transform: translateY(-1px); }
 .whyx-field textarea, .whyx-field input[type="text"] { border: 1px solid var(--input-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm) !important; transition: border-color var(--transition), box-shadow var(--transition) !important; }
@@ -979,7 +1003,6 @@ input[type="range"]::-moz-range-thumb { width: 16px !important; height: 16px !im
 .whyx-theme-btn label.selected { background: var(--accent-glow) !important; border-color: var(--accent-border) !important; color: var(--text-accent) !important; }
 
 .whyx-info-text, .gradio-container .info { color: var(--text-dim) !important; font-size: 11px !important; line-height: 1.45 !important; border-left: 2px solid rgba(110,231,210,0.35) !important; background: var(--chip-bg) !important; padding: 6px 10px !important; border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; margin-top: 4px !important; }
-.whyx-info-highlight { color: var(--text-accent) !important; font-weight: 600 !important; }
 .whyx-tooltip { position: relative !important; cursor: pointer !important; }
 .whyx-tooltip:hover .whyx-tooltip-text, .whyx-tooltip:focus-within .whyx-tooltip-text { visibility: visible !important; opacity: 1 !important; }
 .whyx-tooltip-text { visibility: hidden !important; opacity: 0 !important; position: absolute !important; z-index: 9999 !important; padding: 4px 8px !important; background: var(--surface) !important; color: var(--text) !important; font-size: 10px !important; font-weight: 600 !important; border-radius: var(--radius-sm) !important; border: 1px solid var(--glass-border) !important; white-space: nowrap !important; pointer-events: none !important; transition: opacity 0.15s ease !important; box-shadow: var(--shadow-md) !important; border-left: 2px solid rgba(110,231,210,0.35) !important; bottom: 110% !important; left: 50% !important; transform: translateX(-50%) !important; }
@@ -992,7 +1015,6 @@ input[type="range"]::-moz-range-thumb { width: 16px !important; height: 16px !im
 .whyx-tagger-apply-btn button:hover { background: linear-gradient(135deg, #9D7CFA, #5B6BFA, #3B8BE0) !important; box-shadow: 0 6px 20px rgba(79,70,229,0.35) !important; transform: translateY(-1px) !important; }
 .whyx-tagger-copy-btn button { background: var(--chip-bg) !important; border: 1px solid var(--chip-border) !important; color: var(--chip-text) !important; font-weight: 600 !important; box-shadow: none !important; }
 .whyx-tagger-copy-btn button:hover:not(:disabled) { background: var(--accent-glow) !important; border-color: var(--accent-border) !important; color: var(--text-accent) !important; box-shadow: 0 4px 14px rgba(79,70,229,0.15) !important; }
-.whyx-tagger-tags-card { border-radius: var(--radius-lg) !important; border: 1px solid rgba(129,140,248,0.14) !important; box-shadow: var(--shadow-md) !important; background: var(--surface) !important; }
 .whyx-tagger-tags-box textarea { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 12px !important; line-height: 1.5 !important; color: var(--input-text) !important; background: var(--input-bg) !important; border-radius: var(--radius-md) !important; }
 .whyx-tagger-chips .wrap, .whyx-tagger-chips .grid { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; max-height: 260px !important; overflow-y: auto !important; padding: 4px 2px 8px !important; }
 .whyx-tagger-chips label { display: inline-flex !important; align-items: center !important; gap: 6px !important; border: 1px solid var(--chip-border) !important; background: var(--chip-bg) !important; border-radius: var(--radius-pill) !important; padding: 5px 12px !important; font-size: 12px !important; font-weight: 500 !important; color: var(--chip-text) !important; cursor: pointer !important; transition: all var(--transition-fast) !important; user-select: none !important; }
@@ -1001,16 +1023,18 @@ input[type="range"]::-moz-range-thumb { width: 16px !important; height: 16px !im
 .whyx-tagger-chips label:has(input:checked) { background: var(--accent-soft) !important; border-color: rgba(110,231,210,0.55) !important; color: #E6FBF5 !important; box-shadow: 0 0 10px rgba(79,70,229,0.18) !important; }
 .whyx-tagger-panel { background: var(--input-bg) !important; border: 1px solid rgba(79,70,229,0.1) !important; border-radius: var(--radius-md) !important; padding: 12px 16px !important; margin-top: 4px !important; animation: whyxFadeIn 0.3s ease both !important; }
 .whyx-tagger-panel-title { font-size: 12px !important; font-weight: 600 !important; color: var(--text) !important; margin-bottom: 6px !important; }
-.whyx-tagger-rating-row { font-size: 11px !important; color: var(--text-dim) !important; margin-bottom: 2px !important; }
-.whyx-tagger-rating-name { width: 92px !important; display: inline-block !important; font-weight: 600 !important; }
-.whyx-tagger-rating-bar { font-family: monospace !important; letter-spacing: -1px !important; }
-.whyx-tagger-rating-pct { color: var(--text-faint) !important; }
+.whyx-tagger-rating-row { font-size: 11px !important; color: var(--text-dim) !important; margin-bottom: 4px !important; display: flex !important; align-items: center !important; gap: 8px !important; }
+.whyx-tagger-rating-name { width: 92px !important; display: inline-block !important; font-weight: 600 !important; flex-shrink: 0 !important; }
+.whyx-tagger-rating-track { flex: 1 !important; height: 6px !important; background: var(--chip-bg) !important; border: 1px solid var(--chip-border) !important; border-radius: var(--radius-pill) !important; overflow: hidden !important; }
+.whyx-tagger-rating-fill { display: block !important; height: 100% !important; border-radius: var(--radius-pill) !important; transition: width 0.4s ease !important; }
+.whyx-tagger-rating-pct { color: var(--text-faint) !important; flex-shrink: 0 !important; }
 .whyx-tagger-badges { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
 .whyx-tagger-char-badge { display: inline-block !important; background: linear-gradient(135deg, rgba(129,140,248,0.18), rgba(99,102,241,0.14)) !important; border: 1px solid rgba(129,140,248,0.3) !important; border-radius: var(--radius-pill) !important; padding: 3px 10px !important; font-size: 12px !important; color: #E0E7FF !important; }
 .whyx-tagger-badge-pct { color: #A5B4FC !important; font-size: 10px !important; margin-left: 2px !important; }
 .whyx-tagger-gen-list { display: flex !important; flex-direction: column !important; gap: 1px !important; }
 .whyx-tagger-gen-row { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 11px !important; color: var(--text-dim) !important; white-space: nowrap !important; }
-.whyx-tagger-gen-bar { color: #5AC8F5 !important; font-family: monospace !important; width: 90px !important; text-align: right !important; flex-shrink: 0 !important; overflow: hidden !important; }
+.whyx-tagger-gen-track { width: 90px !important; height: 5px !important; background: var(--chip-bg) !important; border: 1px solid var(--chip-border) !important; border-radius: var(--radius-pill) !important; overflow: hidden !important; flex-shrink: 0 !important; }
+.whyx-tagger-gen-fill { display: block !important; height: 100% !important; background: linear-gradient(90deg, #5AC8F5, #38BDF8) !important; border-radius: var(--radius-pill) !important; transition: width 0.4s ease !important; }
 .whyx-tagger-gen-name { overflow: hidden !important; text-overflow: ellipsis !important; }
 .whyx-tagger-pose-tags { font-size: 12px !important; color: var(--text-dim) !important; line-height: 1.4 !important; background: var(--input-bg) !important; border: 1px solid rgba(79,70,229,0.1) !important; border-radius: var(--radius-sm) !important; padding: 6px 10px !important; margin-top: 4px !important; }
 .whyx-tagger-pose-people { font-size: 11px !important; color: var(--text) !important; font-weight: 600 !important; }
@@ -1018,21 +1042,29 @@ input[type="range"]::-moz-range-thumb { width: 16px !important; height: 16px !im
 .whyx-tagger-anatomy-tags { font-size: 12px !important; color: var(--text-dim) !important; line-height: 1.4 !important; background: var(--input-bg) !important; border: 1px solid rgba(79,70,229,0.1) !important; border-radius: var(--radius-sm) !important; padding: 6px 10px !important; margin-top: 4px !important; }
 .whyx-tagger-expr-tags { font-size: 12px !important; color: var(--text-dim) !important; line-height: 1.4 !important; background: var(--input-bg) !important; border: 1px solid rgba(79,70,229,0.1) !important; border-radius: var(--radius-sm) !important; padding: 6px 10px !important; margin-top: 4px !important; }
 .whyx-tagger-bg-tags { font-size: 12px !important; color: var(--text-dim) !important; line-height: 1.4 !important; background: var(--input-bg) !important; border: 1px solid rgba(79,70,229,0.1) !important; border-radius: var(--radius-sm) !important; padding: 6px 10px !important; margin-top: 4px !important; }
+.whyx-tagger-seg-tags { font-size: 12px !important; color: var(--text-dim) !important; line-height: 1.4 !important; background: var(--input-bg) !important; border: 1px solid rgba(16,185,129,0.16) !important; border-radius: var(--radius-sm) !important; padding: 6px 10px !important; margin-top: 4px !important; }
+.whyx-tagger-depth-tags { font-size: 12px !important; color: var(--text-dim) !important; line-height: 1.4 !important; background: var(--input-bg) !important; border: 1px solid rgba(37,99,235,0.18) !important; border-radius: var(--radius-sm) !important; padding: 6px 10px !important; margin-top: 4px !important; }
+.whyx-tagger-control-img { border-radius: var(--radius-md) !important; overflow: hidden !important; border: 1px solid var(--glass-border) !important; }
+.whyx-tagger-control-img img { border-radius: var(--radius-md) !important; }
+
+.whyx-suggest-box { background: var(--input-bg) !important; border: 1px solid rgba(124,58,237,0.14) !important; border-radius: var(--radius-md) !important; padding: 10px 14px !important; margin-top: 6px !important; animation: whyxFadeIn 0.3s ease both !important; }
+.whyx-suggest-title { font-size: 12px !important; font-weight: 600 !important; color: var(--text) !important; margin-bottom: 6px !important; }
+.whyx-suggest-box ul { margin: 0 !important; padding-left: 18px !important; }
+.whyx-suggest-item { font-size: 12px !important; color: var(--text-dim) !important; line-height: 1.5 !important; padding: 1px 0 !important; }
+
+.whyx-chip-group { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
+.whyx-chip-group label { display: inline-flex !important; align-items: center !important; border: 1px solid var(--chip-border) !important; background: var(--chip-bg) !important; border-radius: var(--radius-pill) !important; padding: 5px 12px !important; font-size: 11px !important; cursor: pointer !important; transition: all var(--transition-fast) !important; user-select: none !important; }
+.whyx-chip-group label:hover { background: var(--accent-glow) !important; border-color: var(--accent-border) !important; }
+.whyx-chip-group label:has(input:checked) { background: var(--accent-glow) !important; border-color: var(--accent-border) !important; color: var(--text-accent) !important; }
+.whyx-checkbox label { font-size: 12px !important; color: var(--text-dim) !important; }
+.whyx-strip-row { gap: 10px !important; flex-wrap: wrap !important; }
+.whyx-strip-row .gradio-checkbox { min-width: 0 !important; }
 
 .progress-level .progress-bar { background: var(--accent) !important; background-size: 200% auto !important; animation: progressShimmer 2s linear infinite !important; }
 .progress-level .progress-text { color: var(--text) !important; font-size: 12px !important; }
 .progress-level { background: rgba(15,23,42,0.5) !important; border: 1px solid rgba(124,58,237,0.12) !important; border-radius: var(--radius-md) !important; padding: 8px 12px !important; }
 
-.whyx-accordion-group { gap: 8px !important; }
-.whyx-accordion-group > .gradio-accordion { flex: 1 !important; min-width: 0 !important; }
-.whyx-accordion-group .gradio-accordion { background: var(--surface) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--radius-md) !important; }
-.whyx-accordion-group .gradio-accordion label[class*="accordion"],
-.whyx-accordion-group .gradio-accordion button,
-.whyx-accordion-group .gradio-accordion summary {
-    color: var(--text) !important; font-weight: 600 !important; font-size: 12px !important; padding: 8px 12px !important; border-bottom: 1px solid var(--glass-border) !important; cursor: pointer !important; background: transparent !important;
-}
-.whyx-accordion-group .gradio-accordion > div:not(label) { padding: 8px 12px !important; }
-.whyx-section-card, .gradio-dropdown, .gradio-dropdown > div, .tabs, .tabitem, [data-testid="tab-item"] { overflow: visible !important; }
+.gradio-dropdown, .gradio-dropdown > div, .tabs, .tabitem, [data-testid="tab-item"] { overflow: visible !important; }
 
 /* --- Dropdown menu styling — opaque panel, themed --- */
 [role="listbox"], ul.options, ul.dropdown-options, [data-testid="dropdown-options"] {
@@ -1107,7 +1139,6 @@ ul.options::-webkit-scrollbar-thumb:hover { background: rgba(79,70,229,0.4) !imp
 .whyx-artist-preview-empty { color: var(--text-dim) !important; font-size: 12px !important; font-style: italic !important; }
 .whyx-artist-link { display: inline-flex !important; align-items: center !important; gap: 4px !important; border: 1px solid var(--chip-border) !important; border-radius: var(--radius-sm) !important; padding: 4px 10px !important; background: var(--chip-bg) !important; color: var(--chip-text) !important; text-decoration: none !important; font-size: 11px !important; font-weight: 600 !important; transition: all var(--transition-fast) !important; }
 .whyx-artist-link:hover { background: var(--accent-glow) !important; border-color: rgba(124,58,237,0.25) !important; box-shadow: 0 2px 8px rgba(79,70,229,0.08) !important; color: var(--text-accent) !important; }
-.whyx-tag-bar { width: 80px !important; display: inline-block !important; white-space: nowrap !important; font-family: monospace !important; }
 
 @media (max-width: 767px) {
     .whyx-title { font-size: 24px !important; } .whyx-section-title { font-size: 11px !important; }
@@ -1125,6 +1156,14 @@ ul.options::-webkit-scrollbar-thumb:hover { background: rgba(79,70,229,0.4) !imp
     .tabs button { flex-shrink: 0 !important; font-size: 11px !important; padding: 6px 10px !important; }
     .whyx-tooltip-text { bottom: auto !important; top: 110% !important; }
     .whyx-tooltip-text::after { top: -8px !important; border-color: transparent transparent var(--surface) transparent !important; }
+    /* Result cards: compact wrapped layout instead of a tall vertical stack */
+    #root .whyx-result-card { flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 6px !important; }
+    #root .whyx-result-card > .whyx-rc-num { width: auto !important; flex: 0 0 auto !important; }
+    #root .whyx-result-card > .whyx-rc-pos { width: auto !important; flex: 1 1 60% !important; min-width: 0 !important; }
+    #root .whyx-result-card > .whyx-rc-copypos,
+    #root .whyx-result-card > .whyx-rc-heart { width: auto !important; flex: 0 0 auto !important; }
+    #root .whyx-result-card > .whyx-rc-neg { width: auto !important; flex: 1 1 70% !important; min-width: 0 !important; }
+    #root .whyx-result-card > .whyx-rc-copyneg { width: auto !important; flex: 0 0 auto !important; }
 }
 @media (min-width: 768px) and (max-width: 1023px) {
     .whyx-title { font-size: 26px !important; }
@@ -1212,72 +1251,6 @@ ul.options::-webkit-scrollbar-thumb:hover { background: rgba(79,70,229,0.4) !imp
     to { opacity: 1; transform: translateY(0); }
 }
 
-.whyx-tree-leaf {
-    padding: 10px 14px !important;
-    border-top: 1px solid var(--tree-node-border) !important;
-    transition: background var(--tree-transition) !important;
-}
-
-.whyx-tree-leaf:hover {
-    background: var(--tree-leaf-hover) !important;
-}
-
-.whyx-tree-leaf:first-child {
-    border-top: none !important;
-}
-
-.whyx-tree-indent {
-    margin-left: var(--tree-indent) !important;
-}
-
-.whyx-tree-connector {
-    position: absolute !important;
-    left: -8px !important;
-    top: 0 !important;
-    bottom: 0 !important;
-    width: 2px !important;
-    background: var(--tree-connector) !important;
-    border-radius: 1px !important;
-}
-
-.whyx-tree-connector:hover {
-    background: var(--tree-connector-hover) !important;
-}
-
-.whyx-tree-item {
-    display: flex !important;
-    align-items: center !important;
-    gap: 8px !important;
-    padding: 6px 0 !important;
-}
-
-.whyx-tree-item-icon {
-    font-size: 14px !important;
-    line-height: 1 !important;
-    flex-shrink: 0 !important;
-    color: var(--text-accent) !important;
-}
-
-.whyx-tree-item-label {
-    color: var(--text) !important;
-    font-size: 12px !important;
-    font-weight: 500 !important;
-    flex: 1 !important;
-}
-
-.whyx-tree-item-value {
-    color: var(--text-dim) !important;
-    font-size: 11px !important;
-    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
-}
-
-.whyx-tree-divider {
-    height: 1px !important;
-    background: linear-gradient(90deg, transparent, var(--tree-connector), transparent) !important;
-    margin: 8px 0 !important;
-    border: none !important;
-}
-
 /* Tree node header (replaces _section for tree) */
 .whyx-tree-header {
     display: flex !important;
@@ -1451,7 +1424,8 @@ with gr.Blocks(**_blocks_kw) as demo:
 
     with gr.Tabs():
         # ===== TAB 1: Generate =====
-        with gr.TabItem(f"✨ {t('tab_generate', 'en')}"):
+        tab_generate = gr.TabItem(f"✨ {t('tab_generate', 'en')}")
+        with tab_generate:
             with gr.Column(elem_classes=["whyx-tree"]):
                 # Tree root: Prompt
                 with gr.Column(elem_classes=["whyx-tree-node"]):
@@ -1711,11 +1685,14 @@ with gr.Blocks(**_blocks_kw) as demo:
                 result_boxes = []
                 neg_boxes = []
                 heart_btns = []
+                result_cards = []
+                tooltip_spans = []  # (component, "copy" | "fav") for i18n updates
                 for i in range(MAX_OUTPUTS):
-                    with gr.Row(elem_classes=["whyx-result-card"]) as card:
-                        with gr.Column(scale=0, min_width=40):
+                    with gr.Row(elem_classes=["whyx-result-card"], visible=False) as card:
+                        result_cards.append(card)
+                        with gr.Column(scale=0, min_width=40, elem_classes=["whyx-rc-num"]):
                             gr.HTML(f'<div class="whyx-result-num">#{i+1}</div>')
-                        with gr.Column(scale=1):
+                        with gr.Column(scale=1, elem_classes=["whyx-rc-pos"]):
                             rb = gr.Textbox(
                                 label="",
                                 show_label=False,
@@ -1725,7 +1702,7 @@ with gr.Blocks(**_blocks_kw) as demo:
                                 placeholder=t("result_placeholder", "en"),
                                 elem_classes=["whyx-result-text"],
                             )
-                        with gr.Column(scale=0, min_width=36):
+                        with gr.Column(scale=0, min_width=36, elem_classes=["whyx-rc-copypos"]):
                             cb_pos = gr.Button(
                                 "📋",
                                 size="sm",
@@ -1733,11 +1710,12 @@ with gr.Blocks(**_blocks_kw) as demo:
                                 scale=0,
                                 min_width=32,
                                 elem_classes=["whyx-copy-btn", "whyx-tooltip"],
-                                elem_id="copy-btn-pos",
+                                elem_id=f"copy-btn-pos-{i}",
                             )
                             cb_pos.click(fn=None, inputs=[rb], outputs=[], js=COPY_JS)
-                            gr.HTML('<span class="whyx-tooltip-text">Copy to clipboard</span>')
-                        with gr.Column(scale=0, min_width=46):
+                            tt_copy_pos = gr.HTML(f'<span class="whyx-tooltip-text">{t("tooltip_copy", "en")}</span>')
+                            tooltip_spans.append((tt_copy_pos, "copy"))
+                        with gr.Column(scale=0, min_width=46, elem_classes=["whyx-rc-heart"]):
                             hb = gr.Button(
                                 "♡",
                                 size="sm",
@@ -1745,11 +1723,12 @@ with gr.Blocks(**_blocks_kw) as demo:
                                 scale=0,
                                 min_width=36,
                                 elem_classes=["whyx-heart-btn", "whyx-tooltip"],
-                                elem_id="heart-btn",
+                                elem_id=f"heart-btn-{i}",
                             )
                             heart_btns.append(hb)
-                            gr.HTML('<span class="whyx-tooltip-text">Toggle favorite</span>')
-                        with gr.Column(scale=1):
+                            tt_fav = gr.HTML(f'<span class="whyx-tooltip-text">{t("tooltip_favorite", "en")}</span>')
+                            tooltip_spans.append((tt_fav, "fav"))
+                        with gr.Column(scale=1, elem_classes=["whyx-rc-neg"]):
                             nb = gr.Textbox(
                                 label="",
                                 show_label=False,
@@ -1759,7 +1738,7 @@ with gr.Blocks(**_blocks_kw) as demo:
                                 placeholder=t("neg_placeholder", "en"),
                                 elem_classes=["whyx-neg-text"],
                             )
-                        with gr.Column(scale=0, min_width=36):
+                        with gr.Column(scale=0, min_width=36, elem_classes=["whyx-rc-copyneg"]):
                             cb_neg = gr.Button(
                                 "📋",
                                 size="sm",
@@ -1767,15 +1746,17 @@ with gr.Blocks(**_blocks_kw) as demo:
                                 scale=0,
                                 min_width=32,
                                 elem_classes=["whyx-copy-btn", "whyx-tooltip"],
-                                elem_id="copy-btn-neg",
+                                elem_id=f"copy-btn-neg-{i}",
                             )
                             cb_neg.click(fn=None, inputs=[nb], outputs=[], js=COPY_JS)
-                            gr.HTML('<span class="whyx-tooltip-text">Copy to clipboard</span>')
+                            tt_copy_neg = gr.HTML(f'<span class="whyx-tooltip-text">{t("tooltip_copy", "en")}</span>')
+                            tooltip_spans.append((tt_copy_neg, "copy"))
                         result_boxes.append(rb)
                         neg_boxes.append(nb)
 
         # ===== TAB 2: Tagger =====
-        with gr.TabItem(f"🖼️ {t('tab_tagger', 'en')}"):
+        tab_tagger = gr.TabItem(f"🖼️ {t('tab_tagger', 'en')}")
+        with tab_tagger:
             with gr.Column(elem_classes=["whyx-tree"]):
                 # Tree root: Tagger
                 with gr.Column(elem_classes=["whyx-tree-node"]):
@@ -1912,7 +1893,8 @@ with gr.Blocks(**_blocks_kw) as demo:
                 tagger_esc_state = gr.State("")
 
         # ===== TAB 3: Tools =====
-        with gr.TabItem(f"🔧 {t('tab_tools', 'en')}"):
+        tab_tools = gr.TabItem(f"🔧 {t('tab_tools', 'en')}")
+        with tab_tools:
             with gr.Column(elem_classes=["whyx-tree"]):
                 # Tree root: Analyzer
                 with gr.Column(elem_classes=["whyx-tree-node"]):
@@ -2025,7 +2007,8 @@ with gr.Blocks(**_blocks_kw) as demo:
                         )
 
         # ===== TAB 4: History =====
-        with gr.TabItem(f"📜 {t('tab_history', 'en')}"):
+        tab_history = gr.TabItem(f"📜 {t('tab_history', 'en')}")
+        with tab_history:
             with gr.Column(elem_classes=["whyx-tree-node"]):
                 history_header_html = gr.HTML(_tree_header("📜", "history_section", "en"))
                 history_md = gr.HTML(
@@ -2049,7 +2032,7 @@ with gr.Blocks(**_blocks_kw) as demo:
         outputs=[],
     )
     web_search_clear.click(
-        fn=lambda lang: f'<div class="whyx-info-text" style="color:rgba(148,163,184,0.6);font-size:12px;">{t("web_search_empty", "ru" if lang == "RU" else "en")}</div>',
+        fn=lambda lang: f'<div class="whyx-info-text" style="color:var(--text-faint);font-size:12px;">{t("web_search_empty", "ru" if lang == "RU" else "en")}</div>',
         inputs=[lang_state],
         outputs=[web_search_output],
     )
@@ -2206,7 +2189,7 @@ with gr.Blocks(**_blocks_kw) as demo:
     generate_btn.click(
         fn=on_generate,
         inputs=inputs_list,
-        outputs=result_boxes + neg_boxes,
+        outputs=result_boxes + neg_boxes + result_cards,
     ).then(
         fn=lambda lang: gr.update(value=_format_history_html("ru" if lang == "RU" else "en")),
         inputs=[lang_state],
@@ -2400,6 +2383,13 @@ with gr.Blocks(**_blocks_kw) as demo:
         updates.append(gr.update(value=_format_artist_info([], lc)))
         updates.append(gr.update(value=f'<div class="whyx-info-text">{t("analyzer_desc", lc)}</div>'))
         updates.append(gr.update(value=_format_history_html(lc)))
+        updates.append(gr.update(label=f"✨ {t('tab_generate', lc)}"))
+        updates.append(gr.update(label=f"🖼️ {t('tab_tagger', lc)}"))
+        updates.append(gr.update(label=f"🔧 {t('tab_tools', lc)}"))
+        updates.append(gr.update(label=f"📜 {t('tab_history', lc)}"))
+        for _comp, kind in tooltip_spans:
+            key = "tooltip_copy" if kind == "copy" else "tooltip_favorite"
+            updates.append(gr.update(value=f'<span class="whyx-tooltip-text">{t(key, lc)}</span>'))
         updates.append(choice)
         return updates
 
@@ -2437,19 +2427,44 @@ with gr.Blocks(**_blocks_kw) as demo:
         presets_acc, user_preset_name, user_preset_tags, user_preset_save, user_preset_delete,
         user_preset_trigger, user_preset_dropdown, user_preset_apply, theme_toggle,
     ] + category_checks + group_components + result_boxes + neg_boxes + [categories_desc_md, presets_desc_md, results_desc_md, hotkeys_hint_md, artist_info_md, analyzer_md, history_md,
-        lang_state]
+        tab_generate, tab_tagger, tab_tools, tab_history] + [c for c, _k in tooltip_spans] + [lang_state]
 
     lang_btn.change(
         fn=update_lang,
         inputs=[lang_btn],
         outputs=lang_outputs,
     )
+    lang_btn.change(
+        fn=None,
+        inputs=[lang_btn],
+        outputs=[],
+        js="(v) => { try { localStorage.setItem('whyx-lang', v); } catch(e) {} }",
+    )
 
     theme_toggle.change(
         fn=None,
         inputs=[theme_toggle],
         outputs=[],
-        js="(v) => { document.body.classList.toggle('whyx-light', v === 'light'); }",
+        js="(v) => { document.body.classList.toggle('whyx-light', v === 'light'); try { localStorage.setItem('whyx-theme', v); } catch(e) {} }",
+    )
+
+    # Restore persisted theme + language on page load: the JS reads
+    # localStorage, applies the body class / radio value, then the standard
+    # update_lang chain re-renders every localized label.
+    demo.load(
+        fn=None,
+        inputs=[],
+        outputs=[theme_toggle],
+        js="() => { let t = 'dark'; try { t = localStorage.getItem('whyx-theme') || 'dark'; } catch(e) {} document.body.classList.toggle('whyx-light', t === 'light'); return t; }",
+    ).then(
+        fn=None,
+        inputs=[],
+        outputs=[lang_btn],
+        js="() => { try { return localStorage.getItem('whyx-lang') || 'EN'; } catch(e) { return 'EN'; } }",
+    ).then(
+        fn=update_lang,
+        inputs=[lang_btn],
+        outputs=lang_outputs,
     )
 
 

src/i18n.py

@@ -361,6 +361,8 @@ L10N = {
         "tagger_tags_desc": "Edit the list, then Apply or Copy. Built from the toggled tags above.",
         "tagger_tags_ph": "Recognized tags will appear here…",
         "tagger_copy": "Copy",
+        "tooltip_copy": "Copy to clipboard",
+        "tooltip_favorite": "Toggle favorite",
         "tab_generate": "Generate",
         "tab_tagger": "Tagger",
         "tab_tools": "Tools",
@@ -750,6 +752,8 @@ L10N = {
         "tagger_tags_desc": "Отредактируйте список, затем «Применить» или «Копировать». Собран из отмеченных выше тегов.",
         "tagger_tags_ph": "Здесь появятся распознанные теги…",
         "tagger_copy": "Копировать",
+        "tooltip_copy": "Скопировать в буфер",
+        "tooltip_favorite": "Добавить в избранное",
         "tab_generate": "Генерация",
         "tab_tagger": "Теггер",
         "tab_tools": "Инструменты",

src/prompt_analyzer.py

@@ -241,7 +241,7 @@ def format_analysis_html(data: dict, lang: str) -> str:
     if data.get("error") == "parse":
         msg = t("analyzer_parse_error", lang)
         return f"""
-        <div style="background:rgba(15,23,42,0.5);border:1px solid rgba(239,68,68,0.25);border-radius:10px;padding:10px 14px;margin-top:4px;">
+        <div style="background:var(--input-bg);border:1px solid rgba(239,68,68,0.25);border-radius:10px;padding:10px 14px;margin-top:4px;">
             <div style="color:#F87171;font-size:12px;">⚠ {msg}</div>
         </div>
         """
@@ -266,22 +266,22 @@ def format_analysis_html(data: dict, lang: str) -> str:
 
     lines = []
 
-    lines.append("<div style='background:rgba(15,23,42,0.5);border:1px solid rgba(56,189,248,0.12);border-radius:10px;padding:10px 14px;margin-top:4px;'>")
+    lines.append("<div style='background:var(--input-bg);border:1px solid rgba(56,189,248,0.12);border-radius:10px;padding:10px 14px;margin-top:4px;'>")
 
-    lines.append(f"<div style='display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:#94A3B8;margin-bottom:6px;'>")
-    lines.append(f"<span><strong style='color:#E2E8F0;'>{t('analyzer_subject', lang)}:</strong> {html.escape(s['subject'])}</span>")
-    lines.append(f"<span><strong style='color:#E2E8F0;'>{t('analyzer_character', lang)}:</strong> {html.escape(s['character'])}</span>")
-    lines.append(f"<span><strong style='color:#E2E8F0;'>{t('analyzer_series', lang)}:</strong> {html.escape(s['series'])}</span>")
+    lines.append(f"<div style='display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--text-dim);margin-bottom:6px;'>")
+    lines.append(f"<span><strong style='color:var(--text);'>{t('analyzer_subject', lang)}:</strong> {html.escape(s['subject'])}</span>")
+    lines.append(f"<span><strong style='color:var(--text);'>{t('analyzer_character', lang)}:</strong> {html.escape(s['character'])}</span>")
+    lines.append(f"<span><strong style='color:var(--text);'>{t('analyzer_series', lang)}:</strong> {html.escape(s['series'])}</span>")
     if s['artists']:
-        lines.append(f"<span><strong style='color:#E2E8F0;'>{t('analyzer_artists', lang)}:</strong> {html.escape(', '.join(s['artists']))}</span>")
+        lines.append(f"<span><strong style='color:var(--text);'>{t('analyzer_artists', lang)}:</strong> {html.escape(', '.join(s['artists']))}</span>")
     lines.append("</div>")
 
     bar_color = {"good": "#34D399", "missing": "#F87171", "conflict": "#FBBF24", "low": "#FBBF24"}.get(q["status"], "#94A3B8")
 
-    lines.append(f"<div style='display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:#94A3B8;margin-bottom:6px;'>")
-    lines.append(f"<span><strong style='color:#E2E8F0;'>{t('analyzer_tags', lang)}:</strong> {s['total_tags']} ({t('analyzer_quality', lang)}: {s['num_quality']}, {t('analyzer_meta', lang)}: {s['num_meta']}, {t('analyzer_general', lang)}: {s['num_general']})</span>")
-    lines.append(f"<span><strong style='color:#E2E8F0;'>{t('analyzer_quality', lang)}:</strong> <span style='color:{bar_color};'>{quality_label}</span></span>")
-    lines.append(f"<span><strong style='color:#E2E8F0;'>{t('analyzer_tokens', lang)}:</strong> ≈{tok['clip']} CLIP {'⚠️' if tok['clip_warning'] else ''} / ≈{tok['t5']} T5 {'⚠️' if tok['t5_warning'] else ''}</span>")
+    lines.append(f"<div style='display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--text-dim);margin-bottom:6px;'>")
+    lines.append(f"<span><strong style='color:var(--text);'>{t('analyzer_tags', lang)}:</strong> {s['total_tags']} ({t('analyzer_quality', lang)}: {s['num_quality']}, {t('analyzer_meta', lang)}: {s['num_meta']}, {t('analyzer_general', lang)}: {s['num_general']})</span>")
+    lines.append(f"<span><strong style='color:var(--text);'>{t('analyzer_quality', lang)}:</strong> <span style='color:{bar_color};'>{quality_label}</span></span>")
+    lines.append(f"<span><strong style='color:var(--text);'>{t('analyzer_tokens', lang)}:</strong> ≈{tok['clip']} CLIP {'⚠️' if tok['clip_warning'] else ''} / ≈{tok['t5']} T5 {'⚠️' if tok['t5_warning'] else ''}</span>")
     if s['n_language']:
         lines.append(f"<span style='color:#818CF8;'>{t('analyzer_natural_lang', lang)}</span>")
     lines.append("</div>")