/* ─────────────────────────────────────────────────────────────────────────
   Revisão — "diário de estudo": papel quente, serifa de caráter (Fraunces)
   + sans humanista (Instrument Sans), destaque terracota. Claro, calmo, focado.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --paper:  #f3ede1;   /* fundo creme quente */
  --paper2: #ece3d3;   /* fundo mais fundo (gradiente) */
  --card:   #fbf8f2;   /* superfície elevada */
  --ink:    #2a2620;   /* texto (quase preto quente) */
  --ink2:   #5b544a;   /* texto secundário */
  --muted:  #968c7b;   /* meta / legendas */
  --line:   #e2d8c6;   /* bordas */
  --line2:  #d6cab4;   /* bordas mais marcadas */

  --accent:  #bd4b2b;  /* terracota (ação principal) */
  --accent2: #a23f22;  /* terracota escuro (hover) */
  --accent-wash: #f3ddd1;

  --duvida: #a8630f;   /* âmbar/ocre */
  --ideia:  #4f7a3a;   /* verde-sálvia */
  --nota:   #35638f;   /* azul-poeira */
  --danger: #b23b30;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 10px; --r: 14px; --r-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(74,52,28,.06), 0 1px 1px rgba(74,52,28,.04);
  --shadow:    0 2px 4px rgba(74,52,28,.05), 0 10px 24px rgba(74,52,28,.07);
  --shadow-lg: 0 12px 40px rgba(74,52,28,.14);
  --tab-h: 4.6rem;
}

* { box-sizing: border-box; }
/* [hidden] precisa vencer displays de autor (.login usa grid), senão login e app
   aparecem juntos. */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  background:
    radial-gradient(1200px 600px at 100% -10%, #f8f1e4 0%, transparent 55%),
    radial-gradient(900px 500px at -10% 110%, #efe6d5 0%, transparent 50%),
    var(--paper);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--accent); text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
::selection { background: var(--accent-wash); }

/* ── Login ── */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; }
.login-card {
  display: flex; flex-direction: column; gap: .7rem; width: min(360px, 92vw);
  padding: 2.4rem 2rem; border-radius: var(--r-lg); text-align: center;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.login-mark {
  width: 52px; height: 52px; margin: 0 auto .3rem; display: grid; place-items: center;
  border-radius: 50%; color: var(--accent);
  background: var(--accent-wash); border: 1px solid #e6c6b6;
}
.login-card h1 { margin: 0; font-size: 1.9rem; }
.login-card p { margin: -.2rem 0 .5rem; color: var(--muted); font-size: .92rem; }
.login-card input { text-align: center; }
.login-card button[type="submit"] {
  margin-top: .2rem; background: var(--accent); color: #fff; border: none;
  padding: .8rem; border-radius: var(--r); font-weight: 600; font-size: 1rem;
  transition: background .15s, transform .1s;
}
.login-card button[type="submit"]:hover { background: var(--accent2); }
.login-card button[type="submit"]:active { transform: scale(.985); }

/* campo de senha com botão de olho */
.pwd-field { position: relative; }
.pwd-field input { padding-right: 2.9rem; text-align: left; }
.eye-btn {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 2rem; height: 2rem;
  background: transparent; border: none; color: var(--muted); border-radius: 50%;
  transition: color .15s, background .15s;
}
.eye-btn:hover { color: var(--ink2); background: var(--paper); }
.eye-btn:active { transform: translateY(-50%) scale(.92); }
.eye-btn.on { color: var(--accent); }
.eye-btn svg { width: 19px; height: 19px; }
.eye-btn .ic-eye-off { display: none; }
.eye-btn.on .ic-eye { display: none; }
.eye-btn.on .ic-eye-off { display: block; }

/* ── Topbar ── */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(.7rem, env(safe-area-inset-top)) 1.1rem .7rem;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  color: var(--ink);
}
.brand svg { color: var(--accent); }
.icon-btn {
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem;
  border-radius: 50%; background: transparent; border: 1px solid transparent;
  color: var(--ink2); transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--card); color: var(--ink); border-color: var(--line); }

/* ── Layout ── */
.wrap {
  max-width: 720px; margin: 0 auto;
  padding: 1.25rem 1.1rem calc(var(--tab-h) + 1.5rem);
}
h2.title { margin: .2rem 0 .3rem; font-size: 1.7rem; line-height: 1.15; }
.subtitle { color: var(--muted); font-size: .95rem; margin: 0 0 1.4rem; }
.muted { color: var(--muted); }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }
.section-head {
  display: flex; align-items: baseline; gap: .6rem;
  margin: 1.8rem 0 .9rem;
}
.section-head h3 { margin: 0; font-size: 1.15rem; }
.section-head .count {
  font-size: .8rem; color: var(--muted); font-family: var(--font-body);
  background: var(--card); border: 1px solid var(--line);
  padding: .1rem .5rem; border-radius: 999px;
}

/* ── Inputs ── */
input, textarea, select {
  width: 100%; padding: .75rem .9rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--r);
  font-size: 1rem; font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
label { display: block; font-size: .8rem; color: var(--ink2); font-weight: 500; margin: .8rem 0 .3rem; }

/* ── Buttons ── */
.btn {
  border: none; border-radius: var(--r); padding: .62rem 1.1rem; font-weight: 600;
  background: var(--accent); color: #fff; font-size: .95rem;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--accent2); }
.btn:active { transform: scale(.98); }
.btn.alt {
  background: var(--card); color: var(--ink); border: 1px solid var(--line2); box-shadow: none;
}
.btn.alt:hover { background: #fff; border-color: var(--muted); }
.btn.warn { background: transparent; color: var(--danger); border: 1px solid #d8b0aa; box-shadow: none; }
.btn.warn:hover { background: #fbeeec; }
.btn.small { padding: .4rem .75rem; font-size: .85rem; }

/* ── Cards ── */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem; margin-bottom: .85rem; box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.card h3 { margin: 0 0 .35rem; font-size: 1.15rem; line-height: 1.25; }
.card .meta { color: var(--muted); font-size: .8rem; }
.snippet {
  color: var(--ink2); font-size: .9rem; margin-top: .5rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.clickable { cursor: pointer; }
.clickable:hover { border-color: var(--line2); box-shadow: var(--shadow); transform: translateY(-1px); }

/* nota da fila de revisão: destaque com faixa terracota à esquerda */
.review-card { position: relative; padding-left: 1.25rem; }
.review-card::before {
  content: ""; position: absolute; left: 0; top: .9rem; bottom: .9rem; width: 4px;
  border-radius: 999px; background: var(--accent);
}

/* ── Captura rápida ── */
.capture { padding: .5rem; }
.capture.card { padding: .6rem; }
.capture textarea { border: none; background: transparent; min-height: 2.8rem; padding: .55rem .6rem; }
.capture textarea:focus { box-shadow: none; }
.capture-foot {
  display: flex; align-items: center; gap: .5rem; padding: .1rem .4rem .3rem;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .25s ease, opacity .2s;
}
.capture.open .capture-foot { max-height: 4rem; opacity: 1; }

/* ── Tags ── */
.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.tag {
  display: inline-block; font-size: .72rem; font-weight: 500; color: var(--ink2);
  background: color-mix(in srgb, var(--paper2) 60%, #fff);
  border: 1px solid var(--line); border-radius: 999px; padding: .12rem .55rem;
}

/* ── Explorer de pastas (estilo VS Code) ── */
.tree {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: .4rem; box-shadow: var(--shadow-sm);
}
.tree-row {
  display: flex; align-items: center; gap: .4rem; padding: .4rem .5rem;
  border-radius: var(--r-sm); cursor: pointer; font-size: .93rem; color: var(--ink);
  user-select: none; transition: background .1s;
}
.tree-row:hover { background: var(--paper); }
.tree-row .ic { display: inline-flex; flex: none; }
.tree-row .ic svg { width: 17px; height: 17px; }
.tree-row .ic.chevron { color: var(--muted); transition: transform .15s; }
.tree-row.open .ic.chevron { transform: rotate(90deg); }
.tree-row .ic.folder { color: var(--accent); }
.tree-row .ic.file { color: var(--muted); }
.ic-spacer { width: 17px; flex: none; }
.tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row.folder > .tree-name { font-weight: 600; }
.tree-row.file > .tree-name { color: var(--ink2); }
.tree-count {
  flex: none; font-size: .72rem; color: var(--muted);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0 .45rem;
}
.dot-new { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); flex: none; }

/* breadcrumb de pasta (no lugar das tags) */
.crumb {
  display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  margin-top: .55rem; font-size: .78rem; color: var(--muted);
}
.crumb .ic { display: inline-flex; color: var(--accent); }
.crumb .ic svg { width: 14px; height: 14px; }
.crumb .sep { opacity: .55; }

/* ── Layout de dois painéis (sidebar em árvore + leitor) ── */
body.wide .wrap { max-width: 1080px; }
.explorer { display: flex; gap: 1.3rem; align-items: flex-start; }
.sidebar {
  width: 320px; flex: none; position: sticky; top: 4.3rem;
  max-height: calc(100vh - 5.6rem - var(--tab-h));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.sidebar-head { padding: .75rem .7rem .6rem; border-bottom: 1px solid var(--line); }
.sidebar-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: .55rem; }
.sidebar-head input { padding: .5rem .7rem; font-size: .9rem; }
.treebox { padding: .4rem; overflow-y: auto; }
.tree-row.file.active { background: var(--accent-wash); }
.tree-row.file.active > .tree-name { color: var(--ink); font-weight: 600; }

.reader { flex: 1; min-width: 0; }
.reader-bar { display: flex; align-items: center; gap: .5rem; min-height: 2.1rem; }
.reader-empty {
  display: grid; place-items: center; gap: .7rem; text-align: center;
  color: var(--muted); padding: 4.5rem 1rem;
}
.reader-empty .ic { color: var(--line2); }
.reader-empty .ic svg { width: 40px; height: 40px; }
.only-mobile { display: none; }

/* celular: master-detail (árvore OU leitor) */
@media (max-width: 820px) {
  .explorer { display: block; }
  .sidebar { width: auto; position: static; max-height: none; }
  .reader { display: none; margin-top: 1rem; }
  .only-mobile { display: inline-flex; }
  .explorer.reading .sidebar { display: none; }
  .explorer.reading .reader { display: block; margin-top: 0; }
}

/* ── Chips de tipo ── */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .74rem; font-weight: 600; border-radius: 999px; padding: .15rem .6rem;
}
.chip::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.chip.duvida { color: var(--duvida); background: #a8630f14; border: 1px solid #a8630f33; }
.chip.ideia  { color: var(--ideia);  background: #4f7a3a14; border: 1px solid #4f7a3a33; }
.chip.nota   { color: var(--nota);   background: #35638f14; border: 1px solid #35638f33; }
.chip.comentario { color: #6d51a6; background: #6d51a614; border: 1px solid #6d51a633; }
.chip.anotacao { color: var(--accent2); background: var(--accent-wash); border: 1px solid #e6c6b6; }
.chip.resolvida  { color: var(--ideia); background: #4f7a3a14; border: 1px solid #4f7a3a33; }

/* ── Anotações ancoradas (seleção → dúvida/ideia/comentário) ── */
.quote {
  margin: .5rem 0 .6rem; padding: .4rem .85rem; border-left: 3px solid var(--line2);
  background: color-mix(in srgb, var(--paper2) 40%, transparent); color: var(--ink2);
  font-size: .9rem; font-style: italic; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.modal .quote { font-style: normal; }
mark.hl {
  background: #ffe583; color: inherit; padding: .04em .12em; border-radius: .25em; cursor: pointer;
  box-shadow: 0 0 0 1px #f0d165; transition: background .15s;
}
mark.hl:hover { background: #ffd84d; }
/* balão com o texto da anotação */
.anno-pop {
  position: absolute; z-index: 40; max-width: min(360px, 88vw);
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: .8rem 1rem; animation: fade .12s ease;
}
.anno-pop .md { font-size: .92rem; }
.anno-meta { margin-top: .5rem; color: var(--muted); font-size: .72rem; }
.anno-pop .anno-actions { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.entry.flash { animation: flash 1.2s ease; }
@keyframes flash { 0%, 100% { box-shadow: var(--shadow-sm); } 30% { box-shadow: 0 0 0 3px var(--accent-wash); } }

/* menu flutuante ao selecionar texto */
.sel-pop {
  position: absolute; z-index: 60; display: flex; gap: .1rem; padding: .25rem;
  background: var(--pop-bg); border-radius: 999px; box-shadow: var(--shadow-lg);
}
.sel-pop .sel-btn {
  background: transparent; color: var(--pop-fg); border: none; border-radius: 999px;
  padding: .5rem 1rem; font-size: .9rem; font-weight: 500; min-height: 40px; touch-action: none;
}
.sel-pop .sel-btn:hover { background: rgba(255, 255, 255, .15); }

/* no toque: barra nativa do sistema cobre a página, então o botão vai FIXO
   embaixo (acima da tab bar), centralizado, longe da barra nativa. */
.sel-pop.docked {
  position: fixed; top: auto; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tab-h) + 1rem + env(safe-area-inset-bottom));
  background: var(--accent); padding: .3rem;
  animation: toast-in .18s ease;
}
.sel-pop.docked .sel-btn {
  color: #fff; font-weight: 600; font-size: .95rem; padding: .6rem 1.3rem; min-height: 44px;
}
.sel-pop.docked .sel-btn:hover { background: rgba(0, 0, 0, .12); }

/* modal de anotação */
.modal-overlay {
  position: fixed; inset: 0; z-index: 40; background: rgba(42, 38, 32, .42);
  display: grid; place-items: center; padding: 1rem; backdrop-filter: blur(2px); animation: fade .15s ease;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(460px, 94vw); background: var(--card); border: 1px solid var(--line2);
  border-radius: var(--r-lg); padding: 1.3rem; box-shadow: var(--shadow-lg);
}
.modal-head { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin-bottom: .5rem; }
.modal .seg { margin: .7rem 0; }

/* ── Progresso de leitura ── */
/* linha "Lida até aqui" (marcador de leitura sobre o texto) */
.read-marker {
  position: absolute; left: -.4rem; right: -.4rem; height: 0; z-index: 3; pointer-events: none;
  border-top: 2px solid var(--danger);
}
.read-marker::before {
  content: ''; position: absolute; left: -2px; top: -4px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--danger);
}
.read-flag {
  position: absolute; right: 0; top: 0; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: .35rem; pointer-events: auto;
  background: var(--danger); color: #fff; font-size: .7rem; font-weight: 600;
  padding: .2rem .55rem; border-radius: .5rem; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(178, 59, 48, .4);
}
.read-flag .flag-ic { display: inline-flex; }
.read-flag .flag-ic svg { width: 13px; height: 13px; }
/* desktop: joga o flag para a margem direita, fora da coluna de texto */
@media (min-width: 821px) {
  .reader .md.has-marker { margin-right: 10.5rem; }
  .read-flag { transform: translate(calc(100% + .6rem), -50%); }
  .read-flag::before {
    content: ''; position: absolute; left: -.5rem; top: 50%; transform: translateY(-50%);
    border: .3rem solid transparent; border-right-color: var(--danger);
  }
}
.read-done-wrap { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: .5rem 0; }
.read-done-wrap .hint { flex: 1; min-width: 11rem; color: var(--muted); font-size: .8rem; }
.read-done.done { color: var(--ideia); border-color: #9dbb8e; background: #eef4e9; }

/* ── Frequência de revisão + deadline + arquivar ── */
.freq-head { display: flex; align-items: center; gap: .5rem; }
.freq-head .freq-ic { color: var(--accent); display: inline-flex; }
.freq-head .freq-ic svg { width: 18px; height: 18px; }
.freq-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.freq-label { font-size: .8rem; color: var(--muted); margin: .8rem 0 .45rem; }
.seg.wrap { flex-wrap: wrap; }
.freq-card.arquivada { opacity: .85; }
.deadline {
  display: flex; align-items: center; gap: .5rem; margin-top: .85rem;
  padding: .5rem .75rem; border-radius: var(--r-sm); font-size: .86rem; font-weight: 500;
}
.deadline-dot { width: .55rem; height: .55rem; border-radius: 50%; flex: none; background: currentColor; }
.deadline.ok { background: #eef4e9; color: #3f6a2f; }
.deadline.breve, .deadline.hoje { background: #fbf0da; color: #8a5d10; }
.deadline.atrasada { background: #fbeae7; color: #a5342a; }
.deadline.arquivada { background: var(--paper); color: var(--muted); }
.due-pill { font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap; }
.due-pill.ok { background: #dfebd6; color: #3f6a2f; }
.due-pill.breve, .due-pill.hoje { background: #f6e3c2; color: #8a5d10; }
.due-pill.atrasada { background: #f2cfc9; color: #a5342a; }

/* tag de revisão na direita da nota (dias, cor por temperatura) + arquivadas */
.due-tag {
  flex: none; font-size: .68rem; font-weight: 700; line-height: 1.5;
  padding: .04rem .42rem; border-radius: 999px; letter-spacing: .01em; min-width: 1.7rem; text-align: center;
}
.due-dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
/* nunca revisada: anel vago (não um ponto cheio) — num acervo novo TODAS são novas,
   um ponto cheio vira parede de laranja; o anel marca sem gritar. */
.due-dot.new { background: transparent; box-shadow: inset 0 0 0 1.6px #e5892a; opacity: .75; }
.tree-row.file.arq { opacity: .5; }
.tree-row.file.arq .tree-name { text-decoration: line-through; text-decoration-color: var(--line2); }

/* ── Progresso / Dashboard ── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .7rem; margin: 1.1rem 0 1.4rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: .85rem 1rem; box-shadow: var(--shadow-sm); }
.stat-val { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1; color: var(--ink); }
.stat-lbl { margin-top: .35rem; font-size: .77rem; color: var(--muted); }
.stat.ok .stat-val { color: var(--ideia); }
.stat.warn .stat-val { color: #b06a12; }
.stat.mut .stat-val { color: var(--muted); }
.stat.accent .stat-val { color: var(--accent); }

.dash-2col { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 720px) { .dash-2col { grid-template-columns: minmax(0, 330px) 1fr; align-items: start; } }
.cal-card { padding: 1rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.cal-title { font-family: var(--font-display); font-weight: 600; }
.cal-head .icon-btn { font-size: 1.35rem; line-height: 1; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.cal-wd { min-width: 0; text-align: center; font-size: .66rem; color: var(--muted); padding-bottom: .25rem; text-transform: uppercase; letter-spacing: .03em; overflow: hidden; }
.cal-cell { min-width: 0; aspect-ratio: 1; display: grid; place-items: center; border: 1.5px solid transparent; border-radius: .5rem; background: transparent; font-size: .82rem; color: var(--ink2); cursor: pointer; transition: background .12s; }
.cal-cell.empty { visibility: hidden; cursor: default; }
.cal-cell:hover { background: var(--paper); }
.cal-cell.has { background: color-mix(in srgb, var(--accent) calc(var(--i, .3) * 60%), var(--card)); color: var(--ink); font-weight: 600; }
.cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--line2); }
.cal-cell.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); color: var(--accent2); font-weight: 700; }

.day-detail { padding: 1.1rem; }
.day-title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin-bottom: .7rem; }
.day-rows { display: flex; flex-direction: column; }
.day-row { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.day-row:last-child { border-bottom: none; }
.day-ic { width: 1.4rem; text-align: center; color: var(--accent); }
.day-lbl { flex: 1; color: var(--ink2); font-size: .92rem; }
.day-val { font-weight: 700; font-family: var(--font-display); }
.day-sub { margin: 1.1rem 0 .6rem; font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* segmento dúvida/ideia/nota */
.seg { display: inline-flex; background: var(--paper); border: 1px solid var(--line2); border-radius: var(--r); padding: .2rem; gap: .15rem; }
.seg button {
  background: transparent; color: var(--muted); border: none; border-radius: calc(var(--r) - .35rem);
  padding: .35rem .7rem; font-size: .85rem; font-weight: 500; transition: background .15s, color .15s;
}
.seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ── Markdown ── */
.md { line-height: 1.65; word-wrap: break-word; color: var(--ink); }
.md h1, .md h2, .md h3 { font-family: var(--font-display); line-height: 1.25; margin: 1.4rem 0 .6rem; }
.md h1 { font-size: 1.5rem; } .md h2 { font-size: 1.25rem; } .md h3 { font-size: 1.08rem; }
.md p { margin: .7rem 0; }
.md ul, .md ol { padding-left: 1.3rem; margin: .6rem 0; }
.md li { margin: .25rem 0; }
.md code {
  background: color-mix(in srgb, var(--paper2) 55%, #fff); padding: .12rem .38rem;
  border-radius: .35rem; border: 1px solid var(--line);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em; color: #7a3a20;
}
.md pre {
  background: #2c2822; color: #ede4d3; padding: .95rem 1.05rem; border-radius: var(--r);
  overflow: auto; margin: .8rem 0; line-height: 1.5;
}
.md pre code { background: transparent; border: none; padding: 0; color: inherit; }
.md blockquote {
  margin: .8rem 0; padding: .3rem 1rem; border-left: 3px solid var(--accent);
  color: var(--ink2); background: color-mix(in srgb, var(--accent-wash) 30%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.md a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.md table { border-collapse: collapse; margin: .8rem 0; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--line2); padding: .4rem .6rem; text-align: left; }
.md th { background: var(--paper); font-weight: 600; }

/* ── Divisores, estados ── */
.err { color: var(--danger); font-size: .85rem; min-height: 1em; }
.empty {
  color: var(--muted); text-align: center; padding: 3rem 1rem;
  border: 1px dashed var(--line2); border-radius: var(--r); background: color-mix(in srgb, var(--card) 60%, transparent);
}
.divider { height: 1px; background: var(--line); margin: 1.3rem 0; border: none; }
.back { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink2); font-size: .9rem; font-weight: 500; }
.back:hover { color: var(--accent); }

/* ── Histórico ── */
.day-head {
  position: sticky; top: 3.4rem; z-index: 2;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--ink2);
  margin: 1.6rem 0 .7rem; padding: .2rem 0;
  background: linear-gradient(var(--paper), var(--paper) 70%, transparent);
}

/* ── Tab bar inferior flutuante ── */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 8;
  bottom: calc(.9rem + env(safe-area-inset-bottom));
  display: flex; gap: .2rem; padding: .35rem;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid var(--line2); border-radius: 999px;
  box-shadow: var(--shadow-lg); backdrop-filter: blur(10px);
}
.tabbar a {
  display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
  min-width: 4.4rem; padding: .45rem .7rem; border-radius: 999px;
  color: var(--muted); font-size: .72rem; font-weight: 500;
  transition: color .15s, background .15s;
}
.tabbar a svg { width: 21px; height: 21px; }
.tabbar a:hover { color: var(--ink2); }
.tabbar a.active { color: var(--accent); background: var(--accent-wash); }

/* ── Instalar ── */
#install {
  position: fixed; right: 1rem; bottom: calc(var(--tab-h) + 1rem); z-index: 10;
  background: var(--pop-bg); color: var(--pop-fg); border: none; border-radius: 999px;
  padding: .6rem 1.05rem; font-weight: 600; font-size: .88rem; box-shadow: var(--shadow-lg);
}

/* ── Toast ── */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + 1.2rem); transform: translateX(-50%);
  background: var(--pop-bg); color: var(--pop-fg); padding: .6rem 1.1rem; border-radius: 999px;
  z-index: 20; box-shadow: var(--shadow-lg); font-size: .9rem; font-weight: 500;
  animation: toast-in .25s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, .5rem); } }

/* ── Entrada em cascata dos cartões ── */
.stagger > * { animation: rise .4s ease backwards; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .06s; }
.stagger > *:nth-child(3) { animation-delay: .10s; }
.stagger > *:nth-child(4) { animation-delay: .14s; }
.stagger > *:nth-child(5) { animation-delay: .18s; }
.stagger > *:nth-child(n+6) { animation-delay: .22s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* ── Desktop: um respiro maior ── */
@media (min-width: 720px) {
  .wrap { padding-top: 1.8rem; }
  h2.title { font-size: 2rem; }
}

/* ═══════════════════ Refinamentos de acabamento ═══════════════════ */

/* textura de papel sutil (grain) — reforça o "diário de estudo" */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* tipografia display com optical sizing + títulos mais afiados */
h1, h2, h3, .cal-title, .freq-title, .day-title, .sidebar-title, .brand, .modal-head, .stat-val, .day-val {
  font-optical-sizing: auto;
}
h2.title { letter-spacing: -.02em; }

/* barras de rolagem finas e quentes */
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 999px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.sidebar ::-webkit-scrollbar-thumb { border-color: var(--card); }

/* foco de teclado visível e no tom (inputs já têm seu próprio realce) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
input:focus-visible, textarea:focus-visible { outline: none; }

/* conforto de leitura no leitor */
.reader .md { font-size: 1.02rem; line-height: 1.72; }
.reader .md p { margin: .82rem 0; }

/* entrada suave ao trocar de tela (o explorer não anima, p/ não afetar o leitor) */
#view > *:not(.explorer) { animation: rise .5s cubic-bezier(.2, .75, .2, 1) backwards; }
#view > *:nth-child(2):not(.explorer) { animation-delay: .05s; }
#view > *:nth-child(3):not(.explorer) { animation-delay: .10s; }
#view > *:nth-child(4):not(.explorer) { animation-delay: .15s; }

/* dashboard: números tabulares + leve elevação no hover */
.stat-val, .day-val, .cal-cell, .due-tag { font-variant-numeric: tabular-nums; }
.stat { transition: transform .14s, box-shadow .14s, border-color .14s; }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line2); }
.cal-cell.today:not(.sel) { color: var(--accent2); font-weight: 700; }

/* tab bar: aro sutil no item ativo */
.tabbar a.active { box-shadow: inset 0 0 0 1px #e6c6b6; }

/* botões: micro-interação de toque */
.btn { transition: background .15s, transform .08s, box-shadow .15s; }
.btn:active { transform: translateY(1px) scale(.99); }

/* variáveis semânticas p/ as "pílulas escuras" (invertem no tema escuro) */
:root { --pop-bg: var(--ink); --pop-fg: var(--paper); }

/* ═══════════════════ Cabeçalho editorial ═══════════════════ */
.dateline {
  flex: 1; text-align: center; padding: 0 1rem; min-width: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: .95rem; color: var(--ink2); letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions { display: flex; align-items: center; gap: .15rem; }
@media (max-width: 640px) { .dateline { display: none; } }

/* botão de tema: mostra o alvo (claro→lua, escuro→sol) */
#theme-toggle .ic-sun { display: none; }
#theme-toggle .ic-moon { display: inline; }
[data-theme="dark"] #theme-toggle .ic-moon { display: none; }
[data-theme="dark"] #theme-toggle .ic-sun { display: inline; }

/* ═══════════════════ Capitular (drop cap) na abertura da nota ═══════════════════ */
.reader .md > p:first-of-type::first-letter {
  float: left; font-family: var(--font-display); font-weight: 600;
  font-size: 3.15rem; line-height: .76; padding: .32rem .5rem 0 0; color: var(--accent);
}

/* ═══════════════════ Modo escuro "candeeiro" (papel à luz de lampião) ═══════════════════ */
[data-theme="dark"] {
  color-scheme: dark;
  --paper:  #1d1813; --paper2: #15110c; --card: #262019;
  --ink:    #ece2d2; --ink2:   #bcb1a0; --muted: #8b8070;
  --line:   #342c23; --line2:  #473d31;
  --accent: #d76a44; --accent2: #e88458; --accent-wash: #3a2820;
  --duvida: #cf9a4f; --ideia: #82ac66; --nota: #6fa2cd; --danger: #e06a5c;
  --pop-bg: #39312a; --pop-fg: #ece2d2;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
  --shadow:    0 2px 6px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.6);
}
[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 100% -10%, #241c15 0%, transparent 55%),
    radial-gradient(900px 500px at -10% 110%, #191309 0%, transparent 50%),
    var(--paper);
}
[data-theme="dark"] body::before { mix-blend-mode: overlay; opacity: .09; }
[data-theme="dark"] mark.hl { color: #241d16; box-shadow: 0 0 0 1px #d9be6a; }
[data-theme="dark"] .md code { background: #2f2820; border-color: var(--line2); color: #e6a570; }
[data-theme="dark"] .md pre { background: #14100b; }
[data-theme="dark"] .md th { background: #221c15; }
[data-theme="dark"] .login-mark { border-color: #5a3a2c; }
[data-theme="dark"] .stat.warn .stat-val { color: #d6a154; }
[data-theme="dark"] .read-done.done { background: #24301f; border-color: #47603a; color: #9ec983; }
[data-theme="dark"] .deadline.ok { background: #22301c; color: #9ec983; }
[data-theme="dark"] .deadline.breve, [data-theme="dark"] .deadline.hoje { background: #322914; color: #dcb35a; }
[data-theme="dark"] .deadline.atrasada { background: #35201c; color: #e58a7d; }
[data-theme="dark"] .due-pill.ok { background: #2a3a22; color: #a6d189; }
[data-theme="dark"] .due-pill.breve, [data-theme="dark"] .due-pill.hoje { background: #3a2f16; color: #e0b85e; }
[data-theme="dark"] .due-pill.atrasada { background: #3f2420; color: #ec9084; }
[data-theme="dark"] .due-dot.new { background: transparent; box-shadow: inset 0 0 0 1.6px #e5892a; }