:root{color-scheme:dark;--bg:#090d13;--card:#111925;--card2:#0e151f;--line:#253244;--text:#eef3f8;--muted:#91a0b3;--accent:#62b5d9;--warn:#e8bd68;--bad:#ef8181}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}.shell{max-width:760px;margin:0 auto;padding:22px 16px 48px}.top{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}.brand{display:flex;align-items:center;gap:11px}.logo{width:44px;height:44px;border:1px solid #3d536a;border-radius:13px;display:grid;place-items:center;font-weight:800;letter-spacing:-1px;background:#101a26}.brand h1{font-size:17px;margin:0}.brand p{margin:3px 0 0;color:var(--muted);font-size:11px}.pill{font-size:10px;border:1px solid var(--line);border-radius:999px;padding:7px 9px;color:var(--muted)}.card{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:18px;margin-bottom:13px}.hero{background:linear-gradient(160deg,#111925,#0d1417)}.eyebrow{font-size:10px;letter-spacing:.12em;color:var(--accent);font-weight:800}.hero h2{font-size:24px;line-height:1.13;margin:10px 0}.hero p,.fine{color:var(--muted);line-height:1.55;font-size:13px}.card h3{margin:0 0 14px;font-size:14px}.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.status-grid div{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0}.status-grid span{display:block;font-size:10px;color:var(--muted)}.status-grid b{display:block;margin-top:5px;font-size:12px;overflow-wrap:anywhere}.message{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:12px;color:var(--muted);font-size:12px;line-height:1.45}.message.ok{border-color:#284c5b;color:#9ccce0}.message.bad{border-color:#603838;color:#f0aaaa}.actions{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}button{min-height:44px;border:0;border-radius:12px;padding:0 16px;font-size:13px;font-weight:750;cursor:pointer;background:var(--accent);color:#070d10}button.secondary{background:#162131;color:var(--text);border:1px solid var(--line)}button:disabled{opacity:.45;cursor:not-allowed}ol{margin:0;padding-left:21px;color:#c6d0dc;font-size:12px;line-height:1.65}code{font-family:ui-monospace,monospace}@media(max-width:520px){.top{align-items:flex-start}.status-grid{grid-template-columns:1fr}.hero h2{font-size:21px}.pill{display:none}}
.pilot{display:block;margin-top:12px}.pilot span{display:block;color:var(--muted);font-size:10px;margin-bottom:6px}.pilot input{width:100%;min-height:44px;background:#0c131c;color:var(--text);border:1px solid var(--line);border-radius:11px;padding:0 12px;font-size:16px;outline:none}.pilot input:focus{border-color:var(--accent)}

.pilot select{
  width:100%;
  min-height:44px;
  background:#0c131c;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:11px;
  padding:0 12px;
  font-size:16px;
  outline:none;
}
.pilot select:focus{border-color:var(--accent)}

.monitor-item{
  margin-top:12px;
  background:var(--card2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}
.monitor-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.monitor-head strong{
  font-size:14px;
}
.monitor-badge{
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 8px;
  font-size:10px;
  font-weight:750;
}
.monitor-badge.active{
  border-color:#284c5b;
  color:#9ccce0;
}
.monitor-badge.inactive{
  border-color:#603838;
  color:#f0aaaa;
}
.monitor-meta{
  margin-top:10px;
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}
.monitor-state{
  margin-top:10px;
  font-size:12px;
  overflow-wrap:anywhere;
}
.builder-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.builder-notifications{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.builder-notifications label{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:0 10px;
  background:var(--card2);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  font-size:12px;
}

.builder-notifications input{
  width:16px;
  height:16px;
}

.builder-version{
  margin-top:10px;
  padding:12px;
  background:var(--card2);
  border:1px solid var(--line);
  border-radius:12px;
}

.builder-version-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.builder-version-meta{
  margin-top:7px;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

@media (max-width:600px){
  .builder-grid{
    grid-template-columns:1fr;
  }
}
.activity-highlight{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}
.activity-details{
  margin-top:12px;
  color:var(--muted);
  font-size:11px;
}
.activity-details summary{
  cursor:pointer;
  color:var(--text);
  font-weight:700;
}
.activity-evidence{
  margin:10px 0 0;
  padding:12px;
  max-width:100%;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:#0c131c;
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

.billing-catalog-head{
  margin-top:20px;
}

.billing-catalog-head h3{
  margin-bottom:5px;
}

.billing-catalog-head .fine{
  margin-top:0;
}

.billing-plans{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.billing-plan{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:14px;
  background:var(--card2);
  border:1px solid var(--line);
  border-radius:14px;
}

.billing-plan.current{
  border-color:#284c5b;
  box-shadow:0 0 0 1px #284c5b;
}

.billing-plan-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.billing-plan-head strong{
  font-size:14px;
}

.billing-plan-badge{
  flex:0 0 auto;
  padding:4px 7px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.05em;
}

.billing-plan-price{
  display:flex;
  align-items:baseline;
  gap:5px;
}

.billing-plan-price strong{
  font-size:21px;
}

.billing-plan-price span{
  color:var(--muted);
  font-size:11px;
}

.billing-plan button{
  width:100%;
  margin-top:auto;
}

@media (max-width:600px){
  .billing-plans{
    grid-template-columns:1fr;
  }
}


/* === TP PRODUCT SHELL 20260927 === */

html{
  min-height:100%;
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 80% -10%,rgba(98,181,217,.07),transparent 28rem),
    #090d13;
}

#passwordResetCard{
  width:min(560px,calc(100% - 32px));
  margin:48px auto;
}

#passwordResetCard:not([hidden]) ~ .app-layout{
  display:none;
}

.app-layout{
  min-height:100vh;
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
}

.app-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:24px 18px 20px;
  border-right:1px solid rgba(145,160,179,.13);
  background:rgba(10,15,22,.92);
  backdrop-filter:blur(18px);
  display:flex;
  flex-direction:column;
  z-index:20;
}

.app-brand{
  min-height:58px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 8px 22px;
}

.app-logo{
  width:43px;
  height:43px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#182535,#0c151f);
  border:1px solid #32475d;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  font-size:14px;
  font-weight:850;
  letter-spacing:-.06em;
}

.app-brand strong{
  display:block;
  font-size:14px;
  letter-spacing:-.01em;
}

.app-brand span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}

.desktop-nav{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.nav-item{
  width:100%;
  min-height:46px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:11px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:#8f9caf;
  font-weight:650;
  text-align:left;
}

.nav-item svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav-item:hover{
  color:#e8eef5;
  background:#101923;
}

.nav-item.active{
  color:#dff3fb;
  border-color:rgba(98,181,217,.19);
  background:rgba(98,181,217,.09);
}

.sidebar-footer{
  margin-top:auto;
  padding:14px 10px 2px;
  border-top:1px solid rgba(145,160,179,.11);
  display:flex;
  gap:9px;
  align-items:center;
}

.sidebar-status-dot,
.service-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(98,181,217,.08);
  flex:0 0 auto;
}

.sidebar-footer strong{
  display:block;
  font-size:11px;
}

.sidebar-footer small{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:2px;
}

.app-main{
  min-width:0;
}

.app-topbar{
  min-height:88px;
  position:sticky;
  top:0;
  z-index:15;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px clamp(22px,4vw,54px);
  border-bottom:1px solid rgba(145,160,179,.1);
  background:rgba(9,13,19,.86);
  backdrop-filter:blur(18px);
}

.view-eyebrow{
  display:block;
  margin-bottom:4px;
  color:var(--accent);
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
}

.app-topbar h1{
  margin:0;
  font-size:23px;
  line-height:1.1;
  letter-spacing:-.035em;
}

.topbar-service{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:11px;
}

.app-content{
  width:min(1220px,100%);
  margin:0 auto;
  padding:34px clamp(22px,4vw,54px) 70px;
}

.app-view[hidden]{
  display:none !important;
}

.app-view{
  animation:tpViewIn .18s ease-out;
}

@keyframes tpViewIn{
  from{
    opacity:0;
    transform:translateY(3px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

.app-view > .card,
.view-stack > .card{
  margin-bottom:18px;
}

.hero{
  position:relative;
  overflow:hidden;
  min-height:190px;
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 80% 15%,rgba(98,181,217,.13),transparent 17rem),
    linear-gradient(145deg,#111a26,#0d161e);
}

.hero::after{
  content:"TP";
  position:absolute;
  right:25px;
  top:50%;
  transform:translateY(-50%);
  font-size:124px;
  font-weight:900;
  letter-spacing:-.1em;
  color:rgba(255,255,255,.025);
  pointer-events:none;
}

.hero h2{
  max-width:690px;
  margin:9px 0 10px;
  font-size:clamp(27px,4vw,43px);
  line-height:1.04;
  letter-spacing:-.045em;
}

.hero p{
  max-width:650px;
  margin:0;
  font-size:14px;
}

.dashboard-metrics{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:11px;
  margin:18px 0;
}

.metric-card{
  min-width:0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(17,25,37,.72);
}

.metric-label{
  display:block;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:750;
}

.metric-card strong{
  display:block;
  margin-top:8px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
  letter-spacing:-.025em;
}

.metric-card small{
  display:block;
  margin-top:5px;
  color:#657486;
  font-size:9px;
}

.dashboard-columns{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(290px,.55fr);
  gap:18px;
}

.dashboard-primary > .card,
.quick-actions-card{
  height:100%;
  margin-bottom:0;
}

.quick-actions-card h3{
  margin-top:7px;
}

.quick-action{
  width:100%;
  min-height:65px;
  padding:11px 12px;
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:#0d151f;
  border:1px solid var(--line);
  color:var(--text);
  text-align:left;
}

.quick-action:hover{
  border-color:#3a5067;
  background:#111c28;
}

.quick-action span{
  min-width:0;
}

.quick-action strong{
  display:block;
  font-size:12px;
}

.quick-action small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
  font-weight:500;
  line-height:1.35;
}

.quick-action b{
  color:var(--accent);
  font-size:22px;
  font-weight:400;
}

#view-strategies,
#view-monitors,
#view-activity,
#view-account{
  max-width:980px;
}

#strategyBuilderCard,
#monitorsCard,
#activityCard,
#accountCard,
#billingCard{
  padding:24px;
}

.view-stack{
  display:grid;
  gap:18px;
}

.view-stack > .card{
  margin:0;
}

.mobile-nav{
  display:none;
}


@media (max-width:1100px){

  .dashboard-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .dashboard-columns{
    grid-template-columns:1fr;
  }

}


@media (max-width:900px){

  .app-layout{
    display:block;
  }

  .app-sidebar{
    display:none;
  }

  .app-topbar{
    min-height:72px;
    padding:13px 18px;
  }

  .app-topbar h1{
    font-size:20px;
  }

  .topbar-service{
    max-width:140px;
    font-size:9px;
  }

  .app-content{
    padding:20px 14px calc(92px + env(safe-area-inset-bottom));
  }

  .mobile-nav{
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    z-index:50;
    min-height:64px;
    padding:7px 6px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    border:1px solid #263445;
    border-radius:18px;
    background:rgba(14,21,31,.96);
    backdrop-filter:blur(20px);
    box-shadow:0 16px 48px rgba(0,0,0,.38);
  }

  .mobile-nav button{
    min-width:0;
    min-height:49px;
    padding:5px 2px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:3px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:#75859a;
  }

  .mobile-nav button.active{
    color:var(--accent);
    background:rgba(98,181,217,.08);
  }

  .mobile-nav svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .mobile-nav span{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:8px;
    font-weight:700;
  }

  .hero{
    min-height:175px;
    padding:23px 20px;
  }

  .hero h2{
    font-size:29px;
  }

  .hero::after{
    font-size:88px;
  }

}


@media (max-width:640px){

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

  .metric-card:first-child{
    grid-column:1 / -1;
  }

  #strategyBuilderCard,
  #monitorsCard,
  #activityCard,
  #accountCard,
  #billingCard{
    padding:18px;
  }

  .status-grid{
    grid-template-columns:1fr 1fr;
  }

}


@media (max-width:420px){

  .dashboard-metrics{
    grid-template-columns:1fr 1fr;
  }

  .metric-card{
    padding:14px;
  }

  .topbar-service{
    display:none;
  }

}


/* === TP DESKTOP POLISH 20260927-4 === */

/*
 * Desktop composition
 */

@media (min-width:901px){

  .app-layout{
    grid-template-columns:232px minmax(0,1fr);
  }

  .app-sidebar{
    padding:22px 16px 18px;
  }

  .app-brand{
    padding:0 7px 24px;
  }

  .app-brand strong{
    font-size:14px;
  }

  .desktop-nav{
    gap:6px;
  }

  .nav-item{
    min-height:48px;
    padding:0 13px;
    font-size:12px;
    border-radius:12px;
  }

  .nav-item svg{
    width:20px;
    height:20px;
  }

  .app-topbar{
    min-height:76px;
    padding:
      14px
      clamp(28px,3.2vw,50px);
  }

  .app-content{
    width:min(1360px,100%);
    padding:
      30px
      clamp(28px,3.2vw,50px)
      72px;
  }

  .hero{
    min-height:205px;
    padding:34px 32px;
  }

  .hero h2{
    max-width:760px;
    font-size:clamp(32px,3vw,43px);
    line-height:1.035;
  }

  .hero p{
    max-width:700px;
    font-size:14px;
    line-height:1.65;
  }

  .dashboard-metrics{
    gap:12px;
    margin:16px 0;
  }

  .metric-card{
    min-height:96px;
    padding:17px;
    border-radius:15px;
  }

  .metric-label{
    font-size:9px;
  }

  .metric-card strong{
    margin-top:10px;
    font-size:17px;
  }

  .metric-card small{
    margin-top:7px;
    font-size:9px;
  }

  .dashboard-columns{
    grid-template-columns:
      minmax(0,1.65fr)
      minmax(300px,.65fr);
    gap:16px;
  }

  .dashboard-primary > .card,
  .quick-actions-card{
    min-height:270px;
  }

  .quick-actions-card{
    padding:20px;
  }

  .quick-action{
    min-height:70px;
    padding:12px 13px;
  }

  .quick-action strong{
    font-size:12px;
  }

  .quick-action small{
    font-size:10px;
  }

}


/*
 * General hierarchy
 */

.card{
  box-shadow:
    0 1px 0 rgba(255,255,255,.015),
    0 10px 40px rgba(0,0,0,.08);
}

.card h3{
  font-size:15px;
  letter-spacing:-.015em;
}

.status-grid{
  gap:10px;
}

.status-grid div{
  padding:13px;
}

.status-grid span{
  font-size:9px;
}

.status-grid b{
  margin-top:6px;
  font-size:12px;
}

.message{
  padding:13px;
  line-height:1.5;
}

.actions{
  gap:10px;
}

button{
  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .16s ease;
}

button:not(:disabled):active{
  transform:translateY(1px);
}

.service-dot.offline{
  background:#ef8181;
  box-shadow:0 0 0 4px rgba(239,129,129,.08);
}


/*
 * Large desktop: make use of the available canvas.
 */

@media (min-width:1450px){

  .app-content{
    width:min(1420px,100%);
  }

  .dashboard-metrics{
    gap:14px;
  }

}


/* === TP REAL TRADING DASHBOARD 20260927-6 === */

.dashboard-trading-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  margin-bottom:16px;
}

.dashboard-watch-card,
.dashboard-activity-card{
  min-width:0;
  padding:20px;
}

.dashboard-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}

.dashboard-section-head h3{
  margin:5px 0 0;
}

.dashboard-link{
  flex:0 0 auto;
  min-height:34px;
  padding:7px 11px;
  font-size:10px;
}

.dashboard-feed{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.dashboard-feed-item{
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0d151f;
}

.dashboard-feed-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.dashboard-feed-head strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}

.dashboard-feed-meta{
  margin-top:5px;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}

.dashboard-feed-state{
  margin-top:7px;
  color:#c8d4e2;
  font-size:10px;
  line-height:1.45;
}

.dashboard-empty{
  margin:0;
  padding:22px 14px;
  border:1px dashed #273546;
  border-radius:12px;
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
  text-align:center;
}

.dashboard-event-time{
  flex:0 0 auto;
  color:#718196;
  font-size:8px;
  white-space:nowrap;
}

@media (max-width:1000px){

  .dashboard-trading-grid{
    grid-template-columns:1fr;
  }

}

@media (max-width:640px){

  .dashboard-section-head{
    gap:10px;
  }

  .dashboard-link{
    padding:6px 9px;
  }

  .dashboard-feed-item{
    padding:11px;
  }

}


/* === TP MOBILE COMPACTION 20260927-7 === */

/*
 * Mobile-only density pass.
 * Desktop layout remains untouched.
 */

@media (max-width:640px){

  .app-topbar{
    min-height:72px;
    padding:12px 22px;
  }

  .app-topbar h1{
    font-size:25px;
  }

  .view-eyebrow{
    font-size:10px;
  }

  .topbar-service{
    font-size:10px;
  }


  .app-content{
    padding:
      18px
      16px
      calc(112px + env(safe-area-inset-bottom));
  }


  .hero{
    min-height:auto;
    padding:25px 22px 26px;
    border-radius:18px;
  }

  .hero .eyebrow{
    font-size:10px;
  }

  .hero h2{
    max-width:none;
    margin-top:15px;
    font-size:30px;
    line-height:1.08;
    letter-spacing:-.035em;
  }

  .hero p{
    margin-top:15px;
    max-width:none;
    font-size:14px;
    line-height:1.5;
  }


  .dashboard-metrics{
    gap:9px;
    margin:14px 0;
  }

  .metric-card{
    min-height:101px;
    padding:14px;
    border-radius:14px;
  }

  .metric-card:first-child{
    min-height:96px;
  }

  .metric-label{
    font-size:9px;
  }

  .metric-card strong{
    margin-top:8px;
    font-size:17px;
  }

  .metric-card small{
    margin-top:6px;
    font-size:9px;
    line-height:1.35;
  }


  .dashboard-trading-grid{
    gap:11px;
    margin-bottom:11px;
  }

  .dashboard-watch-card,
  .dashboard-activity-card{
    padding:16px;
    border-radius:17px;
  }

  .dashboard-section-head{
    margin-bottom:12px;
  }

  .dashboard-section-head h3{
    font-size:17px;
  }

  .dashboard-link{
    min-height:38px;
    padding:7px 11px;
    font-size:10px;
  }

  .dashboard-empty{
    padding:18px 11px;
    font-size:10px;
  }


  .dashboard-columns{
    gap:11px;
  }

  .dashboard-primary > .card{
    min-height:auto;
    padding:16px;
  }

  .dashboard-primary > .card h3{
    font-size:18px;
  }


  .status-grid{
    gap:8px;
  }

  .status-grid div{
    padding:11px;
    min-height:78px;
  }

  .status-grid span{
    font-size:9px;
  }

  .status-grid b{
    margin-top:5px;
    font-size:13px;
  }


  .message{
    padding:11px;
    font-size:11px;
    line-height:1.45;
  }


  .actions{
    gap:8px;
  }

  .actions button{
    min-height:44px;
    padding:9px 14px;
    font-size:12px;
  }


  .quick-actions-card{
    min-height:auto;
    padding:16px;
    border-radius:17px;
  }

  .quick-actions-card h3{
    font-size:18px;
  }

  .quick-action{
    min-height:61px;
    padding:10px 12px;
  }

  .quick-action strong{
    font-size:12px;
  }

  .quick-action small{
    margin-top:3px;
    font-size:9px;
  }


  /*
   * Fixed mobile navigation stays prominent,
   * but consumes less vertical viewport.
   */

  .mobile-nav{
    left:12px;
    right:12px;
    bottom:
      calc(
        9px +
        env(safe-area-inset-bottom)
      );
    padding:6px;
    border-radius:20px;
  }

  .mobile-nav button{
    min-height:58px;
    padding:6px 3px;
    font-size:9px;
  }

  .mobile-nav svg{
    width:21px;
    height:21px;
  }

}


/*
 * Very narrow phones.
 */

@media (max-width:390px){

  .app-content{
    padding-left:13px;
    padding-right:13px;
  }

  .hero{
    padding:22px 19px 23px;
  }

  .hero h2{
    font-size:28px;
  }

  .hero p{
    font-size:13px;
  }

  .metric-card{
    padding:12px;
  }

  .dashboard-watch-card,
  .dashboard-activity-card,
  .dashboard-primary > .card,
  .quick-actions-card{
    padding:14px;
  }

}



/* === TP LANGUAGE SWITCHER 20260927-8 === */

.topbar-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width:0;
}

.language-switcher{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(0,0,0,.18);
  flex:0 0 auto;
}

.language-switcher button{
  min-width:34px;
  min-height:30px;
  padding:5px 8px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:inherit;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1;
  cursor:pointer;
}

.language-switcher button:hover{
  background:rgba(255,255,255,.07);
}

.language-switcher button[aria-pressed="true"]{
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

@media (max-width:640px){

  .topbar-tools{
    gap:7px;
  }

  .language-switcher{
    padding:2px;
  }

  .language-switcher button{
    min-width:30px;
    min-height:28px;
    padding:4px 6px;
    font-size:10px;
  }

}



/* === TP INTERACTIVE LOCALE CONTROLS 20260927-9 === */

.topbar-tools{
  position:relative;
  z-index:20;
  pointer-events:auto;
}

.language-switcher{
  position:relative;
  z-index:21;
  pointer-events:auto;
  user-select:none;
  -webkit-user-select:none;
}

.language-switcher button{
  position:relative;
  z-index:22;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:auto;
  min-width:58px;
  min-height:32px;
  pointer-events:auto;
  touch-action:manipulation;
}

.language-switcher button,
.language-switcher button *{
  cursor:pointer;
}

.locale-flag{
  display:inline-block;
  font-size:15px;
  line-height:1;
  pointer-events:none;
}

.locale-code{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  line-height:1;
  pointer-events:none;
}

@media (max-width:640px){

  .language-switcher button{
    min-width:52px;
    min-height:30px;
    gap:4px;
  }

  .locale-flag{
    font-size:14px;
  }

  .locale-code{
    font-size:10px;
  }

}



/* === TP SVG LOCALE FLAGS 20260927-10 === */

.language-switcher .locale-flag{
  display:block;
  width:19px;
  height:13px;
  flex:0 0 19px;
  border-radius:2px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18);
  pointer-events:none;
}

.language-switcher .locale-flag-es{
  height:13px;
}

@media (max-width:640px){

  .language-switcher .locale-flag{
    width:18px;
    height:12px;
    flex-basis:18px;
  }

}

/* ============================================================
   PRODUCT UI v1.2 - PUBLIC HOME
   ============================================================ */

.public-home{
  display:grid;
  gap:24px;
}

.public-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);
  gap:34px;
  align-items:stretch;
  padding:42px;
  border:1px solid var(--line);
  border-radius:22px;
  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(68,177,224,.15),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #101a27 0%,
      #0d151f 55%,
      #0d181d 100%
    );
}

.public-hero::after{
  content:"TP";
  position:absolute;
  right:-18px;
  bottom:-52px;
  color:rgba(255,255,255,.018);
  font-size:230px;
  font-weight:900;
  letter-spacing:-20px;
  pointer-events:none;
}

.public-hero-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:10px 0;
}

.public-hero h2{
  max-width:820px;
  margin:12px 0 18px;
  color:var(--text);
  font-size:clamp(40px,4.6vw,70px);
  line-height:.98;
  letter-spacing:-.045em;
}

.public-hero-lead{
  max-width:710px;
  margin:0;
  color:#aebdce;
  font-size:16px;
  line-height:1.7;
}

.public-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

.public-hero-actions button,
.public-bottom-cta button{
  min-height:46px;
  padding-inline:20px;
}

.public-trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:28px;
  color:var(--muted);
  font-size:11px;
}

.public-trust-row > span{
  display:flex;
  align-items:center;
  gap:7px;
}

.public-trust-row b{
  color:var(--accent);
  font-size:12px;
}

.public-market-preview{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:23px;
  border:1px solid #26384b;
  border-radius:18px;
  background:rgba(7,13,20,.76);
  box-shadow:
    0 24px 70px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.02);
}

.public-preview-top{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}

.public-preview-label{
  display:block;
  margin-bottom:8px;
  color:var(--accent);
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
}

.public-preview-top h3{
  margin:0;
  font-size:20px;
}

.public-preview-top small{
  display:block;
  margin-top:4px;
  color:var(--muted);
}

.public-monitoring-pill{
  flex:0 0 auto;
  padding:7px 9px;
  border:1px solid rgba(68,177,224,.35);
  border-radius:999px;
  background:rgba(68,177,224,.08);
  color:var(--accent);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}

.public-chart-mark{
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:9px;
  height:92px;
  margin:26px 0 22px;
  padding:0 10px 12px;
  border-bottom:1px solid #223244;
}

.public-chart-mark::before,
.public-chart-mark::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  border-top:1px dashed rgba(120,151,180,.16);
}

.public-chart-mark::before{
  top:25%;
}

.public-chart-mark::after{
  top:58%;
}

.public-chart-mark span{
  position:relative;
  z-index:1;
  display:block;
  width:13px;
  border-radius:3px 3px 1px 1px;
  background:#50667d;
}

.public-chart-mark span:nth-child(1){
  height:30px;
}

.public-chart-mark span:nth-child(2){
  height:52px;
}

.public-chart-mark span:nth-child(3){
  height:41px;
}

.public-chart-mark span:nth-child(4){
  height:67px;
  background:#55b3dc;
}

.public-chart-mark span:nth-child(5){
  height:48px;
  background:#3c8cae;
}

.public-rule-list{
  display:grid;
  gap:9px;
}

.public-rule-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  min-height:48px;
  padding:10px 12px;
  border:1px solid #1f2d3d;
  border-radius:11px;
  background:rgba(16,25,37,.72);
}

.public-rule-row > span{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:10px;
}

.public-rule-row strong{
  color:#dbe7f3;
  font-size:10px;
  text-align:right;
}

.public-rule-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#58687a;
}

.public-rule-dot.ready{
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(68,177,224,.08);
}

.public-rule-dot.waiting{
  background:#d6ac66;
  box-shadow:0 0 0 4px rgba(214,172,102,.07);
}

.public-preview-foot{
  margin:17px 2px 0;
  color:#74879b;
  font-size:10px;
  line-height:1.6;
}

.public-how{
  scroll-margin-top:100px;
  padding:10px 0 0;
}

.public-section-heading{
  max-width:680px;
  margin-bottom:18px;
}

.public-section-heading h3{
  margin:7px 0 8px;
  font-size:27px;
  letter-spacing:-.025em;
}

.public-section-heading p{
  margin:0;
  color:var(--muted);
  font-size:12px;
}

.public-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.public-step{
  min-height:180px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--card);
}

.public-step-number{
  display:block;
  margin-bottom:27px;
  color:var(--accent);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.public-step h4{
  margin:0 0 8px;
  color:var(--text);
  font-size:14px;
}

.public-step p{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.65;
}

.public-bottom-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding:26px 28px;
  background:
    linear-gradient(
      105deg,
      rgba(68,177,224,.055),
      transparent 36%
    ),
    var(--card);
}

.public-bottom-cta h3{
  margin:6px 0;
  font-size:22px;
}

.public-bottom-cta p{
  margin:0;
  color:var(--muted);
  font-size:11px;
}

@media(max-width:1100px){
  .public-hero{
    grid-template-columns:1fr;
  }

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

@media(max-width:700px){
  .public-hero{
    gap:24px;
    padding:25px 20px;
    border-radius:17px;
  }

  .public-hero h2{
    font-size:38px;
  }

  .public-hero-lead{
    font-size:14px;
  }

  .public-hero-actions{
    flex-direction:column;
  }

  .public-hero-actions button{
    width:100%;
  }

  .public-trust-row{
    display:grid;
    gap:10px;
  }

  .public-steps{
    grid-template-columns:1fr;
  }

  .public-step{
    min-height:0;
  }

  .public-step-number{
    margin-bottom:16px;
  }

  .public-bottom-cta{
    align-items:stretch;
    flex-direction:column;
  }

  .public-bottom-cta button{
    width:100%;
  }
}

/* ============================================================
   PRODUCT UI v1.2 - TP PUBLIC SHELL
   ============================================================ */

.public-topbar-left,
.public-auth-actions{
  display:none;
}

body.public-shell-active .app-layout{
  grid-template-columns:1fr;
}

body.public-shell-active .app-sidebar{
  display:none;
}

body.public-shell-active .topbar-view-heading{
  display:none;
}

body.public-shell-active .app-main{
  min-width:0;
  width:100%;
}

body.public-shell-active .app-topbar{
  min-height:74px;
  padding-left:clamp(22px,4vw,64px);
  padding-right:clamp(22px,4vw,64px);
}

body.public-shell-active .public-topbar-left{
  display:flex;
  align-items:center;
  gap:34px;
}

body.public-shell-active .public-auth-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-right:4px;
}

body.public-shell-active .topbar-service{
  display:none;
}

body.public-shell-active .app-content{
  width:min(100%,1400px);
  margin-inline:auto;
  padding-left:clamp(22px,4vw,64px);
  padding-right:clamp(22px,4vw,64px);
}

.public-top-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:var(--text);
}

.public-top-brand:hover{
  background:transparent;
  border-color:transparent;
  transform:none;
}

.public-top-logo{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid #2b4259;
  border-radius:11px;
  background:#101c29;
  color:#e9f1f8;
  font-size:11px;
  font-weight:900;
  letter-spacing:-.02em;
}

.public-top-brand-copy{
  display:grid;
  gap:1px;
  text-align:left;
}

.public-top-brand-copy strong{
  color:#eef5fb;
  font-size:12px;
}

.public-top-brand-copy small{
  color:var(--muted);
  font-size:8px;
}

.public-top-nav{
  display:flex;
  align-items:center;
  gap:4px;
}

.public-top-nav button{
  min-height:34px;
  padding:7px 11px;
  border:0;
  background:transparent;
  color:#8496a8;
  font-size:10px;
  font-weight:700;
  box-shadow:none;
}

.public-top-nav button:hover{
  background:rgba(255,255,255,.035);
  color:#dce8f2;
  transform:none;
}

.public-header-plans{
  min-height:36px;
  padding:7px 13px;
  border:1px solid #26384a;
  background:transparent;
  color:#d9e5ef;
}

.public-header-access{
  min-height:36px;
  padding:7px 14px;
}

.public-how-link{
  width:max-content;
  margin-top:13px;
  padding:3px 0;
  border:0;
  background:transparent;
  color:#7f92a5;
  font-size:10px;
  font-weight:700;
  box-shadow:none;
}

.public-how-link:hover{
  border-color:transparent;
  background:transparent;
  color:var(--accent);
  transform:none;
}

body.public-shell-active .public-hero{
  grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr);
  gap:30px;
  padding:46px;
}

body.public-shell-active .public-hero h2{
  max-width:760px;
}

.public-visual-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:420px;
}

.public-chart-panel{
  position:relative;
  min-height:380px;
  padding:22px;
  overflow:hidden;
  border:1px solid #223342;
  border-radius:20px;
  background:
    radial-gradient(circle at 82% 9%, rgba(68,177,224,.06), transparent 25%),
    linear-gradient(180deg, rgba(16,24,35,.98), rgba(12,18,28,.98));
}

.public-chart-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:18px;
}

.public-chart-head h3{
  margin:0;
  font-size:21px;
}

.public-chart-head small{
  display:block;
  margin-top:4px;
  color:var(--muted);
}

.public-chart-canvas{
  position:relative;
  height:210px;
  margin-top:10px;
  border:1px solid #1f2d3d;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0)),
    #111b27;
  overflow:hidden;
}

.public-chart-grid::before,
.public-chart-grid::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  border-top:1px dashed rgba(131,154,177,.16);
}

.public-chart-grid::before{
  top:34%;
}

.public-chart-grid::after{
  top:68%;
}

.public-chart-grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.03) 1px,
      transparent 1px
    );
  background-size:56px 100%;
}

.public-context-zone{
  position:absolute;
  left:20px;
  right:150px;
  top:78px;
  height:42px;
  border:1px dashed rgba(68,177,224,.45);
  border-radius:10px;
  background:rgba(68,177,224,.08);
}

.public-context-zone span{
  position:absolute;
  left:10px;
  top:-9px;
  padding:1px 6px;
  border-radius:999px;
  background:#0e1a25;
  color:var(--accent);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}

.public-candles{
  position:absolute;
  inset:18px 18px 18px 18px;
}

.candle{
  position:absolute;
  width:14px;
  display:flex;
  justify-content:center;
}

.candle i{
  position:absolute;
  width:2px;
  background:#8aa0b7;
  border-radius:999px;
}

.candle span{
  position:absolute;
  width:12px;
  border-radius:3px;
}

.candle.up span{
  background:#48acd7;
}

.candle.down span{
  background:#7b8ea3;
}

.candle.highlight span{
  box-shadow:0 0 0 4px rgba(72,172,215,.08);
}

.candle.confirm span{
  background:#d7a65d;
  box-shadow:0 0 0 4px rgba(215,166,93,.08);
}

.c1{left:12px;bottom:46px;}
.c1 i{height:58px;bottom:-14px;}
.c1 span{height:24px;bottom:4px;}

.c2{left:48px;bottom:62px;}
.c2 i{height:72px;bottom:-16px;}
.c2 span{height:32px;bottom:6px;}

.c3{left:84px;bottom:54px;}
.c3 i{height:66px;bottom:-18px;}
.c3 span{height:20px;bottom:10px;}

.c4{left:122px;bottom:70px;}
.c4 i{height:78px;bottom:-18px;}
.c4 span{height:34px;bottom:4px;}

.c5{left:162px;bottom:78px;}
.c5 i{height:84px;bottom:-20px;}
.c5 span{height:18px;bottom:18px;}

.c6{left:204px;bottom:74px;}
.c6 i{height:88px;bottom:-20px;}
.c6 span{height:36px;bottom:4px;}

.c7{left:248px;bottom:82px;}
.c7 i{height:76px;bottom:-18px;}
.c7 span{height:20px;bottom:12px;}

.c8{left:292px;bottom:94px;}
.c8 i{height:94px;bottom:-22px;}
.c8 span{height:40px;bottom:8px;}

.c9{left:338px;bottom:118px;}
.c9 i{height:66px;bottom:-16px;}
.c9 span{height:24px;bottom:8px;}

.public-chart-tag{
  position:absolute;
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border:1px solid #233445;
  border-radius:10px;
  background:rgba(13,21,31,.92);
  color:#dce7f0;
  font-size:9px;
  font-weight:700;
}

.public-chart-tag b{
  width:7px;
  height:7px;
  border-radius:50%;
  display:block;
  background:var(--accent);
}

.tag-monitor{
  left:18px;
  bottom:18px;
}

.tag-confirm{
  right:114px;
  top:40px;
}

.tag-confirm b{
  background:#d7a65d;
}

.tag-alert{
  right:18px;
  bottom:18px;
}

.tag-alert b{
  background:#72b7ff;
}

.public-state-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}

.public-state-strip > div{
  padding:12px 12px 10px;
  border:1px solid #1f2d3d;
  border-radius:12px;
  background:rgba(16,24,35,.88);
}

.public-state-strip small{
  display:block;
  color:#7f92a5;
  font-size:9px;
  margin-bottom:6px;
}

.public-state-strip strong{
  color:#e5edf5;
  font-size:11px;
}

.public-phone-card{
  position:absolute;
  right:-8px;
  bottom:-18px;
  z-index:3;
}

.public-phone-frame{
  width:188px;
  padding:10px;
  border:1px solid #2a3a49;
  border-radius:28px;
  background:#0b1118;
  box-shadow:0 26px 70px rgba(0,0,0,.45);
}

.public-phone-notch{
  width:72px;
  height:15px;
  margin:0 auto 10px;
  border-radius:999px;
  background:#18232d;
}

.public-phone-screen{
  min-height:280px;
  padding:10px;
  border-radius:20px;
  background:
    linear-gradient(180deg, #e9edf1 0%, #dfe8ed 100%);
  color:#0f1a24;
}

.public-phone-status{
  display:flex;
  justify-content:space-between;
  font-size:9px;
  font-weight:800;
}

.public-phone-spacer{
  height:44px;
}

.public-push-card{
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 30px rgba(12,22,32,.14);
  backdrop-filter:blur(6px);
}

.public-push-app{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  color:#526375;
}

.public-push-app strong{
  color:#1e2d39;
}

.public-push-app time{
  margin-left:auto;
}

.public-push-logo{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:8px;
  background:#101c29;
  color:#f1f7fb;
  font-size:8px;
  font-weight:900;
}

.public-push-card h4{
  margin:11px 0 6px;
  color:#10202d;
  font-size:12px;
}

.public-push-card p{
  margin:0;
  color:#4c6072;
  font-size:10px;
  line-height:1.45;
}

.public-plans{
  display:grid;
  gap:18px;
  padding-top:4px;
}

.public-plan-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.public-plan-card{
  min-height:178px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
}

.public-plan-card small{
  display:block;
  margin-bottom:24px;
  color:var(--accent);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}

.public-plan-card h4{
  margin:0 0 10px;
  font-size:15px;
}

.public-plan-card p{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.65;
}

.public-plans-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.public-bottom-cta{
  margin-top:2px;
}

@media(max-width:1160px){
  body.public-shell-active .public-hero{
    grid-template-columns:1fr;
  }

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

  .public-phone-card{
    position:relative;
    right:auto;
    bottom:auto;
    margin-top:16px;
    align-self:flex-end;
  }
}

@media(max-width:900px){
  body.public-shell-active .public-top-nav{
    display:none;
  }
}

@media(max-width:760px){
  body.public-shell-active .app-topbar{
    min-height:64px;
    padding-left:14px;
    padding-right:14px;
  }

  .public-top-brand-copy{
    display:none;
  }

  body.public-shell-active .app-content{
    padding-left:14px;
    padding-right:14px;
  }

  body.public-shell-active .public-hero{
    padding:26px 20px;
  }

  .public-auth-actions{
    gap:5px;
  }

  .public-header-plans,
  .public-header-access{
    min-height:34px;
    padding:6px 9px;
    font-size:9px;
  }

  .public-state-strip{
    grid-template-columns:1fr;
  }

  .public-plan-grid{
    grid-template-columns:1fr;
  }

  .public-phone-card{
    align-self:center;
  }
}

/* ============================================================
   STEP 1214K-A - PROFESSIONAL HERO DEMO
   ============================================================ */

.tp-hero-demo-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:520px;
}

.tp-hero-demo{
  position:relative;
  min-height:450px;
  padding:22px;
  border:1px solid #223342;
  border-radius:22px;
  background:
    radial-gradient(circle at 82% 12%, rgba(68,177,224,.06), transparent 25%),
    linear-gradient(180deg, rgba(16,24,35,.98), rgba(12,18,28,.98));
  overflow:hidden;
}

.tp-hero-demo-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:18px;
}

.tp-hero-demo-head h3{
  margin:0;
  font-size:21px;
}

.tp-hero-demo-head small{
  display:block;
  margin-top:4px;
  color:var(--muted);
}

.tp-demo-status-pill{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 14px;
  border:1px solid rgba(68,177,224,.35);
  border-radius:999px;
  background:rgba(68,177,224,.08);
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}

.tp-demo-chart-shell{
  position:relative;
  border:1px solid #1f2d3d;
  border-radius:18px;
  background:#0f151d;
  overflow:hidden;
}

.tp-demo-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:48px;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.015);
}

.tp-demo-toolbar-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.tp-demo-symbol{
  color:#eef5fb;
  font-size:14px;
  font-weight:800;
}

.tp-demo-timeframe{
  color:#8ea0b2;
  font-size:11px;
  font-weight:700;
}

.tp-demo-toolbar-right{
  display:flex;
  gap:8px;
}

.tp-demo-toolbar-right button{
  min-width:34px;
  min-height:30px;
  padding:0;
  border:1px solid #26384a;
  border-radius:8px;
  background:#101821;
  color:#d8e5ef;
  font-weight:900;
  box-shadow:none;
}

.tp-demo-chart-wrap{
  position:relative;
  height:285px;
  background:#11161d;
}

.tp-hero-chart-root{
  position:absolute;
  inset:0;
}

.tp-demo-chart-footer{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:14px;
  background:rgba(255,255,255,.015);
  border-top:1px solid rgba(255,255,255,.06);
}

.tp-demo-chart-footer > div{
  padding:12px;
  border:1px solid #1f2d3d;
  border-radius:12px;
  background:rgba(16,24,35,.88);
}

.tp-demo-chart-footer small{
  display:block;
  margin-bottom:6px;
  color:#8194a7;
  font-size:10px;
}

.tp-demo-chart-footer strong{
  font-size:12px;
  color:#ebf2f8;
}

.tp-chart-annotation{
  position:absolute;
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border:1px solid #233445;
  border-radius:10px;
  background:rgba(13,21,31,.90);
  color:#dbe6ef;
  font-size:10px;
  font-weight:700;
  z-index:4;
  pointer-events:none;
}

.tp-chart-annotation b{
  width:7px;
  height:7px;
  border-radius:50%;
  display:block;
}

.tp-chart-zone{
  top:52px;
  left:56px;
  border-style:dashed;
  color:var(--accent);
}

.tp-chart-monitor{
  left:18px;
  bottom:16px;
}

.tp-chart-monitor b{
  background:var(--accent);
}

.tp-chart-confirm{
  top:64px;
  right:82px;
}

.tp-chart-confirm b{
  background:#d7a65d;
}

.tp-chart-alert{
  right:18px;
  bottom:16px;
}

.tp-chart-alert b{
  background:#72b7ff;
}

.tp-hero-phone{
  position:absolute;
  right:-10px;
  bottom:-8px;
  z-index:6;
}

.tp-hero-phone-frame{
  width:218px;
  padding:10px;
  border:1px solid #2a3644;
  border-radius:34px;
  background:
    linear-gradient(180deg, #0f1318 0%, #090d12 100%);
  box-shadow:0 28px 70px rgba(0,0,0,.45);
}

.tp-hero-phone-dynamic-island{
  width:74px;
  height:16px;
  margin:0 auto 10px;
  border-radius:999px;
  background:#040608;
}

.tp-hero-phone-screen{
  min-height:356px;
  padding:12px;
  border-radius:24px;
  background:
    linear-gradient(180deg, #f5f7f9 0%, #e9edf1 100%);
  color:#13202c;
}

.tp-phone-status-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  font-weight:800;
}

.tp-phone-spacer{
  height:78px;
}

.tp-phone-notification{
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.76);
  box-shadow:0 16px 36px rgba(12,22,32,.16);
  backdrop-filter:blur(8px);
}

.tp-phone-notification-app{
  display:flex;
  align-items:center;
  gap:8px;
  color:#526171;
  font-size:10px;
}

.tp-phone-notification-app strong{
  color:#1a2935;
}

.tp-phone-notification-app time{
  margin-left:auto;
}

.tp-phone-app-logo{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:8px;
  background:#0e1720;
  color:#f3f7fb;
  font-size:9px;
  font-weight:900;
}

.tp-phone-notification h4{
  margin:12px 0 7px;
  color:#132431;
  font-size:13px;
}

.tp-phone-notification p{
  margin:0;
  color:#55697c;
  font-size:11px;
  line-height:1.5;
}

@media(max-width:1160px){
  .tp-hero-phone{
    position:relative;
    right:auto;
    bottom:auto;
    margin-top:16px;
    align-self:flex-end;
  }
}

@media(max-width:760px){
  .tp-demo-chart-footer{
    grid-template-columns:1fr;
  }

  .tp-hero-phone{
    align-self:center;
  }

  .tp-hero-phone-frame{
    width:200px;
  }
}

/* ============================================================
   STEP 1214K-C - PANORAMIC PRODUCT DEMO
   ============================================================ */

body.public-shell-active .public-hero{
  grid-template-columns:1fr;
  gap:0;
  padding:
    52px
    clamp(30px,4vw,62px);
}

body.public-shell-active .public-hero > *{
  max-width:920px;
}

.tp-hero-demo-stage{
  width:100%;
  min-height:660px;
  margin-top:18px;
  margin-bottom:72px;
}

.tp-hero-demo{
  min-height:590px;
  padding:26px;
  border-radius:22px;
}

.tp-demo-chart-wrap{
  height:455px;
}

.tp-demo-toolbar{
  min-height:52px;
}

.tp-demo-interaction-hint{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:rgba(255,255,255,.025);
  color:#8194a7;
  font-size:9px;
  font-weight:700;
  letter-spacing:.02em;
}

.tp-hero-phone{
  right:28px;
  bottom:-52px;
}

.tp-hero-phone-frame{
  width:220px;
}

@media(max-width:1160px){

  .tp-hero-demo-stage{
    min-height:auto;
    margin-bottom:24px;
  }

  .tp-hero-phone{
    position:relative;
    right:auto;
    bottom:auto;
    align-self:flex-end;
    margin-top:18px;
  }
}

@media(max-width:760px){

  body.public-shell-active .public-hero{
    padding:30px 20px;
  }

  .tp-hero-demo{
    padding:16px;
  }

  .tp-demo-chart-wrap{
    height:360px;
  }

  .tp-demo-interaction-hint{
    display:none;
  }
}

/* ============================================================
   STEP 1214L-FIX2 - FINAL DEMO
   ============================================================ */

.tp-hero-demo{
  border-color:#29394a;
  background:
    radial-gradient(
      circle at 82% 7%,
      rgba(55,180,255,.055),
      transparent 25%
    ),
    radial-gradient(
      circle at 60% 0%,
      rgba(34,148,197,.055),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #101925,
      #0b121c
    );
  box-shadow:
    0 28px 80px rgba(0,0,0,.26);
}

.tp-demo-chart-shell{
  border-color:#263749;
  background:#0d131a;
}

.tp-demo-chart-wrap{
  background:#10151c;
}

.tp-demo-explainer{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:10px;
  margin:
    15px
    14px
    14px;
}

.tp-demo-step{
  min-height:108px;
  padding:15px;
  border:1px solid #253648;
  border-radius:14px;
  background:
    linear-gradient(
      180deg,
      rgba(20,30,43,.96),
      rgba(14,22,32,.96)
    );
}

.tp-demo-step b{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  margin-bottom:12px;
  border-radius:999px;
  background:rgba(68,177,224,.10);
  color:var(--accent);
  font-size:10px;
  font-weight:900;
}

.tp-demo-step span{
  display:block;
  color:#9db0c1;
  font-size:11px;
  line-height:1.55;
}

.tp-demo-step strong{
  color:#edf4fa;
}

.tp-demo-chart-footer{
  padding-top:0;
}

.tp-demo-chart-footer > div{
  border-color:#253648;
  background:#101925;
}

.tp-demo-chart-footer small{
  color:#8da1b4;
  font-weight:700;
}

.tp-demo-chart-footer strong{
  color:#edf4fa;
  line-height:1.45;
}

.tp-hero-phone{
  right:22px;
  bottom:-48px;
}

.tp-hero-phone-frame{
  width:232px;
  padding:10px;
  border:1px solid #344454;
  background:#080c11;
  box-shadow:
    0 34px 75px rgba(0,0,0,.48);
}

.tp-hero-phone-screen{
  min-height:382px;
  padding:13px;
}

.tp-phone-spacer{
  height:72px;
}

.tp-phone-notification{
  padding:13px;
  border:1px solid rgba(0,0,0,.05);
  border-radius:19px;
  background:rgba(255,255,255,.92);
  box-shadow:
    0 18px 36px rgba(13,22,31,.14);
}

.tp-phone-notification h4{
  margin:12px 0 7px;
  color:#132431;
  font-size:13px;
  line-height:1.35;
}

.tp-phone-notification p{
  margin:0;
  color:#526577;
  font-size:10px;
  line-height:1.5;
}

.tp-phone-rule-summary{
  display:grid;
  gap:6px;
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid rgba(15,32,45,.09);
}

.tp-phone-rule-summary span{
  color:#1d556d;
  font-size:9px;
  font-weight:750;
}

.tp-phone-alert-result{
  display:block;
  margin-top:12px;
  padding:8px 9px;
  border-radius:9px;
  background:#101d23;
  color:#63b8dd;
  font-size:9px;
  line-height:1.35;
}

@media(max-width:980px){

  .tp-demo-explainer{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){

  .tp-demo-explainer{
    grid-template-columns:1fr;
    margin-left:0;
    margin-right:0;
  }
}

/* ============================================================
   STEP 1214L-POS1 - PHONE POSITION
   ============================================================ */

@media(min-width:1161px){
  .tp-hero-phone{
    right:22px;
    bottom:78px;
  }
}

/* ============================================================
   STEP 1214M-A - SIMPLE DEMO LAYOUT
   ============================================================ */

.tp-demo-process{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}

.tp-demo-process-card{
  min-height:148px;
  padding:18px;
  border:1px solid #263749;
  border-radius:16px;
  background:
    linear-gradient(
      180deg,
      rgba(18,27,39,.96),
      rgba(11,18,28,.96)
    );
  box-shadow:
    0 10px 28px rgba(0,0,0,.16);
}

.tp-demo-process-card b{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  margin-bottom:14px;
  border-radius:999px;
  background:rgba(68,177,224,.10);
  color:var(--accent);
  font-size:11px;
  font-weight:900;
}

.tp-demo-process-card h4{
  margin:0 0 10px;
  color:#edf4fa;
  font-size:18px;
  line-height:1.3;
}

.tp-demo-process-card p{
  margin:0;
  color:#9db0c1;
  font-size:13px;
  line-height:1.65;
}

.tp-demo-chart-shell{
  overflow:visible;
}

.tp-hero-phone{
  z-index:3;
}

@media(min-width:1161px){
  .tp-hero-phone{
    right:22px;
    bottom:118px;
  }
}

@media(max-width:980px){
  .tp-demo-process{
    grid-template-columns:1fr;
  }

  .tp-demo-process-card{
    min-height:auto;
  }
}

/* ============================================================
   STEP 1214M-B - DESKTOP SCALE
   ============================================================ */

@media(min-width:1200px){
  body{
    zoom:.90;
  }
}

/* ============================================================
   STEP 1214M-C-FIX1B - VISUAL TP STORY
   ============================================================ */

.tp-chart-story{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  overflow:hidden;
  transition:opacity .15s ease;
}

.tp-chart-zone{
  position:absolute;
  border:1px solid rgba(52,163,211,.72);
  border-radius:8px;
  background:rgba(52,163,211,.105);
  box-shadow:
    inset 0 0 22px rgba(52,163,211,.035);
}

.tp-chart-sweep-line{
  position:absolute;
  height:0;
  border-top:2px dashed rgba(248,113,113,.95);
}

.tp-chart-sweep-origin{
  position:absolute;
  width:8px;
  height:8px;
  margin:-4px 0 0 -4px;
  border-radius:50%;
  background:#f87171;
  box-shadow:
    0 0 0 4px rgba(248,113,113,.14);
}

.tp-chart-story-point{
  position:absolute;
  width:11px;
  height:11px;
  margin:-5.5px 0 0 -5.5px;
  border-radius:50%;
}

.tp-chart-confirm-point{
  background:#fbbf24;
  box-shadow:
    0 0 0 5px rgba(251,191,36,.14);
}

.tp-chart-alert-point{
  background:#60a5fa;
  box-shadow:
    0 0 0 5px rgba(96,165,250,.16);
}

.tp-chart-alert-connector{
  position:absolute;
  height:0;
  border-top:1px dashed rgba(96,165,250,.72);
}

.tp-chart-story-label{
  position:absolute;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(8,15,23,.91);
  box-shadow:
    0 8px 24px rgba(0,0,0,.25);
  color:#eef5fa;
  font-size:11px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.tp-chart-zone-label{
  color:#5ebae2;
}

.tp-chart-sweep-label{
  color:#ff8585;
}

.tp-chart-confirm-label{
  color:#ffd15a;
}

.tp-chart-alert-label{
  color:#78b9ff;
}

/* ============================================================
   STEP 1214M-D - MINIMAL CHART LANGUAGE
   ============================================================ */

.tp-chart-sweep-label{
  display:none !important;
}

.tp-chart-zone-label,
.tp-chart-confirm-label,
.tp-chart-alert-label{
  min-width:24px;
  width:24px;
  height:24px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  line-height:1;
  box-shadow:0 8px 22px rgba(0,0,0,.24);
}

.tp-chart-zone-label{
  color:#061e29;
  background:#5ebae2;
  border:1px solid rgba(94,186,226,.95);
}

.tp-chart-confirm-label{
  color:#2a1a00;
  background:#ffd15a;
  border:1px solid rgba(255,209,90,.95);
}

.tp-chart-alert-label{
  color:#061a34;
  background:#78b9ff;
  border:1px solid rgba(120,185,255,.95);
}

.tp-chart-zone{
  background:rgba(52,163,211,.08);
  border:1px solid rgba(52,163,211,.58);
}

.tp-chart-sweep-line{
  border-top:2px dashed rgba(248,113,113,.9);
}

.tp-chart-alert-connector{
  border-top:1px dashed rgba(96,165,250,.58);
}

.tp-chart-story{
  z-index:4;
}

.tp-chart-story-label{
  backdrop-filter:blur(6px);
}

/* ============================================================
   STEP 1214M-E-FINAL - HOME CLOSED
   ============================================================ */

@media(min-width:1200px){
  body{
    zoom:.90 !important;
  }
}

#tpHeroChartRoot::after{
  content:'TP 24/7';
  position:absolute;
  top:14px;
  right:14px;
  z-index:6;
  padding:7px 11px;
  border:1px solid rgba(94,186,226,.32);
  border-radius:999px;
  background:rgba(7,16,20,.82);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  color:#6bc1e6;
  font-size:9px;
  font-weight:900;
  line-height:1;
  letter-spacing:.09em;
  pointer-events:none;
}
/* ============================================================
   STEP 1218D - CUSTOM STRATEGY NAV
   ============================================================ */

.desktop-nav .tp-custom-strategy-entry{
  text-decoration:none;
  color:inherit;
}

.desktop-nav .tp-custom-strategy-entry span{
  line-height:1.1;
}

.mobile-nav .tp-custom-strategy-mobile{
  appearance:none;
  min-width:0;
  flex:1 1 0;
  color:inherit;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:7px 2px;
  text-align:center;
  font-size:9px;
  line-height:1.02;
}

.mobile-nav .tp-custom-strategy-mobile svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}