:root {
    --fl-navy: #0b2c45;
    --fl-navy-escuro: #071d31;
    --fl-navy-medio: #3d6f95;
    --fl-agua: #cceef0;
    --fl-agua-tint: #e6f6f7;
    --fl-agua-suave: #f1f9fa;
    --fl-creme: #f9f0df;
    --fl-coral: #f0283c;
    --fl-laranja: #ff960f;
    --fl-degrade: linear-gradient(90deg, #f0283c 0%, #ff960f 100%);
    --fl-degrade-diag: linear-gradient(135deg, #f0283c 0%, #ff960f 100%);
    --fl-coral-tint: color-mix(in srgb, #f0283c 7%, #ffffff);
    --fl-coral-texto: #c81d32;

    --fl-acao: var(--fl-navy);
    --fl-acao-hover: color-mix(in srgb, var(--fl-acao) 86%, #000);
    --fl-acao-tint: color-mix(in srgb, var(--fl-acao) 8%, #fff);
    --fl-halo: color-mix(in srgb, var(--fl-acao) 18%, transparent);

    --fl-superficie: #ffffff;
    --fl-superficie-2: #f6f8fa;
    --fl-fundo: #eef2f5;
    --fl-borda: color-mix(in srgb, #0b2c45 13%, #ffffff);
    --fl-borda-forte: color-mix(in srgb, #0b2c45 26%, #ffffff);
    --fl-tx: #0b2c45;
    --fl-tx-2: #54606a;
    --fl-tx-3: #7a8790;

    --fl-ok: #0e7a53;
    --fl-ok-tint: #d9f4e8;
    --fl-alerta: #8a4b00;
    --fl-alerta-tint: #fdebc8;
    --fl-erro: #a3121f;
    --fl-erro-forte: #d0182b;
    --fl-erro-tint: #fbd9dd;
    --fl-info: #0b4f7a;
    --fl-info-tint: #dcecf7;
    --fl-ok-solido: #0e7a53;
    --fl-erro-solido: #d0182b;
    --fl-info-solido: #0b4f7a;

    --fl-raio-p: 8px;
    --fl-raio: 12px;
    --fl-raio-g: 16px;
    --fl-raio-modal: 18px;
    --fl-raio-pilula: 999px;

    --fl-sombra-1: 0 1px 2px rgba(11, 44, 69, 0.05), 0 8px 24px rgba(11, 44, 69, 0.07);
    --fl-sombra-2: 0 2px 4px rgba(11, 44, 69, 0.06), 0 16px 36px rgba(11, 44, 69, 0.13);
    --fl-sombra-modal: 0 24px 60px -18px rgba(7, 29, 49, 0.45);

    --fl-ease-sai: cubic-bezier(0.4, 0, 0.7, 0.2);
    --fl-ease-chega: cubic-bezier(0.16, 1, 0.3, 1);
    --fl-rapido: 0.15s;
    --fl-medio: 0.24s;
    --fl-lento: 0.6s;

    --fl-z-menu: 1000;
    --fl-z-modal: 100000;
    --fl-z-toast: 200000;
}

[data-theme="dark"] {
    --fl-acao: var(--fl-agua);
    --fl-acao-hover: color-mix(in srgb, var(--fl-agua) 86%, #fff);
    --fl-acao-tint: color-mix(in srgb, var(--fl-agua) 12%, transparent);
    --fl-halo: color-mix(in srgb, var(--fl-agua) 30%, transparent);
    --fl-superficie: #0a2236;
    --fl-superficie-2: #0e2c45;
    --fl-fundo: #061827;
    --fl-borda: rgba(204, 238, 240, 0.16);
    --fl-borda-forte: rgba(204, 238, 240, 0.32);
    --fl-tx: #e8f1f7;
    --fl-tx-2: #a9bccb;
    --fl-tx-3: #7f95a6;
    --fl-ok-tint: rgba(63, 211, 155, 0.16);
    --fl-ok: #3fd39b;
    --fl-coral-tint: rgba(240, 40, 60, 0.14);
    --fl-coral-texto: #ff7a86;
    --fl-alerta-tint: rgba(255, 150, 15, 0.16);
    --fl-alerta: #ffc46b;
    --fl-erro-tint: rgba(255, 122, 133, 0.16);
    --fl-erro: #ff7a85;
    --fl-info-tint: rgba(120, 190, 240, 0.16);
    --fl-info: #8cc8f2;
}

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--fl-acao);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--fl-halo);
}

.fl-fundo {
    position: fixed;
    inset: 0;
    z-index: var(--fl-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(7, 29, 49, 0.5);
    backdrop-filter: blur(4px);
    animation: fl-fade var(--fl-medio) ease backwards;
}
.fl-fundo.fl-saindo { animation: fl-fade-sai 0.17s ease forwards; }
.fl-fundo.fl-saindo .fl-modal { animation: fl-pop-sai 0.17s var(--fl-ease-sai) forwards; }

.fl-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--fl-modal-largura, 560px);
    max-height: 88vh;
    overflow: hidden;
    border-radius: var(--fl-raio-modal);
    background: var(--fl-superficie);
    color: var(--fl-tx);
    box-shadow: var(--fl-sombra-modal);
    font-family: var(--font-brand, "Alan Sans", Arial, sans-serif);
    animation: fl-pop var(--fl-medio) var(--fl-ease-chega) backwards;
}
.fl-modal[data-tamanho="p"] { --fl-modal-largura: 440px; }
.fl-modal[data-tamanho="m"] { --fl-modal-largura: 560px; }
.fl-modal[data-tamanho="g"] { --fl-modal-largura: 760px; }
.fl-modal[data-tamanho="gg"] { --fl-modal-largura: 1100px; }

.fl-modal-topo {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 1.1rem 1.25rem 0.9rem;
    border-bottom: 1px solid var(--fl-borda);
}
.fl-modal-topo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--fl-degrade);
}
.fl-modal-icone {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fl-raio);
    background: var(--fl-acao-tint);
    color: var(--fl-acao);
    font-size: 1rem;
}
.fl-modal-titulos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fl-modal-sobre {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fl-coral);
}
.fl-modal-titulo { margin: 0; font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; color: var(--fl-tx); }
.fl-modal-sub { margin: 0; font-size: 0.8rem; color: var(--fl-tx-2); }
.fl-modal-fechar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--fl-superficie-2);
    color: var(--fl-tx-2);
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--fl-rapido), color var(--fl-rapido);
}
.fl-modal-fechar:hover { background: var(--fl-acao-tint); color: var(--fl-acao); }
.fl-modal-corpo { padding: 1.1rem 1.25rem; overflow-y: auto; font-size: 0.9rem; line-height: 1.5; color: var(--fl-tx); }
.fl-modal-texto { margin: 0; color: var(--fl-tx-2); white-space: pre-line; }
.fl-modal-rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--fl-borda);
    background: var(--fl-superficie);
}

.fl-modal-perigo .fl-modal-icone { background: var(--fl-erro-tint); color: var(--fl-erro-forte); }

.fl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 1.1rem;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--fl-rapido), color var(--fl-rapido), border-color var(--fl-rapido), box-shadow var(--fl-rapido);
}
.fl-btn:disabled { cursor: not-allowed; background: #e3e7ea; color: #54606a; border-color: transparent; box-shadow: none; }
.fl-btn-primario { background: var(--fl-navy); color: #fff; }
.fl-btn-primario:hover:not(:disabled) { background: var(--fl-navy-escuro); }
.fl-btn-destaque { background: var(--fl-degrade-diag); color: #fff; box-shadow: 0 6px 16px rgba(240, 40, 60, 0.22); }
.fl-btn-destaque:hover:not(:disabled) { filter: brightness(1.06); }
.fl-btn-secundario { background: transparent; color: var(--fl-acao); border-color: var(--fl-acao); }
.fl-btn-secundario:hover:not(:disabled) { background: var(--fl-acao-tint); }
.fl-btn-fantasma { background: transparent; color: var(--fl-tx-2); }
.fl-btn-fantasma:hover:not(:disabled) { background: var(--fl-acao-tint); color: var(--fl-acao); }
.fl-btn-perigo { background: var(--fl-erro-forte); color: #fff; }
.fl-btn-perigo:hover:not(:disabled) { filter: brightness(1.08); }
[data-theme="dark"] .fl-btn-primario { background: var(--fl-agua); color: var(--fl-navy); }
[data-theme="dark"] .fl-btn-primario:hover:not(:disabled) { background: #fff; }

.fl-toasts {
    position: fixed;
    bottom: 96px;
    right: 16px;
    z-index: var(--fl-z-toast);
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.fl-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0.75rem 2.4rem 0.75rem 0.9rem;
    overflow: hidden;
    border-radius: var(--fl-raio);
    background: var(--fl-superficie);
    color: var(--fl-tx);
    border: 1px solid var(--fl-borda);
    box-shadow: var(--fl-sombra-2);
    font-family: var(--font-brand, "Alan Sans", Arial, sans-serif);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.4;
    pointer-events: auto;
    animation: fl-toast-chega var(--fl-medio) var(--fl-ease-chega) backwards;
}
.fl-toast.fl-saindo { animation: fl-toast-sai 0.2s var(--fl-ease-sai) forwards; }
.fl-toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--fl-toast-cor, var(--fl-acao));
}
.fl-toast-icone { flex-shrink: 0; margin-top: 1px; color: var(--fl-toast-cor, var(--fl-acao)); }
.fl-toast-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fl-toast-fechar {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--fl-tx-3);
    cursor: pointer;
}
.fl-toast-fechar:hover { background: var(--fl-superficie-2); color: var(--fl-tx); }
.fl-toast-barra {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
    background: var(--fl-toast-cor, var(--fl-acao));
    opacity: 0.35;
    animation: fl-toast-tempo linear forwards;
}
.fl-toast-sucesso { --fl-toast-cor: var(--fl-ok); }
.fl-toast-erro { --fl-toast-cor: var(--fl-erro-forte); }
.fl-toast-aviso { --fl-toast-cor: var(--fl-laranja); }
.fl-toast-info { --fl-toast-cor: var(--fl-info); }

.fl-skeleton {
    display: block;
    border-radius: var(--fl-raio-p);
    background: linear-gradient(90deg, var(--fl-superficie-2) 25%, var(--fl-agua-tint) 50%, var(--fl-superficie-2) 75%);
    background-size: 200% 100%;
    animation: fl-brilho 1.4s ease-in-out infinite;
}
[data-theme="dark"] .fl-skeleton { background: linear-gradient(90deg, rgba(204, 238, 240, 0.06) 25%, rgba(204, 238, 240, 0.14) 50%, rgba(204, 238, 240, 0.06) 75%); background-size: 200% 100%; }

.fl-aviso {
    display: flex;
    gap: 10px;
    padding: 0.7rem 0.9rem;
    border-radius: var(--fl-raio);
    border-left: 3px solid var(--fl-aviso-cor, var(--fl-laranja));
    background: var(--fl-aviso-fundo, var(--fl-creme));
    color: var(--fl-tx);
    font-size: 0.84rem;
    font-weight: 600;
}
.fl-aviso i { color: var(--fl-aviso-cor, var(--fl-laranja)); margin-top: 2px; }
.fl-aviso-erro { --fl-aviso-cor: var(--fl-erro-forte); --fl-aviso-fundo: var(--fl-erro-tint); }
.fl-aviso-ok { --fl-aviso-cor: var(--fl-ok); --fl-aviso-fundo: var(--fl-ok-tint); }
.fl-aviso-info { --fl-aviso-cor: var(--fl-info); --fl-aviso-fundo: var(--fl-info-tint); }
[data-theme="dark"] .fl-aviso { --fl-aviso-fundo: rgba(255, 150, 15, 0.12); }

.fl-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 1.6rem 1rem;
    text-align: center;
    color: var(--fl-tx-2);
}
.fl-vazio-icone {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fl-acao-tint);
    color: var(--fl-acao);
}
.fl-vazio-titulo { font-weight: 800; color: var(--fl-tx); }

@keyframes fl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fl-fade-sai { from { opacity: 1; } to { opacity: 0; } }
@keyframes fl-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fl-pop-sai { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes fl-toast-chega { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fl-toast-sai { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(24px); } }
@keyframes fl-toast-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes fl-brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .fl-fundo, .fl-modal, .fl-toast, .fl-fundo.fl-saindo, .fl-fundo.fl-saindo .fl-modal, .fl-toast.fl-saindo { animation-duration: 0.01s; }
    .fl-skeleton { animation: none; }
}

@media (max-width: 600px) {
    .fl-fundo { align-items: flex-end; padding: 0; }
    .fl-modal { max-width: 100%; max-height: 92vh; border-radius: var(--fl-raio-modal) var(--fl-raio-modal) 0 0; }
    .fl-modal-rodape .fl-btn { flex: 1; }
    .fl-toasts { bottom: 84px; right: 12px; left: 12px; width: auto; }
}

@media print {
    :root, [data-theme="dark"] {
        --fl-acao: #0b2c45;
        --fl-coral-tint: #fdecee;
        --fl-coral-texto: #c81d32;
        --fl-acao-tint: #eef3f7;
        --fl-superficie: #ffffff;
        --fl-superficie-2: #f6f8fa;
        --fl-fundo: #ffffff;
        --fl-borda: #dfe4e8;
        --fl-borda-forte: #c4cdd4;
        --fl-tx: #0b2c45;
        --fl-tx-2: #54606a;
        --fl-tx-3: #7a8790;
        --fl-ok: #0e7a53;
        --fl-ok-tint: #d9f4e8;
        --fl-alerta: #8a4b00;
        --fl-alerta-tint: #fdebc8;
        --fl-erro: #a3121f;
        --fl-erro-tint: #fbd9dd;
        --fl-info: #0b4f7a;
        --fl-info-tint: #dcecf7;
    }
}