:root{
  --ts-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --ts-fg:#111827; --ts-bg:#fafafa; --ts-accent:#d4af37; --ts-border:#e5e7eb;
  --good:#16a34a; --bad:#dc2626;
}
.ts-bagua{font-family:var(--ts-font); color:var(--ts-fg)}
.tsb-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px}
@media(max-width:900px){ .tsb-grid{grid-template-columns:1fr} }
.tsb-card{background:#fff; border:1px solid var(--ts-border); border-radius:16px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.tsb-title{margin:0 0 8px; font-weight:700}
.tsb-field{display:flex; gap:8px; align-items:center; margin-bottom:10px}
.tsb-field input[type=number], .tsb-field select{flex:1; padding:10px 12px; border:1px solid var(--ts-border); border-radius:12px}
.tsb-btn{border:1px solid var(--ts-border); border-radius:14px; padding:10px 16px; cursor:pointer; background:#fff}
.tsb-btn.primary{background:#111827; color:#fff; border-color:#111827}
.tsb-note{font-size:12px; color:#6b7280}
.tsb-results pre{white-space:pre-wrap; line-height:1.6}
.tsb-table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; border:1px solid var(--ts-border); margin-top:8px}
.tsb-table th, .tsb-table td{padding:10px 12px; border-bottom:1px solid var(--ts-border); text-align:left}
.tsb-table tr:last-child td{border-bottom:none}
.tsb-badge{display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--ts-border); font-size:12px; margin-left:6px}
.tsb-good{border-left:4px solid var(--good)}
.tsb-bad{border-left:4px solid var(--bad)}
.tsb-guide{background:var(--ts-bg); border:1px dashed var(--ts-border); border-radius:12px; padding:12px}
.tsb-bagua{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px}
/* v0.1.2: switch to text colors for good/bad, remove borders */
.tsb-cell{background:#fff; border:none; border-radius:12px; padding:10px; text-align:center; transition:transform .06s ease, opacity .12s ease}
.tsb-cell.good{color:var(--good); font-weight:700}
.tsb-cell.bad{color:var(--bad); font-weight:700}
.tsb-cell.center{background:#f3f4f6; color:#111827; font-weight:600}
.tsb-cell:hover{transform:translateY(-1px); opacity:.95}
.tsb-watermark{margin-top:6px; text-align:right; opacity:.18; font-weight:600}