/* Eclairs Home — Soft Native. Системные шрифты, один файл, без препроцессоров. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --sa-t: env(safe-area-inset-top, 0px); --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px); --sa-r: env(safe-area-inset-right, 0px);
  --tab-h: 54px;
  color-scheme: dark;
}
:root[data-theme="dark"] {
  --bg: #161412; --text: #f4f1ec; --text-2: rgba(244, 241, 236, .68); --text-3: rgba(244, 241, 236, .42);
  --glass: rgba(26, 23, 21, .5); --surface: rgba(30, 27, 25, .62); --strong: rgba(32, 29, 27, .94); --solid: #211e1b;
  --soft: rgba(255, 255, 255, .07); --hover: rgba(255, 255, 255, .11); --line: rgba(255, 255, 255, .09);
  --accent: #e8a06a; --accent-ink: #1c120a; --accent-soft: rgba(232, 160, 106, .18);
  --danger: #ff8a7a; --ok: #6fcf97; --tile: #f6f3ee;
  --shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fbf9f6; --text: #1d1b19; --text-2: rgba(29, 27, 25, .66); --text-3: rgba(29, 27, 25, .42);
  --glass: rgba(255, 253, 250, .66); --surface: rgba(255, 252, 248, .72); --strong: rgba(255, 253, 250, .96); --solid: #fffdfa;
  --soft: rgba(0, 0, 0, .05); --hover: rgba(0, 0, 0, .07); --line: rgba(0, 0, 0, .08);
  --accent: #a85a28; --accent-ink: #fff; --accent-soft: rgba(168, 90, 40, .12);
  --danger: #c4402f; --ok: #2c8a57; --tile: #ffffff;
  --shadow: 0 12px 40px rgba(60, 40, 20, .2);
}
/* поверх фото текст всегда светлый; без фото — цвет темы */
:root { --pt: #fff; --pt-2: rgba(255, 255, 255, .86); --ts: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 22px rgba(0, 0, 0, .35); }
:root[data-bg="none"] { --pt: var(--text); --pt-2: var(--text-2); --ts: none; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  font: 14px/1.45 var(--font); color: var(--text); background: #26221f;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html[data-bg="none"] body { background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
:root:not([data-bg="none"]) :focus-visible { outline-color: #fff; box-shadow: 0 0 0 4px rgba(0, 0, 0, .35); }
:root:not([data-bg="none"]) dialog :focus-visible, :root:not([data-bg="none"]) .ai :focus-visible, :root:not([data-bg="none"]) .pop :focus-visible, :root:not([data-bg="none"]) .card :focus-visible { outline-color: var(--accent); box-shadow: none; }
/* поля ввода: без обводки и без кольца — состояние видно по заливке */
input, textarea, select { border: 0; outline: 0; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 0; box-shadow: none; }
kbd { font: 11px/1 var(--mono); padding: 2px 5px; border-radius: 5px; background: var(--soft); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.i-s { width: 15px; height: 15px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--text-2); }
.sm { font-size: 12.5px; }
.pad { padding: 8px 20px 20px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--solid); padding: 8px 12px; border-radius: 10px; }
.skip:focus { top: 12px; }

/* ---------- фон ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.bg-img { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity .8s ease; will-change: opacity; }
.bg-img.on { opacity: 1; }
.bg-scrim { position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .32), rgba(0, 0, 0, .06) 26%, rgba(0, 0, 0, .1) 58%, rgba(0, 0, 0, .5)); }
:root[data-bg="none"] .bg { display: none; }

/* ---------- верхняя панель ---------- */
.bar { position: absolute; inset: 0 0 auto 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: calc(14px + var(--sa-t)) calc(22px + var(--sa-r)) 0 calc(22px + var(--sa-l)); }
.logo { justify-self: start; font-size: 20px; font-weight: 650; letter-spacing: -.04em; color: var(--pt); text-shadow: var(--ts); }
.logo i { font-style: normal; color: var(--accent); }
.nav { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); color: var(--text); }
.nav-i { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; font-size: 13px; color: var(--text-2); transition: background .15s, color .15s; }
.nav-i:hover { background: var(--hover); color: var(--text); }
.nav-i.is-on { background: var(--soft); color: var(--text); }
.bar-r { justify-self: end; display: flex; gap: 8px; align-items: center; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: var(--text); background: var(--glass); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); transition: background .15s; }
.icon-btn:hover { background: var(--strong); }
.icon-btn.sm { width: 28px; height: 28px; background: none; backdrop-filter: none; color: var(--text-2); }
.icon-btn.sm:hover { background: var(--hover); color: var(--text); }
.icon-btn:disabled { opacity: .3; pointer-events: none; }
.avatar-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--glass); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); color: var(--text); font-weight: 600; font-size: 14px; }
.avatar-btn img, .acc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1020px) { .nav-opt { display: none; } }
html[data-mode="min"] .nav { display: none; }
html[data-mode="min"] .bar { grid-template-columns: 1fr auto; }

/* ---------- главная ---------- */
main { width: 100%; max-width: 1080px; margin: 0 auto; flex: 1; padding: clamp(70px, 13vh, 150px) calc(22px + var(--sa-r)) 28px calc(22px + var(--sa-l)); }
html[data-mode="min"] main { padding-top: clamp(100px, 22vh, 230px); }
.hero { text-align: center; color: var(--pt); text-shadow: var(--ts); }
h1 { margin: 0; font-size: clamp(32px, 3.9vw, 52px); line-height: 1.05; font-weight: 600; letter-spacing: -.035em; }
h1 span { opacity: .55; }
#sub { margin: 10px 0 0; font-size: 14.5px; color: var(--pt-2); min-height: 1.45em; }
html[data-mode="min"] #sub { display: none; }

.search-wrap { position: relative; z-index: 6; max-width: 680px; margin: clamp(18px, 3.4vh, 32px) auto 0; }
.search { position: relative; display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 8px 0 18px; border-radius: 17px; background: var(--glass); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); box-shadow: 0 8px 30px rgba(0, 0, 0, .18); color: var(--text); transition: background .18s; }
.search:focus-within { background: var(--strong); }
.search-i { color: var(--text-2); }
#q { flex: 1; min-width: 0; height: 100%; padding: 0 8px; background: none; font-size: 15.5px; }
#q::placeholder { color: var(--text-3); }
.engine { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; border-radius: 12px; font-size: 13.5px; font-weight: 500; transition: background .15s; }
.engine:hover { background: var(--hover); }
.engine img { width: 18px; height: 18px; border-radius: 4px; }
.engine .i-s { opacity: .6; }

.menu, .sugg { position: absolute; top: calc(100% + 8px); z-index: 20; margin: 0; padding: 6px; list-style: none; max-height: min(60dvh, 420px); overflow: auto; background: var(--solid); border-radius: 16px; box-shadow: var(--shadow); animation: pop-in .14s var(--ease); }
.menu { right: 0; min-width: 230px; }
.sugg { left: 0; right: 0; }
.menu li, .sugg li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 11px; cursor: pointer; }
.menu li:hover, .sugg li:hover, .sugg li[aria-selected="true"], .menu li:focus { background: var(--hover); outline: 0; }
.menu li[aria-selected="true"] { color: var(--accent); }
.menu li:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.menu li img { width: 18px; height: 18px; border-radius: 4px; }
.menu kbd { margin-left: auto; }
.s-ico { display: grid; place-items: center; width: 28px; height: 28px; flex: none; color: var(--text-2); position: relative; }
.s-ico .fav-img { width: 24px; height: 24px; border-radius: 7px; }
.s-ico .svc { width: 24px; height: 24px; border-radius: 7px; }
.s-t { display: flex; flex-direction: column; min-width: 0; }
.s-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-sub { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.99); } }

/* избранное: иконка заполняет весь квадрат */
.favs { margin: 26px auto 0; max-width: 780px; text-align: center; color: var(--pt); }
.favs ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 6px; margin: 0; padding: 0; list-style: none; }
.favs li { position: relative; display: flex; flex-direction: column; align-items: center; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 82px; color: var(--pt); font-size: 12px; text-shadow: var(--ts); }
.tile-ico { position: relative; display: block; width: 58px; height: 58px; border-radius: 17px; overflow: hidden; background: var(--tile); color: #3a342e; box-shadow: 0 4px 16px rgba(0, 0, 0, .22); transition: transform .12s var(--ease); }
.tile:active .tile-ico { transform: scale(.95); }
.tile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-add .tile-ico { display: grid; place-items: center; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--pt); box-shadow: none; }
.tile-add { cursor: pointer; }
.fav-img { position: absolute; inset: 0; display: grid; place-items: center; }
.fav-img b { font-size: 22px; font-weight: 600; color: #6b655e; }
.fav-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fav-img.ok b { display: none; }
.svc { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-x { position: absolute; top: -6px; right: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--solid); color: var(--danger); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); z-index: 1; }
.tile-mv { display: flex; gap: 4px; margin-top: 4px; }
.tile-mv button { display: grid; place-items: center; width: 28px; height: 24px; border-radius: 8px; background: var(--strong); color: var(--text); }
.tile-mv button:disabled { opacity: .35; }
.editing .tile-ico { animation: wiggle .28s ease-in-out infinite alternate; }
@keyframes wiggle { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.favs li.drag { opacity: .4; }
.text-btn { margin-top: 10px; font-size: 12.5px; color: var(--pt-2); padding: 5px 12px; border-radius: 999px; text-shadow: var(--ts); }
.text-btn:hover { background: rgba(255, 255, 255, .14); color: var(--pt); }
:root[data-bg="none"] .text-btn:hover { background: var(--soft); }

/* ---------- панель ---------- */
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; margin-top: 34px; }
.card { position: relative; display: flex; flex-direction: column; min-height: 168px; padding: 15px 17px; border-radius: 20px; background: var(--surface); backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.card h2 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: .005em; }
.card-go { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--text-2); }
.card-go:hover { background: var(--hover); color: var(--text); }
.card-body { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card-body > p { margin: 0; }
.card-link { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding: 3px 0; font-size: 12.5px; color: var(--text-2); align-self: flex-start; }
.card-link:hover { color: var(--text); }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex: 1; }
.act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px; border-radius: 14px; background: var(--soft); font-size: 12px; transition: background .15s, transform .12s var(--ease); }
.act:hover { background: var(--hover); }
.act:active { transform: scale(.97); }
.act .i { color: var(--accent); width: 20px; height: 20px; }

.todo { margin: 0; padding: 0 0 0 4px; list-style: none; display: flex; flex-direction: column; gap: 1px; position: relative; }
.todo::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.todo li { position: relative; display: flex; align-items: center; gap: 2px; }
.todo label { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 11px; padding: 5px 0; cursor: pointer; position: relative; }
.todo input { position: absolute; opacity: 0; }
.box { display: block; width: 13px; height: 13px; margin: 4px 0 0 0; flex: none; border-radius: 50%; background: var(--c, var(--accent)); box-shadow: 0 0 0 3px transparent; transition: transform .15s var(--ease), opacity .15s; position: relative; z-index: 1; }
.box .i { display: none; }
.todo input:checked + .box { opacity: .35; transform: scale(.8); }
.todo input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 2px; }
.todo-t { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.todo-t time { order: 2; font-variant-numeric: tabular-nums; color: var(--text-3); font-size: 11.5px; }
.is-done .todo-t { text-decoration: line-through; color: var(--text-3); }
.todo-add, .wx-find { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.todo-add input[name=text] { flex: 1 1 100%; }
.todo-add input[type=time] { flex: 1; }
.todo-add input, .wx-find input, .field input, select { height: 34px; padding: 0 11px; border-radius: 10px; background: var(--soft); min-width: 0; transition: background .15s; }
.wx-find input { flex: 1; }
.todo-add input:focus, .wx-find input:focus, .field input:focus, select:focus { background: var(--hover); }
.todo-add input[type=time] { font-size: 12.5px; }
.recent { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1px; }
.recent a { display: flex; align-items: center; gap: 11px; padding: 5px 6px; margin: 0 -6px; border-radius: 12px; }
.recent a:hover { background: var(--soft); }
.r-ico { position: relative; display: block; width: 34px; height: 34px; flex: none; border-radius: 10px; overflow: hidden; background: var(--tile); }
.r-t { display: flex; flex-direction: column; min-width: 0; }
.r-t strong { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-t small { color: var(--text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-now { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; }
.wx-ico .i { width: 38px; height: 38px; stroke-width: 1.4; }
.wx-t { font-size: 34px; line-height: 1; font-weight: 300; letter-spacing: -.03em; }
.wx-d { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.wx-hl { display: flex; flex-direction: column; font-size: 12.5px; color: var(--text-2); text-align: right; }
.wx-place { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 12.5px; color: var(--text-2); }
.wx-place:hover { color: var(--text); }
.wx-hours { margin: auto 0 0; padding: 10px 0 0; list-style: none; display: flex; justify-content: space-between; border-top: 1px solid var(--line); }
.wx-hours li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wx-hours b { font-weight: 500; color: var(--text); }
.wx-hours .i { width: 17px; height: 17px; }
.wx-res { margin: 0; padding: 0; list-style: none; }
.wx-res button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 6px 8px; border-radius: 10px; text-align: left; }
.wx-res button:hover { background: var(--soft); }
.wx-res small { color: var(--text-3); }
.err { margin: 0; font-size: 12.5px; color: var(--danger); }

/* ---------- подвал ---------- */
.foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px calc(18px + var(--sa-r)) calc(14px + var(--sa-b)) calc(14px + var(--sa-l)); color: var(--pt-2); font-size: 12px; text-shadow: var(--ts); }
.credit-wrap { display: flex; align-items: center; gap: 2px; min-width: 0; }
.credit-wrap .icon-btn.sm { color: var(--pt); text-shadow: none; flex: none; }
.credit-wrap .icon-btn.sm:hover { background: rgba(255, 255, 255, .16); color: #fff; }
:root[data-bg="none"] .credit-wrap .icon-btn.sm:hover { background: var(--soft); color: var(--text); }
.credit { margin: 0 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.credit a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 2px; }
.credit a:hover { color: var(--pt); }
.pill-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--glass); color: var(--text); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); text-shadow: none; flex: none; font-size: 12.5px; }
.pill-btn:hover { background: var(--strong); }

/* ---------- сервисы и аккаунт (popover) ---------- */
.pop { position: fixed; inset: 58px auto auto 50%; translate: -50% 0; margin: 0; width: min(500px, calc(100vw - 32px)); padding: 14px; border: 0; border-radius: 22px; background: var(--solid); color: var(--text); box-shadow: var(--shadow); }
.pop-r { inset: 58px calc(22px + var(--sa-r)) auto auto; translate: 0; width: min(320px, calc(100vw - 32px)); padding: 10px; }
.pop:popover-open { animation: pop-in .16s var(--ease); }
.pop h2 { margin: 0 0 8px 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.pop ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.pop a { display: flex; align-items: center; gap: 12px; padding: 9px; border-radius: 13px; }
.pop a:hover { background: var(--soft); }
.svc-ico { position: relative; display: block; width: 36px; height: 36px; flex: none; border-radius: 11px; overflow: hidden; background: var(--tile); color: #3a342e; }
.svc-ico b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; }
.svc-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.svc-t small { color: var(--text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.ok { background: var(--ok); } .dot.bad { background: var(--danger); }
.acc-head { display: flex; align-items: center; gap: 12px; padding: 6px 6px 12px; }
.acc-av { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden; background: var(--accent); color: var(--accent-ink); font-size: 18px; font-weight: 600; }
.acc-head strong { display: block; font-size: 15px; }
.acc-head small { color: var(--text-3); }
.acc-list { display: flex; flex-direction: column; gap: 2px; }
.acc-list a, .acc-list button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 11px; border-radius: 12px; text-align: left; font-size: 13.5px; }
.acc-list a:hover, .acc-list button:hover { background: var(--soft); }
.acc-list .i { color: var(--text-2); }
.acc-note { margin: 0 6px 10px; font-size: 12.5px; color: var(--text-2); }

/* ---------- диалоги ---------- */
dialog { padding: 0; border: 0; border-radius: 22px; background: var(--solid); color: var(--text); width: min(560px, calc(100vw - 32px)); max-height: min(88dvh, 740px); box-shadow: 0 24px 80px rgba(0, 0, 0, .5); overflow: hidden; }
dialog[open] { display: flex; flex-direction: column; animation: dlg-in .18s var(--ease); }
dialog::backdrop { background: rgba(12, 9, 7, .55); animation: fade .18s; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes fade { from { opacity: 0; } }
dialog form { display: flex; flex-direction: column; }
.dlg-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 6px 20px; }
.dlg-h h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.dlg-h .icon-btn { background: var(--soft); backdrop-filter: none; }
.dlg-b { overflow: auto; padding: 0 20px 20px; overscroll-behavior: contain; }
.dlg-b section { padding: 10px 0 12px; border-top: 1px solid var(--line); }
.dlg-b section:first-child { border-top: 0; }
.dlg-b h3 { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.dlg-f { display: flex; gap: 8px; padding: 12px 20px 18px; }
.grow { flex: 1; }
.field { display: flex; flex-direction: column; gap: 6px; padding: 8px 20px; font-size: 12.5px; color: var(--text-2); }
.field em { font-style: normal; color: var(--text-3); }
.field input { height: 42px; font-size: 16px; color: var(--text); padding: 0 12px; border-radius: 12px; }
dialog .err { padding: 0 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 17px; border-radius: 12px; background: var(--soft); font-weight: 500; font-size: 13.5px; transition: background .15s, transform .12s var(--ease); }
.btn:hover { background: var(--hover); }
.btn:active { transform: scale(.97); }
.btn.sm { height: 34px; padding: 0 12px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { color: var(--danger); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; flex-wrap: wrap; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--soft); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: block; padding: 5px 11px; border-radius: 9px; font-size: 13px; color: var(--text-2); cursor: pointer; transition: background .15s, color .15s; }
.seg input:checked + span { background: var(--solid); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
:root[data-theme="light"] .seg input:checked + span { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }
.sw { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; cursor: pointer; flex: 1; }
.sw input { position: absolute; opacity: 0; }
.sw-b { position: relative; width: 38px; height: 22px; flex: none; border-radius: 11px; background: var(--hover); transition: background .18s; }
.sw-b::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .18s var(--ease); }
.sw input:checked ~ .sw-b { background: var(--accent); }
.sw input:checked ~ .sw-b::after { transform: translateX(16px); }
.sw input:focus-visible ~ .sw-b { outline: 2px solid var(--accent); outline-offset: 2px; }
.order { margin: 0; padding: 0; list-style: none; }
.order li { display: flex; align-items: center; gap: 8px; }
.mv { display: flex; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin: 6px 0 0; font-size: 12.5px; }
.keys dt { color: var(--text-2); white-space: nowrap; } .keys dd { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 20px 12px; }
.chip { padding: 6px 13px; border-radius: 999px; background: var(--soft); font-size: 13px; transition: background .15s; }
.chip:hover { background: var(--hover); }
.chip[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 10px; padding: 0 20px 14px; overflow: auto; min-height: 0; overscroll-behavior: contain; }
.thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 13px; overflow: hidden; background: var(--soft); outline: 2px solid transparent; outline-offset: -2px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb span { position: absolute; inset: auto 0 0 0; padding: 14px 8px 5px; font-size: 11px; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb[aria-pressed="true"] { outline-color: var(--accent); outline-width: 3px; }
#bgDlg .row { padding: 8px 20px 16px; border-top: 1px solid var(--line); }
.custom { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 4px 20px 20px; }
.custom p { margin: 0; color: var(--text-2); }

/* ---------- AI на весь экран ---------- */
.ai { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 280px minmax(0, 1fr); background: var(--bg); color: var(--text); animation: fade .16s; padding-top: var(--sa-t); }
.ai-side { display: flex; flex-direction: column; min-height: 0; padding: 14px 10px; background: var(--solid); }
.ai-side-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 12px; font-weight: 600; }
.ai-side-h span { display: inline-flex; align-items: center; gap: 8px; }
.ai-side-h .i { color: var(--accent); }
.ai-new { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 500; margin-bottom: 8px; }
.ai-new:hover { filter: brightness(1.1); }
.ai-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 1px; overscroll-behavior: contain; }
.ai-list .h-i { display: flex; align-items: center; border-radius: 11px; }
.ai-list .h-i:hover, .ai-list .h-i.on { background: var(--soft); }
.ai-list .h-i > button:first-child { flex: 1; min-width: 0; padding: 8px 10px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ai-list .h-i .icon-btn { opacity: 0; }
.ai-list .h-i:hover .icon-btn, .ai-list .h-i .icon-btn:focus-visible { opacity: 1; }
.ai-note { margin: 8px 6px 0; padding: 10px 12px; border-radius: 12px; background: var(--soft); font-size: 12.5px; color: var(--text-2); }
.ai-note a { color: var(--accent); text-decoration: underline; }
.ai-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ai-h { display: flex; align-items: center; gap: 6px; padding: 10px 14px; }
.ai-h .grow { flex: 1; }
.ai-h select { max-width: 220px; height: 34px; font-size: 13px; padding: 0 10px; }
.ai-h .icon-btn { background: none; backdrop-filter: none; }
.ai-h .icon-btn:hover { background: var(--hover); }
.ai-burger { display: none; }
.ai-msgs { flex: 1; min-height: 0; overflow: auto; padding: 10px 18px 20px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.ai-col { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ai-empty { margin: auto; text-align: center; max-width: 340px; }
.ai-empty h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.ai-empty p { margin: 4px 0; color: var(--text-2); }
.m { position: relative; max-width: 100%; line-height: 1.55; overflow-wrap: anywhere; font-size: 14.5px; }
.m p { margin: 0 0 8px; } .m p:last-child { margin: 0; }
.m ul, .m ol { margin: 0 0 8px; padding-left: 22px; }
.m.user { align-self: flex-end; max-width: 86%; padding: 9px 15px; border-radius: 18px 18px 6px 18px; background: var(--accent-soft); }
.m.user p { margin: 0; }
.m.bot { align-self: stretch; padding-right: 34px; }
.m.bot.typing:empty::before { content: "…"; color: var(--text-3); }
.m.is-err { color: var(--danger); }
.m code { font: 12.5px var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--soft); }
.m pre { margin: 0 0 8px; padding: 11px 13px; border-radius: 12px; background: var(--soft); overflow: auto; }
.m pre code { padding: 0; background: none; }
.m a { color: var(--accent); text-decoration: underline; }
.m .cp { position: absolute; top: -4px; right: 0; opacity: 0; transition: opacity .15s; }
.m:hover .cp, .m .cp:focus-visible { opacity: 1; }
.ai-form { width: 100%; max-width: 780px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 8px 14px calc(14px + var(--sa-b)); }
.ai-form textarea { flex: 1; min-height: 46px; max-height: 180px; padding: 12px 16px; border-radius: 18px; background: var(--soft); resize: none; font-size: 16px; line-height: 1.35; transition: background .15s; }
.ai-form textarea:focus { background: var(--hover); }
.send { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 15px; background: var(--accent); color: var(--accent-ink); }
.send:disabled, .ai-form textarea:disabled { opacity: .4; }

.toast { position: fixed; left: 50%; bottom: calc(22px + var(--sa-b)); translate: -50% 12px; z-index: 200; padding: 9px 15px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .18s, translate .18s var(--ease); }
.toast.on { opacity: 1; translate: -50% 0; }

/* ---------- плотность ---------- */
html[data-density="compact"] main { padding-top: clamp(62px, 9vh, 110px); }
html[data-density="compact"] h1 { font-size: clamp(26px, 3.4vw, 40px); }
html[data-density="compact"] #sub { font-size: 13.5px; margin-top: 5px; }
html[data-density="compact"] .search { height: 46px; border-radius: 15px; }
html[data-density="compact"] .favs { margin-top: 18px; }
html[data-density="compact"] .tile { width: 70px; gap: 5px; font-size: 11.5px; }
html[data-density="compact"] .tile-ico { width: 48px; height: 48px; border-radius: 14px; }
html[data-density="compact"] .dash { margin-top: 24px; gap: 10px; }
html[data-density="compact"] .card { min-height: 0; padding: 12px 14px; border-radius: 16px; }

/* ---------- телефон ---------- */
.tabbar { display: none; }
@media (max-width: 900px) {
  .ai { grid-template-columns: 1fr; }
  .ai-side { position: absolute; z-index: 2; inset: 0 auto 0 0; width: min(300px, 86vw); padding-top: calc(14px + var(--sa-t)); transform: translateX(-102%); transition: transform .22s var(--ease); box-shadow: var(--shadow); }
  .ai.side-open .ai-side { transform: none; }
  .ai-burger { display: inline-grid; }
}
@media (max-width: 760px) {
  .bar { grid-template-columns: 1fr auto; padding: calc(12px + var(--sa-t)) calc(16px + var(--sa-r)) 0 calc(16px + var(--sa-l)); }
  .nav, #openSettings { display: none; }
  main { padding: calc(66px + var(--sa-t)) calc(14px + var(--sa-r)) 24px calc(14px + var(--sa-l)); }
  html[data-mode="min"] main { padding-top: calc(15vh + var(--sa-t)); }
  h1 { font-size: 34px; }
  #sub { font-size: 14px; }
  .search { height: 52px; border-radius: 17px; padding: 0 6px 0 14px; }
  .engine span { display: none; }
  .engine { padding: 0 8px; }
  #q { font-size: 16px; padding: 0 6px; }
  .favs { margin-top: 22px; }
  .favs ul { gap: 12px 0; }
  .tile { width: 25vw; max-width: 88px; }
  .tile-ico { width: 56px; height: 56px; }
  .dash { margin-top: 24px; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .card { min-height: 0; }
  .foot { padding: 0 14px calc(var(--tab-h) + var(--sa-b) + 14px); }
  .foot .pill-btn { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + var(--sa-b)); padding: 0 var(--sa-r) var(--sa-b) var(--sa-l); background: var(--strong); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); color: var(--text-2); box-shadow: 0 -1px 0 var(--line); }
  .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; }
  .tabbar button:active { color: var(--accent); }
  .tabbar .i { width: 21px; height: 21px; }
  .pop, .pop-r { inset: auto 0 calc(var(--tab-h) + var(--sa-b) + 8px) 0; translate: 0; width: auto; margin: 0 12px; max-height: 70dvh; overflow: auto; }
  .pop ul { grid-template-columns: 1fr; }
  .pop a { padding: 11px 9px; }
  dialog { width: 100vw; max-width: none; max-height: 90dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; padding-bottom: var(--sa-b); }
  dialog[open] { animation: sheet-in .24s var(--ease); }
  @keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
  .ai-h select { max-width: 150px; }
  .m .cp { opacity: .8; }
  .toast { bottom: calc(var(--tab-h) + var(--sa-b) + 14px); }
  .seg span { padding: 7px 11px; }
  .thumbs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) { .tile-ico { width: 52px; height: 52px; } h1 { font-size: 30px; } }
@media (max-height: 520px) and (orientation: landscape) { main { padding-top: 60px; } h1 { font-size: 28px; } .dash { margin-top: 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }
.box.c0 { --c: #ff6b5e; } .box.c1 { --c: #ffa24a; } .box.c2 { --c: #4aa3ff; } .box.c3 { --c: #43d17a; }