body { font-family: 'Inter', sans-serif; }
#canvas-container { position: relative; width: 100%; height: 100%; touch-action: none; cursor: pointer; overflow: hidden; } /* Added overflow: hidden */
#canvas { display: block; width: 100%; height: 100%; }
#loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; justify-content: center; align-items: center; z-index: 10; }
#setup-output { background-color: #1f2937; color: #d1d5db; font-family: monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
#shape-controls { display: flex; overflow-x: auto; padding-bottom: 10px; gap: 12px; }
#shape-controls::-webkit-scrollbar { display: none; }
#shape-controls { -ms-overflow-style: none; scrollbar-width: none; }
.shape-btn { border: none; padding: 3px; border-radius: 8px; transition: all 0.2s ease; background-color: #fff; flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.shape-btn:hover { background-color: #f3f4f6; }
.shape-btn.selected { border-bottom: 3px solid #4f46e5; border-radius: 8px 8px 6px 6px; }
.shape-btn img { max-width: 100%; max-height: 100%; pointer-events: none; }
.custom-slider-container { position: relative; padding: 10px 0; margin-top: 10px; }
.custom-slider { -webkit-appearance: none; width: 100%; height: 6px; background: #e5e7eb; border-radius: 3px; outline: none; }
.custom-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #4f46e5; border-radius: 50%; cursor: pointer; border: 3px solid white; box-shadow: 0 0 5px rgba(0,0,0,0.2); margin-top: -7px; }
.custom-slider::-moz-range-thumb { width: 20px; height: 20px; background: #4f46e5; border-radius: 50%; cursor: pointer; border: 3px solid white; box-shadow: 0 0 5px rgba(0,0,0,0.2); }
.slider-ticks { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 5px; }
.slider-ticks span { font-size: 10px; color: #6b7280; }
.carat-tooltip { position: absolute; bottom: 61px; transform: translateX(-50%); background-color: #374151; color: white; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; transition: left 0.1s ease-out; }
.carat-tooltip::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #374151; }
.edit-mode-btn { transition: all 0.2s ease; color: #181818 !important;}
.edit-mode-btn.active { background-color: #1C3455 !important; color: #ffffff !important; font-weight: 600; }
button#save-coords-btn {
    background: #1C3455 !important;
}
button#copy-coords-btn {
    background: #1C3455 !important;
}

utton#setup-select-pinky {
    color: black !important;
}
utton#setup-select-ring {
    color: black !important;
}
utton#setup-select-middle {
    color: black !important;
}
utton#setup-select-index {
    color: black !important;
}

.ij-try-on-button {
    padding: 8px 15px !important;
    max-width: 83px !important;
    margin-bottom: 7px !important;
    text-align: center;
    background-color: #1C3455 !important;
}

/* FINGER BUTTONS */
.finger-select-btn { transition: all 0.2s ease; color: black !important; }
.finger-select-btn:hover { background-color: #d1d5db; }
.finger-select-btn.active { background-color: #1C3455 !important; color: #ffffff !important; font-weight: 600; }

.hidden { display: none !important; }

/* --- Mobile Responsive Controls (Screen width < 767px) --- */
@media (max-width: 767px) {
    #shape-controls { gap: 8px; }
    .shape-btn { width: 38px; height: 38px; }
    .custom-slider-container { padding: 5px 0; margin-top: 5px; }
    .custom-slider::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; }
    .custom-slider::-moz-range-thumb { width: 18px; height: 18px; }
    .slider-ticks span { font-size: 9px; }
    #slider-ticks span { display: inline; } /* Show all ticks on mobile again */
    .carat-tooltip { bottom: 52px; }
    #skin-tone-ticks span { display: inline; }
}

/* --- Desktop Carat Ticks --- */
@media (min-width: 768px) {
    #slider-ticks span { display: inline; }
}

/* --- ZOOM BUTTONS --- */
/* Desktop */
.ij-zoom-btn {
    width: 30px; height: 30px; background-color: #f3f4f6; border: 1px solid #e5e7eb;
    color: #374151; font-size: 20px; font-weight: 600; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;
}
.ij-zoom-btn:hover { background-color: #e5e7eb; }

/* Mobile Container */
#mobile-zoom-controls {
    position: absolute; bottom: 10px; right: 10px; z-index: 15; /* Increased z-index */
    display: flex; flex-direction: column; align-items: center; /* Center items */ gap: 5px; /* Reduced gap */
    background-color: rgba(255, 255, 255, 0.7); /* Slight background */
    padding: 8px 6px; /* Padding around controls */
    border-radius: 20px; /* Rounded container */
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
/* Mobile Buttons */
.ij-zoom-btn-mobile {
    width: 36px; height: 36px; /* Slightly smaller */ background-color: #fff; /* Solid white */
    border: none; color: #374151; font-size: 22px; font-weight: 600; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Softer shadow */ transition: all 0.2s ease;
    /* Ensure buttons stay visible */
    opacity: 1 !important; visibility: visible !important;
}
.ij-zoom-btn-mobile:hover { background-color: #f9fafb; }

/* Mobile Zoom Percentage Display */
.ij-zoom-percentage {
    font-size: 11px; color: #4b5563; /* Darker gray */ font-weight: 600;
    background-color: transparent; /* Match container */ padding: 0 4px;
    border-radius: 4px; line-height: 1; /* Adjust line height */
    /* Ensure text stays visible */
    opacity: 1 !important; visibility: visible !important; pointer-events: none; /* Prevent interaction */
}
@media (min-width: 1024px) {
  h3.text-sm.font-bold.text-gray-800.mb-2.tracking-wider.uppercase {
    margin-bottom: 12px;
  }
}

@media (min-width: 768px) {
h2.text-xl.md\:text-2xl.font-bold.text-gray-800.mb-2.md\:mb-8 {
        margin-bottom: 18px !important;
}
}

@media (min-width: 1024px) {
  h3.text-sm.font-bold.text-gray-800.mb-2.tracking-wider.uppercase {
    font-size: 14px;
    font-weight: bold;
  }
}

/* Find this rule in visualizer.css */
.carat-tooltip {
    position: absolute;
    bottom: 61px;
    transform: translateX(-50%); /* Keep this standard centering */
    background-color: #374151;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    transition: left 0.1s ease-out, right 0.1s ease-out; /* Added right transition */
    direction: ltr; /* <<< --- ADD THIS LINE --- */
}
/* --- END ZOOM STYLES --- */