/* styles.css - sistema visual do app de autoconhecimento.
   Paleta (hex exatos), tipografia e formas seguem design-ref-autoconhecimento.html
   a risca. Fraunces nos titulos/citacoes/numeros; Inter no corpo e na interface. */

:root{
  /* cor */
  --ink:#2B2440; --ink-soft:#6E6781; --ink-faint:#9A93A8;
  --paper:#F3EFE9; --surface:#FFFFFF; --surface-2:#FBF8F3;
  --line:rgba(43,36,64,.10);
  --primary:#6B4FB8; --primary-ink:#5238A0; --primary-soft:#ECE6F8;
  --sol:#CC7A22; --sol-soft:#FBEFDA;
  --lua:#3B4794; --lua-soft:#E6E8F6;
  --bussola:#1C9277; --bussola-soft:#DAF0EA;
  --aviso:#B5641A; --aviso-soft:#FBEEDC;
  --erro:#B23B3B;
  /* forma */
  --r:20px; --r-md:14px; --r-sm:11px;
  --shadow:0 1px 2px rgba(43,36,64,.05), 0 12px 32px rgba(43,36,64,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
#app{
  min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;
  padding:28px 18px 64px;
}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.01em;margin:0}

/* cartao unico (tela) - o app mostra uma tela por vez, centralizada */
.screen{
  width:100%;max-width:440px;background:var(--surface);
  border:.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:26px 22px;
}
.screen.center{text-align:center}

/* halo do cofre (assinatura) */
.halo{
  width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;background:var(--primary-soft);color:var(--primary);
  box-shadow:0 0 0 8px rgba(107,79,184,.06);
}
.halo svg{width:28px;height:28px}

.scr-title{font-size:23px}
.scr-sub{color:var(--ink-soft);font-size:14px;margin:6px 0 18px}

/* formulario */
label{display:block;font-size:13px;color:var(--ink-soft);margin:14px 0 5px}
input[type=text],input[type=password],textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;
}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
input:focus,textarea:focus{outline:none;border-color:var(--primary);background:var(--surface)}

/* botoes */
.btn{
  width:100%;font:inherit;font-size:15px;font-weight:500;border:0;border-radius:var(--r-sm);
  padding:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--primary);color:#fff}
.btn-bussola{background:var(--bussola);color:#fff;width:auto;padding:11px 16px;font-size:14px}
.btn svg{width:18px;height:18px}
.link{
  background:none;border:0;color:var(--primary);font:inherit;font-size:13px;
  text-decoration:underline;cursor:pointer;padding:8px;display:block;margin:8px auto 0;
}

.shield{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;color:var(--ink-faint);margin-top:16px}
.shield svg{width:15px;height:15px;flex:none}

/* aviso de irrecuperabilidade */
.warn{background:var(--aviso-soft);border-radius:var(--r-md);padding:13px 14px;margin:16px 0 6px;font-size:13px;color:var(--aviso);text-align:left}
.warn b{font-weight:600}
.check{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ink-soft);margin-top:11px;text-align:left;cursor:pointer}
.check input{margin-top:2px;flex:none}

.err{font-size:13px;color:var(--erro);margin-top:10px}
.err:empty{display:none}

/* diario */
.d-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px}
.d-greet{font-family:'Fraunces',serif;font-weight:600;font-size:24px;letter-spacing:-.01em}
.d-date{font-size:13px;color:var(--ink-soft);margin-top:3px}
.d-chip{flex:none;text-align:center;background:var(--surface-2);border:.5px solid var(--line);border-radius:var(--r-md);padding:9px 13px}
.d-chip b{display:block;font-family:'Fraunces',serif;font-size:22px;color:var(--ink)}
.d-chip span{font-size:11px;color:var(--ink-faint)}

.moment{border:.5px solid var(--line);border-radius:var(--r-md);padding:16px 17px;margin-bottom:14px}
.m-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:5px 11px;border-radius:999px}
.m-chip svg{width:15px;height:15px;flex:none}
.chip-sol{background:var(--sol-soft);color:var(--sol)}
.chip-lua{background:var(--lua-soft);color:var(--lua)}
.chip-bussola{background:var(--bussola-soft);color:var(--bussola)}
.quote{font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--ink-soft);margin:13px 0 0}
.m-prompt{font-size:14px;color:var(--ink);margin:13px 0 0}
.hint{font-size:12px;color:var(--ink-faint);margin:7px 0 0}

.slider-row{display:flex;align-items:center;gap:12px;margin-top:6px}
input[type=range]{flex:1;accent-color:var(--lua)}
.slider-val{font-size:16px;font-weight:600;color:var(--ink);min-width:20px;text-align:right}

.foot{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-faint);margin-top:6px}
.foot div{display:flex;align-items:center;gap:7px}
.foot svg{width:14px;height:14px;flex:none}

/* pauta compilada da semana (mesmo tom do glifo bussola) */
.pauta{background:var(--bussola-soft);border-radius:var(--r-md);padding:13px 14px;margin-top:12px;font-size:13px;color:var(--ink);text-align:left;white-space:pre-wrap}
.pauta:empty{display:none}

/* status sutil de salvamento automatico */
.salvo{font-size:12px;color:var(--ink-faint);text-align:center;margin-top:2px;min-height:16px;opacity:0;transition:opacity .25s}
.salvo.on{opacity:1}