:root {
    --bs-primary: #008349;
    --bs-primary-rgb: 0, 131, 73;
    --bs-success: #006038;
    --bs-success-rgb: 0, 96, 56;
    --bs-link-color: #008349;
    --bs-link-hover-color: #006038;
    --yhd-green-dark: #0A3B27;
    --yhd-green-base: #00482D;
    --yhd-green-medium: #006038;
    --yhd-green-primary: #008349;
}
.bg-yhd {
    background-color: var(--yhd-green-primary) !important;
}

.bg-yhd-dark {
    background-color: var(--yhd-green-dark) !important;
}

.text-yhd {
    color: var(--yhd-green-primary) !important;
}

.border-yhd {
    border-color: var(--yhd-green-primary) !important;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #008349;
    --bs-btn-border-color: #008349;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #006c3a;
    --bs-btn-hover-border-color: #006c3a;
    --bs-btn-focus-shadow-rgb: 0, 131, 73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #00482D;
    --bs-btn-active-border-color: #00482D;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #008349;
    --bs-btn-disabled-border-color: #008349;
}

.btn-outline-primary {
    --bs-btn-color: #008349;
    --bs-btn-border-color: #008349;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #008349;
    --bs-btn-hover-border-color: #008349;
    --bs-btn-focus-shadow-rgb: 0, 131, 73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #00482D;
    --bs-btn-active-border-color: #00482D;
    --bs-btn-disabled-color: #008349;
    --bs-btn-disabled-border-color: #008349;
}

.yhd-auth-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(1200px circle at 20% 10%, rgba(0, 131, 73, 0.25), transparent 55%), linear-gradient(135deg, #00482D 0%, #111827 45%, #000 100%);
}

@media (min-width: 640px) {
    .yhd-auth-bg {
        padding: 2.5rem;
    }
}

.yhd-auth-card {
    width: 100%;
    max-width: 28rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(10px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

:root[data-bs-theme="dark"] .yhd-auth-card {
    background: rgba(17, 24, 39, 0.82);
    border-color: rgba(255, 255, 255, 0.12);
}

.yhd-logo-bubble {
    height: 48px;
    width: 48px;
    border-radius: 999px;
    background: rgba(0, 131, 73, 0.10);
    color: #008349;
    display: grid;
    place-items: center;
    font-weight: 600;
    user-select: none;
}

.yhd-input {
    height: 44px;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.90);
    border-color: #e5e7eb;
}

:root[data-bs-theme="dark"] .yhd-input {
    background: rgba(31, 41, 55, 1);
    border-color: rgba(255, 255, 255, 0.18);
    color: #f9fafb;
}

.yhd-input:focus {
    border-color: #008349;
    box-shadow: 0 0 0 .25rem rgba(0, 131, 73, 0.20);
}

.yhd-btn {
    height: 44px;
    border-radius: 0.9rem;
    font-weight: 500;
}