/* Быстрый ввод, карточка проекта, покупки и гуляющий питомец */

.quick {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0 12px; margin-bottom: 16px; color: var(--faint);
}
.quick:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.quick svg { width: 18px; height: 18px; flex: 0 0 auto; }
.quick input { border: 0; background: transparent; min-height: 44px; padding: 0; outline: none; }
.quick input:focus-visible { outline: none; }
.col .quick { margin-bottom: 0; padding: 0 10px; }
.col .quick input { min-height: 38px; }

a.kpi { color: var(--text); }
a.kpi:hover { text-decoration: none; border-color: var(--border-strong); }

.btn.xs { height: 24px; padding: 0 8px; font-size: 12px; gap: 4px; }
.btn.xs svg { width: 13px; height: 13px; }
.pcard .next-task { margin-top: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Вкладки статусов (телефон) ---------- */
.tabs { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: var(--radius); margin-bottom: 12px; }
.tabs button {
  flex: 1; font: inherit; font-size: 13px; font-weight: 500;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted);
  height: 34px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.tabs button span { font-size: 11.5px; color: var(--faint); }
.tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* ---------- Карточка проекта ---------- */
.narrow { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.narrow > .crumbs { margin-bottom: -8px; }
.project-title { word-break: break-word; font-size: 24px; }
.editable { cursor: text; border-radius: 4px; }
.editable:hover { background: var(--surface-2); box-shadow: 0 0 0 4px var(--surface-2); }

.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.stepper button {
  font: inherit; font-size: 13px; font-weight: 500;
  height: 36px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted);
  cursor: pointer; border-radius: var(--radius-sm);
}
.stepper button:hover { border-color: var(--accent); color: var(--accent); }
.stepper button.past { background: var(--surface-2); color: var(--text); }
.stepper button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.meta-row { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.meta-row label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.meta-row select, .meta-row input { width: auto; min-height: 32px; padding: 4px 8px; font-size: 13px; }

.note { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; }
.note.warn { background: var(--warn-weak); color: var(--warn); }

.rows .txt.editable { padding: 2px 4px; margin: -2px -4px; }
.rows li.editing { background: var(--accent-weak); }
.inline-edit { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; width: 100%; }
.inline-edit input[name=title] { flex: 1 1 200px; }
.inline-edit input[type=date] { flex: 0 0 150px; }
.qty { color: var(--muted); font-size: 12.5px; margin-left: 4px; }
.add-row .qty-in, .add-card .qty-in { flex: 0 0 110px; }
.add-row .date-opt { flex: 0 0 150px; }

details.more > summary { list-style: none; cursor: pointer; border-bottom: 0; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary h2::after { content: " ▾"; color: var(--faint); }
details.more[open] > summary { border-bottom: 1px solid var(--border); }

/* ---------- Покупки ---------- */
.add-card { display: flex; gap: 8px; padding: 10px; flex-wrap: wrap; }
.add-card input[name=name] { flex: 1 1 180px; }
.add-card select { flex: 0 1 220px; width: auto; }

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }

/* ---------- Чипы и выбор вариантов ---------- */
.chip {
  flex: 0 0 auto; height: 32px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 500;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.chip.on, .chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip input, .seg-pick input { position: absolute; opacity: 0; pointer-events: none; }
.chip-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.field-label { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; margin-bottom: 6px; }
.seg-pick { display: flex; background: var(--surface-2); padding: 3px; border-radius: var(--radius-sm); gap: 3px; }
.seg-pick label {
  flex: 1; display: flex; align-items: center; justify-content: center;
  height: 32px; border-radius: 6px; cursor: pointer; font-weight: 500; color: var(--muted);
}
.seg-pick label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* ---------- Кнопка «назад» ---------- */
.back-btn {
  display: inline-flex; align-items: center; gap: 2px;
  height: 32px; padding: 0 6px 0 0; margin-left: -4px;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--accent);
  background: none; border: 0; cursor: pointer; border-radius: var(--radius-sm);
}
.back-btn svg { width: 20px; height: 20px; }
.back-btn:hover { background: var(--accent-weak); }

/* ---------- Направления в настройках ---------- */
.cat-list li { gap: 10px; }
.cat-color {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; padding: 0;
}
.cat-name { flex: 1; min-width: 0; border-color: transparent; background: transparent; padding-left: 6px; }
.cat-name:hover { border-color: var(--border); }
.cat-name:focus { border-color: var(--accent); background: var(--surface); }

/* ---------- Кнопка «+» на телефоне ---------- */
.fab { display: none; }

/* ---------- Картиночный питомец (неко) ---------- */
.pet-img { image-rendering: auto; object-fit: contain; display: block; -webkit-user-drag: none; user-select: none; }
.pet-img.sil { filter: brightness(0) opacity(.22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pet-img.sil { filter: brightness(0) invert(1) opacity(.16); } }

/* ---------- Гуляющий питомец ---------- */
#pet-roam {
  position: fixed; left: 0; bottom: 6px; z-index: 35;
  width: var(--roam-size, 48px); height: var(--roam-size, 48px);
  pointer-events: none;
  will-change: transform;
}
#pet-roam[hidden] { display: none; }
#pet-roam { transition: opacity .2s; }
#pet-roam.away { opacity: 0; }
#pet-roam.away .roam-body, #pet-roam.away .roam-bubble { pointer-events: none; }
.roam-body {
  pointer-events: auto; cursor: pointer; display: block; position: relative;
  width: var(--roam-size, 48px); height: var(--roam-size, 48px); padding: 0; border: 0; background: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
}
.roam-body .pet-svg { animation: none; }

/* Слои: разворот → движение тела (дыхание, шаг, прыжок) → кадр.
   Всё вращается и сжимается от ног, чтобы фигура «стояла» на земле. */
.roam-flip, .roam-anim { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
.roam-flip { transition: transform .24s cubic-bezier(.4, 0, .2, 1); }
#pet-roam.left .roam-flip { transform: scaleX(-1); }

/* Дыхание в покое */
.roam-anim { animation: roam-breathe 2.8s ease-in-out infinite; }
@keyframes roam-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.985, 1.025); } }

/* Походка: пружинка, покачивание и лёгкое сжатие на каждом шаге */
#pet-roam.walking .roam-anim { animation: roam-walk .44s ease-in-out infinite; }
@keyframes roam-walk {
  0%   { transform: translateY(0)    rotate(-3deg) scale(1.03, .97); }
  25%  { transform: translateY(-5%)  rotate(0)     scale(.98, 1.03); }
  50%  { transform: translateY(0)    rotate(3deg)  scale(1.03, .97); }
  75%  { transform: translateY(-5%)  rotate(0)     scale(.98, 1.03); }
  100% { transform: translateY(0)    rotate(-3deg) scale(1.03, .97); }
}

/* Радость: присела → прыжок с вытягиванием → приземление с пружинкой */
#pet-roam.cheer .roam-anim { animation: roam-cheer 1s cubic-bezier(.3, .7, .4, 1); }
@keyframes roam-cheer {
  0%   { transform: translateY(0)    scale(1, 1); }
  14%  { transform: translateY(0)    scale(1.14, .84); }
  38%  { transform: translateY(-42%) scale(.9, 1.12); }
  56%  { transform: translateY(-42%) scale(1, 1); }
  76%  { transform: translateY(0)    scale(1.12, .88); }
  88%  { transform: translateY(0)    scale(.97, 1.03); }
  100% { transform: translateY(0)    scale(1, 1); }
}

/* Сон: медленное глубокое дыхание */
#pet-roam.mood-sleep .roam-anim { animation: roam-sleep 3.8s ease-in-out infinite; }
@keyframes roam-sleep { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .96); } }

/* Яйцо: покачивается от основания */
#pet-roam.stage-0 .roam-anim { animation: wobble 2.6s ease-in-out infinite; }
@keyframes wobble { 0%, 76%, 100% { transform: rotate(0); } 82% { transform: rotate(-9deg) scale(1.02, .98); } 88% { transform: rotate(7deg); } 94% { transform: rotate(-4deg); } }

/* Смена позы — короткий «щелчок» вместо резкой подмены */
.roam-anim.pop { animation: roam-pop .22s ease-out; }
@keyframes roam-pop { 40% { transform: scale(1.06, .95); } }

/* Тень под ногами: меньше и бледнее, когда питомец в воздухе */
.roam-shadow {
  position: absolute; left: 22%; right: 22%; bottom: -3px; height: 7px;
  border-radius: 50%; background: rgba(0, 0, 0, .28); filter: blur(1.5px);
  pointer-events: none;
}
#pet-roam.walking .roam-shadow { animation: shadow-walk .44s ease-in-out infinite; }
@keyframes shadow-walk { 25%, 75% { transform: scaleX(.86); opacity: .8; } }
#pet-roam.cheer .roam-shadow { animation: shadow-cheer 1s cubic-bezier(.3, .7, .4, 1); }
@keyframes shadow-cheer { 14% { transform: scaleX(1.15); } 38%, 56% { transform: scaleX(.5); opacity: .45; } 76% { transform: scaleX(1.12); } }

/* Частицы радости: сердечки и звёздочки вылетают вверх */
.roam-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.roam-fx span {
  position: absolute; left: 50%; bottom: 55%;
  font-size: var(--fs, 13px); line-height: 1; font-weight: 700;
  animation: fx-rise var(--t, 1.1s) ease-out forwards;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
@keyframes fx-rise {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.5) rotate(0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, -52px)) scale(1.1) rotate(var(--rot, 0deg)); }
}

/* «z» всплывают над спящим питомцем */
.roam-zzz { position: absolute; left: 62%; bottom: 70%; pointer-events: none; display: none; }
#pet-roam.mood-sleep .roam-zzz { display: block; }
.roam-zzz span {
  position: absolute; left: 0; bottom: 0; font-weight: 700; color: var(--muted); opacity: 0;
  animation: zz-float 3.6s ease-in-out infinite;
}
.roam-zzz span:nth-child(1) { font-size: 10px; }
.roam-zzz span:nth-child(2) { font-size: 13px; animation-delay: 1.2s; }
.roam-zzz span:nth-child(3) { font-size: 16px; animation-delay: 2.4s; }
@keyframes zz-float {
  0%   { opacity: 0; transform: translate(0, 0); }
  20%  { opacity: .9; }
  100% { opacity: 0; transform: translate(14px, -30px); }
}

.roam-bubble {
  position: absolute; bottom: calc(var(--roam-size, 48px) + 8px); left: -18px;
  width: max-content; max-width: 230px;
  pointer-events: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg);
  padding: 8px 10px; font-size: 12.5px; line-height: 1.4;
  animation: fade .15s ease-out;
}
.roam-bubble[hidden] { display: none; }
.roam-bubble::after {
  content: ""; position: absolute; left: 36px; bottom: -6px;
  width: 10px; height: 10px; background: var(--surface);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
.rb-sub { color: var(--muted); margin-top: 2px; }
.rb-heart { color: #e0474c; }
.rb-link { font: inherit; font-size: 12px; color: var(--accent); background: none; border: 0; padding: 0; margin-top: 6px; cursor: pointer; }

@media (max-width: 900px) {
  #pet-roam { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 16px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 36;
    width: 52px; height: 52px; border-radius: 16px; border: 0;
    background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-lg); cursor: pointer;
  }
  .fab[hidden] { display: none; }
  .fab svg { width: 24px; height: 24px; }
  .toasts { bottom: calc(136px + env(safe-area-inset-bottom)); }
  .stepper button { font-size: 12px; }
}
@media (max-width: 600px) {
  .meta-row label { flex: 1 1 100%; justify-content: space-between; }
  .meta-row select, .meta-row input { flex: 0 1 60%; }
  .add-row .date-opt { flex: 1 1 100%; }
  .add-card select { flex: 1 1 100%; }
  .project-title { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Меньше движения: без дыхания, покачиваний и прыжков, но питомец всё равно ходит */
  .roam-anim, #pet-roam.walking .roam-anim, #pet-roam.cheer .roam-anim, #pet-roam.mood-sleep .roam-anim,
  #pet-roam.stage-0 .roam-anim, .roam-shadow, .roam-anim.pop { animation: none !important; }
  .roam-flip { transition: none; }
}

/* ---------- Экран ввода PIN ---------- */
body.pin-locked { overflow: hidden; }
#pin-screen {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--bg);
}
.pin-box { width: 100%; max-width: 300px; text-align: center; }
.pin-box img { margin: 0 auto; }
.pin-title { font-size: 20px; font-weight: 700; margin-top: 12px; }
.pin-sub { color: var(--muted); margin-top: 4px; font-size: 15px; }
.pin-dots { display: flex; gap: 16px; justify-content: center; margin: 26px 0 10px; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); transition: background .1s, border-color .1s; }
.pin-dots i.on { background: var(--accent); border-color: var(--accent); }
.pin-msg { min-height: 22px; color: var(--danger); font-size: 14px; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 22px; justify-items: center; margin-top: 16px; }
.pin-pad button {
  width: 74px; height: 74px; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 28px; font-weight: 500;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pin-pad button:active { background: var(--accent-weak); transform: scale(.95); }
.pin-pad button[data-k="⌫"] { background: transparent; border-color: transparent; font-size: 24px; color: var(--muted); }
.shake { animation: pin-shake .35s; }
@keyframes pin-shake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }

/* Вход ключом доступа */
.key-box .key-btn { width: 100%; height: 48px; justify-content: center; font-size: 16px; margin-top: 18px; }
.key-box .pin-sub { max-width: 280px; margin: 0 auto; line-height: 1.4; }
.key-note { margin-top: 18px; font-size: 14px; color: var(--muted); line-height: 1.5; max-width: 280px; }
.key-url { width: 100%; font-size: 13px; }