:root{
  --rv-a:#ff5c8a;
  --rv-b:#ff9a3d;
  --rv-border: rgba(31,41,55,.12);
  --rv-shadow: 0 14px 50px rgba(15,23,42,.08);
  --rv-bg:#f8fafc;
  --rv-text:#0f172a;
  --rv-muted:#64748b;
  --rv-soft:#f6f7fb;
}

body{ margin:0; background:var(--rv-bg); color:var(--rv-text); }
.rv-wrap{ max-width:1140px; margin:0 auto; padding:0 15px; }
.rv-grad{ background:linear-gradient(90deg,var(--rv-a),var(--rv-b)); color:#fff; }
.rv-card{ background:#fff; border:1px solid var(--rv-border); border-radius:18px; box-shadow:var(--rv-shadow); }
.rv-soft{ background:var(--rv-soft); border:1px solid var(--rv-border); border-radius:16px; }
.rv-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.rv-between{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:flex-start; }
.rv-grid{ display:grid; grid-template-columns:1fr; gap:18px; padding:24px 0; }
@media (min-width:992px){ .rv-grid{ grid-template-columns: 7fr 5fr; } }
.rv-grid2{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:576px){ .rv-grid2{ grid-template-columns:1fr 1fr; } }

.rv-label{ display:block; font-size:13px; font-weight:800; color:#334155; margin-bottom:6px; }
.rv-help{ font-size:12px; color:var(--rv-muted); margin-top:6px; }
.rv-mono{ font-variant-numeric: tabular-nums; }
.rv-input,.rv-select{
  width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid var(--rv-border); background:#fff; outline:none;
}
.rv-input:focus,.rv-select:focus{ box-shadow:0 0 0 3px rgba(255,92,138,.18); border-color:rgba(255,92,138,.45); }

.rv-btn{
  padding:12px 16px; border-radius:12px; font-weight:900;
  border:1px solid var(--rv-border); background:#fff; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center;
}
.rv-btn-primary{ border:none; color:#fff; background:linear-gradient(90deg,var(--rv-a),var(--rv-b)); }
.rv-btn:hover{ opacity:.95; }

.rv-btn-wa{
  border:none;
  color:#fff;
  background:linear-gradient(90deg,#22c55e,#16a34a);
}

.rv-hidden{ display:none !important; }
.rv-h1{ margin:0; font-size:30px; font-weight:900; }
.rv-h2{ margin:0; font-size:18px; font-weight:900; }
.rv-result{ font-size:40px; font-weight:900; }
.rv-diagram{ width:100%; height:140px; border-radius:16px; border:1px dashed rgba(15,23,42,.18); background:#fff; }
footer{ border-top:1px solid var(--rv-border); background:#fff; padding:16px 0; }

/* BOM */
.rv-bom-head{
  padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(90deg,var(--rv-a),var(--rv-b));
  color:#fff;
  font-weight:900;
}
.rv-table-wrap{
  width:100%;
  overflow:auto;
  border-radius:16px;
  border:1px solid var(--rv-border);
  background:#fff;
}
.rv-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:760px;
}
.rv-table th,.rv-table td{
  padding:12px 12px;
  border-bottom:1px solid var(--rv-border);
  vertical-align:top;
}
.rv-table th{
  position:sticky; top:0; background:#fff; z-index:1;
  font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#334155;
}
.rv-table tr:last-child td{ border-bottom:none; }
.rv-del{
  border:none;
  background:rgba(255,92,138,.12);
  color:#9f1239;
  font-weight:900;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}
.rv-del:hover{ opacity:.9; }

.rv-totalbar{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 16px;
  border-top:1px solid var(--rv-border);
  background:var(--rv-soft);
  border-radius:0 0 16px 16px;
}
.rv-totalbar b{ font-size:14px; }
.rv-grand{ font-size:16px; font-weight:900; }

/* Modal */
.rv-modal-backdrop{
  position:fixed; inset:0;
  background:rgba(2,6,23,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:9999;
}
.rv-modal{
  width:min(760px,100%);
  background:#fff;
  border-radius:18px;
  border:1px solid var(--rv-border);
  box-shadow:0 20px 70px rgba(0,0,0,.25);
  overflow:hidden;
}
.rv-modal-head{
  padding:14px 16px;
  background:linear-gradient(90deg,var(--rv-a),var(--rv-b));
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.rv-modal-body{ padding:16px; }
.rv-modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.rv-x{
  border:none;
  background:rgba(255,255,255,.22);
  color:#fff;
  font-weight:900;
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
}
.rv-x:hover{ opacity:.9; }