/* ======================================================================
   РЕЖИМЫ «СЕМЬЯ» / «РАБОТА» + новые семейные разделы.
   Работа — тот же жидкий стеклянный слой, но графит и петроль вместо сине-фиолетового:
   деловой, спокойный. Контраст акцентов на стекле ≥ 5.04:1 в обеих темах (contrast.py).
   ====================================================================== */

/* ---------- деловая тема ---------- */
:root[data-mode="work"] {
  --bg: #EEF2F5;
  --blob1: #9DB9D0; --blob2: #8CCBC4; --blob3: #C5CFDC; --blob4: #A9C7DA;
  --brand: #0B5E6E; --brand-soft: #DCEEF0; --focus: #0B5E6E;
  --grad: linear-gradient(135deg, #0F3B55 0%, #0E7470 100%);
  --tint: rgba(11, 94, 110, .12);
}
:root[data-mode="work"][data-daypart] { /* деловой фон не меняется по времени суток */
  --bg: #EEF2F5; --blob1: #9DB9D0; --blob2: #8CCBC4; --blob3: #C5CFDC; --blob4: #A9C7DA;
}
:root[data-mode="work"][data-theme="dark"], :root[data-mode="work"][data-theme="dark"][data-daypart] {
  --bg: #04090C;
  --blob1: #0F2A3D; --blob2: #0B3B3E; --blob3: #172231; --blob4: #0A3346;
  --brand: #5CC6D3; --brand-ink: #00161A; --brand-soft: #0E2F35; --focus: #5CC6D3;
  --grad: linear-gradient(135deg, #12506B 0%, #0E7C77 100%);
  --tint: rgba(92, 198, 211, .18);
}
:root[data-mode="work"] .btn.primary { box-shadow: 0 8px 20px rgba(11, 94, 110, .28), inset 0 1px 0 rgba(255, 255, 255, .3); }
:root[data-mode="work"] .btn.brand { box-shadow: 0 8px 22px rgba(14, 116, 112, .32), inset 0 1px 0 rgba(255, 255, 255, .3); }
:root[data-mode="work"] .day[aria-pressed="true"], :root[data-mode="work"] .chip[aria-pressed="true"] { box-shadow: 0 6px 16px rgba(11, 94, 110, .3); }
:root[data-mode="work"][data-theme="dark"] .tab[aria-current="page"] { color: #8FDDE7; }
:root[data-mode="work"] .tabbar .lens { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 14px rgba(11, 94, 110, .2); }
:root[data-mode="work"] .orbit-center img, :root[data-mode="work"] .setup-logo { box-shadow: 0 14px 36px rgba(14, 116, 112, .38); }
/* вечернее свечение логотипа в работе — холодное */
:root[data-mode="work"][data-daypart="evening"] .brandline img,
:root[data-mode="work"][data-daypart="night"] .brandline img { animation: workGlow 5s ease-in-out infinite alternate; }
@keyframes workGlow { from { filter: drop-shadow(0 0 3px rgba(92, 198, 211, .45)); } to { filter: drop-shadow(0 0 9px rgba(92, 198, 211, .85)); } }

/* смена режима: мягкая перекраска */
html.mode-anim body, html.mode-anim body::before, html.mode-anim .app > * {
  transition: background-color .6s var(--ease), color .4s var(--ease), filter .6s var(--ease);
}
html.mode-anim .app > section { animation: modeIn .5s var(--ease) both; }
@keyframes modeIn { from { opacity: 0; transform: translateY(8px) scale(.99); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- переключатель режима сверху ---------- */
.modebar { display: flex; justify-content: center; margin: 0 0 var(--s3); }
.mode-switch {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; width: min(280px, 100%);
  background: var(--glass-panel); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-edge);
}
html:not(.lite) .mode-switch { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.mode-switch button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; border: 0; background: none; border-radius: 999px; color: var(--ink-2); font: 600 var(--fs-sm) var(--font); cursor: pointer;
  transition: color .3s var(--ease);
}
.mode-switch button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mode-switch button[aria-selected="true"] { color: #fff; }
:root[data-theme="dark"] .mode-switch button[aria-selected="true"] { color: var(--brand-ink); }
.mode-switch button:hover:not([aria-selected="true"]) { color: var(--ink); }
.mode-switch button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mode-switch button:active { transform: scale(.97); }
.mode-lens { display: none; }
/* активная кнопка сама несёт фон: читается любым инструментом проверки контраста; «переезд» — анимацией */
.mode-switch button[aria-selected="true"] {
  background: var(--brand); box-shadow: 0 6px 16px rgba(52, 40, 140, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
}
:root[data-mode="work"] .mode-switch button[aria-selected="true"] { box-shadow: 0 6px 16px rgba(11, 94, 110, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
html.mode-anim .mode-switch button[data-v="work"][aria-selected="true"] { animation: lensFromLeft .5s var(--spring); }
html.mode-anim .mode-switch button[data-v="family"][aria-selected="true"] { animation: lensFromRight .5s var(--spring); }
@keyframes lensFromLeft { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes lensFromRight { from { transform: translateX(100%); } to { transform: none; } }

/* пока грузится новый режим: старое содержимое приглушено и не нажимается */
#app.switching > :not(.modebar) { opacity: .45; pointer-events: none; transition: opacity .15s var(--ease); }

/* ---------- экран подключения «Работы» ---------- */
.setup-logo { display: block; margin-bottom: var(--s4); border-radius: 18px; }
.feat-list { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.feat-list > div { display: flex; gap: var(--s3); align-items: flex-start; }
.feat-list svg { width: 22px; height: 22px; flex: none; margin-top: 2px; fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feat-list span { display: flex; flex-direction: column; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.4; }
.feat-list b { color: var(--ink); font-size: var(--fs-md); }

/* ---------- задачи ---------- */
.pill-urgent { background: var(--danger-soft); color: var(--danger); font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.details.returned { color: var(--danger); background: var(--danger-soft); border-radius: 10px; padding: 6px 10px; margin-top: 6px; }
.seg button .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px;
  background: var(--tint); color: var(--brand); font: 700 12px var(--font); }
.review-card .ico { background: var(--brand-soft); color: var(--brand); }
.btn.ok { background: var(--task); color: #fff; }
.btn.ok:hover { filter: brightness(1.08); }
:root[data-theme="dark"] .btn.ok { color: #04200D; }

/* ---------- команда ---------- */
.kpis { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }
.kpi { width: 100%; text-align: left; border: 0; color: inherit; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: var(--s2); }
.kpi:disabled { cursor: default; }
.kpi:not(:disabled):hover { transform: translateY(-1px); }
.kpi:not(:disabled):active { transform: scale(.99); }
.kpi:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.kpi-head { display: flex; align-items: center; gap: var(--s3); }
.kpi-head .who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: var(--fs-xs); color: var(--ink-2); }
.kpi-row b { display: block; font: 800 var(--fs-lg) var(--font-display); color: var(--ink); letter-spacing: -.02em; }
.kpi-row .warn b { color: var(--danger); }
.pos-btn { align-self: flex-start; margin: -2px 0 var(--s2) 4px; }

/* ---------- документы ---------- */
.doc-total .total { margin-top: 6px; }
.bdoc .body { display: flex; flex-direction: column; gap: 2px; }
.dl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dl span { font: 600 var(--fs-xs) var(--font); border-radius: 999px; padding: 2px 9px; }
.dl-ok { background: var(--task-soft); color: var(--task); }
.dl-err { background: var(--danger-soft); color: var(--danger); }
.smtp { margin: var(--s2) 0; }
.smtp summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; padding: 8px 0; }
.field label svg, .smtp summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -3px; margin-right: 4px; }
.btn svg { flex: none; }

/* ---------- семья: накладки, погода ---------- */
.conflict { margin-top: var(--s3); border-left: 4px solid var(--care); }
.cf-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.cf-head .ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--care-soft); color: var(--care); }
.cf-head svg, .wx-ico svg, .asset .ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cf-row { display: grid; grid-template-columns: 48px 1fr; gap: var(--s2); padding: 4px 0; font-size: var(--fs-sm); }
.cf-drivers { margin: 2px 0 var(--s2) 56px; }
.weather { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s3); padding: var(--s3) var(--s4); }
.weather .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wx-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--event-soft); color: var(--event); }
.wx-ico svg { width: 22px; height: 22px; }

/* ---------- семья: питомцы и машины, родные ---------- */
.asset, .rel, .kid-card { padding: var(--s3) var(--s4); }
.asset-head { display: flex; align-items: center; gap: var(--s3); }
.asset-head .body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.asset .ico, .rel .ico, .kid-card .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: var(--brand-soft); color: var(--brand); }
.asset .ico.pet { background: var(--care-soft); color: var(--care); }
.asset .ico.car { background: var(--event-soft); color: var(--event); }
.rel .ico svg, .kid-card .ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.asset-items { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s2); padding: var(--s2) var(--s3); border-radius: 12px; background: var(--surface-2); }
.asset-items > div { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-sm); }
.chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -2px; margin-right: 4px; }
.rel-text { white-space: pre-line; margin-top: var(--s2); background: var(--surface-2); border-radius: 12px; padding: var(--s2) var(--s3); }

/* ---------- меню на неделю ---------- */
.menu-days { display: flex; flex-direction: column; gap: var(--s2); }
.menu-day { display: grid; gap: 4px; padding: var(--s3) var(--s4); }
.menu-day > b { font: 800 var(--fs-md) var(--font-display); }
.menu-day > div { display: grid; grid-template-columns: 76px 1fr; gap: var(--s2); font-size: var(--fs-sm); }

/* ---------- семья: дети у кого ---------- */
.cust-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: var(--s3); }
.cust-strip > div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0; border-radius: 12px; background: var(--surface-2); font-size: var(--fs-xs); }
.cust-strip > div.today { background: var(--brand); color: #fff; }
.cust-strip > div.today .muted { color: rgba(255, 255, 255, .85); }
:root[data-theme="dark"] .cust-strip > div.today { color: var(--brand-ink); }
:root[data-theme="dark"] .cust-strip > div.today .muted { color: var(--brand-ink); }
.cust-strip b { font-size: var(--fs-md); }
.who-at { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; font-weight: 600; }
.cust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.cust-day { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; }
.cust-day span { width: 24px; flex: none; }
.cust-day .input { min-height: 40px; padding: 0 10px; }
.debt { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.debt + .debt { margin-top: var(--s3); }

@media (prefers-reduced-motion: reduce) {
  .mode-switch button { animation: none !important; }
  html.mode-anim .app > section { animation: none; }
}

/* поверх полноэкранных окон (обучение, сторис, голос, шторка) капсула и микрофон не показываются */
body:has(.intro, .stories, .voice, .sheet, .lightbox) :is(.island, .mic-fab) { display: none !important; }
:root[data-mode="work"] .mic-fab { background: linear-gradient(135deg, #0F3B55, #0E7470); box-shadow: 0 10px 26px rgba(14, 116, 112, .4), inset 0 1px 0 rgba(255, 255, 255, .3); }

/* ---------- чек-листы ---------- */
.chk { padding: var(--s3) var(--s4); }
.chk .ico svg, .appr .ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chk-runs { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.chk-run { padding: var(--s2) var(--s3); border-radius: 12px; background: var(--surface-2); }
.chk-run-head { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-sm); margin-bottom: 6px; }
.chk-run-head .ok { color: var(--task); font-weight: 600; }
.chk-photos { display: flex; gap: 6px; margin-top: var(--s2); flex-wrap: wrap; }
.chk-ph { width: 56px; height: 56px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--surface); }
.chk-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chk-ph:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.chk-steps { margin-top: var(--s2); font-size: var(--fs-sm); }
.chk-steps summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
.chk-steps ol { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.pill-photo, .pill-ok { font: 600 var(--fs-xs) var(--font); border-radius: 999px; padding: 1px 8px; }
.pill-photo { background: var(--event-soft); color: var(--event); }
.pill-ok { background: var(--task-soft); color: var(--task); }
.ck-steps { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ck-step { display: flex; gap: 6px; align-items: center; }
.ck-step .input { flex: 1; min-width: 0; }
.ck-photo { flex: none; min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; }
.ck-photo svg { width: 18px; height: 18px; margin: 0; }
.bar.ok > i { background: var(--task); }

/* ---------- оплаты и согласования ---------- */
.pay-row .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.h2.danger-h { color: var(--danger); }
.appr { padding: var(--s3) var(--s4); }
.appr .ico { background: var(--money-soft); color: var(--money); }
.appr-sum { font: 800 var(--fs-md) var(--font-display); white-space: nowrap; }

/* ---------- отчёты и планёрки ---------- */
.rep-set { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.rep-set .toggle { flex: 1 1 200px; }
.rep-set .input { width: 110px; min-height: 40px; }
.rep { padding: var(--s3) var(--s4); }
.meet { padding: var(--s3) var(--s4); }
.meet summary { cursor: pointer; display: flex; flex-direction: column; gap: 2px; list-style: none; }
.meet summary::-webkit-details-marker { display: none; }
.meet[open] summary { margin-bottom: var(--s2); }
.meet .label { margin: var(--s2) 0 4px; }
.meet ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); }
.done-li { color: var(--ink-3); text-decoration: line-through; }

/* ---------- база знаний ---------- */
.ask .addbar { display: flex; }
.kb-answer { margin-top: var(--s3); padding: var(--s3); border-radius: 12px; background: var(--brand-soft); white-space: pre-line; }
.kb-answer.miss { background: var(--care-soft); }
.kbq { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); }
.kb-art { padding: var(--s3) var(--s4); }
.kb-art summary { cursor: pointer; display: flex; flex-direction: column; gap: 2px; list-style: none; }
.kb-art summary::-webkit-details-marker { display: none; }
.kb-body { white-space: pre-line; margin-top: var(--s2); font-size: var(--fs-sm); line-height: 1.5; }
textarea.input { min-height: 64px; padding-top: 10px; resize: vertical; font: inherit; }

/* ---------- деньги ---------- */
.cash-head { display: flex; justify-content: space-between; gap: var(--s3); align-items: flex-end; }
.total.sm { font-size: var(--fs-lg); }
.total.neg { color: var(--danger); }
.cash-chart { width: 100%; height: auto; display: block; margin-top: var(--s3); overflow: visible; }
.cash-line { fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.cash-area { fill: var(--tint); }
.cash-zero { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.cash-reserve { stroke: var(--care); stroke-width: 1; stroke-dasharray: 5 3; }
.cash-neg { fill: var(--danger); }
.cash-axis { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.cash-sums { display: flex; justify-content: space-between; gap: var(--s2); margin-top: var(--s3); font-size: var(--fs-sm); color: var(--ink-2); }
.cash-sums b { color: var(--ink); }
.cash-gap { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s3); border-left: 4px solid var(--danger); background: var(--danger-soft); }
.cash-gap .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--danger); color: #fff; }
.cash-gap .ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.cash-gap .body { display: flex; flex-direction: column; gap: 4px; color: var(--danger); }
.cash-gap .body span { color: var(--ink); font-size: var(--fs-sm); }
.cash-ok, .cash-warn { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--s3); }
.cash-ok { border-left: 4px solid var(--task); }
.cash-warn { border-left: 4px solid var(--care); }
.cash-ev b { white-space: nowrap; }
.cash-ev.in b { color: var(--task); }

/* ---------- отпуск, чаты, передача дел ---------- */
.vac { padding: var(--s3) var(--s4); margin: var(--s3) 0; }
.vac summary { cursor: pointer; display: flex; gap: var(--s3); align-items: center; list-style: none; }
.vac summary::-webkit-details-marker { display: none; }
.vac.on { display: flex; gap: var(--s3); align-items: flex-start; border-left: 4px solid var(--brand); }
.vac .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--brand); }
.vac .ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.vac .body { display: flex; flex-direction: column; gap: 2px; }
.howto { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.pos-btn { display: flex; gap: var(--s2); flex-wrap: wrap; }
.offb { border-left: 4px solid var(--danger); margin-bottom: var(--s3); }

/* ---------- ИИ-помощники ---------- */
.agents { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.agent { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border-radius: var(--r-md);
  background: var(--glass, var(--surface)); border: 1px solid var(--glass-border, var(--line)); box-shadow: var(--glass-shadow, var(--shadow)); }
.agent .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.agent .body b { font-size: var(--fs-md); }
.agent .body .muted { font-size: var(--fs-sm); line-height: 1.45; }
.agent .body .btn { margin-top: var(--s2); }
.ag-ico { width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center; color: #fff; background: var(--grad); }
.agent:not(.on) .ag-ico { background: var(--surface-2); color: var(--ink-2); }
.ag-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ag-soon { font: 600 var(--fs-xs) var(--font); color: var(--ink-2); background: var(--surface-2); padding: 4px 10px; border-radius: 999px; margin-top: var(--s2); }
.ag-head { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s3); }
.ag-head b { display: block; font-size: var(--fs-lg); }
.ag-head .muted { font-size: var(--fs-sm); }
.ag-log { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }
.ag-log .msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: var(--fs-md); line-height: 1.5; white-space: pre-wrap; }
.ag-log .msg.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 6px; }
.ag-log .msg.ai { align-self: flex-start; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.ag-log .msg.typing { color: var(--ink-2); font-style: italic; }
.ag-ex { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ag-ex .chip { text-align: left; min-height: 36px; height: auto; padding: 8px 14px; line-height: 1.35; }
.ag-form { margin-top: var(--s4); }
.ag-form textarea { resize: vertical; min-height: 84px; margin-bottom: var(--s3); }
:root[data-theme="dark"] .ag-log .msg.me { color: var(--brand-ink, #fff); }