:root{--green:#286447;--green2:#3e7b5d;--pale:#eef5f0;--ink:#193229;--muted:#65736d;--line:#dbe3de;--paper:#fffdf5;--red:#d92d20;--shadow:0 14px 40px rgba(24,50,40,.12)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:#f7f9f7}button,input,select{font:inherit}button{cursor:pointer}.topbar{position:fixed;z-index:30;top:0;left:0;right:0;height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:22px;padding:0 24px}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:750;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--green);color:#fff;font-family:serif;font-size:24px}.icon-button{display:none;border:0;background:none;font-size:22px}.search{max-width:650px;flex:1;margin:auto;background:#f4f6f4;border:1px solid transparent;border-radius:12px;display:flex;align-items:center;padding:0 14px}.search:focus-within{border-color:#91b19e;background:#fff}.search input{width:100%;border:0;outline:0;background:transparent;padding:12px}.identity{display:flex;gap:12px;align-items:center;font-size:13px}.guest-badge{background:#fff3d6;color:#7a5310;padding:7px 10px;border-radius:99px}.sidebar{position:fixed;z-index:20;top:72px;bottom:0;left:0;width:210px;background:#fff;border-right:1px solid var(--line);padding:24px 14px;display:flex;flex-direction:column;justify-content:space-between}.sidebar nav{display:grid;gap:6px}.nav-item{border:0;background:none;border-radius:10px;color:var(--muted);display:flex;gap:13px;align-items:center;padding:13px;text-align:left}.nav-item span{font-size:19px;width:22px}.nav-item.active,.nav-item:hover{background:var(--pale);color:var(--green);font-weight:650}.sidebar-note{font-family:Georgia,serif;font-style:italic;color:#7b8c83;padding:12px;font-size:13px}main{margin-left:210px;padding:112px 40px 50px;max-width:1500px}.view{display:none}.view.active{display:block}.welcome{min-height:270px;border-radius:24px;padding:42px;background:linear-gradient(120deg,rgba(22,73,50,.97),rgba(53,121,83,.88)),radial-gradient(circle,#5c9b75,#164932);color:#fff;display:flex;align-items:flex-end;justify-content:space-between;box-shadow:var(--shadow)}.welcome h1{font-family:Georgia,serif;font-size:42px;line-height:1.1;margin:9px 0 15px;font-weight:500}.welcome p:not(.eyebrow){max-width:590px;opacity:.85}.eyebrow{font-size:11px;letter-spacing:.15em;font-weight:800;margin:0;color:var(--green2)}.welcome .eyebrow{color:#cce5d6}.primary,.secondary,.text-button{border:0;border-radius:10px;padding:11px 16px}.primary{background:var(--green);color:#fff;font-weight:700}.welcome .primary{background:#fff;color:var(--green)}.primary.small{padding:8px 13px}.secondary{background:#fff;border:1px solid var(--line);color:var(--ink)}.text-button{background:none;color:var(--green);padding:7px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin:38px 0 15px}.section-heading h2,.reader-header h2,.placeholder-view h2{font-family:Georgia,serif;font-weight:500;font-size:29px;margin:5px 0}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.quick-grid button{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;text-align:left;display:grid;gap:4px;color:var(--ink)}.quick-grid button:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.quick-grid small{color:var(--muted)}.quick-grid strong{font-size:17px}.quick-grid span{text-align:right;font-family:serif;font-size:24px;color:var(--green)}.info-card{margin-top:20px;padding:17px;border:1px solid #ead8a8;background:#fffbef;border-radius:13px;display:flex;gap:13px}.info-card p{margin:4px 0;color:#6b6452;font-size:14px}.info-icon{display:grid;place-items:center;min-width:25px;height:25px;border-radius:50%;background:#e9c968}.reader-header{display:flex;align-items:end;justify-content:space-between;margin-bottom:14px}.reader-actions{display:flex;align-items:center;gap:10px}.student-strip{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 15px;margin-bottom:12px;display:flex;gap:22px}.student-strip label{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--muted)}.student-strip select,.student-strip input{border:1px solid var(--line);border-radius:7px;padding:7px;background:#fff}.workspace{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px}.toolrail{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:6px;height:max-content;position:sticky;top:88px}.tool{border:0;background:none;border-radius:9px;min-height:58px;font-size:22px;color:var(--muted)}.tool small{display:block;font-size:10px;margin-top:3px}.tool.active{background:var(--pale);color:var(--green)}#colorPicker{width:100%;height:40px;border:0;background:none}.page-viewport{height:calc(100vh - 300px);min-height:500px;overflow:auto;touch-action:none;background:#dfe5e0;border-radius:14px;padding:22px;display:flex;justify-content:center}.quran-page{width:min(800px,100%);aspect-ratio:2/3;min-width:520px;position:relative;background:var(--paper);border:1px solid #d5cdb0;box-shadow:0 8px 25px rgba(0,0,0,.16);padding:7% 8%;text-align:center;overflow:hidden;transform-origin:top center}.page-ornament{font-size:30px;color:#a88d45}.surah-label{font-family:serif;font-size:30px;margin:10px auto;border-top:1px solid #bda969;border-bottom:1px solid #bda969;padding:10px}.basmala{font-family:"Traditional Arabic","Amiri",serif;font-size:35px;margin:30px 0}.ayahs{font-family:"Traditional Arabic","Amiri",serif;font-size:37px;line-height:1.9}.ayahs p{margin:4px}.ayahs b{color:#8f793b;font-weight:400}.translation{position:absolute;bottom:4%;left:10%;right:10%;color:#8e8a79;font-size:12px}#annotationCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:5;touch-action:none}.actionbar{display:flex;justify-content:center;align-items:center;gap:8px;padding:12px;position:sticky;bottom:5px;z-index:12;background:rgba(247,249,247,.94);backdrop-filter:blur(8px);border-radius:13px}.danger{color:var(--red)}.guest-save-note{font-size:12px;color:var(--muted)}.gesture-help{text-align:center;color:var(--muted);font-size:12px}.placeholder-view{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px}.history-list{display:grid;gap:10px;margin-top:20px}.history-item{border:1px solid var(--line);padding:15px;border-radius:10px}dialog{border:0;border-radius:18px;padding:0;box-shadow:var(--shadow);width:min(430px,calc(100% - 28px))}dialog::backdrop{background:rgba(12,31,23,.58);backdrop-filter:blur(3px)}dialog form{padding:30px;display:grid;gap:15px;position:relative}dialog h2{font-family:Georgia,serif;margin:0;font-size:29px}dialog label{display:grid;gap:6px;font-size:13px;color:var(--muted)}dialog input{border:1px solid var(--line);padding:12px;border-radius:9px}.dialog-close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:25px}.form-message{margin:0;color:var(--red);font-size:13px}.toast{position:fixed;z-index:99;bottom:25px;left:50%;transform:translate(-50%,30px);background:#173b2c;color:#fff;padding:11px 18px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}.auth-only{display:none!important}body[data-authenticated="1"] .auth-only{display:flex!important}
@media(max-width:900px){.topbar{padding:0 14px;height:64px}.icon-button{display:block}.brand span:last-child{display:none}.search{order:3;position:absolute;top:72px;left:14px;right:14px;max-width:none;box-shadow:0 4px 12px rgba(0,0,0,.06)}.identity>span{display:none}.sidebar{top:64px;transform:translateX(-105%);transition:.2s;box-shadow:var(--shadow)}.sidebar.open{transform:none}main{margin:0;padding:130px 14px 96px}.welcome{padding:28px;min-height:300px;display:block}.welcome h1{font-size:34px}.welcome .primary{margin-top:18px}.quick-grid{grid-template-columns:1fr 1fr}.page-viewport{height:calc(100vh - 350px);padding:8px;justify-content:flex-start}.workspace{display:block}.toolrail{position:fixed;z-index:25;left:8px;right:8px;bottom:8px;top:auto;height:auto;display:flex;flex-direction:row;justify-content:space-around;border-radius:16px;box-shadow:var(--shadow)}.tool{min-height:54px;min-width:54px}.toolrail input{max-width:45px}.actionbar{bottom:75px;overflow-x:auto;justify-content:flex-start}.actionbar button{white-space:nowrap}.gesture-help{margin-bottom:75px}.student-strip{overflow:auto}.quran-page{min-width:520px}.reader-header{align-items:center}.reader-header h2{font-size:23px}}
@media(max-width:520px){.quick-grid{grid-template-columns:1fr}.welcome h1{font-size:30px}.reader-actions span{font-size:12px}.student-strip{gap:10px}.student-strip label{min-width:max-content}}

/* Mushaf reader v2: fixed Madinah pages with a separate annotation layer */
.reader-view.active{position:relative}.page-jump{border:0;background:transparent;color:var(--ink);display:flex;gap:4px;align-items:baseline;padding:7px 9px}.page-jump span,.page-jump small{font-size:11px;color:var(--muted)}.page-jump strong{font-size:18px}.correction-toggle{margin-left:6px}.workspace.correction-closed{grid-template-columns:1fr}.workspace.correction-closed .toolrail,.workspace.correction-closed~.actionbar{display:none}.workspace.correction-closed #annotationCanvas{pointer-events:none}.page-viewport{position:relative;height:calc(100vh - 250px);min-height:520px;padding:10px 44px 10px 10px;align-items:flex-start}.quran-page{padding:0;width:auto;height:100%;min-width:0;aspect-ratio:772/1040;background:#fff;border:0;flex:0 0 auto}.quran-page img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.page-scrubber{position:absolute;right:5px;top:12px;bottom:12px;width:34px;display:flex;justify-content:center;z-index:15}.page-scrubber input{appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;width:26px;height:100%;background:transparent;margin:0}.page-scrubber input::-webkit-slider-runnable-track{width:5px;background:rgba(40,100,71,.2);border-radius:8px}.page-scrubber input::-webkit-slider-thumb{-webkit-appearance:none;width:25px;height:42px;margin-left:-10px;border:2px solid #fff;border-radius:12px;background:var(--green);box-shadow:0 2px 8px rgba(0,0,0,.25)}.page-scrubber output{display:none;position:absolute;right:35px;top:45%;white-space:nowrap;background:#173b2c;color:#fff;border-radius:8px;padding:8px 10px;font-size:12px}.page-scrubber.dragging output{display:block}.reader-view .gesture-help{margin-top:7px}.reader-view .actionbar{position:fixed;left:50%;bottom:14px;transform:translateX(-42%);width:max-content;max-width:calc(100vw - 30px);box-shadow:var(--shadow)}
@media(min-width:901px){body.reader-mode .topbar .search{display:none}body.reader-mode .sidebar{width:72px;padding-inline:8px}body.reader-mode .sidebar .nav-item{font-size:0;justify-content:center}body.reader-mode .sidebar .nav-item span{font-size:20px;width:auto}body.reader-mode .sidebar-note{display:none}body.reader-mode main{margin-left:72px;padding:82px 18px 10px;max-width:none}.reader-view{margin-top:0}.reader-view .reader-header{margin-bottom:8px}.reader-view .student-strip{position:absolute;top:0;left:280px;right:330px;margin:0}.workspace:not(.correction-closed) .page-viewport{height:calc(100vh - 145px)}.workspace.correction-closed .page-viewport{height:calc(100vh - 136px)}.workspace:not(.correction-closed) .quran-page{max-width:calc(100vw - 240px)}.workspace.correction-closed .quran-page{max-width:calc(100vw - 160px)}.workspace:not(.correction-closed){grid-template-columns:70px 1fr}}
@media(max-width:900px){body.reader-mode .topbar,body.reader-mode .sidebar{display:none}body.reader-mode main{padding:0;margin:0;max-width:none}body.reader-mode .reader-view{height:100dvh;overflow:hidden}.reader-view .reader-header{height:52px;margin:0;padding:5px 8px;background:#fff;border-bottom:1px solid var(--line);align-items:center}.reader-view .reader-header>div:first-child{display:none}.reader-actions{width:100%;justify-content:center}.reader-actions .secondary{padding:7px 12px}.correction-toggle{margin-left:auto}.reader-view .student-strip{display:none!important}.page-viewport{height:calc(100dvh - 52px);min-height:0;border-radius:0;padding:0 31px 0 0;background:#dfe5e0;align-items:flex-start;justify-content:center;overflow-y:auto;overflow-x:hidden}.quran-page{width:100%;height:auto;max-height:none;aspect-ratio:772/1040;min-width:0!important;transform-origin:top center}.page-scrubber{right:0;top:8px;bottom:8px}.workspace{display:block}.toolrail{left:5px;right:5px;bottom:7px}.workspace.correction-closed .toolrail{display:none}.reader-view .actionbar{left:6px;right:6px;bottom:70px;transform:none;width:auto;max-width:none}.workspace.correction-closed~.actionbar{display:none}.gesture-help{display:none}.reader-view .guest-save-note{display:none}.reader-view .actionbar button{padding:9px 11px}}

/* Responsive Uthmani Hafs reader */
@font-face{font-family:UthmanicHafs;src:url('fonts/UthmanicHafs1Ver18.woff2') format('woff2');font-display:swap}.reading-mode-switch{display:flex;background:#edf2ee;border-radius:9px;padding:3px}.reading-mode-switch button{border:0;background:transparent;border-radius:7px;padding:7px 10px;color:var(--muted);font-size:12px}.reading-mode-switch button.active{background:#fff;color:var(--green);font-weight:750;box-shadow:0 1px 5px rgba(0,0,0,.08)}.page-mode-only{display:none!important}.reader-view.reading-page .page-mode-only{display:inline-flex!important}.responsive-workspace{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px}.responsive-toolbar{background:#fff;border:1px solid var(--line);border-radius:14px;padding:7px;display:flex;flex-direction:column;gap:5px;height:max-content;position:sticky;top:82px}.responsive-workspace.correction-closed{display:block}.responsive-workspace.correction-closed .responsive-toolbar{display:none}.mark-tool{border:0;background:transparent;border-radius:9px;min-height:53px;color:var(--muted);font-size:21px}.mark-tool small{display:block;font-size:9px;margin-top:3px}.mark-tool.active{background:var(--pale);color:var(--green)}.font-control{display:grid;gap:3px;text-align:center;font-size:10px;color:var(--muted)}.font-control input{width:100%}.responsive-scroll{position:relative;height:calc(100vh - 190px);overflow-y:auto;overflow-x:hidden;background:#e6ebe7;border-radius:14px;padding:18px 47px 40px 18px;scrollbar-width:thin}.responsive-quran{--quran-size:38px;width:min(850px,100%);min-height:100%;margin:auto;background:#fffdf7;border:1px solid #d9d0b5;border-radius:5px;padding:clamp(20px,5vw,56px);box-shadow:0 8px 24px rgba(0,0,0,.1);font-family:UthmanicHafs,"Traditional Arabic",serif;color:#173b2c;font-size:var(--quran-size);line-height:2.15;text-align:right}.responsive-surah-title{text-align:center;border-block:1px solid #b7a462;padding:12px;margin:0 0 18px;font-size:1.08em}.responsive-basmala{text-align:center;margin:15px 0 25px;font-size:1.05em}.responsive-ayah{display:inline;line-height:2.15}.quran-word{display:inline;position:relative;padding:1px 2px;border-radius:5px;cursor:inherit}.responsive-workspace:not(.correction-closed) .quran-word{cursor:crosshair}.quran-word.mark-circle{outline:3px solid #d92d20;outline-offset:3px;border-radius:50%}.quran-word.mark-underline{border-bottom:4px solid #d92d20}.quran-word.mark-highlight{background:rgba(245,166,35,.34)}.quran-word.mark-wrong::after{content:'×';position:absolute;color:#d92d20;font:700 20px sans-serif;top:-17px;left:50%;transform:translateX(-50%)}.ayah-marker{display:inline-grid;place-items:center;min-width:1.8em;height:1.8em;margin:0 .2em;border:1px solid #a79048;border-radius:50%;font:500 .42em Segoe UI,sans-serif;color:#7b672e;vertical-align:middle}.loading-quran{text-align:center;font:16px Segoe UI,sans-serif;color:var(--muted)}.surah-scrubber{position:absolute;right:5px;top:10px;bottom:10px;width:34px;display:flex;justify-content:center}.surah-scrubber input{appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;width:26px;height:100%;background:transparent}.surah-scrubber input::-webkit-slider-runnable-track{width:5px;background:rgba(40,100,71,.2);border-radius:8px}.surah-scrubber input::-webkit-slider-thumb{-webkit-appearance:none;width:25px;height:42px;margin-left:-10px;border:2px solid #fff;border-radius:12px;background:var(--green);box-shadow:0 2px 8px rgba(0,0,0,.25)}.surah-scrubber output{display:none;position:absolute;right:36px;top:45%;white-space:nowrap;background:#173b2c;color:#fff;padding:8px 10px;border-radius:8px;font:12px Segoe UI,sans-serif}.surah-scrubber.dragging output{display:block}.responsive-actionbar{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:9px}.responsive-workspace.correction-closed~.responsive-actionbar{display:none}
@media(min-width:901px){.responsive-scroll{height:calc(100vh - 145px)}.responsive-quran{font-size:var(--quran-size)}body.reader-mode .responsive-actionbar{position:fixed;z-index:20;bottom:12px;left:50%;transform:translateX(-45%);background:rgba(247,249,247,.94);padding:8px;border-radius:12px;box-shadow:var(--shadow)}}
@media(max-width:900px){.reading-mode-switch button{padding:7px 8px;font-size:11px}.responsive-workspace{display:block}.responsive-scroll{height:calc(100dvh - 52px);border-radius:0;padding:0 31px 78px 0;background:#e6ebe7}.responsive-quran{width:100%;min-height:100%;border:0;border-radius:0;padding:20px 18px 90px;font-size:var(--quran-size);box-shadow:none;line-height:2.05}.responsive-toolbar{position:fixed;z-index:28;left:5px;right:5px;bottom:7px;top:auto;display:flex;flex-direction:row;justify-content:space-around;border-radius:15px;box-shadow:var(--shadow)}.mark-tool{min-width:48px}.font-control{width:72px}.responsive-actionbar{position:fixed;z-index:27;left:6px;right:6px;bottom:73px;background:rgba(247,249,247,.96);padding:7px;border-radius:12px;box-shadow:var(--shadow)}.responsive-actionbar button{padding:9px 11px}.responsive-workspace.correction-closed~.responsive-actionbar{display:none}.surah-scrubber{right:0}.reader-view.reading-page .reading-mode-switch{display:none}.reader-view.reading-page .reader-nav{display:inline-flex!important}}
.responsive-surah-title span,.responsive-surah-title small{display:block}.responsive-surah-title small{font:600 13px Segoe UI,sans-serif;color:#6c776f;margin-top:4px;direction:ltr}