/* Aspect ratio calculator — tool UI. Chrome from shared.css/utilities.css. */
.ar-stage { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.ar-card { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.ar-head { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--text); margin-bottom: 6px; }
.ar-sub { font-size: .9rem; color: var(--muted); margin: 0 0 14px; }
.ar-grid { display: flex; align-items: flex-end; gap: 12px; }
.ar-field { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.ar-field input {
  font: inherit; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border-control);
  background: var(--surface2); color: var(--text); width: 100%; box-sizing: border-box; text-transform: none;
}
.ar-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.ar-colon { font-size: 1.6rem; font-weight: 800; color: var(--muted); padding-bottom: 8px; }

.ar-result { margin-top: 16px; text-align: center; }
.ar-ratio { font-family: 'Orbitron', var(--mono); font-weight: 900; font-size: clamp(2.2rem, 9vw, 3.2rem); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.ar-decimal { margin-top: 4px; font-size: .95rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.ar-presets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.ar-preset { font: inherit; font-weight: 600; font-size: .85rem; padding: 7px 14px; border-radius: 999px; cursor: pointer; background: var(--surface2); color: var(--text); border: 1px solid var(--border); transition: all .15s ease; }
.ar-preset:hover { border-color: var(--accent-light); }
.ar-preset.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.ar-preview { margin-top: 16px; display: flex; align-items: center; justify-content: center; min-height: 130px; background: var(--surface2); border-radius: var(--radius); padding: 12px; }
.ar-box { background: linear-gradient(135deg, var(--accent), var(--accent-light)); border-radius: 6px; max-width: 100%; max-height: 120px; box-shadow: var(--shadow); }

@media (max-width: 480px) { .ar-grid { flex-wrap: wrap; } .ar-colon { display: none; } }