:root{--bg:#f3f7f5;--card:#fff;--ink:#12382c;--muted:#526b62;--line:#cbded3;--green:#087e43;--dark:#035b36;--gold:#dba72b;--soft:#e7f5ec;--danger:#a32327;--radius:16px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 system-ui,'Segoe UI',Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}a{color:var(--green)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.skip{position:absolute;transform:translateY(-150px);background:#fff;padding:10px;z-index:9}.skip:focus{transform:none}.uq-app{max-width:1600px;margin:auto}.uq-top{background:linear-gradient(120deg,#053c2a,#087e43 70%,#20a36c);color:white;display:flex;gap:20px;justify-content:space-between;align-items:center;padding:20px clamp(14px,3vw,36px);border-bottom:5px solid var(--gold)}.uq-brand{display:flex;align-items:center;gap:17px}.logo{font-size:46px;color:#ffde84}.eyebrow{letter-spacing:1.6px;font-size:11px;font-weight:800;color:#fff2c3}.uq-top h1{font-size:clamp(19px,3vw,28px);margin:0;line-height:1.3}.uq-top h1 strong{color:#ffe19a}.uq-top p{margin:4px 0 0;font-size:13px;opacity:.95}.uq-top-actions{display:flex;gap:8px;flex-wrap:wrap}.uq-top button{border-radius:10px;padding:8px 14px;font-weight:700}.uq-top .outline{background:transparent;color:white;border:1px solid #a3d5bd}.uq-top .close{background:#d02b32;color:white;border:1px solid #ffcbd0}.dashboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(260px,2fr);gap:12px;padding:16px clamp(12px,2.5vw,30px)}.stat,.ayah-form{border-radius:var(--radius);background:var(--card);border:1px solid var(--line);padding:10px 15px;min-height:78px}.stat{display:flex;flex-direction:column;justify-content:center}.stat b{font-size:24px;color:var(--green);line-height:1.2}.stat span{font-size:12px;color:var(--muted)}.ayah-form label{display:block;font-size:12px;font-weight:700;color:var(--muted)}.ayat-input{display:flex;gap:7px;align-items:center}.ayat-input input{width:68px;min-width:0;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:5px 7px}.ayat-input button,.primary{border:0;background:var(--green);color:white;border-radius:10px;padding:7px 12px;font-weight:750}.ayah-form small{font-size:11px;color:var(--muted)}.uq-layout{display:grid;grid-template-columns:minmax(260px,325px) minmax(0,1fr);gap:16px;padding:0 clamp(12px,2.5vw,30px) 24px}.sidebar,.lesson{border:1px solid var(--line);background:var(--card);border-radius:var(--radius);min-width:0}.sidebar{align-self:start;position:sticky;top:8px;max-height:calc(100dvh - 16px);display:flex;flex-direction:column;overflow:hidden}.sidebar-head{padding:16px;border-bottom:1px solid var(--line)}.sidebar-head label{display:block;font-weight:700;margin-bottom:5px}.sidebar-head input{width:100%;padding:10px 12px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:10px}.filters{padding:9px 10px;display:flex;flex-wrap:wrap;gap:7px;max-height:150px;overflow:auto}.filter{padding:6px 9px;border-radius:18px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:11px;font-weight:750}.filter.active{background:var(--green);border-color:var(--green);color:white}.nav-head{display:flex;align-items:center;justify-content:space-between;padding:0 12px 8px;font-size:12px;color:var(--muted);gap:5px}.favorite-filter{white-space:nowrap}.module-list{overflow:auto;min-height:120px;flex:1;padding:0 8px 8px}.module-btn{display:flex;align-items:flex-start;gap:9px;text-align:left;width:100%;border:1px solid transparent;border-radius:11px;padding:9px 8px;background:transparent;color:var(--ink);margin:2px 0}.module-btn:hover{background:var(--bg);border-color:var(--line)}.module-btn.active{background:var(--soft);border-color:#70b995}.module-num{background:#e6f4ed;color:#05663b;min-width:30px;padding:4px 0;text-align:center;border-radius:9px;font-size:12px;font-weight:800}.module-txt{flex:1;font-size:13px;line-height:1.4}.module-txt small{display:block;color:var(--muted);font-size:11px}.sidebar-foot{padding:12px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:7px}.outline,.quiet{background:var(--card);color:var(--green);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-weight:650}.quiet{color:var(--muted)}.lesson{min-height:500px;padding:clamp(15px,3vw,32px)}.lesson-breadcrumb{font-size:12px;color:var(--muted);margin-bottom:10px}.lesson h2{font-size:clamp(23px,3vw,34px);line-height:1.35;margin:0 0 3px}.arab-title{font-family:'Amiri','Scheherazade New','Noto Naskh Arabic',serif;direction:rtl;color:var(--dark);font-size:28px;line-height:1.7;margin:3px 0 16px}.lead{font-size:17px;line-height:1.9;color:var(--ink)}.tags,.actions,.source-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.tag{background:var(--soft);color:var(--dark);border:1px solid #b8ddc6;border-radius:40px;font-size:11px;padding:3px 10px;font-weight:700}.actions button,.source-actions a,.source-actions button{background:var(--card);border:1px solid var(--line);color:var(--green);border-radius:10px;padding:9px 12px;text-decoration:none;font-weight:700;font-size:13px}.actions button.on{background:var(--green);color:white}.section{border-top:1px solid var(--line);margin-top:23px;padding-top:18px}.section h3{margin:0 0 10px;font-size:18px}.section p{margin:4px 0 12px}.note{border-left:4px solid var(--gold);background:#fffae9;color:#5d4912;padding:12px 16px;border-radius:9px;margin:14px 0}.context{background:var(--soft);border:1px solid #b9dec7;border-radius:12px;padding:16px}.context .context-heading{font-size:21px;font-weight:800}.research-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.research-grid>div{border:1px solid var(--line);padding:14px;border-radius:12px}.research-grid b{display:block;margin-bottom:7px;color:var(--green)}.source-list{margin:12px 0;padding-left:20px}.source-list li{padding-bottom:6px}.lesson button{transition:background .15s}.resource-frame{height:460px;width:100%;border:1px solid var(--line);background:#fff;border-radius:12px}.quiz-choice{display:block;width:100%;margin:8px 0;text-align:left;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:12px}.quiz-choice.correct{background:#dcfce7;border-color:#16a34a;color:#14532d}.quiz-choice.incorrect{background:#fee2e2;border-color:#ef4444;color:#7f1d1d}.quiz-choice:disabled{cursor:default}.quiz-feedback{font-weight:700;margin-top:10px}.lesson-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px}.lesson-nav button{padding:9px 15px;background:var(--green);color:#fff;border:0;border-radius:8px}footer{padding:15px 30px 25px;text-align:center;color:var(--muted);font-size:12px}.notice{font-size:12px;color:var(--muted)}.check-icon{color:var(--green)}.muted{color:var(--muted)}[data-theme="dark"]{--bg:#101c19;--card:#1b2a26;--ink:#f0f7f2;--muted:#b9cfc3;--line:#456358;--green:#4fd69b;--dark:#c1f7d7;--soft:#244333}[data-theme="dark"] .filter.active,[data-theme="dark"] .primary,[data-theme="dark"] .lesson-nav button,[data-theme="dark"] .ayat-input button{background:#086b41;color:#fff}[data-theme="dark"] .module-num{background:#315745;color:#e2fce8}[data-theme="dark"] .note{background:#49391b;color:#fff1c4}[data-theme="dark"] .uq-top{color:#fff}[data-theme="dark"] .uq-top h1 strong{color:#ffdb85}@media(max-width:900px){.uq-layout{grid-template-columns:1fr}.sidebar{position:static;max-height:none}.module-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:260px}.dashboard{grid-template-columns:repeat(3,1fr)}.ayah-form{grid-column:span 3}.lesson{min-height:300px}}@media(max-width:600px){.uq-top{align-items:flex-start;flex-direction:column}.uq-top h1{font-size:22px}.uq-top-actions{width:100%;justify-content:flex-end}.dashboard{gap:7px}.stat{padding:9px}.stat b{font-size:20px}.stat span{font-size:10px}.module-list{grid-template-columns:1fr;max-height:230px}.research-grid{grid-template-columns:1fr}.lesson{padding:15px}.lesson h2{font-size:22px}.resource-frame{height:360px}.ayah-input input{width:63px}}

/* ULUMUL v3.1 — sidebar lebar, tanpa konten terpotong, daftar 36 tautan utuh.
   Semua kategori dan judul dibiarkan mengalir mengikuti halaman, tanpa scroll
   bersarang di dalam sidebar. Panel kajian kanan tetap terlihat pada desktop. */
.uq-app { max-width: 1920px; width: 100%; }
.uq-layout {
  grid-template-columns: clamp(390px, 33vw, 540px) minmax(0, 1fr);
  gap: 20px;
}
.sidebar {
  align-self: start;
  position: relative;
  top: auto;
  max-height: none;
  overflow: visible;
  min-width: 0;
}
.sidebar-head { padding: 18px 20px; }
.filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 9px;
  padding: 14px 16px;
  max-height: none;
  overflow: visible;
}
.filter {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
  min-height: 45px;
  white-space: normal;
  overflow-wrap: break-word;
  padding: 9px 12px;
  border-radius: 12px;
  line-height: 1.4;
  font-size: 13px;
  text-align: left;
}
.nav-head {
  padding: 12px 17px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  font-size: 13px;
}
.module-list {
  display: block;
  overflow: visible;
  max-height: none;
  min-height: 0;
  flex: none;
  padding: 8px 12px 12px;
}
.module-group-label {
  padding: 13px 8px 6px;
  margin: 7px 0 3px;
  color: var(--dark);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.module-btn {
  align-items: center;
  padding: 10px 12px;
  min-height: 60px;
  gap: 12px;
  margin: 3px 0;
}
.module-num { flex: 0 0 36px; min-width: 36px; font-size: 13px; }
.module-txt { min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.module-txt b { display: block; }
.module-txt small { font-size: 12px; }
.sidebar-foot { padding: 15px; }
/* Konten kajian tetap terbaca sewaktu daftar navigasi yang panjang digulir. */
.lesson {
  align-self: start;
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
@media (max-width: 1000px) {
  .uq-layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; max-height: none; overflow: visible; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible; gap: 4px 12px; }
  .module-group-label { grid-column: 1 / -1; }
  .lesson { position: static; max-height: none; overflow: visible; scrollbar-gutter: auto; }
}
@media (max-width: 620px) {
  .filters { grid-template-columns: minmax(0, 1fr); }
  .filter { min-height: 41px; }
  .module-list { display: block; }
  .module-btn { min-height: 54px; }
  .nav-head { gap: 8px; }
}
@media print {
  .uq-layout { display: block; }
  .sidebar { display: none; }
  .lesson { position: static; overflow: visible; max-height: none; }
}