@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');
/* Notebook 2026 — Apple refined, no bootstrap look */
:root{
  --bg:#f5f5f7;
  --bg2:#fbfbfd;
  --card:#ffffff;
  --input-bg:#e8e8ed;
  --surface-active:#ececee;
  --text:#1d1d1f;
  --text2:#515154;
  --muted:#86868b;
  --muted2:#6e6e73;
  --border:rgba(0,0,0,0.08);
  --border2:rgba(0,0,0,0.06);
  --border3:rgba(0,0,0,0.04);
  --border-strong:rgba(0,0,0,0.12);
  --scrollbar-thumb:rgba(0,0,0,0.12);
  --checkbox-border:#d2d2d7;
  --accent:#0071e3;
  --accent-hover:#0077ed;
  --accent-soft:#e8f2ff;
  --accent-soft2:#f0f7ff;
  --success:#34c759;
  --success-hover:#2db552;
  --success-soft:#e8f8ec;
  --danger:#ff3b30;
  --danger-hover:#e0342a;
  --danger-soft:#fdeceb;
  --warning:#f59e0b;
  --warning-soft:#fffbeb;
  --warning-text:#92400e;
  --warning-border:#fcd34d;
  --done-bg:#f0fdf4;
  --done-border:#bbf7d0;
  --delete-bg:#fef2f2;
  --delete-border:#fecaca;
  --hero-glow:#e8f2ff;
  --overlay-bg:rgba(245,245,247,0.75);
  --sheet-head-bg:rgba(255,255,255,0.92);
  --nav-bg:rgba(251,251,253,0.88);
  --burger-bg:rgba(251,251,253,0.98);
  --burger-foot-bg:rgba(255,255,255,0.6);
  --drawer-backdrop:rgba(0,0,0,0.18);
  --btn-primary-hover:#2c2c2e;
  --shadow-btn-hover:rgba(0,0,0,0.12);
  --select-caret:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 256 256' fill='%2386868b' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  /* --brand/--on-brand nunca são redefinidos nos blocos escuros abaixo, de propósito —
     são elementos de marca (logo, avatares, badges "partilhada") com fundo escuro fixo
     em qualquer tema, não uma superfície de UI que deva inverter. */
  --brand:#1d1d1f;
  --on-brand:#fff;
  --radius:16px;
  --radius-lg:20px;
  --radius-xl:24px;
  --radius-pill:999px;
  --shadow:0 1px 3px rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.04);
  --shadow-lg:0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-hover:0 8px 32px rgba(0,0,0,0.08);
  --nav-h:52px;
  --sidebar-w:300px;
  --max-w:1280px;
  --btn-h:36px;
  --btn-h-sm:30px;
  color-scheme:light;
}
/* Tema escuro — segue o SO quando o utilizador nunca escolheu nada explicitamente
   (:not([data-theme="light"]) garante que uma escolha explícita de "claro" vence o
   media query), e fica sempre disponível como escolha explícita via [data-theme="dark"]
   independentemente do que o SO diz. Nunca definir uma cor só aqui — a versão clara em
   :root acima é sempre a base; isto só substitui. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000;
    --bg2:#121214;
    --card:#1c1c1e;
    --input-bg:rgba(255,255,255,0.08);
    --surface-active:rgba(255,255,255,0.12);
    --text:#f5f5f7;
    --text2:#c7c7cc;
    --muted:#98989d;
    --muted2:#8e8e93;
    --border:rgba(255,255,255,0.12);
    --border2:rgba(255,255,255,0.09);
    --border3:rgba(255,255,255,0.06);
    --border-strong:rgba(255,255,255,0.18);
    --scrollbar-thumb:rgba(255,255,255,0.18);
    --checkbox-border:rgba(255,255,255,0.28);
    --accent:#409cff;
    --accent-hover:#64b1ff;
    --accent-soft:rgba(64,156,255,0.16);
    --accent-soft2:rgba(64,156,255,0.10);
    --success:#32d74b;
    --success-hover:#28c93f;
    --success-soft:rgba(50,215,75,0.14);
    --danger:#ff453a;
    --danger-hover:#ff6961;
    --danger-soft:rgba(255,69,58,0.14);
    --warning:#ffb340;
    --warning-soft:rgba(245,158,11,0.16);
    --warning-text:#ffcf7a;
    --warning-border:rgba(245,158,11,0.4);
    --done-bg:rgba(50,215,75,0.12);
    --done-border:rgba(50,215,75,0.4);
    --delete-bg:rgba(255,69,58,0.14);
    --delete-border:rgba(255,69,58,0.4);
    --hero-glow:rgba(10,60,120,0.35);
    --overlay-bg:rgba(0,0,0,0.65);
    --sheet-head-bg:rgba(28,28,30,0.85);
    --nav-bg:rgba(10,10,11,0.8);
    --burger-bg:rgba(5,5,6,0.97);
    --burger-foot-bg:rgba(255,255,255,0.04);
    --drawer-backdrop:rgba(0,0,0,0.55);
    --btn-primary-hover:#d1d1d6;
    --shadow-btn-hover:rgba(0,0,0,0.5);
    --select-caret:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 256 256' fill='%23c7c7cc' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
    --shadow:0 1px 3px rgba(0,0,0,0.4), 0 4px 20px rgba(0,0,0,0.3);
    --shadow-lg:0 12px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
    --shadow-hover:0 8px 32px rgba(0,0,0,0.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000;
  --bg2:#121214;
  --card:#1c1c1e;
  --input-bg:rgba(255,255,255,0.08);
  --surface-active:rgba(255,255,255,0.12);
  --text:#f5f5f7;
  --text2:#c7c7cc;
  --muted:#98989d;
  --muted2:#8e8e93;
  --border:rgba(255,255,255,0.12);
  --border2:rgba(255,255,255,0.09);
  --border3:rgba(255,255,255,0.06);
  --border-strong:rgba(255,255,255,0.18);
  --scrollbar-thumb:rgba(255,255,255,0.18);
  --checkbox-border:rgba(255,255,255,0.28);
  --accent:#409cff;
  --accent-hover:#64b1ff;
  --accent-soft:rgba(64,156,255,0.16);
  --accent-soft2:rgba(64,156,255,0.10);
  --success:#32d74b;
  --success-hover:#28c93f;
  --success-soft:rgba(50,215,75,0.14);
  --danger:#ff453a;
  --danger-hover:#ff6961;
  --danger-soft:rgba(255,69,58,0.14);
  --warning:#ffb340;
  --warning-soft:rgba(245,158,11,0.16);
  --warning-text:#ffcf7a;
  --warning-border:rgba(245,158,11,0.4);
  --done-bg:rgba(50,215,75,0.12);
  --done-border:rgba(50,215,75,0.4);
  --delete-bg:rgba(255,69,58,0.14);
  --delete-border:rgba(255,69,58,0.4);
  --hero-glow:rgba(10,60,120,0.35);
  --overlay-bg:rgba(0,0,0,0.65);
  --sheet-head-bg:rgba(28,28,30,0.85);
  --nav-bg:rgba(10,10,11,0.8);
  --burger-bg:rgba(5,5,6,0.97);
  --burger-foot-bg:rgba(255,255,255,0.04);
  --drawer-backdrop:rgba(0,0,0,0.55);
  --btn-primary-hover:#d1d1d6;
  --shadow-btn-hover:rgba(0,0,0,0.5);
  --select-caret:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 256 256' fill='%23c7c7cc' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  --shadow:0 1px 3px rgba(0,0,0,0.4), 0 4px 20px rgba(0,0,0,0.3);
  --shadow-lg:0 12px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
  --shadow-hover:0 8px 32px rgba(0,0,0,0.4);
  color-scheme:dark;
}
*{box-sizing:border-box}
/* Indicador de foco global — antes só existia em .nb-input/.nb-select; botões,
   links e toda a navegação por teclado ficavam sem qualquer sinal visual de
   onde o foco está (0-audit.md UX-08, WCAG 2.4.7). :focus-visible em vez de
   :focus — só aparece para navegação por teclado, não em cada clique de rato. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
/* Respeita quem pede menos movimento no sistema operativo — nenhuma das
   transições/animações da app tem alternativa hoje (0-audit.md UX-08) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}
html{scroll-behavior:smooth; scrollbar-gutter:stable}
/* Aplicada por setTheme() só durante o instante da troca de tema (removida no
   frame seguinte) — sem isto, qualquer elemento com uma `transition` a mexer em
   background/color/border-color (ex.: .nb-note, já existente antes do dark
   mode, para a animação de "concluída") pode ficar PRESO na cor do tema
   anterior: confirmado a sério em teste com Chrome real — quando o valor muda
   por causa de uma custom property herdada de um antepassado (aqui, --bg/--text
   no :root) em vez de um estado do próprio elemento (:hover, .active, etc.), o
   motor de transições do Chrome nalguns casos nunca detecta a mudança e a
   transição simplesmente não anima nem assume o valor novo — fica parado no
   valor antigo para sempre, não só por um instante. Desligar todas as
   transições só durante a troca em si evita a classe inteira do bug de uma
   vez, em vez de caçar rule a rule quais têm este risco. */
html.theme-swapping, html.theme-swapping *{ transition:none !important; }
body{
  margin:0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv02","cv03","cv08";
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  font-size:14px;
  letter-spacing:-0.01em;
  transition:background .2s ease, color .2s ease;
}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit}
img{max-width:100%}

/* Nav — ultra clean, slightly shorter */
.nb-nav{
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  background:var(--nav-bg);
  border-bottom:1px solid var(--border3);
}
.nb-nav-inner{
  max-width:var(--max-w); margin:0 auto;
  height:100%; display:flex; align-items:center; gap:14px;
  padding:0 20px;
}
.nb-logo{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:16px; letter-spacing:-0.03em; color:var(--text);
}
.nb-logo-mark{
  width:28px; height:28px; border-radius:8px;
  background:var(--brand); color:var(--on-brand); display:grid; place-items:center;
}
.nb-nav-spacer{flex:1}
.nb-search{position:relative; display:flex; align-items:center;}
.nb-search input{
  width:260px; height:40px; padding:0 14px 0 36px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  background:var(--input-bg);
  color:var(--text);
  font-size:13.5px; font-weight:500; outline:none; transition:.18s;
}
.nb-search input::placeholder{color:var(--muted)}
.nb-search input:focus{background:var(--card); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.nb-search svg{position:absolute; left:12px; color:var(--muted); pointer-events:none}
.nb-actions{display:flex; align-items:center; gap:8px}
.nb-btn{
  height:var(--btn-h); padding:0 16px; border-radius:var(--radius-pill);
  border:1px solid transparent; font-size:13.5px; font-weight:600; letter-spacing:-0.01em;
  cursor:pointer; transition:.18s; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  white-space:nowrap; line-height:1; user-select:none;
}
.nb-btn svg{flex-shrink:0; display:block}
.nb-logo-mark svg{display:block}
.nb-btn-primary{background:var(--text); color:var(--bg); border-color:var(--text)}
.nb-btn-primary:hover{background:var(--btn-primary-hover); transform:none; box-shadow:0 2px 8px var(--shadow-btn-hover)}
.nb-btn-primary:active{transform:scale(0.98)}
.nb-btn-ghost{background:var(--card); border-color:var(--border); color:var(--text)}
.nb-btn-ghost:hover{background:var(--bg); border-color:var(--border)}
.nb-btn-ghost:active{background:var(--surface-active)}
.nb-btn-danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.nb-btn-danger:hover{background:var(--danger-hover); border-color:var(--danger-hover); box-shadow:0 2px 8px rgba(255,59,48,0.25)}
.nb-btn-danger:active{transform:scale(0.98)}
.nb-btn-subtle{background:var(--accent-soft2); color:var(--accent); border-color:transparent}
.nb-btn-subtle:hover{background:var(--accent-soft)}
.nb-btn-icon{width:var(--btn-h); padding:0;}
.nb-btn-sm{height:var(--btn-h-sm); padding:0 12px; font-size:13px; border-radius:var(--radius-pill)}
.nb-user{font-size:13px; color:var(--muted2); display:flex; align-items:center; gap:8px; padding-left:8px; border-left:1px solid var(--border2); margin-left:4px; transition:.15s; border-radius:999px; padding-right:6px}
.nb-user:hover{color:var(--text); background:var(--bg);}

.nb-avatar{width:28px; height:28px; border-radius:50%; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font-size:12px; font-weight:700;}
#burgerUserLink:hover{opacity:.75}

/* Layout — more whitespace, no bootstrap */
.nb-layout{
  max-width:var(--max-w); margin:0 auto;
  display:grid; grid-template-columns:var(--sidebar-w) 1fr;
  gap:28px; padding:28px 20px;
}
.nb-layout--single{
  grid-template-columns:1fr;
  max-width:860px;
}
.nb-sidebar{
  position:sticky; top:calc(var(--nav-h) + 20px);
  align-self:start;
  display:flex; flex-direction:column; gap:16px;
  max-height:calc(100dvh - var(--nav-h) - 40px);
  overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; padding-right:2px;
  overscroll-behavior:contain;
}
.nb-sidebar::-webkit-scrollbar{width:4px}
.nb-sidebar::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb); border-radius:999px}
.nb-card{
  background:var(--card); border:1px solid var(--border3);
  border-radius:var(--radius-lg); box-shadow:none;
  overflow:visible;
}
.nb-filters-bar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.nb-filters-bar .nb-search{flex:1; min-width:220px}
.nb-filters-bar .nb-search input{height:40px}
.nb-filters-bar .nb-select{width:190px; height:40px}
.nb-filters-bar .nb-btn{height:40px}
.nb-filters-row{display:flex; gap:10px; width:100%}
/* Linha de topo (pesquisa + botão Filtros) — search sempre 100% visível,
   o resto (dropdowns + tags) fica atrás do toggle logo abaixo */
.nb-filters-toprow{display:flex; gap:10px; width:100%; align-items:stretch}
.nb-filter-toggle{display:flex; align-items:center; gap:8px; flex:none; white-space:nowrap}
.nb-filter-toggle-icon{
  width:12px; height:8px; flex-shrink:0;
  background-image:var(--select-caret); background-repeat:no-repeat; background-position:center;
  transition:.18s;
}
.nb-filter-toggle.open .nb-filter-toggle-icon{transform:rotate(180deg)}
/* Painel colapsável — mesmo padrão de fade+slide do .nb-custom-select-options
   (nbSelectIn), só com max-height para animar altura variável (nº de tags) */
.nb-filters-panel{
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .28s ease, opacity .2s ease, margin-top .28s ease;
}
.nb-filters-panel.open{max-height:1000px; opacity:1; margin-top:12px}
@media(max-width:640px){
  .nb-filters-bar{flex-direction:column; align-items:stretch}
  .nb-filters-toprow{flex-direction:column}
  .nb-filters-bar .nb-select, .nb-filters-bar .nb-search, .nb-filters-bar .nb-custom-select{width:100% !important; min-width:0 !important; flex:1 1 100% !important}
  .nb-filters-bar .nb-search input{width:100% !important; min-width:0 !important}
  .nb-filters-bar .nb-btn{width:100%; justify-content:center}
  .nb-custom-select{width:100% !important}
}
.nb-card-pad{padding:18px}
.nb-card-title{
  font-size:11px; font-weight:650; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--muted2); margin:0 0 14px;
}
.nb-field{margin-bottom:14px}
.nb-field:last-child{margin-bottom:0}
/* Indicador de força de password — barra de 5 segmentos + checklist do que falta
   (window.initPasswordStrength(), common.js). Escondido até à 1ª tecla. */
.nb-pw-strength{max-height:0; opacity:0; overflow:hidden; transition:max-height .22s ease, opacity .18s ease, margin-top .22s ease}
.nb-pw-strength.visible{max-height:60px; opacity:1; margin-top:8px}
.nb-pw-bar{display:flex; gap:4px}
.nb-pw-bar span{flex:1; height:4px; border-radius:999px; background:var(--border3); transition:background .15s}
.nb-pw-bar span.on.weak{background:var(--danger)}
.nb-pw-bar span.on.fair{background:var(--warning)}
.nb-pw-bar span.on.good{background:var(--warning)}
.nb-pw-bar span.on.strong{background:var(--success)}
.nb-pw-hint{margin-top:6px; font-size:11.5px}
.nb-input, .nb-select{
  width:100%; height:40px; padding:0 12px;
  border-radius:12px; border:1px solid transparent;
  background:var(--bg); color:var(--text); font-size:13.5px; font-weight:500; outline:none; transition:.18s;
}
.nb-input::placeholder{color:var(--muted)}
.nb-input:focus, .nb-select:focus{background:var(--card); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.nb-input-sm{height:34px; font-size:13px}
/* Select Apple — seta custom e options com esquema */
.nb-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:var(--select-caret);
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; cursor:pointer;
}
.nb-select option{
  background:var(--card); color:var(--text); padding:10px 12px; font-size:13.5px; font-weight:500;
}
.nb-select optgroup{ font-weight:600; color:var(--muted2) }
/* Custom Apple select — substitui lista nativa rustic */
.nb-custom-select{position:relative; display:block; width:100%; flex:1 1 auto}
.nb-custom-select-trigger{
  width:100%; height:40px; padding:0 32px 0 12px; border-radius:12px; border:1px solid transparent;
  background:var(--bg); font-size:13.5px; font-weight:500; color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:8px;
  cursor:pointer; transition:.18s; user-select:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nb-custom-select-trigger::after{
  content:""; width:12px; height:8px; flex-shrink:0;
  background-image:var(--select-caret);
  background-repeat:no-repeat; background-position:center; transition:.18s;
}
.nb-custom-select.open .nb-custom-select-trigger{background:var(--card); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.nb-custom-select.open .nb-custom-select-trigger::after{transform:rotate(180deg)}
.nb-custom-select-options{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--card); border:1px solid var(--border3); border-radius:12px;
  box-shadow:var(--shadow-lg); max-height:220px; overflow:auto; z-index:60; display:none; padding:6px;
}
.nb-custom-select.open .nb-custom-select-options{display:block; animation:nbSelectIn .18s ease}
@keyframes nbSelectIn{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.nb-custom-select-option{padding:10px 12px; border-radius:8px; cursor:pointer; font-size:13.5px; font-weight:500; color:var(--text); transition:.12s; display:flex; align-items:center; justify-content:space-between}
.nb-custom-select-option:hover{background:var(--accent-soft2); color:var(--accent)}
.nb-custom-select-option.active{background:var(--text); color:var(--bg)}
.nb-custom-select-option.active:hover{background:var(--text)}
@media(max-width:640px){
  .nb-custom-select-trigger{height:42px; font-size:14px}
}
.nb-chip-row{display:flex; flex-wrap:wrap; gap:7px}
.nb-chip{
  padding:6px 12px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--card);
  font-size:12.5px; font-weight:500; cursor:pointer; transition:.15s; color:var(--text2);
}
.nb-chip.active{background:var(--text); color:var(--bg); border-color:var(--text)}
.nb-chip:hover{border-color:var(--border-strong)}
.nb-stat{font-size:12.5px; color:var(--muted); line-height:1.4}
.nb-manage-list{display:flex; flex-direction:column; gap:6px}
.nb-manage-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border-radius:10px; background:var(--bg); transition:.15s;
}
.nb-manage-item:hover{background:var(--surface-active)}
.nb-manage-name{font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nb-manage-count{font-size:11px; color:var(--muted); background:var(--card); padding:2px 7px; border-radius:999px; border:1px solid var(--border2)}
.nb-manage-actions{display:flex; gap:4px}
.nb-icon-btn{
  width:26px; height:26px; border-radius:999px; border:1px solid transparent;
  background:var(--card); display:grid; place-items:center; cursor:pointer; transition:.15s;
  position:relative;
}
.nb-icon-btn:hover{background:var(--text); color:var(--bg); border-color:var(--text)}
.nb-icon-btn svg{display:block}
/* alvo de toque real ~44px em ecrãs tácteis, sem aumentar o botão visualmente
   (26px fica apertado em cartões densos) — WCAG 2.5.5 / Apple HIG
   (0-audit.md R4-23) */
@media (pointer:coarse){
  .nb-icon-btn::before{
    content:""; position:absolute; top:50%; left:50%;
    width:44px; height:44px; transform:translate(-50%,-50%);
  }
}

/* Main */
.nb-main{ min-width:0 }
.nb-toolbar{
  display:flex; align-items:flex-end; gap:12px; margin-bottom:20px;
}
.nb-toolbar h1{
  font-size:32px; font-weight:700; letter-spacing:-0.04em; line-height:1; margin:0;
}
.nb-toolbar-sub{font-size:13px; color:var(--muted); margin-top:4px; font-weight:450}
.nb-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
@media(min-width:1100px){ .nb-grid{grid-template-columns:repeat(3,1fr)} }
.nb-note{
  background:var(--card); border:1px solid var(--border3);
  border-radius:var(--radius-lg); padding:16px;
  cursor:pointer; transition:.18s; display:flex; flex-direction:column; min-height:148px;
}
.nb-note{ transition: background .28s ease, border-color .28s ease, opacity .28s ease, transform .28s ease; }
.nb-note:hover{border-color:var(--border-strong); box-shadow:var(--shadow); transform:translateY(-1px)}
.nb-note--done{ background:var(--done-bg) !important; border-color:var(--done-border) !important; }
.nb-note--done .nb-note-top .nb-concluida-btn{ opacity:1 !important; visibility:visible !important; display:grid !important; }
.nb-concluida-btn, .nb-note-top button{
  transition:.18s cubic-bezier(.2,.8,.2,1);
}
.nb-concluida-btn:hover, .nb-note-top button:hover{
  transform:scale(1.08);
  box-shadow:0 2px 8px rgba(52,199,89,0.25);
  border-color:var(--success) !important;
}
.nb-concluida-btn:active, .nb-note-top button:active{ transform:scale(0.94); }
.nb-concluida-btn--done, .nb-note-top button[style*="var(--success)"]{
  background:var(--success) !important; border-color:var(--success) !important; color:#fff !important;
}
.nb-concluida-btn--done:hover, .nb-note-top button[style*="var(--success)"]:hover{
  background:var(--success-hover) !important; border-color:var(--success-hover) !important;
  transform:scale(1.08) rotate(4deg);
  box-shadow:0 4px 12px rgba(52,199,89,0.3);
}
.nb-concluida-btn:not(.nb-concluida-btn--done):hover, .nb-note-top button:not([style*="var(--success)"]):hover{
  background:var(--card) !important; border-color:var(--success) !important; color:var(--success) !important;
  transform:scale(1.08);
}
.nb-note--done .nb-concluida-btn, .nb-note--done .nb-note-top button{ opacity:1 !important; visibility:visible !important; display:grid !important; }
.nb-note--exiting{ animation:nbNoteExit .38s cubic-bezier(.32,.72,0,1) forwards; overflow:hidden; }
.nb-note--deleting{ animation:nbNoteDelete .36s cubic-bezier(.32,.72,0,1) forwards; overflow:hidden; }
@keyframes nbNoteExit{
  0%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(-6px) scale(0.98); max-height:0; margin:0; padding-top:0; padding-bottom:0; border-width:0; }
}
@keyframes nbNoteDelete{
  0%{ opacity:1; transform:translateY(0) scale(1); background:var(--card); }
  30%{ background:var(--delete-bg); border-color:var(--delete-border); }
  100%{ opacity:0; transform:translateY(-6px) scale(0.98); max-height:0; margin:0; padding-top:0; padding-bottom:0; border-width:0; }
}
.nb-note-top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px}
.nb-badge{
  font-size:10.5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--radius-pill);
  background:var(--bg); color:var(--muted2); border:1px solid transparent;
}
.nb-date{font-size:11.5px; color:var(--muted); font-weight:450}
.nb-note h3{font-size:14.5px; font-weight:650; letter-spacing:-0.02em; margin:0 0 6px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.nb-note p{font-size:13px; color:var(--muted2); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; line-height:1.5}
.nb-tags{margin-top:12px; display:flex; flex-wrap:wrap; gap:6px}
.nb-tag{font-size:11px; font-weight:550; padding:4px 8px; border-radius:var(--radius-pill); background:var(--accent-soft2); color:var(--accent)}
.nb-note mark{background:var(--accent-soft); color:var(--accent); padding:1px 4px; border-radius:4px; font-weight:600}
.nb-cor-dot{transition:.15s}
.nb-cor-dot:hover{transform:scale(1.08)}
.nb-cor-dot.is-selected{box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--text); transform:scale(1.08)}
.nb-cor-dot.is-none.is-selected{border-color:var(--text) !important; background:var(--bg) !important}
.nb-note--cor{border-left:4px solid var(--note-cor) !important}
.nb-sheet--cor .nb-sheet-head{border-top:4px solid var(--note-cor)}
.nb-sheet--cor{border-top:4px solid var(--note-cor)}
.nb-empty{text-align:center; padding:56px 20px; color:var(--muted);}
.nb-empty-ill{width:64px; height:64px; border-radius:16px; background:var(--card); border:1px solid var(--border3); display:grid; place-items:center; margin:0 auto 16px;}

/* Editor sheet — slimmer CTAs, no top toggle */
.nb-overlay{
  position:fixed; inset:0; z-index:900;
  background:var(--overlay-bg);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:32px 16px; overflow:auto;
}
.nb-overlay.hidden{display:none}
.nb-sheet{
  width:min(860px, 100%); background:var(--card);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  border:1px solid var(--border3); overflow:hidden;
  animation:nbSheetIn .32s cubic-bezier(.2,.8,.2,1);
}
@keyframes nbSheetIn{from{transform:translateY(12px) scale(.985); opacity:0} to{transform:none; opacity:1}}
.nb-sheet-head{
  padding:14px 18px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border3); position:sticky; top:0; background:var(--sheet-head-bg); backdrop-filter:blur(12px); z-index:2;
}
.nb-sheet-head h3{margin:0; font-size:15px; font-weight:650; letter-spacing:-0.02em}
.nb-sheet-body{padding:18px}
.nb-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px}
.nb-form-grid .full{grid-column:1/-1}
#editorContainer{border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--card)}
.toastui-editor-defaultUI{border:none !important}
.nb-view-content{font-size:14.5px; line-height:1.65; color:var(--text)}
.nb-view-content h1{font-size:22px; font-weight:700; letter-spacing:-0.03em; margin:18px 0 10px}
.nb-view-content h2{font-size:18px; font-weight:650; margin:16px 0 8px}
.nb-view-content h3{font-size:15px; font-weight:650; margin:14px 0 8px}
.nb-view-content p{margin:10px 0}
.nb-view-content a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.nb-view-content code{font-family:'Geist Mono','JetBrains Mono',ui-monospace,monospace; font-size:12.5px; background:var(--bg); padding:2px 6px; border-radius:6px; border:1px solid var(--border3)}
/* Bloco de código estilo "terminal" — fica sempre escuro com texto claro,
   em qualquer tema da app (var(--brand)/var(--on-brand) nunca invertem,
   ver definição no :root); não é uma superfície de UI a temear. */
.nb-view-content pre{background:var(--brand); color:var(--on-brand); padding:14px; border-radius:12px; overflow:auto; font-size:12.5px; line-height:1.6; margin:12px 0}
.nb-view-content pre code{background:transparent; border:none; padding:0; color:inherit}
.nb-view-content blockquote{border-left:3px solid var(--border); margin:12px 0; padding:8px 14px; background:var(--bg2); border-radius:0 10px 10px 0; color:var(--text2)}
.nb-view-content ul, .nb-view-content ol{margin:10px 0; padding-left:22px}
.nb-view-content li{margin:4px 0}
/* tarefas de notas gravadas em HTML (Toast UI Editor) — sem <input>, o toggle
   em view.js liga/desliga a classe --done e o atributo data-task-checked
   (0-audit.md DAT-07) */
.nb-view-content li.nb-task-item{list-style:none; display:flex; gap:8px; align-items:flex-start; cursor:pointer}
.nb-view-content li.nb-task-item::before{
  content:''; flex-shrink:0; width:18px; height:18px; margin-top:3px; border-radius:5px;
  border:2px solid var(--checkbox-border); background:var(--card) center/12px no-repeat; transition:.15s;
}
.nb-view-content li.nb-task-item:hover::before{border-color:var(--success)}
.nb-view-content li.nb-task-item--done::before{
  background-color:var(--success); border-color:var(--success);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='white'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
}
.nb-view-content li.nb-task-item--done p{opacity:.55; text-decoration:line-through}
.nb-view-content hr{border:none; border-top:1px solid var(--border2); margin:18px 0}
.nb-view-content img{max-width:100%; border-radius:12px; border:1px solid var(--border3)}
.nb-sheet-foot{
  display:flex; gap:8px; align-items:center; justify-content:space-between;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--border3);
}
.nb-sheet-foot-left{display:flex; gap:8px; align-items:center}
.nb-sheet-foot-right{display:flex; gap:8px}
/* Modal de confirmação partilhado (window.confirmDialog em common.js) — substitui
   o confirm() nativo do browser em toda a app (0-audit.md UX-11c) */
.nb-confirm-overlay{z-index:1100}
.nb-confirm-sheet{width:min(360px, 100%); text-align:center}
.nb-confirm-sheet .nb-sheet-body{padding:24px 22px 20px}
.nb-confirm-icon{
  width:44px; height:44px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center;
  background:var(--danger-soft); color:var(--danger);
}
.nb-confirm-icon.is-neutral{background:var(--accent-soft2); color:var(--accent)}
.nb-confirm-message{margin:0; font-size:14.5px; line-height:1.5; color:var(--text)}
.nb-confirm-actions{display:flex; gap:8px; margin-top:20px}
.nb-confirm-actions .nb-btn{flex:1; justify-content:center; height:42px}

/* Login */
.nb-login-card{
  width:min(400px, 100%); background:var(--card);
  border:1px solid var(--border3); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg); padding:28px;
}
.nb-login-card h2{margin:0 0 4px; font-size:22px; font-weight:700; letter-spacing:-0.04em}
.nb-login-card p{margin:0 0 20px; color:var(--muted); font-size:13.5px; line-height:1.4}

/* Mobile — fix scroll */
.nb-mobile-btn{display:none}
.nb-drawer-backdrop{display:none}
.nb-sidebar-close{display:none}
@media(max-width:900px){
  .nb-layout{grid-template-columns:1fr; padding:16px; gap:16px}
  .nb-sidebar{
    position:fixed; inset:0 auto 0 0; width:86%; max-width:340px;
    z-index:45; background:var(--bg2); padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    border-right:1px solid var(--border2);
    transform:translateX(-100%); transition:.32s cubic-bezier(.32,.72,0,1);
    top:0; max-height:none; height:100dvh; height:100svh;
  }
  .nb-sidebar.open{transform:none; box-shadow:var(--shadow-lg)}
  .nb-sidebar-close{display:inline-flex; margin-bottom:12px}
  .nb-drawer-backdrop{position:fixed; inset:0; z-index:44; background:var(--drawer-backdrop); backdrop-filter:blur(6px);}
  .nb-drawer-backdrop.hidden{display:none}
  .nb-drawer-backdrop:not(.hidden){display:block}
  .nb-mobile-btn{display:inline-flex}
  .nb-search input{width:180px}
  .nb-grid{grid-template-columns:1fr}
  .nb-form-grid{grid-template-columns:1fr}
  .nb-overlay{padding:12px; align-items:flex-start}
  .nb-sheet{border-radius:20px}
  .nb-toolbar h1{font-size:26px}
  .nb-search{flex:1}
}
@media(max-width:520px){
  .nb-nav-inner{padding:0 12px; gap:10px}
  .nb-nav-inner .nb-search{display:none}
  .lug-map-wrap .nb-search{display:flex !important}
  .nb-actions{gap:6px}
  .nb-user span:not(.nb-avatar){display:none}
}

/* Burger full-screen moderno — compacto e acima do mapa */
.nb-burger-btn{width:36px; height:36px; border-radius:999px; border:1px solid var(--border); background:var(--card); display:grid; place-items:center; cursor:pointer; transition:.18s}
/* Feature Família — convites por responder */
.nb-badge-dot{position:absolute; top:-2px; right:-2px; width:10px; height:10px; border-radius:50%; background:var(--danger); border:2px solid var(--bg)}
.nb-burger-link .nb-badge-dot{position:static; display:inline-block; margin-left:6px; border:none; vertical-align:middle}
.nb-burger-btn:hover{background:var(--bg)}
.nb-burger-overlay{
  position:fixed; inset:0; z-index:1000;
  background:var(--burger-bg); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  display:flex; flex-direction:column;
  transform:translateY(-6%); opacity:0; pointer-events:none; transition:.28s cubic-bezier(.32,.72,0,1);
}
.nb-burger-overlay.open{ transform:none; opacity:1; pointer-events:auto }
.nb-burger-head{ height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid var(--border3); flex-shrink:0 }
.nb-burger-links{ flex:1; display:flex; flex-direction:column; gap:8px; padding:16px 20px; max-width:420px; margin:0 auto; width:100%; justify-content:flex-start; overflow:auto; align-content:flex-start }
.nb-burger-link{
  display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-radius:14px;
  background:var(--card); border:1px solid var(--border3); color:var(--text); text-decoration:none;
  font-weight:600; font-size:15px; letter-spacing:-0.02em; transition:.15s; min-height:48px;
}
.nb-burger-link:hover{ border-color:var(--text); transform:translateY(-1px); box-shadow:var(--shadow) }
.nb-burger-link.active{ background:var(--text); color:var(--bg); border-color:var(--text) }
.nb-burger-link small{ color:var(--muted); font-weight:500; font-size:12px }
.nb-burger-foot{ padding:16px 20px; border-top:1px solid var(--border3); display:flex; justify-content:space-between; align-items:center; background:var(--burger-foot-bg); gap:12px; flex-wrap:wrap }
.nb-burger-link span{ text-transform:capitalize }
.nb-burger-link small{ text-transform:capitalize }
/* Toggle de tema — botão ícone no rodapé do burger, ao lado do select de idioma */
.nb-theme-toggle{
  width:36px; height:36px; border-radius:999px; border:1px solid var(--border);
  background:var(--card); color:var(--text); display:grid; place-items:center; cursor:pointer;
  flex-shrink:0; transition:.15s;
}
.nb-theme-toggle:hover{background:var(--bg)}
.nb-theme-toggle svg{display:block}

/* Mobile tune — Calendário, Grafo, Lugares, Editor nativos */
@media(max-width:640px){
  .fc .fc-toolbar{ flex-direction:column; gap:8px; align-items:stretch }
  .fc .fc-toolbar-chunk{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap }
  .fc .fc-toolbar-title{ font-size:16px; text-align:center }
  .fc .fc-button{ padding:6px 10px; font-size:12px; min-height:36px }
  #grafo{ height:52vh !important; min-height:300px }
  #calendar{ padding:8px !important }
  .lug-layout{ gap:12px; padding:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom)) }
  #map{ height:36vh !important; min-height:260px }
  .lug-places{ max-height:40vh }
  .shop-top-bar{ gap:6px }
  .shop-check, .shop-del{ width:36px; height:36px }
  .toastui-editor-defaultUI .te-toolbar{ flex-wrap:wrap; height:auto !important }
  .toastui-editor-defaultUI .te-toolbar div{ flex-wrap:wrap }
  /* Modals — garantem que cabe no ecrã 320px */
  .nb-overlay{ padding:12px; align-items:flex-start; padding-bottom:calc(12px + env(safe-area-inset-bottom)) }
  .nb-sheet{ width:100%; max-width:100%; max-height:calc(100dvh - 24px); max-height:calc(100svh - 24px); display:flex; flex-direction:column; overflow:hidden }
  .nb-sheet-body{ overflow:auto; -webkit-overflow-scrolling:touch; max-height:calc(100dvh - 120px); max-height:calc(100svh - 120px) }
  #editorContainer{ height:380px !important; min-height:300px; max-height:52vh }
  .nb-sheet-foot{ flex-wrap:wrap; gap:8px }
  .nb-sheet-foot .nb-btn{ min-height:40px; flex:1 1 auto }
  /* Filtros — altura do pesquisar como referência (40px desktop / 42px mobile) */
  .nb-filters-bar{ gap:10px; align-items:stretch; flex-direction:column }
  .nb-filters-row{ flex-direction:column }
  .nb-filters-bar .nb-search input, .nb-filters-bar .nb-select, .nb-filters-bar .nb-btn, .nb-filters-bar .nb-custom-select{ height:42px; font-size:14px; width:100% !important }
  .nb-filters-row .nb-custom-select{ flex:1 1 auto !important; width:100% !important }
  .nb-input, .nb-select{ height:42px; font-size:14px }
  .nb-select{ background-position:right 14px center }
  .nb-search input{ height:42px }
  /* Chips — mantêm 32px+ (já maior que mínimo), confortáveis */
  .nb-chip{ min-height:36px; padding:8px 14px; font-size:13px }
  .nb-chip-row{ gap:8px }
  /* Gerir/Histórico grids já 1 col, garantir padding */
  .gerir-toolbar .nb-search, .hist-toolbar .nb-search{ min-width:0 !important; flex:1 1 100% }
  .hist-grid, .nb-grid{ gap:12px }
  .gerir-toolbar .nb-select, .hist-toolbar .nb-select{ height:42px }
}
/* Leaflet mobile */
.leaflet-control-zoom a{ width:32px !important; height:32px !important; line-height:32px !important }

/* Toast */
.nb-toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--text); color:var(--bg); padding:10px 16px; border-radius:999px;
  font-size:13px; font-weight:550; box-shadow:var(--shadow-lg);
  /* Tem de ficar acima de tudo, incluindo .nb-burger-overlay (1000) e .nb-overlay
     (900, login/editor/view/palette) — um erro de login, por exemplo, mostra o
     toast COM o overlay de login ainda aberto, e com z-index:80 (abaixo de tudo)
     o toast ficava desenhado por baixo do vidro fosco do overlay, invisível ou
     quase (achado real reportado pelo user: login falhado sem feedback nenhum). */
  z-index:1100;
  animation:nbToastIn .28s ease;
}
@keyframes nbToastIn{from{transform:translate(-50%,6px); opacity:0} to{transform:translate(-50%,0); opacity:1}}
/* Share pills + @mention — Apple intuitive */
.nb-share-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px 4px 4px; border-radius:999px;
  background:var(--card); border:1px solid var(--border);
  font-size:12px; font-weight:550; color:var(--text);
}
.nb-share-pill .nb-avatar{width:20px; height:20px; font-size:9px}
.nb-share-pill button{width:18px; height:18px; border-radius:50%; border:none; background:var(--bg); display:grid; place-items:center; cursor:pointer}
.nb-share-pill button:hover{background:var(--brand); color:var(--on-brand)}
.nb-share-av-stack{display:flex; align-items:center}
.nb-share-av-stack .nb-avatar{width:20px; height:20px; font-size:9px; border:2px solid var(--card); margin-left:-6px}
.nb-share-av-stack .nb-avatar:first-child{margin-left:0}
.nb-mention{color:var(--accent); background:var(--accent-soft2); padding:1px 6px; border-radius:999px; font-weight:600; font-size:12px}
#shareSuggest .nb-share-opt{padding:8px 10px; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:8px; font-size:13px}
#shareSuggest .nb-share-opt:hover{background:var(--accent-soft2); color:var(--accent)}
#shareSuggest .nb-share-opt.active{background:var(--text); color:var(--bg)}
/* Picker fechado à família (feature Família) — chips clicáveis em vez de um
   input+dropdown de autocomplete (window.initFamilyPicker em common.js) */
.nb-family-picker{display:flex; flex-wrap:wrap; gap:6px}
.nb-family-picker-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px 4px 4px; border-radius:999px;
  background:var(--card); border:1px solid var(--border); cursor:pointer;
  font-size:12px; font-weight:550; color:var(--text);
}
.nb-family-picker-chip:hover{border-color:var(--accent); color:var(--accent)}
.nb-family-picker-empty{font-size:12px}
.nb-family-picker-empty a{color:var(--accent); font-weight:600; text-decoration:none}
.nb-family-picker-empty a:hover{text-decoration:underline}
.hidden{display:none !important}

/* ===== Widgets de terceiros — tema escuro =====
   Repetido em dois blocos (media query + atributo explícito) pela mesma razão das
   variáveis no :root acima: o media query cobre quem nunca escolheu nada (segue o
   SO, reage sozinho se o SO mudar, sem JS nenhum), o atributo cobre uma escolha
   explícita de "escuro" mesmo com o SO em claro.
   Leaflet: só a camada de tiles (.leaflet-tile-pane) leva o filtro invert — é a
   única com imagens rasterizadas OSM sempre claras. .leaflet-marker-pane/
   .leaflet-popup-pane/.leaflet-control são PANES IRMÃOS de .leaflet-tile-pane no
   DOM do Leaflet (não descendentes), portanto NUNCA herdam esse filter — não
   precisam de nenhum "contra-filtro" (uma versão anterior deste ficheiro tinha
   um, por engano: como os popups/controlos já são estilizados directamente com
   var(--card)/var(--text) mais abaixo, um filtro extra ali estaria a inverter
   PELA SEGUNDA VEZ cores que já estavam correctas, estragando-as). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .leaflet-tile-pane{ filter:invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9); }
  :root:not([data-theme="light"]) .fc{
    --fc-page-bg-color:var(--card); --fc-neutral-bg-color:var(--bg2);
    --fc-list-event-hover-bg-color:var(--accent-soft2); --fc-border-color:var(--border3);
  }
}
[data-theme="dark"] .leaflet-tile-pane{ filter:invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9); }
[data-theme="dark"] .fc{
  --fc-page-bg-color:var(--card); --fc-neutral-bg-color:var(--bg2);
  --fc-list-event-hover-bg-color:var(--accent-soft2); --fc-border-color:var(--border3);
}
/* Popups/controlos do Leaflet usam fundo branco nativo por omissão — isto
   troca pelas nossas variáveis para acompanharem o tema, sem depender de
   nenhum filtro (ver nota acima). */
.leaflet-popup-content-wrapper, .leaflet-popup-tip{ background:var(--card) !important; color:var(--text) !important; }
.leaflet-control-zoom a, .leaflet-bar a{ background:var(--card) !important; color:var(--text) !important; border-color:var(--border) !important; }