/* Эстетика в духе ChatGPT, выбранная сознательно: нейтральный графит, белые акценты, блюр и лёгкость.
   Поверх — личное оформление (фон, шрифт, стикеры), AI-маркеры и мелкие радости. Никакого неона и мигания. */
@property --b1 { syntax: "<color>"; inherits: true; initial-value: #0000; }
@property --b2 { syntax: "<color>"; inherits: true; initial-value: #0000; }
@property --b3 { syntax: "<color>"; inherits: true; initial-value: #0000; }
:root {
  color-scheme: dark;
  --ink: #ececec;
  --muted: #ababab;
  --line: #393939;
  --paper: #212121;
  --surface: #2a2a2a;
  --field: #303030;
  --error: #ffb4ab;
  --mint: #71ffa9;
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --soft: cubic-bezier(.2, .7, .2, 1);
  --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1, 1.084 30.6%, 1.03 35.2%, .996 40.3%, .987 43.6%, .985 47.4%, .998 57.7%, 1.002 66.9%, 1);
  /* Цвета AI-маркеров, формат «R G B» для rgb(var(--mk) / альфа) */
  --mk-lilac: 199 176 255;
  --mk-lemon: 255 225 110;
  --mk-berry: 255 138 172;
  --mk-pistachio: 170 230 140;
  --mk-peach: 255 186 140;
  --mk-sky: 140 205 255;
  --mk-orange: 255 170 90;
  color: var(--ink);
  background: #212121;
  font-size: 16px;
  line-height: 1.55;
}
* { box-sizing: border-box; }
body {
  --font-text: var(--font-system);
  --font-head: var(--font-text);
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-text);
  background: var(--paper);
  transition: background-color 1.2s ease, --b1 1.4s ease, --b2 1.4s ease, --b3 1.4s ease;
}
::selection { background: #71ffa94d; color: #fff; }
a { color: inherit; text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; }
input, textarea { caret-color: var(--mint); }
button, a { touch-action: manipulation; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #71ffa980;
  outline-offset: 3px;
}
.header, .demo-bar, .shell { position: relative; z-index: 1; transition: opacity .45s var(--soft), filter .45s var(--soft); }
.header {
  min-height: 76px;
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.brand { display: inline-flex; flex-shrink: 0; align-items: center; text-decoration: none; }
.brand img { display: block; width: 130px; height: 39px; }
.account { display: flex; align-items: center; gap: 24px; font-size: 14px; min-width: 0; }
.account > span { overflow-wrap: anywhere; }
.account small { display: block; color: var(--muted); font-size: 13px; }
.account form { margin: 0; }
.look-open { gap: 8px; }
.look-open-icon { display: inline-block; transition: rotate .6s var(--spring); }
.look-open:hover .look-open-icon { rotate: 90deg; }
.shell { max-width: 1120px; margin: 0 auto; padding: 12px 32px 48px; min-height: calc(100svh - 76px); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-head); }
h1 { font-size: 30px; line-height: 1.25; letter-spacing: -.7px; margin-bottom: 12px; font-weight: 600; overflow-wrap: anywhere; }
h2 { font-size: 18px; font-weight: 600; margin-bottom: 24px; }
h3 { font-size: 16px; font-weight: 550; margin-bottom: 5px; }
.muted, .help { color: var(--muted); }
.small { font-size: 14px; }
.eyebrow { display: block; font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.greeting { margin-bottom: 6px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 32px 0; }
.page-heading p, .page-heading h1:last-child { margin-bottom: 0; }
.count { margin-left: 8px; font-size: 22px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.button {
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 24px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 550;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  position: relative;
  transition: background-color 180ms ease, border-color 180ms ease, scale .55s var(--spring), width .45s var(--soft), padding .45s var(--soft), color .2s ease;
}
/* Пружина: быстро сжимается, на отпускании чуть перелетает и успокаивается */
.button:active { scale: .96; transition: scale 90ms ease; }
.primary { background: #ececec; color: #202020; }
.primary:hover { background: #fff; }
.secondary { background: transparent; border-color: #555; color: var(--ink); }
.secondary:hover, .quiet:hover { background: #ffffff14; }
.quiet { color: var(--muted); background: transparent; }
.new-order .plus { display: inline-block; font-size: 19px; line-height: 1; font-weight: 400; transition: rotate .6s var(--spring); }
.new-order:hover .plus { rotate: 90deg; }
.kbd {
  margin-left: 2px; padding: 1px 6px; border-radius: 6px; background: #0000001a;
  font: 500 12px/1.4 var(--font-system); opacity: 0; translate: 4px 0; transition: opacity .2s ease, translate .4s var(--spring);
}
.editor:focus-within .kbd { opacity: .55; translate: 0 0; }
@media (hover: none) { .kbd { display: none; } }
.button.sent { width: 44px !important; padding-inline: 0; color: #0000; pointer-events: none; }
.button.sent .kbd { display: none; }
.button.sent::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #202020; font-size: 17px; animation: pop .45s var(--spring) .2s both; }
@keyframes pop { from { opacity: 0; scale: .4; } }
.panel { background: transparent; border: 0; }
.filters { padding: 0 0 24px; display: flex; align-items: end; gap: 14px; border-bottom: 1px solid var(--line); }
.field { margin-bottom: 24px; min-width: 0; }
.filters .field { margin: 0; flex: 1; }
.filters .search-field { flex: 2; }
.field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 9px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid transparent; border-radius: 12px;
  padding: 12px 14px; background: var(--field); color: var(--ink); min-height: 48px;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow .5s var(--soft);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #ffffff26; }
.field input::placeholder, .field textarea::placeholder { color: #a5a5a5; opacity: 1; }
.field textarea { resize: vertical; }
.field input:disabled, .field textarea:disabled { background: #ffffff08; color: var(--muted); }
.help { font-size: 14px; margin: 8px 0 0; }
.required { color: var(--muted); }
.reset { font-size: 14px; padding: 12px 0; }
.result-heading { margin: 24px 0 10px; font-size: 14px; }

/* ---------- Язык людей: пробелы, дни, цифры ---------- */
.gap { color: var(--muted); text-decoration: underline dotted #ffffff40; text-underline-offset: 5px; }
.day.today, .day.tomorrow { display: inline-block; padding: 0 9px; margin-left: -1px; border-radius: 999px; background: #ffffff14; color: var(--ink); }
.day.today { background: #71ffa91f; color: #d4ffe5; }
.order-when p, .order-price p, .details dd, .order-id { font-variant-numeric: tabular-nums; }

/* ---------- Список заказов ---------- */
.order-list { overflow: hidden; padding-top: 12px; }
.order-row {
  position: relative;
  display: grid; grid-template-columns: minmax(170px, 1.5fr) minmax(170px, 1.3fr) minmax(100px, .6fr) 96px;
  align-items: center; gap: 20px; padding: 22px 48px 22px 14px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line); overflow-wrap: anywhere;
  transition: background-color 180ms ease, scale .5s var(--spring); border-radius: 14px;
  animation: row-in .6s var(--soft) both; animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes row-in { from { opacity: 0; filter: blur(6px); translate: 0 10px; } }
.order-row:last-child { border-bottom-color: transparent; }
.order-row:hover { background: var(--surface); }
.order-row:active { scale: .99; transition: scale 90ms ease; }
.order-row p { margin: 0; font-size: 14px; }
.order-customer p { color: var(--muted); }
.order-row.is-cancelled :is(h3, p) { color: var(--muted); }
.order-id { text-align: right; font-size: 13px; color: var(--muted); }
.order-id span { display: block; }
.row-label { font-size: 14px; color: var(--muted); display: block; margin-bottom: 5px; }
.row-arrow {
  position: absolute; right: 18px; top: 50%; translate: -8px -50%; opacity: 0; filter: blur(3px); color: var(--muted);
  transition: opacity .25s ease, translate .5s var(--spring), filter .25s ease;
}
.order-row:hover .row-arrow { opacity: 1; translate: 0 -50%; filter: none; color: var(--ink); }
.badge { font-size: 14px; display: inline-flex; color: #c8c8c8; }
.badge.cancelled { color: var(--muted); }
.order-id .badge { font-size: 13px; color: var(--muted); }
.empty { padding: 90px 16px; text-align: center; }
.empty h2 { font-size: 22px; margin-bottom: 12px; }
.empty p { max-width: 400px; margin: 0 auto 24px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 24px; }

/* ---------- Карточка и форма ---------- */
.back { display: inline-block; margin-top: 24px; font-size: 14px; color: var(--muted); text-decoration: none; transition: color .2s ease, translate .5s var(--spring); }
.back:hover { color: var(--ink); translate: -3px 0; }
.order-title { view-transition-name: order-title; }
.editor-columns { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr); gap: 48px; }
.form-section { padding: 24px 0; margin-bottom: 12px; border-top: 1px solid var(--line); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.section-hint { font-size: 14px; color: var(--muted); margin-top: -12px; margin-bottom: 24px; }
.save-bar {
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
  padding: 20px 0; border-top: 1px solid var(--line);
}
.save-bar > span { font-size: 14px; color: var(--muted); }
.save-bar > div { display: flex; gap: 12px; align-items: center; }
.notice { margin-top: 24px; padding: 14px 18px; border-radius: 12px; overflow-wrap: anywhere; background: var(--surface); animation: notice-in .6s var(--spring) both; }
@keyframes notice-in { from { opacity: 0; translate: 0 -8px; scale: .98; filter: blur(4px); } }
.success { border-left: 2px solid #71ffa966; }
.error { background: #382929; border: 1px solid #68423d; color: var(--error); }
.errorlist { list-style: none; padding: 0; margin: 8px 0 16px; color: var(--error); font-size: 14px; }
.has-error input, .has-error textarea, .has-error select { border-color: var(--error); }
.details { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; margin: 0; }
.details > div { min-width: 0; }
.details dt { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.details dd { margin: 0; overflow-wrap: anywhere; }
.wide { grid-column: 1 / -1; }
.single { grid-template-columns: 1fr; }
.inline { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 14px; }
.source-text { overflow-wrap: anywhere; line-height: 1.8; }
.clarify ul { padding-left: 20px; font-size: 14px; margin: 0 0 20px; color: var(--muted); }
.clarify li { margin-bottom: 8px; }
.clarify .questions { list-style: none; padding: 0; margin: 0; color: var(--ink); }
.clarify .questions li { margin: 0; }
.question {
  position: relative; display: block; width: calc(100% + 20px); margin: 0 -10px 2px; padding: 8px 36px 8px 10px;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-size: 15px; text-align: left; cursor: copy;
  transition: background-color .2s ease, scale .5s var(--spring);
}
.question:hover { background: #ffffff0d; }
.question:active { scale: .98; transition: scale 90ms ease; }
.question.copied { animation: copied-bg 1.2s ease; }
.question.copied::after { content: "✓"; position: absolute; right: 12px; top: 50%; translate: 0 -50%; color: var(--mint); animation: copied 1.2s ease forwards; }
@keyframes copied-bg { 0% { background-color: #71ffa926; } }
@keyframes copied { 0% { opacity: 0; scale: .4; } 20%, 70% { opacity: 1; scale: 1; } 100% { opacity: 0; filter: blur(4px); } }
.all-set { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.all-set h2 { margin-bottom: 2px; }
.all-set p { margin: 0; }
.all-set svg { flex: none; width: 44px; height: 44px; filter: drop-shadow(0 4px 6px #0000004d); animation: cherry-drop 1s var(--spring) .3s both; transform-origin: 50% 0; }
@keyframes cherry-drop { from { translate: 0 -46px; rotate: -30deg; opacity: 0; } 25% { opacity: 1; } }
.login-layout { min-height: calc(100svh - 180px); display: grid; place-items: center; padding: 40px 0; }
.login-panel { width: 100%; max-width: 360px; }
.login-panel h1, .login-panel > p { text-align: center; }
.login-panel form { margin-top: 32px; }
.login-panel .small { margin: 24px 0 0; }
.full { width: 100%; margin-top: 4px; }
.demo-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap;
  margin: 0 32px; padding: 10px 16px; border-radius: 12px; font-size: 14px;
  background: var(--surface); color: var(--muted);
}
.demo-bar strong { color: var(--ink); font-weight: 550; }
.demo-bar a { color: var(--ink); }
.demo-bar-links { display: flex; gap: 18px; }
.demo-start .small { margin: 14px 0 0; text-align: center; }
.demo-login { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 20px; }
.demo-login summary { cursor: pointer; color: var(--muted); font-size: 14px; text-align: center; }
.demo-login form { margin-top: 20px; }
@media (max-width: 740px) { .demo-bar { margin: 0 20px; } }

/* ---------- AI-помощник: цветные маркеры ----------
   У каждого поля свой выделитель (--mk задаёт ai.js): цитата, «таблетка» в полёте и поле одного цвета.
   Мелких подписей нет — состояние видно по цвету, скринридер получает aria-description. */
.ai-run { margin: -8px 0 4px; }
.ai-button { gap: 8px; padding-inline: 18px; background: transparent; color: var(--ink); border-color: #ffffff26; }
.ai-button:hover:not(:disabled) { background: #ffffff0d; border-color: #ffffff40; }
.ai-button:disabled:not(.busy) { opacity: .4; cursor: not-allowed; }
.ai-button.busy { cursor: progress; background: #ffffff08; border-color: #ffffff1a; }
.ai-spark { display: inline-block; color: inherit; opacity: .85; }
.ai-button.busy .ai-spark { animation: ai-spark 1.6s ease-in-out infinite; }
.ai-button.done { animation: ai-settle .5s var(--spring); }
@keyframes ai-spark { 50% { transform: rotate(90deg) scale(.85); opacity: .5; } }
@keyframes ai-settle { from { transform: scale(.94); } }

/* Переливающийся текст — как «Thinking…» */
.ai-button.busy [data-ai-run-label] {
  background: linear-gradient(90deg, #8e8e8e 0%, #8e8e8e 35%, #f5f5f5 50%, #8e8e8e 65%, #8e8e8e 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: ai-shimmer 1.8s linear infinite;
}
@keyframes ai-shimmer { from { background-position: 125% 0; } to { background-position: -25% 0; } }

.ai-source { position: relative; border-radius: 12px; }
.ai-source textarea { display: block; transition: color .4s ease; }
.ai-source.scanning textarea { color: var(--muted); }
.ai-source:has(.ai-mirror) textarea { color: #0000; }
.ai-mirror {
  position: absolute; inset: 0; z-index: 1; overflow: auto; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; animation: ai-fade .25s ease-out;
}
:is(.ai-mirror, .tour-demo) mark {
  --mk: 255 255 255;
  margin: 0 -3px; padding: 1px 3px; color: inherit; border-radius: 6px 3px 7px 4px / 4px 7px 3px 6px;
  background: linear-gradient(100deg, rgb(var(--mk) / 0) 0%, rgb(var(--mk) / .44) 3%, rgb(var(--mk) / .32) 50%, rgb(var(--mk) / .4) 96%, rgb(var(--mk) / 0) 100%) no-repeat 0 60% / 0% 80%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .6s var(--soft), background-position .6s var(--soft), color .4s ease;
}
:is(.ai-mirror, .tour-demo) mark.hit { background-size: 100% 80%; color: #fff; }
.ai-mirror mark.ask.hit { background: none; text-decoration: underline wavy rgb(var(--mk) / .8) 1.5px; text-underline-offset: 5px; }
/* Принятое «впитывается»: от маркера остаётся тонкий след снизу */
.ai-mirror mark.ok { background-size: 100% 22%; background-position: 0 96%; color: var(--ink); }
.ai-mirror mark.rejected { background-size: 0% 80%; color: var(--muted); text-decoration: line-through #ffffff4d; }
@keyframes ai-fade { from { opacity: 0; } }

.ai-input { position: relative; display: block; border-radius: 12px; }
.field.ai-suggest, .field.ai-accepted, .field.ai-ask { --mk: 255 255 255; }
.ai-suggest :is(input, select, textarea) {
  background: linear-gradient(90deg, rgb(var(--mk) / .16), rgb(var(--mk) / .04) 70%), var(--field);
  box-shadow: inset 3px 0 0 rgb(var(--mk) / .8); padding-right: 88px;
}
.ai-suggest .ai-input:has(select) .ai-controls { right: 30px; }
.ai-suggest select { padding-right: 116px; }
.ai-accepted :is(input, select, textarea) { box-shadow: inset 2px 0 0 rgb(var(--mk) / .45); }
.ai-soak :is(input, select, textarea) { animation: ai-soak .7s var(--soft); }
@keyframes ai-soak { from { box-shadow: inset 600px 0 0 rgb(var(--mk) / .2); } }
.ai-ask :is(input, select, textarea) { border: 1px dashed rgb(var(--mk) / .7); }
.ai-locked input::placeholder { font-style: italic; color: #8e8e8e; }
.ai-land { animation: ai-land .6s var(--spring); }
@keyframes ai-land { 22% { scale: 1.012 .96; } 50% { scale: .995 1.01; } }
.ai-land :is(input, select, textarea), .field.ai-land textarea { animation: ai-flash .9s ease-out; }
@keyframes ai-flash { from { background-color: rgb(var(--mk, 255 255 255) / .28); } }
.ai-pulse :is(input, select, textarea) { animation: ai-pulse .8s ease 2; }
@keyframes ai-pulse { 50% { box-shadow: inset 3px 0 0 rgb(var(--mk) / .8), 0 0 0 3px rgb(var(--mk, 255 255 255) / .35); } }
.ai-controls { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; animation: ai-pop .35s var(--spring) both; }
.ai-controls.out { animation: ai-out .18s ease-in forwards; }
.ai-controls button {
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color .15s ease, opacity .15s ease, scale .45s var(--spring);
}
.ai-controls button:active { scale: .88; transition: scale 80ms ease; }
.ai-ok { background: #ececec; color: #0d0d0d; }
.ai-ok:hover { background: #fff; }
.ai-no { background: transparent; color: var(--muted); }
.ai-no:hover { background: #ffffff1a; color: var(--ink); }
@keyframes ai-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes ai-out { to { opacity: 0; transform: scale(.85); } }
@keyframes ai-in { from { opacity: 0; filter: blur(4px); transform: translateY(2px); } }
.ai-date {
  --mk: var(--mk-orange);
  display: inline-flex; margin-top: 8px; padding: 6px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgb(var(--mk) / .16); box-shadow: inset 0 0 0 1px rgb(var(--mk) / .35); color: var(--ink); font-size: 13.5px;
  animation: ai-pop .45s var(--spring) both; transition: background-color .2s ease, scale .45s var(--spring);
}
.ai-date:hover { background: rgb(var(--mk) / .26); }
.ai-date:active { scale: .95; transition: scale 80ms ease; }

/* Перелетающая подсказка — «таблетка» цвета маркера */
.ai-flyer {
  --mk: 236 236 236;
  position: fixed; left: 0; top: 0; z-index: 60; max-width: 60vw; overflow: hidden; text-overflow: ellipsis;
  padding: 4px 12px; border-radius: 999px; background: rgb(var(--mk)); color: #141414; font-size: 13.5px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 8px 24px #00000066; pointer-events: none; will-change: transform, opacity;
}
.ai-flyer.ask { background: #3a3a3a; color: var(--ink); box-shadow: 0 8px 24px #00000066, inset 0 0 0 1.5px rgb(var(--mk) / .7); }
.ai-ring { --mk: 255 255 255; position: fixed; left: 0; top: 0; z-index: 59; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1.5px solid rgb(var(--mk) / .7); pointer-events: none; }

.ai-panel { position: relative; margin: 24px 0 12px; padding: 20px; border-radius: 24px; background: var(--surface); border: 1px solid #ffffff0f; }
.ai-panel h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.ai-mode { padding: 2px 9px; border-radius: 999px; background: #ffffff12; color: var(--muted); font-size: 12px; font-weight: 400; }
.ai-status { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.ai-status:empty { display: none; }
.ai-status.swap { animation: ai-in .3s ease-out both; }
.ai-status:is([data-kind="error"], [data-kind="review"]) { color: var(--error); }
.ai-warning { margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; background: #ffffff0d; color: var(--ink); font-size: 13.5px; animation: ai-in .3s ease-out both; }
.ai-warning::before { content: "⚠︎ "; color: var(--muted); }
.ai-block { margin-bottom: 14px; animation: ai-in .35s ease-out both; }
.ai-block h3 { font-size: 14px; margin-bottom: 8px; color: var(--muted); font-weight: 500; font-family: var(--font-text); }
.ai-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-small { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.ai-accept-all { background: #ececec; color: #0d0d0d; }
.ai-accept-all:hover { background: #fff; }
.ai-count { font-variant-numeric: tabular-nums; opacity: .55; }
.ai-q { margin: 0 0 12px; padding-left: 18px; font-size: 14px; }
.ai-q li { margin-bottom: 8px; opacity: 0; filter: blur(6px); transform: translateY(4px); transition: opacity .45s ease-out, filter .45s ease-out, transform .45s ease-out; }
.ai-q li::marker { color: #6e6e6e; }
.ai-q li.shown { opacity: 1; filter: none; transform: none; }
.ai-rules { margin: 0; padding-top: 12px; border-top: 1px solid #ffffff12; color: #8e8e8e; font-size: 12.5px; line-height: 1.5; }
.ai-panel h2 + .ai-status:empty + .ai-warning[hidden] + .ai-block[hidden] + .ai-block[hidden] + .ai-rules { border-top: 0; padding-top: 0; }
@media (max-width: 740px) { .ai-panel { margin: 4px 0 20px; } }

/* ---------- Мелкие радости ---------- */
.sprinkle { position: fixed; left: 0; top: 0; z-index: 70; width: 4px; height: 11px; border-radius: 2px; pointer-events: none; }

/* ---------- Личный фон ----------
   Пятна цвета под стеклом. Цвета — зарегистрированные @property, поэтому при смене фона плавно перетекают. */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.backdrop i {
  position: absolute; width: 72vmax; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  transition: left 1.8s var(--soft), top 1.8s var(--soft);
  animation: drift 80s ease-in-out infinite alternate;
}
.backdrop i:nth-child(1) { left: 10%; top: 5%; background: radial-gradient(closest-side, var(--b1), #0000); }
.backdrop i:nth-child(2) { left: 95%; top: 45%; background: radial-gradient(closest-side, var(--b2), #0000); animation-duration: 95s; animation-direction: alternate-reverse; }
.backdrop i:nth-child(3) { left: 35%; top: 105%; background: radial-gradient(closest-side, var(--b3), #0000); animation-duration: 70s; }
@keyframes drift {
  33% { transform: translate(6vw, 5vh) scale(1.08); }
  66% { transform: translate(-5vw, 8vh) scale(.94); }
  100% { transform: translate(4vw, -6vh) scale(1.04); }
}
.backdrop::before, .backdrop::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.backdrop::before { background-image: linear-gradient(#ffffff0c 1px, #0000 1px), linear-gradient(90deg, #ffffff0c 1px, #0000 1px); background-size: 28px 28px; background-position: center; }
.backdrop::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
body[data-bg="graphite"] .backdrop i { animation-play-state: paused; }
body[data-bg="mint"] { --paper: #1b201d; --b1: #71ffa92e; --b2: #2fa27a38; --b3: #8fd8ff1f; }
body[data-bg="mint"] .backdrop i:nth-child(1) { left: 15%; top: 10%; }
body[data-bg="raspberry"] { --paper: #221a1e; --b1: #ff5c8a33; --b2: #ff9a6b24; --b3: #9b3f7640; }
body[data-bg="raspberry"] .backdrop i:nth-child(1) { left: 85%; top: 0%; }
body[data-bg="raspberry"] .backdrop i:nth-child(2) { left: 5%; top: 60%; }
body[data-bg="peach"] { --paper: #231e1a; --b1: #ffb38a33; --b2: #ffd89a22; --b3: #ff8a8a24; }
body[data-bg="peach"] .backdrop i:nth-child(1) { left: 50%; top: -5%; }
body[data-bg="peach"] .backdrop i:nth-child(3) { left: 80%; top: 100%; }
body[data-bg="lavender"] { --paper: #1d1b25; --b1: #b69cff33; --b2: #7fa8ff26; --b3: #ff9ce01f; }
body[data-bg="lavender"] .backdrop i:nth-child(2) { left: 70%; top: 15%; }
body[data-bg="lavender"] .backdrop i:nth-child(3) { left: 15%; top: 90%; }
body[data-bg="grain"] { --paper: #19191b; --b1: #ffffff0d; --b2: #9aa4ff12; --b3: #ffb38a0d; }
body[data-bg="grain"] .backdrop::after { opacity: .22; }
body[data-bg="grid"] { --paper: #1e1f20; --b1: #71ffa914; }
body[data-bg="grid"] .backdrop::before { opacity: 1; }
/* Стекло: на цветном фоне поверхности полупрозрачные и размывают то, что под ними */
body:not([data-bg="graphite"]) { --surface: #ffffff0f; --field: #ffffff12; --line: #ffffff1c; }
body:not([data-bg="graphite"]) :is(.field input, .field select, .field textarea, .ai-panel, .demo-bar, .order-row:hover, .notice) {
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}
body:not([data-bg="graphite"]) .field select option { background: #2a2a2a; }

/* ---------- Личный шрифт ---------- */
body[data-font="soft"] { --font-text: "Manrope", var(--font-system); }
body[data-font="loud"] { --font-text: "Manrope", var(--font-system); --font-head: "Unbounded", var(--font-system); }
body[data-font="loud"] h1 { font-size: 26px; letter-spacing: -.3px; }
body[data-font="loud"] h2 { font-size: 16px; }
body[data-font="book"] { --font-head: "Lora", Georgia, serif; }
body[data-font="book"] h1 { font-size: 32px; letter-spacing: -.3px; }
body[data-font="hand"] { --font-head: "Caveat", var(--font-system); }
body[data-font="hand"] h1 { font-size: 42px; letter-spacing: 0; line-height: 1.1; }
body[data-font="hand"] h2 { font-size: 25px; }
body[data-font="hand"] h3 { font-size: 22px; font-weight: 600; }
body[data-font="mono"] { --font-text: "JetBrains Mono", ui-monospace, monospace; font-size: 15px; }
body[data-font="mono"] h1 { letter-spacing: -1px; }
body.font-swap :is(.shell, .header) { animation: font-swap .38s ease both; }
@keyframes font-swap { 40% { filter: blur(7px); opacity: .5; } }

/* ---------- Стикеры на «рабочем столе» ---------- */
.desk { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sticker {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(76px * var(--s, 1)); aspect-ratio: 1;
  translate: -50% -50%; rotate: calc(var(--r, 0deg) + var(--tilt, 0deg));
  filter: drop-shadow(2px 0 0 #f4f2ee) drop-shadow(-2px 0 0 #f4f2ee) drop-shadow(0 2px 0 #f4f2ee) drop-shadow(0 -2px 0 #f4f2ee) drop-shadow(0 3px 5px #0000004d);
  /* В работе стикеры тихие и не мозолят глаз; в режиме оформления — яркие */
  opacity: .32;
  transition: rotate .5s var(--spring), scale .5s var(--spring), filter .3s ease, opacity .5s var(--soft);
}
.sticker svg { display: block; width: 100%; height: 100%; }
.desk.editing .sticker { opacity: 1; }
.sticker-x {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; display: none; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: #1d1d1d; color: var(--ink); font-size: 14px; line-height: 1; cursor: pointer;
}
.desk.editing { z-index: 4; pointer-events: auto; }
.desk.editing .sticker { pointer-events: auto; cursor: grab; touch-action: none; }
.desk.editing .sticker:hover { scale: 1.05; }
.desk.editing .sticker-x { display: grid; animation: ai-pop .35s var(--spring) both; }
.sticker.lifted {
  scale: 1.14; cursor: grabbing;
  filter: drop-shadow(2px 0 0 #f4f2ee) drop-shadow(-2px 0 0 #f4f2ee) drop-shadow(0 2px 0 #f4f2ee) drop-shadow(0 -2px 0 #f4f2ee) drop-shadow(0 16px 18px #00000073);
}
body.look-mode :is(.header, .demo-bar, .shell) { opacity: .35; filter: blur(3px); pointer-events: none; }

/* ---------- Панель оформления ---------- */
.look {
  position: fixed; z-index: 6; top: 12px; right: 12px; bottom: 12px; width: min(380px, calc(100vw - 24px)); overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 20px 20px; border-radius: 24px; background: #262626d9; border: 1px solid #ffffff14;
  -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: 0 24px 70px #00000080; animation: look-in .6s var(--spring) both;
}
.look.closing { animation: look-out .24s ease-in forwards; }
@keyframes look-in { from { opacity: 0; transform: translateX(48px) scale(.96); filter: blur(12px); } }
@keyframes look-out { to { opacity: 0; transform: translateX(32px) scale(.97); filter: blur(8px); } }
.look > * { animation: ai-in .5s var(--soft) both; }
.look > :nth-child(2) { animation-delay: 60ms; }
.look > :nth-child(3) { animation-delay: 110ms; }
.look > :nth-child(4) { animation-delay: 160ms; }
.look-head { display: flex; justify-content: space-between; align-items: center; }
.look h2 { margin: 0; }
.look h3 { margin: 22px 0 10px; font: 500 13px/1.4 var(--font-system); color: var(--muted); }
.look-close { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; transition: background-color .2s ease, rotate .5s var(--spring); }
.look-close:hover { background: #ffffff14; color: var(--ink); rotate: 90deg; }
.look-bgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 6px; }
.look-fonts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.look-choice {
  display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid transparent; border-radius: 16px;
  background: transparent; color: var(--muted); font: 12.5px/1.3 var(--font-system); text-align: left; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, scale .5s var(--spring);
}
.look-choice:hover { background: #ffffff0d; color: var(--ink); }
.look-choice:active { scale: .94; transition: scale 90ms ease; }
.look-choice[aria-pressed="true"] { border-color: #ffffff45; color: var(--ink); background: #ffffff0a; }
.look-fonts .look-choice { align-items: center; text-align: center; padding: 8px 4px; }
.swatch { display: block; height: 50px; border-radius: 11px; background: #212121; box-shadow: inset 0 0 0 1px #ffffff14; transition: scale .5s var(--spring); }
.look-choice:hover .swatch { scale: 1.03; }
.swatch[data-swatch="mint"] { background: radial-gradient(circle at 20% 15%, #71ffa970, #0000 60%), radial-gradient(circle at 95% 90%, #2fa27a80, #0000 55%), #1b201d; }
.swatch[data-swatch="raspberry"] { background: radial-gradient(circle at 85% 10%, #ff5c8a80, #0000 60%), radial-gradient(circle at 5% 90%, #ff9a6b55, #0000 55%), #221a1e; }
.swatch[data-swatch="peach"] { background: radial-gradient(circle at 50% 0%, #ffb38a80, #0000 60%), radial-gradient(circle at 85% 100%, #ff8a8a55, #0000 55%), #231e1a; }
.swatch[data-swatch="lavender"] { background: radial-gradient(circle at 75% 15%, #7fa8ff70, #0000 60%), radial-gradient(circle at 15% 90%, #b69cff80, #0000 55%), #1d1b25; }
.swatch[data-swatch="grain"] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"), #19191b; }
.swatch[data-swatch="grid"] { background: linear-gradient(#ffffff1a 1px, #0000 1px) 0 0 / 10px 10px, linear-gradient(90deg, #ffffff1a 1px, #0000 1px) 0 0 / 10px 10px, #1e1f20; }
.sample { font-size: 26px; line-height: 1.25; color: var(--ink); }
[data-font-choice="soft"] .sample { font-family: "Manrope", var(--font-system); }
[data-font-choice="loud"] .sample { font-family: "Unbounded", var(--font-system); font-size: 22px; }
[data-font-choice="book"] .sample { font-family: "Lora", Georgia, serif; }
[data-font-choice="hand"] .sample { font-family: "Caveat", var(--font-system); font-size: 30px; }
[data-font-choice="mono"] .sample { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 22px; }
.look-tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.look-sticker {
  aspect-ratio: 1; padding: 11px; border: 0; border-radius: 14px; background: transparent; cursor: pointer;
  transition: background-color .2s ease, scale .5s var(--spring), rotate .5s var(--spring);
}
.look-sticker:hover { background: #ffffff0d; scale: 1.1; rotate: -7deg; }
.look-sticker:nth-child(even):hover { rotate: 7deg; }
.look-sticker:active { scale: .88; transition: scale 90ms ease; }
.look-sticker svg { display: block; width: 100%; height: 100%; filter: drop-shadow(1.5px 0 0 #f4f2ee) drop-shadow(-1.5px 0 0 #f4f2ee) drop-shadow(0 1.5px 0 #f4f2ee) drop-shadow(0 -1.5px 0 #f4f2ee); }
.look-sticker.full { animation: nope .4s ease; }
@keyframes nope { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
.look-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.look-foot .button { margin-left: auto; }
.look-error { margin: 0; color: var(--error); font-size: 13px; }

/* ---------- Экскурсия по демо ----------
   Окошко — огромная тень вокруг цели; оно и стеклянная карточка переезжают на пружине.
   У каждого шага свой цвет маркера: обводка окошка, фон карточки и полоска прогресса. */
@property --tour-ring { syntax: "<color>"; inherits: false; initial-value: #0000; }
.tour { position: absolute; left: 0; top: 0; z-index: 50; }
.tour-catch { position: fixed; inset: 0; }
.tour-hole {
  position: absolute; pointer-events: none;
  box-shadow: 0 0 0 1.5px var(--tour-ring), 0 0 0 7px color-mix(in srgb, var(--tour-ring) 22%, #0000), 0 0 0 300vmax #0f0f0fb8;
  transition: left .8s var(--spring), top .8s var(--spring), width .8s var(--spring), height .8s var(--spring), border-radius .5s var(--soft), --tour-ring .5s ease;
  animation: tour-veil .5s ease both;
}
.tour-card {
  --mk: 255 255 255;
  position: absolute; left: 0; top: 0; width: 344px; padding: 30px 22px 18px; border-radius: 24px;
  background: linear-gradient(160deg, rgb(var(--mk) / .12), #0000 55%), #262626e6; border: 1px solid #ffffff14;
  -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: 0 24px 70px #00000080, inset 0 1px 0 #ffffff0f;
  transition: translate .8s var(--spring);
  animation: tour-in .7s var(--spring) .1s both;
}
.tour.still :is(.tour-hole, .tour-card) { transition: none; }
.tour-sticker {
  position: absolute; top: -30px; left: 20px; width: 60px; aspect-ratio: 1; rotate: -9deg;
  filter: drop-shadow(2px 0 0 #f4f2ee) drop-shadow(-2px 0 0 #f4f2ee) drop-shadow(0 2px 0 #f4f2ee) drop-shadow(0 -2px 0 #f4f2ee) drop-shadow(0 6px 8px #00000059);
}
.tour-sticker svg { display: block; width: 100%; height: 100%; }
.tour-sticker.pop { animation: tour-sticker .8s var(--spring) .12s both; }
.tour-close { position: absolute; top: 10px; right: 10px; }
.tour-card h2 { margin: 8px 0 8px; padding-right: 24px; font-size: 19px; }
.tour-text { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.tour-text .gap { color: var(--ink); }
.tour-demo { margin: 14px 0 0; padding: 10px 14px; border-radius: 14px; background: #ffffff0a; color: var(--ink); font-size: 14px; line-height: 1.9; }
.tour-body > * { transition: opacity .16s ease, filter .16s ease; }
.tour-body.out > * { opacity: 0; filter: blur(4px); }
.tour-body.swap > * { animation: ai-in .45s var(--soft) both; }
.tour-body.swap > :nth-child(2) { animation-delay: 50ms; }
.tour-body.swap > :nth-child(3) { animation-delay: 100ms; }
.tour-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
.tour-steps { display: flex; gap: 5px; }
.tour-steps i { width: 6px; height: 6px; border-radius: 3px; background: #ffffff24; transition: width .6s var(--spring), background-color .4s ease; }
.tour-steps i.done { background: #ffffff5c; }
.tour-steps i.on { width: 22px; background: rgb(var(--mk)); }
.tour-actions { display: flex; gap: 4px; }
.order-row.tour-lit { background: var(--surface); }
.tour.closing .tour-card { animation: tour-out .26s ease-in forwards; }
.tour.closing .tour-hole { animation: tour-veil-out .32s ease forwards; }
@keyframes tour-in { from { opacity: 0; transform: translateY(10px) scale(.94); filter: blur(10px); } }
@keyframes tour-out { to { opacity: 0; transform: scale(.96); filter: blur(8px); } }
@keyframes tour-sticker { from { opacity: 0; transform: translateY(16px) scale(.4) rotate(-35deg); } }
@keyframes tour-veil { from { opacity: 0; } }
@keyframes tour-veil-out { to { opacity: 0; } }
@media (max-width: 740px) { .tour-card { width: calc(100vw - 24px); } }

.skip { position: absolute; top: -100px; left: 10px; z-index: 5; background: var(--paper); padding: 12px; }
.skip:focus { top: 10px; }

/* ---------- Переходы между страницами ----------
   View Transitions: страница мягко растворяется в блюр, имя покупателя перетекает из списка в карточку.
   Где браузер их не умеет (класс no-vt ставит joy.js), остаётся прежнее появление. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  /* Без белой вспышки: тёмная подложка, старая страница не гаснет (только размывается),
     новая проявляется поверх обычным смешиванием, а не plus-lighter. */
  ::view-transition { background: #212121; }
  ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
  ::view-transition-old(root) { animation: vt-out .3s ease-in both; }
  ::view-transition-new(root) { animation: vt-in .4s var(--soft) both; }
  ::view-transition-group(order-title) { animation-duration: .5s; animation-timing-function: var(--soft); }
  .header { view-transition-name: header; }
  .backdrop { view-transition-name: backdrop; }
  .desk { view-transition-name: desk; }
  .no-vt .shell { animation: page-enter 360ms cubic-bezier(.2, .65, .3, 1) both; }
}
@keyframes vt-out { to { filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } }
@keyframes page-enter {
  from { opacity: 0; filter: blur(5px); transform: translateY(6px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 960px) {
  .filters { flex-wrap: wrap; }
  .filters .search-field { flex-basis: 100%; }
  .editor-columns { gap: 28px; }
  .order-row { gap: 14px; grid-template-columns: 1.3fr 1.2fr .7fr 84px; }
}
@media (max-width: 740px) {
  .header { padding: 14px 20px; gap: 12px; flex-wrap: wrap; }
  .brand img { width: 112px; height: 34px; }
  .account { gap: 8px; }
  .account > span { max-width: 140px; }
  .account .button { padding-inline: 12px; }
  .look-open-label { display: none; }
  .shell { padding: 8px 20px 32px; }
  h1 { font-size: 26px; }
  .page-heading { align-items: flex-start; flex-wrap: wrap; padding: 24px 0; gap: 20px; }
  .filters { gap: 12px; }
  .filters .field { flex-basis: calc(50% - 12px); }
  .filters .search-field { flex-basis: 100%; }
  .filters .button { flex: 1; }
  .order-row { grid-template-columns: 1fr 1fr; padding: 20px 0; gap: 12px 16px; border-radius: 0; }
  .order-customer { grid-column: 1 / -1; }
  .order-id { grid-column: 1 / -1; grid-row: 1; display: flex; gap: 12px; text-align: left; }
  .row-arrow { display: none; }
  .editor-columns { grid-template-columns: 1fr; gap: 0; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .details { gap: 24px 14px; }
  .save-bar { flex-direction: column; align-items: stretch; }
  .save-bar > div { justify-content: space-between; }
  .empty { padding: 64px 8px; }
  .sticker { width: calc(46px * var(--s, 1)); }
  .look { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 72svh; animation-name: look-up; }
  .look.closing { animation-name: look-down; }
  .look-bgs { grid-template-columns: repeat(4, 1fr); }
  .look-tray { grid-template-columns: repeat(6, 1fr); }
  @keyframes look-up { from { opacity: 0; transform: translateY(60px) scale(.97); filter: blur(12px); } }
  @keyframes look-down { to { opacity: 0; transform: translateY(40px); filter: blur(8px); } }
}