/* ==========================================================================
   v8 — A padaria: Heute (balcão + forno + Brot des Tages), Der Ofen, Schreiben,
   Tagebuch, o painel Musik e as transições. Último CSS da página.
   ========================================================================== */

/* ----------------------------------------------------------- Tag & Nacht na ilustração */
:root[data-theme="light"] .night-only, :root:not([data-theme]) .night-only{ display:none; }
:root[data-theme="dark"] .day-only{ display:none; }
.scene-bulb{ fill:#6B5A4D; }
:root[data-theme="dark"] .scene-bulb{ fill:#F4B860; }
.scene-glow{ opacity:.9; }

/* ----------------------------------------------------------- Heute */
.today-head{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-5); }
.today-mascot{ flex:none; transform:rotate(-5deg); transition:transform var(--dur-base) var(--ease); }
.today-mascot:hover{ transform:rotate(3deg) translateY(-2px); }
.today-mascot .mascot{ display:block; }
.today-hello h1{ margin:2px 0 4px; }
.today-head .hud{ align-self:end; justify-content:flex-end; }
.view-head .hud{ flex:none; }

.today-top{ display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:var(--sp-4); margin-bottom:var(--sp-4); }
.today-scene{ position:relative; min-height:300px; border:2px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--tile); }
.scene-wrap{ position:absolute; inset:0; }
.scene-art{ width:100%; height:100%; display:block; }
.bubble{
  position:relative; z-index:1; margin:22px 0 22px 24px; width:min(360px, calc(100% - 48px)); box-sizing:border-box;
  background:var(--fliese); color:var(--kaffee); border:2px solid var(--kaffee); border-radius:18px; padding:16px 18px;
}
:root[data-theme="dark"] .bubble{ background:var(--paper-raised); color:var(--ink); border-color:var(--line); }
.bubble::after{ content:''; position:absolute; right:-11px; top:58px; width:18px; height:18px; background:inherit; border-top:2px solid; border-right:2px solid; border-color:inherit; transform:rotate(45deg); }
.bubble-title{ margin:0 0 4px; font-family:var(--font-display); font-size:1.42rem; line-height:1.2; }
.bubble-text{ margin:0 0 14px; font-size:.98rem; line-height:1.45; color:inherit; opacity:.85; }
.bubble-actions{ display:flex; flex-direction:column; gap:8px; }
.bubble-actions .btn{ justify-content:flex-start; text-align:left; min-height:44px; }
.bubble-more{ display:flex; gap:14px; margin-top:10px; font-size:.86rem; }
.bubble-more a{ color:inherit; opacity:.8; }

.today-oven{ display:flex; flex-direction:column; gap:10px; border:2px solid var(--line); border-radius:var(--radius-lg); background:var(--paper-raised); padding:14px 16px 16px; min-width:0; }
.tc-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tc-head h2{ margin:0; font-size:1.3rem; }
.tc-off{ font-size:.8rem; font-weight:650; color:var(--ink-faint); border:1.5px solid var(--hairline-strong); border-radius:var(--radius-pill); padding:1px 9px; }
.tc-shelf{ display:flex; gap:2px; }
.tc-shelf .bake-art{ width:26px; height:20px; }
.to-art{ background:var(--paper-sunken); border-radius:14px; padding:8px 18px 4px; }
.to-art .oven-art{ width:100%; height:auto; display:block; }
.to-chips{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.to-chip{ display:flex; flex-direction:column; align-items:center; gap:0; padding:6px 4px; border:2px solid var(--line); border-radius:12px; background:var(--paper-raised); color:var(--ink); font:inherit; font-weight:650; font-size:.9rem; cursor:pointer; min-height:46px; }
.to-chip small{ font-weight:500; color:var(--ink-faint); font-size:.78rem; }
.to-chip:hover{ background:var(--butter-soft); }
.to-chip.is-on{ background:var(--butter); color:var(--kaffee); }
.to-chip.is-on small{ color:var(--kaffee); }
:root[data-theme="dark"] .to-chip.is-on{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
:root[data-theme="dark"] .to-chip.is-on small{ color:var(--accent-ink); }
.to-start{ justify-content:center; width:100%; }
.to-more, .tc-link{ font-size:.88rem; color:var(--teal-ink); text-decoration:none; display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.to-more:hover, .tc-link:hover{ text-decoration:underline; }
.to-live{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.to-time{ font-family:var(--font-display); font-size:2rem; font-variant-numeric:tabular-nums; line-height:1; }

/* Brot des Tages: uma etiqueta de papel de padaria */
.brot-des-tages{
  display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:var(--sp-4); align-items:center;
  margin-bottom:var(--sp-4); padding:12px 14px 12px 12px; border:1.5px solid var(--hairline-strong); border-radius:16px;
  background:var(--paper-raised) repeating-linear-gradient(90deg, transparent 0 18px, color-mix(in srgb, var(--kruste) 5%, transparent) 18px 19px);
}
.bdt-tag{ position:relative; display:flex; flex-direction:column; gap:1px; padding:10px 14px 10px 26px; background:var(--kruste); color:#FBF9F3; border-radius:8px 14px 14px 8px; clip-path:polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); min-width:132px; }
.bdt-tag b{ font-family:var(--font-display); font-weight:400; font-size:1.05rem; line-height:1.1; }
.bdt-tag span:last-child{ font-size:.78rem; font-weight:650; opacity:.9; }
.bdt-hole{ position:absolute; left:12px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--paper-raised); }
.kind-kultur .bdt-tag{ background:var(--salbei); }
.kind-entdeckung .bdt-tag{ background:#6C8A93; }
.bdt-body{ min-width:0; }
.bdt-de{ margin:0; font-family:var(--font-reading); font-size:1.28rem; line-height:1.3; color:var(--ink); }
.bdt-pt{ margin:2px 0 0; color:var(--ink-soft); font-size:.95rem; }
.bdt-more{ margin:6px 0 0; color:var(--ink-soft); font-size:.9rem; line-height:1.5; max-width:78ch; }
.bdt-actions{ display:flex; gap:2px; align-items:center; align-self:start; }
.bdt-saved{ display:inline-flex; align-items:center; gap:4px; font-size:.84rem; color:var(--sage-ink); font-weight:600; padding:0 6px; }

.today-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-4); }
.today-grid .today-card{ grid-column:auto; border:1.5px solid var(--hairline-strong); border-radius:16px; background:var(--paper-raised); padding:14px 16px; gap:8px; transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.today-grid a.today-card:hover{ border-color:var(--line); transform:var(--lift); }
.today-card .tc-eyebrow{ display:flex; gap:8px; align-items:center; font-size:.84rem; font-weight:650; color:var(--ink-soft); text-transform:none; letter-spacing:0; }
.today-card h3{ font-size:1.22rem; line-height:1.2; }
.today-continue .progress-track{ width:100%; margin-top:4px; }
.today-sound .ts-sym{ min-width:64px; height:64px; font-size:1.6rem; }
.tw-task{ font-family:var(--font-reading); font-style:italic; font-size:1.05rem; color:var(--ink); margin:0; }
.today-write .tw-words .word-chip{ font-size:.95rem; }
.today-heat{ margin-top:var(--sp-4); border:1.5px solid var(--hairline-strong); border-radius:16px; background:var(--paper-raised); padding:14px 18px; }
.today-heat .th-head h2{ font-size:1.25rem; }
.th-stats b{ font-family:var(--font-display); font-weight:400; font-size:1.3rem; color:var(--ink); }

/* ----------------------------------------------------------- o forno (desenho) */
.oven-art{ display:block; width:100%; height:auto; }
.oven-art .oven-glow{ transition:opacity var(--dur-theme) var(--ease); }
.oven-art.is-hot.is-running .oven-glow{ animation:oven-warm 3.6s ease-in-out infinite; }
@keyframes oven-warm{ 0%,100%{ opacity:.86; } 50%{ opacity:1; } }
.oven-art .oven-item{ transition:transform 1.2s var(--ease); }
.shelf-art{ display:block; width:100%; height:auto; max-height:120px; }

/* ----------------------------------------------------------- Der Ofen */
.ofen-view .view-head{ align-items:flex-end; }
.ofen-grid{ display:grid; grid-template-columns:minmax(0, 1fr) 400px; gap:var(--sp-5); align-items:start; }
.ofen-main{ border:2px solid var(--line); border-radius:24px; background:var(--paper-raised); padding:20px 26px 24px; display:flex; flex-direction:column; gap:14px; position:relative; }
.om-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.om-label{ font-weight:650; color:var(--ink-soft); font-size:.95rem; }
.om-what{ background:var(--butter); color:var(--kaffee); }
:root[data-theme="dark"] .om-what{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.ofen-main.is-break .om-what{ background:var(--sage); color:var(--ink); }
.om-art{ position:relative; max-width:560px; width:100%; margin:0 auto; }
.om-art::after{  /* o calor saindo do forno: um halo âmbar, só enquanto assa */
  content:''; position:absolute; inset:18% 10% 8%; border-radius:40%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(240,176,92,.35), transparent); opacity:0; transition:opacity 800ms var(--ease);
}
.ofen-main.is-hot .om-art::after{ opacity:1; animation:oven-halo 4s ease-in-out infinite; }
@keyframes oven-halo{ 0%,100%{ transform:scale(1); opacity:.75; } 50%{ transform:scale(1.04); opacity:1; } }
.om-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-4); flex-wrap:wrap; }
.om-time{ font-family:var(--font-display); font-size:clamp(3rem, 2rem + 3vw, 4.6rem); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.om-stage{ margin-top:6px; color:var(--ink-soft); font-size:1rem; }
.om-stage b{ color:var(--ink); font-weight:650; }
.om-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.dough-track{ height:16px; border-width:2px; }
.dough-track .progress-fill{ background:linear-gradient(90deg, var(--teig), var(--butter) 55%, var(--kruste)); transition:width 1s linear; }
.om-steps{ display:flex; justify-content:space-between; font-size:.85rem; color:var(--ink-faint); margin-top:6px; }
.ofen-side{ display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; }
.bm-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bm-head h2{ margin:0; font-size:1.45rem; }
.bm-hint{ margin:4px 0 10px; color:var(--ink-soft); font-size:.9rem; }
.bm-list{ display:flex; flex-direction:column; gap:8px; }
.bm-item{
  display:grid; grid-template-columns:52px minmax(0, 1fr) auto; align-items:center; gap:12px; text-align:left;
  border:2px solid var(--line); border-radius:16px; background:var(--paper-raised); color:var(--ink); padding:6px 14px 6px 8px; font:inherit; cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.bm-item:hover:not(:disabled):not([aria-disabled="true"]){ background:var(--butter-soft); }
.bm-item.is-on{ background:var(--butter); color:var(--kaffee); box-shadow:0 3px 0 var(--line); transform:translateY(-1px); }
:root[data-theme="dark"] .bm-item.is-on{ background:var(--accent-soft); color:var(--ink); border-color:var(--accent); box-shadow:0 3px 0 var(--accent); }
.bm-item:disabled, .bm-item[aria-disabled="true"]{ cursor:not-allowed; opacity:.6; }
.bm-item.is-edit{ cursor:default; }
.bm-art{ display:grid; place-items:center; width:52px; height:44px; background:var(--paper-sunken); border-radius:10px; }
.bm-item.is-on .bm-art{ background:var(--fliese); }
.bm-text{ display:flex; flex-direction:column; min-width:0; }
.bm-text b{ font-weight:700; font-size:1.02rem; }
.bm-text small{ color:inherit; opacity:.75; font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bm-dur{ display:flex; flex-direction:column; align-items:flex-end; }
.bm-dur b{ font-variant-numeric:tabular-nums; }
.bm-dur small{ font-size:.72rem; opacity:.75; white-space:nowrap; }
.bm-min{ display:flex; align-items:center; gap:4px; font-size:.85rem; font-weight:600; }
.bm-min input{ width:64px; padding:4px 6px; text-align:right; }
.shelf-card{ border:2px solid var(--line); border-radius:20px; background:var(--tile); padding:14px 16px; }
:root[data-theme="dark"] .shelf-card{ background:var(--paper-raised); }
.shelf-wrap{ margin:8px 0 6px; }

/* ----------------------------------------------------------- Musik (painel) */
.music-panel .fp-head small{ color:var(--ink-faint); font-size:.82rem; }
.music-panel .fp-head h3{ margin:0; font-size:1.4rem; }
.focus-panel{ border:2px solid var(--line); border-radius:var(--radius-lg); background:var(--paper-raised); box-shadow:var(--shadow-modal); }
.mp-list{ display:flex; flex-direction:column; gap:8px; }
.mp-item{ display:grid; grid-template-columns:40px minmax(0, 1fr) auto; gap:12px; align-items:center; text-align:left; padding:10px 12px; border:2px solid var(--hairline-strong); border-radius:14px; background:var(--paper-raised); color:var(--ink); font:inherit; cursor:pointer; transition:border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.mp-item:hover{ border-color:var(--line); }
.mp-item.is-playing{ border-color:var(--line); background:var(--butter-soft); }
.mp-icon{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:2px solid var(--line); background:var(--paper-raised); }
.mp-item.is-playing .mp-icon{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.mp-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.mp-text b{ font-family:var(--font-display); font-weight:400; font-size:1.06rem; }
.mp-text small{ color:var(--ink-soft); font-size:.8rem; }
.mp-text .mp-for{ color:var(--ink-faint); }
.mp-transport{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:6px 10px; align-items:center; }
.mp-vol{ grid-column:1 / -1; margin:0; display:flex; }
.mp-vol input{ width:100%; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.fv-bars.is-muted i{ animation:none !important; opacity:.4; }
.mp-mute[aria-pressed="true"]{ color:var(--danger); }
.mp-oven{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:10px; align-items:center; padding:8px 10px; border:1.5px dashed var(--hairline-strong); border-radius:12px; color:var(--ink-soft); text-decoration:none; font-size:.9rem; }
.mp-oven span{ display:flex; flex-direction:column; }
.mp-oven small{ color:var(--ink-faint); }
.mp-oven:hover{ border-color:var(--line); color:var(--ink); }
.mp-oven.is-live{ border-style:solid; border-color:var(--line); background:var(--butter-soft); color:var(--ink); }
.mp-oven .bake-art{ width:34px; height:26px; }

/* celular: música + configurações no topo */
.mobile-top{ display:none; }

/* ----------------------------------------------------------- Schreiben */
.write-layout{ display:grid; grid-template-columns:250px minmax(0, 1fr) 300px; gap:var(--sp-5); align-items:start; }
.write-editor{ min-height:520px; }
.we-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.we-date{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft); }
.we-date input{ width:auto; padding:6px 8px; }
.we-task{ border:1.5px dashed var(--hairline-strong); border-radius:12px; padding:10px 12px; background:var(--butter-soft); }
.we-task p{ margin:2px 0 6px; font-family:var(--font-reading); font-style:italic; }
.we-task-label{ font-size:.78rem; font-weight:700; color:var(--ink-soft); }
.we-review{ font-family:var(--font-reading); font-size:var(--fs-reading); line-height:1.8; white-space:pre-wrap; min-height:260px; padding:6px 2px; }
.we-review-hint{ font-size:.86rem; color:var(--ink-faint); margin:0; }
.we-review mark.hl.has-note{ text-decoration:underline dotted var(--ink-soft); text-underline-offset:4px; text-decoration-thickness:1.5px; }
.write-help{ position:sticky; top:var(--sp-4); border:2px solid var(--line); border-radius:var(--radius-lg); background:var(--paper-raised); padding:12px; display:flex; flex-direction:column; gap:12px; max-height:calc(100vh - 2 * var(--sp-4)); overflow:auto; }
.wh-tabs{ width:100%; }
.wh-tabs > button{ flex:1; justify-content:center; padding:6px 6px; font-size:.82rem; }
.wh-body{ display:flex; flex-direction:column; gap:12px; }
.wh-kicker{ font-size:.78rem; font-weight:700; color:var(--ink-soft); }
.wh-word{ border:1.5px solid var(--hairline-strong); border-radius:14px; padding:12px; background:var(--paper); }
.wh-de{ margin:2px 0 0; font-family:var(--font-reading); font-size:1.5rem; line-height:1.15; }
.wh-pt{ margin:2px 0 6px; color:var(--ink-soft); }
.wh-ex{ margin:0 0 10px; font-family:var(--font-reading); font-style:italic; color:var(--ink); }
.wh-actions{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.wh-deck p{ margin:4px 0; }
.wh-task{ font-size:.88rem; color:var(--ink-soft); margin-top:8px !important; }
.rm-group{ display:flex; flex-direction:column; gap:4px; }
.rm-group h4{ margin:4px 0 2px; font-family:var(--font-display); font-weight:400; font-size:1.02rem; }
.rm-group h4 small{ font-family:var(--font-ui); color:var(--ink-faint); font-size:.78rem; }
.rm-item{ display:flex; flex-direction:column; align-items:flex-start; gap:0; text-align:left; border:1.5px solid var(--hairline); border-radius:10px; background:var(--paper); padding:6px 10px; font:inherit; color:var(--ink); cursor:pointer; }
.rm-item span{ font-family:var(--font-reading); font-size:1rem; }
.rm-item small{ color:var(--ink-faint); font-size:.76rem; }
.rm-item:hover:not(:disabled){ border-color:var(--line); background:var(--butter-soft); }
.rm-item:disabled, .write-help .word-chip:disabled{ opacity:.55; cursor:not-allowed; }
.wn-list{ display:flex; flex-direction:column; gap:10px; }
.wn-item{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 6px; border:1.5px solid var(--hairline-strong); border-radius:12px; padding:8px; background:var(--paper); }
.wn-item.is-lost{ opacity:.75; border-style:dashed; }
.wn-quote{ grid-column:1 / -1; display:flex; gap:8px; align-items:baseline; text-align:left; background:none; border:none; padding:0; font-family:var(--font-reading); font-size:1rem; color:var(--ink); cursor:pointer; }
.wn-quote .hp-dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.wn-lost{ grid-column:1 / -1; color:var(--danger); font-size:.76rem; }
.wn-item textarea{ font-size:.9rem; min-height:44px; resize:vertical; padding:6px 8px; }
.wn-del{ align-self:start; }

/* ----------------------------------------------------------- Tagebuch */
.diary-layout{ grid-template-columns:300px minmax(0, 1fr); }
.diary-cal{ border:2px solid var(--line); border-radius:16px; background:var(--paper-raised); padding:10px 10px 12px; }
.dc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.dc-head b{ font-family:var(--font-display); font-weight:400; font-size:1.1rem; }
.dc-next svg{ transform:rotate(180deg); }
.dc-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; }
.dc-wd{ font-size:.7rem; font-weight:700; color:var(--ink-faint); text-align:center; padding:2px 0; }
.dc-day{ position:relative; aspect-ratio:1; border:1.5px solid transparent; border-radius:10px; background:none; font:inherit; font-size:.86rem; color:var(--ink); cursor:pointer; font-variant-numeric:tabular-nums; }
.dc-day:hover:not(:disabled){ background:var(--paper-sunken); }
.dc-day.is-out{ color:var(--ink-faint); opacity:.55; }
.dc-day:disabled{ opacity:.3; cursor:default; }
.dc-day.has-entry{ font-weight:700; }
.dc-day i{ position:absolute; left:50%; bottom:3px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--kruste); }
.dc-day.is-today{ border-color:var(--hairline-strong); }
.dc-day.is-on{ background:var(--butter); border-color:var(--line); color:var(--kaffee); }
:root[data-theme="dark"] .dc-day.is-on{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.diary-filter{ display:flex; gap:6px; flex-wrap:wrap; }
.diary-filter .chip{ display:inline-flex; align-items:center; gap:6px; }
.diary-months{ display:flex; flex-direction:column; gap:2px; }
.dm-title{ font-size:.78rem; font-weight:700; color:var(--ink-faint); margin:6px 2px 2px; }
.dm-item{ display:flex; justify-content:space-between; background:none; border:none; padding:6px 8px; border-radius:8px; font:inherit; color:var(--ink-soft); cursor:pointer; text-transform:capitalize; }
.dm-item:hover{ background:var(--paper-sunken); color:var(--ink); }
.dm-item.is-on{ background:var(--paper-sunken); color:var(--ink); font-weight:650; }
.diary-editor .journal-body.diary-body{ font-family:var(--font-reading); }
.tagebuch-view .journal-list-pane, .schreiben-view .journal-list-pane{ overflow:auto; }

/* ----------------------------------------------------------- Einstellungen */
.theme-seg{ flex-wrap:wrap; }
.auto-theme{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.auto-times{ display:inline-flex; gap:10px; }
.auto-times label{ display:inline-flex; align-items:center; gap:4px; }
.auto-times input{ width:auto; padding:4px 6px; }
.bake-settings{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px; margin:var(--sp-2) 0 var(--sp-3); }
.bs-item{ display:grid; grid-template-columns:44px minmax(0, 1fr) 60px auto; align-items:center; gap:8px; border:1.5px solid var(--hairline-strong); border-radius:12px; padding:4px 10px 4px 6px; font-weight:600; font-size:.92rem; background:var(--paper); margin:0; }
.bs-item input{ padding:4px 6px; text-align:right; }
.bs-item .bake-art{ width:40px; height:30px; }
.setting-desc .link-btn{ font-size:inherit; }

/* ----------------------------------------------------------- movimento */
.view{ animation:view-in var(--dur-base) var(--ease); }
@keyframes view-in{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
.focus-panel:not([hidden]){ animation:panel-in 200ms var(--ease); }
@keyframes panel-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.toast{ animation:panel-in 200ms var(--ease); }
.scene-steam{ animation:steam 5s ease-in-out infinite; transform-box:fill-box; transform-origin:bottom; }
@keyframes steam{ 0%,100%{ opacity:.35; transform:translateY(0); } 50%{ opacity:.75; transform:translateY(-3px); } }
.bdt-de{ animation:none; }
/* troca de tema: só cor, sem mexer em posição */
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after{
  transition:background-color var(--dur-theme) var(--ease), color var(--dur-theme) var(--ease), border-color var(--dur-theme) var(--ease), fill var(--dur-theme) var(--ease), stroke var(--dur-theme) var(--ease) !important;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }

/* ----------------------------------------------------------- telas médias */
@media (max-width:1180px){
  .write-layout{ grid-template-columns:220px minmax(0, 1fr); }
  .write-help{ grid-column:1 / -1; position:static; max-height:none; }
  .ofen-grid{ grid-template-columns:minmax(0, 1fr) 340px; }
}
@media (max-width:980px){
  .today-top{ grid-template-columns:1fr; }
  .today-oven{ display:grid; grid-template-columns:200px minmax(0, 1fr); grid-template-areas:"head head" "art chips" "art start" "art more"; align-items:center; }
  .today-oven .tc-head{ grid-area:head; }
  .today-oven .to-art{ grid-area:art; }
  .today-oven .to-chips, .today-oven .to-live{ grid-area:chips; }
  .today-oven .to-start{ grid-area:start; }
  .today-oven .to-more{ grid-area:more; }
  .ofen-grid{ grid-template-columns:1fr; }
  .today-grid{ grid-template-columns:1fr 1fr; }
  .today-grid .today-write{ grid-column:1 / -1; }
}

/* ----------------------------------------------------------- celular */
@media (max-width:720px){
  .main{ padding-top:calc(env(safe-area-inset-top, 0px) + 70px); }
  .main::before{ margin-top:calc(-1 * (env(safe-area-inset-top, 0px) + 70px)); margin-bottom:52px; }
  .focus-pill{ position:static; display:inline-flex; box-shadow:none; border:2px solid var(--line); background:var(--paper-raised); color:var(--ink); height:38px; }
  .mobile-top{ display:flex; gap:8px; position:fixed; z-index:115; top:calc(env(safe-area-inset-top, 0px) + 28px); right:max(var(--sp-4), env(safe-area-inset-right, 0px)); }
  .mt-settings{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:2px solid var(--line); background:var(--paper-raised); color:var(--ink); }
  .mt-settings.active{ background:var(--butter); color:var(--kaffee); }
  body.is-reading .mobile-top, body.in-review .mobile-top, body.is-video .mobile-top{ display:none; }
  body.is-reading .main::before, body.is-video .main::before{ display:none; }
  .bottom-nav .bn-item svg{ width:21px; height:21px; }

  .today-head{ grid-template-columns:auto 1fr; gap:var(--sp-3); }
  .today-head .hud{ grid-column:1 / -1; justify-content:flex-start; }
  .today-mascot .mascot{ width:64px; height:64px; }
  .today-scene{ min-height:0; display:flex; flex-direction:column; }
  .scene-wrap{ position:relative; inset:auto; height:150px; }
  .bubble{ margin:0; width:auto; border-radius:0; border-width:2px 0 0; padding:14px 16px 16px; }
  .bubble::after{ right:auto; left:46px; top:-11px; transform:rotate(-45deg); }
  .bubble-title{ font-size:1.22rem; }
  .bubble-actions{ flex-direction:row; flex-wrap:wrap; }
  .bubble-actions .btn{ flex:1 1 140px; justify-content:center; }
  .today-oven{ display:flex; }
  .to-art{ padding:6px 30px 2px; }
  .brot-des-tages{ grid-template-columns:1fr auto; gap:10px 8px; }
  .bdt-tag{ grid-column:1 / 2; justify-self:start; flex-direction:row; align-items:baseline; gap:8px; padding:6px 12px 6px 24px; min-width:0; }
  .bdt-body{ grid-column:1 / -1; grid-row:2; }
  .bdt-actions{ grid-column:2; grid-row:1; }
  .bdt-de{ font-size:1.18rem; }
  .today-grid{ grid-template-columns:1fr; }

  .ofen-main{ padding:14px 14px 18px; border-radius:20px; }
  .om-row{ align-items:stretch; flex-direction:column; }
  .om-actions .btn{ flex:1; justify-content:center; }
  .om-time{ font-size:3.2rem; }

  .write-layout, .diary-layout{ grid-template-columns:1fr; }
  .write-editor{ min-height:0; }
  .tagebuch-view .journal-list-pane, .schreiben-view .journal-list-pane{ max-height:none; position:static; }
  .bs-item{ grid-template-columns:40px minmax(0, 1fr) 56px auto; }
}

/* ----------------------------------------------------------- ajustes finos */
.journal-title{ font-family:var(--font-display); font-weight:400; border:none; border-bottom:1.5px solid var(--hairline); border-radius:0; background:transparent; padding:6px 2px; }
.journal-title:focus{ box-shadow:none; border-bottom-color:var(--accent); }
.journal-meta .we-date{ flex-direction:row; align-items:center; gap:8px; font-size:inherit; color:var(--ink-soft); }
.journal-foot .source-meta{ white-space:nowrap; }
.journal-editor{ border:1.5px solid var(--hairline-strong); border-radius:var(--radius-lg); background:var(--paper-raised); }
.theme-seg{ flex-direction:row; flex-wrap:nowrap; flex:none; }
.setting-row:has(.theme-seg){ flex-wrap:wrap; }
.bake-settings{ grid-template-columns:repeat(auto-fill, minmax(236px, 1fr)); }
.write-layout > *, .diary-layout > *, .journal-list-pane > *{ min-width:0; }
.journal-item{ min-width:0; max-width:100%; }
.brand .brand-mark, :root[data-theme="dark"] .brand .brand-mark{ box-shadow:none !important; background:none !important; }
.nav-link.active.nav-ofen.is-live svg{ color:inherit; }