ui.py

"""Arabic-only presentation layer shared by the Gradio app and the static (in-browser) page.

Colour rules: green = verified, red = a real mismatch or a missing reference, amber = needs a human. Verified items
never use red. Every user-facing string is Arabic.
"""
from __future__ import annotations

import html
from typing import List, Optional

_e = html.escape

GROUP_LABEL = {"verified": "موثّق", "mismatch": "غير مطابق", "review": "تحتاج مراجعة بشرية"}
TYPE_LABEL = {"Ayah": "آية قرآنية", "Hadith": "حديث نبوي"}
INDICATORS = [
    ("composite", "الدرجة المركبة"),
    ("coverage", "تغطية الكلمات"),
    ("lcs_ratio", "التسلسل النصي"),
    ("token_overlap", "تداخل الكلمات"),
    ("edit_sim", "تشابه الحروف"),
    ("diacritic_sim", "التشكيل"),
]
METHODS = {
    "substring_match": "الاقتباس واردٌ كاملًا في المصدر",
    "threshold_pass": "تجاوز عتبة التطابق",
    "threshold_fail": "دون عتبة التطابق",
    "borderline_multi_cov": "حالة حدّية: عدة مصادر متقاربة",
    "borderline_default": "حالة حدّية",
    "borderline_low_retrieval": "حالة حدّية: استرجاع ضعيف",
    "no_candidates": "لا توجد مصادر مرشحة",
    "empty_span": "نص فارغ",
    "error": "تعذّرت المعالجة",
}


def _pct(value: float) -> str:
    return f"{round(value * 100)}%"


def source_label(source: dict) -> str:
    if source["type"] == "Quran":
        start, end = source["ayah_start"], source["ayah_end"]
        verses = f"{start}" if start == end else f"{start}–{end}"
        return f"سورة {source['surah_name']} — الآية {verses}"
    return f"حديث رقم {source['hadithID']} — {source['title']}"


def reason_text(reason: dict) -> str:
    """Arabic explanation of a decision code produced by the pipeline."""
    code = reason["code"]
    src = reason.get("source", "")
    if code == "exact_match":
        return f"تطابق تام مع {src} بعد تجاهل اختلافات الرسم والتشكيل."
    if code == "close_match":
        return f"تطابق شبه كامل مع {src}."
    if code == "altered_passage":
        n = reason.get("n", 0)
        how = "تغيّر ترتيب الكلمات" if reason.get("reordered") else f"{n} موضع مختلف"
        return f"النص يخالف {src} ({how}). التصحيح المقترح هو نص المصدر حرفيًا ولم يُولَّد."
    if code == "weak_match":
        return "وُجد مصدر قريب لكن التطابق غير كافٍ للحكم الآلي."
    if code == "no_source":
        return "لا يوجد في المراجع المضمّنة نصٌّ يشبه هذا الاقتباس، وقد يكون مختلَقًا."
    if code == "insufficient_evidence":
        return "الأدلة غير كافية: لا مصدر واضح، ودرجة اليقين منخفضة."
    if code == "candidate_not_strong":
        return f"وُجد مرشح ({src}، قوة المطابقة {round(reason.get('strength', 0) * 100)}%) لكن الدليل لا يكفي للتصحيح الآلي."
    if code == "hadith_candidate":
        return f"وُجدت رواية مشابهة ({src}) لكن لا يُصحَّح الحديث آليًا لاختلاف الروايات؛ يلزم الرجوع إلى مختص."
    return "تعذّرت معالجة هذا الاقتباس آليًا."


def note_text(note: dict) -> str:
    n = note.get("n", 0)
    code = note["code"]
    if code == "diacritic_conflict":
        return f"تنبيه: تشكيل {n} كلمة يخالف المصحف (الكلمات صحيحة لكن الحركات مختلفة)."
    if code == "orthographic_variant":
        return f"ملاحظة: {n} اختلاف إملائي (رسم أو مسافات) لا يغيّر الكلمة."
    if code == "hadith_minor_diffs":
        return f"ملاحظة: {n} اختلاف طفيف عن أقرب رواية في المراجع."
    return ""


def _diff_html(comparison: dict) -> str:
    """Red = words only in the quotation; green = the source words that should be there."""
    parts = []
    for op in comparison["word_diff"]:
        if op["op"] == "equal":
            parts.append(f'<span class="w-eq">{_e(op["span"])}</span>')
            continue
        if op["span"]:
            parts.append(f'<span class="w-extra">{_e(op["span"])}</span>')
        if op["source"]:
            parts.append(f'<span class="w-missing">{_e(op["source"])}</span>')
    return " ".join(parts)


def _legend(group: str, comparison: Optional[dict]) -> str:
    if group == "verified" or not comparison or all(op["op"] == "equal" for op in comparison["word_diff"]):
        return ""
    return '<p class="legend"><span class="w-extra">كلمات في الاقتباس تخالف المصدر</span> <span class="w-missing">الصواب من المصدر</span></p>'


def _indicator_table(signals: Optional[dict]) -> str:
    if not signals:
        return ""
    rows = []
    for key, label in INDICATORS:
        value = float(signals.get(key, 0.0))
        rows.append(
            f'<div class="ind"><div class="ind-name">{label}</div>'
            f'<div class="bar"><span style="width:{_pct(value)}"></span></div><div class="ind-val">{_pct(value)}</div></div>'
        )
    rows.append(f'<div class="ind"><div class="ind-name">وروده كاملًا في المصدر</div><div class="ind-val wide">{"نعم" if signals.get("is_substring") else "لا"}</div></div>')
    return '<div class="indicators">' + "".join(rows) + "</div>"


def _match_percent(span: dict) -> int:
    evidence = span["evidence"]
    if evidence and evidence.get("comparison"):
        return round(evidence["comparison"]["word_similarity"] * 100)
    if evidence and evidence.get("signals"):
        return round(evidence["signals"]["composite"] * 100)
    return 0


def _evidence_panel(span: dict) -> str:
    evidence, verification = span["evidence"], span["verification"]
    rows = [
        f'<div class="ev-row"><b>الاقتباس المكتشف</b><p class="quote">{_e(span["text"])}</p></div>',
        f'<div class="ev-row"><b>النوع</b><p>{TYPE_LABEL[span["type"]]}</p></div>',
    ]
    if evidence:
        comparison = evidence["comparison"]
        rows += [
            f'<div class="ev-row"><b>المصدر المرشح</b><p>{_e(source_label(evidence["source"]))}</p></div>',
            f'<div class="ev-row"><b>نص المصدر الأصلي</b><p class="quote">{_e(comparison["source_excerpt"])}</p></div>',
            f'<div class="ev-row"><b>المقارنة كلمةً بكلمة</b><p class="diff">{_diff_html(comparison)}</p>{_legend(span["group"], comparison)}</div>',
            f'<div class="ev-row"><b>مؤشرات التحقق</b>{_indicator_table(evidence.get("signals"))}</div>',
        ]
        if comparison["diacritic_notes"]:
            items = "، ".join(f"{_e(n['word'])} ← {_e(n['source_word'])}" for n in comparison["diacritic_notes"])
            rows.append(f'<div class="ev-row"><b>اختلافات التشكيل</b><p>{items}</p></div>')
    else:
        rows.append('<div class="ev-row"><b>المصدر المرشح</b><p>لم يُسترجع أي مصدر.</p></div>')
    rows += [
        f'<div class="ev-row"><b>درجة اليقين في الحكم</b><p>{_pct(verification["confidence"])} · {METHODS.get(verification["method"], "")}</p></div>',
        f'<div class="ev-row"><b>القرار</b><p>{_e(span["status_ar"])}</p></div>',
        f'<div class="ev-row"><b>سبب القرار</b><p>{_e(reason_text(span["reason"]))}</p></div>',
    ]
    return "".join(rows)


def _card(span: dict) -> str:
    group, evidence = span["group"], span["evidence"]
    label = GROUP_LABEL[group]
    chip = f'<span class="conf">نسبة المطابقة <b>{_match_percent(span)}%</b></span>'
    scan_badge = ('<span class="badge scan" title="اكتُشف بمطابقة النص مع المراجع دون علامات تنصيص">اقتباس غير معلَن</span>'
                  if span["detection"]["backend"] == "scan" else "")

    fields = [f'<div class="field"><label>الاقتباس المكتشف</label><p class="quote">{_e(span["text"])}</p></div>']
    if evidence:
        comparison = evidence["comparison"]
        fields.append(f'<div class="field"><label>المصدر المرشح</label><p>{_e(source_label(evidence["source"]))}</p></div>')
        if group != "verified":   # a verified quotation equals its source: no need to print it twice
            fields.append(
                f'<div class="field"><label>المقارنة بالمصدر</label><p class="diff">{_diff_html(comparison)}</p>{_legend(group, comparison)}</div>'
            )
    else:
        fields.append('<div class="field"><label>المصدر المرشح</label><p>لا يوجد</p></div>')
    fields.append(f'<p class="reason">{_e(reason_text(span["reason"]))}</p>')

    notes = "".join(f'<p class="note">{_e(note_text(n))}</p>' for n in span["notes"] if note_text(n))
    action = ""
    correction, suggestion = span["correction"], span["suggestion"]
    if correction:
        action = (
            '<div class="action ok"><b>التصحيح المقترح من المصدر</b>'
            f'<p class="quote">{_e(correction["display_text"])}</p>'
            f'<p class="legend">{_e(source_label(correction["source"]))}</p></div>'
        )
    elif group == "review":
        closest = ""
        if suggestion:
            closest = (f'<p class="legend">أقرب مصدر وُجد للمراجِع، وليس تصحيحًا آليًا: {_e(source_label(suggestion["source"]))}</p>'
                       f'<p class="quote small">{_e(suggestion["display_text"][:420])}</p>')
        action = ('<div class="action warn"><b>الأدلة غير كافية للتصحيح الآلي.</b> يُوصى بالمراجعة البشرية.' + closest + "</div>")
    elif span["status"] == "UNSUPPORTED":
        action = '<div class="action bad"><b>لا يوجد مصدر مطابق في المراجع المتاحة.</b> لم يُقترح أي نص بديل.</div>'

    return f"""
<div class="qcard {group}">
  <div class="qhead">
    <span class="idx">{span["id"]}</span>
    <span class="badge type">{TYPE_LABEL[span["type"]]}</span>{scan_badge}
    <span class="badge st {group}">{label}</span>
    {chip}
  </div>
  {"".join(fields)}
  {notes}
  {action}
  <details class="evidence"><summary>عرض الدليل</summary><div class="ev-body">{_evidence_panel(span)}</div></details>
</div>"""


def _summary(summary: dict) -> str:
    tiles = [
        (summary["n_spans"], "إجمالي الاقتباسات", ""),
        (summary["n_ayah"], "آيات قرآنية", ""),
        (summary["n_hadith"], "أحاديث نبوية", ""),
        (summary["VERIFIED"], "موثّق", "verified"),
        (summary["CORRECTED"] + summary["UNSUPPORTED"], "غير مطابق", "mismatch"),
        (summary["HUMAN_REVIEW"], "تحتاج مراجعة", "review"),
    ]
    return '<div class="summary">' + "".join(
        f'<div class="tile {cls}{" zero" if value == 0 and cls else ""}"><b>{value}</b><span>{label}</span></div>'
        for value, label, cls in tiles
    ) + "</div>"


def _highlighted_text(result: dict, title: str) -> str:
    text, pieces, cursor = result["input_text"], [], 0
    for span in result["spans"]:
        pieces.append(_e(text[cursor:span["start"]]))
        pieces.append(f'<mark class="{span["group"]}">{_e(text[span["start"]:span["end"]])}</mark>')
        cursor = span["end"]
    pieces.append(_e(text[cursor:]))
    legend = ('<div class="hl-legend"><mark class="verified">موثّق</mark><mark class="mismatch">غير مطابق</mark>'
              '<mark class="review">مراجعة بشرية</mark></div>')
    return f'<div class="highlight"><label>{title}</label><p>' + "".join(pieces) + "</p>" + legend + "</div>"


def final_text(result: dict) -> str:
    """Corrected text with an inline Arabic flag after every quotation that still needs attention."""
    text, reports = result["input_text"], result["spans"]
    for report in sorted(reports, key=lambda r: r["start"], reverse=True):
        if report["status"] == "CORRECTED" and report["correction"]:
            text = text[: report["start"]] + report["correction"]["display_text"] + text[report["end"]:]
        elif report["status"] == "UNSUPPORTED":
            text = text[: report["end"]] + " [⚠ لا يوجد مصدر مطابق]" + text[report["end"]:]
        elif report["status"] == "HUMAN_REVIEW":
            text = text[: report["end"]] + " [⚠ يحتاج مراجعة بشرية]" + text[report["end"]:]
    return text


def _final_block(result: dict) -> str:
    summary = result["summary"]
    fixed = summary["CORRECTED"]
    open_items = summary["UNSUPPORTED"] + summary["HUMAN_REVIEW"]
    if fixed == 0 and open_items == 0:
        headline = "كل الاقتباسات المكتشفة مطابقة للمصادر."
    else:
        headline = f"صُحِّح {fixed} اقتباس من نص المصدر، وبقي {open_items} اقتباس يحتاج مراجعة بشرية ومعلَّم بعلامة تنبيه."
    text = final_text(result)
    return (
        '<div class="final"><div class="final-head"><b>النسخة المصحّحة</b>'
        f'<button class="copy copy-btn" type="button" data-text="{_e(text, quote=True)}" '
        'onclick="window.icvCopy?window.icvCopy(this):(navigator.clipboard&&navigator.clipboard.writeText(this.dataset.text))">نسخ النص</button></div>'
        f'<p class="legend">{headline}</p><p class="final-text">{_e(text)}</p></div>'
    )


def render_results(result: dict, generated_answer: Optional[str] = None) -> str:
    """HTML report for a pipeline result. Pass the model's answer (mode B) to show it first and label the text as generated."""
    header = render_generated_header(generated_answer) if generated_answer is not None else ""
    if not result["spans"]:
        body = (
            '<div class="notice">لم يُعثر على اقتباسات قرآنية أو حديثية في هذا النص. يكتشف النظام الاقتباسات بمطابقة النص مع مراجع القرآن والحديث، '
            'سواء وُضعت بين علامات تنصيص أو لم توضع، وسواء سبقتها عبارة تمهيدية أو لم تسبقها.</div>'
        )
        return f'<div class="icv">{header}{body}</div>'
    generated = generated_answer is not None
    title = "إجابة النموذج مع الاقتباسات المكتشفة" if generated else "النص مع الاقتباسات المكتشفة"
    parts = [_summary(result["summary"]), _highlighted_text(result, title), "".join(_card(s) for s in result["spans"])]
    summary = result["summary"]
    if generated or summary["CORRECTED"] or summary["UNSUPPORTED"] or summary["HUMAN_REVIEW"]:
        parts.append(_final_block(result))
    return f'<div class="icv">{header}{"".join(parts)}</div>'


def render_generated_header(answer: str) -> str:
    return f'<div class="generated"><label>إجابة النموذج اللغوي كما وصلت</label><p>{_e(answer)}</p></div>'


def render_message(message: str, kind: str = "info") -> str:
    return f'<div class="icv"><div class="notice {kind}">{_e(message)}</div></div>'


# --------------------------------------------------------------------------------------------------------------
# Static markup and CSS
# --------------------------------------------------------------------------------------------------------------
STAR = (
    '<svg class="mark" viewBox="0 0 64 64" fill="none" stroke="#E2C06E" stroke-width="1.8" aria-hidden="true">'
    '<rect x="14" y="14" width="36" height="36"/><rect x="14" y="14" width="36" height="36" transform="rotate(45 32 32)"/>'
    '<circle cx="32" cy="32" r="7" fill="#E2C06E" stroke="none"/></svg>'
)

HERO = f"""
<div class="icv"><div class="hero">
  {STAR}
  <h1>التحقق من هلوسة القرآن والحديث وتصحيحها</h1>
  <p class="tagline">تحقّق من آيات القرآن والأحاديث النبوية بالدليل</p>
  <p class="sub">يكتشف النظام الاقتباسات داخل أي نص، ويسترجع نصوصها من المصادر، ويقارنها كلمةً بكلمة، ثم يعرض الدليل.
     وإذا لم تكفِ الأدلة فلن يختلق تصحيحًا، بل يحيل الحالة إلى المراجعة البشرية.</p>
  <div class="flow"><span>كشف</span><i>‹</i><span>استرجاع</span><i>‹</i><span>محاذاة</span><i>‹</i><span>دليل</span><i>‹</i><span>قرار</span></div>
</div></div>
"""

DISCLAIMER = """<div class="icv"><div class="disclaimer">أداة مساعدة للتدقيق النصي وليست فتوى ولا بديلًا عن المراجعة المتخصصة.
النتائج مبنية على مراجع القرآن الكريم والكتب الستة المضمّنة فقط.</div></div>"""

PLACEHOLDER = "الصق هنا أي نص يتضمن آيات أو أحاديث، سواء كانت بين علامات تنصيص أو بدونها، ومع أي صياغة تمهيدية أو بدونها…"
PROMPT_PLACEHOLDER = "اكتب سؤالك، مثل: اشرح لي فضل الصبر في القرآن والسنة مع ذكر الأدلة."

_PATTERN = (
    "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E"
    "%3Cg fill='none' stroke='%230F4C3A' stroke-opacity='0.07' stroke-width='1'%3E"
    "%3Crect x='22' y='22' width='44' height='44'/%3E%3Crect x='22' y='22' width='44' height='44' transform='rotate(45 44 44)'/%3E"
    "%3C/g%3E%3C/svg%3E\")"
)

CSS = """
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Amiri:wght@400;700&display=swap');
:root { --green:#0F4C3A; --green-2:#17694F; --gold:#B8912F; --gold-2:#E2C06E; --cream:#FBF6EA; --paper:#FFFFFF;
        --ink:#1F2933; --muted:#55626D; --line:#E6DCC3; --ok:#1B7A4B; --ok-bg:#EAF6EF; --ok-line:#BFE3CD;
        --bad:#B3261E; --bad-bg:#FDECEA; --bad-line:#F4B8B3; --warn:#7A5B0C; --warn-bg:#FFF6DA; --warn-line:#EBD28A; }
.gradio-container, body.icv-page { background:var(--cream) PATTERN !important; font-family:'Cairo','Segoe UI',Tahoma,sans-serif; color:var(--ink); }
.gradio-container { max-width:1060px !important; --body-text-color:#1F2933; --block-background-fill:#FFFFFF; --block-border-color:#E6DCC3;
  --input-background-fill:#FFFFFF; --block-label-text-color:#55626D; --button-primary-background-fill:#0F4C3A;
  --button-primary-background-fill-hover:#17694F; --button-primary-text-color:#FFFFFF; --button-secondary-background-fill:#FFFFFF;
  --button-secondary-text-color:#0F4C3A; --button-secondary-border-color:#B8912F; --color-accent:#B8912F; }
.icv { direction:rtl; text-align:right; color:var(--ink); line-height:1.9; }
.icv .hero { background:linear-gradient(135deg,#0F4C3A,#17694F); border-radius:20px; padding:30px 22px 26px; margin:10px 0 18px; text-align:center;
  box-shadow:0 6px 22px rgba(15,76,58,.18); border-bottom:4px solid var(--gold); }
.icv .hero .mark { width:54px; height:54px; display:block; margin:0 auto 4px; }
.icv .hero h1 { font-size:2.3rem; margin:.1rem 0; color:#FFFFFF; font-weight:700; }
.icv .hero .tagline { color:var(--gold-2); font-size:1.2rem; font-weight:600; margin:.1rem 0 .6rem; }
.icv .hero .sub { max-width:720px; margin:0 auto; color:#E9F2EE; font-size:1rem; }
.icv .flow { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin-top:16px; }
.icv .flow span { background:rgba(255,255,255,.12); border:1px solid rgba(226,192,110,.55); color:#FFF; border-radius:999px; padding:3px 16px; font-size:.9rem; }
.icv .flow i { color:var(--gold-2); font-style:normal; font-size:1.2rem; }
.icv .disclaimer { font-size:.85rem; color:var(--muted); text-align:center; padding:14px 8px; }
.icv .en-free { direction:rtl; }
.input-area textarea { direction:rtl; text-align:right; font-family:'Amiri','Cairo',serif !important; font-size:1.25rem !important; line-height:2.1 !important; background:#FFFFFF !important; color:#1F2933 !important; }
.llm-row label, .gradio-container label span { font-family:'Cairo',sans-serif; }
.results { direction:rtl; }
.icv .summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:8px 0 14px; }
.icv .tile { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px 8px; text-align:center; }
.icv .tile b { display:block; font-size:1.8rem; color:var(--green); line-height:1.3; } .icv .tile span { font-size:.92rem; color:var(--muted); }
.icv .tile.verified { background:var(--ok-bg); border-color:var(--ok-line); } .icv .tile.verified b { color:var(--ok); }
.icv .tile.mismatch { background:var(--bad-bg); border-color:var(--bad-line); } .icv .tile.mismatch b { color:var(--bad); }
.icv .tile.review { background:var(--warn-bg); border-color:var(--warn-line); } .icv .tile.review b { color:var(--warn); }
.icv .tile.zero { background:var(--paper); border-color:var(--line); opacity:.6; } .icv .tile.zero b { color:var(--muted); }
.icv .highlight, .icv .generated, .icv .final { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin-bottom:14px; }
.icv label { display:block; color:var(--muted); font-size:.82rem; font-weight:600; margin-bottom:4px; }
.icv .highlight p, .icv .generated p, .icv .final-text { font-family:'Amiri','Cairo',serif; font-size:1.2rem; line-height:2.2; margin:0; white-space:pre-wrap; }
.icv mark { color:var(--ink); border-radius:6px; padding:1px 5px; }
.icv mark.verified { background:#D5EEDF; } .icv mark.mismatch { background:#F8CFCB; } .icv mark.review { background:#F7E3A6; }
.icv .hl-legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; font-size:.78rem; }
.icv .qcard { background:var(--paper); border:1px solid var(--line); border-inline-start:6px solid var(--line); border-radius:16px; padding:16px 18px; margin:12px 0; }
.icv .qcard.verified { border-inline-start-color:var(--ok); } .icv .qcard.mismatch { border-inline-start-color:var(--bad); } .icv .qcard.review { border-inline-start-color:var(--gold); }
.icv .qhead { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.icv .idx { background:var(--green); color:#FFF; border-radius:50%; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; }
.icv .badge { padding:2px 14px; border-radius:999px; font-size:.84rem; background:#F3EEDD; border:1px solid var(--line); color:var(--ink); }
.icv .badge.st.verified { background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok); font-weight:600; }
.icv .badge.st.mismatch { background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad); font-weight:600; }
.icv .badge.st.review { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn); font-weight:600; }
.icv .badge.scan { background:#EEF3FB; border-color:#C9D8EE; color:#2F4F7F; }
.icv .conf { margin-inline-start:auto; color:var(--muted); font-size:.88rem; } .icv .conf b { color:var(--green); }
.icv .field { margin:8px 0; } .icv .field p { margin:0; }
.icv .quote { font-family:'Amiri','Cairo',serif; font-size:1.25rem; line-height:2.2; color:var(--ink); } .icv .quote.small { font-size:1.05rem; color:#3a4651; }
.icv .diff { font-family:'Amiri','Cairo',serif; font-size:1.2rem; line-height:2.2; }
.icv .w-extra { background:var(--bad-bg); color:var(--bad); border-radius:4px; padding:0 4px; text-decoration:line-through; }
.icv .w-missing { background:var(--ok-bg); color:var(--ok); border-radius:4px; padding:0 4px; font-weight:700; }
.icv .legend { color:var(--muted); font-size:.82rem; margin:4px 0 0; } .icv .legend span { text-decoration:none; font-size:.8rem; }
.icv .reason { color:var(--muted); font-size:.92rem; margin:6px 0 0; }
.icv .note { color:var(--warn); background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:10px; padding:5px 12px; font-size:.88rem; margin:8px 0 0; }
.icv .action { border-radius:12px; padding:10px 14px; margin-top:10px; }
.icv .action.ok { background:var(--ok-bg); border:1px solid var(--ok-line); } .icv .action.ok b { color:var(--ok); }
.icv .action.warn { background:var(--warn-bg); border:1px solid var(--warn-line); } .icv .action.warn b { color:var(--warn); }
.icv .action.bad { background:var(--bad-bg); border:1px solid var(--bad-line); } .icv .action.bad b { color:var(--bad); }
.icv .evidence { margin-top:12px; border-top:1px dashed var(--line); padding-top:8px; }
.icv .evidence summary { cursor:pointer; color:var(--green); font-weight:700; }
.icv .ev-row { margin:10px 0; } .icv .ev-row b { color:var(--gold); font-size:.88rem; } .icv .ev-row p { margin:2px 0; }
.icv .indicators { display:grid; gap:6px; margin-top:6px; }
.icv .ind { display:grid; grid-template-columns:150px 1fr 48px; gap:10px; align-items:center; font-size:.88rem; }
.icv .bar { background:#EFE8D3; border-radius:999px; height:9px; overflow:hidden; direction:rtl; } .icv .bar span { display:block; height:100%; background:linear-gradient(270deg,var(--green),var(--gold)); }
.icv .ind-val { text-align:left; direction:ltr; color:var(--ink); } .icv .ind-val.wide { grid-column:2 / span 2; text-align:right; direction:rtl; }
.icv .final { border-color:var(--gold); background:#FFFDF6; }
.icv .final-head { display:flex; justify-content:space-between; align-items:center; } .icv .final-head b { color:var(--green); font-size:1.05rem; }
.icv .copy { background:var(--green); color:#FFF; border:0; border-radius:10px; padding:5px 16px; font-family:inherit; cursor:pointer; }
.icv .notice { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px; }
.icv .notice.warn { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn); } .icv .notice.bad { background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad); }
@media (max-width:640px){ .icv .hero h1{font-size:1.7rem;} .icv .ind{grid-template-columns:104px 1fr 40px;} }
""".replace("PATTERN", _PATTERN)