:root{
  --ynm-lc-border:#e8e8e3;
  --ynm-lc-bg:#ffffff;
  --ynm-lc-muted:#5f6673;
  --ynm-lc-text:#1d2430;
  --ynm-lc-primary:#2b7562;
  --ynm-lc-primary-2:#3f8b77;
  --ynm-lc-accent:#f6f3ee;
  --ynm-lc-radius:16px;
}

.ynm-lighting-calc{ 
  max-width:980px;
  margin:20px auto;
  padding:24px;
  border:1px solid var(--ynm-lc-border);
  border-radius:var(--ynm-lc-radius);
  background:linear-gradient(180deg,#fff 0%,#fff 65%,#fbfaf8 100%);
  color:var(--ynm-lc-text);
  box-shadow:0 8px 28px rgba(31,48,44,.06);
}

.ynm-lighting-calc__title{
  margin:0;
  font-family:"Playfair Display","Times New Roman",serif;
  font-size:34px;
  line-height:1.15;
  letter-spacing:.01em;
}

.ynm-lighting-calc__desc{
  margin:10px 0 0;
  color:var(--ynm-lc-muted);
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.65;
}

.ynm-lighting-calc__grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

@media (max-width:900px){
  .ynm-lighting-calc{
    padding:18px;
  }
  .ynm-lighting-calc__grid{
    grid-template-columns:1fr;
  }
}

.ynm-lighting-calc__card{
  border:1px solid var(--ynm-lc-border);
  border-radius:14px;
  background:#fff;
  padding:14px;
}

.ynm-lighting-calc__card h4{
  margin:0 0 10px;
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:15px;
  font-weight:700;
}

.ynm-lighting-calc__fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.ynm-lighting-calc__fields--dims{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

@media (max-width:700px){
  .ynm-lighting-calc__fields,
  .ynm-lighting-calc__fields--dims{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

.ynm-lighting-calc__dims{
  display:flex; 
  flex-direction:column;
  gap:10px;
}

.ynm-lighting-calc__dim-row{
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:10px;
  align-items:center;
}

.ynm-lighting-calc__dim-label{
  color:var(--ynm-lc-muted);
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:13px;
  font-weight:600;
}
 
.ynm-lighting-calc__dim-inputs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

/* Override generic `.ynm-lighting-calc label` column layout:
   for unit controls we need input + unit on one line. */
.ynm-lighting-calc label.ynm-lighting-calc__dim-unit{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
}

.ynm-lighting-calc label.ynm-lighting-calc__dim-unit span{
  color:var(--ynm-lc-muted);
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}

@media (max-width:640px){
  .ynm-lighting-calc__dim-row{
    grid-template-columns:1fr;
  }
}

.ynm-lighting-calc label{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.ynm-lighting-calc label span{
  color:var(--ynm-lc-muted);
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:12px;
}

.ynm-lc-input{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--ynm-lc-border);
  border-radius:10px;
  background:#fff;
  color:var(--ynm-lc-text);
  padding:10px 12px;
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:14px;
  outline:none;
}

.ynm-lc-input:focus{
  border-color:rgba(43,117,98,.72);
  box-shadow:0 0 0 3px rgba(43,117,98,.14);
}

.ynm-lighting-calc__toggle{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ynm-lighting-calc__toggle label{
  flex:1 1 220px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  border:1px solid var(--ynm-lc-border);
  border-radius:10px;
  padding:9px 10px;
  background:var(--ynm-lc-accent);
  font-family:"Montserrat","Segoe UI",sans-serif;
}

.ynm-lighting-calc__actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.ynm-lc-btn{
  border:1px solid var(--ynm-lc-border);
  border-radius:10px;
  background:#fff;
  color:var(--ynm-lc-text);
  padding:10px 14px;
  cursor:pointer;
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:14px;
}

.ynm-lc-btn:hover{
  border-color:#c7cdc0;
}

.ynm-lc-btn--primary{
  border-color:transparent;
  color:#fff;
  background:linear-gradient(180deg,var(--ynm-lc-primary-2),var(--ynm-lc-primary));
}

.ynm-lc-btn--primary:hover{
  filter:brightness(1.03);
}

.ynm-lighting-calc__result{
  margin-top:14px;
  border:1px dashed var(--ynm-lc-border);
  border-radius:14px;
  background:#fff;
  padding:16px;
}

.ynm-lc-result-head{
  font-family:"Montserrat","Segoe UI",sans-serif;
  color:var(--ynm-lc-muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.ynm-lc-result-main{
  margin-top:6px;
  font-family:"Playfair Display","Times New Roman",serif;
  font-size:54px;
  line-height:1;
}

.ynm-lc-kv{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px 12px;
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:14px;
}

.ynm-lc-kv div:nth-child(odd){
  color:var(--ynm-lc-muted);
}

.ynm-lc-tip{
  margin-top:11px;
  padding-top:10px; 
  border-top:1px solid var(--ynm-lc-border);
  color:#2a3342;
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:13px;
}

.ynm-lc-how{
  margin-top:12px;
  border-top:1px dashed var(--ynm-lc-border);
  padding-top:10px;
}

.ynm-lc-how__title{
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ynm-lc-muted);
}

.ynm-lc-how__list{
  margin:8px 0 0;
  padding-left:18px;
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:13px;
  line-height:1.5;
  color:#2a3342;
}

.ynm-lc-how__list li{
  margin:5px 0;
}

.ynm-lc-error{
  color:#b42318;
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:14px;
}