:root{--color-primary:#4a90e2;--color-primary-variant:#357abd;--color-secondary:#8e44ad;--color-surface:#fff;--color-background:#f8f8f8;--color-error:#b00020;--color-on-primary:#fff;--color-on-surface:#1a1a1a;--color-on-background:#1a1a1a;--color-on-error:#fff;--color-outline:#e0e0e0;--color-outline-variant:#f5f5f5;--color-text-primary:#1a1a1a;--color-text-secondary:#666;--color-text-disabled:#999;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:24px;--spacing-2xl:32px;--spacing-3xl:48px;--font-size-xs:10px;--font-size-sm:12px;--font-size-base:14px;--font-size-md:16px;--font-size-lg:18px;--font-size-xl:20px;--font-size-2xl:24px;--font-size-3xl:32px;--font-size-4xl:48px;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.2;--line-height-normal:1.5;--line-height-relaxed:1.8;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--elevation-0:none;--elevation-1:0px 1px 3px rgba(0,0,0,.12),0px 1px 2px rgba(0,0,0,.24);--elevation-2:0px 3px 6px rgba(0,0,0,.16),0px 3px 6px rgba(0,0,0,.23);--elevation-4:0px 10px 20px rgba(0,0,0,.19),0px 6px 6px rgba(0,0,0,.23);--elevation-8:0px 15px 25px rgba(0,0,0,.15),0px 5px 10px rgba(0,0,0,.05);--transition-fast:150ms ease;--transition-base:200ms ease;--transition-slow:300ms ease;--transition-slower:400ms ease;--z-base:0;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070}:root,[data-theme=newLight]{--color-primary:#08584e;--color-primary-variant:#0f4f5f;--color-secondary:#8f5a24;--color-surface:#fff;--color-surface-variant:#f5f4f0;--color-background:#fdfbf5;--color-error:#e63946;--color-on-primary:#fcfeff;--color-on-surface:#0c0b0a;--color-on-background:#0c0b0a;--color-on-error:#fafaf9;--color-outline:#e6e5e2;--color-outline-variant:#e6e5e2;--color-text-primary:#0c0b0a;--color-text-secondary:#73726f;--color-text-disabled:#999;--color-primary-container:#08584e;--color-primary-container-low-opacity:rgba(8,88,78,.1);--color-primary-low-opacity:rgba(8,88,78,.3);--surah-svg-filter:none}[data-theme=newDark]{--color-primary:#08584e;--color-primary-variant:#0f4f5f;--color-secondary:#a36629;--color-surface:#1e1e26;--color-surface-variant:#29292a;--color-background:#14141a;--color-error:#9e2a2a;--color-on-primary:#fcfeff;--color-on-surface:#fafafa;--color-on-background:#fafafa;--color-on-error:#fafafa;--color-outline:#29292a;--color-outline-variant:#29292a;--color-text-primary:#fafafa;--color-text-secondary:#a5a5a8;--color-text-disabled:#666;--color-primary-container:#08584e;--color-primary-container-low-opacity:rgba(8,88,78,.2);--color-primary-low-opacity:rgba(8,88,78,.4);--surah-svg-filter:invert(1) brightness(1.2)}[data-theme=light]{--color-primary:#16697a;--color-primary-variant:#0f4f5f;--color-secondary:#698f3f;--color-surface:#fff;--color-surface-variant:#f5f5f5;--color-background:#dbdbdb;--color-error:#d32f2f;--color-on-primary:#fff;--color-on-surface:#6f5e5c;--color-on-background:#6f5e5c;--color-on-error:#fff;--color-outline:#e0e0e0;--color-outline-variant:#f5f5f5;--color-text-primary:#6f5e5c;--color-text-secondary:#8a7a78;--color-text-disabled:#bdbdbd;--color-primary-container:#16697a;--color-primary-container-low-opacity:rgba(22,105,122,.1);--color-primary-low-opacity:rgba(22,105,122,.3)}[data-theme=dark]{--color-primary:#5ee0ff;--color-primary-variant:#041020;--color-secondary:#9fb0d4;--color-surface:#0d1a2b;--color-surface-variant:#041020;--color-background:#071029;--color-error:#d32f2f;--color-on-primary:#021524;--color-on-surface:#e6f0ff;--color-on-background:#e6f0ff;--color-on-error:#fff;--color-outline:#29292a;--color-outline-variant:#29292a;--color-text-primary:#e6f0ff;--color-text-secondary:#9fb0d4;--color-text-disabled:#666;--color-primary-container:#5ee0ff;--color-primary-container-low-opacity:rgba(94,224,255,.1);--color-primary-low-opacity:rgba(94,224,255,.3);--surah-svg-filter:invert(1) brightness(1.2)}[data-theme=softBeige]{--color-primary:#8d6e63;--color-primary-variant:#6d4c41;--color-secondary:#a1887f;--color-surface:#f5f0e1;--color-surface-variant:#f5f0e1;--color-background:#f5f0e1;--color-error:#d32f2f;--color-on-primary:#fff;--color-on-surface:#5a4d3f;--color-on-background:#5a4d3f;--color-on-error:#fff;--color-outline:#e0e0e0;--color-outline-variant:#f5f5f5;--color-text-primary:#5a4d3f;--color-text-secondary:#8a7a78;--color-text-disabled:#bdbdbd;--color-primary-container:#8d6e63;--color-primary-container-low-opacity:rgba(141,110,99,.1);--color-primary-low-opacity:rgba(141,110,99,.3);--surah-svg-filter:none}[data-theme=elegantMarble]{--color-primary:#6d4c41;--color-primary-variant:#5d4037;--color-secondary:#8d6e63;--color-surface:#f8f4f0;--color-surface-variant:#f8f4f0;--color-background:#f8f4f0;--color-error:#d32f2f;--color-on-primary:#fff;--color-on-surface:#5a4033;--color-on-background:#5a4033;--color-on-error:#fff;--color-outline:#e0e0e0;--color-outline-variant:#f5f5f5;--color-text-primary:#5a4033;--color-text-secondary:#8a7a78;--color-text-disabled:#bdbdbd;--color-primary-container:#6d4c41;--color-primary-container-low-opacity:rgba(109,76,65,.1);--color-primary-low-opacity:rgba(109,76,65,.3);--surah-svg-filter:none}[data-theme=nightSky]{--color-primary:#f5f3e7;--color-primary-variant:#1b2836;--color-secondary:#b0afa6;--color-surface:#2c3e50;--color-surface-variant:#1b2836;--color-background:#2c3e50;--color-error:#d32f2f;--color-on-primary:#000;--color-on-surface:#f5f3e7;--color-on-background:#f5f3e7;--color-on-error:#fff;--color-outline:#29292a;--color-outline-variant:#29292a;--color-text-primary:#f5f3e7;--color-text-secondary:#b0afa6;--color-text-disabled:#666;--color-primary-container:#f5f3e7;--color-primary-container-low-opacity:hsla(51,41%,93%,.1);--color-primary-low-opacity:hsla(51,41%,93%,.3);--surah-svg-filter:invert(1) brightness(1.2)}[data-theme=silverLight]{--color-primary:#455a64;--color-primary-variant:#37474f;--color-secondary:#90a4ae;--color-surface:silver;--color-surface-variant:silver;--color-background:silver;--color-error:#d32f2f;--color-on-primary:#fff;--color-on-surface:#333;--color-on-background:#333;--color-on-error:#fff;--color-outline:#e0e0e0;--color-outline-variant:#f5f5f5;--color-text-primary:#333;--color-text-secondary:#666;--color-text-disabled:#999;--color-primary-container:#455a64;--color-primary-container-low-opacity:rgba(69,90,100,.1);--color-primary-low-opacity:rgba(69,90,100,.3);--surah-svg-filter:none}*{box-sizing:border-box;padding:0;margin:0}.surahs-grid{display:grid;grid-template-columns:repeat(1,1fr);grid-gap:8px;gap:8px;padding:0;margin-top:0}@media (min-width:768px){.surahs-grid{grid-template-columns:repeat(3,1fr)}}.surah-name-svg{filter:var(--surah-svg-filter,none)}html{scroll-behavior:smooth}body,html{scrollbar-gutter:auto}body,html{max-width:100vw;overflow-x:hidden;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;direction:ltr;font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-primary)}body{background:var(--color-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:inherit;text-decoration:none}.display-large{font-size:var(--font-size-4xl);font-weight:var(--font-weight-normal);line-height:var(--line-height-tight);letter-spacing:-.5px}.display-medium{font-size:var(--font-size-3xl)}.display-medium,.display-small{font-weight:var(--font-weight-normal);line-height:var(--line-height-tight);letter-spacing:0}.display-small{font-size:var(--font-size-2xl)}.headline-large{font-size:var(--font-size-xl)}.headline-large,.headline-medium{font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);letter-spacing:.15px}.headline-medium{font-size:var(--font-size-lg)}.headline-small{font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight)}.headline-small,.title-large{font-size:var(--font-size-md);letter-spacing:.15px}.title-large{font-weight:var(--font-weight-medium);line-height:var(--line-height-normal)}.title-medium,.title-small{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);letter-spacing:.1px}.body-large{font-size:var(--font-size-md);letter-spacing:.5px}.body-large,.body-medium{font-weight:var(--font-weight-normal);line-height:var(--line-height-relaxed)}.body-medium{font-size:var(--font-size-base);letter-spacing:.25px}.body-small{font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);letter-spacing:.4px}.label-large{font-size:var(--font-size-base);letter-spacing:.1px}.label-large,.label-medium{font-weight:var(--font-weight-medium);line-height:var(--line-height-normal)}.label-medium{font-size:var(--font-size-sm);letter-spacing:.5px}.label-small{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);letter-spacing:.5px}.arabic-text,.rtl,[dir=rtl]{font-family:Amiri,Noto Naskh Arabic,Arabic Typesetting,serif;direction:rtl;text-align:right}.ltr,[dir=ltr]{direction:ltr;text-align:left}.verse-container{direction:ltr}.verse-container .arabic-text{direction:rtl}.app-bar{background-color:var(--color-background);border-bottom:1px solid var(--color-outline);box-shadow:var(--elevation-0);position:fixed;top:56px;left:0;right:0;z-index:1019;height:56px;margin:0;padding:0;transition:top .3s ease-in-out}.app-bar.top-bar-hidden{top:0}.app-bar-content{display:flex;align-items:center;padding:var(--spacing-sm) var(--spacing-lg);max-width:1200px;margin:0 auto;height:100%}.app-bar-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card{background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--elevation-2);padding:var(--spacing-lg);transition:box-shadow var(--transition-base)}.card:hover{box-shadow:var(--elevation-4)}.card-elevation-1{box-shadow:var(--elevation-1)}.card-elevation-2{box-shadow:var(--elevation-2)}.card-elevation-4{box-shadow:var(--elevation-4)}.card-elevation-8{box-shadow:var(--elevation-8)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:1;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);text-decoration:none;min-height:40px}.btn:disabled{opacity:.38;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:var(--color-on-primary);box-shadow:var(--elevation-2)}.btn-primary:hover:not(:disabled){box-shadow:var(--elevation-4);background-color:var(--color-primary-variant)}.btn-primary:active:not(:disabled){box-shadow:var(--elevation-1)}.btn-secondary{background-color:transparent;color:var(--color-primary);border:1px solid var(--color-primary)}.btn-secondary:hover:not(:disabled){background-color:var(--color-primary-container-low-opacity)}.btn-text{background-color:transparent;color:var(--color-primary);padding:var(--spacing-sm)}.btn-text:hover:not(:disabled){background-color:var(--color-primary-container-low-opacity)}.btn-icon{background-color:transparent;color:var(--color-primary);padding:var(--spacing-sm);border-radius:var(--radius-full);width:40px;height:40px;min-height:40px}.btn-icon:hover:not(:disabled){background-color:var(--color-primary-container-low-opacity)}.verse-container{margin:var(--spacing-xl) 0;padding:var(--spacing-lg);border-bottom:1px solid var(--color-outline)}.verse-number{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;line-height:1;text-align:center;background:var(--color-primary);color:var(--color-on-primary);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin-left:var(--spacing-sm)}.translation{margin-top:var(--spacing-md);line-height:var(--line-height-relaxed);color:var(--color-text-primary);font-weight:var(--font-weight-normal)}.surah-card{text-decoration:none;color:inherit;transition:all var(--transition-base)}.surah-card:hover{border-color:var(--color-primary)!important;box-shadow:var(--elevation-2)}*{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color var(--transition-slow)}:focus-within,:hover{scrollbar-color:var(--color-outline) transparent}::-webkit-scrollbar{width:6px;height:6px;background:transparent}::-webkit-scrollbar-track{box-shadow:none;border:none}::-webkit-scrollbar-thumb,::-webkit-scrollbar-track{background:transparent;-webkit-background-clip:padding-box;background-clip:padding-box}::-webkit-scrollbar-thumb{border-radius:3px;-webkit-transition:background var(--transition-slow);transition:background var(--transition-slow)}:focus-within::-webkit-scrollbar-thumb,:hover::-webkit-scrollbar-thumb{background:var(--color-outline);opacity:.5}:focus-within::-webkit-scrollbar-thumb:hover,:hover::-webkit-scrollbar-thumb:hover{background:var(--color-outline);opacity:.7}body::-webkit-scrollbar,html::-webkit-scrollbar{width:6px;background:transparent}body::-webkit-scrollbar-track,html::-webkit-scrollbar-track{background:transparent;border:none;margin:0;padding:0}body::-webkit-scrollbar-thumb,html::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;-webkit-transition:background var(--transition-slow);transition:background var(--transition-slow)}body:focus-within::-webkit-scrollbar-thumb,body:hover::-webkit-scrollbar-thumb,html:focus-within::-webkit-scrollbar-thumb,html:hover::-webkit-scrollbar-thumb{background:var(--color-outline);opacity:.5}body:focus-within::-webkit-scrollbar-thumb:hover,body:hover::-webkit-scrollbar-thumb:hover,html:focus-within::-webkit-scrollbar-thumb:hover,html:hover::-webkit-scrollbar-thumb:hover{background:var(--color-outline);opacity:.7}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.fade-in{animation:fadeIn var(--transition-slow) ease}.slide-up{animation:slideUp var(--transition-slow) ease}.p-xs{padding:var(--spacing-xs)}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.p-xl{padding:var(--spacing-xl)}.p-2xl{padding:var(--spacing-2xl)}.m-xs{margin:var(--spacing-xs)}.m-sm{margin:var(--spacing-sm)}.m-md{margin:var(--spacing-md)}.m-lg{margin:var(--spacing-lg)}.m-xl{margin:var(--spacing-xl)}.m-2xl{margin:var(--spacing-2xl)}.gap-xs{gap:var(--spacing-xs)}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.gap-xl{gap:var(--spacing-xl)}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-disabled{color:var(--color-text-disabled)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}@media (max-width:599px){.app-bar-content{padding:var(--spacing-sm) var(--spacing-md)}.app-bar-title{font-size:var(--font-size-lg)}.card{padding:var(--spacing-md)}body{font-size:var(--font-size-sm)}}@media (min-width:600px) and (max-width:959px){.app-bar-content{padding:var(--spacing-sm) var(--spacing-lg)}}@media (min-width:960px){.app-bar-content{padding:var(--spacing-sm) var(--spacing-xl)}}@media (min-width:1200px){.app-bar-content{max-width:1200px}}@media (hover:none) and (pointer:coarse){.btn,.btn-icon{min-height:48px}.btn-icon{width:48px;height:48px}.card:hover{box-shadow:var(--elevation-2)}}