@layer components {
    .doghouse-header {
        position: relative;
        z-index: 2;
        color: white;
        background: var(--pine-deep);
        border-bottom: 4px solid var(--gold);
    }

    .header-inner {
        min-height: 92px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }

    .doghouse-brand {
        display: inline-flex;
        align-items: center;
        gap: .9rem;
        color: white;
        text-decoration: none;
    }

    .doghouse-brand img {
        width: 58px;
        filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .2));
    }

    .doghouse-brand strong,
    .doghouse-brand small { display: block; }

    .doghouse-brand strong {
        font-size: 1.45rem;
        line-height: 1.05;
        letter-spacing: -.02em;
    }

    .doghouse-brand small {
        margin-top: .28rem;
        color: #d5e5df;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .private-badge {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        padding: .55rem .85rem;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 999px;
        color: #eaf4ef;
        background: rgba(255, 255, 255, .07);
        font-size: .83rem;
        font-weight: 700;
    }

    .private-badge span { color: var(--gold); font-size: .65rem; }

    .eyebrow {
        color: var(--leaf);
        font-size: .76rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .login-card {
        padding: clamp(1.6rem, 5vw, 2.5rem);
        border: 1px solid rgba(13, 63, 52, .08);
        border-radius: var(--radius-large);
        background: var(--paper);
        box-shadow: var(--shadow-card);
    }

    .login-card-heading {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.8rem;
    }

    .login-card-heading h2 { margin-top: .2rem; font-size: 2rem; letter-spacing: -.03em; }

    .login-form { display: grid; gap: .62rem; }

    .login-form > label,
    .password-label label {
        color: var(--pine-deep);
        font-size: .9rem;
        font-weight: 800;
    }

    .login-form input[type="email"],
    .login-form input[type="password"] {
        width: 100%;
        min-height: 50px;
        padding: .75rem .9rem;
        border: 1px solid #b9c9c1;
        border-radius: var(--radius-small);
        background: #fbfdfc;
        transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }

    .login-form input:focus {
        border-color: var(--leaf);
        outline: 0;
        background: white;
        box-shadow: 0 0 0 4px rgba(95, 143, 63, .14);
    }

    .password-label {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        margin-top: .5rem;
    }

    .text-button {
        padding: 0;
        border: 0;
        color: var(--leaf);
        background: transparent;
        font-size: .8rem;
        font-weight: 800;
        cursor: pointer;
    }

    .remember-option {
        display: flex;
        align-items: center;
        gap: .65rem;
        margin: .4rem 0 .7rem;
        color: var(--muted) !important;
        font-weight: 500 !important;
        cursor: pointer;
    }

    .remember-option input { width: 1.05rem; height: 1.05rem; accent-color: var(--leaf); }

    .primary-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .75rem;
        width: 100%;
        min-height: 52px;
        padding: .8rem 1.2rem;
        border: 0;
        border-radius: var(--radius-small);
        color: white;
        background: var(--pine);
        box-shadow: 0 10px 24px rgba(13, 63, 52, .18);
        font-weight: 800;
        cursor: pointer;
        transition: transform .15s ease, background .15s ease;
    }

    .primary-button:hover { background: var(--pine-deep); transform: translateY(-1px); }

    .form-alert {
        margin-bottom: 1rem;
        padding: .8rem .9rem;
        border: 1px solid #efc1c1;
        border-radius: var(--radius-small);
        color: var(--danger);
        background: var(--danger-soft);
        font-size: .88rem;
        font-weight: 700;
    }

    .doghouse-footer { color: #d9e7e1; background: var(--pine-ink); }

    .footer-inner {
        min-height: 105px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }

    .footer-identity { display: flex; align-items: center; gap: .75rem; }
    .footer-identity p { line-height: 1.3; }
    .footer-identity span, .footer-notice { color: #a9bdb5; font-size: .8rem; }
}