@import"https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Sora:wght@100..800&display=swap";.btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-text);font-family:inherit;font-size:inherit;line-height:1;border-radius:var(--radius-sm);transition:all var(--transition-base)}.btn:focus{outline:2px solid var(--color-primary);outline-offset:2px}.btn:focus:not(:focus-visible){outline:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:disabled:hover{transform:none!important;box-shadow:none!important}.btn--sm{width:28px;height:28px;min-width:28px;min-height:28px}.btn--md{width:32px;height:32px;min-width:32px;min-height:32px}.btn--lg{width:40px;height:40px;min-width:40px;min-height:40px;font-size:var(--font-size-base)}.btn--xl{width:48px;height:48px;min-width:48px;min-height:48px;font-size:var(--font-size-lg)}.btn--ghost{background:transparent;border-radius:var(--radius-sm)}.btn--ghost:hover:not(:disabled){background-color:var(--color-surface-hover)}.btn--ghost:active:not(:disabled){transform:scale(.95)}.btn--action{background:transparent;border-radius:var(--radius-sm)}.btn--action:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-bg);transform:translateY(-1px)}.btn--action:active:not(:disabled){transform:translateY(0)}.btn--primary{background-color:var(--color-primary);color:var(--color-bg);border:var(--border-width-brutal) solid var(--color-primary)}.btn--primary:hover:not(:disabled){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn--primary:active:not(:disabled){transform:translateY(0)}.btn--primary-outline{background-color:var(--color-bg);color:var(--color-primary);border:var(--border-width-brutal) solid var(--color-primary)}.btn--primary-outline:hover:not(:disabled){background-color:var(--color-primary-hover);color:var(--color-bg);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.btn--primary-outline:active:not(:disabled){transform:translateY(0)}.btn--primary-outline.playing{background-color:var(--color-primary);color:var(--color-bg)}.btn--primary-outline.playing:hover{background-color:var(--color-primary-hover)}.btn--text{background:none;border:none;color:var(--color-text-secondary);transition:color var(--transition-base);cursor:pointer;-webkit-user-select:none;user-select:none;padding:0 var(--space-xs)}.btn--text:hover:not(:disabled){color:var(--color-primary);text-decoration:underline}.btn--round{border-radius:var(--radius-round)}.btn--pill{border-radius:var(--radius-pill)}.share-button{gap:.5em;height:fit-content;line-height:var(--line-height-small);font-weight:var(--font-weight-semibold);background-color:var(--color-surface);color:var(--color-text);border-radius:var(--radius-sm);border:none;transition:all var(--transition-base);cursor:pointer}.share-button small{font-size:.9rem;font-weight:var(--font-weight-regular)}.share-button:hover:not(:disabled){background-color:var(--color-primary);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-sm)}.share-button:active:not(:disabled){transform:translateY(0)}.share-button--icon-only{padding:0}.share-button--icon-only small{display:none}@media(max-width:768px){.btn--md{width:38px;height:38px;min-width:34px;min-height:34px}.btn--lg{width:36px;height:36px;min-width:36px;min-height:36px}.btn--xl{width:40px;height:40px;min-width:40px;min-height:40px}.share-button small{font-size:.85rem}}@keyframes share-pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.share-success{animation:share-pulse .4s ease}html{background-color:var(--color-bg-page);transition:background-color var(--transition-base),color var(--transition-base)}*{transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base)}body{background-color:var(--color-bg-page);color:var(--color-text)}.app-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-lg);border-bottom:var(--border-width) solid var(--color-border);margin-bottom:var(--space-xl)}.header-left{display:flex;align-items:center;gap:var(--space-md)}.app-logo{width:39px;height:auto;filter:drop-shadow(var(--shadow-sm))}.app-main{min-height:calc(100vh - 200px)}.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:var(--radius-round);background:var(--color-surface);color:var(--color-text);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.theme-toggle:hover{background:var(--color-surface-2);box-shadow:var(--shadow-md);transform:translateY(-1px)}.theme-toggle:active{transform:translateY(0)}.theme-toggle:focus{outline:2px solid var(--color-primary);outline-offset:2px}.theme-toggle svg{fill:currentColor;transition:transform var(--transition-base)}.theme-toggle[data-theme=dark] svg{transform:rotate(180deg)}.error{height:67vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:var(--background);color:var(--text);padding:20px}.error p{font-size:1.2rem;margin-bottom:20px}body{font-family:var(--font-primary);font-size:var(--font-size-base);line-height:var(--line-height);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;margin:0 0 var(--space-md) 0}h1{font-size:var(--font-size-xxl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}p{margin:0 0 var(--space-md) 0;line-height:var(--line-height)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-secondary)}code,pre,kbd,samp{font-family:var(--font-mono);font-size:.9em}small{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.text-primary{color:var(--color-primary)}.text-secondary{color:var(--color-text-secondary)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-weight-normal{font-weight:400}.font-weight-medium{font-weight:500}.font-weight-semibold{font-weight:600}.font-weight-bold{font-weight:700}: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)}