:root { --bg:#f4f5f9; --card:#fff; --ink:#141a3a; --mut:#5d6483; --line:#dde0ec; --work:#1f9d61; --off:#fff3dc; --accent:#9a6200; --warn:#8a5a00; --warnbg:#fff4d6; --errbg:#fde8e1; --okbg:#e3f6ec; --display:'Bricolage Grotesque', system-ui, sans-serif; }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 'Atkinson Hyperlegible', system-ui, -apple-system, "Segoe UI", sans-serif; }
  main { max-width:960px; margin:0 auto; padding:24px 16px 64px; }
  .banner { background:var(--ink); color:#fff; text-align:center; padding:10px 16px; font-size:15px; }
  .banner b { color:#ffd27a; }
  .banner a { color:#fff; }
  nav { display:flex; gap:16px; font-weight:600; font-size:15px; padding-top:8px; }
  nav a { color:var(--mut); text-decoration:none; }
  nav a[aria-current] { color:var(--ink); border-bottom:2px solid var(--accent); }
  .res { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; margin:16px 0; display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
  .res div { font-size:14px; color:var(--mut); }
  .res b { display:block; font-size:24px; color:var(--ink); letter-spacing:-.01em; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; margin:24px 0; }
  .card h2 { margin-top:0; }
  h1 { font-size:clamp(28px,5vw,44px); line-height:1.1; margin:16px 0 8px; letter-spacing:-.02em; }
  h1 em { font-style:normal; color:var(--accent); }
  h2 { font-size:24px; margin:32px 0 8px; }
  h3 { font-size:17px; margin:24px 0 6px; }
  h3 small { color:var(--mut); font-weight:500; }
  p.lead { color:var(--mut); margin:0 0 24px; max-width:60ch; }
  label { display:block; font-weight:600; font-size:14px; margin-bottom:6px; }
  input, textarea, select { font:inherit; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); }
  input[type=checkbox] { width:18px; height:18px; accent-color:var(--work); vertical-align:middle; }
  .campo input, .campo select, textarea { width:100%; }
  textarea { min-height:140px; resize:vertical; }
  .grid { display:grid; gap:16px; grid-template-columns:1fr; margin-bottom:16px; }
  @media (min-width:700px) { .grid { grid-template-columns:1fr 1fr; } }
  .turno { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
  .check { display:flex; gap:8px; align-items:center; font-weight:500; }
  button, a.btn { font:inherit; font-weight:600; padding:10px 18px; border-radius:999px; border:2px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer; min-height:44px; text-decoration:none; display:inline-block; }
  button.sec, a.btn.sec { background:transparent; color:var(--ink); }
  a.btn.wa { background:#1f8f4e; border-color:#1f8f4e; }
  .actions { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
  .scroll { overflow-x:auto; }
  table { border-collapse:collapse; width:100%; background:var(--card); border:1px solid var(--line); }
  th, td { padding:7px 8px; border-bottom:1px solid var(--line); text-align:center; font-size:14px; }
  th:first-child, td:first-child { text-align:left; }
  .equipe input[type=time] { width:7.5em; padding:5px 6px; }
  .equipe input[type=number] { width:5em; padding:5px 6px; }
  table.sem { min-width:560px; }
  td.d { cursor:pointer; font-weight:600; user-select:none; }
  td.d.t { background:var(--ink); color:#fff; }
  td.d.f { background:var(--off); color:#7a4b00; }
  .ro td.d { cursor:default; }
  td.bad { color:var(--accent); font-weight:700; }
  tfoot td { font-weight:600; color:var(--mut); }
  .alertas { list-style:none; padding:0; margin:12px 0; display:grid; gap:6px; }
  .alertas li { padding:8px 12px; border-radius:8px; font-size:14px; }
  .alertas .erro { background:var(--errbg); color:#8a2a0a; }
  .alertas .aviso { background:var(--warnbg); color:var(--warn); }
  .alertas .ok { background:var(--okbg); color:var(--work); font-weight:600; }
  .msg { min-height:24px; color:var(--accent); font-weight:600; }
  .msg.ok { color:var(--work); }
  .msg.aviso { color:var(--warn); }
  .msg:empty { min-height:0; }
  .aviso-topo { background:var(--warnbg); color:var(--warn); border-radius:8px; padding:10px 14px; font-size:15px; }
  .aviso-topo a, .aviso-topo .link-btn { color:inherit; text-decoration:underline; font-size:inherit; }
  .escolha { margin:16px 0; }
  .escolha p { margin:0 0 8px; }
  .link { word-break:break-all; background:var(--card); border:1px dashed var(--work); padding:12px; border-radius:8px; }
  .hint { color:var(--mut); font-size:14px; }
  .pessoas { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 16px; }
  details { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 16px; margin-bottom:8px; }
  summary { font-weight:600; cursor:pointer; }
  details p { margin:8px 0 0; color:var(--mut); }
  footer { color:var(--mut); font-size:13px; margin-top:40px; border-top:1px solid var(--line); padding-top:16px; }
  h1, h2, h3, .pessoa b, .lista li, .link { overflow-wrap:anywhere; }
  .pessoa { max-width:100%; }
  th.feriado { color:var(--accent); }
  th.feriado small { display:block; font-weight:500; font-size:11px; }
  .robo { margin:12px 0; min-height:65px; }
  .robo:empty { display:none; }
  [hidden] { display:none !important; }
  nav .conta { margin-left:auto; display:flex; gap:16px; align-items:center; }
  .link-btn { background:none; border:0; padding:0; color:var(--mut); font-weight:600; font-size:15px; cursor:pointer; }
  button.mini, a.btn.mini { padding:5px 10px; font-size:13px; }
  button.perigo { color:var(--accent); border-color:var(--accent); }
  .mut { color:var(--mut); font-weight:400; }
  .ajustes { display:grid; gap:12px; padding:8px 4px; text-align:left; }
  .ajustes .linha { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
  .ajustes .check { gap:4px; }
  .ajustes .linha > b { flex-basis:100%; }
  .ajustes select, .pedido-form select { padding:6px 8px; }
  table.por-dia { width:auto; }
  table.por-dia input[type=time] { width:7.5em; padding:4px 6px; }
  table.por-dia input[type=number] { width:5em; padding:4px 6px; }
  .lista { list-style:none; padding:0; margin:12px 0; display:grid; gap:8px; }
  .lista li { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:15px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .lista li.mut { border-style:dashed; }
  .pedido .status { margin-left:auto; font-size:13px; font-weight:600; color:var(--mut); }
  .pedido.aprovado .status { color:var(--work); }
  .pedido.recusado .status { color:var(--accent); }
  .pedido .acoes { display:flex; gap:6px; }
  .selo { background:var(--warnbg); color:var(--warn); border-radius:99px; padding:2px 10px; font-size:13px; font-weight:600; text-decoration:none; }
  .pessoa { display:inline-flex; gap:6px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px 6px 6px 12px; font-size:14px; }
  .pessoa b { margin-right:4px; }
  .linha-form { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
  .linha-form input { flex:1; min-width:200px; }
  .linha-form .check input, .linha-form input[type=checkbox] { flex:none; min-width:0; }
  .linha-form .check { flex:none; }
  .card.entrar { display:grid; gap:16px; max-width:520px; }
  .card.entrar .btn { text-align:center; }
  .topo-loja { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .nome-loja { flex:1; min-width:140px; font-size:20px; margin:0; }
  .renomear input { font-size:18px; }
  .card.vazio { text-align:center; }
  .card.vazio p { color:var(--mut); }
  /* botão do Google no padrão deles (Jakob: o jeito que a pessoa já conhece) */
  .btn-google { display:inline-flex; align-items:center; justify-content:center; gap:12px; background:#fff; color:#1f1f1f; border:1px solid #747775; border-radius:22px; min-height:44px; padding:0 18px; font:500 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration:none; }
  .btn-google:hover { background:#f8f9fa; }
  main.texto { max-width:720px; }
  main.texto li { margin-bottom:6px; }

  /* dias da loja */
  fieldset.dias-loja { border:1px solid var(--line); border-radius:8px; padding:8px 12px 10px; margin:12px 0; }
  fieldset.dias-loja legend { font-weight:600; font-size:14px; padding:0 4px; }
  .linha-dias { display:flex; flex-wrap:wrap; gap:6px 14px; }
  .linha-dias .check { font-weight:500; }
  /* barra de salvar fixa no rodapé enquanto edita */
  .barra { align-items:center; }
  .barra .msg { flex-basis:100%; margin:0; }
  .barra.fixa { position:sticky; bottom:0; z-index:5; background:var(--bg); border-top:1px solid var(--line); padding:10px 0; margin:16px 0 0; }
  button:disabled { opacity:.45; cursor:not-allowed; }
  /* tabela da semana */
  table.sem th small { display:block; font-weight:500; font-size:11px; color:var(--mut); }
  table.sem th.fechado { color:var(--mut); background:#eceae4; }
  table.sem td.d .sep { padding:0 1px; }
  table.sem td.nome small.hsem { display:none; }
  /* funcionário: minha escala */
  .minha select { width:100%; font-size:17px; margin:6px 0 4px; }
  .minha h4 { margin:16px 0 6px; font-size:15px; }
  .dias-pessoa { list-style:none; padding:0; margin:0; display:grid; gap:4px; }
  .dias-pessoa li { display:flex; gap:10px; align-items:baseline; padding:8px 10px; border-radius:8px; font-size:15px; }
  .dias-pessoa li.t { background:var(--okbg); }
  .dias-pessoa li.f { background:var(--off); color:var(--mut); }
  .dias-pessoa li.hoje { outline:2px solid var(--accent); }
  .dias-pessoa b { min-width:76px; }
  .dias-pessoa small { margin-left:auto; color:var(--accent); font-weight:600; }
  @media (max-width:640px) {
    main { padding-left:12px; padding-right:12px; }
    /* semana: 7 dias cabem na tela; horas vão para baixo do nome */
    table.sem { min-width:0; table-layout:fixed; font-size:12px; }
    table.sem th, table.sem td { padding:5px 2px; font-size:12px; }
    table.sem th:first-child, table.sem td:first-child { width:62px; padding-left:6px; overflow-wrap:anywhere; }
    table.sem td.d span { display:block; line-height:1.25; }
    table.sem td.d .sep { display:none; }
    table.sem td.d.f { font-size:11px; }
    table.sem .hcol { display:none; }
    table.sem td.nome small.hsem { display:block; color:var(--mut); font-weight:500; }
    /* equipe: cada pessoa vira um cartão */
    table.equipe > thead { display:none; }
    table.equipe, table.equipe > tbody, table.equipe > tbody > tr, table.equipe > tbody > tr > td { display:block; width:100%; }
    table.equipe { border:0; background:transparent; }
    table.equipe > tbody > tr { background:var(--card); border:1px solid var(--line); border-radius:10px; margin-bottom:10px; padding:6px 12px; }
    table.equipe > tbody > tr > td { border:0; padding:5px 0; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:8px; }
    table.equipe > tbody > tr > td:first-child { font-weight:700; font-size:16px; }
    table.equipe > tbody > tr > td[data-rotulo]::before { content:attr(data-rotulo); color:var(--mut); font-size:14px; }
    table.equipe > tbody > tr.noprint { border-top:0; margin-top:-14px; border-radius:0 0 10px 10px; }
    table.equipe > tbody > tr.noprint > td { display:block; }
    table.por-dia th, table.por-dia td { padding:4px 3px; font-size:13px; }
    .equipe input[type=time] { width:8.5em; }
  }
  .rotulo { font-weight:600; font-size:14px; margin:0 0 6px; }
  .rotulo .mut { font-weight:400; }
  label.mini-rot { font-weight:500; font-size:13px; color:var(--mut); margin-bottom:4px; }
  .alertas small.lei { opacity:.75; font-weight:400; }
  .perigo-link { color:var(--accent); font-size:14px; text-decoration:underline; }
  .minha .agenda { margin-top:16px; }
  .navega { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:20px 0 4px; font-weight:600; }
  td.d.aus { background:#e6e0f3; color:#4b3b7a; font-size:12px; }
  td.d.ex { box-shadow:inset 0 0 0 2px var(--accent); }
  .acoes-discretas { display:flex; gap:18px; flex-wrap:wrap; }
  .ajustes .linha-form { align-items:end; }
  .ajustes .linha-form input, .ajustes .linha-form select { padding:6px 8px; min-width:0; flex:0 1 auto; }
  .celular { margin-top:20px; border-top:1px solid var(--line); padding-top:12px; }
  .celular .actions { margin:8px 0; }
  .card.resumo { padding:14px 16px; margin:12px 0; }
  .card.resumo h3 { margin:0 0 4px; font-size:19px; }
  .card.resumo p { margin:4px 0 0; }
  .card.resumo.ok { border-color:var(--work); background:var(--okbg); }
  .card.resumo.ok h3 { color:var(--work); }
  .card.resumo.tem-erro { border-color:var(--accent); }
  .card.salvo { border-color:var(--work); background:var(--okbg); text-align:center; }
  .card.salvo h3 { color:var(--work); font-size:22px; margin:0 0 6px; }
  .card.salvo .actions { justify-content:center; align-items:center; }
  a.btn.grande { font-size:18px; padding:14px 22px; width:100%; max-width:420px; text-align:center; }
  /* Fitts: em tela de toque, todo alvo tem pelo menos 44px */
  @media (pointer: coarse) {
    button, a.btn { min-height:44px; }
    button.mini, a.btn.mini { min-height:44px; padding:8px 14px; font-size:14px; }
    .link-btn, .perigo-link { display:inline-flex; align-items:center; min-height:44px; padding:0 6px; }
    nav a { padding:10px 0; }
    input[type=checkbox] { width:24px; height:24px; }
    label.check { min-height:44px; display:flex; align-items:center; gap:10px; }
    .linha-dias label.check { min-width:84px; }
    table.sem td.d { height:46px; }
    .lista li .acoes button { min-width:88px; }
    select, input { min-height:44px; }
  }
  /* botão principal preso embaixo no celular, ao alcance do polegar */
  @media (max-width:640px) {
    .acao-fixa { position:sticky; bottom:0; z-index:4; background:var(--bg); padding:10px 0; margin:0 -12px; padding-left:12px; padding-right:12px; border-top:1px solid var(--line); }
    .card .acao-fixa { background:var(--card); }
    .acao-fixa button { width:100%; }
  }
  /* Hick/Miller: etapas, blocos recolhíveis, alertas agrupados */
  .etapas { display:flex; gap:6px; margin:16px 0; position:sticky; top:0; z-index:4; background:var(--bg); padding:6px 0; border-bottom:1px solid var(--line); }
  .etapas button { flex:1; background:transparent; color:var(--mut); border:1px solid var(--line); }
  .etapas button[aria-current=step] { background:var(--ink); color:#fff; border-color:var(--ink); }
  #out.com-etapas[data-etapa=equipe] [data-etapa]:not([data-etapa=equipe]),
  #out.com-etapas[data-etapa=escala] [data-etapa]:not([data-etapa=escala]),
  #out.com-etapas[data-etapa=enviar] [data-etapa]:not([data-etapa=enviar]) { display:none !important; }
  details.mais { border:1px solid var(--line); border-radius:8px; padding:8px 12px; margin:12px 0; background:var(--card); }
  details.mais > summary, details.secao > summary { font-weight:600; cursor:pointer; padding:6px 0; }
  details.secao { border-top:1px solid var(--line); padding:4px 0; }
  details.secao:first-child { border-top:0; }
  .alertas li.grupo { background:var(--warnbg); color:var(--warn); padding:0; }
  .alertas li.grupo details, details.secao { background:transparent; border:0; border-radius:0; padding:0; margin:0; }
  details.secao { border-top:1px solid var(--line); padding:4px 0; }
  .alertas li.grupo summary { padding:8px 12px; font-weight:600; cursor:pointer; }
  .alertas li.grupo .alertas { margin:0; padding:0 8px 8px; }
  .semanas-chips { display:none; }
  @media (max-width:640px) {
    .semanas-chips { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
    .semanas-chips .ativa { background:var(--ink); color:#fff; }
    #out.com-etapas .semana:not(.ativa), #out:not(.com-etapas) .semana:not(.ativa) { display:none; }
  }
  @media print { #out [data-etapa=escala], #out .semana { display:block !important; } }
  /* Jakob: o dia é tocável; Estética: legenda única, ajuda curta */
  @media (hover:hover) { #out.com-etapas table.sem td.d:hover { outline:2px solid var(--ink); outline-offset:-2px; } }
  table.sem td.d:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
  .dica-toque { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--ink); color:#fff; border-radius:10px; padding:8px 12px; margin:8px 0; font-size:15px; }
  .dica-toque button { color:#fff; border-color:#fff; }
  .legenda { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--mut); margin:8px 0 4px; }
  .legenda .item { display:inline-flex; align-items:center; gap:6px; }
  .legenda .cor { width:16px; height:16px; border-radius:4px; display:inline-block; border:1px solid var(--line); }
  .cor.t { background:var(--ink); } .cor.f { background:var(--off); } .cor.aus { background:#e6e0f3; }
  .cor.ex { background:var(--card); box-shadow:inset 0 0 0 2px var(--accent); } .cor.fer { background:var(--card); border-color:var(--accent); border-width:2px; } .cor.fec { background:#eceae4; }
  details.ajuda { display:inline; background:none; border:0; padding:0; margin:0; }
  details.ajuda > summary { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; border:1px solid var(--mut); color:var(--mut); font-size:13px; font-weight:700; cursor:pointer; list-style:none; vertical-align:middle; }
  details.ajuda > summary::-webkit-details-marker { display:none; }
  details.ajuda[open] { display:block; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 12px; margin:6px 0; color:var(--ink); }
  details.ajuda[open] > summary { margin-right:6px; }
  @media (pointer:coarse) { details.ajuda > summary { width:44px; height:44px; } }
  @page { size:A4 landscape; margin:12mm; }
  @media print {
    body { background:#fff; }
    .banner, nav, h1, #segmentos, #pedidos, #convite, #atualizado, .lead, form, .actions, .hint, #faq, #compara, #whats, footer, .alertas, .noprint { display:none !important; }
    td.d.t { background:#ddd !important; color:#000 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    td.d.f { background:#fff !important; }
    .semana { break-inside:avoid; }
    input { border:0; padding:0; }
  }

  /* visual novo (o mesmo do site e do app) */
  h1, h2, h3, .card h3 { font-family:var(--display); letter-spacing:-.02em; }
  h1 { font-weight:800; }
  input, textarea, select { border-width:1.5px; border-radius:10px; min-height:44px; }
  .card { border-radius:14px; }
  nav .voltar-app { color:#fff; background:var(--ink); border-radius:999px; padding:6px 14px; }
  .aviso-cadastro { border-color:var(--warn); background:var(--warnbg); }
  .aviso-cadastro h3 { margin-top:0; }
  .aviso-cadastro ul { margin:8px 0; padding-left:20px; }
  nav { flex-wrap:wrap; align-items:center; row-gap:8px; }
  nav .conta { display:flex; align-items:center; gap:12px; margin-left:auto; }
  nav .voltar-app { white-space:nowrap; font-size:14px; padding:8px 14px; }