/* aimtest/aim-pro.css — pro measurement UI: mode select, arena, result dashboard. */

.am-modes { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:0 0 1.5rem; }
.am-mode-card { display:flex; flex-direction:column; gap:4px; padding:12px 14px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; cursor:pointer; text-align:left; transition:border-color .15s, box-shadow .15s; }
.am-mode-card:hover { border-color:#a5b4fc; }
.am-mode-card.is-active { border-color:#6366f1; box-shadow:0 0 0 1px #6366f1; }
.am-mode-name { font-weight:700; color:#1f2937; }
.am-mode-skill { font-size:.8rem; color:#6b7280; }

#am-intro { text-align:center; background:#fff; border-radius:12px; padding:1.5rem; box-shadow:0 1px 3px rgba(0,0,0,.06); margin-bottom:1.5rem; }
.am-blurb { color:#4b5563; margin-bottom:.75rem; }
.am-pb-line { color:#6366f1; font-weight:600; min-height:1.2em; margin-bottom:1rem; }

.am-arena { position:relative; height:440px; background:#0f172a; border-radius:12px; overflow:hidden; cursor:crosshair; user-select:none; }
.aim-target { position:absolute; border-radius:50%; background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.3); cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.8rem; }
.aim-target-appear { animation:am-pop .12s ease-out; }
@keyframes am-pop { from { transform:scale(.6); opacity:.4; } to { transform:scale(1); opacity:1; } }
.aim-target-track { background:#22d3ee; box-shadow:0 0 0 3px rgba(34,211,238,.3); cursor:none; }
.aim-target-track.on-target { background:#10b981; box-shadow:0 0 0 4px rgba(16,185,129,.45); }
.am-countdown { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:5rem; font-weight:800; color:#fff; }

.ar-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:1rem; flex-wrap:wrap; }
.ar-mode { font-size:1.1rem; font-weight:700; color:#1f2937; }
.ar-skill { font-size:.85rem; color:#6b7280; }
.ar-tier-wrap { text-align:right; }
.ar-tier { display:inline-block; background:#eef2ff; color:#4338ca; font-weight:700; padding:4px 12px; border-radius:8px; }
.ar-pct { font-size:.85rem; color:#6b7280; margin-top:4px; }
.ar-score-banner { display:flex; align-items:baseline; gap:10px; background:#f8fafc; border-radius:12px; padding:1rem 1.25rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.ar-score-label { font-size:.85rem; color:#6b7280; }
.ar-score { font-size:2rem; font-weight:800; color:#4338ca; }
.ar-score-max { font-size:.85rem; color:#9ca3af; }
.ar-pb { margin-left:auto; font-size:.85rem; color:#6b7280; }
.ar-pb-new { color:#10b981; font-weight:700; }
.ar-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin-bottom:1.25rem; }
.ar-card { background:#f8fafc; border-radius:8px; padding:.85rem; }
.ar-card-label { font-size:.8rem; color:#6b7280; margin-bottom:2px; }
.ar-card-value { font-size:1.4rem; font-weight:700; color:#1f2937; }
.ar-viz { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.ar-panel { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1rem 1.25rem; }
.ar-panel-title { font-size:.9rem; font-weight:600; margin-bottom:8px; }
.ar-panel-sub { font-size:.8rem; color:#6b7280; margin-bottom:10px; }
.ar-bar-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ar-bar-n { font-size:.75rem; color:#9ca3af; width:16px; }
.ar-bar-track { flex:1; background:#f1f5f9; border-radius:4px; height:8px; }
.ar-bar-fill { height:100%; background:#10b981; border-radius:4px; }
.ar-bar-v { font-size:.75rem; width:46px; text-align:right; }
.ar-scatter { max-width:260px; display:block; margin:0 auto; }
.ar-ring-bg { fill:#f1f5f9; stroke:#cbd5e1; stroke-width:.5; }
.ar-ring { fill:none; stroke:#e2e8f0; stroke-width:.5; }
.ar-cross { stroke:#cbd5e1; stroke-width:.5; }
.ar-dot { fill:#10b981; }

.am-section.hidden, .hidden { display:none !important; }