.tc-page { max-width: 1120px; }
.tc-controls, .tc-results {
  margin: 24px 0 34px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .28);
}
.tc-controls { padding: 22px; }
.tc-control-top {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1fr) minmax(120px, .65fr) minmax(130px, .7fr);
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.tc-field, .tc-rule-field { display: flex; flex-direction: column; gap: 6px; }
.tc-field > span:first-child, .tc-rule-field > span {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.tc-field select, .tc-field input, .tc-rule-field select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text);
  font: 600 13px/1.3 var(--font-body);
}
.tc-input-money { display: flex; align-items: center; position: relative; }
.tc-input-money > span { position: absolute; left: 12px; color: var(--text-muted); z-index: 1; }
.tc-input-money input { padding-left: 27px; }
.tc-table-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  margin-top: 20px;
}
.tc-table-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}
.tc-table-kicker {
  display: block;
  margin-bottom: 12px;
  color: var(--green-bright);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.tc-table-b .tc-table-kicker { color: var(--gold); }
.tc-vs { display: grid; place-items: center; color: var(--text-dim); font-size: 11px; font-weight: 800; }
.tc-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 14px; }
.tc-source { min-height: 30px; margin: 13px 0 0; color: var(--text-dim); font-size: 10px; line-height: 1.45; }
.tc-source a { color: var(--text-muted); }
.tc-results { overflow: hidden; }
.tc-result-banner { padding: 24px; border-bottom: 1px solid var(--border); background: var(--green-dim); }
.tc-result-label { color: var(--green-bright); font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.tc-result-banner p { margin: 7px 0 0; color: var(--text); font-size: 1.08rem; font-weight: 700; line-height: 1.55; }
.tc-result-banner[data-winner="tie"] { background: var(--surface-2); }
.tc-metrics { display: grid; grid-template-columns: 1fr 170px 1fr; gap: 14px; padding: 22px; }
.tc-metric-side, .tc-metric-gap { padding: 17px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.tc-metric-side > span, .tc-metric-gap > span { display: block; color: var(--text-dim); font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.tc-metric-side > strong { display: block; min-height: 42px; margin-top: 5px; color: var(--text); font-size: .95rem; }
.tc-metric-side dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 0; }
.tc-metric-side dl div { border-top: 1px solid var(--border); padding-top: 10px; }
.tc-metric-side dt { color: var(--text-dim); font-size: 10px; }
.tc-metric-side dd { margin: 3px 0 0; color: var(--green-bright); font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tc-metric-gap { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tc-metric-gap strong { margin-top: 8px; color: var(--gold-bright); font-size: 1.35rem; }
.tc-metric-gap small { margin-top: 3px; color: var(--text-dim); }
.tc-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 4px 22px 24px; }
.tc-detail-grid h2 { margin: 14px 0 10px; font-size: 1.25rem; }
.tc-difference-table { overflow-x: auto; color: var(--text-muted); font-size: 12px; }
.tc-difference-table table { width: 100%; border-collapse: collapse; }
.tc-difference-table th, .tc-difference-table td { padding: 9px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.tc-difference-table th { color: var(--text-dim); font-size: 9px; text-transform: uppercase; }
.tc-legend { color: var(--text-dim); font-size: 10px; }
.tc-strategy-list { max-height: 280px; overflow: auto; margin: 9px 0 0; padding-left: 19px; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.tc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 18px 22px; border-top: 1px solid var(--border); }
.tc-actions a, .tc-actions button {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 13px;
  background: transparent;
  color: var(--text-muted);
  font: 700 11px var(--font-body);
  text-decoration: none;
  cursor: pointer;
}
.tc-actions .tc-primary { border-color: var(--green); color: var(--green-bright); }
#share-status { color: var(--text-dim); font-size: 11px; }
.tc-print-card {
  margin: 0 22px 22px;
  padding: 20px;
  border: 1px dashed var(--green);
  border-radius: 12px;
  background: #0d1713;
}
.tc-print-brand { color: var(--green-bright); font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.tc-print-card h2 { margin: 6px 0 0; font-size: 1.15rem; }
.tc-print-card h3 { margin: 14px 0 4px; color: var(--text); font-size: .95rem; }
.tc-print-card > strong { color: var(--gold-bright); }
.tc-print-card ul { margin: 12px 0; padding-left: 20px; color: var(--text-muted); font-size: 12px; line-height: 1.55; }
.tc-print-card p, .tc-print-card small { color: var(--text-dim); font-size: 11px; line-height: 1.5; }
.tc-explainer { max-width: 780px; }

@media (max-width: 760px) {
  .tc-control-top { grid-template-columns: 1fr 1fr; }
  .tc-control-top .tc-field:first-child { grid-column: 1 / -1; }
  .tc-table-grid { grid-template-columns: 1fr; }
  .tc-vs { height: 24px; }
  .tc-rules { grid-template-columns: 1fr; }
  .tc-metrics { grid-template-columns: 1fr; }
  .tc-metric-gap { min-height: 110px; }
  .tc-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .tc-controls { padding: 14px; }
  .tc-control-top { grid-template-columns: 1fr; }
  .tc-control-top .tc-field:first-child { grid-column: auto; }
  .tc-table-card { padding: 14px; }
  .tc-metrics, .tc-detail-grid { padding-left: 14px; padding-right: 14px; }
  .tc-actions { align-items: stretch; flex-direction: column; }
  .tc-actions a, .tc-actions button { width: 100%; text-align: center; }
  .tc-print-card { margin: 0 14px 14px; }
}

@media print {
  @page { size: 4in 6in; margin: .25in; }
  body { min-height: 0 !important; background: #fff !important; color: #111 !important; }
  body > * { display: none !important; }
  body > .tc-page { display: block !important; }
  .tc-page { max-width: none; margin: 0; padding: 0 !important; border: 0; }
  .tc-page > * { display: none !important; }
  .tc-page > .tc-results { display: block !important; margin: 0; border: 0; box-shadow: none; }
  .tc-results > * { display: none !important; }
  .tc-results > .tc-print-card { display: block !important; }
  .tc-print-card {
    position: static;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    max-height: 5.5in;
    margin: 0;
    padding: .25in;
    border: 2px solid #111;
    background: #fff;
    color: #111;
    box-shadow: none;
    break-inside: avoid;
  }
  .tc-print-card, .tc-print-card * { visibility: visible !important; color: #111 !important; }
}