:root{--color-primary: #14532d;--color-primary-dark: #0d3b21;--color-gold: #b99745;--color-bg: #f8faf8;--color-surface: #ffffff;--color-text: #1a2e22;--color-muted: #5c6f63;--color-border: #d8e2da;--color-success: #15803d;--color-warn: #b45309;--color-error: #b91c1c;--color-live: #dc2626;--color-on-primary: #ffffff;--color-surface-raised: #f1f5f1;--color-focus: #1d6f3f;--font-arabic: "Noto Naskh Arabic", "Amiri", "Segoe UI", Tahoma, sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--shadow-sm: 0 1px 3px rgba(20, 45, 30, .12);--shadow-md: 0 4px 14px rgba(20, 45, 30, .14);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--touch-target: 48px;color-scheme:light}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--color-bg: #0f1a14;--color-surface: #16241c;--color-text: #e8efe9;--color-muted: #9db3a5;--color-border: #2c3f33;--color-surface-raised: #1c2e23;--color-focus: #6fbf8f;color-scheme:dark}}:root[data-theme=dark]{--color-bg: #0f1a14;--color-surface: #16241c;--color-text: #e8efe9;--color-muted: #9db3a5;--color-border: #2c3f33;--color-surface-raised: #1c2e23;--color-focus: #6fbf8f;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-arabic);background:var(--color-bg);color:var(--color-text);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4{margin:0 0 var(--space-3);line-height:1.4;color:var(--color-text)}p{margin:0 0 var(--space-3)}a{color:var(--color-primary)}:root[data-theme=dark] a{color:var(--color-focus)}:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;border-radius:4px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.btn{font-family:inherit;font-size:1rem;min-height:var(--touch-target);padding:var(--space-2) var(--space-5);border-radius:var(--radius-md);border:1px solid transparent;background:var(--color-surface-raised);color:var(--color-text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);transition:background .15s ease,transform .05s ease}.btn:hover:not(:disabled){filter:brightness(.97)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled){background:var(--color-primary-dark);filter:none}.btn-outline{background:transparent;border-color:var(--color-primary);color:var(--color-primary)}:root[data-theme=dark] .btn-outline{border-color:var(--color-focus);color:var(--color-focus)}.btn-danger{background:var(--color-error);color:#fff}.btn-ghost{background:transparent;color:var(--color-muted)}.btn-big{font-size:1.35rem;min-height:64px;width:100%;border-radius:var(--radius-lg);font-weight:700}.btn-icon{min-width:var(--touch-target);padding:var(--space-2);font-size:1.2rem}.field{margin-bottom:var(--space-4)}.field label{display:block;margin-bottom:var(--space-1);font-weight:600;color:var(--color-text)}.input,input[type=text],input[type=password],input[type=email],input[type=number],input[type=datetime-local],select,textarea{font-family:inherit;font-size:1rem;width:100%;min-height:var(--touch-target);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text)}textarea{min-height:96px;resize:vertical;line-height:1.8}input:focus,select:focus,textarea:focus{border-color:var(--color-primary)}.checkbox-row{display:flex;align-items:center;gap:var(--space-2);min-height:var(--touch-target);cursor:pointer}.checkbox-row input[type=checkbox]{width:22px;height:22px;accent-color:var(--color-primary)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);box-shadow:var(--shadow-sm)}.card-gold{border-inline-start:4px solid var(--color-gold)}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-4)}.page{width:100%;max-width:720px;margin:0 auto;padding:var(--space-5) var(--space-4) var(--space-7)}.muted{color:var(--color-muted)}.small{font-size:.875rem}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px 12px;border-radius:999px;font-size:.85rem;font-weight:600;border:1px solid transparent;white-space:nowrap}.badge-neutral{background:var(--color-surface-raised);color:var(--color-muted);border-color:var(--color-border)}.badge-success{background:#15803d1f;color:var(--color-success)}.badge-warn{background:#b453091f;color:var(--color-warn)}.badge-error{background:#b91c1c1f;color:var(--color-error)}.badge-live{background:#dc26261f;color:var(--color-live)}.badge-gold{background:#b9974524;color:var(--color-gold);border-color:var(--color-gold)}.badge-primary{background:#14532d1f;color:var(--color-primary)}:root[data-theme=dark] .badge-primary{color:var(--color-focus)}.live-dot{width:10px;height:10px;border-radius:50%;background:var(--color-live);display:inline-block;animation:livePulse 1.4s ease-in-out infinite}@keyframes livePulse{0%,to{opacity:1}50%{opacity:.35}}@media (prefers-reduced-motion: reduce){.live-dot{animation:none}}.table-wrap{overflow-x:auto}table.table{width:100%;border-collapse:collapse;background:var(--color-surface);border-radius:var(--radius-md)}.table th,.table td{text-align:start;padding:var(--space-3);border-bottom:1px solid var(--color-border);vertical-align:top}.table th{color:var(--color-muted);font-size:.9rem}.banner{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-weight:600;border:1px solid var(--color-border);background:var(--color-surface-raised)}.banner-info{border-inline-start:4px solid var(--color-primary)}.banner-warn{border-inline-start:4px solid var(--color-warn);color:var(--color-warn)}.banner-error{border-inline-start:4px solid var(--color-error);color:var(--color-error)}.banner-success{border-inline-start:4px solid var(--color-success);color:var(--color-success)}.banner-gold{border-inline-start:4px solid var(--color-gold)}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a140e8c;display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:60}.dialog{background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-lg);padding:var(--space-5);max-width:480px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-md);border-top:4px solid var(--color-gold)}.panel-shell{display:flex;min-height:100vh}.panel-sidebar{width:240px;flex-shrink:0;background:var(--color-primary-dark);color:#eaf3ec;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}.panel-sidebar .brand{font-size:1.2rem;font-weight:700;color:#fff;padding:var(--space-3) var(--space-2);border-bottom:1px solid rgba(185,151,69,.5);margin-bottom:var(--space-3)}.panel-nav{display:flex;flex-direction:column;gap:2px;flex:1}.panel-nav a{color:#d7e5da;text-decoration:none;padding:var(--space-3);border-radius:var(--radius-sm);min-height:var(--touch-target);display:flex;align-items:center}.panel-nav a:hover{background:#ffffff14}.panel-nav a.active{background:#b9974538;color:#fff;border-inline-start:3px solid var(--color-gold)}.panel-main{flex:1;min-width:0;display:flex;flex-direction:column}.panel-header{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:var(--space-3) var(--space-5);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}.panel-content{padding:var(--space-5);max-width:1100px;width:100%}@media (max-width: 800px){.panel-shell{flex-direction:column}.panel-sidebar{width:100%;flex-direction:row;overflow-x:auto;align-items:center}.panel-sidebar .brand{border-bottom:none;margin-bottom:0;white-space:nowrap}.panel-nav{flex-direction:row}.panel-nav a{white-space:nowrap}}.listen-shell{display:flex;flex-direction:column;min-height:100vh;max-width:780px;width:100%;margin:0 auto;padding:var(--space-4);gap:var(--space-3)}.segment-current{background:var(--color-surface);border:1px solid var(--color-border);border-inline-start:5px solid var(--color-gold);border-radius:var(--radius-lg);padding:var(--space-5);line-height:2;font-weight:600;box-shadow:var(--shadow-sm);overflow-wrap:break-word}.segment-history{opacity:.62;line-height:1.9}.segment-history .seg{padding:var(--space-2) var(--space-3);border-inline-start:3px solid var(--color-border);margin-bottom:var(--space-2)}.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-3)}.lang-btn{min-height:64px;font-size:1.15rem;border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);cursor:pointer;font-family:inherit;padding:var(--space-3)}.lang-btn[aria-pressed=true]{border-color:var(--color-primary);background:#14532d1a;font-weight:700}:root[data-theme=dark] .lang-btn[aria-pressed=true]{background:#6fbf8f24;border-color:var(--color-focus)}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3)}.audio-controls{display:flex;align-items:center;justify-content:center;gap:var(--space-3);flex-wrap:wrap;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3);position:sticky;bottom:var(--space-3);box-shadow:var(--shadow-md)}.play-btn{width:72px;height:72px;border-radius:50%;font-size:1.7rem;background:var(--color-primary);color:#fff;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.play-btn:hover{background:var(--color-primary-dark)}.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);text-align:center}.stat-card .value{font-size:1.9rem;font-weight:700;color:var(--color-primary)}:root[data-theme=dark] .stat-card .value{color:var(--color-focus)}.stat-card .label{color:var(--color-muted);font-size:.9rem}.chip-row{display:flex;gap:var(--space-2);flex-wrap:wrap}.chip{min-height:40px;padding:var(--space-1) var(--space-4);border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;font-family:inherit;font-size:.95rem}.chip[aria-pressed=true]{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.meter{height:14px;background:var(--color-surface-raised);border-radius:999px;overflow:hidden;border:1px solid var(--color-border)}.meter>span{display:block;height:100%;background:linear-gradient(90deg,var(--color-success),var(--color-gold));transition:width .1s linear}.minibar{display:flex;align-items:center;gap:var(--space-2)}.minibar .bar{flex:1;height:10px;background:var(--color-surface-raised);border-radius:999px;overflow:hidden}.minibar .bar>span{display:block;height:100%;background:var(--color-primary)}.paragraph-kind-verse,.paragraph-kind-hadith,.paragraph-kind-dua{border-inline-start:4px solid var(--color-gold);padding-inline-start:var(--space-3)}.tabs{display:flex;gap:var(--space-1);border-bottom:2px solid var(--color-border);margin-bottom:var(--space-4);overflow-x:auto}.tabs button{font-family:inherit;font-size:1rem;min-height:var(--touch-target);padding:var(--space-2) var(--space-4);background:transparent;border:none;border-bottom:3px solid transparent;color:var(--color-muted);cursor:pointer;white-space:nowrap}.tabs button[aria-selected=true]{color:var(--color-primary);border-bottom-color:var(--color-gold);font-weight:700}:root[data-theme=dark] .tabs button[aria-selected=true]{color:var(--color-focus)}.summary-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);padding:var(--space-4);border-bottom:1px solid var(--color-border)}@media (max-width: 640px){.summary-pair{grid-template-columns:1fr}}.error-text{color:var(--color-error);font-weight:600}.center{text-align:center}