/* =========================================================
   SINTEX EDITORIAL CARDS V1
   Lovable-inspired composition / original Sintex UI
   ========================================================= */

.sintex-editorial-shell {
  position: relative;
  z-index: 1;

  width: min(1500px, calc(100% - 64px));
  margin: 0 auto 82px;

  display: grid;
  gap: 22px;
}


/* =========================================================
   CARD
   ========================================================= */

.sintex-editorial-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, .92fr);
  align-items: center;

  gap: clamp(38px, 4.3vw, 72px);

  min-height: 348px;

  padding: 25px;

  overflow: hidden;

  border: 1px solid rgba(75, 64, 53, .075);
  border-radius: 30px;

  background: rgba(255, 253, 249, .90);

  box-shadow:
    0 15px 42px rgba(77, 61, 46, .038),
    inset 0 1px 0 rgba(255,255,255,.92);
}


.sintex-editorial-card.is-reverse {
  grid-template-columns: minmax(440px, .92fr) minmax(0, 1fr);
}


/* =========================================================
   COPY
   ========================================================= */

.sintex-editorial-copy {
  max-width: 580px;

  padding:
    clamp(18px, 2.7vw, 40px);
}


.sintex-editorial-kicker {
  margin: 0 0 13px;

  color: #737C8D;

  font-size: .73rem;
  font-weight: 800;

  letter-spacing: .16em;
  text-transform: uppercase;
}


.sintex-editorial-copy h3 {
  max-width: 590px;

  margin: 0;

  color: #121C2E;

  font-family: "Sora", sans-serif;

  font-size: clamp(2rem, 2.55vw, 3.05rem);
  font-weight: 700;

  line-height: 1.04;
  letter-spacing: -.052em;
}


.sintex-editorial-copy > p:last-child {
  max-width: 545px;

  margin: 19px 0 0;

  color: #687386;

  font-size: 1rem;
  line-height: 1.68;
}


/* =========================================================
   VISUAL COMMON
   Much smaller than the full card.
   ========================================================= */

.sintex-editorial-visual {
  position: relative;

  width: min(100%, 590px);
  min-height: 255px;

  overflow: hidden;

  border-radius: 21px;
}


.sintex-editorial-card:not(.is-reverse)
.sintex-editorial-visual {
  justify-self: end;
}


.sintex-editorial-card.is-reverse
.sintex-editorial-visual {
  justify-self: start;
}


/* =========================================================
   01 — PROJECT BUILDER
   ========================================================= */

.sintex-editorial-builder {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 25px;

  background:
    linear-gradient(
      135deg,
      #9198C3 0%,
      #8798C5 52%,
      #8EA4C9 100%
    );
}


.sintex-editorial-builder::before {
  content: "";

  position: absolute;

  left: -100px;
  bottom: -190px;

  width: 310px;
  height: 310px;

  border-radius: 50%;

  background: rgba(114, 88, 175, .10);
}


.sintex-builder-window {
  position: relative;

  width: min(100%, 510px);

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;

  background: rgba(252,251,248,.98);

  box-shadow:
    0 19px 42px rgba(57, 67, 101, .14);
}


.sintex-builder-top {
  height: 39px;

  display: flex;
  align-items: center;

  gap: 6px;

  padding: 0 15px;

  border-bottom:
    1px solid rgba(64,72,90,.07);

  background:
    rgba(255,255,255,.70);
}


.sintex-builder-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #AFB5BF;
}


.sintex-builder-body {
  padding: 22px 23px 20px;
}


.sintex-builder-label {
  margin: 0 0 9px;

  color: #818897;

  font-size: .66rem;
  font-weight: 750;

  letter-spacing: .10em;
  text-transform: uppercase;
}


.sintex-builder-prompt {
  position: relative;

  min-height: 96px;

  padding:
    17px 17px 44px;

  border:
    1px solid rgba(69,79,99,.12);

  border-radius: 14px;

  background: #FFFDF9;

  color: #1B2432;

  font-size: .91rem;
  line-height: 1.5;
}


.sintex-builder-actions {
  position: absolute;

  left: 14px;
  right: 14px;
  bottom: 10px;

  display: flex;
  align-items: center;

  gap: 11px;

  color: #697386;

  font-size: .67rem;
  font-weight: 650;
}


.sintex-builder-action {
  display: inline-flex;
  align-items: center;

  gap: 5px;
}


.sintex-builder-action svg {
  width: 14px;
  height: 14px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.sintex-builder-send {
  margin-left: auto;

  width: 25px;
  height: 25px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  color: #FFF;

  background: #4774D0;
}


.sintex-editorial-caret {
  display: inline-block;

  width: 1px;
  height: 1em;

  margin-left: 2px;

  vertical-align: -.1em;

  background: #4774D0;

  animation:
    sintexEditorialCaret .82s step-end infinite;
}


@keyframes sintexEditorialCaret {

  0%,
  48% {
    opacity: 1;
  }

  49%,
  100% {
    opacity: 0;
  }

}


/* =========================================================
   02 — INFRASTRUCTURE / DATABASE
   ========================================================= */

.sintex-editorial-database {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background:
    linear-gradient(
      145deg,
      #DEBAC9 0%,
      #D6C0CD 48%,
      #C7BDCF 100%
    );
}


.sintex-db-window {
  width: min(100%, 510px);
  min-height: 218px;

  display: grid;
  grid-template-columns: 118px 1fr;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.50);
  border-radius: 17px;

  background: rgba(252,251,248,.98);

  box-shadow:
    0 18px 40px rgba(77, 59, 78, .10);
}


.sintex-db-sidebar {
  padding: 15px 11px;

  border-right:
    1px solid rgba(67,74,88,.07);

  background: rgba(248,247,244,.78);
}


.sintex-db-brand {
  margin: 0 0 16px;

  color: #182235;

  font-size: .74rem;
  font-weight: 800;
}


.sintex-db-nav {
  display: grid;
  gap: 5px;
}


.sintex-db-nav span {
  display: flex;
  align-items: center;

  gap: 6px;

  padding: 6px;

  color: #70798A;

  font-size: .60rem;
}


.sintex-db-nav span.is-current {
  border-radius: 7px;

  color: #7157A9;

  background: rgba(113,87,169,.09);
}


.sintex-db-nav svg {
  width: 12px;
  height: 12px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.sintex-db-main {
  padding: 17px;
}


.sintex-db-main h4 {
  margin: 0;

  color: #182235;

  font-family: "Sora", sans-serif;

  font-size: .91rem;
}


.sintex-db-main > p {
  margin: 4px 0 13px;

  color: #828A98;

  font-size: .60rem;
}


.sintex-db-toolbar {
  display: flex;

  gap: 6px;

  margin-bottom: 8px;
}


.sintex-db-field {
  flex: 1;

  height: 24px;

  border:
    1px solid rgba(69,78,94,.08);

  border-radius: 6px;

  background: #FFF;
}


.sintex-db-mini-button {
  width: 50px;

  border:
    1px solid rgba(69,78,94,.08);

  border-radius: 6px;

  background: #FFF;
}


.sintex-db-table {
  overflow: hidden;

  border:
    1px solid rgba(69,78,94,.075);

  border-radius: 7px;
}


.sintex-db-row {
  min-height: 27px;

  display: grid;

  grid-template-columns:
    1.2fr .62fr .72fr;

  align-items: center;

  padding: 0 8px;

  border-bottom:
    1px solid rgba(69,78,94,.06);

  color: #70798A;

  font-size: .55rem;
}


.sintex-db-row:last-child {
  border-bottom: 0;
}


.sintex-db-row.is-head {
  color: #747D8B;
  font-weight: 750;

  background: #F7F6F4;
}


.sintex-db-status {
  display: inline-flex;
  align-items: center;

  gap: 4px;
}


.sintex-db-status::before {
  content: "";

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #479C72;
}


/* =========================================================
   03 — PUBLISH
   ========================================================= */

.sintex-editorial-publish {
  display: flex;
  align-items: flex-end;
  justify-content: center;

  padding: 24px;

  background:
    linear-gradient(
      145deg,
      #8C8BC5 0%,
      #978FC1 53%,
      #B99CAA 100%
    );
}


.sintex-publish-window {
  width: min(100%, 510px);

  min-height: 188px;

  margin-top: 30px;

  padding: 22px;

  border-radius:
    22px 22px 16px 16px;

  background: #FBFAF6;

  box-shadow:
    0 18px 42px rgba(60,54,82,.12);
}


.sintex-publish-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 27px;

  color: #70798A;

  font-size: .64rem;
}


.sintex-publish-state {
  display: inline-flex;
  align-items: center;

  gap: 5px;
}


.sintex-publish-state::before {
  content: "";

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #4BA679;
}


.sintex-publish-panel {
  display: flex;
  align-items: center;

  gap: 10px;

  padding: 11px;

  border:
    1px solid rgba(68,76,92,.08);

  border-radius: 12px;

  background: #FFF;
}


.sintex-publish-icon {
  width: 19px;
  height: 19px;

  color: #626B7B;
}


.sintex-publish-icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.sintex-publish-meta {
  flex: 1;
}


.sintex-publish-meta strong {
  display: block;

  color: #1B2432;

  font-size: .70rem;
}


.sintex-publish-meta span {
  display: block;

  margin-top: 2px;

  color: #858D9B;

  font-size: .58rem;
}


.sintex-publish-button {
  border: 0;

  padding:
    8px 15px;

  border-radius: 8px;

  color: #FFF;

  background: #4774D0;

  font-family: inherit;

  font-size: .66rem;
  font-weight: 750;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1120px) {

  .sintex-editorial-shell {
    width: min(100% - 44px, 1000px);
  }


  .sintex-editorial-card,
  .sintex-editorial-card.is-reverse {
    grid-template-columns: 1fr;

    gap: 7px;
  }


  .sintex-editorial-copy {
    max-width: 760px;
  }


  .sintex-editorial-visual {
    width: 100%;
    max-width: none;

    justify-self: stretch !important;
  }


  .sintex-editorial-card.is-reverse
  .sintex-editorial-copy {
    order: 1;
  }


  .sintex-editorial-card.is-reverse
  .sintex-editorial-visual {
    order: 2;
  }

}


@media (max-width: 720px) {

  .sintex-editorial-shell {
    width: calc(100% - 28px);

    margin-bottom: 58px;

    gap: 14px;
  }


  .sintex-editorial-card {
    min-height: 0;

    padding: 12px;

    border-radius: 23px;
  }


  .sintex-editorial-copy {
    padding:
      21px 15px 17px;
  }


  .sintex-editorial-copy h3 {
    font-size:
      clamp(1.72rem, 8.2vw, 2.38rem);
  }


  .sintex-editorial-copy > p:last-child {
    margin-top: 15px;

    font-size: .95rem;
    line-height: 1.62;
  }


  .sintex-editorial-visual {
    min-height: 235px;

    border-radius: 18px;
  }


  .sintex-editorial-builder,
  .sintex-editorial-database,
  .sintex-editorial-publish {
    padding: 14px;
  }


  .sintex-db-window {
    grid-template-columns: 92px 1fr;
  }


  .sintex-db-sidebar {
    padding: 11px 7px;
  }


  .sintex-db-nav span {
    padding: 5px 3px;

    font-size: .54rem;
  }


  .sintex-db-main {
    padding: 12px 9px;
  }


  .sintex-db-row {
    padding: 0 5px;

    font-size: .50rem;
  }

}


@media (prefers-reduced-motion: reduce) {

  .sintex-editorial-caret {
    animation: none;
  }

}


/* =========================================================
   SINTEX EDITORIAL LOVABLE V3 START
   Reference-like composition / original Sintex content
   ========================================================= */


/* =========================================================
   GENERAL RHYTHM
   ========================================================= */

.sintex-editorial-shell {
  gap: 112px;

  margin-bottom: 112px;
}


/* =========================================================
   EDITORIAL CARDS
   ========================================================= */

.sintex-editorial-card {
  box-sizing: border-box;

  width:
    calc(100% - clamp(58px, 5vw, 86px));

  max-width:
    1430px;

  min-height:
    420px;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(470px, .90fr);

  gap:
    clamp(46px, 5vw, 82px);

  padding:
    38px 42px;

  border:
    1px solid rgba(66, 57, 48, .055);

  border-radius:
    31px;

  background:
    rgba(255, 253, 249, .95);

  box-shadow:
    0 18px 48px rgba(73, 59, 44, .035),
    inset 0 1px 0 rgba(255,255,255,.94);
}


.sintex-editorial-card.is-reverse {
  grid-template-columns:
    minmax(470px, .90fr)
    minmax(0, 1fr);
}


/* stagger desktop */

.sintex-editorial-card:nth-child(1),
.sintex-editorial-card:nth-child(3) {
  margin-left: auto;
  margin-right: 0;
}


.sintex-editorial-card:nth-child(2) {
  margin-left: 0;
  margin-right: auto;
}


/* =========================================================
   COPY
   ========================================================= */

.sintex-editorial-copy {
  max-width:
    530px;

  padding:
    clamp(10px, 1.4vw, 22px);
}


.sintex-editorial-kicker {
  margin-bottom:
    13px;

  color:
    #758198;

  font-size:
    .68rem;

  font-weight:
    700;

  letter-spacing:
    .15em;
}


.sintex-editorial-copy h3 {
  max-width:
    520px;

  font-size:
    clamp(1.82rem, 2.08vw, 2.46rem);

  font-weight:
    610;

  line-height:
    1.065;

  letter-spacing:
    -.041em;
}


.sintex-editorial-copy > p:last-child {
  max-width:
    505px;

  margin-top:
    18px;

  color:
    #707D93;

  font-size:
    .96rem;

  line-height:
    1.67;
}


/* =========================================================
   VISUAL COMMON
   NOT a frame anymore:
   this IS the coloured Lovable-style visual area.
   ========================================================= */

.sintex-editorial-visual {
  position: relative;

  box-sizing:
    border-box;

  width:
    min(100%, 580px);

  min-height:
    0;

  aspect-ratio:
    1.46 / 1;

  padding:
    0;

  overflow:
    hidden;

  border:
    0;

  border-radius:
    22px;

  box-shadow:
    none;
}


.sintex-editorial-card:not(.is-reverse)
.sintex-editorial-visual {
  justify-self:
    end;
}


.sintex-editorial-card.is-reverse
.sintex-editorial-visual {
  justify-self:
    start;
}


/* =========================================================
   CARD 1
   BLUE PANEL + WHITE PROMPT ENTERING FROM RIGHT
   ========================================================= */

.sintex-editorial-builder {
  display:
    block;

  padding:
    0;

  background:
    linear-gradient(
      135deg,
      #6F73E7 0%,
      #6289EC 50%,
      #6DA8F2 100%
    );
}


.sintex-editorial-builder::before {
  content: "";

  position: absolute;

  left:
    -96px;

  bottom:
    -132px;

  width:
    330px;

  height:
    270px;

  border-radius:
    50% 50% 45% 45%;

  background:
    rgba(82, 72, 194, .21);

  transform:
    rotate(-18deg);
}


.sintex-editorial-builder::after {
  content: "";

  position: absolute;

  right:
    -65px;

  top:
    -82px;

  width:
    250px;

  height:
    220px;

  border-radius:
    50%;

  background:
    rgba(129, 193, 255, .18);

  filter:
    blur(2px);
}


.sintex-builder-window {
  position:
    absolute;

  z-index:
    2;

  top:
    30%;

  right:
    -26px;

  width:
    86%;

  min-height:
    0;

  overflow:
    visible;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;

  box-shadow:
    none;
}


.sintex-builder-top {
  display:
    none;
}


.sintex-builder-body {
  padding:
    0;
}


.sintex-builder-label {
  display:
    none;
}


.sintex-builder-prompt {
  min-height:
    158px;

  padding:
    28px 28px 58px;

  border:
    1px solid rgba(49, 61, 89, .07);

  border-radius:
    24px 0 0 24px;

  background:
    #FFFDF9;

  color:
    #1C2431;

  font-size:
    .93rem;

  line-height:
    1.5;

  box-shadow:
    0 11px 30px rgba(46, 58, 90, .10);
}


.sintex-builder-actions {
  left:
    25px;

  right:
    25px;

  bottom:
    18px;

  gap:
    14px;

  color:
    #687386;

  font-size:
    .69rem;
}


.sintex-builder-action:nth-child(1) svg {
  color:
    #5681E9;
}


.sintex-builder-action:nth-child(2) svg {
  color:
    #7C67D8;
}


.sintex-builder-action:nth-child(3) svg {
  color:
    #D16D9B;
}


.sintex-builder-send {
  width:
    29px;

  height:
    29px;

  border-radius:
    9px;

  background:
    #326CE8;

  box-shadow:
    0 6px 15px rgba(50,108,232,.20);
}


/* =========================================================
   CARD 2
   PINK PANEL + DASHBOARD OFFSET RIGHT/DOWN
   ========================================================= */

.sintex-editorial-database {
  display:
    block;

  padding:
    0;

  background:
    radial-gradient(
      ellipse 72% 54% at 4% 104%,
      rgba(189, 131, 236, .98) 0%,
      rgba(199, 128, 233, .90) 28%,
      rgba(217, 126, 225, .72) 48%,
      rgba(244, 117, 207, .30) 67%,
      rgba(244, 117, 207, 0) 82%
    ),
    radial-gradient(
      ellipse 70% 38% at 30% 102%,
      rgba(244, 117, 207, .80) 0%,
      rgba(242, 133, 213, .52) 42%,
      rgba(254, 186, 224, 0) 78%
    ),
    linear-gradient(
      180deg,
      #FEBBE0 0%,
      #FEBADF 48%,
      #F7A6DB 68%,
      #E787D9 100%
    );
}


.sintex-editorial-database::before {
  content: "";

  position: absolute;

  left:
    -70px;

  bottom:
    -100px;

  width:
    260px;

  height:
    220px;

  border-radius:
    50%;

  background:
    transparent;

  filter:
    blur(5px);
}


.sintex-editorial-database::after {
  content: "";

  position: absolute;

  right:
    -80px;

  top:
    -95px;

  width:
    260px;

  height:
    240px;

  border-radius:
    50%;

  background:
    transparent;
}


.sintex-db-window {
  position:
    absolute;

  z-index:
    2;

  top:
    12.5%;

  right:
    -3.5%;

  width:
    86%;

  height:
    78%;

  min-height:
    0;

  grid-template-columns:
    118px 1fr;

  overflow:
    hidden;

  border:
    1px solid rgba(76, 62, 87, .065);

  border-radius:
    21px 0 0 21px;

  background:
    #FFFDF9;

  box-shadow:
    0 12px 29px rgba(77, 56, 82, .085);
}


.sintex-db-sidebar {
  padding:
    18px 12px;

  background:
    #FCFAF7;

  border-right:
    1px solid rgba(82, 72, 91, .07);
}


.sintex-db-brand {
  margin-bottom:
    20px;

  color:
    #1C2431;

  font-size:
    .72rem;
}


.sintex-db-nav {
  gap:
    5px;
}


.sintex-db-nav span {
  padding:
    7px 6px;

  color:
    #6F798A;

  font-size:
    .59rem;
}


.sintex-db-nav span.is-current {
  color:
    #8456BE;

  background:
    rgba(177, 110, 220, .13);
}


.sintex-db-nav span.is-current svg {
  color:
    #A052CD;
}


.sintex-db-main {
  padding:
    19px 17px;
}


.sintex-db-main h4 {
  color:
    #1B2433;

  font-size:
    .88rem;

  font-weight:
    620;
}


.sintex-db-main > p {
  color:
    #89919F;

  margin-bottom:
    14px;
}


.sintex-db-field,
.sintex-db-mini-button {
  background:
    #FFF;

  border-color:
    rgba(133, 106, 157, .10);
}


.sintex-db-table {
  border-color:
    rgba(133, 106, 157, .10);
}


.sintex-db-row.is-head {
  background:
    #F9F7F9;
}


.sintex-db-status::before {
  background:
    #47AA72;
}


/* =========================================================
   CARD 3
   VIOLET FIELD + PINK/RED GLOW + WHITE PANEL LOW
   ========================================================= */

.sintex-editorial-publish {
  display:
    block;

  padding:
    0;

  background:
    radial-gradient(
      ellipse 72% 48% at 70% 86%,
      rgba(255, 74, 139, .92) 0%,
      rgba(230, 96, 190, .57) 35%,
      rgba(163, 103, 220, .25) 62%,
      transparent 78%
    ),
    linear-gradient(
      180deg,
      #7073E6 0%,
      #7675E4 55%,
      #8D77DF 100%
    );
}


.sintex-editorial-publish::after {
  content: "";

  position: absolute;

  right:
    -95px;

  bottom:
    -80px;

  width:
    260px;

  height:
    250px;

  border-radius:
    50%;

  background:
    rgba(255, 62, 76, .52);

  filter:
    blur(18px);
}


.sintex-publish-window {
  position:
    absolute;

  z-index:
    2;

  left:
    0;

  right:
    4.5%;

  bottom:
    -4%;

  width:
    auto;

  min-height:
    57%;

  margin:
    0;

  padding:
    24px 24px 28px;

  border:
    1px solid rgba(66, 60, 83, .065);

  border-radius:
    0 24px 0 0;

  background:
    #FFFDF9;

  box-shadow:
    0 -4px 22px rgba(54, 49, 77, .065);
}


.sintex-publish-topline {
  margin-bottom:
    27px;

  color:
    #747E91;

  font-size:
    .64rem;
}


.sintex-publish-state {
  color:
    #63766F;
}


.sintex-publish-state::before {
  background:
    #44AB72;
}


.sintex-publish-panel {
  padding:
    12px 13px;

  border:
    1px solid rgba(77, 92, 144, .09);

  border-radius:
    13px;

  background:
    #FFF;

  box-shadow:
    0 7px 18px rgba(45, 57, 92, .035);
}


.sintex-publish-icon {
  color:
    #657DE2;
}


.sintex-publish-meta strong {
  color:
    #1E2737;

  font-weight:
    620;
}


.sintex-publish-button {
  padding:
    9px 18px;

  border-radius:
    9px;

  background:
    #3268E8;

  box-shadow:
    0 7px 16px rgba(50,104,232,.18);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

  .sintex-editorial-shell {
    gap:
      56px;

    margin-bottom:
      82px;
  }


  .sintex-editorial-card,
  .sintex-editorial-card.is-reverse {
    width:
      100%;

    max-width:
      none;

    min-height:
      auto;

    margin-left:
      0;

    margin-right:
      0;

    grid-template-columns:
      1fr;

    gap:
      28px;

    padding:
      32px;
  }


  .sintex-editorial-copy {
    max-width:
      700px;
  }


  .sintex-editorial-visual {
    width:
      min(100%, 620px);

    justify-self:
      start !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .sintex-editorial-shell {
    gap:
      38px;

    margin-bottom:
      62px;
  }


  .sintex-editorial-card {
    padding:
      20px;

    border-radius:
      24px;
  }


  .sintex-editorial-copy {
    padding:
      10px 8px;
  }


  .sintex-editorial-copy h3 {
    font-size:
      clamp(1.62rem, 7.6vw, 2.14rem);

    font-weight:
      610;
  }


  .sintex-editorial-copy > p:last-child {
    font-size:
      .93rem;
  }


  .sintex-editorial-visual {
    width:
      100%;

    aspect-ratio:
      1.36 / 1;

    border-radius:
      19px;
  }


  .sintex-builder-window {
    width:
      91%;

    right:
      -18px;

    top:
      29%;
  }


  .sintex-builder-prompt {
    min-height:
      140px;

    padding:
      22px 20px 54px;
  }


  .sintex-db-window {
    width:
      91%;

    right:
      -5%;

    grid-template-columns:
      94px 1fr;
  }


  .sintex-db-sidebar {
    padding:
      14px 8px;
  }


  .sintex-db-main {
    padding:
      14px 10px;
  }


  .sintex-publish-window {
    right:
      3%;

    min-height:
      60%;

    padding:
      18px;
  }

}




/* =========================================================
   SINTEX EDITORIAL V3.1 UI START
   Product UI typography + publish toolbar
   ========================================================= */


/* ---------------------------------------------------------
   SOFTWARE UI FONT
   Keep Sora outside; use native product/UI typography only
   inside the three mockups.
   --------------------------------------------------------- */

.sintex-editorial-visual,
.sintex-editorial-visual button,
.sintex-editorial-visual input {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Manrope",
    sans-serif !important;

  font-synthesis:
    none;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;

  letter-spacing:
    -.012em;
}


/* builder */

.sintex-builder-prompt {
  font-weight:
    500;

  letter-spacing:
    -.015em;
}


.sintex-builder-actions {
  font-weight:
    600;

  letter-spacing:
    -.01em;
}


/* database */

.sintex-db-brand {
  font-weight:
    700;

  letter-spacing:
    -.018em;
}


.sintex-db-main h4 {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Manrope",
    sans-serif !important;

  font-weight:
    700;

  letter-spacing:
    -.025em;
}


.sintex-db-main > p {
  font-weight:
    400;

  letter-spacing:
    -.008em;
}


.sintex-db-nav span {
  font-weight:
    500;

  letter-spacing:
    -.012em;
}


.sintex-db-row {
  font-weight:
    450;

  letter-spacing:
    -.008em;
}


.sintex-db-row.is-head {
  font-weight:
    650;
}


/* ---------------------------------------------------------
   PUBLISH TOOLBAR
   Same visual grammar as reference:
   green product icon / GitHub / Invite / Publish
   --------------------------------------------------------- */

.sintex-publish-window {
  display:
    flex;

  align-items:
    flex-start;

  padding:
    27px 22px 30px;
}


.sintex-publish-toolbar {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.sintex-publish-brand-tile {
  width:
    56px;

  height:
    56px;

  flex:
    0 0 56px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(42, 49, 63, .035);

  border-radius:
    14px;

  background:
    rgba(250, 249, 246, .96);

  box-shadow:
    0 4px 14px rgba(34, 39, 52, .025);
}


.sintex-publish-brand-tile svg {
  display:
    block;

  width:
    30px;

  height:
    30px;
}


.sintex-publish-brand-tile.is-supabase svg {
  width:
    31px;

  height:
    31px;
}


.sintex-publish-brand-tile.is-github {
  color:
    #111417;
}


.sintex-publish-brand-tile.is-github svg {
  width:
    29px;

  height:
    29px;

  fill:
    currentColor;
}


.sintex-publish-invite,
.sintex-publish-button {
  height:
    56px;

  border:
    0;

  border-radius:
    14px;

  font-size:
    .98rem;

  font-weight:
    650;

  letter-spacing:
    -.022em;

  cursor:
    default;
}


.sintex-publish-invite {
  min-width:
    128px;

  padding:
    0 24px;

  color:
    #171A1F;

  background:
    rgba(249, 248, 244, .96);

  box-shadow:
    inset 0 0 0 1px rgba(36, 41, 53, .025);
}


.sintex-publish-button {
  min-width:
    148px;

  margin-left:
    2px;

  padding:
    0 26px;

  color:
    #FFF;

  background:
    #2860E8;

  box-shadow:
    none;
}


/* tighter than normal body text, like a real software toolbar */

.sintex-publish-toolbar button {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Manrope",
    sans-serif !important;
}


/* tablet */

@media (max-width: 1120px) {

  .sintex-publish-toolbar {
    width:
      min(100%, 500px);
  }

}


/* mobile */

@media (max-width: 720px) {

  .sintex-publish-window {
    padding:
      18px 15px;
  }


  .sintex-publish-toolbar {
    gap:
      7px;
  }


  .sintex-publish-brand-tile {
    width:
      44px;

    height:
      44px;

    flex-basis:
      44px;

    border-radius:
      11px;
  }


  .sintex-publish-brand-tile svg,
  .sintex-publish-brand-tile.is-supabase svg,
  .sintex-publish-brand-tile.is-github svg {
    width:
      24px;

    height:
      24px;
  }


  .sintex-publish-invite,
  .sintex-publish-button {
    height:
      44px;

    border-radius:
      11px;

    font-size:
      .76rem;

    padding:
      0 13px;
  }


  .sintex-publish-invite {
    min-width:
      82px;
  }


  .sintex-publish-button {
    min-width:
      96px;
  }

}


/* SINTEX EDITORIAL V3.1 UI END */

/* =========================================================
   SINTEX EDITORIAL V3.2 TUNE START
   Buttons / DB zoom / active blue / title SVG
   ========================================================= */


/* =========================================================
   TITLE ICONS
   Inline SVG, no box, no background.
   ========================================================= */

.sintex-editorial-title-icon {
  width: 36px;
  height: 36px;

  display: block;

  margin:
    0 0 15px;

  color:
    #566FDC;
}


.sintex-editorial-title-icon svg {
  display: block;

  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;

  overflow: visible;
}


.sintex-editorial-title-icon--project {
  color:
    #5D73E3;
}


.sintex-editorial-title-icon--database {
  color:
    #3268E8;
}


.sintex-editorial-title-icon--publish {
  color:
    #706AE0;
}


/* =========================================================
   DATABASE ACTIVE ITEM
   Replace current purple with Publish-family blue.
   ========================================================= */

.sintex-db-nav span.is-current {
  color:
    #3268E8;

  background:
    rgba(50, 104, 232, .105);
}


.sintex-db-nav span.is-current svg {
  color:
    #3268E8;
}


/* =========================================================
   DATABASE ZOOM
   Desktop only: slightly larger crop and typography.
   ========================================================= */

@media (min-width: 1121px) {

  .sintex-db-window {
    top:
      8%;

    right:
      -5.5%;

    width:
      92%;

    height:
      84%;

    grid-template-columns:
      124px 1fr;
  }


  .sintex-db-sidebar {
    padding:
      19px 13px;
  }


  .sintex-db-brand {
    margin-bottom:
      21px;

    font-size:
      .78rem;
  }


  .sintex-db-nav {
    gap:
      5px;
  }


  .sintex-db-nav span {
    padding:
      7px;

    font-size:
      .625rem;
  }


  .sintex-db-nav svg {
    width:
      13px;

    height:
      13px;
  }


  .sintex-db-main {
    padding:
      20px 18px;
  }


  .sintex-db-main h4 {
    font-size:
      .94rem;
  }


  .sintex-db-main > p {
    font-size:
      .635rem;
  }


  .sintex-db-row {
    min-height:
      29px;

    font-size:
      .585rem;
  }

}


/* =========================================================
   PUBLISH TOOLBAR
   Thinner, closer to Lovable proportions.
   ========================================================= */

.sintex-publish-window {
  padding:
    27px 22px 30px;
}


.sintex-publish-toolbar {
  gap:
    9px;
}


.sintex-publish-brand-tile {
  width:
    44px;

  height:
    44px;

  flex:
    0 0 44px;

  border-radius:
    11px;
}


.sintex-publish-brand-tile svg {
  width:
    25px;

  height:
    25px;
}


.sintex-publish-brand-tile.is-supabase svg {
  width:
    26px;

  height:
    26px;
}


.sintex-publish-brand-tile.is-github svg {
  width:
    24px;

  height:
    24px;
}


.sintex-publish-invite,
.sintex-publish-button {
  height:
    44px;

  border-radius:
    10px;

  font-size:
    .84rem;

  font-weight:
    620;

  letter-spacing:
    -.018em;

  transition:
    transform .20s cubic-bezier(.2,.7,.2,1),
    box-shadow .20s ease,
    background-color .20s ease,
    border-color .20s ease;

  will-change:
    transform;
}


.sintex-publish-invite {
  min-width:
    108px;

  padding:
    0 20px;

  background:
    rgba(249, 248, 244, .96);

  box-shadow:
    inset 0 0 0 1px rgba(34, 40, 53, .035);
}


.sintex-publish-button {
  min-width:
    122px;

  margin-left:
    1px;

  padding:
    0 21px;

  background:
    #3268E8;

  box-shadow:
    0 5px 13px rgba(50, 104, 232, .12);
}


/* desktop pointer interaction only */

@media (hover: hover) and (pointer: fine) {

  .sintex-publish-invite:hover {
    transform:
      translateY(-2px);

    background:
      #FFFFFF;

    box-shadow:
      inset 0 0 0 1px rgba(34, 40, 53, .045),
      0 8px 18px rgba(38, 43, 56, .07);
  }


  .sintex-publish-button:hover {
    transform:
      translateY(-2px);

    background:
      #285FE0;

    box-shadow:
      0 10px 21px rgba(50, 104, 232, .22);
  }


  .sintex-publish-invite:active,
  .sintex-publish-button:active {
    transform:
      translateY(0)
      scale(.985);

    transition-duration:
      .08s;
  }

}


/* accessible keyboard state */

.sintex-publish-invite:focus-visible,
.sintex-publish-button:focus-visible {
  outline:
    2px solid rgba(50, 104, 232, .40);

  outline-offset:
    3px;
}


/* =========================================================
   MOBILE
   Keep toolbar compact without shrinking excessively.
   ========================================================= */

@media (max-width: 720px) {

  .sintex-editorial-title-icon {
    width:
      31px;

    height:
      31px;

    margin-bottom:
      12px;
  }


  .sintex-publish-toolbar {
    gap:
      7px;
  }


  .sintex-publish-brand-tile {
    width:
      40px;

    height:
      40px;

    flex-basis:
      40px;

    border-radius:
      10px;
  }


  .sintex-publish-brand-tile svg,
  .sintex-publish-brand-tile.is-supabase svg,
  .sintex-publish-brand-tile.is-github svg {
    width:
      22px;

    height:
      22px;
  }


  .sintex-publish-invite,
  .sintex-publish-button {
    height:
      40px;

    border-radius:
      9px;

    font-size:
      .75rem;
  }


  .sintex-publish-invite {
    min-width:
      76px;

    padding:
      0 12px;
  }


  .sintex-publish-button {
    min-width:
      91px;

    padding:
      0 13px;
  }

}


/* reduced motion */

@media (prefers-reduced-motion: reduce) {

  .sintex-publish-invite,
  .sintex-publish-button {
    transition:
      none !important;
  }


  .sintex-publish-invite:hover,
  .sintex-publish-button:hover,
  .sintex-publish-invite:active,
  .sintex-publish-button:active {
    transform:
      none !important;
  }

}


/* SINTEX EDITORIAL V3.2 TUNE END */

/* =========================================================
   SINTEX EDITORIAL V3.3 TUNE START
   Cleaner icons + compact bottom-right publish controls
   ========================================================= */


/* =========================================================
   TITLE ICON REFINEMENT
   ========================================================= */

.sintex-editorial-title-icon--project {
  width: 34px;
  height: 34px;
}


.sintex-editorial-title-icon--project svg {
  stroke-width: 1.9;
}


.sintex-editorial-title-icon--publish {
  width: 35px;
  height: 35px;
}


.sintex-editorial-title-icon--publish svg {
  stroke-width: 1.75;
}


/* =========================================================
   PUBLISH TOOLBAR
   Anchored to bottom-right of white panel.
   ========================================================= */

.sintex-publish-window {
  position: absolute;

  display: block;

  padding: 0;
}


.sintex-publish-toolbar {
  position: absolute;

  right: 22px;
  bottom: 22px;

  width: auto;

  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 7px;

  margin: 0;
}


/* =========================================================
   BRAND TILES
   Slightly smaller, preserving visual weight.
   ========================================================= */

.sintex-publish-brand-tile {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 9px;
}


.sintex-publish-brand-tile svg {
  width: 22px;
  height: 22px;
}


.sintex-publish-brand-tile.is-supabase svg {
  width: 23px;
  height: 23px;
}


.sintex-publish-brand-tile.is-github svg {
  width: 21px;
  height: 21px;
}


/* =========================================================
   BUTTONS
   Thinner / less CTA-like.
   ========================================================= */

.sintex-publish-invite,
.sintex-publish-button {
  height: 38px;

  border-radius: 8px;

  font-size: .77rem;

  font-weight: 610;

  letter-spacing: -.016em;

  transition:
    transform .18s cubic-bezier(.2,.7,.2,1),
    box-shadow .18s ease,
    background-color .18s ease;
}


.sintex-publish-invite {
  min-width: 90px;

  padding: 0 15px;

  background: rgba(249, 248, 244, .97);

  box-shadow:
    inset 0 0 0 1px rgba(34, 40, 53, .035);
}


.sintex-publish-button {
  min-width: 106px;

  margin-left: 0;

  padding: 0 17px;

  background: #3268E8;

  box-shadow:
    0 4px 10px rgba(50, 104, 232, .11);
}


/* desktop interaction */

@media (hover: hover) and (pointer: fine) {

  .sintex-publish-invite:hover {
    transform:
      translateY(-1px);

    background:
      #FFFFFF;

    box-shadow:
      inset 0 0 0 1px rgba(34, 40, 53, .045),
      0 6px 13px rgba(38, 43, 56, .055);
  }


  .sintex-publish-button:hover {
    transform:
      translateY(-1px);

    background:
      #285FE0;

    box-shadow:
      0 7px 15px rgba(50, 104, 232, .18);
  }


  .sintex-publish-invite:active,
  .sintex-publish-button:active {
    transform:
      translateY(0)
      scale(.985);

    transition-duration:
      .07s;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .sintex-publish-toolbar {
    right: 13px;
    bottom: 14px;

    gap: 6px;
  }


  .sintex-publish-brand-tile {
    width: 34px;
    height: 34px;

    flex-basis: 34px;

    border-radius: 8px;
  }


  .sintex-publish-brand-tile svg,
  .sintex-publish-brand-tile.is-supabase svg,
  .sintex-publish-brand-tile.is-github svg {
    width: 20px;
    height: 20px;
  }


  .sintex-publish-invite,
  .sintex-publish-button {
    height: 35px;

    border-radius: 8px;

    font-size: .70rem;
  }


  .sintex-publish-invite {
    min-width: 69px;

    padding: 0 10px;
  }


  .sintex-publish-button {
    min-width: 82px;

    padding: 0 11px;
  }

}


/* reduced motion */

@media (prefers-reduced-motion: reduce) {

  .sintex-publish-invite,
  .sintex-publish-button {
    transition: none !important;
  }


  .sintex-publish-invite:hover,
  .sintex-publish-button:hover,
  .sintex-publish-invite:active,
  .sintex-publish-button:active {
    transform: none !important;
  }

}


/* SINTEX EDITORIAL V3.3 TUNE END */

/* =========================================================
   SINTEX EDITORIAL V3.4 TUNE START
   Final icon refinement + toolbar top-right
   ========================================================= */


/* =========================================================
   PROJECT ICON
   ========================================================= */

.sintex-editorial-title-icon--project {
  width:
    34px;

  height:
    34px;
}


.sintex-editorial-title-icon--project svg {
  stroke-width:
    1.75;
}


/* =========================================================
   PUBLISH / ROCKET ICON
   ========================================================= */

.sintex-editorial-title-icon--publish {
  width:
    35px;

  height:
    35px;
}


.sintex-editorial-title-icon--publish svg {
  stroke-width:
    1.65;
}


/* =========================================================
   PUBLISH PANEL
   TOOLBAR TOP-RIGHT INSIDE WHITE AREA
   ========================================================= */

.sintex-publish-window {
  position:
    absolute;

  display:
    block;

  padding:
    0;
}


.sintex-publish-toolbar {
  position:
    absolute;

  top:
    22px;

  right:
    22px;

  bottom:
    auto;

  left:
    auto;

  width:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  margin:
    0;
}


/* =========================================================
   COMPACT BRAND TILES
   ========================================================= */

.sintex-publish-brand-tile {
  width:
    36px;

  height:
    36px;

  flex:
    0 0 36px;

  border-radius:
    9px;
}


.sintex-publish-brand-tile svg {
  width:
    20px;

  height:
    20px;
}


.sintex-publish-brand-tile.is-supabase svg {
  width:
    21px;

  height:
    21px;
}


.sintex-publish-brand-tile.is-github svg {
  width:
    20px;

  height:
    20px;
}


/* =========================================================
   COMPACT BUTTONS
   ========================================================= */

.sintex-publish-invite,
.sintex-publish-button {
  height:
    36px;

  border-radius:
    8px;

  font-size:
    .76rem;

  font-weight:
    610;

  line-height:
    1;

  letter-spacing:
    -.016em;
}


.sintex-publish-invite {
  min-width:
    88px;

  padding:
    0 15px;
}


.sintex-publish-button {
  min-width:
    108px;

  padding:
    0 17px;

  margin-left:
    0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .sintex-publish-toolbar {
    top:
      14px;

    right:
      14px;

    gap:
      6px;
  }


  .sintex-publish-brand-tile {
    width:
      32px;

    height:
      32px;

    flex-basis:
      32px;

    border-radius:
      8px;
  }


  .sintex-publish-brand-tile svg,
  .sintex-publish-brand-tile.is-supabase svg,
  .sintex-publish-brand-tile.is-github svg {
    width:
      18px;

    height:
      18px;
  }


  .sintex-publish-invite,
  .sintex-publish-button {
    height:
      33px;

    border-radius:
      7px;

    font-size:
      .69rem;
  }


  .sintex-publish-invite {
    min-width:
      68px;

    padding:
      0 9px;
  }


  .sintex-publish-button {
    min-width:
      82px;

    padding:
      0 11px;
  }

}


/* SINTEX EDITORIAL V3.4 TUNE END */








/* =========================================================
   SINTEX EDITORIAL V3.6B START
   Consolidated Card 4 / colour / project icon tuning
   ========================================================= */


/* ---------------------------------------------------------
   PROJECT ICON
   --------------------------------------------------------- */

.sintex-editorial-title-icon--project {
  width: 35px;
  height: 34px;
}

.sintex-editorial-title-icon--project svg {
  stroke-width: 1.70;
}


/* ---------------------------------------------------------
   CARD 3
   Broader pink/red field.
   --------------------------------------------------------- */

.sintex-editorial-publish {
  background:
    radial-gradient(
      ellipse 80% 68% at 83% 78%,
      rgba(255, 74, 151, .82) 0%,
      rgba(241, 83, 165, .60) 30%,
      rgba(202, 96, 202, .32) 53%,
      rgba(155, 105, 218, .11) 68%,
      transparent 80%
    ),
    radial-gradient(
      ellipse 42% 44% at 102% 93%,
      rgba(255, 78, 71, .65) 0%,
      rgba(255, 78, 71, .30) 42%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      #6975EB 0%,
      #7074E4 52%,
      #806FDA 100%
    );
}


.sintex-editorial-publish::after {
  right: -62px;
  bottom: -48px;

  width: 405px;
  height: 360px;

  background:
    rgba(255, 68, 108, .38);

  filter:
    blur(32px);
}


/* ---------------------------------------------------------
   CARD 4 STAGGER
   --------------------------------------------------------- */

.sintex-editorial-card:nth-child(4) {
  margin-left: 0;
  margin-right: auto;
}


/* ---------------------------------------------------------
   CARD 4 VISUAL
   --------------------------------------------------------- */

.sintex-editorial-workflow {
  position: relative;

  display: block;

  padding: 0;

  background:
    radial-gradient(
      ellipse 48% 40% at 84% 13%,
      rgba(255, 214, 99, .54) 0%,
      rgba(255, 214, 99, .27) 38%,
      transparent 75%
    ),
    radial-gradient(
      ellipse 42% 38% at 12% 88%,
      rgba(101, 118, 224, .24) 0%,
      transparent 76%
    ),
    linear-gradient(
      135deg,
      #7185ED 0%,
      #6A9CF0 50%,
      #73B7F3 100%
    );
}


.sintex-editorial-workflow::before {
  content: "";

  position: absolute;

  top: -76px;
  right: -52px;

  width: 260px;
  height: 230px;

  border-radius: 50%;

  background:
    rgba(255, 211, 90, .16);

  filter:
    blur(22px);
}


/* ---------------------------------------------------------
   WORKFLOW SOFTWARE WINDOW
   --------------------------------------------------------- */

.sintex-workflow-window {
  position: absolute;

  z-index: 2;

  top: 13%;
  left: 8%;

  width: 95%;
  height: 84%;

  overflow: hidden;

  border:
    1px solid rgba(62, 79, 118, .07);

  border-radius:
    21px 0 0 0;

  background:
    #FFFDF9;

  box-shadow:
    0 14px 32px rgba(54, 72, 119, .09);
}


.sintex-workflow-head {
  padding:
    19px 21px 14px;

  border-bottom:
    1px solid rgba(73, 84, 108, .07);
}


.sintex-workflow-head strong {
  display: block;

  color:
    #202939;

  font-size:
    .89rem;

  font-weight:
    700;

  letter-spacing:
    -.025em;
}


.sintex-workflow-head span {
  display: block;

  margin-top:
    4px;

  color:
    #8791A3;

  font-size:
    .60rem;
}


/* metrics */

.sintex-workflow-metrics {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    10px;

  padding:
    14px 19px 13px;
}


.sintex-workflow-stat {
  position: relative;

  min-height:
    64px;

  padding:
    13px 14px;

  border:
    1px solid rgba(71, 88, 126, .08);

  border-radius:
    12px;

  background:
    #FFF;

  box-shadow:
    0 6px 15px rgba(52, 68, 106, .025);
}


.sintex-workflow-stat strong {
  display: block;

  color:
    #202838;

  font-size:
    1rem;

  font-weight:
    700;

  line-height:
    1;
}


.sintex-workflow-stat span {
  display: block;

  margin-top:
    6px;

  color:
    #8791A2;

  font-size:
    .56rem;
}


.sintex-workflow-stat.is-accent::after {
  content: "";

  position: absolute;

  top: 12px;
  right: 12px;

  width: 24px;
  height: 24px;

  border-radius:
    8px;

  background:
    rgba(255, 207, 73, .26);
}


.sintex-workflow-stat.is-accent::before {
  content: "";

  position: absolute;

  z-index: 2;

  top: 18px;
  right: 18px;

  width: 10px;
  height: 10px;

  border:
    1.5px solid #E8A624;

  border-radius:
    50%;
}


/* request list */

.sintex-workflow-list {
  margin:
    0 19px 18px;

  overflow: hidden;

  border:
    1px solid rgba(73, 87, 119, .075);

  border-radius:
    12px;

  background:
    #FFF;
}


.sintex-workflow-list-title {
  padding:
    10px 12px;

  color:
    #4E586B;

  font-size:
    .58rem;

  font-weight:
    650;

  background:
    #FBFAF8;

  border-bottom:
    1px solid rgba(73, 87, 119, .065);
}


.sintex-workflow-row {
  display: grid;

  grid-template-columns:
    23px minmax(0, 1fr) auto;

  align-items: center;

  gap:
    9px;

  min-height:
    38px;

  padding:
    7px 11px;

  border-bottom:
    1px solid rgba(73, 87, 119, .055);
}


.sintex-workflow-row:last-child {
  border-bottom: 0;
}


.sintex-workflow-person {
  width: 22px;
  height: 22px;

  display: grid;

  place-items: center;

  color:
    #6E7D98;

  border-radius:
    50%;

  background:
    #F3F5F8;
}


.sintex-workflow-person svg {
  width: 12px;
  height: 12px;

  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.5;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.sintex-workflow-row-copy strong {
  display: block;

  color:
    #283244;

  font-size:
    .58rem;

  font-weight:
    650;
}


.sintex-workflow-row-copy span {
  display: block;

  margin-top:
    2px;

  color:
    #8B94A5;

  font-size:
    .49rem;
}


.sintex-workflow-status {
  padding:
    4px 7px;

  border-radius:
    7px;

  color:
    #5277D7;

  background:
    rgba(82, 119, 215, .08);

  font-size:
    .46rem;

  font-weight:
    650;
}


.sintex-workflow-status.is-yellow {
  color:
    #AE7719;

  background:
    rgba(255, 203, 75, .17);
}


.sintex-workflow-status.is-green {
  color:
    #3D9567;

  background:
    rgba(66, 174, 116, .10);
}


.sintex-editorial-title-icon--workflow {
  color:
    #5C84E5;
}


/* tablet */

@media (max-width: 1120px) {

  .sintex-editorial-card:nth-child(4) {
    margin-left: 0;
    margin-right: 0;
  }

}


/* mobile */

@media (max-width: 720px) {

  .sintex-workflow-window {
    top: 10%;
    left: 6%;

    width: 96%;
    height: 87%;
  }


  .sintex-workflow-head {
    padding:
      14px 14px 10px;
  }


  .sintex-workflow-metrics {
    gap:
      7px;

    padding:
      10px 12px;
  }


  .sintex-workflow-stat {
    min-height:
      55px;

    padding:
      10px;
  }


  .sintex-workflow-list {
    margin:
      0 12px 12px;
  }


  .sintex-workflow-row {
    grid-template-columns:
      20px minmax(0, 1fr);

    min-height:
      33px;

    padding:
      6px 8px;
  }


  .sintex-workflow-status {
    display:
      none;
  }

}


/* SINTEX EDITORIAL V3.6B END */


/* SINTEX EDITORIAL LOVABLE V3 END */



/* =========================================================
   SINTEX EDITORIAL V4.0.3 START
   final consolidated title icon ownership
   ========================================================= */


/* =========================================================
   ICON BASE
   ========================================================= */

.sintex-editorial-title-icon {
  width: 40px;
  height: 40px;

  display: block;

  margin:
    0 0 16px;

  color:
    #5E7BE6;
}


.sintex-editorial-title-icon svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;

  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.72;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* =========================================================
   CODE
   ========================================================= */

.sintex-editorial-title-icon--project {
  width: 45px;
  height: 45px;

  color:
    #5E7BE6;
}


.sintex-editorial-title-icon--project svg {
  stroke-width:
    1.78;
}


/* =========================================================
   DATABASE
   ========================================================= */

.sintex-editorial-title-icon--database {
  width: 43px;
  height: 43px;

  color:
    #C57A73;
}


.sintex-editorial-title-icon--database svg {
  stroke-width:
    1.68;
}


/* =========================================================
   ROCKET
   ========================================================= */

.sintex-editorial-title-icon--publish {
  width: 49px;
  height: 49px;

  color:
    #746AE4;
}


.sintex-editorial-title-icon--publish svg {
  stroke-width:
    1.62;
}


/* =========================================================
   NEURAL NETWORK
   ========================================================= */

.sintex-editorial-title-icon--workflow {
  width: 45px;
  height: 45px;

  color:
    #B78318;
}


.sintex-editorial-title-icon--workflow svg {
  stroke-width:
    1.55;
}


/* =========================================================
   WORKFLOW VISUAL
   Slightly stronger yellow field.
   ========================================================= */

.sintex-editorial-workflow {
  background:
    radial-gradient(
      ellipse 68% 56% at 94% 2%,
      rgba(244, 211, 87, .61) 0%,
      rgba(237, 207, 91, .34) 36%,
      rgba(226, 204, 112, .15) 58%,
      transparent 80%
    ),
    radial-gradient(
      ellipse 44% 42% at 10% 91%,
      rgba(100, 121, 228, .23) 0%,
      transparent 76%
    ),
    linear-gradient(
      135deg,
      #7184ED 0%,
      #6C9CF0 47%,
      #7EB1EB 65%,
      #C0C8A6 84%,
      #DEC66A 100%
    ) !important;
}


/* =========================================================
   CLOCK / DONE
   Preserve corrected V3.9D ownership.
   ========================================================= */

.sintex-workflow-stat {
  position:
    relative;

  padding-right:
    60px;
}


.sintex-workflow-stat .sintex-workflow-stat-icon {
  position:
    absolute;

  top:
    50%;

  right:
    13px;

  width:
    34px;

  height:
    34px;

  display:
    grid !important;

  place-items:
    center;

  padding:
    0 !important;

  margin:
    0 !important;

  margin-top:
    0 !important;

  font-size:
    0 !important;

  line-height:
    0 !important;

  transform:
    translateY(-50%);

  box-sizing:
    border-box;
}


.sintex-workflow-stat .sintex-workflow-stat-icon svg {
  display:
    block;

  margin:
    0 !important;

  fill:
    none;

  overflow:
    visible;
}


.sintex-workflow-stat .sintex-workflow-stat-icon--clock {
  color:
    #C88900 !important;

  border-radius:
    9px;

  background:
    #FFF1B8;
}


.sintex-workflow-stat .sintex-workflow-stat-icon--clock svg {
  width:
    22px;

  height:
    22px;

  stroke:
    #C88900 !important;

  stroke-width:
    2.05;
}


.sintex-workflow-stat .sintex-workflow-stat-icon--done {
  color:
    #249A61 !important;

  border-radius:
    0;

  background:
    transparent !important;

  box-shadow:
    none !important;
}


.sintex-workflow-stat .sintex-workflow-stat-icon--done svg {
  width:
    25px;

  height:
    25px;

  stroke:
    #249A61 !important;

  stroke-width:
    2.05;
}


.sintex-workflow-stat.is-accent::before,
.sintex-workflow-stat.is-accent::after {
  content:
    none !important;

  display:
    none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .sintex-editorial-title-icon {
    margin-bottom:
      13px;
  }


  .sintex-editorial-title-icon--project {
    width:
      39px;

    height:
      39px;
  }


  .sintex-editorial-title-icon--database {
    width:
      37px;

    height:
      37px;
  }


  .sintex-editorial-title-icon--publish {
    width:
      44px;

    height:
      44px;
  }


  .sintex-editorial-title-icon--workflow {
    width:
      39px;

    height:
      39px;
  }


  .sintex-workflow-stat {
    padding-right:
      51px;
  }


  .sintex-workflow-stat .sintex-workflow-stat-icon {
    right:
      8px;

    width:
      30px;

    height:
      30px;
  }


  .sintex-workflow-stat .sintex-workflow-stat-icon--clock svg {
    width:
      19px;

    height:
      19px;
  }


  .sintex-workflow-stat .sintex-workflow-stat-icon--done svg {
    width:
      22px;

    height:
      22px;
  }

}



/* =========================================================
   FIRST CARD SEND POSITION
   Move only the blue send control.
   ========================================================= */

.sintex-editorial-card:first-child .sintex-builder-send {
  margin-right:
    12px;
}


@media (max-width: 720px) {

  .sintex-editorial-card:first-child .sintex-builder-send {
    margin-right:
      6px;
  }

}


/* =========================================================
   DATABASE SOFTWARE MOCKUP
   Outer pink visual untouched.
   Scale only the fake software interface.
   ========================================================= */

.sintex-editorial-database {
  overflow:
    hidden;
}


.sintex-editorial-database .sintex-db-window {
  transform:
    scale(1.06);

  transform-origin:
    left center;
}


/* table becomes intentionally 2-column */

.sintex-editorial-database .sintex-db-row {
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(86px, .72fr)
    !important;
}


/* defensive ownership in case old third cells remain */

.sintex-editorial-database .sintex-db-row > span:nth-child(3) {
  display:
    none !important;
}


@media (max-width: 720px) {

  .sintex-editorial-database .sintex-db-window {
    transform:
      scale(1.035);
  }

}

/* SINTEX EDITORIAL V4.0.3 END */
/* =========================================================
   SINTEX EDITORIAL V4.1 FINAL OWNER START
   Project icon breathing + Lovable-like publish controls
   ========================================================= */

/* ---------------------------------------------------------
   PROJECT / CODE ICON
   --------------------------------------------------------- */

.sintex-editorial-copy > .sintex-editorial-title-icon--project {
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
}

.sintex-editorial-copy > .sintex-editorial-title-icon--project svg {
  width: 100%;
  height: 100%;
}


/* ---------------------------------------------------------
   PUBLISH TOOLBAR
   Proportions intentionally closer to Lovable reference
   --------------------------------------------------------- */

.sintex-publish-toolbar {
  gap: 10px;
}

.sintex-publish-brand-tile {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 11px;
}

.sintex-publish-brand-tile svg {
  width: 26px;
  height: 26px;
}

.sintex-publish-brand-tile.is-supabase svg {
  width: 27px;
  height: 27px;
}

.sintex-publish-brand-tile.is-github svg {
  width: 25px;
  height: 25px;
}

.sintex-publish-invite,
.sintex-publish-button {
  height: 46px;
  border-radius: 11px;
  font-size: .88rem;
  font-weight: 620;
  line-height: 1;
  letter-spacing: -.018em;
}

.sintex-publish-invite {
  min-width: 116px;
  padding: 0 22px;
}

.sintex-publish-button {
  min-width: 146px;
  padding: 0 27px;
}


/* ---------------------------------------------------------
   MOBILE
   Keep proportions balanced without oversized controls
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   SINTEX EDITORIAL V4.1.1 ICON TUNE
   Lighter publish rocket, geometry unchanged
   --------------------------------------------------------- */

.sintex-editorial-copy > .sintex-editorial-title-icon--publish svg,
.sintex-editorial-copy > .sintex-editorial-title-icon--publish svg * {
  stroke-width: 1.35 !important;
}

@media (max-width: 720px) {

  .sintex-editorial-copy > .sintex-editorial-title-icon--project {
    width: 43px;
    height: 43px;
    margin-bottom: 17px;
  }

  .sintex-publish-toolbar {
    gap: 7px;
  }

  .sintex-publish-brand-tile {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 9px;
  }

  .sintex-publish-brand-tile svg,
  .sintex-publish-brand-tile.is-supabase svg,
  .sintex-publish-brand-tile.is-github svg {
    width: 21px;
    height: 21px;
  }

  .sintex-publish-invite,
  .sintex-publish-button {
    height: 38px;
    border-radius: 9px;
    font-size: .74rem;
  }

  .sintex-publish-invite {
    min-width: 78px;
    padding: 0 12px;
  }

  .sintex-publish-button {
    min-width: 98px;
    padding: 0 14px;
  }
}

/* SINTEX EDITORIAL V4.1 FINAL OWNER END */