/* ============================================================================
   Tema "Trello Dark" da Lupalina — v2.1 (pós-auditoria)
   Alvo: Planka 2.1.1 (bundle index-B1c0sMwA.css — hashes de CSS-modules ESTÁVEIS
   só nesta versão; ao mudar a tag da imagem, revalidar hashes e regerar).
   Fonte dos valores: tokens dark reais do Trello (jul/2026), extraídos de página
   salva — ver docs/superpowers/plans/2026-07-09-planka-trello-theme.md.
   Servido por nginx (location /custom-lupalina.css) + sub_filter no </head>.

   REGRAS DE ESPECIFICIDADE (auditadas contra o bundle):
   - Módulos do Planka dentro do app são `#app ._classe` (1,1,0) → override SEMPRE
     com prefixo `#app`.
   - Conteúdo de POPUP: só _1i7p6 é sem prefixo #app no bundle (override plano
     empata e vence pela ordem). Os _menuItem_* SÃO #app-prefixados, mas quem
     briga é o semantic: base `.ui.menu .item` (0,3,0) e hover
     `.ui.secondary.menu a.item:hover` (0,5,1) → prefixos `body .ui.popup` na
     base e `body .ui.popup .menu ...` no hover.
   - Segurança: sem display:none em nada funcional; sem mexer em position/size
     de containers de drag.
   ========================================================================== */

:root {
  /* Trello dark tokens (--ds-*) renomeados --lp-* — valores de tokens-dark.md */
  --lp-surface: #1F1F21;            /* fundo base / modal */
  --lp-surface-raised: #242528;     /* cartão / input / bolha */
  --lp-surface-raised-hover: #2B2C2F;
  --lp-surface-overlay: #2B2C2F;    /* popups */
  --lp-list-bg: #101204;            /* --tr-background-list dark */
  --lp-text: #CECFD2;
  --lp-text-subtle: #A9ABAF;
  --lp-text-subtlest: #96999E;
  --lp-neutral: #CECED912;          /* botão neutro */
  --lp-neutral-hover: #E3E4F21F;
  --lp-neutral-pressed: #E5E9F640;
  --lp-border: #E3E4F21F;
  --lp-brand: #669DF1;              /* ação primária dark */
  --lp-brand-hover: #8FB8F6;
  --lp-shadow-raised: 0px 0px 0px 1px #00000000, 0px 1px 1px #01040480, 0px 0px 1px #01040480;
  --lp-shadow-overlay: 0px 0px 0px 1px #BDBDBD1F, 0px 8px 12px #0104045C, 0px 0px 1px 1px #01040480;
  --lp-radius-list: 12px;           /* --ds-radius-xlarge */
  --lp-radius-card: 8px;            /* --ds-radius-large */
  --lp-radius-btn: 6px;             /* --ds-radius-medium */
  --lp-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
  --lp-motion-btn: 85ms;            /* transições de botão do Trello */
}

/* ---- tipografia base (stack do Trello; Atlassian Sans é proprietária → fallbacks) */
body, #app { font-family: var(--lp-font); }

/* ============================== LISTA (coluna) — módulo _hsqrn ============ */
#app [class*="_outerWrapper_hsqrn"] {
  background: var(--lp-list-bg);
  border-radius: var(--lp-radius-list);
  box-shadow: var(--lp-shadow-raised);
  color: var(--lp-text-subtle);
}
#app [class*="_headerName_hsqrn"] {
  color: var(--lp-text);
  font-size: 14px;
  font-weight: 600;         /* semibold do Trello */
  line-height: 20px;
}
#app [class*="_headerButton_hsqrn"] { color: var(--lp-text-subtlest); fill: var(--lp-text-subtlest); }
#app [class*="_addCardButton_hsqrn"] {
  background: transparent;
  color: var(--lp-text-subtle);
  fill: var(--lp-text-subtle);
  border-radius: var(--lp-radius-card);
  margin: 0 4px 4px;        /* adaptação ao DOM do Planka (Trello: footer padding 4px 8px) */
  font-weight: 500;
  transition: background-color var(--lp-motion-btn) ease, color var(--lp-motion-btn) ease;
}
#app [class*="_addCardButton_hsqrn"]:hover {
  background: var(--lp-neutral-hover);
  color: var(--lp-text);
  fill: var(--lp-text);
}
/* scrollbar da coluna de cartões — Trello: 8px, thumb radius 4 (vence a fina 5px do Planka) */
#app [class*="_cardsInnerWrapper_hsqrn"]::-webkit-scrollbar,
#app [class*="_cardsOuterWrapper_hsqrn"]::-webkit-scrollbar { width: 8px; height: 8px; }
#app [class*="_cardsInnerWrapper_hsqrn"]::-webkit-scrollbar-track,
#app [class*="_cardsOuterWrapper_hsqrn"]::-webkit-scrollbar-track { background: var(--lp-neutral); border-radius: 4px; }
#app [class*="_cardsInnerWrapper_hsqrn"]::-webkit-scrollbar-thumb,
#app [class*="_cardsOuterWrapper_hsqrn"]::-webkit-scrollbar-thumb { background: var(--lp-neutral-hover); border-radius: 4px; min-height: 48px; }

/* botão "+ adicionar lista" — Trello: radius 12, branco 24% (#ffffff3d da spec) */
#app [class*="_addListButton_11uup"] {
  border-radius: var(--lp-radius-list);
  background: #ffffff3d;
  transition: background-color var(--lp-motion-btn) ease;
}
/* hover: derivado — mesmo branco do estado base com alpha .32 (spec só documenta o base) */
#app [class*="_addListButton_11uup"]:hover { background: #ffffff52; }

/* ============================== CARTÃO — módulo _36a26 ==================== */
#app [class*="_wrapper_36a26"] {
  background: var(--lp-surface-raised);
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-raised);
  color: var(--lp-text);
  transition: background-color var(--lp-motion-btn) ease;
}
#app [class*="_wrapper_36a26"]:hover { background: var(--lp-surface-raised-hover); }
/* nome do cartão (módulo da frente _i28lr; NÃO usar _name_ genérico — clarearia
   custom fields _1wks1 e tasks _170s0 que devem ficar subtle) */
#app [class*="_name_i28lr"] { color: inherit; }
/* conteúdo da frente do cartão (linha de anexos, divisor) — _i28lr */
#app [class*="_attachmentContent_i28lr"] { color: var(--lp-text-subtle); }
#app [class*="_creatorDivider_i28lr"] { background: var(--lp-border); border-color: var(--lp-border); }
/* contador de tasks no cartão */
#app [class*="_count_kjg3m"] { color: var(--lp-text-subtlest); }

/* composer de add-card (shell aberto) — _1utaf / _1bbow */
#app [class*="_card_1utaf"], #app [class*="_card_1bbow"] {
  background: var(--lp-surface-raised);
  border-radius: var(--lp-radius-card);
}

/* origem durante drag — derivado: surface #1F1F21 com alpha .85 (original Planka
   usa background rgba claro; a spec Trello usa opacity .4 mas aqui o hook é background) */
#app [class*="_dragging_1syam"] { background: rgba(31, 31, 33, .85); }

/* ============================== HEADER DO BOARD =========================== */
#app [class*="_name_1sj77"] { font-size: 18px; line-height: 32px; }

/* ============================== MODAL DO CARTÃO =========================== */
/* modal renderiza DENTRO do #app (originais dos internos são #app ._x) */
body .ui.modal, body .ui.modal > .content { background: var(--lp-surface); color: var(--lp-text); }
body .ui.modal > .close { color: var(--lp-text-subtle); }
/* internos do modal — gêmeos _160xl e _10xqw (sempre os dois), prefixo #app obrigatório */
#app [class*="_actionButton_160xl"], #app [class*="_actionButton_10xqw"] {
  background: var(--lp-neutral);
  box-shadow: none;
  color: var(--lp-text-subtle);
  transition: background-color var(--lp-motion-btn) ease;
}
#app [class*="_actionButton_160xl"]:hover, #app [class*="_actionButton_10xqw"]:hover {
  background: var(--lp-neutral-hover);
  color: var(--lp-text);
}
#app [class*="_descriptionButton_160xl"], #app [class*="_descriptionButton_10xqw"],
#app [class*="_dueDate_160xl"], #app [class*="_dueDate_10xqw"],
#app [class*="_list_160xl"], #app [class*="_list_10xqw"] {
  background: var(--lp-neutral);
  color: var(--lp-text-subtle);
}
#app [class*="_descriptionButton_160xl"]:hover, #app [class*="_descriptionButton_10xqw"]:hover,
#app [class*="_dueDate_160xl"]:hover, #app [class*="_dueDate_10xqw"]:hover,
#app [class*="_list_160xl"]:hover, #app [class*="_list_10xqw"]:hover {
  background: var(--lp-neutral-hover);
  color: var(--lp-text);
}
#app [class*="_moduleIcon_160xl"], #app [class*="_moduleIcon_10xqw"] { color: var(--lp-text); fill: var(--lp-text); }
#app [class*="_draftChip_160xl"], #app [class*="_draftChip_10xqw"] { background: var(--lp-neutral-hover); color: var(--lp-text); }
/* tasks/checklists dentro do modal (wrappers brancos) */
#app [class*="_fieldWrapper_tpq9f"], #app [class*="_fieldWrapper_rd45q"] {
  background: var(--lp-surface-raised);
  box-shadow: 0 1px 1px #01040480;   /* camada média do --lp-shadow-raised */
  color: var(--lp-text);
}
/* task sendo arrastada — derivado: surface-raised #242528 com alpha .9 (original #f7f6f7cc) */
#app [class*="_wrapperDragging_170s0"], #app [class*="_wrapperDragging_vu0dx"] { background: rgba(36, 37, 40, .9); }
/* balões de comentário */
#app [class*="_bubble_mycbd"] { background: var(--lp-surface-raised); color: var(--lp-text); }
/* navegação prev/next do modal — neutral do Trello (original: #ffffff09) */
#app [class*="_prevButton_1c0ax"] { background: var(--lp-neutral); color: var(--lp-text-subtle); }

/* ============================== POPUPS / DROPDOWNS ======================== */
body .ui.popup {
  background: var(--lp-surface-overlay);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-overlay);
  color: var(--lp-text);
  animation: lpScaleFadeIn 120ms ease-out;   /* duração estimada (keyframes = Trello ScaleIn95to100) */
}
body .ui.popup:before {
  background: var(--lp-surface-overlay) !important;   /* variantes direcionais do semantic têm (0,4,1) */
  box-shadow: 1px 1px 0 0 var(--lp-border) !important;
}
/* conteúdo de popup: módulos SEM #app no bundle (empate → ordem vence);
   hover prefixado com .ui.popup p/ vencer o semantic .ui.secondary.menu (0,4,0) */
[class*="_content_1i7p6"] { border-bottom: 1px solid var(--lp-border); color: var(--lp-text); }
[class*="_backButton_1i7p6"] { color: var(--lp-text-subtle); }
body .ui.popup [class*="_menuItem_13tkm"], body .ui.popup [class*="_menuItem_1eylc"],
body .ui.popup [class*="_menuItem_1fekv"], body .ui.popup [class*="_menuItem_13awa"],
body .ui.popup [class*="_menuItem_1su84"], body .ui.popup [class*="_menuItem_fsfjg"] { color: var(--lp-text); }
body .ui.popup .menu [class*="_menuItem_13tkm"]:hover, body .ui.popup .menu [class*="_menuItem_1eylc"]:hover,
body .ui.popup .menu [class*="_menuItem_1fekv"]:hover, body .ui.popup .menu [class*="_menuItem_13awa"]:hover,
body .ui.popup .menu [class*="_menuItem_1su84"]:hover, body .ui.popup .menu [class*="_menuItem_fsfjg"]:hover {
  background: var(--lp-neutral-hover);
  color: var(--lp-text);
}
#app [class*="_actionBarItem_1su84"], [class*="_actionBarItem_1su84"] { color: var(--lp-text-subtle); }
#app [class*="_actionBarItem_1su84"]:hover, body .ui.popup [class*="_actionBarItem_1su84"]:hover {
  background: var(--lp-neutral-hover);
  color: var(--lp-text);
}

/* ============================== BOTÕES / FORMS ============================ */
/* primário: azul brand do Trello dark (era o verde #21ba45 do semantic) */
body .ui.positive.button, body .ui.positive.buttons .button {
  background: var(--lp-brand);
  color: var(--lp-surface);
  transition: background-color var(--lp-motion-btn) ease, box-shadow var(--lp-motion-btn) ease;
}
body .ui.positive.button:hover, body .ui.positive.button:focus { background: var(--lp-brand-hover); color: var(--lp-surface); }
body .ui.positive.button:active { background: var(--lp-brand); color: var(--lp-surface); }

/* inputs/textareas: fundo input dark do Trello + focus azul */
body .ui.input > input, body .ui.form input:not([type=checkbox]):not([type=radio]):not([type=file]), body .ui.form textarea {
  background: var(--lp-surface-raised);
  border-color: var(--lp-border);
  color: var(--lp-text);
  transition: background-color var(--lp-motion-btn) ease, border-color var(--lp-motion-btn) ease, box-shadow var(--lp-motion-btn) ease;
}
body .ui.input > input:focus, body .ui.form input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, body .ui.form textarea:focus {
  background: var(--lp-surface-raised);
  border-color: var(--lp-brand);
  color: var(--lp-text);
}
body .ui.input > input::placeholder, body .ui.form textarea::placeholder { color: var(--lp-text-subtlest); }

/* ============================== SCROLLBARS (Trello: 8px, radius 4) ======== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { display: none; background: transparent; }
::-webkit-scrollbar-track { background: var(--lp-neutral); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--lp-neutral-hover); border-radius: 4px; min-height: 48px; }
::-webkit-scrollbar-thumb:hover { background: var(--lp-neutral-pressed); }
html { scrollbar-width: thin; scrollbar-color: #E3E4F21F #CECED912; }

/* ============================== MOTION ==================================== */
@keyframes lpScaleFadeIn {           /* ScaleIn95to100 + FadeIn0to100 do Trello */
  0% { opacity: 0; transform: scale(.95); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes lpFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lpSlideFadeIn {           /* SlideInTop8px + fade */
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
body .ui.modal { animation: lpSlideFadeIn 150ms ease-out; }   /* duração estimada */
@media (prefers-reduced-motion: reduce) {
  body .ui.popup, body .ui.modal { animation: none; }
}

/* ==================== v3 — achados da verificação visual ================== */
/* casca interna do modal do cartão: grid _wrapper_10xqw/_160xl pinta #f5f6f7
   por cima do .ui.modal (visto no DOM ao vivo 09/07) — escurecer + texto claro */
#app [class*="_wrapper_10xqw"], #app [class*="_wrapper_160xl"],
body .ui.modal [class*="_wrapper_10xqw"], body .ui.modal [class*="_wrapper_160xl"] {
  background: var(--lp-surface);
  color: var(--lp-text);
}
body .ui.modal [class*="_headerTitle_10xqw"], body .ui.modal [class*="_headerTitle_160xl"] { color: var(--lp-text); }
body .ui.modal [class*="_moduleHeader_10xqw"], body .ui.modal [class*="_moduleHeader_160xl"] { color: var(--lp-text); }
body .ui.modal [class*="_text_10xqw"], body .ui.modal [class*="_text_160xl"] { color: var(--lp-text-subtlest); }
/* abas Comentários/Ações (menu tabular do semantic dentro do modal) */
body .ui.modal .ui.menu .item { color: var(--lp-text-subtle); }
body .ui.modal .ui.menu .active.item { color: var(--lp-text); border-color: var(--lp-brand); }
body .ui.modal .ui.tabular.menu { border-bottom-color: var(--lp-border); }
/* textareas/campos custom dentro do modal (fora de .ui.form) */
body .ui.modal [class*="_10xqw"] textarea, body .ui.modal [class*="_160xl"] textarea {
  background: var(--lp-surface-raised);
  color: var(--lp-text);
}
/* título do cartão e demais textareas do modal (o nome é um textarea editável) */
body .ui.modal textarea { color: var(--lp-text); }
body .ui.modal textarea::placeholder { color: var(--lp-text-subtlest); }
/* campo de comentário (mentions-input embrulhado no _field_1ohx1, bg #fff) */
#app [class*="_field_1ohx1"], body .ui.modal [class*="_field_1ohx1"] {
  background: var(--lp-surface-raised);
  color: var(--lp-text);
}

/* botão primário "basic" do semantic (outline verde) → azul brand sólido, como o resto */
body .ui.basic.positive.button {
  background: var(--lp-brand) !important;      /* semantic basic usa !important no bg/shadow */
  box-shadow: none !important;
  color: var(--lp-surface) !important;
}
body .ui.basic.positive.button:hover, body .ui.basic.positive.button:focus {
  background: var(--lp-brand-hover) !important;
  color: var(--lp-surface) !important;
}

/* tela de LOGIN dark (painel esquerdo era branco) — módulo _45te1 */
#app [class*="_wrapper_45te1"] { background: var(--lp-surface); color: var(--lp-text); }
#app [class*="_wrapper_45te1"] h1, #app [class*="_wrapper_45te1"] h2,
#app [class*="_wrapper_45te1"] .ui.header { color: var(--lp-text); }
#app [class*="_wrapper_45te1"] label { color: var(--lp-text-subtle); }

/* topbar opaca (--lp-surface) → sem blur: o backdrop-filter no _1o9kk full-width
   virava um retângulo fosco vazando pra fora do canto arredondado do card */

/* abas de quadros: SEM scrollbar visual (pedido 09/07) — navegação fica por
   roda do mouse (lupalina.js) e pelo seletor 🗂 Quadros / Ctrl+K */
#app [class*="_tabsWrapper_mp09h"] { scrollbar-width: none; }
#app [class*="_tabsWrapper_mp09h"]::-webkit-scrollbar { height: 0; width: 0; display: none; }

/* drag: cartão clonado ganha a inclinação clássica (~4°; preview do Trello aplica via JS —
   valor consagrado, não extraível dos arquivos salvos) + sombra de overlay */
@media (prefers-reduced-motion: no-preference) {
  body [data-rbd-draggable-id][style*="position: fixed"] [class*="_wrapper_36a26"] {
    transform: rotate(4deg);
    box-shadow: var(--lp-shadow-overlay);
  }
}

/* ==================== v4 — micro-interações (feedback de clique/arraste) === */
@media (prefers-reduced-motion: no-preference) {
  /* clique em botões: leve "afunda" (como o Trello/Atlaskit) */
  body .ui.button, #app [class*="_addCardButton_hsqrn"], #app [class*="_addListButton_11uup"],
  #app [class*="_actionButton_160xl"], #app [class*="_actionButton_10xqw"] {
    transition: background-color var(--lp-motion-btn) ease, box-shadow var(--lp-motion-btn) ease,
                transform 60ms ease;
  }
  body .ui.button:active, #app [class*="_addCardButton_hsqrn"]:active,
  #app [class*="_addListButton_11uup"]:active,
  #app [class*="_actionButton_160xl"]:active, #app [class*="_actionButton_10xqw"]:active {
    transform: scale(.97);
  }
  /* cartão: sobe levemente no hover (elevação Trello) */
  #app [class*="_wrapper_36a26"] {
    transition: background-color var(--lp-motion-btn) ease, transform 100ms ease, box-shadow 100ms ease;
  }
  #app [class*="_wrapper_36a26"]:hover { transform: translateY(-1px); }
  /* placeholder de solto (onde o cartão vai cair) — faixa suave em vez de vazio seco */
  #app [class*="_dropZone"], #app [data-rbd-placeholder-context-id] {
    border-radius: var(--lp-radius-card);
    background: var(--lp-neutral);
    transition: background 120ms ease;
  }
  /* abrir/fechar de popup e modal já animados (lpScaleFadeIn / lpSlideFadeIn acima) */
}

/* ==================== v5 — barra inferior + seletor de quadros ============ */
/* Hierarquia z (pedido 09/07: a barra fica POR CIMA DE TUDO, inclusive do modal
   do cartão/dimmer do Planka, que vivem na casa dos milhares):
   painéis 99900 < seletor 99990 < barra 100000 < popup visualizações 100010 */
#lp-bar {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 100000; display: flex; gap: 2px; padding: 5px;
  background: var(--lp-surface-overlay); border: 1px solid var(--lp-border);
  border-radius: 12px; box-shadow: var(--lp-shadow-overlay);
}
.lp-bar-btn {
  position: relative; border: none; background: transparent; color: var(--lp-text-subtle);
  font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: background 85ms ease, color 85ms ease, transform 60ms ease;
}
.lp-bar-btn svg { display: block; }
.lp-bar-btn:hover { background: var(--lp-neutral-hover); color: var(--lp-text); }
.lp-bar-btn:active { transform: scale(.96); }
/* ATIVO estilo Trello: texto azul + traço embaixo animado */
.lp-bar-btn.on { color: #579dff; background: rgba(87,157,255,.14); }
.lp-bar-btn.on::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: #579dff; border-radius: 2px; animation: lpUnderline 160ms ease-out;
}
@keyframes lpUnderline { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

#lp-switch {
  position: fixed; inset: 0; z-index: 99990; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: center;
  animation: lpFadeIn 120ms ease-out;   /* overlay só esmaece (scale aqui fazia o escuro "vir do centro") */
}
.lp-switch-box { animation: lpScaleFadeIn 120ms ease-out; }
.lp-switch-secao {
  padding: 10px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--lp-text-subtlest);
}
.lp-switch-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 12px; }
.lp-switch-item { display: flex; align-items: center; gap: 10px; }
/* no modo escolher/excluir o item é <button>: mata o estilo branco do user-agent */
button.lp-switch-item {
  background: transparent; border: none; width: 100%; cursor: pointer;
  color: var(--lp-text); font-family: inherit; font-size: 14px; text-align: left;
  padding: 8px 10px; border-radius: 8px;
}
button.lp-switch-item:hover { background: var(--lp-neutral-hover); }
.lp-switch-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* SPLIT VIEW estilo Trello: os painéis EMPURRAM o conteúdo (mesma camada).
   --lp-esq-w/--lp-dir-w são setados pelo lupalina.js conforme painéis abertos. */
:root { --lp-esq-w: 0px; --lp-dir-w: 0px; }
/* #app do Planka É o <body> (margem no root não move nada). Empurrar de verdade:
   padding no wrapper do board (_amg4a) desloca as listas; o header é fixed full-width,
   então encolhe via left/right. Tudo na mesma camada, aperta no meio (igual Trello). */
/* TOPBAR GLOBAL (seta voltar · nome do projeto · sino · usuário) fica SEMPRE
   inteira no topo e NEUTRA — sem a cor do quadro (igual Trello). O card colorido
   do board vive abaixo dela. */
#app [class*="_wrapper_1o9kk"] { left: 0 !important; right: 0 !important; width: auto !important; }
#app [class*="_wrapper_jdrq3"] { background: var(--lp-surface) !important; }
/* header do projeto + abas (parte de dentro do card) acompanham o board */
#app [class*="_wrapper_1o9kk"] > :not([class*="_wrapper_jdrq3"]) {
  margin-left: var(--lp-esq-w); transition: margin 160ms ease;
}
#app.lp-split [class*="_wrapper_1o9kk"] > :not([class*="_wrapper_jdrq3"]) { margin-right: 8px; }
/* gradiente do board começa ABAIXO da topbar sempre (a topbar não pinta de verde) */
#app [class*="_wrapper_1tkwi"] { top: 50px !important; height: auto !important; bottom: 0 !important; }
/* board content empurrado no split */
#app [class*="_wrapper_amg4a"] {
  padding-left: var(--lp-esq-w) !important; padding-right: 0 !important;
  box-sizing: border-box; transition: padding 160ms ease;
}
#app.lp-split [class*="_wrapper_amg4a"] { padding-right: 8px !important; }
/* com painel aberto o board vira CARTÃO arredondado entre topbar e barra.
   ATENÇÃO: #app É o body → "body.lp-split #app X" nunca casa; tem que ser #app.lp-split */
#app.lp-split [class*="_wrapper_1tkwi"] {
  left: var(--lp-esq-w) !important; right: 8px !important;
  width: auto !important; top: 58px !important; bottom: 62px !important;
  border-radius: var(--lp-radius-list); overflow: hidden;
  transition: left 160ms ease, right 160ms ease;
}
/* cantos de cima do card = primeiro bloco abaixo da topbar (header do projeto) */
#app.lp-split [class*="_wrapper_1o9kk"] > [class*="_wrapper_jdrq3"] + * {
  border-top-left-radius: var(--lp-radius-list); border-top-right-radius: var(--lp-radius-list);
  overflow: hidden; margin-top: 8px;
}
/* "Quadro" oculto: esconde board + fundo, e o trilho toma a tela toda */
body.lp-board-off [class*="_wrapper_amg4a"] { visibility: hidden; }
body.lp-board-off [class*="_wrapper_1tkwi"] { display: none; }

/* TRILHO à esquerda: painéis (Caixa/Planejador) como cartões, do topo ao rodapé,
   posição/left controlados pelo JS; arrastáveis pelo cabeçalho, redimensionáveis à direita */
.lp-panel {
  position: fixed; top: 58px; bottom: 62px; z-index: 99900; width: 400px;
  display: flex; flex-direction: column;
  background: var(--lp-surface);
  border: 1px solid var(--lp-border); border-radius: var(--lp-radius-list);
  box-shadow: var(--lp-shadow-raised);
  overflow: hidden; animation: lpSlideEsq 160ms ease-out;
}
.lp-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--lp-border);
  cursor: grab; user-select: none; flex: 0 0 auto;
}
.lp-panel-head:active { cursor: grabbing; }
.lp-panel-titulo { color: var(--lp-text); font-weight: 700; font-size: 14px; }
.lp-panel-x {
  border: none; background: transparent; color: var(--lp-text-subtle); font-size: 20px;
  line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 6px;
}
.lp-panel-x:hover { background: var(--lp-neutral-hover); color: var(--lp-text); }
.lp-panel-corpo { flex: 1; overflow-y: auto; padding: 12px; }
.lp-panel-rz { position: absolute; top: 0; bottom: 0; right: -3px; width: 8px; cursor: col-resize; z-index: 2; }
.lp-panel-rz:hover { background: var(--lp-neutral-hover); }
.lp-carregando { color: var(--lp-text-subtlest); font-size: 13px; padding: 14px; }

/* --- Caixa de entrada nativa --- */
.lp-ib-form { display: flex; gap: 8px; margin-bottom: 12px; }
.lp-ib-input {
  flex: 1; background: var(--lp-surface-raised); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-card); padding: 9px 11px; color: var(--lp-text); font: inherit; font-size: 14px;
}
.lp-ib-input::placeholder { color: var(--lp-text-subtlest); }
.lp-ib-add {
  border: none; border-radius: var(--lp-radius-btn); background: var(--lp-brand); color: var(--lp-surface);
  font: inherit; font-size: 13px; font-weight: 600; padding: 0 14px; cursor: pointer;
}
.lp-ib-add:hover { background: var(--lp-brand-hover); }
.lp-ib-lista { display: flex; flex-direction: column; gap: 8px; }
.lp-ib-item {
  display: flex; align-items: center; gap: 6px; padding: 9px 11px;
  background: var(--lp-surface-raised); border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-raised); color: var(--lp-text); font-size: 14px;
}
.lp-ib-texto { flex: 1; overflow-wrap: anywhere; }
.lp-ib-btn {
  border: none; background: transparent; color: var(--lp-text-subtle); cursor: pointer;
  border-radius: 6px; padding: 3px 8px; font-size: 14px;
}
.lp-ib-btn:hover { background: var(--lp-neutral-hover); color: var(--lp-text); }
.lp-ib-del { font-size: 17px; line-height: 1; }
.lp-ib-vazio { color: var(--lp-text-subtlest); font-size: 13px; padding: 8px 2px; }

/* --- Planejador nativo (calendário mensal) --- */
.lp-cal-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.lp-cal-btn {
  border: 1px solid var(--lp-border); background: var(--lp-neutral); color: var(--lp-text);
  border-radius: 6px; padding: 5px 11px; cursor: pointer; font: inherit; font-size: 13px;
}
.lp-cal-btn:hover { background: var(--lp-neutral-hover); }
.lp-cal-titulo { margin-left: 8px; font-weight: 700; color: var(--lp-text); font-size: 14px; text-transform: capitalize; }
.lp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.lp-cal-h { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--lp-text-subtlest); padding: 2px 4px; }
.lp-cal-cel {
  min-height: 74px; background: var(--lp-surface-raised); border: 1px solid var(--lp-border);
  border-radius: 8px; padding: 4px 5px; overflow: hidden;
}
.lp-cal-fora { background: transparent; border-color: transparent; }
.lp-cal-hoje { border-color: #579dff; box-shadow: 0 0 0 1px #579dff inset; }
.lp-cal-dia { font-size: 11px; font-weight: 600; color: var(--lp-text-subtle); margin-bottom: 3px; }
.lp-cal-hoje .lp-cal-dia { color: #579dff; }
.lp-cal-card {
  display: block; font-size: 11px; line-height: 1.3; padding: 2px 5px; margin-bottom: 2px;
  border-radius: 4px; background: var(--lp-neutral); color: var(--lp-text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid #579dff;
}
.lp-cal-card:hover { background: var(--lp-neutral-hover); }
.lp-cal-done { opacity: .55; text-decoration: line-through; }
.lp-cal-mais { font-size: 10px; color: var(--lp-text-subtlest); padding: 1px 5px; }

/* --- Visualizações (substituem a área do board) --- */
#lp-view {
  position: fixed; left: var(--lp-esq-w); right: 0; bottom: 0; z-index: 99800;
  background: var(--lp-surface); border-top: 1px solid var(--lp-border);
  display: flex; flex-direction: column; overflow: hidden;
  transition: left 160ms ease;
}
/* view aberta = o QUADRO some de verdade (o Yuri viu o board vivo por trás e até
   trocava a visualização nativa pelos botões do sub-header): esconde conteúdo,
   fundo colorido e o sub-header do board (_1cmnv: avatares/filtros/botões nativos).
   As abas de quadros (_rbzeo) ficam — precisa delas pra trocar de quadro. */
/* #app É o body: "body.lp-viewon #app X" nunca casa — tem que ser #app.lp-viewon */
#app.lp-viewon [class*="_wrapper_amg4a"] { visibility: hidden !important; }
#app.lp-viewon [class*="_wrapper_1tkwi"] { display: none !important; }
#app.lp-viewon [class*="_wrapper_1cmnv"] { display: none !important; }
.lp-view-titulo { padding: 10px 16px; font-weight: 700; font-size: 14px; color: var(--lp-text); border-bottom: 1px solid var(--lp-border); }
.lp-view-corpo { flex: 1; overflow-y: auto; padding: 14px 16px; }
.lp-tv { width: 100%; border-collapse: collapse; }
.lp-tv th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--lp-text-subtlest); padding: 7px 10px; border-bottom: 1px solid var(--lp-border); }
.lp-tv td { padding: 7px 10px; border-bottom: 1px solid var(--lp-border); font-size: 13px; color: var(--lp-text-subtle); }
.lp-tv td a { color: var(--lp-text); text-decoration: none; }
.lp-tv td a:hover { text-decoration: underline; }
.lp-tv tbody tr:hover { background: var(--lp-neutral); }
/* KPIs do Painel pessoal (mockup do Eric/Yuri 15/07): tiles em cima, tabelas embaixo */
.lp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.lp-kpi {
  background: var(--lp-surface-raised); border: 1px solid var(--lp-border);
  border-radius: 8px; padding: 8px 10px; text-align: left; min-width: 0;
}
.lp-kpi-n { font-size: 19px; font-weight: 700; color: var(--lp-text); line-height: 1.1; }
.lp-kpi-l { font-size: 11.5px; color: var(--lp-text-subtle); margin-top: 2px; }
.lp-kpi-ruim .lp-kpi-n { color: #f87168; }
.lp-kpi-alerta .lp-kpi-n { color: #f5cd47; }
.lp-kpi-bom .lp-kpi-n { color: #4bce97; }
.lp-kpi-s { font-size: 11px; color: var(--lp-text-subtlest); margin-top: 2px; }
.lp-kpi-track { height: 4px; background: var(--lp-neutral); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.lp-kpi-bar { height: 100%; border-radius: 2px; }
.lp-pv-nota { color: var(--lp-text-subtlest); font-size: 12px; margin-top: 12px; }
.lp-ordem-barra { margin: 0 0 14px; }

/* ===== dashboard estilo mockup: kanban 5 colunas + form à direita + rodapé ===== */
/* form à ESQUERDA (22/07): a tela lê como sequência — criar → ideias → fazer → … */
.lp-dash { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
/* sincronização com o Google Agenda (bloco no topo do Cronograma) */
.lp-gcal { margin-bottom: 12px; }
.lp-gcal-caixa { margin-top: 8px; background: var(--lp-surface-raised); border: 1px solid var(--lp-border); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--lp-text-subtle); }
.lp-gcal-linha { display: flex; gap: 8px; }
.lp-gcal-linha .lp-of-input { flex: 1; font-size: 12px; }
.lp-gcal-como { margin-top: 8px; line-height: 1.5; }
.lp-gcal-como small { color: var(--lp-text-subtlest); }
.lp-cal-gcal {
  margin-left: 6px; text-decoration: none; opacity: .55;
  float: right;   /* o cartão do calendário é nowrap+ellipsis: sem isto o 📆 some no texto longo */
}
.lp-cal-gcal:hover { opacity: 1; }
.lp-log-row { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-bottom: 1px solid var(--lp-border); font-size: 13px; }
.lp-log-dt { color: var(--lp-text-subtlest); white-space: nowrap; font-size: 12px; }
.lp-log-txt { flex: 1; color: var(--lp-text); min-width: 0; }
.lp-log-board { color: var(--lp-text-subtlest); font-size: 12px; white-space: nowrap; }
.lp-dash-form { align-self: start; }
.lp-dash-form .lp-ordem-form { grid-template-columns: 1fr; padding: 0; }
.lp-dash-form .lp-cred-btns { padding: 10px 0 0; }
.lp-kb { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: 10px; overflow-x: auto; }
.lp-kb-col { background: var(--lp-surface-raised); border: 1px solid var(--lp-border); border-radius: 10px; padding: 10px; min-width: 0; }
.lp-kb-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.lp-kb-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.lp-kb-tit { font-size: 12.5px; font-weight: 600; color: var(--lp-text); flex: 1; min-width: 0; }
.lp-kb-n { font-size: 11.5px; color: var(--lp-text-subtlest); background: var(--lp-neutral); border-radius: 9px; padding: 1px 7px; }
.lp-kb-card {
  display: block; background: var(--lp-surface); border: 1px solid var(--lp-border);
  border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; text-decoration: none;
}
.lp-kb-card:hover { background: var(--lp-surface-raised-hover); }
.lp-kb-nome { font-size: 13px; color: var(--lp-text); font-weight: 500; margin-bottom: 6px; }
/* texto colado sem espaço (ex.: CPNMVJSALKDKJLJ...) estourava o cartão e invadia
   a coluna vizinha — quebra em qualquer ponto e nada escapa do cartão */
.lp-kb-nome, .lp-kb-meta, .lp-kb-meta span, .lp-kb-prio, .lp-kb-selo {
  overflow-wrap: anywhere; word-break: break-word; min-width: 0;
}
.lp-kb-feito .lp-kb-nome { text-decoration: line-through; color: var(--lp-text-subtlest); }
.lp-kb-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--lp-text-subtlest); margin-top: 3px; flex-wrap: wrap; }
.lp-kb-prio { border-radius: 4px; padding: 1px 7px; font-size: 11px; font-weight: 600; }
.lp-kb-mais { font-size: 12px; color: var(--lp-text-subtlest); text-align: center; padding: 4px; }
/* incluir direto na coluna (+ no cabeçalho, convite quando vazia, mini-form) */
.lp-kb-addbtn {
  border: none; background: var(--lp-neutral); color: var(--lp-text-subtle);
  border-radius: 6px; width: 22px; height: 22px; cursor: pointer; font-size: 15px;
  line-height: 1; margin-left: 6px; flex: none;
}
.lp-kb-addbtn:hover { background: var(--lp-neutral-hover); color: var(--lp-text); }
.lp-kb-addvazio {
  display: block; width: 100%; border: 1px dashed var(--lp-border); background: transparent;
  color: var(--lp-text-subtlest); border-radius: 8px; padding: 10px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; text-align: center;
}
.lp-kb-addvazio:hover { color: var(--lp-text); border-color: var(--lp-text-subtlest); }
.lp-kb-add-form { margin-bottom: 8px; }
.lp-kb-add-btns { display: flex; gap: 6px; margin-top: 6px; }
/* guia rápido */
.lp-oa-guia b { font-size: 16px; }
.lp-guia { padding: 4px 16px 8px; max-height: 60vh; overflow-y: auto; }
.lp-guia-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--lp-border); }
.lp-guia-item b { color: var(--lp-text); font-size: 13.5px; }
.lp-guia-item span { color: var(--lp-text-subtle); font-size: 12.5px; line-height: 1.5; }
.lp-dash-baixo { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 12px; }

/* ===== Ordens e Atividades (spec Eric/Yuri 21/07) ===== */
.lp-oa-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.lp-oa-tit h2 { margin: 0 0 4px; font-size: 20px; color: var(--lp-text); }
.lp-oa-abas { display: flex; gap: 8px; }
.lp-oa-aba {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: var(--lp-surface-raised); border: 1px solid var(--lp-border);
  border-radius: 10px; padding: 9px 14px; cursor: pointer; font-family: inherit;
}
.lp-oa-aba b { color: var(--lp-text); font-size: 13.5px; }
.lp-oa-aba span { color: var(--lp-text-subtlest); font-size: 11px; }
.lp-oa-aba.on { border-color: var(--lp-brand); background: #579dff1f; }
.lp-oa-aba.on b { color: var(--lp-brand); }
.lp-oa-filtros {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  background: var(--lp-surface-raised); border: 1px solid var(--lp-border);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
}
.lp-of-mini { padding: 6px 8px; font-size: 12.5px; min-width: 130px; }
.lp-of-busca { flex: 1; min-width: 160px !important; }   /* vence o min-width:0 do .lp-of-campo */
.lp-of-limpar { align-self: flex-end; }
.lp-kpis-6 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.lp-kpi-click { cursor: pointer; font-family: inherit; text-align: left; }
.lp-kpi-click:hover { border-color: var(--lp-brand); }
.lp-kpi-on { border-color: var(--lp-brand); background: #579dff1f; }
.lp-oa-meio { min-width: 0; }
.lp-kb-6 { grid-template-columns: repeat(4, minmax(190px, 1fr)); }   /* Atrasado e Aguardando viraram selo */
.lp-kb-alvo { outline: 2px dashed var(--lp-brand); outline-offset: -2px; background: #579dff14; }
.lp-kb-card { position: relative; cursor: grab; overflow: hidden; }
/* selo de ATRASO no cartão (substitui a coluna Atrasado — pedido do Tiago 28/07) */
.lp-kb-atrasado { border-color: #f87168 !important; }
.lp-kb-selo {
  display: inline-block; background: #f8716822; color: #f87168; font-weight: 700;
  font-size: 10.5px; letter-spacing: .02em; border-radius: 4px;
  padding: 2px 7px; margin-bottom: 6px;
}
.lp-kb-venc { color: #f87168 !important; font-weight: 600; }
.lp-kb-selo-aguarda { background: #9f8fef22; color: #9f8fef; }
.lp-kb-drag { opacity: .45; }
.lp-kb-nome a { color: inherit; text-decoration: none; }
.lp-kb-nome a:hover { text-decoration: underline; }
.lp-kb-mv {
  position: absolute; top: 6px; right: 6px; border: none; cursor: pointer;
  background: var(--lp-neutral); color: var(--lp-text-subtle); border-radius: 5px;
  font-size: 12px; padding: 1px 6px; opacity: 0; transition: opacity 100ms;
}
.lp-kb-card:hover .lp-kb-mv { opacity: 1; }
.lp-of-nota { font-size: 11.5px; color: var(--lp-text-subtlest); margin: -4px 0 2px; }
.lp-of-nota-ok { color: #579dff; }
.lp-of-nota-erro { color: #f87168; }
.lp-oa-resrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--lp-border); }
.lp-oa-resrow b { color: var(--lp-text); }
.lp-oa-resl { flex: 1; color: var(--lp-text-subtle); font-size: 12.5px; }
.lp-oa-restot { border-bottom: none; font-weight: 700; }
.lp-oa-baixo { grid-template-columns: 280px 1fr; margin-top: 12px; }
.lp-oa-lista table { width: 100%; table-layout: fixed; }
.lp-oa-lista td { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .lp-oa-baixo { grid-template-columns: 1fr; } }
.lp-criticos { text-align: left; }
.lp-crit-n { font-size: 30px; font-weight: 700; margin-top: 8px; }
.lp-crit-n.lp-kpi-ruim { color: #f87168; }
.lp-crit-n.lp-kpi-alerta { color: #f5cd47; }
@media (max-width: 1100px) {
  .lp-dash, .lp-dash-baixo { grid-template-columns: 1fr; }
}
/* form Nova Ordem (dentro do overlay lp-switch-box) */
.lp-ordem-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 4px 16px 4px; }
.lp-of-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lp-of-campo:nth-child(1), .lp-of-campo:last-child { grid-column: 1 / -1; }
.lp-of-rotulo { font-size: 12px; color: var(--lp-text-subtle); }
.lp-of-input {
  background: var(--lp-surface-raised); color: var(--lp-text);
  border: 1px solid var(--lp-border); border-radius: 7px; padding: 8px 10px;
  font-family: inherit; font-size: 13.5px; color-scheme: dark;
  /* select/input têm largura intrínseca do conteúdo (nome comprido estourava a caixa) */
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}
.lp-of-input:focus { outline: none; border-color: var(--lp-brand); }
.lp-of-txt { resize: vertical; min-height: 64px; }
.lp-pv { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.lp-pv-box { background: var(--lp-surface-raised); border: 1px solid var(--lp-border); border-radius: 10px; padding: 12px 14px; }
.lp-pv-box h3 { margin: 0 0 10px; font-size: 13px; color: var(--lp-text); }
.lp-pv-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lp-pv-nome { flex: 0 0 40%; font-size: 12px; color: var(--lp-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-pv-track { flex: 1; background: var(--lp-neutral); border-radius: 4px; height: 11px; overflow: hidden; }
.lp-pv-bar { display: block; height: 100%; background: #579dff; border-radius: 4px; }
.lp-pv-n { flex: 0 0 26px; text-align: right; font-size: 12px; color: var(--lp-text); }
.lp-cv-dia { margin-bottom: 14px; }
.lp-cv-dia h3 { margin: 0 0 6px; font-size: 13px; color: var(--lp-text); }
.lp-cv-card {
  display: block; padding: 7px 10px; margin-bottom: 4px; border-radius: 8px;
  background: var(--lp-surface-raised); box-shadow: var(--lp-shadow-raised);
  color: var(--lp-text); text-decoration: none; font-size: 13px;
}
.lp-cv-card:hover { background: var(--lp-surface-raised-hover); }
.lp-views-item.on { color: #579dff; }

/* botão de VISUALIZAÇÃO ao lado do nome do quadro (topo) */
.lp-viewbtn {
  display: inline-flex; align-items: center; gap: 2px; vertical-align: middle;
  margin-left: 8px; padding: 4px 7px; border-radius: 6px; cursor: pointer;
  border: none; background: rgba(255,255,255,.14); color: #fff;
}
.lp-viewbtn:hover { background: rgba(255,255,255,.26); }
.lp-views-cab { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--lp-text-subtlest); }
.lp-vi-ic { display: inline-block; width: 20px; text-align: center; }
/* aviso flutuante (Cronograma/Mapa indisponíveis) */
.lp-toast {
  position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 100020;
  background: var(--lp-surface-overlay); border: 1px solid var(--lp-border); color: var(--lp-text);
  padding: 10px 16px; border-radius: 8px; box-shadow: var(--lp-shadow-overlay); font-size: 13px; max-width: 90vw;
  animation: lpScaleFadeIn 120ms ease-out;
}
/* durante drag/resize, os iframes não podem engolir o mouse */
body.lp-dragging iframe { pointer-events: none !important; }
body.lp-dragging { user-select: none; }
@keyframes lpSlideEsq { 0% { transform: translateX(-24px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes lpSlideDir { 0% { transform: translateX(24px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

/* overlay central p/ páginas (Modelos, Tabela, Painel, Busca, Importar) — TUDO no Planka */
#lp-page {
  position: fixed; inset: 0; z-index: 99950; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  animation: lpFadeIn 120ms ease-out;
}
.lp-page-box {
  width: min(1100px, 96vw); height: min(86vh, 900px); display: flex; flex-direction: column;
  background: var(--lp-surface); border: 1px solid var(--lp-border);
  border-radius: 12px; box-shadow: var(--lp-shadow-overlay); overflow: hidden;
  animation: lpScaleFadeIn 120ms ease-out;
}
.lp-page-box .lp-panel-head { cursor: default; }
.lp-page-box iframe { flex: 1; width: 100%; border: 0; background: #0f1317; }

/* diálogo de credencial do Trello (importação de imagens) — dentro do overlay #lp-switch */
.lp-cred-tit { color: var(--lp-text); font-size: 16px; font-weight: 600; padding: 14px 16px 6px; }
.lp-cred-txt { color: var(--lp-text-subtle); font-size: 13px; line-height: 1.55; padding: 0 16px 12px; }
.lp-cred-txt a { color: var(--lp-brand); }
.lp-cred-txt small { color: var(--lp-text-subtlest); }
.lp-cred-btns { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px 14px; flex-wrap: wrap; }
.lp-cred-b {
  padding: 8px 14px; border-radius: var(--lp-radius-btn); border: none; cursor: pointer;
  background: var(--lp-neutral); color: var(--lp-text); font-family: inherit; font-size: 13px;
}
.lp-cred-b:hover { background: var(--lp-neutral-hover); }
.lp-cred-ok { background: var(--lp-brand); color: #fff; font-weight: 600; }
.lp-cred-ok:hover { background: var(--lp-brand-hover); }

/* menu do botão direito (importar do Trello) — posicionado pelo JS via left/top */
#lp-ctx {
  position: fixed; z-index: 100020;
  background: var(--lp-surface-overlay); border: 1px solid var(--lp-border);
  border-radius: 10px; box-shadow: var(--lp-shadow-overlay); padding: 6px;
  display: flex; flex-direction: column; min-width: 260px;
  animation: lpScaleFadeIn 120ms ease-out;
}
.lp-ctx-item {
  padding: 9px 12px; border-radius: 7px; color: var(--lp-text); font-size: 14px;
  border: none; background: transparent; font-family: inherit; text-align: left;
  cursor: pointer; display: flex; align-items: center; gap: 9px; white-space: nowrap;
}
.lp-ctx-item:hover { background: var(--lp-neutral-hover); }
.lp-ctx-item i.icon { color: var(--lp-text-subtle); margin: 0; }

/* dropdown Visualizações (ancorado ao botão pelo JS via left/top) */
#lp-views {
  position: fixed; z-index: 100010;
  background: var(--lp-surface-overlay); border: 1px solid var(--lp-border);
  border-radius: 10px; box-shadow: var(--lp-shadow-overlay); padding: 6px;
  display: flex; flex-direction: column; min-width: 230px;
  animation: lpScaleFadeIn 120ms ease-out;
}
.lp-views-item {
  padding: 9px 12px; border-radius: 7px; color: var(--lp-text); text-decoration: none; font-size: 14px;
  border: none; background: transparent; font-family: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.lp-views-item:hover { background: var(--lp-neutral-hover); }
.lp-views-item svg { display: block; }
.lp-switch-box {
  margin-top: 12vh; width: min(560px, 92vw); max-height: 70vh; display: flex; flex-direction: column;
  background: var(--lp-surface-overlay); border: 1px solid var(--lp-border);
  border-radius: 12px; box-shadow: var(--lp-shadow-overlay); overflow: hidden;
}
.lp-switch-input {
  border: none; outline: none; background: var(--lp-surface-raised); color: var(--lp-text);
  font: inherit; font-size: 15px; padding: 14px 16px; border-bottom: 1px solid var(--lp-border);
}
.lp-switch-input::placeholder { color: var(--lp-text-subtlest); }
.lp-switch-list { overflow-y: auto; padding: 6px; }
.lp-switch-item {
  display: block; padding: 9px 12px; border-radius: 8px; color: var(--lp-text);
  text-decoration: none; font-size: 14px;
}
.lp-switch-item:hover { background: var(--lp-neutral-hover); }
.lp-switch-proj { color: var(--lp-text-subtlest); font-size: 12px; margin-right: 6px; }
.lp-switch-proj:not(:empty)::after { content: '·'; margin-left: 6px; }
.lp-switch-vazio { padding: 14px 16px; color: var(--lp-text-subtlest); font-size: 14px; }

/* ============================== EXTRAS ==================================== */
/* esconder chamadas do Planka Pro / banner (licença fair-use, uso interno).
   Revalidar o :has a cada upgrade — hoje só o banner casa com o padrão. */
a[href*="planka.app/pro"] { display: none !important; }
div:has(> a[href*="app-banner"]) { display: none !important; }

/* ==================== v7 — CONTRASTE (caça fundo branco / texto navy) ===== */
/* Muitos componentes do semantic-ui/Planka assumem tema CLARO (texto navy #17394d,
   fundo branco). Estas regras forçam legibilidade no dark. */

/* botões de FECHAR (X) — eram navy #17394d, quase invisíveis */
body [class*="_closeButton"], body .ui.modal > .close, body .ui.modal > i.close.icon {
  color: var(--lp-text-subtle) !important;
}
body [class*="_closeButton"]:hover, body .ui.modal > .close:hover { color: var(--lp-text) !important; }

/* item de menu ATIVO (semantic força preto rgba(0,0,0,.95)) — ex.: "Quadro" */
body .ui.menu .active.item, body .ui.popup .menu .active.item,
body .ui.vertical.menu .active.item, body [class*="_menuItem_"].active {
  color: var(--lp-text) !important; background: var(--lp-neutral-hover) !important;
}

/* DROPDOWN de seleção (ex.: Idioma) — vinha com fundo BRANCO e texto preto */
body .ui.selection.dropdown, body .ui.dropdown .menu, body .ui.dropdown .menu > .item {
  background: var(--lp-surface-raised) !important; color: var(--lp-text) !important;
  border-color: var(--lp-border) !important;
}
body .ui.dropdown .menu > .item:hover, body .ui.dropdown .menu > .active.item,
body .ui.dropdown .menu > .selected.item { background: var(--lp-neutral-hover) !important; color: var(--lp-text) !important; }
body .ui.dropdown, body .ui.dropdown > .text, body .ui.dropdown .divider.text { color: var(--lp-text) !important; }
body .ui.dropdown > .dropdown.icon, body .ui.dropdown .menu > .item > .flag { color: var(--lp-text-subtle) !important; }

/* INPUTS/campos em modais e forms — texto navy -> claro, fundo escuro */
body .ui.modal input, body .ui.modal textarea, body .ui.modal select,
body .ui.form input, body .ui.input > input, body [class*="_field_"] input, body [class*="_field_"] textarea {
  color: var(--lp-text) !important; background: var(--lp-surface-raised) !important;
  border-color: var(--lp-border) !important;
}
body .ui.modal input::placeholder, body .ui.form input::placeholder,
body [class*="_field_"] input::placeholder { color: var(--lp-text-subtlest) !important; }

/* DIVIDERS de seção (Idioma / Autenticação) */
body .ui.horizontal.divider, body .ui.divider { color: var(--lp-text-subtle) !important; }
body .ui.divider:not(.vertical) { border-color: var(--lp-border) !important; }

/* wrappers/segmentos brancos genéricos dentro de modal */
body .ui.modal [class*="_wrapper_odsqa"], body .ui.segment {
  background: var(--lp-surface) !important; color: var(--lp-text) !important;
}

/* checkbox labels (aba Preferências) e headers do semantic */
body .ui.checkbox label, body .ui.checkbox + label, body .ui.modal .ui.header,
body .ui.modal label, body .ui.form label { color: var(--lp-text) !important; }

/* botão positive DESABILITADO: texto legível (era preto no azul claro) */
body .ui.positive.button:disabled, body .ui.positive.button.disabled { color: var(--lp-surface) !important; opacity: .55; }

/* rede de segurança: texto navy #17394d inline em popup/modal -> claro */
body .ui.popup [style*="17394d"], body .ui.modal [style*="17394d"] { color: var(--lp-text) !important; }

/* ==================== v6 — MOBILE (celular, ≤640px) ====================== */
@media (max-width: 640px) {
  /* pedido: no celular NADA de barra/painéis — só o quadro principal */
  #lp-bar, .lp-panel, #lp-viewbtn, #lp-ctx { display: none !important; }
  /* board sem push (tela pequena) */
  #app [class*="_wrapper_amg4a"] { padding-left: 0 !important; padding-right: 0 !important; }
  #app [class*="_wrapper_1o9kk"] { left: 0 !important; right: 0 !important; }
  /* overlay central e seletor: colam nas bordas (caso abram por atalho) */
  .lp-page-box { width: 96vw; height: 88vh; }
  .lp-switch-box { width: 96vw; margin-top: 6vh; }
  /* abas de quadros: arrastáveis por toque (o js cuida) */
  #app [class*="_tabsWrapper_mp09h"] { cursor: grab; touch-action: pan-x; }
}

/* ===== CONTRASTE v8 — VISTORIA COMPLETA DO TEMA CLARO (gerado do bundle 2.1.1) =====
   O Planka embute o tema CLARO do Trello/semantic-ui: navy #17394d (27x), #172b4d,
   #212121/#333/#444, #5e6c84, #091e423d e ~227 regras do semantic com preto (#000000de...).
   Sobre o nosso fundo escuro isso vira o "azul/preto que nao da pra ler".
   CRITERIO: razao de contraste WCAG do texto (composto com seu alfa) contra --lp-surface.
   So entra quem fica ABAIXO de 3.0:1. Cor cromatica intencional e legivel (etiqueta
   #e83855=3.8:1, ciano #109dc0=4.8:1, cinza #888=4.7:1) NAO e tocada — luminancia crua
   pegaria essas por engano. Regra que pinta fundo claro proprio (.hljs, mark) fica fora.
   REGENERAR apos upgrade da imagem (hashes mudam): scratchpad/gen_final.py. */
/* padroes 100%% ilegiveis -> casa por nome, sobrevive a troca de hash */
#app [class*="_actionBarItem_"],
#app [class*="_actionIcon_"],
#app [class*="_author_"],
#app [class*="_debugLog_"],
#app [class*="_descriptionText_"],
#app [class*="_headerName_"],
#app [class*="_headerTitle_"],
#app [class*="_listHoverable_"],
#app [class*="_menuItem_"],
#app [class*="_moduleHeader_"],
#app [class*="_moduleIcon_"],
#app [class*="_tasks_"],
#app [class*="_testLog_"],
#app [class*="_value_"] { color: var(--lp-text) !important; }
/* padroes 100%% ilegiveis -> casa por nome, sobrevive a troca de hash */
#app [class*="_nameIcon_"] { color: var(--lp-text-subtlest) !important; }
/* modulos: seletor exato (o padrao tb aparece legivel noutro lugar) */
#app ._button_13ymj_5:hover { color: var(--lp-text) !important; }
#app ._deleteAllButton_1ycsb_5:hover { color: var(--lp-text) !important; }
#app ._content_6qhns_5 { color: var(--lp-text) !important; }
#app ._button_1v3zm_5:hover { color: var(--lp-text) !important; }
#app ._name_1v3zm_24 { color: var(--lp-text) !important; }
#app ._addAttachmentButton_1itzb_5:hover { color: var(--lp-text) !important; }
#app ._button_gxctu_5:hover { color: var(--lp-text) !important; }
#app ._importButton_doytk_20:hover { color: var(--lp-text) !important; }
#app ._text_doytk_40 { color: var(--lp-text) !important; }
#app ._text_ydajf_53 { color: var(--lp-text) !important; }
#app ._name_q007q_16 { color: var(--lp-text) !important; }
#app ._text_oedqb_14 { color: var(--lp-text) !important; }
#app ._name_1b56j_16 { color: var(--lp-text) !important; }
#app ._button_nm8sd_5:hover { color: var(--lp-text) !important; }
#app ._name_nm8sd_37 { color: var(--lp-text) !important; }
#app ._field_4d1a2_13 { color: var(--lp-text) !important; }
#app ._selectTypeButton_4d1a2_26:hover { color: var(--lp-text) !important; }
#app ._field_1c6a9_5 { color: var(--lp-text) !important; }
#app ._name_i28lr_66 { color: var(--lp-text) !important; }
#app ._name_fiqad_57 { color: var(--lp-text) !important; }
#app ._name_12vz3_38 { color: var(--lp-text) !important; }
#app ._text_1t2fe_19 { color: var(--lp-text) !important; }
#app ._text_1rnof_28 { color: var(--lp-text) !important; }
#app ._selectTypeButton_rd45q_28:hover { color: var(--lp-text) !important; }
#app ._headerButton_hsqrn_84:hover { color: var(--lp-text) !important; }
#app ._field_xb352_5 { color: var(--lp-text) !important; }
#app ._text_quoly_16 { color: var(--lp-text) !important; }
#app ._text_170s0_69 { color: var(--lp-text) !important; }
#app ._toggleLinkingButton_g18fu_27:hover { color: var(--lp-text) !important; }
#app ._taskButton_1uxqm_26:hover { color: var(--lp-text) !important; }
#app ._field_pwski_9 textarea { color: var(--lp-text) !important; }
#app ._header_mycbd_38 { color: var(--lp-text) !important; }
#app ._field_1ohx1_14 textarea { color: var(--lp-text) !important; }
#app ._name_ezlvm_17 { color: var(--lp-text) !important; }
#app ._name_11wpr_6 { color: var(--lp-text) !important; }
#app ._text_16gts_14 { color: var(--lp-text) !important; }
#app ._name_1w1t5_33 { color: var(--lp-text) !important; }
#app ._option_1w1t5_40:hover { color: var(--lp-text) !important; }
#app ._toggleButton_4lqhq_5:hover { color: var(--lp-text) !important; }
#app ._dueDate_10xqw_86:hover { color: var(--lp-text) !important; }
#app ._descriptionButton_10xqw_104:hover { color: var(--lp-text) !important; }
#app ._moreActionsButton_10xqw_231:hover { color: var(--lp-text) !important; }
#app ._dueDate_160xl_91:hover { color: var(--lp-text) !important; }
#app ._descriptionButton_160xl_110:hover { color: var(--lp-text) !important; }
#app ._moreActionsButton_160xl_247:hover { color: var(--lp-text) !important; }
#app ._wrapper_zdnn1_36 { color: var(--lp-text) !important; }
#app ._selectRoleButton_og0kt_20:hover { color: var(--lp-text) !important; }
#app ._text_og0kt_40 { color: var(--lp-text) !important; }
#app ._toggleDeactivatedButton_48g3d_51:hover { color: var(--lp-text) !important; }
#app ._text_1sdd4_24 { color: var(--lp-text) !important; }
#app ._text_1tqk1_8 { color: var(--lp-text) !important; }
#app ._icon_1thss_6 { color: var(--lp-text-subtlest) !important; }
#app ._icon_170s0_49 { color: var(--lp-text-subtlest) !important; }
/* semantic-ui — UMA regra por grupo de origem: assim um seletor ruim derruba
   so o proprio grupo, nunca o bloco inteiro (ver aviso do -moz-/-ms- acima) */
.yfm { color: var(--lp-text) !important; }
.yfm pre>code .yfm-line-number { color: var(--lp-text) !important; }
.yfm-tab:hover,
.yfm-tab:active { color: var(--lp-text) !important; }
.yfm-tabs-accordion>.yfm-tab:hover { color: var(--lp-text) !important; }
#app .mentions-input__suggestions__item--focused { color: var(--lp-text) !important; }
#app .react-datepicker { color: var(--lp-text) !important; }
#app .react-datepicker__current-month,
#app .react-datepicker-time__header { color: var(--lp-text) !important; }
#app .react-datepicker__day-name,
#app .react-datepicker__day,
#app .react-datepicker__time-name { color: var(--lp-text) !important; }
.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header { color: var(--lp-text) !important; }
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name { color: var(--lp-text) !important; }
.ui.basic.buttons .button,
.ui.basic.button { color: var(--lp-text) !important; }
.ui.basic.buttons .active.button,
.ui.basic.active.button { color: var(--lp-text) !important; }
.ui.divider { color: var(--lp-text) !important; }
.ui.header { color: var(--lp-text) !important; }
.ui.header .sub.header { color: var(--lp-text) !important; }
.ui.input { color: var(--lp-text) !important; }
.ui.input.focus>input::-webkit-input-placeholder,
.ui.input>input:focus::-webkit-input-placeholder { color: var(--lp-text) !important; }
.ui.labels a.label:hover:before,
a.ui.label:hover:before { color: var(--lp-text) !important; }
.ui.list .list>.item .header,
.ui.list>.item .header { color: var(--lp-text) !important; }
.ui.list .list>.item .description,
.ui.list>.item .description { color: var(--lp-text) !important; }
.ui.list .list>a.item:hover .icon,
.ui.list>a.item:hover .icon { color: var(--lp-text) !important; }
ul.ui.list li:before,
.ui.bulleted.list .list>a.item:before,
.ui.bulleted.list>a.item:before { color: var(--lp-text) !important; }
ol.ui.list li:before,
.ui.ordered.list .list>.item:before,
.ui.ordered.list>.item:before { color: var(--lp-text) !important; }
.ui.inverted.dimmer .ui.loader { color: var(--lp-text) !important; }
.ui.form .field>label { color: var(--lp-text) !important; }
.ui.form :focus::-webkit-input-placeholder { color: var(--lp-text) !important; }
.ui.form .fields.error .field label,
.ui.form .field.error label,
.ui.form .fields.error .field .input,
.ui.form .field.error .input { color: var(--lp-text) !important; }
.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
.ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box { color: var(--lp-text) !important; }
.ui.form .fields.error .field .checkbox label:after,
.ui.form .field.error .checkbox label:after,
.ui.form .fields.error .field .checkbox .box:after,
.ui.form .field.error .checkbox .box:after { color: var(--lp-text) !important; }
.ui.form .grouped.fields>label { color: var(--lp-text) !important; }
.ui.form .inline.fields>label,
.ui.form .inline.fields .field>label,
.ui.form .inline.fields .field>p,
.ui.form .inline.field>label,
.ui.form .inline.field>p { color: var(--lp-text) !important; }
.ui.menu .item { color: var(--lp-text) !important; }
.ui.menu .ui.dropdown .menu>.item { color: var(--lp-text) !important; }
.ui.menu .ui.dropdown .menu>.item:hover { color: var(--lp-text) !important; }
.ui.menu .ui.dropdown .menu>.selected.item { color: var(--lp-text) !important; }
.ui.menu .ui.dropdown .menu>.active.item { color: var(--lp-text) !important; }
.ui.link.menu .item:hover,
.ui.menu .dropdown.item:hover,
.ui.menu .link.item:hover,
.ui.menu a.item:hover { color: var(--lp-text) !important; }
.ui.link.menu .item:active,
.ui.menu .link.item:active,
.ui.menu a.item:active { color: var(--lp-text) !important; }
.ui.menu .active.item { color: var(--lp-text) !important; }
.ui.menu .active.item:hover,
.ui.vertical.menu .active.item:hover { color: var(--lp-text) !important; }
.ui.menu .violet.active.item,
.ui.violet.menu .active.item { color: var(--lp-text) !important; }
.ui.comments .comment .author { color: var(--lp-text) !important; }
.ui.comments .comment .text { color: var(--lp-text) !important; }
.ui.comments .comment .actions a.active,
.ui.comments .comment .actions a:hover { color: var(--lp-text) !important; }
.ui.checkbox .box:after,
.ui.checkbox label:after { color: var(--lp-text) !important; }
.ui.checkbox label,
.ui.checkbox+label { color: var(--lp-text) !important; }
.ui.checkbox label:hover,
.ui.checkbox+label:hover { color: var(--lp-text) !important; }
.ui.checkbox .box:active:after,
.ui.checkbox label:active:after { color: var(--lp-text) !important; }
.ui.checkbox input:active~label { color: var(--lp-text) !important; }
.ui.checkbox input:focus~.box:after,
.ui.checkbox input:focus~label:after { color: var(--lp-text) !important; }
.ui.checkbox input:focus~label { color: var(--lp-text) !important; }
.ui.checkbox input:checked~.box:after,
.ui.checkbox input:checked~label:after { color: var(--lp-text) !important; }
.ui.checkbox input:not([type=radio]):indeterminate~.box:after,
.ui.checkbox input:not([type=radio]):indeterminate~label:after { color: var(--lp-text) !important; }
.ui.checkbox input:not([type=radio]):indeterminate:focus~.box:after,
.ui.checkbox input:not([type=radio]):indeterminate:focus~label:after,
.ui.checkbox input:checked:focus~.box:after,
.ui.checkbox input:checked:focus~label:after { color: var(--lp-text) !important; }
.ui.disabled.checkbox .box:after,
.ui.disabled.checkbox label,
.ui.checkbox input[disabled]~.box:after,
.ui.checkbox input[disabled]~label { color: var(--lp-text) !important; }
.ui.dropdown .menu>.item { color: var(--lp-text) !important; }
.ui.dropdown .menu>.header { color: var(--lp-text) !important; }
.ui.dropdown .menu .active.item { color: var(--lp-text) !important; }
.ui.dropdown .menu>.item:hover { color: var(--lp-text) !important; }
.ui.dropdown:not(.button)>input:focus~.default.text,
.ui.default.dropdown:not(.button)>input:focus~.text { color: var(--lp-text) !important; }
.ui.dropdown.selected,
.ui.dropdown .menu .selected.item { color: var(--lp-text) !important; }
.ui.dropdown.error,
.ui.dropdown.error>.text,
.ui.dropdown.error>.default.text { color: var(--lp-text) !important; }
.ui.dropdown.error>.menu>.item { color: var(--lp-text) !important; }
.ui.modal>.close { color: var(--lp-text) !important; }
.ui.inverted.dimmer>.ui.basic.modal>.header { color: var(--lp-text) !important; }
.ui.search>.results .result { color: var(--lp-text) !important; }
.ui.search>.results .result .title { color: var(--lp-text) !important; }
.ui.search>.results>.message .header { color: var(--lp-text) !important; }
.ui.search>.results>.message .description { color: var(--lp-text) !important; }
.ui.search>.results .result.active .title { color: var(--lp-text) !important; }
.ui.search>.results .result.active .description { color: var(--lp-text) !important; }
.ui.modal:not(.basic)>.close { color: var(--lp-text) !important; }
.ui.input { color: var(--lp-text) !important; }
.ui.input>input { color: var(--lp-text) !important; }
.ui.dimmer .ui.loader.inverted { color: var(--lp-text) !important; }
.ui.comments .comment .actions button.active,
.ui.comments .comment .actions button:hover { color: var(--lp-text) !important; }
#app .react-datepicker__day--outside-month { color: var(--lp-text-subtlest) !important; }
.ui.list .list>a.item i.icon,
.ui.list>a.item i.icon { color: var(--lp-text-subtlest) !important; }
.ui.list .list>.disabled.item,
.ui.list>.disabled.item { color: var(--lp-text-subtlest) !important; }
.ui.menu .item.disabled,
.ui.menu .item.disabled:hover { color: var(--lp-text-subtlest) !important; }
.ui.comments .comment .metadata { color: var(--lp-text-subtlest) !important; }
.ui.comments .comment .actions a { color: var(--lp-text-subtlest) !important; }
.ui.dropdown>.text>.description,
.ui.dropdown .menu>.item>.description { color: var(--lp-text-subtlest) !important; }
.ui.dropdown .menu>.message:not(.ui) { color: var(--lp-text-subtlest) !important; }
.ui.search>.results .result .description { color: var(--lp-text-subtlest) !important; }
.ui.comments .comment .actions button { color: var(--lp-text-subtlest) !important; }
/* date picker (Data de vencimento): fundo/estados, alem do texto acima.
   ATENCAO: fundo e cor vem de elementos DIFERENTES (o __day-names pinta a faixa,
   o __day-name so o texto) — por isso a lista abaixo e exaustiva, tirada do bundle:
   todo fundo/borda claro do datepicker. Faltar um = texto claro sobre faixa clara. */
#app .react-datepicker, #app .react-datepicker__header, #app .react-datepicker__header--middle,
#app .react-datepicker__header--bottom, #app .react-datepicker__day-names,
#app .react-datepicker__time-container, #app .react-datepicker__time, #app .react-datepicker__time-box,
#app .react-datepicker__time-container .react-datepicker__time,
#app .react-datepicker__year-dropdown, #app .react-datepicker__month-dropdown,
#app .react-datepicker__today-button, #app .react-datepicker__month-select,
#app .react-datepicker__year-select, #app .react-datepicker__week-number--clickable {
  background: var(--lp-surface-overlay) !important;
  border-color: var(--lp-border) !important;
  color: var(--lp-text) !important;
}
#app .react-datepicker__navigation-icon:before, #app .react-datepicker__navigation:hover *:before { border-color: var(--lp-text-subtle) !important; }
#app .react-datepicker__year-option:hover, #app .react-datepicker__month-option:hover { background: var(--lp-neutral-hover) !important; }
#app .react-datepicker__day:hover, #app .react-datepicker__time-list-item:hover { background: var(--lp-neutral-hover) !important; }
#app .react-datepicker__day--selected, #app .react-datepicker__day--keyboard-selected,
#app .react-datepicker__time-list-item--selected { background: var(--lp-brand) !important; color: #fff !important; }
#app .react-datepicker__day--outside-month, #app .react-datepicker__day--disabled { color: var(--lp-text-subtlest) !important; }

/* ===================== portais do Planka acima do painel =====================
   O painel (#lp-view) é fixed com z-index 99800; os popups/modais nativos
   (semantic) nascem com 1900/1001 e ficavam POR BAIXO (editar quadro, menu do
   usuário, abrir card). Popup > modal: popup aberto de dentro de modal existe. */
.ui.popup { z-index: 100050 !important; }
.ui.page.modals.dimmer, .ui.dimmer.modals { z-index: 100040 !important; }

/* chips de responsáveis (Nova Solicitação multi) */
.lp-of-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.lp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(87, 157, 255, .16); border: 1px solid rgba(87, 157, 255, .38);
  color: inherit; border-radius: 999px; padding: 2px 6px 2px 10px; font-size: 12.5px;
}
.lp-chip-x {
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 3px; opacity: .7;
}
.lp-chip-x:hover { opacity: 1; }

/* seção "De outro setor" dentro do popup nativo de Membros */
#lp-des-sec {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 8px; padding-top: 8px;
  display: flex; flex-direction: column; gap: 4px; max-height: 190px;
}
.lp-des-tit { font-weight: 700; font-size: 12px; opacity: .75; text-transform: uppercase; letter-spacing: .4px; }
.lp-des-lista { overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.lp-des-item {
  text-align: left; background: none; border: 0; color: inherit; cursor: pointer;
  padding: 6px 8px; border-radius: 4px; font-size: 13px;
}
.lp-des-item:hover { background: rgba(255,255,255,.08); }