:root {
    /* Base Colors */
    --plm-black-300: #121212;
    --plm-black-200: #201F23;
    --plm-grey-300: #45515C;
    --plm-grey-200: #596269;
    --plm-white: #FFFFFF;

    /* Green Palette */
    --plm-army: #395917;
    --plm-dark-green-300: #4C6C5A;
    --plm-dark-green-200: #617C6C;
    --plm-soft-green-200: #A4C8AE;
    --plm-soft-green-100: #E6EFEA;

    /* Purple Palette */
    --plm-purple-300: #595D75;
    --plm-purple-200: #B8BED5;
    --plm-purple-100: #E3E4EA;

    /* Beige Palette */
    --plm-beige-300: #A39170;
    --plm-beige-200: #E5D6B8;

    /* Tosca & Red */
    --plm-tosca: #C1D8DA;
    --plm-red: #9B140B;

    /* Mapping to semantic variables */
    --plm-bg: var(--plm-soft-green-100);
    --plm-surface: var(--plm-white);
    --plm-text-primary: var(--plm-black-300);
    --plm-text-secondary: var(--plm-grey-300);
    --plm-primary: var(--plm-black-300);
    --plm-primary-hover: var(--plm-black-200);
    --plm-accent: var(--plm-dark-green-300);
    --plm-border: var(--plm-purple-100);
    --plm-success: var(--plm-dark-green-300);
    --plm-error: var(--plm-red);

    /* Spacing & Radius */
    --plm-radius-sm: 8px;
    --plm-radius-md: 16px;
    --plm-radius-lg: 20px;
    --plm-radius-xl: 32px;
    --plm-radius-full: 999px;

    --plm-space-xs: 8px;
    --plm-space-sm: 16px;
    --plm-space-md: 24px;
    --plm-space-lg: 32px;
    --plm-space-xl: 48px;
    --plm-space-section: 80px;

    --plm-checkbox-size: 20px;
}

#plm-plugin-ui {
    font-family: 'Manrope', sans-serif !important;
    color: var(--plm-text-primary);
    line-height: 1.5;
    width: 100% !important;
    font-size: 16px;
}

#plm-plugin-ui * {
    box-sizing: border-box;
    text-decoration: none !important;
}

#plm-plugin-ui a:hover {
    text-decoration: none !important;
}

#plm-plugin-ui h1, #plm-plugin-ui h2, #plm-plugin-ui h3, #plm-plugin-ui h4, #plm-plugin-ui h5, #plm-plugin-ui h6, #plm-plugin-ui input, #plm-plugin-ui select, #plm-plugin-ui textarea {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700;
    line-height: 1.2;
    color: var(--plm-text-primary);
}

#plm-plugin-ui h1 { font-size: 32px !important; }
#plm-plugin-ui h2 { font-size: 36px !important; }
#plm-plugin-ui h3 { font-size: 24px !important; line-height: 140% !important; }
#plm-plugin-ui h4 { font-size: 20px !important; }

#plm-plugin-ui button {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600;
    line-height: 1.2;
    font-size: 16px;
    border-radius: 12px;
}

#plm-plugin-ui p {
    font-family: 'Manrope', sans-serif !important;
    margin-bottom: 1rem;
    font-size: 16px;
    line-height: 140%;
    color: var(--plm-text-secondary);
}

#plm-plugin-ui .plm-body-1 { font-size: 20px !important; }
#plm-plugin-ui .plm-body-2 { font-size: 16px !important; line-height: 32px !important; }
#plm-plugin-ui .plm-body-3 { font-size: 16px !important; line-height: 140% !important; }
#plm-plugin-ui .plm-body-4 { font-size: 14px !important; line-height: 180% !important; }
#plm-plugin-ui .plm-body-5 { font-size: 12px !important; }

#plm-plugin-ui .plm-text-sm { font-size: 14px !important; }
#plm-plugin-ui .plm-text-xs { font-size: 12px !important; }
#plm-plugin-ui .plm-text-lg { font-size: 18px !important; }
#plm-plugin-ui .plm-text-xl { font-size: 20px !important; }
#plm-plugin-ui .plm-text-2xl { font-size: 24px !important; }
#plm-plugin-ui .plm-text-3xl { font-size: 32px !important; }

.plm-bg-green-50 { background-color: #F0FDF4; }
.plm-bg-blue-50 { background-color: #EFF6FF; }
.plm-bg-red-50 { background-color: #FEF2F2; }
.plm-text-success { color: var(--plm-success); }
.plm-border-success { border-color: #BBF7D0; }
.plm-text-error { color: var(--plm-error); }
.plm-border-error { border-color: #FECACA; }
/* Unified Custom Checkbox */
#plm-plugin-ui .plm-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: var(--plm-space-sm);
    cursor: pointer !important;
    user-select: none;
}

#plm-plugin-ui .plm-checkbox-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--plm-checkbox-size);
    height: var(--plm-checkbox-size);
    margin-top: 2px; /* Alignment for text content */
    cursor: pointer !important;
}

#plm-plugin-ui .plm-checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer !important;
    height: 20px !important;
    width: 20px !important;
    margin: 0 !important;
    z-index: 1;
}

#plm-plugin-ui .plm-checkbox-custom {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--plm-checkbox-size);
    width: var(--plm-checkbox-size);
    background-color: var(--plm-surface);
    border: 1.5px solid var(--plm-border);
    border-radius: 4px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer !important;
}

#plm-plugin-ui .plm-checkbox-input:checked ~ .plm-checkbox-container .plm-checkbox-custom,
#plm-plugin-ui .plm-checkbox-container .plm-checkbox-input:checked ~ .plm-checkbox-custom {
    background-color: var(--plm-accent);
    border-color: var(--plm-accent);
}

#plm-plugin-ui .plm-checkbox-custom:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#plm-plugin-ui .plm-checkbox-input:checked ~ .plm-checkbox-container .plm-checkbox-custom:after,
#plm-plugin-ui .plm-checkbox-container .plm-checkbox-input:checked ~ .plm-checkbox-custom:after {
    display: block;
}

#plm-plugin-ui .plm-checkbox-input:focus ~ .plm-checkbox-container .plm-checkbox-custom,
#plm-plugin-ui .plm-checkbox-container .plm-checkbox-input:focus ~ .plm-checkbox-custom {
    box-shadow: 0 0 0 2px rgba(31, 122, 99, 0.2);
}

#plm-plugin-ui .plm-checkbox-group label {
    cursor: pointer !important;
}

#plm-plugin-ui .plm-container-custom {
    width: 100%;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1400px;
}

@media (max-width: 1366px) {
    #plm-plugin-ui .plm-container-custom { max-width: 1170px; }
}

@media (max-width: 1200px) {
    #plm-plugin-ui .plm-container-custom { max-width: 100%; }
}

@media (max-width: 768px) {
    #plm-plugin-ui .plm-container-custom {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Scoped Utility Classes (Simulating Tailwind with Prefix) */
#plm-plugin-ui .plm-bg-bg { background-color: var(--plm-bg) !important; }
#plm-plugin-ui .plm-bg-surface { background-color: var(--plm-surface) !important; }
#plm-plugin-ui .plm-bg-white { background-color: var(--plm-white) !important; }
#plm-plugin-ui .plm-bg-primary { background-color: var(--plm-primary) !important; }
#plm-plugin-ui .plm-bg-accent { background-color: var(--plm-accent) !important; }

#plm-plugin-ui .plm-text-text { color: var(--plm-text-primary) !important; }
#plm-plugin-ui .plm-text-textLight { color: var(--plm-text-secondary) !important; }
#plm-plugin-ui .plm-text-white { color: var(--plm-white) !important; }
#plm-plugin-ui .plm-text-accent { color: var(--plm-accent) !important; }
#plm-plugin-ui .plm-text-primary { color: var(--plm-primary) !important; }

#plm-plugin-ui .plm-text-xs { font-size: 12px !important; }
#plm-plugin-ui .plm-text-sm { font-size: 14px !important; }
#plm-plugin-ui .plm-text-base { font-size: 16px !important; }
#plm-plugin-ui .plm-text-lg { font-size: 18px !important; }
#plm-plugin-ui .plm-text-xl { font-size: 20px !important; }
#plm-plugin-ui .plm-text-2xl { font-size: 24px !important; }
#plm-plugin-ui .plm-text-3xl { font-size: 32px !important; }
#plm-plugin-ui .plm-text-4xl { font-size: 36px !important; }

#plm-plugin-ui .plm-font-medium { font-weight: 500 !important; }
#plm-plugin-ui .plm-font-semibold { font-weight: 600 !important; }
#plm-plugin-ui .plm-font-bold { font-weight: 700 !important; }

#plm-plugin-ui .plm-rounded-sm { border-radius: var(--plm-radius-sm) !important; }
#plm-plugin-ui .plm-rounded-md { border-radius: var(--plm-radius-md) !important; }
#plm-plugin-ui .plm-rounded-lg { border-radius: var(--plm-radius-lg) !important; }
#plm-plugin-ui .plm-rounded-xl { border-radius: var(--plm-radius-xl) !important; }
#plm-plugin-ui .plm-rounded-full { border-radius: var(--plm-radius-full) !important; }

/* Spacing Utilities */
#plm-plugin-ui .plm-p-xs { padding: var(--plm-space-xs) !important; }
#plm-plugin-ui .plm-p-sm { padding: var(--plm-space-sm) !important; }
#plm-plugin-ui .plm-p-md { padding: var(--plm-space-md) !important; }
#plm-plugin-ui .plm-p-lg { padding: var(--plm-space-lg) !important; }
#plm-plugin-ui .plm-p-xl { padding: var(--plm-space-xl) !important; }

#plm-plugin-ui .plm-py-xs { padding-top: var(--plm-space-xs) !important; padding-bottom: var(--plm-space-xs) !important; }
#plm-plugin-ui .plm-py-sm { padding-top: var(--plm-space-sm) !important; padding-bottom: var(--plm-space-sm) !important; }
#plm-plugin-ui .plm-py-md { padding-top: var(--plm-space-md) !important; padding-bottom: var(--plm-space-md) !important; }
#plm-plugin-ui .plm-py-lg { padding-top: var(--plm-space-lg) !important; padding-bottom: var(--plm-space-lg) !important; }
#plm-plugin-ui .plm-py-xl { padding-top: var(--plm-space-xl) !important; padding-bottom: var(--plm-space-xl) !important; }
#plm-plugin-ui .plm-py-section { padding-top: var(--plm-space-section) !important; padding-bottom: var(--plm-space-section) !important; }

#plm-plugin-ui .plm-px-xs { padding-left: var(--plm-space-xs) !important; padding-right: var(--plm-space-xs) !important; }
#plm-plugin-ui .plm-px-sm { padding-left: var(--plm-space-sm) !important; padding-right: var(--plm-space-sm) !important; }
#plm-plugin-ui .plm-px-md { padding-left: var(--plm-space-md) !important; padding-right: var(--plm-space-md) !important; }

#plm-plugin-ui .plm-input-lg {
    padding-top: var(--plm-space-md) !important;
    padding-bottom: var(--plm-space-md) !important;
    height: 48px !important;
}

/* Side-by-Side Form Layout */
#plm-plugin-ui .plm-form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--plm-space-sm) !important;
    margin-bottom: var(--plm-space-lg) !important;
}

@media (min-width: 768px) {
    #plm-plugin-ui .plm-form-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--plm-space-lg) !important;
    }

    #plm-plugin-ui .plm-form-label-col {
        width: 240px !important;
        flex-shrink: 0 !important;
    }

    #plm-plugin-ui .plm-form-input-col {
        flex-grow: 1 !important;
    }
}

#plm-plugin-ui .plm-section-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--plm-text-primary) !important;
    border-bottom: 1px solid var(--plm-border) !important;
    padding-bottom: var(--plm-space-sm) !important;
    margin-bottom: var(--plm-space-lg) !important;
    margin-top: var(--plm-space-xl) !important;
}

#plm-plugin-ui .plm-section:first-child .plm-section-title {
    margin-top: 0 !important;
}
#plm-plugin-ui .plm-px-lg { padding-left: var(--plm-space-lg) !important; padding-right: var(--plm-space-lg) !important; }

#plm-plugin-ui .plm-mb-xs { margin-bottom: var(--plm-space-xs) !important; }
#plm-plugin-ui .plm-mb-xl { margin-bottom: var(--plm-space-xl) !important; }
#plm-plugin-ui .plm-mt-xl { margin-top: var(--plm-space-xl) !important; }

#plm-plugin-ui .plm-space-y-xs > :not([hidden]) ~ :not([hidden]) { margin-top: var(--plm-space-xs) !important; }
#plm-plugin-ui .plm-space-y-lg > :not([hidden]) ~ :not([hidden]) { margin-top: var(--plm-space-lg) !important; }
#plm-plugin-ui .plm-space-x-sm > :not([hidden]) ~ :not([hidden]) { margin-left: var(--plm-space-sm) !important; }

#plm-plugin-ui .plm-flex { display: flex !important; }
#plm-plugin-ui .plm-flex-col { flex-direction: column !important; }
#plm-plugin-ui .plm-justify-center { justify-content: center !important; }
#plm-plugin-ui .plm-justify-between { justify-content: space-between !important; }
#plm-plugin-ui .plm-items-center { align-items: center !important; }

#plm-plugin-ui .plm-w-full { width: 100% !important; }
#plm-plugin-ui .plm-max-w-md { max-width: 28rem !important; }

#plm-plugin-ui .plm-border { border-width: 1px !important; }
#plm-plugin-ui .plm-border-border { border-color: var(--plm-border) !important; }
#plm-plugin-ui .plm-outline-none { outline: 2px solid transparent !important; outline-offset: 2px !important; }
#plm-plugin-ui .plm-shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; }

.plm-overdue {
    color: var(--plm-red) !important;
    font-weight: bold !important;
}

#plm-plugin-ui .plm-text-center { text-align: center !important; }

#plm-plugin-ui .plm-bg-red-50 { background-color: #FEF2F2 !important; }
#plm-plugin-ui .plm-border-error { border-color: var(--plm-error) !important; }
#plm-plugin-ui .plm-text-error { color: var(--plm-error) !important; }
#plm-plugin-ui .plm-text-error a { color: var(--plm-accent) !important; text-decoration: underline !important; font-weight: 600 !important; }
#plm-plugin-ui .plm-mb-0 { margin-bottom: 0 !important; }

#plm-plugin-ui .plm-transition-colors { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
#plm-plugin-ui .plm-bg-primary:hover { background-color: var(--plm-primary-hover) !important; transform: translateY(-1px) !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }

/* Interactive Elements */
#plm-plugin-ui .plm-btn-social {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    border: 1px solid var(--plm-border) !important;
    border-radius: 12px !important;
    background: var(--plm-white) !important;
    color: var(--plm-text-primary) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

#plm-plugin-ui .plm-btn-social:hover {
    background: var(--plm-soft-green-100) !important;
    border-color: var(--plm-soft-green-200) !important;
}

#plm-plugin-ui .plm-password-wrapper {
    position: relative;
    width: 100%;
}

#plm-plugin-ui .plm-password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--plm-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

#plm-plugin-ui .plm-password-toggle:hover {
    color: var(--plm-text-primary);
}

#plm-plugin-ui input:hover {
    border-color: #D1D5DB !important;
}

#plm-plugin-ui input:focus {
    border-color: var(--plm-accent) !important;
    box-shadow: 0 0 0 4px rgba(31, 122, 99, 0.1) !important;
}

#plm-plugin-ui .plm-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--plm-text-secondary);
    font-size: 12px;
    margin: 24px 0;
}

#plm-plugin-ui .plm-divider::before,
#plm-plugin-ui .plm-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--plm-border);
}

#plm-plugin-ui .plm-divider:not(:empty)::before {
    margin-right: 16px;
}

#plm-plugin-ui .plm-divider:not(:empty)::after {
    margin-left: 16px;
}

#plm-plugin-ui .plm-flex-shrink-0 { flex-shrink: 0 !important; }
#plm-plugin-ui .plm-z-\[9999\] { z-index: 9999 !important; }
#plm-plugin-ui .plm-bg-black\/50 { background-color: rgba(0, 0, 0, 0.5) !important; }
#plm-plugin-ui .plm-fixed { position: fixed !important; }
#plm-plugin-ui .plm-inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
#plm-plugin-ui .plm-max-w-2xl { max-width: 42rem !important; }
#plm-plugin-ui .plm-z-10 { z-index: 10 !important; }
#plm-plugin-ui .plm-m-0 { margin: 0 !important; }
#plm-plugin-ui .plm-max-h-\[60vh\] { max-height: 60vh !important; }
#plm-plugin-ui .plm-overflow-hidden { overflow: hidden !important; }
#plm-plugin-ui .plm-border-b { border-bottom: 1px solid var(--plm-border) !important; }
#plm-plugin-ui .plm-border-t { border-top: 1px solid var(--plm-border) !important; }
#plm-plugin-ui .plm-w-\[120px\] { width: 120px !important; }
#plm-plugin-ui .plm-h-\[120px\] { height: 120px !important; }

#plm-plugin-ui .plm-replace-logo-btn {
    background-color: var(--plm-bg) !important;
    color: var(--plm-text-primary) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

#plm-plugin-ui .plm-replace-logo-btn:hover {
    background-color: var(--plm-primary) !important;
    color: var(--plm-white) !important;
}

/* Modal Close Button Style */
#plm-plugin-ui .plm-modal-close-round {
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
    padding: 0 !important;
}

#plm-plugin-ui .plm-modal-close-round:hover {
    transform: scale(1.1);
}

#plm-plugin-ui .plm-modal-close-round .dashicons {
    color: #ffffff !important;
    font-size: 18px !important;
}

#plm-plugin-ui .plm-underline {
    text-decoration: underline !important;
}

#plm-plugin-ui .plm-card {
    background: var(--plm-surface) !important;
    border-radius: var(--plm-radius-lg) !important;
    padding: var(--plm-space-md) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid var(--plm-border) !important;
}

#plm-plugin-ui .plm-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--plm-space-md) !important;
}

#plm-plugin-ui .plm-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--plm-space-md) !important;
}

@media (max-width: 1024px) {
    #plm-plugin-ui .plm-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    #plm-plugin-ui .plm-grid-3,
    #plm-plugin-ui .plm-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

#plm-plugin-ui .plm-hidden { display: none !important; }