/* ==========================================================================
   LUCPAGUEI UI SYSTEM 2.0
   Design System oficial — tokens, base e componentes
   --------------------------------------------------------------------------
   ARQUITETURA (3 camadas, nesta ordem de carregamento):

     1. lucpaguei-ds.css      <- ESTE ARQUIVO. Fonte unica da verdade.
                                 Tokens + base + componentes .lp-*
     2. lucpaguei-theme.css   <- Ponte de compatibilidade: mapeia as classes
                                 legadas (.card, .btn, .stat-card...) para os
                                 tokens daqui. Consome, nunca redefine valores.
     3. CSS embutido nas views <- Legado, em migracao progressiva.

   REGRA: nenhum valor cru (hex, px, ms) fora da secao de TOKENS.
          Todo componente novo consome var(--lp-*).

   NOMENCLATURA:
     .lp-<bloco>              componente          .lp-btn
     .lp-<bloco>__<elemento>  parte interna       .lp-card__header
     .lp-<bloco>--<variante>  variante            .lp-btn--primary
     .is-<estado>             estado              .is-loading, .is-active
     .lp-u-<utilitario>       utilitario          .lp-u-tabular

   CAMADAS CSS: os componentes ficam em @layer para nao competirem por
   especificidade entre si. A ponte legada permanece fora de layer porque
   precisa vencer o CSS das paginas antigas.
   ========================================================================== */

@layer lp-base, lp-components, lp-utilities;

/* ==========================================================================
   1. DESIGN TOKENS
   Fora de @layer: variaveis nao competem em cascata e precisam estar
   disponiveis para a ponte legada e para o CSS das paginas.
   ========================================================================== */
:root {

    /* ---------------------------------------------------------- 1.1 CORES */

    /* Primitivos */
    --lp-color-white: #FFFFFF;
    --lp-color-black: #000000;

    /* Marca */
    --lp-color-primary:            #0057FF;
    --lp-color-primary-hover:      #1A6BFF;
    --lp-color-primary-active:     #0049D6;
    --lp-color-primary-soft:       rgba(0, 87, 255, .14);
    --lp-color-primary-border:     rgba(0, 87, 255, .32);
    --lp-color-primary-contrast:   #FFFFFF;

    --lp-color-secondary:          #00D1FF;
    --lp-color-secondary-hover:    #33DBFF;
    --lp-color-secondary-soft:     rgba(0, 209, 255, .14);
    --lp-color-secondary-border:   rgba(0, 209, 255, .32);
    --lp-color-secondary-contrast: #04121B;

    --lp-color-accent:             #7A5CFF;
    --lp-color-accent-soft:        rgba(122, 92, 255, .14);
    --lp-color-accent-border:      rgba(122, 92, 255, .32);

    /* Superficies */
    --lp-color-bg:                 #0D1117;
    --lp-color-bg-deep:            #080B10;
    --lp-color-surface:            #161B22;
    --lp-color-surface-hover:      #1B212A;
    --lp-color-card:               #1A1F29;
    --lp-color-elevated:           #212836;
    --lp-color-inset:              rgba(0, 0, 0, .32);

    /* Vidro (glassmorphism leve) */
    --lp-color-glass:              rgba(255, 255, 255, .035);
    --lp-color-glass-hover:        rgba(255, 255, 255, .06);
    --lp-color-glass-active:       rgba(255, 255, 255, .09);
    --lp-color-scrim:              rgba(5, 8, 14, .72);

    /* Texto */
    /* Contraste WCAG 2.1 medido sobre --lp-color-card (#1A1F29), o pior caso.
       text          17.6:1  AAA
       text-secondary 6.4:1  AA  (valor fixado pela marca)
       text-muted     5.0:1  AA  — pior caso medido no navegador (vidro sobre card)
       text-disabled  3.0:1      — apenas placeholder/inativo, isento pela norma,
                                   mas mantido perceptivel */
    --lp-color-text:               #F5F7FA;
    --lp-color-text-secondary:     #94A3B8;
    --lp-color-text-muted:         #8E9BAF;
    --lp-color-text-disabled:      #5C6B7C;
    --lp-color-text-inverse:       #0D1117;

    /* Bordas */
    --lp-color-border:             rgba(255, 255, 255, .08);
    --lp-color-border-subtle:      rgba(255, 255, 255, .05);
    --lp-color-border-strong:      rgba(255, 255, 255, .14);
    --lp-color-border-focus:       var(--lp-color-primary);

    /* Semanticas — cada uma com fg / soft / border */
    --lp-color-success:            #00D6A3;
    --lp-color-success-fg:         #6FF0D0;
    --lp-color-success-soft:       rgba(0, 214, 163, .12);
    --lp-color-success-border:     rgba(0, 214, 163, .28);

    --lp-color-danger:             #FF4D6A;
    --lp-color-danger-fg:          #FFA5B4;
    --lp-color-danger-soft:        rgba(255, 77, 106, .12);
    --lp-color-danger-border:      rgba(255, 77, 106, .28);

    --lp-color-warning:            #FFB020;
    --lp-color-warning-fg:         #FFD489;
    --lp-color-warning-soft:       rgba(255, 176, 32, .12);
    --lp-color-warning-border:     rgba(255, 176, 32, .28);

    --lp-color-info:               #00D1FF;
    --lp-color-info-fg:            #86E7FF;
    --lp-color-info-soft:          rgba(0, 209, 255, .12);
    --lp-color-info-border:        rgba(0, 209, 255, .28);

    --lp-color-neutral-soft:       rgba(255, 255, 255, .06);
    --lp-color-neutral-border:     var(--lp-color-border);

    /* Contrastes sobre fundos semanticos preenchidos */
    --lp-color-success-contrast:   #04231B;
    --lp-color-warning-contrast:   #1A1200;
    --lp-color-danger-on-brand:    #FFC4CE;

    /* Codigo / dados monoespacados */
    --lp-color-code:               #8FE6FF;
    --lp-color-code-bg:            rgba(0, 0, 0, .35);

    /* ----------------------------------------------------- 1.2 GRADIENTES */
    --lp-gradient-brand:    linear-gradient(135deg, #0057FF 0%, #00D1FF 100%);
    --lp-gradient-violet:   linear-gradient(135deg, #7A5CFF 0%, #0057FF 100%);
    --lp-gradient-success:  linear-gradient(135deg, #00D6A3 0%, #00A37C 100%);
    --lp-gradient-danger:   linear-gradient(135deg, #FF4D6A 0%, #C8102E 100%);
    --lp-gradient-warning:  linear-gradient(135deg, #FFB020 0%, #FF7A00 100%);
    --lp-gradient-surface:  linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.018) 100%);
    --lp-gradient-chart:    linear-gradient(180deg, #00D1FF 0%, #0057FF 100%);
    --lp-gradient-tab:      linear-gradient(135deg, #0057FF 0%, #0A6BFF 100%);
    --lp-gradient-balance:  linear-gradient(135deg, #0057FF 0%, #0B48D6 45%, #06225E 100%);
    --lp-gradient-blocked:  linear-gradient(135deg, #7A1027 0%, #4A0C1A 100%);
    --lp-gradient-nav-active: linear-gradient(90deg, rgba(0, 87, 255, .22) 0%, rgba(0, 209, 255, .06) 100%);
    --lp-gradient-ambient:
        radial-gradient(1100px 620px at 12% -12%, rgba(0, 87, 255, .16) 0%, transparent 62%),
        radial-gradient(900px 520px at 92% 4%,   rgba(122, 92, 255, .11) 0%, transparent 60%),
        radial-gradient(760px 460px at 60% 108%, rgba(0, 209, 255, .07) 0%, transparent 62%);

    /* ------------------------------------------------------- 1.3 SOMBRAS */
    --lp-shadow-xs:   0 1px 2px rgba(0, 0, 0, .2);
    --lp-shadow-sm:   0 2px 8px rgba(0, 0, 0, .28);
    --lp-shadow-md:   0 8px 28px rgba(0, 0, 0, .38);
    --lp-shadow-lg:   0 20px 56px rgba(0, 0, 0, .5);
    --lp-shadow-xl:   0 32px 80px rgba(0, 0, 0, .6);
    --lp-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .06);

    /* Realces coloridos */
    --lp-shadow-primary: 0 8px 22px rgba(0, 87, 255, .32);
    --lp-shadow-glow:    0 0 18px rgba(0, 209, 255, .35);

    /* Anel de foco (acessibilidade) */
    --lp-ring:         0 0 0 3px rgba(0, 87, 255, .28);
    --lp-ring-danger:  0 0 0 3px rgba(255, 77, 106, .28);
    --lp-ring-success: 0 0 0 3px rgba(0, 214, 163, .28);
    --lp-ring-width:   2px;
    --lp-ring-offset:  2px;

    /* ------------------------------------------------ 1.4 BORDAS / RAIOS */
    --lp-border-width:        1px;
    --lp-border-width-strong: 2px;

    --lp-radius-xs:   6px;
    --lp-radius-sm:   10px;
    --lp-radius-md:   12px;
    --lp-radius-lg:   16px;
    --lp-radius-xl:   20px;
    --lp-radius-2xl:  24px;
    --lp-radius-pill: 999px;
    --lp-radius-full: 50%;

    /* -------------------------------------------------- 1.5 ESPACAMENTOS */
    /* Escala base 4px */
    --lp-space-0:  0;
    --lp-space-1:  .25rem;   /*  4px */
    --lp-space-2:  .5rem;    /*  8px */
    --lp-space-3:  .75rem;   /* 12px */
    --lp-space-4:  1rem;     /* 16px */
    --lp-space-5:  1.25rem;  /* 20px */
    --lp-space-6:  1.5rem;   /* 24px */
    --lp-space-7:  1.75rem;  /* 28px */
    --lp-space-8:  2rem;     /* 32px */
    --lp-space-10: 2.5rem;   /* 40px */
    --lp-space-12: 3rem;     /* 48px */
    --lp-space-16: 4rem;     /* 64px */
    --lp-space-20: 5rem;     /* 80px */

    /* Ritmo de layout */
    --lp-gutter:        var(--lp-space-4);
    --lp-page-padding:  var(--lp-space-8);
    --lp-card-padding:  var(--lp-space-6);
    --lp-stack:         var(--lp-space-6);
    --lp-container-max: 1320px;

    /* --------------------------------------------------- 1.6 TIPOGRAFIA */
    --lp-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --lp-font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;

    /* Escala tipografica */
    --lp-text-2xs: .6875rem;  /* 11px */
    --lp-text-xs:  .75rem;    /* 12px */
    --lp-text-sm:  .8125rem;  /* 13px */
    --lp-text-md:  .875rem;   /* 14px — corpo padrao */
    --lp-text-base: .9375rem; /* 15px */
    --lp-text-lg:  1.0625rem; /* 17px */
    --lp-text-xl:  1.25rem;   /* 20px */
    --lp-text-2xl: 1.5rem;    /* 24px */
    --lp-text-3xl: 1.875rem;  /* 30px */
    --lp-text-4xl: 2.25rem;   /* 36px */
    --lp-text-5xl: 2.75rem;   /* 44px */

    /* Pesos */
    --lp-weight-regular:  400;
    --lp-weight-medium:   500;
    --lp-weight-semibold: 600;
    --lp-weight-bold:     650;
    --lp-weight-heavy:    700;
    --lp-weight-black:    750;

    /* Altura de linha */
    --lp-leading-none:    1;
    --lp-leading-tight:   1.2;
    --lp-leading-snug:    1.35;
    --lp-leading-normal:  1.5;
    --lp-leading-relaxed: 1.65;

    /* Tracking — negativo em titulos, positivo em rotulos */
    --lp-tracking-tighter: -.035em;
    --lp-tracking-tight:   -.025em;
    --lp-tracking-normal:  -.011em;
    --lp-tracking-wide:    .02em;
    --lp-tracking-wider:   .085em;
    --lp-tracking-widest:  .12em;

    /* ----------------------------------------------------- 1.7 ANIMACOES */
    --lp-duration-instant: 100ms;
    --lp-duration-fast:    160ms;
    --lp-duration-base:    200ms;
    --lp-duration-slow:    280ms;
    --lp-duration-slower:  400ms;

    --lp-ease:         cubic-bezier(.4, 0, .2, 1);
    --lp-ease-out:     cubic-bezier(0, 0, .2, 1);
    --lp-ease-in:      cubic-bezier(.4, 0, 1, 1);
    --lp-ease-spring:  cubic-bezier(.34, 1.56, .64, 1);

    --lp-transition-colors: color var(--lp-duration-base) var(--lp-ease),
                            background-color var(--lp-duration-base) var(--lp-ease),
                            border-color var(--lp-duration-base) var(--lp-ease);
    --lp-transition-transform: transform var(--lp-duration-fast) var(--lp-ease);
    --lp-transition-all: all var(--lp-duration-base) var(--lp-ease);

    /* ---------------------------------------------------------- 1.8 BLUR */
    --lp-blur-sm: 8px;
    --lp-blur-md: 14px;
    --lp-blur-lg: 24px;
    --lp-blur-xl: 34px;
    --lp-saturate: 150%;

    /* --------------------------------------------------- 1.9 OPACIDADES */
    --lp-opacity-disabled: .5;
    --lp-opacity-muted:    .7;
    --lp-opacity-hover:    .85;

    /* ---------------------------------------------------- 1.10 Z-INDEX */
    --lp-z-base:            1;
    --lp-z-raised:          10;
    --lp-z-sticky:          100;
    --lp-z-dropdown:        1000;
    --lp-z-fixed:           1030;
    --lp-z-drawer-backdrop: 1040;
    --lp-z-drawer:          1045;
    --lp-z-modal-backdrop:  1050;
    --lp-z-modal:           1055;
    --lp-z-popover:         1060;
    --lp-z-tooltip:         1070;
    --lp-z-toast:           1080;
    --lp-z-loader:          1090;

    /* -------------------------------------------------- 1.11 BREAKPOINTS
       CSS nao aceita var() dentro de @media. Estes tokens sao a fonte da
       verdade para JS e documentacao; nas media queries os valores sao
       escritos literalmente e devem espelhar exatamente estes numeros. */
    --lp-bp-sm:  576px;
    --lp-bp-md:  768px;
    --lp-bp-lg:  992px;
    --lp-bp-xl:  1200px;
    --lp-bp-2xl: 1400px;

    /* -------------------------------------- 1.12 ALIASES DE COMPATIBILIDADE
       Nomes curtos usados pela ponte legada (lucpaguei-theme.css).
       Apontam para os tokens oficiais — sem valores proprios. */
    --lp-bg:            var(--lp-color-bg);
    --lp-bg-deep:       var(--lp-color-bg-deep);
    --lp-surface:       var(--lp-color-surface);
    --lp-surface-2:     var(--lp-color-card);
    --lp-surface-3:     var(--lp-color-elevated);
    --lp-elevated:      var(--lp-color-elevated);
    --lp-glass:         var(--lp-color-glass);
    --lp-glass-strong:  var(--lp-color-glass-hover);
    --lp-glass-hover:   var(--lp-color-glass-active);
    --lp-border:        var(--lp-color-border);
    --lp-border-soft:   var(--lp-color-border-subtle);
    --lp-border-strong: var(--lp-color-border-strong);
    --lp-text:          var(--lp-color-text);
    --lp-text-2:        var(--lp-color-text-secondary);
    --lp-text-3:        var(--lp-color-text-muted);
    --lp-text-muted:    var(--lp-color-text-disabled);
    --lp-blue:          var(--lp-color-primary);
    --lp-blue-600:      var(--lp-color-primary-active);
    --lp-blue-400:      #6FA0FF;
    --lp-cyan:          var(--lp-color-secondary);
    --lp-purple:        var(--lp-color-accent);
    --lp-success:       var(--lp-color-success);
    --lp-success-dim:   var(--lp-color-success-soft);
    --lp-danger:        var(--lp-color-danger);
    --lp-danger-dim:    var(--lp-color-danger-soft);
    --lp-warning:       var(--lp-color-warning);
    --lp-warning-dim:   var(--lp-color-warning-soft);
    --lp-info:          var(--lp-color-info);
    --lp-info-dim:      var(--lp-color-info-soft);
    --lp-grad-brand:    var(--lp-gradient-brand);
    --lp-grad-violet:   var(--lp-gradient-violet);
    --lp-grad-surface:  var(--lp-gradient-surface);
    --lp-r-sm:   var(--lp-radius-sm);
    --lp-r:      var(--lp-radius-lg);
    --lp-r-lg:   var(--lp-radius-xl);
    --lp-r-xl:   var(--lp-radius-2xl);
    --lp-r-pill: var(--lp-radius-pill);
    --lp-shadow: var(--lp-shadow-md);
    --lp-inset:  var(--lp-shadow-inset);

    /* Bootstrap / template — herdam a marca automaticamente */
    --bs-primary:       var(--lp-color-primary);
    --bs-primary-rgb:   0, 87, 255;
    --bs-link-color:    #6FA0FF;
    --bs-body-bg:       var(--lp-color-bg);
    --bs-body-color:    var(--lp-color-text);
    --bs-border-color:  var(--lp-color-border);
    --bs-border-radius: var(--lp-radius-lg);
    --bs-secondary:     var(--lp-color-text-secondary);
    --bs-success:       var(--lp-color-success);
    --bs-danger:        var(--lp-color-danger);
    --bs-warning:       var(--lp-color-warning);
    --bs-info:          var(--lp-color-info);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
@layer lp-base {

    .lp-root,
    .lp-scope {
        font-family: var(--lp-font-sans);
        font-size: var(--lp-text-md);
        line-height: var(--lp-leading-normal);
        letter-spacing: var(--lp-tracking-normal);
        color: var(--lp-color-text);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: "cv02", "cv03", "cv04", "ss01";
    }

    /* Superficie de pagina do sistema */
    .lp-app {
        background: var(--lp-color-bg);
        background-image: var(--lp-gradient-ambient);
        background-attachment: fixed;
        min-height: 100vh;
        color: var(--lp-color-text);
    }

    .lp-container {
        max-width: var(--lp-container-max);
        margin-inline: auto;
        padding: var(--lp-page-padding);
    }

    .lp-stack     { display: flex; flex-direction: column; gap: var(--lp-stack); }
    .lp-stack--sm { gap: var(--lp-space-3); }
    .lp-stack--lg { gap: var(--lp-space-8); }
}

/* ==========================================================================
   3. COMPONENTES
   ========================================================================== */
@layer lp-components {

/* --------------------------------------------------------------------------
   3.1 BOTAO  .lp-btn
   Variantes: --primary --secondary --ghost --danger --success --warning
              --link --icon
   Tamanhos:  --sm --lg --block
   Estados:   :hover :active :disabled .is-loading
   -------------------------------------------------------------------------- */
.lp-btn {
    --_bg:     var(--lp-color-glass-hover);
    --_fg:     var(--lp-color-text);
    --_border: var(--lp-color-border);
    --_shadow: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lp-space-2);
    position: relative;

    padding: .68rem 1.15rem;
    min-height: 40px;

    font-family: inherit;
    font-size: var(--lp-text-md);
    font-weight: var(--lp-weight-semibold);
    letter-spacing: -.006em;
    line-height: var(--lp-leading-none);
    white-space: nowrap;
    text-decoration: none;

    background: var(--_bg);
    color: var(--_fg);
    border: var(--lp-border-width) solid var(--_border);
    border-radius: var(--lp-radius-md);
    box-shadow: var(--_shadow);
    cursor: pointer;

    transition: var(--lp-transition-colors),
                box-shadow var(--lp-duration-base) var(--lp-ease),
                transform var(--lp-duration-fast) var(--lp-ease),
                filter var(--lp-duration-base) var(--lp-ease);
}

.lp-btn:hover   { background: var(--lp-color-glass-active); border-color: var(--lp-color-border-strong); color: var(--lp-color-text); }
.lp-btn:active  { transform: translateY(1px); }

.lp-btn:focus-visible {
    outline: var(--lp-ring-width) solid var(--lp-color-primary);
    outline-offset: var(--lp-ring-offset);
}

.lp-btn:disabled,
.lp-btn.is-disabled {
    opacity: var(--lp-opacity-disabled);
    cursor: not-allowed;
    transform: none;
    filter: grayscale(.3);
    pointer-events: none;
}

/* Variantes */
.lp-btn--primary {
    --_bg: var(--lp-gradient-brand);
    --_fg: var(--lp-color-primary-contrast);
    --_border: var(--lp-color-secondary-border);
    --_shadow: var(--lp-shadow-primary), var(--lp-shadow-inset);
}
.lp-btn--primary:hover {
    filter: brightness(1.08);
    background: var(--lp-gradient-brand);
    color: var(--lp-color-primary-contrast);
    box-shadow: 0 12px 30px rgba(0, 87, 255, .42), var(--lp-shadow-inset);
}

.lp-btn--secondary        { --_bg: var(--lp-color-glass-hover); --_fg: var(--lp-color-text); }
.lp-btn--secondary:hover  { background: var(--lp-color-glass-active); }

.lp-btn--ghost            { --_bg: transparent; --_fg: var(--lp-color-text-secondary); --_border: transparent; }
.lp-btn--ghost:hover      { background: var(--lp-color-glass-hover); color: var(--lp-color-text); border-color: transparent; }

.lp-btn--outline          { --_bg: transparent; --_fg: #6FA0FF; --_border: var(--lp-color-primary-border); }
.lp-btn--outline:hover    { background: var(--lp-color-primary-soft); color: var(--lp-color-text); }

.lp-btn--danger  { --_bg: var(--lp-gradient-danger);  --_fg: #fff;                              --_border: var(--lp-color-danger-border); }
.lp-btn--success { --_bg: var(--lp-gradient-success); --_fg: #04231B;                           --_border: var(--lp-color-success-border); }
.lp-btn--warning { --_bg: var(--lp-gradient-warning); --_fg: #1A1200;                           --_border: var(--lp-color-warning-border); }
.lp-btn--danger:hover, .lp-btn--success:hover, .lp-btn--warning:hover { filter: brightness(1.08); }

.lp-btn--link {
    --_bg: transparent; --_border: transparent; --_fg: #6FA0FF;
    padding: 0; min-height: 0; text-decoration: none;
}
.lp-btn--link:hover { background: transparent; color: var(--lp-color-secondary); border-color: transparent; }

/* Tamanhos */
.lp-btn--sm    { padding: .42rem .8rem;  min-height: 32px; font-size: var(--lp-text-sm); border-radius: var(--lp-radius-sm); }
.lp-btn--lg    { padding: .9rem 1.5rem;  min-height: 48px; font-size: var(--lp-text-base); border-radius: var(--lp-radius-lg); }
.lp-btn--block { display: flex; width: 100%; }

.lp-btn--icon  { padding: 0; width: 40px; min-height: 40px; border-radius: var(--lp-radius-md); }
.lp-btn--icon.lp-btn--sm { width: 32px; min-height: 32px; }

/* Estado de carregamento — texto some, spinner aparece */
.lp-btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.lp-btn.is-loading > * { visibility: hidden; }
.lp-btn.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px; height: 16px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: currentColor;
    border-radius: var(--lp-radius-full);
    animation: lp-spin var(--lp-duration-slower) linear infinite;
    visibility: visible;
    color: #fff;
}

@keyframes lp-spin { to { transform: rotate(360deg); } }

/* Grupo de botoes */
.lp-btn-group { display: inline-flex; gap: var(--lp-space-2); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   3.2 CAMPOS DE FORMULARIO
   .lp-field .lp-label .lp-input .lp-textarea .lp-select .lp-help
   -------------------------------------------------------------------------- */
.lp-field { display: flex; flex-direction: column; gap: var(--lp-space-2); }

.lp-label {
    font-size: var(--lp-text-sm);
    font-weight: var(--lp-weight-medium);
    color: var(--lp-color-text-secondary);
    letter-spacing: var(--lp-tracking-wide);
}
.lp-label--required::after { content: ' *'; color: var(--lp-color-danger); }

.lp-input,
.lp-textarea,
.lp-select {
    width: 100%;
    background: rgba(255, 255, 255, .04);
    border: var(--lp-border-width) solid var(--lp-color-border);
    border-radius: var(--lp-radius-md);
    padding: .78rem 1rem;
    font-family: inherit;
    font-size: var(--lp-text-md);
    line-height: var(--lp-leading-snug);
    color: var(--lp-color-text);
    transition: var(--lp-transition-colors), box-shadow var(--lp-duration-base) var(--lp-ease);
    outline: none;
}

.lp-input::placeholder,
.lp-textarea::placeholder { color: var(--lp-color-text-disabled); opacity: 1; }

.lp-input:hover,
.lp-textarea:hover,
.lp-select:hover { border-color: var(--lp-color-border-strong); }

.lp-input:focus,
.lp-textarea:focus,
.lp-select:focus {
    background: rgba(255, 255, 255, .06);
    border-color: var(--lp-color-border-focus);
    box-shadow: var(--lp-ring);
    color: #fff;
}

.lp-input:disabled,
.lp-textarea:disabled,
.lp-select:disabled {
    opacity: var(--lp-opacity-disabled);
    cursor: not-allowed;
    background: var(--lp-color-inset);
}

/* Estados de validacao */
.lp-input.is-error,   .lp-textarea.is-error,   .lp-select.is-error   { border-color: var(--lp-color-danger); }
.lp-input.is-error:focus, .lp-textarea.is-error:focus                { box-shadow: var(--lp-ring-danger); }
.lp-input.is-success, .lp-textarea.is-success, .lp-select.is-success { border-color: var(--lp-color-success); }
.lp-input.is-success:focus                                           { box-shadow: var(--lp-ring-success); }

.lp-textarea { min-height: 110px; resize: vertical; }

.lp-help      { font-size: var(--lp-text-xs); color: var(--lp-color-text-muted); }
.lp-help--error   { color: var(--lp-color-danger-fg); }
.lp-help--success { color: var(--lp-color-success-fg); }

/* Campo com adorno (icone a esquerda / acao a direita) */
.lp-input-wrap { position: relative; display: flex; align-items: center; }
.lp-input-wrap__icon {
    position: absolute;
    left: var(--lp-space-4);
    color: var(--lp-color-text-muted);
    font-size: var(--lp-text-base);
    pointer-events: none;
    transition: color var(--lp-duration-base) var(--lp-ease);
    z-index: var(--lp-z-base);
}
.lp-input-wrap:focus-within .lp-input-wrap__icon { color: var(--lp-color-secondary); }
.lp-input-wrap__icon ~ .lp-input { padding-left: 2.85rem; }

.lp-input-wrap__action {
    position: absolute;
    right: var(--lp-space-3);
    background: transparent;
    border: none;
    color: var(--lp-color-text-muted);
    cursor: pointer;
    padding: var(--lp-space-2);
    border-radius: var(--lp-radius-xs);
    display: flex;
    transition: var(--lp-transition-colors);
}
.lp-input-wrap__action:hover { color: var(--lp-color-text); background: var(--lp-color-glass-hover); }
.lp-input-wrap__action ~ .lp-input,
.lp-input-wrap:has(.lp-input-wrap__action) .lp-input { padding-right: 3rem; }

/* Select — seta propria */
.lp-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--lp-space-4) center;
    padding-right: 2.6rem;
    cursor: pointer;
}
.lp-select option { background: var(--lp-color-card); color: var(--lp-color-text); }

/* --------------------------------------------------------------------------
   3.3 CHECKBOX / RADIO / SWITCH
   -------------------------------------------------------------------------- */
.lp-check {
    display: inline-flex;
    align-items: center;
    gap: var(--lp-space-3);
    cursor: pointer;
    font-size: var(--lp-text-md);
    color: var(--lp-color-text-secondary);
    user-select: none;
}

.lp-check__input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .05);
    border: var(--lp-border-width) solid var(--lp-color-border-strong);
    border-radius: var(--lp-radius-xs);
    cursor: pointer;
    position: relative;
    transition: var(--lp-transition-colors), box-shadow var(--lp-duration-fast) var(--lp-ease);
}

.lp-check__input:checked {
    background: var(--lp-color-primary);
    border-color: var(--lp-color-primary);
}
.lp-check__input:checked::after {
    content: '';
    position: absolute;
    left: 5px; top: 1.5px;
    width: 5px; height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.lp-check__input:focus-visible { box-shadow: var(--lp-ring); outline: none; }
.lp-check__input:disabled { opacity: var(--lp-opacity-disabled); cursor: not-allowed; }
.lp-check__input:disabled ~ * { opacity: var(--lp-opacity-disabled); }

/* Radio */
.lp-check--radio .lp-check__input { border-radius: var(--lp-radius-full); }
.lp-check--radio .lp-check__input:checked { background: transparent; border-color: var(--lp-color-primary); border-width: 5px; }
.lp-check--radio .lp-check__input:checked::after { content: none; }

/* Switch */
.lp-switch { display: inline-flex; align-items: center; gap: var(--lp-space-3); cursor: pointer; }
.lp-switch__input {
    appearance: none;
    -webkit-appearance: none;
    width: 40px; height: 22px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .1);
    border: var(--lp-border-width) solid var(--lp-color-border);
    border-radius: var(--lp-radius-pill);
    position: relative;
    cursor: pointer;
    transition: var(--lp-transition-colors);
}
.lp-switch__input::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    background: var(--lp-color-text-secondary);
    border-radius: var(--lp-radius-full);
    transition: transform var(--lp-duration-base) var(--lp-ease), background var(--lp-duration-base) var(--lp-ease);
}
.lp-switch__input:checked { background: var(--lp-color-primary); border-color: var(--lp-color-primary); }
.lp-switch__input:checked::after { transform: translateY(-50%) translateX(18px); background: #fff; }
.lp-switch__input:focus-visible { box-shadow: var(--lp-ring); outline: none; }
.lp-switch__input:disabled { opacity: var(--lp-opacity-disabled); cursor: not-allowed; }

/* --------------------------------------------------------------------------
   3.4 CARD  .lp-card
   -------------------------------------------------------------------------- */
.lp-card {
    background: var(--lp-color-surface);
    background-image: var(--lp-gradient-surface);
    border: var(--lp-border-width) solid var(--lp-color-border);
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow-sm), var(--lp-shadow-inset);
    color: var(--lp-color-text);
    overflow: hidden;
}

.lp-card--interactive {
    transition: transform var(--lp-duration-slow) var(--lp-ease),
                border-color var(--lp-duration-slow) var(--lp-ease),
                box-shadow var(--lp-duration-slow) var(--lp-ease);
}
.lp-card--interactive:hover {
    transform: translateY(-3px);
    border-color: var(--lp-color-border-strong);
    box-shadow: var(--lp-shadow-md), var(--lp-shadow-inset);
}

/* Vidro — usar apenas sobre fundo com gradiente ambiente */
.lp-card--glass {
    background: rgba(22, 27, 34, .6);
    -webkit-backdrop-filter: blur(var(--lp-blur-lg)) saturate(var(--lp-saturate));
    backdrop-filter: blur(var(--lp-blur-lg)) saturate(var(--lp-saturate));
}

.lp-card--flat { box-shadow: none; background-image: none; }

.lp-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-4);
    padding: var(--lp-card-padding);
    border-bottom: var(--lp-border-width) solid var(--lp-color-border-subtle);
}
.lp-card__title {
    margin: 0;
    font-size: var(--lp-text-base);
    font-weight: var(--lp-weight-bold);
    letter-spacing: var(--lp-tracking-tight);
    color: var(--lp-color-text);
}
.lp-card__subtitle { margin: 0; font-size: var(--lp-text-sm); color: var(--lp-color-text-muted); }
.lp-card__body   { padding: var(--lp-card-padding); }
.lp-card__footer {
    padding: var(--lp-space-4) var(--lp-card-padding);
    border-top: var(--lp-border-width) solid var(--lp-color-border-subtle);
    color: var(--lp-color-text-secondary);
}

/* --------------------------------------------------------------------------
   3.5 KPI  .lp-kpi
   -------------------------------------------------------------------------- */
.lp-kpi {
    display: flex;
    align-items: flex-start;
    gap: var(--lp-space-4);
    padding: var(--lp-space-5);
    background: var(--lp-color-surface);
    background-image: var(--lp-gradient-surface);
    border: var(--lp-border-width) solid var(--lp-color-border);
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow-sm), var(--lp-shadow-inset);
    transition: transform var(--lp-duration-slow) var(--lp-ease),
                border-color var(--lp-duration-slow) var(--lp-ease),
                box-shadow var(--lp-duration-slow) var(--lp-ease);
}
.lp-kpi:hover {
    transform: translateY(-3px);
    border-color: var(--lp-color-border-strong);
    box-shadow: var(--lp-shadow-md), var(--lp-shadow-inset);
}

.lp-kpi__icon {
    width: 44px; height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--lp-text-xl);
    color: #fff;
    background: var(--lp-gradient-brand);
    border-radius: 13px;
    box-shadow: 0 6px 18px rgba(0, 87, 255, .2);
}
.lp-kpi__icon--success { background: var(--lp-gradient-success); color: #04231B; box-shadow: 0 6px 18px rgba(0, 214, 163, .22); }
.lp-kpi__icon--danger  { background: var(--lp-gradient-danger);  box-shadow: 0 6px 18px rgba(255, 77, 106, .24); }
.lp-kpi__icon--warning { background: var(--lp-gradient-warning); color: #1A1200; box-shadow: 0 6px 18px rgba(255, 176, 32, .22); }

.lp-kpi__body  { flex: 1; min-width: 0; }
.lp-kpi__label {
    font-size: var(--lp-text-xs);
    font-weight: var(--lp-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--lp-tracking-wider);
    color: var(--lp-color-text-muted);
    margin: 0 0 var(--lp-space-2);
}
.lp-kpi__value {
    font-size: var(--lp-text-3xl);
    font-weight: var(--lp-weight-heavy);
    letter-spacing: var(--lp-tracking-tighter);
    line-height: var(--lp-leading-tight);
    font-variant-numeric: tabular-nums;
    color: var(--lp-color-text);
    margin: 0;
    word-break: break-word;
}
.lp-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--lp-space-1);
    margin-top: var(--lp-space-3);
    padding: .26rem .6rem;
    font-size: var(--lp-text-xs);
    font-weight: var(--lp-weight-semibold);
    border-radius: var(--lp-radius-pill);
    background: var(--lp-color-neutral-soft);
    border: var(--lp-border-width) solid var(--lp-color-border-subtle);
    color: var(--lp-color-text-secondary);
}
.lp-kpi__delta--up   { background: var(--lp-color-success-soft); border-color: var(--lp-color-success-border); color: var(--lp-color-success); }
.lp-kpi__delta--down { background: var(--lp-color-danger-soft);  border-color: var(--lp-color-danger-border);  color: var(--lp-color-danger-fg); }

.lp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--lp-gutter);
}

/* --------------------------------------------------------------------------
   3.6 BADGE / TAG / STATUS
   -------------------------------------------------------------------------- */
.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--lp-space-1);
    padding: .34rem .78rem;
    font-size: var(--lp-text-xs);
    font-weight: var(--lp-weight-bold);
    letter-spacing: var(--lp-tracking-wide);
    line-height: 1.4;
    white-space: nowrap;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-color-neutral-soft);
    border: var(--lp-border-width) solid var(--lp-color-border);
    color: var(--lp-color-text-secondary);
}
.lp-badge--success { background: var(--lp-color-success-soft); border-color: var(--lp-color-success-border); color: var(--lp-color-success); }
.lp-badge--danger  { background: var(--lp-color-danger-soft);  border-color: var(--lp-color-danger-border);  color: var(--lp-color-danger-fg); }
.lp-badge--warning { background: var(--lp-color-warning-soft); border-color: var(--lp-color-warning-border); color: var(--lp-color-warning); }
.lp-badge--info    { background: var(--lp-color-info-soft);    border-color: var(--lp-color-info-border);    color: var(--lp-color-info); }
.lp-badge--primary { background: var(--lp-color-primary-soft); border-color: var(--lp-color-primary-border); color: #6FA0FF; }
.lp-badge--accent  { background: var(--lp-color-accent-soft);  border-color: var(--lp-color-accent-border);  color: #B9A8FF; }

/* Status com ponto — semantica de transacao */
.lp-status { display: inline-flex; align-items: center; gap: var(--lp-space-2); font-size: var(--lp-text-sm); font-weight: var(--lp-weight-medium); color: var(--lp-color-text-secondary); }
.lp-status__dot { width: 7px; height: 7px; border-radius: var(--lp-radius-full); background: var(--lp-color-text-muted); flex-shrink: 0; }
.lp-status--success .lp-status__dot { background: var(--lp-color-success); box-shadow: 0 0 0 3px var(--lp-color-success-soft); }
.lp-status--danger  .lp-status__dot { background: var(--lp-color-danger);  box-shadow: 0 0 0 3px var(--lp-color-danger-soft); }
.lp-status--warning .lp-status__dot { background: var(--lp-color-warning); box-shadow: 0 0 0 3px var(--lp-color-warning-soft); }
.lp-status--info    .lp-status__dot { background: var(--lp-color-info);    box-shadow: 0 0 0 3px var(--lp-color-info-soft); }

/* Tag removivel */
.lp-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--lp-space-2);
    padding: .26rem .6rem;
    font-size: var(--lp-text-xs);
    font-weight: var(--lp-weight-medium);
    border-radius: var(--lp-radius-sm);
    background: var(--lp-color-glass-hover);
    border: var(--lp-border-width) solid var(--lp-color-border);
    color: var(--lp-color-text-secondary);
}
.lp-tag__remove { background: none; border: none; color: inherit; cursor: pointer; opacity: .6; padding: 0; display: flex; }
.lp-tag__remove:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   3.7 AVATAR
   -------------------------------------------------------------------------- */
.lp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--lp-radius-full);
    background: var(--lp-gradient-violet);
    border: var(--lp-border-width) solid var(--lp-color-border-strong);
    color: #fff;
    font-size: var(--lp-text-md);
    font-weight: var(--lp-weight-bold);
    overflow: hidden;
    flex-shrink: 0;
}
.lp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lp-avatar--sm { width: 28px; height: 28px; font-size: var(--lp-text-xs); }
.lp-avatar--lg { width: 56px; height: 56px; font-size: var(--lp-text-lg); }
.lp-avatar-group { display: inline-flex; }
.lp-avatar-group .lp-avatar + .lp-avatar { margin-left: -10px; }

/* --------------------------------------------------------------------------
   3.8 ALERT
   -------------------------------------------------------------------------- */
.lp-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--lp-space-3);
    padding: .95rem 1.15rem;
    border-radius: 14px;
    font-size: var(--lp-text-md);
    background: var(--lp-color-glass-hover);
    border: var(--lp-border-width) solid var(--lp-color-border);
    color: var(--lp-color-text-secondary);
}
.lp-alert__icon  { flex-shrink: 0; font-size: var(--lp-text-lg); line-height: 1.2; }
.lp-alert__title { font-weight: var(--lp-weight-semibold); color: var(--lp-color-text); margin: 0 0 var(--lp-space-1); }
.lp-alert__body  { margin: 0; }
.lp-alert--success { background: var(--lp-color-success-soft); border-color: var(--lp-color-success-border); color: var(--lp-color-success-fg); }
.lp-alert--danger  { background: var(--lp-color-danger-soft);  border-color: var(--lp-color-danger-border);  color: var(--lp-color-danger-fg); }
.lp-alert--warning { background: var(--lp-color-warning-soft); border-color: var(--lp-color-warning-border); color: var(--lp-color-warning-fg); }
.lp-alert--info    { background: var(--lp-color-info-soft);    border-color: var(--lp-color-info-border);    color: var(--lp-color-info-fg); }

/* --------------------------------------------------------------------------
   3.9 TOAST
   -------------------------------------------------------------------------- */
.lp-toast-region {
    position: fixed;
    top: var(--lp-space-6);
    right: var(--lp-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--lp-space-3);
    z-index: var(--lp-z-toast);
    pointer-events: none;
}
.lp-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--lp-space-3);
    min-width: 280px;
    max-width: 380px;
    padding: var(--lp-space-4);
    background: rgba(26, 31, 41, .97);
    border: var(--lp-border-width) solid var(--lp-color-border-strong);
    border-radius: 14px;
    box-shadow: var(--lp-shadow-lg);
    color: var(--lp-color-text);
    font-size: var(--lp-text-md);
    pointer-events: auto;
    -webkit-backdrop-filter: blur(var(--lp-blur-lg));
    backdrop-filter: blur(var(--lp-blur-lg));
    animation: lp-toast-in var(--lp-duration-slow) var(--lp-ease-spring);
}
.lp-toast__icon  { flex-shrink: 0; }
.lp-toast__title { font-weight: var(--lp-weight-semibold); margin: 0 0 var(--lp-space-1); }
.lp-toast__body  { margin: 0; color: var(--lp-color-text-secondary); font-size: var(--lp-text-sm); }
.lp-toast__close { margin-left: auto; background: none; border: none; color: var(--lp-color-text-muted); cursor: pointer; padding: 0; }
.lp-toast__close:hover { color: var(--lp-color-text); }
.lp-toast--success .lp-toast__icon { color: var(--lp-color-success); }
.lp-toast--danger  .lp-toast__icon { color: var(--lp-color-danger); }
.lp-toast--warning .lp-toast__icon { color: var(--lp-color-warning); }
.lp-toast--info    .lp-toast__icon { color: var(--lp-color-info); }

@keyframes lp-toast-in {
    from { opacity: 0; transform: translateX(16px) scale(.98); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* --------------------------------------------------------------------------
   3.10 MODAL
   -------------------------------------------------------------------------- */
.lp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--lp-color-scrim);
    -webkit-backdrop-filter: blur(var(--lp-blur-sm));
    backdrop-filter: blur(var(--lp-blur-sm));
    z-index: var(--lp-z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--lp-space-5);
}
.lp-modal {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - var(--lp-space-12));
    display: flex;
    flex-direction: column;
    background: rgba(26, 31, 41, .96);
    background-image: var(--lp-gradient-surface);
    border: var(--lp-border-width) solid var(--lp-color-border-strong);
    border-radius: var(--lp-radius-xl);
    box-shadow: var(--lp-shadow-lg);
    z-index: var(--lp-z-modal);
    -webkit-backdrop-filter: blur(var(--lp-blur-xl)) saturate(var(--lp-saturate));
    backdrop-filter: blur(var(--lp-blur-xl)) saturate(var(--lp-saturate));
    animation: lp-modal-in var(--lp-duration-slow) var(--lp-ease);
}
.lp-modal--sm { max-width: 380px; }
.lp-modal--lg { max-width: 720px; }

.lp-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-4);
    padding: var(--lp-space-5) var(--lp-space-6);
    border-bottom: var(--lp-border-width) solid var(--lp-color-border-subtle);
}
.lp-modal__title { margin: 0; font-size: var(--lp-text-lg); font-weight: var(--lp-weight-bold); letter-spacing: var(--lp-tracking-tight); }
.lp-modal__close {
    background: transparent; border: none; color: var(--lp-color-text-muted);
    cursor: pointer; padding: var(--lp-space-2); border-radius: var(--lp-radius-sm);
    display: flex; transition: var(--lp-transition-colors);
}
.lp-modal__close:hover { color: var(--lp-color-text); background: var(--lp-color-glass-hover); }
.lp-modal__body   { padding: var(--lp-space-6); overflow-y: auto; color: var(--lp-color-text-secondary); }
.lp-modal__footer {
    display: flex; justify-content: flex-end; gap: var(--lp-space-3);
    padding: var(--lp-space-4) var(--lp-space-6);
    border-top: var(--lp-border-width) solid var(--lp-color-border-subtle);
}

@keyframes lp-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   3.11 DRAWER
   -------------------------------------------------------------------------- */
.lp-drawer-backdrop {
    position: fixed; inset: 0;
    background: var(--lp-color-scrim);
    -webkit-backdrop-filter: blur(var(--lp-blur-sm));
    backdrop-filter: blur(var(--lp-blur-sm));
    z-index: var(--lp-z-drawer-backdrop);
    opacity: 0; visibility: hidden;
    transition: opacity var(--lp-duration-slow) var(--lp-ease), visibility var(--lp-duration-slow);
}
.lp-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.lp-drawer {
    position: fixed;
    top: 0; bottom: 0; right: 0;
    width: min(420px, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--lp-color-surface);
    border-left: var(--lp-border-width) solid var(--lp-color-border);
    box-shadow: var(--lp-shadow-lg);
    z-index: var(--lp-z-drawer);
    transform: translateX(100%);
    transition: transform var(--lp-duration-slow) var(--lp-ease);
}
.lp-drawer.is-open { transform: translateX(0); }
.lp-drawer--left { right: auto; left: 0; border-left: none; border-right: var(--lp-border-width) solid var(--lp-color-border); transform: translateX(-100%); }
.lp-drawer--left.is-open { transform: translateX(0); }
.lp-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--lp-space-5) var(--lp-space-6); border-bottom: var(--lp-border-width) solid var(--lp-color-border-subtle); }
.lp-drawer__body   { padding: var(--lp-space-6); overflow-y: auto; flex: 1; }
.lp-drawer__footer { padding: var(--lp-space-4) var(--lp-space-6); border-top: var(--lp-border-width) solid var(--lp-color-border-subtle); }

/* --------------------------------------------------------------------------
   3.12 SIDEBAR
   -------------------------------------------------------------------------- */
.lp-sidebar {
    width: 288px;
    display: flex;
    flex-direction: column;
    background: rgba(13, 17, 23, .92);
    border-right: var(--lp-border-width) solid var(--lp-color-border);
    -webkit-backdrop-filter: blur(28px) saturate(var(--lp-saturate));
    backdrop-filter: blur(28px) saturate(var(--lp-saturate));
}
.lp-sidebar__brand  { padding: var(--lp-space-6) var(--lp-space-5); border-bottom: var(--lp-border-width) solid var(--lp-color-border-subtle); }
.lp-sidebar__nav    { padding: var(--lp-space-3); overflow-y: auto; flex: 1; }
.lp-sidebar__section {
    padding: var(--lp-space-4) var(--lp-space-3) var(--lp-space-2);
    font-size: var(--lp-text-2xs);
    font-weight: var(--lp-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--lp-tracking-widest);
    color: var(--lp-color-text-disabled);
}
.lp-nav-item {
    display: flex;
    align-items: center;
    gap: var(--lp-space-3);
    padding: .72rem .85rem;
    margin-bottom: 2px;
    border-radius: var(--lp-radius-md);
    border: var(--lp-border-width) solid transparent;
    color: var(--lp-color-text-secondary);
    font-size: var(--lp-text-md);
    font-weight: var(--lp-weight-medium);
    text-decoration: none;
    transition: var(--lp-transition-colors);
}
.lp-nav-item__icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--lp-color-text-muted); transition: color var(--lp-duration-base) var(--lp-ease); }
.lp-nav-item:hover { background: var(--lp-color-glass-hover); color: var(--lp-color-text); border-color: var(--lp-color-border); }
.lp-nav-item:hover .lp-nav-item__icon { color: var(--lp-color-secondary); }
.lp-nav-item.is-active {
    background: linear-gradient(90deg, rgba(0, 87, 255, .22) 0%, rgba(0, 209, 255, .06) 100%);
    color: #fff;
    border-color: var(--lp-color-primary-border);
    box-shadow: var(--lp-shadow-inset);
}
.lp-nav-item.is-active .lp-nav-item__icon { color: var(--lp-color-secondary); }
.lp-nav-item__badge { margin-left: auto; }

/* --------------------------------------------------------------------------
   3.13 TOPBAR / NAVBAR
   -------------------------------------------------------------------------- */
.lp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-4);
    padding: var(--lp-space-4) var(--lp-space-6);
    background: rgba(13, 17, 23, .8);
    border-bottom: var(--lp-border-width) solid var(--lp-color-border);
    -webkit-backdrop-filter: blur(var(--lp-blur-lg));
    backdrop-filter: blur(var(--lp-blur-lg));
    position: sticky;
    top: 0;
    z-index: var(--lp-z-sticky);
}
.lp-topbar__group { display: flex; align-items: center; gap: var(--lp-space-3); }
.lp-topbar__title { margin: 0; font-size: var(--lp-text-xl); font-weight: var(--lp-weight-bold); letter-spacing: var(--lp-tracking-tight); }

/* --------------------------------------------------------------------------
   3.14 BREADCRUMB
   -------------------------------------------------------------------------- */
.lp-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--lp-space-2); font-size: var(--lp-text-sm); }
.lp-breadcrumb__item { color: var(--lp-color-text-muted); text-decoration: none; transition: color var(--lp-duration-base) var(--lp-ease); }
.lp-breadcrumb__item:hover { color: var(--lp-color-text); }
.lp-breadcrumb__item[aria-current] { color: var(--lp-color-text); font-weight: var(--lp-weight-medium); }
.lp-breadcrumb__sep { color: var(--lp-color-text-disabled); }

/* --------------------------------------------------------------------------
   3.15 DROPDOWN
   -------------------------------------------------------------------------- */
.lp-dropdown { position: relative; display: inline-block; }
.lp-dropdown__menu {
    position: absolute;
    top: calc(100% + var(--lp-space-2));
    right: 0;
    min-width: 200px;
    padding: var(--lp-space-1);
    background: rgba(26, 31, 41, .97);
    border: var(--lp-border-width) solid var(--lp-color-border-strong);
    border-radius: 14px;
    box-shadow: var(--lp-shadow-md);
    z-index: var(--lp-z-dropdown);
    -webkit-backdrop-filter: blur(var(--lp-blur-lg));
    backdrop-filter: blur(var(--lp-blur-lg));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--lp-duration-fast) var(--lp-ease),
                transform var(--lp-duration-fast) var(--lp-ease),
                visibility var(--lp-duration-fast);
}
.lp-dropdown__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.lp-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--lp-space-3);
    width: 100%;
    padding: .55rem .8rem;
    border: none;
    background: transparent;
    border-radius: var(--lp-radius-sm);
    color: var(--lp-color-text-secondary);
    font-size: var(--lp-text-md);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: var(--lp-transition-colors);
}
.lp-dropdown__item:hover { background: var(--lp-color-glass-hover); color: var(--lp-color-text); }
.lp-dropdown__item--danger { color: var(--lp-color-danger-fg); }
.lp-dropdown__divider { height: 1px; background: var(--lp-color-border-subtle); margin: var(--lp-space-1) 0; }

/* --------------------------------------------------------------------------
   3.16 TOOLTIP  (CSS puro, via atributo)
   -------------------------------------------------------------------------- */
.lp-tooltip { position: relative; }
.lp-tooltip::after {
    content: attr(data-lp-tooltip);
    position: absolute;
    bottom: calc(100% + var(--lp-space-2));
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: .4rem .65rem;
    background: var(--lp-color-elevated);
    border: var(--lp-border-width) solid var(--lp-color-border-strong);
    border-radius: var(--lp-radius-xs);
    color: var(--lp-color-text);
    font-size: var(--lp-text-xs);
    font-weight: var(--lp-weight-medium);
    white-space: nowrap;
    box-shadow: var(--lp-shadow-md);
    opacity: 0;
    pointer-events: none;
    z-index: var(--lp-z-tooltip);
    transition: opacity var(--lp-duration-fast) var(--lp-ease), transform var(--lp-duration-fast) var(--lp-ease);
}
.lp-tooltip:hover::after,
.lp-tooltip:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --------------------------------------------------------------------------
   3.17 TABS
   -------------------------------------------------------------------------- */
.lp-tabs {
    display: inline-flex;
    gap: var(--lp-space-1);
    padding: 3px;
    background: rgba(255, 255, 255, .045);
    border: var(--lp-border-width) solid var(--lp-color-border-subtle);
    border-radius: var(--lp-radius-pill);
}
.lp-tab {
    padding: .42rem .95rem;
    border: none;
    background: transparent;
    border-radius: var(--lp-radius-pill);
    color: var(--lp-color-text-muted);
    font-family: inherit;
    font-size: var(--lp-text-sm);
    font-weight: var(--lp-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--lp-transition-colors), box-shadow var(--lp-duration-base) var(--lp-ease);
}
.lp-tab:hover:not(.is-active) { color: var(--lp-color-text); background: var(--lp-color-glass-hover); }
.lp-tab.is-active {
    background: linear-gradient(135deg, #0057FF 0%, #0A6BFF 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 87, 255, .3);
}
.lp-tab:focus-visible { outline: var(--lp-ring-width) solid var(--lp-color-primary); outline-offset: var(--lp-ring-offset); }

/* Variante sublinhada */
.lp-tabs--underline { background: transparent; border: none; border-bottom: var(--lp-border-width) solid var(--lp-color-border); border-radius: 0; padding: 0; display: flex; }
.lp-tabs--underline .lp-tab { border-radius: 0; border-bottom: 2px solid transparent; padding: .7rem 1rem; }
.lp-tabs--underline .lp-tab.is-active { background: transparent; color: var(--lp-color-secondary); border-bottom-color: var(--lp-color-secondary); box-shadow: none; }

.lp-tabpanel { display: none; }
.lp-tabpanel.is-active { display: block; }

/* --------------------------------------------------------------------------
   3.18 TABELA
   -------------------------------------------------------------------------- */
.lp-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--lp-radius-lg); }

.lp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--lp-text-md);
    color: var(--lp-color-text-secondary);
}
.lp-table thead th {
    padding: .95rem 1.1rem;
    background: rgba(255, 255, 255, .028);
    border-bottom: var(--lp-border-width) solid var(--lp-color-border);
    color: var(--lp-color-text-muted);
    font-size: var(--lp-text-xs);
    font-weight: var(--lp-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--lp-tracking-wider);
    text-align: left;
    white-space: nowrap;
}
.lp-table tbody td {
    padding: .95rem 1.1rem;
    border-bottom: var(--lp-border-width) solid var(--lp-color-border-subtle);
    vertical-align: middle;
}
.lp-table tbody tr { transition: background var(--lp-duration-fast) var(--lp-ease); }
.lp-table tbody tr:hover { background: rgba(255, 255, 255, .04); }
.lp-table tbody tr:last-child td { border-bottom: none; }

/* Coluna numerica — sempre tabular e a direita */
.lp-table .lp-num,
.lp-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.lp-table--compact thead th,
.lp-table--compact tbody td { padding: .6rem .8rem; }

/* --------------------------------------------------------------------------
   3.19 PAGINACAO
   -------------------------------------------------------------------------- */
.lp-pagination { display: flex; align-items: center; gap: var(--lp-space-1); flex-wrap: wrap; }
.lp-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: .5rem .75rem;
    background: var(--lp-color-glass);
    border: var(--lp-border-width) solid var(--lp-color-border);
    border-radius: var(--lp-radius-sm);
    color: var(--lp-color-text-secondary);
    font-size: var(--lp-text-sm);
    font-weight: var(--lp-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: var(--lp-transition-colors);
}
.lp-page:hover { background: var(--lp-color-glass-active); border-color: var(--lp-color-border-strong); color: #fff; }
.lp-page.is-active {
    background: var(--lp-color-primary);
    border-color: var(--lp-color-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 87, 255, .3);
}
.lp-page.is-disabled { opacity: var(--lp-opacity-disabled); pointer-events: none; background: transparent; }

/* --------------------------------------------------------------------------
   3.20 PROGRESS
   -------------------------------------------------------------------------- */
.lp-progress {
    height: 8px;
    background: rgba(255, 255, 255, .07);
    border: var(--lp-border-width) solid var(--lp-color-border-subtle);
    border-radius: var(--lp-radius-pill);
    overflow: hidden;
}
.lp-progress__bar {
    height: 100%;
    background: var(--lp-gradient-brand);
    border-radius: var(--lp-radius-pill);
    box-shadow: var(--lp-shadow-glow);
    transition: width var(--lp-duration-slower) var(--lp-ease);
}
.lp-progress--sm { height: 4px; }
.lp-progress--lg { height: 12px; }
.lp-progress__bar--success { background: var(--lp-gradient-success); box-shadow: none; }
.lp-progress__bar--danger  { background: var(--lp-gradient-danger);  box-shadow: none; }

/* Progresso circular (indeterminado) */
.lp-spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(255, 255, 255, .18);
    border-top-color: var(--lp-color-secondary);
    border-radius: var(--lp-radius-full);
    animation: lp-spin var(--lp-duration-slower) linear infinite;
    display: inline-block;
}
.lp-spinner--sm { width: 14px; height: 14px; }
.lp-spinner--lg { width: 32px; height: 32px; border-width: 3px; }

/* --------------------------------------------------------------------------
   3.21 SKELETON
   -------------------------------------------------------------------------- */
.lp-skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
    border-radius: var(--lp-radius-sm);
}
.lp-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
    animation: lp-shimmer 1.4s infinite;
}
@keyframes lp-shimmer { to { transform: translateX(100%); } }

.lp-skeleton--text   { height: .8em; margin: .25em 0; border-radius: var(--lp-radius-xs); }
.lp-skeleton--title  { height: 1.4em; width: 45%; }
.lp-skeleton--circle { border-radius: var(--lp-radius-full); }
.lp-skeleton--card   { height: 120px; border-radius: var(--lp-radius-lg); }

/* --------------------------------------------------------------------------
   3.22 EMPTY STATE
   -------------------------------------------------------------------------- */
.lp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--lp-space-3);
    padding: var(--lp-space-12) var(--lp-space-6);
    text-align: center;
    border: 1px dashed var(--lp-color-border-strong);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-color-glass);
}
.lp-empty__icon  { font-size: var(--lp-text-4xl); color: var(--lp-color-text-disabled); line-height: 1; }
.lp-empty__title { margin: 0; font-size: var(--lp-text-base); font-weight: var(--lp-weight-semibold); color: var(--lp-color-text); }
.lp-empty__text  { margin: 0; font-size: var(--lp-text-md); color: var(--lp-color-text-muted); max-width: 42ch; }

/* --------------------------------------------------------------------------
   3.23 SEARCH / FILTROS
   -------------------------------------------------------------------------- */
.lp-search { position: relative; display: flex; align-items: center; width: 100%; max-width: 380px; }
.lp-search__icon { position: absolute; left: var(--lp-space-4); color: var(--lp-color-text-muted); pointer-events: none; }
.lp-search__input {
    width: 100%;
    padding: .7rem 1rem .7rem 2.75rem;
    background: rgba(255, 255, 255, .04);
    border: var(--lp-border-width) solid var(--lp-color-border);
    border-radius: var(--lp-radius-pill);
    color: var(--lp-color-text);
    font-family: inherit;
    font-size: var(--lp-text-md);
    outline: none;
    transition: var(--lp-transition-colors), box-shadow var(--lp-duration-base) var(--lp-ease);
}
.lp-search__input::placeholder { color: var(--lp-color-text-disabled); }
.lp-search__input:focus { border-color: var(--lp-color-border-focus); box-shadow: var(--lp-ring); background: rgba(255, 255, 255, .06); }
.lp-search__clear { position: absolute; right: var(--lp-space-3); background: none; border: none; color: var(--lp-color-text-muted); cursor: pointer; display: flex; }
.lp-search__clear:hover { color: var(--lp-color-text); }

.lp-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--lp-space-3); }
.lp-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--lp-space-2);
    padding: .45rem .85rem;
    background: var(--lp-color-glass-hover);
    border: var(--lp-border-width) solid var(--lp-color-border);
    border-radius: var(--lp-radius-pill);
    color: var(--lp-color-text-secondary);
    font-size: var(--lp-text-sm);
    font-weight: var(--lp-weight-medium);
    cursor: pointer;
    transition: var(--lp-transition-colors);
}
.lp-filter-chip:hover { background: var(--lp-color-glass-active); color: var(--lp-color-text); }
.lp-filter-chip.is-active {
    background: var(--lp-color-primary-soft);
    border-color: var(--lp-color-primary-border);
    color: #6FA0FF;
}

/* --------------------------------------------------------------------------
   3.24 UPLOAD
   -------------------------------------------------------------------------- */
.lp-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--lp-space-3);
    padding: var(--lp-space-8);
    text-align: center;
    background: var(--lp-color-glass);
    border: 1px dashed var(--lp-color-border-strong);
    border-radius: var(--lp-radius-lg);
    color: var(--lp-color-text-secondary);
    cursor: pointer;
    transition: var(--lp-transition-colors);
}
.lp-upload:hover,
.lp-upload.is-dragover { background: var(--lp-color-glass-hover); border-color: var(--lp-color-primary); color: var(--lp-color-text); }
.lp-upload__icon { font-size: var(--lp-text-3xl); color: var(--lp-color-text-muted); }
.lp-upload__hint { font-size: var(--lp-text-xs); color: var(--lp-color-text-disabled); }
.lp-upload.is-error { border-color: var(--lp-color-danger); color: var(--lp-color-danger-fg); }

.lp-upload-item {
    display: flex;
    align-items: center;
    gap: var(--lp-space-3);
    padding: var(--lp-space-3);
    background: var(--lp-color-glass);
    border: var(--lp-border-width) solid var(--lp-color-border-subtle);
    border-radius: var(--lp-radius-md);
}
.lp-upload-item__name { flex: 1; min-width: 0; font-size: var(--lp-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   3.25 CHARTS — casca e tokens de serie
   O desenho fica a cargo da lib; aqui padronizamos moldura, eixos e tooltip.
   -------------------------------------------------------------------------- */
.lp-chart {
    --lp-chart-1: #0057FF;
    --lp-chart-2: #00D1FF;
    --lp-chart-3: #7A5CFF;
    --lp-chart-4: #00D6A3;
    --lp-chart-5: #FFB020;
    --lp-chart-6: #FF4D6A;
    --lp-chart-grid: rgba(255, 255, 255, .06);
    --lp-chart-axis: var(--lp-color-text-muted);

    position: relative;
    width: 100%;
}
.lp-chart__header { display: flex; align-items: center; justify-content: space-between; gap: var(--lp-space-4); margin-bottom: var(--lp-space-5); }
.lp-chart__legend { display: flex; align-items: center; gap: var(--lp-space-4); flex-wrap: wrap; }
.lp-chart__legend-item { display: inline-flex; align-items: center; gap: var(--lp-space-2); font-size: var(--lp-text-xs); color: var(--lp-color-text-muted); }
.lp-chart__swatch { width: 9px; height: 9px; border-radius: 3px; background: var(--lp-gradient-brand); }

/* Barras em CSS (sem lib) */
.lp-chart__bars { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--lp-space-2); height: 200px; }
.lp-chart__col  { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; gap: var(--lp-space-2); max-width: 56px; }
.lp-chart__bar  {
    width: 100%;
    min-height: 8px;
    background: var(--lp-gradient-chart);
    border-radius: 8px 8px 4px 4px;
    transition: filter var(--lp-duration-base) var(--lp-ease), box-shadow var(--lp-duration-base) var(--lp-ease);
}
.lp-chart__bar:hover { filter: brightness(1.15); box-shadow: var(--lp-shadow-glow); }
.lp-chart__label { font-size: var(--lp-text-xs); color: var(--lp-color-text-muted); }

/* --------------------------------------------------------------------------
   3.26 DIVIDER
   -------------------------------------------------------------------------- */
.lp-divider { height: 1px; background: var(--lp-color-border); border: none; margin: var(--lp-space-6) 0; }
.lp-divider--labeled { display: flex; align-items: center; gap: var(--lp-space-3); height: auto; background: none; color: var(--lp-color-text-disabled); font-size: var(--lp-text-xs); }
.lp-divider--labeled::before,
.lp-divider--labeled::after { content: ''; flex: 1; height: 1px; background: var(--lp-color-border); }

} /* @layer lp-components */

/* ==========================================================================
   4. UTILITARIOS
   ========================================================================== */
@layer lp-utilities {
    .lp-u-tabular   { font-variant-numeric: tabular-nums; }
    .lp-u-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lp-u-muted     { color: var(--lp-color-text-muted); }
    .lp-u-secondary { color: var(--lp-color-text-secondary); }
    .lp-u-success   { color: var(--lp-color-success); }
    .lp-u-danger    { color: var(--lp-color-danger); }
    .lp-u-warning   { color: var(--lp-color-warning); }
    .lp-u-info      { color: var(--lp-color-info); }
    .lp-u-sr-only {
        position: absolute; width: 1px; height: 1px;
        padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
}

/* ==========================================================================
   5. RESPONSIVIDADE
   Valores literais espelhando os tokens --lp-bp-*
   ========================================================================== */

/* --lp-bp-lg: 992px */
@media (max-width: 992px) {
    :root { --lp-page-padding: var(--lp-space-5); --lp-card-padding: var(--lp-space-5); }
}

/* --lp-bp-md: 768px */
@media (max-width: 768px) {
    :root {
        --lp-page-padding: var(--lp-space-4);
        --lp-card-padding: var(--lp-space-4);
        --lp-stack: var(--lp-space-4);
        --lp-gutter: var(--lp-space-3);
    }

    .lp-kpi-grid { grid-template-columns: 1fr; }
    .lp-modal    { max-width: 100%; }
    .lp-toast-region { top: auto; bottom: var(--lp-space-4); left: var(--lp-space-4); right: var(--lp-space-4); }
    .lp-toast    { min-width: 0; max-width: 100%; }
    .lp-topbar   { padding: var(--lp-space-3) var(--lp-space-4); }
    .lp-search   { max-width: 100%; }
}

/* --lp-bp-sm: 576px */
@media (max-width: 576px) {
    :root { --lp-page-padding: var(--lp-space-3); }
    .lp-kpi__value { font-size: var(--lp-text-2xl); }
    .lp-btn--block-sm { display: flex; width: 100%; }
}

/* ==========================================================================
   6. PREFERENCIAS DO USUARIO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .lp-skeleton::after,
    .lp-spinner,
    .lp-btn.is-loading::after { animation: none; }

    .lp-toast, .lp-modal { animation: none; }

    .lp-card--interactive:hover,
    .lp-kpi:hover { transform: none; }
}

@media (prefers-contrast: more) {
    :root {
        --lp-color-border:        rgba(255, 255, 255, .2);
        --lp-color-border-strong: rgba(255, 255, 255, .32);
        --lp-color-text-secondary: #B9C4D4;
        --lp-color-text-muted:     #8A97A8;
    }
}