:root{
  --bg:#f4f1ec; --card:#fff; --ink:#2c2822; --muted:#eee7db; --muted-ink:#8a8072;
  --line:#e2dcd2; --accent:#7a5c3e; --accent-ink:#fff;
  --ok:#2f7d4f; --ok-bg:#e6f2ea; --warn:#b06a1e; --warn-bg:#f7ecdd;
  --danger:#b23b3b;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden}
img{max-width:100%}
body{font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#app{max-width:560px;margin:0 auto;padding:16px 14px 120px}
.loading,.msg{padding:40px 16px;text-align:center;color:var(--muted-ink)}

h1{font-size:20px;margin:2px 0 2px}
.sub{color:var(--muted-ink);font-size:14px;margin:0 0 14px}

.field{margin:10px 0}
.field label{display:block;font-size:13px;color:var(--muted-ink);margin-bottom:4px}
input[type=text],input[type=date],textarea{
  width:100%;font:inherit;padding:11px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink)}
textarea{min-height:64px;resize:vertical}

.bar{display:flex;gap:8px;margin:14px 0 8px}
.bar button{flex:1}

button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--card);
  color:var(--ink);border-radius:10px;padding:11px 12px}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
button:disabled{opacity:.55;cursor:default}

ul.alunos{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
ul.alunos li{border-top:1px solid var(--line)}
ul.alunos li:first-child{border-top:0}
.row{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;background:none;border:0;text-align:left}
.row .box{width:24px;height:24px;border:2px solid var(--line);border-radius:7px;flex:none;position:relative}
.row.on .box{background:var(--ok);border-color:var(--ok)}
.row.on .box::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.row .nm{flex:1;min-width:0}
.row .nm b{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.on .nm b{color:var(--ok)}
.chip{display:inline-block;font-size:12px;padding:2px 7px;border-radius:20px;background:var(--muted);color:var(--muted-ink);margin-right:4px}
.chip.saldo{background:var(--ok-bg);color:var(--ok)}
.chip.rep{background:var(--warn-bg);color:var(--warn)}

.rep-add{display:flex;gap:8px;margin-top:6px}
.rep-add input{flex:1}
.rep-list{list-style:none;margin:8px 0 0;padding:0}
.rep-list li{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;margin-top:6px;background:var(--card)}
.rep-list li span{flex:1}
.rep-list li button{padding:5px 9px;font-size:13px;color:var(--danger);border-color:transparent}

.foot{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(transparent,var(--bg) 22%);
  padding:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.foot .inner{max-width:560px;margin:0 auto}
.foot button{width:100%;font-size:17px;padding:14px}

.review{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-top:6px}
.review h2{font-size:16px;margin:0 0 10px}
.review .big{display:flex;gap:14px;margin:6px 0 12px}
.review .big div{flex:1;text-align:center;background:var(--bg);border-radius:10px;padding:10px 4px}
.review .big b{display:block;font-size:22px}
.review .big small{color:var(--muted-ink)}
.review ul{margin:6px 0 0;padding-left:18px}
.review ul li{margin:2px 0}
.note{color:var(--muted-ink);font-size:13px;margin-top:8px}

.err{background:#fbeaea;color:var(--danger);border:1px solid #f0cccc;border-radius:10px;padding:10px 12px;margin:10px 0;font-size:14px}
.done{text-align:center;padding:30px 10px}
.done .tick{width:56px;height:56px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 12px}