:root {
  --vinho: #7A1E2C; --vinho2: #5A1220; --vinho-s: #F6E7E6;
  --ouro: #B8912F; --ouro-s: #F6EDD8;
  --bg: #FBF6F1; --card: #FFFFFF; --txt: #2B1A1E; --mut: #86737A; --line: #EEE3DE;
  --ok: #3E7D5A; --ok-s: #E6F2EA; --warn: #A8682A; --warn-s: #FBEFE0; --bad: #9B2C3C; --bad-s: #F8E4E6;
  --r: 20px;
  --sh: 0 1px 2px rgba(90, 18, 32, .05), 0 6px 20px rgba(90, 18, 32, .06);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Nunito', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--txt); font-family: var(--sans); font-size: 16px; line-height: 1.45; }
body { background-image: radial-gradient(circle at 100% 0, #F5E1DE 0, transparent 40%), radial-gradient(circle at 0 100%, #F6EDD8 0, transparent 35%); background-attachment: fixed; min-height: 100vh; }
body.lock { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: var(--txt); }
h1, h2, h3 { margin: 0; }
h1 { font-family: var(--serif); font-weight: 700; font-size: 2.1rem; line-height: 1.05; color: var(--vinho2); }
h1 em { font-style: italic; color: var(--vinho); }
h2 { font-family: var(--serif); font-weight: 700; font-size: 1.4rem; color: var(--vinho2); margin-bottom: 10px; }
.muted { color: var(--mut); }
.small { font-size: .85rem; }
.center { text-align: center; }
.eyebrow { margin: 0 0 4px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--ouro); }

#app { max-width: 560px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom)); }
.top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 10px 4px 18px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--card); box-shadow: var(--sh); font-size: 1.3rem; flex-shrink: 0; color: var(--vinho); font-weight: 700; }

.card { background: var(--card); border-radius: var(--r); padding: 18px; margin-bottom: 14px; box-shadow: var(--sh); border: 1px solid var(--line); }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.link { color: var(--vinho); font-weight: 700; font-size: .9rem; }
.tag { display: inline-block; font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: var(--vinho-s); color: var(--vinho); }

/* Recado */
.recado { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #7A1E2C, #5A1220); color: #FBEFE8; border: 0; }
.recado .eyebrow { color: #E8C877; }
.curio { background: linear-gradient(160deg, #FFFDF8, #F7EEDC); border-color: #E9D9B4; }
.curio .eyebrow { color: var(--ouro); margin: 0; }
.curio-t { margin: 8px 0 0; font-family: var(--serif); font-size: 1.12rem; line-height: 1.35; font-weight: 600; color: #3A1A20; }
.curio-e { font-size: 1.3rem; margin-right: 6px; vertical-align: -2px; }
.curio-t.troca { animation: curioIn .35s ease; }
@keyframes curioIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.recado-t { margin: 2px 0 6px; font-family: var(--serif); font-size: 1.28rem; line-height: 1.25; font-weight: 600; }
.assin { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.05rem; opacity: .9; }
.coruja { width: 74px; flex-shrink: 0; background: #FBF1EA; border-radius: 50%; padding: 6px; }
.coruja .owl { display: block; animation: bob 3.5s ease-in-out infinite; }
.owl-eyes { animation: blink 5s infinite; transform-origin: 50% 47%; }
@keyframes bob { 50% { transform: translateY(-3px) rotate(-2deg); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* Mohs */
.mohs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -4px; scrollbar-width: none; }
.mohs::-webkit-scrollbar { display: none; }
.mohs-b { flex: 0 0 auto; min-width: 66px; padding: 8px 6px; border-radius: 14px; background: var(--bg); border: 1.5px solid var(--line); display: flex; flex-direction: column; align-items: center; }
.mohs-b b { font-family: var(--serif); font-size: 1.4rem; line-height: 1; color: var(--vinho); }
.mohs-b span { font-size: .7rem; color: var(--mut); font-weight: 700; }
.mohs-b.on { background: var(--vinho); border-color: var(--vinho); }
.mohs-b.on b, .mohs-b.on span { color: #fff; }
.mohs-r { margin: 10px 0 4px; padding: 12px 14px; background: var(--ouro-s); border-radius: 14px; font-size: .95rem; }

/* Prova */
.prova { display: flex; gap: 16px; align-items: center; background: var(--ouro-s); border-color: #EAD9AE; }
.prova-n { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.prova-n b { font-family: var(--serif); font-size: 2.8rem; line-height: 1; color: var(--vinho); }
.prova-n span { font-size: .75rem; font-weight: 800; color: var(--ouro); text-transform: uppercase; }
.prova-t { margin: 0; font-weight: 800; font-size: 1.05rem; }
.prova-hoje { margin: 0; font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--vinho); }
.prova p { margin-top: 0; }

/* Aulas */
.aulas { list-style: none; margin: 0; padding: 0; }
.aulas li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.aulas li:first-child { border-top: 0; }
.hora { font-variant-numeric: tabular-nums; font-size: .85rem; font-weight: 700; color: var(--mut); min-width: 92px; }
.a-nome { flex: 1; font-weight: 600; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; vertical-align: middle; margin-right: 2px; }
.dias { display: flex; gap: 6px; margin-bottom: 6px; overflow-x: auto; }

/* Chips & botões */
.chip { padding: 7px 13px; border-radius: 99px; background: var(--bg); border: 1.5px solid var(--line); font-size: .86rem; font-weight: 700; white-space: nowrap; }
.chip.on { background: var(--vinho); color: #fff; border-color: var(--vinho); }
.btn { display: block; width: 100%; padding: 14px; border-radius: 16px; background: var(--vinho); color: #fff; font-weight: 800; font-size: 1rem; box-shadow: 0 4px 14px rgba(122, 30, 44, .25); }
.btn:active { transform: scale(.98); }
.btn-soft { display: block; width: 100%; padding: 12px; border-radius: 14px; background: var(--vinho-s); color: var(--vinho); font-weight: 800; margin-top: 10px; }
.btn-danger { padding: 12px; border-radius: 14px; background: var(--bad-s); color: var(--bad); font-weight: 800; width: 100%; margin-top: 10px; }
.actions { display: flex; gap: 10px; margin-top: 16px; align-items: stretch; }
.actions > * { flex: 1; margin-top: 0; }
.seg { display: flex; background: #EFE4DF; border-radius: 14px; padding: 4px; margin-bottom: 14px; }
.seg button { flex: 1; padding: 9px; border-radius: 11px; font-weight: 800; font-size: .9rem; color: var(--mut); }
.seg button.on { background: var(--card); color: var(--vinho); box-shadow: var(--sh); }

/* Tarefas */
.task { display: flex; gap: 12px; align-items: center; padding: 12px; margin: 8px 0; background: var(--bg); border-radius: 16px; border: 1.5px solid var(--line); cursor: pointer; }
.card .task { background: #FCF9F7; }
.task.urgente { border-color: #E9C98F; background: #FFF9EE; }
.task.atrasada { border-color: #E8B7BE; background: #FFF5F6; }
.task.feita .task-t { text-decoration: line-through; color: var(--mut); }
.task-main { flex: 1; min-width: 0; }
.task-t { font-weight: 700; }
.task-meta { font-size: .8rem; color: var(--mut); margin-top: 2px; }
.task-meta b { color: var(--vinho); }
.check { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 2px solid #D8C5C0; color: transparent; font-weight: 900; font-size: .9rem; background: #fff; }
.check.on { background: var(--vinho); border-color: var(--vinho); color: #fff; }
.check.sm { width: 26px; height: 26px; font-size: .8rem; }
.sec { font-family: var(--sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mut); font-weight: 800; margin: 22px 4px 8px; }
.vazio { text-align: center; padding: 40px 10px; }
.vazio p { margin: 4px; }
.intro { margin: -6px 4px 16px; color: var(--mut); }

/* Pegmatito */
.peg { cursor: pointer; }
.peg-svg { display: block; width: 100%; height: auto; margin: 4px 0; }
.peg-vazio { font-family: var(--serif); font-style: italic; font-size: 15px; fill: var(--mut); }
.cr { animation: crescer .6s ease-out both; transform-box: fill-box; }
@keyframes crescer { from { opacity: 0; } }

/* Matérias */
.materia { position: relative; background: var(--card); border-radius: var(--r); padding: 16px 16px 16px 22px; margin-bottom: 12px; box-shadow: var(--sh); border: 1px solid var(--line); overflow: hidden; cursor: pointer; }
.materia::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--c); }
.m-top { display: flex; justify-content: space-between; align-items: center; }
.codigo { font-size: .75rem; font-weight: 800; letter-spacing: .06em; color: var(--c, var(--vinho)); }
.materia h3 { font-family: var(--serif); font-size: 1.3rem; margin: 2px 0 4px; color: var(--txt); }
.m-st { margin: 0; font-size: .88rem; font-weight: 700; color: var(--mut); }
.ok { color: var(--ok) !important; } .mid { color: var(--txt); } .warn { color: var(--warn) !important; } .bad { color: var(--bad) !important; }
.bar { position: relative; height: 7px; background: #F0E6E2; border-radius: 9px; margin-top: 10px; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--c); border-radius: 9px; }
.bar span { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--txt); opacity: .35; }

/* Sheet */
#sheet { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.sheet-bg { position: absolute; inset: 0; background: rgba(43, 26, 30, .4); opacity: 0; transition: opacity .25s; }
.sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; max-height: 92vh; background: var(--bg); border-radius: 26px 26px 0 0; transform: translateY(105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; }
#sheet.open { pointer-events: auto; }
#sheet.open .sheet-bg { opacity: 1; }
#sheet.open .sheet-panel { transform: none; }
.sheet-grip { display: flex; justify-content: flex-end; padding: 10px 12px 0; position: relative; }
.sheet-grip::before { content: ''; position: absolute; left: 50%; top: 10px; width: 44px; height: 5px; border-radius: 9px; background: #DCCBC5; transform: translateX(-50%); }
.x-close { width: 36px; height: 36px; border-radius: 50%; background: #EFE4DF; font-size: 1.4rem; line-height: 1; color: var(--mut); }
#sheet-body { overflow-y: auto; padding: 4px 20px calc(30px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
#sheet-body h2 { font-size: 1.7rem; }
label { display: block; font-size: .82rem; font-weight: 800; color: var(--mut); margin-top: 12px; }
label input, label select, label textarea, textarea, .add-row input { display: block; width: 100%; margin-top: 5px; padding: 12px 13px; border-radius: 13px; border: 1.5px solid var(--line); background: #fff; font-size: 1rem; font-weight: 600; }
textarea { resize: vertical; font-weight: 500 !important; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--vinho); outline-offset: 0; border-color: transparent; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.grid3 label { font-size: .74rem; }
label.toggle { display: flex; gap: 10px; align-items: center; font-size: .92rem; color: var(--txt); font-weight: 700; padding: 12px; background: #fff; border-radius: 13px; border: 1.5px solid var(--line); }
label.toggle input { width: 20px; height: 20px; accent-color: var(--vinho); margin: 0; }
.tipos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sh-head { border-left: 6px solid var(--c); padding: 2px 0 2px 14px; margin-bottom: 14px; }
.sh-head h2 { margin: 2px 0; }
.sh-head p { margin: 0; }
.calc { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.calc p { margin: 4px 0 0; }
.calc.ok { background: var(--ok-s); border-color: #CBE3D3; }
.calc.warn { background: var(--warn-s); border-color: #EFD6B5; }
.calc.bad { background: var(--bad-s); border-color: #EBC5CA; }
.calc-n { display: flex; justify-content: space-between; align-items: baseline; }
.calc-n span { font-size: .8rem; font-weight: 800; color: var(--mut); text-transform: uppercase; letter-spacing: .05em; }
.calc-n b { font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--vinho2); }
.calc-st { font-weight: 800; }
.avals { margin-top: 4px; }
.av { display: grid; grid-template-columns: 1fr 52px 62px 52px 30px; gap: 6px; align-items: center; margin-bottom: 6px; }
.av.soma { grid-template-columns: 1fr 70px 60px 30px; }
.av input { width: 100%; min-width: 0; padding: 10px 8px; border-radius: 11px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; text-align: center; }
.av input:first-child { text-align: left; }
.av input.nota { border-color: #E3CDA0; background: #FFFCF4; }
.av-h span { font-size: .7rem; font-weight: 800; color: var(--mut); text-transform: uppercase; text-align: center; }
.av-h span:first-child { text-align: left; }
.x { width: 30px; height: 30px; border-radius: 50%; color: var(--mut); font-size: 1.3rem; line-height: 1; }
.modelos { display: flex; flex-wrap: wrap; gap: 6px; }
.modelos p { width: 100%; margin: 0 0 2px; }
.aula-ed { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.aula-ed select, .aula-ed input { padding: 9px 6px; border-radius: 11px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; min-width: 0; }
.aula-ed input { flex: 1; }
.aula-ed span { font-size: .8rem; color: var(--mut); }
details.edit { margin-top: 22px; background: #fff; border-radius: 16px; border: 1.5px solid var(--line); padding: 12px 14px; }
details.edit summary { font-weight: 800; color: var(--vinho); cursor: pointer; }
.cores { display: flex; gap: 8px; flex-wrap: wrap; }
.cor { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--line); }
.cor.on { box-shadow: 0 0 0 2.5px var(--txt); }
.passo { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.passo span { flex: 1; font-weight: 600; }
.riscado { text-decoration: line-through; color: var(--mut); }
.add-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.add-row input { margin: 0; }
.add-row .btn-soft { width: 52px; margin: 0; flex-shrink: 0; font-size: 1.2rem; padding: 10px; }

/* Cartinhas */
.envelopes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.env { position: relative; background: linear-gradient(160deg, #FFFDFB, #F7EAE4); border: 1.5px solid #EAD6CF; border-radius: 18px; padding: 18px 12px 14px; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; box-shadow: var(--sh); overflow: hidden; }
.env::before { content: ''; position: absolute; top: -40px; left: 50%; width: 120px; height: 80px; background: #F1DDD5; transform: translateX(-50%) rotate(45deg); border-radius: 12px; z-index: 0; }
.env > * { position: relative; z-index: 1; }
.env-emoji { font-size: 2rem; }
.env-t { font-family: var(--serif); font-weight: 700; font-size: 1.08rem; line-height: 1.15; color: var(--vinho2); }
.selo { width: 28px; height: 28px; border-radius: 50%; background: var(--vinho); color: #F2D47E; display: grid; place-items: center; font-size: .9rem; box-shadow: 0 2px 6px rgba(122, 30, 44, .35); }
.env.aberta { opacity: .75; }
.carta { background: #FFFDF8; border-radius: 6px; padding: 26px 22px; margin: 6px 0 10px; box-shadow: 0 2px 14px rgba(90, 18, 32, .1); border: 1px solid #F0E4D4; background-image: repeating-linear-gradient(transparent, transparent 31px, #F3E8DA 32px); }
.carta-emoji { font-size: 2.4rem; margin: 0; text-align: center; }
.carta h2 { text-align: center; }
.carta-t { white-space: pre-line; font-family: var(--serif); font-size: 1.3rem; line-height: 32px; color: #3a2228; font-weight: 600; }
.carta .assin { text-align: right; color: var(--vinho); margin-top: 14px; font-size: 1.3rem; }

/* Coleção */
.minerais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mineral { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: var(--sh); gap: 2px; }
.mineral b { font-family: var(--serif); font-size: 1.02rem; color: var(--vinho2); line-height: 1.1; }
.mineral span { font-size: .68rem; color: var(--mut); line-height: 1.2; }
.mineral.lock b { color: var(--mut); }
.cristal { width: 56px; height: 56px; }
.min-sheet { text-align: center; padding-bottom: 10px; }
.min-sheet .cristal { width: 120px; height: 120px; }
.formula { font-weight: 800; color: var(--ouro); margin-top: 0; }

/* Nav */
#nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around; align-items: flex-end; max-width: 560px; margin: 0 auto; padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 252, 249, .94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; box-shadow: 0 -4px 20px rgba(90, 18, 32, .06); }
#nav button { display: flex; flex-direction: column; align-items: center; font-size: .7rem; font-weight: 800; color: var(--mut); padding: 4px 6px; min-width: 58px; }
#nav button span { font-size: 1.35rem; filter: grayscale(.6); opacity: .8; }
#nav button.on { color: var(--vinho); }
#nav button.on span { filter: none; opacity: 1; }
#nav .surto-btn { margin-top: -30px; }
#nav .surto-btn span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; filter: none; opacity: 1; background: radial-gradient(circle at 35% 30%, #A33446, #7A1E2C 60%, #5A1220); border: 4px solid #FBF6F1; box-shadow: 0 6px 18px rgba(122, 30, 44, .4); }
#nav .surto-btn b { color: var(--vinho); font-size: .68rem; margin-top: 2px; }

/* Surto */
#surto { position: fixed; inset: 0; z-index: 50; background: linear-gradient(170deg, #FDF4EF, #F4E0DC); overflow-y: auto; opacity: 0; pointer-events: none; transform: scale(1.03); transition: opacity .3s, transform .3s; }
#surto.open { opacity: 1; pointer-events: auto; transform: none; }
#surto-body { max-width: 560px; margin: 0 auto; padding: calc(18px + env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom)); position: relative; }
#surto h1 { margin: 8px 0 10px; }
.fechar { position: absolute; right: 14px; top: calc(14px + env(safe-area-inset-top)); width: 42px; height: 42px; border-radius: 50%; background: #fff; font-size: 1.5rem; color: var(--mut); box-shadow: var(--sh); }
.voltar { font-weight: 800; color: var(--vinho); padding: 8px 0; margin-bottom: 8px; }
.coruja.big { width: 110px; margin: 16px auto 0; }
.surto-msg { font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; text-align: center; margin: 0 6px 4px; font-weight: 600; color: var(--vinho2); }
.ferr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ferr button { background: #fff; border-radius: 18px; padding: 14px 12px; text-align: left; display: flex; flex-direction: column; gap: 1px; box-shadow: var(--sh); border: 1px solid var(--line); }
.ferr .fe { font-size: 1.6rem; }
.ferr b { font-size: .98rem; }
.ferr span:last-child { font-size: .78rem; color: var(--mut); }
.ferr-amor { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ferr-amor button, .ferr-amor a { display: block; padding: 14px; border-radius: 16px; background: var(--vinho); color: #fff; font-weight: 800; text-align: center; text-decoration: none; }
.ferr-amor button:first-child { background: var(--ouro-s); color: var(--vinho2); border: 1.5px solid #EAD9AE; }
.destaque { background: #fff; border-radius: 16px; padding: 14px; font-weight: 700; text-align: center; border: 1.5px solid var(--line); }
.resp { position: relative; height: 300px; display: grid; place-items: center; }
.resp-c { position: absolute; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, #E9B8C2, #B85A6E 70%); opacity: .85; transition: transform 4s ease-in-out; box-shadow: 0 0 60px rgba(184, 90, 110, .45); }
.resp-txt { position: relative; text-align: center; }
.resp-l { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; margin: 0; color: var(--vinho2); }
.resp-n { margin: 4px 0 0; font-weight: 800; color: var(--vinho2); opacity: .7; }
.corpo { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.corpo button { display: flex; align-items: center; gap: 12px; padding: 14px; background: #fff; border-radius: 16px; border: 1.5px solid var(--line); font-weight: 700; text-align: left; }
.corpo button span { font-size: 1.4rem; }
.corpo button i { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #D8C5C0; display: grid; place-items: center; font-style: normal; color: transparent; font-size: .8rem; }
.corpo button.on { background: var(--ok-s); border-color: #CBE3D3; }
.corpo button.on i { background: var(--ok); border-color: var(--ok); color: #fff; }
.prox { background: #fff; border-radius: 20px; padding: 18px; margin: 14px 0; text-align: center; border: 2px solid var(--vinho); }
.prox-t { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; margin: 4px 0 14px; }
.sugest { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.timer { margin: 26px auto; width: 210px; height: 210px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--sh), inset 0 0 0 8px var(--vinho-s); }
.timer b { font-family: var(--serif); font-size: 3.4rem; color: var(--vinho); font-variant-numeric: tabular-nums; }
.desp { display: flex; gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px solid #EAD6CF; }
.desp span { flex: 1; font-weight: 600; }
.desp .chip { padding: 6px 9px; font-size: .78rem; background: #fff; }
.chao { background: #fff; border-radius: 22px; padding: 30px 20px; text-align: center; margin: 16px 0; box-shadow: var(--sh); }
.chao-e { font-size: 3rem; margin: 0; }
.chao-t { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--vinho2); margin: 8px 0; }
.persp { background: #fff; border-radius: 22px; padding: 26px 20px; margin: 14px 0 0; box-shadow: var(--sh); border-left: 6px solid var(--ouro); }
.persp p { font-family: var(--serif); font-size: 1.4rem; line-height: 1.3; font-weight: 600; margin: 0; }
.real-m { background: #fff; border-radius: 14px; padding: 10px 12px; margin-bottom: 6px; border-left: 5px solid var(--c); font-size: .9rem; }
.real-m span { font-weight: 700; }

/* Toast & confete */
#toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 80; background: var(--txt); color: #fff; padding: 12px 18px; border-radius: 99px; font-weight: 700; font-size: .92rem; opacity: 0; pointer-events: none; transition: .3s; max-width: calc(100vw - 32px); width: max-content; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.show.clicavel { pointer-events: auto; cursor: pointer; }
.conf { position: fixed; top: -12px; width: 8px; height: 13px; z-index: 90; border-radius: 2px; pointer-events: none; animation: cair linear forwards; }
@keyframes cair { to { top: 105vh; transform: rotate(720deg) translateX(40px); } }

@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }
@media (max-width: 370px) { .minerais { grid-template-columns: 1fr 1fr; } h1 { font-size: 1.8rem; } .av { grid-template-columns: 1fr 44px 56px 46px 26px; } }
.a-nome small { display: block; font-size: .76rem; font-weight: 600; color: var(--mut); }
.tw { animation: tw 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; opacity: 0; }
@keyframes tw { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: .95; transform: scale(1); } }
.env.trancada { opacity: .6; filter: grayscale(.5); }

/* ===== Novidades ===== */
.atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.atalhos button { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 4px 10px; box-shadow: var(--sh); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .78rem; font-weight: 800; color: var(--vinho2); }
.atalhos button span { font-size: 1.5rem; }
.atalhos button i { position: absolute; top: 6px; right: 8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--vinho); color: #fff; font-style: normal; font-size: .7rem; display: grid; place-items: center; }
.tag.tag-prox { background: var(--ouro-s); color: var(--ouro); }
.tag.aviso { background: var(--warn-s); color: var(--warn); }
.m-top > span:last-child { display: flex; gap: 4px; }
.lbl { font-size: .82rem; font-weight: 800; color: var(--mut); margin: 14px 0 6px; }
.calc-n small { font-size: 1rem; color: var(--mut); }
.calc .actions { margin-top: 12px; }
.calc .bar { margin-top: 10px; }
button:disabled { opacity: .45; cursor: default; }
a.gcal { text-align: center; text-decoration: none; }

#focobar { position: fixed; left: 50%; transform: translate(-50%, 20px); bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 45; display: flex; gap: 10px; align-items: center; padding: 8px 16px; border-radius: 99px; background: var(--vinho2); color: #fff; font-weight: 800; font-size: .88rem; box-shadow: 0 8px 22px rgba(90, 18, 32, .35); opacity: 0; pointer-events: none; transition: .3s; cursor: pointer; }
#focobar.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#focobar.pausa { background: var(--ok); }
#focobar b { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
#focobar span:last-child:empty { display: none; }
body.tem-foco #app { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
.timer.pausa { box-shadow: var(--sh), inset 0 0 0 8px var(--ok-s); }
.timer.pausa b { color: var(--ok); }
.timer.tocando { animation: pulsa 3s ease-in-out infinite; }
.emoji-g { font-size: 4.2rem !important; }
@keyframes pulsa { 50% { transform: scale(1.05); box-shadow: var(--sh), inset 0 0 0 14px var(--vinho-s); } }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.stat-row > div { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 6px; text-align: center; display: flex; flex-direction: column; }
.stat-row b { font-family: var(--serif); font-size: 1.5rem; color: var(--vinho2); line-height: 1.1; }
.stat-row span { font-size: .72rem; color: var(--mut); font-weight: 700; }
.hbar { display: grid; grid-template-columns: 54px 1fr auto; gap: 8px; align-items: center; margin: 6px 0; font-size: .82rem; }
.hbar span { font-weight: 800; color: var(--mut); }
.hbar > div { height: 10px; background: #F0E6E2; border-radius: 9px; overflow: hidden; }
.hbar i { display: block; height: 100%; border-radius: 9px; }
.humor-svg { width: 100%; height: auto; display: block; }
.humor-svg text { font-size: 9px; fill: var(--mut); font-family: var(--sans); font-weight: 700; }

.pote { display: block; width: 190px; margin: 6px auto 0; }
.vit { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.vit > span { font-size: 1.2rem; }
.vit p { flex: 1; margin: 0; font-weight: 600; }
.vit small { display: block; font-size: .74rem; color: var(--mut); font-weight: 600; margin-top: 2px; }
.vit-s { margin-bottom: 10px; }
.vit-s small { display: block; margin-top: 8px; font-size: .78rem; color: var(--mut); font-weight: 700; }

.deck { display: flex; gap: 8px; align-items: center; padding: 12px 12px 12px 16px; background: #fff; border: 1.5px solid var(--line); border-left: 5px solid var(--c); border-radius: 16px; margin-bottom: 8px; }
.deck-i { flex: 1; min-width: 0; }
.deck-i b { display: block; font-size: .95rem; }
.deck-i span { font-size: .78rem; color: var(--mut); }
.deck .chip { padding: 7px 10px; }
.card-ed { display: grid; grid-template-columns: 1fr 1fr 30px; gap: 6px; margin-bottom: 6px; align-items: center; }
.card-ed input { width: 100%; min-width: 0; padding: 10px; border-radius: 11px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; font-size: .9rem; }
.flash { background: #fff; border-radius: 22px; padding: 34px 22px; margin: 10px 0 14px; min-height: 220px; display: flex; flex-direction: column; justify-content: center; text-align: center; box-shadow: var(--sh); border: 1.5px solid var(--line); cursor: pointer; transition: transform .25s; }
.flash:active { transform: scale(.98); }
.flash.virado { border-color: var(--ouro); background: linear-gradient(180deg, #fff, #FFFBF0); }
.flash-f { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--vinho2); margin: 0 0 8px; line-height: 1.25; }
.flash hr { border: 0; border-top: 1.5px dashed var(--line); width: 60%; margin: 14px auto; }
.flash-v { font-size: 1.15rem; font-weight: 800; margin: 0; }

.cal { padding: 14px; }
.cal-top { align-items: center; margin-bottom: 8px; }
.cal-top h2 { margin: 0; font-size: 1.3rem; }
.icon-btn.sm { width: 36px; height: 36px; font-size: 1.3rem; box-shadow: none; background: var(--bg); }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-h { text-align: center; font-size: .72rem; font-weight: 800; color: var(--mut); padding: 4px 0; }
.cal-d { aspect-ratio: 1; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .9rem; }
.cal-d b { font-weight: 700; }
.cal-d span { display: flex; gap: 2px; height: 6px; }
.cal-d span i { width: 6px; height: 6px; border-radius: 50%; }
.cal-d.hoje b { color: var(--vinho); font-weight: 900; }
.cal-d.hoje { box-shadow: inset 0 0 0 1.5px var(--vinho); }
.cal-d.prova { background: var(--ouro-s); }
.cal-d.sel { background: var(--vinho); }
.cal-d.sel b { color: #fff; }
body.tem-foco #toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
.cal-d.sel span i { box-shadow: 0 0 0 1.5px #fff; }
.sweep { transform-box: fill-box; animation: varre 6s ease-in-out infinite; }
@keyframes varre { 0% { transform: translateX(0); } 30%, 100% { transform: translateX(750%); } }
.hidden { display: none; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; margin-top: 10px; font-size: .74rem; font-weight: 700; color: var(--mut); }
.legenda span { display: flex; align-items: center; gap: 5px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.frente-pol { animation: brilhaFrente 2.4s ease-in-out infinite; }
@keyframes brilhaFrente { 50% { opacity: .1; } }