/* ══════════════════════════════════════════════════════════════
   TRIP — «Дневник одного путешествия». Подарок Маше от папы.
   Эстетика: винтажный травелог · бумага · полароиды · штампы паспорта.
   Уникальная палитра (НЕ как другие сайты KON): тёплый пергамент,
   ночное небо обложки, терракота и латунь. Засечки + рукописный акцент.
   ══════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;
  /* бумага дневника */
  --paper:        #F4ECDD;
  --paper-2:      #EFE5D2;
  --paper-edge:   #E3D6BD;
  --card:         #FCF8EF;        /* поверхность полароида/карточки */
  /* чернила / текст */
  --ink:          #2B2118;
  --ink-soft:     #6A5A47;
  --ink-faint:    #9C8A72;
  /* акценты — терракота и латунь */
  --terra:        #B5573B;
  --terra-deep:   #8C3D27;
  --brass:        #BC9A52;
  --brass-deep:   #9A7A36;
  /* ночное небо обложки */
  --night:        #16242F;
  --night-2:      #233646;
  --thread:       #C9A24B;
  --rad:          4px;            /* почти прямые углы — как фотобумага */
  --serif: 'Playfair Display', Georgia, serif;
  --hand:  'Caveat', 'Comic Sans MS', cursive;
  --sans:  'Manrope', system-ui, sans-serif;

  /* ── ОБЛОЖКА: светлая тема = солнечное радостное утро над морем ── */
  --cover-bg:        radial-gradient(135% 105% at 50% -8%, #BFE0F2 0%, #DCEAEA 34%, #F4E4CB 68%, #F8EEDC 100%);
  --cover-glow:      radial-gradient(ellipse 78% 46% at 50% 4%, rgba(255,228,170,.75), transparent 62%);
  --cover-vignette:  inset 0 -90px 110px -40px rgba(244,232,212,.85);
  --star-opacity:    0;                          /* днём звёзд нет */
  --cover-name:      #3A2A1E;
  --cover-name-shadow: 0 1px 0 rgba(255,255,255,.55);
  --cover-amp:       var(--terra);
  --cover-eyebrow:   var(--terra-deep);
  --cover-title:     #5C4A38;
  --cover-sub:       rgba(92,74,56,.72);
  --cover-count-text:   var(--terra-deep);
  --cover-count-border: rgba(181,87,59,.42);
  --cover-count-bg:     rgba(255,255,255,.42);
  --cover-scroll:    rgba(92,74,56,.78);
}

/* ══════════════ ТЁМНАЯ ТЕМА — инверсия бумаги и шрифтов ══════════════ */
[data-theme="dark"]{
  color-scheme: dark;
  /* «ночная бумага»: тёплый синий сумрак, мягче и теплее (не чёрный) */
  --paper:        #1A2230;
  --paper-2:      #202A3A;
  --paper-edge:   #33405A;
  --card:         #232E40;
  /* чернила инвертированы: светлый текст на тёмном */
  --ink:          #F1E9DA;
  --ink-soft:     #C2CCDD;
  --ink-faint:    #8A94A8;
  /* акценты ярче для контраста на тёмном фоне */
  --terra:        #E6845F;
  --terra-deep:   #D26B49;
  --brass:        #E0BC74;
  --brass-deep:   #C9A24B;
  --thread:       #E0BC74;

  /* ── ОБЛОЖКА: тёмная тема = мягкая тёплая звёздная ночь (не страшная) ── */
  --cover-bg:        radial-gradient(135% 105% at 50% -6%, #34466A 0%, #25324C 42%, #1A2334 74%, #141B29 100%);
  --cover-glow:      radial-gradient(ellipse 80% 48% at 50% 2%, rgba(224,188,116,.30), transparent 64%);
  --cover-vignette:  inset 0 0 150px 30px rgba(8,12,22,.40);
  --star-opacity:    .85;
  --cover-name:      #F8F1E0;
  --cover-name-shadow: 0 2px 26px rgba(0,0,0,.35);
  --cover-amp:       var(--terra);
  --cover-eyebrow:   var(--brass);
  --cover-title:     #ECE0C8;
  --cover-sub:       rgba(236,224,200,.74);
  --cover-count-text:   #F4EAD2;
  --cover-count-border: rgba(224,188,116,.50);
  --cover-count-bg:     rgba(255,255,255,.06);
  --cover-scroll:    rgba(244,234,210,.82);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background-color .45s ease, color .45s ease;
  /* тонкая бумажная текстура из градиентов, без картинок */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(188,154,82,.06), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(181,87,59,.05), transparent 46%);
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img,video{max-width:100%;display:block}

/* ══════════════ ОБЛОЖКА ══════════════ */
.cover{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  overflow:hidden;
  color:var(--cover-title);
  background:var(--cover-bg);
  transition:background .5s ease, color .5s ease;
}
/* звёздное небо — точки через box-shadow на псевдоэлементе */
.cover-sky{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,250,235,.9), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255,250,235,.7), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255,250,235,.6), transparent),
    radial-gradient(1.4px 1.4px at 85% 60%, rgba(255,250,235,.85), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(255,250,235,.5), transparent),
    radial-gradient(1px 1px at 10% 80%, rgba(255,250,235,.6), transparent),
    radial-gradient(1.3px 1.3px at 90% 35%, rgba(255,250,235,.7), transparent),
    radial-gradient(1px 1px at 33% 15%, rgba(255,250,235,.5), transparent);
  opacity:var(--star-opacity);
  transition:opacity .5s ease;
  will-change:transform;
}
.cover-grain{   /* мягкое сияние «солнца/луны» у верхнего края */
  position:absolute;inset:0;pointer-events:none;
  background:var(--cover-glow);
  transition:background .5s ease;
}
.cover-vignette{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:var(--cover-vignette);
  transition:box-shadow .5s ease;
}
.cover-inner{
  position:relative;z-index:2;text-align:center;
  padding:48px 26px;max-width:680px;
  animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

.cover-eyebrow{
  font-family:var(--hand);
  font-size:clamp(20px,5vw,28px);
  color:var(--cover-eyebrow);
  letter-spacing:.02em;
  margin-bottom:18px;
  transform:rotate(-2deg);
}
.cover-names{
  display:flex;align-items:center;justify-content:center;gap:.32em;
  font-family:var(--serif);
  font-size:clamp(40px,12vw,86px);
  font-weight:500;line-height:1;
  letter-spacing:.01em;
  margin-bottom:16px;
  text-shadow:var(--cover-name-shadow);
}
.cover-names .cn{color:var(--cover-name)}
.cover-names .cn-amp{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--cover-amp);font-size:.7em;
  position:relative;top:.04em;
}
.cover-title{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(17px,4vw,26px);
  color:var(--cover-title);line-height:1.3;
  margin-bottom:10px;
}
.cover-sub{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(12px,3vw,15px);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--cover-sub);
  margin-bottom:30px;
}
/* нить-маршрут на обложке */
.cover-route{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:26px;
}
.cover-route .dot{width:7px;height:7px;border-radius:50%;background:var(--thread);box-shadow:0 0 10px var(--thread)}
.cover-route .line{
  width:clamp(40px,16vw,90px);height:1px;
  background:repeating-linear-gradient(90deg,var(--thread) 0 4px,transparent 4px 9px);
  opacity:.8;
}
.cover-route .plane{color:var(--brass);font-size:18px;transform:translateY(-1px)}
.cover-count{
  display:inline-block;
  font-family:var(--hand);font-size:clamp(19px,4.6vw,26px);
  color:var(--cover-count-text);
  border:1px solid var(--cover-count-border);
  border-radius:40px;padding:6px 22px;
  background:var(--cover-count-bg);
  backdrop-filter:blur(2px);
}
.cover-scroll{
  position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--cover-scroll);
  font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
}
.cover-scroll .chev{font-size:22px;animation:floaty 2.2s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ══════════════ ПЛЕЕР ══════════════ */
.player{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:13px;
  padding:9px 18px;
  background:linear-gradient(180deg, var(--paper), var(--paper-2));  /* непрозрачно: без backdrop-blur — плавный скролл на десктопе */
  border-bottom:1px solid var(--paper-edge);
  box-shadow:0 6px 22px rgba(43,33,24,.08);
}
.player-btn{
  flex:none;width:42px;height:42px;border-radius:50%;
  border:none;cursor:pointer;
  background:radial-gradient(circle at 35% 30%, var(--terra) 0%, var(--terra-deep) 100%);
  color:#F8F1E0;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(140,61,39,.4), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .18s;
}
.player-btn:active{transform:scale(.92)}
.player-icon{margin-left:1px}
.player-btn.playing .player-icon{margin-left:0}
.player-btn.playing{animation:vinyl 6s linear infinite}
@keyframes vinyl{to{box-shadow:0 4px 14px rgba(140,61,39,.4), inset 0 1px 0 rgba(255,255,255,.25)}}
.player-meta{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.player-title{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink);white-space:nowrap}
.player-sub{font-size:11px;color:var(--ink-faint);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-track{flex:1;height:3px;background:var(--paper-edge);border-radius:3px;overflow:hidden;min-width:30px}
.player-fill{height:100%;width:0;background:linear-gradient(90deg,var(--terra),var(--brass));border-radius:3px}
.player-time{font-size:12px;color:var(--ink-soft);min-width:34px;text-align:right;font-variant-numeric:tabular-nums}

/* ══════════════ ЛЕНТА / КНИГА ══════════════ */
.book{
  position:relative;
  max-width:720px;margin:0 auto;
  padding:60px 20px 40px;
}
/* «нить путешествия» — пунктирная линия вдоль таймлайна */
.thread{
  position:absolute;top:40px;bottom:80px;
  left:42px;width:2px;
  background:repeating-linear-gradient(180deg, var(--thread) 0 6px, transparent 6px 14px);
  opacity:.55;
}
@media (max-width:600px){ .thread{left:30px} }

/* день */
.day{position:relative;margin-bottom:54px;padding-left:64px}
@media (max-width:600px){ .day{padding-left:50px} }

.day-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;position:relative}
/* штамп даты — печать загранпаспорта */
.stamp{
  position:absolute;left:-64px;top:-4px;
  width:62px;height:62px;border-radius:50%;
  border:2px solid var(--terra);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--terra);
  background:var(--paper);
  box-shadow:0 0 0 2px var(--paper), 0 2px 6px rgba(140,61,39,.15);
  transform:rotate(-8deg);
  font-family:var(--sans);
  line-height:1;
}
@media (max-width:600px){ .stamp{left:-50px;width:54px;height:54px} }
.stamp::before{
  content:'';position:absolute;inset:4px;border-radius:50%;
  border:1px dashed rgba(181,87,59,.45);
}
.stamp-day{font-size:21px;font-weight:600;letter-spacing:-.02em}
.stamp-mon{font-size:9px;font-weight:600;letter-spacing:.14em;margin-top:1px}
.stamp-year{font-size:8px;color:var(--brass-deep);letter-spacing:.06em;margin-top:1px}

.day-title{display:flex;flex-direction:column}
.day-name{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(20px,5vw,27px);color:var(--terra-deep);
  text-transform:capitalize;line-height:1.1;
}
.day-sub{font-family:var(--hand);font-size:16px;color:var(--ink-faint);margin-top:1px}

.day-photos{display:flex;flex-direction:column;gap:30px}

/* ══════════════ ПОЛАРОИД ══════════════ */
.polaroid{
  background:var(--card);
  padding:12px 12px 14px;
  border-radius:var(--rad);
  box-shadow:
    0 1px 1px rgba(43,33,24,.10),
    0 10px 26px rgba(43,33,24,.16);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
  position:relative;
  width:100%;
  max-width:380px;          /* карточка-память компактная: портрет с телефона не растягивается во весь экран */
  margin-inline:auto;
}
.polaroid::after{ /* «скотч» сверху */
  content:'';position:absolute;top:-9px;left:50%;
  width:74px;height:20px;transform:translateX(-50%) rotate(-2deg);
  background:linear-gradient(180deg, rgba(188,154,82,.28), rgba(188,154,82,.16));
  border:1px solid rgba(188,154,82,.25);
  border-radius:2px;
}
.tilt-l{transform:rotate(-1.4deg)}
.tilt-r{transform:rotate(1.4deg)}
.tilt-0{transform:rotate(0)}
.polaroid:hover{transform:rotate(0) translateY(-4px) scale(1.012);box-shadow:0 2px 2px rgba(43,33,24,.12),0 20px 44px rgba(140,61,39,.22)}

/* медиа-область держит реальное соотношение кадра (aspect-ratio задаётся инлайн из m.w/m.h) */
.ph-media{
  position:relative; width:100%; border-radius:2px; overflow:hidden;
  background:#1a1712;            /* фон виден только под закруглениями — не как чёрный бокс */
}
/* медиа ТОЧНО заполняет рамку своих пропорций (aspect-ratio инлайн из m.w/m.h) — без чёрных полей */
.ph-media img,
.ph-media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.ph-media.is-video{background:#1a1712}
.ph-media.is-video.no-poster{
  /* деликатный плейсхолдер вместо чёрного бокса, когда постера нет */
  background:
    radial-gradient(120% 120% at 50% 38%, rgba(188,154,82,.16), transparent 60%),
    linear-gradient(160deg, #2a2722, #17150f);
}
.ph-media video{background:transparent}

/* кнопка-плей поверх постера */
.ph-play{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  border:none;background:rgba(20,16,12,.10);cursor:pointer;
  transition:background .25s, opacity .25s;
}
.ph-play:hover{background:rgba(20,16,12,.04)}
.ph-play-disc{
  width:66px;height:66px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 36% 30%, var(--terra) 0%, var(--terra-deep) 100%);
  color:#F8F1E0;
  box-shadow:0 6px 20px rgba(140,61,39,.5), inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 6px rgba(248,241,224,.18);
  transition:transform .2s;
}
.ph-play:hover .ph-play-disc{transform:scale(1.07)}
.ph-play:active .ph-play-disc{transform:scale(.94)}
.ph-play-tri{font-size:24px;margin-left:4px;line-height:1}
/* подпись «видео» снизу, чтобы понятно что под постером ролик */
.ph-media.is-video::after{
  content:'видео';position:absolute;bottom:8px;right:9px;z-index:2;
  font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(248,241,224,.92);background:rgba(20,16,12,.42);
  padding:3px 8px;border-radius:20px;backdrop-filter:blur(2px);
  transition:opacity .25s;pointer-events:none;
}
/* когда видео запущено — убираем оверлей-кнопку и метку, показываем родные controls */
.ph-media.is-playing .ph-play{opacity:0;pointer-events:none}
.ph-media.is-playing::after{opacity:0}
.ph-media.is-playing video{object-fit:contain;background:#0c0c0c}

.ph-cap{padding:12px 6px 2px;text-align:center}
.ph-loc{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--terra);margin-bottom:7px;
}
.ph-loc .pin{font-size:8px;position:relative;top:-1px}
.ph-caption{
  font-family:var(--hand);
  font-size:clamp(20px,5vw,25px);
  line-height:1.3;color:var(--ink);
}

/* ══════════════ ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ══════════════ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .cover-scroll .chev,.player-btn.playing{animation:none}
}

/* ══════════════ ПУСТО ══════════════ */
.empty-state{padding:70px 20px;display:flex;justify-content:center}
.empty-frame{
  position:relative;text-align:center;max-width:380px;
  padding:46px 30px;background:var(--card);border-radius:var(--rad);
  box-shadow:0 10px 30px rgba(43,33,24,.14);
}
.empty-corner{position:absolute;width:18px;height:18px;border:2px solid var(--brass)}
.empty-corner.tl{top:10px;left:10px;border-right:0;border-bottom:0}
.empty-corner.tr{top:10px;right:10px;border-left:0;border-bottom:0}
.empty-corner.bl{bottom:10px;left:10px;border-right:0;border-top:0}
.empty-corner.br{bottom:10px;right:10px;border-left:0;border-top:0}
.empty-icon{font-size:34px;color:var(--brass);margin-bottom:14px}
.empty-hand{font-family:var(--hand);font-size:27px;color:var(--terra);line-height:1.1}
.empty-state p{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-soft);margin-top:4px}

/* ══════════════ ЗАКРЫТИЕ ══════════════ */
.closing{
  text-align:center;padding:56px 24px 80px;
  background:linear-gradient(180deg, transparent, var(--paper-2));
  border-top:1px solid var(--paper-edge);margin-top:20px;
}
.closing-heart{font-size:26px;color:var(--terra);animation:beat 2.2s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}45%{transform:scale(1.18)}}
.closing-hand{font-family:var(--hand);font-size:clamp(24px,6vw,32px);color:var(--ink-soft);margin:6px 0 12px}
.closing-sign{font-family:var(--serif);font-style:italic;font-size:clamp(22px,6vw,30px);color:var(--terra-deep)}

/* ══════════════ ADMIN PANEL (сохранён контракт site.js) ══════════════ */
.admin-fab{
  position:fixed;bottom:max(22px,env(safe-area-inset-bottom));right:22px;z-index:200;
  width:52px;height:52px;border-radius:50%;
  background:var(--terra);color:#fff;border:none;cursor:pointer;font-size:22px;
  box-shadow:0 6px 18px rgba(140,61,39,.45);
  display:flex;align-items:center;justify-content:center;transition:transform .15s;
}
.admin-fab:hover{transform:scale(1.08)}
.admin-panel{position:fixed;inset:0;z-index:300;background:rgba(22,20,18,.55);display:none;align-items:flex-end}
.admin-panel.open{display:flex}
.admin-sheet{
  width:100%;max-width:600px;margin:0 auto;background:var(--paper);
  border-radius:20px 20px 0 0;padding:28px 24px calc(40px + env(safe-area-inset-bottom));
  max-height:92svh;overflow-y:auto;animation:slideUp .25s ease both;
}
@keyframes slideUp{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.admin-sheet h2{font-family:var(--serif);font-size:24px;margin-bottom:20px;color:var(--terra-deep)}
.aform{display:grid;gap:10px}
.aform input,.aform textarea,.aform select{
  width:100%;border:1px solid var(--paper-edge);border-radius:10px;
  padding:11px 14px;font-size:15px;font-family:inherit;color:var(--ink);
  background:var(--card);transition:.15s;
}
.aform input:focus,.aform textarea:focus{outline:none;border-color:var(--terra);box-shadow:0 0 0 3px rgba(181,87,59,.14)}
.aform textarea{min-height:90px;resize:vertical}
.aform label{font-size:13px;color:var(--ink-soft);margin-bottom:2px;display:block}
.file-drop{border:2px dashed var(--paper-edge);border-radius:12px;padding:28px;text-align:center;cursor:pointer;color:var(--ink-soft);transition:.15s}
.file-drop:hover,.file-drop.dragover{border-color:var(--terra);background:rgba(181,87,59,.07)}
.file-drop input{display:none}
.file-preview{display:none;max-width:100%;border-radius:8px;margin-top:8px}
.btn-rose{background:var(--terra);color:#fff;border:none;border-radius:10px;padding:12px 24px;font-size:15px;cursor:pointer;font-family:inherit;transition:.15s;width:100%}
.btn-rose:hover{background:var(--terra-deep)}
.btn-outline{background:none;border:1px solid var(--paper-edge);border-radius:10px;padding:10px 20px;font-size:14px;cursor:pointer;font-family:inherit;color:var(--ink-soft);transition:.15s}
.btn-outline:hover{border-color:var(--terra);color:var(--terra)}
.admin-moments-list{display:grid;gap:10px;margin-top:16px}
.admin-moment-item{background:var(--card);border:1px solid var(--paper-edge);border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px}
.admin-moment-item .ait{flex:1;font-size:14px}
.admin-moment-item .adate{font-size:12px;color:var(--ink-faint)}
.admin-moment-item .adel{color:var(--terra);cursor:pointer;font-size:18px;border:none;background:none}
.admin-moment-item .aedit{color:var(--brass-deep);cursor:pointer;font-size:16px;border:none;background:none}

/* ══════════════ LOGIN ══════════════ */
.login-wrap{min-height:100svh;display:flex;align-items:center;justify-content:center;background:var(--paper)}
.login-box{background:var(--card);border:1px solid var(--paper-edge);border-radius:var(--rad);padding:40px 36px;width:100%;max-width:360px;text-align:center;box-shadow:0 14px 40px rgba(43,33,24,.16)}
.login-box h1{font-family:var(--serif);font-size:28px;color:var(--terra-deep);margin-bottom:8px}
.login-box p{font-size:14px;color:var(--ink-soft);margin-bottom:24px}
.login-box input{width:100%;border:1px solid var(--paper-edge);border-radius:10px;padding:12px 16px;font-size:15px;font-family:inherit;color:var(--ink);background:var(--paper);margin-bottom:12px}
.login-box input:focus{outline:none;border-color:var(--terra)}
.login-err{color:var(--terra);font-size:13px;min-height:18px}

/* ══════════════ АДАПТИВ ══════════════ */
@media (max-width:600px){
  .book{padding:46px 14px 30px}
  .day{margin-bottom:44px}
  .day-photos{gap:24px}
  .admin-sheet{border-radius:16px 16px 0 0}
}
@media (max-width:380px){
  .player-meta{display:none}
}

/* ══════════════ ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ ══════════════ */
/* плавная смена цвета поверхностей при переключении темы */
.player,.polaroid,.stamp,.empty-frame,.login-box,.closing,
.admin-sheet,.admin-moment-item,.aform input,.aform textarea,.aform select{
  transition:background-color .45s ease, border-color .45s ease, color .45s ease;
}
.theme-toggle{
  position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;z-index:120;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(188,154,82,.5);
  background:rgba(20,16,12,.32);
  color:#F2E7CF;font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  backdrop-filter:blur(4px);
  transition:transform .18s ease, background-color .25s ease, color .25s ease;
}
.theme-toggle:hover{transform:scale(1.08)}
.theme-toggle:active{transform:scale(.92)}
/* когда обложка прокручена и под кнопкой бумага — кнопка читается на любом фоне */
[data-theme="dark"] .theme-toggle{
  background:rgba(40,34,26,.55);
  border-color:rgba(210,174,99,.45);
}
@media (prefers-reduced-motion:reduce){
  body,.player,.polaroid,.stamp,.empty-frame,.login-box,.closing,
  .admin-sheet,.admin-moment-item,.theme-toggle{transition:none}
}