:root { --bg:#f8fafc; --card:#fff; --text:#0f172a; --muted:#64748b; --line:#dbe5ef; --brand:#0284c7; --brand2:#0ea5e9; --brand-soft:#e0f2fe; --warn:#ca8a04; --ok:#15803d; --bad:#b91c1c; }
    * { box-sizing:border-box; }
    body { margin:0; font-family:"Noto Sans SC",sans-serif; color:var(--text); background:linear-gradient(160deg,#f8fafc 0%,#eef6ff 52%,#f8fafc 100%); }
    .topbar { position:sticky; top:0; z-index:10; background:linear-gradient(90deg,#075985,var(--brand2)); color:#fff; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 6px 18px rgba(2,132,199,.16); }
    .topbar a { color:#fff; text-decoration:none; font-weight:600; }
    .msg-btn { position:relative; border:none; border-radius:10px; background:rgba(255,255,255,.18); color:#fff; padding:8px 10px; cursor:pointer; font-weight:700; }
    .msg-badge { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
    .layout { display:grid; grid-template-columns:340px 1fr; gap:14px; padding:14px; }
    .card { background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 22px rgba(15,23,42,.035); }
    .list-head, .detail-head { padding:14px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
    .list-body { max-height:calc(100vh - 150px); overflow:auto; }
    .order-item { padding:12px 14px; border-bottom:1px solid #f1f5f9; cursor:pointer; }
    .order-item:hover { background:#f8fafc; }
    .order-item.active { background:#eff6ff; border-left:3px solid var(--brand2); padding-left:11px; }
    .bill-panel { border-top:1px solid var(--line); padding:12px 14px; }
    .bill-panel-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
    .bill-panel-head strong { font-size:14px; }
    .bill-actions { display:flex; gap:6px; flex-wrap:wrap; }
    .bill-actions button { border:none; background:#f1f5f9; padding:6px 8px; border-radius:8px; cursor:pointer; color:#334155; font-weight:700; }
    .bill-item { border:1px solid #e2e8f0; border-radius:10px; padding:9px; margin-top:8px; background:#fff; }
    .bill-item-title { display:flex; justify-content:space-between; gap:8px; font-weight:700; font-size:13px; }
    .bill-tags { margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
    .bill-money { margin-top:6px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; font-size:12px; }
    .bill-money div { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:6px; }
    .bill-money b { display:block; color:#64748b; margin-bottom:2px; font-size:11px; }
    .bill-detail-card { margin-top:8px; border:1px solid #bae6fd; background:#f0f9ff; border-radius:8px; padding:9px; }
    .bill-detail-head { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; margin-bottom:8px; }
    .bill-detail-head strong { display:block; font-size:13px; }
    .bill-detail-head span { display:block; color:#64748b; font-size:12px; margin-top:2px; }
    .bill-detail-table { width:100%; border-collapse:collapse; margin-top:8px; font-size:12px; background:#fff; border-radius:8px; overflow:hidden; }
    .bill-detail-table th, .bill-detail-table td { padding:6px; border-bottom:1px solid #e2e8f0; text-align:left; vertical-align:top; }
    .bill-detail-table th { background:#f8fafc; color:#475569; font-size:11px; }
    .bill-warning-list { display:grid; gap:6px; margin-top:8px; }
    .bill-warning { display:grid; grid-template-columns:auto 1fr auto; gap:6px; align-items:center; border:1px solid #e2e8f0; border-radius:8px; background:#fff; padding:6px; font-size:12px; color:#475569; }
    .bill-warning.is-danger { border-color:#fecaca; background:#fff7f7; }
    .bill-warning.is-warning { border-color:#fde68a; background:#fffbeb; }
    .bill-warning em { font-style:normal; font-weight:800; color:#334155; }
    .bill-timeline { margin-top:8px; border-top:1px solid #bae6fd; padding-top:8px; font-size:12px; }
    .bill-timeline > strong { display:block; margin-bottom:4px; }
    .bill-timeline-row { display:grid; grid-template-columns:76px 1fr; gap:6px; padding:5px 0; border-bottom:1px solid #dbeafe; }
    .bill-timeline-row > span, .bill-timeline-row small { color:#64748b; }
    .bill-timeline-row b { display:block; color:#0f172a; }
    .bill-item.is-overdue { border-color:#fecaca; background:#fff7f7; }
    .order-title { font-weight:700; font-size:14px; margin-bottom:4px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .order-meta { font-size:12px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; }
    .badge { display:inline-flex; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; }
    .b-ok { background:#dcfce7; color:var(--ok); }
    .b-warn { background:#fef9c3; color:var(--warn); }
    .b-bad { background:#fee2e2; color:var(--bad); }
    .b-info { background:#e0f2fe; color:#0369a1; }
    .b-demo { background:#eff6ff; color:#0369a1; border:1px solid #bfdbfe; }
    .detail-body { padding:16px; }
    .detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
    .kv { background:#f8fafc; border:1px solid var(--line); border-radius:8px; padding:10px; font-size:13px; }
    .kv b { display:block; color:#334155; margin-bottom:4px; font-size:12px; }
    .section { margin-top:14px; }
    .section h3 { font-size:15px; margin:0 0 8px; }
    .doc-review-banner { margin-top: 6px; padding: 12px; border: 1px solid #fcd34d; border-radius: 10px; background: #fffbeb; color: #92400e; }
    .doc-review-banner.ok { border-color: #86efac; background: #f0fdf4; color: #166534; }
    .doc-review-banner-title { font-weight: 700; font-size: 14px; }
    .doc-review-banner-note { margin-top: 4px; font-size: 13px; line-height: 1.6; }
    .doc-review-summary { margin-top: 8px; font-size: 13px; font-weight: 700; line-height: 1.6; }
    .doc-review-fields { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
    .doc-review-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
    .doc-review-btn { border: none; border-radius: 8px; background: #0284c7; color: #fff; padding: 10px 12px; cursor: pointer; font-weight: 700; }
    .doc-review-btn.secondary { background: #f1f5f9; color: #0f172a; }
    .fold-card { margin-top:14px; border:1px solid var(--line); border-radius:8px; background:#fff; }
    .fold-card summary { cursor:pointer; font-weight:700; font-size:15px; padding:10px 12px; list-style:none; display:flex; align-items:center; justify-content:space-between; }
    .fold-card summary::-webkit-details-marker { display:none; }
    .fold-card summary::after { content:'▸'; color:#64748b; transform:rotate(0deg); transition:transform .2s ease, color .2s ease; }
    .fold-card[open] summary::after { transform:rotate(90deg); color:var(--brand); }
    .fold-card .fold-body { padding:0 12px 12px; }
    .quote-bill-card { border:1px solid #bfdbfe; background:#eff6ff; border-radius:8px; padding:12px; display:grid; gap:10px; }
    .quote-bill-head { display:grid; gap:3px; }
    .quote-bill-head b { color:var(--text); font-size:14px; }
    .quote-bill-head span, .quote-bill-line span { color:var(--muted); font-size:12px; }
    .quote-bill-lines { display:grid; gap:6px; }
    .quote-bill-line { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; border:1px solid rgba(147,197,253,.7); background:#fff; border-radius:8px; padding:8px 10px; }
    .quote-bill-line div { min-width:0; display:grid; gap:2px; }
    .quote-bill-line b, .quote-bill-line strong { font-size:13px; color:var(--text); }
    .quote-bill-line strong { white-space:nowrap; }
    .quote-bill-total { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
    .quote-bill-total span { background:#fff; border:1px solid rgba(147,197,253,.7); border-radius:8px; padding:6px 8px; color:var(--muted); font-size:12px; }
    .quote-bill-total b { color:var(--text); }
    .timeline { border-left:2px solid #cbd5e1; margin-left:8px; padding-left:18px; }
    .tl { margin-bottom:10px; position:relative; }
    .tl-dot { position:absolute; left:-28px; top:2px; width:16px; height:16px; border-radius:50%; border:2px solid #cbd5e1; background:#cbd5e1; color:transparent; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; line-height:1; }
    .tl.done .tl-dot { background:#16a34a; border-color:#16a34a; color:#fff; }
    .tl.current .tl-dot { background:#0284c7; border-color:#0284c7; color:transparent; box-shadow:0 0 0 4px #dbeafe; }
    .tl.pending .tl-dot { background:#cbd5e1; border-color:#cbd5e1; color:transparent; }
    .tl-title { font-size:13px; font-weight:700; }
    .tl-meta { font-size:12px; color:var(--muted); }
    .tl-note { margin-top:4px; border:1px solid #bfdbfe; background:#eff6ff; border-radius:8px; padding:7px 8px; color:#334155; font-size:12px; line-height:1.55; }
    .tl-operation-note .tl-title { color:#0369a1; }
    .proof-list img { width:140px; border-radius:8px; border:1px solid var(--line); margin-right:8px; }
    .pay-form { display:grid; gap:8px; }
    .pay-form input, .pay-form textarea, .pay-form button { width:100%; font:inherit; padding:10px; border-radius:8px; border:1px solid #cbd5e1; }
    .pay-form button { background:#0284c7; color:#fff; font-weight:700; border:none; cursor:pointer; }
    .empty { color:var(--muted); padding:18px; font-size:13px; }
    .msg-drawer { position:fixed; top:0; right:-420px; width:min(420px,100vw); height:100vh; background:#fff; border-left:1px solid var(--line); box-shadow:-10px 0 30px rgba(15,23,42,.14); transition:right .2s ease; z-index:40; display:flex; flex-direction:column; }
    .msg-drawer.show { right:0; }
    .msg-head { padding:12px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
    .msg-list { flex:1; overflow:auto; }
    .msg-item { padding:10px 12px; border-bottom:1px solid #f1f5f9; cursor:pointer; }
    .msg-item.unread { background:#eff6ff; }
    .msg-title { font-size:14px; font-weight:700; margin-bottom:4px; }
    .msg-meta { font-size:12px; color:var(--muted); }
    .msg-content { margin-top:6px; font-size:13px; color:#334155; line-height:1.5; white-space:pre-wrap; }
    .msg-mask { position:fixed; inset:0; background:rgba(15,23,42,.36); z-index:39; display:none; }
    .msg-mask.show { display:block; }
    .side-tools { position:fixed; right:14px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:8px; z-index:30; }
    .side-tool-btn { position:relative; border:none; border-radius:8px; background:#0284c7; color:#fff; padding:9px 10px; cursor:pointer; font-weight:700; box-shadow:0 6px 18px rgba(2,132,199,.26); }
    .side-tool-btn.secondary { background:#0ea5e9; box-shadow:0 6px 18px rgba(14,165,233,.28); }
    .side-tool-badge { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
    .dm-drawer { position:fixed; top:0; right:-640px; width:min(640px,100vw); height:100vh; background:#fff; border-left:1px solid var(--line); box-shadow:-10px 0 30px rgba(15,23,42,.14); transition:right .2s ease; z-index:42; display:flex; }
    .dm-drawer.show { right:0; }
    .dm-side { width:250px; border-right:1px solid #e2e8f0; display:flex; flex-direction:column; min-height:0; }
    .dm-side-list { flex:1; overflow:auto; }
    .dm-contact { width:100%; text-align:left; border:none; background:#fff; border-bottom:1px solid #eef2f7; padding:10px; cursor:pointer; }
    .dm-contact.active { background:#eff6ff; }
    .dm-main { flex:1; display:flex; flex-direction:column; min-width:0; }
    .dm-main-head { padding:10px 12px; border-bottom:1px solid #eef2f7; }
    .dm-main-list { flex:1; overflow:auto; padding:10px; background:#f8fafc; }
    .dm-main-send { padding:10px; border-top:1px solid #eef2f7; display:flex; gap:8px; }
    .dm-main-send input { flex:1; padding:9px; border:1px solid #cbd5e1; border-radius:8px; font:inherit; }
    .dm-main-send button { border:none; border-radius:8px; background:#0284c7; color:#fff; padding:9px 12px; cursor:pointer; font-weight:700; }
    .account-panel { margin:16px; padding:14px; border:1px solid var(--line); border-radius:8px; background:#fff; }
    .account-panel summary { cursor:pointer; font-weight:800; color:var(--ink); }
    .account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
    .account-grid label { display:grid; gap:5px; font-size:12px; color:var(--muted); font-weight:700; }
    .account-grid input { min-height:36px; border:1px solid #cbd5e1; border-radius:8px; padding:8px 10px; font:inherit; color:var(--ink); }
    .account-grid .wide { grid-column:1 / -1; }
    .account-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
    .account-actions button { border:none; border-radius:8px; padding:8px 12px; font-weight:800; cursor:pointer; }
    .account-actions .primary { background:#0284c7; color:#fff; }
    .account-actions .secondary { background:#e0f2fe; color:#075985; }
    .account-status { margin-top:8px; font-size:12px; color:var(--muted); }
    @media (max-width:960px){ .layout{grid-template-columns:1fr;} .list-body{max-height:300px;} .detail-grid{grid-template-columns:1fr;} .bill-money{grid-template-columns:1fr;} .bill-detail-head{display:block;} .bill-detail-table{min-width:520px;} .side-tools{right:10px;top:auto;bottom:14px;transform:none;flex-direction:row;} .dm-drawer{width:100vw;right:-100vw;} .dm-side{width:42%;} }