/* SizeConvertly — tool page styles */
.tool-shell { display: grid; gap: 26px; }
.converter {
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  padding: clamp(18px, 3vw, 28px); box-shadow: var(--shadow);
}
.converter-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.converter-head .tag {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green); font-weight: 700;
}
.field-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.result-card {
  display: none; margin-top: 22px; padding: 22px; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, var(--green) 34%, transparent);
  background: color-mix(in oklab, var(--green) 7%, var(--panel));
}
.result-card.show { display: block; }
.result-card .rc-label {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green); font-weight: 700;
}
.result-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-top: 16px; }
.result-cell {
  padding: 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--panel); text-align: center;
}
.result-cell .rc-sys { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.result-cell .rc-val { font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 800; letter-spacing: -0.03em; margin-top: 4px; }
.result-note { margin: 16px 0 0; font-size: 0.85rem; color: var(--muted); }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.copy-ok { color: var(--green); font-size: 0.85rem; align-self: center; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.size-table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 0.9rem; }
table.size-table th, table.size-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.size-table thead th {
  background: var(--panel-2); font-size: 0.73rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
table.size-table tbody tr:last-child td { border-bottom: 0; }
table.size-table tbody tr:hover { background: color-mix(in oklab, var(--violet) 8%, transparent); }
table.size-table tbody tr.match { background: color-mix(in oklab, var(--green) 12%, transparent); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: s; }
.steps li {
  position: relative; padding: 14px 16px 14px 52px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 0.92rem;
}
.steps li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 14px; top: 13px; width: 26px; height: 26px; border-radius: 9px;
  display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--violet), var(--pink));
}
.tool-side { display: grid; gap: 16px; align-content: start; }
.side-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 18px; }
.side-card h3 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.side-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.side-card a { color: var(--muted); font-size: 0.9rem; }
.side-card a:hover { color: var(--violet-soft); }
.disclaimer-strip {
  margin-top: 18px; padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--amber) 34%, transparent);
  background: color-mix(in oklab, var(--amber) 7%, transparent);
  color: var(--muted); font-size: 0.86rem;
}