/* Календарь — мини-приложение Telegram. Две темы по мотивам otrazhenie-store:
   ночь — чёрный, IBM Plex Mono для цифр и подписей, Montserrat для текста, красная точка-акцент;
   день — тёплый молочный #f7f7f2, белые карточки, тот же шрифт и акцент. */
/* шрифты лежат рядом (лицензия OFL) — быстрее в Telegram и не зависят от Google */
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Montserrat; src: url("/static/fonts/Montserrat-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --bg: #000; --surface: #0b0b0b; --card: #111; --fg: #fff;
  --muted: rgba(255,255,255,.62); --faint: rgba(255,255,255,.14); --line: rgba(255,255,255,.12);
  --accent-bg: #f3f2ed; --accent-fg: #000; --red: #d06666; --red-text: #e58585;
  --nav: rgba(20,20,20,.92); --seg-off: rgba(255,255,255,.14); --press: rgba(255,255,255,.06);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: Montserrat, -apple-system, system-ui, sans-serif;
  --top: 0px; --bottom: 0px;
  /* статусы — одинаковые при любом акценте */
  --ok: #2fd9a0; --warn: #e9d49a; --bad: #ff7a85; --water: #f2a6c8;
  /* акцент (по умолчанию мята) */
  --acc: #2fd9a0; --acc-text: #4be3b0; --acc-fg: #04130d;
  --gc: #6ea4ff; --slot: #0f0f0f;
}
[data-accent="blue"]   { --acc: #8fc9ff; --acc-text: #a6d4ff; --acc-fg: #06121f; }
[data-accent="violet"] { --acc: #b9a6ff; --acc-text: #c8b8ff; --acc-fg: #130c26; }
[data-accent="orange"] { --acc: #a9c9a4; --acc-text: #bcd7b7; --acc-fg: #0b160a; }
[data-accent="red"]    { --acc: #e9a3b8; --acc-text: #f0b6c7; --acc-fg: #240a12; }
[data-accent="mono"]   { --acc: #f3f2ed; --acc-text: #ffffff; --acc-fg: #000; }
[data-theme="light"] {
  --bg: #f7f7f2; --surface: #edebe6; --card: #fff; --fg: #141414;
  --muted: rgba(20,20,20,.64); --faint: rgba(20,20,20,.12); --line: rgba(20,20,20,.12);
  --accent-bg: #141414; --accent-fg: #f7f7f2; --red: #c44848; --red-text: #b33c3c;
  --nav: rgba(255,255,255,.94); --seg-off: rgba(20,20,20,.12); --press: rgba(20,20,20,.05);
  --ok: #0e9a6b; --warn: #8c6d10; --bad: #c33b4c; --water: #c04a86;
  --gc: #2f6fe0; --slot: #ffffff;
}
[data-theme="light"]                        { --acc: #0e9a6b; --acc-text: #0b8a5f; --acc-fg: #fff; }
[data-theme="light"][data-accent="blue"]    { --acc: #2d7fc4; --acc-text: #246ba6; --acc-fg: #fff; }
[data-theme="light"][data-accent="violet"]  { --acc: #7b62d6; --acc-text: #6650bd; --acc-fg: #fff; }
[data-theme="light"][data-accent="orange"]  { --acc: #5f8a58; --acc-text: #4e7548; --acc-fg: #fff; }
[data-theme="light"][data-accent="red"]     { --acc: #b8577a; --acc-text: #a04568; --acc-fg: #fff; }
[data-theme="light"][data-accent="mono"]    { --acc: #141414; --acc-text: #141414; --acc-fg: #f7f7f2; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); }
body { min-height: 100vh; overscroll-behavior: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

#app { padding: calc(var(--top) + 12px) 20px calc(var(--bottom) + 120px); max-width: 560px; margin: 0 auto; }
.mono { font-family: var(--mono); }
.lab { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.cap { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hair { height: 1px; background: var(--line); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); display: inline-block; flex: none; }
.p2 { width: 6px; height: 6px; border-radius: 50%; background: var(--fg); display: inline-block; flex: none; }
.p3 { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--fg); display: inline-block; flex: none; }
.red, .bad { color: var(--bad); }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.hidden { display: none !important; }

/* шапка */
.top { padding-bottom: 18px; }
.status { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
.icon-btn { width: 36px; height: 36px; border-radius: 18px; border: 1px solid var(--line); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.icon-btn svg { width: 18px; height: 18px; }
.big { display: flex; align-items: flex-end; gap: 16px; padding-bottom: 20px; }
.big .num { font-family: var(--mono); font-size: 112px; line-height: .8; font-weight: 500; letter-spacing: -.05em;
  background: none; border: 0; padding: 0; }
.big .wd { display: flex; flex-direction: column; gap: 5px; padding-bottom: 2px; flex: 1; }
.big .wd b { font-size: 19px; font-weight: 600; }
.daynav { display: flex; gap: 6px; align-self: flex-start; }

/* блоки */
.card { border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; background: var(--surface); }
[data-theme="light"] .card { background: var(--card); border-color: transparent; }
.section { padding: 22px 0 8px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.mt { margin-top: 12px; }
.text { font-size: 14.5px; line-height: 1.5; }
.muted { color: var(--muted); }

.weather { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.weather .t { font-family: var(--mono); font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.weather svg { width: 116px; height: 88px; flex: none; color: var(--fg); }

.segs { display: grid; gap: 4px; }
.seg { height: 6px; border-radius: 2px; background: var(--seg-off); }
.seg.on { background: var(--fg); }
.seg.over, .seg.bad { background: var(--bad); }
.seg.ok { background: var(--ok); }
.seg.warn { background: var(--warn); }
.seg.acc { background: var(--acc); }

/* список дел */
.it { display: flex; align-items: center; gap: 14px; padding: 13px 0; width: 100%; background: none; border: 0;
  text-align: left; border-bottom: 1px solid var(--line); }
.it:active { background: var(--press); }
.tm { width: 48px; flex: none; display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: 15px; font-weight: 500; }
.tm small { font-size: 11px; font-weight: 400; color: var(--muted); }
.tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tx b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.it.done .tx b { text-decoration: line-through; color: var(--muted); }
.meta { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.chk { width: 30px; height: 30px; border-radius: 15px; border: 1px solid var(--muted); background: transparent; flex: none;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.chk.on { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.brk { display: flex; align-items: center; gap: 14px; padding: 8px 0; font-family: var(--mono); font-size: 11px; color: var(--muted);
  border-bottom: 1px dashed var(--line); }

/* кнопки */
.btn { height: 52px; border-radius: 16px; background: var(--accent-bg); color: var(--accent-fg); font-family: var(--mono);
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 0; width: 100%; padding: 0 16px; }
.btn:disabled { opacity: .5; }
.ghost { min-height: 44px; border-radius: 14px; background: transparent; border: 1px solid var(--line); font-family: var(--mono);
  font-size: 12.5px; padding: 0 14px; flex: 1; }
.ghost.danger { color: var(--red-text); }
.btns { display: flex; gap: 8px; }
.link { background: none; border: 0; padding: 6px 0; font-family: var(--mono); font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* формы */
.fl { padding: 18px 0 9px; display: flex; justify-content: space-between; align-items: baseline; }
.title-in { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); font-size: 26px; font-weight: 600;
  padding: 4px 0 12px; outline: none; }
.title-in::placeholder { color: var(--muted); }
.grid { display: grid; gap: 6px; }
.chip { min-height: 40px; border-radius: 11px; border: 1px solid var(--line); background: transparent; font-family: var(--mono); font-size: 13px; padding: 0 6px; }
.chip.on { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg); font-weight: 600; }
.day-chip { height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 18px; font-weight: 500; }
.day-chip span { font-size: 10px; font-weight: 400; opacity: .7; }
.pri { min-height: 60px; border-radius: 14px; border: 1px solid var(--line); background: transparent; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 6px; padding: 0 12px; font-size: 13px; font-weight: 600; }
.pri.on { border-color: var(--fg); }
.field { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: transparent; font-size: 15px; line-height: 1.45; }
textarea.field { min-height: 80px; resize: vertical; }
.field::placeholder { color: var(--muted); }
input[type="date"].field, input[type="time"].field { font-family: var(--mono); min-height: 46px; }
.switch { width: 48px; height: 28px; border-radius: 14px; background: var(--seg-off); border: 0; position: relative; flex: none; padding: 0; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 11px; background: var(--fg); transition: transform .15s; }
.switch.on { background: var(--accent-bg); }
.switch.on::after { transform: translateX(20px); background: var(--accent-fg); }

/* характеристики */
.spec { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 14px; border-bottom: 1px solid var(--line); gap: 12px; }
.spec > span:first-child { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* настроение */
.moods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mood { min-height: 58px; border-radius: 14px; border: 1px solid var(--line); background: transparent; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; font-family: var(--mono); font-size: 18px; font-weight: 500; }
.mood span { font-size: 9.5px; font-weight: 400; color: var(--muted); }
.mood.on { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg); }
.mood.on span { color: inherit; opacity: .7; }

/* неделя */
.stat { border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; display: flex; flex-direction: column; gap: 4px; }
.stat b { font-family: var(--mono); font-size: 22px; font-weight: 500; }
.wd-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; width: 100%; border: 0; border-bottom: 1px solid var(--line);
  background: none; text-align: left; }
.wd-row .n { width: 54px; flex: none; display: flex; flex-direction: column; gap: 3px; }
.wd-row .n b { font-family: var(--mono); font-size: 26px; font-weight: 500; line-height: 1; }
.wd-row .d { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.wd-row .d span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-row .l { width: 76px; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.track { width: 76px; height: 4px; border-radius: 2px; background: var(--seg-off); overflow: hidden; display: flex; }
.track i { display: block; height: 100%; background: var(--fg); }
.track i.over { background: var(--bad); }
.wd-row.off .n { opacity: .55; }

/* ассистент */
.chat { display: flex; flex-direction: column; gap: 14px; padding-bottom: 12px; }
.msg { max-width: 88%; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--surface); border: 1px solid var(--line); border-radius: 18px 18px 6px 18px; padding: 10px 14px; }
[data-theme="light"] .msg.user { background: var(--card); }
.msg.assistant { align-self: flex-start; }
.msg.assistant::before { content: "ассистент"; display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-bottom: 4px; }
.typing span { display: inline-block; width: 6px; height: 6px; border-radius: 3px; background: var(--muted); margin-right: 4px; animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2 } 40% { opacity: 1 } }
.composer { position: fixed; left: 0; right: 0; bottom: calc(var(--bottom) + 100px); padding: 8px 16px; background: var(--bg); }
.composer .in { max-width: 528px; margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; min-height: 46px; max-height: 140px; border-radius: 23px; padding: 12px 16px; resize: none; }
.send { width: 46px; height: 46px; border-radius: 23px; border: 0; background: var(--accent-bg); color: var(--accent-fg); flex: none;
  display: inline-flex; align-items: center; justify-content: center; }
.sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.sugg button { border: 1px solid var(--line); background: transparent; border-radius: 16px; padding: 8px 12px; font-size: 13px; text-align: left; }

/* нижняя навигация */
#nav { position: fixed; left: 16px; right: 16px; bottom: calc(var(--bottom) + 22px); height: 64px; border-radius: 32px; background: var(--nav);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-around; padding: 0 6px; max-width: 528px; margin: 0 auto;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 10; }
.ti { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10px; color: var(--muted);
  background: none; border: 0; width: 62px; padding: 6px 0; }
.ti svg { width: 21px; height: 21px; }
.ti.on { color: var(--fg); }
.plus { width: 52px; height: 52px; border-radius: 26px; background: var(--acc); color: var(--acc-fg); border: 0;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none;
  box-shadow: 0 6px 18px -6px var(--acc); }
.plus svg { width: 26px; height: 26px; stroke-width: 2.4; }
.plus:active { transform: scale(.94); }

/* шторка */
#sheet { position: fixed; inset: 0; z-index: 20; display: none; }
#sheet.open { display: block; }
#sheet .shade { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
#sheet .panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow: auto; background: var(--bg); border-top: 1px solid var(--line);
  border-radius: 24px 24px 0 0; padding: 20px 20px calc(var(--bottom) + 28px); max-width: 560px; margin: 0 auto; }
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bottom) + 100px); background: var(--accent-bg); color: var(--accent-fg);
  font-family: var(--mono); font-size: 12.5px; padding: 10px 16px; border-radius: 14px; z-index: 30; max-width: 90vw; display: none; text-align: center; }
#toast.show { display: block; }

/* план с перерывами */
.blk { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; align-items: baseline; }
.blk .mono { width: 96px; flex: none; font-size: 12px; color: var(--muted); }
.blk.task b { font-weight: 600; }
.blk.break, .blk.lunch { color: var(--muted); font-family: var(--mono); font-size: 12px; }

/* судоку */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tile { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); background: transparent; font-family: var(--mono); font-size: 15px;
  font-weight: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; }
.tile small { font-size: 9px; color: var(--muted); font-weight: 400; }
.tile.solved { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg); }
.tile.solved small { color: inherit; opacity: .65; }
.tile.next { border-color: var(--fg); }
.tile.next::after { content: ""; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 3px; background: var(--acc); }
.tile.started small { color: var(--red-text); }
.board { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); width: 100%; aspect-ratio: 1; border: 2px solid var(--fg);
  border-radius: 10px; overflow: hidden; user-select: none; }
.cell { position: relative; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg);
  font-family: var(--mono); font-size: clamp(18px, 5.6vw, 26px); font-weight: 400; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--fg); }
.cell.c2, .cell.c5 { border-right: 2px solid var(--fg); }
.cell.c8 { border-right: 0; }
.cell.r2, .cell.r5 { border-bottom: 2px solid var(--fg); }
.cell.r8 { border-bottom: 0; }
.cell.given { font-weight: 600; }
.cell.user { color: var(--muted); }
[data-theme="dark"] .cell.user { color: #9fc3ff; }
[data-theme="light"] .cell.user { color: #2a5bd7; }
.cell.peer { background: var(--press); }
.cell.same { background: var(--faint); }
.cell.sel { background: var(--accent-bg); color: var(--accent-fg) !important; }
.cell.err { color: var(--red-text) !important; }
.cell.hl { background: rgba(208,102,102,.22); }
.cell.target { box-shadow: inset 0 0 0 2px var(--red); }
.notes { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); font-size: clamp(8px, 2.2vw, 10.5px); color: var(--muted);
  line-height: 1; align-items: center; justify-items: center; }
.pad { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
.key { height: 58px; border-radius: 12px; border: 1px solid var(--line); background: transparent; font-family: var(--mono); font-size: 24px;
  font-weight: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; }
.key small { font-size: 9px; color: var(--muted); }
.key.gone { opacity: .25; }
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tool { min-height: 54px; border-radius: 14px; border: 1px solid var(--line); background: transparent; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; font-family: var(--mono); font-size: 10.5px; }
.tool svg { width: 20px; height: 20px; }
.tool.on { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg); }
.mini { display: grid; grid-template-columns: repeat(9, 1fr); width: 100%; max-width: 330px; aspect-ratio: 1; border: 2px solid var(--fg);
  border-radius: 8px; overflow: hidden; margin: 0 auto; }
.mini .cell { font-size: clamp(13px, 3.8vw, 17px); }
.steps { display: flex; gap: 6px; justify-content: center; }
.steps i { width: 6px; height: 6px; border-radius: 3px; background: var(--seg-off); }
.steps i.on { background: var(--fg); width: 18px; }
.win { text-align: center; padding: 10px 0 4px; }
.win .mono { font-size: 54px; font-weight: 500; letter-spacing: -.03em; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* здоровье */
.hrow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hrow .tx { flex: 1; }
.hbtn { flex: none; min-height: 34px; padding: 0 12px; font-size: 11.5px; }
.wpts { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 4px; }
.wpt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 10px; border: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.wpt b { font-size: 12px; font-weight: 500; color: var(--fg); }
.wpt.ok { border-color: var(--ok); color: var(--ok); }
.wpt.ok b { color: var(--ok); }
.wpt.late { border-color: var(--warn); color: var(--warn); }
.gymd { position: relative; height: 56px; }
.gymd.sug::after { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 3px; background: var(--acc); }
.htable { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.hh { display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr)); align-items: center; min-height: 38px; border-bottom: 1px solid var(--line); }
.hh:last-child { border-bottom: 0; }
.hh > span { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.hh > span:first-child { text-align: left; padding-left: 10px; }
.hh > span.today { color: var(--fg); font-weight: 600; }
.hc { font-size: 11px; color: var(--fg); }
.hc.on { font-size: 13px; }
.hc.off { color: var(--seg-off); font-size: 16px; }
.hc.red, .hc.bad { color: var(--bad); }
.hc.ok { color: var(--ok); }
.hc.warn { color: var(--warn); }

/* разделы на экране «сегодня» */
.tiles2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile2 { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 14px; text-align: left;
  display: flex; flex-direction: column; gap: 6px; min-height: 104px; }
[data-theme="light"] .tile2 { background: var(--card); border-color: transparent; }
.tile2 svg { width: 22px; height: 22px; color: var(--acc-text); }
.tile2 b { font-size: 15px; font-weight: 600; margin-top: auto; }
.tile2 span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.tile2:active { transform: scale(.98); }

/* меню настроек */
.setrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 0; background: none; border: 0;
  border-bottom: 1px solid var(--line); text-align: left; }
.setrow > svg { width: 20px; height: 20px; flex: none; }
.setrow > svg:first-of-type { color: var(--acc-text); }
.setrow > svg:last-child { color: var(--muted); width: 16px; height: 16px; }
.setrow .tx b { font-size: 16px; }
.spec small { font-size: 10.5px; }
.swc { display: flex; align-items: center; justify-content: center; gap: 8px; }
.sw { width: 12px; height: 12px; border-radius: 6px; display: inline-block; flex: none; }
.sw[data-a="green"] { background: #2fd9a0; } .sw[data-a="blue"] { background: #8fc9ff; } .sw[data-a="violet"] { background: #b9a6ff; }
.sw[data-a="orange"] { background: #a9c9a4; } .sw[data-a="red"] { background: #e9a3b8; } .sw[data-a="mono"] { background: var(--fg); }

/* расписание — плашки с цветной полосой, чтобы не сливалось */
.it.slot { background: var(--slot); border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 14px;
  padding: 12px 12px 12px 12px; margin: 6px 0; }
[data-theme="light"] .it.slot { border-color: transparent; border-left-color: var(--acc); box-shadow: 0 1px 0 rgba(20,20,20,.04); }
.it.slot.gc { border-left-color: var(--gc); }
[data-theme="light"] .it.slot.gc { border-left-color: var(--gc); }
.it.slot.now { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.it.slot.done { opacity: .55; }
.nowtag { align-self: flex-start; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--acc); color: var(--acc-fg); border-radius: 6px; padding: 2px 6px; }
.gcdot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--gc); vertical-align: middle; }
.steps-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
[data-accent="blue"] { --gc: #b9a6ff; }
[data-theme="light"][data-accent="blue"] { --gc: #7a55e0; }

/* ===== подсветка фона: мягкие цветные пятна, без стекла ===== */
[data-glow] body { background:
  radial-gradient(60vmax 50vmax at 110% -10%, color-mix(in srgb, var(--acc) 24%, transparent), transparent 70%),
  radial-gradient(55vmax 45vmax at -20% 45%, color-mix(in srgb, var(--water) 16%, transparent), transparent 70%),
  radial-gradient(50vmax 40vmax at 90% 110%, color-mix(in srgb, var(--gc) 14%, transparent), transparent 70%),
  var(--bg); background-attachment: fixed; }
[data-glow] .card, [data-glow] .it.slot, [data-glow] .tile2 { background: color-mix(in srgb, var(--surface) 82%, transparent); }
[data-glow][data-theme="light"] .card, [data-glow][data-theme="light"] .it.slot, [data-glow][data-theme="light"] .tile2 { background: rgba(255,255,255,.8); }

.water { color: var(--water); }
.seg.water { background: var(--water); }
.wpt.ok { border-color: var(--water); color: var(--water); }
.wpt.ok b { color: var(--water); }
.wpt.late { border-style: dashed; border-color: var(--muted); color: var(--muted); }

/* ===== цветовые темы (скины) в тонах мудборда ===== */
html[data-skin="milkshake"][data-theme="light"] { --bg:#F7E4E7; --surface:#F1D6DB; --card:#FFF5F6; --slot:#FFF5F6; --fg:#4A2F36;
  --muted:rgba(74,47,54,0.62); --faint:rgba(74,47,54,0.13); --line:rgba(74,47,54,0.12); --seg-off:rgba(74,47,54,0.11); --press:rgba(74,47,54,0.05);
  --accent-bg:#4A2F36; --accent-fg:#F7E4E7; --nav:rgba(255,245,246,0.93);
  --acc:#E994AE; --acc-text:#B85C7A; --acc-fg:#FFFFFF; --ok:#B85C7A; --warn:#B8907A; --bad:#B0303F; --water:#EE8FB0; --gc:#A79BD0; --red:#B0303F; --red-text:#B0303F; }
html[data-skin="milkshake"][data-theme="dark"] { --bg:#24161B; --surface:#301E25; --card:#38242C; --slot:#38242C; --fg:#FBE9EE;
  --muted:rgba(251,233,238,0.62); --faint:rgba(251,233,238,0.13); --line:rgba(251,233,238,0.12); --seg-off:rgba(251,233,238,0.11); --press:rgba(251,233,238,0.05);
  --accent-bg:#FBE9EE; --accent-fg:#24161B; --nav:rgba(48,30,37,0.93);
  --acc:#F2A7BF; --acc-text:#F7BDD0; --acc-fg:#2A161D; --ok:#F7BDD0; --warn:#E2C2A8; --bad:#FF7F8F; --water:#F7A3C3; --gc:#BDB2EC; --red:#FF7F8F; --red-text:#FF7F8F; }
html[data-skin="mauve"][data-theme="light"] { --bg:#E7DBD5; --surface:#DCCDC6; --card:#F4EEEB; --slot:#F4EEEB; --fg:#2E2624;
  --muted:rgba(46,38,36,0.62); --faint:rgba(46,38,36,0.13); --line:rgba(46,38,36,0.12); --seg-off:rgba(46,38,36,0.11); --press:rgba(46,38,36,0.05);
  --accent-bg:#2E2624; --accent-fg:#E7DBD5; --nav:rgba(244,238,235,0.93);
  --acc:#B98C8B; --acc-text:#8A5E5F; --acc-fg:#FFFFFF; --ok:#8A5E5F; --warn:#9A846C; --bad:#A3303A; --water:#C98C9B; --gc:#8E8AA6; --red:#A3303A; --red-text:#A3303A; }
html[data-skin="mauve"][data-theme="dark"] { --bg:#1C1918; --surface:#252120; --card:#2B2625; --slot:#2B2625; --fg:#EDE3DD;
  --muted:rgba(237,227,221,0.62); --faint:rgba(237,227,221,0.13); --line:rgba(237,227,221,0.12); --seg-off:rgba(237,227,221,0.11); --press:rgba(237,227,221,0.05);
  --accent-bg:#EDE3DD; --accent-fg:#1C1918; --nav:rgba(37,33,32,0.93);
  --acc:#DCB9AE; --acc-text:#E6C8BF; --acc-fg:#2B2321; --ok:#E0BFB6; --warn:#C5B9B1; --bad:#F0868E; --water:#E9B4BE; --gc:#B0ACC8; --red:#F0868E; --red-text:#F0868E; }
html[data-skin="paper"][data-theme="light"] { --bg:#F7F1E6; --surface:#EDE4D5; --card:#FFFCF6; --slot:#FFFCF6; --fg:#3A302B;
  --muted:rgba(58,48,43,0.62); --faint:rgba(58,48,43,0.13); --line:rgba(58,48,43,0.12); --seg-off:rgba(58,48,43,0.11); --press:rgba(58,48,43,0.05);
  --accent-bg:#3A302B; --accent-fg:#F7F1E6; --nav:rgba(255,252,246,0.93);
  --acc:#C9928F; --acc-text:#986462; --acc-fg:#FFFFFF; --ok:#8C6E5E; --warn:#A8946E; --bad:#A83D3D; --water:#D69AA6; --gc:#8E9AAE; --red:#A83D3D; --red-text:#A83D3D; }
html[data-skin="paper"][data-theme="dark"] { --bg:#1B1816; --surface:#24201D; --card:#2A2522; --slot:#2A2522; --fg:#F3ECE2;
  --muted:rgba(243,236,226,0.62); --faint:rgba(243,236,226,0.13); --line:rgba(243,236,226,0.12); --seg-off:rgba(243,236,226,0.11); --press:rgba(243,236,226,0.05);
  --accent-bg:#F3ECE2; --accent-fg:#1B1816; --nav:rgba(36,32,29,0.93);
  --acc:#D8B0AA; --acc-text:#E5C3BD; --acc-fg:#2A2522; --ok:#D6BBA6; --warn:#CDB991; --bad:#F08A86; --water:#E8B0BA; --gc:#AEB8CC; --red:#F08A86; --red-text:#F08A86; }
html[data-skin="fig"][data-theme="light"] { --bg:#F1E6E4; --surface:#E6D5D3; --card:#FBF5F4; --slot:#FBF5F4; --fg:#2A1418;
  --muted:rgba(42,20,24,0.62); --faint:rgba(42,20,24,0.13); --line:rgba(42,20,24,0.12); --seg-off:rgba(42,20,24,0.11); --press:rgba(42,20,24,0.05);
  --accent-bg:#2A1418; --accent-fg:#F1E6E4; --nav:rgba(251,245,244,0.93);
  --acc:#7E2B3E; --acc-text:#6E2234; --acc-fg:#FBF5F4; --ok:#7E2B3E; --warn:#8A7C70; --bad:#C0392B; --water:#B9667F; --gc:#6F6C8E; --red:#C0392B; --red-text:#C0392B; }
html[data-skin="fig"][data-theme="dark"] { --bg:#140B0E; --surface:#1F1216; --card:#28171C; --slot:#28171C; --fg:#F5E4E6;
  --muted:rgba(245,228,230,0.62); --faint:rgba(245,228,230,0.13); --line:rgba(245,228,230,0.12); --seg-off:rgba(245,228,230,0.11); --press:rgba(245,228,230,0.05);
  --accent-bg:#F5E4E6; --accent-fg:#140B0E; --nav:rgba(31,18,22,0.93);
  --acc:#B04A62; --acc-text:#E08AA0; --acc-fg:#FFF3F4; --ok:#E08AA0; --warn:#C9AE9A; --bad:#FF6B6B; --water:#E68BA8; --gc:#A3A0C8; --red:#FF6B6B; --red-text:#FF6B6B; }
html[data-skin="aquarelle"][data-theme="light"] { --bg:#E9EAF4; --surface:#DDDFEE; --card:#F9F9FD; --slot:#F9F9FD; --fg:#2A2A3D;
  --muted:rgba(42,42,61,0.62); --faint:rgba(42,42,61,0.13); --line:rgba(42,42,61,0.12); --seg-off:rgba(42,42,61,0.11); --press:rgba(42,42,61,0.05);
  --accent-bg:#2A2A3D; --accent-fg:#E9EAF4; --nav:rgba(249,249,253,0.93);
  --acc:#D287A8; --acc-text:#A9577D; --acc-fg:#FFFFFF; --ok:#6F7CC0; --warn:#A99383; --bad:#B03A5B; --water:#E08FB2; --gc:#6F8FD6; --red:#B03A5B; --red-text:#B03A5B; }
html[data-skin="aquarelle"][data-theme="dark"] { --bg:#13141F; --surface:#1C1E2C; --card:#232536; --slot:#232536; --fg:#ECEBF7;
  --muted:rgba(236,235,247,0.62); --faint:rgba(236,235,247,0.13); --line:rgba(236,235,247,0.12); --seg-off:rgba(236,235,247,0.11); --press:rgba(236,235,247,0.05);
  --accent-bg:#ECEBF7; --accent-fg:#13141F; --nav:rgba(28,30,44,0.93);
  --acc:#E6A2C1; --acc-text:#F0B7D0; --acc-fg:#22161E; --ok:#A9B2E8; --warn:#D2BBAA; --bad:#F27A98; --water:#F2A8C8; --gc:#9FB4EE; --red:#F27A98; --red-text:#F27A98; }
html[data-skin]:not([data-skin="classic"])[data-theme="light"] .card, html[data-skin]:not([data-skin="classic"])[data-theme="light"] .tile2 { border-color: transparent; }
.skin-card { border:1px solid var(--line); border-radius:14px; padding:10px; background:transparent; display:flex; flex-direction:column; gap:8px; text-align:left; font-family:var(--mono); font-size:12px; }
.skin-card.on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.skin-card .sw4 { display:flex; height:22px; border-radius:8px; overflow:hidden; } .skin-card .sw4 i { flex:1; }

/* ===== фирменная тема: день — милкшейк, ночь — инжир, перетекающий в милкшейк ===== */
html[data-skin="signature"][data-theme="light"] { --bg:#F5DFE3; --surface:#EED0D6; --card:#FFF6F7; --slot:#FFF6F7; --fg:#47283A;
  --muted:rgba(71,40,58,0.64); --faint:rgba(71,40,58,0.13); --line:rgba(71,40,58,0.12); --seg-off:rgba(71,40,58,0.12); --press:rgba(71,40,58,0.05);
  --accent-bg:#47283A; --accent-fg:#F5DFE3; --nav:rgba(255,246,247,0.93);
  --acc:#E58AA6; --acc-text:#B4507A; --acc-fg:#FFFFFF; --ok:#B4507A; --warn:#B8907A; --bad:#B0303F; --water:#EC86AA; --gc:#A08FD0; --red:#B0303F; --red-text:#B0303F; }
html[data-skin="signature"][data-theme="dark"] { --bg:#1A0F14; --surface:#2A1820; --card:#33202A; --slot:#33202A; --fg:#FBE8EE;
  --muted:rgba(251,232,238,0.64); --faint:rgba(251,232,238,0.13); --line:rgba(251,232,238,0.12); --seg-off:rgba(251,232,238,0.12); --press:rgba(251,232,238,0.05);
  --accent-bg:#FBE8EE; --accent-fg:#1A0F14; --nav:rgba(42,24,32,0.93);
  --acc:#F2A2BC; --acc-text:#F7BCD0; --acc-fg:#2A141C; --ok:#F7BCD0; --warn:#E2C2A8; --bad:#FF8094; --water:#F79EC0; --gc:#BDB2EC; --red:#FF8094; --red-text:#FF8094; }
html[data-skin="signature"][data-theme="light"] body { background:
  radial-gradient(70vmax 55vmax at 105% -10%, rgba(233,138,166,.30), transparent 70%),
  radial-gradient(60vmax 50vmax at -15% 55%, rgba(160,143,208,.14), transparent 70%),
  linear-gradient(180deg, #F7E6E9 0%, #F3D8DE 60%, #EFCDD5 100%); background-attachment: fixed; }
html[data-skin="signature"][data-theme="dark"] body { background:
  radial-gradient(80vmax 60vmax at 100% -15%, rgba(242,162,188,.30), transparent 65%),
  radial-gradient(60vmax 50vmax at -20% 40%, rgba(176,74,98,.22), transparent 70%),
  linear-gradient(180deg, #4A2735 0%, #2C1720 38%, #1A0F14 70%, #120A0E 100%); background-attachment: fixed; }
html[data-skin="signature"][data-theme="dark"] .card, html[data-skin="signature"][data-theme="dark"] .it.slot, html[data-skin="signature"][data-theme="dark"] .tile2 {
  background: rgba(58,34,46,.55); border-color: rgba(251,232,238,.10); }
html[data-skin="signature"][data-theme="light"] .card, html[data-skin="signature"][data-theme="light"] .it.slot, html[data-skin="signature"][data-theme="light"] .tile2 {
  background: rgba(255,246,247,.82); border-color: transparent; }

/* обязательное (пары) */
.seg.must { background: var(--fg); opacity: .75; }
.mustkey { display: inline-block; width: 10px; height: 6px; border-radius: 2px; background: var(--fg); opacity: .75; margin-right: 6px; vertical-align: 1px; }
.it.slot.must { border-left-width: 4px; }