:root { --ink: #2b2420; --muted: #786d67; --line: #eadfd9; --surface: #fff; --canvas: #fbf7f4; --brand: #f36e18; --brand-dark: #c84e08; --brand-pale: #fff0e6; --warn: #a96811; --warn-bg: #fff6dc; --danger: #b34343; --danger-bg: #fff0ee; --ok: #087661; --ok-bg: #e7f7f0; --shadow: 0 12px 32px #51332312; }
* { box-sizing: border-box; } body { min-width: 320px; margin: 0; color: var(--ink); background: radial-gradient(circle at 90% -10%, #fff4ec 0, transparent 28rem), var(--canvas); font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; font-size: 14px; } button, input { font: inherit; }
.topbar { min-height: 58px; padding: 0 max(22px, calc((100vw - 1440px) / 2)); display: flex; justify-content: space-between; align-items: center; color: var(--ink); background: #fff; box-shadow: 0 2px 13px #51332313; }.brand { display: flex; align-items: center; gap: 10px; }.brand-logo { width: 178px; height: 43px; object-fit: contain; }.brand-subtitle { padding-left: 10px; border-left: 1px solid #e8d8ce; color: #8b766b; font-size: 12px; font-weight: 800; letter-spacing: .04em; }.version { display: flex; align-items: center; gap: 7px; max-width: 50%; color: #806e64; font-size: 12px; text-align: right; }.version::before { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px #f36e1820; content: ""; }
.page-shell { width: min(1440px, calc(100% - 40px)); margin: 18px auto 40px; }.hero { position: relative; padding: 25px 30px 25px 35px; display: flex; justify-content: space-between; gap: 28px; align-items: center; overflow: hidden; border: 1px solid #f1dfd2; border-radius: 17px; background: #fff; box-shadow: var(--shadow); }.hero::before { position: absolute; top: 20px; bottom: 20px; left: 0; width: 5px; border-radius: 0 6px 6px 0; background: var(--brand); content: ""; }.hero::after { position: absolute; right: -88px; bottom: -185px; width: 300px; height: 300px; border: 40px solid #fff0e6; border-radius: 50%; content: ""; }.hero-copy, .hero-actions { position: relative; z-index: 1; }.hero-copy { max-width: 800px; }.hero h1 { margin: 4px 0 7px; color: #2f251f; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.02em; }.hero p { max-width: 750px; margin: 0; color: #76645a; line-height: 1.65; }.eyebrow { letter-spacing: .14em; color: var(--brand); font-size: 10px; font-weight: 800; }.workflow { display: flex; align-items: center; gap: 9px; margin-top: 15px; color: #7a665b; font-size: 12px; }.workflow span { display: inline-flex; align-items: center; gap: 6px; }.workflow b { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid #f1ad78; border-radius: 50%; color: var(--brand-dark); font-size: 10px; }.workflow i { width: 18px; height: 1px; background: #f4c59e; }.hero-actions { display: grid; gap: 8px; min-width: 150px; }.button { border: 1px solid transparent; cursor: pointer; border-radius: 9px; padding: 9px 13px; font-weight: 800; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; white-space: nowrap; }.button:hover:not(:disabled) { transform: translateY(-2px); }.button:focus-visible, input:focus-visible { outline: 3px solid #f36e1888; outline-offset: 2px; }.button:disabled { cursor: not-allowed; opacity: .48; }.button.primary { display: grid; gap: 1px; color: #fff; background: var(--brand); box-shadow: 0 6px 15px #c84e082b; text-align: left; }.button.primary:hover { background: var(--brand-dark); box-shadow: 0 9px 19px #c84e0835; }.button small { color: #ffe2c5; font-size: 10px; font-weight: 600; }.button.subtle { border-color: #efc8aa; color: #a24a15; background: #fff; }.button.subtle:hover { background: #fff7f1; }
.layout { display: grid; grid-template-columns: minmax(255px, 292px) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }.upload-panel { position: sticky; top: 14px; padding: 18px; }.quote-panel { overflow: hidden; }.validation-panel { margin-top: 16px; padding: 18px; }.panel-heading { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding: 18px 18px 14px; }.upload-panel .panel-heading { padding: 0 0 13px; }.panel-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; }.panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }.badge::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }.badge.neutral { color: #607080; background: #edf1f4; }.badge.ok { color: var(--ok); background: var(--ok-bg); }.badge.warning { color: var(--warn); background: var(--warn-bg); }.badge.error { color: var(--danger); background: var(--danger-bg); }
.upload-guide { display: flex; gap: 10px; margin: 0 0 14px; padding: 12px; border: 1px dashed #f1c39e; border-radius: 10px; background: #fffaf6; }.guide-icon { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #fff; background: var(--brand); font-weight: 900; }.upload-guide strong { font-size: 12px; }.upload-guide p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.metadata { margin: 0; }.metadata div { padding: 10px 0; border-top: 1px solid #f2ebe7; }.metadata dt { color: var(--muted); font-size: 12px; }.metadata dd { margin: 3px 0 0; line-height: 1.5; word-break: break-word; }.empty-state { color: var(--muted); }.rule-note { margin-top: 18px; padding: 14px; border: 1px solid #f1c7a8; border-radius: 10px; background: var(--brand-pale); line-height: 1.6; }.rule-note strong { color: var(--brand-dark); }.rule-note p { margin: 6px 0 0; color: #76543f; font-size: 12px; }.discount-controls { display: grid; gap: 10px; margin-top: 16px; padding: 14px; border: 1px solid #f0c6a7; border-radius: 10px; background: #fff9f4; }.discount-controls strong { color: var(--brand-dark); }.discount-controls p { margin: -4px 0 0; color: #765f54; font-size: 12px; }.discount-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.discount-grid label { display: grid; gap: 5px; color: #594a43; font-size: 12px; }.discount-grid input, .epsilon-control input { width: 100%; padding: 8px 9px; border: 1px solid #eacbb6; border-radius: 6px; background: #fff; color: var(--ink); font-weight: 700; }
.policy-notice { margin-top: 12px; padding: 12px 13px; border: 1px solid #c5e8dc; border-radius: 10px; color: #176b59; background: var(--ok-bg); line-height: 1.55; }.policy-notice strong { display: block; font-size: 13px; }.policy-notice p { margin: 4px 0 0; font-size: 12px; }
.epsilon-control { display: grid; gap: 7px; margin-top: 10px; padding: 11px; border: 1px solid #efd69a; border-radius: 8px; background: #fffaf0; font-size: 12px; }.epsilon-control a { color: var(--brand-dark); font-weight: 800; }.epsilon-control label { display: grid; gap: 3px; color: #765f54; }.epsilon-apply { justify-self: start; padding: 7px 10px; color: #fff; background: var(--brand); font-size: 12px; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 0 18px 17px; }.summary-card { position: relative; min-height: 76px; padding: 12px 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(135deg, #fff, #fffbf8); }.summary-card::after { position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #e4c6b3; content: ""; }.summary-card:nth-child(2)::after { background: var(--brand); }.summary-card.warning { border-color: #efdba9; background: linear-gradient(135deg, #fffdf5, var(--warn-bg)); }.summary-card.warning::after { background: #e0a43d; }.summary-card.total { border-color: #f0c3a2; background: linear-gradient(135deg, #fff9f5, #ffeadc); }.summary-card.total::after { background: var(--brand); }.summary-card span { display: block; color: var(--muted); font-size: 12px; }.summary-card strong { display: block; margin-top: 5px; font-size: 21px; letter-spacing: -.02em; }.summary-card.total strong { color: var(--brand-dark); }
.export-button { min-width: 148px; color: #fff !important; background: var(--brand) !important; box-shadow: none; }.export-button small { color: #ffe0c5; }.export-button:hover:not(:disabled) { background: var(--brand-dark) !important; box-shadow: 0 8px 16px #f36e1833; }.table-wrap { max-height: 640px; overflow: auto; border-top: 1px solid var(--line); overscroll-behavior: contain; } table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 960px; } th { position: sticky; z-index: 2; top: 0; padding: 10px 10px; background: #fff4ec; color: #755a4b; text-align: left; font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 1px var(--line); } td { padding: 10px 10px; border-top: 1px solid #f2ebe7; vertical-align: top; line-height: 1.45; white-space: pre-line; transition: background .14s ease; } tbody tr:hover td { background: #fffaf6; } tbody tr.needs-review td { background: #fffdf7; } tbody tr.needs-review:hover td { background: #fff9e9; } tr.ds-strand-row td { background: #fffdfb; } tr.ds-strand-row + tr.ds-strand-row td { border-top-style: dashed; color: #7f6e64; } tr.type-group td { padding: 8px 12px; border-top: 1px solid #efc5a8; border-bottom: 1px solid #f0dacb; color: var(--brand-dark); background: #fff3e9; font-size: 12px; font-weight: 900; letter-spacing: .02em; } tr.type-group:hover td { background: #fff3e9; } td:first-child { color: var(--muted); font-weight: 800; } td strong { color: #3a2920; font-size: 15px; } td code { display: block; max-width: 290px; margin-top: 3px; color: #746055; font-size: 11px; line-height: 1.45; word-break: break-all; white-space: normal; }.placeholder { color: var(--muted); text-align: center; padding: 30px; }.cost-detail { color: #705f57; font-size: 12px; }.amount { display: block; margin-top: 4px; color: var(--brand-dark); font-weight: 900; font-size: 16px; }.validation-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 8px; padding: 0; margin: 0; list-style: none; }.validation-list li { padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fffdfc; line-height: 1.5; }.validation-list li.warning { border-color: #f2d89a; background: var(--warn-bg); color: #755114; }.validation-list li.error { border-color: #f4c1bb; background: var(--danger-bg); color: #9c3c36; }.validation-list li.ok { border-color: #c5e8dc; background: var(--ok-bg); color: #176b59; }
@media (max-width: 1040px) { .hero { align-items: flex-start; flex-direction: column; }.hero-actions { grid-template-columns: repeat(2, auto); }.layout { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }.summary-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .layout { grid-template-columns: 1fr; }.upload-panel { position: static; }.table-wrap { max-height: 560px; } } @media (max-width: 560px) { .page-shell { width: min(100% - 24px, 1440px); margin-top: 12px; }.topbar { min-height: 58px; padding: 0 12px; }.brand-logo { width: 160px; height: 42px; }.brand-subtitle, .version { display: none; }.hero { padding: 25px 22px; border-radius: 15px; }.hero h1 { font-size: 27px; }.workflow { gap: 7px; font-size: 11px; }.workflow i { width: 10px; }.hero-actions { width: 100%; grid-template-columns: 1fr; }.hero-actions .button { width: 100%; text-align: center; }.button.primary { text-align: center; }.panel-heading { padding: 18px 16px 15px; }.upload-panel, .validation-panel { padding: 16px; }.summary-grid { grid-template-columns: 1fr 1fr; padding: 0 16px 16px; gap: 8px; }.summary-card { min-height: 76px; padding: 12px; }.summary-card strong { font-size: 20px; }.discount-grid { grid-template-columns: 1fr; }.table-wrap { max-height: 520px; }.validation-list { grid-template-columns: 1fr; } }