:root {
/* Modern FinTech Professional Dark Theme */
--bg: #09090b; 
--panel: #18181b; 
--panel-strong: #27272a; 
--line: #3f3f46; 
--text: #f4f4f5; 
--muted: #a1a1aa; 
--accent: #3b82f6; 
--accent-dark: #60a5fa; 
--accent-bg: rgba(59, 130, 246, 0.15);
--accent-border: rgba(59, 130, 246, 0.3);
--green: #10b981;
--green-bg: rgba(16, 185, 129, 0.15);
--amber: #f59e0b;
--amber-bg: rgba(245, 158, 11, 0.15);
--red: #ef4444;
--red-bg: rgba(239, 68, 68, 0.15);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
--radius: 8px;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.6;
}
/* Layouts */
.shell { width: min(1280px, calc(100% - 32px)); margin: 32px auto 64px; }
.login-shell { width: min(480px, calc(100% - 32px)); margin: 10vh auto; }
/* Panels & Cards */
.hero, .panel { 
background: var(--panel); 
border: 1px solid var(--line); 
border-radius: var(--radius); 
box-shadow: var(--shadow); 
padding: 24px;
}
.hero-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
user-select: none;
}
.hero-header-grid {
flex: 1;
}
.hero-toggle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: var(--muted);
cursor: pointer;
transition: background 0.15s, transform 0.25s;
}
.hero-toggle-btn:focus-visible { outline: 2px solid rgba(96, 165, 250, 0.6); outline-offset: 2px; }
.hero-header[aria-expanded="true"] .hero-toggle-btn { transform: rotate(180deg); }
.hero-body { display: none; }
.hero-body.is-open { display: block; }
.hero::after { display: none; }
.hero { position: relative; overflow: hidden; }
.panel + .panel { margin-top: 24px; }
/* Typography */
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.2; }
h2 { font-size: 1.25rem; }
p { color: var(--muted); margin: 0 0 1rem 0; }
p:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }
.summary-text { line-height: 1.8; color: var(--muted); }
/* Meta & Lists */
.hero-meta, .card-meta, .actions, .source-chip-list, .warning-list, .detail-meta, .chips, .alert-list { 
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.hero-meta { margin-top: 16px; }
/* Chips & Badges */
.chip, .badge, .alert, .warning-list span { 
display: inline-flex; align-items: center; gap: 6px; 
padding: 6px 12px; border-radius: 6px; 
background: var(--accent-bg); 
border: 1px solid var(--accent-border); 
color: var(--accent-dark); 
font-size: 0.85rem; font-weight: 500;
}
.badge-small {
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
background: var(--accent-bg);
color: var(--accent-dark);
border: 1px solid var(--accent-border);
}
.badge-small.good { background: var(--green-bg); color: var(--green); border-color: rgba(16, 185, 129, 0.35); }
.badge-small.watch { background: var(--amber-bg); color: var(--amber); border-color: rgba(245, 158, 11, 0.35); }
.badge-small.risk { background: var(--red-bg); color: var(--red); border-color: rgba(239, 68, 68, 0.35); }
.badge-small.neutral { background: rgba(63, 63, 70, 0.38); color: var(--text); border-color: rgba(161, 161, 170, 0.25); }
<?= dashboard_trend_phase_badge_css(['.chip', '.badge', '.badge-small']) ?>
.alert, .warning-list span { background: var(--amber-bg); border-color: rgba(245, 158, 11, 0.3); color: var(--amber); }
/* Grids */
.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; margin-top: 20px; }
.stats, .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 20px; }
.double-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
/* Card Elements */
.stock-card, .card, .stat, .metric, .detail-item, .note-item, .reason-box, .source-box, .news-box, .data-box, .insight-item, .muted-box { 
padding: 16px; border-radius: var(--radius); 
border: 1px solid var(--line); 
background: var(--panel-strong); 
transition: border-color 0.2s;
}
.stock-card { display: flex; flex-direction: column; gap: 16px; background: var(--panel); text-decoration: none; }
.stock-card:hover { border-color: var(--accent-dark); }
.stock-title { display: flex; flex-direction: column; gap: 4px; }
.stock-title strong { font-size: 1.25rem; font-weight: 600; color: var(--text); }
.stock-title span { color: var(--muted); font-size: 0.9rem; }
/* Inner Text */
.stat strong, .metric strong, .card strong, .insight-item strong { display: block; color: var(--text); font-size: 1.1rem; margin-bottom: 4px; }
.stat span, .metric span, .card span, .insight-item span { display: block; color: var(--muted); font-size: 0.85rem; }
/* Layout specific adjustments */
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.insight-list, .note-list { display: grid; gap: 12px; margin-top: 16px; }
/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.timeline-item { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.timeline-item:last-child { border-bottom: none; padding-bottom: 0; }
.timeline-time { color: var(--accent-dark); font-weight: 500; font-size: 0.9rem; }
/* Forms & Inputs */
.login-form, .password-form, .form-grid, .date-form { display: grid; gap: 16px; }
.form-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
input, textarea, select { 
width: 100%; padding: 10px 14px; 
border-radius: 6px; border: 1px solid var(--line); 
background: var(--bg); color: var(--text); 
font: inherit; font-size: 0.95rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
input[readonly] {
background: rgba(255, 255, 255, 0.03);
color: var(--text);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
textarea { min-height: 100px; resize: vertical; }
/* Buttons */
.actions a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 6px; font-weight: 500; text-decoration: none; transition: all 0.2s; background: var(--panel-strong); color: var(--text); border: 1px solid var(--line); }
.actions a:hover { background: var(--line); }
.button-link, button { 
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: 6px; padding: 10px 18px; 
font-size: 0.95rem; font-weight: 500; cursor: pointer; 
text-decoration: none; transition: all 0.2s; 
}
.btn-primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.btn-primary:hover { background: #2563eb; opacity: 0.9; }
.btn-secondary { background: var(--panel-strong); color: var(--text); border: 1px solid var(--line); }
.btn-secondary:hover { background: var(--line); }
/* Alerts / Flash messages */
.flash, .error { margin-top: 16px; padding: 12px 16px; border-radius: 6px; font-size: 0.9rem; font-weight: 500; }
.flash { background: var(--green-bg); color: var(--green); border: 1px solid rgba(16, 185, 129, 0.3); }
.error { background: var(--red-bg); color: var(--red); border: 1px solid rgba(239, 68, 68, 0.3); }
/* Tables */
table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 0.9rem; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
tr:hover td { background: var(--panel-strong); }
/* Empty states */
.empty { padding: 48px 24px; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; color: var(--muted); font-size: 0.95rem; }
/* List/Table View */
.stock-list { width: 100%; margin-top: 20px; }
.stock-list thead { background: var(--panel-strong); }
.stock-list th { 
text-align: left; padding: 12px 14px; color: var(--text); 
font-weight: 600; font-size: 0.85rem; border-bottom: 2px solid var(--line); 
cursor: pointer; user-select: none;
}
.stock-list th:hover { background: var(--line); }
.stock-list th.sortable::after { content: ' ⇅'; opacity: 0.4; font-size: 0.8rem; }
.stock-list tbody tr { border-bottom: 1px solid var(--line); transition: background 0.2s; }
.stock-list tbody tr:hover { background: var(--panel-strong); }
.stock-list td { padding: 12px 14px; color: var(--text); font-size: 0.9rem; vertical-align: middle; }
.stock-list td.muted { color: var(--muted); }
.stock-list .badge-small { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 500; background: var(--accent-bg); color: var(--accent-dark); border: 1px solid var(--accent-border); }
.stock-list .badge-small.good { background: var(--green-bg); color: var(--green); border-color: rgba(16, 185, 129, 0.35); }
.stock-list .badge-small.watch { background: var(--amber-bg); color: var(--amber); border-color: rgba(245, 158, 11, 0.35); }
.stock-list .badge-small.risk { background: var(--red-bg); color: var(--red); border-color: rgba(239, 68, 68, 0.35); }
.stock-list .badge-small.neutral { background: rgba(63, 63, 70, 0.38); color: var(--text); border-color: rgba(161, 161, 170, 0.25); }
.stock-list .badge-small.dual-model { background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(59, 130, 246, 0.18)); color: #fde68a; border-color: rgba(251, 191, 36, 0.4); }
<?= dashboard_trend_phase_badge_css(['.stock-list .badge-small']) ?>
.stock-list .action-link {
color: var(--accent);
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid transparent;
transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.stock-list .action-link:hover {
color: var(--accent-dark);
border-bottom-color: var(--accent-dark);
background: var(--accent-bg);
}
.stock-list td strong .action-link {
padding: 1px 3px;
border-radius: 4px;
}
.stock-list td > .action-link {
display: inline-block;
padding: 2px 4px;
border-radius: 4px;
}
.stock-list tbody tr.dual-highlight td {
background: linear-gradient(90deg, rgba(251, 191, 36, 0.10), rgba(59, 130, 246, 0.08));
}
.stock-list tbody tr.dual-highlight:hover td {
filter: brightness(1.06);
}
.dual-model-panel {
margin-top: 24px;
border: 1px solid rgba(251, 191, 36, 0.35);
border-radius: 14px;
background:
radial-gradient(circle at top left, rgba(251, 191, 36, 0.16), transparent 34%),
radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 32%),
linear-gradient(180deg, rgba(39, 39, 42, 0.96), rgba(24, 24, 27, 0.98));
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}
.dual-model-grid { display: grid; gap: 14px; margin-top: 18px; }
.smart-money-follow-list {
display: grid;
gap: 12px;
margin-top: 18px;
}
.smart-money-follow-row.is-buy {
border-color: rgba(16, 185, 129, 0.28);
background: linear-gradient(90deg, rgba(6, 78, 59, 0.12), rgba(24, 24, 27, 0.96));
}
.smart-money-follow-row.is-sell {
border-color: rgba(248, 113, 113, 0.28);
background: linear-gradient(90deg, rgba(127, 29, 29, 0.12), rgba(24, 24, 27, 0.96));
}
.smart-money-follow-rank-value {
font-size: 1.35rem;
font-weight: 700;
color: #93c5fd;
margin-top: 2px;
}
.smart-money-follow-row.is-buy .smart-money-follow-rank-value {
color: #6ee7b7;
}
.smart-money-follow-row.is-sell .smart-money-follow-rank-value {
color: #fca5a5;
}
.smart-money-follow-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px 12px;
}
.smart-money-signal-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 8px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.smart-money-signal-chip.buy {
background: rgba(16, 185, 129, 0.18);
border: 1px solid rgba(16, 185, 129, 0.35);
color: #bbf7d0;
}
.smart-money-signal-chip.hold {
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(251, 191, 36, 0.28);
color: #fde68a;
}
.smart-money-signal-chip.sell {
background: rgba(248, 113, 113, 0.14);
border: 1px solid rgba(248, 113, 113, 0.32);
color: #fecaca;
}
.smart-money-metric-label {
font-size: 0.72rem;
line-height: 1.35;
}
.smart-money-follow-legend-list {
margin: 10px 0 0;
padding-left: 1.1rem;
font-size: 0.8rem;
line-height: 1.65;
}
.smart-money-follow-legend-list li + li {
margin-top: 6px;
}
.operation-compare-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 8px;
}
.operation-compare-column {
display: grid;
gap: 8px;
align-content: start;
}
.operation-compare-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.operation-compare-stack {
display: grid;
gap: 8px;
}
.operation-compare-step {
min-height: 86px;
padding: 10px 12px;
border-radius: 8px;
text-align: left;
background: rgba(39, 39, 42, 0.9);
border: 1px solid rgba(161, 161, 170, 0.18);
}
.operation-compare-step.placeholder {
opacity: 0.52;
border-style: dashed;
}
.dual-model-card {
display: grid;
grid-template-columns: 96px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
align-items: start;
padding: 16px;
border-radius: 12px;
border: 1px solid rgba(251, 191, 36, 0.18);
background: rgba(9, 9, 11, 0.28);
}
.dual-model-rank { display: grid; gap: 6px; }
.dual-model-rank strong { font-size: 1.35rem; color: #fcd34d; }
.dual-model-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dual-model-title strong { font-size: 1rem; }
.dual-model-card .model-chip {
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
border: 1px solid rgba(251, 191, 36, 0.25);
background: rgba(251, 191, 36, 0.12);
color: #fde68a;
}
.dual-model-card .model-chip.tech {
border-color: rgba(96, 165, 250, 0.28);
background: rgba(59, 130, 246, 0.12);
color: #bfdbfe;
}
.dual-model-card .model-chip.capital {
border-color: rgba(16, 185, 129, 0.30);
background: rgba(16, 185, 129, 0.12);
color: #bbf7d0;
}
.dual-model-card .badge-small {
border-radius: 999px;
padding: 5px 10px;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.01em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.dual-model-card .badge-small.dual-stage {
border-width: 1px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.dual-model-card .badge-small.dual-capital.good {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.24), rgba(5, 150, 105, 0.10));
border-color: rgba(16, 185, 129, 0.40);
color: #d1fae5;
}
.dual-model-card .badge-small.dual-capital.watch {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.24), rgba(217, 119, 6, 0.10));
border-color: rgba(245, 158, 11, 0.40);
color: #fef3c7;
}
.dual-model-card .badge-small.dual-capital.risk {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.24), rgba(185, 28, 28, 0.10));
border-color: rgba(239, 68, 68, 0.40);
color: #fee2e2;
}
.dual-model-card .badge-small.dual-main-force.good {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(37, 99, 235, 0.10));
border-color: rgba(96, 165, 250, 0.36);
color: #dbeafe;
}
.dual-model-card .badge-small.dual-main-force.watch {
background: rgba(63, 63, 70, 0.52);
border-color: rgba(161, 161, 170, 0.28);
color: #e4e4e7;
}
.dual-model-card .badge-small.dual-main-force.neutral {
background: rgba(39, 39, 42, 0.62);
border-color: rgba(113, 113, 122, 0.30);
color: #d4d4d8;
}
.flow-positive { color: var(--green); }
.flow-negative { color: var(--red); }
.flow-neutral { color: var(--muted); }
.flow-summary { display: grid; gap: 4px; }
.flow-value { font-size: 1rem; font-weight: 600; }
.flow-detail { font-size: 0.8rem; color: var(--muted); }
.readonly-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.readonly-card {
padding: 14px;
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--panel-strong);
}
.readonly-card strong { display: block; margin-top: 6px; font-size: 1rem; }
.helper-text { margin-top: 12px; font-size: 0.85rem; color: var(--muted); }
.ai-correlation-shell { display: grid; gap: 18px; margin-top: 18px; }
.ai-correlation-summary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: 18px; align-items: start; }
.ai-summary-panel,
.ai-version-panel,
.ai-correlation-card,
.ai-relation-column,
.ai-relation-item {
border: 1px solid var(--line);
border-radius: 12px;
background: var(--panel-strong);
}
.ai-summary-panel,
.ai-version-panel,
.ai-correlation-card { padding: 18px; }
.ai-summary-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ai-summary-stat { padding: 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); }
.ai-summary-stat strong { display: block; font-size: 1.2rem; color: var(--text); }
.ai-summary-stat span { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--muted); }
.ai-version-list { display: grid; gap: 10px; margin-top: 14px; }
.ai-version-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.16); }
.ai-version-item strong { font-size: 0.9rem; line-height: 1.5; }
.ai-version-item span { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.ai-correlation-list { display: grid; gap: 14px; }
.ai-correlation-card { display: grid; gap: 16px; }
.ai-correlation-header { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.ai-correlation-title { display: grid; gap: 6px; }
.ai-correlation-title strong { font-size: 1.05rem; }
.ai-correlation-meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ai-meta-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 0.78rem; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--muted); }
.ai-relations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ai-relations-grid.single-column { grid-template-columns: 1fr; }
.ai-relation-column { padding: 14px; display: grid; gap: 10px; }
.ai-relation-column.positive { border-color: rgba(16, 185, 129, 0.25); background: rgba(16, 185, 129, 0.06); }
.ai-relation-column.negative { border-color: rgba(239, 68, 68, 0.25); background: rgba(239, 68, 68, 0.06); }
.ai-relation-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.ai-relation-heading strong { font-size: 0.9rem; }
.ai-relation-heading span { font-size: 0.78rem; color: var(--muted); }
.ai-relation-list { display: grid; gap: 10px; }
.ai-relation-item { padding: 12px; background: rgba(9, 9, 11, 0.32); }
.ai-relation-topline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ai-reason { margin-top: 6px; font-size: 0.83rem; line-height: 1.7; color: var(--muted); }
.ai-card-footer { display: flex; flex-wrap: wrap; gap: 8px; }
.comparison-panel {
border-color: rgba(96, 165, 250, 0.24);
background:
radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 32%),
radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.12), transparent 26%),
linear-gradient(180deg, rgba(24, 24, 27, 0.98), rgba(9, 9, 11, 0.98));
}
.comparison-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
user-select: none;
}
.comparison-panel-header h2 { margin: 0; }
.comparison-toggle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: var(--muted);
cursor: pointer;
transition: background 0.15s, transform 0.25s;
}
.comparison-toggle-btn:focus-visible { outline: 2px solid rgba(96, 165, 250, 0.6); outline-offset: 2px; }
.comparison-panel-header[aria-expanded="true"] .comparison-toggle-btn { transform: rotate(180deg); }
.comparison-panel-body { display: none; }
.comparison-panel-body.is-open { display: block; }
.comparison-summary-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 16px;
}
.comparison-summary-card {
padding: 16px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
}
.comparison-summary-card strong {
display: block;
font-size: 1.35rem;
color: var(--text);
}
.comparison-summary-card span {
display: block;
margin-top: 6px;
color: var(--muted);
font-size: 0.82rem;
line-height: 1.7;
}
.comparison-takeaway {
margin-top: 16px;
padding: 16px;
border-radius: 12px;
border: 1px solid rgba(96, 165, 250, 0.18);
background: rgba(59, 130, 246, 0.08);
color: var(--muted);
line-height: 1.8;
}
.comparison-takeaway-list {
display: grid;
gap: 10px;
margin-top: 14px;
}
.comparison-takeaway-item {
padding: 12px 14px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
color: var(--muted);
font-size: 0.88rem;
line-height: 1.75;
}
.comparison-matrix-wrap {
margin-top: 18px;
overflow-x: auto;
}
.comparison-table {
width: 100%;
min-width: 1080px;
}
.comparison-table th {
position: sticky;
top: 0;
background: rgba(24, 24, 27, 0.98);
z-index: 1;
}
.comparison-model-cell {
display: grid;
gap: 8px;
min-width: 220px;
}
.comparison-model-name {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.comparison-family-badge {
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
color: var(--muted);
}
.comparison-family-badge.internal {
border-color: rgba(16, 185, 129, 0.25);
background: rgba(16, 185, 129, 0.10);
color: #bbf7d0;
}
.comparison-family-badge.external {
border-color: rgba(96, 165, 250, 0.25);
background: rgba(59, 130, 246, 0.10);
color: #bfdbfe;
}
.comparison-model-source {
font-size: 0.78rem;
color: var(--muted);
}
.comparison-model-source a,
.comparison-paper-card a {
color: var(--accent-dark);
text-decoration: none;
}
.comparison-model-source a:hover,
.comparison-paper-card a:hover {
text-decoration: underline;
}
.comparison-summary-cell {
min-width: 220px;
font-size: 0.85rem;
line-height: 1.7;
color: var(--muted);
}
.comparison-summary-cell strong {
display: block;
font-size: 0.9rem;
color: var(--text);
margin-bottom: 6px;
}
.comparison-score-cell {
min-width: 90px;
}
.comparison-score-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
padding: 6px 10px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
border: 1px solid transparent;
}
.comparison-score-pill.score-5 {
background: rgba(16, 185, 129, 0.18);
border-color: rgba(16, 185, 129, 0.28);
color: #bbf7d0;
}
.comparison-score-pill.score-4 {
background: rgba(52, 211, 153, 0.14);
border-color: rgba(52, 211, 153, 0.26);
color: #a7f3d0;
}
.comparison-score-pill.score-3 {
background: rgba(245, 158, 11, 0.14);
border-color: rgba(245, 158, 11, 0.26);
color: #fde68a;
}
.comparison-score-pill.score-2 {
background: rgba(251, 146, 60, 0.14);
border-color: rgba(251, 146, 60, 0.24);
color: #fdba74;
}
.comparison-score-pill.score-1 {
background: rgba(239, 68, 68, 0.14);
border-color: rgba(239, 68, 68, 0.28);
color: #fca5a5;
}
.comparison-score-caption {
margin-top: 6px;
font-size: 0.74rem;
color: var(--muted);
}
.comparison-paper-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}
.comparison-paper-card {
padding: 16px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
display: grid;
gap: 10px;
}
.comparison-paper-card strong {
font-size: 0.98rem;
line-height: 1.5;
color: var(--text);
}
.comparison-paper-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.comparison-paper-card p {
margin: 0;
font-size: 0.84rem;
line-height: 1.75;
}
/* --- Responsive utility classes --- */
.hero-header-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: start;
}
.summary-stats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.stock-card-row {
display: grid;
grid-template-columns: 72px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
align-items: start;
padding: 16px;
background: var(--panel-strong);
border: 1px solid var(--line);
border-radius: 10px;
}
.stock-card-row.with-broker-correlation {
grid-template-columns: 72px minmax(0, 1.15fr) minmax(0, 0.9fr) minmax(0, 0.95fr) minmax(340px, 1.45fr);
}
.stock-card-row.is-filtered-out {
display: none !important;
}
.stock-card-row.centered {
align-items: center;
padding: 14px 16px;
}
.stock-card-row.with-broker-correlation.centered {
align-items: start;
}
.table-scroll-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-top: 20px;
border-radius: var(--radius);
}
.broker-correlation-mini-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-top: 8px;
}
.broker-correlation-mini-table {
width: 100%;
min-width: 720px;
margin-top: 0;
font-size: 0.78rem;
}
.broker-correlation-mini-table th,
.broker-correlation-mini-table td {
padding: 8px 10px;
white-space: nowrap;
}
.broker-correlation-mini-table th {
font-size: 0.72rem;
}
.broker-correlation-mini-table td:first-child,
.broker-correlation-mini-table th:first-child {
min-width: 132px;
}
.broker-correlation-mini-table td:nth-child(2),
.broker-correlation-mini-table th:nth-child(2),
.broker-correlation-mini-table td:last-child,
.broker-correlation-mini-table th:last-child {
font-weight: 600;
}
.broker-correlation-caption {
margin-top: 8px;
font-size: 0.76rem;
line-height: 1.65;
color: var(--muted);
}
.broker-correlation-panel-title {
font-size: 0.75rem;
}
.broker-correlation-guidance {
margin-top: 10px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid rgba(96, 165, 250, 0.18);
background: rgba(9, 9, 11, 0.35);
font-size: 0.78rem;
line-height: 1.65;
color: var(--muted);
}
.broker-correlation-guidance strong {
color: var(--text);
}
.broker-activity-matrix-table {
width: 100%;
min-width: 1180px;
border-collapse: collapse;
font-size: 0.84rem;
}
.broker-activity-matrix-table th,
.broker-activity-matrix-table td {
padding: 10px 12px;
border-bottom: 1px solid var(--line);
text-align: right;
vertical-align: top;
white-space: nowrap;
}
.broker-activity-matrix-table th {
color: var(--muted);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
background: rgba(255, 255, 255, 0.02);
}
.broker-activity-matrix-table th.sortable {
cursor: pointer;
user-select: none;
}
.broker-activity-matrix-table th.sortable::after {
content: ' ⇅';
opacity: 0.4;
font-size: 0.8rem;
}
.broker-activity-matrix-table th:first-child,
.broker-activity-matrix-table td:first-child,
.broker-activity-matrix-table th:nth-child(2),
.broker-activity-matrix-table td:nth-child(2) {
text-align: left;
}
.broker-activity-matrix-table tbody tr:hover {
background: rgba(255, 255, 255, 0.025);
}
.broker-activity-stock-code {
font-weight: 700;
color: var(--text);
}
.broker-activity-subnote {
margin-top: 4px;
font-size: 0.74rem;
color: var(--muted);
}
.table-scroll-wrap .stock-list { margin-top: 0; min-width: 1100px; }
@media (max-width: 980px) {
.stock-grid { grid-template-columns: 1fr; }
.stats, .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.double-grid { grid-template-columns: 1fr; }
.shell { padding: 0 12px; width: 100%; margin-top: 16px; margin-bottom: 32px; }
.hero, .panel { padding: 16px; }
.readonly-grid, .form-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dual-model-card { grid-template-columns: 1fr; }
.operation-compare-grid { grid-template-columns: 1fr; }
.ai-correlation-summary,
.ai-relations-grid { grid-template-columns: 1fr; }
.ai-summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-correlation-header { grid-template-columns: 1fr; display: grid; }
.ai-correlation-meta { justify-content: flex-start; }
.comparison-summary-grid,
.comparison-paper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-header-grid { grid-template-columns: 1fr; }
.hero-meta-info { text-align: left !important; }
.summary-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stock-card-row { grid-template-columns: 1fr; }
.stock-card-row > *:first-child {
display: flex;
gap: 12px;
align-items: center;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
}
@media (max-width: 640px) {
.metrics, .stats, .grid { grid-template-columns: 1fr; }
.timeline-item { grid-template-columns: 1fr; gap: 4px; }
.readonly-grid, .form-grid.two-up { grid-template-columns: 1fr; }
.hero, .panel { padding: 14px; }
.shell { padding: 0 10px; }
.comparison-summary-grid,
.comparison-paper-grid { grid-template-columns: 1fr; }
.ai-summary-stats { grid-template-columns: 1fr; }
.summary-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
h1 { font-size: clamp(1.4rem, 5vw, 1.75rem); }
.actions a, .button-link { min-height: 44px; }
}
.homepage-broker-slot-wrap {
margin-top: 8px;
}
.homepage-broker-slot-toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: 6px;
}
.homepage-broker-reload-btn {
appearance: none;
border: 1px solid rgba(96, 165, 250, 0.35);
background: rgba(30, 58, 138, 0.22);
color: #bfdbfe;
border-radius: 999px;
padding: 4px 10px;
font-size: 0.72rem;
line-height: 1.4;
cursor: pointer;
}
.homepage-broker-reload-btn:hover:not(:disabled) {
background: rgba(37, 99, 235, 0.35);
border-color: rgba(147, 197, 253, 0.55);
}
.homepage-broker-reload-btn:disabled {
opacity: 0.55;
cursor: wait;
}
.homepage-component-slot.is-error {
border-left: 2px solid rgba(248, 113, 113, 0.45);
padding-left: 8px;
}