/* SGXpert Realty — Residential Property Calculator v1.2 */
.rpc-app{
  --rpc-navy:#0b1733;
  --rpc-navy-2:#132b55;
  --rpc-ink:#14213a;
  --rpc-muted:#66758d;
  --rpc-line:#dce4ef;
  --rpc-bg:#f6f8fc;
  --rpc-card:#ffffff;
  --rpc-accent:#2f6fed;
  --rpc-accent-dark:#2159c7;
  --rpc-good:#07855b;
  --rpc-bad:#c93636;
  --rpc-soft:#f4f8ff;
  width:100%;
  box-sizing:border-box;
  color:var(--rpc-ink);
  background:var(--rpc-bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.45;
  padding:1px 0 34px;
}
.rpc-app, .rpc-app *{box-sizing:border-box}
.rpc-app header{
  max-width:1120px;
  margin:24px auto 0;
  padding:36px 38px 40px;
  border-radius:18px;
  color:#fff !important;
  background:
    radial-gradient(circle at 92% 15%,rgba(72,119,220,.18),transparent 30%),
    linear-gradient(135deg,var(--rpc-navy),var(--rpc-navy-2));
  box-shadow:0 14px 36px rgba(14,31,63,.12);
  overflow:hidden;
}
.rpc-app header .wrap{max-width:none;margin:0}
.rpc-app header h1,
.rpc-app header h1 *{
  color:#fff !important;
}
.rpc-app h1{
  font-size:clamp(32px,4vw,44px) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em;
  font-weight:800 !important;
  margin:0 0 10px !important;
}
.rpc-app .subtitle{
  max-width:760px;
  color:#dce7f7 !important;
  font-size:14px;
  line-height:1.65;
}
.rpc-app .subtitle b{color:#fff !important}
.rpc-app main{
  max-width:1120px;
  margin:18px auto 0;
  padding:0;
}
.rpc-app .grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
}
.rpc-app .card{
  min-width:0;
  background:var(--rpc-card);
  border:1px solid var(--rpc-line);
  border-radius:16px;
  padding:22px;
  box-shadow:0 5px 20px rgba(20,38,70,.055);
}
.rpc-app .card h2{
  color:var(--rpc-ink) !important;
  font-size:18px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  letter-spacing:-.015em;
  margin:0 0 5px !important;
}
.rpc-app .card .hint{
  color:var(--rpc-muted) !important;
  font-size:12.5px;
  line-height:1.5;
  margin-bottom:17px;
}
.rpc-app .full{grid-column:1/-1}
.rpc-app label{
  display:block;
  color:var(--rpc-ink) !important;
  font-size:12px !important;
  line-height:1.35;
  font-weight:750 !important;
  margin:13px 0 6px !important;
}
.rpc-app label span[style]{font-weight:400 !important;color:#98a2b3 !important}
.rpc-app input:not([type="checkbox"]):not([type="radio"]),
.rpc-app select{
  width:100%;
  min-height:42px;
  border:1px solid #cfd9e7 !important;
  border-radius:9px !important;
  padding:9px 11px !important;
  font:inherit !important;
  font-size:14px !important;
  color:var(--rpc-ink) !important;
  background:#fff !important;
  outline:none;
  box-shadow:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.rpc-app input::placeholder{color:#a0adbd;opacity:1}
.rpc-app input:not([type="checkbox"]):not([type="radio"]):hover,
.rpc-app select:hover{border-color:#b8c5d7 !important}
.rpc-app input:not([type="checkbox"]):not([type="radio"]):focus,
.rpc-app select:focus{
  border-color:var(--rpc-accent) !important;
  box-shadow:0 0 0 3px rgba(47,111,237,.11) !important;
}
.rpc-app input[type="date"]{color-scheme:light}
.rpc-app .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.rpc-app .small{
  color:var(--rpc-muted) !important;
  font-size:11.5px;
  line-height:1.55;
  margin-top:6px;
}
.rpc-app .bad{color:var(--rpc-bad) !important}
.rpc-app .metric{
  min-width:0;
  border:1px solid var(--rpc-line);
  border-radius:12px;
  padding:15px 16px;
  background:#fff !important;
}
.rpc-app .card > .metric{
  margin-top:14px !important;
  background:var(--rpc-soft) !important;
  border-color:#d7e4f8;
}
.rpc-app .metric .k{
  color:#63738c !important;
  font-size:10.5px;
  line-height:1.35;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.075em;
}
.rpc-app .metric .v{
  color:var(--rpc-ink) !important;
  font-size:23px !important;
  line-height:1.15;
  font-weight:850 !important;
  margin-top:5px;
  letter-spacing:-.02em;
}
.rpc-app .good{color:var(--rpc-good) !important}
.rpc-app .bad{color:var(--rpc-bad) !important}
.rpc-app .big{
  background:linear-gradient(135deg,#f4f8ff,#fff) !important;
  border-color:#cbdcf6;
}
.rpc-app .big .v{font-size:34px !important}
.rpc-app .results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.rpc-app .results .metric{min-height:91px}
.rpc-app .breakdown{width:100%;border-collapse:separate;border-spacing:0;margin-top:4px;overflow:hidden}
.rpc-app .breakdown td{
  padding:9px 8px;
  border-bottom:1px solid #edf1f6;
  color:#34435c;
  font-size:12.5px;
  vertical-align:middle;
}
.rpc-app .breakdown td:first-child{padding-left:0}
.rpc-app .breakdown td:last-child{text-align:right;padding-right:0;color:var(--rpc-ink);font-weight:750;white-space:nowrap}
.rpc-app .breakdown tr:last-child td{border-bottom:0}
.rpc-app .breakdown .total td{
  border-top:2px solid #d6dfeb;
  padding-top:13px;
  color:var(--rpc-ink);
  font-size:14px;
  font-weight:850;
}
.rpc-app .note{
  background:#fff9e9 !important;
  border:1px solid #f1dfaa;
  border-radius:11px;
  padding:12px 13px;
  color:#66531f;
  font-size:11.5px;
  line-height:1.55;
}
.rpc-app .toggle{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  color:#475467 !important;
  font-size:12px;
  line-height:1.45;
}
.rpc-app .toggle input[type="checkbox"]{
  width:15px !important;
  height:15px !important;
  min-width:15px;
  margin:0;
  accent-color:var(--rpc-accent);
}
.rpc-app .actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}
.rpc-app button{
  border:0;
  border-radius:9px;
  min-height:40px;
  padding:10px 15px;
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.rpc-app button:hover{transform:translateY(-1px)}
.rpc-app .primary{background:var(--rpc-accent);color:#fff;box-shadow:0 5px 14px rgba(47,111,237,.2)}
.rpc-app .primary:hover{background:var(--rpc-accent-dark)}
.rpc-app .secondary{background:#eef2f7;color:#26334b}
.rpc-app .secondary:hover{background:#e5eaf2}
.rpc-app footer{
  max-width:1120px;
  margin:0 auto;
  padding:0;
  color:#718096 !important;
  font-size:10.5px;
  line-height:1.6;
}
.rpc-app footer strong{color:#4b5b73}
.rpc-app a{color:var(--rpc-accent)}
.rpc-app .hidden{display:none !important}
.rpc-app .info-tip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px;
  height:17px;
  border:1px solid #a8b6c9;
  border-radius:50%;
  font-size:10px;
  line-height:1;
  font-weight:850;
  color:#6c7b90;
  background:#fff;
  cursor:help;
  position:relative;
  margin-left:5px;
  vertical-align:1px;
  flex:0 0 auto;
}
.rpc-app .info-tip .tip-text{
  visibility:hidden;
  opacity:0;
  position:absolute;
  z-index:1000;
  left:50%;
  bottom:calc(100% + 9px);
  transform:translateX(-50%);
  width:270px;
  background:#17233a;
  color:#fff;
  padding:10px 12px;
  border-radius:9px;
  font-size:11px;
  font-weight:400;
  line-height:1.5;
  text-align:left;
  box-shadow:0 10px 28px rgba(15,30,55,.24);
  transition:opacity .14s ease,visibility .14s ease;
}
.rpc-app .info-tip .tip-text:after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#17233a;
}
.rpc-app .info-tip:hover .tip-text,
.rpc-app .info-tip:focus .tip-text{visibility:visible;opacity:1}
.rpc-app section.card.full > .grid{margin-top:18px}
.rpc-app .card.full .card{background:#fbfcfe}
.rpc-app strong{font-weight:800}
@media(max-width:900px){
  .rpc-app header{margin:16px 14px 0;padding:30px 24px 34px}
  .rpc-app main{margin:14px 14px 0}
  .rpc-app footer{margin:0 14px}
}
@media(max-width:760px){
  .rpc-app{padding-bottom:24px}
  .rpc-app header{border-radius:14px;padding:28px 20px 30px}
  .rpc-app h1{font-size:31px !important}
  .rpc-app .subtitle{font-size:13px}
  .rpc-app main{margin-top:12px}
  .rpc-app .grid{grid-template-columns:1fr;gap:12px}
  .rpc-app .full{grid-column:auto}
  .rpc-app .row{grid-template-columns:1fr;gap:0}
  .rpc-app .results{grid-template-columns:1fr;gap:10px}
  .rpc-app .card{padding:18px}
  .rpc-app .big .v{font-size:31px !important}
  .rpc-app .info-tip .tip-text{left:auto;right:-4px;transform:none;width:min(270px,calc(100vw - 50px))}
  .rpc-app .info-tip .tip-text:after{left:auto;right:9px;transform:none}
  .rpc-app .breakdown td{font-size:12px}
}
@media print{
  .rpc-app{background:#fff;padding:0}
  .rpc-app .no-print{display:none !important}
  .rpc-app header{max-width:none;margin:0;border-radius:0;box-shadow:none;background:#fff !important;color:#000 !important;padding:20px 0}
  .rpc-app header h1,.rpc-app header h1 *{color:#000 !important}
  .rpc-app .subtitle{color:#444 !important}
  .rpc-app main{max-width:none;margin:0;padding:0}
  .rpc-app .card{box-shadow:none;break-inside:avoid}
  .rpc-app .metric{box-shadow:none}
  .rpc-app footer{margin-top:20px}
}