* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: "Amiri", "Noto Naskh Arabic", system-ui, sans-serif; background:#f6f3ec; color:#2a2416; -webkit-text-size-adjust: 100%; }
a { color:#7a5b1a; }
img { max-width: 100%; height: auto; }

.topbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding: 12px 14px; background:#3b2e15; color:#f7efd9; position:sticky; top:0; z-index:10; }
.topbar .brand { color:#f7efd9; text-decoration:none; font-weight:700; font-size:1rem; flex:1 1 auto; min-width:0; }
.topbar nav { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; font-size:.95rem; }
.topbar nav a { color:#f7efd9; text-decoration:none; padding:4px 0; }
.topbar .who { opacity:.85; }
main { max-width: 1200px; margin: 16px auto; padding: 0 12px 40px; }
@media (min-width: 700px) {
  main { margin: 24px auto; padding: 0 16px 60px; }
  .topbar { padding: 14px 20px; }
  .topbar .brand { font-size: 1.1rem; }
}
h1,h2,h3 { color:#3b2e15; }
.muted { color:#7a6f52; }
.error { background:#fde2e1; border:1px solid #c86d6d; padding:10px; border-radius:6px; margin:10px 0; }
.success { background:#e2f4df; border:1px solid #6d9f66; padding:10px; border-radius:6px; margin:10px 0; }
.btn { display:inline-block; padding:10px 16px; background:#7a5b1a; color:#fff; border:none; border-radius:6px; cursor:pointer; text-decoration:none; font-size:1rem; }
.btn-secondary { background:#8c8069; }
.btn-link { background:transparent; color:#7a5b1a; text-decoration:underline; padding:6px 0; }

/* Stats */
.stats-page h1 { margin-bottom: 4px; }
.stats-page h2 { margin-bottom: 8px; }
.stats-overview { background:#fffdf3; border:1px solid #e5dcc1; border-radius:10px; padding: 14px 16px; margin-top: 10px; }
.stats-overview .progress-heading:first-child { margin-top: 2px; }
.stats-chart { margin-top: 14px; background:#fffdf3; border:1px solid #e5dcc1; border-radius:10px; padding: 12px; overflow-x:auto; }
.stats-chart svg { display:block; width:100%; height:auto; }
@media (min-width: 700px) { .stats-chart svg { min-width: 640px; } }
.kpi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 10px; }
.kpi { background:#fffdf3; border:1px solid #e5dcc1; border-radius:10px; padding: 14px 16px; }
.kpi-label { font-size: .85rem; color:#7a6f52; margin-bottom: 6px; }
.kpi-value { font-size: 2rem; font-weight: 700; color:#3b2e15; line-height: 1.1; }
.kpi-unit { font-size: .9rem; font-weight: 500; color:#7a6f52; }
.kpi-sub { font-size: .8rem; color:#8a7f62; margin-top: 6px; }

/* Login */
.login-wrap { max-width: 420px; margin: 30px auto; text-align:center; padding: 20px 14px; }
@media (min-width: 700px) { .login-wrap { margin: 60px auto; } }
.login-portrait { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 3px solid #7a5b1a; background:#fff; display:block; margin: 0 auto 18px; box-shadow: 0 4px 14px rgba(59,46,21,.25); }
.login-caption { color:#5d4a1a; font-size: .95rem; margin-top: -6px; margin-bottom: 18px; }
.pin-form { display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.pin-input { font-size: 2rem; padding:14px; text-align:center; letter-spacing: 10px; border-radius:8px; border:1px solid #c5ba9d; width:100%; }
.pin-form button { padding: 12px; font-size: 1.05rem; }

/* Intro */
.intro { background:#fffdf3; border:1px solid #e5dcc1; border-radius: 10px; padding: 16px; margin-bottom: 22px; display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.intro-portrait { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 3px solid #7a5b1a; margin: 0 auto; display:block; background:#fff; }
.intro-text { line-height: 1.9; font-size: 1.02rem; }
.intro-text h2 { margin-top: 0; }
.intro-text p { margin: 10px 0; text-align: justify; }
@media (min-width: 760px) {
  .intro { grid-template-columns: 180px 1fr; gap: 22px; padding: 22px; }
  .intro-portrait { width: 180px; height: 180px; margin: 0; }
}

/* Stages */
.stages h2 { margin-bottom: 8px; }
.stage-list { list-style:none; padding:0; display:grid; grid-template-columns: 1fr; gap:8px; }
@media (min-width: 600px) { .stage-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:10px; } }
.stage { background:#fff; border-radius:8px; padding:12px 14px; border:1px solid #e5dcc1; opacity:0.65; }
.stage .num { display:inline-block; width:28px; height:28px; line-height:28px; border-radius:50%; background:#d7cba7; text-align:center; margin-left:10px; font-weight:700; }
.stage .name { font-weight:600; }
.stage--done { opacity: .9; background:#eef6e4; }
.stage--done .badge.done { color:#4a8040; margin-right:10px; }
.stage--current { opacity:1; border-color:#7a5b1a; border-width:2px; background:#fffbe8; }
.stage--current a { text-decoration:none; color:inherit; display:block; }
.stage--current .stage-row { display:flex; align-items:center; flex-wrap:wrap; }
.stage--current .stage-cta { display:block; margin-top:10px; background:#7a5b1a; color:#fff; text-align:center; padding:10px 12px; border-radius:6px; font-weight:600; font-size:.95rem; }
.stage--current .stage-cta:hover { background:#8f6d20; }
.stage--current .stage-cta--pending { background:#8c8069; cursor:default; }
.stage--current .stage-cta--pending:hover { background:#8c8069; }
.stage--current .badge { background:#7a5b1a; color:#fff; padding:2px 8px; border-radius:12px; font-size:.8rem; margin-right:10px; }
.stage--pending { }

.stats { margin-top: 28px; background:#fff; padding:14px 18px; border-radius:8px; border:1px solid #e5dcc1; }

.progress { position:relative; background:#eee3c6; border:1px solid #d7cba7; border-radius:6px; height: 26px; overflow:hidden; margin: 10px 0 6px; }
.progress-bar { height:100%; background:linear-gradient(90deg,#7a5b1a,#a67c26); transition:width .4s; }
.progress-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:600; color:#2a2416; font-size:.9rem; }
.progress-heading { font-weight:600; color:#5d4a1a; margin:12px 0 2px; font-size:.95rem; }
.progress-secondary { opacity:.7; }
.progress-secondary .progress-bar { background:linear-gradient(90deg,#8c8069,#b0a080); }
.main-bar { background:linear-gradient(90deg,#4a8040,#6aaa50); }
.stats-row { display:flex; flex-wrap:wrap; gap:8px 20px; margin:8px 0; font-size:.95rem; }

.undo-last { background:#fffbe8; border:1px solid #e5dcc1; border-radius:6px; padding:8px 12px; margin-bottom:12px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.undo-last code { font-family: monospace; font-size:.85rem; }

/* Tri */
.tri-layout { display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 900px) { .tri-layout { grid-template-columns: 1fr 1.4fr; gap:20px; } }
.current .page-img { width: 100%; max-height: 60vh; object-fit: contain; background:#fff; border:1px solid #d7cba7; }
@media (min-width: 900px) { .current .page-img { max-height: 75vh; } }
.page-meta { font-family: monospace; color:#7a6f52; margin-bottom:8px; font-size:.9rem; word-break: break-all; }
.actions { margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.actions .btn { flex: 1 1 auto; min-width: 140px; text-align:center; }
.note-box { margin-top: 12px; background:#fffbe8; border:1px solid #e5dcc1; border-radius:6px; padding:8px 12px; }
.note-box summary { cursor: pointer; font-weight:600; color:#7a5b1a; }
.note-form { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.note-form textarea { width:100%; padding:10px; border:1px solid #c5ba9d; border-radius:6px; font-size:1rem; resize:vertical; }
.cand-grid { list-style:none; padding:0; display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; }
@media (min-width: 500px) { .cand-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:10px; } }
.cand button { width:100%; background:#fff; border:1px solid #d7cba7; border-radius:6px; padding:6px; cursor:pointer; display:block; -webkit-tap-highlight-color: transparent; }
.cand button:active { transform: scale(0.97); border-color:#7a5b1a; }
.cand button:hover { border-color:#7a5b1a; }
.cand img { width:100%; height: 180px; object-fit:contain; background:#fff; }
@media (min-width: 900px) { .cand img { height: 240px; } }
.cand-meta { display:block; font-size:.8rem; color:#7a6f52; margin-top:4px; word-break: break-all; }

/* Mushaf */
.mushaf-intro { background:#fffdf3; border:1px solid #e5dcc1; border-radius:8px; padding:12px 16px; margin:0 0 16px; line-height:1.8; color:#3b2e15; }
.chain-section { margin: 12px 0; }
.chain-header { padding: 6px 0; border-bottom: 1px solid #d7cba7; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chain-header h3 { display: inline; margin: 0; }
.chain-toolbar { display: inline-flex; gap: 4px; }
.chain-toolbar form { display: inline; margin: 0; }
.chain-toolbar button { padding: 2px 8px; font-size: .9rem; cursor: pointer; background: #fff; border: 1px solid #d7cba7; border-radius: 4px; line-height: 1; }
.chain-toolbar button:disabled { opacity: .35; cursor: default; }
.chain-toolbar button:hover:not(:disabled) { background: #f6f3ec; }
.chain-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.chain-row > .page-tile { flex: 1 1 0; min-width: 0; }
.chain-row > .chain-expand-btn { flex: 0 0 20%; min-width: 0; padding: 10px 6px; border: 1px dashed #b89b5d; background: #faf6ea; color: #7a5b1a; font-size: .75rem; cursor: pointer; border-radius: 4px; line-height: 1.2; align-self: stretch; }
.chain-row > .chain-expand-btn:hover { background: #f2ead1; }
.chain-row > .chain-expand-btn::before { content: "▸ "; }
.chain-row > .chain-middle-pages { display: none; }
.chain-collapse-btn { padding: 2px 8px; font-size: .85rem; cursor: pointer; background: #fff; border: 1px solid #d7cba7; border-radius: 4px; }
.chain-collapse-btn:hover { background: #f6f3ec; }
.chain-section:not(.chain-open) .chain-collapse-btn { display: none; }
.chain-section.chain-open .chain-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 500px) { .chain-section.chain-open .chain-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } }
.chain-section.chain-open .chain-row > .chain-expand-btn { display: none; }
.chain-section.chain-open .chain-row > .chain-middle-pages { display: contents; }
.chain-section.chain-open .chain-row > .chain-middle-pages > li { margin: 0; padding: 0; list-style: none; }
.mushaf-grid, .orphan-grid { list-style:none; padding:0; display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; }
@media (min-width: 500px) { .mushaf-grid, .orphan-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:10px; } }
.mushaf-grid img, .orphan-grid img { width:100%; height: 160px; object-fit:contain; background:#fff; border:1px solid #d7cba7; }
@media (min-width: 700px) { .mushaf-grid img, .orphan-grid img { height: 220px; } }
.chain-row > .page-tile-full img { height: auto; max-height: none; object-fit: contain; border: 1px solid #d7cba7; background: #fff; }
.mushaf-grid .meta { font-size:.75rem; color:#7a6f52; word-break: break-all; }
.mushaf-grid .by { display:block; color:#5d4a1a; }
.note-processed { opacity:.55; background:#f1ecd9; }
.page-notes { list-style:none; padding:0; margin:0 0 10px 0; display:flex; flex-direction:column; gap:6px; }
.page-notes li { background:#fff7e1; border:1px solid #e5d8a8; border-radius:6px; padding:8px 10px; }
.page-notes .note-text { white-space:pre-wrap; }
.page-notes .note-meta { font-size:.75rem; color:#7a6f52; margin-top:4px; }
.note-dlg-actions { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.note-dlg-actions button { font-size:.78rem; padding:2px 8px; }
.admin-panel button.danger { background:#c84b3a; color:#fff; border:1px solid #9b3a2d; }
.admin-panel button.danger:hover { background:#9b3a2d; }
.page-tile { width:100%; background:none; border:none; padding:0; cursor:pointer; font:inherit; color:inherit; text-align:inherit; display:flex; flex-direction:column; gap:4px; }
.page-tile:hover img { outline:2px solid #7a5b1a; }
#page-view { border:1px solid #c5ba9d; border-radius:8px; padding:16px; max-width:min(1280px, 96vw); width:min(1280px, 96vw); }
#page-view .page-view-compare { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap:14px; align-items:start; }
#page-view .page-view-warsh { background:#fffdf3; border:1px solid #e5dcc1; border-radius:6px; padding:10px 12px; max-height:70vh; overflow-y:auto; direction:rtl; box-sizing:border-box; }
#page-view .warsh-header { font-family: Amiri, serif; font-size:1rem; margin-bottom:6px; color:#5d4a1a; font-weight:600; }
#page-view .warsh-verse { font-family: Amiri, serif; font-size:1.35rem; line-height:1.9; margin:0 0 8px; }
#page-view .warsh-key { display:inline-block; min-width:3em; color:#7a5b1a; font-size:.8rem; font-family:monospace; vertical-align: middle; }
#page-view .warsh-text { }
#page-view .warsh-sub { font-size:.8rem; margin:6px 0; }
#page-view .ms-line { font-family: Amiri, serif; font-size:1.15rem; line-height:1.55; margin:0 0 6px; padding:3px 8px; border-radius:4px; background:#fffdf3; border-right:3px solid transparent; }
#page-view .ms-idx { display:inline-block; min-width:1.4em; margin-left:6px; padding:0 5px; font-family:monospace; font-size:.75rem; color:#7a5b1a; background:#f1e7c8; border-radius:3px; vertical-align:middle; user-select:none; }
#page-view .ms-identique { border-right-color:#c3dab1; }
#page-view .ms-tashkeel  { border-right-color:#e3d491; }
#page-view .ms-rasm      { border-right-color:#d88a2a; }
#page-view .ms-mot       { border-right-color:#c84b3a; }
#page-view .ms-na        { border-right-color:#c8c0a6; }
#page-view .ms-separator {
  text-align:center;
  color:#8a7540;
  background:#f6efdc;
  border-right-color:#b29856;
  font-style:italic;
  font-size:.95rem;
}
#page-view .ms-word      { }
#page-view .ms-word-diff {
  color:#9a1d14;
  background:#ffe1dc;
  padding:0 3px;
  border-radius:3px;
}
#page-view .page-view-img { display:block; width:100%; height:auto; max-height:70vh; object-fit:contain; object-position:top; background:#fff; border:1px solid #d7cba7; box-sizing:border-box; transition:opacity .15s; }
#page-view .page-view-img.img-loading { opacity:.15; }
@media (max-width: 900px) {
  #page-view .page-view-compare { grid-template-columns: 1fr; align-items:start; }
  #page-view .page-view-warsh { height:auto; max-height:40vh; }
  #page-view .page-view-stage { height:auto; }
  #page-view .page-view-img { height:auto; max-height:70vh; }
}
#page-view .page-view-filename { font-family:monospace; color:#7a5b1a; margin:8px 0 0; font-size:.85rem; }
#page-view .page-view-pos { font-size:.85rem; margin:2px 0 8px; color:#7a6f52; }
#page-view .page-view-by { font-size:.9rem; color:#7a5b1a; margin:2px 0; }
#page-view .page-view-by:empty { display:none; }
#page-view .page-view-notes { margin:8px 0; }
#page-view .page-view-unlink { margin:8px 0; }
.pin-change { max-width:420px; margin:16px auto; }
.pin-change .pin-form { display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.pin-change .pin-form label { display:flex; flex-direction:column; gap:6px; font-size:.95rem; }
.pin-change .pin-form input { padding:10px; font-size:1.1rem; letter-spacing:.3em; text-align:center; direction:ltr; }
.pin-change .pin-form button { align-self:flex-end; }
#page-view .page-view-stage { position:relative; touch-action:pan-y; user-select:none; }
#page-view .nav-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.5); color:#fff; border:0; width:44px; height:64px; font-size:2rem; line-height:1; cursor:pointer; border-radius:4px; }
#page-view .nav-btn:hover { background:rgba(0,0,0,.75); }
#page-view .nav-prev { right:6px; }
#page-view .nav-next { left:6px; }
#page-view textarea { width:100%; box-sizing:border-box; padding:8px; font-size:1rem; resize:vertical; }
#page-view .actions { display:flex; gap:10px; justify-content:flex-end; margin-top:10px; }

/* Admin */
.admin-panel { overflow-x: hidden; }
.admin-panel table { width:100%; border-collapse:collapse; background:#fff; margin:10px 0; font-size:.9rem; }
.admin-panel th, .admin-panel td { border:1px solid #e5dcc1; padding:6px 8px; text-align:left; vertical-align: top; }
.admin-panel section,
.admin-panel .admin-section { background:#fff; padding:14px; border:1px solid #e5dcc1; border-radius:8px; margin:14px 0; }
.admin-panel .admin-section > summary { cursor:pointer; list-style: revert; padding:4px 0; }
.admin-panel .admin-section > summary > h2 { display:inline-block; margin:0 6px; vertical-align: middle; }
.admin-panel .admin-section[open] > summary { margin-bottom: 8px; }
.admin-panel .inline { display:inline-block; margin-right:8px; margin-bottom:6px; }
.admin-panel button { padding:8px 12px; cursor:pointer; font-size:.9rem; }
.admin-panel input { padding: 8px; font-size: .95rem; width:100%; max-width:320px; box-sizing:border-box; }
.admin-panel .row-actions { display:flex; flex-wrap:wrap; gap:6px; }
.admin-panel .row-actions form { margin:0; }

@media (max-width: 760px) {
  .admin-panel section,
  .admin-panel .admin-section { padding: 10px; }
  .admin-panel table, .admin-panel thead, .admin-panel tbody, .admin-panel tr, .admin-panel th, .admin-panel td { display:block; border:none; }
  .admin-panel thead { display:none; }
  .admin-panel tbody tr { background:#fffdf3; border:1px solid #e5dcc1; border-radius:6px; margin-bottom:10px; padding:10px; }
  .admin-panel tbody td { padding:4px 0; border:none; font-size:.95rem; }
  .admin-panel tbody td::before { content: attr(data-label); font-weight:600; color:#5d4a1a; display:inline-block; min-width:110px; margin-left:6px; }
  .admin-panel tbody td[data-label=""]::before, .admin-panel tbody td.row-actions::before { display:none; }
  .admin-panel .row-actions { margin-top:6px; }
  .admin-panel code { word-break: break-all; }
}
.pin-cell { font-size: 1.05rem; letter-spacing: 2px; font-weight: 700; color:#3b2e15; }
.admin-panel th.sortable { cursor: pointer; user-select: none; }
.admin-panel th.sortable:hover { background:#f6f3ec; }
.link-pair { background:none; border:none; padding:0; color:#7a5b1a; text-decoration:underline; cursor:pointer; font:inherit; font-family: monospace; word-break: break-all; text-align: start; }
.link-pair:hover { color:#3b2e15; }
#link-preview { border:1px solid #c5ba9d; border-radius:8px; padding:16px; max-width:min(900px, 92vw); background:#fffdf3; }
#link-preview::backdrop { background: rgba(0,0,0,0.4); }
#link-preview .pair { direction:rtl; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#link-preview .pair img { width:100%; height:auto; background:#fff; border:1px solid #d7cba7; }
#link-preview .pair-caption { direction:rtl; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; font-family:monospace; font-size:.9rem; flex-wrap:wrap; }
#link-preview .pair-caption code { background:#f6f3ec; padding:2px 6px; border-radius:3px; color:#3b2e15; }
#link-preview .pair-arrow { font-size:1.4rem; font-weight:700; color:#7a5b1a; line-height:1; user-select:none; }
#link-preview .pair-arrow::before { content:"←"; }
#link-preview .actions { margin-top:12px; display:flex; gap:10px; justify-content:flex-end; }
.page-preview { background:none; border:none; padding:0; color:#7a5b1a; text-decoration:underline; cursor:pointer; font:inherit; font-family: monospace; word-break: break-all; text-align: start; }
.page-preview:hover { color:#3b2e15; }
#page-preview { border:1px solid #c5ba9d; border-radius:8px; padding:16px; max-width:min(720px, 92vw); background:#fffdf3; }
#page-preview::backdrop { background: rgba(0,0,0,0.4); }
#page-preview img { width:100%; height:auto; background:#fff; border:1px solid #d7cba7; }
#page-preview .page-preview-note { margin:12px 0 0; padding:10px 14px; background:#fffbe8; border:1px solid #e5dcc1; border-radius:6px; white-space:pre-wrap; font-family:"Amiri","Noto Naskh Arabic",serif; font-size:1rem; line-height:1.7; color:#3b2e15; }
#page-preview .actions { margin-top:12px; display:flex; gap:10px; justify-content:flex-end; }
.pager { display:flex; gap:16px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.pager a { padding:6px 10px; background:#fff; border:1px solid #d7cba7; border-radius:6px; text-decoration:none; }
.empty { text-align:center; margin-top:60px; padding: 0 16px; }

/* History page */
.history-panel .me-topbar { display:flex; justify-content:flex-end; margin-bottom:10px; }
.history-panel .me-topbar .pin-link { font-size:.9rem; }
.history-panel .history-head { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:6px; }
.history-panel .history-head h1 { margin:0; font-size:1.35rem; }
.history-panel .history-summary { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.history-panel .history-summary li { background:#fffdf3; border:1px solid #e5dcc1; padding:4px 10px; border-radius:14px; font-size:.9rem; color:#5d4a1a; }
.history-panel tbody tr:hover { background:#fffbe8; }
.history-panel .history-date { font-family: monospace; font-size:.85rem; color:#5d4a1a; white-space:nowrap; }
.history-panel code { background:#f6f3ec; padding:1px 5px; border-radius:3px; font-size:.85rem; }
.history-panel .link-pair { padding:4px 0; line-height:1.6; text-decoration:none; }
.history-panel .link-pair:hover code { background:#fffbe8; color:#3b2e15; }
.history-panel .link-pair code { color:#7a5b1a; text-decoration:underline; }
.history-panel .small { font-size:.8rem; margin-right:6px; }
.action-pill { display:inline-block; padding:2px 10px; border-radius:12px; font-size:.82rem; font-weight:600; white-space:nowrap; border:1px solid transparent; }
.action-pill.action-link_next     { background:#e2f4df; border-color:#a9cda1; color:#3e6b36; }
.action-pill.action-undo_link     { background:#fde2e1; border-color:#d9a9a7; color:#8a3a38; }
.action-pill.action-page_note     { background:#fff3d0; border-color:#e0c878; color:#6b5314; }
.action-pill.action-mark_terminal { background:#dfe9f6; border-color:#a3b9d8; color:#2f4c78; }
.action-pill.action-skip          { background:#eeeae0; border-color:#c5ba9d; color:#6b5f40; }

/* Form / button defaults */
input, button, select, textarea { font: inherit; }
button { cursor: pointer; }

/* Search page */
.search-page { max-width: 880px; margin: 0 auto; padding: 0 12px; }
.search-page h2 { margin-bottom: 12px; }
.search-form { display: flex; gap: 8px; margin-bottom: 8px; }
.search-form input[type=search] {
  flex: 1; padding: 10px 12px; border: 1px solid #d8cda3; border-radius: 8px;
  background: #fffdf3; font-size: 1.05rem;
}
.search-hint { font-size: .92rem; margin: 6px 0 18px; }
.search-hint code { background: #f6f3ec; padding: 1px 6px; border-radius: 3px; }
.search-err { color: #8a3a38; background: #fde2e1; border: 1px solid #d9a9a7;
              padding: 8px 12px; border-radius: 6px; }
.search-results { list-style: none; padding: 0; margin: 16px 0 0;
                  display: flex; flex-direction: column; gap: 10px; }
.search-result { border: 1px solid #e5dcc1; background: #fffdf3;
                 border-radius: 8px; padding: 10px 14px; }
.sr-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
           font-size: .95rem; color: #5d4a1a; margin-bottom: 6px; }
.sr-key { font-family: monospace; background: #f6f3ec; padding: 1px 8px;
          border-radius: 4px; font-weight: 600; }
.sr-sura { font-weight: 600; }
.sr-page { margin-inline-start: auto; text-decoration: none; color: #2f4c78;
           background: #dfe9f6; border: 1px solid #a3b9d8;
           padding: 3px 10px; border-radius: 12px; font-size: .88rem; }
.sr-page:hover { background: #c9dbef; }
.sr-text { margin: 0; font-family: 'Amiri', serif; font-size: 1.35rem;
           line-height: 1.9; direction: rtl; }