.quote-display{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-8);box-shadow:var(--shadow-md);border:1px solid var(--color-border);transition:var(--transition-all);max-width:100%;margin:0 auto}.quote-display:hover{box-shadow:var(--shadow-lg)}.quote-display--loading{min-height:200px;display:flex;align-items:center;justify-content:center}.quote-display--empty{text-align:center;padding:var(--spacing-12)}.quote-display__empty-message{color:var(--color-text-muted);font-style:italic}.quote-display__skeleton{width:100%;max-width:500px}.quote-display__skeleton-text,.quote-display__skeleton-author{background:linear-gradient(90deg,var(--color-border) 25%,var(--color-surface-hover) 50%,var(--color-border) 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:var(--radius-sm)}.quote-display__skeleton-text{height:80px;margin-bottom:var(--spacing-4)}.quote-display__skeleton-author{height:20px;width:60%}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.quote-display__content{margin-bottom:var(--spacing-6)}.quote-display__quote{margin-bottom:var(--spacing-4)}.quote-display__text{font-size:var(--font-size-xl);line-height:1.6;color:var(--color-text-primary);margin-bottom:var(--spacing-4);font-weight:400}.quote-display__arabic{font-size:var(--font-size-lg);line-height:1.8;color:var(--color-text-secondary);margin-bottom:var(--spacing-3);font-family:Times New Roman,Amiri,Arabic Typesetting,serif;text-align:right}.quote-display__transliteration{font-size:var(--font-size-base);color:var(--color-text-muted);margin-bottom:var(--spacing-4)}.quote-display__footer{border-top:1px solid var(--color-border);padding-top:var(--spacing-4)}.quote-display__author{font-size:var(--font-size-lg);color:var(--color-text-secondary);font-style:normal;font-weight:500;display:block;margin-bottom:var(--spacing-2)}.quote-display__reference{font-weight:400;color:var(--color-text-muted)}.quote-display__source{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--spacing-1)}.quote-display__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-3);margin-bottom:var(--spacing-6);padding-bottom:var(--spacing-4);border-bottom:1px solid var(--color-border)}.quote-display__category{background:var(--color-primary);color:#fff;padding:var(--spacing-1) var(--spacing-3);border-radius:var(--radius-xl);font-size:var(--font-size-sm);font-weight:500;text-transform:capitalize}.quote-display__tags{display:flex;flex-wrap:wrap;gap:var(--spacing-2)}.quote-display__tag{background:var(--color-surface-hover);color:var(--color-text-secondary);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-sm);font-size:var(--font-size-xs);border:1px solid var(--color-border)}.quote-display__actions{display:flex;gap:var(--spacing-3);justify-content:center;flex-wrap:wrap}.quote-display__action{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:500;transition:var(--transition-all);min-width:100px;justify-content:center}.quote-display__action:hover{background:var(--color-surface-hover);border-color:var(--color-primary);transform:translateY(-1px)}.quote-display__action:active{transform:translateY(0)}.quote-display__action--favorite.quote-display__action--active{background:#fef2f2;border-color:#ef4444;color:#dc2626}[data-theme=dark] .quote-display__action--favorite.quote-display__action--active{background:#220a0a;border-color:#ef4444;color:#fca5a5}.quote-display__action--share:hover{background:#eff6ff;border-color:#3b82f6;color:#1d4ed8}[data-theme=dark] .quote-display__action--share:hover{background:#0c1d36;color:#93c5fd}.quote-display__action--copy:hover{background:#f0fdf4;border-color:var(--color-success);color:#15803d}[data-theme=dark] .quote-display__action--copy:hover{background:#0a1f0a;color:#86efac}.quote-display__action-icon{font-size:var(--font-size-lg);line-height:1}.quote-display__action-text{font-size:var(--font-size-sm)}@media (max-width: 640px){.quote-display{padding:var(--spacing-6)}.quote-display__text{font-size:var(--font-size-lg)}.quote-display__actions{flex-direction:column}.quote-display__action{min-width:auto;width:100%}.quote-display__meta{flex-direction:column;align-items:flex-start}}@media (prefers-reduced-motion: reduce){.quote-display,.quote-display__action{transition:none}.quote-display__skeleton-text,.quote-display__skeleton-author{animation:none;background:var(--color-border)}}.category-chips{margin-bottom:var(--spacing-6)}.category-chips__title{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-3);margin:0 0 var(--spacing-3) 0}.category-chips__list{display:flex;flex-wrap:wrap;gap:var(--spacing-2)}.category-chip{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-background);color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:500;transition:var(--transition-all);cursor:pointer;text-decoration:none;white-space:nowrap}.category-chip:hover{background:var(--color-surface-hover);border-color:var(--color-primary);color:var(--color-text-primary);transform:translateY(-1px)}.category-chip:active{transform:translateY(0)}.category-chip:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.category-chip--active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:600}.category-chip--active:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff}.category-chip__label{line-height:1}.category-chip__count{display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--spacing-1);background:var(--color-surface);border-radius:var(--radius-xl);font-size:var(--font-size-xs);font-weight:600;line-height:1}.category-chip--active .category-chip__count{background:#fff3;color:#fff}@media (max-width: 640px){.category-chips__list{gap:var(--spacing-1)}.category-chip{padding:var(--spacing-2);font-size:var(--font-size-xs);min-height:44px}.category-chip__count{min-width:18px;height:18px;font-size:10px}}@media (prefers-reduced-motion: reduce){.category-chip{transition:none;transform:none}.category-chip:hover,.category-chip:active{transform:none}}.category-chips__list:focus-within .category-chip:not(:focus){opacity:.7}@media (prefers-contrast: high){.category-chip{border-width:2px}.category-chip--active{border-color:currentColor}}.search-box{margin-bottom:var(--spacing-6)}.search-box__label{display:block;font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-3)}.search-box__input-wrapper{position:relative;display:flex;align-items:center;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);transition:border-color .2s ease,background-color .2s ease;overflow:hidden}.search-box--focused .search-box__input-wrapper{border-color:var(--color-primary);background:var(--color-background)}.search-box__icon{display:flex;align-items:center;justify-content:center;font-size:var(--font-size-lg);color:var(--color-text-muted);transition:color .2s ease}.search-box__icon--search{padding-left:var(--spacing-4);padding-right:var(--spacing-2);pointer-events:none}.search-box--focused .search-box__icon--search{color:var(--color-primary)}.search-box__input{flex:1;padding:var(--spacing-4);padding-left:0;border:none;background:transparent;color:var(--color-text-primary);font-size:var(--font-size-base);line-height:1.5;outline:none}.search-box__input::placeholder{color:var(--color-text-muted)}.search-box__input::-webkit-search-decoration,.search-box__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.search-box__clear{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2);margin-right:var(--spacing-2);border:none;background:transparent;color:var(--color-text-muted);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease;min-width:32px;height:32px}.search-box__clear:hover{background:var(--color-surface-hover);color:var(--color-text-secondary)}.search-box__clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.search-box__icon--clear{font-size:var(--font-size-sm);font-weight:700}.search-box__hint{display:flex;align-items:center;gap:var(--spacing-2);margin-top:var(--spacing-2);font-size:var(--font-size-xs);color:var(--color-text-muted)}.search-box__hint kbd{display:inline-block;padding:var(--spacing-1) var(--spacing-2);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);color:var(--color-text-secondary);box-shadow:0 1px 1px #0000001a}.search-box--focused .search-box__hint{opacity:.8}@media (max-width: 640px){.search-box__input{font-size:16px}.search-box__hint{display:none}.search-box__input-wrapper{min-height:48px}}@media (prefers-reduced-motion: reduce){.search-box__input-wrapper,.search-box__icon,.search-box__clear{transition:none}}@media (prefers-contrast: high){.search-box__input-wrapper{border-width:3px}.search-box--focused .search-box__input-wrapper{border-color:var(--color-primary)}.search-box__hint kbd{border-width:2px}}[data-theme=dark] .search-box__hint kbd{box-shadow:0 1px 1px #ffffff1a}.theme-toggle{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:500;transition:var(--transition-all);cursor:pointer}.theme-toggle:hover{background:var(--color-surface-hover);border-color:var(--color-primary);transform:translateY(-1px)}.theme-toggle:active{transform:translateY(0)}.theme-toggle:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.theme-toggle--small{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.theme-toggle--small .theme-toggle__icon{font-size:var(--font-size-sm)}.theme-toggle--medium{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.theme-toggle--medium .theme-toggle__icon{font-size:var(--font-size-base)}.theme-toggle--large{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-base)}.theme-toggle--large .theme-toggle__icon{font-size:var(--font-size-lg)}.theme-toggle__icon{display:flex;align-items:center;justify-content:center;line-height:1;transition:var(--transition-all)}.theme-toggle__label{white-space:nowrap}.theme-toggle:hover .theme-toggle__icon{transform:scale(1.1)}@media (prefers-reduced-motion: reduce){.theme-toggle,.theme-toggle__icon{transition:none;transform:none}.theme-toggle:hover,.theme-toggle:active,.theme-toggle:hover .theme-toggle__icon{transform:none}}@media (max-width: 640px){.theme-toggle{min-height:44px}}.settings-panel-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-4)}.settings-panel{background:var(--color-background);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--color-border);width:100%;max-width:500px;max-height:90vh;overflow-y:auto;animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.settings-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-6);border-bottom:1px solid var(--color-border)}.settings-panel__title{font-size:var(--font-size-xl);font-weight:600;color:var(--color-text-primary);margin:0}.settings-panel__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;color:var(--color-text-muted);font-size:var(--font-size-lg);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-all)}.settings-panel__close:hover{background:var(--color-surface-hover);color:var(--color-text-secondary)}.settings-panel__close:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:1px}.settings-panel__content{padding:var(--spacing-6)}.settings-section{margin-bottom:var(--spacing-8)}.settings-section:last-child{margin-bottom:0}.settings-section__title{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary);margin:0 0 var(--spacing-4) 0;padding-bottom:var(--spacing-2);border-bottom:1px solid var(--color-border)}.settings-item{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-4);margin-bottom:var(--spacing-4);flex-wrap:wrap}.settings-item:last-child{margin-bottom:0}.settings-item__label{font-size:var(--font-size-base);font-weight:500;color:var(--color-text-primary);flex:1;min-width:120px}.settings-item__select{padding:var(--spacing-2) var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);font-size:var(--font-size-sm);min-width:120px;cursor:pointer;transition:var(--transition-all)}.settings-item__select:hover{border-color:var(--color-primary)}.settings-item__select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #6366f11a}.settings-item__actions{display:flex;gap:var(--spacing-2);flex-wrap:wrap}.settings-button{padding:var(--spacing-2) var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:var(--transition-all);white-space:nowrap;position:relative;overflow:hidden}.settings-button:hover{background:var(--color-surface-hover);border-color:var(--color-primary)}.settings-button:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:1px}.settings-button:disabled{opacity:.5;cursor:not-allowed}.settings-button--secondary{background:var(--color-surface)}.settings-button--danger{background:#fee2e2;border-color:#ef4444;color:#dc2626}[data-theme=dark] .settings-button--danger{background:#220a0a;border-color:#ef4444;color:#fca5a5}.settings-button--danger:hover{background:#fecaca;border-color:#dc2626}[data-theme=dark] .settings-button--danger:hover{background:#2d0a0a;border-color:#dc2626}.settings-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.settings-about{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.6}.settings-about p{margin-bottom:var(--spacing-2)}.settings-about p:last-child{margin-bottom:0}.settings-about kbd{display:inline-block;padding:var(--spacing-1);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);color:var(--color-text-secondary);box-shadow:0 1px 1px #0000001a;margin:0 2px}@media (max-width: 640px){.settings-panel-overlay{padding:var(--spacing-2)}.settings-panel{max-height:95vh}.settings-panel__header,.settings-panel__content{padding:var(--spacing-4)}.settings-item{flex-direction:column;align-items:stretch;gap:var(--spacing-2)}.settings-item__label{min-width:auto}.settings-item__actions{width:100%;justify-content:stretch}.settings-button{flex:1;min-height:44px}.settings-item__select{min-width:auto;width:100%}}@media (prefers-reduced-motion: reduce){.settings-panel{animation:none}.settings-button,.settings-item__select,.settings-panel__close{transition:none}}@media (prefers-contrast: high){.settings-panel,.settings-button,.settings-item__select{border-width:2px}}[data-theme=dark] .settings-about kbd{box-shadow:0 1px 1px #ffffff1a}:root{--color-primary: #6366f1;--color-primary-hover: #5856eb;--color-background: #ffffff;--color-surface: #f8fafc;--color-surface-hover: #f1f5f9;--color-text-primary: #0f172a;--color-text-secondary: #64748b;--color-text-muted: #94a3b8;--color-border: #e2e8f0;--color-border-focus: #6366f1;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;--font-family-mono: ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-10: 2.5rem;--spacing-12: 3rem;--spacing-16: 4rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--transition-colors: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;--transition-all: all .15s ease-in-out}[data-theme=dark]{--color-background: #0f172a;--color-surface: #1e293b;--color-surface-hover: #334155;--color-text-primary: #f8fafc;--color-text-secondary: #cbd5e1;--color-text-muted: #64748b;--color-border: #334155;--color-border-focus: #6366f1}[data-font-size=small]{--font-size-base: .875rem;--font-size-lg: 1rem;--font-size-xl: 1.125rem;--font-size-2xl: 1.25rem;--font-size-3xl: 1.5rem;--font-size-4xl: 1.875rem}[data-font-size=large]{--font-size-base: 1.125rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 1.875rem;--font-size-3xl: 2.25rem;--font-size-4xl: 2.75rem}*{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-family-base);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:var(--color-background);color:var(--color-text-primary);font-size:var(--font-size-base);line-height:1.6;transition:var(--transition-colors)}:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit;transition:var(--transition-all)}button:disabled{cursor:not-allowed;opacity:.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-40px;left:6px;background:var(--color-primary);color:#fff;padding:8px;text-decoration:none;border-radius:var(--radius-md);z-index:1000;transform:translateY(-100%);transition:transform .3s ease-in-out}.skip-link:focus{top:6px;transform:translateY(0)}.container{max-width:800px;margin:0 auto;padding:0 var(--spacing-4)}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--color-background);color:var(--color-text-primary)}.app__header{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:var(--spacing-4) 0;margin-bottom:var(--spacing-8)}.app__header-content{display:flex;align-items:center;justify-content:space-between;max-width:800px;margin:0 auto;padding:0 var(--spacing-4)}.app__title{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-text-primary);margin:0;display:flex;align-items:center;gap:var(--spacing-3)}.app__title-icon{font-size:var(--font-size-3xl)}.app__header-actions{display:flex;align-items:center;gap:var(--spacing-3)}.app__main{flex:1;max-width:800px;margin:0 auto;padding:0 var(--spacing-4);width:100%}.app__controls{display:flex;flex-wrap:wrap;gap:var(--spacing-4);margin-bottom:var(--spacing-8);align-items:center;justify-content:center}.app__control-group{display:flex;gap:var(--spacing-2);align-items:center}.app__quote-section{margin-bottom:var(--spacing-8)}.app__filters{margin-bottom:var(--spacing-6)}.app__footer{margin-top:var(--spacing-12);padding:var(--spacing-6) var(--spacing-4);border-top:1px solid var(--color-border);text-align:center;color:var(--color-text-muted);font-size:var(--font-size-sm)}.app__footer p{margin:0}.app__toast{position:fixed;bottom:var(--spacing-6);left:50%;transform:translate(-50%);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-3) var(--spacing-4);box-shadow:var(--shadow-lg);z-index:1000;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.app__toast--success{border-color:var(--color-success);background:#f0fdf4;color:#15803d}[data-theme=dark] .app__toast--success{background:#0a1f0a;color:#86efac}.app__toast--error{border-color:var(--color-error);background:#fef2f2;color:#dc2626}[data-theme=dark] .app__toast--error{background:#220a0a;color:#fca5a5}.app__loading{display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--color-text-muted)}.app__error{text-align:center;padding:var(--spacing-8);color:var(--color-error)}.action-button{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:var(--transition-all);text-decoration:none}.action-button:hover{background:var(--color-surface-hover);border-color:var(--color-primary);transform:translateY(-1px)}.action-button:active{transform:translateY(0)}.action-button:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.action-button--primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.action-button--primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff}.action-button__icon{font-size:var(--font-size-lg);line-height:1}@media (max-width: 640px){.app__header-content{flex-direction:column;gap:var(--spacing-4)}.app__header-actions{width:100%;justify-content:center}.app__title{font-size:var(--font-size-xl)}.app__controls{flex-direction:column;gap:var(--spacing-3)}.app__control-group{width:100%;justify-content:center}.action-button{min-height:44px}}@media (prefers-reduced-motion: reduce){.action-button,.app__toast{transition:none;animation:none;transform:translate(-50%)}.action-button:hover,.action-button:active{transform:translate(-50%)}}