:root{--color-bg: #ffffff;--color-bg-page: #ffffff;--color-text: #1a1a1a;--color-text-secondary: #6c757d;--color-primary: #20b1b1;--color-primary-hover: #0bcaca;--color-secondary: #3a86ff;--color-border: #dee2e6;--color-surface: #f8f9fa;--color-surface-2: #e9ecef;--color-shadow: rgba(0, 0, 0, .1);--color-backdrop: rgba(255, 255, 255, .9);--color-gray: #767d86;--color-logo: #646464;--color-success: #20b1b1;--color-error: #CC0000;--color-warning: #ffc107;--color-info: #17a2b8;--font-primary: "Sora", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-arabic: "Almarai", "Mada", "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--font-size-base: 16px;--font-size-xxs: 10px;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-lg: 20px;--font-size-xl: 24px;--font-size-xxl: 32px;--line-height: 1.5;--font-weight-regular: 400;--font-weight-bold: 500;--space-xxs: 2px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-xxl: 48px;--border-width: 1px;--border-width-thick: 2px;--border-width-brutal: 3px;--border-style: solid;--border: var(--border-width) var(--border-style) var(--color-border);--border-thick: var(--border-width-thick) var(--border-style) var(--color-border);--border-brutal: var(--border-width-brutal) var(--border-style) var(--color-border);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-pill: 20px;--radius-round: 50%;--shadow-sm: 0 1px 2px var(--color-shadow);--shadow-md: 0 2px 8px var(--color-shadow);--shadow-lg: 0 4px 16px var(--color-shadow);--shadow-xl: 0 8px 24px var(--color-shadow);--shadow-primary: 0 4px 16px rgba(255, 0, 110, .3);--shadow-brutal-1: 0 2px 0 var(--color-border);--shadow-brutal-2: 0 4px 0 rgba(0, 0, 0, .1);--shadow-brutal-1top: 0 -2px 0 var(--color-border);--shadow-brutal-2top: 0 -4px 0 rgba(0, 0, 0, .1);--transition-fast: .15s ease-out;--transition-base: .25s ease-out;--transition-slow: .35s ease-out;--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=dark]{--color-bg: #1c1c1c;--color-bg-page: #1c1c1c;--color-text: #ffffff;--color-text-secondary: #b0b0b0;--color-primary: #20B1B1;--color-secondary: #3a86ff;--color-border: #333333;--color-surface: #1e1e1e;--color-surface-2: #2d2d2d;--color-shadow: rgba(0, 0, 0, .3);--color-backdrop: rgba(18, 18, 18, .9);--color-logo: #c9c9c9}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--color-bg: #121212;--color-bg-page: #1c1c1c;--color-text: #ffffff;--color-text-secondary: #b0b0b0;--color-primary: #20B1B1;--color-secondary: #3a86ff;--color-border: #333333;--color-surface: #1e1e1e;--color-surface-2: #2d2d2d;--color-shadow: rgba(0, 0, 0, .3);--color-backdrop: rgba(18, 18, 18, .9);--color-logo: #c9c9c9}}*:focus{outline:2px solid var(--color-primary);outline-offset:2px}::selection{background-color:var(--color-primary);color:var(--color-bg)}.app{max-width:1200px;margin:0 auto;padding:var(--space-md)}.app__header{position:sticky;top:0;background:linear-gradient(to bottom,var(--color-bg) 0%,var(--color-bg) 90%,transparent 100%);padding-bottom:var(--space-md);margin-bottom:var(--space-lg);z-index:10}@supports (backdrop-filter: blur(8px)){.app__header{background:linear-gradient(to bottom,rgba(var(--color-bg-rgb),.95) 0%,rgba(var(--color-bg-rgb),.95) 90%,transparent 100%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}.app__header:not(.with-tags){position:static;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.app__loading,.app__error,.app__empty{text-align:center;padding:var(--space-xxl);font-family:var(--font-primary);font-size:var(--font-size-lg);color:var(--color-text)}.app__error button{margin-top:var(--space-md);padding:var(--space-sm) var(--space-lg);border:var(--border);background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-primary);font-size:var(--font-size-base);cursor:pointer;transition:all var(--transition-fast)}.app__error button:hover{background-color:var(--color-accent);color:var(--color-bg);transform:translate(-2px,-2px);box-shadow:var(--shadow)}.audio-list{display:grid;grid-template-columns:1fr;gap:var(--space-lg)}@media(max-width:767px){.app__header{margin-bottom:var(--space-lg)}.audio-list{gap:var(--space-lg)}}@media(min-width:768px){.audio-list{grid-template-columns:repeat(2,1fr);gap:var(--space-xl)}}@media(min-width:1024px){.audio-list{grid-template-columns:repeat(3,1fr)}}.filter-tabs-wrapper{position:relative}.filter-tabs-wrapper:before,.filter-tabs-wrapper:after{content:"";position:absolute;top:0;bottom:0;width:30px;pointer-events:none;z-index:1;transition:opacity var(--transition-base);opacity:0}.filter-tabs-wrapper:before{left:0;background:linear-gradient(to right,var(--color-bg) 0%,transparent 100%)}.filter-tabs-wrapper:after{right:0;background:linear-gradient(to left,var(--color-bg) 0%,transparent 100%)}.filter-tabs-wrapper.scrollable-left:before{opacity:1}.filter-tabs-wrapper.scrollable-right:after{opacity:1}.filter-tabs{display:flex;gap:var(--space-sm);padding:var(--space-md) 0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.filter-tabs::-webkit-scrollbar{display:none}.filter-tabs__tab{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-pill);background-color:var(--color-bg);color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--font-size-xs);font-weight:500;white-space:nowrap;cursor:pointer;transition:all var(--transition-base)}.filter-tabs__tab:hover{background-color:var(--color-surface);border-color:var(--color-primary);color:var(--color-text);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.filter-tabs__tab:focus{outline:var(--border-width) solid var(--color-primary);outline-offset:2px}.filter-tabs__tab.active{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-bg);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.filter-tabs__tab.active:hover{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.filter-tabs__count{padding:2px var(--space-xs);border-radius:var(--radius-sm);background-color:var(--color-surface);color:var(--color-text-secondary);font-size:var(--font-size-xs);font-weight:600}.active .filter-tabs__count{background-color:var(--color-bg);color:var(--color-primary)}@media(min-width:768px){.filter-tabs{justify-content:center;flex-wrap:wrap;gap:var(--space-md)}.filter-tabs__tab{padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-xs)}}.audio-item{display:flex;flex-direction:column;gap:var(--space-xl);padding-block:var(--space-md);padding-inline:var(--space-md);background:var(--color-bg);border:var(--border-width-brutal) solid var(--color-border);border-radius:var(--radius-lg) var(--radius-md) var(--radius-xl) var(--radius-sm);box-shadow:var(--shadow-brutal-1);transition:all var(--transition-base)}.audio-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-brutal-2);border-color:var(--color-primary)}.audio-item.currently-playing{border-inline-start:4px solid var(--color-primary);background-color:var(--color-surface);box-shadow:var(--shadow-brutal-1),var(--shadow-brutal-2);border-radius:var(--radius-xl) var(--radius-sm) var(--radius-lg) var(--radius-md)}.audio-item__content{display:flex;align-items:center;gap:var(--space-md)}.audio-item__title{margin:0;font-family:var(--font-primary);font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text)}.audio-item__title:lang(ar){font-family:var(--font-arabic);font-size:var(--font-size-base);line-height:1.6}.audio-item__author{margin:0;font-family:var(--font-primary);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.audio-item__author:lang(ar){font-family:var(--font-arabic)}.audio-item__tags{display:flex;flex-wrap:wrap;align-items:center;margin-top:auto;font-family:var(--font-primary);font-size:var(--font-size-xxs);color:var(--color-text-secondary);line-height:1.2}.audio-item__tag:not(:last-child):after{content:"/";margin-inline-start:var(--space-xs);color:var(--color-text-tertiary)}.audio-item__info{flex:1;min-width:0}.audio-item__actions-container{position:relative;display:flex;align-items:center;margin-inline-start:auto;flex-shrink:0}.audio-item__actions{position:absolute;inset-inline-end:0;top:50%;display:flex;align-items:center;gap:var(--space-xs);background-color:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-xs);box-shadow:var(--shadow-sm);opacity:0;visibility:hidden;transition:all var(--transition-base);z-index:var(--z-dropdown);transform:translateY(-50%) translate(8px)}.audio-item__actions.show{opacity:1;visibility:visible;transform:translateY(-50%) translate(0)}@media(min-width:769px){.audio-item__actions-container:hover .audio-item__actions{opacity:1;visibility:visible;transform:translateY(-50%) translate(0)}}.audio-item__share{display:flex;align-items:center}@media(max-width:768px){.audio-item{padding:var(--space-md) var(--space-sm);gap:var(--space-lg)}.audio-item__content{gap:var(--space-sm);flex-wrap:nowrap}.audio-item__title{font-size:var(--font-size-sm);line-height:1.2}.audio-item__author{font-size:var(--font-size-sm)}.audio-item__actions{gap:var(--space-xxs);padding:var(--space-xxs);transform:translateY(-50%) translate(6px)}.audio-item__actions.show{transform:translateY(-50%) translate(0)}}