:root {
  --bg: #0c0c10;
  --card: #16161c;
  --row: #1b1b22;
  --text: #f4f4f6;
  --muted: #9a9aa6;
  --line: rgba(255, 255, 255, 0.08);
  --blue: #ff7a18;
  --ink: #140c06;
  --ok: #3dd68c;
  --danger: #ff5d4d;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: #000;
}
#app {
  flex: 1 0 auto;
  width: 100%;
  background: #000;
}
#shell {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.bg-banner {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  line-height: 0;
  background: #000;
}
.bg-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.bg-banner img.is-ad {
  width: auto;
  max-width: min(100%, 1900px);
  height: auto;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

.top {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 0;
  height: 88px;
  background: #16141c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.top-bar {
  width: min(1240px, calc(100% - 28px));
  margin: 0 auto;
  min-height: 82px;
  zoom: 1.06;
  display: flex;
  align-items: center;
  gap: 18px;
}
.top-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo { display: flex; gap: 10px; align-items: center; text-decoration: none; color: #fff; }
.logo-mark { width: 32px; height: 32px; color: #f4f1ea; flex: none; }
.logo-lockup { display: grid; gap: 3px; }
.logo-word { font-size: 26px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.logo-word span { color: #ff8a2a; }
.logo-kicker { color: #9a97a6; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.nav a {
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 700;
}
.nav a:hover { color: #ffb15a; }
.nav a.is-on { background: #ff7a18; color: #fff; }
.nav a.is-on:hover { color: #fff; }
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 8px;
}
.lang-switch button {
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  border-radius: 0;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.lang-switch button[data-lang="en"] {
  border-color: rgba(126, 182, 255, 0.95);
  border-radius: 7px 0 0 7px;
}
.lang-switch button[data-lang="ru"] {
  border-color: rgba(255, 138, 42, 0.95);
  border-radius: 0 7px 7px 0;
  margin-left: -1px;
}
.lang-switch button.is-on { color: #ff8a2a; }
.lang-switch button:hover { color: #ffb15a; }
#view { width: min(1240px, calc(100% - 28px)); margin: calc(-13.56vw - 108.7px) auto 40px; position: relative; z-index: 1; zoom: 1.06; flex: 1 0 auto; }
.foot {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: auto;
  padding-top: 28px;
  background: transparent;
  flex: 0 0 auto;
}
.foot-bar {
  width: min(1240px, calc(100% - 28px));
  margin: 0 auto;
  padding: 22px 24px 28px;
  border-radius: 22px;
  background: #141218;
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  left: calc((100% / 1.06 - 100%) / 2);
}
.foot-top { display: flex; align-items: baseline; gap: 14px; }
.foot-brand {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
  line-height: 1;
}
.foot-brand span { color: #ff7a18; }
.foot-lead { flex: 1; margin: 0; color: #8a8a96; font-size: 13px; }
.foot-copy { margin-left: auto; color: #6a6a76; font-size: 12px; white-space: nowrap; }
.foot-nav, .foot-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-nav { margin-top: 16px; }
.foot-nav a {
  color: #f3f3f6;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}
.foot-legal {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.foot-legal a {
  color: #8d8d98;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.foot-nav a:hover, .foot-legal a:hover { color: #ffb15a; }
.doc {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prose { color: #c8c8d2; font-size: 14px; line-height: 1.65; }
.prose p { margin: 0; }
.prose p + p, .prose h3, .prose ul { margin-top: 14px; }
.prose h3 { margin-top: 22px; margin-bottom: 8px; color: #f2f2f5; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; }
.prose h3:first-child { margin-top: 0; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #ffb15a; }
.prose li { margin: 4px 0; }
.faq { display: flex; flex-direction: column; }
.faq article { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.faq article:first-child { padding-top: 2px; border-top: 0; }
.prose .faq h3 { margin: 0 0 6px; color: #fff; font-size: 16px; letter-spacing: -0.02em; text-transform: none; }
.prose .faq p { margin: 0; color: #b7b7c2; }
.sitemap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
}
.sitemap a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  background: transparent;
  color: #8d8d98;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}
.sitemap a:hover { color: #ffb15a; }

h1, h2, h3 { font-weight: 750; letter-spacing: -0.02em; }
h1 { margin: 0; font-size: 22px; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.04em; }
h2 { margin: 0 0 10px; font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
h3 { margin: 0 0 6px; font-size: 16px; }
.board {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.board-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  background: #12141c;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.board-title h1 { font-size: 15px; letter-spacing: 0.08em; }
.board-tools { display: flex; align-items: center; gap: 10px; }
.clear { color: #ffb15a; font-size: 14px; font-weight: 700; text-decoration: none; }
.filter-btn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #1b1b22;
  color: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 750;
}
.filter-btn.is-on, .filter-btn:hover { border-color: #ff7a18; color: #ffb15a; }
.meta, .note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.site-btn { display: block; margin-bottom: 8px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.pad { padding: 14px; }
.filters { margin-bottom: 16px; }
.filters-h { margin-top: 14px; }

.desk {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.board-panel {
  flex: 1;
  min-width: 0;
  padding: 16px 16px 22px;
  background: #16141c;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.split-col { min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.side {
  width: 300px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.block {
  padding: 14px;
  background: #16141c;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.block > h2 {
  margin: 0 0 10px;
  color: #8d8d99;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.side-grid a, .side-btn, .rate-grid a {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 6px 6px;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #f2f2f6;
  background: #211f27;
  border: 1px solid transparent;
}
.side-grid a:hover, .side-btn:hover, .rate-grid a:hover { border-color: rgba(255, 134, 58, 0.55); }
.side-grid a.is-on, .rate-grid a.is-on { background: #ff863a; color: #1a0d04; border-color: transparent; }
.side-stack { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pick-select {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #211f27;
  color: #f2f2f6;
  font-size: 12px;
  font-weight: 700;
}
.side-btn-hot { background: #ec6714; color: #fff; font-weight: 800; }
.rate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rate-grid a { min-height: 32px; font-variant-numeric: tabular-nums; }
.cal { display: flex; flex-direction: column; gap: 8px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-nav strong { font-size: 15px; font-weight: 750; text-transform: lowercase; }
.cal-nav button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: #211f27;
  color: #fff;
  font-size: 18px;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.cal-dow span { color: var(--muted); font-size: 11px; font-weight: 700; padding: 2px 0 4px; }
.cal-grid a {
  display: grid;
  place-items: center;
  height: 28px;
  border-radius: 8px;
  text-decoration: none;
  color: #c8c8d2;
  font-size: 12px;
  font-weight: 700;
}
.cal-grid a.has { color: #fff; background: #211f27; }
.cal-grid a.is-today { box-shadow: inset 0 0 0 1px #ff863a; color: #ffb15a; }
.cal-grid a.is-on { background: #ff863a; color: #1a0d04; }
.cal-grid span.is-off {
  display: grid;
  place-items: center;
  height: 28px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.28);
  font-size: 12px;
  font-weight: 700;
  cursor: default;
}

.sec { margin: 0; }
.sec-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sec-h svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sec-sub {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
.rows {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: #221f2a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.srow {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 48px 86px 64px;
  align-items: center;
  column-gap: 6px;
  height: 48px;
  padding: 0 12px 0 8px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: background 0.22s ease;
}
.srow::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228, 196, 138, 0.38) 14%, rgba(228, 196, 138, 0.38) 86%, transparent);
  pointer-events: none;
}
.srow:last-child::before { content: none; }
.srow::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045), transparent);
  transform: translateX(-140%);
  pointer-events: none;
}
.srow:hover { background: rgba(255, 255, 255, 0.028); }
.srow:hover::after { animation: none; }
.srow:hover .nm-text { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.2); }
.srow:hover .rate,
.srow:hover .chron,
.srow:hover .when { color: rgba(255, 255, 255, 0.9); }
.srow.is-top .nm-text,
.srow.is-top:hover .nm-text {
  color: #f8e6c0;
  text-shadow: 0 0 14px rgba(232, 186, 96, 0.35);
}
.srow.is-top .rate,
.srow.is-top .chron,
.srow.is-top:hover .rate,
.srow.is-top:hover .chron { color: rgba(246, 224, 180, 0.78); }
.srow.is-top .when,
.srow.is-top:hover .when { color: #f6e4bc; }
.srow.is-top .gem {
  filter: drop-shadow(0 0 7px rgba(255, 206, 120, 0.75)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.pin-none {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  background: rgba(78, 132, 104, 0.8);
}
.pin {
  width: auto;
  height: 22px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
}
.pin-paid {
  color: #ffe3a8;
  background: rgba(206, 138, 36, 0.5);
}
.pin-soft {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
}
.pin-silver {
  color: #e7eef8;
  background: rgba(154, 184, 220, 0.34);
}
.pin-violet {
  color: #f3e9fa;
  background: rgba(176, 146, 214, 0.36);
}
.pin-top {
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  perspective: 420px;
}
.gem {
  width: 26px;
  height: 26px;
  display: block;
  transform-style: preserve-3d;
  animation: gem-spin 6.8s ease-in-out infinite;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}
.gem svg {
  width: 26px;
  height: 26px;
  display: block;
  overflow: visible;
}
.srow.is-top {
  background:
    radial-gradient(88px 40px at 30px 50%, rgba(255, 214, 130, 0.46), transparent 72%),
    linear-gradient(90deg, rgba(112, 78, 28, 0.62), rgba(86, 62, 26, 0.34) 48%, rgba(54, 42, 24, 0.16));
  box-shadow: inset 0 1px 0 rgba(255, 224, 168, 0.34);
}
.srow .nm {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nm-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tags { display: inline-flex; gap: 5px; flex: none; align-items: center; }
.mark {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 3px 2px;
  margin: -3px -2px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
}
.mark:hover { color: rgba(255, 255, 255, 0.86); }
.mark-bonus { color: #f0a93a; }
.mark-bonus:hover { color: #ffd089; }
.mark-obt,
.mark-zbt {
  margin: 0;
  padding: 1px 4px;
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.mark-obt { box-shadow: inset 0 0 0 0.5px rgba(62, 207, 142, 0.38); }
.mark-zbt { box-shadow: inset 0 0 0 0.5px rgba(255, 96, 96, 0.38); }
.mark-obt:hover,
.mark-zbt:hover { color: #fff; }
.mark-cash { color: #3ecf8e; }
.mark-cash:hover { color: #8af0be; }
.form label.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  color: #f4f4f6;
  cursor: pointer;
}
.switch-end { display: flex; align-items: center; gap: 10px; }
.day-hold:empty { display: none; }
.sheet .switch input {
  width: 44px;
  height: 26px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #2c2a33;
  appearance: none;
  position: relative;
}
.sheet .switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
}
.sheet .switch input:checked { background: #3b82f6; }
.sheet .switch input:checked::after { transform: translateX(18px); }
.mark svg {
  width: 13px;
  height: 13px;
  display: block;
  fill: currentColor;
}
.mark-bonus svg,
.mark-cash svg { width: 15px; height: 15px; }
.mark-tip {
  position: fixed;
  z-index: 60;
  width: 220px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #2c2936;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.mark-tip[hidden] { display: none; }
.mark-tip strong {
  display: block;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
}
.mark-tip p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.srow .rate, .srow .chron, .srow .when {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: #b7b7c2;
  text-align: center;
}
.srow .chron { overflow: hidden; text-overflow: ellipsis; }
.srow .when { color: #fff; }

.srow.is-paid { background: transparent; }
.srow.is-paid:hover { background: rgba(255, 255, 255, 0.028); }
.srow.is-silver,
.srow.is-silver.is-paid {
  background: linear-gradient(90deg, rgba(168, 198, 232, 0.18), rgba(168, 198, 232, 0.05) 46%, transparent 72%);
}
.srow.is-silver:hover,
.srow.is-silver.is-paid:hover {
  background: linear-gradient(90deg, rgba(168, 198, 232, 0.2), rgba(168, 198, 232, 0.05) 46%, transparent 72%);
}
.srow.is-violet,
.srow.is-violet.is-paid {
  background: linear-gradient(90deg, rgba(186, 156, 224, 0.18), rgba(186, 156, 224, 0.05) 46%, transparent 72%);
}
.srow.is-violet:hover,
.srow.is-violet.is-paid:hover {
  background: linear-gradient(90deg, rgba(186, 156, 224, 0.2), rgba(186, 156, 224, 0.05) 46%, transparent 72%);
}
.srow.is-top.is-paid,
.srow.is-top:hover,
.srow.is-top.is-paid:hover {
  background:
    radial-gradient(88px 40px at 30px 50%, rgba(255, 214, 130, 0.46), transparent 72%),
    linear-gradient(90deg, rgba(112, 78, 28, 0.62), rgba(86, 62, 26, 0.34) 48%, rgba(54, 42, 24, 0.16));
  box-shadow: inset 0 1px 0 rgba(255, 224, 168, 0.34);
}
.srow.is-top:hover,
.srow.is-top.is-paid:hover {
  background:
    radial-gradient(96px 42px at 30px 50%, rgba(255, 220, 146, 0.56), transparent 72%),
    linear-gradient(90deg, rgba(128, 90, 32, 0.7), rgba(96, 68, 28, 0.4) 48%, rgba(60, 46, 26, 0.2));
}

@keyframes row-sheen {
  from { transform: translateX(-140%); }
  to { transform: translateX(280%); }
}
@keyframes gem-spin {
  0%, 100% { transform: rotateY(-22deg); }
  50% { transform: rotateY(22deg); }
}
@media (prefers-reduced-motion: reduce) {
  .srow:hover::after,
  .bn-stars circle,
  .bn-moon,
  .bn-win,
  .bn-embers circle,
  .bn-sheen { animation: none; }
}

.empty { padding: 18px; color: var(--muted); }

.banner-slot { display: block; }
.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 92px;
  margin: 0;
  padding: 16px 16px;
  border-radius: 18px;
  text-decoration: none;
  background:
    linear-gradient(160deg, rgba(255, 159, 64, 0.22), transparent 62%),
    #16141c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.banner.banner-art {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  line-height: 0;
  background: #100e16;
}
.banner-art svg,
.banner-art img { display: block; width: auto; max-width: 100%; height: auto; max-height: 435px; }
.banner-art img { object-fit: contain; }
.banner.banner-house {
  display: flex;
  flex-direction: column;
  height: 435px;
  justify-content: flex-end;
  padding: 22px 20px 28px;
  line-height: 1.1;
  text-decoration: none;
  background:
    radial-gradient(120% 55% at 100% 0%, rgba(255, 122, 24, 0.42), transparent 58%),
    linear-gradient(180deg, #2a160e 0%, #141018 46%, #10131c 100%);
}
.house-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffb15a, #ff7a18);
  color: #1a0d04;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.05em;
}
.house-copy { display: grid; gap: 8px; }
.house-copy strong {
  color: #fff;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.88;
}
.house-copy span {
  color: #ffb15a;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 0.01em;
}
.gif-preview,
.pay-gif {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
  background: #100e16;
}
.gif-preview[hidden] { display: none; }
.bn-stars circle { animation: bn-twinkle 2.8s ease-in-out infinite; }
.bn-stars circle:nth-child(2n) { animation-delay: 0.6s; }
.bn-stars circle:nth-child(3n) { animation-delay: 1.3s; }
.bn-moon {
  transform-box: fill-box;
  transform-origin: center;
  animation: bn-float 8s ease-in-out infinite;
}
.bn-win { animation: bn-pulse 2.8s ease-in-out infinite; }
.bn-embers circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: bn-rise 5.2s linear infinite;
}
.bn-embers circle:nth-child(2) { animation-delay: -1.1s; }
.bn-embers circle:nth-child(3) { animation-delay: -2.2s; }
.bn-embers circle:nth-child(4) { animation-delay: -3.1s; }
.bn-embers circle:nth-child(5) { animation-delay: -4s; }
.bn-sheen { animation: bn-sheen 7.5s ease-in-out infinite; }
@keyframes bn-twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}
@keyframes bn-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@keyframes bn-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@keyframes bn-rise {
  0% { transform: translateY(24px); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateY(-150px); opacity: 0; }
}
@keyframes bn-sheen {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 0.55; }
  100% { transform: translateX(380px); opacity: 0; }
}
.banner .kicker { margin: 0; color: #ff8a1e; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.banner b { font-size: 16px; letter-spacing: 0.04em; }
.banner span:last-child { color: var(--muted); font-size: 13px; }
.grid-2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.grid-2 a {
  display: block;
  padding: 8px 6px;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  background: #121218;
}
.grid-2 a.is-on { background: var(--blue); color: #1a0d04; }
.rates { display: flex; flex-wrap: wrap; gap: 6px; }
.rates a {
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 8px;
  background: #121218;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.rates a.is-on { background: var(--blue); color: #1a0d04; }

.price { width: 100%; border-collapse: collapse; }
.price th, .price td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.price th { color: var(--muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

.cards { display: grid; gap: 8px; }
.card {
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  text-decoration: none;
  background: var(--row);
  border: 1px solid var(--line);
  font-weight: 700;
}
.card:hover { border-color: rgba(255, 122, 24, 0.7); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn, button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 10px 14px;
  border: 0;
  background: #2a2a33;
  text-decoration: none;
  font-weight: 700;
}
button.btn.btn-gold,
a.btn.btn-gold { background: #ff7a18; color: #1a0d04; }
button.btn.btn-blue,
a.btn.btn-blue { background: #3b82f6; color: #fff; }
button.btn.btn-reserve {
  background: transparent;
  color: #b9d4ff;
  box-shadow: inset 0 0 0 1.5px rgba(130, 176, 255, 0.9);
}
button.btn.btn-reserve:hover { background: rgba(59, 130, 246, 0.16); color: #fff; }
.offer button.btn.btn-blue {
  background: transparent;
  color: #b9d4ff;
  box-shadow: inset 0 0 0 1px rgba(130, 176, 255, 0.9);
}
.offer button.btn.btn-blue:hover { background: rgba(59, 130, 246, 0.16); color: #fff; }
button.btn.btn-taken,
.offer .btn.btn-taken:disabled {
  background: transparent;
  color: #ffb4b4;
  box-shadow: inset 0 0 0 1px rgba(255, 96, 96, 0.9);
  opacity: 1;
  cursor: default;
}
button.btn.btn-ghost,
a.btn.btn-ghost { background: #2c2a33; color: #f4f4f6; }
.btn-tiny { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
button.btn.is-on,
a.btn.is-on { background: #ff7a18; color: #1a0d04; }

.form { display: grid; gap: 12px; }
.form label,
.form .field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 650; }
.form .field > span { cursor: default; }
.date-line {
  display: flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #121118;
}
.date-line input[type="date"] {
  width: 11.2em;
  flex: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-right: 0;
}
.date-line input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
.date-open {
  margin-left: auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #e6e6ee;
  cursor: pointer;
}
.date-open svg { width: 16px; height: 16px; }
.date-line:has(input:focus-visible) { border-color: rgba(255, 177, 90, 0.35); }
.date-line:has(input.is-empty) { border-color: #e35d5d; }
.date-line input:focus-visible { outline: none; border-color: transparent; }
input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #101014;
  color: var(--text);
}
textarea { min-height: 88px; resize: vertical; }
.form-error { margin: 0; color: var(--danger); }
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #1c1a22;
}
.offer b {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.offer .pin { cursor: default; }
.offer p { margin: 3px 0 6px; color: rgba(255, 255, 255, 0.62); font-size: 12px; font-weight: 500; line-height: 1.4; }
.offer-meta { display: grid; gap: 2px; }
.offer-meta span { font-size: 12px; font-weight: 650; color: #f0d7a4; }
.offer-azure .offer-meta span { color: #d5e4f8; }
.offer-amethyst .offer-meta span { color: #eadcf6; }
.offer .btn {
  flex: none;
  min-width: 132px;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  white-space: nowrap;
}
.offer .btn-ghost {
  background: #2c2a33;
  color: rgba(255, 255, 255, 0.72);
}
.offer .btn:disabled {
  background: #2c2a33;
  color: rgba(255, 255, 255, 0.55);
  opacity: 1;
  cursor: default;
}
.offer.is-full { opacity: 1; }
.day-pick { position: relative; }
.day-pick[hidden] { display: none; }
.day-pick-btn {
  width: 72px;
  height: 32px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #121118;
  color: #f4f4f6;
  font-size: 13px;
}
.day-pick-btn:hover { border-color: rgba(255, 255, 255, 0.2); }
.day-menu {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 6px);
  left: 0;
  width: 72px;
  height: 168px;
  overflow: hidden;
  border-radius: 12px;
  background: #121118;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.day-list {
  display: block;
  height: 100%;
  overflow-y: auto;
  padding: 4px 10px 4px 4px;
  scrollbar-width: none;
}
.day-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
.day-thumb {
  position: absolute;
  top: 4px;
  right: 3px;
  width: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.38);
  pointer-events: none;
}
.day-menu button {
  display: block;
  width: 100%;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #f4f4f6;
  font-size: 13px;
}
.day-menu button.is-on,
.day-menu button:hover { background: rgba(255, 255, 255, 0.08); }
.sheet .is-empty,
.day-pick.is-empty .day-pick-btn { border-color: #e35d5d; }
.file-pick.is-empty { outline: 1px solid #e35d5d; border-radius: 12px; }
.sheet .form-error { padding: 0 18px 10px; font-size: 13px; font-weight: 650; }
.sheet-back {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 8, 10, 0.62);
}
.sheet,
.pay-card {
  width: min(480px, 100%);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(280px 120px at 0 0, rgba(255, 196, 120, 0.16), transparent 60%),
    #1c1a22;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pay-card { width: min(560px, 100%); box-shadow: var(--shadow); }
.sheet.form { gap: 0; }
.sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 14px;
}
.sheet-head .pin-top { cursor: default; }
.sheet-mark {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(232, 196, 138, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.sheet-mark svg { width: 22px; height: 22px; fill: #f6e3b6; }
.sheet-mark.top svg { fill: #f0d7a4; }
.sheet-mark.azure svg { fill: #d5e4f8; }
.sheet-mark.amethyst svg { fill: #eadcf6; }
.sheet-mark.plain svg { fill: rgba(255, 255, 255, 0.72); }
.sheet-mark.banner svg { fill: #ffb15a; }
.sheet-kicker {
  display: block;
  margin: 0 0 2px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pay-body { display: grid; gap: 10px; padding: 2px 18px 16px; }
.pay-name { margin: 0; color: #fff; font-size: 20px; font-weight: 750; letter-spacing: -0.02em; }
.pay-meta { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 14px; line-height: 1.45; }
.pay-price { margin: 0; color: #f0d7a4; font-size: 15px; font-weight: 750; }
.pay-card .btn { margin: 0 18px 18px; height: 42px; border-radius: 12px; }
#pay-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 28px 18px;
  background: rgba(6, 6, 8, 0.72);
}
#pay-modal .pay-card.is-live {
  width: min(640px, 100%);
  max-height: calc(100vh - 56px);
  margin: 0;
  overflow: auto;
}
.pay-card.is-live { position: relative; width: min(640px, 100%); }
.pay-orderline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 0;
}
.pay-kicker { display: block; margin-bottom: 2px; color: #ffb15a; font-size: 11px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.pay-orderline b { display: block; color: #fff; font-size: 22px; font-weight: 750; letter-spacing: -0.03em; }
.pay-orderline span { color: rgba(255, 255, 255, 0.55); font-size: 13px; }
.pay-order-side { display: flex; align-items: center; gap: 12px; flex: none; }
.pay-order-side strong { color: #f0d7a4; font-size: 14px; font-weight: 750; white-space: nowrap; }
.pay-close {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}
.pay-close svg { width: 14px; height: 14px; }
.pay-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.pay-card.is-live > .pay-close { position: absolute; top: 14px; right: 14px; }
.pay-page { display: grid; justify-items: center; padding: 8px 0 28px; }
.pay-invoice { margin: 8px 20px 0; color: rgba(255,255,255,.55); font-size: 13px; }
.pay-invoice b { color: #fff; font-weight: 750; letter-spacing: 0.04em; }
#pay-return {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 46;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px 0 16px;
  border-radius: 14px;
  background: #1c1a22;
  color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
#pay-return a { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
#pay-return button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: #fff; font-size: 18px; line-height: 1; }
#pay-return button:hover { background: rgba(255, 255, 255, 0.08); }
#pay-return span { font-size: 14px; font-weight: 700; }
#pay-return b { color: #ffb15a; font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; }
#pay-return:hover { color: #ffb15a; }
.pay-stage { display: grid; gap: 14px; padding: 16px 20px 20px; }
.pay-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pay-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  background: rgba(255, 122, 24, 0.12);
  color: #ffb15a;
  font-size: 13px;
  font-weight: 700;
}
.pay-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff7a18;
  animation: pay-pulse 1.8s ease-out infinite;
}
.pay-pill.is-in { background: rgba(255, 210, 122, 0.14); color: #ffe3a8; }
.pay-pill.is-in i { background: #ffd27a; animation: none; box-shadow: 0 0 0 4px rgba(255, 210, 122, 0.16); }
.pay-pill.is-paid { background: rgba(141, 206, 138, 0.14); color: #d8f3c8; }
.pay-pill.is-paid i { background: #8dce8a; animation: none; box-shadow: 0 0 0 4px rgba(141, 206, 138, 0.16); }
.pay-clock, .pay-conf {
  color: #fff;
  font-size: 22px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.pay-timebar, .pay-confbar {
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
}
.pay-timebar i, .pay-confbar i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #ff7a18, #ffb15a);
}
.pay-confbar i { background: #8dce8a; }
.pay-stage-grid { display: grid; grid-template-columns: 168px 1fr; gap: 16px; align-items: center; }
.pay-stage-main { display: grid; align-content: center; }
.pay-amount {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label copy" "value copy" "unit copy";
  gap: 0 10px;
  align-items: center;
  padding: 12px 12px 12px 14px;
  border-radius: 16px;
  background: rgba(255, 177, 90, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 177, 90, 0.18);
}
.pay-amount span { grid-area: label; color: rgba(255, 255, 255, 0.48); font-size: 11px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.pay-amount strong { grid-area: value; color: #f0d7a4; font-size: 28px; font-weight: 750; letter-spacing: -0.03em; }
.pay-amount em { color: #fff; font-style: normal; }
.pay-amount small { grid-area: unit; color: rgba(240, 215, 164, 0.72); font-size: 12px; font-weight: 750; }
.pay-amount > .pay-icon { grid-area: copy; }
.pay-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffb15a;
  cursor: pointer;
}
.pay-icon svg { width: 16px; height: 16px; }
.pay-icon:hover { background: rgba(255, 177, 90, 0.16); }
.pay-wallet-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding: 8px 8px 8px 12px;
  border-radius: 14px;
  background: #121118;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.pay-wallet-row > span { color: #ffb15a; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.pay-wallet-row code { color: #fff; font-family: inherit; font-size: 16px; font-weight: 650; letter-spacing: 0.01em; white-space: nowrap; }
.pay-test {
  justify-self: start;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.46);
  font-size: 13px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pay-test:hover { color: #ffb15a; }
.pay-hint { margin: 10px 0 0; color: rgba(255, 255, 255, 0.5); font-size: 13px; line-height: 1.45; }
.pay-net { margin: 4px 0 0; color: rgba(255, 255, 255, 0.45); font-size: 12px; }
.pay-scan { margin-top: 8px; color: #ffb15a; font-size: 13px; font-weight: 700; }
.pay-done { display: grid; justify-items: center; gap: 8px; padding: 36px 20px 40px; text-align: center; }
.pay-done-mark {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(141, 206, 138, 0.16);
  box-shadow: inset 0 0 0 1px rgba(141, 206, 138, 0.45);
}
.pay-done-mark::after {
  content: "";
  width: 18px;
  height: 10px;
  border-left: 3px solid #b7e7b4;
  border-bottom: 3px solid #b7e7b4;
  transform: rotate(-45deg) translate(1px, -2px);
}
.pay-done strong { color: #fff; font-size: 28px; font-weight: 750; }
.pay-done p { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 14px; }
.pay-card .pay-go {
  width: 100%;
  height: 44px;
  margin: 14px 0 0;
  border-radius: 14px;
  background: #ff7a18;
  color: #1a0d04;
}
.pay-qr { width: 168px; margin: 0; padding: 10px; border-radius: 18px; background: #fff; }
.pay-qr svg { display: block; width: 100%; height: auto; }
.pay-wait { display: grid; justify-items: center; gap: 8px; padding: 0 18px 18px; text-align: center; }
.pay-wait .btn { margin: 4px 0 0; width: 100%; }
.pay-status { margin: 4px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 14px; font-weight: 650; }
.pay-status.is-paid { color: #d8f3c8; }
@keyframes pay-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 122, 24, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(255, 122, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 122, 24, 0); }
}
.sheet-mark.azure { background: rgba(154, 184, 220, 0.34); }
.sheet-mark.amethyst { background: rgba(176, 146, 214, 0.38); }
.sheet-mark.vip,
.sheet-mark.gold { background: rgba(206, 138, 36, 0.5); }
.sheet-mark.plain { background: rgba(255, 255, 255, 0.08); }
.sheet-mark.banner { background: rgba(255, 134, 58, 0.28); }
.sheet h2,
.pay-card h2 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}
.sheet-head p { margin: 3px 0 0; color: rgba(255, 255, 255, 0.58); font-size: 12px; font-weight: 650; }
.sheet-fields { display: grid; gap: 12px; padding: 2px 18px 16px; }
.file-pick {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 650;
}
.file-pick span { cursor: default; }
.sheet-row { display: grid; grid-template-columns: 1.35fr 0.8fr; gap: 10px; }
.sheet input, .sheet select {
  background: #121118;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.08);
}
select,
.sheet select,
.pick-select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.2l5 5 5-5' fill='none' stroke='%23e6e6ee' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 7px;
}
.slot-live { margin: 0; color: #f0d7a4; font-size: 12px; font-weight: 700; }
.sheet-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sheet-actions .btn {
  min-width: 128px;
  height: 40px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 14px;
}
.sheet-actions button.btn.btn-ghost {
  background: #2c2a33;
  color: #f4f4f6;
}
.sheet-actions button.btn.btn-ghost:hover {
  background: #3c3a46;
  color: #fff;
}
.sheet-actions button.btn.btn-blue {
  background: #3b82f6;
  color: #fff;
}
.sheet-actions button.btn.btn-blue:hover {
  background: #5b97f8;
  color: #fff;
}
.slot-live:empty { display: none; }

.studio { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
.doll {
  position: relative;
  height: 360px;
  border-radius: 16px;
  background: #101014;
  border: 1px solid var(--line);
  overflow: hidden;
}
.doll svg { width: 100%; height: 100%; }
.slot { position: absolute; width: 64px; height: 48px; border-radius: 8px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35); }
.slot-ally { left: 34px; top: 118px; }
.slot-clan { left: 168px; top: 132px; }
.crest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.crest-btn {
  padding: 6px;
  border-radius: 12px;
  border: 0;
  background: #1b1b22;
  color: var(--muted);
  font-size: 11px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.crest-btn canvas { width: 100%; height: auto; display: block; border-radius: 8px; }
.crest-btn.is-on { box-shadow: inset 0 0 0 1.5px var(--blue); color: #ffb15a; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs button {
  border: 0;
  background: #2a2a33;
  color: var(--text);
  border-radius: 999px;
  padding: 7px 12px;
}
.tabs button.is-on { background: var(--blue); color: #1a0d04; font-weight: 800; }

.mod { padding: 12px 14px; border-top: 1px solid var(--line); }
.mod:first-child { border-top: 0; }
.mod-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.feed-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 0; }
.feed-head span { color: var(--muted); font-size: 12px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 8px);
  background: #f4f4f6;
  color: #141418;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease;
  z-index: 40;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.cookie {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 45;
  width: min(292px, calc(100% - 28px));
  margin: 0;
  padding: 18px 16px 14px;
  border-radius: 18px;
  background: #2a2a30;
  color: #f3f3f6;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.cookie[hidden] { display: none !important; }
.cookie p { margin: 0; font-size: 14px; font-weight: 550; line-height: 1.45; }
.cookie a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cookie button {
  width: 100%;
  margin-top: 14px;
  border: 0;
  border-radius: 10px;
  background: #16161a;
  color: #fff;
  padding: 10px 12px;
  font-weight: 750;
  font-size: 15px;
}
.cookie button:hover { background: #101014; }
:focus-visible { outline: 1px solid rgba(255, 177, 90, 0.35); outline-offset: 0; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: rgba(255, 177, 90, 0.35);
}

@media (max-width: 1100px) {
  .desk { flex-direction: column; }
  .side { width: auto; }
}
@media (max-width: 860px) {
  .offers, .sheet-row { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .srow { grid-template-columns: 54px minmax(0, 1fr) 48px 64px; }
  .srow .chron { display: none; }
}
@media (max-width: 720px) {
  .top { height: auto; }
  .bg-banner img { height: auto; }
  #view { margin-top: calc(-13.56vw - 108.7px); }
  .top-bar, .top-tools { flex-wrap: wrap; }
  .studio { grid-template-columns: 1fr; }
  .sec-sub { display: none; }
  .top-bar, #view { width: min(100% - 20px, 1240px); }
  .foot-bar { width: min(100% - 20px, 1240px); }
  .sitemap { grid-template-columns: 1fr; column-gap: 0; }
  .foot-top { flex-wrap: wrap; }
  .foot-lead { flex: 1 1 100%; }
  .pay-stage-grid { grid-template-columns: 1fr; justify-items: center; }
  .pay-wallet-row code { white-space: normal; }
  .pay-amount strong { font-size: 24px; }
}