:root{
  --bg:#f4f6f8;
  --card:#fff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e1e5ea;
  --soft:#f8fafc;
  --accent:#111827;
  --blue:#2563eb;
  --green:#047857;
  --red:#b42318;
  --shadow:0 15px 40px rgba(15,23,42,.065);
}
*{box-sizing:border-box}
html{color-scheme:light}
body{
  margin:0;
  min-width:320px;
  background:
    radial-gradient(circle at 90% 0,rgba(37,99,235,.06),transparent 28rem),
    var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;
}
button,input,select{font:inherit}
button{cursor:pointer}
.site-shell{width:min(1200px,calc(100% - 32px));margin:0 auto;padding:40px 0 30px}
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:26px}
.hero-copy{max-width:750px}
.eyebrow{display:block;color:var(--blue);font-size:.72rem;font-weight:850;letter-spacing:.14em;margin-bottom:8px}
h1{margin:0;font-size:clamp(2rem,5vw,3.35rem);line-height:1.03;letter-spacing:-.045em}
.hero p{margin:13px 0 0;color:var(--muted);font-size:1rem}
.printer-badge{flex:0 0 300px;background:#0f172a;color:#fff;border-radius:18px;padding:16px 18px}
.printer-badge span,.printer-badge small{display:block;color:#94a3b8;font-size:.76rem}
.printer-badge strong{display:block;margin:3px 0;font-size:.98rem}
.layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,.72fr);gap:20px;align-items:start}
.form-column,.results-column{display:grid;gap:18px}
.results-column{position:sticky;top:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.section-heading{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}
.section-heading h2{margin:0;font-size:1.08rem;letter-spacing:-.015em}
.section-heading p{margin:3px 0 0;color:var(--muted);font-size:.88rem}
.step{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:10px;background:#eef2ff;color:#3730a3;font-weight:800;font-size:.82rem}
.filament-title .add-filament{margin-left:auto}
.fields-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.field{min-width:0}
.field-wide{grid-column:span 2}
.field>span,.mobile-label>span{display:block;margin-bottom:6px;color:#4b5563;font-size:.8rem;font-weight:700}
.field select,.field input,.mobile-label>input{width:100%;height:45px;border:1px solid #d1d5db;border-radius:11px;background:#fff;color:var(--text);padding:0 12px;outline:none}
.field select:focus,.field input:focus,.mobile-label>input:focus,.input-group:focus-within{border-color:#93a4bd;box-shadow:0 0 0 3px rgba(37,99,235,.09)}
.input-group{display:flex;min-width:0;border:1px solid #d1d5db;border-radius:11px;background:#fff;overflow:hidden}
.input-group input{min-width:0;width:100%;height:43px;border:0!important;border-radius:0!important;box-shadow:none!important;outline:none;padding:0 12px}
.input-group span{display:flex;align-items:center;flex:0 0 auto;border-left:1px solid var(--border);background:var(--soft);padding:0 11px;color:var(--muted);font-size:.78rem}
.input-group.compact input{height:41px}
.button{min-height:44px;border-radius:11px;border:1px solid transparent;padding:0 16px;font-weight:750}
.button.small{min-height:38px;padding:0 12px;font-size:.83rem}
.button.primary{background:var(--accent);color:#fff}
.button.secondary{background:#fff;color:var(--text);border-color:var(--border)}
.button:hover{filter:brightness(.98)}
.subcard{margin-top:18px;padding:16px;background:var(--soft);border:1px solid var(--border);border-radius:15px}
.hint-field p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.45}
.filament-head,.filament-row{display:grid;grid-template-columns:minmax(130px,1.3fr) minmax(100px,.8fr) minmax(120px,.9fr) minmax(120px,.9fr) 38px;gap:10px;align-items:center}
.filament-head{padding:0 3px 7px;color:var(--muted);font-size:.72rem;font-weight:800}
.filament-rows{display:grid;gap:9px}
.filament-row{padding:10px;background:var(--soft);border:1px solid var(--border);border-radius:14px}
.filament-row .mobile-label>span{display:none}
.filament-row .mobile-label>input{height:43px}
.remove-filament{width:38px;height:38px;border:0;border-radius:10px;background:#fff;color:var(--red);font-size:1.35rem;line-height:1;border:1px solid var(--border)}
.remove-filament:disabled{opacity:.35;cursor:not-allowed}
.form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.message{color:var(--green);font-size:.8rem}
.result-label{color:var(--muted);font-size:.8rem;font-weight:750}
.result-total{margin-top:3px;font-size:2.2rem;line-height:1.15;font-weight:850;letter-spacing:-.04em}
.mini-results{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:17px 0}
.mini-results>div{padding:12px;background:var(--soft);border-radius:12px}
.mini-results span{display:block;color:var(--muted);font-size:.7rem}
.mini-results strong{display:block;margin-top:2px;font-size:1rem}
.breakdown,.sales-lines{display:grid;gap:7px;border-top:1px solid var(--border);padding-top:15px}
.breakdown>div,.sales-lines>div{display:flex;justify-content:space-between;gap:12px;font-size:.82rem}
.breakdown span,.sales-lines span{color:var(--muted)}
.result-note{margin:5px 0 17px;color:var(--muted);font-size:.78rem}
.sales-result{border-color:#dbeafe}
.profit-line{border-top:1px solid var(--border);padding-top:10px;margin-top:4px}
.profit-line strong{color:var(--green)}
.material-big{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:5px}
.material-big strong{font-size:1.55rem}
.material-big span{color:var(--muted);font-size:.75rem}
.filament-breakdown{display:grid;gap:7px;margin-top:15px;padding-top:15px;border-top:1px solid var(--border)}
.filament-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;font-size:.77rem}
.filament-line span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filament-line span:nth-child(2){color:var(--muted)}
.info-box{padding:16px 18px;border-radius:16px;background:#eff6ff;border:1px solid #dbeafe}
.info-box strong{font-size:.85rem}
.info-box p{margin:4px 0 0;color:#475569;font-size:.78rem}
footer{padding:26px 4px 0;text-align:center;color:var(--muted);font-size:.75rem}
@media(max-width:900px){
  .hero{align-items:stretch;flex-direction:column}
  .printer-badge{flex:auto;width:100%}
  .layout{grid-template-columns:1fr}
  .results-column{position:static}
}
@media(max-width:680px){
  .site-shell{width:min(100% - 20px,1200px);padding-top:24px}
  .card{padding:17px;border-radius:17px}
  .fields-grid{grid-template-columns:1fr 1fr}
  .field-wide{grid-column:span 2}
  .filament-title{flex-wrap:wrap}
  .filament-title .add-filament{margin-left:44px}
  .desktop-only{display:none}
  .filament-row{grid-template-columns:1fr 1fr}
  .filament-row .mobile-label>span{display:block}
  .filament-row .mobile-label:first-child{grid-column:span 2}
  .filament-row .remove-filament{grid-column:2;justify-self:end}
}
@media(max-width:460px){
  .fields-grid{grid-template-columns:1fr}
  .field-wide{grid-column:auto}
  .filament-row{grid-template-columns:1fr}
  .filament-row .mobile-label:first-child{grid-column:auto}
  .filament-row .remove-filament{grid-column:auto;justify-self:end}
  .mini-results{grid-template-columns:1fr}
  .material-big{align-items:flex-start;flex-direction:column;gap:2px}
}