/* Alpha: A2's working layout, B2's position emphasis, C2's optional dark palette.
 * The same local app engine owns all numbers, requests, action gates and visibility.
 */
:root {
    --app-content-width: 1240px;
    --app-content-padding: 36px 40px 48px;
    --position-columns: 1fr;
    --status-columns: 1fr;
    --strike-selector-display: grid;
    --alpha-sidebar-width: 188px;
    --card-bg: #F1EEFF;
    --card-glow: #F4C6E733;
    --card-text: #1B1F3B;
    --card-muted: #5B6079;
    --card-asset: #5B6079;
    --card-rule: #4B3DDA20;
    --card-rail: #4B3DDA40;
    --card-panel: #ffffff55;
    --card-label: #1B1F3B;
    --card-accent: #4B3DDA;
    --card-price: #1B1F3B;
    --card-gain: #168058;
    --card-loss: #B33256;
    --card-display-font: var(--font-body);
    --card-strike-weight: 700;
    --card-strike-size: clamp(36px, 5vw, 64px);
    --card-strike-mobile-size: 40px;
}
:root[data-alpha-theme="dark"] {
    color-scheme: dark;
    --bg-primary: #11152E;
    --bg-secondary: #222747;
    --bg-card: #1B1F3B;
    --bg-card-hover: #252A4C;
    --text-primary: #F4F1FC;
    --text-secondary: #B9BBDD;
    --text-muted: #A3A7CB;
    --accent: #B6A7FF;
    --accent-light: #CDB8FF;
    --accent-dark: #CDB8FF;
    --on-accent: #171A35;
    --accent-rgb: 182, 167, 255;
    --bg-primary-rgb: 17, 21, 46;
    --text-secondary-rgb: 185, 187, 221;
    --border: #A7A4DC29;
    --border-light: #A7A4DC45;
    --success: #7BDEB6;
    --danger: #F2A3B8;
    --warning: #F4C782;
    --gradient-brand: linear-gradient(135deg, #B6A7FF, #CDB8FF);
    --card-bg: #222747;
    --card-glow: #8D7BFF15;
    --card-text: #F4F1FC;
    --card-muted: #B9BBDD;
    --card-asset: #B9BBDD;
    --card-rule: #CDB8FF30;
    --card-rail: #CDB8FF50;
    --card-panel: #ffffff03;
    --card-label: #F4F1FC;
    --card-accent: #CDB8FF;
    --card-price: #F4F1FC;
    --card-gain: #7BDEB6;
    --card-loss: #F2A3B8;
}
.alpha-skin { background: radial-gradient(ellipse at 80% 0%, rgba(var(--accent-rgb), .055), transparent 50%), var(--bg-primary); }
.alpha-skin .header { min-height: 82px; padding: 18px 32px; background: var(--bg-card); box-shadow: none; }
.alpha-skin .brand-icon .site-logo { height: 34px; }
:root[data-alpha-theme="dark"] .alpha-skin .site-logo { filter: brightness(0) invert(1); }
.alpha-badge { display: inline-block; font-size: 11px; border: 1px solid var(--border-light); padding: 2px 8px; border-radius: 6px; color: var(--text-secondary); }
.alpha-theme { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-light); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 12px; }
.alpha-theme[aria-pressed="true"] { background: rgba(var(--accent-rgb), .12); border-color: var(--accent); color: var(--accent); }
.alpha-skin .wallet-container { gap: 12px; }
.alpha-skin .btn-connect { border-radius: 12px; font-weight: 600; }
.alpha-sidebar { position: fixed; top: 82px; left: 0; bottom: 0; width: var(--alpha-sidebar-width); padding: 28px 18px; border-right: 1px solid var(--border); background: var(--bg-card); display: flex; flex-direction: column; overflow: auto; }
.alpha-sidebar .tab-nav { flex-direction: column; border: 0; padding: 0; background: transparent; gap: 10px; margin-bottom: 30px; }
.alpha-sidebar .tab-btn { flex: none; text-align: left; border-radius: 12px; padding: 14px 18px; font-weight: 600; font-size: 14px; }
.alpha-sidebar .tab-btn.active { background: rgba(var(--accent-rgb), .10); color: var(--accent); box-shadow: none; }
.alpha-links { display: grid; gap: 18px; padding: 0 12px; }
.alpha-links a { font-size: 12px; text-decoration: none; color: var(--text-secondary); }
.alpha-sidebar-art { margin-top: auto; padding-top: 44px; text-align: center; }
.alpha-sidebar-art img { width: 110px; height: auto; opacity: .92; }
.alpha-sidebar-art span { display: block; margin-top: 14px; font-size: 10px; color: var(--text-muted); }
.alpha-skin .main-content { margin-left: var(--alpha-sidebar-width); }
.alpha-intro { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.alpha-eyebrow { color: var(--text-secondary); font-size: 11px; letter-spacing: .06em; }
.alpha-intro h1 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -.045em; font-weight: 700; margin-top: 5px; }
.alpha-intro .chain-toggle { margin: 0; }
.alpha-selection, .alpha-context, .alpha-position { min-width: 0; border: 1px solid var(--border); border-radius: 20px; padding: 24px; background: var(--bg-card); }
.alpha-selection { margin-bottom: 24px; }
.alpha-selection h2, .alpha-context > h2, .alpha-position h2 { font-size: 16px; font-weight: 700; letter-spacing: -.025em; margin-bottom: 18px; }
.alpha-selection .asset-tabs { justify-content: flex-start; gap: 10px; margin-bottom: 20px; }
.alpha-selection .asset-tab { min-width: 112px; padding: 13px 18px; border-radius: 12px; background: var(--bg-primary); font-size: 13px; }
.alpha-selection .asset-tab.active { background: rgba(var(--accent-rgb), .1); color: var(--accent); border-color: var(--accent); }
.alpha-selection .series-selector-container { margin: 0; }
.alpha-selection .strike-pill { border: 1px solid var(--border); background: var(--bg-primary); border-radius: 10px; padding: 8px 12px; }
.alpha-selection .strike-pill.active { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.alpha-selection .spot-pill { font-size: 12px; }
.alpha-workspace { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr); gap: 24px; align-items: start; margin-bottom: 24px; }
.alpha-context .visualizer-section { text-align: left; margin-bottom: 22px; }
.alpha-context .accumulation-display { align-items: flex-start; }
.alpha-context .accumulation-mode { justify-content: flex-start; font-size: 15px; }
.alpha-context .mode-icon { font-size: 20px; }
.alpha-context .accum-rollup { margin-top: 8px; font-size: 11px; }
.alpha-explanation { margin-top: 12px; font-size: 12px; }
.alpha-explanation summary, .alpha-maintenance summary { cursor: pointer; color: var(--text-secondary); font-size: 12px; }
.alpha-explanation .mode-why { font-size: 12px; line-height: 1.65; margin-top: 10px; text-align: left; }
.alpha-context .status-section { gap: 0; margin: 0; }
.alpha-context .status-card { padding: 16px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.alpha-context .status-card:hover { transform: none; }
.alpha-context .status-header { font-size: 12px; margin-bottom: 8px; }
.alpha-context .status-value { font-size: 25px; }
.alpha-context .status-detail { font-size: 11px; }
.alpha-maintenance { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.alpha-maintenance .btn-action { margin-top: 12px; padding: 8px 16px; }
.alpha-position .details-header { justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.alpha-position .details-header h2 { flex: 1; margin: 0; }
.alpha-position .position-card { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.alpha-position .holding-target { font-size: clamp(20px, 2.8vw, 30px); color: var(--text-primary); overflow-wrap: anywhere; }
.alpha-position .holding-value { font-size: 20px; overflow-wrap: anywhere; }
.alpha-position .position-values { gap: 8px; flex-wrap: wrap; }
.alpha-position .position-header { margin-bottom: 12px; }
.alpha-position .position-label { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
.alpha-position .returns-value { font-size: 28px; }
.alpha-position .empty-state { padding: 22px 8px 30px; }
.alpha-position .empty-icon img { width: 96px; height: auto; }
.alpha-position .empty-state p { font-size: 18px; color: var(--text-primary); }
.alpha-position .empty-state > span { font-size: 12px; }
.alpha-position .action-section { margin-top: 24px; margin-bottom: 0; }
.alpha-position .action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.alpha-position .action-buttons .btn-action { width: 100%; border-radius: 12px; font-size: 14px; padding: 13px 16px; }
.alpha-position .action-panel { margin-top: 20px; box-shadow: none; }
.alpha-position .panel-header, .alpha-position .panel-body { padding: 16px; }
.alpha-position .panel-actions { flex-wrap: wrap; }
.alpha-position .panel-actions > * { min-width: 0; }
.alpha-position .preview-row { gap: 12px; }
.alpha-position .preview-row > :last-child { overflow-wrap: anywhere; }
.alpha-skin .details-section { background: transparent; border: 0; padding: 0; }
.alpha-skin .disclosure-card > summary { font-size: 13px; }
.alpha-overview .totals-banner { margin: 0; }
.alpha-overview .totals-banner-item { box-shadow: none; }
.alpha-skin .details-section .lp-visual { margin-bottom: 14px; }
.alpha-skin .details-section .lp-stats { border-top: 1px solid var(--border); padding-top: 12px; }
.alpha-skin .details-section .fee-event-header,
.alpha-skin .details-section .fee-event-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, .8fr); gap: 10px; align-items: baseline; }
.alpha-skin .details-section .fee-event-header > span:not(:first-child) { text-align: right; }
.alpha-skin .details-section .fee-event-row > span { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.alpha-skin .details-section .fee-events { scrollbar-gutter: stable; }
.alpha-skin .fee-event-empty { font-size: 13px; padding: 18px; }
.alpha-skin .site-footer { max-width: var(--app-content-width); margin-left: var(--alpha-sidebar-width); padding: 0 40px 32px; }
.alpha-skin #markets-paused-notice { margin-top: 0; }
:root[data-alpha-theme="dark"] .alpha-skin #markets-paused-notice { color: #F2A3B8; background: #F2A3B812; border-color: #F2A3B855; }
.alpha-skin .market-iv-signal { background: var(--bg-card); }
.alpha-skin [hidden] { display: none !important; }
@media (min-width: 1500px) { .alpha-skin .main-content { margin-right: auto; margin-left: calc(var(--alpha-sidebar-width) + (100vw - var(--alpha-sidebar-width) - 1240px) / 2); } }
@media (max-width: 1100px) {
    :root { --alpha-sidebar-width: 152px; --app-content-padding: 28px 24px; }
    .alpha-workspace { grid-template-columns: minmax(240px, .85fr) minmax(300px, 1.15fr); gap: 16px; }
    .alpha-selection, .alpha-context, .alpha-position { padding: 18px; }
}
@media (max-width: 900px) {
    :root { --alpha-sidebar-width: 0px; --app-content-padding: 24px 20px; }
    .alpha-sidebar { position: static; width: auto; padding: 12px 20px; border-right: 0; border-bottom: 1px solid var(--border); }
    .alpha-sidebar .tab-nav { flex-direction: row; margin: 0; }
    .alpha-sidebar .tab-btn { text-align: center; flex: 1; padding: 10px 18px; }
    .alpha-links, .alpha-sidebar-art { display: none; }
    .alpha-skin .main-content { margin: 0 auto; }
    .alpha-skin .header { position: static; padding: 16px 20px; }
    .alpha-skin .site-footer { margin: 0; padding: 0 20px 28px; }
}
@media (max-width: 640px) {
    .alpha-skin .details-section .fee-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .alpha-skin .details-section .fee-metric { min-width: 0; padding: 12px 8px; }
    .alpha-skin .details-section .fee-metric-label { font-size: 10px; letter-spacing: 0; overflow-wrap: anywhere; }
    .alpha-skin .details-section .fee-metric-value { font-size: 15px; overflow-wrap: anywhere; }
    .alpha-workspace { grid-template-columns: minmax(0, 1fr); }
    .alpha-position { order: -1; }
    .alpha-intro { align-items: flex-start; }
    .alpha-intro h1 { max-width: 200px; font-size: 22px; }
    .alpha-selection .asset-tabs { display: grid; grid-template-columns: 1fr 1fr; }
    .alpha-selection .asset-tab { min-width: 0; width: 100%; padding: 12px; }
    .alpha-selection .spot-pill { margin-left: 0; }
    .alpha-theme { padding: 8px; font-size: 11px; }
    .alpha-skin .wallet-container { gap: 6px; }
    .alpha-skin .btn-connect { font-size: 12px; padding: 10px; }
    .alpha-skin .header { padding: 14px; gap: 8px; }
    .alpha-skin .brand { gap: 6px; }
    .alpha-skin .brand-icon .site-logo { height: 28px; }
    .alpha-skin .alpha-badge { font-size: 9px; padding: 2px 5px; }
    .alpha-overview .totals-banner { flex-direction: column; }
}