/* Color Palette Matrix Definition Layer */
:root { 
    --bg: #F4F7F6; 
    --text: #333333; 
    --heading: #111111;
    --card: rgba(255, 255, 255, 0.92); 
    --border: #E0E0E0;
    --accent: #2C3E50;
    --overlay: rgba(244, 247, 246, 0.85);
}

/* 20 Professional UI Layout Color Scheme Definitions */
[data-scheme="warm-oat"] { --bg: #D5CFC3; --text: #333333; --heading: #2D2A26; --card: rgba(249, 241, 225, 0.95); --border: #E0DBD2; --accent: #8C8475; --overlay: rgba(213, 207, 195, 0.85); }
[data-scheme="forest-green"] { --bg: #E8F5E9; --text: #1B5E20; --heading: #0E3A11; --card: rgba(255, 255, 255, 0.95); --border: #C8E6C9; --accent: #4CAF50; --overlay: rgba(232, 245, 233, 0.85); }
[data-scheme="deep-blue"] { --bg: #E3F2FD; --text: #0D47A1; --heading: #0A3273; --card: rgba(255, 255, 255, 0.95); --border: #BBDEFB; --accent: #2196F3; --overlay: rgba(227, 242, 253, 0.85); }
[data-scheme="sunset-orange"] { --bg: #FFF3E0; --text: #E65100; --heading: #A33900; --card: rgba(255, 255, 255, 0.95); --border: #FFE0B2; --accent: #FF9800; --overlay: rgba(255, 243, 224, 0.85); }
[data-scheme="midnight-teal"] { --bg: #E0F2F1; --text: #004D40; --heading: #002B24; --card: rgba(255, 255, 255, 0.95); --border: #B2DFDB; --accent: #009688; --overlay: rgba(224, 242, 241, 0.85); }
[data-scheme="royal-purple"] { --bg: #F3E5F5; --text: #4A148C; --heading: #2D0B59; --card: rgba(255, 255, 255, 0.95); --border: #E1BEE7; --accent: #9C27B0; --overlay: rgba(243, 229, 245, 0.85); }
[data-scheme="rose-quartz"] { --bg: #FCE4EC; --text: #880E4F; --heading: #540530; --card: rgba(255, 255, 255, 0.95); --border: #F8BBD0; --accent: #E91E63; --overlay: rgba(252, 228, 236, 0.85); }
[data-scheme="minimalist-slate"] { --bg: #ECEFF1; --text: #263238; --heading: #141A1D; --card: rgba(255, 255, 255, 0.95); --border: #CFD8DC; --accent: #607D8B; --overlay: rgba(236, 239, 241, 0.85); }
[data-scheme="classic-wine"] { --bg: #FFF5F5; --text: #721C24; --heading: #471015; --card: rgba(255, 255, 255, 0.95); --border: #F5C6CB; --accent: #DC3545; --overlay: rgba(255, 245, 245, 0.85); }
[data-scheme="midnight-indigo"] { --bg: #E8EAF6; --text: #1A237E; --heading: #0F144A; --card: rgba(255, 255, 255, 0.95); --border: #C5CAE9; --accent: #3F51B5; --overlay: rgba(232, 234, 246, 0.85); }
[data-scheme="golden-sands"] { --bg: #FFFDE7; --text: #745C05; --heading: #4A3B02; --card: rgba(255, 255, 255, 0.95); --border: #FFF9C4; --accent: #FBC02D; --overlay: rgba(255, 253, 231, 0.85); }
[data-scheme="cyberpunk-neon"] { --bg: #1a0033; --text: #00ffcc; --heading: #ff00ff; --card: rgba(26, 0, 51, 0.85); --border: #ff00ff; --accent: #00ffcc; --overlay: rgba(26, 0, 51, 0.7); }
[data-scheme="nordic-frost"] { --bg: #E0F7FA; --text: #006064; --heading: #00363a; --card: rgba(255, 255, 255, 0.9); --border: #B2EBF2; --accent: #00BCD4; --overlay: rgba(224, 247, 250, 0.85); }
[data-scheme="crimson-velvet"] { --bg: #3E2723; --text: #FFCCBC; --heading: #FFAB91; --card: rgba(7e, 42, 34, 0.9); --border: #5D4037; --accent: #D84315; --overlay: rgba(62, 39, 35, 0.85); }
[data-scheme="espresso-dark"] { --bg: #212121; --text: #D7CCC8; --heading: #EFEBE9; --card: rgba(33, 33, 33, 0.9); --border: #424242; --accent: #8D6E63; --overlay: rgba(33, 33, 33, 0.8); }
[data-scheme="olive-garden"] { --bg: #F1F8E9; --text: #33691E; --heading: #1B5E20; --card: rgba(255, 255, 255, 0.95); --border: #DCEDC8; --accent: #558B2F; --overlay: rgba(241, 248, 233, 0.85); }
[data-scheme="sakura-blossom"] { --bg: #FFF0F5; --text: #DB7093; --heading: #C71585; --card: rgba(255, 255, 255, 0.95); --border: #FFB6C1; --accent: #FF69B4; --overlay: rgba(255, 240, 245, 0.85); }
[data-scheme="charcoal-matte"] { --bg: #37474F; --text: #ECEFF1; --heading: #FFFFFF; --card: rgba(55, 71, 79, 0.95); --border: #455A64; --accent: #90A4AE; --overlay: rgba(55, 71, 79, 0.8); }
[data-scheme="ocean-breeze"] { --bg: #E0F7FA; --text: #007791; --heading: #004B6E; --card: rgba(255, 255, 255, 0.95); --border: #B2EBF2; --accent: #00A8CC; --overlay: rgba(224, 247, 250, 0.85); }
[data-scheme="monochrome-pro"] { --bg: #FFFFFF; --text: #000000; --heading: #000000; --card: rgba(255, 255, 255, 1); --border: #000000; --accent: #000000; --overlay: rgba(255, 255, 255, 0.75); }

/* Global System Overrides for Dark Toggle Mode */
.night-mode { 
    --bg: #121212 !important; 
    --text: #B0B0B0 !important; 
    --heading: #E0E0E0 !important;
    --card: rgba(30, 30, 30, 0.95) !important; 
    --border: #333333 !important;
    --accent: #BB86FC !important;
    --overlay: rgba(18, 18, 18, 0.9) !important;
}

body { 
    background-color: var(--bg); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text); 
    font-family: 'Segoe UI', Tahoma, sans-serif; 
    transition: background-color 0.3s, color 0.3s, background-image 0.5s ease-in-out; 
    margin: 0; 
    padding: 0;
}

/* Unified Professional Top Nav Engine Layout */
.top-nav {
    max-width: 1400px; margin: 0 auto 15px; padding: 15px 20px;
    background-color: #262626; border-radius: 0 0 12px 12px;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.nav-center { display: flex; align-items: center; }
.nav-links { display: flex; gap: 25px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav-links li { color: #FFFFFF; font-weight: 600; cursor: pointer; position: relative; font-size: 0.95rem; letter-spacing: 0.5px; }
.nav-links a { color: #FFFFFF; text-decoration: none; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }

/* Submenu Hover Dropdowns Logic */
.dropdown { position: relative; }
.submenu { display: none; position: absolute; top: 100%; left: 0; background: #333333; min-width: 160px; border-radius: 4px; padding: 8px 0; list-style: none; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.submenu li a { padding: 8px 16px; display: block; color: #FFFFFF; font-size: 0.9rem; }
.submenu li a:hover { background: #444444; color: #FFFFFF; }
.dropdown:hover .submenu { display: block; }

/* Structural Home Button Link Rules */
.home-link { 
    text-decoration: none; 
    color: #FFFFFF !important; 
    font-weight: bold; 
    padding: 8px 14px; 
    border-radius: 6px; 
    background: rgba(255, 255, 255, 0.1); 
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.home-link:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-1px); }

/* Main Section Layout Matrices */
.container { max-width: 1300px; margin: 30px auto; padding: 0 20px; }
.header-section { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 30px; 
    border-bottom: 2px solid var(--border); 
    padding-bottom: 20px;
    flex-wrap: wrap;
    gap: 20px;
}
.title-area h1 { margin: 0 0 5px 0; color: var(--heading); font-size: 2.2rem; font-weight: 800; }
.title-area .subtitle { margin: 0; opacity: 0.8; font-size: 1rem; color: var(--text); }

.selection-row { margin-bottom: 25px; display: flex; align-items: center; gap: 10px; color: var(--heading); font-weight: 600; }

.controls { display: flex; align-items: center; gap: 12px; }
select { padding: 10px 16px; border-radius: 8px; font-size: 0.95rem; font-weight: 600; border: 1px solid var(--border); background: var(--card); color: var(--heading); cursor: pointer; transition: 0.2s; }
select:hover { border-color: var(--accent); }

.action-btn { 
    padding: 10px 16px; 
    border-radius: 8px; 
    border: 1px solid var(--border); 
    cursor: pointer; 
    background: var(--card); 
    color: var(--heading); 
    font-weight: bold; 
    transition: 0.2s;
}
.action-btn:hover { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }
#themeBtn { background: #f1c40f; color: #111111; border: none; }
#themeBtn:hover { opacity: 0.9; color: #111111; }

/* Grid and Cards Systems Layout */
.radio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 25px; margin-bottom: 40px; }
.radio-card { 
    background: var(--card); 
    padding: 24px; 
    border-radius: 16px; 
    box-shadow: 0 8px 24px rgba(0,0,0,0.06); 
    position: relative; 
    text-align: center; 
    border: 1px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.radio-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); border-color: var(--accent); }

.fav-btn { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 1.4rem; cursor: pointer; transition: transform 0.1s; padding: 0; }
.fav-btn:hover { transform: scale(1.15); }

.radio-card img { width: 70px; height: 70px; border-radius: 50%; margin-bottom: 15px; object-fit: cover; border: 3px solid var(--border); background: #FFFFFF; }
.info h3 { font-size: 1.1rem; margin: 0 0 6px 0; color: var(--heading); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info p { font-size: 0.85rem; color: var(--text); opacity: 0.8; margin: 0 0 15px 0; font-weight: 500; }

audio { width: 100%; height: 32px; margin-top: 5px; border-radius: 8px; }
h2 { color: var(--heading); font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; }
#status { color: var(--text); font-weight: 600; opacity: 0.8; margin-bottom: 20px; }
hr { border: 0; height: 1px; background: var(--border); margin: 40px 0; }