/* ============================================================
   الثيم الموحد المجمد — منقول حرفيًا من theme-preview.html
   خلفية 0a0a0a · حواف 8px · بلا ظلال · IBM Plex Sans Arabic + JetBrains Mono
   ============================================================ */
:root {
  --bg: #0a0a0a;
  --surface-raised: #191919;
  --border: #2f3336;
  --border-focus: rgba(255, 255, 255, 0.25);
  --text-main: #e7e9ea;
  --text-muted: #71767b;
  --text-dim: #536471;
  --emerald: #00ba7c; --emerald-bg: rgba(0, 186, 124, 0.12);
  --rose: #f4212e;    --rose-bg: rgba(244, 33, 46, 0.12);
  --sky: #1d9bf0;     --sky-bg: rgba(29, 155, 240, 0.12);
  --pink-unknown: #f472b6;
  --teal-review: #2dd4bf;
  --radius: 8px;
  --radius-pill: 9999px;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'IBM Plex Sans Arabic', -apple-system, 'Segoe UI', sans-serif; }
html { font-size: 16px; }
body { background: var(--bg); color: var(--text-main); min-height: 100vh; line-height: 1.9; letter-spacing: 0 !important; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(29, 155, 240, 0.35); }
.mono { font-family: 'JetBrains Mono', monospace; }

/* قواعد الواجهة العربية المعتمدة: عزل الأجنبية داخل العربية */
.en-inline { direction: ltr; unicode-bidi: isolate; display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.92em; }

/* الشريط العلوي */
.topbar { position: sticky; top: 0; z-index: 5; background: rgba(10,10,10,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; gap: 0.5rem; flex-wrap: wrap; }
.logo { font-weight: 700; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.25rem 0.8rem; text-decoration: none; color: var(--text-main); }
.nav { display: flex; gap: 0.15rem; flex-wrap: wrap; }
.nav a { color: var(--text-muted); text-decoration: none; font-size: 0.88rem; padding: 0.35rem 0.7rem; border-radius: var(--radius-pill); transition: 0.15s; }
.nav a:hover { color: var(--text-main); background: var(--surface-raised); }
.nav a.active { color: var(--text-main); font-weight: 500; background: var(--surface-raised); }
.nav a.frozen { color: var(--text-dim); }

main { max-width: 640px; margin: 0 auto; padding: 1.25rem 1rem 4.5rem; display: flex; flex-direction: column; gap: 1rem; }

/* البطاقات */
.card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.05rem; }
.card-label { color: var(--text-muted); font-size: 0.78rem; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.chip { font-size: 0.72rem; padding: 0.1rem 0.55rem; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }

/* الأزرار */
.btn { cursor: pointer; font-size: 0.92rem; font-weight: 500; border-radius: var(--radius-pill); padding: 0.6rem 1.3rem; border: 1px solid transparent; font-family: inherit; text-decoration: none; display: inline-block; }
.btn-primary { background: var(--sky); color: #fff; }
.btn-primary:hover { background: #1a8cd8; }
.btn-outline { background: transparent; color: var(--text-main); border-color: var(--border); }
.btn-outline:hover { border-color: var(--border-focus); background: var(--surface-raised); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* أزرار التقييم الرباعية: السماوي يتلاشى تدريجيًا (نسيت 100 → سهل 30) */
.ratings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; margin-top: 0.9rem; }
.rate { cursor: pointer; border: 1px solid transparent; border-radius: var(--radius); padding: 0.6rem 0.15rem 0.45rem; font-family: inherit; font-size: 0.9rem; font-weight: 700; color: #fff; }
.rate:hover { filter: brightness(1.18); }
.rate small { display: block; font-weight: 400; font-size: 0.66rem; opacity: 0.85; margin-top: 2px; }
.rate.r1 { background: var(--sky); }
.rate.r2 { background: rgba(29, 155, 240, 0.72); }
.rate.r3 { background: rgba(29, 155, 240, 0.48); border-color: rgba(29, 155, 240, 0.30); }
.rate.r4 { background: rgba(29, 155, 240, 0.30); border-color: rgba(29, 155, 240, 0.45); }
@media (max-width: 480px) { .ratings { grid-template-columns: repeat(2, 1fr); } }

/* القرار الثلاثي: اعتماد زمردي، رفض وردي، تعديل محايد */
.tri { display: flex; gap: 0.45rem; margin-top: 0.7rem; }
.tri button { flex: 1; cursor: pointer; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text-main); padding: 0.5rem; font-family: inherit; font-size: 0.86rem; }
.tri button:hover { background: var(--surface-raised); border-color: var(--border-focus); }
.tri .approve { color: var(--emerald); border-color: rgba(0,186,124,0.4); }
.tri .reject { color: var(--rose); border-color: rgba(244,33,46,0.4); }

/* القارئ الإنجليزي LTR وتلوين الكلمات الثلاثي (بلا خط تحت الكلمات) */
.reader-en { direction: ltr; text-align: left; font-size: 1.02rem; line-height: 2.05; }
.w-unknown { color: var(--pink-unknown); cursor: pointer; }
.w-review { color: var(--teal-review); cursor: pointer; }
.w-nogloss { color: var(--rose); cursor: pointer; text-decoration: dotted underline; }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--text-muted); font-size: 0.76rem; }
.legend i { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; margin-left: 0.3em; }

/* لوح الكلمة السفلي */
.sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: var(--surface-raised); border-top: 1px solid var(--border); border-radius: 14px 14px 0 0; padding: 1.1rem 1.2rem calc(1.1rem + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform 0.22s ease; max-height: 62vh; overflow-y: auto; }
.sheet.open { transform: translateY(0); }
.sheet h3 { direction: ltr; text-align: left; font-family: 'JetBrains Mono', monospace; margin-bottom: 0.5rem; }
.gloss-row { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.5rem 0; border-top: 1px dashed var(--border); }
.gloss-pos { color: var(--text-dim); font-size: 0.75rem; min-width: 3.4rem; }
.gloss-ex { color: var(--text-muted); font-size: 0.78rem; direction: ltr; text-align: left; }

/* البطاقة التعليمية */
.review-q { font-size: 1.18rem; font-weight: 700; line-height: 1.85; }
details.answer { margin-top: 0.7rem; }
details.answer summary { cursor: pointer; color: var(--text-muted); font-size: 0.88rem; user-select: none; list-style: none; }
details.answer summary::-webkit-details-marker { display: none; }
details.answer summary::before { content: "▸ "; }
details.answer[open] summary::before { content: "▾ "; }
details.answer .a { margin-top: 0.55rem; padding-top: 0.65rem; border-top: 1px dashed var(--border); line-height: 2; }

textarea.write-answer, input.write-answer { width: 100%; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-main); font-family: inherit; padding: 0.6rem 0.75rem; font-size: 0.95rem; resize: vertical; min-height: 4.5rem; }
textarea.write-answer:focus, input.write-answer:focus { outline: none; border-color: var(--border-focus); }

/* الكود ملون دائمًا (الاستثناء الوحيد لقاعدة التقليل) */
pre.code { direction: ltr; text-align: left; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem; font-size: 0.82rem; line-height: 1.8; overflow-x: auto; font-family: 'JetBrains Mono', monospace; color: var(--text-main); }
.tk { color: #58a6ff; } /* وسوم/كلمات مفتاحية سماوية */
.ts { color: var(--emerald); } /* قيم زمردية */
.tc { color: var(--text-dim); } /* تعليقات */

/* شريط التقدم */
.progress { height: 6px; background: var(--surface-raised); border-radius: var(--radius-pill); overflow: hidden; }
.progress > div { height: 100%; background: var(--sky); transition: width 0.3s; border-radius: var(--radius-pill); }

/* رسائل */
.empty { text-align: center; color: var(--text-dim); padding: 2.5rem 1rem; line-height: 2.2; }
.flash-ok { border-color: rgba(0,186,124,0.5); }
.flash-bad { border-color: rgba(244,33,46,0.5); }

/* صفوف القوائم */
.row-item { display: flex; justify-content: space-between; align-items: center; gap: 0.7rem; padding: 0.7rem 0.2rem; border-top: 1px solid var(--border); text-decoration: none; color: var(--text-main); }
.row-item:first-of-type { border-top: none; }
.row-title { font-size: 0.95rem; direction: ltr; text-align: left; flex: 1; }
.row-sub { color: var(--text-dim); font-size: 0.74rem; }
.status-chip { min-width: 5.2rem; text-align: center; }
.st-confident { color: var(--emerald); border-color: rgba(0,186,124,0.4); }
.st-assisted { color: #ff7a17; border-color: rgba(255,122,23,0.4); }
.st-locked { color: var(--text-dim); }
.st-read { color: var(--text-muted); }

footer.app-footer { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(10,10,10,0.95); backdrop-filter: blur(8px); border-top: 1px solid var(--border); display: flex; justify-content: space-around; padding: 0.35rem 0 env(safe-area-inset-bottom); z-index: 15; }
.tabbar a { color: var(--text-dim); text-decoration: none; font-size: 0.72rem; padding: 0.3rem 0.9rem; border-radius: var(--radius-pill); text-align: center; }
.tabbar a.active { color: var(--sky); }