/* Desktop Forced Mode Styles for iOS and Windows */
.desktop-forced {
  overflow-x: auto !important;
}

.desktop-forced.ios-desktop {
  /* iOS specific desktop view optimizations */
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

.desktop-forced.windows-desktop {
  /* Windows specific desktop view optimizations */
  -ms-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

/* Ensure piano container works in desktop forced mode */
.desktop-forced .piano-container {
  width: max-content !important;
  min-width: unset !important;
  max-width: 100% !important;
  position: relative;
  margin: 0 auto;
}

/* Piano keys layout for desktop forced mode */
.desktop-forced .piano-keys {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  min-width: unset !important;
  justify-content: center;
}

/* Touch optimizations for desktop forced mode */
.desktop-forced .key {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* Desktop forced mode tab input optimizations */
.desktop-forced .tab-note-input {
  font-size: 16px !important;
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
  touch-action: manipulation;
}

.desktop-forced .tab-note-input:focus {
  font-size: 16px !important;
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
  /* Ensure no viewport changes on focus in desktop mode */
  zoom: 1 !important;
  transform: none !important;
}

.tab-note-entry.tab-highlight {
    background: linear-gradient(90deg, #ffe066 0%, #ffd700 100%);
    box-shadow: 0 0 8px 2px #ffd70099;
    transition: background 0.2s, box-shadow 0.2s;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

/* iOS Safari optimizations - Allow pinch-zoom while maintaining functionality */
html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Removed min-width to allow responsive design and zoom */
}

/* Mobile device specific styles */
.mobile-device {
  /* Optimize touch interactions */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  -webkit-user-select: none;
  user-select: none;
}

.ios-device {
  /* iOS-specific optimizations */
  -webkit-overflow-scrolling: touch;
}

.android-device {
  /* Android-specific optimizations */
  overscroll-behavior: contain;
}

.windows-mobile-device {
  /* Windows Mobile-specific optimizations */
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

/* Only prevent selection on specific interactive elements, not globally */
button, input[type="text"], input[type="email"], input[type="password"], canvas, .key, .tab-note-input {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* Enhanced mobile touch targets */
@media (pointer: coarse) {
  .key {
    min-height: 48px !important; /* Minimum touch target size */
    min-width: 48px !important;
    padding: 4px !important;
  }
  
  button, .btn {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
  }
  
  /* Increase spacing between touch elements */
  .controls-container,
  .options-panel {
    gap: 16px !important;
  }
  
  /* Larger tap areas for small controls */
  .transpose-btn {
    min-width: 56px !important;
    min-height: 56px !important;
    font-size: 24px !important;
  }
}

/* Allow pinch-zoom by ensuring body doesn't force desktop layout */
body {
  /* Removed min-width: 1024px; to allow responsive behavior */
  overflow-x: auto;
  /* Enable touch-action for zoom gestures */
  touch-action: pan-x pan-y pinch-zoom;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body {
    padding: 0;
    margin: 0;
    /* New musically inclined gradient */
    background: linear-gradient(160deg, #1a1a2e 0%,  #3a204a 100%); /* Dark Blue/Purple to a deeper Purple/Magenta */
}

/* Header and Navigation */
header {
    width: 100%;
    background: linear-gradient(90deg, #2d2d44 0%, #3a204a 100%);
    box-shadow: 0 2px 8px rgba(30,30,40,0.12);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1100;
}

nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 0.7em 2em;
}

.nav-button {
    color: #fff;
    background: transparent;
    border: none;
    font-size: 1.08em;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 7px 18px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    position: relative;
}

.nav-button:hover, .nav-button:focus {
    background: #5c6bc0;
    color: #fff;
    text-decoration: none;
}

#show-login-modal {
    background: #f44336;
    color: #fff;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    padding: 7px 18px;
    margin-left: auto;
    font-size: 1.08em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(244,67,54,0.08);
    transition: background 0.2s;
    position: relative;
    z-index: 101;
}

#show-login-modal:hover {
    background: #d32f2f;
}

/* Styles for TAB feature - moved from incorrect nesting inside 'body' */
.tab-note-entry {
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* Add some space between entries */
}

.tab-input-wrapper {
    display: flex; /* Allows inputs to sit side-by-side when split */
    flex-grow: 1; /* Takes up available space */
    gap: 5px; /* Space between split inputs */
}

.tab-note-input { /* Note: This rule is also defined later, ensure consistency or merge */
    flex-grow: 1; /* Allows input to expand */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

/* Enhanced iOS Safari auto-zoom prevention for tab-note-input fields */
.tab-note-input {
  font-size: 16px !important;
  /* Additional iOS zoom prevention */
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  transform-origin: center !important;
}

/* Specific focus state to maintain zoom prevention */
.tab-note-input:focus {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  zoom: 1 !important;
}

/* iOS-specific focused input styling */
.tab-note-input.ios-input-focused {
  font-size: 16px !important;
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
  transform: scale(1) !important;
  zoom: 1 !important;
}

.tab-note-input.split {
    /* Specific styles for split inputs if needed, e.g., width */
    /* flex-basis: 0; /* Helps with flex-grow distribution */
}

.tab-split-btn {
    padding: 8px 12px;
    margin-left: 8px;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    min-width: 30px; /* Ensure button has some width */
    text-align: center;
}

.tab-split-btn:hover {
    background-color: #d0d0d0;
}

#play-tab-btn {
    /* display: block; Removed to allow flex layout */
    /* width: 100%; Removed to allow flex layout */
    /* margin-top: 10px; /* Handled by .tab-action-buttons container */
    padding: 10px; /* Retaining padding, can be moved to .tab-action-buttons > button */
    background-color: #4CAF50; /* Green */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px; /* Retaining font-size, can be moved to .tab-action-buttons > button */
}

#play-tab-btn:hover {
    background-color: #45a049;
}

/* Hide original input when split inputs are shown */
.tab-note-input[data-original-input="true"][style*="display: none"] + .tab-note-input.split {
    /* Styles if needed when original is hidden and splits are visible */
}

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Use min-height to ensure it covers viewport even if content is short */
    text-align: center;
    flex-direction: column; /* Stack elements vertically */
    padding: 20px; /* Add some padding */
    box-sizing: border-box; /* Include padding in height calculation */
}

/* Styles for the main content container */
.container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center children like h1, and the control blocks */
    width: 100%;         /* It will try to be as wide as .main's content area */
    max-width: 1000px;   /* Max width for the container, making it a centered block */
                         /* .main's 'align-items: center' will center this block. */
    padding-left: 10px;  /* Reduced left padding */
    padding-right: 10px; /* Reduced right padding */
    padding-top: 0;      /* Top/bottom padding can be adjusted if needed */
    padding-bottom: 0;
    background-color: rgba(255, 255, 255, 0.02); /* Very subtle background for the main container */
    box-sizing: border-box;
}

.container > h1 {
    font-size: 60px;
    color: #e0e0e0; /* Slightly lighter color for better contrast */
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Add subtle text shadow */
}

.piano-title {
    position: relative; /* Allow z-index to work */
    margin-bottom: -40px; /* Move text further down into gray section */
    z-index: 2; /* Bring it on top of the piano container */
    color: #e0e0e0; /* Ensure text is visible against the dark piano */
    margin-top: 20px; /* Add space above to prevent overlaying buttons */
}

.piano-container {
    display: flex;
    flex-direction: row;
    overflow-x: auto; /* Allow horizontal scroll on mobile */
    padding: 4em 1em 1em 1em;
    border-radius: 0.62em;
    background-color: #24272e;
    box-shadow: 0 2em 4em rgba(7, 0, 53, 0.35); /* Slightly stronger shadow */
    position: relative;
    margin-top: 20px; /* Add space above the piano */
    width: 100%;
    min-width: 320px;
}

.piano-keys {
    display: flex;
    flex-direction: row;
    gap: 0;
    flex-wrap: nowrap; /* Prevent wrapping */
    width: auto;
    min-width: 320px;
}

.white-key {
    width: 4.37em;
    height: 17.5em;
    background-color: #ffffff;
    border-radius: 0 0 0.3em 0.3em;
    border: 2px solid #24272e;
    box-sizing: border-box;
    cursor: pointer;
    flex-shrink: 0; /* Prevent white keys from shrinking to fit the container */
    transition: background-color 0.1s ease, transform 0.1s ease; /* Add transition */
}

.white-key:hover {
    background-color: #f0f0f0; /* Slightly different hover */
}
.black-key {
    width: 2.5em;
    height: 10em;
    border-radius: 0 0 0.3em 0.3em;
    box-sizing: border-box;
    position: absolute;
    background-color: #070a0f;
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease; /* Add transition */
    z-index: 1; /* Ensure black keys are above white keys */
}
.black-key:hover {
    background-color: #2a2d34; /* Slightly different hover */
}
/* Replace the existing .black-key:nth-child rules with these: */

/* Adjusted black key positions for better alignment */
.black-key:nth-child(1) {
    left: 4.0em;
}
.black-key:nth-child(2) {
    left: 8.37em;
}
.black-key:nth-child(3) {
    left: 17.12em;
}
.black-key:nth-child(4) {
    left: 21.5em;
}
.black-key:nth-child(5) {
    left: 25.87em;
}
/* Skip white key B */
.black-key:nth-child(6) {
    left: 34.62em;
}
.black-key:nth-child(7) {
    left: 39em;
}
/* Skip white key E */
.black-key:nth-child(8) {
    left: 47.75em;
}
.black-key:nth-child(9) {
    left: 52.12em;
}
.black-key:nth-child(10) {
    left: 56.5em;
}


/* Pressed effect for white and black keys */
.white-key.pressed {
    background-color: #d0d0c6 !important; /* Light gray for pressed white key */
    transform: scale(0.97);
}
.black-key.pressed {
    background-color: #444 !important; /* Lighter black for pressed black key */
    transform: scale(0.97);
}

/* Ensure removing .pressed restores original color */
.white-key {
    background-color: #ffffff;
    transition: background-color 0.1s ease, transform 0.1s ease;
}
.black-key {
    background-color: #070a0f;
    transition: background-color 0.1s ease, transform 0.1s ease;
}

/* Style for the Chord Mode Toggle Button */
#chord-mode-toggle {
    background-color: #5c6bc0; /* Indigo color */
    color: white; /* White text */
    font-size: 16px; /* Font size */
    padding: 10px 20px; /* Padding inside the button */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
    margin: 10px 10px 10px 0; /* Margin to separate it from key switchers, keep right margin */
    display: inline-block; /* Inline display for alignment */
    width: auto; /* Adjust width to content */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
}

/* Hover effect */
#chord-mode-toggle:hover {
    background-color: #3f51b5; /* Darker indigo on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Enhance shadow on hover */
}

/* Active (pressed) button effect */
#chord-mode-toggle:active {
    background-color: #303f9f; /* Even darker indigo when pressed */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Reduce shadow when pressed */
}

/* Focus effect */
#chord-mode-toggle:focus {
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.5); /* Add indigo shadow on focus */
}

/* Style for Key Switcher Dropdown */
.key-switcher-container {
    display: flex;
    align-items: center; /* Vertically align label and select */
    gap: 8px; /* Space between label and select */
    /* margin-bottom is handled by .controls-container gap/margin */
}

.key-switcher-container label[for="key-switcher-select"] {
    font-size: 16px; /* Consistent with other labels */
    color: #e0e0e0; /* Light color for text */
}

#key-switcher-select {
    padding: 8px 12px;
    font-size: 14px;
    background-color: #424242; /* Dark grey background */
    color: #ffffff; /* White text */
    border: 1px solid #555555; /* Subtle border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    outline: none; /* Remove default browser outline */
}

#key-switcher-select:hover {
    background-color: #5a5a5a; /* Slightly lighter grey on hover */
    border-color: #777777;
}

#key-switcher-select:focus {
    border-color: #5c6bc0; /* Highlight color matching theme */
    box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.4); /* Focus ring */
}

/* Container to align both elements (Chord Mode and Key Switchers) inline */
.controls-container {
    display: flex;
    justify-content: flex-end; /* Align content to the right */
    align-items: center; /* Ensure the buttons align vertically */
    flex-wrap: wrap; /* Allow wrapping in case the screen size is small */
    gap: 15px; /* Add gap between control groups */
    /* margin-bottom is handled by parent .other-controls-column gap or .controls-row margin */
}

/* Transpose Container */
.transpose-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Align content to the center */
    /* margin: 10px; No need for margin if using gap in parent */
    gap: 10px; /* Space between elements */
    color: #e0e0e0; /* White text for visibility */
}

.transpose-container label {
    font-size: 16px;
    margin-right: 5px;
}

.transpose-btn {
    background-color: #616161; /* Grey background */
    color: #fff; /* White text */
    border: none;
    border-radius: 50%; /* Make buttons circular */
    width: 30px; /* Fixed width */
    height: 30px; /* Fixed height */
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    /* Use flexbox for robust centering of the icon/text */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.transpose-btn:hover {
    background-color: #757575; /* Lighter grey on hover */
}

.transpose-btn:active {
    background-color: #424242; /* Darker grey when pressed */
    transform: scale(0.9); /* Press effect */
}


#transpose-value {
    font-size: 18px;
    font-weight: bold;
    color: #fff; /* Brighter white */
    min-width: 25px; /* Ensure space for multi-digit numbers */
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2); /* Subtle background */
    padding: 2px 8px;
    border-radius: 4px;
}


.key.locked {
    color: rgb(231, 20, 20);
    font-weight: bold;
    /* Maybe add a visual indicator like a border or background */
    /* background-color: rgba(255, 0, 0, 0.1); */
    /* border: 1px solid red !important; */ /* Use !important carefully */
}

/* Sync Controls */
.sync-controls-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Adjusted gap */
    color: #ddd;
    background-color: rgba(0, 0, 0, 0.15); /* Slight background */
    padding: 10px 15px;
    border-radius: 8px;
}

.sync-controls-container label {
    display: flex; /* Align checkbox and text */
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}

.sync-volume-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%; /* Make volume container take full width */
    justify-content: center;
}

.sync-volume-container label {
    font-size: 14px;
    white-space: nowrap; /* Prevent label text wrapping */
}

#syncKeyFinderToggle {
    transform: scale(1.2); /* Slightly larger checkbox */
    margin-right: 8px; /* Add spacing between toggle and text */
    cursor: pointer;
    accent-color: #5c6bc0; /* Match toggle color theme */
}

#syncKeyVolumeControl {
    width: 120px; /* Slightly wider */
    height: 8px;
    background: #555; /* Darker track */
    border-radius: 5px;
    cursor: pointer;
    appearance: none; /* Override default look */
    outline: none;
}

/* Style the thumb (the draggable part) */
#syncKeyVolumeControl::-webkit-slider-thumb {
    appearance: none;
    width: 18px; /* Larger thumb */
    height: 18px;
    border-radius: 50%;
    background: #5c6bc0; /* Match toggle color theme */
    cursor: pointer;
    border: 2px solid #fff; /* Add a white border */
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

#syncKeyVolumeControl::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #5c6bc0;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

/* Container for the two control columns */
.controls-row {
    display: flex;
    flex-wrap: wrap; /* Allow columns to stack on smaller screens */
    justify-content: space-between; /* Space out the two columns */
    width: 100%; /* Take full width of the .container */
    gap: 20px; /* Add space between columns when in a row, and between stacked items in column */
    margin-bottom: 20px; /* Space below the control row */
}

/* Styles for the left column (TAB Feature) */
.tab-column {
    display: flex; /* Use flex to align content within the column */
    flex-direction: column;
    align-items: flex-start; /* Align .tab-feature-container to the left */
    width: calc(50% - 10px); /* Take roughly half the width, accounting for gap */
    /* On small screens, this will become 100% */
}

/* Styles for the right column (Other Controls) */
.other-controls-column {
    display: flex; /* Use flex to align content within the column */
    flex-direction: column;
    align-items: flex-end; /* Align .transpose-container and .controls-container to the right */
    width: calc(50% - 10px); /* Take roughly half the width, accounting for gap */
    gap: 15px; /* Add gap between transpose and controls container */
    /* On small screens, this will become 100% */
}

/* Ensure the individual control containers fill the width of their column */
.transpose-container,
.controls-container {
    width: 100%;
}

/* TAB Feature Section Styles */
.tab-feature-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Space between elements within the TAB feature */
    /* margin-top and margin-bottom removed to rely on parent flex gaps */
    padding: 15px;
    background-color: rgba(30, 30, 40, 0.5); /* Slightly transparent dark background */
    border-radius: 8px;
    width: 90%; /* Max width to keep it contained */
    max-width: 400px; /* Adjusted max-width to fit better in a column */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* --- TAB Heading --- */
.tab-feature-container h2,
.tab-heading {
    font-size: 1.5em;
    color: #e0e0e0;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-shadow: 1px 1px 6px #3a204a;
    background: linear-gradient(90deg, #2d2d44 0%, #3a204a 100%);
    border-radius: 6px;
    padding: 8px 0;
    width: 100%;
    text-align: center;
}

/* Container for Play and Reset TAB buttons */
.tab-action-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.tab-action-buttons > button,
.tab-actions > button {
    flex: 1 1 0;
    min-width: 90px;
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

/* --- Options Panel --- */
.options-panel,
.controls-container,
.transpose-container,
.key-switcher-container,
.sync-controls-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 250px;
    margin: 0 auto;
    align-items: stretch;
    width: 100%;
}

/* --- Piano Keyboard --- */
.piano-container {
    display: flex;
    flex-direction: row;
    overflow-x: auto; /* Allow horizontal scroll on mobile */
    padding: 4em 1em 1em 1em;
    border-radius: 0.62em;
    background-color: #24272e;
    box-shadow: 0 2em 4em rgba(7, 0, 53, 0.35); /* Slightly stronger shadow */
    position: relative;
    margin-top: 20px; /* Add space above the piano */
    width: 100%;
    min-width: 320px;
}

.piano-keys {
    display: flex;
    flex-direction: row;
    gap: 0;
    flex-wrap: nowrap; /* Prevent wrapping */
    width: auto;
    min-width: 320px;
}

.white-key,
.black-key {
    flex-shrink: 0; /* Prevent keys from shrinking */
}

/* --- Responsive Rules: Force Desktop Layout on Mobile --- */
@media screen and (max-width: 1200px),
       screen and (max-width: 992px),
       screen and (max-width: 768px),
       screen and (max-width: 576px),
       (max-width: 480px) {
    .tab-note-inputs,
    .tab-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-rows: repeat(4, auto) !important;
        gap: 10px !important;
    }
    .tab-action-buttons,
    .tab-actions {
        flex-direction: row !important;
        gap: 10px !important;
    }
    .options-panel,
    .controls-container,
    .transpose-container,
    .key-switcher-container,
    .sync-controls-container {
        flex-direction: column !important;
        gap: 12px !important;
        max-width: 250px !important;
        align-items: stretch !important;
    }
    .piano-container {
        flex-direction: row !important;
        overflow-x: auto !important;
        min-width: 320px !important;
    }
    .piano-keys {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        min-width: 320px !important;
    }
}

/* Remove any rules that collapse grids or stack buttons vertically on mobile */

#delete-tab-btn {
    background-color: #806409;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    margin: 0 8px;
    transition: background 0.2s;
}
#delete-tab-btn:hover {
    background-color: #e78f0a;
}

/* Login Modal Overlay */
#login-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(30, 30, 40, 0.85);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    transition: background 0.3s;
}

/* Center modal content using flex */
#login-modal.show {
    display: flex;
}

/* Login Modal Content */
#login-modal > div {
    background: linear-gradient(135deg, #2d2d44 0%, #3a204a 100%);
    margin: 0 auto;
    padding: 2.5em 2em 2em 2em;
    border-radius: 16px;
    width: 340px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: modalFadeIn 0.4s;
}

/* Login / Signup Heading */
#login-modal h2 {
    color: #222;
    font-size: 1.3em;
    margin-bottom: 16px;
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: none;
    font-weight: 600;
}

/* Email Button */
#email-login-btn {
    background: #5c6bc0;
    color: #fff;
    font-weight: 500;
    width: auto;
    min-width: 180px;
    padding: 10px 18px;
    margin: 0 auto 10px auto;
    display: block;
    border-radius: 6px;
    font-size: 15px;
    text-align: center;
}

/* Google Button (keep full width for visibility) */
#google-login-btn {
    background: #4285F4;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.5px;
    width: 100%;
    margin-bottom: 10px;
}

/* Close Button */
#close-login-modal {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #f44336;
    color: #fff;
    font-size: 1.1em;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: background 0.2s, color 0.2s;
}

#close-login-modal:hover {
    background: #d32f2f;
    color: #fff;
}

#login-error {
    color: #f44336;
    margin-top: 6px;
    font-size: 14px;
    text-align: center;
    min-height: 18px;
}

/* Common modal overlay style */
#save-tab-modal, #import-tab-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(30, 30, 40, 0.85);
    z-index: 1001;
    justify-content: center;
    align-items: center;
}

/* Center modal content using flex */
#save-tab-modal.show, #import-tab-modal.show {
    display: flex;
}

/* Modal content box */
#save-tab-modal > div, #import-tab-modal > div {
    background: linear-gradient(135deg, #2d2d44 0%, #3a204a 100%);
    margin: 0 auto;
    padding: 2em 2em 2em 2em;
    border-radius: 16px;
    width: 340px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: modalFadeIn 0.4s;
}

#save-tab-modal h2, #import-tab-modal h2 {
    color: #222;
    font-size: 1.2em;
    margin-bottom: 16px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: #fff;
    border-radius: 6px;
    padding: 6px 0;
    width: 100%;
}

#tab-save-name, #save-tab-modal input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    border: 1px solid #7986cb;
    background: #23233a;
    color: #e0e0e0;
    font-size: 15px;
    transition: border-color 0.2s;
}

#tab-save-name:focus {
    border-color: #c5cae9;
    outline: none;
}

#confirm-save-tab {
    background: #5c6bc0;
    color: #fff;
    font-weight: 500;
    width: 100%;
    padding: 10px 0;
    border-radius: 6px;
    font-size: 15px;
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
    transition: background 0.2s;
}

#confirm-save-tab:hover {
    background: #3f51b5;
}

#close-save-tab-modal, #close-import-tab-modal {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #f44336;
    color: #fff;
    font-size: 1.1em;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: background 0.2s, color 0.2s;
}

#close-save-tab-modal:hover, #close-import-tab-modal:hover {
    background: #d32f2f;
    color: #fff;
}

#save-tab-error, #import-tab-error {
    color: #f44336;
    margin-top: 6px;
    font-size: 14px;
    text-align: center;
    min-height: 18px;
}

/* Import list styling */
#tab-import-list {
    list-style: none;
    padding: 0;
    margin-bottom: 12px;
    width: 100%;
}

#tab-import-list li {
    background: #23233a;
    color: #e0e0e0;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 15px;
    text-align: left;
}

#tab-import-list li:hover {
    background: #5c6bc0;
    color: #fff;
}

/* --- TAB Input Grid --- */
.tab-note-inputs,
.tab-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Always 4 columns */
    grid-template-rows: repeat(4, auto);   /* 4 rows */
    gap: 10px;
    justify-items: center;
    align-items: center;
    margin-top: 10px;
    width: 100%;
    padding: 10px 0;
}

/* TAB Inputs */
.tab-note-input {
    width: 60px;
    padding: 10px;
    font-size: 15px;
    text-align: center;
    border-radius: 6px;
    border: 1.5px solid #5c6bc0;
    background: #23233a;
    color: #e0e0e0;
    box-shadow: 0 2px 8px rgba(92,107,192,0.08);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.tab-note-input:focus {
    border-color: #43a047;
    box-shadow: 0 0 0 2px rgba(67,160,71,0.2);
    outline: none;
}

/* --- Transpose Buttons --- */
.transpose-btn {
    background-color: #5c6bc0;
    color: #fff;
    border: none;
    border-radius: 6px;
    width: 48px;
    height: 38px;
    font-size: 22px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(92,107,192,0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 4px;
    font-weight: 600;
}
.transpose-btn:hover {
    background-color: #3f51b5;
    transform: scale(1.05);
}
.transpose-btn:active {
    background-color: #43a047;
    transform: scale(0.97);
}

/* --- Transpose Value --- */
#transpose-value {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    min-width: 32px;
    text-align: center;
    background-color: #23233a;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1.5px solid #5c6bc0;
    margin: 0 4px;
}

/* --- Beat On/Off Button --- */
#beat-toggle-btn {
    background: #5c6bc0;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(92,107,192,0.08);
    transition: background 0.2s, box-shadow 0.2s;
    letter-spacing: 0.5px;
}
#beat-toggle-btn.active {
    background: #43a047;
}
#beat-toggle-btn:hover {
    background: #3f51b5;
}

/* --- Beat Track Selection --- */
#beat-track-select {
    background: #23233a;
    color: #fff;
    border: 1.5px solid #5c6bc0;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 1em;
    margin-bottom: 10px;
    width: 100%;
    max-width: 220px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.beat-track-select-container label {
    color: #fff;
}
#beat-track-select:focus {
    border-color: #43a047;
    outline: none;
}
#beat-track-select:hover {
    background: #35355a;
}

/* Piano key mobile optimizations */
@media screen and (max-width: 768px) {
    .piano-container {
        padding: 1em 0.5em 1em 0.5em;
        transform: scale(0.8);
        transform-origin: center top;
        margin-top: 10px;
        margin-bottom: -50px;
        overflow-x: auto;
        /* Mobile-specific piano optimizations */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }
    
    .piano-keys {
        /* Improve touch scrolling on mobile */
        will-change: transform;
        contain: layout style paint;
        scroll-snap-align: start;
    }
    
    /* Enhanced mobile piano keys */
    .key {
        /* Better touch response */
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2) !important;
        tap-highlight-color: rgba(255, 255, 255, 0.2) !important;
        
        /* Smoother transitions for touch */
        transition: all 0.15s ease !important;
        
        /* Prevent text selection during touch */
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
        
        /* Optimize for touch performance */
        will-change: transform, background-color !important;
        contain: layout style paint !important;
        
        /* Minimum touch target size - accessibility guideline */
        min-height: 48px !important;
        min-width: 35px !important;
        
        /* Touch feedback */
        cursor: pointer !important;
        transform-style: preserve-3d !important;
    }
    
    /* Enhanced touch feedback for white keys */
    .white-key {
        min-width: 35px !important;
        height: 140px !important;
        /* Touch-specific shadow for depth */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 
                    0 0 0 1px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Enhanced touch feedback for black keys */
    .black-key {
        min-width: 25px !important;
        height: 90px !important;
        /* Slightly larger touch area */
        padding: 2px !important;
        /* Touch-specific shadow */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
                    inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Active/pressed state optimizations */
    .key.pressed,
    .key:active {
        transform: translateY(2px) scale(0.98) !important;
        filter: brightness(0.9) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }
    
    .white-key.pressed,
    .white-key:active {
        background: linear-gradient(to bottom, #f0f0f0 0%, #e0e0e0 100%) !important;
    }
    
    .black-key.pressed,
    .black-key:active {
        background: linear-gradient(to bottom, #1a1a1a 0%, #000000 100%) !important;
    }
    
    /* Hover effects for devices that support them */
    @media (hover: hover) {
        .key:hover {
            transform: translateY(-1px) !important;
            filter: brightness(1.05) !important;
        }
    }
    
    .piano-title {
        font-size: 1.8em;
        margin-bottom: -20px; /* Move text down into gray section */
        text-align: center;
        margin-top: 15px; /* Add space above */
    }
    
    .container {
        padding: 1em 0.5em;
        min-height: auto;
    }
    
    .container > h1 {
        font-size: 32px;
        margin-bottom: 15px;
        text-align: center;
    }
    
    button {
        min-height: 48px; /* Better touch target size */
        padding: 12px 20px;
        font-size: 16px;
        margin: 8px 4px;
        border-radius: 8px;
        /* Touch optimizations */
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    /* Touch-friendly controls */
    .controls-container {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 15px !important;
        /* Better spacing for touch */
        margin: 20px 0 !important;
    }
    
    .options-panel {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        /* Touch-friendly spacing */
        padding: 20px !important;
    }
    
    /* Mobile navigation */
    header {
        padding: 10px 15px !important;
        /* Touch-optimized header */
        min-height: 60px !important;
    }
    
    nav ul {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    nav li {
        width: 100% !important;
        text-align: center !important;
        /* Better touch targets */
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Touch feedback for all interactive elements */
    button:active,
    .btn:active,
    .key:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease !important;
    }
}

@media screen and (max-width: 480px) {
    .piano-container {
        transform: scale(0.65);
        margin-bottom: -80px;
        padding: 0.5em 0.25em;
    }
    
    .piano-title {
        font-size: 1.5em;
        margin-bottom: -15px; /* Move text down into gray section */
        margin-top: 10px; /* Add space above */
    }
    
    .container {
        padding: 0.75em 0.25em;
    }
    
    .container > h1 {
        font-size: 24px;
        margin-bottom: 10px;
    }
    
    button {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 14px;
        margin: 6px 2px;
    }
    
    /* Smaller piano keys for very small screens */
    .white-key {
        min-width: 28px !important;
        height: 120px !important;
    }
    
    .black-key {
        min-width: 20px !important;
        height: 75px !important;
    }
    
    /* Stack controls vertically on small screens */
    .tab-note-inputs,
    .tab-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .feedback-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .comment-room-content {
        flex-direction: column !important;
        gap: 20px !important;
    }
}

/* Comment Room Section */
.comment-room-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 50%, #3a204a 100%);
    padding: 40px 20px;
    margin-top: 40px;
}

.comment-room-container {
    margin: 0 auto;
    max-width: 1200px;
}

.comment-room-header {
    text-align: center;
    margin-bottom: 40px;
}

.comment-room-title {
    color: #ffffff !important;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
}

.comment-room-subtitle {
    color: #ffffff !important;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
}

.comment-room-content {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* Main comment content (70%) */
.comment-main-column {
    flex: 0 0 70%;
}

.comment-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Like button container */
.like-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 25px;
}

/* Comments section */
.comment-section {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 400px;
}

/* Vertical Divider */
.comment-divider {
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
    margin: 0 15px;
}

/* Ad space sidebar (30%) */
.ad-space-column {
    flex: 0 0 30%;
}

.ad-space-card {
    background: linear-gradient(135deg, rgba(60, 60, 80, 0.6) 0%, rgba(80, 50, 100, 0.6) 100%);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 400px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ad-space-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

.ad-space-content h3 {
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
}

.ad-space-content p {
    color: #ffffff !important;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    opacity: 0.8;
}

.ad-placeholder {
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.05);
}

.ad-placeholder span {
    color: #ffffff !important;
    font-size: 12px;
    opacity: 0.6;
    font-weight: 500;
}

/* Facebook Widget Styling */
.fb-like, .fb-like * {
    color: initial !important;
    background-color: initial !important;
}

.fb-comments, .fb-comments * {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* Additional Facebook widget text overrides */
.fb-like span, 
.fb-like a, 
.fb-like div {
    color: initial !important;
    background-color: initial !important;
}

.fb-comments span, 
.fb-comments a, 
.fb-comments div, 
.fb-comments textarea {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* Force Facebook iframe content styling */
.fb-like iframe {
    filter: none !important;
    background-color: initial !important;
}

.fb-comments iframe {
    background-color: #ffffff !important;
    filter: none !important;
}

/* Legacy styles for backward compatibility */
.comment-room {
    margin: 40px auto;
    max-width: 1200px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(45, 45, 68, 0.95) 0%, rgba(58, 32, 74, 0.95) 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(7, 0, 53, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.comment-room h2 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
}

/* Main comment content (70%) */
.comment-main {
    flex: 0 0 70%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Comments section */
.comments-section {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 400px;
}

.comments-section h3 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 0.5px;
}

/* Ad space sidebar (30%) */
.ad-space {
    flex: 0 0 30%;
    background: linear-gradient(135deg, rgba(60, 60, 80, 0.6) 0%, rgba(80, 50, 100, 0.6) 100%);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ad-space h3 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
    opacity: 0.9;
}

.ad-space p {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.8;
}

/* Responsive breakpoints */
@media screen and (max-width: 992px) {
    .comment-room-content {
        flex-direction: column;
        gap: 25px;
    }
    
    .comment-main-column,
    .ad-space-column {
        flex: none;
        width: 100%;
    }
    
    .ad-space-column {
        order: 2;
    }
    
    .comment-main-column {
        order: 1;
    }
    
    .ad-space-card {
        min-height: 200px;
    }
}

@media screen and (max-width: 768px) {
    .comment-room-section {
        padding: 20px 10px;
        margin-top: 20px;
    }
    
    .comment-room-title {
        font-size: 24px;
        margin-bottom: 10px;
    }
    
    .comment-room-subtitle {
        font-size: 14px;
    }
    
    .comment-card,
    .ad-space-content {
        padding: 20px;
    }
    
    .comment-section {
        min-height: 300px;
    }
    
    .ad-space-card {
        min-height: 150px;
    }
    
    .ad-space-content h3 {
        font-size: 16px;
    }
    
    .ad-space-content p {
        font-size: 13px;
    }
}

@media screen and (max-width: 480px) {
    .comment-room-section {
        padding: 15px 5px;
        margin-top: 15px;
    }
    
    .comment-room-title {
        font-size: 20px;
        margin-bottom: 8px;
    }
    
    .comment-room-subtitle {
        font-size: 13px;
    }
    
    .comment-card,
    .ad-space-content {
        padding: 15px;
    }
    
    .comment-section {
        min-height: 250px;
    }
    
    .ad-space-card {
        min-height: 120px;
    }
    
    .comment-room-content {
        gap: 15px;
    }
}

/* Feedback Section Styles */
.feedback-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 50%, #3a204a 100%);
    padding: 40px 20px;
    margin: 30px 0;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(7, 0, 53, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.feedback-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.feedback-title {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

.feedback-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
}

.feedback-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 25px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.feedback-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff !important;
}

.feedback-btn:active {
    transform: translateY(0) scale(1.02);
}

.feedback-btn.clicked {
    background: rgba(76, 175, 80, 0.3);
    border-color: rgba(76, 175, 80, 0.6);
    cursor: not-allowed;
    color: #ffffff !important;
}

.feedback-btn.clicked:hover {
    transform: none;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    color: #ffffff !important;
}

.like-btn.clicked {
    background: rgba(76, 175, 80, 0.3);
    border-color: rgba(76, 175, 80, 0.6);
    color: #ffffff !important;
}

.dislike-btn.clicked {
    background: rgba(244, 67, 54, 0.3);
    border-color: rgba(244, 67, 54, 0.6);
    color: #ffffff !important;
}

.feedback-btn .emoji {
    font-size: 24px;
    color: #ffffff !important;
    filter: grayscale(100%) brightness(0) invert(1);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: bold;
}

.feedback-btn .count {
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    min-width: 30px;
    text-align: center;
    color: #ffffff !important;
}

.feedback-message {
    display: none; /* Hide feedback messages completely */
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin: 0;
    min-height: 20px;
    transition: all 0.3s ease;
}

.feedback-message.show {
    display: none; /* Keep hidden even when 'show' class is applied */
    color: rgba(76, 175, 80, 0.9);
    font-weight: 500;
}

/* Loading state */
.feedback-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.feedback-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .feedback-section {
        padding: 30px 15px;
        margin: 20px 0;
    }
    
    .feedback-title {
        font-size: 20px;
        margin-bottom: 25px;
    }
    
    .feedback-buttons {
        gap: 20px;
    }
    
    .feedback-btn {
        padding: 12px 20px;
        font-size: 16px;
        min-width: 100px;
    }
    
    .feedback-btn .emoji {
        font-size: 20px;
    }
    
    .feedback-btn .count {
        font-size: 18px;
    }
}

@media screen and (max-width: 480px) {
    .feedback-section {
        padding: 25px 10px;
        margin: 15px 0;
    }
    
    .feedback-title {
        font-size: 18px;
        margin-bottom: 20px;
    }
    
    .feedback-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .feedback-btn {
        padding: 10px 18px;
        font-size: 15px;
        min-width: 140px;
    }
    
    .feedback-btn .emoji {
        font-size: 18px;
    }
    
    .feedback-btn .count {
        font-size: 16px;
    }
}

/* Mobile Facebook Comments Optimization */
@media screen and (max-width: 768px) {
    /* Ensure Facebook comments work properly on mobile */
    .fb-comments, .fb-comments iframe {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 400px !important;
        touch-action: auto !important;
        -webkit-touch-callout: default !important;
        -webkit-user-select: auto !important;
        user-select: auto !important;
    }
    
    /* Prevent our touch handlers from interfering with Facebook login */
    .fb-comments *, .fb_dialog *, [data-href*="facebook"] * {
        touch-action: auto !important;
        -webkit-touch-callout: default !important;
        -webkit-user-select: auto !important;
        user-select: auto !important;
        pointer-events: auto !important;
    }
    
    /* Ensure Facebook login popups display properly */
    .fb_dialog {
        z-index: 10000 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.8) !important;
    }
    
    .fb_dialog_content {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 90% !important;
        max-height: 90% !important;
        overflow: auto !important;
    }
}