/* v11: Nunito (variable 200–1000, OFL 1.1 — см. OFL.txt) отдаётся самим приложением,
   без local(): на телефоне всегда один и тот же шрифт, жирные 800/900 выглядят жирными. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url('/nunito-cyrillic.woff2?v=1') format('woff2-variations'), url('/nunito-cyrillic.woff2?v=1') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url('/nunito-latin.woff2?v=1') format('woff2-variations'), url('/nunito-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root { --safe-top: 0px; --safe-bottom: 0px; color-scheme: light only;
  --font: Nunito, ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; }
html, body { margin: 0; height: 100%; background: #f3eee8; }
html, body, button, input, textarea, select { font-family: var(--font); }
#palm-app {
  --ink: #1a120b;
  --muted: #8d7768;
  --orange: #ff6a00;
  --paper: #fffdfb;
  width: min(480px, 100%);
  height: 100dvh;
  margin: 0 auto;
  padding-left: var(--safe-left, 0px);
  padding-right: var(--safe-right, 0px);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  overflow: hidden;
  position: relative;
}
#palm-app, #palm-app * { box-sizing: border-box; }
#palm-app button {
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
#palm-app img { max-width: 100%; display: block; }
#palm-app svg { width: 22px; height: 22px; display: block; }
.billboard { display: none; }
.stage { height: 100%; position: relative; }
.stage-scroll {
  height: 100%;
  overflow: auto;
  padding-bottom: calc(120px + var(--safe-bottom));
}
.stage-scroll::-webkit-scrollbar { width: 0; }

.hero {
  background: linear-gradient(165deg, #ff8a2a, #ff6a00);
  position: relative; overflow: hidden;
  color: #1a120b;
  padding: calc(16px + var(--safe-top)) 16px 28px;
  border-radius: 0 0 28px 28px;
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar, .avatar-lg {
  border-radius: 50%; object-fit: cover; background: #ffe7c2;
  border: 2px solid rgba(255,255,255,.9);
}
.avatar { width: 48px; height: 48px; flex: none; }
.avatar-lg { width: 88px; height: 88px; margin: 8px auto 0; }
.hello { font-size: 13px; opacity: .75; font-weight: 800; }
.name { font-size: 20px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.iconbtn {
  width: 44px; height: 44px; border-radius: 14px; background: #fff; border: 0;
  display: grid; place-items: center; position: relative; flex: none;
  box-shadow: 0 6px 16px rgba(80,30,0,.12);
}
.badge-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #e11d48; }
.kicker { margin-top: 18px; font-size: 14px; font-weight: 800; }
.bignum { font-size: 64px; line-height: .9; font-weight: 900; letter-spacing: -.05em; margin: 2px 0 4px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pair > div { background: rgba(255,255,255,.94); border-radius: 16px; padding: 10px 12px; min-width: 0; }
.pair span { display: block; font-size: 12px; font-weight: 800; color: var(--muted); }
.pair b { display: block; font-size: 22px; margin-top: 2px; }
.pos { color: #178a45; }
.neg { color: #d3263a; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: -18px 16px 8px; position: relative; z-index: 1; }
button.tile {
  display: block; width: 100%; min-height: 78px; padding: 12px;
  background: #fff; color: var(--ink); border: 0; border-radius: 18px; text-align: left;
  box-shadow: 0 10px 24px rgba(70,30,0,.08);
}
button.tile:active, button.primary:active, button.secondary:active, button.list-row:active, button.choice:active { transform: scale(.98); }
button.tile b, button.tile strong { display: block; font-size: 26px; line-height: 1; font-weight: 900; color: var(--orange); }
button.tile.purple b { color: #7c4dff; }
button.tile.mint b { color: #0e9b88; }
button.tile.green b { color: #178a45; }
button.tile.sun b { color: #c47b00; }
button.tile small, button.tile em { display: block; margin-top: 6px; font-size: 12px; font-style: normal; font-weight: 800; color: var(--muted); }

.section { padding: 8px 16px 0; }
.rowhead { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; }
.rowhead h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
button.ghost { background: none; border: 0; color: var(--muted); font-weight: 800; font-size: 14px; padding: 6px; }

button.list-row, .list-row {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px; margin: 0 0 8px; text-align: left;
  background: #fff; border: 0; border-radius: 18px;
  box-shadow: 0 8px 18px rgba(70,30,0,.06);
}
.row-ico {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: #ffe8d2; color: var(--orange);
}
.row-ico.miss { background: #ffe0e4; color: #d3263a; }
.row-ico.skip { background: #fff3c4; color: #a16207; }
.row-ico.draft { background: #f3eee8; color: var(--muted); }
.row-main { min-width: 0; flex: 1; }
.row-main b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-main small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
.amount { font-weight: 900; font-size: 13px; color: var(--muted); flex: none; }
.amount.good { color: #178a45; }
.timer { font-variant-numeric: tabular-nums; color: #1a120b; }
button.tile.orange { background: #ffd7b0; }
button.tile.purple { background: #e3d7ff; }
button.tile.mint { background: #c8f6ee; }
button.tile.green { background: #d7f6c8; }
button.tile.sun { background: #ffe8a3; }
button.tile b, button.tile strong { color: #1a120b; }
button.tile.purple b { color: #4c1d95; }
button.tile.mint b { color: #0f766e; }
button.tile.green b { color: #166534; }
button.tile.sun b { color: #92400e; }
button.primary, button.secondary, button.tile, button.choice, button.list-row { transition: transform .12s ease; }
.nav-enter .pad, .nav-enter .section { animation: rise .28s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.story { position: absolute; inset: 0; z-index: 30; background: #24180f; color: #1a120b; display: flex; flex-direction: column; padding: calc(12px + var(--safe-top)) 14px calc(14px + var(--safe-bottom)); }
.story-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.story-bars { display: flex; gap: 4px; flex: 1; }
.story-bars i { flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,.28); }
.story-bars i.done, .story-bars i.now { background: #fff; }
button.story-x { flex: none; border: 0; background: #fff; color: #1a120b; border-radius: 999px; min-height: 36px; padding: 0 14px; font-weight: 800; }
.story-card {
  flex: 1; border-radius: 28px; padding: 22px 20px; display: flex; flex-direction: column; justify-content: flex-start;
}
.story-card h2 { margin: 8px 0; font-size: 34px; font-weight: 900; letter-spacing: -.04em; line-height: 1.05; }
.story-card p { margin: 0; font-size: 18px; line-height: 1.35; }
.story-kicker { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.story-nav { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 12px; }
.nav-enter .bignum { animation: pop .45s ease; }
@keyframes pop { from { transform: scale(.92); opacity: .4; } to { transform: none; opacity: 1; } }

.subhead {
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  padding: calc(10px + var(--safe-top)) 12px 6px;
}
.subhead h1 { margin: 0; text-align: center; font-size: 17px; }
.pad { padding: 8px 16px 20px; }
.stack { display: flex; flex-direction: column; gap: 10px; }

.visa {
  background: linear-gradient(160deg, #ff8a2a, #ff6a00);
  border-radius: 24px; padding: 16px; min-height: 150px; position: relative; color: #1a120b;
}
.visa .mark { position: absolute; right: 16px; top: 14px; font-size: 12px; letter-spacing: .08em; }
.visa h2 { margin: 18px 0 0; font-size: 42px; letter-spacing: -.04em; }
.visa .meta { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; }
.visa .meta b { display: block; font-size: 15px; }

button.choice {
  width: 100%; text-align: left; padding: 14px 16px; display: block;
  background: #fff; border: 1.5px solid #f0e6dc; border-radius: 16px;
}
button.choice.on { border-color: var(--orange); background: #fff4ec; }
button.choice b { display: block; font-size: 16px; }
button.choice span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
button.chip {
  border: 0; background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 800;
  box-shadow: 0 4px 10px rgba(70,30,0,.06); color: var(--ink);
}
button.chip.on { background: var(--ink); color: #fff; }
label.field { display: block; font-size: 13px; font-weight: 800; margin: 8px 0 6px; }
input[type="text"], input[type="number"], input[type="time"], textarea {
  width: 100%; border: 1.5px solid #f0e6dc; border-radius: 16px; padding: 14px;
  font: 700 16px var(--font); background: #fff; color: var(--ink); outline: none;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus { border-color: var(--orange); }
/* Видимый курсор в полях: явный цвет каретки и текста (в т.ч. тёмная/светлая тема Telegram,
   принудительное затемнение Android WebView), выделение текста разрешено (без него iOS прячет каретку). */
#palm-app input[type="text"], #palm-app input[type="number"], #palm-app input[type="time"], #palm-app textarea {
  color: #1a120b;
  -webkit-text-fill-color: #1a120b;
  caret-color: #ff6a00;
  background-color: #fff;
  -webkit-user-select: text;
  user-select: text;
  opacity: 1;
  color-scheme: light;
}
#palm-app input::placeholder, #palm-app textarea::placeholder { color: #b5a496; -webkit-text-fill-color: #b5a496; opacity: 1; }
#palm-app .pad:focus-within, #palm-app .section:focus-within { animation: none; transform: none; }
button.ghost.hint-link { align-self: flex-start; padding: 4px 2px; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

button.primary, button.secondary, button.danger {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 54px; border-radius: 16px; border: 0;
  font-weight: 800; font-size: 16px; padding: 14px 16px;
}
button.primary { background: var(--orange); color: #fff; box-shadow: 0 10px 20px rgba(255,106,0,.25); }
button.secondary { background: #fff; color: var(--ink); border: 1.5px solid #f0e6dc; }
button.danger { background: #fff1f2; color: #be123c; }
button.primary:disabled, button.secondary:disabled { opacity: .5; }
.btnrow { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

button.check {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%;
  padding: 8px 0; background: none; border: 0; font-weight: 800; font-size: 15px; line-height: 1.35;
}
.box {
  width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid #e7d9cc; flex: none;
  background: #fff; display: grid; place-items: center;
}
button.check.on .box { background: var(--orange); color: #fff; border-color: var(--orange); }
.note, .warn, .forward, .pricebox {
  background: #fff8ec; border-radius: 16px; padding: 12px 14px; line-height: 1.4; font-size: 14px;
}
.note b, .warn b, .forward b { display: block; margin-bottom: 4px; }
.forward { background: #fff4ec; }
.forward span { display: block; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.pricebox { display: flex; gap: 12px; align-items: center; background: #fff; border: 1.5px solid #f0e6dc; }
.pricebox b { font-size: 26px; color: var(--orange); flex: none; }
button.banner {
  display: block; width: 100%; text-align: left; padding: 14px;
  background: #fff4ec; border: 0; border-radius: 16px;
}
button.banner b { display: block; }
button.banner span { color: var(--muted); font-size: 13px; font-weight: 700; }

.profile-head {
  text-align: center;
  background: linear-gradient(#fff6e8, #fffdfb 80%);
  padding: calc(8px + var(--safe-top)) 16px 12px;
}
.profile-head h2 { margin: 8px 0 0; font-size: 26px; }
.handle { color: var(--muted); margin-bottom: 4px; }
.pad .tiles { margin: 0; }

.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dow { text-align: center; font-size: 11px; color: var(--muted); }
.day {
  position: relative; aspect-ratio: 1; border-radius: 12px; background: #f6f1eb; border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-family: inherit; font-size: 13px; font-weight: 800; line-height: 1; color: var(--ink); transition: transform .12s ease, box-shadow .12s ease;
}
button.day:active { transform: scale(.94); }
.day .n { font-size: 13px; }
.day i { font-style: normal; font-size: 11px; line-height: 1; opacity: .8; }
.day .cam { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.day.blank { background: transparent; }
.day.success { background: #b7f0cb; color: #0f5d2c; }
.day.miss { background: #ffc9d1; color: #8f1427; }
.day.skip, .day.freeze { background: #cfe9ff; color: #0b4f86; }
.day.void { background: #ece6df; color: var(--muted); }
.day.open { background: #fff; box-shadow: inset 0 0 0 1.5px #f0e6dc; }
.day.future { background: #fff; color: #b9a99c; box-shadow: inset 0 0 0 1.5px #f3ece4; }
.day.off { background: #f6f1eb; color: #c9bcb1; }
.day.future.off { background: transparent; box-shadow: none; }
.day.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.day.sel { box-shadow: 0 0 0 3px var(--orange); }

.cal-card { background: #fff; border-radius: 22px; padding: 14px 12px 12px; box-shadow: 0 10px 26px rgba(70,30,0,.07); display: flex; flex-direction: column; gap: 12px; }
.cal-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; }
.cal-title { text-align: center; }
.cal-title b { display: block; font-size: 18px; text-transform: capitalize; }
.cal-title small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; margin-top: 2px; }
button.cal-nav { width: 40px; height: 40px; border-radius: 14px; border: 0; background: #fff4ec; color: var(--orange); font-family: inherit; font-size: 22px; font-weight: 900; line-height: 1; }
button.cal-nav:disabled { opacity: .3; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; font-weight: 800; color: var(--muted); justify-content: center; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.lg { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.lg.success { background: #b7f0cb; } .lg.miss { background: #ffc9d1; } .lg.freeze { background: #cfe9ff; }
.lg.future { background: #fff; box-shadow: inset 0 0 0 1.5px #e9ddd1; } .lg.off { background: #f6f1eb; }
.cal-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; font-size: 11px; font-weight: 800; color: var(--muted); }
.cal-sum b { display: block; font-size: 20px; color: var(--ink); }
.day-card { background: #fff; border-radius: 18px; padding: 14px; border-left: 5px solid #e9ddd1; box-shadow: 0 6px 18px rgba(70,30,0,.05); }
.day-card.success { border-left-color: #34c26a; } .day-card.miss { border-left-color: #e5485f; } .day-card.freeze { border-left-color: #3b9be8; }
.day-card b { display: block; margin-bottom: 6px; }
.day-card p { margin: 0; font-weight: 700; line-height: 1.4; white-space: pre-wrap; }
.photo-full { width: 100%; border-radius: 14px; margin-top: 10px; display: block; }
.center { text-align: center; }
.small { font-size: 12px; }
.btnrow.two { flex-direction: row; margin-top: 0; }
.btnrow.two > * { flex: 1; }
.watcher { align-items: flex-start; }
.watcher .grow { flex: 1; min-width: 0; }
.watcher b { font-size: 15px; }
.watcher small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; margin-top: 3px; }
.watcher .uname { color: var(--muted); font-weight: 800; font-size: 13px; }
.mini.dim { opacity: .5; }
.mode { color: var(--ink); }
.mode-success { color: #0f8a3f; } .mode-fail { color: #c22a40; }
.react { font-weight: 900; }
.react-seen { color: #0f8a3f; } .react-doubt { color: #b45309; } .react-nudge { color: #2563eb; }
.row-ico.freeze { background: #dcefff; color: #0b4f86; }
.row-ico.gold { background: #fff1c2; color: #b7791f; }
.report .st { font-size: 11px; font-weight: 800; color: var(--muted); margin-left: 6px; }
.report .st-success { color: #0f8a3f; } .report .st-miss { color: #c22a40; } .report .st-freeze, .report .st-skip { color: #0b4f86; }
.report .rtext { white-space: pre-wrap; color: var(--ink) !important; font-size: 13px !important; }
.donate-hero { background: linear-gradient(135deg, #fff1c2, #ffe0c7); border-radius: 22px; padding: 18px; text-align: center; }
.donate-hero .big { font-size: 40px; }
.donate-hero b { display: block; font-size: 18px; margin: 6px 0; }
.donate-hero p { margin: 0; font-weight: 700; color: #6b5444; line-height: 1.4; }
.chips.donate { display: grid; grid-template-columns: repeat(4, 1fr); }
button.chip.amount { font-size: 16px; padding: 14px 6px; text-align: center; }
button.send-big { font-size: 17px; padding: 18px; }
button.freeze-btn { color: #0b4f86; border-color: #cfe9ff; }

.obs { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: #fff; border-radius: 16px; }
.mini {
  width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center;
  background: #ffe8d2; font-weight: 900; flex: none;
}

.dock {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(255,253,251,.96);
  border-top: 1px solid #f0e6dc;
  padding: 4px 6px calc(6px + var(--safe-bottom));
  backdrop-filter: blur(10px);
}
.dock button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; background: transparent; border: 0; border-radius: 14px;
  color: #b5a496; font-size: 10px; font-weight: 800; padding: 4px 0;
}
.dock button.on { color: var(--orange); background: #fff1e6; }
.dock button span { line-height: 1; }

button.kb-done {
  position: absolute; left: 16px; right: 16px; z-index: 40;
  min-height: 48px; border: 0; border-radius: 14px;
  background: #1a120b; color: #fff; font-weight: 800; font-size: 16px;
}
#palm-sink { position: fixed; left: -40px; top: 0; width: 1px; height: 1px; opacity: 0; }
.toast {
  position: fixed; left: 50%; width: min(448px, calc(100% - 32px)); bottom: calc(84px + var(--safe-bottom));
  background: #1a120b; color: #fff; border-radius: 14px; padding: 12px 14px; z-index: 9; font-weight: 800;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s ease, transform .2s ease, visibility 0s; }
.sheet-back {
  position: absolute; inset: 0; background: rgba(26,18,11,.35); z-index: 8;
  display: flex; align-items: flex-end; padding: 12px;
}
.sheet {
  width: 100%; background: #fff; border-radius: 22px; padding: 16px;
  margin-bottom: var(--safe-bottom); max-height: 80dvh; overflow: auto;
}
.sheet h3 { margin: 0 0 8px; font-size: 22px; }
.sheet p { margin: 0 0 10px; font-weight: 700; line-height: 1.4; white-space: pre-wrap; }
.progress { height: 10px; border-radius: 99px; background: #f3eee8; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--orange); }
.photo-prev { width: 100%; max-height: 220px; object-fit: cover; border-radius: 16px; margin-top: 8px; }
.steps { display: flex; gap: 6px; margin: 4px 0 12px; }
.steps i { height: 4px; flex: 1; border-radius: 99px; background: #f0e6dc; }
.steps i.on { background: var(--orange); }
.gate, .paywall-screen { padding: calc(20px + var(--safe-top)) 16px 32px; }
.gate-hero {
  border-radius: 24px; min-height: 190px;
  background: #ff6a00 url("palm.jpg") center 30% / cover no-repeat;
}
.muted { color: var(--muted); font-weight: 700; line-height: 1.45; }
.price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.price-row div { background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 6px 16px rgba(70,30,0,.06); }
.veil {
  position: absolute; inset: 0; z-index: 6;
  background: rgba(255,253,251,.72);
  display: grid; place-items: center; align-content: center; gap: 10px;
}
.veil-text { font-weight: 800; color: #1a120b; }
.spin {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid #f0e6dc; border-top-color: #ff6a00;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.price-row b { display: block; font-size: 20px; }
.card { background: #fff; border-radius: 18px; box-shadow: 0 8px 18px rgba(70,30,0,.06); }

@media (min-width: 840px) {
  html, body { background: #e7d7c8; }
  #palm-app { box-shadow: 0 20px 50px rgba(40,20,0,.16); }
}

/* v3 */
.note.legal { white-space: pre-line; }
.list-row .photo-prev { max-height: 160px; }

/* ---------- v5: навигация, настройки, крупнее иконки ---------- */
.topnav { display: flex; align-items: center; gap: 6px; padding: calc(10px + var(--safe-top)) 12px 6px; min-height: 48px; }
.topnav h1 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 900; padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#palm-app .dock button svg { width: 26px; height: 26px; }
.dock button { font-size: 11px; gap: 4px; }
.row-ico { font-size: 22px; }
#palm-app .row-ico svg { width: 24px; height: 24px; }
.day i { font-size: 14px; }
.day .n { font-size: 14px; }
button.primary, button.secondary, button.danger { font-size: 16px; }
.big-cta { font-size: 18px !important; padding: 18px !important; }
.done-today { display: flex; align-items: center; justify-content: space-between; background: #e5f8ec; color: #0f5d2c; border-radius: 18px; padding: 14px 16px; font-weight: 900; font-size: 16px; }
.done-today.freeze { background: #e3f1ff; color: #0b4f86; }
.ghost.accent { color: var(--orange); }
.section-card { background: #fff7ef; border-radius: 22px; padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.section-card .obs { box-shadow: 0 4px 12px rgba(70,30,0,.05); }
.empty { text-align: center; padding: 14px 8px; color: var(--muted); font-weight: 700; }
.empty-ico { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.empty p { margin: 0; }
.mini { font-size: 18px; }

.set-head { display: flex; gap: 14px; align-items: center; padding: calc(18px + var(--safe-top)) 18px 10px; background: linear-gradient(180deg, #fff4cc, rgba(255,244,204,0)); }
.set-head .avatar-lg { width: 72px; height: 72px; margin: 0; flex: none; }
.set-head-main { min-width: 0; }
.set-head h2 { margin: 0; font-size: 22px; line-height: 1.15; }
.set-head .handle { margin: 2px 0 0; font-weight: 700; }
.set-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badge { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--muted); box-shadow: 0 2px 6px rgba(70,30,0,.06); }
.badge.on { color: #0f8a3f; } .badge.off { color: #b45309; }
.set-list { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.set-title { font-size: 12px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 0 6px 6px; }
.set-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 18px rgba(70,30,0,.06); }
.set-foot { font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 8px 0; line-height: 1.4; }
button.set-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 12px; background: #fff; border: 0; text-align: left; color: var(--ink); font-family: inherit; position: relative; min-height: 58px; }
button.set-row + button.set-row::before { content: ''; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: #f2ebe3; }
button.set-row:active { background: #fff6ee; }
.set-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; flex: none; }
.set-main { flex: 1; min-width: 0; }
.set-main b { display: block; font-size: 16px; font-weight: 800; }
.set-main small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.set-val { font-size: 13px; font-weight: 800; color: var(--muted); flex: none; max-width: 40%; text-align: right; }
.chev { color: #cdbfb3; flex: none; display: grid; place-items: center; }
#palm-app .chev svg { width: 18px; height: 18px; }
.danger-row .set-main b { color: #d3263a; }
.chips .chip { font-size: 15px; }
.visa .visa-cap { font-size: 13px; font-weight: 800; opacity: .85; margin: -4px 0 10px; }

/* ---------- v6: простые настройки ---------- */
.topnav { padding: calc(14px + var(--safe-top)) 20px 8px; }
.topnav h1 { font-size: 26px; padding-left: 0; letter-spacing: -.01em; }
.set-head { flex-direction: column; text-align: center; gap: 10px; padding: calc(28px + var(--safe-top)) 20px 18px; background: none; }
.set-head .avatar-lg { width: 84px; height: 84px; font-size: 34px; box-shadow: 0 10px 24px rgba(255,122,24,.22); }
.set-head h2 { font-size: 24px; letter-spacing: -.01em; }
.set-head .handle { color: var(--muted); }
.set-flat { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 0; }
.set-flat button.set-row { border-radius: 22px; min-height: 64px; padding: 12px 16px; box-shadow: 0 6px 20px rgba(70,30,0,.06); }
.set-flat button.set-row + button.set-row::before { display: none; }
.set-flat button.set-row:active { transform: scale(.985); background: #fff; }
.set-flat .set-ico { width: 42px; height: 42px; border-radius: 14px; font-size: 22px; }
.set-flat .set-main b { font-size: 17px; font-weight: 800; }
.set-sign { text-align: center; color: #c4b6a9; font-size: 12px; font-weight: 700; margin: 26px 0 8px; }

/* ---------- v7: без прыжков ---------- */
.slot { display: contents; }
.stage-scroll { overflow-anchor: none; }
.note.tip { position: relative; padding-right: 40px; overflow: hidden; transition: height .25s ease, opacity .2s ease, margin .25s ease, padding .25s ease; }
.note.tip.slim { background: transparent; text-align: center; color: var(--muted); font-size: 13px; font-weight: 700; padding: 8px 40px; }
.note.tip.tip-out { height: 0 !important; opacity: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
button.tip-x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(26,18,11,.06); color: var(--muted); font-size: 18px; line-height: 1; display: grid; place-items: center; padding: 0; }
.photo-full { height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #f3eee8; }
.photo-prev { height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #f3eee8; }
.avatar, .avatar-lg { aspect-ratio: 1; }
.stack > .note.tip.tip-out { margin-bottom: -10px; }

/* ---------- v8: векторная пальма, онбординг ---------- */
.hero > * { position: relative; z-index: 1; }
.hero > .hero-palm { position: absolute; z-index: 0; right: 10px; bottom: 14px; width: 132px; height: 116px; pointer-events: none; opacity: .95; }
/* v13: с плашкой «Время на исходе» пальма остаётся на своём месте (как без плашки), а не уходит под неё */
.hero.hero-warn > .hero-palm { bottom: auto; top: calc(77px + var(--safe-top)); }
#palm-app .hero-palm svg.palm-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(120,40,0,.18)); }
.story.onb { color: #1a120b; }
.onb-card { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: transparent !important; padding: 0 6px !important; cursor: pointer; }
.onb-emoji { width: 132px; height: 132px; border-radius: 50%; background: rgba(255,255,255,.7); display: grid; place-items: center; font-size: 72px; line-height: 1; margin-bottom: 26px; box-shadow: 0 12px 30px rgba(70,30,0,.10); }
.onb-card h2 { font-size: 34px; margin: 6px 0 10px; }
.onb-card p { font-size: 19px; line-height: 1.4; max-width: 30ch; }
button.onb-prev { position: absolute; left: -16px; top: 0; bottom: 0; width: 32%; background: transparent; border: 0; padding: 0; z-index: 1; }
.onb-nav { grid-template-columns: 1fr; }
.onb-nav:has(> :nth-child(2)) { grid-template-columns: 1.4fr 1fr; }
.how-wrap { display: flex; justify-content: center; margin-top: 14px; }
button.how-chip { border: 0; background: #fff3e6; color: #b5520c; font-weight: 800; font-size: 14px; border-radius: 999px; padding: 9px 16px; min-height: 0; }
.story.onb .story-bars i { background: rgba(26,18,11,.14); } .story.onb .story-bars i.done, .story.onb .story-bars i.now { background: #1a120b; }

/* ---------- v9: карточки-достижения (истории) ---------- */
.ms { position: absolute; inset: 0; z-index: 32; overflow: hidden; color: #fff; background: #0b0710; -webkit-user-select: none; user-select: none; cursor: pointer; animation: msIn .6s cubic-bezier(.2,.9,.25,1.1) both; }
#palm-app .ms svg { width: 100%; height: 100%; display: block; }
.ms-stage { position: absolute; left: 50%; bottom: 0; width: max(100%, calc(100dvh * 390 / 844)); aspect-ratio: 390 / 844; transform: translateX(-50%); pointer-events: none; }
.ms-l, .ms-land, .ms-fx { position: absolute; inset: 0; }
.ms-land { transform-origin: 50% 80%; animation: msGrow 1.1s .12s cubic-bezier(.2,.9,.3,1.15) both; }
.ms-glow { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); animation: msPulse 4.5s ease-in-out infinite; will-change: transform, opacity; }
.ms-rays { position: absolute; width: 250%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, var(--rc, rgba(255,224,138,.2)) 0deg 6deg, rgba(255,224,138,0) 6deg 20deg); -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 30%, transparent 62%); mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 30%, transparent 62%); animation: msSpin 60s linear infinite; will-change: transform; }
.ms-wave { position: absolute; left: 0; width: 200%; animation: msWave var(--d, 10s) linear infinite; will-change: transform; }
.ms-wave.rev { animation-direction: reverse; }
.ms-aur { position: absolute; left: -25%; width: 150%; border-radius: 50%; will-change: transform, opacity; mix-blend-mode: screen; }
.ms-aur.a1 { top: 12%; height: 26%; background: radial-gradient(ellipse at 50% 60%, rgba(77,255,192,.6), rgba(77,255,192,.18) 40%, rgba(77,255,192,0) 68%); transform: skewY(-10deg); animation: msAur 9s ease-in-out infinite alternate; }
.ms-aur.a2 { top: 24%; height: 20%; background: radial-gradient(ellipse at 40% 50%, rgba(155,107,255,.5), rgba(155,107,255,0) 66%); transform: skewY(8deg); animation: msAur 11s -3s ease-in-out infinite alternate-reverse; }
.ms-aur.a3 { top: 32%; height: 16%; background: radial-gradient(ellipse at 60% 50%, rgba(90,220,255,.4), rgba(90,220,255,0) 66%); transform: skewY(-4deg); animation: msAur 13s -6s ease-in-out infinite alternate; }
.ms-shoot { position: absolute; top: 10%; left: 72%; width: 130px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); transform: rotate(-28deg); opacity: 0; animation: msShoot 7s 1.6s ease-out infinite; }
.msp { position: absolute; display: block; background: var(--c); border-radius: 50%; will-change: transform, opacity; }
.msp-mote { box-shadow: 0 0 10px var(--c); animation: msRise var(--d) var(--dl) linear infinite; }
.msp-conf { border-radius: 2px; animation: msFall var(--d) var(--dl) linear infinite; }
.msp-spark { border-radius: 0; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: msTwinkle var(--d) var(--dl) ease-in-out infinite; }
.msp-fly { box-shadow: 0 0 12px 3px var(--c); animation: msFly var(--d) var(--dl) ease-in-out infinite alternate; }
.ms-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,5,20,.34) 0%, rgba(10,5,20,0) 34%, rgba(10,5,20,0) 64%, rgba(10,5,20,.6) 100%); }
.ms-light .ms-scrim { background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 34%, rgba(0,30,60,0) 64%, rgba(0,30,60,.55) 100%); }
.ms-ui { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(10px + var(--safe-top)) 18px calc(16px + var(--safe-bottom)); }
.ms-top { display: flex; flex-direction: column; gap: 9px; }
.ms-bars i { position: relative; overflow: hidden; background: rgba(255,255,255,.3); }
.ms-bars i b { position: absolute; inset: 0; background: #fff; border-radius: inherit; transform: scaleX(0); transform-origin: 0 50%; }
.ms-bars i.done b { transform: none; }
.ms-bars i.now b { animation: msBar 5s .3s linear forwards; }
.ms-brand { font-size: 13px; font-weight: 900; letter-spacing: .01em; opacity: .9; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.ms-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: clamp(6px, 3.2dvh, 34px); }
.ms-kicker span { display: inline-block; padding: 7px 15px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.38); font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
#palm-app .ms svg.ms-num { width: min(90%, 340px); height: auto; margin-top: 4px; overflow: visible; }
.ms-num { animation: msPop .95s .18s cubic-bezier(.2,1.45,.4,1) both; transform-origin: 50% 60%; }
.ms-shine { animation: msShine 3.6s 1.3s ease-in-out infinite; }
.ms-sub { margin-top: -2px; font-size: 22px; font-weight: 900; letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.ms-goal { margin-top: 14px; max-width: 92%; padding: 10px 18px 9px; border-radius: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); }
.ms-goal b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 17px; line-height: 1.22; overflow-wrap: anywhere; font-weight: 900; }
.ms-goal small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 800; opacity: .82; }
.ms-gap { flex: 1; min-height: 8px; }
.ms-foot { text-align: center; }
.ms-text { margin: 0 auto 14px; max-width: 330px; font-size: 17px; line-height: 1.36; font-weight: 800; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.ms-btns { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
#palm-app .ms-btns button { min-height: 52px; border-radius: 17px; font-size: 16px; font-weight: 900; cursor: pointer; }
#palm-app button.ms-share { border: 1.5px solid rgba(255,255,255,.65); background: rgba(255,255,255,.14); color: #fff; }
#palm-app button.ms-share.busy { opacity: .6; }
#palm-app button.ms-go { border: 0; background: #fff; color: #1a120b; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
#palm-app .ms-start button.ms-go { background: linear-gradient(135deg, #ffe08a, #ff9a5a); }
#palm-app .ms-d30 button.ms-go { background: linear-gradient(135deg, #fff1b8, #ffb347); }
#palm-app .ms-d120 button.ms-go { background: linear-gradient(135deg, #c8fff0, #7dffd0); color: #032a24; }
#palm-app .ms-d365 button.ms-go { background: linear-gradient(135deg, #fff3b8, #f5c542 55%, #d99a1a); color: #3a2300; }
#palm-app .ms-d365 button.ms-share { border-color: rgba(255,222,140,.7); color: #fff3c8; }
.ms-kicker, .ms-sub, .ms-goal, .ms-text, .ms-btns { animation: msUp .6s cubic-bezier(.2,.9,.3,1) both; }
.ms-kicker { animation-delay: .1s; } .ms-sub { animation-delay: .42s; } .ms-goal { animation-delay: .54s; } .ms-text { animation-delay: .68s; } .ms-btns { animation-delay: .8s; }
.ms-light .ms-head, .ms-light .ms-brand { color: #0e2a4a; }
.ms-light .ms-brand, .ms-light .ms-sub { text-shadow: 0 1px 10px rgba(255,255,255,.6); }
.ms-light .ms-kicker span, .ms-light .ms-goal { background: rgba(255,255,255,.58); border-color: rgba(255,255,255,.85); }
.ms-light .ms-bars i { background: rgba(14,42,74,.18); } .ms-light .ms-bars i b { background: #0e2a4a; }
.ms-d365 .ms-kicker span, .ms-d365 .ms-goal { background: rgba(255,214,107,.14); border-color: rgba(255,222,140,.5); color: #fff3c8; }
.ms-d120 .ms-kicker span { border-color: rgba(125,255,208,.55); }
button.ms-prev { position: absolute; left: 0; top: 14%; bottom: 32%; width: 22%; border: 0; background: transparent; padding: 0; }
@keyframes msIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes msGrow { from { opacity: 0; transform: translateY(28px) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes msPop { 0% { opacity: 0; transform: scale(.4) translateY(20px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes msUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes msPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .8; } 50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; } }
@keyframes msSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes msWave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes msAur { from { opacity: .55; transform: translateX(-7%) skewY(-10deg) scaleY(.9); } to { opacity: 1; transform: translateX(7%) skewY(-4deg) scaleY(1.2); } }
@keyframes msShoot { 0% { opacity: 0; transform: rotate(-28deg) translateX(0); } 3% { opacity: 1; } 12% { opacity: 0; transform: rotate(-28deg) translateX(-260px); } 100% { opacity: 0; transform: rotate(-28deg) translateX(-260px); } }
@keyframes msRise { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(14px, -300px); } }
@keyframes msFall { 0% { transform: translate(0, 0) rotate(var(--r)); } 100% { transform: translate(40px, 120dvh) rotate(calc(var(--r) + 600deg)); } }
@keyframes msTwinkle { 0%, 100% { opacity: .15; transform: scale(.35) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes msFly { 0% { opacity: .2; transform: translate(0, 0); } 50% { opacity: 1; } 100% { opacity: .35; transform: translate(26px, -34px); } }
@keyframes msShine { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(620px); } }
@keyframes msBar { to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ms, .ms *, .ms-badge .mb-disc { animation: none !important; }
  .ms-bars i.now b { transform: none; }
  .msp-conf { display: none; }
}
/* значки на экране цели */
.ms-badges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 4px; padding: 4px 0 6px; }
#palm-app button.ms-badge { min-width: 0; width: 100%; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); }
.mb-disc { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; box-shadow: 0 6px 16px rgba(60,30,10,.2), inset 0 0 0 2px rgba(255,255,255,.55); }
.mb-disc::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,0) 46%); }
.mb-t { position: relative; z-index: 1; font-size: 19px; font-weight: 900; letter-spacing: -.04em; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.35); }
.ms-badge small { font-size: 11.5px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.mb-start .mb-disc { background: linear-gradient(160deg, #6d2a86, #ff8c5a 70%, #ffd08a); }
.mb-first .mb-disc { background: linear-gradient(160deg, #2f8cff, #8fd3ff); }
.mb-week .mb-disc { background: linear-gradient(160deg, #0aa6c9, #3fe0d0); }
.mb-d30 .mb-disc { background: linear-gradient(160deg, #7a2a6e, #ff6b4a 60%, #ffd36b); }
.mb-d60 .mb-disc { background: linear-gradient(160deg, #0f1a4f, #9a3e8f 60%, #ff7a8a); }
.mb-d90 .mb-disc { background: radial-gradient(circle at 70% 30%, #e8eeff 0 9%, transparent 10%), linear-gradient(160deg, #030820, #1c3a7a); }
.mb-d120 .mb-disc { background: linear-gradient(160deg, #010914, #0a3f55 50%, #3dffb0); }
.mb-d365 .mb-disc { background: linear-gradient(160deg, #5a3a08, #f5c542 55%, #fff1b0); box-shadow: 0 6px 18px rgba(200,140,20,.45), inset 0 0 0 2px rgba(255,240,180,.8); }
.mb-lock .mb-disc { background: #f4eee7; box-shadow: inset 0 0 0 2px #e4d7ca; }
.mb-lock .mb-disc::after { display: none; }
.mb-lock .mb-t { color: #bba899; text-shadow: none; }
.ms-badge:active .mb-disc { transform: scale(.94); }

/* ---------- v10: круговой регулятор срока ---------- */
.dial-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 6px; }
.dial {
  position: relative; width: min(250px, 66vw); aspect-ratio: 1; border-radius: 50%; margin: 18px 0 6px;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; outline: none; cursor: grab;
  background: radial-gradient(circle at 50% 42%, #fffaf4 0 46%, #fff3e6 47% 100%);
  box-shadow: 0 18px 40px rgba(255,106,0,.14), inset 0 0 0 1px #f6e6d6;
}
.dial.dragging { cursor: grabbing; }
.dial:focus-visible { box-shadow: 0 0 0 3px rgba(255,106,0,.35), 0 18px 40px rgba(255,106,0,.14); }
#palm-app .dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial-track { fill: none; stroke: #f6e3cf; stroke-width: 22; }
.dial-arc { fill: none; stroke: url(#dialGrad); stroke-width: 22; stroke-linecap: round; }
.dial-tick { stroke: #ecd9c6; stroke-width: 2; stroke-linecap: round; }
.dial-tick.on { stroke: #ffb067; }
.dial-mark { fill: #b99a82; font-size: 12px; font-weight: 800; text-anchor: middle; font-family: inherit; }
.dial-mark-top { fill: #a8876e; }
.dial-knob { fill: #fff; stroke: #ff6a00; stroke-width: 3; filter: drop-shadow(0 3px 6px rgba(150,60,0,.35)); transition: r .15s ease; }
.dial.dragging .dial-knob { r: 20; }
.dial-knob-dot { fill: #ff6a00; pointer-events: none; }
.dial-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dial-num { font-size: 56px; line-height: 1; font-weight: 900; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dial-unit { font-size: 17px; font-weight: 900; color: #ff6a00; margin-top: 2px; }
.dial-end { font-size: 12px; font-weight: 800; color: var(--muted); margin-top: 6px; }
.dial-hint { margin: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; }

/* ---------- v10: восстановленный день ---------- */
.day.restored { background: #e9e0ff; color: #4b2f9a; }
.lg.restored { background: #e9e0ff; }
.day-card.restored { border-left-color: #8a6cf0; }
.row-ico.restored { background: #eee7ff; color: #4b2f9a; }
.report .st-restored { color: #5b3aa6; }
.restore-offer {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 16px;
  background: #fffaf3; border: 1px dashed #f0d9c2;
}
.restore-text b { display: block; font-size: 14px; font-weight: 900; }
.restore-text small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.35; }
#palm-app button.restore-btn {
  align-self: flex-start; border: 0; border-radius: 999px; padding: 9px 14px; background: #fff; color: #b44e00;
  font-size: 14px; font-weight: 900; box-shadow: inset 0 0 0 1.5px #ffd2ad; transition: transform .12s ease;
}
#palm-app button.restore-btn:active { transform: scale(.97); }

/* ---------- v10: салют ---------- */
canvas.fireworks { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10000; }
@media (prefers-reduced-motion: reduce) { canvas.fireworks { display: none; } }

/* ---------- v10: аватар из Telegram поверх буквы ---------- */
#palm-app .av { position: relative; overflow: hidden; flex: none; }
#palm-app .av > img.av-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: inherit; display: block; background: #ffe7c2; }
.dial-dot { fill: #fff; opacity: .9; pointer-events: none; }
/* v11: онбординг «Как это работает» на сценах карточек-достижений */
.how { z-index: 31; animation: howIn .45s cubic-bezier(.2,.9,.3,1) both; }
.how .ms-ui { pointer-events: none; }
.how .ms-ui button { pointer-events: auto; }
.how .ms-bars i.now b { animation: msBar .7s .1s cubic-bezier(.3,.7,.4,1) forwards; }
.how-row { display: flex; align-items: center; justify-content: space-between; min-height: 34px; }
#palm-app button.how-x { width: 34px; height: 34px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: inherit; font-size: 22px; line-height: 1; font-weight: 700; opacity: .8; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; }
.how-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: clamp(14px, 5dvh, 46px); }
.how-dense .how-head { margin-top: clamp(8px, 2.4dvh, 24px); }
.how-title { margin: 14px 0 0; max-width: 350px; font-size: clamp(34px, 10.4vw, 44px); line-height: 1.02; font-weight: 900; letter-spacing: -.035em; text-wrap: balance; text-shadow: 0 3px 22px rgba(0,0,0,.35); }
.how-dense .how-title { font-size: clamp(30px, 8.8vw, 36px); }
.how-text { margin: 14px auto 0; max-width: 330px; font-size: 17.5px; line-height: 1.38; font-weight: 800; text-wrap: pretty; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.how-dense .how-text { font-size: 16px; margin-top: 10px; }
.how-steps { list-style: none; margin: 18px 0 0; padding: 0; width: 100%; max-width: 360px; display: grid; gap: 9px; text-align: left; }
.how-steps li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 18px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 15.5px; line-height: 1.28; font-weight: 800; animation: msUp .55s calc(.35s + var(--k) * .1s) cubic-bezier(.2,.9,.3,1) both; }
.how-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,255,255,.22); font-size: 21px; }
.how-srcs { margin-top: 14px; width: 100%; max-width: 360px; display: grid; gap: 9px; }
#palm-app button.how-src { display: block; width: 100%; min-height: 0; text-align: left; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.85); background: rgba(255,255,255,.72); color: #0e2a4a; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0,40,80,.12); cursor: pointer; animation: msUp .55s .45s cubic-bezier(.2,.9,.3,1) both; }
#palm-app button.how-src + button.how-src { animation-delay: .58s; }
.how-src-t { display: block; font-size: 13px; line-height: 1.3; font-weight: 700; opacity: .9; }
.how-src-w { display: block; margin-top: 6px; font-size: 12px; font-weight: 900; color: #0a6fb8; }
.how-src-w i { font-style: normal; }
.how:not(.ms-light) .how-src { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); color: #fff; }
.how:not(.ms-light) .how-src-w { color: #ffe08a; }
.how-head .ms-kicker, .how-title, .how-text, .how-btns { animation: msUp .6s cubic-bezier(.2,.9,.3,1) both; }
.how-head .ms-kicker { animation-delay: .05s; } .how-title { animation-delay: .14s; } .how-text { animation-delay: .26s; } .how-btns { animation-delay: .4s; }
.how-btns.one { grid-template-columns: 1fr; }
.how-final .how-btns { grid-template-columns: 1fr; }
#palm-app .how .ms-btns button { min-height: 54px; }
#palm-app button.how-sec { border: 0; background: transparent; color: inherit; font-size: 15.5px; opacity: .92; min-height: 44px !important; text-shadow: 0 1px 10px rgba(0,0,0,.3); }
#palm-app .how.ms-light button.ms-go { background: linear-gradient(135deg, #ff9a3d, #ff5e62); color: #fff; box-shadow: 0 12px 30px rgba(255,94,98,.35); }
.how.ms-light .how-title { text-shadow: 0 2px 16px rgba(255,255,255,.55); }
.how.ms-light .how-text { text-shadow: 0 1px 10px rgba(255,255,255,.7); }
.how.ms-light .how-steps li { background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.9); }
.how.ms-light .how-x { background: rgba(255,255,255,.55); }
.how.ms-light .ms-foot { color: #fff; }
button.how-prev { position: absolute; left: 0; top: 12%; bottom: 22%; width: 26%; border: 0; background: transparent; padding: 0; min-height: 0; }
@keyframes howIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .how .ms-bars i.now b { transform: none; }
}
.how.ms-light .how-head, .how.ms-light .how-row { color: #0e2a4a; }
.how-src-l { display: block; margin-bottom: 3px; font-size: 16px; line-height: 1.2; font-weight: 900; letter-spacing: -.01em; }
/* v11.2: наблюдатель может перейти к историям автора; выбор истории по чипу */
.how-final .how-btns:has(.how-alt) { gap: 8px; }
#palm-app button.how-alt { min-height: 48px !important; border: 1.5px solid rgba(255,255,255,.75); background: rgba(255,255,255,.22); color: #0e2a4a; font-size: 15px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.how:not(.ms-light) button.how-alt { color: #fff; }
.how-pick { display: grid; gap: 8px; margin: 4px 0 6px; }
.how-pick .list-row { margin: 0; width: 100%; text-align: left; }

/* v14: закрытый день (после дедлайна до 00:00) и режим наблюдателя */
.closed-day { border-radius: 18px; padding: 14px 16px; background: #f4efe9; color: var(--ink); }
.closed-day .cd-head { display: flex; align-items: center; gap: 10px; }
.closed-day .cd-head b { font-size: 17px; font-weight: 900; }
.closed-day .cd-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 15px; flex: none; }
.closed-day > small { display: block; margin: 6px 0 0 40px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.closed-day .cd-next { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: #fff; font-size: 14px; }
.closed-day .cd-next b { font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 900; flex: none; }
.closed-day.cd-done { background: #e5f8ec; }
.closed-day.cd-done .cd-head b { color: #0f5d2c; }
.closed-day.cd-done .cd-ic { color: #178a45; }
.closed-day.cd-missed { background: #fdecea; }
.closed-day.cd-missed .cd-head b { color: #a3261b; }
.closed-day.cd-missed .cd-ic { color: #d93a2b; font-weight: 900; }
.closed-day.cd-freeze { background: #e3f1ff; }
.closed-day.cd-freeze .cd-head b { color: #0b4f86; }
.closed-day.cd-ahead { background: #fff8ec; }
.row-closed { font-weight: 800; }
.row-closed.rc-done { color: #178a45 !important; }
.row-closed.rc-missed { color: #c0392b !important; }
.row-closed.rc-freeze { color: #0b4f86 !important; }
.row-ico.rc-done { background: #e5f8ec; color: #178a45; }
.row-ico.rc-missed { background: #fdecea; color: #d93a2b; font-weight: 900; }
.amount .timer { font-variant-numeric: tabular-nums; }
.watch-mode .seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #f4efe9; padding: 4px; border-radius: 16px; }
#palm-app .watch-mode .seg-opt { border: 0; background: transparent; border-radius: 12px; padding: 10px 4px; text-align: center; color: var(--ink); min-width: 0; }
.watch-mode .seg-opt b { display: block; font-size: 13.5px; font-weight: 900; line-height: 1.15; }
.watch-mode .seg-opt small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); font-weight: 700; line-height: 1.2; }
#palm-app .watch-mode .seg-opt.on { background: #fff; box-shadow: 0 2px 8px rgba(70,30,0,.10); }
.watch-mode .seg-opt.on b { color: var(--orange); }
.watch-mode button.check { margin-top: 10px; }
/* v15: реакции на отчёты, отметка «изменён» */
.edited { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 8px; background: #f4efe9; color: var(--muted); font-size: 11px; font-weight: 800; vertical-align: 2px; }
.rep-who { margin: 0; }
.react-card .rx-hint { margin: 0; }
.react-bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
#palm-app .react-bar .rx { grid-column: span 2; }
#palm-app .react-bar .rx:nth-child(n+4) { grid-column: span 3; }
#palm-app .react-bar .rx { border: 0; background: #fff; border-radius: 16px; padding: 10px 4px 9px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink); box-shadow: 0 2px 8px rgba(70,30,0,.06); transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.react-bar .rx .rx-e { font-size: 26px; line-height: 1; }
.react-bar .rx small { font-size: 12.5px; font-weight: 800; line-height: 1.15; text-align: center; color: var(--muted); }
#palm-app .react-bar .rx.on { background: #ffe9d2; box-shadow: 0 0 0 2px var(--orange) inset; }
.react-bar .rx.on small { color: var(--orange); }
#palm-app .react-bar .rx:active { transform: scale(.94); }
.react-bar .rx.pop .rx-e { animation: rx-pop .42s cubic-bezier(.2,1.6,.4,1); }
@keyframes rx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45) rotate(-8deg); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .react-bar .rx.pop .rx-e { animation: none; } }
.rx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#palm-app .rx-chip { border: 0; background: #fff; border-radius: 999px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--ink); min-width: 0; box-shadow: 0 2px 8px rgba(70,30,0,.06); }
.rx-chip b { font-size: 14px; font-weight: 900; }
#palm-app .rx-chip.on { background: #ffe9d2; box-shadow: 0 0 0 2px var(--orange) inset; }
.rx-who-list { display: flex; flex-direction: column; gap: 6px; }
.rx-who { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 8px 10px; }
.rx-who b { display: block; font-size: 14px; }
.rx-who small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.rx-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rx-mini span { background: #f4efe9; border-radius: 999px; padding: 2px 8px; font-size: 12.5px; font-weight: 800; }
.list-row .rwho { display: block; color: var(--muted); font-size: 12px; font-weight: 800; margin-bottom: 2px; }
.feed-head { margin-top: 18px; }
.react-admire, .react-support { color: #0f8a3f; } .react-push { color: #b45309; }
/* v16: пропуск, который можно восстановить, — тонкая пунктирная обводка; карточка под календарём подсвечивается */
.day.miss.can-restore { box-shadow: inset 0 0 0 2px #f0b98a; }
.day.miss.can-restore::after { content: '↺'; position: absolute; top: 2px; right: 4px; font-size: 9px; font-weight: 900; color: #b44e00; opacity: .8; }
.restore-offer.pulse { animation: restore-pulse 1.2s ease; }
@keyframes restore-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,140,40,0); } 30% { box-shadow: 0 0 0 4px rgba(255,140,40,.35); } }
@media (prefers-reduced-motion: reduce) { .restore-offer.pulse { animation: none; } }

/* v17: завершённые цели — всегда с текстом, отдельным списком */
.fin-head { margin-top: 18px; }
.fin-row { opacity: .92; }
.row-ico.fin-ico { font-size: 18px; background: #eef7ef; }
.row-ico.fin-ico.fin-early { background: #f3eee8; }
.fin-badge { display: inline-block; font-weight: 900; color: #178a45; }
.fin-badge.fin-early { color: #8d5a3b; }
.fin-banner { display: flex; gap: 12px; align-items: flex-start; background: #eaf8ee; border: 1px solid #bfe8cb; border-radius: 18px; padding: 14px; }
.fin-banner.fin-early { background: #f7f1ea; border-color: #e8dccd; }
.fin-banner .fin-big { font-size: 28px; line-height: 1; }
.fin-banner .fin-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fin-banner b { font-size: 17px; font-weight: 900; color: #14532d; }
.fin-banner.fin-early b { color: #5b3a24; }
.fin-banner small { font-size: 13px; line-height: 1.35; color: var(--muted); font-weight: 700; }
.visa.visa-fin { background: linear-gradient(135deg, #3fb36b, #23874c); }
.visa .of { font-size: 22px; opacity: .85; letter-spacing: 0; }
.home-empty { text-align: center; }
.home-empty p b { display: block; margin-bottom: 4px; color: var(--ink, #2a1a10); }
.home-empty .primary { margin-top: 10px; }
.home-empty .ghost { margin-top: 8px; }

/* v54: «цель на сегодня выполнена» — тёплая карточка в стиле приложения, без таймера */
.closed-day.cd-goal { background: #fff4cc; border: 2.5px solid #1a1a1a; box-shadow: 4px 4px 0 #1a1a1a; }
.closed-day.cd-goal .cd-head b { color: var(--ink); }
.closed-day.cd-goal .cd-ic { background: #ff7a18; border: 2px solid #1a1a1a; }
.closed-day.cd-goal .cd-cheer { margin: 8px 0 0 40px; font-size: 14px; font-weight: 700; line-height: 1.35; color: #6b4a2e; }
.closed-day.cd-goal .cd-days { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0 40px; }
.closed-day.cd-goal .cd-days b { font-size: 34px; line-height: 1; font-weight: 900; color: #ff7a18; -webkit-text-stroke: 1.5px #1a1a1a; paint-order: stroke fill; font-variant-numeric: tabular-nums; }
.closed-day.cd-goal .cd-days span { font-size: 16px; font-weight: 900; }
.closed-day.cd-goal .cd-next { border: 2px solid #1a1a1a; }
.row-closed.rc-done { color: #b85400 !important; }
.row-done { font-size: 20px; }

/* v54: сообщения наблюдателей */
.obs-msgs .rowhead small { font-weight: 800; }
.obs-msg { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(70,30,0,.05); }
.obs-msg .grow { min-width: 0; flex: 1; }
.obs-msg-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.obs-msg-top small { color: var(--muted); font-size: 12px; font-weight: 700; flex: none; }
.obs-msg-text { margin: 4px 0 0; font-size: 15px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
#palm-app .obs-compose textarea { min-height: 72px; }
.emo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#palm-app button.emo-chip { width: 42px; height: 42px; border-radius: 14px; border: 2px solid #1a1a1a; background: #fff4cc; font-size: 20px; line-height: 1; padding: 0; box-shadow: 2px 2px 0 #1a1a1a; }
#palm-app button.emo-chip:active { transform: translate(2px, 2px); box-shadow: none; }
.obs-hint { margin: 0; }
.obs-mine { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

/* ================= v56 «Нисаба» ================= */
/* Пока набираешь текст — плавающие панели не перекрывают поле */
html.typing .dock, html.typing .toast { display: none !important; }

/* Экран цели: герой → сегодня → вкладки */
.goal-hero { position: relative; overflow: hidden; border-radius: 26px; padding: 16px 18px 14px; color: #fff;
  background: linear-gradient(150deg, #ff8a1f 0%, #ff6a00 48%, #e84d00 100%); box-shadow: 0 14px 30px rgba(255,106,0,.28); }
.goal-hero::after { content: ''; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255,230,160,.55), rgba(255,230,160,0) 70%); pointer-events: none; }
.gh-top { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.gh-chip { background: rgba(255,255,255,.2); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; }
.gh-chip.gift { background: #fff; color: var(--orange); }
.gh-mid { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; position: relative; z-index: 1; }
.gh-num { font-size: 64px; line-height: .95; font-weight: 900; letter-spacing: -.04em; }
.gh-cap { font-size: 16px; font-weight: 800; opacity: .92; }
.gh-act { margin-top: 6px; font-size: 15px; font-weight: 700; opacity: .95; position: relative; z-index: 1; }
.gh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; position: relative; z-index: 1; }
.gh-stats div { background: rgba(26,18,11,.16); border-radius: 14px; padding: 8px 10px; }
.gh-stats b { display: block; font-size: 20px; font-weight: 900; line-height: 1.1; }
.gh-stats small { font-size: 11px; font-weight: 800; opacity: .9; }
.today-ctas { display: flex; flex-direction: column; gap: 10px; }
button.primary.big-cta { min-height: 60px; font-size: 18px; }
#palm-app button.nothing-btn { width: 100%; border: 0; border-radius: 16px; padding: 12px 14px; text-align: left; background: #fff3e6; color: #a34500;
  box-shadow: inset 0 0 0 1.5px #ffc796; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
#palm-app button.nothing-btn span { grid-row: span 2; font-size: 22px; }
#palm-app button.nothing-btn b { font-size: 15px; font-weight: 900; }
#palm-app button.nothing-btn small { font-size: 12px; font-weight: 700; color: #b8743d; line-height: 1.3; }
#palm-app button.nothing-btn:active { transform: scale(.98); }
.orange-t { color: #ff7a00; }
.nothing-why { background: #fff3e6; border-radius: 12px; padding: 8px 10px; font-weight: 700; color: #8a4200; }
.htabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: #f6efe8; border-radius: 14px; padding: 4px; }
#palm-app button.htab { border: 0; background: transparent; border-radius: 11px; padding: 9px 2px; font-size: 13px; font-weight: 800; color: var(--muted); min-width: 0; }
#palm-app button.htab.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(70,30,0,.08); }
.htab-body { display: flex; flex-direction: column; gap: 12px; }
.goal-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 6px; }
#palm-app button.glink { border: 2px solid var(--ink); background: #fff; border-radius: 18px; padding: 12px; text-align: left; box-shadow: 3px 3px 0 var(--ink); color: var(--ink); }
#palm-app button.glink { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; }
#palm-app button.glink span { font-size: 22px; line-height: 1; width: 44px; height: 44px; border-radius: 14px; background: var(--cream, #fff4e3); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
#palm-app button.glink b { display: block; font-size: 14px; font-weight: 900; margin-top: 0; }
#palm-app button.glink small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); }
#palm-app button.glink:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
#palm-app button.cd-redo { margin-top: 10px; min-height: 44px; }

/* 3 дня тихого удаления */
.grace-card { background: #fff8ec; border: 1.5px dashed #f2c99c; border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.grace-row { display: flex; align-items: center; gap: 10px; }
.grace-ic { font-size: 24px; }
.grace-card small { display: block; font-size: 12px; font-weight: 800; color: var(--muted); }
.grace-left { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink); }
#palm-app button.grace-del { align-self: flex-start; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }

/* Срок цели и веха */
.target-card { display: flex; gap: 10px; align-items: center; background: #fff; border: 2px solid var(--ink); border-radius: 18px; padding: 12px 14px; box-shadow: 3px 3px 0 var(--ink); }
.target-ic { font-size: 26px; }
.target-card small { display: block; font-size: 12px; font-weight: 800; color: var(--muted); }
.target-card b { display: block; font-size: 16px; font-weight: 900; }
.target-left { color: var(--orange) !important; }
.ms-banner { border-radius: 20px; padding: 14px; color: var(--ink); background: linear-gradient(135deg, #fff1c7, #ffd8a8); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.ms-banner p { margin: 6px 0 10px; font-size: 14px; line-height: 1.4; }
.ms-k { font-weight: 900; font-size: 16px; }
.ms-loud { display: block; margin-top: 4px; font-weight: 900; letter-spacing: .02em; color: #c2410c; }

/* Календарь: оранжевые и ярко-красные дни */
.day.nothing, .day.forgot { background: #ffb15c; color: #5a2500; }
.day.forgot { box-shadow: inset 0 0 0 2px #ff7a00; }
.day.miss { background: #ff2d46; color: #fff; }
.lg.nothing { background: #ffb15c; } .lg.miss { background: #ff2d46; }
.row-ico.nothing { background: #ffe1c2; color: #a34500; }
.row-ico.miss { background: #ffe0e4; color: #e11d48; }
.day-card.nothing, .day-card.forgot { border-left-color: #ff8a1f; }
.day-card.miss { border-left-color: #ff2d46; }
.cal-sum .cs-orange b { color: #ff7a00; } .cal-sum .cs-red b { color: #ff2d46; }
.forgot-offer { border-color: #ffb3bd; background: #fff5f6; }

/* Реакции: 8 готовых + свои */
.react-bar { grid-template-columns: repeat(4, 1fr); }
#palm-app .react-bar .rx, #palm-app .react-bar .rx:nth-child(n+4) { grid-column: span 1; }
.react-bar .rx small { font-size: 11px; }
.rx-custom { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #f0e0d0; display: flex; flex-direction: column; gap: 10px; }
.rxc-row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
#palm-app input.rxc-emoji { text-align: center; font-size: 22px; padding-left: 4px; padding-right: 4px; }
.emo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#palm-app button.emo-chip { border: 0; background: #fff; width: 40px; height: 40px; border-radius: 12px; font-size: 20px; box-shadow: 0 2px 8px rgba(70,30,0,.06); padding: 0; }
#palm-app button.emo-chip.on { box-shadow: 0 0 0 2px var(--orange) inset; background: #ffe9d2; }
.rxc-recent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rxc-recent small { width: 100%; }
.rxc-mine { display: flex; flex-wrap: wrap; gap: 6px; }
.rxc-tag { display: inline-flex; align-items: center; gap: 6px; background: #ffe9d2; border-radius: 999px; padding: 5px 6px 5px 12px; font-weight: 800; font-size: 14px; }
#palm-app .rxc-tag button { border: 0; background: rgba(26,18,11,.08); width: 24px; height: 24px; border-radius: 50%; padding: 0; font-size: 15px; line-height: 1; color: var(--ink); }
#palm-app .rx-chip.custom em { font-style: normal; font-size: 13px; font-weight: 800; }

/* Похороны, могилы, цветы */
.bury-box { border: 2px solid var(--ink); border-radius: 18px; padding: 12px 14px; background: #f7f1ea; display: flex; flex-direction: column; gap: 6px; }
.bury-box b { font-weight: 900; } .bury-box small { color: var(--muted); font-weight: 700; font-size: 13px; line-height: 1.35; }
#palm-app button.bury-btn { width: 100%; min-height: 54px; border: 2px solid var(--ink); border-radius: 16px; background: #2a1d14; color: #ffe7c7; font-weight: 900; font-size: 16px; box-shadow: 4px 4px 0 #ff6a00; }
#palm-app button.bury-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #ff6a00; }
.funeral-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.funeral-hero b { font-size: 20px; font-weight: 900; } .funeral-hero small { color: var(--muted); font-weight: 800; }
.grave-list { display: flex; flex-direction: column; gap: 12px; }
.grave-card { display: flex; flex-direction: column; gap: 10px; align-items: stretch; background: #fff; border: 2px solid var(--ink); border-radius: 20px; padding: 10px; box-shadow: 4px 4px 0 var(--ink); color: var(--ink); text-align: left; width: 100%; }
.grave-card.big { padding: 12px; }
.grave-txt { min-width: 0; flex: 1; }
.grave-title { display: block; font-size: 17px; font-weight: 900; line-height: 1.2; }
.grave-txt small { display: block; color: var(--muted); font-size: 12px; font-weight: 800; margin-top: 2px; }
.grave-reason { margin: 6px 0 0; font-style: italic; font-size: 13px; color: #5a4636; }
.grave-fl { margin-top: 6px; }
.fl-line { display: inline-flex; flex-wrap: wrap; gap: 8px; font-weight: 800; font-size: 13px; }
.flowers-card { border-radius: 22px; padding: 14px; color: var(--ink); background: linear-gradient(140deg, #ffe08a 0%, #ffb35c 45%, #ff6a00 100%); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); display: flex; flex-direction: column; gap: 10px; }
.fl-head { display: flex; gap: 10px; align-items: center; }
.fl-big { font-size: 32px; animation: flFlicker 2.4s ease-in-out infinite; }
@keyframes flFlicker { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .fl-big { animation: none; } }
.fl-head b { display: block; font-size: 17px; font-weight: 900; } .fl-head small { display: block; font-size: 12px; font-weight: 800; opacity: .85; }
.fl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#palm-app button.fl-opt { border: 2px solid var(--ink); background: #fffdf8; border-radius: 16px; padding: 10px 2px 9px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); min-width: 0; }
#palm-app button.fl-opt:active { transform: translate(2px, 2px); box-shadow: none; }
.fl-e { font-size: 26px; line-height: 1.1; margin-bottom: 4px; } #palm-app button.fl-opt b { font-size: 11px; font-weight: 900; } #palm-app button.fl-opt small { font-size: 12px; font-weight: 900; color: #c2410c; }
.fl-now { font-size: 13px; }
.fl-who { display: flex; gap: 8px; align-items: center; padding: 6px 0; } .fl-who small { margin-left: auto; color: var(--muted); font-weight: 700; font-size: 12px; }
.cem-hero, .gift-hero { display: flex; gap: 12px; align-items: center; border: 2px solid var(--ink); border-radius: 20px; padding: 14px; box-shadow: 4px 4px 0 var(--ink); }
.cem-hero { background: linear-gradient(160deg, #3a2a3f, #1a120b); color: #ffe7c7; }
.gift-hero { background: linear-gradient(140deg, #fff1c7, #ffc48a); }
.cem-hero > span, .gift-hero > span { font-size: 36px; }
.cem-hero b, .gift-hero b { display: block; font-size: 18px; font-weight: 900; }
.cem-hero small, .gift-hero small { display: block; font-size: 13px; font-weight: 700; opacity: .85; line-height: 1.35; }

/* Подарок цели */
.share-seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; background: #f4efe9; border-radius: 16px; padding: 4px; }
#palm-app button.seg { border: 0; background: transparent; border-radius: 12px; padding: 11px 0; font: 900 14px var(--font); color: var(--ink); min-width: 0; }
#palm-app button.seg.on { background: #fff; color: var(--orange); box-shadow: 0 2px 8px rgba(70,30,0,.10); }
.gift-math { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gift-math div { background: #fff; border-radius: 16px; padding: 10px 12px; box-shadow: inset 0 0 0 1.5px #f0e6dc; }
.gift-math b { display: block; font-size: 22px; font-weight: 900; color: var(--orange); } .gift-math small { font-size: 12px; font-weight: 800; color: var(--muted); }
.gift-card { background: #fff; border: 2px solid var(--ink); border-radius: 20px; padding: 14px; box-shadow: 4px 4px 0 var(--ink); display: flex; flex-direction: column; gap: 8px; }
.gift-from { display: flex; gap: 10px; align-items: center; }
.gift-from small { display: block; font-size: 12px; font-weight: 800; color: var(--muted); } .gift-from b { display: block; font-weight: 900; }
.gift-card h2, .gift-card h3 { margin: 4px 0 0; }
.gift-act { margin: 0; font-weight: 700; }
.gift-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; font-weight: 800; color: var(--muted); }
.gift-msg { margin: 0; background: #fff8ec; border-radius: 12px; padding: 8px 10px; font-style: italic; }
.gift-st { font-size: 12px; font-weight: 900; border-radius: 999px; padding: 3px 9px; background: #f3eee8; color: var(--muted); white-space: nowrap; }
.gift-st.st-pending { background: #fff1c7; color: #8a5a00; } .gift-st.st-accepted { background: #d7f5e2; color: #0f5d2c; }
.gift-st.st-declined, .gift-st.st-expired, .gift-st.st-cancelled { background: #ffe4e8; color: #9f1239; }

/* v56: векторные могилы на всю ширину карточки (селектор с #palm-app, чтобы перебить общее правило svg 22px) */
#palm-app svg.grave-scene { display: block; width: 100%; height: auto; min-height: 140px; max-height: 190px; aspect-ratio: 360 / 190; overflow: visible; }
#palm-app .funeral-hero svg.grave-scene { width: 100%; }
#palm-app .grave-txt { padding: 0 4px 2px; }
#palm-app svg.cem-scene { display: block; width: 100%; height: auto; aspect-ratio: 360 / 190; }
#palm-app .cem-hero { flex-direction: column; align-items: stretch; padding: 10px; gap: 10px; }
#palm-app .cem-hero-txt { padding: 0 6px 4px; }
#palm-app .grave-scene .g-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: gFlame 1.8s ease-in-out infinite; }
#palm-app .grave-scene .g-glow { animation: gGlow 2.4s ease-in-out infinite; }
@keyframes gFlame { 0%, 100% { transform: scale(1, 1) rotate(-3deg); } 50% { transform: scale(.92, 1.08) rotate(3deg); } }
@keyframes gGlow { 0%, 100% { opacity: .45; } 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { #palm-app .grave-scene .g-flame, #palm-app .grave-scene .g-glow { animation: none; } }

/* v56 «Нисаба»: страховка — любое поле без type выглядит как поля мастера цели */
#palm-app input:not([type]) {
  width: 100%; border: 1.5px solid #f0e6dc; border-radius: 16px; padding: 14px;
  font: 700 16px var(--font); background: #fff; color: #1a120b; -webkit-text-fill-color: #1a120b; caret-color: #ff6a00; outline: none; color-scheme: light;
}
#palm-app input:not([type]):focus { border-color: var(--orange); }
#palm-app .sheet input[type="text"], #palm-app .sheet textarea { margin-bottom: 2px; }
#palm-app .sheet textarea { min-height: 96px; }

/* Свой календарь (срок цели) — вместо системного выбора даты */
.dp { display: flex; flex-direction: column; gap: 10px; }
.dp-presets { gap: 6px; }
#palm-app .dp-presets button.chip { font-size: 13.5px; padding: 8px 12px; box-shadow: 0 0 0 1.5px #f0e6dc inset; }
#palm-app .dp-presets button.chip.on { box-shadow: none; }
.dp-cal { background: #fff; border: 1.5px solid #f0e6dc; border-radius: 16px; padding: 8px 8px 10px; }
.dp-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; text-align: center; margin-bottom: 4px; }
.dp-head b { font-size: 15px; font-weight: 900; }
#palm-app button.dp-nav { width: 40px; height: 36px; border: 0; border-radius: 12px; background: #f4efe9; color: var(--ink); font: 900 20px/1 var(--font); padding: 0; }
#palm-app button.dp-nav:disabled { opacity: .3; }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dp-week span { text-align: center; font-size: 11px; font-weight: 800; color: var(--muted); padding: 2px 0 4px; text-transform: uppercase; }
#palm-app button.dp-day { height: 36px; min-width: 0; border: 0; border-radius: 11px; background: transparent; color: var(--ink); font: 800 14px var(--font); padding: 0; }
#palm-app button.dp-day.today { box-shadow: 0 0 0 1.5px #f0e6dc inset; }
#palm-app button.dp-day:disabled { color: #cdbfb3; }
#palm-app button.dp-day.on { background: var(--orange); color: #fff; box-shadow: 0 4px 10px rgba(255,106,0,.28); }
.dp-picked { font-size: 13px; font-weight: 800; color: var(--muted); padding: 0 2px; }
.dp-picked.on { color: var(--ink); }

/* Обновления */
.upd-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 22px 18px 20px; color: #fff; background: radial-gradient(120% 90% at 85% 0%, #ffb35c 0%, rgba(255,179,92,0) 60%), linear-gradient(150deg, #ff6a00 0%, #c2410c 100%); box-shadow: 0 14px 30px rgba(255,106,0,.25); }
.upd-hero::after { content: ''; position: absolute; right: -30px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%; border: 18px solid rgba(255,255,255,.12); }
.upd-k { font-size: 13px; font-weight: 800; opacity: .9; }
.upd-name { font-size: 34px; font-weight: 900; line-height: 1.1; margin: 4px 0 8px; letter-spacing: .2px; }
.upd-sub { font-size: 14px; font-weight: 700; line-height: 1.35; max-width: 280px; opacity: .95; }
.upd-news { background: #fff; border-radius: 20px; box-shadow: 0 6px 16px rgba(70,30,0,.06); padding: 4px 14px; }
.upd-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.upd-item + .upd-item { border-top: 1px solid #f3ebe3; }
.upd-ic { flex: 0 0 38px; height: 38px; border-radius: 12px; background: #fff1e6; display: grid; place-items: center; font-size: 19px; }
.upd-news .upd-ic { background: #f3eee8; }
.upd-item b { display: block; font-size: 15px; font-weight: 900; line-height: 1.25; }
.upd-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.38; }

/* v56: кнопка выбора фото вместо системного input[type=file] */
#palm-app .photo-pick { position: relative; display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 14px 16px; border: 1.5px dashed #f0c9a6; border-radius: 16px; background: #fff; font: 800 16px var(--font); color: var(--ink, #1a1a1a); cursor: pointer; }
#palm-app .photo-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#palm-app .photo-pick .photo-pick-ico { font-size: 20px; }
#palm-app .photo-pick .muted { margin-left: auto; font-weight: 700; }

/* v56.1: история «Вышло обновление» — закат, кремовая карточка, толстая обводка, тень со сдвигом */
.rel { position: absolute; inset: 0; z-index: 33; overflow: hidden; color: var(--ink); -webkit-user-select: none; user-select: none; animation: relIn .45s cubic-bezier(.2,.9,.25,1.1) both; font-family: var(--font); }
.rel-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #ff9a3c 0%, #ff6a00 38%, #e2550d 62%, #b8400f 100%); pointer-events: none; }
.rel-sun { position: absolute; left: 50%; top: 62%; width: 300px; height: 300px; margin-left: -150px; border-radius: 50%; background: radial-gradient(circle, #ffe7a3 0%, #ffc15a 45%, rgba(255,193,90,0) 70%); opacity: .85; animation: relSun 6s ease-in-out infinite alternate; }
.rel-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: repeating-linear-gradient(180deg, rgba(255,231,163,.22) 0 3px, rgba(255,231,163,0) 3px 14px), linear-gradient(180deg, #c2410c 0%, #7c2d12 100%); }
.rel-tap { position: absolute; top: 0; bottom: 0; z-index: 1; border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#palm-app button.rel-tap { background: transparent; border: 0; box-shadow: none; }
.rel-tap-l { left: 0; width: 32%; }
.rel-tap-r { right: 0; width: 68%; }
.rel-ui { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 12px) 18px calc(var(--safe-bottom) + 22px); pointer-events: none; }
.rel-ui button { pointer-events: auto; }
.rel-bars { display: flex; gap: 5px; }
.rel-bars i { flex: 1; height: 5px; border-radius: 99px; background: rgba(255,255,255,.35); overflow: hidden; }
.rel-bars i b { display: block; height: 100%; width: 0; background: #fff; border-radius: 99px; }
.rel-bars i.done b { width: 100%; }
.rel-bars i.now b { width: 100%; animation: relBar .7s ease-out both; }
.rel-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.rel-brand { color: #fff; font-size: 15px; font-weight: 900; text-shadow: 0 1px 8px rgba(0,0,0,.2); }
#palm-app button.rel-x { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff7ea; color: var(--ink); font-size: 24px; font-weight: 900; line-height: 1; display: grid; place-items: center; padding: 0; box-shadow: 2px 2px 0 var(--ink); }
.rel-card { margin: auto 0; background: #fff7ea; border: 3px solid var(--ink); border-radius: 28px; box-shadow: 6px 6px 0 var(--ink); padding: 24px 20px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; animation: relUp .5s .05s cubic-bezier(.2,.9,.3,1.2) both; }
.rel-ic { width: 84px; height: 84px; border-radius: 26px; background: #ffe2c2; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center; font-size: 44px; line-height: 1; margin-bottom: 16px; animation: relPop .6s .15s cubic-bezier(.2,.9,.3,1.4) both; }
.rel-kicker { display: inline-block; padding: 5px 12px; border-radius: 99px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.rel-title { margin: 12px 0 0; font-size: clamp(28px, 8.4vw, 36px); line-height: 1.05; font-weight: 900; letter-spacing: -.03em; text-wrap: balance; }
.rel-text { margin: 12px 0 0; font-size: 17px; line-height: 1.4; font-weight: 700; color: #4a3527; text-wrap: pretty; }
.rel-steps { list-style: none; margin: 16px 0 0; padding: 0; width: 100%; display: grid; gap: 10px; text-align: left; }
.rel-steps li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 16px; background: #fff; border: 2px solid var(--ink); font-size: 15px; line-height: 1.3; font-weight: 800; animation: relUp .45s calc(.2s + var(--k) * .08s) cubic-bezier(.2,.9,.3,1) both; }
.rel-sic { flex: 0 0 34px; height: 34px; border-radius: 10px; background: #ffe2c2; display: grid; place-items: center; font-size: 18px; }
.rel-foot { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-height: 52px; justify-content: flex-end; }
.rel-hint { text-align: center; color: rgba(255,255,255,.92); font-size: 13px; font-weight: 800; }
#palm-app button.rel-go { min-height: 54px; border-radius: 18px; border: 3px solid var(--ink); background: #fff7ea; color: var(--ink); font-size: 18px; font-weight: 900; box-shadow: 4px 4px 0 var(--ink); }
#palm-app button.rel-go:active, #palm-app button.rel-x:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
#palm-app button.rel-link { min-height: 44px; border: 0; background: transparent; color: #fff; font-size: 16px; font-weight: 900; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
/* v56.2: середина истории прокручивается сама, кнопки внизу всегда видны и нажимаются (короткие экраны, safe-area) */
.rel-bars, .rel-row, .rel-foot { flex: none; position: relative; z-index: 1; }
.rel-mid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; pointer-events: auto; margin: 10px -12px 12px; padding: 4px 14px 12px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rel-mid::-webkit-scrollbar { display: none; }
.rel-mid > .rel-card { flex: none; margin: auto 0; }
@media (max-height: 860px) {
  .rel-ui { padding-top: calc(var(--safe-top) + 10px); padding-bottom: calc(var(--safe-bottom) + 14px); }
  .rel-row { margin-top: 8px; }
  .rel-card { padding: 18px 16px 16px; border-radius: 24px; }
  .rel-ic { width: 64px; height: 64px; border-radius: 20px; font-size: 34px; margin-bottom: 10px; }
  .rel-title { font-size: clamp(24px, 7.4vw, 30px); margin-top: 10px; }
  .rel-text { font-size: 15px; margin-top: 8px; }
  .rel-steps { margin-top: 12px; gap: 8px; }
  .rel-steps li { padding: 8px 10px; font-size: 14px; gap: 10px; }
  .rel-sic { flex-basis: 30px; height: 30px; font-size: 16px; }
  .rel-foot { gap: 4px; min-height: 40px; }
  #palm-app button.rel-go { min-height: 50px; font-size: 17px; }
  #palm-app button.rel-link { min-height: 40px; font-size: 15px; }
}
@media (max-height: 680px) {
  .rel-ui { padding-top: calc(var(--safe-top) + 8px); padding-bottom: calc(var(--safe-bottom) + 10px); }
  .rel-row { margin-top: 6px; }
  #palm-app button.rel-x { width: 36px; height: 36px; font-size: 21px; }
  .rel-mid { margin-top: 6px; margin-bottom: 8px; }
  .rel-card { padding: 14px 14px 14px; }
  .rel-ic { width: 46px; height: 46px; font-size: 25px; border-radius: 14px; margin-bottom: 8px; }
  .rel-kicker { font-size: 11px; padding: 4px 10px; }
  .rel-title { font-size: 23px; margin-top: 8px; }
  .rel-text { font-size: 14.5px; }
  .rel-steps { margin-top: 10px; gap: 6px; }
  .rel-steps li { padding: 6px 9px; font-size: 13.5px; gap: 9px; border-radius: 14px; }
  .rel-sic { flex-basis: 26px; height: 26px; font-size: 15px; border-radius: 8px; }
  #palm-app button.rel-go { min-height: 46px; font-size: 16.5px; }
  #palm-app button.rel-link { min-height: 36px; }
}
/* v56.2: запись об обновлении в «Уведомлениях» */
.rn-list { margin: 0 0 12px; }
#palm-app button.rn { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 12px; margin: 0 0 8px; text-align: left; position: relative; background: #fff7ea; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 4px 4px 0 var(--ink); font-family: var(--font); }
#palm-app button.rn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
#palm-app button.rn.rn-unread { background: linear-gradient(135deg, #ffe2c2 0%, #fff7ea 70%); }
.rn-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: linear-gradient(180deg, #ff9a3c, #e2550d); border: 2px solid var(--ink); }
.rn-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; padding-right: 10px; }
.rn-main b { font-size: 16px; font-weight: 900; line-height: 1.2; }
.rn-main small { font-size: 13.5px; line-height: 1.35; font-weight: 700; color: #4a3527; }
.rn-main em { font-style: normal; font-size: 13px; font-weight: 900; color: var(--orange); margin-top: 2px; }
.rn-dot { position: absolute; top: 12px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: #e11d48; box-shadow: 0 0 0 2px #fff7ea; }
@keyframes relIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes relUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes relPop { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes relBar { from { width: 0; } to { width: 100%; } }
@keyframes relSun { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .rel, .rel-card, .rel-ic, .rel-steps li, .rel-sun, .rel-bars i.now b { animation: none; } }