/* STATIX 8.2.2 responsive and visual repair layer. Loaded after legacy compatibility CSS. */
body.statix-app.statix-v8,
body.statix-app.statix-v7,
body.statix-app.statix-v7-public,
body.statix-app.sxp-public {
  color: var(--sx-text) !important;
  font-size: 15px !important;
}

body.statix-app.statix-v8 .page-title,
body.statix-app.statix-v7 .page-title,
body.statix-app.statix-v7-public .page-title {
  font-size: clamp(27px, 3.2vw, 40px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}

body.statix-app :is(.page-description, .v7-section-copy, .v72-form-card p) {
  color: var(--sx-text-soft) !important;
}

body.statix-app .v72-settings-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  max-width: 100%;
  overflow-x: auto;
  padding: 2px 0 5px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
body.statix-app .v72-settings-tabs > :is(a, button) {
  flex: 0 0 auto;
  min-height: 42px !important;
  border: 1px solid var(--sx-border) !important;
  border-radius: 11px !important;
  background: var(--sx-panel) !important;
  color: var(--sx-text-soft) !important;
  text-decoration: none;
}
body.statix-app .v72-settings-tabs > .active {
  border-color: color-mix(in srgb, var(--sx-accent) 50%, var(--sx-border)) !important;
  background: var(--sx-accent-soft) !important;
  color: var(--sx-text) !important;
}

body.statix-app .v72-settings-head,
body.statix-app .v72-form-card,
body.statix-app .v80-access-owner,
body.statix-app .v80-access-mode,
body.statix-app .v80-access-profile,
body.statix-app .v7-card {
  border-color: var(--sx-border) !important;
}
body.statix-app .v72-settings-head,
body.statix-app .v72-form-card,
body.statix-app .v80-access-owner,
body.statix-app .v80-access-mode,
body.statix-app .v80-access-profile {
  background: var(--sx-panel) !important;
}
body.statix-app :is(input, select, textarea) {
  max-width: 100%;
  color: var(--sx-text);
}
body.statix-app :is(input, select, textarea)::placeholder {
  color: var(--sx-muted);
  opacity: 1;
}

/* Homepage: restore the STATIX artwork on the left and keep the product panel on the right. */
body.sxp-public .sxp-public-header {
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: 70px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2.5vw, 34px);
  border-color: var(--sx-border);
  background: color-mix(in srgb, var(--sx-bg) 90%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.sxp-public .sxp-public-links {
  justify-content: center;
  gap: clamp(12px, 2vw, 27px);
}
body.sxp-public .sxp-public-links a {
  color: var(--sx-text-soft);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
body.sxp-public .sxp-public-links a:hover { color: var(--sx-accent); }
body.sxp-public .sxp-mobile-menu-toggle {
  display: none;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--sx-border);
  border-radius: 11px;
  background: var(--sx-panel-2);
  color: var(--sx-text);
  font: inherit;
  font-weight: 680;
  cursor: pointer;
}
body.sxp-public .sxp-public-actions { justify-content: flex-end; gap: 9px; }

body.sxp-public .sxp-home-hero-restored {
  width: min(1240px, calc(100% - 48px));
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, .96fr);
  gap: clamp(28px, 5vw, 68px);
  padding: clamp(36px, 6vw, 76px) 0 48px;
}
body.sxp-public .sxp-home-art {
  position: relative;
  min-width: 0;
  min-height: 510px;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sx-accent) 35%, var(--sx-border));
  border-radius: 25px;
  background: var(--sx-panel);
  box-shadow: 0 28px 90px rgb(0 0 0 / 35%), 0 0 60px color-mix(in srgb, var(--sx-accent) 17%, transparent);
  isolation: isolate;
}
body.sxp-public .sxp-home-art::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgb(9 9 17 / 4%) 40%, rgb(9 9 17 / 85%) 100%), linear-gradient(135deg, rgb(109 68 235 / 12%), transparent 55%);
  content: "";
  pointer-events: none;
}
body.sxp-public .sxp-home-art img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transition: transform .6s ease;
}
body.sxp-public .sxp-home-art:hover img { transform: scale(1.025); }
body.sxp-public .sxp-home-art figcaption {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: grid;
  gap: 5px;
  color: #fff;
  text-shadow: 0 2px 18px rgb(0 0 0 / 80%);
}
body.sxp-public .sxp-home-art-mark {
  color: #c3adff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .19em;
}
body.sxp-public .sxp-home-art figcaption span:last-child { font-size: 13px; font-weight: 650; }
body.sxp-public .sxp-home-copy { min-width: 0; }
body.sxp-public .sxp-home-copy h1 {
  margin: 12px 0 15px;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 820;
  line-height: 1.02;
  letter-spacing: -.055em;
}
body.sxp-public .sxp-home-copy h1 span {
  color: var(--sx-accent);
  background: linear-gradient(100deg, #c0aaff 0%, #8d78ff 72%, #69b3ff 120%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.sxp-public .sxp-home-copy > p {
  max-width: 600px;
  margin: 0;
  color: var(--sx-text-soft);
  font-size: 15px;
  line-height: 1.75;
}
body.sxp-public .sxp-home-copy .sxp-actions { margin-top: 21px; }
body.sxp-public .sxp-home-copy .btn { min-height: 45px; padding: 0 17px; font-size: 13px; }
body.sxp-public .sxp-home-platform {
  margin-top: 27px;
  padding: 15px;
  border: 1px solid var(--sx-border);
  border-radius: 17px;
  background: linear-gradient(145deg, var(--sx-panel), color-mix(in srgb, var(--sx-accent) 8%, var(--sx-panel)));
  box-shadow: var(--sx-shadow);
}
body.sxp-public .sxp-home-platform-head { display: flex; align-items: center; gap: 10px; }
body.sxp-public .sxp-home-platform-head > img { width: 37px; height: 37px; flex: 0 0 37px; border-radius: 10px; object-fit: cover; }
body.sxp-public .sxp-home-platform-head > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
body.sxp-public .sxp-home-platform-head strong { color: var(--sx-text); font-size: 13px; }
body.sxp-public .sxp-home-platform-head small { color: var(--sx-muted); font-size: 10px; }
body.sxp-public .sxp-home-live { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--sx-good) 30%, transparent); border-radius: 999px; color: var(--sx-good); font-size: 9px; font-weight: 850; letter-spacing: .05em; }
body.sxp-public .sxp-home-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--sx-good); box-shadow: 0 0 10px var(--sx-good); }
body.sxp-public .sxp-home-platform-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-top: 13px; }
body.sxp-public .sxp-home-platform-grid > div { min-width: 0; padding: 9px 8px; border: 1px solid var(--sx-border); border-radius: 10px; background: var(--sx-panel-2); }
body.sxp-public .sxp-home-platform-grid strong { display: block; color: var(--sx-text); font-size: 18px; line-height: 1.2; }
body.sxp-public .sxp-home-platform-grid span { display: block; margin-top: 3px; color: var(--sx-muted); font-size: 9px; }
body.sxp-public .sxp-home-platform-foot { display: flex; align-items: center; gap: 7px; margin-top: 11px; color: var(--sx-text-soft); font-size: 10px; }
body.sxp-public .sxp-home-platform-foot span { color: var(--sx-accent); }
body.sxp-public .sxp-home-features { width: min(1240px,calc(100% - 48px)); }
body.sxp-public .sxp-feature-grid > article { border-color: var(--sx-border); background: var(--sx-panel); }
body.sxp-public .sxp-feature-number { color: var(--sx-accent); }

@media (max-width: 900px) {
  body.sxp-public .sxp-public-header { grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; }
  body.sxp-public .sxp-mobile-menu-toggle { display: inline-flex; }
  body.sxp-public .sxp-public-links {
    position: absolute;
    top: calc(100% + 8px);
    right: 12px;
    left: 12px;
    display: none;
    align-items: stretch;
    justify-content: flex-start;
    gap: 3px;
    padding: 8px;
    border: 1px solid var(--sx-border);
    border-radius: 15px;
    background: var(--sx-panel);
    box-shadow: var(--sx-shadow);
  }
  body.sxp-public .sxp-public-header[data-menu-open] .sxp-public-links { display: grid; }
  body.sxp-public .sxp-public-links a { padding: 11px 12px; border-radius: 9px; }
  body.sxp-public .sxp-public-links a:hover { background: var(--sx-accent-soft); }
  body.sxp-public .sxp-home-hero-restored { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 25px; }
  body.sxp-public .sxp-home-art { min-height: 455px; }
}
@media (max-width: 650px) {
  body.statix-app.statix-v8 .page-title,
  body.statix-app.statix-v7 .page-title,
  body.statix-app.statix-v7-public .page-title { font-size: clamp(25px,8vw,34px) !important; }
  body.statix-app.statix-v8 .content,
  body.statix-app.statix-v7 .content { padding: 19px 14px 42px !important; }
  body.statix-app :is(.v72-settings-head,.v72-form-card,.v80-access-owner,.v80-access-mode,.v80-access-profile) { padding: 15px !important; }
  body.statix-app .v80-access-intro { grid-template-columns: 1fr !important; }
  body.statix-app .v80-presets { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  body.statix-app .v80-access-profile-head,
  body.statix-app .v80-access-profile-title,
  body.statix-app .v80-access-row,
  body.statix-app .v7-grid-3,
  body.statix-app .v72-form-grid { grid-template-columns: minmax(0,1fr) !important; }
  body.statix-app .v80-access-profile-actions { width: 100%; }
  body.statix-app .v80-access-profile-actions .btn { flex: 1 1 auto; }
  body.statix-app .v80-savebar { align-items: stretch !important; flex-direction: column !important; }
  body.statix-app .v80-savebar .btn { width: 100%; }
  body.sxp-public .sxp-public-header { min-height: 62px; padding: 9px 12px; }
  body.sxp-public .sxp-public-actions { gap: 6px; }
  body.sxp-public .sxp-public-actions > .btn { min-height: 38px; padding: 0 9px; font-size: 10px; }
  body.sxp-public .sxp-public-actions .sxp-icon-button { width: 36px; height: 36px; }
  body.sxp-public .sxp-public-user span { display: none; }
  body.sxp-public .sxp-home-hero-restored { width: min(100% - 28px,520px); grid-template-columns: 1fr; gap: 21px; padding: 21px 0 30px; }
  body.sxp-public .sxp-home-art { min-height: 0; aspect-ratio: 1.25; border-radius: 19px; }
  body.sxp-public .sxp-home-art figcaption { right: 15px; bottom: 14px; left: 15px; }
  body.sxp-public .sxp-home-copy h1 { margin: 7px 0 11px; font-size: clamp(34px,10vw,48px); }
  body.sxp-public .sxp-home-copy > p { font-size: 14px; line-height: 1.65; }
  body.sxp-public .sxp-home-platform { margin-top: 20px; padding: 12px; }
  body.sxp-public .sxp-home-platform-grid { gap: 5px; }
  body.sxp-public .sxp-home-platform-grid > div { padding: 8px 6px; }
  body.sxp-public .sxp-home-platform-grid strong { font-size: 16px; }
  body.sxp-public .sxp-home-features { width: min(100% - 28px,520px); padding-top: 22px; }
  body.sxp-public .sxp-home-features .sxp-feature-grid { grid-template-columns: 1fr; }
  body.sxp-public .sxp-public-footer { padding: 22px 16px; }
}
@media (max-width: 370px) {
  body.sxp-public .sxp-brand { gap: 6px; font-size: 14px; }
  body.sxp-public .sxp-brand img { width: 28px; height: 28px; }
  body.sxp-public .sxp-brand small { display: none; }
  body.sxp-public .sxp-mobile-menu-toggle { min-height: 36px; gap: 5px; padding: 0 8px; font-size: 11px; }
  body.sxp-public .sxp-public-actions > .sxp-icon-button { display: none; }
}