/* Papo — styles. Palette & signature elements adapted from papo-mockup.html. */
:root{
  --porcelain:#F2F5F1;
  --paper:#FFFFFF;
  --ink:#122820;
  --ink-soft:#4C6157;
  --cobalt:#1F44C8;
  --cobalt-deep:#163092;
  --verde:#0E7C4A;
  --mango:#E8930C;
  --line:#DDE4DD;
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--porcelain);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit}

.azulejo{
  height:8px;
  background:repeating-linear-gradient(90deg,
    var(--cobalt) 0 14px, transparent 14px 20px,
    var(--verde) 20px 34px, transparent 34px 40px);
  opacity:.85;
}

.app{
  max-width:480px;margin:0 auto;min-height:100dvh;
  background:var(--paper);
  display:flex;flex-direction:column;
  box-shadow:0 0 60px -30px rgba(18,40,32,.35);
}

.screen{flex:1;display:flex;flex-direction:column}
.screen[hidden]{display:none}

/* ---------- app bar ---------- */
.appbar{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:16px 20px 14px;border-bottom:1px solid var(--line);
}
.appbar .brand{
  font-family:"Bricolage Grotesque",var(--ink),sans-serif;font-weight:800;font-size:1.4rem;
  letter-spacing:-.02em;
}
.appbar .brand span{color:var(--cobalt)}
.pill{
  font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.72rem;
  border-radius:99px;padding:4px 10px;color:var(--ink-soft);border:1px solid var(--line);
}
.pill.verde{color:var(--verde);background:#E7F3EC;border-color:#BFE0CE}
.pill.mango{color:#9A6206;background:#FDF3E1;border-color:#F3D9AC}

.body{flex:1;padding:18px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}

/* ---------- buttons ---------- */
.big-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--cobalt);color:#fff;border:none;border-radius:16px;
  padding:18px;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;
  font-size:1.1rem;cursor:pointer;width:100%;
  box-shadow:0 10px 24px -12px rgba(31,68,200,.6);
}
.big-btn:disabled{opacity:.55;cursor:default}
.big-btn.quiet{
  background:var(--paper);color:var(--cobalt);border:1.5px solid var(--cobalt);box-shadow:none;
}

.section-label{
  font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* ---------- notebook / lists ---------- */
.note-card{
  background:#F7F9F6;border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  white-space:pre-wrap;font-size:.9rem;color:var(--ink-soft);line-height:1.55;
}
.note-card h4{color:var(--ink);font-size:.82rem;margin:10px 0 4px;font-weight:600}
.note-card h4:first-child{margin-top:0}
.lesson-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 4px;border-bottom:1px solid var(--line);font-size:.92rem;
}
.lesson-row:last-child{border-bottom:none}
.lesson-row .when{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.7rem;color:var(--ink-soft);white-space:nowrap}

/* ---------- ticket / aula card ---------- */
.ticket{background:var(--paper);border:1.5px solid var(--cobalt);border-radius:14px;overflow:hidden}
.ticket .ticket-head{
  background:var(--cobalt);color:#fff;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;
  font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
}
.ticket .ticket-body{padding:16px}
.ticket h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:-.01em;margin-bottom:6px}
.ticket p{font-size:.92rem;color:var(--ink-soft);line-height:1.5}
.ticket .examples{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.ticket .examples .ex{font-size:.9rem}
.ticket .examples .ex b{color:var(--ink)}
.ticket .examples .ex span{color:var(--ink-soft)}
.ticket .perf{border-top:2px dashed var(--line);margin:14px -16px 0;padding:12px 16px 0;display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.7rem;border:1px solid var(--line);border-radius:99px;padding:4px 10px;color:var(--ink-soft)}
.chip.verde{border-color:#BFE0CE;background:#EDF7F1;color:var(--verde)}

/* ---------- chat ---------- */
.chat{flex:1;display:flex;flex-direction:column;gap:12px;padding-top:4px}
.bubble{max-width:82%;padding:11px 14px;border-radius:18px;font-size:.95rem;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.bubble.claude{background:#F1F4F0;border:1px solid var(--line);border-bottom-left-radius:6px;align-self:flex-start}
.bubble.user{background:var(--cobalt);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.bubble.typing{color:var(--ink-soft);font-style:italic}
.whisper{
  align-self:flex-start;max-width:82%;font-size:.8rem;color:#9A6206;background:#FDF3E1;border:1px solid #F3D9AC;
  border-radius:10px;padding:7px 10px;line-height:1.45;
}
.turncount{align-self:center;font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.68rem;color:var(--ink-soft)}

/* composer pinned at bottom */
.composer{display:flex;gap:10px;align-items:flex-end;border-top:1px solid var(--line);padding:12px 16px;background:var(--paper)}
.composer textarea{
  flex:1;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;font-size:1rem;
  color:var(--ink);background:var(--paper);resize:none;max-height:120px;font-family:inherit;line-height:1.4;
}
.composer .send{width:46px;height:46px;border-radius:14px;background:var(--verde);border:none;color:#fff;font-size:1.2rem;cursor:pointer;flex-shrink:0}
.composer .send:disabled{opacity:.5}

/* ---------- summary ---------- */
.grade{text-align:center;padding:8px 0 2px}
.grade .word{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:2rem;color:var(--verde);letter-spacing:-.02em}
.grade .sub{font-size:.88rem;color:var(--ink-soft);margin-top:2px}
.fix-row{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--paper)}
.fix-row .said{font-size:.9rem;color:#A33B2E;text-decoration:line-through;text-decoration-color:#E0A79F}
.fix-row .better{font-size:.94rem;font-weight:600}
.fix-row .why{font-size:.82rem;color:var(--ink-soft);line-height:1.45}
.praise-row{display:flex;flex-direction:column;gap:2px;background:#EDF7F1;border:1px solid #BFE0CE;border-radius:14px;padding:12px 14px}
.praise-row .said{font-size:.9rem;font-weight:600;color:var(--verde)}
.praise-row .why{font-size:.82rem;color:var(--ink-soft);line-height:1.45}

/* ---------- login ---------- */
.login-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:32px 24px}
.login-wrap h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:2.6rem;letter-spacing:-.02em}
.login-wrap h1 span{color:var(--cobalt)}
.login-wrap p{color:var(--ink-soft);font-size:1rem;line-height:1.5}
.login-wrap input{
  border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;font-size:1rem;width:100%;
  background:var(--paper);color:var(--ink);font-family:inherit;
}
.err{color:#A33B2E;font-size:.88rem;min-height:1.1em}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:.9rem;
  max-width:88vw;text-align:center;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);z-index:50;
}
.toast[hidden]{display:none}
.muted{color:var(--ink-soft);font-size:.85rem}
.center{text-align:center}
.spinner{display:inline-block;width:1em;height:1em;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.linkbtn{background:none;border:none;color:var(--cobalt);font-size:.85rem;cursor:pointer;text-decoration:underline;padding:4px}