:root{
  --bg: #F4EFE7;
  --paper: #FFFFFF;
  --paper-warm: #FBF7F0;
  --ink: #1C1B17;
  --ink-soft: #4A4640;
  --ink-muted: #8A8378;
  --rule: #E5DCCD;
  --rule-soft: #F0E9DC;
  --accent: #1F4747;
  --accent-2: #2E5C5C;
  --warn: #B85C2A;
  --positive: #5C7A3F;
  --highlight: #F7E8B4;
  --shadow-sm: 0 1px 2px rgba(28,27,23,0.04), 0 0 0 1px rgba(28,27,23,0.04);
  --shadow-md: 0 4px 16px rgba(28,27,23,0.06), 0 0 0 1px rgba(28,27,23,0.05);
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:'Manrope',-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  min-height:100vh;
  font-weight:400;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(31,71,71,0.025) 0%, transparent 35%),
    radial-gradient(circle at 88% 92%, rgba(184,92,42,0.02) 0%, transparent 40%);
}

.serif{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto}
.mono{font-family:'JetBrains Mono',Menlo,monospace;font-variant-numeric:tabular-nums}

/* === HEADER === */
header{
  border-bottom:1px solid var(--rule);
  background:var(--paper-warm);
  padding:0;
}
.header-inner{
  max-width:1280px;margin:0 auto;
  padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:baseline;gap:14px}
.brand-mark{
  font-family:'Fraunces',serif;font-weight:600;font-size:24px;letter-spacing:-0.01em;
  color:var(--ink);
}
.brand-mark .accent{color:var(--accent)}
.brand-divider{
  width:1px;height:22px;background:var(--rule);
}
.brand-sub{
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-muted);font-weight:500;
}
.header-meta{
  display:flex;gap:32px;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-muted);
}
.header-meta div span{color:var(--ink);font-weight:500;display:block;letter-spacing:0.04em;margin-top:2px}

/* === HERO === */
.hero{
  max-width:1280px;margin:0 auto;
  padding:40px 32px 24px;
}
.hero h1{
  font-family:'Fraunces',serif;font-weight:400;font-size:42px;line-height:1.05;letter-spacing:-0.02em;
  color:var(--ink);max-width:680px;
}
.hero h1 em{font-style:italic;font-weight:300;color:var(--accent)}
.hero p{
  margin-top:14px;font-size:15px;color:var(--ink-soft);max-width:640px;line-height:1.55;
}
.eyebrow{
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);
  font-weight:600;margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:24px;height:1px;background:var(--accent)}

/* === MAIN GRID === */
.workspace{
  max-width:1280px;margin:0 auto;padding:8px 32px 60px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:start;
}
@media(max-width:920px){
  .workspace{grid-template-columns:1fr}
  .hero h1{font-size:32px}
  .header-inner{flex-wrap:wrap}
  .header-meta{gap:18px;font-size:10px}
}

.panel{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:2px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.panel-header{
  padding:18px 24px;
  border-bottom:1px solid var(--rule);
  background:var(--paper-warm);
  display:flex;justify-content:space-between;align-items:center;
}
.panel-title{
  font-family:'Fraunces',serif;font-size:18px;font-weight:500;letter-spacing:-0.01em;
}
.panel-ref{
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-muted);letter-spacing:0.08em;
}
.panel-body{padding:28px 24px}

/* === FORM === */
.field{margin-bottom:22px;position:relative}
.field:last-child{margin-bottom:0}
.label{
  display:block;font-size:10px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:8px;
}
.label .req{color:var(--warn)}
.label .hint{color:var(--ink-muted);font-weight:400;letter-spacing:0.04em;text-transform:none;font-size:11px;margin-left:6px}

.input,.select{
  width:100%;
  padding:12px 14px;
  font-family:'JetBrains Mono',monospace;font-size:14px;
  background:var(--paper-warm);
  border:1px solid var(--rule);
  border-radius:2px;
  color:var(--ink);
  outline:none;
  transition:border-color .15s, background .15s;
}
.input:focus,.select:focus{
  border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(31,71,71,0.08);
}
.input::placeholder{color:var(--ink-muted);font-weight:400}
.select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231C1B17' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.select:disabled{opacity:.45;cursor:not-allowed;background:var(--rule-soft)}
.input:disabled{opacity:.45;cursor:not-allowed}

/* Autocomplete dropdown */
.autocomplete{position:absolute;top:100%;left:0;right:0;
  background:var(--paper);border:1px solid var(--rule);border-top:none;
  max-height:280px;overflow-y:auto;z-index:50;
  box-shadow:var(--shadow-md);display:none;
}
.autocomplete.visible{display:block}
.ac-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--rule-soft);
  display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.active{background:var(--paper-warm)}
.ac-code{font-family:'JetBrains Mono',monospace;font-weight:500;color:var(--accent);font-size:13px;flex-shrink:0}
.ac-name{color:var(--ink);font-size:13px;flex:1}
.ac-cat{font-size:10px;color:var(--ink-muted);letter-spacing:0.06em;text-transform:uppercase;flex-shrink:0}

/* Design info chip */
.design-found{
  margin-top:10px;padding:12px 14px;
  background:linear-gradient(to right,var(--paper-warm),transparent);
  border-left:2px solid var(--accent);
  font-size:13px;display:none;
}
.design-found.visible{display:block;animation:fadeIn .3s ease}
.design-found .name{font-weight:600;font-family:'Fraunces',serif;font-size:16px;color:var(--ink);margin-bottom:3px}
.design-found .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.tag{font-size:10px;padding:2px 8px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;}
.tag.special{background:var(--highlight);border-color:#E2C77A;color:#6B4F0C}

/* Radio pills for product type */
.pill-group{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pill{
  padding:14px 12px;border:1px solid var(--rule);border-radius:2px;cursor:pointer;
  background:var(--paper-warm);text-align:center;transition:all .15s;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.pill:hover:not(.disabled){border-color:var(--accent);background:var(--paper)}
.pill.selected{border-color:var(--accent);background:var(--paper);box-shadow:inset 0 0 0 1px var(--accent)}
.pill.disabled{opacity:.35;cursor:not-allowed}
.pill .pill-name{font-family:'Fraunces',serif;font-size:15px;font-weight:500;color:var(--ink)}
.pill .pill-sub{font-size:10px;color:var(--ink-muted);letter-spacing:0.08em;text-transform:uppercase}

/* === RESULT PANEL === */
.result-empty{
  padding:60px 24px;text-align:center;color:var(--ink-muted);
}
.result-empty .icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--rule);
  margin-bottom:16px;
}
.result-empty .ttl{font-family:'Fraunces',serif;font-size:20px;color:var(--ink);margin-bottom:6px}
.result-empty .desc{font-size:13px;max-width:280px;margin:0 auto;line-height:1.5}

.result-card{padding:0}
.result-summary{
  padding:32px 32px 24px;background:var(--paper-warm);border-bottom:1px solid var(--rule);
}
.result-design{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.06em;
  color:var(--ink-muted);margin-bottom:8px;
}
.result-name{
  font-family:'Fraunces',serif;font-size:28px;font-weight:500;line-height:1.15;letter-spacing:-0.01em;
  color:var(--ink);margin-bottom:10px;
}
.result-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}

.price-display{display:flex;align-items:baseline;gap:14px;margin-top:6px}
.price-currency{font-size:18px;color:var(--ink-muted);font-weight:500;font-family:'JetBrains Mono',monospace}
.price-main{
  font-family:'Fraunces',serif;font-weight:300;font-size:64px;line-height:1;letter-spacing:-0.04em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.price-unit{font-size:13px;color:var(--ink-soft);font-weight:500;letter-spacing:0.04em}

/* Breakdown table */
.breakdown{padding:24px 32px 0}
.breakdown-title{
  font-size:10px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.breakdown-title::before{content:'';width:14px;height:1px;background:var(--ink-muted)}
.breakdown-table{width:100%;border-collapse:collapse}
.breakdown-table td{padding:11px 0;border-bottom:1px dashed var(--rule);font-size:13px}
.breakdown-table tr:last-child td{border-bottom:none}
.breakdown-table .label-col{color:var(--ink-soft);width:auto}
.breakdown-table .val-col{text-align:right;font-family:'JetBrains Mono',monospace;color:var(--ink);font-weight:500}
.breakdown-table .total-row td{
  font-weight:600;border-bottom:none;border-top:2px solid var(--ink);padding-top:14px;font-size:14px;
}
.breakdown-table .total-row .label-col{color:var(--ink)}

/* Validity strip */
.validity{
  margin:20px 32px 32px;padding:14px 16px;
  background:#FAF5E8;border-left:3px solid #C9A45A;
  font-size:12px;color:#5A4520;line-height:1.5;
}
.validity strong{color:#3D2C0E;font-weight:600}

/* Action buttons */
.actions{display:flex;gap:10px;padding:0 32px 28px}
.btn{
  padding:11px 20px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;
  border-radius:2px;cursor:pointer;border:1px solid;font-family:'Manrope',sans-serif;transition:all .15s;
}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-secondary:hover{border-color:var(--ink);background:var(--paper-warm)}

/* === FOOTER === */
footer{
  border-top:1px solid var(--rule);padding:32px 0;margin-top:40px;background:var(--paper-warm);
}
.footer-inner{
  max-width:1280px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;font-size:12px;color:var(--ink-soft);
}
.footer-inner h4{
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink);font-weight:600;
  margin-bottom:10px;
}
.footer-inner p{line-height:1.55}
.footer-inner ul{list-style:none}
.footer-inner li{margin-bottom:5px;font-family:'JetBrains Mono',monospace;font-size:11px}
.footer-bottom{
  max-width:1280px;margin:24px auto 0;padding:18px 32px 0;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--ink-muted);
  letter-spacing:0.08em;text-transform:uppercase;
}
@media(max-width:760px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:24px}
}

/* Notes / warnings inside form */
.note{
  margin-top:8px;font-size:11px;color:var(--ink-muted);line-height:1.5;font-style:italic;
}
.note.warn{color:var(--warn)}

@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Print styles */
@media print{
  body{background:#fff}
  header,.hero,footer,.actions,.input-panel{display:none}
  .workspace{display:block;padding:0;max-width:none}
  .panel{border:none;box-shadow:none}
}

/* Selected pricing context strip */
.context-strip{
  display:flex;flex-wrap:wrap;gap:14px;padding:14px 32px;
  background:var(--paper);border-bottom:1px solid var(--rule);font-size:11px;
}
.ctx-item{display:flex;flex-direction:column;gap:2px}
.ctx-item .k{font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-muted);font-weight:600}
.ctx-item .v{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink);font-weight:500}

/* Loading dots */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--rule);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}