:root {
  --bt-bg:     #fef8cc;
  --bt-border: #ead860;
  --bt-text:   #785800;
  --bt-mid:    #b08000;
  --bt-dark:   #3a2800;
}

.app-hero {
  border-bottom: 1px solid var(--color-border);
  padding: 1.25rem 1.5rem 1.1rem;
}
.app-hero--butter {
  background: var(--bt-bg);
  border-bottom-color: var(--bt-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(--bt-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(--bt-border);
  border-radius: var(--radius-full); color: var(--bt-text); white-space: nowrap;
}

.app-wrap {
  display: flex; gap: 1.5rem; align-items: flex-start;
  max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem;
}

/* ---- LEFT PANE ---- */
.pane-in {
  width: 320px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 1rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--bt-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(--bt-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;
}

input.num-in {
  width: 100%; box-sizing: border-box;
  padding: .4rem .6rem; font-size: .8rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg); color: var(--color-text);
  transition: border-color .15s;
}
input.num-in:focus { outline: none; border-color: var(--bt-mid); }

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

/* Units toggle */
.unit-toggle {
  display: flex; border: 1.5px solid var(--bt-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(--bt-bg); color: var(--bt-text); }

/* Batch / value row */
.batch-row { display: flex; gap: .5rem; align-items: center; }
.batch-row input { flex: 1; }
.batch-row span { font-size: .8rem; color: var(--color-text-muted); white-space: nowrap; }

/* Piece rows */
.piece-hdr {
  display: grid; grid-template-columns: 1fr 56px 1fr auto; gap: .35rem;
  font-size: .63rem; color: var(--color-text-muted); margin-bottom: .2rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.row-entry {
  display: grid; gap: .35rem; align-items: center;
  margin-bottom: .5rem; padding-bottom: .5rem;
  border-bottom: 1px dashed var(--color-border);
}
.row-entry:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.piece-entry { grid-template-columns: 1fr 56px 1fr auto; }
.row-entry input { font-size: .76rem; padding: .3rem .4rem; }
.row-entry .rm-btn {
  width: 22px; height: 22px;
  background: none; border: 1px solid var(--color-border);
  border-radius: 50%; cursor: pointer; font-size: .85rem; line-height: 1;
  color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.row-entry .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(--bt-bg); border: 1px solid var(--bt-border);
  border-radius: var(--radius-md); color: var(--bt-text); cursor: pointer;
  margin-top: .4rem; transition: background .15s;
}
.add-row-btn:hover { background: var(--bt-border); }

.btn-primary {
  padding: .45rem .9rem; font-size: .8rem; font-weight: 700;
  background: var(--bt-text); border: none; border-radius: var(--radius-md);
  color: #fff; cursor: pointer; transition: opacity .15s;
}
.btn-primary:hover { opacity: .85; }

/* ---- RIGHT PANE ---- */
.pane-out { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }

.stats-card, .layout-card, .seq-card {
  background: var(--color-surface); border: 1px solid var(--bt-border);
  border-radius: var(--radius-xl); padding: 1rem 1.125rem;
}

.stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}
.stat-cell {
  background: var(--bt-bg); border: 1px solid var(--bt-border);
  border-radius: var(--radius-md); padding: .5rem .6rem;
}
.stat-lbl {
  font-size: .64rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-text-muted); margin-bottom: .15rem;
}
.stat-val { font-size: 1.5rem; font-weight: 800; color: var(--bt-dark); line-height: 1; }
.stat-val.sm { font-size: 1.05rem; }
.stat-sub { font-size: .65rem; color: var(--color-text-muted); margin-top: .15rem; }

/* Warning */
.warn-box {
  background: #ffeaea; border: 1px solid #f0b0b0; color: #b02020;
  border-radius: var(--radius-md); padding: .5rem .75rem; font-size: .78rem;
}

/* Bars */
.bars-wrap { display: flex; flex-direction: column; gap: .75rem; }
.bar-block { }
.bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .25rem;
}
.bar-name { font-size: .76rem; font-weight: 700; color: var(--bt-text); }
.bar-sub { font-size: .68rem; color: var(--color-text-muted); }
.bar {
  display: flex; width: 100%; height: 34px;
  border: 1px solid var(--bt-border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--color-bg);
}
.seg {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; min-width: 0;
  border-right: 1px solid rgba(255,255,255,.35);
}
.seg:last-child { border-right: none; }
.seg-cut { color: var(--bt-dark); }
.seg-txt {
  font-size: .65rem; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; padding: 0 2px;
}
.seg-kerf { background: #3a2800; min-width: 2px; }
.seg-offcut {
  background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 5px, #e2e2e2 5px, #e2e2e2 10px);
  color: var(--color-text-muted);
}
.seg-offcut .seg-txt { font-weight: 600; font-style: italic; }

/* Sequence */
.seq-block { margin-bottom: .75rem; }
.seq-block:last-child { margin-bottom: 0; }
.seq-title { font-size: .78rem; font-weight: 700; color: var(--bt-text); margin: 0 0 .25rem; }
.seq-off { font-size: .68rem; font-weight: 600; color: var(--color-text-muted); }
.seq-list { margin: 0; padding-left: 1.2rem; }
.seq-list li { font-size: .77rem; color: var(--color-text-secondary); margin-bottom: .1rem; }
.seq-lab { color: var(--bt-text); font-weight: 600; }

.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(--bt-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(--bt-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%; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}