#final-quotation { border:0; padding:0; width:min(100%,448px); max-width:448px; height:100dvh; max-height:100dvh; margin:auto; color:var(--option-text); background:var(--option-surface); }
#final-quotation::backdrop { background:var(--option-surface); }
#final-quotation .quote-heading { padding:10px 24px 20px; flex-shrink:0; }
#final-quotation h2 { font-size:26px; font-weight:900; line-height:1.4; }
#final-quotation .option-header { padding:16px 24px 6px; }
#final-quotation .option-scroll { padding:0 24px 24px; scrollbar-gutter:stable; }
.quote-notice { position:relative; overflow:hidden; padding:14px 16px; border:1px solid var(--option-accent-border); border-radius:8px; background:var(--option-tint); color:var(--option-accent-text); font-size:15px; font-weight:900; line-height:1.6; }
.quote-notice::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,var(--option-surface) 50%,transparent 80%); opacity:0; transform:translateX(-100%); animation:quote-shine 3.5s ease-in-out infinite; pointer-events:none; }
@keyframes quote-shine { 15% { opacity:.6; } 65% { opacity:.6; transform:translateX(100%); } 100% { opacity:0; transform:translateX(100%); } }
@media(prefers-reduced-motion:reduce) { .quote-notice::after { animation:none; display:none; } }
.quote-section { padding:24px 0; border-bottom:1px solid var(--option-border); }
.quote-section:last-child { border-bottom:0; }
.quote-section h3 { font-size:17px; font-weight:900; margin-bottom:14px; line-height:1.5; }
.quote-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; }
.quote-row h3 { margin:0; }
.quote-label { flex:1; min-width:0; overflow-wrap:anywhere; font-size:15px; font-weight:800; line-height:1.6; }
.quote-muted { font-size:13px; font-weight:500; color:var(--option-muted); line-height:1.75; overflow-wrap:anywhere; }
.quote-detail { margin-top:6px; font-size:14px; line-height:1.8; overflow-wrap:anywhere; color:var(--option-muted); }
.quote-service { padding:16px 0; border-bottom:1px dashed var(--option-border); }
.quote-service:first-of-type { padding-top:0; }
.quote-service:last-of-type { border-bottom:0; }
.quote-service-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.quote-stepper { display:flex; align-items:center; gap:0; flex-shrink:0; }
.quote-stepper button { width:40px; height:40px; border:1px solid var(--option-border); border-radius:8px; background:var(--option-soft); color:var(--option-accent-text); font-size:22px; font-weight:700; }
.quote-stepper button:disabled { opacity:.35; }
.quote-stepper output { width:36px; text-align:center; font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
.quote-pairs { padding-top:0; }
.quote-pair-value { font-size:32px; line-height:1.4; color:var(--option-accent-text); margin-top:4px; font-variant-numeric:tabular-nums; }
.quote-pair-value span { margin-left:6px; font-size:15px; font-weight:600; color:var(--option-muted); }
.quote-work-count { display:flex; justify-content:space-between; align-items:center; padding:10px 0; margin:2px 0 8px; border-top:1px dashed var(--option-border); font-size:14px; color:var(--option-muted); }
.quote-work-count strong { color:var(--option-text); font-size:15px; }
.quote-add { display:flex; gap:8px; margin-top:12px; }
.quote-add select { flex:1; min-width:0; min-height:44px; border:1px solid var(--option-border); border-radius:8px; background:var(--option-surface); color:var(--option-text); padding:10px; font-size:14px; font-weight:600; }
.quote-add button, .quote-edit { border:1px solid var(--option-border); border-radius:8px; padding:8px 12px; background:var(--option-soft); color:var(--option-accent-text); font-size:13px; font-weight:800; }
.quote-add button { width:44px; flex-shrink:0; font-size:22px; }
.quote-edit { min-height:40px; }
.quote-money { min-width:0; font-size:16px; font-weight:800; text-align:right; line-height:1.5; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.quote-footer { flex-shrink:0; border-top:1px solid var(--option-accent-border); background:var(--option-surface); }
.quote-total { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 12px; padding:16px 24px 0; color:var(--option-text); font-size:14px; font-weight:700; }
.quote-total strong { font-size:24px; font-weight:900; line-height:1.4; color:var(--option-accent-text); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#final-quotation .option-footer { border:0; padding:12px 24px max(16px,env(safe-area-inset-bottom)); grid-template-columns:1fr 2fr; gap:10px; }
#final-quotation .option-footer button { border-radius:8px; font-size:15px; line-height:1.5; }
.quote-check { display:flex; align-items:center; gap:12px; font-size:15px; font-weight:700; padding:14px 0; line-height:1.5; }
.quote-check input { accent-color:var(--option-accent); width:18px; height:18px; }
.quote-coupon-notice { padding:12px 0; }
.quote-stepper button:focus-visible, .quote-add button:focus-visible, .quote-edit:focus-visible { outline:2px solid var(--option-accent); outline-offset:3px; }
@media(max-width:360px) {
    #final-quotation .option-scroll { padding-left:18px; padding-right:18px; }
    .quote-service-controls { flex-wrap:wrap; }
    .quote-service-controls .quote-money { margin-left:auto; }
    .quote-total strong { font-size:22px; }
}
body:has(#final-quotation[open]) #bottom-bar, body:has(#final-quotation[open]) #home-bottom-nav { visibility:hidden; pointer-events:none; }