
:root{
  --oc-bg:#08101f;
  --oc-panel:rgba(17,27,51,.76);
  --oc-panel-2:rgba(13,21,40,.86);
  --oc-line:rgba(151,170,211,.16);
  --oc-line-strong:rgba(151,170,211,.28);
  --oc-text:#eef4ff;
  --oc-muted:#9faccc;
  --oc-blue:#7aa7ff;
  --oc-violet:#9b8cff;
  --oc-call:#36d98b;
  --oc-call-soft:rgba(54,217,139,.11);
  --oc-put:#ff6475;
  --oc-put-soft:rgba(255,100,117,.10);
  --oc-warn:#ffc857;
}
*{box-sizing:border-box}
body.option-chain-page{background:radial-gradient(circle at 70% 7%,rgba(87,104,255,.12),transparent 28%),#080e1b;color:var(--oc-text)}
.oc-hero{padding:132px 0 34px}
.oc-breadcrumb{display:flex;gap:8px;align-items:center;color:var(--oc-muted);font-size:.9rem;margin-bottom:26px}
.oc-breadcrumb a{color:inherit;text-decoration:none}
.oc-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.7fr);gap:26px;align-items:stretch}
.oc-kicker,.oc-section-label{display:inline-flex;color:#afbeff;font-weight:800;font-size:.85rem;letter-spacing:.02em;margin-bottom:10px}
.oc-hero h1{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.08;margin:0 0 16px}
.oc-lead{max-width:850px;color:#b9c5df;font-size:1.08rem;line-height:2;margin:0}
.oc-status-panel,.oc-toolbar,.oc-table-wrap,.oc-guide article,.oc-guide-cards>div,.oc-related>a,.oc-risk{
  background:linear-gradient(145deg,rgba(22,33,61,.84),rgba(10,18,36,.84));
  border:1px solid var(--oc-line);
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  backdrop-filter:blur(16px)
}
.oc-status-panel{border-radius:22px;padding:20px}
.oc-status-line{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
.oc-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;font-size:.82rem;font-weight:900}
.oc-badge:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.oc-badge.is-live{color:var(--oc-call);background:var(--oc-call-soft)}
.oc-badge.is-closed{color:var(--oc-put);background:var(--oc-put-soft)}
.oc-badge.is-error{color:var(--oc-put);background:var(--oc-put-soft)}
.oc-badge.is-loading{color:var(--oc-blue);background:rgba(122,167,255,.1)}
.oc-muted{color:var(--oc-muted);font-size:.84rem}
.oc-status-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.oc-status-meta>div{padding:13px;border:1px solid var(--oc-line);border-radius:15px;background:rgba(7,13,28,.4)}
.oc-status-meta small,.oc-toolbar-stats small{display:block;color:var(--oc-muted);margin-bottom:6px;font-size:.76rem}
.oc-status-meta strong,.oc-toolbar-stats strong{font-size:1rem}
.oc-shell{padding:16px 0 40px}
.oc-toolbar{border-radius:22px;padding:16px;display:grid;grid-template-columns:minmax(170px,1fr) minmax(190px,1fr) 1.7fr auto;gap:14px;align-items:end;margin-bottom:16px}
.oc-field span{display:block;color:var(--oc-muted);font-size:.78rem;margin:0 4px 7px}
.oc-field select{width:100%;height:48px;border-radius:13px;border:1px solid var(--oc-line-strong);background:#0c1529;color:var(--oc-text);padding:0 12px;font:inherit;outline:none}
.oc-field select:focus{border-color:rgba(122,167,255,.6);box-shadow:0 0 0 3px rgba(122,167,255,.08)}
.oc-toolbar-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.oc-toolbar-stats>div{height:48px;border-radius:13px;border:1px solid var(--oc-line);background:rgba(7,13,28,.45);padding:7px 10px;min-width:0}
.oc-toolbar-stats small{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-refresh{height:48px;padding:0 18px;border:1px solid rgba(122,167,255,.4);border-radius:13px;background:linear-gradient(135deg,rgba(99,121,255,.25),rgba(130,79,255,.18));color:#eef4ff;font:inherit;font-weight:800;cursor:pointer}
.oc-refresh:hover{border-color:rgba(122,167,255,.7)}
.oc-refresh:disabled{opacity:.55;cursor:wait}
.oc-message{padding:18px;border:1px solid rgba(255,100,117,.3);border-radius:16px;background:var(--oc-put-soft);color:#ffd6dc;margin-bottom:16px;line-height:1.9}

.oc-viewbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 4px 14px;
}
.oc-viewbar-title{color:var(--oc-muted);font-size:.8rem}
.oc-density-note{color:#71809e;font-size:.74rem}

.oc-chain-wrap{
  border:1px solid var(--oc-line);
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(22,33,61,.76),rgba(10,18,36,.82));
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.oc-chain-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);
  align-items:center;
  border-bottom:1px solid var(--oc-line);
}
.oc-side-title,.oc-strike-title{padding:12px;text-align:center;font-weight:900;font-size:.9rem}
.oc-side-title.call{color:var(--oc-call);background:rgba(54,217,139,.07)}
.oc-side-title.put{color:var(--oc-put);background:rgba(255,100,117,.07)}
.oc-strike-title{background:#151d34;color:#fff}
.oc-chain-columns{
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);
  align-items:center;
  background:#101a31;
  color:#8f9dbb;
  border-bottom:1px solid var(--oc-line);
}
.oc-side-cols{display:grid;grid-template-columns:1.1fr 1.25fr .8fr .75fr;gap:6px;padding:8px 12px;text-align:center;font-size:.72rem}
.oc-strike-col-label{text-align:center;font-size:.72rem}
.oc-chain-row{border-bottom:1px solid var(--oc-line)}
.oc-chain-row:last-child{border-bottom:0}
.oc-row-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);
  align-items:stretch;
}
.oc-side-wrap{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.oc-side[role="button"]{
  cursor:pointer;
  transition:background .16s ease,box-shadow .16s ease;
}
.oc-side.call[role="button"]:hover{background:rgba(54,217,139,.055)}
.oc-side.put[role="button"]:hover{background:rgba(255,100,117,.055)}
.oc-side[role="button"]:focus-visible{
  outline:2px solid rgba(122,167,255,.62);
  outline-offset:-2px;
}
.oc-side.call.is-expanded{background:rgba(54,217,139,.065)}
.oc-side.put.is-expanded{background:rgba(255,100,117,.065)}
.oc-side{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr 1.25fr .8fr .75fr;
  gap:6px;align-items:center;text-align:center;
  padding:10px 12px;
  min-width:0;
}
.oc-side.call{background:rgba(54,217,139,.018)}
.oc-side.put{background:rgba(255,100,117,.018)}
.oc-symbol{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-symbol.call{color:var(--oc-call)}
.oc-symbol.put{color:var(--oc-put)}
.oc-quote{display:flex;gap:5px;justify-content:center;white-space:nowrap}
.oc-quote b{font-family:Inter,Vazirmatn,sans-serif}
.oc-quote i{font-style:normal;color:#66728d}
.oc-quote .bid{color:var(--oc-call)}
.oc-quote .ask{color:var(--oc-put)}
.oc-strike{
  display:grid;place-items:center;
  font-weight:900;font-family:Inter,Vazirmatn,sans-serif;
  color:#fff;background:#131c32;
  border-inline:1px solid var(--oc-line)
}
.oc-empty-side{color:#65718b}

@media(max-width:1050px){
  .oc-side-cols,.oc-side{grid-template-columns:1.05fr 1.1fr .75fr .65fr;font-size:.76rem}
  .oc-chain-head,.oc-chain-columns,.oc-row-main{grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr)}
}
@media(max-width:760px){
  .oc-chain-head,.oc-chain-columns{display:none}
  .oc-chain-wrap{border-radius:16px;overflow:visible;background:transparent;border:0;box-shadow:none}
  .oc-chain-body{display:grid;gap:10px}
  .oc-chain-row{border:1px solid var(--oc-line);border-radius:16px;overflow:hidden;background:rgba(15,23,43,.82)}
  .oc-row-main{display:grid;grid-template-columns:1fr}
  .oc-strike{order:-1;min-height:42px;border:0;border-bottom:1px solid var(--oc-line)}
  .oc-strike:before{content:"قیمت اعمال";font-family:Vazirmatn,sans-serif;font-weight:600;font-size:.68rem;color:#7c89a6;margin-left:8px}
  .oc-side{grid-template-columns:1.1fr 1.2fr .75fr .7fr;padding:12px 10px 17px}
  .oc-side.call{border-bottom:1px solid var(--oc-line)}
  .oc-side.call:before,.oc-side.put:before{
    position:absolute;top:2px;right:8px;font-size:.62rem;font-weight:900
  }
  .oc-side.call:before{content:"CALL";color:var(--oc-call)}
  .oc-side.put:before{content:"PUT";color:var(--oc-put)}
    .oc-density-note{display:none}
  .oc-viewbar{align-items:flex-start;flex-direction:column}
}

.oc-footnote{display:flex;justify-content:space-between;gap:16px;color:var(--oc-muted);font-size:.78rem;padding:10px 5px 0}
.oc-guide{padding:28px 0 70px}
.oc-guide-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:18px}
.oc-guide article{border-radius:22px;padding:25px}
.oc-guide h2{font-size:1.55rem;margin:2px 0 12px}
.oc-guide p{color:#adbad5;line-height:2;margin:0}
.oc-guide-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.oc-guide-cards>div{border-radius:18px;padding:17px}
.oc-guide-cards strong{display:block;font-family:Inter,Vazirmatn,sans-serif;margin-bottom:7px}
.oc-guide-cards p{font-size:.84rem;line-height:1.8}
.oc-call-text{color:var(--oc-call);font-weight:900}
.oc-put-text{color:var(--oc-put);font-weight:900}
.oc-related{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.oc-related>a{text-decoration:none;color:var(--oc-text);border-radius:18px;padding:16px;transition:.2s transform,.2s border-color}
.oc-related>a:hover{transform:translateY(-2px);border-color:rgba(122,167,255,.42)}
.oc-related strong{display:block;margin-bottom:6px}
.oc-related span{color:var(--oc-muted);font-size:.82rem}
.oc-risk{margin-top:18px;border-radius:18px;padding:16px 18px;color:#b8c4dd;line-height:1.9}
.oc-risk strong{color:#fff}
@media (max-width:980px){
  .oc-hero-grid,.oc-guide-grid{grid-template-columns:1fr}
  .oc-toolbar{grid-template-columns:1fr 1fr}
  .oc-toolbar-stats{grid-column:1/-1}
  .oc-refresh{grid-column:1/-1}
  .oc-related{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .oc-hero{padding-top:108px}
  .oc-toolbar{grid-template-columns:1fr}
  .oc-toolbar-stats{grid-template-columns:repeat(3,1fr);grid-column:auto}
  .oc-refresh{grid-column:auto}
  .oc-status-meta{grid-template-columns:1fr 1fr}
  .oc-guide-cards,.oc-related{grid-template-columns:1fr}
  .oc-footnote{flex-direction:column;gap:4px}
  .oc-table-wrap{margin-left:-12px;margin-right:-12px;border-radius:14px}
}


/* Structural Call/Put counterpart with no market activity yet */
.oc-side-wrap.is-synthetic .oc-side{
  cursor:default;
  opacity:.82;
}
.oc-synthetic-side > span:not(.oc-symbol){
  color:#596783;
}
.oc-side-wrap.is-synthetic .oc-symbol{
  opacity:1;
}


/* Full-width analytical detail bar for one selected contract */
.oc-contract-detail{
  border-top:1px solid var(--oc-line);
  padding:14px 16px 16px;
  background:rgba(7,13,28,.66);
}
.oc-contract-detail[hidden]{display:none!important}
.oc-contract-detail.call{box-shadow:inset 0 2px 0 rgba(54,217,139,.14)}
.oc-contract-detail.put{box-shadow:inset 0 2px 0 rgba(255,100,117,.14)}
.oc-detail-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.oc-detail-head>div{display:flex;align-items:center;gap:10px}
.oc-detail-side{font-size:.72rem;font-weight:900}
.oc-detail-side.call{color:var(--oc-call)}
.oc-detail-side.put{color:var(--oc-put)}
.oc-detail-symbol{font-size:1rem}
.oc-detail-strike{color:#7f8ca9;font-size:.76rem}
.oc-detail-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.oc-detail-grid>div{min-width:0;border:1px solid var(--oc-line);border-radius:12px;padding:9px 10px;background:rgba(13,21,40,.68)}
.oc-detail-grid small{display:block;color:#7785a3;font-size:.68rem;margin-bottom:4px}
.oc-detail-grid strong{display:block;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-detail-future{opacity:.52}
.oc-detail-analytics{border-color:rgba(118,107,255,.22)!important;background:rgba(25,24,58,.55)!important}
.oc-detail-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px;color:#7684a2;font-size:.67rem}
.oc-detail-meta span{white-space:nowrap}
@media(max-width:980px){.oc-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.oc-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
