styles.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) 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") !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;} }

body.icv-page{margin:0;min-height:100vh;} .page{max-width:1060px;margin:0 auto;padding:6px 16px 24px;box-sizing:border-box;}
.tabs{display:flex;gap:8px;margin:6px 0 14px;direction:rtl;}
.tab{flex:1;border:1px solid var(--line);background:#FFF;color:var(--green);border-radius:12px;padding:11px 14px;font:700 1rem 'Cairo',sans-serif;cursor:pointer;}
.tab.active{background:var(--green);color:#FFF;border-color:var(--green);box-shadow:0 3px 10px rgba(15,76,58,.2);}
section[hidden]{display:none;}
.form label{display:block;color:var(--muted);font-size:.88rem;font-weight:600;margin:10px 0 5px;direction:rtl;text-align:right;}
.form textarea,.form input,.form select{width:100%;box-sizing:border-box;background:#FFF;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:1rem 'Cairo',sans-serif;direction:rtl;text-align:right;outline:none;}
.form textarea{min-height:200px;resize:vertical;font-family:'Amiri','Cairo',serif;font-size:1.25rem;line-height:2.1;}
.form textarea.short{min-height:96px;}
.form textarea:focus,.form input:focus,.form select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,145,47,.18);}
.row{display:grid;grid-template-columns:1fr 1.4fr 1.6fr;gap:12px;} @media (max-width:760px){.row{grid-template-columns:1fr;}}
.btns{display:flex;gap:12px;margin:14px 0 6px;flex-wrap:wrap;}
.btns button{flex:1 1 200px;border:0;border-radius:12px;padding:13px 18px;font:700 1.02rem 'Cairo',sans-serif;cursor:pointer;}
.btn-main{background:var(--green);color:#FFF;} .btn-main:hover{background:var(--green-2);}
.btn-alt{background:#FFF;color:var(--green);border:1.5px solid var(--gold)!important;} .btn-alt:hover{background:#FFFBEF;}
.btns button:disabled{opacity:.45;cursor:not-allowed;}
.hint{font-size:.85rem;color:var(--muted);direction:rtl;margin:6px 0;}
#status{direction:rtl;text-align:center;color:var(--muted);font-size:.93rem;margin:8px 0;min-height:1.5em;}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:spin 1s linear infinite;vertical-align:middle;margin-inline-end:8px;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Executive layer: glassmorphism, dynamic gradients, RTL hardening (overrides _base.css) ===== */
:root{ --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.78); --glass-line:rgba(255,255,255,.7);
  --shadow-1:0 8px 30px rgba(15,76,58,.10); --shadow-2:0 18px 48px rgba(15,76,58,.16); }
@media (prefers-color-scheme:dark){ :root{ --glass:rgba(24,38,33,.62); --glass-strong:rgba(24,38,33,.8); --glass-line:rgba(255,255,255,.12); } }
html{scroll-behavior:smooth}
body.icv-page{ background:#F4EFE0 !important; position:relative; overflow-x:hidden; }
body.icv-page::before{ content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background: radial-gradient(40% 40% at 15% 20%, rgba(23,105,79,.28), transparent 70%),
              radial-gradient(35% 35% at 85% 15%, rgba(226,192,110,.38), transparent 70%),
              radial-gradient(45% 45% at 70% 90%, rgba(15,76,58,.22), transparent 70%);
  animation:drift 22s ease-in-out infinite alternate; }
@keyframes drift{ to{ transform:translate3d(-3%,2%,0) scale(1.06) } }

/* RTL hardening: nothing clips or spills out of labels, cards or buttons */
.icv, .form, .page{ direction:rtl; text-align:right; }
.icv *, .form *{ min-width:0; overflow-wrap:anywhere; word-break:normal; }
.form label{ white-space:normal; line-height:1.6; }
.btns button, .tab, .copy, .chip{ white-space:normal; line-height:1.5; }
.en, .form select{ direction:ltr; text-align:left; font-family:'Inter','Segoe UI',system-ui,sans-serif; unicode-bidi:plaintext; }
.page{ padding-inline:clamp(10px,3vw,16px); }

/* Hero */
.icv .hero{ background:linear-gradient(120deg,#0F4C3A,#17694F,#1C7C5C,#0F4C3A); background-size:300% 300%; animation:flow 14s ease infinite;
  border:1px solid var(--glass-line); border-bottom:4px solid var(--gold); box-shadow:var(--shadow-2); position:relative; overflow:hidden; }
.icv .hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 80% 0%, rgba(226,192,110,.25), transparent 60%); pointer-events:none; }
.icv .hero h1{ font-size:clamp(1.35rem,4.2vw,2.1rem); line-height:1.5; text-wrap:balance; }
.icv .hero .tagline{ font-size:clamp(1rem,2.6vw,1.2rem); }
@keyframes flow{ 50%{ background-position:100% 50% } }

/* Glass surfaces */
.icv .qcard,.icv .summary .tile,.icv .generated,.icv .final,.icv .notice,.icv .highlight,.icv .evidence,.form.glass,.panel{
  background:var(--glass) !important; backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--glass-line) !important; border-radius:18px; box-shadow:var(--shadow-1); }
.icv .qcard{ transition:transform .25s ease, box-shadow .25s ease; animation:rise .45s ease both; }
.icv .qcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
@keyframes rise{ from{ opacity:0; transform:translateY(10px) } }
.form.glass{ padding:18px; margin-bottom:12px; }
.panel{ padding:14px 16px; margin:10px 0; }

/* Tabs / buttons / inputs */
.tabs{ background:var(--glass); backdrop-filter:blur(12px); border:1px solid var(--glass-line); border-radius:16px; padding:6px; box-shadow:var(--shadow-1); }
.tab{ border:0 !important; background:transparent !important; transition:all .2s ease; }
.tab.active{ background:linear-gradient(135deg,var(--green),var(--green-2)) !important; color:#fff !important; }
.btn-main{ background:linear-gradient(135deg,#0F4C3A,#17694F) !important; box-shadow:0 6px 18px rgba(15,76,58,.28); transition:transform .15s ease, box-shadow .2s; }
.btn-main:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 10px 24px rgba(15,76,58,.34); }
.btn-alt{ background:var(--glass-strong) !important; }
.form textarea,.form input,.form select{ background:var(--glass-strong) !important; border-radius:14px; }
.form select{ appearance:none; padding-inline:14px 38px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F4C3A' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 14px center !important; }
.engine-row{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; margin-top:12px; }
.hint{ font-size:.82rem; color:var(--muted); }
.icv .copy{ background:linear-gradient(135deg,var(--green),var(--green-2)); box-shadow:0 4px 12px rgba(15,76,58,.25); transition:transform .15s; }
.icv .copy:active{ transform:scale(.96); }
.icv .final-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }

/* Boot progress + skeletons */
.boot{ display:flex; flex-direction:column; gap:10px; }
.boot .steps{ display:flex; gap:8px; flex-wrap:wrap; }
.boot .step{ font-size:.82rem; padding:3px 12px; border-radius:999px; border:1px solid var(--line); background:var(--glass-strong); color:var(--muted); }
.boot .step.on{ border-color:var(--gold); color:var(--green); font-weight:700; }
.boot .step.done{ background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok); }
.progress{ height:8px; border-radius:99px; background:rgba(15,76,58,.12); overflow:hidden; }
.progress i{ display:block; height:100%; width:6%; border-radius:99px; background:linear-gradient(90deg,var(--gold),var(--green-2)); transition:width .4s ease; }
.progress.indeterminate i{ width:35%; animation:slide 1.3s ease-in-out infinite; }
@keyframes slide{ 0%{ margin-inline-start:-35% } 100%{ margin-inline-start:100% } }
.skeleton{ position:relative; overflow:hidden; background:rgba(15,76,58,.08); border-radius:10px; }
.skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:shimmer 1.4s infinite; }
[dir=rtl] .skeleton::after{ animation-direction:reverse; }
@keyframes shimmer{ to{ transform:translateX(100%) } }
.sk-card{ padding:16px; margin:12px 0; }
.sk-line{ height:14px; margin:10px 0; } .sk-line.w1{width:92%} .sk-line.w2{width:76%} .sk-line.w3{width:55%} .sk-title{height:22px;width:40%;margin-bottom:14px}
.spinner{ width:16px; height:16px; border-radius:50%; border:3px solid rgba(15,76,58,.2); border-top-color:var(--green); display:inline-block; vertical-align:middle; margin-inline-end:8px; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
#status{ min-height:1.6em; color:var(--muted); font-size:.9rem; margin:6px 2px; }

/* Model card (CAMeLBERT) */
.model-card .head{ display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:8px; }
.model-card .title{ font-weight:700; color:var(--green); }
.badge-sim{ font-size:.75rem; padding:2px 10px; border-radius:99px; background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn); direction:ltr; }
.badge-live{ font-size:.75rem; padding:2px 10px; border-radius:99px; background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--ok); direction:ltr; }
.chips{ display:flex; flex-wrap:wrap; gap:4px; line-height:2; }
.chip{ display:inline-flex; flex-direction:column; align-items:center; padding:1px 8px 2px; border-radius:8px; border:1px solid var(--line); background:var(--glass-strong); font-family:'Amiri',serif; font-size:1.05rem; }
.chip small{ font:600 .62rem 'Inter',system-ui,sans-serif; direction:ltr; color:var(--muted); }
.chip.Ayah{ border-color:#8fd0b0; background:#EAF6EF; } .chip.Hadith{ border-color:#e5c871; background:#FFF6DA; }

.export{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0; }
.export button{ flex:0 1 auto; border:1px solid var(--gold); background:var(--glass-strong); color:var(--green); border-radius:12px; padding:8px 16px; font:700 .9rem 'Cairo',sans-serif; cursor:pointer; direction:ltr; }

/* Toast */
#toast{ position:fixed; inset-inline:0; bottom:calc(22px + env(safe-area-inset-bottom,0px)); margin-inline:auto; width:max-content; max-width:calc(100% - 32px); z-index:50;
  background:linear-gradient(135deg,#0F4C3A,#17694F); color:#fff; padding:12px 22px; border-radius:14px; font:700 .98rem 'Cairo',sans-serif; text-align:center;
  box-shadow:0 14px 36px rgba(15,76,58,.35); border:1px solid rgba(226,192,110,.6); opacity:0; transform:translateY(16px); pointer-events:none; transition:all .3s ease; }
#toast.show{ opacity:1; transform:none; } #toast.err{ background:linear-gradient(135deg,#8C1D18,#B3261E); }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } }

[hidden]{display:none !important}