/* ═══════════════════════════════════════════════════════════════════
   DISTIL · UI KIT · v2.0 — компоненты для приложения и лендинга
   Требует tokens.css. Префикс .ui- чтобы не конфликтовать с лендингом.
   Темы: html[data-theme="dark"|"light"|"auto"] — компоненты не знают о теме.
   Состояния: :hover :active :disabled :focus-visible .is-loading .is-invalid
              [aria-pressed] [aria-selected] [aria-current] .is-active
   ═══════════════════════════════════════════════════════════════════ */

/* ── База ─────────────────────────────────────────────────────────── */
.ui{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body);color:var(--fg);-webkit-font-smoothing:antialiased}
.ui :where(button,input,select,textarea){font:inherit;color:inherit}
[hidden]{display:none!important}
.ui :where(button){cursor:pointer;background:none;border:0;padding:0}
.ui :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:var(--focus-outline);outline-offset:3px;box-shadow:var(--focus-ring)}

/* ── Типографика ──────────────────────────────────────────────────── */
.t-display{font:400 var(--text-display)/var(--leading-display) var(--font-display);letter-spacing:var(--tracking-display);text-wrap:balance}
.t-h1{font:400 var(--text-2xl)/var(--leading-display) var(--font-display);letter-spacing:var(--tracking-display);text-wrap:balance}
.t-h2{font:400 var(--text-xl)/var(--leading-tight) var(--font-display);letter-spacing:var(--tracking-heading)}
.t-h3{font:500 var(--text-lg)/var(--leading-snug) var(--font-body);letter-spacing:var(--tracking-heading)}
.t-lead{font-size:var(--text-md);line-height:1.55;color:var(--muted)}
.t-body{font-size:var(--text-base);line-height:var(--leading-body)}
.t-small{font-size:var(--text-sm);line-height:1.5}
.t-caption{font:var(--text-xs)/1.5 var(--font-mono);color:var(--faint)}
.t-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.t-muted{color:var(--muted)}.t-accent{color:var(--accent)}.t-signal{color:var(--signal)}
.t-em{font-style:italic;color:var(--muted)}                       /* «вторая мысль» в заголовке */
.ui-eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 var(--text-xs)/1 var(--font-mono);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent)}
.ui-eyebrow::before{content:"";width:24px;height:1px;background:currentColor}
.ui-kbd{display:inline-block;padding:2px 7px;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:var(--radius-xs);background:var(--surface-2);font:500 var(--text-xs)/1.4 var(--font-mono);color:var(--fg-2)}

/* ── Кнопки ───────────────────────────────────────────────────────── */
.ui-btn{--h:var(--control-h);min-height:var(--h);display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 22px;border:1px solid var(--border);border-radius:var(--radius-pill);background:transparent;color:var(--fg);font-size:14px;font-weight:600;white-space:nowrap;position:relative;
  transition:transform var(--dur-base) var(--ease),background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease),opacity var(--dur-base) var(--ease)}
.ui-btn:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.ui-btn:active{transform:translateY(0)}
.ui-btn:disabled,.ui-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none}
.ui-btn--primary{background:var(--fg);color:var(--on-fg);border-color:var(--fg);box-shadow:var(--shadow-btn)}
.ui-btn--primary:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ui-btn--accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ui-btn--accent:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.ui-btn--ghost{border-color:transparent;color:var(--muted)}
.ui-btn--ghost:hover{color:var(--fg);background:var(--surface-2);transform:none}
.ui-btn--danger{border-color:color-mix(in srgb,var(--signal) 40%,transparent);color:var(--signal)}
.ui-btn--danger:hover{background:var(--signal-soft);border-color:var(--signal)}
.ui-btn--sm{--h:var(--control-h-sm);padding-inline:16px;font-size:13px}
.ui-btn--xs{--h:var(--control-h-xs);padding-inline:12px;font-size:12px;gap:6px}
.ui-btn--icon{width:var(--h);padding:0}
.ui-btn--block{width:100%}
.ui-btn .ui-btn__icon{width:18px;height:18px;flex:none}
.ui-btn.is-loading{color:transparent!important;pointer-events:none}
.ui-btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;color:var(--fg);animation:ui-spin .7s linear infinite}
.ui-btn--primary.is-loading::after,.ui-btn--accent.is-loading::after{color:var(--on-fg)}
@keyframes ui-spin{to{transform:rotate(360deg)}}
@media(hover:none){.ui-btn:hover{transform:none}}

/* ── Поля ─────────────────────────────────────────────────────────── */
.ui-field{display:grid;gap:8px}
.ui-label{font:500 var(--text-xs)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ui-input{width:100%;min-height:var(--control-h);padding:0 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2);color:var(--fg);font-size:14px;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.ui-input::placeholder{color:var(--faint)}
.ui-input:hover{border-color:var(--border-strong)}
.ui-input:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
.ui-input:disabled{opacity:.5;cursor:not-allowed}
.ui-input.is-invalid,.ui-input[aria-invalid=true]{border-color:var(--signal)}
.ui-input--pill{border-radius:var(--radius-pill);padding-inline:18px}
textarea.ui-input{min-height:120px;padding-block:12px;resize:vertical;line-height:1.5}
.ui-hint{font:var(--text-xs)/1.5 var(--font-mono);color:var(--faint);min-height:16px}
.ui-hint.is-error{color:var(--signal);font-family:var(--font-body);font-size:13px}
.ui-search{position:relative}
.ui-search .ui-input{padding-left:42px}
.ui-search__icon{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.ui-select{appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23AAA9A2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}

/* чекбокс · радио · переключатель */
.ui-check,.ui-radio,.ui-switch{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;line-height:1.45;color:var(--fg-2)}
.ui-check input,.ui-radio input,.ui-switch input{appearance:none;flex:none;margin:0;cursor:pointer}
.ui-check input{width:18px;height:18px;margin-top:2px;border:1px solid var(--border-strong);border-radius:5px;background:var(--surface-2);position:relative;transition:all var(--dur-fast) var(--ease)}
.ui-check input:checked{background:var(--accent);border-color:var(--accent)}
.ui-check input:checked::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ui-radio input{width:18px;height:18px;margin-top:2px;border:1px solid var(--border-strong);border-radius:50%;background:var(--surface-2);position:relative}
.ui-radio input:checked{border-color:var(--accent)}
.ui-radio input:checked::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--accent)}
.ui-switch input{width:40px;height:22px;border-radius:var(--radius-pill);background:var(--surface-3);border:1px solid var(--border);position:relative;transition:background var(--dur-base) var(--ease)}
.ui-switch input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--fg);transition:transform var(--dur-base) var(--ease)}
.ui-switch input:checked{background:var(--accent);border-color:var(--accent)}
.ui-switch input:checked::after{transform:translateX(18px);background:var(--on-accent)}
.ui-check input:disabled,.ui-radio input:disabled,.ui-switch input:disabled{opacity:.45;cursor:not-allowed}
.ui-check input[aria-invalid=true]{border-color:var(--signal)}

/* ── Сегменты · табы · чипы ───────────────────────────────────────── */
.ui-segment{display:inline-flex;padding:4px;gap:2px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.ui-segment button{min-height:36px;padding:0 16px;border-radius:calc(var(--radius-md) - 3px);color:var(--muted);font-size:13px;font-weight:500;transition:all var(--dur-base) var(--ease)}
.ui-segment button:hover{color:var(--fg)}
.ui-segment button[aria-pressed=true],.ui-segment button[aria-selected=true]{background:var(--surface-3);color:var(--fg)}
.ui-tabs{display:flex;gap:8px;flex-wrap:wrap}
.ui-tab{min-height:44px;padding:0 16px;border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--muted);font-size:13px;transition:all var(--dur-base) var(--ease)}
.ui-tab:hover{border-color:var(--border-strong);color:var(--fg)}
.ui-tab[aria-pressed=true],.ui-tab[aria-selected=true]{background:var(--fg);border-color:var(--fg);color:var(--on-fg)}
.ui-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--muted);font:var(--text-xs)/1.4 var(--font-mono);letter-spacing:.02em}
.ui-chip--accent{border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent);background:var(--accent-soft)}
.ui-chip--signal{border-color:color-mix(in srgb,var(--signal) 40%,transparent);color:var(--signal);background:var(--signal-soft)}
.ui-chip--success{border-color:color-mix(in srgb,var(--success) 40%,transparent);color:var(--success)}
.ui-chip--muted{border-style:dashed}
.ui-rec{display:inline-flex;align-items:center;gap:8px;color:var(--signal);font:var(--text-2xs)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.ui-rec i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px var(--signal-soft);animation:ui-pulse 2s infinite}
@keyframes ui-pulse{50%{box-shadow:0 0 0 9px transparent}}

/* ── Карточки · панели · окно ─────────────────────────────────────── */
.ui-card{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);overflow:hidden}
.ui-card--raised{background:var(--bg);box-shadow:var(--shadow-card)}
.ui-card--interactive{transition:background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);cursor:pointer}
.ui-card--interactive:hover{background:var(--surface-2);border-color:var(--border-strong)}
.ui-card__body{padding:var(--space-6)}
.ui-card__foot{padding:var(--space-4) var(--space-6);border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--faint);font:var(--text-2xs)/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.ui-card--numbered{position:relative;padding:28px;min-height:220px;display:flex;flex-direction:column;border-radius:0}
.ui-card--numbered .ui-num{color:var(--accent);font:var(--text-xs)/1 var(--font-mono)}
.ui-card--numbered h3{margin:auto 0 12px;padding-top:40px;font:400 clamp(20px,2vw,28px)/1.1 var(--font-display)}
.ui-card--numbered p{color:var(--muted);font-size:13px;line-height:1.6}
.ui-panel{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-2);padding:var(--space-6)}
.ui-window{border:1px solid var(--border-strong);border-radius:var(--radius-2xl) var(--radius-2xl) var(--radius-md) var(--radius-md);background:var(--surface);box-shadow:var(--shadow-window);overflow:hidden}
.ui-window__bar{height:44px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.ui-window__bar i{width:10px;height:10px;border-radius:50%;background:var(--surface-3)}
.ui-window__bar i:first-child{background:var(--signal)}
.ui-window__bar span{margin-left:auto;font:var(--text-2xs)/1 var(--font-mono);color:var(--muted)}

/* ── Списки · строки · задачи ─────────────────────────────────────── */
.ui-row{display:grid;grid-template-columns:54px 1fr auto;gap:15px;padding:18px 0;border-top:1px solid var(--border);align-items:start}
.ui-row time,.ui-row__time{color:var(--muted);font:var(--text-xs)/1.6 var(--font-mono)}
.ui-row strong{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.ui-row p{color:var(--muted);font-size:12px}
.ui-task{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--border)}
.ui-task:first-child{border-top:0}
.ui-task__check{width:18px;height:18px;flex:none;margin-top:1px;border:1px solid var(--accent);border-radius:5px;position:relative;background:none;transition:background var(--dur-fast) var(--ease)}
.ui-task__check::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform var(--dur-base) var(--ease)}
.ui-task.is-done .ui-task__check{background:var(--accent)}
.ui-task.is-done .ui-task__check::after{transform:rotate(45deg) scale(1)}
.ui-task.is-done .ui-task__text{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--faint)}
.ui-task__text{font-size:13px;font-weight:500;line-height:1.4}
.ui-task__meta{display:block;margin-top:4px;color:var(--faint);font:var(--text-2xs)/1.4 var(--font-mono)}
.ui-side-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;color:var(--muted);font-size:13px;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.ui-side-item:hover{color:var(--fg);background:var(--surface-2)}
.ui-side-item.is-active,.ui-side-item[aria-current=page]{background:var(--surface-3);color:var(--fg)}
.ui-side-item b{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.ui-side-item.is-active b,.ui-side-item[aria-current=page] b{background:var(--accent)}
.ui-side-title{margin:0 0 14px;padding:0 12px;color:var(--faint);font:var(--text-2xs)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.ui-avatar{width:30px;height:30px;display:inline-grid;place-items:center;border-radius:50%;background:var(--surface-3);color:var(--muted);font:var(--text-2xs)/1 var(--font-mono)}
.ui-speaker{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--border)}
.ui-speaker:first-child{border-top:0}
.ui-speaker b{display:block;margin-bottom:4px;font-size:12px;font-weight:600}
.ui-speaker p{font-size:13px;color:var(--muted)}
.ui-speaker mark{background:var(--accent-soft);color:var(--fg);padding:1px 3px;border-radius:3px}
.ui-source{display:inline-block;padding:6px 9px;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);font:var(--text-2xs)/1.2 var(--font-mono)}
.ui-answer{padding:18px 0 0 20px;border-left:2px solid var(--accent)}
.ui-answer p{color:var(--fg-2);font-size:14px;line-height:1.65}

/* ── Состояния экрана ─────────────────────────────────────────────── */
.ui-status{min-height:20px;color:var(--faint);font:var(--text-2xs)/1.5 var(--font-mono)}
.ui-status.is-error{color:var(--signal)}
.ui-status.is-success{color:var(--success)}
.ui-empty{padding:28px 24px;border:1px dashed var(--border);border-radius:var(--radius-md);text-align:center;color:var(--muted);font-size:13px;line-height:1.55}
.ui-empty strong{display:block;margin-bottom:6px;color:var(--fg);font:400 var(--text-lg)/1.2 var(--font-display)}
.ui-skeleton{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--radius-sm);color:transparent!important;min-height:1em}
.ui-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--fg) 6%,transparent),transparent);transform:translateX(-100%);animation:ui-shimmer 1.4s infinite}
@keyframes ui-shimmer{to{transform:translateX(100%)}}
.ui-success{padding:24px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:var(--radius-lg);background:var(--accent-soft)}
.ui-success h3{font:400 24px/1.1 var(--font-display);margin:0 0 6px}
.ui-toast{position:fixed;left:50%;bottom:24px;z-index:100;transform:translateX(-50%) translateY(20px);padding:12px 18px;border-radius:var(--radius-pill);background:var(--fg);color:var(--on-fg);font:var(--text-sm)/1.3 var(--font-body);font-weight:500;box-shadow:var(--shadow-btn);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.ui-toast.is-shown{opacity:1;transform:translateX(-50%) translateY(0)}
.ui-divider{height:1px;background:var(--border);border:0;margin:0}
.ui-wave{height:32px;display:flex;align-items:center;gap:3px;overflow:hidden}
.ui-wave i{width:2px;height:var(--h,40%);flex:none;border-radius:2px;background:color-mix(in srgb,var(--fg) 42%,transparent)}
.ui-wave i:nth-child(4n){background:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .ui-btn,.ui-card--interactive,.ui-tab,.ui-segment button{transition:none}
  .ui-rec i,.ui-skeleton::after,.ui-btn.is-loading::after,.ui-rec-btn.is-recording{animation:none}
  .ui-rec-btn:hover,.ui-dot:hover,.stars button:hover{transform:none}
}

/* ═══ 10 · ПРИЛОЖЕНИЕ (macOS) — те же токены, те же детали ═══════ */
.ui-app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:420px;border:1px solid var(--border-strong);border-radius:var(--radius-2xl);background:var(--bg);overflow:hidden;box-shadow:var(--shadow-window)}
.ui-app__side{padding:14px 10px;border-right:1px solid var(--border);background:var(--surface)}
.ui-app__main{padding:22px 24px;min-width:0}
.ui-traffic{display:flex;gap:7px;padding:4px 8px 16px}
.ui-traffic i{width:11px;height:11px;border-radius:50%;background:var(--surface-3)}
.ui-side-item svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.ui-side-item.is-active svg{color:var(--accent)}
/* заголовок страницы */
.ui-page{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ui-page__title{margin:0;font:400 var(--text-xl)/1.05 var(--font-display);letter-spacing:-.025em}
.ui-page__title em{font-style:italic;color:var(--muted)}
.ui-page__spacer{flex:1}
.ui-count{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius-pill);font:500 12px var(--font-mono);color:var(--muted);letter-spacing:.04em;font-variant-numeric:tabular-nums}
/* панель записи */
.ui-record{display:flex;align-items:center;gap:18px;padding:16px 20px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface)}
.ui-rec-btn{width:60px;height:60px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);cursor:pointer;flex:none;transition:transform var(--dur-fast) var(--ease),background var(--dur-base) var(--ease)}
.ui-rec-btn::before{content:"";width:18px;height:18px;border-radius:50%;background:currentColor;transition:border-radius var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.ui-rec-btn:hover{transform:scale(1.04)}
.ui-rec-btn.is-recording{background:var(--signal);color:var(--on-accent);animation:ui-rec-pulse 2s infinite}
.ui-rec-btn.is-recording::before{border-radius:4px;transform:scale(.8)}
@keyframes ui-rec-pulse{0%{box-shadow:0 0 0 0 var(--signal-soft)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ui-timer{font:500 30px/1 var(--font-mono);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.ui-record__status{margin-top:6px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.ui-record__status i{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.ui-record.is-recording .ui-record__status i{background:var(--signal)}
.ui-record .ui-wave{flex:1;margin-left:auto;max-width:420px}
/* неделя / календарь */
.ui-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.ui-day{display:grid;justify-items:center;gap:4px;padding:10px 4px 8px;border-radius:var(--radius-md);border:1px solid transparent;background:none;color:var(--fg);cursor:pointer;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.ui-day small{font:11px var(--font-mono);color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.ui-day b{font:500 16px var(--font-mono);font-variant-numeric:tabular-nums}
.ui-day i{width:5px;height:5px;border-radius:50%;background:transparent}
.ui-day.has-events i{background:var(--accent)}
.ui-day:hover{background:var(--surface-2)}
.ui-day.is-today{border-color:var(--accent)}
.ui-day.is-selected{background:var(--fg);color:var(--on-fg)}
.ui-day.is-selected small{color:var(--on-fg);opacity:.7}
.ui-day.is-selected.has-events i{background:var(--on-fg)}
/* строка-карточка списка: записи, дайджесты, источники */
.ui-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:inherit;transition:border-color var(--dur-fast) var(--ease)}
.ui-item:hover{border-color:var(--border-strong)}
.ui-item+.ui-item{margin-top:8px}
.ui-item__title{margin:0 0 4px;font:500 14px/1.3 var(--font-body)}
.ui-item__title.t-mono{font:500 14px var(--font-mono);letter-spacing:.02em}
.ui-item__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--faint)}
.ui-item__actions{display:flex;align-items:center;gap:6px}
.ui-item.is-disabled{opacity:.55}
.ui-status-icon{width:44px;height:44px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--surface-2);color:var(--muted);font-weight:600}
.ui-status-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ui-status-icon--ok{background:color-mix(in srgb,var(--success) 16%,transparent);color:var(--success)}
.ui-status-icon--err{background:var(--signal-soft);color:var(--signal)}
.ui-status-icon--app{background:var(--surface-3);color:var(--fg)}
/* задачи: действия справа */
.ui-task__actions{display:flex;align-items:center;gap:6px;margin-left:auto}
/* настройки */
.ui-settings{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);overflow:hidden}
.ui-setting{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 20px;border-top:1px solid var(--border)}
.ui-setting:first-child{border-top:0}
.ui-setting__k{font-size:14px;font-weight:500;min-width:0}
.ui-setting__k small{display:block;margin-top:3px;font-size:12px;color:var(--faint);font-weight:400}
.ui-setting__c{flex:none;display:flex;align-items:center;gap:10px}
/* статистика */
.ui-stat{padding:20px 22px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.ui-stat__label{font:500 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.ui-stat__value{margin:12px 0 4px;font:600 34px/1 var(--font-body);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ui-stat__sub{font-size:13px;color:var(--muted)}
/* диалог */
.ui-dialog{width:min(100%,460px);padding:26px 26px 22px;border:1px solid var(--border-strong);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-window)}
.ui-dialog__title{margin:0 0 8px;font:500 var(--text-lg)/1.2 var(--font-body);letter-spacing:-.015em}
.ui-dialog__text{margin:0 0 18px;font-size:14px;color:var(--muted)}
.ui-dialog__foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
/* цветные точки и тег */
.ui-dots{display:flex;flex-wrap:wrap;gap:10px}
.ui-dot{width:28px;height:28px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;background:var(--c,var(--accent));box-shadow:0 0 0 2px var(--surface) inset;transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.ui-dot:hover{transform:scale(1.08)}
.ui-dot.is-on{border-color:var(--fg)}
.ui-tag{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px 0 10px;border:1px solid var(--border);border-radius:var(--radius-pill);font-size:13px;font-weight:500;background:var(--surface)}
.ui-tag i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--accent))}
.ui-tag small{font:11px var(--font-mono);color:var(--faint)}
/* чат ассистента */
.ui-chat{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;min-height:280px}
.ui-chat__list{padding:8px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.ui-chat__item{display:block;padding:10px 12px;border-radius:var(--radius-md);color:var(--muted);transition:background var(--dur-fast) var(--ease)}
.ui-chat__item b{display:block;color:var(--fg);font-weight:500;font-size:14px}
.ui-chat__item small{font:11px var(--font-mono);color:var(--faint)}
.ui-chat__item.is-active small{color:var(--muted)}
.ui-chat__item:hover{background:var(--surface-2)}
.ui-chat__item.is-active{background:var(--accent-soft)}
.ui-chat__pane{display:flex;flex-direction:column;gap:12px}
.ui-suggest{display:flex;flex-wrap:wrap;gap:8px}
.ui-compose{display:flex;gap:8px;margin-top:auto}
.ui-compose .ui-input{flex:1}
@media(max-width:820px){.ui-app,.ui-chat{grid-template-columns:minmax(0,1fr)}.ui-app__side{border-right:0;border-bottom:1px solid var(--border)}}

/* ═══ 11 · ЗАГРУЗКА: спиннер, прогресс, скелеты ═════════════════
   Правило: ждём > 300 мс — скелет с шиммером на месте контента; спиннер — только внутри кнопки
   или строки статуса; прогресс-бар 2 px сверху — навигация и загрузка данных; полноэкранных лоадеров нет. */
.ui-loader{display:inline-block;width:18px;height:18px;border:2px solid color-mix(in srgb,var(--fg) 18%,transparent);border-top-color:var(--accent);border-radius:50%;animation:ui-spin .7s linear infinite;vertical-align:middle;flex:none}
.ui-loader--sm{width:14px;height:14px}
.ui-loader--lg{width:28px;height:28px;border-width:3px}
.ui-loading{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.ui-loading--block{justify-content:center;padding:28px;border:1px dashed var(--border);border-radius:var(--radius-lg)}
.ui-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:1000;pointer-events:none;opacity:0;transition:opacity var(--dur-base) var(--ease)}
.ui-progress::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:var(--accent);border-radius:2px;transform:translateX(-100%);animation:ui-progress 1.2s var(--ease) infinite}
.ui-progress.is-active{opacity:1}
@keyframes ui-progress{0%{transform:translateX(-100%)}60%{transform:translateX(150%)}100%{transform:translateX(250%)}}
.ui-skeleton--text{display:block;height:12px;border-radius:6px;width:var(--w,100%)}
.ui-skeleton--title{display:block;height:18px;border-radius:6px;width:var(--w,60%)}
.ui-skeleton--avatar{display:block;width:30px;height:30px;border-radius:50%;flex:none}
.ui-skeleton--block{display:block;height:var(--h,120px);border-radius:var(--radius-md)}
.ui-skeleton--pill{display:block;height:24px;width:var(--w,72px);border-radius:var(--radius-pill)}
.ui-skeleton-list{display:grid}
.ui-skeleton-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--border)}
.ui-skeleton-row:first-child{border-top:0}
.ui-skeleton-row>div{display:grid;gap:8px}
.ui-shimmer{position:relative;overflow:hidden}
.ui-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--fg) 6%,transparent),transparent);transform:translateX(-100%);animation:ui-shimmer 1.4s infinite}
@media(prefers-reduced-motion:reduce){.ui-loader,.ui-progress::before,.ui-shimmer::after{animation:none}.ui-progress::before{width:100%;transform:none;opacity:.5}}

.ui-status{font-size:12px}
.ui-task__check[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}
.ui-dot[aria-pressed=true]{border-color:var(--fg)}
.ui-day[aria-pressed=true]{background:var(--fg);color:var(--on-fg)}
.ui-day[aria-current=date]{border-color:var(--accent)}