.d-none { display: none !important; }

/* Active layout presentation rules for the buttons */
.toggle-tab.active {
    background-color: #008cb4 !important;
    color: #ffffff !important;
    border-color: #008cb4 !important;
}

body {
            font-family: 'Montserrat', sans-serif;
            background-color: #ffffff; /* Removed the distracting blue gradient */
            margin: 0;
            padding: 0;
        }

        .creator-container {
            width: 100%;
            max-width: 1200px; /* Matching structural standard sizes */
            margin: 0 auto;
            padding: 40px 20px;
        }

        /* --- TABS SYSTEM TRANSFORMATION --- */
        .tab-navigation {
            display: flex;
            width: 100%;
            border-bottom: 2px solid #e2e8f0;
            margin-bottom: 30px;
            gap: 2px;
        }

        .tab-btn {
            flex: 1;
            background-color: #f1f5f9;
            color: #64748b;
            border: 1px solid #e2e8f0;
            border-bottom: none;
            padding: 15px 10px;
            font-family: 'Montserrat', sans-serif;
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .tab-btn:hover {
            background-color: #e2e8f0;
            color: #1e293b;
        }

        .tab-btn.active {
            background-color: #ffffff;
            color: #000000;
            border-top: 3px solid #5d9cbd; /* Core theme highlight blue */
            position: relative;
            bottom: -2px; /* Overlaps container border seamlessly */
            pointer-events: none;
        }

        /* --- CONTENT PANEL AND HEADER RECONSTRUCTION --- */
        .creator-card {
            background-color: #ffffff;
            margin-bottom: 40px;
        }

        .panel-header-block {
            background-color: #f8fafc;
            border-left: 4px solid #5d9cbd;
            padding: 20px 25px;
            margin-bottom: 30px;
        }

        .panel-header-block h2 {
            font-size: 20px;
            font-weight: 700;
            color: #1e293b;
            text-transform: uppercase;
            margin-bottom: 5px;
            letter-spacing: 0.025em;
        }

        .panel-header-block p {
            font-size: 13px;
            color: #64748b;
            line-height: 1.5;
        }

        /* Inline Input Elements matching Contact Us form theme styles */
        .inline-input-group {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        /* --- UNIQUE COMPONENT RESOLUTIONS --- */
        
        /* Demographics Controls */
        .demographic-selectors {
            display: flex;
            align-items: center;
            gap: 30px;
            background: #f8fafc;
            padding: 15px 20px;
            border: 1px solid #cbd5e1;
            margin-bottom: 25px;
        }

        .age-select-clean {
            width: auto;
            min-width: 100px;
            padding: 8px 12px;
        }

        .gender-radio-group {
            display: flex;
            gap: 25px;
        }

        .gender-label {
            cursor: pointer;
            display: flex;
            align-items: center;
            margin-bottom: 0;
        }

        .gender-label input[type="radio"] {
            margin-right: 8px;
            accent-color: #5d9cbd;
        }

        .gender-text {
            font-size: 12px;
            font-weight: 700;
            color: #475569;
            text-transform: uppercase;
        }

        /* Scrollable Avatar Layout Grid */
        .avatar-scroll-container {
            border: 1px solid #cbd5e1;
            padding: 20px;
            max-height: 160px;
            overflow-y: auto;
            background: #f8fafc;
        }

        .avatar-grid {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .avatar-option {
            cursor: pointer;
            position: relative;
        }

        .avatar-option input[type="radio"] {
            display: none;
        }

        .avatar-image {
            width: 70px;
            height: 70px;
            border: 3px solid transparent;
            background-color: #e2e8f0;
            transition: all 0.2s ease;
        }

        .avatar-option input[type="radio"]:checked + .avatar-image {
            border-color: #5d9cbd;
            box-shadow: 0 0 8px rgba(93, 156, 189, 0.5);
        }

        /* Segmented Buttons Control Bar */
        .segmented-toggle-bar {
            display: flex;
            gap: 10px;
            margin-bottom: 25px;
        }

        .segment-btn {
            background-color: #f1f5f9;
            color: #475569;
            border: 1px solid #cbd5e1;
            padding: 8px 24px;
            font-family: 'Montserrat', sans-serif;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            cursor: pointer;
        }

        .segment-btn.active {
            background-color: #5d9cbd;
            color: #ffffff;
            border-color: #5d9cbd;
            pointer-events: none;
        }

        /* Radar Interface Chart Wrapper Elements */
        .radar-chart-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            width: 100%;
        }

        /* Tab controls styled to match application panels */
        .chart-toggle-group {
            display: flex;
            gap: 10px;
        }

        .toggle-tab {
            padding: 6px 16px;
            font-family: 'Montserrat', sans-serif;
            font-size: 11px;
            font-weight: 700;
            color: #64748b;
            background: #e2e8f0;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .toggle-tab.active {
            color: #ffffff;
            background: #475569;
        }

        .radar-chart-viewport {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f8fafc;
            border: 1px solid #cbd5e1;
            padding: 30px;
            width: 100%;
            box-sizing: border-box;
            user-select: none;
        }

        .radar-placeholder-graphic {
            width: 540px;
            height: 330px;
            max-width: 100%;
        }

        .radar-handle {
            cursor: pointer;
            transition: r 0.1s ease, fill 0.1s ease;
        }

        .radar-handle:hover {
            r: 5.5;
            fill: #3b82f6;
        }

        .chart-instruction-text {
            font-family: 'Montserrat', sans-serif;
            font-size: 11px;
            color: #64748b;
            text-align: center;
        }

        .d-none {
            display: none !important;
        }

        .chart-instruction-text {
            text-align: center;
            font-size: 12px;
            color: #64748b;
            margin-top: 15px;
            font-style: italic;
        }

        /* Hide layout sections programmatically */
        .form-step-panel {
            display: none;
        }

        .form-step-panel.active-panel {
            display: block;
        }