:root { color-scheme: light; --ink: #17202a; --muted: #667085; --line: #d9dee7; --surface: #ffffff; --canvas: #f3f5f7; --blue: #2458c6; --green: #087443; --amber: #a15c00; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 14px/1.5 Inter, "Microsoft YaHei", sans-serif; letter-spacing: 0; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.hidden { display: none !important; }
.alpha-shell { min-height: 100vh; }
.alpha-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 10px 24px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.alpha-brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.alpha-brand img { width: 42px; height: 42px; object-fit: contain; border-radius: 5px; }
.alpha-brand span { display: grid; line-height: 1.2; }
.alpha-brand strong { font-size: 16px; }
.alpha-brand small, .research-heading small, .section-title small, .rail-heading small, .readiness-panel small { color: var(--muted); font-size: 10px; font-weight: 700; }
.alpha-session { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.back-link { padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); text-decoration: none; }
.engine-badge { padding: 5px 9px; border-radius: 4px; background: #f2f4f7; color: var(--muted); font-size: 12px; font-weight: 700; }
.engine-badge.is-ready { background: #ecfdf3; color: var(--green); }
.engine-badge.is-offline { background: #fff6ed; color: var(--amber); }
.alpha-loading { display: grid; min-height: calc(100vh - 68px); place-items: center; color: var(--muted); }
.alpha-workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: calc(100vh - 68px); }
.project-rail { display: grid; grid-template-rows: auto minmax(240px, 1fr) auto; gap: 14px; padding: 18px; border-right: 1px solid var(--line); background: #fff; }
.rail-heading, .research-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rail-heading h2, .research-heading h1, .section-title h2, .readiness-panel h2 { margin: 0; }
.rail-heading button { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--blue); font-size: 22px; }
.project-list { display: grid; align-content: start; gap: 7px; overflow-y: auto; }
.project-item { display: grid; gap: 4px; padding: 10px 11px; border: 1px solid transparent; border-radius: 6px; background: #f8fafc; color: var(--ink); text-align: left; }
.project-item:hover, .project-item.is-active { border-color: #9db4e8; background: #f0f5ff; }
.project-item small { color: var(--muted); }
.engine-panel { padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }
.engine-panel > div { display: flex; justify-content: space-between; gap: 8px; }
.engine-panel ul { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.research-canvas { width: min(1280px, 100%); margin: 0 auto; padding: 22px 26px 60px; }
.research-heading { margin-bottom: 8px; }
.research-heading h1 { font-size: 24px; }
.research-actions { display: flex; flex-wrap: wrap; gap: 8px; }
button.primary, button.secondary { min-height: 38px; padding: 8px 13px; border-radius: 6px; font-weight: 700; }
button.primary { border: 1px solid var(--blue); background: var(--blue); color: #fff; }
button.secondary { border: 1px solid var(--line); background: #fff; color: var(--ink); }
button:disabled { cursor: not-allowed; opacity: .55; }
.status { min-height: 22px; margin: 0 0 12px; color: var(--muted); }
.research-section { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; margin-top: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.section-title { display: flex; align-items: flex-start; gap: 10px; }
.section-title > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 5px; background: #eef3fb; color: var(--blue); font-size: 12px; font-weight: 800; }
.section-title h2 { font-size: 16px; }
.field-grid { display: grid; gap: 12px; }
.dataset-fields { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.model-fields { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
.dataset-section > div:last-child { min-width: 0; }
.dataset-runtime { grid-column: 2; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.dataset-runtime-fields { display: grid; grid-template-columns: minmax(190px, 1.2fr) minmax(180px, 1fr) minmax(160px, auto); gap: 10px; align-items: end; }
.dataset-runtime-fields #alpha-custom-symbols-field { grid-column: 1 / span 2; }
.dataset-runtime-fields textarea { resize: vertical; }
.sync-button { min-height: 39px; }
.dataset-summary { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
label { color: #344054; font-weight: 600; }
label input, label select, label textarea { width: 100%; margin-top: 6px; padding: 9px 10px; border: 1px solid #cfd5df; border-radius: 6px; background: #fff; color: var(--ink); outline: none; }
label input:focus, label select:focus, label textarea:focus { border-color: #7a9be1; box-shadow: 0 0 0 3px rgba(36,88,198,.1); }
.factor-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 8px; }
.factor-grid label { position: relative; cursor: pointer; }
.factor-grid input { position: absolute; opacity: 0; pointer-events: none; }
.factor-grid span { display: grid; gap: 2px; min-height: 62px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.factor-grid small { color: var(--muted); font-weight: 400; }
.factor-grid label:has(input:checked) span { border-color: #7a9be1; background: #f0f5ff; box-shadow: inset 3px 0 var(--blue); }
.notes-section textarea { resize: vertical; line-height: 1.6; }
.human-confirm { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; color: var(--muted); font-weight: 500; }
.human-confirm input { width: 16px; margin: 3px 0 0; }
.readiness-panel { display: grid; grid-template-columns: 160px minmax(0, 1fr) 220px; gap: 18px; align-items: center; margin-top: 12px; padding: 18px 20px; border: 1px solid #d5d9de; border-radius: 8px; background: #20252b; color: #fff; }
.readiness-panel small, .readiness-panel li { color: #c8ced6; }
.readiness-panel ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.readiness-panel li > span, .readiness-panel li > button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; }
.readiness-panel li > button { border: 0; background: transparent; color: #ffd98e; text-align: left; }
.readiness-panel li > button:hover { color: #fff; }
.readiness-panel li > button small { color: inherit; font-size: 10px; white-space: nowrap; }
.readiness-panel li.is-passed > span::before { content: "✓"; margin-right: 6px; color: #71d9a6; }
.readiness-attention { animation: readiness-attention 1.7s ease; }
@keyframes readiness-attention { 0%, 100% { box-shadow: none; } 18%, 62% { box-shadow: 0 0 0 4px rgba(245, 174, 55, .36); border-color: #e6a838; } }
.train-button { min-height: 42px; padding: 9px 13px; border: 1px solid #626a74; border-radius: 6px; background: #343b43; color: #d9dee5; font-weight: 700; }
.train-button:not(:disabled) { border-color: #fff; background: #fff; color: #20252b; }
.runtime-content { min-width: 0; }
.task-state { min-height: 60px; }
.task-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(220px, 2fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.task-row:last-child { border-bottom: 0; }
.task-row strong, .task-row small { display: block; }
.task-row small { color: var(--muted); }
.task-progress { height: 7px; overflow: hidden; border-radius: 2px; background: #e9edf2; }
.task-progress span { display: block; height: 100%; background: var(--blue); transition: width .25s ease; }
.task-status { min-width: 70px; text-align: right; font-size: 12px; font-weight: 700; }
.task-status.is-failed { color: #b42318; }
.task-status.is-succeeded { color: var(--green); }
.task-running { display: flex; align-items: center; gap: 10px; }
.bounce-loader { position: relative; width: 54px; height: 24px; flex: 0 0 54px; }
.bounce-loader i { position: absolute; bottom: 5px; width: 9px; height: 9px; border-radius: 50%; background: #555; animation: alpha-bounce .55s alternate infinite ease; }
.bounce-loader i:nth-child(1) { left: 2px; }
.bounce-loader i:nth-child(2) { left: 22px; animation-delay: .15s; }
.bounce-loader i:nth-child(3) { left: 42px; animation-delay: .3s; }
@keyframes alpha-bounce { from { transform: translateY(0) scaleX(1.3); opacity: .55; } to { transform: translateY(-11px) scaleX(1); opacity: 1; } }
.alpha-result { margin-top: 18px; }
.result-context { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 12px; border-left: 3px solid var(--blue); background: #f5f7fa; color: var(--muted); font-size: 12px; }
.result-context strong { color: var(--ink); }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric-item { padding: 12px; border-right: 1px solid var(--line); }
.metric-item:last-child { border-right: 0; }
.metric-item span, .metric-item small { display: block; color: var(--muted); font-size: 11px; }
.metric-item strong { display: block; margin: 3px 0; font-size: 18px; }
.stock-prediction { margin-top: 18px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stock-prediction .result-heading > div { display: grid; gap: 2px; }
.stock-search-row { display: grid; grid-template-columns: minmax(240px, 420px) auto; gap: 10px; align-items: end; margin-top: 12px; }
.stock-search-row label { min-width: 0; }
.stock-search-row button { min-height: 39px; }
.stock-detail { margin-top: 14px; }
.stock-summary { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.stock-summary > div { display: grid; gap: 2px; padding: 11px 12px; border-right: 1px solid var(--line); background: #fff; }
.stock-summary > div:last-child { border-right: 0; }
.stock-summary span, .stock-summary small { color: var(--muted); font-size: 11px; }
.stock-summary strong { font-size: 16px; }
.is-positive { color: var(--green); }
.is-negative { color: #b42318; }
.is-neutral { color: var(--muted); }
.stock-factor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.stock-factor-heading span { color: var(--muted); font-size: 11px; }
.stock-factor-list { display: grid; gap: 5px; margin-top: 8px; }
.stock-factor-row { display: grid; grid-template-columns: minmax(145px, .8fr) minmax(150px, 1.4fr) minmax(120px, .7fr); gap: 12px; align-items: center; min-height: 42px; padding: 5px 0; border-bottom: 1px solid #edf0f4; }
.stock-factor-row > div { display: grid; }
.stock-factor-row small { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
.stock-factor-row > b { text-align: right; font-size: 12px; }
.contribution-track { position: relative; height: 8px; background: linear-gradient(to right, #f5d8d4 0 49.5%, #8b95a5 49.5% 50.5%, #d7eee1 50.5% 100%); }
.contribution-track i { position: absolute; top: 0; bottom: 0; max-width: 50%; }
.contribution-track i.is-positive { left: 50%; background: var(--green); }
.contribution-track i.is-negative { right: 50%; background: #b42318; }
.contribution-track i.is-neutral { left: 50%; background: #8b95a5; }
.result-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 24px; margin-top: 18px; }
.result-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.result-heading h3 { margin: 0; font-size: 15px; }
.result-heading span { color: var(--muted); font-size: 11px; }
.result-table-wrap { overflow-x: auto; }
.result-table-wrap table { width: 100%; border-collapse: collapse; }
.result-table-wrap th, .result-table-wrap td { padding: 8px 9px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.result-table-wrap th { color: var(--muted); font-size: 11px; }
.stock-link { padding: 0; border: 0; background: transparent; color: var(--blue); font-weight: 700; }
.stock-link:hover { text-decoration: underline; }
.importance-list { display: grid; gap: 7px; }
.importance-row { display: grid; grid-template-columns: 120px minmax(40px, 1fr) 48px; gap: 8px; align-items: center; font-size: 12px; }
.importance-row > span:first-child { display: grid; }
.importance-row > span:first-child small { color: var(--muted); font-size: 10px; }
.importance-bar { height: 6px; background: #e9edf2; }
.importance-bar i { display: block; height: 100%; background: #596b84; }
.limitations { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.limitations ul { margin: 6px 0 0; padding-left: 18px; }
.task-log { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.task-log summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.task-log pre { max-height: 320px; overflow: auto; padding: 12px; background: #171b20; color: #d7dce2; font: 12px/1.55 Consolas, monospace; white-space: pre-wrap; }
.empty { color: var(--muted); }
@media (max-width: 1050px) { .alpha-workspace { grid-template-columns: 230px minmax(0, 1fr); } .factor-grid { grid-template-columns: repeat(3, minmax(120px, 1fr)); } .dataset-fields, .model-fields { grid-template-columns: repeat(2, minmax(140px, 1fr)); } .dataset-runtime-fields { grid-template-columns: repeat(2, minmax(160px, 1fr)); } .result-grid { grid-template-columns: 1fr; } .metric-grid { grid-template-columns: repeat(3, minmax(110px, 1fr)); } .stock-summary { grid-template-columns: repeat(2, minmax(120px, 1fr)); } .stock-summary > div:nth-child(2) { border-right: 0; } .stock-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 760px) { .alpha-topbar, .alpha-session, .research-heading { align-items: flex-start; flex-direction: column; } .alpha-workspace { grid-template-columns: 1fr; } .project-rail { grid-template-rows: auto auto auto; border-right: 0; border-bottom: 1px solid var(--line); } .project-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 220px; } .research-canvas { padding: 16px 12px 40px; } .research-section { grid-template-columns: 1fr; } .dataset-runtime { grid-column: 1; } .dataset-fields, .model-fields, .factor-grid, .dataset-runtime-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dataset-runtime-fields #alpha-custom-symbols-field { grid-column: 1 / -1; } .readiness-panel { grid-template-columns: 1fr; } .task-row { grid-template-columns: 1fr; } .task-status { text-align: left; } .metric-grid { grid-template-columns: repeat(2, minmax(100px, 1fr)); } .stock-search-row, .stock-factor-row { grid-template-columns: 1fr; } .stock-factor-row > b { text-align: left; } .stock-factor-heading { align-items: flex-start; flex-direction: column; } }