/* Shared structural primitives used by admin, uploaders and authentication. */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
.shell {
  display: grid;
  min-height: 100vh;
}
.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebarfoot {
  margin-top: auto;
}
.navlink {
  display: flex;
  align-items: center;
}
.actions {
  display: flex;
  justify-content: flex-end;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.account {
  display: flex;
  align-items: center;
}
.avatar {
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.pagehead {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
h1,
h2 {
  margin: 0;
}
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat,
.panel {
  background: white;
  border: 1px solid var(--line);
}
.stat strong {
  display: block;
}
.sectionhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cards {
  display: grid;
}
.eventcard,
.assetcard {
  border: 1px solid var(--line);
  overflow: hidden;
  background: white;
}
.cardbottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.toolbar {
  display: flex;
  align-items: center;
}
.empty {
  text-align: center;
  padding: 48px;
}
.grid2 {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
}
.formgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.field {
  display: flex;
  flex-direction: column;
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: white;
  outline: none;
}
textarea {
  resize: vertical;
}
.tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}
.tabs button {
  border: 0;
  border-radius: 0;
  background: none;
}
.concepthead {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.assetart {
  height: 152px;
  display: grid;
  place-items: center;
  font-size: 40px;
}
.assetart > .ui-icon {
  width: 48px;
  height: 48px;
  stroke-width: 1.2;
}
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  border-radius: 12px;
}
.toggle {
  display: flex;
  align-items: center;
}
.settings-layout {
  display: grid;
}
.settingnav {
  display: flex;
  flex-direction: column;
  align-self: start;
}
.concept-media {
  display: grid;
}
.thumbnail-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  font-size: 40px;
}
.thumbnail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reference-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.reference-tile {
  width: 144px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
  padding: 8px;
}
.reference-tile img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  border-radius: 6px;
}
.reference-tile small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reference-tile button,
.reference-tile select {
  font-size: 10px;
  padding: 8px;
  min-height: 32px;
}
.methodchoices {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}
.methodchoices button {
  display: block;
  text-align: left;
  padding: 24px;
}
.methodchoices strong {
  display: block;
  font-size: 14px;
}
.methodchoices small {
  display: block;
  line-height: 1.6;
  margin-top: 8px;
}
.live-preview {
  position: relative;
  width: 240px;
  max-width: 100%;
  color: white;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 24px;
  overflow: hidden;
}
.live-preview > span {
  font-size: 48px;
}
.live-preview small {
  font-size: 9px;
  letter-spacing: 2px;
}
.previewoverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.previewoverlay img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.overlay-preview img {
  max-width: 160px;
  max-height: 152px;
}
dialog {
  max-width: 560px;
  width: 90%;
  max-height: 85vh;
  overflow: auto;
  border: 1px solid var(--line);
}
.authshell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.authvisual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px;
  position: relative;
  overflow: hidden;
}
.authvisual h2 {
  font-size: 48px;
  line-height: 1.25;
}
.authshapes {
  font-size: 150px;
  margin: 24px 0;
}
.authcard {
  width: 100%;
  max-width: 460px;
  padding: 48px;
  align-self: center;
  justify-self: center;
}
.authbrand {
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -1.4px;
  margin-bottom: 48px;
}
.authbrand small {
  font-size: 10px;
  letter-spacing: 2px;
}
.authcard h1 {
  font-size: 26px;
  margin-bottom: 16px;
}
.authcard form {
  margin-top: 32px;
}
.authsubmit {
  width: 100%;
  margin-top: 8px;
}
#autherror {
  color: #b5415e;
  font-size: 12px;
}
.authfoot {
  font-size: 11px;
  line-height: 1.7;
  margin-top: 32px;
}
.passwordfield {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.passwordfield input {
  border: 0;
  border-radius: 0;
}
.passwordfield button {
  border: 0;
  font-size: 11px;
  padding: 8px;
  border-radius: 0;
}
.authcard button:disabled {
  opacity: 0.6;
  cursor: wait;
}
@media (max-width: 800px) {
  .authvisual {
    padding: 40px;
  }
  .authvisual h2 {
    font-size: 36px;
  }
  .authcard {
    padding: 32px;
  }
}
@media (max-width: 600px) {
  .authshell {
    display: block;
  }
  .authvisual {
    display: none;
  }
  .authcard {
    margin: auto;
    min-height: 100vh;
  }
  dialog.authcard {
    min-height: auto;
  }
}
/* Original Choro Studio design system. 8px base rhythm; no external assets. */
:root {
  --violet: #7651df;
  --violet-dark: #6540cb;
  --violet-soft: #f0ebfc;
  --green: var(--violet);
  --ink: #242436;
  --muted: #77788d;
  --line: #e8e8f0;
  --canvas: #f7f7fb;
  --sidebar: #171724;
  --radius: 16px;
  --shadow: 0 4px 24px #26203f05;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-size: 14px;
  line-height: 1.5;
}
[hidden] {
  display: none !important;
}
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 16px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  transition:
    background 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
  background: white;
  color: var(--ink);
}
button:hover,
.button:hover {
  background: #f6f3fe;
  border-color: #d5c9f3;
}
button:active,
.button:active {
  transform: translateY(1px);
}
button.primary,
.button.primary {
  background: var(--violet);
  color: white;
  border-color: var(--violet);
  box-shadow: 0 4px 10px #7651df20;
}
button.primary:hover,
.button.primary:hover {
  background: var(--violet-dark);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ui-icon {
  flex-shrink: 0;
  vertical-align: middle;
}
.danger {
  color: #b5415e !important;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #b59aef;
  outline-offset: 3px;
}
.shell {
  grid-template-columns: 248px minmax(0, 1fr);
}
.sidebar {
  background: var(--sidebar);
  color: #acaabf;
  border: none;
  padding: 32px 20px 24px;
  height: 100dvh;
}
.brand {
  display: flex;
  align-items: center;
  padding: 0 4px 32px;
  color: #faf8ff;
  font: 800 25px/1 system-ui;
  letter-spacing: -1px;
  gap: 0;
}
.brand > span:not(.brand-mark) {
  color: #b8a2ff;
}
.brand .brand-mark {
  height: 32px;
  width: 32px;
  background: #8d68ed;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: white;
  margin-right: 8px;
}
.brand small {
  font-size: 9px;
  letter-spacing: 2px;
  color: #a4a0b7;
  margin: 8px 0 0 8px;
}
.workspace-switch {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 8px;
  border-top: 1px solid #ffffff0e;
  border-bottom: 1px solid #ffffff0e;
}
.workspace-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #303045;
  display: grid;
  place-items: center;
  color: #c6b6ef;
  font-weight: 700;
}
.workspace-switch strong {
  font-size: 12px;
  color: #e0ddeb;
  font-weight: 600;
  display: block;
}
.workspace-switch small {
  display: block;
  font-size: 10px;
  color: #838197;
  margin-top: 3px;
}
.navlabel {
  font-size: 9px;
  letter-spacing: 2px;
  margin: 32px 12px 12px;
  color: #757287;
}
.navlink {
  font-size: 13px;
  padding: 12px;
  gap: 12px;
  margin: 4px 0;
  color: #a09db2;
  font-weight: 500;
  border-radius: 10px;
}
.navlink:hover {
  background: #ffffff07;
  color: white;
}
.navlink.active {
  background: #322747;
  color: #cbbbff;
  font-weight: 600;
  box-shadow: inset 3px 0 #a98bef;
}
.navlink .ui-icon {
  width: 18px;
  height: 18px;
}
.sidebarfoot {
  border: 0;
  padding: 0;
  font-size: 10px;
  color: #77748a;
}
.sidebar-tip {
  padding: 20px 16px;
  border: 1px solid #ffffff10;
  border-radius: 12px;
  background: linear-gradient(135deg, #282237, #1d1b2a);
  margin-bottom: 24px;
}
.sidebar-tip > .ui-icon {
  color: #b09ae5;
  display: block;
  margin-bottom: 12px;
}
.sidebar-tip strong {
  font-size: 12px;
  color: #d6cfe7;
  font-weight: 500;
}
.sidebar-tip p {
  color: #807990;
  font-size: 11px;
  margin-bottom: 0;
}
.sidebarfoot > span {
  letter-spacing: 1.5px;
  padding-left: 8px;
}
.workspace {
  padding: 0;
  min-width: 0;
}
.topbar {
  height: 80px;
  padding: 0 40px;
  background: #ffffffb0;
  border-bottom: 1px solid var(--line);
  color: #848397;
}
.breadcrumb {
  font-size: 12px;
  color: #9a97a9;
}
.breadcrumb > span {
  margin: 0 12px;
  color: #c5c1d3;
}
.account {
  gap: 16px;
}
.account #syncstate {
  font-size: 11px;
  color: #8b879b;
  position: relative;
  padding-left: 12px;
}
.account #syncstate:before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9a83c9;
}
.avatar {
  width: 32px;
  height: 32px;
  background: #eee7fa;
  color: #7451b0;
}
.topbar #logout {
  background: transparent;
  font-size: 11px;
  border-color: transparent;
  color: #858097;
  min-height: 32px;
  padding: 6px;
}
main {
  max-width: 1480px;
  padding: 40px;
  margin: 0 auto;
}
.pagehead {
  margin-bottom: 32px;
  gap: 24px;
}
.eyebrow {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #928ba6;
  margin-bottom: 8px;
}
h1 {
  font:
    700 30px/1.25 Inter,
    "Segoe UI",
    system-ui;
  letter-spacing: -1px;
}
h2 {
  font:
    650 18px/1.4 Inter,
    "Segoe UI",
    system-ui;
  letter-spacing: -0.3px;
}
p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}
.pagehead p {
  margin: 8px 0 0;
}
.hero {
  min-height: 288px;
  padding: 32px 40px;
  border: 1px solid #e8dff9;
  border-radius: 20px;
  background: linear-gradient(110deg, #efebfa 0%, #f5f1ff 45%, #e9e4fa 100%);
  position: relative;
  margin-bottom: 24px;
}
.hero h2 {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -1.2px;
  color: #3c2d60;
}
.hero p {
  color: #8c80a4;
  margin: 16px 0 24px;
}
.hero .eyebrow {
  color: #9179b6;
}
.hero-canvas {
  height: 260px;
  width: 390px;
  position: relative;
  flex-shrink: 0;
}
.orbit {
  position: absolute;
  border: 1px solid #cbbbe975;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  left: 24px;
  top: -20px;
}
.orbit-two {
  width: 350px;
  height: 350px;
  left: 0;
  top: -45px;
}
.creative-card {
  width: 144px;
  height: 186px;
  position: absolute;
  box-shadow: 0 16px 40px #69469c26;
  border: 6px solid #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.creative-card > span {
  position: absolute;
  bottom: 12px;
  font-size: 6px;
  letter-spacing: 1.5px;
  color: #fff;
  font-weight: 500;
}
.card-one {
  left: 35px;
  top: 30px;
  transform: rotate(-13deg);
  background: linear-gradient(145deg, #ddcdf2, #8272bd);
}
.card-two {
  left: 190px;
  top: 16px;
  transform: rotate(12deg);
  background:
    radial-gradient(circle at 35% 25%, #fff5c7 0, transparent 34%),
    linear-gradient(155deg, #e4bc9a, #ab75a7 60%, #695299);
}
.card-two > .ui-icon {
  width: 76px;
  height: 76px;
  stroke-width: 0.8;
  color: #fffae0;
}
.art-sphere {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 28% 25%,
    #fff6ff,
    #d9b1ef 35%,
    #7b68ba 75%
  );
  box-shadow: 8px 16px 24px #50347340;
}
.art-label {
  position: absolute;
  bottom: 0;
  left: 104px;
  letter-spacing: 2px;
  font-size: 8px;
  color: #aa99c4;
}
.stats {
  gap: 16px;
  margin-bottom: 32px;
}
.stat {
  padding: 20px 24px;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.stat-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.stat label {
  font-size: 12px;
  color: #878197;
}
.stat strong {
  font:
    650 32px/1.3 Inter,
    system-ui;
  margin: 16px 0 8px;
  letter-spacing: -1px;
}
.stat small {
  font-size: 10px;
  color: #a29aae;
}
.stat-icon {
  display: inline-grid;
  place-items: center;
  background: #f3effc;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #8e70c7;
}
.stat-icon .ui-icon {
  width: 16px;
  height: 16px;
}
.panel {
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow);
}
.sectionhead {
  gap: 16px;
  margin-bottom: 24px;
}
.sectionhead p {
  margin: 4px 0 0;
}
.sectionhead a,
.text-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--violet);
  font-size: 12px;
  font-weight: 600;
}
.text-link .ui-icon,
.sectionhead a .ui-icon {
  width: 16px;
  height: 16px;
}
.table-scroll {
  overflow-x: auto;
  margin: 0 -28px -28px;
}
table {
  border-collapse: collapse;
  width: 100%;
  white-space: nowrap;
  text-align: left;
}
th {
  font-size: 10px;
  color: #9c95aa;
  font-weight: 500;
  padding: 14px 24px;
  background: #fcfbfe;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
td {
  padding: 16px 24px;
  border-bottom: 1px solid #f0edf5;
  font-size: 12px;
  color: #867d96;
}
tr:last-child td {
  border-bottom: 0;
}
tr:hover td {
  background: #fdfbff;
}
.event-row-name {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--ink);
}
.event-row-name strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
}
.event-row-name small {
  display: block;
  font-size: 10px;
  color: #9d95aa;
  margin-top: 4px;
}
.mini-cover {
  width: 40px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.mini-cover img,
.mini-cover .abstract-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mini-cover .abstract-cover > span {
  display: none;
}
.mini-cover .ui-icon {
  width: 24px;
  height: 24px;
}
.table-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8f77b7;
  font-size: 11px;
}
.table-action .ui-icon {
  width: 14px;
  height: 14px;
}
.badge {
  font-size: 10px;
  line-height: 1.5;
  color: #568c73;
  background: #edf7f2;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 500;
}
.badge.draft {
  color: #9176b4;
  background: #f3eef9;
}
.unavailable {
  color: #b5aebe;
}
.cards {
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.eventcard,
.assetcard {
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition:
    transform 0.18s,
    box-shadow 0.18s;
  min-width: 0;
}
.eventcard:hover,
.assetcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px #3d245b10;
}
.cover {
  display: block;
  height: 196px;
  background: #eee7f9;
  position: relative;
}
.cover:before,
.cover:after {
  display: none;
}
.cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.abstract-cover {
  width: 100%;
  height: 100%;
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 25% 30%, #ecdafe 0, transparent 45%),
    linear-gradient(135deg, #d3c2ed, #9381bd);
  overflow: hidden;
}
.abstract-cover:before {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  border: 1px solid #ffffff50;
  border-radius: 50%;
  transform: translate(80px, -35px);
}
.abstract-cover .ui-icon {
  width: 60px;
  height: 60px;
  stroke-width: 0.8;
  color: #fff9;
  z-index: 1;
}
.abstract-cover > span {
  position: absolute;
  font-size: 120px;
  font-weight: 600;
  color: #fff3;
  right: 20px;
  bottom: -28px;
}
.cover-label {
  position: absolute;
  bottom: 16px;
  left: 16px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #fff9;
  font-size: 10px;
  color: #67547f;
  backdrop-filter: blur(5px);
}
.cardbody,
.assetinfo {
  padding: 20px;
}
.cardbody .sectionhead {
  margin: 0;
}
.cardbody h2 {
  font-size: 15px;
  overflow-wrap: anywhere;
}
.cardmeta {
  display: block;
  font-size: 11px;
  color: #a099ad;
  margin: 12px 0 20px;
}
.cardbottom {
  font-size: 10px;
  color: #aaa1b5;
  border-color: #efebf5;
  gap: 8px;
  align-items: center;
}
.cardbottom a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8b70b7;
  font-weight: 600;
}
.cardbottom .ui-icon {
  width: 14px;
  height: 14px;
}
.toolbar {
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}
.search-field {
  position: relative;
  flex: 1;
  max-width: 360px;
}
.search-field .ui-icon {
  position: absolute;
  left: 14px;
  top: 13px;
  width: 16px;
  height: 16px;
  color: #ada4bd;
}
.search-field input {
  padding-left: 40px;
}
.toolbar select {
  width: 164px;
}
.toolbar-count {
  margin-left: auto;
  font-size: 11px;
  color: #a39aad;
}
.fineprint {
  font-size: 11px;
  color: #aaa1b5;
  margin-top: 24px;
}
.empty-state {
  text-align: center;
  padding: 48px 24px;
  grid-column: 1/-1;
  border: 1px dashed #dcd3ea;
  background: #fcfaff;
  border-radius: 16px;
}
.empty-state > .ui-icon {
  width: 40px;
  height: 40px;
  color: #a78acb;
  margin-bottom: 16px;
}
.empty-state h2 {
  font-size: 18px;
}
.empty-state p {
  max-width: 420px;
  margin: 8px auto 24px;
}
.recent-events .empty-state {
  margin-top: 24px;
}
.formgrid {
  gap: 24px;
}
.field {
  gap: 8px;
  margin-bottom: 24px;
}
.field label {
  font-size: 12px;
  font-weight: 600;
  color: #554a65;
}
.field small,
.field p {
  font-size: 11px;
  color: #a093b0;
  margin: 0;
}
input,
select,
textarea {
  border-color: #e4ddeb;
  border-radius: 10px;
  padding: 12px 14px;
  color: #554b64;
  font-size: 13px;
  min-height: 44px;
}
input::placeholder,
textarea::placeholder {
  color: #b3a8bf;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #aa8cda;
  box-shadow: 0 0 0 3px #7651df0c;
}
textarea {
  min-height: 112px;
}
input[type="checkbox"] {
  accent-color: var(--violet);
  min-height: auto;
  width: 16px;
  height: 16px;
}
input[type="file"] {
  font-size: 11px;
  padding: 10px;
  background: #fcfaff;
}
.toggle {
  font-size: 12px;
  color: #80718e;
  padding: 12px 0;
  gap: 12px;
}
.toggle input {
  width: 16px;
}
.actions {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 24px;
  gap: 12px;
  flex-wrap: wrap;
}
.sticky-actions {
  background: white;
}
.actions .danger {
  margin-right: auto;
  background: transparent;
  border: 0;
}
.wizard-steps {
  list-style: none;
  margin: 0 0 32px;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  gap: 16px;
}
.wizard-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #a99bb7;
}
.wizard-steps li > span {
  width: 32px;
  height: 32px;
  border: 1px solid #ede5f5;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}
.wizard-steps small {
  font-size: 8px;
  letter-spacing: 1px;
  display: block;
  color: #b9abc6;
  margin-bottom: 4px;
}
.wizard-steps li.current {
  font-weight: 600;
  color: var(--violet);
}
.wizard-steps .current > span {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px #f2ebfc;
}
.wizard-steps .complete > span {
  background: #f1ebfb;
  color: #9473c2;
}
.wizard-steps .ui-icon {
  width: 14px;
  height: 14px;
}
.create-layout {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
.create-aside {
  align-self: start;
  background: linear-gradient(150deg, #fbf8ff, #f1ecfa);
  padding: 32px;
}
.create-aside .stat-icon {
  margin-bottom: 24px;
}
.create-aside h2 {
  font-size: 23px;
  line-height: 1.4;
}
.create-aside ol {
  padding-left: 20px;
  color: #8e7ba6;
  font-size: 12px;
  line-height: 2.7;
  margin: 24px 0;
}
.step-tag {
  font-size: 11px;
  font-weight: 600;
  color: #b4a2c9;
}
.back-link {
  display: block;
  font-size: 11px;
  color: #9c84b7;
  margin-bottom: 24px;
}
.event-head-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.event-head-actions button {
  font-size: 12px;
}
.tabs {
  gap: 24px;
  margin-bottom: 24px;
  border-color: #e7dff0;
  overflow-x: auto;
}
.tabs button {
  font-size: 12px;
  padding: 14px 0;
  white-space: nowrap;
  color: #9c8bac;
  min-height: 48px;
}
.tabs button.active {
  color: var(--violet);
  border-bottom: 2px solid var(--violet);
  font-weight: 600;
}
.settings-layout {
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 32px;
}
.settingnav {
  gap: 4px;
  position: static;
}
.settingnav button {
  justify-content: flex-start;
  border: 0;
  background: transparent;
  color: #a08daf;
  font-size: 11px;
  font-weight: 500;
  padding: 12px;
  border-radius: 8px;
}
.settingnav button.active {
  background: #f1ebfa;
  color: #8f65bd;
  font-weight: 600;
}
.settingnav button:hover {
  background: #faf6fe;
}
.settingnav .ui-icon {
  width: 16px;
  height: 16px;
}
.settingsection {
  border: 0;
  margin: 0;
  padding: 0;
}
.settings-content {
  border-left: 1px solid #ede5f4;
  padding-left: 32px;
  min-width: 0;
}
.settings-content > section h2 {
  font-size: 20px;
}
.settings-content .output-demo {
  margin-top: 32px;
}
.note {
  background: #f6f2fb;
  color: #9b86ac;
  font-size: 11px;
  border: 1px solid #eee5f6;
  border-radius: 10px;
  line-height: 1.8;
  margin-top: 24px;
}
.branding-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}
.preview-shell {
  border: 1px solid #eee6f6;
  background: #faf7fe;
  border-radius: 12px;
  overflow: hidden;
  align-self: start;
}
.preview-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px;
  font-size: 9px;
  color: #b6a6c5;
}
.preview-top > span:first-child {
  margin-right: auto;
  letter-spacing: 1px;
  color: #ad95c0;
  font-weight: 600;
}
.preview-dot {
  width: 4px;
  height: 4px;
  background: #b29cc7;
  border-radius: 50%;
}
.preview-shell > p {
  font-size: 10px;
  margin: 16px;
  line-height: 1.7;
  color: #b09dbf;
}
.branding-preview {
  position: relative;
  min-height: 340px;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(155deg, #251835, #483054);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.branding-preview:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 240px;
  height: 240px;
  filter: blur(80px);
  background: var(--booth-color);
  opacity: 0.6;
  bottom: -80px;
  right: -60px;
}
.branding-background {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.branding-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.branding-content {
  text-align: center;
  padding: 32px 24px;
  position: relative;
}
.branding-content small {
  display: block;
  color: #dfcbe8;
  font-size: 7px;
  letter-spacing: 2px;
  margin: 24px 0 12px;
}
.branding-content h2 {
  font-size: 23px !important;
  color: white;
  max-width: 280px;
  overflow-wrap: anywhere;
}
.branding-content button,
.branding-content a.button {
  background: var(--booth-color);
  border: 0;
  color: white;
  font-size: 11px;
  margin-top: 32px;
  min-width: 180px;
  pointer-events: none;
}
.branding-content .ui-icon {
  width: 28px;
  height: 28px;
  stroke-width: 1;
}
.branding-content button .ui-icon,
.branding-content a.button .ui-icon {
  width: 14px;
  height: 14px;
}
.branding-content a.button { pointer-events: auto; }
#brand-preview-logo img {
  max-height: 56px;
  max-width: 140px;
  object-fit: contain;
}
.branding-upload-preview {
  width: 100%;
  height: 96px;
  border: 1px dashed #decfeb;
  background: #fcf9ff;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #c0a4d5;
  overflow: hidden;
}
.branding-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.color-input {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e4ddeb;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: #a695b4;
}
.color-input input {
  width: 28px;
  height: 28px;
  min-height: 28px;
  border: none;
  padding: 0;
  background: none;
}
.branding-grid .field > button {
  font-size: 10px;
  padding: 0;
  min-height: 24px;
  border: none;
  background: transparent;
  justify-content: flex-start;
  color: #b09cbb;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #f0eaf6;
  padding: 16px 0;
  font-size: 12px;
  color: #a18bad;
}
.detail-row strong {
  color: #7d628e;
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}
.review-concepts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.review-concepts > div {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: #f8f3fc;
  border-radius: 8px;
  font-size: 11px;
  color: #a588b5;
}
.review-concepts img {
  width: 32px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}
.concept {
  background: white;
  border-color: #eadef1;
  padding: 24px;
  border-radius: 14px;
  margin: 24px 0;
}
.concepthead {
  gap: 16px;
  align-items: start;
}
.concepthead h2 {
  font-size: 17px;
}
.concept-tools {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.concept-tools button {
  font-size: 10px;
  padding: 6px 10px;
  min-height: 32px;
}
.concept-media {
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid #eee6f5;
  border-bottom: 1px solid #eee6f5;
  margin: 24px 0;
}
.thumbnail-preview {
  background: linear-gradient(135deg, #f0e5fb, #d6c3ed);
  color: #c2a3dc;
  width: 140px;
  height: 164px;
}
.thumbnail-preview span {
  color: #a787c5;
}
.reference-tile {
  background: #faf7fe;
  border-color: #e8daf1;
  border-radius: 10px;
}
.library-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: #f2ecfc;
  border-radius: 12px;
  margin-bottom: 24px;
  color: #ad8ac5;
  font-size: 12px;
}
.library-summary strong {
  color: #9771b2;
  font-weight: 500;
}
.library-summary > span {
  margin-left: auto;
  font-size: 11px;
}
.concept-cover {
  height: 208px;
  position: relative;
  background: #eee4f7;
}
.concept-cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.concept-cover > .badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: #fffe;
  backdrop-filter: blur(4px);
}
.concept-card .assetinfo > p {
  min-height: 42px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.library-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.library-links .button {
  color: #a383b9;
  background: white;
  font-size: 12px;
}
.library-links .ui-icon {
  width: 16px;
  height: 16px;
}
.media-cover {
  height: 208px;
  background: #f5f0fa;
}
.media-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.assetart {
  background: linear-gradient(135deg, #f1e6fa, #d6c0ed);
  color: #b095ca;
}
.toast {
  background: #43305c;
  border: 1px solid #6d5285;
  box-shadow: 0 12px 32px #28133d30;
  color: #fff;
  padding: 16px 24px;
  max-width: min(520px, calc(100vw - 32px));
  font-size: 13px;
  z-index: 30;
}
dialog {
  border-radius: 20px;
  border-color: #e3d6ee;
  padding: 32px;
  box-shadow: 0 24px 80px #170a3030;
}
dialog::backdrop {
  background: #17102480;
  backdrop-filter: blur(4px);
}
.methodchoices button:hover {
  border-color: #b58bd2;
}
.methodchoices small {
  color: #ae95bf;
}
.live-preview {
  background: linear-gradient(140deg, #3d2852, #9472b0);
}
.muted {
  font-size: 11px;
  color: #aa91ba;
}
.empty {
  color: #9c81b3;
}
.authvisual {
  background:
    radial-gradient(circle at 30% 30%, #ddccf2 0, transparent 60%),
    linear-gradient(135deg, #f0e7fa, #d7c5eb);
}
.authvisual h2 {
  color: #593d75;
  letter-spacing: -2px;
}
.authvisual p {
  color: #9d7eb9;
}
.authshapes {
  color: #b28aca;
}
.authbrand span,
.authbrand small {
  color: #ac86c5;
}
.authcard .eyebrow {
  color: #b099c0;
}
.authfoot {
  color: #b3a0bf;
}
.authshell {
  background: #fdfbff;
}
.passwordfield {
  border-color: #e4ddeb;
}
.passwordfield:focus-within {
  outline: 3px solid #f0e7fa;
}
.authcard .authsubmit {
  font-size: 13px;
}
.authcard h1 {
  color: #5c4076;
}
@media (min-width: 1700px) {
  main {
    padding: 48px;
  }
  .hero-canvas {
    margin-right: 60px;
  }
}
@media (max-width: 1200px) {
  .shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  main {
    padding: 32px;
  }
  .hero {
    padding: 32px;
  }
  .hero-canvas {
    width: 290px;
    transform: scale(0.85);
    transform-origin: right center;
    margin-left: -40px;
  }
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .settings-layout {
    grid-template-columns: 164px minmax(0, 1fr);
    gap: 24px;
  }
  .settings-content {
    padding-left: 24px;
  }
  .branding-grid {
    grid-template-columns: 1fr;
  }
  .preview-shell {
    max-width: 440px;
    width: 100%;
  }
}
@media (max-width: 950px) {
  .shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .sidebar {
    padding: 24px 12px;
  }
  .brand {
    font-size: 22px;
  }
  .brand small {
    display: none;
  }
  .workspace-switch {
    padding: 16px 4px;
    gap: 8px;
  }
  .workspace-switch strong {
    font-size: 10px;
  }
  .workspace-switch small {
    font-size: 9px;
  }
  .hero-canvas {
    display: none;
  }
  .topbar {
    padding: 0 24px;
  }
  .account #syncstate {
    max-width: 135px;
    font-size: 10px;
  }
  .create-layout {
    grid-template-columns: 1fr;
  }
  .create-aside {
    display: none;
  }
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-content {
    border: 0;
    padding: 0;
  }
  .settingnav {
    flex-direction: row;
    overflow: auto;
    padding-bottom: 8px;
  }
  .settingnav button {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .wizard-steps {
    padding: 16px;
    gap: 8px;
  }
  .wizard-steps li {
    font-size: 10px;
    gap: 8px;
  }
  .wizard-steps li > span {
    width: 28px;
    height: 28px;
  }
  .wizard-steps small {
    font-size: 7px;
  }
  .pagehead {
    flex-wrap: wrap;
  }
  .event-head-actions {
    width: 100%;
    justify-content: space-between;
  }
  .cardbottom {
    flex-wrap: wrap;
  }
}
@media (max-width: 700px) {
  .shell {
    display: block;
  }
  .sidebar {
    height: auto;
    position: static;
    padding: 16px;
    background: #171724;
  }
  .brand {
    font-size: 24px;
    padding: 0 0 16px;
  }
  .brand small {
    display: block;
  }
  .workspace-switch,
  .navlabel,
  .sidebarfoot {
    display: none;
  }
  .sidebar nav {
    display: flex;
    overflow: auto;
    gap: 4px;
  }
  .navlink {
    white-space: nowrap;
    margin: 0;
    padding: 10px;
    font-size: 11px;
  }
  .navlink .ui-icon {
    width: 16px;
    height: 16px;
  }
  .navlink.active {
    box-shadow: none;
  }
  .topbar {
    height: 64px;
    padding: 0 20px;
  }
  .breadcrumb {
    font-size: 10px;
  }
  .account {
    gap: 8px;
  }
  .account #syncstate {
    display: none;
  }
  .account #logout {
    min-height: 40px;
  }
  .avatar {
    width: 28px;
    height: 28px;
  }
  .breadcrumb > span {
    margin: 0 6px;
  }
  main {
    padding: 24px 20px 40px;
  }
  .pagehead {
    gap: 16px;
    margin-bottom: 24px;
  }
  .pagehead h1 {
    font-size: 26px;
  }
  .pagehead p {
    font-size: 12px;
  }
  .hero {
    padding: 24px;
    min-height: 264px;
    border-radius: 16px;
  }
  .hero h2 {
    font-size: 30px;
  }
  .hero p br {
    display: none;
  }
  .stats {
    gap: 12px;
  }
  .stat {
    padding: 16px;
  }
  .stat-heading {
    gap: 4px;
  }
  .stat label {
    font-size: 10px;
  }
  .stat-icon {
    width: 28px;
    height: 28px;
  }
  .stat strong {
    font-size: 28px;
  }
  .stat small {
    font-size: 9px;
  }
  .panel {
    padding: 24px;
  }
  .table-scroll {
    margin: 0 -24px -24px;
  }
  .sectionhead {
    flex-wrap: wrap;
  }
  .sectionhead h2 {
    font-size: 17px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .toolbar {
    gap: 12px;
  }
  .search-field {
    flex: auto;
    max-width: none;
    width: 100%;
  }
  .toolbar-count {
    font-size: 10px;
    margin-left: 0;
  }
  .toolbar select {
    flex: 1;
  }
  .formgrid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .wizard-steps {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .wizard-steps li {
    font-size: 11px;
  }
  .tabs {
    gap: 20px;
  }
  .tabs button {
    font-size: 11px;
  }
  .concept-media {
    grid-template-columns: 1fr;
  }
  .concepthead {
    flex-direction: column;
  }
  .concept-tools {
    width: 100%;
  }
  .settings-content > section h2 {
    font-size: 19px;
  }
  .branding-grid {
    gap: 24px;
  }
  .branding-preview {
    min-height: 320px;
  }
  .actions {
    gap: 8px;
  }
  .actions button,
  .actions .button {
    font-size: 11px;
    padding: 10px 12px;
  }
  .library-summary {
    flex-wrap: wrap;
  }
  .library-summary > span {
    margin-left: 0;
    width: 100%;
  }
  .library-links {
    gap: 8px;
  }
  .library-links .button {
    font-size: 11px;
  }
  .grid2 {
    grid-template-columns: 1fr;
  }
  .authcard {
    padding: 40px 24px;
  }
  .toast {
    right: 16px;
    bottom: 16px;
  }
  .detail-row {
    font-size: 11px;
  }
  .event-head-actions button {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Language controls preserve the existing page and form state. */
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #e5dcef;
  border-radius: 10px;
  background: #faf7fe;
  padding: 3px;
  flex-shrink: 0;
  color: #c0aecb;
}
.language-switch button {
  min-height: 32px;
  min-width: 36px;
  border: 0;
  border-radius: 7px;
  padding: 6px 8px;
  background: transparent;
  color: #9c83b1;
  font-size: 11px;
  box-shadow: none;
}
.language-switch button[aria-pressed="true"] {
  background: #eee5fb;
  color: #7954a0;
}
.language-switch > span {
  font-size: 10px;
}
.authcard > .language-switch {
  display: flex;
  width: max-content;
  margin: 0 0 24px auto;
}
dialog > .language-switch {
  display: flex;
  width: max-content;
  margin: 0 0 24px auto;
}
.file-picker {
  display: flex;
  position: relative;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: 1px solid #e4ddeb;
  border-radius: 10px;
  padding: 8px;
  background: #fcfaff;
}
.file-picker-button {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 11px;
  flex-shrink: 0;
}
.file-picker-status {
  font-size: 10px;
  color: #a18aad;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-picker-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  border: 0;
  min-height: 0;
  overflow: hidden;
}
.file-picker:focus-within {
  outline: 2px solid #b99adb;
  outline-offset: 2px;
}
.module-roadmap {
  margin-top: 24px;
}
.module-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.module-list > div {
  border: 1px solid #eee6f6;
  border-radius: 12px;
  padding: 16px;
  background: #fcf9ff;
}
.module-list strong {
  display: block;
  font-size: 12px;
  color: #a27bb9;
  margin-top: 16px;
  font-weight: 600;
}
.module-list small {
  display: block;
  font-size: 10px;
  color: #b29ac3;
  margin-top: 8px;
}
:lang(zh-CN) .eyebrow,
:lang(zh-CN) .brand small,
:lang(zh-CN) .navlabel {
  letter-spacing: 1px;
}
:lang(zh-CN) .hero h2 {
  line-height: 1.45;
}
:lang(zh-CN) .pagehead h1 {
  letter-spacing: 0;
}
@media (max-width: 1100px) {
  .account {
    gap: 8px;
  }
  .account #syncstate {
    display: none;
  }
  .module-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .language-switch button {
    min-height: 32px;
    min-width: 32px;
    padding: 5px 6px;
    font-size: 10px;
  }
  .topbar {
    padding: 0 16px;
  }
  .breadcrumb {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .module-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .account .avatar {
    display: none;
  }
  .file-picker {
    gap: 8px;
  }
  .file-picker-button {
    padding: 6px 8px;
  }
}

.generation-fields {
  border: 1px solid var(--border, #e5e2ed);
  border-radius: 14px;
  padding: 20px;
  margin: 20px 0;
}
.generation-test {
  width: min(850px, calc(100vw - 32px));
  max-height: 90vh;
  overflow: auto;
  border: 0;
  border-radius: 20px;
  padding: 24px;
}
.generation-test::backdrop {
  background: #21143888;
}
.generation-test pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #f5f1fb;
  padding: 16px;
  border-radius: 12px;
  max-height: 250px;
  overflow: auto;
}
.generation-result {
  display: block;
  max-width: 100%;
  max-height: 600px;
  object-fit: contain;
  margin: 15px auto;
}
.generation-test progress {
  width: 100%;
  accent-color: #7847c5;
}
.generation-test [data-history] {
  display: grid;
  gap: 8px;
}
.generation-test .sectionhead {
  flex-wrap: wrap;
}

.prompt-section {
  margin: 14px 0;
  border-left: 3px solid #9673cf;
  padding-left: 12px;
}
.prompt-section h4 {
  margin: 0;
  color: #654592;
}
.generation-test .prompt-section pre {
  max-height: 230px;
  margin-top: 8px;
}
.prompt-section[data-prompt-section="identity"],
.prompt-section[data-prompt-section="realism"] {
  border-color: #3c927b;
}
.prompt-section[data-prompt-section="references"] {
  border-color: #c69238;
}

/* Funsnap AI production workspace: dark violet neon treatment. */
body:not(.funsnap-guest-booth) {
  --ink: #f5efff;
  --muted: #b6a8cb;
  --line: #3b2b50;
  --border: #46315e;
  --surface: #171123;
  --purple: #ad59f5;
  color: var(--ink);
  background: radial-gradient(ellipse at 78% 0%, #51277044, transparent 34%),
    radial-gradient(ellipse at 12% 100%, #28205e3d, transparent 38%), #0b0812;
}
body:not(.funsnap-guest-booth) #app { min-height: 100vh; }
body:not(.funsnap-guest-booth) .shell { background: transparent; }
body:not(.funsnap-guest-booth) .sidebar {
  background: linear-gradient(180deg, #100b1b, #0d0a14);
  border-right: 1px solid #a655e42c;
  box-shadow: 12px 0 40px #0003;
}
body:not(.funsnap-guest-booth) .sidebar a,
body:not(.funsnap-guest-booth) .sidebar button { color: #cbbbdc; }
body:not(.funsnap-guest-booth) .navlink[aria-current],
body:not(.funsnap-guest-booth) .navlink.active {
  color: #fff; background: linear-gradient(100deg,#a53ce52d,#782bad0b);
  border-left: 2px solid #d36dff; box-shadow: inset 0 0 20px #9c43ed13;
}
body:not(.funsnap-guest-booth) .topbar {
  background: #0d0916c9; border-bottom: 1px solid #ffffff12;
  backdrop-filter: blur(16px); color: var(--ink);
}
body:not(.funsnap-guest-booth) .topbar input,
body:not(.funsnap-guest-booth) input,
body:not(.funsnap-guest-booth) select,
body:not(.funsnap-guest-booth) textarea {
  color: #f7efff; background: #110d1a; border-color: #4e3964;
}
body:not(.funsnap-guest-booth) input::placeholder,
body:not(.funsnap-guest-booth) textarea::placeholder { color: #9485a6; }
body:not(.funsnap-guest-booth) .pagehead { margin-bottom: 26px; }
body:not(.funsnap-guest-booth) .pagehead h1 { color: #fff; letter-spacing: -.04em; }
body:not(.funsnap-guest-booth) .eyebrow { color: #d28bff; }
body:not(.funsnap-guest-booth) .pagehead p,
body:not(.funsnap-guest-booth) .panel p,
body:not(.funsnap-guest-booth) .cardmeta,
body:not(.funsnap-guest-booth) .stat small { color: var(--muted); }
body:not(.funsnap-guest-booth) .stat,
body:not(.funsnap-guest-booth) .panel,
body:not(.funsnap-guest-booth) .eventcard,
body:not(.funsnap-guest-booth) .assetcard {
  color: var(--ink); background: linear-gradient(145deg,#1b1427,#120e1b);
  border-color: #60447977; box-shadow: inset 0 1px #ffffff0b, 0 14px 38px #0003;
}
body:not(.funsnap-guest-booth) .stat { border-radius: 18px; }
body:not(.funsnap-guest-booth) .stat strong { color: #fff; font-size: 28px; }
body:not(.funsnap-guest-booth) .stat-icon {
  color: #e5b8ff; background: #a23de32a; border: 1px solid #bc63f455;
  box-shadow: 0 0 18px #a13be522;
}
body:not(.funsnap-guest-booth) .hero {
  border: 1px solid #c45aff50; border-radius: 22px;
  background: radial-gradient(ellipse at 78% 15%,#a749dc33,transparent 48%),
    linear-gradient(120deg,#21142f,#141020 75%);
  box-shadow: 0 0 34px #9d42d51b;
}
body:not(.funsnap-guest-booth) .button.primary,
body:not(.funsnap-guest-booth) button.primary {
  color: white; border: 1px solid #d796ff;
  background: linear-gradient(110deg,#8938c4,#b241df 60%,#713bb6);
  box-shadow: 0 0 20px #9e42db67, inset 0 1px #ffffff42;
}
body:not(.funsnap-guest-booth) .button:not(.primary),
body:not(.funsnap-guest-booth) button:not(.primary) {
  color: #efdefc; border-color: #775494; background-color: #a044ed14;
}
body:not(.funsnap-guest-booth) a:hover,
body:not(.funsnap-guest-booth) button:hover { filter: brightness(1.12); }
body:not(.funsnap-guest-booth) .badge { color: #e9c9ff; background: #9d42de24; border-color: #ae5be855; }
body:not(.funsnap-guest-booth) .cover img,
body:not(.funsnap-guest-booth) .concept-cover img { object-fit: cover; }
body:not(.funsnap-guest-booth) .cardbottom { border-color: #ffffff17; }
body:not(.funsnap-guest-booth) .empty-state { color: #d9cce9; }
body:not(.funsnap-guest-booth) .tabs { border-color: #ffffff18; }
body:not(.funsnap-guest-booth) .tabs [aria-selected="true"] { color: #f1ceff; border-color: #ce76ff; }
body:not(.funsnap-guest-booth) :focus-visible { outline-color: #7feaff; }
@media (max-width: 800px) {
  body:not(.funsnap-guest-booth) .sidebar { position: relative; height: auto; }
  body:not(.funsnap-guest-booth) .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body:not(.funsnap-guest-booth) .hero { align-items: flex-start; gap: 18px; flex-direction: column; }
}
@media (max-width: 520px) {
  body:not(.funsnap-guest-booth) .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  body:not(.funsnap-guest-booth) .stat { padding: 13px; }
}


/* Events listing: compact cards and fully visible event artwork. */
body:not(.funsnap-guest-booth) #eventlist {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 320px));
  align-items: start;
  justify-content: start;
  gap: 18px;
}
body:not(.funsnap-guest-booth) #eventlist .eventcard {
  overflow: hidden;
}
body:not(.funsnap-guest-booth) #eventlist .cover {
  height: 185px;
  padding: 10px;
  box-sizing: border-box;
  background: #101d2b;
}
body:not(.funsnap-guest-booth) #eventlist .cover > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 7px;
}
body:not(.funsnap-guest-booth) #eventlist .cardbody {
  padding: 14px;
}
body:not(.funsnap-guest-booth) #eventlist .cover-label {
  bottom: 16px;
  left: 16px;
}

/* Dashboard recent-event covers: show the entire portrait, never crop it. */
body:not(.funsnap-guest-booth) .recent-events .eventcard {
  overflow: hidden;
}
body:not(.funsnap-guest-booth) .recent-events .cover {
  height: clamp(260px, 28vw, 420px);
  padding: 12px;
  box-sizing: border-box;
  background: #101d2b;
}
body:not(.funsnap-guest-booth) .recent-events .cover > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 7px;
}
@media (max-width: 640px) {
  body:not(.funsnap-guest-booth) .recent-events .cover {
    height: 320px;
  }
}

/* Phase4: existing brand and functions, approved obsidian/silver/electric-blue direction. */
:root,body{--obsidian:#020912;--surface:#071522;--surface-raised:#0b1c2e;--silver:#d5dfeb;--electric:#087bff;--ice:#67d6ff;--violet:#087bff!important;--violet-dark:#0062e6!important;--violet-soft:#092b4d!important;--green:#19d7ab!important;--ink:#e8f0fa!important;--muted:#9aacc2!important;--line:#213a50!important;--canvas:#020912!important;--sidebar:#030d17!important;--shadow:0 14px 36px #0005!important;color-scheme:dark;font-family:Inter,"Segoe UI",system-ui,sans-serif!important;color:var(--silver)!important;background-color:var(--obsidian)!important}
body{background-image:radial-gradient(ellipse at 80% 0,#07305966,transparent 55%)!important}
h1,h2,h3,strong{color:#f3f7ff!important}h1,h2{letter-spacing:-.035em}p,small,label{color:var(--muted)}a{color:var(--ice)}
button,.button{background:linear-gradient(180deg,#102235,#07121e)!important;border:1px solid #28465f!important;color:#e6f3ff!important;border-radius:8px!important;min-height:42px;box-shadow:inset 0 1px #ffffff08;transition:background .15s,box-shadow .15s,transform .15s}
button:hover:not(:disabled),.button:hover{border-color:#44baff!important;box-shadow:0 0 18px #008bff28}
button.primary,.button.primary,.authsubmit,#confirm,#capture:not(:disabled){background:linear-gradient(105deg,#0862f7,#00bded)!important;border-color:#008cff!important;color:white!important;box-shadow:0 4px 22px #008cff35!important}
button:disabled{opacity:.45!important;cursor:not-allowed}.danger{color:#ff8498!important}
input,select,textarea,.passwordfield{color:#e7f1ff!important;background:#081724!important;border-color:#294056!important;border-radius:7px!important;box-shadow:inset 0 1px 3px #0003}
input::placeholder,textarea::placeholder{color:#7f93ad!important}input[type=checkbox],input[type=radio]{accent-color:#087bff}textarea{line-height:1.65}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #62d7ff!important;outline-offset:3px!important}
.panel,.stat,.eventcard,.assetcard,.concept,dialog,.methodchoices button,.grid2>section,.booth-shell main,.booth-controls,.generation-fields,.reference-tile,.details,.card{background:linear-gradient(140deg,#0a1b2b,#04101b)!important;border:1px solid var(--line)!important;border-radius:10px!important;box-shadow:var(--shadow)}
.stat{position:relative;overflow:hidden}.stat:after{content:"";position:absolute;left:15%;right:15%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#087bff,transparent)}.stat strong{font-size:30px!important}.stat-icon,.workspace-icon,.brand-mark{color:#47cfff!important;background:#072b48!important;border:1px solid #13537a}.stat small{color:#96abc1!important}
.sidebar{background:linear-gradient(180deg,#04101c,#020810)!important;border-right:1px solid #183044!important}.navlink{color:#b8c8dc!important}.navlink.active,.navlink:hover,.settingnav button.active{background:linear-gradient(110deg,#005be9,#0783ff)!important;color:white!important;border-color:#119dff!important;box-shadow:0 0 22px #047cff26}
.brand>span:not(.brand-mark),.authbrand span,header strong span{color:#31bfff!important}.sidebar-tip,.workspace-switch{background:#061524!important;border-color:#20374c!important}.topbar,body>header{background:#04111dea!important;border-color:#1d3448!important}.avatar{background:#103751!important;color:#9adeff!important}.breadcrumb,.account{color:#8fa6bf!important}
.hero{background:linear-gradient(110deg,#071d30,#03101b)!important;border:1px solid #164569!important;border-radius:12px!important;min-height:190px!important}.hero h2{color:#dcf4ff!important}.hero p{color:#a2bad2!important}.hero-canvas{filter:hue-rotate(35deg) saturate(1.35)}.creative-card,.art-sphere{background:linear-gradient(125deg,#004cca,#18bdeb)!important}.eyebrow,.text-link,.cardbottom a{color:#54caff!important}
.cover,.concept-cover,.media-cover,.abstract-cover{background:radial-gradient(circle at 25% 30%,#096298,transparent 60%),linear-gradient(140deg,#0b1930,#031021)!important}.cover-label{background:#02121ee0!important;color:#b5eaff!important;border:1px solid #245573}.badge{background:#05362e!important;color:#74f4cd!important;border:1px solid #175e4d}.badge.draft{background:#162439!important;color:#acbad0!important;border-color:#32445c}
.tabs button{color:#91a7be!important;background:transparent!important;border-radius:0!important;box-shadow:none!important}.tabs button.active{color:#72d7ff!important;border-bottom-color:#008cff!important}.tabs,.detail-row,.cardbottom,th,td,.sectionhead,.sidebarfoot{border-color:#1b3349!important}thead,th{background:#091b2c!important;color:#aec6dd!important}tr:hover{background:#0b2234!important}.sticky-actions{background:#061421ef!important;border-color:#203d58!important}
.notice,.note,.fineprint,.module-roadmap,.settings-layout nav{background:#07233a!important;color:#b5d4ed!important;border-color:#24435a!important}.error,#autherror{color:#ff9eae!important}.empty-state{background:#061321!important;color:#829cb8!important;border-color:#254159!important}
.authshell{background:radial-gradient(ellipse at 40% 60%,#002848,#02070e 65%)!important;gap:24px;padding:38px}.authvisual{background:linear-gradient(155deg,#08223699,#030b13)!important;border:1px solid #163b56;border-radius:18px;padding:clamp(24px,5vw,80px)!important}.authvisual:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(125deg,transparent 0 130px,#0788ff10 132px 134px,transparent 136px 200px);pointer-events:none}.authvisual h2{font-size:clamp(32px,4.5vw,66px)!important;position:relative;color:#e7f7ff!important}.authvisual h2:first-line{color:#51caff!important}.authvisual .eyebrow{letter-spacing:.24em}.authshapes{color:#63d7ff!important;width:180px;height:180px;display:grid;place-items:center;border:1px solid #167cbe;border-radius:50%;background:radial-gradient(circle,#061e32 25%,#00b7ff35 26%,#00101b 30%,#098fff70 32%,#041421 36%,#0b2940 54%,#0878da 55%,#06101d 58%);box-shadow:0 0 65px #009dff35,inset 0 0 32px #000;font-size:50px!important}
.authcard{background:linear-gradient(150deg,#0a1f31e8,#030b14f5)!important;border:1px solid #245a7c!important;border-radius:14px!important;box-shadow:0 20px 80px #0009,0 0 28px #078aff15;padding:38px!important}.authbrand{color:#ecf5ff!important}.authbrand small{color:#91afcb}.authfoot{color:#8ca6c0!important}
body:has(#theme)>main{max-width:1100px;background:linear-gradient(145deg,#0a1c2d,#030c16);border:1px solid #1f425d;border-radius:16px;margin:24px auto;padding:28px}#live,#photo,#result,#preview-image{border:1px solid #276185;border-radius:12px;box-shadow:0 0 28px #087bff17;background:#01060c}#status,#phase{color:#79d8ff!important;line-height:1.65}#status{padding:12px 16px;border-left:3px solid #088dff;background:#08243c;border-radius:6px}#cover{max-height:190px;object-fit:contain;border:1px solid #29577a;border-radius:10px}#qr{background:white!important;padding:16px;border:1px solid #62ceff;border-radius:12px}.controls{background:#061725;padding:20px;border:1px solid #234057;border-radius:12px}pre{background:#03101d!important;color:#a4c5df!important;border-color:#26425d!important}
.billing-layout{display:grid;grid-template-columns:1fr 2fr;gap:24px;margin-top:24px}.billing-layout .billing-state{border:1px solid #25475f;border-radius:10px;padding:22px;background:#061a2a}.billing-layout h3{margin-top:0}
@media(max-width:900px){.authshell{padding:16px;gap:16px}.authcard{padding:26px!important}.authvisual{min-height:300px}.billing-layout{grid-template-columns:1fr}.hero-canvas{max-width:40%}}
@media(max-width:600px){.authshell{display:block}.authvisual{display:none!important}.authcard{margin:20px auto}.topbar{padding:0 16px!important}.stat strong{font-size:24px!important}.controls{padding:12px}body:has(#theme)>main{margin:10px;padding:16px}.billing-layout{gap:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{:root,body{background:white!important;color:black!important}button,nav,.sidebar,.topbar{display:none!important}#preview-image{box-shadow:none;border:0}}
.recent-event-cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.recent-event-cards .cover{height:170px}.recent-event-cards .cardbody{padding:16px}.concept-media,.reference-list{border-color:#294459}.wizard-step.active,.step.active{color:#69d8ff!important;background:#063d78!important}.generation-result{border:1px solid #2b668c;border-radius:12px}.billing-state h3{color:#91bdd9!important}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}.theme-choice{display:flex!important;flex-direction:column;align-items:stretch!important;padding:7px!important;text-align:left}.theme-choice img{width:100%;height:120px;object-fit:cover;border-radius:6px;margin:0 0 8px}.theme-choice[aria-pressed=true]{border-color:#27c4ff!important;box-shadow:0 0 22px #009dff35!important}.theme-choice span{padding:4px}.theme-choice:disabled{opacity:.8!important}body:has(#theme) #capture{border-radius:50%!important;width:76px;height:76px;border:3px solid #61d9ff!important;box-shadow:0 0 0 6px #0b4067,0 0 30px #008eff66!important;font-size:11px}
.authcard label,.field label,.authvisual p{color:#a8bfd5!important}.hero{min-height:150px!important;padding:22px 30px!important}.hero h2{font-size:25px!important;line-height:1.25!important}.hero p{font-size:12px!important;margin:10px 0!important}.hero-canvas{display:none!important}.hero .button{min-height:36px;padding:8px 14px}.recent-event-cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.language-switcher{background:#071622!important;border-color:#284a65!important;box-shadow:none!important}
.module-list>div{background:#081c2b!important;border:1px solid #26475f!important}.module-list small,.detail-row span{color:#9eb4c9!important}.module-list strong{color:#dce8f4!important}
/* Reference login only: no changes to dashboard or reauthentication dialog.
   Official photographic artwork / logo are intentionally not recreated. */
.authshell.reference-login{position:relative;isolation:isolate;display:grid!important;grid-template-columns:61% 39%;gap:0;padding:clamp(80px,14.8vh,130px) 4.6vw clamp(60px,10.3vh,90px) 7.4vw;min-height:100vh;background:radial-gradient(ellipse at 49% 90%,#006daf48,transparent 32%),radial-gradient(ellipse at 0 0,#0d2945a3,transparent 35%),linear-gradient(120deg,#020911,#000308 60%,#03101e)!important;overflow:hidden}
.reference-login:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(148deg,transparent 44%,#007bff08 44.2%,transparent 44.5%),repeating-linear-gradient(90deg,transparent 0 10.5%,#098fff10 10.6%,transparent 10.8% 13%);mask-image:linear-gradient(black,transparent)}
.reference-login:after{content:"";position:absolute;left:-5%;bottom:11%;width:66%;height:3px;transform:rotate(-5deg);background:linear-gradient(90deg,transparent,#00d0ff,#034afa,transparent);box-shadow:0 0 12px #009fff,0 0 32px #006fff;z-index:-1}
.reference-login>.language-switch{position:absolute;right:5.75vw;top:4.5vh;display:flex;align-items:center;gap:9px;padding:3px 12px!important;border:1px solid #46768f!important;border-left-color:#006aff!important;border-radius:13px!important;background:#01070cc4!important;box-shadow:-4px 0 15px #0035ff38!important}
.reference-login>.language-switch button{background:transparent!important;border:0!important;box-shadow:none!important;min-height:32px;padding:2px 10px!important;border-radius:7px!important}.reference-login>.language-switch button[aria-pressed=true]{color:#c6f6ff!important;text-shadow:0 0 10px #008cff}.reference-login>.language-switch>span{color:#557287}
.reference-login .authvisual{padding:0!important;align-self:center;justify-content:center;border:0!important;border-radius:0;background:none!important;overflow:visible;min-height:600px!important}.reference-login .authvisual:before{display:none}.reference-login .login-asset-pending{width:min(440px,82%);min-height:170px;display:flex;flex-direction:column;justify-content:center;gap:12px;margin-bottom:28px;padding:24px;border:1px dashed #35536e;border-radius:8px;color:#a4bdd2;background:#05132144}.reference-login .login-asset-pending small{font-size:12px;line-height:1.6}
.reference-login .authvisual h2{font-family:Inter,"Segoe UI",system-ui,sans-serif;font-size:clamp(32px,2.7vw,49px)!important;line-height:1.08!important;letter-spacing:-.04em;font-weight:750;margin:0!important}.reference-login .authvisual h2 span{display:block;margin:0 0 9px}.reference-login .authvisual h2:first-line{color:#f3f7ff!important}.reference-login .authvisual h2 span:nth-child(2){background:linear-gradient(100deg,#00caff,#0072ff);background-clip:text;color:transparent!important;width:max-content}.reference-login .login-light-rule{width:min(440px,80%);height:2px;margin:15px 0 21px;background:linear-gradient(90deg,#2adaff,#006bff 35%,transparent);box-shadow:0 0 8px #009dff88}.reference-login .authvisual p{font-size:clamp(14px,1.05vw,19px)!important;color:#c1d3e7!important;line-height:1.6;margin:0!important}
.reference-login .authcard{position:relative;width:100%;max-width:590px!important;min-height:650px;padding:clamp(32px,3.6vw,65px)!important;border-radius:28px!important;border:1px solid #345675!important;border-bottom-color:#1cadff!important;background:linear-gradient(130deg,#1222359c,#02070dcf 36%,#01050bdb 80%,#082039c9)!important;box-shadow:inset 0 1px 1px #d6ecff35,-1px 8px 22px #008cff14,0 24px 70px #0009!important;backdrop-filter:blur(18px);align-self:center}
.reference-login .login-heading .eyebrow{font-size:12px;color:#bbd1ea!important;font-weight:600;letter-spacing:.3em;margin:0 0 12px}.reference-login .authcard h1{font-size:clamp(28px,2.5vw,45px)!important;line-height:1.2;letter-spacing:-.045em;white-space:nowrap;margin:0 0 11px;font-weight:750}.reference-login .authcard h1 span{background:linear-gradient(100deg,#00c9ec,#0966ff);background-clip:text;color:transparent}.reference-login .login-workspace{font-size:11px;letter-spacing:.32em;color:#c1d6ed;font-weight:600}.reference-login .login-subtitle{font-size:15px;color:#b7c8da!important;line-height:1.5;margin:28px 0 0}.reference-login .authcard form{margin-top:38px}.reference-login .field{margin-bottom:23px}.reference-login .login-sr{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.reference-login .login-email,.reference-login .passwordfield{position:relative;border:1px solid #36516b!important;border-radius:15px!important;display:flex;align-items:center;background:linear-gradient(110deg,#040c15a8,#080d1280)!important;overflow:hidden;box-shadow:inset 0 1px 2px #0006}.reference-login .login-email svg,.reference-login .passwordfield svg{position:absolute;left:18px;width:23px;height:23px;stroke:#b6cce3;fill:none;stroke-width:1.4;pointer-events:none}.reference-login .login-email input,.reference-login .passwordfield input{width:100%;height:51px!important;min-width:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none;padding:12px 20px 12px 52px!important;font-size:16px}.reference-login input::placeholder{color:#8190a3!important}.reference-login .passwordfield #showpassword{height:44px;min-width:50px;min-height:0;background:transparent!important;border:0!important;box-shadow:none!important;color:#adbed2!important;border-radius:0!important;font-size:11px}
.reference-login .login-options{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:-5px}.reference-login .login-options label{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.5}.reference-login .login-options input{width:18px;height:18px;margin:0}.reference-login .login-options button{padding:0;background:transparent!important;border:0!important;box-shadow:none!important;min-height:26px;font-size:13px;color:#00bbff!important}.reference-login #login-unavailable{display:block;margin-top:8px;font-size:10px;color:#8099b2!important;line-height:1.5}.reference-login #autherror:empty{display:none}.reference-login #autherror{margin:12px 0}
.reference-login .authcard .authsubmit{height:60px;min-height:60px;border-radius:29px!important;font-size:18px;font-weight:650;margin-top:29px;background:linear-gradient(105deg,#12bcf1,#1642ff 43%,#00d5e9)!important;border:1px solid #08b7ef!important;box-shadow:none!important}.reference-login .authsubmit:after{content:" →";margin-left:10px;display:inline-block}.reference-login .authfoot{color:#acc0d6!important;font-size:12px;line-height:1.6;margin-top:34px}
@media(min-width:1500px){.reference-login .authcard form{margin-top:40px}.reference-login .authcard{min-height:650px}.reference-login .authfoot{margin-top:35px}}
@media(max-width:1100px){.authshell.reference-login{grid-template-columns:52% 48%;padding:100px 4vw 50px}.reference-login .authvisual h2{font-size:34px!important}.reference-login .authcard{padding:32px!important;min-height:600px}.reference-login .authcard h1{font-size:30px!important}.reference-login .login-workspace{letter-spacing:.2em}}
@media(max-width:760px){.authshell.reference-login{display:flex!important;flex-direction:column;padding:86px 20px 30px;gap:30px;overflow:visible}.reference-login>.language-switch{right:22px;top:20px}.reference-login .authvisual{display:flex!important;align-self:stretch;min-height:0!important;max-width:520px;width:100%;margin:auto}.reference-login .login-asset-pending{min-height:76px;width:100%;margin:0 0 20px;padding:12px 16px;gap:5px}.reference-login .authvisual h2{font-size:32px!important}.reference-login .authvisual p{font-size:13px!important}.reference-login .login-light-rule{margin:9px 0 12px}.reference-login .authcard{max-width:520px!important;min-height:0;width:100%;margin:0 auto!important;padding:30px 25px!important;border-radius:22px!important}.reference-login .authcard h1{font-size:30px!important}.reference-login .login-subtitle{font-size:14px;margin-top:23px}.reference-login .authcard form{margin-top:28px}.reference-login .login-workspace{font-size:9px;letter-spacing:.24em}.reference-login .authfoot{margin-top:26px}.reference-login .login-options{gap:8px}.reference-login .authcard .authsubmit{height:54px;min-height:54px;font-size:17px}.reference-login:after{width:100%;bottom:35%}}
.reference-login .login-email svg,.reference-login .passwordfield svg{top:50%;transform:translateY(-50%)}
/* Reference eye control, while existing localized aria-label and toggle logic remain. */
.reference-login .passwordfield #showpassword{font-size:0!important;display:grid;place-items:center;border-left:0!important}
.reference-login .passwordfield #showpassword:after{content:"";width:23px;height:23px;background:#b6cce3;mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m3 3 18 18'/%3E%3C/g%3E%3C/svg%3E")}
.reference-login .passwordfield input[type=text]+#showpassword:after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E")}
/* Exact owner-supplied logo: intrinsic aspect ratio, no cropping/filter/redraw. */
.reference-login .login-official-logo{display:block;width:min(440px,82%);height:auto;max-width:100%;object-fit:contain;flex-shrink:0;margin:0 0 42px}
.reference-login .authvisual{align-self:stretch;justify-content:flex-start;margin-top:-85px}
.reference-login .login-art-pending{display:block;max-width:440px;margin:18px 0 0;color:#7e9bb4!important;font-size:11px;line-height:1.6}
@media(max-width:1100px){.reference-login .authvisual{margin-top:-35px}.reference-login .login-official-logo{width:min(390px,94%);margin-bottom:32px}}
@media(max-width:760px){.reference-login .authvisual{margin-top:0}.reference-login .login-official-logo{width:min(380px,100%);margin:0 auto 22px}.reference-login .login-art-pending{margin-top:12px;font-size:10px}}
/* Surrounding presentation only. Original PNG pixels and rendering remain untouched.
   Ambient colors sampled from the approved PNG; gradients sit behind and outside it. */
.authshell.reference-login{background:radial-gradient(ellipse at 63% 95%,#004c7b38,transparent 36%),linear-gradient(115deg,#00060d,#00050a 58%,#03101e)!important}
.reference-login:before{mask-image:linear-gradient(90deg,transparent 0 30%,#0008 53%,black)}
.reference-login .login-logo-stage{position:relative;isolation:isolate;width:min(440px,82%);margin:0 0 42px;flex-shrink:0}
.reference-login .login-logo-stage .login-official-logo{position:relative;display:block;width:100%;height:auto;margin:0;max-width:100%;object-fit:contain;filter:none;mix-blend-mode:normal;opacity:1;border:0;border-radius:0;box-shadow:none}
/* Abstract CSS lighting, not a substitute photographic camera or portrait asset. */
.reference-login .authvisual:after{content:"";position:absolute;pointer-events:none;width:500px;height:90px;left:24%;top:610px;border-radius:50%;border-bottom:2px solid #0497e080;box-shadow:0 12px 22px -16px #00bfff;transform:rotate(-9deg);opacity:.55;z-index:-1}
@media(max-width:1100px){.reference-login .login-logo-stage{width:min(390px,94%);margin-bottom:32px}.reference-login .authvisual:after{width:360px;left:5%;top:540px}}
@media(max-width:760px){.authshell.reference-login{padding:59px 20px 24px;gap:16px}.reference-login>.language-switch{right:20px;top:14px}.reference-login .login-logo-stage{width:220px;max-width:76%;margin:0 auto 10px}.reference-login .authvisual h2{font-size:24px!important;line-height:1.05!important;text-align:center}.reference-login .authvisual h2 span{margin-bottom:4px}.reference-login .authvisual h2 span:nth-child(2){margin-left:auto;margin-right:auto}.reference-login .login-light-rule{height:1px;max-width:220px;margin:8px auto 0}.reference-login .authvisual p{display:none}.reference-login .authvisual:after{display:none}.reference-login .authcard{padding:25px!important}.reference-login .login-subtitle{margin-top:20px}.reference-login .authcard form{margin-top:25px}.reference-login .field{margin-bottom:20px}.reference-login .authfoot{margin-top:23px}}
/* Continuous ambient field avoids rectangular extension panels at the corners. */
.reference-login .login-logo-stage:before{content:"";position:absolute;inset:-55px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 18% 12%,#010e1f 0%,#010a16 25%,#00050c 52%,transparent 80%);filter:blur(26px)}
@media(max-width:760px){.reference-login .login-logo-stage:before{inset:-25px;filter:blur(16px)}}
/* Dashboard-only refinement: official branding and the approved login's glass/light palette. */
.funsnap-shell{grid-template-columns:250px minmax(0,1fr);background:radial-gradient(ellipse at 79% 8%,#08264465,transparent 48%),#01070e}
.funsnap-shell .sidebar{padding:20px 18px 22px;background:linear-gradient(170deg,#02080f,#030d17 65%,#01060b)!important;border-right:1px solid #20364a!important}
.funsnap-shell .brand{display:block;margin:0 0 14px;padding:0;line-height:0;border-bottom:1px solid #153149}
.funsnap-shell .dashboard-logo{display:block;width:100%;max-width:210px;height:auto;object-fit:contain;filter:none;mix-blend-mode:normal;margin:0 auto 10px}
.funsnap-shell .workspace-switch{margin:0 0 15px;padding:14px 10px;background:linear-gradient(110deg,#0b1e2d66,#02091299)!important;border:1px solid #1e3549;border-radius:11px}
.funsnap-shell .workspace-switch strong{color:#dce8f3!important;font-size:12px}.funsnap-shell .workspace-icon{border-radius:10px;background:#09233b!important}.funsnap-shell .navlabel{margin:3px 12px 15px;color:#7e96ae;letter-spacing:.22em;font-size:9px}
.funsnap-shell .navlink{min-height:46px;padding:11px 14px;margin-bottom:7px;font-size:12px;border-radius:9px;color:#aabfd4!important;border:1px solid transparent}.funsnap-shell .navlink.active{color:#fff!important;background:linear-gradient(112deg,#0350dd,#008dff)!important;border-color:#008dff!important;box-shadow:0 5px 20px #006eff33}.funsnap-shell .sidebar-tip{background:linear-gradient(130deg,#0a1a2899,#020913aa)!important;border-color:#203a4f!important;border-radius:12px;padding:18px}.funsnap-shell .sidebarfoot>span{display:block;margin-top:16px;color:#7e9bb2;letter-spacing:.14em;font-size:9px}
.funsnap-shell .topbar{height:76px;padding:0 34px;background:linear-gradient(110deg,#07121ddd,#020911e8)!important;border-bottom:1px solid #22394d!important;backdrop-filter:blur(14px)}.funsnap-shell .breadcrumb{color:#adc4d9!important}.funsnap-shell .account{gap:14px}.funsnap-shell .account #syncstate{color:#849db4!important;font-size:10px}.funsnap-shell .account #syncstate:before{background:#4bbdff;box-shadow:0 0 8px #078eff66}.funsnap-shell .avatar{width:34px;height:34px;border:1px solid #265677;background:linear-gradient(120deg,#113957,#0b1d30)!important;color:#b4e7ff!important}.funsnap-shell #logout{border:1px solid #243f56!important;border-radius:8px;min-height:34px;padding:6px 10px;background:#05131fa8!important}
.funsnap-shell .language-switch{display:flex;gap:5px;align-items:center;background:#010a15!important;border:1px solid #244c6a!important;border-radius:9px!important;padding:3px;box-shadow:none}.funsnap-shell .language-switch button{background:transparent!important;border:0!important;min-height:28px;padding:4px 7px;border-radius:6px!important;font-size:10px;box-shadow:none!important}.funsnap-shell .language-switch button[aria-pressed=true]{background:#092c48!important;color:#79d9ff!important}.funsnap-shell .language-switch>span{color:#36566c}
.funsnap-shell main{max-width:1500px;padding:34px}.funsnap-shell .pagehead{margin-bottom:26px;align-items:center;gap:18px}.funsnap-shell .pagehead .eyebrow{font-size:9px;letter-spacing:.22em;color:#61d6ff!important;margin-bottom:9px}.funsnap-shell .pagehead h1{font-size:34px!important;line-height:1.15;letter-spacing:-.045em;margin:0 0 9px;color:#edf5fc!important}.funsnap-shell .pagehead p{margin:0;color:#9fb8cf!important;font-size:13px}.funsnap-shell .pagehead>.primary{height:44px;min-height:44px;border-radius:9px!important;padding:10px 17px;box-shadow:0 4px 22px #0074ff25!important;font-size:12px}
.funsnap-shell .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 26px}.funsnap-shell .stat{min-height:156px;padding:20px;background:linear-gradient(120deg,#1024359c,#020b14c9)!important;border:1px solid #27475f!important;border-radius:12px!important;box-shadow:inset 0 1px #ffffff06,0 12px 30px #0002;backdrop-filter:blur(12px)}.funsnap-shell .stat-heading{gap:10px;margin-bottom:14px;align-items:center}.funsnap-shell .stat label{font-size:11px;color:#a7bfd4!important;line-height:1.4}.funsnap-shell .stat-icon{width:37px;height:37px;border-radius:10px;background:#07305085!important;border:1px solid #1d5d89;color:#40d1ff!important;box-shadow:0 0 20px #006fff18}.funsnap-shell .stat strong{font-size:34px!important;line-height:1.1;letter-spacing:-.04em;font-weight:700}.funsnap-shell .stat small{font-size:10px;line-height:1.5;margin-top:13px;color:#819eb7!important}.funsnap-shell .stat:after{left:20%;right:20%;opacity:.65}
.funsnap-shell .recent-events{padding:24px;margin:0 0 24px;background:linear-gradient(120deg,#0d2030a6,#020b15c9)!important;border:1px solid #26455c!important;border-radius:14px!important;backdrop-filter:blur(16px);box-shadow:0 14px 40px #0003}.funsnap-shell .recent-events>.sectionhead{margin-bottom:20px;align-items:center;gap:14px}.funsnap-shell .sectionhead h2{font-size:19px;letter-spacing:-.025em;margin:0 0 4px}.funsnap-shell .recent-events>.sectionhead p{font-size:12px;margin:0;color:#839db5!important}.funsnap-shell .text-link{font-size:11px;white-space:nowrap}.funsnap-shell .recent-event-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}.funsnap-shell .eventcard{min-width:0;background:linear-gradient(150deg,#0b1c2b,#020a12)!important;border:1px solid #25435b!important;border-radius:11px!important;overflow:hidden;box-shadow:0 8px 20px #0003}.funsnap-shell .eventcard:hover{border-color:#2d86bd!important;box-shadow:0 8px 28px #006aff15}.funsnap-shell .eventcard .cover{height:150px;border-bottom:1px solid #1b3a52}.funsnap-shell .eventcard .cover-label{font-size:9px;padding:5px 8px;border-radius:6px;backdrop-filter:blur(8px)}.funsnap-shell .eventcard .cardbody{padding:15px}.funsnap-shell .eventcard .sectionhead{gap:8px;align-items:flex-start;min-height:39px;margin-bottom:6px}.funsnap-shell .eventcard h2{font-size:14px;line-height:1.4;letter-spacing:-.02em;overflow-wrap:anywhere;margin:0}.funsnap-shell .eventcard .badge{padding:4px 7px;font-size:8px;border-radius:5px}.funsnap-shell .cardmeta{font-size:10px;line-height:1.6;margin:0 0 13px;color:#8da6bc!important}.funsnap-shell .eventcard .cardbottom{padding-top:12px;font-size:9px;gap:9px;flex-wrap:wrap}.funsnap-shell .cardbottom a{font-size:10px}.funsnap-shell .cardbottom .ui-icon{width:14px;height:14px}
.funsnap-shell .dashboard-creation{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 25px!important;min-height:122px!important;background:linear-gradient(105deg,#09243b99,#020b15d9)!important;border:1px solid #24516f!important;border-radius:13px!important}.funsnap-shell .dashboard-creation:after{content:"";position:absolute;pointer-events:none;width:330px;height:140px;right:20%;bottom:-120px;border:1px solid #29b3eb;border-radius:50%;box-shadow:0 0 22px #058cff55}.funsnap-shell .dashboard-creation h2{font-size:23px!important;margin:4px 0}.funsnap-shell .dashboard-creation p{margin:7px 0 0!important;font-size:11px!important;color:#89acc6!important}.funsnap-shell .dashboard-creation .primary{flex-shrink:0;min-height:40px;padding:8px 15px;font-size:11px}.funsnap-shell .empty-state{margin:0;padding:40px 20px;background:#020d1770!important}
@media(max-width:1100px){.funsnap-shell{grid-template-columns:205px minmax(0,1fr)}.funsnap-shell .sidebar{padding:18px 13px}.funsnap-shell .dashboard-logo{max-width:175px}.funsnap-shell main{padding:28px}.funsnap-shell .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.funsnap-shell .account #syncstate{display:none}.funsnap-shell .recent-event-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.funsnap-shell .eventcard .cover{height:145px}.funsnap-shell .dashboard-creation{align-items:flex-start;flex-direction:column}.funsnap-shell .topbar{padding:0 28px}}
@media(max-width:700px){.funsnap-shell{display:block}.funsnap-shell .sidebar{height:auto;position:static;padding:10px 16px 12px;overflow:hidden;border-right:0!important;border-bottom:1px solid #20384d!important}.funsnap-shell .brand{width:156px;align-self:center;padding:0;margin:0 0 10px;border:0}.funsnap-shell .dashboard-logo{max-width:156px;margin:0}.funsnap-shell .sidebar nav{width:100%;gap:6px;padding-bottom:3px;scrollbar-width:thin;scrollbar-color:#135c8d transparent}.funsnap-shell .navlink{margin:0;flex-shrink:0;padding:9px 12px;min-height:40px;font-size:11px}.funsnap-shell .topbar{height:60px;padding:0 18px!important}.funsnap-shell .breadcrumb{font-size:10px;max-width:130px}.funsnap-shell .account{gap:9px}.funsnap-shell .account #logout{font-size:10px;min-height:32px;padding:5px 8px}.funsnap-shell main{padding:23px 18px 30px}.funsnap-shell .pagehead{margin-bottom:20px;gap:14px}.funsnap-shell .pagehead h1{font-size:29px!important}.funsnap-shell .pagehead p{font-size:12px}.funsnap-shell .pagehead .eyebrow{font-size:8px}.funsnap-shell .pagehead>.primary{min-height:39px;height:39px;padding:8px 13px;font-size:11px}.funsnap-shell .stats{gap:11px;margin-bottom:21px}.funsnap-shell .stat{min-height:132px;padding:15px 13px}.funsnap-shell .stat label{font-size:10px}.funsnap-shell .stat-icon{width:28px;height:28px;border-radius:8px}.funsnap-shell .stat-icon .ui-icon{width:16px;height:16px}.funsnap-shell .stat strong{font-size:29px!important}.funsnap-shell .stat small{font-size:9px;margin-top:10px}.funsnap-shell .stat-heading{gap:5px;margin-bottom:11px}.funsnap-shell .recent-events{padding:17px 13px;margin-bottom:20px}.funsnap-shell .recent-events>.sectionhead{gap:8px;margin-bottom:16px}.funsnap-shell .recent-events>.sectionhead h2{font-size:17px}.funsnap-shell .recent-events>.sectionhead p{font-size:10px;max-width:170px}.funsnap-shell .text-link{font-size:10px}.funsnap-shell .recent-event-cards{gap:10px}.funsnap-shell .eventcard .cover{height:100px}.funsnap-shell .eventcard .cardbody{padding:11px 10px}.funsnap-shell .eventcard h2{font-size:12px}.funsnap-shell .eventcard .sectionhead{flex-direction:column;gap:5px;min-height:0;margin-bottom:7px}.funsnap-shell .eventcard .badge{font-size:8px;align-self:flex-start}.funsnap-shell .eventcard .cover-label{font-size:8px;padding:4px 6px}.funsnap-shell .cardmeta{font-size:9px;margin-bottom:9px}.funsnap-shell .eventcard .cardbottom{font-size:8px;padding-top:8px;gap:7px}.funsnap-shell .cardbottom a{font-size:9px}.funsnap-shell .dashboard-creation{padding:20px!important;gap:13px;min-height:0!important}.funsnap-shell .dashboard-creation h2{font-size:21px!important}.funsnap-shell .dashboard-creation p{font-size:10px!important}}
@media(max-width:360px){.funsnap-shell .recent-event-cards{grid-template-columns:1fr}.funsnap-shell .eventcard .cover{height:150px}.funsnap-shell .eventcard .sectionhead{flex-direction:row}.funsnap-shell .breadcrumb{max-width:95px}}
/* Platform presentation shares the approved Dashboard shell; behavior stays in existing modules. */
.funsnap-shell .panel,.funsnap-shell .assetcard,.funsnap-shell .concept,.funsnap-shell .media-card,.funsnap-shell .empty,.funsnap-shell dialog{background:linear-gradient(130deg,#0c2031d9,#030c16f2)!important;border:1px solid #26455e!important;border-radius:13px!important;box-shadow:0 12px 35px #0003}
.funsnap-shell .panel{padding:26px}.funsnap-shell .formgrid,.funsnap-shell .branding-grid{gap:24px}.funsnap-shell input:not([type=checkbox]):not([type=radio]),.funsnap-shell select,.funsnap-shell textarea{background:#020c17!important;border:1px solid #2a4a65!important;border-radius:9px!important;min-height:44px;color:#dce9f5!important}.funsnap-shell input:focus,.funsnap-shell select:focus,.funsnap-shell textarea:focus{outline:2px solid #158dff!important;outline-offset:2px}.funsnap-shell .field{min-width:0}.funsnap-shell .field label{font-size:12px;letter-spacing:.01em}.funsnap-shell .field small{line-height:1.6;color:#8eabc4}.funsnap-shell textarea{line-height:1.65;resize:vertical}.funsnap-shell .settingnav button.active{background:#073359!important;border-color:#168be9!important;color:#93e1ff!important}.funsnap-shell .settings-content{min-width:0}.funsnap-shell .concepthead{gap:16px;flex-wrap:wrap}.funsnap-shell .concept-tools{display:flex;flex-wrap:wrap;gap:7px}.funsnap-shell .tabs{gap:10px;overflow-x:auto;white-space:nowrap;padding-bottom:2px}.funsnap-shell .tabs button{flex-shrink:0;padding:14px 16px}.funsnap-shell .wizard-steps{gap:12px}.funsnap-shell .wizard-steps li{background:#071b2b!important;border:1px solid #24425b;border-radius:10px;padding:12px;min-width:0}.funsnap-shell .wizard-steps li.current{border-color:#028dff;background:#073052!important}.funsnap-shell .wizard-steps li span{background:#113653!important;color:#a8deff!important}.funsnap-shell .wizard-steps li.current span{background:#007bff!important;color:white!important}.funsnap-shell .toolbar{gap:12px;flex-wrap:wrap}.funsnap-shell .cards{gap:18px}.funsnap-shell .assetinfo{padding:20px}.funsnap-shell .assetart{background:radial-gradient(ellipse,#074b80,#03101d)!important;color:#43caff!important}.funsnap-shell .concept-cover{height:190px}.funsnap-shell .sticky-actions{gap:10px;flex-wrap:wrap;border-radius:10px;padding:16px}.funsnap-shell .settings-layout{gap:24px}.funsnap-shell .sectionhead{gap:16px;flex-wrap:wrap}.funsnap-shell .sectionhead p{line-height:1.6}.funsnap-shell .detail-row{gap:12px;flex-wrap:wrap}.funsnap-shell .review-concepts{gap:12px}.funsnap-shell table{width:100%}.funsnap-shell .table-wrap{overflow-x:auto}.funsnap-shell .upload-box{background:#061724!important;border-color:#275979!important}
.funsnap-product{margin:0;background:radial-gradient(ellipse at 72% 4%,#082d4f,transparent 46%),#01070e;min-height:100vh;color:#dce9f5}.funsnap-product>header{display:flex;align-items:center;justify-content:space-between;padding:10px max(24px,calc((100vw - 1240px)/2));border-bottom:1px solid #203d55;background:#030b15e8!important}.product-brand{display:block;line-height:0}.product-brand img{width:155px;height:auto;display:block;object-fit:contain}.funsnap-product>main{max-width:1240px;margin:0 auto;padding:28px 24px 48px}.funsnap-product h1{color:#f0f7ff;font-size:clamp(27px,3vw,38px);letter-spacing:-.04em;line-height:1.2}.funsnap-product h2{font-size:20px;letter-spacing:-.02em}.funsnap-product .setup,.funsnap-product .stage,.funsnap-product .result,.funsnap-product .controls,.funsnap-product .review-panel{background:linear-gradient(125deg,#0b2031d9,#030c16f2)!important;border:1px solid #27475f!important;border-radius:14px;padding:24px;box-shadow:0 12px 32px #0003}.funsnap-product .viewport{background:#01060c!important;border:1px solid #265777;border-radius:12px;overflow:hidden}.funsnap-product .toolbar{gap:12px;flex-wrap:wrap}.funsnap-product label{color:#a9c3da;line-height:1.6}.funsnap-product select{max-width:100%}.funsnap-product .grid{gap:18px}.funsnap-product .card{border:1px solid #284b67!important;background:#061523!important;border-radius:12px}.funsnap-product #qr{max-width:100%;height:auto}.funsnap-product .booth-heading{display:flex;justify-content:space-between;align-items:start;gap:16px}.mock-badge{display:inline-block;color:#80dfff;background:#073452;border:1px solid #23678e;border-radius:7px;padding:6px 10px;font-size:11px;letter-spacing:.1em;white-space:nowrap}.funsnap-product .booth-panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:22px;align-items:start}.funsnap-product .booth-panels>*{min-width:0}.funsnap-product #live,.funsnap-product #photo,.funsnap-product #result{width:100%;height:auto;max-height:65vh;object-fit:contain;display:block;margin:14px 0}.funsnap-product [hidden]{display:none!important}.funsnap-product .capture-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.funsnap-product .review-panel p{color:#91b0ca;font-size:12px;line-height:1.65}.funsnap-product .theme-choice{min-width:0}.funsnap-product .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.funsnap-product #cover{width:100%;object-fit:contain}.funsnap-product #theme{width:100%;margin:8px 0}.funsnap-product #open{width:100%;margin:12px 0}
@media(max-width:900px){.funsnap-shell .settings-layout{grid-template-columns:1fr}.funsnap-shell .settingnav{display:flex;overflow-x:auto;gap:8px}.funsnap-shell .settingnav button{flex-shrink:0;width:auto}.funsnap-shell .branding-grid{grid-template-columns:1fr}.funsnap-product .booth-panels{grid-template-columns:1fr}}
@media(max-width:700px){.funsnap-shell .panel{padding:18px}.funsnap-shell .formgrid{grid-template-columns:1fr;gap:14px}.funsnap-shell .cards{grid-template-columns:1fr}.funsnap-shell .wizard-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.funsnap-shell .wizard-steps li{padding:9px;font-size:11px}.funsnap-shell .tabs{max-width:100%}.funsnap-shell .concept{padding:16px!important}.funsnap-shell .concept-tools button{font-size:10px;padding:7px}.funsnap-shell .settings-layout{gap:16px}.funsnap-shell .sticky-actions{padding:12px}.funsnap-shell .pagehead{flex-wrap:wrap}.funsnap-shell .actions{flex-wrap:wrap}.funsnap-shell dialog{max-width:calc(100vw - 24px)}.funsnap-product>header{padding:6px 18px}.product-brand img{width:124px}.funsnap-product>main{padding:20px 16px 32px}.funsnap-product .setup,.funsnap-product .stage,.funsnap-product .result,.funsnap-product .controls,.funsnap-product .review-panel{padding:16px}.funsnap-product .booth-heading{flex-wrap:wrap}.funsnap-product .grid{grid-template-columns:1fr}.funsnap-product .controls{grid-template-columns:1fr}.funsnap-product .toolbar{display:flex;flex-direction:column;align-items:stretch}.funsnap-product .viewport{min-height:220px}.funsnap-product .capture-actions button{font-size:11px;min-height:40px}}
.funsnap-shell .wizard-steps{background:linear-gradient(115deg,#0b2031,#030d19)!important;border:1px solid #26475f!important;border-radius:13px!important;padding:20px!important}.funsnap-shell .wizard-steps li.current{color:#b9eaff!important}.funsnap-shell .wizard-steps li div,.funsnap-shell .wizard-steps li small{color:#9db6cb!important}.funsnap-shell .create-aside li,.funsnap-shell .step-tag,.funsnap-shell .sidebar-tip p{color:#8ca8bf!important}.funsnap-product .actions a{background:linear-gradient(110deg,#0762f0,#00aee6)!important;color:white!important;border:1px solid #068ffe;border-radius:8px;box-shadow:0 4px 20px #007cff25}.funsnap-product a:not(.product-brand){color:#68d5ff}.funsnap-product #result:not(img){padding:22px;max-width:800px;margin:20px auto;background:linear-gradient(125deg,#0b2031,#030c16);border:1px solid #264b67}.funsnap-product #result:not(img) #photo{max-height:580px;width:100%;object-fit:contain}.funsnap-product #result:not(img) #qr{width:min(100%,350px)}.funsnap-product #result:not(img) .actions{justify-content:center}.funsnap-product[data-job-state="SUCCEEDED"] #photo{display:none}.funsnap-product[data-active-session=true] #cover{display:none}.funsnap-product[data-active-session=true] .theme-grid{display:none}.funsnap-product[data-active-session=true] #open{display:none}.funsnap-product .booth-panels .review-panel{margin-top:0}.funsnap-product #live:empty{min-height:0}
@media(max-width:700px){.funsnap-shell .wizard-steps{padding:12px!important}.funsnap-product[data-active-session=true] .booth-themes{padding:12px 16px}.funsnap-product[data-active-session=true] .booth-themes h2,.funsnap-product[data-active-session=true] .booth-themes p{display:none}.funsnap-product .booth-panels{gap:14px}.funsnap-product #result:not(img){padding:14px}.funsnap-product #result:not(img) #photo{max-height:420px}}
.funsnap-shell .file-picker,.funsnap-shell .branding-upload-preview,.funsnap-shell .thumbnail-preview,.funsnap-shell .reference-tile,.funsnap-shell .overlay-preview,.funsnap-shell .preview-shell,.funsnap-shell .module-list>div,.funsnap-shell .library-summary{background:linear-gradient(120deg,#0b2031,#030c16)!important;border-color:#27485f!important;color:#8dbad9!important}.funsnap-shell .file-picker-status,.funsnap-shell .preview-top,.funsnap-shell .preview-shell>p{color:#92adc6!important}.funsnap-shell .preview-top{background:#071a2b!important}.funsnap-shell .preview-top>span:first-child{color:#56ceff!important}.funsnap-shell .reference-list,.funsnap-shell .concept-media,.funsnap-shell .generation-fields{border-color:#25455e!important}.funsnap-shell .toggle{color:#a7c0d7}.funsnap-shell .wizard-steps li>span{box-shadow:none!important}.funsnap-shell .file-picker:focus-within{outline:2px solid #54caff!important}
/* Event preview colors and customer artwork remain administrator-controlled. */