:root{
  --bg:#0d1117;--panel:#161b22;--panel2:#1c2230;--line:#2a3441;--txt:#e6edf3;--muted:#8b98a5;
  --green:#3fb950;--red:#f85149;--accent:#2f81f7;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.5 -apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:900px;margin:0 auto;padding:18px 20px 60px}
header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:4px}
h1{font-size:20px;margin:0;font-weight:650}
.controls{display:flex;gap:10px;align-items:center}
.who{color:var(--muted);font-size:13px}
.sub{color:var(--muted);font-size:12px;margin:0 0 18px}
.who{display:flex;align-items:center;gap:8px}
.rolechip{font-size:10px;color:var(--muted);border:1px solid var(--line);padding:1px 7px;border-radius:20px;white-space:nowrap}
.rolechip.su{border-color:#6f5f1f;color:#d29922}

/* abas */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:8px 0 16px}
.tabs a{color:var(--muted);padding:10px 16px;font-size:14px;font-weight:500;border-bottom:2px solid transparent}
.tabs a.on{color:var(--txt);border-bottom-color:var(--accent);font-weight:650}
.tabs a:hover{color:var(--txt)}

/* cartoes / admin */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.card h3{margin:0 0 12px;font-size:14px;font-weight:600}
.card h3 small{color:var(--muted);font-weight:400;font-size:11px}
.muted{color:var(--muted)}
.empty{color:var(--muted);font-size:13px;padding:10px 0}
.flash{border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:12px}
.flash.ok{background:#122a1a;border:1px solid #1f6f43;color:#7ee2a8}
.flash.err{background:#2a1414;border:1px solid #6f1f1f;color:#ff9a94}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.inline{margin:0}
.row input[type=text],select{background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:7px 10px;font-size:13px}
.row input[type=text]{min-width:260px}
.row input[type=text]:focus,select:focus{outline:none;border-color:var(--accent)}
.btn.danger{border-color:#6f1f1f;color:#ff9a94}
.btn.danger:hover{background:#2a1414;border-color:var(--red)}
.found{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.found .fu{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}

/* tabela */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--muted);font-weight:500;font-size:11px;text-transform:uppercase;
  letter-spacing:.03em;padding:6px 10px 6px 0;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}

/* sub-abas */
.subtabs{display:flex;gap:6px;margin:-6px 0 16px;flex-wrap:wrap}
.subtabs a{color:var(--muted);font-size:12.5px;padding:5px 11px;border:1px solid var(--line);border-radius:20px}
.subtabs a.on{background:var(--panel2);color:var(--txt);border-color:var(--accent);font-weight:600}
.subtabs a:hover{color:var(--txt)}

/* formularios */
.card.edit{border-color:var(--accent)}
.frow{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.frow.top{align-items:flex-start}
.frow > label:first-child{color:var(--muted);font-size:12px;min-width:90px;flex:none}
.frow input[type=text]{background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:7px 10px;font-size:13px}
.frow input[type=text]:focus{outline:none;border-color:var(--accent)}
.checks{display:flex;flex-direction:column;gap:7px}
.checks.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px}
.ck{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
.ck input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.note{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:6px;padding:9px 11px;font-size:12px;color:var(--muted);margin-top:12px}
.none{color:#5a6470;font-style:italic}

/* ordenacao */
.tbl td.ord{width:26px;padding-right:6px}
.ordf{display:block;line-height:0}
.ordb{background:none;border:0;color:var(--muted);cursor:pointer;font-size:9px;padding:1px 3px;line-height:1}
.ordb:hover:not(:disabled){color:var(--accent)}
.ordb:disabled{opacity:.25;cursor:default}
.tbl tr.off{opacity:.5}
.tbl td.url{font-size:11px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* roles */
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.rolebox{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px}
.rolebox .rt{font-size:13px;font-weight:650;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rolebox .rd{font-size:11px;margin:3px 0 8px}
.rolebox ul{margin:0;padding-left:16px}
.rolebox li{font-size:12px;color:var(--muted);margin:3px 0}
.btn{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:7px 11px;font-size:13px;cursor:pointer;display:inline-block}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}

/* grelha de links */
.links{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.links{grid-template-columns:1fr}}
.link{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);
      border-radius:12px;padding:16px;color:var(--txt);transition:border-color .12s,transform .12s,background .12s}
.link:hover{border-color:var(--accent);background:var(--panel2);transform:translateY(-2px)}
.link .ico{font-size:26px;line-height:1;flex:none}
.link .body{flex:1;min-width:0}
.link .title{font-size:15px;font-weight:650;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.link .tag{font-size:10px;color:var(--muted);font-weight:400;border:1px solid var(--line);padding:1px 7px;border-radius:20px}
.link .desc{color:var(--muted);font-size:12px;margin-top:3px}
.link .arrow{color:var(--muted);font-size:16px;flex:none}
.link:hover .arrow{color:var(--accent)}

/* login */
.login{max-width:320px;margin:14vh auto;text-align:center}
.login h1{font-size:20px}
.login .hint{color:var(--muted);font-size:12px;margin:6px 0 0}
.login form{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.login input{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:14px}
.login input:focus{outline:none;border-color:var(--accent)}
.login .err{color:var(--red);font-size:13px}
.login .dev{margin-top:14px;font-size:12px;color:var(--muted);border-style:dashed}
.login .dev:hover{border-color:var(--accent);color:var(--txt)}

/* ============ Registo de Ponto ============ */
.tc-state{text-align:center;border-width:2px}
.tc-state.tc-out{border-color:var(--line)}
.tc-state.tc-working{border-color:var(--green)}
.tc-state.tc-on_break{border-color:#d29922}
.tc-big{font-size:22px;font-weight:700;margin-bottom:4px}
.tc-clock{font-size:14px;color:var(--muted);font-weight:400}
.tc-sub{color:var(--muted);font-size:13px;margin-bottom:14px}
.tc-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tc-actions form{margin:0}
.tc-btn{font-size:15px;padding:11px 18px}
.tcpill{font-size:11px;border:1px solid var(--line);border-radius:20px;padding:1px 9px;white-space:nowrap}
.tcpill.work{border-color:#1f6f43;color:#7ee2a8}
.tcpill.brk{border-color:#6f5f1f;color:#d29922}
.tcpill.trn{border-color:#3a2b6f;color:#b39ef5}
.tcpill.off{border-color:#3a4351;color:#8b98a5}
.tcpill.lv{border-color:#1f5a6f;color:#7ecfe2}
/* estado de formação no cartão da pessoa */
.tc-state.tc-training{border-color:#3a2b6f}
/* aviso "ainda estás aí?" */
.tc-modal{position:fixed;inset:0;background:rgba(4,7,12,.72);display:flex;align-items:center;
  justify-content:center;z-index:60;padding:20px}
.tc-modal .box{background:var(--panel);border:1px solid #6f5f1f;border-radius:14px;padding:22px 24px;
  max-width:420px;text-align:center}
.tc-modal .box h3{margin:0 0 8px;font-size:19px}
.tc-modal .box p{color:var(--muted);font-size:13px;margin:0 0 16px}
.tc-modal .cd{font-variant-numeric:tabular-nums;font-weight:700;color:#d29922}
/* painel Hoje */
.tcrow-done td,.tcrow-not_in td,.tcrow-leave td{opacity:.72}
.balance.pos{color:#7ee2a8}.balance.neg{color:#f85149}
/* perfil fechado: um botão que abre para editar */
.tc-prof>summary{cursor:pointer;user-select:none;font-size:15px;font-weight:650;list-style:none}
.tc-prof>summary::-webkit-details-marker{display:none}
.tc-prof>summary::before{content:'▸ ';color:var(--muted);font-size:11px}
.tc-prof[open]>summary::before{content:'▾ '}
/* calendário do ano */
.cal-year{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-top:12px}
.cal-m .cal-h{font-size:12px;font-weight:650;color:var(--muted);margin-bottom:5px}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-g i{font-style:normal;font-size:10px;line-height:19px;height:19px;text-align:center;
  border-radius:4px;color:var(--txt)}
.cal-g i.cal-dow{color:var(--muted);font-size:9px;line-height:14px;height:14px}
.cal-g i.we{color:var(--muted);opacity:.55}
.cal-g i.hol{background:#3a2b6f;color:#d6c9ff;font-weight:650;opacity:1}
.cal-g i.lv{background:#1f5a6f;color:#c8f0fa;font-weight:650;opacity:1}
.cal-g i.hol.lv{background:linear-gradient(135deg,#3a2b6f 50%,#1f5a6f 50%)}
.cal-g i.bd{background:#6f2b5a;color:#f5c9e6;font-weight:650;opacity:1}
.cal-g i.today{outline:1.5px solid var(--accent);outline-offset:-1px}
.cal-leg{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:12px}
.cal-leg i{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.cal-leg i.hol{background:#3a2b6f}.cal-leg i.lv{background:#1f5a6f}.cal-leg i.bd{background:#6f2b5a}
.cal-leg i.we{background:var(--panel2)}.cal-leg i.today{outline:1.5px solid var(--accent);outline-offset:-1px}

/* --- Links de Afiliado / Track --- */
.pill{display:inline-block;font-size:12px;color:var(--txt);border:1px solid var(--line);
  border-radius:20px;padding:3px 12px;text-decoration:none;background:var(--panel2)}
.pill:hover{border-color:var(--accent)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.stat .n{font-size:26px;font-weight:700;color:var(--txt);line-height:1.1}
.stat .l{font-size:11px;color:var(--muted);margin-top:4px}

/* filtros das Sugestoes da Comunidade -- cada campo e um <div> com o <label> por cima,
   por isso a regra .frow > label:first-child nao lhes pega. O color-scheme poe o
   calendario nativo do input[type=date] escuro (senao vem branco, fora do painel). */
.filters > div{display:flex;flex-direction:column;gap:4px}
.filters label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.filters input,.filters select{background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:7px 10px;font-size:13px}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--accent)}
.filters input[type=date]{color-scheme:dark}

/* selo de estado das sugestoes: verde tratada, azul nova, cinzento vista. Um estado
   que venha do site e nao conhecamos fica no selo neutro (sug_status_class devolve ''). */
.sbadge{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.sbadge.new{color:#79c0ff;border-color:#1f4b7a;background:rgba(47,129,247,.12)}
.sbadge.read{color:var(--muted)}
.sbadge.done{color:var(--green);border-color:#245c32;background:rgba(63,185,80,.12)}
/* o mesmo codigo de cor nos contadores do topo, para bater certo com a lista */
.stat.new .n{color:#79c0ff}
.stat.done .n{color:var(--green)}

/* --- Premium: Quiz e Cancelamentos --- */
/* selos: 'bad' e quem cancelou, 'kept' quem desistiu a meio (ficou); os planos do quiz
   tem cada um a sua cor para se distinguirem numa lista longa */
.sbadge.bad{color:#ff7b72;border-color:#6e2a26;background:rgba(248,81,73,.12)}
.sbadge.kept{color:var(--green);border-color:#245c32;background:rgba(63,185,80,.12)}
.sbadge.pro{color:#79c0ff;border-color:#1f4b7a;background:rgba(47,129,247,.12)}
.sbadge.master{color:#d2a8ff;border-color:#4a2f7a;background:rgba(163,113,247,.12)}
.sbadge.elite{color:#ffd166;border-color:#7a5a1f;background:rgba(255,209,102,.12)}
.stat.bad .n{color:#ff7b72}
.stat.kept .n{color:var(--green)}
/* barra horizontal proporcional: <span class="hbar"><i style="width:40%"></i></span> */
.hbar{display:block;height:8px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;overflow:hidden;min-width:80px}
.hbar i{display:block;height:100%;background:var(--accent);border-radius:6px}
/* a linha de meses fica por baixo dos separadores principais, mais discreta */
.subtabs.months{margin-top:-8px}
.subtabs.months a{font-size:12px;padding:4px 10px}
/* a historia de cada linha: texto corrido, largo, sem partir palavras-chave */
.tbl td.story{font-size:12.5px;line-height:1.45;min-width:320px}
/* a coluna de accao dos cancelamentos: caixa de texto pequena + botoes */
.tbl td.fu{min-width:230px}
.tbl td.fu textarea{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px;font:inherit}
.tbl td.fu textarea:focus{outline:none;border-color:var(--accent)}
/* filtros em GRELHA: cada campo na sua coluna, os botoes numa linha propria no fim.
   Substitui o flex-wrap, que deixava as datas a cair para a segunda linha com o botao
   "Filtrar" a meio (Sugestoes da Comunidade, 08/09). */
.filters.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;align-items:end}
.filters.grid > div{min-width:0}
.filters.grid input,.filters.grid select{width:100%;box-sizing:border-box;min-width:0}
.filters.grid .acts{grid-column:1/-1;flex-direction:row;gap:8px}
/* tabelas de listas longas: tudo alinhado ao topo, senao as celulas curtas ficam a
   flutuar a meio de uma sugestao de oito linhas */
.tbl.top td{vertical-align:top}
.tbl td.txt{max-width:520px;line-height:1.4}
/* contentor largo para as paginas de listas (Sugestoes, Premium): a 900px a tabela das
   sugestoes saia do cartao pela direita (13/09). A pagina pede-o com $BO_WIDE = true. */
.wrap.wide{max-width:1400px}
/* e, mesmo largo, a tabela nunca sai do cartao: se nao couber, faz scroll dentro dele */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tblwrap .tbl{min-width:640px}
/* a coluna Quem: nome numa linha, e-mail por baixo (pode partir), selo por baixo */
.tbl td.quem{white-space:normal;min-width:150px;max-width:220px}
.tbl td.quem b{white-space:nowrap}
.tbl td.quem span{word-break:break-all}
.tbl td.txt{min-width:240px}
/* as accoes por linha (estado + origem + botao) podem partir em duas linhas */
.tbl form.acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0}