/* === Robo-Guru ROI Calculator v1.2.0 === */
:root{
  --rg-primary:#16C6E5;
  --rg-primary-dark:#0EA5C2;
  --rg-dark:#0F2537;
  --rg-success:#2FBF71;
  --rg-warning:#f59e0b;
  --rg-danger:#ef4444;
  --rg-bg:#F5FBFD;
  --rg-card-bg:#ffffff;
  --rg-border:rgba(15,37,55,.08);
  --rg-shadow:0 4px 24px rgba(15,37,55,.08);
  --rg-shadow-lg:0 8px 32px rgba(15,37,55,.12);
  --rg-radius:16px;
  --rg-radius-sm:12px;
}

.rg-roi{max-width:1200px;margin:24px auto;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--rg-dark);line-height:1.5}
.rg-roi *, .rg-roi *::before, .rg-roi *::after{box-sizing:border-box}
.rg-roi{padding:0 16px}

/* Header */
.rg-roi__head{margin-bottom:24px}
.rg-roi__head h3{margin:0 0 8px 0;font-size:28px;font-weight:800;letter-spacing:-0.5px;color:var(--rg-dark)}
.rg-roi__head p{margin:0;font-size:15px;color:#64748b;max-width:65ch}

/* Grid Layout - 3 input cards + 1 wider result card */
.rg-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr) minmax(320px,380px);
  gap:20px;
  align-items:start;
}

/* Cards */
.rg-roi .rg-card{
  border:1px solid var(--rg-border);
  border-radius:var(--rg-radius);
  padding:20px;
  background:var(--rg-card-bg);
  box-shadow:var(--rg-shadow);
  transition:box-shadow .2s ease,transform .2s ease;
}
.rg-roi .rg-card:hover{box-shadow:var(--rg-shadow-lg)}

.rg-card h4{
  margin:0 0 16px 0;
  font-size:15px;
  font-weight:700;
  color:var(--rg-dark);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* Form Elements */
.rg-roi .rg-card label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  font-weight:500;
  color:#475569;
  margin-top:14px;
}
.rg-roi .rg-card label:first-of-type{margin-top:0}

.rg-roi .rg-card input,
.rg-roi .rg-select{
  width:100%;
  margin-top:4px;
  padding:12px 14px;
  border-radius:var(--rg-radius-sm);
  border:1.5px solid #e2e8f0;
  font-size:15px;
  font-weight:500;
  background:var(--rg-card-bg);
  color:var(--rg-dark);
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.rg-roi .rg-card input:hover,
.rg-roi .rg-select:hover{border-color:#cbd5e1}

.rg-roi .rg-card input:focus,
.rg-roi .rg-select:focus{
  outline:none;
  border-color:var(--rg-primary);
  box-shadow:0 0 0 4px rgba(22,198,229,.15);
}

.rg-note{margin-top:12px;font-size:12px;color:#64748b;line-height:1.4}

/* Result Card */
.rg-roi .rg-result{
  background:linear-gradient(135deg,#f0fdff 0%,#f8fafc 100%);
  border:2px solid rgba(22,198,229,.3);
  box-shadow:0 8px 40px rgba(22,198,229,.15);
}
.rg-roi .rg-result:hover{box-shadow:0 12px 48px rgba(22,198,229,.2)}

@media (min-width: 981px){
  .rg-roi .rg-result{position:sticky;top:100px}
}

.rg-result__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.rg-result__head h4{margin:0;text-transform:none;font-size:18px;letter-spacing:0;flex-shrink:0}
.rg-result__tag{
  font-size:10px;
  font-weight:600;
  padding:5px 10px;
  border-radius:999px;
  background:var(--rg-card-bg);
  border:1px solid var(--rg-border);
  color:#64748b;
}

/* Hero Value */
.rg-hero{
  border-radius:var(--rg-radius-sm);
  padding:20px;
  margin:12px 0;
  background:var(--rg-card-bg);
  border:1px solid var(--rg-border);
  text-align:center;
}
.rg-hero__label{font-size:13px;font-weight:500;color:#64748b;margin-bottom:8px}
.rg-hero__value{font-size:36px;font-weight:900;color:var(--rg-dark);letter-spacing:-1px}
.rg-hero__sub{margin-top:6px;font-size:13px;color:#64748b}

/* Metrics Grid */
.rg-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.rg-metric{
  border-radius:var(--rg-radius-sm);
  padding:12px 10px;
  background:var(--rg-card-bg);
  border:1px solid var(--rg-border);
  text-align:center;
  min-width:0;
}
.rg-metric__k{font-size:11px;font-weight:500;color:#64748b}
.rg-metric__v{font-size:22px;font-weight:900;color:var(--rg-dark);margin-top:4px;letter-spacing:-0.5px}
.rg-metric__s{font-size:10px;color:#94a3b8;margin-top:2px;line-height:1.3}

/* Rating */
.rg-rating{
  margin-top:12px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border-radius:var(--rg-radius-sm);
  border:1px solid var(--rg-border);
  background:var(--rg-bg);
}
.rg-rating__dot{
  width:12px;height:12px;border-radius:50%;
  margin-top:3px;
  flex:0 0 auto;
  box-shadow:0 0 8px currentColor;
}
.rg-rating__label{font-weight:700;color:var(--rg-dark);font-size:14px}
.rg-rating__text{font-size:13px;color:#64748b;line-height:1.4;margin-top:2px}

.rg-rating[data-level="good"]{background:rgba(47,191,113,.06);border-color:rgba(47,191,113,.2)}
.rg-rating[data-level="good"] .rg-rating__dot{background:var(--rg-success);color:var(--rg-success)}
.rg-rating[data-level="ok"]{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.2)}
.rg-rating[data-level="ok"] .rg-rating__dot{background:var(--rg-warning);color:var(--rg-warning)}
.rg-rating[data-level="bad"]{background:rgba(239,68,68,.05);border-color:rgba(239,68,68,.15)}
.rg-rating[data-level="bad"] .rg-rating__dot{background:var(--rg-danger);color:var(--rg-danger)}

/* Break-even */
.rg-be{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-radius:var(--rg-radius-sm);
  padding:14px 16px;
  margin-top:12px;
  background:rgba(47,191,113,.06);
  border:1px solid rgba(47,191,113,.2);
}
.rg-be__badge{
  font-size:11px;
  font-weight:700;
  color:var(--rg-success);
  background:rgba(47,191,113,.1);
  border:1px solid rgba(47,191,113,.2);
  padding:6px 12px;
  border-radius:999px;
  white-space:nowrap;
}
.rg-be__text{font-size:13px;line-height:1.4;font-weight:600;color:var(--rg-dark)}

/* Warning */
.rg-warn{
  margin-top:12px;
  font-size:13px;
  padding:14px 16px;
  border-radius:var(--rg-radius-sm);
  background:rgba(239,68,68,.05);
  border:1px solid rgba(239,68,68,.15);
  color:#b91c1c;
}

/* Buttons */
.rg-actions{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
}

.rg-roi .rg-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:100% !important;
  min-height:48px !important;
  padding:12px 14px !important;
  border-radius:var(--rg-radius-sm) !important;
  border:none !important;
  background:var(--rg-card-bg) !important;
  color:var(--rg-dark) !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  cursor:pointer !important;
  box-sizing:border-box !important;
  max-width:100% !important;
  box-shadow:0 2px 8px rgba(15,37,55,.08),inset 0 0 0 1.5px #e2e8f0 !important;
  transition:all .15s ease !important;
}
.rg-roi .rg-btn:hover:not(:disabled){
  transform:translateY(-2px) !important;
  box-shadow:0 6px 20px rgba(15,37,55,.12),inset 0 0 0 1.5px #cbd5e1 !important;
}
.rg-roi .rg-btn:active:not(:disabled){transform:translateY(0) !important}
.rg-roi .rg-btn:disabled{
  opacity:.4 !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
}

.rg-roi .rg-btn--primary{
  background:linear-gradient(135deg,var(--rg-primary) 0%,var(--rg-primary-dark) 100%) !important;
  color:var(--rg-dark) !important;
  box-shadow:0 4px 16px rgba(22,198,229,.3),inset 0 0 0 1.5px transparent !important;
}
.rg-roi .rg-btn--primary:hover:not(:disabled){
  box-shadow:0 8px 28px rgba(22,198,229,.4),inset 0 0 0 1.5px transparent !important;
}

.rg-ico{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:16px}

.rg-hint{
  grid-column:1 / -1;
  font-size:12px;
  color:#64748b;
  line-height:1.4;
  margin-top:4px;
}

/* Disclaimer */
.rg-disclaimer{margin-top:16px;font-size:12px;color:#94a3b8;line-height:1.4;text-align:center}

/* Details */
.rg-details{
  margin-top:16px;
  border-radius:var(--rg-radius-sm);
  background:var(--rg-card-bg);
  border:1px solid var(--rg-border);
  padding:14px 16px;
}
.rg-details summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--rg-dark);list-style:none;user-select:none}
.rg-details summary::-webkit-details-marker{display:none}
.rg-details summary::after{content:"▾";float:right;opacity:.5;transition:transform .2s ease}
.rg-details[open] summary::after{transform:rotate(180deg)}
.rg-details__grid{margin-top:14px;display:grid;gap:10px}
.rg-kpi{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #f1f5f9}
.rg-kpi:last-child{border-bottom:none}
.rg-k{font-size:13px;color:#64748b}
.rg-v{font-size:14px;font-weight:700;color:var(--rg-dark);white-space:nowrap}

/* Assumptions */
.rg-assumptions{margin-top:14px;padding-top:14px;border-top:1px solid #f1f5f9}
.rg-assumptions__title{font-weight:700;font-size:12px;color:var(--rg-dark);margin-bottom:8px}
.rg-assumptions__list{margin:0;padding-left:18px;font-size:12px;color:#64748b;line-height:1.5}
.rg-assumptions__list li{margin:4px 0}

/* Helpers */
.rg-hide{display:none !important}
.rg-optional{font-size:11px;color:#94a3b8;font-weight:600}

/* Responsive */
@media (max-width: 1200px){
  .rg-grid{grid-template-columns:1fr 1fr;gap:16px}
}
@media (max-width: 768px){
  .rg-grid{grid-template-columns:1fr;gap:16px}
  .rg-roi__head h3{font-size:22px}
  .rg-metrics{grid-template-columns:1fr 1fr}
  .rg-hero__value{font-size:28px}
}

/* Print styles */
@media print {
  @page { size: A4; margin: 12mm; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rg-actions, .rg-hint, .rg-warn { display:none !important; }
  .rg-grid { grid-template-columns: 1fr 1fr !important; gap: 10mm !important; }
  .rg-card{
    border: 1px solid #111 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    background:#fff !important;
  }
  .rg-result{border:2px solid #111 !important}
}