:root {
  --ss-bg: #f5f7fb;
  --ss-surface: #ffffff;
  --ss-text: #111827;
  --ss-muted: #6b7280;
  --ss-soft: #eef2f7;
  --ss-border: #e5e7eb;
  --ss-blue: #2f72ff;
  --ss-violet: #6d5dfc;
  --ss-green: #10b981;
  --ss-red: #dc2626;
  --ss-shadow: 0 18px 60px rgba(17, 24, 39, 0.12);
}

/* White PromptHero-inspired redesign. Inspiration-only layout revision. */
body.signshi-body {
  background: #ffffff !important;
}

.ss-header {
  border-bottom: 1px solid #e8edf5 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: none !important;
}

.ss-header--gallery .ss-nav {
  width: min(1880px, calc(100% - 48px)) !important;
  min-height: 72px !important;
}

.ss-header--gallery .ss-nav__links {
  justify-content: center !important;
  gap: 22px !important;
}

.ss-header--gallery .ss-search {
  width: min(370px, 28vw) !important;
  min-width: 280px !important;
  height: 40px !important;
  margin-left: auto !important;
  padding: 0 12px !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border: 1px solid #e2e8f3 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.ss-header--gallery .ss-search input,
.ss-header--gallery .ss-search__scope {
  display: block !important;
}

.ss-header--gallery .ss-search input {
  min-width: 0 !important;
  font-size: 12px !important;
}

.ss-header--gallery .ss-search__submit {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  margin-left: auto !important;
  color: #0f1a2e !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ss-white-home--inspiration-only {
  width: min(1880px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  padding: 0 0 70px !important;
}

.ss-white-chip-row--top {
  height: 50px;
  margin: 0 !important;
  padding: 0 18px !important;
  border-bottom: 1px solid #edf2f8;
  display: flex !important;
  align-items: center;
  gap: 36px !important;
  overflow-x: auto;
  scrollbar-width: none;
}

.ss-white-chip-row--top::-webkit-scrollbar {
  display: none;
}

.ss-white-chip-row--top a {
  min-height: 50px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  position: relative;
  color: #506179 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.ss-white-chip-row--top a.is-active,
.ss-white-chip-row--top a:hover {
  color: var(--ss-blue-strong) !important;
  background: transparent !important;
}

.ss-white-chip-row--top a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--ss-blue-strong);
}

.ss-white-chip-row__more {
  margin-left: auto;
}

.ss-white-hero--wide {
  min-height: 348px !important;
  margin: 0 !important;
  padding: 52px 32px 36px !important;
  border-radius: 0 0 3px 3px !important;
  align-items: center !important;
  justify-content: center !important;
  background-image:
    linear-gradient(90deg, rgba(5, 8, 16, 0.08), rgba(5, 8, 16, 0.38) 34%, rgba(5, 8, 16, 0.22) 72%, rgba(5, 8, 16, 0.2)),
    var(--ss-gallery-hero-image) !important;
  background-position: center !important;
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.12);
}

.ss-white-hero--wide::after {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.18) 100%) !important;
}

.ss-white-hero--wide .ss-white-hero__copy {
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  text-align: center;
}

.ss-white-hero--wide h1 {
  max-width: none !important;
  margin: 0 0 12px !important;
  font-size: clamp(34px, 3.6vw, 54px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
}

.ss-white-hero--wide p {
  max-width: none !important;
  margin: 0 0 26px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 16px !important;
}

.ss-white-hero--wide .ss-discovery-search {
  width: min(610px, 100%) !important;
  margin: 0 auto !important;
  min-height: 54px !important;
  padding: 6px 6px 6px 20px !important;
}

.ss-white-hero--wide .ss-discovery-search button {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
}

.ss-white-hero__pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.ss-white-hero__pills a {
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffffff;
  background: rgba(14, 18, 30, 0.35);
  backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 820;
}

.ss-white-hero__pills svg {
  width: 15px;
  height: 15px;
}

.ss-white-logo-strip {
  min-height: 68px;
  border-bottom: 1px solid #edf2f8;
  display: grid;
  grid-template-columns: 160px repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 28px;
  padding: 0 260px;
  color: #222b3a;
}

.ss-white-logo-strip span {
  color: #98a4b8;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 12px;
  font-weight: 720;
}

.ss-white-logo-strip strong {
  font-size: 20px;
  line-height: 1;
  font-weight: 950;
  text-align: center;
  letter-spacing: -0.04em;
}

.ss-white-inspiration-board {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  padding: 24px;
}

.ss-white-ranking-panel {
  align-self: start;
  padding: 22px 22px 20px;
  border: 1px solid #e4ebf5;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
}

.ss-white-ranking-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.ss-white-ranking-panel h2 {
  margin: 0;
  color: var(--ss-ink);
  font-size: 16px;
  letter-spacing: -0.02em;
}

.ss-white-ranking-panel header svg {
  color: var(--ss-blue-strong);
}

.ss-white-ranking-list {
  display: grid;
  gap: 12px;
}

.ss-white-ranking-list a {
  min-height: 52px;
  display: grid;
  grid-template-columns: 30px 54px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 10px;
  padding: 8px;
  border-radius: 12px;
  color: var(--ss-ink);
  background: #fbfcff;
}

.ss-white-ranking-list a > span {
  grid-row: 1 / 3;
  color: var(--ss-blue-strong);
  font-size: 15px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.ss-white-ranking-list img {
  grid-row: 1 / 3;
  width: 54px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
}

.ss-white-ranking-list strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
}

.ss-white-ranking-list em {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  color: #617087;
  background: #eef3f8;
  font-size: 9px;
  font-style: normal;
  font-weight: 760;
}

.ss-white-ranking-list small {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #69788d;
  font-size: 10px;
  white-space: nowrap;
}

.ss-white-ranking-list small svg {
  width: 11px;
  height: 11px;
}

.ss-white-ranking-panel__link {
  min-height: 38px;
  margin-top: 20px;
  border: 1px solid #dbe6f6;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  color: var(--ss-blue-strong);
  background: #ffffff;
  font-size: 12px;
  font-weight: 820;
}

.ss-white-gallery-masonry {
  display: block !important;
  columns: 4 230px !important;
  column-gap: 18px !important;
}

.ss-white-home .ss-masonry-card.ss-white-card {
  height: 360px;
  display: inline-block !important;
  break-inside: avoid;
  margin: 0 0 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  vertical-align: top;
}

.ss-white-home .ss-masonry-card.ss-white-card:nth-child(3n + 1) {
  height: 420px;
}

.ss-white-home .ss-masonry-card.ss-white-card:nth-child(4n + 2) {
  height: 300px;
}

.ss-white-home .ss-masonry-card.ss-white-card img {
  height: 100% !important;
}

.ss-white-home .ss-masonry-card__shade {
  background: linear-gradient(180deg, transparent 0%, rgba(3, 7, 16, 0.52) 42%, rgba(3, 7, 16, 0.94) 100%) !important;
}

.ss-white-card__save {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: rgba(6, 10, 18, 0.22);
  backdrop-filter: blur(10px);
}

.ss-white-card__save svg {
  width: 15px;
  height: 15px;
}

.ss-white-feature-strip {
  margin: 0 24px;
  padding: 24px 34px;
  border: 1px solid #e4ebf5;
  border-radius: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.05);
}

.ss-white-feature-strip a {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 3px 16px;
  align-items: center;
}

.ss-white-feature-strip span {
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--ss-blue-strong);
  background: #eef4ff;
}

.ss-white-feature-strip strong {
  color: var(--ss-ink);
  font-size: 14px;
  font-weight: 850;
}

.ss-white-feature-strip em {
  color: #68788e;
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
}

.ss-screen-reader {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

@media (max-width: 1500px) {
  .ss-white-logo-strip {
    padding-inline: 80px;
    grid-template-columns: 130px repeat(6, minmax(0, 1fr));
  }

  .ss-white-inspiration-board {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 22px;
  }

  .ss-white-gallery-masonry {
    columns: 3 230px !important;
  }
}

@media (max-width: 980px) {
  .ss-header--gallery .ss-search {
    display: none !important;
  }

  .ss-white-logo-strip {
    padding: 18px 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ss-white-logo-strip span {
    grid-column: 1 / -1;
    text-align: center;
  }

  .ss-white-inspiration-board {
    grid-template-columns: 1fr;
  }

  .ss-white-ranking-panel {
    order: 2;
  }

  .ss-white-feature-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ss-white-home--inspiration-only {
    width: calc(100% - 24px) !important;
  }

  .ss-white-chip-row--top {
    height: 46px;
    gap: 24px !important;
    padding: 0 4px !important;
  }

  .ss-white-chip-row__more {
    display: none !important;
  }

  .ss-white-hero--wide {
    min-height: 430px !important;
    padding: 28px 22px !important;
    border-radius: 18px !important;
  }

  .ss-white-hero--wide .ss-white-hero__copy {
    text-align: left;
  }

  .ss-white-hero--wide h1 {
    max-width: 320px !important;
    font-size: 34px !important;
  }

  .ss-white-hero--wide p {
    max-width: 310px !important;
    font-size: 14px !important;
  }

  .ss-white-hero__pills {
    justify-content: flex-start;
  }

  .ss-white-logo-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .ss-white-logo-strip strong {
    font-size: 16px;
  }

  .ss-white-inspiration-board {
    padding: 18px 0;
  }

  .ss-white-gallery-masonry {
    columns: 1 100% !important;
  }

  .ss-white-home .ss-masonry-card.ss-white-card,
  .ss-white-home .ss-masonry-card.ss-white-card:nth-child(n) {
    height: 360px !important;
  }

  .ss-white-feature-strip {
    margin: 0;
    padding: 18px;
    grid-template-columns: 1fr;
  }
}

.ss-white-home .ss-masonry-card__shade {
  background: linear-gradient(180deg, transparent 0%, rgba(3, 7, 16, 0.52) 42%, rgba(3, 7, 16, 0.94) 100%) !important;
}

.ss-white-home .ss-masonry-card__shade {
  background: linear-gradient(180deg, transparent 0%, rgba(3, 7, 16, 0.52) 42%, rgba(3, 7, 16, 0.94) 100%) !important;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.signshi-body {
  margin: 0;
  overflow-x: hidden;
  background:
    linear-gradient(135deg, rgba(47, 114, 255, 0.08), transparent 28%),
    linear-gradient(225deg, rgba(109, 93, 252, 0.08), transparent 32%),
    linear-gradient(180deg, #fbfdff 0%, #f4f7fb 42%, #eef3f9 100%);
  color: var(--ss-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

body.ss-modal-open {
  overflow: hidden;
}

body.signshi-body a {
  color: inherit;
  text-decoration: none;
}

body.signshi-body button,
body.signshi-body input,
body.signshi-body textarea {
  font: inherit;
}

body.signshi-body img {
  display: block;
  max-width: 100%;
}

.site {
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
}

.ss-header {
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid rgba(229, 231, 235, 0.7);
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 10px 34px rgba(17, 24, 39, 0.04);
}

.ss-nav {
  width: min(1760px, calc(100% - 44px));
  min-height: 54px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
}

.ss-brand,
.ss-user,
.ss-user-menu a,
.ss-user-menu button,
.ss-login-btn,
.ss-publish-btn,
.ss-primary,
.ss-outline,
.ss-search,
.ss-search__submit {
  display: inline-flex;
  align-items: center;
}

.ss-brand {
  flex: 0 0 auto;
  color: var(--ss-blue);
}

.ss-brand__logo {
  display: block;
  width: auto;
  height: 42px;
}

.ss-brand__mark {
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;
  aspect-ratio: 1;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 24px rgba(12, 27, 78, 0.12);
}

.ss-brand__icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ss-brand__name {
  background: linear-gradient(90deg, #1f6fff, #7c5cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 20px;
  font-weight: 950;
}

.ss-nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
  color: #374151;
  font-size: 14px;
  font-weight: 700;
}

.ss-nav__links a:hover {
  color: var(--ss-blue);
}

.ss-search {
  margin-left: auto;
  height: 38px;
  min-width: 330px;
  border-radius: 999px;
  padding: 0 5px 0 14px;
  gap: 10px;
  background: #edf2f8;
  color: #667085;
}

.ss-search:focus-within {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 114, 255, 0.12);
}

.ss-search__scope {
  padding-right: 10px;
  border-right: 1px solid #d9e0ea;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.ss-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ss-text);
  font-size: 13px;
}

.ss-search input::placeholder {
  color: #98a2b3;
}

.ss-search__submit {
  width: 30px;
  height: 30px;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  color: #667085;
  background: transparent;
  cursor: pointer;
}

.ss-search__submit:hover {
  color: var(--ss-blue);
  background: #dbe7ff;
}

.ss-auth {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.ss-login-btn,
.ss-publish-btn,
.ss-primary,
.ss-outline {
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 850;
  white-space: nowrap;
}

.ss-login-btn,
.ss-primary {
  color: #fff;
  background: var(--ss-blue);
  box-shadow: 0 10px 24px rgba(47, 114, 255, 0.2);
}

.ss-login-btn {
  min-width: 76px;
  padding: 10px 18px;
  font-size: 13px;
}

.ss-publish-btn,
.ss-outline {
  color: var(--ss-blue);
  background: #eff5ff;
}

.ss-publish-btn {
  padding: 9px 14px;
  font-size: 13px;
}

.ss-primary {
  min-height: 44px;
  padding: 12px 22px;
}

.ss-outline {
  min-height: 42px;
  padding: 11px 20px;
}

.ss-login-btn:hover,
.ss-primary:hover,
.ss-publish-btn:hover,
.ss-outline:hover {
  transform: translateY(-1px);
}

.ss-publish-btn svg,
.ss-primary svg,
.ss-outline svg {
  width: 17px;
  height: 17px;
}

.ss-user {
  height: 38px;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 4px 9px 4px 4px;
  color: var(--ss-text);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.ss-user:hover {
  background: #edf2f8;
}

.ss-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #2f72ff, #a855f7);
  background-size: cover;
  background-position: center;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.ss-user-avatar.has-image {
  color: transparent;
}

.ss-user svg {
  width: 15px;
  height: 15px;
  color: #667085;
}

.ss-user-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: 190px;
  display: none;
  padding: 7px;
  border: 1px solid var(--ss-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ss-shadow);
}

.ss-user-menu.is-open {
  display: block;
}

.ss-user-menu a,
.ss-user-menu button {
  width: 100%;
  gap: 8px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #475467;
  cursor: pointer;
  text-align: left;
}

.ss-user-menu a:hover,
.ss-user-menu button:hover {
  color: var(--ss-blue);
  background: #f5f8ff;
}

.ss-user-menu svg {
  width: 16px;
  height: 16px;
}

.ss-inspiration-shell {
  width: min(1680px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0 84px;
}

.ss-screen-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ss-discovery-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 390px);
  gap: 20px;
  margin-bottom: 22px;
  min-width: 0;
}

.ss-discovery-hero__copy,
.ss-studio-panel,
.ss-gallery-rail__panel {
  border: 1px solid rgba(215, 226, 242, 0.86);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.9)),
    linear-gradient(90deg, rgba(47, 114, 255, 0.08), rgba(16, 185, 129, 0.07)),
    var(--ss-gallery-hero-image, none) center/cover;
  box-shadow: 0 24px 70px rgba(22, 35, 58, 0.09);
}

.ss-discovery-hero__copy {
  min-height: 280px;
  min-width: 0;
  padding: clamp(24px, 3.2vw, 46px);
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ss-discovery-hero__copy h2 {
  max-width: 760px;
  margin: 0;
  color: #0b1220;
  font-size: clamp(38px, 5vw, 76px);
  line-height: 0.95;
  font-weight: 950;
}

.ss-discovery-hero__copy p {
  max-width: 690px;
  margin: 18px 0 24px;
  color: #526071;
  font-size: 16px;
  line-height: 1.7;
}

.ss-discovery-search {
  width: min(760px, 100%);
  max-width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 8px 7px 19px;
  border: 1px solid rgba(193, 207, 228, 0.92);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 40px rgba(47, 114, 255, 0.1);
}

.ss-discovery-search svg {
  width: 20px;
  height: 20px;
  color: var(--ss-blue);
}

.ss-discovery-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ss-text);
  background: transparent;
  font-size: 15px;
}

.ss-discovery-search button {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #111827;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(17, 24, 39, 0.18);
}

.ss-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.ss-chip-row a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(205, 217, 235, 0.9);
  border-radius: 999px;
  color: #526071;
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 850;
}

.ss-chip-row a:hover,
.ss-chip-row a.is-active {
  color: #fff;
  border-color: #111827;
  background: #111827;
}

.ss-studio-panel {
  min-height: 280px;
  min-width: 0;
  padding: 24px;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ss-studio-panel__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.ss-studio-panel__top span {
  color: #0b1220;
  font-size: 42px;
  line-height: 1;
  font-weight: 950;
}

.ss-studio-panel__top small {
  color: #7b8796;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.ss-studio-panel h3 {
  margin: 26px 0 8px;
  color: #0b1220;
  font-size: 24px;
}

.ss-studio-panel p {
  margin: 0 0 18px;
  color: #526071;
  line-height: 1.65;
}

.ss-studio-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-bottom: 18px;
}

.ss-studio-actions a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(205, 217, 235, 0.95);
  border-radius: 14px;
  color: #172033;
  background: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 900;
}

.ss-studio-actions a:first-child {
  color: #fff;
  border-color: #2f72ff;
  background: linear-gradient(135deg, #2f72ff, #10b981);
}

.ss-studio-actions svg {
  width: 16px;
  height: 16px;
}

.ss-studio-stats {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss-studio-stats li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #6b7280;
  font-size: 12px;
}

.ss-studio-stats strong {
  color: #111827;
  font-size: 13px;
}

.ss-gallery-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  min-width: 0;
}

.ss-gallery-rail {
  position: sticky;
  top: 76px;
}

.ss-gallery-rail__panel {
  padding: 18px;
  border-radius: 22px;
}

.ss-gallery-rail__panel h2 {
  margin: 0 0 8px;
  color: #0b1220;
  font-size: 19px;
}

.ss-gallery-rail__panel p {
  margin: 0 0 16px;
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
}

.ss-trend-list {
  display: grid;
  gap: 10px;
}

.ss-trend-card {
  width: 100%;
  display: grid;
  grid-template-columns: 30px 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(229, 233, 241, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  cursor: pointer;
  text-align: left;
}

.ss-trend-card:hover {
  border-color: rgba(47, 114, 255, 0.38);
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.1);
}

.ss-trend-card span {
  color: #98a2b3;
  font-size: 12px;
  font-weight: 950;
}

.ss-trend-card img {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  object-fit: cover;
}

.ss-trend-card strong {
  min-width: 0;
  color: #172033;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 900;
}

.ss-gallery-main {
  min-width: 0;
  max-width: 100%;
}

.ss-search-result {
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(221, 228, 239, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ss-muted);
  font-size: 14px;
}

.ss-search-result strong {
  color: var(--ss-text);
}

.ss-search-result a {
  color: var(--ss-blue);
  font-weight: 800;
}

.ss-masonry {
  columns: 5 220px;
  column-gap: 16px;
}

.ss-masonry-card {
  position: relative;
  width: 100%;
  display: inline-block;
  overflow: hidden;
  margin: 0 0 16px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 18px;
  background: #dfe7f2;
  break-inside: avoid;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 16px 38px rgba(17, 24, 39, 0.1);
  transform: translateZ(0);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.ss-masonry-card img {
  width: 100%;
  filter: saturate(1.06) contrast(1.02);
  transition: transform 0.28s ease, filter 0.28s ease;
}

.ss-masonry-card:hover img {
  transform: scale(1.035);
  filter: saturate(1.05);
}

.ss-masonry-card:hover {
  border-color: rgba(47, 114, 255, 0.28);
  box-shadow: 0 26px 58px rgba(47, 114, 255, 0.18);
  transform: translateY(-2px);
}

.ss-masonry-card__shade {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 54px 13px 12px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(11, 18, 32, 0.86));
  opacity: 1;
  transition: opacity 0.2s ease;
}

.ss-masonry-card:hover .ss-masonry-card__shade {
  opacity: 1;
}

.ss-masonry-card__shade strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}

.ss-masonry-card__shade em {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-style: normal;
  opacity: 0.82;
}

.ss-card-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.ss-card-action svg {
  width: 12px;
  height: 12px;
}

.ss-prompt-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 16px 24px 56px;
}

.ss-prompt-modal.is-open {
  display: flex;
}

.ss-prompt-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(12px);
}

.ss-prompt-sheet {
  position: relative;
  z-index: 1;
  width: min(1220px, calc(100vw - 48px));
  min-height: 700px;
  display: grid;
  grid-template-columns: minmax(520px, 1.72fr) minmax(320px, 0.9fr);
  gap: 30px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.98));
  box-shadow: 0 36px 100px rgba(17, 24, 39, 0.3);
}

.ss-prompt-actions {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.ss-round-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #edf0f5;
  border-radius: 999px;
  color: #667085;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
}

.ss-round-btn:hover {
  color: var(--ss-blue);
  background: #f5f8ff;
}

.ss-round-btn svg {
  width: 17px;
  height: 17px;
}

.ss-prompt-visual {
  margin: 0;
}

.ss-prompt-visual img {
  width: 100%;
  max-height: 500px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 18px 46px rgba(17, 24, 39, 0.12);
}

.ss-prompt-visual figcaption {
  margin-top: 10px;
  color: #98a2b3;
  font-size: 12px;
  text-align: right;
}

.ss-prompt-info {
  padding-top: 8px;
}

.ss-author-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.ss-author-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--ss-blue), var(--ss-violet));
  font-size: 12px;
  font-weight: 900;
  background-size: cover;
  background-position: center;
}

.ss-author-avatar.has-image {
  color: transparent;
  background-color: #eef2f7;
}

.ss-author-line strong {
  display: block;
  font-size: 13px;
}

.ss-author-line small {
  color: #98a2b3;
  font-size: 11px;
}

.ss-prompt-info h2 {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.35;
}

.ss-prompt-tag {
  display: inline-flex;
  margin-bottom: 20px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--ss-blue);
  background: #eff5ff;
  font-size: 12px;
  font-weight: 800;
}

.ss-copy-row {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #475467;
  font-size: 12px;
  font-weight: 850;
}

.ss-copy-row button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(47, 114, 255, 0.2);
  border-radius: 999px;
  color: var(--ss-blue);
  background: #eff5ff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.ss-copy-row svg {
  width: 14px;
  height: 14px;
}

.ss-prompt-box {
  min-height: 148px;
  padding: 18px;
  border: 1px solid #e4eaf4;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff, #f6f9ff);
}

.ss-prompt-box p {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.75;
}

.ss-related {
  grid-column: 1 / -1;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid #edf0f5;
}

.ss-related__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.ss-related__head h3 {
  margin: 0;
  font-size: 16px;
}

.ss-related__head a {
  color: #667085;
  font-size: 12px;
}

.ss-related__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ss-related-card {
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #f2f4f7;
  cursor: pointer;
  text-align: left;
}

.ss-related-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.ss-related-card span {
  display: block;
  padding: 9px 10px 10px;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-dashboard {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  padding: 42px 0 80px;
}

.ss-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  gap: 22px;
  margin-bottom: 22px;
}

.ss-profile-card,
.ss-level-card,
.ss-usage-card {
  border: 1px solid rgba(229, 231, 235, 0.86);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 42px rgba(17, 24, 39, 0.06);
}

.ss-profile-card {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 20px;
  align-items: start;
  padding: 22px;
}

.ss-profile-card__avatar {
  width: 118px;
  height: 118px;
  border-radius: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.42), transparent 32%),
    linear-gradient(135deg, #111827, #2f72ff 52%, #a855f7);
  background-size: cover;
  background-position: center;
  color: #fff;
  font-size: 42px;
  font-weight: 950;
  box-shadow: 0 18px 36px rgba(47, 114, 255, 0.16);
}

.ss-profile-card__avatar.has-image {
  color: transparent;
}

.ss-profile-card h2,
.ss-level-card h2 {
  margin: 0 0 14px;
  font-size: 22px;
}

.ss-profile-card label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 12px;
  color: #344054;
  font-size: 13px;
  font-weight: 850;
}

.ss-profile-card input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  padding: 0 12px;
}

.ss-profile-message {
  min-height: 20px;
  margin: 10px 0 0;
  color: var(--ss-muted);
  font-size: 13px;
}

.ss-profile-message.is-error {
  color: var(--ss-red);
}

.ss-profile-message.is-success {
  color: var(--ss-green);
}

.ss-level-card {
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.94), rgba(47, 114, 255, 0.84)),
    #111827;
  color: #fff;
}

.ss-level-card span,
.ss-level-card small {
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  font-weight: 850;
}

.ss-level-card p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.78);
}

.ss-level-card strong {
  display: block;
  margin: 12px 0 8px;
  font-size: 14px;
}

.ss-level-meter {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.ss-level-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #62e6ff, #b9ff7a);
}

.ss-usage-card {
  margin: 14px 0;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  background:
    linear-gradient(135deg, rgba(47, 114, 255, 0.09), rgba(124, 92, 255, 0.07)),
    #fff;
}

.ss-usage-card strong {
  display: block;
  font-size: 16px;
}

.ss-usage-card span,
.ss-usage-card small {
  color: var(--ss-muted);
  font-size: 12px;
  line-height: 1.6;
}

.ss-admin-fields,
.ss-user-limit-note {
  border: 1px solid #dbe7ff;
  border-radius: 16px;
  padding: 14px;
  background: #f7faff;
}

.ss-admin-fields > span,
.ss-user-limit-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ss-blue);
  font-size: 12px;
  font-weight: 900;
}

.ss-admin-fields > span {
  margin-bottom: 12px;
}

.ss-admin-fields svg,
.ss-user-limit-note svg {
  width: 16px;
  height: 16px;
}

.ss-tool-shell {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  padding: 42px 0 82px;
}

.ss-tool-hero {
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(120deg, rgba(12, 18, 36, 0.82), rgba(47, 114, 255, 0.72) 48%, rgba(124, 92, 255, 0.7)),
    linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 24px),
    var(--ss-tool-hero-image, url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1600&h=700&q=85")) center/cover;
  box-shadow: var(--ss-shadow);
}

.ss-tool-hero span {
  font-size: 13px;
  font-weight: 900;
  opacity: 0.9;
}

.ss-tool-hero h1 {
  margin: 8px 0 10px;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1;
}

.ss-tool-hero p {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.7;
}

.ss-tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  white-space: nowrap;
}

.ss-tool-badge svg {
  width: 18px;
  height: 18px;
}

.ss-image-tool {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr);
  gap: 22px;
}

.ss-upload-panel,
.ss-generate-panel {
  border: 1px solid var(--ss-border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.05);
}

.ss-upload-panel {
  padding: 18px;
}

.ss-upload-zone {
  min-height: 430px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 28px;
  border: 1.5px dashed #c7d7fe;
  border-radius: 20px;
  color: #475467;
  background:
    radial-gradient(circle at 20% 18%, rgba(47, 114, 255, 0.1), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(109, 93, 252, 0.1), transparent 30%),
    #f8fbff;
  text-align: center;
  cursor: pointer;
}

.ss-upload-zone input {
  display: none;
}

.ss-upload-zone span {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  color: var(--ss-blue);
  background: #eaf1ff;
}

.ss-upload-zone span svg {
  width: 30px;
  height: 30px;
}

.ss-upload-zone strong {
  color: var(--ss-text);
  font-size: 22px;
}

.ss-upload-zone em {
  max-width: 340px;
  color: var(--ss-muted);
  font-style: normal;
  font-size: 13px;
  line-height: 1.6;
}

.ss-preview-card {
  margin-top: 16px;
}

.ss-preview-card[hidden] {
  display: none;
}

.ss-preview-card img {
  width: 100%;
  max-height: 360px;
  border-radius: 14px;
  object-fit: cover;
}

.ss-preview-card .ss-outline {
  margin-top: 12px;
}

.ss-generate-panel {
  padding: 24px;
}

.ss-tool-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.ss-tool-options label,
.ss-output-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #344054;
  font-size: 13px;
  font-weight: 850;
}

.ss-tool-options select,
.ss-output-label textarea {
  width: 100%;
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  outline: 0;
  color: var(--ss-text);
  background: #fff;
}

.ss-tool-options select {
  height: 44px;
  padding: 0 12px;
}

.ss-output-label textarea {
  resize: vertical;
  padding: 14px;
  line-height: 1.7;
}

.ss-tool-options select:focus,
.ss-output-label textarea:focus {
  border-color: #a4c2ff;
  box-shadow: 0 0 0 3px rgba(47, 114, 255, 0.12);
}

.ss-generate-btn {
  width: 100%;
}

.ss-generate-btn:disabled,
.ss-tool-actions button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.ss-tool-status {
  min-height: 22px;
  margin: 14px 0;
  color: var(--ss-muted);
  font-size: 13px;
  line-height: 1.6;
}

.ss-tool-status.is-error {
  color: var(--ss-red);
}

.ss-tool-status.is-success {
  color: var(--ss-green);
}

.ss-tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.ss-chat-shell {
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
  padding: 42px 0 82px;
}

.ss-chat-hero {
  min-height: 210px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 34px;
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(120deg, rgba(8, 17, 43, 0.88), rgba(47, 114, 255, 0.74) 54%, rgba(24, 214, 226, 0.6)),
    var(--ss-chat-hero-image, url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1600&h=700&q=85")) center/cover;
  box-shadow: var(--ss-shadow);
}

.ss-chat-hero span,
.ss-chat-panel__head span {
  font-size: 13px;
  font-weight: 900;
}

.ss-chat-hero h1 {
  margin: 8px 0 10px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
}

.ss-chat-hero p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.7;
}

.ss-chat-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  white-space: nowrap;
}

.ss-chat-hero__badge svg {
  width: 18px;
  height: 18px;
}

.ss-chat-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.ss-chat-gate,
.ss-chat-panel {
  border: 1px solid var(--ss-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.06);
}

.ss-chat-gate {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 26px;
}

.ss-chat-gate h2,
.ss-chat-panel__head h2 {
  margin: 0;
  font-size: 24px;
}

.ss-chat-gate p,
.ss-chat-panel__head p {
  margin: 7px 0 0;
  color: var(--ss-muted);
  line-height: 1.65;
}

.ss-chat-gate label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #344054;
  font-size: 13px;
  font-weight: 850;
}

.ss-chat-gate input,
.ss-chat-compose textarea {
  width: 100%;
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  outline: 0;
  color: var(--ss-text);
  background: #fff;
}

.ss-chat-gate input {
  height: 44px;
  padding: 0 13px;
}

.ss-chat-gate input:focus,
.ss-chat-compose textarea:focus {
  border-color: #a4c2ff;
  box-shadow: 0 0 0 3px rgba(47, 114, 255, 0.12);
}

.ss-chat-status {
  min-height: 20px;
  margin: 0;
  color: var(--ss-muted);
  font-size: 13px;
}

.ss-chat-status.is-error {
  color: var(--ss-red);
}

.ss-chat-status.is-success {
  color: var(--ss-green);
}

.ss-chat-panel {
  display: flex;
  min-height: 620px;
  overflow: hidden;
  flex-direction: column;
}

.ss-chat-panel[hidden] {
  display: none;
}

.ss-chat-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--ss-border);
}

.ss-chat-panel__head span {
  color: var(--ss-blue);
}

.ss-chat-log {
  flex: 1;
  min-height: 380px;
  max-height: 54vh;
  overflow-y: auto;
  padding: 20px 24px;
  background:
    linear-gradient(180deg, rgba(47, 114, 255, 0.04), transparent 36%),
    #fbfdff;
}

.ss-chat-empty {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  color: var(--ss-muted);
}

.ss-chat-empty svg {
  width: 34px;
  height: 34px;
  color: var(--ss-blue);
}

.ss-chat-empty strong {
  color: var(--ss-text);
}

.ss-chat-message {
  max-width: min(76%, 560px);
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--ss-border);
  border-radius: 14px 14px 14px 4px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.04);
}

.ss-chat-message.is-own {
  margin-left: auto;
  border-color: rgba(47, 114, 255, 0.18);
  border-radius: 14px 14px 4px 14px;
  color: #fff;
  background: linear-gradient(135deg, #2f72ff, #16b8e8);
}

.ss-chat-message__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
  font-size: 12px;
}

.ss-chat-message__meta span,
.ss-chat-message__meta time {
  color: var(--ss-muted);
}

.ss-chat-message.is-own .ss-chat-message__meta span,
.ss-chat-message.is-own .ss-chat-message__meta time {
  color: rgba(255, 255, 255, 0.78);
}

.ss-chat-message p {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}

.ss-chat-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 18px;
  border-top: 1px solid var(--ss-border);
  background: #fff;
}

.ss-chat-compose textarea {
  min-height: 50px;
  max-height: 150px;
  resize: vertical;
  padding: 12px 13px;
}

.ss-chat-compose button {
  align-self: stretch;
}

.ss-page-shell {
  width: min(980px, calc(100% - 44px));
  margin: 0 auto;
  padding: 48px 0 86px;
}

.ss-page-card {
  border: 1px solid var(--ss-border);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 60px rgba(17, 24, 39, 0.08);
}

.ss-page-head {
  padding: 34px;
  color: #fff;
  background: linear-gradient(120deg, #08112b, #2f72ff 58%, #18d6e2);
}

.ss-page-head span {
  font-size: 13px;
  font-weight: 900;
  opacity: 0.85;
}

.ss-page-head h1 {
  margin: 8px 0 0;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.05;
}

.ss-page-content {
  padding: 34px;
  color: #344054;
  line-height: 1.8;
}

.ss-page-content h2,
.ss-page-content h3 {
  color: var(--ss-text);
  line-height: 1.2;
}

.ss-page-content img {
  height: auto;
  border-radius: 14px;
}

.ss-page-content a {
  color: var(--ss-blue);
  font-weight: 800;
}

.ss-dashboard-head,
.ss-dashboard-gate,
.ss-dashboard-grid,
.ss-publish-panel,
.ss-my-posts,
.ss-empty {
  border: 1px solid var(--ss-border);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.05);
}

.ss-dashboard-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 30px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(47, 114, 255, 0.12), rgba(124, 92, 255, 0.08)),
    rgba(255, 255, 255, 0.92);
}

.ss-dashboard-head span {
  color: var(--ss-blue);
  font-size: 13px;
  font-weight: 900;
}

.ss-dashboard-head h1,
.ss-dashboard-gate h1 {
  margin: 6px 0 8px;
  font-size: 34px;
  line-height: 1.15;
}

.ss-dashboard-head p,
.ss-dashboard-gate p,
.ss-muted {
  margin: 0;
  color: var(--ss-muted);
  line-height: 1.7;
}

.ss-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  gap: 22px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ss-publish-panel,
.ss-my-posts,
.ss-dashboard-gate,
.ss-empty {
  border-radius: 16px;
  padding: 26px;
}

.ss-dashboard-gate {
  max-width: 560px;
  margin: 70px auto;
  text-align: center;
}

.ss-dashboard-gate .ss-brand__mark {
  margin: 0 auto 12px;
}

.ss-dashboard-gate .ss-primary {
  margin-top: 22px;
}

.ss-publish-panel {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ss-publish-panel label,
.ss-auth-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #344054;
  font-size: 13px;
  font-weight: 850;
}

.ss-publish-panel input,
.ss-publish-panel textarea,
.ss-auth-form input:not([type="checkbox"]) {
  width: 100%;
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  outline: 0;
  color: var(--ss-text);
  background: #fff;
}

.ss-publish-panel input,
.ss-auth-form input:not([type="checkbox"]) {
  height: 44px;
  padding: 0 13px;
}

.ss-publish-panel textarea {
  resize: vertical;
  padding: 13px;
}

.ss-publish-panel input:focus,
.ss-publish-panel textarea:focus,
.ss-auth-form input:focus {
  border-color: #a4c2ff;
  box-shadow: 0 0 0 3px rgba(47, 114, 255, 0.12);
}

.ss-publish-message,
.ss-auth-message {
  min-height: 20px;
  margin: 0;
  color: var(--ss-muted);
  font-size: 13px;
}

.ss-publish-message.is-error,
.ss-auth-message.is-error {
  color: var(--ss-red);
}

.ss-publish-message.is-success,
.ss-auth-message.is-success {
  color: var(--ss-green);
}

.ss-my-posts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.ss-my-posts__head h2 {
  margin: 0;
  font-size: 20px;
}

.ss-my-posts__head span {
  color: #667085;
  font-size: 12px;
  font-weight: 850;
}

.ss-my-post-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ss-my-post-list article {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  align-items: center;
}

.ss-my-post-list img {
  width: 82px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
}

.ss-my-post-list strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.ss-my-post-list small {
  color: var(--ss-muted);
  font-size: 12px;
}

.ss-floating {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
}

.ss-float-btn {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ss-border);
  border-radius: 999px;
  color: #667085;
  background: #fff;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.1);
  cursor: pointer;
}

.ss-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.ss-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ss-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.ss-auth-modal.is-open {
  display: flex;
}

.ss-auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 41, 55, 0.48);
  backdrop-filter: blur(8px);
}

.ss-auth-card {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  padding: 26px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ss-shadow);
}

.ss-icon-btn,
.ss-auth-card__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ss-auth-card__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #667085;
}

.ss-auth-card__close:hover {
  background: #f2f4f7;
}

.ss-auth-card__head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-right: 30px;
}

.ss-auth-card__head h2 {
  margin: 0;
  font-size: 23px;
}

.ss-auth-card__head p {
  margin: 4px 0 0;
  color: var(--ss-muted);
  font-size: 13px;
  line-height: 1.5;
}

.ss-auth-tabs {
  margin: 23px 0 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 4px;
  border-radius: 999px;
  background: #f2f4f7;
}

.ss-auth-tabs button {
  border: 0;
  border-radius: 999px;
  padding: 9px 12px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  font-weight: 850;
}

.ss-auth-tabs button.active {
  color: var(--ss-text);
  background: #fff;
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.08);
}

.ss-auth-form {
  display: none;
  flex-direction: column;
  gap: 14px;
}

.ss-auth-form.active {
  display: flex;
}

.ss-check {
  flex-direction: row !important;
  align-items: center;
  font-weight: 700 !important;
}

.ss-empty--gallery {
  max-width: 520px;
  margin: 80px auto;
  text-align: center;
}

@media (max-width: 1180px) {
  .ss-nav {
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 0;
  }

  .ss-search {
    order: 3;
    width: 100%;
    min-width: 0;
  }

  .ss-discovery-hero,
  .ss-gallery-layout {
    grid-template-columns: 1fr;
  }

  .ss-gallery-rail {
    position: static;
  }

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

  .ss-trend-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .ss-trend-card span {
    display: none;
  }

  .ss-trend-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .ss-prompt-sheet,
  .ss-dashboard-grid,
  .ss-profile-grid,
  .ss-image-tool,
  .ss-chat-layout {
    grid-template-columns: 1fr;
  }

  .ss-prompt-visual img {
    max-height: 520px;
  }
}

@media (max-width: 760px) {
  .ss-nav,
  .ss-inspiration-shell,
  .ss-dashboard {
    width: calc(100% - 24px);
    max-width: 366px;
    margin-left: 12px;
    margin-right: auto;
  }

  .ss-tool-shell,
  .ss-chat-shell,
  .ss-page-shell {
    width: calc(100% - 24px);
    max-width: 366px;
    margin-left: 12px;
    margin-right: auto;
    padding-top: 24px;
  }

  .ss-tool-hero,
  .ss-chat-hero {
    display: block;
    min-height: 260px;
    padding: 24px;
  }

  .ss-tool-badge,
  .ss-chat-hero__badge {
    margin-top: 18px;
    white-space: normal;
  }

  .ss-tool-options {
    grid-template-columns: 1fr;
  }

  .ss-upload-zone {
    min-height: 300px;
  }

  .ss-chat-panel {
    min-height: 560px;
  }

  .ss-chat-panel__head,
  .ss-chat-compose {
    grid-template-columns: 1fr;
  }

  .ss-chat-panel__head {
    display: grid;
  }

  .ss-chat-log {
    max-height: 52vh;
    padding: 18px;
  }

  .ss-chat-message {
    max-width: 92%;
  }

  .ss-page-head,
  .ss-page-content {
    padding: 24px;
  }

  .ss-nav__links {
    order: 2;
    width: 100%;
    overflow-x: auto;
    gap: 18px;
    padding-bottom: 2px;
  }

  .ss-brand__logo {
    height: 36px;
  }

  .ss-auth {
    margin-left: auto;
  }

  .ss-inspiration-shell {
    padding-top: 14px;
  }

  .ss-discovery-hero {
    gap: 12px;
  }

  .ss-discovery-hero__copy,
  .ss-studio-panel,
  .ss-gallery-rail__panel {
    border-radius: 18px;
  }

  .ss-discovery-hero__copy {
    min-height: auto;
    padding: 24px;
  }

  .ss-discovery-hero__copy h2 {
    font-size: 31px;
    line-height: 1.02;
  }

  .ss-discovery-hero__copy p {
    margin: 14px 0 18px;
    font-size: 14px;
  }

  .ss-discovery-search {
    min-height: 0;
    grid-template-columns: 20px minmax(0, 1fr);
    padding: 13px 14px;
    border-radius: 18px;
  }

  .ss-discovery-search button {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
  }

  .ss-chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .ss-chip-row a {
    flex: 0 0 auto;
  }

  .ss-studio-panel {
    min-height: auto;
    padding: 20px;
  }

  .ss-studio-panel__top {
    display: block;
  }

  .ss-studio-panel__top small {
    display: block;
    margin-top: 6px;
  }

  .ss-studio-stats li {
    display: block;
  }

  .ss-studio-stats span {
    display: block;
    margin-top: 2px;
  }

  .ss-gallery-rail {
    display: none;
  }

  .ss-publish-btn {
    display: none;
  }

  .ss-masonry {
    columns: 1 100%;
    column-gap: 10px;
  }

  .ss-masonry-card {
    margin-bottom: 10px;
    border-radius: 9px;
  }

  .ss-masonry-card__shade {
    align-items: flex-start;
    padding: 44px 10px 10px;
  }

  .ss-card-action {
    display: none;
  }

  .ss-prompt-modal {
    padding: 10px 10px 44px;
  }

  .ss-prompt-sheet {
    width: 100%;
    min-height: 0;
    padding: 14px;
    gap: 18px;
  }

  .ss-prompt-visual img {
    max-height: 360px;
  }

  .ss-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ss-dashboard-head {
    display: block;
    padding: 22px;
  }

  .ss-dashboard-head .ss-outline {
    margin-top: 18px;
  }

  .ss-profile-card {
    grid-template-columns: 1fr;
  }

  .ss-profile-card__avatar {
    width: 96px;
    height: 96px;
    border-radius: 24px;
  }

  .ss-dashboard-head h1,
  .ss-dashboard-gate h1 {
    font-size: 28px;
  }
}

/* Integrated chatroom shell */
.ss-chat-shell {
  width: min(1180px, calc(100% - 48px));
  padding: 32px 0 82px;
}

.ss-chat-hero {
  min-height: 168px;
  margin: 0;
  padding: 28px 30px;
  border: 1px solid #46434c;
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: none;
}

.ss-chat-hero h1 {
  font-size: clamp(34px, 4.6vw, 54px);
}

.ss-chat-layout {
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 680px;
  border: 1px solid #46434c;
  border-radius: 0 0 22px 22px;
  overflow: hidden;
  background: #302e34;
  box-shadow: var(--ss-shadow);
}

.ss-chat-shell.is-connected .ss-chat-layout {
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
}

.ss-chat-gate[hidden],
.ss-chat-panel[hidden],
.ss-chat-members[hidden] {
  display: none !important;
}

/* Final popout guard: keep /chat-popout/ as a compact standalone browser window. */
html:has(body.signshi-view-chat-popout) {
  width: 100vw !important;
  min-width: 100vw !important;
  overflow: hidden !important;
  background: #28262b !important;
}

body.signshi-view-chat-popout {
  width: 100vw !important;
  min-width: 100vw !important;
  overflow: hidden !important;
  background: #28262b !important;
}

.signshi-view-chat-popout .ss-header,
.signshi-view-chat-popout .ss-floating,
.signshi-view-chat-popout .ss-chat-global-mini,
.signshi-view-chat-popout .ss-auth-modal {
  display: none !important;
}

.signshi-view-chat-popout .site {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  display: flex !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #28262b !important;
}

.signshi-view-chat-popout .ss-chat-popout-shell {
  width: min(100vw, 390px) !important;
  max-width: 390px !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f8f8f2 !important;
  background: #28262b !important;
}

.signshi-view-chat-popout .ss-chat-popout-card {
  width: 100% !important;
  max-width: 390px !important;
  height: 100vh !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid #46434c !important;
  background: #302e34 !important;
}

.signshi-view-chat-popout .ss-chat-popout-head {
  min-height: 78px !important;
  padding: 12px 14px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  border-bottom: 1px solid #46434c !important;
  background: #252329 !important;
}

.signshi-view-chat-popout .ss-chat-popout-head .ss-brand__mark {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  flex-basis: 38px !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-head h1 {
  margin: 0 0 3px !important;
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1.05 !important;
}

.signshi-view-chat-popout .ss-chat-popout-head p {
  margin: 0 !important;
  color: #aaa6b0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.signshi-view-chat-popout .ss-chat-popout-gate {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 18px !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #302e34 !important;
  box-shadow: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #302e34 !important;
  box-shadow: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel[hidden] {
  display: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head {
  min-height: 0 !important;
  padding: 12px 14px !important;
  gap: 10px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head h2 {
  font-size: 19px !important;
  line-height: 1.05 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head p {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__actions {
  gap: 6px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-outline {
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-log {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 14px !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  overflow-y: auto !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message,
.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message.is-own {
  max-width: 100% !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose {
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: end !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-toolbar,
.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-stickers {
  grid-column: 1 / -1 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose textarea {
  min-height: 58px !important;
  padding: 10px !important;
  resize: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose > .ss-primary {
  min-width: 76px !important;
  min-height: 58px !important;
  justify-content: center !important;
}

@media (max-width: 460px) {
  .signshi-view-chat-popout .ss-chat-popout-head {
    min-height: 72px !important;
    padding: 10px 12px !important;
  }

  .signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__actions {
    justify-content: stretch !important;
  }

  .signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__actions > * {
    flex: 1 !important;
    justify-content: center !important;
  }
}

/* Final popout-only chrome trim. Keep the mini chat focused on messages. */
.signshi-view-chat-popout .ss-chat-popout-head {
  min-height: 36px !important;
  padding: 4px 8px !important;
  display: flex !important;
  justify-content: flex-end !important;
  border-bottom: 0 !important;
  background: #302e34 !important;
}

.signshi-view-chat-popout .ss-chat-popout-head .ss-brand__mark,
.signshi-view-chat-popout .ss-chat-popout-head > div {
  display: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-head .ss-icon-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head {
  display: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-log {
  border-top: 0 !important;
  padding-top: 10px !important;
}

/* Keep the standalone popout focused on messages. */
.signshi-view-chat-popout .ss-chat-popout-head {
  min-height: 36px !important;
  padding: 4px 8px !important;
  display: flex !important;
  justify-content: flex-end !important;
  border-bottom: 0 !important;
  background: #302e34 !important;
}

.signshi-view-chat-popout .ss-chat-popout-head .ss-brand__mark,
.signshi-view-chat-popout .ss-chat-popout-head > div {
  display: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-head .ss-icon-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head {
  display: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-log {
  border-top: 0 !important;
  padding-top: 10px !important;
}

/* Standalone popout window used when users browse away from MarsBaseX. */
body.signshi-view-chat-popout {
  overflow: hidden;
  background: #28262b;
}

.signshi-view-chat-popout .ss-header,
.signshi-view-chat-popout .ss-floating,
.signshi-view-chat-popout .ss-chat-global-mini,
.signshi-view-chat-popout .ss-auth-modal {
  display: none !important;
}

.signshi-view-chat-popout .site {
  min-height: 100vh;
  overflow: hidden;
  background: #28262b;
}

.ss-chat-popout-shell {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0 !important;
  color: #f8f8f2;
  background: #28262b;
}

.ss-chat-popout-card {
  width: 100%;
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #46434c;
  background: #302e34;
}

.ss-chat-popout-head {
  min-height: 78px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #46434c;
  background: #252329;
}

.ss-chat-popout-head .ss-brand__mark {
  width: 38px;
  height: 38px;
  min-width: 38px;
  flex-basis: 38px;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

.ss-chat-popout-head h1 {
  margin: 0 0 3px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.05;
}

.ss-chat-popout-head p {
  margin: 0;
  color: #aaa6b0;
  font-size: 11px;
  line-height: 1.35;
}

.ss-chat-popout-gate {
  flex: 1;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 18px !important;
  justify-content: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: #302e34 !important;
  box-shadow: none !important;
}

.ss-chat-popout-panel {
  flex: 1;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column;
  border: 0 !important;
  border-radius: 0 !important;
  background: #302e34 !important;
  box-shadow: none !important;
}

.ss-chat-popout-panel[hidden] {
  display: none !important;
}

.ss-chat-popout-panel .ss-chat-panel__head {
  min-height: 0;
  padding: 12px 14px;
  gap: 10px;
}

.ss-chat-popout-panel .ss-chat-panel__head h2 {
  font-size: 19px;
  line-height: 1.05;
}

.ss-chat-popout-panel .ss-chat-panel__head p {
  font-size: 11px;
  line-height: 1.35;
}

.ss-chat-popout-panel .ss-chat-panel__actions {
  gap: 6px;
}

.ss-chat-popout-panel .ss-outline {
  min-height: 34px;
  padding: 0 10px;
  font-size: 11px;
}

.ss-chat-popout-panel .ss-chat-log {
  flex: 1;
  min-height: 0;
  padding: 14px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  overflow-y: auto;
}

.ss-chat-popout-panel .ss-chat-message,
.ss-chat-popout-panel .ss-chat-message.is-own {
  max-width: 100%;
}

.ss-chat-popout-panel .ss-chat-compose {
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.ss-chat-popout-panel .ss-chat-toolbar,
.ss-chat-popout-panel .ss-chat-stickers {
  grid-column: 1 / -1;
}

.ss-chat-popout-panel .ss-chat-compose textarea {
  min-height: 58px;
  padding: 10px;
  resize: none;
}

.ss-chat-popout-panel .ss-chat-compose > .ss-primary {
  min-width: 76px;
  min-height: 58px;
  justify-content: center;
}

@media (max-width: 460px) {
  .ss-chat-popout-head {
    min-height: 72px;
    padding: 10px 12px;
  }

  .ss-chat-popout-panel .ss-chat-panel__head {
    flex-direction: column;
    align-items: stretch;
  }

  .ss-chat-popout-panel .ss-chat-panel__actions {
    justify-content: stretch;
  }

  .ss-chat-popout-panel .ss-chat-panel__actions > * {
    flex: 1;
    justify-content: center;
  }
}

.ss-chat-members {
  position: relative;
  top: auto;
  min-height: 680px;
  padding: 18px;
  border: 0;
  border-right: 1px solid #46434c;
  border-radius: 0;
  background: #2d2b30;
  box-shadow: none;
}

.ss-chat-gate,
.ss-chat-panel {
  min-height: 680px;
  border: 0;
  border-radius: 0;
  background: #302e34;
  box-shadow: none;
}

.ss-chat-gate {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  justify-self: stretch;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 58px);
}

.ss-chat-gate > * {
  width: min(520px, 100%);
}

.ss-chat-gate > .ss-brand__mark {
  width: 48px;
  height: 48px;
  min-width: 48px;
  flex: 0 0 48px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.ss-chat-gate > .ss-brand__mark .ss-brand__icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.ss-chat-panel {
  display: flex;
  overflow: hidden;
}

.ss-chat-panel__head {
  min-height: 124px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #46434c;
}

.ss-chat-log {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.ss-chat-compose {
  border-top: 1px solid #46434c;
  border-radius: 0;
}

.ss-chat-shell.is-minimized .ss-chat-hero,
.ss-chat-shell.is-minimized .ss-chat-layout {
  display: none;
}

@media (max-width: 880px) {
  .ss-chat-shell {
    width: min(100% - 24px, 720px);
    padding-top: 18px;
  }

  .ss-chat-hero {
    min-height: 150px;
    padding: 22px;
  }

  .ss-chat-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ss-chat-members {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid #46434c;
  }

  .ss-chat-gate,
  .ss-chat-panel {
    min-height: 620px;
  }
}

/* Chatroom advanced tools and membership page */
.ss-chat-layout {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

.ss-chat-gate {
  grid-column: 1 / -1;
  width: min(520px, 100%);
  justify-self: start;
}

.ss-chat-members {
  position: sticky;
  top: 86px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid #46434c;
  border-radius: 18px;
  background: #302e34;
  box-shadow: var(--ss-shadow);
}

.ss-chat-members[hidden] {
  display: none;
}

.ss-chat-members__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ss-chat-members__head span,
.ss-chat-members p {
  color: var(--ss-muted);
  font-size: 12px;
}

.ss-chat-members__head strong {
  color: #ffffff;
  font-size: 13px;
}

.ss-chat-members__head em {
  font-style: normal;
  color: var(--ss-green);
}

.ss-chat-member-list {
  display: grid;
  gap: 8px;
}

.ss-chat-member-list button {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid #46434c;
  border-radius: 12px;
  color: #f8f8f2;
  background: #343237;
  cursor: pointer;
  text-align: left;
}

.ss-chat-member-list button:hover,
.ss-chat-member-list button.is-current {
  border-color: var(--ss-green);
  background: rgba(47, 114, 255, 0.16);
}

.ss-chat-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, #2f72ff, #8f86ff);
  background-position: center;
  background-size: cover;
  font-weight: 900;
}

.ss-chat-avatar.has-image {
  color: transparent;
}

.ss-chat-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.ss-chat-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #343237;
}

.ss-chat-message.is-own {
  flex-direction: row-reverse;
  color: #ffffff;
  background: #2f72ff;
}

.ss-chat-message.is-own .ss-chat-message__meta span {
  color: rgba(255, 255, 255, 0.78);
}

.ss-chat-message__body {
  min-width: 0;
  flex: 1;
}

.ss-chat-mention {
  color: #9ec0ff;
  font-weight: 900;
}

.ss-chat-message.is-own .ss-chat-mention {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.ss-chat-image {
  display: block;
  max-width: 280px;
  margin: 8px 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.ss-chat-image img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}

.ss-chat-sticker-message {
  font-size: 42px;
  line-height: 1.1;
}

.ss-chat-sticker-message--image {
  display: inline-flex;
  max-width: min(220px, 100%);
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.ss-chat-sticker-message--image img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
}

.ss-chat-compose {
  grid-template-columns: minmax(0, 1fr) auto;
}

.ss-chat-toolbar,
.ss-chat-stickers {
  grid-column: 1 / -1;
}

.ss-chat-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

.ss-chat-toolbar span {
  min-width: 0;
  overflow: hidden;
  color: var(--ss-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-chat-panel__head [data-chat-online-summary] {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border: 1px solid rgba(47, 114, 255, 0.42);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(47, 114, 255, 0.18);
  font-size: 12px;
  font-weight: 900;
}

.ss-chat-upload input {
  display: none;
}

.ss-chat-stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid #46434c;
  border-radius: 12px;
  background: #28262b;
}

.ss-chat-stickers[hidden] {
  display: none;
}

.ss-chat-stickers button {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #46434c;
  border-radius: 10px;
  background: #343237;
  cursor: pointer;
  font-size: 22px;
}

.ss-chat-stickers button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.ss-chat-stickers button:hover {
  border-color: var(--ss-green);
  background: rgba(47, 114, 255, 0.16);
}

.ss-chat-mini {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 95;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #ffffff;
  background: #2f72ff;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.34);
  cursor: pointer;
  font-weight: 900;
}

.ss-chat-mini[hidden] {
  display: none;
}

.ss-chat-mini span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ss-chat-mini em {
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #2f72ff;
  background: #ffffff;
  font-style: normal;
  font-size: 12px;
}

.ss-chat-global-mini {
  right: 24px;
  bottom: 92px;
  min-width: 218px;
  justify-content: space-between;
  text-align: left;
}

.ss-chat-global-mini .ss-chat-mini__main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 9px;
  align-items: center;
}

.ss-chat-global-mini .ss-chat-mini__main svg {
  grid-row: 1 / 3;
  width: 19px;
  height: 19px;
}

.ss-chat-global-mini strong,
.ss-chat-global-mini small {
  display: block;
  line-height: 1.1;
}

.ss-chat-global-mini small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 800;
}

.ss-chat-shell.is-minimized .ss-chat-hero,
.ss-chat-shell.is-minimized .ss-chat-layout {
  display: none;
}

.ss-chat-shell.has-new-message .ss-chat-mini {
  animation: ss-chat-flash 1s infinite;
}

.ss-chat-mini.has-new-message {
  animation: ss-chat-flash 1s infinite;
}

@keyframes ss-chat-flash {
  0%, 100% {
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.34);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(47, 114, 255, 0.24), 0 20px 42px rgba(0, 0, 0, 0.34);
  }
}

.ss-membership-shell {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  padding: 52px 0 96px;
}

.ss-membership-hero {
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  align-items: center;
  gap: 28px;
  padding: 44px;
  border: 1px solid #46434c;
  border-top: 4px solid var(--ss-green);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 18%, rgba(47, 114, 255, 0.28), transparent 34%),
    linear-gradient(135deg, #302e34, #28262b);
  box-shadow: var(--ss-shadow);
}

.ss-membership-hero span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ss-green);
  font-size: 13px;
  font-weight: 900;
}

.ss-membership-hero h1 {
  max-width: 720px;
  margin: 14px 0 18px;
  color: #ffffff;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 0.95;
}

.ss-membership-hero p {
  max-width: 680px;
  margin: 0 0 26px;
  color: var(--ss-muted);
  font-size: 17px;
  line-height: 1.8;
}

.ss-membership-card {
  padding: 24px;
  border: 1px solid #46434c;
  border-radius: 18px;
  background: rgba(52, 50, 55, 0.88);
}

.ss-membership-card strong {
  color: #ffffff;
  font-size: 20px;
}

.ss-membership-card ul {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

.ss-membership-card li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #d5d1dc;
  line-height: 1.55;
}

.ss-membership-card svg {
  width: 20px;
  height: 20px;
  color: var(--ss-green);
  flex: 0 0 auto;
}

.ss-membership-card small {
  color: var(--ss-muted);
  line-height: 1.6;
}

@media (max-width: 880px) {
  .ss-chat-layout,
  .ss-membership-hero {
    grid-template-columns: 1fr;
  }

  .ss-chat-members {
    position: static;
  }

  .ss-chat-message,
  .ss-chat-message.is-own {
    max-width: 100%;
  }
}

/* FlowGPT-inspired product skin */
:root {
  --ss-bg: #f7f8f4;
  --ss-surface: #ffffff;
  --ss-text: #151713;
  --ss-muted: #697067;
  --ss-soft: #f0f3ed;
  --ss-border: #e2e7dd;
  --ss-blue: #2f72ff;
  --ss-violet: #121512;
  --ss-green: #2f72ff;
  --ss-red: #ef4444;
  --ss-shadow: 0 14px 34px rgba(16, 20, 14, 0.08);
}

body.signshi-body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 248, 244, 0.98) 42%, #f2f5ef 100%),
    linear-gradient(90deg, rgba(47, 114, 255, 0.06), transparent 34%, rgba(18, 21, 18, 0.03));
}

.ss-header {
  border-bottom: 1px solid rgba(226, 231, 221, 0.94);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(1.08);
  box-shadow: 0 8px 24px rgba(16, 20, 14, 0.04);
}

.ss-nav {
  gap: 18px;
}

.ss-brand {
  color: var(--ss-green);
}

.ss-brand__mark,
.ss-user-menu {
  border: 1px solid var(--ss-border);
  box-shadow: var(--ss-shadow);
}

.ss-brand__name {
  background: linear-gradient(90deg, #151713, #2f72ff);
  -webkit-background-clip: text;
  background-clip: text;
}

.ss-nav__links {
  gap: 7px;
  color: #42483f;
}

.ss-nav__links a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.ss-nav__links a svg {
  width: 15px;
  height: 15px;
  color: #7b8478;
  flex: 0 0 auto;
}

.ss-nav__links a:hover {
  color: #10130f;
  border-color: #dce8d7;
  background: #eef7ed;
}

.ss-nav__links a:hover svg {
  color: var(--ss-green);
}

.ss-search {
  background: #f1f3ee;
  color: #687166;
}

.ss-search:focus-within,
.ss-tool-options select:focus,
.ss-output-label textarea:focus,
.ss-chat-gate input:focus,
.ss-chat-compose textarea:focus {
  border-color: #8db4ff;
  box-shadow: 0 0 0 3px rgba(47, 114, 255, 0.16);
}

.ss-search__scope {
  border-right-color: #dbe2d6;
}

.ss-search__submit:hover,
.ss-user-menu a:hover,
.ss-user-menu button:hover,
.ss-round-btn:hover {
  color: #1f5edb;
  background: #edf3ff;
}

.ss-login-btn,
.ss-primary {
  color: #fff;
  background: #151713;
  box-shadow: 0 12px 24px rgba(16, 20, 14, 0.14);
}

.ss-login-btn:hover,
.ss-primary:hover {
  background: #0d100c;
}

.ss-publish-btn,
.ss-outline {
  color: #151713;
  border: 1px solid var(--ss-border);
  background: #f0f4ee;
}

.ss-publish-btn:hover,
.ss-outline:hover {
  border-color: #bfe7c7;
  background: #eaf7eb;
}

.ss-user:hover {
  background: #f1f3ee;
}

.ss-user-avatar,
.ss-author-avatar,
.ss-profile-card__avatar {
  background: linear-gradient(135deg, #151713, #2f72ff);
}

.ss-discovery-hero {
  align-items: stretch;
}

.ss-discovery-hero__copy,
.ss-studio-panel,
.ss-gallery-rail__panel,
.ss-profile-card,
.ss-level-card,
.ss-usage-card,
.ss-upload-panel,
.ss-generate-panel,
.ss-chat-gate,
.ss-chat-panel,
.ss-dashboard-head,
.ss-dashboard-gate,
.ss-publish-panel,
.ss-my-posts,
.ss-empty,
.ss-page-card {
  border: 1px solid var(--ss-border);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--ss-shadow);
}

.ss-discovery-hero__copy,
.ss-studio-panel {
  min-height: 372px;
  height: 100%;
}

.ss-discovery-hero__copy {
  justify-content: space-between;
  border-radius: 20px;
  border-top: 4px solid var(--ss-green);
}

.ss-discovery-hero__copy h2 {
  color: #151713;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1.02;
}

.ss-discovery-hero__copy p,
.ss-studio-panel p,
.ss-gallery-rail__panel p {
  color: var(--ss-muted);
}

.ss-discovery-search {
  border-color: var(--ss-border);
  background: #f7f9f5;
  box-shadow: none;
}

.ss-discovery-search svg,
.ss-gallery-rail__panel h2,
.ss-studio-panel__top span,
.ss-studio-panel h3,
.ss-studio-stats strong {
  color: #151713;
}

.ss-discovery-search button,
.ss-studio-actions a:first-child {
  color: #07120a;
  border-color: transparent;
  background: var(--ss-green);
  box-shadow: 0 12px 24px rgba(47, 114, 255, 0.18);
}

.ss-chip-row a {
  border-color: var(--ss-border);
  color: #535b50;
  background: #fff;
}

.ss-chip-row a:hover,
.ss-chip-row a.is-active {
  color: #061009;
  border-color: var(--ss-green);
  background: #e8f9eb;
}

.ss-studio-panel {
  border-radius: 20px;
}

.ss-studio-panel__top small {
  color: #778073;
}

.ss-studio-actions a {
  border-color: var(--ss-border);
  color: #151713;
  background: #f6f8f3;
}

.ss-studio-actions a:hover,
.ss-trend-card:hover,
.ss-masonry-card:hover,
.ss-related-card:hover {
  border-color: #bfe7c7;
  box-shadow: 0 16px 34px rgba(0, 120, 50, 0.1);
}

.ss-feature-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 22px;
}

.ss-feature-shortcuts a {
  min-height: 112px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon copy";
  align-items: center;
  column-gap: 13px;
  padding: 18px;
  border: 1px solid var(--ss-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(16, 20, 14, 0.05);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.ss-feature-shortcuts a:hover {
  border-color: #bfe7c7;
  box-shadow: 0 18px 34px rgba(0, 120, 50, 0.1);
  transform: translateY(-2px);
}

.ss-feature-shortcuts__icon {
  grid-area: icon;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #07120a;
  background: #e8f9eb;
}

.ss-feature-shortcuts__icon svg {
  width: 22px;
  height: 22px;
}

.ss-feature-shortcuts strong {
  grid-area: title;
  min-width: 0;
  color: #151713;
  font-size: 15px;
  line-height: 1.25;
}

.ss-feature-shortcuts em {
  grid-area: copy;
  min-width: 0;
  color: var(--ss-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.ss-gallery-layout {
  align-items: stretch;
}

.ss-gallery-rail__panel {
  border-radius: 18px;
}

.ss-trend-list {
  grid-auto-rows: 74px;
}

.ss-trend-card {
  min-height: 74px;
  height: 100%;
  border-color: var(--ss-border);
  background: #fff;
}

.ss-search-result {
  border-color: var(--ss-border);
  background: #fff;
}

.ss-search-result a {
  color: #1f5edb;
}

.ss-masonry {
  columns: initial;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.ss-masonry-card {
  height: 344px;
  display: block;
  margin: 0;
  border-color: var(--ss-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(16, 20, 14, 0.06);
}

.ss-masonry-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ss-masonry-card:hover {
  transform: translateY(-2px);
}

.ss-card-action {
  color: #07120a;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(232, 249, 235, 0.9);
}

.ss-prompt-tag {
  color: #07120a;
  background: #e8f9eb;
}

.ss-tool-hero,
.ss-chat-hero {
  min-height: 220px;
  color: var(--ss-text);
  border: 1px solid var(--ss-border);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 245, 0.92)),
    var(--ss-tool-hero-image, var(--ss-chat-hero-image, none)) center/cover;
  box-shadow: var(--ss-shadow);
}

.ss-chat-hero {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 245, 0.92)),
    var(--ss-chat-hero-image, none) center/cover;
}

.ss-tool-hero span,
.ss-chat-hero span,
.ss-chat-panel__head span,
.ss-dashboard-head span,
.ss-admin-fields > span,
.ss-user-limit-note {
  color: #1f5edb;
}

.ss-tool-hero p,
.ss-chat-hero p {
  color: var(--ss-muted);
}

.ss-tool-badge,
.ss-chat-hero__badge {
  color: #163d91;
  border-color: #d7e5ff;
  background: #edf3ff;
  backdrop-filter: none;
}

.ss-image-tool,
.ss-chat-layout,
.ss-dashboard-grid,
.ss-profile-grid {
  align-items: stretch;
}

.ss-upload-panel,
.ss-generate-panel {
  min-height: 640px;
  display: flex;
  flex-direction: column;
}

.ss-upload-zone {
  flex: 1;
  min-height: 100%;
  border-color: #bfe7c7;
  color: #515950;
  background: #f8faf5;
}

.ss-upload-zone span {
  color: #07120a;
  background: #e8f9eb;
}

.ss-preview-card img {
  border: 1px solid var(--ss-border);
}

.ss-generate-panel {
  background: #fff;
}

.ss-tool-options select,
.ss-output-label textarea,
.ss-chat-gate input,
.ss-chat-compose textarea {
  border-color: var(--ss-border);
  background: #fcfdfb;
}

.ss-output-label {
  flex: 1;
}

.ss-output-label textarea {
  min-height: 260px;
  flex: 1;
}

.ss-usage-card,
.ss-user-limit-note {
  border-color: #d7e5ff;
  background: #f1f6ff;
}

.ss-chat-layout {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
}

.ss-chat-gate,
.ss-chat-panel {
  min-height: 620px;
  background: #fff;
}

.ss-chat-gate {
  justify-content: center;
}

.ss-chat-log {
  background: #f7f9f5;
}

.ss-chat-empty svg {
  color: var(--ss-green);
}

.ss-chat-message {
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 20, 14, 0.04);
}

.ss-chat-message.is-own {
  border-color: #151713;
  color: #fff;
  background: #151713;
}

.ss-chat-compose {
  background: #fff;
}

.ss-dashboard-head {
  border-top: 4px solid var(--ss-green);
  background: #fff;
}

.ss-dashboard-grid {
  box-shadow: none;
}

.ss-publish-panel,
.ss-my-posts {
  min-height: 560px;
}

.ss-level-meter {
  background: #e5ebe1;
}

.ss-level-meter span {
  background: var(--ss-green);
}

.ss-prompt-sheet,
.ss-auth-card {
  border: 1px solid var(--ss-border);
  background: #fff;
  box-shadow: 0 28px 80px rgba(16, 20, 14, 0.18);
}

.ss-prompt-box {
  border-color: var(--ss-border);
  background: #f8faf5;
}

.ss-copy-row button {
  color: #1f5edb;
  border-color: #d7e5ff;
  background: #edf3ff;
}

.ss-related {
  border-top-color: var(--ss-border);
}

.ss-auth-tabs {
  background: #f0f3ed;
}

.ss-auth-tabs button {
  color: #687166;
}

.ss-auth-tabs button.active {
  color: #151713;
  box-shadow: 0 6px 16px rgba(16, 20, 14, 0.08);
}

.ss-auth-form label,
.ss-publish-panel label,
.ss-tool-options label,
.ss-output-label,
.ss-chat-gate label {
  color: #343b31;
}

.ss-auth-form input:not([type="checkbox"]),
.ss-publish-panel input,
.ss-publish-panel textarea {
  border-color: var(--ss-border);
  background: #fcfdfb;
}

.ss-auth-form input:focus,
.ss-publish-panel input:focus,
.ss-publish-panel textarea:focus {
  border-color: #8db4ff;
  box-shadow: 0 0 0 3px rgba(47, 114, 255, 0.16);
}

.ss-page-head {
  color: var(--ss-text);
  border-bottom: 1px solid var(--ss-border);
  background: #fff;
}

.ss-page-head span {
  color: #1f5edb;
  opacity: 1;
}

.ss-page-content {
  color: #343b31;
  background: #fff;
}

@media (max-width: 1180px) {
  .ss-feature-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ss-discovery-hero__copy,
  .ss-studio-panel {
    min-height: 330px;
  }
}

@media (max-width: 760px) {
  .ss-nav__links {
    gap: 8px;
  }

  .ss-nav__links a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 10px;
  }

  .ss-feature-shortcuts {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ss-feature-shortcuts a {
    min-height: 86px;
    padding: 14px;
  }

  .ss-discovery-hero__copy,
  .ss-studio-panel,
  .ss-upload-panel,
  .ss-generate-panel,
  .ss-chat-gate,
  .ss-chat-panel,
  .ss-publish-panel,
  .ss-my-posts {
    min-height: auto;
  }

  .ss-masonry {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ss-masonry-card {
    height: 330px;
    border-radius: 14px;
  }
}

/* FlowGPT dark reference skin */
:root {
  --ss-bg: #2b292e;
  --ss-surface: #343237;
  --ss-text: #f8f8f2;
  --ss-muted: #aaa6b0;
  --ss-soft: #3a383e;
  --ss-border: #46434c;
  --ss-blue: #2f72ff;
  --ss-violet: #8f86ff;
  --ss-green: #2f72ff;
  --ss-red: #ff6b6b;
  --ss-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

body.signshi-body {
  background: #2b292e;
  color: var(--ss-text);
}

.ss-header {
  border-bottom: 1px solid #35323a;
  background: rgba(38, 36, 41, 0.94);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.2);
}

.ss-nav {
  min-height: 64px;
}

.ss-brand__logo {
  filter: brightness(1.15) contrast(1.02);
}

.ss-brand__mark {
  border-color: #4b4852;
  background: #252329;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.ss-brand__name {
  background: linear-gradient(90deg, #ffffff, #2f72ff);
  -webkit-background-clip: text;
  background-clip: text;
}

.ss-nav__links {
  color: #c8c4ce;
}

.ss-nav__links a {
  color: #c8c4ce;
  border-color: transparent;
}

.ss-nav__links a svg {
  color: #a7a2ad;
}

.ss-nav__links a:hover {
  color: #ffffff;
  border-color: #46434c;
  background: #343237;
}

.ss-nav__links a:hover svg {
  color: var(--ss-green);
}

.ss-search {
  background: #3a383d;
  color: #aaa6b0;
}

.ss-search:focus-within {
  background: #403d45;
  box-shadow: 0 0 0 3px rgba(47, 114, 255, 0.18);
}

.ss-search__scope {
  border-right-color: #504c55;
}

.ss-search input {
  color: #f8f8f2;
}

.ss-search input::placeholder {
  color: #9b96a1;
}

.ss-search__submit {
  color: #b8b3be;
}

.ss-search__submit:hover,
.ss-user-menu a:hover,
.ss-user-menu button:hover,
.ss-round-btn:hover {
  color: #ffffff;
  background: var(--ss-green);
}

.ss-login-btn,
.ss-primary,
.ss-publish-btn {
  color: #ffffff;
  background: var(--ss-green);
  box-shadow: 0 14px 28px rgba(47, 114, 255, 0.2);
}

.ss-login-btn:hover,
.ss-primary:hover,
.ss-publish-btn:hover {
  color: #ffffff;
  background: #4f8cff;
}

.ss-outline {
  color: #f8f8f2;
  border: 1px solid #514d57;
  background: #3a383e;
}

.ss-outline:hover {
  color: #ffffff;
  border-color: var(--ss-green);
  background: var(--ss-green);
}

.ss-user {
  color: #f8f8f2;
}

.ss-user:hover {
  background: #343237;
}

.ss-user svg {
  color: #aaa6b0;
}

.ss-user-avatar,
.ss-author-avatar,
.ss-profile-card__avatar {
  color: #151713;
  background: linear-gradient(135deg, #2f72ff, #8f86ff);
}

.ss-user-menu {
  border-color: #46434c;
  background: #302e34;
}

.ss-user-menu a,
.ss-user-menu button {
  color: #d5d1dc;
}

.ss-discovery-hero__copy,
.ss-studio-panel,
.ss-gallery-rail__panel,
.ss-profile-card,
.ss-level-card,
.ss-usage-card,
.ss-upload-panel,
.ss-generate-panel,
.ss-chat-gate,
.ss-chat-panel,
.ss-dashboard-head,
.ss-dashboard-gate,
.ss-publish-panel,
.ss-my-posts,
.ss-empty,
.ss-page-card,
.ss-prompt-sheet,
.ss-auth-card {
  border-color: #46434c;
  background: #302e34;
  box-shadow: var(--ss-shadow);
}

.ss-discovery-hero__copy,
.ss-studio-panel {
  min-height: 380px;
}

.ss-discovery-hero__copy {
  border-top-color: var(--ss-green);
  background:
    linear-gradient(180deg, rgba(48, 46, 52, 0.94), rgba(48, 46, 52, 0.98)),
    var(--ss-gallery-hero-image, none) center/cover;
}

.ss-discovery-hero__copy h2,
.ss-studio-panel__top span,
.ss-studio-panel h3,
.ss-gallery-rail__panel h2,
.ss-trend-card strong,
.ss-feature-shortcuts strong,
.ss-upload-zone strong,
.ss-chat-gate h2,
.ss-chat-panel__head h2,
.ss-dashboard-head h1,
.ss-dashboard-gate h1,
.ss-prompt-info h2,
.ss-chat-empty strong {
  color: #ffffff;
}

.ss-discovery-hero__copy p,
.ss-studio-panel p,
.ss-gallery-rail__panel p,
.ss-feature-shortcuts em,
.ss-upload-zone em,
.ss-tool-hero p,
.ss-chat-hero p,
.ss-dashboard-head p,
.ss-dashboard-gate p,
.ss-chat-gate p,
.ss-chat-panel__head p,
.ss-muted,
.ss-prompt-box p,
.ss-page-content {
  color: var(--ss-muted);
}

.ss-discovery-search {
  border-color: #4b4852;
  background: #3a383d;
}

.ss-discovery-search input {
  color: #ffffff;
}

.ss-discovery-search svg {
  color: var(--ss-green);
}

.ss-discovery-search button,
.ss-studio-actions a:first-child {
  color: #151713;
  background: var(--ss-green);
  box-shadow: 0 12px 24px rgba(47, 114, 255, 0.18);
}

.ss-chip-row a {
  color: #c8c4ce;
  border-color: #46434c;
  background: #343237;
}

.ss-chip-row a:hover,
.ss-chip-row a.is-active {
  color: #151713;
  border-color: var(--ss-green);
  background: var(--ss-green);
}

.ss-studio-panel__top small {
  color: #aaa6b0;
}

.ss-studio-actions a {
  color: #f8f8f2;
  border-color: #4b4852;
  background: #38363c;
}

.ss-studio-stats li,
.ss-trend-card span,
.ss-prompt-visual figcaption,
.ss-copy-row,
.ss-chat-message__meta span,
.ss-chat-message__meta time {
  color: #aaa6b0;
}

.ss-studio-stats strong {
  color: #ffffff;
}

.ss-feature-shortcuts a,
.ss-trend-card,
.ss-search-result,
.ss-masonry-card,
.ss-related-card {
  border-color: #46434c;
  background: #343237;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
}

.ss-feature-shortcuts a:hover,
.ss-trend-card:hover,
.ss-masonry-card:hover,
.ss-related-card:hover {
  border-color: #68705d;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}

.ss-feature-shortcuts__icon,
.ss-upload-zone span {
  color: #151713;
  background: var(--ss-green);
}

.ss-gallery-rail {
  top: 84px;
}

.ss-trend-list {
  grid-auto-rows: 78px;
}

.ss-masonry {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.ss-masonry-card {
  height: 344px;
  overflow: hidden;
}

.ss-masonry-card__shade {
  background: linear-gradient(180deg, transparent 0%, rgba(41, 39, 44, 0.72) 38%, rgba(41, 39, 44, 0.96) 100%);
}

.ss-card-action {
  color: #151713;
  border-color: rgba(47, 114, 255, 0.48);
  background: var(--ss-green);
}

.ss-search-result {
  color: var(--ss-muted);
}

.ss-search-result strong {
  color: #ffffff;
}

.ss-search-result a {
  color: var(--ss-green);
}

.ss-prompt-modal__backdrop,
.ss-auth-modal__backdrop {
  background: rgba(18, 17, 20, 0.68);
}

.ss-prompt-sheet {
  background: #302e34;
}

.ss-round-btn {
  color: #d5d1dc;
  border-color: #4b4852;
  background: #3a383e;
}

.ss-prompt-visual img {
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
}

.ss-prompt-tag,
.ss-tool-hero span,
.ss-chat-hero span,
.ss-chat-panel__head span,
.ss-dashboard-head span,
.ss-admin-fields > span,
.ss-user-limit-note,
.ss-tool-status.is-success,
.ss-chat-status.is-success {
  color: var(--ss-green);
}

.ss-copy-row button {
  color: #151713;
  border-color: var(--ss-green);
  background: var(--ss-green);
}

.ss-prompt-box,
.ss-chat-log,
.ss-page-content {
  border-color: #46434c;
  background: #28262b;
}

.ss-related {
  border-top-color: #46434c;
}

.ss-tool-shell,
.ss-chat-shell,
.ss-dashboard,
.ss-page-shell {
  color: var(--ss-text);
}

.ss-tool-hero,
.ss-chat-hero,
.ss-dashboard-head,
.ss-page-head {
  color: #ffffff;
  border-color: #46434c;
  background:
    linear-gradient(90deg, rgba(48, 46, 52, 0.96), rgba(48, 46, 52, 0.9)),
    var(--ss-tool-hero-image, var(--ss-chat-hero-image, none)) center/cover;
  box-shadow: var(--ss-shadow);
}

.ss-chat-hero {
  background:
    linear-gradient(90deg, rgba(48, 46, 52, 0.96), rgba(48, 46, 52, 0.9)),
    var(--ss-chat-hero-image, none) center/cover;
}

.ss-tool-hero h1,
.ss-chat-hero h1,
.ss-page-head h1 {
  color: #ffffff;
}

.ss-tool-badge,
.ss-chat-hero__badge,
.ss-usage-card,
.ss-user-limit-note {
  color: var(--ss-green);
  border-color: #536756;
  background: #333d36;
}

.ss-image-tool,
.ss-chat-layout,
.ss-dashboard-grid,
.ss-profile-grid {
  align-items: stretch;
}

.ss-upload-panel,
.ss-generate-panel {
  min-height: 640px;
}

.ss-upload-zone {
  border-color: #5b6647;
  color: #d5d1dc;
  background: #28262b;
}

.ss-preview-card img {
  border-color: #46434c;
}

.ss-tool-options label,
.ss-output-label,
.ss-chat-gate label,
.ss-publish-panel label,
.ss-auth-form label {
  color: #dcd8e1;
}

.ss-tool-options select,
.ss-output-label textarea,
.ss-chat-gate input,
.ss-chat-compose textarea,
.ss-auth-form input:not([type="checkbox"]),
.ss-publish-panel input,
.ss-publish-panel textarea {
  color: #ffffff;
  border-color: #4b4852;
  background: #28262b;
}

.ss-tool-options select:focus,
.ss-output-label textarea:focus,
.ss-chat-gate input:focus,
.ss-chat-compose textarea:focus,
.ss-auth-form input:focus,
.ss-publish-panel input:focus,
.ss-publish-panel textarea:focus {
  border-color: var(--ss-green);
  box-shadow: 0 0 0 3px rgba(47, 114, 255, 0.18);
}

.ss-output-label textarea {
  min-height: 270px;
}

.ss-chat-gate,
.ss-chat-panel {
  min-height: 620px;
}

.ss-chat-gate {
  justify-content: center;
}

.ss-chat-panel__head,
.ss-chat-compose {
  border-color: #46434c;
  background: #302e34;
}

.ss-chat-message {
  color: #f8f8f2;
  border-color: #4b4852;
  background: #343237;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}

.ss-chat-message.is-own {
  color: #151713;
  border-color: var(--ss-green);
  background: var(--ss-green);
}

.ss-chat-message.is-own .ss-chat-message__meta span,
.ss-chat-message.is-own .ss-chat-message__meta time {
  color: rgba(21, 23, 19, 0.72);
}

.ss-dashboard-head {
  border-top-color: var(--ss-green);
}

.ss-publish-panel,
.ss-my-posts {
  min-height: 560px;
}

.ss-level-meter {
  background: #252329;
}

.ss-level-meter span {
  background: var(--ss-green);
}

.ss-auth-tabs {
  background: #28262b;
}

.ss-auth-tabs button {
  color: #aaa6b0;
}

.ss-auth-tabs button.active {
  color: #151713;
  background: var(--ss-green);
  box-shadow: none;
}

.ss-page-head {
  background: #302e34;
}

.ss-page-content h2,
.ss-page-content h3,
.ss-page-content h4 {
  color: #ffffff;
}

@media (max-width: 760px) {
  .ss-nav__links,
  .ss-chip-row {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .ss-nav__links::-webkit-scrollbar,
  .ss-chip-row::-webkit-scrollbar {
    display: none;
  }

  .ss-masonry-card {
    height: 330px;
  }

  .ss-upload-panel,
  .ss-generate-panel,
  .ss-chat-gate,
  .ss-chat-panel,
  .ss-publish-panel,
  .ss-my-posts {
    min-height: auto;
  }

  .ss-chat-global-mini {
    right: 12px;
    bottom: 78px;
    min-width: 0;
    max-width: calc(100vw - 24px);
  }
}

/* Final chatroom layout guard: keep the room as one cohesive module. */
.ss-chat-shell:not(.is-connected) .ss-chat-layout {
  display: flex !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.ss-chat-shell:not(.is-connected) .ss-chat-gate {
  flex: 1 1 100% !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  border: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

.ss-chat-shell.is-connected .ss-chat-layout {
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) !important;
}

.ss-chat-gate[hidden],
.ss-chat-panel[hidden],
.ss-chat-members[hidden] {
  display: none !important;
}

/* Final popout guard: keep /chat-popout/ as a compact standalone browser window. */
html:has(body.signshi-view-chat-popout) {
  width: 100vw !important;
  min-width: 100vw !important;
  overflow: hidden !important;
  background: #28262b !important;
}

body.signshi-view-chat-popout {
  width: 100vw !important;
  min-width: 100vw !important;
  overflow: hidden !important;
  background: #28262b !important;
}

.signshi-view-chat-popout .ss-header,
.signshi-view-chat-popout .ss-floating,
.signshi-view-chat-popout .ss-chat-global-mini,
.signshi-view-chat-popout .ss-auth-modal {
  display: none !important;
}

.signshi-view-chat-popout .site {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  display: flex !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  background: #28262b !important;
}

.signshi-view-chat-popout .ss-chat-popout-shell {
  width: min(100vw, 390px) !important;
  max-width: 390px !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f8f8f2 !important;
  background: #28262b !important;
}

.signshi-view-chat-popout .ss-chat-popout-card {
  width: 100% !important;
  max-width: 390px !important;
  height: 100vh !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid #46434c !important;
  background: #302e34 !important;
}

.signshi-view-chat-popout .ss-chat-popout-head {
  min-height: 78px !important;
  padding: 12px 14px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  border-bottom: 1px solid #46434c !important;
  background: #252329 !important;
}

.signshi-view-chat-popout .ss-chat-popout-head .ss-brand__mark {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  flex-basis: 38px !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-head h1 {
  margin: 0 0 3px !important;
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1.05 !important;
}

.signshi-view-chat-popout .ss-chat-popout-head p {
  margin: 0 !important;
  color: #aaa6b0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.signshi-view-chat-popout .ss-chat-popout-gate {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 18px !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #302e34 !important;
  box-shadow: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #302e34 !important;
  box-shadow: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel[hidden] {
  display: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head {
  min-height: 0 !important;
  padding: 12px 14px !important;
  gap: 10px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head h2 {
  font-size: 19px !important;
  line-height: 1.05 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head p {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__actions {
  gap: 6px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-outline {
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-log {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 14px !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  overflow-y: auto !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message,
.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message.is-own {
  max-width: 100% !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose {
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: end !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-toolbar,
.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-stickers {
  grid-column: 1 / -1 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose textarea {
  min-height: 58px !important;
  padding: 10px !important;
  resize: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose > .ss-primary {
  min-width: 76px !important;
  min-height: 58px !important;
  justify-content: center !important;
}

@media (max-width: 460px) {
  .signshi-view-chat-popout .ss-chat-popout-head {
    min-height: 72px !important;
    padding: 10px 12px !important;
  }

  .signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__actions {
    justify-content: stretch !important;
  }

  .signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__actions > * {
    flex: 1 !important;
    justify-content: center !important;
  }
}

/* Final popout-only chrome trim. Keep the mini chat focused on messages. */
.signshi-view-chat-popout .ss-chat-popout-head {
  min-height: 36px !important;
  padding: 4px 8px !important;
  display: flex !important;
  justify-content: flex-end !important;
  border-bottom: 0 !important;
  background: #302e34 !important;
}

.signshi-view-chat-popout .ss-chat-popout-head .ss-brand__mark,
.signshi-view-chat-popout .ss-chat-popout-head > div {
  display: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-head .ss-icon-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head {
  display: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-log {
  border-top: 0 !important;
  padding-top: 10px !important;
}

/* Reference-style popout layout: compact header, bubble stream, pill composer. */
body.signshi-view-chat-popout,
.signshi-view-chat-popout .site,
.signshi-view-chat-popout .ss-chat-popout-shell {
  background: #28262b !important;
}

.signshi-view-chat-popout .site {
  justify-content: center !important;
  align-items: center !important;
  padding: 12px !important;
}

.signshi-view-chat-popout .ss-chat-popout-shell {
  width: min(100vw - 24px, 390px) !important;
  max-width: 390px !important;
  min-height: min(680px, calc(100vh - 24px)) !important;
  height: min(680px, calc(100vh - 24px)) !important;
}

.signshi-view-chat-popout .ss-chat-popout-card {
  height: 100% !important;
  border-radius: 24px !important;
  border: 1px solid #46434c !important;
  background: #302e34 !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28) !important;
}

.signshi-view-chat-popout .ss-chat-popout-head {
  min-height: 58px !important;
  padding: 16px 18px 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  border-bottom: 0 !important;
  background: #302e34 !important;
}

.signshi-view-chat-popout .ss-chat-popout-head .ss-brand__mark,
.signshi-view-chat-popout .ss-chat-popout-head p {
  display: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-head > div {
  display: block !important;
  min-width: 0 !important;
}

.signshi-view-chat-popout .ss-chat-popout-head h1 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

.signshi-view-chat-popout .ss-chat-popout-head .ss-icon-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border: 0 !important;
  background: transparent !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head {
  display: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-log {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 16px 20px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border: 0 !important;
  background: #302e34 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-empty {
  margin: auto !important;
  max-width: 260px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message,
.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message.is-own {
  width: fit-content !important;
  max-width: 78% !important;
  gap: 8px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message {
  align-self: flex-start !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message.is-own {
  align-self: flex-end !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message__body {
  border-radius: 12px !important;
  padding: 12px 14px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message.is-own .ss-chat-message__body {
  background: #3478ff !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message:not(.is-own) .ss-chat-message__body {
  background: #3a3840 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  align-self: flex-end !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose {
  padding: 10px 18px 18px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 48px !important;
  gap: 8px !important;
  align-items: center !important;
  border-top: 0 !important;
  background: #302e34 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-toolbar {
  grid-column: 1 !important;
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-toolbar .ss-icon-btn,
.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-upload {
  width: 36px !important;
  height: 48px !important;
  min-width: 36px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #f8f8f2 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-toolbar .ss-icon-btn :is(i, svg),
.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-upload :is(i, svg) {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel [data-chat-image-name] {
  display: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-stickers {
  grid-column: 1 / -1 !important;
  order: -1 !important;
  margin: 0 0 4px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose textarea {
  grid-column: 2 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 13px 16px !important;
  border-radius: 999px !important;
  resize: none !important;
  overflow: hidden !important;
  line-height: 1.25 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose > .ss-primary {
  grid-column: 3 !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  justify-content: center !important;
  font-size: 0 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose > .ss-primary :is(i, svg) {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
}

/* Workspace-style full chatroom: cleaner channel layout while preserving dark MarsBaseX colors. */
body:not(.signshi-view-chat-popout) .ss-chat-shell {
  width: min(1180px, calc(100% - 44px)) !important;
  padding: 20px 0 60px !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-hero {
  min-height: 96px !important;
  margin-bottom: 0 !important;
  padding: 18px 30px !important;
  align-items: center !important;
  border: 1px solid #46434c !important;
  border-bottom: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  background:
    linear-gradient(90deg, rgba(48, 46, 52, 0.98), rgba(48, 46, 52, 0.9)),
    var(--ss-chat-hero-image, none) center/cover !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18) !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-hero h1 {
  margin: 6px 0 8px !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  line-height: 1.05 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-hero p {
  max-width: 650px !important;
  color: #c9c5cf !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-hero__badge {
  min-height: 42px !important;
  border-color: rgba(47, 114, 255, 0.5) !important;
  background: rgba(47, 114, 255, 0.12) !important;
  color: #8fb5ff !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-layout {
  display: grid !important;
  grid-template-columns: minmax(250px, 292px) minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  min-height: 600px !important;
  overflow: hidden !important;
  border: 1px solid #46434c !important;
  border-radius: 0 0 22px 22px !important;
  background: #302e34 !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18) !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-shell.is-connected .ss-chat-layout {
  grid-template-columns: minmax(250px, 292px) minmax(0, 1fr) !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-shell:not(.is-connected) .ss-chat-layout {
  display: flex !important;
  min-height: 520px !important;
  padding: 26px !important;
  align-items: center !important;
  justify-content: center !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-shell:not(.is-connected) .ss-chat-gate {
  width: min(540px, 100%) !important;
  min-width: 0 !important;
  max-width: 540px !important;
  border: 1px solid #46434c !important;
  border-radius: 18px !important;
  background: #302e34 !important;
  box-shadow: none !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-members {
  position: relative !important;
  top: auto !important;
  display: flex !important;
  min-height: 600px !important;
  padding: 18px 14px !important;
  gap: 16px !important;
  border: 0 !important;
  border-right: 1px solid #46434c !important;
  border-radius: 0 !important;
  background: #302e34 !important;
  box-shadow: none !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-workspace-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 6px 10px;
  border-bottom: 1px solid #46434c;
  color: #ffffff;
}

body:not(.signshi-view-chat-popout) .ss-chat-workspace-title .ss-brand__mark {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  flex: 0 0 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-workspace-title .ss-brand__icon {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-workspace-title strong {
  font-size: 15px;
  line-height: 1.2;
}

/* Inspiration media ratio polish */
.ss-nav {
  min-height: 56px;
}

.ss-brand {
  height: 42px;
  max-width: clamp(176px, 16vw, 220px);
  padding: 0 10px;
  border: 1px solid #46434c;
  border-radius: 16px;
  background: #302e34;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.ss-brand__logo {
  width: 100%;
  height: 28px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.ss-prompt-sheet {
  min-height: auto;
  grid-template-columns: minmax(0, 1.58fr) minmax(310px, 0.82fr);
  gap: 26px;
  align-items: start;
}

.ss-prompt-visual {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #46434c;
  border-radius: 16px;
  background: transparent;
}

.ss-prompt-visual img {
  width: 100%;
  height: auto;
  max-height: none;
  padding: 0;
  border-radius: 0;
  object-fit: initial;
  object-position: initial;
  background: transparent;
  box-shadow: none;
}

.ss-prompt-visual figcaption {
  margin: 0;
  min-height: 34px;
  padding: 8px 12px 10px;
  border-top: 1px solid #3f3c45;
  color: #aaa6b0;
  background: #302e34;
}

.ss-related {
  margin-top: 24px;
  padding-top: 20px;
}

.ss-related__grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: start;
}

.ss-related-card {
  display: block;
  min-height: 0;
  border: 1px solid #46434c;
  background: #302e34;
}

.ss-related-card img {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: initial;
  object-position: initial;
  background: transparent;
}

.ss-related-card span {
  min-height: 40px;
  display: flex;
  align-items: center;
  color: #d8d4de;
  background: #343237;
}

.ss-masonry {
  align-items: start;
}

.ss-masonry-card {
  height: auto;
  min-height: 0;
  display: block;
  background: #302e34;
}

.ss-masonry-card img {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: initial;
  object-position: initial;
  background: transparent;
}

.ss-trend-card img {
  width: auto;
  max-width: 76px;
  height: 54px;
  object-fit: initial;
  background: transparent;
}

/* Click heat ranking module */
.ss-gallery-rail__panel {
  padding: 20px 18px !important;
}

.ss-trend-list {
  gap: 8px !important;
  grid-auto-rows: auto !important;
}

.ss-trend-card {
  min-height: 62px !important;
  height: auto !important;
  grid-template-columns: 28px 46px minmax(0, 1fr) !important;
  gap: 9px !important;
  padding: 8px 10px !important;
  border-radius: 13px !important;
}

.ss-trend-card span {
  display: block !important;
  text-align: center !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

.ss-trend-card img {
  width: 46px !important;
  max-width: 46px !important;
  height: 46px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
}

.ss-trend-card__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ss-trend-card__copy strong {
  display: block;
  overflow: hidden;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.ss-trend-card__copy em {
  display: block;
  overflow: hidden;
  color: #aaa6b0;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .ss-trend-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ss-trend-card {
    grid-template-columns: 28px 46px minmax(0, 1fr) !important;
  }
}

@media (max-width: 1180px) {
  .ss-prompt-sheet {
    grid-template-columns: 1fr;
  }

  .ss-prompt-visual img {
    height: auto;
  }
}

@media (max-width: 760px) {
  .ss-nav {
    min-height: 58px;
  }

  .ss-brand {
    height: 38px;
    max-width: 154px;
    padding: 0 8px;
  }

  .ss-brand__logo {
    height: 24px;
  }

  .ss-prompt-modal {
    padding: 10px 12px 40px;
  }

  .ss-prompt-sheet {
    width: min(100%, 390px);
    padding: 18px;
    border-radius: 18px;
  }

  .ss-prompt-visual img {
    height: auto;
    max-height: none;
    aspect-ratio: auto;
  }

  .ss-related__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .ss-masonry-card,
  .ss-masonry-card img {
    min-height: 0;
  }
}

body:not(.signshi-view-chat-popout) .ss-chat-channel-stack {
  display: grid;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid #46434c;
}

body:not(.signshi-view-chat-popout) .ss-chat-channel-stack > span,
body:not(.signshi-view-chat-popout) .ss-chat-members__head span,
body:not(.signshi-view-chat-popout) .ss-chat-members > p {
  color: #aaa6b0 !important;
  font-size: 12px !important;
  font-weight: 800;
}

body:not(.signshi-view-chat-popout) .ss-chat-channel-row {
  min-height: 46px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #dcd8e1;
  background: transparent;
}

body:not(.signshi-view-chat-popout) .ss-chat-channel-row :is(i, svg) {
  width: 18px;
  height: 18px;
  color: currentColor;
}

body:not(.signshi-view-chat-popout) .ss-chat-channel-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

body:not(.signshi-view-chat-popout) .ss-chat-channel-row em {
  font-style: normal;
  color: #aaa6b0;
  font-size: 11px;
}

body:not(.signshi-view-chat-popout) .ss-chat-channel-row.is-active {
  border-color: rgba(47, 114, 255, 0.82);
  color: #ffffff;
  background: #2f72ff;
  box-shadow: 0 12px 28px rgba(47, 114, 255, 0.22);
}

body:not(.signshi-view-chat-popout) .ss-chat-channel-row.is-active em {
  color: rgba(255, 255, 255, 0.78);
}

body:not(.signshi-view-chat-popout) .ss-chat-members__head {
  min-height: 34px;
  padding: 0 6px;
}

body:not(.signshi-view-chat-popout) .ss-chat-members__head strong {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid rgba(47, 114, 255, 0.48);
  border-radius: 999px;
  color: #ffffff !important;
  font-size: 12px !important;
  background: rgba(47, 114, 255, 0.14);
}

body:not(.signshi-view-chat-popout) .ss-chat-members__head em {
  color: #8fb5ff !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-member-list {
  gap: 8px !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-member-list button {
  min-height: 48px !important;
  padding: 8px 10px !important;
  border-color: transparent !important;
  border-radius: 14px !important;
  color: #f8f8f2 !important;
  background: #343237 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-member-list button:hover,
body:not(.signshi-view-chat-popout) .ss-chat-member-list button.is-current {
  border-color: rgba(47, 114, 255, 0.82) !important;
  background: rgba(47, 114, 255, 0.2) !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-panel {
  min-height: 600px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #28262b !important;
  box-shadow: none !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-panel__head {
  min-height: 92px !important;
  padding: 18px 24px !important;
  align-items: center !important;
  border-bottom: 1px solid #46434c !important;
  background: #302e34 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-panel__head span {
  color: #8fb5ff !important;
  font-size: 12px !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-panel__head h2 {
  color: #ffffff !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-panel__head p {
  color: #aaa6b0 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-panel__head [data-chat-online-summary] {
  color: #ffffff !important;
  border-color: rgba(47, 114, 255, 0.48) !important;
  background: rgba(47, 114, 255, 0.14) !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-panel__actions {
  gap: 8px !important;
  align-items: center !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-panel__actions .ss-outline {
  min-height: 42px !important;
  padding: 0 14px !important;
  border-color: #4b4852 !important;
  border-radius: 999px !important;
  color: #f8f8f2 !important;
  background: #343237 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-panel__actions .ss-outline :is(i, svg) {
  width: 18px !important;
  height: 18px !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-log {
  flex: 1 1 auto !important;
  max-height: none !important;
  min-height: 320px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 22px 28px !important;
  background: #28262b !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-empty {
  margin: auto !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-empty svg {
  color: #2f72ff !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-empty strong {
  color: #ffffff !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-message {
  width: fit-content !important;
  max-width: min(74%, 580px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 10px !important;
  border: 0 !important;
  color: #f8f8f2 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-message.is-own {
  align-self: flex-end !important;
  flex-direction: row-reverse !important;
  color: #ffffff !important;
  background: transparent !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-message:not(.is-own) {
  align-self: flex-start !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-message__body {
  min-width: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid #4b4852 !important;
  border-radius: 16px !important;
  background: #343237 !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}

body:not(.signshi-view-chat-popout) .ss-chat-message.is-own .ss-chat-message__body {
  border-color: #2f72ff !important;
  background: #2f72ff !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-message__meta span,
body:not(.signshi-view-chat-popout) .ss-chat-message__meta time {
  color: #aaa6b0 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-message.is-own .ss-chat-message__meta span,
body:not(.signshi-view-chat-popout) .ss-chat-message.is-own .ss-chat-message__meta time {
  color: rgba(255, 255, 255, 0.76) !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-compose {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 58px !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 14px 18px !important;
  border-top: 1px solid #46434c !important;
  background: #302e34 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-toolbar {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 52px !important;
  margin: 0 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-toolbar .ss-icon-btn,
body:not(.signshi-view-chat-popout) .ss-chat-upload {
  width: 38px !important;
  height: 52px !important;
  min-width: 38px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #f8f8f2 !important;
  background: transparent !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-toolbar .ss-icon-btn :is(i, svg),
body:not(.signshi-view-chat-popout) .ss-chat-upload :is(i, svg) {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-toolbar [data-chat-image-name] {
  display: none !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-stickers {
  grid-column: 1 / -1 !important;
  order: -1 !important;
  margin: 0 0 4px !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-compose textarea {
  grid-column: 2 !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 15px 18px !important;
  border-color: #4b4852 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: #28262b !important;
  resize: none !important;
  overflow: hidden !important;
  line-height: 1.25 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-compose > .ss-primary {
  grid-column: 3 !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  justify-content: center !important;
  font-size: 0 !important;
  background: #2f72ff !important;
  box-shadow: 0 14px 32px rgba(47, 114, 255, 0.28) !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-compose > .ss-primary :is(i, svg) {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
}

@media (max-width: 860px) {
  body:not(.signshi-view-chat-popout) .ss-chat-shell {
    width: min(100% - 24px, 680px) !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-hero {
    min-height: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 24px 20px !important;
    border-radius: 20px 20px 0 0 !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-hero h1 {
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-hero__badge {
    width: 100% !important;
    justify-content: center !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-layout,
  body:not(.signshi-view-chat-popout) .ss-chat-shell.is-connected .ss-chat-layout {
    grid-template-columns: 1fr !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-shell:not(.is-connected) .ss-chat-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    padding: 16px !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-members {
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid #46434c !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-shell:not(.is-connected) .ss-chat-gate {
    width: 100% !important;
    max-width: none !important;
    padding: 22px 18px !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-gate :is(h2, p, label, input, button) {
    max-width: 100% !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-gate h2 {
    font-size: 28px !important;
    line-height: 1.14 !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-gate .ss-primary {
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-panel {
    min-height: 620px !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-panel__head,
  body:not(.signshi-view-chat-popout) .ss-chat-compose {
    grid-template-columns: 1fr !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-panel__head {
    align-items: flex-start !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-compose {
    grid-template-columns: auto minmax(0, 1fr) 54px !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-toolbar .ss-icon-btn,
  body:not(.signshi-view-chat-popout) .ss-chat-upload {
    width: 34px !important;
    min-width: 34px !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-compose > .ss-primary {
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
  }
}

/* Glossy blue CTA buttons */
:root {
  --ss-gloss-blue-top: #238cff;
  --ss-gloss-blue-mid: #1678f4;
  --ss-gloss-blue-bottom: #3aa1ff;
  --ss-gloss-blue-edge: #7ecaff;
  --ss-gloss-blue-shadow: rgba(19, 119, 255, 0.42);
}

:is(
  .ss-login-btn,
  .ss-primary,
  .ss-publish-btn,
  .ss-discovery-search button,
  .ss-card-action,
  .ss-studio-actions a:first-child,
  .ss-feature-shortcuts__icon,
  .ss-copy-row button
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(126, 202, 255, 0.72) !important;
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.08) 14%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, var(--ss-gloss-blue-top) 0%, var(--ss-gloss-blue-mid) 54%, var(--ss-gloss-blue-bottom) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -4px 0 rgba(93, 191, 255, 0.34),
    0 0 0 1px rgba(34, 139, 255, 0.32),
    0 10px 24px var(--ss-gloss-blue-shadow) !important;
  text-shadow: 0 1px 0 rgba(0, 64, 154, 0.28);
}

:is(
  .ss-login-btn,
  .ss-primary,
  .ss-publish-btn,
  .ss-discovery-search button,
  .ss-card-action,
  .ss-studio-actions a:first-child,
  .ss-feature-shortcuts__icon,
  .ss-copy-row button
)::before {
  content: "";
  position: absolute;
  inset: 2px 8px auto;
  height: 42%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
  opacity: 0.62;
  pointer-events: none;
  z-index: -1;
}

:is(
  .ss-login-btn,
  .ss-primary,
  .ss-publish-btn,
  .ss-discovery-search button,
  .ss-card-action,
  .ss-studio-actions a:first-child,
  .ss-feature-shortcuts__icon,
  .ss-copy-row button
):hover {
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.1) 14%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #3aa1ff 0%, #238cff 52%, #59b5ff 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -4px 0 rgba(117, 211, 255, 0.42),
    0 0 0 1px rgba(107, 198, 255, 0.46),
    0 14px 30px rgba(20, 137, 255, 0.48) !important;
}

:is(
  .ss-login-btn,
  .ss-primary,
  .ss-publish-btn,
  .ss-discovery-search button,
  .ss-card-action,
  .ss-studio-actions a:first-child,
  .ss-feature-shortcuts__icon,
  .ss-copy-row button
):active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 8px rgba(4, 56, 142, 0.22),
    inset 0 -2px 0 rgba(93, 191, 255, 0.28),
    0 6px 16px rgba(19, 119, 255, 0.34) !important;
}

:is(
  .ss-login-btn,
  .ss-primary,
  .ss-publish-btn,
  .ss-discovery-search button,
  .ss-card-action,
  .ss-studio-actions a:first-child,
  .ss-feature-shortcuts__icon,
  .ss-copy-row button
) :is(i, svg) {
  color: currentColor !important;
  stroke: currentColor !important;
}

:is(
  .ss-login-btn,
  .ss-primary,
  .ss-publish-btn,
  .ss-discovery-search button,
  .ss-card-action,
  .ss-studio-actions a:first-child,
  .ss-feature-shortcuts__icon,
  .ss-copy-row button
):disabled,
:is(
  .ss-login-btn,
  .ss-primary,
  .ss-publish-btn,
  .ss-discovery-search button,
  .ss-card-action,
  .ss-studio-actions a:first-child,
  .ss-feature-shortcuts__icon,
  .ss-copy-row button
)[disabled] {
  opacity: 0.58;
  cursor: not-allowed;
  filter: saturate(0.78);
  transform: none;
}

/* Packed inspiration masonry: keep mixed image ratios from leaving grid row gaps. */
.ss-gallery-main > .ss-masonry {
  --ss-masonry-gap: 32px;
  display: block !important;
  columns: 4 240px !important;
  column-gap: var(--ss-masonry-gap) !important;
  gap: 0 !important;
  grid-template-columns: none !important;
}

.ss-gallery-main > .ss-masonry .ss-masonry-card {
  display: inline-block !important;
  vertical-align: top !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 var(--ss-masonry-gap) !important;
  break-inside: avoid !important;
  page-break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
}

.ss-gallery-main > .ss-masonry .ss-masonry-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: initial !important;
}

@media (max-width: 1180px) {
  .ss-gallery-main > .ss-masonry {
    --ss-masonry-gap: 24px;
    columns: 3 210px !important;
  }
}

@media (max-width: 760px) {
  .ss-gallery-main > .ss-masonry {
    --ss-masonry-gap: 16px;
    columns: 1 100% !important;
    column-gap: 0 !important;
  }

  .ss-gallery-main > .ss-masonry .ss-masonry-card {
    margin-bottom: var(--ss-masonry-gap) !important;
  }
}

/* NFTMarket reference light skin: final site-wide visual layer. */
:root {
  --ss-bg: #dcebe7;
  --ss-surface: #ffffff;
  --ss-text: #111827;
  --ss-muted: #657387;
  --ss-soft: #eef3f7;
  --ss-border: #e4ebf2;
  --ss-blue: #1686ff;
  --ss-violet: #6477ff;
  --ss-green: #1686ff;
  --ss-red: #ff4d43;
  --ss-shadow: 0 26px 70px rgba(42, 78, 110, 0.18);
}

body.signshi-body {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.72), transparent 30%),
    radial-gradient(circle at 100% 8%, rgba(116, 173, 215, 0.42), transparent 36%),
    linear-gradient(135deg, #e4f0ec 0%, #d9e9e6 42%, #b8d1e5 100%) !important;
  color: var(--ss-text) !important;
}

.ss-header {
  padding: 18px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ss-nav {
  width: min(1640px, calc(100% - 96px)) !important;
  min-height: 76px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 34px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 22px 56px rgba(45, 76, 104, 0.16) !important;
  backdrop-filter: blur(20px) saturate(1.18);
}

.ss-brand__logo {
  height: 44px !important;
}

.ss-brand__mark {
  background: linear-gradient(135deg, #1686ff, #6a7bff) !important;
}

.ss-user-avatar,
.ss-author-avatar,
.ss-profile-card__avatar {
  background: linear-gradient(135deg, #1686ff, #6a7bff);
}

.ss-nav__links {
  gap: 10px !important;
  color: #5d6a7c !important;
}

.ss-nav__links a {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  color: #5d6a7c !important;
  background: transparent !important;
}

.ss-nav__links a:hover {
  color: #ffffff !important;
  background: #111827 !important;
}

.ss-nav__links a:hover svg {
  color: currentColor !important;
}

.ss-search,
.ss-discovery-search {
  border: 1px solid #dde7f0 !important;
  background: #f7faff !important;
  color: #66758a !important;
  box-shadow: none !important;
}

.ss-search input,
.ss-discovery-search input {
  color: #142033 !important;
}

.ss-search input::placeholder,
.ss-discovery-search input::placeholder {
  color: #8a96a8 !important;
}

.ss-inspiration-shell {
  width: min(1640px, calc(100% - 96px)) !important;
  margin: 30px auto 86px !important;
  padding: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 38px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 30px 90px rgba(45, 76, 104, 0.2) !important;
}

.ss-discovery-hero {
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.7fr) !important;
  gap: 24px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  border-radius: 30px !important;
  background: #eef3f7 !important;
}

.ss-discovery-hero__copy,
.ss-studio-panel {
  min-height: 350px !important;
  border: 0 !important;
  border-radius: 26px !important;
  box-shadow: 0 20px 48px rgba(43, 79, 112, 0.12) !important;
}

.ss-discovery-hero__copy {
  padding: clamp(28px, 3vw, 46px) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)),
    var(--ss-gallery-hero-image, none) center/cover !important;
}

.ss-discovery-hero__copy h2 {
  max-width: 800px !important;
  color: #142033 !important;
  font-size: clamp(42px, 4.4vw, 72px) !important;
  line-height: 0.96 !important;
  letter-spacing: 0 !important;
}

.ss-discovery-hero__copy p {
  max-width: 720px !important;
  color: #5f6f84 !important;
  font-size: 16px !important;
}

.ss-discovery-search {
  min-height: 58px !important;
  padding: 7px 8px 7px 18px !important;
}

.ss-discovery-search svg,
.ss-search__submit {
  color: #1686ff !important;
}

.ss-discovery-search button,
.ss-login-btn,
.ss-primary,
.ss-publish-btn,
.ss-card-action,
.ss-copy-row button,
.ss-studio-actions a:first-child {
  color: #ffffff !important;
  border: 1px solid rgba(126, 202, 255, 0.78) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.08) 28%, transparent 44%),
    linear-gradient(180deg, #22a4ff 0%, #1288ff 54%, #48b6ff 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -4px 0 rgba(114, 211, 255, 0.38),
    0 13px 28px rgba(22, 134, 255, 0.35) !important;
}

.ss-chip-row {
  gap: 12px !important;
}

.ss-chip-row a {
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #2a3546 !important;
  background: #e7edf3 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.ss-chip-row a:hover,
.ss-chip-row a.is-active {
  color: #ffffff !important;
  background: #111827 !important;
}

.ss-studio-panel {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 78% 20%, rgba(51, 255, 88, 0.14), transparent 28%),
    linear-gradient(180deg, #172337 0%, #101a2b 100%) !important;
}

.ss-studio-panel__top span,
.ss-studio-panel h3 {
  color: #ffffff !important;
}

.ss-studio-panel__top small,
.ss-studio-panel p,
.ss-studio-stats li,
.ss-studio-stats span {
  color: #b7c4d4 !important;
}

.ss-studio-stats strong {
  color: #ffffff !important;
}

.ss-studio-actions a:not(:first-child) {
  color: #dbe7f5 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.ss-feature-shortcuts {
  gap: 22px !important;
  margin: 0 0 28px !important;
}

.ss-feature-shortcuts a {
  min-height: 118px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 46px rgba(43, 79, 112, 0.1) !important;
}

.ss-feature-shortcuts strong,
.ss-gallery-rail__panel h2,
.ss-trend-card strong,
.ss-masonry-card__shade strong,
.ss-prompt-info h2,
.ss-tool-hero h1,
.ss-chat-hero h1,
.ss-dashboard-head h1,
.ss-dashboard-gate h1,
.ss-page-head h1,
.ss-membership-hero h1 {
  color: #142033 !important;
}

.ss-feature-shortcuts em,
.ss-gallery-rail__panel p,
.ss-trend-card em,
.ss-tool-hero p,
.ss-chat-hero p,
.ss-dashboard-head p,
.ss-dashboard-gate p,
.ss-page-content,
.ss-membership-hero p {
  color: #637287 !important;
}

.ss-feature-shortcuts__icon {
  color: #ffffff !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 46%),
    linear-gradient(180deg, #22a4ff, #1288ff) !important;
  box-shadow: 0 12px 24px rgba(22, 134, 255, 0.26) !important;
}

.ss-gallery-layout {
  grid-template-columns: 286px minmax(0, 1fr) !important;
  gap: 34px !important;
}

.ss-gallery-rail__panel,
.ss-search-result,
.ss-prompt-sheet,
.ss-profile-card,
.ss-level-card,
.ss-usage-card,
.ss-upload-panel,
.ss-generate-panel,
.ss-chat-gate,
.ss-chat-panel,
.ss-dashboard-head,
.ss-dashboard-gate,
.ss-publish-panel,
.ss-my-posts,
.ss-empty,
.ss-page-card,
.ss-page-head,
.ss-page-content,
.ss-membership-card {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 18px 46px rgba(43, 79, 112, 0.1) !important;
}

.ss-gallery-rail__panel {
  padding: 22px !important;
  border-radius: 24px !important;
}

.ss-trend-list {
  gap: 12px !important;
}

.ss-trend-card {
  min-height: 72px !important;
  border: 1px solid #e7eef5 !important;
  border-radius: 18px !important;
  background: #f8fbff !important;
}

.ss-gallery-main > .ss-masonry {
  --ss-masonry-gap: 36px !important;
  columns: 4 250px !important;
  column-gap: var(--ss-masonry-gap) !important;
}

.ss-gallery-main > .ss-masonry .ss-masonry-card {
  margin-bottom: var(--ss-masonry-gap) !important;
  border: 8px solid #ffffff !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 22px 48px rgba(43, 79, 112, 0.16) !important;
}

.ss-gallery-main > .ss-masonry .ss-masonry-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 28px 64px rgba(22, 134, 255, 0.2) !important;
}

.ss-masonry-card__shade {
  padding: 72px 16px 16px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 24, 38, 0.15) 36%, rgba(15, 24, 38, 0.82) 100%) !important;
}

.ss-masonry-card__shade strong,
.ss-masonry-card__shade em {
  color: #ffffff !important;
}

.ss-tool-shell,
.ss-chat-shell,
.ss-dashboard,
.ss-page-shell,
.ss-membership-shell {
  width: min(1320px, calc(100% - 96px)) !important;
  color: var(--ss-text) !important;
}

.ss-tool-hero,
.ss-chat-hero,
.ss-dashboard-head,
.ss-page-head,
.ss-membership-hero {
  border: 0 !important;
  border-radius: 30px !important;
  color: var(--ss-text) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.9)),
    var(--ss-tool-hero-image, var(--ss-chat-hero-image, none)) center/cover !important;
  box-shadow: 0 22px 60px rgba(43, 79, 112, 0.14) !important;
}

.ss-tool-hero span,
.ss-chat-hero span,
.ss-chat-panel__head span,
.ss-dashboard-head span,
.ss-admin-fields > span,
.ss-user-limit-note {
  color: #1686ff !important;
}

.ss-tool-options select,
.ss-output-label textarea,
.ss-chat-gate input,
.ss-chat-compose textarea,
.ss-auth-form input:not([type="checkbox"]),
.ss-publish-panel input,
.ss-publish-panel textarea {
  color: #142033 !important;
  border-color: #dce7f0 !important;
  background: #f8fbff !important;
}

.ss-chat-log,
.ss-prompt-box,
.ss-page-content {
  border-color: #e4ebf2 !important;
  background: #f8fbff !important;
}

.ss-chat-message {
  color: #142033 !important;
  border: 1px solid #e4ebf2 !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(43, 79, 112, 0.1) !important;
}

.ss-chat-message.is-own {
  color: #ffffff !important;
  border-color: #1686ff !important;
  background: #1686ff !important;
}

.ss-chat-message.is-own .ss-chat-message__meta span,
.ss-chat-message.is-own .ss-chat-message__meta time {
  color: rgba(255, 255, 255, 0.76) !important;
}

@media (max-width: 1180px) {
  .ss-nav,
  .ss-inspiration-shell,
  .ss-tool-shell,
  .ss-chat-shell,
  .ss-dashboard,
  .ss-page-shell,
  .ss-membership-shell {
    width: min(100% - 44px, 980px) !important;
  }

  .ss-discovery-hero,
  .ss-gallery-layout {
    grid-template-columns: 1fr !important;
  }

  .ss-gallery-main > .ss-masonry {
    --ss-masonry-gap: 26px !important;
    columns: 3 220px !important;
  }
}

@media (max-width: 760px) {
  .ss-header {
    padding-top: 12px !important;
  }

  .ss-nav,
  .ss-inspiration-shell,
  .ss-tool-shell,
  .ss-chat-shell,
  .ss-dashboard,
  .ss-page-shell,
  .ss-membership-shell {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ss-nav {
    border-radius: 24px !important;
    padding: 12px !important;
  }

  .ss-inspiration-shell {
    margin-top: 16px !important;
    padding: 14px !important;
    border-radius: 26px !important;
  }

  .ss-discovery-hero {
    padding: 12px !important;
    border-radius: 22px !important;
  }

  .ss-discovery-hero__copy,
  .ss-studio-panel {
    min-height: auto !important;
    border-radius: 20px !important;
  }

  .ss-feature-shortcuts {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .ss-gallery-main > .ss-masonry {
    --ss-masonry-gap: 18px !important;
    columns: 1 100% !important;
  }
}

/* Final chatroom contrast pass: align the room with the light site skin. */
:root {
  --ss-green: #1686ff;
}

.ss-studio-panel {
  background:
    radial-gradient(circle at 78% 20%, rgba(22, 134, 255, 0.14), transparent 28%),
    linear-gradient(180deg, #172337 0%, #101a2b 100%) !important;
}

.ss-studio-panel strong,
.ss-studio-panel small,
.ss-studio-panel p,
.ss-studio-stats li,
.ss-studio-stats span {
  color: inherit;
}

body:not(.signshi-view-chat-popout) .ss-chat-shell {
  color: #142033 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-hero {
  color: #142033 !important;
  border: 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(247, 251, 255, 0.78)),
    var(--ss-chat-hero-image, none) center/cover !important;
  box-shadow: 0 22px 60px rgba(43, 79, 112, 0.14) !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-hero span,
body:not(.signshi-view-chat-popout) .ss-chat-panel__head span,
body:not(.signshi-view-chat-popout) .ss-chat-status,
body:not(.signshi-view-chat-popout) .ss-chat-status.is-success,
body:not(.signshi-view-chat-popout) .ss-chat-members__head em {
  color: #1686ff !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-hero h1,
body:not(.signshi-view-chat-popout) .ss-chat-gate h2,
body:not(.signshi-view-chat-popout) .ss-chat-panel__head h2,
body:not(.signshi-view-chat-popout) .ss-chat-empty strong,
body:not(.signshi-view-chat-popout) .ss-chat-workspace-title strong,
body:not(.signshi-view-chat-popout) .ss-chat-channel-row strong,
body:not(.signshi-view-chat-popout) .ss-chat-members__head strong {
  color: #142033 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-hero p,
body:not(.signshi-view-chat-popout) .ss-chat-gate p,
body:not(.signshi-view-chat-popout) .ss-chat-panel__head p,
body:not(.signshi-view-chat-popout) .ss-chat-empty span,
body:not(.signshi-view-chat-popout) .ss-chat-channel-stack > span,
body:not(.signshi-view-chat-popout) .ss-chat-members__head span,
body:not(.signshi-view-chat-popout) .ss-chat-members > p,
body:not(.signshi-view-chat-popout) .ss-chat-channel-row em,
body:not(.signshi-view-chat-popout) .ss-chat-toolbar span {
  color: #657387 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-hero__badge,
body:not(.signshi-view-chat-popout) .ss-chat-panel__actions .ss-outline {
  color: #1686ff !important;
  border-color: #d6e8ff !important;
  background: #f2f8ff !important;
  box-shadow: none !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-layout {
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  background: #eef3f7 !important;
  box-shadow: 0 24px 66px rgba(43, 79, 112, 0.13) !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-members,
body:not(.signshi-view-chat-popout) .ss-chat-gate,
body:not(.signshi-view-chat-popout) .ss-chat-panel {
  border-color: #e4ebf2 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #142033 !important;
  box-shadow: 0 18px 46px rgba(43, 79, 112, 0.1) !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-shell:not(.is-connected) .ss-chat-gate,
body:not(.signshi-view-chat-popout) .ss-chat-shell.is-connected .ss-chat-panel {
  border-color: #e4ebf2 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #142033 !important;
  box-shadow: 0 18px 46px rgba(43, 79, 112, 0.1) !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-workspace-title,
body:not(.signshi-view-chat-popout) .ss-chat-channel-stack,
body:not(.signshi-view-chat-popout) .ss-chat-members__head,
body:not(.signshi-view-chat-popout) .ss-chat-panel__head,
body:not(.signshi-view-chat-popout) .ss-chat-compose {
  border-color: #e4ebf2 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-channel-row,
body:not(.signshi-view-chat-popout) .ss-chat-member-list button,
body:not(.signshi-view-chat-popout) .ss-chat-toolbar .ss-icon-btn,
body:not(.signshi-view-chat-popout) .ss-chat-upload,
body:not(.signshi-view-chat-popout) .ss-chat-stickers button {
  color: #536174 !important;
  border-color: #e4ebf2 !important;
  background: #f8fbff !important;
  box-shadow: none !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-channel-row :is(i, svg),
body:not(.signshi-view-chat-popout) .ss-chat-toolbar .ss-icon-btn :is(i, svg),
body:not(.signshi-view-chat-popout) .ss-chat-upload :is(i, svg),
body:not(.signshi-view-chat-popout) .ss-chat-empty svg {
  color: #1686ff !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-channel-row.is-active,
body:not(.signshi-view-chat-popout) .ss-chat-member-list button:hover,
body:not(.signshi-view-chat-popout) .ss-chat-member-list button.is-current {
  color: #ffffff !important;
  border-color: #1686ff !important;
  background: #1686ff !important;
  box-shadow: 0 12px 28px rgba(22, 134, 255, 0.22) !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-channel-row.is-active strong,
body:not(.signshi-view-chat-popout) .ss-chat-channel-row.is-active em,
body:not(.signshi-view-chat-popout) .ss-chat-channel-row.is-active :is(i, svg),
body:not(.signshi-view-chat-popout) .ss-chat-member-list button:hover *,
body:not(.signshi-view-chat-popout) .ss-chat-member-list button.is-current * {
  color: #ffffff !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-log {
  border-color: #e4ebf2 !important;
  background: #f8fbff !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-message {
  color: #142033 !important;
  border-color: #e4ebf2 !important;
  background: #ffffff !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-message:not(.is-own) .ss-chat-message__body,
body:not(.signshi-view-chat-popout) .ss-chat-message__meta span,
body:not(.signshi-view-chat-popout) .ss-chat-message__meta time {
  color: #536174 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-message.is-own {
  color: #ffffff !important;
  border-color: #1686ff !important;
  background: #1686ff !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-message.is-own .ss-chat-message__body,
body:not(.signshi-view-chat-popout) .ss-chat-message.is-own .ss-chat-message__meta span,
body:not(.signshi-view-chat-popout) .ss-chat-message.is-own .ss-chat-message__meta time {
  color: rgba(255, 255, 255, 0.86) !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-gate input,
body:not(.signshi-view-chat-popout) .ss-chat-compose textarea {
  color: #142033 !important;
  border-color: #dce7f0 !important;
  background: #f8fbff !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-gate input::placeholder,
body:not(.signshi-view-chat-popout) .ss-chat-compose textarea::placeholder {
  color: #8a96a8 !important;
}

@media (max-width: 860px) {
  body:not(.signshi-view-chat-popout) .ss-chat-members {
    border-bottom-color: #e4ebf2 !important;
  }
}

/* Final cohesive chatroom page: keep hero, workspace, gate, and chat as one module. */
body:not(.signshi-view-chat-popout) .ss-chat-shell {
  width: min(1320px, calc(100% - 96px)) !important;
  margin: 28px auto 86px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  border-radius: 34px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 30px 90px rgba(45, 76, 104, 0.2) !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-hero {
  min-height: 168px !important;
  margin: 0 !important;
  padding: 34px 46px !important;
  border: 0 !important;
  border-bottom: 1px solid #e4ebf2 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(247, 251, 255, 0.78)),
    var(--ss-chat-hero-image, none) center/cover !important;
  box-shadow: none !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-layout,
body:not(.signshi-view-chat-popout) .ss-chat-shell:not(.is-connected) .ss-chat-layout,
body:not(.signshi-view-chat-popout) .ss-chat-shell.is-connected .ss-chat-layout {
  display: grid !important;
  grid-template-columns: minmax(270px, 310px) minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  min-height: 650px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #eef3f7 !important;
  box-shadow: none !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-members {
  position: relative !important;
  top: auto !important;
  display: flex !important;
  min-height: 650px !important;
  padding: 24px 18px !important;
  gap: 18px !important;
  border: 0 !important;
  border-right: 1px solid #e4ebf2 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-shell:not(.is-connected) .ss-chat-gate {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 650px !important;
  margin: 0 !important;
  padding: clamp(44px, 5vw, 72px) clamp(32px, 7vw, 92px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-shell:not(.is-connected) .ss-chat-layout > .ss-chat-members,
body:not(.signshi-view-chat-popout) .ss-chat-shell.is-connected .ss-chat-layout > .ss-chat-members {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-shell.is-connected .ss-chat-layout > .ss-chat-panel {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-shell:not(.is-connected) .ss-chat-gate > * {
  width: min(520px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-shell:not(.is-connected) .ss-chat-gate > .ss-brand__mark {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  align-self: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-gate label,
body:not(.signshi-view-chat-popout) .ss-chat-gate :is(h2, p, label, input, button),
body:not(.signshi-view-chat-popout) .ss-chat-panel__head :is(h2, p, span, strong) {
  max-width: 100% !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-gate label {
  color: #536174 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-gate input {
  min-height: 52px !important;
  border-radius: 14px !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-gate .ss-primary {
  width: min(520px, 100%) !important;
  min-height: 56px !important;
  border-radius: 999px !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-panel {
  min-height: 650px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-panel__head {
  min-height: 104px !important;
  padding: 22px 28px !important;
  border-bottom: 1px solid #e4ebf2 !important;
  background: #ffffff !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-log {
  min-height: 390px !important;
  background: #f8fbff !important;
}

body:not(.signshi-view-chat-popout) .ss-chat-compose {
  padding: 18px 22px !important;
  border-top: 1px solid #e4ebf2 !important;
  background: #ffffff !important;
}

@media (max-width: 860px) {
  body.signshi-body,
  body.signshi-body .site {
    overflow-x: hidden !important;
  }

  .ss-nav,
  .ss-inspiration-shell,
  .ss-tool-shell,
  .ss-chat-shell,
  .ss-dashboard,
  .ss-page-shell,
  .ss-membership-shell {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-shell {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    margin-top: 18px !important;
    border-radius: 26px !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-hero {
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 24px 20px !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-hero > *,
  body:not(.signshi-view-chat-popout) .ss-chat-layout,
  body:not(.signshi-view-chat-popout) .ss-chat-members,
  body:not(.signshi-view-chat-popout) .ss-chat-gate,
  body:not(.signshi-view-chat-popout) .ss-chat-panel {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-hero h1,
  body:not(.signshi-view-chat-popout) .ss-chat-hero p,
  body:not(.signshi-view-chat-popout) .ss-chat-gate h2,
  body:not(.signshi-view-chat-popout) .ss-chat-gate p {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-layout,
  body:not(.signshi-view-chat-popout) .ss-chat-shell:not(.is-connected) .ss-chat-layout,
  body:not(.signshi-view-chat-popout) .ss-chat-shell.is-connected .ss-chat-layout {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-members {
    min-height: auto !important;
    padding: 18px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e4ebf2 !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-channel-row {
    grid-template-columns: 24px minmax(0, 1fr) !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-channel-row em {
    display: none !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-shell:not(.is-connected) .ss-chat-gate {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: auto !important;
    padding: 30px 20px 38px !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-panel {
    min-height: 620px !important;
  }
}

@media (max-width: 540px) {
  .ss-nav,
  body:not(.signshi-view-chat-popout) .ss-chat-shell {
    width: auto !important;
    max-width: none !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-hero h1 {
    font-size: clamp(34px, 12vw, 44px) !important;
    line-height: 1.05 !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-hero p,
  body:not(.signshi-view-chat-popout) .ss-chat-gate p {
    white-space: normal !important;
    word-break: break-word !important;
  }

  body:not(.signshi-view-chat-popout) .ss-chat-members__head {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
  }
}

/* CRO and SEO experience pass. */
.ss-discovery-hero__copy h1 {
  max-width: 800px !important;
  margin: 0 !important;
  color: #142033 !important;
  font-size: clamp(42px, 4.4vw, 72px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

.ss-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.ss-hero-actions .ss-primary,
.ss-hero-actions .ss-outline {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  font-weight: 800;
}

.ss-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 18px 0 0 !important;
  color: #52647a !important;
  font-size: 13px !important;
}

.ss-hero-proof strong {
  color: #142033;
}

.ss-hero-proof span::before {
  content: "✓";
  margin-right: 6px;
  color: #1686ff;
  font-weight: 900;
}

/* International brand layout for growth sections. */
.ss-growth-sections {
  display: grid;
  width: min(100%, 1280px);
  max-width: 1280px;
  gap: 28px;
  margin: clamp(64px, 7vw, 104px) auto 0;
}

.ss-growth-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  column-gap: clamp(48px, 7vw, 112px);
  align-items: end;
  padding: 0 4px 8px;
}

.ss-growth-intro > span {
  grid-column: 1;
}

.ss-growth-intro h2 {
  grid-column: 1;
}

.ss-growth-intro p {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  max-width: 520px;
  margin: 0 0 4px;
}

.ss-growth-intro > span,
.ss-account-benefit span {
  color: #1686ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ss-growth-intro h2,
.ss-account-benefit h2,
.ss-faq-section h2 {
  margin: 10px 0 0;
  color: #142033;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.ss-growth-intro p,
.ss-account-benefit p,
.ss-faq-section p {
  color: #637287;
  font-size: 16px;
  line-height: 1.7;
}

.ss-growth-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ss-growth-steps article {
  display: flex;
  min-height: 210px;
  padding: 28px;
  flex-direction: column;
  border: 1px solid #e2e9f0;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(36, 61, 84, 0.05);
}

.ss-growth-steps article > strong {
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  background: #edf6ff;
  color: #1686ff;
  font-size: 12px;
  line-height: 1;
}

.ss-growth-steps h3 {
  margin: auto 0 8px;
  color: #142033;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.ss-growth-steps p {
  max-width: 34ch;
  margin: 0;
  color: #637287;
  line-height: 1.6;
}

.ss-account-benefit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  padding: clamp(36px, 4.5vw, 56px);
  border-radius: 24px;
  background: linear-gradient(135deg, #f2f8fd 0%, #eaf4fc 100%);
}

.ss-account-benefit > div {
  max-width: 760px;
}

.ss-account-benefit h2 {
  font-size: clamp(30px, 3vw, 42px);
}

.ss-account-benefit p {
  max-width: 650px;
  margin: 14px 0 0;
}

.ss-account-benefit .ss-primary {
  min-height: 50px;
  padding: 0 24px;
  white-space: nowrap;
}

.ss-faq-section {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  column-gap: clamp(56px, 8vw, 120px);
  padding: clamp(38px, 5vw, 64px);
  border-radius: 24px;
  background: #ffffff;
}

.ss-faq-section h2 {
  grid-row: 1 / span 3;
  margin: 0;
  font-size: clamp(30px, 3vw, 42px);
}

.ss-faq-section details {
  grid-column: 2;
  border-top: 1px solid #e4ebf2;
}

.ss-faq-section details:last-of-type {
  border-bottom: 1px solid #e4ebf2;
}

.ss-faq-section summary {
  display: flex;
  min-height: 68px;
  padding: 20px 0;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #142033;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.ss-faq-section summary::-webkit-details-marker {
  display: none;
}

.ss-faq-section summary::after {
  content: "+";
  flex: 0 0 auto;
  color: #1686ff;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  transition: transform 180ms ease;
}

.ss-faq-section details[open] summary::after {
  transform: rotate(45deg);
}

.ss-faq-section details p {
  max-width: 620px;
  margin: -4px 48px 24px 0;
}
/* End international growth layout. */

.ss-prompt-page {
  width: min(1320px, calc(100% - 96px));
  margin: 30px auto 84px;
}

.ss-prompt-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #607086;
  font-size: 13px;
}

.ss-prompt-breadcrumb svg {
  width: 15px;
  height: 15px;
}

.ss-prompt-page__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 30px 90px rgba(45, 76, 104, 0.18);
}

.ss-prompt-page__hero figure {
  min-width: 0;
  margin: 0;
  padding: 22px;
  background: #eef3f7;
}

.ss-prompt-page__hero figure img {
  width: 100%;
  max-height: 720px;
  object-fit: contain;
  border-radius: 22px;
  background: #e8edf3;
}

.ss-prompt-page__hero figcaption {
  margin-top: 10px;
  color: #718096;
  font-size: 12px;
  text-align: right;
}

.ss-prompt-page__copy {
  min-width: 0;
  padding: clamp(28px, 4vw, 52px);
}

.ss-prompt-page__copy h1 {
  margin: 26px 0 12px;
  color: #142033;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.04;
}

.ss-prompt-page__copy .ss-copy-row {
  margin-top: 34px;
}

.ss-prompt-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.ss-prompt-page__related {
  margin-top: 28px;
  padding: 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
}

.ss-prompt-page__related > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.ss-prompt-page__related h2 {
  margin: 0;
  color: #142033;
}

.ss-prompt-page__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ss-prompt-page__grid a {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.ss-prompt-page__grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}

.ss-prompt-page__grid strong {
  color: #142033;
}

.ss-prompt-page__grid span {
  color: #637287;
  font-size: 13px;
}

.ss-prompt-page--missing {
  display: grid;
  place-items: center;
  min-height: 620px;
  text-align: center;
}

.ss-prompt-page--missing section {
  max-width: 600px;
}

@media (max-width: 980px) {
  .ss-growth-intro,
  .ss-faq-section {
    grid-template-columns: 1fr;
  }

  .ss-growth-intro p {
    grid-column: 1;
    grid-row: auto;
    max-width: 680px;
    margin-top: 18px;
  }

  .ss-faq-section h2 {
    grid-row: auto;
    margin-bottom: 24px;
  }

  .ss-faq-section details {
    grid-column: 1;
  }
}

/* Mobile CRO header fix: keep every header region inside the viewport. */
@media (max-width: 760px) {
  .ss-nav {
    width: auto !important;
    max-width: none !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px 12px !important;
    align-items: center !important;
  }

  .ss-brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .ss-brand__logo {
    width: min(190px, 100%) !important;
    height: auto !important;
  }

  .ss-auth {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .ss-login-btn {
    min-height: 42px !important;
    padding: 0 14px !important;
    white-space: nowrap;
  }

  .ss-nav__links {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .ss-nav__links a {
    flex: 0 0 auto;
  }

  .ss-search {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100% !important;
    min-width: 0 !important;
  }

  .ss-discovery-hero__copy h1 {
    font-size: clamp(38px, 12vw, 54px) !important;
  }

  .ss-growth-steps,
  .ss-prompt-page__grid {
    grid-template-columns: 1fr;
  }

  .ss-growth-sections {
    gap: 18px;
    margin-top: 52px;
  }

  .ss-growth-intro {
    padding-inline: 2px;
  }

  .ss-growth-steps article {
    min-height: 184px;
    padding: 24px;
  }

  .ss-account-benefit {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 30px 24px;
  }

  .ss-account-benefit .ss-primary {
    width: 100%;
  }

  .ss-faq-section {
    padding: 30px 24px;
  }

  .ss-prompt-page {
    width: auto;
    margin: 18px 12px 64px;
  }

  .ss-prompt-page__hero {
    grid-template-columns: 1fr;
    border-radius: 24px;
  }

  .ss-prompt-page__copy {
    padding: 24px 20px 30px;
  }
}

/* Inspiration equal-spacing fix: one gutter controls every visible gap. */
.signshi-view-gallery .ss-inspiration-shell {
  --ss-inspiration-gap: 16px;
  width: min(1760px, calc(100% - (var(--ss-inspiration-gap) * 2))) !important;
  margin: var(--ss-inspiration-gap) auto 64px !important;
  padding: var(--ss-inspiration-gap) !important;
}

.signshi-view-gallery .ss-discovery-hero {
  gap: var(--ss-inspiration-gap) !important;
  margin-bottom: var(--ss-inspiration-gap) !important;
}

.signshi-view-gallery .ss-feature-shortcuts {
  gap: var(--ss-inspiration-gap) !important;
  margin-bottom: var(--ss-inspiration-gap) !important;
}

.signshi-view-gallery .ss-gallery-layout {
  gap: var(--ss-inspiration-gap) !important;
}

.signshi-view-gallery .ss-gallery-main > .ss-masonry {
  --ss-masonry-gap: var(--ss-inspiration-gap) !important;
  column-gap: var(--ss-masonry-gap) !important;
}

.signshi-view-gallery .ss-gallery-main > .ss-masonry .ss-masonry-card {
  margin-bottom: var(--ss-masonry-gap) !important;
}

@media (max-width: 760px) {
  .signshi-view-gallery .ss-inspiration-shell {
    --ss-inspiration-gap: 12px;
    width: auto !important;
    max-width: none !important;
    margin: var(--ss-inspiration-gap) var(--ss-inspiration-gap) 48px !important;
    padding: var(--ss-inspiration-gap) !important;
  }
}

/* Light-surface outline button contrast fix. */
.signshi-view-gallery .ss-hero-actions .ss-outline,
.signshi-view-prompt-tool .ss-tool-actions .ss-outline {
  color: #126fe8 !important;
  border: 1px solid #8fc9ff !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(18, 111, 232, 0.12) !important;
  text-shadow: none !important;
}

.signshi-view-gallery .ss-hero-actions .ss-outline:hover,
.signshi-view-prompt-tool .ss-tool-actions .ss-outline:hover {
  color: #0b5fc7 !important;
  border-color: #4daaff !important;
  background: #edf7ff !important;
  box-shadow: 0 10px 24px rgba(18, 111, 232, 0.18) !important;
}

.signshi-view-gallery .ss-hero-actions .ss-outline :is(i, svg),
.signshi-view-prompt-tool .ss-tool-actions .ss-outline :is(i, svg) {
  color: currentColor !important;
  stroke: currentColor !important;
}

.signshi-view-prompt-tool .ss-tool-actions .ss-outline:disabled,
.signshi-view-prompt-tool .ss-tool-actions .ss-outline[disabled] {
  color: #667085 !important;
  border-color: #d0d5dd !important;
  background: #e5e7eb !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed;
  filter: none !important;
  transform: none !important;
}

/* Image upload preview replaces the upload placeholder. */
.signshi-view-prompt-tool .ss-upload-zone[hidden] {
  display: none !important;
}

.signshi-view-prompt-tool .ss-preview-card {
  position: relative;
  flex: 1;
  min-height: 430px;
  margin: 0 !important;
  overflow: hidden;
  border: 1.5px solid #5b6647;
  border-radius: 20px;
  background: #28262b;
}

.signshi-view-prompt-tool .ss-preview-card[hidden] {
  display: none !important;
}

.signshi-view-prompt-tool .ss-preview-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none !important;
  border: 0 !important;
  border-radius: inherit;
  background: #28262b;
  object-fit: contain;
}

.signshi-view-prompt-tool .ss-preview-card .ss-outline {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1;
  margin: 0 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(32, 34, 40, 0.86) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(12px);
}

.signshi-view-prompt-tool .ss-preview-card .ss-outline:hover {
  color: #ffffff !important;
  border-color: rgba(126, 202, 255, 0.72) !important;
  background: rgba(18, 111, 232, 0.94) !important;
}

@media (max-width: 820px) {
  .signshi-view-prompt-tool .ss-preview-card {
    min-height: 300px;
  }
}

/* Membership light-card title contrast fix. */
.ss-membership-card strong {
  color: #142033 !important;
}

/* Related inspiration cards without outline borders. */
.ss-related-card {
  border: 0 !important;
}

/* Cinematic Mars chatroom hero. */
body.signshi-view-chatroom .ss-chat-hero {
  color: #ffffff !important;
  background:
    linear-gradient(90deg, rgba(3, 10, 24, 0.92) 0%, rgba(3, 10, 24, 0.76) 38%, rgba(3, 10, 24, 0.34) 68%, rgba(3, 10, 24, 0.18) 100%),
    var(--ss-chat-hero-image, none) center right/cover no-repeat !important;
  background-position: center right !important;
}

body.signshi-view-chatroom .ss-chat-hero h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.34);
}

body.signshi-view-chatroom .ss-chat-hero > div > span {
  color: #74b9ff !important;
}

body.signshi-view-chatroom .ss-chat-hero p {
  color: rgba(231, 240, 255, 0.82) !important;
}

body.signshi-view-chatroom .ss-chat-hero__badge {
  color: #d9e9ff !important;
  border-color: rgba(151, 194, 255, 0.32) !important;
  background: rgba(8, 19, 42, 0.54) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px) saturate(130%);
}

@media (max-width: 760px) {
  body.signshi-view-chatroom .ss-chat-hero {
    background:
      linear-gradient(90deg, rgba(3, 10, 24, 0.93), rgba(3, 10, 24, 0.62)),
      var(--ss-chat-hero-image, none) 62% center/cover no-repeat !important;
    background-position: 62% center !important;
  }
}

/* Image to Prompt visual analysis hero. */
body.signshi-view-prompt-tool .ss-tool-hero {
  color: #142033 !important;
  background:
    linear-gradient(90deg, rgba(249, 252, 255, 0.98) 0%, rgba(249, 252, 255, 0.94) 40%, rgba(249, 252, 255, 0.68) 61%, rgba(249, 252, 255, 0.14) 100%),
    var(--ss-tool-hero-image, none) center right/cover no-repeat !important;
  background-position: center right !important;
}

body.signshi-view-prompt-tool .ss-tool-hero h1 {
  color: #142033 !important;
  text-shadow: 0 2px 24px rgba(255, 255, 255, 0.5);
}

body.signshi-view-prompt-tool .ss-tool-hero > div > span {
  color: #1686ff !important;
}

body.signshi-view-prompt-tool .ss-tool-hero p {
  color: #5f7087 !important;
}

body.signshi-view-prompt-tool .ss-tool-badge {
  color: #dbeeff !important;
  border-color: rgba(104, 176, 255, 0.34) !important;
  background: rgba(9, 28, 40, 0.82) !important;
  box-shadow: 0 10px 30px rgba(27, 73, 119, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px) saturate(130%);
}

@media (max-width: 760px) {
  body.signshi-view-prompt-tool .ss-tool-hero {
    background:
      linear-gradient(90deg, rgba(249, 252, 255, 0.98), rgba(249, 252, 255, 0.82)),
      var(--ss-tool-hero-image, none) 66% center/cover no-repeat !important;
    background-position: 66% center !important;
  }
}

/* Unified Image to Prompt workspace. */
body.signshi-view-prompt-tool .ss-tool-shell {
  width: min(1320px, calc(100% - 96px)) !important;
  margin: 28px auto 86px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 34px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 30px 90px rgba(45, 76, 104, 0.18) !important;
}

body.signshi-view-prompt-tool .ss-tool-hero {
  min-height: 220px !important;
  margin: 0 !important;
  padding: 36px 46px !important;
  border: 0 !important;
  border-bottom: 1px solid #e2eaf2 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-image-tool {
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  background: #ffffff !important;
}

body.signshi-view-prompt-tool .ss-upload-panel,
body.signshi-view-prompt-tool .ss-generate-panel {
  min-width: 0;
  min-height: 650px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.signshi-view-prompt-tool .ss-upload-panel {
  display: flex !important;
  flex-direction: column;
  padding: 24px !important;
}

body.signshi-view-prompt-tool .ss-generate-panel {
  padding: 28px !important;
  border-left: 1px solid #e2eaf2 !important;
}

body.signshi-view-prompt-tool .ss-upload-zone {
  flex: 1;
  min-height: 600px !important;
  border: 1.5px dashed #9bc8f2 !important;
  border-radius: 22px !important;
  color: #5f7087 !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(22, 134, 255, 0.12), transparent 30%),
    radial-gradient(circle at 82% 82%, rgba(117, 95, 255, 0.08), transparent 34%),
    #f4f9ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

body.signshi-view-prompt-tool .ss-upload-zone:hover {
  border-color: #61adf4 !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(22, 134, 255, 0.16), transparent 30%),
    radial-gradient(circle at 82% 82%, rgba(117, 95, 255, 0.1), transparent 34%),
    #eef7ff !important;
}

body.signshi-view-prompt-tool .ss-upload-zone span {
  color: #ffffff !important;
  background: linear-gradient(180deg, #2ba7ff 0%, #1686ff 100%) !important;
  box-shadow: 0 12px 28px rgba(22, 134, 255, 0.24) !important;
}

body.signshi-view-prompt-tool .ss-upload-zone strong {
  color: #142033 !important;
}

body.signshi-view-prompt-tool .ss-upload-zone em {
  color: #65778f !important;
}

body.signshi-view-prompt-tool .ss-preview-card {
  flex: 1;
  min-height: 600px !important;
  border: 1.5px solid #b8d7f3 !important;
  border-radius: 22px !important;
  background: #f4f9ff !important;
  box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-preview-card img {
  background: #f4f9ff !important;
}

body.signshi-view-prompt-tool .ss-preview-card .ss-outline {
  color: #126fe8 !important;
  border: 1px solid #8fc9ff !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 8px 22px rgba(18, 111, 232, 0.13) !important;
  backdrop-filter: blur(12px);
}

body.signshi-view-prompt-tool .ss-preview-card .ss-outline:hover {
  color: #ffffff !important;
  border-color: #1686ff !important;
  background: #1686ff !important;
}

body.signshi-view-prompt-tool .ss-tool-options {
  gap: 16px !important;
  margin-bottom: 18px !important;
}

body.signshi-view-prompt-tool .ss-tool-options label,
body.signshi-view-prompt-tool .ss-output-label {
  gap: 9px !important;
  color: #1686ff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body.signshi-view-prompt-tool .ss-tool-options select,
body.signshi-view-prompt-tool .ss-output-label textarea {
  color: #142033 !important;
  border: 1px solid #d7e4f0 !important;
  border-radius: 14px !important;
  background: #f8fbff !important;
  box-shadow: none !important;
  font: inherit;
}

body.signshi-view-prompt-tool .ss-tool-options select {
  height: 46px !important;
}

body.signshi-view-prompt-tool .ss-output-label textarea {
  min-height: 270px;
}

body.signshi-view-prompt-tool .ss-output-label textarea::placeholder {
  color: #7c8da3 !important;
}

body.signshi-view-prompt-tool .ss-tool-options select:focus,
body.signshi-view-prompt-tool .ss-output-label textarea:focus {
  border-color: #72b8f6 !important;
  box-shadow: 0 0 0 3px rgba(22, 134, 255, 0.12) !important;
}

body.signshi-view-prompt-tool .ss-generate-btn,
body.signshi-view-prompt-tool .ss-tool-actions .ss-outline,
body.signshi-view-prompt-tool .ss-preview-card .ss-outline {
  min-height: 46px;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

body.signshi-view-prompt-tool .ss-generate-btn:not(:disabled) {
  color: #ffffff !important;
  border: 1px solid #1686ff !important;
  background: linear-gradient(180deg, #2ba7ff 0%, #1686ff 100%) !important;
  box-shadow: 0 12px 28px rgba(22, 134, 255, 0.24) !important;
}

body.signshi-view-prompt-tool .ss-generate-btn:not(:disabled):hover {
  background: linear-gradient(180deg, #168ff5 0%, #0c70dc 100%) !important;
  box-shadow: 0 14px 32px rgba(22, 134, 255, 0.3) !important;
}

body.signshi-view-prompt-tool .ss-generate-btn:disabled {
  color: #7b8794 !important;
  border: 1px solid #d6dde5 !important;
  background: #e4e9ef !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

body.signshi-view-prompt-tool .ss-usage-card {
  margin-top: 16px !important;
  border: 1px solid #e2eaf2 !important;
  border-radius: 16px !important;
  background: #f7faff !important;
  box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-usage-card strong {
  color: #1686ff !important;
}

body.signshi-view-prompt-tool .ss-usage-card span,
body.signshi-view-prompt-tool .ss-usage-card small,
body.signshi-view-prompt-tool .ss-tool-status {
  color: #65778f !important;
}

body.signshi-view-prompt-tool .ss-tool-actions {
  align-items: center;
  gap: 12px !important;
  margin-top: 14px !important;
}

body.signshi-view-prompt-tool .ss-tool-actions .ss-outline {
  color: #126fe8 !important;
  border: 1px solid #8fc9ff !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-tool-actions .ss-outline:hover {
  color: #ffffff !important;
  border-color: #1686ff !important;
  background: #1686ff !important;
  box-shadow: 0 10px 24px rgba(22, 134, 255, 0.2) !important;
}

body.signshi-view-prompt-tool .ss-tool-actions .ss-outline:disabled,
body.signshi-view-prompt-tool .ss-tool-actions .ss-outline[disabled] {
  color: #7b8794 !important;
  border-color: #d6dde5 !important;
  background: #e4e9ef !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

@media (max-width: 820px) {
  body.signshi-view-prompt-tool .ss-tool-shell {
    width: calc(100% - 24px) !important;
    margin: 12px auto 56px !important;
    border-radius: 26px !important;
  }

  body.signshi-view-prompt-tool .ss-tool-hero {
    min-height: 260px !important;
    display: grid !important;
    align-content: end;
    justify-items: start;
    gap: 18px !important;
    padding: 24px 20px !important;
  }

  body.signshi-view-prompt-tool .ss-tool-hero h1 {
    font-size: clamp(38px, 12vw, 54px) !important;
  }

  body.signshi-view-prompt-tool .ss-image-tool {
    grid-template-columns: 1fr !important;
  }

  body.signshi-view-prompt-tool .ss-upload-panel,
  body.signshi-view-prompt-tool .ss-generate-panel {
    min-height: auto !important;
    padding: 20px !important;
  }

  body.signshi-view-prompt-tool .ss-generate-panel {
    border-left: 0 !important;
    border-top: 1px solid #e2eaf2 !important;
  }

  body.signshi-view-prompt-tool .ss-upload-zone,
  body.signshi-view-prompt-tool .ss-preview-card {
    min-height: 360px !important;
  }

  body.signshi-view-prompt-tool .ss-tool-options {
    grid-template-columns: 1fr !important;
  }

  body.signshi-view-prompt-tool .ss-tool-actions > * {
    flex: 1 1 180px;
    justify-content: center;
  }
}

/* Motion library inspiration cards. */
.signshi-view-gallery .ss-inspiration-shell {
  --ss-inspiration-gap: 18px;
  width: min(1880px, calc(100% - 32px)) !important;
  margin: 24px auto 82px !important;
  padding: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 36px !important;
  background:
    radial-gradient(circle at 6% 0%, rgba(255, 255, 255, 0.84), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(244, 249, 255, 0.86)) !important;
  box-shadow: 0 30px 90px rgba(45, 76, 104, 0.16) !important;
  backdrop-filter: blur(20px) saturate(1.12);
}

.signshi-view-gallery .ss-discovery-hero {
  margin-bottom: 18px !important;
  padding: 18px !important;
  border-radius: 30px !important;
  background: rgba(239, 247, 255, 0.82) !important;
}

.signshi-view-gallery .ss-feature-shortcuts,
.signshi-view-gallery .ss-gallery-layout {
  gap: 18px !important;
}

.signshi-view-gallery .ss-feature-shortcuts {
  margin-bottom: 18px !important;
}

.signshi-view-gallery .ss-gallery-layout {
  grid-template-columns: 1fr !important;
}

.signshi-view-gallery .ss-gallery-rail {
  position: static !important;
}

.signshi-view-gallery .ss-gallery-rail__panel {
  display: grid !important;
  grid-template-columns: minmax(190px, 0.7fr) minmax(0, 1.8fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px !important;
}

.signshi-view-gallery .ss-gallery-rail__panel h2,
.signshi-view-gallery .ss-gallery-rail__panel p {
  margin: 0 !important;
}

.signshi-view-gallery .ss-trend-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px !important;
}

.signshi-view-gallery .ss-trend-card {
  min-width: 0;
}

.signshi-view-gallery .ss-gallery-main > .ss-masonry {
  --ss-masonry-gap: 14px;
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  columns: auto !important;
  column-gap: var(--ss-masonry-gap) !important;
  row-gap: var(--ss-masonry-gap) !important;
}

.signshi-view-gallery .ss-gallery-main > .ss-masonry .ss-masonry-card {
  position: relative;
  isolation: isolate;
  overflow: hidden !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  border: 1px solid rgba(214, 231, 246, 0.9) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(35, 67, 98, 0.12) !important;
  transform: translateY(0) translateZ(0) !important;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease !important;
}

.signshi-view-gallery .ss-masonry-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: initial !important;
  transform: scale(1) translateZ(0);
  transform-origin: center;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms ease !important;
}

.signshi-view-gallery .ss-gallery-main > .ss-masonry .ss-masonry-card:hover {
  border-color: rgba(22, 134, 255, 0.52) !important;
  box-shadow:
    0 18px 42px rgba(35, 67, 98, 0.16),
    0 0 0 1px rgba(22, 134, 255, 0.12),
    0 0 34px rgba(22, 134, 255, 0.16) !important;
  transform: translateY(-5px) translateZ(0) !important;
}

.signshi-view-gallery .ss-masonry-card:hover img {
  transform: scale(1.035) translateZ(0);
  filter: saturate(1.05) contrast(1.02);
}

.signshi-view-gallery .ss-masonry-card__shade {
  inset: auto 0 0 0 !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 9px 10px !important;
  background:
    linear-gradient(90deg, rgba(8, 14, 25, 0.9) 0%, rgba(14, 52, 94, 0.84) 100%) !important;
  opacity: 1 !important;
  transform: none !important;
  transition: background 220ms ease !important;
}

.signshi-view-gallery .ss-masonry-card__meta {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  display: flex !important;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #d9ecff !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

.signshi-view-gallery .ss-masonry-card__shade strong {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: unset;
  color: #ffffff !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.38);
}

.signshi-view-gallery .ss-masonry-card__shade em {
  flex: 0 0 auto;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(225, 238, 252, 0.78) !important;
  font-size: 9px !important;
  font-style: normal !important;
  line-height: 1.1 !important;
}

.signshi-view-gallery .ss-card-action {
  flex: 0 0 auto;
  min-height: 26px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(126, 202, 255, 0.78) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%),
    #1686ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 10px 22px rgba(22, 134, 255, 0.28) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em;
}

.signshi-view-gallery .ss-card-action:hover {
  border-color: rgba(170, 220, 255, 0.9) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 45%),
    #0f72df !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 12px 26px rgba(22, 134, 255, 0.34) !important;
}

.signshi-view-gallery .ss-card-action svg {
  width: 11px !important;
  height: 11px !important;
}

@media (max-width: 1380px) {
  .signshi-view-gallery .ss-gallery-main > .ss-masonry {
    --ss-masonry-gap: 14px;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    columns: auto !important;
  }
}

@media (max-width: 900px) {
  .signshi-view-gallery .ss-gallery-main > .ss-masonry {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    columns: auto !important;
  }
}

@media (max-width: 760px) {
  .signshi-view-gallery .ss-inspiration-shell {
    width: auto !important;
    margin: 12px 12px 56px !important;
    padding: 12px !important;
    border-radius: 28px !important;
  }

  .signshi-view-gallery .ss-discovery-hero {
    padding: 12px !important;
    border-radius: 24px !important;
  }

  .signshi-view-gallery .ss-gallery-main > .ss-masonry {
    --ss-masonry-gap: 14px;
    grid-template-columns: 1fr !important;
    columns: 1 100% !important;
    column-gap: 0 !important;
  }

  .signshi-view-gallery .ss-gallery-main > .ss-masonry .ss-masonry-card {
    border-radius: 20px !important;
  }

  .signshi-view-gallery .ss-masonry-card__shade {
    padding: 10px 12px !important;
  }
}

/* White PromptHero-inspired redesign. */
:root {
  --ss-white-page: #f7f8fb;
  --ss-white-card: #ffffff;
  --ss-ink: #101a2e;
  --ss-ink-soft: #52657f;
  --ss-ink-faint: #8392a8;
  --ss-line-soft: #e6edf6;
  --ss-blue-strong: #2563ff;
  --ss-blue-fresh: #178bff;
  --ss-violet-fresh: #7c3df0;
  --ss-soft-shadow: 0 24px 70px rgba(20, 42, 75, 0.08);
}

body.signshi-body {
  background: var(--ss-white-page) !important;
  color: var(--ss-ink) !important;
}

body.signshi-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(37, 99, 255, 0.08), transparent 28%),
    radial-gradient(circle at 92% 12%, rgba(124, 61, 240, 0.08), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f7f8fb 42%, #f3f6fb 100%);
}

.ss-header {
  padding: 10px 0 !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 12px 42px rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
}

.ss-nav {
  width: min(1780px, calc(100% - 48px)) !important;
  min-height: 52px !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.ss-nav__links {
  flex: 1 1 auto !important;
  gap: 8px !important;
  justify-content: center !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  scrollbar-width: none;
}

.ss-nav__links::-webkit-scrollbar {
  display: none;
}

.ss-nav__links a {
  flex: 0 0 auto !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  color: #526174 !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  letter-spacing: -0.01em !important;
}

.ss-nav__links a:hover,
.ss-nav__links a[aria-current="page"] {
  color: var(--ss-blue-strong) !important;
  background: rgba(37, 99, 255, 0.08) !important;
}

.ss-brand__logo {
  height: 34px !important;
}

.ss-brand__mark {
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.ss-search {
  min-width: 46px !important;
  width: 46px !important;
  height: 40px !important;
  padding: 0 !important;
  justify-content: center !important;
  background: #f2f5fa !important;
  color: #708198 !important;
}

.ss-search input,
.ss-search__scope {
  display: none !important;
}

.ss-login-btn,
.ss-publish-btn,
.ss-primary,
.ss-outline,
.ss-tool-actions a,
.ss-tool-actions button,
.ss-white-tool-panel button,
.ss-white-tool-panel a {
  border-radius: 14px !important;
  font-weight: 820 !important;
  letter-spacing: -0.01em !important;
}

.ss-primary,
.ss-publish-btn,
.ss-search__submit {
  border: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--ss-blue-strong), var(--ss-violet-fresh)) !important;
  box-shadow: 0 14px 30px rgba(37, 99, 255, 0.24) !important;
}

.ss-primary:hover,
.ss-publish-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(37, 99, 255, 0.3) !important;
}

.ss-outline,
.ss-login-btn,
.ss-outline--blue {
  border: 1px solid #b8ccff !important;
  color: var(--ss-blue-strong) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.ss-outline:hover,
.ss-login-btn:hover,
.ss-outline--blue:hover {
  border-color: var(--ss-blue-strong) !important;
  background: #f6f9ff !important;
  color: #174fe0 !important;
}

button:disabled,
.ss-primary:disabled,
.ss-outline:disabled,
.ss-generate-btn:disabled {
  border-color: #d8e0eb !important;
  color: #8a98aa !important;
  background: #eef2f7 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.ss-white-home {
  width: min(1780px, calc(100% - 48px));
  margin: 0 auto;
  padding: 18px 0 82px;
  color: var(--ss-ink);
}

.ss-white-home__workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 620px);
  gap: 18px;
  align-items: start;
}

.ss-white-home__main,
.ss-white-tool-panel,
.ss-white-detail-preview,
.ss-white-chat-preview {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(230, 237, 246, 0.92);
  box-shadow: var(--ss-soft-shadow);
}

.ss-white-home__main {
  border-radius: 24px;
  padding: 0 0 18px;
  overflow: hidden;
}

.ss-white-hero {
  position: relative;
  isolation: isolate;
  min-height: 300px;
  display: flex;
  align-items: center;
  padding: 44px 64px;
  overflow: hidden;
  border-radius: 22px 22px 18px 18px;
  background-image:
    linear-gradient(90deg, rgba(5, 9, 18, 0.78) 0%, rgba(5, 9, 18, 0.52) 34%, rgba(5, 9, 18, 0.08) 78%),
    var(--ss-gallery-hero-image);
  background-size: cover;
  background-position: center;
}

.ss-white-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 72% 52%, rgba(255, 119, 57, 0.24), transparent 32%),
    linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.28) 100%);
}

.ss-white-hero__copy {
  width: min(620px, 62%);
}

.ss-white-hero__copy > span {
  display: none !important;
}

.ss-white-hero__copy > span,
.ss-white-tool-panel header > span,
.ss-white-detail-preview__copy > span,
.ss-white-chat-preview header span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ss-blue-strong);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.ss-white-hero h1 {
  max-width: 620px;
  margin: 16px 0 12px;
  color: #ffffff;
  font-size: clamp(44px, 4.6vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.ss-white-hero p {
  max-width: 520px;
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  line-height: 1.7;
}

.ss-white-hero .ss-discovery-search {
  width: min(690px, 100%);
  min-height: 48px;
  margin: 0;
  padding: 5px 5px 5px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 46px rgba(7, 13, 28, 0.28);
}

.ss-white-hero .ss-discovery-search svg {
  width: 18px;
  height: 18px;
  color: var(--ss-blue-strong);
}

.ss-white-hero .ss-discovery-search input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ss-ink);
  font-size: 14px;
}

.ss-white-hero .ss-discovery-search button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--ss-blue-strong), var(--ss-violet-fresh));
  box-shadow: 0 12px 24px rgba(37, 99, 255, 0.28);
}

.ss-white-hero .ss-discovery-search button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ss-white-chip-row {
  display: flex !important;
  align-items: center;
  gap: 9px !important;
  margin: 16px 16px 18px !important;
  overflow-x: auto;
  scrollbar-width: none;
}

.ss-white-chip-row::-webkit-scrollbar {
  display: none;
}

.ss-white-chip-row a {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px !important;
  border: 1px solid var(--ss-line-soft) !important;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #516176 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.ss-white-chip-row a.is-active,
.ss-white-chip-row a:hover {
  border-color: rgba(37, 99, 255, 0.28) !important;
  color: var(--ss-blue-strong) !important;
  background: #f3f7ff !important;
}

.ss-white-gallery {
  padding: 0 16px;
}

.ss-white-gallery__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
}

.ss-white-gallery__head h2 {
  margin: 0;
  color: var(--ss-ink);
  font-size: 18px;
  letter-spacing: -0.025em;
}

.ss-white-gallery__head span {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--ss-line-soft);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #65758a;
  background: #ffffff;
  font-size: 12px;
  font-weight: 720;
}

.ss-white-home .ss-gallery-main > .ss-masonry {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  columns: auto !important;
  column-gap: 14px !important;
}

.ss-white-home .ss-masonry-card.ss-white-card {
  position: relative;
  isolation: isolate;
  min-height: 0;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #0c1220 !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.13) !important;
  transform: translateY(0) translateZ(0) !important;
  transition: transform 220ms ease, box-shadow 220ms ease !important;
}

.ss-white-home .ss-masonry-card.ss-white-card:hover {
  transform: translateY(-3px) translateZ(0) !important;
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.18) !important;
}

.ss-white-home .ss-masonry-card.ss-white-card img {
  width: 100% !important;
  height: 214px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  transform: scale(1) translateZ(0);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms ease !important;
}

.ss-white-home .ss-masonry-card.ss-white-card:hover img {
  transform: scale(1.045) translateZ(0);
  filter: saturate(1.04) contrast(1.02);
}

.ss-white-home .ss-masonry-card__shade {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  min-height: 56% !important;
  padding: 44px 10px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  gap: 8px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(3, 7, 16, 0.58) 40%, rgba(3, 7, 16, 0.94) 100%) !important;
  opacity: 1 !important;
  transform: none !important;
}

.ss-white-card__topline {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  font-size: 9px;
  font-weight: 860;
  line-height: 1;
}

.ss-white-home .ss-masonry-card__meta {
  display: block !important;
  min-height: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.ss-white-home .ss-masonry-card__meta strong {
  display: block !important;
  overflow: hidden;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-white-home .ss-masonry-card__meta em {
  display: block !important;
  margin-top: 4px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 10px !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-white-card__stats {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 720;
}

.ss-white-card__stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ss-white-card__stats svg {
  width: 11px;
  height: 11px;
}

.ss-white-empty {
  grid-column: 1 / -1;
  min-height: 260px;
  display: grid;
  place-items: center;
  justify-items: center;
  padding: 34px;
  border: 1px dashed #cdd8e8;
  border-radius: 18px;
  color: var(--ss-ink-soft);
  background: #f8fbff;
  text-align: center;
}

.ss-white-tool-panel {
  position: sticky;
  top: 88px;
  border-radius: 24px;
  padding: 22px;
}

.ss-white-tool-panel header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  margin-bottom: 22px;
}

.ss-white-tool-panel header > span {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  justify-content: center;
  background: #eef4ff;
}

.ss-white-tool-panel h2 {
  margin: 2px 0 6px;
  color: var(--ss-ink);
  font-size: 20px;
  letter-spacing: -0.035em;
}

.ss-white-tool-panel p {
  margin: 0;
  color: var(--ss-ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.ss-white-tool-panel header strong {
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--ss-blue-strong);
  background: #f2f6ff;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.ss-white-tool-panel__body {
  display: grid;
  grid-template-columns: minmax(156px, 0.82fr) minmax(0, 1.18fr);
  gap: 22px;
}

.ss-white-upload {
  min-width: 0;
}

.ss-white-tool-panel .ss-upload-zone {
  min-height: 510px !important;
  height: 100%;
  border: 1px dashed #cbd8e8 !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ss-ink-soft) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(37, 99, 255, 0.08), transparent 26%),
    #fbfdff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7) !important;
}

.ss-white-tool-panel .ss-upload-zone span {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ss-blue-strong);
  background: #edf4ff;
}

.ss-white-tool-panel .ss-upload-zone strong {
  color: var(--ss-ink);
  font-size: 14px;
  font-weight: 850;
}

.ss-white-tool-panel .ss-upload-zone em {
  color: var(--ss-ink-faint);
  font-size: 11px;
  font-style: normal;
  line-height: 1.55;
  text-align: center;
}

.ss-white-tool-panel .ss-preview-card {
  min-height: 510px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 12px;
  padding: 0;
  border: 1px solid #dbe5f1;
  border-radius: 16px;
  overflow: hidden;
  background: #fbfdff;
}

.ss-white-tool-panel .ss-preview-card[hidden] {
  display: none !important;
}

.ss-white-tool-panel .ss-preview-card img {
  width: 100%;
  height: 100%;
  min-height: 450px;
  object-fit: cover;
}

.ss-white-tool-panel .ss-preview-card button {
  margin: 0 14px 14px;
  min-height: 42px;
}

.ss-white-generator {
  min-width: 0;
}

.ss-white-generator .ss-tool-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.ss-white-generator label {
  color: #748197;
  font-size: 11px;
  font-weight: 820;
}

.ss-white-generator select,
.ss-white-generator textarea {
  width: 100%;
  margin-top: 7px;
  border: 1px solid #d8e4f1 !important;
  border-radius: 12px !important;
  color: var(--ss-ink) !important;
  background: #fbfdff !important;
  box-shadow: none !important;
}

.ss-white-generator select {
  height: 44px;
  padding: 0 12px;
}

.ss-white-generator .ss-generate-btn {
  width: 100%;
  min-height: 48px;
  margin-bottom: 14px;
}

.ss-white-tool-panel .ss-generate-btn:disabled {
  border: 1px solid #d8e0eb !important;
  color: #8a98aa !important;
  background: #eef2f7 !important;
  box-shadow: none !important;
}

.ss-white-generator .ss-usage-card {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.ss-white-generator .ss-usage-card strong {
  color: var(--ss-blue-strong);
}

.ss-white-generator .ss-usage-card span,
.ss-white-generator .ss-usage-card small,
.ss-white-generator .ss-tool-status {
  color: var(--ss-ink-soft);
  font-size: 11px;
}

.ss-white-generator .ss-output-label {
  display: block;
  margin-top: 14px;
}

.ss-white-generator textarea {
  min-height: 238px;
  padding: 16px;
  resize: vertical;
}

.ss-white-generator .ss-tool-actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.ss-white-generator .ss-tool-actions > * {
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ss-white-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.92fr);
  gap: 18px;
  margin-top: 18px;
}

.ss-white-detail-preview,
.ss-white-chat-preview {
  border-radius: 18px;
  padding: 18px;
}

.ss-white-detail-preview {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 0.8fr) minmax(220px, 0.55fr);
  gap: 20px;
}

.ss-white-detail-preview__media > img {
  width: 100%;
  height: 260px;
  border-radius: 14px;
  object-fit: cover;
}

.ss-white-detail-preview__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.ss-white-detail-preview__thumbs img {
  height: 50px;
  border: 2px solid #ffffff;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.ss-white-detail-preview__copy h2 {
  margin: 10px 0 6px;
  color: var(--ss-ink);
  font-size: 24px;
  letter-spacing: -0.04em;
}

.ss-white-detail-preview__tag {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--ss-blue-strong) !important;
  background: #f2f6ff;
  font-size: 11px !important;
  font-weight: 820;
}

.ss-white-detail-preview__copy p:not(.ss-white-detail-preview__tag) {
  max-height: 136px;
  overflow: hidden;
  color: var(--ss-ink-soft);
  font-size: 12px;
  line-height: 1.7;
}

.ss-white-detail-preview__copy a {
  min-height: 40px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ss-white-detail-preview__specs {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--ss-line-soft);
  border-radius: 14px;
  display: grid;
  gap: 12px;
  align-self: stretch;
}

.ss-white-detail-preview__specs div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ss-white-detail-preview__specs dt {
  color: var(--ss-ink-soft);
  font-size: 11px;
}

.ss-white-detail-preview__specs dd {
  margin: 0;
  color: var(--ss-ink);
  font-size: 11px;
  font-weight: 760;
  text-align: right;
}

.ss-white-chat-preview {
  min-width: 0;
}

.ss-white-chat-preview header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.ss-white-chat-preview h2 {
  margin: 6px 0 0;
  color: var(--ss-ink);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.5;
}

.ss-white-chat-preview header a {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ss-white-chat-preview__grid {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 120px;
  min-height: 270px;
  border: 1px solid var(--ss-line-soft);
  border-radius: 14px;
  overflow: hidden;
}

.ss-white-chat-preview__grid aside {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fbfdff;
  color: var(--ss-ink-soft);
  font-size: 11px;
}

.ss-white-chat-preview__grid aside strong {
  color: var(--ss-ink);
  font-size: 12px;
}

.ss-white-chat-preview__grid aside span {
  padding: 7px 9px;
  border-radius: 9px;
}

.ss-white-chat-preview__grid aside span.is-active {
  color: var(--ss-blue-strong);
  background: #eef4ff;
  font-weight: 820;
}

.ss-white-chat-preview__feed {
  padding: 14px;
  border-inline: 1px solid var(--ss-line-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ss-white-chat-preview__feed p {
  margin: 0;
  display: grid;
  gap: 2px;
  color: var(--ss-ink-soft);
  font-size: 11px;
}

.ss-white-chat-preview__feed strong {
  color: var(--ss-ink);
}

.ss-white-chat-preview__feed div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ss-white-chat-preview__feed img {
  height: 72px;
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.ss-prompt-modal {
  z-index: 120;
}

body.signshi-view-prompt-tool .ss-tool-shell,
body.signshi-view-chatroom .ss-chat-shell,
body.signshi-view-membership .ss-membership-shell,
body.signshi-view-dashboard .ss-dashboard,
.ss-prompt-page {
  width: min(1500px, calc(100% - 48px)) !important;
  margin: 18px auto 82px !important;
}

body.signshi-view-prompt-tool .ss-tool-hero,
body.signshi-view-chatroom .ss-chat-hero,
.ss-membership-hero {
  border-radius: 24px !important;
  box-shadow: var(--ss-soft-shadow) !important;
}

@media (max-width: 1500px) {
  .ss-white-home {
    width: min(1400px, calc(100% - 36px));
  }

  .ss-white-home__workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss-white-tool-panel {
    position: static;
  }
}

@media (max-width: 1120px) {
  .ss-white-home .ss-gallery-main > .ss-masonry {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .ss-white-detail-preview,
  .ss-white-lower-grid,
  .ss-white-tool-panel__body {
    grid-template-columns: 1fr;
  }

  .ss-white-tool-panel .ss-upload-zone,
  .ss-white-tool-panel .ss-preview-card {
    min-height: 360px !important;
  }
}

@media (max-width: 760px) {
  .ss-nav {
    width: calc(100% - 24px) !important;
    min-height: auto !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px 14px !important;
    padding: 4px 0 10px !important;
    white-space: normal !important;
  }

  .ss-brand {
    order: 1;
  }

  .ss-search,
  .ss-publish-btn,
  .ss-auth {
    display: none !important;
  }

  .ss-nav__links {
    order: 3;
    width: 100%;
    flex: 0 0 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  .ss-white-home {
    width: calc(100% - 24px);
    padding-top: 12px;
  }

  .ss-white-home__main,
  .ss-white-tool-panel,
  .ss-white-detail-preview,
  .ss-white-chat-preview {
    border-radius: 20px;
  }

  .ss-white-hero {
    min-height: 440px;
    padding: 30px 22px;
    align-items: flex-end;
    background-position: center;
  }

  .ss-white-hero__copy {
    width: 100%;
    max-width: 100%;
  }

  .ss-white-hero h1 {
    max-width: 310px;
    font-size: 34px;
    line-height: 1.02;
    overflow-wrap: normal;
  }

  .ss-white-hero p {
    max-width: 300px;
    font-size: 14px;
  }

  .ss-white-hero .ss-discovery-search {
    width: 100%;
    min-height: 46px;
    padding-left: 14px;
  }

  .ss-white-hero .ss-discovery-search input {
    font-size: 13px;
  }

  .ss-white-hero .ss-discovery-search button {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .ss-white-gallery__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .ss-white-home .ss-gallery-main > .ss-masonry {
    grid-template-columns: 1fr !important;
  }

  .ss-white-home .ss-masonry-card.ss-white-card img {
    height: 280px !important;
  }

  .ss-white-tool-panel {
    padding: 16px;
  }

  .ss-white-tool-panel header {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .ss-white-tool-panel header strong {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .ss-white-generator .ss-tool-options,
  .ss-white-generator .ss-tool-actions,
  .ss-white-chat-preview__grid {
    grid-template-columns: 1fr;
  }

  .ss-white-chat-preview__feed {
    border-inline: 0;
    border-block: 1px solid var(--ss-line-soft);
  }

  .ss-white-detail-preview {
    gap: 16px;
  }
}

/* White PromptHero-inspired redesign. Inspiration-only layout revision. */
body.signshi-body {
  background: #ffffff !important;
}

.ss-header {
  border-bottom: 1px solid #e8edf5 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: none !important;
}

.ss-header--gallery .ss-nav {
  width: min(1880px, calc(100% - 48px)) !important;
  min-height: 72px !important;
}

.ss-header--gallery .ss-nav__links {
  justify-content: center !important;
  gap: 22px !important;
}

.ss-header--gallery .ss-search {
  width: min(370px, 28vw) !important;
  min-width: 280px !important;
  height: 40px !important;
  margin-left: auto !important;
  padding: 0 12px !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border: 1px solid #e2e8f3 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.ss-header--gallery .ss-search input,
.ss-header--gallery .ss-search__scope {
  display: block !important;
}

.ss-header--gallery .ss-search__submit {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  margin-left: auto !important;
  color: #0f1a2e !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ss-white-home--inspiration-only {
  width: min(1880px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  padding: 0 0 70px !important;
}

.ss-white-chip-row--top {
  height: 50px;
  margin: 0 !important;
  padding: 0 18px !important;
  border-bottom: 1px solid #edf2f8;
  display: flex !important;
  align-items: center;
  gap: 36px !important;
  overflow-x: auto;
  scrollbar-width: none;
}

.ss-white-chip-row--top a {
  min-height: 50px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  position: relative;
  color: #506179 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.ss-white-chip-row--top a.is-active,
.ss-white-chip-row--top a:hover {
  color: var(--ss-blue-strong) !important;
}

.ss-white-chip-row--top a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--ss-blue-strong);
}

.ss-white-chip-row__more {
  margin-left: auto;
}

.ss-white-hero--wide {
  min-height: 348px !important;
  margin: 0 !important;
  padding: 52px 32px 36px !important;
  border-radius: 0 0 3px 3px !important;
  align-items: center !important;
  justify-content: center !important;
  background-image:
    linear-gradient(90deg, rgba(5, 8, 16, 0.08), rgba(5, 8, 16, 0.38) 34%, rgba(5, 8, 16, 0.22) 72%, rgba(5, 8, 16, 0.2)),
    var(--ss-gallery-hero-image) !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.12);
}

.ss-white-hero--wide::after {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.18) 100%) !important;
}

.ss-white-hero--wide .ss-white-hero__copy {
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  text-align: center;
}

.ss-white-hero--wide h1 {
  max-width: none !important;
  margin: 0 0 12px !important;
  font-size: clamp(34px, 3.6vw, 54px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
}

.ss-white-hero--wide p {
  max-width: none !important;
  margin: 0 0 26px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 16px !important;
}

.ss-white-hero--wide .ss-discovery-search {
  width: min(610px, 100%) !important;
  margin: 0 auto !important;
  min-height: 54px !important;
  padding: 6px 6px 6px 20px !important;
}

.ss-white-hero--wide .ss-discovery-search button {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
}

.ss-white-hero__pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.ss-white-hero__pills a {
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffffff;
  background: rgba(14, 18, 30, 0.35);
  backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 820;
}

.ss-white-logo-strip {
  min-height: 68px;
  border-bottom: 1px solid #edf2f8;
  display: grid;
  grid-template-columns: 160px repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 28px;
  padding: 0 260px;
  color: #222b3a;
}

.ss-white-logo-strip span {
  color: #98a4b8;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 12px;
  font-weight: 720;
}

.ss-white-logo-strip strong {
  font-size: 20px;
  line-height: 1;
  font-weight: 950;
  text-align: center;
  letter-spacing: -0.04em;
}

.ss-white-inspiration-board {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  padding: 24px;
}

.ss-white-ranking-panel {
  align-self: start;
  padding: 22px 22px 20px;
  border: 1px solid #e4ebf5;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
}

.ss-white-ranking-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.ss-white-ranking-panel h2 {
  margin: 0;
  color: var(--ss-ink);
  font-size: 16px;
  letter-spacing: -0.02em;
}

.ss-white-ranking-list {
  display: grid;
  gap: 12px;
}

.ss-white-ranking-list a {
  min-height: 52px;
  display: grid;
  grid-template-columns: 30px 54px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 10px;
  padding: 8px;
  border-radius: 12px;
  color: var(--ss-ink);
  background: #fbfcff;
}

.ss-white-ranking-list a > span {
  grid-row: 1 / 3;
  color: var(--ss-blue-strong);
  font-size: 15px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.ss-white-ranking-list img {
  grid-row: 1 / 3;
  width: 54px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
}

.ss-white-ranking-list strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
}

.ss-white-ranking-list em {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  color: #617087;
  background: #eef3f8;
  font-size: 9px;
  font-style: normal;
  font-weight: 760;
}

.ss-white-ranking-list small {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #69788d;
  font-size: 10px;
  white-space: nowrap;
}

.ss-white-ranking-panel__link {
  min-height: 38px;
  margin-top: 20px;
  border: 1px solid #dbe6f6;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  color: var(--ss-blue-strong);
  background: #ffffff;
  font-size: 12px;
  font-weight: 820;
}

.ss-white-gallery-masonry {
  columns: 4 230px !important;
}

.ss-white-home .ss-gallery-main > .ss-white-gallery-masonry {
  display: block !important;
  columns: 4 230px !important;
  column-gap: 18px !important;
  grid-template-columns: initial !important;
  gap: normal !important;
}

.ss-white-home .ss-masonry-card.ss-white-card {
  height: 360px;
  display: inline-block !important;
  break-inside: avoid;
  margin: 0 0 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  vertical-align: top;
}

.ss-white-home .ss-masonry-card.ss-white-card:nth-child(3n + 1) {
  height: 420px;
}

.ss-white-home .ss-masonry-card.ss-white-card:nth-child(4n + 2) {
  height: 300px;
}

.ss-white-home .ss-masonry-card.ss-white-card img {
  height: 100% !important;
}

.ss-white-card__save {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: rgba(6, 10, 18, 0.22);
  backdrop-filter: blur(10px);
}

.ss-white-feature-strip {
  margin: 0 24px;
  padding: 24px 34px;
  border: 1px solid #e4ebf5;
  border-radius: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.05);
}

.ss-white-feature-strip a {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 3px 16px;
  align-items: center;
}

.ss-white-feature-strip span {
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--ss-blue-strong);
  background: #eef4ff;
}

.ss-white-feature-strip strong {
  color: var(--ss-ink);
  font-size: 14px;
  font-weight: 850;
}

.ss-white-feature-strip em {
  color: #68788e;
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
}

.ss-screen-reader {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

@media (max-width: 1500px) {
  .ss-white-logo-strip {
    padding-inline: 80px;
    grid-template-columns: 130px repeat(6, minmax(0, 1fr));
  }

  .ss-white-inspiration-board {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 22px;
  }

  .ss-white-gallery-masonry,
  .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry {
    columns: 3 230px !important;
  }
}

@media (max-width: 980px) {
  .ss-header--gallery .ss-search {
    display: none !important;
  }

  .ss-white-logo-strip {
    padding: 18px 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ss-white-logo-strip span {
    grid-column: 1 / -1;
    text-align: center;
  }

  .ss-white-inspiration-board {
    grid-template-columns: 1fr;
  }

  .ss-white-feature-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ss-white-home--inspiration-only {
    width: calc(100% - 24px) !important;
  }

  .ss-white-chip-row--top {
    height: 46px;
    gap: 24px !important;
    padding: 0 4px !important;
  }

  .ss-white-chip-row__more {
    display: none !important;
  }

  .ss-white-hero--wide {
    min-height: 430px !important;
    padding: 28px 22px !important;
    border-radius: 18px !important;
  }

  .ss-white-hero--wide .ss-white-hero__copy {
    text-align: left;
  }

  .ss-white-hero--wide h1 {
    max-width: 320px !important;
    font-size: 34px !important;
  }

  .ss-white-hero--wide p {
    max-width: 310px !important;
    font-size: 14px !important;
  }

  .ss-white-hero__pills {
    justify-content: flex-start;
  }

  .ss-white-logo-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .ss-white-inspiration-board {
    padding: 18px 0;
  }

  .ss-white-gallery-masonry,
  .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry {
    columns: 1 100% !important;
  }

  .ss-white-home .ss-masonry-card.ss-white-card,
  .ss-white-home .ss-masonry-card.ss-white-card:nth-child(n) {
    height: 360px !important;
  }

  .ss-white-feature-strip {
    margin: 0;
    padding: 18px;
    grid-template-columns: 1fr;
  }
}

.ss-white-home .ss-masonry-card__shade {
  background: linear-gradient(180deg, transparent 0%, rgba(3, 7, 16, 0.52) 42%, rgba(3, 7, 16, 0.94) 100%) !important;
}

.ss-white-card__stats {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 760;
}

.ss-white-card__stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ss-white-card__stats svg {
  width: 11px;
  height: 11px;
}

.ss-header--gallery .ss-brand {
  min-width: 172px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #0b1020 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.ss-header--gallery .ss-brand__logo {
  display: none !important;
}

.ss-header--gallery .ss-brand::before {
  content: "MarsBase";
  color: #070b16;
  font-size: 30px;
  font-weight: 820;
  letter-spacing: -0.055em;
  line-height: 1;
}

.ss-header--gallery .ss-brand::after {
  content: "X";
  margin-left: 1px;
  background: linear-gradient(135deg, #069bff 0%, #2f62ff 46%, #8c2cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 30px;
  font-weight: 820;
  letter-spacing: -0.055em;
  line-height: 1;
}

.ss-header--gallery .ss-login-btn--ghost {
  border: 1px solid #d8e3f7 !important;
  color: #18263d !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.ss-header--gallery .ss-login-btn--primary {
  border: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #1164ff 0%, #7d2cff 100%) !important;
  box-shadow: 0 14px 30px rgba(37, 99, 255, 0.24) !important;
}

.ss-header--gallery .ss-login-btn--ghost:hover {
  border-color: #2f72ff !important;
  color: #1751df !important;
  background: #f6f9ff !important;
}

.ss-header--gallery .ss-login-btn--primary:hover {
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(37, 99, 255, 0.3) !important;
}

.ss-header--gallery .ss-auth {
  position: relative !important;
}

.ss-header--gallery .ss-user-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  z-index: 3000 !important;
  width: 292px !important;
  display: none !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 12px !important;
  border: 1px solid #dbe6f6 !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 54px rgba(15, 42, 85, 0.18) !important;
}

.ss-header--gallery .ss-user-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 30px;
  width: 14px;
  height: 14px;
  border-top: 1px solid #dbe6f6;
  border-left: 1px solid #dbe6f6;
  background: #ffffff;
  transform: rotate(45deg);
}

.ss-header--gallery .ss-user-menu.is-open {
  display: flex !important;
  flex-direction: column !important;
}

.ss-header--gallery .ss-user-menu__profile {
  min-height: 68px;
  padding: 10px 10px 14px !important;
  border-bottom: 1px solid #edf2f8;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.ss-header--gallery .ss-user-menu__avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, #1398ff 0%, #7c2dff 100%);
  background-position: center;
  background-size: cover;
  font-size: 15px;
  font-weight: 900;
}

.ss-header--gallery .ss-user-menu__avatar.has-image {
  color: transparent;
}

.ss-header--gallery .ss-user-menu__identity {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.ss-header--gallery .ss-user-menu__identity strong {
  overflow: hidden;
  color: #101827;
  font-size: 16px;
  font-weight: 880;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-header--gallery .ss-user-menu__identity small {
  color: #73819a;
  font-size: 12px;
  font-weight: 650;
}

.ss-header--gallery .ss-user-menu a,
.ss-header--gallery .ss-user-menu button {
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  color: #14233b !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.ss-header--gallery .ss-user-menu a:first-of-type {
  color: #1f5edb !important;
  background: #f3f7ff !important;
}

.ss-header--gallery .ss-user-menu a:hover,
.ss-header--gallery .ss-user-menu button:hover {
  color: #1f5edb !important;
  background: #f3f7ff !important;
}

.ss-header--gallery .ss-user-menu button[data-auth-logout] {
  color: #e05768 !important;
}

.ss-header--gallery .ss-user-menu button[data-auth-logout]:hover {
  color: #d84055 !important;
  background: #fff4f6 !important;
}

.ss-header--gallery .ss-user-menu svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  color: currentColor !important;
}

.ss-white-hero--wide .ss-discovery-search button {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  flex: 0 0 42px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #256dff 0%, #1e8cff 100%) !important;
  box-shadow: 0 10px 24px rgba(37, 109, 255, 0.26) !important;
}

.ss-white-hero--wide .ss-discovery-search button::before,
.ss-white-hero--wide .ss-discovery-search button::after {
  display: none !important;
}

.ss-white-hero--wide .ss-discovery-search button svg {
  width: 20px !important;
  height: 20px !important;
  color: #ffffff !important;
  stroke: currentColor !important;
}

.ss-white-hero__pills a {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.58) !important;
  background: rgba(11, 15, 26, 0.36) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.32);
}

.ss-white-hero__pills a svg {
  color: #ffffff !important;
  stroke: currentColor !important;
}

.ss-white-logo-strip strong {
  white-space: nowrap;
  font-size: 18px;
}

@media (max-width: 760px) {
  body.signshi-body {
    overflow-x: hidden;
  }

  .ss-white-home--inspiration-only {
    overflow-x: hidden;
  }

  .ss-white-hero--wide .ss-discovery-search {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  .ss-white-hero--wide .ss-discovery-search input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .ss-white-hero--wide .ss-discovery-search button {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
    flex: 0 0 42px !important;
    margin-left: auto !important;
  }

  .ss-white-logo-strip {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px 12px !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
  }

  .ss-white-logo-strip strong {
    min-width: 0;
    font-size: 17px;
    text-align: center;
  }
}

.ss-white-home--inspiration-only {
  width: min(1880px, calc(100% - 20px)) !important;
}

.ss-white-hero--wide {
  border-radius: 0 !important;
}

.ss-white-inspiration-board {
  gap: 10px !important;
  padding: 10px !important;
}

.ss-white-gallery {
  padding: 0 !important;
}

.ss-white-gallery-masonry,
.ss-white-home .ss-gallery-main > .ss-white-gallery-masonry {
  --ss-masonry-gap: 10px !important;
  column-gap: 10px !important;
}

.ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card,
.ss-white-home .ss-masonry-card.ss-white-card {
  margin: 0 0 10px !important;
  border-radius: 0 !important;
  clip-path: inset(0) !important;
}

.ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card img,
.ss-white-home .ss-masonry-card.ss-white-card img {
  border-radius: 0 !important;
  clip-path: inset(0) !important;
}

.ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card .ss-masonry-card__shade,
.ss-white-home .ss-masonry-card__shade {
  inset: auto 0 0 0 !important;
  min-height: 46% !important;
  padding: 64px 14px 14px !important;
  border-radius: 0 !important;
  clip-path: inset(0) !important;
  align-items: flex-end !important;
}

.ss-white-home .ss-masonry-card__meta {
  display: grid !important;
  gap: 6px !important;
  align-items: start !important;
}

.ss-white-home .ss-masonry-card__meta strong {
  max-width: 100% !important;
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
}

.ss-white-home .ss-masonry-card__meta em {
  width: fit-content !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(7, 12, 22, 0.3) !important;
}

.ss-white-card__stats {
  margin-top: 8px !important;
}

@media (max-width: 760px) {
  .ss-white-home--inspiration-only {
    width: calc(100% - 20px) !important;
  }

  .ss-white-inspiration-board {
    padding: 10px 0 !important;
  }

  .ss-white-home .ss-masonry-card.ss-white-card {
    margin-bottom: 10px !important;
  }
}

/* Reference-aligned inspiration card anatomy: stats top-right, copy action bottom-right. */
.signshi-view-gallery .ss-white-card__save,
.ss-white-home .ss-white-card__save {
  display: none !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card,
.ss-white-home .ss-masonry-card.ss-white-card {
  overflow: hidden !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__stats,
.ss-white-home .ss-masonry-card.ss-white-card .ss-white-card__stats {
  position: absolute !important;
  z-index: 5 !important;
  top: 10px !important;
  right: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: rgba(255, 255, 255, 0.96) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.46);
  backdrop-filter: none !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__stats span,
.ss-white-home .ss-masonry-card.ss-white-card .ss-white-card__stats span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__stats svg,
.ss-white-home .ss-masonry-card.ss-white-card .ss-white-card__stats svg {
  width: 11px !important;
  height: 11px !important;
  stroke-width: 2.4 !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-masonry-card__shade,
.ss-white-home .ss-masonry-card.ss-white-card .ss-masonry-card__shade {
  inset: auto 0 0 0 !important;
  min-height: 124px !important;
  padding: 48px 14px 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(4, 8, 16, 0) 0%, rgba(4, 8, 16, 0.32) 34%, rgba(4, 8, 16, 0.94) 100%) !important;
  opacity: 1 !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-masonry-card__meta,
.ss-white-home .ss-masonry-card.ss-white-card .ss-masonry-card__meta {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
  align-items: end !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-masonry-card__meta strong,
.ss-white-home .ss-masonry-card.ss-white-card .ss-masonry-card__meta strong {
  max-width: 100% !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 880 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-masonry-card__meta em,
.ss-white-home .ss-masonry-card.ss-white-card .ss-masonry-card__meta em {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, 0.76) !important;
  background: transparent !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 520 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__prompt-action,
.ss-white-home .ss-masonry-card.ss-white-card .ss-white-card__prompt-action {
  position: relative !important;
  z-index: 6 !important;
  min-width: 92px !important;
  height: 40px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: end !important;
  justify-self: end !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #56c3ff 0%, #2b84ff 100%) !important;
  box-shadow: 0 10px 24px rgba(37, 132, 255, 0.38) !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  user-select: none !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__prompt-action:hover,
.ss-white-home .ss-masonry-card.ss-white-card .ss-white-card__prompt-action:hover,
.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__prompt-action:focus-visible,
.ss-white-home .ss-masonry-card.ss-white-card .ss-white-card__prompt-action:focus-visible {
  background: linear-gradient(135deg, #63caff 0%, #176cff 100%) !important;
  box-shadow: 0 12px 30px rgba(37, 132, 255, 0.48) !important;
  outline: 2px solid rgba(255, 255, 255, 0.76) !important;
  outline-offset: 2px !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__prompt-action.is-copied,
.ss-white-home .ss-masonry-card.ss-white-card .ss-white-card__prompt-action.is-copied {
  background: linear-gradient(135deg, #16b7ff 0%, #1668ff 100%) !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__prompt-action.is-copy-error,
.ss-white-home .ss-masonry-card.ss-white-card .ss-white-card__prompt-action.is-copy-error {
  background: #8a94a7 !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  .signshi-view-gallery .ss-masonry-card.ss-white-card .ss-masonry-card__shade,
  .ss-white-home .ss-masonry-card.ss-white-card .ss-masonry-card__shade {
    min-height: 116px !important;
    padding: 44px 12px 12px !important;
  }

  .signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__prompt-action,
  .ss-white-home .ss-masonry-card.ss-white-card .ss-white-card__prompt-action {
    min-width: 86px !important;
    height: 38px !important;
    padding: 0 14px !important;
  }
}

/* White site-system authentication modal. */
.ss-auth-modal__backdrop {
  background: rgba(15, 23, 42, 0.22) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
}

.ss-auth-card {
  width: min(100%, 430px) !important;
  padding: 28px !important;
  border: 1px solid #e2eaf5 !important;
  border-radius: 22px !important;
  color: #0f1b31 !important;
  background: #ffffff !important;
  box-shadow: 0 32px 90px rgba(15, 23, 42, 0.18) !important;
}

.ss-auth-card__close {
  color: #7b8aa4 !important;
  background: transparent !important;
}

.ss-auth-card__close:hover {
  color: #176cff !important;
  background: #eef6ff !important;
}

.ss-auth-card__head {
  gap: 14px !important;
}

.ss-auth-card__head h2 {
  color: #101a2e !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
}

.ss-auth-card__head p {
  color: #62738f !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.ss-auth-card .ss-brand__mark,
.ss-auth-card .ss-brand__icon {
  background: #ffffff !important;
  box-shadow: 0 10px 28px rgba(37, 109, 255, 0.14) !important;
}

.ss-auth-tabs {
  padding: 4px !important;
  border: 1px solid #dfe8f5 !important;
  background: #f3f7fc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.ss-auth-tabs button {
  color: #64748b !important;
  background: transparent !important;
  font-weight: 760 !important;
}

.ss-auth-tabs button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #238cff 0%, #236dff 100%) !important;
  box-shadow: 0 10px 24px rgba(35, 109, 255, 0.26) !important;
}

.ss-auth-form label {
  color: #21314d !important;
  font-size: 13px !important;
  font-weight: 780 !important;
}

.ss-auth-form input:not([type="checkbox"]) {
  color: #0f1b31 !important;
  border: 1px solid #d8e3f2 !important;
  border-radius: 12px !important;
  background: #f7fbff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

.ss-auth-form input:not([type="checkbox"])::placeholder {
  color: #8a98ae !important;
}

.ss-auth-form input:not([type="checkbox"]):focus {
  border-color: #2b84ff !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(43, 132, 255, 0.14) !important;
}

.ss-auth-form input[type="checkbox"] {
  accent-color: #238cff !important;
}

.ss-auth-form .ss-check,
.ss-auth-form .ss-check span,
.ss-auth-form label.ss-check {
  color: #52657f !important;
}

.ss-auth-form .ss-primary,
.ss-auth-card .ss-primary {
  color: #ffffff !important;
  border: 0 !important;
  background: linear-gradient(135deg, #23a7ff 0%, #236dff 100%) !important;
  box-shadow: 0 14px 32px rgba(35, 109, 255, 0.28) !important;
  font-weight: 850 !important;
}

.ss-auth-form .ss-primary:hover,
.ss-auth-card .ss-primary:hover {
  background: linear-gradient(135deg, #48bdff 0%, #155fff 100%) !important;
}

.ss-auth-message {
  color: #52657f !important;
}

.ss-auth-message.is-error {
  color: #dc2626 !important;
}

.ss-auth-message.is-success {
  color: #147c4f !important;
}

@media (max-width: 560px) {
  .ss-auth-card {
    padding: 22px !important;
    border-radius: 18px !important;
  }
}

/* AI online chat answering page. */
.ss-ai-chat-shell {
  width: min(1780px, calc(100% - 64px));
  margin: 0 auto;
  padding: 28px 0 88px;
  color: #101a2e;
}

.ss-ai-chat-app {
  min-height: min(780px, calc(100vh - 148px));
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #e4edf8;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(22, 50, 92, 0.12);
}

.ss-ai-chat-sidebar {
  min-width: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-right: 1px solid #e4edf8;
  background:
    linear-gradient(180deg, rgba(244, 249, 255, 0.98), rgba(255, 255, 255, 0.98)),
    radial-gradient(circle at 0% 0%, rgba(35, 167, 255, 0.15), transparent 32%);
}

.ss-ai-chat-sidebar__brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.ss-ai-chat-sidebar__brand strong,
.ss-ai-chat-title strong,
.ss-ai-chat-message strong {
  display: block;
  color: #101a2e;
  font-weight: 860;
}

.ss-ai-chat-sidebar__brand strong {
  font-size: 16px;
  letter-spacing: -0.03em;
}

.ss-ai-chat-sidebar__brand span:not(.ss-brand__mark) {
  display: block;
  margin-top: 3px;
  color: #6b7b94;
  font-size: 12px;
  line-height: 1.35;
}

.ss-ai-chat-new {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, #23a7ff 0%, #236dff 52%, #7c3cff 100%);
  box-shadow: 0 15px 32px rgba(35, 109, 255, 0.24);
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.ss-ai-chat-new svg,
.ss-ai-chat-suggestions svg {
  width: 17px;
  height: 17px;
}

.ss-ai-chat-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #6f7d95;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.ss-ai-chat-history-head em {
  color: #176cff;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
}

.ss-ai-chat-history {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 9px;
  padding-right: 2px;
}

.ss-ai-chat-history button {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 12px;
  display: grid;
  gap: 4px;
  color: #52657f;
  background: rgba(255, 255, 255, 0.72);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.ss-ai-chat-history button:hover,
.ss-ai-chat-history button.is-active {
  border-color: #cfe0f7;
  background: #ffffff;
  transform: translateY(-1px);
}

.ss-ai-chat-history strong {
  overflow: hidden;
  color: #162238;
  font-size: 13px;
  font-weight: 830;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-ai-chat-history span {
  overflow: hidden;
  color: #74849b;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-ai-chat-panel {
  min-width: 0;
  min-height: 760px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: #ffffff;
}

.ss-ai-chat-panel__head {
  min-height: 104px;
  padding: 22px 34px;
  border-bottom: 1px solid #dde8f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #ffffff;
}

.ss-ai-chat-title {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.ss-ai-chat-title .ss-brand__mark,
.ss-ai-chat-title .ss-brand__icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
}

.ss-ai-chat-title strong {
  font-size: 21px;
  letter-spacing: -0.04em;
}

.ss-ai-chat-title small {
  display: block;
  margin-top: 4px;
  color: #61718c;
  font-size: 14px;
  line-height: 1.4;
}

.ss-ai-chat-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.ss-ai-chat-model {
  min-height: 36px;
  border: 1px solid rgba(124, 60, 255, 0.42);
  border-radius: 999px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #5d34ff;
  background: rgba(248, 246, 255, 0.9);
  font-size: 14px;
  font-weight: 850;
}

.ss-ai-chat-model svg {
  width: 16px;
  height: 16px;
}

.ss-ai-chat-model select {
  max-width: 180px;
  height: 34px;
  border: 0;
  outline: 0;
  color: #4f2bff;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.ss-ai-chat-online {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid #d5e1f0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  background: #f8fbff;
  font-size: 14px;
  font-weight: 830;
}

.ss-ai-chat-online.is-online {
  border-color: #bff0ca;
  color: #22a745;
  background: #f0fff4;
}

.ss-ai-chat-online svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.2;
}

.ss-ai-chat-online.is-online svg {
  fill: currentColor;
  stroke-width: 0;
}

.ss-ai-chat-log {
  min-height: 0;
  overflow-y: auto;
  padding: clamp(34px, 5vw, 82px) 36px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background:
    radial-gradient(circle at 50% 30%, rgba(35, 109, 255, 0.035), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 70%, #fbfdff 100%);
  scroll-behavior: smooth;
}

.ss-ai-chat-welcome {
  width: min(1050px, 100%);
  margin: auto auto 0;
  text-align: center;
}

.ss-ai-chat-welcome__icon {
  width: 104px;
  height: 104px;
  margin: 0 auto 22px;
  border: 1px solid #e5edf8;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #236dff;
  background: #ffffff;
  box-shadow: 0 16px 45px rgba(22, 50, 92, 0.08);
}

.ss-ai-chat-welcome__icon svg {
  width: 42px;
  height: 42px;
  stroke-width: 2.2;
}

.ss-ai-chat-welcome h1 {
  margin: 0;
  color: #101a2e;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.05em;
  font-weight: 900;
}

.ss-ai-chat-welcome p {
  max-width: 620px;
  margin: 16px auto 0;
  color: #61718c;
  font-size: 15px;
  line-height: 1.75;
}

.ss-ai-chat-suggestions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.ss-ai-chat-suggestions button,
.ss-ai-chat-login {
  min-height: 44px;
  border: 1px solid #d9e5f4;
  border-radius: 999px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #52647f;
  background: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(22, 50, 92, 0.04);
  cursor: pointer;
}

.ss-ai-chat-suggestions button:hover,
.ss-ai-chat-login:hover {
  color: #176cff;
  border-color: #bdd5f5;
}

.ss-ai-chat-login {
  margin-top: 22px;
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #23a7ff 0%, #236dff 52%, #7c3cff 100%);
  box-shadow: 0 14px 32px rgba(35, 109, 255, 0.22);
}

.ss-ai-chat-message {
  max-width: min(780px, 86%);
  padding: 14px 16px;
  border-radius: 18px;
  color: #445775;
  font-size: 14px;
  line-height: 1.6;
}

.ss-ai-chat-message p {
  margin: 6px 0 0;
  white-space: pre-wrap;
}

.ss-ai-chat-message.is-user {
  align-self: flex-end;
  color: #ffffff;
  background: linear-gradient(135deg, #23a7ff, #236dff);
  box-shadow: 0 14px 30px rgba(35, 109, 255, 0.22);
}

.ss-ai-chat-message.is-user strong {
  color: #ffffff;
}

.ss-ai-chat-message.is-ai {
  align-self: flex-start;
  border: 1px solid #e4edf8;
  background: #ffffff;
}

.ss-ai-chat-message.is-pending p::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  animation: ss-ai-chat-dots 1.1s steps(4, end) infinite;
}

.ss-ai-chat-message.is-error {
  align-self: center;
  border: 1px solid #fecaca;
  color: #991b1b;
  background: #fff5f5;
  text-align: left;
}

@keyframes ss-ai-chat-dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%,
  100% { content: "..."; }
}

.ss-ai-chat-compose {
  width: min(1320px, calc(100% - 96px));
  margin: 0 auto 24px;
  border: 1px solid #d7e3f2;
  border-radius: 22px;
  padding: 18px 22px 14px;
  background: #ffffff;
  box-shadow: 0 22px 54px rgba(22, 50, 92, 0.12);
}

.ss-ai-chat-compose textarea {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  border: 0;
  outline: 0;
  color: #101a2e;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1.55;
}

.ss-ai-chat-compose textarea::placeholder {
  color: #8a98ae;
}

.ss-ai-chat-compose textarea:disabled {
  cursor: not-allowed;
}

.ss-ai-chat-compose__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
}

.ss-ai-chat-compose__bar [data-ai-chat-status] {
  color: #7b8aa4;
  font-size: 12px;
  line-height: 1.4;
}

.ss-ai-chat-attach,
.ss-ai-chat-magic {
  display: inline-grid;
  place-items: center;
  color: #6c7b92;
}

.ss-ai-chat-attach svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.1;
}

.ss-ai-chat-magic {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  color: #236dff;
  background: #f1f5ff;
}

.ss-ai-chat-magic svg {
  width: 22px;
  height: 22px;
}

.ss-ai-chat-compose__bar .ss-primary {
  min-width: 132px;
  min-height: 50px;
  border-radius: 15px;
  box-shadow: 0 13px 26px rgba(35, 109, 255, 0.28);
}

.ss-ai-chat-compose__bar .ss-primary:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
}

.ss-ai-chat-secure {
  margin: 0 auto 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #7b8aa4;
  font-size: 13px;
}

.ss-ai-chat-secure svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1180px) {
  .ss-ai-chat-app {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .ss-ai-chat-suggestions button {
    min-height: 40px;
    font-size: 13px;
  }
}

@media (max-width: 980px) {
  .ss-ai-chat-app {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .ss-ai-chat-sidebar {
    border-right: 0;
    border-bottom: 1px solid #e4edf8;
  }

  .ss-ai-chat-history {
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    overflow-x: auto;
  }

  .ss-ai-chat-panel {
    min-height: 760px;
  }

  .ss-ai-chat-compose {
    width: calc(100% - 48px);
  }
}

@media (max-width: 640px) {
  .ss-ai-chat-shell {
    width: calc(100% - 24px);
    padding-top: 18px;
  }

  .ss-ai-chat-app {
    border-radius: 22px;
  }

  .ss-ai-chat-panel__head {
    min-height: auto;
    padding: 18px;
    align-items: stretch;
    flex-direction: column;
  }

  .ss-ai-chat-head-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .ss-ai-chat-title .ss-brand__mark,
  .ss-ai-chat-title .ss-brand__icon {
    width: 48px;
    height: 48px;
  }

  .ss-ai-chat-log {
    padding: 44px 18px 26px;
  }

  .ss-ai-chat-welcome__icon {
    width: 82px;
    height: 82px;
  }

  .ss-ai-chat-compose {
    width: calc(100% - 28px);
    margin-bottom: 16px;
  }

  .ss-ai-chat-compose__bar {
    grid-template-columns: auto 1fr auto;
  }

  .ss-ai-chat-compose__bar .ss-primary {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Inspiration option A: approved single-page gallery pass. */
.ss-white-home--inspiration-only {
  --ss-inspiration-gutter: 10px;
  width: min(1880px, calc(100% - (var(--ss-inspiration-gutter) * 2))) !important;
  margin-inline: auto !important;
  padding: 0 !important;
  color: #101a2e !important;
}

.ss-white-home--inspiration-only .ss-white-chip-row--top {
  margin: 0 0 10px !important;
  padding: 0 12px !important;
  min-height: 52px !important;
  border: 0 !important;
  border-bottom: 1px solid #e7eef8 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.ss-white-home--inspiration-only .ss-white-chip-row--top a {
  min-height: 52px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #53647f !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

.ss-white-home--inspiration-only .ss-white-chip-row--top a.is-active {
  position: relative !important;
  color: #176cff !important;
}

.ss-white-home--inspiration-only .ss-white-chip-row--top a.is-active::after {
  content: "" !important;
  position: absolute !important;
  right: 12px !important;
  bottom: -1px !important;
  left: 12px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #176cff !important;
}

.ss-white-home--inspiration-only .ss-white-hero--wide {
  min-height: clamp(270px, 20vw, 360px) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background-color: #111827 !important;
  box-shadow: none !important;
}

.ss-white-home--inspiration-only .ss-white-hero--wide::before {
  opacity: 0.58 !important;
  background:
    linear-gradient(90deg, rgba(6, 9, 17, 0.74) 0%, rgba(6, 9, 17, 0.4) 43%, rgba(6, 9, 17, 0.72) 100%),
    linear-gradient(180deg, rgba(6, 9, 17, 0.08) 0%, rgba(6, 9, 17, 0.4) 100%) !important;
}

.ss-white-home--inspiration-only .ss-white-hero__copy {
  width: min(820px, calc(100% - 48px)) !important;
  margin-inline: auto !important;
  align-items: center !important;
  text-align: center !important;
}

.ss-white-home--inspiration-only .ss-white-hero__copy h1 {
  max-width: 760px !important;
  color: #ffffff !important;
  font-size: clamp(38px, 4vw, 62px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.06em !important;
  text-shadow: 0 16px 42px rgba(0, 0, 0, 0.34) !important;
}

.ss-white-home--inspiration-only .ss-white-hero__copy p {
  max-width: 680px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: clamp(15px, 1.15vw, 18px) !important;
  line-height: 1.55 !important;
}

.ss-white-home--inspiration-only .ss-discovery-search {
  width: min(650px, 100%) !important;
  min-height: 58px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 999px !important;
  padding: 7px 7px 7px 22px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 22px 58px rgba(6, 9, 17, 0.2) !important;
}

.ss-white-home--inspiration-only .ss-discovery-search input {
  color: #101a2e !important;
  font-size: 15px !important;
  font-weight: 560 !important;
}

.ss-white-home--inspiration-only .ss-discovery-search input::placeholder {
  color: #8b9ab2 !important;
}

.ss-white-home--inspiration-only .ss-discovery-search button {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #23a7ff 0%, #176cff 72%, #7c3cff 100%) !important;
  box-shadow: 0 12px 26px rgba(23, 108, 255, 0.36) !important;
}

.ss-white-home--inspiration-only .ss-white-hero__pills {
  justify-content: center !important;
  gap: 8px !important;
}

.ss-white-home--inspiration-only .ss-white-hero__pills a {
  min-height: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  color: #ffffff !important;
  background: rgba(8, 14, 26, 0.34) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

.ss-white-inspiration-board {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.ss-white-inspiration-board .ss-white-gallery,
.ss-white-inspiration-board .ss-gallery-main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ss-white-gallery-masonry,
.ss-white-home .ss-gallery-main > .ss-white-gallery-masonry,
.signshi-view-gallery .ss-gallery-main > .ss-masonry {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  row-gap: 10px !important;
  column-gap: 10px !important;
  columns: initial !important;
  align-items: start !important;
}

.ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card,
.ss-white-home .ss-masonry-card.ss-white-card,
.signshi-view-gallery .ss-masonry-card.ss-white-card {
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  aspect-ratio: 0.82 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #eef4fb !important;
  box-shadow: none !important;
  break-inside: auto !important;
  clip-path: inset(0) !important;
}

.ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card img,
.ss-white-home .ss-masonry-card.ss-white-card img,
.signshi-view-gallery .ss-masonry-card.ss-white-card img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transform: none !important;
  clip-path: inset(0) !important;
}

.ss-white-home .ss-masonry-card.ss-white-card:hover,
.signshi-view-gallery .ss-masonry-card.ss-white-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14) !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__stats,
.ss-white-home .ss-masonry-card.ss-white-card .ss-white-card__stats {
  top: 10px !important;
  right: 10px !important;
  gap: 8px !important;
  color: rgba(255, 255, 255, 0.96) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5) !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-masonry-card__shade,
.ss-white-home .ss-masonry-card.ss-white-card .ss-masonry-card__shade {
  min-height: 132px !important;
  padding: 54px 14px 14px !important;
  background: linear-gradient(180deg, rgba(4, 8, 16, 0) 0%, rgba(4, 8, 16, 0.34) 34%, rgba(4, 8, 16, 0.95) 100%) !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-masonry-card__meta strong,
.ss-white-home .ss-masonry-card.ss-white-card .ss-masonry-card__meta strong {
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-masonry-card__meta em,
.ss-white-home .ss-masonry-card.ss-white-card .ss-masonry-card__meta em {
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 12px !important;
  font-weight: 540 !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__prompt-action,
.ss-white-home .ss-masonry-card.ss-white-card .ss-white-card__prompt-action {
  min-width: 92px !important;
  height: 40px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #55c2ff 0%, #176cff 100%) !important;
  box-shadow: 0 10px 24px rgba(23, 108, 255, 0.38) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.ss-white-ranking-panel {
  display: none !important;
}

@media (max-width: 1320px) {
  .ss-white-gallery-masonry,
  .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry,
  .signshi-view-gallery .ss-gallery-main > .ss-masonry {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .ss-white-gallery-masonry,
  .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry,
  .signshi-view-gallery .ss-gallery-main > .ss-masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ss-white-home--inspiration-only .ss-white-hero__copy {
    width: min(720px, calc(100% - 32px)) !important;
  }
}

@media (max-width: 560px) {
  .ss-white-home--inspiration-only {
    width: calc(100% - 20px) !important;
  }

  .ss-white-home--inspiration-only .ss-white-chip-row--top {
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }

  .ss-white-home--inspiration-only .ss-white-hero--wide {
    min-height: 430px !important;
  }

  .ss-white-gallery-masonry,
  .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry,
  .signshi-view-gallery .ss-gallery-main > .ss-masonry {
    grid-template-columns: 1fr !important;
  }
}

/* Chat popout option B: compact white GPT-like live room. */
html:has(body.signshi-view-chat-popout),
body.signshi-view-chat-popout {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

body.signshi-view-chat-popout {
  color: #101a2e !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.signshi-view-chat-popout .ss-header,
.signshi-view-chat-popout .ss-floating,
.signshi-view-chat-popout .ss-chat-global-mini,
.signshi-view-chat-popout .ss-auth-modal {
  display: none !important;
}

.signshi-view-chat-popout .site {
  width: 100% !important;
  min-height: 100vh !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(23, 108, 255, 0.1), transparent 30%),
    radial-gradient(circle at 88% 22%, rgba(124, 60, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
}

.signshi-view-chat-popout .ss-chat-popout-shell--option-b {
  width: 100vw !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 24px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
}

.signshi-view-chat-popout .ss-chat-popout-card {
  width: min(980px, calc(100vw - 48px)) !important;
  max-width: none !important;
  min-width: 0 !important;
  height: min(820px, calc(100vh - 48px)) !important;
  min-height: 720px !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid #dce8f7 !important;
  border-radius: 26px !important;
  color: #101a2e !important;
  background: #ffffff !important;
  box-shadow: 0 28px 70px rgba(33, 72, 132, 0.13) !important;
}

.signshi-view-chat-popout .ss-chat-popout-head {
  min-height: 92px !important;
  padding: 20px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  border-bottom: 1px solid #e4edf8 !important;
  background: #ffffff !important;
}

.signshi-view-chat-popout .ss-chat-popout-brand,
.signshi-view-chat-popout .ss-chat-popout-head__actions {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.signshi-view-chat-popout .ss-chat-popout-head .ss-brand__mark,
.signshi-view-chat-popout .ss-chat-popout-head .ss-brand__icon {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  border-radius: 14px !important;
}

.signshi-view-chat-popout .ss-chat-popout-head h1 {
  margin: 0 !important;
  color: #101a2e !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.045em !important;
}

.signshi-view-chat-popout .ss-chat-popout-head p {
  margin: 5px 0 0 !important;
  color: #61718c !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

.signshi-view-chat-popout .ss-chat-popout-online {
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid #bff0ca !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #22a745 !important;
  background: #f0fff4 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.signshi-view-chat-popout .ss-chat-popout-online svg {
  width: 10px !important;
  height: 10px !important;
  fill: currentColor !important;
  stroke-width: 0 !important;
}

.signshi-view-chat-popout .ss-chat-popout-head .ss-icon-btn {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid #dce8f7 !important;
  border-radius: 999px !important;
  color: #6d7d95 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-head .ss-icon-btn:hover {
  color: #176cff !important;
  background: #f2f7ff !important;
}

.signshi-view-chat-popout .ss-chat-popout-joinbar {
  margin: 0 !important;
  padding: 18px 24px !important;
  display: grid !important;
  grid-template-columns: minmax(160px, 1fr) minmax(170px, 220px) minmax(170px, 220px) auto !important;
  align-items: end !important;
  gap: 12px !important;
  border: 0 !important;
  border-bottom: 1px solid #e4edf8 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-joinbar__intro {
  display: grid !important;
  gap: 5px !important;
  align-self: center !important;
}

.signshi-view-chat-popout .ss-chat-popout-joinbar__intro strong {
  color: #101a2e !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

.signshi-view-chat-popout .ss-chat-popout-joinbar__intro span {
  color: #61718c !important;
  font-size: 13px !important;
}

.signshi-view-chat-popout .ss-chat-popout-joinbar label {
  margin: 0 !important;
  display: grid !important;
  gap: 7px !important;
  color: #61718c !important;
  font-size: 12px !important;
  font-weight: 780 !important;
}

.signshi-view-chat-popout .ss-chat-popout-joinbar label > span {
  color: #61718c !important;
}

.signshi-view-chat-popout .ss-chat-popout-joinbar input {
  width: 100% !important;
  height: 44px !important;
  border: 1px solid #d7e3f2 !important;
  border-radius: 14px !important;
  padding: 0 14px !important;
  color: #101a2e !important;
  background: #f8fbff !important;
  font: inherit !important;
  font-size: 14px !important;
  outline: 0 !important;
}

.signshi-view-chat-popout .ss-chat-popout-joinbar input:focus {
  border-color: rgba(23, 108, 255, 0.62) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(23, 108, 255, 0.1) !important;
}

.signshi-view-chat-popout .ss-chat-popout-joinbar .ss-primary {
  min-width: 104px !important;
  height: 44px !important;
  border-radius: 14px !important;
}

.signshi-view-chat-popout .ss-chat-popout-joinbar .ss-chat-status {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  margin: -2px 0 0 !important;
  color: #61718c !important;
  font-size: 12px !important;
}

.signshi-view-chat-popout .ss-chat-popout-shell--option-b.is-connected .ss-chat-popout-joinbar {
  display: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-shell--option-b:not(.is-connected) [data-chat-leave] {
  display: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel,
.signshi-view-chat-popout .ss-chat-popout-panel[hidden] {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #101a2e !important;
  background: transparent !important;
  box-shadow: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head {
  padding: 20px 24px 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  border: 0 !important;
  background: transparent !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head span {
  color: #176cff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head h2 {
  margin: 4px 0 0 !important;
  color: #101a2e !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head p {
  margin: 6px 0 0 !important;
  color: #61718c !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-outline {
  min-height: 36px !important;
  border: 1px solid #d7e3f2 !important;
  border-radius: 999px !important;
  padding: 0 13px !important;
  color: #176cff !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  box-shadow: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-log {
  min-height: 0 !important;
  margin: 0 24px !important;
  padding: 28px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  border: 1px solid #e5edf8 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(23, 108, 255, 0.045), transparent 32%),
    #fbfdff !important;
}

.signshi-view-chat-popout .ss-chat-empty {
  width: min(620px, 100%) !important;
  margin: auto !important;
  display: grid !important;
  justify-items: center !important;
  gap: 12px !important;
  color: #61718c !important;
  text-align: center !important;
}

.signshi-view-chat-popout .ss-chat-empty__icon {
  width: 74px !important;
  height: 74px !important;
  border: 1px solid #e5edf8 !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  color: #176cff !important;
  background: #ffffff !important;
  box-shadow: 0 16px 38px rgba(33, 72, 132, 0.08) !important;
}

.signshi-view-chat-popout .ss-chat-empty__icon svg {
  width: 32px !important;
  height: 32px !important;
}

.signshi-view-chat-popout .ss-chat-empty strong {
  color: #101a2e !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
}

.signshi-view-chat-popout .ss-chat-empty span {
  max-width: 440px !important;
  color: #61718c !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.signshi-view-chat-popout .ss-chat-empty__chips {
  margin-top: 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
}

.signshi-view-chat-popout .ss-chat-empty__chips button {
  min-height: 36px !important;
  border: 1px solid #d7e3f2 !important;
  border-radius: 999px !important;
  padding: 0 13px !important;
  color: #52647f !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 720 !important;
}

.signshi-view-chat-popout .ss-chat-empty__chips button:hover {
  color: #176cff !important;
  border-color: #bcd5f5 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message {
  max-width: 76% !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  color: #43536e !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message.is-own {
  align-self: flex-end !important;
  flex-direction: row-reverse !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-avatar {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  color: #176cff !important;
  background: #eef6ff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message__body {
  min-width: 0 !important;
  border: 1px solid #e1eaf6 !important;
  border-radius: 18px !important;
  padding: 11px 13px !important;
  color: #43536e !important;
  background: #ffffff !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message.is-own .ss-chat-message__body {
  border-color: transparent !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #23a7ff 0%, #176cff 82%) !important;
  box-shadow: 0 12px 24px rgba(23, 108, 255, 0.22) !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message__meta {
  margin-bottom: 4px !important;
  display: flex !important;
  gap: 8px !important;
  color: #8190a8 !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message.is-own .ss-chat-message__meta {
  color: rgba(255, 255, 255, 0.82) !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message p {
  margin: 0 !important;
  white-space: pre-wrap !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-message img:not(.ss-chat-avatar img) {
  max-width: min(260px, 100%) !important;
  border-radius: 14px !important;
  display: block !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose {
  margin: 18px 24px 24px !important;
  padding: 16px !important;
  border: 1px solid #d7e3f2 !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 45px rgba(33, 72, 132, 0.11) !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-toolbar {
  margin: 0 0 10px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-toolbar .ss-icon-btn,
.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-upload {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: #708097 !important;
  background: transparent !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-toolbar .ss-icon-btn:hover,
.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-upload:hover {
  color: #176cff !important;
  background: #f2f7ff !important;
}

.signshi-view-chat-popout .ss-chat-compose__field {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 14px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose textarea {
  width: 100% !important;
  min-height: 58px !important;
  max-height: 160px !important;
  resize: vertical !important;
  border: 0 !important;
  outline: 0 !important;
  color: #101a2e !important;
  background: transparent !important;
  font: inherit !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose textarea::placeholder {
  color: #8a98ae !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose > .ss-primary,
.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose__field .ss-primary,
.signshi-view-chat-popout .ss-chat-popout-joinbar .ss-primary {
  border: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #23a7ff 0%, #176cff 72%, #7c3cff 100%) !important;
  box-shadow: 0 14px 28px rgba(23, 108, 255, 0.28) !important;
  font-weight: 900 !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose__field .ss-primary {
  min-width: 118px !important;
  min-height: 50px !important;
  border-radius: 15px !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose__field .ss-primary:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-stickers {
  margin-bottom: 10px !important;
  border: 1px solid #e4edf8 !important;
  border-radius: 16px !important;
  padding: 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  background: #f8fbff !important;
}

.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-stickers[hidden] {
  display: none !important;
}

body.signshi-view-chat-popout .ss-chat-popout-head .ss-brand__mark {
  display: inline-grid !important;
  place-items: center !important;
}

body.signshi-view-chat-popout .ss-chat-popout-head p {
  display: block !important;
}

body.signshi-view-chat-popout .ss-chat-popout-head > .ss-chat-popout-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
}

body.signshi-view-chat-popout .ss-chat-popout-head > .ss-chat-popout-brand > div {
  display: block !important;
  min-width: 0 !important;
}

body.signshi-view-chat-popout .ss-chat-empty__chips {
  width: min(620px, 100%) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
}

body.signshi-view-chat-popout .ss-chat-empty__chips button {
  white-space: nowrap !important;
}

body.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-log:has(.ss-chat-empty) {
  overflow: hidden !important;
}

body.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose {
  display: block !important;
}

body.signshi-view-chat-popout .ss-chat-compose__field {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 118px !important;
  align-items: end !important;
  gap: 14px !important;
}

body.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose__field textarea {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose__field .ss-primary {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 118px !important;
  justify-self: end !important;
}

@media (max-width: 760px) {
  html:has(body.signshi-view-chat-popout),
  body.signshi-view-chat-popout {
    overflow: auto !important;
  }

  .signshi-view-chat-popout .ss-chat-popout-shell--option-b {
    padding: 12px !important;
    place-items: start stretch !important;
  }

  .signshi-view-chat-popout .ss-chat-popout-card {
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 24px) !important;
    border-radius: 22px !important;
  }

  .signshi-view-chat-popout .ss-chat-popout-head,
  .signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-panel__head,
  .signshi-view-chat-popout .ss-chat-popout-joinbar {
    padding-inline: 16px !important;
  }

  .signshi-view-chat-popout .ss-chat-popout-head {
    align-items: flex-start !important;
  }

  .signshi-view-chat-popout .ss-chat-popout-online {
    display: none !important;
  }

  .signshi-view-chat-popout .ss-chat-popout-joinbar {
    grid-template-columns: 1fr !important;
  }

  .signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-log {
    margin: 0 16px !important;
    padding: 20px !important;
    min-height: 420px !important;
  }

  .signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose {
    margin: 16px !important;
  }

  .signshi-view-chat-popout .ss-chat-compose__field {
    grid-template-columns: 1fr !important;
  }

  .signshi-view-chat-popout .ss-chat-popout-panel .ss-chat-compose__field .ss-primary {
    width: 100% !important;
  }
}

/* Dashboard option B: premium user center workspace. */
body.signshi-view-dashboard {
  background: #ffffff !important;
  color: #101a2e !important;
}

body.signshi-view-dashboard .site,
body.signshi-view-dashboard .site-main {
  background: #ffffff !important;
}

body.signshi-view-dashboard .ss-dashboard-shell--option-b {
  width: min(1440px, calc(100vw - 40px)) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 28px 0 58px !important;
  display: grid !important;
  gap: 10px !important;
  color: #101a2e !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.signshi-view-dashboard .ss-dashboard-shell--option-b *,
body.signshi-view-dashboard .ss-dashboard-shell--option-b *::before,
body.signshi-view-dashboard .ss-dashboard-shell--option-b *::after {
  box-sizing: border-box !important;
}

body.signshi-view-dashboard .ss-dashboard-hero,
body.signshi-view-dashboard .ss-dashboard-profile,
body.signshi-view-dashboard .ss-dashboard-usage,
body.signshi-view-dashboard .ss-dashboard-stat-grid article,
body.signshi-view-dashboard .ss-dashboard-library,
body.signshi-view-dashboard .ss-dashboard-activity article {
  border: 1px solid #dfe8f5 !important;
  border-radius: 26px !important;
  box-shadow: 0 22px 60px rgba(33, 72, 132, 0.08) !important;
}

body.signshi-view-dashboard .ss-dashboard-hero {
  min-height: 210px !important;
  padding: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 82% 18%, rgba(124, 60, 255, 0.14), transparent 30%), radial-gradient(circle at 12% 100%, rgba(35, 167, 255, 0.18), transparent 32%), linear-gradient(135deg, #ffffff 0%, #f6fbff 55%, #eef5ff 100%) !important;
}

body.signshi-view-dashboard .ss-dashboard-kicker,
body.signshi-view-dashboard .ss-dashboard-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #176cff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
}

body.signshi-view-dashboard .ss-dashboard-kicker svg,
body.signshi-view-dashboard .ss-dashboard-label svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2.4 !important;
}

body.signshi-view-dashboard .ss-dashboard-hero h1 {
  margin: 14px 0 10px !important;
  max-width: 720px !important;
  color: #101a2e !important;
  font-size: clamp(40px, 6vw, 74px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.065em !important;
  font-weight: 950 !important;
}

body.signshi-view-dashboard .ss-dashboard-hero p {
  margin: 0 !important;
  max-width: 680px !important;
  color: #63738d !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

body.signshi-view-dashboard .ss-dashboard-hero__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

body.signshi-view-dashboard .ss-dashboard-shell--option-b .ss-primary,
body.signshi-view-dashboard .ss-dashboard-shell--option-b .ss-outline {
  min-height: 48px !important;
  border-radius: 999px !important;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 880 !important;
  text-decoration: none !important;
}

body.signshi-view-dashboard .ss-dashboard-shell--option-b .ss-primary {
  border: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #23a7ff 0%, #176cff 66%, #7c3cff 100%) !important;
  box-shadow: 0 16px 34px rgba(23, 108, 255, 0.26) !important;
}

body.signshi-view-dashboard .ss-dashboard-shell--option-b .ss-outline {
  border: 1px solid #cfe0f5 !important;
  color: #176cff !important;
  background: #ffffff !important;
  box-shadow: 0 12px 26px rgba(33, 72, 132, 0.08) !important;
}

body.signshi-view-dashboard .ss-dashboard-workspace {
  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) 320px !important;
  gap: 10px !important;
  align-items: stretch !important;
}

body.signshi-view-dashboard .ss-dashboard-profile {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 26px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
  background: #ffffff !important;
}

body.signshi-view-dashboard .ss-dashboard-avatar-wrap {
  display: grid !important;
  place-items: center !important;
  gap: 12px !important;
}

body.signshi-view-dashboard .ss-dashboard-avatar {
  width: 104px !important;
  height: 104px !important;
  border: 1px solid #dbe7f6 !important;
  border-radius: 30px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #23a7ff 0%, #176cff 48%, #7c3cff 100%);
  background-position: center !important;
  background-size: cover !important;
  box-shadow: 0 20px 38px rgba(23, 108, 255, 0.24) !important;
  font-size: 42px !important;
  font-weight: 950 !important;
}

body.signshi-view-dashboard .ss-dashboard-avatar.has-image {
  color: transparent !important;
}

body.signshi-view-dashboard .ss-dashboard-avatar-upload {
  min-height: 38px !important;
  border: 1px solid #cfe0f5 !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #176cff !important;
  background: #f7fbff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

body.signshi-view-dashboard .ss-dashboard-avatar-upload input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.signshi-view-dashboard .ss-dashboard-profile__body {
  min-width: 0 !important;
  display: grid !important;
  gap: 12px !important;
}

body.signshi-view-dashboard .ss-dashboard-profile h2,
body.signshi-view-dashboard .ss-dashboard-library h2 {
  margin: 0 !important;
  color: #101a2e !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.035em !important;
  font-weight: 930 !important;
}

body.signshi-view-dashboard .ss-dashboard-profile p,
body.signshi-view-dashboard .ss-dashboard-library p,
body.signshi-view-dashboard .ss-dashboard-activity p {
  margin: 0 !important;
  color: #64748f !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

body.signshi-view-dashboard .ss-dashboard-profile label {
  display: grid !important;
  gap: 8px !important;
  color: #5d6d86 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body.signshi-view-dashboard .ss-dashboard-profile input[type="text"] {
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid #d6e3f4 !important;
  border-radius: 16px !important;
  padding: 0 15px !important;
  color: #101a2e !important;
  background: #f8fbff !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  outline: 0 !important;
}

body.signshi-view-dashboard .ss-dashboard-profile input[type="text"]:focus {
  border-color: #73b7ff !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(23, 108, 255, 0.1) !important;
}

body.signshi-view-dashboard .ss-profile-message {
  min-height: 18px !important;
  color: #64748f !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

body.signshi-view-dashboard .ss-profile-message.is-error {
  color: #e5484d !important;
}

body.signshi-view-dashboard .ss-profile-message.is-success {
  color: #128c44 !important;
}

body.signshi-view-dashboard .ss-dashboard-main-column {
  min-width: 0 !important;
  display: grid !important;
  gap: 10px !important;
}

body.signshi-view-dashboard .ss-dashboard-usage {
  min-height: 230px !important;
  padding: 28px !important;
  display: grid !important;
  align-content: space-between !important;
  gap: 18px !important;
  border-color: transparent !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #176cff 0%, #7c3cff 100%) !important;
  box-shadow: 0 24px 50px rgba(23, 108, 255, 0.23) !important;
}

body.signshi-view-dashboard .ss-dashboard-usage__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

body.signshi-view-dashboard .ss-dashboard-usage__head span,
body.signshi-view-dashboard .ss-dashboard-usage__head strong {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body.signshi-view-dashboard .ss-dashboard-usage h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(48px, 6vw, 78px) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.06em !important;
  font-weight: 950 !important;
}

body.signshi-view-dashboard .ss-dashboard-usage h2 small {
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 18px !important;
  letter-spacing: -0.02em !important;
  font-weight: 850 !important;
}

body.signshi-view-dashboard .ss-dashboard-usage p,
body.signshi-view-dashboard .ss-dashboard-usage > small {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
}

body.signshi-view-dashboard .ss-dashboard-meter {
  height: 10px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.24) !important;
}

body.signshi-view-dashboard .ss-dashboard-meter span {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: #ffffff !important;
}

body.signshi-view-dashboard .ss-dashboard-stat-grid,
body.signshi-view-dashboard .ss-dashboard-activity {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.signshi-view-dashboard .ss-dashboard-activity {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.signshi-view-dashboard .ss-dashboard-stat-grid article {
  min-height: 150px !important;
  padding: 22px !important;
  display: grid !important;
  align-content: space-between !important;
  background: #ffffff !important;
}

body.signshi-view-dashboard .ss-dashboard-stat-grid span,
body.signshi-view-dashboard .ss-dashboard-stat-grid small {
  color: #64748f !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}

body.signshi-view-dashboard .ss-dashboard-stat-grid strong {
  color: #101a2e !important;
  font-size: 38px !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
  font-weight: 950 !important;
}

body.signshi-view-dashboard .ss-dashboard-library {
  min-width: 0 !important;
  padding: 24px !important;
  display: grid !important;
  align-content: start !important;
  gap: 18px !important;
  background: #ffffff !important;
}

body.signshi-view-dashboard .ss-dashboard-library__head {
  display: grid !important;
  gap: 8px !important;
}

body.signshi-view-dashboard .ss-dashboard-library__stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

body.signshi-view-dashboard .ss-dashboard-library__stats span {
  border: 1px solid #e0e9f5 !important;
  border-radius: 18px !important;
  padding: 14px !important;
  display: grid !important;
  gap: 4px !important;
  color: #64748f !important;
  background: #f8fbff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.signshi-view-dashboard .ss-dashboard-library__stats strong {
  color: #176cff !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

body.signshi-view-dashboard .ss-dashboard-library__list {
  display: grid !important;
  gap: 10px !important;
}

body.signshi-view-dashboard .ss-dashboard-library__list article {
  min-width: 0 !important;
  border: 1px solid #e2ebf7 !important;
  border-radius: 20px !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  background: #fbfdff !important;
}

body.signshi-view-dashboard .ss-dashboard-library__list img {
  width: 62px !important;
  height: 62px !important;
  border-radius: 15px !important;
  object-fit: cover !important;
}

body.signshi-view-dashboard .ss-dashboard-library__list strong,
body.signshi-view-dashboard .ss-dashboard-library__list small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.signshi-view-dashboard .ss-dashboard-library__list strong {
  color: #101a2e !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

body.signshi-view-dashboard .ss-dashboard-library__list small {
  margin-top: 4px !important;
  color: #7b8aa3 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

body.signshi-view-dashboard .ss-dashboard-activity article {
  min-height: 118px !important;
  padding: 24px !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  background: #ffffff !important;
}

body.signshi-view-dashboard .ss-dashboard-activity i,
body.signshi-view-dashboard .ss-dashboard-activity svg {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  color: #176cff !important;
  background: #eef5ff !important;
  stroke-width: 2.3 !important;
}

body.signshi-view-dashboard .ss-dashboard-activity strong {
  display: block !important;
  margin-bottom: 5px !important;
  color: #101a2e !important;
  font-size: 15px !important;
  font-weight: 930 !important;
}

body.signshi-view-dashboard .ss-dashboard-gate {
  max-width: 620px !important;
  margin: 80px auto !important;
  padding: 44px !important;
  border: 1px solid #dfe8f5 !important;
  border-radius: 30px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 70px rgba(33, 72, 132, 0.11) !important;
}

@media (max-width: 1200px) {
  body.signshi-view-dashboard .ss-dashboard-workspace {
    grid-template-columns: 280px minmax(0, 1fr) !important;
  }

  body.signshi-view-dashboard .ss-dashboard-library {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 960px) {
  body.signshi-view-dashboard .ss-dashboard-shell--option-b {
    width: min(100% - 24px, 720px) !important;
    padding-top: 14px !important;
  }

  body.signshi-view-dashboard .ss-dashboard-hero {
    padding: 26px !important;
    display: grid !important;
  }

  body.signshi-view-dashboard .ss-dashboard-hero__actions {
    justify-content: flex-start !important;
  }

  body.signshi-view-dashboard .ss-dashboard-workspace {
    grid-template-columns: 1fr !important;
  }

  body.signshi-view-dashboard .ss-dashboard-stat-grid,
  body.signshi-view-dashboard .ss-dashboard-activity {
    grid-template-columns: 1fr !important;
  }

  body.signshi-view-dashboard .ss-dashboard-activity article {
    min-height: 0 !important;
  }
}

@media (max-width: 560px) {
  body.signshi-view-dashboard .ss-dashboard-hero h1 {
    font-size: 38px !important;
  }

  body.signshi-view-dashboard .ss-dashboard-shell--option-b .ss-primary,
  body.signshi-view-dashboard .ss-dashboard-shell--option-b .ss-outline {
    width: 100% !important;
  }

  body.signshi-view-dashboard .ss-dashboard-library__stats {
    grid-template-columns: 1fr !important;
  }
}

/* Publish option A: approved two-column live preview page. */
body.signshi-view-publish {
  background: #ffffff !important;
  color: #0b1428 !important;
}

body.signshi-view-publish::before {
  display: none !important;
}

body.signshi-view-publish .site,
body.signshi-view-publish .site-main {
  background: #ffffff !important;
}

body.signshi-view-publish .ss-header {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid #e7eef8 !important;
  box-shadow: none !important;
}

.ss-publish-page--option-a {
  width: min(1500px, calc(100vw - 80px)) !important;
  margin: 28px auto 64px !important;
  padding: 0 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.ss-publish-page--option-a,
.ss-publish-page--option-a * {
  box-sizing: border-box !important;
}

.ss-publish-workspace {
  border: 1px solid #dbe6f5 !important;
  border-radius: 28px !important;
  padding: 36px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 72px rgba(39, 72, 119, 0.12) !important;
}

.ss-publish-head {
  min-height: 132px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 28px !important;
}

.ss-publish-head > div:first-child {
  min-width: 0 !important;
}

.ss-publish-head span,
.ss-publish-fieldset h2,
.ss-publish-field > span,
.ss-publish-prompt-field > span,
.ss-publish-preview-panel > h2 {
  margin: 0 !important;
  color: #0877ff !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  font-weight: 900 !important;
}

.ss-publish-head h1 {
  margin: 14px 0 8px !important;
  color: #0b1428 !important;
  font-size: clamp(42px, 4vw, 64px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.065em !important;
  font-weight: 950 !important;
}

.ss-publish-head p {
  max-width: 720px !important;
  margin: 0 !important;
  color: #65748e !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  font-weight: 560 !important;
}

.ss-publish-head__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  padding-top: 18px !important;
}

.ss-publish-page--option-a .ss-primary,
.ss-publish-page--option-a .ss-outline {
  min-height: 52px !important;
  border-radius: 14px !important;
  padding: 0 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.015em !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.ss-publish-page--option-a .ss-primary {
  border: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #149dff 0%, #176cff 62%, #7c2cff 100%) !important;
  box-shadow: 0 14px 28px rgba(23, 108, 255, 0.26) !important;
}

.ss-publish-page--option-a .ss-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 34px rgba(23, 108, 255, 0.32) !important;
}

.ss-publish-page--option-a .ss-primary:disabled {
  color: #ffffff !important;
  background: #aab6c8 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.ss-publish-page--option-a .ss-outline {
  border: 1px solid #a8cdfd !important;
  color: #176cff !important;
  background: #ffffff !important;
}

.ss-publish-page--option-a .ss-outline:hover {
  border-color: #176cff !important;
  background: #f5f9ff !important;
}

.ss-publish-page--option-a .ss-primary i,
.ss-publish-page--option-a .ss-outline i,
.ss-publish-page--option-a .ss-primary svg,
.ss-publish-page--option-a .ss-outline svg {
  width: 20px !important;
  height: 20px !important;
  display: inline-grid !important;
  place-items: center !important;
  stroke-width: 2.35 !important;
}

.ss-publish-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.9fr) !important;
  gap: 32px !important;
  align-items: start !important;
  margin-top: 8px !important;
}

.ss-publish-form,
.ss-publish-preview-panel {
  min-width: 0 !important;
  border: 1px solid #dbe6f5 !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.ss-publish-form {
  padding: 24px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 22px !important;
}

.ss-publish-form > * {
  grid-column: 1 / -1 !important;
}

.ss-publish-fieldset {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: grid !important;
  gap: 14px !important;
}

.ss-publish-upload-zone {
  min-height: 168px !important;
  border: 2px dashed #7bb7ff !important;
  border-radius: 18px !important;
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 8px !important;
  padding: 28px !important;
  color: #0b1428 !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(147, 197, 253, 0.18), transparent 36%),
    linear-gradient(135deg, #f9fcff 0%, #f4f9ff 100%) !important;
  cursor: pointer !important;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease !important;
}

.ss-publish-upload-zone:hover {
  border-color: #176cff !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(147, 197, 253, 0.26), transparent 38%),
    linear-gradient(135deg, #fafdff 0%, #eef6ff 100%) !important;
}

.ss-publish-upload-zone input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

.ss-publish-upload-zone > span {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  color: #0877ff !important;
  background: #edf6ff !important;
}

.ss-publish-upload-zone > span svg {
  width: 34px !important;
  height: 34px !important;
  stroke-width: 2.1 !important;
}

.ss-publish-upload-zone strong {
  color: #0b1428 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

.ss-publish-upload-zone em,
.ss-publish-field em {
  color: #65748e !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-style: normal !important;
  font-weight: 650 !important;
}

.ss-publish-upload-zone img {
  display: block !important;
  position: absolute !important;
  inset: 10px !important;
  width: calc(100% - 20px) !important;
  height: calc(100% - 20px) !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16) !important;
  z-index: 2 !important;
}

.ss-publish-upload-zone img[hidden] {
  display: none !important;
}

.ss-publish-upload-zone.has-image > span,
.ss-publish-upload-zone.has-image > strong,
.ss-publish-upload-zone.has-image > em {
  opacity: 0 !important;
}

.ss-publish-form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important;
  gap: 18px 24px !important;
}

.ss-publish-field {
  min-width: 0 !important;
  grid-column: span 2 !important;
  display: grid !important;
  gap: 9px !important;
}

.ss-publish-field--wide {
  grid-column: span 4 !important;
}

.ss-publish-prompt-field {
  grid-column: 1 / -1 !important;
  position: relative !important;
}

.ss-publish-field input,
.ss-publish-field select,
.ss-publish-field textarea {
  width: 100% !important;
  border: 1px solid #d4e0ef !important;
  border-radius: 14px !important;
  outline: none !important;
  color: #0b1428 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 560 !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
}

.ss-publish-field input,
.ss-publish-field select {
  height: 48px !important;
  padding: 0 16px !important;
}

.ss-publish-field textarea {
  height: 114px !important;
  min-height: 114px !important;
  padding: 16px !important;
  resize: vertical !important;
}

.ss-publish-field input::placeholder,
.ss-publish-field textarea::placeholder {
  color: #8b9ab2 !important;
}

.ss-publish-field input:focus,
.ss-publish-field select:focus,
.ss-publish-field textarea:focus {
  border-color: #7bb7ff !important;
  box-shadow: 0 0 0 4px rgba(23, 108, 255, 0.09) !important;
  background: #fbfdff !important;
}

.ss-publish-prompt-field small {
  position: absolute !important;
  right: 16px !important;
  bottom: 12px !important;
  color: #65748e !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.ss-publish-form-note {
  margin: -2px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #65748e !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
}

.ss-publish-form-note svg {
  width: 18px !important;
  height: 18px !important;
  color: #65748e !important;
}

.ss-publish-form-note a {
  color: #0877ff !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}

.ss-publish-message {
  min-height: 20px !important;
  margin: -8px 0 0 !important;
  color: #65748e !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.ss-publish-message.is-error {
  color: #dc2626 !important;
}

.ss-publish-message.is-success {
  color: #0877ff !important;
}

.ss-publish-preview-panel {
  position: sticky !important;
  top: 92px !important;
  padding: 24px !important;
  display: grid !important;
  gap: 18px !important;
}

.ss-publish-preview-card {
  margin: 0 !important;
  border: 1px solid #dbe6f5 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 14px 36px rgba(39, 72, 119, 0.08) !important;
}

.ss-publish-preview-card figure {
  position: relative !important;
  margin: 16px 16px 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #f5f8ff !important;
}

.ss-publish-preview-image {
  min-height: 260px !important;
  display: grid !important;
  place-items: center !important;
  color: #0877ff !important;
  background:
    radial-gradient(circle at 51% 48%, rgba(205, 196, 255, 0.78) 0 16%, transparent 17%),
    radial-gradient(circle at 16% 100%, rgba(47, 149, 255, 0.62), transparent 30%),
    radial-gradient(circle at 94% 87%, rgba(157, 69, 255, 0.62), transparent 34%),
    linear-gradient(135deg, #f2f8ff 0%, #edf5ff 42%, #f3eaff 100%) !important;
  background-position: center !important;
  background-size: cover !important;
}

.ss-publish-preview-image.has-image {
  min-height: 260px !important;
}

.ss-publish-preview-image svg {
  width: 42px !important;
  height: 42px !important;
  opacity: 0.85 !important;
}

.ss-publish-preview-card figure > span {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  min-height: 26px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #0b1428 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.ss-publish-preview-copy {
  padding: 18px 20px 16px !important;
  display: grid !important;
  gap: 10px !important;
}

.ss-publish-preview-copy h3 {
  margin: 0 !important;
  color: #0b1428 !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.035em !important;
  font-weight: 950 !important;
}

.ss-publish-preview-copy > span {
  width: max-content !important;
  border: 1px solid #9ed0ff !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
  color: #0877ff !important;
  background: #f4faff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.ss-publish-preview-meta {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding-top: 2px !important;
}

.ss-publish-preview-meta small {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #65748e !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.ss-publish-preview-meta i,
.ss-publish-preview-meta svg {
  width: 18px !important;
  height: 18px !important;
  display: inline-grid !important;
  place-items: center !important;
  stroke-width: 2.25 !important;
}

.ss-publish-preview-meta button {
  margin-left: auto !important;
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #ffffff !important;
  background: #0877ff !important;
  box-shadow: 0 12px 26px rgba(23, 108, 255, 0.24) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.ss-publish-preview-meta button:disabled {
  color: #ffffff !important;
  background: #aab6c8 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.ss-publish-checklist {
  border: 1px solid #dbe6f5 !important;
  border-radius: 22px !important;
  padding: 16px 20px !important;
  display: grid !important;
  gap: 14px !important;
  background: #ffffff !important;
}

.ss-publish-checklist > div {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: start !important;
}

.ss-publish-checklist i,
.ss-publish-checklist svg {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  padding: 5px !important;
  display: grid !important;
  place-items: center !important;
  color: #ffffff !important;
  background: #0877ff !important;
  stroke-width: 3 !important;
}

.ss-publish-checklist strong {
  color: #0b1428 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

.ss-publish-checklist span {
  grid-column: 2 !important;
  color: #65748e !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;
}

.ss-publish-gate {
  width: min(560px, 100%) !important;
  margin: 80px auto !important;
  border: 1px solid #dbe6f5 !important;
  border-radius: 28px !important;
  padding: 42px !important;
  display: grid !important;
  justify-items: center !important;
  gap: 16px !important;
  text-align: center !important;
  background: #ffffff !important;
  box-shadow: 0 24px 72px rgba(39, 72, 119, 0.12) !important;
}

.ss-publish-gate h1 {
  margin: 0 !important;
  color: #0b1428 !important;
  font-size: 34px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
  font-weight: 950 !important;
}

.ss-publish-gate p {
  margin: 0 !important;
  color: #65748e !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

@media (max-width: 1180px) {
  .ss-publish-page--option-a {
    width: min(100% - 32px, 980px) !important;
  }

  .ss-publish-head {
    display: grid !important;
  }

  .ss-publish-head__actions {
    justify-content: flex-start !important;
    padding-top: 0 !important;
  }

  .ss-publish-body {
    gap: 20px !important;
  }
}

@media (max-width: 980px) {
  .ss-publish-workspace {
    padding: 22px !important;
  }

  .ss-publish-body {
    grid-template-columns: 1fr !important;
    border-top: 1px solid #dbe6f5 !important;
    padding-top: 20px !important;
  }

  .ss-publish-preview-panel {
    position: static !important;
  }
}

@media (max-width: 680px) {
  .ss-publish-page--option-a {
    width: min(100% - 20px, 620px) !important;
    margin-top: 16px !important;
  }

  .ss-publish-workspace {
    border-radius: 22px !important;
    padding: 18px !important;
  }

  .ss-publish-head h1 {
    font-size: 38px !important;
  }

  .ss-publish-head__actions,
  .ss-publish-preview-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .ss-publish-page--option-a .ss-primary,
  .ss-publish-page--option-a .ss-outline,
  .ss-publish-preview-meta button {
    width: 100% !important;
  }

  .ss-publish-form-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .ss-publish-field,
  .ss-publish-field--wide {
    grid-column: 1 / -1 !important;
  }

  .ss-publish-preview-image {
    min-height: 210px !important;
  }
}

/* Option A stability audit fixes. */
.ss-header--gallery .ss-brand__name {
  display: none !important;
}

.ss-header--gallery .ss-brand {
  min-width: 172px !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}

.ss-header--gallery .ss-nav {
  overflow: visible !important;
}

.ss-header--gallery .ss-nav__links {
  min-width: 0 !important;
}

.ss-header--gallery .ss-search {
  min-width: 0 !important;
}

@media (max-width: 760px) {
  body.signshi-body {
    overflow-x: hidden !important;
  }

  .ss-header--gallery {
    padding: 8px 10px 0 !important;
  }

  .ss-header--gallery .ss-nav {
    width: 100% !important;
    min-height: auto !important;
    padding: 10px 12px 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: hidden !important;
    border-radius: 26px !important;
  }

  .ss-header--gallery .ss-brand {
    grid-column: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
  }

  .ss-header--gallery .ss-brand::before,
  .ss-header--gallery .ss-brand::after {
    font-size: 25px !important;
  }

  .ss-header--gallery .ss-auth {
    grid-column: 2 !important;
    justify-self: end !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .ss-header--gallery .ss-login-btn--ghost {
    display: none !important;
  }

  .ss-header--gallery .ss-login-btn--primary,
  .ss-header--gallery .ss-publish-btn {
    height: 40px !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  .ss-header--gallery .ss-user {
    max-width: 142px !important;
    min-width: 0 !important;
  }

  .ss-header--gallery .ss-user > span[data-user-name] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .ss-header--gallery .ss-search {
    grid-column: 1 / -1 !important;
    order: 3 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .ss-header--gallery .ss-nav__links {
    grid-column: 1 / -1 !important;
    order: 4 !important;
    width: 100% !important;
    padding: 2px 0 10px !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  .ss-header--gallery .ss-nav__links::-webkit-scrollbar {
    display: none !important;
  }

  .ss-header--gallery .ss-nav__links a {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 430px) {
  .ss-header--gallery .ss-login-btn--primary {
    width: 42px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  .ss-header--gallery .ss-login-btn--primary::before {
    content: "+";
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .ss-header--gallery .ss-publish-btn {
    width: 42px !important;
    padding: 0 !important;
    font-size: 0 !important;
    justify-content: center !important;
  }
}

/* Option A gate conversion polish. */
.ss-gate-benefits {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

.ss-gate-benefits span {
  min-height: 46px !important;
  border: 1px solid #dbe7ff !important;
  border-radius: 16px !important;
  padding: 10px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  color: #2563ff !important;
  background: #f7fbff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

.ss-gate-benefits svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 2.5 !important;
}

.ss-gate-actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  gap: 10px !important;
}

.ss-gate-actions .ss-primary,
.ss-gate-actions .ss-outline {
  width: 100% !important;
  height: 48px !important;
  border-radius: 999px !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.ss-gate-actions .ss-outline {
  border: 1px solid #b8d3ff !important;
  color: #176cff !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.ss-dashboard-gate,
.ss-publish-gate {
  gap: 18px !important;
}

@media (max-width: 620px) {
  .ss-gate-benefits {
    grid-template-columns: 1fr !important;
  }

  .ss-gate-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Option A membership conversion polish. */
.ss-membership-impact {
  width: min(640px, 100%) !important;
  margin: 22px 0 24px !important;
  display: grid !important;
  gap: 10px !important;
}

.ss-membership-impact > strong {
  color: #176cff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

.ss-membership-impact span {
  border: 1px solid #dbe7ff !important;
  border-radius: 18px !important;
  padding: 13px 15px !important;
  display: grid !important;
  gap: 3px !important;
  background: rgba(255, 255, 255, 0.72) !important;
}

.ss-membership-impact b {
  color: #0b1428 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.ss-membership-impact em {
  color: #65748e !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-style: normal !important;
}

/* UI review option A polish. */
.ss-header--gallery .ss-login-btn,
.ss-header--gallery .ss-publish-btn {
  box-shadow: 0 10px 22px rgba(37, 99, 255, 0.14) !important;
}

.ss-header--gallery .ss-login-btn--primary,
.ss-header--gallery .ss-publish-btn {
  background: linear-gradient(135deg, #1777ff 0%, #5b35ff 100%) !important;
}

.ss-header--gallery .ss-login-btn--primary:hover,
.ss-header--gallery .ss-publish-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 26px rgba(37, 99, 255, 0.2) !important;
}

.ss-ai-chat-compose.is-locked {
  background: #f8fbff !important;
  box-shadow: 0 16px 42px rgba(31, 76, 140, 0.08) !important;
}

.ss-ai-chat-compose.is-locked textarea {
  color: #74849d !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.ss-ai-chat-compose.is-locked .ss-primary {
  color: #ffffff !important;
  background: #a9cdf8 !important;
  box-shadow: none !important;
}

.ss-ai-chat-login {
  box-shadow: 0 14px 30px rgba(37, 99, 255, 0.18) !important;
}

.ss-membership-hero {
  min-height: auto !important;
  align-items: center !important;
}

.ss-membership-hero h1 {
  font-size: clamp(52px, 6vw, 86px) !important;
}

.ss-membership-card {
  align-self: center !important;
}

.ss-membership-cta-row {
  margin-top: 18px !important;
  border-top: 1px solid #e3ebf7 !important;
  padding-top: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.ss-membership-cta-row span {
  color: #65748e !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.ss-membership-cta-row a {
  min-height: 34px !important;
  border: 1px solid #b8d3ff !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #176cff !important;
  background: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

@media (max-width: 760px) {
  html,
  body.signshi-body,
  body.signshi-body .site {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .ss-white-home--inspiration-only {
    width: 100% !important;
    max-width: 100vw !important;
    margin-inline: 0 !important;
    padding-inline: 10px !important;
    overflow: hidden !important;
  }

  .ss-white-home--inspiration-only *,
  .ss-white-home--inspiration-only *::before,
  .ss-white-home--inspiration-only *::after {
    box-sizing: border-box !important;
  }

  .ss-white-home--inspiration-only .ss-white-chip-row--top {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    overflow-x: auto !important;
  }

  .ss-white-home--inspiration-only .ss-white-hero--wide {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 430px !important;
    padding: 34px 18px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .ss-white-home--inspiration-only .ss-white-hero__copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .ss-white-home--inspiration-only .ss-white-hero__copy h1 {
    max-width: 100% !important;
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.02 !important;
    overflow-wrap: normal !important;
  }

  .ss-white-home--inspiration-only .ss-white-hero__copy p {
    max-width: 100% !important;
    font-size: 14px !important;
  }

  .ss-white-home--inspiration-only .ss-discovery-search {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 6px 6px 6px 16px !important;
  }

  .ss-white-home--inspiration-only .ss-discovery-search input {
    min-width: 0 !important;
  }

  .ss-white-home--inspiration-only .ss-white-hero__pills {
    width: 100% !important;
    max-width: 100% !important;
  }

  .ss-white-home--inspiration-only .ss-white-inspiration-board {
    padding: 10px 0 0 !important;
  }

  .ss-white-home--inspiration-only .ss-white-gallery-masonry {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .ss-white-home--inspiration-only .ss-masonry-card.ss-white-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 620px) {
  .ss-membership-cta-row {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .ss-membership-cta-row a {
    width: 100% !important;
  }
}

/* Legal footer and policy pages. */
.ss-site-footer {
  width: min(100%, 1860px);
  margin: 18px auto 0;
  padding: 0 28px 34px;
  color: #65748e;
}

.ss-site-footer__inner {
  border: 1px solid #e5edf8;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 54px rgba(18, 34, 64, 0.06);
  min-height: 92px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ss-site-footer__brand a {
  color: #101827;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.ss-site-footer__brand p {
  margin: 6px 0 0;
  color: #65748e;
  font-size: 13px;
  font-weight: 650;
}

.ss-site-footer__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.ss-site-footer__links a {
  min-height: 38px;
  border: 1px solid #d9e6f7;
  border-radius: 999px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #176cff;
  background: #ffffff;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(37, 99, 255, 0.08);
}

.ss-site-footer__links a:hover {
  border-color: #b8d3ff;
  color: #0d63f4;
  transform: translateY(-1px);
}

.ss-legal-shell {
  width: min(100%, 1180px);
  margin: 26px auto 0;
  padding: 0 28px 46px;
}

.ss-legal-card {
  border: 1px solid #e2ebf7;
  border-radius: 34px;
  background:
    radial-gradient(circle at 92% 0%, rgba(116, 72, 255, 0.11), transparent 28%),
    radial-gradient(circle at 0% 8%, rgba(33, 137, 255, 0.12), transparent 26%),
    #ffffff;
  box-shadow: 0 28px 84px rgba(18, 34, 64, 0.08);
  padding: clamp(34px, 5vw, 64px);
  color: #162033;
}

.ss-legal-card > span {
  color: #176cff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ss-legal-card h1 {
  margin: 12px 0 8px;
  color: #101827;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.07em;
}

.ss-legal-updated {
  margin: 0 0 30px;
  color: #718198;
  font-size: 14px;
  font-weight: 750;
}

.ss-legal-card section {
  border-top: 1px solid #e7eef8;
  padding: 24px 0 0;
  margin: 24px 0 0;
}

.ss-legal-card h2 {
  margin: 0 0 10px;
  color: #13213a;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.035em;
}

.ss-legal-card p {
  margin: 0;
  max-width: 860px;
  color: #53657d;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.78;
}

.ss-legal-actions {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ss-legal-actions .ss-primary,
.ss-legal-actions .ss-outline {
  min-height: 44px;
  border-radius: 999px;
  padding-inline: 20px;
  text-decoration: none;
}

.signshi-view-chat-popout .ss-site-footer {
  display: none !important;
}

@media (max-width: 720px) {
  .ss-site-footer {
    padding: 0 10px 24px;
  }

  .ss-site-footer__inner {
    border-radius: 22px;
    padding: 20px;
    align-items: flex-start;
    flex-direction: column;
  }

  .ss-site-footer__links {
    width: 100%;
    justify-content: flex-start;
  }

  .ss-site-footer__links a {
    flex: 1 1 auto;
  }

  .ss-legal-shell {
    padding: 0 10px 32px;
  }

  .ss-legal-card {
    border-radius: 24px;
    padding: 30px 20px;
  }
}

/* Video workflow studio page. */
.ss-video-workflow-page {
  --video-blue: #1f7bff;
  --video-violet: #6d35ff;
  --video-ink: #101a2e;
  --video-muted: #6a7890;
  --video-line: #dfe8f5;
  --video-soft: #f5f8ff;
  display: grid;
  grid-template-columns: 268px minmax(640px, 1fr) 360px;
  min-height: calc(100vh - 86px);
  color: var(--video-ink);
  background:
    radial-gradient(circle at 52% 0%, rgba(56, 129, 255, 0.12), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
  border-top: 1px solid rgba(222, 231, 244, 0.92);
}

.ss-video-workflow-page :is(button, input, textarea, select) {
  font: inherit;
}

.ss-video-workflow-page button {
  cursor: pointer;
}

.ss-video-workflow-page .ss-primary,
.ss-video-generate-button {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--video-blue), var(--video-violet)) !important;
  box-shadow: 0 18px 34px rgba(37, 114, 255, 0.24) !important;
}

.ss-video-workflow-page .ss-outline {
  color: #1c67ff !important;
  border: 1px solid #cfe0ff !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.ss-video-sidebar {
  min-width: 0;
  padding: 22px 16px;
  background: rgba(255, 255, 255, 0.92);
  border-right: 1px solid var(--video-line);
}

.ss-video-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px 20px;
}

.ss-video-sidebar__brand > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--video-blue);
  border: 1px solid #d9e7ff;
  border-radius: 16px;
  background: #f4f8ff;
}

.ss-video-sidebar__brand strong,
.ss-video-topbar h1,
.ss-video-section-head h2,
.ss-video-model-card strong {
  color: var(--video-ink);
  font-weight: 950;
  letter-spacing: -0.04em;
}

.ss-video-sidebar__brand small {
  display: block;
  margin-top: 3px;
  color: var(--video-muted);
  font-size: 12px;
  font-weight: 750;
}

.ss-video-new-project {
  width: 100%;
  min-height: 46px;
  border-radius: 999px !important;
}

.ss-video-sidebar__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 18px 0 14px;
  padding: 4px;
  border: 1px solid var(--video-line);
  border-radius: 999px;
  background: #f6f9ff;
}

.ss-video-sidebar__tabs button {
  min-height: 32px;
  color: var(--video-muted);
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
}

.ss-video-sidebar__tabs button.is-active {
  color: var(--video-blue);
  background: #fff;
  box-shadow: 0 8px 18px rgba(36, 84, 150, 0.08);
}

.ss-video-project-list {
  display: grid;
  gap: 10px;
}

.ss-video-project {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 10px;
  width: 100%;
  padding: 10px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
}

.ss-video-project.is-active,
.ss-video-project:hover {
  border-color: #cfddff;
  background: #f6f9ff;
}

.ss-video-project img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 14px;
}

.ss-video-project strong,
.ss-video-scene strong {
  display: block;
  color: var(--video-ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
}

.ss-video-project small,
.ss-video-project em {
  display: block;
  margin-top: 4px;
  color: var(--video-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.ss-video-project em {
  grid-column: 2;
}

.ss-video-sidebar__foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--video-line);
  display: grid;
  gap: 8px;
}

.ss-video-sidebar__foot button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: var(--video-muted);
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 850;
}

.ss-video-studio {
  min-width: 0;
  padding: 24px;
}

.ss-video-topbar,
.ss-video-storyboard,
.ss-video-canvas-card,
.ss-video-composer,
.ss-video-preview-panel {
  border: 1px solid var(--video-line);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 22px 70px rgba(51, 93, 152, 0.09);
}

.ss-video-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 22px;
  border-radius: 28px;
}

.ss-video-kicker,
.ss-video-section-head span,
.ss-video-preview-head span,
.ss-video-queue > span,
.ss-video-model-card > span,
.ss-video-settings > span,
.ss-video-export > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--video-blue);
  font-size: 12px;
  font-weight: 950;
}

.ss-video-topbar h1 {
  margin: 8px 0 8px;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 0.96;
}

.ss-video-topbar p {
  max-width: 760px;
  margin: 0;
  color: var(--video-muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}

.ss-video-topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 300px;
}

.ss-video-topbar__actions > span {
  width: 100%;
  color: #78869b;
  text-align: right;
  font-size: 12px;
  font-weight: 850;
}

.ss-video-storyboard,
.ss-video-canvas-card,
.ss-video-composer {
  margin-top: 18px;
  border-radius: 28px;
  padding: 18px;
}

.ss-video-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.ss-video-section-head h2 {
  margin: 4px 0 0;
  font-size: 21px;
}

.ss-video-scene-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
}

.ss-video-scene {
  position: relative;
  overflow: hidden;
  min-height: 142px;
  padding: 10px;
  text-align: left;
  border: 1px solid #dce7f7;
  border-radius: 22px;
  background: #f7faff;
}

.ss-video-scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.ss-video-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 32%, rgba(7, 16, 31, 0.82) 100%);
}

.ss-video-scene:hover img,
.ss-video-scene.is-active img {
  transform: scale(1.035);
}

.ss-video-scene span,
.ss-video-scene strong {
  position: relative;
  z-index: 1;
  color: #fff;
}

.ss-video-scene span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 900;
  backdrop-filter: blur(8px);
}

.ss-video-scene strong {
  margin-top: 78px;
}

.ss-video-scene--add {
  display: grid;
  place-items: center;
  text-align: center;
  border-style: dashed;
  background: #f9fbff;
}

.ss-video-scene--add::after {
  display: none;
}

.ss-video-scene--add i,
.ss-video-scene--add svg {
  color: var(--video-blue);
}

.ss-video-scene--add strong {
  margin: 0;
  color: var(--video-blue);
}

.ss-video-canvas-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ss-video-canvas-tools button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--video-blue);
  border: 1px solid #dbe8ff;
  border-radius: 12px;
  background: #fff;
}

.ss-video-canvas {
  position: relative;
  overflow: hidden;
  min-height: 470px;
  border: 1px solid #dce8f8;
  border-radius: 26px;
  background:
    radial-gradient(circle, rgba(45, 117, 255, 0.14) 1px, transparent 1.5px) 0 0 / 24px 24px,
    linear-gradient(135deg, #f8fbff 0%, #edf5ff 100%);
}

.ss-video-link {
  position: absolute;
  height: 3px;
  transform-origin: left center;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(31, 123, 255, 0.18), rgba(109, 53, 255, 0.88));
}

.ss-video-link--one {
  left: 18%;
  top: 29%;
  width: 250px;
  transform: rotate(-8deg);
}

.ss-video-link--two {
  left: 18%;
  top: 62%;
  width: 305px;
  transform: rotate(-14deg);
}

.ss-video-link--three {
  left: 44%;
  top: 43%;
  width: 220px;
  transform: rotate(-4deg);
}

.ss-video-link--four {
  left: 66%;
  top: 40%;
  width: 180px;
  transform: rotate(-11deg);
}

.ss-video-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 188px;
  padding: 14px;
  border: 1px solid #d7e5ff;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 42px rgba(52, 89, 150, 0.14);
}

.ss-video-node > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--video-blue), var(--video-violet));
}

.ss-video-node strong {
  display: block;
  color: var(--video-ink);
  font-size: 15px;
  font-weight: 950;
}

.ss-video-node small {
  display: block;
  margin-top: 4px;
  color: var(--video-muted);
  font-size: 12px;
  font-weight: 750;
}

.ss-video-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.ss-video-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  color: var(--video-muted);
  border: 1px solid var(--video-line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
}

.ss-video-tabs button.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--video-blue), var(--video-violet));
}

.ss-video-prompt-panel {
  display: grid;
  gap: 12px;
}

.ss-video-prompt-panel textarea {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  color: var(--video-ink);
  border: 1px solid #dbe7f6;
  border-radius: 22px;
  background: #f9fbff;
  padding: 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}

.ss-video-prompt-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.ss-video-prompt-actions > span {
  margin-right: auto;
  color: var(--video-muted);
  font-size: 13px;
  font-weight: 850;
}

.ss-video-preview-panel {
  min-width: 0;
  padding: 22px 18px;
  border-width: 0 0 0 1px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.9);
}

.ss-video-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ss-video-preview-head strong {
  display: block;
  margin-top: 4px;
  color: var(--video-ink);
  font-size: 18px;
  font-weight: 950;
}

.ss-video-preview-head em {
  color: #6d35ff;
  font-style: normal;
  font-weight: 950;
}

.ss-video-preview-frame {
  overflow: hidden;
  margin: 16px 0;
  border: 1px solid var(--video-line);
  border-radius: 26px;
  background: #f3f7ff;
}

.ss-video-preview-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ss-video-preview-frame figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  color: var(--video-muted);
  font-size: 12px;
  font-weight: 850;
}

.ss-video-queue,
.ss-video-model-card,
.ss-video-settings,
.ss-video-export {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--video-line);
  border-radius: 24px;
  background: #fff;
}

.ss-video-queue article {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border-radius: 18px;
  background: var(--video-soft);
}

.ss-video-queue i,
.ss-video-queue svg {
  color: var(--video-blue);
}

.ss-video-queue strong {
  display: block;
  color: var(--video-ink);
  font-size: 13px;
  font-weight: 950;
}

.ss-video-queue small,
.ss-video-model-card p {
  color: var(--video-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.6;
}

.ss-video-model-card p {
  margin: 0;
}

.ss-video-settings label {
  display: grid;
  gap: 7px;
  color: var(--video-muted);
  font-size: 12px;
  font-weight: 900;
}

.ss-video-settings select {
  width: 100%;
  min-height: 42px;
  color: var(--video-ink);
  border: 1px solid #d8e5f5;
  border-radius: 14px;
  background: #f8fbff;
  padding: 0 12px;
  font-weight: 800;
}

.ss-video-export {
  grid-template-columns: 1fr 1fr;
}

.ss-video-export > span {
  grid-column: 1 / -1;
}

.ss-video-export button {
  min-height: 40px;
  padding-inline: 10px;
}

@media (max-width: 1180px) {
  .ss-video-workflow-page {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .ss-video-preview-panel {
    grid-column: 1 / -1;
    border-top: 1px solid var(--video-line);
    border-left: 0;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 0.9fr);
    gap: 16px;
  }

  .ss-video-preview-head,
  .ss-video-preview-frame {
    grid-column: 1;
  }

  .ss-video-queue,
  .ss-video-model-card,
  .ss-video-settings,
  .ss-video-export {
    margin-top: 0;
  }

  .ss-video-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .ss-video-topbar__actions {
    width: 100%;
    justify-content: flex-start;
    min-width: 0;
  }

  .ss-video-topbar__actions > span {
    width: auto;
    text-align: left;
    margin-right: auto;
  }
}

@media (max-width: 760px) {
  .ss-video-workflow-page {
    grid-template-columns: 1fr;
  }

  .ss-video-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--video-line);
  }

  .ss-video-studio {
    padding: 14px;
  }

  .ss-video-topbar,
  .ss-video-storyboard,
  .ss-video-canvas-card,
  .ss-video-composer {
    border-radius: 22px;
  }

  .ss-video-scene-strip {
    grid-template-columns: 1fr 1fr;
  }

  .ss-video-canvas {
    min-width: 720px;
  }

  .ss-video-canvas-card {
    overflow-x: auto;
  }

  .ss-video-preview-panel {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ss-video-preview-head,
  .ss-video-preview-frame {
    grid-column: auto;
  }

  .ss-video-export {
    grid-template-columns: 1fr;
  }
}

/* Video workflow usability pass. */
.ss-video-workflow-page {
  grid-template-columns: 236px minmax(0, 1fr) 320px;
  min-height: calc(100vh - 76px);
  background: linear-gradient(180deg, #f6f9ff 0%, #eef5ff 100%);
}

.ss-video-studio {
  padding: 18px;
}

.ss-video-sidebar {
  padding: 18px 12px;
}

.ss-video-preview-panel {
  padding: 18px 14px;
}

.ss-video-topbar,
.ss-video-storyboard,
.ss-video-canvas-card,
.ss-video-composer,
.ss-video-preview-panel :is(.ss-video-queue, .ss-video-model-card, .ss-video-settings, .ss-video-export),
.ss-video-preview-frame {
  box-shadow: 0 12px 32px rgba(41, 78, 130, 0.07);
}

.ss-video-topbar {
  min-height: 132px;
  padding: 20px;
  border-radius: 24px;
}

.ss-video-topbar h1 {
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.02;
}

.ss-video-topbar__actions {
  min-width: 270px;
}

.ss-video-storyboard,
.ss-video-canvas-card,
.ss-video-composer {
  margin-top: 14px;
  border-radius: 24px;
  padding: 16px;
}

.ss-video-scene-strip {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
}

.ss-video-scene {
  min-height: 108px;
  border-radius: 18px;
}

.ss-video-scene strong {
  margin-top: 52px;
}

.ss-video-canvas-viewport {
  position: relative;
  overflow: hidden;
  min-height: 470px;
  border: 1px solid #dce8f8;
  border-radius: 22px;
  background:
    radial-gradient(circle, rgba(31, 123, 255, 0.16) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(135deg, #fbfdff 0%, #eef6ff 100%);
  cursor: default;
  touch-action: none;
}

.ss-video-workflow-page[data-video-mode="pan"] .ss-video-canvas-viewport {
  cursor: grab;
}

.ss-video-workflow-page[data-video-mode="pan"] .ss-video-canvas-viewport.is-panning {
  cursor: grabbing;
}

.ss-video-board {
  position: absolute;
  left: 0;
  top: 0;
  width: 1320px;
  height: 560px;
  transform: translate(var(--video-pan-x), var(--video-pan-y)) scale(var(--video-scale));
  transform-origin: 0 0;
}

.ss-video-connector-layer {
  position: absolute;
  inset: 0;
  width: 1320px;
  height: 560px;
  pointer-events: none;
}

.ss-video-connector-layer line {
  stroke: #6d35ff;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.9;
  filter: drop-shadow(0 8px 10px rgba(75, 96, 255, 0.16));
}

.ss-video-node {
  width: 196px;
  cursor: grab;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  user-select: none;
}

.ss-video-node:active {
  cursor: grabbing;
}

.ss-video-node.is-selected {
  border-color: #5d34ff;
  box-shadow: 0 22px 46px rgba(72, 93, 255, 0.2);
  transform: translateY(-2px);
}

.ss-video-node.is-selected::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid rgba(93, 52, 255, 0.18);
  border-radius: 27px;
  pointer-events: none;
}

.ss-video-canvas-tools button.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #1f7bff, #6d35ff);
}

.ss-video-generate-button:disabled {
  opacity: 0.68;
  cursor: wait;
}

.ss-video-project.is-active,
.ss-video-scene.is-active {
  outline: 2px solid rgba(31, 123, 255, 0.16);
}

.ss-video-prompt-panel textarea {
  min-height: 92px;
}

.ss-video-queue article:first-of-type {
  position: relative;
  overflow: hidden;
}

.ss-video-queue article:first-of-type::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: calc(var(--video-progress, 68) * 1%);
  background: linear-gradient(90deg, #1f7bff, #6d35ff);
}

@media (max-width: 1280px) {
  .ss-video-workflow-page {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .ss-video-workflow-page {
    grid-template-columns: 1fr;
  }

  .ss-video-canvas-viewport {
    overflow: auto;
  }
}
/* Video workflow central canvas page. */
.ss-video-workflow-page--canvas-hub {
  display: block;
  grid-template-columns: none;
  min-height: calc(100vh - 74px);
  padding: 18px clamp(16px, 2.4vw, 34px) 42px;
  background: radial-gradient(circle at 18% 4%, rgba(38, 123, 255, 0.12), transparent 34%), linear-gradient(180deg, #fbfdff 0%, #eef6ff 100%);
  color: #0d172b;
}

.ss-video-canvas-shell {
  position: relative;
  overflow: hidden;
  max-width: 1800px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid rgba(195, 213, 238, 0.86);
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 30px 90px rgba(34, 72, 122, 0.14);
}

/* Video workflow central canvas compact header pass. */
.ss-video-workflow-page--canvas-hub .ss-video-canvas-shell {
  padding: 14px;
}

.ss-video-workflow-page--canvas-hub .ss-video-hub-header {
  gap: 16px;
  padding: 4px 4px 10px;
}

.ss-video-workflow-page--canvas-hub .ss-video-hub-title h1 {
  margin: 4px 0 6px;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.02;
}

.ss-video-workflow-page--canvas-hub .ss-video-hub-title p {
  font-size: 15px;
  line-height: 1.5;
}

.ss-video-workflow-page--canvas-hub .ss-video-hub-actions {
  min-width: 0;
}

.ss-video-workflow-page--canvas-hub .ss-video-project-strip {
  padding: 6px 4px 12px;
}
.ss-video-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 6px 18px;
}

.ss-video-hub-title h1 {
  margin: 6px 0 8px;
  color: #0d172b;
  font-size: clamp(34px, 3.7vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.ss-video-hub-title p {
  max-width: 720px;
  margin: 0;
  color: #62738d;
  font-size: 16px;
  line-height: 1.65;
}

.ss-video-hub-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: min(100%, 560px);
}

.ss-video-save-state {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #d9e6f7;
  border-radius: 999px;
  color: #2176ff;
  background: #f6faff;
  font-size: 13px;
  font-weight: 800;
}

.ss-video-project-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px 18px;
  overflow-x: auto;
}

.ss-video-project-strip button,
.ss-video-project-strip > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 6px 13px 6px 7px;
  border: 1px solid #dfe9f7;
  border-radius: 999px;
  background: #fff;
  color: #33445c;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.ss-video-project-strip button.is-active {
  border-color: rgba(31, 123, 255, 0.42);
  color: #116bff;
  box-shadow: 0 10px 28px rgba(31, 123, 255, 0.12);
}

.ss-video-project-strip img {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  object-fit: cover;
}

.ss-video-canvas-stage {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  border: 1px solid rgba(113, 137, 181, 0.32);
  border-radius: 28px;
  background: #05070d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 34px 90px rgba(6, 16, 38, 0.18);
}

.ss-video-canvas-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 23% 16%, rgba(31, 123, 255, 0.28), transparent 28%),
    radial-gradient(circle at 82% 24%, rgba(109, 53, 255, 0.2), transparent 30%),
    radial-gradient(circle, rgba(118, 158, 255, 0.2) 1px, transparent 1.4px) 0 0 / 24px 24px;
  opacity: 0.86;
}

.ss-video-node-library {
  position: absolute;
  z-index: 8;
  left: 18px;
  top: 18px;
  width: 236px;
  padding: 14px;
  border: 1px solid rgba(129, 165, 238, 0.22);
  border-radius: 22px;
  background: rgba(9, 14, 27, 0.82);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
}

.ss-video-node-library > span,
.ss-video-inspector > span {
  display: block;
  margin-bottom: 11px;
  color: #8fb8ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ss-video-node-library button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(129, 165, 238, 0.2);
  border-radius: 17px;
  color: #f8fbff;
  background: rgba(255, 255, 255, 0.07);
  text-align: left;
}

.ss-video-node-library button i {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #1f7bff, #6d35ff);
}

.ss-video-node-library button strong,
.ss-video-node-library button small {
  display: block;
}

.ss-video-node-library button small {
  color: #95a8ca;
  font-size: 11px;
}

.ss-video-canvas-toolbar {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 18px;
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(129, 165, 238, 0.22);
  border-radius: 999px;
  background: rgba(9, 14, 27, 0.78);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
}

.ss-video-canvas-toolbar button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(142, 177, 255, 0.2);
  border-radius: 50%;
  color: #a9c2ef;
  background: rgba(255, 255, 255, 0.06);
}

.ss-video-canvas-toolbar button.is-active,
.ss-video-canvas-toolbar button:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #1f7bff, #6d35ff);
}

.ss-video-canvas-stage .ss-video-canvas-viewport {
  position: absolute;
  inset: 0;
  min-height: 760px;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background: transparent;
  cursor: default;
}

.ss-video-workflow-page[data-video-mode="pan"] .ss-video-canvas-stage .ss-video-canvas-viewport {
  cursor: grab;
}

.ss-video-workflow-page[data-video-mode="pan"] .ss-video-canvas-stage .ss-video-canvas-viewport.is-panning {
  cursor: grabbing;
}

.ss-video-canvas-stage .ss-video-board {
  width: 1440px;
  height: 760px;
}

.ss-video-canvas-stage .ss-video-connector-layer {
  width: 1440px;
  height: 760px;
}

.ss-video-canvas-stage .ss-video-connector-layer line {
  stroke: #7b61ff;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.9;
  filter: drop-shadow(0 0 12px rgba(93, 114, 255, 0.7));
}

.ss-video-canvas-stage .ss-video-node {
  position: absolute;
  z-index: 5;
  width: 264px;
  min-height: 126px;
  padding: 13px;
  border: 1px solid rgba(130, 172, 255, 0.25);
  border-radius: 24px;
  color: #f7fbff;
  background: linear-gradient(180deg, rgba(23, 31, 52, 0.96), rgba(10, 14, 27, 0.94));
  box-shadow: 0 26px 62px rgba(0, 0, 0, 0.38);
  cursor: grab;
  user-select: none;
}

.ss-video-canvas-stage .ss-video-node.is-selected {
  border-color: #69a4ff;
  box-shadow: 0 0 0 2px rgba(31, 123, 255, 0.2), 0 0 34px rgba(31, 123, 255, 0.38), 0 26px 62px rgba(0, 0, 0, 0.42);
}

.ss-video-port {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 2px solid #05070d;
  border-radius: 50%;
  background: linear-gradient(135deg, #3ac4ff, #6d35ff);
  box-shadow: 0 0 0 4px rgba(63, 132, 255, 0.18);
  transform: translateY(-50%);
}

.ss-video-port--input {
  left: -7px;
}

.ss-video-port--output {
  right: -7px;
}

.ss-video-node__media {
  height: 96px;
  overflow: hidden;
  margin-bottom: 10px;
  border-radius: 16px;
  background: #0c1220;
}

.ss-video-node__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ss-video-node__body span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: #8fb8ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ss-video-node__body strong,
.ss-video-node__body small,
.ss-video-node__body p {
  display: block;
}

.ss-video-node__body strong {
  color: #fff;
  font-size: 15px;
  line-height: 1.25;
}

.ss-video-node__body small,
.ss-video-node__body p {
  margin-top: 5px;
  color: #9aaac7;
  font-size: 12px;
  line-height: 1.45;
}

.ss-video-inspector {
  position: absolute;
  z-index: 8;
  right: 18px;
  top: 18px;
  width: 282px;
  padding: 16px;
  border: 1px solid rgba(129, 165, 238, 0.22);
  border-radius: 22px;
  color: #eef5ff;
  background: rgba(9, 14, 27, 0.82);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
}

.ss-video-inspector strong {
  display: block;
  color: #fff;
  font-size: 20px;
  line-height: 1.2;
}

.ss-video-inspector small {
  display: block;
  margin: 5px 0 14px;
  color: #98a9c8;
}

.ss-video-inspector label,
.ss-video-prompt-dock label {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: #91a6c8;
  font-size: 12px;
  font-weight: 800;
}

.ss-video-inspector select,
.ss-video-prompt-dock textarea {
  width: 100%;
  border: 1px solid rgba(134, 170, 239, 0.28);
  border-radius: 14px;
  color: #eef5ff;
  background: rgba(255, 255, 255, 0.08);
}

.ss-video-inspector select {
  height: 42px;
  padding: 0 12px;
}

.ss-video-prompt-dock {
  position: absolute;
  z-index: 7;
  left: 284px;
  right: 324px;
  bottom: 18px;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(129, 165, 238, 0.22);
  border-radius: 22px;
  color: #eef5ff;
  background: rgba(9, 14, 27, 0.82);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
}

.ss-video-prompt-dock .ss-video-tabs {
  margin: 0;
}

.ss-video-prompt-dock textarea {
  min-height: 72px;
  padding: 12px;
  resize: vertical;
}

.ss-video-prompt-dock > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ss-video-workflow-page.is-fullscreen {
  position: fixed;
  z-index: 100000;
  inset: 0;
  overflow: auto;
  padding: 14px;
  background: #f6faff;
}

.ss-video-workflow-page.is-fullscreen .ss-video-canvas-shell {
  max-width: none;
  min-height: calc(100vh - 28px);
}

.ss-video-workflow-page.is-fullscreen .ss-video-canvas-stage,
.ss-video-workflow-page.is-fullscreen .ss-video-canvas-stage .ss-video-canvas-viewport {
  min-height: calc(100vh - 190px);
}

@media (max-width: 1180px) {
  .ss-video-hub-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ss-video-hub-actions {
    justify-content: flex-start;
  }

  .ss-video-inspector {
    top: auto;
    right: 14px;
    bottom: 14px;
    width: 250px;
  }

  .ss-video-prompt-dock {
    left: 14px;
    right: 284px;
  }
}

@media (max-width: 760px) {
  .ss-video-workflow-page--canvas-hub {
    padding: 10px;
  }

  .ss-video-canvas-shell {
    border-radius: 24px;
    padding: 12px;
  }

  .ss-video-node-library,
  .ss-video-inspector,
  .ss-video-prompt-dock,
  .ss-video-canvas-toolbar {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    transform: none;
  }

  .ss-video-canvas-stage {
    display: grid;
    gap: 12px;
    min-height: auto;
    padding: 12px;
  }

  .ss-video-canvas-stage .ss-video-canvas-viewport {
    position: relative;
    min-height: 520px;
    overflow: auto;
  }

  .ss-video-prompt-dock {
    margin: 0;
  }
}

/* Video workflow canvas refinement pass. */
.ss-video-workflow-page--canvas-hub {
  --ss-site-width: min(1880px, calc(100vw - 48px));
  padding: 14px 0 32px;
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-shell {
  width: min(100%, var(--ss-site-width));
  max-width: var(--ss-site-width);
  padding: 16px;
}

.ss-video-workflow-page--canvas-hub .ss-video-hub-header {
  display: block;
  padding: 6px 4px 12px;
}

.ss-video-workflow-page--canvas-hub .ss-video-hub-title h1 {
  margin: 4px 0 4px;
  font-size: clamp(30px, 2.7vw, 48px);
}

.ss-video-workflow-page--canvas-hub .ss-video-project-strip {
  padding: 4px 2px 12px;
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-stage {
  min-height: calc(100vh - 170px);
  border-radius: 30px;
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-stage .ss-video-canvas-viewport {
  min-height: calc(100vh - 170px);
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-stage .ss-video-board {
  width: 1680px;
  height: 980px;
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-stage .ss-video-connector-layer {
  width: 1680px;
  height: 980px;
}

.ss-video-canvas-tools {
  position: absolute;
  z-index: 12;
  left: 24px;
  bottom: 24px;
  width: min(420px, calc(100% - 48px));
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(129, 165, 238, 0.22);
  border-radius: 24px;
  background: rgba(9, 14, 27, 0.84);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

.ss-video-tool-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ss-video-tool-row button,
.ss-video-canvas-tools button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(142, 177, 255, 0.24);
  border-radius: 999px;
  color: #dce9ff;
  background: rgba(255, 255, 255, 0.07);
  font-weight: 900;
}

.ss-video-tool-row:first-child button {
  width: 38px;
  padding: 0;
}

.ss-video-canvas-tools button.is-active,
.ss-video-canvas-tools button:hover,
.ss-video-tool-primary {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #1f7bff, #6d35ff) !important;
}

.ss-video-canvas-tools .ss-video-save-state {
  min-height: 30px;
  width: fit-content;
  padding: 0 10px;
  border-color: rgba(143, 184, 255, 0.22);
  color: #8fb8ff;
  background: rgba(255, 255, 255, 0.07);
  font-size: 11px;
}

.ss-video-canvas-toolbar,
.ss-video-prompt-dock {
  display: none !important;
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-stage .ss-video-node {
  width: 220px;
  min-height: 0;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 10px;
  border-radius: 26px;
}

.ss-video-node__edit {
  position: absolute;
  z-index: 7;
  right: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: #eaf3ff;
  background: rgba(5, 7, 13, 0.58);
  backdrop-filter: blur(10px);
}

.ss-video-workflow-page--canvas-hub .ss-video-node__media {
  height: auto;
  min-height: 0;
  margin: 0 0 8px;
  border-radius: 18px;
}

.ss-video-workflow-page--canvas-hub .ss-video-node__body {
  min-width: 0;
}

.ss-video-workflow-page--canvas-hub .ss-video-node__body span {
  margin-bottom: 5px;
  font-size: 10px;
}

.ss-video-workflow-page--canvas-hub .ss-video-node__body strong {
  font-size: 14px;
}

.ss-video-workflow-page--canvas-hub .ss-video-node__body small,
.ss-video-workflow-page--canvas-hub .ss-video-node__body p {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ss-video-port {
  width: 10px;
  height: 10px;
  border-width: 1px;
  box-shadow: 0 0 0 2px rgba(63, 132, 255, 0.18);
}

.ss-video-port--input {
  left: -5px;
}

.ss-video-port--output {
  right: -5px;
}

.ss-video-canvas-stage .ss-video-connector-layer line {
  pointer-events: stroke;
  cursor: pointer;
}

.ss-video-canvas-stage .ss-video-connector-layer line.is-dragging,
.ss-video-canvas-stage .ss-video-connector-layer line:hover {
  stroke: #35d4ff;
  opacity: 1;
}

.ss-video-editor-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(6, 10, 20, 0.54);
  backdrop-filter: blur(12px);
}

.ss-video-editor-modal.is-open {
  display: grid;
}

.ss-video-editor {
  position: relative;
  width: min(560px, 100%);
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid #dbe7f8;
  border-radius: 28px;
  color: #0d172b;
  background: #ffffff;
  box-shadow: 0 34px 90px rgba(6, 16, 38, 0.24);
}

.ss-video-editor > span {
  color: #2176ff;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.ss-video-editor h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.08;
}

.ss-video-editor label {
  display: grid;
  gap: 8px;
  color: #60718a;
  font-size: 13px;
  font-weight: 900;
}

.ss-video-editor input,
.ss-video-editor textarea {
  width: 100%;
  border: 1px solid #d6e3f4;
  border-radius: 16px;
  color: #10203a;
  background: #f8fbff;
}

.ss-video-editor input {
  height: 46px;
  padding: 0 14px;
}

.ss-video-editor textarea {
  min-height: 140px;
  padding: 12px 14px;
  resize: vertical;
}

.ss-video-editor__file small {
  color: #8a9bb4;
  font-size: 12px;
}

.ss-video-editor__close {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 36px;
  height: 36px;
  border: 1px solid #dce7f7;
  border-radius: 50%;
  color: #62738d;
  background: #f7fbff;
}

.ss-video-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .ss-video-workflow-page--canvas-hub {
    --ss-site-width: calc(100vw - 24px);
  }

  .ss-video-node-library,
  .ss-video-inspector {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    margin: 12px;
  }

  .ss-video-canvas-tools {
    left: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
  }
}
/* Video workflow selected reference layout: top bars + black infinite canvas. */
body.signshi-view-video-workflow {
  margin: 0;
  overflow-x: hidden;
  background: #ffffff;
}

body.signshi-view-video-workflow .ss-header,
body.signshi-view-video-workflow .ss-site-footer,
body.signshi-view-video-workflow .ss-floating,
body.signshi-view-video-workflow .ss-chat-global-mini {
  display: none !important;
}

body.signshi-view-video-workflow .site,
body.signshi-view-video-workflow .site-main {
  min-height: 100vh;
  background: #ffffff;
}

.ss-video-workflow-page--canvas-hub {
  --video-blue: #2563ff;
  --video-violet: #6f35f4;
  --video-ink: #080f22;
  --video-muted: #536176;
  --video-line: #dce5f2;
  --video-canvas: #020815;
  width: 100%;
  min-height: 100vh;
  padding: 0 !important;
  color: var(--video-ink);
  background: #ffffff !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ss-video-appbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  height: 80px;
  padding: 0 46px;
  border-bottom: 1px solid var(--video-line);
  background: #fff;
}

.ss-video-appbar__brand {
  display: inline-flex;
  align-items: center;
  width: max-content;
  color: #071024;
  text-decoration: none;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.ss-video-appbar__brand b {
  margin-left: 1px;
  color: var(--video-blue);
  font-size: 30px;
  font-weight: 950;
}

.ss-video-appbar__tabs {
  display: inline-flex;
  align-items: stretch;
  justify-self: center;
  gap: 46px;
  height: 100%;
}

.ss-video-appbar__tabs a,
.ss-video-appbar__tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #2f3a4f;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
}

.ss-video-appbar__tabs .is-active {
  color: var(--video-blue);
}

.ss-video-appbar__tabs .is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--video-blue);
}

.ss-video-appbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.ss-video-appbar__actions > button:not(.ss-video-avatar) {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #0a1225;
  background: transparent;
}

.ss-video-appbar__actions svg {
  width: 23px;
  height: 23px;
  stroke-width: 2.1;
}

.ss-video-avatar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 0 16px;
  border: 0;
  border-left: 1px solid #dbe4f0;
  border-radius: 0;
  background: transparent;
}

.ss-video-avatar span {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  background: #071024;
  font-size: 15px;
  font-weight: 900;
}

.ss-video-avatar svg {
  width: 16px;
  height: 16px;
}

.ss-video-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
  padding: 0 46px;
  border-bottom: 1px solid var(--video-line);
  background: #fff;
}

.ss-video-project-title,
.ss-video-subbar__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ss-video-project-title a,
.ss-video-project-title > button,
.ss-video-subbar__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  color: #0b1427;
  background: transparent;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
}

.ss-video-project-title h1 {
  margin: 0;
  color: #0b1427;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}

.ss-video-project-title span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #60718a;
  font-size: 13px;
  font-weight: 650;
}

.ss-video-project-title em {
  font-style: normal;
}

.ss-video-subbar__actions button svg,
.ss-video-project-title svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.ss-video-subbar__primary {
  min-width: 176px;
  min-height: 46px !important;
  padding: 0 24px !important;
  border-radius: 8px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--video-blue), var(--video-violet)) !important;
  box-shadow: 0 12px 26px rgba(37, 99, 255, 0.26);
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ss-video-workflow-page--canvas-hub .ss-video-hub-header,
.ss-video-workflow-page--canvas-hub .ss-video-project-strip {
  display: none !important;
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-stage {
  position: relative;
  height: calc(100vh - 154px);
  min-height: 760px !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: #020815 !important;
  box-shadow: none !important;
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 68% 24%, rgba(111, 53, 244, 0.13), transparent 33%),
    radial-gradient(circle, rgba(31, 118, 255, 0.33) 1px, transparent 1.6px) 0 0 / 16px 16px;
  opacity: 0.75;
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-stage .ss-video-canvas-viewport {
  position: absolute;
  inset: 0;
  min-height: 100% !important;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-stage .ss-video-board {
  width: 1680px;
  height: 980px;
  transform: translate(var(--video-pan-x), var(--video-pan-y)) scale(var(--video-scale));
  transform-origin: 0 0;
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-stage .ss-video-connector-layer {
  position: absolute;
  inset: 0;
  width: 1680px;
  height: 980px;
  overflow: visible;
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-stage .ss-video-connector-layer line {
  stroke: #7154ff;
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: 0.95;
  pointer-events: stroke;
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(113, 84, 255, 0.6));
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-stage .ss-video-connector-layer line.is-dragging,
.ss-video-workflow-page--canvas-hub .ss-video-canvas-stage .ss-video-connector-layer line:hover {
  stroke: #4fc6ff;
}

.ss-video-node-library {
  position: absolute !important;
  z-index: 9;
  left: 38px !important;
  top: 34px !important;
  display: grid;
  gap: 6px;
  width: 148px !important;
  padding: 12px 10px !important;
  border: 1px solid rgba(153, 177, 220, 0.26) !important;
  border-radius: 8px !important;
  background: rgba(9, 18, 34, 0.82) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
}

.ss-video-node-library > span {
  display: none !important;
}

.ss-video-node-library button {
  display: grid !important;
  grid-template-columns: 28px 1fr !important;
  align-items: center;
  gap: 12px !important;
  width: 100%;
  min-height: 42px;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #fff !important;
  background: transparent !important;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
}

.ss-video-node-library button:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}

.ss-video-node-library button i,
.ss-video-node-library button svg {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  background: transparent !important;
}

.ss-video-node-library button small {
  display: none !important;
}

.ss-video-canvas-tools {
  position: absolute;
  z-index: 10;
  left: 40px !important;
  bottom: 48px !important;
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  width: auto !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(153, 177, 220, 0.22) !important;
  border-radius: 10px !important;
  background: rgba(9, 18, 34, 0.86) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
}

.ss-video-canvas-tools .ss-video-tool-row,
.ss-video-canvas-tools .ss-video-save-state {
  display: contents;
}

.ss-video-canvas-tools button {
  display: inline-grid !important;
  place-items: center;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 1px solid rgba(158, 184, 225, 0.25) !important;
  border-radius: 6px !important;
  color: #fff !important;
  background: transparent !important;
  font-size: 12px;
  font-weight: 900;
}

.ss-video-canvas-tools button.is-active,
.ss-video-canvas-tools button:hover {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--video-blue), var(--video-violet)) !important;
}

.ss-video-canvas-tools svg {
  width: 22px;
  height: 22px;
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-stage .ss-video-node {
  position: absolute;
  z-index: 5;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 242px;
  min-height: 0 !important;
  aspect-ratio: 1 / 1;
  padding: 16px;
  border: 1px solid rgba(129, 153, 195, 0.5);
  border-radius: 12px !important;
  color: #fff;
  background: linear-gradient(180deg, rgba(19, 31, 52, 0.92), rgba(7, 13, 27, 0.96));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
  cursor: grab;
  user-select: none;
}

.ss-video-workflow-page--canvas-hub .ss-video-canvas-stage .ss-video-node.is-selected {
  border-color: #2f7bff;
  box-shadow: 0 0 0 2px rgba(47, 123, 255, 0.5), 0 0 34px rgba(47, 123, 255, 0.35);
}

.ss-video-node__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 30px;
  margin-bottom: 10px;
  color: #f7fbff;
}

.ss-video-node__head > svg,
.ss-video-node__head > i {
  width: 24px;
  height: 24px;
}

.ss-video-node__head span {
  font-size: 14px;
  font-weight: 850;
}

.ss-video-node__head b {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-left: auto;
  border: 1px solid #35ca70;
  border-radius: 50%;
}

.ss-video-node__head b::after {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 1.5px solid #35ca70;
  border-bottom: 1.5px solid #35ca70;
  transform: rotate(-45deg) translate(1px, -1px);
}

.ss-video-node__edit,
.ss-video-node__replace {
  position: absolute;
  z-index: 7;
  right: 12px;
  top: 12px;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #eef5ff;
  background: rgba(2, 8, 21, 0.62);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.ss-video-node__replace input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.ss-video-node__media {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
  overflow: hidden;
  border-radius: 5px !important;
  background: #081224;
}

.ss-video-node__media img,
.ss-video-node__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ss-video-node--image .ss-video-node__media,
.ss-video-node--video .ss-video-node__media {
  aspect-ratio: 16 / 10;
}

.ss-video-node--prompt .ss-video-node__body,
.ss-video-node--output .ss-video-node__export {
  min-height: 0;
  align-self: stretch;
}

.ss-video-node__body,
.ss-video-node__export {
  min-width: 0;
}

.ss-video-node__body > span {
  display: none !important;
}

.ss-video-node__body strong,
.ss-video-node__export strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 850;
}

.ss-video-node__body small,
.ss-video-node__export small,
.ss-video-node__body p,
.ss-video-node__export p {
  display: block;
  color: #b6c2d6;
  font-size: 12px;
  line-height: 1.45;
}

.ss-video-node__body small,
.ss-video-node__export small {
  margin-top: 5px;
}

.ss-video-node__body p,
.ss-video-node__export p {
  margin: 7px 0 0;
  max-height: 84px;
  overflow: auto;
}

.ss-video-node [contenteditable="true"] {
  outline: none;
  cursor: text;
  user-select: text;
  border-radius: 5px;
}

.ss-video-node [contenteditable="true"]:focus {
  background: rgba(37, 99, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(80, 145, 255, 0.5);
}

.ss-video-node__export {
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  border: 1px solid rgba(142, 165, 207, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.ss-video-node__export > svg,
.ss-video-node__export > i {
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  color: #fff;
}

.ss-video-port {
  position: absolute;
  z-index: 8;
  top: 50%;
  width: 12px !important;
  height: 12px !important;
  border: 2px solid #2435ff !important;
  border-radius: 50%;
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(93, 111, 255, 0.28) !important;
  transform: translateY(-50%);
}

.ss-video-port--input {
  left: -7px !important;
}

.ss-video-port--output {
  right: -7px !important;
}

.ss-video-inspector {
  position: absolute !important;
  z-index: 11;
  top: 34px !important;
  right: 52px !important;
  width: 280px !important;
  padding: 22px !important;
  border: 1px solid rgba(153, 177, 220, 0.25) !important;
  border-radius: 8px !important;
  color: #fff;
  background: rgba(9, 18, 34, 0.86) !important;
  box-shadow: none !important;
  backdrop-filter: blur(20px);
}

.ss-video-inspector__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.ss-video-inspector__head > svg,
.ss-video-inspector__head > i {
  width: 24px;
  height: 24px;
}

.ss-video-inspector strong {
  color: #fff;
  font-size: 15px;
  font-weight: 850;
}

.ss-video-inspector__head button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: transparent;
}

.ss-video-inspector > small {
  display: none;
}

.ss-video-inspector label {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  color: #d5deee;
  font-size: 13px;
  font-weight: 650;
}

.ss-video-inspector select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(153, 177, 220, 0.26);
  border-radius: 6px;
  color: #fff;
  background: rgba(10, 20, 38, 0.96);
}

.ss-video-inspector__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  margin-top: 24px;
  border: 1px solid var(--video-blue);
  border-radius: 6px;
  color: #fff;
  background: transparent;
  font-size: 14px;
  font-weight: 850;
}

.ss-video-minimap {
  position: absolute;
  z-index: 9;
  right: 46px;
  bottom: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 288px;
  height: 116px;
  border: 1px solid rgba(153, 177, 220, 0.22);
  border-radius: 8px;
  background: rgba(9, 18, 34, 0.72);
  backdrop-filter: blur(16px);
}

.ss-video-minimap span {
  width: 34px;
  height: 18px;
  border-radius: 2px;
  background: #7784a8;
}

.ss-video-minimap span:nth-child(2) { background: #2563ff; }
.ss-video-minimap span:nth-child(3) { background: #7154ff; }
.ss-video-minimap span:nth-child(4) { background: #8792b1; }

.ss-video-minimap b {
  position: absolute;
  left: 52px;
  right: 52px;
  top: 40px;
  bottom: 35px;
  border: 2px solid var(--video-blue);
}

.ss-video-editor-modal {
  display: none !important;
}

.ss-video-workflow-page.is-fullscreen {
  position: fixed;
  z-index: 100000;
  inset: 0;
  padding: 0 !important;
  overflow: hidden;
  background: #fff;
}

.ss-video-workflow-page.is-fullscreen .ss-video-canvas-stage {
  height: calc(100vh - 154px);
}

@media (max-width: 1180px) {
  .ss-video-appbar,
  .ss-video-subbar {
    padding-inline: 24px;
  }

  .ss-video-appbar {
    grid-template-columns: auto 1fr auto;
  }

  .ss-video-appbar__tabs {
    gap: 22px;
  }

  .ss-video-inspector {
    right: 24px !important;
  }

  .ss-video-minimap {
    right: 24px;
  }
}

@media (max-width: 760px) {
  .ss-video-appbar {
    grid-template-columns: 1fr auto;
    height: auto;
    min-height: 70px;
    gap: 12px;
    padding: 14px 16px;
  }

  .ss-video-appbar__tabs {
    grid-column: 1 / -1;
    order: 3;
    justify-self: stretch;
    height: 40px;
    overflow-x: auto;
  }

  .ss-video-subbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 16px;
  }

  .ss-video-subbar__actions {
    width: 100%;
    overflow-x: auto;
  }

  .ss-video-workflow-page--canvas-hub .ss-video-canvas-stage {
    height: calc(100vh - 202px);
    min-height: 640px !important;
  }

  .ss-video-node-library,
  .ss-video-inspector,
  .ss-video-minimap,
  .ss-video-canvas-tools {
    transform: scale(0.88);
    transform-origin: left top;
  }

  .ss-video-inspector {
    top: 16px !important;
    right: 16px !important;
  }

  .ss-video-minimap {
    display: none;
  }
}

/* Inspiration option 2: precision adaptive prompt library. */
body.signshi-view-gallery {
  background: #ffffff !important;
}

.signshi-view-gallery .ss-header--gallery {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #e8edf5 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.signshi-view-gallery .ss-header--gallery .ss-nav {
  width: 100% !important;
  max-width: none !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.signshi-view-gallery .ss-header--gallery .ss-search {
  height: 42px !important;
  border: 1px solid #dce5f1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.signshi-view-gallery .ss-white-home--inspiration-only {
  --ss-inspiration-gap: 10px;
  width: calc(100% - 20px) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: #0b1730 !important;
  background: #ffffff !important;
  overflow: visible !important;
}

.signshi-view-gallery .ss-white-chip-row--top,
.signshi-view-gallery .ss-white-hero--wide {
  display: none !important;
}

.signshi-view-gallery .ss-inspiration-toolbar {
  position: relative;
  z-index: 30;
  min-height: 62px;
  padding: 8px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #edf1f7;
  background: #ffffff;
}

.signshi-view-gallery .ss-inspiration-toolbar h1 {
  margin: 0;
  color: #101a2e;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -0.025em;
}

.signshi-view-gallery .ss-inspiration-toolbar__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.signshi-view-gallery .ss-inspiration-control,
.signshi-view-gallery .ss-inspiration-menu > summary {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #101a2e;
  background: #ffffff;
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.signshi-view-gallery .ss-inspiration-control:hover,
.signshi-view-gallery .ss-inspiration-menu > summary:hover,
.signshi-view-gallery .ss-inspiration-menu[open] > summary {
  border-color: #c8dafd;
  color: #176cff;
  background: #f8fbff;
}

.signshi-view-gallery .ss-inspiration-control svg,
.signshi-view-gallery .ss-inspiration-menu > summary svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  stroke-width: 2;
}

.signshi-view-gallery .ss-inspiration-control select {
  max-width: 126px;
  border: 0;
  padding: 0 20px 0 0;
  color: inherit;
  background-color: transparent;
  font: inherit;
  outline: 0;
  cursor: pointer;
}

.signshi-view-gallery .ss-inspiration-menu {
  position: relative;
}

.signshi-view-gallery .ss-inspiration-menu > summary {
  list-style: none;
}

.signshi-view-gallery .ss-inspiration-menu > summary::-webkit-details-marker {
  display: none;
}

.signshi-view-gallery .ss-inspiration-menu--filters > summary {
  border-color: #8ab7ff;
  color: #176cff;
  padding-inline: 14px;
}

.signshi-view-gallery .ss-inspiration-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  border: 1px solid #dfe7f2;
  border-radius: 14px;
  padding: 8px;
  display: grid;
  gap: 4px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(22, 48, 91, 0.15);
}

.signshi-view-gallery .ss-inspiration-menu__panel a {
  min-height: 36px;
  border-radius: 8px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  color: #3c4c66;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.signshi-view-gallery .ss-inspiration-menu__panel a:hover,
.signshi-view-gallery .ss-inspiration-menu__panel a.is-active {
  color: #176cff;
  background: #edf5ff;
}

.signshi-view-gallery .ss-inspiration-menu__panel--categories {
  width: min(360px, calc(100vw - 30px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.signshi-view-gallery .ss-white-inspiration-board {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.signshi-view-gallery .ss-white-inspiration-board .ss-gallery-main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.signshi-view-gallery .ss-white-gallery-masonry,
.signshi-view-gallery .ss-gallery-main > .ss-masonry {
  width: 100% !important;
  display: block !important;
  columns: 5 !important;
  column-count: 5 !important;
  column-gap: var(--ss-inspiration-gap) !important;
  gap: 0 !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 0 var(--ss-inspiration-gap) !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  flex-direction: column !important;
  break-inside: avoid !important;
  page-break-inside: avoid !important;
  vertical-align: top !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: none !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card[hidden] {
  display: none !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card:hover,
.signshi-view-gallery .ss-masonry-card.ss-white-card:focus-visible {
  transform: none !important;
  box-shadow: 0 0 0 1px #bcd3ff !important;
  outline: 0 !important;
}

.signshi-view-gallery .ss-white-card__media {
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
  background: #edf3fa;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__media > img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  transform: none !important;
  clip-path: none !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__stats {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 2 !important;
  gap: 8px !important;
  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: 0 1px 5px rgba(3, 9, 20, 0.75) !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-masonry-card__shade {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 8px 9px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  color: #101a2e !important;
  background: #ffffff !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-masonry-card__meta {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-masonry-card__meta strong {
  overflow: hidden !important;
  color: #14213a !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: -0.015em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-masonry-card__meta em {
  overflow: hidden !important;
  color: #687790 !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__prompt-action {
  min-width: 64px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 7px !important;
  padding: 0 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  background: #176cff !important;
  box-shadow: none !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
}

.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__prompt-action:hover,
.signshi-view-gallery .ss-masonry-card.ss-white-card .ss-white-card__prompt-action:focus-visible {
  background: #0759df !important;
  transform: none !important;
  box-shadow: none !important;
}

.signshi-view-gallery .ss-gallery-filter-status {
  min-height: 0;
  margin: 0;
  color: #687790;
  font-size: 12px;
}

.signshi-view-gallery .ss-gallery-filter-status:empty {
  display: none;
}

@media (max-width: 1320px) {
  .signshi-view-gallery .ss-white-gallery-masonry,
  .signshi-view-gallery .ss-gallery-main > .ss-masonry {
    columns: 4 !important;
    column-count: 4 !important;
  }
}

@media (max-width: 980px) {
  .signshi-view-gallery .ss-white-gallery-masonry,
  .signshi-view-gallery .ss-gallery-main > .ss-masonry {
    columns: 3 !important;
    column-count: 3 !important;
  }
}

@media (max-width: 760px) {
  .signshi-view-gallery .ss-header--gallery {
    padding: 8px 10px 0 !important;
    border-bottom: 0 !important;
  }

  .signshi-view-gallery .ss-header--gallery .ss-nav {
    padding: 10px 12px 0 !important;
    border-radius: 24px !important;
  }

  .signshi-view-gallery .ss-white-home--inspiration-only {
    width: 100% !important;
    padding: 0 10px !important;
  }

  .signshi-view-gallery .ss-inspiration-toolbar {
    min-height: 56px;
    padding-inline: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .signshi-view-gallery .ss-inspiration-toolbar__controls {
    width: 100%;
    padding-bottom: 8px;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .signshi-view-gallery .ss-inspiration-toolbar__controls::-webkit-scrollbar {
    display: none;
  }

  .signshi-view-gallery .ss-inspiration-control,
  .signshi-view-gallery .ss-inspiration-menu {
    flex: 0 0 auto;
  }

  .signshi-view-gallery .ss-inspiration-menu__panel {
    position: fixed;
    top: auto;
    right: 10px;
    left: 10px;
  }

  .signshi-view-gallery .ss-white-gallery-masonry,
  .signshi-view-gallery .ss-gallery-main > .ss-masonry {
    columns: 2 !important;
    column-count: 2 !important;
  }
}

@media (max-width: 430px) {
  .signshi-view-gallery .ss-white-gallery-masonry,
  .signshi-view-gallery .ss-gallery-main > .ss-masonry {
    columns: 1 !important;
    column-count: 1 !important;
  }

  .signshi-view-gallery .ss-inspiration-menu__panel--categories {
    grid-template-columns: 1fr;
  }
}


/* Inspiration option 2 adaptive media correction. */
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry,
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry {
  display: block !important;
  columns: 5 !important;
  column-count: 5 !important;
  column-gap: var(--ss-inspiration-gap) !important;
  gap: 0 !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card,
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card:nth-child(n) {
  display: inline-flex !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 0 var(--ss-inspiration-gap) !important;
  overflow: hidden !important;
  flex: none !important;
  break-inside: avoid !important;
  background: #ffffff !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card .ss-white-card__media {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  flex: none !important;
  overflow: hidden !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card .ss-white-card__media > img,
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  display: block !important;
  object-fit: contain !important;
  transform: none !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card .ss-masonry-card__shade {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 8px 9px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: normal !important;
  gap: 8px !important;
  flex: none !important;
  background: #ffffff !important;
  border-radius: 0 !important;
  clip-path: none !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card .ss-masonry-card__meta {
  display: grid !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  align-items: center !important;
  align-content: center !important;
}

@media (max-width: 1320px) {
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry,
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry {
    columns: 4 !important;
    column-count: 4 !important;
  }
}

@media (max-width: 980px) {
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry,
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry {
    columns: 3 !important;
    column-count: 3 !important;
  }
}

@media (max-width: 760px) {
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry,
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry {
    columns: 2 !important;
    column-count: 2 !important;
  }
}

@media (max-width: 430px) {
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry,
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry {
    columns: 1 !important;
    column-count: 1 !important;
  }
}


/* Inspiration option 2 nine-column density correction. */
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry,
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry {
  columns: 9 !important;
  column-count: 9 !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card .ss-masonry-card__shade {
  min-height: 46px !important;
  padding: 6px 7px !important;
  gap: 6px !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card .ss-masonry-card__meta {
  gap: 2px !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card .ss-masonry-card__meta strong {
  font-size: 11px !important;
  line-height: 1.1 !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card .ss-masonry-card__meta em {
  font-size: 9px !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card .ss-white-card__prompt-action {
  min-width: 52px !important;
  height: 25px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card .ss-white-card__stats {
  top: 6px !important;
  right: 6px !important;
  gap: 5px !important;
  font-size: 9px !important;
}

@media (max-width: 1320px) {
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry,
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry {
    columns: 6 !important;
    column-count: 6 !important;
  }
}

@media (max-width: 980px) {
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry,
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry {
    columns: 4 !important;
    column-count: 4 !important;
  }
}


/* Inspiration option 2 mobile containment correction. */
@media (max-width: 760px) {
  html,
  body.signshi-body,
  body.signshi-view-gallery,
  #page,
  .site {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .signshi-view-gallery .ss-header--gallery {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 8px 10px 0 !important;
    overflow: hidden !important;
  }

  .signshi-view-gallery .ss-header--gallery .ss-nav {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 10px 12px 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  .signshi-view-gallery .ss-header--gallery .ss-brand {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  .signshi-view-gallery .ss-header--gallery .ss-auth {
    grid-column: 2 !important;
    min-width: 0 !important;
    justify-self: end !important;
  }

  .signshi-view-gallery .ss-header--gallery .ss-search {
    grid-column: 1 / -1 !important;
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .signshi-view-gallery .ss-header--gallery .ss-nav__links {
    grid-column: 1 / -1 !important;
    order: 4 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 2px 0 10px !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  .signshi-view-gallery .ss-header--gallery .ss-nav__links::-webkit-scrollbar {
    display: none !important;
  }

  .signshi-view-gallery .ss-header--gallery .ss-nav__links a {
    flex: 0 0 auto !important;
  }

  .signshi-view-gallery .ss-white-home--inspiration-only,
  .signshi-view-gallery .ss-white-inspiration-board,
  .signshi-view-gallery .ss-white-inspiration-board .ss-gallery-main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .signshi-view-gallery .ss-inspiration-toolbar,
  .signshi-view-gallery .ss-inspiration-toolbar__controls {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry,
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    columns: 2 !important;
    column-count: 2 !important;
    column-width: auto !important;
    column-gap: var(--ss-inspiration-gap) !important;
  }

  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card,
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card:nth-child(n) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 340px) {
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry,
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry {
    columns: 1 !important;
    column-count: 1 !important;
  }
}

/* Inspiration option 2 exact ten-pixel gallery spacing. */
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-white-gallery-masonry,
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry {
  column-gap: 10px !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card,
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card:nth-child(n) {
  margin: 0 0 10px !important;
}
/* Image to Prompt studio split selected layout. */
body.signshi-view-prompt-tool,
body.signshi-view-prompt-tool #page,
body.signshi-view-prompt-tool .site { background: #fff !important; }

body.signshi-view-prompt-tool .ss-header--gallery {
  width: 100% !important; margin: 0 !important; padding: 0 !important; background: #fff !important;
  border: 0 !important; border-bottom: 1px solid #e7edf5 !important; box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-header--gallery .ss-nav {
  width: 100% !important; max-width: none !important; min-height: 72px !important; margin: 0 !important;
  padding: 0 24px !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-header--gallery .ss-search {
  height: 42px !important; border: 1px solid #dbe4f1 !important; border-radius: 10px !important;
  background: #fff !important; box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-header--gallery .ss-auth .ss-primary,
body.signshi-view-prompt-tool .ss-image-tool .ss-primary {
  border-color: #176cff !important; background: #176cff !important; color: #fff !important; box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-header--gallery .ss-auth .ss-outline,
body.signshi-view-prompt-tool .ss-image-tool .ss-outline {
  border-color: #b9ceff !important; background: #fff !important; color: #176cff !important; box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-tool-shell.ss-tool-shell--studio-split {
  width: min(1500px, calc(100% - 96px)) !important; margin: 0 auto 72px !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-tool-shell--studio-split .ss-tool-hero {
  min-height: 174px !important; margin: 0 !important; padding: 38px 18px 28px !important; display: flex !important;
  align-items: flex-end !important; background: transparent !important; background-image: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-tool-shell--studio-split .ss-tool-hero::before,
body.signshi-view-prompt-tool .ss-tool-shell--studio-split .ss-tool-hero::after { display: none !important; }

body.signshi-view-prompt-tool .ss-tool-hero__copy { max-width: 760px; }

body.signshi-view-prompt-tool .ss-tool-hero__copy > span {
  display: block; margin-bottom: 12px; color: #176cff; font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
}

body.signshi-view-prompt-tool .ss-tool-hero h1 {
  margin: 0; color: #101c33; font-size: clamp(32px, 3vw, 48px) !important; line-height: 1.08 !important; letter-spacing: -.04em !important;
}

body.signshi-view-prompt-tool .ss-tool-hero p {
  max-width: 700px; margin: 12px 0 0 !important; color: #65748d !important; font-size: 16px !important; line-height: 1.65 !important;
}

body.signshi-view-prompt-tool .ss-tool-shell--studio-split .ss-image-tool {
  min-height: 640px; display: grid !important; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr) !important; gap: 0 !important;
  overflow: hidden; background: #fff !important; border: 1px solid #dfe7f1 !important; border-radius: 10px !important;
  box-shadow: 0 18px 42px rgba(30, 63, 111, .08) !important;
}

body.signshi-view-prompt-tool .ss-image-tool .ss-upload-panel,
body.signshi-view-prompt-tool .ss-image-tool .ss-generate-panel {
  min-width: 0; padding: 24px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-image-tool .ss-upload-panel {
  display: flex; min-height: 640px; background: #f8fbff !important;
}

body.signshi-view-prompt-tool .ss-image-tool .ss-generate-panel {
  display: flex; flex-direction: column; min-height: 640px; border-left: 1px solid #e2e9f3 !important;
}

body.signshi-view-prompt-tool .ss-upload-zone,
body.signshi-view-prompt-tool .ss-preview-card {
  width: 100%; min-height: 100% !important; margin: 0 !important; padding: 34px !important; display: flex !important; flex: 1 1 auto;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #f3f8ff !important;
  border: 1.5px dashed #79a9ff !important; border-radius: 10px !important; box-shadow: none !important; cursor: pointer;
}

body.signshi-view-prompt-tool .ss-upload-zone input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

body.signshi-view-prompt-tool .ss-upload-zone__icon {
  width: 72px !important; height: 72px !important; display: grid !important; place-items: center; color: #176cff; background: #fff;
  border: 1px solid #dbe8ff; border-radius: 18px !important;
}

body.signshi-view-prompt-tool .ss-upload-zone__icon svg { width: 34px; height: 34px; stroke-width: 1.7; }

body.signshi-view-prompt-tool .ss-upload-zone strong {
  margin-top: 8px; color: #13213a; font-size: 23px !important; line-height: 1.2;
}

body.signshi-view-prompt-tool .ss-upload-zone em,
body.signshi-view-prompt-tool .ss-upload-zone small {
  max-width: 330px; color: #6c7b93 !important; font-size: 14px !important; font-style: normal; line-height: 1.55; text-align: center;
}

body.signshi-view-prompt-tool .ss-upload-zone small { padding-top: 12px; border-top: 1px solid #cfe0f8; }

body.signshi-view-prompt-tool .ss-upload-zone__sample {
  width: 146px; height: 110px; margin-top: 14px; display: grid; place-items: center; color: #cad7e9; border: 1px solid #d8e4f4; border-radius: 12px;
}

body.signshi-view-prompt-tool .ss-upload-zone__sample svg { width: 50px; height: 50px; stroke-width: 1.25; }

body.signshi-view-prompt-tool .ss-preview-card { position: relative; justify-content: flex-start; padding: 18px !important; cursor: default; }
body.signshi-view-prompt-tool .ss-preview-card__label { width: 100%; color: #65748d; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }

body.signshi-view-prompt-tool .ss-preview-card img {
  width: 100% !important; min-height: 0 !important; flex: 1 1 auto; object-fit: contain !important; border: 0 !important; border-radius: 6px !important; background: #fff;
}

body.signshi-view-prompt-tool .ss-preview-card .ss-outline { width: 100%; min-height: 42px; margin-top: 14px !important; }

body.signshi-view-prompt-tool .ss-prompt-controls {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(162px, auto); gap: 12px; align-items: end;
}

body.signshi-view-prompt-tool .ss-tool-options { display: contents !important; }

body.signshi-view-prompt-tool .ss-tool-options label,
body.signshi-view-prompt-tool .ss-output-label {
  display: flex !important; flex-direction: column; gap: 8px; color: #182640 !important; font-size: 13px !important; font-weight: 800 !important;
}

body.signshi-view-prompt-tool .ss-tool-options select {
  width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 0 14px !important; color: #1c2a42 !important;
  background: #fff !important; border: 1px solid #dbe4f1 !important; border-radius: 8px !important; box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-generate-btn {
  min-height: 48px !important; margin: 21px 0 0 !important; padding: 0 16px !important; border-radius: 8px !important; font-weight: 800 !important;
}

body.signshi-view-prompt-tool .ss-generate-btn:disabled {
  color: #8591a4 !important; background: #e8edf4 !important; border-color: #e8edf4 !important; cursor: not-allowed;
}

body.signshi-view-prompt-tool .ss-usage-card {
  min-height: 54px !important; margin: 16px 0 0 !important; padding: 10px 14px !important; display: flex !important; align-items: center;
  justify-content: space-between; gap: 12px; color: #5d6d85 !important; background: #f4f8ff !important; border: 1px solid #dce8fb !important;
  border-radius: 8px !important; box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-usage-card div { display: flex; align-items: baseline; gap: 8px; }
body.signshi-view-prompt-tool .ss-usage-card strong { color: #176cff !important; font-size: 14px !important; }
body.signshi-view-prompt-tool .ss-usage-card span,
body.signshi-view-prompt-tool .ss-usage-card small { color: #64738b !important; font-size: 12px !important; }

body.signshi-view-prompt-tool .ss-tool-status { min-height: 22px; margin: 16px 0 8px !important; color: #6b7b92 !important; font-size: 13px !important; }
body.signshi-view-prompt-tool .ss-tool-status.is-success { color: #16714d !important; }
body.signshi-view-prompt-tool .ss-tool-status.is-error { color: #b42318 !important; }

body.signshi-view-prompt-tool .ss-output-label { flex: 1 1 auto; min-height: 0; }
body.signshi-view-prompt-tool .ss-output-label__head { display: flex; align-items: center; justify-content: space-between; }
body.signshi-view-prompt-tool .ss-output-label__head small { color: #7b899d; font-size: 12px; font-weight: 600; }

body.signshi-view-prompt-tool textarea[data-generated-prompt] {
  width: 100% !important; min-height: 280px !important; height: 100% !important; margin: 0 !important; padding: 16px !important; resize: vertical;
  color: #1b2940 !important; background: #fbfcfe !important; border: 1px solid #dbe4f1 !important; border-radius: 8px !important;
  box-shadow: none !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.65 !important;
}

body.signshi-view-prompt-tool textarea[data-generated-prompt]:focus,
body.signshi-view-prompt-tool .ss-tool-options select:focus {
  outline: 0; border-color: #176cff !important; box-shadow: 0 0 0 3px rgba(23, 108, 255, .12) !important;
}

body.signshi-view-prompt-tool .ss-tool-actions {
  margin-top: 16px !important; padding: 0 !important; display: flex !important; align-items: center; gap: 10px; border: 0 !important;
}

body.signshi-view-prompt-tool .ss-tool-actions .ss-outline,
body.signshi-view-prompt-tool .ss-tool-actions .ss-primary { min-height: 44px; padding: 0 18px !important; border-radius: 8px !important; font-weight: 800 !important; }
body.signshi-view-prompt-tool .ss-tool-publish { margin-left: auto !important; }

@media (max-width: 1120px) {
  body.signshi-view-prompt-tool .ss-tool-shell.ss-tool-shell--studio-split { width: min(100% - 40px, 1200px) !important; }
  body.signshi-view-prompt-tool .ss-prompt-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.signshi-view-prompt-tool .ss-generate-btn { grid-column: 1 / -1; margin-top: 0 !important; }
}

@media (max-width: 920px) {
  body.signshi-view-prompt-tool .ss-tool-shell--studio-split .ss-tool-hero { min-height: 0 !important; padding: 34px 0 24px !important; }
  body.signshi-view-prompt-tool .ss-tool-shell--studio-split .ss-image-tool { grid-template-columns: 1fr !important; }
  body.signshi-view-prompt-tool .ss-image-tool .ss-upload-panel,
  body.signshi-view-prompt-tool .ss-image-tool .ss-generate-panel { min-height: 520px; }
  body.signshi-view-prompt-tool .ss-image-tool .ss-generate-panel { border-top: 1px solid #e2e9f3 !important; border-left: 0 !important; }
}

@media (max-width: 760px) {
  body.signshi-view-prompt-tool .ss-header--gallery .ss-nav { min-height: 0 !important; padding: 12px 16px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px !important; }
  body.signshi-view-prompt-tool .ss-header--gallery .ss-brand { grid-column: 1; }
  body.signshi-view-prompt-tool .ss-header--gallery .ss-auth { grid-column: 2; }
  body.signshi-view-prompt-tool .ss-header--gallery .ss-search,
  body.signshi-view-prompt-tool .ss-header--gallery .ss-nav__links { grid-column: 1 / -1; width: 100% !important; min-width: 0 !important; }
  body.signshi-view-prompt-tool .ss-header--gallery .ss-nav__links { overflow-x: auto; scrollbar-width: none; }
  body.signshi-view-prompt-tool .ss-tool-shell.ss-tool-shell--studio-split { width: min(100% - 24px, 680px) !important; margin-bottom: 40px !important; }
  body.signshi-view-prompt-tool .ss-tool-hero h1 { font-size: 32px !important; }
  body.signshi-view-prompt-tool .ss-tool-hero p { font-size: 14px !important; }
  body.signshi-view-prompt-tool .ss-image-tool .ss-upload-panel,
  body.signshi-view-prompt-tool .ss-image-tool .ss-generate-panel { min-height: 0; padding: 16px !important; }
  body.signshi-view-prompt-tool .ss-upload-zone,
  body.signshi-view-prompt-tool .ss-preview-card { min-height: 420px !important; padding: 24px !important; }
  body.signshi-view-prompt-tool .ss-prompt-controls { grid-template-columns: 1fr; gap: 12px; }
  body.signshi-view-prompt-tool .ss-generate-btn { grid-column: auto; }
  body.signshi-view-prompt-tool .ss-usage-card,
  body.signshi-view-prompt-tool .ss-usage-card div { align-items: flex-start; flex-direction: column; }
  body.signshi-view-prompt-tool textarea[data-generated-prompt] { min-height: 230px !important; }
}
/* Image to Prompt Studio Split visual QA refinement. */
body.signshi-view-prompt-tool .ss-header--gallery .ss-auth .ss-primary,
body.signshi-view-prompt-tool .ss-image-tool .ss-primary {
  background-image: none !important;
  filter: none !important;
}

body.signshi-view-prompt-tool .ss-tool-hero__copy {
  width: 100% !important;
  max-width: 960px !important;
}

body.signshi-view-prompt-tool .ss-tool-hero h1 {
  max-width: 960px !important;
  font-size: clamp(32px, 2.7vw, 44px) !important;
}

body.signshi-view-prompt-tool .ss-upload-zone > span.ss-upload-zone__icon {
  width: 78px !important;
  height: 78px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  color: #176cff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-upload-zone > span.ss-upload-zone__icon svg {
  width: 52px !important;
  height: 52px !important;
  stroke-width: 1.6 !important;
}

body.signshi-view-prompt-tool .ss-upload-zone > span.ss-upload-zone__sample {
  width: 146px !important;
  height: 110px !important;
  display: grid !important;
  place-items: center !important;
  margin: 14px 0 0 !important;
  color: #cad7e9 !important;
  background: transparent !important;
  border: 1px solid #d8e4f4 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

body.signshi-view-prompt-tool .ss-upload-zone > span.ss-upload-zone__sample svg {
  width: 50px !important;
  height: 50px !important;
  color: inherit !important;
  stroke-width: 1.25 !important;
}
/* Image to Prompt Studio Split mobile containment. */
@media (max-width: 760px) {
  html,
  body.signshi-view-prompt-tool,
  body.signshi-view-prompt-tool #page,
  body.signshi-view-prompt-tool .site {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body.signshi-view-prompt-tool .ss-header--gallery,
  body.signshi-view-prompt-tool .ss-header--gallery .ss-nav,
  body.signshi-view-prompt-tool .ss-tool-shell.ss-tool-shell--studio-split,
  body.signshi-view-prompt-tool .ss-tool-hero,
  body.signshi-view-prompt-tool .ss-tool-hero__copy,
  body.signshi-view-prompt-tool .ss-image-tool,
  body.signshi-view-prompt-tool .ss-upload-panel,
  body.signshi-view-prompt-tool .ss-generate-panel {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.signshi-view-prompt-tool .ss-header--gallery .ss-nav {
    overflow: hidden !important;
  }

  body.signshi-view-prompt-tool .ss-tool-hero h1 {
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    text-wrap: balance;
  }

  body.signshi-view-prompt-tool .ss-upload-zone strong,
  body.signshi-view-prompt-tool .ss-upload-zone em,
  body.signshi-view-prompt-tool .ss-upload-zone small,
  body.signshi-view-prompt-tool .ss-tool-hero p {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
}
/* Image to Prompt Studio Split mobile width hardening. */
@media (max-width: 760px) {
  body.signshi-view-prompt-tool .ss-tool-shell.ss-tool-shell--studio-split,
  body.signshi-view-prompt-tool .ss-tool-shell--studio-split .ss-image-tool,
  body.signshi-view-prompt-tool .ss-image-tool .ss-upload-panel,
  body.signshi-view-prompt-tool .ss-image-tool .ss-generate-panel,
  body.signshi-view-prompt-tool .ss-image-tool .ss-upload-zone,
  body.signshi-view-prompt-tool .ss-image-tool .ss-preview-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.signshi-view-prompt-tool .ss-upload-zone em {
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }
}
/* Chronological adaptive masonry: full media ratios with exact ten-pixel gaps. */
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense !important;
  grid-auto-rows: 1px !important;
  align-items: start !important;
  align-content: start !important;
  columns: auto !important;
  column-count: auto !important;
  column-gap: 10px !important;
  row-gap: 10px !important;
  gap: 10px !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] > .ss-masonry-card.ss-white-card,
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] > .ss-masonry-card.ss-white-card:nth-child(n) {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  margin: 0 !important;
  align-self: start !important;
  break-inside: auto !important;
  grid-column: auto !important;
  grid-row-start: auto !important;
  transition: none !important;
}

@media (max-width: 1320px) {
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 430px) {
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Real prompt engagement controls. */
.signshi-view-gallery .ss-white-card__stats [data-prompt-like] {
  cursor: pointer !important;
  border-radius: 4px;
  transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.signshi-view-gallery .ss-white-card__stats [data-prompt-like]:hover,
.signshi-view-gallery .ss-white-card__stats [data-prompt-like]:focus-visible {
  color: #ffb8ca !important;
  outline: 1px solid rgba(255, 255, 255, 0.72);
  outline-offset: 2px;
}

.signshi-view-gallery .ss-white-card__stats [data-prompt-like].is-active {
  color: #ff668c !important;
  text-shadow: 0 1px 6px rgba(53, 0, 15, 0.58) !important;
}

.signshi-view-gallery .ss-white-card__stats [data-prompt-like].is-active svg {
  fill: currentColor;
}

.signshi-view-gallery .ss-white-card__stats [data-prompt-like].is-busy {
  pointer-events: none;
  opacity: 0.55;
}
/* Keep real engagement metrics legible on the nine-column gallery. */
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card .ss-white-card__stats {
  top: 8px !important;
  right: 8px !important;
  gap: 10px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-shadow: 0 1px 5px rgba(3, 9, 20, 0.82) !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card .ss-white-card__stats > span {
  gap: 5px !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card .ss-white-card__stats svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.2 !important;
}
/* Only expose the real like total on Inspiration cards. */
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card .ss-white-card__stats > span:first-child {
  display: none !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card [data-prompt-like],
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry .ss-masonry-card.ss-white-card [data-stat-likes] {
  font-weight: 500 !important;
}
/* Dashboard signed-out option 2 split gate. */
body.signshi-view-dashboard .ss-dashboard-gate.ss-dashboard-gate--split {
  width: min(100%, 1240px) !important;
  max-width: 1240px !important;
  min-height: 540px !important;
  margin: 52px auto 72px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(340px, 0.42fr) minmax(0, 0.58fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  border: 1px solid #d9e5f4 !important;
  border-radius: 26px !important;
  background: #ffffff !important;
  box-shadow: 0 20px 60px rgba(33, 72, 132, 0.09) !important;
}

body.signshi-view-dashboard .ss-dashboard-gate__benefit-panel {
  min-width: 0;
  padding: 54px 48px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-right: 1px solid #dbe5f2 !important;
  background: #f5f8ff !important;
}

body.signshi-view-dashboard .ss-dashboard-gate__benefit-panel .ss-brand__mark {
  width: 88px !important;
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  flex: 0 0 88px !important;
  margin: 0 0 42px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #d4e1f2 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 28px rgba(43, 82, 145, 0.08) !important;
}

body.signshi-view-dashboard .ss-dashboard-gate__benefit-panel .ss-brand__icon {
  width: 72px !important;
  height: 72px !important;
  display: block !important;
  object-fit: contain !important;
}

body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-benefits {
  width: 100% !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-benefits span {
  min-height: 76px !important;
  padding: 18px 2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  color: #27476f !important;
  font-size: 18px !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-benefits span:not(:last-child) {
  border-bottom: 1px solid #dbe5f2 !important;
}

body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-benefits svg {
  width: 27px !important;
  height: 27px !important;
  flex: 0 0 27px !important;
  color: #1377ff !important;
  stroke-width: 2.1 !important;
}

body.signshi-view-dashboard .ss-dashboard-gate__content {
  min-width: 0;
  padding: 64px 68px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  background: #ffffff !important;
}

body.signshi-view-dashboard .ss-dashboard-gate--split h1 {
  max-width: 560px !important;
  margin: 0 !important;
  color: #0f1b33 !important;
  font-size: clamp(44px, 4.1vw, 58px) !important;
  font-weight: 820 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  text-wrap: balance;
}

body.signshi-view-dashboard .ss-dashboard-gate--split p {
  max-width: 560px !important;
  margin: 22px 0 38px !important;
  color: #687a96 !important;
  font-size: 18px !important;
  font-weight: 450 !important;
  line-height: 1.62 !important;
}

body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-actions {
  width: 100% !important;
  max-width: 560px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-actions .ss-primary,
body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-actions .ss-outline {
  width: 100% !important;
  height: 58px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 720 !important;
  box-shadow: none !important;
}

body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-actions .ss-primary {
  color: #ffffff !important;
  border: 1px solid transparent !important;
  background: linear-gradient(135deg, #1478ff 0%, #6946ff 100%) !important;
  box-shadow: 0 12px 26px rgba(51, 88, 255, 0.2) !important;
}

body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-actions .ss-outline {
  color: #1377ff !important;
  border: 1px solid #1880ff !important;
  background: #ffffff !important;
}

body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-actions button:hover {
  transform: translateY(-1px) !important;
}

body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-actions button:focus-visible {
  outline: 3px solid rgba(20, 120, 255, 0.24) !important;
  outline-offset: 3px !important;
}

@media (max-width: 820px) {
  body.signshi-view-dashboard .ss-dashboard-gate.ss-dashboard-gate--split {
    width: min(100%, 700px) !important;
    min-height: 0 !important;
    margin: 36px auto 56px !important;
    grid-template-columns: 1fr !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate__benefit-panel {
    padding: 30px 34px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #dbe5f2 !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate__benefit-panel .ss-brand__mark {
    width: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    flex-basis: 68px !important;
    margin: 0 0 22px !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate__benefit-panel .ss-brand__icon {
    width: 52px !important;
    height: 52px !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-benefits span {
    min-height: 0 !important;
    padding: 10px 0 !important;
    gap: 10px !important;
    font-size: 14px !important;
    border-bottom: 0 !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-benefits svg {
    width: 21px !important;
    height: 21px !important;
    flex-basis: 21px !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate__content {
    padding: 44px 40px 48px !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate--split h1 {
    font-size: clamp(36px, 7vw, 48px) !important;
  }
}

@media (max-width: 560px) {
  body.signshi-view-dashboard .ss-dashboard-gate.ss-dashboard-gate--split {
    width: 100% !important;
    margin: 22px auto 40px !important;
    border-radius: 20px !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate__benefit-panel {
    padding: 24px !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-benefits {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-benefits span {
    min-height: 48px !important;
    padding: 10px 0 !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-benefits span:not(:last-child) {
    border-bottom: 1px solid #dbe5f2 !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate__content {
    padding: 34px 24px 28px !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate--split h1 {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate--split p {
    margin: 18px 0 28px !important;
    font-size: 15px !important;
  }

  body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-actions .ss-primary,
  body.signshi-view-dashboard .ss-dashboard-gate--split .ss-gate-actions .ss-outline {
    height: 52px !important;
    font-size: 15px !important;
  }
}

/* Dashboard logged-in option 1 editorial workspace. */
body.signshi-view-dashboard .ss-dashboard--editorial {
  width: min(1500px, calc(100vw - 48px)) !important;
  max-width: 1500px !important;
  padding: 20px 0 58px !important;
  gap: 16px !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-toolbar {
  min-height: 48px !important;
  padding: 0 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-kicker {
  color: #176cff !important;
  font-size: 13px !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-hero__actions {
  gap: 10px !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-primary,
body.signshi-view-dashboard .ss-dashboard--editorial .ss-outline {
  min-height: 44px !important;
  border-radius: 10px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 740 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-primary {
  background: linear-gradient(135deg, #168cff 0%, #176cff 62%, #763bff 100%) !important;
  box-shadow: 0 8px 20px rgba(23, 108, 255, 0.18) !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-outline {
  border-color: #d7e3f2 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-hero {
  min-height: 84px !important;
  padding: 20px 24px !important;
  display: grid !important;
  grid-template-columns: minmax(240px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 36px !important;
  overflow: visible !important;
  border: 1px solid #dfe8f3 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-hero h1 {
  max-width: none !important;
  margin: 0 !important;
  color: #0f1b33 !important;
  font-size: clamp(28px, 2.2vw, 34px) !important;
  font-weight: 780 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.035em !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-hero p {
  max-width: 760px !important;
  margin: 0 !important;
  color: #687a96 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-workspace {
  grid-template-columns: 300px minmax(0, 1fr) 320px !important;
  gap: 16px !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-profile,
body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-main-column,
body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-library,
body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-activity {
  border: 1px solid #dfe8f3 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-profile {
  min-height: 548px !important;
  padding: 24px 22px !important;
  gap: 28px !important;
  align-content: start !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-avatar-wrap {
  gap: 14px !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-avatar {
  width: 112px !important;
  height: 112px !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 26px rgba(23, 108, 255, 0.15) !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-avatar-upload {
  min-height: 40px !important;
  border-radius: 10px !important;
  color: #176cff !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-profile__body {
  gap: 12px !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-label {
  font-size: 13px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-profile h2,
body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-library h2 {
  font-size: 24px !important;
  font-weight: 780 !important;
  letter-spacing: -0.03em !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-profile label {
  color: #53657f !important;
  font-weight: 700 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-profile input[type="text"] {
  min-height: 48px !important;
  border-radius: 8px !important;
  color: #0f1b33 !important;
  background: #ffffff !important;
  font-weight: 600 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-profile .ss-primary {
  width: 100% !important;
  margin-top: 4px !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-main-column {
  min-width: 0 !important;
  min-height: 548px !important;
  gap: 0 !important;
  grid-template-rows: minmax(316px, 1fr) auto !important;
  overflow: hidden !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-usage {
  min-height: 316px !important;
  padding: 28px 26px !important;
  gap: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #0f1b33 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-usage__head span {
  color: #0f1b33 !important;
  font-size: 14px !important;
  font-weight: 760 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-usage__head strong {
  color: #176cff !important;
  font-size: 14px !important;
  font-weight: 760 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-usage h2 {
  color: #0f1b33 !important;
  font-size: clamp(60px, 5.1vw, 76px) !important;
  font-weight: 780 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.055em !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-usage h2 small {
  color: #176cff !important;
  font-size: 18px !important;
  font-weight: 740 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-usage p,
body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-usage > small {
  color: #647791 !important;
  font-size: 14px !important;
  font-weight: 560 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-meter {
  height: 8px !important;
  background: #e9eef6 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-meter span {
  background: linear-gradient(90deg, #168cff 0%, #176cff 60%, #763bff 100%) !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-stat-grid {
  gap: 0 !important;
  border-top: 1px solid #dfe8f3 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-stat-grid article {
  min-height: 206px !important;
  padding: 24px !important;
  align-content: start !important;
  gap: 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-stat-grid article:not(:first-child) {
  border-left: 1px solid #dfe8f3 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-stat-head {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-stat-head svg {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  padding: 9px !important;
  border: 1px solid #dbe6f3 !important;
  border-radius: 999px !important;
  color: #176cff !important;
  stroke-width: 2 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-stat-grid span,
body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-stat-grid small {
  color: #657791 !important;
  font-size: 13px !important;
  font-weight: 560 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-stat-grid strong {
  color: #0f1b33 !important;
  font-size: 36px !important;
  font-weight: 760 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-library {
  min-height: 548px !important;
  padding: 24px !important;
  gap: 18px !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-library__stats {
  gap: 10px !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-library__stats span {
  border-radius: 10px !important;
  padding: 14px !important;
  background: #fbfdff !important;
  font-weight: 600 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-library__stats strong {
  font-size: 24px !important;
  font-weight: 760 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-library__list article {
  border-radius: 10px !important;
  background: #ffffff !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-library__list img {
  border-radius: 8px !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-activity {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: hidden !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-activity article {
  min-height: 126px !important;
  padding: 22px 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-activity article:not(:first-child) {
  border-left: 1px solid #dfe8f3 !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-activity svg {
  width: 44px !important;
  height: 44px !important;
  border-radius: 0 !important;
  color: #176cff !important;
  background: transparent !important;
}

body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-activity strong {
  font-size: 15px !important;
  font-weight: 760 !important;
}

@media (max-width: 1280px) {
  body.signshi-view-dashboard .ss-dashboard--editorial {
    width: min(100% - 32px, 1160px) !important;
  }

  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-workspace {
    grid-template-columns: 280px minmax(0, 1fr) !important;
  }

  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-library {
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
  }
}

@media (max-width: 960px) {
  body.signshi-view-dashboard .ss-dashboard--editorial {
    width: min(100% - 24px, 760px) !important;
    padding-top: 14px !important;
  }

  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-hero {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-workspace {
    grid-template-columns: 1fr !important;
  }

  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-profile,
  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-main-column,
  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-library {
    min-height: 0 !important;
  }
}

@media (max-width: 720px) {
  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-toolbar {
    padding: 0 !important;
    display: grid !important;
    gap: 12px !important;
  }

  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-hero__actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-hero h1 {
    font-size: 28px !important;
  }

  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-stat-grid,
  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-activity {
    grid-template-columns: 1fr !important;
  }

  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-stat-grid article:not(:first-child),
  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-activity article:not(:first-child) {
    border-left: 0 !important;
    border-top: 1px solid #dfe8f3 !important;
  }

  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-stat-grid article {
    min-height: 150px !important;
  }
}

@media (max-width: 520px) {
  body.signshi-view-dashboard .ss-dashboard--editorial {
    width: calc(100% - 20px) !important;
    gap: 12px !important;
  }

  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-hero__actions {
    grid-template-columns: 1fr !important;
  }

  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-hero,
  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-profile,
  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-usage,
  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-library {
    padding: 20px !important;
  }

  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-usage h2 {
    font-size: 56px !important;
  }

  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-library__stats {
    grid-template-columns: 1fr 1fr !important;
  }

  body.signshi-view-dashboard .ss-dashboard--editorial .ss-dashboard-activity article {
    padding: 20px !important;
  }
}
/* Navigation avatar: render saved user media as a real image. */
.ss-header--gallery .ss-user-avatar,
.ss-header--gallery .ss-user-menu__avatar {
  overflow: hidden !important;
  padding: 0 !important;
}

.ss-header--gallery .ss-user-avatar > img[data-user-avatar-image],
.ss-header--gallery .ss-user-menu__avatar > img[data-user-avatar-image] {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: inherit !important;
  object-fit: cover !important;
  object-position: center !important;
}
/* Trust disclosure and workflow prototype states - 2026-07-27. */
body.signshi-view-prompt-tool .ss-image-privacy-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid #cfe0f5;
  border-radius: 10px;
  color: #19304f;
  background: #f7fbff;
}

body.signshi-view-prompt-tool .ss-image-privacy-note__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  color: #176cff;
  background: #e9f2ff;
}

body.signshi-view-prompt-tool .ss-image-privacy-note__icon svg {
  width: 20px;
  height: 20px;
}

body.signshi-view-prompt-tool .ss-image-privacy-note strong {
  display: block;
  margin-bottom: 3px;
  color: #13213a;
  font-size: 14px;
}

body.signshi-view-prompt-tool .ss-image-privacy-note p {
  margin: 0;
  color: #61738d;
  font-size: 12px;
  line-height: 1.55;
}

body.signshi-view-prompt-tool .ss-image-privacy-note__facts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

body.signshi-view-prompt-tool .ss-image-privacy-note__facts span,
body.signshi-view-prompt-tool .ss-image-privacy-note__facts a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #d7e5f6;
  border-radius: 999px;
  color: #37607f;
  background: #fff;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

body.signshi-view-prompt-tool .ss-image-privacy-note__facts a {
  color: #176cff;
}

body.signshi-view-prompt-tool .ss-image-privacy-note__facts svg {
  width: 14px;
  height: 14px;
}

body.signshi-view-prompt-tool .ss-tool-publish-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  color: #65748d;
  font-size: 11px;
  line-height: 1.5;
}

body.signshi-view-prompt-tool .ss-tool-publish-note svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: #176cff;
}

.ss-legal-list {
  display: grid;
  gap: 10px;
  max-width: 920px;
  margin: 0;
  padding-left: 22px;
  color: #53657d;
  line-height: 1.75;
}

.ss-legal-list strong {
  color: #20324d;
}

.ss-legal-card a {
  color: #176cff;
  font-weight: 750;
}

.ss-video-prototype-badge {
  border: 1px solid #cbdcff !important;
  border-radius: 999px;
  padding: 7px 10px !important;
  color: #175fd4 !important;
  background: #edf4ff;
}

.ss-video-prototype-badge em {
  color: inherit !important;
  font-style: normal;
  font-weight: 800;
}

.ss-video-prototype-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #d7e3f3;
  border-radius: 10px;
  color: #273b58;
  background: #f7faff;
}

.ss-video-prototype-notice > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #176cff;
}

.ss-video-prototype-notice p {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
  font-size: 12px;
}

.ss-video-prototype-notice strong {
  color: #14223a;
}

.ss-video-prototype-notice span {
  color: #687a93;
}

.ss-video-subbar__primary.is-coming-soon:disabled {
  cursor: not-allowed;
  opacity: 1;
  color: #52637c !important;
  border: 1px solid #d1dbea !important;
  background: #e9eef5 !important;
  box-shadow: none !important;
}

@media (max-width: 980px) {
  body.signshi-view-prompt-tool .ss-image-privacy-note {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.signshi-view-prompt-tool .ss-image-privacy-note__facts {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .ss-video-prototype-notice p {
    display: block;
  }

  .ss-video-prototype-notice p span {
    display: block;
    margin-top: 3px;
  }
}

/* Stable Inspiration loading with intrinsic-ratio skeletons. */
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] .ss-white-card__media {
  position: relative !important;
  isolation: isolate;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--ss-card-ratio, 4 / 5) !important;
  overflow: hidden !important;
  background: #edf3fa !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] .ss-white-card__media::before,
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] .ss-white-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] .ss-white-card__media::before {
  z-index: 1;
  background: linear-gradient(145deg, #edf3fa 0%, #e5edf7 100%);
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] .ss-white-card__media::after {
  z-index: 2;
  width: 55%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: translateX(-180%);
  animation: ss-card-skeleton-sweep 1.25s ease-in-out infinite;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] .ss-white-card__media > img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 0;
  transition: opacity 220ms ease !important;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] .ss-masonry-card.is-image-ready .ss-white-card__media::before,
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] .ss-masonry-card.is-image-ready .ss-white-card__media::after {
  opacity: 0;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] .ss-masonry-card.is-image-ready .ss-white-card__media > img {
  opacity: 1;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] .ss-masonry-card.is-image-pending .ss-white-card__stats,
.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] .ss-masonry-card.is-image-error .ss-white-card__stats {
  opacity: 0;
}

.signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] .ss-masonry-card.is-image-error .ss-white-card__media::after {
  animation: none;
  opacity: 0;
}

@keyframes ss-card-skeleton-sweep {
  to {
    transform: translateX(330%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .signshi-view-gallery .ss-white-home .ss-gallery-main > .ss-masonry[data-inspiration-gallery] .ss-white-card__media::after {
    animation: none;
  }
}