/* ============================================================
   TP_REFERENCE_UI_V2

   Structural visual target:
   - approved generated Home reference
   - approved generated Strategy Studio reference
   ============================================================ */

:root {
  --x-bg: #030914;
  --x-bg-2: #06111d;
  --x-bg-3: #081827;

  --x-panel: #091725;
  --x-panel-2: #0b1c2d;
  --x-panel-3: #0e2236;

  --x-border: rgba(87, 173, 232, .15);
  --x-border-2: rgba(76, 189, 255, .30);

  --x-white: #f6f9fd;
  --x-text: #d6e2ec;
  --x-muted: #91a4b7;
  --x-muted-2: #62788e;

  --x-blue: #3bbcff;
  --x-blue-2: #238ff1;
  --x-cyan: #42dcff;

  --x-green: #20a6df;
  --x-amber: #f1b84b;
  --x-red: #f25e6c;

  --x-radius: 13px;
  --x-radius-lg: 19px;

  --x-shadow:
    0 25px 80px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .022);
}


/* ============================================================
   GLOBAL
   ============================================================ */

html {
  background: var(--x-bg);
}

body {
  overflow-x: hidden;
}

body.tpx-home-active,
body.studio-v07 {
  color: var(--x-white) !important;

  background:
    radial-gradient(
      circle at 69% 8%,
      rgba(16, 95, 160, .17),
      transparent 28%
    ),
    radial-gradient(
      circle at 9% 17%,
      rgba(12, 104, 148, .08),
      transparent 22%
    ),
    linear-gradient(
      180deg,
      #05101c 0%,
      #030a13 48%,
      #02070d 100%
    ) !important;
}

body.tpx-home-active::before,
body.studio-v07::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    linear-gradient(
      rgba(65, 151, 211, .023) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(65, 151, 211, .023) 1px,
      transparent 1px
    );

  background-size: 44px 44px;

  mask-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,.8),
      transparent 78%
    );
}

button,
a,
input,
select,
textarea {
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}


/* ============================================================
   NEW GLOBAL TOP NAV
   ============================================================ */

.tpx-topnav {
  position: sticky;
  top: 0;
  z-index: 100;

  height: 68px;

  display: flex;
  align-items: center;

  padding:
    0 clamp(22px, 4vw, 70px);

  border-bottom:
    1px solid rgba(62, 146, 205, .15);

  background:
    rgba(3, 10, 18, .91);

  backdrop-filter:
    blur(20px) saturate(125%);
}

.tpx-topnav-inner {
  width:
    min(
      1560px,
      100%
    );

  margin:
    0 auto;

  display: flex;
  align-items: center;

  gap: 34px;
}

.tpx-brand {
  display: flex;
  align-items: center;

  gap: 11px;

  color: var(--x-white);
  text-decoration: none;

  white-space: nowrap;
}

.tpx-brand-mark {
  position: relative;

  width: 29px;
  height: 34px;

  display: block;

  transform:
    skew(-12deg);

  border-radius:
    4px;

  background:
    linear-gradient(
      145deg,
      #44d7ff 0%,
      #2087ff 60%,
      #174b93 100%
    );

  box-shadow:
    0 0 24px rgba(35, 151, 255, .18);
}

.tpx-brand-mark::after {
  content: "";

  position: absolute;

  width: 22px;
  height: 8px;

  left: 4px;
  top: 14px;

  background: #061421;

  transform: rotate(-40deg);

  border-radius: 4px;
}

.tpx-brand strong {
  font-size: 17px;
  letter-spacing: -.02em;
}

.tpx-navlinks {
  display: flex;
  align-items: center;

  gap: 30px;

  margin-left: 22px;
}

.tpx-navlinks a,
.tpx-navlinks button {
  appearance: none;

  border: 0;
  padding: 0;

  background: transparent;

  color: #c0cfdb;

  font: inherit;
  font-size: 13px;

  cursor: pointer;

  text-decoration: none;
}

.tpx-navlinks a:hover,
.tpx-navlinks button:hover {
  color: #fff;
}

.tpx-nav-spacer {
  flex: 1;
}

.tpx-plan-pill {
  min-height: 34px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 0 14px;

  border:
    1px solid rgba(29, 163, 220, .28);

  border-radius: 999px;

  color: #52bbe8;

  background:
    rgba(23, 129, 174, .07);

  font-size: 12px;
  font-weight: 750;
}

.tpx-user {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  color: #d7e2ea;

  font-size: 12px;
}

.tpx-avatar {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(88, 171, 227, .20);

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #17314a,
      #0b1724
    );

  color: #69caff;

  font-size: 11px;
  font-weight: 800;
}


/* ============================================================
   PUBLIC HOME — REMOVE OLD APP FRAME
   ============================================================ */

body.tpx-home-active .app-sidebar,
body.tpx-home-active .app-topbar {
  display: none !important;
}

body.tpx-home-active .app-layout {
  display: block !important;
}

body.tpx-home-active .app-main {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.tpx-home-active .app-content {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

body.tpx-home-active #view-home {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

body.tpx-home-active #publicHome {
  display: none !important;
}

.tpx-home-shell[hidden] {
  display: none !important;
}

.tpx-home-shell {
  min-height: 100vh;
}


/* ============================================================
   HOME HERO
   ============================================================ */

.tpx-hero {
  position: relative;

  width:
    min(
      1540px,
      calc(100vw - 70px)
    );

  min-height: 600px;

  margin:
    0 auto;

  padding:
    74px 0 48px;

  display: grid;

  grid-template-columns:
    minmax(430px, .88fr)
    minmax(630px, 1.18fr);

  gap:
    clamp(40px, 5vw, 88px);

  align-items: center;
}

.tpx-hero::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  left: -315px;
  bottom: -130px;

  border:
    1px solid rgba(58, 155, 219, .11);

  border-radius: 50%;

  box-shadow:
    0 0 0 40px rgba(46, 142, 201, .025),
    0 0 0 80px rgba(46, 142, 201, .018);
}

.tpx-kicker {
  color: #5acaff;

  font-size: 11px;
  font-weight: 780;

  letter-spacing: .16em;

  text-transform: uppercase;
}

.tpx-hero h1 {
  max-width: 650px;

  margin:
    16px 0 20px;

  color: #f8fbff;

  font-size:
    clamp(45px, 4vw, 67px);

  line-height: 1.02;

  letter-spacing: -.046em;

  font-weight: 730;
}

.tpx-hero h1 span {
  background:
    linear-gradient(
      90deg,
      #70e6ff,
      #4c9cff
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.tpx-hero-copy > p {
  max-width: 590px;

  margin: 0;

  color: #a0b1c1;

  font-size: 17px;
  line-height: 1.62;
}

.tpx-hero-actions {
  margin-top: 29px;

  display: flex;

  gap: 12px;
}

.tpx-button {
  min-height: 47px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  padding:
    0 21px;

  border:
    1px solid rgba(61, 180, 255, .31);

  border-radius: 9px;

  background:
    linear-gradient(
      180deg,
      #1d91e9,
      #116eb9
    );

  color: white;

  font-size: 13px;
  font-weight: 760;

  text-decoration: none;

  cursor: pointer;

  box-shadow:
    0 13px 34px rgba(17, 110, 181, .19);
}

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

  box-shadow:
    0 17px 40px rgba(19, 126, 203, .26);
}

.tpx-button-secondary {
  border-color:
    rgba(82, 158, 214, .28);

  background:
    #102237;

  color: #dce9f4;

  box-shadow:
    none;
}

.tpx-hero-trust {
  margin-top: 25px;

  display: flex;
  align-items: center;

  gap: 25px;

  color: #92a6b8;

  font-size: 11px;
}

.tpx-hero-trust span {
  display: flex;
  align-items: center;

  gap: 8px;
}

.tpx-trust-icon {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(75, 159, 215, .16);

  border-radius: 50%;

  color: #71cfff;

  background:
    rgba(13, 35, 55, .82);

  font-size: 13px;
}


/* ============================================================
   HERO TERMINAL
   ============================================================ */

.tpx-hero-visual {
  position: relative;

  min-width: 0;

  padding-right: 115px;
}

.tpx-terminal {
  position: relative;

  overflow: hidden;

  min-height: 455px;

  border:
    1px solid rgba(65, 166, 232, .28);

  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      #081726,
      #050e18
    );

  box-shadow:
    0 36px 100px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255,255,255,.025);

  transform:
    perspective(1100px)
    rotateY(-1.6deg);
}

.tpx-terminal-top {
  height: 45px;

  display: flex;
  align-items: center;

  padding:
    0 14px;

  gap: 8px;

  border-bottom:
    1px solid rgba(77, 149, 204, .14);

  background:
    rgba(8, 19, 31, .96);
}

.tpx-terminal-logo {
  font-size: 11px;
  font-weight: 800;

  color: #e7f4ff;

  margin-right: 12px;
}

.tpx-terminal-tab {
  min-height: 29px;

  display: inline-flex;
  align-items: center;

  padding:
    0 13px;

  border-radius: 6px;

  color: #8399ac;

  font-size: 10px;
}

.tpx-terminal-tab.is-active {
  color: #e6f5ff;

  background:
    rgba(42, 128, 198, .23);

  border:
    1px solid rgba(65, 164, 232, .18);
}

.tpx-chart-slot {
  min-height: 410px;
}

.tpx-chart-slot .tp-hero-demo {
  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: #06111c !important;

  box-shadow: none !important;
}

.tpx-chart-slot .tp-hero-demo-head {
  padding:
    12px 15px !important;

  border-bottom:
    1px solid rgba(65, 150, 209, .12) !important;

  background:
    #071522 !important;
}

.tpx-chart-slot .tp-demo-process {
  display: none !important;
}

.tpx-chart-slot .tp-demo-chart-shell,
.tpx-chart-slot .tp-demo-chart-wrap,
.tpx-chart-slot .tp-hero-chart-root {
  background: #06111c !important;
}

.tpx-chart-slot .tp-demo-status-pill {
  color: #44b3e2 !important;

  border-color:
    rgba(32, 166, 223, .25) !important;

  background:
    rgba(32, 166, 223, .065) !important;
}


/* ============================================================
   PHONE MOCK
   ============================================================ */

.tpx-phone {
  position: absolute;

  width: 230px;
  height: 445px;

  right: -19px;
  top: 64px;

  border:
    8px solid #172737;

  border-radius: 42px;

  background:
    linear-gradient(
      180deg,
      #09243d,
      #07111b 55%,
      #132840
    );

  box-shadow:
    0 34px 80px rgba(0,0,0,.48),
    inset 0 0 0 2px #2b4257;

  transform:
    rotate(4.3deg);

  overflow: hidden;
}

.tpx-phone::before {
  content: "";

  position: absolute;

  width: 82px;
  height: 22px;

  top: 7px;
  left: 50%;

  transform:
    translateX(-50%);

  border-radius:
    0 0 13px 13px;

  background:
    #03070c;
}

.tpx-phone-time {
  padding-top: 55px;

  color: #f2f7fb;

  text-align: center;

  font-size: 41px;
  font-weight: 300;

  letter-spacing: -.04em;
}

.tpx-phone-date {
  margin-top: 2px;

  color: #b8c6d4;

  text-align: center;

  font-size: 12px;
}

.tpx-phone-notification {
  position: absolute;

  width: 245px;

  left: -43px;
  top: 156px;

  padding: 15px;

  border:
    1px solid rgba(95, 164, 218, .21);

  border-radius: 18px;

  background:
    rgba(17, 32, 49, .96);

  box-shadow:
    0 18px 55px rgba(0,0,0,.38);

  transform:
    rotate(-3deg);
}

.tpx-notification-head {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 9px;

  color: #e8f3fb;

  font-size: 11px;
}

.tpx-notification-logo {
  width: 26px;
  height: 26px;

  display: grid;
  place-items: center;

  border-radius: 7px;

  background:
    linear-gradient(
      145deg,
      #32d4ff,
      #2479f1
    );

  color: #02111a;

  font-size: 9px;
  font-weight: 900;
}

.tpx-phone-notification strong {
  display: block;

  margin-bottom: 5px;

  color: white;

  font-size: 13px;
}

.tpx-phone-notification p {
  margin: 0;

  color: #bdcad5;

  font-size: 11px;
  line-height: 1.45;
}


/* ============================================================
   HOME LOWER SECTIONS
   ============================================================ */

.tpx-section {
  width:
    min(
      1540px,
      calc(100vw - 70px)
    );

  margin:
    0 auto;

  padding:
    58px 0;
}

.tpx-section-tight {
  padding-top: 15px;
}

.tpx-section-header {
  margin-bottom: 25px;
}

.tpx-section-header small {
  color: #66cbff;

  font-size: 10px;
  font-weight: 760;

  letter-spacing: .16em;

  text-transform: uppercase;
}

.tpx-section-header h2 {
  margin:
    8px 0 0;

  color: #f5f9fd;

  font-size: 30px;

  letter-spacing: -.025em;
}

.tpx-process {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;
}

.tpx-process-card,
.tpx-review-card,
.tpx-faq-card {
  border:
    1px solid var(--x-border);

  border-radius: 13px;

  background:
    linear-gradient(
      180deg,
      rgba(12, 28, 44, .96),
      rgba(7, 18, 29, .98)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018);
}

.tpx-process-card {
  position: relative;

  min-height: 132px;

  padding:
    24px 24px 21px 90px;
}

.tpx-process-number {
  position: absolute;

  width: 39px;
  height: 39px;

  left: 25px;
  top: 24px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(55, 181, 255, .27);

  border-radius: 50%;

  color: #57c9ff;

  background:
    rgba(28, 126, 189, .12);

  font-weight: 800;
}

.tpx-process-card h3 {
  margin:
    0 0 8px;

  color: #eaf4fb;

  font-size: 15px;
}

.tpx-process-card p {
  margin: 0;

  color: #8fa4b6;

  font-size: 12px;
  line-height: 1.55;
}

.tpx-trust-bar {
  margin-top: 20px;

  min-height: 54px;

  display: flex;
  align-items: center;

  padding:
    0 23px;

  border:
    1px solid rgba(68, 161, 221, .18);

  border-radius: 12px;

  background:
    rgba(9, 24, 38, .78);

  color: #9fb1c1;

  font-size: 11px;
}

.tpx-trust-bar strong {
  color: #e9f4fc;

  margin-right: 22px;

  font-size: 13px;
}

.tpx-trust-shield {
  margin-right: 11px;

  color: #2caae0;
}


/* Reviews */

.tpx-reviews-layout {
  display: grid;

  grid-template-columns:
    280px 1fr;

  gap: 34px;

  align-items: start;
}

.tpx-reviews-title small {
  color: #6b8296;

  font-size: 10px;
  letter-spacing: .16em;
}

.tpx-reviews-title h2 {
  margin:
    10px 0 0;

  color: #f1f7fb;

  font-size: 28px;

  line-height: 1.15;
}

.tpx-review-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 14px;
}

.tpx-review-card {
  min-height: 176px;

  padding: 18px;
}

.tpx-review-head {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 15px;
}

.tpx-review-avatar {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #26445e,
      #102235
    );

  color: #72cfff;

  font-size: 11px;
  font-weight: 800;
}

.tpx-review-person {
  min-width: 0;

  flex: 1;
}

.tpx-review-person strong {
  display: block;

  color: #eef7fd;

  font-size: 12px;
}

.tpx-review-person small {
  display: block;

  margin-top: 2px;

  color: #748a9c;

  font-size: 9px;
}

.tpx-demo-chip {
  display: inline-flex;

  padding:
    3px 6px;

  border:
    1px solid rgba(64, 178, 246, .20);

  border-radius: 999px;

  color: #65c9ff;

  background:
    rgba(34, 135, 200, .07);

  font-size: 7px;
  font-weight: 800;
}

.tpx-stars {
  margin-bottom: 10px;

  color: #ffc24c;

  font-size: 11px;

  letter-spacing: 2px;
}

.tpx-review-card p {
  margin: 0;

  color: #b3c1cc;

  font-size: 11px;
  line-height: 1.55;
}


/* FAQ */

.tpx-faq-layout {
  display: grid;

  grid-template-columns:
    300px 1fr;

  gap: 40px;
}

.tpx-faq-heading h2 {
  max-width: 270px;

  margin:
    10px 0 0;

  color: #f1f7fb;

  font-size: 29px;
  line-height: 1.15;
}

.tpx-faq-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;
}

.tpx-faq-card {
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    0 17px;

  color: #c8d4dd;

  font-size: 11px;
}

.tpx-faq-card span:last-child {
  color: #68caff;

  font-size: 18px;
}


/* ============================================================
   STRATEGY STUDIO
   ============================================================ */

body.studio-v07 {
  --studio-mint: #58c9ff !important;
  --studio-muted: #8ca0b4 !important;
  --studio-border: #1f3548 !important;

  --tp-accent: #46bfff !important;
  --tp-accent-soft: rgba(70, 191, 255, .11) !important;

  --tp-v03-green: #42bbff !important;
  --tp-v03-green-soft: rgba(66, 187, 255, .10) !important;
  --tp-v03-cyan: #44d8ff !important;
  --tp-v03-blue: #4b88ff !important;

  --tp-v03-panel: rgba(9, 23, 37, .96) !important;
  --tp-v03-panel-strong: rgba(8, 20, 33, .99) !important;

  --tp-v03-line: rgba(79, 162, 219, .15) !important;
}

body.studio-v07 .studio-rail,
body.studio-v07 .tp-studio-rail,
body.studio-v07 .tp-studio-mobile-toggle,
body.studio-v07 .tp-studio-mobile-nav,
body.studio-v07 .tp-custom-header {
  display: none !important;
}

body.studio-v07 .tp-custom-app {
  width: 100% !important;
}

body.studio-v07 .tp-custom-main {
  width:
    min(
      1570px,
      calc(100vw - 56px)
    ) !important;

  max-width: none !important;

  margin:
    0 auto !important;

  padding:
    26px 0 70px !important;
}


/* Studio head */

.tpx-studio-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 30px;

  margin:
    8px 0 19px;
}

.tpx-studio-head small {
  color: #62caff;

  font-size: 10px;
  font-weight: 780;

  letter-spacing: .15em;
}

.tpx-studio-head h1 {
  margin:
    8px 0 6px;

  color: #f7fbff;

  font-size:
    clamp(34px, 3vw, 48px);

  letter-spacing: -.038em;

  line-height: 1.04;
}

.tpx-studio-head p {
  margin: 0;

  color: #9aadc0;

  font-size: 15px;
}

.tpx-studio-head-actions {
  display: flex;
  align-items: center;

  gap: 10px;
}

.tpx-save-status {
  min-height: 48px;

  display: flex;
  align-items: center;

  gap: 10px;

  padding:
    0 17px;

  border:
    1px solid rgba(71, 156, 213, .14);

  border-radius: 11px;

  background:
    rgba(11, 27, 42, .76);
}

.tpx-save-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #2caae0;

  box-shadow:
    0 0 0 5px rgba(44,170,224,.06);
}

.tpx-save-status strong {
  display: block;

  color: #d9e7f1;

  font-size: 11px;
}

.tpx-save-status small {
  display: block;

  margin-top: 2px;

  color: #71879a;

  font-size: 9px;
}

.tpx-studio-button {
  min-height: 45px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    0 17px;

  border:
    1px solid rgba(61, 176, 244, .27);

  border-radius: 9px;

  background:
    rgba(13, 40, 63, .72);

  color: #bce5fb;

  font-size: 11px;
  font-weight: 750;

  cursor: pointer;
}

.tpx-studio-button:hover {
  border-color:
    rgba(69, 191, 255, .45);

  background:
    rgba(17, 61, 94, .82);
}

.tpx-studio-button.tpx-green {
  color: #030d12;

  border-color:
    rgba(45, 180, 238, .47);

  background:
    linear-gradient(
      180deg,
      #2aade5,
      #1693c8
    );
}

.tpx-studio-button[disabled] {
  opacity: .68;

  cursor: default;
}


/* Hide old heading but keep DOM/runtime */

body.studio-v07 .studio-page-heading {
  display: none !important;
}


/* Main context row becomes first editor panel */

body.studio-v07 .studio-basics {
  margin:
    0 0 12px !important;

  padding:
    17px !important;

  display:
    grid !important;

  grid-template-columns:
    1.3fr .8fr .65fr !important;

  gap: 12px !important;

  border:
    1px solid var(--x-border) !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      180deg,
      #0b1b2b,
      #091725
    ) !important;
}

body.studio-v07 .studio-basics::before {
  content: "1  ·  MERCADO Y TEMPORALIDAD";

  grid-column:
    1 / -1;

  margin-bottom: 2px;

  color: #61caff;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .13em;
}

body.studio-v07 .studio-basics-note {
  display: none !important;
}

body.studio-v07 input,
body.studio-v07 select,
body.studio-v07 textarea {
  color: #e7f2fb !important;

  border-color:
    rgba(78, 158, 215, .19) !important;

  background:
    #071421 !important;
}

body.studio-v07 input:focus,
body.studio-v07 select:focus,
body.studio-v07 textarea:focus {
  border-color:
    rgba(68, 188, 255, .55) !important;

  outline: none !important;

  box-shadow:
    0 0 0 3px rgba(51, 166, 239, .09) !important;
}


/* Builder toolbar */

body.studio-v07 .studio-builder-toolbar {
  margin:
    0 0 12px !important;

  min-height: 42px;
}

body.studio-v07 .studio-segmented {
  padding: 3px !important;

  border-color:
    rgba(75, 154, 210, .17) !important;

  background:
    #06121e !important;
}

body.studio-v07 .studio-segmented button {
  color: #8398aa !important;
}

body.studio-v07 .studio-segmented button.is-active {
  color: #dff4ff !important;

  border-color:
    rgba(67, 181, 247, .31) !important;

  background:
    rgba(33, 127, 193, .19) !important;
}

body.studio-v07 .studio-ai-button {
  color: #bde8ff !important;

  border-color:
    rgba(69, 175, 239, .27) !important;

  background:
    rgba(15, 58, 90, .50) !important;
}


/* Real three column studio */

body.studio-v07
.studio-columns.tpx-studio-grid {
  display: grid !important;

  grid-template-columns:
    minmax(440px, 1fr)
    285px
    minmax(550px, 1.14fr) !important;

  gap: 13px !important;

  align-items: start !important;

  width: 100% !important;
}

body.studio-v07 .studio-editor {
  min-width: 0;
}


/* left builder panels */

body.studio-v07 .studio-guide,
body.studio-v07 .studio-alert-config,
body.studio-v07 .studio-empty,
body.studio-v07 .studio-rule-card,
body.studio-v07 .studio-rule {
  border-color:
    rgba(76, 157, 214, .14) !important;

  background:
    linear-gradient(
      180deg,
      #0b1a29,
      #081522
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018) !important;
}

body.studio-v07 .studio-guide {
  border-radius: 12px !important;
}

body.studio-v07 .studio-guide-overline > span,
body.studio-v07 .studio-step-caption,
body.studio-v07 .studio-section-kicker,
body.studio-v07 .studio-eyebrow {
  color: #62caff !important;
}

body.studio-v07 .studio-stages {
  border-bottom-color:
    rgba(75, 152, 206, .16) !important;
}

body.studio-v07 .studio-stages button {
  color: #7790a4 !important;
}

body.studio-v07
.studio-stages
button[aria-current="step"] {
  color: #63cbff !important;

  border-bottom-color:
    #31aef6 !important;
}

body.studio-v07 .studio-stages button > span {
  border-color:
    rgba(69, 160, 219, .27) !important;

  background:
    #091a28 !important;
}

body.studio-v07
.studio-stages
button[aria-current="step"] > span {
  color: #e7f7ff !important;

  border-color:
    #3bbcff !important;

  background:
    #176d9f !important;
}

body.studio-v07 .studio-suggestions button {
  color: #d8e8f4 !important;

  border-color:
    rgba(75, 157, 214, .17) !important;

  background:
    #0a1a28 !important;
}

body.studio-v07 .studio-suggestions button:hover {
  border-color:
    rgba(64, 184, 255, .41) !important;

  background:
    #10283a !important;
}

body.studio-v07 .studio-suggestions small,
body.studio-v07 .studio-guide-question p,
body.studio-v07 .studio-guide-bottom > span {
  color: #8398aa !important;
}


/* ============================================================
   MIDDLE REVIEW
   ============================================================ */

body.studio-v07 .studio-summary {
  position: sticky !important;

  top: 81px !important;

  min-width: 0;

  padding:
    16px !important;

  border:
    1px solid rgba(75, 157, 214, .16) !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      180deg,
      #0c1b2a,
      #081522
    ) !important;

  box-shadow:
    var(--x-shadow) !important;
}

.tpx-review-preview {
  margin-bottom: 17px;

  padding-bottom: 15px;

  border-bottom:
    1px solid rgba(75, 151, 207, .13);
}

.tpx-review-preview h3 {
  margin:
    0 0 13px;

  color: #eff7fd;

  font-size: 14px;
}

.tpx-review-score-row {
  display: flex;
  align-items: center;

  gap: 13px;
}

.tpx-review-ring {
  width: 64px;
  height: 64px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    conic-gradient(
      #26a5dc 0deg 270deg,
      #173146 270deg 360deg
    );

  position: relative;
}

.tpx-review-ring::before {
  content: "";

  position: absolute;

  inset: 7px;

  border-radius: 50%;

  background:
    #0a1927;
}

.tpx-review-ring strong {
  position: relative;

  color: #f2f8fc;

  font-size: 16px;
}

.tpx-review-status strong {
  display: block;

  color: #2daae0;

  font-size: 12px;
}

.tpx-review-status span {
  display: block;

  margin-top: 4px;

  color: #8398aa;

  font-size: 9px;
  line-height: 1.45;
}

body.studio-v07 .studio-draft-badge {
  color: #68ceff !important;

  border-color:
    rgba(63, 184, 250, .24) !important;

  background:
    rgba(45, 150, 216, .07) !important;
}

body.studio-v07 .studio-summary-meta span {
  color: #a8bbc9 !important;

  border-color:
    rgba(75, 154, 210, .15) !important;

  background:
    #081622 !important;
}

body.studio-v07 .studio-summary-check,
body.studio-v07 .studio-summary-tip {
  border-color:
    rgba(75, 153, 209, .14) !important;

  background:
    #081724 !important;
}

body.studio-v07 .studio-check-icon {
  color: #54c9ff !important;
}


/* ============================================================
   RIGHT COLUMN
   ============================================================ */

.tpx-studio-right {
  min-width: 0;

  display: grid;

  gap: 13px;
}

body.studio-v07
#tpV07ChartDialog.tpx-inline,
body.studio-v07
#tpV07AiDialog.tpx-inline {
  position: static !important;

  inset: auto !important;

  transform: none !important;

  width: 100% !important;
  max-width: none !important;

  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border:
    1px solid rgba(70, 158, 220, .17) !important;

  border-radius:
    12px !important;

  color:
    var(--x-white) !important;

  background:
    linear-gradient(
      180deg,
      #081725,
      #06121d
    ) !important;

  box-shadow:
    var(--x-shadow) !important;
}

body.studio-v07
.tpx-inline::backdrop {
  display: none !important;
}

body.studio-v07
.tpx-inline
[data-v07-close] {
  display: none !important;
}

body.studio-v07
.tpx-inline
.studio-dialog-heading {
  padding:
    14px 16px !important;

  border-bottom:
    1px solid rgba(73, 151, 207, .13) !important;

  background:
    #0a1a29 !important;
}

body.studio-v07
#tpV07ChartDialog
#customWorkspace {
  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background:
    #06111b !important;
}

body.studio-v07
#tpV07AiDialog
#tpAiStrategyChat {
  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background:
    #081725 !important;
}

body.studio-v07 .tp-ai-studio {
  border-color:
    rgba(67, 154, 216, .14) !important;

  background:
    #081725 !important;
}


/* Buttons */

body.studio-v07 .studio-primary {
  color: #030d12 !important;

  border-color:
    rgba(51, 181, 237, .48) !important;

  background:
    linear-gradient(
      180deg,
      #2cade5,
      #1794c9
    ) !important;

  box-shadow:
    0 12px 30px rgba(19, 141, 193, .14) !important;
}

body.studio-v07 .studio-secondary,
body.studio-v07 .studio-text-button {
  color: #b8d9ed !important;

  border-color:
    rgba(71, 160, 220, .20) !important;

  background:
    rgba(11, 37, 58, .62) !important;
}


/* Review below editor */

body.studio-v07 .studio-review {
  margin-top: 18px !important;

  border-color:
    rgba(73, 156, 214, .15) !important;

  background:
    linear-gradient(
      180deg,
      #0a1927,
      #07131f
    ) !important;
}


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

@media (max-width: 1260px) {

  .tpx-hero {
    grid-template-columns:
      1fr !important;

    width:
      min(
        1000px,
        calc(100vw - 34px)
      );
  }

  .tpx-hero-visual {
    padding-right:
      100px;
  }

  .tpx-review-grid {
    grid-template-columns:
      1fr 1fr;
  }

  body.studio-v07
  .studio-columns.tpx-studio-grid {
    grid-template-columns:
      minmax(430px, 1fr)
      285px !important;
  }

  .tpx-studio-right {
    grid-column:
      1 / -1;

    grid-template-columns:
      1.15fr .85fr;
  }
}


@media (max-width: 900px) {

  .tpx-navlinks {
    display: none;
  }

  .tpx-plan-pill {
    display: none;
  }

  .tpx-topnav {
    padding:
      0 16px;
  }

  .tpx-hero {
    width:
      calc(100vw - 24px);

    min-height: auto;

    padding-top:
      40px;
  }

  .tpx-hero h1 {
    font-size:
      clamp(39px, 12vw, 57px);
  }

  .tpx-hero-visual {
    padding-right: 0;
  }

  .tpx-phone {
    display: none;
  }

  .tpx-process,
  .tpx-review-grid,
  .tpx-faq-grid {
    grid-template-columns:
      1fr;
  }

  .tpx-reviews-layout,
  .tpx-faq-layout {
    grid-template-columns:
      1fr;
  }

  .tpx-section {
    width:
      calc(100vw - 24px);
  }

  body.studio-v07 .tp-custom-main {
    width:
      calc(100vw - 24px) !important;
  }

  .tpx-studio-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .tpx-studio-head-actions {
    width: 100%;

    flex-wrap: wrap;
  }

  body.studio-v07
  .studio-columns.tpx-studio-grid {
    grid-template-columns:
      1fr !important;
  }

  body.studio-v07 .studio-summary {
    position: static !important;
  }

  .tpx-studio-right {
    display: none !important;
  }

  body.studio-v07
  #tpV07ChartDialog:not(.tpx-inline),
  body.studio-v07
  #tpV07AiDialog:not(.tpx-inline) {
    position:
      fixed !important;
  }

  body.studio-v07 .studio-basics {
    grid-template-columns:
      1fr !important;
  }
}


/* ============================================================
   TP_REFERENCE_UI_V2_R1

   Actual Strategy Studio v0.7 DOM:
   studio-shell -> studio-topbar -> studio-main
   ============================================================ */

body.tpx-studio-active {
  min-height:100vh;
}


/* Remove the v0.7 breadcrumb bar.
   The new reference navigation replaces it. */

body.tpx-studio-active .studio-topbar {
  display:none !important;
}


/* The old rail is also superseded by top navigation. */

body.tpx-studio-active .studio-rail {
  display:none !important;
}


/* Release space previously reserved for rail / topbar. */

body.tpx-studio-active .studio-shell {
  width:100% !important;
  max-width:none !important;

  min-height:100vh !important;

  margin:0 !important;
  margin-left:0 !important;

  padding:0 !important;

  background:transparent !important;
}


/* Actual v0.7 page container. */

body.tpx-studio-active .studio-main {
  width:
    min(
      1580px,
      calc(100vw - 56px)
    ) !important;

  max-width:none !important;

  margin:
    0 auto !important;

  padding:
    25px 0 80px !important;
}


/* New reference navigation should now be the first visual surface. */

body.tpx-studio-active .tpx-topnav {
  position:sticky !important;

  top:0 !important;

  z-index:200 !important;

  display:flex !important;

  width:100% !important;
}


/* Make Studio heading match reference density. */

body.tpx-studio-active .tpx-studio-head {
  margin:
    4px 0 18px !important;

  padding:
    0 2px !important;
}


/* Existing v0.7 heading stays in DOM for compatibility
   but disappears visually. */

body.tpx-studio-active .studio-page-heading {
  display:none !important;
}


/* Real reference layout:
   LEFT   = Builder
   MIDDLE = live review
   RIGHT  = chart + TP AI */

body.tpx-studio-active
.studio-columns.tpx-studio-grid {
  display:grid !important;

  grid-template-columns:
    minmax(455px, 1.03fr)
    minmax(255px, .48fr)
    minmax(555px, 1.15fr) !important;

  gap:13px !important;

  align-items:start !important;

  width:100% !important;

  max-width:none !important;
}


/* Do not let inherited v0.7 widths fight the grid. */

body.tpx-studio-active .studio-editor,
body.tpx-studio-active .studio-summary,
body.tpx-studio-active .tpx-studio-right {
  width:auto !important;

  max-width:none !important;

  min-width:0 !important;
}


/* Left editor receives the strategy context card first. */

body.tpx-studio-active
.studio-editor
> .studio-basics {
  margin:
    0 0 12px !important;
}


/* Compact mode bar immediately below market context. */

body.tpx-studio-active
.studio-editor
> .studio-builder-toolbar {
  margin:
    0 0 12px !important;

  padding:
    0 !important;
}


/* Builder visual density closer to approved image. */

body.tpx-studio-active .studio-guide {
  padding-bottom:
    2px;

  border-radius:
    11px !important;
}


body.tpx-studio-active .studio-guide-overline {
  padding:
    14px 17px 0 !important;
}


body.tpx-studio-active .studio-stages {
  margin:
    15px 17px 18px !important;
}


body.tpx-studio-active .studio-guide-question {
  padding:
    0 18px !important;
}


body.tpx-studio-active .studio-suggestions {
  margin:
    17px 17px 16px !important;
}


/* Middle review column */

body.tpx-studio-active .studio-summary {
  position:sticky !important;

  top:82px !important;

  padding:
    16px !important;

  border:
    1px solid rgba(74,157,216,.17) !important;

  border-radius:
    11px !important;

  background:
    linear-gradient(
      180deg,
      #0b1a29,
      #081522
    ) !important;
}


/* Right-hand workstation */

body.tpx-studio-active .tpx-studio-right {
  display:grid !important;

  gap:13px !important;
}


body.tpx-studio-active
#tpV07ChartDialog.tpx-inline,
body.tpx-studio-active
#tpV07AiDialog.tpx-inline {
  display:block !important;

  position:static !important;

  inset:auto !important;

  width:100% !important;
  max-width:none !important;

  margin:0 !important;

  transform:none !important;

  border-radius:
    11px !important;

  border:
    1px solid rgba(70,157,218,.18) !important;

  background:
    #071522 !important;
}


/* Keep chart tall enough to become the visual protagonist. */

body.tpx-studio-active
#tpV07ChartDialog.tpx-inline
.tp-chart-stage {
  min-height:
    410px !important;

  height:
    410px !important;
}


body.tpx-studio-active
#tpV07ChartDialog.tpx-inline
.tp-workspace {
  border:
    0 !important;

  border-radius:
    0 !important;
}


/* AI panel below chart */

body.tpx-studio-active
#tpV07AiDialog.tpx-inline
#tpAiStrategyChat {
  min-height:
    285px !important;

  background:
    #081725 !important;
}


/* Stronger blue interaction language */

body.tpx-studio-active .studio-segmented button.is-active,
body.tpx-studio-active
.studio-stages
button[aria-current="step"] {
  color:
    #72d0ff !important;
}


body.tpx-studio-active .studio-ai-button {
  color:
    #c7ecff !important;

  border-color:
    rgba(64,180,248,.29) !important;

  background:
    rgba(18,73,111,.45) !important;
}


/* Green is reserved for confirmation / primary completion. */

body.tpx-studio-active .studio-primary {
  color:
    #020d12 !important;

  background:
    linear-gradient(
      180deg,
      #2cade5,
      #1895ca
    ) !important;
}


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

@media (max-width:1350px) {

  body.tpx-studio-active
  .studio-columns.tpx-studio-grid {
    grid-template-columns:
      minmax(430px,1fr)
      minmax(260px,.55fr) !important;
  }


  body.tpx-studio-active
  .tpx-studio-right {
    grid-column:
      1 / -1 !important;

    grid-template-columns:
      1.2fr .8fr !important;
  }
}


@media (max-width:900px) {

  body.tpx-studio-active .studio-main {
    width:
      calc(100vw - 24px) !important;

    padding-top:
      18px !important;
  }


  body.tpx-studio-active
  .studio-columns.tpx-studio-grid {
    grid-template-columns:
      1fr !important;
  }


  body.tpx-studio-active .studio-summary {
    position:
      static !important;
  }


  body.tpx-studio-active
  .tpx-studio-right {
    display:none !important;
  }
}




/* ============================================================
   TP_REFERENCE_UI_V2_R2
   Home boot + closer reference proportions
   ============================================================ */


/* HOME: completely kill legacy application chrome */

body.tpx-home-active .app-sidebar,
body.tpx-home-active .sidebar,
body.tpx-home-active .app-topbar,
body.tpx-home-active .topbar,
body.tpx-home-active > .mobile-bottom-nav {
  display:none !important;
}


body.tpx-home-active .app-main,
body.tpx-home-active main.app-main {
  margin:0 !important;

  width:100% !important;

  max-width:none !important;
}


body.tpx-home-active .app-content {
  padding:0 !important;

  width:100% !important;

  max-width:none !important;
}


/* Reference topbar belongs above everything */

body.tpx-home-active .tpx-topnav {
  position:sticky;

  top:0;

  z-index:250;
}


/* Hero closer to generated reference image */

/*
   R3 HOME POLISH
   Reference target:
   compact hero / wide workstation / smaller phone /
   first product explanation visible much earlier.
*/

body.tpx-home-active .tpx-hero {
  min-height: 410px;

  padding-top: 24px;
  padding-bottom: 18px;

  grid-template-columns:
    minmax(420px, .80fr)
    minmax(650px, 1.20fr);

  gap:
    clamp(
      42px,
      4vw,
      64px
    );

  align-items: start;
}


body.tpx-home-active .tpx-hero-copy {
  padding-left:
    clamp(
      8px,
      1.5vw,
      24px
    );

  padding-top: 17px;
}


body.tpx-home-active .tpx-hero h1 {
  max-width: 570px;

  margin-top: 12px;
  margin-bottom: 16px;

  font-size:
    clamp(
      44px,
      3.35vw,
      56px
    );

  line-height: .99;
}


body.tpx-home-active .tpx-hero-copy > p {
  max-width: 550px;

  font-size: 15px;

  line-height: 1.55;
}


body.tpx-home-active .tpx-hero-actions {
  margin-top: 20px;
}


body.tpx-home-active .tpx-hero-trust {
  margin-top: 17px;

  gap: 19px;
}


body.tpx-home-active .tpx-hero-visual {
  padding-right: 100px;

  align-self: start;
}


body.tpx-home-active .tpx-terminal {
  min-height: 360px;

  border-color:
    rgba(64,173,240,.31);

  border-radius: 16px;

  box-shadow:
    0 30px 90px rgba(0,0,0,.50),
    0 0 78px rgba(17,103,165,.055);
}


body.tpx-home-active .tpx-chart-slot {
  min-height: 315px;
}


body.tpx-home-active
.tpx-chart-slot
.tp-demo-chart-shell,

body.tpx-home-active
.tpx-chart-slot
.tp-demo-chart-wrap,

body.tpx-home-active
.tpx-chart-slot
.tp-hero-chart-root {
  min-height: 270px !important;

  height: 270px !important;
}


body.tpx-home-active .tpx-phone {
  right: -7px;

  top: 38px;

  width: 205px;

  height: 375px;

  border-width: 7px;

  border-radius: 37px;
}


body.tpx-home-active .tpx-phone-time {
  font-size: 35px;
}


body.tpx-home-active .tpx-phone-notification {
  width: 218px;

  left: -37px;

  top: 132px;

  padding: 13px;

  border-radius: 15px;
}


/* Bring the product explanation much closer to the hero. */

body.tpx-home-active .tpx-section {
  padding-top: 31px;

  padding-bottom: 31px;
}


body.tpx-home-active .tpx-section-tight {
  padding-top: 9px;
}


body.tpx-home-active .tpx-process {
  gap: 14px;
}


body.tpx-home-active .tpx-process-card {
  min-height: 112px;
}


body.tpx-home-active .tpx-trust-bar {
  margin-top: 14px;

  min-height: 50px;
}


body.tpx-home-active .tpx-reviews-layout {
  gap: 26px;
}


body.tpx-home-active .tpx-review-grid {
  gap: 12px;
}


body.tpx-home-active .tpx-review-card {
  min-height: 150px;

  padding: 16px;
}


body.tpx-home-active .tpx-faq-layout {
  gap: 28px;
}

/* Darker overall. Absolutely no green wash. */

body.tpx-home-active {
  background:
    radial-gradient(
      circle at 70% 10%,
      rgba(14,83,143,.15),
      transparent 29%
    ),
    linear-gradient(
      180deg,
      #040d17 0%,
      #030811 52%,
      #02060b 100%
    ) !important;
}


/* Studio: more breathing room below top navigation */

body.tpx-studio-active .studio-main {
  padding-top:
    31px !important;
}


body.tpx-studio-active .tpx-studio-head {
  margin-bottom:
    22px !important;
}


body.tpx-studio-active .tpx-studio-head h1 {
  max-width:
    820px;

  font-size:
    clamp(
      38px,
      3.15vw,
      53px
    );
}


/* Slightly more compact context row */

body.tpx-studio-active .studio-basics {
  padding:
    14px 16px !important;
}


/* Middle column more like the approved narrow review panel */

body.tpx-studio-active .studio-summary {
  padding:
    15px !important;
}


body.tpx-studio-active .tpx-review-ring {
  width:
    60px;

  height:
    60px;
}


/* Chart gains visual dominance */

body.tpx-studio-active
#tpV07ChartDialog.tpx-inline {
  box-shadow:
    0 24px 75px rgba(0,0,0,.34),
    0 0 0 1px rgba(47,156,227,.025) inset !important;
}


body.tpx-studio-active
#tpV07ChartDialog.tpx-inline
.tp-chart-stage {
  height:
    440px !important;

  min-height:
    440px !important;
}


/* Keep cyan/blue as interaction; green only confirmation */

body.tpx-studio-active
.studio-suggestions button:hover,
body.tpx-studio-active
.studio-text-button:hover {
  border-color:
    rgba(63,184,251,.42) !important;

  background:
    rgba(17,55,82,.72) !important;
}


/* Smaller screens */

@media (max-width:1260px) {

  body.tpx-home-active .tpx-hero {
    min-height:
      auto;
  }


  body.tpx-home-active .tpx-hero-visual {
    padding-right:
      110px;
  }
}


@media (max-width:900px) {

  body.tpx-home-active .tpx-hero {
    padding-top:
      34px;
  }


  body.tpx-home-active .tpx-hero-visual {
    padding-right:
      0;
  }
}

/* TP_REFERENCE_HOME_R31_CHART_START */

/* ============================================================
   TP REFERENCE HOME R3.1
   Self-contained demonstration trading workstation
   Home only - no market/runtime dependency
   ============================================================ */

body.tpx-home-active .tpx-chart-slot {
  position: relative;

  min-height: 315px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #06111c 0%,
      #050d16 100%
    );
}


body.tpx-home-active .tpx-r31-market-chart {
  position: relative;

  width: 100%;
  height: 315px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  color: #c7d7e5;

  background:
    linear-gradient(
      180deg,
      rgba(7,20,33,.98),
      rgba(4,13,22,.99)
    );

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


body.tpx-home-active .tpx-r31-chart-head {
  position: relative;

  z-index: 3;

  height: 45px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  flex: 0 0 45px;

  padding: 0 14px;

  border-bottom:
    1px solid rgba(61,148,207,.12);

  background:
    rgba(5,15,25,.94);
}


body.tpx-home-active .tpx-r31-chart-symbol {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;
}


body.tpx-home-active .tpx-r31-chart-symbol strong {
  color: #f2f8fc;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .015em;
}


body.tpx-home-active .tpx-r31-chart-symbol span {
  color: #71889b;

  font-size: 9px;
  font-weight: 700;
}


body.tpx-home-active .tpx-r31-chart-price {
  color: #2eabe0 !important;

  font-variant-numeric: tabular-nums;
}


body.tpx-home-active .tpx-r31-chart-meta {
  display: flex;
  align-items: center;

  gap: 8px;

  white-space: nowrap;
}


body.tpx-home-active .tpx-r31-live-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #189ed7;

  box-shadow:
    0 0 0 4px rgba(24,158,215,.08),
    0 0 13px rgba(24,158,215,.42);
}


body.tpx-home-active .tpx-r31-demo-pill {
  min-height: 20px;

  display: inline-flex;
  align-items: center;

  padding: 0 8px;

  border:
    1px solid rgba(57,168,238,.21);

  border-radius: 999px;

  color: #7ecfff;

  background:
    rgba(12,47,72,.52);

  font-size: 8px;
  font-weight: 850;

  letter-spacing: .09em;
}


body.tpx-home-active .tpx-r31-chart-stage {
  position: relative;

  flex: 1 1 auto;

  min-height: 0;

  overflow: hidden;
}


body.tpx-home-active .tpx-r31-chart-stage svg {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;
}


body.tpx-home-active .tpx-r31-grid-line {
  stroke: rgba(98,135,163,.11);

  stroke-width: 1;

  vector-effect:
    non-scaling-stroke;
}


body.tpx-home-active .tpx-r31-price-text,
body.tpx-home-active .tpx-r31-time-text {
  fill: #677f93;

  font-size: 9px;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;
}


body.tpx-home-active .tpx-r31-candle-up {
  fill: #169cd6;

  stroke: #21aae5;
}


body.tpx-home-active .tpx-r31-candle-down {
  fill: #e75262;

  stroke: #ff6475;
}


body.tpx-home-active .tpx-r31-wick-up {
  stroke: #24aae4;
}


body.tpx-home-active .tpx-r31-wick-down {
  stroke: #ff6172;
}


body.tpx-home-active .tpx-r31-wick-up,
body.tpx-home-active .tpx-r31-wick-down {
  stroke-width: 1;

  vector-effect:
    non-scaling-stroke;
}


body.tpx-home-active .tpx-r31-ema-fast {
  fill: none;

  stroke: #258eff;

  stroke-width: 1.7;

  opacity: .92;

  vector-effect:
    non-scaling-stroke;
}


body.tpx-home-active .tpx-r31-ema-slow {
  fill: none;

  stroke: #23b6d9;

  stroke-width: 1.4;

  opacity: .72;

  vector-effect:
    non-scaling-stroke;
}


body.tpx-home-active .tpx-r31-volume-up {
  fill: rgba(18,143,196,.38);
}


body.tpx-home-active .tpx-r31-volume-down {
  fill: rgba(210,68,85,.34);
}


body.tpx-home-active .tpx-r31-last-price-line {
  stroke: rgba(29,162,219,.50);

  stroke-width: 1;

  stroke-dasharray: 4 4;

  vector-effect:
    non-scaling-stroke;
}


body.tpx-home-active .tpx-r31-last-price-box {
  fill: #1696cd;
}


body.tpx-home-active .tpx-r31-last-price-label {
  fill: #030d11;

  font-size: 9px;
  font-weight: 900;
}


body.tpx-home-active .tpx-r31-zone {
  fill: rgba(41,145,234,.075);

  stroke: rgba(55,167,244,.27);

  stroke-width: 1;

  stroke-dasharray: 5 4;

  vector-effect:
    non-scaling-stroke;
}


body.tpx-home-active .tpx-r31-setup-marker {
  fill: #0d2434;

  stroke: rgba(30,164,222,.58);

  stroke-width: 1;

  vector-effect:
    non-scaling-stroke;
}


body.tpx-home-active .tpx-r31-setup-dot {
  fill: #1da5e0;

  filter:
    drop-shadow(
      0 0 5px rgba(29,165,224,.65)
    );
}


body.tpx-home-active .tpx-r31-setup-title {
  fill: #dcf4ff;

  font-size: 9px;
  font-weight: 800;
}


body.tpx-home-active .tpx-r31-setup-sub {
  fill: #779aa9;

  font-size: 7px;
}


body.tpx-home-active .tpx-r31-chart-legend {
  position: absolute;

  z-index: 4;

  top: 9px;
  left: 13px;

  display: flex;
  flex-direction: column;

  gap: 4px;

  pointer-events: none;
}


body.tpx-home-active .tpx-r31-chart-legend span {
  display: flex;
  align-items: center;

  gap: 6px;

  color: #6f899e;

  font-size: 8px;
  font-weight: 680;
}


body.tpx-home-active .tpx-r31-chart-legend i {
  width: 6px;
  height: 6px;

  display: inline-block;

  border-radius: 50%;
}


body.tpx-home-active
.tpx-r31-chart-legend
.tpx-r31-fast-dot {
  background: #258eff;
}


body.tpx-home-active
.tpx-r31-chart-legend
.tpx-r31-slow-dot {
  background: #23b6d9;
}


/*
   R3.1 final proportion calibration:
   keep the graph wide and let the phone overlap only its right edge.
*/

body.tpx-home-active .tpx-hero-visual {
  padding-right: 90px;
}


body.tpx-home-active .tpx-terminal {
  min-height: 360px;
}


body.tpx-home-active .tpx-phone {
  z-index: 8;
}


@media (max-width: 1260px) {

  body.tpx-home-active .tpx-hero-visual {
    padding-right: 72px;
  }

  body.tpx-home-active .tpx-phone {
    right: -12px;
  }
}


@media (max-width: 900px) {

  body.tpx-home-active .tpx-r31-market-chart {
    height: 300px;
  }

  body.tpx-home-active .tpx-chart-slot {
    min-height: 300px;
  }

  body.tpx-home-active .tpx-hero-visual {
    padding-right: 0;
  }
}

/* TP_REFERENCE_HOME_R31_CHART_END */

/* TP_REFERENCE_UI_R32_START */

/* ============================================================
   TP REFERENCE UI R3.2
   HOME FINAL GEOMETRY + STUDIO DENSITY PASS

   Desktop target:
   generated TP Context reference screenshots.

   No runtime changes.
   ============================================================ */


/* ============================================================
   HOME — FINAL REFERENCE CALIBRATION
   ============================================================ */

body.tpx-home-active .tpx-hero {
  align-items: start;
}


/*
   The phone notification intentionally breaks outside the
   physical phone. It must NOT be clipped by the phone frame.
*/

body.tpx-home-active .tpx-phone {
  overflow: visible !important;

  z-index: 12;
}


body.tpx-home-active .tpx-phone-notification {
  width: 226px;

  left: -55px;

  top: 128px;

  z-index: 20;

  padding: 13px 14px;

  border-radius: 15px;

  box-shadow:
    0 19px 48px rgba(0,0,0,.48),
    0 0 0 1px rgba(86,164,218,.035) inset;
}


body.tpx-home-active .tpx-phone-notification strong {
  display: block;

  margin-top: 7px;

  white-space: normal;
}


body.tpx-home-active .tpx-phone-notification p {
  white-space: normal;

  overflow: visible;

  text-overflow: clip;
}


/*
   Terminal should behave like the visual protagonist,
   while still leaving the phone enough overlap room.
*/

body.tpx-home-active .tpx-hero-visual {
  padding-right: 86px;
}


body.tpx-home-active .tpx-terminal {
  border-radius: 15px;

  box-shadow:
    0 28px 82px rgba(0,0,0,.48),
    0 0 70px rgba(14,100,165,.05);
}


body.tpx-home-active .tpx-r31-market-chart {
  border-radius: 0 0 14px 14px;
}


/*
   Slightly tighten the transition from hero to process.
*/

body.tpx-home-active .tpx-section-tight {
  padding-top: 6px;
}


body.tpx-home-active .tpx-process-card {
  padding-top: 19px;

  padding-bottom: 17px;
}


body.tpx-home-active .tpx-trust-bar {
  margin-top: 12px;
}


/* ============================================================
   STUDIO — TURN THE PAGE INTO A TRADING WORKSTATION
   ============================================================ */

@media (min-width: 1351px) {

  /*
     Maximise useful desktop area.
  */

  body.tpx-studio-active .studio-main {
    width:
      min(
        1600px,
        calc(100vw - 44px)
      ) !important;

    max-width: none !important;

    margin:
      0 auto !important;

    padding:
      17px 0 30px !important;
  }


  /*
     Reference heading is deliberately compact.
     Studio should begin almost immediately under navigation.
  */

  body.tpx-studio-active .tpx-studio-head {
    display: grid !important;

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

    align-items: end;

    column-gap: 24px;

    margin:
      0 0 12px !important;

    padding:
      0 2px !important;
  }


  body.tpx-studio-active .tpx-studio-head small {
    display: block;

    margin-bottom: 5px;

    font-size: 9px;

    letter-spacing: .14em;
  }


  body.tpx-studio-active .tpx-studio-head h1 {
    max-width: none;

    margin:
      0 0 4px;

    font-size:
      34px;

    line-height:
      1.01;

    letter-spacing:
      -.035em;
  }


  body.tpx-studio-active .tpx-studio-head p {
    max-width: 760px;

    margin: 0;

    font-size:
      13px;

    line-height:
      1.42;
  }


  body.tpx-studio-active .tpx-studio-head-actions {
    align-self: end;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    flex-wrap: nowrap;

    margin-bottom: 1px;
  }


  body.tpx-studio-active
  .tpx-studio-head-actions > * {
    min-height:
      39px !important;
  }


  body.tpx-studio-active .tpx-studio-button {
    min-height:
      39px !important;

    padding:
      0 14px !important;

    border-radius:
      8px !important;

    font-size:
      11px !important;
  }


  /*
     Main workstation geometry.

     LEFT   = real Builder
     CENTER = strategy review
     RIGHT  = chart + TP AI
  */

  body.tpx-studio-active
  .studio-columns.tpx-studio-grid {

    grid-template-columns:
      minmax(520px, 1.08fr)
      minmax(248px, .46fr)
      minmax(610px, 1.28fr)
      !important;

    gap:
      12px !important;

    align-items:
      start !important;

    width:
      100% !important;
  }


  body.tpx-studio-active .studio-editor {
    min-width:
      0;

    row-gap:
      9px !important;
  }


  /*
     Builder context.
  */

  body.tpx-studio-active .studio-basics {
    padding:
      11px 13px !important;

    border-radius:
      11px !important;
  }


  body.tpx-studio-active .studio-basics-note {
    margin-top:
      5px !important;

    font-size:
      9px !important;
  }


  body.tpx-studio-active
  .studio-basics input,

  body.tpx-studio-active
  .studio-basics select,

  body.tpx-studio-active
  .studio-basics button {
    min-height:
      37px !important;
  }


  /*
     Guide / free mode toolbar.
  */

  body.tpx-studio-active .studio-builder-toolbar {
    min-height:
      36px !important;

    margin:
      7px 0 !important;
  }


  body.tpx-studio-active .studio-segmented {
    min-height:
      34px !important;
  }


  body.tpx-studio-active
  .studio-segmented button {
    min-height:
      32px !important;

    padding:
      0 12px !important;

    font-size:
      10px !important;
  }


  body.tpx-studio-active .studio-ai-button {
    min-height:
      34px !important;

    padding:
      0 12px !important;

    font-size:
      10px !important;
  }


  /*
     Real builder panel.
  */

  body.tpx-studio-active .studio-guide {
    padding:
      12px 14px !important;

    border-radius:
      11px !important;
  }


  body.tpx-studio-active
  .studio-guide-overline {
    margin-bottom:
      7px !important;

    font-size:
      8px !important;
  }


  body.tpx-studio-active .studio-stages {
    gap:
      4px !important;

    margin:
      5px 0 9px !important;
  }


  body.tpx-studio-active
  .studio-stages button {
    min-height:
      29px !important;

    padding:
      0 7px !important;

    font-size:
      9px !important;
  }


  body.tpx-studio-active
  .studio-guide-question {
    margin:
      8px 0 !important;

    padding:
      9px 0 !important;
  }


  body.tpx-studio-active
  .studio-guide-question h2,

  body.tpx-studio-active
  .studio-guide-question h3 {
    margin:
      0 0 5px !important;

    font-size:
      18px !important;

    line-height:
      1.12 !important;
  }


  body.tpx-studio-active
  .studio-guide-question p {
    margin:
      0 !important;

    font-size:
      10px !important;

    line-height:
      1.45 !important;
  }


  body.tpx-studio-active
  .studio-suggestions {
    gap:
      6px !important;

    margin-top:
      8px !important;
  }


  body.tpx-studio-active
  .studio-suggestions button {
    min-height:
      33px !important;

    padding:
      6px 9px !important;

    border-radius:
      7px !important;

    font-size:
      9px !important;
  }


  /*
     CENTER REVIEW
     Keep narrow, sticky, information-dense.
  */

  body.tpx-studio-active .studio-summary {
    position:
      sticky !important;

    top:
      79px !important;

    padding:
      12px !important;

    border-radius:
      11px !important;
  }


  body.tpx-studio-active
  .studio-summary h2,

  body.tpx-studio-active
  .studio-summary h3 {
    font-size:
      15px !important;

    line-height:
      1.15 !important;
  }


  body.tpx-studio-active
  .tpx-review-preview {
    margin-bottom:
      10px !important;
  }


  body.tpx-studio-active
  .tpx-review-preview h3 {
    font-size:
      13px !important;
  }


  body.tpx-studio-active
  .tpx-review-ring {
    width:
      54px !important;

    height:
      54px !important;
  }


  body.tpx-studio-active
  .tpx-review-ring strong {
    font-size:
      15px !important;
  }


  body.tpx-studio-active
  .tpx-review-status strong {
    font-size:
      11px !important;
  }


  body.tpx-studio-active
  .tpx-review-status span {
    font-size:
      8px !important;

    line-height:
      1.35 !important;
  }


  body.tpx-studio-active
  .studio-summary-meta {
    gap:
      5px !important;
  }


  body.tpx-studio-active
  .studio-summary-meta span {
    min-height:
      24px !important;

    font-size:
      8px !important;
  }


  body.tpx-studio-active
  .studio-summary-tip {
    padding:
      9px 0 !important;

    font-size:
      9px !important;

    line-height:
      1.4 !important;
  }


  /*
     RIGHT WORKSTATION
  */

  body.tpx-studio-active
  .tpx-studio-right {
    min-width:
      0;

    gap:
      10px !important;
  }


  /*
     The huge explanatory title over the chart is useful
     functionally but visually redundant on desktop.
     Keep it in DOM; hide only its presentation.
  */

  body.tpx-studio-active
  #tpV07ChartDialog.tpx-inline
  .studio-dialog-heading {
    display:
      none !important;
  }


  body.tpx-studio-active
  #tpV07ChartDialog.tpx-inline {
    overflow:
      hidden;

    border-radius:
      11px !important;

    box-shadow:
      0 21px 60px rgba(0,0,0,.34),
      0 0 0 1px rgba(46,151,220,.025) inset
      !important;
  }


  /*
     Chart now becomes the dominant surface immediately.
  */

  body.tpx-studio-active
  #tpV07ChartDialog.tpx-inline
  .tp-chart-stage {

    height:
      395px !important;

    min-height:
      395px !important;
  }


  body.tpx-studio-active
  #tpV07ChartDialog.tpx-inline
  .tp-workspace {

    border-radius:
      10px !important;
  }


  /*
     TP AI below chart: still fully functional,
     but visually behaves like a workstation panel rather
     than another landing-page section.
  */

  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline {

    margin-top:
      0 !important;

    border-radius:
      11px !important;

    overflow:
      hidden;
  }


  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline
  .studio-dialog-heading {

    padding:
      11px 14px 7px !important;
  }


  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline
  .studio-dialog-heading h2 {

    margin:
      0 0 3px !important;

    font-size:
      17px !important;

    line-height:
      1.1 !important;
  }


  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline
  .studio-dialog-heading p {

    margin:
      0 !important;

    font-size:
      9px !important;

    line-height:
      1.4 !important;
  }


  body.tpx-studio-active
  .tp-ai-studio {

    padding:
      11px 13px !important;
  }


  body.tpx-studio-active
  .tp-ai-studio textarea {

    min-height:
      92px !important;

    max-height:
      120px !important;

    padding:
      11px !important;

    font-size:
      11px !important;

    line-height:
      1.45 !important;
  }


  body.tpx-studio-active
  #tpAiStrategyChat {

    min-height:
      245px !important;
  }


  /*
     General Studio controls become denser.
  */

  body.tpx-studio-active input,
  body.tpx-studio-active select,
  body.tpx-studio-active textarea,
  body.tpx-studio-active button {

    border-radius:
      7px;
  }
}


/* ============================================================
   MID DESKTOP
   Prevent the three-column workstation from becoming cramped.
   ============================================================ */

@media (min-width: 1261px) and (max-width: 1500px) {

  body.tpx-studio-active
  .studio-columns.tpx-studio-grid {

    grid-template-columns:
      minmax(480px, 1fr)
      minmax(230px, .45fr)
      minmax(535px, 1.16fr)
      !important;
  }


  body.tpx-studio-active
  .tpx-studio-head h1 {

    font-size:
      31px;
  }
}


/* ============================================================
   HOME MID WIDTH
   ============================================================ */

@media (max-width: 1260px) {

  body.tpx-home-active .tpx-phone-notification {
    left:
      -45px;

    width:
      218px;
  }
}


/* TP_REFERENCE_UI_R32_END */

/* TP_REFERENCE_STUDIO_R33_START */

/* ============================================================
   TP REFERENCE STUDIO R3.3
   Dense professional workstation pass.

   Important:
   presentation only.
   No Builder/runtime semantics changed.
   ============================================================ */


/* ------------------------------------------------------------
   Desktop shell
   ------------------------------------------------------------ */

@media (min-width: 1351px) {

  body.tpx-studio-active {
    background:
      radial-gradient(
        circle at 72% 8%,
        rgba(15,75,123,.085),
        transparent 31%
      ),
      linear-gradient(
        180deg,
        #04101b 0%,
        #030a12 58%,
        #02070c 100%
      ) !important;
  }


  body.tpx-studio-active .studio-main {
    width:
      min(
        1620px,
        calc(100vw - 30px)
      ) !important;

    padding:
      12px 0 24px !important;
  }


  /* ----------------------------------------------------------
     Header
     ---------------------------------------------------------- */

  body.tpx-studio-active .tpx-studio-head {
    grid-template-columns:
      minmax(0, 1fr)
      auto !important;

    align-items:
      end !important;

    gap:
      18px !important;

    margin:
      0 0 10px !important;
  }


  body.tpx-studio-active .tpx-studio-head small {
    margin-bottom:
      3px !important;

    font-size:
      8px !important;

    letter-spacing:
      .15em !important;
  }


  body.tpx-studio-active .tpx-studio-head h1 {
    margin:
      0 0 3px !important;

    font-size:
      30px !important;

    line-height:
      1 !important;

    letter-spacing:
      -.038em !important;
  }


  body.tpx-studio-active .tpx-studio-head p {
    max-width:
      760px !important;

    font-size:
      11px !important;

    line-height:
      1.35 !important;
  }


  body.tpx-studio-active
  .tpx-studio-head-actions {
    gap:
      7px !important;

    margin:
      0 !important;
  }


  body.tpx-studio-active
  .tpx-studio-head-actions > * {
    min-height:
      36px !important;
  }


  body.tpx-studio-active
  .tpx-studio-button {
    min-height:
      36px !important;

    padding:
      0 12px !important;

    border-radius:
      8px !important;

    font-size:
      10px !important;
  }


  /* ----------------------------------------------------------
     Three-column workstation
     ---------------------------------------------------------- */

  body.tpx-studio-active
  .studio-columns.tpx-studio-grid {

    grid-template-columns:
      minmax(540px, 1.05fr)
      minmax(245px, .45fr)
      minmax(625px, 1.20fr)
      !important;

    gap:
      11px !important;

    align-items:
      start !important;
  }


  body.tpx-studio-active .studio-editor,
  body.tpx-studio-active .studio-summary,
  body.tpx-studio-active .tpx-studio-right {
    min-width:
      0 !important;
  }


  /* ----------------------------------------------------------
     LEFT — Builder context
     ---------------------------------------------------------- */

  body.tpx-studio-active .studio-editor {
    gap:
      7px !important;
  }


  body.tpx-studio-active
  .studio-editor > .studio-basics {

    margin:
      0 !important;

    padding:
      9px 11px !important;

    border-radius:
      10px !important;
  }


  body.tpx-studio-active
  .studio-basics {

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.018) !important;
  }


  body.tpx-studio-active
  .studio-basics label {

    font-size:
      8px !important;

    line-height:
      1.2 !important;
  }


  body.tpx-studio-active
  .studio-basics input,

  body.tpx-studio-active
  .studio-basics select {

    min-height:
      34px !important;

    height:
      34px !important;

    padding-top:
      0 !important;

    padding-bottom:
      0 !important;

    font-size:
      10px !important;
  }


  body.tpx-studio-active
  .studio-basics-note {
    display:
      none !important;
  }


  /* ----------------------------------------------------------
     Builder mode bar
     ---------------------------------------------------------- */

  body.tpx-studio-active
  .studio-editor > .studio-builder-toolbar {

    min-height:
      33px !important;

    margin:
      5px 0 !important;

    padding:
      0 !important;
  }


  body.tpx-studio-active .studio-segmented {
    min-height:
      32px !important;

    padding:
      2px !important;
  }


  body.tpx-studio-active
  .studio-segmented button {

    min-height:
      28px !important;

    padding:
      0 10px !important;

    font-size:
      9px !important;
  }


  body.tpx-studio-active
  .studio-ai-button {

    min-height:
      32px !important;

    padding:
      0 10px !important;

    font-size:
      9px !important;
  }


  /* ----------------------------------------------------------
     Guided Builder panel
     ---------------------------------------------------------- */

  body.tpx-studio-active .studio-guide {
    padding:
      10px 12px 11px !important;

    border-radius:
      10px !important;
  }


  body.tpx-studio-active
  .studio-guide-overline {

    margin:
      0 0 5px !important;

    font-size:
      7px !important;
  }


  body.tpx-studio-active
  .studio-guide-bottom {

    margin-top:
      8px !important;

    padding-top:
      8px !important;
  }


  /* Stage navigation becomes a terminal-like strip. */

  body.tpx-studio-active .studio-stages {
    gap:
      2px !important;

    margin:
      4px 0 7px !important;

    padding:
      0 !important;
  }


  body.tpx-studio-active
  .studio-stages button {

    min-height:
      27px !important;

    padding:
      0 5px !important;

    border-radius:
      5px !important;

    font-size:
      8px !important;
  }


  body.tpx-studio-active
  .studio-stages button > span {

    width:
      17px !important;

    height:
      17px !important;

    min-width:
      17px !important;

    font-size:
      8px !important;
  }


  /* Current question */

  body.tpx-studio-active
  .studio-guide-question {

    margin:
      5px 0 7px !important;

    padding:
      7px 0 !important;
  }


  body.tpx-studio-active
  .studio-guide-question h1,

  body.tpx-studio-active
  .studio-guide-question h2,

  body.tpx-studio-active
  .studio-guide-question h3 {

    margin:
      0 0 3px !important;

    font-size:
      17px !important;

    line-height:
      1.08 !important;
  }


  body.tpx-studio-active
  .studio-guide-question p {

    margin:
      0 !important;

    font-size:
      9px !important;

    line-height:
      1.35 !important;
  }


  /* Suggestion cards */

  body.tpx-studio-active
  .studio-suggestions {

    display:
      grid !important;

    grid-template-columns:
      repeat(3, minmax(0,1fr)) !important;

    gap:
      5px !important;

    margin:
      6px 0 0 !important;
  }


  body.tpx-studio-active
  .studio-suggestions button {

    min-height:
      43px !important;

    height:
      auto !important;

    padding:
      6px 8px !important;

    border-radius:
      7px !important;

    font-size:
      8px !important;

    line-height:
      1.25 !important;
  }


  body.tpx-studio-active
  .studio-suggestions button strong {

    font-size:
      8px !important;
  }


  body.tpx-studio-active
  .studio-suggestions button small {

    font-size:
      7px !important;

    line-height:
      1.25 !important;
  }


  /* ----------------------------------------------------------
     Other Builder cards/sections below active guide
     ---------------------------------------------------------- */

  body.tpx-studio-active .studio-rule {

    padding:
      9px 11px !important;

    border-radius:
      9px !important;
  }


  body.tpx-studio-active
  .studio-rule h2,

  body.tpx-studio-active
  .studio-rule h3 {

    font-size:
      14px !important;

    margin-bottom:
      5px !important;
  }


  body.tpx-studio-active
  .studio-rule p {

    font-size:
      8px !important;

    line-height:
      1.35 !important;
  }


  /* ----------------------------------------------------------
     CENTER — review
     ---------------------------------------------------------- */

  body.tpx-studio-active .studio-summary {

    top:
      70px !important;

    padding:
      10px 11px !important;

    border-radius:
      10px !important;
  }


  body.tpx-studio-active
  .studio-summary > h2,

  body.tpx-studio-active
  .studio-summary > h3 {

    margin:
      0 0 7px !important;

    font-size:
      13px !important;
  }


  body.tpx-studio-active
  .tpx-review-preview {

    margin:
      0 0 7px !important;

    padding-bottom:
      8px !important;
  }


  body.tpx-studio-active
  .tpx-review-score-row {

    gap:
      9px !important;
  }


  body.tpx-studio-active
  .tpx-review-ring {

    width:
      49px !important;

    height:
      49px !important;
  }


  body.tpx-studio-active
  .tpx-review-ring strong {

    font-size:
      14px !important;
  }


  body.tpx-studio-active
  .tpx-review-status strong {

    font-size:
      10px !important;
  }


  body.tpx-studio-active
  .tpx-review-status span {

    font-size:
      7px !important;

    line-height:
      1.3 !important;
  }


  body.tpx-studio-active
  .studio-summary h1 {

    margin:
      7px 0 5px !important;

    font-size:
      16px !important;

    line-height:
      1.08 !important;
  }


  body.tpx-studio-active
  .studio-summary p {

    font-size:
      8px !important;

    line-height:
      1.4 !important;
  }


  body.tpx-studio-active
  .studio-summary-meta {

    gap:
      4px !important;

    margin:
      5px 0 !important;
  }


  body.tpx-studio-active
  .studio-summary-meta span {

    min-height:
      21px !important;

    padding:
      0 6px !important;

    font-size:
      7px !important;
  }


  body.tpx-studio-active
  .studio-summary-tip {

    margin:
      6px 0 !important;

    padding:
      7px 0 !important;

    font-size:
      8px !important;

    line-height:
      1.35 !important;
  }


  body.tpx-studio-active
  .studio-primary {

    min-height:
      36px !important;

    padding:
      0 10px !important;

    font-size:
      9px !important;
  }


  /* ----------------------------------------------------------
     RIGHT — actual chart workstation
     ---------------------------------------------------------- */

  body.tpx-studio-active
  .tpx-studio-right {

    gap:
      8px !important;
  }


  body.tpx-studio-active
  #tpV07ChartDialog.tpx-inline {

    border-radius:
      10px !important;

    box-shadow:
      0 18px 50px rgba(0,0,0,.34),
      0 0 0 1px rgba(50,155,224,.028) inset
      !important;
  }


  /* Tighten the real chart toolbar. */

  body.tpx-studio-active
  #tpV07ChartDialog.tpx-inline
  .tp-workspace {

    border-radius:
      9px !important;
  }


  body.tpx-studio-active
  #tpV07ChartDialog.tpx-inline
  .tp-chart-stage {

    height:
      330px !important;

    min-height:
      330px !important;
  }


  /* Generic compact toolbar controls inside workspace. */

  body.tpx-studio-active
  #tpV07ChartDialog.tpx-inline
  button,

  body.tpx-studio-active
  #tpV07ChartDialog.tpx-inline
  select {

    min-height:
      30px;

    font-size:
      9px;
  }


  /* ----------------------------------------------------------
     TP AI — bring into first viewport
     ---------------------------------------------------------- */

  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline {

    border-radius:
      10px !important;

    margin:
      0 !important;
  }


  /*
     Unlike chart heading, AI heading is useful and stays visible.
  */

  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline
  .studio-dialog-heading {

    display:
      block !important;

    padding:
      9px 11px 5px !important;
  }


  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline
  .studio-dialog-heading h1,

  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline
  .studio-dialog-heading h2 {

    margin:
      0 0 2px !important;

    font-size:
      15px !important;

    line-height:
      1.08 !important;
  }


  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline
  .studio-dialog-heading p {

    margin:
      0 !important;

    font-size:
      8px !important;

    line-height:
      1.3 !important;
  }


  body.tpx-studio-active
  .tp-ai-studio {

    padding:
      8px 10px !important;
  }


  body.tpx-studio-active
  .tp-ai-studio textarea {

    min-height:
      66px !important;

    max-height:
      82px !important;

    padding:
      8px !important;

    font-size:
      9px !important;

    line-height:
      1.35 !important;
  }


  body.tpx-studio-active
  #tpAiStrategyChat {

    min-height:
      160px !important;

    max-height:
      210px !important;
  }


  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline button {

    min-height:
      29px;

    font-size:
      8px;
  }


  /* ----------------------------------------------------------
     Surface language
     ---------------------------------------------------------- */

  body.tpx-studio-active .studio-basics,
  body.tpx-studio-active .studio-guide,
  body.tpx-studio-active .studio-summary,
  body.tpx-studio-active .studio-rule,
  body.tpx-studio-active
  #tpV07ChartDialog.tpx-inline,
  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline {

    border-color:
      rgba(61,145,202,.20) !important;
  }


  body.tpx-studio-active .studio-basics,
  body.tpx-studio-active .studio-guide,
  body.tpx-studio-active .studio-summary {

    background:
      linear-gradient(
        180deg,
        rgba(8,26,41,.96),
        rgba(5,19,31,.97)
      ) !important;
  }
}


/* ------------------------------------------------------------
   1261–1500: same idea, slightly safer widths
   ------------------------------------------------------------ */

@media (min-width: 1261px) and (max-width: 1500px) {

  body.tpx-studio-active .studio-main {
    width:
      calc(100vw - 24px) !important;
  }


  body.tpx-studio-active
  .studio-columns.tpx-studio-grid {

    grid-template-columns:
      minmax(480px, 1.02fr)
      minmax(220px, .43fr)
      minmax(530px, 1.14fr)
      !important;

    gap:
      9px !important;
  }


  body.tpx-studio-active
  .tpx-studio-head h1 {

    font-size:
      28px !important;
  }


  body.tpx-studio-active
  #tpV07ChartDialog.tpx-inline
  .tp-chart-stage {

    height:
      315px !important;

    min-height:
      315px !important;
  }
}


/* TP_REFERENCE_STUDIO_R33_END */

/* TP_REFERENCE_STUDIO_R34_START */

/* ============================================================
   TP REFERENCE STUDIO R3.4
   Strategy review follows normal document flow.

   Previous behaviour:
   sticky review column.

   New behaviour:
   review remains aligned with the Builder and scrolls naturally
   with the rest of the Studio.
   ============================================================ */

@media (min-width: 901px) {

  body.tpx-studio-active .studio-summary {
    position: static !important;

    top: auto !important;

    bottom: auto !important;

    align-self: start !important;

    transform: none !important;
  }
}

/* TP_REFERENCE_STUDIO_R34_END */

/* TP_REFERENCE_STUDIO_V08_OVERVIEW_START */

/* ============================================================
   TP REFERENCE STUDIO v0.8
   Full Strategy Builder
   ============================================================ */

body.tpx-studio-active
.tp-v08-overview[hidden] {
  display: none !important;
}


/*
   Overview replaces only the visible left-editor presentation.
   Existing canonical Builder stays mounted.
*/

body.tpx-studio-active.tp-v08-overview-mode
.studio-editor
> :not(.studio-builder-toolbar):not(.tp-v08-overview) {
  display: none !important;
}


/*
   The Reference UI layer may place the Builder toolbar inside
   .studio-editor.

   In Vista completa the canonical Builder panels remain hidden,
   but the mode selector must remain visible so the user can
   switch between Vista completa, Paso a paso and Edición libre.
*/

body.tpx-studio-active
.studio-editor
> .studio-builder-toolbar {
  display: flex !important;

  order: -1;

  width: 100%;

  margin:
    0 0 6px !important;
}


body.tpx-studio-active
.tp-v08-overview {
  display: grid;

  gap: 7px;

  min-width: 0;
}


body.tpx-studio-active
.tp-v08-section {
  overflow: hidden;

  border:
    1px solid rgba(59,149,209,.21);

  border-radius:
    9px;

  background:
    linear-gradient(
      180deg,
      rgba(8,27,43,.98),
      rgba(5,18,30,.98)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018);
}


body.tpx-studio-active
.tp-v08-section-head {
  min-height: 45px;

  display: grid;

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

  align-items: center;

  gap: 8px;

  padding:
    7px 9px;

  border-bottom:
    1px solid rgba(64,143,197,.11);
}


body.tpx-studio-active
.tp-v08-number {
  width: 24px;
  height: 24px;

  display: inline-flex;

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

  border:
    1px solid rgba(44,168,242,.34);

  border-radius: 50%;

  color:
    #61ceff;

  background:
    rgba(15,68,103,.48);

  font-size: 10px;

  font-weight: 850;
}


body.tpx-studio-active
.tp-v08-section-copy {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 2px;
}


body.tpx-studio-active
.tp-v08-section-copy strong {
  color: #eef8ff;

  font-size: 10px;

  font-weight: 780;
}


body.tpx-studio-active
.tp-v08-section-copy small {
  color: #768da0;

  font-size: 7px;

  line-height: 1.25;
}


body.tpx-studio-active
.tp-v08-count {
  min-height: 19px;

  display: inline-flex;

  align-items: center;

  padding:
    0 6px;

  border:
    1px solid rgba(54,156,218,.19);

  border-radius:
    999px;

  color:
    #76a8c7;

  background:
    rgba(10,43,65,.42);

  font-size: 7px;

  white-space: nowrap;
}


body.tpx-studio-active
.tp-v08-section-body {
  padding:
    7px 9px 9px;
}


body.tpx-studio-active
.tp-v08-fields {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 6px;
}


body.tpx-studio-active
.tp-v08-market-fields {
  grid-template-columns:
    minmax(180px,1.2fr)
    minmax(110px,.75fr)
    minmax(105px,.68fr);
}


body.tpx-studio-active
.tp-v08-alert-fields {
  grid-template-columns:
    1.1fr 1fr 1fr;
}


body.tpx-studio-active
.tp-v08-field {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 3px;
}


body.tpx-studio-active
.tp-v08-field > span {
  color: #7c93a6;

  font-size: 7px;

  font-weight: 750;

  letter-spacing: .06em;

  text-transform: uppercase;
}


body.tpx-studio-active
.tp-v08-field input,

body.tpx-studio-active
.tp-v08-field select {
  width: 100%;

  min-width: 0;

  height: 30px;

  padding:
    0 8px;

  border:
    1px solid rgba(63,146,201,.22);

  border-radius:
    6px;

  color: #ddecf7;

  background:
    rgba(5,19,31,.90);

  font-size: 8px;
}


body.tpx-studio-active
.tp-v08-rule-list {
  display: grid;

  gap: 5px;
}


body.tpx-studio-active
.tp-v08-empty {
  margin: 0;

  padding:
    2px 0 5px;

  color: #627b90;

  font-size: 7px;
}


body.tpx-studio-active
.tp-v08-overview
.studio-rule {
  margin: 0 !important;

  border-radius:
    7px !important;

  background:
    rgba(6,23,36,.88) !important;
}


body.tpx-studio-active
.tp-v08-overview
.studio-rule-header {
  min-height:
    34px !important;

  padding:
    5px 7px !important;
}


body.tpx-studio-active
.tp-v08-overview
.studio-rule-label {
  font-size:
    8px !important;
}


body.tpx-studio-active
.tp-v08-overview
.studio-rule-kicker,

body.tpx-studio-active
.tp-v08-overview
.studio-rule-timeframe,

body.tpx-studio-active
.tp-v08-overview
.studio-rule-status {
  font-size:
    6px !important;
}


body.tpx-studio-active
.tp-v08-overview
.studio-rule-body {
  padding:
    7px !important;
}


body.tpx-studio-active
.tp-v08-add {
  min-height: 28px;

  margin-top:
    5px;

  padding:
    0 8px;

  border:
    1px solid rgba(35,158,230,.34);

  border-radius:
    6px;

  color:
    #5dc9ff;

  background:
    rgba(10,47,72,.48);

  font-size:
    7px;

  font-weight:
    760;

  cursor:
    pointer;
}


body.tpx-studio-active
.tp-v08-add:hover {
  border-color:
    rgba(57,191,255,.55);

  background:
    rgba(14,65,96,.63);
}


body.tpx-studio-active
.tp-v08-note {
  margin:
    6px 0 0;

  color:
    #627c90;

  font-size:
    7px;
}


body.tpx-studio-active
.studio-segmented
button[data-tp-builder-mode="OVERVIEW"].is-active {
  color: #ddf7ff;

  border-color:
    rgba(56,184,248,.43);

  background:
    rgba(17,75,109,.72);
}


@media (max-width:1450px) {

  body.tpx-studio-active
  .tp-v08-market-fields {
    grid-template-columns:
      1fr 1fr;
  }

  body.tpx-studio-active
  .tp-v08-market-fields
  .tp-v08-field:first-child {
    grid-column:
      1 / -1;
  }

  body.tpx-studio-active
  .tp-v08-alert-fields {
    grid-template-columns:
      1fr;
  }
}


@media (max-width:900px) {

  body.tpx-studio-active
  .tp-v08-fields,

  body.tpx-studio-active
  .tp-v08-market-fields,

  body.tpx-studio-active
  .tp-v08-alert-fields {
    grid-template-columns:
      1fr;
  }

  body.tpx-studio-active
  .tp-v08-section-head {
    grid-template-columns:
      27px minmax(0,1fr);
  }

  body.tpx-studio-active
  .tp-v08-count {
    display: none;
  }

}


/* TP_REFERENCE_STUDIO_V08_OVERVIEW_END */

/* TP_REFERENCE_STUDIO_V09_QUICK_RULES_START */

/* ============================================================
   TP REFERENCE STUDIO v0.9
   Reference-like fast rule creation
   ============================================================ */


body.tpx-studio-active
.tp-v09-quick-builder {
  display: grid;

  grid-template-columns:
    92px
    minmax(135px,.72fr)
    minmax(0,1.5fr);

  align-items: center;

  gap: 6px;

  margin:
    0 0 7px;

  padding:
    6px;

  border:
    1px solid rgba(55,147,208,.13);

  border-radius:
    7px;

  background:
    rgba(3,15,25,.50);
}


body.tpx-studio-active
.tp-v09-quick-label {
  color:
    #7890a4;

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


body.tpx-studio-active
.tp-v09-quick-builder
select {
  width: 100%;

  min-width: 0;

  height: 29px;

  padding:
    0 8px;

  border:
    1px solid rgba(53,148,210,.27);

  border-radius:
    6px;

  color:
    #dcebf5;

  background:
    #071a29;

  font-size:
    8px;

  cursor:
    pointer;
}


body.tpx-studio-active
.tp-v09-quick-chips {
  min-width: 0;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap: 4px;
}


body.tpx-studio-active
.tp-v09-chip {
  min-width: 0;

  min-height:
    31px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  gap: 1px;

  padding:
    4px 7px;

  overflow: hidden;

  border:
    1px solid rgba(48,139,199,.17);

  border-radius:
    6px;

  color:
    #c9dbe7;

  background:
    rgba(8,28,44,.82);

  cursor:
    pointer;

  text-align:
    left;

  transition:
    border-color .15s ease,
    background .15s ease,
    transform .15s ease;
}


body.tpx-studio-active
.tp-v09-chip:hover {
  border-color:
    rgba(55,187,251,.43);

  background:
    rgba(13,54,80,.88);

  transform:
    translateY(-1px);
}


body.tpx-studio-active
.tp-v09-chip strong {
  width: 100%;

  overflow: hidden;

  color:
    #e2f1f9;

  font-size:
    7px;

  font-weight:
    760;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


body.tpx-studio-active
.tp-v09-chip small {
  width: 100%;

  overflow: hidden;

  color:
    #6f899c;

  font-size:
    6px;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


/*
   Once rules exist, make the actual rule cards feel more
   like the horizontal rows in the approved reference.
*/

body.tpx-studio-active
.tp-v08-overview
.studio-rule {
  border-color:
    rgba(51,149,211,.23) !important;
}


body.tpx-studio-active
.tp-v08-overview
.studio-rule-header {
  min-height:
    36px !important;

  background:
    rgba(7,25,39,.80);
}


body.tpx-studio-active
.tp-v08-overview
.studio-rule-header:hover {
  background:
    rgba(10,38,57,.86);
}


body.tpx-studio-active
.tp-v08-overview
.studio-rule.is-open {
  box-shadow:
    0 0 0 1px rgba(38,171,238,.07) inset;
}


/*
   Bring the left Builder slightly closer to the reference:
   less dead vertical air, more useful controls.
*/

body.tpx-studio-active
.tp-v08-section-body {
  padding:
    7px 8px 8px;
}


body.tpx-studio-active
.tp-v08-add {
  width:
    max-content;

  max-width:
    100%;
}


/* ============================================================
   Medium desktop
   ============================================================ */

@media (max-width:1450px) {

  body.tpx-studio-active
  .tp-v09-quick-builder {
    grid-template-columns:
      85px
      minmax(120px,.8fr)
      minmax(0,1.3fr);
  }

}


/* ============================================================
   Tablet
   ============================================================ */

@media (max-width:1100px) {

  body.tpx-studio-active
  .tp-v09-quick-builder {
    grid-template-columns:
      1fr;
  }

  body.tpx-studio-active
  .tp-v09-quick-chips {
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }

}


/* ============================================================
   Mobile
   ============================================================ */

@media (max-width:700px) {

  body.tpx-studio-active
  .tp-v09-quick-chips {
    grid-template-columns:
      1fr;
  }

}


/* TP_REFERENCE_STUDIO_V09_QUICK_RULES_END */

/* TP_REFERENCE_VISUAL_PARITY_R5A_START */


/* ============================================================
   BETA
   ============================================================ */

body.tpx-studio-active
.tpx-r5-beta,

body.tpx-studio-active
.tpx-r5-ai-beta {
  min-height: 15px;

  display: inline-flex;

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

  padding:
    0 5px;

  border:
    1px solid rgba(49,174,240,.34);

  border-radius:
    999px;

  color:
    #66ccff;

  background:
    rgba(10,58,88,.60);

  font-size:
    5px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    .09em;

  white-space:
    nowrap;
}


/* ============================================================
   REVIEW
   ============================================================ */

body.tpx-studio-active
.tpx-r5-review-beta {
  display: grid;

  gap:
    8px;

  margin-top:
    9px;

  padding-top:
    9px;

  border-top:
    1px solid rgba(67,145,196,.14);
}


body.tpx-studio-active
.tpx-r5-review-beta-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap:
    7px;
}


body.tpx-studio-active
.tpx-r5-review-beta-head strong {
  color:
    #edf7fd;

  font-size:
    9px;
}


body.tpx-studio-active
.tpx-r5-checklist {
  display: grid;

  gap:
    4px;
}


body.tpx-studio-active
.tpx-r5-check-row {
  min-height:
    25px;

  display: grid;

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

  align-items: center;

  gap:
    6px;

  padding:
    0 5px;

  border-radius:
    6px;

  color:
    #c8d8e3;

  background:
    rgba(5,21,34,.52);

  font-size:
    7px;
}


body.tpx-studio-active
.tpx-r5-check-icon {
  width:
    16px;

  height:
    16px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  font-size:
    7px;

  font-weight:
    900;
}


body.tpx-studio-active
.tpx-r5-check-row.is-ok
.tpx-r5-check-icon {
  color:
    #000d13;

  background:
    #249fd4;
}


body.tpx-studio-active
.tpx-r5-check-row.is-warn
.tpx-r5-check-icon {
  color:
    #201400;

  background:
    #efad31;
}


body.tpx-studio-active
.tpx-r5-doubts {
  display: grid;

  gap:
    4px;

  padding-top:
    5px;

  border-top:
    1px solid rgba(64,141,192,.11);
}


body.tpx-studio-active
.tpx-r5-doubts-head {
  min-height:
    24px;

  display: flex;

  align-items: center;
  justify-content: space-between;
}


body.tpx-studio-active
.tpx-r5-doubts-head strong {
  color:
    #e6f1f8;

  font-size:
    8px;
}


body.tpx-studio-active
.tpx-r5-doubt-count {
  min-width:
    20px;

  height:
    20px;

  display:
    inline-flex;

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

  border:
    1px solid rgba(35,164,235,.29);

  border-radius:
    50%;

  color:
    #65caff;

  background:
    rgba(12,61,91,.55);

  font-size:
    7px;

  font-weight:
    850;
}


body.tpx-studio-active
.tpx-r5-doubt-card {
  display: grid;

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

  gap:
    6px;

  padding:
    6px;

  border:
    1px solid rgba(53,137,193,.14);

  border-radius:
    7px;

  background:
    rgba(7,27,43,.72);
}


body.tpx-studio-active
.tpx-r5-doubt-icon {
  width:
    23px;

  height:
    23px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  color:
    #06131c;

  background:
    #6cc8ff;

  font-size:
    10px;

  font-weight:
    900;
}


body.tpx-studio-active
.tpx-r5-doubt-copy {
  display: flex;

  flex-direction:
    column;

  gap:
    2px;
}


body.tpx-studio-active
.tpx-r5-doubt-copy strong {
  color:
    #dcebf4;

  font-size:
    7px;
}


body.tpx-studio-active
.tpx-r5-doubt-copy small {
  color:
    #748da0;

  font-size:
    6px;

  line-height:
    1.32;
}


/* ============================================================
   CHART HUD
   ============================================================ */

body.tpx-studio-active
#tpV07ChartDialog.tpx-inline
.tp-chart-stage {
  position:
    relative !important;

  overflow:
    hidden !important;
}


body.tpx-studio-active
.tpx-r5-chart-hud {
  position:
    absolute;

  inset:
    0;

  z-index:
    10;

  overflow:
    hidden;

  pointer-events:
    none;
}


/* toolbar */

body.tpx-studio-active
.tpx-r5-chart-toolbar {
  position:
    absolute;

  top:
    7px;

  right:
    9px;

  z-index:
    5;

  min-height:
    27px;

  display:
    flex;

  align-items:
    center;

  gap:
    3px;

  padding:
    3px 5px;

  border:
    1px solid rgba(63,142,193,.13);

  border-radius:
    7px;

  background:
    rgba(4,16,26,.80);

  backdrop-filter:
    blur(8px);
}


body.tpx-studio-active
.tpx-r5-timeframe {
  min-width:
    24px;

  height:
    21px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    5px;

  color:
    #8298a9;

  font-size:
    6px;

  font-weight:
    750;
}


body.tpx-studio-active
.tpx-r5-timeframe.is-active {
  color:
    #7cd5ff;

  background:
    rgba(28,112,167,.48);
}


body.tpx-studio-active
.tpx-r5-toolbar-divider {
  width:
    1px;

  height:
    15px;

  margin:
    0 2px;

  background:
    rgba(84,144,183,.15);
}


body.tpx-studio-active
.tpx-r5-indicators {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  color:
    #a8bac6;

  font-size:
    6px;
}


body.tpx-studio-active
.tpx-r5-indicators
.tpx-r5-beta {
  min-height:
    12px;

  padding:
    0 3px;

  font-size:
    4px;
}


body.tpx-studio-active
.tpx-r5-tool-icon {
  width:
    21px;

  height:
    21px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #879baa;

  font-size:
    9px;
}


/* OHLC */

body.tpx-studio-active
.tpx-r5-ohlc {
  position:
    absolute;

  top:
    8px;

  left:
    11px;

  z-index:
    4;

  max-width:
    54%;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    #71899a;

  font-size:
    5px;

  white-space:
    nowrap;
}


body.tpx-studio-active
.tpx-r5-ohlc strong {
  color:
    #dbe9f2;

  font-size:
    6px;
}


body.tpx-studio-active
.tpx-r5-ohlc
.is-positive {
  color:
    #239ed3;
}


/* legend */

body.tpx-studio-active
.tpx-r5-indicator-legend {
  position:
    absolute;

  top:
    34px;

  left:
    11px;

  z-index:
    4;

  display:
    grid;

  gap:
    3px;

  padding:
    5px 6px;

  border-radius:
    6px;

  background:
    rgba(4,16,26,.47);

  backdrop-filter:
    blur(4px);
}


body.tpx-studio-active
.tpx-r5-indicator-row {
  display:
    grid;

  grid-template-columns:
    5px 39px auto;

  align-items:
    center;

  gap:
    4px;

  color:
    #7890a2;

  font-size:
    5px;
}


body.tpx-studio-active
.tpx-r5-indicator-row i {
  width:
    5px;

  height:
    5px;

  border-radius:
    50%;
}


body.tpx-studio-active
.tpx-r5-indicator-row
i.is-blue {
  background:
    #208fff;
}

body.tpx-studio-active
.tpx-r5-indicator-row
i.is-cyan {
  background:
    #22b8d7;
}

body.tpx-studio-active
.tpx-r5-indicator-row
i.is-orange {
  background:
    #ef8b19;
}

body.tpx-studio-active
.tpx-r5-indicator-row
i.is-green {
  background:
    #2199cc;
}


body.tpx-studio-active
.tpx-r5-indicator-row strong {
  color:
    #77badd;

  font-size:
    5px;
}


/* trade overlays */

body.tpx-studio-active
.tpx-r5-trade-overlay {
  position:
    absolute;

  inset:
    0;

  z-index:
    3;
}


body.tpx-studio-active
.tpx-r5-profit-zone {
  position:
    absolute;

  left:
    61%;

  top:
    25%;

  width:
    27%;

  height:
    31%;

  border-top:
    1px dashed rgba(29,160,216,.55);

  background:
    linear-gradient(
      180deg,
      rgba(19,135,185,.15),
      rgba(13,94,129,.06)
    );
}


body.tpx-studio-active
.tpx-r5-risk-zone {
  position:
    absolute;

  left:
    61%;

  top:
    56%;

  width:
    27%;

  height:
    16%;

  border-bottom:
    1px dashed rgba(239,76,93,.61);

  background:
    rgba(212,61,79,.10);
}


body.tpx-studio-active
.tpx-r5-trade-label {
  position:
    absolute;

  min-height:
    19px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    3px;

  padding:
    0 5px;

  border-radius:
    5px;

  font-size:
    5px;

  font-weight:
    850;

  backdrop-filter:
    blur(6px);
}


body.tpx-studio-active
.tpx-r5-trade-label
.tpx-r5-beta {
  min-height:
    11px;

  padding:
    0 3px;

  font-size:
    4px;
}


body.tpx-studio-active
.tpx-r5-trade-label.is-entry {
  left:
    55%;

  top:
    51%;

  color:
    #4dbeee;

  border:
    1px solid rgba(29,162,219,.58);

  background:
    rgba(5,47,65,.82);
}


body.tpx-studio-active
.tpx-r5-trade-label.is-tp {
  right:
    11%;

  top:
    20%;

  color:
    #43b6e8;

  border:
    1px solid rgba(29,162,219,.52);

  background:
    rgba(6,48,66,.84);
}


body.tpx-studio-active
.tpx-r5-trade-label.is-sl {
  right:
    18%;

  top:
    70%;

  color:
    #ff7180;

  border:
    1px solid rgba(238,77,94,.58);

  background:
    rgba(74,17,26,.86);
}


body.tpx-studio-active
.tpx-r5-entry-dot {
  position:
    absolute;

  left:
    62%;

  top:
    53%;

  width:
    9px;

  height:
    9px;

  border:
    2px solid #1da3dc;

  border-radius:
    50%;

  background:
    #061015;

  box-shadow:
    0 0 0 4px rgba(29,163,220,.08),
    0 0 14px rgba(29,163,220,.36);
}


/* ============================================================
   AI
   ============================================================ */

body.tpx-studio-active
.tpx-r5-ai-beta {
  margin-left:
    6px;
}


/* ============================================================
   SURFACE DEPTH
   ============================================================ */

body.tpx-studio-active
.tp-v08-section,

body.tpx-studio-active
.studio-summary,

body.tpx-studio-active
#tpV07ChartDialog.tpx-inline,

body.tpx-studio-active
#tpV07AiDialog.tpx-inline {
  border-color:
    rgba(52,149,210,.22) !important;

  box-shadow:
    0 15px 38px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.016)
    !important;
}


/* TP_REFERENCE_VISUAL_PARITY_R5A_END */

/* TP_REFERENCE_STUDIO_R5B_PROPORTIONS_START */

/* ============================================================
   TP REFERENCE STUDIO R5B
   Proportion / density alignment with approved reference.
   ============================================================ */


@media (min-width: 1261px) {

  /* ----------------------------------------------------------
     Overall workstation
     ---------------------------------------------------------- */

  body.tpx-studio-active
  .studio-main {
    width:
      min(
        1640px,
        calc(100vw - 16px)
      ) !important;

    padding-top:
      13px !important;
  }


  body.tpx-studio-active
  .tpx-studio-head {
    margin-bottom:
      11px !important;
  }


  body.tpx-studio-active
  .tpx-studio-head h1 {
    font-size:
      33px !important;

    line-height:
      1.02 !important;
  }


  body.tpx-studio-active
  .tpx-studio-head p {
    font-size:
      11px !important;
  }


  body.tpx-studio-active
  .studio-columns.tpx-studio-grid {
    grid-template-columns:
      minmax(555px,1.03fr)
      minmax(250px,.45fr)
      minmax(640px,1.18fr)
      !important;

    gap:
      10px !important;
  }


  /* ----------------------------------------------------------
     Mode toolbar
     ---------------------------------------------------------- */

  body.tpx-studio-active
  .studio-builder-toolbar {
    min-height:
      35px !important;

    margin-bottom:
      6px !important;
  }


  body.tpx-studio-active
  .studio-segmented {
    min-height:
      34px !important;
  }


  body.tpx-studio-active
  .studio-segmented button {
    min-height:
      30px !important;

    padding:
      0 12px !important;

    font-size:
      9px !important;
  }


  body.tpx-studio-active
  .studio-toolbar-actions button {
    min-height:
      32px !important;

    font-size:
      9px !important;
  }


  /* ----------------------------------------------------------
     Six main sections
     ---------------------------------------------------------- */

  body.tpx-studio-active
  .tp-v08-overview {
    gap:
      6px !important;
  }


  body.tpx-studio-active
  .tp-v08-section-head {
    min-height:
      43px !important;

    grid-template-columns:
      29px
      minmax(0,1fr)
      auto !important;

    gap:
      8px !important;

    padding:
      6px 9px !important;
  }


  body.tpx-studio-active
  .tp-v08-number {
    width:
      27px !important;

    height:
      27px !important;

    font-size:
      11px !important;
  }


  body.tpx-studio-active
  .tp-v08-section-copy strong {
    font-size:
      11px !important;

    line-height:
      1.08 !important;
  }


  body.tpx-studio-active
  .tp-v08-section-copy small {
    margin-top:
      1px;

    font-size:
      7px !important;

    line-height:
      1.18 !important;
  }


  body.tpx-studio-active
  .tp-v08-count {
    min-height:
      19px !important;

    font-size:
      6px !important;
  }


  body.tpx-studio-active
  .tp-v08-section-body {
    padding:
      6px 8px 7px !important;
  }


  /* ----------------------------------------------------------
     Market section
     ---------------------------------------------------------- */

  body.tpx-studio-active
  .tp-v08-market-fields {
    grid-template-columns:
      1.25fr
      .82fr
      .72fr !important;

    gap:
      6px !important;
  }


  body.tpx-studio-active
  .tp-v08-field {
    gap:
      3px !important;
  }


  body.tpx-studio-active
  .tp-v08-field > span {
    font-size:
      6px !important;
  }


  body.tpx-studio-active
  .tp-v08-field input,

  body.tpx-studio-active
  .tp-v08-field select {
    height:
      30px !important;

    min-height:
      30px !important;

    padding:
      0 8px !important;

    font-size:
      8px !important;
  }


  /* ----------------------------------------------------------
     Quick controls:
     compact them to a single terminal row.
     ---------------------------------------------------------- */

  body.tpx-studio-active
  .tp-v09-quick-builder {
    grid-template-columns:
      84px
      minmax(135px,.85fr)
      minmax(0,1.55fr)
      !important;

    gap:
      5px !important;

    margin:
      0 0 5px !important;

    padding:
      5px !important;
  }


  body.tpx-studio-active
  .tp-v09-quick-label {
    font-size:
      6px !important;
  }


  body.tpx-studio-active
  .tp-v09-quick-builder select {
    height:
      28px !important;

    min-height:
      28px !important;

    font-size:
      7px !important;
  }


  body.tpx-studio-active
  .tp-v09-quick-chips {
    gap:
      3px !important;
  }


  body.tpx-studio-active
  .tp-v09-chip {
    min-height:
      29px !important;

    padding:
      3px 6px !important;
  }


  body.tpx-studio-active
  .tp-v09-chip strong {
    font-size:
      6px !important;
  }


  body.tpx-studio-active
  .tp-v09-chip small {
    font-size:
      5px !important;
  }


  body.tpx-studio-active
  .tp-v08-empty {
    padding:
      1px 0 3px !important;

    font-size:
      6px !important;
  }


  body.tpx-studio-active
  .tp-v08-add {
    min-height:
      25px !important;

    margin-top:
      3px !important;

    padding:
      0 7px !important;

    font-size:
      6px !important;
  }


  /* ----------------------------------------------------------
     Review panel
     ---------------------------------------------------------- */

  body.tpx-studio-active
  .studio-summary {
    padding:
      11px !important;
  }


  body.tpx-studio-active
  .studio-summary > h2 {
    font-size:
      15px !important;
  }


  body.tpx-studio-active
  .tpx-review-ring {
    width:
      56px !important;

    height:
      56px !important;
  }


  body.tpx-studio-active
  .tpx-review-ring strong {
    font-size:
      15px !important;
  }


  body.tpx-studio-active
  .tpx-review-status strong {
    font-size:
      9px !important;
  }


  body.tpx-studio-active
  .tpx-review-status span {
    font-size:
      6px !important;
  }


  body.tpx-studio-active
  .tpx-r5-review-beta {
    gap:
      6px !important;

    margin-top:
      7px !important;

    padding-top:
      7px !important;
  }


  body.tpx-studio-active
  .tpx-r5-review-beta-head strong {
    font-size:
      9px !important;
  }


  body.tpx-studio-active
  .tpx-r5-checklist {
    gap:
      3px !important;
  }


  body.tpx-studio-active
  .tpx-r5-check-row {
    min-height:
      23px !important;

    font-size:
      7px !important;
  }


  body.tpx-studio-active
  .tpx-r5-doubts {
    gap:
      3px !important;
  }


  body.tpx-studio-active
  .tpx-r5-doubt-card {
    padding:
      5px !important;
  }


  /* ----------------------------------------------------------
     Chart — reference target proportions
     ---------------------------------------------------------- */

  body.tpx-studio-active
  #tpV07ChartDialog.tpx-inline
  .tp-chart-stage {
    height:
      300px !important;

    min-height:
      300px !important;
  }


  body.tpx-studio-active
  .tpx-r5-chart-toolbar {
    top:
      6px !important;

    right:
      8px !important;
  }


  body.tpx-studio-active
  .tpx-r5-ohlc {
    top:
      7px !important;

    left:
      10px !important;
  }


  body.tpx-studio-active
  .tpx-r5-indicator-legend {
    top:
      31px !important;

    left:
      10px !important;
  }


  body.tpx-studio-active
  .tpx-r5-profit-zone {
    top:
      24% !important;

    height:
      30% !important;
  }


  body.tpx-studio-active
  .tpx-r5-risk-zone {
    top:
      54% !important;

    height:
      16% !important;
  }


  body.tpx-studio-active
  .tpx-r5-trade-label.is-entry {
    top:
      49% !important;
  }


  body.tpx-studio-active
  .tpx-r5-trade-label.is-tp {
    top:
      19% !important;
  }


  body.tpx-studio-active
  .tpx-r5-trade-label.is-sl {
    top:
      68% !important;
  }


  /* ----------------------------------------------------------
     TP AI — more visible in first viewport
     ---------------------------------------------------------- */

  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline
  .studio-dialog-heading {
    padding:
      8px 10px 5px !important;
  }


  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline
  .studio-dialog-heading h1,

  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline
  .studio-dialog-heading h2 {
    font-size:
      16px !important;
  }


  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline
  .studio-dialog-heading p {
    font-size:
      8px !important;
  }


  body.tpx-studio-active
  .tp-ai-studio {
    padding:
      7px 9px !important;
  }


  body.tpx-studio-active
  .tp-ai-studio textarea {
    min-height:
      55px !important;

    max-height:
      68px !important;
  }


  /* ----------------------------------------------------------
     Visual depth
     ---------------------------------------------------------- */

  body.tpx-studio-active
  .tp-v08-section,

  body.tpx-studio-active
  .studio-summary,

  body.tpx-studio-active
  #tpV07ChartDialog.tpx-inline,

  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline {
    border-color:
      rgba(58,157,218,.26) !important;

    box-shadow:
      0 15px 38px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.018)
      !important;
  }

}


/* ============================================================
   Slightly narrower desktop
   ============================================================ */

@media (min-width:1261px) and (max-width:1450px) {

  body.tpx-studio-active
  .studio-columns.tpx-studio-grid {
    grid-template-columns:
      minmax(500px,1fr)
      minmax(230px,.45fr)
      minmax(545px,1.12fr)
      !important;
  }


  body.tpx-studio-active
  #tpV07ChartDialog.tpx-inline
  .tp-chart-stage {
    height:
      285px !important;

    min-height:
      285px !important;
  }

}


/* TP_REFERENCE_STUDIO_R5B_PROPORTIONS_END */

/* TP_REFERENCE_STUDIO_R5C_FULL_HEIGHT_START */

/* ============================================================
   TP REFERENCE STUDIO R5C

   The left Builder establishes the workstation height.

   Review fills the complete center column.

   Right column keeps the real chart on top and stretches
   TP AI through all remaining vertical space.
   ============================================================ */


@media (min-width:1261px) {

  /* ----------------------------------------------------------
     Make all three workstation columns share the same row height
     ---------------------------------------------------------- */

  body.tpx-studio-active
  .studio-columns.tpx-studio-grid {
    align-items:
      stretch !important;
  }


  body.tpx-studio-active
  .studio-editor {
    align-self:
      start !important;
  }


  /* ----------------------------------------------------------
     REVIEW — full-height middle column
     ---------------------------------------------------------- */

  body.tpx-studio-active
  .studio-summary {
    position:
      static !important;

    top:
      auto !important;

    bottom:
      auto !important;

    align-self:
      stretch !important;

    height:
      auto !important;

    min-height:
      100% !important;

    display:
      flex !important;

    flex-direction:
      column !important;
  }


  /*
     Keep the normal review content at the top but let the
     BETA checklist / doubts occupy the vertical panel naturally.
  */

  body.tpx-studio-active
  .tpx-r5-review-beta {
    flex:
      0 0 auto;
  }


  /* ----------------------------------------------------------
     RIGHT COLUMN
     Chart = natural height
     TP AI = all remaining height
     ---------------------------------------------------------- */

  body.tpx-studio-active
  .tpx-studio-right {
    align-self:
      stretch !important;

    height:
      100% !important;

    min-height:
      100% !important;

    display:
      grid !important;

    grid-template-rows:
      auto
      minmax(0,1fr)
      !important;

    align-content:
      stretch !important;

    gap:
      8px !important;
  }


  /* Real chart retains the approved R5B dimensions. */

  body.tpx-studio-active
  #tpV07ChartDialog.tpx-inline {
    align-self:
      start !important;

    height:
      auto !important;
  }


  /* ----------------------------------------------------------
     TP AI — stretch panel itself
     ---------------------------------------------------------- */

  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline {
    align-self:
      stretch !important;

    height:
      100% !important;

    min-height:
      100% !important;

    display:
      flex !important;

    flex-direction:
      column !important;
  }


  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline
  .studio-dialog-heading {
    flex:
      0 0 auto !important;
  }


  /*
     The existing AI workspace remains functional at the top
     while its panel continues visually through the column.
  */

  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline
  .tp-ai-studio {
    flex:
      1 1 auto !important;

    min-height:
      0 !important;
  }


  /*
     Slight visual continuation so the large panel doesn't
     look like an empty box once its real controls finish.
  */

  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline::after {
    content:
      "";

    flex:
      1 1 auto;

    min-height:
      70px;

    pointer-events:
      none;

    background:
      radial-gradient(
        circle at 35% 5%,
        rgba(26,107,158,.045),
        transparent 34%
      );
  }


  /* ----------------------------------------------------------
     Panel continuity
     ---------------------------------------------------------- */

  body.tpx-studio-active
  .studio-summary,

  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline {
    background:
      linear-gradient(
        180deg,
        rgba(8,27,43,.985),
        rgba(4,17,28,.99)
      ) !important;

    border-color:
      rgba(57,156,216,.25) !important;

    box-shadow:
      0 17px 44px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.018)
      !important;
  }

}


/* ------------------------------------------------------------
   Do not force this workstation behaviour on tablets/mobile.
   ------------------------------------------------------------ */

@media (max-width:1260px) {

  body.tpx-studio-active
  .studio-summary,

  body.tpx-studio-active
  #tpV07AiDialog.tpx-inline {
    min-height:
      auto !important;

    height:
      auto !important;
  }

}


/* TP_REFERENCE_STUDIO_R5C_FULL_HEIGHT_END */