:root {
    --main-color: #FF5722;
    --main-color-hover: #E64A19;
    --dark-bg: #1A1A1A;
    --card-bg: #282828;
    --text-color: #F8F8F8;
    --slider-bg: #4A4A4A;
    --slider-thumb: #FF5722;
    --slider-track: #333;
    --reset-color: #2196F3;
    --reset-color-hover: #1E88E5;
    --export-color: #03A9F4;
    --export-color-hover: #0288D1;
    --download-color: #4CAF50;
    --download-color-hover: #388E3C;
    --recording-color: #F44336;
    --recording-color-hover: #D32F2F;
    --font-main: 'Cairo', 'Roboto', 'Segoe UI', Tahoma, sans-serif;
    --font-mono: 'Roboto Mono', 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body { 
    background: var(--dark-bg); 
    color: var(--text-color); 
    font-family: var(--font-main); 
    margin: 0; 
    padding: 20px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 100vh;
}

.app-container { 
    width: 100%; 
    max-width: 750px; 
    background-color: var(--card-bg); 
    padding: 25px 30px; 
    border-radius: 16px; 
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7); 
    border: 1px solid #444; 
    text-align: center; 
    transition: border-color 0.3s ease, background-color 0.3s ease; 
    position: relative; 
    overflow: hidden;
}

.app-container.drag-over { 
    border-color: var(--main-color); 
    background-color: #333; 
}

.app-container.drag-over::before { 
    content: 'أفلت الملف هنا... 📂'; 
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
    display: flex; justify-content: center; align-items: center; 
    font-size: 1.6em; font-weight: bold; color: var(--main-color); 
    background: rgba(44, 44, 44, 0.95); border-radius: 16px; 
    z-index: 10; pointer-events: none; 
}

h2 { 
    color: var(--main-color); 
    border-bottom: 2px solid var(--main-color); 
    padding-bottom: 15px; 
    margin-top: 0; margin-bottom: 25px; 
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px; 
}

#fileInput {
    display: none; /* إخفاء الزر الفعلي */
}
.file-drop-zone {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 25px;
    margin-bottom: 20px;
    background-color: var(--slider-bg);
    border: 2px dashed var(--main-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-main);
    font-weight: 600;
    color: var(--text-color);
}
.file-drop-zone:hover {
    background-color: #555;
    border-color: var(--main-color-hover);
}
.file-drop-zone span {
    font-size: 1.1em;
    pointer-events: none; 
}

#asciiCanvas { 
    width: 100%; height: auto; 
    border: 2px solid #555; background-color: #000; 
    border-radius: 12px; margin-bottom: 20px; 
    transition: border-color 0.3s; 
}
#asciiCanvas:hover { border-color: var(--main-color); }
#video, #pixelCanvas { display: none; }
#asciiCanvas:-webkit-full-screen, #asciiCanvas:fullscreen { 
    width: 100% !important; height: 100% !important; 
    object-fit: contain; background-color: #000; 
    border: none; border-radius: 0; 
}

#progressBarContainer { 
    width: 100%; height: 12px; 
    background: var(--slider-track); border-radius: 6px; 
    margin: 15px 0; cursor: pointer; overflow: hidden; 
}
#progressBar { 
    height: 100%; width: 0%; 
    background: var(--main-color); 
    transition: width 0.1s linear; border-radius: 6px; 
}

.controls { 
    display: flex; flex-wrap: wrap; 
    align-items: center; justify-content: space-between; 
    gap: 15px; margin-top: 20px; margin-bottom: 25px;
}
.controls-group-left, .controls-group-right { 
    display: flex; align-items: center; gap: 10px; 
}
.controls-group-left { flex-grow: 1; justify-content: flex-start; }
.controls-group-right { flex-grow: 1; justify-content: flex-end; }
#currentTime { 
    color: var(--text-color); font-size: 1.1em; 
    font-weight: bold; font-family: var(--font-mono);
    white-space: nowrap; opacity: 0.9; text-align: center;
    flex-grow: 0; padding: 0 15px;
}

.controls button { 
    padding: 10px 15px; border: none; 
    color: white; font-weight: 600; 
    cursor: pointer; border-radius: 10px; 
    transition: all 0.3s ease; 
    font-size: 1em; 
    font-family: var(--font-main);
    min-width: 45px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex; 
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.controls button:hover:not(:disabled) {
    transform: scale(1.05); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.controls button:disabled { 
    background-color: #555; color: #999; 
    cursor: not-allowed; transform: none; box-shadow: none; 
}

#playPauseButton { background-color: var(--main-color); }
#playPauseButton:hover:not(:disabled) { background-color: var(--main-color-hover); box-shadow: 0 4px 10px rgba(255, 87, 34, 0.4); }
#downloadButton { background-color: var(--download-color); }
#downloadButton.is-recording { background-color: var(--recording-color); }
#downloadButton:hover:not(:disabled) { background-color: var(--download-color-hover); }
#downloadButton.is-recording:hover:not(:disabled) { background-color: var(--recording-color-hover); }
#copyTxtButton { background-color: var(--export-color); }
#copyTxtButton:hover:not(:disabled) { background-color: var(--export-color-hover); }
#fullscreenButton, #muteButton { background-color: #607D8B; }
#fullscreenButton:hover:not(:disabled), #muteButton:hover:not(:disabled) { background-color: #455A64; }

input[type="range"] { 
    -webkit-appearance: none; appearance: none; 
    background: transparent; cursor: pointer; margin: 0 5px;
}
#volumeSlider { flex-grow: 1; max-width: 120px; }
.settings input[type="range"] { flex-grow: 1; max-width: 200px; }
input[type="range"]::-webkit-slider-runnable-track { background: var(--slider-track); border-radius: 5px; height: 10px; }
input[type="range"]::-moz-range-track { background: var(--slider-track); border-radius: 5px; height: 10px; }
input[type="range"]::-webkit-slider-thumb { 
    -webkit-appearance: none; appearance: none; 
    margin-top: -3px; background-color: var(--slider-thumb); 
    border-radius: 50%; height: 16px; width: 16px; 
    border: none; transition: transform 0.2s ease, box-shadow 0.2s ease; 
}
input[type="range"]::-moz-range-thumb { 
    background-color: var(--slider-thumb); border-radius: 50%; 
    height: 16px; width: 16px; border: none; 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 10px var(--slider-thumb); }
input[type="range"]::-moz-range-thumb:hover { transform: scale(1.2); box-shadow: 0 0 10px var(--slider-thumb); }

.settings-toggle {
    width: 100%;
    padding: 12px;
    background-color: var(--slider-bg);
    color: var(--text-color);
    border: none;
    border-radius: 10px;
    font-family: var(--font-main);
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.settings-toggle:hover {
    background-color: #555;
}
.settings-toggle .icon {
    font-size: 1.2em;
    transition: transform 0.4s ease;
}
.settings-toggle.active .icon {
    transform: rotate(180deg);
}

.settings-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    border-bottom: 1px solid #444; 
    margin-bottom: 15px; 
}
.settings-wrapper.open {
    max-height: 1000px; 
    transition: max-height 0.4s ease-in;
    margin-top: 20px; 
}

.settings { 
    background: rgba(0,0,0,0.25); 
    padding: 20px; 
    border-radius: 10px; 
    gap: 18px; 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    border: 1px solid #444; 
}
.settings label { 
    display: flex; align-items: center; gap: 10px; 
    font-size: 1em; justify-content: space-between; 
}
#resolutionValue, #brightnessValue, #contrastValue { 
    color: var(--main-color); font-weight: bold; 
    min-width: 35px; text-align: right; 
    font-family: var(--font-mono);
}
select, #customCharSetInput { 
    background-color: var(--slider-bg); color: var(--text-color); 
    border: 2px solid var(--main-color); border-radius: 5px; 
    padding: 6px 10px; font-family: var(--font-main); 
    font-weight: bold; cursor: pointer; transition: box-shadow 0.3s; 
}
#customCharSetInput { 
    background: var(--dark-bg); border: 1px solid var(--slider-track); 
    font-family: var(--font-mono); width: 100px; margin-right: auto; 
}
#charSetPreview { 
    background: linear-gradient(to right, #000, #fff); color: #fff; 
    mix-blend-mode: difference; padding: 4px 6px; 
    font-family: var(--font-mono); font-weight: bold; 
    border-radius: 5px; font-size: 0.9em; 
    white-space: nowrap; overflow: hidden; 
    text-overflow: ellipsis; max-width: 100px; 
}
select:focus { outline: none; }
.controls button:focus-visible, input[type="range"]:focus-visible, 
select:focus-visible, #resetButton:focus-visible, 
#customCharSetInput:focus-visible, .settings-toggle:focus-visible { 
    outline: 2px solid var(--main-color); 
    outline-offset: 2px; box-shadow: 0 0 8px var(--main-color); 
}

#resetButton { 
    grid-column: 1 / -1; 
    background-color: var(--reset-color); 
    color: white; font-weight: bold; 
    padding: 12px; border: none; border-radius: 10px; 
    cursor: pointer; transition: all 0.3s ease; 
    margin-top: 10px; font-family: var(--font-main);
    font-size: 1em;
}
#resetButton:hover { 
    background-color: var(--reset-color-hover); 
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.4); 
}

.credits { 
    margin-top: 25px; font-size: 0.85em; 
    color: #888; text-align: center; 
    direction: ltr; opacity: 0.8; 
}

@media (max-width: 650px) { 
    body { padding: 10px; }
    .app-container { padding: 20px 15px; } 
    h2 { font-size: 1.4em; } 
    .controls { gap: 10px; justify-content: center; }
    .controls-group-left { order: 2; flex-grow: 1; justify-content: center; }
    .controls-group-right { order: 3; flex-grow: 1; justify-content: center; }
    #currentTime { order: 1; flex-basis: 100%; margin-bottom: 10px; } 
    .controls button { padding: 10px; font-size: 0.9em; } 
    #volumeSlider { max-width: 100px; } 
    .settings { grid-template-columns: 1fr; gap: 15px; padding: 15px; } 
    .settings label { font-size: 0.9em; } 
    .settings input[type="range"] { max-width: 100%; }
}

#notification-container { 
    position: fixed; bottom: 20px; left: 50%; 
    transform: translateX(-50%); z-index: 2000; 
    display: flex; flex-direction: column-reverse; 
    gap: 10px; align-items: center; 
}
.notification-toast { 
    padding: 12px 20px; border-radius: 8px; 
    color: #fff; font-weight: 600; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); 
    border: 1px solid #555; opacity: 0; 
    transform: translateY(20px); transition: all 0.4s ease; 
    max-width: 90vw; text-align: center; 
    font-family: var(--font-main);
}
.notification-toast.show { opacity: 1; transform: translateY(0); }
.notification-toast.hide { opacity: 0; transform: translateY(10px); }
.notification-toast.info { background-color: var(--reset-color); }
.notification-toast.success { background-color: var(--download-color); }
.notification-toast.error { background-color: var(--recording-color); }
.notification-toast.warning { background-color: #ff9800; }