@charset "utf-8";
/* CSS Document */

.smart-roi-exact { --gap: 16px; font-family: system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:#0f172a; }
.smart-roi-exact h3 { margin: 24px 0 12px; font-size: 28px; }
.smart-roi-exact .grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); }
.smart-roi-exact .field { display:flex; flex-direction:column; gap:6px; }
.smart-roi-exact label { font-weight:600; display:flex; align-items:center; gap:6px; }
.smart-roi-exact input { padding:10px 12px; border:1px solid #d0d5dd; border-radius:10px; font-size:14px; background:#fff; }
.smart-roi-exact input:focus { outline: 2px solid #0ea5e9; border-color:#0ea5e9; }
.smart-roi-exact .tip { background:#fff; color:#0f172a; border:1px solid #cbd5e1; border-radius:50%; width:20px; height:20px; line-height:18px; text-align:center; font-size:12px; cursor:help; }
.smart-roi-exact .tip[data-tip]{ position:relative; }
.smart-roi-exact .tip[data-tip]:hover::after {
  content: attr(data-tip); position:absolute; left:22px; top:50%; transform:translateY(-50%);
  background:#111; color:#fff; padding:8px 10px; border-radius:8px; font-size:12px; max-width:320px; box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.smart-roi-exact .actions{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.smart-roi-exact .btn{ padding:10px 14px; border-radius:999px; border:1px solid #0f172a; background:#0f172a; color:#fff; cursor:pointer; }
.smart-roi-exact .btn.ghost{ background:#fff; color:#0f172a; }
.smart-roi-exact .btn.outline{ background:#fff; border-color:#94a3b8; color:#0f172a; }
.smart-roi-exact .cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); }
.smart-roi-exact .card{ border:1px solid #e2e8f0; border-radius:16px; padding:16px; background:#fff; transition: box-shadow .2s ease; }
.smart-roi-exact .card.hi { border-color:#0ea5e9; box-shadow:0 4px 12px rgba(14,165,233,.1); }
.smart-roi-exact .card.total { background:#f8fafc; }
.smart-roi-exact .card .label{ color:#64748b; font-size:14px; }
.smart-roi-exact .card .value{ font-size:26px; font-weight:700; margin-top:6px; }
.smart-roi-exact .chart-wrap{ margin: 16px 0 8px; border:1px dashed #e2e8f0; border-radius:12px; padding:12px; background:#fff; }
.smart-roi-exact #snapshots { margin-top: 18px; display:grid; gap:12px; }
.smart-roi-exact .snapshot { border:1px solid #e2e8f0; border-radius:12px; padding:12px; background:#fff; }
.smart-roi-exact .snapshot h4 { margin:0 0 6px; font-size:16px; }

@media (max-width: 1024px){
  .smart-roi-exact .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .smart-roi-exact .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
  .smart-roi-exact .grid{ grid-template-columns:1fr; }
  .smart-roi-exact .cards{ grid-template-columns:1fr; }
}

/* Print / PDF */
@media print {
  .smart-roi-exact .actions, .smart-roi-exact .tip { display:none !important; }
  .smart-roi-exact { color:#000; }
  .smart-roi-exact .card { break-inside: avoid; }
}

.smart-roi-exact h3 { margin-top: 28px; border-top: 1px solid #e2e8f0; padding-top: 18px; }
.smart-roi-exact h3:first-of-type { border-top: 0; padding-top: 0; }
#shared { background-color: #c7f3ee; padding: 1em; border-radius: 10px; }
#current { background-color: #efefef; padding: 1em; border-radius: 10px; }
#new { background-color: #dbf5f9; padding: 1em; border-radius: 10px; }
#results { background-color: #d9e8ee; padding: 1em; border-radius: 10px; }