/* =========================================
   VMEDIA.CLUB — Нежное барокко v11
   Бежевый пергамент · мягкое небо · тонкое золото
   ========================================= */

:root {
  --gold:          #C4A878;
  /* Светлый беж — только этот тон, без цветных бликов */
  --parch:         #FAF8F4;
  --parch-light:   #FDFBF7;
  --parch-deep:    #F5F0E8;
  --parch-shadow:  #C8BCA8;
  --parch-highlight: #FEFCF9;
  --parch-line:    #E8E2D8;

  --sky-whisper:   #B8D4E8;
  --sky-soft:      #C8DCEC;
  --sky-mist:      #DCE8F2;
  --sky-deep:      #7A9CB4;

  --gold-fine:     #D4C4A0;
  --gold-hair:     #E8DCC8;
  --gold-glow:     #F0E8D4;

  --dust-rose:     #E8D4D0;
  --dust-lavender: #E4DCE8;
  --chocolate:     #4A3C32;
  --ink-soft:      #5C5048;
}

/* ---- Фон: реальная смятая бумага (фото-референс), не SVG-каша ---- */
html {
  min-height: 100%;
  background-color: #F5F2EC;
  background-image: url('../img/crumpled-paper.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body {
  background: transparent;
}

body::before,
body::after,
.paper-crumple-max {
  display: none !important;
}

/* Рюши на фоне отключены */
.baroque-backdrop .bb-ruffle-h,
.baroque-backdrop .bb-ruffle-v,
.baroque-edge-frame,
.bef-ruffle {
  display: none !important;
}

/* ---- Узоры на пергаменте (baroque-patterns.js) ---- */
.bb-patterns {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.12;
  filter: sepia(0.3) saturate(0.2);
}

.bb-patterns > div {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  left: -20%;
  top: -20%;
}

.bb-damask {
  opacity: 0.28;
  background-size: 110px 110px;
  animation: bbPatternDrift 90s linear infinite;
}

.bb-fleur {
  opacity: 0.1;
  background-size: 95px 95px;
  transform: rotate(12deg);
  animation: bbPatternDrift2 120s linear infinite reverse;
}

.bb-lace {
  opacity: 0.22;
  background-size: 72px 72px;
  animation: bbPatternDrift 70s linear infinite reverse;
}

.bb-vine-pattern {
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23C4A878' stroke-width='1' opacity='1'%3E%3Cpath d='M0,80 Q40,40 80,80 Q120,120 160,80'/%3E%3Cpath d='M80,0 Q120,40 80,80 Q40,120 80,160'/%3E%3Cpath d='M20,20 Q80,60 140,140'/%3E%3Cpath d='M140,20 Q80,60 20,140'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.bb-dot-pattern {
  opacity: 0.35;
  background-image: radial-gradient(circle, var(--gold) 0.9px, transparent 0.9px);
  background-size: 20px 20px;
}

@keyframes bbPatternDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(40px, 30px); }
}
@keyframes bbPatternDrift2 {
  0%   { transform: rotate(12deg) translate(0, 0); }
  100% { transform: rotate(12deg) translate(-30px, 40px); }
}

/* ---- Лилии ---- */
.baroque-backdrop .bb-lily {
  position: absolute;
  pointer-events: none;
  opacity: 0.38;
  filter: drop-shadow(0 6px 16px rgba(180, 140, 160, 0.35));
}

.baroque-backdrop .bb-lily-inner {
  animation: bbLilySway 11s ease-in-out infinite;
  transform-origin: center bottom;
}

.baroque-backdrop .bb-lily svg {
  width: 100%;
  height: auto;
  display: block;
}

.baroque-backdrop .bb-lily:nth-child(odd)  { animation-duration: 13s; animation-name: bbLilySway2; }
.baroque-backdrop .bb-lily:nth-child(3n)   { opacity: 0.32; }
.baroque-backdrop .bb-lily:nth-child(5n)   { opacity: 0.42; }

.baroque-backdrop .bb-lily-cluster {
  position: absolute;
  width: min(28vw, 200px);
  height: min(32vw, 240px);
  pointer-events: none;
}

@keyframes bbLilySway {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-12px) scale(1.02); }
}
@keyframes bbLilySway2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}

/* Падающие лепестки */
.bb-petal-drift {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 50% 50% 50% 0;
  opacity: 0;
  box-shadow: 0 1px 3px rgba(180, 160, 140, 0.2);
  animation: bbPetalFall linear forwards;
}

@keyframes bbPetalFall {
  0%   { opacity: 0; transform: translateY(-8vh) rotate(0deg); }
  8%   { opacity: 0.75; }
  92%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(108vh) rotate(720deg); }
}

/* ---- Фоновый слой (baroque-bg.js) — завитки и рюши ---- */
.baroque-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.baroque-backdrop .bb-scroll {
  position: absolute;
  opacity: 0.52;
  animation: bbBob 14s ease-in-out infinite;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(212, 196, 160, 0.4));
}
.baroque-backdrop .bb-scroll:nth-child(odd)  { animation-name: bbBob2; animation-duration: 17s; }
.baroque-backdrop .bb-scroll:nth-child(4n)   { animation-duration: 20s; opacity: 0.44; }
.baroque-backdrop .bb-scroll:nth-child(7n)   { opacity: 0.62; }

.baroque-backdrop .bb-flourish {
  position: absolute;
  width: min(32vw, 240px);
  height: min(32vw, 240px);
  opacity: 0.58;
  pointer-events: none;
  animation: bbBob 22s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(212, 196, 160, 0.35));
}
.baroque-backdrop .bb-fc-tl { top: 4%;  left: 0;   transform: rotate(0deg); }
.baroque-backdrop .bb-fc-tr { top: 4%;  right: 0;  left: auto; transform: scaleX(-1); }
.baroque-backdrop .bb-fc-bl { bottom: 6%; left: 0;  top: auto; transform: scaleY(-1); }
.baroque-backdrop .bb-fc-br { bottom: 6%; right: 0; left: auto; top: auto; transform: scale(-1); }

.baroque-backdrop .bb-ruffle-h {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(22px * var(--ruffle-scale, 1));
  background-image: radial-gradient(
    circle at calc(11px * var(--ruffle-scale, 1)) 0,
    var(--gold-glow) calc(10px * var(--ruffle-scale, 1)),
    transparent calc(10.5px * var(--ruffle-scale, 1))
  );
  background-size: calc(22px * var(--ruffle-scale, 1)) calc(22px * var(--ruffle-scale, 1));
  background-repeat: repeat-x;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(212, 196, 160, 0.55));
}

.baroque-backdrop .bb-ruffle-v {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  background-image: radial-gradient(
    circle at 0 calc(11px * var(--ruffle-scale, 1)),
    var(--gold-glow) calc(10px * var(--ruffle-scale, 1)),
    transparent calc(10.5px * var(--ruffle-scale, 1))
  );
  background-size: calc(22px * var(--ruffle-scale, 1)) calc(22px * var(--ruffle-scale, 1));
  background-repeat: repeat-y;
  pointer-events: none;
}
.baroque-backdrop .bb-ruffle-v-left  { left: 0; }
.baroque-backdrop .bb-ruffle-v-right { right: 0; transform: scaleX(-1); }

.baroque-backdrop .bb-ribbon {
  position: absolute;
  height: 3px;
  opacity: 0.58;
  animation: bbRibbon 20s ease-in-out infinite;
}
.baroque-backdrop .bb-gem {
  position: absolute;
  opacity: 0.55;
  animation: bbFloat 9s ease-in-out infinite;
  font-family: var(--font-display);
  user-select: none;
  text-shadow: 0 1px 4px rgba(212, 196, 160, 0.5);
}
.baroque-backdrop .bb-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.06;
  animation: bbBlob 24s ease-in-out infinite;
}
.baroque-backdrop .bb-vine {
  position: absolute;
  width: 40px;
  opacity: 0.48;
  animation: bbBob2 16s ease-in-out infinite;
  filter: drop-shadow(0 1px 2px rgba(212, 196, 160, 0.35));
}
.baroque-backdrop .bb-vine svg {
  width: 100%;
  height: 100%;
}

@keyframes bbBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(3deg); }
}
@keyframes bbBob2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(-4deg); }
}
@keyframes bbRibbon {
  0%, 100% { opacity: 0.45; transform: scaleX(0.94); }
  50%      { opacity: 0.72; transform: scaleX(1); }
}
@keyframes bbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-14px) scale(1.06); }
}
@keyframes bbBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(10px, -8px) scale(1.06); }
}

/* Рамка экрана — рюши сверху/снизу */
.baroque-edge-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.bef-ruffle {
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  opacity: 0.85;
  background-image: radial-gradient(
    circle at 14px 14px,
    var(--gold-light) 12px,
    transparent 12.5px
  );
  background-size: 28px 28px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 2px 4px rgba(212, 196, 160, 0.4));
}
.bef-top    { top: 58px; }
.bef-bottom {
  bottom: 0;
  transform: scaleY(-1);
  opacity: 0.75;
}

/* Рюши на карточках и рамках */
.ruffle-bottom,
.card-ruffle-bottom {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -11px;
  height: 22px;
  background-image: radial-gradient(
    circle at 11px 11px,
    var(--gold-glow) 10px,
    transparent 10.5px
  );
  background-size: 22px 22px;
  background-repeat: repeat-x;
  opacity: 0.75;
  pointer-events: none;
  z-index: 2;
}

.ruffle-top,
.card-ruffle-top {
  position: absolute;
  left: 8%;
  right: 8%;
  top: -10px;
  height: 20px;
  background-image: radial-gradient(
    circle at 10px 10px,
    rgba(255, 252, 248, 0.95) 9px,
    transparent 9.5px
  );
  background-size: 20px 20px;
  background-repeat: repeat-x;
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
}

.baroque-frame > .ruffle-bottom {
  bottom: -12px;
  opacity: 0.8;
}

.cat-card .card-ruffle-top,
.link-card .card-ruffle-top {
  top: -8px;
  opacity: 0.7;
}

.cat-card .card-ruffle-bottom,
.link-card .card-ruffle-bottom {
  bottom: -9px;
  opacity: 0.65;
}

/* ---- Меню: нежно-голубое, как на мудборде ---- */
.navbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 42%),
    linear-gradient(
      118deg,
      #A8C8E0 0%,
      #B8D8EC 35%,
      #C4DCE8 65%,
      #B0CCE0 100%
    );
  border-bottom: 1px solid var(--gold-hair);
  padding-bottom: 0.65rem;
  box-shadow:
    0 2px 20px rgba(140, 170, 190, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.navbar::before {
  display: none;
}

.navbar::after {
  bottom: -5px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 5%,
    var(--gold-fine) 25%,
    var(--gold-hair) 50%,
    var(--gold-fine) 75%,
    transparent 95%
  );
  opacity: 0.7;
}

.navbar-brand {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--chocolate);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  background: rgba(255, 252, 248, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.75);
  padding: 0.25rem 0.75rem;
  border-radius: 2px;
}

.navbar-nav a {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(255, 252, 248, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.navbar-nav a:hover {
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--gold-fine);
  color: var(--chocolate);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(160, 180, 200, 0.15);
}

.navbar-nav a.active {
  background: linear-gradient(160deg, var(--parch-light), var(--gold-glow));
  border: 1px solid var(--gold-fine);
  color: var(--sky-deep);
  box-shadow:
    0 2px 10px rgba(160, 180, 200, 0.12),
    inset 0 0 20px rgba(255, 255, 255, 0.65);
}

/* ---- Рамка — лист пергамента с золотой каймой ---- */
.baroque-frame {
  position: relative;
  padding: 2.25rem 2.4rem 2.5rem;
  background:
    linear-gradient(
      165deg,
      rgba(255, 252, 246, 0.98) 0%,
      rgba(250, 243, 232, 0.96) 45%,
      rgba(245, 235, 220, 0.94) 100%
    );
  border: 1px solid var(--gold-fine);
  outline: 1px solid rgba(255, 255, 255, 0.6);
  outline-offset: 4px;
  border-radius: 2px;
  box-shadow:
    0 1px 0 var(--gold-hair),
    0 8px 32px rgba(140, 120, 90, 0.1),
    inset 0 0 60px rgba(255, 250, 240, 0.5);
}

.baroque-frame::before,
.baroque-frame::after {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  opacity: 0.6;
  color: var(--gold);
}

.baroque-frame::before {
  content: '❦';
  top: 0.5rem;
  left: 0.75rem;
}

.baroque-frame::after {
  content: '❧';
  bottom: 0.5rem;
  right: 0.75rem;
  transform: scaleX(-1);
}

.baroque-frame .frame-corners svg {
  opacity: 0.5;
  width: 64px;
  height: 64px;
}

.baroque-frame > .ruffle-top {
  left: 4%;
  right: 4%;
  top: -14px;
  height: 26px;
  opacity: 0.88;
  background-image: radial-gradient(
    circle at 13px 13px,
    var(--gold-glow) 12px,
    transparent 12.5px
  );
  background-size: 26px 26px;
}

/* ---- Заголовки — Playfair Display ---- */
h1, h2, h3,
.hero h1,
.section-banner h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hero h1 {
  color: var(--chocolate);
  background: none;
  -webkit-text-fill-color: unset;
  font-style: italic;
  font-weight: 600;
  line-height: 1.15;
  font-size: clamp(1.85rem, 5.5vw, 3.1rem);
}

.hero h1::after {
  width: 100px;
  height: 1px;
  margin-top: 0.75rem;
  background: linear-gradient(90deg, transparent, var(--gold-fine), transparent);
  background-image: none;
  opacity: 1;
}

.hero-sub {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ink-soft);
  font-weight: 400;
  line-height: 1.75;
}

/* ---- Страница: рюша + золотая линия ---- */
.baroque-page {
  position: relative;
}

.baroque-page::before {
  content: '';
  display: block;
  width: min(60%, 280px);
  height: 1px;
  margin: 0 auto 1.25rem;
  background: linear-gradient(90deg, transparent, var(--gold-fine), transparent);
  opacity: 0.6;
}

.baroque-page::after {
  content: '';
  display: block;
  width: min(70%, 320px);
  height: 1px;
  margin: 2rem auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold-fine),
    var(--gold-hair),
    var(--gold-fine),
    transparent
  );
  opacity: 0.8;
}

/* ---- Баннер секции — табличка музея ---- */
.section-banner {
  position: relative;
  overflow: visible;
  background: linear-gradient(
    135deg,
    rgba(255, 252, 248, 0.95) 0%,
    var(--parch-light) 50%,
    rgba(248, 240, 232, 0.92) 100%
  );
  border: 1px solid var(--gold-fine);
  border-left: 3px solid var(--sky-whisper);
  border-radius: 2px;
  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.4),
    0 4px 20px rgba(140, 120, 90, 0.08);
  padding: 1.75rem 2rem;
}

.section-banner::before {
  content: '— ✦ —';
  font-size: 0.65rem;
  letter-spacing: 0.4rem;
  color: var(--gold-fine);
  opacity: 0.65;
  font-family: var(--font-accent);
}

.section-banner::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hair), transparent);
  opacity: 0.55;
}

.section-banner h1::after {
  display: none;
}

/* ---- Карточки — единый пергамент, лёгкий акцент ---- */
.cat-card,
.card {
  overflow: visible;
  padding-bottom: 1.85rem;
  background: linear-gradient(
    165deg,
    rgba(255, 252, 248, 0.97) 0%,
    var(--parch-light) 100%
  );
  border: 1px solid var(--gold-hair);
  border-radius: 2px;
  box-shadow:
    0 2px 0 var(--gold-glow),
    0 6px 24px rgba(140, 120, 90, 0.08);
  transition: box-shadow 0.28s ease, transform 0.28s ease;
}

.cat-card:nth-child(4n+1) { border-top: 2px solid var(--dust-rose); }
.cat-card:nth-child(4n+2) { border-top: 2px solid var(--sky-mist); }
.cat-card:nth-child(4n+3) { border-top: 2px solid var(--dust-lavender); }
.cat-card:nth-child(4n+4) { border-top: 2px solid var(--gold-hair); }

.cat-card:hover,
.card:hover {
  box-shadow:
    0 2px 0 var(--gold-fine),
    0 10px 36px rgba(140, 120, 90, 0.12);
  transform: translateY(-2px);
}

.cat-card::after {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-fine), transparent);
  opacity: 0.5;
}

.cat-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--chocolate);
}

/* ---- Ссылочные карточки ---- */
.link-card {
  background: linear-gradient(120deg, rgba(255, 252, 248, 0.96), var(--parch-light));
  border: 1px solid var(--gold-hair);
  border-radius: 2px;
  border-left: 2px solid var(--sky-whisper);
  box-shadow: 0 4px 18px rgba(140, 120, 90, 0.07);
}

.link-card::after {
  content: '◆';
  font-size: 0.55rem;
  color: var(--gold-fine);
  opacity: 0.45;
  letter-spacing: 0;
}

.link-card:nth-child(4n+1),
.link-card:nth-child(4n+2),
.link-card:nth-child(4n+3),
.link-card:nth-child(4n+4) {
  border-left: 2px solid var(--sky-whisper);
}

.link-card-logo {
  border-radius: 50%;
  background: var(--sky-mist);
  border: 1px solid var(--sky-soft);
}

/* ---- Кнопки — драгоценный пастель, не кислота ---- */
.btn-primary {
  background: linear-gradient(135deg, var(--sky-whisper) 0%, var(--sky-soft) 100%);
  border: 1px solid var(--gold-fine);
  color: var(--chocolate);
  font-family: var(--font-accent);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-shadow: none;
  box-shadow:
    0 2px 10px rgba(140, 170, 190, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--sky-soft) 0%, var(--sky-mist) 100%);
  color: var(--chocolate);
}

.btn-secondary {
  background: linear-gradient(135deg, var(--gold-glow), var(--parch-light));
  border: 1px solid var(--gold-fine);
  color: var(--chocolate);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--parch-line);
  color: var(--sky-deep);
}

/* ---- Стикеры и разделители ---- */
.sticker {
  background: var(--parch-light);
  border: 1px solid var(--gold-hair);
  color: var(--ink-soft);
  font-family: var(--font-accent);
  font-weight: 500;
  box-shadow: none;
  position: relative;
}

.sticker::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -6px;
  height: 10px;
  background-image: radial-gradient(circle at 5px 5px, var(--gold-glow) 4px, transparent 4.5px);
  background-size: 10px 10px;
  background-repeat: repeat-x;
  opacity: 0.6;
  pointer-events: none;
}

.hero-stickers .sticker:nth-child(n) {
  background: rgba(255, 252, 248, 0.85);
}

.deco-div {
  font-family: var(--font-accent);
  font-size: 0.85rem;
  letter-spacing: 0.55rem;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  background: none;
  opacity: 0.9;
  text-shadow: 0 1px 3px rgba(212, 196, 160, 0.4);
}

.deco-div::before,
.deco-div::after {
  content: '·';
  -webkit-text-fill-color: var(--gold-fine);
  opacity: 0.5;
}

.page-deco-bar {
  opacity: 0.88;
  padding: 0.85rem 0;
  border-top: none;
  border-bottom: none;
  color: var(--gold-fine);
  font-family: var(--font-accent);
  letter-spacing: 0.45rem;
  position: relative;
}

.page-deco-bar::before,
.page-deco-bar::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hair), transparent);
  opacity: 0.5;
  pointer-events: none;
}
.page-deco-bar::before { top: 0; }
.page-deco-bar::after  { bottom: 0; }

/* ---- Формы и аккаунт ---- */
.auth-box {
  border: 1px solid var(--gold-fine);
  border-radius: 2px;
  box-shadow:
    0 0 0 4px rgba(255, 252, 248, 0.5),
    0 12px 40px rgba(140, 120, 90, 0.1);
  background: linear-gradient(165deg, #fffdf9, var(--parch-light));
}

.auth-box::before {
  content: '✦';
  letter-spacing: 0.8rem;
  color: var(--gold-fine);
  font-size: 0.6rem;
}

.contact-notice {
  background: linear-gradient(135deg, var(--sky-mist), var(--parch-light));
  border: 1px dashed var(--gold-fine);
  border-radius: 2px;
}

/* ---- Чат ---- */
.chat-header {
  background: linear-gradient(90deg, var(--parch-light), rgba(255, 252, 248, 0.98), var(--sky-mist));
  border-bottom: 1px solid var(--gold-hair);
  border-image: none;
}

.chat-input-area::before {
  display: none;
}

/* ---- Админ ---- */
.admin-sidebar {
  background: linear-gradient(180deg, var(--parch-light), var(--parch));
  border-right: 1px solid var(--gold-hair);
}

.admin-nav a.active {
  background: rgba(255, 252, 248, 0.7);
  border-left: 2px solid var(--sky-whisper);
  color: var(--sky-deep);
}

/* Плавающие символы — редкие, приглушённые */
.baroque-gem-float {
  opacity: 0;
  font-family: var(--font-display);
  color: var(--gold-fine);
  pointer-events: none;
  z-index: 0;
}

@keyframes baroqueGemDrift {
  0%   { opacity: 0; transform: translateY(102vh) rotate(0deg); }
  6%   { opacity: 0.62; }
  94%  { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-2vh) rotate(180deg); }
}

@media (max-width: 700px) {
  .baroque-frame {
    padding: 1.5rem 1.2rem;
  }
  .navbar::before {
    height: 18px;
    background-size: 18px 18px;
  }
  .baroque-backdrop .bb-ruffle-v { width: 16px; opacity: 0.65; }
  .baroque-backdrop .bb-flourish { width: min(40vw, 120px); opacity: 0.45; }
  .baroque-backdrop .bb-scroll { opacity: 0.4; }
  .baroque-backdrop .bb-lily { opacity: 0.35; }
  .bb-damask { opacity: 0.22; }
  .bef-ruffle { height: 18px; background-size: 18px 18px; }
}