body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial; background:#f4f6f8; color:#0b1220; margin:0; padding:20px; }
.container { max-width:1000px; margin:0 auto; }
header h1 { margin:0 0 6px 0; font-size:20px; }
section { background:#fff; padding:12px 14px; border-radius:8px; box-shadow:0 6px 18px rgba(12,17,27,0.06); margin-top:12px; }
.controls .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
label { font-size:14px; display:flex; gap:8px; align-items:center; }
input[type="number"] { padding:6px 8px; border-radius:6px; border:1px solid #e6e9ef; width:140px; }
.actions { display:flex; gap:8px; }
button { padding:8px 12px; border-radius:8px; border:1px solid rgba(12,17,27,0.06); background:#fff; cursor:pointer; }
button:hover { transform:translateY(-2px); }
.main-grid { display:flex; gap:12px; margin-top:12px; align-items:flex-start; }
.panel { flex:1; min-height:260px; overflow:auto; padding:12px; }
.panel.right { flex:1 1 100%; }
.metrics { margin-top:8px; font-size:14px; color:#374151; }
.hint.small { margin-top:8px; color:#6b7280; font-size:13px; }

/* metric row */
.metric-row { display:inline-flex; align-items:center; gap:8px; margin-right:12px; }

/* info button and tooltip */
.info-btn { position:relative; display:inline-block; width:26px; height:26px; border-radius:50%; border:1px solid #cbd5e1; background:#fff; cursor:default; padding:0; margin-left:6px; }
.info-btn .i { font-weight:700; display:inline-block; line-height:24px; width:24px; height:24px; text-align:center; color:#0b1220; font-size:13px; }
.info-btn:focus { outline:2px solid #bfdbfe; }
.tooltip { display:block; position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%); min-width:240px; max-width:360px; padding:8px 10px; background:#111827; color:#fff; border-radius:8px; font-size:13px; line-height:1.2; box-shadow:0 6px 18px rgba(12,17,27,0.18); opacity:0; pointer-events:none; transition:opacity .12s ease; z-index:30; }
.info-btn:hover .tooltip, .info-btn:focus .tooltip { opacity:1; pointer-events:auto; }

/* small screens: place tooltip above */
@media (max-width:720px) {
  .tooltip { left:50%; top:auto; bottom:calc(100% + 8px); transform:translateX(-50%); }
}