:root {
    --primary: #0D3B0F; --primary-light: #1B5E20; --primary-dark: #052206;
    --gold: #C9A227; --gold-light: #DFBD5A;
    --bg: #E8F0ED; --bg-secondary: #DCE7E2; --bg-tertiary: #CFDDD6;
    --text: #1a1a2e; --text-secondary: #4a5568; --text-muted: #8895a7;
    --border: #B8C9C0;
    --ribbon-bg: #1a1a2e; --ribbon-tab-hover: #2d2d4a; --ribbon-tab-active: #16213e;
    --activity-bg: #0f0f23; --activity-icon: #8895a7; --activity-icon-active: #DFBD5A;
    --sidebar-bg: #f0f4f3; --sidebar-border: #B8C9C0;
    --editor-bg: #E8F0ED; --editor-text: #1a1a2e;
    --status-bg: #0f0f23; --status-text: #E2E8F0;
    --scrollbar-thumb: #95A5A6; --scrollbar-track: #DCE7E2;
    --shadow: 0 2px 12px rgba(0,0,0,0.1); --card-bg: #FFFFFF;
    --accent-bar: #0D3B0F; --ayah-border: #B8C9C0;
    --verse-number-bg: #0D3B0F; --verse-number-color: #FFF;
    --panel-bg: #E8F0ED;
    /* Panel accent colors */
    --panel-verses-accent: #1B5E20;
    --panel-translation-accent: #1a237e;
    --panel-tafsir-accent: #004d40;
    --panel-verses-bg: #E6F0E9;
    --panel-translation-bg: #E8EBF5;
    --panel-tafsir-bg: #E4F0ED;
}
.dark-mode {
    --bg: #1a1a2e; --bg-secondary: #222240; --bg-tertiary: #2d2d4a;
    --text: #E2E8F0; --text-secondary: #A0AEC0; --text-muted: #718096;
    --border: #3d3d5c; --ribbon-bg: #0f0f23; --ribbon-tab-hover: #1a1a35;
    --ribbon-tab-active: #16213e; --activity-bg: #0a0a1a;
    --sidebar-bg: #1a1a2e; --sidebar-border: #3d3d5c;
    --editor-bg: #1a1a2e; --editor-text: #E2E8F0;
    --status-bg: #0f0f23; --scrollbar-thumb: #4a5568; --scrollbar-track: #222240;
    --card-bg: #222240; --accent-bar: #DFBD5A;
    --ayah-border: #3d3d5c;
    --verse-number-bg: #DFBD5A; --verse-number-color: #0f0f23;
    --panel-bg: #222240;
    --panel-verses-bg: #1a2520;
    --panel-translation-bg: #1a1d2e;
    --panel-tafsir-bg: #1a2420;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
    font-family:'Inter','Segoe UI',Tahoma,sans-serif;
    background:var(--bg); color:var(--text);
    height:100vh; display:flex; flex-direction:column; overflow:hidden;
    transition: background 0.3s, color 0.3s;
}
body.rtl-layout { direction: rtl; }
body.rtl-layout .main-body { flex-direction: row-reverse; }
body.rtl-layout .sidebar { border-left: none; border-right: 1px solid var(--sidebar-border); }
body.rtl-layout .split-view { flex-direction: row; }
body.rtl-layout .v-panel-left { border-right: none; border-left: 2px solid var(--gold); }
body.rtl-layout .activity-icon.active::before { left: auto; right: 0; border-radius: 2px 0 0 2px; }
body.rtl-layout .verse-block { border-right: none; border-left: 3px solid var(--primary); }

/* ===== RIBBON BAR ===== */
.ribbon-container { background:var(--ribbon-bg); border-bottom:1px solid var(--border); z-index:100; flex-shrink:0; transition:background 0.3s; user-select:none; }
.ribbon-titlebar { display:flex; align-items:center; justify-content:space-between; padding:4px 12px; background:var(--primary-dark); color:#fff; font-size:13px; letter-spacing:0.5px; }
.ribbon-titlebar-left { display:flex; align-items:center; gap:10px; }
.ribbon-titlebar-left .logo-icon { font-size:18px; color:var(--gold); }
.ribbon-titlebar-left .logo-icon svg { width:19px; height:19px; fill:var(--gold); vertical-align:middle; }
.ribbon-titlebar-right { display:flex; align-items:center; gap:10px; }
.ribbon-tabs { display:none; align-items:flex-end; padding:0 8px; background:var(--ribbon-bg); border-bottom:1px solid var(--border); }
.ribbon-tab { padding:8px 18px; cursor:pointer; font-size:13px; font-weight:500; color:var(--text-secondary); border-radius:6px 6px 0 0; border:1px solid transparent; border-bottom:none; position:relative; margin-right:2px; transition:all 0.15s ease; white-space:nowrap; }
.ribbon-tab:hover { background:var(--ribbon-tab-hover); color:var(--text); }
.ribbon-tab.active { background:var(--ribbon-tab-active); color:var(--primary); border-color:var(--border); font-weight:600; }
.ribbon-tab.active::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--primary); border-radius:1px 1px 0 0; }
.ribbon-toolbar { display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 12px; flex-wrap:wrap; background:var(--ribbon-tab-active); transition:background 0.3s; }
.ribbon-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border:2px solid transparent; background:var(--bg-secondary); cursor:pointer; border-radius:8px; font-size:12.5px; color:var(--text-secondary); transition:all 0.2s ease; white-space:nowrap; font-family:inherit; text-decoration:none; font-weight:600; }
.ribbon-btn:hover { transform:translateY(-2px); box-shadow:0 4px 15px rgba(0,0,0,0.1); }
.ribbon-btn .btn-icon-wrap { width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.ribbon-btn .btn-icon-wrap svg { width:13px; height:13px; fill:currentColor; }
.ribbon-btn .btn-icon-wrap i { font-size:12px; }
.ribbon-btn.active-btn { color:#fff; border-color:transparent !important; }
.ribbon-btn.active-btn .btn-label { color:#fff; }
.ribbon-divider { width:1px; height:24px; background:var(--border); margin:0 4px; }

/* Theme toggle */
.theme-toggle { display:flex; align-items:center; justify-content:center; width:40px; height:40px; cursor:pointer; background:rgba(255,255,255,0.08); border-radius:10px; border:2px solid rgba(255,255,255,0.15); color:#fff; font-size:16px; font-family:inherit; transition:all 0.25s ease; }
.theme-toggle:hover { background:var(--gold); border-color:var(--gold); color:#1a1a1a; transform:scale(1.08); box-shadow:0 0 18px rgba(212,175,55,0.3); }
.theme-toggle i { font-size:16px; transition:transform .3s ease; }
.dark-mode .theme-toggle { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.25); }
.dark-mode .theme-toggle:hover { background:var(--gold); border-color:var(--gold); color:#1a1a1a; }
.tb-user-label { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; opacity:0.9; }

/* ===== MAIN BODY ===== */
.main-body { display:flex; flex:1; overflow:hidden; }

/* ===== ACTIVITY BAR ===== */
.activity-bar { width:56px; background:linear-gradient(180deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%); display:flex; flex-direction:column; align-items:center; padding-top:10px; flex-shrink:0; z-index:90; transition:background 0.3s; box-shadow:2px 0 12px rgba(0,0,0,0.25); }
.activity-icon { width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:19px; color:rgba(255,255,255,0.5); cursor:pointer; border-radius:10px; margin-bottom:4px; position:relative; transition:all 0.25s cubic-bezier(0.4,0,0.2,1); text-decoration:none; }
.activity-icon svg { width:20px; height:20px; fill:currentColor; }
.activity-icon:hover { color:#fff; background:rgba(255,255,255,0.1); transform:scale(1.08); }
.activity-icon.active { color:#fff; background:rgba(212,175,55,0.18); box-shadow:0 0 16px rgba(212,175,55,0.15); }
.activity-icon.active::before { content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px; background:linear-gradient(180deg, var(--gold), #f0d060); border-radius:0 3px 3px 0; box-shadow:0 0 8px rgba(212,175,55,0.5); }
.activity-icon:nth-child(1):hover { color:#22d3ee; }
.activity-icon:nth-child(2):hover { color:#a78bfa; }
.activity-icon:nth-child(3):hover { color:#34d399; }
.activity-icon:nth-child(4):hover { color:#fbbf24; }
.activity-icon:last-child:hover { color:#60a5fa; }
.activity-icon .act-badge { position:absolute; top:-2px; right:-2px; background:linear-gradient(135deg,#e11d48,#f43f5e); color:#fff; font-size:8px; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 4px; box-shadow:0 2px 6px rgba(225,29,72,0.4); }
.activity-spacer { flex:1; }

/* ===== SIDEBAR ===== */
.sidebar { width:0; background:linear-gradient(180deg, var(--sidebar-bg) 0%, #f0f4f1 100%); border-right:1px solid var(--sidebar-border); overflow:hidden; transition:width 0.28s cubic-bezier(0.4,0,0.2,1); flex-shrink:0; display:flex; flex-direction:column; box-shadow:4px 0 20px rgba(0,0,0,0.06); }
.sidebar.open { width:290px; }
.sidebar.search-wide.open { width:410px; }
.sidebar-header { padding:16px 18px; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:2px; color:var(--primary); border-bottom:2px solid var(--gold); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; background:linear-gradient(135deg, rgba(27,94,32,0.04), rgba(212,175,55,0.06)); }
.sidebar-header .close-sidebar { cursor:pointer; color:var(--text-muted); font-size:18px; padding:4px 8px; border-radius:6px; background:rgba(0,0,0,0.03); border:1px solid transparent; font-family:inherit; transition:all 0.15s; }
.sidebar-header .close-sidebar:hover { color:#e11d48; background:rgba(225,29,72,0.08); border-color:rgba(225,29,72,0.2); }
.sidebar-content { flex:1; overflow-y:auto; padding:10px 0; }
.sidebar-content::-webkit-scrollbar { width:6px; }
.sidebar-content::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:3px; }
.sidebar-content::-webkit-scrollbar-track { background:transparent; }

.tree-group { margin-bottom:2px; }
.tree-hdr { display:flex; align-items:center; gap:8px; padding:7px 18px; cursor:pointer; border-radius:8px; margin:0 8px; transition:all 0.2s cubic-bezier(0.4,0,0.2,1); color:var(--text-secondary); font-size:12px; font-weight:600; position:relative; }
.tree-hdr::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:transparent; border-radius:0 2px 2px 0; transition:background 0.2s; }
.tree-hdr:hover { background:rgba(27,94,32,0.06); color:var(--primary); }
.tree-hdr:hover::before { background:var(--primary); }
.tree-hdr .arr { font-size:9px; transition:transform 0.25s; color:var(--gold); }
.tree-hdr .arr.open { transform:rotate(90deg); }
.tree-hdr .chk { width:14px; height:14px; accent-color:var(--gold); cursor:pointer; flex-shrink:0; }
.tree-hdr .cnt { font-size:9px; color:var(--text-muted); font-weight:400; background:var(--bg-tertiary); padding:1px 7px; border-radius:10px; }
.tree-children { display:none; padding-left:0; }
.tree-children.open { display:block; }
.cs-item { display:flex; align-items:center; gap:8px; padding:5px 18px 5px 36px; margin:0 8px; border-radius:6px; cursor:pointer; transition:all 0.15s; color:var(--text-secondary); font-size:11px; border-left:2px solid transparent; }
button.cs-item { width:calc(100% - 16px); border-top:0; border-right:0; border-bottom:0; background:transparent; font-family:inherit; text-align:left; }
.cs-item:hover { background:rgba(27,94,32,0.04); color:var(--primary); border-left-color:var(--gold); }
.cs-item .chk { width:13px; height:13px; accent-color:var(--gold); cursor:pointer; flex-shrink:0; }
.cs-item .nm { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-item .sm { font-size:8px; color:var(--text-muted); flex-shrink:0; background:var(--bg-tertiary); padding:1px 6px; border-radius:8px; }

.cs-surah { display:flex; align-items:center; gap:8px; padding:8px 18px; border-radius:8px; cursor:pointer; margin:2px 8px; text-decoration:none; color:var(--text-secondary); border:1px solid transparent; transition:all 0.2s ease; }
.cs-surah:hover { background:linear-gradient(135deg, rgba(27,94,32,0.06), rgba(212,175,55,0.04)); border-color:rgba(212,175,55,0.2); transform:translateX(2px); }
.cs-surah.active { background:linear-gradient(135deg, rgba(27,94,32,0.1), rgba(212,175,55,0.08)); border-color:var(--primary); color:var(--primary); box-shadow:0 2px 10px rgba(27,94,32,0.08); }
.cs-surah .idx { width:26px; height:26px; background:linear-gradient(135deg, var(--primary), var(--primary-light)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; box-shadow:0 2px 8px rgba(27,94,32,0.2); }
.cs-surah.active .idx { background:linear-gradient(135deg, var(--gold), #f0d060); color:#1a1a1a; box-shadow:0 3px 12px rgba(212,175,55,0.3); }
.cs-surah .info { flex:1; min-width:0; }
.cs-surah .nm-e { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-surah .nm-a { font-size:10px; color:var(--text-muted); margin-top:1px; }

.cs-search-input-wrap { padding:10px 12px; flex-shrink:0; border-bottom:2px solid var(--border); background:rgba(27,94,32,0.02); }
.cs-search-input-wrap input { width:100%; padding:8px 12px; border:2px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:12px; outline:none; font-family:inherit; transition:all 0.2s; }
.cs-search-input-wrap input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,0.1); }
.cs-search-form { padding:12px 16px; border-bottom:1px solid var(--border); }
.cs-search-form input, .cs-search-form select { width:100%; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:11px; padding:8px 10px; outline:none; margin-bottom:5px; font-family:inherit; transition:all 0.2s; }
.cs-search-form input:focus, .cs-search-form select:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,0.08); }
.cs-search-form button { width:100%; border:0; border-radius:8px; background:linear-gradient(135deg, var(--primary), var(--primary-light)); color:#fff; font-size:12px; font-weight:700; padding:8px 10px; cursor:pointer; font-family:inherit; transition:all 0.2s; }
.cs-search-form button:hover { background:linear-gradient(135deg, var(--primary-light), var(--primary)); transform:translateY(-1px); box-shadow:0 4px 12px rgba(27,94,32,0.3); }
.cs-search-tabs { padding:0 16px 10px; border-bottom:1px solid var(--border); }
.cs-search-total { color:var(--text-secondary); font-size:10px; font-weight:600; margin-bottom:6px; }
.cs-tab-row { display:flex; gap:4px; flex-wrap:wrap; }
.cs-tab { border:1px solid var(--border); background:var(--bg-tertiary); color:var(--text-secondary); border-radius:6px; padding:4px 10px; font-size:10px; font-weight:700; cursor:pointer; font-family:inherit; transition:all 0.15s; }
.cs-tab:hover { background:rgba(212,175,55,0.1); border-color:var(--gold); }
.cs-tab.active { background:linear-gradient(135deg, var(--primary), var(--primary-light)); color:#fff; border-color:var(--primary); box-shadow:0 2px 8px rgba(27,94,32,0.25); }
.cs-result { display:block; color:var(--text-secondary); text-decoration:none; border:1px solid var(--border); border-radius:8px; padding:10px 14px; margin:4px 8px; background:var(--card-bg); transition:all 0.2s; }
.cs-result:hover { border-color:var(--gold); background:linear-gradient(135deg, rgba(212,175,55,0.04), rgba(27,94,32,0.02)); transform:translateX(2px); box-shadow:0 2px 10px rgba(0,0,0,0.05); }
.cs-result .src { display:inline-block; font-size:8px; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--primary), var(--primary-light)); border-radius:4px; padding:2px 6px; margin-bottom:5px; }
.cs-result .ref { font-size:11px; font-weight:700; color:var(--gold); margin-bottom:5px; }
.cs-result .txt { font-size:11px; line-height:1.5; max-height:65px; overflow:hidden; }
.cs-result .txt.rtl { direction:rtl; text-align:right; font-family:'Noto Naskh Arabic','Amiri',serif; }
.cs-result-empty { color:var(--text-muted); padding:24px 16px; text-align:center; font-size:12px; }

/* ===== EDITOR AREA ===== */
.editor-area { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

/* ===== SURAH BAR ===== */
.surah-bar { background:var(--bg-secondary); padding:6px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
.surah-line { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; min-height:30px; }
.surah-title-pack { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.surah-bar .ar { font-size:19px; color:var(--primary); font-weight:700; font-family:'Amiri','Scheherazade New','Noto Naskh Arabic',serif; direction:rtl; }
.surah-bar .en { font-size:13px; color:var(--text); font-weight:600; }
.surah-bar .meta { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--text-muted); }
.surah-bar .badge { display:inline-block; padding:2px 6px; border-radius:5px; font-size:8px; font-weight:600; }
.badge-mk { background:#4CAF50; color:white; }
.badge-md { background:#FF9800; color:white; }
.nav-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:28px; padding:0; background:var(--card-bg); color:var(--primary); text-decoration:none; border-radius:6px; font-size:20px; line-height:1; font-weight:800; border:1px solid var(--border); cursor:pointer; }
.nav-btn:hover { background:var(--gold); color:#fff; border-color:var(--gold); }
.nav-btn.disabled { opacity:0.35; pointer-events:none; }
.verse-jump { display:flex; align-items:center; gap:3px; }
.verse-jump-input { width:44px; height:28px; padding:0 4px; border:1px solid var(--border); border-radius:5px; background:var(--card-bg); color:var(--text); font-size:12px; font-weight:600; text-align:center; outline:none; font-family:inherit; }
.verse-jump-input:focus { border-color:var(--gold); }
.verse-jump-btn { padding:4px 10px; border:1px solid var(--border); border-radius:5px; background:var(--bg-tertiary); color:var(--text); font-size:10px; font-weight:700; cursor:pointer; font-family:inherit; }
.progress-bar { height:2px; background:var(--bg-tertiary); flex-shrink:0; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--gold-light),var(--gold)); width:0; transition:width .2s; }

.select-all-bar { display:flex; align-items:center; gap:8px; padding:3px 12px; background:var(--bg-secondary); border-bottom:1px solid var(--border); font-size:11px; color:var(--text-secondary); flex-shrink:0; min-height:28px; flex-wrap:wrap; }
.select-all-bar label { cursor:pointer; display:flex; align-items:center; gap:4px; }
.select-all-bar .sel-count { color:var(--gold); font-weight:700; margin-left:4px; }
.select-all-bar .sel-action { margin-left:auto; font-size:10px; padding:3px 10px; background:var(--gold); color:#1a1a1a; border:none; border-radius:3px; cursor:pointer; font-weight:700; font-family:inherit; }
.select-all-bar .sel-action:hover { background:var(--gold-light); }
.sel-all-inline { display:inline-flex; align-items:center; gap:3px; font-size:10px; color:var(--text-muted); cursor:pointer; flex-shrink:0; white-space:nowrap; padding:0 4px; border-radius:4px; transition:background .15s; }
.sel-all-inline:hover { background:rgba(212,175,55,0.08); color:var(--gold); }
.sel-all-inline .sel-chk { width:13px; height:13px; }
.selection-status { display:flex; align-items:center; gap:8px; padding:3px 10px; background:linear-gradient(135deg,rgba(212,175,55,0.12),rgba(27,94,32,0.06)); border-bottom:1px solid var(--gold); font-size:11px; color:var(--gold); flex-shrink:0; min-height:26px; }
.selection-status .sel-count { font-weight:700; }
.selection-status .sel-action { font-size:10px; padding:3px 10px; background:var(--gold); color:#1a1a1a; border:none; border-radius:3px; cursor:pointer; font-weight:700; font-family:inherit; }
.selection-status .sel-action:hover { background:var(--gold-light); }
.sel-chk { width:15px; height:15px; accent-color:var(--gold); cursor:pointer; flex-shrink:0; border-radius:3px; }
.sel-hidden {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
    margin:0;
}

/* ===== SPLIT PANELS ===== */
.split-view { flex:1; display:flex; flex-direction:row; overflow:hidden; min-height:0; direction:ltr; }
.split-view #vPanelTafsir { order:1; }
.split-view #vPanelTranslation { order:2; }
.split-view #splitDividerTafsir { order:1.5; }
.split-view #splitDivider { order:3; }
.split-view #vPanelArabic { order:4; }
.split-panel { flex:1; overflow-y:auto; padding:12px; background:var(--editor-bg); transition:background 0.3s; display:flex; flex-direction:column; }
.split-panel::-webkit-scrollbar { width:8px; }
.split-panel::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:4px; }
.split-panel::-webkit-scrollbar-track { background:var(--scrollbar-track); }
.split-panel-inner { flex:1; overflow-y:auto; }
.split-panel-inner::-webkit-scrollbar { width:6px; }
.split-panel-inner::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:3px; }
.split-panel-inner::-webkit-scrollbar-track { background:transparent; }
.split-divider { width:4px; background:var(--border); cursor:col-resize; flex-shrink:0; transition:background 0.15s; position:relative; }
.split-divider:hover, .split-divider.dragging { background:var(--primary); }
.split-divider::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2px; height:30px; background:var(--text-muted); border-radius:1px; }
.split-panel > .surah-title-pack { flex-wrap:nowrap !important; overflow:hidden; white-space:nowrap; }
.split-panel > .surah-title-pack .ar,
.split-panel > .surah-title-pack .en,
.split-panel > .surah-title-pack .meta { width:auto !important; flex:0 1 auto; min-width:0; margin-top:0 !important; }
.split-panel > .surah-title-pack .ar,
.split-panel > .surah-title-pack .en { overflow:hidden; text-overflow:ellipsis; }

/* Pagination */
.pagination-bar { display:flex; align-items:center; justify-content:space-between; padding:8px 0; margin:4px 0; border-top:1px solid var(--border); flex-shrink:0; flex-wrap:wrap; gap:6px; }
.pagination-bar:first-child { border-top:none; border-bottom:1px solid var(--border); margin-bottom:8px; }
.pagination-info { font-size:10px; color:var(--text-muted); font-weight:600; }
.pagination-btns { display:flex; gap:3px; flex-wrap:wrap; }
.page-btn { padding:4px 10px; border:1px solid var(--border); background:var(--card-bg); color:var(--text-secondary); border-radius:5px; font-size:11px; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.15s; }
.page-btn:hover:not(:disabled) { background:var(--gold); color:#1a1a1a; border-color:var(--gold); }
.page-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.page-btn:disabled { opacity:0.35; cursor:default; }

#vPanelArabic { background: linear-gradient(180deg, var(--panel-verses-bg) 0%, var(--bg) 100%); border-right:2px solid var(--gold); }
#vPanelTranslation { background: linear-gradient(180deg, var(--panel-translation-bg) 0%, var(--bg) 100%); }
#vPanelTafsir { background: linear-gradient(180deg, var(--panel-tafsir-bg) 0%, var(--bg) 100%); }
.v-panel-left { background:var(--panel-bg); border-right:2px solid var(--gold); }
.split-panel.panel-closed { display:none !important; }
.split-panel.panel-minimized { flex:0 0 48px !important; min-width:48px !important; overflow:hidden; padding:8px 6px; }
.split-panel.panel-minimized .panel-body, .split-panel.panel-minimized .pagination-bar, .split-panel.panel-minimized .surah-title-pack { display:none !important; }
.panel-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; margin-bottom:8px; background:linear-gradient(135deg, rgba(27,94,32,0.06), rgba(212,175,55,0.08)); border:1px solid var(--border); border-radius:8px; flex-shrink:0; flex-wrap:wrap; }
.panel-toolbar-left { display:flex; align-items:center; gap:8px; flex-shrink:0; min-width:0; }
.panel-toolbar-title { font-size:12px; font-weight:800; color:var(--primary); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.panel-toolbar .pagination-bar { flex:1 1 auto; margin:0; padding:0; border:0; min-width:220px; }
.panel-toolbar .pagination-info { display:none; }
.panel-toolbar .pagination-btns { justify-content:center; }
.panel-actions { display:flex; gap:4px; flex-shrink:0; }
.panel-action { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:5px; background:var(--card-bg); color:var(--text-secondary); cursor:pointer; font-size:11px; transition:all .15s; }
.panel-action:hover { border-color:var(--gold); color:var(--primary); background:rgba(212,175,55,.1); }
.panel-font-btn { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:6px; background:linear-gradient(135deg, rgba(27,94,32,0.08), rgba(212,175,55,0.1)); color:var(--gold); cursor:pointer; font-size:12px; transition:all .15s; flex-shrink:0; }
.panel-font-btn:hover { background:var(--gold); color:#1a1a1a; border-color:var(--gold); transform:scale(1.1); }
.panel-inline-select { max-width:160px; border:1px solid var(--border); border-radius:5px; background:var(--card-bg); color:var(--text-secondary); font-size:10px; font-weight:600; padding:3px 6px; cursor:pointer; font-family:inherit; outline:none; transition:border-color .15s; flex-shrink:0; }
.panel-inline-select:hover, .panel-inline-select:focus { border-color:var(--gold); }
.panel-inline-select-wide { max-width:240px; }
.panel-scroll-btn { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:4px; background:var(--card-bg); color:var(--text-muted); cursor:pointer; font-size:10px; transition:all .15s; flex-shrink:0; }
.panel-scroll-btn:hover { border-color:var(--gold); color:var(--gold); background:rgba(212,175,55,0.08); }
.mobile-scroll-nav { display:none; gap:6px; align-items:center; padding:4px 8px; background:var(--bg-secondary); border-bottom:1px solid var(--border); flex-shrink:0; justify-content:space-between; flex-wrap:wrap; }
.mobile-scroll-nav .scroll-nav-btn { padding:4px 10px; border:1px solid var(--border); border-radius:4px; background:var(--card-bg); color:var(--text-secondary); font-size:10px; cursor:pointer; font-weight:600; font-family:inherit; display:inline-flex; align-items:center; gap:4px; }
.mobile-scroll-nav .scroll-nav-btn:hover { border-color:var(--gold); color:var(--primary); }
@media (max-width:768px) { .mobile-scroll-nav { display:flex; } }
.panel-restore-strip { display:none; gap:6px; align-items:center; flex-wrap:wrap; padding:6px 10px; background:var(--bg-secondary); border-bottom:1px solid var(--border); }
.panel-restore-strip.show { display:flex; }
.restore-panel-btn { border:1px solid var(--border); background:var(--card-bg); color:var(--text-secondary); border-radius:6px; padding:5px 10px; font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; }
.restore-panel-btn:hover { border-color:var(--gold); color:var(--primary); }
.v-panel-left.multi-tafsir .split-panel-inner { display:flex; flex-direction:row; gap:0; flex:1; }
.v-panel-left.multi-tafsir .tafsir-column { flex:1; overflow-y:auto; padding:0 8px; border-right:1px solid var(--border); }
.v-panel-left.multi-tafsir .tafsir-column:last-child { border-right:none; }
/* Stacked mode for multi-tafsir */
.v-panel-left.multi-tafsir.tafsir-stacked .split-panel-inner { flex-direction:column; }
.v-panel-left.multi-tafsir.tafsir-stacked .tafsir-column { flex:none; max-height:50%; border-right:none; border-bottom:1px solid var(--border); }
.v-panel-left.multi-tafsir.tafsir-stacked .tafsir-column:last-child { border-bottom:none; }
.tafsir-col-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; margin:0 0 10px 0; background:linear-gradient(135deg, rgba(27,94,32,0.06), rgba(212,175,55,0.08)); border-bottom:2px solid var(--gold); border-radius:6px; font-weight:700; font-size:13px; color:var(--primary); text-align:center; position:sticky; top:0; z-index:3; }
.tafsir-col-header .tafsir-view-toggle { font-size:10px; padding:3px 8px; border:1px solid var(--border); border-radius:4px; background:var(--card-bg); color:var(--text-secondary); cursor:pointer; font-weight:600; font-family:inherit; white-space:nowrap; }
.tafsir-col-header .tafsir-view-toggle:hover { background:var(--gold); color:#1a1a1a; border-color:var(--gold); }
.v-panel-close { position:sticky; top:0; z-index:5; float:right; width:22px; height:22px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.06); border:1px solid var(--border); border-radius:4px; color:var(--text-muted); font-size:12px; cursor:pointer; margin-bottom:4px; transition:all 0.15s; }
.v-panel-close:hover { background:rgba(212,175,55,0.15); border-color:var(--gold); color:var(--gold); }
.collapse-btn { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; background:var(--bg-tertiary); border:1px solid var(--border); border-radius:3px; color:var(--text-muted); font-size:11px; cursor:pointer; padding:0; line-height:1; flex-shrink:0; transition:all 0.15s; }
.collapse-btn:hover { background:var(--ribbon-tab-hover); color:var(--text); }
.collapse-btn.collapsed { transform:rotate(-90deg); }

.verse-block { background:var(--card-bg); border-radius:8px; padding:10px; margin-bottom:8px; box-shadow:var(--shadow); border:1px solid var(--ayah-border); position:relative; border-right:3px solid var(--primary); transition:all 0.2s; }
.verse-block:hover { box-shadow:0 4px 16px rgba(0,0,0,0.12); }
.verse-block .v-select-wrap { position:absolute; top:8px; left:8px; z-index:2; }
.v-arabic-row { display:flex; align-items:baseline; gap:6px; direction:rtl; background:var(--bg-secondary); border:1px solid var(--border); border-radius:6px; padding:10px; margin-bottom:8px; }
.v-num { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; background:var(--verse-number-bg); color:var(--verse-number-color); border-radius:50%; font-size:10px; font-weight:700; font-family:'Traditional Arabic',serif; order:1; }
.v-ar { flex:1; font-size:var(--quran-font-size); line-height:1.55; color:var(--text); text-align:right; direction:rtl; font-weight:500; font-family:var(--quran-font-family); order:2; min-width:0; }
.v-act { flex-shrink:0; order:3; direction:ltr; }
.v-act button { background:none; border:none; padding:2px 6px; font-size:10px; color:var(--text-muted); cursor:pointer; border-radius:3px; }
.v-act button:hover { background:var(--ribbon-tab-hover); color:var(--primary); }
.v-act button svg { width:14px; height:14px; fill:currentColor; vertical-align:middle; }
.v-translations { border-top:1px dashed var(--border); padding-top:6px; margin-top:4px; }
.v-tr-label { font-size:9px; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.3px; margin-bottom:5px; }
.v-tr-item { font-size:var(--translation-font-size); font-family:var(--translation-font-family); line-height:1.48; padding:4px 0; display:flex; gap:5px; border-bottom:1px dashed var(--border); align-items:flex-start; }
.v-tr-item:last-child { border-bottom:0; }
.v-tr-item .tx { flex:1; min-width:0; color:var(--text-secondary); }
.v-tr-item .tx.rtl-t { direction:rtl; text-align:right; }
.v-tr-item .au { font-size:9px; color:var(--text-muted); font-style:italic; flex-shrink:0; margin-left:4px; }

.v-taf-block { background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:10px; margin-bottom:8px; position:relative; }
.v-taf-block .v-select-wrap { position:absolute; top:8px; left:8px; z-index:2; }
.v-taf-label { font-size:10px; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.3px; margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid var(--border); padding-left:24px; }
.v-taf-item { font-size:var(--tafsir-font-size); line-height:1.48; padding:4px 0; border-bottom:1px dashed var(--border); display:flex; gap:5px; align-items:flex-start; }
.v-taf-item:last-child { border-bottom:0; }
.v-taf-item .hd { font-size:10px; font-weight:700; color:var(--gold); margin-bottom:2px; }
.v-taf-item .bd { color:var(--text-secondary); }
.v-taf-item .bd.rtl-t { direction:rtl; text-align:right; }
.v-taf-item .bd.urdu-taf { font-family:'Jameel Noori Nastaleeq','Noto Naskh Arabic','Amiri',serif; font-size:var(--urdu-tafsir-font-size); line-height:1.7; }
.v-panel-empty { color:var(--text-muted); font-size:12px; text-align:center; padding:30px 12px; }
.arabic-flow { direction:rtl; text-align:right; line-height:2.1; padding:4px 8px; background:var(--card-bg); border:1px solid var(--ayah-border); border-radius:8px; box-shadow:var(--shadow); }
.arabic-flow .flow-ayah { display:inline; font-size:var(--quran-font-size); font-family:var(--quran-font-family); color:var(--text); padding:2px 0; transition:background .15s; }
.arabic-flow .flow-ayah:nth-child(odd) { background:linear-gradient(90deg,transparent,rgba(27,94,32,0.04)); }
.arabic-flow .flow-num { display:inline-flex; vertical-align:middle; align-items:center; justify-content:center; min-width:24px; height:24px; margin:0 6px; background:var(--verse-number-bg); color:var(--verse-number-color); border-radius:50%; font-size:11px; font-weight:800; font-family:'Traditional Arabic',serif; }
.translation-block { background:var(--card-bg); border:1px solid var(--ayah-border); border-radius:8px; padding:10px; margin-bottom:8px; box-shadow:var(--shadow); cursor:pointer; }
.translation-block .tr-ref { font-size:10px; font-weight:800; color:var(--gold); margin-bottom:6px; }
.translation-block .v-tr-item { border-bottom:0; padding:6px 0; }
.translation-flow { line-height:1.9; padding:12px; background:var(--card-bg); border:1px solid var(--ayah-border); border-radius:8px; box-shadow:var(--shadow); margin-bottom:10px; }
.translation-flow.rtl-t { direction:rtl; text-align:right; }
.translation-flow-title { font-size:11px; font-weight:800; color:var(--primary); border-bottom:1px solid var(--border); padding-bottom:6px; margin-bottom:8px; text-align:center; direction:ltr; }
.translation-flow .tr-verse-group { display:inline; cursor:pointer; }
.translation-flow .v-tr-item { display:inline; border-bottom:0; padding:0; }
.translation-flow .sel-chk { vertical-align:middle; margin:0 4px; }
.translation-flow .tx { display:inline; }
.translation-flow .tx.rtl-t { direction:rtl; text-align:right; unicode-bidi:embed; }
.translation-flow .flow-num { display:inline-flex; vertical-align:middle; align-items:center; justify-content:center; min-width:20px; height:20px; margin:0 5px; background:var(--verse-number-bg); color:var(--verse-number-color); border-radius:50%; font-size:10px; font-weight:800; font-family:'Traditional Arabic',serif; direction:ltr; }
.select-num {
    border:0;
    padding:0;
    cursor:pointer;
    transition:background .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.select-num:hover {
    box-shadow:0 0 0 3px rgba(212,175,55,.18);
    transform:translateY(-1px);
}
.select-num.selected {
    background:var(--gold);
    color:#1a1a1a;
    box-shadow:0 0 0 3px rgba(212,175,55,.22);
}
.tafsir-panel { background:var(--editor-bg); }
#vPanelArabic .panel-toolbar { background: linear-gradient(135deg, rgba(27,94,32,0.1), rgba(212,175,55,0.06)); border-color: var(--panel-verses-accent); }
#vPanelTranslation .panel-toolbar { background: linear-gradient(135deg, rgba(26,35,126,0.08), rgba(212,175,55,0.06)); border-color: var(--panel-translation-accent); }
#vPanelTafsir .panel-toolbar { background: linear-gradient(135deg, rgba(0,77,64,0.08), rgba(212,175,55,0.06)); border-color: var(--panel-tafsir-accent); }
.arabic-flow { direction:rtl; text-align:right; line-height:2.1; padding:4px 8px; background:var(--panel-verses-bg); border:2px solid rgba(27,94,32,0.15); border-radius:8px; box-shadow:var(--shadow); }
.translation-flow { line-height:1.9; padding:12px; background:var(--panel-translation-bg); border:2px solid rgba(26,35,126,0.12); border-radius:8px; box-shadow:var(--shadow); margin-bottom:10px; }
.v-taf-block { background:var(--panel-tafsir-bg); border:2px solid rgba(0,77,64,0.12); border-radius:8px; padding:10px; margin-bottom:8px; position:relative; box-shadow:var(--shadow); }

/* Notes */
.notes-container { padding:16px; max-width:1100px; margin:0 auto; flex:1; overflow-y:auto; }
.notes-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.notes-header h2 { font-size:18px; color:var(--text); }
.notes-actions { display:flex; gap:6px; flex-wrap:wrap; }
.notes-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border:1px solid var(--border); background:var(--card-bg); border-radius:4px; font-size:11px; font-weight:600; cursor:pointer; color:var(--text); text-decoration:none; font-family:inherit; }
.notes-btn:hover { border-color:var(--gold); background:var(--ribbon-tab-hover); }
.notes-btn.danger { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.notes-btn.danger:hover { background:#fee2e2; }
.notes-empty { color:var(--text-muted); text-align:center; padding:40px 20px; font-size:13px; }
.note-card { background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:10px; position:relative; }
.note-card .note-type { display:inline-block; font-size:8px; font-weight:800; padding:2px 6px; border-radius:3px; margin-bottom:6px; }
.note-type.verse { background:#E8F5E9; color:#2E7D32; }
.note-type.translation { background:#FFF8E1; color:#F9A825; }
.note-type.tafsir { background:#E3F2FD; color:#1565C0; }
.note-type.manual { background:#f3e8ff; color:#7e22ce; }
.note-card .note-meta { font-size:9px; color:var(--text-muted); margin-bottom:4px; }
.note-card .note-text { font-size:15px; line-height:1.65; color:var(--text); }
.note-card .note-text.rtl { direction:rtl; text-align:right; font-family:'Noto Naskh Arabic','Amiri',serif; }
.note-card .note-text.urdu { direction:rtl; text-align:right; font-family:'Jameel Noori Nastaleeq','Noto Naskh Arabic','Amiri',serif; font-size:16px; line-height:1.8; }
.note-card .note-remove { position:absolute; top:8px; right:8px; background:none; border:none; color:#991b1b; cursor:pointer; font-size:14px; line-height:1; opacity:0.5; }
.note-card .note-remove:hover { opacity:1; z-index:2; }
.note-comment-wrap { margin-top:8px; padding-top:6px; border-top:1px dashed var(--border); }
.note-comment-input { width:100%; min-height:28px; padding:5px 8px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-size:12px; font-family:inherit; resize:vertical; line-height:1.4; transition:border-color 0.15s; }
.note-comment-input:focus { border-color:var(--gold); outline:none; box-shadow:0 0 0 2px rgba(212,175,55,0.1); }
.note-comment-input::placeholder { color:var(--text-muted); font-style:italic; }

/* Dashboard cards */
.dash-card { background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:24px 18px; text-decoration:none; color:var(--text); display:block; box-shadow:var(--shadow); transition:all 0.28s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden; }
.dash-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.15); border-color:var(--gold); }
.dash-card .dash-icon-wrap { width:60px; height:60px; border-radius:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; padding:14px; transition:transform 0.3s ease; }
.dash-card:hover .dash-icon-wrap { transform:scale(1.12); }
.dash-card .dash-icon-wrap svg { width:100%; height:100%; fill:currentColor; }

/* Settings */
.settings-panel { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:10000; justify-content:center; align-items:center; }
.settings-panel.show { display:flex; }
.settings-box { background:var(--card-bg); border:2px solid var(--gold); border-radius:12px; padding:24px; max-width:440px; width:90%; max-height:80vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.settings-box h2 { color:var(--gold); font-size:17px; margin-bottom:14px; text-align:center; }
.settings-box .sg { margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.settings-box .sg h3 { color:var(--text); font-size:12px; margin-bottom:6px; }
.settings-box .sr { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.settings-box .sr label { color:var(--text-muted); font-size:10px; min-width:70px; }
.settings-box .sr select, .settings-box .sr input[type="range"] { flex:1; background:var(--bg-tertiary); border:1px solid var(--border); border-radius:3px; color:var(--text); padding:3px 6px; font-size:10px; font-family:inherit; }
.settings-box .sr .va { color:var(--gold); font-size:10px; min-width:28px; text-align:center; }
.settings-close { display:block; margin:14px auto 0; background:var(--primary); color:#fff; border:none; padding:7px 24px; border-radius:6px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
.settings-close:hover { background:var(--primary-light); }

/* Status bar */
.status-bar { background:var(--status-bg); color:var(--status-text); display:flex; align-items:center; justify-content:space-between; padding:8px 16px; font-size:12px; flex-shrink:0; transition:background 0.3s; z-index:100; gap:10px; flex-wrap:wrap; }
.status-cards { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.status-card { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:5px 12px; transition:all .2s; }
.status-card:hover { background:rgba(255,255,255,0.12); border-color:var(--gold); }
.status-card i { font-size:14px; color:var(--gold); flex-shrink:0; }
.status-card-info { display:flex; flex-direction:column; line-height:1.3; }
.status-card-label { font-size:9px; text-transform:uppercase; letter-spacing:.5px; opacity:0.6; }
.status-card-value { font-size:11px; font-weight:700; }
.status-right { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.status-left, .status-right { display:flex; align-items:center; gap:16px; }
.status-item { display:flex; align-items:center; gap:5px; opacity:0.9; }
.status-item i { font-size:11px; }

.search-hit { background:#fff2a8; color:#1f2933; border-radius:2px; padding:0 1px; }
.verse-block:target { outline:2px solid var(--gold); outline-offset:1px; }
.verse-block.ayat-focus { outline:2px solid var(--gold); outline-offset:1px; box-shadow:0 4px 15px rgba(212,175,55,.22); }

body.reader-stacked .split-view { flex-direction:column; }
body.reader-stacked .v-panel-left { max-height:40%; border-right:0; border-bottom:2px solid var(--gold); }
body.reader-stacked .v-panel-left, body.reader-stacked .v-panel-right { width:100% !important; min-width:0; flex:none; }
body.reader-stacked .split-panel { width:100% !important; min-width:0; flex:none; }

@media (max-width:1400px) { .sidebar.open { width:240px; } .sidebar.search-wide.open { width:340px; } }
@media (max-width:1100px) { .ribbon-btn .btn-label { display:none; } .sidebar.open { width:200px; } }
@media (max-width:768px) {
    .ribbon-toolbar { justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding:5px 8px; gap:4px; }
    .ribbon-toolbar::-webkit-scrollbar { height:3px; }
    .ribbon-toolbar::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:2px; }
    .ribbon-btn { padding:6px 10px; font-size:11px; border-radius:6px; gap:4px; }
    .ribbon-btn .btn-icon-wrap { width:18px; height:18px; border-radius:4px; }
    .ribbon-btn .btn-icon-wrap i { font-size:10px; }
    .ribbon-btn .btn-icon-wrap svg { width:11px; height:11px; }
    .ribbon-divider { height:20px; margin:0 2px; }
    .ribbon-tabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding:0 4px; }
    .ribbon-tabs::-webkit-scrollbar { height:2px; }
    .ribbon-tab { padding:7px 12px; font-size:11px; white-space:nowrap; }
    .ribbon-titlebar { padding:3px 8px; font-size:11px; flex-wrap:wrap; gap:4px; }
    .ribbon-titlebar-left { gap:6px; }
    .ribbon-titlebar-left .logo-icon svg { width:16px; height:16px; }
    .ribbon-titlebar-right { gap:5px; }
    .theme-toggle { padding:3px 8px; font-size:10px; gap:4px; }
    .theme-toggle i { font-size:11px; }
    .theme-switch-track { width:28px; height:14px; }
    .theme-switch-thumb { width:10px; height:10px; top:2px; left:2px; }
    .dark-mode .theme-switch-thumb { left:16px; }
    .tb-user-label { max-width:70px; font-size:10px; }
    .sidebar.open, .sidebar.search-wide.open { width:min(88vw,300px); }
    .v-panel-left { width:100% !important; min-width:100% !important; flex:none; max-height:none; border-right:0; border-top:2px solid var(--gold); border-bottom:0; order:1; }
    .split-panel { width:100% !important; min-width:100% !important; flex:none; }
    .v-panel-left.no-tafsir { display:none; }
    .v-panel-left.no-tafsir ~ .split-divider { display:none; }
    #vPanelArabic { order:1 !important; min-height:42vh; }
    #vPanelTranslation { order:2 !important; min-height:32vh; }
    #vPanelTafsir { order:3 !important; min-height:32vh; }
    .v-panel-right { width:100% !important; min-width:100% !important; flex:none; height:auto; max-height:none; order:2; }
    body .split-view { flex-direction:column; }
    .split-divider { display:none; }
    .split-panel { padding:8px; }
    .split-panel.panel-minimized { flex:none !important; min-width:100% !important; min-height:46px; }
    .arabic-flow { min-height:28vh; }
    .verse-block { padding:8px; margin-bottom:6px; }
    .v-arabic-row { padding:8px; gap:4px; }
    .v-num { width:20px; height:20px; font-size:9px; }
    .v-act button svg { width:12px; height:12px; }
    .collapse-btn { width:18px; height:18px; font-size:9px; }
    .page-btn { padding:6px 10px; font-size:12px; min-width:34px; text-align:center; }
    .pagination-bar { padding:6px 0; }
    .pagination-info { font-size:9px; }
    .activity-bar { width:44px; padding-top:6px; }
    .activity-icon { width:34px; height:34px; font-size:15px; border-radius:8px; margin-bottom:2px; }
    .activity-icon svg { width:16px; height:16px; }
    .activity-icon i { font-size:14px !important; }
    .activity-icon.active::before { top:8px; bottom:8px; width:2px; }
    .select-all-bar { padding:3px 8px; font-size:10px; gap:5px; min-height:24px; }
    .select-all-bar label { font-size:9px; }
    .sel-chk { width:13px; height:13px; }
    .sel-action { font-size:9px; padding:2px 8px; }
    .settings-box { max-width:95vw; padding:16px; max-height:85vh; }
    .settings-box h2 { font-size:15px; }
    .settings-box .sg h3 { font-size:11px; }
    .settings-box .sr label { font-size:9px; min-width:60px; }
    .settings-close { font-size:12px; padding:6px 20px; }
    .status-bar { padding:3px 8px; font-size:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .status-left, .status-right { gap:8px; white-space:nowrap; }
    .status-item { gap:3px; }
    .status-item i { font-size:9px; }
    #statusLineCol { display:none; }
    .tafsir-col-header { padding:8px 10px; font-size:11px; }
    .tafsir-col-header .tafsir-view-toggle { font-size:8px; padding:2px 6px; }
    .v-taf-block { padding:8px; }
    .v-taf-label { font-size:9px; padding-left:20px; }
    .notes-container { padding:10px; }
    .notes-header { flex-wrap:wrap; gap:6px; }
    .notes-header h2 { font-size:16px; }
    .notes-btn { padding:5px 10px; font-size:10px; }
    .note-card { padding:10px; }
    .note-card .note-text { font-size:14px; }
    .note-card .note-text.urdu { font-size:14px; }
    .settings-panel { align-items:flex-start; padding-top:20px; }
}
@media (max-width:480px) {
    .ribbon-titlebar { flex-direction:column; align-items:flex-start; gap:4px; padding:4px 6px; }
    .ribbon-titlebar-right { width:100%; justify-content:space-between; }
    .ribbon-tab { padding:5px 8px; font-size:9px; }
    .ribbon-btn { padding:5px 7px; }
    .ribbon-btn .btn-label { display:none; }
    .ribbon-divider { display:none; }
    .ribbon-toolbar { gap:2px; }
    .activity-bar { width:38px; }
    .activity-icon { width:28px; height:28px; font-size:13px; border-radius:6px; }
    .activity-icon svg { width:14px; height:14px; }
    .activity-icon i { font-size:12px !important; }
    .activity-icon.active::before { top:6px; bottom:6px; width:2px; }
    .sidebar.open, .sidebar.search-wide.open { width:92vw; }
    .sidebar-header { padding:12px 14px; font-size:10px; letter-spacing:1px; }
    .sidebar-header .close-sidebar { font-size:16px; padding:3px 6px; }
    .cs-surah { padding:6px 12px; }
    .cs-surah .idx { width:22px; height:22px; font-size:9px; }
    .cs-surah .nm-e { font-size:11px; }
    .cs-surah .nm-a { font-size:9px; }
    .tree-hdr { padding:5px 12px; font-size:11px; margin:0 4px; }
    .cs-item { padding:4px 12px 4px 28px; font-size:10px; margin:0 4px; }
    .cs-search-form { padding:10px 12px; }
    .cs-search-form input, .cs-search-form select { padding:6px 8px; font-size:10px; }
    .cs-search-form button { padding:7px 10px; font-size:11px; }
    .cs-result { padding:8px 10px; margin:4px; }
    .cs-result .ref { font-size:10px; }
    .cs-result .txt { font-size:10px; }
    .v-panel-left { height:34%; max-height:34%; }
    #vPanelArabic { height:auto !important; max-height:none !important; min-height:42vh !important; }
    .verse-block { padding:6px; margin-bottom:5px; border-radius:6px; border-right-width:2px; }
    .v-arabic-row { padding:6px; gap:3px; border-radius:5px; flex-wrap:wrap; }
    .v-num { width:18px; height:18px; font-size:8px; }
    .sel-chk { width:12px; height:12px; }
    .collapse-btn { width:16px; height:16px; font-size:8px; }
    .v-ar { font-size:calc(var(--quran-font-size) * 0.7) !important; line-height:1.45; }
    .v-tr-item { font-size:calc(var(--translation-font-size) * 0.85) !important; }
    .v-taf-item { font-size:calc(var(--tafsir-font-size) * 0.85) !important; }
    .v-tr-label { font-size:8px; }
    .v-act button { padding:2px 4px; font-size:8px; }
    .v-act button svg { width:10px; height:10px; }
    .page-btn { padding:5px 8px; font-size:11px; min-width:28px; }
    .pagination-btns { gap:2px; }
    .select-all-bar { padding:2px 6px; font-size:9px; gap:3px; flex-wrap:wrap; }
    .select-all-bar label { font-size:8px; gap:2px; }
    .sel-action { font-size:8px; padding:2px 6px; }
    .surah-title-pack { padding:6px 0; }
    .surah-title-pack .ar { font-size:16px; }
    .surah-title-pack .en { font-size:12px; }
    .surah-title-pack .meta { font-size:9px; }
    .verse-jump-input { width:36px; height:24px; font-size:10px; }
    .verse-jump-btn { padding:3px 7px; font-size:9px; }
    .status-bar { font-size:9px; padding:2px 6px; }
    .status-left, .status-right { gap:5px; }
    #statusLineCol, #statusDate { display:none; }
    .settings-box { max-width:98vw; padding:12px; border-radius:8px; }
    .settings-box h2 { font-size:14px; margin-bottom:10px; }
    .settings-box .sg { margin-bottom:8px; padding-bottom:8px; }
    .settings-box .sr { gap:5px; margin-bottom:4px; }
    .settings-box .sr label { font-size:8px; min-width:50px; }
    .settings-box .sr select, .settings-box .sr input[type="range"] { font-size:9px; padding:2px 4px; }
    .settings-box .sr .va { font-size:9px; min-width:24px; }
    .settings-close { font-size:11px; padding:5px 16px; margin-top:8px; }
    .tafsir-col-header { padding:6px 8px; font-size:10px; border-radius:4px; }
    .tafsir-col-header .tafsir-view-toggle { font-size:7px; padding:2px 5px; }
    .v-taf-block { padding:6px; border-radius:6px; }
    .v-taf-label { font-size:8px; padding-left:16px; }
    .v-panel-close { width:18px; height:18px; font-size:10px; }
    .notes-header h2 { font-size:14px; }
    .notes-btn { padding:4px 8px; font-size:9px; }
    .notes-actions { gap:4px; }
    .note-card { padding:8px; border-radius:6px; }
    .note-card .note-text { font-size:13px; line-height:1.5; }
    .note-card .note-text.urdu { font-size:13px; }
    .note-card .note-remove { top:5px; right:5px; font-size:12px; }
    .note-comment-input { font-size:11px; min-height:24px; padding:4px 6px; }
    .dash-card { padding:14px 10px; border-radius:10px; }
    .dash-icon-wrap { width:40px; height:40px; border-radius:10px; padding:10px; }
    .dash-card .dash-icon-wrap svg { width:80%; height:80%; }
}
@media (max-width:380px) {
    .ribbon-tab { padding:4px 6px; font-size:8px; }
    .activity-bar { width:32px; }
    .activity-icon { width:24px; height:24px; font-size:11px; border-radius:5px; }
    .activity-icon svg { width:12px; height:12px; }
    .activity-icon i { font-size:10px !important; }
    .sidebar.open, .sidebar.search-wide.open { width:96vw; }
    .v-panel-left { height:30%; max-height:30%; }
    #vPanelArabic { height:auto !important; max-height:none !important; min-height:42vh !important; }
    .verse-block { padding:5px; }
    .v-arabic-row { padding:5px; }
    .v-num { width:16px; height:16px; font-size:7px; }
    .page-btn { padding:4px 6px; font-size:10px; min-width:24px; }
    .status-item { gap:1px; }
    #statusMode { display:none; }
    #modeIndicator { display:none; }
    .ribbon-titlebar-left strong { font-size:10px; }
}