/* ================= Гламур: шрифт названия, заставка, бордовая шапка ================= */
@font-face { font-family: "Glam Script"; src: url(fonts/great-vibes-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Glam Script"; src: url(fonts/great-vibes-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F; font-display: swap; }

/* Название магазина — золотой прописью, как на логотипе */
.brand { font-family: "Glam Script", "Palatino Linotype", Georgia, serif; font-weight: 400; letter-spacing: 0; font-size: 32px; line-height: 1.15; padding: 0 .12em;
  background: linear-gradient(180deg, var(--gold2, var(--accent2)), var(--gold, var(--accent)) 55%, var(--accent3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand.mid { font-size: 44px; }
.brand.big { font-size: 64px; letter-spacing: 0; }
.drawer-head .brand { font-size: 42px; }
.watermark { font-family: "Glam Script", Georgia, serif; font-weight: 400; letter-spacing: 0; font-size: 22px; }
/* у светлых тем золото темнее, чтобы читалось на светлом */
[data-theme="glamur"] .brand { background-image: linear-gradient(180deg, #b8364f, #8c1c33 55%, #5e0f20); }
[data-theme="glamur"] .topbar .brand, [data-theme="glamur"] .drawer-head .brand { background-image: linear-gradient(180deg, #fff1cf, #e2c07d 55%, #b0843f); }

/* Тема «Гламур»: бордовая шапка и меню с золотом */
[data-theme="glamur"] .topbar { background: linear-gradient(180deg, #6e1426, #4e0b19); border-bottom-color: #c49a52; box-shadow: 0 2px 0 rgba(196, 154, 82, .35), 0 8px 24px rgba(78, 11, 25, .25); }
[data-theme="glamur"] .topbar .burger span { background: #f3dca8; }
[data-theme="glamur"] .topbar .burger:hover { background: rgba(255, 255, 255, .08); }
[data-theme="glamur"] .topbar .crumb { color: #ecd7d2; }
[data-theme="glamur"] .topbar .crumb::before { background: rgba(243, 220, 168, .35); }
[data-theme="glamur"] .topbar .clock { color: #d9b9b4; }
[data-theme="glamur"] .topbar .clock b { color: #fff3dc; }
[data-theme="glamur"] .topbar .sync-badge { background: rgba(255, 255, 255, .08); border-color: rgba(243, 220, 168, .25); color: #f1dfd8; }
[data-theme="glamur"] .drawer-head { background: linear-gradient(180deg, #6e1426, #4e0b19); border-bottom: 2px solid #c49a52; }
[data-theme="glamur"] .btn.primary { background: linear-gradient(180deg, #a3233d, #7a1529); color: #fff6ea; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 0 0 1px rgba(196, 154, 82, .45); }
[data-theme="glamur"] .login { background: radial-gradient(900px 520px at 50% 0%, rgba(196, 154, 82, .18), transparent 65%), radial-gradient(700px 420px at 50% 110%, rgba(140, 28, 51, .10), transparent 70%), var(--bg); }

/* ================= Заставка при открытии ================= */
#splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(70vmax 70vmax at 50% 45%, #7a1729 0%, #4d0a18 45%, #22040b 100%); transition: opacity .6s ease, visibility .6s; }
#splash[hidden] { display: none; }
#splash.out { opacity: 0; visibility: hidden; }
#splash.out .sp-logo { transform: scale(1.08); transition: transform .6s ease; }
body.splashing #login { display: none; }
.sp-glow { position: absolute; width: 120vmax; height: 120vmax; left: 50%; top: 45%; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(243, 214, 150, .10) 25%, transparent 30% 70%, rgba(243, 214, 150, .08) 75%, transparent 80%);
  animation: spSpin 9s linear infinite, spFade 1s ease both; pointer-events: none; }
.sp-logo { position: relative; width: min(340px, 72vw); aspect-ratio: 1; border-radius: 50%;
  animation: spIn 1.1s cubic-bezier(.2, .9, .25, 1.15) both; filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .55)) drop-shadow(0 0 40px rgba(226, 184, 106, .25)); }
.sp-logo img { width: 100%; height: 100%; display: block; user-select: none; }
/* блик, пробегающий по золоту */
.sp-shine { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.sp-shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 246, 214, .55), transparent); animation: spShine 1.3s .9s ease-in-out both; }
.sp-line { position: absolute; left: 50%; top: calc(45% + min(170px, 36vw) + 46px); width: 0; height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #e7c582, transparent); animation: spLine 1.4s 1s ease forwards; }
@keyframes spIn { 0% { opacity: 0; transform: scale(.55) rotate(-25deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes spShine { from { left: -60%; } to { left: 130%; } }
@keyframes spLine { to { width: min(320px, 70vw); } }
@keyframes spSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sp-logo, .sp-glow, .sp-shine::after, .sp-line { animation-duration: .01s; } }

@media (max-width: 760px) {
  .topbar .brand { font-size: 28px; }
  .brand.big { font-size: 54px; }
}