/* A paleta dos quatro projetos do dono (11-02): 0B0E12, 27313A, 4E5158, 7B848C, 949AA0, 8F2E1D + dois tons derivados da ferrugem */
:root { --fundo:#0b0e12; --cartao:#27313a; --linha:#4e5158; --texto:#eceef0; --corpo:#949aa0; --apagado:#7b848c; --destaque:#8f2e1d; --destaque-claro:#c4472e; --perigo:#e0654a; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--corpo); font: 16px/1.4 system-ui, sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 16px; }
h1 { margin: 0; font-size: 28px; color: var(--texto); }
h2 { margin: 28px 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
header { display: flex; align-items: center; gap: 12px; }
header .discreto { margin-left: auto; }
input, select, button { font: inherit; color: var(--texto); background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; }
input, select { width: 100%; }
form { display: grid; gap: 10px; }
.linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
button { background: var(--destaque); color: var(--texto); font-weight: 700; border: 0; cursor: pointer; }
button.discreto { background: transparent; color: var(--apagado); border: 1px solid var(--linha); font-weight: 400; }
.marca { display: flex; align-items: center; gap: 8px; color: var(--apagado); }
.marca input { width: auto; }
ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
li { color: var(--texto); background: var(--cartao); border-radius: 12px; padding: 12px; display: flex; gap: 10px; align-items: center; }
li .corpo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
li small { display: block; color: var(--apagado); }
li.feito .titulo { text-decoration: line-through; color: var(--apagado); }
li.atrasado small { color: var(--perigo); }
li button { padding: 6px 10px; font-size: 14px; }
li button.perigo { background: transparent; color: var(--perigo); border: 1px solid var(--linha); }
.ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--linha); }
.ponto.ligado { background: var(--texto); }
.on { color: var(--texto); }
.erro { color: var(--perigo); margin: 0; min-height: 1.2em; }
.codigo { font: 700 32px/1.2 ui-monospace, monospace; letter-spacing: .15em; color: var(--destaque-claro); }
/* o calendário do mês: no celular, cada marca vira um pontinho; na tela larga, a hora e o texto */
.mes { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.mes h2 { margin: 0; flex: 1; text-transform: none; color: var(--texto); font-size: 18px; letter-spacing: 0; }
.mes button { padding: 6px 12px; }
.semana, .dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.semana { margin: 10px 0 4px; font-size: 12px; color: var(--apagado); text-align: center; }
.cel { min-height: 56px; padding: 4px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; background: var(--cartao); color: var(--texto); font-weight: 400; border-radius: 8px; overflow: hidden; text-align: left; }
.cel.fora { opacity: .4; }
.cel.hoje { outline: 2px solid var(--destaque-claro); }
.cel.escolhido { background: var(--destaque); }
.cel .num { font-size: 13px; font-weight: 700; }
.marcas { display: flex; flex-wrap: wrap; gap: 3px; }
.marca { width: 7px; height: 7px; border-radius: 50%; background: var(--texto); font-size: 0; }
.marca.repete { background: var(--corpo); }
.marca.atrasado { background: var(--perigo); }
.marca.feito { background: var(--linha); }
.mais { font-size: 10px; color: var(--corpo); }
@media (min-width: 900px) { main { max-width: 980px; } }
@media (min-width: 600px) {
  .cel { min-height: 84px; }
  .marca { width: auto; height: auto; border-radius: 4px; background: transparent; font-size: 11px; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; }
  .marca.repete { background: transparent; color: var(--corpo); }
  .marca.atrasado { background: transparent; color: var(--perigo); }
  .marca.feito { background: transparent; color: var(--apagado); text-decoration: line-through; }
}
#dia h2 { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--texto); }
#dia ul { margin-bottom: 10px; }
.falar { width: 100%; padding: 16px; font-size: 18px; margin-bottom: 10px; }
.app .so-site { display: none !important; }