/* ============================================
   AUTH MODAL — Glass sign-in dialog
   ============================================ */

@keyframes auth-modal-in {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}

.auth-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-gray12) 40%, transparent);
}

.auth-modal-overlay[hidden] {
    display: none;
}

.auth-modal-panel {
    position: relative;
    width: 400px;
    max-width: calc(100vw - (var(--spacing-lg) * 2));
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-container-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    overflow: hidden;
    animation: auth-modal-in 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;

    background-image: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-gray1) 50%, transparent) 0%,
        color-mix(in srgb, var(--color-gray6) 35%, transparent) 100%
    );
    backdrop-filter: saturate(200%) blur(4px) brightness(1.2);
    -webkit-backdrop-filter: saturate(200%) blur(4px) brightness(1.2);
    box-shadow:
        inset 0 0 0 var(--border-width-thin) color-mix(in srgb, var(--color-gray1) 18%, transparent),
        inset 1.8px 3px 0 -2px color-mix(in srgb, var(--color-gray1) 90%, transparent),
        inset -2px -2px 0 -2px color-mix(in srgb, var(--color-gray1) 30%, transparent),
        inset -3px -12px 1px -8px color-mix(in srgb, var(--color-gray1) 10%, transparent),
        inset -0.3px -1px 4px 0 color-mix(in srgb, var(--color-gray12) 10%, transparent),
        inset -1.5px 2.5px 0 -2px color-mix(in srgb, var(--color-gray12) 16%, transparent),
        inset 0 3px 4px -2px color-mix(in srgb, var(--color-gray12) 16%, transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--color-gray12) 8%, transparent),
        0 1px 5px 0 color-mix(in srgb, var(--color-gray12) 8%, transparent),
        0 6px 16px 0 color-mix(in srgb, var(--color-gray12) 6%, transparent);
}

.auth-modal-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--border-width-thin);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-gray1) 100%, transparent) 0%,
        color-mix(in srgb, var(--color-gray1) 0%, transparent) 42%
    );
    -webkit-mask:
        linear-gradient(var(--color-gray12) 0 0) content-box,
        linear-gradient(var(--color-gray12) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.auth-modal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    position: relative;
    z-index: 1;
}

.auth-modal-logo-text {
    font-family: var(--font-family-variable);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--color-gray11);
}

.auth-modal-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-pill);
    color: var(--color-gray7);
    background: color-mix(in srgb, var(--color-gray1) 35%, transparent);
    border: var(--border-width-thin) solid color-mix(in srgb, var(--color-gray1) 20%, transparent);
    transition: background 0.2s ease, color 0.2s ease;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.auth-modal-close:hover {
    background: color-mix(in srgb, var(--color-gray1) 55%, transparent);
    color: var(--color-gray11);
}

.auth-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    text-align: center;
    margin-top: var(--spacing-xs);
    position: relative;
    z-index: 1;
}

.auth-modal-title {
    font-family: var(--font-family-variable);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-gray11);
    margin: 0;
}

.auth-modal-subtitle {
    font-size: 14px;
    color: var(--color-gray8);
    margin: 0;
}

.auth-modal-google-btn {
    width: 90%;
    justify-content: center;
    margin: auto;
    margin-top: var(--spacing-lg) ;
    position: relative;
    z-index: 1;
}

.auth-modal-stay-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 14px;
    color: var(--color-gray8);
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 1;
}

.auth-modal-stay-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    margin-bottom: 1px;
}

/* ============================================
   NOTIFY MODAL — reusable programmatic dialog
   Inherits all auth-modal-panel glass styles.
   ============================================ */

.notify-modal-overlay {
    z-index: 10100;
}

.notify-modal-panel {
    width: 360px;
}

.notify-modal-panel[data-type="error"] .notify-modal-category {
    color: var(--color-red);
}

.notify-modal-panel[data-type="warning"] .notify-modal-category {
    color: var(--color-orange);
}

.notify-modal-panel[data-type="success"] .notify-modal-category {
    color: var(--color-green);
}

.notify-modal-panel[data-type="info"] .notify-modal-category {
    color: var(--color-blue);
}

.notify-modal-title {
    font-family: var(--font-family-variable);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gray10);
    margin: 0;
    position: relative;
    z-index: 1;
}

.notify-modal-body {
    font-size: 14px;
    color: var(--color-gray8);
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 1;
}

.notify-modal-footer {
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}