/* Argentum Sans Font Family */
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-THIN.TTF') format('truetype'); font-weight: 100; font-style: normal; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-THINITALIC.TTF') format('truetype'); font-weight: 100; font-style: italic; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-EXTRALIGHT.TTF') format('truetype'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-EXTRALIGHTITALIC.TTF') format('truetype'); font-weight: 200; font-style: italic; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-LIGHT.TTF') format('truetype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-LIGHTITALIC.TTF') format('truetype'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-REGULAR.TTF') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-ITALIC.TTF') format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-MEDIUM.TTF') format('truetype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-MEDIUMITALIC.TTF') format('truetype'); font-weight: 500; font-style: italic; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-SEMIBOLD.TTF') format('truetype'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-SEMIBOLDITALIC.TTF') format('truetype'); font-weight: 600; font-style: italic; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-BOLD.TTF') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-BOLDITALIC.TTF') format('truetype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-EXTRABOLD.TTF') format('truetype'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-EXTRABOLDITALIC.TTF') format('truetype'); font-weight: 800; font-style: italic; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-BLACK.TTF') format('truetype'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'Argentum Sans'; src: url('fonts/ARGENTUMSANS-BLACKITALIC.TTF') format('truetype'); font-weight: 900; font-style: italic; }

:root {
    /* ── Brand (invariável entre temas) ── */
    --grad-start: #7820b0;
    --grad-end: var(--accent-secondary);
    --brand-grad-start: #8a1a9c;
    --brand-grad-mid: #b11b8d;
    --brand-grad-end: #de1c7b;
    --accent-purple: var(--accent-primary);
    --accent-pink: var(--accent-secondary);
    --title-grad-start: #F2D9FF;
    --title-grad-mid: #D86BE8;
    --title-grad-end: #F24FAF;

    /* ── Cor principal dinâmica (Configurações > Aparência) ── */
    --accent-primary: #db90ff;
    --accent-secondary: #ed1c75;
    --accent-strong: #8a1a9c;
    --accent-primary-rgb: 219,144,255;
    --accent-secondary-rgb: 237,28,117;
    --accent-strong-rgb: 138,26,156;
    --accent-readable: #4c185e;
    --accent-readable-2: #3a0a5c;
    --accent-readable-rgb: 76,24,94;
    --accent-soft: rgba(var(--accent-primary-rgb), 0.12);
    --accent-soft-2: rgba(var(--accent-secondary-rgb), 0.10);
    --accent-border: rgba(var(--accent-primary-rgb), 0.22);
    --accent-border-strong: rgba(var(--accent-primary-rgb), 0.40);
    --accent-glow: rgba(var(--accent-primary-rgb), 0.28);
    --accent-glow-strong: rgba(var(--accent-secondary-rgb), 0.36);
    --accent-gradient: linear-gradient(135deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);

    /* ── Tintas derivadas da cor principal ── */
    --accent-light-bg: #f4f0fc;
    --accent-light-bg-2: #f0ebfa;
    --accent-light-bg-3: #e8e2f5;
    --accent-light-bg-4: #e8e0f5;
    --accent-light-card-header: #ede3f8;
    --accent-light-card-radial-1: #e8d8f8;
    --accent-light-card-radial-2: #dcc8f0;
    --accent-light-surface-base: #ede8f8;
    --accent-light-surface-mid: rgba(240,235,252,0.85);
    --accent-dark-bg-1: #1c0c38;
    --accent-dark-bg-2: #050208;
    --accent-planet-glow: rgba(188, 28, 237, 0.35);

    /* ── Superfícies ── */
    --bg-color: #030105;
    --surface-base: #07030c;
    --surface-card: rgba(12,10,16,0.93);
    --surface-mid: rgba(10,10,18,0.56);
    --surface-overlay: rgba(5,2,12,0.82);

    /* ── Bordas ── */
    --border-subtle: rgba(255,255,255,0.06);
    --border-main: rgba(var(--accent-primary-rgb), 0.22);
    --border-strong: rgba(var(--accent-primary-rgb), 0.4);

    /* ── Texto ── */
    --text-color: #ffffff;
    --text-primary: #ffffff;
    --text-secondary: rgba(255,255,255,0.70);
    --text-muted: rgba(255,255,255,0.40);

    /* ── Sombras ── */
    --shadow-brand: rgba(var(--accent-strong-rgb), 0.12);
    --shadow-brand-glow: rgba(var(--accent-strong-rgb), 0.25);

    /* ── Legado (mantidos para compatibilidade) ── */
    --card-bg: #0a0515;
    --card-text: #1a1a1a;
    --input-bg: #403e43;
}

/* ── TEMA CLARO ─────────────────────────────────────────────── */
body.theme-light {
    /* Gradient dos títulos vira o mesmo do botão (contraste no fundo branco) */
    --title-grad-start: var(--brand-grad-start);
    --title-grad-mid:   var(--brand-grad-mid);
    --title-grad-end:   var(--brand-grad-end);

    --bg-color: var(--accent-light-bg);
    --surface-base: var(--accent-light-surface-base);
    --surface-card: rgba(255,255,255,0.96);
    --surface-mid: var(--accent-light-surface-mid);
    --surface-overlay: rgba(255,255,255,0.92);

    --border-subtle: rgba(var(--accent-strong-rgb),0.10);
    --border-main: rgba(var(--accent-strong-rgb),0.25);
    --border-strong: rgba(var(--accent-strong-rgb),0.45);

    --text-color: #17131f;
    --text-primary: #17131f;
    --text-secondary: rgba(23,19,31,0.68);
    --text-muted: rgba(23,19,31,0.44);

    --shadow-brand: rgba(var(--accent-strong-rgb),0.10);
    --shadow-brand-glow: rgba(var(--accent-strong-rgb),0.18);

    --card-bg: var(--accent-light-bg);
    --card-text: #17131f;
    --input-bg: var(--accent-light-bg-3);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Argentum Sans', sans-serif;
    overflow: hidden; 
    height: 100vh;
}

.app-container {
    position: relative;
    z-index: 10;
    width: 100vw; 
    height: 100vh;
    padding: 50px 0; 
    display: flex;
    flex-direction: column;
    overflow: visible;
    transition: opacity 0.45s ease;
}
.app-container.fade-in  { animation: appFadeIn  0.65s cubic-bezier(0.4,0,0.2,1) both; }
.app-container.fade-out { animation: appFadeOut 0.45s cubic-bezier(0.4,0,0.2,1) both; }
@keyframes appFadeIn  { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:translateY(0) } }
@keyframes appFadeOut { from { opacity:1; transform:translateY(0) } to { opacity:0; transform:translateY(-6px) } }

#loginPage { transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1), transform 0.45s cubic-bezier(0.4,0,0.2,1); }
#loginPage.fade-in  { animation: loginFadeIn  0.55s cubic-bezier(0.4,0,0.2,1) both; }
#loginPage.fade-out { animation: loginFadeOut 0.45s cubic-bezier(0.4,0,0.2,1) both; }
@keyframes loginFadeIn  { from { opacity:0; transform:translateY(8px)  } to { opacity:1; transform:translateY(0) } }
@keyframes loginFadeOut { from { opacity:1; transform:translateY(0) } to { opacity:0; transform:translateY(-8px) } }

.header-container {
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    border-radius: 16px;
    height: 85px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 15px rgba(var(--accent-secondary-rgb), 0.2);
    
    width: 100%;
    padding: 0 35px;
    flex-shrink: 0;
}

.header-container h1 { font-size: 26px; font-weight: 500; }
.header-controls { display: flex; gap: 15px; align-items: center; }

.btn-create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 22px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
.btn-create:hover {
    background: rgba(0, 0, 0, 0.38);
    border-color: rgba(255,255,255,0.16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
    transform: translateY(-1px);
}

.btn-customize {
    background-color: #3f3f42;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.2s;
}
.btn-customize:hover { background-color: #666; transform: scale(1.05); }
.btn-customize svg { stroke: #fff; }

.search-box {
    display: flex;
    align-items: center;
    min-height: 44px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 11px 16px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-box:focus-within {
    background: rgba(0, 0, 0, 0.36);
    border-color: rgba(255,255,255,0.16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.search-box input {
    background: transparent;
    border: none;
    color: #fff;
    outline: none;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    width: 160px;
}
.search-box input::placeholder { color: rgba(255,255,255,0.62); }
.search-icon {
    display: flex;
    align-items: center;
    margin-left: 8px;
    cursor: pointer;
    color: rgba(255,255,255,0.78);
}

/* -------------------------------------------------------------
 * ARQUITETURA DE PAGINAÇÃO (BLACOS DE 9)
 * ------------------------------------------------------------- */
.client-viewport {
    display: flex; /* Alinha as "Páginas" lado a lado */
    overflow-x: auto;
    overflow-y: visible; 
    width: 100vw; 
    height: 100%;
    
    /* CSS Native Snap! Muito mais performance */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth; 
    
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.client-viewport::-webkit-scrollbar { display: inline-flex; }

.card-page {
    width: 100vw;
    height: 100%;
    flex-shrink: 0;
    scroll-snap-align: center;
    
    display: grid;
    grid-template-columns: repeat(3, 330px);
    grid-template-rows: repeat(3, 165px);
    
    gap: 15px 35px;
    align-content: center;
    justify-content: center;
    padding: 30px 40px 20vh;
    overflow: visible;
}

/* ------------------------------------------------------------- */

.client-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    border: none;
    outline: none;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    position: relative;
    
    transform: translateX(80px);
    transition: transform 0.5s ease-out, filter 0.3s ease;
}

.card-page.in-view .client-card {
    transform: translateX(0);
}

/* Linha 1 */
.card-page.in-view .client-card:nth-child(3n+1) { transition-delay: 0ms, 0s; }
.card-page.in-view .client-card:nth-child(3n+2) { transition-delay: 120ms, 0s; }
.card-page.in-view .client-card:nth-child(3n+3) { transition-delay: 240ms, 0s; }
/* Linha 2 */
.card-page.in-view .client-card:nth-child(n+4):nth-child(3n+1) { transition-delay: 70ms, 0s; }
.card-page.in-view .client-card:nth-child(n+4):nth-child(3n+2) { transition-delay: 190ms, 0s; }
.card-page.in-view .client-card:nth-child(n+4):nth-child(3n+3) { transition-delay: 310ms, 0s; }
/* Linha 3 */
.card-page.in-view .client-card:nth-child(n+7):nth-child(3n+1) { transition-delay: 140ms, 0s; }
.card-page.in-view .client-card:nth-child(n+7):nth-child(3n+2) { transition-delay: 260ms, 0s; }
.card-page.in-view .client-card:nth-child(n+7):nth-child(3n+3) { transition-delay: 380ms, 0s; }

.card-page.in-view .client-card:hover {
    transform: translateY(-5px) scale(1.02);
    filter:
        drop-shadow(0 0 6px rgba(var(--accent-secondary-rgb), 0.55))
        drop-shadow(0 0 18px rgba(var(--accent-primary-rgb), 0.2));
    transition-delay: 0s, 0s;
}

/* O NOVO BOTÃO DE DELETE / DROPDOWN NOS CARDS */
.delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    width: 30px;
    height: 30px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(4px);
    transition: all 0.2s;
    opacity: 0; /* Aparece só quando passar o mouse */
}
.client-card:hover .delete-btn {
    opacity: 1;
}
.delete-btn:hover {
    background: var(--accent-secondary);
    transform: scale(1.1);
    border: 1px solid var(--accent-secondary);
}

/* Hover glow now defined in stagger section above */

.card-header {
    height: 125px; 
    background: var(--surface-base); 
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
        radial-gradient(circle at 75% 15%, rgba(255, 255, 255, 0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.9) 1px, transparent 1px),
        radial-gradient(circle at 80% 60%, rgba(var(--accent-secondary-rgb), 0.4) 40px, transparent 60px),
        radial-gradient(ellipse at 50% 50%, var(--accent-dark-bg-1) 0%, var(--accent-dark-bg-2) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    border-bottom: 0px solid transparent; 
}

.card-header h2 { font-size: 26px; font-weight: 900; margin: 0; letter-spacing: -1px; z-index: 2; }
.card-header .doc { color: #ffffff; text-shadow: 0 0 15px rgba(255,255,255,0.4); }
.card-header .dot { color: var(--accent-secondary); }
.card-header .arts { color: var(--accent-secondary); text-shadow: 0 0 15px rgba(var(--accent-secondary-rgb), 0.5); }
.card-header .subtitle { font-size: 9px; font-weight: 600; color: #ffffff; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.9; margin-top:2px; }

.card-footer {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    background-color: #ffffff;
}

.planet-wrapper { position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; transition: transform 0.8s ease; }
#planetCanvas { width: 100vw; height: 100vh; display: block; filter: drop-shadow(0px -15px 80px var(--accent-planet-glow)); }
/* Planeta mais baixo na tela de login — CSS puro, sem tocar no Three.js */
/* Planet Y position is now controlled via Three.js lerp (see script.js init3DPlanet) */


/* =============================================================
 * SIDEBAR & HAMBURGER
 * ============================================================= */

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.btn-hamburger {
    position: fixed;
    top: 62px;
    left: 32px;
    background: none;
    border: none;
    border-radius: 0;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0;
    transition: opacity 0.2s;
    z-index: 100;
}
.btn-hamburger:hover { opacity: 0.7; }
.btn-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    transition: all 0.25s;
}
.btn-hamburger:hover span { background: #fff; }

.header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1180px;
    margin: 0 auto 20px auto;
    width: calc(100% - 40px);
    flex-shrink: 0;
    overflow: visible;
    position: relative;
    z-index: 20;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: rgba(5, 2, 12, 0.82);
    border-right: 1px solid rgba(var(--accent-primary-rgb), 0.22);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    z-index: 500;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px 14px 20px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0 0 80px rgba(var(--accent-strong-rgb), 0.25), 0 0 0 1px rgba(var(--accent-primary-rgb), 0.06);
    overflow: hidden;
}
.sidebar::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.08), rgba(var(--accent-secondary-rgb), 0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.sidebar > * {
    position: relative;
    z-index: 1;
}
.sidebar.open {
    transform: translateX(0);
    z-index: 850;
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 499;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.sidebar-overlay.open {
    opacity: 1;
    visibility: visible;
    z-index: 849;
}

/* Profile */
.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 22px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(var(--accent-secondary-rgb), 0.22);
}
.sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
    min-width: 0;
}
.sidebar-user-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-email {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sections */
.sidebar-section {
    margin-bottom: 18px;
}
.sidebar-section-label {
    display: block;
    padding: 0 12px;
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.34);
}

/* Buttons */
.sidebar-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.10);
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, color 0.22s ease;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    text-align: left;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}
.sidebar-btn > span:not(.sidebar-badge):not(.sidebar-plan-tag):not(.sidebar-new-tag) {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-btn::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    opacity: 0;
    transform: scaleY(0.55);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(var(--accent-primary-rgb), 0.20);
    color: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 10px 22px rgba(0, 0, 0, 0.16);
    transform: translateX(2px);
}
.sidebar-btn.active {
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    border-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: 0 8px 28px rgba(var(--accent-secondary-rgb), 0.22), inset 0 1px 0 rgba(255,255,255,0.08);
}
.sidebar-btn.active::before {
    opacity: 0;
    transform: scaleY(0.55);
}
.sidebar-btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: currentColor;
    stroke: currentColor;
    opacity: 0.88;
    transition: opacity 0.22s ease, color 0.22s ease, stroke 0.22s ease;
}
.sidebar-btn:hover svg,
.sidebar-btn.active svg {
    opacity: 1;
}

.sidebar-section .sidebar-btn + .sidebar-btn,
.sidebar-bottom .sidebar-btn + .sidebar-btn {
    margin-top: 8px;
}

/* Logout */
.sidebar-btn-logout {
    color: rgba(255, 128, 128, 0.82);
}
.sidebar-btn-logout:hover {
    color: #fff;
    background: rgba(255, 82, 82, 0.10);
    border-color: rgba(255, 82, 82, 0.18);
    box-shadow: 0 10px 20px rgba(255, 82, 82, 0.10);
}
.sidebar-btn-logout:hover::before {
    opacity: 0;
}
.sidebar-btn-logout svg {
    color: currentColor;
    stroke: currentColor;
}

/* Badge (client counter) */
.sidebar-badge {
    margin-left: auto;
    min-width: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-primary-rgb), 0.18);
    background: rgba(var(--accent-primary-rgb), 0.10);
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.sidebar-btn.active .sidebar-badge {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* Plan tag */
.sidebar-plan-tag {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-strong) 0%, var(--brand-grad-mid) 50%, var(--brand-grad-end) 100%);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 8px 18px rgba(var(--accent-secondary-rgb), 0.18);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sidebar-new-tag {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(var(--accent-primary-rgb), 0.12);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.26);
    color: var(--accent-primary);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Bottom */
.sidebar-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
}

/* =============================================================
 * NOVOS ESTILOS — MODAIS, STATUS, BUSCA (Adições incrementais)
 * ============================================================= */

/* --- Status Badge nos Cards --- */
.card-status {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    z-index: 10;
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s;
}
.client-card:hover .card-status { opacity: 1; }

.status-ativo { background: rgba(0, 230, 118, 0.25); color: #00e676; border: 1px solid rgba(0, 230, 118, 0.4); }
.status-pendente { background: rgba(255, 193, 7, 0.25); color: #ffc107; border: 1px solid rgba(255, 193, 7, 0.4); }
.status-inativo { background: rgba(255, 82, 82, 0.25); color: #ff5252; border: 1px solid rgba(255, 82, 82, 0.4); }
.status-concluido { background: rgba(41, 182, 246, 0.25); color: #29b6f6; border: 1px solid rgba(41, 182, 246, 0.4); }

/* --- Card Footer aprimorado --- */
.card-footer-name {
    font-weight: 700;
    font-size: 12px;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.card-footer-date {
    font-size: 10px;
    color: #888;
    font-weight: 500;
}

/* --- Modal Overlay --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 2, 18, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- Modal Box --- */
.modal-box {
    background: linear-gradient(155deg, #1e0f38 0%, #110820 55%, #0c0518 100%);
    border-radius: 20px;
    width: 520px;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    /* Borda com gradiente via pseudo-elemento */
    box-shadow:
        0 0 0 1px rgba(var(--accent-primary-rgb), 0.18),
        0 2px 0 0 rgba(var(--accent-secondary-rgb), 0.35),
        0 30px 80px rgba(5, 2, 18, 0.7),
        0 0 60px rgba(var(--accent-strong-rgb), 0.12);
    transform: translateY(24px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Linha de brilho no topo */
.modal-box::before {
    content: "";
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-secondary-rgb),0.7) 40%, rgba(var(--accent-primary-rgb),0.8) 60%, transparent);
    border-radius: 999px;
    pointer-events: none;
}
.modal-overlay.active .modal-box {
    transform: translateY(0) scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px 16px;
    border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.08);
}
.modal-header h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.modal-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255,255,255,0.6);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-close:hover {
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-strong));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(var(--accent-secondary-rgb), 0.35);
}

.modal-body {
    padding: 22px 28px;
}

.form-row {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
}
.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.form-group.full-width {
    width: 100%;
    margin-bottom: 8px;
}
.form-group label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(var(--accent-primary-rgb), 0.55);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 7px;
}
.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.12);
    border-radius: 10px;
    padding: 10px 14px;
    color: rgba(255,255,255,0.90);
    font-family: 'Inter', 'Space Grotesk', sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    resize: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255,255,255,0.22);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: rgba(var(--accent-secondary-rgb), 0.55);
    background: rgba(var(--accent-secondary-rgb), 0.04);
    box-shadow: 0 0 0 3px rgba(var(--accent-secondary-rgb), 0.08), 0 0 16px rgba(var(--accent-secondary-rgb), 0.12);
}
.form-group select {
    -webkit-appearance: none;
    cursor: pointer;
}
.form-group select option {
    background: #180d2e;
    color: var(--accent-primary);
}

.modal-footer {
    padding: 12px 28px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.btn-cancel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255,255,255,0.55);
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', 'Space Grotesk', sans-serif;
    transition: all 0.2s;
}
.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255,255,255,0.15);
    color: #fff;
}
.btn-save {
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    border: none;
    color: #fff;
    padding: 10px 28px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter', 'Space Grotesk', sans-serif;
    transition: all 0.25s;
    box-shadow: 0 4px 18px rgba(var(--accent-secondary-rgb), 0.32);
    letter-spacing: 0.2px;
}
.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(var(--accent-secondary-rgb), 0.45);
    filter: brightness(1.08);
}

/* --- Modo claro --- */
body.theme-light .modal-overlay {
    background: rgba(180, 160, 210, 0.35);
}
body.theme-light .modal-box {
    background: linear-gradient(155deg, var(--accent-light-bg-2) 0%, var(--accent-light-bg-2) 60%, var(--accent-light-bg-3) 100%);
    box-shadow:
        0 0 0 1px rgba(var(--accent-strong-rgb), 0.12),
        0 2px 0 0 rgba(var(--accent-secondary-rgb), 0.25),
        0 30px 80px rgba(80, 20, 120, 0.12),
        0 0 60px rgba(var(--accent-strong-rgb), 0.06);
}
body.theme-light .modal-box::before {
    background: linear-gradient(90deg, transparent, rgba(var(--accent-secondary-rgb),0.5) 40%, rgba(var(--accent-primary-rgb),0.6) 60%, transparent);
}
body.theme-light .modal-header {
    border-bottom-color: rgba(var(--accent-strong-rgb), 0.08);
}
body.theme-light .modal-close {
    background: rgba(var(--accent-strong-rgb), 0.06);
    border-color: rgba(var(--accent-strong-rgb), 0.12);
    color: rgba(var(--accent-readable-rgb),0.5);
}
body.theme-light .form-group label {
    color: rgba(var(--accent-strong-rgb), 0.60);
}
body.theme-light .form-group input,
body.theme-light .form-group select,
body.theme-light .form-group textarea {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(var(--accent-strong-rgb), 0.14);
    color: var(--accent-readable-2);
}
body.theme-light .form-group input::placeholder,
body.theme-light .form-group textarea::placeholder {
    color: rgba(var(--accent-readable-rgb),0.28);
}
body.theme-light .form-group input:focus,
body.theme-light .form-group select:focus,
body.theme-light .form-group textarea:focus {
    border-color: rgba(var(--accent-secondary-rgb), 0.45);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--accent-secondary-rgb), 0.07), 0 0 16px rgba(var(--accent-secondary-rgb), 0.06);
}
body.theme-light .form-group select option {
    background: var(--accent-light-bg-2);
    color: var(--accent-readable-2);
}
body.theme-light .btn-cancel {
    background: rgba(var(--accent-strong-rgb), 0.05);
    border-color: rgba(var(--accent-strong-rgb), 0.14);
    color: rgba(var(--accent-readable-rgb),0.55);
}
body.theme-light .btn-cancel:hover {
    background: rgba(var(--accent-strong-rgb), 0.10);
    color: var(--accent-readable-2);
}

/* --- Modal header redesign --- */
.modal-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.modal-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--accent-secondary-rgb),0.18), rgba(var(--accent-strong-rgb),0.18));
    border: 1px solid rgba(var(--accent-secondary-rgb),0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.modal-header-icon .material-symbols-outlined {
    font-size: 20px;
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-strong));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-variation-settings: 'FILL' 1;
}
.modal-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    margin-top: 2px;
    font-weight: 400;
}

/* --- Section labels --- */
.form-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(var(--accent-primary-rgb),0.5);
    margin: 16px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--accent-primary-rgb),0.08);
}
.form-section-label:first-child { margin-top: 0; }
.form-section-label .material-symbols-outlined {
    font-size: 14px;
    color: rgba(var(--accent-primary-rgb),0.6);
    font-variation-settings: 'FILL' 1;
}

/* --- Input wrap with icon --- */
.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.input-wrap .input-icon {
    position: absolute;
    left: 12px;
    font-size: 16px;
    color: rgba(var(--accent-primary-rgb),0.4);
    pointer-events: none;
    transition: color 0.2s;
    font-variation-settings: 'FILL' 0;
    z-index: 1;
}
.input-wrap .input-icon-top {
    top: 12px;
    align-self: flex-start;
}
.input-wrap input,
.input-wrap select,
.input-wrap textarea {
    padding-left: 38px !important;
    width: 100%;
}
.input-wrap textarea {
    padding-top: 10px !important;
}
.input-wrap:focus-within .input-icon {
    color: rgba(var(--accent-secondary-rgb),0.7);
    font-variation-settings: 'FILL' 1;
}

/* Select custom arrow */
.input-wrap-select .select-arrow {
    position: absolute;
    right: 12px;
    font-size: 18px;
    color: rgba(var(--accent-primary-rgb),0.4);
    pointer-events: none;
    transition: color 0.2s;
}
.input-wrap-select:focus-within .select-arrow {
    color: rgba(var(--accent-secondary-rgb),0.6);
}

/* btn-save with icon */
.btn-save .material-symbols-outlined {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 4px;
    font-variation-settings: 'FILL' 1;
}
.btn-save {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Light theme overrides for new elements */
body.theme-light .modal-header-icon {
    background: linear-gradient(135deg, rgba(var(--accent-secondary-rgb),0.10), rgba(var(--accent-strong-rgb),0.10));
    border-color: rgba(var(--accent-secondary-rgb),0.15);
}
body.theme-light .modal-subtitle { color: rgba(var(--accent-readable-rgb),0.38); }
body.theme-light .form-section-label {
    color: rgba(var(--accent-strong-rgb),0.50);
    border-bottom-color: rgba(var(--accent-strong-rgb),0.08);
}
body.theme-light .form-section-label .material-symbols-outlined { color: rgba(var(--accent-strong-rgb),0.50); }
body.theme-light .input-wrap .input-icon { color: rgba(var(--accent-strong-rgb),0.35); }
body.theme-light .input-wrap:focus-within .input-icon { color: rgba(var(--accent-secondary-rgb),0.65); }
body.theme-light .input-wrap-select .select-arrow { color: rgba(var(--accent-strong-rgb),0.35); }

/* --- Detail Modal extras --- */
.detail-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.detail-row:last-child { border-bottom: none; }
.detail-label {
    width: 110px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding-top: 2px;
}
.detail-value {
    flex: 1;
    font-size: 14px;
    color: #fff;
    word-break: break-word;
}
.detail-status-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Toast de notificação --- */
.toast-container {
    position: fixed;
    top: 180px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.toast {
    pointer-events: all;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(20, 14, 30, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(var(--accent-primary-rgb),0.18);
    border-left: 3px solid var(--accent-primary);
    border-radius: 14px;
    padding: 14px 14px 14px 16px;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 12px 40px rgba(0,0,0,0.60), 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
    min-width: 270px;
    max-width: 360px;
    animation: toastIn 0.38s cubic-bezier(.22,.68,0,1.2) forwards;
}
.toast.fade-out {
    animation: toastOut 0.38s cubic-bezier(.4,0,1,1) forwards;
}
.toast-icon {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--accent-primary);
    font-variation-settings: 'FILL' 1;
}
.toast-msg {
    flex: 1;
    color: rgba(255,255,255,0.92);
}
.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 6px;
    opacity: 0.45;
    transition: opacity 0.15s, background 0.15s;
    display: flex;
    align-items: center;
}
.toast-close span { font-size: 16px; color: #fff; }
.toast-close:hover { opacity: 0.9; background: rgba(255,255,255,0.10); }
.toast-bar {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    width: 100%;
    background: rgba(var(--accent-primary-rgb),0.5);
    transform-origin: left;
    animation: toastBarShrink linear forwards;
}

/* Tipos */
.toast--success {
    border-left-color: #4ade80;
    background: rgba(14, 28, 20, 0.97);
    border-color: rgba(74,222,128,0.20);
}
.toast--success .toast-icon { color: #4ade80; }
.toast--success .toast-bar { background: rgba(74,222,128,0.55); }

.toast--error {
    border-left-color: #ff6080;
    background: rgba(28, 10, 16, 0.97);
    border-color: rgba(255,96,128,0.22);
}
.toast--error .toast-icon { color: #ff6080; }
.toast--error .toast-bar { background: rgba(255,96,128,0.55); }

.toast--warning {
    border-left-color: #f59e0b;
    background: rgba(28, 22, 8, 0.97);
    border-color: rgba(245,158,11,0.20);
}
.toast--warning .toast-icon { color: #f59e0b; }
.toast--warning .toast-bar { background: rgba(245,158,11,0.55); }

/* Light mode */
body.theme-light .toast {
    background: rgba(255,255,255,0.97);
    border-color: rgba(var(--accent-strong-rgb),0.18);
    border-left-color: var(--accent-strong);
    box-shadow: 0 12px 40px rgba(48,12,70,0.18), 0 2px 8px rgba(48,12,70,0.10);
    color: var(--accent-readable-2);
}
body.theme-light .toast-icon { color: var(--accent-strong); }
body.theme-light .toast-msg { color: rgba(var(--accent-readable-rgb),0.88); }
body.theme-light .toast-close span { color: rgba(var(--accent-readable-rgb),0.6); }
body.theme-light .toast-bar { background: rgba(var(--accent-strong-rgb), 0.45); }

body.theme-light .toast--success {
    background: rgba(240,255,245,0.98);
    border-color: rgba(34,197,94,0.20);
    border-left-color: #16a34a;
}
body.theme-light .toast--success .toast-icon { color: #16a34a; }
body.theme-light .toast--success .toast-bar { background: rgba(22,163,74,0.50); }

body.theme-light .toast--error {
    background: rgba(255,242,244,0.98);
    border-color: rgba(220,38,60,0.20);
    border-left-color: #dc2626;
}
body.theme-light .toast--error .toast-icon { color: #dc2626; }
body.theme-light .toast--error .toast-bar { background: rgba(220,38,60,0.50); }

body.theme-light .toast--warning {
    background: rgba(255,251,235,0.98);
    border-color: rgba(217,119,6,0.20);
    border-left-color: #d97706;
}
body.theme-light .toast--warning .toast-icon { color: #d97706; }
body.theme-light .toast--warning .toast-bar { background: rgba(217,119,6,0.50); }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(24px) scale(0.97); }
    to   { opacity: 1; transform: translateX(0)    scale(1);    }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateX(0)    scale(1);    max-height: 100px; margin-bottom: 0; }
    to   { opacity: 0; transform: translateX(28px) scale(0.95); max-height: 0;     margin-bottom: -10px; }
}
@keyframes toastBarShrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* --- Confirmação de delete --- */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.confirm-overlay.active { opacity: 1; visibility: visible; }
.confirm-box {
    background: linear-gradient(160deg, var(--accent-dark-bg-1) 0%, var(--accent-dark-bg-2) 100%);
    border: 1px solid rgba(255, 82, 82, 0.3);
    border-radius: 14px;
    padding: 28px 32px;
    text-align: center;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.25s;
}
.confirm-overlay.active .confirm-box { transform: scale(1); }
.confirm-box h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ff5252;
}
.confirm-box p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 22px;
    line-height: 1.5;
}
.confirm-actions { display: flex; gap: 12px; justify-content: center; }
.btn-confirm-del {
    background: #ff5252;
    border: none;
    color: #fff;
    padding: 9px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Argentum Sans', sans-serif;
    transition: all 0.2s;
}
.btn-confirm-del:hover { background: #ff1744; transform: translateY(-1px); }

/* --- Scroll indicator dots --- */
.page-dots {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    gap: 8px;
}
.page-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s;
    cursor: pointer;
}
.page-dot.active {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
    box-shadow: 0 0 10px rgba(var(--accent-secondary-rgb), 0.5);
    transform: scale(1.2);
}

/* --- Menu de ações do card --- */
.card-action-menu {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.card-action-menu.active {
    opacity: 1;
    visibility: visible;
}

.card-menu-box {
    background: linear-gradient(160deg, var(--accent-dark-bg-1) 0%, var(--accent-dark-bg-2) 100%);
    border: 1px solid rgba(var(--accent-secondary-rgb), 0.2);
    border-radius: 18px;
    width: 380px;
    max-width: 90vw;
    box-shadow: 0 25px 80px rgba(var(--accent-secondary-rgb), 0.15), 0 0 40px rgba(var(--accent-strong-rgb), 0.1);
    transform: translateY(15px) scale(0.97);
    transition: transform 0.25s ease;
    overflow: hidden;
}
.card-action-menu.active .card-menu-box {
    transform: translateY(0) scale(1);
}

.card-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.card-menu-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.card-menu-close {
    width: 30px;
    height: 30px;
    font-size: 13px;
}

.card-menu-options {
    padding: 12px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-menu-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-family: 'Argentum Sans', sans-serif;
}
.card-menu-btn:hover {
    background: rgba(var(--accent-secondary-rgb), 0.08);
    border-color: rgba(var(--accent-secondary-rgb), 0.2);
    transform: translateX(4px);
}

.card-menu-icon {
    font-size: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    flex-shrink: 0;
}
.card-menu-icon::after {
    content: '';
    width: 18px;
    height: 18px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
}
.card-menu-btn:hover .card-menu-icon::after { opacity: 1; }

.icon-view::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.icon-edit::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E"); }
.icon-link::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }
.icon-info::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"); }
.card-menu-btn:hover .card-menu-icon {
    background: rgba(var(--accent-secondary-rgb), 0.15);
}

.card-menu-btn-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.card-menu-btn-label {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.card-menu-btn-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
}

/* --- Customize Card Modal --- */
.modal-customize-wide {
    width: 680px;
    max-width: 95vw;
}

.customize-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.customize-preview-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.customize-label-small {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.3);
}
.customize-options-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.customize-preview {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    width: 240px;
}
.customize-preview .card-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.customize-logo-preview {
    width: 140px;
    height: 60px;
    object-fit: contain;
    display: none;
    z-index: 2;
}
.customize-logo-preview.visible {
    display: block;
}

.customize-upload-row {
    display: flex;
    gap: 8px;
}
.btn-upload {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-family: 'Argentum Sans', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-upload:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.btn-remove-logo {
    color: rgba(255, 82, 82, 0.6);
    border-color: rgba(255, 82, 82, 0.15);
}
.btn-remove-logo:hover {
    color: #ff5252;
    background: rgba(255, 82, 82, 0.08);
}

.customize-bg-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.customize-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}
.customize-radio input[type="radio"] {
    accent-color: var(--accent-secondary);
    cursor: pointer;
}
.customize-radio:hover { color: #fff; }

.color-picker {
    width: 60px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    padding: 2px;
}

/* Card with custom logo */
.client-card .card-logo {
    width: 160px;
    height: 70px;
    object-fit: contain;
    z-index: 2;
}

/* Customize mode indicator on cards */
.client-card .card-customize-btn {
    position: absolute;
    bottom: 46px;
    right: 10px;
    background: rgba(var(--accent-secondary-rgb), 0.5);
    color: #fff;
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    font-size: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(4px);
    transition: all 0.2s;
}
.client-card .card-customize-btn:hover {
    background: var(--accent-secondary);
    transform: scale(1.1);
}
.customize-mode .client-card .card-customize-btn {
    display: flex;
}

/* =============================================================
 * PÁGINA INTERNA DO CLIENTE
 * ============================================================= */
.client-page {
    position: fixed;
    inset: 0;
    z-index: 800;
    background: rgba(5, 2, 12, 0.97);
    display: flex;
    flex-direction: row;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
    overflow: hidden;
}
.client-page.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Sidebar lateral do cliente */
.client-page-bar {
    background: linear-gradient(180deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    border-radius: 0 16px 16px 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 28px 16px;
    width: 210px;
    min-width: 210px;
    height: 100%;
    flex-shrink: 0;
    box-shadow: 4px 0 20px rgba(var(--accent-strong-rgb), 0.35);
    gap: 0;
}
.client-bar-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.70);
    color: var(--accent-readable);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s;
    flex-shrink: 0;
    width: 100%;
    margin-bottom: 20px;
    box-shadow: 0 8px 18px rgba(var(--accent-readable-rgb), 0.14);
}
.client-bar-back:hover { color: var(--accent-readable); background: #ffffff; box-shadow: 0 10px 22px rgba(var(--accent-readable-rgb), 0.20); transform: translateY(-1px); }
.client-bar-back svg { stroke: currentColor; flex-shrink: 0; }

.client-bar-center {
    flex-shrink: 0;
    margin-bottom: 24px;
    padding: 0 4px;
}
.client-bar-name {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    word-break: break-word;
}

.client-bar-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.client-bar-tab {
    padding: 11px 14px;
    background: rgba(0, 0, 0, 0.25);
    border: none;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: normal;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.3;
}
.client-bar-tab svg { stroke: currentColor; flex-shrink: 0; }
.client-bar-tab:hover { background: rgba(0, 0, 0, 0.35); color: #fff; }
.client-bar-tab.active {
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

.client-bar-shortcuts {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    flex-shrink: 0;
    position: relative;
}
.client-bar-shortcuts::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.22) 100%);
    opacity: 0.9;
}
.client-bar-shortcut {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0, 0, 0, 0.22);
    color: rgba(255,255,255,0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
    box-shadow: 0 10px 22px rgba(58, 7, 62, 0.16);
}
.client-bar-shortcut svg {
    stroke: currentColor;
    flex-shrink: 0;
}
.client-bar-shortcut:hover {
    transform: translateY(-1px);
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255,255,255,0.24);
    box-shadow: 0 12px 24px rgba(58, 7, 62, 0.22);
}
.client-bar-shortcut-logout:hover {
    background: rgba(0, 0, 0, 0.36);
    border-color: rgba(255,255,255,0.28);
}

.client-bar-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
}
.client-bar-action {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.client-bar-action:hover { background: rgba(255,255,255,0.2); color: #fff; }
.client-bar-action svg { stroke: currentColor; }

/* Content */
.client-page-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 40px 48px;
    height: 100%;
}
.client-page-content:has(#tabTasks.active) {
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}
/* In columns mode, allow horizontal scroll */
/* Columns mode needs horizontal scroll — JS adds this class */
.client-page-content.kb-columns-active {
    overflow-x: auto;
}
#tabTasks.active {
    padding-top: 0;
}
.client-page-content.kb-columns-active::before {
    content: none;
    display: none;
}

.client-tab-panel {
    display: none;
}
.client-tab-panel.active {
    display: block;
}

/* Empty state */
.tab-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 30px;
    text-align: center;
    background: rgba(6, 3, 14, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 18px;
    max-width: 650px;
    margin: 50px auto;
}
.tab-empty-icon {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 16px;
}
.tab-empty-state h3 {
    font-size: 30px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 14px;
}
.tab-empty-state p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.4);
    max-width: 420px;
    line-height: 1.7;
}
.tab-empty-hint {
    margin-top: 24px;
    padding: 10px 24px;
    background: rgba(var(--accent-secondary-rgb), 0.1);
    border: 1px solid rgba(var(--accent-secondary-rgb), 0.15);
    border-radius: 20px;
    color: var(--accent-secondary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Info grid */
.client-info-grid {
    max-width: 600px;
}
.client-info-row {
    display: flex;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.client-info-row:last-child { border-bottom: none; }
.client-info-label {
    width: 130px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding-top: 2px;
}
.client-info-value {
    flex: 1;
    font-size: 14px;
    color: #fff;
    word-break: break-word;
}
.client-info-status {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.client-info-edit-btn {
    margin-top: 24px;
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    border: none;
    color: #fff;
    padding: 10px 28px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Argentum Sans', sans-serif;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(var(--accent-secondary-rgb), 0.3);
}
.client-info-edit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--accent-secondary-rgb), 0.4);
}

/* =============================================================
 * INFO CENTER — Stitch Design System
 * ============================================================= */

/* Header */
.ic-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}
.ic-header-text {}
.ic-header-sub {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--accent-secondary);
    margin-bottom: 8px;
}
.ic-header-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -1.5px;
    color: #fff;
}

.ic-header-title-accent,
.kb-main-title-accent,
.mtr-title-accent,
.acc-title-accent {
    background: linear-gradient(90deg, var(--title-grad-start) 0%, var(--title-grad-mid) 45%, var(--title-grad-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ic-edit-btn {
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--brand-grad-start) 0%, var(--brand-grad-end) 100%);
    color: #fff;
    font-family: 'Argentum Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(var(--accent-primary-rgb), 0.15);
    transition: all 0.2s;
    white-space: nowrap;
}
.ic-edit-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 0 40px rgba(var(--accent-primary-rgb), 0.25);
}
.ic-edit-btn:active { transform: scale(0.95); }

/* Bento Grid */
.ic-grid {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Each page of cards */
.ic-page {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 26px;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    opacity: 0;
    transform: translateX(80px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    min-height: auto;
    align-content: start;
    align-items: start;
}
.ic-page.active {
    position: relative;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Glass Card with stagger */
.ic-card {
    position: relative;
    background: rgba(12,10,16,0.93);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(var(--accent-primary-rgb),0.22);
    border-top: 3px solid var(--accent-secondary);
    border-radius: 20px;
    padding: 24px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(var(--accent-strong-rgb),0.12), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
    transform: translateX(60px);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.ic-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.08), rgba(var(--accent-secondary-rgb),0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.ic-card > * { position: relative; z-index: 1; }

/* Editing state — scroll interno, nunca vaza o grid */
.ic-card.editing {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 74vh;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-primary-rgb),0.22) transparent;
}
.ic-card.editing::-webkit-scrollbar { width: 3px; }
.ic-card.editing::-webkit-scrollbar-track { background: transparent; }
.ic-card.editing::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-primary-rgb),0.22);
    border-radius: 10px;
}

.ic-page.active .ic-card {
    transform: translateX(0);
    opacity: 1;
}

/* Stagger delays */
.ic-page.active .ic-card:nth-child(1) { transition-delay: 0ms; }
.ic-page.active .ic-card:nth-child(2) { transition-delay: 100ms; }
.ic-page.active .ic-card:nth-child(3) { transition-delay: 200ms; }
.ic-page.active .ic-card:nth-child(4) { transition-delay: 300ms; }
.ic-page.active .ic-card:nth-child(5) { transition-delay: 400ms; }
.ic-page.active .ic-card:nth-child(6) { transition-delay: 500ms; }

/* Info page dots */
.ic-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 24px 0;
}
.ic-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.3s;
}
.ic-dot.active {
    background: var(--accent-secondary);
    width: 24px;
    border-radius: 4px;
}
.ic-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.ic-card-header .material-symbols-outlined {
    font-size: 22px;
}
.ic-card-header h3 {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}
.ic-card-header .icon-pink { color: var(--accent-secondary); }
.ic-card-header .icon-purple { color: var(--accent-primary); }
.ic-card-header .icon-blue { color: #5f9eff; }
.ic-card-header .icon-gray { color: #ababab; }

/* Span classes */
.ic-span-8 { grid-column: span 8; }
.ic-span-4 { grid-column: span 4; }
.ic-span-6 { grid-column: span 6; }
.ic-span-3 { grid-column: span 3; }
.ic-span-12 { grid-column: span 12; }

/* Field */
.ic-field-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    margin-bottom: 6px;
}
.ic-field-value {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}
.ic-field-link {
    color: #5f9eff;
}
.ic-field-link:hover { text-decoration: underline; }

/* Contact grid interno */
.ic-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 48px;
}
.ic-contact-full {
    grid-column: 1 / -1;
    padding-top: 16px;
    border-top: 1px solid rgba(72, 72, 72, 0.15);
}

/* Badge */
.ic-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ic-badge-purple {
    background: rgba(var(--accent-primary-rgb), 0.1);
    color: var(--accent-primary);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
}
.ic-badge-green {
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.2);
}
.ic-badge-red {
    background: rgba(255, 82, 82, 0.1);
    color: #ff5252;
    border: 1px solid rgba(255, 82, 82, 0.2);
}
.ic-badge-yellow {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.2);
}

/* Financial amount */
.ic-amount {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: -1px;
}

/* Financial sub-grid */
.ic-fin-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Next payment box */
.ic-next-payment {
    margin-top: 32px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.07);
    border-radius: 8px;
    border-left: 4px solid #ff6e80;
}
.ic-next-payment .ic-field-label {
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 4px;
}
.ic-next-payment .ic-field-value {
    font-size: 18px;
    font-weight: 700;
}

/* Contract rows */
.ic-contract-rows {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ic-contract-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ic-contract-row .ic-field-label { margin-bottom: 0; }
.ic-contract-row .ic-field-value { font-size: 14px; }
.ic-renewal-label { color: var(--accent-primary); font-weight: 700; }
.ic-renewal-value { color: var(--accent-primary); font-weight: 700; }

/* PDF button */
.ic-pdf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    margin-top: 16px;
    background: rgba(210,210,220,0.10);
    border: 1px solid rgba(72, 72, 72, 0.2);
    border-radius: 8px;
    color: #fff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
}
.ic-pdf-btn:hover { background: #2c2c2c; }
.ic-pdf-btn .material-symbols-outlined { font-size: 20px; }

/* Service tags */
.ic-service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.ic-tag {
    padding: 8px 16px;
    border-radius: 8px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ic-tag-purple { background: rgba(var(--accent-primary-rgb), 0.1); border: 1px solid rgba(var(--accent-primary-rgb), 0.3); color: var(--accent-primary); }
.ic-tag-pink { background: rgba(255, 110, 128, 0.1); border: 1px solid rgba(255, 110, 128, 0.3); color: #ff6e80; }
.ic-tag-blue { background: rgba(95, 158, 255, 0.1); border: 1px solid rgba(95, 158, 255, 0.3); color: #5f9eff; }
.ic-tag-neutral { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #ababab; }

/* Service allocation bar */
.ic-allocation {
    margin-top: 40px;
    padding: 24px;
    border-radius: 12px;
    background: rgba(210,210,220,0.10);
    border-left: 2px solid rgba(var(--accent-primary-rgb), 0.4);
}
.ic-allocation-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ababab;
    margin-bottom: 10px;
}
.ic-allocation-bar {
    display: flex;
    gap: 3px;
    height: 4px;
    width: 100%;
    background: #262626;
    border-radius: 99px;
    overflow: hidden;
}
.ic-bar-purple { background: var(--accent-primary); }
.ic-bar-pink { background: #ff6e80; }
.ic-bar-blue { background: #5f9eff; }
.ic-bar-neutral { background: rgba(255,255,255,0.2); }

/* Observations */
.ic-obs-box {
    background: rgba(210,210,220,0.22);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(210,210,220,0.28);
    position: relative;
}
.ic-obs-text {
    width: 100%;
    min-height: 45px;
    background: transparent;
    border: none;
    color: #ababab;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
    outline: none;
}
.ic-obs-footer {
    margin-top: 16px;
    text-align: right;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    color: #484848;
    text-transform: uppercase;
    letter-spacing: 3px;
}
/* Tech pattern overlay */
.ic-card-pattern {
    position: relative;
    overflow: hidden;
}
.ic-card-pattern::after {
    content: 'terminal';
    font-family: 'Material Symbols Outlined';
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 120px;
    color: #fff;
    opacity: 0.03;
    pointer-events: none;
}

/* Nebula background glow */
.ic-nebula {
    position: relative;
}
.ic-nebula::before {
    content: '';
    position: fixed;
    top: 25%;
    left: -128px;
    width: 384px;
    height: 384px;
    background: rgba(var(--accent-primary-rgb), 0.06);
    filter: blur(120px);
    border-radius: 50%;
    pointer-events: none;
}
.ic-nebula::after {
    content: '';
    position: fixed;
    bottom: 25%;
    right: -128px;
    width: 384px;
    height: 384px;
    background: rgba(255, 110, 128, 0.06);
    filter: blur(120px);
    border-radius: 50%;
    pointer-events: none;
}

/* Inline edit mode */
.ic-field-input {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background: rgba(210,210,220,0.22);
    border: 1px solid rgba(210,210,220,0.28);
    border-radius: 6px;
    padding: 8px 12px;
    width: 100%;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}
.ic-field-input:focus {
    border-color: rgba(var(--accent-primary-rgb), 0.6);
    background: rgba(210,210,220,0.28);
}
.ic-field-input-amount {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #ff6e80;
    background: rgba(210,210,220,0.22);
    border: 1px solid rgba(255, 110, 128, 0.3);
    border-radius: 6px;
    padding: 8px 12px;
    width: 100%;
    outline: none;
}
.ic-field-input-amount:focus {
    border-color: rgba(255, 110, 128, 0.6);
    background: rgba(210,210,220,0.26);
}
.ic-field-select {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
    border-radius: 6px;
    padding: 6px 10px;
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.ic-field-select option {
    background: #1e1e24;
    color: var(--accent-primary);
}
.ic-save-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 20px 0;
    max-width: 1100px;
    margin: 0 auto;
}
.ic-save-btn {
    padding: 14px 40px;
    background: linear-gradient(135deg, var(--brand-grad-start) 0%, var(--brand-grad-end) 100%);
    color: #fff;
    font-family: 'Argentum Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(var(--accent-primary-rgb), 0.15);
    transition: all 0.2s;
}
.ic-save-btn:hover { transform: scale(1.02); }
.ic-cancel-btn {
    padding: 14px 32px;
    background: rgba(255, 255, 255, 0.06);
    color: #ababab;
    font-family: 'Argentum Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.ic-cancel-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* Customize card widget */
.ic-customize-content {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
.ic-customize-preview {
    flex-shrink: 0;
}
.ic-preview-card {
    width: 200px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.ic-preview-header {
    height: 110px;
    background: var(--surface-base);
    background-image: 
        radial-gradient(circle at 80% 60%, rgba(var(--accent-secondary-rgb), 0.4) 40px, transparent 60px),
        radial-gradient(ellipse at 50% 50%, var(--accent-dark-bg-1) 0%, var(--accent-dark-bg-2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ic-preview-logo {
    width: 120px;
    height: 60px;
    object-fit: contain;
}
.ic-preview-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.ic-preview-footer {
    background: #fff;
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    padding: 8px;
}
.ic-customize-options {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Customize vertical layout (for 6-col) */
.ic-customize-content-vertical {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ic-customize-content-vertical .ic-customize-preview {
    display: flex;
    justify-content: center;
    flex: 1;
    margin-bottom: 16px;
}
.ic-customize-content-vertical .ic-preview-card {
    width: 240px;
}
.ic-customize-content-vertical .ic-preview-header {
    height: 90px;
}
.ic-customize-content-vertical .ic-customize-options {
    gap: 6px;
    border-top: 1px solid rgba(255,255,255,0.04);
    padding-top: 14px;
}
.ic-customize-content-vertical .ic-customize-options .ic-field-label {
    font-size: 9px;
    margin-bottom: 3px;
}
.ic-customize-content-vertical .ic-customize-options input {
    padding: 6px 10px;
    font-size: 12px;
}

/* Compact styles for span-3 cards */
.ic-span-3 .ic-contract-row .ic-field-label { font-size: 10px; }
.ic-span-3 .ic-contract-row .ic-field-value { font-size: 12px; }
.ic-span-3 .ic-tag { font-size: 10px; padding: 6px 12px; }
.ic-span-3 .ic-allocation { margin-top: 20px; padding: 16px; }
.ic-span-3 .ic-pdf-btn { font-size: 11px; padding: 12px; letter-spacing: 1px; }
.ic-span-3 .ic-pdf-btn .material-symbols-outlined { font-size: 16px; }

/* =============================================================
 * PÁGINA MINHA CONTA
 * ============================================================= */
.account-page {
    position: fixed;
    inset: 0;
    z-index: 800;
    background: rgb(5, 2, 12);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.account-page.open {
    opacity: 1;
    visibility: visible;
}
.account-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.client-page-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s;
}
.client-page-back:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.client-page-back svg { stroke: currentColor; }
.account-page-title {
    display: none;
}
.account-page-content {
    flex: 1;
    overflow-y: auto;
    padding: 40px 60px;
}

/* Account grid */
.acc-header-text {
    margin-bottom: 40px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.acc-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -1.5px;
    margin-bottom: 8px;
}
.acc-subtitle {
    font-size: 14px;
    color: #ababab;
}

.acc-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 26px;
    max-width: 1220px;
    margin: 0 auto;
    padding-bottom: 60px;
}

/* Account cards */
.acc-card {
    position: relative;
    background: rgba(12,10,16,0.93);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(var(--accent-primary-rgb),0.22);
    border-top: 3px solid var(--accent-secondary);
    border-radius: 20px;
    padding: 24px 28px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(var(--accent-strong-rgb),0.12), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
}
.acc-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.08), rgba(var(--accent-secondary-rgb),0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.acc-card::after { display: none; }

.acc-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--accent-primary-rgb), 0.55), rgba(255, 126, 179, 0.18), transparent);
    pointer-events: none;
}
.acc-span-7 { grid-column: span 7; }
.acc-span-5 { grid-column: span 5; }
.acc-span-6 { grid-column: span 6; }
.acc-span-12 { grid-column: span 12; }

.acc-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}
.acc-card > * { position: relative; z-index: 1; }
.acc-card-header .material-symbols-outlined {
    font-size: 28px;
}
.acc-icon-gradient {
    background: linear-gradient(135deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 10px rgba(var(--accent-primary-rgb), 0.12));
}
.acc-card-header h3 {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

/* Profile section */
.acc-profile-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.acc-avatar-area {
    flex-shrink: 0;
    text-align: center;
}
.acc-avatar {
    width: 110px;
    height: 110px;
    border-radius: 12px;
    background: #191919;
    border: 2px solid rgba(var(--accent-primary-rgb), 0.2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: var(--accent-primary);
    cursor: pointer;
    transition: border-color 0.2s;
}
.acc-avatar:hover { border-color: var(--accent-primary); }
.acc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.acc-avatar-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 8px;
}
.acc-profile-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Account input */
.acc-field-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #757575;
    margin-bottom: 6px;
}
.acc-input {
    width: 100%;
    background: #1f1f1f;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 8px;
    padding: 12px 14px;
    color: #fff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 15px;
    outline: none;
    transition: all 0.2s;
}
.acc-input:focus {
    background: #262626;
    border-bottom-color: var(--accent-primary);
}

/* Plan card */
.acc-plan-card { border-left: none; }
.acc-plan-box {
    background: #131313;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}
.acc-plan-tier {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.acc-plan-price {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}
.acc-plan-price span {
    font-size: 14px;
    color: #757575;
}
.acc-plan-sub {
    font-size: 13px;
    color: #ababab;
    margin-top: 2px;
}
.acc-plan-bar {
    height: 4px;
    width: 100%;
    background: #191919;
    border-radius: 99px;
    overflow: hidden;
    margin: 16px 0;
}
.acc-plan-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    border-radius: 99px;
    box-shadow: 0 0 10px rgba(255, 126, 179, 0.18);
}
.acc-plan-cycle {
    display: flex;
    justify-content: space-between;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.acc-plan-btn {
    width: 100%;
    padding: 14px;
    background: rgba(38, 38, 38, 0.4);
    border: 1px solid rgba(72, 72, 72, 0.2);
    border-radius: 12px;
    color: #fff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 10px;
}
.acc-plan-btn:hover { background: rgba(44, 44, 44, 0.6); }

/* Security */
.acc-security-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #5f9eff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-top: 12px;
    transition: color 0.2s;
}
.acc-security-btn:hover { color: #84b1ff; }
.acc-security-btn .material-symbols-outlined { font-size: 16px; }

/* Sessions */
.acc-sessions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.acc-end-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 105, 138, 0.32);
    background: linear-gradient(180deg, rgba(31, 18, 31, 0.92) 0%, rgba(20, 14, 25, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(255,255,255,0.02);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ff7a95;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.acc-end-all:hover {
    color: #ffd8df;
    border-color: rgba(255, 105, 138, 0.5);
    box-shadow: 0 8px 18px rgba(215, 51, 87, 0.14), inset 0 1px 0 rgba(255,255,255,0.05);
    transform: translateY(-1px);
}
.acc-session {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #131313;
    border-radius: 12px;
    margin-bottom: 10px;
    transition: background 0.2s;
}
.acc-session:hover { background: #191919; }
.acc-session-info {
    display: flex;
    align-items: center;
    gap: 14px;
}
.acc-session-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #1f1f1f;
    display: flex;
    align-items: center;
    justify-content: center;
}
.acc-session-icon .material-symbols-outlined { color: #757575; }
.acc-session-name {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.acc-session-location {
    font-size: 11px;
    color: #757575;
    display: flex;
    align-items: center;
    gap: 4px;
}
.acc-session-location .material-symbols-outlined { font-size: 12px; }
.acc-session-badge {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(95, 158, 255, 0.1);
    color: #5f9eff;
}
.acc-session-close {
    background: none;
    border: none;
    color: #484848;
    cursor: pointer;
    transition: color 0.2s;
    display: flex;
}
.acc-session-close:hover { color: #ff6e84; }
.acc-session-close .material-symbols-outlined { font-size: 20px; }

/* Save button */
.acc-save-btn {
    background: linear-gradient(135deg, var(--brand-grad-start) 0%, var(--brand-grad-end) 100%);
    color: #fff;
    font-family: 'Argentum Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border: none;
    border-radius: 12px;
    padding: 12px 32px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.15);
    transition: all 0.2s;
}
.acc-save-btn:hover {
    box-shadow: 0 0 30px rgba(var(--accent-primary-rgb), 0.3);
}
.acc-save-btn:active { transform: scale(0.95); }

/* Toggle switch */
.cfg-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: #262626;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.cfg-toggle.active {
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    box-shadow: 0 0 18px rgba(var(--accent-primary-rgb),0.22);
}
.cfg-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #ababab;
    border-radius: 50%;
    transition: all 0.2s;
}
.cfg-toggle.active::after {
    transform: translateX(20px);
    background: #fff;
}

/* Select styling for settings */
.cfg-select {
    width: 100%;
    background: #1f1f1f;
    border: none;
    border-radius: 8px;
    padding: 12px 14px;
    color: #fff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 15px;
    outline: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ababab' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 20px;
    transition: background-color 0.2s;
}
.cfg-select:focus { background-color: #262626; }
.cfg-select option { background: #1e1e24; color: var(--accent-primary); }

/* Notification row */
.cfg-notif-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}
.cfg-notif-text h4 {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 2px;
}
.cfg-notif-text p {
    font-size: 12px;
    color: #ababab;
}

/* Theme toggle bar */
.cfg-theme-bar {
    display: flex;
    padding: 4px;
    background: #131313;
    border-radius: 12px;
    border: 1px solid rgba(72, 72, 72, 0.1);
}
.cfg-theme-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    border: none;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    color: #ababab;
}
.cfg-theme-btn.active {
    background: #262626;
    color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.cfg-theme-btn .material-symbols-outlined { font-size: 16px; }

/* Auto mode hint */
.cfg-auto-hint {
    margin-top: 28px;
    padding: 16px;
    border-radius: 8px;
    border: 1px dashed rgba(72, 72, 72, 0.3);
    display: flex;
    align-items: center;
    gap: 14px;
}
.cfg-auto-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.15), rgba(255, 110, 128, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cfg-auto-icon .material-symbols-outlined { color: var(--accent-primary); }
.cfg-auto-hint p {
    font-size: 12px;
    color: #ababab;
    line-height: 1.6;
}

/* Footer actions */
.cfg-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid rgba(72, 72, 72, 0.1);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.cfg-discard-btn {
    background: none;
    border: none;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ababab;
    cursor: pointer;
    transition: color 0.2s;
}
.cfg-discard-btn:hover { color: #fff; }

/* Accent color dots */
.cfg-accent-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
    box-sizing: border-box;
}
.cfg-accent-dot:hover { transform: scale(1.1); }
.cfg-accent-dot.active {
    border-color: #fff;
    box-shadow: 0 0 16px rgba(255,255,255,0.2);
}

/* Integration rows */
.cfg-integration-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #131313;
    border-radius: 10px;
    transition: background 0.2s;
}
.cfg-integration-row:hover { background: #191919; }
.cfg-integration-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cfg-integration-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cfg-integration-icon .material-symbols-outlined { font-size: 20px; }
.cfg-integration-name {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.cfg-integration-status {
    font-size: 11px;
}
.cfg-status-off { color: #757575; }
.cfg-status-on { color: #4ade80; }
.cfg-connect-btn {
    padding: 6px 16px;
    background: rgba(var(--accent-primary-rgb), 0.1);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
    border-radius: 8px;
    color: var(--accent-primary);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.cfg-connect-btn:hover {
    background: rgba(var(--accent-primary-rgb), 0.2);
}

/* Team members */
.cfg-team-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #131313;
    border-radius: 10px;
}
.cfg-team-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cfg-team-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.cfg-team-name {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.cfg-team-email {
    font-size: 11px;
    color: #757575;
}
.cfg-team-role {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 6px;
}
.cfg-role-admin {
    background: rgba(var(--accent-primary-rgb), 0.1);
    color: var(--accent-primary);
}
.cfg-role-editor {
    background: rgba(95, 158, 255, 0.1);
    color: #5f9eff;
}
.cfg-role-viewer {
    background: rgba(171, 171, 171, 0.1);
    color: #ababab;
}

/* Acessos e Logins grid */
.ic-access-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.ic-access-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(210,210,220,0.18);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s;
}
.ic-access-item:hover {
    border-color: rgba(var(--accent-primary-rgb), 0.35);
    background: rgba(210,210,220,0.16);
}
.ic-access-full {
    grid-column: 1 / -1;
}
.ic-access-name {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ababab;
}
.ic-access-status {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}
.ic-access-yes {
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.2);
}
.ic-access-pending {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.2);
}
.ic-access-off {
    color: #484848;
    font-style: italic;
    font-weight: 400;
}

/* Raio X rows */
.ic-raio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.ic-raio-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ic-raio-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--accent-primary);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.15);
}
.ic-raio-section-title .material-symbols-outlined {
    color: var(--accent-primary);
    opacity: 0.7;
}
.ic-raio-field {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ic-raio-field:last-child { border-bottom: none; }
.ic-raio-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ic-raio-pair .ic-raio-field { border-bottom: none; padding-bottom: 6px; }
.ic-raio-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 800px) {
    .ic-raio-grid { grid-template-columns: 1fr; gap: 16px; }
    .ic-raio-bottom { grid-template-columns: 1fr; }
    .ic-raio-pair { grid-template-columns: 1fr; gap: 8px; }
}
.ic-raio-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ic-raio-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ic-raio-row:last-child { border-bottom: none; }
.ic-raio-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 4px;
}
.ic-raio-value {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(210,210,220,0.08);
    border-radius: 6px;
    padding: 10px 12px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s;
}
.ic-raio-value:focus {
    border-color: rgba(var(--accent-primary-rgb), 0.5);
    background: rgba(255,255,255,0.10);
}
.ic-raio-value::placeholder {
    color: rgba(255,255,255,0.30);
    font-weight: 400;
}
.ic-raio-highlight-pink { color: #ff6e80; }
.ic-raio-highlight-pink::placeholder { color: rgba(255, 110, 128, 0.30); }
.ic-raio-highlight-blue { color: #5f9eff; }
.ic-raio-highlight-blue::placeholder { color: rgba(95, 158, 255, 0.30); }

/* Left stack - two cards stacked vertically in one grid cell */
.ic-left-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ic-left-stack .ic-card {
    transform: none;
    opacity: 1;
    position: relative;
}
.ic-page.active .ic-left-stack .ic-card {
    transform: none;
    opacity: 1;
}

/* Tall right card stretches full height */
.ic-card-tall-right {
    align-self: stretch;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.ic-card-tall-right .ic-card-header {
    margin-bottom: 24px;
    flex-shrink: 0;
}
.ic-card-tall-right .ic-card-header h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
}
.ic-card-tall-right .ic-access-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex: 1;
    align-content: space-evenly;
    width: 100%;
}
.ic-card-tall-right .ic-access-item {
    padding: 14px 18px;
    justify-content: center;
}
.ic-card-tall-right .ic-access-name {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-align: center;
}
.ic-card-tall-right .ic-access-status {
    display: none;
}
.ic-card-tall-right .ic-access-full {
    grid-column: 1 / -1;
}

/* span-5 and span-7 */
.ic-span-5 { grid-column: span 5; }
.ic-span-7 { grid-column: span 7; }

/* Access item filled state */
.ic-access-item.filled {
    background: linear-gradient(135deg, rgba(var(--accent-strong-rgb), 0.3), rgba(var(--accent-secondary-rgb), 0.25));
    border-color: rgba(var(--accent-secondary-rgb), 0.3);
    box-shadow: 0 0 15px rgba(var(--accent-secondary-rgb), 0.1), inset 0 0 15px rgba(var(--accent-secondary-rgb), 0.05);
}
.ic-access-item.filled .ic-access-name {
    color: #fff;
}

/* Access login modal */
.ic-login-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s;
}
.ic-login-modal.open {
    opacity: 1;
    visibility: visible;
}
.ic-login-box {
    position: relative;
    background: rgba(12,10,16,0.93);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(var(--accent-primary-rgb),0.22);
    border-top: 3px solid var(--accent-secondary);
    border-radius: 20px;
    padding: 28px 32px;
    width: 400px;
    max-width: 92vw;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(var(--accent-strong-rgb),0.12), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
    transform: translateY(20px);
    transition: transform 0.25s;
}
.ic-login-box::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.08), rgba(var(--accent-secondary-rgb),0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.ic-login-box > * { position: relative; z-index: 1; }
.ic-login-modal.open .ic-login-box {
    transform: translateY(0);
}
.ic-login-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 22px;
}
.ic-login-field {
    margin-bottom: 16px;
}
.ic-login-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(var(--accent-primary-rgb),0.7);
    margin-bottom: 6px;
}
.ic-login-input {
    width: 100%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(210,210,220,0.18);
    border-radius: 8px;
    padding: 11px 14px;
    color: #ffffff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}
.ic-login-input::placeholder { color: rgba(255,255,255,0.80); }
.ic-login-input:focus {
    border-color: rgba(var(--accent-secondary-rgb), 0.5);
    background: rgba(255,255,255,0.10);
}

.ic-password-wrap {
    position: relative;
    width: 100%;
}
.ic-password-wrap .ic-password-input {
    padding-right: 108px;
}
.ic-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 86px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    z-index: 6;
    pointer-events: auto;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.ic-password-toggle:hover,
.ic-password-toggle.is-visible {
    background: rgba(var(--accent-secondary-rgb),0.14);
    color: #fff;
}
.ic-password-toggle .material-symbols-outlined {
    font-size: 18px;
}
.ic-password-toggle-text {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .02em;
}
.ic-login-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.ic-login-save {
    flex: 1;
    padding: 12px;
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    border: none;
    border-radius: 10px;
    color: #fff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.ic-login-save:hover { box-shadow: 0 0 20px rgba(var(--accent-secondary-rgb), 0.3); }
.ic-login-cancel {
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #ababab;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.ic-login-cancel:hover { color: #fff; background: rgba(255,255,255,0.1); }
.ic-login-clear {
    padding: 10px 14px;
    background: none;
    border: 1px solid rgba(255, 82, 82, 0.2);
    border-radius: 10px;
    color: #ff5252;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.ic-login-clear:hover { background: rgba(255, 82, 82, 0.1); }

/* Gradient labels for card customization */
.ic-label-gradient {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Pencil edit icon on cards */
.ic-card-edit {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.25s;
    z-index: 2;
}
.ic-card-edit:hover {
    color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.08);
}
.ic-card-edit .material-symbols-outlined {
    font-size: 16px;
}
.ic-card { position: relative; }

/* Color preset dots */
.ic-color-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    box-sizing: border-box;
}
.ic-color-dot:hover {
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}
.ic-color-dot.selected {
    border-color: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Remove browser chrome from color input */
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 6px; }

/* Remove color input border */
input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    background: transparent !important;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}
input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 6px;
}

/* =============================================================
 * KANBAN — QUADRO DE TAREFAS v3 (visual v1 + features v2)
 * ============================================================= */
.kb-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 40px 24px;
    box-sizing: border-box;
}
/* Columns mode: wrapper centered, fixed width for 4 cols */
.kb-columns-wrapper {
    max-width: 1410px; /* 4×330px + 3×14px gap + 2×24px padding */
    margin: 0 auto;
    padding: 20px 24px 24px;
    box-sizing: border-box;
    width: 100%;
}

/* Header */
.kb-top-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    gap: 24px;
}
.kb-top-left { max-width: 480px; }
.kb-main-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.1;
}
.kb-main-sub {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    color: #ffffff;
    font-weight: 400;
    margin: 0;
}
.kb-top-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.kb-deploy-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-primary);
}
.kb-deploy-bar {
    width: 180px; height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
}
.kb-deploy-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), #ffb2b8);
    border-radius: 10px;
    transition: width 0.6s ease;
}

/* Swimlanes — vertical stack */
.kb-lanes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Each lane — glass container */
.kb-lane {
    background: rgba(12,10,16,0.93);
    backdrop-filter: blur(40px);
    border: 1px solid var(--lane-border, rgba(var(--accent-primary-rgb),0.22));
    border-top: 3px solid var(--lane-accent, var(--accent-primary));
    border-radius: 20px;
    padding: 7px 16px;
    position: relative;
    min-height: 100px;
    box-shadow: 0 0 40px rgba(var(--accent-strong-rgb),0.12), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
    overflow: hidden;
}
.kb-lane::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.08), rgba(var(--accent-secondary-rgb),0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.kb-lane > * { position: relative; z-index: 1; }
.kb-lane::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, transparent, var(--lane-accent, var(--accent-primary)), transparent);
    opacity: 0.5;
    filter: saturate(2.1) brightness(1.04);
    border-radius: 16px 0 0 16px;
}
.kb-lane-late {
    border-color: rgba(255,110,128,0.15);
    border-top: 3px solid var(--lane-accent, #ff6e80) !important;
}
.kb-lane-andamento {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.06), rgba(255, 150, 180, 0.04));
    border-color: rgba(var(--accent-primary-rgb), 0.08);
    border-top: 3px solid var(--lane-accent, var(--accent-primary)) !important;
}
.kb-lane-andamento::before { opacity: 0.58; }
.kb-lane-done { opacity: 1; transition: opacity 0.3s; }
.kb-lane-done:hover { opacity: 1; }

/* Empty lane — collapsed */
.kb-lane-empty {
    min-height: unset;
    padding: 18px 30px;
}
.kb-lane-empty .kb-lane-header {
    margin-bottom: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.kb-lane-empty:has(.kb-card-add) .kb-lane-header {
    margin-bottom: 10px;
}
.kb-lane-empty .kb-cards-scroll { display: none; }
.kb-lane-empty .kb-cards-scroll:has(.kb-card-add) { display: flex; }
.kb-lane-empty::before { opacity: 0.15; }

/* Gradient add button — only visible when collapsed */
.kb-lane-add-gradient {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(var(--accent-primary-rgb),0.2);
    transition: all 0.2s;
    flex-shrink: 0;
}
.kb-lane-add-gradient:hover {
    box-shadow: 0 0 20px rgba(var(--accent-primary-rgb),0.4);
    filter: brightness(1.1);
}
.kb-lane-add-gradient .material-symbols-outlined { font-size: 16px; }
.kb-lane-empty .kb-lane-add-gradient { display: flex; }
.kb-lane-add-inline {
    display: inline-flex;
    margin-left: 12px;
}


/* Lane header */
.kb-lane-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.kb-lane-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.kb-lane-icon {
    width: 28px; height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    flex-shrink: 0;
    background: var(--lane-bg);
    border-color: var(--lane-border);
}
.kb-lane-icon .material-symbols-outlined { font-size: 18px; }
.kb-lane-info {
    flex: 1 1 auto;
    min-width: 0;
}
.kb-lane-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}
.kb-lane-sub {
    display: block;
    width: max-content;
    max-width: 100%;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--lane-accent, rgba(255,255,255,0.3));
    opacity: 0.6;
    margin-top: 5px;
    white-space: normal;
}
.kb-lane-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.kb-lane-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
.kb-lane-drag-handle {
    color: rgba(255, 255, 255, 0.3);
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: color 0.2s;
}
.kb-lane-drag-handle:hover {
    color: var(--accent-primary);
}
.kb-lane-drag-handle:active {
    cursor: grabbing;
}
.kb-lane-drag-handle span {
    font-size: 22px;
}
.kb-lane {
    cursor: default;
    transition: transform 0.2s, opacity 0.2s, background-color 0.2s, filter 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.kb-lane-dragging {
    opacity: 0.42;
    transform: scale(0.985);
    filter: saturate(0.88) brightness(0.9);
}
.kb-lane-dragover {
    background-color: rgba(var(--accent-primary-rgb), 0.05) !important;
    border-color: rgba(var(--accent-primary-rgb), 0.18) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--accent-primary-rgb),0.12), 0 0 0 1px rgba(255,255,255,0.02) !important;
}
.kb-card {
    cursor: default;
    transition: transform 0.2s, opacity 0.2s;
}
.kb-card-dragging {
    opacity: 0.5;
    transform: scale(0.95);
}
.kb-card-top-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.kb-card-drag-handle {
    position: static;
    color: rgba(255,255,255,0.75);
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.16);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    z-index: 2;
    flex-shrink: 0;
}
.kb-card-drag-handle:hover {
    color: #fff;
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.32);
}
.kb-card-drag-handle:active { cursor: grabbing; }
.kb-card-drag-handle .material-symbols-outlined { font-size: 15px; }
.kb-card-ghost {
    border-radius: 10px;
    border: 2px dashed rgba(var(--accent-primary-rgb),0.6);
    background: rgba(var(--accent-primary-rgb),0.06);
    box-shadow: 0 0 12px rgba(var(--accent-primary-rgb),0.15);
    min-width: 210px;
    min-height: 160px;
    pointer-events: none;
    flex-shrink: 0;
    transition: none;
    animation: ghostPulse 0.6s ease-in-out infinite alternate;
}
@keyframes ghostPulse {
    from { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); }
    to   { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.09); }
}
.kb-lane-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(var(--accent-primary-rgb),0.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.kb-lane-toggle-btn {
    min-width: 72px;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(255,255,255,0.62);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.kb-lane-toggle-btn:hover {
    color: rgba(255,255,255,0.9);
}
.kb-lane-toggle-btn.is-active {
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(var(--accent-secondary-rgb), 0.22), 0 0 16px rgba(var(--accent-primary-rgb),0.18);
}
.kb-lane-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.kb-lane-count {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.2);
}
.kb-lane-add {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.kb-lane-add:hover {
    background: rgba(var(--accent-primary-rgb),0.1);
    border-color: rgba(var(--accent-primary-rgb),0.3);
    color: var(--accent-primary);
}
.kb-lane-add .material-symbols-outlined { font-size: 18px; }

/* Cards — horizontal scroll */
.kb-cards-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 12px 6px 8px 4px;
}
.kb-cards-scroll::-webkit-scrollbar { height: 4px; }
.kb-cards-scroll::-webkit-scrollbar-track { background: transparent; }
.kb-cards-scroll::-webkit-scrollbar-thumb { background: rgba(var(--accent-primary-rgb),0.15); border-radius: 10px; }

/* Fade on the lane itself — right edge in lanes mode, bottom in columns */
.kb-lane {
    position: relative;
}

.kb-filter-empty {
    min-height: 180px;
    min-width: 220px;
    border-radius: 12px;
    border: 1px dashed rgba(var(--accent-primary-rgb),0.12);
    background: rgba(255,255,255,0.015);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    color: #ffffff;
    text-align: center;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
}
.kb-filter-empty .material-symbols-outlined {
    font-size: 22px;
    color: rgba(var(--accent-primary-rgb),0.65);
}
.kb-filter-empty p { margin: 0; }

/* Task card */
.kb-card {
    min-width: 210px;
    max-width: 250px;
    border-radius: 14px;
    background: rgba(12,10,16,0.93);
    border: 1px solid rgba(var(--accent-primary-rgb),0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 20px rgba(var(--accent-strong-rgb),0.08);
}
.kb-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--accent-primary-rgb),0.35);
    box-shadow: 0 10px 30px -10px rgba(var(--accent-primary-rgb),0.15);
}
.kb-card-done {
    opacity: 1;
    filter: none;
}
.kb-card-done:hover { opacity: 1; filter: none; }
.kb-card-late { border-color: rgba(255,110,128,0.2); min-width: 230px; }
.kb-card-late:hover { border-color: rgba(255,110,128,0.5); box-shadow: 0 10px 30px -10px rgba(255,110,128,0.15); }

/* Card header gradient */
.kb-card-top {
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    padding: 7px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.kb-card-top-done { background: linear-gradient(90deg, #0f8f56, #24cf78); }
.kb-card-top-late { background: linear-gradient(90deg, #a81a1a, #ed1c4e); }
.kb-card-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.kb-card-top-done .kb-card-title { color: #ffffff; }

/* Card body */
.kb-card-body {
    padding: 9px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Tag */
.kb-tag {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid;
    width: fit-content;
}

.kb-label-chip {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 178, 184, 0.22);
    background: rgba(255, 178, 184, 0.08);
    color: #ffb2b8;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.kb-label-chip-history {
    font-size: 10px;
    max-width: 140px;
}

.kb-label-chip-detail {
    font-size: 10px;
    max-width: 100%;
}

/* Due date */
.kb-due {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 4px;
}
.kb-due .material-symbols-outlined { font-size: 14px; }
.kb-due-late { color: #ff6e80; font-weight: 600; }

/* Objective */
.kb-obj {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    color: rgba(var(--accent-primary-rgb),0.5);
    display: flex;
    align-items: center;
    gap: 5px;
}
.kb-obj .material-symbols-outlined { font-size: 14px; }

/* Description */
.kb-desc {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255,255,255,0.5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Reference image */
.kb-ref-thumb {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.06);
}

/* Checklist */
.kb-checklist { display: flex; flex-direction: column; gap: 5px; }
.kb-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.03);
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,0.80);
}
.kb-check-item:hover { background: rgba(255,255,255,0.06); }
.kb-check-item input[type="checkbox"] {
    width: 15px; height: 15px;
    border-radius: 3px;
    accent-color: var(--accent-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.kb-check-done { text-decoration: line-through; color: rgba(255,255,255,0.2); }
.kb-cl-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    color: rgba(255,255,255,0.25);
}
.kb-cl-track { flex: 1; height: 3px; background: rgba(255,255,255,0.06); border-radius: 10px; overflow: hidden; }
.kb-cl-fill { height: 100%; background: var(--accent-primary); border-radius: 10px; transition: width 0.3s; box-shadow: 0 0 6px rgba(var(--accent-primary-rgb),0.5); }

/* Card footer */
.kb-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.kb-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(var(--accent-primary-rgb),0.12);
    border: 1px solid rgba(var(--accent-primary-rgb),0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
}

.kb-avatar-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 10px;
    height: 24px;
    margin-left: -2px;
    margin-right: 8px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255,255,255,0.7);
}

/* Action buttons */
.kb-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex-shrink: 0; margin-left: 8px; }
.kb-card-late .kb-card-body { gap: 10px; padding: 12px 14px; }
.kb-card-late .kb-card-foot {
    padding-top: 10px;
    margin-top: auto;
    gap: 6px;
    align-items: center;
}
.kb-card-late .kb-card-foot > div:first-child {
    display: flex;
    align-items: center;
    gap: 4px !important;
    min-width: 0;
    flex-shrink: 1;
}
.kb-card-late .kb-actions {
    gap: 4px;
    flex-wrap: nowrap;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}
.kb-card-late .kb-avatar {
    width: 22px;
    height: 22px;
    font-size: 8px;
}
.kb-card-late .kb-avatar-plus {
    min-width: 8px;
    height: 22px;
    margin-left: -1px;
    margin-right: 4px;
    font-size: 13px;
}
.kb-card-late .kb-btn {
    font-size: 9px;
    letter-spacing: 0.8px;
    padding: 5px 10px;
    gap: 4px;
}
.kb-card-late .kb-btn .material-symbols-outlined {
    font-size: 13px;
}
.kb-card-late .kb-btn-restart {
    padding-inline: 9px;
}
.kb-card-late .kb-btn-done {
    padding-inline: 9px;
}
.kb-card-late .kb-btn-del {
    padding: 2px;
}
.kb-card-late .kb-btn-del .material-symbols-outlined {
    font-size: 15px;
}
.kb-btn {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 14px;
    border-radius: 6px;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.kb-btn .material-symbols-outlined { font-size: 14px; }
.kb-btn-start { background: rgba(var(--accent-primary-rgb),0.1); color: var(--accent-primary); border-color: rgba(var(--accent-primary-rgb),0.2); }
.kb-btn-start:hover { background: rgba(var(--accent-primary-rgb),0.2); }
.kb-btn-done { background: rgba(52, 184, 122, 0.10); color: #34b87a; border-color: rgba(52, 184, 122, 0.22); }
.kb-btn-done:hover { background: rgba(52, 184, 122, 0.18); }
.kb-btn-restart { background: rgba(255,178,184,0.08); color: #ffb2b8; border-color: rgba(255,178,184,0.2); }
.kb-btn-restart:hover { background: rgba(255,178,184,0.18); }
.kb-btn-del {
    background: none; border: none; color: rgba(255,255,255,0.12);
    padding: 4px; border-radius: 4px; cursor: pointer; transition: all 0.15s;
}
.kb-btn-del:hover { color: #ff6e80; background: rgba(255,110,128,0.08); }
.kb-btn-del .material-symbols-outlined { font-size: 16px; }

/* Add card */
.kb-card-add {
    min-width: 240px;
    border-radius: 12px;
    border: 1.5px dashed rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    flex-shrink: 0;
    background: rgba(255,255,255,0.015);
    position: relative;
    overflow: hidden;
}
.kb-card-add::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.06), rgba(var(--accent-secondary-rgb),0.04));
    opacity: 0;
    transition: opacity 0.25s;
}
.kb-card-add:hover::before { opacity: 1; }
.kb-card-add:hover {
    border-color: rgba(255,255,255,0.28);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}
.kb-card-add-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
}
.kb-card-add:hover .kb-card-add-icon {
    background: rgba(255,255,255,0.14);
    border-color: #ffffff;
    box-shadow: 0 0 12px rgba(255,255,255,0.1);
}
.kb-card-add-icon .material-symbols-outlined {
    font-size: 20px;
    color: rgba(255,255,255,0.55);
    transition: color 0.2s;
}
.kb-card-add:hover .kb-card-add-icon .material-symbols-outlined { color: #fff; }
.kb-card-add-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.25);
    transition: color 0.2s;
}
.kb-card-add:hover .kb-card-add-label { color: rgba(255,255,255,0.75); }

/* Summary band */
.kb-summary-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 88px;
    margin: 10px 0 18px;
    padding: 14px 24px;
    border-radius: 18px;
    border: 1px solid rgba(var(--accent-primary-rgb),0.22);
    background: rgba(12,10,16,0.93);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow: 0 0 40px rgba(var(--accent-strong-rgb),0.12), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
    position: relative;
    overflow: hidden;
}
.kb-summary-bar::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.08), rgba(var(--accent-secondary-rgb),0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.kb-summary-bar > * {
    position: relative;
    z-index: 1;
}
/* In columns mode the wrapper is narrower — summary bar fills it naturally */
.kb-columns-wrapper .kb-summary-bar {
    margin: 10px 0 14px;
}
.kb-summary-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding-top: 0;
    padding-bottom: 0;
    justify-self: start;
}
.kb-stats-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    justify-self: center;
}
.kb-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(96px, 120px));
    justify-content: center;
    gap: 8px;
    margin: 0;
}
.kb-stats-top {
    position: relative;
    z-index: 2;
}
.kb-summary-spacer {
    flex: 1;
}
.kb-stat {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.08);
    border-radius: 10px;
    padding: 7px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    min-height: 52px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.kb-stat:hover {
    border-color: rgba(var(--accent-primary-rgb),0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    background: rgba(255, 255, 255, 0.03);
}
.kb-stat:focus-visible {
    outline: 2px solid rgba(var(--accent-primary-rgb),0.45);
    outline-offset: 2px;
}
.kb-stat-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.7);
}
.kb-stat-value {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 18px;
    font-weight: 800;
    text-shadow: 0 0 16px currentColor;
}
.kb-summary-progress {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.kb-deploy-pct {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    white-space: nowrap;
    color: var(--accent-primary);
}
.kb-summary-progress .kb-deploy-label {
    text-align: left;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    white-space: nowrap;
    color: var(--accent-primary);
}
.kb-summary-progress .kb-deploy-bar {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
}
.kb-summary-progress .kb-deploy-fill {
    box-shadow: 0 0 14px rgba(var(--accent-primary-rgb), 0.35);
}
.kb-lane {
    scroll-margin-top: 120px;
}

/* ============================================
 * TASK MODAL — STITCH-INSPIRED GLASS PANEL
 * ============================================ */
.tm-panel {
    background: rgba(53, 53, 52, 0.45);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.08);
    border-radius: 16px;
    width: 95vw;
    max-width: 960px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 100px rgba(0,0,0,0.7);
    overflow: hidden;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.tm-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.2), rgba(255,178,184,0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.ic-login-modal.open .tm-panel {
    transform: translateY(0) scale(1);
}

/* Header */
.tm-header {
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
    background: rgba(12,10,16,0.93);
    border-bottom: 1px solid rgba(var(--accent-primary-rgb),0.22);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow: 0 0 40px rgba(var(--accent-strong-rgb),0.12), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
    flex-shrink: 0;
}
.tm-header::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.08), rgba(var(--accent-secondary-rgb),0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.tm-header > * {
    position: relative;
    z-index: 1;
}
.tm-breadcrumb {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(var(--accent-primary-rgb),0.5);
    display: block;
    margin-bottom: 6px;
}
.tm-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
}
.tm-header-right { display: flex; align-items: center; gap: 12px; }
.tm-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: none;
    color: rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.tm-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.tm-close .material-symbols-outlined { font-size: 16px; }

/* Body */
.tm-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
}
.tm-body::-webkit-scrollbar { width: 4px; }
.tm-body::-webkit-scrollbar-thumb { background: rgba(var(--accent-primary-rgb),0.12); border-radius: 10px; }

/* Grid */
.tm-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 32px;
}
@media (max-width: 768px) {
    .kb-wrapper {
        padding: 4px 16px 24px;
        width: 100%;
    }

    .tm-grid { grid-template-columns: 1fr; }
}

/* Section & Label */
.tm-section { margin-bottom: 20px; }
.tm-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.tm-label-action {
    color: var(--accent-primary);
    cursor: pointer;
    font-size: 10px;
    letter-spacing: 1px;
    transition: color 0.15s;
}
.tm-label-action:hover { color: #ffb2b8; }

/* Inputs */
.tm-input {
    width: 100%;
    background: rgba(42, 42, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 11px 14px;
    color: #fff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.tm-input:focus { border-color: rgba(var(--accent-primary-rgb),0.35); }
.tm-input::placeholder { color: rgba(255,255,255,0.15); }
.tm-input-big { font-size: 15px; font-weight: 600; }
.tm-textarea {
    resize: vertical;
    min-height: 80px;
    padding: 12px 14px;
    background: rgba(28,27,27,0.6);
    line-height: 1.5;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
}
.tm-textarea:focus { border-color: rgba(var(--accent-primary-rgb),0.3); }
select.tm-input {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    background-color: rgba(28, 27, 27, 0.6);
    color: #ffffff;
}
select.tm-input option {
    background: #1e1e24;
    color: var(--accent-primary);
    font-weight: 500;
    padding: 8px 12px;
}
select.tm-input option:checked {
    background: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0.25), rgba(var(--accent-secondary-rgb),0.15));
    color: #ffb2b8;
}
select.tm-input option:hover {
    background-color: rgba(255, 182, 220, 0.15) !important;
    color: #ffb2b8;
}
input.tm-input[type="date"] {
    background: rgba(28, 27, 27, 0.6);
    color: #ffffff;
    color-scheme: dark;
    accent-color: #f2a8d3;
}
input.tm-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: brightness(2.2) saturate(0) opacity(1);
    opacity: 0.95;
    cursor: pointer;
}
input.tm-input[type="date"]::-webkit-datetime-edit,
input.tm-input[type="date"]::-webkit-datetime-edit-text,
input.tm-input[type="date"]::-webkit-datetime-edit-month-field,
input.tm-input[type="date"]::-webkit-datetime-edit-day-field,
input.tm-input[type="date"]::-webkit-datetime-edit-year-field {
    color: #ffffff;
}
.tm-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.tm-tags-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.tm-tags-grid .tm-input {
    min-width: 0;
}

/* Type Selector */
.tm-type-row { display: flex; gap: 12px; }
.tm-type-btn {
    flex: 1;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(28,27,27,0.5);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.25s;
    opacity: 0.5;
}
.tm-type-btn:hover { opacity: 0.8; border-color: rgba(255,255,255,0.12); }
.tm-type-btn.active {
    opacity: 1;
    border-color: rgba(var(--accent-primary-rgb),0.25);
    background: rgba(var(--accent-primary-rgb),0.06);
    box-shadow: 0 0 18px rgba(var(--accent-primary-rgb),0.08);
}
.tm-type-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(var(--accent-primary-rgb),0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    flex-shrink: 0;
    transition: transform 0.2s;
}
.tm-type-btn:hover .tm-type-icon { transform: scale(1.1); }
.tm-type-icon-dim { background: rgba(255,255,255,0.05); color: #ffffff; }
.tm-type-btn.active .tm-type-icon-dim { background: rgba(var(--accent-primary-rgb),0.15); color: var(--accent-primary); }
.tm-type-icon .material-symbols-outlined { font-size: 22px; }
.tm-type-name {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.tm-type-sub {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    margin-top: 1px;
}

/* Checklist builder */
.tm-cl-list { display: flex; flex-direction: column; gap: 6px; }
.tm-cl-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(28,27,27,0.6);
    border: 1px solid rgba(255,255,255,0.04);
}
.tm-cl-item input[type="checkbox"] {
    width: 18px; height: 18px;
    border-radius: 4px;
    accent-color: var(--accent-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.tm-cl-item input[type="text"] {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    outline: none;
}
.tm-cl-item input[type="text"]::placeholder { color: rgba(255,255,255,0.15); }
.tm-cl-del {
    background: none; border: none;
    color: rgba(255,255,255,0.12);
    cursor: pointer; padding: 2px;
    transition: color 0.15s;
}
.tm-cl-del:hover { color: #ff6e80; }
.tm-cl-del .material-symbols-outlined { font-size: 16px; }
.tm-cl-placeholder {
    padding: 11px 14px;
    border-radius: 8px;
    background: rgba(42,42,42,0.3);
    border: 1px solid rgba(255,255,255,0.04);
    margin-top: 6px;
}
.tm-cl-new-input {
    width: 100%;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    outline: none;
}
.tm-cl-new-input::placeholder { color: rgba(255,255,255,0.15); }

/* Upload area */
.tm-upload {
    flex: 1;
    min-height: 280px;
    border-radius: 12px;
    border: 1px dashed rgba(255,255,255,0.08);
    background: rgba(28,27,27,0.3);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.3s;
}
.tm-upload:hover { border-color: rgba(var(--accent-primary-rgb),0.3); }
.tm-upload-content { text-align: center; z-index: 2; position: relative; }
.tm-upload-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(13,13,13,0.5);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: border-color 0.3s, color 0.3s;
    color: #ffffff;
}
.tm-upload:hover .tm-upload-icon { border-color: rgba(var(--accent-primary-rgb),0.3); color: var(--accent-primary); }
.tm-upload-icon .material-symbols-outlined { font-size: 26px; }
.tm-upload-text {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
}
.tm-upload-sub {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px;
    color: rgba(255,255,255,0.2);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.tm-upload-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    z-index: 1;
    transition: opacity 0.3s;
}
.tm-upload:hover .tm-upload-preview { opacity: 0.8; }
.tm-corner {
    position: absolute;
    width: 14px; height: 14px;
    z-index: 3;
    pointer-events: none;
}
.tm-corner-tl { top: 8px; left: 8px; border-top: 2px solid rgba(var(--accent-primary-rgb),0.3); border-left: 2px solid rgba(var(--accent-primary-rgb),0.3); }
.tm-corner-tr { top: 8px; right: 8px; border-top: 2px solid rgba(var(--accent-primary-rgb),0.3); border-right: 2px solid rgba(var(--accent-primary-rgb),0.3); }
.tm-corner-bl { bottom: 8px; left: 8px; border-bottom: 2px solid rgba(var(--accent-primary-rgb),0.3); border-left: 2px solid rgba(var(--accent-primary-rgb),0.3); }
.tm-corner-br { bottom: 8px; right: 8px; border-bottom: 2px solid rgba(var(--accent-primary-rgb),0.3); border-right: 2px solid rgba(var(--accent-primary-rgb),0.3); }

/* Footer */
.tm-footer {
    padding: 18px 32px;
    border-top: 1px solid rgba(255,255,255,0.04);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: rgba(28,27,27,0.3);
}
.tm-btn-cancel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ff6e80;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.2s;
}
.tm-btn-cancel:hover { background: rgba(255,110,128,0.08); }
.tm-btn-cancel .material-symbols-outlined { font-size: 18px; transition: transform 0.3s; }
.tm-btn-cancel:hover .material-symbols-outlined { transform: rotate(90deg); }
.tm-footer-right { display: flex; gap: 12px; align-items: center; }
.tm-btn-launch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(var(--accent-secondary-rgb),0.35);
    transition: all 0.25s;
}
.tm-btn-launch:hover { box-shadow: 0 6px 28px rgba(var(--accent-secondary-rgb),0.55); transform: translateY(-1px); filter: saturate(1.1); }
.tm-btn-launch .material-symbols-outlined { font-size: 18px; transition: transform 0.3s; }
.tm-btn-launch:hover .material-symbols-outlined { transform: translate(2px, -2px); }

/* ============================================
 * TASK DETAIL MODAL
 * ============================================ */
.tm-panel-detail { max-width: 820px; }

/* Status badge */
.td-status-badge {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 5px 16px;
    border-radius: 20px;
    border: 1px solid;
}
.td-status-planejado { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
.td-status-andamento { background: rgba(var(--accent-primary-rgb),0.08); border-color: rgba(var(--accent-primary-rgb),0.2); color: var(--accent-primary); }
.td-status-atrasado { background: rgba(255,110,128,0.08); border-color: rgba(255,110,128,0.2); color: #ff6e80; }
.td-status-concluido { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.2); color: #4ade80; }
.td-status-custom    { background: rgba(var(--accent-primary-rgb),0.08); border-color: rgba(var(--accent-primary-rgb),0.2); color: var(--accent-primary); }

/* Info cards row */
.td-info-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.td-info-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    flex: 1;
    min-width: 140px;
}
.td-info-card > div {
    flex: 1;
    min-width: 0;
}
.td-info-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(var(--accent-primary-rgb),0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--accent-primary-rgb),0.5);
    flex-shrink: 0;
}
.td-info-icon .material-symbols-outlined { font-size: 16px; }
.td-info-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.55);
    font-weight: 700;
    margin-bottom: 4px;
}
.td-info-val {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    margin: 0;
}
.td-info-late { color: #ff6e80; }


.td-info-card-collabs {
    align-items: flex-start;
    min-width: 220px;
    padding-right: 20px;
}
.td-info-card-collabs .td-info-icon {
    margin-top: 2px;
}
.td-info-card-collabs > div {
    flex: 1;
    min-width: 0;
}
.td-collab-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 6px;
}
.td-collab-name {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    line-height: 1.35;
    color: #fff;
    font-weight: 600;
    margin: 0;
    overflow-wrap: anywhere;
}

/* Content grid */
.td-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 700px) { .td-content-grid { grid-template-columns: 1fr; } }

/* Block sections */
.td-block {
    margin-bottom: 20px;
}
.td-block-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.55);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.td-block-label .material-symbols-outlined { color: rgba(var(--accent-primary-rgb),0.7); }
.td-cl-counter {
    margin-left: auto;
    color: rgba(255,255,255,0.2);
    font-weight: 500;
}

/* Objective */
.td-obj {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px;
    color: rgba(var(--accent-primary-rgb),0.7);
    padding: 14px 18px;
    background: rgba(var(--accent-primary-rgb),0.04);
    border: 1px solid rgba(var(--accent-primary-rgb),0.08);
    border-radius: 10px;
    line-height: 1.5;
}

/* Description */
.td-desc {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,0.55);
    padding: 14px 18px;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.04);
}

/* Detail checklist */
.td-check-bar {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}
.td-check-bar-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.5);
    transition: width 0.3s;
}
.td-checklist {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.td-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(28,27,27,0.5);
    border: 1px solid rgba(255,255,255,0.03);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.80);
    cursor: pointer;
    transition: background 0.15s;
}
.td-check-item:hover { background: rgba(255,255,255,0.05); }
.td-check-item input[type="checkbox"] {
    width: 18px; height: 18px;
    border-radius: 4px;
    accent-color: var(--accent-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.td-check-item .td-done { text-decoration: line-through; color: rgba(255,255,255,0.2); }

/* Detail reference */
.td-ref-container {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.06);
}
.td-ref-img {
    width: 100%;
    display: block;
    border-radius: 12px;
}

/* Detail move button */
.td-btn-move {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(var(--accent-secondary-rgb),0.35);
    transition: all 0.25s;
}
.td-btn-move:hover { box-shadow: 0 6px 28px rgba(var(--accent-secondary-rgb),0.55); transform: translateY(-1px); filter: saturate(1.1); }
.td-btn-move .material-symbols-outlined { font-size: 18px; }
.td-btn-move-done {
    background: linear-gradient(90deg, #239a63, #34b87a);
    box-shadow: 0 0 20px rgba(52, 184, 122, 0.28);
}
.td-btn-move-done:hover { box-shadow: 0 0 30px rgba(52, 184, 122, 0.42); }

@keyframes kb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (max-width: 900px) {
    .kb-wrapper {
        max-width: none;
        padding: 4px 16px 24px;
    }
    .kb-top-header { flex-direction: column; align-items: flex-start; }
    .kb-summary-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 12px;
    }
    .kb-summary-head {
        text-align: left;
    }
    .kb-summary-spacer { display: none; }
    .kb-cards-scroll { gap: 12px; }
    .kb-card, .kb-card-add {
        min-width: 240px;
        max-width: 280px;
    }
    .kb-stats {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
        justify-content: stretch;
        width: 100%;
    }
    .kb-stats-top,
    .kb-summary-progress {
        width: 100%;
    }
    .kb-summary-progress {
        width: 100%;
        min-width: 0;
        padding-left: 0;
    }
    .kb-summary-progress .kb-deploy-label {
        text-align: left;
    }
    .tm-grid { grid-template-columns: 1fr; }
    .tm-row-2 { grid-template-columns: 1fr; }
    .tm-panel { max-height: 95vh; }
}

@media (max-width: 980px) {
    .kb-lane-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .kb-lane-main {
        flex-wrap: wrap;
    }
    .kb-lane-add-inline {
        margin-left: 48px;
    }
    .kb-lane-controls {
        width: 100%;
        justify-content: space-between;
    }
}
@media (max-width: 640px) {
    .kb-lane-add-inline {
        margin-left: 0;
    }
    .kb-lane-controls {
        flex-wrap: wrap;
        gap: 8px;
    }
    .kb-lane-toggle {
        width: 100%;
    }
    .kb-lane-toggle-btn {
        flex: 1;
        min-width: 0;
    }
}

/* ============================================
 * CUSTOM DROPDOWN — replaces native select
 * ============================================ */
.tm-dropdown {
    position: relative;
    width: 100%;
}
.tm-dropdown-trigger {
    width: 100%;
    background: rgba(42, 42, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 11px 14px;
    color: #fff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.tm-dropdown-trigger:hover { border-color: rgba(255,255,255,0.12); }
.tm-dropdown-trigger.open { border-color: rgba(var(--accent-primary-rgb),0.35); }
.tm-dropdown-trigger .material-symbols-outlined {
    font-size: 18px;
    color: rgba(255,255,255,0.3);
    transition: transform 0.2s;
}
.tm-dropdown-trigger.open .material-symbols-outlined { transform: rotate(180deg); }
.tm-dropdown-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #1e1e24;
    border: 1px solid rgba(var(--accent-primary-rgb),0.1);
    border-radius: 10px;
    padding: 4px;
    z-index: 100;
    box-shadow: 0 12px 32px rgba(0,0,0,0.6);
    display: none;
    max-height: 220px;
    overflow-y: auto;
}
.tm-dropdown-list::-webkit-scrollbar { width: 3px; }
.tm-dropdown-list::-webkit-scrollbar-thumb { background: rgba(var(--accent-primary-rgb),0.15); border-radius: 10px; }
.tm-dropdown-list.open { display: block; }
.tm-dropdown-option {
    padding: 9px 14px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.tm-dropdown-option:hover {
    background: rgba(var(--accent-secondary-rgb),0.10);
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #ffb2b8;
}
.tm-dropdown-option.selected {
    background: rgba(var(--accent-primary-rgb), 0.1);
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--accent-primary);
    font-weight: 700;
}

/* Task delete confirmation */
.tdc-box {
    background: #1e1e24;
    border: 1px solid rgba(255,110,128,0.15);
    border-radius: 16px;
    padding: 32px;
    width: 380px;
    max-width: 90vw;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,0.7);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.25s;
}
.ic-login-modal.open .tdc-box { transform: translateY(0) scale(1); }
.tdc-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255,110,128,0.1);
    border: 1px solid rgba(255,110,128,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.tdc-icon .material-symbols-outlined { font-size: 24px; color: #ff6e80; }
.tdc-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.tdc-text {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.80);
    line-height: 1.5;
    margin-bottom: 24px;
}
.tdc-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.tdc-cancel, .tdc-confirm {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 10px 24px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.tdc-cancel {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.08);
}
.tdc-cancel:hover { background: rgba(255,255,255,0.1); color: #fff; }
.tdc-confirm {
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 18px rgba(var(--accent-secondary-rgb),0.30);
}
.tdc-confirm:hover { box-shadow: 0 6px 24px rgba(var(--accent-secondary-rgb),0.50); transform: translateY(-1px); }

/* ============================================
 * HISTORY — Histórico de Atividades
 * ============================================ */
.kb-history {
    margin-top: 20px;
    background: rgba(16, 16, 20, 0.5);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 14px;
    padding: 20px 24px;
}
.kb-history-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.kb-history-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(74,222,128,0.06);
    border: 1px solid rgba(74,222,128,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kb-history-icon .material-symbols-outlined {
    font-size: 18px;
    color: #4ade80;
}
.kb-history-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
}
.kb-history-sub {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 2px;
}
.kb-history-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
}
.kb-history-list::-webkit-scrollbar { width: 3px; }
.kb-history-list::-webkit-scrollbar-thumb { background: rgba(74,222,128,0.12); border-radius: 10px; }
.kb-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.kb-history-item:hover {
    background: rgba(255,255,255,0.03);
}
.kb-history-check {
    font-size: 16px;
    color: #4ade80;
    flex-shrink: 0;
    opacity: 0.5;
}
.kb-history-name {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.80);
    text-decoration: line-through;
    text-decoration-color: rgba(74,222,128,0.2);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kb-history-item:hover .kb-history-name {
    color: rgba(255,255,255,0.7);
}
.kb-history-assignee {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    color: rgba(255,255,255,0.25);
    flex-shrink: 0;
}
.kb-history-date {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    color: rgba(255,255,255,0.2);
    flex-shrink: 0;
    min-width: 70px;
    text-align: right;
}

/* Edit button in detail modal */
.td-btn-edit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb),0.08);
    border: 1px solid rgba(var(--accent-primary-rgb),0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.td-btn-edit:hover {
    background: rgba(var(--accent-primary-rgb),0.15);
    border-color: rgba(var(--accent-primary-rgb),0.35);
}
.td-btn-edit .material-symbols-outlined { font-size: 18px; }

/* ============================================
 * VIEW MODE TOGGLE + COLUMNS MODE
 * ============================================ */
.kb-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    margin-top: 0;
    margin-left: 0;
}
.kb-title-spacer { flex: 1; }
.kb-view-toggle {
    display: flex;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.kb-view-btn {
    width: 34px; height: 30px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.kb-view-btn:hover { color: rgba(255,255,255,0.5); }
.kb-view-btn .material-symbols-outlined { font-size: 18px; }
.kb-view-active {
    background: rgba(var(--accent-primary-rgb),0.12);
    color: var(--accent-primary);
}
.kb-view-active:hover { color: var(--accent-primary); }

/* Columns mode */
.kb-columns-mode {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-primary-rgb),0.28) transparent;
}
.kb-columns-mode::-webkit-scrollbar { height: 5px; }
.kb-columns-mode::-webkit-scrollbar-track { background: transparent; }
.kb-columns-mode::-webkit-scrollbar-thumb { background: rgba(var(--accent-primary-rgb),0.22); border-radius: 999px; }
.kb-columns-mode .kb-lane {
    flex: 0 0 330px;
    width: 330px;
    min-width: 330px;
    max-width: 330px;
    min-height: 680px;
    max-height: none;
    padding: 14px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.022), inset 0 1px 0 rgba(255,255,255,0.035);
}
.kb-columns-mode .kb-lane::before {
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
}
.kb-columns-mode .kb-lane-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.kb-columns-mode .kb-lane-main {
    width: 100%;
}
.kb-columns-mode .kb-lane-info {
    flex: 1;
}
.kb-columns-mode .kb-lane-title {
    font-size: 14px;
}
.kb-columns-mode .kb-lane-sub {
    font-size: 9px;
    display: block;
}
.kb-columns-mode .kb-lane-icon {
    width: 28px; height: 28px;
    border-radius: 6px;
}
.kb-columns-mode .kb-lane-icon .material-symbols-outlined {
    font-size: 16px;
}
.kb-columns-mode .kb-lane-controls {
    width: 100%;
}
.kb-columns-mode .kb-lane-toggle {
    width: 100%;
}
.kb-columns-mode .kb-lane-toggle-btn {
    flex: 1;
    font-size: 9px;
    padding: 4px 8px;
}

/* Cards stack vertically in columns */
.kb-columns-mode .kb-cards-scroll {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
    max-height: 560px;
    padding: 2px;
}
.kb-columns-mode .kb-cards-scroll::-webkit-scrollbar { width: 3px; height: 0; }
.kb-columns-mode .kb-cards-scroll::-webkit-scrollbar-thumb { background: rgba(var(--accent-primary-rgb),0.12); border-radius: 10px; }

.kb-columns-mode .kb-card {
    min-width: unset;
    max-width: unset;
    width: 100%;
}
.kb-columns-mode .kb-card-ghost {
    min-width: unset;
    width: 100%;
    min-height: 48px;
}
.kb-columns-mode .kb-card-top {
    padding: 8px 12px;
}
.kb-columns-mode .kb-card-title {
    font-size: 10px;
    letter-spacing: 1px;
}
.kb-columns-mode .kb-card-body {
    padding: 10px 12px;
    gap: 8px;
}
.kb-columns-mode .kb-desc {
    font-size: 11px;
    -webkit-line-clamp: 2;
}
.kb-columns-mode .kb-ref-thumb {
    height: 96px;
    object-position: center;
}
.kb-columns-mode .kb-card-foot {
    padding-top: 8px;
}
.kb-columns-mode .kb-btn {
    font-size: 9px;
    padding: 3px 10px;
    letter-spacing: 0.5px;
}
.kb-columns-mode .kb-card-add {
    min-width: unset;
    width: 100%;
    padding: 16px;
}
.kb-columns-mode .kb-card-add-icon { width: 30px; height: 30px; }
.kb-columns-mode .kb-card-add-icon .material-symbols-outlined { font-size: 16px; }
.kb-columns-mode .kb-card-add-label { font-size: 9px; }

/* Collapsed empty in columns mode */
.kb-columns-mode .kb-lane-empty {
    min-height: 680px;
}
.kb-columns-mode .kb-lane-add-gradient {
    font-size: 9px;
    padding: 5px 10px;
}
.kb-columns-mode .kb-lane-add-gradient .material-symbols-outlined {
    font-size: 14px;
}
.kb-columns-mode .kb-lane-add-inline {
    display: flex;
}
/* Nova Tarefa button fills full column width in columns mode */
.kb-columns-mode .kb-card-add {
    min-width: unset;
    width: 100%;
    padding: 32px 16px;
}

/* Filter empty in columns */
.kb-columns-mode .kb-filter-empty {
    min-height: 100px;
    font-size: 11px;
}
.kb-columns-mode .kb-filter-empty .material-symbols-outlined {
    font-size: 24px;
}

@media (max-width: 1000px) {
    .kb-columns-mode .kb-lane,
    .kb-columns-mode .kb-add-lane-btn {
        flex-basis: 300px;
        width: 300px;
        min-width: 300px;
        max-width: 300px;
    }
}
@media (max-width: 600px) {
    .kb-columns-mode .kb-lane,
    .kb-columns-mode .kb-add-lane-btn {
        flex-basis: 88vw;
        width: 88vw;
        min-width: 88vw;
        max-width: 88vw;
    }
}

/* ============================================
 * CUSTOM LANE MODAL + ADD LANE BUTTON
 * ============================================ */
.kb-add-lane-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: 12px;
    border: 2px dashed rgba(255,255,255,0.12);
    cursor: pointer;
    transition: all 0.2s;
    color: #ffffff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 4px;
}
.kb-add-lane-btn:hover {
    border-color: rgba(255,255,255,0.3);
    color: #ffffff;
    background: rgba(255,255,255,0.04);
}
.kb-add-lane-btn .material-symbols-outlined { font-size: 20px; }

/* Custom lane edit/delete buttons */
.kb-custom-lane-edit, .kb-custom-lane-del {
    background: none;
    border: none;
    color: rgba(255,255,255,0.15);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kb-custom-lane-edit:hover { color: var(--accent-primary); background: rgba(var(--accent-primary-rgb),0.08); }
.kb-custom-lane-del:hover { color: #ff6e80; background: rgba(255,110,128,0.08); }
.kb-custom-lane-edit .material-symbols-outlined,
.kb-custom-lane-del .material-symbols-outlined { font-size: 16px; }

/* Lane color grid */
.lane-color-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.lane-color-opt {
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    border: 3px solid transparent;
    box-sizing: border-box;
}
.lane-color-opt:hover { transform: scale(1.15); }
.lane-color-opt.lane-opt-active {
    border-color: #fff;
    box-shadow: 0 0 12px rgba(255,255,255,0.3);
    transform: scale(1.1);
}

/* Lane icon grid */
.lane-icon-grid {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    max-height: 160px;
    overflow-y: auto;
    padding: 4px 0;
}
.lane-icon-grid::-webkit-scrollbar { width: 3px; }
.lane-icon-grid::-webkit-scrollbar-thumb { background: rgba(var(--accent-primary-rgb),0.12); border-radius: 10px; }
.lane-icon-opt {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.04);
    color: #ffffff;
}
.lane-icon-opt:hover {
    background: rgba(var(--accent-primary-rgb),0.08);
    color: var(--accent-primary);
    border-color: rgba(var(--accent-primary-rgb),0.15);
}
.lane-icon-opt.lane-opt-active {
    background: rgba(var(--accent-primary-rgb),0.12);
    color: var(--accent-primary);
    border-color: rgba(var(--accent-primary-rgb),0.3);
    box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.2);
}
.lane-icon-opt .material-symbols-outlined { font-size: 18px; }

/* Columns mode add lane */
.kb-columns-mode .kb-add-lane-btn {
    flex: 0 0 320px;
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    min-height: 540px;
    margin-top: 0;
    padding: 22px 18px;
    border-radius: 18px;
    border: 1px dashed rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.82);
    box-shadow: none;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}
.kb-columns-mode .kb-add-lane-btn::before {
    content: '';
    position: absolute;
    inset: 18px;
    border-radius: 14px;
    border: 1px dashed rgba(var(--accent-primary-rgb),0.18);
    opacity: 0.7;
}
.kb-columns-mode .kb-add-lane-btn::after {
    content: '';
    position: absolute;
    inset: 34px 28px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.012);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.kb-columns-mode .kb-add-lane-btn .material-symbols-outlined,
.kb-columns-mode .kb-add-lane-btn span {
    position: relative;
    z-index: 1;
}
.kb-columns-mode .kb-add-lane-btn .material-symbols-outlined {
    font-size: 34px;
    color: #ffffff;
    text-shadow: none;
}
.kb-columns-mode .kb-add-lane-btn span:last-child {
    font-size: 12px;
    letter-spacing: 2.2px;
    color: #ffffff;
}
.kb-columns-mode .kb-add-lane-btn:hover {
    border-color: rgba(255,255,255,0.38);
    background: rgba(255,255,255,0.04);
    box-shadow: none;
    color: #ffffff;
}


/* =============================================================
 * FILTER & HISTORY — ACTION BUTTONS IN TITLE ROW
 * ============================================================= */
.kb-action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.kb-action-buttons-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    justify-self: end;
}
.kb-btn-wrapper {
    position: relative;
    display: inline-flex;
}
.kb-action-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    min-height: 38px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: rgba(255,255,255,0.5);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
    position: relative;
}
.kb-action-btn .material-symbols-outlined { font-size: 16px; }
.kb-action-btn:hover {
    background: rgba(var(--accent-primary-rgb),0.07);
    border-color: rgba(var(--accent-primary-rgb),0.18);
    color: rgba(255,255,255,0.8);
}
.kb-action-btn-active {
    background: rgba(var(--accent-primary-rgb),0.1);
    border-color: rgba(var(--accent-primary-rgb),0.3);
    color: var(--accent-primary) !important;
}
.kb-filter-dot {
    width: 6px;
    height: 6px;
    background: var(--accent-secondary);
    border-radius: 50%;
    position: absolute;
    top: 5px;
    right: 5px;
    box-shadow: 0 0 5px rgba(var(--accent-secondary-rgb),0.8);
}

/* =============================================================
 * FLOATING DROPDOWN PANELS (appended to body)
 * ============================================================= */
.kb-float-panel {
    position: absolute;
    z-index: 9999;
    background: rgba(14, 9, 26, 0.98);
    border: 1px solid rgba(var(--accent-primary-rgb),0.18);
    border-radius: 14px;
    padding: 18px;
    width: 272px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
    backdrop-filter: blur(24px);
    animation: kbDropIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.kb-float-history {
    width: 380px;
    padding: 0;
    overflow: hidden;
}
@keyframes kbDropIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Filter panel internals */
.kb-fp-section { margin-bottom: 4px; }
.kb-fp-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(var(--accent-primary-rgb),0.55);
    margin-bottom: 9px;
}
.kb-fp-label .material-symbols-outlined { font-size: 13px; }
.kb-fp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-fp-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.80);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.kb-fp-chip:hover { background: rgba(255,255,255,0.07); color: #fff; }
.kb-fp-chip-active {
    background: color-mix(in srgb, var(--chip-color) 14%, transparent);
    border-color: var(--chip-color);
    color: var(--chip-color);
}
.kb-fp-chip-wide { width: 100%; justify-content: flex-start; }
.kb-fp-avatar {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--accent-strong),var(--accent-secondary));
    display: flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.kb-fp-divider { height: 1px; background: rgba(255,255,255,0.05); margin: 12px 0; }
.kb-fp-empty { font-family: 'Argentum Sans', sans-serif; font-size: 11px; color: rgba(255,255,255,0.22); }
.kb-fp-clear {
    display: flex; align-items: center; gap: 6px;
    width: 100%; margin-top: 12px;
    padding: 7px 12px;
    background: rgba(var(--accent-secondary-rgb),0.07);
    border: 1px solid rgba(var(--accent-secondary-rgb),0.18);
    border-radius: 8px;
    color: var(--accent-secondary);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer; transition: all 0.18s;
}
.kb-fp-clear .material-symbols-outlined { font-size: 13px; }
.kb-fp-clear:hover { background: rgba(var(--accent-secondary-rgb),0.13); }

/* History floating panel */
.kb-fh-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(var(--accent-primary-rgb),0.10);
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.07) 0%, rgba(14,9,26,0) 100%);
}
.kb-fh-header .material-symbols-outlined {
    font-size: 18px; color: var(--accent-primary);
    font-variation-settings: 'FILL' 1;
}
.kb-fh-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px; font-weight: 700; color: #fff; flex: 1;
    letter-spacing: -0.2px;
}
.kb-fh-count {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px; font-weight: 600;
    color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb),0.12);
    border: 1px solid rgba(var(--accent-primary-rgb),0.20);
    border-radius: 20px; padding: 3px 10px;
    letter-spacing: 0.2px;
}
.kb-fh-list {
    padding: 6px 0 8px;
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.kb-fh-list::-webkit-scrollbar { width: 4px; }
.kb-fh-list::-webkit-scrollbar-track { background: transparent; }
.kb-fh-list::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-primary-rgb),0.20);
    border-radius: 10px;
}
.kb-fh-list::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-primary-rgb),0.38);
}
.kb-fh-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.035);
    transition: background 0.13s;
    position: relative;
}
.kb-fh-row:last-child { border-bottom: none; }
.kb-fh-row:hover { background: rgba(var(--accent-primary-rgb),0.06); }
.kb-fh-icon-wrap {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
}
.kb-fh-icon-wrap .material-symbols-outlined {
    font-size: 15px;
    font-variation-settings: 'FILL' 1;
}
.kb-fh-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kb-fh-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12.5px; font-weight: 600;
    color: rgba(255,255,255,0.88);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kb-fh-assignee {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; color: rgba(255,255,255,0.42);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kb-fh-assignee strong {
    color: rgba(255,255,255,0.62);
    font-weight: 600;
}
.kb-fh-meta {
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 4px; flex-shrink: 0;
    min-width: 68px;
}
.kb-fh-date {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px; color: rgba(255,255,255,0.28);
    white-space: nowrap;
}
.kb-history-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 44px 20px;
    color: rgba(255,255,255,0.25);
    font-family: 'Argentum Sans', sans-serif; font-size: 12px;
}
.kb-history-empty .material-symbols-outlined { font-size: 32px; color: rgba(var(--accent-primary-rgb),0.20); }

/* =============================================================
 * MULTI-ASSIGNEE SELECT WIDGET
 * ============================================================= */
.tm-multi-assign {
    position: relative;
}
.tm-ma-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.18s;
}
.tm-multi-assign.open .tm-ma-trigger,
.tm-ma-trigger:hover {
    border-color: rgba(var(--accent-primary-rgb),0.3);
}
.tm-ma-trigger .material-symbols-outlined {
    font-size: 18px;
    color: rgba(255,255,255,0.3);
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.tm-multi-assign.open .tm-ma-trigger .material-symbols-outlined {
    transform: rotate(180deg);
}
.tm-ma-avatars {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}
.tm-ma-placeholder {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.25);
}
.tm-ma-tag {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 4px;
    background: rgba(var(--accent-primary-rgb),0.1);
    border: 1px solid rgba(var(--accent-primary-rgb),0.2);
    border-radius: 20px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}
.tm-ma-av {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--accent-strong),var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.tm-ma-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}
.tm-ma-remove:hover { color: #ff6e80; }
.tm-ma-list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 500;
    background: rgba(14,9,26,0.98);
    border: 1px solid rgba(var(--accent-primary-rgb),0.18);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,0.6);
    max-height: 220px;
    overflow-y: auto;
}
.tm-ma-list.open { display: block; }
.tm-ma-list::-webkit-scrollbar { width: 3px; }
.tm-ma-list::-webkit-scrollbar-thumb { background: rgba(var(--accent-primary-rgb),0.15); border-radius: 10px; }
.tm-ma-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.13s;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.tm-ma-option:last-child { border-bottom: none; }
.tm-ma-option:hover { background: rgba(var(--accent-primary-rgb),0.06); }
.tm-ma-option.tm-ma-selected { background: rgba(var(--accent-primary-rgb),0.08); }
.tm-ma-opt-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--accent-strong),var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.tm-ma-option span:nth-child(2) {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    flex: 1;
}
.tm-ma-check {
    font-size: 16px !important;
    color: #4ade80;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.tm-ma-selected .tm-ma-check { opacity: 1; }
.tm-ma-empty {
    padding: 16px;
    text-align: center;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,0.25);
}

/* =============================================================
 * DRAG-AND-DROP — INSERT INDICATOR & NUDGE
 * ============================================================= */
/* Vertical indicator — columns mode */
.kb-drop-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    box-shadow: 0 0 10px 3px rgba(var(--accent-primary-rgb),0.55), 0 0 22px 6px rgba(var(--accent-secondary-rgb),0.25);
    z-index: 100;
    pointer-events: none;
    animation: kbIndicatorPulse 0.8s ease-in-out infinite alternate;
}
/* Horizontal indicator — lanes (rows) mode */
.kb-drop-indicator-h {
    top: auto;
    bottom: auto;
    left: 8px;
    right: 8px;
    width: auto;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    box-shadow: 0 0 10px 3px rgba(var(--accent-primary-rgb),0.55), 0 0 22px 6px rgba(var(--accent-secondary-rgb),0.25);
}
@keyframes kbIndicatorPulse {
    from { opacity: 0.75; box-shadow: 0 0 8px 2px rgba(var(--accent-primary-rgb),0.45), 0 0 18px 4px rgba(var(--accent-secondary-rgb),0.2); }
    to   { opacity: 1;    box-shadow: 0 0 14px 5px rgba(var(--accent-primary-rgb),0.7), 0 0 28px 8px rgba(var(--accent-secondary-rgb),0.35); }
}
.kb-lane-push-left  {
    transform: translateX(-6px);
    transition: transform 0.18s ease, opacity 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
    opacity: 0.88;
    filter: saturate(0.9) brightness(0.92);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.018);
}
.kb-lane-push-right {
    transform: translateX( 6px);
    transition: transform 0.18s ease, opacity 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
    opacity: 0.88;
    filter: saturate(0.9) brightness(0.92);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.018);
}
.kb-lane            { transition: transform 0.18s ease, opacity 0.2s, filter 0.2s, box-shadow 0.2s, border-color 0.2s; }
.kb-lane-dragging   { opacity: 0.42 !important; filter: saturate(0.88) brightness(0.9); }

/* ============================================================
 * MÉTRICAS — Meta Ads Dashboard
 * ============================================================ */

.mtr-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 8px 4px 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}

/* Header */
.mtr-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.mtr-header-left { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.mtr-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(var(--accent-primary-rgb),0.8);
}
.mtr-live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.7);
    animation: mtrPulse 1.8s ease-in-out infinite;
}
@keyframes mtrPulse {
    0%,100% { opacity: 1; box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.7); }
    50% { opacity: 0.5; box-shadow: 0 0 3px rgba(var(--accent-primary-rgb),0.3); }
}
.mtr-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
    margin: 0;
    line-height: 1;
}
.mtr-period-wrap {
    position: relative;
    width: fit-content;
}
.mtr-period {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.72);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 999px;
    padding: 6px 14px;
    width: fit-content;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.mtr-period:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(var(--accent-primary-rgb),0.22);
    box-shadow: 0 0 18px rgba(var(--accent-primary-rgb),0.08);
}
.mtr-period .material-symbols-outlined { font-size: 14px; color: var(--accent-secondary); }
.mtr-period-chevron {
    font-size: 16px !important;
    color: rgba(255,255,255,0.46) !important;
    margin-left: 2px;
}
.mtr-period-popover {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 320px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(18,9,28,0.98), rgba(11,8,22,0.98));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.42), 0 0 26px rgba(var(--accent-primary-rgb),0.08);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 40;
}
.mtr-period-popover.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.mtr-period-popover-head h4 {
    margin: 0 0 4px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 15px;
    color: #fff;
}
.mtr-period-popover-head p {
    margin: 0;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}
.mtr-period-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.mtr-period-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: 'Argentum Sans', sans-serif;
}
.mtr-period-field span {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(var(--accent-primary-rgb),0.82);
}
.mtr-period-field input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    outline: none;
}
.mtr-period-field input:focus {
    border-color: rgba(var(--accent-primary-rgb),0.35);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb),0.1);
}
.mtr-period-field input::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1);
    opacity: 1;
    cursor: pointer;
}
.mtr-period-field input::-webkit-datetime-edit,
.mtr-period-field input::-webkit-datetime-edit-text,
.mtr-period-field input::-webkit-datetime-edit-month-field,
.mtr-period-field input::-webkit-datetime-edit-day-field,
.mtr-period-field input::-webkit-datetime-edit-year-field {
    color: #fff;
}
.mtr-period-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}
.mtr-period-btn {
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}
.mtr-period-btn-ghost {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.72);
}
.mtr-period-btn-primary {
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    border: none;
    color: #fff;
    box-shadow: 0 0 18px rgba(var(--accent-primary-rgb),0.2);
}
@media (max-width: 640px) {
    .mtr-period-popover {
        min-width: 280px;
        left: 0;
        right: auto;
    }
    .mtr-period-fields {
        grid-template-columns: 1fr;
    }
}
.mtr-header-actions { display: flex; align-items: center; gap: 10px; }
.mtr-btn-ghost {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 10px 20px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: #fff; cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.mtr-btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.mtr-btn-ghost .material-symbols-outlined { font-size: 16px; }
.mtr-btn-primary {
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    border: none; border-radius: 999px;
    padding: 10px 22px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: #fff; cursor: pointer;
    box-shadow: 0 0 24px rgba(var(--accent-primary-rgb),0.35);
    transition: box-shadow 0.2s, transform 0.2s;
}
.mtr-btn-primary:hover { box-shadow: 0 0 36px rgba(var(--accent-primary-rgb),0.55); transform: translateY(-1px); }
.mtr-btn-primary .material-symbols-outlined { font-size: 16px; }

/* Chart */
.mtr-chart-card {
    background: rgba(10,10,18,0.56);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(var(--accent-primary-rgb),0.08);
    border-radius: 18px;
    padding: 28px 28px 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    position: relative;
    overflow: hidden;
}
.mtr-chart-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 35%; height: 100%;
    background: linear-gradient(to left, rgba(var(--accent-primary-rgb),0.04), transparent);
    pointer-events: none;
}
.mtr-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}
.mtr-chart-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 17px; font-weight: 800;
    color: #fff; margin: 0;
    display: flex; align-items: center; gap: 10px;
}
.mtr-live-tag {
    font-size: 9px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    background: rgba(var(--accent-primary-rgb),0.15);
    color: var(--accent-primary);
    border: 1px solid rgba(var(--accent-primary-rgb),0.25);
    border-radius: 4px;
    padding: 2px 7px;
}
.mtr-chart-sub {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; color: #ffffff;
    margin: 4px 0 0; padding: 0;
}
.mtr-chart-legend {
    display: flex; gap: 16px; align-items: center;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 8px 16px;
    flex-shrink: 0;
}
.mtr-legend-item {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    display: flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,0.82);
}
.mtr-legend-item::before { display: none; }
.mtr-legend-icon {
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mtr-legend-leads .mtr-legend-icon {
    color: #ff4fb0;
    text-shadow: 0 0 10px rgba(255, 79, 176, 0.34);
}
.mtr-legend-alcance .mtr-legend-icon {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.28);
}
.mtr-chart-area {
    height: 220px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    position: relative;
    padding: 0 2px;
}
.mtr-chart-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}
.mtr-grid-line {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.04);
}
.mtr-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
.mtr-bar {
    flex: 1;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(to top, rgba(255, 96, 182, 0.36) 0%, rgba(255, 82, 176, 0.78) 44%, rgba(255, 109, 196, 0.96) 100%);
    box-shadow: 0 0 18px rgba(255, 86, 176, 0.34);
    opacity: 0.92;
    transition: opacity 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
    cursor: default;
    min-width: 0;
}
.mtr-bar::after {
    content: '';
    position: absolute;
    top: -100%; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent 18%, rgba(255, 247, 252, 0.38) 50%, transparent 82%);
    animation: mtrBarShine 3s infinite;
}
@keyframes mtrBarShine {
    0% { top: 100%; }
    100% { top: -100%; }
}
.mtr-bar:hover { opacity: 1; transform: scaleY(1.02); transform-origin: bottom; }
.mtr-bar-value {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.4px;
    text-shadow: 0 0 10px rgba(255, 159, 214, 0.18);
    pointer-events: none;
    white-space: nowrap;
}
.mtr-line-svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}
.mtr-chart-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding: 0 2px;
}
.mtr-chart-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,0.62);
    letter-spacing: 0.4px;
    text-align: center;
    flex: 1;
    text-shadow: 0 0 6px rgba(255,255,255,0.08);
}

/* 3-column cards grid */
.mtr-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.mtr-card {
    position: relative;
    background: rgba(12,10,16,0.93);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(var(--accent-primary-rgb),0.22);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(var(--accent-strong-rgb),0.12), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.mtr-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.08), rgba(var(--accent-secondary-rgb),0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.mtr-card > * { position: relative; z-index: 1; }
.mtr-card:hover { border-color: rgba(var(--accent-primary-rgb),0.2); box-shadow: 0 0 24px rgba(var(--accent-primary-rgb),0.05); }
.mtr-card-leads:hover { border-color: rgba(var(--accent-primary-rgb),0.22); }
.mtr-card-reach:hover  { border-color: rgba(var(--accent-secondary-rgb),0.22); }
.mtr-card-community:hover { border-color: rgba(74,222,128,0.18); }
.mtr-card-label {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; font-weight: 800;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: #fff;
}
.mtr-card-label .material-symbols-outlined { font-size: 18px; }
.mtr-icon-purple { color: var(--accent-primary); }
.mtr-icon-pink   { color: var(--accent-secondary); }
.mtr-icon-lime   { color: #4ade80; }
.mtr-card-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.mtr-card-top { display: flex; justify-content: space-between; align-items: flex-end; }
.mtr-card-eyebrow {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 4px;
}
.mtr-card-big {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 38px; font-weight: 900;
    color: #fff; line-height: 1;
}
.mtr-card-mid {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 24px; font-weight: 900;
    color: #fff; line-height: 1;
}
.mtr-glow-purple { text-shadow: 0 0 20px rgba(var(--accent-primary-rgb),0.5); }
.mtr-glow-pink   { text-shadow: 0 0 20px rgba(var(--accent-secondary-rgb),0.5); }
.mtr-glow-lime   { text-shadow: 0 0 16px rgba(74,222,128,0.42); color: #4ade80; }
.mtr-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 24px;
    line-height: 1.2;
    white-space: nowrap;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px; font-weight: 900;
    letter-spacing: 1px;
    padding: 6px 11px;
    border-radius: 7px;
    overflow: visible;
}
.mtr-badge-lime { background: rgba(74,222,128,0.08); color: #4ade80; border: 1px solid rgba(74,222,128,0.18); }
.mtr-card-rows { display: flex; flex-direction: column; gap: 10px; }
.mtr-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
}
.mtr-row span:first-child { color: rgba(255,255,255,0.4); }
.mtr-row > .mtr-badge,
.mtr-row > .mtr-val-lime {
    min-width: max-content;
}
.mtr-val { color: #fff; font-weight: 700; letter-spacing: 0.5px; }
.mtr-val-lime {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    min-height: 24px;
    line-height: 1.2;
    white-space: nowrap;
    color: #4ade80;
    font-weight: 900;
    background: rgba(74,222,128,0.08);
    border-radius: 7px;
    padding: 6px 11px;
    overflow: visible;
}
.mtr-invest-block { padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.05); }
.mtr-invest-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    margin-bottom: 6px;
}
.mtr-invest-value {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 26px; font-weight: 900;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mtr-grad-purple-pink { background-image: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end)); }
.mtr-grad-pink-purple { background-image: linear-gradient(90deg, var(--brand-grad-end), var(--brand-grad-mid) 52%, var(--brand-grad-start)); }
.mtr-community-top {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mtr-community-new { text-align: right; }
.mtr-budget-block { padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.05); }
.mtr-budget-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mtr-budget-bar { flex: 1; height: 5px; background: rgba(255,255,255,0.07); border-radius: 999px; overflow: hidden; max-width: 80px; }
.mtr-budget-fill { height: 100%; background: linear-gradient(90deg, #37d77c, #4ade80); box-shadow: 0 0 8px rgba(74,222,128,0.34); border-radius: 999px; width: 0; transition: width 1s ease; }

/* Bottom row */
.mtr-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
}
.mtr-conversion-card {
    position: relative;
    overflow: hidden;
    background: rgba(12,10,16,0.93);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(var(--accent-primary-rgb),0.22);
    border-radius: 18px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 32px;
    box-shadow: 0 0 40px rgba(var(--accent-strong-rgb),0.12), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
}
.mtr-conversion-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.08), rgba(var(--accent-secondary-rgb),0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.mtr-conversion-card > * { position: relative; z-index: 1; }
.mtr-radial-wrap { position: relative; flex-shrink: 0; width: 130px; height: 130px; overflow: visible; }
.mtr-radial-wrap::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74,222,128,0.18) 0%, rgba(var(--accent-primary-rgb),0.12) 38%, rgba(var(--accent-secondary-rgb),0.10) 62%, rgba(var(--accent-secondary-rgb),0) 78%);
    filter: blur(14px);
    pointer-events: none;
    z-index: 0;
}
.mtr-radial { position: relative; z-index: 1; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.mtr-radial-track { stroke: rgba(255,255,255,0.05); }
.mtr-radial-fill { transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1); filter: drop-shadow(0 0 10px rgba(74,222,128,0.28)); }
.mtr-radial-center {
    position: absolute; inset: 0;
    z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.mtr-radial-pct {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 28px; font-weight: 900; color: #fff;
    line-height: 1;
}
.mtr-radial-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-top: 4px;
}
.mtr-conversion-info { flex: 1; }
.mtr-conv-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 22px; font-weight: 900;
    color: #fff; margin: 0 0 10px;
    letter-spacing: -0.3px;
}
.mtr-conv-desc {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px; line-height: 1.6;
    color: rgba(255,255,255,0.80);
    margin: 0 0 14px;
    max-width: 480px;
}
.mtr-conv-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.mtr-conv-tag {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid;
}
.mtr-tag-lime   { background: rgba(74,222,128,0.08); color: #4ade80; border-color: rgba(74,222,128,0.2); }
.mtr-tag-purple { background: rgba(var(--accent-primary-rgb),0.08); color: var(--accent-primary); border-color: rgba(var(--accent-primary-rgb),0.2); }
.mtr-suggestion-card {
    position: relative;
    overflow: hidden;
    background: rgba(12,10,16,0.93);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(var(--accent-primary-rgb),0.22);
    border-radius: 18px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    cursor: default;
    box-shadow: 0 0 40px rgba(var(--accent-strong-rgb),0.12), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
    transition: border-color 0.2s, background 0.2s;
}
.mtr-suggestion-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.08), rgba(var(--accent-secondary-rgb),0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.mtr-suggestion-card > * { position: relative; z-index: 1; }
.mtr-suggestion-card:hover { border-color: rgba(var(--accent-secondary-rgb),0.3); }
.mtr-suggestion-icon {
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.mtr-suggestion-icon .material-symbols-outlined {
    font-size: 40px;
    color: var(--accent-secondary);
    filter: drop-shadow(0 0 12px rgba(var(--accent-secondary-rgb),0.5));
    transition: transform 0.4s;
}
.mtr-suggestion-card:hover .mtr-suggestion-icon .material-symbols-outlined { transform: scale(1.15) rotate(8deg); }
.mtr-suggestion-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 15px; font-weight: 900;
    color: #fff; margin: 0;
}
.mtr-suggestion-text {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; line-height: 1.7;
    color: rgba(255,255,255,0.4);
    margin: 0;
}

/* Footer */
.mtr-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
    gap: 16px;
    flex-wrap: wrap;
}
.mtr-footer-left {
    display: flex; gap: 24px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(255,255,255,0.2);
}
.mtr-footer-status {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 999px;
    padding: 6px 14px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    color: #ffffff;
}
.mtr-status-dot { width: 7px; height: 7px; border-radius: 50%; }
.mtr-status-offline { background: rgba(255,255,255,0.2); }
.mtr-status-online  { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.55); animation: mtrPulse 2s infinite; }

/* Responsive */
@media (max-width: 1024px) {
    .mtr-cards-grid { grid-template-columns: 1fr 1fr; }
    .mtr-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .mtr-cards-grid { grid-template-columns: 1fr; }
    .mtr-title { font-size: 24px; }
    .mtr-header { flex-direction: column; align-items: flex-start; }
    .mtr-conversion-card { flex-direction: column; }
}

/* =============================================================
 * MÉTRICAS — META ADS EXTRAS
 * ============================================================= */

/* Period preset buttons */
.mtr-period-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
    padding: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
}
.mtr-preset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.72);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.7px;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.mtr-preset-btn:hover {
    color: #fff;
    border-color: rgba(var(--accent-primary-rgb),0.2);
    background: rgba(255,255,255,0.045);
    transform: translateY(-1px);
}
.mtr-preset-active {
    background: linear-gradient(135deg, rgba(138, 67, 255, 0.92) 0%, rgba(var(--accent-secondary-rgb), 0.9) 100%) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: 0 10px 24px rgba(var(--accent-secondary-rgb),0.22), 0 0 18px rgba(138,67,255,0.16);
}


.meta-link {
    color: #f2b5ff;
    text-decoration: none;
    font-weight: 700;
}
.meta-link:hover {
    color: #ffd6ff;
    text-decoration: underline;
}

/* Meta connect modal */
.meta-connect-info {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(var(--accent-primary-rgb),0.06);
    border: 1px solid rgba(var(--accent-primary-rgb),0.12);
    border-radius: 12px;
}
.meta-connect-icon { font-size: 28px; flex-shrink: 0; margin-top: 2px; }
.meta-connect-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px;
}
.meta-connect-desc {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px; color: rgba(255,255,255,0.72); line-height: 1.55;
}
.meta-input-hint {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; color: rgba(255,255,255,0.62);
    margin-top: 6px; line-height: 1.55;
}
.meta-token-steps {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 14px 16px;
}
.meta-steps-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.2px;
    color: rgba(255,255,255,0.58); margin-bottom: 10px;
}
.meta-steps-list {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px; color: rgba(255,255,255,0.78);
    line-height: 1.7; padding-left: 18px; margin: 0;
}
.meta-steps-list li { margin-bottom: 3px; }
.meta-steps-list code {
    background: rgba(var(--accent-primary-rgb),0.1);
    border-radius: 4px; padding: 1px 5px;
    color: var(--accent-primary); font-size: 11px;
}

/* ============================================================
 * EXPORT MODAL
 * ============================================================ */
.exp-body {
    padding: 20px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.exp-desc {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,0.80);
    margin: 0;
    line-height: 1.6;
}
.exp-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.exp-option {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.15s;
    text-align: left;
    width: 100%;
}
.exp-option:hover {
    background: rgba(var(--accent-primary-rgb),0.07);
    border-color: rgba(var(--accent-primary-rgb),0.25);
    transform: translateX(3px);
}
.exp-option-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.15), rgba(var(--accent-secondary-rgb),0.1));
    border: 1px solid rgba(var(--accent-primary-rgb),0.2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.exp-option-icon .material-symbols-outlined {
    font-size: 20px;
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.exp-option-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.exp-option-name {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px; font-weight: 700;
    color: #fff;
}
.exp-option-desc {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    color: #ffffff;
    line-height: 1.4;
}
.exp-option-arrow {
    font-size: 18px;
    color: rgba(255,255,255,0.2);
    flex-shrink: 0;
}
.exp-option:hover .exp-option-arrow { color: rgba(var(--accent-primary-rgb),0.6); }

/* Link result */
.exp-link-result {
    background: rgba(var(--accent-primary-rgb),0.05);
    border: 1px solid rgba(var(--accent-primary-rgb),0.18);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: expFadeIn 0.3s ease;
}
@keyframes expFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.exp-link-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--accent-primary);
}
.exp-link-box {
    display: flex;
    gap: 8px;
    align-items: center;
}
.exp-link-input {
    flex: 1;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.exp-link-copy {
    width: 36px; height: 36px;
    border: 1px solid rgba(var(--accent-primary-rgb),0.25);
    border-radius: 8px;
    background: rgba(var(--accent-primary-rgb),0.1);
    color: var(--accent-primary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.exp-link-copy:hover { background: rgba(var(--accent-primary-rgb),0.22); }
.exp-link-copy .material-symbols-outlined { font-size: 16px; }
.exp-link-hint {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    margin: 0;
    line-height: 1.5;
}

/* Print overlay base — logic injected dynamically by JS */
#mtrPrintOverlay {
    display: none;
}

/* ============================================================
 * FEEDBACK — Diário de Campanha
 * ============================================================ */

.fb-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 64px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* Header */
.fb-header { display: flex; flex-direction: column; gap: 8px; }
.fb-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 48px; font-weight: 900;
    color: #fff; margin: 0; line-height: 1;
    letter-spacing: -1px;
}
.fb-title-accent {
    background: linear-gradient(90deg, var(--title-grad-start) 0%, var(--title-grad-mid) 45%, var(--title-grad-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.fb-subtitle {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px; font-weight: 800;
    letter-spacing: 4px; text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    margin: 0;
}

/* Grid */
.fb-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 24px;
    align-items: start;
}
.fb-left  { display: flex; flex-direction: column; gap: 20px; }
.fb-right { display: flex; flex-direction: column; gap: 24px; }

/* Card base */
.fb-card {
    background: rgba(10,10,18,0.56);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}
.fb-card::before {
    content: '';
    position: absolute; inset: -1px;
    border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.18), rgba(var(--accent-secondary-rgb),0.12));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}

/* Rating card */
.fb-rating-card { padding: 32px 32px 28px; }
.fb-card-abs-glow {
    position: absolute; top: -60px; right: -60px;
    width: 200px; height: 200px;
    background: rgba(var(--accent-primary-rgb),0.07);
    border-radius: 50%; filter: blur(60px);
    pointer-events: none;
}
.fb-section-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 15px; font-weight: 800;
    color: #fff; margin: 0 0 24px;
    display: flex; align-items: center; gap: 10px;
}
.fb-star-icon {
    font-size: 20px;
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.fb-stars {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}
.fb-star {
    background: none; border: none; cursor: pointer; padding: 4px;
    transition: transform 0.2s, filter 0.2s;
}
.fb-star .material-symbols-outlined {
    font-size: 44px;
    color: rgba(255,255,255,0.15);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    transition: color 0.2s, filter 0.2s;
}
.fb-star.active .material-symbols-outlined {
    color: var(--accent-primary);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    filter: drop-shadow(0 0 8px rgba(var(--accent-primary-rgb),0.6));
}
.fb-star:hover { transform: scale(1.2); }
.fb-efficiency {
    text-align: center;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px; font-weight: 800;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin: 0;
}

/* Category cards 2x2 */
.fb-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.fb-cat-card { padding: 20px; }
.fb-cat-top {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 14px;
}
.fb-cat-icon { font-size: 22px; }
.fb-icon-purple {
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.fb-icon-pink   { color: var(--accent-secondary); }
.fb-icon-lime   { color: #4ade80; }
.fb-cat-badge {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 3px 8px; border-radius: 5px;
}
.fb-badge-pink   { background: rgba(var(--accent-secondary-rgb),0.12); color: var(--accent-secondary); }
.fb-badge-purple { background: rgba(var(--accent-primary-rgb),0.12); color: var(--accent-primary); }
.fb-badge-lime   { background: rgba(74,222,128,0.08);   color: #4ade80; border: 1px solid rgba(74,222,128,0.18); }
.fb-cat-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px; font-weight: 700;
    color: #fff; margin: 0 0 5px;
}
.fb-cat-desc {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px; color: #ffffff;
    margin: 0 0 14px; line-height: 1.5;
}

/* Sliders */
.fb-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%; height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    outline: none; cursor: pointer;
}
.fb-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%; cursor: pointer;
    transition: transform 0.15s;
}
.fb-slider::-webkit-slider-thumb:hover { transform: scale(1.3); }
.fb-slider-pink::-webkit-slider-thumb  { background: var(--accent-secondary); box-shadow: 0 0 8px rgba(var(--accent-secondary-rgb),0.6); }
.fb-slider-purple::-webkit-slider-thumb { background: var(--accent-primary); box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.6); }
.fb-slider-lime::-webkit-slider-thumb  { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.5); }
.fb-slider-lime::-moz-range-thumb  { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.5); border: none; border-radius: 50%; width: 14px; height: 14px; }

/* Toggle */
.fb-toggle-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.fb-toggle {
    width: 44px; height: 24px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    position: relative; cursor: pointer;
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
    flex-shrink: 0;
}
.fb-toggle.active {
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    border-color: transparent;
    box-shadow: 0 0 12px rgba(var(--accent-primary-rgb),0.45);
}
.fb-toggle-thumb {
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    transition: transform 0.25s, background 0.25s;
}
.fb-toggle.active .fb-toggle-thumb {
    transform: translateX(20px);
    background: #fff;
}
.fb-toggle-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--accent-primary);
}

/* Right column */
.fb-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px; font-weight: 700;
    color: #fff; display: block; margin-bottom: 12px;
}
.fb-textarea-wrap {
    background: rgba(10,10,18,0.56);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s;
}
.fb-textarea-wrap:focus-within {
    border-color: rgba(var(--accent-primary-rgb),0.4);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb),0.08);
}
.fb-textarea {
    width: 100%; min-height: 180px;
    background: transparent;
    border: none; outline: none; resize: vertical;
    padding: 20px 20px 40px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px; line-height: 1.7;
    color: #fff;
    box-sizing: border-box;
}
.fb-textarea::placeholder { color: rgba(255,255,255,0.2); }
.fb-textarea-hint {
    position: absolute; bottom: 12px; right: 14px;
    display: flex; align-items: center; gap: 6px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,0.18);
}
.fb-textarea-hint .material-symbols-outlined { font-size: 14px; }

/* Team */
.fb-team-list { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fb-member {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 6px 14px 6px 6px;
    transition: border-color 0.2s;
}
.fb-member:hover { border-color: rgba(var(--accent-primary-rgb),0.3); }
.fb-member-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.25), rgba(var(--accent-secondary-rgb),0.2));
    border: 1px solid rgba(var(--accent-primary-rgb),0.25);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px; font-weight: 900; color: var(--accent-primary);
    flex-shrink: 0;
}
.fb-avatar-pink {
    background: linear-gradient(135deg, rgba(var(--accent-secondary-rgb),0.2), rgba(var(--accent-secondary-rgb),0.15));
    border-color: rgba(var(--accent-secondary-rgb),0.25); color: var(--accent-secondary);
}
.fb-member-info { display: flex; flex-direction: column; }
.fb-member-name { font-family: 'Argentum Sans', sans-serif; font-size: 12px; font-weight: 700; color: #fff; }
.fb-member-role { font-family: 'Argentum Sans', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.3); }
.fb-member-remove {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.2); padding: 0; margin-left: 4px;
    transition: color 0.15s;
    display: flex; align-items: center;
}
.fb-member-remove:hover { color: var(--accent-secondary); }
.fb-member-remove .material-symbols-outlined { font-size: 14px; }
.fb-add-member {
    display: flex; align-items: center; gap: 8px;
    background: none;
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 999px;
    padding: 6px 14px 6px 6px;
    cursor: pointer;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1.5px;
    color: #ffffff;
    transition: border-color 0.2s, color 0.2s;
}
.fb-add-member:hover { border-color: rgba(var(--accent-primary-rgb),0.4); color: var(--accent-primary); }
.fb-add-icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
}
.fb-add-icon .material-symbols-outlined { font-size: 16px; }

/* Submit */
.fb-submit-area { display: flex; flex-direction: column; gap: 10px; }
.fb-btn-submit {
    width: 100%; padding: 18px;
    border: none; border-radius: 14px;
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px; font-weight: 900;
    letter-spacing: 3px; text-transform: uppercase;
    color: #fff; cursor: pointer;
    box-shadow: 0 0 28px rgba(var(--accent-primary-rgb),0.35);
    transition: box-shadow 0.2s, transform 0.15s, filter 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.fb-btn-submit:hover {
    box-shadow: 0 0 42px rgba(var(--accent-primary-rgb),0.55);
    filter: saturate(1.2); transform: translateY(-1px);
}
.fb-btn-submit:active { transform: scale(0.98); }
.fb-btn-submit .material-symbols-outlined { font-size: 20px; transition: transform 0.2s; }
.fb-btn-submit:hover .material-symbols-outlined { transform: translateX(3px); }
.fb-submit-hint {
    text-align: center;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(255,255,255,0.2); margin: 0;
    transition: color 0.3s;
}
.fb-submit-hint.sent { color: #4ade80; }

/* Footer */
.fb-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.04);
    opacity: 0.3;
    transition: opacity 0.4s;
}
.fb-footer:hover { opacity: 1; }
.fb-footer-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(255,255,255,0.4); display: block; margin-bottom: 3px;
}
.fb-footer-value {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; font-weight: 900; color: #fff;
}
.fb-footer-divider {
    height: 24px; width: 120px;
    background: linear-gradient(to right, transparent, rgba(var(--accent-primary-rgb),0.15), transparent);
    filter: blur(2px);
}

/* Responsive */
@media (max-width: 960px) {
    .fb-grid { grid-template-columns: 1fr; }
    .fb-title { font-size: 36px; }
}
@media (max-width: 560px) {
    .fb-categories { grid-template-columns: 1fr; }
}

/* ── FB Role Picker Popover ─────────────────────────── */
.fb-role-picker {
    position: absolute;
    z-index: 9999;
    background: #16101f;
    border: 1px solid rgba(var(--accent-primary-rgb),0.2);
    border-radius: 14px;
    padding: 10px;
    width: 230px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(var(--accent-primary-rgb),0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.fb-role-picker.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}
.fb-role-picker-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-transform: uppercase;
    padding: 4px 8px 8px;
}
.fb-role-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fb-role-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.fb-role-option:hover {
    background: rgba(var(--accent-primary-rgb),0.12);
    color: #fff;
}
.fb-role-icon {
    font-size: 17px;
    color: rgba(var(--accent-primary-rgb),0.7);
}
.fb-role-custom {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 4px 2px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 6px;
}
.fb-role-input {
    flex: 1;
    font-size: 12px !important;
    padding: 8px 10px !important;
}

/* ============================================================
 * PROJEÇÃO DE INVESTIMENTOS — tabProjection
 * ============================================================ */

.prj-wrapper {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 0 64px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    font-family: 'Argentum Sans', sans-serif;
}

/* Scale down everything except the title */
.prj-grid,
.prj-left,
.prj-right {
    font-size: 0.82em;
}

/* Header */
.prj-header { display: flex; flex-direction: column; gap: 8px; }
.prj-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 38px; font-weight: 700;
    color: #fff; margin: 0; line-height: 1.05;
    letter-spacing: -0.5px;
}
.prj-title-accent {
    background: linear-gradient(90deg, var(--title-grad-start) 0%, var(--title-grad-mid) 45%, var(--title-grad-end) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.prj-subtitle {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px; color: rgba(255,255,255,0.38);
    margin: 0; max-width: 640px; line-height: 1.6;
}

/* Grid */
.prj-grid {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 14px;
    align-items: start;
}
.prj-left  { display: flex; flex-direction: column; gap: 12px; }
.prj-right { display: flex; flex-direction: column; gap: 12px; }

/* Card base */
.prj-card {
    position: relative;
    background: rgba(12,10,16,0.93);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(var(--accent-primary-rgb),0.22);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(var(--accent-strong-rgb),0.12), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
}
.prj-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.08), rgba(var(--accent-secondary-rgb),0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.prj-card > * { position: relative; z-index: 1; }

/* Inputs card */
.prj-inputs-card { padding: 24px 24px 28px; }
.prj-inputs-head {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px; font-weight: 800;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: #fff; margin-bottom: 22px;
}
.prj-tune-icon {
    font-size: 18px;
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.prj-fields { display: flex; flex-direction: column; gap: 18px; }
.prj-field  { display: flex; flex-direction: column; gap: 6px; }
.prj-field-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    color: #ffffff;
}
.prj-field-input {
    background: rgba(255,255,255,0.04);
    border: none;
    border-bottom: 2px solid rgba(255,255,255,0.08);
    border-radius: 0;
    padding: 8px 12px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 16px; font-weight: 700;
    color: #ffffff; outline: none; width: 100%;
    caret-color: #ffffff;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.prj-field-input::placeholder { color: rgba(255,255,255,0.18); font-size: 15px; }
.prj-field-input:focus { border-bottom-color: var(--accent-primary); }
.prj-field-hint {
    font-size: 10px; font-weight: 500;
    color: rgba(var(--accent-primary-rgb),0.5);
    margin-top: 4px; letter-spacing: 0.3px;
}
.prj-slider-row { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.prj-slider {
    -webkit-appearance: none; appearance: none;
    flex: 1; height: 4px; border-radius: 999px;
    background: rgba(255,255,255,0.08); outline: none; cursor: pointer;
}
.prj-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    box-shadow: 0 0 10px rgba(var(--accent-primary-rgb),0.6);
    cursor: pointer; transition: transform 0.15s;
}
.prj-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }
.prj-slider-val {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px; font-weight: 800; color: #fff;
    min-width: 52px; text-align: right;
}
.prj-btn-calc {
    margin-top: 20px; width: 100%; padding: 14px;
    border: none; border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; font-weight: 900;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: #fff; cursor: pointer;
    box-shadow: 0 0 24px rgba(var(--accent-primary-rgb),0.3);
    transition: box-shadow 0.2s, transform 0.15s, filter 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.prj-btn-calc:hover {
    box-shadow: 0 0 38px rgba(var(--accent-primary-rgb),0.5);
    filter: saturate(1.2); transform: translateY(-1px);
}
.prj-btn-calc .material-symbols-outlined { font-size: 18px; }

/* Strategic insight card */
.prj-insight-card { padding: 28px; }
.prj-insight-head {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; font-weight: 800;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: #4ade80; margin-bottom: 18px;
}
.prj-insight-icon { font-size: 18px; color: #4ade80; }
.prj-insights-list { display: flex; flex-direction: column; gap: 14px; }
.prj-insight-item {
    display: block;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; color: rgba(255,255,255,0.55);
    line-height: 1.65;
    padding: 12px 14px;
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}
.prj-insight-item::before {
    content: '•';
    color: #4ade80;
    position: absolute;
    left: 14px; top: 12px;
    line-height: 1.65;
}
.prj-insight-item { padding-left: 22px; }
.prj-insight-item strong { color: #fff; }
.prj-insight-box {
    background: rgba(74,222,128,0.06);
    border: 1px solid rgba(74,222,128,0.2);
    border-radius: 10px; padding: 12px 14px; margin-top: 4px;
}
.prj-insight-box-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    color: #4ade80; margin-bottom: 4px;
}
.prj-insight-box-text {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; color: rgba(255,255,255,0.7);
    line-height: 1.5; margin: 0;
}
.prj-insight-empty {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px; color: rgba(255,255,255,0.80);
    line-height: 1.6; margin: 0;
}
.prj-insight-empty strong { color: rgba(255,255,255,0.80); }

/* Bento grid */
.prj-bento {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
}
.prj-bento-fat  { grid-column: 1 / 3; padding: 24px 24px 20px; }
.prj-bento-roas { grid-column: 3 / 4; padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.prj-bento-invest { padding: 20px 20px 22px; }
.prj-bento-msg    { padding: 20px 20px 22px; }
.prj-bento-lucro  { padding: 20px 20px 22px; background: rgba(var(--accent-primary-rgb),0.04); }

.prj-bento-glow {
    position: absolute; top: -40px; right: -40px;
    width: 150px; height: 150px; border-radius: 50%;
    filter: blur(50px); pointer-events: none;
}
.prj-bento-glow-pink { background: rgba(var(--accent-secondary-rgb),0.12); }

.prj-bento-eyebrow {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; font-weight: 800;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: rgba(255,255,255,0.85); margin-bottom: 10px;
}
.prj-bento-big {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 28px; font-weight: 900; color: #4ade80;
    letter-spacing: -1px; line-height: 1;
}
.prj-bento-med {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 16px; font-weight: 900; color: #4ade80; line-height: 1;
}
.prj-bento-trend {
    display: flex; align-items: center; gap: 6px; margin-top: 14px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; color: #4ade80;
}
.prj-bento-trend .material-symbols-outlined { font-size: 14px; }
.prj-bento-roas-icon {
    width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid rgba(var(--accent-primary-rgb),0.2);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
    transition: background 0.2s;
}
.prj-bento-roas-icon:hover { background: rgba(var(--accent-primary-rgb),0.1); }
.prj-bento-roas-icon .material-symbols-outlined {
    font-size: 20px;
    color: #4ade80;
}
.prj-bento-roas-val {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 26px; font-weight: 900;
    color: #4ade80;
}
.prj-invest-bar {
    height: 3px; background: rgba(255,255,255,0.07);
    border-radius: 999px; overflow: hidden; margin-top: 14px;
}
.prj-invest-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.5);
    transition: width 0.9s cubic-bezier(0.4,0,0.2,1);
}
.prj-invest-pct {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(255,255,255,0.80); margin: 10px 0 0;
}
.prj-bento-sub {
    display: flex; align-items: center; gap: 6px; margin-top: 14px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px; color: rgba(255,255,255,0.80);
}
.prj-bento-sub .material-symbols-outlined { font-size: 13px; }
.prj-lucro-val {
    color: #4ade80;
}
.prj-lucro-sub {
    color: #4ade80;
    font-size: 13px !important;
    font-weight: 700;
}
.prj-lucro-sub .material-symbols-outlined {
    font-size: 17px !important;
    color: #4ade80;
}

/* Chart */
.prj-chart-card { padding: 22px 22px 18px; }
.prj-chart-head {
    display: flex; justify-content: space-between;
    align-items: flex-start; margin-bottom: 16px;
}
.prj-chart-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.prj-chart-sub {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(255,255,255,0.80); margin: 0;
}
.prj-chart-dots { display: flex; gap: 6px; align-items: center; }
.prj-dot { width: 8px; height: 8px; border-radius: 50%; }
.prj-dot-purple { background: var(--accent-primary); box-shadow: 0 0 6px rgba(var(--accent-primary-rgb),0.7); }
.prj-dot-pink   { background: var(--accent-secondary); box-shadow: 0 0 6px rgba(var(--accent-secondary-rgb),0.6); }
.prj-dot-lime   { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.5); }
.prj-chart-area { position: relative; }
.prj-chart-svg { width: 100%; height: 130px; display: block; overflow: visible; }
.prj-chart-labels {
    display: flex; justify-content: space-between;
    padding: 8px 4px 0;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 600;
    color: rgba(255,255,255,0.2);
}

#prjDotA,
#prjDotB,
#prjDotC {
    fill: #ffffff !important;
    stroke: none !important;
    filter: none !important;
}

/* Secondary row */
.prj-secondary { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.prj-secondary-stack { display: flex; flex-direction: column; gap: 12px; }
.prj-insight-card { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.prj-insight-card-small { padding: 22px; gap: 10px; }
.prj-insight-card-wide .prj-insights-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.prj-sec-card {
    padding: 20px 24px 22px;
    display: flex; justify-content: space-between; align-items: center;
}
.prj-sec-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,0.3); margin-bottom: 6px;
}
.prj-sec-val {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 16px; font-weight: 800; color: #4ade80;
}
.prj-sec-badge {
    display: flex; align-items: center; gap: 4px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; font-weight: 700;
}
.prj-sec-badge .material-symbols-outlined { font-size: 14px; }
.prj-badge-down { color: var(--accent-secondary); }
.prj-badge-ok   { color: #4ade80; }

/* Animate big number */
@keyframes prjPop {
    0%  { transform: scale(0.88); opacity: 0; }
    100%{ transform: scale(1);    opacity: 1; }
}
.prj-pop { animation: prjPop 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* Responsive */
@media (max-width: 1060px) {
    .prj-grid { grid-template-columns: 1fr; }
    .prj-title { font-size: 30px; }
}
@media (max-width: 680px) {
    .prj-bento { grid-template-columns: 1fr 1fr; }
    .prj-bento-fat { grid-column: 1 / 3; }
    .prj-bento-roas { grid-column: 1 / 2; }
    .prj-secondary { grid-template-columns: 1fr; }
}

/* =============================================================
 * PÁGINA MEU PLANO — ORBITAL EDITION
 * ============================================================= */

/* Stars canvas */
.plans-stars-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.plans-wrapper {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 30px 40px;
}

/* Nebula glows */
.plans-bg-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(100px);
    z-index: 0;
}
.plans-glow-purple {
    width: 600px; height: 600px;
    top: -150px; left: -200px;
    background: radial-gradient(circle, rgba(var(--accent-strong-rgb),0.22) 0%, transparent 65%);
    animation: plansGlowPulse 6s ease-in-out infinite alternate;
}
.plans-glow-pink {
    width: 500px; height: 500px;
    top: 80px; right: -120px;
    background: radial-gradient(circle, rgba(var(--accent-secondary-rgb),0.16) 0%, transparent 65%);
    animation: plansGlowPulse 8s ease-in-out infinite alternate-reverse;
}
.plans-glow-blue {
    width: 350px; height: 350px;
    bottom: 100px; left: 30%;
    background: radial-gradient(circle, rgba(var(--accent-strong-rgb),0.10) 0%, transparent 65%);
    animation: plansGlowPulse 10s ease-in-out infinite alternate;
}
@keyframes plansGlowPulse {
    from { opacity: 0.6; transform: scale(1); }
    to   { opacity: 1;   transform: scale(1.12); }
}

/* Hero */
.plans-hero {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 32px;
}
.plans-hero-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(var(--accent-secondary-rgb),0.9);
    margin-bottom: 18px;
    text-shadow: 0 0 20px rgba(var(--accent-secondary-rgb),0.5);
}
.plans-eyebrow-dot {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent-secondary);
    box-shadow: 0 0 10px var(--accent-secondary), 0 0 20px rgba(var(--accent-secondary-rgb),0.5);
}
/* Title */
.plans-title-wrap {
    position: relative;
    display: block;
    margin-bottom: 16px;
}
.plans-hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(42px, 7vw, 72px);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1.05;
    color: #fff;
    margin: 0 0 16px;
}
.plans-title-accent {
    background: linear-gradient(90deg, var(--title-grad-start) 0%, var(--title-grad-mid) 45%, var(--title-grad-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.plans-title-accent {
    /* coloring handled by constellation canvas background-clip */
}
.plans-hero-sub {
    font-size: 15px;
    color: rgba(255,255,255,0.4);
    max-width: 500px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

/* Toggle */
.plans-toggle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.plans-toggle-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}
.plans-save-badge {
    font-size: 10px;
    font-weight: 700;
    background: rgba(74,222,128,0.1);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.22);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
}
.plans-toggle-btn {
    width: 50px; height: 28px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    cursor: pointer;
    position: relative;
    transition: background 0.25s, border-color 0.25s;
}
.plans-toggle-btn[aria-checked="true"] {
    background: rgba(var(--accent-secondary-rgb),0.2);
    border-color: rgba(var(--accent-secondary-rgb),0.35);
}
.plans-toggle-thumb {
    position: absolute;
    top: 4px; left: 4px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    box-shadow: 0 0 10px rgba(var(--accent-secondary-rgb),0.6);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.plans-toggle-btn[aria-checked="true"] .plans-toggle-thumb { transform: translateX(22px); }

/* Grid */
.plans-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
    margin-bottom: 70px;
}

/* Card base */
.plans-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 22px;
    padding: 34px 28px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.plans-card:hover {
    border-color: rgba(var(--accent-primary-rgb),0.35);
    box-shadow: 0 0 50px rgba(var(--accent-strong-rgb),0.2);
    transform: translateY(-8px) scale(1.02);
}

/* Orbit ring decoration */
.plans-card-orbit-ring {
    position: absolute;
    top: -60px; right: -60px;
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-primary-rgb),0.1);
    pointer-events: none;
}
.plans-card-orbit-ring::after {
    content: '';
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-primary-rgb),0.06);
}
.plans-orbit-pink {
    border-color: rgba(var(--accent-secondary-rgb),0.12);
}
.plans-orbit-pink::after {
    border-color: rgba(var(--accent-secondary-rgb),0.07);
}

/* Featured card */
.plans-card-featured {
    border: 1.5px solid rgba(var(--accent-primary-rgb),0.45);
    background: rgba(var(--accent-primary-rgb),0.04);
    box-shadow: 0 0 40px rgba(var(--accent-primary-rgb),0.1);
}
.plans-card-featured:hover {
    border-color: rgba(var(--accent-primary-rgb),0.7);
    box-shadow: 0 0 70px rgba(var(--accent-primary-rgb),0.25);
    transform: translateY(-8px) scale(1.02);
}
.plans-card-glow {
    position: absolute;
    top: -80px; left: -80px;
    width: 220px; height: 220px;
    background: rgba(var(--accent-primary-rgb),0.12);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    animation: plansGlowPulse 4s ease-in-out infinite alternate;
}

/* Badge */
.plans-card-badge {
    position: absolute;
    top: 0; right: 0;
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 0 20px 0 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 0 16px rgba(var(--accent-secondary-rgb),0.4);
}
.plans-card-badge-pink {
    background: linear-gradient(90deg, #c0005a, #ff4fa3);
    box-shadow: 0 0 16px rgba(255,79,163,0.45);
}

.plans-card-cosmic {
    border-color: rgba(var(--accent-secondary-rgb),0.25);
    background: rgba(var(--accent-secondary-rgb),0.03);
}
.plans-card-cosmic:hover {
    border-color: rgba(var(--accent-secondary-rgb),0.5);
    box-shadow: 0 0 50px rgba(var(--accent-secondary-rgb),0.18);
    transform: translateY(-8px) scale(1.02);
}

.plans-price-pink-solid { color: var(--accent-secondary); }

.plans-card-tier {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    margin-bottom: 6px;
}
.plans-card-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}
.plans-card-tagline {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.28);
    letter-spacing: 0.5px;
    margin-bottom: 18px;
    text-transform: uppercase;
}
.plans-card-price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 16px;
}
.plans-card-price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 38px;
    font-weight: 700;
    color: var(--accent-primary);
    line-height: 1;
}
.plans-price-gradient {
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.plans-price-pink { color: var(--accent-secondary); font-size: 28px; }
.plans-card-period {
    font-size: 13px;
    color: rgba(255,255,255,0.3);
}
.plans-btn-cosmic {
    width: 100%; padding: 14px;
    background: linear-gradient(90deg, #a0003a, var(--accent-secondary));
    border: none; border-radius: 12px;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer; letter-spacing: 0.5px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 0 20px rgba(var(--accent-secondary-rgb),0.28);
    transition: box-shadow 0.2s, transform 0.15s;
}
.plans-btn-cosmic:hover {
    box-shadow: 0 0 36px rgba(var(--accent-secondary-rgb),0.5);
    transform: translateY(-2px);
}
.plans-card-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.38);
    line-height: 1.65;
    margin-bottom: 24px;
    min-height: 52px;
}

/* Features */
.plans-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 28px;
    flex: 1;
}
.plans-feature-on, .plans-feature-off {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.plans-feature-on { color: rgba(255,255,255,0.72); }
.plans-feature-on .material-symbols-outlined { font-size: 16px; color: var(--accent-primary); flex-shrink: 0; }
.plans-feature-pro .material-symbols-outlined { color: var(--accent-secondary); }
.plans-feature-cosmic .material-symbols-outlined { color: var(--accent-secondary); }
.plans-feature-off { color: rgba(255,255,255,0.18); }
.plans-feature-off .material-symbols-outlined { font-size: 16px; color: rgba(255,255,255,0.12); flex-shrink: 0; }

/* Buttons */
.plans-btn-ghost {
    width: 100%; padding: 14px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer; letter-spacing: 0.5px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.plans-btn-ghost:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
}
.plans-btn-ghost-pink:hover {
    border-color: rgba(var(--accent-secondary-rgb),0.35);
    background: rgba(var(--accent-secondary-rgb),0.06);
    color: var(--accent-secondary);
}
.plans-btn-primary {
    width: 100%; padding: 14px;
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    border: none; border-radius: 12px;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer; letter-spacing: 0.5px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 0 24px rgba(var(--accent-secondary-rgb),0.35);
    transition: box-shadow 0.2s, transform 0.15s;
}
.plans-btn-primary:hover {
    box-shadow: 0 0 40px rgba(var(--accent-secondary-rgb),0.55);
    transform: translateY(-2px);
}

.plans-card-current {
    position: relative;
    border-color: rgba(255,255,255,0.16) !important;
    box-shadow: 0 0 40px rgba(var(--accent-secondary-rgb), 0.14);
}
.plans-card-current::after {
    content: 'PLANO ATIVO';
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    color: #fff;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 8px 24px rgba(var(--accent-secondary-rgb), 0.22);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 2;
}
.plans-card-current .plans-card-tier {
    margin-top: 28px;
}
.plans-btn-current,
.plans-btn-current:hover {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03) !important;
    transform: none !important;
}
.plans-btn-current {
    cursor: default;
    opacity: 0.96;
}
.plans-btn-current .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

/* Tabela */
.plans-compare { position: relative; z-index: 1; }
.plans-compare-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px; font-weight: 700;
    color: #fff; text-align: center;
    margin-bottom: 32px;
}
.plans-table-wrap {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.015);
}
.plans-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.plans-th-feature, .plans-th {
    padding: 18px 28px;
    font-size: 10px; font-weight: 800;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: rgba(255,255,255,0.25); text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.plans-th-feature { text-align: left; }
.plans-th-pro { color: var(--accent-primary); }
.plans-tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
}
.plans-tr:hover { background: rgba(255,255,255,0.02); }
.plans-tr:last-child { border-bottom: none; }
.plans-td-feature { padding: 20px 22px; }
.plans-td {
    padding: 20px 22px; text-align: center;
    color: rgba(255,255,255,0.5);
}
.plans-td-pro { color: var(--accent-primary); font-weight: 700; }
.plans-td-title { font-weight: 700; color: rgba(255,255,255,0.8); margin-bottom: 3px; }
.plans-td-sub { font-size: 11px; color: rgba(255,255,255,0.28); }
.plans-td .material-symbols-outlined { font-size: 18px; color: var(--accent-primary); }
.plans-td-off { color: rgba(255,255,255,0.12) !important; }

@media (max-width: 900px) {
    .plans-grid { grid-template-columns: 1fr; }
    .plans-hero-title { font-size: 38px; }
}

/* =============================================================
 * TEMA CLARO — Aba Meu Plano
 * ============================================================= */

/* Fundo da página */
body.theme-light .account-page { background: var(--accent-light-bg-2); }
body.theme-light .account-page-header { border-bottom-color: rgba(var(--accent-strong-rgb),0.12); }
body.theme-light .client-page-back { color: rgba(var(--accent-readable-rgb),0.45); }
body.theme-light .client-page-back:hover { color: var(--text-primary); background: rgba(var(--accent-readable-rgb),0.06); }

/* Glows decorativos mais sutis */
body.theme-light .plans-bg-glow { opacity: 0.18; }

/* Hero */
body.theme-light .plans-hero-eyebrow { text-shadow: none; }
body.theme-light .plans-hero-title   { color: var(--text-primary); }
body.theme-light .plans-hero-sub     { color: rgba(var(--accent-readable-rgb),0.50); }

/* Toggle */
body.theme-light .plans-toggle-label { color: rgba(var(--accent-readable-rgb),0.55); }
body.theme-light .plans-toggle-btn   { background: rgba(var(--accent-readable-rgb),0.07); border-color: rgba(var(--accent-readable-rgb),0.15); }

/* Card base — todos ficam sólidos brancos */
body.theme-light .plans-card {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.16);
    box-shadow: 0 4px 20px rgba(var(--accent-strong-rgb),0.10);
}
body.theme-light .plans-card:hover {
    border-color: rgba(var(--accent-strong-rgb),0.38);
    box-shadow: 0 8px 36px rgba(var(--accent-strong-rgb),0.18);
}

/* Card destaque (Pro) */
body.theme-light .plans-card-featured {
    background: #fdf8ff;
    border-color: rgba(var(--accent-strong-rgb),0.40) !important;
    box-shadow: 0 6px 32px rgba(var(--accent-strong-rgb),0.16) !important;
}
body.theme-light .plans-card-featured:hover {
    border-color: rgba(var(--accent-strong-rgb),0.60) !important;
    box-shadow: 0 12px 48px rgba(var(--accent-strong-rgb),0.24) !important;
}

/* Card Cosmic */
body.theme-light .plans-card-cosmic {
    background: #fff8fb;
    border-color: rgba(var(--accent-secondary-rgb),0.28) !important;
    box-shadow: 0 6px 32px rgba(var(--accent-secondary-rgb),0.12) !important;
}
body.theme-light .plans-card-cosmic:hover {
    border-color: rgba(var(--accent-secondary-rgb),0.50) !important;
    box-shadow: 0 12px 48px rgba(var(--accent-secondary-rgb),0.20) !important;
}

/* Card ativo */
body.theme-light .plans-card-current { border-color: rgba(var(--accent-readable-rgb),0.18) !important; }
body.theme-light .plans-btn-current,
body.theme-light .plans-btn-current:hover {
    background: rgba(var(--accent-readable-rgb),0.07) !important;
    border-color: rgba(var(--accent-readable-rgb),0.14) !important;
    color: rgba(var(--accent-readable-rgb),0.60) !important;
    box-shadow: none !important;
}

/* Textos internos dos cards */
body.theme-light .plans-card-tier    { color: rgba(var(--accent-readable-rgb),0.32); }
body.theme-light .plans-card-name    { color: var(--text-primary); }
body.theme-light .plans-card-tagline { color: rgba(var(--accent-readable-rgb),0.38); }
body.theme-light .plans-card-period  { color: rgba(var(--accent-readable-rgb),0.38); }
body.theme-light .plans-card-desc    { color: rgba(var(--accent-readable-rgb),0.50); }
body.theme-light .plans-feature-on  { color: rgba(var(--accent-readable-rgb),0.78); }
body.theme-light .plans-feature-off { color: rgba(var(--accent-readable-rgb),0.24); }
body.theme-light .plans-feature-off .material-symbols-outlined { color: rgba(var(--accent-readable-rgb),0.18); }

/* Orbit rings */
body.theme-light .plans-card-orbit-ring { border-color: rgba(var(--accent-strong-rgb),0.12); }
body.theme-light .plans-card-orbit-ring::after { border-color: rgba(var(--accent-strong-rgb),0.07); }
body.theme-light .plans-orbit-pink { border-color: rgba(var(--accent-secondary-rgb),0.14); }
body.theme-light .plans-orbit-pink::after { border-color: rgba(var(--accent-secondary-rgb),0.08); }

/* Botão ghost */
body.theme-light .plans-btn-ghost {
    border-color: rgba(var(--accent-readable-rgb),0.16);
    color: rgba(var(--accent-readable-rgb),0.65);
}
body.theme-light .plans-btn-ghost:hover {
    background: rgba(var(--accent-readable-rgb),0.05);
    border-color: rgba(var(--accent-readable-rgb),0.28);
    color: var(--text-primary);
}

/* Tabela comparativa */
body.theme-light .plans-compare-title { color: var(--text-primary); }
body.theme-light .plans-table-wrap {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.14);
}
body.theme-light .plans-th-feature,
body.theme-light .plans-th          { color: rgba(var(--accent-readable-rgb),0.32); border-bottom-color: rgba(var(--accent-readable-rgb),0.08); }
body.theme-light .plans-tr          { border-bottom-color: rgba(var(--accent-readable-rgb),0.05); }
body.theme-light .plans-tr:hover    { background: rgba(var(--accent-strong-rgb),0.03); }
body.theme-light .plans-td          { color: rgba(var(--accent-readable-rgb),0.55); }
body.theme-light .plans-td-title    { color: rgba(var(--accent-readable-rgb),0.85); }
body.theme-light .plans-td-sub      { color: rgba(var(--accent-readable-rgb),0.38); }
body.theme-light .plans-td-off      { color: rgba(var(--accent-readable-rgb),0.16) !important; }

/* =============================================================
 * PÁGINA CALENDÁRIO
 * ============================================================= */

.cal-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 30px 30px;
}

/* Nebula glows */
.cal-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(100px);
    z-index: 0;
}
.cal-glow-purple {
    width: 600px; height: 500px;
    top: -120px; left: -150px;
    background: radial-gradient(circle, rgba(var(--accent-strong-rgb),0.2) 0%, transparent 70%);
    animation: plansGlowPulse 7s ease-in-out infinite alternate;
}
.cal-glow-pink {
    width: 450px; height: 400px;
    top: 150px; right: -100px;
    background: radial-gradient(circle, rgba(var(--accent-secondary-rgb),0.13) 0%, transparent 70%);
    animation: plansGlowPulse 9s ease-in-out infinite alternate-reverse;
}

/* Hero header */
.cal-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
}
.cal-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: rgba(var(--accent-secondary-rgb),0.9);
    margin-bottom: 14px;
    text-shadow: 0 0 18px rgba(var(--accent-secondary-rgb),0.45);
}
.cal-eyebrow-dot {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent-secondary);
    box-shadow: 0 0 10px var(--accent-secondary), 0 0 20px rgba(var(--accent-secondary-rgb),0.4);
}
.cal-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(42px, 6vw, 62px);
    font-weight: 700;
    letter-spacing: -2px;
    color: #fff;
    line-height: 1.05;
    margin-bottom: 8px;
}
.cal-title-accent {
    background: linear-gradient(90deg, var(--title-grad-start) 0%, var(--title-grad-mid) 45%, var(--title-grad-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cal-subtitle {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
}

/* Month nav buttons */
.cal-nav { display: flex; gap: 8px; padding-bottom: 8px; }
.cal-nav-btn {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.cal-nav-btn:hover {
    background: rgba(var(--accent-primary-rgb),0.1);
    border-color: rgba(var(--accent-primary-rgb),0.3);
    color: var(--accent-primary);
    box-shadow: 0 0 14px rgba(var(--accent-primary-rgb),0.15);
}

/* Main two-column layout */
.cal-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    margin-bottom: 24px;
}

/* Calendar grid container */
.cal-grid-wrap {
    background: rgba(255,255,255,0.02);
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    /* glowing gradient border */
    border: 1.5px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 0 0 1.5px rgba(var(--accent-primary-rgb),0.35),
        0 0 25px rgba(var(--accent-primary-rgb),0.12),
        0 0 60px rgba(var(--accent-secondary-rgb),0.08),
        inset 0 0 30px rgba(var(--accent-strong-rgb),0.04);
}
.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 16px 0;
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    box-shadow: 0 4px 20px rgba(var(--accent-secondary-rgb),0.2);
}
.cal-weekdays span {
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 0 12px rgba(255,255,255,0.2);
    -webkit-text-fill-color: rgba(255,255,255,0.92);
    background: none;
    filter: none;
}
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.cal-cell {
    min-height: 88px;
    padding: 10px;
    border: 0.5px solid rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background 0.18s;
    position: relative;
}
.cal-cell:hover { background: rgba(255,255,255,0.03); }
.cal-cell.cal-other-month .cal-cell-num { opacity: 0.18; }
.cal-cell.cal-today {
    background: rgba(var(--accent-primary-rgb),0.06);
    border-color: rgba(var(--accent-primary-rgb),0.18);
}
.cal-cell.cal-today .cal-cell-num {
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}
.cal-cell.cal-selected {
    background: rgba(var(--accent-secondary-rgb),0.07);
    border-color: rgba(var(--accent-secondary-rgb),0.25);
    box-shadow: inset 0 0 20px rgba(var(--accent-secondary-rgb),0.05);
}
.cal-cell-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    margin-bottom: 6px;
    display: inline-block;
}
.cal-cell-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}
.cal-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cal-dot-urgente   { background: var(--accent-secondary); box-shadow: 0 0 5px rgba(var(--accent-secondary-rgb),0.7); }
.cal-dot-atencao   { background: #ffaa00; box-shadow: 0 0 5px rgba(255,170,0,0.6); }
.cal-dot-normal    { background: var(--accent-primary); box-shadow: 0 0 5px rgba(var(--accent-primary-rgb),0.5); }
.cal-dot-concluido { background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,0.5); }
.cal-dot-atrasado  { background: #ff5050; box-shadow: 0 0 5px rgba(255,80,80,0.6); }
.cal-dot-pendente  { background: var(--accent-primary); box-shadow: 0 0 5px rgba(var(--accent-primary-rgb),0.5); }
/* Quantity-based dots: 1-2=blue, 3-5=orange, 6+=red */
.cal-dot-qty-blue   { background: #60a5fa; box-shadow: 0 0 7px rgba(96,165,250,0.8); width: 8px; height: 8px; }
.cal-dot-qty-orange { background: #ffaa00; box-shadow: 0 0 7px rgba(255,170,0,0.8);  width: 8px; height: 8px; }
.cal-dot-qty-red    { background: #ff5050; box-shadow: 0 0 7px rgba(255,80,80,0.9);  width: 8px; height: 8px; }
.cal-dot-count {
    font-size: 10px; font-weight: 800;
    color: rgba(255,255,255,0.5);
    line-height: 1;
    margin-left: 2px;
}
/* Ir pra tarefa button */
.cal-btn-goto {
    display: flex; align-items: center; gap: 6px;
    margin-top: 10px; width: 100%; padding: 8px 14px;
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    border: none; border-radius: 10px;
    color: #fff; font-family: 'Argentum Sans', sans-serif;
    font-size: 11px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(var(--accent-secondary-rgb),0.3);
    transition: box-shadow 0.2s, transform 0.15s;
    justify-content: center;
}
.cal-btn-goto:hover {
    box-shadow: 0 0 24px rgba(var(--accent-secondary-rgb),0.55);
    transform: translateY(-1px);
}

/* Agenda side panel */
.cal-agenda {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 540px;
}
.cal-agenda-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: rgba(255,255,255,0.18);
    padding: 40px 24px;
    text-align: center;
}
.cal-agenda-empty .material-symbols-outlined { font-size: 44px; opacity: 0.25; }
.cal-agenda-empty p { font-size: 13px; line-height: 1.6; }

.cal-agenda-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}
.cal-agenda-header {
    padding: 20px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    background: rgba(255,255,255,0.01);
}
.cal-agenda-date-label {
    font-size: 10px; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(var(--accent-secondary-rgb),0.85);
    margin-bottom: 3px;
}
.cal-agenda-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px; font-weight: 700; color: #fff;
}
.cal-agenda-count {
    font-size: 11px; font-weight: 800;
    background: linear-gradient(90deg, rgba(var(--accent-strong-rgb),0.25), rgba(var(--accent-secondary-rgb),0.2));
    color: var(--accent-primary);
    border: 1px solid rgba(var(--accent-primary-rgb),0.25);
    padding: 3px 12px;
    border-radius: 20px;
}
.cal-agenda-list {
    overflow-y: auto;
    min-height: 0;
    padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-primary-rgb),0.25) transparent;
}
.cal-agenda-list::-webkit-scrollbar { width: 4px; }
.cal-agenda-list::-webkit-scrollbar-track { background: transparent; }
.cal-agenda-list::-webkit-scrollbar-thumb { background: rgba(var(--accent-primary-rgb),0.25); border-radius: 999px; }

/* Task cards in agenda */
.cal-task-card {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0; /* never compress — scroll instead */
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.cal-task-card:hover {
    border-color: rgba(var(--accent-primary-rgb),0.35);
    box-shadow: 0 10px 30px -10px rgba(var(--accent-primary-rgb),0.15);
    transform: translateY(-2px);
}
.cal-task-card-body {
    padding: 12px 14px 14px;
}
.cal-task-top {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}
.cal-task-client {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}
.cal-task-badge {
    font-size: 9px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; padding: 2px 8px; border-radius: 6px;
    flex-shrink: 0;
}
.cal-badge-urgente  { background: rgba(var(--accent-secondary-rgb),0.14); color: var(--accent-secondary); border: 1px solid rgba(var(--accent-secondary-rgb),0.22); }
.cal-badge-atencao  { background: rgba(255,170,0,0.1);   color: #ffaa00; border: 1px solid rgba(255,170,0,0.2); }
.cal-badge-normal   { background: rgba(var(--accent-primary-rgb),0.1); color: var(--accent-primary); border: 1px solid rgba(var(--accent-primary-rgb),0.18); }
.cal-badge-concluido{ background: rgba(74,222,128,0.1);  color: #4ade80; border: 1px solid rgba(74,222,128,0.18); }
.cal-badge-atrasado { background: rgba(255,80,80,0.1);   color: #ff5050; border: 1px solid rgba(255,80,80,0.22); }
.cal-badge-custom   { background: rgba(100,180,255,0.1); color: #64b4ff; border: 1px solid rgba(100,180,255,0.22); }
.cal-task-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    line-height: 1.4;
    margin-bottom: 10px;
}

/* Stats row */
.cal-stats {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    align-items: start;
}
.cal-stat-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.cal-stat-card:hover {
    border-color: rgba(var(--accent-primary-rgb),0.2);
    box-shadow: 0 0 30px rgba(var(--accent-strong-rgb),0.1);
    transform: translateY(-3px);
}
.cal-stat-icon {
    font-size: 20px;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 1;
    display: flex; align-items: center; justify-content: center;
    background: none;
    width: auto; height: auto; border-radius: 0;
}
.cal-stat-label {
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: rgba(255,255,255,0.55);
    margin-bottom: 0;
}
.cal-stat-bottom {
    display: flex; align-items: center; gap: 10px; margin-top: 2px;
}
.cal-stat-val {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 36px; font-weight: 700; color: #fff; line-height: 1;
}

.cal-agenda-no-tasks {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 8px; padding: 30px 20px;
    color: rgba(255,255,255,0.18); text-align: center; font-size: 13px;
}
.cal-agenda-no-tasks .material-symbols-outlined { font-size: 32px; opacity: 0.25; }

@media (max-width: 900px) {
    .cal-main { grid-template-columns: 1fr; }
    .cal-stats { grid-template-columns: repeat(2, 1fr); }
    .cal-title { font-size: 38px; }
}

/* =============================================================
 * TEMA CLARO — Calendário
 * ============================================================= */

/* Hero */
body.theme-light .cal-eyebrow   { text-shadow: none; }
body.theme-light .cal-title     { color: var(--text-primary); }
body.theme-light .cal-subtitle  { color: rgba(var(--accent-readable-rgb),0.35); }
body.theme-light .cal-glow      { opacity: 0.18; }

/* Navegação mês */
body.theme-light .cal-nav-btn {
    background: rgba(var(--accent-readable-rgb),0.05);
    border-color: rgba(var(--accent-readable-rgb),0.12);
    color: rgba(var(--accent-readable-rgb),0.50);
}
body.theme-light .cal-nav-btn:hover {
    background: rgba(var(--accent-strong-rgb),0.08);
    border-color: rgba(var(--accent-strong-rgb),0.28);
    color: var(--accent-strong);
    box-shadow: 0 0 14px rgba(var(--accent-strong-rgb),0.12);
}

/* Grid container */
body.theme-light .cal-grid-wrap {
    background: #ffffff;
    box-shadow:
        0 0 0 1.5px rgba(var(--accent-strong-rgb),0.30),
        0 0 25px rgba(var(--accent-strong-rgb),0.10),
        0 0 60px rgba(var(--accent-secondary-rgb),0.06);
}

/* Células */
body.theme-light .cal-cell {
    border-color: rgba(var(--accent-readable-rgb),0.06);
}
body.theme-light .cal-cell:hover       { background: rgba(var(--accent-strong-rgb),0.04); }
body.theme-light .cal-cell.cal-today   { background: rgba(var(--accent-primary-rgb),0.10); border-color: rgba(var(--accent-strong-rgb),0.25); }
body.theme-light .cal-cell.cal-selected{ background: rgba(var(--accent-secondary-rgb),0.08); border-color: rgba(var(--accent-secondary-rgb),0.30); }
body.theme-light .cal-cell-num         { color: rgba(var(--accent-readable-rgb),0.75); }
body.theme-light .cal-cell.cal-other-month .cal-cell-num { opacity: 0.25; }

/* Agenda lateral */
body.theme-light .cal-agenda {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.16);
    box-shadow: 0 4px 20px rgba(var(--accent-strong-rgb),0.08);
}
body.theme-light .cal-agenda-empty     { color: rgba(var(--accent-readable-rgb),0.25); }
body.theme-light .cal-agenda-header    { background: transparent; border-bottom-color: rgba(var(--accent-readable-rgb),0.07); }
body.theme-light .cal-agenda-title     { color: var(--text-primary); }
body.theme-light .cal-agenda-count {
    background: linear-gradient(90deg, rgba(var(--accent-strong-rgb),0.10), rgba(var(--accent-secondary-rgb),0.08));
    border-color: rgba(var(--accent-strong-rgb),0.22);
}
body.theme-light .cal-agenda-no-tasks  { color: rgba(var(--accent-readable-rgb),0.25); }

/* Cards de tarefa na agenda */
body.theme-light .cal-task-card {
    background: #f7f4fd;
    border-color: rgba(var(--accent-strong-rgb),0.12);
}
body.theme-light .cal-task-card:hover {
    border-color: rgba(var(--accent-strong-rgb),0.30);
    box-shadow: 0 8px 24px rgba(var(--accent-strong-rgb),0.10);
}
body.theme-light .cal-task-client { color: var(--text-primary); }
body.theme-light .cal-task-title  { color: rgba(var(--accent-readable-rgb),0.60); }

/* Stats */
body.theme-light .cal-stat-card {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.12);
    box-shadow: 0 2px 12px rgba(var(--accent-strong-rgb),0.06);
}
body.theme-light .cal-stat-card:hover {
    border-color: rgba(var(--accent-strong-rgb),0.28);
    box-shadow: 0 6px 24px rgba(var(--accent-strong-rgb),0.12);
}
body.theme-light .cal-stat-label { color: rgba(var(--accent-readable-rgb),0.50); }
body.theme-light .cal-stat-val   { color: var(--text-primary); }

/* Legenda */
body.theme-light .cal-legend-item  { border-bottom-color: rgba(var(--accent-readable-rgb),0.06); }
body.theme-light .cal-legend-text  { color: rgba(var(--accent-readable-rgb),0.60); }
body.theme-light .cal-legend-help  { color: rgba(var(--accent-readable-rgb),0.35); }

/* Dias anteriores e semana atual */
body.theme-light .cal-cell.cal-past                          { background: rgba(var(--accent-readable-rgb),0.03); }
body.theme-light .cal-cell.cal-current-week:not(.cal-today):not(.cal-selected) { background: rgba(var(--accent-strong-rgb),0.04); }

/* Banner mês vazio e fade da lista */
body.theme-light .cal-empty-banner        { color: rgba(var(--accent-readable-rgb),0.30); border-top-color: rgba(var(--accent-readable-rgb),0.06); }
body.theme-light .cal-empty-banner strong { color: rgba(var(--accent-readable-rgb),0.50); }
body.theme-light .cal-empty-hint          { color: rgba(var(--accent-readable-rgb),0.22); }
body.theme-light .cal-list-fade           { background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.9)); }

/* Calendar page — special gradient header */
.cal-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: 80px;
    flex-shrink: 0;
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    box-shadow: 0 4px 30px rgba(var(--accent-secondary-rgb),0.3), 0 0 0 1px rgba(255,255,255,0.05) inset;
    position: relative;
    overflow: hidden;
}
/* subtle shine overlay */
.cal-page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
    pointer-events: none;
}
/* nebula blob inside header */
.cal-page-header::after {
    content: '';
    position: absolute;
    right: -60px; top: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.cal-page-header-center {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}
.cal-header-icon {
    font-size: 24px;
    color: rgba(255,255,255,0.9);
    font-variation-settings: 'FILL' 1;
}
.cal-page-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
    text-shadow: 0 0 20px rgba(255,255,255,0.2);
}
.cal-back-btn {
    position: relative;
    z-index: 1;
    color: rgba(255,255,255,0.75) !important;
}
.cal-back-btn:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}
.cal-back-btn svg { stroke: currentColor; }
.cal-page-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Calendar legend card */
.cal-legend-card { align-items: flex-start; }
.cal-legend-list { display: flex; flex-direction: column; gap: 0; width: 100%; }
.cal-legend-item {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cal-legend-item:last-child { border-bottom: none; }
.cal-legend-text {
    font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,0.55);
}

/* ── Calendar UX improvements ───────────────────────────────── */

/* 6. Past days dimmed */
.cal-cell.cal-past .cal-cell-num { opacity: 0.35; }
.cal-cell.cal-past { background: rgba(0,0,0,0.06); }
.cal-cell.cal-past .cal-cell-dots { opacity: 0.5; }

/* 8. Current week row highlight */
.cal-cell.cal-current-week:not(.cal-today):not(.cal-selected) {
    background: rgba(var(--accent-primary-rgb),0.025);
}

/* 2. Empty month banner */
.cal-empty-banner {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 24px; text-align: center;
    color: rgba(255,255,255,0.3);
    border-top: 1px solid rgba(255,255,255,0.04);
}
.cal-empty-banner .material-symbols-outlined { font-size: 32px; opacity: 0.3; }
.cal-empty-banner p { font-size: 13px; }
.cal-empty-banner strong { color: rgba(255,255,255,0.5); }
.cal-empty-hint { font-size: 11px; color: rgba(255,255,255,0.2); }

/* 3. Fade indicator at bottom of agenda list */
.cal-list-fade {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 50px;
    background: linear-gradient(to bottom, transparent, rgba(10,5,20,0.5));
    pointer-events: none;
    transition: opacity 0.3s;
    border-radius: 0 0 22px 22px;
}

/* 7. Filter hint on overdue card */
.cal-filter-hint {
    font-size: 9px; font-weight: 700;
    color: rgba(var(--accent-secondary-rgb),0.85);
    letter-spacing: 0.5px;
    text-transform: none;
}

/* Legend inline in card + tooltip */
.cal-stat-label-row {
    display: flex; align-items: center; justify-content: space-between;
}
.cal-legend-tooltip-wrap { position: relative; }
.cal-legend-help {
    font-size: 16px; color: rgba(255,255,255,0.2);
    cursor: help; transition: color 0.2s;
    font-variation-settings: 'FILL' 0;
}
.cal-legend-help:hover { color: var(--accent-primary); }
.cal-legend-tooltip {
    position: absolute; bottom: 28px; right: 0;
    background: rgba(15,8,30,0.96);
    border: 1px solid rgba(var(--accent-primary-rgb),0.2);
    border-radius: 12px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 8px;
    min-width: 180px; opacity: 0; pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
    z-index: 100;
}
.cal-legend-tooltip-wrap:hover .cal-legend-tooltip {
    opacity: 1; pointer-events: auto; transform: translateY(0);
}
.cal-legend-inline {
    display: flex; align-items: center; gap: 14px; margin-top: 6px;
}
.cal-legend-inline .cal-legend-text {
    font-size: 11px; color: rgba(255,255,255,0.80);
}

/* Legend card compact */
.cal-stat-card.cal-legend-card { gap: 4px; }

/* Keyboard hint in agenda */
.cal-keyboard-hint {
    font-size: 10px; color: rgba(255,255,255,0.15);
    text-align: center; padding: 6px 0;
    letter-spacing: 0.5px;
}

/* Calendar task highlight — appears after closing detail from calendar */
@keyframes kb-cal-highlight-fade {
    0%   { box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb),0.8), 0 0 20px rgba(var(--accent-primary-rgb),0.4); border-color: rgba(var(--accent-primary-rgb),0.7); }
    70%  { box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb),0.5), 0 0 14px rgba(var(--accent-primary-rgb),0.2); border-color: rgba(var(--accent-primary-rgb),0.4); }
    100% { box-shadow: none; border-color: rgba(255,255,255,0.1); }
}
.kb-card-cal-highlight {
    animation: kb-cal-highlight-fade 3s ease-out forwards;
}

/* Activity history improvements */
.kb-fh-row-clickable { cursor: pointer; }
.kb-fh-row-clickable:hover { background: rgba(var(--accent-primary-rgb),0.08); }
.kb-fh-open-hint {
    font-size: 14px;
    color: rgba(var(--accent-primary-rgb),0.35);
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}
.kb-fh-row-clickable:hover .kb-fh-open-hint {
    color: var(--accent-primary);
    transform: scale(1.15);
}
.kb-fh-deleted-badge {
    font-size: 9px; font-weight: 800;
    background: rgba(255,110,128,0.10);
    color: #ff8095;
    border: 1px solid rgba(255,110,128,0.22);
    padding: 2px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.6px;
    white-space: nowrap;
}

/* =============================================================
 * CHECKOUT PAGE — ORBITAL EDITION
 * ============================================================= */

.chk-wrapper {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 36px 60px;
}

/* Nebula glows */
.chk-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(100px);
    z-index: 0;
}
.chk-glow-purple {
    width: 500px; height: 500px;
    top: -100px; left: -150px;
    background: radial-gradient(circle, rgba(var(--accent-strong-rgb),0.2) 0%, transparent 70%);
    animation: plansGlowPulse 7s ease-in-out infinite alternate;
}
.chk-glow-pink {
    width: 400px; height: 400px;
    top: 200px; right: -80px;
    background: radial-gradient(circle, rgba(var(--accent-secondary-rgb),0.12) 0%, transparent 70%);
    animation: plansGlowPulse 9s ease-in-out infinite alternate-reverse;
}

/* Hero */
.chk-hero {
    position: relative; z-index: 1;
    text-align: center;
    margin-bottom: 40px;
}
.chk-eyebrow {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; font-size: 11px; font-weight: 800;
    letter-spacing: 3.5px; text-transform: uppercase;
    color: rgba(var(--accent-secondary-rgb),0.9); margin-bottom: 14px;
    text-shadow: 0 0 18px rgba(var(--accent-secondary-rgb),0.45);
}
.chk-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(36px, 5vw, 54px);
    font-weight: 700; letter-spacing: -2px;
    color: #fff; line-height: 1.05; margin-bottom: 10px;
}
.chk-subtitle {
    font-size: 14px; color: rgba(255,255,255,0.38);
    max-width: 480px; margin: 0 auto; line-height: 1.6;
}

/* Content grid */
.chk-content {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
}
/* The wrapper column stretches to match left column height */
.chk-summary-col {
    position: relative;
}

@media (min-width: 981px) {
    .chk-summary-col {
        padding-top: 34px;
    }
}
/* The card sticks at top of this tall column */
.chk-summary {
    position: relative;
    top: 0;
}

/* Section */
.chk-section { margin-bottom: 24px; }
.chk-section-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
}
.chk-step {
    font-size: 10px; font-weight: 800; letter-spacing: 2px;
    color: rgba(var(--accent-secondary-rgb),0.85);
}
.chk-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.85);
}

/* Glass panel */
.chk-glass {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    padding: 22px;
}
.chk-grid-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}

/* Fields */
.chk-field { display: flex; flex-direction: column; gap: 7px; }
.chk-label {
    font-size: 10px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(255,255,255,0.3);
}
.chk-input {
    background: transparent; border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: #fff; font-family: 'Argentum Sans', sans-serif;
    font-size: 14px; padding: 9px 0; outline: none;
    transition: border-color 0.2s;
}
.chk-input:focus { border-bottom-color: var(--accent-primary); }
.chk-input::placeholder { color: rgba(255,255,255,0.18); }

/* Payment methods */
.chk-method {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px; padding: 18px 20px;
    margin-bottom: 12px; cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.chk-method:hover {
    border-color: rgba(var(--accent-primary-rgb),0.2);
    box-shadow: 0 0 20px rgba(var(--accent-strong-rgb),0.08);
}
.chk-method-active {
    border-color: rgba(var(--accent-primary-rgb),0.35);
    background: rgba(var(--accent-primary-rgb),0.04);
    box-shadow: 0 0 30px rgba(var(--accent-strong-rgb),0.1);
}
.chk-method-row {
    display: flex; align-items: center; gap: 14px;
}
.chk-method-icon {
    width: 46px; height: 46px; border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    color: #ffffff; flex-shrink: 0;
    font-size: 22px; transition: all 0.2s;
}
.chk-method-icon-active {
    color: var(--accent-primary);
    border-color: rgba(var(--accent-primary-rgb),0.3);
    background: rgba(var(--accent-primary-rgb),0.08);
    box-shadow: 0 0 12px rgba(var(--accent-primary-rgb),0.2);
}
.chk-method-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px; font-weight: 700; color: #fff;
}
.chk-method-sub { font-size: 11px; color: #ffffff; margin-top: 2px; }
.chk-radio {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);
    margin-left: auto; flex-shrink: 0; transition: all 0.2s;
}
.chk-radio-active {
    border-color: var(--accent-primary);
    background: radial-gradient(circle, var(--accent-primary) 38%, transparent 38%);
    box-shadow: 0 0 10px rgba(var(--accent-primary-rgb),0.5);
}

/* PIX area */
.chk-pix-area {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px; padding-top: 18px; margin-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.chk-qr-wrap {
    width: 148px; height: 148px; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
}
.chk-pix-hint {
    font-size: 12px; color: rgba(255,255,255,0.3);
    text-align: center; line-height: 1.6; max-width: 280px;
}
.chk-pix-hint strong { color: rgba(255,255,255,0.5); }

/* Card fields */
.chk-card-fields {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    padding-top: 18px; margin-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* Summary card */
.chk-summary { position: sticky; top: 20px; align-self: start; }
.chk-summary-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(var(--accent-primary-rgb),0.2);
    border-radius: 24px; padding: 28px 24px;
    position: relative; overflow: hidden;
    box-shadow: 0 0 60px rgba(var(--accent-strong-rgb),0.12),
                0 0 0 1px rgba(var(--accent-primary-rgb),0.08);
}
.chk-summary-inner-glow {
    position: absolute; top: -80px; right: -80px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(var(--accent-primary-rgb),0.14) 0%, transparent 70%);
    pointer-events: none;
}
.chk-summary-eyebrow {
    font-size: 10px; font-weight: 800; letter-spacing: 2.5px;
    text-transform: uppercase; color: rgba(var(--accent-secondary-rgb),0.8);
    margin-bottom: 8px;
}
.chk-summary-plan {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 26px; font-weight: 700; color: #fff;
}
.chk-summary-price-row {
    display: flex; align-items: baseline; gap: 4px; margin-top: 6px;
}
.chk-summary-price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px; font-weight: 700;
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.chk-summary-period { font-size: 13px; color: rgba(255,255,255,0.3); }
.chk-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 18px 0; }
.chk-features { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.chk-features li {
    display: flex; align-items: center; gap: 9px;
    font-size: 12px; color: rgba(255,255,255,0.5);
}
.chk-features .material-symbols-outlined {
    font-size: 15px; color: #4ade80;
    font-variation-settings: 'FILL' 1; flex-shrink: 0;
}
.chk-total-box {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px; padding: 16px 18px; margin-bottom: 22px;
}
.chk-total-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.chk-total-row:last-child { margin-bottom: 0; }
.chk-total-label { font-size: 12px; color: rgba(255,255,255,0.4); }
.chk-total-val { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.80); }
.chk-total-free { font-size: 12px; font-weight: 700; color: #4ade80; }
.chk-total-title { font-size: 14px; font-weight: 700; color: #fff; }
.chk-total-final {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px; font-weight: 700; color: #fff;
}
.chk-confirm-btn {
    width: 100%; padding: 15px;
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    border: none; border-radius: 14px;
    color: #fff; font-family: 'Space Grotesk', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 0 30px rgba(var(--accent-secondary-rgb),0.35), 0 4px 15px rgba(0,0,0,0.3);
    transition: box-shadow 0.2s, transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
    margin-bottom: 16px;
}
.chk-confirm-btn:hover {
    box-shadow: 0 0 45px rgba(var(--accent-secondary-rgb),0.55), 0 4px 20px rgba(0,0,0,0.3);
    transform: translateY(-2px) scale(1.01);
}
.chk-confirm-btn:active { transform: scale(0.98); }
.chk-legal {
    font-size: 10px; color: rgba(255,255,255,0.2);
    text-align: center; line-height: 1.7; margin-bottom: 18px;
}
.chk-trust {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    opacity: 0.28;
}
.chk-trust-item {
    display: flex; align-items: center; gap: 4px;
    font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px;
}
.chk-trust-item .material-symbols-outlined { font-size: 13px; }
.chk-trust-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: rgba(255,255,255,0.4);
}

/* Installments select */
.chk-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.chk-select {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: #fff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 40px 10px 14px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.chk-select:focus {
    border-color: rgba(var(--accent-primary-rgb),0.4);
    background: rgba(var(--accent-primary-rgb),0.06);
}
.chk-select option {
    background: #05020c;
    color: var(--accent-primary);
    padding: 10px 14px;
    font-size: 13px;
}
.chk-select-arrow {
    position: absolute;
    right: 12px;
    font-size: 18px;
    color: rgba(var(--accent-primary-rgb),0.6);
    pointer-events: none;
}

/* =============================================================
 * SUCCESS MODAL
 * ============================================================= */
.success-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5,2,12,0.85);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.success-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}
.success-modal-card {
    position: relative;
    background: rgba(10,4,22,0.95);
    border: 1px solid rgba(var(--accent-primary-rgb),0.25);
    border-radius: 28px;
    padding: 48px 44px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 0 80px rgba(var(--accent-strong-rgb),0.25), 0 0 0 1px rgba(var(--accent-primary-rgb),0.08);
    transform: scale(0.88) translateY(20px);
    transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.success-modal-overlay.open .success-modal-card {
    transform: scale(1) translateY(0);
}

/* Stars canvas */
.success-stars-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}

/* Glows */
.success-glow {
    position: absolute; border-radius: 50%;
    pointer-events: none; filter: blur(80px); z-index: 0;
}
.success-glow-1 {
    width: 300px; height: 300px;
    top: -80px; left: -60px;
    background: radial-gradient(circle, rgba(var(--accent-strong-rgb),0.3) 0%, transparent 70%);
    animation: plansGlowPulse 5s ease-in-out infinite alternate;
}
.success-glow-2 {
    width: 250px; height: 250px;
    bottom: -60px; right: -40px;
    background: radial-gradient(circle, rgba(var(--accent-secondary-rgb),0.2) 0%, transparent 70%);
    animation: plansGlowPulse 7s ease-in-out infinite alternate-reverse;
}

/* Icon */
.success-icon-wrap {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 36px;
}
.success-icon-ring {
    position: absolute;
    width: 90px; height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--accent-strong-rgb),0.3), rgba(var(--accent-secondary-rgb),0.2));
    border: 1px solid rgba(var(--accent-primary-rgb),0.3);
    animation: successRingPulse 2.5s ease-in-out infinite;
}
@keyframes successRingPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
}
.success-icon {
    position: relative; z-index: 1;
    font-size: 44px;
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    font-variation-settings: 'FILL' 1;
    animation: successRocket 3s ease-in-out infinite;
}
@keyframes successRocket {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    50% { transform: translateY(-6px) rotate(-10deg); }
}

/* Text */
.success-eyebrow {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    gap: 10px; font-size: 10px; font-weight: 800;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(var(--accent-secondary-rgb),0.85); margin-bottom: 12px;
}
.success-title {
    position: relative; z-index: 1;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px; font-weight: 700;
    color: #fff; margin-bottom: 14px; line-height: 1.1;
}
.success-message {
    position: relative; z-index: 1;
    font-size: 14px; color: rgba(255,255,255,0.5);
    line-height: 1.7; margin-bottom: 24px;
}
.success-message strong { color: rgba(255,255,255,0.75); }

/* Plan badge */
.success-plan-badge {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(90deg, rgba(var(--accent-strong-rgb),0.2), rgba(var(--accent-secondary-rgb),0.15));
    border: 1px solid rgba(var(--accent-primary-rgb),0.25);
    border-radius: 20px; padding: 8px 18px;
    font-size: 12px; font-weight: 700;
    color: var(--accent-primary); margin-bottom: 28px;
    box-shadow: 0 0 20px rgba(var(--accent-primary-rgb),0.1);
}

/* CTA */
.success-btn {
    position: relative; z-index: 1;
    width: 100%; padding: 15px;
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    border: none; border-radius: 14px;
    color: #fff; font-family: 'Space Grotesk', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 0 30px rgba(var(--accent-secondary-rgb),0.4);
    transition: box-shadow 0.2s, transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.success-btn:hover {
    box-shadow: 0 0 50px rgba(var(--accent-secondary-rgb),0.6);
    transform: translateY(-2px) scale(1.01);
}

/* =============================================================
 * LOGIN PAGE
 * ============================================================= */
.login-page {
    position: fixed;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5vh;
    z-index: 1;
    overflow: hidden;
}
.login-page.hidden {
    display: none;
}

/* Stars canvas */
.login-stars-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}

/* Nebula glows */
.login-glow {
    position: absolute; border-radius: 50%;
    pointer-events: none; filter: blur(120px); z-index: 0;
}
.login-glow-1 {
    width: 700px; height: 700px;
    top: -200px; left: -200px;
    background: radial-gradient(circle, rgba(var(--accent-strong-rgb),0.25) 0%, transparent 65%);
    animation: plansGlowPulse 7s ease-in-out infinite alternate;
}
.login-glow-2 {
    width: 600px; height: 600px;
    bottom: -150px; right: -100px;
    background: radial-gradient(circle, rgba(var(--accent-secondary-rgb),0.18) 0%, transparent 65%);
    animation: plansGlowPulse 9s ease-in-out infinite alternate-reverse;
}
.login-glow-3 {
    width: 400px; height: 400px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(var(--accent-strong-rgb),0.10) 0%, transparent 65%);
    animation: plansGlowPulse 11s ease-in-out infinite alternate;
}

/* Card */
.login-card {
    position: relative; z-index: 1;
    background: rgba(5,2,12,0.82);
    border: 1px solid rgba(var(--accent-primary-rgb),0.22);
    border-radius: 28px;
    padding: 44px 40px;
    width: 100%;
    max-width: 440px;
    margin: 16px;
    backdrop-filter: blur(40px);
    box-shadow: 0 0 80px rgba(var(--accent-strong-rgb),0.25), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
}
.login-card-glow {
    position: absolute; inset: -1px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.08), rgba(var(--accent-secondary-rgb),0.05), transparent 60%);
    pointer-events: none;
}

/* Brand */
.login-brand { text-align: center; margin-bottom: 32px; }
.login-eyebrow {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; font-size: 10px; font-weight: 800;
    letter-spacing: 3.5px; text-transform: uppercase;
    color: rgba(var(--accent-secondary-rgb),0.9); margin-bottom: 14px;
    text-shadow: 0 0 18px rgba(var(--accent-secondary-rgb),0.45);
}
.login-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(28px, 5vw, 38px);
    font-weight: 700; letter-spacing: -1.5px;
    color: #fff; line-height: 1.1; margin-bottom: 8px;
}
.login-subtitle {
    font-size: 13px; color: #ffffff; line-height: 1.5;
}

/* Form */
.login-form { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
.login-field { display: flex; flex-direction: column; gap: 7px; }
.login-label {
    font-size: 10px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: #ffffff;
}
.login-label-row { display: flex; align-items: center; justify-content: space-between; }
.login-forgot {
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    color: rgba(var(--accent-primary-rgb),0.7); background: none; border: none;
    cursor: pointer; transition: color 0.2s;
}
.login-forgot:hover { color: var(--accent-primary); }
.login-input-wrap {
    position: relative;
    display: flex; align-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.login-input-wrap:focus-within {
    border-color: rgba(var(--accent-primary-rgb),0.4);
    background: rgba(var(--accent-primary-rgb),0.05);
    box-shadow: 0 0 20px rgba(var(--accent-primary-rgb),0.1);
}
.login-input-icon {
    font-size: 18px; color: rgba(255,255,255,0.2);
    padding: 0 0 0 16px; flex-shrink: 0;
    transition: color 0.2s;
}
.login-input-wrap:focus-within .login-input-icon { color: var(--accent-primary); }
.login-input {
    flex: 1; background: transparent; border: none;
    color: #fff; font-family: 'Argentum Sans', sans-serif;
    font-size: 14px; padding: 14px 16px; outline: none;
}
.login-input::placeholder { color: rgba(255,255,255,0.2); }
.login-eye {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.2); padding: 0 14px;
    display: flex; align-items: center;
    transition: color 0.2s;
}
.login-eye:hover { color: var(--accent-primary); }
.login-eye .material-symbols-outlined { font-size: 18px; }

/* Submit button */
.login-btn {
    width: 100%; padding: 15px;
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    border: none; border-radius: 14px;
    color: #fff; font-family: 'Space Grotesk', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 0 30px rgba(var(--accent-secondary-rgb),0.35);
    transition: box-shadow 0.2s, transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
    margin-top: 4px;
}
.login-btn:hover {
    box-shadow: 0 0 50px rgba(var(--accent-secondary-rgb),0.55);
    transform: translateY(-2px);
}
.login-btn:active { transform: scale(0.98); }

/* Divider */
.login-divider {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.login-divider-line {
    flex: 1; height: 1px; background: rgba(255,255,255,0.06);
}
.login-divider-text {
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: rgba(255,255,255,0.2);
    white-space: nowrap;
}

/* Register button */
.login-register-btn {
    width: 100%; padding: 13px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    color: rgba(255,255,255,0.5);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px; font-weight: 600;
    cursor: pointer; display: flex;
    align-items: center; justify-content: center; gap: 8px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.login-register-btn:hover {
    border-color: rgba(var(--accent-primary-rgb),0.3);
    color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb),0.05);
}

.login-error {
    background: rgba(255,110,128,0.1);
    border: 1px solid rgba(255,110,128,0.25);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    color: #ff6e80;
    text-align: center;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================
 * REGISTER PAGE
 * ============================================================= */

/* Top step bar */
/* ── Auth Modals (Esqueci senha / Verificar email) ── */
.auth-modal-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(5,2,12,0.75);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: authOverlayIn 0.2s ease;
}
.auth-modal-overlay.hidden { display: none; }
@keyframes authOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.auth-modal {
    background: rgba(10,4,22,0.95);
    border: 1px solid rgba(var(--accent-primary-rgb),0.22);
    border-radius: 22px;
    padding: 36px 32px 28px;
    width: 100%; max-width: 420px;
    box-shadow: 0 0 60px rgba(var(--accent-strong-rgb),0.25);
    animation: authModalIn 0.25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes authModalIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.auth-modal-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(var(--accent-primary-rgb),0.12);
    border: 1px solid rgba(var(--accent-primary-rgb),0.3);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.auth-modal-icon .material-symbols-outlined { font-size: 26px; color: var(--accent-primary); }
.auth-modal-icon--email { background: rgba(var(--accent-secondary-rgb),0.1); border-color: rgba(var(--accent-secondary-rgb),0.3); }
.auth-modal-icon--email .material-symbols-outlined { color: var(--accent-secondary); }
.auth-modal-title { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.auth-modal-sub { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0; }
.auth-modal-sub strong { color: rgba(255,255,255,0.8); }
.auth-modal-error {
    margin-top: 12px; padding: 10px 14px;
    background: rgba(var(--accent-secondary-rgb),0.12); border: 1px solid rgba(var(--accent-secondary-rgb),0.3);
    border-radius: 10px; font-size: 13px; color: #ff80b4;
}
.auth-modal-error.hidden { display: none; }
.auth-modal-success {
    margin-top: 12px; padding: 10px 14px;
    background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.3);
    border-radius: 10px; font-size: 13px; color: #4ade80;
    display: flex; align-items: center; gap: 8px;
}
.auth-modal-success.hidden { display: none; }
.auth-modal-success .material-symbols-outlined { font-size: 18px; }
.auth-modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.auth-modal-cancel {
    flex: 1; padding: 11px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px; color: rgba(255,255,255,0.6);
    font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.auth-modal-cancel:hover { background: rgba(255,255,255,0.1); color: #fff; }
.auth-modal-confirm {
    flex: 1; padding: 11px;
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    border: none; border-radius: 12px;
    color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity 0.2s;
}
.auth-modal-confirm:hover { opacity: 0.88; }
.auth-modal-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

/* Espaço reservado para logo no topo */
.reg-logo-space {
    flex-shrink: 0;
    height: auto;
    padding-top: 24px;
}
.reg-center-group {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding-bottom: 60px;
    padding-top: 30px;
    position: relative; z-index: 2;
}

/* ── Topbar ── */
.reg-topbar {
    position: relative; z-index: 2;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 0 40px 20px;
    width: 100%;
}

/* ── Stepbar ── */
.reg-stepbar {
    display: flex; align-items: center;
    width: 100%; max-width: 660px; gap: 0;
    position: relative;
}
.reg-stepbar-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; flex-shrink: 0;
    position: relative; z-index: 30;
}

/* ── Planetas ── */
.reg-planet {
    width: 44px; height: 44px; position: relative;
    transition: transform 0.45s cubic-bezier(.34,1.56,.64,1);
}
.reg-planet svg { width: 44px; height: 44px; display: block; transition: opacity 0.4s; }
.reg-planet .planet-active  { display: none; opacity: 0; }
.reg-planet .planet-inactive { display: block; opacity: 1; }

.reg-stepbar-active .reg-planet { transform: scale(1.2); }
.reg-stepbar-active .reg-planet .planet-inactive { display: none !important; }
.reg-stepbar-active .reg-planet .planet-active   { display: block !important; opacity: 1; }

.reg-stepbar-done .reg-planet .planet-inactive { display: none !important; }
.reg-stepbar-done .reg-planet .planet-active   { display: block !important; opacity: 0.8; }

.reg-planet-glow {
    position: absolute; inset: -10px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-primary-rgb),0.45) 0%, transparent 65%);
    opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.reg-stepbar-active .reg-planet-glow { opacity: 1; }

/* ── Labels ── */
.reg-stepbar-label {
    font-size: 8px; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(255,255,255,0.3); white-space: nowrap;
    transition: color 0.4s;
}
.reg-stepbar-active .reg-stepbar-label { color: var(--accent-primary); }
.reg-stepbar-done   .reg-stepbar-label { color: var(--accent-secondary); }

/* ── Linhas ── */
.reg-stepbar-line {
    flex: 1; height: 1px; background: rgba(255,255,255,0.15);
    margin: 0 8px; margin-bottom: 20px;
    min-width: 60px; transition: background 0.6s;
    position: relative; z-index: 1;
}
.reg-stepbar-line.active {
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
}

/* ── Foguete que voa pela linha ── */
.reg-rocket-fly {
    position: absolute;
    z-index: 20; pointer-events: none;
    display: flex; flex-direction: row-reverse; align-items: center;
    /* translate: centro do foguete na posição */
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 5px rgba(var(--accent-primary-rgb),0.9));
}
.reg-rocket-fly svg { display: block; }

/* chama sai para a esquerda (traseira do foguete) */
.reg-rocket-fly-flame {
    width: 10px; height: 5px;
    background: linear-gradient(to left, rgba(var(--accent-secondary-rgb),0), #ff6eb4);
    border-radius: 4px 0 0 4px;
    animation: rocketFlameH 0.1s infinite alternate;
    filter: blur(1.5px);
    margin-right: -1px;
}
@keyframes rocketFlameH {
    from { width: 8px;  opacity: 1; }
    to   { width: 16px; opacity: 0.5; }
}

.reg-rocket-arrive {
    animation: rocketArrive 0.3s forwards;
}
@keyframes rocketArrive {
    0%   { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
    50%  { opacity: 0.7; transform: translate(-50%, -50%) scale(1.5); filter: drop-shadow(0 0 16px rgba(var(--accent-primary-rgb),1)); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(0.1); }
}

/* ── Impacto no planeta ── */
.reg-impact-ring {
    position: absolute;
    z-index: 25; pointer-events: none;
    width: var(--size, 20px); height: var(--size, 20px);
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-primary-rgb),0.6);
    transform: translate(-50%, -50%) scale(0.6);
    animation: impactRing 0.5s ease-out forwards;
}
@keyframes impactRing {
    0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

.reg-impact-spark {
    position: absolute;
    z-index: 25; pointer-events: none;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(var(--accent-primary-rgb),0.9);
    transform: translate(-50%, -50%);
    animation: impactSpark 0.35s ease-out forwards;
}
@keyframes impactSpark {
    0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0;   transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); }
}

/* Flash sutil no planeta */
.reg-planet-impact {
    animation: planetImpact 0.35s ease-out;
}
@keyframes planetImpact {
    0%   { transform: scale(1.2); }
    40%  { transform: scale(1.32); filter: brightness(1.4) drop-shadow(0 0 6px rgba(var(--accent-primary-rgb),0.7)); }
    100% { transform: scale(1.2); filter: none; }
}
.reg-rocket-smoke {
    position: absolute;
    z-index: 15; pointer-events: none;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(var(--accent-primary-rgb),0.5);
    transform: translate(-50%, -50%);
    animation: smokeTrail 0.6s ease-out forwards;
}
@keyframes smokeTrail {
    0%   { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0;   transform: translate(calc(-50% - 12px), calc(-50% + var(--dy, 0px))) scale(2); }
}

/* ── Body (abraça o card) ── */
.reg-body {
    display: flex;
    align-items: center; justify-content: center;
    padding: 8px 24px; overflow: visible;
    position: relative; z-index: 1;
    width: 100%;
}

/* ── Card ── */
.reg-card {
    background: rgba(5,2,12,0.82);
    border: 1px solid rgba(var(--accent-primary-rgb),0.22);
    border-radius: 28px;
    padding: 0;
    width: 100%; max-width: 860px;
    position: relative;
    backdrop-filter: blur(40px);
    box-shadow: 0 0 80px rgba(var(--accent-strong-rgb),0.25), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
}
.reg-card-glow {
    position: absolute; inset: -1px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.08), rgba(var(--accent-secondary-rgb),0.05), transparent 60%);
    pointer-events: none; z-index: 0;
}
.reg-card-bottom-line {
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb),0.35), transparent);
}

@media (max-width: 768px) {
    .reg-logo-space { height: 60px; }
    .reg-stepbar { max-width: 100%; }
    .reg-stepbar-line { min-width: 30px; }
}

.reg-panel.hidden { display: none; }
.reg-panel {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr auto;
    gap: 0;
    min-height: 440px;
}

/* Left column: heading */
.reg-panel-head {
    grid-column: 1 / 3;
    padding: 40px 48px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 24px;
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.reg-panel-head-text { flex: 1; }

.reg-config-step {
    font-size: 10px; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: rgba(var(--accent-primary-rgb),0.65); margin-bottom: 10px;
    display: block;
}
.reg-panel-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(26px, 3.5vw, 38px);
    font-weight: 700; letter-spacing: -1.5px; color: #fff;
    margin: 0; line-height: 1.1;
}
.reg-panel-sub {
    font-size: 13px; color: rgba(255,255,255,0.32);
    line-height: 1.6; margin: 0;
    max-width: 320px;
}

/* Fields area */
.reg-fields {
    grid-column: 1 / 3;
    display: flex; flex-direction: column; gap: 20px;
    padding: 28px 48px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.reg-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Actions bar */
.reg-actions {
    grid-column: 1 / 3;
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 48px 28px;
}
.reg-prev-btn {
    display: flex; align-items: center; gap: 6px; background: none; border: none;
    font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,0.28); cursor: pointer; transition: color 0.2s;
}
.reg-prev-btn:hover { color: rgba(255,255,255,0.7); }
.reg-cta-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 30px;
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    border: none; border-radius: 50px; color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(var(--accent-secondary-rgb),0.35);
    transition: box-shadow 0.2s, transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.reg-cta-btn:hover { box-shadow: 0 8px 40px rgba(var(--accent-secondary-rgb),0.55); transform: scale(1.02); }
.reg-cta-btn:active { transform: scale(0.97); }

/* Summary */
.reg-summary {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; padding: 20px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.reg-summary-row {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.reg-summary-row:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.05); }
.reg-summary-row:nth-last-child(1),
.reg-summary-row:nth-last-child(2) { border-bottom: none; }
.reg-summary-key {
    font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
    background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.reg-summary-val { color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 500; }
.reg-summary-divider { display: none; }

/* Password strength */
.reg-strength-wrap { display: flex; align-items: center; gap: 10px; }
.reg-strength-bar { flex: 1; height: 3px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.reg-strength-fill { height: 100%; width: 0%; border-radius: 4px; transition: width 0.3s, background 0.3s; }
.reg-strength-label { font-size: 10px; font-weight: 700; color: #ffffff; white-space: nowrap; }

/* Date input */
input[type="date"].login-input::-webkit-calendar-picker-indicator { filter: invert(0.5); cursor: pointer; }


@media (max-width: 768px) {
    .reg-logo-space { height: 60px; }
}

.sup-chip:hover { background: rgba(var(--accent-primary-rgb),0.2); }

/* ════════════════════════════════════════════════════════════════
   PÁGINA DE SUPORTE — Visual equivalente à página de Planos
   ════════════════════════════════════════════════════════════════ */

/* Canvas de estrelas */
.sup-stars-canvas {
    position: absolute;
    inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}

/* Glows nebulosos */
.sup-bg-glow {
    position: absolute; border-radius: 50%;
    pointer-events: none; filter: blur(100px); z-index: 0;
}
.sup-glow-purple {
    width: 600px; height: 600px;
    top: -100px; left: -150px;
    background: radial-gradient(circle, rgba(var(--accent-strong-rgb),0.22) 0%, transparent 65%);
    animation: plansGlowPulse 6s ease-in-out infinite alternate;
}
.sup-glow-pink {
    width: 500px; height: 500px;
    top: 180px; right: -100px;
    background: radial-gradient(circle, rgba(var(--accent-secondary-rgb),0.16) 0%, transparent 65%);
    animation: plansGlowPulse 8s ease-in-out infinite alternate-reverse;
}
.sup-glow-blue {
    width: 350px; height: 350px;
    bottom: 60px; left: 35%;
    background: radial-gradient(circle, rgba(var(--accent-strong-rgb),0.10) 0%, transparent 65%);
    animation: plansGlowPulse 10s ease-in-out infinite alternate;
}

/* Wrapper */
.sup-wrapper {
    position: relative; z-index: 1;
    max-width: 1280px; margin: 0 auto;
    padding: 0 40px 40px;
}

/* Hero */
.sup-hero {
    text-align: center;
    margin-bottom: 40px;
    position: relative; z-index: 1;
}
.sup-hero-eyebrow {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; font-size: 12px; font-weight: 800;
    letter-spacing: 4px; text-transform: uppercase;
    color: rgba(var(--accent-secondary-rgb),0.9); margin-bottom: 16px;
    text-shadow: 0 0 20px rgba(var(--accent-secondary-rgb),0.4);
}
.sup-hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(38px, 6vw, 64px);
    font-weight: 700; letter-spacing: -2px;
    line-height: 1.05; color: #fff;
    margin: 0 0 14px;
}
.sup-hero-sub {
    font-size: 15px; color: rgba(255,255,255,0.4);
    max-width: 520px; margin: 0 auto;
    line-height: 1.7;
}

/* Grid */
.sup-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
    height: calc(100vh - 320px);
    min-height: 460px;
    max-width: 1200px;
    margin: 0 auto;
}
.sup-left { display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.sup-right { display: flex; flex-direction: column; min-height: 0; }

/* Cards base */
.sup-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 22px; padding: 24px;
    position: relative; overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
    backdrop-filter: blur(20px);
}
.sup-card:hover {
    border-color: rgba(var(--accent-primary-rgb),0.2);
    box-shadow: 0 0 40px rgba(var(--accent-strong-rgb),0.12);
}
.sup-card-status { flex-shrink: 0; }
.sup-quick-card { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

/* Inner glow */
.sup-card-inner-glow {
    position: absolute; top: -40px; right: -40px;
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-primary-rgb),0.08) 0%, transparent 70%);
    pointer-events: none;
}
.sup-card-inner-glow-pink {
    background: radial-gradient(circle, rgba(var(--accent-secondary-rgb),0.08) 0%, transparent 70%);
}

/* Card header */
.sup-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.sup-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px; font-weight: 800;
    letter-spacing: 3px; text-transform: uppercase;
}
.sup-title-purple { color: var(--accent-primary); }
.sup-title-pink   { color: var(--accent-secondary); margin-bottom: 16px; display: block; }

.sup-badge-online {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 20px;
    background: rgba(74,222,128,0.08);
    border: 1px solid rgba(74,222,128,0.2);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 2px; color: #4ade80; text-transform: uppercase;
}
.sup-badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #4ade80;
    animation: supPulse 2s infinite;
    box-shadow: 0 0 6px rgba(74,222,128,0.6);
}
@keyframes supPulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }

/* Status list */
.sup-status-list { display: flex; flex-direction: column; gap: 8px; }
.sup-status-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    transition: background 0.2s;
}
.sup-status-item:hover { background: rgba(255,255,255,0.06); }
.sup-status-left { display: flex; align-items: center; gap: 10px; }
.sup-status-icon { font-size: 18px; }
.sup-status-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 1.5px; color: rgba(255,255,255,0.80);
    text-transform: uppercase;
}
.sup-status-val {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,0.7);
}
.sup-val-green { color: #4ade80; }

/* Quick actions */
.sup-quick-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; padding-right: 4px; }
.sup-quick-list::-webkit-scrollbar { width: 4px; }
.sup-quick-list::-webkit-scrollbar-thumb { background: rgba(var(--accent-primary-rgb),0.2); border-radius: 10px; }
.sup-quick-btn {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer; text-align: left;
    transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
    position: relative; overflow: hidden;
}
.sup-quick-btn::before {
    content: '';
    position: absolute; inset: 0; opacity: 0;
    background: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0.05), transparent);
    transition: opacity 0.2s;
}
.sup-quick-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(var(--accent-primary-rgb),0.22);
    transform: translateX(4px);
}
.sup-quick-btn:hover::before { opacity: 1; }
.sup-quick-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform 0.2s;
}
.sup-quick-btn:hover .sup-quick-icon { transform: scale(1.1); }
.sup-quick-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 1px; color: rgba(255,255,255,0.88);
    text-transform: uppercase; margin-bottom: 3px;
}
.sup-quick-sub { font-size: 11px; color: rgba(255,255,255,0.3); }
.sup-quick-arrow {
    font-size: 13px; color: rgba(255,255,255,0.15);
    margin-left: auto; flex-shrink: 0;
    transition: color 0.2s;
}
.sup-quick-btn:hover .sup-quick-arrow { color: rgba(var(--accent-primary-rgb),0.5); }

/* Chat card */
.sup-chat-card {
    flex: 1; display: flex; flex-direction: column;
    min-height: 0; overflow: hidden;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 22px; position: relative;
    backdrop-filter: blur(20px);
    transition: border-color 0.3s;
}
.sup-chat-card:hover { border-color: rgba(var(--accent-secondary-rgb),0.2); }
.sup-chat-card-glow {
    position: absolute; top: -60px; right: -60px;
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-secondary-rgb),0.08) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
}

/* Chat header */
.sup-chat-header {
    padding: 18px 28px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    flex-shrink: 0; z-index: 1; position: relative;
    display: flex; align-items: center; justify-content: space-between;
}
.sup-chat-agent { display: flex; align-items: center; gap: 14px; }
.sup-agent-avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--accent-strong-rgb),0.5), rgba(var(--accent-secondary-rgb),0.3));
    border: 2px solid rgba(var(--accent-primary-rgb),0.3);
    display: flex; align-items: center; justify-content: center;
    position: relative; flex-shrink: 0;
    box-shadow: 0 0 20px rgba(var(--accent-primary-rgb),0.2);
}
.sup-agent-online {
    position: absolute; bottom: 1px; right: 1px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #4ade80; border: 2px solid rgba(5,2,12,0.9);
    box-shadow: 0 0 8px rgba(74,222,128,0.6);
}
.sup-agent-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px; font-weight: 700;
    letter-spacing: 1px; color: #fff; text-transform: uppercase;
}
.sup-agent-status {
    display: flex; align-items: center; gap: 5px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px; font-weight: 700;
    letter-spacing: 1.5px; color: rgba(var(--accent-secondary-rgb),0.8);
    text-transform: uppercase; margin-top: 2px;
}
.sup-agent-dot { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; }
.sup-chat-header-badge {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px;
    background: rgba(var(--accent-primary-rgb),0.08);
    border: 1px solid rgba(var(--accent-primary-rgb),0.2);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 2px; color: var(--accent-primary); text-transform: uppercase;
}

/* Mensagens */
.sup-chat-messages {
    flex: 1; overflow-y: auto;
    padding: 20px 22px;
    display: flex; flex-direction: column; gap: 18px;
    min-height: 0; z-index: 1; position: relative;
}
.sup-chat-messages::-webkit-scrollbar { width: 3px; }
.sup-chat-messages::-webkit-scrollbar-track { background: transparent; }
.sup-chat-messages::-webkit-scrollbar-thumb { background: rgba(var(--accent-primary-rgb),0.15); border-radius: 4px; }

.sup-msg { display: flex; gap: 10px; max-width: 88%; }
.sup-msg-in  { align-self: flex-start; }
.sup-msg-out { align-self: flex-end; flex-direction: row-reverse; }
.sup-msg-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sup-msg-body { display: flex; flex-direction: column; gap: 4px; }
.sup-msg-bubble {
    padding: 13px 17px; border-radius: 18px;
    font-size: 13px; line-height: 1.65;
    color: rgba(255,255,255,0.88);
}
.sup-msg-bubble strong { color: var(--accent-primary); }
.sup-bubble-in {
    border-radius: 18px 18px 18px 4px;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.07);
}
.sup-bubble-out {
    border-radius: 18px 18px 4px 18px;
    background: rgba(var(--accent-primary-rgb),0.1);
    border: 1px solid rgba(var(--accent-primary-rgb),0.18);
}
.sup-msg-time {
    font-size: 10px; font-family: 'Space Grotesk', sans-serif;
    color: rgba(255,255,255,0.2); padding: 0 4px;
}
.sup-msg-out .sup-msg-time { text-align: right; }

/* Input */
.sup-chat-input-area {
    padding: 14px 20px;
    background: rgba(255,255,255,0.03);
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0; z-index: 1; position: relative;
}
.sup-input-wrap {
    display: flex; align-items: flex-end; gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; padding: 10px 14px;
    transition: border-color 0.2s;
}
.sup-input-wrap:focus-within {
    border-color: rgba(var(--accent-primary-rgb),0.35);
    box-shadow: 0 0 20px rgba(var(--accent-primary-rgb),0.06);
}
.sup-input {
    flex: 1; background: transparent; border: none; outline: none;
    color: rgba(255,255,255,0.9); font-size: 13px;
    line-height: 1.5; resize: none; font-family: inherit;
    max-height: 100px;
}
.sup-input::placeholder { color: rgba(255,255,255,0.22); }
.sup-send-btn {
    width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
    border: none; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 0 20px rgba(var(--accent-secondary-rgb),0.3);
}
.sup-send-btn:hover { opacity: 0.88; transform: scale(1.06); }
.sup-send-btn .material-symbols-outlined { font-size: 18px; }
.sup-chat-footer {
    display: flex; align-items: center; gap: 10px; margin-top: 10px;
}
.sup-footer-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,0.18);
}
.sup-footer-divider { flex: 1; height: 1px; background: rgba(255,255,255,0.04); }
.sup-footer-status { display: flex; align-items: center; gap: 5px; }
.sup-footer-dot { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.5); }

/* Chips */
.sup-chip {
    padding: 5px 13px; border-radius: 20px;
    background: rgba(var(--accent-primary-rgb),0.08);
    border: 1px solid rgba(var(--accent-primary-rgb),0.22);
    color: var(--accent-primary); font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.sup-chip:hover { background: rgba(var(--accent-primary-rgb),0.18); transform: translateY(-1px); }

/* Typing indicator */
.sup-typing { display: flex; align-items: center; gap: 5px; padding: 4px 2px; }
.sup-typing-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(var(--accent-primary-rgb),0.5);
    animation: supTyping 1.2s infinite;
}
.sup-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.sup-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes supTyping { 0%,60%,100% { transform:translateY(0);opacity:0.4; } 30% { transform:translateY(-5px);opacity:1; } }

@media (max-width: 900px) {
    .sup-grid { grid-template-columns: 1fr; height: auto; }
    .sup-right { height: 480px; }
    .sup-wrapper { padding: 16px 20px 32px; }
    .sup-hero { margin-bottom: 24px; }
}

/* =====================================================
   AUTH LOGO WRAPPER — logo fixa acima dos cards
   ===================================================== */
#auth-logo-wrapper {
  position: fixed;
  top: 7vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(400px, 75vw);
  z-index: 20;
  display: none !important;
}
body.planet-login #auth-logo-wrapper {
  display: block !important;
}
/* Esconde a logo durante a animação de transição */
body:has(#loginTransitionOverlay.lto-visible) #auth-logo-wrapper,
body:has(#loginTransitionOverlay.lto-fadeout) #auth-logo-wrapper {
  display: none !important;
}
#logo-container {
  position: relative;
  width: 100%;
  aspect-ratio: 226.28 / 73.81;
  cursor: crosshair;
  overflow: visible;
}
#logo-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
/* ── Logo modo claro — só cores, sem tocar no efeito ─── */
body.theme-light #normal-logo-layer #letter-o,
body.theme-light #normal-logo-layer #letter-n {
    fill: #222220;
}
body.theme-light #normal-logo-layer #icon-orbit-top,
body.theme-light #normal-logo-layer #icon-star-left,
body.theme-light #normal-logo-layer #icon-star-right,
body.theme-light #normal-logo-layer #icon-star-top,
body.theme-light #normal-logo-layer #icon-orbit-bottom {
    fill: #222220;
}
body.theme-light #normal-logo-layer #tagline-text {
    fill: #222220;
}
body.theme-light #normal-logo-layer g:last-of-type path {
    fill: #222220;
}
/* Trace layer — contornos escuros no modo claro */
body.theme-light #trace-logo-layer path[stroke="#fff"],
body.theme-light #trace-logo-layer path[stroke="#fff"][fill="none"] {
    stroke: #222220;
}
body.theme-light #trace-logo-layer text {
    stroke: #222220;
}
/* O último path do trace layer tem fill="#fff" (ícone da árvore traçado) */
body.theme-light #trace-logo-layer > path[fill="#fff"] {
    fill: #222220;
    stroke: none;
}

#particle-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
}
#interaction-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 3;
}
#trace-logo-layer {
  pointer-events: none;
  opacity: 0.18;
}
#ambient-trace-base,
#ambient-trace-sweep {
  pointer-events: none;
}
#ambient-trace-base { opacity: 0; }
#ambient-trace-sweep { opacity: 0.9; }
#ambient-trace-sweep .sweep-stroke {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Permite que o box-shadow do reg-card apareça em cima e embaixo */
#registerPage {
    overflow: visible;
}

/* =====================================================
   AURI — Widget de Chat Flutuante
   ===================================================== */

/* Esconde no login/cadastro */
body.planet-login #auri-widget,
body.planet-login #auri-btn { display: none !important; }

#auri-widget {
  position: fixed;
  bottom: 56px;
  right: 56px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  pointer-events: none;
}

/* ── Botão flutuante ── */
#auri-btn {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  animation: auriFloat 3.5s ease-in-out infinite;
  pointer-events: auto;
}
@keyframes auriFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}#auri-mascot-img {
  position: absolute;
  inset: -14px;
  width: calc(100% + 28px);
  height: calc(100% + 28px);
  object-fit: contain;
  z-index: 2;
}
#auri-glow {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-primary-rgb),0.35) 0%, transparent 70%);
  z-index: 0;
  animation: auriGlowPulse 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes auriGlowPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.12); }
}

/* Tooltip */
#auri-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) scale(0.88);
  background: rgba(5,2,12,0.92);
  border: 1px solid rgba(var(--accent-primary-rgb),0.35);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 0 20px rgba(var(--accent-primary-rgb),0.2);
}
#auri-tooltip::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right: 0;
  border-left-color: rgba(var(--accent-primary-rgb),0.35);
}
#auri-btn:hover #auri-tooltip {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* ── Painel de chat ── */
#auri-panel {
  width: 360px;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  background: rgba(5,2,12,0.82);
  border: 1px solid rgba(var(--accent-primary-rgb),0.22);
  border-radius: 24px;
  overflow: hidden;
  backdrop-filter: blur(40px);
  box-shadow: 0 0 80px rgba(var(--accent-strong-rgb),0.25), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
  position: relative;
  transform-origin: bottom right;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: auto;
}
#auri-panel::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.08), rgba(var(--accent-secondary-rgb),0.05), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
#auri-panel.auri-hidden {
  opacity: 0;
  transform: scale(0.88) translateY(12px);
  pointer-events: none;
}

/* Header */
#auri-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.03);
  border-radius: 24px 24px 0 0;
  flex-shrink: 0;
}
.auri-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auri-header-avatar {
  width: 82px;
  height: 82px;
  border-radius: 12px;
  overflow: visible;
  background: transparent;
  border: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auri-header-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: 50% 70%;
  transform: scale(1.26) translateY(5px);
  transform-origin: center center;
  mix-blend-mode: normal;
}
.auri-header-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.auri-header-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}
.auri-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a3e635;
  box-shadow: 0 0 6px #a3e635;
  animation: auriBlink 2s ease-in-out infinite;
}
@keyframes auriBlink {
  0%,100% { opacity: 1; } 50% { opacity: 0.4; }
}
.auri-header-status span {
  font-size: 9px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(163,230,53,0.9);
}
.auri-header-status span.auri-role {
  color: #ffffff;
  font-weight: 500;
}
#auri-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
  transition: background 0.15s, color 0.15s;
}
#auri-close:hover {
  background: rgba(var(--accent-secondary-rgb),0.15);
  color: rgba(var(--accent-secondary-rgb),0.8);
}

/* Messages area */
#auri-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 16px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: none;
}
#auri-messages::-webkit-scrollbar { display: none; }

.auri-system-tag {
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.04);
  padding: 5px 14px;
  border-radius: 20px;
  align-self: center;
}

/* Bot message */
.auri-row-bot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 92%;
}
.auri-row-bot .auri-avatar-sm {
  width: 54px;
  height: 54px;
  border-radius: 9px;
  overflow: hidden;
  background: transparent;
  border: none;
  flex-shrink: 0;
}
.auri-row-bot .auri-avatar-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  transform: scale(1.06);
  transform-origin: center;
  mix-blend-mode: normal;
}
.auri-bubble-bot {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(var(--accent-primary-rgb),0.12);
  border-radius: 16px;
  border-top-left-radius: 4px;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  font-family: 'Inter', sans-serif;
}
.auri-time {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.2);
  margin-top: 4px;
  font-family: 'Space Grotesk', sans-serif;
  padding-left: 2px;
}

/* User message */
.auri-row-user {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 88%;
  align-self: flex-end;
  flex-direction: row-reverse;
}
.auri-row-user .auri-user-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
}
.auri-bubble-user {
  background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
  border-radius: 16px;
  border-top-right-radius: 4px;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.55;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  box-shadow: 0 8px 20px rgba(var(--accent-primary-rgb),0.18);
}
.auri-time-user {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.2);
  margin-top: 4px;
  font-family: 'Space Grotesk', sans-serif;
  padding-right: 2px;
  text-align: right;
}

/* Typing indicator */
.auri-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 13px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(var(--accent-primary-rgb),0.12);
  border-radius: 16px;
  border-top-left-radius: 4px;
}
.auri-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(var(--accent-primary-rgb),0.7);
  animation: auriDot 1.2s ease-in-out infinite;
}
.auri-typing span:nth-child(2) { animation-delay: 0.2s; }
.auri-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes auriDot {
  0%,80%,100% { transform: scale(0.7); opacity: 0.4; }
  40%         { transform: scale(1);   opacity: 1; }
}

/* Input area */
#auri-input-area {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.auri-input-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(var(--accent-primary-rgb),0.18);
  border-radius: 16px;
  padding: 10px 12px 8px;
  transition: border-color 0.2s;
  position: relative;
}
.auri-input-box:focus-within {
  border-color: rgba(var(--accent-primary-rgb),0.45);
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb),0.08);
}
#auri-textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  min-height: 18px;
  max-height: 100px;
  line-height: 1.5;
  scrollbar-width: none;
}
#auri-textarea::-webkit-scrollbar { display: none; }
#auri-textarea::placeholder { color: rgba(255,255,255,0.25); }
.auri-input-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 6px;
}
#auri-send {
  background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end));
  border: none;
  border-radius: 10px;
  padding: 7px 14px;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(var(--accent-primary-rgb),0.3);
}
#auri-send:hover {
  opacity: 0.88;
  box-shadow: 0 6px 20px rgba(var(--accent-primary-rgb),0.45);
}
#auri-send .material-symbols-outlined { font-size: 14px; }

.auri-footer-tag {
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.15);
  margin-top: 8px;
}


/* =============================================================
 * ABA PLANEJAMENTOS
 * ============================================================= */
#tabPlanning {
    position: relative;
}

#tabPlanning.active {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 40px 48px;
}

.client-page-content:has(#tabPlanning.active) {
    overflow: hidden;
    padding: 0;
    position: relative;
}

.pln-shell {
    position: relative;
    padding: 8px 0 60px;
}

.pln-shell::before,
.pln-shell::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(80px);
    opacity: 0.55;
}

.pln-shell::before {
    width: 360px;
    height: 360px;
    right: -60px;
    top: -20px;
    background: rgba(var(--accent-strong-rgb), 0.18);
}

.pln-shell::after {
    width: 320px;
    height: 320px;
    left: -100px;
    bottom: 40px;
    background: rgba(var(--accent-secondary-rgb), 0.12);
}

.pln-inner {
    position: relative;
    z-index: 1;
    max-width: 1160px;
    margin: 0 auto;
}

.pln-hero {
    text-align: center;
    padding: 18px 0 30px;
}

.pln-overline,
.pln-table-head,
.pln-legend-label,
.pln-week-label,
.pln-footer-label {
    font-family: 'Argentum Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.26em;
}

.pln-overline {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    color: #f5b3d8;
    margin-bottom: 18px;
}

.pln-title {
    font-family: 'Argentum Sans', sans-serif;
    font-size: clamp(42px, 5.8vw, 82px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.045em;
    color: #f5f0ff;
    margin: 0;
}

.pln-title-accent {
    display: inline-block;
    background: linear-gradient(90deg, var(--title-grad-start) 0%, var(--title-grad-mid) 45%, var(--title-grad-end) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pln-subtitle {
    margin-top: 18px;
    margin-bottom: 24px;
    color: rgba(255,255,255,0.7);
    font-size: 19px;
    font-weight: 500;
}

.pln-toolbar {
    position: relative;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 auto 24px;
    padding: 12px 22px;
    background: rgba(16, 9, 25, 0.78);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 22px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 48px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
}

.pln-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pln-filter-btn,
.pln-print-btn,
.pln-footer-btn {
    border: none;
    cursor: pointer;
    transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, border-color 0.22s ease, opacity 0.22s ease;
}

.pln-filter-btn {
    padding: 10px 20px;
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,0.72);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.pln-filter-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
}

.pln-filter-btn.active {
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(177, 27, 141, 0.14);
}

.pln-toolbar-divider {
    width: 1px;
    height: 30px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.14), transparent);
    margin: 0 6px;
}

.pln-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 17px;
    border-radius: 999px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.28);
    color: #efc8ff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.pln-print-btn:hover,
.pln-footer-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--accent-primary-rgb),0.08);
}

.pln-note {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 22px;
    margin-bottom: 20px;
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    border: none;
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 4px 14px rgba(177, 27, 141, 0.14);
}

.pln-note .material-symbols-outlined {
    color: rgba(255,255,255,0.9);
    font-size: 22px;
}

.pln-note strong {
    color: #ffffff;
}

.pln-note p { color: #fff; }

.pln-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 28px;
}

.pln-legend-label {
    color: rgba(255,255,255,0.34);
    font-size: 11px;
    font-weight: 800;
}

.pln-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    border-radius: 12px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,0.08);
}

.pln-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pln-badge[data-type="Conversão"] {
    color: #59f0ba;
    background: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.22);
}
.pln-badge[data-type="Conversão"] .pln-badge-dot { background: #59f0ba; }

.pln-badge[data-type="Carrossel"] {
    color: #d6db55;
    background: rgba(195, 211, 63, 0.12);
    border-color: rgba(195, 211, 63, 0.24);
}
.pln-badge[data-type="Carrossel"] .pln-badge-dot { background: #d6db55; }

.pln-badge[data-type="Estático"] {
    color: #ffbdcf;
    background: rgba(255, 178, 184, 0.11);
    border-color: rgba(255, 178, 184, 0.22);
}
.pln-badge[data-type="Estático"] .pln-badge-dot { background: #ffbdcf; }

.pln-badge[data-type="Impacto"] {
    color: #59d7ff;
    background: rgba(34, 211, 238, 0.1);
    border-color: rgba(34, 211, 238, 0.22);
}
.pln-badge[data-type="Impacto"] .pln-badge-dot { background: #59d7ff; }

.pln-badge[data-type="Vídeo"],
.pln-badge[data-type="Bastidores"] {
    color: #c7bcff;
    background: rgba(180, 153, 255, 0.09);
    border-color: rgba(180, 153, 255, 0.18);
}
.pln-badge[data-type="Vídeo"] .pln-badge-dot,
.pln-badge[data-type="Bastidores"] .pln-badge-dot { background: #c7bcff; }

.pln-weeks {
    display: grid;
    gap: 28px;
}

.pln-week-card {
    position: relative;
    overflow: clip;
    background: linear-gradient(180deg, rgba(18, 10, 24, 0.96), rgba(14, 8, 19, 0.94));
    border: 1px solid rgba(255,255,255,0.055);
    border-radius: 22px;
    box-shadow: 0 24px 55px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.03);
}

.pln-week-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(var(--accent-primary-rgb),0.09), transparent 34%),
                radial-gradient(circle at bottom left, rgba(var(--accent-secondary-rgb),0.08), transparent 38%);
    pointer-events: none;
}

.pln-week-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 28px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.015);
}

.pln-week-head-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pln-week-label {
    font-size: 11px;
    font-weight: 900;
    color: var(--accent-primary);
}

.pln-week-title {
    font-size: 34px;
    font-weight: 900;
    color: var(--accent-light-bg);
    line-height: 1;
}

.pln-week-icon {
    color: rgba(212, 220, 255, 0.6);
    font-size: 30px;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.pln-table-wrap {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
}

.pln-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
    table-layout: fixed;
}

/* Column widths: Tipo | Headline | Copy | Actions */
.pln-table colgroup col:nth-child(1) { width: 140px; }
.pln-table colgroup col:nth-child(2) { width: 38%; }
.pln-table colgroup col:nth-child(3) { width: auto; }
.pln-table colgroup col:nth-child(4) { width: 72px; }

.pln-row-title,
.pln-row-subtitle,
.pln-row-copy,
.pln-row-cta {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.pln-table thead th {
    text-align: left;
    padding: 14px 28px;
    color: rgba(193, 184, 214, 0.5);
    font-size: 11px;
    font-weight: 800;
    border-bottom: 1px solid rgba(var(--accent-primary-rgb),0.15);
    background: rgba(255,255,255,0.02);
}

.pln-row td {
    padding: 20px 28px;
    border-top: 1px solid rgba(255,255,255,0.07);
    vertical-align: top;
}

.pln-row:first-child td {
    border-top: none;
}

.pln-row:hover {
    background: rgba(255,255,255,0.03);
}

.pln-row + .pln-row td {
    border-top: 1px solid rgba(var(--accent-primary-rgb),0.1);
}

.pln-row-title {
    font-size: 17px;
    font-weight: 800;
    color: #f2b7ff;
    line-height: 1.3;
    margin-bottom: 4px;
}

.pln-row-subtitle {
    font-size: 13px;
    font-style: normal;
    color: rgba(255,255,255,0.9);
    line-height: 1.5;
}

.pln-row-copy {
    max-width: 520px;
    color: rgba(255,255,255,0.82);
    font-size: 14px;
    line-height: 1.62;
}

.pln-row td:nth-child(2),
.pln-table thead th:nth-child(2) {
    border-left: 1px solid rgba(var(--accent-primary-rgb),0.12);
    padding-left: 32px;
}

.pln-row td:nth-child(3),
.pln-table thead th:nth-child(3) {
    border-left: 1px solid rgba(var(--accent-primary-rgb),0.12);
    padding-left: 32px;
}

.pln-footer {
    display: flex;
    justify-content: center;
    padding: 24px 0 6px;
}

.pln-footer-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: rgba(181, 187, 212, 0.64);
    font-family: 'Argentum Sans', sans-serif;
}

.pln-footer-btn .material-symbols-outlined {
    font-size: 34px;
}

.pln-footer-btn:hover {
    color: var(--accent-primary);
}

.pln-footer-label {
    font-size: 11px;
    font-weight: 800;
}

.pln-week-card.is-hidden {
    display: none;
}

@media (max-width: 980px) {
    .pln-toolbar {
        top: 12px;
        border-radius: 18px;
        padding: 12px;
    }

    .pln-filter-btn {
        padding: 10px 16px;
        font-size: 13px;
    }

    .pln-week-title {
        font-size: 30px;
    }

    .pln-row-title {
        font-size: 17px;
    }
}

@media (max-width: 720px) {
    .client-page-content {
        padding: 24px 20px;
    }

    .pln-shell {
        padding-bottom: 30px;
    }

    .pln-title {
        font-size: 42px;
    }

    .pln-subtitle {
        font-size: 15px;
        line-height: 1.6;
    }

    .pln-toolbar {
        align-items: stretch;
    }

    .pln-filters {
        width: 100%;
    }

    .pln-toolbar-actions {
        width: 100%;
        display: flex;
        justify-content: stretch;
    }

    .pln-print-btn {
        width: 100%;
        justify-content: center;
    }

    .pln-note {
        padding: 16px;
        border-radius: 16px;
    }

    .pln-table {
        min-width: 760px;
    }

    .pln-row td,
    .pln-table thead th,
    .pln-week-head {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media print {
    body * {
        visibility: hidden !important;
    }

    #tabPlanning,
    #tabPlanning * {
        visibility: visible !important;
    }

    #tabPlanning {
        position: absolute;
        inset: 0;
        width: 100%;
        padding: 0;
        background: var(--surface-base);
    }

    .client-page,
    .client-page-content,
    .client-tab-panel,
    #planningTabRoot,
    .pln-shell,
    .pln-inner {
        overflow: visible !important;
        height: auto !important;
    }

    .pln-toolbar,
    .pln-footer,
    .client-page-bar,
    .planet-wrapper,
    #auri-btn,
    #auri-panel {
        display: none !important;
    }

    .pln-week-card {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 20px;
        box-shadow: none;
    }
}

/* ── Planning edit controls ───────────────────────────────── */
.pln-edit-week-btn {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.pln-edit-week-btn:hover { background: rgba(var(--accent-primary-rgb),0.15); color: var(--accent-primary); border-color: rgba(var(--accent-primary-rgb),0.3); }
.pln-edit-week-btn .material-symbols-outlined { font-size: 17px; }

.pln-table-head-actions { width: 68px; }

.pln-row-actions-cell { white-space: nowrap; padding: 12px 14px !important; vertical-align: middle; }
.pln-row-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.25);
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
}
.pln-row-btn .material-symbols-outlined { font-size: 16px; }
.pln-row-btn:hover { background: rgba(255,255,255,0.08); }
.pln-row-edit:hover { color: var(--accent-primary); }
.pln-row-del:hover { color: #ff6e80; }

.pln-row-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #59f0ba;
}
.pln-row-cta .material-symbols-outlined { font-size: 13px; }

.pln-add-post-row {
    padding: 12px 28px 18px;
}
.pln-add-post-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 10px;
    color: rgba(255,255,255,0.80);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 9px 18px;
    transition: all 0.2s;
    width: 100%;
    justify-content: center;
}
.pln-add-post-btn:hover { background: rgba(var(--accent-primary-rgb),0.08); border-color: rgba(var(--accent-primary-rgb),0.35); color: var(--accent-primary); }
.pln-add-post-btn .material-symbols-outlined { font-size: 18px; }


/* ── Planning modals (uses same visual language as task modal) ── */
.pln-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.pln-modal-overlay.open { opacity: 1; visibility: visible; }
.pln-modal-overlay.open .pln-modal { transform: translateY(0) scale(1); }

.pln-modal {
    background: rgba(53,53,52,0.45);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(var(--accent-primary-rgb),0.08);
    border-radius: 16px;
    width: 95vw;
    max-width: 620px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 100px rgba(0,0,0,0.7);
    overflow: hidden;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    position: relative;
}
.pln-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.2), rgba(255,178,184,0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.pln-modal--sm { max-width: 420px; }

.pln-modal .tm-body { padding: 24px 32px; }
.pln-modal .tm-section { margin-bottom: 18px; }
.pln-modal .tm-label { margin-bottom: 8px; }

/* Type chips inside modal */
.pln-type-chips {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.pln-type-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.80);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
    text-align: center;
    line-height: 1.2;
}
.pln-type-chip .material-symbols-outlined { font-size: 20px; }
.pln-type-chip:hover { background: rgba(var(--accent-primary-rgb),0.08); color: var(--accent-primary); border-color: rgba(var(--accent-primary-rgb),0.25); }
.pln-type-chip.active {
    background: rgba(var(--accent-primary-rgb),0.14);
    color: var(--accent-primary);
    border-color: rgba(var(--accent-primary-rgb),0.45);
    box-shadow: 0 0 12px rgba(var(--accent-primary-rgb),0.12);
}

/* type chips coluna (dentro do modal de post) */
.pln-type-chips--col {
    flex-direction: column;
    gap: 8px;
}
.pln-type-chips--col .pln-type-chip {
    width: 100%;
    text-align: left;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
}

.pln-hero-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    color: rgba(255,255,255,0.4);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 16px;
    cursor: pointer;
    transition: all 0.2s;
}
.pln-hero-edit-btn:hover {
    background: rgba(var(--accent-primary-rgb),0.1);
    border-color: rgba(var(--accent-primary-rgb),0.35);
    color: var(--accent-primary);
}
.pln-hero-edit-btn .material-symbols-outlined { font-size: 14px; }

.pln-row-roteiro-label {
    font-family: 'Argentum Sans', sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(var(--accent-primary-rgb),0.6);
    margin-bottom: 6px;
}


/* Primary gradient buttons use white text/icons for better contrast */
.mtr-btn-primary .material-symbols-outlined,
.mtr-period-btn-primary .material-symbols-outlined,
.fb-btn-submit .material-symbols-outlined,
.prj-btn-calc .material-symbols-outlined,
.ic-edit-btn .material-symbols-outlined,
.ic-save-btn .material-symbols-outlined,
.acc-save-btn .material-symbols-outlined {
    color: #fff;
}


/* =============================================================
 * TEMA CLARO — GLOBAL (todas as seções restantes)
 * ============================================================= */

/* ── Sidebar ── */
body.theme-light .sidebar {
    background: rgba(255,255,255,0.92);
    border-right-color: rgba(var(--accent-strong-rgb),0.16);
    box-shadow: 4px 0 24px rgba(var(--accent-strong-rgb),0.10), 0 0 0 1px rgba(var(--accent-strong-rgb),0.06);
}
body.theme-light .sidebar::before {
    background: linear-gradient(135deg, rgba(var(--accent-strong-rgb),0.05), rgba(var(--accent-secondary-rgb),0.03), transparent 60%);
}
body.theme-light .sidebar-overlay { background: rgba(var(--accent-readable-rgb),0.30); }
body.theme-light .sidebar-profile { border-bottom-color: rgba(var(--accent-readable-rgb),0.08); }
body.theme-light .sidebar-user-name  { color: var(--text-primary); }
body.theme-light .sidebar-user-email { color: rgba(var(--accent-readable-rgb),0.45); }
body.theme-light .sidebar-section-label { color: rgba(var(--accent-readable-rgb),0.35); }
body.theme-light .sidebar-btn {
    background: rgba(var(--accent-readable-rgb),0.03);
    border-color: rgba(var(--accent-readable-rgb),0.08);
    color: rgba(var(--accent-readable-rgb),0.72);
}
body.theme-light .sidebar-btn:hover {
    background: rgba(var(--accent-strong-rgb),0.07);
    border-color: rgba(var(--accent-strong-rgb),0.20);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(var(--accent-strong-rgb),0.08);
}
body.theme-light .sidebar-btn.active { color: #fff; }
body.theme-light .sidebar-btn::before { background: rgba(var(--accent-readable-rgb),0.5); }
body.theme-light .sidebar-btn-logout { color: rgba(180,40,60,0.75); }

/* ── Header principal + busca ── */
body.theme-light .header-container {
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(var(--accent-strong-rgb), 0.12);
    box-shadow: 0 10px 26px rgba(17,24,39,0.08), 0 2px 8px rgba(17,24,39,0.04);
}
body.theme-light .header-container h1 {
    color: var(--text-primary);
    font-weight: 700;
}
body.theme-light .btn-create {
    background: var(--accent-gradient);
    border-color: rgba(var(--accent-primary-rgb), 0.28);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(var(--accent-secondary-rgb), 0.20), inset 0 1px 0 rgba(255,255,255,0.18);
}
body.theme-light .btn-create:hover {
    background: linear-gradient(135deg, var(--brand-grad-mid) 0%, var(--brand-grad-end) 100%);
    border-color: rgba(var(--accent-primary-rgb), 0.34);
    box-shadow: 0 10px 20px rgba(var(--accent-secondary-rgb), 0.22), inset 0 1px 0 rgba(255,255,255,0.20);
}
body.theme-light .btn-customize {
    background: rgba(255,255,255,0.86);
    border-color: rgba(var(--accent-strong-rgb), 0.18);
    color: rgba(23,19,31,0.72);
}
body.theme-light .btn-customize:hover {
    background: rgba(255,255,255,0.96);
    border-color: rgba(var(--accent-strong-rgb), 0.26);
}
body.theme-light .search-box {
    background: rgba(255,255,255,0.86);
    border-color: rgba(var(--accent-strong-rgb), 0.18);
}
body.theme-light .search-box:focus-within {
    background: rgba(255,255,255,0.98);
    border-color: rgba(var(--accent-primary-rgb), 0.36);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.08);
}
body.theme-light .search-box input { color: rgba(23,19,31,0.88); }
body.theme-light .search-box input::placeholder { color: rgba(23,19,31,0.42); }
body.theme-light .search-icon { color: rgba(var(--accent-primary-rgb), 0.86); }

/* ── Client cards (dashboard) ── */
body.theme-light .client-card {
    box-shadow: 0 4px 18px rgba(0,0,0,0.09), 0 0 0 1.5px rgba(var(--accent-strong-rgb),0.14);
}
body.theme-light .card-header {
    background: var(--accent-light-card-header);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.7) 1px, transparent 1px),
        radial-gradient(circle at 75% 15%, rgba(255,255,255,0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.6) 1px, transparent 1px),
        radial-gradient(circle at 80% 60%, rgba(var(--accent-primary-rgb),0.25) 40px, transparent 60px),
        radial-gradient(ellipse at 50% 50%, var(--accent-light-card-radial-1) 0%, var(--accent-light-card-radial-2) 100%);
    border-bottom: 1px solid rgba(var(--accent-strong-rgb),0.08);
}
body.theme-light .card-header h2 { color: var(--accent-readable-2); text-shadow: none; }
body.theme-light .card-header .doc { color: var(--accent-readable-2); text-shadow: none; }
body.theme-light .card-header .dot { color: var(--accent-secondary); }
body.theme-light .card-header .arts { color: var(--accent-secondary); text-shadow: none; }
body.theme-light .card-header .subtitle { color: rgba(23,19,31,0.62); }
body.theme-light .card-footer {
    background: #ffffff;
    border-top: 1px solid rgba(var(--accent-strong-rgb),0.08);
}
body.theme-light .status-ativo    { background: rgba(0, 180, 90, 0.12);  color: #00873a; border-color: rgba(0, 180, 90, 0.35); }
body.theme-light .status-pendente { background: rgba(200, 140, 0, 0.12); color: #a06800; border-color: rgba(200, 140, 0, 0.35); }
body.theme-light .status-inativo  { background: rgba(220, 50, 50, 0.12); color: #c02020; border-color: rgba(220, 50, 50, 0.35); }
body.theme-light .status-concluido{ background: rgba(0, 140, 200, 0.12); color: #0070a8; border-color: rgba(0, 140, 200, 0.35); }
body.theme-light .card-footer-name { color: var(--text-primary); }
body.theme-light .card-footer-date { color: rgba(var(--accent-readable-rgb),0.45); }

/* ── Client page (ao abrir um cliente) ── */
body.theme-light .client-page { background: var(--accent-light-bg-2); }
body.theme-light .client-page-content {
    background: var(--accent-light-bg-2);
}
body.theme-light .client-bar-back { background: #ffffff; color: var(--accent-readable); border-color: rgba(255,255,255,0.70); box-shadow: 0 8px 18px rgba(var(--accent-readable-rgb), 0.14); }
body.theme-light .client-bar-back:hover { color: var(--accent-readable); background: #ffffff; box-shadow: 0 10px 22px rgba(var(--accent-readable-rgb), 0.20); }
body.theme-light .client-bar-name { color: #fff; }
body.theme-light .client-bar-tab {
    background: rgba(0,0,0,0.12);
    color: rgba(255,255,255,0.80);
}
body.theme-light .client-bar-tab:hover { background: rgba(0,0,0,0.20); color: #fff; }
body.theme-light .client-bar-tab.active { background: rgba(255,255,255,0.22); color: #fff; }
body.theme-light .client-bar-shortcut {
    background: rgba(0,0,0,0.12);
    color: rgba(255,255,255,0.80);
}
body.theme-light .client-bar-shortcut:hover { background: rgba(0,0,0,0.22); color: #fff; }

/* ── Minha Conta (acc-*) ── */
body.theme-light .acc-title    { color: var(--text-primary); }
body.theme-light .acc-subtitle { color: rgba(var(--accent-readable-rgb),0.50); }
body.theme-light .acc-card {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.22);
    box-shadow: 0 4px 18px rgba(0,0,0,0.07), 0 0 0 1.5px rgba(var(--accent-strong-rgb),0.14);
}
body.theme-light .acc-card-header h3 { color: var(--text-primary); }
body.theme-light .acc-avatar { background: var(--accent-light-bg-2); }
body.theme-light .acc-avatar-label { color: rgba(var(--accent-readable-rgb),0.40); }
body.theme-light .acc-field-label   { color: rgba(var(--accent-readable-rgb),0.45); }
body.theme-light .acc-input {
    background: var(--accent-light-bg-2);
    color: var(--text-primary);
    border-bottom-color: transparent;
}
body.theme-light .acc-input:focus {
    background: var(--accent-light-bg-4);
    border-bottom-color: var(--accent-strong);
}
body.theme-light .acc-plan-box { background: var(--accent-light-bg); }
body.theme-light .acc-plan-price { color: var(--text-primary); }
body.theme-light .acc-plan-price span,
body.theme-light .acc-plan-sub,
body.theme-light .acc-plan-cycle  { color: rgba(var(--accent-readable-rgb),0.45); }
body.theme-light .acc-plan-bar    { background: rgba(var(--accent-readable-rgb),0.10); }
body.theme-light .acc-plan-btn {
    background: rgba(var(--accent-readable-rgb),0.06);
    border-color: rgba(var(--accent-readable-rgb),0.12);
    color: var(--text-primary);
}
body.theme-light .acc-plan-btn:hover { background: rgba(var(--accent-readable-rgb),0.10); }
body.theme-light .acc-session {
    background: var(--accent-light-bg);
    color: var(--text-primary);
}
body.theme-light .acc-session:hover { background: rgba(var(--accent-primary-rgb),0.07); }
body.theme-light .acc-session-icon { background: var(--accent-light-bg-4); }
body.theme-light .acc-session-icon .material-symbols-outlined { color: rgba(var(--accent-readable-rgb),0.40); }
body.theme-light .acc-session-name     { color: var(--text-primary); }
body.theme-light .acc-session-location { color: rgba(var(--accent-readable-rgb),0.45); }
body.theme-light .acc-end-all {
    background: rgba(255,255,255,0.80);
    border-color: rgba(180,40,60,0.30);
}

/* ── Configurações (cfg-*) ── */
body.theme-light .cfg-toggle { background: rgba(var(--accent-readable-rgb),0.15); }
body.theme-light .cfg-toggle::after { background: #ffffff; }
body.theme-light .cfg-notif-text h4 { color: var(--text-primary); }
body.theme-light .cfg-notif-text p  { color: rgba(var(--accent-readable-rgb),0.50); }
body.theme-light .cfg-notif-row + div p[style*="color:#fff"],
body.theme-light p[style*="color:#fff"] { color: var(--text-primary) !important; }
body.theme-light p[style*="color:#ababab"] { color: rgba(var(--accent-readable-rgb),0.50) !important; }
body.theme-light .cfg-select {
    background: var(--accent-light-bg-2);
    color: var(--text-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238a1a9c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 20px;
}
body.theme-light .cfg-select:focus { background-color: var(--accent-light-bg-4); }
body.theme-light .cfg-select option { background: #ffffff; color: var(--accent-readable-2); }
body.theme-light .cfg-theme-bar {
    background: var(--accent-light-bg-2);
    border-color: rgba(var(--accent-readable-rgb),0.08);
}
body.theme-light .cfg-theme-btn { color: rgba(var(--accent-readable-rgb),0.45); }
body.theme-light .cfg-theme-btn.active {
    background: #ffffff;
    color: var(--accent-strong);
    box-shadow: 0 2px 8px rgba(var(--accent-strong-rgb),0.12);
}
body.theme-light .cfg-auto-hint { border-color: rgba(var(--accent-readable-rgb),0.14); }
body.theme-light .cfg-discard-btn { color: rgba(var(--accent-readable-rgb),0.50); }
body.theme-light .cfg-discard-btn:hover { color: var(--text-primary); }
body.theme-light .cfg-integration-row { border-bottom-color: rgba(var(--accent-readable-rgb),0.06); }
body.theme-light .cfg-integration-row:hover { background: rgba(var(--accent-strong-rgb),0.04); }
body.theme-light .cfg-integration-name { color: var(--text-primary); }
body.theme-light .cfg-team-name  { color: var(--text-primary); }
body.theme-light .cfg-team-email { color: rgba(var(--accent-readable-rgb),0.50); }

/* ── Feedback (fb-*) ── */
body.theme-light .fb-title    { color: var(--text-primary); }
body.theme-light .fb-subtitle { color: rgba(var(--accent-readable-rgb),0.35); }
body.theme-light .fb-card {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.14);
    box-shadow: 0 4px 20px rgba(var(--accent-strong-rgb),0.08);
}
body.theme-light .fb-section-title { color: var(--text-primary); }
body.theme-light .fb-star .material-symbols-outlined { color: rgba(var(--accent-readable-rgb),0.15); }
body.theme-light .fb-efficiency { color: rgba(var(--accent-readable-rgb),0.35); }


/* =============================================================
 * TEMA CLARO — ABAS DO CLIENTE
 * ============================================================= */

/* ── Informações (ic-*) ── */
body.theme-light .ic-card {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.24);
    box-shadow: 0 4px 18px rgba(0,0,0,0.08), 0 0 0 1.5px rgba(var(--accent-strong-rgb),0.16);
}
body.theme-light .ic-card-header h3 { color: var(--text-primary); }
body.theme-light .ic-field-label { color: rgba(var(--accent-readable-rgb),0.45); }
body.theme-light .ic-field-value { color: var(--text-primary); }
body.theme-light .ic-field-input {
    background: var(--accent-light-bg-2);
    border-color: rgba(var(--accent-readable-rgb),0.14);
    color: var(--text-primary);
}
body.theme-light .ic-field-input::placeholder { color: rgba(var(--accent-readable-rgb),0.30); }
body.theme-light .ic-field-input:focus {
    background: var(--accent-light-bg-4);
    border-color: rgba(var(--accent-strong-rgb), 0.50);
}
body.theme-light .ic-field-input-amount {
    background: var(--accent-light-bg-2);
    border-color: rgba(255,110,128,0.35);
    color: #c5003f;
}
body.theme-light .ic-field-select {
    background: var(--accent-light-bg-2);
    border-color: rgba(var(--accent-readable-rgb),0.14);
    color: var(--text-primary);
}
body.theme-light .ic-field-select option { background: #ffffff; color: var(--accent-readable-2); }
body.theme-light .ic-card-edit { color: rgba(var(--accent-readable-rgb),0.35); }
body.theme-light .ic-card-edit:hover { color: var(--accent-strong); background: rgba(var(--accent-strong-rgb), 0.08); }

/* ── Tarefas / Kanban (kb-*) ── */
body.theme-light .kb-summary-bar {
    background: #ffffff;
    border-color: rgba(var(--accent-primary-rgb),0.28);
    box-shadow: 0 4px 24px rgba(var(--accent-strong-rgb),0.10), 0 0 0 1px rgba(var(--accent-primary-rgb),0.08);
}
body.theme-light .kb-main-title { color: var(--text-primary); }
body.theme-light .kb-main-sub   { color: rgba(var(--accent-readable-rgb),0.45); }
body.theme-light .kb-lane {
    background: #ffffff;
    border-color: rgba(var(--accent-primary-rgb),0.25);
    box-shadow: 0 4px 24px rgba(var(--accent-strong-rgb),0.08), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
}
body.theme-light .kb-lane-andamento {
    background: rgba(192,82,255,0.07);
    border-color: rgba(192,82,255,0.25);
}
body.theme-light .kb-lane-empty .kb-lane-header {
    border-bottom-color: rgba(var(--accent-readable-rgb),0.06);
}
body.theme-light .kb-lane-header { border-bottom-color: rgba(var(--accent-readable-rgb),0.06); }
body.theme-light .kb-lane-title { color: rgba(var(--accent-readable-rgb),0.85); }
body.theme-light .kb-lane-drag-handle { color: rgba(var(--accent-readable-rgb),0.25); }
body.theme-light .kb-lane-drag-handle:hover { color: var(--accent-strong); }
body.theme-light .kb-card {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-primary-rgb),0.22);
    box-shadow: 0 2px 12px rgba(var(--accent-strong-rgb),0.06);
}
body.theme-light .kb-card:hover {
    border-color: rgba(var(--accent-primary-rgb),0.45);
    box-shadow: 0 8px 24px rgba(var(--accent-strong-rgb),0.12);
}
body.theme-light .kb-card-foot { border-top-color: rgba(var(--accent-readable-rgb),0.05); }
body.theme-light .kb-card-drag-handle {
    color: rgba(var(--accent-readable-rgb),0.50);
    background: rgba(var(--accent-readable-rgb),0.06);
    border-color: rgba(var(--accent-readable-rgb),0.10);
}
body.theme-light .kb-card-drag-handle:hover { color: var(--accent-strong); background: rgba(var(--accent-strong-rgb), 0.08); border-color: rgba(var(--accent-strong-rgb), 0.15); }
body.theme-light .kb-card-add {
    background: rgba(var(--accent-readable-rgb),0.02);
    border-color: rgba(var(--accent-readable-rgb),0.12);
}
body.theme-light .kb-card-add:hover { border-color: rgba(var(--accent-strong-rgb), 0.30); }

/* ── Métricas (mtr-*) ── */
body.theme-light .mtr-title { color: var(--text-primary); }
body.theme-light .mtr-card {
    background: #ffffff;
    border-color: rgba(var(--accent-primary-rgb),0.28);
    box-shadow: 0 4px 24px rgba(var(--accent-strong-rgb),0.10), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
}
body.theme-light .mtr-chart-card {
    background: rgba(244,240,252,0.85);
    border-color: rgba(var(--accent-primary-rgb),0.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.80);
}
body.theme-light .mtr-card-label {
    border-bottom-color: rgba(var(--accent-readable-rgb),0.06);
    color: var(--text-primary);
}
body.theme-light .mtr-card-eyebrow { color: rgba(var(--accent-readable-rgb),0.35); }
body.theme-light .mtr-card-big { color: var(--text-primary); }
body.theme-light .mtr-card-mid { color: var(--text-primary); }
body.theme-light .mtr-chart-title { color: var(--text-primary); }
body.theme-light .mtr-period {
    background: rgba(var(--accent-readable-rgb),0.05);
    border-color: rgba(var(--accent-readable-rgb),0.10);
    color: rgba(var(--accent-readable-rgb),0.65);
}
body.theme-light .mtr-period:hover {
    background: rgba(var(--accent-readable-rgb),0.08);
    border-color: rgba(var(--accent-strong-rgb), 0.25);
}
body.theme-light .mtr-period-chevron { color: rgba(var(--accent-readable-rgb),0.35) !important; }
body.theme-light .mtr-period-popover {
    background: linear-gradient(180deg, #ffffff, var(--accent-light-bg));
    border-color: rgba(var(--accent-readable-rgb),0.10);
    box-shadow: 0 18px 48px rgba(var(--accent-readable-rgb),0.16), 0 0 26px rgba(var(--accent-primary-rgb),0.08);
}
body.theme-light .mtr-period-popover-head h4 { color: var(--text-primary); }
body.theme-light .mtr-period-popover-head p  { color: rgba(var(--accent-readable-rgb),0.45); }
body.theme-light .mtr-period-field input {
    background: var(--accent-light-bg-2);
    border-color: rgba(var(--accent-readable-rgb),0.10);
    color: var(--text-primary);
}
body.theme-light .mtr-period-field input:focus { border-color: rgba(var(--accent-strong-rgb), 0.40); }
body.theme-light .mtr-period-field input::-webkit-datetime-edit,
body.theme-light .mtr-period-field input::-webkit-datetime-edit-text,
body.theme-light .mtr-period-field input::-webkit-datetime-edit-month-field,
body.theme-light .mtr-period-field input::-webkit-datetime-edit-day-field,
body.theme-light .mtr-period-field input::-webkit-datetime-edit-year-field { color: var(--text-primary); }
body.theme-light .mtr-period-field input::-webkit-calendar-picker-indicator { filter: none; opacity: 0.55; }
body.theme-light .mtr-period-btn-ghost {
    background: rgba(var(--accent-readable-rgb),0.05);
    border-color: rgba(var(--accent-readable-rgb),0.10);
    color: rgba(var(--accent-readable-rgb),0.60);
}
body.theme-light .mtr-conversion-card {
    background: #ffffff;
    border-color: rgba(var(--accent-primary-rgb),0.28);
    box-shadow: 0 4px 24px rgba(var(--accent-strong-rgb),0.10);
}
body.theme-light .mtr-suggestion-card {
    background: #ffffff;
    border-color: rgba(var(--accent-primary-rgb),0.28);
    box-shadow: 0 4px 24px rgba(var(--accent-strong-rgb),0.10);
}
body.theme-light .mtr-suggestion-title { color: var(--text-primary); }
body.theme-light .mtr-suggestion-text  { color: rgba(var(--accent-readable-rgb),0.55); }

/* ── Projeção de Investimentos (prj-*) ── */
body.theme-light .prj-title    { color: var(--accent-readable-2) !important; }
body.theme-light .prj-title-accent {
    background: linear-gradient(90deg, var(--title-grad-start) 0%, var(--title-grad-mid) 45%, var(--title-grad-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
body.theme-light .prj-subtitle { color: rgba(var(--accent-readable-rgb),0.40); }
body.theme-light .prj-card {
    background: #ffffff;
    border-color: rgba(var(--accent-primary-rgb),0.28);
    box-shadow: 0 4px 24px rgba(var(--accent-strong-rgb),0.10), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
}
body.theme-light .prj-inputs-head { color: var(--text-primary); }
body.theme-light .prj-field-label { color: rgba(var(--accent-readable-rgb),0.50); }
body.theme-light .prj-field-input {
    background: var(--accent-light-bg-2);
    border-bottom-color: rgba(var(--accent-readable-rgb),0.12);
    color: var(--text-primary);
}
body.theme-light .prj-field-input::placeholder { color: rgba(var(--accent-readable-rgb),0.25); }
body.theme-light .prj-field-input:focus { border-bottom-color: var(--accent-strong); }
body.theme-light .prj-slider { background: rgba(var(--accent-readable-rgb),0.12); }
body.theme-light .prj-field-hint { color: rgba(var(--accent-strong-rgb), 0.55); }
body.theme-light .prj-bento-eyebrow { color: rgba(var(--accent-readable-rgb),0.55); }
body.theme-light .prj-bento-sub     { color: rgba(var(--accent-readable-rgb),0.60); }
body.theme-light .prj-bento-lucro   { background: rgba(var(--accent-primary-rgb),0.05); }
body.theme-light .prj-invest-bar    { background: rgba(var(--accent-readable-rgb),0.08); }
body.theme-light .prj-sec-label     { color: rgba(var(--accent-readable-rgb),0.30); }
body.theme-light .prj-insight-box-text  { color: rgba(var(--accent-readable-rgb),0.65); }
body.theme-light .prj-insight-empty     { color: rgba(var(--accent-readable-rgb),0.65); }
body.theme-light .prj-insight-empty strong { color: rgba(var(--accent-readable-rgb),0.65); }


/* =============================================================
 * TEMA CLARO — CORREÇÕES DE BUGS
 * ============================================================= */

/* ── Configurações: linhas escuras fixas ── */
body.theme-light .cfg-integration-row {
    background: var(--accent-light-bg-2);
    border-bottom-color: rgba(var(--accent-readable-rgb),0.06);
}
body.theme-light .cfg-integration-row:hover { background: var(--accent-light-bg-4); }
body.theme-light .cfg-team-member { background: var(--accent-light-bg-2); }

/* ── Feedback: textarea e membros ── */
body.theme-light .fb-label { color: var(--text-primary); }
body.theme-light .fb-textarea-wrap {
    background: #ffffff;
    border-color: rgba(var(--accent-readable-rgb),0.12);
}
body.theme-light .fb-textarea-wrap:focus-within {
    border-color: rgba(var(--accent-strong-rgb), 0.40);
    box-shadow: 0 0 0 3px rgba(var(--accent-strong-rgb), 0.07);
}
body.theme-light .fb-textarea { color: var(--text-primary); }
body.theme-light .fb-textarea::placeholder { color: rgba(var(--accent-readable-rgb),0.30); }
body.theme-light .fb-textarea-hint { color: rgba(var(--accent-readable-rgb),0.25); }
body.theme-light .fb-member {
    background: #ffffff;
    border-color: rgba(var(--accent-readable-rgb),0.12);
}
body.theme-light .fb-member:hover { border-color: rgba(var(--accent-strong-rgb), 0.30); }
body.theme-light .fb-member-name { color: var(--text-primary); }
body.theme-light .fb-member-role { color: rgba(var(--accent-readable-rgb),0.40); }
body.theme-light .fb-member-remove { color: rgba(var(--accent-readable-rgb),0.22); }
body.theme-light .fb-add-member { border-color: rgba(var(--accent-readable-rgb),0.18); color: rgba(var(--accent-readable-rgb),0.45); }

/* ── Central de Ajuda (sup-*) ── */
body.theme-light .sup-hero-title { color: var(--text-primary); }
body.theme-light .sup-hero-sub   { color: rgba(var(--accent-readable-rgb),0.45); }
body.theme-light .sup-bg-glow    { opacity: 0.20; }
body.theme-light .sup-card {
    background: #ffffff;
    border-color: rgba(var(--accent-primary-rgb),0.25);
    box-shadow: 0 4px 24px rgba(var(--accent-strong-rgb),0.08);
}
body.theme-light .sup-card:hover {
    border-color: rgba(var(--accent-primary-rgb),0.45);
    box-shadow: 0 4px 32px rgba(var(--accent-strong-rgb),0.14);
}
body.theme-light .sup-status-label { color: rgba(var(--accent-readable-rgb),0.65); }
body.theme-light .sup-status-val   { color: rgba(var(--accent-readable-rgb),0.55); }
body.theme-light .sup-status-item  { border-bottom-color: rgba(var(--accent-readable-rgb),0.06); }
body.theme-light .sup-quick-btn {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.08);
}
body.theme-light .sup-quick-btn:hover {
    background: var(--accent-light-bg-2);
    border-color: rgba(var(--accent-primary-rgb),0.35);
}
body.theme-light .sup-quick-title { color: rgba(var(--accent-readable-rgb),0.80); }
body.theme-light .sup-quick-sub   { color: rgba(var(--accent-readable-rgb),0.40); }
body.theme-light .sup-quick-arrow { color: rgba(var(--accent-readable-rgb),0.18); }
body.theme-light .sup-quick-btn:hover .sup-quick-arrow { color: rgba(var(--accent-strong-rgb), 0.50); }
body.theme-light .sup-chat-card {
    background: #ffffff;
    border-color: rgba(var(--accent-primary-rgb),0.30);
    box-shadow: 0 8px 32px rgba(var(--accent-strong-rgb),0.10), 0 1px 4px rgba(var(--accent-readable-rgb),0.06);
}
body.theme-light .sup-chat-card:hover { border-color: rgba(var(--accent-secondary-rgb),0.35); }

/* Header */
body.theme-light .sup-chat-header {
    background: linear-gradient(135deg, var(--accent-light-bg-2), var(--accent-light-bg-2));
    border-bottom-color: rgba(var(--accent-strong-rgb),0.10);
}
body.theme-light .sup-agent-name {
    color: var(--accent-readable-2);
}
body.theme-light .sup-agent-status {
    color: var(--accent-strong);
}
body.theme-light .sup-agent-dot {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.5);
}
body.theme-light .sup-agent-online {
    background: #22c55e;
    border-color: #ffffff;
}
body.theme-light .sup-agent-avatar {
    background: linear-gradient(135deg, rgba(var(--accent-strong-rgb),0.15), rgba(var(--accent-secondary-rgb),0.12));
    border-color: rgba(var(--accent-strong-rgb),0.25);
    box-shadow: 0 0 16px rgba(var(--accent-strong-rgb),0.10);
}
body.theme-light .sup-agent-avatar .material-symbols-outlined { color: var(--accent-strong) !important; }
body.theme-light .sup-chat-header-badge {
    background: rgba(var(--accent-strong-rgb), 0.08);
    border-color: rgba(var(--accent-strong-rgb), 0.20);
    color: var(--accent-strong);
}

/* Mensagens */
body.theme-light .sup-chat-body { background: var(--accent-light-bg); }
body.theme-light .sup-chat-messages::-webkit-scrollbar-thumb { background: rgba(var(--accent-strong-rgb),0.15); }

body.theme-light .sup-msg-avatar {
    background: rgba(var(--accent-strong-rgb),0.07);
    border-color: rgba(var(--accent-strong-rgb),0.14);
}
body.theme-light .sup-msg-bubble {
    color: var(--accent-readable-2);
}
body.theme-light .sup-msg-bubble strong { color: var(--accent-strong); }

/* Bubble recebida (Auri) */
body.theme-light .sup-bubble-in {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.12);
    box-shadow: 0 2px 8px rgba(var(--accent-strong-rgb),0.06);
}
/* Bubble enviada (usuário) */
body.theme-light .sup-bubble-out {
    background: linear-gradient(135deg, #f1228e18, var(--accent-strong)14);
    border-color: rgba(var(--accent-primary-rgb),0.30);
    color: var(--accent-readable-2);
}
body.theme-light .sup-msg-time { color: rgba(var(--accent-readable-rgb),0.35); }

/* Input */
body.theme-light .sup-chat-input-area {
    background: var(--accent-light-bg-2);
    border-top-color: rgba(var(--accent-strong-rgb),0.10);
}
body.theme-light .sup-input-wrap {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.16);
    box-shadow: 0 1px 4px rgba(var(--accent-strong-rgb),0.04);
}
body.theme-light .sup-input-wrap:focus-within {
    border-color: rgba(var(--accent-secondary-rgb),0.40);
    box-shadow: 0 0 0 3px rgba(var(--accent-secondary-rgb),0.07);
}
body.theme-light .sup-input { color: var(--accent-readable-2); }
body.theme-light .sup-input::placeholder { color: rgba(var(--accent-readable-rgb),0.35) !important; }

/* Footer rodapé */
body.theme-light .sup-footer-label { color: rgba(var(--accent-readable-rgb),0.28); }
body.theme-light .sup-footer-divider { background: rgba(var(--accent-readable-rgb),0.07); }


/* =============================================================
 * TEMA CLARO — FEEDBACK CARDS (fb-card interno)
 * ============================================================= */
body.theme-light .fb-card {
    background: #ffffff;
    border-color: rgba(var(--accent-primary-rgb),0.22);
    box-shadow: 0 4px 20px rgba(var(--accent-strong-rgb),0.08);
}
body.theme-light .fb-section-title { color: var(--text-primary); }
body.theme-light .fb-star .material-symbols-outlined { color: rgba(var(--accent-readable-rgb),0.14); }
body.theme-light .fb-efficiency { color: rgba(var(--accent-readable-rgb),0.35); }

/* Category cards */
body.theme-light .fb-cat-title { color: var(--text-primary); }
body.theme-light .fb-cat-desc  { color: rgba(var(--accent-readable-rgb),0.50); }

/* Badges: aumentar contraste no fundo branco */
body.theme-light .fb-badge-pink   { background: rgba(255,100,160,0.12); color: #c5003f; }
body.theme-light .fb-badge-purple { background: rgba(var(--accent-strong-rgb), 0.10); color: var(--accent-strong); }
body.theme-light .fb-badge-lime   { background: rgba(22,163,74,0.10); color: #166534; border-color: rgba(22,163,74,0.20); }

/* Slider track: invisível no branco */
body.theme-light .fb-slider { background: rgba(var(--accent-readable-rgb),0.10); }

/* Toggle inativo */
body.theme-light .fb-toggle {
    background: rgba(var(--accent-readable-rgb),0.12);
    border-color: rgba(var(--accent-readable-rgb),0.14);
}
body.theme-light .fb-toggle-thumb { background: rgba(var(--accent-readable-rgb),0.35); }
body.theme-light .fb-toggle.active .fb-toggle-thumb { background: #fff; }

/* Ícones coloridos: estavam apagados */
body.theme-light .fb-icon-pink { color: #d6006e; }
body.theme-light .fb-icon-lime { color: #15803d; }


/* =============================================================
 * TEMA CLARO — ESTRELAS E TOGGLES ATIVOS (rosa)
 * ============================================================= */

/* Estrelas inativas: visíveis como cinza claro */
body.theme-light .fb-star .material-symbols-outlined {
    color: rgba(var(--accent-readable-rgb),0.14) !important;
}
/* Estrelas ativas: rosa vibrante */
body.theme-light .fb-star.active .material-symbols-outlined {
    color: var(--accent-secondary) !important;
    filter: drop-shadow(0 0 8px rgba(var(--accent-secondary-rgb),0.40));
}

/* Toggles do feedback ativos: rosa */
body.theme-light .fb-toggle.active {
    background: linear-gradient(135deg, var(--accent-strong), var(--accent-secondary));
    box-shadow: 0 0 14px rgba(var(--accent-secondary-rgb),0.30);
    border-color: transparent;
}

/* Toggles de configurações ativos: rosa */
body.theme-light .cfg-toggle.active {
    background: linear-gradient(135deg, var(--accent-strong), var(--accent-secondary));
    box-shadow: 0 0 14px rgba(var(--accent-secondary-rgb),0.25);
}


/* =============================================================
 * TEMA CLARO — AURI PANEL (chat widget flutuante)
 * ============================================================= */
body.theme-light #auri-panel {
    background: #ffffff;
    border-color: rgba(var(--accent-primary-rgb),0.28);
    box-shadow: 0 8px 40px rgba(var(--accent-strong-rgb),0.14), 0 0 0 1px rgba(var(--accent-primary-rgb),0.10);
}
body.theme-light #auri-panel::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.06), rgba(var(--accent-secondary-rgb),0.04), transparent 60%);
}
/* Header */
body.theme-light #auri-header {
    background: linear-gradient(135deg, var(--accent-light-bg-2), var(--accent-light-bg-2));
    border-bottom-color: rgba(var(--accent-strong-rgb),0.09);
}
body.theme-light .auri-header-name { color: var(--accent-readable-2); }
body.theme-light .auri-header-status span { color: #22a05a; }
body.theme-light .auri-header-status span.auri-role { color: rgba(var(--accent-readable-rgb),0.55); }
body.theme-light .auri-status-dot {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.5);
}
body.theme-light #auri-close {
    color: rgba(var(--accent-readable-rgb),0.45);
}
body.theme-light #auri-close:hover {
    background: rgba(var(--accent-secondary-rgb),0.08);
    color: var(--accent-secondary);
}
/* Messages */
body.theme-light #auri-messages { background: var(--accent-light-bg); }
body.theme-light .auri-system-tag {
    color: rgba(var(--accent-readable-rgb),0.35);
    background: rgba(var(--accent-readable-rgb),0.05);
}
body.theme-light .auri-bubble-bot {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.12);
    color: var(--accent-readable-2);
    box-shadow: 0 2px 8px rgba(var(--accent-strong-rgb),0.06);
}
body.theme-light .auri-time { color: rgba(var(--accent-readable-rgb),0.30); }
body.theme-light .auri-time-user { color: rgba(var(--accent-readable-rgb),0.30); }
body.theme-light .auri-row-user .auri-user-icon {
    background: rgba(var(--accent-strong-rgb),0.07);
    border-color: rgba(var(--accent-strong-rgb),0.14);
    color: var(--accent-strong);
}
body.theme-light .auri-typing {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.12);
}
body.theme-light .auri-typing span { background: rgba(var(--accent-strong-rgb),0.45); }
/* Input */
body.theme-light #auri-input-area {
    border-top-color: rgba(var(--accent-strong-rgb),0.09);
    background: var(--accent-light-bg-2);
}
body.theme-light .auri-input-box {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.16);
}
body.theme-light .auri-input-box:focus-within {
    border-color: rgba(var(--accent-secondary-rgb),0.40);
    box-shadow: 0 0 0 3px rgba(var(--accent-secondary-rgb),0.07);
}
body.theme-light #auri-textarea {
    color: var(--accent-readable-2);
}
body.theme-light #auri-textarea::placeholder { color: rgba(var(--accent-readable-rgb),0.32); }


/* =============================================================
 * TEMA CLARO — LOGIN
 * ============================================================= */
body.theme-light .login-card {
    background: #ffffff;
    border-color: rgba(var(--accent-primary-rgb),0.30);
    box-shadow: 0 8px 48px rgba(var(--accent-strong-rgb),0.14), 0 0 0 1px rgba(var(--accent-primary-rgb),0.10);
}
body.theme-light .login-eyebrow { text-shadow: none; }
body.theme-light .login-title   { color: var(--text-primary); }
body.theme-light .login-subtitle { color: rgba(var(--accent-readable-rgb),0.50); }
body.theme-light .login-label   { color: rgba(var(--accent-readable-rgb),0.55); }
body.theme-light .login-input-wrap {
    background: var(--accent-light-bg-2);
    border-color: rgba(var(--accent-readable-rgb),0.12);
}
body.theme-light .login-input-wrap:focus-within {
    background: var(--accent-light-bg-4);
    border-color: rgba(var(--accent-strong-rgb), 0.45);
    box-shadow: 0 0 18px rgba(var(--accent-strong-rgb), 0.10);
}
body.theme-light .login-input-icon { color: rgba(var(--accent-readable-rgb),0.28); }
body.theme-light .login-input-wrap:focus-within .login-input-icon { color: var(--accent-strong); }
body.theme-light .login-input { color: var(--text-primary); }
body.theme-light .login-input::placeholder { color: rgba(var(--accent-readable-rgb),0.30); }
body.theme-light .login-eye { color: rgba(var(--accent-readable-rgb),0.28); }
body.theme-light .login-eye:hover { color: var(--accent-strong); }
body.theme-light .login-divider-line { background: rgba(var(--accent-readable-rgb),0.08); }
body.theme-light .login-divider-text { color: rgba(var(--accent-readable-rgb),0.30); }
body.theme-light .login-register-btn {
    border-color: rgba(var(--accent-readable-rgb),0.12);
    color: rgba(var(--accent-readable-rgb),0.50);
}
body.theme-light .login-register-btn:hover {
    border-color: rgba(var(--accent-strong-rgb), 0.30);
    color: var(--accent-strong);
    background: rgba(var(--accent-strong-rgb), 0.05);
}


/* =============================================================
 * TEMA CLARO — CADASTRO (reg-*)
 * ============================================================= */
body.theme-light .reg-card {
    background: #ffffff;
    border-color: rgba(var(--accent-primary-rgb),0.28);
    box-shadow: 0 8px 48px rgba(var(--accent-strong-rgb),0.14), 0 0 0 1px rgba(var(--accent-primary-rgb),0.08);
}
body.theme-light .reg-panel-head {
    border-bottom-color: rgba(var(--accent-readable-rgb),0.07);
}
body.theme-light .reg-config-step { color: rgba(var(--accent-strong-rgb), 0.65); }
body.theme-light .reg-panel-title  { color: var(--text-primary); }
body.theme-light .reg-panel-sub    { color: rgba(var(--accent-readable-rgb),0.40); }
body.theme-light .reg-fields       { border-bottom-color: rgba(var(--accent-readable-rgb),0.07); }
body.theme-light .reg-prev-btn     { color: rgba(var(--accent-readable-rgb),0.35); }
body.theme-light .reg-prev-btn:hover { color: rgba(var(--accent-readable-rgb),0.70); }

/* Barra de planetas */
body.theme-light .reg-stepbar-label { color: rgba(var(--accent-readable-rgb),0.30); }
body.theme-light .reg-stepbar-line  { background: rgba(var(--accent-readable-rgb),0.12); }


/* =============================================================
 * TEMA CLARO — PLANETAS INATIVOS (reg-stepbar)
 * ============================================================= */
body.theme-light .planet-inactive {
    filter: invert(1) opacity(0.75);
}
body.theme-light .reg-stepbar-label { color: rgba(var(--accent-readable-rgb),0.40); }
body.theme-light .reg-stepbar-active .reg-stepbar-label { color: var(--accent-strong); }
body.theme-light .reg-stepbar-done .reg-stepbar-label   { color: var(--accent-strong); }


/* =============================================================
 * TEMA CLARO — TOGGLE DE PLANOS (Mensal/Anual)
 * ============================================================= */
body.theme-light .plans-toggle-label { color: rgba(var(--accent-readable-rgb),0.55) !important; }
body.theme-light .plans-save-badge {
    background: rgba(22,163,74,0.10);
    color: #166534;
    border-color: rgba(22,163,74,0.25);
}


/* =============================================================
 * TEMA CLARO — SUPORTE: cabeçalho do chat + fonte Argentum Sans
 * ============================================================= */
body.theme-light .sup-agent-name { color: var(--text-primary); }
body.theme-light .sup-agent-status { color: rgba(180,0,80,0.85); }
body.theme-light .sup-chat-header-badge {
    background: rgba(var(--accent-strong-rgb), 0.08);
    border-color: rgba(var(--accent-strong-rgb), 0.22);
    color: var(--accent-strong);
}

/* Placeholder mais visível */
body.theme-light .sup-input::placeholder { color: rgba(var(--accent-readable-rgb),0.40) !important; }

/* Fonte Argentum Sans em todos os textos da aba de suporte */
body.theme-light .sup-quick-title,
body.theme-light .sup-quick-sub,
body.theme-light .sup-status-label,
body.theme-light .sup-status-val,
body.theme-light .sup-agent-name,
body.theme-light .sup-agent-status,
body.theme-light .sup-chat-header-badge,
body.theme-light .sup-msg-bubble,
body.theme-light .sup-input,
body.theme-light .sup-section-title,
body.theme-light .sup-hero-sub {
    font-family: 'Argentum Sans', sans-serif;
}


/* =============================================================
 * TEMA CLARO — SUPORTE: avatar, ícone docs, alinhamento input
 * ============================================================= */

/* Avatar do agente */
body.theme-light .sup-agent-avatar {
    background: rgba(var(--accent-strong-rgb), 0.12);
    border-color: rgba(var(--accent-strong-rgb), 0.30);
    box-shadow: 0 0 16px rgba(var(--accent-strong-rgb), 0.12);
}
body.theme-light .sup-agent-avatar .material-symbols-outlined { color: var(--accent-strong) !important; }
body.theme-light .sup-agent-online { border-color: #ffffff; }

/* Ícone da Documentação (inline style precisa de !important) */
body.theme-light #supBtnDocs .sup-quick-icon {
    background: rgba(var(--accent-readable-rgb),0.07) !important;
    box-shadow: none !important;
}
body.theme-light #supBtnDocs .sup-quick-icon .material-symbols-outlined {
    color: rgba(var(--accent-readable-rgb),0.55) !important;
}

/* Alinhar texto do input ao centro */
body.theme-light .sup-input-wrap { align-items: center; }


/* =============================================================
 * TEMA CLARO — SIDEBAR BOTÃO ATIVO (restaurar gradiente rosa)
 * ============================================================= */
body.theme-light .sidebar-btn.active {
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    box-shadow: 0 8px 28px rgba(var(--accent-secondary-rgb),0.24), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
body.theme-light .sidebar-btn.active:hover {
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%) !important;
    box-shadow: 0 8px 32px rgba(var(--accent-secondary-rgb),0.30) !important;
}


/* Tema claro — menu sanduíche */
body.theme-light .btn-hamburger span { background: rgba(var(--accent-readable-rgb),0.60); }
body.theme-light .btn-hamburger:hover span { background: rgba(var(--accent-readable-rgb),0.90); }


/* ── Sanduíche na barra do cliente ── */
.client-bar-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.client-bar-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.85);
    border-radius: 2px;
    transition: background 0.2s;
}
.client-bar-hamburger:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.30);
}
.client-bar-hamburger:hover span { background: #fff; }
body.theme-light .client-bar-hamburger {
    background: rgba(255,255,255,0.20);
    border-color: rgba(255,255,255,0.35);
}


/* ── Sanduíche em páginas com fundo claro (account, calendar, etc.) ── */
.client-page-back.client-bar-hamburger {
    background: rgba(var(--accent-readable-rgb),0.06);
    border: 1px solid rgba(var(--accent-readable-rgb),0.12);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    padding: 7px 6px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
}
.client-page-back.client-bar-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(var(--accent-readable-rgb),0.65);
    border-radius: 2px;
    transition: background 0.2s;
}
.client-page-back.client-bar-hamburger:hover {
    background: rgba(var(--accent-readable-rgb),0.10);
    border-color: rgba(var(--accent-readable-rgb),0.20);
    color: inherit;
}
.client-page-back.client-bar-hamburger:hover span { background: rgba(var(--accent-readable-rgb),0.90); }

/* Tema escuro: manter barrinhas brancas */
body:not(.theme-light) .client-page-back.client-bar-hamburger {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}
body:not(.theme-light) .client-page-back.client-bar-hamburger span {
    background: rgba(255,255,255,0.65);
}
body:not(.theme-light) .client-page-back.client-bar-hamburger:hover span {
    background: rgba(255,255,255,0.95);
}


/* =============================================================
 * TEMA CLARO — CHECKOUT (chk-*)
 * ============================================================= */
body.theme-light .chk-glow-purple { background: radial-gradient(circle, rgba(var(--accent-secondary-rgb),0.08) 0%, transparent 70%); }
body.theme-light .chk-glow-pink   { background: radial-gradient(circle, rgba(var(--accent-secondary-rgb),0.06) 0%, transparent 70%); }

body.theme-light .chk-title    { color: var(--text-primary); }
body.theme-light .chk-subtitle { color: rgba(var(--accent-readable-rgb),0.45); }

body.theme-light .chk-step          { color: rgba(var(--accent-secondary-rgb),0.85); }
body.theme-light .chk-section-title { color: var(--text-primary); }

body.theme-light .chk-glass {
    background: rgba(255,255,255,0.70);
    border-color: rgba(var(--accent-readable-rgb),0.08);
}

body.theme-light .chk-label { color: rgba(var(--accent-readable-rgb),0.45); }
body.theme-light .chk-input {
    color: var(--text-primary);
    border-bottom-color: rgba(var(--accent-readable-rgb),0.15);
}
body.theme-light .chk-input::placeholder { color: rgba(var(--accent-readable-rgb),0.25); }

body.theme-light .chk-method {
    background: rgba(255,255,255,0.70);
    border-color: rgba(var(--accent-readable-rgb),0.10);
}
body.theme-light .chk-method:hover {
    border-color: rgba(var(--accent-secondary-rgb),0.25);
    box-shadow: 0 0 20px rgba(var(--accent-secondary-rgb),0.08);
}
body.theme-light .chk-method-active {
    border-color: rgba(var(--accent-secondary-rgb),0.35);
    background: #ffffff;
    box-shadow: 0 0 30px rgba(var(--accent-secondary-rgb),0.10);
}
body.theme-light .chk-method-icon {
    background: rgba(var(--accent-readable-rgb),0.05);
    border-color: rgba(var(--accent-readable-rgb),0.10);
    color: var(--text-primary);
}
body.theme-light .chk-method-icon-active {
    color: var(--accent-strong);
    border-color: rgba(var(--accent-secondary-rgb),0.30);
    background: rgba(var(--accent-secondary-rgb),0.07);
    box-shadow: 0 0 12px rgba(var(--accent-secondary-rgb),0.18);
}
body.theme-light .chk-method-title { color: var(--text-primary); }
body.theme-light .chk-method-sub   { color: rgba(var(--accent-readable-rgb),0.55); }
body.theme-light .chk-radio        { border-color: rgba(var(--accent-readable-rgb),0.20); }
body.theme-light .chk-radio-active {
    border-color: var(--accent-strong);
    background: radial-gradient(circle, var(--accent-strong) 38%, transparent 38%);
    box-shadow: 0 0 10px rgba(var(--accent-secondary-rgb),0.40);
}

body.theme-light .chk-pix-area { border-top-color: rgba(var(--accent-readable-rgb),0.08); }
body.theme-light .chk-qr-wrap {
    background: rgba(var(--accent-readable-rgb),0.04);
    border-color: rgba(var(--accent-readable-rgb),0.10);
}
body.theme-light .chk-pix-hint       { color: rgba(var(--accent-readable-rgb),0.45); }
body.theme-light .chk-pix-hint strong{ color: rgba(var(--accent-readable-rgb),0.65); }
body.theme-light .chk-card-fields    { border-top-color: rgba(var(--accent-readable-rgb),0.08); }

body.theme-light .chk-summary-card {
    background: rgba(255,255,255,0.80);
    border-color: rgba(var(--accent-secondary-rgb),0.20);
    box-shadow: 0 0 40px rgba(var(--accent-secondary-rgb),0.08), 0 0 0 1px rgba(var(--accent-secondary-rgb),0.06);
}
body.theme-light .chk-summary-inner-glow {
    background: radial-gradient(circle, rgba(var(--accent-secondary-rgb),0.10) 0%, transparent 70%);
}
body.theme-light .chk-summary-plan   { color: var(--text-primary); }
body.theme-light .chk-summary-period { color: rgba(var(--accent-readable-rgb),0.40); }
body.theme-light .chk-divider        { background: rgba(var(--accent-readable-rgb),0.08); }

body.theme-light .chk-features li { color: rgba(var(--accent-readable-rgb),0.60); }

body.theme-light .chk-total-box {
    background: rgba(var(--accent-readable-rgb),0.03);
    border-color: rgba(var(--accent-readable-rgb),0.07);
}
body.theme-light .chk-total-label { color: rgba(var(--accent-readable-rgb),0.45); }
body.theme-light .chk-total-val   { color: rgba(var(--accent-readable-rgb),0.80); }
body.theme-light .chk-total-title { color: var(--text-primary); }
body.theme-light .chk-total-final { color: var(--text-primary); }

body.theme-light .chk-legal { color: rgba(var(--accent-readable-rgb),0.35); }
body.theme-light .chk-trust { opacity: 0.45; }
body.theme-light .chk-trust-dot { background: rgba(var(--accent-readable-rgb),0.30); }

body.theme-light .chk-select {
    background: var(--accent-light-bg-2);
    border-color: rgba(var(--accent-readable-rgb),0.12);
    color: var(--text-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238a1a9c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 20px;
}
body.theme-light .chk-select:focus {
    border-color: rgba(var(--accent-secondary-rgb),0.40);
    background-color: var(--accent-light-bg-2);
}
body.theme-light .chk-select option { background: var(--accent-light-bg-2); color: var(--text-primary); }
body.theme-light .chk-select-arrow  { color: rgba(var(--accent-secondary-rgb),0.60); }


/* =============================================================
 * TEMA CLARO — SUCCESS MODAL
 * ============================================================= */
body.theme-light .success-modal-overlay {
    background: rgba(var(--accent-readable-rgb),0.35);
}
body.theme-light .success-modal-card {
    background: #ffffff;
    border-color: rgba(var(--accent-secondary-rgb),0.18);
    box-shadow: 0 30px 80px rgba(var(--accent-secondary-rgb),0.14), 0 0 0 1px rgba(var(--accent-secondary-rgb),0.08);
}
body.theme-light .success-glow-1 {
    background: radial-gradient(circle, rgba(var(--accent-secondary-rgb),0.10) 0%, transparent 70%);
}
body.theme-light .success-glow-2 {
    background: radial-gradient(circle, rgba(var(--accent-secondary-rgb),0.08) 0%, transparent 70%);
}
body.theme-light .success-title   { color: var(--text-primary); }
body.theme-light .success-message { color: rgba(var(--accent-readable-rgb),0.55); }
body.theme-light .success-message strong { color: var(--text-primary); }
body.theme-light .success-plan-badge {
    background: linear-gradient(90deg, rgba(var(--accent-secondary-rgb),0.08), rgba(var(--accent-secondary-rgb),0.06));
    border-color: rgba(var(--accent-secondary-rgb),0.25);
    color: var(--accent-strong);
    box-shadow: 0 0 16px rgba(var(--accent-secondary-rgb),0.10);
}


/* =============================================================
 * TEMA CLARO — Dashboard com fundo ilustrado + demais páginas claras
 * ============================================================= */
body.theme-light .planet-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
}
body.theme-light #planetCanvas {
    display: block !important;
    filter: drop-shadow(0px -8px 28px rgba(var(--accent-primary-rgb), 0.07));
}
body.theme-light .app-container {
    background: transparent;
}
body.theme-light .app-container::before,
body.theme-light .app-container::after {
    content: none !important;
}
/* Login usa CSS ::before — dashboard usa JS lightBgDiv (evita duplicidade) */
body.theme-light.planet-login::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: url("dashboard_light_bg.png") center bottom / cover no-repeat;
}

/* Fundo do login — sempre o padrão roxo */
body.theme-light.dashboard-light-scene::after,
body.theme-light.planet-login::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 84%, rgba(239, 176, 217, 0.03), transparent 28%);
}
body.theme-light .client-viewport,
body.theme-light .card-page {
    background: transparent;
}
body.theme-light .account-page,
body.theme-light .client-page,
body.theme-light .client-page-content,
body.theme-light .account-page-content {
    background-image: none !important;
}

/* =============================================================
 * TEMA CLARO — TAREFAS / KANBAN: refinamento de contraste
 * Mantém layout/tamanhos e ajusta apenas cores para seguir o padrão claro.
 * ============================================================= */
body.theme-light #tabTasks,
body.theme-light #kanbanContainer {
    color: var(--text-primary);
}

body.theme-light .kb-summary-bar {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.16);
    box-shadow: 0 4px 24px rgba(var(--accent-strong-rgb),0.10), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
}
body.theme-light .kb-summary-bar::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.045), rgba(var(--accent-secondary-rgb),0.025), transparent 62%);
}
body.theme-light .kb-main-title { color: var(--text-primary); }
body.theme-light .kb-main-sub { color: rgba(var(--accent-readable-rgb),0.50); }
body.theme-light .kb-view-toggle {
    background: rgba(var(--accent-readable-rgb),0.045);
    border-color: rgba(var(--accent-readable-rgb),0.08);
}
body.theme-light .kb-view-btn { color: rgba(var(--accent-readable-rgb),0.35); }
body.theme-light .kb-view-btn:hover { color: rgba(var(--accent-readable-rgb),0.72); background: rgba(var(--accent-readable-rgb),0.04); }
body.theme-light .kb-view-active,
body.theme-light .kb-view-active:hover {
    background: rgba(var(--accent-primary-rgb),0.16);
    color: var(--accent-strong);
}

body.theme-light .kb-stat {
    background: #ffffff;
    border-color: rgba(var(--accent-readable-rgb),0.08);
    box-shadow: 0 2px 10px rgba(var(--accent-strong-rgb),0.045);
}
body.theme-light .kb-stat:hover {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-strong-rgb), 0.22);
    box-shadow: 0 8px 22px rgba(var(--accent-strong-rgb),0.10);
}
body.theme-light .kb-stat-label { color: rgba(var(--accent-readable-rgb),0.46); }
body.theme-light .kb-stat-value { text-shadow: 0 0 12px currentColor; }
body.theme-light .kb-summary-progress .kb-deploy-label,
body.theme-light .kb-deploy-pct {
    color: var(--accent-strong);
    text-shadow: none;
}
body.theme-light .kb-summary-progress .kb-deploy-bar,
body.theme-light .kb-deploy-bar {
    background: rgba(var(--accent-readable-rgb),0.07);
}
body.theme-light .kb-summary-progress .kb-deploy-fill,
body.theme-light .kb-deploy-fill {
    box-shadow: 0 0 12px rgba(var(--accent-primary-rgb),0.28);
}

body.theme-light .kb-action-btn {
    background: rgba(var(--accent-readable-rgb),0.045);
    border-color: rgba(var(--accent-readable-rgb),0.09);
    color: rgba(var(--accent-readable-rgb),0.56);
}
body.theme-light .kb-action-btn:hover {
    background: rgba(var(--accent-primary-rgb),0.09);
    border-color: rgba(var(--accent-strong-rgb), 0.22);
    color: rgba(var(--accent-readable-rgb),0.82);
}
body.theme-light .kb-action-btn-active {
    background: rgba(var(--accent-primary-rgb),0.13);
    border-color: rgba(var(--accent-strong-rgb), 0.34);
    color: var(--accent-strong) !important;
}

body.theme-light .kb-lane {
    background: rgba(255,255,255,0.92);
    border-color: rgba(var(--accent-strong-rgb),0.22);
    box-shadow: 0 4px 20px rgba(0,0,0,0.07), 0 0 0 1.5px rgba(var(--accent-strong-rgb),0.13);
}
body.theme-light .kb-lane::after {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.06), rgba(var(--accent-secondary-rgb),0.03), transparent 64%);
}
body.theme-light .kb-lane-andamento {
    background: linear-gradient(160deg, rgba(192,82,255,0.13) 0%, rgba(230,200,255,0.08) 40%, rgba(255,255,255,0.96) 72%);
    border-color: rgba(192,82,255,0.38) !important;
    box-shadow: 0 4px 20px rgba(192,82,255,0.10), 0 0 0 1.5px rgba(192,82,255,0.20) !important;
}
body.theme-light .kb-lane-late {
    border-color: rgba(255,80,100,0.32) !important;
    box-shadow: 0 4px 20px rgba(255,80,100,0.07), 0 0 0 1.5px rgba(255,80,100,0.15) !important;
}
body.theme-light .kb-lane-header,
body.theme-light .kb-lane-empty .kb-lane-header {
    border-bottom-color: rgba(var(--accent-readable-rgb),0.07);
}
body.theme-light .kb-lane-title { color: rgba(var(--accent-readable-rgb),0.88); }
body.theme-light .kb-lane-sub {
    color: var(--lane-accent, var(--accent-strong));
    opacity: 0.78;
}
body.theme-light .kb-lane-count { color: rgba(var(--accent-readable-rgb),0.34); }
body.theme-light .kb-lane-drag-handle,
body.theme-light .kb-custom-lane-edit,
body.theme-light .kb-custom-lane-del {
    color: rgba(var(--accent-readable-rgb),0.28);
}
body.theme-light .kb-lane-add {
    border-color: rgba(var(--accent-readable-rgb),0.12);
    color: rgba(var(--accent-readable-rgb),0.44);
}
body.theme-light .kb-lane-add:hover {
    background: rgba(var(--accent-primary-rgb),0.10);
    border-color: rgba(var(--accent-strong-rgb), 0.24);
    color: var(--accent-strong);
}

body.theme-light .kb-card {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.16);
    box-shadow: 0 2px 14px rgba(var(--accent-strong-rgb),0.07);
}
body.theme-light .kb-card:hover {
    border-color: rgba(var(--accent-strong-rgb), 0.32);
    box-shadow: 0 10px 28px -10px rgba(var(--accent-strong-rgb),0.20);
}
body.theme-light .kb-card-body { color: var(--text-primary); }
body.theme-light .kb-due { color: rgba(var(--accent-readable-rgb),0.58); }
body.theme-light .kb-due-late { color: #c5003f; }
body.theme-light .kb-obj { color: rgba(var(--accent-strong-rgb), 0.70); }
body.theme-light .kb-desc { color: rgba(var(--accent-readable-rgb),0.56); }
body.theme-light .kb-label-chip {
    background: rgba(var(--accent-secondary-rgb),0.08);
    border-color: rgba(var(--accent-secondary-rgb),0.18);
    color: #a90b5f;
}
body.theme-light .kb-ref-thumb { border-color: rgba(var(--accent-readable-rgb),0.08); }
body.theme-light .kb-check-item {
    background: rgba(var(--accent-readable-rgb),0.035);
    color: rgba(var(--accent-readable-rgb),0.78);
}
body.theme-light .kb-check-item:hover { background: rgba(var(--accent-readable-rgb),0.06); }
body.theme-light .kb-check-done { color: rgba(var(--accent-readable-rgb),0.25); }
body.theme-light .kb-cl-bar { color: rgba(var(--accent-readable-rgb),0.38); }
body.theme-light .kb-cl-track { background: rgba(var(--accent-readable-rgb),0.09); }
body.theme-light .kb-card-foot { border-top-color: rgba(var(--accent-readable-rgb),0.07); }
body.theme-light .kb-avatar {
    background: rgba(var(--accent-strong-rgb), 0.10);
    border-color: rgba(var(--accent-strong-rgb), 0.22);
    color: rgba(var(--accent-readable-rgb),0.64);
}
body.theme-light .kb-avatar-plus { color: rgba(var(--accent-readable-rgb),0.55); }
body.theme-light .kb-card-drag-handle {
    color: rgba(var(--accent-readable-rgb),0.50);
    background: rgba(255,255,255,0.60);
    border-color: rgba(var(--accent-readable-rgb),0.12);
}
body.theme-light .kb-card-drag-handle:hover {
    color: var(--accent-strong);
    background: rgba(var(--accent-strong-rgb), 0.08);
    border-color: rgba(var(--accent-strong-rgb), 0.18);
}
body.theme-light .kb-btn-del { color: rgba(var(--accent-readable-rgb),0.24); }
body.theme-light .kb-btn-del:hover { color: #c5003f; background: rgba(255,110,128,0.10); }

body.theme-light .kb-card-add {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.13);
}
body.theme-light .kb-card-add::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.10), rgba(var(--accent-secondary-rgb),0.045));
}
body.theme-light .kb-card-add:hover {
    border-color: rgba(var(--accent-strong-rgb), 0.30);
    box-shadow: 0 8px 24px rgba(var(--accent-strong-rgb),0.12);
}
body.theme-light .kb-card-add-icon {
    background: rgba(var(--accent-strong-rgb), 0.08);
    border-color: rgba(var(--accent-strong-rgb), 0.18);
}
body.theme-light .kb-card-add-icon .material-symbols-outlined { color: rgba(var(--accent-strong-rgb), 0.60); }
body.theme-light .kb-card-add:hover .kb-card-add-icon {
    background: rgba(var(--accent-strong-rgb), 0.14);
    border-color: rgba(var(--accent-strong-rgb), 0.34);
    box-shadow: 0 0 12px rgba(var(--accent-strong-rgb), 0.12);
}
body.theme-light .kb-card-add:hover .kb-card-add-icon .material-symbols-outlined { color: var(--accent-strong); }
body.theme-light .kb-card-add-label { color: rgba(var(--accent-readable-rgb),0.42); }
body.theme-light .kb-card-add:hover .kb-card-add-label { color: rgba(var(--accent-readable-rgb),0.76); }

body.theme-light .kb-filter-empty {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.12);
    color: rgba(var(--accent-readable-rgb),0.58);
}
body.theme-light .kb-filter-empty .material-symbols-outlined { color: rgba(var(--accent-strong-rgb), 0.65); }

body.theme-light .kb-add-lane-btn {
    border-color: rgba(var(--accent-readable-rgb),0.16);
    color: rgba(var(--accent-readable-rgb),0.52);
}
body.theme-light .kb-add-lane-btn:hover {
    border-color: rgba(var(--accent-strong-rgb), 0.32);
    color: var(--accent-strong);
    background: rgba(var(--accent-strong-rgb), 0.06);
}

body.theme-light .kb-history {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.14);
    box-shadow: 0 4px 24px rgba(var(--accent-strong-rgb),0.08);
}
body.theme-light .kb-history-header { border-bottom-color: rgba(var(--accent-readable-rgb),0.07); }
body.theme-light .kb-history-title { color: rgba(var(--accent-readable-rgb),0.82); }
body.theme-light .kb-history-sub,
body.theme-light .kb-history-assignee,
body.theme-light .kb-history-date { color: rgba(var(--accent-readable-rgb),0.42); }
body.theme-light .kb-history-item:hover { background: rgba(var(--accent-readable-rgb),0.035); }
body.theme-light .kb-history-name {
    color: rgba(var(--accent-readable-rgb),0.66);
    text-decoration-color: rgba(74,222,128,0.35);
}
body.theme-light .kb-history-item:hover .kb-history-name { color: rgba(var(--accent-readable-rgb),0.78); }

body.theme-light .kb-float-panel {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.16);
    box-shadow: 0 18px 48px rgba(var(--accent-readable-rgb),0.16), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
}
body.theme-light .kb-fp-label { color: rgba(var(--accent-strong-rgb), 0.70); }
body.theme-light .kb-fp-chip {
    background: rgba(var(--accent-readable-rgb),0.035);
    border-color: rgba(var(--accent-readable-rgb),0.08);
    color: rgba(var(--accent-readable-rgb),0.70);
}
body.theme-light .kb-fp-chip:hover {
    background: rgba(var(--accent-strong-rgb), 0.08);
    border-color: rgba(var(--accent-strong-rgb), 0.20);
    color: var(--accent-readable-2);
}
body.theme-light .kb-fp-divider { background: rgba(var(--accent-readable-rgb),0.07); }
body.theme-light .kb-fp-empty { color: rgba(var(--accent-readable-rgb),0.34); }
body.theme-light .kb-float-history { border-color: rgba(var(--accent-strong-rgb),0.18); }
body.theme-light .kb-fh-header {
    background: var(--accent-light-bg);
    border-bottom-color: rgba(var(--accent-readable-rgb),0.07);
}
body.theme-light .kb-fh-title { color: rgba(var(--accent-readable-rgb),0.84); }
body.theme-light .kb-fh-count {
    color: var(--accent-strong);
    background: rgba(var(--accent-strong-rgb), 0.08);
    border-color: rgba(var(--accent-strong-rgb), 0.18);
}
body.theme-light .kb-fh-row { border-bottom-color: rgba(var(--accent-readable-rgb),0.05); }
body.theme-light .kb-fh-row:hover { background: rgba(var(--accent-strong-rgb), 0.06); }
body.theme-light .kb-fh-name { color: rgba(var(--accent-readable-rgb),0.72); }
body.theme-light .kb-fh-assignee { color: rgba(var(--accent-readable-rgb),0.56); }
body.theme-light .kb-fh-date { color: rgba(var(--accent-readable-rgb),0.36); }
body.theme-light .kb-history-empty { color: rgba(var(--accent-readable-rgb),0.38); }

/* =============================================================
 * TEMA CLARO — PLANEJAMENTO: padrão claro e textos escuros
 * Ajuste cirúrgico: somente cores/superfícies, sem alterar layout ou JS.
 * ============================================================= */
body.theme-light #tabPlanning,
body.theme-light #planningTabRoot {
    color: var(--text-primary);
}

body.theme-light .pln-shell::before {
    background: rgba(var(--accent-strong-rgb), 0.10);
    opacity: 0.38;
}
body.theme-light .pln-shell::after {
    background: rgba(var(--accent-secondary-rgb), 0.08);
    opacity: 0.34;
}

body.theme-light .pln-overline {
    color: rgba(var(--accent-secondary-rgb), 0.72);
    text-shadow: none;
}
body.theme-light .pln-title {
    color: rgba(42, 25, 62, 0.72);
    text-shadow: none;
}
body.theme-light .pln-subtitle {
    color: rgba(42, 25, 62, 0.68);
}
body.theme-light .pln-hero-edit-btn {
    background: rgba(255,255,255,0.72);
    border-color: rgba(var(--accent-strong-rgb),0.12);
    color: rgba(var(--accent-readable-rgb),0.46);
    box-shadow: 0 2px 10px rgba(var(--accent-strong-rgb),0.05);
}
body.theme-light .pln-hero-edit-btn:hover {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb), 0.28);
    color: var(--accent-strong);
    box-shadow: 0 8px 20px rgba(var(--accent-strong-rgb),0.10);
}

body.theme-light .pln-toolbar {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.13);
    box-shadow: 0 12px 32px rgba(var(--accent-strong-rgb),0.10), 0 0 0 1px rgba(var(--accent-primary-rgb),0.05);
}
body.theme-light .pln-filter-btn {
    color: rgba(var(--accent-readable-rgb),0.54);
}
body.theme-light .pln-filter-btn:hover {
    color: rgba(var(--accent-readable-rgb),0.82);
    background: rgba(var(--accent-strong-rgb), 0.06);
}
body.theme-light .pln-filter-btn.active {
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(177, 27, 141, 0.20);
}
body.theme-light .pln-print-btn {
    background: rgba(var(--accent-strong-rgb), 0.04);
    border-color: rgba(var(--accent-strong-rgb), 0.22);
    color: var(--accent-strong);
}
body.theme-light .pln-print-btn:hover {
    background: rgba(var(--accent-strong-rgb), 0.08);
    border-color: rgba(var(--accent-strong-rgb), 0.32);
    box-shadow: 0 12px 26px rgba(var(--accent-strong-rgb),0.12);
}

body.theme-light .pln-note {
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(177, 27, 141, 0.22);
}
body.theme-light .pln-note p,
body.theme-light .pln-note strong,
body.theme-light .pln-note .material-symbols-outlined {
    color: #ffffff;
}

body.theme-light .pln-legend-label {
    color: rgba(var(--accent-readable-rgb),0.34);
}
body.theme-light .pln-badge {
    background: rgba(255,255,255,0.82);
    border-color: rgba(var(--accent-readable-rgb),0.08);
    box-shadow: 0 2px 8px rgba(var(--accent-strong-rgb),0.045);
}
body.theme-light .pln-badge[data-type="Conversão"] {
    color: #10855a;
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.22);
}
body.theme-light .pln-badge[data-type="Conversão"] .pln-badge-dot { background: #22c55e; }
body.theme-light .pln-badge[data-type="Carrossel"] {
    color: #8c7a00;
    background: rgba(202, 180, 38, 0.12);
    border-color: rgba(202, 180, 38, 0.24);
}
body.theme-light .pln-badge[data-type="Carrossel"] .pln-badge-dot { background: #c8b600; }
body.theme-light .pln-badge[data-type="Estático"] {
    color: #c5003f;
    background: rgba(255, 100, 160, 0.11);
    border-color: rgba(255, 100, 160, 0.22);
}
body.theme-light .pln-badge[data-type="Estático"] .pln-badge-dot { background: #ff8fb2; }
body.theme-light .pln-badge[data-type="Impacto"] {
    color: #08769b;
    background: rgba(34, 166, 210, 0.11);
    border-color: rgba(34, 166, 210, 0.22);
}
body.theme-light .pln-badge[data-type="Impacto"] .pln-badge-dot { background: #28b7e9; }
body.theme-light .pln-badge[data-type="Vídeo"],
body.theme-light .pln-badge[data-type="Bastidores"] {
    color: #6550c8;
    background: rgba(123, 97, 255, 0.10);
    border-color: rgba(123, 97, 255, 0.20);
}
body.theme-light .pln-badge[data-type="Vídeo"] .pln-badge-dot,
body.theme-light .pln-badge[data-type="Bastidores"] .pln-badge-dot { background: #8f7cff; }

body.theme-light .pln-week-card {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.14);
    box-shadow: 0 4px 24px rgba(var(--accent-strong-rgb),0.08), 0 0 0 1px rgba(var(--accent-primary-rgb),0.05);
}
body.theme-light .pln-week-card::before {
    background: radial-gradient(circle at top right, rgba(var(--accent-primary-rgb),0.08), transparent 34%),
                radial-gradient(circle at bottom left, rgba(var(--accent-secondary-rgb),0.045), transparent 38%);
}
body.theme-light .pln-week-head {
    background: linear-gradient(135deg, var(--accent-light-bg), #f5effb);
    border-bottom-color: rgba(var(--accent-readable-rgb),0.07);
}
body.theme-light .pln-week-label {
    color: var(--accent-strong);
}
body.theme-light .pln-week-title {
    color: var(--text-primary);
    text-shadow: none;
}
body.theme-light .pln-table thead th {
    background: rgba(var(--accent-strong-rgb), 0.035);
    color: rgba(var(--accent-readable-rgb),0.42);
    border-bottom-color: rgba(var(--accent-readable-rgb),0.08);
}
body.theme-light .pln-row td {
    border-top-color: rgba(var(--accent-readable-rgb),0.06);
}
body.theme-light .pln-row + .pln-row td {
    border-top-color: rgba(var(--accent-strong-rgb),0.10);
}
body.theme-light .pln-row:hover {
    background: rgba(var(--accent-strong-rgb), 0.035);
}
body.theme-light .pln-row-title {
    color: var(--accent-strong);
}
body.theme-light .pln-row-subtitle {
    color: rgba(var(--accent-readable-rgb),0.72);
}
body.theme-light .pln-row-copy {
    color: rgba(var(--accent-readable-rgb),0.68);
}
body.theme-light .pln-row td:nth-child(2),
body.theme-light .pln-table thead th:nth-child(2),
body.theme-light .pln-row td:nth-child(3),
body.theme-light .pln-table thead th:nth-child(3) {
    border-left-color: rgba(var(--accent-readable-rgb),0.08);
}
body.theme-light .pln-row-roteiro-label {
    color: rgba(var(--accent-strong-rgb), 0.68);
}
body.theme-light .pln-row-cta {
    color: #10855a;
}
body.theme-light .pln-edit-week-btn {
    background: rgba(var(--accent-readable-rgb),0.04);
    border-color: rgba(var(--accent-readable-rgb),0.10);
    color: rgba(var(--accent-readable-rgb),0.38);
}
body.theme-light .pln-edit-week-btn:hover {
    background: rgba(var(--accent-strong-rgb), 0.08);
    border-color: rgba(var(--accent-strong-rgb), 0.22);
    color: var(--accent-strong);
}
body.theme-light .pln-row-btn {
    color: rgba(var(--accent-readable-rgb),0.28);
}
body.theme-light .pln-row-btn:hover {
    background: rgba(var(--accent-readable-rgb),0.06);
}
body.theme-light .pln-row-edit:hover { color: var(--accent-strong); }
body.theme-light .pln-row-del:hover { color: #c5003f; }
body.theme-light .pln-add-post-btn {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.12);
    color: rgba(var(--accent-readable-rgb),0.64);
}
body.theme-light .pln-add-post-btn:hover {
    background: rgba(var(--accent-strong-rgb), 0.07);
    border-color: rgba(var(--accent-strong-rgb), 0.28);
    color: var(--accent-strong);
}

/* Planejamento — modais abertos a partir da aba */
body.theme-light #tabPlanning .ic-login-modal,
body.theme-light #plnExportModal.ic-login-modal {
    background: rgba(var(--accent-readable-rgb),0.28);
}
body.theme-light #tabPlanning .tm-panel,
body.theme-light #plnExportModal .tm-panel {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.16);
    box-shadow: 0 28px 80px rgba(48,12,70,0.22), 0 0 0 1px rgba(var(--accent-primary-rgb),0.08);
}
body.theme-light #tabPlanning .tm-panel::before,
body.theme-light #plnExportModal .tm-panel::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.12), rgba(var(--accent-secondary-rgb),0.06));
}
body.theme-light #tabPlanning .tm-header,
body.theme-light #plnExportModal .tm-header {
    background: linear-gradient(135deg, var(--accent-light-bg), var(--accent-light-bg-2));
    border-bottom-color: rgba(var(--accent-readable-rgb),0.08);
    box-shadow: none;
}
body.theme-light #tabPlanning .tm-header::before,
body.theme-light #plnExportModal .tm-header::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.05), rgba(var(--accent-secondary-rgb),0.025), transparent 62%);
}
body.theme-light #tabPlanning .tm-title,
body.theme-light #plnExportModal .tm-title {
    color: var(--text-primary);
}
body.theme-light #tabPlanning .tm-breadcrumb,
body.theme-light #plnExportModal .tm-breadcrumb,
body.theme-light #tabPlanning .tm-label {
    color: rgba(var(--accent-strong-rgb), 0.68);
}
body.theme-light #tabPlanning .tm-close,
body.theme-light #plnExportModal .tm-close {
    color: rgba(var(--accent-readable-rgb),0.42);
}
body.theme-light #tabPlanning .tm-close:hover,
body.theme-light #plnExportModal .tm-close:hover {
    background: rgba(var(--accent-secondary-rgb),0.08);
    color: var(--accent-secondary);
}
body.theme-light #tabPlanning .tm-body,
body.theme-light #plnExportModal .exp-body {
    background: #ffffff;
}
body.theme-light #tabPlanning .tm-input,
body.theme-light #tabPlanning .tm-textarea {
    background: var(--accent-light-bg-2);
    border-color: rgba(var(--accent-readable-rgb),0.12);
    color: var(--text-primary);
}
body.theme-light #tabPlanning .tm-input::placeholder,
body.theme-light #tabPlanning .tm-textarea::placeholder {
    color: rgba(var(--accent-readable-rgb),0.32);
}
body.theme-light #tabPlanning .tm-input:focus,
body.theme-light #tabPlanning .tm-textarea:focus {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb), 0.38);
    box-shadow: 0 0 0 3px rgba(var(--accent-strong-rgb), 0.07);
}
body.theme-light #tabPlanning .tm-footer,
body.theme-light #plnExportModal .tm-footer {
    background: var(--accent-light-bg);
    border-top-color: rgba(var(--accent-readable-rgb),0.08);
}
body.theme-light #tabPlanning .tm-btn-cancel {
    background: rgba(var(--accent-readable-rgb),0.04);
    border-color: rgba(var(--accent-readable-rgb),0.10);
    color: rgba(var(--accent-readable-rgb),0.58);
}
body.theme-light #tabPlanning .tm-btn-cancel:hover {
    background: rgba(var(--accent-readable-rgb),0.07);
    color: var(--text-primary);
}
body.theme-light #tabPlanning .pln-type-chip {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.10);
    color: rgba(var(--accent-readable-rgb),0.62);
}
body.theme-light #tabPlanning .pln-type-chip:hover {
    background: rgba(var(--accent-strong-rgb), 0.07);
    border-color: rgba(var(--accent-strong-rgb), 0.24);
    color: var(--accent-strong);
}
body.theme-light #tabPlanning .pln-type-chip.active {
    background: rgba(var(--accent-strong-rgb), 0.12);
    border-color: rgba(var(--accent-strong-rgb), 0.34);
    color: var(--accent-strong);
    box-shadow: 0 0 12px rgba(var(--accent-strong-rgb), 0.10);
}

/* Modal de exportação do planejamento */
body.theme-light #plnExportModal .exp-desc {
    color: rgba(var(--accent-readable-rgb),0.62);
}
body.theme-light #plnExportModal .exp-option {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.10);
}
body.theme-light #plnExportModal .exp-option:hover {
    background: rgba(var(--accent-strong-rgb), 0.07);
    border-color: rgba(var(--accent-strong-rgb), 0.24);
}
body.theme-light #plnExportModal .exp-option-name {
    color: var(--text-primary);
}
body.theme-light #plnExportModal .exp-option-desc {
    color: rgba(var(--accent-readable-rgb),0.52);
}
body.theme-light #plnExportModal .exp-option-arrow {
    color: rgba(var(--accent-readable-rgb),0.24);
}
body.theme-light #plnExportModal .exp-link-result {
    background: rgba(var(--accent-strong-rgb), 0.06);
    border-color: rgba(var(--accent-strong-rgb), 0.18);
}
body.theme-light #plnExportModal .exp-link-label {
    color: var(--accent-strong);
}
body.theme-light #plnExportModal .exp-link-input {
    background: #ffffff;
    border-color: rgba(var(--accent-readable-rgb),0.12);
    color: rgba(var(--accent-readable-rgb),0.68);
}
body.theme-light #plnExportModal .exp-link-hint {
    color: rgba(var(--accent-readable-rgb),0.38);
}

/* =============================================================
 * Tema claro — Modal de exportação de Métricas (#exportModal)
 * ============================================================= */
body.theme-light #exportModal.ic-login-modal {
    background: rgba(var(--accent-readable-rgb),0.30);
}
body.theme-light #exportModal .tm-panel {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.14);
    box-shadow: 0 28px 80px rgba(48,12,70,0.20);
}
body.theme-light #exportModal .tm-header {
    background: #ffffff;
    border-bottom-color: rgba(var(--accent-readable-rgb),0.08);
}
body.theme-light #exportModal .tm-breadcrumb {
    color: rgba(var(--accent-strong-rgb), 0.70);
}
body.theme-light #exportModal .tm-title {
    color: var(--accent-readable-2);
}
body.theme-light #exportModal .tm-close {
    color: rgba(var(--accent-readable-rgb),0.40);
    background: rgba(var(--accent-readable-rgb),0.04);
    border-color: rgba(var(--accent-readable-rgb),0.10);
}
body.theme-light #exportModal .tm-close:hover {
    background: rgba(var(--accent-readable-rgb),0.08);
    color: rgba(var(--accent-readable-rgb),0.70);
}
body.theme-light #exportModal .exp-body {
    background: #ffffff;
}
body.theme-light #exportModal .exp-desc {
    color: rgba(var(--accent-readable-rgb),0.60);
}
body.theme-light #exportModal .exp-option {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.09);
}
body.theme-light #exportModal .exp-option:hover {
    background: rgba(var(--accent-strong-rgb), 0.07);
    border-color: rgba(var(--accent-strong-rgb), 0.24);
    transform: translateX(3px);
}
body.theme-light #exportModal .exp-option-icon {
    background: linear-gradient(135deg, rgba(var(--accent-strong-rgb), 0.10), rgba(200,30,100,0.07));
    border-color: rgba(var(--accent-strong-rgb), 0.18);
}
body.theme-light #exportModal .exp-option-name {
    color: var(--accent-readable-2);
}
body.theme-light #exportModal .exp-option-desc {
    color: rgba(var(--accent-readable-rgb),0.52);
}
body.theme-light #exportModal .exp-option-arrow {
    color: rgba(var(--accent-readable-rgb),0.22);
}
body.theme-light #exportModal .exp-option:hover .exp-option-arrow {
    color: var(--accent-strong);
}
body.theme-light #exportModal .exp-link-result {
    background: rgba(var(--accent-strong-rgb), 0.06);
    border-color: rgba(var(--accent-strong-rgb), 0.18);
}
body.theme-light #exportModal .exp-link-label {
    color: var(--accent-strong);
}
body.theme-light #exportModal .exp-link-input {
    background: #ffffff;
    border-color: rgba(var(--accent-readable-rgb),0.12);
    color: rgba(var(--accent-readable-rgb),0.68);
}
body.theme-light #exportModal .exp-link-hint {
    color: rgba(var(--accent-readable-rgb),0.38);
}

/* =============================================================
 * PATCH v28 — Tema claro da aba Planejamentos alinhado ao Meu Plano
 * Escopo visual apenas: cores, contraste e superfícies. Não altera layout/JS/API.
 * ============================================================= */
body.theme-light #tabPlanning.active,
body.theme-light #planningTabRoot {
    background: var(--accent-light-bg-2);
    color: var(--text-primary);
}

body.theme-light #tabPlanning .pln-shell::before {
    background: radial-gradient(circle, rgba(var(--accent-strong-rgb),0.14) 0%, transparent 70%);
    opacity: 0.34;
}
body.theme-light #tabPlanning .pln-shell::after {
    background: radial-gradient(circle, rgba(var(--accent-secondary-rgb),0.10) 0%, transparent 70%);
    opacity: 0.30;
}

/* Cabeçalho no mesmo padrão do Meu Plano: título escuro + último termo em degradê */
body.theme-light #tabPlanning .pln-overline {
    color: rgba(var(--accent-secondary-rgb),0.72);
    text-shadow: none;
}
body.theme-light #tabPlanning .pln-title {
    color: var(--text-primary) !important;
    text-shadow: none !important;
}
body.theme-light #tabPlanning .pln-title-accent {
    background: linear-gradient(90deg, var(--title-grad-start) 0%, var(--title-grad-mid) 45%, var(--title-grad-end) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
}
body.theme-light #tabPlanning .pln-subtitle {
    color: rgba(var(--accent-readable-rgb),0.50) !important;
}

/* Barra de filtros e ações com superfície branca sólida */
body.theme-light #tabPlanning .pln-toolbar {
    background: #ffffff !important;
    border-color: rgba(var(--accent-strong-rgb),0.16) !important;
    box-shadow: 0 4px 20px rgba(var(--accent-strong-rgb),0.10), 0 1px 4px rgba(var(--accent-readable-rgb),0.06) !important;
}
body.theme-light #tabPlanning .pln-filter-btn {
    color: rgba(var(--accent-readable-rgb),0.56) !important;
}
body.theme-light #tabPlanning .pln-filter-btn:hover {
    background: rgba(var(--accent-readable-rgb),0.05) !important;
    color: var(--text-primary) !important;
}
body.theme-light #tabPlanning .pln-filter-btn.active {
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(var(--accent-secondary-rgb),0.22) !important;
}
body.theme-light #tabPlanning .pln-print-btn,
body.theme-light #tabPlanning .pln-hero-edit-btn {
    background: #ffffff !important;
    border-color: rgba(var(--accent-strong-rgb),0.16) !important;
    color: rgba(var(--accent-readable-rgb),0.66) !important;
    box-shadow: 0 3px 14px rgba(var(--accent-strong-rgb),0.08) !important;
}
body.theme-light #tabPlanning .pln-print-btn:hover,
body.theme-light #tabPlanning .pln-hero-edit-btn:hover {
    background: rgba(var(--accent-strong-rgb), 0.06) !important;
    border-color: rgba(var(--accent-strong-rgb), 0.30) !important;
    color: var(--accent-strong) !important;
}

/* Aviso e legenda preservando o degradê oficial */
body.theme-light #tabPlanning .pln-note {
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(var(--accent-secondary-rgb),0.22) !important;
}
body.theme-light #tabPlanning .pln-note p,
body.theme-light #tabPlanning .pln-note strong,
body.theme-light #tabPlanning .pln-note .material-symbols-outlined {
    color: #ffffff !important;
}
body.theme-light #tabPlanning .pln-legend-label,
body.theme-light #tabPlanning .pln-footer-label {
    color: rgba(var(--accent-readable-rgb),0.38) !important;
}

/* Cards das semanas seguindo o padrão branco dos cards do Meu Plano */
body.theme-light #tabPlanning .pln-week-card {
    background: #ffffff !important;
    border-color: rgba(var(--accent-strong-rgb),0.16) !important;
    box-shadow: 0 4px 20px rgba(var(--accent-strong-rgb),0.10), 0 1px 4px rgba(var(--accent-readable-rgb),0.06) !important;
}
body.theme-light #tabPlanning .pln-week-card::before {
    background: radial-gradient(circle at top right, rgba(var(--accent-primary-rgb),0.09), transparent 34%),
                radial-gradient(circle at bottom left, rgba(var(--accent-secondary-rgb),0.045), transparent 38%) !important;
}
body.theme-light #tabPlanning .pln-week-head {
    background: var(--accent-light-bg) !important;
    border-bottom-color: rgba(var(--accent-readable-rgb),0.08) !important;
}
body.theme-light #tabPlanning .pln-week-label {
    color: rgba(var(--accent-strong-rgb), 0.74) !important;
}
body.theme-light #tabPlanning .pln-week-title {
    color: var(--text-primary) !important;
    text-shadow: none !important;
}
body.theme-light #tabPlanning .pln-week-icon {
    color: rgba(var(--accent-readable-rgb),0.36) !important;
}

/* Tabela: textos escuros e divisórias suaves */
body.theme-light #tabPlanning .pln-table thead th {
    background: rgba(var(--accent-strong-rgb), 0.035) !important;
    color: rgba(var(--accent-readable-rgb),0.44) !important;
    border-bottom-color: rgba(var(--accent-readable-rgb),0.08) !important;
}
body.theme-light #tabPlanning .pln-row td,
body.theme-light #tabPlanning .pln-row + .pln-row td {
    border-top-color: rgba(var(--accent-readable-rgb),0.07) !important;
}
body.theme-light #tabPlanning .pln-row:hover {
    background: rgba(var(--accent-strong-rgb), 0.035) !important;
}
body.theme-light #tabPlanning .pln-row-title {
    color: var(--accent-strong) !important;
}
body.theme-light #tabPlanning .pln-row-subtitle {
    color: rgba(var(--accent-readable-rgb),0.72) !important;
}
body.theme-light #tabPlanning .pln-row-copy {
    color: rgba(var(--accent-readable-rgb),0.68) !important;
}
body.theme-light #tabPlanning .pln-row td:nth-child(2),
body.theme-light #tabPlanning .pln-table thead th:nth-child(2),
body.theme-light #tabPlanning .pln-row td:nth-child(3),
body.theme-light #tabPlanning .pln-table thead th:nth-child(3) {
    border-left-color: rgba(var(--accent-readable-rgb),0.08) !important;
}
body.theme-light #tabPlanning .pln-row-roteiro-label {
    color: rgba(var(--accent-strong-rgb), 0.68) !important;
}
body.theme-light #tabPlanning .pln-row-cta {
    color: #10855a !important;
}

/* Controles de edição em modo claro */
body.theme-light #tabPlanning .pln-edit-week-btn,
body.theme-light #tabPlanning .pln-row-btn {
    color: rgba(var(--accent-readable-rgb),0.36) !important;
}
body.theme-light #tabPlanning .pln-edit-week-btn {
    background: rgba(var(--accent-readable-rgb),0.04) !important;
    border-color: rgba(var(--accent-readable-rgb),0.10) !important;
}
body.theme-light #tabPlanning .pln-edit-week-btn:hover,
body.theme-light #tabPlanning .pln-row-btn:hover {
    background: rgba(var(--accent-strong-rgb), 0.08) !important;
    color: var(--accent-strong) !important;
}
body.theme-light #tabPlanning .pln-row-del:hover { color: #c5003f !important; }
body.theme-light #tabPlanning .pln-add-post-btn {
    background: var(--accent-light-bg) !important;
    border-color: rgba(var(--accent-readable-rgb),0.12) !important;
    color: rgba(var(--accent-readable-rgb),0.64) !important;
}
body.theme-light #tabPlanning .pln-add-post-btn:hover {
    background: rgba(var(--accent-strong-rgb), 0.07) !important;
    border-color: rgba(var(--accent-strong-rgb), 0.28) !important;
    color: var(--accent-strong) !important;
}
body.theme-light #tabPlanning .pln-footer-btn {
    color: rgba(var(--accent-readable-rgb),0.48) !important;
}
body.theme-light #tabPlanning .pln-footer-btn:hover {
    color: var(--accent-strong) !important;
}

/* Modais da aba: fundo branco e textos escuros, inclusive dicas inline */
body.theme-light #tabPlanning .tm-panel,
body.theme-light #plnExportModal .tm-panel {
    background: #ffffff !important;
    border-color: rgba(var(--accent-strong-rgb),0.16) !important;
    box-shadow: 0 28px 80px rgba(48,12,70,0.22), 0 0 0 1px rgba(var(--accent-primary-rgb),0.08) !important;
}
body.theme-light #tabPlanning .tm-header,
body.theme-light #plnExportModal .tm-header,
body.theme-light #tabPlanning .tm-footer,
body.theme-light #plnExportModal .tm-footer {
    background: var(--accent-light-bg) !important;
    border-color: rgba(var(--accent-readable-rgb),0.08) !important;
}
body.theme-light #tabPlanning .tm-title,
body.theme-light #plnExportModal .tm-title,
body.theme-light #plnExportModal .exp-option-name {
    color: var(--text-primary) !important;
}
body.theme-light #tabPlanning .tm-label,
body.theme-light #tabPlanning .tm-breadcrumb,
body.theme-light #plnExportModal .tm-breadcrumb {
    color: rgba(var(--accent-strong-rgb), 0.68) !important;
}
body.theme-light #tabPlanning .tm-section p[style],
body.theme-light #plnExportModal .exp-desc,
body.theme-light #plnExportModal .exp-option-desc,
body.theme-light #plnExportModal .exp-link-hint {
    color: rgba(var(--accent-readable-rgb),0.50) !important;
}
body.theme-light #tabPlanning .tm-input,
body.theme-light #tabPlanning .tm-textarea {
    background: var(--accent-light-bg-2) !important;
    border-color: rgba(var(--accent-readable-rgb),0.12) !important;
    color: var(--text-primary) !important;
}
body.theme-light #tabPlanning .tm-input::placeholder,
body.theme-light #tabPlanning .tm-textarea::placeholder {
    color: rgba(var(--accent-readable-rgb),0.32) !important;
}
body.theme-light #tabPlanning .tm-input:focus,
body.theme-light #tabPlanning .tm-textarea:focus {
    background: #ffffff !important;
    border-color: rgba(var(--accent-strong-rgb), 0.38) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-strong-rgb), 0.07) !important;
}
body.theme-light #tabPlanning .pln-type-chip {
    background: var(--accent-light-bg) !important;
    border-color: rgba(var(--accent-readable-rgb),0.10) !important;
    color: rgba(var(--accent-readable-rgb),0.62) !important;
}
body.theme-light #tabPlanning .pln-type-chip:hover,
body.theme-light #tabPlanning .pln-type-chip.active {
    background: rgba(var(--accent-strong-rgb), 0.10) !important;
    border-color: rgba(var(--accent-strong-rgb), 0.30) !important;
    color: var(--accent-strong) !important;
}

/* =============================================================
 * TEMA CLARO — MÉTRICAS: alinhado ao padrão visual de "Meu Plano"
 * Ajuste cirúrgico: somente CSS. Mantém HTML, JS, API e integrações intactos.
 * ============================================================= */
body.theme-light #tabMetrics,
body.theme-light #tabMetrics .mtr-wrapper {
    color: var(--text-primary);
}

body.theme-light .mtr-live-badge {
    color: rgba(var(--accent-secondary-rgb), 0.66);
    text-shadow: none;
}
body.theme-light .mtr-live-dot {
    background: var(--accent-primary);
    box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.48);
}
body.theme-light .mtr-title {
    color: var(--text-primary) !important;
    text-shadow: none;
}
body.theme-light .mtr-title-accent {
    background: linear-gradient(90deg, var(--title-grad-start) 0%, var(--title-grad-mid) 45%, var(--title-grad-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

body.theme-light .mtr-btn-ghost {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.16);
    color: var(--accent-strong);
    box-shadow: 0 4px 14px rgba(var(--accent-strong-rgb),0.06);
}
body.theme-light .mtr-btn-ghost:hover {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-strong-rgb), 0.26);
    color: var(--accent-readable);
    box-shadow: 0 8px 22px rgba(var(--accent-strong-rgb),0.10);
}
body.theme-light .mtr-btn-primary {
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(177, 27, 141, 0.18);
}

body.theme-light .mtr-period {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.14);
    color: rgba(var(--accent-readable-rgb),0.62);
    box-shadow: 0 2px 10px rgba(var(--accent-strong-rgb),0.04);
}
body.theme-light .mtr-period:hover {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-strong-rgb), 0.24);
    color: rgba(var(--accent-readable-rgb),0.82);
    box-shadow: 0 8px 20px rgba(var(--accent-strong-rgb),0.09);
}
body.theme-light .mtr-period .material-symbols-outlined { color: rgba(var(--accent-secondary-rgb),0.70); }
body.theme-light .mtr-period-chevron { color: rgba(var(--accent-readable-rgb),0.34) !important; }

body.theme-light .mtr-period-popover {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.16);
    box-shadow: 0 18px 48px rgba(var(--accent-readable-rgb),0.14), 0 0 0 1px rgba(var(--accent-primary-rgb),0.05);
}
body.theme-light .mtr-period-popover-head h4 { color: var(--text-primary); }
body.theme-light .mtr-period-popover-head p { color: rgba(var(--accent-readable-rgb),0.48); }
body.theme-light .mtr-period-presets {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.08);
}
body.theme-light .mtr-preset-btn {
    background: #ffffff;
    border-color: rgba(var(--accent-readable-rgb),0.08);
    color: rgba(var(--accent-readable-rgb),0.56);
}
body.theme-light .mtr-preset-btn:hover {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-strong-rgb), 0.22);
    color: rgba(var(--accent-readable-rgb),0.82);
}
body.theme-light .mtr-preset-active {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.42) !important;
    box-shadow: 0 10px 24px rgba(177, 27, 141, 0.18) !important;
}
body.theme-light .mtr-period-field span { color: rgba(var(--accent-strong-rgb), 0.70); }
body.theme-light .mtr-period-field input {
    background: var(--accent-light-bg-2);
    border-color: rgba(var(--accent-readable-rgb),0.10);
    color: var(--text-primary);
}
body.theme-light .mtr-period-field input:focus {
    border-color: rgba(var(--accent-strong-rgb), 0.40);
    box-shadow: 0 0 0 3px rgba(var(--accent-strong-rgb), 0.07);
}
body.theme-light .mtr-period-field input::-webkit-calendar-picker-indicator { filter: none; opacity: 0.55; }
body.theme-light .mtr-period-field input::-webkit-datetime-edit,
body.theme-light .mtr-period-field input::-webkit-datetime-edit-text,
body.theme-light .mtr-period-field input::-webkit-datetime-edit-month-field,
body.theme-light .mtr-period-field input::-webkit-datetime-edit-day-field,
body.theme-light .mtr-period-field input::-webkit-datetime-edit-year-field { color: var(--text-primary); }
body.theme-light .mtr-period-btn-ghost {
    background: rgba(var(--accent-readable-rgb),0.05);
    border-color: rgba(var(--accent-readable-rgb),0.10);
    color: rgba(var(--accent-readable-rgb),0.62);
}

body.theme-light .mtr-chart-card {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.18);
    box-shadow: 0 4px 24px rgba(var(--accent-strong-rgb),0.08), 0 0 0 1px rgba(var(--accent-primary-rgb),0.05);
}
body.theme-light .mtr-chart-card::after {
    background: linear-gradient(to left, rgba(var(--accent-primary-rgb),0.07), transparent);
}
body.theme-light .mtr-chart-title {
    color: var(--text-primary) !important;
    text-shadow: none;
}
body.theme-light .mtr-live-tag {
    background: rgba(var(--accent-primary-rgb),0.14);
    border-color: rgba(var(--accent-primary-rgb),0.24);
    color: var(--accent-strong);
}
body.theme-light .mtr-chart-sub {
    color: rgba(var(--accent-readable-rgb),0.42) !important;
    text-shadow: none;
}
body.theme-light .mtr-chart-legend {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}
body.theme-light .mtr-legend-item {
    color: rgba(var(--accent-readable-rgb),0.58);
    text-shadow: none;
}
body.theme-light .mtr-legend-leads .mtr-legend-icon {
    color: var(--accent-secondary);
    text-shadow: 0 0 10px rgba(var(--accent-secondary-rgb),0.18);
}
body.theme-light .mtr-legend-alcance .mtr-legend-icon {
    color: var(--accent-strong);
    text-shadow: 0 0 10px rgba(var(--accent-strong-rgb), 0.16);
}
body.theme-light .mtr-grid-line { background: rgba(var(--accent-readable-rgb),0.06); }
body.theme-light .mtr-bar {
    background: linear-gradient(to top, rgba(var(--accent-secondary-rgb),0.18) 0%, rgba(255,82,176,0.62) 50%, rgba(255,109,196,0.88) 100%);
    box-shadow: 0 10px 20px rgba(var(--accent-secondary-rgb),0.12), 0 0 16px rgba(255,86,176,0.14);
    opacity: 0.96;
}
body.theme-light .mtr-bar::after {
    background: linear-gradient(to bottom, transparent 18%, rgba(255,255,255,0.36) 50%, transparent 82%);
}
body.theme-light .mtr-bar-value {
    color: rgba(var(--accent-readable-rgb),0.58);
    text-shadow: none;
}
body.theme-light .mtr-chart-label {
    color: rgba(var(--accent-readable-rgb),0.38);
    text-shadow: none;
}
body.theme-light #mtrLineGrad stop:nth-child(1) { stop-color: var(--accent-strong); }
body.theme-light #mtrLineGrad stop:nth-child(2) { stop-color: var(--brand-grad-mid); }
body.theme-light #mtrLineGrad stop:nth-child(3) { stop-color: var(--accent-secondary); }
body.theme-light #mtrLinePath {
    filter: drop-shadow(0 0 7px rgba(var(--accent-secondary-rgb),0.22));
}

body.theme-light .mtr-card,
body.theme-light .mtr-conversion-card,
body.theme-light .mtr-suggestion-card {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.18);
    box-shadow: 0 4px 24px rgba(var(--accent-strong-rgb),0.08), 0 0 0 1px rgba(var(--accent-primary-rgb),0.05);
}
body.theme-light .mtr-card::before,
body.theme-light .mtr-conversion-card::before,
body.theme-light .mtr-suggestion-card::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.065), rgba(var(--accent-secondary-rgb),0.03), transparent 64%);
}
body.theme-light .mtr-card:hover,
body.theme-light .mtr-conversion-card:hover,
body.theme-light .mtr-suggestion-card:hover {
    border-color: rgba(var(--accent-strong-rgb), 0.30);
    box-shadow: 0 10px 28px rgba(var(--accent-strong-rgb),0.12), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
}
body.theme-light .mtr-card-label {
    color: var(--text-primary) !important;
    border-bottom-color: rgba(var(--accent-readable-rgb),0.07);
}
body.theme-light .mtr-card-eyebrow,
body.theme-light .mtr-invest-label,
body.theme-light .mtr-radial-label {
    color: rgba(var(--accent-readable-rgb),0.38) !important;
}
body.theme-light .mtr-card-big,
body.theme-light .mtr-card-mid,
body.theme-light .mtr-val,
body.theme-light .mtr-radial-pct,
body.theme-light .mtr-conv-title,
body.theme-light .mtr-suggestion-title {
    color: var(--text-primary) !important;
    text-shadow: none;
}
body.theme-light .mtr-glow-purple,
body.theme-light .mtr-glow-pink,
body.theme-light .mtr-glow-lime {
    text-shadow: none;
}
body.theme-light .mtr-row span:first-child,
body.theme-light .mtr-conv-desc,
body.theme-light .mtr-suggestion-text {
    color: rgba(var(--accent-readable-rgb),0.56) !important;
}
body.theme-light .mtr-badge-lime,
body.theme-light .mtr-val-lime {
    color: #0f8a52;
    background: rgba(34,197,94,0.10);
    border: 1px solid rgba(34,197,94,0.22);
}
body.theme-light .mtr-invest-block,
body.theme-light .mtr-community-top,
body.theme-light .mtr-budget-block {
    border-color: rgba(var(--accent-readable-rgb),0.07);
}
body.theme-light .mtr-budget-bar {
    background: rgba(var(--accent-readable-rgb),0.09);
}
body.theme-light .mtr-radial-track {
    stroke: rgba(var(--accent-readable-rgb),0.08);
}
body.theme-light .mtr-radial-wrap::before {
    background: radial-gradient(circle, rgba(74,222,128,0.12) 0%, rgba(var(--accent-primary-rgb),0.10) 42%, rgba(var(--accent-secondary-rgb),0.08) 64%, rgba(var(--accent-secondary-rgb),0) 78%);
    filter: blur(12px);
}
body.theme-light .mtr-tag-lime {
    background: rgba(34,197,94,0.10);
    color: #0f8a52;
    border-color: rgba(34,197,94,0.22);
}
body.theme-light .mtr-tag-purple {
    background: rgba(var(--accent-strong-rgb), 0.09);
    color: var(--accent-strong);
    border-color: rgba(var(--accent-strong-rgb), 0.20);
}
body.theme-light .mtr-suggestion-icon .material-symbols-outlined {
    color: var(--accent-secondary);
    filter: drop-shadow(0 0 10px rgba(var(--accent-secondary-rgb),0.18));
}

body.theme-light .mtr-footer {
    border-top-color: rgba(var(--accent-readable-rgb),0.07);
}
body.theme-light .mtr-footer-left {
    color: rgba(var(--accent-readable-rgb),0.30);
}
body.theme-light .mtr-footer-status {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.14);
    color: rgba(var(--accent-readable-rgb),0.55);
    box-shadow: 0 2px 10px rgba(var(--accent-strong-rgb),0.04);
}
body.theme-light .mtr-status-offline { background: rgba(var(--accent-readable-rgb),0.22); }

/* Modais ligados à aba de Métricas também ficam legíveis no tema claro */
body.theme-light .meta-link { color: var(--accent-strong); }
body.theme-light .meta-link:hover { color: var(--accent-readable); }
body.theme-light .meta-connect-info {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-strong-rgb),0.14);
}
body.theme-light .meta-connect-title { color: var(--text-primary); }
body.theme-light .meta-connect-desc,
body.theme-light .meta-input-hint,
body.theme-light .meta-steps-list { color: rgba(var(--accent-readable-rgb),0.62); }
body.theme-light .meta-token-steps {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.08);
}
body.theme-light .meta-steps-title { color: rgba(var(--accent-readable-rgb),0.42); }
body.theme-light .meta-steps-list code {
    background: rgba(var(--accent-strong-rgb), 0.08);
    color: var(--accent-strong);
}
body.theme-light .exp-desc { color: rgba(var(--accent-readable-rgb),0.60); }
body.theme-light .exp-option {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.14);
}
body.theme-light .exp-option:hover {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-strong-rgb), 0.24);
}
body.theme-light .exp-option-name { color: var(--text-primary); }
body.theme-light .exp-option-desc { color: rgba(var(--accent-readable-rgb),0.48); }
body.theme-light .exp-option-arrow { color: rgba(var(--accent-readable-rgb),0.22); }
body.theme-light .exp-link-result {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-strong-rgb),0.16);
}
body.theme-light .exp-link-box .exp-link-input,
body.theme-light .exp-link-input {
    background: #ffffff;
    border-color: rgba(var(--accent-readable-rgb),0.10);
    color: var(--text-primary);
}


/* =============================================================
 * TEMA CLARO — PROJEÇÃO DE INVESTIMENTOS: alinhado ao padrão visual de "Meu Plano"
 * Ajuste cirúrgico: somente CSS. Mantém HTML, JS, API e cálculos intactos.
 * ============================================================= */
body.theme-light #tabProjection,
body.theme-light #tabProjection .prj-wrapper {
    color: var(--text-primary);
}

body.theme-light .prj-header,
body.theme-light .prj-wrapper {
    text-shadow: none;
}

body.theme-light .prj-title {
    color: var(--text-primary) !important;
    text-shadow: none;
}

body.theme-light .prj-title-accent {
    background: linear-gradient(90deg, var(--title-grad-start) 0%, var(--title-grad-mid) 45%, var(--title-grad-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

body.theme-light .prj-subtitle {
    color: rgba(var(--accent-readable-rgb),0.50) !important;
    text-shadow: none;
}

body.theme-light .prj-card {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.18);
    box-shadow: 0 4px 24px rgba(var(--accent-strong-rgb),0.08), 0 0 0 1px rgba(var(--accent-primary-rgb),0.05);
}

body.theme-light .prj-card::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.065), rgba(var(--accent-secondary-rgb),0.03), transparent 64%);
}

body.theme-light .prj-card:hover {
    border-color: rgba(var(--accent-strong-rgb), 0.30);
    box-shadow: 0 10px 28px rgba(var(--accent-strong-rgb),0.12), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
}

body.theme-light .prj-inputs-head,
body.theme-light .prj-chart-title,
body.theme-light .prj-bento-big,
body.theme-light .prj-bento-med,
body.theme-light .prj-bento-roas-val,
body.theme-light .prj-sec-val {
    text-shadow: none;
}

body.theme-light .prj-inputs-head {
    color: var(--text-primary) !important;
}

body.theme-light .prj-field-label,
body.theme-light .prj-bento-eyebrow,
body.theme-light .prj-sec-label {
    color: rgba(var(--accent-readable-rgb),0.46) !important;
    text-shadow: none;
}

body.theme-light .prj-field-input {
    background: var(--accent-light-bg-2);
    border-bottom-color: rgba(var(--accent-readable-rgb),0.12);
    color: var(--text-primary) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.70);
}

body.theme-light .prj-field-input::placeholder {
    color: rgba(var(--accent-readable-rgb),0.30) !important;
}

body.theme-light .prj-field-input:focus {
    background: var(--accent-light-bg-4);
    border-bottom-color: rgba(var(--accent-strong-rgb), 0.50);
}

body.theme-light .prj-slider {
    background: rgba(var(--accent-readable-rgb),0.12) !important;
}

body.theme-light .prj-slider-val {
    color: var(--text-primary) !important;
}

body.theme-light .prj-field-hint {
    color: rgba(var(--accent-strong-rgb), 0.60) !important;
}

body.theme-light .prj-btn-calc {
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(var(--accent-secondary-rgb),0.18);
}

body.theme-light .prj-btn-calc:hover {
    box-shadow: 0 16px 34px rgba(var(--accent-secondary-rgb),0.25);
}

body.theme-light .prj-insight-head,
body.theme-light .prj-insight-icon,
body.theme-light .prj-insight-box-label,
body.theme-light .prj-badge-ok,
body.theme-light .prj-lucro-sub,
body.theme-light .prj-lucro-sub .material-symbols-outlined {
    color: #22a05a !important;
    text-shadow: none;
}

body.theme-light .prj-insight-empty,
body.theme-light .prj-insight-box-text {
    color: rgba(var(--accent-readable-rgb),0.62) !important;
    text-shadow: none;
}

body.theme-light .prj-insight-empty strong,
body.theme-light .prj-insight-item strong {
    color: rgba(var(--accent-readable-rgb),0.88) !important;
}

body.theme-light .prj-insight-item {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-strong-rgb),0.12);
    color: rgba(var(--accent-readable-rgb),0.64) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

body.theme-light .prj-insight-item::before {
    color: #22a05a;
}

body.theme-light .prj-bento-lucro {
    background: #fff8fb;
    border-color: rgba(var(--accent-secondary-rgb),0.18);
}

body.theme-light .prj-bento-glow-pink {
    background: rgba(var(--accent-secondary-rgb),0.10);
}

body.theme-light .prj-bento-big,
body.theme-light .prj-bento-med,
body.theme-light .prj-bento-roas-val,
body.theme-light .prj-sec-val,
body.theme-light .prj-lucro-val {
    color: #22a05a !important;
}

body.theme-light .prj-bento-sub,
body.theme-light .prj-invest-pct {
    color: rgba(var(--accent-readable-rgb),0.58) !important;
    text-shadow: none;
}

body.theme-light .prj-bento-sub .material-symbols-outlined {
    color: rgba(var(--accent-strong-rgb), 0.66);
}

body.theme-light .prj-lucro-sub .material-symbols-outlined {
    color: #22a05a !important;
}

body.theme-light .prj-invest-bar {
    background: rgba(var(--accent-readable-rgb),0.09) !important;
}

body.theme-light .prj-bento-roas-icon {
    border-color: rgba(34,160,90,0.28);
    background: rgba(34,160,90,0.06);
}

body.theme-light .prj-bento-roas-icon:hover {
    background: rgba(34,160,90,0.10);
}

body.theme-light .prj-bento-roas-icon .material-symbols-outlined {
    color: #22a05a !important;
    text-shadow: none;
}

body.theme-light .prj-chart-card {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.18);
    box-shadow: 0 4px 24px rgba(var(--accent-strong-rgb),0.08), 0 0 0 1px rgba(var(--accent-primary-rgb),0.05);
}

body.theme-light .prj-chart-title {
    color: var(--text-primary) !important;
}

body.theme-light .prj-chart-sub {
    color: rgba(var(--accent-readable-rgb),0.42) !important;
    text-shadow: none;
}

body.theme-light .prj-chart-labels {
    color: rgba(var(--accent-readable-rgb),0.36) !important;
    text-shadow: none;
}

body.theme-light #prjLineGrad stop:nth-child(1) { stop-color: var(--accent-strong); }
body.theme-light #prjLineGrad stop:nth-child(2) { stop-color: var(--accent-secondary); }
body.theme-light #prjFillGrad stop:nth-child(1) { stop-color: var(--accent-primary); stop-opacity: 0.14; }
body.theme-light #prjFillGrad stop:nth-child(2) { stop-color: var(--accent-primary); stop-opacity: 0; }
body.theme-light #prjCurveLine { filter: drop-shadow(0 0 7px rgba(var(--accent-secondary-rgb),0.22)); }
body.theme-light #prjDotA,
body.theme-light #prjDotB,
body.theme-light #prjDotC {
    filter: none !important;
    fill: var(--accent-readable-2) !important;
    stroke: none !important;
}

body.theme-light .prj-secondary .prj-card {
    background: #ffffff;
}

body.theme-light .prj-insight-card-wide {
    background: #ffffff;
}

body.theme-light .prj-badge-down {
    color: #c5003f !important;
}

body.theme-light .prj-sec-badge {
    text-shadow: none;
}

body.theme-light .prj-dot-purple { box-shadow: 0 0 6px rgba(var(--accent-strong-rgb), 0.32); }
body.theme-light .prj-dot-pink   { box-shadow: 0 0 6px rgba(var(--accent-secondary-rgb),0.32); }
body.theme-light .prj-dot-lime   { box-shadow: 0 0 6px rgba(34,160,90,0.28); }

/* =============================================================
 * TEMA CLARO — CENTRAL DE INFORMAÇÕES (PADRÃO MEU PLANO)
 * Ajuste de contraste aplicado em cima das regras existentes.
 * ============================================================= */
body.theme-light #tabInfo .ic-header-title {
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

body.theme-light #tabInfo .ic-header-sub {
    color: var(--accent-secondary) !important;
    text-shadow: none !important;
}

body.theme-light #tabInfo .ic-header-title-accent {
    background: linear-gradient(90deg, var(--title-grad-start) 0%, var(--title-grad-mid) 45%, var(--title-grad-end) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.theme-light #tabInfo .ic-card {
    background: #ffffff !important;
    border-color: rgba(var(--accent-primary-rgb),0.26) !important;
    border-top-color: rgba(var(--accent-secondary-rgb),0.28) !important;
    box-shadow: 0 4px 24px rgba(var(--accent-strong-rgb),0.08), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06) !important;
}

body.theme-light #tabInfo .ic-card::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.05), rgba(var(--accent-secondary-rgb),0.035), transparent 62%) !important;
}

body.theme-light #tabInfo .ic-card-header h3,
body.theme-light #tabInfo .ic-access-name,
body.theme-light #tabInfo .ic-preview-title,
body.theme-light #tabInfo .ic-raio-section-title {
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

body.theme-light #tabInfo .ic-field-label,
body.theme-light #tabInfo .ic-allocation-label,
body.theme-light #tabInfo .ic-raio-label,
body.theme-light #tabInfo .ic-login-label,
body.theme-light #tabInfo .ic-obs-footer {
    color: rgba(var(--accent-readable-rgb),0.48) !important;
    text-shadow: none !important;
}

body.theme-light #tabInfo .ic-field-value,
body.theme-light #tabInfo .ic-contract-row .ic-field-value,
body.theme-light #tabInfo .ic-raio-value,
body.theme-light #tabInfo .ic-obs-text,
body.theme-light #tabInfo .widget-file-name {
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

body.theme-light #tabInfo .ic-field-link {
    color: var(--accent-strong) !important;
}

body.theme-light #tabInfo .ic-next-payment,
body.theme-light #tabInfo .ic-allocation,
body.theme-light #tabInfo .ic-obs-box,
body.theme-light #tabInfo .ic-access-item,
body.theme-light #tabInfo .ic-raio-section {
    background: var(--accent-light-bg) !important;
    border-color: rgba(var(--accent-strong-rgb),0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

body.theme-light #tabInfo .ic-next-payment {
    border-left-color: var(--accent-secondary) !important;
}

body.theme-light #tabInfo .ic-allocation {
    border-left-color: rgba(var(--accent-strong-rgb), 0.28) !important;
}

body.theme-light #tabInfo .ic-allocation-bar {
    background: rgba(var(--accent-readable-rgb),0.16) !important;
}

body.theme-light #tabInfo .ic-bar-neutral {
    background: rgba(var(--accent-readable-rgb),0.22) !important;
}

body.theme-light #tabInfo .ic-pdf-btn,
body.theme-light #tabInfo .ic-cancel-btn {
    background: #ffffff !important;
    border-color: rgba(var(--accent-readable-rgb),0.14) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 2px 10px rgba(var(--accent-strong-rgb),0.06) !important;
    text-shadow: none !important;
}

body.theme-light #tabInfo .ic-pdf-btn:hover,
body.theme-light #tabInfo .ic-cancel-btn:hover {
    background: var(--accent-light-bg) !important;
    border-color: rgba(var(--accent-strong-rgb), 0.24) !important;
    color: var(--accent-strong) !important;
}

body.theme-light #tabInfo .ic-field-input,
body.theme-light #tabInfo .ic-field-input-amount,
body.theme-light #tabInfo .ic-field-select,
body.theme-light #tabInfo .ic-login-input {
    background: var(--accent-light-bg-2) !important;
    border-color: rgba(var(--accent-readable-rgb),0.12) !important;
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

body.theme-light #tabInfo .ic-field-input:focus,
body.theme-light #tabInfo .ic-field-input-amount:focus,
body.theme-light #tabInfo .ic-field-select:focus,
body.theme-light #tabInfo .ic-login-input:focus,
body.theme-light #tabInfo .ic-raio-value:focus {
    background: var(--accent-light-bg-4) !important;
    border-color: rgba(var(--accent-strong-rgb), 0.45) !important;
}

body.theme-light #tabInfo .ic-obs-text::placeholder,
body.theme-light #tabInfo .ic-raio-value::placeholder,
body.theme-light #tabInfo .ic-login-input::placeholder,
body.theme-light #tabInfo .ic-field-input::placeholder {
    color: rgba(var(--accent-readable-rgb),0.34) !important;
}

body.theme-light #tabInfo .ic-dot {
    background: rgba(var(--accent-readable-rgb),0.08) !important;
}

body.theme-light #tabInfo .ic-dot.active {
    background: var(--accent-secondary) !important;
}

/* Raio X — refinamento visual no tema claro */
body.theme-light #tabInfo .ic-raio-grid {
    gap: 22px !important;
}

body.theme-light #tabInfo .ic-raio-section {
    padding: 16px 16px 14px !important;
    border: 1px solid rgba(var(--accent-strong-rgb), 0.14) !important;
    border-radius: 14px !important;
    background: #fbf9ff !important;
}

body.theme-light #tabInfo .ic-raio-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 2.6px !important;
    color: rgba(var(--accent-readable-rgb),0.92) !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(var(--accent-strong-rgb), 0.18) !important;
}

body.theme-light #tabInfo .ic-raio-section-title .material-symbols-outlined {
    color: #c86af1 !important;
    opacity: 1 !important;
}

body.theme-light #tabInfo .ic-raio-field {
    padding: 11px 0 13px !important;
    border-bottom: 1px solid rgba(var(--accent-strong-rgb), 0.12) !important;
}

body.theme-light #tabInfo .ic-raio-pair {
    gap: 14px !important;
}

body.theme-light #tabInfo .ic-raio-pair .ic-raio-field {
    padding-bottom: 10px !important;
}

body.theme-light #tabInfo .ic-raio-label {
    color: rgba(var(--accent-readable-rgb),0.58) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 2.2px !important;
    margin-bottom: 8px !important;
}

body.theme-light #tabInfo .ic-raio-value {
    min-height: 42px !important;
    padding: 11px 13px !important;
    background: var(--accent-light-bg-2) !important;
    border: 1px solid rgba(var(--accent-readable-rgb),0.10) !important;
    border-radius: 8px !important;
    color: rgba(var(--accent-readable-rgb),0.90) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

body.theme-light #tabInfo .ic-raio-value::placeholder {
    color: rgba(var(--accent-readable-rgb),0.40) !important;
}

body.theme-light #tabInfo .ic-raio-value:focus {
    background: #efe7fb !important;
    border-color: rgba(var(--accent-strong-rgb), 0.40) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb),0.12) !important;
}

body.theme-light #tabInfo .ic-raio-bottom {
    margin-top: 22px !important;
    padding-top: 22px !important;
    border-top: 1px solid rgba(var(--accent-strong-rgb), 0.18) !important;
    gap: 16px !important;
}

body.theme-light #tabInfo .ic-raio-bottom > .ic-raio-section-title {
    margin-bottom: 10px !important;
    padding-bottom: 12px !important;
}

body.theme-light #tabInfo .ic-raio-bottom > .ic-raio-field {
    padding: 12px 0 0 !important;
    border-bottom: none !important;
}

body.theme-light #tabInfo .ic-raio-highlight-pink,
body.theme-light #tabInfo .ic-raio-highlight-blue {
    color: rgba(var(--accent-readable-rgb),0.90) !important;
}

/* Personalização do Card — fundo padrão alinhado ao modo claro */
body.theme-light #tabInfo .ic-customize-content-vertical {
    gap: 14px !important;
}

body.theme-light #tabInfo .ic-customize-content-vertical .ic-customize-preview {
    margin-bottom: 12px !important;
}

body.theme-light #tabInfo .ic-customize-content-vertical .ic-preview-card {
    background: #ffffff !important;
    border: 1px solid rgba(var(--accent-strong-rgb),0.10) !important;
    box-shadow: 0 10px 24px rgba(var(--accent-readable-rgb),0.12) !important;
}

body.theme-light #tabInfo .ic-preview-header {
    background: var(--accent-light-card-header);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.70) 1px, transparent 1px),
        radial-gradient(circle at 75% 15%, rgba(255,255,255,0.50) 1.5px, transparent 1.5px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.60) 1px, transparent 1px),
        radial-gradient(circle at 80% 60%, rgba(var(--accent-primary-rgb),0.25) 40px, transparent 60px),
        radial-gradient(ellipse at 50% 50%, var(--accent-light-card-radial-1) 0%, var(--accent-light-card-radial-2) 100%);
    border-bottom: 1px solid rgba(var(--accent-strong-rgb),0.08) !important;
}

body.theme-light #tabInfo .ic-preview-footer {
    background: #ffffff !important;
    color: rgba(var(--accent-readable-rgb),0.92) !important;
    border-top: 1px solid rgba(var(--accent-strong-rgb),0.08) !important;
}

body.theme-light #tabInfo .ic-customize-options {
    border-top: 1px solid rgba(var(--accent-strong-rgb), 0.14) !important;
    padding-top: 16px !important;
}

body.theme-light #tabInfo .ic-customize-options label {
    color: rgba(var(--accent-readable-rgb),0.86) !important;
    font-weight: 700 !important;
}

body.theme-light #tabInfo .ic-customize-options input[type="radio"] {
    accent-color: var(--accent-strong) !important;
}

body.theme-light #tabInfo .ic-save-btn {
    box-shadow: 0 10px 20px rgba(var(--accent-secondary-rgb),0.18) !important;
}

body.theme-light #tabInfo .ic-card-edit {
    color: rgba(var(--accent-readable-rgb),0.38) !important;
}

body.theme-light #tabInfo .ic-card-edit:hover {
    color: var(--accent-strong) !important;
    background: rgba(var(--accent-strong-rgb), 0.08) !important;
}

body.theme-light #tabInfo .ic-tag-neutral {
    background: rgba(var(--accent-readable-rgb),0.04) !important;
    border-color: rgba(var(--accent-readable-rgb),0.10) !important;
    color: rgba(var(--accent-readable-rgb),0.62) !important;
}

body.theme-light #tabInfo .ic-access-item:hover {
    background: #ffffff !important;
    border-color: rgba(var(--accent-strong-rgb), 0.24) !important;
}

body.theme-light #tabInfo .ic-access-item.filled {
    background: rgba(34,160,90,0.08) !important;
    border-color: rgba(34,160,90,0.22) !important;
}

body.theme-light #tabInfo .ic-access-status,
body.theme-light #tabInfo .ic-access-pending,
body.theme-light #tabInfo .ic-access-off {
    color: rgba(var(--accent-readable-rgb),0.54) !important;
}

body.theme-light #tabInfo .ic-access-yes {
    color: #22a05a !important;
}

body.theme-light #tabInfo .ic-login-modal .ic-login-box {
    background: linear-gradient(180deg, #ffffff 0%, var(--accent-light-bg) 100%) !important;
    border-color: rgba(var(--accent-primary-rgb),0.26) !important;
    box-shadow: 0 24px 70px rgba(var(--accent-readable-rgb),0.18), 0 0 0 1px rgba(var(--accent-primary-rgb),0.08) !important;
}

body.theme-light #tabInfo .ic-login-title {
    color: var(--text-primary) !important;
}

body.theme-light #tabInfo [style*="color:#fff"],
body.theme-light #tabInfo [style*="color: #fff"],
body.theme-light #tabInfo [style*="color:#ccc"],
body.theme-light #tabInfo [style*="color: #ccc"],
body.theme-light #tabInfo [style*="color:rgba(255,255,255"],
body.theme-light #tabInfo [style*="color: rgba(255,255,255"] {
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

body.theme-light #tabInfo .ic-nebula::before {
    background: rgba(var(--accent-primary-rgb),0.08) !important;
}

body.theme-light #tabInfo .ic-nebula::after {
    background: rgba(var(--accent-secondary-rgb),0.06) !important;
}


/* =============================================================
 * TEMA CLARO — CENTRAL DE INFORMAÇÕES (ORGANIZAÇÃO + CAMPOS VISÍVEIS)
 * ============================================================= */
body.theme-light #tabInfo .ic-card-header {
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(var(--accent-strong-rgb), 0.14) !important;
}

body.theme-light #tabInfo .ic-card-header .material-symbols-outlined {
    opacity: 0.95;
}

body.theme-light #tabInfo .ic-contact-grid {
    gap: 14px 16px !important;
}

body.theme-light #tabInfo .ic-contact-grid > div {
    padding: 12px 14px !important;
    border: 1px solid rgba(var(--accent-strong-rgb), 0.12) !important;
    border-radius: 12px !important;
    background: #fcfbff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

body.theme-light #tabInfo .ic-contact-grid > .ic-contact-full {
    grid-column: 1 / -1 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(var(--accent-strong-rgb), 0.12) !important;
}

body.theme-light #tabInfo .ic-fin-row {
    gap: 12px !important;
}

body.theme-light #tabInfo .ic-fin-row > div {
    padding: 10px 12px !important;
    border: 1px solid rgba(var(--accent-strong-rgb), 0.12) !important;
    border-radius: 10px !important;
    background: #fcfbff !important;
}

body.theme-light #tabInfo .ic-next-payment {
    margin-top: 16px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(var(--accent-strong-rgb), 0.12) !important;
    border-left: 4px solid var(--accent-secondary) !important;
    border-radius: 12px !important;
    background: var(--accent-light-bg) !important;
}

body.theme-light #tabInfo .ic-contract-rows {
    gap: 0 !important;
    border: 1px solid rgba(var(--accent-strong-rgb), 0.12) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #fcfbff !important;
}

body.theme-light #tabInfo .ic-contract-row {
    padding: 13px 14px !important;
    min-height: 56px;
    border-bottom: 1px solid rgba(var(--accent-strong-rgb), 0.12) !important;
    background: transparent !important;
}

body.theme-light #tabInfo .ic-contract-row:last-child {
    border-bottom: none !important;
}

body.theme-light #tabInfo .ic-contract-row .ic-field-label,
body.theme-light #tabInfo .ic-contract-row .ic-field-value {
    margin: 0 !important;
}

body.theme-light #tabInfo .ic-service-tags {
    gap: 10px !important;
    min-height: 44px;
    padding: 2px 0 0;
}

body.theme-light #tabInfo .ic-tag-neutral {
    background: #fcfbff !important;
    border-color: rgba(var(--accent-strong-rgb), 0.12) !important;
    color: rgba(var(--accent-readable-rgb),0.72) !important;
}

body.theme-light #tabInfo .ic-allocation {
    margin-top: 18px !important;
    padding: 18px 20px !important;
    border: 1px solid rgba(var(--accent-strong-rgb), 0.12) !important;
    border-left: 2px solid rgba(var(--accent-strong-rgb), 0.28) !important;
    border-radius: 12px !important;
    background: var(--accent-light-bg) !important;
}

body.theme-light #tabInfo .ic-allocation-label {
    margin-bottom: 12px !important;
}

body.theme-light #tabInfo .ic-field-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 2.2px !important;
    margin-bottom: 7px !important;
    color: rgba(var(--accent-readable-rgb),0.52) !important;
}

body.theme-light #tabInfo .ic-field-value,
body.theme-light #tabInfo .ic-amount {
    line-height: 1.25 !important;
}

body.theme-light #tabInfo .ic-field-value {
    font-weight: 600 !important;
}

body.theme-light #tabInfo .ic-badge {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}

body.theme-light #tabInfo .ic-pdf-btn {
    margin-top: 14px !important;
    min-height: 52px;
    border-radius: 10px !important;
}


/* =============================================================
 * TEMA CLARO — CENTRAL DE INFORMAÇÕES (COMPACTAÇÃO DO LAYOUT)
 * ============================================================= */
body.theme-light #tabInfo .ic-page {
    gap: 20px !important;
}

body.theme-light #tabInfo .ic-card {
    padding: 20px !important;
    border-radius: 18px !important;
}

body.theme-light #tabInfo .ic-card-header {
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
}

body.theme-light #tabInfo .ic-card-header h3 {
    font-size: 17px !important;
}

body.theme-light #tabInfo .ic-contact-grid {
    gap: 10px 12px !important;
}

body.theme-light #tabInfo .ic-contact-grid > div {
    padding: 10px 12px !important;
    border-radius: 10px !important;
}

body.theme-light #tabInfo .ic-contact-grid > .ic-contact-full {
    padding-top: 10px !important;
}

body.theme-light #tabInfo .ic-field-label {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    margin-bottom: 6px !important;
}

body.theme-light #tabInfo .ic-field-value {
    font-size: 14px !important;
}

body.theme-light #tabInfo .ic-amount {
    font-size: 28px !important;
}

body.theme-light #tabInfo .ic-fin-row {
    gap: 10px !important;
}

body.theme-light #tabInfo .ic-fin-row > div {
    padding: 9px 10px !important;
    border-radius: 10px !important;
}

body.theme-light #tabInfo .ic-next-payment {
    margin-top: 12px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
}

body.theme-light #tabInfo .ic-contract-row {
    padding: 10px 12px !important;
    min-height: 50px !important;
}

body.theme-light #tabInfo .ic-contract-row .ic-field-value {
    font-size: 13px !important;
}

body.theme-light #tabInfo .ic-service-tags {
    gap: 8px !important;
    min-height: 28px !important;
    padding-top: 0 !important;
}

body.theme-light #tabInfo .ic-allocation {
    margin-top: 14px !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
}

body.theme-light #tabInfo .ic-allocation-label {
    font-size: 10px !important;
    margin-bottom: 10px !important;
}

body.theme-light #tabInfo .ic-pdf-btn {
    min-height: 48px !important;
    padding: 13px 14px !important;
    font-size: 12px !important;
}


/* =============================================================
 * TEMA CLARO — CENTRAL DE INFORMAÇÕES (EDIÇÃO SEM CAIXA DUPLA)
 * ============================================================= */
body.theme-light #tabInfo .ic-card.editing .ic-contact-grid,
body.theme-light #tabInfo .ic-card.editing .ic-fin-row {
    gap: 10px 12px !important;
}

body.theme-light #tabInfo .ic-card.editing .ic-contact-grid > div,
body.theme-light #tabInfo .ic-card.editing .ic-fin-row > div {
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: 0 !important;
}

body.theme-light #tabInfo .ic-card.editing .ic-contact-grid > .ic-contact-full {
    padding-top: 0 !important;
    border-top: none !important;
}

body.theme-light #tabInfo .ic-card.editing .ic-contract-rows {
    gap: 10px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

body.theme-light #tabInfo .ic-card.editing .ic-contract-rows > div,
body.theme-light #tabInfo .ic-card.editing .ic-contract-row {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    min-height: 0 !important;
}

body.theme-light #tabInfo .ic-card.editing .ic-field-label {
    margin-bottom: 6px !important;
}

body.theme-light #tabInfo .ic-card.editing .ic-field-input,
body.theme-light #tabInfo .ic-card.editing .ic-field-select,
body.theme-light #tabInfo .ic-card.editing .ic-field-input-amount {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    border-radius: 8px !important;
}

body.theme-light #tabInfo .ic-card.editing .ic-inline-cancel {
    background: #ffffff !important;
    border: 1px solid rgba(var(--accent-readable-rgb),0.14) !important;
    color: rgba(var(--accent-readable-rgb),0.64) !important;
}

body.theme-light #tabInfo .ic-card.editing .ic-inline-save {
    box-shadow: 0 6px 16px rgba(var(--accent-strong-rgb), 0.18) !important;
}


/* =============================================================
 * TEMA CLARO — MODAL DE ACESSOS DOS CLIENTES
 * ============================================================= */
body.theme-light #icLoginModal {
    background: rgba(235, 228, 247, 0.58) !important;
    backdrop-filter: blur(10px);
}

body.theme-light #icLoginModal .ic-login-box {
    background: linear-gradient(180deg, #ffffff 0%, #fbf9ff 100%) !important;
    border: 1px solid rgba(var(--accent-primary-rgb),0.24) !important;
    border-top: 3px solid var(--accent-secondary) !important;
    border-radius: 22px !important;
    box-shadow: 0 28px 70px rgba(var(--accent-readable-rgb),0.16), 0 0 0 1px rgba(var(--accent-primary-rgb),0.08) !important;
    padding: 28px 30px !important;
}

body.theme-light #icLoginModal .ic-login-box::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.06), rgba(var(--accent-secondary-rgb),0.04), transparent 64%) !important;
}

body.theme-light #icLoginModal .ic-login-title {
    color: var(--text-primary) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.3px;
}

body.theme-light #icLoginModal .ic-login-field {
    margin-bottom: 14px !important;
}

body.theme-light #icLoginModal .ic-login-label {
    color: rgba(var(--accent-readable-rgb),0.52) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 2.2px !important;
    margin-bottom: 8px !important;
}

body.theme-light #icLoginModal .ic-login-input {
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--accent-light-bg-2) !important;
    border: 1px solid rgba(var(--accent-strong-rgb), 0.16) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    color: var(--text-primary) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

body.theme-light #icLoginModal .ic-login-input::placeholder {
    color: rgba(var(--accent-readable-rgb),0.38) !important;
}

body.theme-light #icLoginModal .ic-login-input:focus {
    background: #ffffff !important;
    border-color: rgba(var(--accent-secondary-rgb),0.36) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-secondary-rgb),0.10) !important;
}

body.theme-light #icLoginModal .ic-password-wrap .ic-password-input {
    padding-right: 108px !important;
}

body.theme-light #icLoginModal .ic-password-toggle {
    color: rgba(var(--accent-readable-rgb),0.42) !important;
    background: rgba(255,255,255,0.48) !important;
}

body.theme-light #icLoginModal .ic-password-toggle:hover {
    color: var(--accent-secondary) !important;
    background: rgba(var(--accent-secondary-rgb),0.10) !important;
}

body.theme-light #icLoginModal .ic-login-actions {
    gap: 10px !important;
    margin-top: 18px !important;
}

body.theme-light #icLoginModal .ic-login-cancel,
body.theme-light #icLoginModal .ic-login-clear,
body.theme-light #icLoginModal .ic-login-save {
    min-height: 44px;
    border-radius: 10px !important;
}

body.theme-light #icLoginModal .ic-login-cancel {
    background: #ffffff !important;
    border: 1px solid rgba(var(--accent-readable-rgb),0.12) !important;
    color: rgba(var(--accent-readable-rgb),0.66) !important;
    box-shadow: 0 2px 10px rgba(var(--accent-strong-rgb),0.05) !important;
}

body.theme-light #icLoginModal .ic-login-cancel:hover {
    background: var(--accent-light-bg) !important;
    border-color: rgba(var(--accent-strong-rgb), 0.22) !important;
    color: var(--accent-strong) !important;
}

body.theme-light #icLoginModal .ic-login-clear {
    background: #fff6f8 !important;
    border: 1px solid rgba(var(--accent-secondary-rgb),0.16) !important;
    color: var(--brand-grad-end) !important;
}

body.theme-light #icLoginModal .ic-login-clear:hover {
    background: #ffeef4 !important;
    border-color: rgba(var(--accent-secondary-rgb),0.24) !important;
}

body.theme-light #icLoginModal .ic-login-save {
    background: linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end)) !important;
    box-shadow: 0 10px 22px rgba(var(--accent-secondary-rgb),0.18) !important;
}

body.theme-light #icLoginModal .ic-login-save:hover {
    box-shadow: 0 14px 28px rgba(var(--accent-secondary-rgb),0.24) !important;
    transform: translateY(-1px);
}

/* =============================================================
 * PROJEÇÃO — ORGANIZAÇÃO DE TEXTOS
 * Ajuste estrutural aplicado aos modos claro e escuro.
 * Não altera a lógica de cálculo nem o padrão das notificações.
 * ============================================================= */
#tabProjection .prj-wrapper {
    gap: 22px;
}

#tabProjection .prj-grid,
#tabProjection .prj-left,
#tabProjection .prj-right {
    font-size: 0.9em;
}

#tabProjection .prj-grid {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
}

#tabProjection .prj-left,
#tabProjection .prj-right,
#tabProjection .prj-secondary-stack,
#tabProjection .prj-bento {
    gap: 14px;
}

#tabProjection .prj-inputs-card {
    padding: 24px 24px 26px;
}

#tabProjection .prj-inputs-head,
#tabProjection .prj-insight-head {
    line-height: 1.15;
    letter-spacing: 2px;
}

#tabProjection .prj-inputs-head {
    margin-bottom: 20px;
}

#tabProjection .prj-fields {
    gap: 17px;
}

#tabProjection .prj-field {
    gap: 7px;
}

#tabProjection .prj-field-label {
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: 1.25px;
    max-width: 100%;
}

#tabProjection .prj-field-input {
    min-height: 40px;
    padding: 9px 12px;
}

#tabProjection .prj-field-hint {
    max-width: 230px;
    line-height: 1.35;
}

#tabProjection .prj-slider-row {
    gap: 16px;
}

#tabProjection .prj-slider-val {
    min-width: 58px;
    line-height: 1;
}

#tabProjection .prj-btn-calc {
    margin-top: 22px;
    min-height: 46px;
    line-height: 1.1;
}

#tabProjection .prj-bento-fat,
#tabProjection .prj-bento-invest,
#tabProjection .prj-bento-msg,
#tabProjection .prj-bento-lucro,
#tabProjection .prj-bento-roas,
#tabProjection .prj-sec-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#tabProjection .prj-bento-fat {
    min-height: 146px;
}

#tabProjection .prj-bento-invest,
#tabProjection .prj-bento-msg,
#tabProjection .prj-bento-lucro {
    min-height: 112px;
}

#tabProjection .prj-bento-roas {
    min-height: 146px;
}

#tabProjection .prj-bento-eyebrow,
#tabProjection .prj-sec-label,
#tabProjection .prj-chart-sub,
#tabProjection .prj-insight-box-label {
    line-height: 1.25;
    letter-spacing: 1.6px;
}

#tabProjection .prj-bento-eyebrow {
    margin-bottom: 12px;
}

#tabProjection .prj-bento-sub,
#tabProjection .prj-bento-trend,
#tabProjection .prj-invest-pct,
#tabProjection .prj-insight-empty,
#tabProjection .prj-insight-box-text,
#tabProjection .prj-insight-item {
    line-height: 1.55;
}

#tabProjection .prj-bento-sub {
    align-items: flex-start;
    max-width: 260px;
}

#tabProjection .prj-chart-head {
    margin-bottom: 12px;
}

#tabProjection .prj-chart-title {
    font-size: 15px;
    line-height: 1.2;
    margin-bottom: 5px;
}

#tabProjection .prj-chart-sub {
    max-width: 560px;
}

#tabProjection .prj-chart-labels {
    line-height: 1;
}

#tabProjection .prj-secondary {
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
    gap: 14px;
}

#tabProjection .prj-sec-card {
    min-height: 78px;
    align-items: flex-start;
    padding: 18px 22px;
}

#tabProjection .prj-sec-label {
    margin-bottom: 8px;
}

#tabProjection .prj-insight-card-small {
    padding: 22px 24px;
}

#tabProjection .prj-insight-card-wide {
    padding: 26px 28px;
}

#tabProjection .prj-insight-box-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 2px;
}

#tabProjection .prj-insight-box-label .material-symbols-outlined {
    font-size: 14px;
    line-height: 1;
}

#tabProjection .prj-insight-card-wide .prj-insights-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#tabProjection .prj-insight-card-wide .prj-insight-item:nth-child(3) {
    grid-column: 1 / -1;
}

#tabProjection .prj-insight-item {
    font-size: 11.5px;
    padding: 13px 15px 13px 26px;
}

#tabProjection .prj-insight-item::before {
    left: 14px;
    top: 13px;
}

#tabProjection .prj-insights-list .prj-insight-empty {
    max-width: 430px;
}

@media (max-width: 1180px) {
    #tabProjection .prj-grid {
        grid-template-columns: 1fr;
    }
    #tabProjection .prj-secondary,
    #tabProjection .prj-insight-card-wide .prj-insights-list {
        grid-template-columns: 1fr;
    }
    #tabProjection .prj-insight-card-wide .prj-insight-item:nth-child(3) {
        grid-column: auto;
    }
}

/* ============================================================
 * AJUSTE V44 — Projeção: cards inferiores mais organizados
 * Estrutural: aplicado nos modos claro e escuro.
 * ============================================================ */
.prj-secondary {
    align-items: stretch;
}

.prj-secondary-stack {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
}

.prj-sec-card {
    min-height: 88px;
    padding: 18px 22px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
}

.prj-sec-card > div:first-child {
    width: 100%;
}

.prj-sec-label {
    margin: 0 0 8px;
    line-height: 1.15;
}

.prj-sec-val {
    display: block;
    line-height: 1.05;
    letter-spacing: -0.2px;
}

.prj-sec-badge {
    margin-top: 0;
    min-height: 16px;
    line-height: 1;
    align-items: center;
}

.prj-sec-badge .material-symbols-outlined {
    flex: 0 0 auto;
    line-height: 1;
}

.prj-insight-card-small {
    min-height: 112px;
    padding: 24px 24px 24px;
    justify-content: flex-start;
}

.prj-insight-card-small .prj-insight-head {
    margin-bottom: 18px;
    line-height: 1.15;
    align-items: center;
}

.prj-insight-card-small .prj-insight-empty,
.prj-insight-card-small .prj-insight-box-text {
    max-width: 250px;
    margin: 0;
    line-height: 1.55;
}

.prj-insight-card-wide {
    min-height: 188px;
}

.prj-insight-card-wide > .prj-insight-box-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    line-height: 1.15;
}

.prj-insight-card-wide .prj-insights-list {
    align-items: stretch;
}

@media (max-width: 680px) {
    .prj-secondary-stack {
        grid-template-rows: auto;
    }

    .prj-sec-card,
    .prj-insight-card-small {
        min-height: auto;
    }

    .prj-insight-card-small .prj-insight-empty,
    .prj-insight-card-small .prj-insight-box-text {
        max-width: none;
    }
}

/* ============================================================
 * AJUSTE V45 — Projeção: insight mais compacto + etiquetas no topo
 * Estrutural: aplicado nos modos claro e escuro.
 * ============================================================ */
.prj-insight-card-small .prj-insight-head {
    margin-bottom: 8px;
}

.prj-insight-card-small .prj-insight-empty,
.prj-insight-card-small .prj-insight-box-text {
    margin-top: 0;
}

.prj-sec-card {
    position: relative;
    padding: 22px 112px 20px 22px;
}

.prj-sec-card > div:first-child {
    padding-right: 0;
}

.prj-sec-badge {
    position: absolute;
    top: 22px;
    right: 22px;
    justify-content: flex-end;
    white-space: nowrap;
    margin: 0;
}

/* ============================================================
 * AJUSTE V46 — Projeção: alinhamento fino dos badges CPA/diário
 * Estrutural: aplicado nos modos claro e escuro.
 * ============================================================ */
.prj-sec-card {
    position: relative;
    min-height: 108px;
    padding: 22px 22px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 18px;
    row-gap: 8px;
}

.prj-sec-card > div:first-child {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding-right: 0;
}

.prj-sec-label {
    margin: 0;
    line-height: 1.1;
}

.prj-sec-val {
    margin: 0;
    line-height: 1.05;
}

.prj-sec-badge {
    position: static;
    top: auto;
    right: auto;
    margin: 0;
    min-height: 0;
    justify-self: end;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    line-height: 1;
    white-space: nowrap;
}

.prj-sec-badge .material-symbols-outlined {
    font-size: 15px;
    line-height: 1;
}

/* ============================================================
 * AJUSTE V47 — Projeção: badge no topo direito alinhado ao título
 * Estrutural: aplicado nos modos claro e escuro.
 * ============================================================ */
.prj-sec-card {
    position: relative;
    min-height: 108px;
    padding: 24px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
}

.prj-sec-card > div:first-child {
    width: 100%;
    min-width: 0;
    padding-right: 130px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
}

.prj-sec-label {
    margin: 0;
    font-size: 10px;
    line-height: 1.1;
    letter-spacing: 2.2px;
}

.prj-sec-val {
    display: block;
    margin: 0;
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: -0.25px;
}

.prj-sec-badge {
    position: absolute;
    top: 22px;
    right: 24px;
    margin: 0;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

.prj-sec-badge .material-symbols-outlined {
    font-size: 15px;
    line-height: 1;
}

/* ============================================================
 * AJUSTE V48 — Projeção: títulos e números maiores nos cards CPA/diário
 * Estrutural: aplicado nos modos claro e escuro. Etiquetas preservadas.
 * ============================================================ */
.prj-sec-label {
    font-size: 12px;
    letter-spacing: 2.4px;
    line-height: 1.15;
}

.prj-sec-val {
    font-size: 20px;
    line-height: 1.05;
}

/* ============================================================
 * AJUSTE V49 — Projeção: aproxima título e número nos cards
 * Estrutural: aplicado nos modos claro e escuro.
 * ============================================================ */
.prj-sec-card > div:first-child {
    gap: 8px;
}

/* ============================================================
 * AJUSTE V50 — Meta Ads modal no padrão claro
 * Aplicado apenas ao tema claro por ser ajuste de cor/visual.
 * ============================================================ */
body.theme-light #metaConnectModal.ic-login-modal {
    background: rgba(var(--accent-readable-rgb),0.28);
}

body.theme-light #metaConnectModal .tm-panel {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.16);
    box-shadow: 0 28px 80px rgba(48,12,70,0.22), 0 0 0 1px rgba(var(--accent-primary-rgb),0.08);
}

body.theme-light #metaConnectModal .tm-panel::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.12), rgba(var(--accent-secondary-rgb),0.06));
}

body.theme-light #metaConnectModal .tm-header {
    background: linear-gradient(135deg, var(--accent-light-bg), var(--accent-light-bg-2));
    border-bottom-color: rgba(var(--accent-readable-rgb),0.08);
    box-shadow: none;
}

body.theme-light #metaConnectModal .tm-header::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.05), rgba(var(--accent-secondary-rgb),0.025), transparent 62%);
}

body.theme-light #metaConnectModal .tm-body {
    background: #ffffff;
}

body.theme-light #metaConnectModal .tm-title {
    color: var(--text-primary);
}

body.theme-light #metaConnectModal .tm-breadcrumb,
body.theme-light #metaConnectModal .tm-label,
body.theme-light #metaConnectModal .meta-steps-title {
    color: rgba(var(--accent-strong-rgb), 0.68);
}

body.theme-light #metaConnectModal .tm-close {
    background: rgba(var(--accent-readable-rgb),0.05);
    color: rgba(var(--accent-readable-rgb),0.42);
}

body.theme-light #metaConnectModal .tm-close:hover {
    background: rgba(var(--accent-secondary-rgb),0.08);
    color: var(--accent-secondary);
}

body.theme-light #metaConnectModal .tm-input {
    background: var(--accent-light-bg-2);
    border-color: rgba(var(--accent-readable-rgb),0.12);
    color: var(--text-primary);
}

body.theme-light #metaConnectModal .tm-input::placeholder {
    color: rgba(var(--accent-readable-rgb),0.32);
}

body.theme-light #metaConnectModal .tm-input:focus {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb), 0.38);
    box-shadow: 0 0 0 3px rgba(var(--accent-strong-rgb), 0.07);
}

body.theme-light #metaConnectModal .meta-connect-info {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-strong-rgb),0.14);
}

body.theme-light #metaConnectModal .meta-connect-title {
    color: var(--text-primary);
}

body.theme-light #metaConnectModal .meta-connect-desc,
body.theme-light #metaConnectModal .meta-input-hint,
body.theme-light #metaConnectModal .meta-steps-list {
    color: rgba(var(--accent-readable-rgb),0.62);
}

body.theme-light #metaConnectModal .meta-token-steps {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.08);
}

body.theme-light #metaConnectModal .meta-steps-list code {
    background: rgba(var(--accent-strong-rgb), 0.08);
    color: var(--accent-strong);
}

body.theme-light #metaConnectModal .meta-link {
    color: var(--accent-strong);
}

body.theme-light #metaConnectModal .meta-link:hover {
    color: var(--accent-readable);
}

body.theme-light #metaConnectModal .tdc-cancel {
    background: var(--accent-light-bg);
    color: rgba(var(--accent-readable-rgb),0.62);
    border-color: rgba(var(--accent-readable-rgb),0.10);
}

body.theme-light #metaConnectModal .tdc-cancel:hover {
    background: var(--accent-light-bg-3);
    color: var(--text-primary);
}

/* ============================================================
 * AJUSTE V51 — Padrão claro para modais de tarefa e raia
 * Aplicado ao tema claro, sem alterar o tema escuro.
 * ============================================================ */
body.theme-light #taskModal.ic-login-modal,
body.theme-light #laneModal.ic-login-modal {
    background: rgba(var(--accent-readable-rgb),0.28);
}

/* Modal Nova Tarefa */
body.theme-light #taskModal .tm-panel {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.16);
    box-shadow: 0 28px 80px rgba(48,12,70,0.22), 0 0 0 1px rgba(var(--accent-primary-rgb),0.08);
}
body.theme-light #taskModal .tm-panel::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.12), rgba(var(--accent-secondary-rgb),0.06));
}
body.theme-light #taskModal .tm-header {
    background: linear-gradient(135deg, var(--accent-light-bg), var(--accent-light-bg-2));
    border-bottom-color: rgba(var(--accent-readable-rgb),0.08);
    box-shadow: none;
}
body.theme-light #taskModal .tm-header::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.05), rgba(var(--accent-secondary-rgb),0.025), transparent 62%);
}
body.theme-light #taskModal .tm-body,
body.theme-light #taskModal .tm-footer {
    background: #ffffff;
}
body.theme-light #taskModal .tm-footer {
    border-top-color: rgba(var(--accent-readable-rgb),0.08);
}
body.theme-light #taskModal .tm-title { color: var(--text-primary); }
body.theme-light #taskModal .tm-breadcrumb,
body.theme-light #taskModal .tm-label,
body.theme-light #taskModal .tm-label-action {
    color: rgba(var(--accent-strong-rgb), 0.68);
}
body.theme-light #taskModal .tm-close {
    background: rgba(var(--accent-readable-rgb),0.05);
    color: rgba(var(--accent-readable-rgb),0.42);
}
body.theme-light #taskModal .tm-close:hover {
    background: rgba(var(--accent-secondary-rgb),0.08);
    color: var(--accent-secondary);
}
body.theme-light #taskModal .tm-input,
body.theme-light #taskModal .tm-textarea,
body.theme-light #taskModal .tm-cl-placeholder,
body.theme-light #taskModal .tm-dropdown-trigger,
body.theme-light #taskModal .tm-ma-trigger {
    background: var(--accent-light-bg-2);
    border-color: rgba(var(--accent-readable-rgb),0.12);
    color: var(--text-primary);
}
body.theme-light #taskModal .tm-input::placeholder,
body.theme-light #taskModal .tm-textarea::placeholder,
body.theme-light #taskModal .tm-cl-new-input::placeholder,
body.theme-light #taskModal .tm-ma-placeholder {
    color: rgba(var(--accent-readable-rgb),0.32);
}
body.theme-light #taskModal .tm-input:focus,
body.theme-light #taskModal .tm-textarea:focus,
body.theme-light #taskModal .tm-cl-placeholder:focus-within {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb), 0.38);
    box-shadow: 0 0 0 3px rgba(var(--accent-strong-rgb), 0.07);
}
body.theme-light #taskModal .tm-dropdown-trigger .material-symbols-outlined,
body.theme-light #taskModal .tm-ma-trigger .material-symbols-outlined {
    color: rgba(var(--accent-readable-rgb),0.42);
}
body.theme-light #taskModal .tm-dropdown-list,
body.theme-light #taskModal .tm-ma-list {
    background: #ffffff;
    border-color: rgba(var(--accent-readable-rgb),0.10);
    box-shadow: 0 18px 40px rgba(48,12,70,0.14);
}
body.theme-light #taskModal .tm-dropdown-option,
body.theme-light #taskModal .tm-ma-item {
    color: rgba(var(--accent-readable-rgb),0.78);
}
body.theme-light #taskModal .tm-dropdown-option:hover,
body.theme-light #taskModal .tm-ma-item:hover {
    background: rgba(var(--accent-strong-rgb), 0.06);
    -webkit-text-fill-color: initial;
    color: var(--accent-strong);
}
body.theme-light #taskModal .tm-dropdown-option.selected {
    background: rgba(var(--accent-strong-rgb), 0.10);
    -webkit-text-fill-color: initial;
    color: var(--accent-strong);
}
body.theme-light #taskModal .tm-type-btn {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.10);
    opacity: 1;
}
body.theme-light #taskModal .tm-type-btn:hover {
    border-color: rgba(var(--accent-strong-rgb), 0.22);
    background: var(--accent-light-bg-3);
}
body.theme-light #taskModal .tm-type-btn.active {
    background: rgba(var(--accent-strong-rgb), 0.10);
    border-color: rgba(var(--accent-strong-rgb), 0.30);
    box-shadow: 0 8px 24px rgba(var(--accent-strong-rgb),0.08);
}
body.theme-light #taskModal .tm-type-icon {
    background: rgba(var(--accent-strong-rgb), 0.12);
    color: var(--accent-strong);
}
body.theme-light #taskModal .tm-type-icon-dim {
    background: rgba(var(--accent-readable-rgb),0.05);
    color: rgba(var(--accent-readable-rgb),0.46);
}
body.theme-light #taskModal .tm-type-name { color: var(--text-primary); }
body.theme-light #taskModal .tm-type-sub { color: rgba(var(--accent-readable-rgb),0.45); }
body.theme-light #taskModal .tm-cl-item {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.08);
}
body.theme-light #taskModal .tm-cl-item input[type="text"],
body.theme-light #taskModal .tm-cl-new-input {
    color: var(--text-primary);
}
body.theme-light #taskModal .tm-cl-item input[type="text"]::placeholder {
    color: rgba(var(--accent-readable-rgb),0.32);
}
body.theme-light #taskModal .tm-cl-del { color: rgba(var(--accent-readable-rgb),0.24); }
body.theme-light #taskModal .tm-cl-del:hover { color: var(--accent-secondary); }
body.theme-light #taskModal .tm-upload {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.10);
}
body.theme-light #taskModal .tm-upload:hover { border-color: rgba(var(--accent-strong-rgb), 0.24); }
body.theme-light #taskModal .tm-upload-icon {
    background: #ffffff;
    border-color: rgba(var(--accent-readable-rgb),0.08);
    color: rgba(var(--accent-readable-rgb),0.56);
}
body.theme-light #taskModal .tm-upload:hover .tm-upload-icon {
    border-color: rgba(var(--accent-strong-rgb), 0.24);
    color: var(--accent-strong);
}
body.theme-light #taskModal .tm-upload-text { color: rgba(var(--accent-readable-rgb),0.70); }
body.theme-light #taskModal .tm-upload-sub { color: rgba(var(--accent-readable-rgb),0.38); }
body.theme-light #taskModal .tm-corner-tl,
body.theme-light #taskModal .tm-corner-tr,
body.theme-light #taskModal .tm-corner-bl,
body.theme-light #taskModal .tm-corner-br {
    border-color: rgba(var(--accent-strong-rgb), 0.34);
}
body.theme-light #taskModal .tm-btn-cancel {
    background: var(--accent-light-bg);
    border: 1px solid rgba(var(--accent-readable-rgb),0.10);
    color: rgba(var(--accent-readable-rgb),0.58);
}
body.theme-light #taskModal .tm-btn-cancel:hover {
    background: var(--accent-light-bg-3);
    color: var(--text-primary);
}

/* Modal Nova Raia */
body.theme-light #laneModal .tdc-box {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.16);
    box-shadow: 0 28px 80px rgba(48,12,70,0.22), 0 0 0 1px rgba(var(--accent-primary-rgb),0.08);
}
body.theme-light #laneModal .tdc-title { color: var(--text-primary); }
body.theme-light #laneModal .ic-login-label {
    color: rgba(var(--accent-strong-rgb), 0.68);
}
body.theme-light #laneModal .tm-input {
    background: var(--accent-light-bg-2);
    border-color: rgba(var(--accent-readable-rgb),0.12);
    color: var(--text-primary);
}
body.theme-light #laneModal .tm-input::placeholder {
    color: rgba(var(--accent-readable-rgb),0.32);
}
body.theme-light #laneModal .tm-input:focus {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb), 0.38);
    box-shadow: 0 0 0 3px rgba(var(--accent-strong-rgb), 0.07);
}
body.theme-light #laneModal .lane-color-opt.lane-opt-active {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(var(--accent-strong-rgb), 0.25), 0 8px 20px rgba(var(--accent-strong-rgb),0.12);
}
body.theme-light #laneModal .lane-icon-grid {
    scrollbar-color: rgba(var(--accent-strong-rgb), 0.28) transparent;
}
body.theme-light #laneModal .lane-icon-grid::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-strong-rgb), 0.28);
}
body.theme-light #laneModal .lane-icon-opt {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.08);
    color: rgba(var(--accent-readable-rgb),0.66);
}
body.theme-light #laneModal .lane-icon-opt:hover {
    background: rgba(var(--accent-strong-rgb), 0.08);
    color: var(--accent-strong);
    border-color: rgba(var(--accent-strong-rgb), 0.18);
}
body.theme-light #laneModal .lane-icon-opt.lane-opt-active {
    background: rgba(var(--accent-strong-rgb), 0.12);
    color: var(--accent-strong);
    border-color: rgba(var(--accent-strong-rgb), 0.30);
}
body.theme-light #laneModal .tdc-cancel {
    background: var(--accent-light-bg);
    color: rgba(var(--accent-readable-rgb),0.62);
    border-color: rgba(var(--accent-readable-rgb),0.10);
}
body.theme-light #laneModal .tdc-cancel:hover {
    background: var(--accent-light-bg-3);
    color: var(--text-primary);
}

/* ============================================================
 * AJUSTE V52 — Botão Nova Coluna visível no modo claro
 * Aplicado ao tema claro por ser ajuste visual.
 * ============================================================ */
body.theme-light .kb-columns-mode .kb-add-lane-btn {
    min-height: 680px;
    padding: 32px 18px;
    flex-direction: column;
    gap: 14px;
    border: 2px dashed rgba(var(--accent-strong-rgb), 0.22);
    background: var(--accent-light-bg);
    color: var(--accent-strong);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-primary-rgb),0.05);
}

body.theme-light .kb-columns-mode .kb-add-lane-btn .material-symbols-outlined {
    font-size: 42px;
    color: rgba(var(--accent-strong-rgb), 0.72);
}

body.theme-light .kb-columns-mode .kb-add-lane-btn span:last-child {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: rgba(var(--accent-readable-rgb),0.68);
}

body.theme-light .kb-columns-mode .kb-add-lane-btn:hover {
    border-color: rgba(var(--accent-strong-rgb), 0.34);
    background: var(--accent-light-bg-2);
    color: var(--accent-strong);
    box-shadow: 0 10px 28px rgba(var(--accent-strong-rgb),0.10), inset 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
}

body.theme-light .kb-columns-mode .kb-add-lane-btn:hover .material-symbols-outlined {
    color: var(--accent-strong);
}

body.theme-light .kb-columns-mode .kb-add-lane-btn:hover span:last-child {
    color: var(--accent-readable-2);
}

/* ============================================================
 * AJUSTE V53 — Equilíbrio tipográfico entre Planejamento e Tarefas
 * Estrutural: aplicado nos modos claro e escuro.
 * ============================================================ */
/* Planejamento: reduzir o peso visual geral */
.pln-title {
    font-weight: 700;
    letter-spacing: -0.038em;
}

.pln-filter-btn {
    font-weight: 600;
}

.pln-print-btn,
.pln-badge,
.pln-legend-label,
.pln-table thead th,
.pln-week-label,
.pln-footer-label {
    font-weight: 700;
}

.pln-week-title {
    font-size: 31px;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.pln-row-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.34;
}

.pln-row-subtitle {
    font-size: 13px;
    font-weight: 400;
}

.pln-row-copy {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.58;
}

/* Tarefas: aumentar presença tipográfica */
.kb-main-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.018em;
}

.kb-main-sub {
    font-size: 14px;
    font-weight: 500;
}

.kb-lane-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.012em;
}

.kb-lane-sub {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.kb-lane-count {
    font-weight: 800;
}

.kb-card-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.35px;
}

.kb-card-add-label,
.kb-add-lane-btn,
.kb-lane-add-gradient {
    font-weight: 700;
}

/* ============================================================
 * AJUSTE V54 — Tarefas com textos mais visíveis
 * Estrutural: aplicado nos modos claro e escuro.
 * ============================================================ */
.kb-main-title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.kb-main-sub {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.32;
}

.kb-stat-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.kb-stat-value {
    font-size: 20px;
    font-weight: 800;
}

.kb-lane-title {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.015em;
}

.kb-lane-sub {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.kb-lane-count {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.kb-lane-toggle-btn {
    font-size: 11px;
    font-weight: 700;
}

.kb-card-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.25px;
}

.kb-tag,
.kb-label-chip {
    font-size: 10px;
    font-weight: 700;
}

.kb-due,
.kb-obj {
    font-size: 11px;
    font-weight: 600;
}

.kb-desc {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
}

.kb-btn,
.kb-card-add-label,
.kb-add-lane-btn,
.kb-lane-add-gradient {
    font-size: 11px;
    font-weight: 700;
}

/* ============================================================
 * AJUSTE V55 — Data da tarefa visível no modo claro
 * Aplicado ao tema claro por ser ajuste visual.
 * ============================================================ */
body.theme-light #taskModal input.tm-input[type="date"] {
    background: var(--accent-light-bg-2);
    color: var(--text-primary);
    color-scheme: light;
    accent-color: var(--accent-strong);
}

body.theme-light #taskModal input.tm-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.72;
}

body.theme-light #taskModal input.tm-input[type="date"]::-webkit-datetime-edit,
body.theme-light #taskModal input.tm-input[type="date"]::-webkit-datetime-edit-text,
body.theme-light #taskModal input.tm-input[type="date"]::-webkit-datetime-edit-month-field,
body.theme-light #taskModal input.tm-input[type="date"]::-webkit-datetime-edit-day-field,
body.theme-light #taskModal input.tm-input[type="date"]::-webkit-datetime-edit-year-field {
    color: var(--text-primary);
}

body.theme-light #taskModal input.tm-input[type="date"]:invalid::-webkit-datetime-edit,
body.theme-light #taskModal input.tm-input[type="date"]:invalid::-webkit-datetime-edit-text,
body.theme-light #taskModal input.tm-input[type="date"]:invalid::-webkit-datetime-edit-month-field,
body.theme-light #taskModal input.tm-input[type="date"]:invalid::-webkit-datetime-edit-day-field,
body.theme-light #taskModal input.tm-input[type="date"]:invalid::-webkit-datetime-edit-year-field {
    color: rgba(var(--accent-readable-rgb),0.32);
}

body.theme-light #taskModal input.tm-input[type="date"]:focus::-webkit-calendar-picker-indicator {
    opacity: 0.9;
}

/* ============================================================
 * AJUSTE V56 — Padronização do peso dos títulos entre abas
 * Estrutural: aplicado nos modos claro e escuro.
 * Baseado no peso visual de "Central de Informações".
 * ============================================================ */
.ic-header-title,
.kb-main-title,
.pln-title,
.mtr-title,
.prj-title {
    font-weight: 700;
}

/* ============================================================
 * AJUSTE V57 — Status "Em andamento" em uma linha
 * Estrutural: aplicado nos modos claro e escuro.
 * ============================================================ */
.kb-stats {
    grid-template-columns: repeat(4, minmax(108px, 132px));
}

.kb-stat-label {
    white-space: nowrap;
}

/* ============================================================
 * AJUSTE V58 — Subtítulos das colunas mais visíveis no modo claro
 * Aplicado ao tema claro por ser ajuste de tom/cor.
 * ============================================================ */
body.theme-light .kb-lane-sub {
    opacity: 0.92;
}

/* ============================================================
 * AJUSTE V59 — Cabeçalho das tarefas segue a cor da raia
 * Aplicado em ambos os temas e compatível com raias personalizadas.
 * ============================================================ */
.kb-card-top {
    background: var(--kb-card-top-bg, linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 52%, var(--brand-grad-end)));
}

.kb-card-top .kb-card-title {
    color: var(--kb-card-top-text, #ffffff);
}



.kb-card-top .kb-card-drag-handle {
    color: var(--kb-card-top-handle-color, rgba(255,255,255,0.78));
    background: var(--kb-card-top-handle-bg, rgba(255,255,255,0.14));
    border-color: var(--kb-card-top-handle-border, rgba(255,255,255,0.16));
}

.kb-card-top .kb-card-drag-handle:hover {
    color: var(--kb-card-top-handle-hover-color, #ffffff);
    background: var(--kb-card-top-handle-hover-bg, rgba(255,255,255,0.22));
    border-color: var(--kb-card-top-handle-hover-border, rgba(255,255,255,0.28));
}

/* ============================================================
 * AJUSTE V60 — Cabeçalhos das tarefas com degradê mais forte
 * Ajuste visual aplicado em ambos os temas.
 * ============================================================ */
.kb-card-top {
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.12);
}

/* ============================================================
 * AJUSTE V61 — Completa padrão claro no detalhe da tarefa e colaboradores
 * Aplicado ao tema claro por ser ajuste visual.
 * ============================================================ */
body.theme-light #taskDetailModal.ic-login-modal {
    background: rgba(var(--accent-readable-rgb),0.28);
}

body.theme-light #taskDetailModal .tm-panel {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.16);
    box-shadow: 0 28px 80px rgba(48,12,70,0.22), 0 0 0 1px rgba(var(--accent-primary-rgb),0.08);
}

body.theme-light #taskDetailModal .tm-panel::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.12), rgba(var(--accent-secondary-rgb),0.06));
}

body.theme-light #taskDetailModal .tm-header {
    background: linear-gradient(135deg, var(--accent-light-bg), var(--accent-light-bg-2));
    border-bottom-color: rgba(var(--accent-readable-rgb),0.08);
    box-shadow: none;
}

body.theme-light #taskDetailModal .tm-header::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.05), rgba(var(--accent-secondary-rgb),0.025), transparent 62%);
}

body.theme-light #taskDetailModal .tm-body,
body.theme-light #taskDetailModal .tm-footer {
    background: #ffffff;
}

body.theme-light #taskDetailModal .tm-footer {
    border-top-color: rgba(var(--accent-readable-rgb),0.08);
}

body.theme-light #taskDetailModal .tm-title {
    color: var(--text-primary);
}

body.theme-light #taskDetailModal .tm-breadcrumb {
    color: rgba(var(--accent-strong-rgb), 0.68);
}

body.theme-light #taskDetailModal .tm-close {
    background: rgba(var(--accent-readable-rgb),0.05);
    color: rgba(var(--accent-readable-rgb),0.42);
}

body.theme-light #taskDetailModal .tm-close:hover {
    background: rgba(var(--accent-secondary-rgb),0.08);
    color: var(--accent-secondary);
}

body.theme-light #taskDetailModal .td-status-planejado { background: var(--accent-light-bg); border-color: rgba(var(--accent-readable-rgb),0.10); color: rgba(var(--accent-readable-rgb),0.58); }
body.theme-light #taskDetailModal .td-status-andamento { background: rgba(var(--accent-primary-rgb),0.12); border-color: rgba(var(--accent-primary-rgb),0.26); color: var(--accent-strong); }
body.theme-light #taskDetailModal .td-status-atrasado { background: rgba(255,110,128,0.12); border-color: rgba(255,110,128,0.22); color: #e34a69; }
body.theme-light #taskDetailModal .td-status-concluido { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.22); color: #1f9e60; }

body.theme-light #taskDetailModal .td-info-card {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.08);
}

body.theme-light #taskDetailModal .td-info-icon {
    background: rgba(var(--accent-strong-rgb), 0.12);
    color: var(--accent-strong);
}

body.theme-light #taskDetailModal .td-info-label,
body.theme-light #taskDetailModal .td-block-label {
    color: rgba(var(--accent-readable-rgb),0.52);
}

body.theme-light #taskDetailModal .td-block-label .material-symbols-outlined {
    color: rgba(var(--accent-strong-rgb), 0.74);
}

body.theme-light #taskDetailModal .td-info-val,
body.theme-light #taskDetailModal .td-collab-name {
    color: var(--text-primary);
}

body.theme-light #taskDetailModal .td-cl-counter {
    color: rgba(var(--accent-readable-rgb),0.34);
}

body.theme-light #taskDetailModal .td-obj {
    color: rgba(var(--accent-readable-rgb),0.72);
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-strong-rgb), 0.10);
}

body.theme-light #taskDetailModal .td-desc {
    color: rgba(var(--accent-readable-rgb),0.66);
    background: #faf8fd;
    border-color: rgba(var(--accent-readable-rgb),0.06);
}

body.theme-light #taskDetailModal .td-check-bar {
    background: rgba(var(--accent-readable-rgb),0.08);
}

body.theme-light #taskDetailModal .td-check-item {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-readable-rgb),0.06);
    color: rgba(var(--accent-readable-rgb),0.78);
}

body.theme-light #taskDetailModal .td-check-item:hover {
    background: var(--accent-light-bg-3);
}

body.theme-light #taskDetailModal .td-check-item .td-done {
    color: rgba(var(--accent-readable-rgb),0.30);
}

body.theme-light #taskDetailModal .td-ref-container {
    border-color: rgba(var(--accent-readable-rgb),0.08);
}

body.theme-light #taskDetailModal .tm-btn-cancel {
    background: #fff5f7;
    border-color: rgba(255,110,128,0.18);
    color: #e34a69;
}

body.theme-light #taskDetailModal .tm-btn-cancel:hover {
    background: #ffecef;
    border-color: rgba(255,110,128,0.26);
}

body.theme-light #taskDetailModal .td-btn-edit {
    background: var(--accent-light-bg);
    border-color: rgba(var(--accent-strong-rgb), 0.18);
    color: var(--accent-strong);
}

body.theme-light #taskDetailModal .td-btn-edit:hover {
    background: var(--accent-light-bg-3);
    border-color: rgba(var(--accent-strong-rgb), 0.28);
}

/* Colaboradores no modal de tarefa */
body.theme-light #taskModal .tm-ma-tag {
    background: rgba(var(--accent-strong-rgb), 0.10);
    border-color: rgba(var(--accent-strong-rgb), 0.18);
    color: rgba(var(--accent-readable-rgb),0.76);
}

body.theme-light #taskModal .tm-ma-remove {
    color: rgba(var(--accent-readable-rgb),0.40);
}

body.theme-light #taskModal .tm-ma-remove:hover {
    color: var(--accent-secondary);
}

body.theme-light #taskModal .tm-ma-list {
    background: #ffffff;
    border-color: rgba(var(--accent-readable-rgb),0.10);
    box-shadow: 0 18px 40px rgba(48,12,70,0.14);
}

body.theme-light #taskModal .tm-ma-list::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-strong-rgb), 0.18);
}

body.theme-light #taskModal .tm-ma-option {
    border-bottom-color: rgba(var(--accent-readable-rgb),0.06);
}

body.theme-light #taskModal .tm-ma-option:hover {
    background: rgba(var(--accent-strong-rgb), 0.06);
}

body.theme-light #taskModal .tm-ma-option.tm-ma-selected {
    background: rgba(var(--accent-strong-rgb), 0.10);
}

body.theme-light #taskModal .tm-ma-option span:nth-child(2) {
    color: rgba(var(--accent-readable-rgb),0.78);
}

body.theme-light #taskModal .tm-ma-empty {
    color: rgba(var(--accent-readable-rgb),0.46);
}

/* ============================================================
 * AJUSTE V63 — Botões das tarefas mais visíveis no modo claro
 * Aplicado ao tema claro por ser ajuste visual/tom.
 * ============================================================ */
body.theme-light .kb-btn {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

body.theme-light .kb-btn-start {
    background: rgba(var(--accent-primary-rgb),0.18);
    color: #b05fe8;
    border-color: rgba(176,95,232,0.34);
}
body.theme-light .kb-btn-start:hover {
    background: rgba(var(--accent-primary-rgb),0.28);
    color: #9842d7;
    border-color: rgba(152,66,215,0.42);
}

body.theme-light .kb-btn-done {
    background: rgba(52,184,122,0.18);
    color: #239a63;
    border-color: rgba(35,154,99,0.30);
}
body.theme-light .kb-btn-done:hover {
    background: rgba(52,184,122,0.26);
    color: #167e4d;
    border-color: rgba(22,126,77,0.38);
}

body.theme-light .kb-btn-restart {
    background: rgba(255,178,184,0.20);
    color: #ef7f8b;
    border-color: rgba(239,127,139,0.34);
}
body.theme-light .kb-btn-restart:hover {
    background: rgba(255,178,184,0.30);
    color: #df6674;
    border-color: rgba(223,102,116,0.40);
}

/* ============================================================
 * AJUSTE V64 — Modal de retomar tarefa no padrão claro
 * Aplicado ao tema claro por ser ajuste visual.
 * ============================================================ */
body.theme-light #taskRestartModal.ic-login-modal {
    background: rgba(var(--accent-readable-rgb),0.28);
}

body.theme-light #taskRestartModal .tdc-box {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.16);
    box-shadow: 0 28px 80px rgba(48,12,70,0.22), 0 0 0 1px rgba(var(--accent-primary-rgb),0.08);
}

body.theme-light #taskRestartModal .tdc-title {
    color: var(--text-primary);
}

body.theme-light #taskRestartModal .tdc-text {
    color: rgba(var(--accent-readable-rgb),0.62);
}

body.theme-light #taskRestartModal .ic-login-label {
    color: rgba(var(--accent-strong-rgb), 0.68);
}

body.theme-light #taskRestartModal .tm-input {
    background: var(--accent-light-bg-2);
    border-color: rgba(var(--accent-readable-rgb),0.12);
    color: var(--text-primary);
    color-scheme: light;
    accent-color: var(--accent-strong);
}

body.theme-light #taskRestartModal .tm-input::placeholder {
    color: rgba(var(--accent-readable-rgb),0.32);
}

body.theme-light #taskRestartModal .tm-input:focus {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb), 0.38);
    box-shadow: 0 0 0 3px rgba(var(--accent-strong-rgb), 0.07);
}

body.theme-light #taskRestartModal input.tm-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.72;
}

body.theme-light #taskRestartModal input.tm-input[type="date"]::-webkit-datetime-edit,
body.theme-light #taskRestartModal input.tm-input[type="date"]::-webkit-datetime-edit-text,
body.theme-light #taskRestartModal input.tm-input[type="date"]::-webkit-datetime-edit-month-field,
body.theme-light #taskRestartModal input.tm-input[type="date"]::-webkit-datetime-edit-day-field,
body.theme-light #taskRestartModal input.tm-input[type="date"]::-webkit-datetime-edit-year-field {
    color: var(--text-primary);
}

body.theme-light #taskRestartModal .tdc-cancel {
    background: var(--accent-light-bg);
    color: rgba(var(--accent-readable-rgb),0.62);
    border-color: rgba(var(--accent-readable-rgb),0.10);
}

body.theme-light #taskRestartModal .tdc-cancel:hover {
    background: var(--accent-light-bg-3);
    color: var(--text-primary);
}

/* ── taskDeleteConfirm — tema claro ─────────────────────────── */
body.theme-light #taskDeleteConfirm.ic-login-modal {
    background: rgba(var(--accent-readable-rgb),0.28);
}
body.theme-light #taskDeleteConfirm .tdc-box {
    background: #ffffff;
    border-color: rgba(220,38,60,0.14);
    box-shadow: 0 28px 80px rgba(48,12,70,0.20);
}
body.theme-light #taskDeleteConfirm .tdc-icon {
    background: rgba(220,38,60,0.08);
    border-color: rgba(220,38,60,0.18);
}
body.theme-light #taskDeleteConfirm .tdc-icon .material-symbols-outlined {
    color: #c8223c;
}
body.theme-light #taskDeleteConfirm .tdc-title {
    color: var(--accent-readable-2);
}
body.theme-light #taskDeleteConfirm .tdc-text {
    color: rgba(var(--accent-readable-rgb),0.60);
}
body.theme-light #taskDeleteConfirm .tdc-cancel {
    background: var(--accent-light-bg);
    color: rgba(var(--accent-readable-rgb),0.58);
    border-color: rgba(var(--accent-readable-rgb),0.10);
}
body.theme-light #taskDeleteConfirm .tdc-cancel:hover {
    background: var(--accent-light-bg-3);
    color: var(--accent-readable-2);
    border-color: rgba(var(--accent-readable-rgb),0.16);
}
body.theme-light #taskDeleteConfirm .tdc-confirm {
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 18px rgba(var(--accent-secondary-rgb),0.28);
}
body.theme-light #taskDeleteConfirm .tdc-confirm:hover {
    box-shadow: 0 6px 24px rgba(var(--accent-secondary-rgb),0.45);
    transform: translateY(-1px);
}

/* ============================================================
 * AJUSTE V65 — Silhueta de drop da tarefa mais visível no modo claro
 * Aplicado ao tema claro por ser ajuste visual/tom.
 * ============================================================ */
body.theme-light .kb-card-ghost {
    border-color: rgba(var(--accent-strong-rgb), 0.28);
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.14), rgba(255,178,184,0.10));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.30), 0 10px 22px rgba(var(--accent-strong-rgb),0.08);
}

body.theme-light .kb-columns-mode .kb-card-ghost {
    min-height: 54px;
}

@keyframes ghostPulseLight {
    from {
        border-color: rgba(var(--accent-strong-rgb), 0.24);
        background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.10), rgba(255,178,184,0.07));
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 8px 18px rgba(var(--accent-strong-rgb),0.06);
    }
    to {
        border-color: rgba(var(--accent-strong-rgb), 0.38);
        background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.18), rgba(255,178,184,0.12));
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.34), 0 12px 24px rgba(var(--accent-strong-rgb),0.10);
    }
}

body.theme-light .kb-card-ghost {
    animation: ghostPulseLight 0.7s ease-in-out infinite alternate;
}

/* ============================================================
 * AJUSTE V66 — Fundo das tarefas mais claro no modo escuro
 * Aplicado ao modo escuro por ser ajuste visual.
 * ============================================================ */
body:not(.theme-light) .kb-card {
    background: linear-gradient(180deg, rgba(25,19,36,0.96) 0%, rgba(19,14,28,0.95) 100%);
    border-color: rgba(var(--accent-primary-rgb),0.22);
    box-shadow: 0 0 22px rgba(var(--accent-strong-rgb),0.10);
}

body:not(.theme-light) .kb-card:hover {
    border-color: rgba(var(--accent-primary-rgb),0.38);
    box-shadow: 0 12px 32px -10px rgba(var(--accent-primary-rgb),0.18);
}

body:not(.theme-light) .kb-card-foot {
    border-top-color: rgba(255,255,255,0.06);
}

/* ============================================================
 * AJUSTE V67 — Textos pequenos cinzas mais visíveis no modo escuro
 * Aplicado ao modo escuro por ser ajuste de tom/cor.
 * ============================================================ */
body:not(.theme-light) {
    --text-secondary: rgba(255,255,255,0.76);
    --text-muted: rgba(255,255,255,0.50);
}

/* textos secundários */
body:not(.theme-light) .tab-empty-state p,
body:not(.theme-light) .kb-desc,
body:not(.theme-light) .td-desc,
body:not(.theme-light) .mtr-period-popover-head p,
body:not(.theme-light) .mtr-suggestion-text,
body:not(.theme-light) .prj-insight-item,
body:not(.theme-light) .plans-hero-sub,
body:not(.theme-light) .plans-toggle-label,
body:not(.theme-light) .plans-td,
body:not(.theme-light) .cal-legend-text,
body:not(.theme-light) .cal-empty-banner strong,
body:not(.theme-light) .chk-pix-hint,
body:not(.theme-light) .chk-features li,
body:not(.theme-light) .chk-total-label,
body:not(.theme-light) .success-message,
body:not(.theme-light) .auth-modal-sub,
body:not(.theme-light) .sup-hero-sub,
body:not(.theme-light) .tm-cl-new-input,
body:not(.theme-light) .tm-ma-empty,
body:not(.theme-light) .meta-input-hint,
body:not(.theme-light) .meta-connect-desc,
body:not(.theme-light) .meta-steps-list {
    color: rgba(255,255,255,0.60);
}

/* textos bem pequenos / auxiliares */
body:not(.theme-light) .kb-lane-sub,
body:not(.theme-light) .kb-main-sub,
body:not(.theme-light) .kb-avatar,
body:not(.theme-light) .kb-card-add-label,
body:not(.theme-light) .kb-card-add-icon .material-symbols-outlined,
body:not(.theme-light) .td-status-planejado,
body:not(.theme-light) .td-info-label,
body:not(.theme-light) .td-block-label,
body:not(.theme-light) .mtr-row span:first-child,
body:not(.theme-light) .meta-steps-title,
body:not(.theme-light) .fb-footer-label,
body:not(.theme-light) .cal-stat-label,
body:not(.theme-light) .cal-empty-hint,
body:not(.theme-light) .chk-total-label,
body:not(.theme-light) .chk-pix-hint strong,
body:not(.theme-light) .chk-trust-dot,
body:not(.theme-light) .mtr-period-chevron,
body:not(.theme-light) .pln-edit-week-btn,
body:not(.theme-light) .btn-cancel {
    color: rgba(255,255,255,0.56);
}

/* ============================================================
 * AJUSTE V68 — Textos pequenos cinzas ainda mais claros no modo escuro
 * Aplicado ao modo escuro por ser ajuste de tom/cor.
 * ============================================================ */
body:not(.theme-light) {
    --text-secondary: rgba(255,255,255,0.79);
    --text-muted: rgba(255,255,255,0.54);
}

/* textos secundários */
body:not(.theme-light) .tab-empty-state p,
body:not(.theme-light) .kb-desc,
body:not(.theme-light) .td-desc,
body:not(.theme-light) .mtr-period-popover-head p,
body:not(.theme-light) .mtr-suggestion-text,
body:not(.theme-light) .prj-insight-item,
body:not(.theme-light) .plans-hero-sub,
body:not(.theme-light) .plans-toggle-label,
body:not(.theme-light) .plans-td,
body:not(.theme-light) .cal-legend-text,
body:not(.theme-light) .cal-empty-banner strong,
body:not(.theme-light) .chk-pix-hint,
body:not(.theme-light) .chk-features li,
body:not(.theme-light) .chk-total-label,
body:not(.theme-light) .success-message,
body:not(.theme-light) .auth-modal-sub,
body:not(.theme-light) .sup-hero-sub,
body:not(.theme-light) .tm-cl-new-input,
body:not(.theme-light) .tm-ma-empty,
body:not(.theme-light) .meta-input-hint,
body:not(.theme-light) .meta-connect-desc,
body:not(.theme-light) .meta-steps-list {
    color: rgba(255,255,255,0.64);
}

/* textos bem pequenos / auxiliares */
body:not(.theme-light) .kb-lane-sub,
body:not(.theme-light) .kb-main-sub,
body:not(.theme-light) .kb-avatar,
body:not(.theme-light) .kb-card-add-label,
body:not(.theme-light) .kb-card-add-icon .material-symbols-outlined,
body:not(.theme-light) .td-status-planejado,
body:not(.theme-light) .td-info-label,
body:not(.theme-light) .td-block-label,
body:not(.theme-light) .mtr-row span:first-child,
body:not(.theme-light) .meta-steps-title,
body:not(.theme-light) .fb-footer-label,
body:not(.theme-light) .cal-stat-label,
body:not(.theme-light) .cal-empty-hint,
body:not(.theme-light) .chk-total-label,
body:not(.theme-light) .chk-pix-hint strong,
body:not(.theme-light) .chk-trust-dot,
body:not(.theme-light) .mtr-period-chevron,
body:not(.theme-light) .pln-edit-week-btn,
body:not(.theme-light) .btn-cancel {
    color: rgba(255,255,255,0.60);
}

/* ============================================================
 * AJUSTE V69 — Raias escuras mais visíveis sem parecerem claras
 * Ajuste visual aplicado ao modo escuro.
 * Mantém as tarefas um pouco mais claras que a coluna, mas com contraste mais elegante.
 * ============================================================ */
body:not(.theme-light) .kb-lane {
    background: linear-gradient(180deg, rgba(17,11,25,0.95) 0%, rgba(11,8,17,0.97) 100%);
    border-color: rgba(var(--accent-primary-rgb),0.24);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025),
        inset 0 0 0 1px rgba(255,255,255,0.012),
        0 0 30px rgba(var(--accent-strong-rgb),0.10),
        0 0 0 1px rgba(var(--accent-primary-rgb),0.05);
}

body:not(.theme-light) .kb-lane::after {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--lane-accent, var(--accent-primary)) 10%, transparent) 0%, transparent 24%),
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--lane-accent, var(--accent-primary)) 12%, transparent) 0%, transparent 42%),
        linear-gradient(135deg, rgba(255,255,255,0.022), transparent 58%);
    opacity: 1;
}

body:not(.theme-light) .kb-lane-header {
    border-bottom-color: rgba(255,255,255,0.08);
}

body:not(.theme-light) .kb-lane-icon {
    background: color-mix(in srgb, var(--lane-accent, var(--accent-primary)) 10%, rgba(255,255,255,0.02));
    border-color: color-mix(in srgb, var(--lane-accent, var(--accent-primary)) 24%, rgba(255,255,255,0.06));
}

body:not(.theme-light) .kb-card {
    background: linear-gradient(180deg, rgba(28,21,40,0.97) 0%, rgba(21,16,31,0.97) 100%);
    border-color: rgba(var(--accent-primary-rgb),0.20);
    box-shadow: 0 0 20px rgba(var(--accent-strong-rgb),0.08);
}

body:not(.theme-light) .kb-card:hover {
    border-color: rgba(var(--accent-primary-rgb),0.34);
    box-shadow: 0 12px 28px -12px rgba(var(--accent-primary-rgb),0.16);
}

/* ============================================================
 * AJUSTE V70 — Raias menos coloridas e tarefas mais claras
 * Ajuste visual aplicado ao modo escuro.
 * ============================================================ */
body:not(.theme-light) .kb-lane {
    background: linear-gradient(180deg, rgba(14,10,20,0.96) 0%, rgba(10,8,15,0.98) 100%);
    border-color: rgba(var(--accent-primary-rgb),0.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.02),
        inset 0 0 0 1px rgba(255,255,255,0.01),
        0 0 22px rgba(var(--accent-strong-rgb),0.07),
        0 0 0 1px rgba(var(--accent-primary-rgb),0.035);
}

body:not(.theme-light) .kb-lane::after {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--lane-accent, var(--accent-primary)) 5%, transparent) 0%, transparent 20%),
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--lane-accent, var(--accent-primary)) 7%, transparent) 0%, transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.015), transparent 58%);
    opacity: 0.92;
}

body:not(.theme-light) .kb-lane-icon {
    background: color-mix(in srgb, var(--lane-accent, var(--accent-primary)) 6%, rgba(255,255,255,0.018));
    border-color: color-mix(in srgb, var(--lane-accent, var(--accent-primary)) 16%, rgba(255,255,255,0.05));
}

body:not(.theme-light) .kb-card {
    background: linear-gradient(180deg, rgba(35,27,49,0.98) 0%, rgba(27,21,39,0.98) 100%);
    border-color: rgba(var(--accent-primary-rgb),0.18);
    box-shadow: 0 0 18px rgba(var(--accent-strong-rgb),0.06);
}

body:not(.theme-light) .kb-card:hover {
    border-color: rgba(var(--accent-primary-rgb),0.30);
    box-shadow: 0 12px 24px -12px rgba(var(--accent-primary-rgb),0.14);
}

/* ============================================================
 * MODAL: Remover coluna/raia — 3 opções
 * ============================================================ */
.ldc-box {
    background: #1e1828;
    border: 1px solid rgba(var(--accent-primary-rgb),0.22);
    border-radius: 18px;
    padding: 28px 28px 24px;
    width: 420px;
    max-width: 92vw;
    box-shadow: 0 28px 72px rgba(0,0,0,0.80), 0 0 0 1px rgba(var(--accent-primary-rgb),0.06);
    transform: translateY(22px) scale(0.96);
    transition: transform 0.25s cubic-bezier(.22,.68,0,1.2);
}
.ic-login-modal.open .ldc-box {
    transform: translateY(0) scale(1);
}

/* Header */
.ldc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.ldc-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(var(--accent-primary-rgb),0.15);
    border: 1px solid rgba(var(--accent-primary-rgb),0.30);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ldc-icon .material-symbols-outlined {
    font-size: 22px;
    color: var(--accent-primary);
}
.ldc-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 3px;
    line-height: 1.2;
}
.ldc-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin: 0;
}
.ldc-sub strong {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Description */
.ldc-desc {
    font-size: 13.5px;
    color: rgba(255,255,255,0.75);
    line-height: 1.55;
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
}
.ldc-desc strong {
    color: #ffffff;
    font-weight: 700;
}

/* Option buttons */
.ldc-options {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 14px;
}
.ldc-opt {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: all 0.18s;
    font-family: 'Space Grotesk', sans-serif;
}
.ldc-opt-icon {
    flex-shrink: 0;
    font-size: 20px;
    margin-top: 1px;
}
.ldc-opt-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ldc-opt-label {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.ldc-opt-hint {
    font-size: 12.5px;
    line-height: 1.5;
}
.ldc-opt-hint em {
    font-style: normal;
    font-weight: 700;
}

/* Move option */
.ldc-opt--move {
    background: rgba(var(--accent-primary-rgb),0.12);
    border-color: rgba(var(--accent-primary-rgb),0.28);
}
.ldc-opt--move .ldc-opt-icon { color: var(--accent-primary); }
.ldc-opt--move .ldc-opt-label { color: var(--accent-primary); }
.ldc-opt--move .ldc-opt-hint { color: rgba(var(--accent-primary-rgb),0.82); }
.ldc-opt--move .ldc-opt-hint em { color: var(--accent-primary); }
.ldc-opt--move:hover {
    background: rgba(var(--accent-primary-rgb),0.20);
    border-color: rgba(var(--accent-primary-rgb),0.42);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--accent-strong-rgb),0.25);
}

/* Delete-all option */
.ldc-opt--delete {
    background: rgba(255,110,128,0.12);
    border-color: rgba(255,110,128,0.28);
}
.ldc-opt--delete .ldc-opt-icon { color: #ff7088; }
.ldc-opt--delete .ldc-opt-label { color: #ffbcc6; }
.ldc-opt--delete .ldc-opt-hint { color: rgba(255,160,175,0.82); }
.ldc-opt--delete:hover {
    background: rgba(255,110,128,0.20);
    border-color: rgba(255,110,128,0.42);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(200,30,60,0.20);
}

/* Cancel */
.ldc-cancel {
    width: 100%;
    padding: 11px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.58);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.18s;
}
.ldc-cancel:hover {
    background: rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.24);
}

/* ── Light mode ────────────────────────────────────── */
body.theme-light #laneDeleteConfirm.ic-login-modal {
    background: rgba(var(--accent-readable-rgb),0.35);
}
body.theme-light .ldc-box {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.20);
    box-shadow: 0 28px 80px rgba(48,12,70,0.25), 0 0 0 1px rgba(var(--accent-primary-rgb),0.10);
}
body.theme-light .ldc-icon {
    background: rgba(var(--accent-strong-rgb), 0.10);
    border-color: rgba(var(--accent-strong-rgb), 0.24);
}
body.theme-light .ldc-icon .material-symbols-outlined { color: var(--accent-strong); }
body.theme-light .ldc-title { color: var(--accent-readable-2); }
body.theme-light .ldc-sub { color: rgba(var(--accent-readable-rgb),0.55); }
body.theme-light .ldc-sub strong { color: var(--accent-strong); }
body.theme-light .ldc-desc { color: rgba(var(--accent-readable-rgb),0.72); border-bottom-color: rgba(var(--accent-readable-rgb),0.10); }
body.theme-light .ldc-desc strong { color: var(--accent-readable-2); }

body.theme-light .ldc-opt--move {
    background: rgba(var(--accent-strong-rgb), 0.08);
    border-color: rgba(var(--accent-strong-rgb), 0.22);
}
body.theme-light .ldc-opt--move .ldc-opt-icon { color: var(--accent-strong); }
body.theme-light .ldc-opt--move .ldc-opt-label { color: #4a0a68; }
body.theme-light .ldc-opt--move .ldc-opt-hint { color: rgba(80,15,115,0.72); }
body.theme-light .ldc-opt--move .ldc-opt-hint em { color: #7b1aaa; }
body.theme-light .ldc-opt--move:hover {
    background: rgba(var(--accent-strong-rgb), 0.14);
    border-color: rgba(var(--accent-strong-rgb), 0.34);
    box-shadow: 0 6px 20px rgba(var(--accent-strong-rgb),0.12);
}

body.theme-light .ldc-opt--delete {
    background: rgba(210,30,55,0.07);
    border-color: rgba(210,30,55,0.20);
}
body.theme-light .ldc-opt--delete .ldc-opt-icon { color: #b81c34; }
body.theme-light .ldc-opt--delete .ldc-opt-label { color: #8c1426; }
body.theme-light .ldc-opt--delete .ldc-opt-hint { color: rgba(160,20,40,0.68); }
body.theme-light .ldc-opt--delete:hover {
    background: rgba(210,30,55,0.13);
    border-color: rgba(210,30,55,0.32);
    box-shadow: 0 6px 20px rgba(170,20,40,0.12);
}

body.theme-light .ldc-cancel {
    border-color: rgba(var(--accent-readable-rgb),0.16);
    background: rgba(var(--accent-readable-rgb),0.03);
    color: rgba(var(--accent-readable-rgb),0.52);
}
body.theme-light .ldc-cancel:hover {
    background: #f0e8fa;
    color: rgba(var(--accent-readable-rgb),0.78);
    border-color: rgba(var(--accent-readable-rgb),0.22);
}

/* =============================================================
 * SISTEMA DE COBRANÇA — billing modal + card button
 * ============================================================= */

/* ── Botão Cobrar no card financeiro ────────────────────────── */
.ic-billing-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px 16px;
    margin-top: 14px;
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(var(--accent-secondary-rgb),0.30);
    transition: box-shadow 0.2s, transform 0.15s;
}
.ic-billing-btn:hover { box-shadow: 0 6px 26px rgba(var(--accent-secondary-rgb),0.50); transform: translateY(-1px); }
.ic-billing-btn .material-symbols-outlined { font-size: 17px; }

/* Auto badge no card */
.ic-billing-auto-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #4ade80;
    background: rgba(74,222,128,0.10);
    border: 1px solid rgba(74,222,128,0.22);
    border-radius: 20px;
    padding: 3px 10px;
    margin-top: 10px;
}
.ic-billing-auto-badge .material-symbols-outlined { font-size: 12px; font-variation-settings: 'FILL' 1; }
.ic-billing-auto-off { color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }

/* ── Modal box ───────────────────────────────────────────────── */
.billing-box {
    background: #1a1424;
    border: 1px solid rgba(var(--accent-primary-rgb),0.18);
    border-radius: 20px;
    padding: 28px;
    width: 460px;
    max-width: 94vw;
    box-shadow: 0 28px 72px rgba(0,0,0,0.75);
    transform: translateY(22px) scale(0.96);
    transition: transform 0.25s cubic-bezier(.22,.68,0,1.2);
}
.ic-login-modal.open .billing-box { transform: translateY(0) scale(1); }

.billing-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.billing-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(74,222,128,0.12);
    border: 1px solid rgba(74,222,128,0.24);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.billing-icon .material-symbols-outlined { font-size: 20px; color: #4ade80; font-variation-settings: 'FILL' 1; }
.billing-title { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 2px; }
.billing-sub { font-size: 12px; color: rgba(255,255,255,0.45); margin: 0; }
.billing-close {
    margin-left: auto; flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.45);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s;
}
.billing-close:hover { background: rgba(255,255,255,0.10); color: #fff; }
.billing-close .material-symbols-outlined { font-size: 16px; }

/* Summary strip */
.billing-summary {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.billing-summary-label { display: block; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 4px; }
.billing-summary-val { display: block; font-size: 12.5px; font-weight: 700; color: #fff; }

/* Message area */
.billing-msg-wrap { margin-bottom: 16px; }
.billing-msg-label { font-size: 9px; font-weight: 700; letter-spacing: 1.8px; color: rgba(255,255,255,0.35); margin-bottom: 8px; }
.billing-msg-area {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    padding: 12px 14px;
    color: rgba(255,255,255,0.85);
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12.5px; line-height: 1.6;
    resize: vertical; outline: none;
    transition: border-color 0.15s;
}
.billing-msg-area:focus { border-color: rgba(var(--accent-primary-rgb),0.38); }

/* Channel selector */
.billing-channel-label { font-size: 9px; font-weight: 700; letter-spacing: 1.8px; color: rgba(255,255,255,0.35); margin-bottom: 10px; }
.billing-channels { display: flex; gap: 10px; margin-bottom: 22px; }
.billing-ch {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 10px;
    border-radius: 10px; border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.45);
    font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.billing-ch .material-symbols-outlined { font-size: 16px; }
.billing-ch:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); }
.billing-ch--wa.active  { background: rgba(37,211,102,0.12); border-color: rgba(37,211,102,0.35); color: #25d366; }
.billing-ch--email.active { background: rgba(100,160,255,0.12); border-color: rgba(100,160,255,0.35); color: #64a0ff; }
.billing-ch--copy.active  { background: rgba(var(--accent-primary-rgb),0.12); border-color: rgba(var(--accent-primary-rgb),0.35); color: var(--accent-primary); }

/* Actions */
.billing-actions { display: flex; gap: 12px; }
.billing-cancel {
    padding: 11px 22px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.45);
    font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.billing-cancel:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.billing-send {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: 10px; border: none;
    background: linear-gradient(90deg, var(--brand-grad-start) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
    cursor: pointer; box-shadow: 0 4px 18px rgba(var(--accent-secondary-rgb),0.30); transition: all 0.2s;
}
.billing-send:hover { box-shadow: 0 6px 26px rgba(var(--accent-secondary-rgb),0.50); transform: translateY(-1px); }
.billing-send .material-symbols-outlined { font-size: 16px; }

/* Edit form extras */
.billing-edit-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.billing-edit-section .ic-field-label { margin-bottom: 10px; }
.billing-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 14px;
}
.billing-toggle-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.60); }
.billing-toggle {
    position: relative; width: 40px; height: 22px;
    background: rgba(255,255,255,0.12); border-radius: 11px;
    border: none; cursor: pointer; transition: background 0.2s; flex-shrink: 0;
}
.billing-toggle.on { background: #4ade80; }
.billing-toggle::after {
    content: ''; position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%; background: #fff;
    transition: transform 0.2s;
}
.billing-toggle.on::after { transform: translateX(18px); }

/* ── Light mode ───────────────────────────────────────────────── */
body.theme-light .billing-box {
    background: #ffffff;
    border-color: rgba(var(--accent-strong-rgb),0.14);
    box-shadow: 0 28px 80px rgba(48,12,70,0.20);
}
body.theme-light .billing-title { color: var(--accent-readable-2); }
body.theme-light .billing-sub { color: rgba(var(--accent-readable-rgb),0.48); }
body.theme-light .billing-close { border-color: rgba(var(--accent-readable-rgb),0.10); background: rgba(var(--accent-readable-rgb),0.03); color: rgba(var(--accent-readable-rgb),0.40); }
body.theme-light .billing-close:hover { background: rgba(var(--accent-readable-rgb),0.08); color: var(--accent-readable-2); }
body.theme-light .billing-summary { background: var(--accent-light-bg); border-color: rgba(var(--accent-readable-rgb),0.08); }
body.theme-light .billing-summary-label { color: rgba(var(--accent-readable-rgb),0.42); }
body.theme-light .billing-summary-val { color: var(--accent-readable-2); }
body.theme-light .billing-msg-label,
body.theme-light .billing-channel-label { color: rgba(var(--accent-readable-rgb),0.42); }
body.theme-light .billing-msg-area { background: var(--accent-light-bg); border-color: rgba(var(--accent-readable-rgb),0.10); color: rgba(var(--accent-readable-rgb),0.82); }
body.theme-light .billing-msg-area:focus { border-color: rgba(var(--accent-strong-rgb), 0.35); }
body.theme-light .billing-ch { background: var(--accent-light-bg); border-color: rgba(var(--accent-readable-rgb),0.10); color: rgba(var(--accent-readable-rgb),0.42); }
body.theme-light .billing-cancel { background: rgba(var(--accent-readable-rgb),0.03); border-color: rgba(var(--accent-readable-rgb),0.10); color: rgba(var(--accent-readable-rgb),0.50); }
body.theme-light .billing-cancel:hover { background: rgba(var(--accent-readable-rgb),0.07); color: rgba(var(--accent-readable-rgb),0.75); }
body.theme-light .ic-billing-auto-off { color: rgba(var(--accent-readable-rgb),0.35); background: rgba(var(--accent-readable-rgb),0.04); border-color: rgba(var(--accent-readable-rgb),0.10); }

/* =============================================================
 * V80 — Central de Informações: grid alinhado + edição contida
 * Mantém o ajuste em modo claro e escuro.
 * ============================================================= */
#tabInfo .ic-nebula {
    max-width: 1220px;
    margin: 0 auto;
    width: 100%;
}

#tabInfo .ic-header {
    width: 100%;
    max-width: 1220px;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 32px;
}

#tabInfo .ic-grid {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    overflow: visible;
}

#tabInfo .ic-page {
    width: 100%;
    max-width: 1220px;
    left: 0;
    right: 0;
    padding: 0 20px;
    gap: 24px 26px;
    align-items: stretch;
    box-sizing: border-box;
}

#tabInfo .ic-page > * {
    min-width: 0;
    box-sizing: border-box;
}

#tabInfo .ic-page:first-of-type > .ic-card:nth-child(1),
#tabInfo .ic-page:first-of-type > .ic-card:nth-child(2) {
    height: clamp(348px, 42.5vh, 390px);
}

#tabInfo .ic-page:first-of-type > .ic-card:nth-child(3),
#tabInfo .ic-page:first-of-type > .ic-card:nth-child(4) {
    height: clamp(252px, 30vh, 300px);
}

#tabInfo .ic-page:first-of-type > .ic-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

#tabInfo .ic-page:first-of-type > .ic-card.editing {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: none !important;
    overscroll-behavior: contain;
}

#tabInfo .ic-card.editing *,
#tabInfo .ic-card.editing *::before,
#tabInfo .ic-card.editing *::after {
    box-sizing: border-box;
    min-width: 0;
}

#tabInfo .ic-card.editing .ic-contact-grid,
#tabInfo .ic-card.editing .ic-fin-row,
#tabInfo .ic-card.editing .ic-contract-rows {
    width: 100%;
    max-width: 100%;
}

#tabInfo .ic-card.editing .ic-field-input,
#tabInfo .ic-card.editing .ic-field-select,
#tabInfo .ic-card.editing .ic-field-input-amount {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
}

#tabInfo .ic-card.editing .billing-edit-section {
    width: 100%;
    max-width: 100%;
}

#tabInfo .ic-card-header {
    flex-shrink: 0;
}

#tabInfo .ic-contact-grid,
#tabInfo .ic-fin-row {
    min-width: 0;
}

#tabInfo .ic-field-value,
#tabInfo .ic-field-input,
#tabInfo .ic-field-select {
    overflow-wrap: anywhere;
}

#tabInfo .ic-next-payment {
    margin-top: 22px;
    padding: 14px 18px;
}

#tabInfo .ic-allocation {
    margin-top: 24px;
    padding: 20px;
}

#tabInfo .ic-contract-rows {
    gap: 18px;
}

#tabInfo .ic-page:first-of-type .ic-pdf-btn {
    margin-top: auto;
    flex-shrink: 0;
}

#tabInfo .ic-inline-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: flex-end;
    flex-shrink: 0;
}

#tabInfo .ic-inline-cancel,
#tabInfo .ic-inline-save {
    padding: 9px 16px;
    border-radius: 9px;
    font-family: 'Argentum Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

#tabInfo .ic-inline-cancel {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    color: #ababab;
}

#tabInfo .ic-inline-save {
    background: linear-gradient(135deg,var(--accent-strong) 0%, var(--brand-grad-mid) 52%, var(--brand-grad-end) 100%);
    border: 1px solid rgba(255,255,255,0.04);
    color: #ffffff;
}

#tabInfo .ic-inline-cancel:hover,
#tabInfo .ic-inline-save:hover {
    transform: translateY(-1px);
}

body.theme-light #tabInfo .ic-inline-cancel {
    background: #ffffff !important;
    border-color: rgba(var(--accent-readable-rgb),0.14) !important;
    color: rgba(var(--accent-readable-rgb),0.64) !important;
}

body.theme-light #tabInfo .ic-inline-save {
    box-shadow: 0 6px 16px rgba(var(--accent-strong-rgb), 0.18) !important;
}

@media (max-height: 820px) {
    #tabInfo .ic-header { margin-bottom: 24px; }
    #tabInfo .ic-page { gap: 20px 24px; }
    #tabInfo .ic-page:first-of-type > .ic-card:nth-child(1),
    #tabInfo .ic-page:first-of-type > .ic-card:nth-child(2) {
        height: 340px;
    }
    #tabInfo .ic-page:first-of-type > .ic-card:nth-child(3),
    #tabInfo .ic-page:first-of-type > .ic-card:nth-child(4) {
        height: 248px;
    }
    #tabInfo .ic-dots { padding: 18px 0; }
}

@media (max-width: 980px) {
    #tabInfo .ic-page {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }
    #tabInfo .ic-span-8,
    #tabInfo .ic-span-4,
    #tabInfo .ic-span-6,
    #tabInfo .ic-span-12 {
        grid-column: 1 / -1;
    }
    #tabInfo .ic-page:first-of-type > .ic-card:nth-child(1),
    #tabInfo .ic-page:first-of-type > .ic-card:nth-child(2),
    #tabInfo .ic-page:first-of-type > .ic-card:nth-child(3),
    #tabInfo .ic-page:first-of-type > .ic-card:nth-child(4) {
        height: auto;
        min-height: 0;
    }
}

/* =============================================================
 * TEMA ESCURO — CENTRAL DE INFORMAÇÕES (CAMPOS VISÍVEIS COMO NO CLARO)
 * Mantém o mesmo desenho de "campo dentro do card" no modo escuro,
 * sem criar caixa dupla quando o card entra em edição.
 * ============================================================= */
body:not(.theme-light) #tabInfo .ic-card-header {
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(var(--accent-primary-rgb),0.12) !important;
}

body:not(.theme-light) #tabInfo .ic-contact-grid {
    gap: 10px 12px !important;
}

body:not(.theme-light) #tabInfo .ic-card:not(.editing) .ic-contact-grid > div,
body:not(.theme-light) #tabInfo .ic-card:not(.editing) .ic-fin-row > div {
    padding: 10px 12px !important;
    border: 1px solid rgba(var(--accent-primary-rgb),0.07) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.02) !important;
    box-shadow: none !important;
    min-width: 0 !important;
}

body:not(.theme-light) #tabInfo .ic-card:not(.editing) .ic-contact-grid > .ic-contact-full {
    grid-column: 1 / -1 !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(var(--accent-primary-rgb),0.07) !important;
}

body:not(.theme-light) #tabInfo .ic-fin-row {
    gap: 10px !important;
}

body:not(.theme-light) #tabInfo .ic-card:not(.editing) .ic-next-payment,
body:not(.theme-light) #tabInfo .ic-card:not(.editing) .ic-allocation,
body:not(.theme-light) #tabInfo .ic-card:not(.editing) .ic-obs-box,
body:not(.theme-light) #tabInfo .ic-card:not(.editing) .ic-access-item,
body:not(.theme-light) #tabInfo .ic-card:not(.editing) .ic-raio-section {
    background: rgba(255,255,255,0.02) !important;
    border-color: rgba(var(--accent-primary-rgb),0.07) !important;
    box-shadow: none !important;
}

body:not(.theme-light) #tabInfo .ic-card:not(.editing) .ic-next-payment {
    margin-top: 12px !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(var(--accent-primary-rgb),0.07) !important;
    border-left: 4px solid #ff6e80 !important;
    border-radius: 10px !important;
}

body:not(.theme-light) #tabInfo .ic-card:not(.editing) .ic-contract-rows {
    gap: 0 !important;
    border: 1px solid rgba(var(--accent-primary-rgb),0.07) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,0.015) !important;
}

body:not(.theme-light) #tabInfo .ic-card:not(.editing) .ic-contract-row {
    padding: 10px 12px !important;
    min-height: 50px !important;
    border-bottom: 1px solid rgba(var(--accent-primary-rgb),0.06) !important;
    background: transparent !important;
}

body:not(.theme-light) #tabInfo .ic-card:not(.editing) .ic-contract-row:last-child {
    border-bottom: none !important;
}

body:not(.theme-light) #tabInfo .ic-field-label,
body:not(.theme-light) #tabInfo .ic-allocation-label,
body:not(.theme-light) #tabInfo .ic-raio-label,
body:not(.theme-light) #tabInfo .ic-login-label,
body:not(.theme-light) #tabInfo .ic-obs-footer {
    color: rgba(255,255,255,0.76) !important;
    text-shadow: none !important;
}

body:not(.theme-light) #tabInfo .ic-field-value,
body:not(.theme-light) #tabInfo .ic-contract-row .ic-field-value,
body:not(.theme-light) #tabInfo .ic-raio-value,
body:not(.theme-light) #tabInfo .ic-obs-text,
body:not(.theme-light) #tabInfo .widget-file-name {
    color: rgba(255,255,255,0.96) !important;
    text-shadow: none !important;
}

body:not(.theme-light) #tabInfo .ic-field-link {
    color: #7daaff !important;
}

body:not(.theme-light) #tabInfo .ic-card.editing .ic-contact-grid,
body:not(.theme-light) #tabInfo .ic-card.editing .ic-fin-row {
    gap: 10px 12px !important;
}

body:not(.theme-light) #tabInfo .ic-card.editing .ic-contact-grid > div,
body:not(.theme-light) #tabInfo .ic-card.editing .ic-fin-row > div {
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: 0 !important;
}

body:not(.theme-light) #tabInfo .ic-card.editing .ic-contact-grid > .ic-contact-full {
    padding-top: 0 !important;
    border-top: none !important;
}

body:not(.theme-light) #tabInfo .ic-card.editing .ic-contract-rows {
    gap: 10px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

body:not(.theme-light) #tabInfo .ic-card.editing .ic-contract-rows > div,
body:not(.theme-light) #tabInfo .ic-card.editing .ic-contract-row {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    min-height: 0 !important;
}

body:not(.theme-light) #tabInfo .ic-card.editing .ic-field-input,
body:not(.theme-light) #tabInfo .ic-card.editing .ic-field-select,
body:not(.theme-light) #tabInfo .ic-card.editing .ic-field-input-amount {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    border-radius: 8px !important;
}

/* =============================================================
 * V82 — Central de Informações: correção do Raio X no modo escuro
 * O V81 deixou as seções do Raio X com um bloco escuro chapado.
 * Mantém os campos visíveis, mas remove o fundo indevido da seção.
 * ============================================================= */
body:not(.theme-light) #tabInfo .ic-card:not(.editing) .ic-raio-section {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body:not(.theme-light) #tabInfo .ic-raio-section-title {
    color: var(--accent-primary) !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(var(--accent-primary-rgb),0.18) !important;
    text-shadow: none !important;
}

body:not(.theme-light) #tabInfo .ic-raio-section-title .material-symbols-outlined {
    color: var(--accent-primary) !important;
    opacity: 0.9 !important;
}

body:not(.theme-light) #tabInfo .ic-raio-field {
    border-bottom: 1px solid rgba(var(--accent-primary-rgb),0.10) !important;
}

body:not(.theme-light) #tabInfo .ic-raio-pair .ic-raio-field,
body:not(.theme-light) #tabInfo .ic-raio-field:last-child {
    border-bottom: none !important;
}

body:not(.theme-light) #tabInfo .ic-raio-label {
    color: rgba(255,255,255,0.82) !important;
}

body:not(.theme-light) #tabInfo .ic-raio-value {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(var(--accent-primary-rgb),0.07) !important;
    color: rgba(255,255,255,0.95) !important;
    box-shadow: none !important;
}

body:not(.theme-light) #tabInfo .ic-raio-value::placeholder {
    color: rgba(255,255,255,0.50) !important;
    opacity: 1 !important;
}

body:not(.theme-light) #tabInfo .ic-raio-value:focus {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(var(--accent-primary-rgb),0.52) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb),0.10), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

body:not(.theme-light) #tabInfo .ic-raio-highlight-pink {
    color: #ff8b99 !important;
}

body:not(.theme-light) #tabInfo .ic-raio-highlight-pink::placeholder {
    color: rgba(255,139,153,0.62) !important;
    opacity: 1 !important;
}

body:not(.theme-light) #tabInfo .ic-raio-highlight-blue {
    color: #86b5ff !important;
}

body:not(.theme-light) #tabInfo .ic-raio-highlight-blue::placeholder {
    color: rgba(134,181,255,0.64) !important;
    opacity: 1 !important;
}


/* =============================================================
 * V83 — Central de Informações: Contrato sem sobreposição
 * Compacta somente o card de contrato para caberem as 4 linhas + PDF
 * sem invadir o botão, em modo claro e escuro.
 * ============================================================= */
#tabInfo .ic-page:first-of-type > .ic-contract-card {
    height: clamp(292px, 32vh, 318px) !important;
    padding: 20px 24px 18px !important;
}

#tabInfo .ic-page:first-of-type > .ic-contract-card .ic-card-header {
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
}

#tabInfo .ic-page:first-of-type > .ic-contract-card:not(.editing) .ic-contract-rows {
    gap: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
}

#tabInfo .ic-page:first-of-type > .ic-contract-card:not(.editing) .ic-contract-row {
    min-height: 36px !important;
    padding: 7px 12px !important;
}

#tabInfo .ic-page:first-of-type > .ic-contract-card:not(.editing) .ic-contract-row .ic-field-label {
    margin: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    letter-spacing: 1.7px !important;
}

#tabInfo .ic-page:first-of-type > .ic-contract-card:not(.editing) .ic-contract-row .ic-field-value {
    margin: 0 !important;
    max-width: 58% !important;
    text-align: right !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
}

#tabInfo .ic-page:first-of-type > .ic-contract-card .ic-contract-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 10px !important;
    flex-shrink: 0 !important;
}

#tabInfo .ic-page:first-of-type > .ic-contract-card .ic-contract-actions .ic-pdf-btn {
    margin-top: 0 !important;
    min-height: 42px !important;
    padding: 10px 14px !important;
}

#tabInfo .ic-page:first-of-type > .ic-contract-card.editing .ic-contract-rows {
    gap: 9px !important;
}

#tabInfo .ic-page:first-of-type > .ic-contract-card.editing .ic-inline-actions {
    margin-top: 12px !important;
}

/* =============================================================
 * V84 — Central de Informações: scroll vertical livre fora dos cards
 * A rolagem da aba volta para o container principal; só cards em edição
 * mantêm scroll interno próprio.
 * ============================================================= */
.client-page-content:has(#tabInfo.active) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: auto !important;
}

#tabInfo .ic-grid,
#tabInfo .ic-card:not(.editing) {
    overscroll-behavior: auto !important;
}

#tabInfo .ic-grid {
    touch-action: pan-y !important;
}

/* =============================================================
 * V85 — Central de Informações: paginação horizontal robusta
 * Permite trocar as páginas do grid com gesto horizontal mesmo
 * fora dos cards, sem capturar a rolagem vertical da página.
 * ============================================================= */
#tabInfo,
#tabInfo .ic-nebula,
#tabInfo .ic-grid {
    touch-action: pan-y !important;
}

#tabInfo .ic-card.editing,
#tabInfo .ic-card.editing * {
    touch-action: auto !important;
}


/* =============================================================
 * PATCH v88 — Cor principal dinâmica global
 * Conecta Configurações > Aparência aos tokens visuais da plataforma.
 * ============================================================= */
body {
    accent-color: var(--accent-primary);
}

.header-container,
.btn-gradient,
.acc-save-btn,
.acc-plan-btn,
.cfg-toggle.active,
.fb-toggle.active,
.tm-btn-launch,
.tm-modal-save,
.ic-btn-primary,
.ic-login-add,
.kb-create-btn,
.kb-add-task-btn,
.pln-btn-primary,
.cal-add-btn,
.cal-today-btn,
.mtr-btn-primary,
.plans-btn-primary,
.chk-pay-btn,
.reg-submit-btn,
.login-submit {
    --_accent-gradient: var(--accent-gradient);
}

.acc-title-accent,
.plans-title-accent,
.mtr-title-accent,
.prj-title-accent,
.cal-title-accent,
.fb-title-accent,
.sup-hero-title .plans-title-accent,
.ic-header-title-accent,
.pln-title-accent,
.client-name-accent {
    background: linear-gradient(90deg, var(--title-grad-start) 0%, var(--title-grad-mid) 45%, var(--title-grad-end) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.acc-icon-gradient,
.cfg-auto-icon,
.cfg-team-avatar,
.cfg-role-admin,
.fb-star.active .material-symbols-outlined,
.fb-toggle.active,
.cfg-toggle.active,
.cfg-theme-btn.active,
.kb-card::before,
.kb-task-card::before,
.ic-card::before {
    border-color: var(--accent-border) !important;
}

.cfg-toggle.active,
.fb-toggle.active,
.acc-save-btn,
.acc-plan-btn,
.cfg-connect-btn:hover,
.cal-add-btn,
.tm-btn-launch,
.tm-modal-save,
.ic-login-add,
.kb-create-btn,
.kb-add-task-btn,
.pln-btn-primary,
.mtr-btn-primary,
.plans-btn-primary,
.chk-pay-btn,
.reg-submit-btn,
.login-submit {
    background: var(--accent-gradient) !important;
    box-shadow: 0 12px 28px var(--accent-glow) !important;
}

.acc-card-header > .material-symbols-outlined:not([style*="#4ade80"]):not([style*="#25d366"]):not([style*="#4285f4"]):not([style*="#1877f2"]):not([style*="#e1306c"]),
.cfg-auto-icon .material-symbols-outlined,
.cfg-theme-btn.active,
.cfg-connect-btn,
.sup-agent-avatar .material-symbols-outlined,
.sup-msg-avatar .material-symbols-outlined,
.auri-row-user .auri-user-icon,
.ic-header-title-accent,
.kb-lane-icon,
.kb-fh-icon-wrap .material-symbols-outlined,
.cal-stat-icon,
.fb-icon-pink,
.plans-feature-on .material-symbols-outlined {
    color: var(--accent-primary) !important;
}

.acc-card,
.cfg-theme-bar,
.cfg-auto-hint,
.sup-card,
.sup-chat-card,
.ic-card,
.kb-lane,
.kb-task-card,
.fb-card,
.cal-stat-card,
.mtr-card,
.prj-card,
.pln-card,
.plans-card {
    border-color: var(--accent-border) !important;
}

.cfg-accent-dot {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.12);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cfg-accent-dot:hover { transform: translateY(-1px) scale(1.04); }
.cfg-accent-dot.active {
    border-color: #fff !important;
    box-shadow: 0 0 0 3px var(--accent-border), 0 0 24px var(--accent-glow-strong) !important;
}
.cfg-accent-dot.active::after {
    content: 'check';
    font-family: 'Material Symbols Outlined';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 18px;
    font-variation-settings: 'FILL' 1;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.cfg-accent-caption {
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.45;
}

body.theme-light .cfg-accent-dot {
    border-color: rgba(var(--accent-readable-rgb),0.14);
}
body.theme-light .cfg-accent-dot.active {
    border-color: #fff !important;
    box-shadow: 0 0 0 3px var(--accent-border), 0 10px 24px rgba(var(--accent-strong-rgb),0.16) !important;
}
body.theme-light .cfg-theme-btn.active {
    color: var(--accent-strong) !important;
    box-shadow: 0 2px 8px rgba(var(--accent-strong-rgb),0.12) !important;
}
body.theme-light .cfg-select {
    background-image: none !important;
}
body.theme-light .fb-star.active .material-symbols-outlined {
    color: var(--accent-secondary) !important;
    filter: drop-shadow(0 0 8px rgba(var(--accent-secondary-rgb),0.40)) !important;
}


/* =============================================================
 * COR PRINCIPAL SEGURA — V90
 * Mantém o roxo padrão igual ao layout original. As regras abaixo
 * só refinam cores alternativas e reduzem saturação no tema claro.
 * ============================================================= */
body[data-accent-color="blue"],
body[data-accent-color="green"],
body[data-accent-color="orange"],
body[data-accent-color="red"],
body[data-accent-color="mono"] {
    --accent-soft: rgba(var(--accent-primary-rgb),0.095);
    --accent-soft-2: rgba(var(--accent-secondary-rgb),0.075);
    --accent-border: rgba(var(--accent-primary-rgb),0.18);
    --accent-border-strong: rgba(var(--accent-primary-rgb),0.30);
    --accent-glow: rgba(var(--accent-primary-rgb),0.18);
    --accent-glow-strong: rgba(var(--accent-secondary-rgb),0.22);
    --accent-planet-glow: rgba(var(--accent-primary-rgb),0.22);
}

body.theme-light[data-accent-color="blue"],
body.theme-light[data-accent-color="green"],
body.theme-light[data-accent-color="orange"],
body.theme-light[data-accent-color="red"],
body.theme-light[data-accent-color="mono"] {
    --border-main: rgba(var(--accent-strong-rgb),0.16);
    --border-strong: rgba(var(--accent-strong-rgb),0.26);
    --shadow-brand: rgba(var(--accent-strong-rgb),0.055);
    --shadow-brand-glow: rgba(var(--accent-strong-rgb),0.085);
}

body.theme-light[data-accent-color="blue"] .client-card,
body.theme-light[data-accent-color="green"] .client-card,
body.theme-light[data-accent-color="orange"] .client-card,
body.theme-light[data-accent-color="red"] .client-card,
body.theme-light[data-accent-color="mono"] .client-card,
body.theme-light[data-accent-color="blue"] .acc-card,
body.theme-light[data-accent-color="green"] .acc-card,
body.theme-light[data-accent-color="orange"] .acc-card,
body.theme-light[data-accent-color="red"] .acc-card,
body.theme-light[data-accent-color="mono"] .acc-card,
body.theme-light[data-accent-color="blue"] .ic-card,
body.theme-light[data-accent-color="green"] .ic-card,
body.theme-light[data-accent-color="orange"] .ic-card,
body.theme-light[data-accent-color="red"] .ic-card,
body.theme-light[data-accent-color="mono"] .ic-card {
    box-shadow: 0 4px 18px rgba(var(--accent-readable-rgb),0.07), 0 1px 3px rgba(var(--accent-readable-rgb),0.05);
}

body.theme-light[data-accent-color="blue"] .card-header,
body.theme-light[data-accent-color="green"] .card-header,
body.theme-light[data-accent-color="orange"] .card-header,
body.theme-light[data-accent-color="red"] .card-header,
body.theme-light[data-accent-color="mono"] .card-header {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.76) 1px, transparent 1px),
        radial-gradient(circle at 75% 15%, rgba(255,255,255,0.52) 1.5px, transparent 1.5px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.64) 1px, transparent 1px),
        radial-gradient(circle at 80% 60%, rgba(var(--accent-primary-rgb),0.11) 40px, transparent 68px),
        radial-gradient(ellipse at 50% 50%, var(--accent-light-card-radial-1) 0%, var(--accent-light-card-radial-2) 100%);
}

body[data-accent-color="blue"] .card-page.in-view .client-card:hover,
body[data-accent-color="green"] .card-page.in-view .client-card:hover,
body[data-accent-color="orange"] .card-page.in-view .client-card:hover,
body[data-accent-color="red"] .card-page.in-view .client-card:hover,
body[data-accent-color="mono"] .card-page.in-view .client-card:hover {
    filter:
        drop-shadow(0 0 5px rgba(var(--accent-secondary-rgb), 0.26))
        drop-shadow(0 0 14px rgba(var(--accent-primary-rgb), 0.12));
}

body.theme-light[data-accent-color="blue"] #planetCanvas,
body.theme-light[data-accent-color="green"] #planetCanvas,
body.theme-light[data-accent-color="orange"] #planetCanvas,
body.theme-light[data-accent-color="red"] #planetCanvas,
body.theme-light[data-accent-color="mono"] #planetCanvas {
    filter: drop-shadow(0px -10px 42px rgba(var(--accent-primary-rgb),0.10));
}


/* =============================================================
 * V91 — COR PRINCIPAL TOTAL: remove sobras roxas da identidade
 * ============================================================= */
body:not([data-accent-color="purple"]) .ic-tag-purple,
body:not([data-accent-color="purple"]) .fb-avatar-purple {
    background: rgba(var(--accent-primary-rgb), 0.10) !important;
    border-color: rgba(var(--accent-primary-rgb), 0.28) !important;
    color: var(--accent-primary) !important;
}

body:not([data-accent-color="purple"]) .mtr-icon-pink,
body:not([data-accent-color="purple"]) .fb-icon-pink,
body:not([data-accent-color="purple"]) .prj-badge-down,
body:not([data-accent-color="purple"]) .plans-feature-cosmic .material-symbols-outlined,
body:not([data-accent-color="purple"]) .mtr-period .material-symbols-outlined {
    color: var(--accent-secondary) !important;
}

body:not([data-accent-color="purple"]) .fb-badge-pink {
    background: rgba(var(--accent-secondary-rgb), 0.12) !important;
    color: var(--accent-secondary) !important;
}

body:not([data-accent-color="purple"]).theme-light .sup-chat-header,
body:not([data-accent-color="purple"]).theme-light .auri-header,
body:not([data-accent-color="purple"]).theme-light .mtr-period-popover,
body:not([data-accent-color="purple"]).theme-light .kb-card,
body:not([data-accent-color="purple"]).theme-light .sup-quick-btn {
    background: linear-gradient(135deg, var(--accent-light-bg), var(--accent-light-bg-2)) !important;
}

body:not([data-accent-color="purple"]).theme-light .login-card,
body:not([data-accent-color="purple"]).theme-light .client-card,
body:not([data-accent-color="purple"]).theme-light .ic-card,
body:not([data-accent-color="purple"]).theme-light .mtr-chart-card {
    background-color: rgba(255,255,255,0.94) !important;
    border-color: rgba(var(--accent-primary-rgb), 0.20) !important;
}

body:not([data-accent-color="purple"]).theme-light .client-bar,
body:not([data-accent-color="purple"]).theme-light .client-bar-panel {
    background: rgba(255,255,255,0.94) !important;
    border-color: rgba(var(--accent-primary-rgb), 0.18) !important;
}

/* sidebar fica branca no modo claro para todas as variações —
   apenas elementos de destaque (botão ativo, etc.) usam a cor de variação */



/* =============================================================
 * V92 — Correção fina de cor global
 * - textos neutros do modo claro voltam a ser neutros/pretos
 * - glows do menu lateral obedecem à cor principal
 * - planeta usa brilho da cor selecionada sem vazamento roxo
 * ============================================================= */
body.theme-light {
    --text-color: #17131f;
    --text-primary: #17131f;
    --text-secondary: rgba(23,19,31,0.68);
    --text-muted: rgba(23,19,31,0.44);
    --card-text: #17131f;
}
body.theme-light .header-container h1,
body.theme-light .card-footer-name,
body.theme-light .acc-title,
body.theme-light .acc-card-header h3,
body.theme-light .acc-plan-price,
body.theme-light .acc-session-name,
body.theme-light .cfg-team-name,
body.theme-light .ic-card-title,
body.theme-light .kb-card-title,
body.theme-light .mtr-card-title,
body.theme-light .prj-title,
body.theme-light .sup-card-title,
body.theme-light .cal-title,
body.theme-light .chk-title,
body.theme-light .plans-title {
    color: var(--text-primary) !important;
}
body.theme-light .sidebar-user-name,
body.theme-light .sidebar-btn:not(.active) {
    color: rgba(23,19,31,0.78) !important;
}
.sidebar-avatar,
.sidebar-btn.active,
.sidebar-plan-tag {
    box-shadow: 0 8px 26px rgba(var(--accent-secondary-rgb),0.22), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.sidebar-btn {
    border-color: rgba(var(--accent-primary-rgb),0.10);
}
.sidebar-btn:hover {
    border-color: rgba(var(--accent-primary-rgb),0.22);
}
.sidebar-badge {
    color: var(--accent-primary);
}
#planetCanvas {
    filter: drop-shadow(0px -15px 80px var(--accent-planet-glow));
}
body.theme-light #planetCanvas {
    filter: drop-shadow(0px -8px 28px rgba(var(--accent-primary-rgb),0.07)) !important;
}

/* =============================================================
 * V93 — Correções pontuais do MODO ESCURO para cor principal
 * Escopo: remove roxo/glow rosa residual nos locais enviados em print.
 * Não altera o modo claro.
 * ============================================================= */
body:not(.theme-light):not([data-accent-color="purple"]) #planetCanvas {
    filter: drop-shadow(0px -15px 82px rgba(var(--accent-primary-rgb),0.28)) !important;
}

/* Planejamento: toolbar, banner, cards e tabela sem glow roxo fixo */
body:not(.theme-light):not([data-accent-color="purple"]) .pln-toolbar {
    background: rgba(8, 10, 18, 0.80) !important;
    border-color: rgba(var(--accent-primary-rgb),0.12) !important;
    box-shadow: 0 20px 48px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .pln-filter-btn.active,
body:not(.theme-light):not([data-accent-color="purple"]) .pln-note {
    background: var(--accent-gradient) !important;
    box-shadow: 0 10px 26px rgba(var(--accent-primary-rgb),0.22) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .pln-print-btn {
    color: var(--accent-primary) !important;
    border-color: rgba(var(--accent-primary-rgb),0.30) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .pln-overline,
body:not(.theme-light):not([data-accent-color="purple"]) .pln-week-label,
body:not(.theme-light):not([data-accent-color="purple"]) .pln-row-title {
    color: var(--accent-primary) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .pln-week-card {
    background: linear-gradient(180deg, rgba(12, 13, 20, 0.96), rgba(8, 9, 15, 0.94)) !important;
    border-color: rgba(var(--accent-primary-rgb),0.10) !important;
    box-shadow: 0 24px 55px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .pln-week-card::before {
    background: radial-gradient(circle at top right, rgba(var(--accent-primary-rgb),0.085), transparent 34%),
                radial-gradient(circle at bottom left, rgba(var(--accent-primary-rgb),0.055), transparent 38%) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .pln-table thead th {
    color: rgba(255,255,255,0.42) !important;
    border-bottom-color: rgba(var(--accent-primary-rgb),0.14) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .pln-badge[data-type="Vídeo"],
body:not(.theme-light):not([data-accent-color="purple"]) .pln-badge[data-type="Bastidores"] {
    color: var(--accent-primary) !important;
    background: rgba(var(--accent-primary-rgb),0.10) !important;
    border-color: rgba(var(--accent-primary-rgb),0.22) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .pln-badge[data-type="Vídeo"] .pln-badge-dot,
body:not(.theme-light):not([data-accent-color="purple"]) .pln-badge[data-type="Bastidores"] .pln-badge-dot {
    background: var(--accent-primary) !important;
}

/* Barra de progresso do quadro: remove o fim rosa fixo */
body:not(.theme-light):not([data-accent-color="purple"]) .kb-deploy-fill {
    background: linear-gradient(90deg, var(--accent-strong), var(--accent-primary)) !important;
    box-shadow: 0 0 14px rgba(var(--accent-primary-rgb),0.35) !important;
}

/* Meu Plano: card Cosmic e glows que ainda usavam rosa/magenta fixo */
body:not(.theme-light):not([data-accent-color="purple"]) .plans-glow-blue {
    background: radial-gradient(circle, rgba(var(--accent-primary-rgb),0.11) 0%, transparent 65%) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .plans-card-badge-pink,
body:not(.theme-light):not([data-accent-color="purple"]) .plans-btn-cosmic {
    background: var(--accent-gradient) !important;
    box-shadow: 0 0 20px rgba(var(--accent-primary-rgb),0.28) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .plans-card-cosmic {
    border-color: rgba(var(--accent-primary-rgb),0.24) !important;
    background: rgba(var(--accent-primary-rgb),0.035) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .plans-card-cosmic:hover {
    border-color: rgba(var(--accent-primary-rgb),0.50) !important;
    box-shadow: 0 0 50px rgba(var(--accent-primary-rgb),0.18) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .plans-feature-cosmic .material-symbols-outlined,
body:not(.theme-light):not([data-accent-color="purple"]) .plans-price-pink,
body:not(.theme-light):not([data-accent-color="purple"]) .plans-price-pink-solid {
    color: var(--accent-primary) !important;
}

/* Métricas: barras e legenda sem magenta fixo */
body:not(.theme-light):not([data-accent-color="purple"]) .mtr-bar {
    background: linear-gradient(to top,
        rgba(var(--accent-primary-rgb),0.28) 0%,
        rgba(var(--accent-primary-rgb),0.66) 48%,
        rgba(var(--accent-primary-rgb),0.92) 100%) !important;
    box-shadow: 0 0 18px rgba(var(--accent-primary-rgb),0.30) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .mtr-bar-value {
    text-shadow: 0 0 10px rgba(var(--accent-primary-rgb),0.18) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .mtr-legend-leads .mtr-legend-icon {
    color: var(--accent-primary) !important;
    text-shadow: 0 0 10px rgba(var(--accent-primary-rgb),0.34) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .mtr-chart-card::after {
    background: linear-gradient(to left, rgba(var(--accent-primary-rgb),0.045), transparent) !important;
}

/* Menu lateral: reforço final contra sombra magenta residual */
body:not(.theme-light):not([data-accent-color="purple"]) .sidebar,
body:not(.theme-light):not([data-accent-color="purple"]) .sidebar-avatar,
body:not(.theme-light):not([data-accent-color="purple"]) .sidebar-btn.active,
body:not(.theme-light):not([data-accent-color="purple"]) .sidebar-plan-tag {
    box-shadow: 0 8px 26px rgba(var(--accent-primary-rgb),0.20), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
body:not(.theme-light):not([data-accent-color="purple"]) .sidebar::before {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.07), rgba(var(--accent-primary-rgb),0.035), transparent 60%) !important;
}


/* ══════════════════════════════════════════════════
   LOGIN TRANSITION OVERLAY
   ══════════════════════════════════════════════════ */
#loginTransitionOverlay {
    position: fixed; inset: 0; z-index: 99999;
    background: radial-gradient(ellipse at 50% 60%, #130820 0%, #08040f 100%);
    display: flex;
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0;
}
#loginTransitionOverlay.lto-visible {
    display: flex;
    animation: ltoIn 0.35s ease both;
}
#loginTransitionOverlay.lto-fadeout {
    display: flex;
    animation: ltoOut 0.65s ease both;
}
@keyframes ltoIn  { from { opacity:0 } to { opacity:1 } }
@keyframes ltoOut { from { opacity:1 } to { opacity:0 } }

/* Stars */
.lto-stars {
    position: absolute; inset: 0; overflow: hidden;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-size: 180px 180px, 320px 320px, 480px 480px;
    background-position: 10px 20px, 70px 90px, 140px 210px;
    opacity: 0.5;
}

/* Content */
.lto-content {
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    align-items: center;
    text-align: center; padding: 0 32px;
    animation: ltoFadeUp 0.5s ease both;
    width: 100%; max-width: 560px;
}
@keyframes ltoFadeUp {
    from { opacity:0; transform: translateY(20px) }
    to   { opacity:1; transform: translateY(0) }
}

/* Auri */
.lto-auri {
    position: relative;
    width: 100px; height: 100px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
}
.lto-auri-img {
    width: 88px; height: 88px; object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(188,28,237,0.5))
            drop-shadow(0 0 40px rgba(188,28,237,0.2));
    animation: ltoFloat 2.8s ease-in-out infinite;
}
@keyframes ltoFloat {
    0%, 100% { transform: translateY(0) }
    50%       { transform: translateY(-7px) }
}
.lto-auri-ring {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 80px; height: 16px; border-radius: 50%;
    border: 1.5px solid rgba(188,28,237,0.4);
    box-shadow: 0 0 12px rgba(188,28,237,0.25), inset 0 0 8px rgba(188,28,237,0.1);
    animation: ltoRingPulse 2.8s ease-in-out infinite;
}
@keyframes ltoRingPulse {
    0%, 100% { opacity:0.5; transform: translateX(-50%) scaleX(1) }
    50%       { opacity:1;   transform: translateX(-50%) scaleX(1.08) }
}

/* Eyebrow */
.lto-eyebrow {
    font-size: 9px; letter-spacing: 0.22em;
    color: rgba(222,28,123,0.7);
    text-transform: uppercase; margin: 0 0 10px;
    font-weight: 500;
}

/* Title */
.lto-title {
    font-size: clamp(28px, 4.5vw, 44px);
    font-weight: 800; color: #fff; margin: 0 0 8px;
    line-height: 1.15; letter-spacing: -0.02em;
}
.lto-accent {
    background: linear-gradient(90deg, #c040ff 0%, #ff2d78 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Sub */
.lto-sub {
    font-size: 14px; color: rgba(255,255,255,0.38);
    margin: 0 0 32px; letter-spacing: 0.01em;
}

/* Bar container */
.lto-bar-area {
    width: 100%; display: flex; flex-direction: column; gap: 8px;
}
.lto-bar-row {
    display: flex; align-items: center; justify-content: space-between;
}
.lto-bar-label {
    font-size: 11px; color: rgba(255,255,255,0.35);
    letter-spacing: 0.08em; text-transform: uppercase;
}
.lto-bar-pct {
    font-size: 13px; font-weight: 700;
    color: rgba(255,255,255,0.75);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    min-width: 40px; text-align: right;
}
.lto-bar-wrap {
    width: 100%; height: 6px; border-radius: 99px;
    background: rgba(255,255,255,0.07);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
    overflow: hidden; position: relative;
}
.lto-bar-fill {
    height: 100%; width: 0%; border-radius: 99px;
    background: linear-gradient(90deg, #8a1a9c 0%, #c040ff 50%, #ff2d78 100%);
    box-shadow: 0 0 14px rgba(192,64,255,0.6), 0 0 28px rgba(255,45,120,0.3);
    transition: width 0.12s linear;
}
/* brilho animado que corre pela barra */
.lto-bar-fill::after {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 40px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    animation: ltoShimmer 1.4s ease-in-out infinite;
}
@keyframes ltoShimmer {
    0%   { opacity:0; transform: translateX(-20px) }
    50%  { opacity:1 }
    100% { opacity:0; transform: translateX(20px) }
}

/* Steps abaixo da barra */
.lto-steps {
    display: flex; gap: 20px; margin-top: 16px;
    align-items: center; justify-content: center;
}
.lto-step {
    font-size: 11px; color: rgba(255,255,255,0.22);
    letter-spacing: 0.06em;
    display: flex; align-items: center; gap: 5px;
    transition: color 0.3s ease;
}
.lto-step.done { color: rgba(192,64,255,0.75); }
.lto-step-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; opacity: 0.6;
}

/* Auri oculta no login */
body.planet-login #auri-widget { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   MODO CLARO — elementos que ficavam roxo/rosa fixo
   Aplica a todas as variações não-roxo no modo claro
   ══════════════════════════════════════════════════════════════ */

/* Plans: badge "IDEAL PARA AGÊNCIAS" e botão Cosmic */
body.theme-light:not([data-accent-color="purple"]) .plans-card-badge-pink,
body.theme-light:not([data-accent-color="purple"]) .plans-btn-cosmic {
    background: var(--accent-gradient) !important;
    box-shadow: 0 0 16px rgba(var(--accent-primary-rgb),0.22) !important;
}
body.theme-light:not([data-accent-color="purple"]) .plans-price-pink,
body.theme-light:not([data-accent-color="purple"]) .plans-price-pink-solid,
body.theme-light:not([data-accent-color="purple"]) .plans-feature-cosmic .material-symbols-outlined {
    color: var(--accent-primary) !important;
}
body.theme-light:not([data-accent-color="purple"]) .plans-card-cosmic {
    border-color: rgba(var(--accent-primary-rgb),0.22) !important;
}

/* Métricas: barras e linha do gráfico */
body.theme-light:not([data-accent-color="purple"]) .mtr-bar {
    background: linear-gradient(to top,
        rgba(var(--accent-primary-rgb),0.20) 0%,
        rgba(var(--accent-primary-rgb),0.55) 48%,
        rgba(var(--accent-primary-rgb),0.80) 100%) !important;
    box-shadow: 0 0 14px rgba(var(--accent-primary-rgb),0.22) !important;
}
body.theme-light:not([data-accent-color="purple"]) #mtrLineGrad stop:nth-child(1) { stop-color: var(--accent-strong) !important; }
body.theme-light:not([data-accent-color="purple"]) #mtrLineGrad stop:nth-child(2) { stop-color: var(--brand-grad-mid) !important; }
body.theme-light:not([data-accent-color="purple"]) #mtrLineGrad stop:nth-child(3) { stop-color: var(--accent-secondary) !important; }

/* Período selector "30d" */
body.theme-light:not([data-accent-color="purple"]) .mtr-period-btn-primary {
    background: var(--accent-gradient) !important;
    box-shadow: 0 0 14px rgba(var(--accent-primary-rgb),0.20) !important;
}

/* Botão Calcular Projeção */
body.theme-light:not([data-accent-color="purple"]) .prj-btn-calc {
    box-shadow: 0 8px 22px rgba(var(--accent-primary-rgb),0.18) !important;
}
body.theme-light:not([data-accent-color="purple"]) .prj-btn-calc:hover {
    box-shadow: 0 12px 28px rgba(var(--accent-primary-rgb),0.28) !important;
}

/* Suporte: texto pink fixo */
body.theme-light:not([data-accent-color="purple"]) .sup-title-pink {
    color: var(--accent-secondary) !important;
}
body.theme-light:not([data-accent-color="purple"]) .sup-title-purple {
    color: var(--accent-primary) !important;
}

/* ══════════════════════════════════════════════════════════
   MODO CLARO — contraste geral (todas as variações)
   Usa !important para ganhar da cascata existente
   ══════════════════════════════════════════════════════════ */

/* Raias do kanban — todas as variações */
body.theme-light .kb-lane {
    background: rgba(255,255,255,0.94) !important;
    border: 1.5px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.06) !important;
}

/* Em Andamento — fundo branco igual às outras, só borda roxa */
body.theme-light .kb-lane-andamento {
    background: rgba(255,255,255,0.94) !important;
    border: 1.5px solid rgba(192,82,255,0.40) !important;
    box-shadow: 0 2px 16px rgba(192,82,255,0.10), 0 0 0 1px rgba(192,82,255,0.18) !important;
}

/* Atrasado — borda vermelha mais forte */
body.theme-light .kb-lane-late {
    border: 1.5px solid rgba(220,38,38,0.35) !important;
    box-shadow: 0 2px 16px rgba(220,38,38,0.08), 0 0 0 1px rgba(220,38,38,0.14) !important;
}

/* Cards de clientes — todas as variações */
body.theme-light .client-card {
    box-shadow: 0 2px 14px rgba(0,0,0,0.09), 0 0 0 1.5px rgba(0,0,0,0.08) !important;
}
body.theme-light .acc-card,
body.theme-light .ic-card,
body.theme-light .mtr-card,
body.theme-light .prj-card,
body.theme-light .cal-stat-card,
body.theme-light .pln-card,
body.theme-light .fb-card,
body.theme-light .sup-card {
    border-color: rgba(0,0,0,0.10) !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.07) !important;
}

/* Cards de configuração */
body.theme-light .cfg-section,
body.theme-light .cfg-card {
    border-color: rgba(0,0,0,0.10) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* Mono: fundo levemente cinza para contrastar com cards brancos */
body.theme-light[data-accent-color="mono"] {
    --bg-color: #ebebeb !important;
    --accent-light-bg: #ebebeb !important;
}

/* Título das tarefas no cabeçalho colorido — sempre branco */
body.theme-light .kb-card-top .kb-card-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Botão Convidar Membro — gradiente com texto branco */
body.theme-light .acc-plan-btn {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
body.theme-light .acc-plan-btn .material-symbols-outlined,
body.theme-light .acc-plan-btn span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.theme-light .acc-plan-btn:hover {
    filter: brightness(1.08) !important;
    background: var(--accent-gradient) !important;
}

/* ══════════════════════════════════════════════════════════
   CADASTRO — fixes modo claro e autocomplete escuro
   ══════════════════════════════════════════════════════════ */

/* Fix autocomplete do browser sobrescrevendo fundo dos inputs no modo escuro */
.acc-input:-webkit-autofill,
.acc-input:-webkit-autofill:hover,
.acc-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1f1f1f inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
}
body.theme-light .acc-input:-webkit-autofill,
body.theme-light .acc-input:-webkit-autofill:hover,
body.theme-light .acc-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--accent-light-bg-2) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary);
}

/* Resumo final do cadastro — modo claro */
body.theme-light .reg-summary {
    background: var(--accent-light-bg) !important;
    border-color: rgba(var(--accent-strong-rgb),0.12) !important;
}
body.theme-light .reg-summary-row {
    border-color: rgba(var(--accent-readable-rgb),0.08) !important;
}
body.theme-light .reg-summary-row:nth-child(odd) {
    border-right-color: rgba(var(--accent-readable-rgb),0.08) !important;
}
body.theme-light .reg-summary-key {
    color: rgba(var(--accent-readable-rgb),0.45) !important;
}
body.theme-light .reg-summary-val {
    color: var(--text-primary) !important;
}
body.theme-light .reg-summary-divider {
    background: rgba(var(--accent-readable-rgb),0.08) !important;
}

/* Checkbox no cadastro — modo claro */
body.theme-light input[type="checkbox"] {
    accent-color: var(--accent-primary);
}

/* Inputs do formulário de cadastro — modo claro */
body.theme-light .reg-fields input,
body.theme-light .reg-fields select,
body.theme-light .reg-fields textarea {
    background: var(--accent-light-bg-2) !important;
    color: var(--text-primary) !important;
    border-color: rgba(var(--accent-strong-rgb),0.15) !important;
}
body.theme-light .reg-fields input:focus,
body.theme-light .reg-fields select:focus {
    background: var(--accent-light-bg-4) !important;
    border-color: var(--accent-primary) !important;
}
body.theme-light .reg-fields input::placeholder {
    color: rgba(var(--accent-readable-rgb),0.35) !important;
}

/* Planning empty state: keeps new clients clean without demo content */
.pln-week-title.is-empty {
    color: rgba(255,255,255,0.34);
    font-size: 24px;
    font-weight: 800;
}

.pln-empty-row td {
    padding: 28px !important;
    border-top: none !important;
}

.pln-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 120px;
    border: 1px dashed rgba(255,255,255,0.14);
    border-radius: 16px;
    background: rgba(255,255,255,0.025);
    color: rgba(255,255,255,0.54);
    text-align: center;
}

.pln-empty-state .material-symbols-outlined {
    font-size: 26px;
    color: rgba(var(--accent-primary-rgb),0.72);
}

.pln-empty-state strong {
    font-size: 14px;
    color: rgba(255,255,255,0.72);
}

.pln-empty-state small {
    max-width: 420px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255,255,255,0.42);
}

body.theme-light #tabPlanning .pln-week-title.is-empty,
body.theme-light .pln-week-title.is-empty {
    color: rgba(var(--accent-readable-rgb),0.38) !important;
}

body.theme-light #tabPlanning .pln-empty-state,
body.theme-light .pln-empty-state {
    border-color: rgba(var(--accent-readable-rgb),0.12) !important;
    background: rgba(var(--accent-strong-rgb),0.025) !important;
    color: rgba(var(--accent-readable-rgb),0.50) !important;
}

body.theme-light #tabPlanning .pln-empty-state strong,
body.theme-light .pln-empty-state strong {
    color: rgba(var(--accent-readable-rgb),0.64) !important;
}

body.theme-light #tabPlanning .pln-empty-state small,
body.theme-light .pln-empty-state small {
    color: rgba(var(--accent-readable-rgb),0.46) !important;
}

/* v163 — garante que o campo de senha dos acessos revele de verdade quando o usuário clicar em Mostrar */
#icLoginPass.access-password-visible,
#icLoginPass[type="text"] {
    -webkit-text-security: none !important;
    text-security: none !important;
}

/* v165 — fallback visual para revelar senha dos acessos mesmo se o input password não repintar no navegador */
.ic-password-preview {
    display: none;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-primary-rgb), .28);
    background: rgba(255,255,255,.08);
    color: rgba(var(--accent-readable-rgb), .92);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .02em;
    word-break: break-all;
}
body.theme-light .ic-password-preview {
    background: rgba(255,255,255,.72);
    color: rgba(var(--accent-readable-rgb), .94);
}