
.position-detail{padding:135px 0 90px}
.position-title{max-width:860px;margin-bottom:38px}
.position-title h1{font-family:var(--latin-font),var(--fa-font);font-size:52px;direction:ltr;text-align:right;line-height:1.25;margin:10px 0}
.position-title h1 span{display:block;font-family:var(--fa-font);direction:rtl;color:#aab2ff;font-size:31px;margin-top:8px}
.position-title p{color:#98a4b4;font-size:16px;line-height:2}
.position-grid-main{display:grid;grid-template-columns:1.35fr .65fr;gap:14px}
.payoff-panel,.position-facts{border:1px solid var(--line);border-radius:20px;background:linear-gradient(150deg,#111925,#0a1018);padding:22px}
.panel-head{display:flex;justify-content:space-between;align-items:center}.panel-head strong{font-size:12px}
.payoff-svg{width:100%;height:auto;margin-top:18px}
.payoff-svg .axis{stroke:#344155;stroke-width:1}.payoff-svg .axis-y{stroke-dasharray:4 5}
.payoff-svg .payoff-line{stroke:#8d99ff;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.payoff-svg text{fill:#6f7b8d;font-family:var(--fa-font);font-size:9px}
.position-facts{display:grid;gap:10px}
.position-facts div{border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:13px}
.position-facts small{display:block;color:#697587;font-size:9px}.position-facts strong{font-size:13px;margin-top:4px;display:block}
.position-section{max-width:860px;margin:58px 0}.position-section h2{font-size:25px}.position-section p{color:#8d99aa;font-size:13px;line-height:2}
.formula-box,.warning-box{border-radius:13px;padding:14px 16px;margin-top:18px}
.formula-box{border:1px solid rgba(109,124,255,.16);background:rgba(109,124,255,.05)}
.warning-box{border:1px solid rgba(239,103,103,.15);background:rgba(239,103,103,.045);color:#d7a4a4;font-size:11px}
.example-table{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.example-table table{width:100%;border-collapse:collapse}.example-table th,.example-table td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px}
.position-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:65px}
.position-nav a{border:1px solid var(--line);border-radius:12px;padding:12px;background:rgba(15,22,32,.7);font-size:10px;text-align:center}
.position-nav a:hover{border-color:#35435d}
@media(max-width:850px){.position-grid-main{grid-template-columns:1fr}.position-title h1{font-size:42px}.position-nav{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.position-title h1{font-size:35px}.position-title h1 span{font-size:24px}.position-nav{grid-template-columns:1fr}}

/* v9.1 Educational payoff diagrams */
.payoff-svg .zero-axis{stroke:#627086;stroke-width:1.2}
.payoff-svg .guide{stroke:#3d4b61;stroke-width:1;stroke-dasharray:5 6}
.payoff-svg .strike-guide{stroke:#56627a;stroke-width:1;stroke-dasharray:4 5}
.payoff-svg .be-guide{stroke:#6977ff;stroke-width:1.2;stroke-dasharray:4 5}
.payoff-svg .loss-zone{fill:rgba(239,103,103,.06)}
.payoff-svg .profit-zone{fill:rgba(33,201,140,.045)}
.payoff-svg .label-main{fill:#aeb7c5;font-family:var(--fa-font);font-size:10px;font-weight:700}
.payoff-svg .label-sub{fill:#758296;font-family:var(--fa-font);font-size:9px}
.payoff-svg .label-en{fill:#9aa4ff;font-family:var(--latin-font);font-size:9px;font-weight:700}
.payoff-svg .be-dot{fill:#8d99ff}
.payoff-svg .strike-dot{fill:#c4cad5}
.payoff-svg .loss-text{fill:#e39191}
.payoff-svg .profit-text{fill:#83d7b2}
.payoff-explainer{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px
}
.payoff-explainer div{
  border:1px solid rgba(255,255,255,.05);border-radius:10px;padding:9px 10px;
  background:rgba(255,255,255,.018)
}
.payoff-explainer small{display:block;color:#667386;font-size:8px}
.payoff-explainer strong{font-size:10px;margin-top:2px;display:block}
@media(max-width:600px){
  .payoff-explainer{grid-template-columns:1fr}
}

/* v9.2 Numeric educational axes */
.edu-payoff .tick{stroke:#5a6678;stroke-width:1}
.edu-payoff .tick-label{fill:#8793a5;font-family:var(--latin-font),var(--fa-font);font-size:9px}
.edu-payoff .arrow-head{fill:#627086}
.edu-payoff .loss-arrow{stroke:#d36f6f;stroke-width:2}
.edu-payoff .profit-arrow{stroke:#62bd91;stroke-width:2}

/* v9.2 numeric payoff labels */
.edu-payoff .tick{stroke:#5a6678;stroke-width:1}
.edu-payoff .tick-label{fill:#8793a5;font-family:var(--latin-font),var(--fa-font);font-size:9px}
.edu-payoff .arrow-head{fill:#627086}

/* v10.1 basic position fact cards readability */
.position-facts div{
  min-height:118px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.position-facts small{font-size:11px !important}
.position-facts strong{font-size:16px !important;line-height:1.75}
.payoff-explainer div{
  min-height:72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.payoff-explainer small{font-size:10px !important}
.payoff-explainer strong{font-size:13px !important}

/* v3.1 mobile position fixes */
.position-grid-main>*{min-width:0}
@media(max-width:600px){
  .position-facts{grid-template-columns:1fr!important}
  .position-facts div{min-height:auto!important}
}
