: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;
}
}