* { 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; }

/* 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 .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; }

.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-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; } }
.mushaf-grid .meta { font-size:.75rem; color:#7a6f52; word-break: break-all; }
.mushaf-grid .by { display:block; color:#5d4a1a; }

/* 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 { background:#fff; padding:14px; border:1px solid #e5dcc1; border-radius:8px; margin:14px 0; }
.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 { 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 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#link-preview img { width:100%; height:auto; background:#fff; border:1px solid #d7cba7; }
#link-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 .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; }