:root{--paper-0:#ffffff;--paper-50:#fcfaf3;--paper-100:#f7f2e6;--paper-200:#efe7d3;--paper-300:#e4d9bf;--paper-400:#cdbf9d;--ink-900:#24221b;--ink-700:#423c2f;--ink-500:#6f6857;--ink-400:#938a76;--ink-inv:#fdfaf3;--sage-50:#eef1e8;--sage-100:#dde3cf;--sage-200:#c2cdac;--sage-300:#9fae85;--sage-400:#7d8f63;--sage-500:#5b6f4e;--sage-600:#4a5b40;--sage-700:#3b4a34;--sage-800:#2d3825;--sage-900:#20281b;--gold-50:#faf1da;--gold-100:#f3e2b8;--gold-300:#d9b25f;--gold-500:#b88a3a;--gold-700:#8a6526;--ok-bg:#d8ecd5;--ok-solid:#3b7a3b;--ok-on:#ffffff;--warn-bg:#fbe9cd;--warn-solid:#c47a1c;--warn-on:#20180a;--danger-bg:#f6d7d7;--danger-solid:#b34141;--danger-on:#ffffff;--info-bg:#d6e7f0;--info-solid:#2b6589;--info-on:#ffffff;--neutral-bg:#eee8d8;--neutral-solid:#6f6857;--neutral-on:#ffffff;--bg:var(--paper-50);--surface:var(--paper-0);--surface-2:var(--paper-100);--surface-3:var(--paper-200);--ink:var(--ink-900);--ink-2:var(--ink-700);--ink-3:var(--ink-500);--brand:var(--sage-500);--brand-2:var(--sage-700);--brand-soft:var(--sage-100);--brand-ink:var(--sage-800);--gold:var(--gold-500);--gold-soft:var(--gold-100);--ok:var(--ok-solid);--warn:var(--warn-solid);--danger:var(--danger-solid);--info:var(--info-solid);--border:var(--paper-300);--border-2:var(--paper-400);--hero-bg:linear-gradient(150deg, var(--sage-50), var(--paper-100));--hero-border:var(--sage-200);--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-pill:999px;--radius:14px;--radius-sm:8px;--radius-lg:22px;--pad:16px;--shadow-sm:0 1px 2px rgba(60,40,10,.06);--shadow:0 4px 14px rgba(60,40,10,.1);--shadow-lg:0 16px 40px rgba(60,40,10,.18);--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:40px;--ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.2,1.1,.3,1);--dur-fast:.12s;--dur:.18s;--dur-slow:.26s;--font:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-arab:"Amiri","Scheherazade New","Noto Naskh Arabic", serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font);font-size:15px;line-height:1.5;color:var(--ink);background:radial-gradient(1200px 600px at 80% -10%,rgba(216,224,201,.6),transparent),radial-gradient(900px 600px at -10% 100%,rgba(243,226,184,.5),transparent),var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;text-size-adjust:100%;-webkit-text-size-adjust:100%}button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}input,select,textarea{font-family:inherit;font-size:inherit}@media (max-width: 820px){input,select,textarea,.input,.field input,.field select,.field textarea{font-size:16px!important}}a{color:var(--brand-2)}a:hover{color:var(--brand)}.h1{font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-.02em;margin:0}.h2{font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.01em;margin:0}.h3{font-size:17px;font-weight:600;line-height:1.3;margin:0}.eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}.muted{color:var(--ink-3)}.text-sm{font-size:13px}.text-xs{font-size:12px}.arab{font-family:var(--font-arab);direction:rtl;text-align:right;line-height:2}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--pad);box-shadow:var(--shadow-sm)}.card-soft{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--pad)}.card-tight{padding:12px}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid transparent;background:var(--surface-3);color:var(--ink);font-weight:500;font-size:14px;transition:transform .05s,box-shadow .15s,background .15s;white-space:nowrap}.btn:hover{box-shadow:var(--shadow-sm)}.btn:active{transform:translateY(1px)}.btn[disabled]{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--brand);color:var(--ink-inv)}.btn-primary:hover{background:var(--brand-2)}.btn-ghost{background:transparent;border:1px solid var(--border)}.btn-ghost:hover{background:var(--surface)}.btn-gold{background:var(--gold);color:var(--ink-inv)}.btn-danger{background:var(--danger);color:var(--ink-inv)}.btn-sm{padding:6px 14px;font-size:13px}.btn-lg{padding:14px 24px;font-size:16px}.btn-block{width:100%;justify-content:center}.btn-pill{background:var(--surface);border:1px solid var(--border)}@media (max-width: 820px){.btn{min-height:42px;padding:10px 18px}.btn-sm{min-height:38px;padding:8px 14px;font-size:13px}.btn-lg{min-height:48px;padding:14px 22px}}.input,.field input,.field select,.field textarea{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}.input:focus,.field :focus{border-color:var(--brand);box-shadow:0 0 0 3px #5b6f4e26}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:13px;font-weight:500;color:var(--ink-2)}.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}.badge-brand{background:var(--sage-100);color:var(--sage-800)}.badge-gold{background:var(--gold-100);color:#6b4f00}.badge-ok{background:var(--ok-bg);color:#1f4a1f}.badge-warn{background:var(--warn-bg);color:#6b4500}.badge-danger{background:var(--danger-bg);color:#7a2424}.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:4px}.stat-label{font-size:12px;color:var(--ink-3);font-weight:500}.stat-value{font-size:28px;font-weight:700;color:var(--ink);line-height:1}.stat-sub{font-size:12px;color:var(--ink-3)}.row{display:flex;gap:12px;align-items:center}.col{display:flex;flex-direction:column;gap:12px}.between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.grid{display:grid;gap:12px}.grid-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.grid-4{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.spacer{flex:1}.stack>*+*{margin-top:12px}@media (max-width: 540px){.grid-2,.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.row{flex-wrap:wrap;gap:8px}}.scroll-x{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}.scroll-x::-webkit-scrollbar{display:none}.scroll-x>*{flex-shrink:0}.action{background:var(--hero-bg);color:var(--ink);padding:22px 24px;border:1px solid var(--hero-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.action:after{content:"";position:absolute;top:-40%;right:-10%;width:220px;height:220px;background:radial-gradient(circle,rgba(184,138,58,.16),transparent 70%)}.action .eyebrow{color:var(--sage-700);position:relative}.action h2{color:var(--ink-900);font-size:20px;margin-bottom:4px;position:relative}.action p{color:var(--ink-700);margin:0 0 14px;position:relative}.action .btn{background:var(--gold);color:var(--ink-inv);position:relative;font-weight:600}.action .btn:hover{background:var(--gold-700)}.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 16px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);text-decoration:none;color:var(--ink)}.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-2)}.tile-icon{width:44px;height:44px;border-radius:12px;background:var(--sage-50);color:var(--sage-700);display:grid;place-items:center}.tile-title{font-weight:600;font-size:15px}.tile-sub{font-size:12px;color:var(--ink-3)}.empty-icon{font-size:56px;opacity:.45;margin-bottom:8px}.row-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.row-list>.row-item+.row-item{border-top:1px solid var(--border)}.row-item{width:100%;display:flex;align-items:center;gap:12px;padding:12px 16px;background:transparent;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}.row-item:hover{background:var(--surface-2)}.avatar{width:36px;height:36px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;font-weight:600;font-size:14px;color:var(--brand-ink)}.avatar-lg{width:56px;height:56px;font-size:20px}.progress{background:var(--surface-3);border-radius:999px;height:8px;overflow:hidden;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,#b88a3a,#5b6f4e);border-radius:999px;transition:width .3s}.app-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh;transition:grid-template-columns .18s ease}.app-shell.sidebar-collapsed{grid-template-columns:64px 1fr}.app-sidebar{background:var(--surface);border-right:1px solid var(--border);padding:18px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:8px;transition:padding .18s ease}.app-sidebar.sidebar-mini{padding:18px 6px;align-items:center}.app-sidebar.sidebar-mini .nav-link{width:40px;padding:9px 0;justify-content:center}.app-sidebar.sidebar-mini .app-brand{padding:4px 0 14px;flex-direction:column;gap:4px;width:100%;align-items:center}.app-brand{display:flex;align-items:center;gap:8px;padding:4px 8px 14px;font-size:18px;font-weight:700;color:var(--brand-ink)}.app-brand-mark{width:32px;height:32px;border-radius:9px;background:var(--brand);display:grid;place-items:center;color:var(--ink-inv);font-size:17px;flex-shrink:0}.nav-link{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px;margin:1px 8px;border-radius:var(--r-md);color:var(--ink-2);text-decoration:none;font-weight:500;font-size:14px;transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}.nav-link:hover{background:var(--surface-2);color:var(--ink)}.nav-link.active{background:var(--sage-100);color:var(--sage-800);font-weight:600}.nav-link.active:before{content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--sage-600)}.nav-icon{width:20px;display:inline-flex;align-items:center;justify-content:center}.nav-group-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-400);padding:14px 16px 4px}.app-main{padding:24px 28px;max-width:1200px;width:100%;min-width:0;box-sizing:border-box}.app-shell.sidebar-collapsed .app-main{max-width:none;padding:24px 32px}.app-bottom-nav{display:none}@media (max-width: 1024px){.app-shell{grid-template-columns:1fr}.app-sidebar{display:none}.app-main{padding:14px 16px calc(96px + env(safe-area-inset-bottom));max-width:100%}.h1{font-size:24px}.h2{font-size:20px}.app-shell.sidebar-collapsed .app-main{padding:14px 16px calc(96px + env(safe-area-inset-bottom))}.app-bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);padding:6px max(4px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));z-index:30;justify-content:space-around;box-shadow:0 -2px 12px #3c280a0f}.app-bottom-nav .nav-link{flex:1;flex-direction:column;gap:2px;padding:6px 4px;font-size:11px;border-radius:var(--radius-sm);text-align:center;min-height:48px;justify-content:center}.app-bottom-nav .nav-icon{font-size:22px}.app-bottom-nav .nav-link.active{background:transparent;color:var(--brand)}.app-bottom-nav .nav-link.active .nav-icon{transform:scale(1.08);transition:transform .15s}}@media (max-width: 540px){.app-main{padding:12px 12px calc(86px + env(safe-area-inset-bottom))}.h1{font-size:22px}.h2{font-size:18px}.app-bottom-nav .nav-link{font-size:10px;padding:4px 2px}.app-bottom-nav .nav-icon{font-size:20px}}@media (max-width: 360px){.app-bottom-nav{justify-content:space-between;padding-left:2px;padding-right:2px}.app-bottom-nav .nav-link{font-size:9px}}.toasts{position:fixed;bottom:24px;right:24px;z-index:100;display:flex;flex-direction:column;gap:8px}.toast{background:var(--ink);color:var(--ink-inv);padding:10px 16px;border-radius:var(--radius-sm);box-shadow:var(--shadow);font-size:14px}.toast.error{background:var(--danger)}.toast.success{background:var(--ok)}.flex-1{flex:1}.text-center{text-align:center}.hidden{display:none}@media (max-width: 540px){.hide-mobile{display:none}}.zoom-stage{display:flex;flex-direction:column;background:var(--surface-2);color:var(--ink);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);height:calc(100vh - 48px);height:calc(100dvh - 48px);min-height:480px}.zoom-stage:fullscreen,.zoom-stage:-webkit-full-screen{width:100vw;height:100vh;height:100dvh;border-radius:0;box-shadow:none}:root:has(.zoom-stage:fullscreen) .app-bottom-nav,:root:has(.zoom-stage:-webkit-full-screen) .app-bottom-nav{display:none!important}@media (max-width: 1024px){body.sitrac-live-mode .app-bottom-nav{display:none!important}body.sitrac-live-mode .app-main{padding-bottom:0!important}body.sitrac-live-mode .zoom-stage{height:calc(100dvh - 24px - env(safe-area-inset-bottom))}body.sitrac-live-mode .app-topbar{display:none!important}body.sitrac-live-mode .app-main{padding-top:6px!important}body.sitrac-live-mode .chat-fab{bottom:calc(12px + env(safe-area-inset-bottom))}body.sitrac-live-mode .live-fab-stack{bottom:calc(72px + env(safe-area-inset-bottom))}}.zoom-stage-topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap}.zoom-stage-topik{font-weight:600;font-size:14px;max-width:40ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.zoom-stage-spacer{flex:1}.zoom-stage-timer{font-size:18px;font-weight:600;letter-spacing:.5px;color:var(--sage-700)}.zoom-stage-meta{font-size:12px;color:var(--ink-3)}.zoom-live-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;letter-spacing:.6px}.zoom-stage-content{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:28px 24px;background:var(--surface);color:var(--ink);overflow:auto}.zoom-stage-content:has(>.live-reader),.zoom-stage-content:has(>.live-reader-fullbleed){align-items:stretch;justify-content:stretch;padding:0;overflow:hidden}.zoom-stage-content>*{width:100%;max-width:720px;text-align:center}.zoom-stage-content>.live-reader,.zoom-stage-content>.live-reader-fullbleed{max-width:none;text-align:left}.zoom-stage:fullscreen .zoom-stage-content>*,.zoom-stage:-webkit-full-screen .zoom-stage-content>*{max-width:1100px}.zoom-stage:fullscreen .zoom-stage-content>.live-reader,.zoom-stage:fullscreen .zoom-stage-content>.live-reader-fullbleed,.zoom-stage:-webkit-full-screen .zoom-stage-content>.live-reader,.zoom-stage:-webkit-full-screen .zoom-stage-content>.live-reader-fullbleed{max-width:none}.zoom-stage:fullscreen .zoom-stage-content,.zoom-stage:-webkit-full-screen .zoom-stage-content{padding:48px 64px}.zoom-stage:fullscreen .zoom-stage-content:has(>.live-reader),.zoom-stage:fullscreen .zoom-stage-content:has(>.live-reader-fullbleed),.zoom-stage:-webkit-full-screen .zoom-stage-content:has(>.live-reader),.zoom-stage:-webkit-full-screen .zoom-stage-content:has(>.live-reader-fullbleed){padding:8px}.zoom-stage-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;background:var(--surface);border-top:1px solid var(--border)}.zoom-stage-toolbar .btn{padding:9px 14px;font-size:13px;font-weight:600;border-radius:10px;min-height:38px;white-space:nowrap;transition:background .15s,transform .05s,box-shadow .15s,border-color .15s}.zoom-stage-toolbar .btn-sm{padding:9px 14px;font-size:13px}.zoom-stage-toolbar .btn-ghost{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}.zoom-stage-toolbar .btn-ghost:hover{background:var(--surface-3);border-color:var(--border-2);box-shadow:var(--shadow-sm)}.zoom-stage-toolbar .btn-primary{background:var(--gold);color:#2d2308;border:0;box-shadow:0 4px 14px #00000038}.zoom-stage-toolbar .btn-primary:hover{background:#f0c662}.zoom-stage-toolbar .btn-gold{background:linear-gradient(135deg,#fdd070,#f1a533);color:#2d2308;border:0;box-shadow:0 4px 14px #00000038}.zoom-stage-toolbar .zoom-stage-meta{color:var(--ink-3);font-size:11px;letter-spacing:.4px;text-transform:uppercase}.zoom-stage-toolbar .zoom-toolbar-divider{width:1px;align-self:stretch;background:var(--border);margin:4px}@media (max-width: 1024px){.zoom-stage{height:calc(100vh - 124px);height:calc(100dvh - 124px - env(safe-area-inset-bottom));min-height:360px}.zoom-stage-content{padding:20px 14px}.zoom-stage-topik{max-width:22ch;font-size:13px}.zoom-stage-timer{font-size:16px}.zoom-stage-topbar{padding:8px 12px;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.zoom-stage-topbar::-webkit-scrollbar{display:none}.zoom-stage-toolbar{padding:8px 10px;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.zoom-stage-toolbar::-webkit-scrollbar{display:none}.zoom-stage-toolbar .btn,.zoom-stage-toolbar .btn-sm{padding:8px 12px;min-height:38px;font-size:12px;flex-shrink:0}.zoom-stage-toolbar .zoom-toolbar-divider,.zoom-stage-toolbar .zoom-stage-meta{display:none}}@media (max-width: 540px){.zoom-stage{height:calc(100dvh - 110px - env(safe-area-inset-bottom))}.zoom-stage-topbar{padding:6px 10px}.zoom-stage-topik{max-width:16ch;font-size:12px}.zoom-stage-timer{font-size:14px}.zoom-stage-content{padding:14px 10px}.zoom-stage-toolbar .btn,.zoom-stage-toolbar .btn-sm{padding:7px 10px;font-size:11px;min-height:36px}.zoom-live-pill{padding:2px 8px;font-size:10px}}.live-reader{display:flex;flex-direction:column;width:100%;height:100%;min-height:50vh}.live-reader-topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px 8px;flex-wrap:wrap}.live-reader-content{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px;background:#fffef5;border-radius:10px;border:1px solid #d9cfa8;overflow:auto}.live-stage-aspect{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden;container-type:size}.live-stage-aspect-inner{width:min(100cqw,calc(100cqh * 16 / 9));height:min(100cqh,56.25cqw);display:block;position:relative}.live-stage-aspect-inner>iframe,.live-stage-aspect-inner>video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;display:block;background:#000}.ppt-edge-zone:hover{background:linear-gradient(to right,rgba(255,255,255,.1),transparent)!important}.ppt-edge-zone:nth-of-type(2):hover{background:linear-gradient(to left,rgba(255,255,255,.1),transparent)!important}@supports not (container-type: size){.live-stage-aspect-inner{width:100%;height:100%}}.live-reader-nav{display:flex;align-items:center;gap:8px;padding:8px 4px 0;flex-wrap:wrap}.quran-mushaf-page{text-align:justify;line-height:2.1;color:#2d2008;width:100%;max-width:700px}.quran-mushaf-page .ayah-marker{font-size:.7em;margin:0 6px;color:var(--gold);white-space:nowrap}.live-fab-stack{position:fixed;right:18px;bottom:90px;z-index:38;display:flex;flex-direction:column;gap:8px;align-items:flex-end}.live-fab{background:#fdfaf3f5;color:var(--brand-ink);border:1px solid #cbb58e;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:0 4px 14px #2820122e;transition:transform .15s,box-shadow .15s}.live-fab:hover{transform:translateY(-1px);box-shadow:0 8px 20px #2820123d}@media (max-width: 1024px){.live-fab-stack{right:12px;bottom:calc(140px + env(safe-area-inset-bottom));gap:6px}}@media (max-width: 540px){.live-fab-stack{right:8px;bottom:calc(132px + env(safe-area-inset-bottom));gap:6px}.live-fab{padding:8px 10px;font-size:12px;min-height:36px}.live-fab span{display:none}}.chat-fab{position:fixed;bottom:20px;right:20px;z-index:40;background:var(--brand);color:var(--ink-inv);border:0;border-radius:999px;padding:12px 18px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 20px #5b6f4e59;cursor:pointer;transition:transform .1s,box-shadow .15s}.chat-fab:hover{transform:translateY(-2px);box-shadow:0 10px 28px #5b6f4e66}.chat-fab-badge{background:var(--danger);color:var(--ink-inv);border-radius:999px;font-size:11px;padding:2px 7px;font-weight:700;margin-left:4px}.chat-popup-backdrop{position:fixed;bottom:20px;right:20px;z-index:41;pointer-events:none}.chat-popup{pointer-events:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;width:340px;max-width:calc(100vw - 32px);height:460px;max-height:calc(100vh - 100px);overflow:hidden}.chat-popup-header{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:var(--ink-inv);padding:10px 14px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.chat-popup-close{background:#ffffff2e;color:var(--ink-inv);border:0;border-radius:6px;padding:4px 9px;cursor:pointer;font-size:12px}.chat-popup-close:hover{background:#ffffff4d}.chat-popup-body{flex:1;overflow-y:auto;padding:10px;background:var(--surface-2)}.chat-popup-input{border-top:1px solid var(--border);padding:10px;background:var(--surface);gap:6px;flex-shrink:0}@media (max-width: 1024px){.chat-fab{bottom:calc(76px + env(safe-area-inset-bottom));right:14px;padding:11px 16px}}@media (max-width: 540px){.chat-fab{bottom:calc(72px + env(safe-area-inset-bottom));right:12px;padding:10px 14px;font-size:13px}.chat-popup-backdrop{bottom:calc(12px + env(safe-area-inset-bottom));right:12px;left:12px}.chat-popup{width:auto;height:65dvh;max-width:100%;max-height:75dvh}}.sesi-live .card{border-color:#5b6f4e73}.live-banner{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:var(--ink-inv);padding:10px 16px;border-radius:var(--radius);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:10px;box-shadow:0 4px 14px #5b6f4e40}.live-dot{width:10px;height:10px;border-radius:50%;background:#ff5252;box-shadow:0 0 #ff5252cc;animation:live-pulse 1.5s infinite}@keyframes live-pulse{0%{box-shadow:0 0 #ff5252cc}70%{box-shadow:0 0 0 14px #ff525200}to{box-shadow:0 0 #ff525200}}.arsip-banner{background:var(--surface-3);color:var(--ink-2);padding:10px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;border:1px dashed var(--border-2)}.sesi-arsip{filter:saturate(.85)}.sesi-arsip .card{background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%)}.sesi-arsip .h1{color:var(--ink-2)}.raport-table{width:100%;border-collapse:collapse;font-size:14px}.raport-table th,.raport-table td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}.raport-table th{background:var(--surface-2);font-weight:600;color:var(--ink-2);font-size:12px;text-transform:uppercase;letter-spacing:.04em}.raport-rows{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}.raport-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(220px,2.5fr) 70px 90px 60px 24px;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);font-size:13px;align-items:start}.raport-row:last-child{border-bottom:0}.raport-row.is-ref{background:var(--surface-2)}.raport-row.is-parent{background:var(--brand-soft);font-weight:500}.raport-row.is-child{padding-left:24px;background:var(--surface);border-bottom:1px dashed var(--border)}.raport-row.is-child:last-child{border-bottom:0}@media (max-width: 1024px){.raport-row{grid-template-columns:1fr;gap:6px;padding:12px;font-size:14px}.raport-row.is-child{padding-left:20px}.raport-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}.raport-table thead,.raport-table tbody,.raport-table tr{display:table;width:100%;table-layout:fixed}}@media print{.no-print,.app-sidebar,.app-bottom-nav{display:none!important}.app-main{padding:0!important;max-width:100%!important}.card{box-shadow:none;border:1px solid #bbb;break-inside:avoid}body{background:#fff}*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}h1,h2,h3,h4{break-after:avoid}.raport-table thead{display:table-header-group}.raport-row,.progress{break-inside:avoid}.stack{gap:12px!important}.raport-row{padding:6px 8px!important}button{background:transparent!important}}.app-topbar{display:flex;align-items:center;justify-content:flex-end;padding:0 0 8px;min-height:36px;gap:6px}.mobile-brand-row,.mobile-lang-toggle{display:none}@media (max-width: 1024px){.mobile-brand-row{display:inline-flex;align-items:center;gap:8px;color:var(--brand-ink);font-weight:700;font-size:15px}.mobile-brand-name{max-width:60vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-lang-toggle{display:inline-flex;font-size:12px;padding:6px 10px;min-height:36px}.app-topbar{padding:4px 0 10px;min-height:44px}}@media (max-width: 360px){.mobile-brand-name{max-width:110px;font-size:13px}}.notif-bell-wrap{position:relative}.notif-bell-btn{position:relative;font-size:18px;padding:6px 10px;border-radius:50%}.notif-badge{position:absolute;top:2px;right:2px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;line-height:1;min-width:16px;height:16px;padding:2px 4px;border-radius:10px;display:flex;align-items:center;justify-content:center}.notif-panel{position:absolute;top:calc(100% + 6px);right:0;width:360px;max-height:480px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px #00000026;z-index:100;display:flex;flex-direction:column;overflow:hidden}.notif-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}.notif-panel-body{overflow-y:auto;max-height:420px}.notif-item{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border:0;background:transparent;width:100%;text-align:left;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--border-light, #f0ebe2)}.notif-item:hover{background:var(--surface-hover, #f7f3ec)}.notif-unread{background:var(--accent-soft, #f0ebe2)}.notif-icon{font-size:18px;flex-shrink:0;margin-top:2px}.notif-content{flex:1;min-width:0}.notif-title{font-weight:600;font-size:13px;color:var(--ink)}.notif-body{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notif-time{font-size:11px;color:var(--ink-3);margin-top:3px}.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex-shrink:0;margin-top:6px}.notif-load-more{display:block;width:100%;padding:10px 16px;border:0;border-top:1px solid var(--border);background:transparent;color:var(--brand);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}.notif-load-more:hover:not(:disabled){background:var(--surface-hover, #f7f3ec)}.notif-load-more:disabled{color:var(--ink-3);cursor:default}@media (max-width: 540px){.notif-panel{width:calc(100vw - 24px);max-width:360px;right:-8px;max-height:calc(80dvh - 100px)}.notif-panel-body{max-height:calc(80dvh - 200px)}}.bottom-nav-more-wrap{flex:1;display:flex;align-items:center;justify-content:center}.bottom-nav-more-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9}.bottom-nav-more-popup{position:absolute;bottom:calc(100% + 12px);right:4px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 -4px 16px #0000001f;z-index:11;padding:6px;min-width:160px}.bottom-nav-more-popup .nav-link{flex-direction:row;gap:8px;padding:10px 14px;border-radius:8px;font-size:14px;min-height:42px}@media (max-width: 540px){.card{padding:14px}.card-tight{padding:10px}.stat{padding:12px 14px}.stat-value{font-size:22px}.tile{padding:14px 12px}.tile-icon{width:38px;height:38px;font-size:18px}.action{padding:18px;border-radius:18px}.action h2{font-size:18px}.action p{font-size:13px;margin-bottom:12px}.action .btn{width:100%;justify-content:center}.eyebrow,.text-xs{font-size:12px}.text-sm{font-size:13px}.avatar-lg{width:48px;height:48px;font-size:18px}.row-item{padding:14px 16px;min-height:48px}.empty{padding:28px 16px}.empty-icon{font-size:48px}}img,video,iframe{max-width:100%}input,textarea{max-width:100%}.card,.row-item,.tile{overflow-wrap:anywhere}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#14100873;display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;overflow-y:auto;-webkit-overflow-scrolling:touch}.modal-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:720px;max-height:calc(100dvh - 32px);display:flex;flex-direction:column;overflow:hidden}.modal-card-body{padding:18px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}.modal-card-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}.modal-card-footer{padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;background:var(--surface)}@media (max-width: 540px){.modal-backdrop{padding:0;align-items:stretch}.modal-card{max-width:100%;max-height:100dvh;height:100dvh;border-radius:0}.modal-card-footer{justify-content:stretch}.modal-card-footer .btn{flex:1}}@media (max-width: 540px){.card[style*=maxWidth],div[style*=maxWidth][style*=background]{max-width:100%!important}}[data-modal]{width:100%;max-width:720px;max-height:calc(100dvh - 32px)}@media (max-width: 540px){[data-modal]{max-width:100%!important;max-height:100dvh!important;height:100dvh;border-radius:0}}.sticky-actions{position:sticky;bottom:0;background:var(--surface);padding:10px 0 calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--border);margin-top:12px;display:flex;gap:8px;z-index:5}@media (max-width: 540px){.sticky-actions .btn{flex:1;justify-content:center}}.modal-card-handle{display:none}@media (max-width: 540px){.modal-card-handle{display:block;width:40px;height:4px;background:var(--border-2);border-radius:999px;margin:8px auto 0}}.reader-root{display:flex;flex-direction:column;min-height:calc(100vh - 100px);min-height:calc(100dvh - 100px)}@media (max-width: 1024px){.reader-root{min-height:calc(100dvh - 140px);margin:-14px -16px!important}}@media (max-width: 540px){.reader-root{margin:-12px!important;min-height:calc(100dvh - 130px)}}.card-table{overflow-x:auto;-webkit-overflow-scrolling:touch}@media (max-width: 540px){.quran-toolbar{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:22px!important;padding:6px 8px!important}.quran-toolbar::-webkit-scrollbar{display:none}.quran-toolbar>*{flex-shrink:0}.quran-toolbar>div[style*="flex: 1"]{display:none}}@media (max-width: 540px){.jadwal-cell{min-height:64px!important;padding:4px 2px 6px!important;font-size:11px}.jadwal-cell>div:first-child>span:first-child{font-size:12px!important}.jadwal-cell>div:nth-child(2)>span:nth-child(n+2):not(.text-xs){display:none}}.filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}@media (max-width: 540px){.filter-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -12px;padding:0 12px 6px;scrollbar-width:none}.filter-bar::-webkit-scrollbar{display:none}.filter-bar>*{flex-shrink:0}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.stat-value,.tabnum{font-variant-numeric:tabular-nums}.btn-subtle{background:var(--sage-50);color:var(--sage-800);border:1px solid var(--sage-100)}.btn-subtle:hover{background:var(--sage-100)}.btn .btn-spin{animation:btnspin .7s linear infinite}@keyframes btnspin{to{transform:rotate(360deg)}}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--ink-2);transition:background var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}.icon-btn:hover{background:var(--surface-2);box-shadow:var(--shadow-sm)}.icon-btn.icon-btn-sm{width:32px;height:32px;border-radius:var(--r-sm)}.icon-btn.icon-btn-ghost{border-color:transparent;background:transparent}.segmented{display:inline-flex;padding:3px;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill)}.segmented button{border:0;background:transparent;color:var(--ink-3);padding:5px 12px;border-radius:var(--r-pill);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}.segmented button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}.statuspill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;border-radius:var(--r-pill);font-size:12px;font-weight:600;white-space:nowrap}.statuspill[data-status=success]{background:var(--ok-bg);color:#1f4a1f}.statuspill[data-status=warn]{background:var(--warn-bg);color:#6b4500}.statuspill[data-status=danger]{background:var(--danger-bg);color:#7a2424}.statuspill[data-status=info]{background:var(--info-bg);color:#1c4661}.statuspill[data-status=neutral]{background:var(--neutral-bg);color:var(--ink-2)}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#24221b73;display:grid;place-items:center;padding:16px;animation:fade var(--dur) var(--ease-out)}.sheet{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);width:100%;max-width:460px;max-height:88vh;overflow:auto;animation:sheet-in var(--dur-slow) var(--ease-spring)}.sheet-head{display:flex;align-items:center;gap:8px;padding:16px 16px 8px}.sheet-head h3{flex:1}.sheet-body{padding:0 16px 16px}@keyframes fade{0%{opacity:0}}@keyframes sheet-in{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media (max-width: 640px){.sheet-backdrop{align-items:flex-end;padding:0}.sheet{max-width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:92vh}.sheet:before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--border-2);margin:8px auto 0}}.skeleton{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;border-radius:var(--r-sm);animation:shimmer 1.3s ease-in-out infinite}@keyframes shimmer{to{background-position:-200% 0}}.empty{text-align:center;padding:40px 20px;color:var(--ink-3)}.empty .empty-ic{color:var(--sage-300);margin-bottom:10px;display:flex;justify-content:center}.empty h3{color:var(--ink-2);margin-bottom:4px}.page-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:4px}.page-header .ph-main{flex:1;min-width:0}.page-header .ph-actions{display:flex;align-items:center;gap:8px}.app-topbar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 80%,transparent);-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);position:sticky;top:0;z-index:20}.app-topbar .ph-title{font-weight:600;font-size:15px;color:var(--ink)}.app-bar-actions{display:flex;align-items:center;gap:8px}@media (max-width: 820px){.app-bottom-nav{display:grid;grid-auto-flow:column;align-items:end;position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--border);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}.app-bottom-nav .nav-link{flex-direction:column;gap:2px;margin:0;padding:6px 0;font-size:10px;font-weight:600;border-radius:var(--r-sm)}.app-bottom-nav .nav-link.active{background:transparent;color:var(--sage-700)}.app-bottom-nav .nav-link.active:before{display:none}.bottom-fab-wrap{display:grid;place-items:center}.bottom-fab{width:52px;height:52px;margin-top:-22px;border-radius:var(--r-pill);background:var(--gold-500);color:var(--ink-inv);border:3px solid var(--surface);display:grid;place-items:center;box-shadow:var(--shadow);transition:transform var(--dur) var(--ease-spring)}.bottom-fab:active{transform:scale(.94)}}