/* ═══════════════════════════════════════════════
   大衛交易測試站 — Professional Dashboard Theme
   ═══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #f0f2f6;
  --surface:     #ffffff;
  --surface2:    #f6f8fa;
  --surface3:    #edf0f4;
  --border:      #d0d7de;
  --border-light:#e4e8ef;
  --accent:      #1a7f37;
  --accent-dim:  #116329;
  --accent-pale: rgba(26,127,55,0.08);
  --accent-glow: rgba(26,127,55,0.18);
  --red:         #cf222e;
  --red-pale:    rgba(207,34,46,0.07);
  --blue:        #0969da;
  --amber:       #9a6700;
  --text:        #1f2328;
  --text-2:      #424a53;
  --muted:       #6e7781;
  --shadow-xs:   0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:   0 1px 4px rgba(0,0,0,.08), 0 1px 10px rgba(0,0,0,.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  --font-mono:   'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.6;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ════════════════════════════════════
   HEADER
   ════════════════════════════════════ */
#app { display: flex; flex-direction: column; min-height: 100vh; }

header {
  background: linear-gradient(135deg, #0f2d1a 0%, #1a4d2e 60%, #1e6636 100%);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  flex-wrap: wrap;
  box-shadow: 0 2px 16px rgba(0,0,0,.22);
  position: relative;
  overflow: hidden;
}

header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 40px
  );
  pointer-events: none;
}

header h1 {
  font-size: 1.22rem;
  color: #ffffff;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  position: relative;
}

header .badge {
  font-size: 0.74rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 3px 11px;
  border-radius: 99px;
  color: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  position: relative;
  text-decoration: none;
  transition: background 0.15s;
}

header .badge:hover { background: rgba(255,255,255,0.20); }

header .tagline {
  font-size: 0.80rem;
  color: rgba(255,255,255,0.65);
  flex-basis: 100%;
  padding-top: 2px;
  line-height: 1.5;
  position: relative;
}

/* ════════════════════════════════════
   LAYOUT
   ════════════════════════════════════ */
.main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 0;
}

/* ── Left Panel ── */
#left-panel {
  width: 360px;
  min-width: 300px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}

/* ── Right Panel ── */
#right-panel {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  background: var(--bg);
}

/* ════════════════════════════════════
   SECTION CARDS
   ════════════════════════════════════ */
.section {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--accent);
  font-weight: 800;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.65;
}
.section-hint strong { color: var(--text-2); font-weight: 600; }
.section-hint em { font-style: italic; }

/* ════════════════════════════════════
   FORM CONTROLS
   ════════════════════════════════════ */
label {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  margin-bottom: 5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

input[type="text"],
input[type="number"],
input[type="date"],
select {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale);
  background: var(--surface);
}

input:hover:not(:focus), select:hover:not(:focus) {
  border-color: #b0b8c4;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.form-group { margin-bottom: 12px; }

/* ════════════════════════════════════
   BUTTONS
   ════════════════════════════════════ */
button {
  font-family: var(--font-mono);
  cursor: pointer;
  border: none;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}

button:active { transform: scale(0.97); }

.btn-primary {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(26,127,55,0.35), 0 1px 3px rgba(26,127,55,0.20);
  border-radius: 8px;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1e9040 0%, var(--accent) 100%);
  box-shadow: 0 4px 16px rgba(26,127,55,0.45), 0 1px 4px rgba(26,127,55,0.25);
  transform: translateY(-1px);
}

.btn-primary:disabled {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn-secondary {
  padding: 7px 14px;
  background: var(--surface2);
  color: var(--text-2);
  border: 1px solid var(--border);
  font-size: 0.80rem;
  border-radius: var(--radius-sm);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-pale);
}

.btn-add {
  padding: 7px 12px;
  background: transparent;
  color: var(--accent);
  border: 1.5px dashed rgba(26,127,55,0.45);
  font-size: 0.80rem;
  margin-top: 8px;
  width: 100%;
  border-radius: var(--radius-sm);
}

.btn-add:hover {
  background: var(--accent-pale);
  border-color: var(--accent);
  border-style: solid;
}

.remove-btn {
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  flex-shrink: 0;
}

.remove-btn:hover { color: var(--red); border-color: var(--red); background: var(--red-pale); }

/* ════════════════════════════════════
   LOGIC TOGGLE
   ════════════════════════════════════ */
.logic-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.logic-row label { margin: 0; font-size: 0.80rem; }
.logic-row select { width: auto; padding: 4px 8px; }

/* ════════════════════════════════════
   CONDITION ROWS
   ════════════════════════════════════ */
.condition-row {
  margin-bottom: 10px;
  background: var(--surface2);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 9px 11px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.condition-row:hover {
  border-color: #b5bec9;
  box-shadow: var(--shadow-xs);
}

.cond-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cond-controls select,
.cond-controls input { width: auto; }

.cond-hint {
  font-size: 0.71rem;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.5;
  padding-left: 2px;
}

.type-select  { min-width: 150px; flex-shrink: 0; font-size: 0.80rem; }
.op-select    { width: 58px; flex-shrink: 0; font-size: 0.82rem; }
.value-input  { width: 70px; flex-shrink: 0; font-size: 0.82rem; }
.value-placeholder { color: var(--muted); font-size: 0.78rem; padding: 0 4px; }

.param-group { display: flex; gap: 6px; flex-wrap: wrap; }

.param-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--muted);
}

.param-label input { width: 56px; font-size: 0.80rem; }

/* ════════════════════════════════════
   RUN BUTTON AREA
   ════════════════════════════════════ */
#run-btn-container { position: relative; }

#loading-spinner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 10px;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

#error-msg {
  display: none;
  background: var(--red-pale);
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--red);
  font-size: 0.85rem;
  margin-top: 10px;
  line-height: 1.55;
}

/* ════════════════════════════════════
   GUIDE CARD
   ════════════════════════════════════ */
.guide-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
}

.guide-card summary {
  font-size: 0.80rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.guide-card summary::before {
  content: '▶';
  font-size: 0.60rem;
  transition: transform 0.2s;
}

.guide-card[open] summary::before { transform: rotate(90deg); }

.guide-steps {
  margin: 12px 0 12px 22px;
  font-size: 0.84rem;
  line-height: 1.95;
  color: var(--text-2);
}

.guide-steps strong { color: var(--accent); }

.guide-note {
  font-size: 0.79rem;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
  line-height: 1.65;
}

.guide-note strong { color: var(--text-2); }

.indicator-ref { margin-top: 12px; }

.indicator-ref-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 8px;
  border-top: 1px solid var(--border-light);
  padding-top: 10px;
  font-weight: 600;
}

.indicator-ref-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.indicator-ref-grid div {
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 8px 10px;
  line-height: 1.5;
}

.indicator-ref-grid strong { color: var(--text-2); }

/* ════════════════════════════════════
   OPTIMIZATION PANEL
   ════════════════════════════════════ */
.opt-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.opt-toggle-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.opt-toggle-row span {
  font-size: 0.86rem;
  color: var(--text-2);
  font-weight: 500;
}

#opt-panel { display: none; margin-top: 14px; }

.opt-param-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.opt-label { min-width: 150px; font-size: 0.76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Two-line layout: name on top, inputs below */
.opt-param-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--surface2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

.opt-param-name {
  font-size: 0.78rem;
  color: var(--text-2);
  font-weight: 600;
}

.opt-param-inputs {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}

.opt-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
}

.opt-input-label {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.opt-input-group input {
  width: 100%;
  font-size: 0.82rem;
  text-align: center;
}

.opt-metric-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
}

.opt-metric-row label { margin: 0; white-space: nowrap; }
.opt-metric-row select { width: auto; }

.progress-bar {
  display: none;
  height: 5px;
  background: var(--surface2);
  border-radius: 3px;
  margin: 10px 0;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #22c55e);
  width: 0%;
  transition: width 0.2s;
}

#opt-progress-text {
  font-size: 0.76rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.opt-combo-warn {
  font-size: 0.78rem;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  line-height: 1.5;
  border: 1px solid;
}

/* amber warning for large combos, subtle green for small */
.opt-combo-warn:not(:empty) {
  background: rgba(154,103,0,0.08);
  border-color: rgba(154,103,0,0.35);
  color: var(--amber);
}

/* ════════════════════════════════════
   CHART AREA — hero element
   ════════════════════════════════════ */
.chart-section {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  background: linear-gradient(to bottom, var(--surface) 0%, var(--surface2) 100%);
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
}

.chart-bar-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.chart-bar-control label {
  margin: 0;
  white-space: nowrap;
  font-size: 0.76rem;
  color: var(--muted);
}

.chart-bar-control select { width: auto; padding: 5px 8px; font-size: 0.80rem; }

.chart-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.chart-tab {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 6px 16px;
  font-size: 0.80rem;
  border-radius: 99px;
  font-weight: 500;
  transition: all 0.15s;
}

.chart-tab.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-pale);
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.chart-tab:hover:not(.active) {
  color: var(--text);
  border-color: #b0b8c4;
  background: var(--surface3);
}

.chart-pane { display: none; width: 100%; }

.chart-pane > div {
  width: 100%;
  min-height: 600px;
}

/* ════════════════════════════════════
   STATS GRID
   ════════════════════════════════════ */
#stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 12px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: box-shadow 0.15s, transform 0.15s;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--border-light);
  border-radius: var(--radius) var(--radius) 0 0;
}

.stat-card.pos::before { background: linear-gradient(90deg, var(--accent), #22c55e); }
.stat-card.neg::before { background: linear-gradient(90deg, var(--red), #f87171); }

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-label {
  font-size: 0.70rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
  font-weight: 600;
}

.stat-value {
  font-size: 1.20rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.stat-card.pos .stat-value { color: var(--accent); }
.stat-card.neg .stat-value { color: var(--red); }

/* ════════════════════════════════════
   TRADE LOG
   ════════════════════════════════════ */
#trade-log-section { display: none; }

.table-scroll { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

th {
  background: var(--surface2);
  color: var(--muted);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 0.70rem;
  letter-spacing: 0.07em;
  font-weight: 700;
}

td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

tr:last-child td { border-bottom: none; }

.win-row  td:first-child { border-left: 3px solid var(--accent); }
.loss-row td:first-child { border-left: 3px solid var(--red); }

tr:hover td { background: var(--surface2); }

.pos { color: var(--accent); font-weight: 700; }
.neg { color: var(--red);    font-weight: 700; }

/* ── Optimization Results Table ── */
.opt-table { font-size: 0.82rem; }
.opt-row   { cursor: pointer; }
.opt-row:hover td { background: var(--accent-pale); }
.param-cell { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }

/* ── Export Buttons ── */
#export-section { display: none; }
.export-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Placeholder ── */
.placeholder-text {
  color: var(--muted);
  font-size: 0.90rem;
  text-align: center;
  padding: 60px 20px;
  line-height: 1.9;
}

/* ════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════ */
@media (max-width: 960px) {
  .main-layout  { flex-direction: column; }
  #left-panel   { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 65vh; }
  #right-panel  { overflow-y: unset; padding: 16px; }
  .indicator-ref-grid { grid-template-columns: 1fr; }
  .chart-pane > div { min-height: 460px; }
}

@media (max-width: 540px) {
  html, body     { font-size: 14px; }
  .form-row      { grid-template-columns: 1fr; }
  #stats-grid    { grid-template-columns: 1fr 1fr; }
  header         { padding: 12px 16px; }
  #left-panel, #right-panel { padding: 14px; }
  .chart-pane > div { min-height: 360px; }
}