/* ==========================================================================
   TABLE OF CONTENTS
   1. Imports & Variables
   2. Reset & Global Styles
   3. Cursor Management
   4. Preloader
   5. Welcome Screen
   6. Desktop Environment (Wallpaper, Grid)
   7. Taskbar & Tray
   8. Start Menu
   9. Window System (Containers)
   10. App: Project Viewer
   11. App: Calendar & Race Day
   12. App: Music Player
   13. App: Converter
   14. App: Figma
   15. App: Instagram
   16. App: YouTube
   17. Files, Icons & Utilities
   18. Responsive Mobile
   ========================================================================== */

/* ========================================= */
/* 1. IMPORTS & VARIABLES */
/* ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;600&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Adaptation de la transparence basée sur ton blanc cassé #F4F3F4 */
    --glass-bg: rgba(244, 243, 244, 0.85);
    --glass-border: rgba(244, 243, 244, 0.3);
    --glass-shadow: 0 15px 35px rgba(33, 33, 33, 0.4);
    --window-radius: 10px;
    --taskbar-height: 48px;
    
    /* TA PALETTE */
    --accent-color: #FD8235;  /* Orange */
    --accent-secondary: #A1D5E2; /* Bleu */
    --danger-color: #D02536; /* Rouge */
    --dark-bg: #212121;       /* Fond Sombre */
    --secondary-bg: #4B4F54;  /* Gris Moyen */
    --text-light: #F4F3F4;    /* Blanc Cassé */
}

/* ========================================= */
/* 2. RESET & GLOBAL STYLES */
/* ========================================= */
html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: fixed;
    touch-action: none;
    margin: 0;
    padding: 0;
    background-color: #212121; /* Noir remplacé */
    font-family: 'Segoe UI', sans-serif;
    color: var(--text-light);
}

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #4B4F54; /* Gris palette */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #FD8235; /* Orange palette */
}

/* ========================================= */
/* 3. CURSOR MANAGEMENT */
/* ========================================= */
@media (pointer: fine) {
    html, body, *, *::before, *::after {
        cursor: none !important;
    }
    iframe {
        cursor: auto !important;
    }
}

@media (pointer: coarse) {
    #custom-cursor {
        display: none !important;
    }
    html, body, *, *::before, *::after {
        cursor: auto !important;
    }
}

#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    z-index: 2147483647 !important;
    pointer-events: none;
    mix-blend-mode: difference;
    will-change: transform;
}

/* ========================================= */
/* 4. PRELOADER */
/* ========================================= */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #212121; /* Fond sombre */
    display: grid;
    place-items: center;
    z-index: 9999;
    visibility: visible;
    opacity: 1;
    overflow: hidden;
}

.preloader-transition-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FD8235; /* Orange palette */
    clip-path: circle(0% at 50% 50%);
    z-index: 1;
}

.preloader .svg-preloader {
    width: 100px;
    height: auto;
    position: relative;
    z-index: 2;
}

.preloader .shape-base {
    fill: none;
}



.preloader .shape-hover {
    fill: #212121; /* Orange palette */
}

/* ========================================= */
/* 5. WELCOME SCREEN */
/* ========================================= */
.welcome-screen {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(33, 33, 33, 0.9); /* #212121 avec opacité */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
}

.welcome-card {
    position: relative;
    background-color: #212121;
    padding: 2.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
    max-width: 28rem;
    margin: 0 1rem;
    border: 1px solid #4B4F54;
    overflow: hidden;
    transform: translateZ(0);
}

.welcome-bg-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    pointer-events: none;
    background-image: radial-gradient(#4B4F54 1px, transparent 1px);
    background-size: 20px 20px;
}

.welcome-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.welcome-dots {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.welcome-dots .dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
}

.dot-blue { background-color: #A1D5E2; }
.dot-orange { background-color: #FD8235; }
.dot-red { background-color: #D02536; }

.welcome-card h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: #F4F3F4;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1;
}

.welcome-card h1 span {
    color: #D02536;
}

.welcome-card p {
    color: #4B4F54; /* Gris palette */
    margin-bottom: 2.5rem;
    font-size: 0.75rem;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.welcome-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2.5rem;
    font-weight: 700;
    color: #F4F3F4;
    background-color: #D02536;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(208, 37, 54, 0.3);
}

.welcome-btn span {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.875rem;
}

.welcome-btn i {
    margin-left: 0.75rem;
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.welcome-btn:hover {
    background-color: #FD8235; /* Changement vers Orange au survol */
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(253, 130, 53, 0.4);
}

.welcome-btn:hover i {
    transform: translateX(4px);
}

.welcome-btn:focus {
    outline: none;
}

/* ========================================= */
/* 6. DESKTOP ENVIRONMENT */
/* ========================================= */
#wallpaper, #desktop-grid, #taskbar, #window-layer {
    opacity: 0;
    visibility: hidden;
}

#wallpaper {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../image/background.jpg');
    background-size: cover;
    background-position: center;
}

#wallpaper:not([src]) {
    background-image: url('../image/background.jpg');
}

#desktop-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: calc(100vh - var(--taskbar-height));
    padding: 10px;
    gap: 10px;
    align-content: flex-start;
    position: relative;
    z-index: 10;
}

.desktop-icon {
    width: 86px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background 0.1s;
}

.desktop-icon:hover {
    background-color: rgba(244, 243, 244, 0.15); /* Base blanc palette */
    border-color: rgba(244, 243, 244, 0.1);
    backdrop-filter: blur(4px);
}

.desktop-icon.selected {
    background-color: rgba(244, 243, 244, 0.25);
    border-color: rgba(244, 243, 244, 0.2);
}

.desktop-icon i {
    filter: drop-shadow(0 2px 4px rgba(33, 33, 33, 0.5));
}

.desktop-icon span {
    text-shadow: 0 1px 2px rgba(33, 33, 33, 0.8);
    color: #F4F3F4;
}

/* ========================================= */
/* 7. TASKBAR & TRAY */
/* ========================================= */
#taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--taskbar-height);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: #212121;
    color: #F4F3F4;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(244, 243, 244, 0.08);
}

/* --- Widget Left --- */
.taskbar-widget {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 12px;
    height: 85%;
    min-width: 140px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.taskbar-widget:hover {
    background-color: rgba(244, 243, 244, 0.1);
}

.widget-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.widget-series {
    font-size: 10px;
    font-weight: 700;
    color: #A1D5E2; /* Bleu palette */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.widget-event {
    font-size: 11px;
    font-weight: 600;
    color: #F4F3F4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.widget-time {
    font-size: 10px;
    color: #4B4F54; /* Gris palette */
    font-family: monospace;
}

.live-badge {
    background-color: #D02536; /* Rouge palette */
    color: #F4F3F4;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
    animation: pulse-red 2s infinite;
}

.live-badge.hidden {
    display: none;
}

@keyframes pulse-red {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --- Center Apps --- */
#taskbar-apps {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
}

.taskbar-btn {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #F4F3F4;
    position: relative;
    background: transparent;
    border: none;
    transition: background 0.2s;
    margin: 0 2px;
    cursor: pointer;
}

.taskbar-btn:hover {
    background: rgba(244, 243, 244, 0.1);
}

.taskbar-btn.active {
    background: rgba(244, 243, 244, 0.15);
    box-shadow: inset 0 -2px 0 rgba(244, 243, 244, 0.2);
}

.taskbar-btn .dot {
    width: 0;
    height: 3px;
    background: #4B4F54;
    border-radius: 2px;
    position: absolute;
    bottom: 3px;
    transition: width 0.2s, background-color 0.2s;
}

.taskbar-btn.running .dot {
    width: 6px;
}

.taskbar-btn.active .dot {
    width: 16px;
    background: #FD8235; /* Orange palette */
}

.start-btn {
    color: #A1D5E2; /* Bleu palette */
    font-size: 22px;
}

.start-btn:hover {
    background-color: rgba(161, 213, 226, 0.15);
}

/* --- Right Tray --- */
.taskbar-tray {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

.taskbar-clock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 8px;
    height: 85%;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-left: 4px;
}

.taskbar-clock:hover {
    background-color: rgba(244, 243, 244, 0.1);
}

#clock-time {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: #F4F3F4;
}

#clock-date {
    font-size: 10px;
    color: #A1D5E2;
}

/* ========================================= */
/* 8. START MENU */
/* ========================================= */
#start-menu {
    position: fixed;
    bottom: 60px;
    left: 50%;
    width: 640px;
    height: 700px;
    border-radius: 8px;
    background: rgba(33, 33, 33, 0.95);
    color: #F4F3F4;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(244, 243, 244, 0.08);
    box-shadow: 0 0 20px rgba(33,33,33,0.5), inset 0 1px 0 rgba(244,243,244,0.1);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 0 24px;
    transform: translate(-50%, 20px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), opacity 0.2s;
    overflow-x: hidden;
}

#start-menu.open {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.search-wrapper {
    position: relative;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #4B4F54;
    font-size: 14px;
    pointer-events: none;
}

#search-input {
    width: 100%;
    height: 40px;
    background-color: #212121 !important;
    border: 1px solid #4B4F54;
    border-bottom: 2px solid #4B4F54;
    border-radius: 20px;
    padding: 0 16px 0 42px;
    color: #F4F3F4 !important;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
}

#search-input:focus {
    border-bottom-color: #FD8235;
    background-color: #212121 !important;
}

.menu-section {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 10px;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}

.menu-section.hidden {
    display: none;
}

.section-title {
    font-size: 12px;
    font-weight: 600;
    color: #A1D5E2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-left: 12px;
    position: sticky;
    top: 0;
    background: rgba(33, 33, 33, 0.95);
    z-index: 10;
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 0 12px;
    width: 100%;
    box-sizing: border-box;
}

.app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 4px;
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
    color: #F4F3F4;
    width: 100%;
    min-width: 0;
}

.app-item:hover {
    background-color: rgba(244, 243, 244, 0.06);
}

.app-item:active {
    background-color: rgba(244, 243, 244, 0.04);
    transform: scale(0.98);
}

.app-icon-box {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.app-name {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #F4F3F4;
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.search-result-item:hover {
    background-color: rgba(244, 243, 244, 0.06);
}

.search-result-icon {
    width: 32px;
    height: 32px;
    background-color: rgba(244,243,244,0.05);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.menu-footer {
    flex-shrink: 0;
    height: 64px;
    background-color: rgba(33, 33, 33, 0.5);
    border-top: 1px solid rgba(244, 243, 244, 0.08);
    margin-left: -24px;
    margin-right: -24px;
    padding: 0 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.user-profile:hover {
    background-color: rgba(244, 243, 244, 0.06);
}

.user-profile img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(244,243,244,0.1);
}

.user-profile span {
    font-size: 12px;
    font-weight: 600;
    color: #F4F3F4;
}

.power-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #4B4F54;
    transition: all 0.2s;
    text-decoration: none;
}

.power-btn:hover {
    background-color: rgba(244, 243, 244, 0.06);
    color: #D02536; /* Rouge au survol */
}

/* ========================================= */
/* 9. WINDOW SYSTEM */
/* ========================================= */
#window-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    height: calc(100vh - var(--taskbar-height));
    pointer-events: none;
    z-index: 20;
}

.window {
    position: absolute;
    display: flex;
    flex-direction: column;
    border-radius: var(--window-radius);
    overflow: hidden;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    opacity: 0;
    transform: scale(0.95);
    pointer-events: auto;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.window-header {
    height: 40px;
    background: rgba(244, 243, 244, 0.95);
    border-bottom: 1px solid rgba(33, 33, 33, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
}

.window-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #212121;
    color: #F4F3F4;
}

.file-source img {
    display: block;
}

.resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15px;
    height: 15px;
    cursor: se-resize;
    z-index: 20;
}

/* ========================================= */
/* 10. APP: PROJECT VIEWER */
/* ========================================= */
.project-viewer {
    background-color: #212121;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #F4F3F4;
    position: relative;
    overflow: hidden;
}

.project-header {
    padding: 1.5rem;
    border-bottom: 1px solid #4B4F54;
    flex-shrink: 0;
    background-color: #212121;
    position: relative;
    z-index: 20;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.project-header h2 {
    font-size: 1.875rem;
    font-weight: 700;
    color: #F4F3F4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    line-height: 1;
}

.project-header h3 {
    color: #FD8235;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
}

.project-description {
    color: #F4F3F4;
    font-size: 0.875rem;
    line-height: 1.625;
    max-width: 48rem;
    border-left: 2px solid #D02536;
    padding-left: 1rem;
}

.project-link {
    color: #FD8235;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
}

.project-link:hover {
    color: #F4F3F4;
}

.project-link i {
    font-size: 1.125rem;
    transition: transform 0.2s;
}

.project-link:hover i {
    transform: scale(1.1);
}

.project-media {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.project-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.7s;
}

.group:hover .project-video {
    opacity: 1;
}

.media-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(33, 33, 33, 0.3);
    pointer-events: none;
}

.project-action {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
}

.project-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    font-weight: 700;
    color: #F4F3F4;
    background-color: #D02536;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(208, 37, 54, 0.5);
}

.project-btn span {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.875rem;
    margin-right: 0.75rem;
}

.project-btn i {
    font-size: 0.75rem;
    transition: transform 0.3s;
}

.project-btn:hover {
    background-color: #FD8235;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(253, 130, 53, 0.8);
}

.project-btn:hover i {
    transform: translate(4px, -4px);
}

/* ========================================= */
/* 11. APP: CALENDAR & RACE DAY */
/* ========================================= */
.calendar-app-wrapper {
    --cal-orange: #FD8235;
    --cal-red: #D02536;
    --cal-dark: #212121;
    --cal-gray: #4B4F54;
    --cal-light: #F4F3F4;
    --cal-blue: #A1D5E2;
    background-color: #212121;
    color: #F4F3F4;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow: hidden;
    position: relative;
}

/* Header */
.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.cal-nav-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: #F4F3F4;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cal-nav-btn:hover {
    background-color: #4B4F54;
}

.cal-title-box {
    text-align: center;
}

.cal-title-box h1 {
    font-size: 8px;
    font-weight: 700;
    color: #4B4F54;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    margin-bottom: 0.25rem;
}

.cal-title-box h2 {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

/* Layout */
.cal-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .cal-layout {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }
}

/* Main Panel */
.cal-main-panel {
    border-radius: 1rem;
    padding: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    grid-column: span 7 / span 7;
}

.cal-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 1rem;
    text-align: center;
    border-bottom: 1px solid #4B4F54;
    padding-bottom: 0.5rem;
}

.cal-days-header span {
    font-size: 9px;
    color: #4B4F54;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.calendar-grid {
    flex-grow: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 8px;
}

/* Day Cells */
.day-cell {
    width: 32px;
    height: 32px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-weight: 500;
    border: 2px solid transparent;
    transition: all 0.2s;
    font-size: 0.8rem;
}

.day-cell:hover:not(.has-race):not(.selected) {
    border-color: #4B4F54;
}

.day-cell.has-race {
    background-color: var(--cal-blue);
    color: var(--cal-dark);
    font-weight: 700;
}

.day-cell.multi-race {
    background-color: var(--cal-orange);
    color: var(--cal-dark);
    font-weight: 700;
}

.day-cell.selected {
    border-color: var(--cal-light);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.day-cell.is-today::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: var(--cal-red);
    border-radius: 50%;
}

/* Legend */
.cal-legend {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #4B4F54;
    display: flex;
    align-items: center;
    font-size: 9px;
    color: #4B4F54;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.legend-items {
    display: flex;
    gap: 1rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.dot.bg-blue { background-color: #A1D5E2; }
.dot.bg-orange { background-color: #FD8235; }
.dot.bg-red { background-color: #D02536; }

/* Sidebar */
.cal-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    grid-column: span 5 / span 5;
}

.cal-date-display {
    height: 5rem;
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #4B4F54;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

#detailDayNumber {
    font-size: 3.75rem;
    font-weight: 300;
    width: 5rem;
    text-align: center;
    line-height: 1;
    letter-spacing: -0.05em;
}

.cal-date-text {
    display: flex;
    flex-direction: column;
    padding-bottom: 0.25rem;
}

#detailDayName {
    font-size: 0.75rem;
    font-weight: 700;
    color: #A1D5E2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.25;
}

#detailMonth {
    font-size: 0.75rem;
    color: #4B4F54;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.25;
}

.cal-events-panel {
    flex-grow: 1;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #212121;
    border: 1px solid #4B4F54;
}

.events-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.25rem;
}

.empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #4B4F54;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.empty-state p {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Event Cards */
.event-card {
    width: 100%;
    background-color: #212121;
    border-bottom: 1px solid #4B4F54;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: opacity 0.2s;
}
.event-card:first-child { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; }
.event-card:last-child { border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; border-bottom: none; }
.event-card:hover .series-icon { color: #F4F3F4; }

.event-indicator { width: 4px; height: 40px; border-radius: 2px; }
.event-content { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.event-top-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.event-session { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #4B4F54; }
.event-status { font-size: 12px; font-family: monospace; }
.status-finished { color: #F4F3F4; font-weight: 500; }
.status-live { color: #D02536; font-weight: 700; animation: pulse 2s infinite; }
.status-tbc { color: #4B4F54; font-style: italic; }
.event-title { font-size: 0.875rem; font-weight: 600; color: #F4F3F4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.event-loc { font-size: 10px; color: #4B4F54; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.125rem; }

/* Race Day Footer */
.race-day-footer {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 200%);
    background-color: #D02536;
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 50;
}

.ping-wrapper { position: relative; display: flex; height: 8px; width: 8px; }
.ping-dot { position: absolute; display: inline-flex; height: 100%; width: 100%; border-radius: 50%; background-color: white; opacity: 0.75; animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.static-dot { position: relative; display: inline-flex; border-radius: 50%; height: 8px; width: 8px; background-color: white; }

@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

/* ========================================= */
/* 12. APP: MUSIC PLAYER */
/* ========================================= */
.music-app {
    background-color: #212121;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #F4F3F4;
    overflow: hidden;
    position: relative;
}

.music-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, #212121, #212121);
    z-index: 0;
}

.music-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1.5rem;
    gap: 1.5rem;
}

.music-cover-wrapper {
    width: 12rem;
    height: 12rem;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    border: 2px solid #4B4F54;
    position: relative;
    background-color: #212121;
}

.yt-frame {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(33, 33, 33, 0.2);
    transition: background-color 0.3s;
    pointer-events: none;
}

.music-cover-wrapper:hover .cover-overlay {
    background-color: transparent;
}

.music-info {
    text-align: center;
    width: 100%;
    max-width: 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.music-info h2 {
    font-weight: 700;
    font-size: 1.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #F4F3F4;
    margin: 0;
}

.music-info p {
    font-size: 0.75rem;
    color: #FD8235;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    margin: 0;
}

.music-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.control-btn {
    background: none;
    border: none;
    color: #4B4F54;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-btn.prev-next i {
    font-size: 1.5rem;
}

.control-btn:hover {
    color: #F4F3F4;
    transform: scale(1.1);
}

.play-btn {
    width: 3.5rem;
    height: 3.5rem;
    background-color: #D02536;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(208, 37, 54, 0.4);
    transition: all 0.2s;
}

.play-btn:hover {
    background-color: #FD8235;
    transform: scale(1.05);
}

.play-btn i {
    font-size: 1.25rem;
    margin-left: 0.25rem;
}

.volume-controls {
    width: 100%;
    max-width: 20rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #4B4F54;
    margin-top: 0.5rem;
}

.volume-slider {
    flex: 1;
    height: 0.25rem;
    background-color: #4B4F54;
    border-radius: 0.5rem;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #D02536;
}

/* ========================================= */
/* 13. APP: CONVERTER */
/* ========================================= */
.converter-app {
    background-color: #212121;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    overflow-y: auto;
    font-family: sans-serif;
    color: #F4F3F4;
}

.conv-header {
    text-align: center;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.conv-header h1 {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #F4F3F4;
    margin: 0;
}

.conv-header p {
    color: #FD8235;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.conv-dropzone {
    border: 2px dashed #4B4F54;
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.conv-dropzone:hover, .dropzone-drag-over {
    border-color: #FD8235;
    background-color: rgba(253, 130, 53, 0.1);
}

.drop-icon {
    font-size: 2.25rem;
    color: #4B4F54;
    display: block;
    margin-bottom: 0.75rem;
    transition: color 0.2s;
}

.conv-dropzone:hover .drop-icon {
    color: #FD8235;
}

.drop-text-main {
    font-size: 0.875rem;
    font-weight: 700;
    color: #F4F3F4;
}

.drop-text-sub {
    font-size: 10px;
    color: #4B4F54;
    margin-top: 0.25rem;
}

.conv-panel {
    margin-top: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.conv-panel.hidden { display: none; }

.conv-settings-box {
    background-color: rgba(75, 79, 84, 0.3);
    border: 1px solid #4B4F54;
    border-radius: 0.5rem;
    padding: 1rem;
}

.conv-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
}

.conv-info-row.border-b {
    border-bottom: 1px solid #4B4F54;
    margin-bottom: 1rem;
}

.conv-info-row .label { font-size: 0.75rem; color: #4B4F54; }
.conv-info-row .value { font-size: 0.75rem; font-weight: 700; color: #F4F3F4; }
.conv-info-row .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

.conv-controls { display: flex; flex-direction: column; gap: 1rem; }
.conv-controls .hidden { display: none; }

.conv-label {
    font-size: 0.75rem;
    color: #4B4F54;
    display: block;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
}

.conv-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 10px;
    color: #4B4F54;
}

.checkbox-wrapper input[type="checkbox"] {
    accent-color: #D02536;
}

.converter-slider {
    width: 100%;
    height: 4px;
    background: #4B4F54;
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.converter-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FD8235;
    cursor: pointer;
    transition: transform 0.1s;
}

.converter-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.conv-btn {
    width: 100%;
    margin-top: 1rem;
    background-color: #D02536;
    color: white;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.conv-btn:hover {
    background-color: #FD8235;
}

.conv-btn.opacity-50 {
    opacity: 0.5;
    cursor: not-allowed;
}

.code-box {
    background-color: rgba(33, 33, 33, 0.5);
    padding: 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid #4B4F54;
}

#conv-ffmpeg-command {
    font-size: 10px;
    font-family: monospace;
    color: #A1D5E2;
    word-break: break-all;
    display: block;
}

.conv-alert {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    border: 1px solid rgba(253, 130, 53, 0.3);
    background-color: rgba(253, 130, 53, 0.1);
    color: #FD8235;
}

.conv-alert.hidden {
    display: none;
}

/* ========================================= */
/* 14. APP: FIGMA */
/* ========================================= */
.text-accent-figma { color: #FD8235 !important; }

.figma-app {
    background-color: #212121;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #F4F3F4;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

.figma-nav {
    display: flex;
    padding: 1rem 1rem 0 1rem;
    border-bottom: 1px solid #4B4F54;
    gap: 1.5rem;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}

.figma-tab {
    background: none;
    border: none;
    padding-bottom: 0.75rem;
    color: #4B4F54;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.figma-tab:hover {
    color: #F4F3F4;
    border-bottom-color: #4B4F54;
}

.figma-tab.active {
    color: #FD8235;
    border-bottom-color: #FD8235;
}

.figma-toolbar {
    padding: 1rem;
    flex-shrink: 0;
}

.figma-bg-pattern {
    background-image: radial-gradient(#4B4F54 1px, transparent 1px);
    background-size: 20px 20px;
}

.f-shape { width: 12px; height: 18px; position: relative; transform: scale(0.8); }
.fs-top-left { position: absolute; top:0; left:0; width: 6px; height: 6px; background: #D02536; border-radius: 3px 0 0 3px; }
.fs-top-right { position: absolute; top:0; right:0; width: 6px; height: 6px; background: #FD8235; border-radius: 0 3px 3px 0; }
.fs-mid-left { position: absolute; top:6px; left:0; width: 6px; height: 6px; background: #FD8235; border-radius: 3px 0 0 3px; }
.fs-mid-right { position: absolute; top:6px; right:0; width: 6px; height: 6px; background: #A1D5E2; border-radius: 50%; }
.fs-bot-left { position: absolute; top:12px; left:0; width: 6px; height: 6px; background: #A1D5E2; border-radius: 3px 0 3px 3px; }

.figma-search-wrapper {
    position: relative;
    width: 100%;
}

.figma-search-wrapper .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #4B4F54;
    font-size: 12px;
    pointer-events: none;
    transition: color 0.2s;
}

.figma-search-wrapper:focus-within .search-icon {
    color: #FD8235;
}

.figma-input {
    width: 100%;
    padding: 0.375rem 0.75rem 0.375rem 2.25rem;
    font-size: 13px;
    background-color: #4B4F54;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    color: #F4F3F4;
    outline: none;
    transition: all 0.2s;
}

.figma-input:hover {
    background-color: #212121;
}

.figma-input:focus {
    background-color: #4B4F54;
    border-color: #FD8235;
    box-shadow: 0 0 0 1px #FD8235;
}

.figma-input::placeholder {
    color: #F4F3F4;
}

.figma-grid {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    align-content: start;
}

.figma-card {
    display: flex;
    flex-direction: column;
    border-radius: 0.375rem;
    border: 1px solid #4B4F54;
    background-color: #4B4F54;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    overflow: hidden;
}

.figma-card:hover {
    background-color: #212121 !important;
    border-color: #A1D5E2 !important;
}

.figma-card.selected {
    border-color: #FD8235 !important;
    box-shadow: 0 0 0 1px #FD8235;
    background-color: #212121 !important;
}

.figma-card-preview {
    height: 7rem;
    width: 100%;
    background-color: #212121;
    border-bottom: 1px solid #212121;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.figma-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.25rem;
    opacity: 0.9;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s;
}

.figma-card:hover .figma-card-icon {
    transform: scale(1.1);
}

.figma-card-info {
    padding: 0.75rem;
    display: flex;
    align-items: start;
    gap: 0.75rem;
}

.figma-card-text {
    flex: 1;
    min-width: 0;
}

.figma-card-title {
    font-size: 12px;
    font-weight: 500;
    color: #F4F3F4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.125rem;
    transition: color 0.2s;
}

.figma-card:hover .figma-card-title {
    color: #FD8235;
}

.figma-card-meta {
    font-size: 10px;
    color: #A1D5E2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.figma-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #4B4F54;
    background-color: #212121;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.figma-btn-text {
    padding: 0.5rem 1rem;
    font-size: 13px;
    font-weight: 500;
    color: #F4F3F4;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.figma-btn-text:hover {
    color: #FD8235;
    border-color: #4B4F54;
}

.figma-btn-primary {
    padding: 0.5rem 1.5rem;
    font-size: 13px;
    font-weight: 700;
    border-radius: 0.25rem;
    transition: all 0.2s;
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.figma-btn-primary:disabled {
    background-color: #4B4F54;
    color: #212121;
    cursor: not-allowed;
    box-shadow: none;
}

.figma-btn-primary:not(:disabled) {
    background-color: #FD8235;
    color: white;
    cursor: pointer;
}

.figma-btn-primary:not(:disabled):hover {
    background-color: #D02536;
}

/* ========================================= */
/* 15. APP: INSTAGRAM */
/* ========================================= */
.text-accent-insta { color: #D02536 !important; }

.insta-app-container {
    --bg-color: #212121;
    --text-primary: #F4F3F4;
    --text-secondary: #4B4F54;
    --btn-grey: #4B4F54;
    --btn-blue: #A1D5E2;
    --border-color: #4B4F54;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    height: 100%;
    width: 100%;
    background-color: var(--bg-color);
    overflow: hidden;
}

.insta-card {
    background-color: var(--bg-color);
    color: var(--text-primary);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: none;
    min-height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.insta-app-container .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    font-weight: 700;
    font-size: 16px;
    border-bottom: 0.5px solid var(--border-color);
    flex-shrink: 0;
}

.insta-app-container .top-bar svg {
    width: 24px;
    height: 24px;
    fill: #F4F3F4;
    cursor: pointer;
}

.insta-scroll-area {
    flex: 1;
    overflow-y: auto;
}

.insta-app-container .profile-section {
    padding: 15px;
}

.insta-app-container .profile-top {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.insta-app-container .avatar-container {
    position: relative;
    margin-right: 20px;
}

.insta-app-container .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-image: url('../image/teiophoto.jpg');
    background-size: cover;
    background-position: center;
    border: 2px solid #212121;
    box-shadow: 0 0 0 2px #D02536;
}

.insta-app-container .stats-container {
    display: flex;
    gap: 20px;
    text-align: center;
    flex-grow: 1;
    justify-content: space-around;
}

.insta-app-container .stat-box {
    display: flex;
    flex-direction: column;
}

.insta-app-container .stat-number {
    font-weight: 700;
    font-size: 18px;
}

.insta-app-container .stat-label {
    font-size: 13px;
    color: var(--text-primary);
}

.insta-app-container .bio-section {
    font-size: 14px;
    line-height: 1.4;
    padding-bottom: 15px;
}

.insta-app-container .fullname {
    font-weight: 700;
}

.insta-app-container .category {
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.insta-app-container .actions {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.insta-app-container .btn-action {
    flex: 1;
    background-color: var(--btn-grey);
    color: white;
    border: none;
    padding: 8px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.insta-app-container .btn-icon {
    width: 34px;
    flex: none;
}

.insta-app-container .btn-icon-only {
    width: 34px;
    flex: none;
}

.icon-follow {
    width: 12px;
    height: 12px;
    margin-left: 5px;
    fill: white;
}

.icon-suggest {
    width: 16px;
    height: 16px;
    fill: white;
}

.insta-app-container .tabs {
    display: flex;
    border-top: 1px solid var(--border-color);
}

.insta-app-container .tab {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
}

.insta-app-container .tab.active {
    border-bottom: 1px solid #F4F3F4;
}

.insta-app-container .tab svg {
    width: 24px;
    height: 24px;
    fill: #F4F3F4;
}

.insta-app-container .icon-inactive {
    fill: #4B4F54 !important;
}

.insta-app-container .posts-wrapper {
    position: relative;
}

.insta-app-container .grid-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
}

.insta-app-container .grid-photos img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}

.insta-app-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(33,33,33,0.9) 20%, rgba(33,33,33,0.4));
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    font-size: 30px;
    margin-bottom: 10px;
}

.insta-app-container .overlay-btn {
    background-color: var(--btn-blue);
    color: #212121;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(161, 213, 226, 0.4);
    transition: transform 0.2s;
}

.insta-app-container .overlay-btn:hover {
    transform: scale(1.02);
    background-color: #FD8235;
}

.spacer-bottom {
    height: 20px;
}

/* ========================================= */
/* 16. APP: YOUTUBE */
/* ========================================= */
.text-accent-youtube { color: #D02536 !important; }

.yt-app-container {
    --yt-bg: #212121;
    --yt-text-primary: #F4F3F4;
    --yt-text-secondary: #4B4F54;
    --yt-link: #A1D5E2;
    font-family: 'Roboto', 'Arial', sans-serif;
    color: var(--yt-text-primary);
    background-color: var(--yt-bg);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 0;
    display: block;
}

.yt-app-container .yt-popup {
    background-color: var(--yt-bg);
    width: 100%;
    max-width: 1000px;
    min-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.yt-app-container .banner {
    width: 100%;
    height: 160px;
    background-image: url('../image/channels4_banner.jpg');
    background-size: cover;
    background-position: center;
}

.yt-app-container .channel-header {
    padding: 16px 24px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.yt-app-container .channel-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-image: url('../image/channels4_profile.jpg');
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    margin-top: -10px;
    border: 4px solid var(--yt-bg);
}

.yt-app-container .channel-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
    padding-top: 10px;
}

.yt-app-container .channel-name {
    font-size: 24px;
    font-weight: 700;
    color: #F4F3F4;
}

.yt-app-container .channel-meta {
    color: var(--yt-text-secondary);
    font-size: 14px;
    line-height: 1.4;
}

.yt-app-container .channel-link {
    color: #A1D5E2;
    font-size: 14px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
}

.yt-app-container .tabs-bar {
    display: flex;
    border-bottom: 1px solid rgba(244,243,244,0.1);
    margin-top: 10px;
    padding: 0 24px;
}

.yt-app-container .tab {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--yt-text-secondary);
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    border-bottom: 3px solid transparent;
}

.yt-app-container .tab.active {
    color: var(--yt-text-primary);
    border-bottom-color: var(--yt-text-primary);
}

.yt-app-container .content-section {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.yt-app-container .section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #F4F3F4;
}

.yt-app-container .video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    position: relative;
}

.yt-app-container .video-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    filter: blur(5px) brightness(0.4);
    pointer-events: none;
    user-select: none;
    position: relative;
    z-index: 1;
}

.yt-app-container .thumbnail-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
    width: 100%;
    background-color: #212121;
}

.yt-app-container .thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yt-app-container .duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background-color: rgba(33,33,33,0.8);
    color: #F4F3F4;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 4px;
    border-radius: 4px;
}

.yt-app-container .video-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #F4F3F4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yt-app-container .video-meta {
    font-size: 12px;
    color: var(--yt-text-secondary);
}

.yt-app-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    pointer-events: none;
}

.yt-app-container .cta-btn {
    pointer-events: auto;
    display: inline-block;
    background-color: #F4F3F4;
    color: #212121;
    text-decoration: none;
    padding: 14px 40px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 0 40px rgba(33,33,33,0.8);
    transition: transform 0.2s;
    margin: 0;
}

.yt-app-container .cta-btn:hover {
    background-color: #FD8235;
    transform: scale(1.1);
}

/* ========================================= */
/* 17. FILES, ICONS & UTILITIES */
/* ========================================= */
#hard-drive, .file-source {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute;
    z-index: -9999;
}

.text-accent-blue { color: #A1D5E2 !important; }
.text-accent-orange { color: #FD8235 !important; }
.text-accent-red { color: #D02536 !important; }

/* Viewers */
.cv-viewer {
    height: 100%;
    background-color: #4B4F54; /* Fond gris pour contraste papier */
    display: flex;
    justify-content: center;
    overflow-y: auto;
    padding: 16px;
}

@media (min-width: 768px) {
    .cv-viewer {
        padding: 32px;
    }
}

.cv-image {
    width: 21cm;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    box-shadow: 0 4px 6px rgba(33, 33, 33, 0.3);
}

.pdf-viewer {
    width: 100%;
    height: 100%;
    background-color: #4B4F54;
    display: flex;
    flex-direction: column;
}

.pdf-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Folder Viewer */
.folder-viewer {
    background-color: #212121;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #F4F3F4;
}

.folder-grid {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
    overflow-y: auto;
    flex: 1;
}

.folder-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s;
    color: #4B4F54;
    width: fit-content;
    margin: 0 auto;
    justify-self: center;
}

.folder-file:hover .file-name {
    color: #F4F3F4;
}

.file-icon-pdf {
    font-size: 3rem;
    color: #D02536;
    filter: drop-shadow(0 1px 2px rgba(33,33,33,0.1));
    transition: transform 0.2s;
}

.folder-file:hover .file-icon-pdf {
    transform: scale(1.1);
}

.file-name {
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    margin-top: 0.5rem;
    transition: color 0.2s;
    word-break: break-word;
}

/* Custom SVG Masks - Les couleurs sont appliquées via background-color/color */
.icon-cv-custom {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.17157 3.17157C3 4.34315 3 6.22876 3 10V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V10C21 6.22876 21 4.34315 19.8284 3.17157C18.6569 2 16.7712 2 13 2H11C7.22876 2 5.34315 2 4.17157 3.17157ZM7.25 8C7.25 7.58579 7.58579 7.25 8 7.25H16C16.4142 7.25 16.75 7.58579 16.75 8C16.75 8.41421 16.4142 8.75 16 8.75H8C7.58579 8.75 7.25 8.41421 7.25 8ZM7.25 12C7.25 11.5858 7.58579 11.25 8 11.25H16C16.4142 11.25 16.75 11.5858 16.75 12C16.75 12.4142 16.4142 12.75 16 12.75H8C7.58579 12.75 7.25 12.4142 7.25 12ZM8 15.25C7.58579 15.25 7.25 15.5858 7.25 16C7.25 16.4142 7.58579 16.75 8 16.75H13C13.4142 16.75 13.75 16.4142 13.75 16C13.75 15.5858 13.4142 15.25 13 15.25H8Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.17157 3.17157C3 4.34315 3 6.22876 3 10V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V10C21 6.22876 21 4.34315 19.8284 3.17157C18.6569 2 16.7712 2 13 2H11C7.22876 2 5.34315 2 4.17157 3.17157ZM7.25 8C7.25 7.58579 7.58579 7.25 8 7.25H16C16.4142 7.25 16.75 7.58579 16.75 8C16.75 8.41421 16.4142 8.75 16 8.75H8C7.58579 8.75 7.25 8.41421 7.25 8ZM7.25 12C7.25 11.5858 7.58579 11.25 8 11.25H16C16.4142 11.25 16.75 11.5858 16.75 12C16.75 12.4142 16.4142 12.75 16 12.75H8C7.58579 12.75 7.25 12.4142 7.25 12ZM8 15.25C7.58579 15.25 7.25 15.5858 7.25 16C7.25 16.4142 7.58579 16.75 8 16.75H13C13.4142 16.75 13.75 16.4142 13.75 16C13.75 15.5858 13.4142 15.25 13 15.25H8Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.icon-music-custom {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 101c16.4 9.2 16.4 32.9 0 42z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 101c16.4 9.2 16.4 32.9 0 42z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.icon-calendar-custom {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.75 2.5C7.75 2.08579 7.41421 1.75 7 1.75C6.58579 1.75 6.25 2.08579 6.25 2.5V4.07926C4.81067 4.19451 3.86577 4.47737 3.17157 5.17157C2.47737 5.86577 2.19451 6.81067 2.07926 8.25H21.9207C21.8055 6.81067 21.5226 5.86577 20.8284 5.17157C20.1342 4.47737 19.1893 4.19451 17.75 4.07926V2.5C17.75 2.08579 17.4142 1.75 17 1.75C16.5858 1.75 16.25 2.08579 16.25 2.5V4.0129C15.5847 4 14.839 4 14 4H10C9.16097 4 8.41527 4 7.75 4.0129V2.5Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 12C2 11.161 2 10.4153 2.0129 9.75H21.9871C22 10.4153 22 11.161 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12ZM17 14C17.5523 14 18 13.5523 18 13C18 12.4477 17.5523 12 17 12C16.4477 12 16 12.4477 16 13C16 13.5523 16.4477 14 17 14ZM17 18C17.5523 18 18 17.5523 18 17C18 16.4477 17.5523 16 17 16C16.4477 16 16 16.4477 16 17C16 17.5523 16.4477 18 17 18ZM13 13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13ZM13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17ZM7 14C7.55228 14 8 13.5523 8 13C8 12.4477 7.55228 12 7 12C6.44772 12 6 12.4477 6 13C6 13.5523 6.44772 14 7 14ZM7 18C7.55228 18 8 17.5523 8 17C8 16.4477 7.55228 16 7 16C6.44772 16 6 16.4477 6 17C6 17.5523 6.44772 18 7 18Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.icon-folder-custom {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.06935 5.25839C2 5.62595 2 6.06722 2 6.94975V9.25H21.9531C21.8809 8.20117 21.6973 7.51276 21.2305 6.99383C21.1598 6.91514 21.0849 6.84024 21.0062 6.76946C20.1506 6 18.8345 6 16.2021 6H15.8284C14.6747 6 14.0979 6 13.5604 5.84678C13.2651 5.7626 12.9804 5.64471 12.7121 5.49543C12.2237 5.22367 11.8158 4.81578 11 4L10.4497 3.44975C10.1763 3.17633 10.0396 3.03961 9.89594 2.92051C9.27652 2.40704 8.51665 2.09229 7.71557 2.01738C7.52976 2 7.33642 2 6.94975 2C6.06722 2 5.62595 2 5.25839 2.06935C3.64031 2.37464 2.37464 3.64031 2.06935 5.25839ZM21.9978 10.75H2V14C2 17.7712 2 19.6569 3.17157 20.8284C4.34315 22 6.22876 22 10 22H14C17.7712 22 19.6569 22 20.8284 20.8284C22 19.6569 22 17.7712 22 14V11.7979C22 11.4227 21.9978 10.75 21.9978 10.75Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.06935 5.25839C2 5.62595 2 6.06722 2 6.94975V9.25H21.9531C21.8809 8.20117 21.6973 7.51276 21.2305 6.99383C21.1598 6.91514 21.0849 6.84024 21.0062 6.76946C20.1506 6 18.8345 6 16.2021 6H15.8284C14.6747 6 14.0979 6 13.5604 5.84678C13.2651 5.7626 12.9804 5.64471 12.7121 5.49543C12.2237 5.22367 11.8158 4.81578 11 4L10.4497 3.44975C10.1763 3.17633 10.0396 3.03961 9.89594 2.92051C9.27652 2.40704 8.51665 2.09229 7.71557 2.01738C7.52976 2 7.33642 2 6.94975 2C6.06722 2 5.62595 2 5.25839 2.06935C3.64031 2.37464 2.37464 3.64031 2.06935 5.25839ZM21.9978 10.75H2V14C2 17.7712 2 19.6569 3.17157 20.8284C4.34315 22 6.22876 22 10 22H14C17.7712 22 19.6569 22 20.8284 20.8284C22 19.6569 22 17.7712 22 14V11.7979C22 11.4227 21.9978 10.75 21.9978 10.75Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ========================================= */
/* 18. RESPONSIVE MOBILE */
/* ========================================= */
@media (max-width: 768px) {
    .window {
        border-radius: 0 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: calc(100vh - var(--taskbar-height)) !important;
        background: #F4F3F4 !important; /* Changé de #f8fafc à la palette */
        border: none !important;
        box-shadow: none !important;
    }

    .resize-handle {
        display: none;
    }

    #start-menu {
        bottom: var(--taskbar-height);
        left: 0;
        width: 100vw;
        height: calc(100vh - var(--taskbar-height));
        padding: 16px;
        border-radius: 0;
        transform: translate(0, 100%);
    }

    #start-menu.open {
        transform: translate(0, 0);
    }

    #start-menu-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #taskbar {
        padding: 0 8px;
    }

    #taskbar .flex-col, #taskbar .w-20 {
        display: none;
    }

    #taskbar-apps {
        position: static !important;
        transform: none !important;
        flex-grow: 1;
        justify-content: center;
    }

    #desktop-grid {
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 40px;
        justify-content: center;
        align-content: flex-start;
        gap: 20px;
        height: auto;
    }

    .desktop-icon {
        width: 80px;
        height: 100px;
        margin: 0;
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
    }

    .desktop-icon img, .desktop-icon i, .desktop-icon div {
        pointer-events: none;
        -webkit-user-drag: none;
    }

    .desktop-icon i {
        font-size: 36px;
    }
}