:root{
  --lls-orange:#e97817;
  --lls-orange-dark:#c85f08;
  --lls-orange-soft:#fff5ea;
  --lls-orange-pale:#fffaf5;
  --lls-border:#ead7c5;
  --lls-text:#222;
  --lls-muted:#6f6258;
  --lls-result-red:#d92b22;
  --lls-gray:#f4f4f4;
}

.lls-card{
  background:#fff;
  border:1px solid #eee3d8;
  border-radius:16px;
  box-shadow:0 12px 32px rgba(82,55,31,.12);
  padding:22px;
  margin:22px 0;
  color:var(--lls-text);
  overflow:hidden;
}

.lls-mode-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin:0 0 18px;
  border:1px solid var(--lls-border);
  border-radius:12px;
  overflow:hidden;
  background:#fff8f1;
}

.lls-mode-tab{
  position:relative;
  margin:0;
  cursor:pointer;
  user-select:none;
}

.lls-mode-tab + .lls-mode-tab{
  border-left:1px solid var(--lls-border);
}

.lls-mode-tab input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.lls-mode-tab span{
  display:block;
  padding:13px 16px;
  text-align:center;
  font-weight:700;
  line-height:1.4;
  color:#6b5141;
  background:#fff8f1;
  transition:.18s ease;
}

.lls-mode-tab:hover span{
  background:#fff0df;
}

.lls-mode-tab input:checked + span{
  color:#fff;
  background:var(--lls-orange);
  box-shadow:inset 0 -3px 0 var(--lls-orange-dark);
}

.lls-mode-tab input:focus-visible + span{
  outline:2px solid #222;
  outline-offset:-4px;
}

.lls-input-panel{
  background:linear-gradient(180deg,var(--lls-orange-pale),#fff7ee);
  border:1px solid #f1ddca;
  border-radius:14px;
  padding:20px;
}

.lls-note{
  font-size:13px;
  color:var(--lls-muted);
  margin:0 0 18px;
}

.lls-field{
  margin:0 0 18px;
}

.lls-field>label{
  display:block;
  font-weight:700;
  font-size:15px;
  margin:0 0 7px;
}

.lls-price-field{
  background:#fff;
  border:1px solid #f0dfcf;
  border-left:5px solid var(--lls-orange);
  border-radius:10px;
  padding:14px 16px;
}

.lls-static{
  font-size:22px;
  font-weight:700;
}

.lls-inline{
  display:flex;
  align-items:center;
  gap:9px;
}

.lls-inline input{
  width:100%;
  max-width:310px;
  min-height:48px;
  padding:10px 14px;
  border:1.5px solid #ddc6b3;
  border-radius:9px;
  background:#fff;
  font-size:18px;
  font-weight:600;
  box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.lls-inline input:focus{
  outline:none;
  border-color:var(--lls-orange);
  box-shadow:0 0 0 3px rgba(233,120,23,.12);
}

.lls-inline span{
  font-weight:700;
  white-space:nowrap;
}

.lls-rate-options{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-bottom:10px;
}

.lls-rate-options label{
  line-height:1.5;
  cursor:pointer;
}

.lls-rate-options input{
  accent-color:var(--lls-orange);
}

.lls-section,
.lls-person{
  border-top:1px solid #ecdccc;
  padding-top:18px;
  margin-top:10px;
}

.lls-person{
  background:rgba(255,255,255,.48);
  border:1px solid #efddcc;
  border-radius:12px;
  padding:16px;
  margin-top:14px;
}

.lls-person h4{
  margin:0 0 15px;
  font-size:18px;
  color:var(--lls-orange-dark);
}

.lls-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:24px;
}

.lls-actions button{
  border:0;
  border-radius:9px;
  min-height:50px;
  padding:11px 26px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.lls-actions button:active{
  transform:translateY(1px);
}

.lls-calc-button{
  min-width:240px;
  color:#fff;
  background:var(--lls-orange);
  box-shadow:0 6px 14px rgba(201,95,8,.22);
}

.lls-calc-button:hover{
  background:var(--lls-orange-dark);
}

.lls-dirty .lls-calc-button{
  box-shadow:0 0 0 4px rgba(233,120,23,.13), 0 6px 14px rgba(201,95,8,.22);
}

.lls-reset-button{
  color:#59483c;
  background:#fff;
  border:1px solid #dfcdbc!important;
}

.lls-reset-button:hover{
  background:#fff8f1;
}

.lls-results{
  margin-top:22px;
}

.lls-result-hero{
  display:flex;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  text-align:center;
  background:linear-gradient(180deg,#fff6ec,#fffaf6);
  border:2px solid #f2c89f;
  border-radius:13px;
  padding:18px 14px!important;
  margin:0 0 18px;
}

.lls-result-hero span{
  font-size:16px;
  font-weight:700;
  color:#6d5140;
}

.lls-result-hero strong{
  font-size:34px;
  line-height:1.2;
  color:var(--lls-result-red);
  letter-spacing:.01em;
}

.lls-result{
  border-top:1px solid #ece5df;
  padding-top:10px;
  margin-top:10px;
}

.lls-result>div,
.lls-pair-summary>div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:9px 4px;
}

.lls-result strong,
.lls-pair-summary strong{
  font-variant-numeric:tabular-nums;
}

.lls-total{
  font-size:18px;
  font-weight:700;
  border-top:1px solid #ddd2c8;
  margin-top:6px;
  padding-top:13px!important;
}

.lls-pair-summary{
  margin-top:20px;
  background:var(--lls-gray);
  border-radius:11px;
  padding:8px 14px;
  border:1px solid #e3e3e3;
}

.lls-pair-summary>div{
  font-size:17px;
  font-weight:700;
  border-bottom:1px solid #ddd;
  padding:12px 2px;
}

.lls-pair-summary>div:last-child{
  border-bottom:0;
}

.lls-pair-summary>div:last-child strong{
  color:var(--lls-result-red);
  font-size:20px;
}

.lls-balance-note{
  font-size:13px;
  color:#a33;
  margin:8px 0 0;
  font-weight:700;
}

.lls-disclaimer{
  font-size:12px;
  line-height:1.8;
  color:#766b63;
  margin:18px 2px 0;
}

@media(max-width:640px){
  .lls-card{
    padding:14px;
    border-radius:12px;
  }

  .lls-input-panel{
    padding:15px;
  }

  .lls-mode-tab span{
    padding:12px 8px;
  }

  .lls-inline input{
    max-width:100%;
  }

  .lls-actions{
    flex-direction:column-reverse;
  }

  .lls-actions button{
    width:100%;
  }

  .lls-calc-button{
    min-width:0;
  }

  .lls-result-hero strong{
    font-size:30px;
  }

  .lls-result>div,
  .lls-pair-summary>div{
    align-items:flex-start;
  }
}


/* v2.0: keep units visually attached to editable values */
.lls-inline{
  position:relative;
  display:inline-flex;
  align-items:center;
  width:min(100%, 360px);
  gap:0;
}

.lls-inline input{
  width:100%;
  max-width:none;
  padding-right:58px;
}

.lls-inline > span{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  margin:0;
  padding:0;
  font-size:14px;
  font-weight:700;
  line-height:1;
  color:#4f4036;
  pointer-events:none;
  background:transparent;
}

/* Percent and year units need less room, but keeping one common right gutter
   makes all fields line up neatly. */
.lls-field .lls-inline{
  vertical-align:middle;
}

@media(max-width:640px){
  .lls-inline{
    width:100%;
    max-width:100%;
  }

  .lls-inline input{
    width:100%;
    padding-right:58px;
  }

  .lls-inline > span{
    right:13px;
  }
}