/* ── TOKENS ── */
:root {
  --bg:        #faf9f7;
  --surface:   #ffffff;
  --surface2:  #f3f1ee;
  --border:    #e5e3de;
  --border2:   #ccc9c0;
  --text:      #0f0f0d;
  --muted:     #9b9890;
  --muted2:    #6e6c66;
  --accent:    #0058be;
  --accent-fg: #ffffff;
  --danger:    #c94040;
  --ok:        #2a9d5c;
  --ghost-hover: #eeede9;
  --shadow:    none;
  --grain-a:   #e8dfc8;
  --grain-b:   #ddd4ba;
  --grain-c:   #d4c9ac;
  --waste-fill:   rgba(0,0,0,0.025);
  --waste-stroke: #d4cfc5;
  --cote-c:    #c0bdb5;
  --cote-fill: rgba(250,249,247,0.94);
  --cote-text: #8a8780;
  --ext-dim:   #d8d4cc;
  --board-border: #d4cfc5;
  --kerf-fill: rgba(0,0,0,0.07);
  --cut-line:  rgba(0,0,0,0.55);
}
[data-theme="dark"] {
  --bg:        #0f0f10;
  --surface:   #171718;
  --surface2:  #1e1e20;
  --border:    #2c2c30;
  --border2:   #3e3e44;
  --text:      #efefed;
  --muted:     #55555c;
  --muted2:    #88888f;
  --accent:    #e8ff47;
  --accent-fg: #0f0f10;
  --danger:    #ff5c5c;
  --ok:        #47ffb8;
  --ghost-hover: #26262a;
  --shadow:    none;
  --grain-a:   #221d14;
  --grain-b:   #2a2318;
  --grain-c:   #1e1a10;
  --waste-fill:   rgba(255,255,255,0.03);
  --waste-stroke: #3e3e44;
  --cote-c:    #55555c;
  --cote-fill: rgba(23,23,24,0.92);
  --cote-text: #88888f;
  --ext-dim:   #2c2c30;
  --board-border: #3a3a44;
  --kerf-fill: rgba(0,0,0,0.35);
  --cut-line:  rgba(255,255,255,0.55);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg); color:var(--text);
  font-size:13.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background .2s,color .2s;
}
.mi{font-family:'Material Icons Outlined';font-style:normal;font-size:18px;line-height:1;vertical-align:middle;user-select:none;flex-shrink:0;}
.mi.sm{font-size:16px;}
.mi.xs{font-size:14px;}

/* ── TOPBAR ── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1.5rem;
  border-bottom:1px solid rgba(0,0,0,0.07);
  background:rgba(250,249,247,0.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  position:sticky;top:0;z-index:50;
  gap:.75rem;
}
[data-theme="dark"] .topbar{
  background:rgba(23,23,24,0.88);
  border-bottom-color:rgba(255,255,255,0.05);
}

/* Logo */
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;}
.logo-img{height:26px;width:auto;display:block;}
[data-theme="dark"] .logo-img{filter:invert(1);}
.logo-sup{font-size:.58rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;}
.topbar-right{display:flex;align-items:center;gap:.45rem;}

.seg{display:flex;background:var(--surface2);border:1px solid var(--border);padding:2px;gap:2px;}
.seg-btn{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:.6rem;letter-spacing:.05em;
  padding:.28rem .6rem;border:none;
  background:transparent;color:var(--muted2);cursor:pointer;
  transition:all .15s;white-space:nowrap;touch-action:manipulation;
  display:flex;align-items:center;gap:4px;
}
.seg-btn .mi{font-size:14px;}
.seg-btn.on{background:var(--surface);color:var(--text);border:1px solid var(--border);}

.icon-btn{
  width:32px;height:32px;
  border:1px solid var(--border);background:var(--surface2);
  color:var(--muted2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;touch-action:manipulation;flex-shrink:0;
}
.icon-btn:hover{color:var(--text);border-color:var(--border2);}
.icon-btn .mi{font-size:18px;}

/* ── HERO ── */
.hero{
  max-width:760px;margin:0 auto;
  padding:4rem 1.5rem 3rem;
  text-align:center;
}
.hero-label{
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.25rem;
  font-family:'Space Grotesk',monospace;
}
.hero-title{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;
  letter-spacing:-.02em;color:var(--text);
  margin-bottom:1.25rem;
}
.hero-title span{font-style:normal;}
.hero-body{
  font-size:.82rem;color:var(--muted2);line-height:1.85;
  max-width:520px;margin:0 auto 2rem;
}
.hero-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:.72rem;font-weight:600;
  padding:.65rem 1.4rem;
  background:var(--accent);color:var(--accent-fg);border:none;
  cursor:pointer;transition:opacity .15s;letter-spacing:.04em;
  text-decoration:none;
}
.hero-cta:hover{opacity:.86;}

/* Features strip */
.features{
  display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem 2.5rem;
  padding:0 1.5rem 3.5rem;
  max-width:760px;margin:0 auto;
  border-bottom:1px solid var(--border);
}
.feat{display:flex;align-items:flex-start;gap:.6rem;max-width:200px;}
.feat .mi{color:var(--muted);margin-top:1px;}
.feat-text{}
.feat-title{font-size:.72rem;font-weight:500;color:var(--text);margin-bottom:.2rem;}
.feat-desc{font-size:.65rem;color:var(--muted);line-height:1.6;}

/* ── APP ── */
.app-section{
  max-width:1140px;margin:0 auto;
  padding:3rem 1.5rem;
  display:grid;grid-template-columns:280px 1fr;
  gap:1.25rem;align-items:start;
}
.app-label{
  font-family:'Space Grotesk',monospace;
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.8rem;
  display:flex;align-items:center;gap:.5rem;
}
.app-label::after{content:'';flex:1;height:1px;background:var(--border);}

/* Sidebar */
.sidebar{display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:72px;}
.panel{background:var(--surface);border:1px solid var(--border);padding:1.1rem;}

.f-label{
  font-family:'Space Grotesk',monospace;
  font-size:.58rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:.3rem;display:block;
}
.field{margin-bottom:.75rem;}
.field:last-child{margin-bottom:0;}
.input-2col{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;}
.f-sub{font-size:.58rem;color:var(--muted);margin-top:.2rem;}

input[type="number"]{
  width:100%;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.88rem;font-weight:500;
  padding:.46rem .2rem;
  background:transparent;
  border:none;
  border-bottom:1.5px solid var(--border);
  color:var(--text);outline:none;
  transition:border-color .15s;
  -moz-appearance:textfield;min-height:36px;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;}
input:focus{border-bottom-color:var(--accent);}
.kerf-row{display:flex;align-items:center;gap:.5rem;}
.kerf-row input{flex:0 0 72px;}
.kerf-row span{font-size:.62rem;color:var(--muted);}

/* Pieces table */
.p-head{display:grid;grid-template-columns:1fr 1fr auto auto;gap:.3rem;padding-bottom:.38rem;border-bottom:1px solid var(--border);margin-bottom:.4rem;}
.p-col{font-family:'Space Grotesk',monospace;font-size:.56rem;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;}
.p-col:first-child{padding-left:14px;}
.pieces-list{display:flex;flex-direction:column;gap:.28rem;max-height:230px;overflow-y:auto;margin-bottom:.55rem;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;}
.p-row{display:grid;grid-template-columns:1fr 1fr auto auto;gap:.3rem;align-items:center;animation:up .14s ease;}
@keyframes up{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
.p-dot-wrap{display:flex;align-items:center;gap:.3rem;}
.p-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.qty-wrap{display:flex;align-items:center;gap:2px;}
.qty-n{font-size:.78rem;min-width:16px;text-align:center;}

.ib{
  width:28px;height:28px;
  border:1px solid var(--border);background:transparent;color:var(--muted2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;transition:all .12s;touch-action:manipulation;
}
.ib .mi{font-size:15px;}
.ib:hover{border-color:var(--border2);color:var(--text);background:var(--ghost-hover);}
.ib.del:hover{color:var(--danger);border-color:var(--danger);background:transparent;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:.72rem;font-weight:500;letter-spacing:.04em;
  padding:.55rem 1rem;cursor:pointer;
  transition:all .15s;width:100%;min-height:38px;border:1px solid transparent;
  touch-action:manipulation;
}
.btn .mi{font-size:16px;}
.btn-ghost{background:transparent;color:var(--muted2);border-color:var(--border);margin-bottom:.38rem;}
.btn-ghost:hover{background:var(--ghost-hover);color:var(--text);border-color:var(--border2);}
.btn-primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:600;}
.btn-primary:hover{opacity:.86;}

.mode-hint{
  font-size:.62rem;color:var(--muted);line-height:1.7;
  padding:.55rem .7rem;background:var(--surface2);border:1px solid var(--border);
}
.mode-hint b{color:var(--muted2);font-weight:500;}

/* ── RESULTS ── */
.results{display:flex;flex-direction:column;gap:.9rem;}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:.6rem;align-items:stretch;}
.stat{background:var(--surface);border:1px solid var(--border);padding:.55rem .75rem;}
.stat-v{font-size:clamp(.95rem,2vw,1.3rem);font-weight:600;display:block;line-height:1;margin-bottom:.18rem;}
.stat-v.ok{color:var(--ok);}
.stat-v.bad{color:var(--danger);}
.stat-l{font-family:'Space Grotesk',monospace;font-size:.55rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;}
.stat-actions{background:var(--surface);border:1px solid var(--border);padding:.4rem .5rem;display:flex;flex-direction:column;gap:.25rem;justify-content:center;}

@media(max-width:680px){
  .stats-row{grid-template-columns:repeat(3,1fr);gap:.4rem;}
  .stat{padding:.5rem .6rem;}
  .stat-v{font-size:1.1rem;}
  .stat-actions{grid-column:1/-1;flex-direction:row;justify-content:stretch;gap:.4rem;padding:.5rem .6rem;}
  .stat-actions .tc-mini{flex:1;justify-content:center;padding:.5rem .4rem;font-size:.65rem;}
  .stat-actions .tc-mini .mi{font-size:15px;}
}

.board{background:var(--surface);border:1px solid var(--border);overflow:hidden;}
.board-head{display:flex;justify-content:space-between;align-items:center;padding:.58rem 1rem;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:.3rem;}
.board-title{font-family:'Space Grotesk',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.board-title b{color:var(--text);font-weight:500;}
.board-meta{font-size:.58rem;color:var(--muted);}
.board-svg{padding:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.board-foot{padding:.58rem 1rem;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:flex-start;}

/* Cut toggle */
.tc-toggle{
  display:inline-flex;align-items:center;gap:.3rem;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:.6rem;font-weight:500;
  padding:.25rem .55rem;
  border:1px solid var(--border);background:transparent;color:var(--muted2);
  cursor:pointer;transition:all .15s;touch-action:manipulation;
  letter-spacing:.02em;
}
.tc-toggle .mi{font-size:13px;}
.tc-toggle:hover{border-color:var(--border2);color:var(--text);background:var(--ghost-hover);}
.tc-toggle.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);}
.tc-mini{
  display:flex;align-items:center;gap:.28rem;width:100%;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:.56rem;font-weight:500;
  padding:.18rem .4rem;
  border:1px solid var(--border);background:transparent;color:var(--muted2);
  cursor:pointer;transition:all .15s;touch-action:manipulation;white-space:nowrap;
}
.tc-mini .mi{font-size:12px;}
.tc-mini:hover{border-color:var(--border2);color:var(--text);background:var(--ghost-hover);}
.tc-mini.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);}

.cut-order{width:100%;padding-top:.5rem;border-top:1px solid var(--border);margin-top:.3rem;}
.cut-order-head{font-family:'Space Grotesk',monospace;font-size:.57rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;}
.cut-steps{display:flex;flex-direction:column;gap:.22rem;}
.cut-step{display:flex;align-items:center;gap:.5rem;font-size:.62rem;padding:.28rem .5rem;background:var(--surface2);border:1px solid var(--border);}
.cut-num{width:17px;height:17px;background:var(--accent);color:var(--accent-fg);font-size:.55rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cut-dir{font-weight:600;color:var(--text);min-width:68px;}
.cut-pos{color:var(--muted2);}

.waste-sec{width:100%;padding-top:.45rem;border-top:1px solid var(--border);margin-top:.3rem;}
.waste-head{font-family:'Space Grotesk',monospace;font-size:.57rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.28rem;}
.waste-tags{display:flex;flex-wrap:wrap;gap:.25rem;}
.waste-chip{font-size:.6rem;color:var(--muted2);background:var(--surface2);border:1px solid var(--border);padding:.13rem .4rem;}

/* Piece tags */
.ptag{display:inline-flex;align-items:center;gap:.28rem;font-size:.6rem;color:var(--muted2);}
.ptag-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

.warn-bar{font-size:.68rem;color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent);border:1px solid color-mix(in srgb,var(--danger) 22%,transparent);padding:.52rem .8rem;}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:4rem 2rem;color:var(--muted);text-align:center;border:1px dashed var(--border);}
.empty-ico{font-size:1.8rem;opacity:.2;}
.empty p{font-size:.72rem;line-height:1.8;}

/* ── PRINT ── */
@media print {
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  body{background:#fff!important;color:#000!important;}
  .topbar,.hero,.features,.how,.footer,.fab,.sidebar,
  .tc-toggle,.stats-row,.warn-bar,.empty{display:none!important;}
  .app-section{display:block!important;padding:0!important;max-width:100%!important;}
  .results{display:block!important;}
  .board{border:1px solid #ccc!important;margin-bottom:1.5rem;page-break-inside:avoid;break-inside:avoid;}
  .board-head{border-bottom:1px solid #ccc!important;}
  .board-foot{border-top:1px solid #ccc!important;}
  .board-svg{display:block!important;overflow:visible!important;}
  .cut-steps{display:flex!important;flex-direction:column!important;margin-top:.35rem!important;}
  .cut-order{display:block!important;}
  .waste-sec{display:block!important;}
}

.how{border-top:1px solid var(--border);padding:4rem 1.5rem;}
.how-inner{max-width:760px;margin:0 auto;}
.how-title{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.02em;color:var(--text);margin-bottom:.75rem;}
.how-intro{font-size:.78rem;color:var(--muted2);line-height:1.85;margin-bottom:2.5rem;max-width:580px;}
.how-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;}
.how-step{}
.how-step-n{font-family:'Space Grotesk',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;}
.how-step-title{font-size:.8rem;font-weight:500;color:var(--text);margin-bottom:.35rem;}
.how-step-desc{font-size:.7rem;color:var(--muted2);line-height:1.75;}

/* ── FOOTER ── */
footer{border-top:1px solid var(--border);padding:2rem 1.5rem;text-align:center;}
.footer-inner{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;}
.footer-logo{font-family:'Fraunces',serif;font-style:italic;font-size:1.1rem;color:var(--muted);}
.footer-text{font-size:.62rem;color:var(--muted);letter-spacing:.04em;}

/* FAB */
.fab{display:none;position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:100;width:calc(100% - 1.5rem);max-width:360px;}

/* ── RESPONSIVE ── */
@media(max-width:680px){
  .app-section{grid-template-columns:1fr;}
  .sidebar{position:static;}
  .fab{display:block;}
  .d-only{display:none;}
  .topbar{padding:.72rem 1rem;}
  .hero{padding:2.5rem 1rem 2rem;}
  .features{gap:1rem 1.5rem;}
  .how{padding:2.5rem 1rem;}
}
@media(min-width:681px){.fab{display:none!important;}}