/* Page-specific overrides and additional styles */
        :root {
            /* Gate Colors */
            --gate1-color: #667eea;
            --gate1-light: rgba(102, 126, 234, 0.1);
            --gate2-color: #f093fb;
            --gate2-light: rgba(240, 147, 251, 0.1);
            --gate3-color: #4facfe;
            --gate3-light: rgba(79, 172, 254, 0.1);
            --gate4-color: #43e97b;
            --gate4-light: rgba(67, 233, 123, 0.1);
        }

        /* Modern Navigation Header */
        .page-header {
            background: var(--bg-gradient-primary);
            padding: var(--space-5) 0;
            position: sticky;
            top: 0;
            z-index: var(--z-sticky);
            box-shadow: var(--shadow-md);
        }

        .header-container {
            max-width: var(--container-xl);
            margin: 0 auto;
            padding: 0 var(--space-4);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
        }

        .header-content {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .header-title {
            color: white;
            font-size: var(--text-xl);
            font-weight: var(--font-bold);
            margin: 0;
        }

        .header-subtitle {
            color: rgba(255, 255, 255, 0.85);
            font-size: var(--text-xs);
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            padding: var(--space-2) var(--space-4);
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: var(--radius-lg);
            color: white;
            font-weight: var(--font-medium);
            font-size: var(--text-sm);
            transition: all var(--transition-base);
            text-decoration: none;
        }

        .back-link:hover {
            background: rgba(255, 255, 255, 0.25);
            color: white;
            transform: translateX(4px);
        }

        /* Main Container */
        .main-container {
            max-width: var(--container-xl);
            margin: 0 auto;
            padding: var(--space-4) var(--space-4);
        }

        /* Gates Overview Cards */
        .gates-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--space-2);
            margin-bottom: var(--space-4);
        }

        @media (max-width: 900px) {
            .gates-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 500px) {
            .gates-grid {
                grid-template-columns: 1fr;
            }
        }

        .gate-card {
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            padding: var(--space-3);
            text-align: center;
            box-shadow: var(--shadow-sm);
            cursor: pointer;
            transition: all var(--transition-base);
            position: relative;
            overflow: hidden;
            border: 1px solid var(--neutral-100);
        }

        .gate-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 3px;
        }

        .gate-card:nth-child(1)::before { background: linear-gradient(90deg, var(--gate1-color), #764ba2); }
        .gate-card:nth-child(2)::before { background: linear-gradient(90deg, var(--gate2-color), #f5576c); }
        .gate-card:nth-child(3)::before { background: linear-gradient(90deg, var(--gate3-color), #00f2fe); }
        .gate-card:nth-child(4)::before { background: linear-gradient(90deg, var(--gate4-color), #38f9d7); }

        .gate-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .gate-card.active::after {
            content: '';
            position: absolute;
            top: var(--space-2);
            left: var(--space-2);
            width: 18px;
            height: 18px;
            background: var(--success);
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gate-number {
            width: 36px;
            height: 36px;
            margin: 0 auto var(--space-2);
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-base);
            font-weight: var(--font-extrabold);
            color: white;
        }

        .gate-card:nth-child(1) .gate-number { background: linear-gradient(135deg, var(--gate1-color), #764ba2); }
        .gate-card:nth-child(2) .gate-number { background: linear-gradient(135deg, var(--gate2-color), #f5576c); }
        .gate-card:nth-child(3) .gate-number { background: linear-gradient(135deg, var(--gate3-color), #00f2fe); }
        .gate-card:nth-child(4) .gate-number { background: linear-gradient(135deg, var(--gate4-color), #38f9d7); }

        .gate-card h3 {
            font-size: var(--text-sm);
            color: var(--neutral-900);
            margin-bottom: 2px;
        }

        .gate-card p {
            font-size: var(--text-xs);
            color: var(--neutral-500);
            margin-bottom: var(--space-2);
        }

        .gate-score {
            display: inline-block;
            padding: var(--space-1) var(--space-2);
            background: var(--neutral-100);
            border-radius: var(--radius-full);
            font-weight: var(--font-semibold);
            font-size: var(--text-xs);
            color: var(--neutral-700);
        }

        /* Staff Selection Cards */
        .selection-title {
            text-align: center;
            color: var(--primary-700);
            margin-bottom: var(--space-4);
            font-size: var(--text-lg);
        }

        .staff-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: var(--space-3);
            margin-bottom: var(--space-4);
        }

        .staff-card {
            background: var(--bg-secondary);
            border-radius: var(--radius-xl);
            padding: var(--space-4);
            text-align: center;
            box-shadow: var(--shadow-sm);
            cursor: pointer;
            transition: all var(--transition-base);
            border: 1px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .staff-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 3px;
            background: var(--bg-gradient-primary);
        }

        .staff-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
            border-color: var(--primary-200);
        }

        .staff-card.selected {
            border-color: var(--primary-500);
            background: var(--primary-50);
        }

        .staff-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto var(--space-3);
            background: var(--bg-gradient-primary);
            border-radius: var(--radius-xl);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform var(--transition-base);
        }

        .staff-card:hover .staff-icon {
            transform: scale(1.05);
        }

        .staff-icon svg {
            width: 24px;
            height: 24px;
            fill: white;
        }

        .staff-card h3 {
            color: var(--primary-700);
            font-size: var(--text-base);
            margin-bottom: var(--space-2);
        }

        .staff-card p {
            color: var(--neutral-500);
            font-size: var(--text-xs);
            line-height: var(--leading-relaxed);
        }

        .staff-card.leadership-card {
            border: 2px solid var(--accent-400);
            background: linear-gradient(135deg, var(--accent-50) 0%, var(--accent-100) 100%);
        }

        .staff-card.leadership-card::before {
            background: var(--bg-gradient-accent);
        }

        .staff-card.leadership-card:hover {
            border-color: var(--accent-500);
            box-shadow: 0 10px 40px rgba(245, 158, 11, 0.2);
        }

        .staff-card.leadership-card h3 {
            color: var(--accent-700);
        }

        .leadership-badge {
            margin-top: var(--space-2);
            font-size: var(--text-xs);
            color: var(--accent-700);
            background: var(--accent-100);
            padding: var(--space-1) var(--space-2);
            border-radius: var(--radius-md);
            display: inline-block;
        }

        /* Supervisor Card */
        .staff-card.supervisor-card::before {
            background: linear-gradient(135deg, var(--purple-500) 0%, var(--purple-600) 100%);
        }

        /* Form Section Cards */
        .form-section {
            background: var(--bg-secondary);
            border-radius: var(--radius-xl);
            padding: var(--space-4);
            margin-bottom: var(--space-3);
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--neutral-100);
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding-bottom: var(--space-3);
            border-bottom: 1px solid var(--neutral-100);
            margin-bottom: var(--space-3);
        }

        .section-number {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: var(--font-bold);
            font-size: var(--text-sm);
            color: white;
            flex-shrink: 0;
        }

        .section-number.gate1 { background: linear-gradient(135deg, var(--gate1-color), #764ba2); }
        .section-number.gate2 { background: linear-gradient(135deg, var(--gate2-color), #f5576c); }
        .section-number.gate3 { background: linear-gradient(135deg, var(--gate3-color), #00f2fe); }
        .section-number.gate4 { background: linear-gradient(135deg, var(--gate4-color), #38f9d7); }

        .section-title {
            flex: 1;
        }

        .section-title h2 {
            color: var(--neutral-900);
            font-size: var(--text-base);
            margin-bottom: 2px;
        }

        .section-title p {
            color: var(--neutral-500);
            font-size: var(--text-xs);
            margin: 0;
        }

        .section-score {
            padding: var(--space-1) var(--space-3);
            background: var(--neutral-100);
            border-radius: var(--radius-full);
            font-weight: var(--font-bold);
            font-size: var(--text-xs);
            color: var(--neutral-700);
        }

        /* Form Elements */
        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--space-3);
        }

        .form-group {
            margin-bottom: var(--space-3);
        }

        .form-group label {
            display: block;
            font-weight: var(--font-medium);
            color: var(--neutral-700);
            margin-bottom: var(--space-1);
            font-size: var(--text-xs);
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--neutral-200);
            border-radius: var(--radius-md);
            font-family: inherit;
            font-size: var(--text-sm);
            color: var(--neutral-800);
            background: var(--bg-secondary);
            transition: all var(--transition-fast);
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-500);
            box-shadow: 0 0 0 2px var(--primary-100);
        }

        .form-group input::placeholder {
            color: var(--neutral-400);
        }

        /* Alert Boxes */
        .alert {
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-3);
            display: flex;
            align-items: flex-start;
            gap: var(--space-2);
            font-size: var(--text-sm);
        }

        .alert-warning {
            background: var(--warning-light);
            border-right: 3px solid var(--warning);
        }

        .alert-warning strong {
            color: var(--accent-700);
        }

        .alert-warning p {
            color: var(--accent-700);
            margin: 2px 0 0;
            font-size: var(--text-xs);
        }

        .alert-info {
            background: var(--info-light);
            border-right: 3px solid var(--info);
        }

        .evaluator-badge {
            background: var(--neutral-100);
            padding: var(--space-2);
            border-radius: var(--radius-md);
            margin-bottom: var(--space-3);
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: var(--text-sm);
        }

        .evaluator-badge span:last-child {
            background: var(--gate1-color);
            color: white;
            padding: var(--space-1) var(--space-2);
            border-radius: var(--radius-full);
            font-size: var(--text-xs);
            font-weight: var(--font-medium);
        }

        /* Checklist Items */
        .checklist-container {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }

        .checklist-item {
            background: var(--bg-secondary);
            border: 1px solid var(--neutral-200);
            border-radius: var(--radius-lg);
            padding: var(--space-3);
            transition: all var(--transition-base);
        }

        .checklist-item:hover {
            border-color: var(--gate1-color);
            box-shadow: 0 2px 12px rgba(102, 126, 234, 0.1);
        }

        .checklist-item.passed {
            background: var(--success-light);
            border-color: var(--success);
        }

        .checklist-item.failed {
            background: var(--error-light);
            border-color: var(--error);
        }

        .checklist-header {
            display: flex;
            align-items: flex-start;
            gap: var(--space-4);
            margin-bottom: var(--space-4);
        }

        .checklist-number {
            width: 40px;
            height: 40px;
            background: var(--gate1-color);
            color: white;
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: var(--font-bold);
            flex-shrink: 0;
        }

        .checklist-item.passed .checklist-number {
            background: var(--success);
        }

        .checklist-item.failed .checklist-number {
            background: var(--error);
        }

        .checklist-info h4 {
            color: var(--neutral-900);
            font-size: var(--text-base);
            margin-bottom: var(--space-1);
        }

        .checklist-limit {
            color: var(--neutral-500);
            font-size: var(--text-sm);
            margin: 0;
        }

        .checklist-limit strong {
            color: var(--gate1-color);
        }

        .checklist-item.failed .checklist-limit strong {
            color: var(--error);
        }

        .checklist-input {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding-top: var(--space-4);
            border-top: 1px solid var(--neutral-200);
            flex-wrap: wrap;
        }

        .checklist-input label {
            font-weight: var(--font-medium);
            color: var(--neutral-600);
            min-width: 180px;
            margin: 0;
        }

        .checklist-input input[type="number"],
        .checklist-input select {
            width: 120px;
            padding: var(--space-2) var(--space-3);
            border: 2px solid var(--neutral-200);
            border-radius: var(--radius-lg);
            text-align: center;
            font-family: inherit;
            font-size: var(--text-base);
        }

        .checklist-input input[type="number"]:focus,
        .checklist-input select:focus {
            outline: none;
            border-color: var(--primary-500);
            box-shadow: 0 0 0 3px var(--primary-100);
        }

        .checklist-status {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: var(--font-bold);
            font-size: var(--text-lg);
            background: var(--success-light);
            color: var(--success);
            margin-right: auto;
        }

        .checklist-status.failed {
            background: var(--error-light);
            color: var(--error);
        }

        /* Gate 1 Result */
        .gate1-result {
            margin-top: var(--space-6);
            padding: var(--space-6);
            border-radius: var(--radius-xl);
            display: flex;
            align-items: center;
            gap: var(--space-5);
            background: linear-gradient(135deg, var(--success-light) 0%, #bbf7d0 100%);
            border: 2px solid var(--success);
        }

        .gate1-result.failed {
            background: linear-gradient(135deg, var(--error-light) 0%, #fecaca 100%);
            border-color: var(--error);
        }

        .gate1-result-icon {
            width: 64px;
            height: 64px;
            background: var(--success);
            color: white;
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-3xl);
            font-weight: var(--font-bold);
            flex-shrink: 0;
        }

        .gate1-result.failed .gate1-result-icon {
            background: var(--error);
        }

        .gate1-result-text h3 {
            font-size: var(--text-xl);
            color: #166534;
            margin-bottom: var(--space-1);
        }

        .gate1-result.failed .gate1-result-text h3 {
            color: #b91c1c;
        }

        .gate1-result-text p {
            color: #15803d;
            margin: 0;
            font-size: var(--text-sm);
        }

        .gate1-result.failed .gate1-result-text p {
            color: #dc2626;
        }

        /* Approval Section */
        .approval-section {
            margin-top: var(--space-6);
            padding: var(--space-6);
            background: var(--neutral-50);
            border-radius: var(--radius-xl);
            border: 2px dashed var(--neutral-300);
        }

        .approval-section h4 {
            color: var(--primary-700);
            margin-bottom: var(--space-5);
        }

        /* Gate 2 External Link Section */
        .gate2-external {
            background: linear-gradient(135deg, rgba(240, 147, 251, 0.1) 0%, rgba(245, 87, 108, 0.1) 100%);
            border: 2px dashed var(--gate2-color);
            border-radius: var(--radius-xl);
            padding: var(--space-8);
            text-align: center;
            margin-top: var(--space-5);
        }

        .gate2-external h3 {
            color: #f5576c;
            margin-bottom: var(--space-4);
            font-size: var(--text-xl);
        }

        .gate2-external > p {
            color: var(--neutral-600);
            margin-bottom: var(--space-6);
        }

        .gate2-link {
            display: inline-flex;
            align-items: center;
            gap: var(--space-3);
            background: linear-gradient(135deg, var(--gate2-color) 0%, #f5576c 100%);
            color: white;
            padding: var(--space-4) var(--space-8);
            border-radius: var(--radius-full);
            text-decoration: none;
            font-weight: var(--font-bold);
            font-size: var(--text-lg);
            transition: all var(--transition-base);
            box-shadow: 0 4px 20px rgba(240, 147, 251, 0.4);
        }

        .gate2-link:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(240, 147, 251, 0.5);
            color: white;
        }

        .gate2-link svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

        .gate2-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--space-4);
            margin-top: var(--space-6);
            text-align: right;
        }

        .gate2-info-card {
            background: white;
            padding: var(--space-4);
            border-radius: var(--radius-lg);
            border-right: 4px solid var(--gate2-color);
        }

        .gate2-info-card h4 {
            color: #f5576c;
            font-size: var(--text-sm);
            margin-bottom: var(--space-2);
        }

        .gate2-info-card p {
            font-size: var(--text-sm);
            margin: 0;
            color: var(--neutral-600);
        }

        /* Criteria Table */
        .criteria-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: var(--space-4);
        }

        .criteria-table th,
        .criteria-table td {
            padding: var(--space-4) var(--space-5);
            text-align: right;
            border-bottom: 1px solid var(--neutral-200);
        }

        .criteria-table th {
            background: var(--neutral-50);
            font-weight: var(--font-semibold);
            color: var(--primary-700);
            font-size: var(--text-sm);
        }

        .criteria-table tr:hover td {
            background: var(--neutral-50);
        }

        .criteria-table input[type="number"] {
            width: 80px;
            text-align: center;
            padding: var(--space-2) var(--space-3);
            border: 2px solid var(--neutral-200);
            border-radius: var(--radius-lg);
            font-family: inherit;
            font-size: var(--text-base);
        }

        .criteria-table input[type="number"]:focus {
            outline: none;
            border-color: var(--primary-500);
            box-shadow: 0 0 0 3px var(--primary-100);
        }

        .max-score {
            color: var(--neutral-500);
            font-size: var(--text-sm);
        }

        /* Progress Bars */
        .progress-container {
            margin-top: var(--space-4);
        }

        .progress-bar {
            height: 8px;
            background: var(--neutral-200);
            border-radius: var(--radius-full);
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            border-radius: var(--radius-full);
            transition: width 0.5s ease;
        }

        .progress-fill.gate1 { background: linear-gradient(90deg, var(--gate1-color), #764ba2); }
        .progress-fill.gate2 { background: linear-gradient(90deg, var(--gate2-color), #f5576c); }
        .progress-fill.gate3 { background: linear-gradient(90deg, var(--gate3-color), #00f2fe); }
        .progress-fill.gate4 { background: linear-gradient(90deg, var(--gate4-color), #38f9d7); }

        /* Results Section */
        .results-section {
            background: var(--bg-gradient-primary);
            border-radius: var(--radius-2xl);
            padding: var(--space-10);
            color: white;
            margin-bottom: var(--space-6);
        }

        .results-section h2 {
            text-align: center;
            margin-bottom: var(--space-8);
            color: white;
            font-size: var(--text-2xl);
        }

        .results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--space-5);
            margin-bottom: var(--space-8);
        }

        .result-card {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: var(--radius-xl);
            padding: var(--space-6);
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .result-card h4 {
            font-size: var(--text-sm);
            opacity: 0.9;
            margin-bottom: var(--space-3);
            font-weight: var(--font-medium);
        }

        .result-card .value {
            font-size: var(--text-4xl);
            font-weight: var(--font-extrabold);
        }

        .result-card .unit {
            font-size: var(--text-sm);
            opacity: 0.8;
            margin-top: var(--space-1);
        }

        /* Track Badge */
        .track-badge {
            display: inline-block;
            padding: var(--space-4) var(--space-10);
            border-radius: var(--radius-xl);
            font-size: var(--text-xl);
            font-weight: var(--font-extrabold);
            margin-top: var(--space-6);
        }

        .track-a {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
            color: #1a1a1a;
            box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
        }

        .track-b {
            background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
            color: #1a1a1a;
        }

        .track-c {
            background: linear-gradient(135deg, #cd7f32 0%, #daa06d 100%);
            color: #1a1a1a;
        }

        .track-none {
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }

        /* Gate 4 Track Selection Styles */
        .track-btn {
            transition: all 0.3s ease;
        }

        .track-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .track-btn.active {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }

        /* Performance Matrix Styles */
        #matrix-body tr:hover,
        #qualitative-matrix-body tr:hover {
            background: rgba(67, 233, 123, 0.08);
        }

        #matrix-body input[type="radio"],
        #qualitative-matrix-body input[type="radio"] {
            width: 20px;
            height: 20px;
            cursor: pointer;
            accent-color: var(--gate4-color);
        }

        /* Value Added Options */
        .value-added-option {
            transition: all 0.3s ease;
        }

        .value-added-option:hover {
            border-color: var(--gate4-color) !important;
            background: rgba(67, 233, 123, 0.03) !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .value-added-option input[type="radio"] {
            width: 18px;
            height: 18px;
            accent-color: var(--gate4-color);
        }

        /* Track Info Cards */
        .track-card {
            transition: all 0.3s ease;
        }

        .track-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* Chart Container */
        .chart-container {
            max-width: 400px;
            margin: var(--space-8) auto 0;
            padding: var(--space-6);
            background: rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-xl);
        }

        /* Action Buttons */
        .actions {
            display: flex;
            gap: var(--space-4);
            flex-wrap: wrap;
            justify-content: center;
            margin-top: var(--space-8);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            padding: var(--space-4) var(--space-8);
            font-family: inherit;
            font-size: var(--text-base);
            font-weight: var(--font-semibold);
            border-radius: var(--radius-xl);
            border: none;
            cursor: pointer;
            transition: all var(--transition-base);
            text-decoration: none;
        }

        .btn-primary {
            background: var(--bg-gradient-primary);
            color: white;
            box-shadow: var(--shadow-md);
        }

        .btn-primary:hover {
            box-shadow: var(--shadow-lg), var(--shadow-glow);
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: var(--bg-gradient-accent);
            color: #1a1a1a;
            box-shadow: var(--shadow-md);
        }

        .btn-secondary:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-2px);
        }

        .btn-success {
            background: var(--bg-gradient-secondary);
            color: white;
            box-shadow: var(--shadow-md);
        }

        .btn-success:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-2px);
        }

        /* Staff Info Header */
        .staff-info-header {
            background: var(--bg-secondary);
            border-radius: var(--radius-2xl);
            padding: var(--space-6);
            margin-bottom: var(--space-6);
            box-shadow: var(--shadow-card);
            border: 1px solid var(--neutral-100);
        }

        .staff-info-header h3 {
            color: var(--primary-700);
            margin-bottom: var(--space-5);
            font-size: var(--text-lg);
        }

        .staff-info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--space-5);
        }

        /* Day Name Badge */
        .day-badge {
            background: var(--bg-gradient-primary);
            color: white;
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-full);
            font-weight: var(--font-semibold);
            min-width: 70px;
            text-align: center;
            font-size: var(--text-sm);
        }

        /* Leadership Reward Note */
        .leadership-note {
            background: linear-gradient(135deg, var(--accent-100) 0%, var(--accent-200) 100%);
            border: 2px solid var(--accent-400);
            border-radius: var(--radius-xl);
            padding: var(--space-6);
            margin-bottom: var(--space-6);
            display: flex;
            align-items: center;
            gap: var(--space-5);
        }

        .leadership-note-icon {
            width: 56px;
            height: 56px;
            background: var(--accent-500);
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .leadership-note-icon svg {
            width: 28px;
            height: 28px;
            fill: white;
        }

        .leadership-note h3 {
            color: var(--accent-800);
            margin: 0 0 var(--space-2);
            font-size: var(--text-lg);
        }

        .leadership-note p {
            color: var(--accent-700);
            margin: 0;
            font-size: var(--text-sm);
        }

        /* Print Styles */
        @media print {
            * {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            @page {
                size: A4 portrait;
                margin: 10mm;
            }

            body {
                background: white !important;
                font-size: 9pt !important;
            }

            .page-header, .back-link, .actions, .staff-grid,
            #staff-selection-view, #leadership-positions, #leadership-reward-note,
            button, .btn, .gates-grid, .gate-card p,
            .gate2-external, .gate2-info, .gate2-link,
            #resultsChart, canvas {
                display: none !important;
            }

            .main-container {
                padding: 0 !important;
            }

            .form-section, .staff-info-header, .results-section {
                box-shadow: none !important;
                border: 1px solid #ddd !important;
                margin-bottom: 10px !important;
                padding: 15px !important;
            }

            .section-header {
                padding-bottom: 10px !important;
                margin-bottom: 10px !important;
            }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                text-align: center;
                gap: var(--space-4);
            }

            .section-header {
                flex-wrap: wrap;
            }

            .section-score {
                width: 100%;
                text-align: center;
                margin-top: var(--space-3);
            }

            .checklist-input {
                flex-direction: column;
                align-items: flex-start;
            }

            .checklist-status {
                margin-right: 0;
                margin-top: var(--space-3);
            }
        }

        /* Gate 3 Job Selector Buttons */
        .job-btn-gate3 {
            padding: 0.625rem 0.75rem;
            border: 2px solid var(--neutral-200);
            border-radius: var(--radius-lg);
            background: var(--neutral-50);
            cursor: pointer;
            font-family: inherit;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--neutral-700);
            transition: all 0.2s;
            text-align: center;
        }

        .job-btn-gate3:hover {
            border-color: var(--primary-500);
            background: var(--primary-50);
            color: var(--primary-700);
        }

        .job-btn-gate3.active {
            border-color: var(--primary-600);
            background: var(--primary-600);
            color: white;
        }

        .job-focus-badge {
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        #gate3-criteria-table tbody tr {
            transition: background 0.2s;
        }

        #gate3-criteria-table tbody tr:hover {
            background: var(--primary-50);
        }

        #gate3-criteria-table .domain-weight {
            background: var(--primary-100);
            color: var(--primary-700);
            padding: 0.25rem 0.5rem;
            border-radius: var(--radius-md);
            font-weight: 700;
            display: inline-block;
        }

        #gate3-criteria-table .domain-weight.high {
            background: var(--success-light);
            color: #065f46;
        }

        #gate3-criteria-table .important-tag {
            background: var(--warning-light);
            color: #92400e;
            font-size: 0.7rem;
            padding: 0.125rem 0.375rem;
            border-radius: var(--radius-sm);
            margin-right: 0.25rem;
            font-weight: 600;
        }