:root {
  color-scheme: dark;
  --bg: #171827;
  --bg-deep: #0c0d17;
  --panel: rgba(38, 40, 59, 0.96);
  --panel-soft: rgba(47, 49, 72, 0.94);
  --panel-raised: #35374e;
  --panel-hover: #41435d;
  --line: rgba(193, 195, 244, 0.2);
  --line-strong: rgba(193, 195, 244, 0.5);
  --text: #f7f7ff;
  --soft: #d2d3e8;
  --muted: #999bb5;
  --accent: #aaa6ff;
  --accent-strong: #8c87eb;
  --coral: #e3b5ff;
  --yellow: #d9c7ff;
  --danger: #ff9fc5;
  --shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg-deep);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 8% -6%, rgba(170, 166, 255, 0.2), transparent 28rem),
    radial-gradient(circle at 94% 15%, rgba(227, 181, 255, 0.12), transparent 24rem),
    linear-gradient(145deg, #0e0f1b 0%, #171827 48%, #202038 100%);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(193, 195, 244, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193, 195, 244, 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}

button,
textarea,
select,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.app-shell {
  width: min(1080px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(22px, env(safe-area-inset-top)) 18px calc(118px + env(safe-area-inset-bottom));
}

body.reference-home-open .studio-topbar,
body.compact-home-open .studio-topbar {
  display: flex !important;
}

body.reference-home-open .bottom-action,
body.compact-home-open .bottom-action {
  display: block !important;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 4px 2px 24px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 13px;
}

.studio-topbar .brand-lockup {
  gap: 0;
}

.studio-topbar .brand-copy {
  display: grid;
  align-content: center;
  min-width: 0;
}

.brand-symbol {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  position: relative;
  border: 1px solid rgba(170, 166, 255, 0.32);
  border-radius: 17px;
  background: linear-gradient(145deg, #3a3b62, #202136 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 28px rgba(8, 9, 22, 0.34);
}

.brand-symbol img {
  display: block;
  width: 29px;
  height: 29px;
  border-radius: 10px;
  object-fit: cover;
  filter: drop-shadow(0 4px 8px rgba(170, 166, 255, 0.18));
}

.brand-symbol::after {
  display: none;
}

.eyebrow,
.section-kicker {
  margin: 0;
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1 {
  margin-top: 2px;
  color: var(--text);
  font-size: clamp(29px, 5vw, 46px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

h2 {
  font-size: clamp(21px, 3vw, 29px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

h3 {
  font-size: 17px;
  line-height: 1.1;
}

h4 {
  color: var(--soft);
  font-size: 12px;
  font-weight: 750;
}

.subtitle {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-chip,
.icon-button,
.ghost-button,
.category-button,
.content-tabs button,
.segmented button,
.palette-mode button,
.scope-toggle button,
.upload-font {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  color: var(--soft);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.top-chip:hover,
.icon-button:hover,
.ghost-button:hover,
.category-button:hover,
.content-tabs button:hover,
.segmented button:hover,
.palette-mode button:hover,
.scope-toggle button:hover,
.upload-font:hover {
  border-color: var(--line-strong);
  background: rgba(170, 166, 255, 0.12);
  color: var(--text);
}

.top-chip {
  padding: 10px 15px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 750;
}

.icon-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: var(--accent);
  font-size: 22px;
}

.section-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(46, 48, 70, 0.97), rgba(24, 25, 41, 0.96));
  box-shadow: var(--shadow);
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr);
  gap: 14px;
  margin-bottom: 14px;
}

.preview-panel {
  min-width: 0;
  padding: 20px;
  overflow: hidden;
}

.panel-head,
.section-title-row,
.pack-editor-head,
.editor-heading,
.sub-control-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.panel-head h2 {
  margin-top: 6px;
}

.panel-pill {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.16);
  font-size: 11px;
  font-weight: 800;
}

.panel-pill.strong {
  border-color: rgba(170, 166, 255, 0.44);
  color: var(--accent);
}

.preview-stage {
  position: relative;
  display: grid;
  min-height: 330px;
  margin-top: 18px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(170, 223, 220, 0.16);
  border-radius: 19px;
  background:
    linear-gradient(135deg, rgba(170, 166, 255, 0.11), transparent 36%),
    radial-gradient(circle at 70% 38%, rgba(227, 181, 255, 0.17), transparent 18rem),
    #252637;
}

.preview-stage::after {
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(173, 221, 215, 0.16);
  border-radius: 13px;
  content: "";
  pointer-events: none;
}

.preview-glow {
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: rgba(170, 166, 255, 0.16);
  filter: blur(46px);
}

#previewImage {
  position: relative;
  z-index: 1;
  display: block;
  width: min(80%, 380px);
  max-height: 315px;
  object-fit: contain;
  border-radius: 20px;
}

#previewImage[src=""] {
  display: none;
}

/* Give the passport the same readable preview size as the other emoji. */
.preview-stage.passport-preview #previewImage {
  width: min(86%, 400px);
}

.preview-empty {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.preview-empty strong {
  color: var(--accent);
  font-size: 62px;
  line-height: 1;
  text-shadow: 0 0 34px rgba(170, 166, 255, 0.48);
}

.preview-empty.hidden {
  display: none;
}

.preview-empty-tgs {
  position: relative;
  width: min(220px, 64vw);
  height: 190px;
  filter: drop-shadow(0 16px 22px rgba(48, 141, 255, .2));
}

.preview-empty-tgs svg,
.preview-empty-tgs canvas,
.preview-empty-tgs img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.preview-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 11px;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(170, 166, 255, 0.78);
}

.preview-note {
  color: var(--coral);
  font-weight: 800;
}

.studio-summary {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding: 22px;
  background:
    radial-gradient(circle at 90% 12%, rgba(227, 181, 255, 0.16), transparent 13rem),
    linear-gradient(160deg, rgba(53, 54, 81, 0.98), rgba(27, 28, 46, 0.98));
}

.summary-badge {
  padding: 7px 10px;
  border: 1px solid rgba(248, 201, 105, 0.3);
  border-radius: 9px;
  color: var(--yellow);
  background: rgba(248, 201, 105, 0.08);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.studio-summary h2 {
  max-width: 230px;
  margin-top: 26px;
}

.studio-summary > p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.summary-rule {
  width: 100%;
  height: 1px;
  margin: 24px 0 18px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.summary-stats {
  display: flex;
  gap: 34px;
}

.summary-stats > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stat-value {
  color: var(--text);
  font-size: 28px;
  font-weight: 850;
  letter-spacing: -0.05em;
}

.stat-label {
  color: var(--muted);
  font-size: 11px;
}

.summary-hint {
  margin-top: auto !important;
  padding-top: 28px;
  color: var(--muted) !important;
  font-size: 11px !important;
}

.summary-hint b {
  color: var(--soft);
  font-weight: 750;
}

.templates-panel,
.pack-editor,
.editor-shell,
.packs-section {
  margin-top: 14px;
  padding: 22px;
}

.section-title-row h2,
.pack-editor-head h2,
.editor-heading h2 {
  margin-top: 7px;
}

.section-title-row p,
.pack-editor-head p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
}

.template-actions {
  display: flex;
  gap: 8px;
}

.ghost-button {
  min-height: 35px;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 750;
}

.ghost-button.accent-ghost {
  border-color: rgba(170, 166, 255, 0.44);
  color: var(--accent);
}

.ghost-button.small-button {
  min-height: 29px;
  padding: 5px 9px;
  font-size: 10px;
}

.category-strip {
  display: flex;
  gap: 6px;
  margin-top: 20px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.category-strip::-webkit-scrollbar {
  display: none;
}

.category-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 750;
}

.category-button.active {
  border-color: transparent;
  color: #171827;
  background: var(--accent);
}

.category-button.development {
  position: relative;
  color: var(--muted);
  opacity: 0.55;
}

.category-button.development:hover {
  border-color: var(--line-strong);
  color: var(--soft);
  background: rgba(170, 166, 255, 0.08);
}

.templates-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 112px;
  margin-top: 14px;
}

.template-card {
  position: relative;
  display: flex;
  flex: 0 0 116px;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  outline: none;
  background: #0d1c26;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.template-card:hover {
  border-color: rgba(170, 166, 255, 0.56);
  background: var(--panel-hover);
  transform: translateY(-2px);
}

.template-card.selected {
  border-color: var(--accent);
  background: linear-gradient(145deg, rgba(170, 166, 255, 0.16), rgba(38, 39, 60, 0.98));
  box-shadow: 0 0 0 2px rgba(170, 166, 255, 0.16), 0 10px 30px rgba(0, 0, 0, 0.25);
}

.template-card.active-template {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px rgba(227, 181, 255, 0.25);
}

.template-card img {
  width: 100%;
  height: 100%;
  padding: 9px;
  object-fit: contain;
}

.template-index {
  position: absolute;
  top: 7px;
  left: 7px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(5, 12, 17, 0.78);
  font-size: 10px;
  font-weight: 850;
}

.template-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid rgba(227, 181, 255, 0.5);
  border-radius: 50%;
  color: var(--coral);
  background: rgba(17, 18, 31, 0.9);
  cursor: pointer;
}

.scope-toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.15);
}

.scope-toggle button {
  min-width: 50px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 11px;
  font-weight: 750;
}

.scope-toggle button.active {
  color: #171827;
  background: var(--accent);
}

.selected-strip {
  display: flex;
  gap: 9px;
  min-height: 56px;
  margin-top: 18px;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(17, 18, 31, 0.36);
}

.selected-slot {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted);
  background: var(--panel-raised);
  cursor: pointer;
  font-weight: 850;
}

.selected-slot.active {
  border-color: var(--coral);
  color: var(--text);
  background: rgba(227, 181, 255, 0.17);
}

.empty-state {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 12px;
}

.editor-heading {
  align-items: center;
}

.editor-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auto-fit-button {
  min-height: 31px;
  padding: 6px 11px;
  border: 1px solid rgba(170, 166, 255, 0.45);
  border-radius: 9px;
  color: var(--accent);
  background: rgba(170, 166, 255, 0.1);
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
}

.auto-fit-button:hover {
  background: rgba(170, 166, 255, 0.2);
}

.editor-tip {
  color: var(--muted);
  font-size: 11px;
}

.editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.control-block {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(18, 19, 32, 0.42);
}

.control-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
}

.control-icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  color: var(--accent);
  background: rgba(170, 166, 255, 0.14);
  font-size: 12px;
  font-weight: 850;
}

.content-tabs,
.segmented,
.palette-mode {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
}

.segmented {
  grid-template-columns: repeat(3, 1fr);
}

.content-tabs button,
.segmented button,
.palette-mode button {
  min-height: 30px;
  padding: 5px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: 10px;
  font-weight: 750;
}

.content-tabs button.active,
.segmented button.active,
.palette-mode button.active {
  color: #171827;
  background: var(--accent);
}

.field-label {
  display: block;
  margin: 15px 0 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  color: var(--text);
  background: #0b1a24;
}

.passport-fields input {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  color: var(--text);
  background: #0b1a24;
  font-size: 12px;
}

.passport-fields input:focus {
  border-color: var(--accent);
}

.passport-position-controls {
  display: grid;
  gap: 10px;
}

.passport-position-group {
  padding: 9px 10px 6px;
  border: 1px solid rgba(170, 166, 255, 0.18);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
}

.passport-position-group strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
  font-size: 10px;
}

.field-hint {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

textarea {
  min-height: 70px;
  resize: vertical;
  padding: 11px 12px;
  line-height: 1.35;
}

textarea:focus,
select:focus {
  border-color: var(--accent);
}

select {
  min-height: 38px;
  padding: 0 10px;
  font-size: 12px;
}

.inline-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 10px;
}

.font-mode {
  margin-bottom: 4px;
}

.upload-font {
  width: 100%;
  min-height: 31px;
  margin-top: 8px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 750;
}

.sub-control-title {
  align-items: center;
  margin: 15px 0 8px;
}

.sub-control-title output {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}

.compact-range {
  margin-top: 8px !important;
}

.palette-mode {
  margin-bottom: 13px;
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.palette-grid button {
  display: grid;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.palette-grid button.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(170, 166, 255, 0.16);
}

.palette-grid span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 13px color-mix(in srgb, var(--swatch) 50%, transparent);
}

.control-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.range-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 35px;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  color: var(--muted);
  font-size: 11px;
}

.range-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.range-row output {
  min-width: 35px;
  padding: 5px 4px;
  border-radius: 7px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
  font-size: 10px;
}

.muted-row {
  opacity: 0.42;
}

.wide {
  width: 100%;
}

.packs-section {
  margin-bottom: 14px;
}

.pack-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 18px;
}

.pack-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--text);
  background: rgba(18, 19, 32, 0.44);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}

.pack-link:hover {
  border-color: var(--line-strong);
  background: var(--panel-hover);
}

.pack-link strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-link span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-action {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: 12px 18px max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(4, 10, 16, 0.94) 36%, #040a10 100%);
  pointer-events: none;
}

.primary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(720px, 100%);
  min-height: 56px;
  gap: 7px;
  border: 0;
  border-radius: 15px;
  color: #171827;
  background: linear-gradient(110deg, #9d9af6, #c7b8ff 62%, #e3b5ff);
  box-shadow: 0 15px 35px rgba(129, 123, 225, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
  pointer-events: auto;
}

.primary-button:hover {
  filter: saturate(1.08) brightness(1.06);
  transform: translateY(-1px);
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.62;
  transform: none;
}

.button-arrow {
  margin-left: 8px;
  font-size: 21px;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 90px;
  z-index: 40;
  max-width: min(380px, calc(100vw - 36px));
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--text);
  background: #25263b;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.pack-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(2, 8, 13, 0.76);
  backdrop-filter: blur(12px);
}

.pack-modal[hidden] {
  display: none;
}

.pack-modal-card {
  width: min(460px, 100%);
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 21px;
  background: linear-gradient(145deg, #363752, #1b1c2f);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.56);
}

.pack-modal-card h2 {
  margin-top: 9px;
}

.pack-modal-card p:not(.eyebrow) {
  margin: 12px 0 18px;
  color: var(--muted);
  line-height: 1.45;
}

.pack-modal-actions {
  display: grid;
  gap: 9px;
}

.pack-modal-actions .primary-button {
  width: 100%;
  min-height: 50px;
  font-size: 15px;
}

.subscription-link {
  text-decoration: none;
}

@media (max-width: 760px) {
  .app-shell {
    padding-right: 12px;
    padding-left: 12px;
  }

  .hero-layout,
  .editor-grid {
    grid-template-columns: 1fr;
  }

  .studio-summary {
    min-height: auto;
  }

  .summary-hint {
    margin-top: 20px !important;
    padding-top: 0;
  }

  .preview-stage {
    min-height: 280px;
  }
}

@media (max-width: 470px) {
  .topbar {
    align-items: flex-start;
  }

  .top-chip {
    display: none;
  }

  .brand-symbol {
    width: 43px;
    height: 43px;
    border-radius: 14px;
  }

  h1 {
    font-size: 30px;
  }

  .preview-panel,
  .templates-panel,
  .pack-editor,
  .editor-shell,
  .packs-section,
  .studio-summary {
    padding: 16px;
    border-radius: 19px;
  }

  .section-title-row,
  .pack-editor-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .template-actions {
    width: 100%;
  }

  .template-actions .ghost-button {
    flex: 1;
  }

  .templates-grid {
    gap: 7px;
  }

  .template-card {
    flex-basis: calc(25% - 6px);
    width: calc(25% - 6px);
    height: auto;
    aspect-ratio: 1;
    border-radius: 13px;
  }

  .template-card img {
    padding: 5px;
  }

  .pack-list {
    grid-template-columns: 1fr;
  }

  .preview-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .editor-tip {
    display: none;
  }
}

/* Reference-like Mini App flow: compact editor, horizontal template rail and a real boot screen. */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(120, 100, 255, 0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(190, 120, 255, 0.14) 0%, transparent 40%),
    #12121e;
  transition: opacity 380ms ease, visibility 380ms ease;
}

/* Точечная сетка как у Solutions */
.boot-screen::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(170, 166, 255, 0.18) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 20%, rgba(0,0,0,0.6) 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 20%, rgba(0,0,0,0.6) 75%, transparent 100%);
}

/* Фиолетовое свечение снизу */
.boot-screen::after {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 160px;
  content: "";
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse, rgba(120, 90, 255, 0.28) 0%, transparent 70%);
  filter: blur(20px);
  animation: boot-glow-pulse 4s ease-in-out infinite;
}

@keyframes boot-glow-pulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scaleX(1); }
  50%       { opacity: 1;   transform: translateX(-50%) scaleX(1.15); }
}

.boot-screen.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.boot-card {
  position: relative;
  z-index: 1;
  width: min(390px, 100%);
  padding: 30px 26px 25px;
  border: 1px solid rgba(190, 199, 255, 0.25);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(46, 50, 78, 0.97), rgba(25, 28, 49, 0.97));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 70px rgba(109, 121, 239, 0.13);
  text-align: center;
}

.boot-mark {
  display: grid;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(143, 168, 255, 0.72);
  border-radius: 22px;
  background: #030817;
  box-shadow: 0 0 32px rgba(143, 168, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  animation: boot-float 2.3s ease-in-out infinite;
}

.boot-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.boot-brand {
  color: #aebdff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.21em;
}

.boot-card h1 {
  margin-top: 13px;
  font-size: clamp(25px, 7vw, 34px);
  letter-spacing: -0.05em;
}

.boot-card > p:not(.boot-brand) {
  margin-top: 9px;
  color: #b7bad0;
  font-size: 13px;
}

.boot-progress {
  height: 9px;
  margin-top: 25px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(8, 10, 24, 0.7);
}

.boot-progress span {
  display: block;
  width: 12%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8898ff, #e7b2ff);
  box-shadow: 0 0 16px rgba(143, 168, 255, 0.72);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.boot-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  color: #9296b2;
  font-size: 10px;
}

.boot-progress-meta strong {
  color: #d4d8ff;
}

.boot-spinner {
  width: 18px;
  height: 18px;
  margin: 22px auto 0;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: #abb8ff;
  border-radius: 50%;
  animation: boot-spin 820ms linear infinite;
}

.boot-actions {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.boot-actions a,
.boot-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  border: 1px solid rgba(143, 168, 255, 0.36);
  border-radius: 11px;
  color: #f2f3ff;
  background: rgba(143, 168, 255, 0.1);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}

.boot-actions a:hover,
.boot-actions button:hover {
  border-color: rgba(203, 211, 255, 0.68);
  background: rgba(143, 168, 255, 0.2);
}

.studio-topbar {
  align-items: center;
}

.top-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 39px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.top-nav span {
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

.top-nav:hover,
.top-nav.active {
  border-color: rgba(143, 168, 255, 0.34);
  color: var(--text);
  background: rgba(143, 168, 255, 0.14);
}

.compact-icon {
  width: 38px;
  height: 39px;
  font-size: 18px;
}

.app-shell {
  width: min(650px, 100%);
  padding-top: max(18px, env(safe-area-inset-top));
}

.hero-layout {
  display: block;
}

.studio-summary {
  display: none;
}

.preview-panel {
  padding: 18px;
}

.preview-stage {
  min-height: 310px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 44%, rgba(143, 168, 255, 0.18), transparent 12rem),
    #292d3a;
}

.templates-grid {
  flex-wrap: nowrap;
  margin-right: -4px;
  margin-left: -4px;
  padding: 2px 4px 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.template-card {
  flex-basis: 104px;
  width: 104px;
  height: 104px;
  border-radius: 16px;
}

.editor-grid {
  grid-template-columns: 1fr;
}

.pack-list {
  grid-template-columns: 1fr;
}

.packs-section[hidden],
#studioView[hidden] {
  display: none;
}

.library-hidden {
  display: none;
}

.back-to-studio {
  min-height: 42px;
  margin-top: 20px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--soft);
  background: rgba(143, 168, 255, 0.08);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.back-to-studio:hover {
  color: var(--text);
  background: rgba(143, 168, 255, 0.16);
}

@keyframes boot-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 560px) {
  .studio-topbar {
    gap: 8px;
    margin-right: 0;
    margin-left: 0;
  }

  .studio-topbar .top-actions {
    gap: 4px;
  }

  .studio-topbar .top-nav {
    min-height: 37px;
    padding: 7px 6px;
    gap: 4px;
    font-size: 10px;
    white-space: nowrap;
  }

  .studio-topbar .top-nav span {
    font-size: 14px;
  }

  .studio-topbar .icon-button {
    display: none;
  }

  .studio-topbar .compact-icon {
    display: grid;
    width: 36px;
    height: 37px;
    font-size: 17px;
  }

  .brand-symbol {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .brand-lockup {
    min-width: 0;
    gap: 8px;
  }

  h1 {
    font-size: 25px;
    letter-spacing: -0.05em;
  }

  .subtitle {
    margin-top: 4px;
    font-size: 11px;
  }
}

/* Hologram editor */
.hologram-control {
  position: relative;
  overflow: visible;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.hologram-control.is-active {
  border-color: color-mix(in srgb, var(--accent) 64%, var(--line));
  background: linear-gradient(145deg, rgba(47, 49, 72, 0.82), rgba(24, 25, 42, 0.68));
  box-shadow: 0 0 0 1px rgba(170, 166, 255, 0.12), 0 12px 30px rgba(0, 0, 0, 0.2);
}

.hologram-title-row {
  align-items: center;
}

.hologram-title {
  display: flex;
  align-items: center;
}

.switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 43px;
  height: 25px;
  cursor: pointer;
}

.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch-track {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: #292b40;
  transition: background 180ms ease, border-color 180ms ease;
}

.switch-track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  content: "";
  background: #a7aac8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 180ms ease, background 180ms ease;
}

.switch input:checked + .switch-track {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-strong), var(--coral));
}

.switch input:checked + .switch-track::after {
  transform: translateX(18px);
  background: #fff;
}

.hologram-note {
  min-height: 28px;
}

.hologram-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.hologram-palette button {
  display: grid;
  width: 29px;
  height: 29px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.hologram-palette button span,
.custom-color-swatch {
  display: block;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--hologram-swatch, #ff1f4a);
  box-shadow: 0 0 12px color-mix(in srgb, var(--hologram-swatch, #ff1f4a) 60%, transparent);
}

.hologram-palette button.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(170, 166, 255, 0.14);
}

.hologram-palette button:hover {
  transform: translateY(-1px);
}

.hologram-palette .rainbow-swatch span,
.custom-color-swatch.rainbow {
  background: conic-gradient(#ff1f4a, #ffc233, #34d8a3, #2eb8ff, #9c5cff, #ef51c4, #ff1f4a);
}

.custom-color-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  margin-top: 11px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
  text-align: left;
}

.custom-color-button:hover {
  border-color: var(--line-strong);
  background: rgba(170, 166, 255, 0.11);
}

.custom-color-button .custom-color-swatch {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.custom-color-button b {
  margin-left: auto;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.hologram-picker {
  position: absolute;
  z-index: 10;
  right: 12px;
  bottom: 12px;
  width: min(256px, calc(100% - 24px));
  padding: 10px;
  border: 1px solid rgba(193, 195, 244, 0.24);
  border-radius: 14px;
  background: rgba(14, 15, 27, 0.98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
}

.hologram-picker[hidden] {
  display: none;
}

.saturation-picker {
  position: relative;
  height: 128px;
  overflow: hidden;
  border-radius: 9px;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, var(--picker-hue, #ff1f4a));
  cursor: crosshair;
}

.picker-marker {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hue-picker {
  width: 100%;
  height: 16px;
  margin: 10px 0 8px;
  appearance: none;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  cursor: pointer;
}

.hue-picker::-webkit-slider-thumb {
  width: 19px;
  height: 19px;
  appearance: none;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #2eb8ff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}

.hue-picker::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #2eb8ff;
}

.picker-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.picker-bottom-row input {
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  color: var(--text);
  background: #252637;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.picker-bottom-row input:focus {
  border-color: var(--accent);
}

.picker-done {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  color: #171827;
  background: var(--accent);
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
}

.preview-stage.hologram-active #previewImage {
  filter: none;
}

.preview-stage.hologram-active::before {
  display: none;
}

.preview-stage.hologram-active::after {
  border-color: color-mix(in srgb, var(--hologram-color, #ff1f4a) 48%, transparent);
  box-shadow: none;
}

/* The hologram is rendered by the emoji itself; do not add a panel-wide glow. */
.preview-glow {
  display: none;
}

@media (max-width: 560px) {
  .hologram-picker {
    position: fixed;
    right: 12px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
  }
}



/* ─────────────────────────────────────────────
   Chat-style boot loader (replaces old boot-card)
   ───────────────────────────────────────────── */

.boot-screen {
  /* override: full viewport, dark, no centering grid */
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  background: #0e0f1c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle cx='12' cy='12' r='1.8' fill='rgba(170,166,255,0.07)'/%3E%3Ccircle cx='44' cy='36' r='1.2' fill='rgba(170,166,255,0.05)'/%3E%3Ccircle cx='28' cy='52' r='1.5' fill='rgba(227,181,255,0.05)'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════
   BOOT SCREEN — Solutions Design style
   ══════════════════════════════════════════════════════ */

/* Шапка ------------------------------------------------ */
.boot-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) 20px 12px;
  flex-shrink: 0;
  background: linear-gradient(to bottom, rgba(18, 18, 30, 0.98) 60%, transparent);
  opacity: 0;
  animation: boot-topbar-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

@keyframes boot-topbar-in {
  0%   { opacity: 0; transform: translateY(-18px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

.boot-logo {
  display: flex;
  align-items: center;
  gap: 11px;
}

.boot-logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(170, 166, 255, 0.35);
  background: linear-gradient(145deg, #2a2b48, #16172a);
  box-shadow: 0 0 24px rgba(120, 100, 255, 0.25), inset 0 1px 0 rgba(255,255,255,0.1);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.boot-logo-mark img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 9px;
}

.boot-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.boot-logo-text b {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #eaebff;
}

.boot-logo-text i {
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  color: #8c87eb;
  letter-spacing: 0.01em;
}

.boot-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(170,166,255,0.18), rgba(227,181,255,0.12));
  border: 1px solid rgba(170, 166, 255, 0.28);
  color: #c0bcff;
  letter-spacing: 0.04em;
  animation: boot-badge-pulse 3s ease-in-out 1s infinite;
}

@keyframes boot-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(170, 166, 255, 0); border-color: rgba(170,166,255,0.28); }
  50%       { box-shadow: 0 0 14px 3px rgba(170, 166, 255, 0.28); border-color: rgba(170,166,255,0.55); }
}

/* Чат -------------------------------------------------- */
.boot-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 18px 10px;
  overflow: hidden;
}

.bchat-msg {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  opacity: 0;
  transform: translateY(28px) scale(0.9);
  animation: bchat-appear 0.65s cubic-bezier(0.22, 1.35, 0.36, 1) forwards;
  animation-delay: var(--d, 0s);
  will-change: transform, opacity;
}

.bchat-msg--out {
  flex-direction: row-reverse;
}

@keyframes bchat-appear {
  0%   { opacity: 0; transform: translateY(28px) scale(0.86); filter: blur(5px); }
  45%  { opacity: 1; filter: blur(0); }
  72%  { transform: translateY(-5px) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Аватар */
.bchat-ava {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7b78f0 0%, #c99dff 100%);
  flex-shrink: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 4px 16px rgba(120, 100, 255, 0.35);
  opacity: 0;
  animation: bchat-ava-pop 0.5s cubic-bezier(0.22, 1.7, 0.36, 1) both;
  animation-delay: var(--d, 0s);
  will-change: transform;
}

@keyframes bchat-ava-pop {
  0%   { opacity: 0; transform: scale(0.25) rotate(-25deg); }
  55%  { transform: scale(1.18) rotate(6deg); opacity: 1; }
  78%  { transform: scale(0.93) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.bchat-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Аватар бота */
.bchat-ava--bot {
  background: linear-gradient(145deg, #2a2b48, #16172a);
  border: 1px solid rgba(170,166,255,0.25);
  box-shadow: 0 4px 16px rgba(120, 100, 255, 0.2);
}

.bchat-ava--bot img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 50%;
}

/* Пузыри */
.bchat-bubble {
  max-width: 74%;
  padding: 11px 16px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.48;
  word-break: break-word;
}

/* Входящее сообщение (от пользователя) */
.bchat-msg--in .bchat-bubble {
  background: rgba(40, 42, 64, 0.98);
  border: 1px solid rgba(170, 166, 255, 0.1);
  border-bottom-left-radius: 6px;
  color: #dddff5;
}

.bchat-name {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #9f9bff;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

/* Исходящее сообщение (от бота) */
.bchat-msg--out .bchat-bubble {
  background: linear-gradient(140deg, #5853d0 0%, #7a68ec 60%, #9b85f5 100%);
  border-bottom-right-radius: 6px;
  color: #fff;
  box-shadow: 0 6px 28px rgba(88, 83, 208, 0.55), 0 2px 8px rgba(0,0,0,0.25);
  animation: bchat-appear 0.65s cubic-bezier(0.22, 1.35, 0.36, 1) forwards,
             bchat-glow 1s ease var(--d, 0s) forwards;
}

@keyframes bchat-glow {
  0%   { box-shadow: 0 2px 6px rgba(88, 83, 208, 0.1); }
  55%  { box-shadow: 0 8px 50px rgba(130, 100, 255, 0.95), 0 0 70px rgba(180, 140, 255, 0.35); }
  100% { box-shadow: 0 6px 28px rgba(88, 83, 208, 0.55), 0 2px 8px rgba(0,0,0,0.25); }
}

.bchat-msg--out .bchat-bubble b {
  color: #ddd9ff;
  font-weight: 800;
}

/* Индикатор "печатает" */
.bchat-msg--typing .bchat-bubble {
  padding: 13px 18px;
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 64px;
}

.bchat-msg--typing .bchat-bubble i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: bchat-dot 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.bchat-msg--typing .bchat-bubble i:nth-child(2) { animation-delay: 0.22s; }
.bchat-msg--typing .bchat-bubble i:nth-child(3) { animation-delay: 0.44s; }

@keyframes bchat-dot {
  0%, 100% { transform: scale(0.65) translateY(0);  opacity: 0.35; }
  42%       { transform: scale(1.45) translateY(-6px); opacity: 1; background: rgba(255,255,255,0.95); }
  68%       { transform: scale(0.8) translateY(1px);  opacity: 0.55; }
}

/* Стикер */
.bchat-msg--sticker {
  justify-content: flex-end;
  margin-right: 4px;
  min-height: 0;
}

.bchat-msg--sticker[style*="display: none"],
.bchat-msg--sticker[style*="display:none"] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Смена отправителя */
.bchat-msg--in + .bchat-msg--out,
.bchat-msg--out + .bchat-msg--in {
  margin-top: 10px;
}

/* Реакция */
.bchat-reaction {
  align-self: flex-end;
  margin-right: 48px;
  margin-top: -4px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(155, 133, 245, 0.15);
  border: 1px solid rgba(155, 133, 245, 0.3);
  font-size: 13px;
  color: #c4beff;
  letter-spacing: 0.03em;
  opacity: 0;
  transform: scale(0.6) translateY(8px);
  animation: bchat-reaction-pop 0.55s cubic-bezier(0.34, 1.75, 0.64, 1) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes bchat-reaction-pop {
  0%   { opacity: 0; transform: scale(0.4) translateY(10px); }
  60%  { opacity: 1; transform: scale(1.14) translateY(-3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.bchat-sticker {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  animation: bchat-sticker-pop 0.7s cubic-bezier(0.22, 1.6, 0.36, 1) both;
  animation-delay: var(--d, 0s);
  will-change: transform;
  filter: drop-shadow(0 8px 24px rgba(120, 100, 255, 0.45));
}

@keyframes bchat-sticker-pop {
  0%   { opacity: 0; transform: scale(0.15) rotate(-20deg); }
  50%  { opacity: 1; }
  70%  { transform: scale(1.18) rotate(5deg); }
  85%  { transform: scale(0.94) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.bchat-sticker canvas,
.bchat-sticker svg {
  width: 100% !important;
  height: 100% !important;
}

/* Прогресс-бар ----------------------------------------- */
.boot-progress-wrap {
  flex-shrink: 0;
  padding: 10px 20px 6px;
}

.boot-progress {
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.boot-progress span {
  display: block;
  width: 12%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7b78f0, #c99dff);
  box-shadow: 0 0 14px rgba(155, 133, 245, 0.7);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.boot-phrase {
  margin: 7px 0 0;
  font-size: 11.5px;
  color: rgba(170, 166, 255, 0.45);
  text-align: center;
  letter-spacing: 0.01em;
}

/* Футер ------------------------------------------------ */
.boot-footer {
  flex-shrink: 0;
  text-align: center;
  padding: 6px 20px max(16px, env(safe-area-inset-bottom));
  font-size: 11px;
  color: rgba(155, 133, 245, 0.38);
  letter-spacing: 0.05em;
}

/* убираем старые boot-orbit / boot-card если вдруг остались */
.boot-orbit, .boot-card, .boot-spinner { display: none !important; }

/* ══════════════════════════════════════════════════════
   BLACK TELEGRAM THEME — visual layer only
   ══════════════════════════════════════════════════════ */
:root {
  --bg: #08090b;
  --bg-deep: #020304;
  --panel: rgba(18, 20, 24, 0.96);
  --panel-soft: rgba(24, 27, 32, 0.96);
  --panel-raised: #2a2e35;
  --panel-hover: #343941;
  --line: rgba(214, 220, 230, 0.16);
  --line-strong: rgba(83, 168, 255, 0.62);
  --text: #f7f8fa;
  --soft: #d7dbe2;
  --muted: #9299a5;
  --accent: #53a8ff;
  --accent-strong: #2e8cf0;
  --coral: #78c0ff;
  --yellow: #b9ddff;
  --danger: #ff849b;
  --shadow: 0 28px 70px rgba(0, 0, 0, 0.58);
}

html {
  background: #020304;
}

body {
  background:
    radial-gradient(circle at 82% -10%, rgba(32, 112, 204, 0.2), transparent 25rem),
    radial-gradient(circle at 8% 35%, rgba(35, 72, 112, 0.13), transparent 24rem),
    linear-gradient(145deg, #020304 0%, #080a0d 56%, #101318 100%);
}

body::before {
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(164, 192, 224, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(164, 192, 224, 0.035) 1px, transparent 1px);
}

.section-card {
  border-color: rgba(215, 224, 235, 0.13);
  background: linear-gradient(145deg, rgba(23, 26, 31, 0.98), rgba(10, 12, 15, 0.98));
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
}

.brand-symbol {
  border-color: rgba(83, 168, 255, 0.38);
  background: linear-gradient(145deg, #1d2834, #080b0f 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 12px 28px rgba(0, 0, 0, 0.5);
}

.brand-symbol img {
  filter: drop-shadow(0 4px 8px rgba(40, 143, 255, 0.28));
}

.top-nav,
.icon-button,
.ghost-button,
.category-button,
.content-tabs button,
.segmented button,
.palette-mode button,
.scope-toggle button,
.upload-font {
  border-color: rgba(215, 224, 235, 0.14);
  background: rgba(255, 255, 255, 0.035);
}

.top-nav:hover,
.top-nav.active,
.icon-button:hover,
.ghost-button:hover,
.category-button:hover,
.content-tabs button:hover,
.segmented button:hover,
.palette-mode button:hover,
.scope-toggle button:hover,
.upload-font:hover {
  border-color: rgba(83, 168, 255, 0.48);
  background: rgba(57, 143, 229, 0.14);
}

.support-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(83, 168, 255, 0.48);
  border-radius: 12px;
  color: #dcecff;
  background: linear-gradient(135deg, rgba(46, 140, 240, 0.22), rgba(21, 45, 72, 0.62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 22px rgba(14, 82, 150, 0.16);
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.support-button:hover {
  border-color: #74bbff;
  background: linear-gradient(135deg, rgba(46, 140, 240, 0.35), rgba(24, 61, 98, 0.8));
  transform: translateY(-1px);
}

.support-button-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(174, 220, 255, 0.62);
  border-radius: 50%;
  color: #fff;
  background: rgba(54, 157, 255, 0.36);
  font-size: 12px;
  font-weight: 900;
}

.preview-stage {
  border-color: rgba(83, 168, 255, 0.2);
  background:
    linear-gradient(135deg, rgba(83, 168, 255, 0.08), transparent 36%),
    radial-gradient(circle at 70% 38%, rgba(41, 130, 225, 0.16), transparent 18rem),
    #111419;
}

.control-block {
  border-color: rgba(215, 224, 235, 0.12);
  background: rgba(7, 9, 12, 0.58);
}

.control-icon {
  color: #8bc8ff;
  background: rgba(57, 143, 229, 0.14);
}

.category-button.active,
.primary-button {
  color: #fff;
  background: linear-gradient(110deg, #2389ef, #45a8ff 62%, #79c5ff);
  box-shadow: 0 15px 35px rgba(28, 124, 220, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.primary-button {
  color: #03101d;
}

.boot-screen {
  background: #030405 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle cx='12' cy='12' r='1.8' fill='rgba(83,168,255,0.06)'/%3E%3Ccircle cx='44' cy='36' r='1.2' fill='rgba(158,207,255,0.04)'/%3E%3Ccircle cx='28' cy='52' r='1.5' fill='rgba(83,168,255,0.04)'/%3E%3C/svg%3E");
}

.boot-topbar {
  background: linear-gradient(to bottom, rgba(4, 6, 8, 0.98) 60%, transparent);
}

.boot-logo-mark {
  border-color: rgba(83, 168, 255, 0.35);
  background: linear-gradient(145deg, #1d2834, #080b0f);
  box-shadow: 0 0 24px rgba(36, 133, 232, 0.18), inset 0 1px 0 rgba(255,255,255,0.1);
}

.boot-logo-text i,
.boot-phrase {
  color: rgba(116, 186, 255, 0.72);
}

.boot-badge {
  color: #b7dcff;
  background: linear-gradient(135deg, rgba(46,140,240,0.2), rgba(29,53,79,0.36));
  border-color: rgba(83,168,255,0.34);
}

.bchat-ava {
  background: linear-gradient(135deg, #237fcf 0%, #101821 100%);
  box-shadow: 0 4px 16px rgba(31, 129, 226, 0.25);
}

.boot-progress span {
  background: linear-gradient(90deg, #248cf3, #76c4ff);
  box-shadow: 0 0 14px rgba(71, 164, 255, 0.58);
}

.boot-footer {
  color: rgba(116, 186, 255, 0.44);
}

@media (max-width: 560px) {
  .support-button {
    width: 37px;
    height: 37px;
    min-height: 37px;
    padding: 0;
    border-radius: 12px;
  }

  .support-button > span:last-child {
    display: none;
  }
}

/* Welcome flow inspired by the reference Mini-App. It is intentionally an overlay:
   the existing editor stays intact underneath and appears after the intro. */
body.welcome-open {
  overflow: hidden;
}

.welcome-screen {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: max(16px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom));
  color: #f8f8fb;
  background:
    radial-gradient(circle at 50% -12%, rgba(53, 60, 88, 0.28), transparent 35%),
    radial-gradient(circle at 12% 84%, rgba(35, 74, 132, 0.1), transparent 32%),
    #070809;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.welcome-screen[hidden] {
  display: none;
}

.welcome-screen.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.welcome-screen::before,
.welcome-screen::after {
  position: absolute;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 50%;
}

.welcome-screen::before {
  width: min(620px, 125vw);
  height: min(620px, 125vw);
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
}

.welcome-screen::after {
  width: min(430px, 90vw);
  height: min(430px, 90vw);
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  border-color: rgba(75, 141, 226, 0.055);
}

.welcome-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    radial-gradient(circle at 12% 20%, transparent 0 13px, rgba(255,255,255,.07) 14px 15px, transparent 16px),
    radial-gradient(circle at 81% 70%, transparent 0 20px, rgba(255,255,255,.05) 21px 22px, transparent 23px),
    linear-gradient(125deg, transparent 0 49%, rgba(255,255,255,.045) 50% 51%, transparent 52%);
  background-size: 168px 196px, 226px 244px, 132px 132px;
  mask-image: linear-gradient(to bottom, transparent, #000 13%, #000 84%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 13%, #000 84%, transparent);
}

.welcome-header,
.welcome-slides,
.welcome-footer {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  margin-right: auto;
  margin-left: auto;
}

.welcome-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
}

.welcome-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.welcome-dots span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.26);
  transition: width 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.welcome-dots span.active {
  width: 20px;
  background: #3c9cff;
  box-shadow: 0 0 14px rgba(60,156,255,.65);
}

.welcome-skip {
  padding: 8px 2px;
  border: 0;
  color: rgba(255,255,255,.55);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.welcome-skip:hover {
  color: #fff;
}

.welcome-slides {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.welcome-slide {
  display: none;
  height: 100%;
  flex-direction: column;
  align-items: center;
  padding: clamp(26px, 7vh, 70px) 0 16px;
  text-align: center;
  animation: welcome-slide-in 320ms cubic-bezier(.22,1,.36,1);
}

.welcome-slide.active {
  display: flex;
}

@keyframes welcome-slide-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

.welcome-script {
  margin: 0 0 12px;
  color: #3d9fff;
  font-family: "Caveat", cursive;
  font-size: clamp(19px, 5vw, 25px);
  font-weight: 700;
  transform: rotate(-3deg);
}

.welcome-slide h1 {
  max-width: 480px;
  margin: 0;
  color: #fff;
  font-family: "Lilita One", "Unbounded", sans-serif;
  font-size: clamp(34px, 9vw, 58px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .98;
  text-wrap: balance;
}

.welcome-slide h1 em {
  color: #8dbaff;
  font-style: normal;
}

.welcome-description {
  max-width: 370px;
  margin: 16px auto 0;
  color: rgba(240,243,250,.6);
  font-size: 13px;
  line-height: 1.55;
}

.welcome-language-list {
  display: grid;
  width: min(380px, 100%);
  gap: 8px;
  margin-top: 27px;
}

.welcome-language {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  gap: 12px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  color: rgba(255,255,255,.78);
  background: rgba(24,26,29,.86);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.welcome-language:hover,
.welcome-language.active {
  border-color: rgba(73,157,255,.9);
  background: rgba(33,62,99,.55);
  transform: translateX(2px);
}

.welcome-language > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  font-size: 19px;
}

.welcome-language i {
  margin-left: auto;
  color: #54a8ff;
  font-style: normal;
  font-size: 18px;
}

.welcome-art {
  position: relative;
  width: min(410px, 100%);
  flex: 1;
  min-height: 180px;
  margin-top: 18px;
}

.welcome-card,
.market-tile,
.level-card,
.balance-card,
.support-phone {
  position: absolute;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(145deg, rgba(30,35,45,.97), rgba(10,12,15,.98));
  box-shadow: 0 22px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.09);
}

.welcome-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 150px;
  height: 150px;
  padding: 15px;
  border-radius: 24px;
  color: #fff;
  font-family: "Lilita One", sans-serif;
  font-size: 21px;
  text-align: left;
}

.welcome-card span {
  align-self: flex-end;
  color: #55aaff;
  font-size: 38px;
}

.welcome-card--one { left: 10%; top: 20%; transform: rotate(-12deg); }
.welcome-card--two { left: 34%; top: 1%; z-index: 2; border-color: rgba(66,157,255,.65); transform: rotate(4deg); }
.welcome-card--three { right: 8%; top: 23%; transform: rotate(12deg); }

.welcome-card--two span { color: #ff5c9b; }
.welcome-card--three span { color: #a689ff; }

.welcome-art--market {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: min(310px, 100%);
  min-height: 215px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(21,23,27,.85);
}

.market-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 93px;
  border-radius: 16px;
  color: #fff;
  font-family: "Lilita One", sans-serif;
  font-size: 38px;
}

.market-tile:nth-child(1) { color: #ff416e; }
.market-tile:nth-child(2) { color: #51adff; }
.market-tile:nth-child(3) { color: #b27aff; }
.market-tile:nth-child(4) { color: #ffcb3d; }
.market-tile b {
  position: absolute;
  right: 8px;
  bottom: 7px;
  color: rgba(255,255,255,.52);
  font-family: "Onest", sans-serif;
  font-size: 9px;
  font-weight: 700;
}

.support-phone {
  left: 50%;
  display: flex;
  width: min(260px, 72%);
  min-height: 174px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border-radius: 28px;
  transform: translateX(-50%) rotate(-3deg);
}

.support-phone-dot {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: linear-gradient(135deg, #2d9dff, #8a67ff);
  box-shadow: 0 10px 24px rgba(48,137,255,.36);
}

.support-phone strong { font-family: "Lilita One", sans-serif; font-size: 20px; font-weight: 400; }
.support-phone small { color: rgba(255,255,255,.55); font-size: 11px; }
.support-phone b { margin-top: 8px; color: #61afff; font-size: 10px; }

.level-card {
  left: 8%;
  top: 9%;
  width: 84%;
  padding: 18px;
  border-radius: 20px;
  text-align: left;
}

.level-card > span,
.balance-card > span {
  color: rgba(255,255,255,.5);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}

.level-card strong { display: block; margin: 15px 0; font-family: "Lilita One", sans-serif; font-size: 22px; font-weight: 400; }
.level-card > div { height: 8px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.1); }
.level-card > div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #378fff, #b789ff); }
.level-card small { display: block; margin-top: 8px; color: rgba(255,255,255,.5); font-size: 10px; }

.level-reward {
  position: absolute;
  right: 10%;
  bottom: 1%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid rgba(74,159,255,.42);
  border-radius: 14px;
  color: rgba(255,255,255,.72);
  background: #151a24;
  font-size: 10px;
}

.level-reward b { color: #ffd151; font-size: 22px; }

.balance-card {
  left: 11%;
  top: 9%;
  width: 78%;
  padding: 20px;
  border-radius: 22px;
  text-align: left;
  background: linear-gradient(135deg, #16304d, #11141b 70%);
}

.balance-card strong { display: block; margin-top: 17px; font-family: "Lilita One", sans-serif; font-size: 39px; font-weight: 400; }
.balance-card strong i { color: #45a6ff; font-size: 25px; font-style: normal; }
.balance-card small { color: rgba(255,255,255,.55); font-size: 11px; }

.payment-row {
  position: absolute;
  right: 12%;
  bottom: 3%;
  display: flex;
  gap: 8px;
}

.payment-row b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #75b9ff;
  background: #14171c;
  font-size: 11px;
}

.welcome-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}

.welcome-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(380px, 100%);
  min-height: 52px;
  padding: 0 18px 0 22px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(100deg, #277fdc, #4caaff);
  box-shadow: 0 13px 32px rgba(40,135,226,.27), inset 0 1px 0 rgba(255,255,255,.3);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  transition: transform 160ms ease, filter 160ms ease;
}

.welcome-next:hover { filter: brightness(1.08); transform: translateY(-1px); }
.welcome-next span { font-size: 23px; font-weight: 400; }

.welcome-support-link {
  min-height: 27px;
  color: rgba(255,255,255,.42);
  font-size: 10px;
  text-decoration: none;
}

.welcome-support-link:hover { color: #65b2ff; }
.welcome-support-link span { margin-left: 4px; color: #55aaff; font-size: 13px; }

@media (max-height: 690px) {
  .welcome-slide { padding-top: 18px; }
  .welcome-description { margin-top: 10px; }
  .welcome-art { min-height: 142px; margin-top: 7px; }
  .welcome-language-list { margin-top: 15px; }
  .welcome-language { min-height: 43px; }
  .welcome-card { width: 120px; height: 120px; }
  .welcome-art--market { min-height: 170px; }
  .market-tile { min-height: 70px; }
  .support-phone { min-height: 140px; }
}

@media (max-width: 390px) {
  .welcome-screen { padding-right: 14px; padding-left: 14px; }
  .welcome-slide h1 { font-size: clamp(31px, 9vw, 43px); }
  .welcome-description { max-width: 320px; font-size: 12px; }
  .welcome-card--one { left: 3%; }
  .welcome-card--three { right: 3%; }
}

/* Compact create home, matching the reference Mini-App's first screen. */
body.reference-home-open .studio-topbar,
body.reference-home-open .bottom-action {
  display: none;
}

.reference-home {
  position: relative;
  display: flex;
  min-height: calc(100vh - 36px - env(safe-area-inset-top));
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) 0 24px;
  color: #f7f7fa;
}

.reference-home[hidden] {
  display: none;
}

.reference-home-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.reference-home-mark {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border: 1px solid rgba(58,155,255,.62);
  border-radius: 13px;
  background: #07121e;
  box-shadow: 0 0 20px rgba(35,127,226,.25), inset 0 1px 0 rgba(255,255,255,.13);
}

.reference-home-mark img {
  width: 27px;
  height: 27px;
  border-radius: 8px;
}

.reference-home-brand > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.reference-home-brand > div:nth-child(2) b {
  font-family: "Lilita One", sans-serif;
  font-size: 17px;
  font-weight: 400;
}

.reference-home-brand > div:nth-child(2) span {
  margin-top: 3px;
  color: #4aa9ff;
  font-family: "Caveat", cursive;
  font-size: 14px;
  font-weight: 700;
  transform: rotate(-5deg);
}

.reference-balance {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 29px;
  margin-left: auto;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: #f6f6f8;
  background: rgba(22,24,28,.84);
  font-size: 11px;
}

.reference-balance:first-letter { color: #ffd35a; }

.reference-script {
  margin: clamp(46px, 10vh, 90px) 0 3px;
  color: #3f9fff;
  font-family: "Caveat", cursive;
  font-size: 23px;
  font-weight: 700;
  transform: rotate(-3deg);
}

.reference-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.reference-title-row h2 {
  margin: 0;
  font-family: "Lilita One", sans-serif;
  font-size: clamp(42px, 12vw, 66px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .94;
}

.reference-title-row > span {
  margin-bottom: 8px;
  color: rgba(255,255,255,.54);
  font-size: 11px;
  font-weight: 700;
}

.reference-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  min-height: 38px;
  margin-top: 20px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 13px;
  color: #fff;
  background: rgba(22,24,27,.88);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.reference-mode span { color: #3e9dff; }
.reference-mode i { margin-left: 2px; color: rgba(255,255,255,.55); font-style: normal; }

.reference-input-row {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 14px;
}

.reference-input-row input {
  width: 100%;
  min-height: 64px;
  padding: 0 92px 0 19px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 32px;
  color: #fff;
  outline: 0;
  background: rgba(7,9,11,.92);
  font-size: 15px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 30px rgba(0,0,0,.18);
}

.reference-input-row input::placeholder { color: rgba(255,255,255,.45); }
.reference-input-row input:focus { border-color: rgba(66,159,255,.82); box-shadow: 0 0 0 3px rgba(66,159,255,.12); }

.reference-counter {
  position: absolute;
  right: 61px;
  color: rgba(255,255,255,.5);
  font-size: 10px;
  font-weight: 800;
}

.reference-input-row > button {
  position: absolute;
  right: 7px;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #2688ed, #51aeff);
  box-shadow: 0 7px 20px rgba(27,130,226,.36), inset 0 1px 0 rgba(255,255,255,.35);
  cursor: pointer;
  font-size: 19px;
}

.reference-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 35px;
}

.reference-section-head > span {
  color: #3f9fff;
  font-family: "Caveat", cursive;
  font-size: 20px;
  font-weight: 700;
  transform: rotate(-2deg);
}

.reference-section-head button {
  border: 0;
  color: rgba(255,255,255,.5);
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.reference-popular {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.reference-card {
  position: relative;
  min-height: 143px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(145deg, #22272f, #0e1014);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 13px 30px rgba(0,0,0,.22);
  cursor: pointer;
  font-family: "Lilita One", sans-serif;
  font-size: 22px;
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease;
}

.reference-card:hover { border-color: rgba(73,161,255,.78); transform: translateY(-3px); }
.reference-card span { position: absolute; top: 17px; left: 14px; transform: rotate(-8deg); }
.reference-card i { position: absolute; right: 15px; bottom: 14px; color: #4caaff; font-size: 38px; font-style: normal; }
.ref-card-a { background: radial-gradient(circle at 62% 70%, rgba(255,54,94,.35), transparent 25%), linear-gradient(145deg, #242932, #0d0f13); }
.ref-card-b { background: radial-gradient(circle at 38% 65%, rgba(84,173,255,.36), transparent 27%), linear-gradient(145deg, #242932, #0d0f13); }
.ref-card-c { background: radial-gradient(circle at 55% 65%, rgba(160,113,255,.43), transparent 27%), linear-gradient(145deg, #242932, #0d0f13); }
.reference-popular .reference-card {
  background: linear-gradient(145deg, #242932, #0d0f13);
}
.ref-card-a i { color: #ff4775; }
.ref-card-b i { color: #60b7ff; }
.ref-card-c i { color: #bd8dff; }

.reference-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: auto;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(19,21,24,.92);
}

.reference-tabs button,
.reference-tabs a {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 13px;
  color: rgba(255,255,255,.55);
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.reference-tabs button.active,
.reference-tabs button:hover,
.reference-tabs a:hover {
  color: #fff;
  background: #268dec;
  box-shadow: 0 8px 20px rgba(35,140,236,.22);
}

.reference-tabs span { color: #68b6ff; font-size: 15px; }
.reference-tabs .active span { color: #fff; }

@media (max-height: 690px) {
  .reference-script { margin-top: 22px; }
  .reference-mode { margin-top: 12px; }
  .reference-section-head { margin-top: 20px; }
  .reference-card { min-height: 112px; }
}

@media (max-width: 390px) {
  .reference-home { padding-right: 0; padding-left: 0; }
  .reference-card { min-height: 126px; border-radius: 18px; font-size: 18px; }
}

/* Real animated TGS previews. The browser renders the decompressed JSON copies
   of the .tgs files from miniapp/stickers/. */
.welcome-tgs,
.support-tgs,
.reward-tgs,
.home-tgs {
  position: relative;
  overflow: hidden;
}

.welcome-tgs canvas,
.support-tgs canvas,
.reward-tgs canvas,
.home-tgs canvas,
.welcome-tgs svg,
.support-tgs svg,
.reward-tgs svg,
.home-tgs svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.welcome-tgs img,
.support-tgs img,
.reward-tgs img,
.home-tgs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.welcome-card .welcome-tgs {
  align-self: flex-end;
  width: 75px;
  height: 75px;
  margin-top: auto;
}

.welcome-card--two .welcome-tgs { width: 82px; height: 82px; }
.welcome-card--three .welcome-tgs { width: 70px; height: 70px; }

.market-tile {
  overflow: hidden;
}

.market-tile .welcome-tgs {
  width: 78px;
  height: 78px;
}

.support-phone {
  overflow: hidden;
}

.support-avatar {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(79,169,255,.72);
  border-radius: 13px;
  box-shadow: 0 7px 18px rgba(39,139,238,.28);
}

.support-phone .support-tgs {
  position: absolute;
  right: -1px;
  bottom: -12px;
  width: 100px;
  height: 100px;
  opacity: .8;
}

.support-phone strong,
.support-phone small,
.support-phone b {
  position: relative;
  z-index: 1;
}

.level-reward .reward-tgs {
  width: 33px;
  height: 33px;
}

.reference-card .home-tgs {
  position: absolute;
  right: 7px;
  bottom: 6px;
  left: 7px;
  height: 92px;
}

.reference-card .home-tgs canvas,
.reference-card .home-tgs svg {
  filter: drop-shadow(0 6px 11px rgba(64,160,255,.28));
}

.reference-card span {
  z-index: 2;
}

@media (max-height: 690px) {
  .welcome-card .welcome-tgs { width: 62px; height: 62px; }
  .market-tile .welcome-tgs { width: 58px; height: 58px; }
  .reference-card .home-tgs { height: 78px; }
}

/* Fast, clean startup splash. The old chat-like loader is intentionally gone. */
.boot-screen {
  align-items: center;
  padding: max(17px, env(safe-area-inset-top)) 18px max(15px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 37%, rgba(28,101,177,.12), transparent 16rem),
    radial-gradient(circle at 50% 100%, rgba(41,105,190,.1), transparent 18rem),
    #050608;
}

.boot-screen::before {
  opacity: .18;
  background-image:
    radial-gradient(circle at 15% 25%, transparent 0 13px, rgba(255,255,255,.07) 14px 15px, transparent 16px),
    radial-gradient(circle at 78% 72%, transparent 0 20px, rgba(255,255,255,.05) 21px 22px, transparent 23px),
    linear-gradient(125deg, transparent 0 49%, rgba(255,255,255,.045) 50% 51%, transparent 52%);
  background-size: 168px 196px, 226px 244px, 132px 132px;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 90%, transparent);
}

.boot-screen::after {
  bottom: -100px;
  width: 390px;
  height: 220px;
  background: radial-gradient(ellipse, rgba(36,130,228,.18), transparent 70%);
  filter: blur(24px);
}

.boot-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(520px, 100%);
  align-items: center;
  justify-content: space-between;
  padding: 0;
  background: transparent;
  animation: boot-simple-in .42s ease both;
}

.boot-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.boot-logo-mark {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(60,158,255,.7);
  border-radius: 14px;
  background: #07121e;
  box-shadow: 0 0 24px rgba(35,130,230,.26), inset 0 1px 0 rgba(255,255,255,.14);
}

.boot-logo-mark img { width: 100%; height: 100%; object-fit: cover; }

.boot-logo-text {
  display: flex;
  flex-direction: column;
  color: #fff;
  line-height: 1;
}

.boot-logo-text b {
  font-family: "Lilita One", sans-serif;
  font-size: 17px;
  font-weight: 400;
}

.boot-logo-text i {
  margin-top: 4px;
  color: #51a9ff;
  font-family: "Caveat", cursive;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  transform: rotate(-4deg);
}

.boot-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(78,167,255,.52);
  border-radius: 999px;
  color: #fff;
  background: rgba(20,42,68,.72);
  box-shadow: 0 0 18px rgba(34,125,222,.16);
  font-size: 11px;
  font-weight: 800;
}

.boot-badge-dot,
.boot-status-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #48a8ff;
  box-shadow: 0 0 12px rgba(72,168,255,.82);
}

.boot-splash {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(390px, 100%);
  flex: 1;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: boot-simple-in .58s .05s ease both;
}

.boot-splash-kicker {
  margin: 0 0 3px;
  color: rgba(83,171,255,.84);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .25em;
}

.boot-splash-art {
  position: relative;
  display: grid;
  width: min(198px, 54vw);
  height: min(198px, 54vw);
  margin: 8px 0 8px;
  place-items: center;
  border: 1px solid rgba(65,159,255,.21);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23,74,125,.24), rgba(5,7,10,.1) 65%, transparent 66%);
  box-shadow: 0 0 55px rgba(31,121,216,.15), inset 0 0 38px rgba(44,129,219,.08);
}

.boot-splash-art::before,
.boot-splash-art::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(74,165,255,.12);
  border-radius: 50%;
}

.boot-splash-art::before { inset: 17px; }
.boot-splash-art::after { inset: -24px; opacity: .55; }

.boot-tgs {
  position: relative;
  z-index: 1;
  width: 132px;
  height: 132px;
  filter: drop-shadow(0 12px 20px rgba(44,146,255,.22));
}

.boot-tgs canvas,
.boot-tgs svg { width: 100% !important; height: 100% !important; }

.boot-orbit-dot {
  position: absolute;
  z-index: 2;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #50aaff;
  box-shadow: 0 0 14px rgba(80,170,255,.9);
}

.boot-orbit-dot--one { top: 13%; left: 19%; }
.boot-orbit-dot--two { right: 12%; bottom: 24%; width: 4px; height: 4px; opacity: .65; }
.boot-orbit-dot--three { bottom: 12%; left: 31%; width: 3px; height: 3px; opacity: .48; }

.boot-splash h1 {
  margin: 0;
  color: #fff;
  font-family: "Lilita One", sans-serif;
  font-size: clamp(35px, 10vw, 52px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .96;
}

.boot-splash h1 em {
  color: #8dbaff;
  font-style: normal;
}

.boot-splash-copy {
  margin: 12px 0 22px;
  color: rgba(236,241,250,.54);
  font-size: 12px;
  line-height: 1.5;
}

.boot-load-status {
  display: flex;
  width: min(340px, 100%);
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.58);
  font-size: 10px;
  text-align: left;
}

.boot-load-status strong {
  overflow: hidden;
  flex: 1;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boot-load-status b {
  color: #5badff;
  font-size: 10px;
  font-weight: 800;
}

.boot-splash .boot-progress {
  width: min(340px, 100%);
  height: 7px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}

.boot-splash .boot-progress span {
  display: block;
  width: 12%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2588ed, #80c7ff);
  box-shadow: 0 0 15px rgba(61,166,255,.7);
  transition: width 240ms ease;
}

.boot-splash .boot-phrase {
  width: min(340px, 100%);
  margin: 8px 0 0;
  color: rgba(255,255,255,.38);
  font-size: 10px;
  text-align: right;
}

.boot-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 21px;
  color: rgba(255,255,255,.26);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.boot-steps .active { color: #55aaff; }
.boot-steps i { width: 22px; height: 1px; background: rgba(255,255,255,.12); }

.boot-footer {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(98,171,255,.42);
  font-size: 10px;
}

@keyframes boot-simple-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-height: 690px) {
  .boot-splash-art { width: 145px; height: 145px; margin-top: 2px; }
  .boot-tgs { width: 100px; height: 100px; }
  .boot-splash h1 { font-size: 34px; }
  .boot-splash-copy { margin: 8px 0 14px; }
  .boot-steps { margin-top: 13px; }
}

/* Preview v58: clean empty state and a tighter, product-like result card. */
.preview-panel {
  padding: 22px;
  border: 1px solid rgba(91, 165, 232, .2);
  border-radius: 24px;
  background: linear-gradient(155deg, rgba(20, 25, 32, .98), rgba(7, 10, 14, .98));
  box-shadow: 0 22px 56px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.04);
}

.preview-panel .panel-head {
  align-items: center;
}

.preview-panel .panel-head h2 {
  margin: 7px 0 0;
  letter-spacing: -.035em;
}

.preview-panel .panel-pill {
  min-height: 30px;
  padding: 5px 12px;
  border-radius: 10px;
  background: rgba(18, 42, 65, .54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.preview-stage {
  min-height: 340px;
  margin-top: 16px;
  border: 1px solid rgba(84, 166, 232, .28);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 42%, rgba(42, 126, 207, .18), transparent 42%),
    linear-gradient(145deg, #121c28, #0b1118 72%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), inset 0 -22px 46px rgba(0,0,0,.2);
}

.preview-stage::before {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(120, 186, 232, .1);
  border-radius: 16px;
  background-image:
    linear-gradient(rgba(129, 187, 225, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 187, 225, .035) 1px, transparent 1px);
  background-size: 28px 28px;
  content: "";
  pointer-events: none;
}

.preview-stage::after {
  inset: 18px;
  border: 1px dashed rgba(139, 197, 236, .16);
  border-radius: 16px;
}

.preview-glow {
  width: 180px;
  height: 180px;
  background: rgba(47, 143, 232, .15);
  filter: blur(48px);
}

#previewImage:not([src]),
#previewImage[src=""] {
  display: none;
}

#previewImage {
  width: min(84%, 380px);
  max-height: 300px;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 18px;
  box-shadow: 0 18px 36px rgba(0,0,0,.2);
}

.preview-empty {
  gap: 10px;
  color: rgba(224, 235, 246, .72);
}

.preview-empty-tgs {
  width: min(206px, 64vw);
  height: 190px;
  filter: drop-shadow(0 18px 24px rgba(42, 144, 235, .24));
}

.preview-empty > span {
  color: rgba(224, 235, 246, .55);
  font-size: 11px;
  font-weight: 600;
}

.preview-create-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 39px;
  margin-top: 5px;
  padding: 0 13px 0 10px;
  border: 1px solid rgba(86, 173, 255, .58);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(110deg, #2085e8, #43a8ff);
  box-shadow: 0 10px 22px rgba(26, 125, 219, .24), inset 0 1px 0 rgba(255,255,255,.3);
  cursor: pointer;
  font-size: 11px;
  transition: transform 280ms cubic-bezier(.22,1,.36,1), filter 280ms ease, box-shadow 280ms ease;
}

.preview-create-cta span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.18);
}

.preview-create-cta b { font-weight: 850; }
.preview-create-cta i { margin-left: 3px; font-size: 16px; font-style: normal; }
.preview-create-cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 13px 28px rgba(26, 125, 219, .34), inset 0 1px 0 rgba(255,255,255,.35);
  transform: translateY(-2px);
}

.preview-create-cta:active { transform: translateY(0) scale(.98); }

.preview-footer {
  align-items: center;
  margin-top: 13px;
  color: rgba(218, 231, 243, .62);
  font-size: 11px;
}

.preview-footer > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.preview-footer .status-dot {
  width: 6px;
  height: 6px;
  margin: 0;
  background: #55adff;
  box-shadow: 0 0 12px rgba(85,173,255,.9);
}

.preview-note {
  color: #69b8ff;
  letter-spacing: .02em;
}

html { scroll-behavior: smooth; }

button,
a,
.category-button,
.template-card,
.reference-card,
.control-block,
.section-card {
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.category-button,
.template-card,
.reference-card,
.ghost-button,
.top-nav,
.support-button {
  transition-duration: 280ms;
}

@media (prefers-reduced-motion: no-preference) {
  .preview-empty-tgs {
    animation: preview-float 5.8s ease-in-out infinite;
  }

  .preview-create-cta,
  .reference-card,
  .category-button,
  .template-card {
    will-change: transform;
  }
}

/* Keep failed/loading states composed: authored display rules must not defeat
   the native hidden attribute on editor surfaces. */
.hero-layout[hidden],
.packs-section[hidden],
[data-editor-surface][hidden] {
  display: none !important;
}

@keyframes preview-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(0, -7px, 0) rotate(1deg); }
}

@media (max-width: 470px) {
  .preview-panel { padding: 17px; border-radius: 21px; }
  .preview-stage { min-height: 282px; border-radius: 19px; }
  .preview-stage::before,
  .preview-stage::after { inset: 13px; border-radius: 14px; }
  .preview-empty-tgs { width: min(178px, 60vw); height: 158px; }
  #previewImage { max-height: 245px; }
}

/* Nikivus v61: compact constructor layout, based on the approved reference. */
:root {
  --v61-page: #3d3f4e;
  --v61-card: #2e3040;
  --v61-card-soft: #353747;
  --v61-line: #555971;
  --v61-blue: #7e8cf0;
  --v61-text: #f8f8fb;
  --v61-muted: #aeb1c0;
}

html,
body {
  background: var(--v61-page) !important;
}

body {
  background-image: none !important;
}

body::before {
  display: none !important;
}

.app-shell {
  width: min(390px, 100%);
  min-height: 100vh;
  padding: max(12px, env(safe-area-inset-top)) 14px calc(86px + env(safe-area-inset-bottom));
}

.studio-topbar {
  margin: 0 0 31px;
  gap: 9px;
}

.brand-lockup {
  gap: 10px;
}

.brand-symbol {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.brand-symbol img {
  width: 25px;
  height: 25px;
  border-radius: 8px;
}

.brand-lockup h1 {
  font-size: 19px;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.studio-topbar .brand-lockup h1 {
  text-shadow: 0 0 22px rgba(170, 166, 255, 0.14);
}

.brand-lockup .subtitle {
  margin-top: 2px;
  font-size: 10px;
}

.top-actions {
  gap: 6px;
}

.top-nav {
  min-height: 29px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 10px;
}

.top-nav span {
  font-size: 14px;
}

.icon-button,
.compact-icon {
  width: 29px;
  height: 29px;
  border-radius: 7px;
  font-size: 14px;
}

body:not(.reference-home-open) .support-button {
  display: none;
}

body:not(.reference-home-open) #openLibrary {
  width: 29px;
  padding-right: 6px;
  padding-left: 6px;
  font-size: 0;
}

body:not(.reference-home-open) #openLibrary span {
  font-size: 14px;
}

body:not(.reference-home-open) #refreshPreview {
  display: none;
}

.hero-layout {
  display: block;
  margin: 0;
}

.studio-summary {
  display: none !important;
}

.preview-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.preview-panel .panel-head {
  display: block;
  margin: 0 7px 16px;
}

.preview-panel .panel-head .section-kicker {
  display: none;
}

.preview-panel .panel-head h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.04;
  letter-spacing: -.05em;
}

.preview-panel .panel-pill {
  display: none;
}

.preview-stage {
  min-height: 190px !important;
  height: 190px;
  margin: 0;
  border: 1px solid #3a3d4e;
  border-radius: 17px;
  background: #2e3040;
  box-shadow: none;
}

.preview-stage::before,
.preview-stage::after {
  display: none !important;
}

.preview-glow {
  width: 170px;
  height: 150px;
  background: rgba(79, 161, 255, .11);
  filter: blur(34px);
}

#previewImage {
  width: 100%;
  max-height: 178px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 12px 15px rgba(0, 0, 0, .22));
}

.preview-empty {
  gap: 0;
}

.preview-empty-tgs {
  width: 154px;
  height: 150px;
  filter: drop-shadow(0 13px 18px rgba(60, 152, 239, .2));
}

.preview-empty > span {
  display: none;
}

.preview-footer {
  display: none;
}

.templates-panel,
.pack-editor,
.editor-shell,
.packs-section {
  margin-top: 21px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.templates-panel .section-title-row {
  align-items: center;
  margin: 0 7px 10px;
}

.templates-panel .section-kicker,
.templates-panel .section-title-row p {
  display: none;
}

.templates-panel .section-title-row h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -.02em;
}

.template-actions {
  gap: 5px;
}

.template-actions .ghost-button {
  min-height: 27px;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 9px;
}

.category-strip {
  gap: 3px;
  margin: 0 0 10px;
  padding: 0 1px;
}

.category-button {
  min-height: 31px;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  color: var(--v61-muted);
  background: transparent;
  font-size: 10px;
}

.category-button.active {
  color: #fff;
  background: #2d2f3d;
  box-shadow: 0 3px 10px rgba(20, 21, 30, .16);
}

.category-button.development {
  opacity: .72;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  min-height: 0;
  margin: 0;
  padding: 7px;
  overflow: visible;
  border: 1px solid #414558;
  border-radius: 14px;
  background: #2e3040;
  scrollbar-width: none;
}

.template-card {
  width: auto;
  min-width: 0;
  height: 79px;
  flex: initial;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #3a3c4c;
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1), border-color 420ms ease, background 420ms ease, box-shadow 420ms ease;
}

.template-card:hover {
  border-color: #9ba9ff;
  background: #44475a;
  transform: translateY(-3px);
}

.template-card.selected {
  border-color: #aebaff;
  background: #3b3e52;
  box-shadow: 0 0 0 1px rgba(126, 140, 240, .52);
}

.template-card img {
  padding: 5px;
}

.template-index {
  top: 5px;
  left: 5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #fff;
  background: #8492f1;
  font-size: 9px;
}

.template-remove {
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  font-size: 11px;
}

.bottom-action {
  padding: 8px 14px max(13px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(61, 63, 78, .96) 32%, #3d3f4e 100%);
}

.primary-button {
  width: min(362px, calc(100vw - 28px));
  min-height: 42px;
  border-radius: 10px;
  color: #fff;
  background: #2d2f3d;
  box-shadow: 0 7px 16px rgba(31, 32, 45, .18);
  font-size: 14px;
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1), background 420ms ease, box-shadow 420ms ease;
}

.primary-button:hover {
  background: #3b3e52;
  box-shadow: 0 11px 23px rgba(31, 32, 45, .28);
  transform: translateY(-2px);
}

.preview-example-badge {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 3;
  padding: 5px 8px;
  border-radius: 5px;
  color: #fff;
  background: #424559;
  font-size: 9px;
  font-weight: 900;
}

.top-actions {
  position: relative;
}

.language-button {
  width: auto;
  min-width: 38px;
  padding: 0 8px;
  color: #dce3ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
}

.language-popover {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 40;
  display: grid;
  width: 172px;
  gap: 4px;
  padding: 8px;
  border: 1px solid #555b74;
  border-radius: 13px;
  background: #2b2e3d;
  box-shadow: 0 16px 32px rgba(14, 15, 24, .32);
  animation: language-popover-in 220ms cubic-bezier(.2, .8, .2, 1);
}

.language-popover[hidden] {
  display: none;
}

.language-popover-title {
  padding: 4px 7px 6px;
  color: #aeb4cf;
  font-size: 9px;
  font-weight: 800;
}

.language-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 5px 7px;
  border: 0;
  border-radius: 8px;
  color: #e4e6f4;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}

.language-option:hover,
.language-option.active {
  color: #fff;
  background: #45495f;
}

.language-option:hover {
  transform: translateX(2px);
}

.language-option b {
  font-size: 10px;
}

.language-option i {
  color: #aeb9ff;
  font-size: 11px;
  font-style: normal;
  text-align: right;
}

@keyframes language-popover-in {
  from { opacity: 0; transform: translateY(-5px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.templates-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  min-height: 0;
  padding: 7px 7px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #7d89d7 transparent;
}

.template-card {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  scroll-snap-align: start;
}

.template-create-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  padding: 0 13px;
  border: 1px solid #4b4f66;
  border-radius: 11px;
  color: #f6f7ff;
  background: #292c3a;
  box-shadow: 0 8px 16px rgba(20, 21, 31, .14);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1), background 420ms ease, border-color 420ms ease, opacity 220ms ease;
}

.template-create-button:hover:not(:disabled) {
  border-color: #9ba9ff;
  background: #363a4d;
  transform: translateY(-2px);
}

.template-create-button:disabled {
  cursor: not-allowed;
  opacity: .46;
}

.template-create-button b {
  color: #aeb9ff;
  font-size: 10px;
}

.template-create-button i {
  color: #aeb9ff;
  font-size: 17px;
  font-style: normal;
  text-align: right;
}

/* The real action lives below the template rail. Keep the preview focused
   on the emoji and never overlay a second blue CTA on top of it. */
.preview-create-cta {
  display: none !important;
}

.preview-loading {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 4;
  display: none;
  padding: 5px 8px;
  border: 1px solid rgba(174, 185, 255, .2);
  border-radius: 7px;
  color: #c1c8e5;
  background: rgba(45, 47, 61, .82);
  font-size: 9px;
  font-weight: 800;
  pointer-events: none;
}

.preview-stage.preview-refreshing .preview-loading {
  display: inline-flex;
  animation: preview-loading-pulse 1.2s ease-in-out infinite;
}

.preview-stage.preview-refreshing #previewImage {
  opacity: .72;
  transform: scale(.985);
  transition: opacity 220ms ease, transform 220ms ease;
}

@keyframes preview-loading-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* v64 motion pass: swap two preview layers instead of replacing one image abruptly. */
#previewImage,
#previewImageNext {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 12px 15px rgba(0, 0, 0, .22));
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: opacity, transform, filter;
}

/* The source Lottie is played by the WebView at its native frame rate. The
   server still supplies the instant PNG underneath as the first paint. */
#previewAnimation {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
}

.preview-stage.preview-lottie-active #previewAnimation {
  display: flex;
}

/* Once the native Lottie layer is ready, hide the instant PNG underneath it.
   Keeping both visible creates a doubled, slightly offset outline. */
.preview-stage.preview-lottie-active #previewImage,
.preview-stage.preview-lottie-active #previewImageNext {
  opacity: 0;
  visibility: hidden;
}

#previewAnimation svg,
#previewAnimation canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  filter: drop-shadow(0 12px 15px rgba(0, 0, 0, .22));
}

.preview-animation-enter {
  animation: preview-animation-enter 360ms cubic-bezier(.18, .82, .22, 1) both;
}

@keyframes preview-animation-enter {
  from { opacity: 0; transform: scale(.985); filter: blur(2px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

#previewImage[src]:not([src=""]),
#previewImageNext[src]:not([src=""]) {
  display: block;
}

#previewImage[src=""],
#previewImageNext[src=""] {
  display: none;
}

.preview-image-enter {
  animation: preview-image-enter 520ms cubic-bezier(.18, .82, .22, 1) both;
}

.preview-image-leave {
  animation: preview-image-leave 520ms cubic-bezier(.18, .82, .22, 1) both;
}

@keyframes preview-image-enter {
  0% { opacity: 0; transform: translate3d(18px, 0, 0) scale(.94); filter: blur(7px) drop-shadow(0 12px 15px rgba(0, 0, 0, .14)); }
  55% { opacity: 1; transform: translate3d(-2px, 0, 0) scale(1.015); filter: blur(0) drop-shadow(0 12px 15px rgba(0, 0, 0, .22)); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0) drop-shadow(0 12px 15px rgba(0, 0, 0, .22)); }
}

@keyframes preview-image-leave {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-18px, 0, 0) scale(.96); filter: blur(6px) drop-shadow(0 12px 15px rgba(0, 0, 0, .08)); }
}

/* v64 boot screen: same slate card language as the constructor. */
.boot-screen {
  background: #3d3f4e !important;
  color: #f8f8fb;
}

.boot-screen::before {
  display: block;
  opacity: .34;
  background-image: radial-gradient(circle, rgba(174, 185, 255, .16) 1px, transparent 1px);
  background-size: 28px 28px;
}

.boot-screen::after {
  bottom: -90px;
  width: 360px;
  height: 220px;
  background: radial-gradient(ellipse, rgba(126, 140, 240, .2), transparent 70%);
  filter: blur(24px);
}

.boot-topbar {
  padding: max(14px, env(safe-area-inset-top)) 16px 10px;
  background: linear-gradient(to bottom, rgba(61, 63, 78, .98), rgba(61, 63, 78, .82) 74%, transparent);
}

.boot-logo {
  gap: 9px;
}

.boot-logo-mark {
  width: 40px;
  height: 40px;
  border-color: #59617f;
  border-radius: 12px;
  background: #2e3040;
  box-shadow: 0 8px 22px rgba(27, 29, 43, .2), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.boot-logo-text b {
  color: #f8f8fb;
  font-size: 15px;
}

.boot-logo-text i {
  color: #aeb9ff;
}

.boot-badge {
  padding: 7px 12px;
  border-color: #6975a5;
  color: #e6e9ff;
  background: #2e3040;
  box-shadow: 0 7px 18px rgba(27, 29, 43, .16);
}

.boot-splash {
  position: relative;
  z-index: 1;
  width: min(360px, calc(100% - 28px));
  margin: auto;
  padding: 22px 18px 19px;
  border: 1px solid #555b74;
  border-radius: 22px;
  background: #2e3040;
  box-shadow: 0 20px 48px rgba(29, 30, 43, .2), inset 0 1px 0 rgba(255, 255, 255, .04);
  text-align: center;
  animation: boot-card-in 700ms cubic-bezier(.18, .82, .22, 1) both;
}

@keyframes boot-card-in {
  from { opacity: 0; transform: translateY(18px) scale(.97); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.boot-splash-kicker {
  color: #aeb9ff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .22em;
}

.boot-splash-art {
  width: 148px;
  height: 148px;
  margin: 14px auto 11px;
  border: 1px solid #4b5270;
  border-radius: 50%;
  background: #353747;
  box-shadow: inset 0 0 0 13px rgba(61, 63, 78, .42), 0 0 0 1px rgba(174, 185, 255, .08);
}

.boot-splash-art::before,
.boot-splash-art::after {
  border-color: rgba(174, 185, 255, .18) !important;
}

.boot-tgs {
  width: 108px;
  height: 108px;
  filter: drop-shadow(0 12px 18px rgba(126, 140, 240, .24));
}

.boot-splash h1 {
  color: #f8f8fb;
  font-size: clamp(27px, 8vw, 34px);
  line-height: .98;
  letter-spacing: -.055em;
}

.boot-splash h1 em {
  color: #aeb9ff;
}

.boot-splash-copy {
  margin-top: 9px;
  color: #b4b7c8;
  font-size: 11px;
  line-height: 1.45;
}

.boot-load-status {
  margin-top: 19px;
  color: #dfe2f1;
  font-size: 10px;
}

.boot-load-status b {
  color: #aeb9ff;
}

.boot-status-dot {
  background: #aeb9ff;
  box-shadow: 0 0 10px rgba(174, 185, 255, .8);
}

.boot-progress-wrap,
.boot-progress {
  background: rgba(18, 19, 29, .32);
}

.boot-progress {
  height: 6px;
  margin-top: 8px;
}

.boot-progress span {
  background: linear-gradient(90deg, #91a1ff, #d2b3ff);
  box-shadow: 0 0 14px rgba(174, 185, 255, .5);
}

.boot-phrase {
  margin-top: 7px;
  color: #aeb1c0;
  font-size: 10px;
}

.boot-steps {
  margin-top: 15px;
  color: #8d91a5;
  font-size: 9px;
}

.boot-steps .active {
  color: #aeb9ff;
}

.boot-footer {
  padding: 7px 16px max(14px, env(safe-area-inset-bottom));
  color: #aeb9ff;
  opacity: .48;
}

/* v64 language sheet: the same bottom card as the approved reference. */
body.language-open::after {
  position: fixed;
  inset: 0;
  z-index: 39;
  content: "";
  background: rgba(10, 12, 20, .58);
  backdrop-filter: blur(3px);
  animation: language-dim-in 240ms ease both;
}

.language-popover {
  position: fixed;
  top: auto;
  right: auto;
  bottom: max(9px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 41;
  width: min(380px, calc(100vw - 16px));
  gap: 0;
  padding: 21px 16px 16px;
  border: 1px solid #555b74;
  border-radius: 22px;
  background: #2e3040;
  box-shadow: 0 22px 60px rgba(11, 12, 20, .42), inset 0 1px 0 rgba(255, 255, 255, .05);
  transform: translateX(-50%);
  animation: language-sheet-in 360ms cubic-bezier(.18, .82, .22, 1) both;
}

.language-popover-title {
  padding: 0 7px;
  color: #f8f8fb;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.035em;
}

.language-popover-subtitle {
  margin: 4px 7px 15px;
  color: #aeb1c0;
  font-size: 11px;
  line-height: 1.35;
}

.language-option {
  grid-template-columns: 24px minmax(0, 1fr) 16px;
  min-height: 41px;
  margin-top: 8px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #f0f1f7;
  background: #3b3d4d;
  transition: background 280ms ease, border-color 280ms ease, transform 280ms cubic-bezier(.18, .82, .22, 1);
}

.language-option.active {
  border-color: #7f8eea;
  color: #dce1ff;
  background: #41445a;
}

.language-option:hover {
  transform: translateX(3px);
  background: #474a5e;
}

.language-option span {
  font-size: 19px;
}

.language-option b {
  font-size: 13px;
}

.language-option i {
  color: #aeb9ff;
  font-size: 23px;
  line-height: 1;
}

@keyframes language-sheet-in {
  from { opacity: 0; transform: translateX(-50%) translateY(28px) scale(.97); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes language-dim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The preview itself communicates the refresh. Keep the old status label out
   of the card so the transition stays clean and visual. */
.preview-loading {
  display: none !important;
}

.pack-editor,
.editor-shell {
  padding: 14px;
  border: 1px solid #484c61;
  border-radius: 16px;
  background: #2e3040;
}

.control-block {
  border-color: #484c61;
  border-radius: 14px;
  background: #292b39;
}

@media (max-width: 470px) {
  .app-shell {
    width: 100%;
    padding-right: 14px;
    padding-left: 14px;
  }

  .preview-panel {
    padding: 0;
    border-radius: 0;
  }

  .preview-stage {
    min-height: 190px !important;
    height: 190px;
    border-radius: 17px;
  }

  .templates-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* v65 boot redesign: one calm studio surface instead of a stack of cards. */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  color: #f7f8ff;
  background:
    radial-gradient(circle at 50% 40%, rgba(89, 108, 190, .16), transparent 31%),
    linear-gradient(145deg, #171a24 0%, #202434 55%, #171a24 100%) !important;
}

.boot-screen::before {
  inset: 0;
  opacity: .34;
  background-image:
    linear-gradient(120deg, transparent 0 42%, rgba(150, 166, 255, .055) 42.1% 42.3%, transparent 42.4%),
    radial-gradient(circle at 17% 20%, rgba(161, 175, 255, .16) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 74%, rgba(161, 175, 255, .12) 0 1px, transparent 1.5px);
  background-size: auto, 180px 180px, 210px 210px;
}

.boot-screen::after {
  right: auto;
  bottom: -150px;
  left: 50%;
  width: 440px;
  height: 280px;
  background: radial-gradient(ellipse, rgba(117, 136, 239, .17), transparent 68%);
  transform: translateX(-50%);
  filter: blur(34px);
}

.boot-noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .18;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .24) .6px, transparent .7px);
  background-size: 5px 5px;
  mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 75%, transparent);
}

.boot-brandbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(410px, calc(100% - 32px));
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 0 12px;
  background: transparent;
}

.boot-brandbar .boot-logo {
  display: flex;
  align-items: center;
  gap: 9px;
}

.boot-brandbar .boot-logo-mark {
  width: 39px;
  height: 39px;
  border: 1px solid rgba(147, 167, 255, .62);
  border-radius: 12px;
  background: #202536;
  box-shadow: 0 10px 24px rgba(5, 7, 15, .22), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.boot-brandbar .boot-logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.boot-brandbar .boot-logo-text {
  display: grid;
  line-height: 1;
}

.boot-brandbar .boot-logo-text b {
  color: #f7f8ff;
  font-size: 14px;
  letter-spacing: -.03em;
}

.boot-brandbar .boot-logo-text i {
  margin-top: 4px;
  color: #aab9ff;
  font-family: Caveat, cursive;
  font-size: 14px;
  font-style: normal;
}

.boot-brandbar .boot-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 0 12px;
  border: 1px solid rgba(143, 164, 255, .7);
  border-radius: 999px;
  color: #f0f2ff;
  background: rgba(30, 35, 53, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  font-size: 10px;
  font-weight: 900;
}

.boot-brandbar .boot-badge-dot,
.boot-progress-top .boot-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #71a9ff;
  box-shadow: 0 0 12px rgba(113, 169, 255, .9);
}

.boot-landing {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: min(410px, calc(100% - 32px));
  margin: 0 auto;
  padding: 9px 0 7px;
  text-align: center;
}

.boot-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #93a5ff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .24em;
}

.boot-kicker span {
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #93a5ff);
}

.boot-visual {
  position: relative;
  display: grid;
  width: min(218px, 58vw);
  height: min(218px, 58vw);
  margin: 14px 0 4px;
  place-items: center;
}

.boot-ring {
  position: absolute;
  border: 1px solid rgba(124, 157, 255, .25);
  border-radius: 50%;
  transform: rotate(-14deg);
}

.boot-ring--outer { inset: 1px; animation: boot-ring-breathe 4.8s ease-in-out infinite; }
.boot-ring--middle { inset: 21px; border-color: rgba(124, 157, 255, .34); animation: boot-ring-breathe 4.8s .35s ease-in-out infinite reverse; }
.boot-ring--inner { inset: 48px; border-color: rgba(124, 157, 255, .28); animation: boot-ring-breathe 4.8s .7s ease-in-out infinite; }

.boot-ring--outer::before,
.boot-ring--middle::before,
.boot-ring--inner::before {
  position: absolute;
  top: -3px;
  left: 22%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  content: "";
  background: #70aaff;
  box-shadow: 0 0 12px rgba(112, 170, 255, .9);
}

.boot-ring--middle::before { top: auto; right: 12%; bottom: 16%; left: auto; width: 4px; height: 4px; opacity: .7; }
.boot-ring--inner::before { top: 18%; right: 8%; left: auto; width: 3px; height: 3px; opacity: .5; }

.boot-tgs {
  position: relative;
  z-index: 2;
  display: grid;
  width: 106px;
  height: 106px;
  place-items: center;
  filter: drop-shadow(0 14px 22px rgba(80, 120, 255, .26));
  animation: boot-sticker-float 3.5s ease-in-out infinite;
}

.boot-tgs canvas,
.boot-tgs svg,
.boot-tgs img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.boot-copy h1 {
  margin: 0;
  color: #f8f9ff;
  font-size: clamp(30px, 8.8vw, 42px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.07em;
}

.boot-copy h1 em {
  color: #9db0ff;
  font-style: normal;
}

.boot-copy p {
  margin: 10px 0 0;
  color: #a7adbf;
  font-size: 11px;
  line-height: 1.5;
}

.boot-progress-panel {
  width: min(340px, 100%);
  margin-top: 22px;
  padding: 13px 14px 12px;
  border: 1px solid rgba(137, 151, 204, .2);
  border-radius: 15px;
  background: rgba(27, 31, 47, .68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 13px 35px rgba(7, 9, 18, .12);
  text-align: left;
}

.boot-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #dce2f8;
  font-size: 10px;
}

.boot-progress-top > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.boot-progress-top strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boot-progress-top b {
  color: #9db0ff;
  font-size: 10px;
}

.boot-progress-panel .boot-progress {
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(9, 12, 21, .54);
}

.boot-progress-panel .boot-progress span {
  display: block;
  width: 12%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #69a7ff, #a8b5ff);
  box-shadow: 0 0 16px rgba(105, 167, 255, .65);
  transition: width 600ms cubic-bezier(.18, .82, .22, 1);
}

.boot-progress-panel .boot-phrase {
  margin: 8px 0 0;
  color: #838ba4;
  font-size: 9px;
  text-align: right;
}

.boot-landing .boot-steps {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 17px;
  color: #737c96;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.boot-landing .boot-steps .active { color: #a8b6ff; }
.boot-landing .boot-steps i { width: 23px; height: 1px; background: rgba(155, 170, 226, .2); }

.boot-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 16px max(16px, env(safe-area-inset-bottom));
  color: #7180a7;
  font-size: 9px;
}

.boot-footer span {
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(144, 163, 234, .45));
}

@keyframes boot-ring-breathe {
  0%, 100% { opacity: .66; transform: rotate(-14deg) scale(.98); }
  50% { opacity: 1; transform: rotate(-7deg) scale(1.02); }
}

@keyframes boot-sticker-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}

@media (max-height: 650px) {
  .boot-visual { width: 166px; height: 166px; margin-top: 8px; }
  .boot-tgs { width: 82px; height: 82px; }
  .boot-copy h1 { font-size: 31px; }
  .boot-progress-panel { margin-top: 14px; }
  .boot-landing .boot-steps { margin-top: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-ring,
  .boot-tgs { animation: none; }
}

/* hours-compact-v1 — компактная тёмная оболочка по референсу Hours Studio.
   DOM и API редактора остаются прежними: меняется только presentation layer. */
:root {
  --hours-bg: #070a12;
  --hours-bg-soft: #0d111d;
  --hours-panel: #111624;
  --hours-panel-raised: #171d2d;
  --hours-line: rgba(150, 157, 205, .2);
  --hours-line-strong: rgba(157, 146, 255, .62);
  --hours-text: #f5f5fb;
  --hours-muted: #8c91a7;
  --hours-accent: #9b8cff;
  --hours-accent-strong: #7457dd;
}

html,
body {
  background: var(--hours-bg) !important;
}

body {
  min-width: 0;
  overflow-x: hidden;
  color: var(--hours-text);
  background:
    radial-gradient(circle at 50% -18%, rgba(116, 87, 221, .16), transparent 34%),
    linear-gradient(180deg, #090c14 0%, #070a12 72%) !important;
}

body::before {
  display: block !important;
  opacity: .18 !important;
  background-image: radial-gradient(rgba(182, 173, 255, .34) .65px, transparent .65px) !important;
  background-size: 8px 8px !important;
  mask-image: linear-gradient(to bottom, black 0%, transparent 74%) !important;
}

.app-shell {
  width: min(420px, 100%);
  min-height: 100vh;
  padding: max(14px, env(safe-area-inset-top)) 14px calc(98px + env(safe-area-inset-bottom));
}

.studio-topbar {
  position: relative;
  z-index: 40;
  display: flex;
  min-height: 39px;
  margin: 0 0 28px;
  padding: 0 2px;
  gap: 10px;
}

.brand-lockup {
  min-width: 0;
  gap: 10px;
}

.brand-lockup::before {
  display: block;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  content: "";
  border: 1px solid rgba(150, 157, 205, .55);
  border-radius: 11px;
  background: #0d1524 url("./nikivus-avatar-v2.svg") center / 26px no-repeat;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.studio-topbar .brand-copy {
  gap: 0;
}

.studio-topbar .brand-lockup h1 {
  font-size: 18px;
  line-height: 1;
  letter-spacing: -.04em;
  text-shadow: none;
}

.brand-lockup .subtitle {
  margin-top: 3px;
  color: var(--hours-muted);
  font-size: 9px;
  line-height: 1;
}

.top-actions {
  display: none !important;
}

.hours-profile-button,
.hours-editor-back {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin-left: auto;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(157, 146, 255, .46);
  border-radius: 50%;
  color: var(--hours-text);
  background: rgba(20, 26, 43, .88);
  cursor: pointer;
  transition: transform 260ms cubic-bezier(.2, .9, .3, 1.2), background 220ms ease, border-color 220ms ease;
}

.hours-profile-button:hover,
.hours-editor-back:hover {
  border-color: var(--hours-accent);
  background: #1b2034;
  transform: translateY(-1px);
}

.hours-profile-button img {
  width: 23px;
  height: 23px;
  border-radius: 8px;
}

.hours-editor-back {
  display: none;
  order: 3;
  margin-left: auto;
  font-size: 23px;
  line-height: 1;
}

body.compact-editor-open .hours-profile-button {
  display: none;
}

body.compact-editor-open .hours-editor-back {
  display: grid;
}

body.compact-home-open .reference-home,
body.compact-editor-open .reference-home {
  display: none !important;
}

body.compact-home-open .hero-layout,
body.compact-home-open .pack-editor,
body.compact-home-open .editor-shell {
  display: none !important;
}

body.compact-home-open .templates-panel {
  display: block !important;
}

body.compact-editor-open .templates-panel {
  display: none !important;
}

.templates-panel,
.pack-editor,
.editor-shell,
.packs-section {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hours-home-intro {
  margin: 0 4px 17px;
}

.hours-home-intro h2 {
  color: var(--hours-text);
  font-size: clamp(25px, 8vw, 31px);
  font-weight: 850;
  letter-spacing: -.055em;
}

.hours-home-intro p {
  max-width: 290px;
  margin-top: 6px;
  color: var(--hours-muted);
  font-size: 11px;
  line-height: 1.35;
}

.hours-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 4px 11px;
}

.hours-category-button {
  display: inline-flex;
  min-width: 89px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--hours-line);
  border-radius: 10px;
  color: var(--hours-text);
  background: var(--hours-panel);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease, transform 260ms cubic-bezier(.2, .9, .3, 1.2);
}

.hours-category-button:hover,
.hours-category-button[aria-expanded="true"] {
  border-color: var(--hours-line-strong);
  background: #171a2c;
  transform: translateY(-1px);
}

.hours-category-button i {
  color: var(--hours-accent);
  font-size: 14px;
  font-style: normal;
}

.hours-template-count {
  color: var(--hours-muted);
  font-size: 10px;
  font-weight: 750;
}

.category-strip {
  display: none !important;
}

.templates-panel .section-title-row {
  display: block;
  margin: 0 4px 11px;
}

.templates-panel .section-kicker,
.templates-panel .section-title-row p,
.templates-panel .template-actions {
  display: none !important;
}

.templates-panel .templates-heading-row {
  width: 100%;
}

.templates-panel .templates-heading-row h2 {
  color: var(--hours-text);
  font-size: 16px;
  letter-spacing: -.025em;
}

.templates-heading-row .template-view-toggle,
.template-view-toggle {
  display: none !important;
}

.templates-grid,
.templates-grid.templates-grid-expanded {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: none !important;
  min-height: 0;
  padding: 7px;
  overflow: visible !important;
  border: 1px solid rgba(150, 157, 205, .13);
  border-radius: 17px;
  background: rgba(13, 17, 29, .78);
}

.template-card,
.templates-grid.templates-grid-expanded .template-card {
  display: block;
  width: auto !important;
  min-width: 0;
  aspect-ratio: 1;
  flex: initial !important;
  padding: 5px;
  border: 1px solid rgba(150, 157, 205, .14);
  border-radius: 12px;
  background: #151b2a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  transform: none;
  transition: transform 300ms cubic-bezier(.2, .9, .3, 1.2), border-color 220ms ease, background 220ms ease, box-shadow 260ms ease !important;
}

.template-card:hover {
  border-color: rgba(157, 146, 255, .7);
  background: #1b2032;
  transform: translateY(-2px) !important;
}

.template-card.selected {
  border-color: var(--hours-accent);
  background: #1d2139;
  box-shadow: 0 0 0 1px rgba(157, 146, 255, .12), 0 8px 18px rgba(77, 56, 160, .18);
  transform: none !important;
}

.template-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 8px;
  background: #080b12;
  object-fit: contain;
}

.template-index {
  top: 7px;
  left: 7px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #fff;
  background: var(--hours-accent-strong);
  font-size: 9px;
  line-height: 17px;
}

.template-remove {
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(10, 12, 20, .85);
}

.template-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 4px 0;
  color: var(--hours-muted);
  font-size: 10px;
  font-weight: 750;
}

.template-pager button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--hours-line);
  border-radius: 50%;
  color: var(--hours-text);
  background: var(--hours-panel);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 240ms ease;
}

.template-pager button:not(:disabled):hover {
  border-color: var(--hours-line-strong);
  background: #1a1e31;
  transform: scale(1.06);
}

.template-pager button:disabled {
  cursor: default;
  opacity: .3;
}

.bottom-action {
  position: fixed;
  z-index: 60;
  right: auto;
  bottom: 0;
  left: 50%;
  width: min(420px, 100%);
  margin: 0;
  padding: 22px 14px calc(13px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(7, 10, 18, .98) 30%);
  pointer-events: none;
}

.bottom-action .primary-button {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(175, 159, 255, .72);
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #7659dc, #9a83f6);
  box-shadow: 0 12px 28px rgba(53, 35, 139, .28);
  font-size: 13px;
  font-weight: 850;
  pointer-events: auto;
}

.bottom-action .primary-button:disabled {
  border-color: rgba(150, 157, 205, .18);
  color: #72778d;
  background: #161b29;
  box-shadow: none;
}

.bottom-action.library-hidden,
.bottom-action.profile-hidden {
  display: none;
}

body.compact-editor-open .bottom-action .primary-button {
  background: linear-gradient(135deg, #7659dc, #9a83f6);
}

body.compact-home-open .bottom-action .button-arrow {
  display: none;
}

body.compact-editor-open .hero-layout {
  display: block !important;
  margin: 0;
}

body.compact-editor-open .preview-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.compact-editor-open .preview-panel .panel-head {
  display: block;
  margin: 0 4px 13px;
}

body.compact-editor-open .preview-panel .panel-head h2 {
  font-size: 26px;
  letter-spacing: -.055em;
}

body.compact-editor-open .preview-stage {
  min-height: 220px !important;
  height: 220px;
  border: 1px solid rgba(150, 157, 205, .12);
  border-radius: 17px;
  background: #111624;
  box-shadow: none;
}

body.compact-editor-open .preview-footer,
body.compact-editor-open .studio-summary {
  display: none;
}

body.compact-editor-open .pack-editor,
body.compact-editor-open .editor-shell {
  display: block !important;
  margin-top: 18px;
  padding: 15px;
  border: 1px solid rgba(150, 157, 205, .16);
  border-radius: 17px;
  background: rgba(17, 22, 36, .85);
  box-shadow: none;
}

body.compact-editor-open .editor-shell {
  margin-bottom: 8px;
}

.hours-profile-page {
  padding: 0 2px;
}

.hours-page-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
}

.hours-page-back {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--hours-line);
  border-radius: 50%;
  color: var(--hours-text);
  background: var(--hours-panel);
  font-size: 21px;
  cursor: pointer;
}

.hours-page-heading h2 {
  margin-top: 3px;
  font-size: 25px;
  letter-spacing: -.05em;
}

.hours-profile-card {
  padding: 15px;
  border: 1px solid var(--hours-line);
  border-radius: 17px;
  background: var(--hours-panel);
}

.hours-profile-main {
  display: flex;
  align-items: center;
  gap: 11px;
}

.hours-profile-main img {
  width: 45px;
  height: 45px;
  padding: 6px;
  border: 1px solid var(--hours-line-strong);
  border-radius: 13px;
  background: #090d17;
}

.hours-profile-main div {
  display: grid;
  gap: 4px;
}

.hours-profile-main b {
  font-size: 15px;
}

.hours-profile-main span,
.hours-balance-row span {
  color: var(--hours-muted);
  font-size: 10px;
}

.hours-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 17px;
  padding-top: 13px;
  border-top: 1px solid var(--hours-line);
}

.hours-balance-row b {
  color: var(--hours-accent);
  font-size: 20px;
}

.hours-profile-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.hours-profile-actions button,
.hours-profile-actions a {
  display: flex;
  min-height: 49px;
  align-items: center;
  gap: 11px;
  padding: 0 14px;
  border: 1px solid var(--hours-line);
  border-radius: 13px;
  color: var(--hours-text);
  background: var(--hours-panel);
  text-decoration: none;
  cursor: pointer;
}

.hours-profile-actions button:hover,
.hours-profile-actions a:hover {
  border-color: var(--hours-line-strong);
  background: var(--hours-panel-raised);
}

.hours-profile-actions span {
  width: 22px;
  color: var(--hours-accent);
  text-align: center;
  font-weight: 900;
}

.hours-profile-actions b {
  flex: 1;
  text-align: left;
  font-size: 12px;
}

.hours-profile-actions i {
  color: var(--hours-muted);
  font-size: 18px;
  font-style: normal;
}

.hours-profile-return {
  width: 100%;
  min-height: 46px;
  margin-top: 15px;
  border: 1px solid var(--hours-line-strong);
  border-radius: 13px;
  color: #fff;
  background: rgba(116, 87, 221, .24);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

body.hours-packs-open .packs-section {
  display: block !important;
}

.packs-section .section-title-row {
  display: block;
  margin: 0 4px 15px;
}

.packs-section .section-kicker,
.packs-section .section-title-row p {
  color: var(--hours-accent);
}

.packs-section .section-title-row h2 {
  margin-top: 4px;
  font-size: 25px;
}

.packs-section .back-to-studio {
  width: 100%;
  min-height: 43px;
  margin-bottom: 12px;
  border: 1px solid var(--hours-line);
  border-radius: 12px;
  color: var(--hours-text);
  background: var(--hours-panel);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.pack-list {
  display: grid;
  gap: 9px;
}

.pack-link {
  display: flex;
  min-height: 67px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--hours-line);
  border-radius: 14px;
  color: var(--hours-text);
  background: var(--hours-panel);
  text-decoration: none;
}

.pack-link strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-link span {
  max-width: 45%;
  overflow: hidden;
  color: var(--hours-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hours-category-modal,
.hours-category-modal[hidden] {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0;
  background: rgba(3, 5, 10, .7);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}

.hours-category-modal[hidden] {
  display: none;
}

.hours-category-card {
  width: min(420px, 100%);
  padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
  border: 1px solid var(--hours-line);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: #111624;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .4);
  animation: hours-sheet-in 360ms cubic-bezier(.2, .9, .3, 1.1) both;
}

.hours-sheet-grabber {
  width: 36px;
  height: 4px;
  margin: 0 auto 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}

.hours-sheet-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--hours-text);
  font-size: 15px;
}

.hours-sheet-heading button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  color: var(--hours-muted);
  background: transparent;
  font-size: 23px;
  cursor: pointer;
}

.hours-category-option {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  gap: 9px;
  margin-top: 7px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--hours-text);
  background: rgba(28, 34, 51, .8);
  cursor: pointer;
}

.hours-category-option b {
  flex: 1;
  text-align: left;
  font-size: 12px;
}

.hours-category-option i {
  color: var(--hours-muted);
  font-size: 10px;
  font-style: normal;
}

.hours-category-option span {
  color: var(--hours-accent);
  font-size: 16px;
}

.hours-category-option.active {
  border-color: var(--hours-line-strong);
  background: rgba(116, 87, 221, .2);
}

body.language-open .studio-topbar .top-actions {
  display: block !important;
  position: static;
}

body.language-open .studio-topbar .top-actions > *:not(.language-popover) {
  display: none !important;
}

body.language-open::after {
  z-index: 1000;
  pointer-events: none;
  background: rgba(3, 5, 10, .76) !important;
  backdrop-filter: blur(13px) !important;
  -webkit-backdrop-filter: blur(13px) !important;
}

body.language-open .language-popover {
  position: fixed;
  z-index: 1200;
  right: auto;
  bottom: 0;
  left: 50%;
  width: min(420px, 100%);
  margin: 0;
  padding: 22px 14px calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  border: 1px solid var(--hours-line);
  border-bottom: 0;
  border-radius: 23px 23px 0 0;
  background: #111624;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .4);
  animation: hours-sheet-in 360ms cubic-bezier(.2, .9, .3, 1.1) both;
}

body.language-open .language-popover-title {
  font-size: 17px;
}

body.language-open .language-popover-subtitle {
  color: var(--hours-muted);
}

body.language-open .language-option {
  min-height: 45px;
  margin-top: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(28, 34, 51, .8);
}

body.language-open .language-option.active {
  border-color: var(--hours-line-strong);
  background: rgba(116, 87, 221, .2);
}

@keyframes hours-sheet-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 350px) {
  .app-shell {
    padding-right: 10px;
    padding-left: 10px;
  }

  .template-card,
  .templates-grid.templates-grid-expanded .template-card {
    padding: 4px;
    border-radius: 10px;
  }
}

/* v67 boot rewrite: a single editorial studio card with a clear visual focus. */
.boot-screen {
  background:
    radial-gradient(circle at 50% 16%, rgba(95, 125, 239, .16), transparent 27%),
    linear-gradient(155deg, #0d111b 0%, #171d2c 58%, #0d111b 100%) !important;
}

.boot-screen::before {
  opacity: .26;
  background-image:
    linear-gradient(90deg, rgba(145, 164, 255, .05) 1px, transparent 1px),
    linear-gradient(rgba(145, 164, 255, .05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.boot-screen::after {
  bottom: -170px;
  width: 520px;
  height: 320px;
  background: radial-gradient(ellipse, rgba(79, 115, 242, .17), transparent 68%);
}

.boot-landing {
  justify-content: center;
  width: min(420px, calc(100% - 28px));
  padding: 14px 0 11px;
}

.boot-kicker {
  align-self: flex-start;
  margin-left: 9px;
  color: #9eafff;
  letter-spacing: .2em;
}

.boot-kicker b { font-weight: 900; }

.boot-showcase {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 198px;
  margin-top: 13px;
  padding: 17px 16px;
  border: 1px solid rgba(135, 157, 236, .26);
  border-radius: 23px;
  background: linear-gradient(145deg, rgba(42, 50, 77, .76), rgba(24, 29, 45, .86));
  box-shadow: 0 22px 50px rgba(2, 5, 15, .26), inset 0 1px 0 rgba(255, 255, 255, .07);
  text-align: left;
  animation: boot-showcase-in 680ms cubic-bezier(.18, .82, .22, 1) both;
}

.boot-showcase-art {
  position: relative;
  display: grid;
  width: 144px;
  height: 164px;
  place-items: center;
  border: 1px solid rgba(127, 157, 255, .17);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 44%, rgba(102, 133, 245, .18), transparent 62%), rgba(11, 15, 27, .35);
  overflow: hidden;
}

.boot-showcase-art::after {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(136, 163, 255, .16);
  border-radius: 50%;
  content: "";
  transform: rotate(-18deg) scaleX(.72);
}

.boot-orbit {
  position: absolute;
  border: 1px solid rgba(133, 160, 255, .25);
  border-radius: 50%;
  transform: rotate(-22deg) scaleX(.72);
}

.boot-orbit--one { inset: 12px; animation: boot-orbit-pulse 4s ease-in-out infinite; }
.boot-orbit--two { inset: 31px; border-color: rgba(133, 160, 255, .34); animation: boot-orbit-pulse 4s .4s ease-in-out infinite reverse; }

.boot-showcase-art .boot-tgs {
  z-index: 2;
  width: 92px;
  height: 92px;
  animation: boot-sticker-float 3.8s ease-in-out infinite;
}

.boot-showcase-art .boot-orbit-dot--one { top: 21px; left: 35px; }
.boot-showcase-art .boot-orbit-dot--two { right: 19px; bottom: 27px; }
.boot-showcase-art .boot-orbit-dot--three { bottom: 17px; left: 54px; }

.boot-showcase-copy {
  min-width: 0;
  padding-left: 17px;
}

.boot-showcase-label {
  color: #7f92e8;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
}

.boot-showcase-copy h1 {
  margin: 11px 0 0;
  color: #f7f8ff;
  font-size: clamp(26px, 7.4vw, 36px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.065em;
}

.boot-showcase-copy h1 span,
.boot-showcase-copy h1 em { display: block; }

.boot-showcase-copy h1 em {
  color: #9eb0ff;
  font-style: normal;
}

.boot-showcase-copy p {
  margin: 11px 0 0;
  color: #a7afc4;
  font-size: 10px;
  line-height: 1.45;
  white-space: pre-line;
}

.boot-progress-panel {
  margin-top: 14px;
  border-color: rgba(135, 157, 236, .24);
  background: rgba(18, 23, 37, .8);
}

.boot-landing .boot-steps { margin-top: 13px; }

.boot-footer { padding-top: 7px; }

@keyframes boot-showcase-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes boot-orbit-pulse {
  0%, 100% { opacity: .42; transform: rotate(-22deg) scaleX(.72) scale(.97); }
  50% { opacity: .9; transform: rotate(-12deg) scaleX(.72) scale(1.03); }
}

.language-popover-subtitle { white-space: pre-line; }

/* A gentler handoff between generated frames. The WebP itself is rendered at
   20fps; this layer transition keeps the first frame from popping in. */
.preview-stage.preview-refreshing .preview-glow {
  animation: preview-glow-breathe 1.8s ease-in-out infinite;
}

.preview-image-enter {
  animation: preview-image-enter-smooth 760ms cubic-bezier(.16, .78, .22, 1) both;
}

.preview-image-leave {
  animation: preview-image-leave-smooth 760ms cubic-bezier(.16, .78, .22, 1) both;
}

@keyframes preview-image-enter-smooth {
  0% { opacity: 0; transform: translate3d(12px, 0, 0) scale(.965); filter: blur(4px) drop-shadow(0 10px 16px rgba(0, 0, 0, .12)); }
  42% { opacity: 1; transform: translate3d(-1px, 0, 0) scale(1.008); filter: blur(0) drop-shadow(0 12px 16px rgba(0, 0, 0, .22)); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0) drop-shadow(0 12px 16px rgba(0, 0, 0, .22)); }
}

@keyframes preview-image-leave-smooth {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-12px, 0, 0) scale(.975); filter: blur(4px); }
}

@keyframes preview-glow-breathe {
  0%, 100% { opacity: .65; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.06); }
}

@media (max-width: 390px) {
  .boot-showcase { grid-template-columns: 132px minmax(0, 1fr); padding: 13px 12px; }
  .boot-showcase-art { width: 122px; height: 154px; }
  .boot-showcase-art .boot-tgs { width: 80px; height: 80px; }
  .boot-showcase-copy { padding-left: 13px; }
  .boot-showcase-copy h1 { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-showcase,
  .boot-showcase-art .boot-tgs,
  .boot-orbit,
  .preview-stage.preview-refreshing .preview-glow { animation: none; }
}

/* Keep the loading composition centered in the real Telegram viewport instead
   of leaving a large dead area under the progress rail. */
@media (min-height: 560px) {
  .boot-landing { transform: translateY(clamp(18px, 5vh, 34px)); }
}

/* `min-height` alone leaves the 1fr grid track content-sized in some
   Telegram WebViews, which is what created the large empty lower half. */
.boot-screen {
  height: 100dvh;
  min-height: 100dvh;
}

body.pack-choice-open { overflow: hidden; }

.pack-choice-modal {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 7, 15, .74);
  backdrop-filter: blur(15px);
  animation: pack-choice-fade-in 220ms ease both;
}

.pack-choice-modal[hidden] { display: none; }

.pack-choice-card {
  position: relative;
  width: min(420px, 100%);
  max-height: min(650px, calc(100dvh - 34px));
  overflow: auto;
  padding: 24px 18px 18px;
  border: 1px solid rgba(137, 160, 255, .3);
  border-radius: 26px;
  background:
    radial-gradient(circle at 85% 0, rgba(105, 137, 255, .16), transparent 34%),
    linear-gradient(145deg, #20263b, #111725 72%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: pack-choice-card-in 360ms cubic-bezier(.18, .82, .22, 1) both;
}

.pack-choice-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(156, 173, 238, .24);
  border-radius: 50%;
  color: #cbd5ff;
  background: rgba(8, 12, 23, .35);
  font-size: 19px;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.pack-choice-close:hover { background: rgba(119, 147, 255, .2); transform: rotate(8deg); }

.pack-choice-card h2 {
  max-width: 330px;
  margin: 8px 0 0;
  color: #f6f8ff;
  font-size: clamp(24px, 7vw, 32px);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.pack-choice-copy {
  max-width: 330px;
  margin: 10px 0 18px;
  color: #aab4cb;
  font-size: 12px;
  line-height: 1.48;
}

.pack-choice-options,
.existing-pack-list {
  display: grid;
  gap: 10px;
}

.pack-choice-option,
.existing-pack-option {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 76px;
  padding: 11px 13px;
  border: 1px solid rgba(143, 164, 236, .24);
  border-radius: 17px;
  color: #f4f6ff;
  background: rgba(31, 38, 58, .72);
  text-align: left;
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.pack-choice-option:hover:not(:disabled),
.existing-pack-option:hover {
  border-color: rgba(119, 164, 255, .76);
  background: rgba(46, 61, 96, .9);
  box-shadow: 0 12px 28px rgba(33, 76, 170, .18);
  transform: translateY(-2px);
}

.pack-choice-option:active:not(:disabled),
.existing-pack-option:active { transform: translateY(0) scale(.985); }

.pack-choice-option:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.pack-choice-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(124, 164, 255, .35);
  border-radius: 13px;
  color: #a6c1ff;
  background: linear-gradient(145deg, rgba(77, 129, 255, .3), rgba(41, 55, 94, .54));
  font-size: 21px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.pack-choice-option b,
.existing-pack-option b {
  display: block;
  font-size: 13px;
  line-height: 1.2;
}

.pack-choice-option small,
.existing-pack-option small {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #8e9ab5;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-choice-option > i,
.existing-pack-option > i {
  color: #8fb7ff;
  font-size: 18px;
  font-style: normal;
}

.pack-choice-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: -4px 0 17px;
  padding: 5px 0;
  border: 0;
  color: #9fb4ff;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}

.pack-choice-back span { font-size: 16px; transition: transform 180ms ease; }
.pack-choice-back:hover span { transform: translateX(-3px); }

.existing-pack-list .empty-state {
  padding: 22px 12px;
  border: 1px dashed rgba(145, 164, 230, .28);
  border-radius: 15px;
  color: #98a4c0;
  text-align: center;
}

@keyframes pack-choice-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pack-choice-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 390px) {
  .pack-choice-card { padding: 22px 14px 15px; border-radius: 22px; }
  .pack-choice-option, .existing-pack-option { min-height: 70px; padding: 9px 10px; }
}

/* v72 — стартовый экран в той же графитово-синей системе, что и Mini App */
.boot-screen {
  color: #f7f8fa;
  background:
    radial-gradient(circle at 82% -10%, rgba(32, 112, 204, .18), transparent 25rem),
    radial-gradient(circle at 8% 35%, rgba(35, 72, 112, .12), transparent 24rem),
    linear-gradient(145deg, #020304 0%, #080a0d 56%, #101318 100%) !important;
}

.boot-screen::before {
  opacity: .2;
  background-image:
    linear-gradient(rgba(164, 192, 224, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(164, 192, 224, .035) 1px, transparent 1px);
  background-size: 36px 36px;
}

.boot-screen::after {
  bottom: -180px;
  width: 500px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(38, 128, 220, .15), transparent 70%);
}

.boot-brandbar,
.boot-landing {
  width: min(650px, calc(100% - 28px));
}

.boot-brandbar {
  padding-top: max(18px, env(safe-area-inset-top));
}

.boot-logo-mark {
  border-color: rgba(83, 168, 255, .42);
  background: linear-gradient(145deg, #1d2834, #080b0f 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 12px 28px rgba(0, 0, 0, .5);
}

.boot-brandbar .boot-logo-text b {
  color: #f7f8fa;
  font-family: Onest, sans-serif;
}

.boot-brandbar .boot-logo-text i { color: #53a8ff; }

.boot-head-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.boot-brandbar .boot-badge {
  border-color: rgba(83, 168, 255, .48);
  color: #dcecff;
  background: rgba(18, 20, 24, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.boot-brandbar .boot-badge-dot {
  background: #53a8ff;
  box-shadow: 0 0 12px rgba(83, 168, 255, .8);
}

.boot-support-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid rgba(83, 168, 255, .34);
  border-radius: 10px;
  color: #cfe8ff;
  background: rgba(18, 20, 24, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.boot-support-button span {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid rgba(83, 168, 255, .48);
  border-radius: 50%;
  color: #fff;
  background: rgba(46, 140, 240, .24);
  font-size: 10px;
  font-weight: 900;
}

.boot-support-button:hover,
.boot-support-button:focus-visible {
  border-color: rgba(83, 168, 255, .72);
  background: rgba(46, 140, 240, .15);
  transform: translateY(-1px);
}

.boot-kicker { color: #53a8ff; }
.boot-kicker span { background: linear-gradient(90deg, transparent, #53a8ff); }

.boot-showcase {
  border-color: rgba(215, 224, 235, .13);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(23, 26, 31, .98), rgba(10, 12, 15, .98));
  box-shadow: 0 22px 54px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.boot-showcase-art {
  border-color: rgba(83, 168, 255, .2);
  background: radial-gradient(circle at 50% 44%, rgba(38, 128, 220, .17), transparent 62%), #111419;
}

.boot-showcase-art::after { border-color: rgba(83, 168, 255, .13); }
.boot-orbit { border-color: rgba(83, 168, 255, .22); }
.boot-orbit--two { border-color: rgba(83, 168, 255, .3); }
.boot-showcase-art .boot-tgs { filter: drop-shadow(0 14px 22px rgba(38, 128, 220, .26)); }
.boot-orbit-dot { background: #53a8ff; box-shadow: 0 0 14px rgba(83, 168, 255, .9); }
.boot-showcase-label { color: #79bdff; }

.boot-showcase-copy h1 {
  color: #f7f8fa;
  font-family: Onest, sans-serif;
}

.boot-showcase-copy h1 em { color: #7fc3ff; }
.boot-showcase-copy p { color: #9299a5; }

.boot-progress-panel {
  border-color: rgba(215, 224, 235, .13);
  background: linear-gradient(145deg, rgba(18, 20, 24, .96), rgba(10, 12, 15, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 16px 38px rgba(0, 0, 0, .26);
}

.boot-progress-top { color: #d7dbe2; }
.boot-progress-top b { color: #79bdff; }
.boot-progress-panel .boot-progress { background: rgba(255, 255, 255, .08); }

.boot-progress-panel .boot-progress span {
  background: linear-gradient(90deg, #2389ef, #53a8ff);
  box-shadow: 0 0 16px rgba(83, 168, 255, .55);
}

.boot-progress-panel .boot-phrase { color: #9299a5; }
.boot-landing .boot-steps { color: #737d89; }
.boot-landing .boot-steps .active { color: #53a8ff; }
.boot-landing .boot-steps i { background: rgba(215, 224, 235, .16); }
.boot-footer { color: #6f7c8a; }

@media (max-width: 560px) {
  .boot-support-button {
    min-width: 92px;
    min-height: 31px;
    padding: 0 9px;
  }

  .boot-support-button b { display: inline; }
}

/* v73 — boot screen uses the exact graphite palette of the constructor */
.boot-screen {
  color: #f8f8fb;
  background: #3d3f4e !important;
}

.boot-screen::before,
.boot-screen::after,
.boot-noise {
  display: none !important;
}

.boot-brandbar,
.boot-landing {
  width: min(390px, calc(100% - 24px));
}

.boot-brandbar {
  padding-top: max(14px, env(safe-area-inset-top));
  padding-bottom: 10px;
}

.boot-brandbar .boot-logo-mark {
  width: 38px;
  height: 38px;
  border-color: #7e8cf0;
  border-radius: 10px;
  background: #2e3040;
  box-shadow: 0 8px 20px rgba(35, 37, 51, .28), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.boot-brandbar .boot-logo-text b { color: #f8f8fb; }
.boot-brandbar .boot-logo-text i { color: #aeb1c0; }

.boot-head-actions { gap: 6px; }

.boot-brandbar .boot-badge,
.boot-support-button {
  min-height: 31px;
  border: 1px solid #555971;
  border-radius: 8px;
  color: #f8f8fb;
  background: #2e3040;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.boot-brandbar .boot-badge { padding: 0 10px; }
.boot-brandbar .boot-badge-dot { background: #7e8cf0; box-shadow: 0 0 10px rgba(126, 140, 240, .75); }

.boot-support-button {
  gap: 6px;
  padding: 0 9px;
  color: #f8f8fb;
  font-size: 10px;
}

.boot-support-button span {
  width: 16px;
  height: 16px;
  border: 0;
  color: #fff;
  background: #7e8cf0;
  font-size: 11px;
}

.boot-support-button:hover,
.boot-support-button:focus-visible {
  border-color: #7e8cf0;
  background: #353747;
  transform: translateY(-1px);
}

.boot-landing {
  padding: 8px 0 7px;
  transform: none !important;
}

.boot-kicker {
  color: #aeb1c0;
  letter-spacing: .18em;
}

.boot-kicker span { background: #7e8cf0; }

.boot-showcase {
  grid-template-columns: 138px minmax(0, 1fr);
  min-height: 190px;
  margin-top: 11px;
  padding: 14px;
  border: 1px solid #555971;
  border-radius: 18px;
  background: #2e3040;
  box-shadow: 0 16px 32px rgba(35, 37, 51, .22), inset 0 1px 0 rgba(255, 255, 255, .045);
}

.boot-showcase-art {
  width: 130px;
  height: 160px;
  border-color: #555971;
  border-radius: 16px;
  background: #353747;
}

.boot-showcase-art::after { border-color: rgba(126, 140, 240, .22); }
.boot-orbit { border-color: rgba(126, 140, 240, .3); }
.boot-orbit--two { border-color: rgba(126, 140, 240, .42); }
.boot-showcase-art .boot-tgs { filter: drop-shadow(0 12px 18px rgba(25, 27, 39, .38)); }
.boot-orbit-dot { background: #7e8cf0; box-shadow: 0 0 12px rgba(126, 140, 240, .85); }
.boot-showcase-label { color: #aeb1c0; }

.boot-showcase-copy h1 {
  color: #f8f8fb;
  font-size: clamp(25px, 7.2vw, 34px);
}

.boot-showcase-copy h1 em { color: #7e8cf0; }
.boot-showcase-copy p { color: #aeb1c0; }

.boot-progress-panel {
  margin-top: 12px;
  border-color: #555971;
  border-radius: 14px;
  background: #2e3040;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 26px rgba(35, 37, 51, .16);
}

.boot-progress-top { color: #f8f8fb; }
.boot-progress-top b { color: #7e8cf0; }
.boot-progress-panel .boot-progress { background: #242633; }
.boot-progress-panel .boot-progress span { background: #7e8cf0; box-shadow: 0 0 13px rgba(126, 140, 240, .55); }
.boot-progress-panel .boot-phrase { color: #aeb1c0; }
.boot-landing .boot-steps { color: #aeb1c0; }
.boot-landing .boot-steps .active { color: #f8f8fb; }
.boot-landing .boot-steps i { background: #555971; }
.boot-footer { color: #aeb1c0; }

@media (max-width: 390px) {
  .boot-showcase {
    grid-template-columns: 126px minmax(0, 1fr);
    padding: 12px;
  }

  .boot-showcase-art { width: 118px; height: 152px; }
  .boot-showcase-copy { padding-left: 11px; }
}

/* v74 — не показываем основное меню под заставкой во время перехода */
body.booting .app-shell {
  opacity: 0;
  pointer-events: none;
}

body:not(.booting) .app-shell {
  animation: boot-app-reveal 280ms 120ms ease both;
}

@keyframes boot-app-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* v75 — язык открывается без тяжёлой тёмной вуали и размытия всей страницы */
body.language-open::after {
  background: rgba(10, 12, 20, .1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: language-dim-soft-in 180ms ease both;
}

@keyframes language-dim-soft-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* v76 — overlay не перехватывает клики по языкам */
body.language-open::after {
  pointer-events: none;
}

.studio-topbar {
  position: relative;
  z-index: 40;
}

.studio-topbar .top-actions {
  position: relative;
  z-index: 100;
}

.language-popover {
  z-index: 1001;
  pointer-events: auto;
}

.language-option {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* v79 — быстрый переход от горизонтальной ленты к полной сетке шаблонов */
.template-view-toggle {
  min-width: 82px;
  padding-inline: 8px !important;
  color: #c5cbff;
  border-color: rgba(174, 185, 255, .36) !important;
  white-space: nowrap;
}

.template-view-toggle.active {
  color: #fff;
  border-color: #aeb9ff !important;
  background: rgba(126, 140, 240, .2);
  box-shadow: 0 0 0 1px rgba(174, 185, 255, .12), 0 7px 16px rgba(32, 35, 65, .2);
}

.templates-grid {
  max-height: 106px;
  overflow-x: auto;
  overflow-y: hidden;
  align-content: flex-start;
  transition: max-height 520ms cubic-bezier(.22, 1, .36, 1),
    border-color 280ms ease,
    background 280ms ease;
}

.templates-grid.templates-grid-expanded {
  max-height: 2400px;
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: hidden;
  border-color: rgba(174, 185, 255, .48);
  background: rgba(46, 48, 64, .92);
}

.templates-grid.templates-grid-expanded .template-card {
  flex: 0 0 calc((100% - 24px) / 4);
  width: calc((100% - 24px) / 4);
}

.templates-grid-tools {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}

.templates-grid-tools .template-view-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 26px;
  min-height: 26px;
  padding: 0 !important;
  border-radius: 9px;
  color: #c5cbff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.templates-grid-tools .template-view-toggle:hover {
  color: #fff;
  transform: translateY(-1px);
}

.templates-grid-tools .template-view-toggle:active {
  transform: scale(.92);
}

@media (max-width: 350px) {
  .templates-grid.templates-grid-expanded .template-card {
    flex-basis: calc((100% - 16px) / 3);
    width: calc((100% - 16px) / 3);
  }
}

/* v81 — компактная кнопка раскрытия рядом с заголовком шаблонов */
.templates-panel .section-title-row {
  gap: 8px;
}

.templates-panel .template-actions {
  flex-shrink: 0;
}

.templates-heading {
  min-width: 0;
}

.templates-heading-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.templates-heading-row h2 {
  margin: 0;
}

.templates-heading-row .template-view-toggle,
.template-view-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0 !important;
  border: 0;
  border-radius: 10px;
  color: #dfe3ff;
  background: #3b3d4d;
  box-shadow: 0 7px 16px rgba(20, 21, 31, .16);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1), background 280ms ease,
    color 280ms ease, box-shadow 280ms ease;
}

.template-view-toggle:hover {
  color: #fff;
  background: #45495f;
  transform: translateY(-2px);
}

.template-view-toggle:active {
  transform: scale(.92);
}

.template-view-toggle.active {
  color: #fff;
  background: #45495f;
  box-shadow: 0 0 0 1px rgba(174, 185, 255, .36), 0 8px 18px rgba(32, 35, 65, .2);
}

.templates-grid-tools {
  display: none !important;
}

/* v82 — точное расположение и размер кнопки из Telegram-референса */
.templates-heading-row {
  gap: 9px;
}

.templates-heading-row .template-view-toggle {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 11px;
  background: #3a3d4d;
  box-shadow: 0 7px 16px rgba(20, 21, 31, .18);
  font-size: 20px;
}

.templates-heading-row .template-view-toggle:hover,
.templates-heading-row .template-view-toggle.active {
  background: #45495f;
}

/* v83 — порядок блока как в Telegram-референсе */
.templates-panel .category-strip {
  order: 1;
}

.templates-panel .section-title-row {
  display: block;
  order: 2;
  margin: 0 7px 10px;
}

.templates-panel .templates-heading {
  width: 100%;
}

.templates-panel .templates-heading-row {
  width: 100%;
  justify-content: space-between;
}

.templates-panel .template-actions {
  display: none !important;
}

/* v84 motion-only — сохраняем исходную палитру и раскладку, меняем только
   ощущение интерфейса: мягкая смена превью и лёгкие spring-переходы. */
#previewImage,
#previewImageNext,
#previewAnimation {
  will-change: opacity, transform, filter;
}

.preview-image-enter {
  animation: motion-preview-enter 680ms cubic-bezier(.2, .9, .3, 1.18) both !important;
}

.preview-image-leave {
  animation: motion-preview-leave 620ms cubic-bezier(.45, 0, .2, 1) both !important;
}

@keyframes motion-preview-enter {
  0% { opacity: 0; transform: translate3d(18px, 3px, 0) scale(.93) rotate(1deg); filter: blur(7px); }
  58% { opacity: 1; transform: translate3d(-2px, -1px, 0) scale(1.02) rotate(-.35deg); filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); filter: blur(0); }
}

@keyframes motion-preview-leave {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-18px, -2px, 0) scale(.95); filter: blur(6px); }
}

.preview-stage.preview-refreshing #previewImage {
  opacity: .82;
  transform: scale(.985);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(.2, .9, .3, 1);
}

.template-card {
  transition: transform 360ms cubic-bezier(.2, .9, .3, 1.2), border-color 280ms ease, background 280ms ease, box-shadow 300ms ease !important;
}

.template-card:hover {
  transform: translateY(-2px);
}

.template-card.selected {
  animation: motion-template-select 360ms cubic-bezier(.2, .9, .3, 1.25) both;
}

@keyframes motion-template-select {
  0% { transform: scale(1); }
  55% { transform: scale(.94); }
  100% { transform: scale(.965); }
}

.template-view-toggle,
.language-option,
.primary-button,
.ghost-button,
.template-create-button {
  transition: transform 320ms cubic-bezier(.2, .9, .3, 1.2), background 280ms ease, border-color 280ms ease, box-shadow 300ms ease, color 220ms ease !important;
}

.language-popover {
  animation: language-sheet-in 420ms cubic-bezier(.2, .9, .3, 1.12) both;
}

.language-option:hover,
.language-option.active {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .preview-image-enter,
  .preview-image-leave,
  .template-card,
  .template-view-toggle,
  .language-popover,
  .language-option,
  .primary-button,
  .ghost-button,
  .template-create-button {
    animation: none !important;
    transition: none !important;
  }
}