/* M3 Color Palette (derived from your red #ff6659) */
 :root {
  /* Default (purple base) */
  --primary: #6750A4;
  --on-primary: #FFFFFF;
  --primary-container: #EADDFF;
  --on-primary-container: #21005E;
  --error: #ff5449;
  
  --secondary: #625B71;
  --on-secondary: #FFFFFF;
  --secondary-container: #E8DEF8;
  --on-secondary-container: #1D192B;

  --surface-dim: #141218;
  --surface: #141218;
  --surface-bright: #3B383E;
  --surface-container-lowest: #0F0D13;
  --surface-container-low: #1D1B20;
  --surface-container: #211F26;
  --surface-container-high: #2B2930;
  --surface-container-highest: #36343B;

  --on-surface: #E6E0E9;
  --on-surface-variant: #CAC4D0;
  --outline: #938F99;
  --outline-variant: #49454F;

  --font-family: 'Roboto Flex', 'Segoe UI', system-ui, sans-serif;
  --font-display: 700 2.75rem/1.2 var(--font-family);
  --font-headline: 600 2rem/1.3 var(--font-family);
  --font-title: 500 1.25rem/1.4 var(--font-family);
  --font-label: 500 0.9rem/1.4 var(--font-family);
  --font-body: 400 1rem/1.6 var(--font-family);
}

/* 1. Red */
[data-theme="red"] {
  --primary: #B3261E;
  --on-primary: #FFFFFF;
  --primary-container: #F9DEDC;
  --on-primary-container: #410E0B;

  --secondary: #775652;
  --on-secondary: #FFFFFF;
  --secondary-container: #FFDAD6;
  --on-secondary-container: #2C1512;
}

/* 2. Orange */
[data-theme="orange"] {
  --primary: #9C4221;
  --on-primary: #FFFFFF;
  --primary-container: #FFDAD6;
  --on-primary-container: #370E00;

  --secondary: #77574E;
  --on-secondary: #FFFFFF;
  --secondary-container: #FFDAD6;
  --on-secondary-container: #2C150F;
}

/* 3. Amber (Yellow) */
[data-theme="amber"] {
  --primary: #7D5800;
  --on-primary: #FFFFFF;
  --primary-container: #FFE8A4;
  --on-primary-container: #231C00;

  --secondary: #6B5F2F;
  --on-secondary: #FFFFFF;
  --secondary-container: #EDE3B0;
  --on-secondary-container: #1E1C05;
}

/* 4. Lime */
[data-theme="lime"] {
  --primary: #5A6301;
  --on-primary: #FFFFFF;
  --primary-container: #E8ED95;
  --on-primary-container: #1D1F00;

  --secondary: #6B653C;
  --on-secondary: #FFFFFF;
  --secondary-container: #E8E5B1;
  --on-secondary-container: #1E1D05;
}

/* 5. Green */
[data-theme="green"] {
  --primary: #006E1C;
  --on-primary: #FFFFFF;
  --primary-container: #95F991;
  --on-primary-container: #002204;

  --secondary: #52634F;
  --on-secondary: #FFFFFF;
  --secondary-container: #D5E8CF;
  --on-secondary-container: #111F0F;
}

/* 6. Teal */
[data-theme="teal"] {
  --primary: #006A6A;
  --on-primary: #FFFFFF;
  --primary-container: #71F7F7;
  --on-primary-container: #002020;

  --secondary: #4A6362;
  --on-secondary: #FFFFFF;
  --secondary-container: #CDE8E7;
  --on-secondary-container: #051F1F;
}

/* 7. Cyan */
[data-theme="cyan"] {
  --primary: #006A7F;
  --on-primary: #FFFFFF;
  --primary-container: #9FE9FF;
  --on-primary-container: #001F26;

  --secondary: #4A606D;
  --on-secondary: #FFFFFF;
  --secondary-container: #CDE4EC;
  --on-secondary-container: #051F24;
}

/* 8. Light Blue */
[data-theme="light-blue"] {
  --primary: #0061A4;
  --on-primary: #FFFFFF;
  --primary-container: #D0E4FF;
  --on-primary-container: #001D36;

  --secondary: #54637C;
  --on-secondary: #FFFFFF;
  --secondary-container: #D7E3F8;
  --on-secondary-container: #101C2B;
}

/* 9. Blue */
[data-theme="blue"] {
  --primary: #0061A4;
  --on-primary: #FFFFFF;
  --primary-container: #D0E4FF;
  --on-primary-container: #001D36;

  --secondary: #4E6079;
  --on-secondary: #FFFFFF;
  --secondary-container: #D7E3F8;
  --on-secondary-container: #091C2B;
}

/* 10. Indigo */
[data-theme="indigo"] {
  --primary: #1E3A8A;
  --on-primary: #FFFFFF;
  --primary-container: #D8DFFF;
  --on-primary-container: #050F3C;

  --secondary: #4C4F6A;
  --on-secondary: #FFFFFF;
  --secondary-container: #D8D8F1;
  --on-secondary-container: #0E0E24;
}

/* 11. Deep Purple */
[data-theme="deep-purple"] {
  --primary: #5E35B1;
  --on-primary: #FFFFFF;
  --primary-container: #E8DEFF;
  --on-primary-container: #22005D;

  --secondary: #6E5B7E;
  --on-secondary: #FFFFFF;
  --secondary-container: #E8DEFF;
  --on-secondary-container: #241E2E;
}

/* 12. Purple */
[data-theme="purple"] {
  --primary: #6750A4;
  --on-primary: #FFFFFF;
  --primary-container: #EADDFF;
  --on-primary-container: #21005E;

  --secondary: #625B71;
  --on-secondary: #FFFFFF;
  --secondary-container: #E8DEF8;
  --on-secondary-container: #1D192B;
}

/* 13. Pink */
[data-theme="pink"] {
  --primary: #9A4058;
  --on-primary: #FFFFFF;
  --primary-container: #FFD9E2;
  --on-primary-container: #3E001D;

  --secondary: #75565C;
  --on-secondary: #FFFFFF;
  --secondary-container: #FFD9E2;
  --on-secondary-container: #2C151B;
}

/* 14. Rose */
[data-theme="rose"] {
  --primary: #C62C4F;
  --on-primary: #FFFFFF;
  --primary-container: #FFDEE5;
  --on-primary-container: #3E001E;

  --secondary: #875E6E;
  --on-secondary: #FFFFFF;
  --secondary-container: #FFDEE5;
  --on-secondary-container: #2C151F;
}

/* 15. Brown */
[data-theme="brown"] {
  --primary: #5D4037;
  --on-primary: #FFFFFF;
  --primary-container: #EADDCA;
  --on-primary-container: #221A17;

  --secondary: #795548;
  --on-secondary: #FFFFFF;
  --secondary-container: #EADDCA;
  --on-secondary-container: #281A15;
}

/* 16. Grey */
[data-theme="gray"] {
  --primary: #6E6E6E;
  --on-primary: #FFFFFF;
  --primary-container: #E3E3E3;
  --on-primary-container: #1D1D1D;

  --secondary: #7E7E7E;
  --on-secondary: #FFFFFF;
  --secondary-container: #E3E3E3;
  --on-secondary-container: #1E1E1E;
}

/* 17. Blue-Grey */
[data-theme="blue-gray"] {
  --primary: #607D8B;
  --on-primary: #FFFFFF;
  --primary-container: #DCE4E8;
  --on-primary-container: #0A1B21;

  --secondary: #546775;
  --on-secondary: #FFFFFF;
  --secondary-container: #D8E2E8;
  --on-secondary-container: #0D1A232;
}

/* 18. Navy (added) */
[data-theme="navy"] {
  --primary: #0D47A1;
  --on-primary: #FFFFFF;
  --primary-container: #D1E3FF;
  --on-primary-container: #001E39;

  --secondary: #415363;
  --on-secondary: #FFFFFF;
  --secondary-container: #D2DEE8;
  --on-secondary-container: #0B1D28;
}

/* 19. Forest Green */
[data-theme="forest-green"] {
  --primary: #1B5E20;
  --on-primary: #FFFFFF;
  --primary-container: #B9F6CA;
  --on-primary-container: #00210F;

  --secondary: #3C6A31;
  --on-secondary: #FFFFFF;
  --secondary-container: #D7ECD7;
  --on-secondary-container: #0C1D11;
}

/* 20. Teal (alt) */
[data-theme="teal-alt"] {
  --primary: #00897B;
  --on-primary: #FFFFFF;
  --primary-container: #A7FFEB;
  --on-primary-container: #00201E;

  --secondary: #4E796F;
  --on-secondary: #FFFFFF;
  --secondary-container: #D1EDE7;
  --on-secondary-container: #071E1B;
}






  body {
      font: var(--font-body);
    color: var(--on-surface);
    background: var(--surface);
    margin: 0;
    color: var(--on-surface);
    background-color: var(--surface-dim); /* Use a solid M3 surface color */
    height: 100vh;
    overflow-y: auto; /* Allow scrolling if content overflows */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the grid vertically */
    align-items: center; /* Center the grid horizontally */
    padding: 2rem;
    box-sizing: border-box;
  }
  h1 {
    font: var(--font-display);
    letter-spacing: -0.02em;
  }

  h2 {
    font: var(--font-headline);
    letter-spacing: -0.01em;
  }

  h3 {
    font: var(--font-title);
  }

  /* Labels (buttons, form text) */
  button, label {
    font: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  /* Header stays centered at the top */
  header {
    text-align: center;
    margin-bottom: 2rem;
  }

  #greeting {
    font-size: 1.75rem; /* M3 Headline Small */
    font-weight: 400;
    color: var(--on-surface-variant);
  }

  #time {
    font-size: 4rem; /* M3 Display Medium */
    font-weight: 500;
    line-height: 1;
  }

  /* The new grid container */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px;
  }
    .card {
    background: rgba(33, 30, 29, 0.65); /* slightly softer transparency */
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px);
    
    border-radius: 1.25rem; /* smoother corners */
    padding: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05); /* softer border */
    
    /* Subtle shadow for elevation */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;

    opacity: 0;
    animation: card-enter 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }

  /* Stagger entry */
  .grid-container .card:nth-child(1) { animation-delay: 0.1s; }
  .grid-container .card:nth-child(2) { animation-delay: 0.2s; }
  .grid-container .card:nth-child(3) { animation-delay: 0.3s; }

  .card:hover {
    background: rgba(33, 30, 29, 0.8);
    transform: translateY(-6px); /* more lift */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }

  /* Card titles */
  .card h3 {
    margin-top: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--on-surface);
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
  }

  .shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
  }

  .shortcut-icon {
    width: 32px;   /* adjust size for all logos */
    height: 32px;
    object-fit: contain;
    margin-bottom: 0.5rem;
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  .m3-button:hover .shortcut-icon {
    transform: scale(1.15);     /* subtle pop */
    filter: brightness(1.2);     /* slight glow effect */
  }


  /* M3 Filled Tonal Button Style */
  /* M3 Filled Tonal Button Style */
  .m3-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    background-color: var(--secondary-container);
    color: var(--on-secondary-container); 
    border-radius: 1.5rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    text-align: center;
    position: relative;
    overflow: hidden; /* enables ripple clipping */
    
    /* -- NEW TRANSITIONS -- */
    transition: transform 0.2s ease, background-color 0.2s ease;
    will-change: transform; /* Performance optimization */
  }

  .m3-button:hover {
    background-color: var(--secondary-container); /* Keep color consistent */
    filter: brightness(0.9);
    transform: translateY(-2px); /* Lift effect */
  }

  .m3-button:active {
    transform: translateY(-1px) scale(0.95); /* Press effect */
    filter: brightness(0.8);
  }

  .m3-button .material-icons-round {
    font-size: 24px;
  }

/* To-Do input row */
.todo-input {
  display: flex;
  align-items: center;   /* ensures input & button align vertically */
  gap: 0.5rem;
  margin-block: 1rem;
}



.todo-input input {
  flex: 1;
  flex-grow: 1;
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-high);
  font-size: 1rem;
  color: var(--on-surface);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

/* Placeholder */
.todo-input input::placeholder {
  color: var(--on-surface-variant);
  opacity: 0.8;
}

/* Focus effect */
.todo-input input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface-container);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);
  transform: translateY(-1px);
}
/* Limit To-Do list height and make it scrollable */
.todo-card {
  display: flex;
  flex-direction: column;
  max-height: 400px; /* adjust to fit your layout */
}

#todo-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 0.25rem; /* space for scrollbar */
}

/* Pixel-style scrollbar */
#todo-list::-webkit-scrollbar {
  width: 6px;
}
#todo-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
#todo-list::-webkit-scrollbar-track {
  background: transparent;
}

  /* To-Do Item Animations */
  @keyframes add-item {
    from {
      opacity: 0;
      transform: translateX(-15px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes remove-item {
    to {
      opacity: 0;
      transform: scale(0.8);
      height: 0;
      padding: 0;
      margin: 0;
    }
  }

  #todo-list li.adding {
    animation: add-item 0.4s ease forwards;
  }

  #todo-list li.removing {
    animation: remove-item 0.4s ease forwards;
  }
  /* M3 Icon Button Style */
  .m3-icon-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--outline);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .m3-icon-button:hover {
    background: rgba(255, 218, 214, 0.1); /* on-primary-container with alpha */
  }

  /* To-Do List Items */
  #todo-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  #todo-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background-color: var(--surface-container-low);
    border-radius: 0.75rem; /* M3 Small shape */
  }

  #todo-list li button { /* The 'delete' button */
    background: none;
    border: none;
    color: var(--on-surface-variant);
    cursor: pointer;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #todo-list li button:hover {
    background-color: var(--surface-container-high);
    color: var(--primary);
  }


/* --- NEW: Split Weather/BTC Card --- */

/* 1. The main card container */
.weather-card {
  /* Remove padding to let the inner sections control spacing */
  padding: 0;
  /* This is crucial: it keeps the children's sharp corners inside the parent's rounded ones */
  overflow: hidden; 
  display: flex;
  flex-direction: column;
}
#location {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  margin-top: 0.25rem;
  letter-spacing: 0.02em;
}


/* 2. The top weather section */
#weather-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem; /* More spacious padding */ 
  transition: background-color 0.25s ease;
}

/* 3. The bottom Bitcoin section */
#btc-bottom {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem; /* Slightly less vertical padding for a single line of content */
  transition: background-color 0.25s ease;
}


/* 5. Typography and Icon Refinements */
#weather-main {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#weather-main img {
  width: 64px;
  height: 64px;
}

#temp {
  font-size: 3.5rem; /* Slightly larger for more impact */
  font-weight: 400;  /* M3 often uses lighter weights for large display text */
  line-height: 1;    /* Tighten line height */
}

#description {
  text-transform: capitalize;
  color: var(--on-surface-variant);
  font-size: 1rem;
  margin-top: -0.25rem; /* Nudge it slightly closer to the temp */
}

.btc-row {
  /* This class is no longer needed for layout, so we clear its styles */
  background: none;
  padding: 0;
  border-radius: 0;
  /* We re-apply flex here so the simplified HTML works */
  display: contents; 
}

.btc-icon { font-size: 28px; color: var(--primary); }
.btc-meta { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }
.btc-title { font-weight: 600; color: var(--on-surface); }
.btc-sub { font-size: 0.8rem; color: var(--on-surface-variant); }

.btc-right { display: flex; align-items: center; gap: 0.5rem; }
.btc-price-value { font-size: 1.2rem; font-weight: 500; color: var(--on-surface); }

.btc-chip {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
}
.btc-chip.gain { background: rgba(0, 200, 83, 0.18); color: #00c853; }
.btc-chip.loss { background: rgba(244, 67, 54, 0.18); color: #f44336; }
  /* Pixel-style entry animation */
  @keyframes card-enter {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* --- Animated Orb Background --- */

  .background-container {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: #300000; /* neutral gray fallback */
    transition: background 1s ease; /* smooth theme changes */
  }



  .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.55;
    animation: move-orb ease-in-out infinite;
    mix-blend-mode: screen;
  }

  @keyframes move-orb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-150px, 100px) scale(1.1); }
    50% { transform: translate(100px, -150px) scale(0.9); }
    75% { transform: translate(50px, 50px) scale(1.05); }
  }




 /* === FINAL SEARCH STYLES (with animation) === */
.search-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 1.5rem auto 20px;
  background: rgba(33, 30, 29, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 2rem;
  border: 1px solid var(--outline-variant);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  gap: 0.75rem;
  transition: border-radius 0.2s ease-in-out;
}

.search-container:has(#suggestions-box.visible) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* (The .input-wrapper and #search-input styles remain the same) */
.input-wrapper {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.input-wrapper .material-icons-round {
  color: var(--on-surface-variant);
  margin-right: 12px;
}

#search-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--on-surface);
  font-size: 1.1rem;
  height: 100%;
}

#search-input::placeholder {
  color: var(--on-surface-variant);
}

.search-container:has(#search-input:focus) {
  background-color: rgba(50, 47, 46, 0.8);
}
/* === END of unchanged styles === */


/* EDITED: Updated #suggestions-box for the transition */
#suggestions-box {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  position: absolute;
  width: 100%;
  left: 0;
  top: 100%;
  background: rgba(43, 40, 39, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--outline-variant);
  border-top: none;
  border-radius: 0 0 2rem 2rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  max-height: 400px;
  overflow-y: auto;
  z-index: 100;

  /* --- NEW styles for the transition --- */
  /* Start hidden and slightly moved up */
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  pointer-events: none;
  /* Define the transition effect */
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* NEW: This class makes the suggestions box visible and animates it into place */
#suggestions-box.visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

/* (The #suggestions-box li styles remain the same) */
#suggestions-box li {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: var(--on-surface);
  cursor: pointer;
  font-size: 1rem;
}

#suggestions-box li:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

#suggestions-box li .material-icons-round {
  color: var(--on-surface-variant);
  margin-right: 16px;
  font-size: 20px;
}
/* =========================================================
   SETTINGS PANEL (Transparent, blurred backdrop)
   ========================================================= */
.settings-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 420px;
  max-width: 95vw;
  height: 100%;

  /* Transparent + blur */
  background: rgba(32, 30, 30, 0.55); /* semi-transparent surface */
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);

  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px 0 0 24px;

  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.45);

  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;

  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  overflow-y: auto;
}

/* Active state: slide in */
.settings-panel.active {
  right: 0;
  animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrollbar (minimal, Pixel-like) */
.settings-panel::-webkit-scrollbar { width: 6px; }
.settings-panel::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}
.settings-panel::-webkit-scrollbar-track { background: transparent; }

/* Slide-in animation */
@keyframes slideIn {
  from { transform: translateX(100%) scale(0.98); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}


/* =========================================================
   HEADER
   ========================================================= */
.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--outline-variant);
}

.settings-header h2 {
  font: var(--font-title);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  color: var(--on-surface);
}

/* Close button tweaks */
.settings-header .m3-icon-button {
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  border: none;
}
.settings-header .m3-icon-button:hover {
  background: var(--surface-container-highest);
  color: var(--primary);
}

/* =========================================================
   SECTIONS
   ========================================================= */
.settings-section {
  background: var(--surface-container-low);
  border-radius: 1.25rem;
  padding: 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.25s ease, transform 0.25s ease;
}
.settings-section:hover {
  background: var(--surface-container);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

/* Section titles */
.settings-section h3,
.settings-section label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface-variant);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Add divider between sections */
.settings-section + .settings-section {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 1.5rem;
}

/* =========================================================
   TACTILE INTERACTIONS
   ========================================================= */
/* Smooth scale-in for entire panel */
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.settings-panel.active { animation: slideIn 0.35s cubic-bezier(0.4,0,0.2,1); }


/* Color Swatches */
.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* Round Pixel-style swatches */
.swatch {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-container-high);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Inner circle = actual color preview */
.swatch::before {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--swatch); /* set via inline style */
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2);
}

/* Hover interaction */
.swatch:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Selected swatch highlight (check mark) */
.swatch.selected::after {
  content: "✓";
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.9rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}



/* Background Controls / Upload Area */
.background-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  border-radius: 1.5rem;
  border: 2px dashed var(--outline-variant);
  background: var(--surface-container-low);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Hover + Drag Over */
.background-controls:hover,
.background-controls.dragover {
  border-color: var(--primary);
  background: var(--surface-container-high);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Custom File Upload Button */
.custom-file-upload {
  padding: 0.75rem 1.4rem;
  border-radius: 2rem;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  font: var(--font-label);
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: none;
  transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.custom-file-upload:hover {
  background: var(--secondary);
  color: var(--on-secondary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.custom-file-upload input[type="file"] {
  display: none;
}

/* Preview Container */
#bg-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface-container-high);
  padding: 0.6rem 1rem;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#bg-preview.hidden {
  display: none;
}

#bg-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#bg-name {
  font: var(--font-body);
  color: var(--on-surface);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Remove Background Button */
#remove-bg {
  margin-top: 0.75rem;
  padding: 0.6rem 1.4rem;
  border-radius: 2rem;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  cursor: pointer;
  font: var(--font-label);
  font-weight: 500;
  transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

#remove-bg:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#remove-bg:active {
  transform: translateY(0) scale(0.95);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Empty state icon */
#bg-empty-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--on-surface-variant);
  opacity: 0.7;
  pointer-events: none; /* let clicks go through to file input */
  text-align: center;
}

#bg-empty-icon .material-icons-round {
  font-size: 48px;
  color: var(--on-surface-variant);
}

#bg-empty-icon p {
  font: var(--font-body);
  font-size: 0.9rem;
}


  /* Optional: Scroll if content overflows */
  .settings-panel {
    overflow-y: auto;
  }

  /* Subtle divider between sections */
  .settings-section + .settings-section {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 1.5rem;
  }

  /* Make swatches feel tactile like Pixel UI */
  .swatch {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 3px rgba(0,0,0,0.2);
  }

  /* Scrollbar for panel (Pixel-style) */
  .settings-panel::-webkit-scrollbar {
    width: 6px;
  }

  .settings-panel::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
  }

  .settings-panel::-webkit-scrollbar-track {
    background: transparent;
  }
    /* M3-style settings button */
  #m3-settings-btn,
  #m3-settings-btn span,
  .m3-icon-button {
    /* Base button */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--secondary-container);
    color: var(--on-secondary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;

    /* Elevation / shadow */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.15);

    transition: box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease;
  }

  /* Hover state */
  .m3-icon-button:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.25), 0 8px 16px rgba(0,0,0,0.2);
    transform: translateY(-2px);
    background: var(--secondary-container);
  }

  /* Press / active state */
  .m3-icon-button:active {
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transform: scale(0.95);
  }

  /* Icon scaling on press */
  .m3-icon-button span.material-icons-round {
    font-size: 28px;
    user-select: none;
    pointer-events: none;
    transition: transform 0.15s ease;
  }

  .m3-icon-button:active span.material-icons-round {
    transform: scale(0.85);
  }
/* Shortcuts header with edit button */
.shortcuts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Dragging style */
.m3-button.dragging {
  opacity: 0.5;
}

/* Edit mode highlight */
#edit-shortcuts.active {
  color: var(--primary);
}
/* Shortcuts header */
.shortcuts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
}

/* Edit mode affordances */
.m3-button.editing {
  border: 2px dashed var(--primary);
  cursor: grab;
}

.m3-button.editing:active {
  cursor: grabbing; /* Cursor for when you're actively dragging */
}
#edit-shortcuts.active { 
  outline: 2px solid var(--primary); 
}

.shortcuts .m3-button {
  transition: transform 0.2s ease-in-out, 
              box-shadow 0.2s ease-in-out,
              opacity 0.2s ease-in-out; /* Animates movement, shadow, and opacity */
  user-select: none; /* Prevents text selection while dragging */
}

/* Dragging ghost style */
.m3-button.dragging {
  opacity: 0.4;
  transform: scale(1.08) rotate(2deg); /* "Lifts" the item off the page */
  box-shadow: 0 8px 24px rgba(0,0,0,0.3); /* Adds a pronounced shadow */
  cursor: grabbing;
}

/* Placeholder for the drop location */
.placeholder {
  height: 64px; /* Match the height of your shortcuts */
  border-radius: 1.5rem;
  background-color: rgba(128, 128, 128, 0.2); /* A subtle fill is better than a harsh border */
  
  /* Animate its appearance */
  transition: all 0.2s ease;
  flex-shrink: 0; /* Prevents the placeholder from shrinking in the flex layout */
  margin: 4px 0; /* Adjust to match the margin of your shortcuts */
}

/* Modal */
.editor-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.4);
  z-index: 3000;
}
.editor-modal.hidden { display: none; }
.editor-content {
  width: min(520px, 92vw);
  background: var(--surface-container);
  color: var(--on-surface);
  border-radius: 1.25rem;
  padding: 1rem 1.25rem 1.25rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}

.editor-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: .75rem;
  margin: .75rem 0;
}

.editor-row input[type="text"],
.editor-row input[type="url"] {
  background: var(--surface-container-low);
  border: 1px solid var(--outline);
  color: var(--on-surface);
  padding: .6rem .8rem;
  border-radius: .75rem;
}

.icon-edit {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
#edit-preview { width: 40px; height: 40px; object-fit: contain; }

.editor-actions {
  margin-top: 1rem;
  display: flex; gap: .5rem; justify-content: flex-end;
}
#edit-shortcuts {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 20px;
  cursor: pointer;  
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s, opacity 0.2s;
  opacity: 0.6; /* less visible by default */
  z-index: 9999;
}

#edit-shortcuts:hover {
  background: rgba(0, 0, 0, 0.7);
  opacity: 1;
  transform: scale(1.1);
}

#edit-shortcuts.active {
  background: #ffffffbb; /* highlight when edit mode is ON */
  opacity: 1;
}
#weather-top,
#btc-bottom {
  /* This is the key property. It tells both sections to grow and share the empty space equally. */
  flex-grow: 1;
}

/* API Keys section */
.api-section h3 {
  margin-bottom: 1rem;
  font-size: 1.125rem; /* M3 Headline Small */
  font-weight: 500;
  color: var(--on-surface);
  text-transform: uppercase;
  letter-spacing: 0.75px;
}

/* Input wrapper */
.api-inputs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* Labels */
.api-inputs label {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem; /* M3 Body Small */
  font-weight: 500;
  color: var(--on-surface-variant);
  gap: 0.25rem;
}

/* Pixel-style filled inputs */
.api-inputs input {
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-high);
  font-size: 0.95rem;
  color: var(--on-surface);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.api-inputs input::placeholder {
  color: var(--on-surface-variant);
  opacity: 0.8;
}

.api-inputs input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface-container);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);
  transform: translateY(-1px);
}

/* Buttons container */
.api-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-bottom: 1rem;
}

/* Unified Pixel-style buttons (SAVE, RESET, Remove BG, Choose File) */
.custom-file-upload,
.api-buttons .m3-button,
#remove-bg {
  border-radius: 2rem;
  padding: 0.8rem 1.4rem;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  font-weight: 500;
  letter-spacing: 0.03em;
  border: 1px solid var(--outline-variant);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}

/* Hover */
.custom-file-upload:hover,
.api-buttons .m3-button:hover,
#remove-bg:hover {
  background: var(--secondary);
  color: var(--on-secondary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Active */
.custom-file-upload:active,
.api-buttons .m3-button:active,
#remove-bg:active {
  background: var(--secondary-container-highest);
  color: var(--on-secondary-container);
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Danger variant for RESET */
.api-buttons .m3-button.danger {
  background: var(--error);
  color: var(--on-error);
  border: none;
}

.api-buttons .m3-button.danger:hover {
  background: color-mix(in srgb, var(--error) 90%, black 10%);
}

.api-buttons .m3-button.danger:active {
  background: color-mix(in srgb, var(--error) 80%, black 20%);
}


.custom-file-upload:hover,
.api-buttons .m3-button:hover,
#remove-bg:hover {
  background: var(--secondary);
  color: var(--on-secondary);
  transform: translateY(-2px);
}
.custom-file-upload {
  padding: 0.6rem 1.2rem;
  border-radius: 1rem;
  background: var(--surface-container-high); /* lighter background */
  color: var(--on-secondary-container);     /* dark text */
  font: var(--font-label);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 1px solid var(--outline-variant);
}

.custom-file-upload:hover {
  background: var(--secondary-container);  /* slightly darker background */
  color: var(--on-secondary-container);    /* force text to stay dark */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.custom-file-upload:active {
  background: var(--secondary);            /* even darker for pressed */
  color: var(--on-secondary);              /* adjust to still be readable */
  transform: scale(0.97);
}

.custom-file-upload input[type="file"] {
  display: none;
}

/* Creator credit - top left */
#site-credit {
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  text-decoration: none;
  letter-spacing: 0.03em;
  z-index: 1100;
  transition: color 0.25s ease;
}

#site-credit:hover {
  color: var(--primary);
  text-decoration: underline;
}
/* Ripple effect container */
.m3-button,
.m3-icon-button,
.custom-file-upload,
.api-buttons .m3-button,
#remove-bg {
  position: relative;
  overflow: hidden; /* clip ripple inside */
}

/* Softer Pixel-style ripple */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: 0.2; /* softer opacity */
  filter: blur(4px); /* adds softness */
  pointer-events: none;
  animation: ripple-animation 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ripple-animation {
  to {
    transform: scale(6); /* larger, more diffused */
    opacity: 0;
  }
}


/* ============================
   Shortcuts Modal (Material You style)
   ============================ */
#shortcuts-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#shortcuts-modal.active {
  opacity: 1;
  pointer-events: auto;
}

#shortcuts-modal .modal-content {
  background: var(--surface-container);
  color: var(--on-surface);
  border-radius: 1.25rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  width: min(480px, 92vw);

  /* Animation */
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
}

#shortcuts-modal.active .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Header */
#shortcuts-modal .modal-content h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font: var(--font-headline);
  color: var(--on-surface);
  text-align: center;
}

/* List of shortcuts */
#shortcuts-modal ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#shortcuts-modal li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-container-low);
  padding: 0.6rem 0.9rem;
  border-radius: 0.75rem;
  font-size: 0.95rem;
  color: var(--on-surface);
  transition: background 0.2s ease;
}

#shortcuts-modal li:hover {
  background: var(--surface-container);
}

/* Keyboard keys */
#shortcuts-modal kbd {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  padding: 0.25rem 0.5rem;
  border-radius: 0.4rem;
  font-family: monospace;
  font-size: 0.85rem;
  font-weight: 500;
  min-width: 2rem;
  text-align: center;
}

/* Close button */
#close-shortcuts {
  display: block;
  margin: 0 auto;
  padding: 0.6rem 1.4rem;
  border-radius: 1rem;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  cursor: pointer;
  font: var(--font-label);
  transition: filter 0.2s, transform 0.15s, box-shadow 0.25s;
}

#close-shortcuts:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#close-shortcuts:active {
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Centered buttons in settings blocks */
.api-buttons.centered {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Keyboard shortcut hint style */
.settings-section kbd {
  background: var(--surface-container-high);
  color: var(--on-surface);
  padding: 0.2rem 0.5rem;
  border-radius: 0.3rem;
  font-family: monospace;
  font-size: 0.85rem;
}
/* === SMOOTH DRAG & DROP FOR SHORTCUTS === */

/* This is the key part: animate the shortcuts when their position changes */
.shortcuts a {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Style for the icon currently being dragged */
.shortcuts a.dragging {
  /* Make it semi-transparent and lift it up slightly */
  opacity: 0.5;
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* While an item is being dragged, the other items are NOT the one being dragged */
/* This makes sure the browser doesn't show the "ghost" of the original item */
.shortcuts a.editing:not(.dragging) {
  /* You can add styles here for how the other icons should look */
  /* For example, a slight dimming effect: */
  /* opacity: 0.8; */
}

/* =========================================================
   UPDATED MOBILE RESPONSIVE STYLES
   (Hides To-Do List & Fixes Settings Panel)
   ========================================================= */
@media screen and (max-width: 768px) {

  /* --- 1. General Layout & Typography --- */
  body {
    padding: 1rem;
    justify-content: flex-start;
    min-height: 100vh;
    height: auto;
  }

  .grid-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .card {
    padding: 1.25rem;
  }

  /* --- 2. Header & Search --- */
  header {
    margin-bottom: 1.5rem;
  }
  
  #time {
    font-size: 3rem;
  }

  #greeting {
    font-size: 1.25rem;
  }
  
  .search-container {
    padding: 0.5rem 1rem;
    border-radius: 1.5rem;
  }
  
  #search-input {
    font-size: 1rem;
  }

  /* --- 3. Shortcuts Card --- */
  .shortcuts {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  /* Only show the first two shortcuts */
  .shortcuts a {
    display: none;
  }
  .shortcuts a:nth-child(1),
  .shortcuts a:nth-child(2) {
    display: flex;
  }

  .m3-button {
    padding: 0.75rem 0.5rem;
    border-radius: 1.25rem;
  }
  
  .shortcut-icon {
    width: 28px;
    height: 28px;
  }
  
  .m3-button .shortcut-name {
    font-size: 0.8rem;
  }
  
  /* --- 4. To-Do List Card (FIX) --- */
  /* As requested: Hide the to-do list entirely on mobile to prevent scrolling */
  .todo-card {
    display: none;
  }

  /* --- 5. Weather & BTC Card --- */
  #weather-top {
    padding: 1rem;
    gap: 0.25rem;
  }

  #btc-bottom {
    padding: 0.9rem 1.25rem;
  }
  
  #weather-main img {
    width: 48px;
    height: 48px;
  }
  
  #temp {
    font-size: 2.75rem;
  }
  
  #description {
    font-size: 0.9rem;
  }
  
  .btc-price-value {
    font-size: 1rem;
  }
  
  .btc-title {
    font-size: 0.9rem;
  }
  
  .btc-chip {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
  }

  /* --- 6. Settings Panel (FIX) --- */
  /* Make the settings panel full-screen and fix overflow */
  .settings-panel {
    width: 100%;
    max-width: 100vw;
    border-left: none;
    border-radius: 0;
    /* This new line prevents padding from making the panel wider than the screen */
    box-sizing: border-box; 
  }
}
.settings-panel {
  position: fixed;
  top: 0;
  right: 0; /* Anchor the panel to the right edge of the screen */
  width: 420px;
  max-width: 95vw;
  height: 100%;
  background: rgba(32, 30, 30, 0.55);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.45);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 1000;
  overflow-y: auto;
  
  /* Use transform to move the panel off-screen */
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active state: slide it back into view */
.settings-panel.active {
  transform: translateX(0);
}

/* You can now safely remove the old @keyframes slideIn animation rule if you want, as the transition handles everything. */


/* =========================================================
   FIX: Mobile Shortcut Layout (Only 2 Visible)
   ========================================================= */

@media screen and (max-width: 768px) {
  /* This code hides all shortcuts by default on mobile... */
  .shortcuts a {
    display: none;
  }
  
  /* ...and then specifically shows only the first two. */
  .shortcuts a:nth-child(1),
  .shortcuts a:nth-child(2) {
    display: flex; /* Use 'flex' to match the button's original display type */
  }
}