:root {
      --c-primary: #8c2626;
      --c-bg: #f8f6f0;
      --c-card: #fff;
      --c-border: #e2d9cb;
      --c-muted: #666;
      --c-text: #2c2c2c;
      --radius: 8px;
      --max: 720px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", Roboto, sans-serif;
      background: var(--c-bg);
      color: var(--c-text);
      padding: 12px;
      padding-bottom: max(24px, env(safe-area-inset-bottom));
      line-height: 1.5;
    }
    .container { max-width: var(--max); margin: 0 auto; width: 100%; }
    h1 {
      text-align: center;
      color: var(--c-primary);
      font-size: clamp(1.1rem, 4vw, 1.35rem);
      margin-bottom: 12px;
      font-weight: 700;
    }
    .card {
      background: var(--c-card);
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      padding: 14px 16px;
      margin-bottom: 14px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
      overflow-x: auto;
    }
    .card h2, .card h3 {
      color: var(--c-primary);
      font-size: 0.95rem;
      margin-bottom: 10px;
      border-bottom: 2px solid var(--c-primary);
      padding-bottom: 4px;
    }
    .card h4 {
      font-size: 0.85rem;
      color: var(--c-primary);
      margin: 10px 0 6px;
    }
    .grid-form {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }
    @media (min-width: 480px) {
      .grid-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    label {
      font-size: 11px;
      font-weight: 700;
      color: var(--c-muted);
      display: block;
      margin-bottom: 2px;
    }
    input, select {
      width: 100%;
      max-width: 100%;
      border: 1px solid #ccc;
      padding: 8px 6px;
      border-radius: 4px;
      font-size: 14px;
      min-height: 40px;
    }
    .row-gender {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 10px;
      align-items: center;
    }
    .row-gender select { flex: 1; min-width: 120px; }
    button[type="submit"] {
      width: 100%;
      background: var(--c-primary);
      color: #fff;
      border: none;
      padding: 12px;
      font-size: 15px;
      font-weight: 700;
      border-radius: 6px;
      cursor: pointer;
      min-height: 44px;
    }
    button[type="submit"]:hover { filter: brightness(1.05); }
    button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }
    .hint { font-size: 12px; color: var(--c-muted); margin-top: 6px; }
    .error-msg {
      color: #b71c1c;
      background: #ffebee;
      padding: 8px 10px;
      border-radius: 4px;
      font-size: 13px;
      margin-top: 8px;
      display: none;
    }
    .error-msg.show { display: block; }

    .tabs {
      display: flex;
      gap: 0;
      border-bottom: 2px solid var(--c-border);
      margin-bottom: 12px;
    }
    .tab-btn {
      flex: 1;
      padding: 10px 8px;
      border: none;
      background: transparent;
      font-size: 14px;
      font-weight: 600;
      color: var(--c-muted);
      cursor: pointer;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      min-height: 44px;
    }
    .tab-btn.active {
      color: var(--c-primary);
      border-bottom-color: var(--c-primary);
    }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    .bazi-table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
      margin-bottom: 12px;
      table-layout: fixed;
    }
    .bazi-table th {
      font-size: 12px;
      color: var(--c-primary);
      padding: 4px 2px;
      border-bottom: 1px solid #eee;
      font-weight: 600;
    }
    .bazi-table td {
      padding: 5px 2px;
      vertical-align: top;
      font-size: 12px;
      word-break: break-all;
    }
    .shi-shen { font-size: 11px; color: var(--c-muted); }
    .gan-zhi { font-size: clamp(18px, 5vw, 24px); font-weight: 700; }
    .day-master { color: var(--c-primary); }
    .nayin-row { font-size: 10px; color: #888; }
    .dishi-row { font-size: 10px; color: #555; }

    .info-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
      font-size: 13px;
      background: #faf8f5;
      padding: 10px;
      border-radius: 6px;
      margin-bottom: 12px;
    }
    @media (min-width: 400px) {
      .info-grid { grid-template-columns: 1fr 1fr; }
    }
    .info-item { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
    .info-label { color: var(--c-primary); font-weight: 700; flex-shrink: 0; }

    .bar-group { margin-bottom: 6px; font-size: 12px; }
    .bar-label { display: flex; justify-content: space-between; margin-bottom: 2px; }
    .bar-bg { background: #eee; height: 10px; border-radius: 5px; overflow: hidden; }
    .bar-fill { height: 100%; border-radius: 5px; min-width: 0; }

    .dayun-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-start;
      background: #fff8f8;
      padding: 10px;
      border: 1px solid #f5c6c6;
      border-radius: 6px;
      overflow-x: auto;
    }
    .dayun-item {
      flex: 1 1 56px;
      min-width: 52px;
      max-width: 80px;
      text-align: center;
    }
    .dayun-age { font-size: 11px; color: #888; }
    .dayun-gz { font-size: 14px; font-weight: 700; color: var(--c-primary); margin-top: 2px; }

    .ziwei-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 4px;
      background: #fdf8f0;
      padding: 6px;
      border-radius: 8px;
      border: 2px solid #b8860b;
    }
    .zw-cell {
      background: #fff;
      border: 1px solid #e6d5b8;
      border-radius: 4px;
      padding: 5px;
      min-height: 96px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 12px;
      overflow: hidden;
    }
    .zw-center {
      grid-column: span 2;
      grid-row: span 2;
      background: #fffbe6;
      border: 1px solid #ffe58f;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 8px;
      min-height: 120px;
    }
    .zw-stars {
      display: flex;
      flex-wrap: wrap;
      gap: 2px;
      margin-bottom: 4px;
      align-content: flex-start;
    }
    .zw-star {
      font-size: 12px;
      font-weight: 700;
      color: #c62828;
      background: #ffebee;
      padding: 1px 4px;
      border-radius: 2px;
      white-space: nowrap;
    }
    .zw-star.lucky { color: #1b5e20; background: #e8f5e9; }
    .zw-star.tough { color: #b71c1c; background: #ffcdd2; }
    .zw-star.neutral { color: #4e342e; background: #efebe9; }
    .zw-star.year { color: #0d47a1; background: #e3f2fd; font-size: 11px; }
    .zw-year-row { margin-top: 2px; font-size: 11px; }
    .zw-legend {
      font-size: 12px; color: #555; margin: 8px 0; line-height: 1.6;
      display: flex; flex-wrap: wrap; gap: 8px;
    }
    .zw-legend span {
      display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px;
    }
    .hd-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 14px;
    }
    @media (max-width: 560px) { .hd-summary { grid-template-columns: 1fr; } }
    .hd-card {
      background: #fafafa;
      border: 1px solid var(--c-border);
      border-radius: 8px;
      padding: 10px 12px;
      min-width: 0;
    }
    .hd-card.full { grid-column: 1 / -1; }
    .hd-card-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--c-primary);
      margin-bottom: 4px;
    }
    .hd-card-value {
      font-size: 15px;
      font-weight: 700;
      color: #222;
      line-height: 1.45;
      word-break: break-word;
    }
    .hd-card-desc {
      font-size: 11px;
      color: #888;
      margin-top: 6px;
      line-height: 1.45;
    }
    .hd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .hd-table th, .hd-table td { border: 1px solid #eee; padding: 6px 8px; text-align: left; }
    .hd-table th { background: #faf8f5; color: var(--c-primary); white-space: nowrap; }
    .hd-p { color: #111 !important; font-weight: 700; }
    .hd-d { color: #c62828 !important; font-weight: 700; }
    .hd-note {
      font-size: 11px; color: #888; font-weight: 400; display: block; margin-top: 2px; line-height: 1.4;
    }
    .hd-legend {
      font-size: 12px; margin: 8px 0 12px; padding: 8px 10px; background: #faf8f5; border-radius: 6px; line-height: 1.7; color: #444;
    }
    .toggle-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
    .toggle-row label { font-size: 13px; cursor: pointer; user-select: none; }
    .zw-toggles-br {
      justify-content: flex-end;
      margin: 4px 0 0;
      gap: 6px;
    }
    .zw-toggles-br label {
      font-size: 11px;
      color: #666;
      padding: 2px 6px;
      background: #f5f5f5;
      border-radius: 4px;
      border: 1px solid #e8e0d5;
    }
    .chk-sm {
      width: 14px;
      height: 14px;
      margin: 0 4px 0 0;
      vertical-align: middle;
      accent-color: var(--c-primary);
      cursor: pointer;
      flex-shrink: 0;
    }
    .zw-toggles-br .chk-sm { width: 12px; height: 12px; }
    .true-solar-row {
      margin: 10px 0 6px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .true-solar-row label {
      font-size: 12px;
      cursor: pointer;
      user-select: none;
      color: #444;
      display: inline-flex;
      align-items: center;
    }
    .zw-star.minor {
      color: #1565c0;
      background: #e3f2fd;
      font-weight: 600;
    }
    .zw-star.adj {
      color: #6a1b9a;
      background: #f3e5f5;
      font-weight: 500;
    }
    .zw-foot {
      display: flex;
      justify-content: space-between;
      gap: 2px;
      font-size: 12px;
      border-top: 1px solid #eee;
      padding-top: 3px;
      margin-top: 2px;
    }
    .zw-name { font-weight: 700; color: var(--c-primary); font-size: 13px; }
    .zw-decadal { font-size: 11px; color: #888; margin-top: 2px; }
    .ziwei-note {
      font-size: 13px;
      line-height: 1.7;
      background: #faf8f5;
      padding: 10px;
      border-radius: 6px;
      margin-top: 10px;
      color: #444;
    }

    .liunian-box {
      margin-top: 10px;
      font-size: 13px;
      background: #faf8f5;
      padding: 10px;
      border-radius: 6px;
      line-height: 1.7;
    }
    .ss-item {
      border: 1px solid var(--c-border);
      border-radius: 6px;
      padding: 8px 10px;
      margin-bottom: 8px;
      background: #fafafa;
    }
    .ss-item strong { color: var(--c-primary); }
    .ss-tag {
      display: inline-block;
      font-size: 11px;
      padding: 1px 6px;
      border-radius: 3px;
      margin-left: 4px;
      background: #fff3e0;
      color: #e65100;
    }
    .ss-tag.ji { background: #e8f5e9; color: #2e7d32; }
    .ss-tag.xiong { background: #ffebee; color: #c62828; }
    .ln-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      min-width: 280px;
    }
    .ln-table th, .ln-table td {
      border: 1px solid #eee;
      padding: 6px 8px;
      text-align: center;
    }
    .ln-table th { background: #faf8f5; color: var(--c-primary); }
    .ln-table tr.current { background: #fff8e1; font-weight: 700; }

    .copy-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .copy-btn {
      flex: 1 1 120px;
      min-height: 44px;
      padding: 10px 12px;
      border: 1px solid var(--c-primary);
      border-radius: 6px;
      background: #fff;
      color: var(--c-primary);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    .copy-btn.primary {
      background: var(--c-primary);
      color: #fff;
    }
    .copy-btn:hover { filter: brightness(0.97); }
    .copy-feedback {
      font-size: 12px;
      color: #2e7d32;
      margin-top: 8px;
      min-height: 1.2em;
    }

    .hidden { display: none !important; }

    .faq details {
      border: 1px solid var(--c-border);
      border-radius: 6px;
      margin-bottom: 8px;
      padding: 10px 12px;
      background: #fff;
    }
    .faq summary {
      font-weight: 700;
      cursor: pointer;
      color: var(--c-primary);
      font-size: 14px;
      list-style: none;
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq details[open] summary { margin-bottom: 6px; }
    .faq p { font-size: 13px; color: #444; }

    footer {
      text-align: center;
      font-size: 11px;
      color: #999;
      margin-top: 16px;
      padding-bottom: 8px;
    }