:root {
      --bg: #0d1117;
      --card-bg: #161b22;
      --border: #30363d;
      --text: #c9d1d9;
      --text-bright: #f0f6fc;
      --primary: #388bfd;
      --danger: #da3633;
      --warning: #d29922;
      --input-bg: #090d13;
      --card-sub: #1c2128;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    body { background: var(--bg); color: var(--text); padding: 24px 16px; display: flex; justify-content: center; }
    .container { width: 100%; max-width: 680px; }

    header { margin-bottom: 24px; text-align: center; }
    header h1 { font-size: 1.5rem; color: var(--text-bright); margin-bottom: 8px; }
    header p { font-size: 0.85rem; color: #8b949e; line-height: 1.4; }

    .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
    .section-title { font-size: 0.95rem; font-weight: 600; color: var(--text-bright); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px; }

    .btn-group { display: flex; gap: 8px; margin-bottom: 16px; }
    .btn-group button {
      flex: 1; padding: 10px; border: 1px solid var(--border); background: var(--input-bg);
      color: var(--text); border-radius: 8px; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: all 0.2s;
    }
    .btn-group button.active { background: var(--primary); color: #fff; border-color: var(--primary); }

    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
    .input-group { margin-bottom: 14px; }
    .input-group label { display: block; font-size: 0.82rem; color: #8b949e; margin-bottom: 6px; }
    .input-group input {
      width: 100%; padding: 10px 12px; background: var(--input-bg); border: 1px solid var(--border);
      border-radius: 8px; color: var(--text-bright); font-size: 0.95rem; outline: none; transition: border-color 0.2s;
    }
    .input-group input:focus { border-color: var(--primary); }
    .input-help { font-size: 0.72rem; color: #6e7681; line-height: 1.4; margin-top: 6px; }

    /* 結果呈現看板 */
    .result-hero { text-align: center; padding: 24px 16px; background: linear-gradient(180deg, rgba(56, 139, 253, 0.08) 0%, transparent 100%); border-radius: 10px; margin-bottom: 16px; border: 1px solid rgba(56, 139, 253, 0.2); }
    .hero-label { font-size: 0.85rem; color: #8b949e; margin-bottom: 4px; }
    .hero-value { font-size: 3rem; font-weight: 800; color: #58a6ff; line-height: 1.1; }
    .hero-sub { font-size: 0.82rem; color: #8b949e; margin-top: 6px; }

    /* 中性雙向壓測展示區 */
    .dual-panel { display: none; margin: 16px 0; border: 1px dashed var(--border); border-radius: 10px; padding: 14px; background: rgba(0,0,0,0.2); }
    .dual-header { font-size: 0.82rem; font-weight: 600; color: #8b949e; margin-bottom: 10px; display: flex; justify-content: space-between; }
    .dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .dual-box {
      background: var(--card-sub); border: 1.5px solid var(--border); border-radius: 8px; padding: 12px;
      position: relative; cursor: pointer; transition: all 0.2s ease;
    }
    .dual-box:hover { border-color: #58a6ff; background: rgba(56, 139, 253, 0.05); }

    /* 僅選中側顯示高亮 */
    .dual-box.selected { border-color: var(--primary); background: rgba(56, 139, 253, 0.1); box-shadow: 0 0 10px rgba(56, 139, 253, 0.15); }
    .box-title { font-size: 0.8rem; color: #8b949e; margin-bottom: 6px; }
    .box-lev { font-size: 1.35rem; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; }
    .box-sub { font-size: 0.74rem; color: #8b949e; line-height: 1.3; }

    .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
    .stat-item { background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
    .stat-label { font-size: 0.78rem; color: #8b949e; margin-bottom: 4px; }
    .stat-value { font-size: 1.05rem; font-weight: 600; color: var(--text-bright); word-break: normal; overflow-wrap: anywhere; }

    .composition-bar { margin: 16px 0 6px 0; }
    .bar-labels { display: flex; justify-content: space-between; font-size: 0.78rem; color: #8b949e; margin-bottom: 4px; }
    .bar-track { height: 10px; background: #21262d; border-radius: 5px; overflow: hidden; display: flex; }
    .bar-base { background: #388bfd; transition: width 0.3s; }
    .bar-dca { background: #238636; transition: width 0.3s; }

    .alert { padding: 12px; border-radius: 8px; font-size: 0.85rem; margin-top: 14px; line-height: 1.4; display: none; }
    .alert.danger { background: rgba(218, 54, 51, 0.15); border: 1px solid var(--danger); color: #ff7b72; display: block; }
    .alert.warning { background: rgba(210, 153, 34, 0.15); border: 1px solid var(--warning); color: #d29922; display: block; }

    .tip-note { font-size: 0.75rem; color: #8b949e; margin-top: 8px; line-height: 1.4; }


    .language-switch {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      margin-bottom: 14px;
    }
    .language-switch button {
      padding: 7px 10px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: #8b949e;
      border-radius: 7px;
      cursor: pointer;
      font-size: 0.78rem;
      font-weight: 600;
      transition: all 0.2s;
    }
    .language-switch button:hover { border-color: #58a6ff; color: var(--text-bright); }
    .language-switch button.active { background: var(--primary); border-color: var(--primary); color: #fff; }


    .profit-details { margin-top: 16px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
    .profit-details summary { cursor: pointer; padding: 11px 12px; background: var(--input-bg); color: var(--text-bright); font-size: 0.82rem; font-weight: 600; }
    .table-wrap { overflow-x: auto; }
    .profit-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 0.78rem; }
    .profit-table th, .profit-table td { padding: 9px 10px; border-top: 1px solid var(--border); text-align: right; white-space: nowrap; }
    .profit-table th:first-child, .profit-table td:first-child { text-align: center; }
    .profit-table th { color: #8b949e; font-weight: 600; background: rgba(0,0,0,0.12); }
    .profit-table td { color: var(--text); }
    .profit-table tr.loss td { color: #ff7b72; }
    .profit-table tr.profit td:nth-last-child(-n+2) { color: #3fb950; }

    @media (max-width: 560px) {
      .grid-2, .grid-3, .dual-grid { grid-template-columns: 1fr; }
    }

/* v2.3: explicit neutral result state and resilient translated/mobile layout. */
.profit-table tr.break-even td { color: var(--text); }
.profit-table tr.profit td:nth-last-child(-n+3) { color: #3fb950; }
.profit-table { min-width: 820px; }
.stat-row, .grid-2, .grid-3, .dual-grid { min-width: 0; }
.stat-item, .input-group, .dual-box { min-width: 0; }
.hero-value { font-size: clamp(1.45rem, 6.5vw, 3rem); overflow-wrap: anywhere; }
.dual-header, .bar-labels { gap: 10px; flex-wrap: wrap; }
.box-lev, .box-sub, .hero-sub { overflow-wrap: anywhere; }
.numeric-policy summary { cursor: pointer; font-size: 0.85rem; color: var(--text-bright); }
.version-note { text-align: center; margin-bottom: 18px; }
button:focus-visible, .dual-box:focus-visible, summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (max-width: 560px) {
  .stat-row { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .btn-group button { font-size: 0.8rem; padding: 10px 6px; }
}