* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    user-select: none;
    /* Applied globally */
}

/* ==============================================
   GLOBAL SCROLLBAR STYLING (All Pages)
   ============================================== */
/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: #2a2a2a #1a1a1a; /* var(--bg-tertiary) var(--bg-modal) */
}

/* Webkit (Chrome/Safari/Edge) scrollbar styling */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: #1a1a1a; /* var(--bg-modal) */
}

*::-webkit-scrollbar-thumb {
    background-color: #2a2a2a; /* var(--bg-tertiary) */
    border-radius: 4px;
    border: 2px solid #1a1a1a; /* var(--bg-modal) */
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #3a3a3a;
}

/* Allow pull-to-refresh on mobile browsers */
html {
    overscroll-behavior: auto;
    overscroll-behavior-y: auto;
}

body {
    overflow: visible;
    /* Changed from hidden to visible for iOS Safari scrolling compatibility */
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #1a1a1a;
    overscroll-behavior: auto;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    /* iOS Safari specific fixes */
    min-height: -webkit-fill-available;
    position: relative;
}

main.page-content {
    display: flex;
    flex-direction: column;
    /* To stack its children, like #skills-view */
    flex-grow: 1;
    /* To take available space from the body flex container */
    width: 100%;
    /* Ensure it takes full width */
    height: 100%;
    /* Ensure it takes full height within the body */
    overflow: hidden;
    /* Prevent content from spilling out, good for main app areas */
    position: relative;
    /* Establishes a stacking context, might be useful later */
    overscroll-behavior: auto;
    overscroll-behavior-y: auto;
}

/* --- Buttons (Shared Styles) --- */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 1000px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #F6EAE7;
    background-color: #7f8c8d;
    /* Default grey */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
    user-select: none;
    vertical-align: middle;
    line-height: 1.5;
}

.btn-confirm {
    background-color: #2980b9;
}

.btn:hover {
    filter: brightness(110%);
    transform: translateY(-1px);
}

.btn:active {
    filter: brightness(95%);
    transform: translateY(0px);
}

.btn:disabled,
.btn.disabled {
    background-color: #95a5a6;
    border-color: #95a5a6;
    color: #bdc3c7;
    cursor: not-allowed;
    transform: none;
    filter: none;
    opacity: 0.65;
}

/* Button Color Modifiers */
.btn-primary {
    background-color: #3498db;
    border-color: #3498db;
    color: white;
}

/* Used in auth.html */
.btn-primary:hover:not(:disabled):not(.disabled) {
    background-color: #2980b9;
    border-color: #2980b9;
}

.btn-success {
    background-color: #3498db;
    border-color: #3498db;
    color: #F6EAE7;
}

/* Used in locationModal.js, workoutPrefsModal */
.btn-success:hover:not(:disabled):not(.disabled) {
    background-color: #3498db;
    border-color: #3498db;
}

.btn-danger {
    background-color: #e74c3c;
    border-color: #e74c3c;
    color: #F6EAE7;
}

/* Used in profileUtils.js (delete confirm) */
.btn-danger:hover:not(:disabled):not(.disabled) {
    background-color: #c0392b;
    border-color: #c0392b;
}

.btn-info {
    background-color: #1abc9c;
    border-color: #3498db;
    color: white;
}

/* Used for #generate-workout-btn, common machines button state */
.btn-info:hover:not(:disabled):not(.disabled) {
    background-color: #3498db;
    border-color: #3498db;
}

.btn-secondary {
    background-color: #7f8c8d;
    border-color: #7f8c8d;
    color: white;
}

/* Used in profile menu, common machines button state */
.btn-secondary:hover:not(:disabled):not(.disabled) {
    background-color: #95a5a6;
    border-color: #95a5a6;
}

.btn-outline-secondary {
    background-color: transparent;
    border-color: #7f8c8d;
    color: #bdc3c7;
}

/* Used in locationModal.js (category buttons) */
.btn-outline-secondary:hover:not(:disabled):not(.disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #95a5a6;
    color: white;
}

.btn-outline-secondary.active {
    background-color: #3498db;
    border-color: #3498db;
    color: white;
}

/* Added/removed in locationModal.js */
.btn-stepper {
    background-color: #F6EAE7;
    border-color: #000000;
    color: rgb(0, 0, 0);
    font-size: 24px;
    width: 36px;
    height: 36px;
    padding: 0;
    line-height: 36px;
    border-radius: 4px;
    align-items: center;
    display: flex;
    justify-content: center;
}

/* Used in workoutPrefsModal */
/* Button Size Modifiers */
/* .btn-sm (Not found referenced in provided JS/HTML for styles.css) */
/* Button Layout Modifiers */
.btn-block {
    display: block;
    width: 100%;
}

/* Used in auth.html, locationModal.js */
/* --- Main Skill Tree View (#skills-view) --- */
#skills-view {
    flex-grow: 1;
    width: 100%;
    display: flex;
    /* Changed by navigation.js */
    flex-direction: column;
}

/* --- Left Side Category Indicator --- */
/* side-circle removed - functionality transferred to fab-icon-container */

.curved-text span {
    display: block;
    height: 1em;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1.5);
    transform: translateX(0px);
    /* Modified by skillWheel.js */
    /* Opacity/animation handled by JS/keyframes */
    /* Ensure child spans are visible by default if parent is */
    opacity: 1;
    /* Explicitly set span opacity to 1 */
}

/* Category text container GPU acceleration */
#category-text {
    /* GPU acceleration for smooth animations */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* will-change set dynamically during animations */
}

/* Optimize letter animations for GPU */
#category-text span {
    /* Force GPU acceleration on each letter */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* will-change set dynamically during animations */
}

/* Fade classes for curved text (added/removed by skillWheel.js) */
.fade-out {
    opacity: 0;
    transform: translateY(-50%) translateX(-12px);
}

.fade-in {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

@keyframes letter-appear {
    from {
        opacity: 0;
        /* Start transparent */
        transform: translate3d(12px, 0, 0);
        -webkit-transform: translate3d(12px, 0, 0);
    }

    to {
        opacity: 1;
        /* Fade in */
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
}

/* Skill Selection Dots */
#skill-selection-dots {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 24px 12px 12px 12px;
    /* Aligned with burger and badge */
    margin-bottom: 24px;
    height: 36px;
    /* Fixed height to prevent layout shift */
    /* Safe area support for iPhone notch/Dynamic Island */
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
}

.skill-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #D9D9D930;
    transition: background-color 0.3s ease;
    margin-top: 16px;
    z-index: 200;
}

.skill-dot.selected {
    background-color: var(--dot-color);
}

/* Shake animation for skill dots */
@keyframes shake-dots {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

#skill-selection-dots.shake {
    animation: shake-dots 0.3s ease-in-out;
}

/* Category Navigation Scroll Bar */
.category-scrollbar-container {
    position: fixed;
    right: 0;
    width: 8px;
    z-index: 1000;
    /* Always allow pointer events so hover works even when hidden */
    pointer-events: auto;
    /* Safe area support for iPhone notch/Dynamic Island */
    right: calc(0px + env(safe-area-inset-right, 0px));
    /* Align with skill-wheel-container - will be set dynamically by JavaScript */
    top: var(--container-top, 0px);
    height: var(--container-height, 100vh);
    /* Use only opacity for hiding - visibility:hidden prevents hover detection */
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.category-scrollbar-container.visible {
    opacity: 1;
}

/* Show scrollbar on hover (desktop only) */
.category-scrollbar-container:hover {
    opacity: 1;
}

.category-scrollbar {
    position: relative;
    width: 4px;
    height: 100%;
    background-color: rgba(62, 62, 62, 0.3);
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    margin-left: auto;
}

.category-scrollbar:hover {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

/* Fade gradients at top and bottom */
.category-scrollbar::before,
.category-scrollbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    pointer-events: none;
    z-index: 1;
}

.category-scrollbar::before {
    top: 0;
    background: linear-gradient(to bottom, #1a1a1a 0%, transparent 100%);
}

.category-scrollbar::after {
    bottom: 0;
    background: linear-gradient(to top, #1a1a1a 0%, transparent 100%);
}

/* Moving scroll indicator with dynamic colors */
.category-scrollbar-indicator {
    position: absolute;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: var(--indicator-color, #3e3e3e);
    border-radius: 1000px;
    top: 0;
    transform: translateY(0);
    transition: background-color 0.2s ease-out;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    /* will-change set dynamically during animations */
}

/* Floating Banner */
.category-floating-banner {
    position: absolute;
    right: 20px;
    background-color: transparent;
    color: #b3b2b1B3;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
    z-index: 1001;
}

.category-floating-banner.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(-8px);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .category-scrollbar-container {
        width: 6px;
        /* Slightly wider on mobile for better touch targets */
    }

    .category-floating-banner {
        right: 16px;
        font-size: 11px;
        padding: 6px 10px;
    }
}

@media (max-height: 600px) {
    .category-scrollbar-track {
        --segment-height: 60px;
        /* Smaller segments on short screens */
    }
}


/* Skill Wheel */
#skill-wheel-container {
    flex-grow: 1;
    height: calc(100% - 100px);
    /* Accounts for instructions/footer */
    position: relative;
    width: 100%;
    overflow: hidden;
    opacity: 1;
    /* Modified by skillWheel.js for transitions */
    cursor: default;
    /* Changed to grabbing in skillWheel.js */
    /* GPU acceleration for smooth scrolling */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* will-change set dynamically during animations */
}

#skill-wheel {
    position: absolute;
    width: 100%;
    height: 310vh;
    /* Very tall to allow scrolling */
    top: 0;
    left: 0;
    /* Enhanced GPU acceleration for iOS Safari */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* iOS-specific optimizations */
    -webkit-perspective: 1000px;
    perspective: 1000px;
    /* will-change set dynamically during animations */
    /* Remove CSS transitions to avoid conflicts with JS animations */
    /* transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1); */
    /* Touch optimization for iOS */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.skill-section {
    position: relative;
    width: 100%;
    padding: 64px 0;
    transition: opacity 0.3s ease;
    /* class: category-* (Added by skillWheel.js) */
    /* GPU acceleration without containment */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* dataset.category (Added by skillWheel.js) */
}

.skill-row {
    display: flex;
    justify-content: center;
    margin: 24px 0;
    position: relative;
    width: 100%;
    left: 0;
    right: 0;
}

/* Skill Nodes (in the wheel) */
.skill-node {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 12px;
    border-radius: 50%;
    /* Enhanced GPU acceleration for iOS */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* iOS-specific performance optimizations */
    -webkit-perspective: 1000px;
    perspective: 1000px;
    /* Remove CSS transitions - handled by JS for better iOS performance */
    /* transition: transform 0.2s ease-out, opacity 0.3s ease, border 0.2s ease; */
    /* will-change set dynamically during animations */
    cursor: pointer;
    z-index: 1;
    opacity: 1;
    /* Touch optimization */
    -webkit-tap-highlight-color: transparent;
    /* Modified by skillWheel.js */
}

.node-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* Hover and selected transforms are handled by JavaScript due to dynamic positioning */
/* Skill Label */
.skill-label {
    position: absolute;
    text-align: center;
    font-size: 10px;
    /* Consistent with subscription badge */
    width: 100px;
    top: 100%;
    color: #ffffff;
    font-weight: bold;
    left: 50%;
    transition: opacity 0.2s ease;
    /* will-change set dynamically during animations */
    opacity: 0;
    /* Base state */
    pointer-events: none;
    border-radius: 4px;
    z-index: 1;
    transform: translateX(-50%) rotate(0deg);
    /* Modified by skillWheel.js */
}

.skill-node:hover .skill-label,
.skill-node.show-label .skill-label {
    opacity: 1;
}

/* Hide label on mobile when not selected */
.skill-node:not(.show-label) .skill-label {
    opacity: 0;
}

/* Styling for the new skill icon image */
.skill-node .skill-node-icon {
    position: absolute;
    /* Position it within the .skill-node */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Center the icon */
    width: 85%;
    /* Adjust percentage to fit nicely within the circle, leaving some padding */
    height: 85%;
    /* Adjust percentage to fit nicely within the circle, leaving some padding */
    object-fit: contain;
    /* Ensures the SVG scales correctly without cropping */
    pointer-events: none;
    /* Make sure it doesn't interfere with clicks on the node itself */
    z-index: 1;
    /* Ensures it's above the colored circle but below any text/indicators if needed */
}

/* Generate Workout Button (Initially hidden) */
#generate-workout-btn {
    position: fixed;
    bottom: 24px;
    /* Aligns with footer initially */
    /* Added for centering text */
    display: flex;
    align-items: center;
    /* Vertically centers the content (text) */
    justify-content: center;
    /* Horizontally centers the content (text) */
    text-align: center;
    /* Retained for good measure, though justify-content often handles it for direct text */
    left: 36%;
    width: 27%;
    height: 36px;
    /* Reduced from 50px for better proportions */
    font-size: 16px;
    /* Explicit font size */
    padding: 8px 16px;
    /* Proper padding */
    transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out;
    z-index: 51;
    /* Above footer */
    opacity: 0;
    pointer-events: none;
    background-color: #282a2c;
    color: #b3b2b1;
}

#generate-workout-btn:hover {
    background-color: #3a3f42;
}

/* class: visible (Added/removed by uiUpdates.js) */
#generate-workout-btn.visible {
    opacity: 1;
    pointer-events: auto;
    border-color: #282a2c;
}

/* Adjust Generate Workout Button for smaller screens */
@media (max-width: 600px) {
    #generate-workout-btn {
        left: 15%;
        /* New left position for phones */
        width: 70%;
        /* Adjusted width to keep it centered */
    }
}

/* --- Profile Menu --- */
#profile-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 60;
    display: flex;
    align-items: flex-start;
    opacity: 1;
    /* Modified by skillWheel.js for transitions */
}

#profile-circle {
    width: 48px;
    height: 48px;
    background-color: #1b98e0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 62;
}

#profile-circle:hover {
    transform: scale(1.1);
}

#profile-initials {
    color: white;
    font-size: 16px;
    font-weight: bold;
    user-select: none;
    /* Text updated by uiUpdates.js */
}

#profile-side-menu {
    background-color: #000000;
    box-shadow: -4px 0px 12px rgba(0, 0, 0, 0.5);
    padding: 24px 12px;
    width: 252px;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    transform: translateX(100%);
    /* Starts off-screen */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    visibility: hidden;
    /* Start hidden */
    opacity: 0;
    /* Start faded out */
    z-index: 90;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #333;
    /* class: menu-open (Added/removed by profile.js) */
}

#profile-side-menu.menu-open {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
}

#profile-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 12px;
    flex-grow: 1;
}

#profile-list li {
    color: #ecf0f1;
    padding: 12px 12px;
    margin-bottom: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    /* class: active-profile (Added by uiUpdates.js) */
}

#profile-list li:hover {
    background-color: #34495e;
}

#profile-list li.active-profile {
    background-color: #1abc9c;
    color: white;
    font-weight: bold;
}

.profile-item-details {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Used in uiUpdates.js */
.initials-badge {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #bdc3c7;
    color: #2c3e50;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 24px;
}

/* Used in uiUpdates.js */
/* .arrow (Not found referenced) */
#logout-btn {
    display: none;
}

/* display: block/none toggled by uiUpdates.js */
#profile-config-btn {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #bdc3c7;
    transition: color 0.2s ease;
    display: none;
    /* display: block/none toggled by uiUpdates.js */
}

#profile-config-btn svg {
    display: block;
    width: 24px;
    height: 24px;
}

#profile-config-btn:hover {
    color: #ffffff;
}

/* Add profile button (Not found referenced in provided JS for styles.css) */
/* #add-profile-btn { margin: 16px 12px 24px 12px; } */
/* --- Category Skills View (#category-skills-view) --- */
#category-skills-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    z-index: 150;
    overflow: hidden;
    display: none;
    /* Toggled by skillWheel.js */
    opacity: 0;
    /* Transitioned by skillWheel.js */
    transition: opacity 0.7s ease;
    /* class: visible (Added/removed by skillWheel.js) */
}

#category-skills-view.visible {
    display: block;
    opacity: 1;
}

#category-skills-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 2400px;
    height: 2400px;
    transform-origin: 0 0;
    cursor: grab;
    /* will-change set dynamically by JS when needed */
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0;
    transition: opacity 0.5s ease 0.1s;
    transform: translate(0px, 0px) scale(1) translateZ(0);
    /* Force hardware acceleration */
    padding-left: 0px;
    /* Performance optimizations */
    backface-visibility: hidden;
    /* Touch optimizations */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    /* Prevent callout on long press */
    touch-action: none;
    /* Prevent browser default touch behaviors */
}

#category-skills-content.grabbing {
    cursor: grabbing;
}

#category-skills-content.content-visible {
    opacity: 1;
}

/* Close Button for Category View */
#close-category-view-btn {
    position: fixed;
    top: 24px;
    right: 60px;
    z-index: 160;
    /* Above content */
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
    line-height: 36px;
    text-align: center;
}

#close-category-view-btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 999px) {
    #close-category-view-btn {
        right: 24px;
    }
}

/* Nodes within Category View (common style) */
.category-node {
    position: absolute;
    /* Top/left set by categoryView.js */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 1;
    font-size: 12px;
    text-align: center;
    padding: 4px;
    user-select: none;
    cursor: default;
    box-sizing: border-box;
    background-color: #444;
    /* Default */
    transition: background-color 0.3s ease, border-color 0.3s ease;
    /* width/height set by categoryView.js */
    /* class: category-skill-node, category-milestone-node, category-root-node (Added by categoryView.js) */
    /* dataset.id, .type, .parentSkill (Added by categoryView.js) */
}

.category-node-label {
    position: absolute;
    text-align: center;
    font-size: clamp(12px, 1.8vh, 12px);
    /* Match .skill-label */
    width: 100px;
    /* Match .skill-label */
    top: 100%;
    /* Position below the node */
    margin-top: 8px;
    /* Match .skill-label */
    color: #ffffff;
    /* Match .skill-label */
    font-weight: bold;
    /* Match .skill-label */
    left: 50%;
    transform: translateX(-50%);
    /* Center the label */
    transition: opacity 0.2s ease;
    /* will-change set dynamically during animations */
    opacity: 0;
    /* Initially hidden */
    pointer-events: none;
    /* So it doesn't interfere with node clicks */
    background-color: rgba(26, 26, 26, 0.6);
    /* Match .skill-label */
    padding: 4px 4px;
    /* Match .skill-label */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    /* Match .skill-label */
    z-index: 155;
    /* Higher than .category-skill-node (152) to ensure visibility */
}

/* Show the label on hover of the parent .category-node */
.category-node:hover .category-node-label {
    opacity: 1;
    /* Make visible on hover */
}

/* Specific Node Types in Category View */
.category-skill-node {
    font-weight: bold;
    z-index: 152;
}

.category-milestone-node {
    background-color: #7f8c8d;
    /* Grey */
    z-index: 5;
    font-size: 12px;
    cursor: pointer;
    /* class: achieved (Added/removed by categoryView.js) */
    /* Touch-specific styles */
    -webkit-tap-highlight-color: transparent;
    /* Remove tap highlight on mobile */
    touch-action: manipulation;
    /* Optimize for touch interaction */
}

.category-milestone-node:hover {
    z-index: 6;
    /* Lift hovered milestone above others */
}

.category-root-node {
    font-size: 24px;
    /* Increased for larger root node */
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    /* background-color set by categoryView.js */
}

.milestone-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Scales the image down to fit within the container while maintaining aspect ratio.
                           Use 'cover' if you want it to fill the space and potentially be cropped.
                           Use 'fill' if you want to stretch it, ignoring aspect ratio. */
    position: absolute;
    /* Position the icon within the bounds of the .category-milestone-node */
    top: 0;
    left: 0;
    border-radius: 50%;
    /* Optional: if your milestone nodes are circular and icons are square, this can help. */
    /* However, usually not needed if object-fit: contain is used with transparent bg SVGs. */
}

/* SVG Lines for Connections (within #category-skills-content) */
svg.connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    /* Below nodes */
    overflow: visible;
    /* width/height set by categoryView.js */
}

svg.connection-lines line {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2;
    transition: stroke 0.3s ease;
    /* x1, y1, x2, y2 set by categoryView.js */
}

/* Transition Circle (used between skill wheel and category view) */
#transition-circle-element {
    position: fixed;
    border-radius: 50%;
    z-index: 1000;
    pointer-events: none;
    display: none;
    opacity: 1;
    transform: translateZ(0);
    /* Force hardware acceleration */
    backface-visibility: hidden;
    /* Prevent flickering */
    -webkit-font-smoothing: subpixel-antialiased;
    /* Better rendering */
    /* will-change set dynamically during animations */
    /* Optimize for animation */
}

/* Simple transition animation */
.circle-to-center-transition {
    --start-x: 0;
    --start-y: 0;
    --start-size: 100px;
    --target-x: 0;
    --target-y: 0;
    --scale-factor: 1;
    position: fixed;
    left: var(--start-x);
    top: var(--start-y);
    width: var(--start-size);
    height: var(--start-size);
    border-radius: 50%;
    animation: circleToCenter 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    /* will-change set dynamically during animations */
    transform-origin: center center;
}

@keyframes circleToCenter {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(var(--target-x), var(--target-y)) scale(var(--scale-factor));
    }
}

/* Fade out elements during transition */
.transitioning-out {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

/* Fade in for category view content */
.category-view-fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --- Milestone Unlock Feedback --- */
/* These are dynamically created/positioned by categoryView.js */
.milestone-progress-svg {
    /* position, width, height, left, top, z-index set by JS */
    pointer-events: none;
    overflow: visible;
    transition: opacity 0.2s ease-out;
    /* Fade out on cancel */
    /* class: locking (Added by categoryView.js) */
}

.milestone-progress-circle {
    fill: none;
    stroke: #4CAF50;
    /* Green default */
    stroke-width: 4;
    stroke-linecap: round;
    transform-origin: center;
    transform: rotate(-90deg);
    transition: stroke-dashoffset 0.1s linear;
    /* Smooth animation step */
    /* cx, cy, r, stroke-dasharray, stroke-dashoffset set by JS */
}

.milestone-progress-svg.locking .milestone-progress-circle {
    stroke: #e74c3c;
    /* Red when locking */
}

/* class: animating (Added/removed by categoryView.js - but animation handled by setInterval now) */
.milestone-unlock-message {
    /* position, top, left, z-index set by JS */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-out;
    transform: translateY(12px);
    /* Start slightly below */
    white-space: nowrap;
    /* class: visible (Added/removed by categoryView.js) */
}

.milestone-unlock-message.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Responsive Adjustments --- */
@media (max-width: 600px) {
    #category-skills-content {
        padding-left: 36px;
    }

    /* Prevent overlap */
}

@media (max-width: 768px) {
    /* side-circle mobile styles removed - functionality transferred to fab-icon-container */

    /* Show more on small screens */
}

/* --- Profile Dropdown Menu Styles --- */
/* Ensure profile container can contain the absolutely positioned dropdown */
#profile-container {
    /* Restore fixed positioning to keep it in the top-right */
    position: fixed;
    top: 16px;
    right: 16px;
    /* The fixed position also serves as the context for the absolute dropdown */
    /* Keep other existing styles like display: flex, align-items, z-index */
}

.profile-dropdown {
    display: none;
    /* Hidden by default */
    position: absolute;
    top: 56px;
    /* Position below the circle (adjust if circle size changes) */
    right: 0;
    background-color: #2c3e50;
    /* Dark blue-grey (match modal style) */
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
    z-index: 91;
    /* Higher than side menu (90) if it existed */
    border-radius: 4px;
    padding: 8px 0;
    /* Vertical padding */
    border: 1px solid #4b5563;
    /* Optional border */
}

.profile-dropdown.dropdown-visible {
    display: block;
    /* Show when class is added */
}

/* Style for items within the dropdown */
.dropdown-item {
    color: #ecf0f1;
    /* Light text */
    padding: 12px 16px;
    /* Padding for each item */
    text-decoration: none;
    display: block;
    /* Ensure items take full width */
    background: none;
    border: none;
    width: 100%;
    /* Full width */
    text-align: left;
    cursor: pointer;
    font-size: 16px;
    white-space: nowrap;
    /* Prevent wrapping */
}

.dropdown-item:hover {
    background-color: #34495e;
    /* Slightly darker hover */
}

/* Specific style for danger items like Logout */
.dropdown-item-danger {
    color: #e74c3c;
    /* Red text */
}

.dropdown-item-danger:hover {
    background-color: rgba(231, 76, 60, 0.2);
    /* Reddish hover */
    color: #f1a096;
    /* Lighter red on hover */
}

/* Divider style */
.dropdown-divider {
    height: 1px;
    margin: 8px 0;
    /* Space around divider */
    overflow: hidden;
    background-color: #4b5563;
    /* Separator line color */
    border: 0;
}

.page-error-message {
    background-color: #f8d7da;
    /* Light red background */
    color: #721c24;
    /* Dark red text */
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    text-align: center;
    font-size: 12px;
}

/* Add to styles.css or a relevant CSS file */
.goal-selector-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
    border-radius: 4px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
    /* Optional inner shadow */
    margin-bottom: 4px;
}

.goal-selector-group label {
    display: flex;
    align-items: center;
    background-color: #e9ecef;
    /* Light background for each goal */
    padding: 8px 12px;
    border-radius: 24px;
    /* Pill shape */
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 12px;
    color: #0A090C;
    /* Dark text */
    border: 1px solid #ced4da;
    /* Light border */
}

.goal-selector-group label:hover {
    background-color: #dee2e6;
}

.goal-selector-group input[type="checkbox"] {
    margin-right: 8px;
    accent-color: #3498db;
    /* Your primary accent color */
    width: 16px;
    height: 16px;
}

.goal-selector-group label:has(input[type="checkbox"]:checked) {
    background-color: #3498db;
    /* Accent color when selected */
    color: white;
    font-weight: 500;
    border-color: #3498db;
}

/* Locked Skill Node Styles */
.skill-node.skill-locked {
    cursor: not-allowed;
}

.skill-node.skill-locked .skill-node-icon {
    /* Icon styling can be added here if needed in the future */
}

.skill-node.skill-locked:hover {
    transform: none;
    /* Disable hover effects */
}

/* Lock Icon Overlay */
.skill-lock-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.skill-lock-icon svg {
    width: 12px;
    height: 12px;
    fill: #fff;
}

/* Unlock Tooltip */
.skill-unlock-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
    margin-bottom: 12px;
}

.skill-unlock-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
}

.skill-node.skill-locked:hover .skill-unlock-tooltip {
    opacity: 1;
}

/* Advanced Options Collapsible Styles */
.collapsible-header {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 12px 0;
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collapsible-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.collapsible-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.collapsible-header[aria-expanded="true"] .collapsible-arrow {
    transform: rotate(90deg);
}

.collapsible-content {
    transition: all 0.3s ease;
    overflow: hidden;
    padding-left: 16px;
    margin-top: 16px;
}

.collapsible-content.show {
    display: block !important;
}

/* Advanced Options Specific Styles */
.advanced-option-subtitle {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: block;
}

.advanced-option-description {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 12px;
    line-height: 1.4;
}