* {
  box-sizing:border-box
}
body {
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:#f5f8f6;
  color:#18221d
}
button,input,select {
  font:inherit
}
button {
  cursor:pointer
}
.app {
  min-height:100vh
}
header {
  background:#0d5137;
  color:#fff;
  padding:28px 20px
}
.header-inner {
  max-width:1050px;
  margin:auto
}
.brand {
  font-size:28px;
  font-weight:800
}
.subtitle {
  margin:7px 0 0;
  color:#d9eee4
}
main {
  max-width:1050px;
  margin:0 auto;
  padding:28px 18px 60px
}
.card {
  background:#fff;
  border:1px solid #e2ebe6;
  border-radius:18px;
  padding:24px;
  box-shadow:0 8px 28px rgba(19,55,39,.06);
  margin-bottom:20px
}
h2 {
  font-size:22px;
  margin-top:0
}
.progress {
  display:flex;
  gap:8px;
  margin-bottom:22px
}
.progress span {
  height:6px;
  flex:1;
  background:#dce7e1;
  border-radius:99px
}
.progress span.active {
  background:#0d5137
}
.grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}
.field {
  display:flex;
  flex-direction:column;
  gap:7px
}
.field.full {
  grid-column:1/-1
}
label {
  font-weight:700;
  font-size:14px
}
.help {
  font-size:12px;
  color:#65746d;
  line-height:1.45
}
input,select {
  width:100%;
  padding:13px 14px;
  border:1px solid #cbd9d1;
  border-radius:10px;
  background:#fff;
  outline:none
}
input:focus,select:focus {
  border-color:#0d5137;
  box-shadow:0 0 0 3px rgba(13,81,55,.1)
}
.choice-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.choice {
  border:1px solid #d4e1da;
  border-radius:13px;
  padding:16px;
  background:#fff;
  text-align:left;
  transition:.15s
}
.choice:hover {
  border-color:#0d5137
}
.choice.selected {
  border:2px solid #0d5137;
  background:#edf7f1
}
.choice strong {
  display:block;
  margin-bottom:4px
}
.choice small {
  color:#65746d
}
.actions {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:22px
}
.btn {
  border:0;
  border-radius:10px;
  padding:13px 20px;
  font-weight:750
}
.primary {
  background:#0d5137;
  color:#fff
}
.secondary {
  background:#e9f0ec;
  color:#18382a
}
.hidden {
  display:none!important
}
.notice {
  padding:14px 16px;
  border-radius:12px;
  background:#eef7f2;
  border:1px solid #d5e9de;
  color:#285440;
  margin-bottom:18px
}
.warning {
  background:#fff7e8;
  border-color:#f0d9a4;
  color:#76551a
}
.pricebox {
  background:#f4f8f6;
  border:1px solid #dce9e2;
  border-radius:12px;
  padding:14px;
  margin-top:5px
}
.pricebox strong {
  display:block;
  font-size:18px;
  color:#0d5137
}
.price-status {
  font-size:12px;
  color:#66766e;
  margin-top:4px
}
.result-total {
  font-size:38px;
  font-weight:850;
  color:#0d5137;
  margin:8px 0 20px
}
.result-row {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:11px 0;
  border-bottom:1px solid #edf1ef
}
.result-row:last-child {
  border-bottom:0
}
.result-row span:first-child {
  color:#5c6c64
}
.badge {
  display:inline-block;
  background:#e7f4ed;
  color:#0d5137;
  padding:6px 10px;
  border-radius:99px;
  font-size:12px;
  font-weight:800
}
.summary {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:18px 0
}
.summary-box {
  background:#f4f8f6;
  border-radius:12px;
  padding:15px
}
.summary-box small {
  display:block;
  color:#68776f;
  margin-bottom:5px
}
.summary-box strong {
  font-size:18px
}
.status-loading {
  color:#76551a
}
.status-ok {
  color:#17643f
}
.status-error {
  color:#9a3f2d
}
.muted {
  color:#66766e;
  font-size:12px
}
footer {
  text-align:center;
  color:#718078;
  font-size:13px;
  padding:0 20px 35px
}
.source-line {
  font-size:11px;
  color:#7a8982;
  margin-top:7px
}
@media(max-width:700px) {
  .grid,.choice-grid,.summary {
    grid-template-columns:1fr
  }
  .card {
    padding:18px
  }
  .actions {
    flex-direction:column-reverse
  }
  .btn {
    width:100%
  }
  .result-total {
    font-size:31px
  }
}
@media print {
  header,footer,.progress,.actions,.no-print {
    display:none!important
  }
  body {
    background:#fff
  }
  .card {
    box-shadow:none;
    border:0
  }
}

/* ===== Professional dashboard information ===== */
.info-section {
  margin: 34px 0 10px;
}
.info-heading {
  text-align:center;
  margin:0 0 8px;
  font-size:21px;
  color:#18382a;
}
.info-intro {
  max-width:720px;
  margin:0 auto 20px;
  text-align:center;
  color:#66766e;
  font-size:13px;
  line-height:1.6;
}
.info-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.info-card {
  background:#fff;
  border:1px solid #e2ebe6;
  border-radius:16px;
  padding:20px;
  box-shadow:0 7px 24px rgba(19,55,39,.05);
}
.info-card-mark {
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:#e7f4ed;
  color:#0d5137;
  font-weight:850;
  font-size:14px;
  margin-bottom:13px;
}
.info-card h3 {
  margin:0 0 7px;
  font-size:16px;
  color:#18382a;
}
.info-card p {
  margin:0;
  color:#66766e;
  font-size:13px;
  line-height:1.6;
}
.app-footer {
  margin-top:28px;
  padding:20px 0 5px;
  border-top:1px solid #dfe9e3;
  text-align:center;
}
.app-footer strong {
  display:block;
  color:#0d5137;
  font-size:14px;
  margin-bottom:4px;
}
.app-footer span {
  color:#7a8982;
  font-size:12px;
}
@media(max-width:700px) {
  .info-grid {
    grid-template-columns:1fr;
  }
  .info-section {
    margin-top:28px;
  }
}
@media print {
  .info-section {
    display:none!important;
  }
}