@import url("design-tokens.css?v=1");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
/* Design tokens, .custBtn and the legacy :root block now live in design-tokens.css */

/* Video Tutorial Page Styles */
.video-tutorials-page-header,
.fe-pages-signup-page .signup-header {
    margin-bottom: 2rem;
    text-align: center;
}

.video-tutorials-page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ds-text-primary);
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .video-tutorials-page-header h1 {
        font-size: 2rem;
    }
}

.video-tutorials-page-header p {
    font-size: 1rem;
    color: #64748b;
    margin-top: 0.5rem;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .video-tutorials-page-header p {
        font-size: 1.125rem;
    }
}

.video-section-wrapper {
    margin-bottom: 2.5rem;
}

.video-section-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--ds-gray-200);
}

.video-section-header h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ds-text-primary);
    margin: 0;
}

/* Modern Video Cards */
.video-card-modern {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: var(--ds-transition-smooth);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.video-card-modern:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.video-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    background: #f1f5f9;
}

.video-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--ds-transition-slow);
}

.video-card-modern:hover .video-play-overlay {
    background: rgba(78, 177, 186, 0.9);
    transform: translate(-50%, -50%) scale(1.1);
}

.video-play-overlay i {
    color: white;
    font-size: 24px;
    margin-left: 4px;
}

.video-card-content {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.video-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ds-text-primary);
    line-height: 1.5;
    margin-bottom: 12px;
    min-height: 45px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-type-badge {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    border-radius: var(--ds-radius-xl);
    font-size: 12px;
    font-weight: 500;
    margin-top: auto;
}

.video-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.video-action-btn {
    flex: 1;
    padding: 10px;
    border-radius: var(--ds-radius-sm);
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    transition: var(--ds-transition);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.video-action-btn.preview,
.fe-practice_interview-question-page .action-bar-btn.listen-btn:hover,
.fe-practice_interview-question-page .action-bar-btn.record-btn,
.fe-practice_interview-question-page .step-indicator.active,
.fe-practice_interview-selfrating-page .rating-guide-table thead,
.fe-pages-faqs-main-page .faq-item.active .question-number,
.fe-pages-faq-page .faq-item.active .question-number {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
}

.video-action-btn.preview:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.4);
    color: white;
}

.video-action-btn.edit {
    background: var(--ds-bg-light);
    color: #475569;
    border: 1px solid #e2e8f0;
}

.video-action-btn.edit:hover {
    background: #f1f5f9;
    color: var(--ds-text-primary);
}

.video-action-btn.delete {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fee2e2;
}

.video-action-btn.delete:hover {
    background: #fee2e2;
    color: #b91c1c;
}

/* Empty State Styles */
.video-empty-state,
.video-access-restricted {
    background: white;
    border-radius: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 3rem;
    text-align: center;
}

.video-empty-state svg,
.video-access-restricted svg {
    width: 5rem;
    height: 5rem;
    color: var(--ds-gray-300);
    margin: 0 auto 1rem;
}

.video-empty-state h3,
.video-access-restricted h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ds-gray-800);
    margin-bottom: 0.5rem;
}

.video-empty-state p {
    color: var(--ds-gray-500);
}

/* Access Restricted State */

.video-access-restricted p {
    color: var(--ds-gray-500);
}/* Student Custom Styles - Extracted from header-modern.php */


* {
    transition: var(--ds-transition);
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

/* Public marketing pages (loaded via web_header) should keep a white page background */
body:has(.fe-pages-how-it-works-page),
body:has(.fe-pages-faqs-main-page),
body:has(.fe-pages-scoring-collaborative-page),
body:has(.fe-pages-pricing-page),
body:has(.fe-pages-request-demo-page) {
    background: #ffffff;
}

#page-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#main-content {
    flex: 1;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    top: 33px;
    animation: fadeIn 0.2s ease-in-out;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
}

.dropdown-menu a {
    box-shadow: none !important;
}

.dropdown-menu a:hover {
    box-shadow: none !important;
}

header nav a,
header .dropdown button {
    box-shadow: none !important;
}

header nav a:hover,
header .dropdown button:hover {
    box-shadow: none !important;
}

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

/* Modern Header */
header {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* Mobile Menu Styles */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 40;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    display: block;
}

.mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    background-color: white;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.mobile-sidebar.active {
    transform: translateX(0);
}

.mobile-dropdown-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-dropdown-content.active {
    max-height: 500px;
}

@media (max-width: 767px) {
    body.menu-open {
        overflow: hidden;
    }
}

/* Simple Flatpickr Customization */
.flatpickr-calendar {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-gray-200);
}

.flatpickr-day.selected {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
}

.flatpickr-day.selected:hover {
    background: var(--ds-accent);
    border-color: var(--ds-accent);
}

.flatpickr-day:hover {
    background: #e0f2fe;
    border-color: #e0f2fe;
}

.flatpickr-day.today {
    border-color: var(--ds-primary);
}

.flatpickr-months .flatpickr-month {
    background: var(--ds-primary);
    height: 61px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--ds-primary);
    width: 100% !important;
    left: 0 !important;
    text-align: left;
    margin-left: 33px;
}

.flatpickr-current-month {
    position: relative;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    padding-bottom: 5px !important;
    gap: 18px !important;
}

.flatpickr-current-month .numInputWrapper {
    width: 100% !important;
    margin-right: 32px;
}

.flatpickr-months {
    position: relative;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    height: 100% !important;
    align-items: center;
    align-content: center;
}

.date-input-field {
    cursor: pointer;
}

.btn-close {
    background-color: white;
    opacity: 1;
    border-radius: 200px;
    transition: var(--transition-base);
}

/* Profile Page Styles - Extracted from profile-new.php */

/* Modern Form Fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
select {
    border-radius: var(--ds-radius-md) !important;
    border: 2px solid var(--ds-gray-200) !important;
    padding: 12px 16px !important;
    background-color: #ffffff;
    transition: var(--ds-transition-smooth);
    font-size: 15px;
    line-height: 1.5;
    height: auto;
    min-height: 48px;
    box-sizing: border-box;
    width: 100%;
}
textarea {
    border-radius: var(--ds-radius-md) !important;
    border: 2px solid var(--ds-gray-200) !important;
    padding: 14px 18px !important;
    background-color: #ffffff;
    transition: var(--ds-transition-smooth);
    font-size: 15px;
    line-height: 1.5;
    width: 100%;
}
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="url"]:hover,
select:hover,
textarea:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--ds-primary) !important;
    box-shadow: 0 0 0 4px rgba(78, 177, 186, 0.15), 0 4px 12px rgba(78, 177, 186, 0.2) !important;
    background-color: #ffffff !important;
    transform: translateY(-1px);
    border-radius: var(--ds-radius-md) !important;
}
select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234EB1BA'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px !important;
    padding-right: 40px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border-radius: var(--ds-radius-md) !important;
}
/* Modern Checkboxes */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--ds-primary);
    vertical-align: middle;
    transition: var(--ds-transition);
}
input[type="checkbox"]:hover {
    transform: scale(1.05);
}
/* Modern Buttons */
button,
button[type="button"],
button[type="submit"] {
    border-radius: var(--ds-radius-md) !important;
    transition: var(--ds-transition-smooth);
    font-weight: 500;
    letter-spacing: 0.3px;
}
button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
button:active {
    transform: translateY(0);
}
/* Step Navigation */
.step-section {
    display: none;
    animation: fadeInUp 0.4s ease-out;
}
.step-section.active {
    display: block;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.step-nav-item {
    cursor: pointer;
    transition: var(--ds-transition-smooth);
    padding: 8px;
    border-radius: var(--ds-radius-md);
}
.step-nav-item:hover {
    background-color: rgba(78, 177, 186, 0.1);
    transform: translateY(-2px);
}
.step-nav-item.active,
.fe-ancillaries-resources-modern-page .resource-item.active .text-sm,
.fe-ancillaries-unified-guides-page .resource-item.active .text-sm,
.fe-practice_interview-selfrating-page .rating-label.selected,
.fe-practice_interview-selfrating-page .rating-guide-table td:first-child,
.fe-practice_interview-selfrating-page .fe-practice_interview-selfrating-rating-name,
.fe-pages-profile-sections-work-philosophy-page .philosophy-option-card.selected .option-label {
    color: var(--ds-secondary);
    font-weight: 600;
}
.step-nav-item.completed {
    color: var(--ds-primary);
}
.step-nav-item div:first-child {
    transition: var(--ds-transition-smooth);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.step-nav-item:hover div:first-child {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(78, 177, 186, 0.3);
}
.step-section h3,
.step-section h5 {
    text-align: left;
    font-size: 20px;
    font-weight: 600;
    color: var(--ds-text-primary);
    border-bottom: 2px solid var(--ds-gray-200);
    padding-bottom: 8px;
    margin-bottom: 18px;
    position: relative;
    line-height: 1.4;
}
.step-section h3::after,
.step-section h5::after,
.fe-portfolio-feedback-details-page .section-heading::after,
.fe-portfolio-manage-page .tab-content h3::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    border-radius: 2px;
}
/* Modern Cards */
.card-modern,
.fe-pages-faqs-main-page .card-modern {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: var(--ds-transition-smooth);
}
.card-modern:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}
/* Modern Warning Boxes */
.warning-box {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12);
    transition: var(--ds-transition-slow);
    margin-bottom: 20px;
}
.warning-box:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.18);
    transform: translateX(2px);
}
/* Error Styling */
.error-field {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15), 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}
.error-message {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
    display: block;
    font-weight: 500;
    padding-left: 4px;
}
.step-nav-item.has-error div:first-child {
    border: 3px solid #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

/* Modern Labels */
label {
    color: var(--ds-gray-700);
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
    font-size: 14px;
    line-height: 1.5;
}
.step-section label {
    font-size: 13px;
}
.btn-primary {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    box-shadow: 0 4px 14px rgba(78, 177, 186, 0.4);
    border-radius: var(--ds-radius-md) !important;
    display: inline-block;
    text-decoration: none;
    padding: 12px 24px;
    border: none;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #3A9BA5, #1A3F66);
    box-shadow: 0 6px 20px rgba(78, 177, 186, 0.5);
    color: white;
}
.btn-secondary {
    background: #f1f5f9;
    color: #475569;
    border: 2px solid #e2e8f0;
    padding: 12px 24px;
}
.btn-secondary:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #475569;
}
.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
    padding: 12px 24px;
    border: none;
}
.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
    color: white;
}
.step-navigation {
    scrollbar-width: thin;
    -ms-overflow-style: none;
}
.step-navigation::-webkit-scrollbar {
    height: 4px;
}
.step-navigation::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.step-navigation::-webkit-scrollbar-thumb {
    background: var(--ds-primary);
    border-radius: 10px;
}
@media (max-width: 767px) {
    .step-navigation {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    .step-navigation .step-nav-item {
        flex-shrink: 0;
    }
}
/* Quick Setup Modal Styles */
#quickSetupModal {
    display: none;
}
#quickSetupModal[style*="flex"] {
    display: flex !important;
}
.qs-step {
    animation: fadeInUp 0.3s ease-out;
}
#qs_step1_indicator, #qs_step2_indicator, #qs_step3_indicator, #qs_step4_indicator {
    transition: var(--ds-transition-slow);
}
.alert {
    padding: 12px 16px;
    border-radius: var(--ds-radius-sm);
    margin-bottom: 16px;
}
.alert-success {
    background-color: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}
.alert-danger {
    background-color: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}
/* Validation Error Styles */
.error-message {
    color: #ef4444 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
    display: block !important;
    font-weight: 500;
}
.error-field,
input.error-field,
select.error-field,
textarea.error-field {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}
input.error-field:focus,
select.error-field:focus,
textarea.error-field:focus,
.fe-courses-listing-new-page .has-error .form-control,
.fe-courses-listing-new-page .form-control.has-error,
.fe-self_assessments-questions-page .error-field,
.fe-self_assessments-questions-page .error-field:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15), 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}
/* Step Navigation Error Indicator */
.step-nav-item.has-error {
    animation: pulse-error 2s ease-in-out infinite;
}
@keyframes pulse-error {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}
.step-nav-item.has-error div:first-child {
    position: relative;
}
.step-nav-item.has-error div:first-child::after {
    content: '!';
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid white;
    z-index: 10;
}

/* Strength Page Styles - Extracted from strength-new.php */

/* Checklist Item Styles */
.checklist-item {
    transition: var(--ds-transition);
}
.checklist-item:hover {
    transform: translateX(4px);
}
.status-badge {
    transition: var(--ds-transition-slow);
}
/* ==========================================================================
   Common Components - shared "modern" component styles
   Extracted from copy-pasted <style> blocks across Faculty/Frontend views.
   Only contains rule sets verified byte-for-byte identical (ignoring
   whitespace) across 2+ source views (or identical to student_custom.css).
   ========================================================================== */

/* Modern Table
   Verified identical (core rules) across:
   - application/views/Frontend/tickets/listing.php
   - application/views/Faculty/guest_access/list.php
   - application/views/Faculty/rubric/list.php
   NOTE: several other views (Faculty/student/enrollment.php,
   Faculty/courses/view.php, Frontend/courses/listing-new.php,
   Frontend/portfolio/feedback.php, Faculty/rubric/create.php,
   Faculty/rubric/edit.php) define their own DIFFERENT .table-modern
   variants - those are intentionally NOT covered here. */
.table-modern,
.fe-courses-listing-new-page .table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.table-modern thead {
    background: linear-gradient(135deg, var(--ds-bg-light) 0%, #f1f5f9 100%);
}
.table-modern thead th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: #475569 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}
.table-modern tbody tr {
    border-bottom: 1px solid #e2e8f0;
    transition: var(--ds-transition);
}
.table-modern tbody tr:hover {
    background-color: var(--ds-bg-light);
}
.table-modern tbody td {
    padding: 16px;
    font-size: 14px;
    color: #334155;
    vertical-align: middle;
}

/* Modifier: adds vertical margin to a .table-modern instance.
   Verified additive delta in:
   - application/views/Faculty/rubric/create.php */
.table-modern--spaced {
    margin: 20px 0;
}

/* Status Badges - Active/Inactive variants
   Verified identical across:
   - application/views/Faculty/guest_access/list.php
   - application/views/Faculty/rubric/list.php
   - application/views/Faculty/courses/view.php */
.status-active,
.fe-tickets-listing-page .status-open {
    background-color: #DCFCE7;
    color: #166534;
}
.status-inactive,
.fe-tickets-generate-page .alert-danger,
.fe-tickets-listing-page .status-closed {
    background-color: #FEE2E2;
    color: #991B1B;
}

/* Brand-color text utility (= var(--cust-primary), defined in new-modern.css).
   Replaces repeated `style="color: var(--ds-secondary);"` across:
   - application/views/Frontend/pages/games.php
   - application/views/Frontend/practice_interview/question.php */
.text-cust-primary {
    color: var(--cust-primary);
}
/* Extracted from application/views/Frontend/ancillaries/resources-modern.php */

.fe-ancillaries-resources-modern-page * {
    transition: var(--ds-transition);
}
body.fe-ancillaries-resources-modern-page,
.fe-ancillaries-resources-modern-page,
.fe-ancillaries-unified-guides-page,
.fe-courses-listing-new-page,
.fe-nominee-listing-page,
body.fe-tickets-generate-page,
.fe-tickets-generate-page,
body.fe-tickets-conversations-page,
.fe-tickets-conversations-page,
body.fe-tickets-listing-page,
.fe-tickets-listing-page,
body.fe-pages-scholarships-page,
.fe-pages-scholarships-page,
body.fe-pages-career-center-page,
.fe-pages-career-center-page,
body.fe-pages-faqs-main-page,
.fe-pages-faqs-main-page,
body.fe-pages-faq-page,
.fe-pages-faq-page,
body.fe-portfolio-feedback-details-page,
.fe-portfolio-feedback-details-page,
body.fe-portfolio-manage-page,
.fe-portfolio-manage-page {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
}
/* Resource List Styles */
.fe-ancillaries-resources-modern-page .resource-item,
.fe-ancillaries-unified-guides-page .resource-item {
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: var(--ds-transition);
    border-left: 3px solid transparent;
}
.fe-ancillaries-resources-modern-page .resource-item:hover,
.fe-ancillaries-unified-guides-page .resource-item:hover {
    background-color: var(--ds-bg-light);
    border-left-color: var(--ds-primary);
    transform: translateX(2px);
}
.fe-ancillaries-resources-modern-page .resource-item.active,
.fe-ancillaries-unified-guides-page .resource-item.active {
    background-color: #eff6ff;
    border-left-color: var(--ds-secondary);
}

.fe-ancillaries-resources-modern-page .resource-item:last-child {
    border-bottom: none;
}

/* Section Heading Styles */
.fe-ancillaries-resources-modern-page .section-heading,
.fe-ancillaries-unified-guides-page .section-heading {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--ds-secondary) 0%, var(--ds-primary) 100%);
    color: white;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(255,255,255,0.2);
}

/* Preview Area */
.fe-ancillaries-resources-modern-page .preview-container,
.fe-ancillaries-unified-guides-page .preview-container {
    min-height: 600px;
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
}
.fe-ancillaries-resources-modern-page .preview-placeholder,
.fe-ancillaries-unified-guides-page .preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 600px;
    color: #94a3b8;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}
.fe-ancillaries-resources-modern-page .preview-placeholder.hidden {
    display: none;
}
.fe-ancillaries-resources-modern-page #resourcePreviewContent,
.fe-ancillaries-unified-guides-page #resourcePreviewContent {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
.fe-ancillaries-resources-modern-page #resourcePreviewContent.fade-out {
    opacity: 0;
}
.fe-ancillaries-resources-modern-page #resourcePreviewContent.fade-in {
    opacity: 1;
    animation: fe-ancillaries-resources-modern-fadeInContent 0.4s ease-in-out;
}
@keyframes fe-ancillaries-resources-modern-fadeInContent {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fe-ancillaries-resources-modern-page #resourcePreviewContent .row {
    margin: 0;
}
.fe-ancillaries-resources-modern-page #resourcePreviewContent .col-md-4,
.fe-ancillaries-resources-modern-page #resourcePreviewContent .col-md-8 {
    padding: 0;
}
.fe-ancillaries-resources-modern-page #resourcePreviewContent h4,
.fe-ancillaries-unified-guides-page #resourcePreviewContent h4 {
    font-size: 24px;
    font-weight: 700;
    color: var(--ds-text-primary);
    margin-bottom: 16px;
}
.fe-ancillaries-resources-modern-page #resourcePreviewContent iframe,
.fe-ancillaries-unified-guides-page #resourcePreviewContent iframe {
    width: 100%;
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-gray-200);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .fe-ancillaries-resources-modern-page .resource-sidebar {
        margin-bottom: 24px;
    }
}

/* Page Header */
.fe-ancillaries-resources-modern-page .fe-ancillaries-resources-modern-header-center,
.fe-ancillaries-unified-guides-page .fe-ancillaries-unified-guides-header-wrap,
.fe-courses-listing-new-page .fe-courses-listing-new-header-title,
.fe-nominee-listing-page .fe-nominee-listing-page-header,
.fe-practice_interview-question-page .fe-practice_interview-question-header-block,
.fe-self_assessments-score-page .fe-self_assessments-score-header-wrap,
.fe-self_assessments-start-page .fe-self_assessments-start-header,
.fe-tickets-generate-page .fe-tickets-generate-header-center {
    width: 100%;
    text-align: center;
}
/* Extracted from application/views/Frontend/ancillaries/unified-guides.php */

.fe-ancillaries-unified-guides-page * {
    transition: var(--ds-transition);
}

/* Resource List Styles */

.fe-ancillaries-unified-guides-page .resource-item:last-child {
    border-bottom: none;
}

/* Section and Category Headings */

.fe-ancillaries-unified-guides-page .category-heading {
    padding: 12px 20px;
    background: var(--ds-bg-light);
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.5px;
}

/* Preview Area */

.fe-ancillaries-unified-guides-page .preview-placeholder.hidden {
    display: none;
}

.fe-ancillaries-unified-guides-page #resourcePreviewContent.fade-out {
    opacity: 0;
}
.fe-ancillaries-unified-guides-page #resourcePreviewContent.fade-in {
    opacity: 1;
    animation: fe-ancillaries-unified-guides-fadeInContent 0.4s ease-in-out;
}
@keyframes fe-ancillaries-unified-guides-fadeInContent {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fe-ancillaries-unified-guides-page #resourcePreviewContent .row {
    margin: 0;
}
.fe-ancillaries-unified-guides-page #resourcePreviewContent .col-md-4,
.fe-ancillaries-unified-guides-page #resourcePreviewContent .col-md-8 {
    padding: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .fe-ancillaries-unified-guides-page .resource-sidebar {
        margin-bottom: 24px;
    }
}

/* Inline style extractions */

.fe-ancillaries-unified-guides-page .fe-ancillaries-unified-guides-resource-list {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
/* Extracted from application/views/Frontend/courses/ajaxRubricView.php */

.fe-courses-ajaxrubricview-page .fe-courses-ajaxrubricview-title {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: 600;
	color: var(--ds-text-primary);
}

.fe-courses-ajaxrubricview-page .fe-courses-ajaxrubricview-table-wrap {
	overflow-x: auto;
}

.fe-courses-ajaxrubricview-page .fe-courses-ajaxrubricview-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--ds-gray-200);
	border-radius: var(--ds-radius-md);
	overflow: hidden;
}

.fe-courses-ajaxrubricview-page .fe-courses-ajaxrubricview-thead-row {
	background: linear-gradient(135deg, var(--ds-bg-light) 0%, #f1f5f9 100%);
}

.fe-courses-ajaxrubricview-page .fe-courses-ajaxrubricview-th {
	padding: 14px 16px;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--ds-text-primary);
	border-bottom: 2px solid #e2e8f0;
	border-right: 1px solid var(--ds-gray-200);
}

.fe-courses-ajaxrubricview-page .fe-courses-ajaxrubricview-th-last {
	padding: 14px 16px;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--ds-text-primary);
	border-bottom: 2px solid #e2e8f0;
}

.fe-courses-ajaxrubricview-page .fe-courses-ajaxrubricview-body-row {
	transition: var(--ds-transition);
}

.fe-courses-ajaxrubricview-page .fe-courses-ajaxrubricview-td {
	padding: 14px 16px;
	color: #475569;
	font-size: 14px;
	border-bottom: 1px solid var(--ds-gray-200);
	border-right: 1px solid var(--ds-gray-200);
}

.fe-courses-ajaxrubricview-page .fe-courses-ajaxrubricview-td-last {
	padding: 14px 16px;
	color: #475569;
	font-size: 14px;
	border-bottom: 1px solid var(--ds-gray-200);
}

.fe-courses-ajaxrubricview-page .fe-courses-ajaxrubricview-tfoot-row {
	background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
}

.fe-courses-ajaxrubricview-page .fe-courses-ajaxrubricview-tfoot-th {
	padding: 14px 16px;
	font-weight: 600;
	font-size: 14px;
	color: var(--ds-secondary);
	border-right: 1px solid var(--ds-gray-200);
}

.fe-courses-ajaxrubricview-page .fe-courses-ajaxrubricview-tfoot-th-last {
	padding: 14px 16px;
	font-weight: 600;
	font-size: 14px;
	color: var(--ds-secondary);
}

.fe-courses-ajaxrubricview-page .fe-courses-ajaxrubricview-empty {
	text-align: center;
	padding: 2rem;
	color: var(--ds-gray-500);
}

.fe-courses-ajaxrubricview-page .fe-courses-ajaxrubricview-empty-icon {
	font-size: 2rem;
	margin-bottom: 1rem;
	opacity: 0.4;
	color: var(--ds-gray-400);
}

.fe-courses-ajaxrubricview-page .fe-courses-ajaxrubricview-empty-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--ds-gray-500);
}
/* Extracted from application/views/Frontend/courses/listing-new.php */


.fe-courses-listing-new-page * {
    transition: var(--ds-transition);
}

/* Modern Table */

.fe-courses-listing-new-page .table-modern thead th {
    background: linear-gradient(135deg, var(--ds-bg-light) 0%, #f1f5f9 100%);
    color: var(--ds-text-primary);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
}
.fe-courses-listing-new-page .table-modern tbody td {
    padding: 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
    font-size: 14px;
}
.fe-courses-listing-new-page .table-modern tbody tr {
    transition: var(--ds-transition);
}
.fe-courses-listing-new-page .table-modern tbody tr:hover {
    background-color: var(--ds-bg-light);
}
.fe-courses-listing-new-page .table-modern tbody tr:last-child td {
    border-bottom: none;
}
/* Modern Buttons */
.fe-courses-listing-new-page .btn-primary {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    box-shadow: 0 4px 14px rgba(78, 177, 186, 0.4);
    border-radius: var(--ds-radius-md) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 12px 24px;
    border: none;
    font-weight: 500;
    transition: var(--ds-transition-smooth);
}
.fe-courses-listing-new-page .btn-primary:hover {
    background: linear-gradient(135deg, #3A9BA5, #1A3F66);
    box-shadow: 0 6px 20px rgba(78, 177, 186, 0.5);
    color: white;
    transform: translateY(-2px);
}
.fe-courses-listing-new-page .btn-icon {
    background: transparent;
    border: none;
    color: var(--ds-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--ds-radius-sm);
    transition: var(--ds-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fe-courses-listing-new-page .btn-icon:hover {
    background-color: rgba(78, 177, 186, 0.1);
    transform: scale(1.1);
}
.fe-courses-listing-new-page .btn-icon-danger {
    color: #ef4444;
}
.fe-courses-listing-new-page .btn-icon-danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
}
/* Link Styling */
.fe-courses-listing-new-page .tLnk {
    color: var(--ds-primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--ds-transition);
    border-bottom: 1px solid transparent;
}
.fe-courses-listing-new-page .tLnk:hover {
    color: var(--ds-secondary);
    border-bottom-color: var(--ds-secondary);
}
/* Badge/Status */
.fe-courses-listing-new-page .badge-modern {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--ds-radius-md);
    font-size: 12px;
    font-weight: 500;
    background-color: #f1f5f9;
    color: #475569;
}
/* Modern Modal Styling */
body.fe-courses-listing-new-page.modal-open, .fe-courses-listing-new-page.modal-open {
    overflow: hidden;
    padding-right: 0 !important;
}
.fe-courses-listing-new-page .modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}
.fe-courses-listing-new-page .modal.show {
    display: block;
}
.fe-courses-listing-new-page .modal.fade {
    opacity: 0;
    transition: opacity 0.15s linear;
}
.fe-courses-listing-new-page .modal.fade.show {
    opacity: 1;
}
.fe-courses-listing-new-page .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}
.fe-courses-listing-new-page .modal-backdrop.fade {
    opacity: 0;
}
.fe-courses-listing-new-page .modal-backdrop.show {
    opacity: 1;
}
.fe-courses-listing-new-page .modal-dialog {
    position: relative;
    width: auto;
    margin: 1.75rem auto;
    max-width: 500px;
    pointer-events: none;
}
.fe-courses-listing-new-page .modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}
.fe-courses-listing-new-page .modal.show .modal-dialog {
    transform: none;
}
.fe-courses-listing-new-page .modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}
.fe-courses-listing-new-page .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: var(--ds-radius-xl);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05);
    outline: 0;
    overflow: hidden;
}
.fe-courses-listing-new-page .modal-header {
    border-bottom: 1px solid #e2e8f0;
    padding: 24px 28px;
    background: linear-gradient(135deg, #ffffff 0%, var(--ds-bg-light) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fe-courses-listing-new-page .modal-title {
    font-weight: 600;
    color: var(--ds-text-primary);
    font-size: 20px;
    margin: 0;
}
.fe-courses-listing-new-page .btn-close {
    background-color: white;
    opacity: 1 !important;
    border-radius: 200px !important;
    color: black;
    cursor: pointer;
    padding: 4px 8px;
    transition: var(--ds-transition);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fe-courses-listing-new-page .modal-body {
    padding: 28px;
    background-color: #ffffff;
}
.fe-courses-listing-new-page .modal-footer {
    border-top: 1px solid #e2e8f0;
    padding: 20px 28px;
    background-color: var(--ds-bg-light);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.fe-courses-listing-new-page .form-group {
    margin-bottom: 24px;
}
.fe-courses-listing-new-page .form-group:last-child {
    margin-bottom: 0;
}
.fe-courses-listing-new-page .form-group label {
    color: var(--ds-gray-700);
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
    font-size: 14px;
    line-height: 1.5;
}
.fe-courses-listing-new-page .form-control {
    border-radius: var(--ds-radius-md);
    border: 2px solid var(--ds-gray-200);
    padding: 12px 16px;
    background-color: #ffffff;
    transition: var(--ds-transition-smooth);
    font-size: 15px;
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
}

.fe-courses-listing-new-page .form-control:focus {
    outline: none;
    border-color: var(--ds-primary) !important;
    box-shadow: 0 0 0 4px rgba(78, 177, 186, 0.15), 0 4px 12px rgba(78, 177, 186, 0.2);
    transform: translateY(-1px);
}
.fe-courses-listing-new-page select.form-control {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234EB1BA'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
    appearance: none;
}
.fe-courses-listing-new-page .alert {
    border-radius: var(--ds-radius-md);
    padding: 14px 18px;
    margin-bottom: 20px;
    border: 1px solid;
    font-size: 14px;
}
.fe-courses-listing-new-page .alert-danger {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.fe-courses-listing-new-page .has-success .form-control {
    border-color: #10b981;
}
.fe-courses-listing-new-page .fgrp {
    margin-bottom: 24px;
}
/* Rubric Modal Specific Styling */
.fe-courses-listing-new-page #rubricModal .modal-dialog,
.fe-courses-listing-new-page .fe-courses-listing-new-rubric-dialog {
    max-width: 1200px;
    width: 90%;
}
.fe-courses-listing-new-page #rubricViewContent,
.fe-courses-listing-new-page #rubricViewContent .modal-body {
    max-height: 240px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.fe-courses-listing-new-page .btn-secondary {
    background: #f1f5f9;
    color: #475569;
    border: 2px solid #e2e8f0;
    padding: 12px 24px;
    border-radius: var(--ds-radius-md);
    font-weight: 500;
    transition: var(--ds-transition);
    cursor: pointer;
}
.fe-courses-listing-new-page .btn-secondary:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #334155;
}

/* Responsive Table */
@media (max-width: 768px) {
    .fe-courses-listing-new-page .table-modern {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .fe-courses-listing-new-page .table-modern thead,
    .fe-courses-listing-new-page .table-modern tbody,
    .fe-courses-listing-new-page .table-modern tr,
    .fe-courses-listing-new-page .table-modern td,
    .fe-courses-listing-new-page .table-modern th {
        display: block;
    }
    .fe-courses-listing-new-page .table-modern thead {
        display: none;
    }
    .fe-courses-listing-new-page .table-modern tr {
        margin-bottom: 16px;
        border-radius: var(--ds-radius-md);
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .fe-courses-listing-new-page .table-modern td {
        padding: 12px 16px;
        border-bottom: 1px solid #f1f5f9;
        text-align: left;
    }
    .fe-courses-listing-new-page .table-modern td:before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748b;
        display: block;
        margin-bottom: 4px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
}

/* ==========================================================================
   Extracted static inline styles
   ========================================================================== */

.fe-courses-listing-new-page .fe-courses-listing-new-course-name {
    font-weight: 600;
    color: var(--ds-text-primary);
    margin-bottom: 4px;
}
.fe-courses-listing-new-page .fe-courses-listing-new-course-meta {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}
.fe-courses-listing-new-page .fe-courses-listing-new-fs-12 {
    font-size: 12px;
}
.fe-courses-listing-new-page .fe-courses-listing-new-cursor-pointer {
    cursor: pointer;
}
.fe-courses-listing-new-page .fe-courses-listing-new-org-name {
    font-weight: 500;
    color: var(--ds-text-primary);
    margin-bottom: 4px;
}
.fe-courses-listing-new-page .fe-courses-listing-new-faculty-name {
    font-size: 12px;
    color: #64748b;
}
.fe-courses-listing-new-page .fe-courses-listing-new-fw-600 {
    font-weight: 600;
}
.fe-courses-listing-new-page .fe-courses-listing-new-mb-4 {
    margin-bottom: 4px;
}
.fe-courses-listing-new-page .fe-courses-listing-new-mb-4-muted {
    margin-bottom: 4px;
    color: #94a3b8;
}
.fe-courses-listing-new-page .fe-courses-listing-new-fs-11-muted {
    font-size: 11px;
    color: #94a3b8;
}
.fe-courses-listing-new-page .fe-courses-listing-new-score-pct {
    color: #10b981;
    font-weight: 600;
}
.fe-courses-listing-new-page .fe-courses-listing-new-muted-dash {
    color: #94a3b8;
}
.fe-courses-listing-new-page .fe-courses-listing-new-icon-18 {
    font-size: 18px;
}
.fe-courses-listing-new-page .fe-courses-listing-new-icon-18-muted {
    font-size: 18px;
    color: #64748b;
}
.fe-courses-listing-new-page .fe-courses-listing-new-empty-cell {
    text-align: center;
    padding: 40px;
    color: #94a3b8;
}
.fe-courses-listing-new-page .fe-courses-listing-new-empty-title {
    font-size: 16px;
    margin-bottom: 8px;
}
.fe-courses-listing-new-page .fe-courses-listing-new-fs-14 {
    font-size: 14px;
}
.fe-courses-listing-new-page .fe-courses-listing-new-info-text {
    font-size: 16px;
    line-height: 25px;
    color: #475569;
}
.fe-courses-listing-new-page .fe-courses-listing-new-modal-hidden {
    display: none;
}

.fe-courses-listing-new-page .fe-courses-listing-new-rubric-header {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    border-bottom: none;
}
.fe-courses-listing-new-page .fe-courses-listing-new-rubric-title {
    color: #ffffff;
    font-weight: 600;
}
.fe-courses-listing-new-page #rubricViewContent.fe-courses-listing-new-rubric-body,
.fe-courses-listing-page .fe-courses-listing-rubric-body,
.fe-nominee-listing-modal-body {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 28px;
}
.fe-courses-listing-new-page .fe-courses-listing-new-course-modal-content {
    max-width: 600px;
}
.fe-courses-listing-new-page .fe-courses-listing-new-modal-content-data {
    max-height: 240px;
    overflow-y: scroll;
}
.fe-courses-listing-new-page .fe-courses-listing-new-cancel-btn {
    background: #f1f5f9;
    color: #475569;
    border: 2px solid #e2e8f0;
    padding: 12px 24px;
    border-radius: var(--ds-radius-md);
    font-weight: 500;
    transition: var(--ds-transition);
}
/* Extracted from application/views/Frontend/courses/listing.php */

.fe-courses-listing-page .fe-courses-listing-add-btn {
	padding: 3px 15px;
	vertical-align: top;
	margin-left: 5px;
}

.fe-courses-listing-page .fe-courses-listing-course-name {
	font-weight: 600;
}

.fe-courses-listing-page .fe-courses-listing-pointer {
	cursor: pointer;
}

.fe-courses-listing-page .fe-courses-listing-edit-icon {
	margin-right: 8px;
	font-size: 18px;
}

.fe-courses-listing-page .fe-courses-listing-delete-icon {
	color: #ff0000;
	font-size: 18px;
}

.fe-courses-listing-page .fe-courses-listing-info-icon,
.fe-self_assessments-score-page .fe-self_assessments-score-info-icon {
	font-size: 18px;
	cursor: pointer;
}

.fe-courses-listing-page .fe-courses-listing-intro-text {
	font-size: 16px;
	line-height: 25px;
}

.fe-courses-listing-page .fe-courses-listing-rubric-dialog {
	max-width: 1200px;
}

.fe-courses-listing-page .fe-courses-listing-rubric-content,
.fe-nominee-listing-modal-content {
	border-radius: var(--ds-radius-xl);
	border: none;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.fe-courses-listing-page .fe-courses-listing-rubric-header,
.fe-nominee-listing-modal-header {
	background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
	border-bottom: none;
	padding: 24px 28px;
}

.fe-courses-listing-page .fe-courses-listing-rubric-title,
.fe-nominee-listing-modal-title {
	color: #ffffff;
	font-weight: 600;
	font-size: 20px;
	margin: 0;
}

.fe-courses-listing-page .fe-courses-listing-rubric-close,
.fe-nominee-listing-modal-close {
	background: transparent;
	border: none;
	font-size: 24px;
	color: #ffffff;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--ds-radius-sm);
	transition: var(--ds-transition);
	opacity: 0.9;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: brightness(0) invert(1);
}

/* Extracted from application/views/Frontend/courses/manage-new.php */

.fe-courses-manage-new-page .fe-courses-manage-new-label {
    color: var(--ds-gray-700);
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
    font-size: 14px;
}

.fe-courses-manage-new-page .fe-courses-manage-new-select {
    border-radius: var(--ds-radius-md);
    border: 2px solid var(--ds-gray-200);
    padding: 12px 16px;
    background-color: #ffffff;
    transition: var(--ds-transition-smooth);
    font-size: 15px;
    width: 100%;
    cursor: pointer;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'%234EB1BA\'%3E%3Cpath stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M19 9l-7 7-7-7\'%3E%3C/path%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
    appearance: none;
    min-height: 48px;
    box-sizing: border-box;
}
/* Extracted from application/views/Frontend/faculty/ajaxStepThreeFields.php */

.fe-faculty-ajaxstepthreefields-page .fe-faculty-ajaxstepthreefields-hidden-section {
	display: none;
}
/* Extracted from application/views/Frontend/faculty/signup.php */
.fe-faculty-signup-page .modern-card .alert,
.fe-pages-request-demo-page .modern-card .alert {
	border-radius: var(--ds-radius-md);
	padding: 16px 20px;
	margin-bottom: 24px;
	border: none;
}
.fe-faculty-signup-page .modern-card .alert-danger,
.fe-pages-request-demo-page .modern-card .alert-danger,
.fe-portfolio-manage-page .tab-content .alert-danger {
	background: #fee2e2;
	color: #991b1b;
}
.fe-faculty-signup-page .modern-card .alert-success,
.fe-practice_interview-question-page .recording-status.ready,
.fe-practice_interview-question-page .fe-practice_interview-question-status-ready,
.fe-pages-request-demo-page .modern-card .alert-success,
.fe-pages-strength-page .tier-high,
.fe-portfolio-manage-page .tab-content .alert-success {
	background: #d1fae5;
	color: #065f46;
}
.fe-faculty-signup-page .modern-card .fgrp {
	margin-bottom: 1.5rem;
}
.fe-faculty-signup-page .modern-card .form-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--ds-gray-800);
	margin-bottom: 0.5rem;
}
.fe-faculty-signup-page .modern-card .form-control {
	padding: 12px 20px;
	font-size: 15px;
	border: 2px solid var(--ds-gray-200);
	border-radius: var(--ds-radius-md);
	transition: var(--ds-transition-smooth);
}
.fe-faculty-signup-page .modern-card .form-control:focus,
.fe-portfolio-manage-page .tab-content .modal-body .form-group input[type="file"]:focus,
.fe-portfolio-manage-page .modal-body .form-group input[type="file"]:focus {
	outline: none;
	border-color: var(--ds-primary);
	box-shadow: 0 0 0 3px rgba(78, 177, 186, 0.1);
}

.fe-faculty-signup-page .fe-faculty-signup-page-title {
	font-size: 2rem;
	margin-bottom: 0.5rem;
}
.fe-faculty-signup-page .fe-faculty-signup-page-subtitle {
	margin-bottom: 0;
	font-size: 1rem;
}
.fe-faculty-signup-page .fe-faculty-signup-term-label {
	font-size: 15px;
}
.fe-faculty-signup-page .fe-faculty-signup-hidden-step {
	display: none;
}
/* Extracted from application/views/Frontend/forgot_password/change_password.php */

.fe-forgot_password-change_password-page .fe-forgot_password-change_password-login-label {
	font-size: 15px;
	font-style: italic;
	font-weight: 500;
}
/* Extracted from application/views/Frontend/forgot_password/view.php */
.fe-forgot_password-view-page .captacha_sec { display: table; width: 100%; }
.fe-forgot_password-view-page .captcha_text { letter-spacing: 5px; background-color: #f5f5f5; padding: 0 40px !important; font-size: 20px; height: 35px; line-height: 35px; }
.fe-forgot_password-view-page #enter_captcha_txt { letter-spacing: 2px; }
.fe-forgot_password-view-page .cfl{ float:left;}

.fe-forgot_password-view-page .fe-forgot_password-view-account-label { font-size: 15px; font-weight: 500; }
/* Extracted from application/views/Frontend/nominee/listing.php */

.fe-nominee-listing-page * {
    transition: var(--ds-transition);
}

.fe-nominee-listing-page .nominee-card {
    background: #ffffff;
    border-radius: var(--ds-radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: var(--ds-transition-smooth);
    border: 2px solid var(--ds-gray-200);
    padding: 28px;
    margin-bottom: 0;
}
.fe-nominee-listing-page .nominee-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    border-color: var(--ds-primary);
}
.fe-nominee-listing-page .action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.fe-nominee-listing-page .btn-edit {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--ds-radius-md);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: var(--ds-transition-slow);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(78, 177, 186, 0.25);
}
.fe-nominee-listing-page .btn-edit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.4);
}
.fe-nominee-listing-page .btn-delete {
    background: #ef4444;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--ds-radius-md);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: var(--ds-transition-slow);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}
.fe-nominee-listing-page .btn-delete:hover {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}
.fe-nominee-listing-page .btn-add {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--ds-radius-md);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: var(--ds-transition-slow);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.3);
}
.fe-nominee-listing-page .btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78, 177, 186, 0.4);
}
.fe-nominee-listing-page .nominee-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.fe-nominee-listing-page .nominee-value {
    font-size: 16px;
    color: var(--ds-gray-900);
    font-weight: 500;
    margin-bottom: 20px;
}
.fe-nominee-listing-page .nominee-message {
    background: linear-gradient(135deg, var(--ds-gray-50) 0%, var(--ds-gray-100) 100%);
    border-left: 4px solid var(--ds-primary);
    padding: 18px;
    border-radius: var(--ds-radius-md);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ds-gray-700);
    margin-top: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.fe-nominee-listing-page .empty-state {
    text-align: center;
    padding: 80px 20px;
    background: #ffffff;
    border-radius: var(--ds-radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid var(--ds-gray-200);
}
.fe-nominee-listing-page .empty-state-icon,
.fe-tickets-listing-page .empty-state-icon,
.fe-pages-scholarships-page .empty-state-icon,
.fe-pages-career-center-page .empty-state-icon,
.fe-pages-faqs-main-page .empty-state-icon,
.fe-pages-faq-page .empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #E0F2FE 0%, #DBEAFE 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fe-nominee-listing-page .info-card {
    background: #ffffff;
    border-radius: var(--ds-radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 2px solid var(--ds-gray-200);
    padding: 28px;
    margin-bottom: 32px;
}

/* Extracted static inline styles */

.fe-nominee-listing-page .fe-nominee-listing-icon-large {
    font-size: 36px;
    color: var(--ds-primary);
}
.fe-nominee-listing-page .fe-nominee-listing-empty-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--ds-gray-900);
    margin-bottom: 8px;
}
.fe-nominee-listing-page .fe-nominee-listing-empty-text {
    color: var(--ds-gray-500);
    margin-bottom: 24px;
}
.fe-nominee-listing-page .fe-nominee-listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}
/* The rubric modal markup below sits outside the .fe-nominee-listing-page
   wrapper, so these rules are intentionally left unscoped (global). The
   class names are unique/prefixed to avoid collisions. */
.fe-nominee-listing-modal-dialog {
    max-width: 1200px;
}

/* Extracted from application/views/Frontend/portfolio_analysis/view.php */
.fe-portfolio_analysis-view-page {
  background-color: #f8f9fa;
}
/* --bs-primary/--bs-secondary bridge moved to design-tokens.css */
:root {
  --bs-black: #333;
}
.fe-portfolio_analysis-view-page .badgeSkills{ line-height:16px;white-space:unset; text-align: left;}
.fe-portfolio_analysis-view-page .progress-container {
  width: 100%;
  height: 20px;
  background: #eee;
  border-radius: 50px;
}
.fe-portfolio_analysis-view-page #progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
  transition: width 0.5s linear;
  border-radius: 50px;
}
.fe-portfolio_analysis-view-page .readiness-score {
  font-size: 2.5rem;
  font-weight: 700;
}
.fe-portfolio_analysis-view-page .badge-soft {
  background-color: rgba(13,110,253,0.08);
  color: var(--bs-black);
}
.fe-portfolio_analysis-view-page .badge-soft-success {
  background-color: rgba(25,135,84,0.08);
  color: #198754;
}
.fe-portfolio_analysis-view-page .badge-soft-warning {
  background-color: rgba(255,193,7,0.12);
  color: #856404;
}
.fe-portfolio_analysis-view-page .badge-soft-danger {
  background-color: rgba(220,53,69,0.08);
  color: #dc3545;
}
.fe-portfolio_analysis-view-page .card-sticky {
  position: sticky;
  top: 1rem;
}
.fe-portfolio_analysis-view-page .tInst {
  font-size: 15px;
  color: var(--ds-gray-500);
  line-height: 1.6;
  padding: 0.575rem 1rem;
  background: var(--ds-bg-light);
  border-left: 3px solid var(--ds-primary);
  border-radius: 6px;
  margin-bottom: 1rem;
  font-weight: 600;
}
.fe-portfolio_analysis-view-page .form-label {
    margin-bottom: .3rem;
    font-size: 16px;
    font-weight: 600;
}
.fe-portfolio_analysis-view-page .reasonOpt{margin:0 20px;}
.fe-portfolio_analysis-view-page .reasonOpt label{display:block;}
.fe-portfolio_analysis-view-page label.error{color:#ff0000;}
.fe-portfolio_analysis-view-page .text-primary{color:var(--bs-black) !important;}
.fe-portfolio_analysis-view-page .btn-primary, .fe-portfolio_analysis-view-page .modal-header {
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
  border: none;
}
.fe-portfolio_analysis-view-page .btn-primary:hover,
.fe-portfolio_analysis-view-page .btn-primary:focus {
  background: linear-gradient(135deg, var(--bs-secondary), var(--bs-primary));
}
.fe-portfolio_analysis-view-page .nav-pills .nav-link{font-weight:600;}
.fe-portfolio_analysis-view-page .nav-pills .nav-link.active, .fe-portfolio_analysis-view-page .nav-pills .show>.nav-link {
  background-color: var(--bs-primary);
}
.fe-portfolio_analysis-view-page .nav-link{color: var(--bs-secondary);}
.fe-portfolio_analysis-view-page .scoreRange{ font-weight:600; font-size:.875em}
.fe-portfolio_analysis-view-page .btn-check:checked+.btn, .fe-portfolio_analysis-view-page .btn.active, .fe-portfolio_analysis-view-page .btn.show, .fe-portfolio_analysis-view-page .btn:first-child:active, .fe-portfolio_analysis-view-page :not(.btn-check)+.btn:active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.fe-portfolio_analysis-view-page .btn-check+.btn:hover {
  color: #fff;
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}
.fe-portfolio_analysis-view-page .btn-outline-primary, .fe-portfolio_analysis-view-page .btn-outline-primary:hover{ border-color: var(--bs-primary); color: var(--bs-secondary); font-weight:600}
.fe-portfolio_analysis-view-page .blurps{filter:blur(4px);pointer-events: none; user-select: none;}

/* Extracted static inline styles */
.fe-portfolio_analysis-view-page .fe-portfolio_analysis-view-uppercase {
  text-transform: uppercase;
}
.fe-portfolio_analysis-view-page .fe-portfolio_analysis-view-fw-600 {
  font-weight: 600;
}
.fe-portfolio_analysis-view-page .fe-portfolio_analysis-view-d-none {
  display: none;
}
.fe-portfolio_analysis-view-page .fe-portfolio_analysis-view-progress-subtext {
  font-size: 16px;
  margin-top: 5px;
}
.fe-portfolio_analysis-view-page .fe-portfolio_analysis-view-circle-56 {
  width: 56px;
  height: 56px;
}
.fe-portfolio_analysis-view-page .fe-portfolio_analysis-view-text-center {
  text-align: center;
}
.fe-portfolio_analysis-view-page .fe-portfolio_analysis-view-thumb-icon {
  font-size: 20px;
  cursor: pointer;
}
/* Extracted from application/views/Frontend/post-graduation-survey/ajax-questions.php */

.fe-post-graduation-survey-ajax-questions-page .fe-post-graduation-survey-ajax-questions-question {
    line-height: 30px;
}

.fe-post-graduation-survey-ajax-questions-page .fe-post-graduation-survey-ajax-questions-textbox {
    resize: none;
}
/* Extracted from application/views/Frontend/post-graduation-survey/questions.php */

.fe-post-graduation-survey-questions-page .fe-post-graduation-survey-questions-logo-img {
    width: 100%;
}
/* Extracted from application/views/Frontend/post-graduation-survey/results.php */

.fe-post-graduation-survey-results-page .fe-post-graduation-survey-results-illustration-img {
    width: 100%;
    height: auto;
}
/* Extracted from application/views/Frontend/post-graduation-survey/start.php */

.fe-post-graduation-survey-start-page .fe-post-graduation-survey-start-card-up {
    transform: translateY(-20px);
}

.fe-post-graduation-survey-start-page .fe-post-graduation-survey-start-card-down {
    transform: translateY(20px);
}
/* Extracted from application/views/Frontend/practice_interview/question.php */


.fe-practice_interview-question-page .sitff,
.fe-practice_interview-selfrating-page .sitff {
    font-family: 'Dancing Script', serif;
    font-weight: 700;
}

.fe-practice_interview-question-page .practice-question-card,
.fe-practice_interview-selfrating-page .rating-card {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 30px;
    transition: var(--ds-transition-smooth);
    margin-bottom: 20px;
}

.fe-practice_interview-question-page .question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--ds-gray-100);
}

.fe-practice_interview-question-page .question-counter {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    padding: 8px 20px;
    border-radius: var(--ds-radius-xl);
    font-weight: 600;
    font-size: 14px;
}

.fe-practice_interview-question-page .question-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--ds-gray-800);
    line-height: 1.6;
    margin: 20px 0;
}

.fe-practice_interview-question-page .question-title h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--ds-gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fe-practice_interview-question-page .action-bar-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-radius: var(--ds-radius-md);
    border: none;
    cursor: pointer;
    transition: var(--ds-transition-slow);
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.fe-practice_interview-question-page .action-bar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.fe-practice_interview-question-page .action-bar-btn.listen-btn {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    color: var(--ds-secondary);
    border: 2px solid var(--ds-primary);
}

.fe-practice_interview-question-page .action-bar-btn.record-btn:hover {
    background: linear-gradient(135deg, #3A9BA5, #1A3F66);
    box-shadow: 0 6px 20px rgba(78, 177, 186, 0.4);
}

.fe-practice_interview-question-page .action-bar-btn .icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.fe-practice_interview-question-page .action-bar-btn.listen-btn .icon-wrapper {
    background: rgba(78, 177, 186, 0.1);
}

.fe-practice_interview-question-page .action-bar-btn.listen-btn:hover .icon-wrapper {
    background: rgba(255, 255, 255, 0.25);
}

.fe-practice_interview-question-page .action-bar-btn .btn-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fe-practice_interview-question-page .action-bar-btn .btn-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.fe-practice_interview-question-page .action-bar-btn .btn-subtitle {
    font-size: 13px;
    font-weight: 400;
    opacity: 0.8;
}

.fe-practice_interview-question-page .action-bar-btn svg {
    width: 24px;
    height: 24px;
}

.fe-practice_interview-question-page .action-bar-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.fe-practice_interview-question-page .action-bar-btn.playing .icon-wrapper {
    position: relative;
}

.fe-practice_interview-question-page .action-bar-btn.playing .icon-wrapper svg {
    display: none;
}

.fe-practice_interview-question-page .action-bar-btn.playing .icon-wrapper::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(78, 177, 186, 0.3);
    border-top-color: var(--ds-primary);
    border-radius: 50%;
    animation: fe-practice_interview-question-spin 1s linear infinite;
}

@keyframes fe-practice_interview-question-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fe-practice_interview-question-page .pulse {
    animation: fe-practice_interview-question-pulse-bar 2s infinite;
}

@keyframes fe-practice_interview-question-pulse-bar {
    0% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(78, 177, 186, 0.4);
    }
    70% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 8px rgba(78, 177, 186, 0);
    }
    100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(78, 177, 186, 0);
    }
}

@keyframes fe-practice_interview-question-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(78, 177, 186, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(78, 177, 186, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(78, 177, 186, 0);
    }
}

.fe-practice_interview-question-page .btn-modern-primary {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    padding: 14px 28px;
    border-radius: var(--ds-radius-md);
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: var(--ds-transition-slow);
    box-shadow: 0 4px 15px rgba(78, 177, 186, 0.3);
    width: 100%;
    max-width: 300px;
    margin: 20px auto;
    display: block;
}

.fe-practice_interview-question-page .btn-modern-primary:hover,
.fe-practice_interview-question-page .startRecordBtn:hover:not(:disabled),
.fe-practice_interview-selfrating-page .btn-modern-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78, 177, 186, 0.4);
    background: linear-gradient(135deg, #3A9BA5, #1A3F66);
}

.fe-practice_interview-question-page .btn-modern-primary:disabled,
.fe-practice_interview-selfrating-page .btn-modern-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.fe-practice_interview-question-page .btn-modern-outline {
    background: transparent;
    color: var(--ds-primary);
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 14px;
    border: 2px solid var(--ds-primary);
    cursor: pointer;
    transition: var(--ds-transition-slow);
    width: 100%;
    max-width: 300px;
    margin: 10px auto;
    display: block;
}

.fe-practice_interview-question-page .btn-modern-outline:hover {
    background: var(--ds-primary);
    color: white;
    transform: translateY(-1px);
}

.fe-practice_interview-question-page .session-info,
.fe-practice_interview-selfrating-page .session-info {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 4px solid var(--ds-primary);
    border-radius: var(--ds-radius-sm);
    padding: 15px 20px;
    margin-bottom: 20px;
}

.fe-practice_interview-question-page .session-info strong {
    color: var(--ds-secondary);
}

.fe-practice_interview-question-page .session-info a {
    color: var(--ds-primary);
    text-decoration: underline;
    cursor: pointer;
}

.fe-practice_interview-question-page .session-info a:hover {
    color: var(--ds-secondary);
}

.fe-practice_interview-question-page .step-guide {
    background: var(--ds-gray-50);
    border-left: 4px solid var(--ds-primary);
    border-radius: var(--ds-radius-sm);
    padding: 15px 20px;
    margin: 15px 0;
    font-size: 14px;
    color: var(--ds-gray-500);
}

.fe-practice_interview-question-page .step-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    padding: 8px 16px;
    background: #f0f9ff;
    border-radius: var(--ds-radius-xl);
    font-size: 13px;
    color: var(--ds-secondary);
    font-weight: 500;
}

.fe-practice_interview-question-page .action-hint {
    text-align: center;
    margin: 15px 0;
    padding: 12px;
    background: #fef3c7;
    border-radius: var(--ds-radius-sm);
    font-size: 13px;
    color: #92400e;
    font-weight: 500;
}

.fe-practice_interview-question-page .recording-status {
    text-align: center;
    padding: 15px;
    margin: 15px 0;
    border-radius: var(--ds-radius-sm);
    font-weight: 600;
    font-size: 14px;
}

.fe-practice_interview-question-page .recording-status.recording {
    background: #fee2e2;
    color: #991b1b;
    animation: fe-practice_interview-question-pulse-glow 2s infinite;
}

@keyframes fe-practice_interview-question-pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.fe-practice_interview-question-page .recording-status.complete,
.fe-portfolio-manage-page .tab-content .alert-info {
    background: #dbeafe;
    color: #1e40af;
}

.fe-practice_interview-question-page .action-buttons-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    margin: 25px 0;
}

.fe-practice_interview-question-page .btn-with-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.fe-practice_interview-question-page .btn-label {
    font-size: 12px;
    color: var(--ds-gray-500);
    font-weight: 500;
}

.fe-practice_interview-question-page .recording-controls-wrapper {
    background: linear-gradient(135deg, #ffffff 0%, var(--ds-gray-50) 100%);
    border-radius: var(--ds-radius-lg);
    padding: 24px;
    margin: 20px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--ds-gray-200);
}

.fe-practice_interview-question-page .recording-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 768px) {
    .fe-practice_interview-question-page .recording-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.fe-practice_interview-question-page .recording-media-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    position: relative;
    aspect-ratio: 16/9;
    min-height: 280px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--ds-gray-700);
}

.fe-practice_interview-question-page .recording-media-section video,
.fe-practice_interview-question-page .recording-media-section audio,
.fe-practice_interview-question-page .fe-practice_interview-question-video-fill {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fe-practice_interview-question-page .recording-controls-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: white;
    padding: 20px;
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-gray-200);
}

.fe-practice_interview-question-page .controls-header {
    text-align: center;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--ds-gray-100);
    margin-bottom: 5px;
}

.fe-practice_interview-question-page .controls-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ds-gray-800);
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fe-practice_interview-question-page .controls-header p {
    font-size: 13px;
    color: var(--ds-gray-500);
    margin: 0;
    font-weight: 400;
}

.fe-practice_interview-question-page .timer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 14px;
    border: 2px solid #fbbf24;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
}

.fe-practice_interview-question-page .timer-label {
    font-size: 11px;
    color: #92400e;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fe-practice_interview-question-page .timer-display {
    font-size: 32px;
    font-weight: 800;
    color: #92400e;
    font-family: 'Courier New', 'Monaco', monospace;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(146, 64, 14, 0.2);
}

.fe-practice_interview-question-page .recording-controls-compact {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.fe-practice_interview-question-page .control-button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.fe-practice_interview-question-page .startRecordBtn, .fe-practice_interview-question-page .stopRecordBtn {
    height: 56px;
    border-radius: var(--ds-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: var(--ds-transition-smooth);
    font-weight: 600;
    font-size: 15px;
    position: relative;
    overflow: hidden;
}

.fe-practice_interview-question-page .startRecordBtn {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(78, 177, 186, 0.3);
}

.fe-practice_interview-question-page .startRecordBtn:active:not(:disabled) {
    transform: translateY(0);
}

.fe-practice_interview-question-page .startRecordBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background: linear-gradient(135deg, var(--ds-gray-400), var(--ds-gray-500));
}

.fe-practice_interview-question-page .stopRecordBtn {
    background: white;
    color: var(--ds-primary);
    border: 2px solid var(--ds-primary);
    border-radius: var(--ds-radius-md);
    box-shadow: 0 2px 8px rgba(78, 177, 186, 0.15);
}

.fe-practice_interview-question-page .stopRecordBtn:hover:not(:disabled) {
    transform: translateY(-2px);
    background: rgba(78, 177, 186, 0.05);
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.25);
    color: var(--ds-secondary);
}

.fe-practice_interview-question-page .stopRecordBtn:active:not(:disabled) {
    transform: translateY(0);
}

.fe-practice_interview-question-page .stopRecordBtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    border-color: var(--ds-gray-300);
    color: var(--ds-gray-400);
    background: white;
}

.fe-practice_interview-question-page .startRecordBtn svg, .fe-practice_interview-question-page .stopRecordBtn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.fe-practice_interview-question-page .media-label {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.95), rgba(30, 78, 122, 0.95));
    backdrop-filter: blur(10px);
    color: white;
    padding: 8px 14px;
    border-radius: var(--ds-radius-sm);
    font-size: 12px;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.fe-practice_interview-question-page .recording-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--ds-radius-xl);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}

.fe-practice_interview-question-page .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: fe-practice_interview-question-pulse-dot 2s infinite;
}

@keyframes fe-practice_interview-question-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Utility classes replacing repeated inline style="" attributes */
.fe-practice_interview-question-page .step-number-badge {
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.fe-practice_interview-question-page .step-item {
    counter-increment: step-counter;
    margin-bottom: 20px;
    padding-left: 40px;
    position: relative;
    line-height: 1.8;
}

.fe-practice_interview-question-page .step-item--last {
    margin-bottom: 0;
}

/* Extracted static inline styles */

.fe-practice_interview-question-page .fe-practice_interview-question-bold-label {
    font-weight: 600;
}

.fe-practice_interview-question-page .fe-practice_interview-question-learn-more-link {
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.fe-practice_interview-question-page .fe-practice_interview-question-mt-20 {
    margin-top: 20px;
}

.fe-practice_interview-question-page .fe-practice_interview-question-action-btn-compact,
.fe-practice_interview-question-page .fe-practice_interview-question-replay-btn-compact {
    max-width: 100%;
    padding: 10px;
}

.fe-practice_interview-question-page .fe-practice_interview-question-hidden {
    display: none;
}

.fe-practice_interview-question-page .fe-practice_interview-question-mt-20-gap-12 {
    margin-top: 20px;
    gap: 12px;
}

.fe-practice_interview-question-page .fe-practice_interview-question-media-center {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.fe-practice_interview-question-page .fe-practice_interview-question-full-width {
    width: 100%;
}

.fe-practice_interview-question-page .fe-practice_interview-question-dot-ready {
    background: #10b981;
}

.fe-practice_interview-question-page .fe-practice_interview-question-icon-inline {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

.fe-practice_interview-question-page .fe-practice_interview-question-full-height {
    height: 100%;
}

.fe-practice_interview-question-page .fe-practice_interview-question-mt-25 {
    margin-top: 25px;
}

.fe-practice_interview-question-page .fe-practice_interview-question-mt-15 {
    margin-top: 15px;
}

.fe-practice_interview-question-page .fe-practice_interview-question-modal-content {
    border-radius: var(--ds-radius-lg);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.fe-practice_interview-question-page .fe-practice_interview-question-modal-header {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    border-radius: 16px 16px 0 0;
    padding: 20px 30px;
    border-bottom: none;
}

.fe-practice_interview-question-page .fe-practice_interview-question-modal-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.fe-practice_interview-question-page .fe-practice_interview-question-modal-close {
    filter: brightness(0) invert(1);
}

.fe-practice_interview-question-page .fe-practice_interview-question-modal-body {
    padding: 30px;
}

.fe-practice_interview-question-page .fe-practice_interview-question-instructions-list {
    list-style: none;
    counter-reset: step-counter;
    padding: 0;
    margin: 0;
}

.fe-practice_interview-question-page .fe-practice_interview-question-step-heading {
    color: var(--ds-secondary);
    font-size: 16px;
}

.fe-practice_interview-question-page .fe-practice_interview-question-modal-footer {
    border-top: 1px solid var(--ds-gray-200);
    padding: 20px 30px;
    border-radius: 0 0 16px 16px;
}

.fe-practice_interview-question-page .fe-practice_interview-question-modal-btn-narrow {
    max-width: 150px;
    margin: 0;
}
/* Extracted from application/views/Frontend/practice_interview/selfRating.php */


.fe-practice_interview-selfrating-page .session-info strong {
    color: var(--ds-secondary);
}
.fe-practice_interview-selfrating-page .rating-question {
    text-align: center;
    margin: 30px 0;
}
.fe-practice_interview-selfrating-page .rating-question h1 {
    font-size: 22px;
    font-weight: 600;
    color: var(--ds-gray-800);
    margin-bottom: 15px;
}
.fe-practice_interview-selfrating-page .rating-question h4 {
    font-size: 16px;
    font-weight: 500;
    color: var(--ds-gray-500);
    margin-top: 10px;
}
.fe-practice_interview-selfrating-page .stars-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 30px 0;
    padding: 4px;
    background: var(--ds-gray-50);
    border-radius: var(--ds-radius-md);
}
.fe-practice_interview-selfrating-page .star-rating {
    cursor: pointer;
    transition: var(--ds-transition);
    padding: 5px;
    border-radius: var(--ds-radius-sm);
}
.fe-practice_interview-selfrating-page .star-rating:hover {
    background: var(--ds-gray-100);
    transform: scale(1.1);
}
.fe-practice_interview-selfrating-page .star-rating svg {
    width: 30px;
    height: 48px;
    fill: var(--ds-gray-300);
    stroke: var(--ds-gray-400);
    stroke-width: 1;
    transition: var(--ds-transition);
}
.fe-practice_interview-selfrating-page .star-rating.rated svg,
.fe-practice_interview-selfrating-page .star-rating:hover svg {
    fill: #fbbf24;
    stroke: #f59e0b;
    stroke-width: 2;
    filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3));
}
.fe-practice_interview-selfrating-page .star-rating.rated svg {
    fill: #fbbf24;
    stroke: #f59e0b;
}
.fe-practice_interview-selfrating-page .rating-label {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
    color: var(--ds-gray-500);
    font-weight: 500;
}

.fe-practice_interview-selfrating-page .btn-modern-primary {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    padding: 14px 32px;
    border-radius: var(--ds-radius-md);
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: var(--ds-transition-slow);
    box-shadow: 0 4px 15px rgba(78, 177, 186, 0.3);
    width: 100%;
    max-width: 300px;
    margin: 20px auto;
    display: block;
}

.fe-practice_interview-selfrating-page .rating-guide-table {
    background: white;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-top: 30px;
}
.fe-practice_interview-selfrating-page .rating-guide-table table {
    width: 100%;
    border-collapse: collapse;
}

.fe-practice_interview-selfrating-page .rating-guide-table th {
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.fe-practice_interview-selfrating-page .rating-guide-table tbody tr {
    border-bottom: 1px solid var(--ds-gray-200);
    transition: background 0.2s ease;
}
.fe-practice_interview-selfrating-page .rating-guide-table tbody tr:hover {
    background: var(--ds-gray-50);
}
.fe-practice_interview-selfrating-page .rating-guide-table tbody tr:last-child {
    border-bottom: none;
}
.fe-practice_interview-selfrating-page .rating-guide-table td {
    padding: 16px 20px;
    font-size: 14px;
    color: var(--ds-gray-700);
}

.fe-practice_interview-selfrating-page .star-display {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin-right: 8px;
}
.fe-practice_interview-selfrating-page .star-display svg {
    width: 20px;
    height: 20px;
    fill: var(--ds-secondary);
}

/* Extracted static inline styles */
.fe-practice_interview-selfrating-page .fe-practice_interview-selfrating-session-label {
    font-weight: 600;
}

/* Extracted from application/views/Frontend/practice_interview/start.php */
.fe-practice_interview-start-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.fe-practice_interview-start-page .coming-soon-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 4rem 3rem;
    text-align: center;
    max-width: 600px;
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fe-practice_interview-start-page .coming-soon-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

.fe-practice_interview-start-page .coming-soon-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-secondary) 100%);
}

.fe-practice_interview-start-page .coming-soon-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-secondary) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(78, 177, 186, 0.3);
    animation: fe-practice_interview-start-pulse 2s ease-in-out infinite;
}

@keyframes fe-practice_interview-start-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(78, 177, 186, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 40px rgba(78, 177, 186, 0.4);
    }
}

.fe-practice_interview-start-page .coming-soon-icon svg {
    width: 60px;
    height: 60px;
    color: white;
}

.fe-practice_interview-start-page .coming-soon-title {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.fe-practice_interview-start-page .coming-soon-subtitle {
    font-size: 1.25rem;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.fe-practice_interview-start-page .coming-soon-description {
    font-size: 1rem;
    color: #495057;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.fe-practice_interview-start-page .coming-soon-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid #e9ecef;
}

@media (max-width: 768px) {
    .fe-practice_interview-start-page .coming-soon-card {
        padding: 3rem 2rem;
    }

    .fe-practice_interview-start-page .coming-soon-title {
        font-size: 2rem;
    }

    .fe-practice_interview-start-page .coming-soon-icon {
        width: 100px;
        height: 100px;
    }

    .fe-practice_interview-start-page .coming-soon-icon svg {
        width: 50px;
        height: 50px;
    }
}
/* Extracted from application/views/Frontend/self_assessments/career_readiness.php */
.fe-self_assessments-career_readiness-page,
.fe-self_assessments-layout-start-page{min-height:calc(100vh - 136px);background-image: radial-gradient(circle at 51% 29%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 3%,transparent 3%, transparent 100%),radial-gradient(circle at 95% 73%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 3%,transparent 3%, transparent 100%),radial-gradient(circle at 66% 49%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 3%,transparent 3%, transparent 100%),radial-gradient(circle at 89% 3%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 3%,transparent 3%, transparent 100%),radial-gradient(circle at 84% 66%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 3%,transparent 3%, transparent 100%),radial-gradient(circle at 85% 96%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 7%,transparent 7%, transparent 100%),radial-gradient(circle at 26% 14%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 7%,transparent 7%, transparent 100%),radial-gradient(circle at 59% 13%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 7%,transparent 7%, transparent 100%),radial-gradient(circle at 21% 44%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 7%,transparent 7%, transparent 100%),radial-gradient(circle at 9% 11%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 7%,transparent 7%, transparent 100%),radial-gradient(circle at 70% 60%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 7%,transparent 7%, transparent 100%),radial-gradient(circle at 27% 19%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 7%,transparent 7%, transparent 100%),radial-gradient(circle at 33% 2%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 7%,transparent 7%, transparent 100%),radial-gradient(circle at 91% 36%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 5%,transparent 5%, transparent 100%),radial-gradient(circle at 100% 8%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 5%,transparent 5%, transparent 100%),radial-gradient(circle at 87% 65%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 5%,transparent 5%, transparent 100%),radial-gradient(circle at 36% 37%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 5%,transparent 5%, transparent 100%),radial-gradient(circle at 89% 79%, rgba(39,174,96, 0.14) 0%, rgba(39,174,96, 0.14) 5%,transparent 5%, transparent 100%),linear-gradient(180deg, rgba(255,255,255, 0.27),rgba(253,253,253, 0.85));}
.fe-self_assessments-career_readiness-page .bro_cr_wrap,
.fe-self_assessments-layout-start-page .bro_cr_wrap{background-color:#fff;padding:30px 55px;border:1px solid #eee;border-radius:10px;margin:15px auto;width:100%;max-width:1000px; box-shadow: 0 1px 20px rgba(0, 0, 0, 0.16);}
.fe-self_assessments-career_readiness-page .bcr_wlc h2,
.fe-self_assessments-layout-start-page .bcr_wlc h2{ font-weight:bold; text-transform:uppercase;}
.fe-self_assessments-career_readiness-page .bcr_wlc h2 .f{color:#0F916A;}
.fe-self_assessments-career_readiness-page .bcr_wlc h2 .s{color:#8B0E3D;}
.fe-self_assessments-career_readiness-page .bcr_wlc h2 .t{color:#0652A2;}
.fe-self_assessments-career_readiness-page .bcr_wlc.text-center{margin:15px auto}
.fe-self_assessments-career_readiness-page .bcr_wlc.text-center p,
.fe-self_assessments-layout-start-page .bcr_wlc.text-center p{font-size: 16px;line-height: 28px; margin-top:20px; color:#000;}
.fe-self_assessments-career_readiness-page .bcrw_logo,
.fe-self_assessments-layout-start-page .bcrw_logo{max-width:200px;margin:10px auto}
.fe-self_assessments-career_readiness-page .bcr_wlc .btn,
.fe-self_assessments-layout-start-page .bcr_wlc .btn{margin-top:25px;padding: 10px 25px;}
/* Extracted from application/views/Frontend/self_assessments/layout-start.php */

.fe-self_assessments-layout-start-page .bcr_wlc h2 .f{color:#0F916A;}
.fe-self_assessments-layout-start-page .bcr_wlc h2 .s{color:#8B0E3D;}
.fe-self_assessments-layout-start-page .bcr_wlc h2 .t{color:#0652A2;}
.fe-self_assessments-layout-start-page .bcr_wlc.text-center{margin:15px auto}

.fe-self_assessments-layout-start-page .ques_section h2{ margin-top:0; margin-bottom:20px;}
.fe-self_assessments-layout-start-page .ques{ margin:15px 0;}
.fe-self_assessments-layout-start-page .ques label{ font-size:16px; line-height:25px;margin-bottom: 10px;}
.fe-self_assessments-layout-start-page .form-group span.error{ display:none !important;}
.fe-self_assessments-layout-start-page .ques_section .btn{ margin-top:0; padding:6px 50px;}
.fe-self_assessments-layout-start-page .instruction {
    background-color: #e5f0eb;
    padding: 10px 16px;
    line-height: 25px;
    margin-bottom: 10px;
    font-weight: 500;
    border-radius: var(--ds-radius-xs);
    text-align: left;
    font-size: 16px;
}
.fe-self_assessments-layout-start-page .instruction ul{ margin-left:20px;}
/* Extracted from application/views/Frontend/self_assessments/questions.php */

.fe-self_assessments-questions-page .assessment-card,
.fe-self_assessments-start-page .assessment-start-card {
    background: white;
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.fe-self_assessments-questions-page .course-info {
    background: #f8f9fa;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid #e9ecef;
}
.fe-self_assessments-questions-page .course-info p,
.fe-self_assessments-score-page .course-info-header p,
.fe-self_assessments-start-page .course-info-section p {
    margin: 0.5rem 0;
    font-size: 0.95rem;
    color: #495057;
}
.fe-self_assessments-questions-page .course-info label,
.fe-self_assessments-score-page .course-info-header label,
.fe-self_assessments-start-page .course-info-section label {
    font-weight: 600;
    color: #212529;
    margin-left: 0.5rem;
}
.fe-self_assessments-questions-page .assessment-body {
    padding: 0 20px;
}
.fe-self_assessments-questions-page .instruction-box {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 4px solid var(--ds-primary);
    padding: 0.875rem 1rem;
    border-radius: var(--ds-radius-md);
    margin-bottom: 2rem;
}
.fe-self_assessments-questions-page .instruction-box p {
    font-size: 0.875rem;
    color: var(--ds-gray-700);
    line-height: 1.625;
    margin: 0;
}
.fe-self_assessments-questions-page .instruction-box strong {
    font-weight: 600;
    color: var(--ds-gray-700);
	font-size: 16px;
}
.fe-self_assessments-questions-page .questions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.fe-self_assessments-questions-page .question-item {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: var(--ds-radius-md);
    padding: 1.5rem;
    transition: var(--ds-transition-slow);
}
.fe-self_assessments-questions-page .question-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--ds-primary);
}
.fe-self_assessments-questions-page .question-item label {
    display: block;
    font-weight: 600;
    font-size: 1.05rem;
    color: #212529;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.fe-self_assessments-questions-page .question-item select {
    width: 100%;
}
.fe-self_assessments-questions-page .progress-indicator {
    background: #f8f9fa;
    border-radius: var(--ds-radius-md);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #e9ecef;
}
.fe-self_assessments-questions-page .progress-bar-container {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 0.75rem;
}
.fe-self_assessments-questions-page .progress-bar-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    border-radius: 10px;
    transition: width 0.3s ease;
}
.fe-self_assessments-questions-page .progress-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    color: #495057;
    font-weight: 500;
}
.fe-self_assessments-questions-page .progress-count {
    color: var(--ds-primary);
    font-weight: 600;
}
.fe-self_assessments-questions-page .assessment-footer {
    padding: 1.5rem 2rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
}
.fe-self_assessments-questions-page .btn-next {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    border: none;
    padding: 0.75rem 2.5rem;
    border-radius: var(--ds-radius-md) !important;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--ds-transition-smooth);
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.3);
    letter-spacing: 0.3px;
}
.fe-self_assessments-questions-page .btn-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    color: white;
}
.fe-self_assessments-questions-page .btn-next:active {
    transform: translateY(0);
}
.fe-self_assessments-questions-page .btn-next:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}
.fe-self_assessments-questions-page #result_display {
    margin-bottom: 1.5rem;
}
/* Error Styling */

.fe-self_assessments-questions-page .has-error {
    border-color: #ef4444;
}
@media (max-width: 768px) {
    .fe-self_assessments-questions-page .course-info,
    .fe-self_assessments-questions-page .assessment-body,
    .fe-self_assessments-questions-page .assessment-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .fe-self_assessments-questions-page .questions-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .fe-self_assessments-questions-page .question-item select {
        max-width: 100%;
    }
}

.fe-self_assessments-questions-page .instruction-box li {
	font-size: 14px;
    font-weight: 600;
}

/* Extracted static inline styles */
.fe-self_assessments-questions-page .fe-self_assessments-questions-page-display {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.5rem;
}
.fe-self_assessments-questions-page .fe-self_assessments-questions-progress-bar-fill {
    width: 0%;
}
/* Extracted from application/views/Frontend/self_assessments/score.php */

/* --gradient-primary moved to design-tokens.css */

.fe-self_assessments-score-page .score-card {
    background: white;
    border-radius: var(--ds-radius-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fe-self_assessments-score-page .score-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.fe-self_assessments-score-page .course-info-header {
    padding: 15px 20px;
    border-bottom: 2px solid #e9ecef;
}

.fe-self_assessments-score-page .score-body {
    padding: 10px 30px;
    background: #fff;
}

.fe-self_assessments-score-page .score-title-section {
    text-align: left;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 3px solid transparent;
    border-image: var(--gradient-primary);
    border-image-slice: 1;
}

.fe-self_assessments-score-page .score-title-section h1 {
    color: #212529;
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fe-self_assessments-score-page .score-title-section h4 {
    color: #6c757d;
    font-weight: 500;
    font-size: 1.25rem;
}

.fe-self_assessments-score-page .keyArea {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    padding: 1.5rem;
    border-radius: var(--ds-radius-lg);
    margin-top: 1.5rem;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.fe-self_assessments-score-page .keyArea p {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    margin-left: 0.5rem;
    color: #495057;
}

.fe-self_assessments-score-page .clegend {
    padding: 8px;
    margin-right: 8px;
    margin-bottom: 0;
    border-radius: 6px;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fe-self_assessments-score-page .catSum {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.1rem;
    color: #212529;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e9ecef;
}

.fe-self_assessments-score-page .catTitleNew {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fe-self_assessments-score-page .progress {
    position: relative;
    border-radius: var(--ds-radius-md);
    height: 12px;
    background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.fe-self_assessments-score-page .progress-bar {
    height: 100%;
    border-radius: var(--ds-radius-md);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--gradient-primary);
    box-shadow: 0 2px 8px rgba(78, 177, 186, 0.3);
    position: relative;
    overflow: hidden;
}

.fe-self_assessments-score-page .progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%);
    animation: fe-self_assessments-score-shimmer 2s infinite;
}

@keyframes fe-self_assessments-score-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.fe-self_assessments-score-page .progress-value {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #212529;
    font-weight: 700;
    font-size: 0.95rem;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.fe-self_assessments-score-page .sc-84100 { background-color: #00c853; }
.fe-self_assessments-score-page .sc-6883 { background-color: #2962ff; }
.fe-self_assessments-score-page .sc-5267 { background-color: #7b1fa2; }
.fe-self_assessments-score-page .sc-3651 { background-color: #e65100; }
.fe-self_assessments-score-page .sc-2035 { background-color: #ff1744; }
.fe-self_assessments-score-page .sc-19 { background-color: #F33700; }

/* Modern Accordion */
.fe-self_assessments-score-page .custom-accordion .accordion-item {
    margin-bottom: 0.75rem;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    background: #fff;
    border: 1px solid #e9ecef;
    font-size: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

.fe-self_assessments-score-page .custom-accordion .accordion-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.fe-self_assessments-score-page .custom-accordion .accordion-button {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 1rem;
    padding: 1rem 1.25rem;
    color: #212529;
    border: none;
    border-radius: var(--ds-radius-md);
    transition: var(--ds-transition-slow);
}

.fe-self_assessments-score-page .custom-accordion .accordion-button:not(.collapsed) {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.25);
}

.fe-self_assessments-score-page .custom-accordion .accordion-button:focus {
    border-color: var(--ds-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(78, 177, 186, 0.1);
}

.fe-self_assessments-score-page .show{
	visibility: visible !important;
}

.fe-self_assessments-score-page .custom-accordion .accordion-button::after {
    background-image: none;
    content: '+';
    font-size: 1.5rem;
    font-weight: 600;
    transform: none;
    transition: transform 0.3s ease;
	line-height: 15px;
}

.fe-self_assessments-score-page .custom-accordion .accordion-button:not(.collapsed)::after {
    content: '−';
    transform: none;
}

.fe-self_assessments-score-page .custom-accordion .accordion-body {
    padding: 1.5rem;
    color: #495057;
    line-height: 1.7;
    background: white;
}

.fe-self_assessments-score-page .highest-score-section {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    padding: 2.5rem;
    border-radius: var(--ds-radius-xl);
    margin-bottom: 2rem;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.fe-self_assessments-score-page .highest-score-section::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

.fe-self_assessments-score-page .highest-score-number {
    font-size: 4.5rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.fe-self_assessments-score-page .highest-score-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #495057;
    margin-top: 1rem;
}

.fe-self_assessments-score-page .dial-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.fe-self_assessments-score-page .category-progress-item {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: var(--ds-radius-lg);
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fe-self_assessments-score-page .category-progress-item:hover,
.fe-portfolio-manage-page .tab-content .card:hover,
.fe-portfolio-manage-page .tab-content .box:hover:not(.no-border) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.fe-self_assessments-score-page .summary-section {
    border-radius: var(--ds-radius-lg);
    margin-top: 2rem;
}

.fe-self_assessments-score-page .summary-section h4 {
    font-weight: 700;
    color: #212529;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    padding-bottom: 0.75rem;
}

.fe-self_assessments-score-page .summary-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #495057;
}

.fe-self_assessments-score-page .summary-content ul,
.fe-self_assessments-score-page .summary-content ol {
    margin: 1.25rem 0;
    padding-left: 2rem;
}

.fe-self_assessments-score-page .summary-content ul {
    list-style-type: disc;
}

.fe-self_assessments-score-page .summary-content ol {
    list-style-type: decimal;
}

.fe-self_assessments-score-page .summary-content ul ul {
    list-style-type: circle;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.fe-self_assessments-score-page .summary-content li {
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
    line-height: 1.7;
}

.fe-self_assessments-score-page .summary-content li:last-child {
    margin-bottom: 0;
}

.fe-self_assessments-score-page .summary-content p {
    margin-bottom: 1rem;
}

.fe-self_assessments-score-page .summary-content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .fe-self_assessments-score-page .course-info-header, .fe-self_assessments-score-page .score-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .fe-self_assessments-score-page .score-title-section h1 {
        font-size: 2rem;
    }
    .fe-self_assessments-score-page .highest-score-number {
        font-size: 3.5rem;
    }
    .fe-self_assessments-score-page .highest-score-section {
        padding: 1.5rem;
    }
    .fe-self_assessments-score-page .category-progress-item {
        padding: 1rem;
    }
}

/* Extracted static inline styles */

.fe-self_assessments-score-page .fe-self_assessments-score-instruction {
    color: #0652A2;
    font-weight: 600;
}

.fe-self_assessments-score-page .fe-self_assessments-score-accordion-wrap {
    padding: 10px;
}

.fe-self_assessments-score-page .fe-self_assessments-score-cat-percent {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}
/* Extracted from application/views/Frontend/self_assessments/start.php */

.fe-self_assessments-start-page .course-info-section {
    background: #f8f9fa;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e9ecef;
}

.fe-self_assessments-start-page .assessment-start-body {
    padding: 10px 30px;
}
.fe-self_assessments-start-page .assessment-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #495057;
    margin-bottom: 2rem;
}
.fe-self_assessments-start-page .btn-start {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    border: none;
    padding: 0.875rem 3rem;
    border-radius: var(--ds-radius-md) !important;
    font-weight: 600;
    font-size: 1.1rem;
    transition: var(--ds-transition-smooth);
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.3);
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.3px;
}
.fe-self_assessments-start-page .btn-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    color: white;
    text-decoration: none;
}
.fe-self_assessments-start-page .btn-start:active {
    transform: translateY(0);
}
@media (max-width: 768px) {
    .fe-self_assessments-start-page .course-info-section, .fe-self_assessments-start-page .assessment-start-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Tickets conversations page */
.fe-tickets-conversations-page * {
    transition: var(--ds-transition);
}

.fe-tickets-conversations-page .ticket-meta-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #64748b;
    margin-bottom: 4px;
}

.fe-tickets-conversations-page .ticket-meta-value {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

/* Custom Open/Closed status toggle */
.fe-tickets-conversations-page .ticket-status-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.fe-tickets-conversations-page .ticket-status-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 6px 12px;
    border-radius: 999px;
}

.fe-tickets-conversations-page .ticket-status-label.is-open {
    background-color: #DCFCE7;
    color: #166534;
}

.fe-tickets-conversations-page .ticket-status-label.is-closed {
    background-color: #FEE2E2;
    color: #991B1B;
}

.fe-tickets-conversations-page .ticket-status-switch {
    position: relative;
    display: inline-block;
    width: 96px;
    height: 36px;
    margin: 0;
    margin-bottom: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.fe-tickets-conversations-page .ticket-status-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.fe-tickets-conversations-page .ticket-status-slider {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.fe-tickets-conversations-page .ticket-status-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 2;
    transition: transform 0.25s ease;
}

.fe-tickets-conversations-page .ticket-status-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #fff;
    z-index: 1;
    pointer-events: none;
}

.fe-tickets-conversations-page .ticket-status-text-off {
    left: 38px;
    opacity: 1;
}

.fe-tickets-conversations-page .ticket-status-text-on {
    left: 12px;
    opacity: 0;
}

.fe-tickets-conversations-page .ticket-status-input:checked + .ticket-status-slider {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.fe-tickets-conversations-page .ticket-status-input:checked + .ticket-status-slider .ticket-status-knob {
    transform: translateX(60px);
}

.fe-tickets-conversations-page .ticket-status-input:checked + .ticket-status-slider .ticket-status-text-off {
    opacity: 0;
}

.fe-tickets-conversations-page .ticket-status-input:checked + .ticket-status-slider .ticket-status-text-on {
    opacity: 1;
}

.fe-tickets-conversations-page .ticket-status-input:focus-visible + .ticket-status-slider {
    box-shadow: 0 0 0 3px rgba(78, 177, 186, 0.35);
}

.fe-tickets-conversations-page .ticket-status-input:disabled + .ticket-status-slider {
    opacity: 0.7;
    cursor: wait;
}

.fe-tickets-conversations-page .ticket-status-spinner {
    min-width: 18px;
    color: var(--ds-primary);
    font-size: 14px;
}

/* Chat thread */
.fe-tickets-conversations-page .ticket-chat {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 4px;
}

.fe-tickets-conversations-page .ticket-empty-thread {
    text-align: center;
    padding: 48px 16px;
    color: #64748b;
}

.fe-tickets-conversations-page .chat_box {
    display: flex;
    width: 100%;
}

.fe-tickets-conversations-page .chat_box.is-user {
    justify-content: flex-end;
}

.fe-tickets-conversations-page .chat_box.is-admin {
    justify-content: flex-start;
}

.fe-tickets-conversations-page .user_comment,
.fe-tickets-conversations-page .admin_comment {
    max-width: min(720px, 92%);
    padding: 14px 18px;
    line-height: 1.55;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.fe-tickets-conversations-page .user_comment {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px 16px 4px 16px;
    text-align: right;
}

.fe-tickets-conversations-page .admin_comment {
    background: rgba(78, 177, 186, 0.12);
    border: 1px solid rgba(78, 177, 186, 0.25);
    border-radius: 16px 16px 16px 4px;
    text-align: left;
}

.fe-tickets-conversations-page .chat-author {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.fe-tickets-conversations-page .chat-message {
    font-size: 15px;
    color: #1e293b;
    word-break: break-word;
}

.fe-tickets-conversations-page .chat-message p {
    margin-bottom: 8px;
}

.fe-tickets-conversations-page .chat-message p:last-child {
    margin-bottom: 0;
}

.fe-tickets-conversations-page .chat-time {
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
}

.fe-tickets-conversations-page .ticket-reply-section {
    border-top: 1px solid #e2e8f0;
    padding-top: 24px;
}

.fe-tickets-conversations-page .ticket-closed-notice {
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 14px;
    font-weight: 500;
}

/* Form styles for reply */
.fe-tickets-conversations-page label.clbl {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-gray-700);
    margin-bottom: 8px;
}

.fe-tickets-conversations-page textarea,
.fe-tickets-conversations-page textarea.form-control {
    border-radius: 12px !important;
    border: 2px solid var(--ds-gray-200) !important;
    padding: 14px 18px !important;
    background-color: #ffffff;
    transition: var(--ds-transition-smooth);
    font-size: 15px;
    line-height: 1.5;
    width: 100%;
}

.fe-tickets-conversations-page textarea:focus {
    outline: none !important;
    border-color: var(--ds-primary) !important;
    box-shadow: 0 0 0 4px rgba(78, 177, 186, 0.15), 0 4px 12px rgba(78, 177, 186, 0.2) !important;
}

.fe-tickets-conversations-page .btn-primary,
.fe-tickets-conversations-page .btn-outline-primary {
    border-radius: var(--ds-radius-md);
    padding: 12px 24px;
    font-weight: 600;
    font-size: 15px;
    transition: var(--ds-transition-smooth);
    border: 2px solid transparent;
}

.fe-tickets-conversations-page .btn-primary {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.3);
}

.fe-tickets-conversations-page .btn-primary:hover {
    background: linear-gradient(135deg, #3A9BA5, #1A3F66);
    box-shadow: 0 6px 16px rgba(78, 177, 186, 0.4);
    transform: translateY(-2px);
    color: white;
}

.fe-tickets-conversations-page .btn-outline-primary {
    background: white;
    color: var(--ds-primary);
    border-color: var(--ds-primary);
}

.fe-tickets-conversations-page .btn-outline-primary:hover {
    background: var(--ds-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.3);
}

.fe-tickets-conversations-page .form-group {
    margin-bottom: 24px;
}

.fe-tickets-conversations-page .alert {
    border-radius: var(--ds-radius-md);
    padding: 14px 18px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.fe-tickets-conversations-page .cke {
    border-radius: 12px !important;
    overflow: hidden;
}

@media (max-width: 768px) {
    .fe-tickets-conversations-page .ticket-status-toggle-wrap {
        width: 100%;
        justify-content: space-between;
    }

    .fe-tickets-conversations-page .user_comment,
    .fe-tickets-conversations-page .admin_comment {
        max-width: 100%;
    }
}
/* Extracted from application/views/Frontend/tickets/create_your_suggestion.php */
.fe-tickets-create_your_suggestion-page .controlLbl{ font-weight:600; font-size:16px;}
.fe-tickets-create_your_suggestion-page .sMsg strong{ display:block; font-size:18px;}
.fe-tickets-create_your_suggestion-page .sMsg{ font-weight:600; font-size:16px; text-align:center;}

.fe-tickets-create_your_suggestion-page .fe-tickets-create_your_suggestion-count-desc{ margin-top:5px; font-size:18px;}
.fe-tickets-create_your_suggestion-page .fe-tickets-create_your_suggestion-satisfied-select{ width:20%;}
.fe-tickets-create_your_suggestion-page .fe-tickets-create_your_suggestion-contact-option{ margin-left:10px; margin-top:5px; font-size:16px;}
.fe-tickets-create_your_suggestion-page .fe-tickets-create_your_suggestion-submit-btn{ padding:8px 50px;}
/* Extracted from application/views/Frontend/tickets/generate.php */

.fe-tickets-generate-page * {
    transition: var(--ds-transition);
}

/* Modern Form Fields */
.fe-tickets-generate-page input[type="text"],
.fe-tickets-generate-page input[type="email"],
.fe-tickets-generate-page input[type="password"],
.fe-tickets-generate-page input[type="number"],
.fe-tickets-generate-page input[type="url"],
.fe-tickets-generate-page select,
.fe-tickets-generate-page select.form-control,
.fe-tickets-generate-page .form-control select,
.fe-tickets-generate-page .form-control,
.fe-tickets-generate-page input.form-control,
.fe-tickets-generate-page select.form-control.required {
    border-radius: 12px !important;
    border: 2px solid var(--ds-gray-200) !important;
    padding: 12px 16px !important;
    background-color: #ffffff;
    transition: var(--ds-transition-smooth);
    font-size: 15px;
    line-height: 1.5;
    height: auto;
    min-height: 48px;
    box-sizing: border-box;
    width: 100%;
}
.fe-tickets-generate-page textarea,
.fe-tickets-generate-page textarea.form-control {
    border-radius: 12px !important;
    border: 2px solid var(--ds-gray-200) !important;
    padding: 14px 18px !important;
    background-color: #ffffff;
    transition: var(--ds-transition-smooth);
    font-size: 15px;
    line-height: 1.5;
    width: 100%;
}

.fe-tickets-generate-page input:focus,
.fe-tickets-generate-page select:focus,
.fe-tickets-generate-page textarea:focus,
.fe-tickets-generate-page input.form-control:focus,
.fe-tickets-generate-page select.form-control:focus,
.fe-tickets-generate-page textarea.form-control:focus,
.fe-tickets-generate-page .form-control:focus {
    outline: none !important;
    border-color: var(--ds-primary) !important;
    box-shadow: 0 0 0 4px rgba(78, 177, 186, 0.15), 0 4px 12px rgba(78, 177, 186, 0.2) !important;
    background-color: #ffffff !important;
    transform: translateY(-1px);
    border-radius: 12px !important;
}
.fe-tickets-generate-page select,
.fe-tickets-generate-page select.form-control,
.fe-tickets-generate-page .form-control select,
.fe-tickets-generate-page select.form-control.required {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234EB1BA'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px !important;
    padding-right: 40px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border-radius: 12px !important;
}
/* Modern Labels */
.fe-tickets-generate-page label.clbl {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-gray-700);
    margin-bottom: 8px;
}
/* Modern Buttons */
.fe-tickets-generate-page .btn-primary,
.fe-tickets-generate-page .btn-outline-primary {
    border-radius: var(--ds-radius-md);
    padding: 12px 24px;
    font-weight: 600;
    font-size: 15px;
    transition: var(--ds-transition-smooth);
    border: 2px solid transparent;
}
.fe-tickets-generate-page .btn-primary {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.3);
}
.fe-tickets-generate-page .btn-primary:hover {
    background: linear-gradient(135deg, #3A9BA5, #1A3F66);
    box-shadow: 0 6px 16px rgba(78, 177, 186, 0.4);
    transform: translateY(-2px);
}
.fe-tickets-generate-page .btn-outline-primary {
    background: white;
    color: var(--ds-primary);
    border-color: var(--ds-primary);
}
.fe-tickets-generate-page .btn-outline-primary:hover,
.fe-portfolio-manage-page .tab-content .btn-outline-primary:hover {
    background: var(--ds-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.3);
}
/* Alert Styles */
.fe-tickets-generate-page .alert {
    border-radius: var(--ds-radius-md);
    padding: 14px 18px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Form Group Spacing */
.fe-tickets-generate-page .form-group {
    margin-bottom: 24px;
}
/* Validation Error States */
.fe-tickets-generate-page .form-control.border-red-500,
.fe-tickets-generate-page select.border-red-500,
.fe-tickets-generate-page textarea.border-red-500,
.fe-tickets-generate-page .form-group.has-error .form-control,
.fe-tickets-generate-page .form-group.has-error select,
.fe-tickets-generate-page .form-group.has-error textarea {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15) !important;
}

/* CKEditor Container */
.fe-tickets-generate-page .cke {
    border-radius: 12px !important;
    overflow: hidden;
}
.fe-tickets-generate-page .cke_inner {
    border-radius: 12px !important;
}

/* Inline style extractions */

/* Extracted from application/views/Frontend/tickets/listing.php */

.fe-tickets-listing-page * {
    transition: var(--ds-transition);
}

/* Modern Buttons */
.fe-tickets-listing-page .btn-primary {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    border-radius: var(--ds-radius-md);
    padding: 12px 24px;
    font-weight: 600;
    font-size: 15px;
    transition: var(--ds-transition-smooth);
    border: 2px solid transparent;
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.fe-tickets-listing-page .btn-primary:hover {
    background: linear-gradient(135deg, #3A9BA5, #1A3F66);
    box-shadow: 0 6px 16px rgba(78, 177, 186, 0.4);
    transform: translateY(-2px);
    color: white;
}
/* Status Badges */
.fe-tickets-listing-page .status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--ds-radius-sm);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Action Icons */
.fe-tickets-listing-page .action-icon {
    padding: 8px;
    border-radius: var(--ds-radius-sm);
    transition: var(--ds-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fe-tickets-listing-page .action-icon:hover {
    background-color: #FEE2E2;
    color: #DC2626;
}
/* Empty State */
.fe-tickets-listing-page .empty-state,
.fe-pages-scholarships-page .empty-state,
.fe-pages-career-center-page .empty-state,
.fe-pages-faqs-main-page .empty-state,
.fe-pages-faq-page .empty-state {
    text-align: center;
    padding: 60px 20px;
}

/* Ticket Link */
.fe-tickets-listing-page .ticket-link {
    color: var(--ds-primary);
    font-weight: 600;
    text-decoration: none;
    transition: var(--ds-transition);
}
.fe-tickets-listing-page .ticket-link:hover {
    color: var(--ds-secondary);
    text-decoration: underline;
}
/* Unread Indicator */
.fe-tickets-listing-page .unread-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #52AB0B;
    border-radius: 50%;
    margin-right: 8px;
}
/* Responsive Table */
@media (max-width: 768px) {
    .fe-tickets-listing-page .table-modern {
        font-size: 12px;
    }
    .fe-tickets-listing-page .table-modern thead th,
    .fe-tickets-listing-page .table-modern tbody td {
        padding: 12px 8px;
    }
}

/* Inline style extractions */
.fe-tickets-listing-page .fe-tickets-listing-ticket-id-cell {
    font-weight: 600;
}

/* Extracted from application/views/Frontend/pages/login-tab.php */
.fe-pages-login-tab-page .tabs {
    overflow-x: hidden;
}
.fe-pages-login-tab-page .loginTitle {
    margin: 0 0 15px 0;
    font-size: 1.75rem;
}
.fe-pages-login-tab-page .white-text {
    color: #fff !important;
    z-index: 9;
    position: relative;
}
.fe-pages-login-tab-page .btn {
    font-size: 16px !important;
    height: 35px !important;
    padding: 8px !important;
    line-height: 20px !important;
}
.fe-pages-login-tab-page .form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 .25rem var(--primary-color-100) !important;
}
.fe-pages-login-tab-page .form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 0;
    margin-bottom: .125rem;
}
.fe-pages-login-tab-page .form-control {
    display: block;
    width: 100% !important;
    padding: .375rem .75rem !important;
    font-size: 1rem !important;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg) !important;
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    border-radius: var(--ds-radius-md) !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-sizing: border-box !important;
    height: auto !important;
}
.fe-pages-login-tab-page .container {
    padding: 0;
	
	width: 100%;
}
.fe-pages-login-tab-page .tabs .indicator {
    background-color: var(--primary-color);
    height: 60px;
    opacity: 1;
}
.fe-pages-login-tab-page .form-container {
    padding: 40px;
	padding-top: 10px;
}
.fe-pages-login-tab-page .confirmation-tabs-btn {
    position: absolute;
}

/* Extracted from application/views/Frontend/pages/login.php */
@media screen and (max-width: 768px) {
.fe-pages-login-page .log_switch_btns {
    grid-template-columns: 1fr !important;
}
}
.fe-pages-login-page .log_switch_btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 6px;
    background: #f5f7fa;
    border-radius: var(--ds-radius-md);
    margin-bottom: 2rem;
}
.fe-pages-login-page .log_switch_btns .btn {
    background: transparent;
    color: var(--ds-gray-500);
    border: none;
    box-shadow: none;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 16px !important;
    border-radius: var(--ds-radius-md);
    transition: var(--ds-transition-smooth);
}
.fe-pages-login-page .log_switch_btns .btn:first-child {
    border-top-left-radius: var(--ds-radius-sm);
    border-bottom-left-radius: var(--ds-radius-sm);
}
.fe-pages-login-page .log_switch_btns .btn:last-child {
    border-top-right-radius: var(--ds-radius-sm);
    border-bottom-right-radius: var(--ds-radius-sm);
}
.fe-pages-login-page .log_switch_btns .btn:hover {
    color: #1a1a2e;
    background: rgba(255, 255, 255, 0.5);
    transform: none;
}
.fe-pages-login-page .log_switch_btns .btn.active {
    background: #ffffff;
    color: var(--ds-accent);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: none;
}
.fe-pages-login-page .log_switch_btns .btn.active:hover {
    background: #ffffff;
    color: var(--ds-accent);
}
.fe-pages-login-page .account-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--ds-accent) 0%, var(--ds-primary) 100%);
    border-radius: var(--ds-radius-md);
    margin-bottom: 1.5rem;
}
.fe-pages-login-page .account-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}
.fe-pages-login-page .welcome-badge,
.fe-pages-industry-expert-login-page .welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(46, 114, 145, 0.1) 0%, rgba(78, 177, 186, 0.08) 100%);
    border-radius: 50px;
    margin-bottom: 1rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-accent);
}
.fe-pages-login-page .welcome-badge svg,
.fe-pages-industry-expert-login-page .welcome-badge svg {
    width: 16px;
    height: 16px;
}
.fe-pages-login-page .input-with-icon {
    position: relative;
}
.fe-pages-login-page .input-with-icon .input-icon,
.fe-pages-signup-page .input-enhanced .input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ds-gray-400);
    transition: color 0.3s ease;
    pointer-events: none;
}
.fe-pages-login-page .input-with-icon input {
    padding-left: 44px !important;
}
/* Icon stays a constant color regardless of focus/typing state. */
.fe-pages-login-page .input-with-icon .input-icon,
.fe-pages-login-page .input-with-icon:focus-within .input-icon {
    color: var(--ds-gray-400) !important;
}
/* Keep the field shape steady on focus (no radius jump / no lift). */
.fe-pages-login-page .input-with-icon input:focus {
    border-radius: var(--ds-radius-md) !important;
    transform: none !important;
}
/* Keep autofilled email/password fields visually consistent so the icon
   color does not appear to change when the browser fills or you start typing. */
.fe-pages-login-page .input-with-icon input:-webkit-autofill,
.fe-pages-login-page .input-with-icon input:-webkit-autofill:hover,
.fe-pages-login-page .input-with-icon input:-webkit-autofill:focus,
.fe-pages-login-page .input-with-icon input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: var(--ds-gray-800) !important;
    caret-color: var(--ds-gray-800);
    transition: background-color 9999s ease-in-out 0s;
}
.fe-pages-login-page .password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ds-gray-400);
    padding: 4px;
    transition: color 0.3s ease;
}
.fe-pages-login-page .password-toggle:hover {
    color: var(--ds-accent);
}
.fe-pages-login-page .password-toggle svg,
.fe-pages-signup-page .btn-signup svg,
.fe-pages-industry-expert-login-page .password-toggle svg {
    width: 20px;
    height: 20px;
}
.fe-pages-login-page .form-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.fe-pages-login-page .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fe-pages-login-page .form-check-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ds-gray-300);
    border-radius: var(--ds-radius-xs);
    cursor: pointer;
    margin: 0;
    background-color: #fff;
    flex-shrink: 0;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important;
    pointer-events: auto !important;
}
.fe-pages-login-page .form-check-input:checked {
    background-color: var(--ds-accent);
    border-color: var(--ds-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}
.fe-pages-login-page .form-check-label {
    font-size: 14px;
    color: #454545;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
    user-select: none;
}
.fe-pages-login-page .forgot-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-accent);
    text-decoration: none;
    transition: var(--ds-transition-slow);
    white-space: nowrap;
}
.fe-pages-login-page .forgot-link:hover {
    color: var(--ds-primary);
}
.fe-pages-login-page .btn-login {
    width: 100%;
    padding: 14px 24px !important;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--ds-accent) 0%, var(--ds-primary) 100%);
    color: white;
    border: none;
    border-radius: var(--ds-radius-md);
    box-shadow: 0 4px 12px rgba(46, 114, 145, 0.3);
    transition: var(--ds-transition-smooth);
    position: relative;
    overflow: hidden;
}
.fe-pages-login-page .btn-login:hover,
.fe-pages-signup-page .btn-signup:hover,
.fe-pages-industry-expert-login-page .btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(46, 114, 145, 0.4);
}
.fe-pages-login-page .btn-login:active {
    transform: translateY(0);
}
.fe-pages-login-page .btn-login:disabled,
.fe-pages-signup-page .btn-signup:disabled,
.fe-pages-industry-expert-login-page .btn-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}
.fe-pages-login-page .btn-spinner {
    display: inline-block;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.fe-pages-login-page .signup-prompt,
.fe-pages-signup-page .login-prompt {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ds-gray-200);
}
.fe-pages-login-page .signup-prompt-text,
.fe-pages-signup-page .login-prompt-text {
    font-size: 15px;
    color: var(--ds-gray-500);
    font-weight: 500;
    margin-bottom: 0;
}
.fe-pages-login-page .signup-link {
    color: var(--ds-accent);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
    cursor: pointer;
}
.fe-pages-login-page .signup-link:hover {
    color: var(--ds-primary);
}
.fe-pages-login-page.auth-page-wrapper,
.fe-pages-signup-page.auth-page-wrapper {
    min-height: calc(100vh - 500px);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 4rem 0;
    position: relative;
}
.fe-pages-login-page .auth-page-container {
    max-width: 500px;
    margin: 0 auto;
}
.fe-pages-login-page .auth-card,
.fe-pages-signup-page .auth-card {
    background: white;
    border-radius: var(--ds-radius-xl);
    padding: 3rem 2.5rem;
    box-shadow: var(--ds-shadow-card);
    border: 1px solid rgba(46, 114, 145, 0.1);
}
@media screen and (max-width: 768px) {
.fe-pages-login-page.auth-page-wrapper {
    padding: 3rem 0;
}
.fe-pages-login-page .auth-card {
    margin: 0 1rem;
        padding: 2.5rem 2rem;
}
}
@media screen and (max-width: 576px) {
.fe-pages-login-page.auth-page-wrapper {
    padding: 2rem 0;
}
.fe-pages-login-page .auth-card {
    padding: 2rem 1.5rem;
    border-radius: var(--ds-radius-xl);
}
.fe-pages-login-page .form-actions-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}
.fe-pages-login-page .forgot-link {
    margin-top: 0.25rem;
}
.fe-pages-login-page .log_switch_btns .btn {
    font-size: 14px;
    padding: 10px 12px !important;
}
}

/* Extracted from application/views/Frontend/pages/scholarships.php */
    * {
transition: var(--ds-transition);
}

.fe-pages-scholarships-page .scholarship-card {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border-radius: var(--ds-radius-xl);
    border: 2px solid var(--ds-gray-200);
    padding: 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
}
.fe-pages-scholarships-page .scholarship-card::before,
.fe-pages-career-center-page .career-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, rgb(78, 177, 186), rgb(30, 78, 122));
    transition: all 0.4s ease;
    box-shadow: 0 2px 8px rgba(78, 177, 186, 0.3);
}
.fe-pages-scholarships-page .scholarship-card::after,
.fe-pages-career-center-page .career-card::after {
    content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(78, 177, 186, 0.1) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
}
.fe-pages-scholarships-page .scholarship-card:hover,
.fe-pages-career-center-page .career-card:hover {
    transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(78, 177, 186, 0.2);
        border-color: rgb(78, 177, 186);
        background: linear-gradient(135deg, #ffffff 0%, var(--ds-bg-light) 100%);
}
.fe-pages-scholarships-page .scholarship-card:hover::before,
.fe-pages-career-center-page .career-card:hover::before {
    height: 6px;
        box-shadow: 0 4px 12px rgba(78, 177, 186, 0.4);
}
.fe-pages-scholarships-page .scholarship-card:hover::after {
    opacity: 1;
}
.fe-pages-scholarships-page .scholarship-card button:hover,
.fe-pages-career-center-page .career-card button:hover {
    transform: translateY(-2px) scale(1.02);
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.fe-pages-scholarships-page .scholarship-card button:hover svg {
    transform: translateX(4px);
}
.fe-pages-scholarships-page .search-container,
.fe-pages-career-center-page .search-container,
.fe-pages-faqs-main-page .search-container,
.fe-pages-faq-page .search-container {
    position: relative;
        margin-bottom: 32px;
}
.fe-pages-scholarships-page .search-input,
.fe-pages-career-center-page .search-input,
.fe-pages-faqs-main-page .search-input,
.fe-pages-faq-page .search-input {
    width: 100%;
        /* !important so the global input[type=text] padding/radius rule can't
           collapse the left padding and let text run under the search icon */
        padding: 16px 20px 16px 56px !important;
        border-radius: var(--ds-radius-lg) !important;
        border: 2px solid var(--ds-gray-200);
        font-size: 15px;
        transition: var(--ds-transition-smooth);
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.fe-pages-scholarships-page .search-input:focus,
.fe-pages-career-center-page .search-input:focus,
.fe-pages-faqs-main-page .search-input:focus,
.fe-pages-faq-page .search-input:focus {
    outline: none;
        border-color: var(--ds-primary);
        box-shadow: 0 0 0 4px rgba(78, 177, 186, 0.15), 0 4px 12px rgba(78, 177, 186, 0.2);
        transform: none !important;
}
.fe-pages-scholarships-page .search-icon,
.fe-pages-career-center-page .search-icon,
.fe-pages-faqs-main-page .search-icon,
.fe-pages-faq-page .search-icon {
    position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ds-gray-400);
        width: 20px;
        height: 20px;
        z-index: 2;
}
.fe-pages-scholarships-page .search-clear,
.fe-pages-career-center-page .search-clear,
.fe-pages-faqs-main-page .search-clear,
.fe-pages-faq-page .search-clear {
    position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        background: var(--ds-gray-100);
        border: none;
        border-radius: var(--ds-radius-sm);
        padding: 6px 10px;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        transition: var(--ds-transition);
        z-index: 2;
}
.fe-pages-scholarships-page .search-clear:hover {
    background: var(--ds-gray-200);
}
.fe-pages-scholarships-page .search-clear.active {
    display: flex;
}

.fe-pages-scholarships-page .scholarship-card.loading,
.fe-pages-career-center-page .career-card.loading,
.fe-pages-games-page .disabled-btn {
    opacity: 0.6;
        pointer-events: none;
}
.fe-pages-scholarships-page .fade-in {
    animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from {
            opacity: 0;
            transform: translateY(20px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
}
@media (max-width: 640px) {
.fe-pages-scholarships-page .scholarship-card {
    padding: 20px;
}
}
@media (min-width: 1280px) {
.fe-pages-scholarships-page .scholarship-card {
    padding: 24px;
}
}

/* Extracted from application/views/Frontend/pages/career_center.php */
    * {
transition: var(--ds-transition);
}

.fe-pages-career-center-page .career-card {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
        border-radius: var(--ds-radius-xl);
        border: 2px solid var(--ds-gray-200);
        padding: 24px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
}

.fe-pages-career-center-page .career-card:hover::after {
    opacity: 1;
}

.fe-pages-career-center-page .search-clear:hover {
    background: var(--ds-gray-200);
}
.fe-pages-career-center-page .search-clear.active {
    display: flex;
}

.fe-pages-career-center-page .career-card {
    position: relative;
}
.fe-pages-career-center-page .fade-in {
    animation: fadeIn 0.5s ease-out;
}

.fe-pages-career-center-page .career-card:hover button svg {
    transform: translateX(4px);
}
.fe-pages-career-center-page .career-card {
    backdrop-filter: blur(10px);
}
@media (max-width: 640px) {
.fe-pages-career-center-page .career-card {
    padding: 20px;
}
}
@media (min-width: 1280px) {
.fe-pages-career-center-page .career-card {
    padding: 24px;
}
}
.fe-pages-career-center-page .nav-tabs {
    display: inline-flex;
    gap: 8px;
    padding: 6px;
    background: #f5f7fa;
    border-radius: var(--ds-radius-md);
    border-bottom: none;
    margin-bottom: 24px;
}
.fe-pages-career-center-page .nav-tabs .nav-item {
    margin: 0;
}
.fe-pages-career-center-page .nav-tabs .nav-link {
    background: transparent;
    color: var(--ds-gray-500);
    border: none;
    box-shadow: none;
    font-weight: 600;
    font-size: 15px;
    padding: 10px 20px !important;
    border-radius: var(--ds-radius-md);
    transition: var(--ds-transition-smooth);
    display: inline-block;
    text-decoration: none;
}
.fe-pages-career-center-page .nav-tabs .nav-link:hover {
    color: var(--ds-primary);
    background: rgba(255, 255, 255, 0.5);
    transform: none;
}
.fe-pages-career-center-page .nav-tabs .nav-link.active {
    background: #ffffff !important;
    color: var(--ds-primary) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    border: none !important;
    transform: none;
}
.fe-pages-career-center-page .tab-content {
    display: none;
}
.fe-pages-career-center-page .tab-content.active {
    display: block;
}
.fe-pages-career-center-page .iframe-container {
    width: 100%;
        height: calc(100vh - 300px);
        min-height: 600px;
        border: none;
        border-radius: var(--ds-radius-lg);
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.fe-pages-career-center-page .iframe-wrapper {
    width: 100%;
        height: 100%;
}
.fe-pages-career-center-page iframe {
    width: 100%;
        height: 100%;
        border: none;
}

/* Extracted from application/views/Frontend/pages/pricing.php */
.fe-pages-pricing-page .pricing-hero {
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.05) 0%, rgba(46, 114, 145, 0.05) 100%);
    padding: 60px 20px 40px;
    border-radius: var(--ds-radius-xl);
    margin-bottom: 60px;
}
.fe-pages-pricing-page .pricing-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.fe-pages-pricing-page .pricing-card {
    background: white;
    border-radius: var(--ds-radius-xl);
    padding: 0;
    box-shadow: 0 4px 20px rgba(46, 114, 145, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}
.fe-pages-pricing-page .pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(46, 114, 145, 0.2);
    border-color: rgba(78, 177, 186, 0.3);
}
.fe-pages-pricing-page .pricing-card-header {
    padding: 32px 32px 24px;
    position: relative;
    overflow: hidden;
}
.fe-pages-pricing-page .pricing-card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--header-color-1, #e63946), var(--header-color-2, #d62839));
}
.fe-pages-pricing-page .pricing-card.students .pricing-card-header::before {
    --header-color-1: #e63946;
    --header-color-2: #d62839;
}
.fe-pages-pricing-page .pricing-card.pro .pricing-card-header::before {
    --header-color-1: #2a9d8f;
    --header-color-2: #219180;
}
.fe-pages-pricing-page .pricing-card.enterprise .pricing-card-header::before {
    --header-color-1: var(--ds-primary);
    --header-color-2: var(--ds-accent);
}
.fe-pages-pricing-page .pricing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}
.fe-pages-pricing-page .pricing-card.students .pricing-badge {
    background: linear-gradient(135deg, #e63946, #d62839);
    color: white;
}
.fe-pages-pricing-page .pricing-card.pro .pricing-badge {
    background: linear-gradient(135deg, #2a9d8f, #219180);
    color: white;
}
.fe-pages-pricing-page .pricing-card.enterprise .pricing-badge {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-accent));
    color: white;
}
.fe-pages-pricing-page .pricing-price {
    font-size: 48px;
    font-weight: 800;
    color: var(--ds-gray-800);
    line-height: 1;
    margin: 16px 0 8px;
}
.fe-pages-pricing-page .pricing-period {
    font-size: 15px;
    color: var(--ds-gray-500);
    line-height: 1.6;
    margin-bottom: 20px;
}
.fe-pages-pricing-page .pricing-period strong,
.fe-pages-faqs-main-page .faq-answer strong {
    color: var(--ds-gray-800);
    font-weight: 600;
}
.fe-pages-pricing-page .pricing-card-body {
    padding: 0 32px 32px;
}
.fe-pages-pricing-page .pricing-features {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}
.fe-pages-pricing-page .pricing-features li {
    padding: 12px 0;
    font-size: 15px;
    color: var(--ds-gray-600);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
}
.fe-pages-pricing-page .pricing-features li::before {
    content: '\f00c';
    font-family: FontAwesome;
    color: #10b981;
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}
.fe-pages-pricing-page .pricing-features li.unavailable {
    color: var(--ds-gray-400);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}
.fe-pages-pricing-page .pricing-features li.unavailable::before {
    content: '\f00d';
    color: #ef4444;
}
.fe-pages-pricing-page .pricing-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: var(--ds-transition-smooth);
    border: 2px solid;
    position: relative;
    overflow: hidden;
}
.fe-pages-pricing-page .pricing-card.students .pricing-cta {
    background: linear-gradient(135deg, #e63946, #d62839);
    border-color: transparent;
    color: white;
}
.fe-pages-pricing-page .pricing-card.students .pricing-cta:hover {
    background: linear-gradient(135deg, #d62839, #c21e2e);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(230, 57, 70, 0.4);
    color: white;
}
.fe-pages-pricing-page .pricing-card.pro .pricing-cta {
    background: linear-gradient(135deg, #2a9d8f, #219180);
    border-color: transparent;
    color: white;
}
.fe-pages-pricing-page .pricing-card.pro .pricing-cta:hover {
    background: linear-gradient(135deg, #219180, #1a7569);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(42, 157, 143, 0.4);
    color: white;
}
.fe-pages-pricing-page .pricing-card.enterprise .pricing-cta {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-accent));
    border-color: transparent;
    color: white;
}
.fe-pages-pricing-page .pricing-card.enterprise .pricing-cta:hover {
    background: linear-gradient(135deg, var(--ds-accent), var(--ds-secondary));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(78, 177, 186, 0.4);
    color: white;
}
@media (max-width: 991px) {
.fe-pages-pricing-page .pricing-card-container {
    grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
}
}
@media (max-width: 576px) {
.fe-pages-pricing-page .pricing-card-header {
    padding: 24px 20px 16px;
}
.fe-pages-pricing-page .pricing-card-body {
    padding: 0 20px 24px;
}
.fe-pages-pricing-page .pricing-price {
    font-size: 40px;
}
}

/* Extracted from application/views/Frontend/pages/games.php */
.fe-pages-games-page.games-container {
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}
.fe-pages-games-page .games-header {
    text-align: center;
    margin-bottom: 50px;
}
.fe-pages-games-page .games-header h1 {
    font-size: 1.25rem;
    color: var(--ds-gray-700);
    margin-bottom: 8px;
    font-weight: 600;
}
.fe-pages-games-page .games-header p {
    font-size: 0.875rem;
    color: var(--ds-gray-500);
    line-height: 1.625;
}
.fe-pages-games-page .games-tabs-container {
    background: #ffffff;
    border-radius: var(--ds-radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-top: 40px;
}
.fe-pages-games-page .games-tabs-header {
    display: flex;
    background: var(--ds-bg-light);
    border-bottom: 2px solid var(--ds-gray-200);
    padding: 8px;
    gap: 8px;
}
.fe-pages-games-page .games-tab-button {
    flex: 1;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    transition: var(--ds-transition-smooth);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.fe-pages-games-page .games-tab-button:hover,
.fe-pages-games-page .game-internal-tab:hover,
.fe-pages-games-page .multiplayer-tab-btn:hover {
    color: var(--ds-primary);
    background: rgba(78, 177, 186, 0.1);
}
.fe-pages-games-page .games-tab-button.active,
.fe-pages-games-page .game-internal-tab.active,
.fe-pages-games-page .multiplayer-tab-btn.active {
    color: var(--ds-secondary);
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.fe-pages-games-page .games-tab-button.active::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 3px;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    border-radius: 3px 3px 0 0;
}
.fe-pages-games-page .games-tab-icon {
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
}
.fe-pages-games-page .games-tab-content {
    padding: 50px 40px;
    min-height: 400px;
    animation: fadeInTab 0.4s ease-out;
}
@keyframes fadeInTab {
from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fe-pages-games-page .games-tab-pane {
    display: none;
}
.fe-pages-games-page .games-tab-pane.active {
    display: block;
}
.fe-pages-games-page .games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 20px;
}
.fe-pages-games-page .game-card {
    background: linear-gradient(135deg, #ffffff 0%, var(--ds-bg-light) 100%);
    border-radius: var(--ds-radius-xl);
    padding: 35px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    border: 1px solid #f1f5f9;
    position: relative;
    overflow: hidden;
}
.fe-pages-games-page .game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ds-primary), var(--ds-secondary));
    transform: scaleX(0);
    transition: transform 0.4s ease;
}
.fe-pages-games-page .game-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--ds-primary);
}
.fe-pages-games-page .game-card:hover::before {
    transform: scaleX(1);
}
.fe-pages-games-page .game-icon {
    font-size: 4rem;
    margin-bottom: 25px;
    display: inline-block;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}
.fe-pages-games-page .game-card:hover .game-icon {
    transform: scale(1.1) rotate(5deg);
}
.fe-pages-games-page .game-card h3 {
    color: var(--ds-secondary);
    font-size: 1.6rem;
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1.3;
}
.fe-pages-games-page .game-card p {
    color: #64748b;
    margin-bottom: 25px;
    line-height: 1.7;
    font-size: 15px;
}
.fe-pages-games-page .game-btn {
    display: inline-block;
    padding: 14px 35px;
    background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-secondary) 100%);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
    transition: var(--ds-transition-slow);
    box-shadow: 0 4px 15px rgba(78, 177, 186, 0.3);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.fe-pages-games-page .game-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}
.fe-pages-games-page .game-btn:hover::before {
    width: 300px;
    height: 300px;
}
.fe-pages-games-page .game-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78, 177, 186, 0.4);
    color: white;
    text-decoration: none;
}
.fe-pages-games-page .game-btn:active {
    transform: translateY(0);
}
.fe-pages-games-page .coming-soon {
    position: relative;
}
.fe-pages-games-page .coming-soon::after {
    content: '🔜';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 1.2rem;
    animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}
.fe-pages-games-page .coming-soon .game-btn {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    cursor: not-allowed;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.fe-pages-games-page .coming-soon .game-btn:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.fe-pages-games-page .game-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: white;
    padding: 6px 14px;
    border-radius: var(--ds-radius-xl);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(78, 177, 186, 0.3);
}
.fe-pages-games-page .games-empty-state {
    text-align: center;
    padding: 80px 20px;
    color: #64748b;
}
.fe-pages-games-page .games-empty-state-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    opacity: 0.5;
}
.fe-pages-games-page .games-empty-state h3 {
    font-size: 1.5rem;
    color: var(--ds-secondary);
    margin-bottom: 10px;
}
.fe-pages-games-page .games-empty-state p {
    font-size: 1rem;
    color: #94a3b8;
}
@media (max-width: 768px) {
.fe-pages-games-page.games-container {
    padding: 30px 15px;
}
.fe-pages-games-page .games-header h1 {
    font-size: 2.2rem;
}
.fe-pages-games-page .games-header p {
    font-size: 1rem;
}
.fe-pages-games-page .games-tabs-header {
    flex-direction: column;
        gap: 4px;
}
.fe-pages-games-page .games-tab-button {
    padding: 14px 24px;
        font-size: 15px;
}
.fe-pages-games-page .games-tab-content {
    padding: 30px 20px;
}
.fe-pages-games-page .games-grid {
    grid-template-columns: 1fr;
        gap: 25px;
}
.fe-pages-games-page .game-card {
    padding: 30px 25px;
}
.fe-pages-games-page .game-icon {
    font-size: 3.5rem;
}
}
@media (max-width: 480px) {
.fe-pages-games-page .games-header h1 {
    font-size: 1.25rem;
}
.fe-pages-games-page .game-card h3 {
    font-size: 1.4rem;
}
.fe-pages-games-page .game-btn {
    padding: 12px 28px;
        font-size: 14px;
}
}
.fe-pages-games-page .single-player-games {
    background: transparent;
}
.fe-pages-games-page .game-internal-tabs {
    display: flex;
    background: var(--ds-bg-light);
    border-radius: var(--ds-radius-md);
    padding: 6px;
    gap: 6px;
    margin-bottom: 30px;
}
.fe-pages-games-page .game-internal-tab {
    flex: 1;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    transition: var(--ds-transition-slow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fe-pages-games-page .game-internal-content {
    display: none;
}
.fe-pages-games-page .game-internal-content.active,
.fe-pages-games-page .multiplayer-game-content.active {
    display: block;
    animation: fadeInTab 0.4s ease-out;
}
.fe-pages-games-page .game-card-container {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 30px;
    margin-bottom: 20px;
}
.fe-pages-games-page .game-title-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.fe-pages-games-page .game-title-section h2 {
    font-size: 1.5rem;
    color: var(--ds-secondary);
    font-weight: 700;
    margin: 0;
}
.fe-pages-games-page .game-title-section .text-muted,
.fe-pages-games-page .timer-display .timer-label {
    color: #64748b;
    font-size: 0.875rem;
}
.fe-pages-games-page .timer-display {
    text-align: right;
}

.fe-pages-games-page .timer-display .timer-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ds-secondary);
    font-variant-numeric: tabular-nums;
}
.fe-pages-games-page .pill-badge {
    background: #eef3ff;
    color: var(--ds-secondary);
    border: 1px solid #dfe7ff;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.fe-pages-games-page .drop-zone {
    min-height: 120px;
    background: #fff;
    border: 2px dashed #d8dee9;
    border-radius: 0.75rem;
    padding: 0.75rem;
    transition: var(--ds-transition-slow);
}
.fe-pages-games-page .drop-zone.over,
.fe-pages-games-page .board-col.over {
    background: #f1f5ff;
    border-color: var(--ds-primary);
}
.fe-pages-games-page .drop-textarea {
    width: 100%;
    height: 100%;
    min-height: 90px;
    border: 0;
    outline: 0;
    resize: vertical;
    font-size: 14px;
    color: var(--ds-gray-700);
}
.fe-pages-games-page .drag-card {
    user-select: none;
    cursor: grab;
    background: #ffffff;
    border: 1px solid var(--ds-gray-200);
    border-radius: 0.5rem;
    padding: 0.75rem;
    transition: var(--ds-transition);
    font-size: 0.875rem;
    color: var(--ds-gray-700);
}
.fe-pages-games-page .drag-card:hover {
    border-color: var(--ds-primary);
    box-shadow: 0 2px 8px rgba(78, 177, 186, 0.2);
    transform: translateY(-2px);
}
.fe-pages-games-page .drag-card:active {
    cursor: grabbing;
}
.fe-pages-games-page .badge-soft {
    background: #eefaf3;
    color: #127a44;
    border: 1px solid #dff3e9;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}
.fe-pages-games-page .btn-primary-game {
    background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-secondary) 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--ds-radius-sm);
    font-weight: 600;
    transition: var(--ds-transition-slow);
    box-shadow: 0 4px 15px rgba(78, 177, 186, 0.3);
}
.fe-pages-games-page .btn-primary-game:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78, 177, 186, 0.4);
    color: white;
}
.fe-pages-games-page .btn-outline-game {
    background: transparent;
    color: #64748b;
    border: 2px solid var(--ds-gray-200);
    padding: 10px 20px;
    border-radius: var(--ds-radius-sm);
    font-weight: 600;
    transition: var(--ds-transition-slow);
}
.fe-pages-games-page .btn-outline-game:hover {
    border-color: var(--ds-primary);
    color: var(--ds-primary);
    background: rgba(78, 177, 186, 0.05);
}
.fe-pages-games-page .btn-success-game {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--ds-radius-sm);
    font-weight: 600;
    transition: var(--ds-transition-slow);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.fe-pages-games-page .btn-success-game:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    color: white;
}

.fe-pages-games-page .score-display {
    font-size: 3rem;
    font-weight: 700;
    color: var(--ds-secondary);
}
.fe-pages-games-page .game-section-divider {
    border: none;
    border-top: 1px solid var(--ds-gray-200);
    margin: 24px 0;
}
@media (max-width: 768px) {
.fe-pages-games-page .game-card-container {
    padding: 20px;
}
.fe-pages-games-page .game-title-section {
    flex-direction: column;
        align-items: flex-start;
        gap: 15px;
}
.fe-pages-games-page .timer-display {
    text-align: left;
        width: 100%;
}
.fe-pages-games-page .game-internal-tabs {
    flex-direction: column;
}
.fe-pages-games-page .game-internal-tab {
    width: 100%;
}
}
.fe-pages-games-page .multiplayer-games-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    padding: 15px;
    background: var(--ds-bg-light);
    border-radius: var(--ds-radius-md);
}
.fe-pages-games-page .handle-preview {
    display: flex;
    align-items: center;
    gap: 12px;
}
.fe-pages-games-page .handle-preview img, .fe-pages-games-page .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ds-gray-200);
}
.fe-pages-games-page .multiplayer-tabs-container {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}
.fe-pages-games-page .multiplayer-tab-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    background: var(--ds-bg-light);
    border: none;
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    transition: var(--ds-transition-slow);
    display: flex;
    align-items: center;
    gap: 6px;
}

.fe-pages-games-page .multiplayer-game-content {
    display: none;
}

.fe-pages-games-page .soft-card {
    background: #ffffff;
    border-radius: var(--ds-radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 20px;
}
.fe-pages-games-page .board-col {
    min-height: 180px;
    background: #ffffff;
    border: 2px dashed #d8dee9;
    border-radius: var(--ds-radius-md);
    padding: 15px;
    transition: var(--ds-transition-slow);
}

.fe-pages-games-page .muted-chip {
    font-size: 0.875rem;
    color: #64748b;
    padding: 4px 12px;
    background: var(--ds-bg-light);
    border-radius: var(--ds-radius-xl);
}
.fe-pages-games-page .form-range {
    height: 6px;
}
.fe-pages-games-page .form-range::-webkit-slider-thumb {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
}
.fe-pages-games-page .form-range::-moz-range-thumb {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    border: none;
}
.fe-pages-games-page .bg-soft-panel {
    background: var(--ds-bg-light);
}
.fe-pages-games-page .border-soft {
    border-color: var(--ds-gray-200);
}
.fe-pages-games-page .text-slate-dark {
    color: var(--ds-gray-700);
}
.fe-pages-games-page .text-slate-muted {
    color: #64748b;
}
.fe-pages-games-page .input-rounded-soft {
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-gray-200);
}

/* Extracted from application/views/Frontend/pages/request-demo.php */

/* Extracted from application/views/Frontend/pages/how_it_works.php */
.fe-pages-how-it-works-page.how-it-works-section {
    position: relative;
    padding: 80px 0;
}
.fe-pages-how-it-works-page .step-container {
    position: relative;
    margin-bottom: 80px;
}
.fe-pages-how-it-works-page .step-container:last-child {
    margin-bottom: 40px;
}
.fe-pages-how-it-works-page .step-card {
    background: white;
    border-radius: var(--ds-radius-xl);
    padding: 40px;
    box-shadow: 0 4px 20px rgba(46, 114, 145, 0.08);
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.fe-pages-how-it-works-page .step-card:hover {
    box-shadow: 0 12px 40px rgba(46, 114, 145, 0.15);
    transform: translateY(-4px);
}
.fe-pages-how-it-works-page .step-number {
    position: absolute;
    top: -25px;
    left: 40px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: white;
    box-shadow: 0 8px 20px rgba(78, 177, 186, 0.4);
}
.fe-pages-how-it-works-page .step-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.fe-pages-how-it-works-page .step-container:nth-child(even) .step-content {
    direction: rtl;
}
.fe-pages-how-it-works-page .step-container:nth-child(even) .step-text {
    direction: ltr;
}
.fe-pages-how-it-works-page .step-image {
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.fe-pages-how-it-works-page .step-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.fe-pages-how-it-works-page .step-card:hover .step-image img {
    transform: scale(1.05);
}
.fe-pages-how-it-works-page .step-text h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--ds-gray-800);
    margin-bottom: 16px;
    line-height: 1.3;
}
.fe-pages-how-it-works-page .step-text {
    color: var(--ds-gray-600);
    font-size: 16px;
    line-height: 1.8;
}
.fe-pages-how-it-works-page .step-text p {
    margin-bottom: 12px;
}
.fe-pages-how-it-works-page .step-text ul {
    padding-left: 0;
    list-style: none;
}
.fe-pages-how-it-works-page .step-text ul li {
    padding: 8px 0 8px 32px;
    position: relative;
}
.fe-pages-how-it-works-page .step-text ul li::before {
    content: '\f00c';
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    color: var(--ds-primary);
    font-size: 16px;
}
.fe-pages-how-it-works-page .final-message {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.05), rgba(46, 114, 145, 0.05));
    border-radius: var(--ds-radius-xl);
    margin-top: 40px;
}
.fe-pages-how-it-works-page .final-message h4 {
    font-size: 24px;
    font-weight: 700;
    color: var(--ds-gray-800);
    margin-bottom: 16px;
}
.fe-pages-how-it-works-page .connector-line {
    position: absolute;
    left: 70px;
    top: 100%;
    width: 4px;
    height: 80px;
    background: linear-gradient(180deg, rgba(78, 177, 186, 0.8), rgba(78, 177, 186, 0.2));
    z-index: 1;
}
.fe-pages-how-it-works-page .step-container:last-of-type .connector-line {
    display: none;
}
@media (max-width: 991px) {
.fe-pages-how-it-works-page .step-content {
    grid-template-columns: 1fr;
        gap: 30px;
}
.fe-pages-how-it-works-page .step-container:nth-child(even) .step-content {
    direction: ltr;
}
.fe-pages-how-it-works-page .step-number {
    left: 20px;
        width: 50px;
        height: 50px;
        font-size: 24px;
}
.fe-pages-how-it-works-page .connector-line {
    left: 45px;
}
.fe-pages-how-it-works-page .step-text h2 {
    font-size: 24px;
}
}
@media (max-width: 576px) {
.fe-pages-how-it-works-page.how-it-works-section {
    padding: 40px 0;
}
.fe-pages-how-it-works-page .step-card {
    padding: 30px 20px;
}
.fe-pages-how-it-works-page .step-container {
    margin-bottom: 60px;
}
.fe-pages-how-it-works-page .step-number {
    width: 45px;
        height: 45px;
        font-size: 20px;
}
.fe-pages-how-it-works-page .connector-line {
    left: 42px;
        height: 60px;
}
}

/* Extracted from application/views/Frontend/pages/errorMsg.php */
.fe-pages-errormsg-page h3 {
    font-size: 17px;
    font-weight: 600;
}

/* Extracted from application/views/Frontend/pages/signup.php */
.fe-pages-signup-page .coupanMsg .succ {
    color: #065f46;
    font-weight: 500;
    font-size: 14px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fe-pages-signup-page .coupanMsg .err {
    color: #dc2626;
    font-weight: 500;
    font-size: 14px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fe-pages-signup-page .signup-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(46, 114, 145, 0.1) 0%, rgba(78, 177, 186, 0.08) 100%);
    border-radius: 50px;
    margin-bottom: 1rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-accent);
}
.fe-pages-signup-page .signup-badge svg,
.fe-pages-faqs-main-page .faq-icon svg,
.fe-pages-faq-page .faq-icon svg {
    width: 18px;
    height: 18px;
}
.fe-pages-signup-page .signup-header h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.5rem;
}
.fe-pages-signup-page .signup-header p {
    font-size: 15px;
    color: var(--ds-gray-500);
    margin-bottom: 0;
}
.fe-pages-signup-page .step-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    border-radius: var(--ds-radius-md);
}
.fe-pages-signup-page .step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    position: relative;
}
.fe-pages-signup-page .step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    background: var(--ds-gray-200);
    color: var(--ds-gray-400);
    transition: var(--ds-transition-slow);
    flex-shrink: 0;
}
.fe-pages-signup-page .step-item.active .step-number {
    background: linear-gradient(135deg, var(--ds-accent) 0%, var(--ds-primary) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(46, 114, 145, 0.3);
}
.fe-pages-signup-page .step-item.completed .step-number {
    background: #10b981;
    color: white;
}
.fe-pages-signup-page .step-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-gray-400);
}
.fe-pages-signup-page .step-item.active .step-label {
    color: var(--ds-accent);
}
.fe-pages-signup-page .step-item.completed .step-label {
    color: #10b981;
}
.fe-pages-signup-page select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 44px !important;
}
.fe-pages-signup-page .input-enhanced {
    position: relative;
}

.fe-pages-signup-page .input-enhanced input {
    padding-left: 44px !important;
}
.fe-pages-signup-page .input-enhanced .input-icon,
.fe-pages-signup-page .input-enhanced:focus-within .input-icon {
    color: var(--ds-gray-400) !important;
}
.fe-pages-signup-page .input-enhanced input:focus {
    border-radius: var(--ds-radius-md) !important;
    transform: none !important;
}
.fe-pages-signup-page .input-enhanced input:-webkit-autofill,
.fe-pages-signup-page .input-enhanced input:-webkit-autofill:hover,
.fe-pages-signup-page .input-enhanced input:-webkit-autofill:focus,
.fe-pages-signup-page .input-enhanced input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: var(--ds-gray-800) !important;
    caret-color: var(--ds-gray-800);
    transition: background-color 9999s ease-in-out 0s;
}
.fe-pages-signup-page .helper-text {
    font-size: 13px;
    color: var(--ds-gray-500);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fe-pages-signup-page .helper-text svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.fe-pages-signup-page .terms-container {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    padding: 16px;
    border-radius: var(--ds-radius-md);
    border: 2px solid var(--ds-gray-200);
    margin-bottom: 1.5rem;
}
.fe-pages-signup-page .terms-container .form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.fe-pages-signup-page .terms-container .form-check-input,
.fe-pages-signup-page .security-info svg {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}
.fe-pages-signup-page .terms-container .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid var(--ds-gray-300);
    border-radius: var(--ds-radius-xs);
    cursor: pointer;
    background-color: #fff;
    transition: var(--ds-transition);
}
.fe-pages-signup-page .terms-container .form-check-input:checked {
    background-color: var(--ds-accent);
    border-color: var(--ds-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
}
.fe-pages-signup-page .terms-container .form-check-label {
    font-size: 14px;
    line-height: 1.6;
    color: #454545;
    margin: 0;
}
.fe-pages-signup-page .terms-container a {
    color: var(--ds-accent);
    font-weight: 600;
    text-decoration: underline;
}
.fe-pages-signup-page .terms-container a:hover {
    color: var(--ds-primary);
}
.fe-pages-signup-page .verification-code-container {
    text-align: center;
}
.fe-pages-signup-page .code-input {
    font-size: 1.5rem !important;
    letter-spacing: 8px;
    text-align: center;
    font-weight: 700;
    padding: 18px 24px !important;
}
.fe-pages-signup-page .resend-code {
    margin-top: 1rem;
    font-size: 14px;
    color: var(--ds-gray-500);
}
.fe-pages-signup-page .resend-code a {
    color: var(--ds-accent);
    font-weight: 600;
    cursor: pointer;
}
.fe-pages-signup-page .resend-code a:hover {
    color: var(--ds-primary);
}
.fe-pages-signup-page .btn-signup {
    width: 100%;
    padding: 14px 24px !important;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--ds-accent) 0%, var(--ds-primary) 100%);
    color: white;
    border: none;
    border-radius: var(--ds-radius-md);
    box-shadow: 0 4px 12px rgba(46, 114, 145, 0.3);
    transition: var(--ds-transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fe-pages-signup-page .btn-signup:active {
    transform: translateY(0);
}

.fe-pages-signup-page .login-link {
    color: var(--ds-accent);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}
.fe-pages-signup-page .login-link:hover {
    color: var(--ds-primary);
}
.fe-pages-signup-page .security-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 10px;
    border-left: 4px solid #3b82f6;
    margin-bottom: 1.5rem;
    font-size: 13px;
    color: #1e40af;
}

.fe-pages-signup-page .auth-page-container {
    max-width: 600px;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
.fe-pages-signup-page.auth-page-wrapper {
    padding: 3rem 0;
}
.fe-pages-signup-page .auth-card {
    margin: 0 1rem;
        padding: 2.5rem 2rem;
}
}
@media screen and (max-width: 576px) {
.fe-pages-signup-page.auth-page-wrapper {
    padding: 2rem 0;
}
.fe-pages-signup-page .auth-card {
    padding: 2rem 1.5rem;
        border-radius: var(--ds-radius-xl);
}
.fe-pages-signup-page .signup-header h3 {
    font-size: 1.5rem;
}
.fe-pages-signup-page .step-label {
    display: none;
}
.fe-pages-signup-page .step-number {
    width: 28px;
        height: 28px;
        font-size: 12px;
}
.fe-pages-signup-page .code-input {
    font-size: 1.25rem !important;
        letter-spacing: 4px;
}
}

/* Extracted from application/views/Frontend/pages/profile.php */
.fe-pages-profile-page .col-form-label {
    text-align:right; font-weight:600; font-size:15px;
}
.fe-pages-profile-page .profileSubTitle {
    font-size:16px;
}

/* Extracted from application/views/Frontend/pages/faqs-main.php */
    * {
transition: var(--ds-transition);
}

.fe-pages-faqs-main-page .search-clear:hover {
    background: var(--ds-gray-200);
}
.fe-pages-faqs-main-page .search-clear.active {
    display: flex;
}
.fe-pages-faqs-main-page .faq-accordion,
.fe-pages-faq-page .faq-accordion {
    display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 100%;
}
.fe-pages-faqs-main-page .faq-item,
.fe-pages-faq-page .faq-item {
    background: #ffffff;
        border-radius: var(--ds-radius-lg);
        border: 2px solid var(--ds-gray-200);
        overflow: hidden;
        transition: var(--ds-transition-smooth);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box;
        margin-bottom: 0;
}
.fe-pages-faqs-main-page .faq-item[style*="display: none"] {
    display: none !important;
}
.fe-pages-faqs-main-page .faq-item[style*="display: block"],
.fe-pages-faq-page .faq-item[style*="display: block"] {
    display: block !important;
        width: 100% !important;
        max-width: 100% !important;
}
.fe-pages-faqs-main-page .faq-item:hover,
.fe-pages-faq-page .faq-item:hover {
    border-color: #cbd5e1;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.fe-pages-faqs-main-page .faq-item.active,
.fe-pages-faq-page .faq-item.active {
    border-color: var(--ds-primary);
        box-shadow: 0 4px 16px rgba(78, 177, 186, 0.15), 0 2px 8px rgba(78, 177, 186, 0.1);
}
.fe-pages-faqs-main-page .faq-header,
.fe-pages-faq-page .faq-header {
    padding: 20px 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ffffff;
        transition: var(--ds-transition-slow);
        user-select: none;
}
.fe-pages-faqs-main-page .faq-item.active .faq-header {
    background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 100%);
}
.fe-pages-faqs-main-page .faq-question,
.fe-pages-faq-page .faq-question {
    font-size: 16px;
        font-weight: 600;
        color: var(--ds-gray-800);
        line-height: 1.5;
        flex: 1;
        padding-right: 16px;
}
.fe-pages-faqs-main-page .faq-item.active .faq-question {
    color: var(--ds-secondary);
}
.fe-pages-faqs-main-page .faq-icon,
.fe-pages-faq-page .faq-icon {
    width: 32px;
        height: 32px;
        border-radius: var(--ds-radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--ds-gray-100);
        color: var(--ds-gray-500);
        transition: var(--ds-transition-slow);
        flex-shrink: 0;
}
.fe-pages-faqs-main-page .faq-item.active .faq-icon,
.fe-pages-faq-page .faq-item.active .faq-icon {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
        color: white;
        transform: rotate(180deg);
}

.fe-pages-faqs-main-page .faq-content,
.fe-pages-faq-page .faq-content {
    max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
        padding: 0 24px;
}
.fe-pages-faqs-main-page .faq-item.active .faq-content,
.fe-pages-faq-page .faq-item.active .faq-content {
    max-height: 2000px;
        padding: 0 24px 24px 24px;
}
.fe-pages-faqs-main-page .faq-answer,
.fe-pages-faq-page .faq-answer {
    font-size: 15px;
        line-height: 1.7;
        color: var(--ds-gray-600);
        padding-top: 16px;
}
.fe-pages-faqs-main-page .faq-answer p {
    margin-bottom: 12px;
}
.fe-pages-faqs-main-page .faq-answer p:last-child {
    margin-bottom: 0;
}
.fe-pages-faqs-main-page .faq-answer ul, .fe-pages-faqs-main-page .faq-answer ol {
    margin-left: 20px;
        margin-bottom: 12px;
}
.fe-pages-faqs-main-page .faq-answer li {
    margin-bottom: 8px;
}

.fe-pages-faqs-main-page .faq-answer a {
    color: var(--ds-primary);
        text-decoration: none;
}
.fe-pages-faqs-main-page .faq-answer a:hover {
    text-decoration: underline;
}

.fe-pages-faqs-main-page .fade-in {
    animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
}
.fe-pages-faqs-main-page .question-number,
.fe-pages-faq-page .question-number {
    display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: var(--ds-radius-sm);
        background: var(--ds-gray-100);
        color: var(--ds-gray-500);
        font-size: 12px;
        font-weight: 600;
        margin-right: 12px;
        flex-shrink: 0;
}

.fe-pages-faqs-main-page.page-header-section {
    background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-secondary) 100%);
        padding: 60px 0;
        margin-bottom: 40px;
        position: relative;
        overflow: hidden;
}
.fe-pages-faqs-main-page.page-header-section::before {
    content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="rgba(255,255,255,0.05)"/></svg>');
        opacity: 0.3;
}
.fe-pages-faqs-main-page.page-header-section h1 {
    color: white;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        position: relative;
        z-index: 1;
}
.fe-pages-faqs-main-page.page-header-section p {
    color: rgba(255, 255, 255, 0.9);
        font-size: 1.125rem;
        max-width: 700px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
}
@media (max-width: 768px) {
.fe-pages-faqs-main-page.page-header-section {
    padding: 40px 0;
}
.fe-pages-faqs-main-page.page-header-section h1 {
    font-size: 1.875rem;
}
.fe-pages-faqs-main-page.page-header-section p {
    font-size: 1rem;
}
}

/* Extracted from application/views/Frontend/pages/faq.php */
    * {
transition: var(--ds-transition);
}

.fe-pages-faq-page .search-clear:hover {
    background: var(--ds-gray-200);
}
.fe-pages-faq-page .search-clear.active {
    display: flex;
}

.fe-pages-faq-page .faq-item[style*="display: none"] {
    display: none !important;
}

.fe-pages-faq-page .faq-item.active .faq-header {
    background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 100%);
}

.fe-pages-faq-page .faq-item.active .faq-question {
    color: var(--ds-secondary);
}

.fe-pages-faq-page .faq-answer p {
    margin-bottom: 12px;
}
.fe-pages-faq-page .faq-answer p:last-child {
    margin-bottom: 0;
}

.fe-pages-faq-page .fade-in {
    animation: fadeIn 0.3s ease-in;
}

/* Extracted from application/views/Frontend/pages/strength.php */
.fe-pages-strength-page .card {
    border:0; box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.fe-pages-strength-page .progress-wrap {
    position:relative;
}
.fe-pages-strength-page .progress-bar-custom {
    height:10px; border-radius:999px;
    background:linear-gradient(90deg,#e9ecef 0%, #cfd8d3 35%, var(--ds-primary) 60%, var(--ds-secondary) 85%);
}
.fe-pages-strength-page .progress-indicator {
    position:absolute; top:-6px; height:22px; width:22px;
    border:3px solid #fff; border-radius:999px; background:var(--ds-secondary); box-shadow:0 0 0 2px rgba(25,135,84,.35);
    transform:translateX(-50%);
}
.fe-pages-strength-page .label-ends {
    font-weight:600; color:var(--ds-gray-800); font-size:22px;
}
.fe-pages-strength-page .checkline {
    display:flex; align-items:center; justify-content:space-between; gap:12px; padding:.9rem 0;
}
.fe-pages-strength-page .checkline + .checkline {
    border-top:1px solid #e9ecef;
}
.fe-pages-strength-page .kpi {
    font-variant-numeric:tabular-nums;
}
.fe-pages-strength-page .tier-badge {
    font-weight:600; font-size:22px;
}

.fe-pages-strength-page .tier-mod {
    background:#fff3cd; color:#8a6d3b;
}
.fe-pages-strength-page .tier-some {
    background:#e7f1ff; color:#0c63e4;
}
.fe-pages-strength-page .tier-in {
    background:#fde2e1; color:#b02a37;
}
.fe-pages-strength-page .badgeInfo {
    font-size: 18px;font-weight: 600;
}
.fe-pages-strength-page .score {
    font-size: 20px;font-weight: 600;color: #333;
}
.fe-pages-strength-page .fs18 {
    font-size: 18px;
}
.fe-pages-strength-page .fs17 {
    font-size: 17px;
}
.fe-pages-strength-page .fs20 {
    font-size: 20px;
}

/* Extracted from application/views/Frontend/pages/pic.php */
.fe-pages-pic-page .file-upload-button:hover,
.fe-pages-profile-new-sections-pic-page .file-upload-button:hover {
    border-color: var(--ds-primary) !important;
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
        box-shadow: 0 4px 12px rgba(78, 177, 186, 0.15);
        transform: translateY(-2px);
}
.fe-pages-pic-page .file-upload-button:hover span {
    color: var(--ds-primary) !important;
}
.fe-pages-pic-page .file-upload-button:hover svg,
.fe-pages-profile-new-sections-pic-page .file-upload-button:hover svg {
    color: var(--ds-primary) !important;
        transform: scale(1.1);
}
.fe-pages-pic-page .preview-container:hover,
.fe-pages-profile-new-sections-pic-page .preview-container:hover {
    border-color: var(--ds-primary) !important;
        box-shadow: 0 4px 12px rgba(78, 177, 186, 0.1);
}
.fe-pages-pic-page #blah {
    transition: transform 0.3s ease;
}
.fe-pages-pic-page .preview-container:hover #blah {
    transform: scale(1.02);
}
.fe-pages-pic-page .image-resize-hint {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border: 2px solid #fbbf24;
        border-radius: 10px;
        padding: 12px 16px;
        margin-top: 10px;
        font-size: 13px;
        color: #92400e;
        line-height: 1.6;
        box-shadow: 0 2px 8px rgba(251, 191, 36, 0.2);
}
.fe-pages-pic-page .image-resize-hint strong {
    color: #78350f;
        font-weight: 600;
}
.fe-pages-pic-page .image-resize-hint a {
    color: var(--ds-primary) !important;
        text-decoration: underline;
        font-weight: 500;
}
.fe-pages-pic-page .image-resize-hint a:hover {
    color: #3A9BA5 !important;
}

/* Extracted from application/views/Frontend/pages/scoring-collaborative.php */
.fe-pages-scoring-collaborative-page .swiper {
    width: 90%; height: 90vh; margin: 0 auto;
}
.fe-pages-scoring-collaborative-page .swiper-slide img {
    width:100%; height:100%; object-fit:contain; background:#fff;
}

/* Extracted from application/views/Frontend/pages/career_readiness_html.php */
body.fe-pages-career-readiness-html-page, .fe-pages-career-readiness-html-page {
    --bf-gold:         var(--ds-primary);
    --bf-gold-light:   #FDF3D8;
    --bf-gold-dark:    #B8892A;
    --bf-ink:          #1A1814;
    --bf-surface:      #F7F5F0;
    --bf-white:        #FFFFFF;
    --bf-muted:        #7A7570;
    --bf-border:       #E2DED6;
    --bf-green:        #2D7A4F;
    --bf-green-light:  #E8F5EE;
    --bf-teal:         #1A6B7A;
    --bf-teal-light:   #E1F5EE;
    --bf-amber:        #C47A20;
    --bf-amber-light:  #FEF3E0;
    --bf-red:          #C0392B;
    --bf-red-light:    #FBEAEA;
    --bf-blue:         #4361C2;
    --bf-blue-light:   #EEF2FF;
}
.fe-pages-career-readiness-html-page * {
    box-sizing: border-box;
}
body.fe-pages-career-readiness-html-page, .fe-pages-career-readiness-html-page {
    font-family: 'DM Sans', sans-serif;
    background: var(--bf-surface);
    color: var(--bf-ink);
    min-height: 100vh;
}
.fe-pages-career-readiness-html-page h1, .fe-pages-career-readiness-html-page h2, .fe-pages-career-readiness-html-page h3, .fe-pages-career-readiness-html-page h4, .fe-pages-career-readiness-html-page h5, .fe-pages-career-readiness-html-page h6, .fe-pages-career-readiness-html-page .display-font {
    font-family: 'Inter', 'Montserrat', sans-serif;
}
.fe-pages-career-readiness-html-page .topbar {
    background: var(--bf-ink);
    border-bottom: 3px solid var(--bf-gold);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 1040;
}
.fe-pages-career-readiness-html-page .topbar .brand {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.35rem;
    color: var(--bf-white);
    letter-spacing: -0.5px;
    text-decoration: none;
}
.fe-pages-career-readiness-html-page .topbar .brand span {
    color: var(--bf-gold);
}
.fe-pages-career-readiness-html-page .topbar .doc-label {
    font-size: 20px;
    color: var(--bf-white);;
    letter-spacing: 0.06em;
    text-transform: uppercase;font-weight: 500;
}
.fe-pages-career-readiness-html-page .nace-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bf-gold);
    border: 1px solid rgba(232,184,75,0.3);
    border-radius: var(--ds-radius-xl);
    padding: 4px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #000;
}
.fe-pages-career-readiness-html-page .hero {
    background: var(--bf-ink);
    padding: 56px 0 44px;
    position: relative;
    overflow: hidden;
}
.fe-pages-career-readiness-html-page .hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -100px;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,184,75,0.09) 0%, transparent 70%);
}
.fe-pages-career-readiness-html-page .hero::after {
    content: '';
    position: absolute;
    bottom: -60px; left: 20%;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,184,75,0.05) 0%, transparent 70%);
}
.fe-pages-career-readiness-html-page .hero h1 {
    font-weight: 800;
    font-size: 2.6rem;
    color: var(--bf-white);
    line-height: 1.1;
    margin-bottom: 12px;
}
.fe-pages-career-readiness-html-page .hero h1 .accent {
    color: var(--bf-gold);
}
.fe-pages-career-readiness-html-page .hero .subtitle {
    color: #9A9590;
    font-size: 1rem;
    max-width: 560px;
    line-height: 1.6;
}
.fe-pages-career-readiness-html-page .score-legend {
    background: var(--bf-white);
    border: 1px solid var(--bf-border);
    border-radius: var(--ds-radius-lg);
    padding: 24px;
    margin-bottom: 28px;
}
.fe-pages-career-readiness-html-page .score-legend h6 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bf-muted);
    margin-bottom: 14px;
}
.fe-pages-career-readiness-html-page .level-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.fe-pages-career-readiness-html-page .level-pill {
    flex: 1;
    min-width: 120px;
    border-radius: 10px;
    padding: 10px 14px;
    border-left: 4px solid;
    background: var(--bf-surface);
}
.fe-pages-career-readiness-html-page .level-pill .lp-score {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
}
.fe-pages-career-readiness-html-page .level-pill .lp-name {
    font-size: 14px;
    color: #000;
}
.fe-pages-career-readiness-html-page .level-pill.l5 {
    border-color: var(--bf-green); background: var(--bf-green-light);
}
.fe-pages-career-readiness-html-page .level-pill.l5 .lp-score {
    color: var(--bf-green);
}
.fe-pages-career-readiness-html-page .level-pill.l4 {
    border-color: var(--bf-teal); background: var(--bf-teal-light);
}
.fe-pages-career-readiness-html-page .level-pill.l4 .lp-score {
    color: var(--bf-teal);
}
.fe-pages-career-readiness-html-page .level-pill.l3 {
    border-color: var(--bf-gold-dark); background: var(--bf-gold-light);
}
.fe-pages-career-readiness-html-page .level-pill.l3 .lp-score {
    color: var(--bf-gold-dark);
}
.fe-pages-career-readiness-html-page .level-pill.l2 {
    border-color: var(--bf-amber); background: var(--bf-amber-light);
}
.fe-pages-career-readiness-html-page .level-pill.l2 .lp-score {
    color: var(--bf-amber);
}
.fe-pages-career-readiness-html-page .level-pill.l1 {
    border-color: var(--bf-red); background: var(--bf-red-light);
}
.fe-pages-career-readiness-html-page .level-pill.l1 .lp-score {
    color: var(--bf-red);
}
.fe-pages-career-readiness-html-page .score-note {
    margin-top: 14px;
    background: var(--bf-ink);
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.fe-pages-career-readiness-html-page .score-note .total {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--bf-gold);
}
.fe-pages-career-readiness-html-page .score-note .bands {
    font-size: 12px;
    color: #fff;
}
.fe-pages-career-readiness-html-page .filter-nav {
    background: var(--bf-white);
    border: 1px solid var(--bf-border);
    border-radius: var(--ds-radius-md);
    padding: 6px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.fe-pages-career-readiness-html-page .filter-btn {
    background: none;
    border: none;
    border-radius: var(--ds-radius-sm);
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.fe-pages-career-readiness-html-page .filter-btn:hover {
    background: var(--bf-surface); color: var(--bf-ink);
}
.fe-pages-career-readiness-html-page .filter-btn.active {
    background: var(--bf-ink); color: var(--bf-white); font-weight: 600;
}
.fe-pages-career-readiness-html-page .comp-card {
    background: var(--bf-white);
    border: 1px solid var(--bf-border);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.fe-pages-career-readiness-html-page .comp-card:hover {
    border-color: #ccc; box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.fe-pages-career-readiness-html-page .comp-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    user-select: none;
}
.fe-pages-career-readiness-html-page .comp-num {
    width: 44px; height: 44px;
    border-radius: var(--ds-radius-md);
    background: var(--bf-gold);
    color: var(--bf-ink);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.fe-pages-career-readiness-html-page .comp-meta {
    flex: 1; min-width: 0;
}
.fe-pages-career-readiness-html-page .comp-title {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--bf-ink);
    margin-bottom: 2px;
}
.fe-pages-career-readiness-html-page .comp-tagline {
    font-size: 15px;
    color: #333;
}
.fe-pages-career-readiness-html-page .cat-badge {
    font-size: 13px;
    font-weight: 600;
    padding: 3px 15px;
    border-radius: var(--ds-radius-xl);
    white-space: nowrap;
}
.fe-pages-career-readiness-html-page .cat-personal {
    background: var(--bf-gold-light); color: var(--bf-gold-dark);
}
.fe-pages-career-readiness-html-page .cat-comm {
    background: var(--bf-blue-light); color: var(--bf-blue);
}
.fe-pages-career-readiness-html-page .cat-analytical {
    background: var(--bf-teal-light); color: var(--bf-teal);
}
.fe-pages-career-readiness-html-page .cat-tech {
    background: #EDE9FE; color: #5B21B6;
}
.fe-pages-career-readiness-html-page .cat-collab {
    background: var(--bf-green-light); color: var(--bf-green);
}
.fe-pages-career-readiness-html-page .comp-chevron {
    font-size: 18px;
    color: var(--bf-muted);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.fe-pages-career-readiness-html-page .comp-card.open .comp-chevron {
    transform: rotate(180deg);
}
.fe-pages-career-readiness-html-page .comp-body {
    display: none;
    border-top: 1px solid var(--bf-border);
}
.fe-pages-career-readiness-html-page .comp-card.open .comp-body {
    display: block;
}
.fe-pages-career-readiness-html-page .comp-body-inner {
    padding: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 767px) {
.fe-pages-career-readiness-html-page .comp-body-inner {
    grid-template-columns: 1fr;
}
.fe-pages-career-readiness-html-page .hero h1 {
    font-size: 1.75rem;
}
.fe-pages-career-readiness-html-page .level-pill {
    min-width: 100px;
}
}
.fe-pages-career-readiness-html-page .nace-def {
    border-left: 3px solid var(--bf-ink);
    padding: 10px 14px;
    background: var(--bf-surface);
    border-radius: 0 8px 8px 0;
    font-size: 15px;
    font-style: italic;
    color: var(--bf-ink);
    line-height: 1.6;
    margin-bottom: 16px;
    grid-column: 1 / -1;
}
.fe-pages-career-readiness-html-page .nace-def span {
    display: block;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bf-ink);
    margin-bottom: 4px;
}
.fe-pages-career-readiness-html-page .rubric-title, .fe-pages-career-readiness-html-page .artifact-title {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bf-muted);
    margin-bottom: 10px;
}
.fe-pages-career-readiness-html-page .rubric-rows {
    display: flex; flex-direction: column; gap: 10px;
}
.fe-pages-career-readiness-html-page .rubric-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: var(--ds-radius-sm);
    background: var(--bf-surface);
}
.fe-pages-career-readiness-html-page .rl-label {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    min-width: 86px;
    flex-shrink: 0;
    padding-top: 1px;
}
.fe-pages-career-readiness-html-page .rl-desc {
    font-size: 15px; color: #333; line-height: 1.55;
}
.fe-pages-career-readiness-html-page .rl5 {
    border-left: 3px solid var(--bf-green);
}
.fe-pages-career-readiness-html-page .rl5 .rl-label {
    color: var(--bf-green);
}
.fe-pages-career-readiness-html-page .rl4 {
    border-left: 3px solid var(--bf-teal);
}
.fe-pages-career-readiness-html-page .rl4 .rl-label {
    color: var(--bf-teal);
}
.fe-pages-career-readiness-html-page .rl3 {
    border-left: 3px solid var(--bf-gold-dark);
}
.fe-pages-career-readiness-html-page .rl3 .rl-label {
    color: var(--bf-gold-dark);
}
.fe-pages-career-readiness-html-page .rl2 {
    border-left: 3px solid var(--bf-amber);
}
.fe-pages-career-readiness-html-page .rl2 .rl-label {
    color: var(--bf-amber);
}
.fe-pages-career-readiness-html-page .rl1 {
    border-left: 3px solid var(--bf-red);
}
.fe-pages-career-readiness-html-page .rl1 .rl-label {
    color: var(--bf-red);
}
.fe-pages-career-readiness-html-page .artifact-list {
    display: flex; flex-direction: column; gap: 8px;
}
.fe-pages-career-readiness-html-page .artifact-item {
    background: var(--bf-gold-light);
    border: 1px solid rgba(232,184,75,0.3);
    border-left: 3px solid var(--bf-gold);
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
}
.fe-pages-career-readiness-html-page .art-type {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bf-gold-dark);
    margin-bottom: 3px;
}
.fe-pages-career-readiness-html-page .art-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bf-ink);
    margin-bottom: 3px;
}
.fe-pages-career-readiness-html-page .art-desc {
    font-size: 15px; color: #333; line-height: 1.5;
}
.fe-pages-career-readiness-html-page .site-footer {
    background: var(--bf-ink);
    border-top: 3px solid var(--bf-gold);
    padding: 28px 0;
    margin-top: 48px;
}
.fe-pages-career-readiness-html-page .site-footer .brand {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.50rem;
    color: var(--bf-white);
}
.fe-pages-career-readiness-html-page .site-footer .brand span {
    color: var(--bf-gold);
}
.fe-pages-career-readiness-html-page .site-footer p {
    font-size: 14px; color: #fff; margin: 0;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.fe-pages-career-readiness-html-page .fade-up {
    animation: fadeUp 0.4s ease both;
}
.fe-pages-career-readiness-html-page .comp-card {
    animation: fadeUp 0.35s ease both;
}
.fe-pages-career-readiness-html-page .comp-progress {
    display: flex;
    gap: 3px;
    margin-top: 5px;
}
.fe-pages-career-readiness-html-page .cp-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--bf-border);
}
.fe-pages-career-readiness-html-page .cp-dot.filled {
    background: var(--bf-gold);
}
@media print {
.fe-pages-career-readiness-html-page .topbar, .fe-pages-career-readiness-html-page .filter-nav {
    display: none !important;
}
.fe-pages-career-readiness-html-page .comp-body {
    display: block !important;
}
.fe-pages-career-readiness-html-page .comp-chevron {
    display: none;
}
.fe-pages-career-readiness-html-page .comp-card {
    break-inside: avoid; margin-bottom: 24px;
}
}

/* Extracted from application/views/Frontend/pages/profile-sections/work-philosophy.php */
.fe-pages-profile-sections-work-philosophy-page .work-philosophy-section {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--ds-gray-200);
}
.fe-pages-profile-sections-work-philosophy-page .work-philosophy-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ds-gray-200);
}
.fe-pages-profile-sections-work-philosophy-page .header-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.fe-pages-profile-sections-work-philosophy-page .section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ds-secondary);
    margin: 0;
    line-height: 1.3;
    flex: 1;
    min-width: 200px;
}
.fe-pages-profile-sections-work-philosophy-page .section-subtitle {
    font-size: 1rem;
    color: var(--ds-gray-600);
    margin: 0;
    line-height: 1.5;
    flex: 1;
    min-width: 300px;
}
.fe-pages-profile-sections-work-philosophy-page .required-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
    color: var(--ds-secondary);
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.fe-pages-profile-sections-work-philosophy-page .header-description {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: var(--ds-bg-light);
    border-radius: 10px;
    font-size: 0.875rem;
    color: var(--ds-gray-500);
    line-height: 1.5;
}
.fe-pages-profile-sections-work-philosophy-page .header-description i {
    color: var(--ds-primary);
    margin-top: 0.125rem;
    flex-shrink: 0;
}
.fe-pages-profile-sections-work-philosophy-page .work-philosophy-content {
    margin-top: 1.5rem;
}
.fe-pages-profile-sections-work-philosophy-page .philosophy-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.fe-pages-profile-sections-work-philosophy-page .philosophy-option-card {
    position: relative;
    display: block;
    background: #ffffff;
    border: 2px solid var(--ds-gray-200);
    border-radius: var(--ds-radius-md);
    padding: 1.25rem 1rem;
    cursor: pointer;
.fe-portfolio-social-media-page .social-media-row {
    position: relative;
    overflow: hidden;
    border-radius: var(--ds-radius-md);
    background: #ffffff;
    border: 2px solid var(--ds-gray-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: var(--ds-transition-smooth);
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    padding: 0;
}
    min-height: 60px;
}
.fe-pages-profile-sections-work-philosophy-page .philosophy-option-card:hover {
    border-color: var(--ds-primary);
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.15);
    transform: translateY(-2px);
    background: var(--ds-bg-light);
}
.fe-pages-profile-sections-work-philosophy-page .philosophy-option-card.selected {
    border-color: var(--ds-primary);
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.05), rgba(30, 78, 122, 0.05));
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.2);
}
.fe-pages-profile-sections-work-philosophy-page .philosophy-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.fe-pages-profile-sections-work-philosophy-page .card-content {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
.fe-pages-profile-sections-work-philosophy-page .checkbox-indicator {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: 2px solid var(--ds-gray-300);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: var(--ds-transition);
    flex-shrink: 0;
}
.fe-pages-profile-sections-work-philosophy-page .checkbox-indicator i {
    font-size: 0.75rem;
    color: #ffffff;
    opacity: 0;
    transform: scale(0);
    transition: var(--ds-transition);
}
.fe-pages-profile-sections-work-philosophy-page .philosophy-option-card.selected .checkbox-indicator {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    border-color: var(--ds-primary);
}
.fe-pages-profile-sections-work-philosophy-page .philosophy-option-card.selected .checkbox-indicator i {
    opacity: 1;
    transform: scale(1);
}
.fe-pages-profile-sections-work-philosophy-page .option-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ds-gray-800);
    line-height: 1.4;
    user-select: none;
    flex: 1;
}
.fe-pages-profile-sections-work-philosophy-page .philosophy-option-card:hover .option-label {
    color: var(--ds-secondary);
}

@media (max-width: 768px) {
.fe-pages-profile-sections-work-philosophy-page .work-philosophy-section {
    padding: 1.5rem;
        border-radius: var(--ds-radius-md);
}
.fe-pages-profile-sections-work-philosophy-page .section-title {
    font-size: 1.5rem;
}
.fe-pages-profile-sections-work-philosophy-page .section-subtitle {
    font-size: 0.9375rem;
}
.fe-pages-profile-sections-work-philosophy-page .header-content {
    flex-direction: column;
        gap: 0.75rem;
}
.fe-pages-profile-sections-work-philosophy-page .philosophy-options-grid {
    grid-template-columns: 1fr;
        gap: 0.875rem;
}
.fe-pages-profile-sections-work-philosophy-page .philosophy-option-card {
    padding: 1rem 0.875rem;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.fe-pages-profile-sections-work-philosophy-page .philosophy-options-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
@media (min-width: 1200px) {
.fe-pages-profile-sections-work-philosophy-page .philosophy-options-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
}
.fe-pages-profile-sections-work-philosophy-page .philosophy-checkbox:focus + .card-content .checkbox-indicator {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}
.fe-pages-profile-sections-work-philosophy-page .philosophy-options-grid:empty::before {
    content: "No work philosophy options available.";
    display: block;
    text-align: center;
    padding: 2rem;
    color: var(--ds-gray-500);
    font-size: 0.9375rem;
}

/* Extracted from application/views/Frontend/pages/profile-new-sections/pic.php */

.fe-pages-profile-new-sections-pic-page .file-upload-button:hover span {
    color: var(--ds-primary) !important;
}

.fe-pages-profile-new-sections-pic-page #blah {
    transition: transform 0.3s ease;
}
.fe-pages-profile-new-sections-pic-page .preview-container:hover #blah {
    transform: scale(1.02);
}
.fe-pages-profile-new-sections-pic-page #imageCropModal[style*="flex"] {
    display: flex !important;
}
.fe-pages-profile-new-sections-pic-page .cropper-view-box, .fe-pages-profile-new-sections-pic-page .cropper-face {
    border-radius: 50%;
}
.fe-pages-profile-new-sections-pic-page .cropper-container {
    border-radius: var(--ds-radius-md);
}

/* Extracted from application/views/Frontend/pages/industry-expert/login.php */
body.fe-pages-industry-expert-login-page,
.fe-pages-industry-expert-login-page,
body.fe-pages-industry-expert-forgot-password-page,
.fe-pages-industry-expert-forgot-password-page,
body.fe-pages-industry-expert-reset-password-page,
.fe-pages-industry-expert-reset-password-page {
    background: #f4f6f9;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
}
.fe-pages-industry-expert-login-page .auth-page-wrapper {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
}
.fe-pages-industry-expert-login-page .auth-card {
    background: white;
    border-radius: 24px;
    padding: 3rem 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(46, 114, 145, 0.1);
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
}

.fe-pages-industry-expert-login-page h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a2e;
}
.fe-pages-industry-expert-login-page .logSubTitle {
    color: var(--ds-gray-500);
    font-size: 0.95rem;
    margin-bottom: 2rem;
    line-height: 1.5;
}
.fe-pages-industry-expert-login-page .fgrp {
    margin-bottom: 1.5rem;
}
.fe-pages-industry-expert-login-page .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--ds-gray-700);
}
.fe-pages-industry-expert-login-page .input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}
.fe-pages-industry-expert-login-page .input-with-icon .input-icon {
    position: absolute;
    left: 16px;
    color: var(--ds-gray-400);
    transition: color 0.3s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
}
.fe-pages-industry-expert-login-page .form-control {
    width: 100%;
    padding: 12px 16px;
    padding-left: 44px !important;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    color: var(--ds-gray-800);
    background-color: #fff;
    border: 1px solid var(--ds-gray-300);
    border-radius: var(--ds-radius-md);
    transition: var(--ds-transition-slow);
    box-sizing: border-box;
}
.fe-pages-industry-expert-login-page .form-control:focus {
    outline: none;
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 4px rgba(78, 177, 186, 0.1);
}
.fe-pages-industry-expert-login-page .input-with-icon .input-icon,
.fe-pages-industry-expert-login-page .input-with-icon:focus-within .input-icon {
    color: var(--ds-gray-400) !important;
}
.fe-pages-industry-expert-login-page .input-with-icon input:focus {
    border-radius: var(--ds-radius-md) !important;
    transform: none !important;
}
.fe-pages-industry-expert-login-page .input-with-icon input:-webkit-autofill,
.fe-pages-industry-expert-login-page .input-with-icon input:-webkit-autofill:hover,
.fe-pages-industry-expert-login-page .input-with-icon input:-webkit-autofill:focus,
.fe-pages-industry-expert-login-page .input-with-icon input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: var(--ds-gray-800) !important;
    caret-color: var(--ds-gray-800);
    transition: background-color 9999s ease-in-out 0s;
}
.fe-pages-industry-expert-login-page .password-toggle {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ds-gray-400);
    padding: 4px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fe-pages-industry-expert-login-page .password-toggle:hover {
    color: var(--ds-accent);
}

.fe-pages-industry-expert-login-page .btn-login {
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--ds-accent) 0%, var(--ds-primary) 100%);
    color: white;
    border: none;
    border-radius: var(--ds-radius-md);
    box-shadow: 0 4px 12px rgba(46, 114, 145, 0.3);
    transition: var(--ds-transition-smooth);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin-top: 0.5rem;
}

.fe-pages-industry-expert-login-page .btn-login:active {
    transform: translateY(0);
}

.fe-pages-industry-expert-login-page .success-msg {
    background: #dcfce7;
    color: #166534;
    padding: 12px 16px;
    border-radius: var(--ds-radius-sm);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fe-pages-industry-expert-login-page .error-msg {
    background: #fee2e2;
    color: #991b1b;
    padding: 12px 16px;
    border-radius: var(--ds-radius-sm);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fe-pages-industry-expert-login-page .btn-spinner {
    display: inline-block;
    animation: spin 0.8s linear infinite;
    margin-left: 8px;
}

@media screen and (max-width: 576px) {
.fe-pages-industry-expert-login-page .auth-page-wrapper {
    padding: 1rem;
}
.fe-pages-industry-expert-login-page .auth-card {
    padding: 2rem 1.5rem;
        border-radius: var(--ds-radius-xl);
}
}

/* Extracted from application/views/Frontend/pages/industry-expert/forgot_password.php */

.fe-pages-industry-expert-forgot-password-page .auth-page-wrapper,
.fe-pages-industry-expert-reset-password-page .auth-page-wrapper {
    min-height:100vh; background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%); display:flex; align-items:center; justify-content:center; padding:2rem; box-sizing:border-box;
}
.fe-pages-industry-expert-forgot-password-page .auth-card,
.fe-pages-industry-expert-reset-password-page .auth-card {
    background:#fff; border-radius:24px; padding:3rem 2.5rem; box-shadow:0 10px 40px rgba(0,0,0,.1); border:1px solid rgba(46,114,145,.1); width:100%; max-width:480px; box-sizing:border-box;
}
.fe-pages-industry-expert-forgot-password-page .welcome-badge,
.fe-pages-industry-expert-reset-password-page .welcome-badge {
    display:inline-flex; align-items:center; gap:6px; padding:6px 14px; background:linear-gradient(135deg,rgba(46,114,145,.1) 0%,rgba(78,177,186,.08) 100%); border-radius:50px; margin-bottom:1rem; font-size:13px; font-weight:600; color:var(--ds-accent);
}
.fe-pages-industry-expert-forgot-password-page h4,
.fe-pages-industry-expert-reset-password-page h4 {
    margin:0 0 .5rem; font-size:1.5rem; font-weight:600; color:#1a1a2e;
}
.fe-pages-industry-expert-forgot-password-page .subTitle,
.fe-pages-industry-expert-reset-password-page .subTitle {
    color:var(--ds-gray-500); font-size:.95rem; margin-bottom:2rem; line-height:1.5;
}
.fe-pages-industry-expert-forgot-password-page .fgrp {
    margin-bottom:1.5rem;
}
.fe-pages-industry-expert-forgot-password-page .form-label,
.fe-pages-industry-expert-reset-password-page .form-label {
    display:block; margin-bottom:.5rem; font-weight:500; font-size:.9rem; color:var(--ds-gray-700);
}
.fe-pages-industry-expert-forgot-password-page .form-control,
.fe-pages-industry-expert-reset-password-page .form-control {
    width:100%; padding:12px 16px; font-size:1rem; line-height:1.5; color:var(--ds-gray-800); background:#fff; border:1px solid var(--ds-gray-300); border-radius:12px; transition:all .3s ease; box-sizing:border-box;
}
.fe-pages-industry-expert-forgot-password-page .form-control:focus,
.fe-pages-industry-expert-reset-password-page .form-control:focus {
    outline:none; border-color:var(--ds-primary); box-shadow:0 0 0 4px rgba(78,177,186,.1);
}
.fe-pages-industry-expert-forgot-password-page .btn-primary,
.fe-pages-industry-expert-reset-password-page .btn-primary {
    width:100%; padding:14px 16px; font-size:1rem; font-weight:600; color:#fff; background:linear-gradient(135deg,var(--ds-accent) 0%,var(--ds-primary) 100%); border:none; border-radius:12px; cursor:pointer; transition:all .3s ease;
}
.fe-pages-industry-expert-forgot-password-page .btn-primary:hover,
.fe-pages-industry-expert-reset-password-page .btn-primary:hover {
    transform:translateY(-2px); box-shadow:0 6px 20px rgba(46,114,145,.3);
}
.fe-pages-industry-expert-forgot-password-page .btn-primary:disabled,
.fe-pages-industry-expert-reset-password-page .btn-primary:disabled {
    opacity:.6; cursor:not-allowed; transform:none !important;
}
.fe-pages-industry-expert-forgot-password-page .msg,
.fe-pages-industry-expert-reset-password-page .msg {
    padding:12px 16px; border-radius:10px; font-size:.9rem; margin-bottom:1.25rem;
}
.fe-pages-industry-expert-forgot-password-page .msg.success,
.fe-pages-industry-expert-reset-password-page .msg.success {
    background:#d1fae5; color:#065f46; border:1px solid #6ee7b7;
}
.fe-pages-industry-expert-forgot-password-page .msg.error,
.fe-pages-industry-expert-reset-password-page .msg.error {
    background:#fee2e2; color:#991b1b; border:1px solid #fca5a5;
}
.fe-pages-industry-expert-forgot-password-page .back-link,
.fe-pages-industry-expert-reset-password-page .back-link {
    display:block; text-align:center; margin-top:1.25rem; color:var(--ds-accent); text-decoration:none; font-size:.9rem; font-weight:500;
}

/* Extracted from application/views/Frontend/pages/industry-expert/reset_password.php */

.fe-pages-industry-expert-reset-password-page .fgrp {
    margin-bottom:1.5rem;
}

.fe-pages-industry-expert-reset-password-page .invalid-card {
    text-align:center;
}
.fe-pages-industry-expert-reset-password-page .invalid-card .icon {
    font-size:2.5rem; color:#dc2626; margin-bottom:.5rem;
}

/* Extracted from application/views/Frontend/portfolio/competencies.php */
.fe-portfolio-competencies-page .catSpan {
    font-size:16px;
}

/* Extracted from application/views/Frontend/portfolio/wcfrmFields.php */
.fe-portfolio-wcfrmfields-page .tag {
    display: inline-block;
	background-color: #dcdcdc;
	margin: 5px;
	padding: 5px 15px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 600;
}
.fe-portfolio-wcfrmfields-page .tag .remove-tag {
    margin-left: 10px;
	color: red;
	cursor: pointer;
	font-weight: bold;
}
.fe-portfolio-wcfrmfields-page .tag-input,
.fe-portfolio-manage-page .tag-input {
    display: inline-block;
	padding: 5px;
	margin-top: 5px;
	border: 1px solid lightgray;
	border-radius: 5px;
	width: 300px;
}

/* Extracted from application/views/Frontend/portfolio/experience.php */
.fe-portfolio-experience-page .groupBtn {
    background: transparent !important;
}

/* details.php styles are PHP-conditional/dynamic — restored inline in the view */

/* Extracted from application/views/Frontend/portfolio/feedback_details.php
   (page-local font import, universal transition and body styles restored
   inline in the view — they must not apply globally) */

.fe-portfolio-feedback-details-page .course-info-header {
    background: white !important;
        padding: 20px 24px;
        border-bottom: 2px solid #e9ecef;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
}
.fe-portfolio-feedback-details-page .course-info-header h4 {
    font-size: 18px;
        font-weight: 600;
        color: var(--ds-text-primary);
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
}
.fe-portfolio-feedback-details-page .course-info-header p {
    margin: 8px 0;
        font-size: 15px;
        color: #475569;
}
.fe-portfolio-feedback-details-page .course-info-header label {
    font-weight: 600;
        color: var(--ds-text-primary);
}
.fe-portfolio-feedback-details-page .progress {
    position: relative;
        border-radius: 35px;
        height: 20px;
        background-color: var(--ds-gray-200);
        overflow: hidden;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.fe-portfolio-feedback-details-page .progress-bar {
    height: 100%;
        border-radius: 35px;
        transition: width 0.6s ease;
        background: linear-gradient(90deg, currentColor 0%, currentColor 100%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.fe-portfolio-feedback-details-page .progress-value {
    position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ds-text-primary);
        font-weight: 600;
        font-size: 13px;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
.fe-portfolio-feedback-details-page .catTitleOwn {
    font-size: 17px;
        font-weight: 600;
        color: var(--ds-text-primary);
        margin-bottom: 10px;
}
.fe-portfolio-feedback-details-page .catSum {
    font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #64748b;
        margin-bottom: 20px;
}
.fe-portfolio-feedback-details-page .score-display {
    text-align: center;
}
.fe-portfolio-feedback-details-page .score-large {
    font-size: 72px;
        font-weight: 700;
        background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
        margin-bottom: 10px;
}
.fe-portfolio-feedback-details-page .score-info {
    font-size: 16px;
        color: #64748b;
        line-height: 1.6;
}
.fe-portfolio-feedback-details-page .knob-container {
    display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
}
.fe-portfolio-feedback-details-page .section-heading {
    font-size: 20px;
        font-weight: 600;
        color: var(--ds-text-primary);
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 2px solid var(--ds-gray-200);
        position: relative;
}

.fe-portfolio-feedback-details-page .facultyReportDesc {
    padding: 24px;
        font-size: 16px;
        line-height: 1.8;
        color: var(--ds-gray-700);
}
.fe-portfolio-feedback-details-page .facultyReportDesc h4 {
    font-size: 18px;
        font-weight: 600;
        color: var(--ds-text-primary);
        margin-bottom: 16px;
}
.fe-portfolio-feedback-details-page .facultyReportDesc p {
    margin-bottom: 16px;
        color: #475569;
}
.fe-portfolio-feedback-details-page .aifbkReport {
    background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 100%);
        padding: 24px;
        border-radius: var(--ds-radius-md);
        border-left: 4px solid var(--ds-primary);
        margin-bottom: 24px;
}
.fe-portfolio-feedback-details-page .aifbkHead {
    font-size: 20px;
        font-weight: 600;
        color: var(--ds-text-primary);
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
}
.fe-portfolio-feedback-details-page .aifbkHead::before {
    content: '';
        width: 4px;
        height: 24px;
        background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
        border-radius: 2px;
}
@media (max-width: 768px) {
.fe-portfolio-feedback-details-page .score-large {
    font-size: 56px;
}
.fe-portfolio-feedback-details-page .knob-container {
    padding: 10px;
}
.fe-portfolio-feedback-details-page .course-info-header {
    padding: 16px 20px;
}
.fe-portfolio-feedback-details-page .facultyReportDesc {
    padding: 20px;
            font-size: 15px;
}
}
.fe-portfolio-feedback-details-page .section-title {
    font-weight: 700;
}
.fe-portfolio-feedback-details-page .section-box {
    margin-bottom: 20px;
}
.fe-portfolio-feedback-details-page ol {
    list-style: disc;
		margin-left: 20px;
}

/* Extracted from application/views/Frontend/portfolio/network_sharing_result.php */
    
    * {
transition: var(--ds-transition);
}
body.fe-portfolio-network-sharing-result-page, .fe-portfolio-network-sharing-result-page {
    font-family: 'Inter', sans-serif;
        background: var(--ds-bg-light);
        color: var(--ds-text-primary);
}
.fe-portfolio-network-sharing-result-page .card {
    background: #ffffff;
        border-radius: var(--ds-radius-lg);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        border: 1px solid #e2e8f0;
        transition: var(--ds-transition);
}
.fe-portfolio-network-sharing-result-page .card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.fe-portfolio-network-sharing-result-page .data-table {
    width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background: #ffffff;
        border-radius: var(--ds-radius-md);
        overflow: hidden;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}
.fe-portfolio-network-sharing-result-page .data-table thead {
    background: linear-gradient(135deg, var(--ds-bg-light) 0%, #f1f5f9 100%);
        border-bottom: 2px solid #e2e8f0;
}
.fe-portfolio-network-sharing-result-page .data-table thead th {
    padding: 16px 20px;
        text-align: left;
        font-weight: 700;
        font-size: 11px;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        border-bottom: none;
        position: relative;
}
.fe-portfolio-network-sharing-result-page .data-table thead th:first-child {
    padding-left: 24px;
}
.fe-portfolio-network-sharing-result-page .data-table thead th:last-child {
    padding-right: 24px;
}
.fe-portfolio-network-sharing-result-page .data-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
        transition: var(--ds-transition);
        background: #ffffff;
}
.fe-portfolio-network-sharing-result-page .data-table tbody tr:last-child {
    border-bottom: none;
}
.fe-portfolio-network-sharing-result-page .data-table tbody tr:hover {
    background: linear-gradient(90deg, var(--ds-bg-light) 0%, #ffffff 50%, var(--ds-bg-light) 100%);
        transform: translateX(2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.fe-portfolio-network-sharing-result-page .data-table tbody tr:nth-child(even) {
    background: #fafbfc;
}
.fe-portfolio-network-sharing-result-page .data-table tbody tr:nth-child(even):hover {
    background: linear-gradient(90deg, #f1f5f9 0%, #fafbfc 50%, #f1f5f9 100%);
}
.fe-portfolio-network-sharing-result-page .data-table tbody tr {
    animation: fadeInRow 0.3s ease-out;
}
@keyframes fadeInRow {
from {
            opacity: 0;
            transform: translateY(-5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
}
.fe-portfolio-network-sharing-result-page .data-table tbody td {
    padding: 18px 20px;
        font-size: 14px;
        color: var(--ds-text-primary);
        vertical-align: middle;
        font-weight: 500;
}
.fe-portfolio-network-sharing-result-page .data-table tbody td:first-child {
    padding-left: 24px;
}
.fe-portfolio-network-sharing-result-page .data-table tbody td:last-child {
    padding-right: 24px;
}
.fe-portfolio-network-sharing-result-page .network-badge {
    display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 14px;
        flex-shrink: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
        transition: var(--ds-transition);
}
.fe-portfolio-network-sharing-result-page .network-badge.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        color: #ffffff;
}
.fe-portfolio-network-sharing-result-page .network-badge.active:hover {
    transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}
.fe-portfolio-network-sharing-result-page .network-badge.inactive {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        color: #94a3b8;
}
.fe-portfolio-network-sharing-result-page .count-badge {
    display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 14px;
        border-radius: var(--ds-radius-xl);
        font-weight: 700;
        font-size: 14px;
        min-width: 56px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: var(--ds-transition);
}
.fe-portfolio-network-sharing-result-page .count-badge.active {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        color: #1e40af;
        border: 1px solid #93c5fd;
}
.fe-portfolio-network-sharing-result-page .count-badge.active:hover {
    transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
}
.fe-portfolio-network-sharing-result-page .count-badge.inactive {
    background: linear-gradient(135deg, var(--ds-bg-light) 0%, #f1f5f9 100%);
        color: #94a3b8;
        border: 1px solid #e2e8f0;
}
.fe-portfolio-network-sharing-result-page .progress-wrapper {
    display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
}
.fe-portfolio-network-sharing-result-page .progress-bar {
    flex: 1;
        height: 8px;
        background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 100%);
        border-radius: 10px;
        overflow: hidden;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
        position: relative;
}
.fe-portfolio-network-sharing-result-page .progress-fill {
    height: 100%;
        background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
        border-radius: 10px;
        transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 3px rgba(59, 130, 246, 0.4);
        position: relative;
}
.fe-portfolio-network-sharing-result-page .progress-fill::after {
    content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        border-radius: 10px;
}
.fe-portfolio-network-sharing-result-page .progress-fill.inactive {
    background: linear-gradient(90deg, #cbd5e1 0%, #94a3b8 100%);
        box-shadow: none;
}
.fe-portfolio-network-sharing-result-page .progress-value {
    font-weight: 700;
        font-size: 15px;
        color: var(--ds-text-primary);
        min-width: 50px;
        text-align: right;
        letter-spacing: -0.02em;
}
.fe-portfolio-network-sharing-result-page .progress-value.inactive {
    color: #94a3b8;
        font-weight: 600;
}
.fe-portfolio-network-sharing-result-page .chart-wrapper {
    background: #ffffff;
        border-radius: var(--ds-radius-lg);
        padding: 24px;
        border: 1px solid #e2e8f0;
        height: 100%;
        display: flex;
        flex-direction: column;
        min-height: 400px;
}
.fe-portfolio-network-sharing-result-page .chart-wrapper canvas {
    max-height: 380px !important;
}
.fe-portfolio-network-sharing-result-page .section-header {
    display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #e2e8f0;
}
.fe-portfolio-network-sharing-result-page .section-title {
    font-size: 18px;
        font-weight: 600;
        color: #0f172a;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
}
.fe-portfolio-network-sharing-result-page .section-title-icon {
    width: 20px;
        height: 20px;
        color: #64748b;
}
.fe-portfolio-network-sharing-result-page .stat-value {
    font-size: 16px;
        font-weight: 600;
        color: #0f172a;
        padding: 6px 16px;
        background: var(--ds-bg-light);
        border-radius: var(--ds-radius-md);
        border: 1px solid #e2e8f0;
}
.fe-portfolio-network-sharing-result-page .page-header {
    margin-bottom: 32px;
}
.fe-portfolio-network-sharing-result-page .page-title {
    font-size: 30px;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 8px 0;
        letter-spacing: -0.02em;
}
.fe-portfolio-network-sharing-result-page .page-subtitle {
    font-size: 15px;
        color: #64748b;
        margin: 0;
        line-height: 1.6;
}
.fe-portfolio-network-sharing-result-page .empty-state {
    text-align: center;
        padding: 64px 24px;
}
.fe-portfolio-network-sharing-result-page .empty-state-icon {
    width: 64px;
        height: 64px;
        margin: 0 auto 16px;
        color: #cbd5e1;
}
.fe-portfolio-network-sharing-result-page .empty-state-title {
    font-size: 18px;
        font-weight: 600;
        color: #334155;
        margin: 0 0 8px 0;
}
.fe-portfolio-network-sharing-result-page .empty-state-text {
    font-size: 14px;
        color: #64748b;
        margin: 0;
}
@media (max-width: 1024px) {
.fe-portfolio-network-sharing-result-page .chart-wrapper {
    margin-top: 24px;
            min-height: 350px;
}
.fe-portfolio-network-sharing-result-page .chart-wrapper canvas {
    max-height: 320px !important;
}
}
@media (max-width: 768px) {
.fe-portfolio-network-sharing-result-page .page-title {
    font-size: 24px;
}
.fe-portfolio-network-sharing-result-page .data-table {
    font-size: 13px;
}
.fe-portfolio-network-sharing-result-page .data-table thead th, .fe-portfolio-network-sharing-result-page .data-table tbody td {
    padding: 12px;
}
.fe-portfolio-network-sharing-result-page .data-table thead th:first-child, .fe-portfolio-network-sharing-result-page .data-table tbody td:first-child {
    padding-left: 16px;
}
.fe-portfolio-network-sharing-result-page .data-table thead th:last-child, .fe-portfolio-network-sharing-result-page .data-table tbody td:last-child {
    padding-right: 16px;
}
.fe-portfolio-network-sharing-result-page .section-header {
    flex-direction: column;
            align-items: flex-start;
            gap: 12px;
}
.fe-portfolio-network-sharing-result-page .chart-wrapper {
    padding: 20px;
            min-height: 300px;
}
.fe-portfolio-network-sharing-result-page .chart-wrapper canvas {
    max-height: 280px !important;
}
}

/* share-rate.php .rateFixedBtn is PHP-dynamic — restored inline in the view */

/* Extracted from application/views/Frontend/portfolio/community-engagement.php */
.fe-portfolio-community-engagement-page .groupBtn {
    background: transparent !important;
}

/* Extracted from application/views/Frontend/portfolio/professional-interests.php */
.fe-portfolio-professional-interests-page .groupBtn {
    background: transparent !important;
}

/* Extracted from application/views/Frontend/portfolio/manage.php
   (page-local font import, universal transition and body styles restored
   inline in the view — they must not apply globally) */

.fe-portfolio-manage-page .groupBtn {
    background: transparent !important;
	box-shadow: none !important;
}
.fe-portfolio-manage-page .education-modal .modal-header {
    background: linear-gradient(135deg, rgb(58, 155, 165), rgb(26, 63, 102)) !important;
}
.fe-portfolio-manage-page .tab-content .modal-header h5 {
    color: #fff !important;
}
.fe-portfolio-manage-page #captureTemplate * {
    box-shadow: none !important;  text-shadow: none !important;
}
.fe-portfolio-manage-page .tag {
    display: inline-block;background-color: #ddd;margin: 5px;padding: 5px 15px;border-radius: 5px;font-size: 16px;font-weight: 600;
}
.fe-portfolio-manage-page .tag .remove-tag {
    margin-left: 5px;cursor: pointer;font-weight: 600;
}

.fe-portfolio-manage-page .community-engagement-modal .modal-header {
    color: #fff !important;
	background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary)) !important;
}
.fe-portfolio-manage-page .portfolio-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
}
@media (min-width: 768px) {
.fe-portfolio-manage-page .portfolio-container {
    padding: 2rem;
}
}
.fe-portfolio-manage-page .page-header {
    margin-bottom: 1.5rem;
}
.fe-portfolio-manage-page .page-header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ds-gray-800);
    margin-bottom: 0.25rem;
}
.fe-portfolio-manage-page .page-header p {
    font-size: 0.875rem;
    color: var(--ds-gray-500);
}
.fe-portfolio-manage-page .nav-tabs {
    border-bottom: 2px solid var(--ds-gray-200);
    margin-bottom: 0;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    padding: 0.75rem 1rem 0 1rem;
    box-shadow: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.fe-portfolio-manage-page .nav-tabs .nav-item {
    margin-bottom: 0;
    flex-shrink:  0;
}
.fe-portfolio-manage-page .tab-content-wrapper {
    margin-top: 0;
}
.fe-portfolio-manage-page .tab-content {
    background: #ffffff;
    border-radius: 0 0 16px 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    min-height: 400px;
}
.fe-portfolio-manage-page .tab-pane {
    animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fe-portfolio-manage-page .tab-content h3, .fe-portfolio-manage-page .tab-content h4, .fe-portfolio-manage-page .tab-content h5, .fe-portfolio-manage-page .tab-content .profileTitle {
    color: var(--ds-text-primary);
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.4;
    font-size: 1.25rem;
}
.fe-portfolio-manage-page .tab-content h3 {
    font-size: 1.5rem;
    border-bottom: 2px solid var(--ds-gray-200);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.fe-portfolio-manage-page .tab-content p {
    color: #475569;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}
.fe-portfolio-manage-page .tab-content .d-flex {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ds-gray-200);
}
.fe-portfolio-manage-page .tab-content .form-control, .fe-portfolio-manage-page .tab-content input, .fe-portfolio-manage-page .tab-content select, .fe-portfolio-manage-page .tab-content textarea {
    border-radius: var(--ds-radius-md);
    border: 2px solid var(--ds-gray-200);
    padding: 0.75rem 1rem;
    transition: var(--ds-transition-smooth);
    font-size: 0.9375rem;
    color: var(--ds-text-primary);
}
.fe-portfolio-manage-page .tab-content .form-control:focus, .fe-portfolio-manage-page .tab-content input:focus, .fe-portfolio-manage-page .tab-content select:focus, .fe-portfolio-manage-page .tab-content textarea:focus {
    outline: none;
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 4px rgba(78, 177, 186, 0.15), 0 4px 12px rgba(78, 177, 186, 0.2);
    transform: translateY(-1px);
}

.fe-portfolio-manage-page .tab-content label {
    color: var(--ds-gray-700);
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.875rem;
}
.fe-portfolio-manage-page .tab-content .btn {
    border-radius: var(--ds-radius-md);
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    transition: var(--ds-transition-smooth);
    font-size: 0.9375rem;
    letter-spacing: 0.3px;
}
.fe-portfolio-manage-page .tab-content .empty-state {
    text-align: center;
    padding: 64px 32px;
    color: #94a3b8;
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--ds-gray-200);
}
.fe-portfolio-manage-page .tab-content .empty-state-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
    color: #cbd5e1;
}
.fe-portfolio-manage-page .tab-content .empty-state-text {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
}
.fe-portfolio-manage-page .tab-content .btn-primary {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    border: none;
    color: white;
    box-shadow: 0 4px 14px rgba(78, 177, 186, 0.4);
}
.fe-portfolio-manage-page .tab-content .btn-primary:hover {
    background: linear-gradient(135deg, #3A9BA5, #1A3F66);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(78, 177, 186, 0.5);
}
.fe-portfolio-manage-page .tab-content .btn-outline-primary,
.fe-portfolio-manage-page .tab-content .modal-footer .btn-outline-primary,
.fe-portfolio-manage-page .modal-footer .btn-outline-primary {
    border: 2px solid var(--ds-primary);
    color: var(--ds-primary);
    background: transparent;
}

.fe-portfolio-manage-page .tab-content .btn-secondary {
    background: #f1f5f9;
    color: #475569;
    border: 2px solid #e2e8f0;
}
.fe-portfolio-manage-page .tab-content .btn-secondary:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
    transform: translateY(-2px);
}
.fe-portfolio-manage-page .tab-content .card, .fe-portfolio-manage-page .tab-content .box {
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-gray-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: var(--ds-transition-smooth);
    background: #ffffff;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.fe-portfolio-manage-page .tab-content .box.no-border {
    border: none;
    box-shadow: none;
    padding: 0;
}

.fe-portfolio-manage-page .tab-content .table {
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}
.fe-portfolio-manage-page .tab-content .table thead {
    background: linear-gradient(135deg, var(--ds-bg-light), #f1f5f9);
}
.fe-portfolio-manage-page .tab-content .table thead th {
    color: var(--ds-text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem;
    border-bottom: 2px solid var(--ds-gray-200);
}
.fe-portfolio-manage-page .tab-content .table tbody td {
    padding: 1rem;
    color: #475569;
    font-size: 0.9375rem;
    border-bottom: 1px solid #f1f5f9;
}
.fe-portfolio-manage-page .tab-content .table tbody tr:hover {
    background: var(--ds-bg-light);
}
.fe-portfolio-manage-page .tab-content .alert {
    border-radius: var(--ds-radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: none;
    font-size: 0.9375rem;
}

.fe-portfolio-manage-page .tab-content .badge {
    padding: 0.5rem 0.75rem;
    border-radius: var(--ds-radius-sm);
    font-weight: 500;
    font-size: 0.8125rem;
}
.fe-portfolio-manage-page .tab-content .edtiIcon {
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}
.fe-portfolio-manage-page .tab-content .fa-info-circle {
    color: var(--ds-primary);
    cursor: help;
    margin-left: 0.5rem;
}
.fe-portfolio-manage-page .tab-content .fa-info-circle:hover {
    color: var(--ds-secondary);
}
.fe-portfolio-manage-page .tab-content > div {
    margin-bottom: 1.5rem;
}
.fe-portfolio-manage-page .tab-content .row {
    margin-bottom: 1.5rem;
}
.fe-portfolio-manage-page .tab-content .col-md-12, .fe-portfolio-manage-page .tab-content .col-md-6, .fe-portfolio-manage-page .tab-content .col-md-4, .fe-portfolio-manage-page .tab-content .col-md-3 {
    margin-bottom: 1rem;
}
.fe-portfolio-manage-page .tab-content .modal-content {
    border-radius: var(--ds-radius-lg);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.fe-portfolio-manage-page .tab-content .modal-header {
    border-bottom: 2px solid var(--ds-gray-200);
    padding: 1.5rem;
    border-radius: 16px 16px 0 0;
}
.fe-portfolio-manage-page .tab-content .modal-header h5 {
    color: var(--ds-secondary);
    font-weight: 600;
    font-size: 1.25rem;
}
.fe-portfolio-manage-page .tab-content .modal-body {
    padding: 1.5rem;
}
.fe-portfolio-manage-page .tab-content .modal-footer {
    border-top: 2px solid var(--ds-gray-200);
    padding: 1.5rem;
    background: var(--ds-bg-light);
    border-radius: 0 0 16px 16px;
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group, .fe-portfolio-manage-page .modal-body .form-group {
    margin-bottom: 1.5rem;
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group:last-child, .fe-portfolio-manage-page .modal-body .form-group:last-child {
    margin-bottom: 0;
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group label.clbl, .fe-portfolio-manage-page .modal-body .form-group label.clbl {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ds-secondary);
    margin-bottom: 0.625rem;
    line-height: 1.5;
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group .form-control, .fe-portfolio-manage-page .modal-body .form-group .form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ds-gray-700);
    background-color: #ffffff;
    border: 2px solid var(--ds-gray-200);
    border-radius: 10px;
    transition: var(--ds-transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group .form-control:focus, .fe-portfolio-manage-page .modal-body .form-group .form-control:focus {
    border-color: var(--ds-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(78, 177, 186, 0.1);
    background-color: #ffffff;
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group .form-control:hover:not(:focus), .fe-portfolio-manage-page .modal-body .form-group .form-control:hover:not(:focus) {
    border-color: var(--ds-gray-300);
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group select.form-control, .fe-portfolio-manage-page .modal-body .form-group select.form-control {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    appearance: none;
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group textarea.form-control, .fe-portfolio-manage-page .modal-body .form-group textarea.form-control {
    min-height: 120px;
    resize: vertical;
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group input[type="file"], .fe-portfolio-manage-page .modal-body .form-group input[type="file"] {
    padding: 0.625rem;
    border: 2px dashed var(--ds-gray-300);
    border-radius: 10px;
    background-color: var(--ds-gray-50);
    transition: var(--ds-transition);
    cursor: pointer;
    width: 100%;
    font-size: 0.875rem;
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group input[type="file"]:hover, .fe-portfolio-manage-page .modal-body .form-group input[type="file"]:hover {
    border-color: var(--ds-primary);
    background-color: #f0f9fa;
}

.fe-portfolio-manage-page .tab-content .modal-body .form-group input[type="checkbox"], .fe-portfolio-manage-page .tab-content .modal-body .form-group input[type="radio"], .fe-portfolio-manage-page .modal-body .form-group input[type="checkbox"], .fe-portfolio-manage-page .modal-body .form-group input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    cursor: pointer;
    accent-color: var(--ds-primary);
    flex-shrink: 0;
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group label:has(input[type="checkbox"]), .fe-portfolio-manage-page .tab-content .modal-body .form-group label:has(input[type="radio"]), .fe-portfolio-manage-page .modal-body .form-group label:has(input[type="checkbox"]), .fe-portfolio-manage-page .modal-body .form-group label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: var(--ds-gray-700);
    cursor: pointer;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group label:has(input[type="checkbox"]):hover, .fe-portfolio-manage-page .tab-content .modal-body .form-group label:has(input[type="radio"]):hover, .fe-portfolio-manage-page .modal-body .form-group label:has(input[type="checkbox"]):hover, .fe-portfolio-manage-page .modal-body .form-group label:has(input[type="radio"]):hover {
    color: var(--ds-secondary);
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group .row, .fe-portfolio-manage-page .modal-body .form-group .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group .row > [class*="col-"], .fe-portfolio-manage-page .modal-body .form-group .row > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-bottom: 0.75rem;
}
.fe-portfolio-manage-page .tab-content .modal-body .tInst, .fe-portfolio-manage-page .modal-body .tInst {
    font-size: 0.875rem;
    color: var(--ds-gray-500);
    line-height: 1.6;
    padding: 0.875rem 1rem;
    background: var(--ds-bg-light);
    border-left: 3px solid var(--ds-primary);
    border-radius: 6px;
    margin-bottom: 1rem;
}
.fe-portfolio-manage-page .profileImg {
    max-height: 200px;
}
.fe-portfolio-manage-page .tab-content .modal-body .profileImg, .fe-portfolio-manage-page .modal-body .profileImg {
    max-width: 100%;
    height: auto;
    border-radius: var(--ds-radius-md);
    border: 2px solid var(--ds-gray-200);
    padding: 0.5rem;
    background: #ffffff;
    margin-top: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group1, .fe-portfolio-manage-page .modal-body .form-group1 {
    margin-bottom: 1.5rem;
    text-align: center;
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group.has-error .form-control, .fe-portfolio-manage-page .modal-body .form-group.has-error .form-control {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group.has-error label, .fe-portfolio-manage-page .modal-body .form-group.has-error label {
    color: #ef4444;
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group.has-success .form-control, .fe-portfolio-manage-page .modal-body .form-group.has-success .form-control {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.fe-portfolio-manage-page .tab-content .modal-body .alert, .fe-portfolio-manage-page .modal-body .alert {
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: none;
    font-size: 0.9375rem;
}
.fe-portfolio-manage-page .tab-content .modal-body .alert-danger, .fe-portfolio-manage-page .modal-body .alert-danger {
    background-color: #fef2f2;
    color: #991b1b;
    border-left: 4px solid #ef4444;
}
.fe-portfolio-manage-page .tab-content .modal-body .alert-success, .fe-portfolio-manage-page .modal-body .alert-success {
    background-color: #f0fdf4;
    color: #166534;
    border-left: 4px solid #10b981;
}
.fe-portfolio-manage-page .tab-content .modal-footer .btn, .fe-portfolio-manage-page .modal-footer .btn {
    padding: 0.625rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 10px;
    transition: var(--ds-transition);
    min-width: 100px;
}

.fe-portfolio-manage-page .tab-content .modal-footer .btn-outline-primary:hover, .fe-portfolio-manage-page .modal-footer .btn-outline-primary:hover {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    border-color: var(--ds-primary);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.3);
}
.fe-portfolio-manage-page .tab-content .modal-footer .btn-outline-primary:active, .fe-portfolio-manage-page .modal-footer .btn-outline-primary:active {
    transform: translateY(0);
}
@media (max-width: 768px) {
.fe-portfolio-manage-page .tab-content .modal-body, .fe-portfolio-manage-page .modal-body {
    padding: 1.25rem;
}
.fe-portfolio-manage-page .tab-content .modal-header, .fe-portfolio-manage-page .modal-header {
    padding: 1.25rem;
}
.fe-portfolio-manage-page .tab-content .modal-footer, .fe-portfolio-manage-page .modal-footer {
    padding: 1.25rem;
        flex-direction: column;
        gap: 0.75rem;
}
.fe-portfolio-manage-page .tab-content .modal-footer .btn, .fe-portfolio-manage-page .modal-footer .btn {
    width: 100%;
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group, .fe-portfolio-manage-page .modal-body .form-group {
    margin-bottom: 1.25rem;
}
.fe-portfolio-manage-page .tab-content .modal-body .form-group .row > [class*="col-"], .fe-portfolio-manage-page .modal-body .form-group .row > [class*="col-"] {
    margin-bottom: 0.625rem;
}
}
.fe-portfolio-manage-page .tab-content .smIcon, .fe-portfolio-manage-page .tab-content a .smIcon, .fe-portfolio-manage-page #socialMedia .smIcon, .fe-portfolio-manage-page .box .smIcon {
    font-size: 3rem !important;
    color: var(--ds-primary) !important;
    margin: 0.75rem 1rem !important;
    padding: 1rem !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important;
    height: 80px !important;
    cursor: pointer !important;
}
.fe-portfolio-manage-page .tab-content .smIcon:hover, .fe-portfolio-manage-page .tab-content a:hover .smIcon, .fe-portfolio-manage-page #socialMedia .smIcon:hover, .fe-portfolio-manage-page .box .smIcon:hover {
    color: white !important;
}
.fe-portfolio-manage-page .tab-content .col-12 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 1.5rem 0 !important;
}
.fe-portfolio-manage-page .portfolioBox {
    position: relative;
    overflow: hidden;
    border-radius: var(--ds-radius-md);
}
.fe-portfolio-manage-page .portfolioBox:hover .twoBtn, .fe-portfolio-manage-page #portfolioSec .portfolioBox:hover .twoBtn {
    transform: rotateX(0deg) !important;
    opacity: 1 !important;
}
.fe-portfolio-manage-page #portfolioSec .twoBtn, .fe-portfolio-manage-page .portfolioBox .twoBtn {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 0 !important;
    transform: rotateX(90deg) !important;
    transition: var(--ds-transition-smooth) !important;
    flex-direction: row !important;
    height: 100% !important;
    gap: 0.75rem !important;
    z-index: 10 !important;
    opacity: 0 !important;
}
.fe-portfolio-manage-page #portfolioSec .twoBtn::after, .fe-portfolio-manage-page .portfolioBox .twoBtn::after {
    top: 0 !important;
    z-index: -1 !important;
    position: absolute !important;
    content: '' !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    transition: 0.3s ease !important;
    border-radius: 12px !important;
}
.fe-portfolio-manage-page #portfolioSec .groupBtn, .fe-portfolio-manage-page .portfolioBox .groupBtn {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 11 !important;
    position: relative !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.fe-portfolio-manage-page #portfolioSec .eyeBtn, .fe-portfolio-manage-page #portfolioSec .editBtn, .fe-portfolio-manage-page #portfolioSec .deleteBtn, .fe-portfolio-manage-page .portfolioBox .eyeBtn, .fe-portfolio-manage-page .portfolioBox .editBtn, .fe-portfolio-manage-page .portfolioBox .deleteBtn {
    min-width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    transition: var(--ds-transition-smooth) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    text-decoration: none !important;
    padding: 0.75rem !important;
}
.fe-portfolio-manage-page #portfolioSec .eyeBtn, .fe-portfolio-manage-page .portfolioBox .eyeBtn {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary)) !important;
    color: white !important;
}
.fe-portfolio-manage-page #portfolioSec .eyeBtn:hover, .fe-portfolio-manage-page .portfolioBox .eyeBtn:hover {
    background: linear-gradient(135deg, #3A9BA5, #1A3F66) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(78, 177, 186, 0.4) !important;
    color: white !important;
}
.fe-portfolio-manage-page #portfolioSec .editBtn, .fe-portfolio-manage-page .portfolioBox .editBtn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}
.fe-portfolio-manage-page #portfolioSec .editBtn:hover, .fe-portfolio-manage-page .portfolioBox .editBtn:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
    color: white !important;
}
.fe-portfolio-manage-page #portfolioSec .deleteBtn, .fe-portfolio-manage-page .portfolioBox .deleteBtn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
}
.fe-portfolio-manage-page #portfolioSec .deleteBtn:hover, .fe-portfolio-manage-page .portfolioBox .deleteBtn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4) !important;
    color: white !important;
}
.fe-portfolio-manage-page #portfolioSec .eyeBtn i, .fe-portfolio-manage-page #portfolioSec .editBtn i, .fe-portfolio-manage-page #portfolioSec .deleteBtn i, .fe-portfolio-manage-page .portfolioBox .eyeBtn i, .fe-portfolio-manage-page .portfolioBox .editBtn i, .fe-portfolio-manage-page .portfolioBox .deleteBtn i {
    font-size: 1.25rem !important;
    color: white !important;
}
.fe-portfolio-manage-page #portfolioSec .eyeBtn span, .fe-portfolio-manage-page #portfolioSec .editBtn span, .fe-portfolio-manage-page #portfolioSec .deleteBtn span, .fe-portfolio-manage-page .portfolioBox .eyeBtn span, .fe-portfolio-manage-page .portfolioBox .editBtn span, .fe-portfolio-manage-page .portfolioBox .deleteBtn span {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: white !important;
}
.fe-portfolio-manage-page #myBioSec .bioSec .userProfile, .fe-portfolio-manage-page .tab-content .bioSec .userProfile {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 3px solid var(--ds-gray-200) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transition: var(--ds-transition-slow) !important;
    background: #ffffff !important;
    padding: 0.5rem !important;
    position: relative !important;
}
.fe-portfolio-manage-page #myBioSec .bioSec .userProfile:hover, .fe-portfolio-manage-page .tab-content .bioSec .userProfile:hover {
    border-color: var(--ds-primary) !important;
    box-shadow: 0 8px 20px rgba(78, 177, 186, 0.3) !important;
    transform: translateY(-2px) !important;
}
.fe-portfolio-manage-page #myBioSec .bioSec .userProfile img.profileImg, .fe-portfolio-manage-page .tab-content .bioSec .userProfile img.profileImg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 8px !important;
    display: block !important;
}
.fe-portfolio-manage-page #myBioSec .bioSec .col-md-3 .userProfile, .fe-portfolio-manage-page #myBioSec .bioSec .col-6 .userProfile, .fe-portfolio-manage-page .tab-content .bioSec .col-md-3 .userProfile, .fe-portfolio-manage-page .tab-content .bioSec .col-6 .userProfile {
    aspect-ratio: 1 !important;
    height: auto !important;
    min-height: 200px !important;
}
.fe-portfolio-manage-page #myBioSec .bioSec .col-md-4 .userProfile, .fe-portfolio-manage-page .tab-content .bioSec .col-md-4 .userProfile {
    aspect-ratio: 1 !important;
    height: auto !important;
    min-height: 250px !important;
}
.fe-portfolio-manage-page #templateSec .d-flex {
    margin-bottom: 1.5rem;
}
.fe-portfolio-manage-page .previewTemplateBtn-2 {
    gap: 0.5rem;
}
.fe-portfolio-manage-page .editTemplateBtn {
    padding: 0.75rem 1.5rem !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
    font-size: 0.9375rem !important;
    transition: var(--ds-transition-smooth) !important;
    border: 2px solid transparent !important;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary)) !important;
    color: #fff !important;
    min-width: 160px;
    margin-top: 0 !important;
    right: auto;
    box-shadow: none;
}
.fe-portfolio-manage-page .editTemplateBtn:hover {
    background: linear-gradient(135deg, var(--ds-secondary), var(--ds-primary)) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(78, 177, 186, 0.3);
}
.fe-portfolio-manage-page #templateSec .box.no-border {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--ds-bg-light);
    border-radius: var(--ds-radius-md);
}
.fe-portfolio-manage-page #captureTemplate {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: var(--ds-radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}
.fe-portfolio-manage-page #templateSec .profileTitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ds-text-primary);
    margin-bottom: 0.5rem;
}
.fe-portfolio-manage-page #templateSec .text-muted {
    color: var(--ds-gray-500);
    font-size: 0.875rem;
    line-height: 1.5;
}
.fe-portfolio-manage-page #captureTemplate .userName, .fe-portfolio-manage-page .portfolioTemplate .userName {
    display: none !important;
}
.fe-portfolio-manage-page #captureTemplate .mobile-menu-close, .fe-portfolio-manage-page .portfolioTemplate .mobile-menu-close {
    display: none !important;
}
.fe-portfolio-manage-page #captureTemplate .mobile-menu-head, .fe-portfolio-manage-page .portfolioTemplate .mobile-menu-head {
    display: none !important;
}
.fe-portfolio-manage-page #captureTemplate .menu-main, .fe-portfolio-manage-page #captureTemplate .menu ul, .fe-portfolio-manage-page .portfolioTemplate .menu-main, .fe-portfolio-manage-page .portfolioTemplate .menu ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
}
.fe-portfolio-manage-page #captureTemplate .menu-main li,
.fe-portfolio-manage-page #captureTemplate .menu ul li,
.fe-portfolio-manage-page .portfolioTemplate .menu-main li,
.fe-portfolio-manage-page .portfolioTemplate .menu ul li,
.fe-portfolio-manage-page #captureTemplate .dropdown-menu li,
.fe-portfolio-manage-page .portfolioTemplate .dropdown-menu li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.fe-portfolio-manage-page #captureTemplate .menu-main li a, .fe-portfolio-manage-page #captureTemplate .menu ul li a, .fe-portfolio-manage-page .portfolioTemplate .menu-main li a, .fe-portfolio-manage-page .portfolioTemplate .menu ul li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    text-decoration: none !important;
    transition: var(--ds-transition-smooth) !important;
    color: #475569 !important;
    background: linear-gradient(135deg, var(--ds-bg-light), #f1f5f9) !important;
    border: 2px solid var(--ds-gray-200) !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    min-width: 120px !important;
    text-align: center !important;
}
.fe-portfolio-manage-page #captureTemplate .menu-main li a:hover, .fe-portfolio-manage-page #captureTemplate .menu ul li a:hover, .fe-portfolio-manage-page .portfolioTemplate .menu-main li a:hover, .fe-portfolio-manage-page .portfolioTemplate .menu ul li a:hover {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary)) !important;
    color: white !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(78, 177, 186, 0.4) !important;
    border-color: transparent !important;
}
.fe-portfolio-manage-page #captureTemplate .menu-main li.active a, .fe-portfolio-manage-page #captureTemplate .menu ul li.active a, .fe-portfolio-manage-page .portfolioTemplate .menu-main li.active a, .fe-portfolio-manage-page .portfolioTemplate .menu ul li.active a {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary)) !important;
    color: white !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px rgba(78, 177, 186, 0.5) !important;
    border-color: transparent !important;
}
.fe-portfolio-manage-page #captureTemplate .menu-main li.active a:hover, .fe-portfolio-manage-page #captureTemplate .menu ul li.active a:hover, .fe-portfolio-manage-page .portfolioTemplate .menu-main li.active a:hover, .fe-portfolio-manage-page .portfolioTemplate .menu ul li.active a:hover {
    background: linear-gradient(135deg, #3A9BA5, #1A3F66) !important;
    transform: translateY(-3px) scale(1.03) !important;
}
.fe-portfolio-manage-page #captureTemplate .dropdown1, .fe-portfolio-manage-page .portfolioTemplate .dropdown1 {
    position: relative !important;
    display: inline-block !important;
}
.fe-portfolio-manage-page #captureTemplate .dropdown-item1, .fe-portfolio-manage-page .portfolioTemplate .dropdown-item1 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    text-decoration: none !important;
    transition: var(--ds-transition-smooth) !important;
    color: #475569 !important;
    background: linear-gradient(135deg, var(--ds-bg-light), #f1f5f9) !important;
    border: 2px solid var(--ds-gray-200) !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    min-width: 120px !important;
    cursor: pointer !important;
}
.fe-portfolio-manage-page #captureTemplate .dropdown-item1:hover, .fe-portfolio-manage-page #captureTemplate .dropdown-item1:focus, .fe-portfolio-manage-page .portfolioTemplate .dropdown-item1:hover, .fe-portfolio-manage-page .portfolioTemplate .dropdown-item1:focus {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary)) !important;
    color: white !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(78, 177, 186, 0.4) !important;
    border-color: transparent !important;
    outline: none !important;
}
.fe-portfolio-manage-page #captureTemplate .dropdown-item1.show, .fe-portfolio-manage-page .portfolioTemplate .dropdown-item1.show, .fe-portfolio-manage-page #captureTemplate .competencies-dropdown-btn.active, .fe-portfolio-manage-page .portfolioTemplate .competencies-dropdown-btn.active {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary)) !important;
    color: white !important;
    border-color: transparent !important;
}
.fe-portfolio-manage-page #captureTemplate .dropdown-menu, .fe-portfolio-manage-page .portfolioTemplate .dropdown-menu {
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
    border: 2px solid var(--ds-gray-200) !important;
    padding: 0.75rem !important;
    margin-top: 0.5rem !important;
    background: white !important;
    min-width: 250px !important;
    animation: fadeInDown 0.3s ease-out !important;
}
.fe-portfolio-manage-page #captureTemplate .competencies-dropdown-menu, .fe-portfolio-manage-page .portfolioTemplate .competencies-dropdown-menu {
    display: none !important;
}
@keyframes fadeInDown {
from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fe-portfolio-manage-page #captureTemplate .dropdown-menu.show, .fe-portfolio-manage-page .portfolioTemplate .dropdown-menu.show {
    display: block !important;
}
.fe-portfolio-manage-page #captureTemplate .competencies-dropdown-menu:not(.show), .fe-portfolio-manage-page .portfolioTemplate .competencies-dropdown-menu:not(.show) {
    display: none !important;
}

.fe-portfolio-manage-page #captureTemplate .dropdown-menu li a, .fe-portfolio-manage-page #captureTemplate .dropdown-menu .dropdown-item, .fe-portfolio-manage-page .portfolioTemplate .dropdown-menu li a, .fe-portfolio-manage-page .portfolioTemplate .dropdown-menu .dropdown-item {
    padding: 0.875rem 1.25rem !important;
    border-radius: 8px !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    color: #475569 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0.25rem 0 !important;
    display: block !important;
    text-decoration: none !important;
    transition: var(--ds-transition) !important;
    border: 1px solid transparent !important;
}
.fe-portfolio-manage-page #captureTemplate .dropdown-menu li a:hover, .fe-portfolio-manage-page #captureTemplate .dropdown-menu .dropdown-item:hover, .fe-portfolio-manage-page .portfolioTemplate .dropdown-menu li a:hover, .fe-portfolio-manage-page .portfolioTemplate .dropdown-menu .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1)) !important;
    color: var(--ds-secondary) !important;
    transform: translateX(4px) !important;
    border-color: var(--ds-gray-200) !important;
    font-weight: 600 !important;
}
.fe-portfolio-manage-page #captureTemplate .userDescription, .fe-portfolio-manage-page .portfolioTemplate .userDescription {
    padding: 2rem !important;
    background: linear-gradient(135deg, var(--ds-bg-light) 0%, #ffffff 100%) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    margin: 1.5rem 0 !important;
}
.fe-portfolio-manage-page #captureTemplate .profileTitle, .fe-portfolio-manage-page .portfolioTemplate .profileTitle {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--ds-secondary) !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.3 !important;
}
.fe-portfolio-manage-page #captureTemplate .profileSubTitle, .fe-portfolio-manage-page .portfolioTemplate .profileSubTitle {
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    color: var(--ds-primary) !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.5 !important;
}
.fe-portfolio-manage-page #captureTemplate .proflieInfo, .fe-portfolio-manage-page .portfolioTemplate .proflieInfo {
    font-size: 1rem !important;
    line-height: 1.8 !important;
    color: #475569 !important;
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
    border-top: 2px solid var(--ds-gray-200) !important;
}
.fe-portfolio-manage-page #captureTemplate .proflieInfo p, .fe-portfolio-manage-page .portfolioTemplate .proflieInfo p {
    margin-bottom: 1rem !important;
    color: #475569 !important;
}
.fe-portfolio-manage-page #captureTemplate .soicalIcon, .fe-portfolio-manage-page .portfolioTemplate .soicalIcon {
    margin: 1.5rem 0 !important;
}
.fe-portfolio-manage-page #captureTemplate .soicalIcon ul, .fe-portfolio-manage-page .portfolioTemplate .soicalIcon ul {
    display: flex !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.fe-portfolio-manage-page #captureTemplate .soicalIcon ul li, .fe-portfolio-manage-page .portfolioTemplate .soicalIcon ul li {
    margin: 0 !important;
    padding: 0 !important;
}
.fe-portfolio-manage-page #captureTemplate .soicalIcon ul li a, .fe-portfolio-manage-page .portfolioTemplate .soicalIcon ul li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1)) !important;
    color: var(--ds-primary) !important;
    font-size: 1.5rem !important;
    transition: var(--ds-transition-smooth) !important;
    box-shadow: 0 2px 8px rgba(78, 177, 186, 0.2) !important;
    text-decoration: none !important;
}
.fe-portfolio-manage-page #captureTemplate .soicalIcon ul li a:hover, .fe-portfolio-manage-page .portfolioTemplate .soicalIcon ul li a:hover {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary)) !important;
    color: white !important;
    transform: translateY(-3px) scale(1.1) !important;
    box-shadow: 0 6px 16px rgba(78, 177, 186, 0.4) !important;
}
@media (max-width: 768px) {
.fe-portfolio-manage-page #captureTemplate .menu-main, .fe-portfolio-manage-page #captureTemplate .menu ul, .fe-portfolio-manage-page .portfolioTemplate .menu-main, .fe-portfolio-manage-page .portfolioTemplate .menu ul {
    flex-direction: column !important;
        gap: 0.5rem !important;
}
.fe-portfolio-manage-page #captureTemplate .menu-main li a, .fe-portfolio-manage-page #captureTemplate .menu ul li a, .fe-portfolio-manage-page .portfolioTemplate .menu-main li a, .fe-portfolio-manage-page .portfolioTemplate .menu ul li a {
    width: 100% !important;
        justify-content: flex-start !important;
}
.fe-portfolio-manage-page #captureTemplate .profileTitle, .fe-portfolio-manage-page .portfolioTemplate .profileTitle {
    font-size: 1.5rem !important;
}
.fe-portfolio-manage-page #captureTemplate .profileSubTitle, .fe-portfolio-manage-page .portfolioTemplate .profileSubTitle {
    font-size: 1rem !important;
}
}
.fe-portfolio-manage-page .nav-tabs .nav-link {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
    color: var(--ds-gray-500);
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    background: transparent;
    position: relative;
}
.fe-portfolio-manage-page .nav-tabs .nav-link:hover {
    color: var(--ds-primary) !important;
    background: rgba(78,177,186,0.08);
    border-bottom-color: rgba(78,177,186,0.4);
    transform: translateY(-1px);
}
.fe-portfolio-manage-page .nav-tabs .nav-link.active {
    color: var(--ds-primary) !important;
    background: #ffffff;
    border-bottom-color: var(--ds-primary);
    font-weight: 600;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.fe-portfolio-manage-page .nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    border-radius: 3px 3px 0 0;
}
@media (max-width: 768px) {
.fe-portfolio-manage-page .portfolio-container {
    padding: 1rem 0.5rem;
}
.fe-portfolio-manage-page .page-header h1 {
    font-size: 1.125rem;
}
.fe-portfolio-manage-page .page-header p {
    font-size: 0.8125rem;
}
.fe-portfolio-manage-page .nav-tabs {
    padding: 0.5rem 0.75rem 0 0.75rem;
        overflow-x: auto;
        display: flex;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
}
.fe-portfolio-manage-page .nav-tabs::-webkit-scrollbar {
    height: 4px;
}
.fe-portfolio-manage-page .nav-tabs::-webkit-scrollbar-track {
    background: #f1f1f1;
        border-radius: 10px;
}
.fe-portfolio-manage-page .nav-tabs::-webkit-scrollbar-thumb {
    background: var(--ds-primary);
        border-radius: 10px;
}



.fe-portfolio-manage-page .tab-content {
    padding: 1.5rem 1rem;
        border-radius: 0 0 12px 12px;
}
.fe-portfolio-manage-page .tab-content .smIcon {
    font-size: 2.5rem !important;
        width: 70px;
        height: 70px;
        margin: 0.5rem;
}
.fe-portfolio-manage-page .eyeBtn, .fe-portfolio-manage-page .editBtn, .fe-portfolio-manage-page .deleteBtn {
    min-width: 45px;
        height: 45px;
        font-size: 1rem;
}
.fe-portfolio-manage-page .groupBtn {
    gap: 0.5rem;
}
.fe-portfolio-manage-page .previewTemplateBtn-2 {
    flex-direction: column;
        gap: 0.75rem;
}
.fe-portfolio-manage-page .editTemplateBtn {
    width: 100%;
        min-width: auto;
}
}
.fe-portfolio-manage-page #captureTemplate .dropdown-toggle::after, .fe-portfolio-manage-page .portfolioTemplate .dropdown-toggle::after {
    margin-left: 0.5rem;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    transition: transform 0.3s ease;
}
.fe-portfolio-manage-page #captureTemplate .dropdown-toggle[aria-expanded="true"]::after, .fe-portfolio-manage-page .portfolioTemplate .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}
.fe-portfolio-manage-page #captureTemplate .competencies-dropdown-btn .dropdown-arrow, .fe-portfolio-manage-page .portfolioTemplate .competencies-dropdown-btn .dropdown-arrow {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    transition: transform 0.3s ease;
    display: inline-block;
}
.fe-portfolio-manage-page #captureTemplate .competencies-dropdown-btn.active .dropdown-arrow, .fe-portfolio-manage-page .portfolioTemplate .competencies-dropdown-btn.active .dropdown-arrow {
    transform: rotate(180deg);
}
.fe-portfolio-manage-page #captureTemplate .competencies-dropdown-menu, .fe-portfolio-manage-page .portfolioTemplate .competencies-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 250px;
    margin-top: 0.5rem;
    background: white;
    border-radius: var(--ds-radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    border: 2px solid var(--ds-gray-200);
    padding: 0.75rem;
    list-style: none;
    display: none !important;
}
.fe-portfolio-manage-page #captureTemplate .competencies-dropdown-menu.show, .fe-portfolio-manage-page .portfolioTemplate .competencies-dropdown-menu.show {
    display: block !important;
    animation: fadeInDown 0.3s ease-out;
}
.fe-portfolio-manage-page #captureTemplate .competencies-dropdown-menu li, .fe-portfolio-manage-page .portfolioTemplate .competencies-dropdown-menu li {
    margin: 0;
    padding: 0;
}
.fe-portfolio-manage-page #captureTemplate .competencies-dropdown-menu li a, .fe-portfolio-manage-page .portfolioTemplate .competencies-dropdown-menu li a {
    display: block;
    padding: 0.875rem 1.25rem;
    border-radius: var(--ds-radius-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    transition: var(--ds-transition);
    margin: 0.25rem 0;
}
.fe-portfolio-manage-page #captureTemplate .competencies-dropdown-menu li a:hover, .fe-portfolio-manage-page .portfolioTemplate .competencies-dropdown-menu li a:hover {
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
    color: var(--ds-secondary);
    transform: translateX(4px);
    border-color: var(--ds-gray-200);
    font-weight: 600;
}
.fe-portfolio-manage-page .modal-body .colorBox, .fe-portfolio-manage-page #custTemplateModal .colorBox, .fe-portfolio-manage-page .tab-content .modal-body .colorBox {
    display: block !important;
    margin-top: 0.5rem;
}
.fe-portfolio-manage-page .modal-body .colorBox ul, .fe-portfolio-manage-page #custTemplateModal .colorBox ul, .fe-portfolio-manage-page .tab-content .modal-body .colorBox ul {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    padding-left: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.fe-portfolio-manage-page .modal-body .colorBox ul li, .fe-portfolio-manage-page #custTemplateModal .colorBox ul li, .fe-portfolio-manage-page .tab-content .modal-body .colorBox ul li {
    list-style: none !important;
    cursor: pointer !important;
    padding: 3px !important;
    border-radius: 50px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 3px solid var(--ds-gray-300) !important;
    transition: var(--ds-transition-smooth) !important;
    position: relative !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.fe-portfolio-manage-page .modal-body .colorBox ul li span, .fe-portfolio-manage-page #custTemplateModal .colorBox ul li span, .fe-portfolio-manage-page .tab-content .modal-body .colorBox ul li span {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border: none !important;
    border-radius: 50px !important;
    transition: var(--ds-transition-slow) !important;
    position: relative !important;
    z-index: 0 !important;
}
.fe-portfolio-manage-page .modal-body .colorBox ul li.active, .fe-portfolio-manage-page #custTemplateModal .colorBox ul li.active, .fe-portfolio-manage-page .tab-content .modal-body .colorBox ul li.active {
    border: 4px solid var(--ds-secondary) !important;
    box-shadow: 0 0 0 4px rgba(78, 177, 186, 0.3), 0 0 0 8px rgba(78, 177, 186, 0.15), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transform: scale(1.15) !important;
    z-index: 10 !important;
    position: relative !important;
    background: #ffffff !important;
    animation: colorSelectPulse 0.4s ease-out !important;
}
@keyframes colorSelectPulse {
0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(78, 177, 186, 0.7);
    }
    50% {
        transform: scale(1.25);
        box-shadow: 0 0 0 8px rgba(78, 177, 186, 0.4);
    }
    100% {
        transform: scale(1.2);
        box-shadow: 0 0 0 4px rgba(78, 177, 186, 0.3), 0 0 0 8px rgba(78, 177, 186, 0.15), 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}
.fe-portfolio-manage-page .modal-body .colorBox ul li.active::before, .fe-portfolio-manage-page #custTemplateModal .colorBox ul li.active::before, .fe-portfolio-manage-page .tab-content .modal-body .colorBox ul li.active::before {
    content: '' !important;
    position: absolute !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    z-index: 3 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
.fe-portfolio-manage-page .modal-body .colorBox ul li.active::after, .fe-portfolio-manage-page #custTemplateModal .colorBox ul li.active::after, .fe-portfolio-manage-page .tab-content .modal-body .colorBox ul li.active::after {
    content: '✓' !important;
    position: absolute !important;
    color: var(--ds-secondary) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    z-index: 5 !important;
    line-height: 1 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9) !important;
    animation: checkmarkAppear 0.3s ease-out 0.1s both !important;
    pointer-events: none !important;
    display: block !important;
}
@keyframes checkmarkAppear {
0% {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}
.fe-portfolio-manage-page .modal-body .colorBox ul li:hover:not(.active), .fe-portfolio-manage-page #custTemplateModal .colorBox ul li:hover:not(.active), .fe-portfolio-manage-page .tab-content .modal-body .colorBox ul li:hover:not(.active) {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(78, 177, 186, 0.3) !important;
    border-color: var(--ds-primary) !important;
}
.fe-portfolio-manage-page .modal-body .colorBox ul li:active:not(.active), .fe-portfolio-manage-page #custTemplateModal .colorBox ul li:active:not(.active), .fe-portfolio-manage-page .tab-content .modal-body .colorBox ul li:active:not(.active) {
    transform: scale(1.05) !important;
}
.fe-portfolio-manage-page .modal-body .form-group .selected-color-display, .fe-portfolio-manage-page #custTemplateModal .form-group .selected-color-display, .fe-portfolio-manage-page .tab-content .modal-body .form-group .selected-color-display {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
    background: var(--ds-bg-light) !important;
    border-radius: 8px !important;
    border: 1px solid var(--ds-gray-200) !important;
    font-size: 0.875rem !important;
}
.fe-portfolio-manage-page .modal-body .form-group .selected-color-display .color-preview, .fe-portfolio-manage-page #custTemplateModal .form-group .selected-color-display .color-preview, .fe-portfolio-manage-page .tab-content .modal-body .form-group .selected-color-display .color-preview {
    width: 24px !important;
    height: 24px !important;
    border-radius: 4px !important;
    border: 2px solid var(--ds-gray-200) !important;
    display: inline-block !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.fe-portfolio-manage-page .modal-body .form-group .selected-color-display .color-code, .fe-portfolio-manage-page #custTemplateModal .form-group .selected-color-display .color-code, .fe-portfolio-manage-page .tab-content .modal-body .form-group .selected-color-display .color-code {
    font-weight: 600 !important;
    color: var(--ds-secondary) !important;
    font-family: 'Courier New', monospace !important;
}
.fe-portfolio-manage-page .modal-body #customColorPicker_teTxtbgColor, .fe-portfolio-manage-page .modal-body #customColorPicker_teTxtfontColor, .fe-portfolio-manage-page #custTemplateModal #customColorPicker_teTxtbgColor, .fe-portfolio-manage-page #custTemplateModal #customColorPicker_teTxtfontColor, .fe-portfolio-manage-page .tab-content .modal-body #customColorPicker_teTxtbgColor, .fe-portfolio-manage-page .tab-content .modal-body #customColorPicker_teTxtfontColor {
    margin-top: 15px !important;
    padding: 15px !important;
    background: var(--ds-bg-light) !important;
    border-radius: 8px !important;
    border: 1px solid var(--ds-gray-200) !important;
    transition: var(--ds-transition-slow) !important;
}
.fe-portfolio-manage-page .modal-body #customColorPicker_teTxtbgColor label, .fe-portfolio-manage-page .modal-body #customColorPicker_teTxtfontColor label, .fe-portfolio-manage-page #custTemplateModal #customColorPicker_teTxtbgColor label, .fe-portfolio-manage-page #custTemplateModal #customColorPicker_teTxtfontColor label, .fe-portfolio-manage-page .tab-content .modal-body #customColorPicker_teTxtbgColor label, .fe-portfolio-manage-page .tab-content .modal-body #customColorPicker_teTxtfontColor label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: var(--ds-secondary) !important;
    font-size: 0.875rem !important;
}
.fe-portfolio-manage-page .modal-body #customColorPicker_teTxtbgColor input[type="color"], .fe-portfolio-manage-page .modal-body #customColorPicker_teTxtfontColor input[type="color"], .fe-portfolio-manage-page #custTemplateModal #customColorPicker_teTxtbgColor input[type="color"], .fe-portfolio-manage-page #custTemplateModal #customColorPicker_teTxtfontColor input[type="color"], .fe-portfolio-manage-page .tab-content .modal-body #customColorPicker_teTxtbgColor input[type="color"], .fe-portfolio-manage-page .tab-content .modal-body #customColorPicker_teTxtfontColor input[type="color"] {
    width: 100% !important;
    height: 50px !important;
    border: 2px solid var(--ds-gray-300) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: border-color 0.3s ease !important;
    position: relative !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
.fe-portfolio-manage-page .modal-body #customColorPicker_teTxtbgColor input[type="color"]:hover, .fe-portfolio-manage-page .modal-body #customColorPicker_teTxtfontColor input[type="color"]:hover, .fe-portfolio-manage-page #custTemplateModal #customColorPicker_teTxtbgColor input[type="color"]:hover, .fe-portfolio-manage-page #custTemplateModal #customColorPicker_teTxtfontColor input[type="color"]:hover, .fe-portfolio-manage-page .tab-content .modal-body #customColorPicker_teTxtbgColor input[type="color"]:hover, .fe-portfolio-manage-page .tab-content .modal-body #customColorPicker_teTxtfontColor input[type="color"]:hover {
    border-color: var(--ds-primary) !important;
    box-shadow: 0 0 0 3px rgba(78, 177, 186, 0.1) !important;
}
.fe-portfolio-manage-page .modal-body #customColorPicker_teTxtbgColor input[type="color"]:focus, .fe-portfolio-manage-page .modal-body #customColorPicker_teTxtfontColor input[type="color"]:focus, .fe-portfolio-manage-page #custTemplateModal #customColorPicker_teTxtbgColor input[type="color"]:focus, .fe-portfolio-manage-page #custTemplateModal #customColorPicker_teTxtfontColor input[type="color"]:focus, .fe-portfolio-manage-page .tab-content .modal-body #customColorPicker_teTxtbgColor input[type="color"]:focus, .fe-portfolio-manage-page .tab-content .modal-body #customColorPicker_teTxtfontColor input[type="color"]:focus {
    outline: none !important;
    border-color: var(--ds-primary) !important;
    box-shadow: 0 0 0 3px rgba(78, 177, 186, 0.2) !important;
}

/* share.php styles are PHP-dynamic throughout — restored inline in the view */
/* Extracted from application/views/Frontend/portfolio/education.php */
.fe-portfolio-education-page .groupBtn {
    background: transparent !important;
}

/* Extracted from application/views/Frontend/portfolio/template.php */
/* (mangled PHP echo removed — Montserrat @import restored in template.php) */

.template-modal-dialog {
    max-width: 95%;
    margin: 1.5rem auto;
}
.fe-portfolio-template-page .template-modal-content {
    border-radius: var(--ds-radius-xl);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.fe-portfolio-template-page .template-modal-header {
    border-bottom: 2px solid var(--ds-gray-200);
    padding: 1.5rem 2rem;
}
.fe-portfolio-template-page .template-modal-header .modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ds-secondary);
}
.fe-portfolio-template-page .template-close-btn {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    opacity: 0.8;
    transition: var(--ds-transition);
}
.fe-portfolio-template-page .template-modal-body {
    padding: 2rem;
    max-height: 70vh;
    overflow-y: auto;
}
.fe-portfolio-template-page .template-modal-footer {
    border-top: 2px solid var(--ds-gray-200);
    padding: 1.5rem 2rem;
    background: var(--ds-bg-light);
}
.fe-portfolio-template-page .template-continue-btn {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    min-width: 150px;
}
@media (max-width: 768px) {
.fe-portfolio-template-page .template-modal-dialog {
    max-width: 100%;
        margin: 0;
}
.fe-portfolio-template-page .template-modal-header, .fe-portfolio-template-page .template-modal-body, .fe-portfolio-template-page .template-modal-footer {
    padding: 1.25rem;
}
.fe-portfolio-template-page .template-modal-body {
    max-height: 60vh;
}
}

/* Extracted from application/views/Frontend/portfolio/social-media.php */
.fe-portfolio-social-media-page .social-media-list {
    display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.fe-portfolio-social-media-page .social-media-row {
    display: block;
	background: #ffffff;
	border: 1px solid var(--ds-gray-200);
	border-radius: var(--ds-radius-md);
	padding: 0;
	text-decoration: none;
	color: inherit;
	transition: var(--ds-transition-smooth);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: hidden;
}
.fe-portfolio-social-media-page .social-media-row::before {
    content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--ds-primary), var(--ds-secondary));
	transform: scaleY(0);
	transition: transform 0.3s ease;
}
.fe-portfolio-social-media-page .social-media-row:hover {
    transform: translateY(-2px);
	border-color: var(--ds-primary);
	box-shadow: 0 4px 12px rgba(78, 177, 186, 0.15);
	text-decoration: none;
	color: inherit;
}
.fe-portfolio-social-media-page .social-media-row:hover::before {
    transform: scaleY(1);
}
.fe-portfolio-social-media-page .social-media-row-content {
    display: flex;
	align-items: center;
	padding: 1rem 1.25rem;
	gap: 1rem;
}
.fe-portfolio-social-media-page .social-media-icon-box {
    display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	min-width: 48px;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
	transition: var(--ds-transition-slow);
	flex-shrink: 0;
}
.fe-portfolio-social-media-page .social-media-row:hover .social-media-icon-box {
    background: white;
}
.fe-portfolio-social-media-page .social-media-icon-box .smIcon {
    font-size: 1.5rem !important;
	color: var(--ds-primary) !important;
	transition: var(--ds-transition-slow);
}
.fe-portfolio-social-media-page .social-media-row:hover .social-media-icon-box .smIcon {
    color: #ffffff !important;
}
.fe-portfolio-social-media-page .social-media-info {
    flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}
.fe-portfolio-social-media-page .social-media-name {
    font-size: 1rem;
	font-weight: 600;
	color: var(--ds-secondary);
	line-height: 1.4;
}
.fe-portfolio-social-media-page .social-media-url {
    font-size: 0.875rem;
	color: var(--ds-gray-500);
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fe-portfolio-social-media-page .social-media-row:hover .social-media-url {
    color: var(--ds-primary);
}
.fe-portfolio-social-media-page .social-media-action {
    display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: var(--ds-radius-sm);
	background: transparent;
	color: var(--ds-gray-400);
	transition: var(--ds-transition-slow);
	flex-shrink: 0;
}
.fe-portfolio-social-media-page .social-media-row:hover .social-media-action {
    background: rgba(78, 177, 186, 0.1);
	color: var(--ds-primary);
	transform: translateX(2px);
}
.fe-portfolio-social-media-page .social-media-action i {
    font-size: 0.875rem;
}
.fe-portfolio-social-media-page .social-media-empty {
    text-align: center;
	padding: 3rem 1.5rem;
	color: var(--ds-gray-500);
}
.fe-portfolio-social-media-page .social-media-empty i {
    font-size: 3rem;
	margin-bottom: 1rem;
	opacity: 0.4;
	color: var(--ds-gray-400);
}
.fe-portfolio-social-media-page .social-media-empty h5 {
    margin: 0 0 0.75rem 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--ds-gray-500);
}
.fe-portfolio-social-media-page .social-media-empty p {
    margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ds-gray-400);
}

@media (min-width: 768px) {
.fe-portfolio-social-media-page .social-media-row-content {
    padding: 1.125rem 1.5rem;
}
.fe-portfolio-social-media-page .social-media-icon-box {
    width: 52px;
		height: 52px;
		min-width: 52px;
}
.fe-portfolio-social-media-page .social-media-icon-box .smIcon {
    font-size: 1.625rem !important;
}
}

/* Extracted from application/views/Frontend/portfolio/feedback.php */
    * {
transition: var(--ds-transition);
}
body.fe-portfolio-feedback-page, .fe-portfolio-feedback-page {
    font-family: 'Inter', sans-serif;
        background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
}
.fe-portfolio-feedback-page .table-modern {
    width: 100%;
        border-collapse: separate;
        border-spacing: 0;
}
.fe-portfolio-feedback-page .table-modern thead {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
        color: white;
}
.fe-portfolio-feedback-page .table-modern thead th {
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
}
.fe-portfolio-feedback-page .table-modern thead th:first-child {
    border-top-left-radius: 12px;
}
.fe-portfolio-feedback-page .table-modern thead th:last-child {
    border-top-right-radius: 12px;
}
.fe-portfolio-feedback-page .table-modern tbody tr {
    background: white;
        border-bottom: 1px solid var(--ds-gray-200);
        transition: var(--ds-transition);
}
.fe-portfolio-feedback-page .table-modern tbody tr:hover {
    background: var(--ds-gray-50);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.fe-portfolio-feedback-page .table-modern tbody td {
    padding: 16px 20px;
        font-size: 14px;
        color: var(--ds-gray-700);
        border: none;
}
.fe-portfolio-feedback-page .table-modern tbody tr:last-child {
    border-bottom: none;
}
.fe-portfolio-feedback-page .table-modern tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}
.fe-portfolio-feedback-page .table-modern tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}
.fe-portfolio-feedback-page .status-badge {
    display: inline-block;
        padding: 6px 14px;
        border-radius: var(--ds-radius-xl);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
}
.fe-portfolio-feedback-page .status-completed {
    background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.fe-portfolio-feedback-page .status-pending {
    background: linear-gradient(135deg, #f59e0b, #d97706);
        color: white;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
.fe-portfolio-feedback-page .btn-view {
    display: inline-flex;
        align-items: center;
        padding: 8px 16px;
        background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
        color: white;
        border-radius: var(--ds-radius-xl);
        font-weight: 500;
        font-size: 13px;
        text-decoration: none;
        transition: var(--ds-transition-slow);
        box-shadow: 0 2px 8px rgba(78, 177, 186, 0.3);
}
.fe-portfolio-feedback-page .btn-view:hover {
    background: linear-gradient(135deg, #3A9BA5, #1A3F66);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(78, 177, 186, 0.4);
        color: white;
        text-decoration: none;
}
.fe-portfolio-feedback-page .empty-state {
    text-align: center;
        padding: 60px 20px;
        color: var(--ds-gray-500);
}
.fe-portfolio-feedback-page .empty-state svg {
    width: 80px;
        height: 80px;
        margin: 0 auto 20px;
        opacity: 0.5;
}
.fe-portfolio-feedback-page .empty-state h3 {
    font-size: 20px;
        font-weight: 600;
        color: var(--ds-gray-700);
        margin-bottom: 10px;
}
.fe-portfolio-feedback-page .empty-state p {
    font-size: 14px;
        color: var(--ds-gray-500);
}
@media (max-width: 768px) {
.fe-portfolio-feedback-page .table-responsive {
    overflow-x: auto;
            -webkit-overflow-scrolling: touch;
}
.fe-portfolio-feedback-page .table-modern {
    min-width: 700px;
}
.fe-portfolio-feedback-page .table-modern thead th, .fe-portfolio-feedback-page .table-modern tbody td {
    padding: 12px 14px;
            font-size: 13px;
}
}

/* Extracted from application/views/Frontend/portfolio/industry_standard.php */
    * {
transition: var(--ds-transition);
}
body.fe-portfolio-industry-standard-page, .fe-portfolio-industry-standard-page {
    font-family: 'Inter', sans-serif;
        background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
}
.fe-portfolio-industry-standard-page input[type="text"], .fe-portfolio-industry-standard-page input.form-control {
    border-radius: var(--ds-radius-md) !important;
    border: 2px solid var(--ds-gray-200) !important;
    padding: 12px 16px !important;
    background-color: #ffffff;
    transition: var(--ds-transition-smooth);
    font-size: 15px;
    line-height: 1.5;
    height: auto;
    min-height: 48px;
    box-sizing: border-box;
    width: 100%;
}
.fe-portfolio-industry-standard-page input[type="text"]:hover, .fe-portfolio-industry-standard-page input.form-control:hover {
    border-color: #cbd5e1;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.fe-portfolio-industry-standard-page input[type="text"]:focus, .fe-portfolio-industry-standard-page input.form-control:focus {
    outline: none !important;
        border-color: var(--ds-primary) !important;
        box-shadow: 0 0 0 4px rgba(78, 177, 186, 0.15), 0 4px 12px rgba(78, 177, 186, 0.2) !important;
        background-color: #ffffff !important;
        transform: translateY(-1px);
}
.fe-portfolio-industry-standard-page .btn-primary-modern {
    background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-secondary) 100%);
        color: white;
        box-shadow: 0 8px 20px rgba(78, 177, 186, 0.35), 0 4px 8px rgba(30, 78, 122, 0.2);
        border-radius: 16px !important;
        padding: 16px 32px;
        border: none;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: 0.5px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        width: 100%;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
}
.fe-portfolio-industry-standard-page .btn-primary-modern::before {
    content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.5s;
}
.fe-portfolio-industry-standard-page .btn-primary-modern:hover::before {
    left: 100%;
}
.fe-portfolio-industry-standard-page .btn-primary-modern:hover {
    background: linear-gradient(135deg, #3A9BA5 0%, #1A3F66 100%);
        box-shadow: 0 12px 28px rgba(78, 177, 186, 0.5), 0 6px 12px rgba(30, 78, 122, 0.3);
        color: white;
        transform: translateY(-3px) scale(1.02);
}
.fe-portfolio-industry-standard-page .btn-primary-modern:active {
    transform: translateY(-1px) scale(0.98);
}
.fe-portfolio-industry-standard-page .btn-primary-modern:disabled {
    opacity: 0.6;
        cursor: not-allowed;
        transform: none;
}
.fe-portfolio-industry-standard-page .btn-primary-modern i:not(.fa-spinner) {
    font-size: 18px;
        animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
}
.fe-portfolio-industry-standard-page .fa-spinner, .fe-portfolio-industry-standard-page .fa-spinner.fa-spin, .fe-portfolio-industry-standard-page i.fa-spinner {
    animation: fa-spin 1s infinite linear !important;
        display: inline-block;
        font-size: 18px;
}
@keyframes fa-spin {
0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
}
.fe-portfolio-industry-standard-page .btn-primary-modern:disabled {
    cursor: wait !important;
        pointer-events: none;
}
.fe-portfolio-industry-standard-page .btn-primary-modern:disabled i.fa-spinner {
    animation: fa-spin 1s infinite linear !important;
        display: inline-block !important;
}
.fe-portfolio-industry-standard-page .btn-primary-modern:disabled i:not(.fa-spinner) {
    animation: none !important;
}
.fe-portfolio-industry-standard-page .fabulous-card {
    position: relative;
        background: #ffffff;
        border-radius: var(--ds-radius-lg);
        box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
        border: 1px solid var(--ds-gray-200);
        transition: var(--ds-transition-smooth);
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
}
.fe-portfolio-industry-standard-page .fabulous-card:hover {
    transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.06);
        border-color: rgba(78, 177, 186, 0.3);
}
.fe-portfolio-industry-standard-page .card-header-section {
    background: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
        padding: 24px 28px;
        position: relative;
        min-height: 100px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
}
.fe-portfolio-industry-standard-page .fabulous-card:hover .card-header-section {
    background: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
        opacity: 0.98;
}
.fe-portfolio-industry-standard-page .icon-badge {
    width: 56px;
        height: 56px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.3);
        transition: var(--ds-transition-slow);
        flex-shrink: 0;
}
.fe-portfolio-industry-standard-page .fabulous-card:hover .icon-badge {
    background: rgba(255, 255, 255, 0.25);
        transform: scale(1.05);
}
.fe-portfolio-industry-standard-page .icon-badge i {
    font-size: 1.75rem;
        color: #ffffff;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.fe-portfolio-industry-standard-page .card-number {
    position: absolute;
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10px);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 14px;
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.3);
        z-index: 2;
}
.fe-portfolio-industry-standard-page .fabulous-card .card-content {
    padding: 28px;
        flex: 1;
        display: flex;
        flex-direction: column;
        background: #ffffff;
}
.fe-portfolio-industry-standard-page .fabulous-card h2 {
    font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 16px;
        line-height: 1.4;
        color: var(--card-gradient-end);
        text-align: left;
        margin-top: 0;
        padding-bottom: 12px;
        border-bottom: 2px solid #f1f5f9;
}
.fe-portfolio-industry-standard-page .fabulous-card:hover h2 {
    color: var(--card-gradient-start);
        border-bottom-color: rgba(78, 177, 186, 0.2);
}
.fe-portfolio-industry-standard-page .insPara {
    font-size: 14px !important;
        font-weight: 400;
        text-align: left;
        line-height: 1.75;
        color: #475569;
        flex: 1;
        margin: 0;
}
.fe-portfolio-industry-standard-page .fabulous-card::after {
    content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--card-gradient-start), var(--card-gradient-end));
        opacity: 0;
        transition: opacity 0.3s ease;
}
.fe-portfolio-industry-standard-page .fabulous-card:hover::after {
    opacity: 0.6;
}
.fe-portfolio-industry-standard-page .instruction-box {
    background: linear-gradient(135deg, var(--ds-bg-light) 0%, #f1f5f9 100%);
        border-left: 4px solid var(--ds-primary);
        border-radius: var(--ds-radius-md);
        padding: 20px;
        margin-bottom: 30px;
}
.fe-portfolio-industry-standard-page .instruction-box p {
    margin: 0;
        color: #475569;
        font-size: 15px;
        line-height: 1.6;
}

/* Extracted from application/views/Frontend/portfolio/artifacts/popup.php */
.fe-portfolio-artifacts-popup-page .description-content ol {
    margin-left: 20px;
}
.fe-portfolio-artifacts-popup-page .artifact-popup-container {
    width: 100%;
    padding: 0;
}
.fe-portfolio-artifacts-popup-page .artifact-popup-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
    min-height: 600px;
}
.fe-portfolio-artifacts-popup-page .artifact-media-section {
    position: relative;
}
.fe-portfolio-artifacts-popup-page .media-wrapper {
    position: sticky;
    top: 0;
    width: 100%;
    height: 600px;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: var(--ds-bg-light);
    border: 1px solid var(--ds-gray-200);
}
.fe-portfolio-artifacts-popup-page .file-viewer, .fe-portfolio-artifacts-popup-page .image-viewer, .fe-portfolio-artifacts-popup-page .video-viewer {
    width: 100%;
    height: 100%;
    position: relative;
}
.fe-portfolio-artifacts-popup-page .file-viewer iframe, .fe-portfolio-artifacts-popup-page .video-viewer iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--ds-radius-lg);
}
.fe-portfolio-artifacts-popup-page .image-viewer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 1rem;
}
.fe-portfolio-artifacts-popup-page .artifact-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--ds-radius-md);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.fe-portfolio-artifacts-popup-page .artifact-content-section {
    display: flex;
    align-items: flex-start;
}
.fe-portfolio-artifacts-popup-page .content-card {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--ds-gray-200);
    width: 100%;
}
.fe-portfolio-artifacts-popup-page .artifact-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--ds-gray-200);
}
.fe-portfolio-artifacts-popup-page .file-type-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: #ffffff;
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}
.fe-portfolio-artifacts-popup-page .artifact-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ds-secondary);
    margin: 0;
    line-height: 1.3;
}
.fe-portfolio-artifacts-popup-page .artifact-description {
    margin-bottom: 2rem;
}
.fe-portfolio-artifacts-popup-page .description-label, .fe-portfolio-artifacts-popup-page .competencies-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}
.fe-portfolio-artifacts-popup-page .description-content {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ds-gray-700);
    padding: 1rem;
    background: var(--ds-bg-light);
    border-radius: var(--ds-radius-md);
    border-left: 4px solid var(--ds-primary);
}
.fe-portfolio-artifacts-popup-page .artifact-competencies {
    padding-top: 1.5rem;
    border-top: 1px solid var(--ds-gray-200);
}
.fe-portfolio-artifacts-popup-page .competencies-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.fe-portfolio-artifacts-popup-page .competency-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
    border: 2px solid rgba(78, 177, 186, 0.2);
    border-radius: 50px;
    transition: var(--ds-transition);
}
.fe-portfolio-artifacts-popup-page .competency-badge:hover {
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.15), rgba(30, 78, 122, 0.15));
    border-color: var(--ds-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.2);
}
.fe-portfolio-artifacts-popup-page .competency-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}
.fe-portfolio-artifacts-popup-page .competency-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ds-secondary);
}
@media (max-width: 992px) {
.fe-portfolio-artifacts-popup-page .artifact-popup-layout {
    grid-template-columns: 1fr;
        gap: 1.5rem;
}
.fe-portfolio-artifacts-popup-page .media-wrapper {
    height: 400px;
        position: relative;
}
.fe-portfolio-artifacts-popup-page .content-card {
    padding: 1.5rem;
}
}
@media (max-width: 768px) {
.fe-portfolio-artifacts-popup-page .artifact-popup-layout {
    gap: 1rem;
}
.fe-portfolio-artifacts-popup-page .media-wrapper {
    height: 300px;
}
.fe-portfolio-artifacts-popup-page .content-card {
    padding: 1.25rem;
        border-radius: var(--ds-radius-md);
}
.fe-portfolio-artifacts-popup-page .artifact-title {
    font-size: 1.5rem;
}
.fe-portfolio-artifacts-popup-page .description-content {
    font-size: 0.9375rem;
        padding: 0.875rem;
}
.fe-portfolio-artifacts-popup-page .competencies-grid {
    gap: 0.5rem;
}
.fe-portfolio-artifacts-popup-page .competency-badge {
    padding: 0.5rem 0.875rem;
}
.fe-portfolio-artifacts-popup-page .competency-icon {
    width: 20px;
        height: 20px;
}
.fe-portfolio-artifacts-popup-page .competency-name {
    font-size: 0.875rem;
}
}

/* Extracted from application/views/Frontend/portfolio/artifacts/formFields.php */
.fe-portfolio-artifacts-formfields-page .competency-selection-card {
    background: #ffffff;
	border: 2px solid var(--ds-gray-200);
	border-radius: var(--ds-radius-md);
	padding: 1rem;
	transition: var(--ds-transition-smooth);
	cursor: pointer;
	height: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}
.fe-portfolio-artifacts-formfields-page .competency-selection-card:hover {
    border-color: var(--ds-primary);
	box-shadow: 0 4px 12px rgba(78, 177, 186, 0.15);
	transform: translateY(-2px);
}
.fe-portfolio-artifacts-formfields-page .competency-selection-card.selected {
    border-color: var(--ds-primary);
	background: linear-gradient(135deg, rgb(0 180 197 / 51%), rgba(30, 78, 122, 0.05));
	box-shadow: 0 4px 12px rgba(78, 177, 186, 0.2);
}
.fe-portfolio-artifacts-formfields-page .competency-selection-card input[type="radio"] {
    width: 20px;
	height: 20px;
	margin-right: 0.75rem;
	cursor: pointer;
	accent-color: var(--ds-primary);
	flex-shrink: 0;
}
.fe-portfolio-artifacts-formfields-page .competency-selection-label {
    margin: 0px !important;
padding:0px !important;
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0;
	cursor: pointer;
}
.fe-portfolio-artifacts-formfields-page .competency-selection-text {
    font-size: 0.9375rem;
	font-weight: 500;
	color: var(--ds-gray-800);
	line-height: 1.4;
	flex: 1;
}
.fe-portfolio-artifacts-formfields-page .competency-selection-card.selected .competency-selection-text {
    color: var(--ds-secondary);
	font-weight: 600;
}
.fe-portfolio-artifacts-formfields-page .competency-info-icon {
    color: var(--ds-primary);
	margin-left: 0.5rem;
	font-size: 0.875rem;
	flex-shrink: 0;
}
.fe-portfolio-artifacts-formfields-page .competency-selection-card.disabled {
    background: var(--ds-gray-100);
	border-color: var(--ds-gray-300);
	cursor: not-allowed;
	opacity: 0.6;
}
.fe-portfolio-artifacts-formfields-page .competency-selection-card.disabled:hover {
    border-color: var(--ds-gray-300);
	box-shadow: none;
	transform: none;
}
.fe-portfolio-artifacts-formfields-page .competency-selection-card.disabled .competency-selection-label {
    cursor: not-allowed;
}
.fe-portfolio-artifacts-formfields-page .competency-selection-card.disabled input[type="radio"] {
    cursor: not-allowed;
}
.fe-portfolio-artifacts-formfields-page .competency-used-badge {
    display: inline-block;
	background: #fef2f2;
	color: #dc2626;
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	border-radius: var(--ds-radius-md);
	margin-left: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Extracted from application/views/Frontend/portfolio/components/image-cropper.php */
.fe-portfolio-components-image-cropper-page .cropper-view-box, .fe-portfolio-components-image-cropper-page .cropper-face {
    border-radius: var(--ds-radius-sm);
}
.fe-portfolio-components-image-cropper-page .cropper-container {
    border-radius: var(--ds-radius-md);
}
.fe-portfolio-components-image-cropper-page #imageCropModal .modal-dialog {
    max-width: 900px;
}
.fe-portfolio-components-image-cropper-page #imageCropModal .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Extracted from application/views/Frontend/portfolio/endorsements/formFields.php */
.fe-portfolio-endorsements-formfields-page .competency-checkbox-label:hover {
    background: var(--ds-gray-100) !important;
	border-color: var(--ds-primary) !important;
}
.fe-portfolio-endorsements-formfields-page .competency-checkbox:checked + span {
    color: var(--ds-secondary);
	font-weight: 600;
}
.fe-portfolio-endorsements-formfields-page .competency-checkbox-label:has(.competency-checkbox:checked) {
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1)) !important;
	border-color: var(--ds-primary) !important;
}

/* Extracted from application/views/Frontend/portfolio/templates/choose-template.php */
.fe-portfolio-templates-choose-template-page .template-selection-container {
    width: 100%;
    padding: 0;
}
.fe-portfolio-templates-choose-template-page .template-selection-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--ds-gray-200);
}
.fe-portfolio-templates-choose-template-page .selection-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ds-secondary);
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}
.fe-portfolio-templates-choose-template-page .selection-subtitle {
    font-size: 1rem;
    color: var(--ds-gray-500);
    margin: 0;
    line-height: 1.5;
}
.fe-portfolio-templates-choose-template-page .templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.fe-portfolio-templates-choose-template-page .template-card-wrapper {
    position: relative;
    height: 100%;
}
.fe-portfolio-templates-choose-template-page .template-card {
    background: #ffffff;
    border: 2px solid var(--ds-gray-200);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
.fe-portfolio-social-media-page .social-media-row {
    position: relative;
    overflow: hidden;
    border-radius: var(--ds-radius-md);
    background: #ffffff;
    border: 2px solid var(--ds-gray-200);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: var(--ds-transition-smooth);
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    padding: 0;
}
    cursor: pointer;
    transition: var(--ds-transition-smooth);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 380px;
}
.fe-portfolio-templates-choose-template-page .template-card:hover {
    border-color: var(--ds-primary);
    box-shadow: 0 8px 24px rgba(78, 177, 186, 0.15);
    transform: translateY(-4px);
}
.fe-portfolio-templates-choose-template-page .template-card.template-active {
    border-color: var(--ds-primary);
    border-width: 3px;
    box-shadow: 0 8px 24px rgba(78, 177, 186, 0.25);
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.02), rgba(30, 78, 122, 0.02));
}
.fe-portfolio-templates-choose-template-page .template-card.template-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ds-primary), var(--ds-secondary));
    z-index: 2;
}
.fe-portfolio-templates-choose-template-page .template-image-container {
    position: relative;
    width: 100%;
    height: 240px;
    min-height: 240px;
    max-height: 240px;
    overflow: hidden;
    background: var(--ds-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fe-portfolio-templates-choose-template-page .template-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.fe-portfolio-templates-choose-template-page .selected-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: #ffffff;
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.4);
}
.fe-portfolio-templates-choose-template-page .selected-badge i {
    font-size: 1rem;
}
.fe-portfolio-templates-choose-template-page .template-info {
    border-top: 1px solid #e1e1e1;
    padding: 1.5rem;
    background: #ffffff;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 85px;
}
.fe-portfolio-templates-choose-template-page .template-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ds-secondary);
    margin: 0;
    line-height: 1.4;
}
.fe-portfolio-templates-choose-template-page .active-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-secondary);
    margin-top: 1rem;
    width: fit-content;
}
.fe-portfolio-templates-choose-template-page .active-indicator i {
    color: var(--ds-primary);
    font-size: 0.875rem;
}
.fe-portfolio-templates-choose-template-page .template-selection-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ds-gray-200);
}
.fe-portfolio-templates-choose-template-page .selection-error {
    color: #ef4444;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    padding: 0.75rem;
    background: #fef2f2;
    border-radius: var(--ds-radius-sm);
    border-left: 4px solid #ef4444;
}
@media (max-width: 992px) {
.fe-portfolio-templates-choose-template-page .templates-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1.25rem;
}
.fe-portfolio-templates-choose-template-page .template-card {
    min-height: 360px;
}
.fe-portfolio-templates-choose-template-page .template-image-container {
    height: 220px;
        min-height: 220px;
        max-height: 220px;
}
.fe-portfolio-templates-choose-template-page .selection-title {
    font-size: 1.5rem;
}
}
@media (max-width: 768px) {
.fe-portfolio-templates-choose-template-page .template-selection-header {
    margin-bottom: 2rem;
        padding-bottom: 1.25rem;
}
.fe-portfolio-templates-choose-template-page .selection-title {
    font-size: 1.375rem;
}
.fe-portfolio-templates-choose-template-page .selection-subtitle {
    font-size: 0.9375rem;
}
.fe-portfolio-templates-choose-template-page .templates-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
}
.fe-portfolio-templates-choose-template-page .template-card {
    min-height: 340px;
}
.fe-portfolio-templates-choose-template-page .template-image-container {
    height: 200px;
        min-height: 200px;
        max-height: 200px;
}
.fe-portfolio-templates-choose-template-page .template-info {
    padding: 1.25rem;
        min-height: 140px;
}
.fe-portfolio-templates-choose-template-page .template-name {
    font-size: 1rem;
}
}
@media (max-width: 576px) {
.fe-portfolio-templates-choose-template-page .templates-grid {
    grid-template-columns: 1fr;
        gap: 1rem;
}
.fe-portfolio-templates-choose-template-page .template-card {
    min-height: 320px;
}
.fe-portfolio-templates-choose-template-page .template-image-container {
    height: 180px;
        min-height: 180px;
        max-height: 180px;
}
.fe-portfolio-templates-choose-template-page .selected-badge {
    top: 0.75rem;
        right: 0.75rem;
        padding: 0.4375rem 0.875rem;
        font-size: 0.75rem;
}
.fe-portfolio-templates-choose-template-page .template-info {
    padding: 1rem;
        min-height: 140px;
}
}








/* Portfolio template cssCondition styles are PHP-dynamic (template colors,
   preview-only conditions) — they live in each template's cssCondition.php */
/* Extracted from application/views/Frontend/portfolio/documents/popup.php */
.fe-portfolio-documents-popup-page .document-popup-container {
    width: 100%;
    padding: 0;
}
.fe-portfolio-documents-popup-page .document-popup-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
    min-height: 600px;
}
.fe-portfolio-documents-popup-page .document-media-section {
    position: relative;
}
.fe-portfolio-documents-popup-page .document-media-wrapper {
    position: sticky;
    top: 0;
    width: 100%;
    height: 650px;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: var(--ds-bg-light);
    border: 1px solid var(--ds-gray-200);
}
.fe-portfolio-documents-popup-page .document-media-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--ds-radius-lg);
}
.fe-portfolio-documents-popup-page .document-content-section {
    display: flex;
    align-items: flex-start;
}
.fe-portfolio-documents-popup-page .document-content-card {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--ds-gray-200);
    width: 100%;
}
.fe-portfolio-documents-popup-page .document-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--ds-gray-200);
}
.fe-portfolio-documents-popup-page .document-file-type-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: #ffffff;
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}
.fe-portfolio-documents-popup-page .document-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ds-secondary);
    margin: 0;
    line-height: 1.3;
}
.fe-portfolio-documents-popup-page .document-description {
    margin-bottom: 2rem;
}
.fe-portfolio-documents-popup-page .document-description-label, .fe-portfolio-documents-popup-page .document-competencies-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}
.fe-portfolio-documents-popup-page .document-description-content {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ds-gray-700);
    padding: 1rem;
    background: var(--ds-bg-light);
    border-radius: var(--ds-radius-md);
    border-left: 4px solid var(--ds-primary);
}
.fe-portfolio-documents-popup-page .document-competencies {
    padding-top: 1.5rem;
    border-top: 1px solid var(--ds-gray-200);
}
.fe-portfolio-documents-popup-page .document-competencies-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.fe-portfolio-documents-popup-page .document-competency-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
    border: 2px solid rgba(78, 177, 186, 0.2);
    border-radius: 50px;
    transition: var(--ds-transition);
}
.fe-portfolio-documents-popup-page .document-competency-badge:hover {
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.15), rgba(30, 78, 122, 0.15));
    border-color: var(--ds-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(78, 177, 186, 0.2);
}
.fe-portfolio-documents-popup-page .document-competency-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}
.fe-portfolio-documents-popup-page .document-competency-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ds-secondary);
}
@media (max-width: 992px) {
.fe-portfolio-documents-popup-page .document-popup-layout {
    grid-template-columns: 1fr;
        gap: 1.5rem;
}
.fe-portfolio-documents-popup-page .document-media-wrapper {
    height: 400px;
        position: relative;
}
.fe-portfolio-documents-popup-page .document-content-card {
    padding: 1.5rem;
}
}
@media (max-width: 768px) {
.fe-portfolio-documents-popup-page .document-popup-layout {
    gap: 1rem;
}
.fe-portfolio-documents-popup-page .document-media-wrapper {
    height: 300px;
}
.fe-portfolio-documents-popup-page .document-content-card {
    padding: 1.25rem;
        border-radius: var(--ds-radius-md);
}
.fe-portfolio-documents-popup-page .document-title {
    font-size: 1.5rem;
}
.fe-portfolio-documents-popup-page .document-description-content {
    font-size: 0.9375rem;
        padding: 0.875rem;
}
.fe-portfolio-documents-popup-page .document-competencies-grid {
    gap: 0.5rem;
}
.fe-portfolio-documents-popup-page .document-competency-badge {
    padding: 0.5rem 0.875rem;
}
.fe-portfolio-documents-popup-page .document-competency-icon {
    width: 20px;
        height: 20px;
}
.fe-portfolio-documents-popup-page .document-competency-name {
    font-size: 0.875rem;
}
}

/* Extracted from application/views/Frontend/portfolio/documents/formFields.php */
.fe-portfolio-documents-formfields-page .competency-selection-card {
    background: #ffffff;
	border: 2px solid var(--ds-gray-200);
	border-radius: var(--ds-radius-md);
	padding: 1rem;
	transition: var(--ds-transition-smooth);
	cursor: pointer;
	height: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}
.fe-portfolio-documents-formfields-page .competency-selection-card:hover {
    border-color: var(--ds-primary);
	box-shadow: 0 4px 12px rgba(78, 177, 186, 0.15);
	transform: translateY(-2px);
}
.fe-portfolio-documents-formfields-page .competency-selection-card.selected {
    border-color: var(--ds-primary);
	background: linear-gradient(135deg, rgb(0 180 197 / 51%), rgba(30, 78, 122, 0.05));
	box-shadow: 0 4px 12px rgba(78, 177, 186, 0.2);
}
.fe-portfolio-documents-formfields-page .competency-selection-card input[type="radio"] {
    width: 20px;
	height: 20px;
	margin-right: 0.75rem;
	cursor: pointer;
	accent-color: var(--ds-primary);
	flex-shrink: 0;
}
.fe-portfolio-documents-formfields-page .competency-selection-label {
    display: flex;
	align-items: center;
	width: 100%;
	margin: 0;
	cursor: pointer;
}
.fe-portfolio-documents-formfields-page .competency-selection-text {
    font-size: 0.9375rem;
	font-weight: 500;
	color: var(--ds-gray-800);
	line-height: 1.4;
	flex: 1;
}
.fe-portfolio-documents-formfields-page .competency-selection-card.selected .competency-selection-text {
    color: var(--ds-secondary);
	font-weight: 600;
}
.fe-portfolio-documents-formfields-page .competency-info-icon {
    color: var(--ds-primary);
	margin-left: 0.5rem;
	font-size: 0.875rem;
	flex-shrink: 0;
}

/* Extracted from application/views/Frontend/portfolio/pages/workphilosophy-sec.php */
.fe-portfolio-pages-workphilosophy-sec-page .work-philosophy-display-section {
    margin-bottom: 2rem;
}
.fe-portfolio-pages-workphilosophy-sec-page .work-philosophy-container {
    width: 100%;
}
.fe-portfolio-pages-workphilosophy-sec-page .work-philosophy-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 2rem;
    align-items: stretch;
}
.fe-portfolio-pages-workphilosophy-sec-page .philosophy-image-section {
    position: relative;
}
.fe-portfolio-pages-workphilosophy-sec-page .image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    max-height: 500px;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-bg-light);
}
.fe-portfolio-pages-workphilosophy-sec-page .image-wrapper.has-image {
    background: #ffffff;
    padding: 1.5rem;
}
.fe-portfolio-pages-workphilosophy-sec-page .background-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
}
.fe-portfolio-pages-workphilosophy-sec-page .background-pattern img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fe-portfolio-pages-workphilosophy-sec-page .main-image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.fe-portfolio-pages-workphilosophy-sec-page .main-image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 450px;
    object-fit: contain;
    object-position: center;
    border-radius: var(--ds-radius-md);
    display: block;
}
.fe-portfolio-pages-workphilosophy-sec-page .philosophy-content-section {
    display: flex;
    align-items: flex-start;
}
.fe-portfolio-pages-workphilosophy-sec-page .content-card {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--ds-gray-200);
    width: 100%;
    position: relative;
}
.fe-portfolio-pages-workphilosophy-sec-page .ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
    border-radius: var(--ds-radius-sm);
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-secondary);
}
.fe-portfolio-pages-workphilosophy-sec-page .ai-badge img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.fe-portfolio-pages-workphilosophy-sec-page .philosophy-text {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ds-gray-700);
    margin-bottom: 1.5rem;
    font-weight: 400;
}
.fe-portfolio-pages-workphilosophy-sec-page .philosophy-text p {
    margin-bottom: 1rem;
}
.fe-portfolio-pages-workphilosophy-sec-page .philosophy-text p:last-child {
    margin-bottom: 0;
}
.fe-portfolio-pages-workphilosophy-sec-page .philosophy-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ds-gray-200);
}
.fe-portfolio-pages-workphilosophy-sec-page .philosophy-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: var(--ds-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fe-portfolio-pages-workphilosophy-sec-page .philosophy-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@media (max-width: 992px) {
.fe-portfolio-pages-workphilosophy-sec-page .work-philosophy-layout {
    grid-template-columns: 1fr;
        gap: 1.5rem;
}
.fe-portfolio-pages-workphilosophy-sec-page .image-wrapper {
    min-height: 300px;
        max-height: 350px;
}
.fe-portfolio-pages-workphilosophy-sec-page .image-wrapper.has-image {
    padding: 1.25rem;
}
.fe-portfolio-pages-workphilosophy-sec-page .main-image img {
    max-height: 300px;
}
.fe-portfolio-pages-workphilosophy-sec-page .content-card {
    padding: 1.5rem;
}
}
@media (max-width: 768px) {
.fe-portfolio-pages-workphilosophy-sec-page .work-philosophy-layout {
    gap: 1rem;
}
.fe-portfolio-pages-workphilosophy-sec-page .image-wrapper {
    min-height: 250px;
        max-height: 300px;
}
.fe-portfolio-pages-workphilosophy-sec-page .image-wrapper.has-image {
    padding: 1rem;
}
.fe-portfolio-pages-workphilosophy-sec-page .main-image img {
    max-height: 250px;
}
.fe-portfolio-pages-workphilosophy-sec-page .content-card {
    padding: 1.25rem;
        border-radius: var(--ds-radius-md);
}
.fe-portfolio-pages-workphilosophy-sec-page .philosophy-text {
    font-size: 1rem;
        line-height: 1.65;
}
.fe-portfolio-pages-workphilosophy-sec-page .philosophy-categories {
    gap: 0.5rem;
}
.fe-portfolio-pages-workphilosophy-sec-page .philosophy-badge {
    padding: 0.4375rem 0.875rem;
        font-size: 0.8125rem;
}
}
@media (max-width: 576px) {
.fe-portfolio-pages-workphilosophy-sec-page .philosophy-text {
    font-size: 0.9375rem;
}
.fe-portfolio-pages-workphilosophy-sec-page .ai-badge {
    font-size: 0.75rem;
        padding: 0.4375rem 0.75rem;
}
.fe-portfolio-pages-workphilosophy-sec-page .ai-badge img {
    width: 18px;
        height: 18px;
}
}
.fe-portfolio-pages-workphilosophy-sec-page .work-philosophy-container .philosophy-content-section {
    max-width: 900px;
}
.fe-portfolio-pages-workphilosophy-sec-page .work-philosophy-layout .philosophy-content-section {
    max-width: 100%;
}

/* Extracted from application/views/Frontend/portfolio/pages/experiences-sec.php */
.fe-portfolio-pages-experiences-sec-page .experienceBox {
    position: relative;
    overflow: hidden;
    border-radius: var(--ds-radius-md);
    background: #ffffff;
    border: 2px solid var(--ds-gray-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: var(--ds-transition-smooth);
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.fe-portfolio-pages-experiences-sec-page .experienceBox:hover {
    border-color: var(--ds-primary);
    box-shadow: 0 4px 16px rgba(78, 177, 186, 0.15);
    transform: translateY(-2px);
}
.fe-portfolio-pages-experiences-sec-page .experienceBox:hover .twoBtn {
    transform: rotateX(0deg) !important;
    opacity: 1 !important;
}
.fe-portfolio-pages-experiences-sec-page .experienceBox .twoBtn {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 0 !important;
    transform: rotateX(90deg) !important;
    transition: var(--ds-transition-smooth) !important;
    flex-direction: row !important;
    height: 100% !important;
    gap: 0.75rem !important;
    z-index: 10 !important;
    opacity: 0 !important;
}
.fe-portfolio-pages-experiences-sec-page .experienceBox .twoBtn::after {
    top: 0 !important;
    z-index: -1 !important;
    position: absolute !important;
    content: '' !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    transition: 0.3s ease !important;
    border-radius: 12px !important;
}
.fe-portfolio-pages-experiences-sec-page .experienceBox .groupBtn {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 11 !important;
    position: relative !important;
}
.fe-portfolio-pages-experiences-sec-page .experienceBox .editBtn, .fe-portfolio-pages-experiences-sec-page .experienceBox .deleteBtn, .fe-portfolio-pages-experiences-sec-page .experienceBox .viewBtn {
    min-width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    transition: var(--ds-transition-smooth) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    text-decoration: none !important;
    padding: 0.75rem !important;
}
.fe-portfolio-pages-experiences-sec-page .experienceBox .viewBtn {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
}
.fe-portfolio-pages-experiences-sec-page .experienceBox .viewBtn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4) !important;
    color: white !important;
}
.fe-portfolio-pages-experiences-sec-page .experienceBox .editBtn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}
.fe-portfolio-pages-experiences-sec-page .experienceBox .editBtn:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
    color: white !important;
}
.fe-portfolio-pages-experiences-sec-page .experienceBox .deleteBtn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
}
.fe-portfolio-pages-experiences-sec-page .experienceBox .deleteBtn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4) !important;
    color: white !important;
}
.fe-portfolio-pages-experiences-sec-page .experience-thumbnail-top {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: var(--ds-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid var(--ds-gray-200);
}
.fe-portfolio-pages-experiences-sec-page .experience-thumbnail-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fe-portfolio-pages-experiences-sec-page .experience-thumbnail-top .experience-thumbnail-placeholder {
    color: var(--ds-gray-400);
    font-size: 3rem;
}
.fe-portfolio-pages-experiences-sec-page .experience-content-wrapper-vertical {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
.fe-portfolio-pages-experiences-sec-page .experience-content-wrapper {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
}
.fe-portfolio-pages-experiences-sec-page .experience-thumbnail {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    border: 2px solid var(--ds-gray-200);
    background: var(--ds-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fe-portfolio-pages-experiences-sec-page .experience-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fe-portfolio-pages-experiences-sec-page .experience-thumbnail-placeholder {
    color: var(--ds-gray-400);
    font-size: 2rem;
}
.fe-portfolio-pages-experiences-sec-page .experience-details {
    flex: 1;
}
.fe-portfolio-pages-experiences-sec-page .experience-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ds-secondary);
    margin-bottom: 0.625rem;
    line-height: 1.4;
    margin-top: 0;
}
.fe-portfolio-pages-experiences-sec-page .experience-content-wrapper-vertical .experience-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ds-secondary);
    margin-bottom: 0.625rem;
    line-height: 1.4;
    margin-top: 0;
}
.fe-portfolio-pages-experiences-sec-page .experience-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
    display: block;
}
.fe-portfolio-pages-experiences-sec-page .experience-content-wrapper-vertical .experience-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
}
.fe-portfolio-pages-experiences-sec-page .experienceBox[data-manage-mode="true"] .experience-content-wrapper-vertical .experience-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fe-portfolio-pages-experiences-sec-page .experiences-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--ds-gray-500);
}
.fe-portfolio-pages-experiences-sec-page .experiences-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
    color: var(--ds-gray-400);
}
.fe-portfolio-pages-experiences-sec-page .experiences-empty h5 {
    margin: 0 0 0.75rem 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--ds-gray-500);
}
.fe-portfolio-pages-experiences-sec-page .experiences-empty p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ds-gray-400);
}
@media (max-width: 768px) {
.fe-portfolio-pages-experiences-sec-page .experience-thumbnail-top {
    height: 180px;
}
.fe-portfolio-pages-experiences-sec-page .experience-content-wrapper {
    flex-direction: column;
        gap: 1rem;
}
.fe-portfolio-pages-experiences-sec-page .experience-thumbnail {
    width: 100%;
        height: 200px;
}
.fe-portfolio-pages-experiences-sec-page .col-md-3.col-sm-6 {
    flex: 0 0 50%;
        max-width: 50%;
}
}
@media (max-width: 576px) {
.fe-portfolio-pages-experiences-sec-page .col-md-3.col-sm-6 {
    flex: 0 0 100%;
        max-width: 100%;
}
}
.fe-portfolio-pages-experiences-sec-page .experience-modal-dialog {
    max-width: 95%;
    margin: 1.5rem auto;
}
.fe-portfolio-pages-experiences-sec-page .experience-modal-content {
    border-radius: var(--ds-radius-xl);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.fe-portfolio-pages-experiences-sec-page .experience-modal-body {
    padding: 2rem;
    position: relative;
}
.fe-portfolio-pages-experiences-sec-page .experience-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: var(--ds-transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: none;
    font-size: 1.5rem;
    color: var(--ds-gray-700);
    cursor: pointer;
    line-height: 1;
}
.fe-portfolio-pages-experiences-sec-page .experience-close-btn:hover {
    opacity: 1;
    background: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.fe-portfolio-pages-experiences-sec-page .experience-popup-container {
    width: 100%;
    padding: 0;
}
.fe-portfolio-pages-experiences-sec-page .experience-popup-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
    min-height: 600px;
}
.fe-portfolio-pages-experiences-sec-page .experience-media-section {
    position: relative;
}
.fe-portfolio-pages-experiences-sec-page .experience-media-section .media-wrapper {
    position: sticky;
    top: 0;
    width: 100%;
    height: 600px;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: var(--ds-bg-light);
    border: 1px solid var(--ds-gray-200);
}
.fe-portfolio-pages-experiences-sec-page .experience-media-section .image-viewer {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 1rem;
}
.fe-portfolio-pages-experiences-sec-page .experience-media-section .image-viewer img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--ds-radius-md);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.fe-portfolio-pages-experiences-sec-page .experience-modal-thumbnail-placeholder {
    color: var(--ds-gray-400);
    font-size: 4rem;
}
.fe-portfolio-pages-experiences-sec-page .experience-content-section {
    display: flex;
    align-items: flex-start;
}
.fe-portfolio-pages-experiences-sec-page .experience-content-section .content-card {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--ds-gray-200);
    width: 100%;
}
.fe-portfolio-pages-experiences-sec-page .experience-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--ds-gray-200);
}
.fe-portfolio-pages-experiences-sec-page .experience-header .file-type-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: #ffffff;
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}
.fe-portfolio-pages-experiences-sec-page .experience-header .experience-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ds-secondary);
    margin: 0;
    line-height: 1.3;
}
.fe-portfolio-pages-experiences-sec-page .experience-description {
    margin-bottom: 2rem;
}
.fe-portfolio-pages-experiences-sec-page .experience-description .description-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}
.fe-portfolio-pages-experiences-sec-page .experience-description .description-content {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ds-gray-700);
    padding: 1rem;
    background: var(--ds-bg-light);
    border-radius: var(--ds-radius-md);
    border-left: 4px solid var(--ds-primary);
    white-space: pre-wrap;
}
@media (max-width: 992px) {
.fe-portfolio-pages-experiences-sec-page .experience-popup-layout {
    grid-template-columns: 1fr;
        gap: 1.5rem;
}
.fe-portfolio-pages-experiences-sec-page .experience-media-section .media-wrapper {
    height: 400px;
        position: relative;
}
.fe-portfolio-pages-experiences-sec-page .experience-content-section .content-card {
    padding: 1.5rem;
}
}
@media (max-width: 768px) {
.fe-portfolio-pages-experiences-sec-page .experience-modal-dialog {
    max-width: 100%;
        margin: 0;
}
.fe-portfolio-pages-experiences-sec-page .experience-modal-body {
    padding: 1rem;
}
.fe-portfolio-pages-experiences-sec-page .experience-popup-layout {
    gap: 1rem;
}
.fe-portfolio-pages-experiences-sec-page .experience-media-section .media-wrapper {
    height: 300px;
}
.fe-portfolio-pages-experiences-sec-page .experience-content-section .content-card {
    padding: 1.25rem;
        border-radius: var(--ds-radius-md);
}
.fe-portfolio-pages-experiences-sec-page .experience-header .experience-title {
    font-size: 1.5rem;
}
.fe-portfolio-pages-experiences-sec-page .experience-description .description-content {
    font-size: 0.9375rem;
        padding: 0.875rem;
}
}
.fe-portfolio-pages-experiences-sec-page .experience-modal .modal-content {
    border-radius: var(--ds-radius-lg);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.fe-portfolio-pages-experiences-sec-page .experience-modal .modal-header {
    border-bottom: 2px solid var(--ds-gray-200);
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--ds-secondary), #2c5f8a);
    color: white;
    border-radius: 16px 16px 0 0;
}
.fe-portfolio-pages-experiences-sec-page .experience-modal .modal-header .close {
    color: white;
    opacity: 0.9;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    text-shadow: none;
}
.fe-portfolio-pages-experiences-sec-page .experience-modal .modal-header .close:hover {
    opacity: 1;
    color: white;
}
.fe-portfolio-pages-experiences-sec-page .experience-modal .modal-body {
    padding: 2rem;
}
.fe-portfolio-pages-experiences-sec-page .experience-modal-content {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.fe-portfolio-pages-experiences-sec-page .experience-modal-thumbnail {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    border: 2px solid var(--ds-gray-200);
    background: var(--ds-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fe-portfolio-pages-experiences-sec-page .experience-modal-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fe-portfolio-pages-experiences-sec-page .experience-modal-thumbnail-placeholder {
    color: var(--ds-gray-400);
    font-size: 4rem;
}
.fe-portfolio-pages-experiences-sec-page .experience-modal-details {
    flex: 1;
}
.fe-portfolio-pages-experiences-sec-page .experience-modal-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--ds-secondary);
    margin-bottom: 1rem;
    line-height: 1.4;
}
.fe-portfolio-pages-experiences-sec-page .experience-modal-text {
    font-size: 1rem;
    line-height: 1.8;
    color: #475569;
    white-space: pre-wrap;
}
@media (max-width: 768px) {
.fe-portfolio-pages-experiences-sec-page .experience-modal-content {
    flex-direction: column;
}
.fe-portfolio-pages-experiences-sec-page .experience-modal-thumbnail {
    width: 100%;
        height: 250px;
}
}

/* Extracted from application/views/Frontend/portfolio/pages/community-engagements-sec.php */
.fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox {
    position: relative;
    overflow: hidden;
    border-radius: var(--ds-radius-md);
    background: #ffffff;
    border: 2px solid var(--ds-gray-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: var(--ds-transition-smooth);
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox:hover {
    border-color: var(--ds-primary);
    box-shadow: 0 4px 16px rgba(78, 177, 186, 0.15);
    transform: translateY(-2px);
}
.fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox:hover .twoBtn {
    transform: rotateX(0deg) !important;
    opacity: 1 !important;
}
.fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox .twoBtn {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 0 !important;
    transform: rotateX(90deg) !important;
    transition: var(--ds-transition-smooth) !important;
    flex-direction: row !important;
    height: 100% !important;
    gap: 0.75rem !important;
    z-index: 10 !important;
    opacity: 0 !important;
}
.fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox .twoBtn::after {
    top: 0 !important;
    z-index: -1 !important;
    position: absolute !important;
    content: '' !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    transition: 0.3s ease !important;
    border-radius: 12px !important;
}
.fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox .groupBtn {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 11 !important;
    position: relative !important;
}
.fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox .editBtn, .fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox .deleteBtn, .fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox .viewBtn {
    min-width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    transition: var(--ds-transition-smooth) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    text-decoration: none !important;
    padding: 0.75rem !important;
}
.fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox .editBtn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}
.fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox .editBtn:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
    color: white !important;
}
.fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox .deleteBtn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
}
.fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox .deleteBtn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4) !important;
    color: white !important;
}
.fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox .viewBtn {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
}
.fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox .viewBtn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4) !important;
    color: white !important;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal .modal-content {
    border-radius: var(--ds-radius-lg);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal .modal-header {
    border-bottom: 2px solid var(--ds-gray-200);
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--ds-secondary), #2c5f8a);
    color: white;
    border-radius: 16px 16px 0 0;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal .modal-header .close {
    color: white;
    opacity: 0.9;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    text-shadow: none;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal .modal-header .close:hover {
    opacity: 1;
    color: white;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal .modal-body {
    padding: 2rem;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal-content {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal-thumbnail {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    border: 2px solid var(--ds-gray-200);
    background: var(--ds-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal-thumbnail-placeholder {
    color: var(--ds-gray-400);
    font-size: 4rem;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal-details {
    flex: 1;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal-label {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--ds-secondary);
    margin-bottom: 1rem;
    line-height: 1.4;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal-text {
    font-size: 1rem;
    line-height: 1.8;
    color: #475569;
    white-space: pre-wrap;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-thumbnail-top {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: var(--ds-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid var(--ds-gray-200);
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-thumbnail-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-thumbnail-top .community-engagement-thumbnail-placeholder {
    color: var(--ds-gray-400);
    font-size: 3rem;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-content-wrapper-vertical {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-content-wrapper {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    flex: 1;
    overflow: hidden;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-thumbnail {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    border: 2px solid var(--ds-gray-200);
    background: var(--ds-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-thumbnail-placeholder {
    color: var(--ds-gray-400);
    font-size: 2rem;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-label {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ds-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.4;
    margin-top: 0;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-content-wrapper-vertical .community-engagement-label {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ds-secondary);
    margin-bottom: 0.625rem;
    line-height: 1.4;
    margin-top: 0;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #475569;
    margin: 0;
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-content-wrapper-vertical .community-engagement-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
}
.fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox[data-manage-mode="true"] .community-engagement-content-wrapper-vertical .community-engagement-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagements-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--ds-gray-500);
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagements-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
    color: var(--ds-gray-400);
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagements-empty h5 {
    margin: 0 0 0.75rem 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--ds-gray-500);
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagements-empty p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ds-gray-400);
}
.fe-portfolio-pages-community-engagements-sec-page .modal-title {
    color: #fff !important;
	margin-bottom: 0 !important;
}
@media (max-width: 768px) {
.fe-portfolio-pages-community-engagements-sec-page .communityEngagementBox {
    height: auto;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-thumbnail-top {
    height: 180px;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-content-wrapper {
    flex-direction: column;
        gap: 1rem;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-thumbnail {
    width: 100%;
        height: 200px;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal-content {
    flex-direction: column;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal-thumbnail {
    width: 100%;
        height: 250px;
}
.fe-portfolio-pages-community-engagements-sec-page .col-md-3.col-sm-6 {
    flex: 0 0 50%;
        max-width: 50%;
}
}
@media (max-width: 576px) {
.fe-portfolio-pages-community-engagements-sec-page .col-md-3.col-sm-6 {
    flex: 0 0 100%;
        max-width: 100%;
}
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal-dialog {
    max-width: 95%;
    margin: 1.5rem auto;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal-content {
    border-radius: var(--ds-radius-xl);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal-body {
    padding: 2rem;
    position: relative;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: var(--ds-transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: none;
    font-size: 1.5rem;
    color: var(--ds-gray-700);
    cursor: pointer;
    line-height: 1;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-close-btn:hover {
    opacity: 1;
    background: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-popup-container {
    width: 100%;
    padding: 0;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-popup-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
    min-height: 600px;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-media-section {
    position: relative;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-media-section .media-wrapper {
    position: sticky;
    top: 0;
    width: 100%;
    height: 600px;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: var(--ds-bg-light);
    border: 1px solid var(--ds-gray-200);
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-media-section .image-viewer {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 1rem;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-media-section .image-viewer img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--ds-radius-md);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal-thumbnail-placeholder {
    color: var(--ds-gray-400);
    font-size: 4rem;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-content-section {
    display: flex;
    align-items: flex-start;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-content-section .content-card {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--ds-gray-200);
    width: 100%;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--ds-gray-200);
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-header .file-type-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: #ffffff;
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-header .community-engagement-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ds-secondary);
    margin: 0;
    line-height: 1.3;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-description {
    margin-bottom: 2rem;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-description .description-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-description .description-content {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ds-gray-700);
    padding: 1rem;
    background: var(--ds-bg-light);
    border-radius: var(--ds-radius-md);
    border-left: 4px solid var(--ds-primary);
    white-space: pre-wrap;
}
@media (max-width: 992px) {
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-popup-layout {
    grid-template-columns: 1fr;
        gap: 1.5rem;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-media-section .media-wrapper {
    height: 400px;
        position: relative;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-content-section .content-card {
    padding: 1.5rem;
}
}
@media (max-width: 768px) {
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal-dialog {
    max-width: 100%;
        margin: 0;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-modal-body {
    padding: 1rem;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-popup-layout {
    gap: 1rem;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-media-section .media-wrapper {
    height: 300px;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-content-section .content-card {
    padding: 1.25rem;
        border-radius: var(--ds-radius-md);
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-header .community-engagement-title {
    font-size: 1.5rem;
}
.fe-portfolio-pages-community-engagements-sec-page .community-engagement-description .description-content {
    font-size: 0.9375rem;
        padding: 0.875rem;
}
}

/* Extracted from application/views/Frontend/portfolio/pages/professional-interests-sec.php */
.fe-portfolio-pages-professional-interests-sec-page .professionalInterestBox {
    position: relative;
    overflow: hidden;
    border-radius: var(--ds-radius-md);
    background: #ffffff;
    border: 2px solid var(--ds-gray-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: var(--ds-transition-smooth);
    margin-bottom: 1.5rem;
}
.fe-portfolio-pages-professional-interests-sec-page .professionalInterestBox:hover {
    border-color: var(--ds-primary);
    box-shadow: 0 4px 16px rgba(78, 177, 186, 0.15);
    transform: translateY(-2px);
}
.fe-portfolio-pages-professional-interests-sec-page .professionalInterestBox:hover .twoBtn {
    transform: rotateX(0deg) !important;
    opacity: 1 !important;
}
.fe-portfolio-pages-professional-interests-sec-page .professionalInterestBox .twoBtn {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 0 !important;
    transform: rotateX(90deg) !important;
    transition: var(--ds-transition-smooth) !important;
    flex-direction: row !important;
    height: 100% !important;
    gap: 0.75rem !important;
    z-index: 10 !important;
    opacity: 0 !important;
}
.fe-portfolio-pages-professional-interests-sec-page .professionalInterestBox .twoBtn::after {
    top: 0 !important;
    z-index: -1 !important;
    position: absolute !important;
    content: '' !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    transition: 0.3s ease !important;
    border-radius: 12px !important;
}
.fe-portfolio-pages-professional-interests-sec-page .professionalInterestBox .groupBtn {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 11 !important;
    position: relative !important;
}
.fe-portfolio-pages-professional-interests-sec-page .professionalInterestBox .editBtn, .fe-portfolio-pages-professional-interests-sec-page .professionalInterestBox .deleteBtn {
    min-width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    transition: var(--ds-transition-smooth) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    text-decoration: none !important;
    padding: 0.75rem !important;
}
.fe-portfolio-pages-professional-interests-sec-page .professionalInterestBox .editBtn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}
.fe-portfolio-pages-professional-interests-sec-page .professionalInterestBox .editBtn:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
    color: white !important;
}
.fe-portfolio-pages-professional-interests-sec-page .professionalInterestBox .deleteBtn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
}
.fe-portfolio-pages-professional-interests-sec-page .professionalInterestBox .deleteBtn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4) !important;
    color: white !important;
}
.fe-portfolio-pages-professional-interests-sec-page .professional-interest-content-wrapper {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fe-portfolio-pages-professional-interests-sec-page .modal-title {
    color: black !important;
}
.fe-portfolio-pages-professional-interests-sec-page .professional-interest-text {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--ds-secondary);
    margin: 0;
    line-height: 1.5;
}
.fe-portfolio-pages-professional-interests-sec-page .professional-interests-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--ds-gray-500);
}
.fe-portfolio-pages-professional-interests-sec-page .professional-interests-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
    color: var(--ds-gray-400);
}
.fe-portfolio-pages-professional-interests-sec-page .professional-interests-empty h5 {
    margin: 0 0 0.75rem 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--ds-gray-500);
}
.fe-portfolio-pages-professional-interests-sec-page .professional-interests-empty p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ds-gray-400);
}
@media (max-width: 768px) {
.fe-portfolio-pages-professional-interests-sec-page .professional-interest-content-wrapper {
    padding: 1rem;
}
}

/* Extracted from application/views/Frontend/portfolio/pages/wordle-sec.php */
.fe-portfolio-pages-wordle-sec-page .trait-cloud-section {
    width: 100%;
    margin-bottom: 2rem;
}
.fe-portfolio-pages-wordle-sec-page .trait-cloud-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
}
.fe-portfolio-pages-wordle-sec-page .trait-content-section {
    display: flex;
    align-items: flex-start;
}
.fe-portfolio-pages-wordle-sec-page .content-card {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--ds-gray-200);
    width: 100%;
}
.fe-portfolio-pages-wordle-sec-page .trait-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--ds-gray-200);
}
.fe-portfolio-pages-wordle-sec-page .trait-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ds-secondary);
    margin: 0 0 1rem 0;
    line-height: 1.3;
}
.fe-portfolio-pages-wordle-sec-page .ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-secondary);
}
.fe-portfolio-pages-wordle-sec-page .ai-badge img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.fe-portfolio-pages-wordle-sec-page .trait-description {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ds-gray-700);
    margin-bottom: 1.5rem;
}
.fe-portfolio-pages-wordle-sec-page .trait-description p {
    margin-bottom: 1rem;
}
.fe-portfolio-pages-wordle-sec-page .trait-description p:last-child {
    margin-bottom: 0;
}
.fe-portfolio-pages-wordle-sec-page .trait-color-preview {
    padding-top: 1.5rem;
    border-top: 1px solid var(--ds-gray-200);
}
.fe-portfolio-pages-wordle-sec-page .color-swatches {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.fe-portfolio-pages-wordle-sec-page .color-swatch {
    width: 48px;
    height: 48px;
    border-radius: var(--ds-radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--ds-gray-200);
    transition: transform 0.2s ease;
}
.fe-portfolio-pages-wordle-sec-page .color-swatch:hover {
    transform: scale(1.1);
}
.fe-portfolio-pages-wordle-sec-page .trait-visual-section {
    position: relative;
    width: 100%;
    min-width: 0;
}
.fe-portfolio-pages-wordle-sec-page .visual-wrapper {
    position: sticky;
    top: 0;
    width: 100%;
    height: 550px;
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, var(--ds-bg-light), #ffffff);
    border: 1px solid var(--ds-gray-200);
    box-sizing: border-box;
    overflow: hidden;
}
.fe-portfolio-pages-wordle-sec-page .word-cloud-container {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 60px 80px 80px 80px;
    overflow: hidden;
    border-radius: var(--ds-radius-lg);
    box-sizing: border-box;
}
.fe-portfolio-pages-wordle-sec-page .word-cloud-canvas {
    display: block;
    margin: 0 auto;
}
.fe-portfolio-pages-wordle-sec-page .trait-image-container {
    width: 100%;
    height: 550px;
    background-color: transparent;
    position: relative;
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, var(--ds-bg-light), #ffffff);
    border: 1px solid var(--ds-gray-200);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
.fe-portfolio-pages-wordle-sec-page .trait-image {
    width: 100%;
    height: 550px;
    object-fit: contain;
    object-position: center center;
    display: block;
    background-color: transparent;
    max-width: 100%;
    max-height: 100%;
}
@media (max-width: 992px) {
.fe-portfolio-pages-wordle-sec-page .trait-cloud-layout {
    grid-template-columns: 1fr;
        gap: 1.5rem;
}
.fe-portfolio-pages-wordle-sec-page .visual-wrapper {
    height: 400px;
        position: relative;
}
.fe-portfolio-pages-wordle-sec-page .trait-image-container {
    height: 400px;
}
.fe-portfolio-pages-wordle-sec-page .trait-image {
    height: 400px;
}
.fe-portfolio-pages-wordle-sec-page .content-card {
    padding: 1.5rem;
}
}
@media (max-width: 768px) {
.fe-portfolio-pages-wordle-sec-page .trait-cloud-layout {
    gap: 1rem;
}
.fe-portfolio-pages-wordle-sec-page .visual-wrapper {
    height: 350px;
}
.fe-portfolio-pages-wordle-sec-page .trait-image-container {
    height: 350px;
}
.fe-portfolio-pages-wordle-sec-page .trait-image {
    height: 350px;
}
.fe-portfolio-pages-wordle-sec-page .content-card {
    padding: 1.25rem;
        border-radius: var(--ds-radius-md);
}
.fe-portfolio-pages-wordle-sec-page .trait-title {
    font-size: 1.5rem;
}
.fe-portfolio-pages-wordle-sec-page .trait-description {
    font-size: 0.9375rem;
        line-height: 1.65;
}
.fe-portfolio-pages-wordle-sec-page .word-cloud-container {
    padding: 50px 70px 70px 70px;
}
.fe-portfolio-pages-wordle-sec-page .color-swatch {
    width: 40px;
        height: 40px;
}
}

/* Extracted from application/views/Frontend/portfolio/pages/competencies-sec.php */
.fe-portfolio-pages-competencies-sec-page .plpr {
    padding-left:8px; padding-right:8px;
}
.fe-portfolio-pages-competencies-sec-page .cat_sec {
    box-shadow: 0px 3px 10px rgb(0 0 0 / 0.2);padding: 0;margin: 10px 2px; background-color:#f5f5f5; border-radius:5px;
}
.fe-portfolio-pages-competencies-sec-page .catTitle {
}
.fe-portfolio-pages-competencies-sec-page .keyArea p {
    margin-bottom:5px; font-size:16px; margin-left:10px;
}
.fe-portfolio-pages-competencies-sec-page .keyArea h4 {
    font-size:20px; margin-bottom:20px; text-transform:uppercase;
}
.fe-portfolio-pages-competencies-sec-page .clegend {
    padding:6px; margin-right:5px; margin-bottom:0;
}
.fe-portfolio-pages-competencies-sec-page .topTitle {
    color:#333;
}
.fe-portfolio-pages-competencies-sec-page .competencies-wrapper {
    margin-top: 1.5rem;
}
.fe-portfolio-pages-competencies-sec-page .competencies-title-section {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--ds-gray-200);
}
.fe-portfolio-pages-competencies-sec-page .competencies-title-section h5 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ds-gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.fe-portfolio-pages-competencies-sec-page .competencies-title-section .fa-info-circle {
    color: var(--ds-gray-500);
    cursor: pointer;
    font-size: 1.1rem;
    transition: color 0.2s ease;
}
.fe-portfolio-pages-competencies-sec-page .competencies-title-section .fa-info-circle:hover {
    color: var(--ds-gray-600);
}
.fe-portfolio-pages-competencies-sec-page .competencies-chart-card {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--ds-gray-200);
    transition: var(--ds-transition-slow);
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.fe-portfolio-pages-competencies-sec-page .competencies-chart-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.fe-portfolio-pages-competencies-sec-page .competencies-chart-card canvas {
    height: 450px !important;
    max-height: none !important;
}
.fe-portfolio-pages-competencies-sec-page .circular-chart-card {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--ds-gray-200);
    transition: var(--ds-transition-slow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}
.fe-portfolio-pages-competencies-sec-page .circular-chart-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.fe-portfolio-pages-competencies-sec-page .circular-chart-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ds-gray-800);
    margin-bottom: 1.5rem;
    text-align: center;
}
.fe-portfolio-pages-competencies-sec-page .circular-chart-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}
.fe-portfolio-pages-competencies-sec-page .circular-chart-container canvas {
    max-width: 100%;
    max-height: 100%;
}
.fe-portfolio-pages-competencies-sec-page .circular-chart-score {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}
.fe-portfolio-pages-competencies-sec-page .circular-chart-score-value {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, rgb(78, 177, 186), rgb(30, 78, 122));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #667eea;
    margin-bottom: 0.5rem;
}
.fe-portfolio-pages-competencies-sec-page .circular-chart-score-label {
    font-size: 0.9rem;
    color: var(--ds-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.fe-portfolio-pages-competencies-sec-page .circular-chart-text {
    margin-top: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ds-gray-700);
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ds-gray-200);
}
@media (max-width: 768px) {
.fe-portfolio-pages-competencies-sec-page .circular-chart-card {
    padding: 1.5rem;
        min-height: auto;
        margin-bottom: 1.5rem;
}
.fe-portfolio-pages-competencies-sec-page .circular-chart-container {
    width: 250px;
        height: 250px;
}
.fe-portfolio-pages-competencies-sec-page .circular-chart-score-value {
    font-size: 2.5rem;
}
}
.fe-portfolio-pages-competencies-sec-page .competencies-score-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--ds-gray-800);
    position: relative;
    transition: var(--ds-transition-slow);
    padding: 19px;
}
.fe-portfolio-pages-competencies-sec-page .competencies-score-content {
    position: relative;
    z-index: 1;
}
.fe-portfolio-pages-competencies-sec-page .competencies-score-large {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, rgb(78, 177, 186), rgb(30, 78, 122));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    color: #667eea;
}
.fe-portfolio-pages-competencies-sec-page .competencies-score-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--ds-gray-700);
    margin-bottom: 0;
}
.fe-portfolio-pages-competencies-sec-page .competencies-dial-container {
    display: none !important;
    visibility: hidden;
}
.fe-portfolio-pages-competencies-sec-page .competencies-summary-card {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--ds-gray-200);
    margin-top: 2rem;
    transition: var(--ds-transition-slow);
}
.fe-portfolio-pages-competencies-sec-page .competencies-summary-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}
.fe-portfolio-pages-competencies-sec-page .competencies-summary-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ds-gray-800);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--ds-gray-200);
    text-transform: none;
    letter-spacing: 0;
}
.fe-portfolio-pages-competencies-sec-page .sumContent {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ds-gray-700);
}
.fe-portfolio-pages-competencies-sec-page .sumContent p {
    margin-bottom: 1rem;
}
.fe-portfolio-pages-competencies-sec-page .sumContent p:last-child {
    margin-bottom: 0;
}
@media (max-width: 768px) {
.fe-portfolio-pages-competencies-sec-page .competencies-chart-card, .fe-portfolio-pages-competencies-sec-page .competencies-score-card, .fe-portfolio-pages-competencies-sec-page .competencies-summary-card {
    padding: 1.5rem;
        margin-bottom: 0;
        min-height: auto;
}
.fe-portfolio-pages-competencies-sec-page .competencies-chart-card canvas {
    height: 350px !important;
}
.fe-portfolio-pages-competencies-sec-page .competencies-score-large {
    font-size: 3.5rem;
}
.fe-portfolio-pages-competencies-sec-page .competencies-score-text {
    font-size: 1rem;
}
.fe-portfolio-pages-competencies-sec-page .competencies-title-section h5 {
    font-size: 1.25rem;
}
}
.fe-portfolio-pages-competencies-sec-page .tooltip-inner {
    max-width: 600px;
    width: 600px;
    white-space: normal;
    font-size: 14px;
    padding: 10px;
    text-align: left;
}
.fe-portfolio-pages-competencies-sec-page .tooltip-inner p {
    margin-bottom: 0;
}
.fe-portfolio-pages-competencies-sec-page .sumContent p {
    margin-bottom: 0 !important;
	margin-top: 30px !important;
}
.fe-portfolio-pages-competencies-sec-page ol {
    list-style: auto;
    gap: 20px;
    display: grid;
    margin-top: 30px;
}
.fe-portfolio-pages-competencies-sec-page .sumContent ul {
    list-style: disc;
    margin-left: 24px;
    margin-top: 13px;
}
.fe-portfolio-pages-competencies-sec-page .sumcontent p {
    font-weight: 700;
}

/* Extracted from application/views/Frontend/portfolio/pages/community-engagement-sec.php */
.fe-portfolio-pages-community-engagement-sec-page .community-engagement-section {
    width: 100%;
}
.fe-portfolio-pages-community-engagement-sec-page .community-engagement-content-card {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--ds-gray-200);
}
.fe-portfolio-pages-community-engagement-sec-page .community-engagement-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ds-gray-700);
}
.fe-portfolio-pages-community-engagement-sec-page .community-engagement-content p {
    margin-bottom: 1rem;
}
.fe-portfolio-pages-community-engagement-sec-page .community-engagement-content p:last-child {
    margin-bottom: 0;
}

/* Extracted from application/views/Frontend/portfolio/pages/experience-sec.php */
.fe-portfolio-pages-experience-sec-page .experience-section {
    width: 100%;
}
.fe-portfolio-pages-experience-sec-page .experience-content-card {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--ds-gray-200);
}
.fe-portfolio-pages-experience-sec-page .experience-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ds-gray-700);
}
.fe-portfolio-pages-experience-sec-page .experience-content p {
    margin-bottom: 1rem;
}
.fe-portfolio-pages-experience-sec-page .experience-content p:last-child {
    margin-bottom: 0;
}

/* Extracted from application/views/Frontend/portfolio/pages/bio-sec.php */
.fe-portfolio-pages-bio-sec-page .bio-section {
    width: 100%;
    margin-bottom: 2rem;
}
.fe-portfolio-pages-bio-sec-page .bio-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 2rem;
    align-items: start;
}
.fe-portfolio-pages-bio-sec-page .bio-image-section {
    position: relative;
}
.fe-portfolio-pages-bio-sec-page .profile-image-wrapper {
    position: sticky;
    top: 0;
}
.fe-portfolio-pages-bio-sec-page .profile-image-container {
    position: relative;
    width: 100%;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: var(--ds-bg-light);
    border: 1px solid var(--ds-gray-200);
    aspect-ratio: 5/4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fe-portfolio-pages-bio-sec-page .profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}
.fe-portfolio-pages-bio-sec-page .profile-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: var(--ds-radius-lg);
}
.fe-portfolio-pages-bio-sec-page .bio-content-section {
    display: flex;
    align-items: flex-start;
}
.fe-portfolio-pages-bio-sec-page .bio-content-card {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--ds-gray-200);
    width: 100%;
}
.fe-portfolio-pages-bio-sec-page .bio-header {
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--ds-gray-200);
}
.fe-portfolio-pages-bio-sec-page .bio-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ds-secondary);
    margin: 0 0 1rem 0;
    line-height: 1.3;
}
.fe-portfolio-pages-bio-sec-page .ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-secondary);
}
.fe-portfolio-pages-bio-sec-page .ai-badge img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.fe-portfolio-pages-bio-sec-page .bio-description {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ds-gray-700);
    margin-bottom: 2rem;
}
.fe-portfolio-pages-bio-sec-page .bio-description p {
    margin-bottom: 1rem;
}
.fe-portfolio-pages-bio-sec-page .bio-description p:last-child {
    margin-bottom: 0;
}
.fe-portfolio-pages-bio-sec-page .bio-gallery {
    padding-top: 1.5rem;
    border-top: 1px solid var(--ds-gray-200);
}
.fe-portfolio-pages-bio-sec-page .gallery-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}
.fe-portfolio-pages-bio-sec-page .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}
.fe-portfolio-pages-bio-sec-page .gallery-item {
    position: relative;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: var(--ds-transition-smooth);
    aspect-ratio: 1;
}
.fe-portfolio-pages-bio-sec-page .gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.fe-portfolio-pages-bio-sec-page .gallery-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: var(--ds-bg-light);
}
.fe-portfolio-pages-bio-sec-page .gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}
.fe-portfolio-pages-bio-sec-page .gallery-item:hover .gallery-image {
    transform: scale(1.05);
}
@media (max-width: 992px) {
.fe-portfolio-pages-bio-sec-page .bio-layout {
    grid-template-columns: 1fr;
        gap: 1.5rem;
}
.fe-portfolio-pages-bio-sec-page .profile-image-wrapper {
    position: relative;
}
.fe-portfolio-pages-bio-sec-page .profile-image-container {
    max-width: 400px;
        margin: 0 auto;
}
.fe-portfolio-pages-bio-sec-page .bio-content-card {
    padding: 1.5rem;
}
}
@media (max-width: 768px) {
.fe-portfolio-pages-bio-sec-page .bio-layout {
    gap: 1rem;
}
.fe-portfolio-pages-bio-sec-page .profile-image-container {
    max-width: 100%;
        aspect-ratio: 4/3;
}
.fe-portfolio-pages-bio-sec-page .bio-content-card {
    padding: 1.25rem;
        border-radius: var(--ds-radius-md);
}
.fe-portfolio-pages-bio-sec-page .bio-title {
    font-size: 1.5rem;
}
.fe-portfolio-pages-bio-sec-page .bio-description {
    font-size: 1rem;
        line-height: 1.65;
        margin-bottom: 1.5rem;
}
.fe-portfolio-pages-bio-sec-page .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
}
}

/* Extracted from application/views/Frontend/portfolio/pages/competencies-sec-design.php */
.fe-portfolio-pages-competencies-sec-design-page .plpr {
    padding-left:8px; padding-right:8px;
}
.fe-portfolio-pages-competencies-sec-design-page .cat_sec {
    box-shadow: 0px 3px 10px rgb(0 0 0 / 0.2);padding: 0;margin: 10px 2px; background-color:#f5f5f5; border-radius:5px;
}
.fe-portfolio-pages-competencies-sec-design-page .catTitle {
}
.fe-portfolio-pages-competencies-sec-design-page .keyArea p {
    margin-bottom:5px; font-size:16px; margin-left:10px;
}
.fe-portfolio-pages-competencies-sec-design-page .keyArea h4 {
    font-size:20px; margin-bottom:20px; text-transform:uppercase;
}
.fe-portfolio-pages-competencies-sec-design-page .clegend {
    padding:6px; margin-right:5px; margin-bottom:0;
}
.fe-portfolio-pages-competencies-sec-design-page .topTitle {
    color:#333;
}
.fe-portfolio-pages-competencies-sec-design-page .sumContent {
    font-size: 16px;line-height: 28px;color: #000;
}

/* Extracted from application/views/Frontend/portfolio/pages/documents-sec.php */
.fe-portfolio-pages-documents-sec-page .extTag {
    background: #555;color: #fff;padding: 3px 20px;border-radius: 10px;font-weight: 600;text-transform: uppercase;margin-bottom: 10px;
}
.fe-portfolio-pages-documents-sec-page .h-85 {
    height: 85% !important;
}

/* Extracted from application/views/Frontend/portfolio/pages/artifacts-sec-view.php */
.fe-portfolio-pages-artifacts-sec-view-page .extTag {
    background: #555;color: #fff;padding: 3px 20px;border-radius: 10px;font-weight: 600;text-transform: uppercase;margin-bottom: 10px;
}
.fe-portfolio-pages-artifacts-sec-view-page .h-85 {
    height: 85% !important;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .artifact-item {
    margin-bottom: 0;
    list-style: none;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolioBox {
    height: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 2px solid var(--ds-gray-200);
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: var(--ds-transition-smooth);
    overflow: hidden;
    position: relative;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolioBox:hover {
    border-color: var(--ds-primary);
    box-shadow: 0 4px 16px rgba(78, 177, 186, 0.15);
    transform: translateY(-2px);
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .pMedia {
    height: 180px;
    min-height: 180px;
    max-height: 180px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-bg-light);
    overflow: hidden;
    flex-shrink: 0;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .pMedia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolioTitle.artPort {
    padding: 1rem 1.25rem 0.5rem;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--ds-secondary);
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    background: #ffffff;
    word-wrap: break-word;
    min-height: 60px;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolioDescription {
    flex: 1;
    padding: 0 1.25rem 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ds-gray-700);
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    padding-bottom: 0px !important;
    margin-bottom: 10px !important;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolioLearnMore {
    padding: 0 1.25rem 1rem;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolioLearnMore .portfolio-btn {
    width: 100%;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolioActions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 1.25rem;
    border-top: 1px solid var(--ds-gray-200);
    margin-top: auto;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolio-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--ds-radius-sm);
    background: #ffffff;
    color: var(--ds-gray-500);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolio-btn:hover {
    background: var(--ds-gray-50);
    color: var(--ds-secondary);
    border-color: var(--ds-primary);
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolio-btn.learn-more-btn {
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
    border-color: var(--ds-primary);
    color: var(--ds-secondary);
    font-weight: 600;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolio-btn.learn-more-btn:hover {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: #ffffff;
    border-color: var(--ds-primary);
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolio-btn.edit-btn:hover {
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolio-btn.delete-btn:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #dc2626;
}
@media (max-width: 768px) {
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view {
    grid-template-columns: 1fr;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolioBox {
    min-height: 380px;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .pMedia {
    height: 150px;
        min-height: 150px;
        max-height: 150px;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolioTitle.artPort {
    font-size: 0.9375rem;
        padding: 0.875rem 1rem 0.5rem;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolioDescription {
    padding: 0 1rem 0.5rem;
        font-size: 0.875rem;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolioLearnMore {
    padding: 0 1rem 1rem;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view .portfolioActions {
    padding: 0.75rem 1rem 1rem;
}
}
@media (max-width: 576px) {
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-grid-view {
    grid-template-columns: 1fr;
        gap: 1rem;
}
}
.fe-portfolio-pages-artifacts-sec-view-page .card-competencies {
    padding: 0 1.25rem 0.75rem;
}
.fe-portfolio-pages-artifacts-sec-view-page .card-competencies-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.fe-portfolio-pages-artifacts-sec-view-page .card-competency-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
    border: 1.5px solid rgba(78, 177, 186, 0.3);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-secondary);
    transition: var(--ds-transition);
}
.fe-portfolio-pages-artifacts-sec-view-page .card-competency-pill:hover {
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.15), rgba(30, 78, 122, 0.15));
    border-color: var(--ds-primary);
    transform: translateY(-1px);
}
.fe-portfolio-pages-artifacts-sec-view-page .card-competency-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}
@media (max-width: 768px) {
.fe-portfolio-pages-artifacts-sec-view-page .card-competencies {
    padding: 0 1rem 0.625rem;
}
.fe-portfolio-pages-artifacts-sec-view-page .card-competency-pill {
    padding: 0.3rem 0.625rem;
        font-size: 0.6875rem;
}
.fe-portfolio-pages-artifacts-sec-view-page .card-competency-icon {
    width: 14px;
        height: 14px;
}
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--ds-gray-500);
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
    color: var(--ds-gray-400);
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-empty h5 {
    margin: 0 0 0.75rem 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--ds-gray-500);
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-empty p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ds-gray-400);
}
@media (max-width: 768px) {
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-empty {
    padding: 2rem 1rem;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifacts-empty i {
    font-size: 2.5rem;
}
}
.fe-portfolio-pages-artifacts-sec-view-page .artifact-modal-dialog {
    max-width: 95%;
    margin: 1.5rem auto;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifact-modal-content {
    border-radius: var(--ds-radius-xl);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifact-modal-body {
    padding: 2rem;
    position: relative;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifact-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: var(--ds-transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.fe-portfolio-pages-artifacts-sec-view-page .artifact-close-btn:hover {
    opacity: 1;
    background: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@media (max-width: 768px) {
.fe-portfolio-pages-artifacts-sec-view-page .artifact-modal-dialog {
    max-width: 100%;
        margin: 0;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifact-modal-body {
    padding: 1.5rem;
}
.fe-portfolio-pages-artifacts-sec-view-page .artifact-close-btn {
    top: 1rem;
        right: 1rem;
        width: 36px;
        height: 36px;
}
}

/* Extracted from application/views/Frontend/portfolio/pages/educations-sec.php */
.fe-portfolio-pages-educations-sec-page .educationBox {
    position: relative;
    overflow: hidden;
    border-radius: var(--ds-radius-md);
    background: #ffffff;
    border: 2px solid var(--ds-gray-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: var(--ds-transition-smooth);
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.fe-portfolio-pages-educations-sec-page .educationBox:hover {
    border-color: var(--ds-primary);
    box-shadow: 0 4px 16px rgba(78, 177, 186, 0.15);
    transform: translateY(-2px);
}
.fe-portfolio-pages-educations-sec-page .educationBox:hover .twoBtn {
    transform: rotateX(0deg) !important;
    opacity: 1 !important;
}
.fe-portfolio-pages-educations-sec-page .educationBox .twoBtn {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 0 !important;
    transform: rotateX(90deg) !important;
    transition: var(--ds-transition-smooth) !important;
    flex-direction: row !important;
    height: 100% !important;
    gap: 0.75rem !important;
    z-index: 10 !important;
    opacity: 0 !important;
}
.fe-portfolio-pages-educations-sec-page .educationBox .twoBtn::after {
    top: 0 !important;
    z-index: -1 !important;
    position: absolute !important;
    content: '' !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    transition: 0.3s ease !important;
    border-radius: 12px !important;
}
.fe-portfolio-pages-educations-sec-page .educationBox .groupBtn {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 11 !important;
    position: relative !important;
}
.fe-portfolio-pages-educations-sec-page .educationBox .editBtn, .fe-portfolio-pages-educations-sec-page .educationBox .deleteBtn, .fe-portfolio-pages-educations-sec-page .educationBox .viewBtn {
    min-width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    transition: var(--ds-transition-smooth) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    text-decoration: none !important;
    padding: 0.75rem !important;
}
.fe-portfolio-pages-educations-sec-page .educationBox .viewBtn {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
}
.fe-portfolio-pages-educations-sec-page .educationBox .viewBtn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4) !important;
    color: white !important;
}
.fe-portfolio-pages-educations-sec-page .educationBox .editBtn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}
.fe-portfolio-pages-educations-sec-page .educationBox .editBtn:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
    color: white !important;
}
.fe-portfolio-pages-educations-sec-page .educationBox .deleteBtn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
}
.fe-portfolio-pages-educations-sec-page .educationBox .deleteBtn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4) !important;
    color: white !important;
}
.fe-portfolio-pages-educations-sec-page .education-logo-top {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: var(--ds-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid var(--ds-gray-200);
}
.fe-portfolio-pages-educations-sec-page .education-logo-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fe-portfolio-pages-educations-sec-page .education-logo-top .education-logo-placeholder {
    color: var(--ds-gray-400);
    font-size: 3rem;
}
.fe-portfolio-pages-educations-sec-page .education-content-wrapper-vertical {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
.fe-portfolio-pages-educations-sec-page .education-content-wrapper {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
}
.fe-portfolio-pages-educations-sec-page .education-logo {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    border: 2px solid var(--ds-gray-200);
    background: var(--ds-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fe-portfolio-pages-educations-sec-page .education-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fe-portfolio-pages-educations-sec-page .education-logo-placeholder {
    color: var(--ds-gray-400);
    font-size: 2rem;
}
.fe-portfolio-pages-educations-sec-page .education-details {
    flex: 1;
}
.fe-portfolio-pages-educations-sec-page .education-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ds-secondary);
    margin-bottom: 0.625rem;
    line-height: 1.4;
    margin-top: 0;
}
.fe-portfolio-pages-educations-sec-page .education-content-wrapper-vertical .education-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ds-secondary);
    margin-bottom: 0.625rem;
    line-height: 1.4;
    margin-top: 0;
}
.fe-portfolio-pages-educations-sec-page .education-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
    display: block;
}
.fe-portfolio-pages-educations-sec-page .education-content-wrapper-vertical .education-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
}
.fe-portfolio-pages-educations-sec-page .educationBox[data-manage-mode="true"] .education-content-wrapper-vertical .education-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fe-portfolio-pages-educations-sec-page .educations-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--ds-gray-500);
}
.fe-portfolio-pages-educations-sec-page .educations-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
    color: var(--ds-gray-400);
}
.fe-portfolio-pages-educations-sec-page .educations-empty h5 {
    margin: 0 0 0.75rem 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--ds-gray-500);
}
.fe-portfolio-pages-educations-sec-page .educations-empty p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ds-gray-400);
}
@media (max-width: 768px) {
.fe-portfolio-pages-educations-sec-page .education-logo-top {
    height: 180px;
}
.fe-portfolio-pages-educations-sec-page .education-content-wrapper {
    flex-direction: column;
        gap: 1rem;
}
.fe-portfolio-pages-educations-sec-page .education-logo {
    width: 100%;
        height: 200px;
}
.fe-portfolio-pages-educations-sec-page .col-md-3.col-sm-6 {
    flex: 0 0 50%;
        max-width: 50%;
}
}
@media (max-width: 576px) {
.fe-portfolio-pages-educations-sec-page .col-md-3.col-sm-6 {
    flex: 0 0 100%;
        max-width: 100%;
}
}
.fe-portfolio-pages-educations-sec-page .education-modal-dialog {
    max-width: 95%;
    margin: 1.5rem auto;
}
.fe-portfolio-pages-educations-sec-page .education-modal-content {
    border-radius: var(--ds-radius-xl);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.fe-portfolio-pages-educations-sec-page .education-modal-body {
    padding: 2rem;
    position: relative;
}
.fe-portfolio-pages-educations-sec-page .education-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: var(--ds-transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: none;
    font-size: 1.5rem;
    color: var(--ds-gray-700);
    cursor: pointer;
    line-height: 1;
}
.fe-portfolio-pages-educations-sec-page .education-close-btn:hover {
    opacity: 1;
    background: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.fe-portfolio-pages-educations-sec-page .education-popup-container {
    width: 100%;
    padding: 0;
}
.fe-portfolio-pages-educations-sec-page .education-popup-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
    min-height: 600px;
}
.fe-portfolio-pages-educations-sec-page .education-media-section {
    position: relative;
}
.fe-portfolio-pages-educations-sec-page .education-media-section .media-wrapper {
    position: sticky;
    top: 0;
    width: 100%;
    height: 600px;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: var(--ds-bg-light);
    border: 1px solid var(--ds-gray-200);
}
.fe-portfolio-pages-educations-sec-page .education-media-section .image-viewer {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 1rem;
}
.fe-portfolio-pages-educations-sec-page .education-media-section .image-viewer img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--ds-radius-md);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.fe-portfolio-pages-educations-sec-page .education-modal-logo-placeholder {
    color: var(--ds-gray-400);
    font-size: 4rem;
}
.fe-portfolio-pages-educations-sec-page .education-content-section {
    display: flex;
    align-items: flex-start;
}
.fe-portfolio-pages-educations-sec-page .education-content-section .content-card {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--ds-gray-200);
    width: 100%;
}
.fe-portfolio-pages-educations-sec-page .education-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--ds-gray-200);
}
.fe-portfolio-pages-educations-sec-page .education-header .file-type-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: #ffffff;
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}
.fe-portfolio-pages-educations-sec-page .education-header .education-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ds-secondary);
    margin: 0;
    line-height: 1.3;
}
.fe-portfolio-pages-educations-sec-page .education-description {
    margin-bottom: 2rem;
}
.fe-portfolio-pages-educations-sec-page .education-description .description-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}
.fe-portfolio-pages-educations-sec-page .education-description .description-content {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ds-gray-700);
    padding: 1rem;
    background: var(--ds-bg-light);
    border-radius: var(--ds-radius-md);
    border-left: 4px solid var(--ds-primary);
    white-space: pre-wrap;
}
@media (max-width: 992px) {
.fe-portfolio-pages-educations-sec-page .education-popup-layout {
    grid-template-columns: 1fr;
        gap: 1.5rem;
}
.fe-portfolio-pages-educations-sec-page .education-media-section .media-wrapper {
    height: 400px;
        position: relative;
}
.fe-portfolio-pages-educations-sec-page .education-content-section .content-card {
    padding: 1.5rem;
}
}
@media (max-width: 768px) {
.fe-portfolio-pages-educations-sec-page .education-modal-dialog {
    max-width: 100%;
        margin: 0;
}
.fe-portfolio-pages-educations-sec-page .education-modal-body {
    padding: 1rem;
}
.fe-portfolio-pages-educations-sec-page .education-popup-layout {
    gap: 1rem;
}
.fe-portfolio-pages-educations-sec-page .education-media-section .media-wrapper {
    height: 300px;
}
.fe-portfolio-pages-educations-sec-page .education-content-section .content-card {
    padding: 1.25rem;
        border-radius: var(--ds-radius-md);
}
.fe-portfolio-pages-educations-sec-page .education-header .education-title {
    font-size: 1.5rem;
}
.fe-portfolio-pages-educations-sec-page .education-description .description-content {
    font-size: 0.9375rem;
        padding: 0.875rem;
}
}

/* Extracted from application/views/Frontend/portfolio/pages/endorsements-sec.php */
.fe-portfolio-pages-endorsements-sec-page .endorsement-card {
    background: #ffffff;
	border: 2px solid var(--ds-gray-200);
	border-radius: var(--ds-radius-lg);
	padding: 1.5rem;
	transition: var(--ds-transition-smooth);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-card.received-endorsement {
    border-color: #10b981;
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.03), rgba(5, 150, 105, 0.03));
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-badge-received {
    position: absolute;
	top: 1rem;
	right: 1rem;
	background: linear-gradient(135deg, #10b981, #059669);
	color: white;
	padding: 0.375rem 0.75rem;
	border-radius: var(--ds-radius-xl);
	font-size: 0.75rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-card:hover {
    border-color: var(--ds-primary);
	box-shadow: 0 8px 24px rgba(78, 177, 186, 0.15);
	transform: translateY(-4px);
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-header {
    display: flex;
	align-items: flex-start;
	margin-bottom: 1rem;
	gap: 1rem;
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-avatar {
    width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.5rem;
	font-weight: 700;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(78, 177, 186, 0.3);
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-info {
    flex: 1;
	min-width: 0;
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-name {
    font-size: 1.125rem;
	font-weight: 700;
	color: var(--ds-secondary);
	margin: 0 0 0.25rem 0;
	line-height: 1.3;
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-org {
    font-size: 0.9375rem;
	color: var(--ds-gray-500);
	margin: 0;
	line-height: 1.4;
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-message {
    flex: 1;
	color: var(--ds-gray-700);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1rem;
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
	
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-competencies {
    display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}
.fe-portfolio-pages-endorsements-sec-page .competency-badge {
    display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
	color: var(--ds-secondary);
	border-radius: var(--ds-radius-sm);
	font-size: 0.8125rem;
	font-weight: 600;
	border: 1px solid rgba(78, 177, 186, 0.3);
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-actions {
    display: flex;
	gap: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--ds-gray-200);
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-btn {
    flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--ds-gray-200);
	border-radius: var(--ds-radius-sm);
	background: #ffffff;
	color: var(--ds-gray-500);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	text-decoration: none;
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-btn:hover {
    background: var(--ds-gray-50);
	color: var(--ds-secondary);
	border-color: var(--ds-primary);
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-btn.edit-btn:hover {
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-btn.delete-btn:hover {
    background: #fef2f2;
	color: #dc2626;
	border-color: #dc2626;
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-btn.toggle-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
	border-color: #10b981;
	color: #059669;
	font-weight: 600;
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-btn.toggle-btn:hover {
    background: linear-gradient(135deg, #10b981, #059669);
	color: #ffffff;
	border-color: #10b981;
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-btn.view-btn {
    flex: 1;
	background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
	border-color: var(--ds-primary);
	color: var(--ds-secondary);
	font-weight: 600;
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-btn.view-btn:hover {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
	color: #ffffff;
	border-color: var(--ds-primary);
}
.fe-portfolio-pages-endorsements-sec-page .endorsements-empty {
    text-align: center;
	padding: 3rem 1.5rem;
	color: var(--ds-gray-500);
}
.fe-portfolio-pages-endorsements-sec-page .endorsements-empty i {
    font-size: 3rem;
	margin-bottom: 1rem;
	opacity: 0.4;
	color: var(--ds-gray-400);
}
.fe-portfolio-pages-endorsements-sec-page .endorsements-empty h5 {
    margin: 0;
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--ds-gray-500);
}
@media (max-width: 768px) {
.fe-portfolio-pages-endorsements-sec-page .endorsement-card {
    padding: 1.25rem;
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-avatar {
    width: 48px;
		height: 48px;
		font-size: 1.25rem;
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-name {
    font-size: 1rem;
}
.fe-portfolio-pages-endorsements-sec-page .endorsement-org {
    font-size: 0.875rem;
}
}
.fe-portfolio-pages-endorsements-sec-page #endorsementDetailsModal .modal-content {
    border-radius: var(--ds-radius-lg);
	border: none;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.fe-portfolio-pages-endorsements-sec-page #endorsementDetailsModal .modal-header {
    border-radius: 16px 16px 0 0;
	padding: 1.5rem 2rem;
	border-bottom: none;
}
.fe-portfolio-pages-endorsements-sec-page #endorsementDetailsModal .modal-title {
    font-size: 1.5rem;
	font-weight: 700;
}
.fe-portfolio-pages-endorsements-sec-page .detail-section {
    margin-bottom: 1.5rem;
}
.fe-portfolio-pages-endorsements-sec-page .detail-label {
    font-size: 0.875rem;
	font-weight: 700;
	color: var(--ds-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 0.5rem;
}
.fe-portfolio-pages-endorsements-sec-page .detail-value {
    font-size: 1rem;
	color: var(--ds-gray-800);
	line-height: 1.6;
}
.fe-portfolio-pages-endorsements-sec-page .detail-avatar-large {
    width: 80px;
	height: 80px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 2rem;
	font-weight: 700;
	margin: 0 auto 1.5rem;
	box-shadow: 0 8px 20px rgba(78, 177, 186, 0.3);
}
.fe-portfolio-pages-endorsements-sec-page .detail-name {
    font-size: 1.5rem;
	font-weight: 700;
	color: var(--ds-secondary);
	text-align: center;
	margin-bottom: 0.5rem;
}
.fe-portfolio-pages-endorsements-sec-page .detail-org {
    font-size: 1.125rem;
	color: var(--ds-gray-500);
	text-align: center;
	margin-bottom: 2rem;
}
.fe-portfolio-pages-endorsements-sec-page .detail-message-box {
    background: var(--ds-gray-50);
	border-left: 4px solid var(--ds-primary);
	padding: 1.5rem;
	border-radius: var(--ds-radius-sm);
	margin-bottom: 1.5rem;
}
.fe-portfolio-pages-endorsements-sec-page .detail-message-box p {
    margin: 0;
	color: var(--ds-gray-700);
	line-height: 1.8;
	white-space: pre-wrap;
}
.fe-portfolio-pages-endorsements-sec-page .detail-competencies {
    display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}
.fe-portfolio-pages-endorsements-sec-page .detail-competency-badge {
    display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: linear-gradient(135deg, rgba(78, 177, 186, 0.15), rgba(30, 78, 122, 0.15));
	color: var(--ds-secondary);
	border-radius: var(--ds-radius-md);
	font-size: 0.9375rem;
	font-weight: 600;
	border: 2px solid rgba(78, 177, 186, 0.3);
}

/* Extracted from application/views/Frontend/portfolio/pages/education-sec.php */
.fe-portfolio-pages-education-sec-page .education-section {
    width: 100%;
}
.fe-portfolio-pages-education-sec-page .education-content-card {
    background: #ffffff;
    border-radius: var(--ds-radius-lg);
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--ds-gray-200);
}
.fe-portfolio-pages-education-sec-page .education-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ds-gray-700);
}
.fe-portfolio-pages-education-sec-page .education-content p {
    margin-bottom: 1rem;
}
.fe-portfolio-pages-education-sec-page .education-content p:last-child {
    margin-bottom: 0;
}

/* Extracted from application/views/Frontend/portfolio/pages/artifacts-sec.php */
.fe-portfolio-pages-artifacts-sec-page .extTag {
    background: #555;color: #fff;padding: 3px 20px;border-radius: 10px;font-weight: 600;text-transform: uppercase;margin-bottom: 10px;
}
.fe-portfolio-pages-artifacts-sec-page .h-85 {
    height: 85% !important;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag li {
    margin-bottom: 0;
    list-style: none;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolioBox {
    height: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 2px solid var(--ds-gray-200);
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: var(--ds-transition-smooth);
    overflow: hidden;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolioBox:hover {
    border-color: var(--ds-primary);
    box-shadow: 0 4px 16px rgba(78, 177, 186, 0.15);
    transform: translateY(-2px);
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .pMedia {
    height: 180px;
    min-height: 180px;
    max-height: 180px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-bg-light);
    overflow: hidden;
    flex-shrink: 0;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .pMedia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolioTitle.artPort {
    padding: 1rem 1.25rem 0.5rem;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 3.3;
    color: var(--ds-secondary);
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    background: #ffffff;
    word-wrap: break-word;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolioDescription {
    flex: 1;
    padding: 0 1.25rem 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ds-gray-700);
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
	padding-bottom: 0px !important;
	margin-bottom: 10px !important;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolioLearnMore {
    padding: 0 1.25rem 1rem;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolioLearnMore .portfolio-btn {
    width: 100%;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolioActions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 1.25rem;
    border-top: 1px solid var(--ds-gray-200);
    margin-top: auto;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolio-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--ds-radius-sm);
    background: #ffffff;
    color: var(--ds-gray-500);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolio-btn:hover {
    background: var(--ds-gray-50);
    color: var(--ds-secondary);
    border-color: var(--ds-primary);
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolio-btn.learn-more-btn {
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
    border-color: var(--ds-primary);
    color: var(--ds-secondary);
    font-weight: 600;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolio-btn.learn-more-btn:hover {
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: #ffffff;
    border-color: var(--ds-primary);
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolio-btn.edit-btn:hover {
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolio-btn.delete-btn:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #dc2626;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .drag-handle {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--ds-radius-sm);
    cursor: move;
    cursor: grab;
    transition: var(--ds-transition);
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .drag-handle:hover {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    box-shadow: 0 4px 8px rgba(78, 177, 186, 0.2);
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .drag-handle:hover i {
    color: #ffffff;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .drag-handle:active {
    cursor: grabbing;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .drag-handle i {
    font-size: 0.875rem;
    color: var(--ds-gray-500);
    transition: color 0.2s ease;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolioBox {
    position: relative;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag li.dragging {
    opacity: 0.5;
    transform: scale(1.05);
    z-index: 1000;
    cursor: move !important;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag li.dragging .portfolioBox {
    box-shadow: 0 8px 24px rgba(78, 177, 186, 0.3);
    border-color: var(--ds-primary);
    background: #ffffff;
}
.fe-portfolio-pages-artifacts-sec-page .sortable-placeholder {
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
    border: 2px dashed var(--ds-primary) !important;
    border-radius: var(--ds-radius-lg);
    visibility: visible !important;
    margin-bottom: 0 !important;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag li {
    cursor: move;
    cursor: grab;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag li:active {
    cursor: grabbing;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag.ui-sortable {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
@media (max-width: 768px) {
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag {
    grid-template-columns: 1fr;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolioBox {
    min-height: 380px;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .pMedia {
    height: 150px;
        min-height: 150px;
        max-height: 150px;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolioTitle.artPort {
    font-size: 0.9375rem;
        padding: 0.875rem 1rem 0.5rem;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolioDescription {
    padding: 0 1rem 0.5rem;
        font-size: 0.875rem;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolioLearnMore {
    padding: 0 1rem 1rem;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .portfolioActions {
    padding: 0.75rem 1rem 1rem;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .drag-handle {
    width: 36px;
        height: 36px;
        top: 0.5rem;
        right: 0.5rem;
}
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag .drag-handle i {
    font-size: 1rem;
}
}
@media (max-width: 576px) {
.fe-portfolio-pages-artifacts-sec-page #sortable.sortable_drag {
    grid-template-columns: 1fr;
        gap: 1rem;
}
}
.fe-portfolio-pages-artifacts-sec-page .card-competencies {
    padding: 0 1.25rem 0.75rem;
}
.fe-portfolio-pages-artifacts-sec-page .card-competencies-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.fe-portfolio-pages-artifacts-sec-page .card-competency-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.1), rgba(30, 78, 122, 0.1));
    border: 1.5px solid rgba(78, 177, 186, 0.3);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-secondary);
    transition: var(--ds-transition);
}
.fe-portfolio-pages-artifacts-sec-page .card-competency-pill:hover {
    background: linear-gradient(135deg, rgba(78, 177, 186, 0.15), rgba(30, 78, 122, 0.15));
    border-color: var(--ds-primary);
    transform: translateY(-1px);
}
.fe-portfolio-pages-artifacts-sec-page .card-competency-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}
@media (max-width: 768px) {
.fe-portfolio-pages-artifacts-sec-page .card-competencies {
    padding: 0 1rem 0.625rem;
}
.fe-portfolio-pages-artifacts-sec-page .card-competency-pill {
    padding: 0.3rem 0.625rem;
        font-size: 0.6875rem;
}
.fe-portfolio-pages-artifacts-sec-page .card-competency-icon {
    width: 14px;
        height: 14px;
}
}
.fe-portfolio-pages-artifacts-sec-page .artifact-modal-dialog {
    max-width: 95%;
    margin: 1.5rem auto;
}
.fe-portfolio-pages-artifacts-sec-page .artifact-modal-content {
    border-radius: var(--ds-radius-xl);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.fe-portfolio-pages-artifacts-sec-page .artifact-modal-body {
    padding: 2rem;
    position: relative;
}
.fe-portfolio-pages-artifacts-sec-page .artifact-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: var(--ds-transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.fe-portfolio-pages-artifacts-sec-page .artifact-close-btn:hover {
    opacity: 1;
    background: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@media (max-width: 768px) {
.fe-portfolio-pages-artifacts-sec-page .artifact-modal-dialog {
    max-width: 100%;
        margin: 0;
}
.fe-portfolio-pages-artifacts-sec-page .artifact-modal-body {
    padding: 1.5rem;
}
.fe-portfolio-pages-artifacts-sec-page .artifact-close-btn {
    top: 1rem;
        right: 1rem;
        width: 36px;
        height: 36px;
}
}
.fe-portfolio-pages-artifacts-sec-page .artifacts-empty {
    text-align: center;
	padding: 3rem 1.5rem;
	color: var(--ds-gray-500);
}
.fe-portfolio-pages-artifacts-sec-page .artifacts-empty i {
    font-size: 3rem;
	margin-bottom: 1rem;
	opacity: 0.4;
	color: var(--ds-gray-400);
}
.fe-portfolio-pages-artifacts-sec-page .artifacts-empty h5 {
    margin: 0 0 0.75rem 0;
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--ds-gray-500);
}
.fe-portfolio-pages-artifacts-sec-page .artifacts-empty p {
    margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ds-gray-400);
}
@media (max-width: 768px) {
.fe-portfolio-pages-artifacts-sec-page .artifacts-empty {
    padding: 2rem 1rem;
}
.fe-portfolio-pages-artifacts-sec-page .artifacts-empty i {
    font-size: 2.5rem;
}
}

/* Extracted from application/views/Frontend/portfolio/pages/affiliations-sec.php */
.fe-portfolio-pages-affiliations-sec-page .affSec {
    display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #ffffff;
	border: 2px solid var(--ds-gray-200);
	border-radius: var(--ds-radius-lg);
	transition: var(--ds-transition-smooth);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	height: 220px;
	min-height: 220px;
	position: relative;
}
.fe-portfolio-pages-affiliations-sec-page .affSec:hover {
    border-color: var(--ds-primary);
	box-shadow: 0 8px 24px rgba(78, 177, 186, 0.15);
	transform: translateY(-4px);
}
.fe-portfolio-pages-affiliations-sec-page .affSec .pMedia {
    width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	position: relative;
}
.fe-portfolio-pages-affiliations-sec-page .affSec .pMedia img {
    max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: pointer;
	transition: transform 0.3s ease;
}
.fe-portfolio-pages-affiliations-sec-page .affSec:hover .pMedia img {
    transform: scale(1.05);
}
@media (max-width: 768px) {
.fe-portfolio-pages-affiliations-sec-page .affSec {
    height: 180px;
		min-height: 180px;
}
.fe-portfolio-pages-affiliations-sec-page .affSec .pMedia {
    padding: 1rem;
}
}
@media (min-width: 992px) {
.fe-portfolio-pages-affiliations-sec-page .affSec {
    height: 240px;
		min-height: 240px;
}
}
.fe-portfolio-pages-affiliations-sec-page .affiliations-empty {
    text-align: center;
	padding: 3rem 1.5rem;
	color: var(--ds-gray-500);
}
.fe-portfolio-pages-affiliations-sec-page .affiliations-empty i {
    font-size: 3rem;
	margin-bottom: 1rem;
	opacity: 0.4;
	color: var(--ds-gray-400);
}
.fe-portfolio-pages-affiliations-sec-page .affiliations-empty h5 {
    margin: 0;
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--ds-gray-500);
}

/* ============================================================
   Admin Panel Login — merged from assets/backend/login.css
   Every rule is scoped under body.login_page / .login_page so
   none of these styles leak onto the ~80 frontend pages that
   also load this stylesheet. (bootstrap_custom.css and the
   Inter font are linked separately in login_header.php.)
   ============================================================ */

/* --- merged from assets/backend/bootstrap_custom.css (login-scoped) --- */
/* Rules that exactly duplicated the main .login_page block below
   (.btn, .btn-primary, .btn-primary:hover, .form-check-input:checked,
   .form-check-input:focus, .form-control:focus, .form-label) were folded
   into those rules to avoid duplicate selectors. Only the unique
   bootstrap overrides remain here. */
.login_page .card { border: none; padding: 1rem; border-radius: 1rem; }
.login_page .dropdown-menu { border: none; box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; }
.login_page .form-control,
.login_page .form-check-input { border: 1px solid #bbb; font-size: 15px; }
.login_page #payableCostShow { font-size: 20px; }
/* .login_page { background-color:#fff !important; } */
.login_page .shadow-sm { box-shadow: none !important; }
.login_page .fCls { line-height: 25px; font-size: 15px; font-weight: 500; }
.login_page .fCls p { margin: 0; }
.login_page .fCls label { font-weight: 600; padding-left: 10px; }
.login_page .has-success .form-control {
    border-color: var(--primary-color); box-shadow: 0 0 0 .25rem var(--primary-color-100);
}
.login_page .has-success .form-control:focus {
    border-color: var(--primary-color); box-shadow: 0 0 0 .25rem var(--primary-color-100);
}
.login_page .has-error .form-control {
    border-color: #FF0000;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.login_page .has-error .form-control:focus {
    border-color: #FF0000;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
/* --- end bootstrap_custom.css --- */

body.login_page {
    --hue: 0;
    --primary-color: #2e7291;
    --primary-color-100: hsl(var(--hue), 0%, 95%);
    --primary-color-500: #4EB1BA;
    --secondary-color: #4EB1BA;
    --dark-text: #1a1a2e;
    --body-text: #454545;
    --light-text: #6b7280;
    --lighter-text: #9ca3af;
    --white-bg: #ffffff;
    --gray-50: #fafafa;
    --gray-100: #f5f7fa;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --fs-small: 0.875rem;
    --fs-medium: 0.9375rem;
    --fs-regular: 1rem;
    --fs-large: 1.125rem;
    --fs-xlarge: 1.5rem;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    color: var(--body-text);
    font-size: var(--fs-regular);
    font-family: "Inter", sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    position: relative;
}
.login_page * {
    transition: all var(--transition-fast);
    max-width: 100%;
}
/* Exclude checkboxes from the global transition-all so :checked state renders immediately */
.login_page input[type="checkbox"] {
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.login_page h1, .login_page h2, .login_page h3,
.login_page h4, .login_page h5, .login_page h6 {
    font-weight: 700;
    color: var(--dark-text);
    line-height: 1.3;
    margin-bottom: var(--spacing-md);
}
.login_page h1 { font-size: 2rem; }
.login_page h2 { font-size: 1.75rem; }
.login_page h3 { font-size: 1.5rem; }
.login_page h4 { font-size: 1.25rem; }
.login_page h5 { font-size: 1.125rem; }
.login_page a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-base);
}
.login_page a:hover,
.login_page a:focus {
    color: var(--secondary-color);
}

/* Login Page Layout */
.login_page .d-flex.align-items-center.flex-column.justify-content-center {
    width: 100%;
    min-height: 100vh;
    padding: var(--spacing-lg) 0;
}
.login_page {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
}
.login_page::before,
.login_page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(46, 114, 145, 0.08) 0%, rgba(78, 177, 186, 0.05) 100%);
    z-index: 0;
    pointer-events: none;
}
.login_page::before {
    width: 600px;
    height: 600px;
    top: -200px;
    right: -200px;
}
.login_page::after {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -100px;
}
.login_page .logo {
    max-width: 200px;
    height: auto;
    margin-bottom: var(--spacing-xl);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    position: relative;
    z-index: 1;
}

/* Login Container */
.login_page .login_wraper {
    background: var(--white-bg);
    border-radius: var(--radius-2xl);
    width: 100%;
    max-width: 520px;
    margin: var(--spacing-lg) auto;
    box-shadow: var(--shadow-2xl);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
    overflow: visible;
    max-height: none;
}
.login_page .login_wraper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}
.login_page .login_wraper form {
    padding: var(--spacing-2xl) var(--spacing-xl);
    overflow: visible;
    max-height: none;
}
.login_page #stepOne,
.login_page #stepTwo,
.login_page #stepThree,
.login_page #stepFour {
    overflow: visible;
    max-height: none;
}

/* Modern Form Fields */
.login_page .form-label {
    font-weight: 600;
    font-size: var(--fs-medium);
    color: var(--dark-text);
    margin-bottom: var(--spacing-sm);
    display: block;
}
.login_page .form-control,
.login_page input[type="text"],
.login_page input[type="email"],
.login_page input[type="password"],
.login_page input[type="number"],
.login_page select,
.login_page textarea {
    width: 100%;
    padding: 14px 18px;
    font-size: var(--fs-medium);
    font-family: inherit;
    color: var(--dark-text);
    background-color: var(--white-bg);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    outline: none;
    appearance: none;
}
.login_page .form-control:hover,
.login_page input:not([type="checkbox"]):not([type="radio"]):hover {
    border-color: var(--gray-300);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.login_page .form-control:focus,
.login_page input:not([type="checkbox"]):not([type="radio"]):focus,
.login_page select:focus,
.login_page textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(46, 114, 145, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
    background-color: var(--white-bg);
}
.login_page .form-control::placeholder {
    color: var(--lighter-text);
    font-size: var(--fs-small);
}
.login_page .input-group {
    position: relative;
    margin-bottom: var(--spacing-lg);
}
.login_page .input-group .input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-text);
    pointer-events: none;
    transition: color var(--transition-base);
}
.login_page .input-group input {
    padding-left: 44px;
}
.login_page .input-group input:focus ~ .input-icon {
    color: var(--primary-color);
}

/* Modern Buttons */
.login_page .btn {
    font-size: var(--fs-medium);
    font-weight: 600;
    padding: 14px 24px !important;
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    transition: all var(--transition-base);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.login_page .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white-bg);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(46, 114, 145, 0.3);
}
.login_page .btn-primary:hover {
    background-color: var(--primary-color-500);
    border-color: var(--primary-color-500);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(46, 114, 145, 0.4);
    color: var(--white-bg);
}
.login_page .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(46, 114, 145, 0.3);
}
.login_page .btn-primary:focus,
.login_page .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(46, 114, 145, 0.2), 0 4px 12px rgba(46, 114, 145, 0.3);
}
.login_page .btn.disabled,
.login_page .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
}

/* Note: .log_switch_btns (Student/Teacher toggle) is not used on the admin
   login page, so those rules were removed. The toggle lives only on the
   frontend login under .fe-pages-login-page .log_switch_btns. */

/* Form Elements */
.login_page .fgrp {
    margin-bottom: var(--spacing-lg);
}
.login_page .form-check {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-left: 0;
}
.login_page .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-300);
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.login_page .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}
.login_page .form-check-input:focus {
    border-color: var(--primary-color);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(46, 114, 145, 0.1);
}
.login_page .form-check-label {
    font-size: var(--fs-small);
    color: var(--body-text);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    margin: 0;
    display: grid !important;
}

/* Titles and Text */
.login_page .login_wraper h3,
.login_page .login_wraper h4 {
    font-size: var(--fs-xlarge);
    font-weight: 700;
    color: var(--dark-text);
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
}
.login_page .logSubTitle {
    font-size: var(--fs-medium);
    font-weight: 400;
    color: var(--light-text);
    margin-bottom: var(--spacing-xl);
    line-height: 1.5;
}
.login_page .fw500 {
    font-weight: 500;
}

/* Alerts and Messages */
.login_page .alert {
    padding: 14px 18px;
    font-weight: 500;
    font-size: var(--fs-small);
    border-radius: var(--radius-lg);
    border: none;
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.login_page .alert-success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #065f46;
    border-left: 4px solid #10b981;
}
.login_page .alert-danger {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #991b1b;
    border-left: 4px solid #ef4444;
}
.login_page .alert-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    color: #92400e;
    border-left: 4px solid #f59e0b;
}
.login_page .login_err_msg,
.login_page .resDisplay {
    margin-bottom: var(--spacing-lg);
}

/* Validation States */
.login_page label.error {
    color: #dc2626;
    font-weight: 500;
    font-size: var(--fs-small);
    margin-top: var(--spacing-xs);
    display: block;
}
.login_page .fgrp.has-error .form-control {
    border-color: #dc2626;
    background: #fef2f2;
}
.login_page .fgrp.has-success .form-control {
    border-color: #10b981;
    background: #ecfdf5;
}

/* Links and Actions */
.login_page .login_wraper a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-base);
    position: relative;
}
.login_page .login_wraper a:hover {
    color: var(--secondary-color);
}
.login_page .login_wraper a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}
.login_page .form-check .form-check-input {
    margin-left: 0px !important;
}

/* Admin Panel Sidebar (preserved, inert on the login page) */
.login_page .inner_page {
    display: flex;
    height: 100%;
}
.login_page .main_wraper {
    max-width: 1200px;
    width: calc(100% - 250px);
}
.login_page .color_light {
    color: var(--light-text);
}
.login_page .side_bar {
    background-color: white;
    width: 250px;
}
.login_page .sb_wrap {
    padding: 0 2rem;
}
.login_page .sb_logo {
    padding: 1.5rem 0.25rem;
}
.login_page .bravo_logo {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--dark-text);
    margin: 0 auto;
}
.login_page .bravo_logo span {
    font-weight: 900;
    color: var(--primary-color);
}

/* Accessibility & Focus States */
.login_page *:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.login_page button:focus-visible,
.login_page .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(46, 114, 145, 0.2);
}

/* Responsive Design */
@media screen and (max-width: 1023px) and (min-width: 768px) {
    .login_page .login_wraper {
        max-width: 480px;
    }
}
@media screen and (max-width: 767px) and (min-width: 577px) {
    .login_page {
        padding: var(--spacing-lg);
    }
    .login_page .login_wraper {
        max-width: 440px;
    }
    .login_page .login_wraper form {
        padding: var(--spacing-xl);
    }
}
@media screen and (max-width: 576px) {
    .login_page {
        padding: 0;
        min-height: 100vh;
        height: auto;
        align-items: flex-start;
    }
    .login_page .d-flex.align-items-center.flex-column.justify-content-center {
        padding: var(--spacing-lg) var(--spacing-md);
        align-items: stretch !important;
    }
    .login_page .login_wraper {
        max-width: 100%;
        border-radius: var(--radius-xl);
        margin: 0 auto;
        width: 100%;
    }
    .login_page .login_wraper form {
        padding: var(--spacing-xl) var(--spacing-lg);
        overflow: visible;
    }
    .login_page .logo {
        max-width: 160px !important;
        margin-bottom: var(--spacing-lg) !important;
        margin-top: var(--spacing-md) !important;
    }
    .login_page .login_wraper h3,
    .login_page .login_wraper h4 {
        font-size: 1.375rem;
    }
    .login_page .btn {
        padding: 12px 20px !important;
    }
    .login_page .form-actions-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .login_page .mb-3,
    .login_page .fgrp {
        margin-bottom: 1.25rem;
    }
    .login_page .form-control,
    .login_page input[type="text"],
    .login_page input[type="email"],
    .login_page input[type="password"],
    .login_page select {
        font-size: 16px !important;
        min-height: 48px;
    }
}
@media screen and (max-width: 375px) {
    body.login_page {
        --fs-regular: 0.9375rem;
        --fs-medium: 0.875rem;
        --fs-small: 0.8125rem;
    }
    .login_page {
        padding: var(--spacing-sm);
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }
    .login_page .login_wraper {
        width: calc(100% - 1rem);
        border-radius: var(--radius-lg);
    }
    .login_page .login_wraper form {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    .login_page .logo {
        max-width: 140px;
        margin-bottom: var(--spacing-md);
    }
    .login_page .login_wraper h3,
    .login_page .login_wraper h4 {
        font-size: 1.25rem;
    }
    .login_page .btn {
        font-size: 14px !important;
        padding: 10px 16px !important;
    }
}
@media screen and (max-width: 991px) {
    .login_page .sb_wrap .btn-close {
        display: block;
    }
    .login_page .side_bar {
        position: fixed;
        z-index: 1050;
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
        transform: translateX(-250px);
        transition: all ease-in-out 0.3s;
    }
    .login_page .side_bar.show {
        transform: translateX(0);
    }
    .login_page .main_wraper {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .login_page *,
    .login_page *::before,
    .login_page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
@media screen and (max-width: 896px) and (orientation: landscape) {
    .login_page {
        height: auto;
        min-height: 100vh;
    }
    .login_page .d-flex.align-items-center.flex-column.justify-content-center {
        padding: var(--spacing-md) var(--spacing-lg);
    }
    .login_page .logo {
        max-width: 120px !important;
        margin-bottom: var(--spacing-md) !important;
        margin-top: var(--spacing-sm) !important;
    }
    .login_page .login_wraper {
        max-width: 500px;
    }
    .login_page .login_wraper form {
        padding: var(--spacing-lg);
    }
    .login_page .login_wraper h3,
    .login_page .login_wraper h4 {
        font-size: 1.25rem;
        margin-bottom: var(--spacing-sm);
    }
    .login_page .logSubTitle {
        font-size: 0.875rem;
        margin-bottom: var(--spacing-md);
    }
    .login_page .mb-3,
    .login_page .fgrp {
        margin-bottom: 1rem;
    }
}
@media screen and (min-width: 1920px) {
    .login_page .login_wraper {
        max-width: 560px;
    }
    .login_page .login_wraper form {
        padding: 3rem 2.5rem;
    }
}
@media print {
    .login_page::before,
    .login_page::after {
        display: none;
    }
    .login_page .login_wraper {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ============================================================
   Unified portfolio empty-state (MANAGE page only)
   Scoped with body:not(.portfolioTemplate) so the share page
   keeps its own theme-aware empty-state styling.
   ============================================================ */
body:not(.portfolioTemplate) .fe-portfolio-pages-educations-sec-page .educations-empty,
body:not(.portfolioTemplate) .fe-portfolio-pages-experiences-sec-page .experiences-empty,
body:not(.portfolioTemplate) .fe-portfolio-pages-community-engagements-sec-page .community-engagements-empty,
body:not(.portfolioTemplate) .fe-portfolio-pages-professional-interests-sec-page .professional-interests-empty,
body:not(.portfolioTemplate) .fe-portfolio-pages-artifacts-sec-page .artifacts-empty,
body:not(.portfolioTemplate) .fe-portfolio-pages-affiliations-sec-page .affiliations-empty,
body:not(.portfolioTemplate) .fe-portfolio-pages-endorsements-sec-page .endorsements-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 540px;
    margin: 1rem auto;
    padding: 3rem 2rem;
    border: 2px dashed var(--ds-gray-200);
    border-radius: 16px;
    background: var(--ds-gray-50);
    color: var(--ds-gray-500);
}
body:not(.portfolioTemplate) .fe-portfolio-pages-educations-sec-page .educations-empty i,
body:not(.portfolioTemplate) .fe-portfolio-pages-experiences-sec-page .experiences-empty i,
body:not(.portfolioTemplate) .fe-portfolio-pages-community-engagements-sec-page .community-engagements-empty i,
body:not(.portfolioTemplate) .fe-portfolio-pages-professional-interests-sec-page .professional-interests-empty i,
body:not(.portfolioTemplate) .fe-portfolio-pages-artifacts-sec-page .artifacts-empty i,
body:not(.portfolioTemplate) .fe-portfolio-pages-affiliations-sec-page .affiliations-empty i,
body:not(.portfolioTemplate) .fe-portfolio-pages-endorsements-sec-page .endorsements-empty i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    margin: 0 0 1.25rem 0;
    font-size: 2.25rem;
    color: var(--ds-accent);
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    opacity: 1;
}
body:not(.portfolioTemplate) .fe-portfolio-pages-educations-sec-page .educations-empty h5,
body:not(.portfolioTemplate) .fe-portfolio-pages-experiences-sec-page .experiences-empty h5,
body:not(.portfolioTemplate) .fe-portfolio-pages-community-engagements-sec-page .community-engagements-empty h5,
body:not(.portfolioTemplate) .fe-portfolio-pages-professional-interests-sec-page .professional-interests-empty h5,
body:not(.portfolioTemplate) .fe-portfolio-pages-artifacts-sec-page .artifacts-empty h5,
body:not(.portfolioTemplate) .fe-portfolio-pages-affiliations-sec-page .affiliations-empty h5,
body:not(.portfolioTemplate) .fe-portfolio-pages-endorsements-sec-page .endorsements-empty h5 {
    margin: 0 0 0.5rem 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ds-secondary);
}
body:not(.portfolioTemplate) .fe-portfolio-pages-educations-sec-page .educations-empty p,
body:not(.portfolioTemplate) .fe-portfolio-pages-experiences-sec-page .experiences-empty p,
body:not(.portfolioTemplate) .fe-portfolio-pages-community-engagements-sec-page .community-engagements-empty p,
body:not(.portfolioTemplate) .fe-portfolio-pages-professional-interests-sec-page .professional-interests-empty p,
body:not(.portfolioTemplate) .fe-portfolio-pages-artifacts-sec-page .artifacts-empty p,
body:not(.portfolioTemplate) .fe-portfolio-pages-affiliations-sec-page .affiliations-empty p,
body:not(.portfolioTemplate) .fe-portfolio-pages-endorsements-sec-page .endorsements-empty p {
    margin: 0 auto;
    max-width: 440px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ds-gray-500);
}
@media (max-width: 768px) {
    body:not(.portfolioTemplate) .fe-portfolio-pages-educations-sec-page .educations-empty,
    body:not(.portfolioTemplate) .fe-portfolio-pages-experiences-sec-page .experiences-empty,
    body:not(.portfolioTemplate) .fe-portfolio-pages-community-engagements-sec-page .community-engagements-empty,
    body:not(.portfolioTemplate) .fe-portfolio-pages-professional-interests-sec-page .professional-interests-empty,
    body:not(.portfolioTemplate) .fe-portfolio-pages-artifacts-sec-page .artifacts-empty,
    body:not(.portfolioTemplate) .fe-portfolio-pages-affiliations-sec-page .affiliations-empty,
    body:not(.portfolioTemplate) .fe-portfolio-pages-endorsements-sec-page .endorsements-empty {
        padding: 2rem 1.25rem;
    }
    body:not(.portfolioTemplate) .fe-portfolio-pages-educations-sec-page .educations-empty i,
    body:not(.portfolioTemplate) .fe-portfolio-pages-experiences-sec-page .experiences-empty i,
    body:not(.portfolioTemplate) .fe-portfolio-pages-community-engagements-sec-page .community-engagements-empty i,
    body:not(.portfolioTemplate) .fe-portfolio-pages-professional-interests-sec-page .professional-interests-empty i,
    body:not(.portfolioTemplate) .fe-portfolio-pages-artifacts-sec-page .artifacts-empty i,
    body:not(.portfolioTemplate) .fe-portfolio-pages-affiliations-sec-page .affiliations-empty i,
    body:not(.portfolioTemplate) .fe-portfolio-pages-endorsements-sec-page .endorsements-empty i {
        width: 72px;
        height: 72px;
        font-size: 1.9rem;
    }
}

/* Inline PDF viewer (mobile) — rendered by assets/js/pdf-inline-viewer.js */
.pdf-canvas-holder {
    width: 100%;
    max-height: 600px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px;
}
.pdf-canvas-holder .pdf-page-canvas {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 12px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}
.pdf-canvas-holder .pdf-page-canvas:last-child {
    margin-bottom: 0;
}
.pdf-canvas-loading,
.pdf-canvas-error {
    padding: 24px 16px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}
.pdf-canvas-error a {
    color: #2563eb;
    text-decoration: underline;
}