:root{--fl-bg:#e8f4ff;--fl-border:#b0d4f8;--fl-text:#185890;--fl-mid:#2f7fc4;--fl-dark:#0e3a5e}

.app-hero{border-bottom:1px solid var(--color-border);padding:1.25rem 1.5rem 1.1rem}
.app-hero--sky{background:var(--fl-bg);border-bottom-color:var(--fl-border)}
.app-hero__inner{max-width:1100px;margin:0 auto}
.app-hero__title{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;color:var(--fl-text);letter-spacing:-.02em;margin:0 0 .5rem;line-height:1.2}
.app-hero__desc{font-size:.9rem;color:var(--color-text-secondary);max-width:660px;line-height:1.6;margin:0 0 .85rem}
.app-hero__chips{display:flex;flex-wrap:wrap;gap:.35rem}
.hero-chip{display:inline-flex;align-items:center;padding:.22rem .65rem;font-size:.72rem;font-weight:700;background:var(--color-surface);border:1.5px solid var(--fl-border);border-radius:var(--radius-full);color:var(--fl-text);white-space:nowrap}

/* layout */
.app-wrap{display:flex;gap:1.5rem;align-items:flex-start;max-width:1100px;margin:0 auto;padding:1.5rem 1rem 3rem}
.pane-in{width:360px;flex-shrink:0;display:flex;flex-direction:column;gap:1rem}
.pane-out{flex:1;min-width:0;display:flex;flex-direction:column;gap:1rem}

.card{background:var(--color-surface);border:1px solid var(--fl-border);border-radius:var(--radius-xl);padding:1rem 1.125rem}
.card-title{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fl-text);margin:0 0 .75rem}

.field{margin-bottom:.7rem}
.field:last-child{margin-bottom:0}
label.lbl{display:block;font-size:.72rem;font-weight:600;color:var(--color-text-muted);margin-bottom:.28rem}
select.sel,input.num-in{width:100%;box-sizing:border-box;padding:.4rem .6rem;font-size:.82rem;border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);transition:border-color .15s}
select.sel:focus,input.num-in:focus{outline:none;border-color:var(--fl-mid)}

/* unit toggle */
.unit-toggle{display:flex;border:1.5px solid var(--fl-border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:.75rem}
.unit-toggle button{flex:1;padding:.32rem .5rem;font-size:.74rem;font-weight:600;background:none;border:none;cursor:pointer;color:var(--color-text-muted);transition:background .15s,color .15s}
.unit-toggle button.active{background:var(--fl-bg);color:var(--fl-text)}

/* two/three column input rows */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}
.inline-unit{display:flex;align-items:center;gap:.4rem}
.inline-unit input{flex:1}
.inline-unit span{font-size:.78rem;color:var(--color-text-muted);white-space:nowrap}

/* sliders */
.slider-row{display:flex;align-items:center;gap:.5rem}
.slider-row input[type=range]{flex:1;accent-color:var(--fl-mid);height:4px}
.slider-val{font-size:.78rem;font-weight:700;color:var(--fl-text);min-width:34px;text-align:right}

/* toggle switch (checkbox row) */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.toggle-row .lbl{margin:0}
.chk{width:18px;height:18px;accent-color:var(--fl-mid);cursor:pointer}

/* opening rows */
.open-header{display:grid;grid-template-columns:1fr 1fr 48px auto;gap:.35rem;font-size:.63rem;color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem}
.open-entry{display:grid;grid-template-columns:1fr 1fr 48px auto;gap:.35rem;align-items:center;margin-bottom:.4rem}
.open-entry input{font-size:.78rem;padding:.3rem .4rem}
.rm-btn{width:24px;height:24px;background:none;border:1px solid var(--color-border);border-radius:50%;cursor:pointer;font-size:.9rem;line-height:1;color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rm-btn:hover{border-color:#c04040;color:#c04040}
.add-row-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .7rem;font-size:.75rem;font-weight:600;background:var(--fl-bg);border:1px solid var(--fl-border);border-radius:var(--radius-md);color:var(--fl-text);cursor:pointer;margin-top:.4rem;transition:background .15s}
.add-row-btn:hover{background:var(--fl-border)}
.preset-row{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.5rem}
.preset-btn{padding:.22rem .55rem;font-size:.68rem;font-weight:600;background:none;border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);cursor:pointer}
.preset-btn:hover{border-color:var(--fl-border);background:var(--fl-bg);color:var(--fl-text)}

.hint{font-size:.67rem;color:var(--color-text-muted);margin:.4rem 0 0;line-height:1.5}

/* RIGHT pane results */
.result-hero{background:var(--color-surface);border:1px solid var(--fl-border);border-radius:var(--radius-xl);padding:1.25rem}
.big-stats{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.big-cell{background:var(--fl-bg);border:1px solid var(--fl-border);border-radius:var(--radius-md);padding:.7rem .85rem}
.big-cell.span{grid-column:span 2}
.big-lbl{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:.2rem}
.big-val{font-size:1.7rem;font-weight:800;color:var(--fl-dark);line-height:1}
.big-val.sm{font-size:1.2rem}
.big-sub{font-size:.7rem;color:var(--color-text-muted);margin-top:.2rem}

.cans-line{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.cans-num{font-size:1.7rem;font-weight:800;color:var(--fl-dark);line-height:1}

/* breakdown card */
.breakdown{background:var(--color-surface);border:1px solid var(--fl-border);border-radius:var(--radius-xl);padding:1rem 1.125rem}
.bd-row{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;padding:.32rem 0;border-bottom:1px dashed var(--color-border)}
.bd-row:last-child{border-bottom:none}
.bd-lbl{color:var(--color-text-secondary)}
.bd-val{font-weight:700;color:var(--fl-text)}
.bd-total{border-top:1.5px solid var(--fl-border);margin-top:.2rem;padding-top:.5rem;font-size:.9rem}
.bd-total .bd-val{font-size:1rem;color:var(--fl-dark)}

.empty-msg{color:var(--color-text-muted);font-size:.82rem;font-style:italic;text-align:center;padding:1rem 0}

/* learn more */
.learn-more{max-width:820px;margin:1.25rem auto 0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1.1rem 1.5rem}
.learn-more-title{font-size:1.1rem;font-weight:800;color:var(--fl-text);margin:0 0 .75rem}
.learn-more h3{font-size:1rem;font-weight:800;color:var(--color-text-primary);margin:1.1rem 0 .5rem}
.learn-more p{font-size:.88rem;line-height:1.65;color:var(--color-text-secondary);margin:0 0 .75rem}
.learn-more a{color:var(--fl-text)}
.learn-more .faq-item{margin-bottom:.75rem}
.learn-more .faq-q{font-size:.88rem;font-weight:700;color:var(--color-text-primary);margin:0 0 .25rem}
.learn-more-meta{font-size:.72rem;color:var(--color-text-muted);margin-top:1rem}

@media(max-width:820px){
  .app-wrap{flex-direction:column}
  .pane-in{width:100%}
  .big-stats{grid-template-columns:1fr 1fr}
}