.previous-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #666666 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-top: 24px !important;
    transition: color 0.2s ease !important;
}

.previous-link:hover {
    color: #180057 !important;
    text-decoration: none !important;
}

.previous-link svg {
    flex-shrink: 0 !important;
}

.password-requirements {
    color: #888888 !important;
    font-size: 14px !important;
    margin-top: 8px !important;
    line-height: 1.4 !important;
    font-weight: 300;
}

.password-requirements.error {
    color: #EF4444 !important;
    font-size: 14px !important;
    font-weight: 300 !important;
}

.casdoor-top-notification {
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    border: 1px solid #EEEEEE !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    animation: slideDownFadeIn 0.3s ease-out !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.casdoor-top-notification.success {
    color: #22C55E !important;
    font-size: 16px !important;
    font-family: HarmonyOS Sans SC, sans-serif !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    word-wrap: break-word !important;
}

.casdoor-top-notification.error {
    color: #d81e06 !important;
    font-size: 16px !important;
    font-family: HarmonyOS Sans SC, sans-serif !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    word-wrap: break-word !important;
}

.casdoor-notification-icon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

@keyframes slideDownFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.casdoor-login-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 60vh !important;
    padding: 126px 0 313px 0 !important;
    box-sizing: border-box !important;
}

.casdoor-login-form {
    background: #ffffff !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    padding: 64px !important;
    width: 100% !important;
    max-width: 640px !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.casdoor-login-title {
    font-size: 40px !important;
    font-weight: 900 !important;
    color: #000000 !important;
    margin-bottom: 40px !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.password-toggle-icon {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.password-toggle-icon:hover {
    background-color: #f3f4f6 !important;
}

.password-field-wrapper {
    position: relative !important;
    display: block !important;
}

.password-field-wrapper input {
    padding-right: 48px !important;
}

.select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    height: 48px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #333333 !important;
    font-size: 14px !important;
    line-height: 48px !important;
    padding: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
    right: 16px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 7px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7" fill="none"><path d="M0.600098 0.599609L5.6001 5.59961L10.6001 0.599609" stroke="%23707070" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}

.select2-dropdown {
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #180057 !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option {
    padding: 8px 16px !important;
    font-size: 14px !important;
}

.select2-container {
    width: 100% !important;
}

.casdoor-form-group {
    margin-bottom: 16px;
}

.casdoor-form-group:last-of-type {
    margin-bottom: 0;
}

.casdoor-form-group label {
    display: flex;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 8px;
}

.casdoor-form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    font-size: 14px;
    color: #333333;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.casdoor-form-group input::placeholder {
    color: #a0a6b0;
}

.casdoor-form-group input:focus {
    outline: none;
    border-color: #5c6ac4;
    box-shadow: 0 0 0 3px rgba(92, 106, 196, 0.1);
}

.casdoor-auth-login-button {
    display: flex !important;
    width: 208px !important;
    height: 40px !important;
    padding: 5px 16px !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #180057 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    margin-top: 40px !important;
    margin-bottom: 24px !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.casdoor-auth-login-button:hover {
    background-color: #9688B3 !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
    color: #ffffff !important;
}

.casdoor-auth-login-button:active {
    transform: translateY(0) !important;
    background-color: #8A7BA8 !important;
    color: #ffffff !important;
}

.casdoor-auth-login-button:disabled {
    background-color: #a0a6b0 !important;
    cursor: not-allowed !important;
    transform: none !important;
    color: #ffffff !important;
}

.casdoor-login-text {
    flex: 0 0 auto;
    order: 1;
}

.casdoor-login-arrow {
    flex: 0 0 auto;
    order: 2;
    transition: transform 0.2s ease;
}

.casdoor-auth-login-button:hover .casdoor-login-arrow {
    transform: translateX(2px) !important;
}

.login-links {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 32px !important;
    margin-top: 24px !important;
}

.forgot-password-link,
.register-link {
    color: #180057 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    transition: color 0.2s ease !important;
}

.forgot-password-link:hover,
.register-link:hover {
    color: #2d0a8a !important;
    text-decoration: underline !important;
}

.privacy-checkbox {
    margin-bottom: 24px;
    display: flex;
    align-content: center;
    gap: 8px;
    align-items: center;
}

.privacy-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('https://dev.liftvivo.com/wp-content/uploads/2025/12/Checkbo3x.svg');
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.privacy-checkbox input[type="checkbox"]:checked {
    background-image: url('https://dev.liftvivo.com/wp-content/uploads/2025/12/Check2box.svg');
}

.privacy-checkbox label {
    color: #888888 !important;
    font-size: 16px !important;
    font-family: HarmonyOS Sans SC, sans-serif !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    word-wrap: break-word !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.casdoor-form-links {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 24px !important;
}

.casdoor-form-links .casdoor-forgot-link,
.casdoor-form-links .casdoor-register-link,
.casdoor-form-links .casdoor-privacy-link {
    color: #170057 !important;
    font-size: 16px !important;
    transition: color 0.2s ease !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    font-weight: 400 !important;
}

.casdoor-form-links .casdoor-forgot-link:hover,
.casdoor-form-links .casdoor-register-link:hover,
.casdoor-form-links .casdoor-privacy-link:hover {
    color: #0f0040 !important;
    text-decoration: underline !important;
    background: none !important;
}

/* Enhanced message styles to override theme */
.casdoor-login-form .casdoor-login-messages,
.casdoor-login-container .casdoor-login-messages,
.casdoor-login-messages {
    margin-bottom: 20px !important;
    width: 100% !important;
    display: block !important;
}

.casdoor-login-form .casdoor-message,
.casdoor-login-container .casdoor-message,
.casdoor-message {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.casdoor-login-form .casdoor-message.error,
.casdoor-login-container .casdoor-message.error,
.casdoor-message.error {
    background-color: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #dc2626 !important;
}

.casdoor-login-form .casdoor-message.success,
.casdoor-login-container .casdoor-message.success,
.casdoor-message.success {
    background-color: #d1fae5 !important;
    border: 1px solid #86efac !important;
    color: #059669 !important;
}

.casdoor-login-form .casdoor-message.info,
.casdoor-login-container .casdoor-message.info,
.casdoor-message.info {
    background-color: #dbeafe !important;
    border: 1px solid #93c5fd !important;
    color: #2563eb !important;
}

.casdoor-logged-in {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 32px;
    max-width: 500px;
    margin: 20px auto;
}

.casdoor-user-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.casdoor-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.casdoor-user-details h3 {
    margin: 0 0 8px 0;
    color: #333333;
    font-size: 20px;
}

.casdoor-user-details p {
    margin: 0 0 16px 0;
    color: #666666;
}

.casdoor-member-level {
    font-weight: 600;
    color: #5c6ac4;
    text-transform: capitalize;
}

.casdoor-user-actions {
    display: flex;
    gap: 12px;
}

.casdoor-dashboard-btn,
.casdoor-logout-btn {
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.casdoor-dashboard-btn {
    background-color: #5c6ac4;
    color: #ffffff;
}

.casdoor-dashboard-btn:hover {
    background-color: #4a2373;
}

.casdoor-logout-btn {
    background-color: #f5f5f5;
    color: #666666;
}

.casdoor-logout-btn:hover {
    background-color: #e0e0e0;
    color: #333333;
}

.casdoor-error {
    background-color: #fee;
    border: 1px solid #fcc;
    color: #c33;
    padding: 16px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
}



.req-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: #666;
}

.req-item:last-child {
    margin-bottom: 0;
}

.req-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dee2e6;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 12px;
    transition: all 0.2s ease;
}

.req-item.valid .req-icon {
    background: #28a745;
    color: white;
}

.req-item.valid {
    color: #28a745;
}

.password-match-indicator {
    margin-top: 5px;
    font-size: 14px;
    min-height: 20px;
}

.password-match-indicator.match {
    color: #28a745;
}

.password-match-indicator.no-match {
    color: #dc3545;
}

/* Step Indicator Styles */
.register-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    padding: 0 20px;
}

.step {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
}

.step.active {
    background: #170057;
    color: white;
}

.step.completed {
    background: #28a745;
    color: white;
}

.step-line {
    width: 60px;
    height: 2px;
    background: #e9ecef;
    margin: 0 10px;
    transition: all 0.3s ease;
}

.step-line.completed {
    background: #28a745;
}

.register-content h3 {
    text-align: center;
    color: #170057;
    font-size: 24px;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.register-desc {
    color: #666;
    margin-bottom: 40px;
    font-size: 14px;
    font-weight: 300;
}

.register-error {
    text-align: center;
    padding: 40px 20px;
}

.register-error h3 {
    color: #dc3545;
    margin-bottom: 15px;
}

.register-error p {
    color: #666;
    margin-bottom: 25px;
}

.casdoor-btn {
    display: inline-block;
    background: #170057;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.casdoor-btn:hover {
    background: #A79EBF;
    color: white;
    text-decoration: none;
}

/* Checkbox Styles */
.casdoor-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

.casdoor-checkbox-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #180057;
    cursor: pointer;
    flex-shrink: 0;
}

.casdoor-checkbox-wrapper input[type="checkbox"]:checked {
    background-color: #180057;
}

.casdoor-checkbox-text {
    color: #888888;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
    flex: 1;
}

/* Privacy Link Styles - Enhanced specificity to override theme */
.casdoor-login-form .casdoor-privacy-link,
.casdoor-login-container .casdoor-privacy-link,
a.casdoor-privacy-link,
.privacy-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #170057 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-family: HarmonyOS Sans SC, sans-serif !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    word-wrap: break-word !important;
    transition: all 0.2s ease !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    text-transform: none !important;
}

/* Privacy Link Arrow */
.casdoor-login-form .casdoor-privacy-link::after,
.casdoor-login-container .casdoor-privacy-link::after,
a.casdoor-privacy-link::after,
.privacy-link::after {
    content: "›" !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    color: #170057 !important;
    margin-left: 4px !important;
    transition: transform 0.2s ease !important;
    letter-spacing: normal !important;
}

.casdoor-login-form .casdoor-privacy-link:hover,
.casdoor-login-container .casdoor-privacy-link:hover,
a.casdoor-privacy-link:hover,
.casdoor-privacy-link:hover,
.privacy-link:hover {
    color: #A79EBF !important;
}

/* Privacy Link Arrow Hover */
.casdoor-login-form .casdoor-privacy-link:hover::after,
.casdoor-login-container .casdoor-privacy-link:hover::after,
a.casdoor-privacy-link:hover::after,
.privacy-link:hover::after {
    color: #A79EBF !important;
    transform: translateX(2px) !important;
    text-decoration: underline !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.casdoor-login-form .casdoor-privacy-link svg,
.casdoor-login-container .casdoor-privacy-link svg,
a.casdoor-privacy-link svg,
.casdoor-privacy-link svg {
    transition: transform 0.2s ease !important;
    fill: none !important;
    stroke: currentColor !important;
}

.casdoor-login-form .casdoor-privacy-link:hover svg,
.casdoor-login-container .casdoor-privacy-link:hover svg,
a.casdoor-privacy-link:hover svg,
.casdoor-privacy-link:hover svg {
    transform: translateX(2px) !important;
}


.casdoor-email-description {
    margin: 0;
    padding: 0;
    color: #888888;
    font-family: var(--font-style-italic, "HarmonyOS Sans SC");
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: var(--typography-base-sizes-small-line-height, 20px);
}

.casdoor-error-page {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 20px !important;
    background-color: #f9fafb !important;
}

.error-container {
    max-width: 1000px !important;
    width: 100% !important;
}

.error-title {
    font-size: 56px !important;
    font-weight: 900 !important;
    color: #000000 !important;
    margin: 0 0 40px 0 !important;
    line-height: 1.2 !important;
}

.error-content {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 40px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

.error-alert {
    display: flex !important;
    gap: 16px !important;
    padding: 20px !important;
    background-color: #FEE2E2 !important;
    border: 1px solid #FECACA !important;
    border-radius: 8px !important;
    margin-bottom: 32px !important;
}

.error-icon {
    flex-shrink: 0 !important;
}

.error-text {
    flex: 1 !important;
}

.error-subtitle {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin: 0 0 8px 0 !important;
}

.error-message {
    font-size: 14px !important;
    color: #666666 !important;
    margin: 0 !important;
}

.error-suggestions {
    margin-bottom: 32px !important;
}

.suggestions-title {
    font-size: 16px !important;
    color: #666666 !important;
    margin: 0 0 16px 0 !important;
}

.suggestions-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.suggestions-list li {
    font-size: 16px !important;
    color: #666666 !important;
    padding-left: 24px !important;
    margin-bottom: 8px !important;
    position: relative !important;
}

.suggestions-list li:before {
    content: "·" !important;
    position: absolute !important;
    left: 8px !important;
    font-weight: bold !important;
}

.try-again-button {
    display: inline-block !important;
    padding: 12px 28px !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    text-decoration: none !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.try-again-button:hover {
    background-color: #f9fafb !important;
    border-color: #9ca3af !important;
    text-decoration: none !important;
}

.casdoor-registration-success {
    display: flex !important;
    justify-content: center !important;
    padding: 190px 0px !important;
    background-color: #f9fafb !important;
}

.success-container {
    max-width: 512px !important;
    width: 100% !important;
    text-align: center !important;
    height: auto;
}

.success-title {
    font-size: 40px !important;
    font-weight: 900 !important;
    color: #000000 !important;
    margin: 0 0 40px 0 !important;
    line-height: 1.2 !important;
    text-align: left !important;;
}

.success-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
}

.success-icon {
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 40px !important;
    height: 40px !important;
}

.success-icon svg {
    width: 40px !important;
    height: 40px !important;
}

.success-text {
    flex: 1 !important;
}

.success-subtitle {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    margin: 0 0 16px 0 !important;
    text-align: left;
}

.success-message {
    font-size: 16px !important;
    color: #666666 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    text-align: left;
}

.success-actions {
    display: flex !important;
    justify-content: flex-start !important;
}

.edit-profile-button {
    display: inline-block !important;
    padding: 8px 24px !important;
    color: #333333 !important;
    text-decoration: none !important;
    border: 1px solid #D6D6D6 !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    transition: all 0.2s ease !important;
    background: #F9F9F9;
}

.edit-profile-button:hover {
    background-color: #f9fafb !important;
    border-color: #9ca3af !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .success-title {
        font-size: 32px !important;
    }
    
    .success-content {
        display: flex !important;
        align-items: flex-start !important;
        gap: 24px !important;
        margin-bottom: 10px !important;
    }
    
    .success-subtitle {
        font-size: 20px !important;
        font-weight: 600 !important;
        color: #333333 !important;
        margin: 0 0 10px 0 !important;
        text-align: left;
    }
    
    .casdoor-registration-success {
        display: flex !important;
        justify-content: center !important;
        padding: 150px 10px !important;
        background-color: #f9fafb !important;
    }
}

@media (max-width: 480px) {
    .casdoor-login-form {
        padding: 32px 24px;
        margin: 20px;
    }
    
    .casdoor-user-info {
        flex-direction: column;
        text-align: center;
    }
    
    .casdoor-user-actions {
        justify-content: center;
    }
    
    .success-title {
        font-size: 32px !important;
        margin-bottom: 0px !important;
    }
}

/* Forgot Password Error/Success Messages */
.casdoor-error-message {
    margin-bottom: 20px !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    background-color: #FEE2E2 !important;
    border: 1px solid #FCA5A5 !important;
    color: #DC2626 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

.casdoor-error-message.casdoor-success-message {
    background-color: #D1FAE5 !important;
    border: 1px solid #6EE7B7 !important;
    color: #059669 !important;
}

.upc-menu-item.active {
    background: #F5F5F5;
    color: var(--dc-color-foreground-primary);
}:root {
    --dc-color-foreground-primary: #170057;
    --dc-color-background-tertiary: #ECEBF2;
    --dc-color-background-secondary: #F5F5F5;
    --dc-color-border-primary: #eee;
    --dc-color-text-primary: #333333;
    --dc-color-text-secondary: #888888;
    --dc-color-text-tertiary: #BBBBBB;
}

.upc-container {
    display: flex;
    background: #FFFFFF;
    border: 1px solid var(--dc-color-border-primary);
    border-radius: 4px;
    overflow: hidden;
    min-height: 590px;
    position: relative;
}

.upc-return {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    background: #F9F9F9;
    border: none;
    cursor: pointer;
}

.upc-return span {
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-small-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--typography-base-sizes-small-line-height, 20px);
}

.upc-sidebar {
    width: 320px;
    background: #FFFFFF;
    border-right: 1px solid var(--dc-color-border-primary);
    padding: 0;
}

.upc-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    border-bottom: 1px solid #eee;
}

.upc-avatar-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}

.upc-user-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.upc-username {
    color: var(--dc-color-text-primary, #333);
    text-align: center;
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
    margin-bottom: 2px;
}

.upc-email {
    color: var(--dc-color-text-secondary, #707070);
    text-align: center;
    font-size: var(--typography-base-sizes-extra-small-font-size, 12px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--typography-base-sizes-extra-small-line-height, 16px);
}

.upc-menu {
    display: flex;
    flex-direction: column;
    padding: 24px 0 0 0;
}

.upc-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--dc-color-text-secondary);
    font-size: 14px;
    border-radius: 0;
    transition: all 0.2s;
    background: #FFFFFF;
}

.upc-menu-item:hover {
    background: var(--dc-color-background-tertiary);
    color: var(--dc-color-foreground-primary);
}

.upc-menu-item:hover .upc-menu-icon-left path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item:hover .upc-menu-icon-right path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item.active {
    background: var(--dc-color-background-tertiary);
    color: var(--dc-color-foreground-primary);
}

.upc-menu-item.active .upc-menu-icon-left path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item.active .upc-menu-icon-right path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item span {
    flex: 1;
}

.upc-menu-icon-left {
    width: 20px;
    height: 20px;
}

.upc-menu-icon-right {
    width: 16px;
    height: 16px;
}

.upc-content {
    width: 880px;
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.upc-tabs {
    display: flex;
    border-bottom: 1px solid var(--dc-color-border-primary);
}

.upc-tab {
    flex: 1;
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid #eee;
    border-bottom: none;
    border-right: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
}

.upc-tab:first-child {
    border-left: 1px solid #eee;
}

.upc-tab:last-child {
    border-right: 1px solid #eee;
}

.upc-tab:hover {
    background: #ECEBF2;
    color: #170057;
    font-weight: 500;
}

.upc-tab.active {
    background: #ECEBF2;
    color: #170057;
    font-weight: 500;
}

.upc-tab-content {
    display: none;
    padding: 0;
}

.upc-tab-content.active {
    display: block;
}

.upc-avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0 28px 0;
    margin-bottom: 0;
}

.upc-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
}

.upc-upload-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border: 1px solid var(--dc-color-border-primary, #D6D6D6) !important;
    background: var(--dc-color-foreground-quaternary, #F5F5F5) !important;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--dc-color-text-primary, #333) !important;
    cursor: pointer;
    transition: all 0.2s;
}

.upc-upload-btn:hover {
    border: 1px solid var(--dc-color-border-brand-secondary, #A79EBF) !important;
    background: var(--dc-color-button-secondary-bg, #FFF) !important;
}

.upc-upload-btn:active {
    border: 1px solid var(--dc-color-border-brand, #170057) !important;
    background: var(--dc-color-background-primary, #FFF) !important;
}

.upc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.upc-form-group {
    display: flex;
    flex-direction: column;
}

.upc-form-group label {
    font-size: 16px;
    color: var(--dc-color-text-primary);
    margin-bottom: 8px;
    font-weight: 400;
    line-height: 24px;
}

.upc-form-group input {
    padding: 9px 16px;
    border: 1px solid #D6D6D6 !important;
    border-radius: 4px;
    font-size: 16px;
    color: var(--dc-color-text-primary, #333);
    font-weight: 400;
    line-height: 24px;
    transition: border-color 0.2s;
}

.upc-form-group input:focus {
    outline: none;
    border-color: #D6D6D6 !important;
}

.upc-form-group input::placeholder {
    color: var(--dc-color-text-tertiary);
}

.upc-password-field {
    position: relative;
}

.upc-password-field input {
    width: 100%;
    padding-right: 40px;
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
    border: 1px solid #D6D6D6 !important;
}

.upc-password-field input:focus {
    border-color: #D6D6D6 !important;
}

.upc-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upc-toggle-password svg {
    width: 16px;
    height: 16px;
}

.upc-password-requirements {
    margin-top: 16px;
    padding: 16px;
    background: var(--dc-color-background-secondary);
    border-radius: 4px;
}

.upc-requirements-title {
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-small-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: 100%;
    margin: 0 0 16px 0;
}

.upc-password-requirements ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.upc-password-requirements li {
    color: var(--dc-color-text-tertiary, #888) !important;
    font-size: var(--typography-base-sizes-small-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: 100%;
    margin-bottom: 8px;
    padding-left: 13px;
    position: relative;
}

.upc-password-requirements li:last-child {
    margin-bottom: 0;
}

.upc-password-requirements li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--dc-color-text-tertiary, #888);
}

.upc-form-actions {
    margin-top: 355px;
}

.upc-divider {
    display: none;
}

.upc-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.upc-btn-cancel,
.upc-btn-save {
    padding: 8px 24px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.upc-btn-cancel {
    border: 1px solid var(--dc-color-border-primary, #D6D6D6) !important;
    background: var(--dc-color-foreground-quaternary, #F5F5F5) !important;
    color: var(--dc-color-text-primary, #333) !important;
}

.upc-btn-cancel:hover {
    border: 1px solid var(--dc-color-border-brand-secondary, #A79EBF) !important;
    background: var(--dc-color-button-secondary-bg, #FFF) !important;
}

.upc-btn-cancel:active {
    border: 1px solid var(--dc-color-border-brand, #170057) !important;
    background: var(--dc-color-background-primary, #FFF) !important;
}

.upc-btn-save {
    background: var(--dc-color-foreground-primary, #170057) !important;
    color: var(--dc-color-text-white, #FFF) !important;
    border: none !important;
}

.upc-btn-save:hover {
    background: var(--dc-color-foreground-primary-subtle, #61528D) !important;
}

.upc-btn-save:active {
    background: linear-gradient(0deg, var(--dc-alpha-90, rgba(0, 0, 0, 0.10)) 0%, var(--dc-alpha-90, rgba(0, 0, 0, 0.10)) 100%), var(--dc-color-foreground-primary, #170057) !important;
    box-shadow: 0 0 1px var(--opacity-opacity-0, 0) var(--dc-color-foreground-tertiary, #ECEBF2) !important;
}

#company-info-form,
#change-password-form {
    padding-top: 24px;
}

@media (max-width: 768px) {
    .upc-return {
        display: flex !important;
        width: calc(100% - 40px) !important;
        margin: 0 20px 0 20px !important;
        background-color: #F9F9F9 !important;
        padding: 8px 0 !important;
        border: none !important;
        border-radius: 4px 4px 0 0 !important;
    }
    
    .upc-return.show-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 20px !important;
        border-radius: 0 !important;
    }
    
    .upc-container {
        display: flex !important;
        position: relative !important;
        overflow: hidden !important;
        width: calc(100% - 40px) !important;
        margin: 0 20px !important;
        padding: 0 !important;
        border-radius: 0 0 4px 4px !important;
    }
    
    .upc-container.show-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    
    .upc-sidebar,
    .upc-content {
        flex-shrink: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        transition: transform 0.3s ease-in-out !important;
        background: #FFFFFF !important;
    }
    
    .upc-sidebar {
        transform: translateX(0) !important;
        border-right: none !important;
        padding: 0 !important;
        min-height: 560px !important;
        border-radius: 0 0 4px 4px !important;
        overflow-y: auto !important;
    }
    
    .upc-content {
        transform: translateX(0) !important;
        padding: 20px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    .upc-container.show-content .upc-content {
        border-radius: 0 !important;
    }
    
    .upc-container.show-content .upc-sidebar {
        transform: translateX(-100%) !important;
    }
    
    .upc-container.show-content .upc-content {
        transform: translateX(-100%) !important;
    }
    
    .upc-tabs {
        display: flex !important;
        border-bottom: 1px solid var(--dc-color-border-primary) !important;
        margin-bottom: 24px !important;
    }
    
    .upc-tab {
        flex: 1 !important;
        padding: 8px 16px !important;
        background: #FFFFFF !important;
        border: 1px solid #eee !important;
        border-bottom: none !important;
        border-right: none !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
        color: #333 !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    .upc-tab:first-child {
        border-left: 1px solid #eee !important;
    }
    
    .upc-tab:last-child {
        border-right: 1px solid #eee !important;
    }
    
    .upc-tab:hover {
        background: #ECEBF2 !important;
        color: #170057 !important;
        font-weight: 500 !important;
    }
    
    .upc-tab.active {
        background: #ECEBF2 !important;
        color: #170057 !important;
        font-weight: 500 !important;
    }
    
    .upc-tab-content {
        padding: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    .upc-menu-item {
        background: #FFFFFF !important;
        color: #333333 !important;
        border-left: none !important;
    }
    
    .upc-menu-item svg path {
        stroke: #888888 !important;
    }
    
    .upc-menu-item:hover,
    .upc-menu-item.active {
        background: var(--dc-color-background-tertiary) !important;
        color: var(--dc-color-foreground-primary) !important;
        border-left: 1px solid #170057 !important;
    }
    
    .upc-menu-item:hover svg path,
    .upc-menu-item.active svg path {
        stroke: var(--dc-color-foreground-primary) !important;
    }
    
    .upc-avatar-upload {
        padding: 0 0 28px 0 !important;
    }
    
    .upc-form-actions {
        margin-top: 30px !important;
    }
    
    .upc-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        justify-content: space-between !important;
    }
    
    .upc-btn-cancel,
    .upc-btn-save {
        flex: 1 !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    
    .upc-form-row {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   User Profile Center Styles
   ======================================== */

:root {
    --dc-color-foreground-primary: #170057;
    --dc-color-background-tertiary: #ECEBF2;
    --dc-color-background-secondary: #F5F5F5;
    --dc-color-border-primary: #eee;
    --dc-color-text-primary: #333333;
    --dc-color-text-secondary: #888888;
    --dc-color-text-tertiary: #BBBBBB;
}

.upc-container {
    display: flex;
    background: #FFFFFF;
    border: 1px solid var(--dc-color-border-primary);
    border-radius: 4px;
    overflow: hidden;
    min-height: 590px;
    position: relative;
}

.upc-return {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    background: #F9F9F9;
    border: none;
    cursor: pointer;
}

.upc-return span {
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-small-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--typography-base-sizes-small-line-height, 20px);
}

.upc-sidebar {
    width: 320px;
    background: #FFFFFF;
    border-right: 1px solid var(--dc-color-border-primary);
    padding: 0;
}

.upc-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    border-bottom: 1px solid #eee;
}

.upc-avatar-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
    display: none; /* PC端隐藏头像 */
}

.upc-user-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.upc-username {
    color: var(--dc-color-text-primary, #333);
    text-align: center;
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
    margin-bottom: 2px;
}

.upc-email {
    color: var(--dc-color-text-secondary, #707070);
    text-align: center;
    font-size: var(--typography-base-sizes-extra-small-font-size, 12px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--typography-base-sizes-extra-small-line-height, 16px);
}

.upc-menu {
    display: flex;
    flex-direction: column;
    padding: 24px 0 0 0;
}

.upc-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--dc-color-text-secondary);
    font-size: 14px;
    border-radius: 0;
    transition: all 0.2s;
    background: #FFFFFF;
}

.upc-menu-item:hover {
    background: var(--dc-color-background-tertiary);
    color: var(--dc-color-foreground-primary);
}

.upc-menu-item:hover .upc-menu-icon-left path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item:hover .upc-menu-icon-right path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item.active {
    background: #F5F5F5;
    color: var(--dc-color-foreground-primary);
}

.upc-menu-item.active .upc-menu-icon-left path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item.active .upc-menu-icon-right path {
    stroke: var(--dc-color-foreground-primary);
}

.upc-menu-item span {
    flex: 1;
}

.upc-menu-icon-left {
    width: 20px;
    height: 20px;
}

.upc-menu-icon-right {
    width: 16px;
    height: 16px;
}

.upc-content {
    width: 880px;
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.upc-tabs {
    display: flex;
    border-bottom: 1px solid var(--dc-color-border-primary);
}

.upc-tab {
    flex: 1;
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid #eee;
    border-bottom: none;
    border-right: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
}

.upc-tab:first-child {
    border-left: 1px solid #eee;
}

.upc-tab:last-child {
    border-right: 1px solid #eee;
}

.upc-tab:hover {
    background: #ECEBF2;
    color: #170057;
    font-weight: 500;
}

.upc-tab.active {
    background: #ECEBF2;
    color: #170057;
    font-weight: 500;
}

.upc-tab-content {
    display: none;
    padding: 0;
}

.upc-tab-content.active {
    display: block;
}

.upc-avatar-upload {
    display: none; /* PC端隐藏头像上传 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0 28px 0;
    margin-bottom: 0;
}

.upc-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
}

.upc-upload-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border: 1px solid var(--dc-color-border-primary, #D6D6D6) !important;
    background: var(--dc-color-foreground-quaternary, #F5F5F5) !important;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--dc-color-text-primary, #333) !important;
    cursor: pointer;
    transition: all 0.2s;
}

.upc-upload-btn:hover {
    border: 1px solid var(--dc-color-border-brand-secondary, #A79EBF) !important;
    background: var(--dc-color-button-secondary-bg, #FFF) !important;
}

.upc-upload-btn:active {
    border: 1px solid var(--dc-color-border-brand, #170057) !important;
    background: var(--dc-color-background-primary, #FFF) !important;
}

.upc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.upc-form-group {
    display: flex;
    flex-direction: column;
}

.upc-form-group label {
    font-size: 16px;
    color: var(--dc-color-text-primary);
    margin-bottom: 8px;
    font-weight: 400;
    line-height: 24px;
}

.upc-form-group input {
    padding: 9px 16px;
    border: 1px solid #D6D6D6 !important;
    border-radius: 4px;
    font-size: 16px;
    color: var(--dc-color-text-primary, #333);
    font-weight: 400;
    line-height: 24px;
    transition: border-color 0.2s;
}

.upc-form-group input:focus {
    outline: none;
    border-color: #D6D6D6 !important;
}

.upc-form-group input::placeholder {
    color: var(--dc-color-text-tertiary);
}

.upc-password-field {
    position: relative;
}

.upc-password-field input {
    width: 100%;
    padding-right: 40px;
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
    border: 1px solid #D6D6D6 !important;
}

.upc-password-field input:focus {
    border-color: #D6D6D6 !important;
}

.upc-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upc-toggle-password svg {
    width: 16px;
    height: 16px;
}

.upc-password-requirements {
    margin-top: 16px;
    padding: 16px;
    background: var(--dc-color-background-secondary);
    border-radius: 4px;
}

.upc-requirements-title {
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-small-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: 100%;
    margin: 0 0 16px 0;
}

.upc-password-requirements ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.upc-password-requirements li {
    color: var(--dc-color-text-tertiary, #888) !important;
    font-size: var(--typography-base-sizes-small-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: 100%;
    margin-bottom: 8px;
    padding-left: 13px;
    position: relative;
}

.upc-password-requirements li:last-child {
    margin-bottom: 0;
}

.upc-password-requirements li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--dc-color-text-tertiary, #888);
}

.upc-form-actions {
    margin-top: 355px;
}

.upc-divider {
    display: none;
}

.upc-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.upc-btn-cancel,
.upc-btn-save {
    padding: 8px 24px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.upc-btn-cancel {
    border: 1px solid var(--dc-color-border-primary, #D6D6D6) !important;
    background: var(--dc-color-foreground-quaternary, #F5F5F5) !important;
    color: var(--dc-color-text-primary, #333) !important;
}

.upc-btn-cancel:hover {
    border: 1px solid var(--dc-color-border-brand-secondary, #A79EBF) !important;
    background: var(--dc-color-button-secondary-bg, #FFF) !important;
}

.upc-btn-cancel:active {
    border: 1px solid var(--dc-color-border-brand, #170057) !important;
    background: var(--dc-color-background-primary, #FFF) !important;
}

.upc-btn-save {
    background: var(--dc-color-foreground-primary, #170057) !important;
    color: var(--dc-color-text-white, #FFF) !important;
    border: none !important;
}

.upc-btn-save:hover {
    background: var(--dc-color-foreground-primary-subtle, #61528D) !important;
}

.upc-btn-save:active {
    background: linear-gradient(0deg, var(--dc-alpha-90, rgba(0, 0, 0, 0.10)) 0%, var(--dc-alpha-90, rgba(0, 0, 0, 0.10)) 100%), var(--dc-color-foreground-primary, #170057) !important;
    box-shadow: 0 0 1px var(--opacity-opacity-0, 0) var(--dc-color-foreground-tertiary, #ECEBF2) !important;
}

form#basic-info-form {
    padding-top: 24px;
}

#company-info .upc-form-actions {
    margin-top: 180px;
}

#change-password .upc-form-actions {
    margin-top: 192px;
}

#company-info-form,
#change-password-form {
    padding-top: 24px;
}

@media (max-width: 768px) {
    .upc-return {
        display: flex !important;
        width: calc(100% - 40px) !important;
        margin: 0 20px 0 20px !important;
        background-color: #F9F9F9 !important;
        padding: 8px 0 !important;
        border: none !important;
        border-radius: 4px 4px 0 0 !important;
    }
    
    .upc-return.show-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 20px !important;
        border-radius: 0 !important;
    }
    
    .upc-container {
        display: flex !important;
        position: relative !important;
        overflow: hidden !important;
        width: calc(100% - 40px) !important;
        margin: 0 20px !important;
        padding: 0 !important;
        border-radius: 0 0 4px 4px !important;
    }
    
    .upc-container.show-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    
    .upc-sidebar,
    .upc-content {
        flex-shrink: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        transition: transform 0.3s ease-in-out !important;
        background: #FFFFFF !important;
    }
    
    .upc-sidebar {
        transform: translateX(0) !important;
        border-right: none !important;
        padding: 0 !important;
        min-height: 560px !important;
        border-radius: 0 0 4px 4px !important;
        overflow-y: auto !important;
    }
    
    .upc-content {
        transform: translateX(0) !important;
        padding: 20px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    .upc-container.show-content .upc-content {
        border-radius: 0 !important;
    }
    
    .upc-container.show-content .upc-sidebar {
        transform: translateX(-100%) !important;
    }
    
    .upc-container.show-content .upc-content {
        transform: translateX(-100%) !important;
    }
    
    .upc-tabs {
        display: flex !important;
        border-bottom: 1px solid var(--dc-color-border-primary) !important;
        margin-bottom: 24px !important;
    }
    
    .upc-tab {
        flex: 1 !important;
        padding: 8px 16px !important;
        background: #FFFFFF !important;
        border: 1px solid #eee !important;
        border-bottom: none !important;
        border-right: none !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
        color: #333 !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    .upc-tab:first-child {
        border-left: 1px solid #eee !important;
    }
    
    .upc-tab:last-child {
        border-right: 1px solid #eee !important;
    }
    
    .upc-tab:hover {
        background: #ECEBF2 !important;
        color: #170057 !important;
        font-weight: 500 !important;
    }
    
    .upc-tab.active {
        background: #ECEBF2 !important;
        color: #170057 !important;
        font-weight: 500 !important;
    }
    
    .upc-tab-content {
        padding: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    .upc-menu-item {
        background: #FFFFFF !important;
        color: #333333 !important;
        border-left: none !important;
    }
    
    .upc-menu-item svg path {
        stroke: #888888 !important;
    }
    
    .upc-menu-item:hover,
    .upc-menu-item.active {
        background: var(--dc-color-background-tertiary) !important;
        color: var(--dc-color-foreground-primary) !important;
        border-left: 1px solid #170057 !important;
    }
    
    .upc-menu-item:hover svg path,
    .upc-menu-item.active svg path {
        stroke: var(--dc-color-foreground-primary) !important;
    }
    
    .upc-avatar-upload {
        padding: 0 0 28px 0 !important;
    }
    
    .upc-form-actions {
        margin-top: 30px !important;
    }
    
    .upc-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        justify-content: space-between !important;
    }
    
    .upc-btn-cancel,
    .upc-btn-save {
        flex: 1 !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    
    .upc-form-row {
        grid-template-columns: 1fr !important;
    }
}