* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: rgb(13, 20, 33); color: #e6edf3; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace; font-size: 13px; }
/* Embedded mode */
body.embedded .header-controls { display: none !important; }
body.embedded { overflow: auto; }
.header { padding: 16px 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #21262d; flex-wrap: wrap; }
.header h1 { font-size: 18px; font-weight: 600; margin-right: 8px; }
.header-controls { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.toggle-btn { background: #161b22; color: #8b949e; border: 1px solid #30363d; border-radius: 6px; padding: 5px 8px; font-size: 13px; cursor: pointer; font-family: inherit; line-height: 1; user-select: none; }
.toggle-btn:hover { border-color: #484f58; color: #e6edf3; }
.is-hidden { display: none !important; }
.display-contents { display: contents; }
.market-selects-ready { display: flex; gap: 8px; flex-wrap: wrap; }
.legend-muted { color: #484f58; }

/* Light theme */
body.light { background: #ffffff; color: #1f2328; }
body.light .header { border-color: #d1d9e0; background: #ffffff; }
body.light .header { border-color: #d1d9e0; }
body.light .perf-bar { background: #f6f8fa; border-color: #d1d9e0; }
body.light .perf-label { color: #656d76; }
body.light .perf-value { color: #1f2328; }
body.light .section h2 { color: #656d76; }
body.light table th { background: #f6f8fa; color: #656d76; border-color: #d1d9e0; }
body.light table td { border-color: #d1d9e01a; }
body.light td:first-child { color: #656d76; }
body.light .seasonal-container { background: #ffffff; border-color: #d1d9e0; }
body.light .custom-select-trigger { background: #f6f8fa; color: #1f2328; border-color: #d1d9e0; }
body.light .custom-select-trigger .market-label { color: #656d76; }
body.light .custom-select-trigger:hover { border-color: #8b949e; }
body.light .custom-select-trigger.active-market { border-color: #0969da; background: #ddf4ff; }
body.light .custom-select-trigger.active-market .market-label { color: #0969da; }
body.light .custom-select-dropdown { background: #ffffff; border-color: #d1d9e0; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
body.light .custom-select-option { color: #1f2328; }
body.light .custom-select-option:hover { background: #f6f8fa; }
body.light .custom-select-option.selected { background: #ddf4ff; color: #0969da; }
body.light .toggle-btn { background: #f6f8fa; color: #656d76; border-color: #d1d9e0; }
body.light .toggle-btn:hover { border-color: #8b949e; color: #1f2328; }
body.light .returns-periods button, body.light .seasonal-periods button { background: #f6f8fa; color: #656d76; border-color: #d1d9e0; }
body.light .returns-periods button:hover, body.light .seasonal-periods button:hover { background: #e8ebef; color: #1f2328; }
body.light .returns-periods button.active, body.light .seasonal-periods button.active { background: #0969da; color: #fff; border-color: #0969da; }
body.light .loading { color: #656d76; }
body.light .weekly-table th:first-child { background: #f6f8fa; }
body.light .weekly-table td:first-child { background: #ffffff; }
body.light .cycle-bar { border-color: #d1d9e0; }
body.light .cycle-bar-bull { background: rgba(26,127,55,0.1); color: rgba(26,127,55,0.5); }
body.light .cycle-bar-bear { background: rgba(207,34,46,0.08); color: rgba(207,34,46,0.5); }
body.light .cycle-bar-ticks { color: #656d76; }
body.light .pos { color: #1a7f37; }
body.light .neg { color: #cf222e; }
body.light .neg-strong { color: #ffffff; }
body.light .zero { color: #656d76; }
body.light .cell { border: 1px solid rgba(0,0,0,0.04); }
/* Custom dropdown */
.custom-select { position: relative; }
.custom-select-trigger { background: #161b22; color: #e6edf3; border: 1px solid #30363d; border-radius: 6px; padding: 5px 10px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; white-space: nowrap; }
.custom-select-trigger .market-label { color: #8b949e; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.custom-select-trigger .sym-label { font-weight: 600; }
.custom-select-trigger:hover { border-color: #484f58; }
.custom-select-trigger.open { border-color: #58a6ff; }
.custom-select-trigger .arrow { font-size: 9px; color: #8b949e; transition: transform 0.2s; }
.custom-select-trigger.open .arrow { transform: rotate(180deg); }
.custom-select-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: #161b22; border: 1px solid #30363d; border-radius: 8px; z-index: 9999; max-height: 360px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.5); scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.18) transparent; }
.custom-select-dropdown::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-select-dropdown::-webkit-scrollbar-track { background: transparent; }
.custom-select-dropdown::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, 0.18); border: 1px solid transparent; border-radius: 999px; background-clip: content-box; }
.custom-select-dropdown.open { display: block; }
.custom-select-option { padding: 6px 12px; cursor: pointer; font-size: 13px; color: #e6edf3; }
.custom-select-option:hover { background: #21262d; }
.custom-select-option.selected { background: #1f6feb33; color: #58a6ff; }
.custom-select-trigger.active-market { border-color: #58a6ff; background: #1f6feb15; }
.custom-select-trigger.active-market .market-label { color: #58a6ff; }
.perf-bar { display: flex; gap: 16px; padding: 12px 24px; background: #161b22; border-bottom: 1px solid #21262d; flex-wrap: wrap; align-items: center; }
.perf-item { display: flex; align-items: baseline; gap: 6px; }
.perf-label { color: #8b949e; font-size: 11px; text-transform: uppercase; }
.perf-value { font-size: 15px; font-weight: 600; }
.section { padding: 16px 24px; }
.section h2 { font-size: 14px; font-weight: 600; color: #8b949e; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th { background: #161b22; color: #8b949e; font-weight: 500; font-size: 11px; text-transform: uppercase; padding: 8px 4px; text-align: center; border-bottom: 1px solid #21262d; position: sticky; top: 0; z-index: 1; }
th:first-child { text-align: left; padding-left: 12px; width: 60px; }
td { padding: 3px; text-align: center; border-bottom: 1px solid #21262d1a; vertical-align: middle; }
td:first-child { text-align: left; padding-left: 12px; font-weight: 600; color: #8b949e; }
.cell { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 4px; padding: 3px 0; min-height: 52px; }
.cell-value { font-weight: 600; font-size: 12px; line-height: 1; margin-bottom: 1px; }
.cell canvas { display: block; width: 90%; height: 20px; }
.pos { color: #3fb950; }
.neg { color: #f85149; }
.zero { color: #8b949e; }
.avg-row td { border-top: 2px solid #30363d; }
.avg-row td:first-child { font-weight: 700; color: #e6edf3; }
body.light .avg-row td { border-top: 2px solid #d1d9e0; }
body.light .avg-row td:first-child { color: #1f2328; }
.loading { text-align: center; padding: 40px; color: #8b949e; }

/* Weekly table — fixed square cells, horizontal scroll */
.weekly-scroll { overflow-x: auto; max-width: 100%; scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.18) transparent; }
.weekly-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.weekly-scroll::-webkit-scrollbar-track { background: transparent; }
.weekly-scroll::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, 0.18); border: 1px solid transparent; border-radius: 999px; background-clip: content-box; }
.weekly-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(148, 163, 184, 0.18); }
.weekly-table { table-layout: fixed; width: auto; min-width: max-content; }
.weekly-table th, .weekly-table td { font-size: 9px; padding: 1px; width: 52px; min-width: 52px; max-width: 52px; }
.weekly-table th:first-child, .weekly-table td:first-child { width: 50px; min-width: 50px; max-width: 50px; position: sticky; left: 0; z-index: 2; background: #0d1117; }
.weekly-table th:first-child { z-index: 3; background: #161b22; }
.weekly-table .cell { min-height: 52px; width: 50px; height: 50px; padding: 2px 0; }
.weekly-table .cell-value { font-size: 9px; }
.weekly-table .cell canvas { height: 18px; }

/* Returns toolbar */
.returns-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.returns-toolbar h2 { margin-bottom: 0; }
.returns-periods { display: flex; gap: 4px; }
.returns-periods button { background: #21262d; color: #8b949e; border: 1px solid #30363d; border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; font-family: inherit; }
.returns-periods button:hover { background: #30363d; color: #e6edf3; }
.returns-periods button.active { background: #58a6ff; color: #0d1117; border-color: #58a6ff; }

/* Seasonal chart */
.seasonal-container { background: #0d1117; border: 1px solid #21262d; border-radius: 8px; position: relative; }
.chart-scroll-wrap { overflow-x: auto; overflow-y: hidden; position: relative; }
.chart-scroll-wrap > canvas { display: block; cursor: crosshair; }
.chart-yaxis { position: absolute; left: 0; z-index: 3; pointer-events: none; }
.chart-zoom-slider { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 11px; color: #8b949e; }
.chart-zoom-btn { background: #21262d; color: #8b949e; border: 1px solid #30363d; border-radius: 6px; padding: 2px 8px; font-size: 13px; cursor: pointer; font-family: inherit; line-height: 1.4; }
.chart-zoom-btn:hover { background: #30363d; color: #e6edf3; }
.chart-zoom-btn.active { background: #58a6ff; color: #0d1117; border-color: #58a6ff; }
body.light .chart-zoom-btn { background: #f6f8fa; color: #656d76; border-color: #d1d9e0; }
body.light .chart-zoom-btn:hover { background: #eaeef2; color: #1f2328; }
body.light .chart-zoom-btn.active { background: #58a6ff; color: #fff; }
.chart-select-rect { position: absolute; background: rgba(88,166,255,0.15); border: 1px solid #58a6ff; border-radius: 2px; pointer-events: none; z-index: 4; display: none; }
.chart-select-dot { position: absolute; width: 10px; height: 10px; background: #58a6ff; border: 2px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 5; display: none; box-shadow: 0 0 6px rgba(88,166,255,0.6); }
.chart-scroll-wrap.selecting { cursor: crosshair; }
.chart-scroll-wrap.selecting > canvas { cursor: crosshair; }
.seasonal-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; flex-wrap: wrap; gap: 8px; }
.seasonal-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.seasonal-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; user-select: none; }
.seasonal-legend-item .swatch { width: 24px; height: 3px; border-radius: 2px; }
.seasonal-legend-item .legend-current { font-weight: 600; }
.seasonal-periods { display: flex; gap: 4px; }
.seasonal-periods button { background: #21262d; color: #8b949e; border: 1px solid #30363d; border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; font-family: inherit; }
.seasonal-periods button:hover { background: #30363d; color: #e6edf3; }
.seasonal-periods button.active { background: #58a6ff; color: #0d1117; border-color: #58a6ff; }

/* Cycle Theory */
.cycle-info { display: flex; gap: 20px; padding: 12px 0; flex-wrap: wrap; align-items: center; }
.cycle-stat { display: flex; align-items: baseline; gap: 6px; }
.cycle-stat .perf-label { font-size: 10px; }
.cycle-bar-wrap { margin: 4px 0 12px; }
.cycle-bar { position: relative; height: 26px; border-radius: 6px; display: flex; overflow: visible; border: 1px solid #30363d; }
.cycle-bar-bull { background: rgba(63,185,80,0.15); height: 100%; border-radius: 5px 0 0 5px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #3fb95099; }
.cycle-bar-bear { background: rgba(248,81,73,0.12); height: 100%; border-radius: 0 5px 5px 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #f8514999; }
.cycle-marker { position: absolute; top: -4px; bottom: -4px; width: 3px; background: #e6edf3; border-radius: 2px; transform: translateX(-1px); box-shadow: 0 0 8px rgba(230,237,243,0.4); z-index: 1; }
.cycle-bar-ticks { display: flex; justify-content: space-between; font-size: 9px; color: #6e7681; margin-top: 3px; position: relative; }
.cycle-bar-ticks .tick-peak { position: absolute; color: #3fb950; transform: translateX(-50%); }
.cycle-legend-stat { font-size: 11px; color: #8b949e; margin-left: auto; }
.cycle-legend-stat b { color: #e6edf3; font-weight: 600; }
/* Cell zoom popup */
#returnsContainer .cell { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; }
#returnsContainer .cell.cell-zoomed { transform: scale(2.5); z-index: 100; box-shadow: 0 4px 24px rgba(0,0,0,0.5); border-radius: 6px; }
body.light #returnsContainer .cell.cell-zoomed { box-shadow: 0 4px 24px rgba(0,0,0,0.25); }

/* Instructions modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10000; justify-content: center; align-items: center; }
.modal-overlay.open { display: flex; }
.modal { background: #161b22; border: 1px solid #30363d; border-radius: 12px; width: 90%; max-width: 640px; max-height: 85vh; overflow-y: auto; padding: 28px 32px; position: relative; box-shadow: 0 16px 48px rgba(0,0,0,0.5); scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.18) transparent; }
.modal::-webkit-scrollbar { width: 4px; height: 4px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, 0.18); border: 1px solid transparent; border-radius: 999px; background-clip: content-box; }
.modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #8b949e; font-size: 22px; cursor: pointer; line-height: 1; padding: 4px; }
.modal-close:hover { color: #e6edf3; }
.modal h2 { font-size: 20px; font-weight: 700; margin-bottom: 20px; color: #e6edf3; }
.modal h3 { font-size: 14px; font-weight: 600; color: #58a6ff; margin: 18px 0 8px; text-transform: uppercase; letter-spacing: 0.3px; }
.modal p, .modal li { font-size: 13px; line-height: 1.6; color: #c9d1d9; }
.modal ul { padding-left: 18px; margin: 6px 0 12px; }
.modal li { margin-bottom: 4px; }
.modal .hint { display: inline-block; background: #1f6feb22; color: #58a6ff; border-radius: 4px; padding: 1px 6px; font-size: 12px; font-weight: 600; }
.modal hr { border: none; border-top: 1px solid #21262d; margin: 16px 0; }
body.light .modal { background: #ffffff; border-color: #d1d9e0; box-shadow: 0 16px 48px rgba(0,0,0,0.15); }
body.light .modal::-webkit-scrollbar-track { background: transparent; }
body.light .modal::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, 0.18); }
body.light .modal-close { color: #656d76; }
body.light .modal-close:hover { color: #1f2328; }
body.light .modal h2 { color: #1f2328; }
body.light .modal h3 { color: #0969da; }
body.light .modal p, body.light .modal li { color: #1f2328; }
body.light .modal .hint { background: #ddf4ff; color: #0969da; }
body.light .modal hr { border-color: #d1d9e0; }