@font-face{
  font-family: "AmiriQuranCustom";
  src: url("/static/fonts/AmiriQuranCustom-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --shadow: 0 10px 26px rgba(15, 23, 42, .08);
  --brand:#2563eb;
  --brand2:#16a34a;
  --header:#fbfbfe;
  --rowhover: rgba(37,99,235,.06);
  --chipbg: rgba(255,255,255,.78);

  --blockOdd: rgba(22, 163, 74, 0.08);
  --blockEven: rgba(22, 163, 74, 0.04);

  --font-ar: "Amiri", "Noto Naskh Arabic", serif;
  --font-qc: "AmiriQuranCustom", "Amiri", "Noto Naskh Arabic", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

body{
  margin:0;
  font-family: var(--font-ui);
  background:
    radial-gradient(1100px 700px at 15% 5%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, rgba(22,163,74,.10), transparent 55%),
    var(--bg);
  color:var(--text);
  direction: rtl;
  text-align:right;
}

a{ color:inherit; text-decoration:none; }

.arabic{
  font-family: var(--font-ar);
  letter-spacing: 0;
}

.arabicQC{
  font-family: var(--font-qc);
  letter-spacing: 0;
  line-height: 1.55;
}

.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(246,247,251,.86);
  border-bottom:1px solid var(--border);
}
.navInner{
  max-width:1200px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:12px;
}
.brand{
  font-weight:800;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.dot{
  width:10px; height:10px; border-radius:50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 0 16px rgba(37,99,235,.25);
}
.menu{ margin-right:auto; display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:999px;
  font-size:13px;
  color:var(--muted);
  background: var(--chipbg);
}
.chip:hover{ border-color: rgba(37,99,235,.25); color:var(--text); }

.wrap{
  max-width:1200px;
  margin:10px auto;
  padding:12px 16px 28px;
}

.hero{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  padding: 1px 6px;
}
h1{ margin:0; font-size:17px; line-height:1.25; }
.subtitle{
  margin:8px 0 0;
  color:var(--muted);
  font-size:16px;
  max-width:900px;
}
.btn{
  border:1px solid var(--border);
  background: #fff;
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.btn:hover{ border-color: rgba(37,99,235,.25); }
.btnPrimary{
  border-color: rgba(37,99,235,.25);
  background: rgba(37,99,235,.08);
}

.card{
  margin-top:14px;
  background: var(--card);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: visible;
}
.cardHeader{
  padding:12px 12px 10px;
  border-bottom:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  background: rgba(255,255,255,.92);
}
.left, .right{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.headerFilters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

.headerFilters .mini{
  margin-inline-start: 2px;
  margin-inline-end: -2px;
  white-space: nowrap;
}

.headerFilters input,
.headerFilters select,
.headerFilters .btn{
  height: 38px;
  border-radius: 12px;
}

.headerFilters input{
  min-width: 200px;
  padding-inline: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
}

.headerFilters input::placeholder{
  color: var(--muted);
}

.headerFilters input:focus,
.headerFilters select:focus{
  border-color: rgba(37,99,235,.28);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

.headerFilters select{
  min-width: 150px;
  padding-inline: 10px 28px;
}

.headerFilters .btn{
  padding: 0 14px;
  white-space: nowrap;
}
.status{
  color:var(--muted);
  font-size:13px;
}
select, input[type="number"]{
  border:1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding:9px 10px;
  border-radius:12px;
  outline:none;
  font-size:13px;
}

.tableWrap{
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  overflow-x: auto;
  border-radius:18px;
  position: relative;
}

table{
  width:100%;
  border-collapse:collapse;
  min-width: 980px;
  background:#fff;
  table-layout: fixed;
}

th, td { box-sizing: border-box; }

thead th{
  position: sticky;
  top: 0;
  padding:10px 10px;
  z-index: 20;
  background: var(--header);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

tbody td{
  border-bottom:1px solid #eef2f7;
  padding:10px 10px;
  font-size:16px;
  vertical-align:top;
  overflow:hidden;
  text-overflow: ellipsis;
}

.tdText{
  text-align:right;
  direction:rtl;
  unicode-bidi: plaintext;
  white-space: normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.45;
}

.tdCenter{
  text-align:center;
  direction:ltr;
  unicode-bidi:isolate;
  white-space: nowrap;
}

.merged{ font-weight:800; }
.mutedCell{ color: var(--muted); font-size:13px; }

tbody tr.block-odd td{ background: var(--blockOdd); }
tbody tr.block-even td{ background: var(--blockEven); }
tbody tr:hover td{ background: var(--rowhover) !important; }

.qiraahTip{ cursor: help; }
.qiraahTip:hover{
  text-decoration: underline;
  text-decoration-color: rgba(37,99,235,.35);
  text-underline-offset: 3px;
}

.harfClick{ cursor: pointer; }
.harfClick:hover{
  text-decoration: underline;
  text-decoration-color: rgba(37,99,235,.35);
  text-underline-offset: 3px;
}

.pager{
  padding:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--border);
  background: var(--header);
}
.pager .group{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.mini{ color:var(--muted); font-size:13px; }

.shimmer{
  height: 10px;
  width: 220px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef2ff, #e0e7ff, #eef2ff);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer{ 0%{background-position:0% 0} 100%{background-position:200% 0} }

.tickChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  border: 1px solid transparent;
  user-select:none;
  font-family: var(--font-ui);
}
.tickChip.hasRawi{
  background: rgba(22, 163, 74, 0.14);
  border-color: rgba(22, 163, 74, 0.30);
  color: #166534;
  cursor: help;
}
.tickChip.noRawi{
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.25);
  color: #64748b;
}
.tickChip.hasRawi:hover{
  background: rgba(22, 163, 74, 0.20);
  border-color: rgba(22, 163, 74, 0.38);
  box-shadow: 0 1px 10px rgba(22, 163, 74, 0.12);
}

@media (max-width:720px){
  h1{ font-size:20px; }
  table{ min-width: 880px; }
  thead th{ padding:9px 8px; }
  tbody td{ padding:9px 8px; }

  .headerFilters{
    gap: 10px;
  }

  .headerFilters input{
    min-width: 160px;
  }
}

.tt{
  position: fixed;
  z-index: 9999;
  max-width: 380px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(15,23,42,.14);
  color: #0f172a;
  font-size: 13px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.tt.show{ opacity: 1; transform: translateY(0); }
.tt .tTitle{
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 6px;
  color: #0f172a;
  display:flex;
  align-items:center;
  gap:8px;
}
.tt .tDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(37,99,235,.95);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.tt[data-kind="rawi"] .tDot{
  background: rgba(22,163,74,.95);
  box-shadow: 0 0 0 3px rgba(22,163,74,.14);
}
.tt .tBody{
  white-space: normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  direction: rtl;
  unicode-bidi: plaintext;
}
.tt[data-kind="qiraah"] .tTitle span:last-child{ font-size: 16px; }

:root{
  --paper-bg: #f1e2c8;
  --paper-edge: #d2b889;
  --ink-main: #241c12;
  --ink-muted: #5a4a36;
  --paper-highlight: rgba(155,115,45,0.34);
  --paper-shadow: 0 22px 60px rgba(15,23,42,.22);
}

.modal{
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(20,16,10,.46);
  backdrop-filter: blur(2px);
}
.modal.show{ display:flex; }

.modalBox{
  width: min(920px, 96vw);
  max-height: min(78vh, 720px);
  overflow: auto;
  position: relative;
  background-attachment: local;
  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(120,70,20,.18), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(110,60,15,.14), transparent 55%),
    radial-gradient(700px 500px at 100% 100%, rgba(140,85,25,.12), transparent 58%),
    repeating-radial-gradient(circle at 20% 30%,
      rgba(90,55,15,.030) 0 1px,
      transparent 1px 9px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.016),
      rgba(0,0,0,.016) 1px,
      transparent 1px,
      transparent 6px
    ),
    var(--paper-bg);

  border: 1px solid var(--paper-edge);
  border-radius: 18px;
  box-shadow: var(--paper-shadow);
  padding: 12px 14px 14px;
  outline: 1px solid rgba(255,255,255,.35);
  outline-offset: -6px;
}

.modalHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(120,80,25,.45);
}

.modalTitle{
  font-weight: 800;
  font-size: 15px;
  color: var(--ink-main);
  direction: rtl;
  text-align: right;
  letter-spacing: .2px;
}

.modalClose{
  border: 1px solid rgba(80,60,25,.25);
  background: inherit;
  color: var(--ink-main);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
  font-size: 13px;
  backdrop-filter: blur(6px);
}

.modalBody{
  padding-top: 12px;
  direction: rtl;
  text-align: right;
  background: inherit;
}

.ayatFull{
  font-family: var(--font-qc);
  color: var(--ink-main);
  font-size: 23px;
  line-height: 2.05;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

mark.hl,
.hl{
  background: var(--paper-highlight);
  box-shadow:
    inset 0 -2px 0 rgba(140,120,60,.32),
    0 1px 0 rgba(255,255,255,.35);
  border-radius: 8px;
  padding: 0 4px;
}

.modalMeta{
  margin-top: 12px;
  color: var(--ink-muted);
  font-size: 13px;
  direction: rtl;
  text-align: right;
  border-top: 1px dashed rgba(120,80,25,.45);
  padding-top: 10px;
  font-family: var(--font-ar);
}

.modalBox::before,
.modalBox::after{
  content:"";
  position:absolute;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(120,92,40,.25);
  background: rgba(255,255,255,.25);
  border-radius: 6px;
  transform: rotate(8deg);
}
.modalBox::before{ top: 10px; left: 10px; }
.modalBox::after{ bottom: 10px; right: 10px; transform: rotate(-10deg); }

.msGrid{
  display: block;
  position: relative;
}

.msAyatPane{
  top: 0;
  z-index: 5;
  padding: 10px 2px 12px;
  background: inherit;
  border-bottom: 1px dashed rgba(120,80,25,.40);
  background-clip: padding-box;
}

.msAyatPane .ayatFull{
  padding: 2px 2px 0;
}

.msRefsPane{
  padding-top: 12px;
  margin-top: 10px;
  background: transparent;
  border: none;
}

.msRefsHead{
  display:flex;
  flex-direction: row-reverse;
  align-items:center;
  justify-content: flex-end;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px dotted rgba(120,80,25,.35);
}

.msRefsTitle{
  font-family: var(--font-ar);
  font-size: 16px;
  font-weight: 900;
  color: var(--ink-main);
  direction: rtl;
  opacity: .90;
}

.msRefsBody{
  font-family: var(--font-ar);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-main);
  direction: rtl;
  unicode-bidi: plaintext;
}

.refItem{
  padding: 0;
  background: transparent;
}

.refItem + .refItem{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dotted rgba(120,80,25,.30);
}

.refNo{
  font-size: 11.5px;
  color: var(--ink-muted);
  float: left;
}

.refQuote{
  direction: rtl;
  unicode-bidi: plaintext;
}

.refFoot{
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-muted);
}

.msMeta{
  margin-top: 14px;
}

th.col-parent, td.col-parent { width: 22%; }
th.col-harf,   td.col-harf   { width: 24%; }
th.col-qiraat, td.col-qiraat { width: 24%; }

th.col-qari, td.col-qari{
  width: 10%;
  min-width: 46px;
  text-align: center;
  white-space: normal;
}

td.col-qari .tickChip{
  min-width: 26px;
  white-space: nowrap;
}

tbody tr.block-start td{
  border-top: 2px solid rgba(15, 23, 42, 0.18);
}