@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500&display=swap');

:root { --pro-olive:#5b6253; --pro-olive-dark:#464c40; --pro-paper:#f4f1eb; --pro-ink:#171816; --pro-line:rgba(255,255,255,.24); }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
.professional-page { min-height:100vh; margin:0; background:var(--pro-olive); color:#fff; font-family:"DM Sans",Arial,sans-serif; }
.professional-header { position:relative; z-index:3; display:flex; min-height:90px; align-items:center; justify-content:space-between; padding:18px clamp(20px,4vw,68px); border-bottom:1px solid var(--pro-line); background:var(--pro-olive); }
.professional-header img { width:138px; height:auto; }
.professional-header__right { display:flex; align-items:center; gap:24px; }
.professional-header span { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.professional-header form { margin:0; }
.link-button { padding:0 0 4px; border:0; border-bottom:1px solid currentColor; background:none; color:inherit; cursor:pointer; font:600 .68rem "DM Sans"; letter-spacing:.08em; text-transform:uppercase; }
.professional-shell { max-width:1540px; margin:0 auto; padding:clamp(28px,3vw,44px) clamp(18px,4vw,64px) 80px; }
.professional-welcome { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); align-items:end; gap:30px; margin-bottom:30px; }
.professional-welcome h1,.pro-section h2,.professional-login h1 { margin:.15em 0 0; color:inherit; font-family:"Manrope",Arial,sans-serif; font-weight:400; letter-spacing:-.05em; line-height:.98; }
.professional-welcome h1 { font-size:clamp(2.8rem,4.2vw,4.7rem); }
.professional-welcome > p:last-child { max-width:480px; margin:0 0 8px; color:rgba(255,255,255,.76); font-size:clamp(1rem,1.4vw,1.25rem); }
.pro-eyebrow { margin:0 0 14px; font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.professional-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,420px); align-items:start; gap:clamp(35px,5vw,80px); }
.professional-form { min-width:0; }
.pro-section { padding:clamp(28px,4vw,52px) 0; border-top:1px solid var(--pro-line); }
.pro-section h2 { margin-bottom:28px; font-size:clamp(2.1rem,4vw,4rem); }
.mode-section { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 28px; align-items:center; padding-top:0; border:0; }
.mode-section h2 { margin-bottom:0; }
.field-help { grid-column:1/-1; margin:0; color:rgba(255,255,255,.64); }
.pro-product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.product-start { padding-top:26px; }
.pro-product-card { position:relative; display:block; min-height:215px; padding:24px; border:1px solid var(--pro-line); cursor:pointer; transition:.18s ease; }
.pro-product-card input { position:absolute; opacity:0; pointer-events:none; }
.pro-product-card:hover,.pro-product-card:has(input:checked) { background:var(--pro-paper); color:var(--pro-ink); transform:translateY(-3px); }
.pro-product-icon { display:block; width:78px; margin-bottom:34px; }
.pro-product-icon svg { width:100%; fill:none; stroke:currentColor; stroke-width:1.5; }
.pro-product-card strong { display:block; font:400 clamp(1.5rem,2.4vw,2.1rem) "Manrope"; letter-spacing:-.04em; }
.pro-product-card small { display:block; max-width:230px; margin-top:8px; color:inherit; opacity:.7; }
.pro-product-card > b { position:absolute; right:24px; bottom:22px; font-size:1.25rem; }
.pro-toggle { display:flex; align-items:center; gap:12px; cursor:pointer; }
.pro-toggle input { position:absolute; opacity:0; }
.pro-toggle > span { position:relative; display:block; width:54px; height:30px; border:1px solid rgba(255,255,255,.55); border-radius:30px; }
.pro-toggle > span::after { position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%; background:#fff; content:""; transition:.18s ease; }
.pro-toggle input:checked + span { background:var(--pro-paper); }
.pro-toggle input:checked + span::after { transform:translateX(24px); background:var(--pro-olive-dark); }
.pro-toggle b { max-width:180px; font-size:.8rem; font-weight:600; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; }
.dimension-guide { display:grid; grid-template-columns:minmax(210px,360px) 1fr; align-items:center; gap:28px; margin:0 0 28px; padding:18px; border:1px solid var(--pro-line); }
.dimension-guide svg { width:100%; max-height:130px; fill:none; stroke:#fff; stroke-width:1.4; }
.dimension-guide text { fill:#fff; stroke:none; font:600 11px "DM Sans"; letter-spacing:.06em; }
.dimension-guide p { margin:0; color:rgba(255,255,255,.72); font-size:.88rem; }
.outline-button,.pro-button { border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer; font:600 .7rem "DM Sans"; letter-spacing:.09em; text-transform:uppercase; }
.outline-button { padding:12px 16px; }
.pro-button { width:100%; padding:17px 22px; background:var(--pro-paper); color:var(--pro-ink); }
.piece-list { display:grid; gap:16px; }
.piece-row { padding:22px; background:rgba(0,0,0,.09); border:1px solid var(--pro-line); }
.piece-row__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.piece-row__head strong { font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; }
.remove-piece { padding:0; border:0; border-bottom:1px solid currentColor; background:none; color:rgba(255,255,255,.75); cursor:pointer; font:inherit; font-size:.74rem; }
.piece-grid,.standard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.piece-grid label,.standard-grid label,.option-fields label { display:grid; gap:7px; color:rgba(255,255,255,.72); font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; }
.professional-page input,.professional-page select { width:100%; min-height:48px; padding:11px 12px; border:1px solid rgba(255,255,255,.3); border-radius:0; outline:none; background:rgba(255,255,255,.08); color:#fff; font:500 1rem "DM Sans"; }
.professional-page select { appearance:none; -webkit-appearance:none; background:var(--pro-paper); color:var(--pro-ink); font-family:"DM Sans",Arial,sans-serif; }
.professional-page select option { color:var(--pro-ink); font-family:"DM Sans",Arial,sans-serif; }
.professional-page input[type="number"] { appearance:textfield; -moz-appearance:textfield; }
.professional-page input[type="number"]::-webkit-inner-spin-button,.professional-page input[type="number"]::-webkit-outer-spin-button { margin:0; -webkit-appearance:none; }
.professional-page input:focus,.professional-page select:focus { border-color:#fff; }
.unit-input { position:relative; display:block; }
.unit-input input { padding-right:92px; }
.unit-input i { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.64); font-size:.72rem; font-style:normal; text-transform:none; }
.piece-result { display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:18px; padding-top:16px; border-top:1px solid var(--pro-line); color:rgba(255,255,255,.66); font-size:.78rem; }
.piece-result b { margin-left:6px; color:#fff; }
.custom-color-grid { margin-top:18px; }
.option-stack { display:grid; gap:12px; }
.surface-option { padding:18px; border:1px solid var(--pro-line); }
.check-title { display:flex; gap:12px; align-items:center; cursor:pointer; font-weight:500; }
.check-title input,.inline-check input { flex:0 0 auto; width:20px; min-height:20px; accent-color:var(--pro-paper); }
.option-fields { display:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; padding-top:18px; border-top:1px solid var(--pro-line); }
.surface-option.is-open .option-fields { display:grid; }
.inline-check { display:flex!important; flex-direction:row!important; align-items:center; align-self:center; gap:10px!important; min-height:48px; }
.professional-summary { position:sticky; top:22px; padding:30px; background:var(--pro-paper); color:var(--pro-ink); box-shadow:0 18px 50px rgba(24,28,22,.17); }
.summary-top { display:flex; justify-content:space-between; gap:12px; padding-bottom:20px; border-bottom:1px solid rgba(23,24,22,.17); }
.summary-top span { color:#666; font-size:.7rem; }
.summary-lines { display:grid; gap:10px; max-height:330px; overflow:auto; padding:22px 0; }
.summary-line { display:grid; grid-template-columns:1fr auto; gap:12px; font-size:.8rem; }
.summary-line span { color:#555; }
.summary-empty { color:#777; font-size:.85rem; }
.totals-list { margin:0; padding:18px 0; border-top:1px solid rgba(23,24,22,.17); border-bottom:1px solid rgba(23,24,22,.17); }
.totals-list div { display:flex; justify-content:space-between; gap:18px; margin:9px 0; }
.totals-list dt,.totals-list dd { margin:0; font-size:.86rem; }
.grand-total { padding:24px 0; }
.grand-total span,.management-card span { display:block; font-size:.73rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.grand-total strong,.management-card strong { display:block; margin:8px 0; font:400 clamp(2.7rem,4vw,4rem) "Manrope"; letter-spacing:-.06em; line-height:1; }
.grand-total small,.management-card small { display:block; color:#666; }
.management-card { padding:20px; background:var(--pro-olive); color:#fff; }
.management-card small { color:rgba(255,255,255,.72); }
.management-card strong { font-size:2.5rem; }
.pending-notice { margin-top:16px; padding:13px; border:1px solid #ae7b25; color:#735015; font-size:.8rem; }
.summary-actions { display:grid; gap:9px; margin-top:18px; }
.send-status { min-height:1.2em; margin:12px 0 0; color:#5c6255; font-size:.78rem; line-height:1.45; }
.send-status.is-error { color:#8a2d23; }
.outline-button--light { color:var(--pro-ink); }
.pro-button--light { background:var(--pro-ink); color:#fff; }
.client-print-document { display:none; }
.professional-login-page { display:grid; min-height:100vh; grid-template-rows:auto 1fr; }
.professional-login { display:grid; place-items:center; padding:30px 20px 70px; }
.login-panel { width:min(100%,520px); padding:clamp(30px,5vw,58px); border:1px solid var(--pro-line); }
.professional-login h1 { margin-bottom:18px; font-size:clamp(3rem,6vw,5.4rem); }
.professional-login p:not(.pro-eyebrow):not(.form-error) { color:rgba(255,255,255,.72); }
.professional-login form { display:grid; gap:12px; margin:30px 0 18px; }
.professional-login label { font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }
.professional-login input { text-align:center; font-size:1.5rem; letter-spacing:.4em; }
.professional-login small { color:rgba(255,255,255,.6); }
.form-error { padding:12px; background:#f4ddd7; color:#702417; }

@media (max-width:980px) {
  .professional-layout { grid-template-columns:1fr; }
  .professional-summary { position:relative; top:auto; }
  .piece-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .professional-header { min-height:72px; padding:15px 18px; }
  .professional-header img { width:108px; }
  .professional-header__right > span { display:none; }
  .professional-shell { padding:26px 16px 60px; }
  .professional-welcome { display:block; margin-bottom:26px; }
  .professional-welcome h1 { margin-bottom:14px; font-size:2.9rem; }
  .pro-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .pro-product-card { min-height:205px; padding:15px; }
  .pro-product-icon { width:55px; margin-bottom:28px; }
  .pro-product-card strong { font-size:1.22rem; }
  .pro-product-card small { font-size:.7rem; }
  .pro-product-card > b { right:14px; bottom:13px; }
  .mode-section { display:block; }
  .pro-toggle { margin-top:22px; }
  .field-help { margin-top:14px; }
  .section-heading { display:block; }
  .section-heading .outline-button { width:100%; margin-bottom:20px; }
  .dimension-guide { grid-template-columns:1fr; }
  .piece-grid,.standard-grid,.option-fields { grid-template-columns:1fr; }
  .piece-row { padding:16px; }
  .piece-result { display:grid; gap:7px; }
  .professional-summary { margin:0 -16px -60px; padding:26px 20px calc(30px + env(safe-area-inset-bottom)); }
}

@media print {
  @page { size:A4; margin:15mm; }
  body.client-print { min-height:0; background:#fff!important; color:#171816!important; }
  body.client-print > *:not(.client-print-document) { display:none!important; }
  body.client-print .client-print-document { display:block!important; width:100%; max-width:none; margin:0; padding:0; overflow:visible; color:#171816; background:#fff; font-family:"DM Sans",Arial,sans-serif; }
  .client-print-document * { box-sizing:border-box; }
  .client-print__header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:18px; border-bottom:1px solid #c8c5bf; }
  .client-print__logo { display:block; width:145px; height:auto; }
  .client-print__meta { text-align:right; }
  .client-print__meta strong,.client-print__meta span { display:block; }
  .client-print__meta strong { font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
  .client-print__meta span { margin-top:6px; color:#666; font-size:9px; }
  .client-print__title { margin:28px 0 8px; font:400 30px/1.05 "Manrope",Arial,sans-serif; letter-spacing:-.04em; }
  .client-print__subtitle { margin:0 0 24px; color:#666; font-size:10px; }
  .client-print__customer { display:grid; grid-template-columns:1fr 1fr; gap:8px 22px; margin:0 0 24px; padding:15px; background:#f4f1eb; }
  .client-print__customer div { min-width:0; overflow-wrap:anywhere; font-size:10px; }
  .client-print__customer b { display:block; margin-bottom:3px; font-size:8px; letter-spacing:.08em; text-transform:uppercase; }
  .client-print__section-title { margin:22px 0 10px; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
  .client-print__line,.client-print__total-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; padding:7px 0; border-bottom:1px solid #ddd9d2; font-size:10px; page-break-inside:avoid; }
  .client-print__line span,.client-print__total-row span { min-width:0; overflow-wrap:anywhere; word-break:normal; }
  .client-print__line b,.client-print__total-row b { white-space:nowrap; }
  .client-print__totals { margin-top:18px; page-break-inside:avoid; }
  .client-print__grand { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-top:14px; padding:18px; background:#171816; color:#fff; page-break-inside:avoid; }
  .client-print__grand span { font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
  .client-print__grand strong { white-space:nowrap; font:400 26px "Manrope",Arial,sans-serif; }
  .client-print__notice { margin:18px 0 0; padding:14px; background:#f4f1eb; font-size:9px; line-height:1.55; page-break-inside:avoid; }
  .client-print__footer { margin-top:22px; padding-top:12px; border-top:1px solid #c8c5bf; color:#666; font-size:8px; line-height:1.5; }
}