.ir2-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: center; margin-top: 16px; }
.ir2-dial { position: relative; width: 210px; height: 210px; }
.ir2-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ir2-dial circle { fill: none; stroke-width: 12; }
.ir2-dial .bg { stroke: rgba(148,212,244,.16); }
.ir2-dial .fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 528; stroke-dashoffset: 528; transition: stroke-dashoffset .5s var(--ease), stroke .3s; }
.ir2-dial .m24 { stroke: #fff; stroke-width: 3; stroke-dasharray: 2 526; stroke-dashoffset: -176; }
.ir2-dial.late .fg { stroke: #fff; }
.ir2-read { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ir2-read b { font-size: 46px; line-height: 1; color: #fff; font-weight: 700; }
.ir2-read b::after { content: "h"; font-size: 22px; color: var(--accent); margin-left: 2px; }
.ir2-read small { color: var(--teal-pale); font-size: 11.5px; max-width: 120px; margin-top: 6px; line-height: 1.35; }
.ir2-side input[type=range] { width: 100%; accent-color: var(--accent); height: 28px; cursor: pointer; }
.ir2-marks { display: flex; justify-content: space-between; font-size: 11px; color: var(--teal-pale); letter-spacing: .08em; margin-top: 2px; }
.ir2-panel { margin-top: 14px; min-height: 150px; }
.ir2-panel strong { display: block; color: #fff !important; font-size: 18px; margin-bottom: 8px; }
.ir2-panel ul { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 7px; }
.ir2-panel li { color: var(--teal-pale); font-size: 14.5px; line-height: 1.5; padding-left: 18px !important; position: relative; margin: 0 !important; animation: ir2In .4s var(--ease) both; }
.ir2-panel li::before { content: "" !important; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent) !important; }
.ir2-panel li:nth-child(2) { animation-delay: .05s; } .ir2-panel li:nth-child(3) { animation-delay: .1s; } .ir2-panel li:nth-child(4) { animation-delay: .15s; }
@keyframes ir2In { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ir2-q { color: #fff !important; font-size: 18px; font-weight: 600; margin: 14px 0 12px !important; min-height: 2.6em; }
.ir2-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ir2-btns [data-ir2-a="1"] { background: var(--accent); color: var(--navy); border-color: var(--accent); }
.ir2-out { margin-top: 14px !important; padding: 14px 16px; border-radius: 12px; background: rgba(148,212,244,.1); border: 1px solid rgba(148,212,244,.3); color: #fff !important; display: none; animation: ir2In .4s var(--ease) both; }
.ir2-out.on { display: block; }
.ir-table { margin: 1.6em 0; overflow-x: auto; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.ir-table.in { opacity: 1; transform: none; }
.ir-table small { color: var(--muted); font-size: 12.5px; }
.ir-table tbody tr:first-child td { background: none; font-weight: 400; }
.ir-table thead th { background: var(--navy); color: #fff; }
@media (max-width: 680px) { .ir2-wrap { grid-template-columns: 1fr; justify-items: center; } .ir2-side { width: 100%; } }
@media (max-width: 560px) { .ir-table thead { display: none; } .ir-table table, .ir-table tbody, .ir-table tr, .ir-table td { display: block; width: 100%; } .ir-table tr { border: 1px solid var(--line); border-radius: 12px; padding: 6px 4px; margin-bottom: 10px; } .ir-table td { border: 0; padding: 6px 12px; font-size: 14px; } .ir-table td[data-l]:not(:first-child)::before { content: attr(data-l); display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); } }
@media (prefers-reduced-motion: reduce) { .ir2-panel li, .ir2-out { animation: none !important; } .ir2-dial .fg, .ir-table { transition: none !important; } }
@media print {
  body * { visibility: hidden !important; }
  body.ir2-printing .ir2-check, body.ir2-printing .ir2-check * { visibility: visible !important; }
  body.ir2-printing .ir2-check { position: absolute; left: 0; top: 0; width: 100%; background: #fff !important; color: #000 !important; }
  body.ir2-printing .ir2-check * { color: #000 !important; }
  body.ir2-printing .nx-actions, body.ir2-printing .nx-ring { display: none !important; }
}