:root { --ink: #18262a; --muted: #748084; --paper: #f8f6f1; --line: #d8ddd9; --accent: #e8643d; --deep: #183d3e; --cream: #eee9de; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #e9e7e1; font-family: Manrope, "Noto Sans SC", sans-serif; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .18; background-image: radial-gradient(#132a2a 0.45px, transparent .45px); background-size: 5px 5px; z-index: -1; }
.site-header { height: 76px; padding: 0 clamp(24px, 6vw, 96px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(24,38,42,.14); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 800; letter-spacing: -.5px; }.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; color: var(--paper); background: var(--accent); border-radius: 8px; font-family: "Noto Serif SC", serif; }.header-meta { color: var(--muted); font: 12px "DM Mono", monospace; }.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 100%; margin-right: 7px; background: #62a17e; }
main { max-width: 1400px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 72px) 72px; }.hero { min-height: 265px; display: flex; align-items: end; justify-content: space-between; padding: 53px 0 42px; border-bottom: 1px solid rgba(24,38,42,.14); }.eyebrow { margin: 0 0 14px; color: var(--accent); font: 500 11px "DM Mono", monospace; letter-spacing: 1.6px; }.hero h1 { margin: 0; font-size: clamp(36px, 5vw, 63px); line-height: 1.04; letter-spacing: -3px; }.hero h1 em { color: var(--accent); font-family: "Noto Serif SC", serif; font-style: normal; }.hero-copy { max-width: 510px; margin: 17px 0 0; color: #596467; line-height: 1.8; font-size: 14px; }.hero-stat { display: flex; min-width: 180px; flex-direction: column; align-items: end; padding-bottom: 6px; }.hero-stat strong { color: var(--deep); font: 500 45px "DM Mono", monospace; letter-spacing: -3px; }.hero-stat span { color: var(--muted); font-size: 11px; }
.workspace { display: grid; grid-template-columns: minmax(280px, 330px) 1fr; gap: clamp(24px, 4vw, 58px); padding-top: 42px; }.control-panel { padding-top: 5px; }.step-head { display: flex; gap: 12px; align-items: center; }.step-head > span { color: var(--accent); font: 500 12px "DM Mono", monospace; }.step-head p { margin: 0; font-weight: 800; font-size: 14px; }.step-head small { color: var(--muted); font-size: 11px; }.upload-box { margin-top: 18px; height: 164px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px dashed #aab6b1; border-radius: 4px; background: rgba(255,255,255,.3); cursor: pointer; transition: .2s; }.upload-box:hover { background: #f6f4ef; border-color: var(--accent); }.upload-box input { display: none; }.upload-icon { width: 26px; height: 26px; margin-bottom: 8px; display: grid; place-items: center; color: var(--paper); background: var(--deep); border-radius: 50%; font-weight: 800; }.upload-box strong { font-size: 13px; }.upload-box small { margin-top: 4px; color: var(--muted); font-size: 11px; }.sample-link { padding: 11px 0 0; border: 0; color: var(--deep); background: transparent; font: 600 12px Manrope, sans-serif; text-decoration: underline; cursor: pointer; }.divider { margin: 30px 0; border-top: 1px solid var(--line); }.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }.field-grid label { color: #526063; font-size: 10px; font-weight: 700; letter-spacing: .2px; }.field-grid .wide { grid-column: span 2; }.field-grid input, .field-grid select { width: 100%; margin-top: 5px; padding: 8px 0; border: 0; border-bottom: 1px solid #bfc8c2; outline: 0; color: var(--ink); background: transparent; font: 12px "DM Mono", monospace; }.primary-button { display: flex; width: 100%; padding: 13px 15px; align-items: center; justify-content: space-between; border: 0; color: white; background: var(--deep); font: 700 12px Manrope, sans-serif; cursor: pointer; }.primary-button span { color: #f7c4a8; font-size: 18px; }
.contract-toolbar { height: 48px; display: flex; align-items: flex-start; justify-content: space-between; color: var(--muted); font: 11px "DM Mono", monospace; }.contract-toolbar button { margin-left: 8px; padding: 7px 10px; border: 1px solid #b5bfba; color: var(--deep); background: transparent; font: 600 11px Manrope, sans-serif; cursor: pointer; }.contract-toolbar .print-button { border-color: var(--accent); color: var(--accent); }.contract-sheet { max-width: 850px; min-height: 970px; margin: 0 auto; padding: clamp(29px, 5vw, 58px); background: var(--paper); box-shadow: 0 12px 32px rgba(38,42,35,.12); }.contract-topline { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 2px solid var(--deep); color: var(--deep); font: 500 10px "DM Mono", monospace; letter-spacing: 1px; }.contract-sheet h2 { margin: 33px 0 5px; text-align: center; font: 700 28px "Noto Serif SC", serif; letter-spacing: 7px; }.contract-date { margin: 0 0 29px; text-align: center; color: var(--muted); font-size: 11px; }.party-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.party-grid div { display: flex; flex-direction: column; gap: 5px; }.party-grid span, .terms-grid span { color: var(--accent); font: 500 9px "DM Mono", monospace; letter-spacing: .7px; }.party-grid strong { font-size: 13px; }.party-grid small { color: var(--muted); font: 9px "DM Mono", monospace; }.agreement { margin: 25px 0 13px; font: 12px "Noto Serif SC", serif; } table { width: 100%; border-collapse: collapse; font-size: 11px; } th { padding: 10px 7px; color: white; background: var(--deep); font-weight: 600; } td { padding: 10px 7px; border-bottom: 1px solid var(--line); text-align: center; } td:nth-child(2) { text-align: left; } .item-name { display: block; font-weight: 700; }.item-spec { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }.total-block { margin-left: auto; width: 285px; padding: 17px 0; border-bottom: 2px solid var(--deep); text-align: right; }.total-block span { display: block; color: var(--muted); font: 9px "DM Mono", monospace; }.total-block strong { display: block; margin: 4px 0; color: var(--accent); font: 700 20px "DM Mono", monospace; }.total-block small { font-size: 10px; }.terms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; margin-top: 27px; border-top: 1px solid var(--line); }.terms-grid div { padding: 14px 0; border-bottom: 1px solid var(--line); }.terms-grid strong { display: block; margin-top: 5px; font: 500 10px "DM Mono", monospace; line-height: 1.5; }.clause { margin: 27px 0; color: #495658; font: 11px/1.8 "Noto Serif SC", serif; }.signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 50px; }.signatures div { display: flex; height: 55px; flex-direction: column; justify-content: space-between; border-top: 1px solid var(--ink); }.signatures span { padding-top: 7px; font: 11px "Noto Serif SC", serif; }.signatures b { color: var(--muted); font: 9px "DM Mono", monospace; }.toast { position: fixed; right: 24px; bottom: 24px; transform: translateY(90px); padding: 12px 17px; color: #fff; background: var(--deep); box-shadow: 0 5px 20px rgba(0,0,0,.15); font-size: 12px; transition: transform .25s; }.toast.show { transform: translateY(0); }
@media (max-width: 830px) { .site-header { height: 62px; }.header-meta { display: none; }.hero { min-height: 0; align-items: start; flex-direction: column; gap: 24px; }.hero-stat { align-items: start; }.workspace { grid-template-columns: 1fr; }.contract-sheet { padding: 24px 18px; }.contract-toolbar { margin-bottom: 5px; }.party-grid, .terms-grid { gap: 0 14px; }.contract-sheet h2 { font-size: 24px; }.total-block { width: 100%; } }
@media print { body { background: white; }.no-print, .site-header, .hero { display: none !important; } main { padding: 0; }.workspace { display: block; padding: 0; }.contract-sheet { box-shadow: none; max-width: none; min-height: 0; padding: 14mm; }.grain { display: none; } }
.date-dialog { width: min(390px, calc(100vw - 40px)); padding: 26px; border: 0; background: var(--paper); box-shadow: 0 18px 55px rgba(0,0,0,.25); }.date-dialog::backdrop { background: rgba(18,34,35,.46); }.date-dialog h3 { margin: 0 0 22px; font: 700 22px "Noto Serif SC", serif; }.date-dialog label { display: block; margin: 15px 0; color: var(--muted); font-size: 11px; font-weight: 700; }.date-dialog input { display: block; width: 100%; margin-top: 7px; padding: 9px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 13px "DM Mono", monospace; }.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 25px; }.dialog-actions button { padding: 9px 15px; border: 1px solid var(--deep); background: transparent; color: var(--deep); font: 700 12px Manrope, sans-serif; cursor: pointer; }.dialog-actions button[type="submit"] { background: var(--deep); color: white; }
.price-item { margin: -12px 0 3px; color: var(--ink); font: 700 15px "Noto Serif SC", serif; }.price-item-meta, .price-result { color: var(--muted); font-size: 12px; }.price-result strong { color: var(--accent); font: 700 16px "DM Mono", monospace; }
.item-assignment-list { display: grid; gap: 8px; max-height: 240px; margin: 18px 0; overflow: auto; }.item-assignment-list label { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--ink); font-size: 12px; font-weight: 500; }.item-assignment-list input { width: auto; margin: 0; }
.contract-sheet { max-width: 900px; min-height: 1180px; color: #111; font-family: "Noto Serif SC", SimSun, serif; }.template-title { margin: 0 0 22px; font-size: 25px; letter-spacing: 8px; }.template-meta { margin-bottom: 16px; font-size: 13px; line-height: 1.8; }.template-meta p { display: grid; grid-template-columns: 71% 29%; margin: 0; }.template-meta p > span:first-child { min-width: 0; }.template-meta p > span:last-child { margin-left: 0; white-space: nowrap; }.template-section { margin: 16px 0 8px; font-size: 13px; }.template-table { border: 1px solid #151515; font-family: "Noto Serif SC", SimSun, serif; font-size: 12px; }.template-table th, .template-table td { padding: 7px 6px; border: 1px solid #151515; color: #111; background: transparent; font-weight: 400; text-align: center; }.template-table th:first-child, .template-table td:first-child { width: 47%; text-align: left; }.template-table th { font-weight: 600; }.template-total { margin: 7px 0 16px; font-size: 12px; }.template-clauses p { margin: 9px 0; font-size: 12px; line-height: 1.7; text-align: justify; }.template-signatures { width: 100%; margin: 22px 0 0; border: 1px solid #151515; border-collapse: collapse; font-size: 12px; line-height: 1.5; table-layout: fixed; }.template-signatures td { padding: 5px 0; border: 0; text-align: left; vertical-align: top; }.template-signatures .party-marker { width: 3em; padding-left: 8px; text-align: left; }.template-signatures .party-info { width: calc(50% - 3em); }.template-signatures tr > .party-marker:nth-child(3) { border-left: 1px solid #151515; }.contract-sheet .contract-topline, .contract-sheet .contract-date, .contract-sheet .party-grid, .contract-sheet .terms-grid, .contract-sheet .total-block, .contract-sheet .agreement, .contract-sheet .clause, .contract-sheet .signatures { display: none; }
.template-table .total-row { width: auto !important; padding: 7px 6px; text-align: left; }.template-table .total-row-content { display: grid; grid-template-columns: 55% 9% 7% 14% 15%; align-items: center; }.template-table .total-words { grid-column: 1 / span 2; text-align: left; }.template-table .total-quantity { grid-column: 3; justify-self: end; white-space: nowrap; }.template-table .total-amount { grid-column: 5; justify-self: center; white-space: nowrap; }
.template-table { table-layout: fixed; }.template-table th:first-child, .template-table td:first-child { width: 55%; }.template-table th:nth-child(2), .template-table td:nth-child(2) { width: 9%; }.template-table th:nth-child(3), .template-table td:nth-child(3) { width: 7%; }.template-table th:nth-child(4), .template-table td:nth-child(4) { width: 14%; }.template-table th:nth-child(5), .template-table td:nth-child(5) { width: 15%; }
@media (max-width: 830px) { .template-meta p { display: block; }.template-meta p > span { display: block; }.template-meta p > span:last-child { margin-left: 0; }.template-table { font-size: 10px; }.template-table th, .template-table td { padding: 5px 3px; }.template-signatures { grid-template-columns: 1fr; gap: 12px; }.template-title { font-size: 21px; letter-spacing: 4px; } }
.template-table { border: 2px solid #000 !important; }
.template-table th, .template-table td { border: 2px solid #000 !important; }
.template-signatures { border: 2px solid #000 !important; }
.template-signatures tr > .party-marker:nth-child(3) { border-left: 2px solid #000 !important; }
.template-clauses p { margin: 9px 0; }
.template-clauses .clause-body { text-decoration-line: underline; text-decoration-color: #000; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.template-signatures .party-marker { color: #000; font-weight: 800; }
.template-title { font-size: 13px; }
.outbound-dialog { width: min(760px, calc(100vw - 40px)); }
.outbound-supplier-section { margin: 22px 0; padding: 16px; border: 2px solid #000; }
.outbound-supplier-section h4 { margin: 0 0 12px; color: #000; font: 700 15px "Noto Serif SC", serif; }
.outbound-profile-hint { margin: -4px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.outbound-supplier-section .outbound-item-list { margin-bottom: 0; }
.outbound-item-list { display: grid; gap: 8px; margin: 18px 0; max-height: 300px; overflow: auto; }
.outbound-item-row { display: grid; grid-template-columns: minmax(160px, 1fr) 80px 60px 90px 130px; gap: 8px; align-items: center; font-size: 11px; }
.outbound-item-row input { width: 100%; padding: 7px 5px; border: 1px solid #bfc8c2; background: transparent; font: 12px "DM Mono", monospace; }
.outbound-item-row .outbound-quantity { text-align: right; }
.outbound-item-header { color: var(--muted); font-size: 10px; font-weight: 800; }
@media (max-width: 830px) { .outbound-item-row { grid-template-columns: minmax(120px, 1fr) 64px 44px; }.outbound-item-row input { grid-column: span 1; }.outbound-item-row .outbound-remark { grid-column: span 2; } }