/* ===== Variables ===== */
:root {
    --primary: #3B4FCC;
    --primary-dark: #1A2A8F;
    --primary-light: #6B7EF0;
    --accent: #4EC5B1;
    --bg: #f2f5f9;
    --card: #fff;
    --text: #1E293B;
    --text-2: #475569;
    --text-3: #94A3B8;
    --border: #E2E8F0;
    --border-light: #F1F5F9;
    --shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
    --radius: 10px;
    --radius-sm: 6px;
    --ease: cubic-bezier(.4,0,.2,1);
}

/* ===== Fonts ===== */
@font-face { font-family:'IRANSans'; src:url('../fonts/IRANSansX/woff2/IRANSansX-Regular.woff2') format('woff2'), url('../fonts/IRANSansX/woff/IRANSansX-Regular.woff') format('woff'); font-weight:normal; }
@font-face { font-family:'IRANSans'; src:url('../fonts/IRANSansX/woff2/IRANSansX-Bold.woff2') format('woff2'), url('../fonts/IRANSansX/woff/IRANSansX-Bold.woff') format('woff'); font-weight:bold; }
@font-face { font-family:'IRANSans'; src:url('../fonts/IRANSansX/woff2/IRANSansX-Medium.woff2') format('woff2'), url('../fonts/IRANSansX/woff/IRANSansX-Medium.woff') format('woff'); font-weight:500; }
@font-face { font-family:'IRANSans'; src:url('../fonts/IRANSansX/woff2/IRANSansX-Light.woff2') format('woff2'), url('../fonts/IRANSansX/woff/IRANSansX-Light.woff') format('woff'); font-weight:300; }
@font-face { font-family:'KFGQPC Uthman Taha Naskh'; src:url('../fonts/KFGQPC_Uthman_Taha_Naskh_Regular.ttf') format('truetype'); }
@font-face { font-family:'DigitalKhatt'; src:url('../fonts/oldmadina.woff2') format('woff2'), url('../fonts/digitalkhatt.otf') format('opentype'); }
@font-face { font-family:'B Lotus'; src:url('../fonts/blotus-fixed.ttf') format('truetype'); font-weight:normal; }
@font-face { font-family:'B Lotus'; src:url('../fonts/blotus-bold-fixed.ttf') format('truetype'); font-weight:bold; }

/* ===== Reset ===== */
*, *::before, *::after { box-sizing:border-box; }
html { height:100%; }
body {
    height: 100%;
    margin: 0;
    font-family: 'IRANSans', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family:inherit; font-size:inherit; }
ul, ol { margin:0; padding:0; }

/* ===== App shell ===== */
body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.app-header {
    flex-shrink: 0;
    height: 52px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 16px;
    box-shadow: 0 2px 12px rgba(26,42,143,.2);
    z-index: 100;
}
.app-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    background: var(--bg);
    position: relative;
}

/* ===== Header ===== */
.brand {
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.brand:hover { opacity:.85; color:#fff; }

/* Search bar */
.search-bar {
    flex: 1;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 99px;
    padding: 0 6px 0 14px;
    height: 36px;
    gap: 8px;
    min-width: 0;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    transition: box-shadow .2s var(--ease);
}
html[dir="ltr"] .search-bar { padding: 0 14px 0 6px; }
.search-bar:focus-within { box-shadow: 0 1px 6px rgba(0,0,0,.06), 0 0 0 2px rgba(255,255,255,.3); }
.search-icon { color:var(--text-3); font-size:.82rem; flex-shrink:0; }
.search-input { flex:1; border:none; outline:none; background:none; color:var(--text); min-width:0; }
.search-input::placeholder { color:var(--text-3); }
.search-scope {
    flex-shrink: 0;
    border: none;
    outline: none;
    background: var(--border-light);
    color: var(--text-2);
    font-size: .76rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 99px;
    cursor: pointer;
}

/* Header end */
.header-end { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.zoom-controls { display:flex; align-items:center; gap:2px; }
.icon-btn {
    background:none; border:none;
    color: rgba(255,255,255,.75);
    width:30px; height:30px;
    display:flex; align-items:center; justify-content:center;
    border-radius: var(--radius-sm);
    cursor:pointer;
    transition: all .15s var(--ease);
    font-size:.8rem;
}
.icon-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
.icon-btn:active { transform:scale(.9); }
.zoom-label {
    color: rgba(255,255,255,.55);
    font-size: .75rem;
    min-width: 36px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    user-select: none;
}
/* Settings dropdown */
.settings-wrap { position:relative; }
.settings-menu {
    display:none; position:absolute;
    top:100%; inset-inline-end:0;
    margin-top:6px; padding:6px 0;
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius-sm);
    box-shadow:0 6px 20px rgba(0,0,0,.1);
    min-width:180px; z-index:200;
}
.settings-menu.open { display:block; }
.settings-item {
    display:flex; align-items:center; gap:8px;
    padding:7px 14px; font-size:.8rem; color:var(--text-2);
    cursor:pointer; transition:background .1s;
    white-space:nowrap;
}
.settings-item:hover { background:var(--border-light); }
.settings-item input[type="checkbox"],
.settings-item input[type="radio"] {
    accent-color:var(--primary); width:14px; height:14px; cursor:pointer;
}
.settings-divider { height:1px; background:var(--border-light); margin:6px 0; }
.settings-section-label {
    padding:4px 14px; font-size:.72rem; color:var(--text-3);
    font-weight:600; text-transform:uppercase; letter-spacing:.04em;
}
.settings-tradition-row {
    display:flex; align-items:center; justify-content:space-between;
    padding-inline-end:10px;
}
.settings-tradition-row .settings-item { flex:1; }
.tradition-color {
    width:22px; height:22px; padding:0; cursor:pointer;
    border:1px solid var(--border); border-radius:50%;
    background:none; -webkit-appearance:none; appearance:none;
    overflow:hidden;
}
.tradition-color::-webkit-color-swatch { border:none; border-radius:50%; }
.tradition-color::-webkit-color-swatch-wrapper { padding:0; border:none; }
.tradition-color::-moz-color-swatch { border:none; border-radius:50%; }
.tradition-color:disabled { opacity:.35; cursor:not-allowed; }

/* Tab context menu */
.tab-ctx {
    display:none; position:fixed; z-index:300;
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius-sm);
    box-shadow:0 6px 20px rgba(0,0,0,.12);
    padding:4px 0; min-width:150px;
}
.tab-ctx.open { display:block; }
.ctx-item {
    display:block; width:100%;
    padding:7px 14px; font-size:.8rem;
    color:var(--text-2); background:none; border:none;
    text-align:start; cursor:pointer;
    transition:background .1s;
}
.ctx-item:hover { background:var(--border-light); color:var(--text); }

.lang-switch { display:flex; gap:2px; }
.lang-btn {
    font-size:.75rem; padding:3px 8px;
    color:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.18);
    border-radius:4px; background:none; cursor:pointer;
    transition: all .15s var(--ease);
}
.lang-btn:hover { color:#fff; border-color:rgba(255,255,255,.4); }
.lang-btn.active-lang { color:#fff; background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.6); }

/* ===== Sidebar ===== */
.sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 50;
    transition: width .2s var(--ease);
}
.sidebar.resizing { transition: none; }
.sidebar.collapsed .tree-filter,
.sidebar.collapsed .tree-wrap,
.sidebar.collapsed .filters-section { display: none; }
.sidebar-resizer {
    width: 5px;
    flex-shrink: 0;
    background: var(--border-light);
    cursor: ew-resize;
    position: relative;
    z-index: 49;
    transition: background .15s var(--ease);
}
.sidebar-resizer:hover,
.sidebar-resizer.dragging { background: var(--primary-light); }
.collapse-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px; height: 40px;
    border-radius: 4px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-3);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: .72rem;
    padding: 0;
    z-index: 2;
}
.collapse-handle:hover { color: var(--text); border-color: var(--primary-light); }
.collapse-handle i { transition: transform .2s var(--ease); }
html[dir="rtl"] .collapse-handle i { transform: rotate(180deg); }
html[dir="rtl"] .sidebar.collapsed + .sidebar-resizer .collapse-handle i { transform: rotate(0deg); }
html[dir="ltr"] .sidebar.collapsed + .sidebar-resizer .collapse-handle i { transform: rotate(180deg); }
@media (max-width: 992px) {
    .sidebar-resizer { display: none; }
}
.sidebar-backdrop { display:none; }
.sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--card);
    border-inline-end: 1px solid var(--border);
    overflow: hidden;
    padding-top: 0;
}
.sidebar-head {
    display:none; padding:0; margin:0; height:0; overflow:hidden;
}
@media (max-width:992px) {
    .sidebar-head {
        display:flex; align-items:center; justify-content:flex-end;
        padding:6px 10px; height:auto; overflow:visible;
        border-bottom:1px solid var(--border);
        flex-shrink:0;
    }
}
.sidebar-close-btn {
    display:none;
    background:none; border:none; color:var(--text-3); cursor:pointer;
    font-size:.9rem; padding:4px;
}

/* Tree filter */
.tree-filter {
    display:flex; align-items:center; gap:8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink:0;
    margin-top:0;
}
.tree-filter i { color:var(--text-3); font-size:.78rem; }
.tree-filter input {
    flex:1; border:none; outline:none; background:none;
    color:var(--text); font-size:.84rem; min-width:0;
}
.tree-filter input::placeholder { color:var(--text-3); }

/* Book tree */
.tree-wrap { flex:1; overflow-y:auto; padding:2px 0; }
.book-tree, .subtree { list-style:none; padding:0; margin:0; }
.subtree { padding-inline-start:18px; display:none; }
.tree-node.open > .subtree { display:block; }

.tree-row {
    display:flex; align-items:center; gap:6px;
    padding: 5px 16px;
    cursor:pointer;
    font-size:.84rem; color:var(--text-2);
    transition: background .12s var(--ease), color .12s var(--ease);
    user-select:none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tree-row span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.tree-row:hover { background:var(--border-light); color:var(--text); }
.tree-row.active { background:rgba(59,79,204,.07); color:var(--primary); font-weight:500; }
.tree-hadith-book[data-tradition-color] {
    background: color-mix(in srgb, var(--tradition-color) 12%, transparent);
}
.tree-hadith-book[data-tradition-color]:hover {
    background: color-mix(in srgb, var(--tradition-color) 22%, transparent);
}
.tree-hadith-book[data-tradition-color].active {
    background: color-mix(in srgb, var(--tradition-color) 28%, transparent);
    color: var(--text);
}
.tree-row .arrow {
    font-size:.65rem; color:var(--text-3);
    transition: transform .2s var(--ease);
    width:12px; text-align:center; flex-shrink:0;
}
.tree-node:not(.open) > .tree-row .arrow { transform:rotate(-90deg); }
html[dir="ltr"] .tree-node:not(.open) > .tree-row .arrow { transform:rotate(-90deg); }
.tree-row .folder-icon { display:none; }
.tree-row .leaf-icon { display:none; }

/* Tree toggle — dot indicator (pushed to end of row) */
.tree-check {
    -webkit-appearance:none; appearance:none;
    flex-shrink:0; width:12px; height:12px;
    border-radius:50%; border:2px solid var(--text-3);
    background:transparent; cursor:pointer;
    margin:0; margin-inline-start:auto; padding:0;
    transition:all .15s var(--ease);
}
.tree-check:checked {
    background:var(--primary); border-color:var(--primary);
    box-shadow:0 0 0 2px rgba(59,79,204,.15);
}
.tree-check:indeterminate {
    background:var(--primary-light); border-color:var(--primary-light);
    box-shadow:0 0 0 2px rgba(107,126,240,.15);
}
.tree-check:hover { border-color:var(--primary); }

/* Filters section */
.filters-section { flex-shrink:0; border-top:1px solid var(--border); }
.section-header {
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; border:none; background:none; cursor:pointer;
    font-weight:600; font-size:.86rem; color:var(--text);
    transition: color .15s;
}
.section-header:hover { color:var(--primary); }
.section-header i { font-size:.65rem; color:var(--text-3); transition:transform .2s var(--ease); }
.section-header.collapsed i { transform:rotate(-90deg); }
.section-body { padding:0 16px 14px; }
.section-body.hidden { display:none; }

.filter-block { margin-bottom:12px; }
.filter-block:last-child { margin-bottom:0; }
.filter-label { font-size:.8rem; font-weight:600; color:var(--text-2); margin-bottom:4px; }

.filter-block .form-check { padding:3px 0; margin:0; min-height:auto; }
.filter-block .form-check-label { font-size:.82rem; color:var(--text-2); cursor:pointer; }
.filter-block .form-check-input:checked { background-color:var(--primary); border-color:var(--primary); }
.filter-block .form-check-input:focus { box-shadow:0 0 0 2px rgba(59,79,204,.12); border-color:var(--primary-light); }

/* RTL form-switch fix */
html[dir="rtl"] .form-switch { padding-right:2.5em; padding-left:0; }
html[dir="rtl"] .form-switch .form-check-input { float:right; margin-right:-2.5em; margin-left:0; }

.range-row { display:flex; align-items:center; gap:8px; direction:ltr; }
.range-row .form-control { width:5rem; text-align:center; font-size:.84rem; border-color:var(--border); border-radius:var(--radius-sm); }

/* ===== Year-range dual slider (AH year filter for hadith books) ===== */
.year-range {
    display:flex; align-items:center; gap:6px; direction:ltr;
    padding: 6px 10px;
    font-family:'IRANSans', system-ui, sans-serif;
    font-size:.78rem; color:var(--text);
    white-space:nowrap;
}
.year-range .yr-label {
    color:var(--text-3); font-weight:600; flex-shrink:0;
}
.year-range .yr-num {
    flex-shrink:0; width:3.4em; padding:1px 4px;
    font: inherit; font-weight:600; text-align:center;
    border:1px solid var(--border); border-radius:4px;
    background:#fff; color:var(--text);
    -moz-appearance:textfield;
}
.year-range .yr-num::-webkit-outer-spin-button,
.year-range .yr-num::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.year-range .yr-num:focus { outline:none; border-color:var(--primary); }
.year-range .yr-count {
    color:var(--text-3); font-size:.68rem; flex-shrink:0;
    background:rgba(59,79,204,.06); padding:1px 6px; border-radius:999px;
    cursor:help;
}
.yr-slider {
    position:relative; height:16px; flex:1 1 0; min-width:40px; direction:ltr;
}
.yr-track {
    position:absolute; left:6px; right:6px; top:50%;
    height:4px; transform:translateY(-50%);
    background:var(--border); border-radius:999px;
}
.yr-fill {
    position:absolute; top:50%; height:4px;
    transform:translateY(-50%);
    background:var(--primary); border-radius:999px;
}
.yr-input {
    position:absolute; left:0; right:0; top:0; width:100%; height:100%;
    -webkit-appearance:none; appearance:none;
    background:transparent; pointer-events:none; margin:0; padding:0;
}
.yr-input::-webkit-slider-thumb {
    -webkit-appearance:none; appearance:none;
    width:10px; height:10px; border-radius:50%;
    background:var(--primary); border:1.5px solid #fff;
    box-shadow:0 1px 2px rgba(0,0,0,.18); cursor:pointer;
    pointer-events:auto; position:relative;
}
.yr-input::-moz-range-thumb {
    width:10px; height:10px; border-radius:50%;
    background:var(--primary); border:1.5px solid #fff;
    box-shadow:0 1px 2px rgba(0,0,0,.18); cursor:pointer;
    pointer-events:auto;
}
.yr-input::-webkit-slider-runnable-track { background:transparent; }
.yr-input::-moz-range-track { background:transparent; }
/* The right thumb (.yr-max) needs to stack above the left when both are at the same spot */
.yr-input.yr-max { z-index:2; }
.tree-row.tree-hadith-book[hidden-by-year] { display:none; }
.range-row .form-control:focus { border-color:var(--primary-light); box-shadow:0 0 0 2px rgba(59,79,204,.1); }
.range-row span { color:var(--text-3); }

/* ===== Main area ===== */
.main-area {
    flex:1; min-width:0;
    display:flex; flex-direction:column;
    padding: 6px 14px 10px;
    gap: 6px;
    overflow:hidden;
}

/* Breadcrumb */
.crumbs { display:none; align-items:center; gap:6px; font-size:.82rem; color:var(--text-3); flex-shrink:0; flex-wrap:wrap; }
.crumbs.has-path { display:flex; }
.crumb {
    background:none; border:none; padding:0;
    color:var(--primary); cursor:pointer; text-decoration:none; font-size:inherit; font-family:inherit;
}
.crumb:hover { text-decoration:underline; }
.crumb.active { color:var(--text-2); cursor:default; font-weight:500; }
.crumb.active:hover { text-decoration:none; }
.crumbs .sep { color:var(--text-3); font-size:.6rem; }

/* Views */
.view { display:none; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.view.active { display:flex; }

/* ===== Search view ===== */
.tabs-row { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tabs { display:flex; flex-wrap:wrap; gap:5px; flex:1; }
.tab {
    padding:5px 14px; font-size:.82rem; font-weight:500;
    border:none; border-radius:var(--radius-sm);
    background:rgba(59,79,204,.07); color:var(--primary);
    cursor:pointer; white-space:nowrap;
    transition: all .15s var(--ease);
}
.tab { cursor:grab; }
.tab:hover { background:rgba(59,79,204,.13); }
.tab.dragging { opacity:.35; cursor:grabbing; }
.tab.drag-before { box-shadow:inset 3px 0 0 var(--accent); }
.tab.drag-after { box-shadow:inset -3px 0 0 var(--accent); }
html[dir="rtl"] .tab.drag-before { box-shadow:inset -3px 0 0 var(--accent); }
html[dir="rtl"] .tab.drag-after { box-shadow:inset 3px 0 0 var(--accent); }
/* Tab colored dots (macOS style) */
.tab-dots {
    display:inline-flex; align-items:center; gap:4px;
    margin-inline-start:8px;
}
.tab-dots .dot {
    width:9px; height:9px; border-radius:50%;
    background:rgba(0,0,0,.12); cursor:pointer;
    transition:all .15s var(--ease);
    position:relative;
}
.tab:hover .tab-min { background:#FDBC40; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.tab:hover .tab-close { background:#FC615D; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.tab-dots .dot:hover { transform:scale(1.3); }
.tab.active .tab-dots .dot { background:rgba(255,255,255,.3); }
.tab.active:hover .tab-min { background:#FDBC40; }
.tab.active:hover .tab-close { background:#FC615D; }

/* Minimized tray (bottom dock) */
.minimized-bar {
    display:none; flex-wrap:wrap; gap:6px;
    padding:7px 14px;
    background:linear-gradient(to top, rgba(59,79,204,.05), rgba(59,79,204,.02));
    border-top:1px solid var(--border);
    flex-shrink:0;
}
.minimized-bar.has-items { display:flex; align-items:center; }
.mini-tab {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 10px 5px 12px; font-size:.74rem; font-weight:500;
    background:var(--card); color:var(--text-2);
    border:1px solid var(--border); border-radius:var(--radius-sm);
    cursor:pointer; transition:all .18s var(--ease);
    white-space:nowrap;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.mini-tab:hover {
    transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(0,0,0,.07);
    border-color:var(--primary-light); color:var(--primary);
}
.mini-close {
    width:14px; height:14px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.55em; color:var(--text-3);
    cursor:pointer; transition:all .12s var(--ease);
}
.mini-close:hover { background:#FC615D; color:#fff; }
.tab.active {
    background:var(--primary); color:#fff;
    box-shadow:0 2px 6px rgba(26,42,143,.2);
}
.split-btn {
    flex-shrink:0; cursor:pointer; display:flex; align-items:center;
    color:var(--text-3); padding:4px; border-radius:var(--radius-sm);
    transition: all .15s var(--ease);
}
.split-btn:hover { color:var(--primary); background:rgba(59,79,204,.06); }
.split-btn input { display:none; }
.split-btn svg line, .split-btn svg rect { transition: all .2s var(--ease); }
.split-btn input:checked ~ svg { color:var(--accent); }

/* Panels box */
.panels-box {
    flex:1; min-height:0;
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    display:flex; flex-direction:column;
}
.panel {
    display:none; flex-direction:column;
    flex:1; min-width:0; min-height:0;
}
.panel.active { display:flex; }

/* Panel label (hidden unless split mode) */
.panel-label {
    display:none;
    padding:8px 16px;
    font-size:.8rem; font-weight:600; color:#fff;
    background:var(--primary);
    text-align:center; flex-shrink:0;
}
.panel:nth-child(even) .panel-label { background:var(--primary-dark); }

.panel-scroll {
    flex:1; overflow-y:auto;
    position: relative;
    zoom: var(--panel-zoom, 1);
    transition: zoom .15s var(--ease);
}

/* Result rows */
.result-row {
    display:flex; align-items:flex-start; gap:10px;
    padding:14px 18px;
    border-bottom:1px solid var(--border-light);
    transition: background .12s var(--ease);
    overflow:hidden;
}
.result-row:last-child { border-bottom:none; }
.result-row:hover { background:rgba(78,197,177,.04); }
.result-row.selected { background:rgba(78,197,177,.07); }
html[dir="rtl"] .result-row.selected { box-shadow:inset -3px 0 0 var(--accent); }
html[dir="ltr"] .result-row.selected { box-shadow:inset 3px 0 0 var(--accent); }
.result-row input[type="checkbox"] {
    flex-shrink:0; margin-top:.35em;
    accent-color:var(--primary); cursor:pointer;
    width:15px; height:15px;
}
.result-body { flex:1; min-width:0; overflow:hidden; }
.result-body p { margin:0 0 .4em; line-height:1.9; overflow-wrap:break-word; word-break:break-word; }
.result-body p:last-child { margin-bottom:0; }
.result-body .ar {
    font-family:'KFGQPC Uthman Taha Naskh','IRANSans',serif;
    font-size:1.05em; line-height:2.1; color:var(--text);
}
.result-body .tr { font-size:.9em; color:var(--text-2); line-height:1.9; }
.result-body .quran {
    font-family:'DigitalKhatt','KFGQPC Uthman Taha Naskh',serif;
    font-size:1.15em; line-height:2.4; color:var(--text);
    direction:rtl;
}

/* ===== Split mode ===== */
.panels-box.split-mode { flex-direction:row; border-radius:0 0 var(--radius) var(--radius); }
.panels-box.split-mode .panel.active { flex:1 1 0; width:0; min-width:0; overflow:hidden; }
.panels-box.split-mode .panel.split-div { border-inline-start:1px solid var(--border); }
.panels-box.split-mode .panel-scroll { overflow-x:hidden; overflow-y:auto; }
.panels-box.split-mode .result-body { overflow:hidden; }
.panels-box.split-mode .result-body p { word-break:break-word; }

/* Tabs restyle as table headers in split mode */
.tabs-row.split-active { gap:0; position:relative; }
.tabs-row.split-active .split-btn {
    position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%);
    z-index:2; color:rgba(255,255,255,.8);
    background:rgba(26,42,143,.6); border-radius:4px;
}
.tabs-row.split-active .split-btn:hover { color:#fff; background:rgba(26,42,143,.85); }
.tabs-row.split-active .tabs {
    background:var(--primary);
    border-radius:var(--radius) var(--radius) 0 0;
    gap:0; overflow:hidden;
    flex-wrap:nowrap;
}
.tabs-row.split-active .tab {
    flex:1 1 0; width:0; min-width:0;
    border-radius:0;
    background:transparent; color:#fff;
    font-weight:600; text-align:center;
    cursor:default; padding:7px 12px;
    box-shadow:none;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tabs-row.split-active .tab.tab-div {
    border-inline-start:1px solid rgba(255,255,255,.2);
}
.tabs-row.split-active .tab:hover {
    background:transparent; transform:none;
}
.tabs-row.split-active .tab-dots { display:none; }
.tabs-row.split-active .tab:nth-child(even) {
    background:rgba(0,0,0,.08);
}

.panels-box.split-mode .result-row { box-sizing:border-box; }

/* ===== Book view ===== */
.book-header-card {
    background:var(--card); border-radius:var(--radius);
    padding:18px 22px; box-shadow:var(--shadow); flex-shrink:0;
}
.book-header-card h2 { font-size:1.1rem; font-weight:700; color:var(--text); margin:0 0 2px; }
.book-header-card p { font-size:.85rem; color:var(--text-3); margin:0; }
.entries-list {
    flex:1; overflow-y:auto;
    display:flex; flex-direction:column; gap:4px;
    padding-top:8px;
}
.entry-card {
    display:flex; align-items:center; gap:10px;
    padding:12px 18px;
    background:var(--card); border-radius:var(--radius-sm);
    box-shadow:var(--shadow); cursor:pointer;
    transition: all .15s var(--ease);
    font-size:.88rem; color:var(--text-2);
}
.entry-card:hover { background:var(--border-light); color:var(--text); transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.entry-card i { color:var(--primary-light); flex-shrink:0; }

/* ===== Entry view ===== */
.entry-article {
    flex:1; overflow-y:auto;
    background:var(--card); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:24px 28px;
}
.entry-article h2 { font-size:1.1rem; font-weight:700; color:var(--text); margin:0 0 16px; }
.entry-article h3 { font-size:.95rem; font-weight:600; color:var(--text); margin:18px 0 8px; }
.entry-text p { margin:0 0 12px; line-height:2; overflow-wrap:break-word; color:var(--text-2); }
.entry-text .ar {
    font-family:'KFGQPC Uthman Taha Naskh','IRANSans',serif;
    font-size:1.1em; line-height:2.2; color:var(--text);
}

/* ===== Surah grid ===== */
.surah-grid {
    display:flex; flex-wrap:wrap; gap:6px;
    padding:16px; direction:rtl;
}
html[dir="ltr"] .surah-grid { direction:ltr; }
.surah-btn {
    width:72px; padding:8px 4px;
    font-size:.78rem; font-weight:500;
    text-align:center;
    background:var(--border-light); color:var(--text-2);
    border:1px solid var(--border); border-radius:var(--radius-sm);
    cursor:pointer;
    transition:all .12s var(--ease);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.surah-btn:hover { background:rgba(59,79,204,.08); color:var(--primary); border-color:var(--primary-light); }
.surah-btn .surah-num { display:block; font-size:.65rem; color:var(--text-3); margin-bottom:2px; }

/* Quran surah view */
.surah-view-header {
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    padding:10px 18px; border-bottom:1px solid var(--border); flex-shrink:0;
    position:sticky; top:0; z-index:30;
    background:var(--card);
}
.surah-back-btn {
    background:none; border:none; color:var(--primary); cursor:pointer;
    font-size:.8rem; padding:4px 8px; border-radius:4px;
    transition:background .12s;
}
.surah-back-btn:hover { background:rgba(59,79,204,.06); }
.surah-view-title { font-weight:600; font-size:.95rem; color:var(--text); }

/* Title group (title + jump control on the same side) */
.surah-title-group { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* Surah meta cluster (opposite side of title; flips with text direction) */
.surah-meta-inline { display:inline-flex; align-items:center; gap:12px; }
.meta-place i {
    color:var(--primary); font-size:1.1rem; cursor:help;
    transition:color .12s, transform .12s;
}
.meta-place i:hover { color:#2c3da6; transform:scale(1.12); }
.meta-tanzil {
    display:inline-flex; align-items:center; gap:3px;
    color:var(--text-2); font-size:.8rem; font-weight:600;
    font-variant-numeric:tabular-nums; cursor:help;
}
.meta-tanzil i { font-size:.85rem; opacity:.75; }
.meta-tanzil:hover { color:var(--primary); }
.meta-tanzil:hover i { opacity:1; }

/* Annotation-layer toggle buttons */
.layer-toggle {
    background:none; border:none; cursor:pointer;
    width:28px; height:28px; padding:0;
    color:var(--text-3);
    border-radius:5px;
    transition:color .15s, background .15s;
    display:inline-flex; align-items:center; justify-content:center;
}
.layer-toggle:hover { background:rgba(0,0,0,.05); color:var(--text); }
.layer-toggle svg { display:block; }
.tajweed-toggle.on { color:#1aa15f; }
.tajweed-toggle.on:hover { color:#138c50; background:rgba(26,161,95,.08); }
.translation-toggle.on { color:var(--primary); }
.translation-toggle.on:hover { background:rgba(59,79,204,.08); }

/* Translation cluster: toggle + chevron picker button */
.translation-cluster { display:inline-flex; align-items:center; gap:0; }
.translation-picker-btn {
    background:none; border:none; cursor:pointer;
    padding:0 4px; height:28px;
    color:var(--text-3); font-size:.7rem;
    border-radius:4px; transition:color .15s, background .15s;
}
.translation-picker-btn:hover { color:var(--primary); background:rgba(0,0,0,.04); }
.translation-picker-lang {
    width:100%; padding:5px 8px; box-sizing:border-box;
    border:1px solid var(--border); border-radius:5px;
    font-size:.78rem; outline:none;
    background:#fff; color:var(--text); font-family:inherit;
}
.translation-picker-lang:focus { border-color:var(--primary); }

/* State 0: hide all translation blocks */
.panel.translations-hidden .ayah-translations { display:none !important; }
/* State 2: keep translations visible but suppress translator id */
.panel.translations-no-tags .ayah-translation .trans-tag { display:none; }
tajweed { cursor:help; }

/* Translation picker (anchored under the toolbar button) */
.translation-picker {
    position:fixed; z-index:60;
    background:#fff; border:1px solid var(--border); border-radius:8px;
    box-shadow:0 6px 20px rgba(0,0,0,.16);
    padding:8px;
    width:300px; max-height:60vh;
    display:flex; flex-direction:column; gap:6px;
    direction:inherit;
    zoom: var(--panel-zoom, 1);
}
.translation-picker-search {
    width:100%; padding:5px 8px;
    border:1px solid var(--border); border-radius:5px;
    font-size:.78rem; outline:none; box-sizing:border-box;
    transition:border-color .12s; font-family:inherit;
}
.translation-picker-search:focus { border-color:var(--primary); }
.translation-picker-active { display:flex; flex-wrap:wrap; gap:4px; padding:0 2px; min-height:14px; }
.translation-picker-active.empty::before {
    content: attr(data-empty);
    color:var(--text-3); font-size:.7rem; font-style:italic;
}
.trans-chip {
    display:inline-flex; align-items:center; gap:4px;
    background:rgba(59,79,204,.1); color:var(--primary);
    border-radius:999px; padding:2px 8px; font-size:.7rem;
}
.trans-chip-x { cursor:pointer; font-weight:700; padding:0 2px; }
.trans-chip-x:hover { color:#dc2626; }
.translation-picker-list {
    overflow-y:auto; flex:1; min-height:80px;
    border-top:1px solid var(--border-light); padding-top:4px;
}
.translation-picker-item {
    display:flex; align-items:center; gap:6px;
    padding:5px 6px; border-radius:4px;
    font-size:.76rem; cursor:pointer;
    transition:background .12s;
}
.translation-picker-item:hover { background:rgba(59,79,204,.06); }
.translation-picker-item.active { background:rgba(59,79,204,.08); }
.translation-picker-item .trans-color {
    flex-shrink:0; width:18px; height:18px;
    padding:0; border:1px solid var(--border); border-radius:3px;
    cursor:pointer; background:transparent;
}
.translation-picker-item .trans-color::-webkit-color-swatch-wrapper { padding:0; }
.translation-picker-item .trans-color::-webkit-color-swatch { border:none; border-radius:2px; }
.translation-picker-item .trans-color::-moz-color-swatch { border:none; border-radius:2px; }
.translation-picker-item .trans-check {
    width:12px; flex-shrink:0; color:var(--primary); font-weight:700; text-align:center;
}
.translation-picker-item .trans-id {
    color:var(--primary); font-weight:600;
    min-width:90px; font-family:monospace; font-size:.7rem;
}
.translation-picker-item .trans-name { color:var(--text-2); }

/* Inline translations rendered directly under each verse line */
.ayah-translations {
    padding:6px 18px 8px;
    border-bottom:1px solid var(--border-light);
    background:rgba(59,79,204,.025);
}
.ayah-translation {
    display:flex; gap:10px; padding:3px 0;
    font-size:.86rem; line-height:1.55; color:var(--text);
}
.ayah-translation .trans-tag {
    flex-shrink:0; min-width:96px; max-width:96px;
    color:var(--primary); font-weight:600; font-size:.68rem;
    font-family:monospace;
    padding-top:3px;
}
.ayah-translation .trans-text { flex:1; text-align:start; }

/* Words: clickable. Hover sheds a soft, warm light around the word. */
.word { cursor:pointer; transition:background .15s, box-shadow .15s; border-radius:4px; padding:0 1px; }
.word:hover {
    background:rgba(255, 220, 130, 0.30);
    box-shadow:0 0 12px 4px rgba(255, 220, 130, 0.55);
    border-radius:4px;
}
.word.word-active {
    background:rgba(15,23,42,.92); color:#fff;
    border-radius:4px; padding:1px 4px;
    box-shadow:0 0 0 4px rgba(15,23,42,.18), 0 4px 14px rgba(0,0,0,.32);
}
.word.word-active .tj { color:#fff !important; }

/* Floating popover with root / lemma / POS */
#word-popover {
    position:fixed; z-index:9999;
    background:#1f2937; color:#fff;
    padding:7px 12px; border-radius:6px;
    font-size:.78rem; line-height:1.55;
    box-shadow:0 6px 20px rgba(0,0,0,.28);
    pointer-events:none; max-width:340px;
    direction:inherit;
    display:none;
    zoom: var(--panel-zoom, 1);
}

/* Tajweed legend (state 2) — pinned at top-left, draggable, scales with panel zoom */
.tajweed-legend-panel {
    position:fixed; top:72px; left:16px; z-index:30;
    background:#fff; border:1px solid var(--border);
    border-radius:8px;
    padding:10px 14px;
    box-shadow:0 6px 20px rgba(0,0,0,.12);
    max-width:240px; max-height:70vh; overflow-y:auto;
    direction:inherit;
    zoom: var(--panel-zoom, 1);
}
.tajweed-legend-panel .legend-title {
    display:flex; align-items:center; gap:6px;
    font-size:.78rem; font-weight:700; color:var(--text);
    margin:-10px -14px 6px; padding:8px 12px;
    border-bottom:1px solid var(--border-light);
    background:rgba(0,0,0,.02);
    border-top-left-radius:8px; border-top-right-radius:8px;
    cursor:grab; user-select:none; touch-action:none;
}
.tajweed-legend-panel .legend-grip { color:var(--text-3); font-size:.7rem; }
body.legend-dragging .tajweed-legend-panel .legend-title { cursor:grabbing; }
body.legend-dragging { user-select:none; }

/* Selected verse marker (when its detail is open and legend is filtered to it) */
.ayah-line.verse-selected .ayah-num {
    background:var(--primary); color:#fff;
}
.tajweed-legend-panel .legend-items {
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:5px;
}
.tajweed-legend-panel .legend-items li {
    display:flex; align-items:center; gap:8px;
    font-size:.74rem; color:var(--text-2);
}
.tajweed-legend-panel .legend-swatch {
    display:inline-block; width:12px; height:12px;
    border-radius:3px; flex-shrink:0;
}
.tajweed-legend-panel .legend-name { white-space:nowrap; }

/* Surah jump — two editable numbers (point if equal, interval otherwise) */
.surah-jump {
    display:inline-flex; align-items:center; gap:6px;
    direction:ltr;
}
.jump-num {
    width:46px; padding:3px 4px;
    border:1px solid var(--border); border-radius:4px;
    background:#fff; color:var(--text);
    font-size:.82rem; font-weight:600; text-align:center;
    font-variant-numeric:tabular-nums;
    -moz-appearance:textfield; outline:none;
    transition:border-color .12s, background .12s;
}
.jump-num:hover { border-color:var(--primary-light); }
.jump-num:focus { border-color:var(--primary); background:#fafbff; }
.jump-num::-webkit-outer-spin-button,
.jump-num::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Surah-local search */
.surah-search-inline {
    display:inline-flex; align-items:center; gap:6px;
    background:#fff; border:1px solid var(--border); border-radius:6px;
    padding:3px 10px;
    transition:border-color .12s;
}
.surah-search-inline:focus-within { border-color:var(--primary); }
.surah-search-inline i { color:var(--text-3); font-size:.78rem; }
.surah-search-input {
    border:none; outline:none; background:transparent;
    font-size:.82rem; width:140px; color:var(--text);
    font-family:inherit;
}
.surah-search-input::placeholder { color:var(--text-3); }
.ayah-line.search-miss,
.ayah-detail.search-miss,
.ayah-translations.search-miss { display:none !important; }
.word.search-hit, .word.search-hit * { color: #dc2626 !important; }
.word.search-hit { background: rgba(220, 38, 38, .07); }
.search-hit {
    background:#fff3a3; color:inherit;
    padding:0 2px; border-radius:3px;
}

/* Quran tree surah items */
.tree-surah { cursor:pointer; }
.tree-surah:hover { color:var(--primary) !important; }

/* Surah search inside grid view */
.surah-search {
    padding:12px 16px 0; flex-shrink:0;
}
.surah-search input {
    width:100%; border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:6px 12px; font-size:.84rem; outline:none;
    transition:border-color .15s;
}
.surah-search input:focus { border-color:var(--primary-light); }
.surah-search input::placeholder { color:var(--text-3); }

/* Basmala — shown at the top of every surah except 1 and 9 */
.basmala {
    display:flex; justify-content:center;
    padding:14px 18px 16px;
    border-bottom:1px solid var(--border-light);
    direction:rtl;
    font-family:'DigitalKhatt','KFGQPC Uthman Taha Naskh',serif;
    font-size:1.35em; line-height:2.1; color:var(--text);
}

/* Ayah per line */
.ayah-line {
    display:flex; gap:12px; padding:6px 18px;
    border-bottom:1px solid var(--border-light);
    align-items:baseline; direction:rtl;
}
.ayah-line.expanded {
    position: sticky;
    background: var(--card);
    z-index: 20;
    box-shadow: 0 2px 10px rgba(15,23,42,.08);
    border-bottom: 1px solid var(--border);
}
.ayah-line:last-child { border-bottom:none; }
.ayah-num {
    flex-shrink:0; min-width:28px;
    text-align:center; font-size:.72rem; font-weight:600;
    color:var(--primary); background:rgba(59,79,204,.06);
    border-radius:4px; padding:2px 6px;
    font-variant-numeric:tabular-nums;
}
.ayah-text {
    flex:1;
    font-family:'DigitalKhatt','KFGQPC Uthman Taha Naskh',serif;
    font-size:1.15em; line-height:2.4; color:var(--text);
}
body.quran-edition-hemmat .ayah-text,
body.quran-edition-hemmat .basmala {
    font-family: 'B Lotus', 'IRANSans', serif;
}
.ayah-ref {
    display:none;
    flex-shrink:0; align-self:center;
    font-size:.72rem; color:var(--text-3);
    background:var(--border-light);
    padding:2px 8px; border-radius:4px;
    font-family:'IRANSans', system-ui, sans-serif;
    direction:rtl;
}
body.show-hemmat-ref .ayah-ref { display:inline-block; }

/* Loading spinner */
.loading-msg { padding:24px; text-align:center; color:var(--text-3); font-size:.88rem; }

/* Empty state when no panel is open */
.empty-state {
    display:flex; align-items:center; justify-content:center;
    height:100%; padding:40px;
    color:var(--text-3); font-size:.92rem; text-align:center;
}
.panels-box:has(.panel) .empty-state { display:none; }
.empty-msg { padding:14px 18px; color:var(--text-3); font-size:.85rem; font-style:italic; }

/* Ayah row gets a toggle button */
.ayah-line { transition:background .12s; }
.ayah-line:hover { background:rgba(59,79,204,.03); }
.ayah-line.expanded:hover { background: var(--card); }
.ayah-line.flash { background:rgba(255,221,87,.35); }
.ayah-num { cursor:pointer; }
.ayah-num:hover { background:rgba(59,79,204,.18); }
.ayah-toggle {
    background:none; border:none; color:var(--text-3); cursor:pointer;
    padding:2px 6px; font-size:.7rem;
}
.ayah-toggle:hover { color:var(--primary); }

/* Ayah detail card (collapsed by default) */
.ayah-detail { display:none; }
.ayah-detail.open {
    display:block;
    border-bottom:1px solid var(--border-light);
    background:#fafbff;
}
.ayah-detail-card { padding:0 18px 14px; }
.ayah-tabs {
    display:flex; gap:2px; border-bottom:1px solid var(--border);
    margin-bottom:10px; flex-wrap:wrap;
    position: sticky; z-index: 10;
    background: #fafbff;
    padding: 8px 0 0;
}
.ayah-tab {
    background:none; border:none; padding:6px 12px;
    font-size:.78rem; color:var(--text-2); cursor:pointer;
    border-bottom:2px solid transparent; transition:color .12s, border-color .12s;
}
.ayah-tab:hover { color:var(--primary); }
.ayah-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.ayah-tab-body { font-size:.86rem; line-height:1.7; color:var(--text); min-height:32px; padding-top: 8px; }

/* Translation */
.translation-row { display:flex; flex-direction:column; gap:6px; }
.translation-row label { font-size:.72rem; color:var(--text-3); }
.translator-select {
    align-self:flex-start; padding:3px 6px; font-size:.78rem;
    border:1px solid var(--border); border-radius:4px; background:#fff;
}
.translation-text { padding:4px 0; }

/* Syntax tab: dependency-tree SVG on top, info table below */
.syntax-tree-wrap {
    margin-bottom:12px;
}
.syntax-tree-wrap.no-tree { display:none; }
.syntax-tree-label {
    font-size:.7rem; font-weight:700; color:var(--text-3);
    text-transform:uppercase; letter-spacing:.4px;
    margin-bottom:6px;
    display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.syntax-tree-zoom {
    display:inline-flex; align-items:center; gap:4px;
    background:var(--border-light); padding:2px;
    border-radius:999px;
}
.stz-btn {
    background:transparent; border:none;
    width:22px; height:22px; border-radius:50%;
    cursor:pointer; color:var(--text-2);
    font-size:.85rem; font-weight:700;
    display:inline-flex; align-items:center; justify-content:center;
    transition: background .12s var(--ease), color .12s var(--ease);
}
.stz-btn:hover { background:var(--card); color:var(--primary); }
.stz-btn i { font-size:.6rem; }
.stz-val {
    min-width:36px; text-align:center;
    font-size:.7rem; font-weight:600; color:var(--text-2);
    font-variant-numeric:tabular-nums;
}
.syntax-tree-img {
    width:100%;
    max-height:60vh;
    overflow:auto;
    text-align:center;
}
.syntax-tree-img > svg,
.syntax-tree-img > img {
    display:inline-block;
    width:100%;
    max-width:100%;
    height:auto;
    transition: width .15s var(--ease);
}
.syntax-tree-missing { padding:14px; color:var(--text-3); font-style:italic; font-size:.78rem; text-align:center; }

.syntax-table {
    width:100%; border-collapse:collapse;
    font-size:.74rem;
}
.syntax-table th, .syntax-table td {
    padding:5px 7px; border-bottom:1px solid var(--border-light);
    text-align:start; vertical-align:top;
}
.syntax-table th {
    font-weight:700; color:var(--text-2); font-size:.66rem;
    background:#fafbff;
    text-transform:uppercase; letter-spacing:.4px;
    white-space:nowrap;
}
.syntax-table td.num { color:var(--primary); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.syntax-table td.ar {
    font-family:'DigitalKhatt','KFGQPC Uthman Taha Naskh',serif;
    font-size:1em; direction:rtl; white-space:nowrap;
}
.syntax-table td.mono { font-family:monospace; font-size:.66rem; color:var(--text-3); }
.syntax-table td.gloss { color:var(--text-3); font-style:italic; }
.syntax-table tr:hover td { background:#fafbff; }

/* Per-tree-row mini-tables stacked under the dependency tree */
.syntax-rows {
    margin-top:10px;
    display:flex; flex-direction:column; gap:10px;
}
.syntax-row-card {
    border:1px solid var(--border-light);
    border-radius:6px;
    overflow:hidden;
    background:#fff;
}
.syntax-row-header {
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    padding:6px 12px;
    background:rgba(59,79,204,.06);
    border-bottom:1px solid var(--border-light);
    direction:rtl;
}
.syntax-row-header .syntax-row-num {
    color:var(--primary); font-weight:600; font-size:.7rem;
    background:rgba(59,79,204,.12); padding:2px 8px;
    border-radius:3px; flex-shrink:0;
    font-variant-numeric:tabular-nums;
    text-transform:uppercase; letter-spacing:.4px;
}
.syntax-row-header .syntax-row-text {
    font-family:'DigitalKhatt','KFGQPC Uthman Taha Naskh',serif;
    font-size:1.1em; color:var(--text); flex:1;
}
.syntax-row-card .syntax-table { width:100%; }
.syntax-row-card .syntax-table th { background:transparent; }
.syntax-row-card .syntax-table th,
.syntax-row-card .syntax-table td {
    border-bottom:1px solid var(--border-light);
    padding:4px 8px;
}
.syntax-row-card .syntax-table tr:last-child td { border-bottom:none; }

/* Collapsible row card */
.syntax-row-card.collapsible > .syntax-row-header { cursor:pointer; user-select:none; }
.syntax-row-card.collapsible > .syntax-row-header:hover { background:rgba(59,79,204,.1); }
.syntax-row-chev {
    flex-shrink:0; color:var(--text-3); font-size:.75rem;
    transition:transform .15s ease;
}
.syntax-row-card.collapsible.collapsed .syntax-row-chev { transform:rotate(-90deg); }
.syntax-row-card.collapsible.collapsed > .syntax-row-body { display:none; }

/* Tajweed */
.tajweed-text {
    font-family:'DigitalKhatt','KFGQPC Uthman Taha Naskh',serif;
    font-size:1.25em; line-height:2.4; direction:rtl;
}
.tajweed-legend { margin-top:8px; font-size:.72rem; color:var(--text-3); }
.legend-pill { display:inline-block; margin:2px 4px; padding:1px 6px; border-radius:4px; background:#fff; border:1px solid var(--border-light); }

/* Tajweed rule colors — used inside the ayah-detail "Tajweed" tab (raw HTML) AND
   inside the surah view (.tj-* spans) when the panel has [data-tajweed-on]. */
.tj { font-style:normal; }
.panel[data-tajweed-on] .tj { cursor:help; }
.panel[data-tajweed-on] .tj-ham_wasl { color:#aaa; }
.panel[data-tajweed-on] .tj-laam_shamsiyah { color:#c0392b; }
.panel[data-tajweed-on] .tj-madda_normal { color:#2980b9; }
.panel[data-tajweed-on] .tj-madda_permissible { color:#1abc9c; }
.panel[data-tajweed-on] .tj-madda_necessary { color:#16a085; }
.panel[data-tajweed-on] .tj-madda_obligatory { color:#0e6b5e; }
.panel[data-tajweed-on] .tj-ghunnah { color:#27ae60; }
.panel[data-tajweed-on] .tj-qalqalah { color:#8e44ad; }
.panel[data-tajweed-on] [class*="tj-idgham"] { color:#e67e22; }
.panel[data-tajweed-on] [class*="tj-ikhafa"],
.panel[data-tajweed-on] [class*="tj-ikhfa"] { color:#d35400; }
.panel[data-tajweed-on] .tj-iqlab { color:#9b59b6; }
.panel[data-tajweed-on] .tj-silent { color:#bbb; text-decoration:line-through; }

/* Detail-card tajweed tab (raw <tajweed> HTML from the per-ayah endpoint) */
tajweed { font-style:normal; }
tajweed[class="ham_wasl"] { color:#aaa; }
tajweed[class="laam_shamsiyah"] { color:#c0392b; }
tajweed[class="madda_normal"] { color:#2980b9; }
tajweed[class="madda_permissible"] { color:#1abc9c; }
tajweed[class="madda_necessary"] { color:#16a085; }
tajweed[class="madda_obligatory"] { color:#0e6b5e; }
tajweed[class="ghunnah"] { color:#27ae60; }
tajweed[class="qalqalah"] { color:#8e44ad; }
tajweed[class*="idgham"] { color:#e67e22; }
tajweed[class*="ikhafa"], tajweed[class*="ikhfa"] { color:#d35400; }
tajweed[class="silent"] { color:#bbb; text-decoration:line-through; }

/* Similar verses — inline-flow list (no card chrome) */
.similar-cards {
    display: flex; flex-direction: column;
    gap: 4px;
    padding: 6px 2px;
}
.similar-item {
    direction: rtl;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .12s var(--ease);
    line-height: 1.95;
}
.similar-item:hover { background: rgba(59,79,204,.05); }
.similar-item.sv-hidden { display: none; }
.sv-load-more {
    display: block;
    margin: 10px auto 4px;
    background: var(--card);
    color: var(--primary);
    border: 1px solid var(--primary-light);
    border-radius: 999px;
    padding: 6px 18px;
    font: inherit; font-size: .82rem; font-weight: 600;
    cursor: pointer;
    transition: all .15s var(--ease);
}
.sv-load-more:hover {
    background: var(--primary); color: #fff;
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59,79,204,.18);
}
.sv-score {
    display: inline-block; vertical-align: middle;
    background: rgba(78,197,177,.10); color: var(--accent);
    font-weight: 600; font-size: .7rem;
    padding: 1px 6px; border-radius: 999px;
    font-variant-numeric: tabular-nums;
    margin-inline-end: 6px;
    font-family: 'IRANSans', system-ui, sans-serif;
}
.sv-addr {
    display: inline; vertical-align: baseline;
    background: none; border: none; padding: 0;
    color: var(--primary); cursor: pointer;
    font: inherit; font-size: .82rem; font-weight: 500;
    font-family: 'IRANSans', system-ui, sans-serif;
    margin-inline-end: 6px;
    transition: color .12s var(--ease);
}
.sv-addr:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.sv-text {
    font-family: 'DigitalKhatt','KFGQPC Uthman Taha Naskh',serif;
    font-size: .98em; color: var(--text-2);
}
body.quran-edition-hemmat .sv-text { font-family: 'B Lotus','IRANSans',serif; font-size: .92em; }
.sv-ayah { color: var(--text-2); }
.sv-num {
    font-family: 'IRANSans', system-ui, sans-serif;
    font-size: .7em; color: var(--text-3);
    font-variant-numeric: tabular-nums;
    margin: 0 2px;
}
.sv-focal {
    background: rgba(255, 224, 102, .18);
    color: var(--text);
    padding: 0 2px;
    border-radius: 2px;
}

/* Asbab */
.asbab-row {
    padding:8px 10px; margin-bottom:8px;
    background:#fff; border:1px solid var(--border-light); border-radius:var(--radius-sm);
}
.asbab-meta { font-size:.7rem; color:var(--text-3); margin-bottom:4px; }
.asbab-text { white-space:pre-wrap; margin:0; line-height:1.9; direction:rtl; text-align:start; }

/* Commentary tab */
.commentary-list { display:flex; flex-direction:column; gap:8px; }
.commentary-card {
    background:var(--card); border:1px solid var(--border-light);
    border-radius:var(--radius-sm); overflow:hidden;
}
.cm-head {
    padding:8px 12px; cursor:pointer;
    background:var(--border-light); font-size:.78rem;
    display:flex; gap:8px; flex-wrap:wrap; align-items:center;
    color:var(--text-2);
    list-style:none;
}
.cm-head::-webkit-details-marker { display:none; }
.cm-head::before {
    content:'▸'; color:var(--text-3); margin-inline-end:4px;
    transition:transform .15s var(--ease);
    display:inline-block;
}
.commentary-card[open] .cm-head::before { transform:rotate(90deg); }
.cm-book { font-weight:600; color:var(--text); }
.cm-author { color:var(--text-3); }
.cm-body {
    padding:10px 14px; font-size:.85rem;
    line-height:1.95; direction:rtl; text-align:start;
    white-space:pre-wrap; color:var(--text);
    max-height:60vh; overflow-y:auto;
}
.cm-pager {
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-top:10px;
}
.cm-page-btn {
    background:var(--card); color:var(--primary);
    border:1px solid var(--primary-light); border-radius:999px;
    padding:4px 12px; font-size:.78rem; cursor:pointer;
    transition:all .15s var(--ease);
}
.cm-page-btn:hover:not(:disabled) { background:var(--primary); color:#fff; border-color:var(--primary); }
.cm-page-btn:disabled { opacity:.4; cursor:not-allowed; }
.cm-page-info { font-size:.78rem; color:var(--text-3); font-variant-numeric:tabular-nums; }

/* ===== Lexicon viewer ===== */
.panel-scroll:has(.lex-root-view) { padding:0; }
.lex-root-view { display:flex; flex-direction:column; height:100%; }
.lex-root-header {
    position:sticky; top:0; z-index:5;
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding:12px 20px; background:var(--card);
    border-bottom:1px solid var(--border); flex-shrink:0;
}
.lex-root-id { display:inline-flex; align-items:center; gap:10px; }
.lex-root-chip-big {
    background:var(--primary); color:#fff;
    padding:6px 18px; border-radius:999px;
    font-weight:700; font-size:1.2rem;
    font-family: Amiri,'IRANSans',serif;
}
.lex-root-summary { color:var(--text-3); font-size:.82rem; }
.lex-actions { display:inline-flex; align-items:center; gap:12px; margin-inline-start:auto; }
.lex-ar-toggle {
    display:inline-flex; align-items:center; gap:6px;
    cursor:pointer; font-size:.82rem; color:var(--text-2);
}
.lex-ar-toggle input { accent-color: var(--primary); cursor:pointer; }
.lex-pick-btn {
    background:var(--card); color:var(--primary);
    border:1px solid var(--primary-light); border-radius:999px;
    padding:5px 14px; font-size:.78rem; cursor:pointer;
    transition: all .15s var(--ease);
}
.lex-pick-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }

.lex-aliases {
    margin-inline-start:8px; color:var(--text-3); font-size:.8rem;
}
.lex-alias-chip {
    display:inline-block;
    background:var(--border-light); color:var(--text-2);
    padding:1px 8px; border-radius:999px; margin-inline-start:4px;
    font-family: Amiri,'IRANSans',serif;
}
.lex-toc {
    position:sticky; top: 56px; z-index:4;
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:8px 20px; background:#fafbff;
    border-bottom:1px solid var(--border-light);
    font-size:.82rem;
}
.lex-toc-title { color:var(--text-3); font-weight:600; margin-inline-end:4px; }
.lex-toc-link {
    color:var(--primary); text-decoration:none;
    padding:2px 10px; border-radius:999px;
    background:var(--card); border:1px solid var(--border-light);
    transition: all .12s var(--ease);
}
.lex-toc-link:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.lex-root-body { overflow-y:auto; padding:16px 22px; }
.lex-section { margin-bottom:24px; }
.lex-section-h {
    margin:0 0 10px;
    font-size:.78rem; font-weight:700; color:var(--text-3);
    text-transform:uppercase; letter-spacing:.04em;
    border-bottom:1px solid var(--border-light); padding-bottom:6px;
}

/* Inline numbered list, no pseudo-element counters → no overlap */
.lex-meanings, .lex-opinions {
    padding:0; margin:0; list-style:none;
    display:flex; flex-direction:column; gap:8px;
}
.lex-meaning, .lex-opinion {
    display:flex; align-items:flex-start; gap:10px;
    padding:10px 12px;
    background:#fbfcff;
    border:1px solid var(--border-light); border-radius:var(--radius-sm);
}
.lex-opinion { border-inline-start:3px solid var(--accent); }
.lex-num {
    flex-shrink:0;
    width:26px; height:26px; border-radius:50%;
    background:var(--accent); color:#fff;
    font-size:.78rem; font-weight:700;
    display:inline-flex; align-items:center; justify-content:center;
    font-family:'IRANSans', system-ui, sans-serif;
    margin-top:1px;
}
.lex-opinion .lex-num { background:var(--primary); }
.lex-op-content { flex:1; min-width:0; }
.lex-def { display:block; margin-bottom:5px; line-height:1.85; font-size:.93rem; }
.lex-def.primary { color:var(--text); }
.lex-def.ar-extra {
    font-family: Amiri,'IRANSans',serif; font-size:1rem;
    color:var(--text-2);
    padding:6px 10px; margin-top:4px;
    background:rgba(78,197,177,.05);
    border-inline-start:2px solid rgba(78,197,177,.4);
    border-radius:3px;
}
.lex-root-body.hide-arabic .ar-extra,
.lex-root-body.hide-arabic .lex-ex-ar { display:none; }
.lex-syntax {
    font-size:.8rem; color:var(--text-3);
    background:rgba(59,79,204,.04); padding:6px 10px;
    border-radius:4px; margin-top:6px; line-height:1.7;
}
.lex-examples { margin-top:8px; }
.lex-examples-other { margin-top:6px; }
.lex-ex-label {
    font-size:.68rem; color:var(--text-3); font-weight:700;
    text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px;
}
.lex-ex {
    padding:6px 10px; margin-bottom:4px;
    background:#fff; border-radius:4px;
    border-inline-start:3px solid var(--primary-light);
    font-size:.88rem;
}
.lex-ex-ar { font-family: Amiri,'IRANSans',serif; display:block; line-height:1.95; }
.lex-ex-primary { display:block; color:var(--text-2); font-size:.84rem; margin-top:2px; }
.lex-ex-ref { color:var(--text-3); font-size:.72rem; margin-inline-start:4px; }

.lex-sources {
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    margin-top:8px; padding-top:6px;
    border-top:1px dashed var(--border-light);
    font-size:.78rem;
}
.lex-sources-label { color:var(--text-3); font-weight:600; margin-inline-end:2px; }
.lex-src-chip {
    background:var(--border-light); color:var(--primary);
    border:1px solid transparent; border-radius:999px;
    padding:2px 10px; font: inherit; cursor:pointer;
    transition: all .12s var(--ease);
}
.lex-src-chip:hover { background:var(--primary); color:#fff; border-color:var(--primary); }

.lex-deriv-form {
    display:inline-block; background:var(--primary); color:#fff;
    padding:2px 10px; border-radius:999px;
    font-weight:700; font-size:.95rem;
    font-family: Amiri,'IRANSans',serif;
    margin-bottom:4px;
}
.lex-deriv-head, .lex-meaning-head {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    margin-bottom:6px;
}
.lex-sources-count {
    font-size:.72rem; color:var(--text-3); font-weight:600;
    background:rgba(59,79,204,.06);
    padding:2px 8px; border-radius:999px;
}
.lex-phrasings {
    display:flex; flex-direction:column; gap:6px;
    margin-top:4px;
}
.lex-phrasing {
    display:flex; align-items:flex-start; gap:8px;
    padding:6px 8px;
    background:#fff;
    border:1px solid var(--border-light); border-radius:var(--radius-sm);
}
.lex-phrasings .lex-phrasing + .lex-phrasing { border-top:0; }
.lex-phrasing > .lex-src-chip {
    flex-shrink:0; align-self:flex-start;
    font-size:.72rem; padding:2px 8px;
}
.lex-phrasing-body { flex:1; min-width:0; }
.lex-phrasing-body .lex-def { margin-bottom:2px; }
.lex-phrasing-body .lex-def.ar-extra { margin-top:3px; padding:4px 8px; }
.lex-phrasing-body .lex-syntax { margin-top:4px; padding:4px 8px; }
.lex-ex .lex-ex-src {
    font-size:.68rem; padding:1px 7px; margin-inline-end:6px;
    vertical-align:middle;
}
.lex-book-toc {
    background:#fbfcff;
    border:1px solid var(--border-light);
    border-radius:var(--radius-sm);
    padding:10px 12px;
    margin-bottom:10px;
    display:flex; flex-direction:column; gap:8px;
}
.lex-book-toc-group { display:flex; flex-direction:column; gap:4px; }
.lex-book-toc-label {
    font-size:.7rem; font-weight:700; color:var(--text-3);
    text-transform:uppercase; letter-spacing:.04em;
}
.lex-book-toc ol {
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:2px;
}
.lex-book-toc-link {
    display:flex; align-items:center; gap:8px;
    padding:3px 6px; border-radius:4px;
    text-decoration:none; color:var(--text-2); font-size:.84rem;
    line-height:1.5;
    transition: background .12s var(--ease), color .12s var(--ease);
}
.lex-book-toc-link:hover { background:rgba(59,79,204,.06); color:var(--primary); }
.lex-toc-num {
    flex-shrink:0; min-width:22px; height:20px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--border-light); color:var(--text-3);
    border-radius:999px; font-size:.7rem; font-weight:700;
    padding:0 6px;
    font-family:'IRANSans', system-ui, sans-serif;
}
.lex-book-toc-link:hover .lex-toc-num { background:var(--primary); color:#fff; }
.lex-toc-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lex-meaning.flash, .lex-opinion.flash, .lex-book-card.flash {
    box-shadow:0 0 0 3px rgba(59,79,204,.25);
    transition: box-shadow .25s var(--ease);
}
.tree-row.tree-loading::after {
    content: '…'; margin-inline-start: 6px;
    color: var(--text-3); font-weight: 700;
    animation: tree-ellipsis 1s steps(3, end) infinite;
}
@keyframes tree-ellipsis { from { opacity: .3; } to { opacity: 1; } }

.lex-toc.lex-toc-main { display:block; padding:0; background:transparent; border:0; }
.lex-toc-box {
    background:#fbfcff;
    border:1px solid var(--border-light);
    border-radius:var(--radius-sm);
    margin-bottom:14px;
    padding:0;
}
.lex-toc-box > summary.lex-toc-title {
    cursor:pointer; list-style:none;
    padding:10px 14px;
    font-weight:700; color:var(--text-2);
    font-size:.86rem;
    display:flex; align-items:center; gap:8px;
}
.lex-toc-box > summary.lex-toc-title::-webkit-details-marker { display:none; }
.lex-toc-box > summary.lex-toc-title::before {
    content:'▸'; color:var(--text-3); font-size:.7rem;
    transition: transform .15s var(--ease);
}
.lex-toc-box[open] > summary.lex-toc-title::before { transform: rotate(90deg); }
.lex-toc-body {
    padding:0 14px 12px;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:14px;
}
.lex-toc-group { display:flex; flex-direction:column; gap:4px; min-width:0; }
.lex-toc-section-link {
    display:block; text-decoration:none;
    padding:4px 6px; border-radius:4px;
    transition: background .12s var(--ease);
}
.lex-toc-section-link:hover { background:rgba(59,79,204,.06); }
.lex-toc-section-h {
    font-size:.72rem; font-weight:700; color:var(--text-3);
    text-transform:uppercase; letter-spacing:.04em;
}
.lex-toc-section-link:hover .lex-toc-section-h { color:var(--primary); }
.lex-toc-body ol {
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:2px;
}
.lex-toc-meta {
    flex-shrink:0; color:var(--text-3); font-size:.7rem;
    background:rgba(59,79,204,.06);
    padding:1px 7px; border-radius:999px;
    font-family:'IRANSans', system-ui, sans-serif;
}
.lex-section-title {
    margin:14px 0 6px;
    font-size:.78rem; font-weight:700; color:var(--text-3);
    text-transform:uppercase; letter-spacing:.04em;
}

.lex-book-card {
    background:var(--card);
    border:1px solid var(--border-light);
    border-radius:var(--radius-sm);
    margin-bottom:10px; overflow:hidden;
    transition: box-shadow .25s var(--ease);
}
.lex-book-card.flash { box-shadow:0 0 0 3px rgba(59,79,204,.25); }
.lex-book-head {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:9px 14px; cursor:pointer;
    background:rgba(59,79,204,.04);
    list-style:none;
}
.lex-book-head::-webkit-details-marker { display:none; }
.lex-book-head::before {
    content:'▸'; color:var(--text-3); transition:transform .15s var(--ease);
    margin-inline-end:2px;
}
.lex-book-card[open] .lex-book-head::before { transform:rotate(90deg); }
.lex-book-card[open] .lex-book-head { border-bottom:1px solid var(--border-light); }
.lex-book-title { font-weight:600; color:var(--text); }
.lex-book-author { color:var(--text-3); font-size:.82rem; }
.lex-book-empty { color:var(--text-3); font-size:.78rem; font-style:italic; margin-inline-start:auto; }
.lex-book-body { padding:12px 14px; }

@media (max-width: 768px) {
    .lex-actions { width:100%; }
}

/* Back button LTR flip */
html[dir="ltr"] .surah-back-btn i { transform:scaleX(-1); }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { border-radius:3px; background:rgba(0,0,0,.1); }
::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.2); }

/* ===== Mobile sidebar toggle ===== */
.sidebar-open-btn {
    display:none;
    position:absolute; top:10px; inset-inline-start:10px; z-index:40;
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:6px 10px;
    cursor:pointer; font-size:.85rem; color:var(--text-2);
    box-shadow:var(--shadow);
}

/* ===== Responsive: Tablet ===== */
@media (max-width:992px) {
    .app-header { padding:0 12px; gap:10px; }
    .search-bar { max-width:none; }
    .main-area { padding:12px 14px; }

    .sidebar-open-btn { display:flex; }
    .sidebar-close-btn { display:block; }
    .sidebar {
        position:fixed; top:52px; bottom:0;
        inset-inline-start:0; width:280px;
        z-index:80;
        transform:translateX(-100%);
        transition:transform .25s var(--ease);
    }
    html[dir="rtl"] .sidebar { transform:translateX(100%); }
    .sidebar.open { transform:translateX(0) !important; }
    .sidebar-backdrop {
        display:none; position:fixed; inset:0;
        background:rgba(0,0,0,.25); z-index:-1;
    }
    .sidebar.open .sidebar-backdrop { display:block; }
}

/* ===== Responsive: Mobile ===== */
@media (max-width:576px) {
    .app-header { height:46px; padding:0 8px; gap:6px; }
    .brand { font-size:.85rem; }
    .search-bar { height:32px; gap:6px; }
    .search-input { font-size:.86rem; }
    .search-scope { font-size:.7rem; padding:3px 6px; }
    .icon-btn { width:26px; height:26px; font-size:.7rem; }
    .zoom-label { font-size:.68rem; min-width:28px; }
    .lang-btn { font-size:.68rem; padding:2px 6px; }
    .main-area { padding:8px 10px; gap:8px; }
    .tab { padding:4px 10px; font-size:.76rem; }
    .sidebar { top:46px; }

    .panels-box.split-mode { flex-direction:column; }
    .panels-box.split-mode .panel.split-div { border-inline-start:none; border-top:1px solid var(--border); }
}

/* ===== Hadith book explorer ===== */
.panel-scroll:has(.hadith-book-view) { padding: 0; overflow: hidden; display: flex; }
.hadith-book-view,
.book-browser {
    /* Whole hadith book panel + waterfall picker use the hadith font everywhere. */
    font-family: 'B Lotus', Amiri, 'IRANSans', serif;
}
.hadith-book-view { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; }

.hadith-book-head { padding: 18px 24px 14px; border-bottom: 1px solid var(--border-light); }
.hbh-title { font-size: 1.55rem; font-weight: 700; margin: 0; color: var(--text); line-height: 1.3; }
.hbh-title.hbh-title-ar { font-family: 'B Lotus', Amiri, 'IRANSans', serif; }
.hbh-title.hbh-title-link {
    cursor: pointer;
    transition: color .12s var(--ease);
}
.hbh-title.hbh-title-link:hover { color: var(--primary); text-decoration: underline; }
.hbh-byline { margin-top: 6px; color: var(--text-2); font-size: .92rem; }
.hbh-stats { margin-top: 4px; color: var(--text-3); font-size: .82rem; }

.hadith-book-body {
    display: grid; grid-template-columns: 320px 1fr; gap: 1.5rem;
    flex: 1; min-height: 0; padding: 0 20px 20px;
}
.hadith-book-body.no-sidebar { grid-template-columns: 1fr; gap: 0; }

.hbv-sidebar { overflow-y: auto; padding-inline-end: 1rem; border-inline-end: 1px solid var(--border); }
.hbv-main { overflow-y: auto; min-width: 0; }

/* ===== Book browser (column waterfall) ===== */
.book-browser-backdrop {
    position: fixed; inset: 0; z-index: 199;
    background: rgba(15, 23, 42, .12);
    animation: bbFade .15s var(--ease);
}
.book-browser {
    position: fixed;
    top: 70px; bottom: 24px;
    inset-inline-start: 280px;
    width: min(820px, calc(100vw - 320px));
    max-width: 90vw;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .22), 0 4px 12px rgba(15, 23, 42, .08);
    z-index: 200;
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: bbRise .18s var(--ease);
}
@keyframes bbFade { from { opacity: 0; } }
@keyframes bbRise { from { opacity: 0; transform: translateY(8px); } }
.book-browser-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; gap: 12px;
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(to bottom, rgba(59,79,204,.04), transparent);
}
.book-browser-title {
    font-weight: 600; font-size: .95rem; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex-shrink: 0; max-width: 260px;
}
.bb-search {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    background: var(--border-light);
    padding: 6px 12px; border-radius: var(--radius-sm);
    transition: box-shadow .12s var(--ease);
}
.bb-search:focus-within { box-shadow: 0 0 0 2px rgba(59,79,204,.18); background: var(--card); }
.bb-search i { color: var(--text-3); font-size: .78rem; }
.bb-search-input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: none;
    font: inherit; font-size: .84rem; color: var(--text);
}
.bb-search-input::placeholder { color: var(--text-3); }
.bb-no-match { color: var(--text-3); font-size: .8rem; font-style: italic; }
.bb-close {
    background: none; border: none; color: var(--text-3);
    width: 28px; height: 28px; border-radius: 50%;
    cursor: pointer; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    transition: all .12s var(--ease);
}
.bb-close:hover { background: var(--border-light); color: var(--text); }
.book-browser-cols {
    flex: 1; min-height: 0;
    display: flex;
    background: var(--bg);
}
.book-browser-col {
    flex: 1; min-width: 0;
    overflow-y: auto;
    padding: 6px 0;
    border-inline-end: 1px solid var(--border-light);
    background: var(--card);
}
.book-browser-col:last-child { border-inline-end: none; }
.bb-loading, .bb-empty {
    padding: 18px; color: var(--text-3); font-size: .85rem; text-align: center;
}
.bb-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 8px 14px;
    border: none; background: none;
    text-align: start; cursor: pointer;
    font-size: .84rem; color: var(--text);
    border-inline-start: 2px solid transparent;
    transition: all .12s var(--ease);
}
.bb-item:hover { background: rgba(59,79,204,.06); }
.bb-item.selected {
    background: rgba(59,79,204,.10);
    color: var(--primary);
    border-inline-start-color: var(--primary);
    font-weight: 600;
}
.bb-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem; color: var(--text-3);
    background: var(--border-light);
    padding: 1px 6px; border-radius: 3px;
    flex-shrink: 0;
}
.bb-item.selected .bb-mono { background: rgba(59,79,204,.15); color: var(--primary); }
.bb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-meta { color: var(--text-3); font-size: .72rem; flex-shrink: 0; }
.bb-item-arrow { color: var(--text-3); font-size: .65rem; opacity: .55; flex-shrink: 0; }
.bb-item.selected .bb-item-arrow { opacity: 1; color: var(--primary); }
.book-browser-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-light);
    background: var(--card);
    flex-shrink: 0;
}
.bb-breadcrumb {
    flex: 1; min-width: 0;
    color: var(--text-3); font-size: .82rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bb-view-btn {
    background: var(--primary); color: #fff;
    border: none; border-radius: var(--radius-sm);
    padding: 8px 16px; font-size: .82rem; font-weight: 600;
    cursor: pointer;
    transition: all .15s var(--ease);
    flex-shrink: 0;
}
.bb-view-btn:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-1px); }
.bb-view-btn:disabled { background: var(--text-3); cursor: not-allowed; opacity: .55; }
@media (max-width: 992px) {
    .book-browser { inset-inline-start: 12px; inset-inline-end: 12px; width: auto; top: 64px; }
}

.hbv-vol-select {
    width: 100%; padding: 4px 8px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg); color: var(--text); font: inherit; font-size: .85rem;
}

.hbv-whole-btn, .hbv-vol-btn, .hbv-chap-btn, .hbv-leaf-btn {
    background: transparent; border: none; padding: 3px 8px;
    border-radius: 4px; cursor: pointer; color: var(--primary);
    font-family: inherit; font-size: inherit; text-align: start;
    width: 100%; line-height: 1.5;
}
.hbv-whole-btn:hover, .hbv-vol-btn:hover, .hbv-chap-btn:hover, .hbv-leaf-btn:hover {
    background: var(--border-light);
}
.hbv-whole-btn.active, .hbv-vol-btn.active, .hbv-chap-btn.active, .hbv-leaf-btn.active {
    background: var(--primary); color: #fff;
}
.hbv-whole-btn.active .hbv-muted,
.hbv-vol-btn.active .hbv-muted,
.hbv-chap-btn.active .hbv-muted,
.hbv-leaf-btn.active .hbv-muted { color: rgba(255,255,255,.85); }

.hbv-whole-btn { margin-bottom: 8px; }
.hbv-vol-btn { font-weight: 600; margin-bottom: 4px; }
.hbv-vol-block { margin-bottom: 1rem; }
.hbv-chap-single, .hbv-tn-leaf { font-size: .85rem; padding: 2px 0; padding-inline-start: 12px; }
.hbv-chap { margin: 2px 0 4px 8px; margin-inline-start: 8px; }
.hbv-chap-summary {
    cursor: pointer; font-size: .88rem; padding: 2px 0; list-style: revert;
    border-radius: 3px;
}
.hbv-chap[open] > .hbv-chap-summary { /* keep default look */ }
.hbv-chap-body { padding-inline-start: 12px; margin-top: 2px; }
.hbv-chap-btn { padding: 0; width: auto; }

.hbv-tn-branch { margin: 2px 0; }
.hbv-tn-summary { cursor: pointer; font-size: .82rem; padding: 1px 0; color: var(--text-2); }

.hbv-mono { font-family: ui-monospace, Menlo, monospace; color: var(--text-3); font-size: .92em; }
.hbv-rtl { direction: rtl; unicode-bidi: embed; }
.hbv-muted { color: var(--text-3); }
.hbv-emoji { font-style: normal; }
.hbv-more-note { color: var(--text-3); font-size: .75rem; margin-top: 6px; padding-inline-start: 8px; }

.hbv-hadiths-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px; color: var(--text-2); font-size: .92rem;
}
.hbv-hadiths-head b { color: var(--text); font-size: 1rem; }
.hbv-breadcrumb { color: var(--text-2); font-size: .82rem; display: inline-flex; gap: 4px; align-items: center; }
.hbv-breadcrumb b { color: var(--primary-dark, var(--primary)); font-weight: 600; }
.hbv-breadcrumb a.hbv-crumb { color: var(--primary); text-decoration: underline; padding: 0 4px; }
.hbv-crumb-sep { color: var(--text-3); }
.hbv-sort-note { color: var(--text-3); font-size: .78rem; }
.hbv-total { margin-inline-start: auto; color: var(--text-2); }

.hbv-hadith {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 0; border-bottom: 1px solid var(--border);
}
.hbv-hadith-sadr {
    font-family: Amiri, 'IRANSans', serif; font-size: 1rem;
    color: var(--text); line-height: 1.9;
    background: rgba(78,197,177,.05);
    padding: 6px 10px; border-inline-start: 2px solid rgba(78,197,177,.4);
    border-radius: 3px;
}
.hbv-hadith-text {
    font-family: Amiri, 'IRANSans', serif; font-size: 1rem;
    color: var(--text); line-height: 2;
}
.hbv-hadith-text innocent, .hbv-hadith-sadr innocent {
    color: var(--primary); font-weight: 600;
}
.hbv-hadith-text ayah, .hbv-hadith-text ayahfinal,
.hbv-hadith-sadr ayah, .hbv-hadith-sadr ayahfinal {
    color: var(--accent); font-weight: 600;
    background: rgba(78,197,177,.08); padding: 0 4px; border-radius: 3px;
}

/* Segment-by-segment hadith table — colors, font and sizes mirror the
   Word reference (نمونه حدیثی برای تعیین فرمت اجزاء حدیث.docx). */
.hbv-hadith-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: 'B Lotus', 'IRANSans', serif;
    direction: rtl;
}
.hbv-hadith-table td {
    border: 1px dashed #BFBFBF;
    padding: 6px 10px;
    vertical-align: top;
    font-weight: bold;
    line-height: 1.9;
}
.hbv-hadith-table .hht-ar { width: 50%; font-size: 1.05rem; }   /* ~12pt Arabic */
.hbv-hadith-table .hht-fa { width: 50%; font-size: .82rem;  }   /* ~9pt Persian */
.hbv-hadith-ids {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 4px; direction: ltr;
}
.hbv-hadith-ids code {
    font-family: ui-monospace, Menlo, monospace;
    font-size: .68rem; color: var(--text-3);
    background: rgba(0,0,0,.04); border: 1px solid var(--border-light);
    padding: 1px 6px; border-radius: 4px;
    user-select: all;
}
.hbv-hadith-ids .hbv-id-source { color: var(--primary); }

/* Header reference row — left cluster (HadID + source-id link) pinned to the
   left, reference text on the right (book / vol / page / chapter). */
.hbv-hadith-table tr.hht-ref td.hht-ref-td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; direction: ltr;
    font-weight: bold; color: #780000;
    font-size: 1rem; line-height: 1.7;
    background: rgba(120,0,0,.04);
    border: 1px dashed #BFBFBF;
    padding: 6px 10px;
    cursor: default;
}
.hbv-hadith-table tr.hht-ref:hover td { background: rgba(120,0,0,.04); }
.hbv-hadith-table tr.hht-ref .hht-ref-left {
    display: inline-flex; gap: 6px; align-items: center; flex-shrink: 0;
}
.hbv-hadith-table tr.hht-ref .hht-ref-link,
.hbv-hadith-table tr.hht-ref .hht-ref-hadid {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .7rem; font-weight: 600;
    color: var(--primary); text-decoration: none;
    background: #fff; border: 1px solid var(--border-light);
    border-radius: 4px; padding: 1px 6px;
    cursor: pointer;
    transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.hbv-hadith-table tr.hht-ref .hht-ref-link { user-select: all; }
.hbv-hadith-table tr.hht-ref .hht-ref-link:hover,
.hbv-hadith-table tr.hht-ref .hht-ref-hadid:hover {
    background: var(--primary); color: #fff; border-color: var(--primary);
}
.hbv-hadith-table tr.hht-ref .hht-ref-hadid.copied {
    background: #16a34a; color: #fff; border-color: #16a34a;
}
.hbv-hadith-table tr.hht-ref .hht-ref-hadid.copy-failed {
    background: #dc2626; color: #fff; border-color: #dc2626;
}
.hbv-hadith-table tr.hht-ref .hht-ref-text {
    flex: 1; text-align: end; min-width: 0;
}
.hbv-hadith.flash {
    box-shadow: 0 0 0 3px rgba(59,79,204,.35);
    transition: box-shadow .25s var(--ease);
    border-radius: 4px;
}

/* All rows are matn maroon. The only sub-segment color override is the
   AyahFinal span — green at the exact tagged range, nothing else. */
.hbv-hadith-table tr.hht-matn td { color: #780000; }                       /* matn maroon */
.hbv-hadith-table tr[data-row] { cursor: pointer; transition: background .12s var(--ease); }
.hbv-hadith-table tr[data-row]:hover td { background: rgba(59,79,204,.04); }
/* Selected — very light cyan with a thick blue accent on the leading edge. */
.hbv-hadith-table tr.hht-selected > td,
.hbv-hadith-table tr.hht-selected:hover > td {
    background: #e0f7fa !important;            /* very light cyan */
    box-shadow: inset 4px 0 0 0 #1d4ed8;       /* solid blue bar on the start edge */
}
.hbv-hadith-table tr.hht-selected > td:first-child {
    box-shadow: inset 4px 0 0 0 #1d4ed8, inset -1px 0 0 0 rgba(0,0,0,.05);
}
.hbv-hadith-table tr.hht-selected > td:last-child {
    box-shadow: inset -4px 0 0 0 #1d4ed8;
}
.hbv-hadith { position: relative; }
.hbv-hadith-copybar {
    position: sticky; top: 6px;
    align-self: flex-end;                /* pin to the end edge in flex-column article */
    margin-inline-start: auto;
    display:flex; gap:6px; align-items:center;
    background:#fff; border:1px solid var(--border);
    border-radius:999px; padding:3px 6px;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
    font-size:.75rem; z-index:5;
    width:max-content;
}
.copybar-count { color:var(--text-3); padding:0 4px; font-family:'IRANSans', system-ui, sans-serif; }
.copybar-btn {
    background:var(--primary); color:#fff; border:0;
    padding:2px 10px; border-radius:999px; cursor:pointer;
    font: inherit; font-weight:600;
}
.copybar-btn.copybar-clear {
    background:transparent; color:var(--text-3);
    padding:0 6px;
}
.copybar-btn:hover { filter:brightness(1.05); }
.hbv-hadith-table .hht-quran-span { color: #007800 !important; }           /* AyahFinal green */
.hbv-hadith-table ayah, .hbv-hadith-table ayahfinal { color: #007800 !important; }
.hbv-hadith-skeleton {
    height: 32px; margin-top: 4px;
    background: linear-gradient(90deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.04) 100%);
    background-size: 200% 100%;
    animation: hbv-shimmer 1.2s linear infinite;
    border-radius: 4px;
}
@keyframes hbv-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.hbv-hadith-id { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; color: var(--primary); }
.hbv-hadith-meta {
    color: var(--text-2); font-size: .78rem;
    display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline;
}
.hbv-hadith-meta code { color: var(--text); font-family: ui-monospace, Menlo, monospace; }
.hbv-hadith-title {
    direction: rtl; unicode-bidi: embed; color: var(--text-2);
    font-family: Amiri, serif; max-width: 280px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hbv-hadith-noor { color: var(--text-3); font-family: ui-monospace, Menlo, monospace; font-size: .75rem; }
.hbv-empty { padding: 24px; color: var(--text-3); text-align: center; font-size: .9rem; }

/* Pagination: a side-aligned cluster (prev / page-input / total / next). The
   top pagination sits above the list and the bottom one mirrors it; both are
   styled identically and pushed to the end side of the row. */
.hbv-pagination {
    display: flex; gap: 6px; align-items: center;
    justify-content: flex-start;          /* anchored to the left edge */
    flex-wrap: wrap;
    margin: 0;
    padding: 8px 12px;
    direction: ltr;
}
.hbv-pagination.hbv-pagination-top    { border-bottom: 1px solid var(--border-light); }
.hbv-pagination.hbv-pagination-bottom { border-top: 1px solid var(--border-light); margin-top: 8px; }
.hbv-pagination:empty { display: none; }
.hbv-page-btn {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-light); border-radius: 50%;
    background: #fff; color: var(--text); cursor: pointer;
    font: inherit; font-size: .9rem;
    transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.hbv-page-btn:hover:not(:disabled) {
    background: var(--primary); color: #fff; border-color: var(--primary);
}
.hbv-page-btn:disabled { color: var(--text-3); cursor: not-allowed; opacity: .5; }
.hbv-page-info {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--text-2);
    background: rgba(0,0,0,.03);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: .85rem;
    font-family: 'IRANSans', system-ui, sans-serif;
}
.hbv-page-info .hbv-page-of { color: var(--text-3); }
.hbv-page-num-input {
    width: 3em; padding: 1px 2px;
    border: 0; background: transparent; outline: none;
    font: inherit; font-weight: 600; color: var(--primary);
    text-align: center;
    -moz-appearance: textfield;
}
.hbv-page-num-input::-webkit-outer-spin-button,
.hbv-page-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hbv-page-num-input:focus { background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px var(--primary); }