:root { color-scheme: light; --bg: #f7f8f4; --paper:#fff; --ink:#182720; --sub:#69766d; --muted:#929d96; --line:#e7ebe5; --green:#1b4737; --deep:#183729; --gold:#cc9e53; --light-green:#eef5ee; --warn:#9d6030; --warn-bg:#fff3e9; --shadow:0 14px 46px rgba(26,45,31,.04); }
* { box-sizing:border-box; }
html { font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; -webkit-font-smoothing:antialiased; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid rgba(54,135,92,.35); outline-offset:2px; }
.page-shell { width:min(1220px, calc(100% - 64px)); margin:auto; }
.topbar { height:96px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e6eae3; gap:12px; }
.brand { display:flex; align-items:center; gap:13px; }
.brand-logo { background:var(--deep); width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:#f2e4ca; }
.brand-logo svg { width:28px; }
.brand-name {font-size:18px; font-weight:770; letter-spacing:.03em;}
.brand-subtitle { font-size:9px; letter-spacing:2.3px; font-weight:700; color:#8d9c90; margin-top:5px; }
.topbar-side { font-size:12px; font-weight:650; color:#718078; display:flex; align-items:center; gap:10px; white-space:nowrap; }
.dot,.online-status span { display:inline-block; width:7px; height:7px; border-radius:50%; background:#62ac7b; box-shadow:0 0 0 4px #e9f4e9; }
.version {border-left:1px solid #d5ddd5; padding-left:14px; margin-left:6px; color:#a5aea8;}
.intro { padding:49px 0 29px; }
.eyebrow { color:#567e62; font-size:11px; letter-spacing:1.8px; font-weight:800; display:flex; align-items:center; gap:10px; }
.eyebrow span { width:24px; height:2px; background:#b8945c; }
h1 { font-size:clamp(30px,3vw,41px); line-height:1.3; letter-spacing:-1px; margin:16px 0 10px; font-weight:800; }
h1 em { font-style:normal; color:#588363; }
.intro p { font-size:13px; line-height:1.9; margin:0; color:#89968d; }
.workspace { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:20px; align-items:stretch; }
.panel { background:var(--paper); border:1px solid #eaeee8; border-radius:18px; box-shadow:var(--shadow); }
.input-panel,.quote-panel { padding:28px; min-width:0; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.step { color:#a1afa4; font-size:10px; font-weight:780; letter-spacing:1.75px; margin-bottom:8px; }
h2 { font-size:20px; font-weight:780; margin:0; letter-spacing:-.3px; }
.heading-icon { color:#9bae9e; font-size:22px; background:#f4f7f1; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; }
.dimension-fields {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:31px; }
.dimension-field {font-size:12px; color:#53675b; font-weight:750; display:block; min-width:0; }
.dimension-field > span { display:block; margin-bottom:10px; }
.input-unit { height:64px; border:1px solid #dce5da; border-radius:11px; display:flex; align-items:center; padding:0 13px 0 15px; background:#fcfdfa; transition:border-color .2s,box-shadow .2s; }
.input-unit:focus-within { border-color:#77a288; box-shadow:0 0 0 3px #eaf3eb; }
.input-unit input { min-width:0; width:100%; border:0; outline:0; background:transparent; font-size:27px; font-weight:790; color:#254734; font-variant-numeric:tabular-nums; }
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; appearance:textfield; }
.input-unit b { font-size:11px; color:#9aaba0; font-weight:600; padding-left:4px; }
.input-note { margin:14px 0 24px; color:#84928a; display:flex; align-items:flex-start; gap:7px; font-size:11px; line-height:1.8; }
.input-note svg,.logic-note svg { flex-shrink:0; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; margin-top:1px; }
.input-note strong { font-weight:700; color:#536f5e; }
.example-block { padding:21px 0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); }
.example-header { font-size:12px; font-weight:760; display:flex; justify-content:space-between; align-items:center; gap:6px; margin-bottom:14px; }
.example-header small {font-size:10px; color:#a0aca2; font-weight:500; }
.example-options {display:grid; grid-template-columns:1fr 1fr; gap:9px;}
.example {display:flex; flex-direction:column; gap:5px; align-items:flex-start; padding:10px 12px; border:1px solid #e4ebe2; border-radius:9px; background:#fafcf9; color:#3c6049; font-size:11px; font-weight:730; text-align:left; transition:background .15s,border-color .15s;}
.example span {font-size:11px; font-variant-numeric:tabular-nums; color:#89998d; font-weight:560;}
.example:hover {border-color:#b2c9b2; background:#f0f7ee;}
.settings {margin-top:19px;}
.settings summary {list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 0;}
.settings summary::-webkit-details-marker {display:none;}
.settings-summary-title {display:flex; align-items:center; gap:9px; font-weight:760; font-size:12px; color:#3d6049;}
.settings-summary-title svg {width:17px; height:17px; stroke:currentColor; stroke-width:1.8; fill:none;}
.summary-side {display:flex; align-items:center; gap:8px; font-size:10px; color:#9ba99e;}
.chevron {font-size:18px; transition:transform .18s;}
.settings[open] .chevron {transform:rotate(180deg);}
.settings-content {padding:14px 0 0;}
.settings-content>p {font-size:11px; color:#929c94; margin:0 0 14px;}
.setting-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
.setting-grid label {font-size:11px; font-weight:720; color:#536b5b;}
.setting-grid small {font-size:10px; color:#9baa9f; font-weight:500;}
.setting-grid input {display:block; margin-top:7px; width:100%; min-width:0; border:1px solid #dde5dc; border-radius:8px; padding:11px 12px; color:#254c36; outline:0;}
.setting-grid input:focus {border-color:#77a288;}
.text-btn {color:#52765b; background:transparent; border:0; padding:4px; font-size:11px; font-weight:700; white-space:nowrap;}
.text-btn:hover {text-decoration:underline;}
.settings .text-btn {margin:12px 0 0 -4px;}
.online-status {font-size:10px; font-weight:750; color:#548368; background:#edf6ef; padding:9px 12px; border-radius:30px; display:flex; align-items:center; gap:8px;}
.online-status span {width:5px; height:5px; box-shadow:none;}
.price-hero {background:linear-gradient(133deg,#204b38 0%,#173a2b 65%,#102e24 100%); margin:25px 0 21px; border-radius:15px; padding:25px 27px 22px; color:white; position:relative; overflow:hidden; isolation:isolate;}
.price-label {font-size:12px; color:#d2e0d1; font-weight:650; display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.tier-badge {font-size:10px; font-weight:650; color:#f4dbab; padding:5px 8px; border-radius:5px; border:1px solid rgba(235,207,145,.32); background:rgba(245,221,167,.09);}
.price-number {display:flex; align-items:baseline; gap:5px; margin:13px 0 3px; line-height:1.25; font-variant-numeric:tabular-nums;}
.price-number span {font-size:25px; color:#e9e7d2; font-weight:660;}
.price-number strong {font-size:clamp(40px,4.3vw,55px); font-weight:810; letter-spacing:-2.5px; overflow-wrap:anywhere;}
.price-formula {color:#bdd3c4; font-size:12px; font-variant-numeric:tabular-nums;}
.price-glow {width:195px; height:195px; border:1px solid rgba(255,255,255,.08); border-radius:35px; position:absolute; right:-39px; bottom:-102px; transform:rotate(38deg); z-index:-1; box-shadow:0 0 0 32px rgba(255,255,255,.018),0 0 0 65px rgba(255,255,255,.014);}
.judgement-heading {font-size:12px; font-weight:790; margin-bottom:10px;}
.cut-grid {display:grid; grid-template-columns:1fr 1fr; gap:11px;}
.cut-item {min-width:0; background:#f8faf7; border:1px solid #ebefea; border-radius:10px; padding:13px 12px; display:flex; align-items:center; gap:9px;}
.cut-item.is-cut {background:var(--warn-bg);border-color:#f6e6d6;}
.cut-icon {width:29px; height:29px; background:#e5f2e8; border-radius:9px; color:#3f8a57; flex:none; display:grid; place-items:center; font-size:13px; font-weight:900;}
.cut-item.is-cut .cut-icon {background:#f8e5ce;color:#ad7136;}
.cut-name {font-size:11px;font-weight:760;white-space:nowrap;}
.cut-state {font-size:10px; color:#68937b; margin-top:4px; white-space:nowrap;}
.cut-item.is-cut .cut-state {color:#bc7940;}
.cut-count {margin-left:auto; font-size:10px; white-space:nowrap; color:#a1ada3;}
.result-stats {display:grid; grid-template-columns:repeat(3,1fr); margin:23px 0; border-top:1px solid #eef0ed; border-bottom:1px solid #eef0ed;}
.result-stats>div {padding:17px 9px; min-width:0;}
.result-stats>div:first-child {padding-left:0;}
.result-stats>div:not(:last-child){border-right:1px solid #edf0eb;}
.result-stats span {display:block; font-size:10px; font-weight:600; color:#99a59d; margin-bottom:8px;}
.result-stats strong {font-size:18px; font-weight:820; font-variant-numeric:tabular-nums; white-space:nowrap;}
.result-stats small {font-size:10px; font-weight:650; color:#97a69a;}
.quote-actions {display:flex; gap:10px;}
.btn {height:45px; border-radius:9px; font-weight:760; font-size:12px; border:1px solid #d9e2da; background:white; display:inline-flex; justify-content:center; align-items:center; gap:8px;}
.btn svg {width:15px; height:15px; stroke:currentColor; stroke-width:1.7; fill:none;}
.primary-btn {flex:1.3; background:#244e3a; border-color:#244e3a; color:white;}
.primary-btn:hover {background:#173b29;}
.secondary-btn {flex:1; color:#31533e;}
.secondary-btn:hover,.icon-btn:hover {background:#f4f8f3;}
.icon-btn {width:45px; flex:none; color:#668570;}
.error-box {margin-top:27px; border-radius:9px; padding:15px; background:#fff3ed; color:#a34d27; font-size:13px; line-height:1.7;}
.details-panel,.history-panel {margin-top:20px;padding:27px 29px;}
.quiet-pill {font-size:10px; color:#7a9780; background:#f0f6ee; border-radius:25px; padding:8px 12px; white-space:nowrap;}
.actual-banner {display:flex; justify-content:space-between; align-items:center; gap:12px; padding:19px 22px; margin-top:24px; background:#f3f8f1; border-radius:11px;}
.actual-caption {font-size:10px; font-weight:730; color:#76947b;}
.actual-dimension {margin-top:7px; font-size:21px; font-weight:790; letter-spacing:.1px; color:#2c5c3a; font-variant-numeric:tabular-nums;}
.actual-dimension small {font-size:12px; color:#8aa692; font-weight:650;}
.actual-hint {font-size:11px; color:#7a9781; text-align:right; line-height:1.6; max-width:38%;}
.breakdown-scroll {overflow-x:auto; max-width:100%;}
.breakdown-table,.history-table {width:100%; border-collapse:collapse; margin-top:15px; font-size:12px; white-space:nowrap;}
.breakdown-table th,.history-table th {text-align:left; color:#98a59a; font-weight:700; font-size:10px; background:#fbfcfa; border-bottom:1px solid #edf0eb; padding:13px 11px;}
.breakdown-table td,.history-table td {border-bottom:1px solid #f0f2ef; padding:15px 11px; color:#4f6457; font-variant-numeric:tabular-nums;}
.breakdown-table td:first-child {font-weight:740; color:#2e4b38;}
.cut-yes {background:#fff0e3; color:#a76b35; border-radius:5px; font-size:10px; font-weight:770; padding:5px 7px;}
.cut-no {background:#edf6ee; color:#548664; border-radius:5px; font-size:10px; font-weight:770; padding:5px 7px;}
.detail-bottom {display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:23px 0;}
.formula-detail,.waste-detail {min-width:0; background:#fafbf8; border:1px solid #eef1e9; border-radius:11px; padding:19px;}
.subheading {color:#385b40; font-size:12px; font-weight:790; margin-bottom:11px;}
.detail-bottom p {font-size:12px; color:#405c47; font-weight:650; line-height:1.9; overflow-wrap:anywhere; margin:0 0 5px; font-variant-numeric:tabular-nums;}
.detail-bottom small {display:block; color:#9aa49c; font-size:10px; line-height:1.85;}
.logic-note {display:flex; gap:10px; align-items:flex-start; font-size:11px; line-height:1.8; color:#778c7b;}
.logic-note svg {width:17px; height:17px; margin-top:1px;}
.history-actions {display:flex; gap:15px; align-items:center;}
.danger-text {color:#b47c6a;}
.history-empty {margin-top:22px; border:1px dashed #dce5da; background:#fafcf9; border-radius:10px; text-align:center; padding:28px 12px; color:#a1aba2; font-size:12px;}
.history-table {margin-top:20px;}
.history-table td {font-size:11px;}
.history-table td strong {color:#29513b; font-size:13px;}
.history-action-btn {color:#4e805c; background:none; border:0; padding:3px 6px; font-size:11px; font-weight:750;}
.history-action-btn.remove {color:#b28d7d;}
footer {display:flex; justify-content:space-between; gap:20px; padding:34px 0 42px; color:#a2afa5; font-size:10px;}
.toast {position:fixed; bottom:25px; left:50%; transform:translate(-50%,15px); opacity:0; pointer-events:none; color:white; background:#224b36; padding:12px 18px; border-radius:9px; font-size:12px; box-shadow:0 9px 30px #14291d22; transition:opacity .2s, transform .2s; z-index:5;}
.toast.show {opacity:1; transform:translate(-50%,0);}
[hidden] {display:none !important;}
@media (max-width:900px) { .page-shell {width:min(720px,calc(100% - 36px));} .workspace {grid-template-columns:1fr;} .intro {padding-top:36px;} .price-number strong {font-size:56px;} }
@media (max-width:560px) { .page-shell {width:calc(100% - 24px);} .topbar {height:79px;} .brand-logo {width:40px;height:40px;border-radius:10px;} .brand-logo svg {width:23px;} .brand-name {font-size:15px;} .brand-subtitle {font-size:8px;letter-spacing:1.3px;} .topbar-side {font-size:0;gap:0;} .topbar-side .dot {width:7px;height:7px;} .version {font-size:10px;margin-left:11px;padding-left:10px;} .intro {padding:30px 4px 21px;} h1 {font-size:28px;} .intro p {font-size:12px;} .input-panel,.quote-panel,.details-panel,.history-panel {padding:21px 16px;border-radius:13px;} .panel-heading h2 {font-size:17px;} .dimension-fields {gap:8px;margin-top:26px;} .input-unit {height:56px;padding:0 8px 0 10px;} .input-unit input {font-size:23px;} .input-unit b {font-size:9px;} .example-options {grid-template-columns:1fr 1fr; gap:8px;} .example {padding:10px 9px;} .example span {font-size:10px;} .price-hero {padding:22px 20px;} .price-number strong {font-size:47px;} .cut-grid {gap:8px;} .cut-item {padding:10px 8px;gap:6px;} .cut-icon {width:24px;height:24px;} .cut-count {font-size:9px;} .cut-name {font-size:10px;} .cut-state {font-size:9px;} .result-stats strong {font-size:16px;} .quiet-pill {display:none;} .actual-banner {display:block;padding:15px 14px;} .actual-dimension {font-size:18px;} .actual-hint {max-width:none;text-align:left;margin-top:8px;} .detail-bottom {grid-template-columns:1fr;gap:12px;} .history-panel .panel-heading {align-items:flex-start;} .history-actions {gap:8px;} footer {display:block;line-height:2;} footer span {display:block;} }
@media print { body {background:white;} .page-shell {width:100%;} .topbar {height:60px;} .topbar-side,.intro,.input-panel,.quote-actions,.history-panel,footer,.settings,.example-block,.toast {display:none !important;} .workspace {display:block;} .quote-panel,.details-panel {box-shadow:none;break-inside:avoid;margin-top:14px;} .quote-panel {padding:15px 20px;} .price-hero {-webkit-print-color-adjust:exact;print-color-adjust:exact;} .details-panel {margin-top:14px;} .detail-bottom {grid-template-columns:1fr 1fr;} }