/* Paper options desk — FAKE MONEY · educational stubs */

.opt-page { padding-bottom: 3rem; }

.opt-fake-banner {
 background: rgba(255, 92, 122, 0.12);
 border: 1px solid rgba(255, 92, 122, 0.45);
 border-radius: calc(var(--radius) - 2px);
 padding: 0.75rem 1rem;
 margin-bottom: 0.65rem;
 text-align: center;
}
.opt-fake-banner strong {
 display: block;
 color: var(--danger);
 font-size: 1.05rem;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 margin-bottom: 0.35rem;
}
.opt-fake-banner p { color: var(--text); font-size: 0.9rem; margin: 0; }

.opt-nia {
 text-align: center;
 color: var(--text-muted);
 font-size: 0.82rem;
 margin-bottom: 1rem;
 line-height: 1.5;
}

.opt-mark-line {
 font-size: 0.8rem;
 color: var(--text-muted);
 margin: 0.5rem 0 1rem;
 padding: 0.5rem 0.75rem;
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-radius: 8px;
}

.opt-stats {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 0.75rem;
 margin-bottom: 1.15rem;
}
.opt-stat {
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-radius: 10px;
 padding: 0.75rem;
}
.opt-stat .lbl {
 font-size: 0.7rem;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: var(--text-muted);
}
.opt-stat .val {
 font-family: var(--mono);
 font-size: 1.15rem;
 font-weight: 700;
}
.opt-stat .val .tag {
 font-size: 0.65rem;
 margin-left: 0.35rem;
 padding: 0.1rem 0.35rem;
 border-radius: 4px;
 background: rgba(255, 92, 122, 0.2);
 color: var(--danger);
 font-weight: 700;
 vertical-align: middle;
}

.opt-grid {
 display: grid;
 grid-template-columns: 1.2fr 0.8fr;
 gap: 1.25rem;
 margin-bottom: 1.25rem;
}
@media (max-width: 960px) {
 .opt-grid { grid-template-columns: 1fr; }
 .opt-stats { grid-template-columns: 1fr; }
}

.opt-panel {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: calc(var(--radius) - 2px);
 padding: 1.05rem 1.15rem;
}
.opt-panel h2 {
 font-size: 1.05rem;
 margin-bottom: 0.35rem;
 letter-spacing: -0.01em;
}
.opt-panel .sub {
 color: var(--text-muted);
 font-size: 0.85rem;
 margin-bottom: 1rem;
}

.badge-sim {
 display: inline-block;
 font-size: 0.65rem;
 letter-spacing: 0.06em;
 padding: 0.15rem 0.4rem;
 border-radius: 4px;
 background: rgba(124, 108, 255, 0.2);
 color: #b8aeff;
 vertical-align: middle;
 font-weight: 700;
}

.opt-underlyings {
 display: flex;
 gap: 0.5rem;
 flex-wrap: wrap;
 margin-bottom: 0.85rem;
}
.opt-underlyings button {
 min-height: 44px;
 padding: 0.45rem 0.9rem;
 border-radius: 8px;
 border: 1px solid var(--border);
 background: var(--bg-elevated);
 color: var(--text);
 cursor: pointer;
 font-weight: 600;
}
.opt-underlyings button.active {
 border-color: rgba(94, 234, 212, 0.55);
 background: rgba(94, 234, 212, 0.12);
 color: #5eead4;
}

.opt-expiry-tabs {
 display: flex;
 gap: 0.5rem;
 flex-wrap: wrap;
 margin-bottom: 0.75rem;
}
.opt-expiry-tabs button {
 min-height: 40px;
 padding: 0.35rem 0.75rem;
 border-radius: 8px;
 border: 1px solid var(--border);
 background: transparent;
 color: var(--text-muted);
 cursor: pointer;
 font-size: 0.85rem;
}
.opt-expiry-tabs button.active {
 border-color: rgba(124, 108, 255, 0.5);
 color: var(--text);
 background: rgba(124, 108, 255, 0.12);
}

.opt-table-wrap { overflow-x: auto; }
.opt-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.82rem;
 font-family: var(--mono);
}
.opt-table th, .opt-table td {
 padding: 0.45rem 0.4rem;
 border-bottom: 1px solid var(--border);
 text-align: right;
 white-space: nowrap;
}
.opt-table th:first-child, .opt-table td:first-child,
.opt-table th.strike, .opt-table td.strike { text-align: center; }
.opt-table th { color: var(--text-muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.opt-table tr.selectable { cursor: pointer; }
.opt-table tr.selectable:hover td { background: rgba(255, 255, 255, 0.03); }
.opt-table tr.selected td { background: rgba(94, 234, 212, 0.08); }
.opt-table .atm td { box-shadow: inset 0 0 0 1px rgba(255, 211, 106, 0.25); }
.opt-cell-btn {
 background: none;
 border: none;
 color: inherit;
 font: inherit;
 cursor: pointer;
 padding: 0;
 text-decoration: underline;
 text-underline-offset: 2px;
}
.opt-cell-btn:hover { color: #5eead4; }

.opt-ticket label {
 display: block;
 font-size: 0.78rem;
 color: var(--text-muted);
 margin-bottom: 0.65rem;
}
.opt-ticket select,
.opt-ticket input {
 display: block;
 width: 100%;
 margin-top: 0.3rem;
 min-height: 44px;
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-radius: 8px;
 color: var(--text);
 padding: 0.55rem;
 font-size: 0.95rem;
}
.opt-ticket .mode-toggle {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0.4rem;
 margin-bottom: 0.75rem;
}
.opt-ticket .mode-toggle button {
 min-height: 44px;
 border-radius: 8px;
 border: 1px solid var(--border);
 background: var(--bg-elevated);
 color: var(--text-muted);
 cursor: pointer;
 font-weight: 600;
}
.opt-ticket .mode-toggle button.active {
 border-color: rgba(94, 234, 212, 0.5);
 color: #5eead4;
 background: rgba(94, 234, 212, 0.1);
}

.opt-greeks {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 0.4rem;
 margin: 0.75rem 0;
}
@media (max-width: 640px) {
 .opt-greeks { grid-template-columns: repeat(3, 1fr); }
}
.opt-greek {
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 0.45rem;
 text-align: center;
}
.opt-greek .g-lbl { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; }
.opt-greek .g-val { font-family: var(--mono); font-weight: 700; font-size: 0.9rem; }

.opt-risk-box {
 background: rgba(124, 108, 255, 0.08);
 border: 1px solid rgba(124, 108, 255, 0.3);
 border-radius: 8px;
 padding: 0.65rem 0.75rem;
 margin: 0.75rem 0;
 font-size: 0.85rem;
}
.opt-risk-box strong { color: #b8aeff; }

.opt-payoff {
 margin-top: 0.85rem;
 padding-top: 0.75rem;
 border-top: 1px solid var(--border);
}
.opt-payoff svg {
 width: 100%;
 height: auto;
 background: var(--bg-elevated);
 border-radius: 8px;
 border: 1px solid var(--border);
}
.opt-payoff .caption {
 font-size: 0.78rem;
 color: var(--text-muted);
 margin-top: 0.5rem;
 line-height: 1.45;
}
.opt-teach {
 font-size: 0.85rem;
 color: var(--text);
 line-height: 1.5;
 margin-bottom: 0.75rem;
 padding: 0.65rem 0.75rem;
 background: rgba(94, 234, 212, 0.06);
 border: 1px solid rgba(94, 234, 212, 0.2);
 border-radius: 8px;
}

.opt-toast {
 min-height: 1.25rem;
 font-size: 0.85rem;
 margin-top: 0.65rem;
}
.opt-toast.ok { color: #5eead4; }
.opt-toast.err { color: var(--danger); }

.opt-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }

.empty-state {
 color: var(--text-muted);
 font-size: 0.9rem;
 padding: 0.85rem;
 border: 1px dashed var(--border);
 border-radius: 8px;
 text-align: center;
}

.opt-table-pos th, .opt-table-pos td { text-align: left; }
.opt-table-pos td.num { text-align: right; font-family: var(--mono); }

.helper { color: var(--text-muted); font-size: 0.82rem; line-height: 1.45; }
.pnl-pos { color: #5eead4; }
.pnl-neg { color: var(--danger); }