/* Basic theme tokens */
:root{
  --bg-light: #f0f2f5;
  --card-light: #ffffff;
  --text-light: #1c1e21;
  --muted-light: #65676b;
  --accent-light: #007bff; /* Added from referance */

  --bg-dark: #121212;
  --card-dark: #1e1e1e;
  --text-dark: #e4e6eb;
  --muted-dark: #b0b3b8;
  --accent-dark: #00c6ff; /* Added from referance */

  --accent-yt: #ff3b30;
  --accent-ytm: #e23a3a;
  --accent-photos: #4285f4;
  --accent-spotify: #1db954;
  --accent-microg: #34a853;

  --radius: 20px; /* Updated from referance */
  --container-w: 1200px;
  --glass: rgba(255,255,255,0.03);
  --header-bg: #2a2a2a; /* Added from referance's dark theme, but placed in root as a general variable */
}

/* Default (light) */
:root[data-theme="light"]{
  --bg: var(--bg-light);
  --card: var(--card-light);
  --text: var(--text-light);
  --muted: var(--muted-light);
  --border: rgba(13,18,23,0.06);
}

/* Dark theme */
:root[data-theme="dark"]{
  --bg: var(--bg-dark);
  --card: var(--card-dark);
  --text: var(--text-dark);
  --muted: var(--muted-dark);
  --border: rgba(255,255,255,0.04);
  --header-bg: #2a2a2a; /* Added from referance */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Updated from referance */
  line-height: 1.6; /* Added from referance */
  background:var(--bg);
  color:var(--text);
  min-height: 100vh; /* Added from referance */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header */
.site-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; max-width:var(--container-w); margin:0 auto;
  gap:12px; border-bottom:1px solid var(--border);
}
.site-header .title{font-weight:700; font-size:28px}
.right{display:flex; align-items:center; gap:10px}

/* Buttons/links in header */
.link-like{
  background:transparent; border:none; color:var(--muted); cursor:pointer; font-weight:600; transition: color 0.3s ease;
}

/* Layout */
.container{max-width:var(--container-w); margin:18px auto; padding:12px}
.grid{display:grid; grid-template-columns:repeat(1,1fr); gap:18px}
@media(min-width:720px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .grid{grid-template-columns:repeat(3,1fr)} }

/* Card */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:18px;
  border:1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.card-head{display:flex; align-items:center; gap:12px}
.card-icon{font-size:32px}
.card h3{margin:0}
.card-body{margin-top:12px}
.meta{font-size:13px; color:var(--muted); margin-bottom:8px}

/* downloads buttons */
.downloads{display:flex; gap:10px; flex-wrap:wrap; justify-content: center; margin-top: 15px;}
.downloads a{display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none; color:white; font-weight:700; font-size:14px; transition: all 0.3s ease-in-out;}
.card-youtube .downloads a{background:linear-gradient(90deg,var(--accent-yt), #ff6b6b)}
.card-ytmusic .downloads a{background:linear-gradient(90deg,var(--accent-ytm), #ff7b7b)}
.card-photos .downloads a{background:linear-gradient(90deg,var(--accent-photos), #6aa6ff)}
.card-spotify .downloads a{background:linear-gradient(90deg,var(--accent-spotify), #5be37a)}
.card-microg .downloads a{background:linear-gradient(90deg,var(--accent-microg), #66d17f)}

/* note */
.notes{max-width:var(--container-w); margin:14px auto 0; padding:12px; color:var(--muted)}

/* Footer */
.site-footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width:var(--container-w);
  margin:10px auto 22px;
  padding:12px;
  color:var(--muted);
  border-top:1px solid var(--border)
}
.footer-link {
  color: var(--accent-yt);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Modal */
.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; visibility:hidden; opacity:0; transition:all .18s}
.modal[aria-hidden="false"]{visibility:visible; opacity:1; background: rgba(2,6,12,0.56)}
.modal-panel{background:var(--card); border-radius:12px; padding:18px; width:100%; max-width:720px; border:1px solid var(--border); position:relative}
.modal-close{position:absolute; right:10px; top:10px; border:none; background:transparent; font-size:18px; cursor:pointer}

/* Theme Switch */
.theme-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "☀️";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

input:checked + .slider {
  background-color: var(--accent-yt);
}

input:checked + .slider:before {
  content: "🌙";
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* tiny responsive tweaks */
@media(max-width:768px){
  .downloads a{padding:10px 14px; font-size:14px}
}

@media(max-width:480px){
  .site-header{padding:10px}
  .title-break { display: block; }
  .card{padding:14px}
  .card-icon{font-size:26px}
}

/* Controls for filtering */
.controls {
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
  padding: 10px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.control-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-group label {
  font-weight: 600;
  color: var(--muted);
}

.control-group select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

@media(max-width:600px){
  .controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .control-group {
    justify-content: space-between;
  }
}

:root[data-theme="light"] {
    --header-bg: var(--card-dark);
}

/* Local PNG Icon Styling */
.card-icon img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  object-fit: cover;
}

/* Dark mode support for icons */
[data-theme="dark"] .card-icon img {
  filter: brightness(0.9);
}

@media (hover: hover) {
  .footer-link:hover {
    color: #e6352a;
    text-decoration: underline;
  }

  .downloads a:hover {
    filter: brightness(1.2);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  }

  .link-like:hover {
    color: var(--text);
  }

  .card-icon:hover img {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }

  [data-theme="dark"] .card-icon:hover img {
    filter: brightness(1);
  }
}