/* Paleta: todos os pares de texto/fundo abaixo passam de 4.5:1 (texto) e 3:1 (bordas de controles). */
:root{
  color-scheme:light dark;
  --bg:#fbf6ea; --card:#fffdf7; --ink:#3b2f2f; --muted:#6a5b52;
  --line:#e8dcc4;            /* divisórias decorativas */
  --edge:#8f7f6b;            /* bordas de campos e botões */
  --accent:#c93a57; --on-accent:#fff;
  --accent-ink:#b8304d;      /* destaque usado como texto/contorno sobre o fundo */
  --danger:#b3261e; --ok:#1f6b3b;
  /* gráfico de atividade: 8 cores categóricas na ordem fixa (validadas para luz e escuro) + "Outros" */
  --s1:#2a78d6; --s2:#eb6834; --s3:#0a8a86; --s4:#a86f00; --s5:#c9477f; --s6:#008300; --s7:#4a3aa7; --s8:#e34948; --s0:#898781;   /* claro: todas passam de 3:1 no fundo do cartão */
  --yellow:#fff3b0; --pink:#ffd3dc; --blue:#cfe8ff; --green:#d5f2c8; --c:var(--yellow);
  --post-ink:#3b2f2f; --post-muted:#5a4a3a; --post-ph:#5f4e44;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1f1a19; --card:#2a2321; --ink:#f3e9dc; --muted:#b8a99d;
    --line:#3a312e; --edge:#8a7b70;
    --accent-ink:#ff8fa3; --danger:#ff9b8f; --ok:#8fd9a6;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
    --yellow:#e6db9e; --pink:#e6bec6; --blue:#bad1e6; --green:#c0dab4;
  }
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--top-h,calc(6.5rem + env(safe-area-inset-top))) + .75rem)}   /* --top-h: altura real do cabeçalho fixo (app.js) */
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Nunito,system-ui,sans-serif;min-height:100dvh}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
.sr-only,.file-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.file-input{opacity:0;pointer-events:none}

/* cores do papel: uma classe por cor, sem estilo inline */
.c-yellow{--c:var(--yellow)} .c-pink{--c:var(--pink)} .c-blue{--c:var(--blue)} .c-green{--c:var(--green)}

/* telas */
#app,#viewer,.gate{max-width:560px;margin:0 auto;padding:16px 16px 48px}
.gate,#viewer{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:14px}
.gate h1{text-align:center}
.gate .hint{text-align:center}
#login-form{display:flex;flex-direction:column;gap:14px}

h1{font:700 2rem Caveat,cursive;margin:0 0 8px}
h1:focus,h2:focus{outline:none}
h2{font:800 .85rem Nunito,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:24px 0 0}
.top{position:sticky;top:0;background:var(--bg);padding:max(12px,env(safe-area-inset-top)) 0 0;z-index:2}
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 8px}   /* com letra grande (Android) os botões descem para a linha de baixo em vez de cobrir o título */
.topbar h1{margin:0}
.topbar-actions{display:flex;align-items:center;flex:none;gap:2px;margin-left:auto}
.topbar .btn.small{min-height:44px;padding:6px 10px}   /* alvo de toque de 44 px no cabeçalho */
.topbar h1{white-space:nowrap}   /* o coração não cai para a linha de baixo; quem entrou (.who) é que quebra */
@media (max-width:359px){.topbar h1{font-size:1.7rem}}   /* 320 px: o título e os dois botões cabem lado a lado */
.brand{display:flex;align-items:center;flex-wrap:wrap;column-gap:10px;flex:1 1 0;min-width:min-content}   /* a largura mínima é a do título: é ela que decide quando os botões descem */
.who{margin:0;padding:2px 10px;border:2px solid var(--edge);border-radius:999px;font:800 .8rem Nunito,system-ui,sans-serif;color:var(--muted);overflow-wrap:anywhere}
.who:empty{display:none}
.who.admin{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.who .badge{margin-left:6px;border:0;font-family:inherit;cursor:pointer}   /* o número de alertas pendentes fica à vista, mesmo com as abas rolando */
.who.admin .badge{background:#fff;color:#b8304d}
.tabs{position:relative;display:flex;gap:2px;margin-top:4px;overflow-x:auto;scrollbar-width:none;box-shadow:inset 0 -2px 0 var(--line)}
.tabs::-webkit-scrollbar{display:none}
.tabs [role=tab]{flex:1 0 auto;min-height:44px;padding:10px 9px;border:0;background:none;font:800 .9rem Nunito,system-ui,sans-serif;color:var(--muted);border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap}
.tabs [role=tab][aria-selected=true]{color:var(--accent-ink);border-bottom-color:var(--accent-ink)}
.tabs [role=tab]:focus-visible{outline-offset:-3px}
section{padding-top:16px;display:flex;flex-direction:column;gap:14px}

/* formulários */
.row{display:flex;gap:10px}
.row.wrap{flex-wrap:wrap}
.row.wrap>.field{flex:1 1 140px;min-width:0}
.row.between{justify-content:space-between;align-items:center;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:4px;font-weight:800;font-size:.85rem;color:var(--muted);flex:1}
.field input,.field textarea{font:400 1rem/1.4 Nunito,system-ui,sans-serif;color:var(--ink);background:var(--card);border:2px solid var(--edge);border-radius:10px;padding:10px 12px;width:100%}
.field select{font:400 1rem/1.4 Nunito,system-ui,sans-serif;color:var(--ink);background:var(--card);border:2px solid var(--edge);border-radius:10px;padding:10px 12px;width:100%}
.field input[aria-invalid=true]{border-color:var(--danger)}
::placeholder{color:var(--muted);opacity:1}
.check{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;color:var(--ink)}
.check input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--accent)}

.seg{display:flex;gap:2px;border:2px solid var(--edge);border-radius:999px;padding:2px}
.seg button{border:0;background:none;min-height:36px;padding:6px 16px;border-radius:999px;font:800 .85rem Nunito,system-ui,sans-serif;color:var(--muted);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.swatches{display:flex;gap:8px}
.swatches button{width:36px;height:36px;border-radius:50%;border:3px solid var(--edge);background:var(--c);cursor:pointer;padding:0;color:var(--post-ink);font:800 1rem/1 Nunito,system-ui,sans-serif}
.swatches button[aria-pressed=true]{border-color:var(--ink)}
.swatches button[aria-pressed=true]::after{content:'✓'}

/* post-it */
.postit,.note{background:var(--c);color:var(--post-ink);border-radius:4px 4px 18px 4px;box-shadow:0 8px 14px -6px rgba(0,0,0,.3),inset 0 -24px 30px -28px rgba(0,0,0,.25);position:relative;transform:rotate(-1deg)}
.postit.second,.note:nth-child(even){transform:rotate(1.2deg)}
.postit textarea{display:block;width:100%;background:transparent;color:var(--post-ink);border:0;border-radius:inherit;min-height:190px;resize:none;overflow:hidden;font:700 1.7rem/1.25 Caveat,cursive;padding:20px 20px 4px;outline:0}
.postit textarea::placeholder{color:var(--post-ph)}
.postit:focus-within{outline:3px solid var(--accent-ink);outline-offset:3px}
/* o contador fica abaixo do texto (a caixa cresce com ele, ver autosize em app.js) */
.count{display:block;text-align:right;padding:0 14px 8px;color:var(--post-muted);font-weight:700}
.count.full{color:var(--post-ink);text-decoration:underline}
.note{padding:22px 22px 30px;font:700 2rem/1.25 Caveat,cursive;white-space:pre-wrap;word-break:break-word;margin:22px 0}
.note .pg{display:block;font:800 .75rem Nunito,system-ui,sans-serif;letter-spacing:.08em;color:var(--post-muted);margin-bottom:6px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 16px;border-radius:12px;border:2px solid var(--edge);background:var(--card);color:var(--ink);font:800 .95rem Nunito,system-ui,sans-serif;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.danger{color:var(--danger)}
.btn.big{padding:14px 18px;font-size:1.05rem}
.btn.small{min-height:36px;padding:6px 12px;font-size:.85rem;align-self:flex-start}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted);align-self:center;text-decoration:underline}
.btn:active{transform:translateY(1px)}
.btn[aria-disabled=true]{background:var(--card);border:2px dashed var(--edge);color:var(--muted);cursor:progress}   /* ocupado: cores cheias e legíveis (opacity deixava 2,8:1) */
.actions{display:flex;flex-wrap:wrap;gap:8px}
.actions .btn{flex:1;min-width:96px}
.hint{color:var(--muted);font-size:.9rem;margin:0}

/* mensagens de estado (regiões vivas: sempre no DOM, invisíveis quando vazias) */
.msg{margin:0;font-size:.9rem;color:var(--muted)}
.msg:empty{position:absolute}
.msg.error{color:var(--danger);font-weight:700}
.msg.center{text-align:center}

#result{display:flex;flex-direction:column;gap:10px;background:var(--card);border:2px dashed var(--edge);border-radius:14px;padding:12px}
#link{text-overflow:ellipsis}
.result-title{font:700 1.5rem Caveat,cursive;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}

/* guardados */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
#notes-list{grid-template-columns:1fr}
.card-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;margin-top:8px}
.card-actions .btn{flex:1;min-width:0;align-self:stretch}
.card-error{margin-top:8px}
.tile{display:block;width:100%;border:0;padding:14px 16px;text-align:left;cursor:pointer;border-radius:4px 4px 14px 4px;background:var(--c,var(--yellow));color:var(--post-ink);font:700 1.3rem/1.2 Caveat,cursive;min-height:96px;box-shadow:0 5px 10px -5px rgba(0,0,0,.35);overflow:hidden}
.tile-text{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;word-break:break-word}
.tile small{display:block;font:800 .78rem Nunito,system-ui,sans-serif;color:var(--post-muted);margin-top:8px;overflow-wrap:anywhere}
.tile.img{padding:0;background:#000;position:relative;aspect-ratio:1}
.tile.img img{width:100%;height:100%;object-fit:cover;display:block}
.tile.img small{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;margin:0;padding:18px 8px 6px}
.tile.img.empty{background:var(--card);color:var(--muted);display:grid;place-items:center;align-content:center;gap:6px;text-align:center;border:2px dashed var(--edge);font:800 .85rem Nunito,system-ui,sans-serif}
.tile.img.empty small{position:static;background:none;color:var(--muted);padding:0}

/* escanear */
#scan-work{display:flex;flex-direction:column;gap:12px}
canvas{width:100%;height:auto;border-radius:8px;border:2px solid var(--line);background:#fff}

/* diálogos */
dialog{border:0;border-radius:16px;padding:0;max-width:520px;width:calc(100% - 24px);max-height:calc(100dvh - 24px);background:var(--bg);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.dlg-inner{padding:16px;display:flex;flex-direction:column;gap:12px}
.dlg-inner p{margin:0}
.dlg-title{font:700 1.6rem Caveat,cursive;letter-spacing:0;text-transform:none;color:var(--ink);margin:0;overflow-wrap:anywhere}
#dlg-meta{overflow-wrap:anywhere}
dialog img{width:100%;border-radius:8px}
#dlg-body p{white-space:pre-wrap;word-break:break-word}
#dlg-body .note{margin:12px 0}

/* leitura */
.eyebrow{font:700 1.5rem Caveat,cursive;color:var(--muted);text-align:center;margin:0;overflow-wrap:anywhere}
#v-error{font-size:1.05rem}
#viewer .note{animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
#viewer .note:nth-child(2){animation-delay:.25s}
@keyframes pop{from{opacity:0;transform:scale(.8) rotate(-6deg)}}
/* entrar com PIN: um campo numérico só (rotulado) por cima de 4 caixas desenhadas */
#pin-form{display:flex;flex-direction:column;gap:14px}
.pin-field{display:flex;flex-direction:column;align-items:center;gap:8px}
.pin-label{font-weight:800;font-size:.95rem;color:var(--muted)}
.pin-boxes{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:300px;padding:4px}
.pin-cell{display:grid;place-items:center;height:68px;border:2px solid var(--edge);border-radius:14px;background:var(--card);color:var(--ink);font:800 1.6rem/1 Nunito,system-ui,sans-serif}
.pin-boxes.focused .pin-cell.now{border-color:var(--accent-ink);outline:3px solid var(--accent-ink);outline-offset:1px}
.pin-boxes.bad .pin-cell{border-color:var(--danger)}
.pin-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;font-size:16px;cursor:text}
.pin-boxes.shake{animation:shake .4s}
#pin-msg,#login-msg{min-height:2.9em}   /* a mensagem não empurra a tela (que é centralizada) quando aparece */
#pin-msg:empty,#login-msg:empty{position:static}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.gate-switch{margin:0;text-align:center}
.gate-switch .btn.ghost{min-height:44px}

/* fileiras de abas que rolam de lado */
.tabs.more-end,.subtabs.more-end{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.tabs.more-start,.subtabs.more-start{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent)}
.tabs.more-start.more-end,.subtabs.more-start.more-end{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}

/* avisos no celular: convite, painel "Este aparelho" e selo "novo" */
.welcome{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding:12px;background:var(--card);border:2px solid var(--line);border-left:6px solid var(--accent-ink);border-radius:14px}
.welcome p{margin:0}
.welcome .welcome-title{font:700 1.5rem Caveat,cursive;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
.dev-sec{display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--card);border:2px solid var(--line);border-radius:14px}
.dev-sec h3{margin:0;font:800 1rem/1.3 Nunito,system-ui,sans-serif;color:var(--ink)}
.dev-sec h3:focus{outline:none}
.dev-sec p{margin:0}
.dev-sec>.btn,#dev-on>.btn{align-self:stretch}
.dev-sec .check{min-height:44px}   /* a linha inteira é o alvo de toque */
#notes-fresh{min-height:44px;align-self:stretch}   /* "Atualizar" da lista: alvo de toque de 44 px */
.dev-sec .steps{margin:0;padding-left:1.4em}
.dev-sec .steps li+li{margin-top:4px}
#dev-on,#dev-opened-box{display:flex;flex-direction:column;gap:10px}
#dev-opened-box{gap:0}
.tabs [role=tab] .badge{margin-left:5px}
.new-flag{display:inline-block;padding:0 7px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:800 .7rem/1.5 Nunito,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}

/* administração */
.badge{display:inline-block;min-width:1.35em;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:800 .75rem/1.4 Nunito,system-ui,sans-serif;text-align:center}
.adm-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.adm-head h2{margin:0}
.subtabs{position:relative;display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.subtabs [role=tab]{flex:0 0 auto;min-height:40px;padding:6px 14px;border:2px solid var(--edge);border-radius:999px;background:none;font:800 .85rem Nunito,system-ui,sans-serif;color:var(--muted);cursor:pointer;white-space:nowrap}
.subtabs [role=tab]:focus-visible{outline-offset:-3px}   /* dentro da pílula: a fileira rola e cortaria o anel */
.subtabs [role=tab][aria-selected=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.subtabs [role=tab][aria-selected=true] .badge{background:#fff;color:#b8304d}   /* fixos: em cima do fundo de destaque, nos dois temas */
.adm-panel{display:flex;flex-direction:column;gap:12px}
.adm-panel h3{font:800 .85rem Nunito,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:8px 0 0}
.adm-panel h3:focus,.adm-card h4:focus{outline:none}
.adm-card{display:flex;flex-direction:column;gap:10px;margin:0;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px}
form.adm-card h3{margin-top:0}
.adm-card h4{margin:0;font:800 1.05rem/1.25 Nunito,system-ui,sans-serif;color:var(--ink);overflow-wrap:anywhere}
.adm-card h5{margin:0;font:800 .85rem Nunito,system-ui,sans-serif;color:var(--ink)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.card-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.card-head .when{margin-left:auto}
.adm-card p{margin:0}
.meta{color:var(--muted);font-size:.85rem;overflow-wrap:anywhere}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.adm-actions{display:flex;flex-wrap:wrap;gap:10px}
.adm-actions .btn{flex:1 1 auto}
.adm-panel .btn.small{min-height:44px}   /* alvo de toque de 44 px nas ações da administração (apagar fica longe de salvar) */
.tag{display:inline-block;padding:0 8px;border:2px solid currentColor;border-radius:999px;color:var(--muted);font:800 .75rem/1.5 Nunito,system-ui,sans-serif}
.tag.ok{color:var(--ok)}
.tag.bad{color:var(--danger)}
.tag.warn{color:var(--accent-ink)}
.tag.new{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pin-card.off,.ip.off{border-style:dashed}
.pin-card.off h4{color:var(--muted)}
.device-card.blocked{border-color:var(--danger)}
.alert-item{border-left:6px solid var(--accent-ink)}
.alert-msg{font-weight:700;overflow-wrap:anywhere}
.pin-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.pin-line .k{font-weight:800;font-size:.85rem;color:var(--muted)}
.pin-val{min-width:4.5ch;font-size:1.3rem;font-weight:800;letter-spacing:.2em}
.pin-edit{display:flex;flex-direction:column;gap:10px;padding-top:8px}
.edit summary,.chart-table summary,.ua summary{display:flex;align-items:center;min-height:44px;cursor:pointer;color:var(--muted);font-weight:800;font-size:.85rem;padding:6px 0}
.pin-edit .row>.field{min-width:0}
.ips{display:flex;flex-direction:column;gap:8px}
.ip-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:2px solid var(--line);border-radius:10px}
.ip-main{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1 1 170px;min-width:0}
.ip-addr{font-weight:700}
.ua p{margin-top:6px;font-size:.8rem}
.adm-card .row{align-items:flex-end}
.field .row{align-items:stretch}
.field .row .btn.small{align-self:stretch}
.field>small{font-weight:400}
.card-error{margin:0}
.ev{padding:8px 12px;gap:2px}
.ev-top{overflow-wrap:anywhere}
.ev-detail{font-size:.9rem;overflow-wrap:anywhere}
.ev-pin_bad,.ev-pin_ip_denied,.ev-pin_blocked_device,.ev-pin_rate_limited,.ev-pin_paused,.ev-admin_bad{border-left:6px solid var(--danger)}
.ev-pin_new_device{border-left:6px solid var(--accent-ink)}
.ev-push_failed{border-left:6px solid var(--danger)}
.ev-push_gone{border-left:6px solid var(--accent-ink)}

/* atividade */
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}
.stat{display:flex;flex-direction:column;gap:0;padding:10px;background:var(--card);border:2px solid var(--line);border-radius:12px;min-width:0}
.stat strong{font:800 1.7rem/1.1 Nunito,system-ui,sans-serif;color:var(--ink)}
.stat span{font-size:.8rem;color:var(--muted)}
.chart{margin:0}
.chart figcaption{font:800 .95rem Nunito,system-ui,sans-serif;color:var(--ink)}
.chart-wrap{position:relative;min-width:0}
.ch{display:block;width:100%;height:auto;touch-action:pan-y}
.ch-grid{stroke:var(--line);stroke-width:1}
.ch-axis{stroke:var(--edge);stroke-width:1}
.ch-txt{fill:var(--muted);font:700 11px Nunito,system-ui,sans-serif}
.ch-seg{fill:var(--sc)}
.ch-day.on .ch-seg{opacity:.78}
.ch-hit{fill:transparent;pointer-events:all}
.sc0{--sc:var(--s0)} .sc1{--sc:var(--s1)} .sc2{--sc:var(--s2)} .sc3{--sc:var(--s3)} .sc4{--sc:var(--s4)}
.sc5{--sc:var(--s5)} .sc6{--sc:var(--s6)} .sc7{--sc:var(--s7)} .sc8{--sc:var(--s8)}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--sc);flex:none}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.legend-item{display:flex;align-items:center;gap:6px;max-width:100%;font-size:.85rem;color:var(--ink);overflow-wrap:anywhere}
.ch-tip{position:absolute;top:0;left:0;z-index:1;display:flex;flex-direction:column;gap:2px;min-width:120px;max-width:220px;padding:8px 10px;background:var(--card);border:2px solid var(--edge);border-radius:10px;font-size:.8rem;color:var(--ink);pointer-events:none;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.tip-day{font-weight:800}
.tip-row{display:flex;align-items:center;gap:6px;overflow-wrap:anywhere}
.tip-row strong{color:var(--ink)}
.tip-total{color:var(--muted)}
.table-wrap{position:relative;overflow-x:auto;margin-top:8px;border:2px solid var(--line);border-radius:10px;max-height:340px;overflow-y:auto}
.table-wrap table{border-collapse:collapse;width:100%;font-size:.85rem;font-variant-numeric:tabular-nums}
.table-wrap th,.table-wrap td{padding:5px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
.table-wrap thead th:first-child{text-align:left}
.table-wrap thead th{position:sticky;top:0;background:var(--card);color:var(--muted);font-weight:800}
.table-wrap tbody th{text-align:left;font-weight:700;color:var(--ink);background:var(--card)}
.table-wrap td.tot{font-weight:800}
/* Alto contraste (Windows): o navegador troca fundos e cores, então o estado ativo precisa de cores do sistema e o papel de contorno */
@media (forced-colors:active){
  .seg button[aria-pressed=true],.tabs [role=tab][aria-selected=true]{background:Highlight;color:HighlightText;forced-color-adjust:none}
  .postit,.note,.tile{border:1px solid CanvasText}
  .subtabs [role=tab][aria-selected=true]{background:Highlight;color:HighlightText}
  .ch-seg,.sw{forced-color-adjust:none}
  .pin-boxes.focused .pin-cell.now{border-color:Highlight}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}