/* ============================================================
   STARTVEX — Camada de PADRONIZAÇÃO (não-destrutiva)
   Carrega depois de app.css e improvements.css → vence os desvios.
   Implementa as normas do documento "Padronização (Solução)":
     1. Controlos com altura única (--ctrl-*)
     2. Modelo de ícone único + tamanhos canónicos
     3. Etiquetas / chips / tabs coerentes
     4. Escala de raio e espaçamento
     5. Dimensionamento que não distorce
   ============================================================ */

:root{
  /* alturas de controlo */
  --ctrl-sm: 32px;
  --ctrl-md: 40px;
  --ctrl-lg: 48px;
  /* escala de raio */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 100px;
  /* escala de espaçamento (base 4) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
}

/* ============================================================
   NORMA 1 — Controlos: uma família, três alturas
   ============================================================ */

/* Botão base → altura fixa --ctrl-md */
.btn{
  height: var(--ctrl-md);
  padding: 0 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  gap: var(--s-2);
  line-height: 1;
}
.btn svg{ width: 16px; height: 16px; }
.btn-sm{ height: var(--ctrl-sm); padding: 0 12px; border-radius: var(--r-sm); font-size: 13px; }
.btn-lg{ height: var(--ctrl-lg); padding: 0 22px; border-radius: var(--r-lg); font-size: 15px; }

/* Botão só-ícone → sempre quadrado (= altura) */
.btn-icon{ width: var(--ctrl-md); height: var(--ctrl-md); padding: 0; flex: none; }
.btn-sm.btn-icon{ width: var(--ctrl-sm); height: var(--ctrl-sm); }
.btn-lg.btn-icon{ width: var(--ctrl-lg); height: var(--ctrl-lg); }

/* Convergência do 2.º sistema (drawer) para a mesma geometria */
.btn-action-primary,
.btn-action-success,
.btn-action-danger,
.btn-action-ghost{
  height: var(--ctrl-md);
  min-height: var(--ctrl-md);
  padding: 0 16px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  line-height: 1;
}
.btn-action-primary svg,
.btn-action-success svg,
.btn-action-danger svg,
.btn-action-ghost svg{ width: 16px; height: 16px; }

/* Campos de formulário → mesma altura e raio dos botões */
.input,
.select,
select.input{
  height: var(--ctrl-md);
  padding: 0 14px;
  border-radius: var(--r-md);
}
.textarea{
  border-radius: var(--r-md);
  padding: 11px 14px;
  min-height: 88px;
}

/* Wallet da topbar alinhada à escala */
.tb-wallet{ height: var(--ctrl-md); border-radius: var(--r-md); }

/* ============================================================
   NORMA 2 — Ícones: tamanhos canónicos (16 / 18 / 24)
   Traço e modelo já vêm da barra lateral; aqui só travamos
   tamanhos coerentes nos contextos partilhados.
   ============================================================ */
.sb-item svg{ width: 18px; height: 18px; }      /* nav = 18 */
.tb-icon svg{ width: 18px; height: 18px; }       /* ação topbar = 18 */
.btn svg, .btn-sm svg{ width: 16px; height: 16px; } /* em botão = 16 */
.k-ic svg, .kpi .k-ic svg{ width: 20px; height: 20px; } /* KPI destaque */

/* ============================================================
   NORMA 3 — Etiquetas, chips e tabs: raio e altura coerentes
   ============================================================ */

/* Sistemas de "tab" inline → mesma altura e raio */
.st-btn,
.mk-tab,
.rp-tabbtn,
.chat-channels .chx{
  min-height: var(--ctrl-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border-radius: var(--r-sm);
}

/* contentores de tabs com raio coerente */
.st-btns,
.mk-tabs,
.rp-tabs{ border-radius: var(--r-md); }

/* Chips de filtro → pílula uniforme, altura --ctrl-sm */
.chip{
  min-height: var(--ctrl-sm);
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
}

/* ============================================================
   NORMA 4 — Escala: raios coerentes nos contentores
   ============================================================ */
.card,
.kpi,
.sc-card,
.tk-card,
.panel{ border-radius: var(--r-lg); }

.mission-pill,
.exec-card,
.deal{ border-radius: var(--r-md); }

/* Modais → raio --r-xl e largura fluida (não distorce em ecrã estreito) */
.modal-overlay > div,
#task-create-modal > div,
#milestone-create-modal > div{
  border-radius: var(--r-xl) !important;
  width: min(var(--modal-w, 520px), 92vw) !important;
}

/* ============================================================
   NORMA 5 — Dimensionamento que não distorce
   ============================================================ */

/* Avatares e caixas de ícone nunca esticam */
.ava, .av, .sc-av, .deal-av, .tk-av, .loja-svc-av,
.obj-ic, .act-ic, .k-ic{
  aspect-ratio: 1 / 1;
  flex: none;
}
.ava img, .av img, .sc-av img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Grelhas fixas → fluidas (reflow do telemóvel ao ecrã largo) */
@media (max-width: 1080px){
  .kpi-grid{ grid-template-columns: repeat(2, 1fr) !important; }
  .sc-grid{ grid-template-columns: repeat(2, 1fr) !important; }
  .mission-rail{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 720px){
  .kpi-grid,
  .sc-grid,
  .sector-grid{ grid-template-columns: 1fr !important; }
  .mission-rail{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* Tipografia de página fluida entre limites (sem saltos) */
.page-intro h2{ font-size: clamp(20px, 2.6vw, 24px); }

/* Nada transborda horizontalmente */
.content{ overflow-x: hidden; }

/* Tokenomics → tabs idênticas às da Equipa/Capital (sublinhado + dot) */
.tk-tabs.eq-tabs{ display: flex; gap: 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tk-tab.eq-tab{
  min-height: 0; padding: 10px 16px;
  background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--muted); font-size: 13.5px; font-weight: 500;
}
.tk-tab.eq-tab:hover{ color: var(--text); background: none; border-color: transparent; border-bottom-color: transparent; }
.tk-tab.eq-tab.active{ color: var(--text); background: none; border-color: transparent; border-bottom-color: var(--blue); }

.stx-state{
  grid-column:1/-1;
  width:100%;
  min-height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:32px 20px;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--border-2);
  border-radius:var(--radius);
  background:var(--surface);
}
.stx-state-ic{
  min-width:38px;
  height:38px;
  padding:0 10px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:var(--surface-2);
  color:var(--text-2);
  font-family:var(--font-mono);
  font-size:12px;
  text-transform:uppercase;
}
.stx-state-title{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text)}
.stx-state-detail{max-width:420px;font-size:13px;line-height:1.45}
.stx-state--error{border-color:rgba(255,107,107,.32)}
.stx-state--error .stx-state-ic{background:rgba(255,107,107,.12);color:var(--red)}
.stx-state--forbidden{border-color:rgba(245,196,108,.32)}
.stx-state--forbidden .stx-state-ic{background:rgba(245,196,108,.12);color:var(--amber)}
.stx-state--success .stx-state-ic{background:rgba(158,243,209,.12);color:var(--green)}
.stx-skel-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;width:100%}
.stx-skel-card{height:238px;border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:16px;overflow:hidden}
.stx-skel-card span,.stx-skel-card b,.stx-skel-card i,.stx-skel-card em{
  display:block;
  border-radius:9px;
  background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));
  background-size:220% 100%;
  animation:stxShimmer 1.1s linear infinite;
}
.stx-skel-card span{height:78px;margin:-16px -16px 24px}
.stx-skel-card b{width:52%;height:18px;margin-bottom:12px}
.stx-skel-card i{width:82%;height:12px;margin-bottom:20px}
.stx-skel-card em{width:100%;height:42px}
@keyframes stxShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ============================================================
   Tipos de task por complexidade → 4 cartões lado a lado
   (mais eficiente que linhas empilhadas)
   ============================================================ */
.vesting-tiers{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
  align-items: start;
}
.vesting-tiers .vt-row{
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  background: var(--surface);
}
.vesting-tiers .vt-header{
  flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 10px 12px; cursor: default;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.vesting-tiers .vt-summary{ font-size: 10.5px; color: var(--muted); }
.vesting-tiers .vt-fields{
  display: flex !important; flex-direction: column;
  grid-template-columns: 1fr !important;
  gap: 9px; padding: 11px 12px; flex: 1;
}
/* dentro do cartão estreito: hints repetitivos escondidos, controlos à largura toda */
.vesting-tiers .vt-fields .hint{ display: none; }
.vesting-tiers .vt-fields .field{ display: flex; flex-direction: column; gap: 5px; }
.vesting-tiers .vt-fields .input{ width: 100%; height: 36px; }
.vesting-tiers .vt-fields label{ font-size: 11px; margin: 0; color: var(--muted); text-transform: none; }

@media (max-width: 920px){
  .vesting-tiers{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px){
  .vesting-tiers{ grid-template-columns: 1fr; }
}

/* ============================================================
   Componente info-tip (ⓘ) — progressive disclosure
   O essencial fica visível; o detalhe abre a pedido (hover/foco).
   ============================================================ */
.info-tip{
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: none; margin-left: 6px; padding: 0;
  border: none; background: none; cursor: help; color: var(--muted);
  position: relative; vertical-align: middle; border-radius: 50%;
}
.info-tip:hover, .info-tip:focus-visible{ color: var(--blue); outline: none; }
.info-tip > svg{ display: block; width: 14px; height: 14px; }
.info-tip .info-pop{
  position: fixed; left: 0; top: 0; right: auto; bottom: auto; transform: none;
  width: max-content; max-width: 260px; z-index: 200;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--border-2); border-radius: 10px;
  padding: 9px 11px; font-size: 12px; line-height: 1.5; font-weight: 400; text-align: left;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  white-space: normal;
}
.info-tip .info-pop b{ color: var(--text); font-weight: 600; }
.info-tip .info-pop::after{
  content: ""; position: absolute; top: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--surface-3);
}
.info-tip .info-pop.info-pop--below::after{
  top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--surface-3);
}
.info-tip:hover .info-pop,
.info-tip:focus-visible .info-pop,
.info-tip:focus-within .info-pop{
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}

/* ============================================================
   SIDEBAR RECOLHIDA — itens e rodapé como quadrados de 44px
   (substitui os "semi-retângulos" de largura total)
   ============================================================ */
.app.sb-collapsed .sb-section{
  padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.app.sb-collapsed .sb-item{
  width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 12px;
  justify-content: center;
}
.app.sb-collapsed .sb-item svg{ width: 20px; height: 20px; }

/* switcher de empresa → logo num quadrado 44px centrado */
.app.sb-collapsed .sb-switcher{ display: flex; justify-content: center; padding: 6px 0; }
.app.sb-collapsed .sb-sw-trigger{
  width: 44px; height: 44px; padding: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface-2);
  transition: border-color var(--dur, .15s) ease, background var(--dur, .15s) ease;
}
.app.sb-collapsed .sb-sw-trigger:hover{ border-color: var(--border-2); background: var(--surface-3); }
.app.sb-collapsed .sb-sw-trigger .sc-row{ gap: 0; }
.app.sb-collapsed .sb-sw-trigger .sc-logo{ width: 30px; height: 30px; border-radius: 8px; }

/* utilizador + logout → dois quadrados 44px empilhados e centrados */
.app.sb-collapsed .sb-user-row{
  flex-direction: column; align-items: center; gap: 6px;
  margin: 8px 0 12px; padding: 10px 0 0; border-top: 1px solid var(--border);
}
.app.sb-collapsed .sb-user{
  width: 44px; height: 44px; flex: none; padding: 0; border-radius: 12px; justify-content: center;
  transition: background var(--dur, .15s) ease;
}
.app.sb-collapsed .sb-user:hover{ background: rgba(255,255,255,0.05); }
.app.sb-collapsed .sb-user .ava{ width: 30px; height: 30px; }
.app.sb-collapsed .sb-logout{
  width: 44px; height: 44px; min-height: 0; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2);
}
.app.sb-collapsed .sb-logout:hover{ background: rgba(255,95,95,.10); border-color: rgba(255,95,95,.35); }

/* botão VEX AI → quadrado 44px (já não é semi-retângulo) */
.app.sb-collapsed .sb-pilot{
  width: 44px; height: 44px; padding: 0; margin: 0 auto 10px;
  border-radius: 12px; justify-content: center; gap: 0;
}
.app.sb-collapsed .sb-pilot .sb-pilot-icon{ width: 20px; height: 20px; }
.app.sb-collapsed .sb-pilot .sb-pilot-icon svg{ width: 20px; height: 20px; }

/* Quadro de Execução → sem moldura nas colunas, só os cards */
.exec-col{
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   Owner — botão de administração (rodapé da sidebar) + modal
   ============================================================ */
/* Owner — ícone vermelho na topbar (à esquerda da carteira) */
.tb-icon.tb-owner{ background:#FF3B3B; border-color:#FF3B3B; color:#0A0A0A; }
.tb-icon.tb-owner:hover{ background:#FF5252; border-color:#FF5252; color:#0A0A0A; }
.tb-icon.tb-owner svg{ stroke:#0A0A0A; }
.sb-owner{
  display:flex;align-items:center;gap:10px;
  width:calc(100% - 24px);margin:0 12px 8px;
  padding:9px 12px;font-size:14px;
  background:#FF3B3B;
  border:1px solid #FF3B3B;border-radius:10px;
  color:#0A0A0A;cursor:pointer;text-align:left;
  transition:background .18s,border-color .18s,transform .12s;
}
.sb-owner:hover{ background:#FF5252;border-color:#FF5252;transform:translateY(-1px); }
.sb-owner-ic{ display:flex;align-items:center;flex-shrink:0;color:#0A0A0A; }
.sb-owner-label{ flex:1;font-size:14px;font-weight:700;color:#0A0A0A; }
/* recolhida → quadrado 44px */
.app.sb-collapsed .sb-owner{ width:44px;height:44px;padding:0;margin:0 auto 8px;justify-content:center;gap:0;border-radius:12px; }
.app.sb-collapsed .sb-owner-label{ display:none; }

/* modal owner */
.owner-card{
  position: relative; width: min(460px, 92vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 24px;
}
.owner-x{
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--muted); cursor: pointer; border-radius: 8px;
}
.owner-x:hover{ background: var(--surface-2); color: var(--text); }
.owner-head{ display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding-right: 32px; }
.owner-head-ic{
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,107,107,.12); color: var(--red); border: 1px solid rgba(255,107,107,.3);
}
.owner-title{ font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 17px; }
.owner-sub{ font-size: 12.5px; color: var(--muted); margin-top: 2px; }
#owner-open-panel{ margin-bottom: 18px; }
.owner-auth-form{ display: flex; flex-direction: column; gap: 13px; margin-bottom: 16px; }
.owner-field{ display: block; }
.owner-field > span{ display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.owner-field .input{ width: 100%; }
.owner-err{ font-size: 12px; color: var(--red); min-height: 14px; }
.owner-note{ font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.owner-note strong{ color: var(--text-2); }

/* Ícones das opções de pagamento (Nova Task) → cor visível */
.tc-pay-ic{ color: var(--muted); display: inline-flex; }
.tc-pay-opt.active .tc-pay-ic{ color: var(--blue); }
.tc-pay-ic svg{ display: block; }

/* ============================================================
   Objetivos (mission-pill) — botão gerir + drawer de gestão
   ============================================================ */
.mission-pill .mp-gear{
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 7px;
  display: none; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.mission-pill:hover .mp-gear,
.mission-pill.active .mp-gear{ display: inline-flex; }
.mission-pill .mp-gear:hover{ color: var(--text); border-color: var(--border-2); background: var(--surface-3); }
.mission-pill .mp-gear svg{ display: block; }
/* deixar espaço ao número do objetivo quando a engrenagem aparece */
.mission-pill:hover .mp-tag,
.mission-pill.active .mp-tag{ opacity: 0; }

/* drawer de gestão de objetivo */
#ms-drawer .msd-seclabel{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between;
}
#ms-drawer .msd-field{ display: block; margin-bottom: 12px; }
#ms-drawer .msd-field > span{ display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
#ms-drawer .msd-field .input{ width: 100%; }
#ms-drawer textarea.input{ height: auto; padding: 10px 12px; resize: vertical; font-family: var(--font-body); }
#ms-drawer .msd-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#ms-drawer .msd-err{ font-size: 12px; color: var(--red); min-height: 14px; margin-bottom: 8px; }
#ms-drawer .msd-head-meta{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
#ms-drawer .msd-pill{
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: 100px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 11px; color: var(--text-2);
}
#ms-drawer .msd-task{
  display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border);
}
#ms-drawer .msd-task:last-child{ border-bottom: none; }
#ms-drawer .msd-task-dot{ width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
#ms-drawer .msd-task-dot.prog-l{ background: var(--blue); }
#ms-drawer .msd-task-dot.review-l{ background: var(--amber); }
#ms-drawer .msd-task-dot.valid-l{ background: #a99bff; }
#ms-drawer .msd-task-dot.done-l{ background: var(--green); }
#ms-drawer .msd-task-name{ flex: 1; font-size: 13.5px; color: var(--text); min-width: 0; }
#ms-drawer .msd-task-state{ font-size: 11px; color: var(--muted); flex: none; }
#ms-drawer .msd-empty{ font-size: 13px; color: var(--muted); padding: 8px 0; }
#ms-drawer .msd-danger{ border-top: 1px solid var(--border); }
#ms-drawer .msd-danger-txt{ font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }

/* Marcadores inline que substituem emojis (dot de cor + ícone de traço) */
.stx-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; vertical-align:middle; margin:0 6px 2px 0; }
.stx-i{ display:inline-block; width:13px; height:13px; vertical-align:-2px; margin-right:5px; }

/* Botões de fechar / ícone: centrar o SVG (substituiu glifos de texto) */
.scd-close, .dr-close, .share-sheet-close, .modal-close, .cu-clear,
.sc-fav-btn, .scd-follow{
  display:inline-flex; align-items:center; justify-content:center;
}
.valid-stamp .ck svg{ display:block; }

/* ============================================================
   Owner — overlay full-screen com a página de administração
   (incorporada na plataforma, sem sair para novo separador)
   ============================================================ */
.owner-frame-overlay{
  position: fixed; inset: 0; z-index: 980;
  background: var(--bg, #060708);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease;
}
.owner-frame-overlay.open{ opacity: 1; visibility: visible; pointer-events: auto; }
.owner-frame-back{
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px 0 12px;
  background: rgba(20,23,28,.82); backdrop-filter: blur(8px);
  border: 1px solid var(--border-2); border-radius: 100px;
  color: var(--text); font-family: var(--font-body); font-size: 13px; font-weight: 600;
  cursor: pointer; box-shadow: 0 6px 20px -8px rgba(0,0,0,.6);
  transition: background .15s, border-color .15s;
}
.owner-frame-back:hover{ background: var(--surface-3); border-color: var(--muted); }
.owner-frame-back svg{ color: var(--blue); }
.owner-frame{ flex: 1; width: 100%; height: 100%; border: none; background: var(--bg, #060708); }

/* ============================================================
   TEMA CLARO (Light) + AUTOMÁTICO
   Sobrepõe os tokens de cor; todos os componentes usam var(--*),
   por isso flipam só com a troca de tokens.
   ============================================================ */
:root[data-theme="light"]{
  --bg:        #F6F7F9;
  --surface:   #FFFFFF;
  --surface-2: #F1F3F6;
  --surface-3: #E7EAEF;
  --text:      #14171C;
  --text-2:    #3C4049;
  --muted:     #6B6E76;
  --blue:      #2A6FDB;
  --green:     #1F8A5B;
  --amber:     #B5780E;
  --red:       #D64545;
  --violet:    #6C5CE7;
  --border:    rgba(13,16,19,0.10);
  --border-2:  rgba(13,16,19,0.18);
}
/* Brilho de fundo mais subtil no claro */
:root[data-theme="light"] body{
  background-image: radial-gradient(1100px 560px at 82% -8%, rgba(42,111,219,.06), transparent 60%);
}
/* Sombras e overlays demasiado escuros no claro → suavizar */
:root[data-theme="light"] .topbar{ background: rgba(246,247,249,.85); }

/* AUTOMÁTICO — segue o sistema; light só quando o SO está em claro */
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    --bg:        #F6F7F9;
    --surface:   #FFFFFF;
    --surface-2: #F1F3F6;
    --surface-3: #E7EAEF;
    --text:      #14171C;
    --text-2:    #3C4049;
    --muted:     #6B6E76;
    --blue:      #2A6FDB;
    --green:     #1F8A5B;
    --amber:     #B5780E;
    --red:       #D64545;
    --violet:    #6C5CE7;
    --border:    rgba(13,16,19,0.10);
    --border-2:  rgba(13,16,19,0.18);
  }
  :root[data-theme="auto"] body{
    background-image: radial-gradient(1100px 560px at 82% -8%, rgba(42,111,219,.06), transparent 60%);
  }
  :root[data-theme="auto"] .topbar{ background: rgba(246,247,249,.85); }
}

/* Transição suave ao alternar tema */
:root, body, .sidebar, .topbar, .card, .panel{ transition: background-color .25s ease, border-color .25s ease, color .25s ease; }

/* Forçar fundo/cor no tema claro (vence o body base por especificidade) */
:root[data-theme="light"]{ background-color: #F6F7F9; }
:root[data-theme="light"] body{ background-color: var(--bg); color: var(--text); }
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{ background-color: #F6F7F9; }
  :root[data-theme="auto"] body{ background-color: var(--bg); color: var(--text); }
}

/* Botão de tema na topbar */
.tb-theme{
  width: 38px; height: 38px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--muted); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.tb-theme:hover{ color: var(--text); border-color: var(--border-2); }
.tb-theme svg{ width: 18px; height: 18px; }
.tb-theme .ic-light, .tb-theme .ic-auto{ display: none; }
:root[data-theme="light"] .tb-theme .ic-dark{ display: none; }
:root[data-theme="light"] .tb-theme .ic-light{ display: block; }
:root[data-theme="auto"] .tb-theme .ic-dark{ display: none; }
:root[data-theme="auto"] .tb-theme .ic-auto{ display: block; }