/* ==============================================
   FAB — Floating Action Button
   ============================================== */
}

/* ── FAB ── */
.fab-add {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 90;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--t-glass-bg, rgba(10, 5, 5, 0.9));
    border: 1px solid var(--t-glass-border, rgba(255, 255, 255, 0.08));
    color: var(--t-accent, #ef4444);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-slow);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(239, 68, 68, 0.15);
}

@media (hover: hover) {
    .fab-add:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(239, 68, 68, 0.3);
    }
}

.fab-add:active {
    transform: scale(0.95);
}

.fab-add__icon {
    position: relative;
    width: 24px;
    height: 24px;
}

.fab-add__icon::before,
.fab-add__icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 2px;
}

.fab-add__icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

.fab-add__icon::after {
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

dialog[open]~.fab-add {
    display: none;
}