/* index.html — page-specific styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f0f2f5; color: #222; min-height: 100vh; }
/* Hide spin buttons for all number inputs (manual typing only) */
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; }

/* ===== Login ===== */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#A21F2D,#8a1a26); }
.login-card { background:#fff; border-radius:12px; padding:36px 40px; width:420px; box-shadow:0 20px 60px rgba(0,0,0,.3); text-align:center; }
.login-card h1 { font-size:22px; color:#A21F2D; margin-bottom:4px; }
.login-card .sub { font-size:12px; color:#999; margin-bottom:24px; }
.login-card input { width:100%; padding:11px 14px; border:1px solid #d0d5dd; border-radius:6px; font-size:14px; margin-bottom:10px; outline:none; background:#f8f9fb; }
.login-card input:focus { border-color:#A21F2D; box-shadow:0 0 0 2px rgba(162,31,45,.1); background:#fff; }
.login-card button { width:100%; padding:12px; background:#A21F2D; color:#fff; border:none; border-radius:6px; font-size:16px; font-weight:600; cursor:pointer; transition:all .2s; }
.login-card button:hover { background:#8a1a26; }
.login-card .err { color:#c62828; font-size:13px; margin-top:8px; display:none; }

/* ===== Public Calculator (new design) ===== */
.public-calc { display:none; min-height:100vh; background:#f0f2f5; }
/* Header */
.hd{background:linear-gradient(135deg,#A21F2D,#7a1824);color:#fff;padding:24px 16px 20px;text-align:center}
.hd h1{font-size:20px;font-weight:700;letter-spacing:1px;margin-bottom:2px}
.hd .sub{font-size:12px;opacity:.55}
/* Body */
.bd{max-width:880px;margin:-8px auto 0;padding:0 12px}
.card{background:#fff;border-radius:10px;padding:28px 32px;margin-bottom:16px;box-shadow:0 1px 6px rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.03)}
.card h2{font-size:15px;color:#A21F2D;font-weight:700;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid #f0f2f5}
/* Country Selector */
.cwrap{position:relative}
.cinput{width:100%;padding:10px 12px;border:1.5px solid #e0e4ea;border-radius:8px;font-size:14px;outline:none;background:#fafbfc;transition:border .2s}
.cinput:focus{border-color:#A21F2D;box-shadow:0 0 0 3px rgba(162,31,45,.08);background:#fff}
.cdd{display:none;position:absolute;top:calc(100%+2px);left:0;right:0;max-height:280px;overflow-y:auto;border:1.5px solid #e0e4ea;border-radius:8px;background:#fff;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.cdd .it{padding:8px 12px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #f8f8fa}
.cdd .it:last-child{border-bottom:none}
.cdd .it:hover{background:#f5f5ff}
.cdd .it .ck{width:16px;height:16px;border:2px solid #d0d5dd;border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cdd .it.sel .ck{background:#A21F2D;border-color:#A21F2D}
.cdd .it.sel .ck::after{content:'✓';color:#fff;font-size:11px;font-weight:bold}
.cdd .it .cn{color:#222}
.cdd .it .fe{font-size:11px;color:#aaa;margin-left:auto}
/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:26px}
.tag{background:#fef5f5;color:#A21F2D;padding:3px 8px 3px 10px;border-radius:12px;font-size:12px;display:inline-flex;align-items:center;gap:4px;border:1px solid #fcd5d5}.tag .x{cursor:pointer;font-size:14px;line-height:1;opacity:.4}.tag .x:hover{opacity:1}
.emp{font-size:12px;color:#bbb;padding:4px 0}
/* Form Grid */
.row{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap}
.fld{display:flex;flex-direction:column;gap:5px}
.fld label{font-size:12px;color:#777;font-weight:600}
.fld input,.fld select{padding:9px 12px;border:1.5px solid #e0e4ea;border-radius:8px;font-size:14px;outline:none;background:#fafbfc;width:100px;text-align:center;font-weight:600}
.fld input:focus,.fld select:focus{border-color:#A21F2D;box-shadow:0 0 0 3px rgba(162,31,45,.08);background:#fff}
/* Button */
.btn{background:linear-gradient(135deg,#A21F2D,#8a1a26);color:#fff;border:none;padding:11px 36px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:.5px;box-shadow:0 2px 8px rgba(162,31,45,.25);transition:all .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(162,31,45,.3)}
.btn:active{transform:translateY(0)}
.btn:disabled{background:#bbb;cursor:not-allowed;box-shadow:none;transform:none}
.pbtn{background:#fff;color:#A21F2D;border:1.5px solid #A21F2D;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.pbtn:hover{background:#A21F2D;color:#fff}
/* Result */
.res{display:none;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.rbody{border:1px solid #e8ecf0;border-radius:8px;overflow:hidden}
/* Summary */
.sum{display:flex;gap:40px;align-items:center;padding:16px 24px 14px;font-size:11px;color:#999;border-bottom:1px solid #f0f2f5}
.sum .kv{display:flex;align-items:baseline;gap:6px}
.sum .kv .v{font-size:14px;font-weight:700;color:#444}
.sum .kv .k{font-size:10px;color:#bbb}
.sum .sep{width:1px;height:14px;background:#e0e4ea;flex-shrink:0}
/* Table */
.tbl{width:100%;border-collapse:collapse}
.tbl th{background:#f9fafb;font-size:11px;font-weight:600;color:#999;padding:9px 14px;text-align:left;border-bottom:2px solid #e8ecf0}
.tbl th:first-child{padding-left:24px}
.tbl th:last-child{padding-right:24px}
.tbl th.rt{text-align:right}
.tbl td{padding:10px 14px;font-size:13px;color:#444;border-bottom:1px solid #f4f5f8}
.tbl td:first-child{padding-left:24px}
.tbl td:last-child{padding-right:24px}
.tbl td.rt{text-align:right;font-family:SF Mono,Consolas,monospace;font-size:12px}
.tbl td.cn{font-weight:600;color:#333}
.tbl tr.z td{background:#fafbfc}
/* Grand Total */
.gt{margin:10px 0 0;padding:16px 24px;background:linear-gradient(135deg,#fef9ed,#fef7e4);display:flex;justify-content:flex-end;align-items:baseline;gap:12px;border-top:2px solid #f5d9a0}
.gt .gl{font-size:10px;color:#999;font-weight:600}
.gt .gv{font-size:22px;font-weight:800;color:#A21F2D}
/* Notes */
.nt{padding:20px 24px;font-size:10px;color:#aaa;line-height:2.2}
.nt .ni{display:flex;align-items:flex-start;gap:6px;margin-bottom:4px}
.nt .ico{flex-shrink:0;width:18px;text-align:center;font-size:11px}
.nt em{font-style:normal;color:#ccc}
/* Footer */
.ft{text-align:center;padding:20px 0 32px;font-size:11px;color:#aaa}
.pc-login-bar{text-align:center;padding:6px 0 8px}
.pc-login-bar a{color:#A21F2D;cursor:pointer;font-size:13px;text-decoration:none;opacity:.7;transition:opacity .15s}
.pc-login-bar a:hover{opacity:1;text-decoration:underline}
/* Loading */
.ld{display:none;text-align:center;padding:40px;color:#999;font-size:14px}
.err{display:none;background:#fff3f3;color:#c62828;padding:12px 16px;border-radius:6px;margin:12px 0;font-size:13px;border:1px solid #fdd}
/* Responsive */
@media(max-width:600px){.card{padding:16px}.sum{flex-wrap:wrap;gap:12px}.tbl th,.tbl td{padding:8px 10px;font-size:11px}.tbl td.rt{font-size:10px}}

/* PC Country Grid */
.pc-country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:4px;max-height:500px;overflow-y:auto;padding:2px}
.pc-ci{padding:5px 10px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:8px;border-radius:6px;transition:all .12s;border:1px solid transparent}
.pc-ci:hover{border-color:#e0e4ea;background:#f9fafc}
.pc-ci.selected{background:#fef5f5;border-color:#fcd5d5}
.pc-ci .pc-ck{width:16px;height:16px;border:2px solid #d0d5dd;border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pc-ci.selected .pc-ck{background:#A21F2D;border-color:#A21F2D}
.pc-ci.selected .pc-ck::after{content:'✓';color:#fff;font-size:11px;font-weight:bold}
.pc-ci .pc-nm{color:#222;font-weight:500}
.pc-ci .pc-en{font-size:10px;color:#bbb;margin-left:2px}
.pc-ci .pc-of{font-size:10px;padding:1px 5px;border-radius:3px;white-space:nowrap;margin-left:auto}
.pc-ci .pc-fee{font-size:10px;color:#999;margin-left:4px;font-family:SF Mono,Consolas,monospace}
@media(max-width:600px){.pc-country-grid{grid-template-columns:1fr}}

@media print {
  body { background: #fff; }
  .header, .pc-login-bar, .ft, #pcCalcCard, .nav, .login, #loginPage,
  .pbtn, .pc-ip, .pc-drop, .btn, .rh-overlay, .mh, .mnav, #pcCountryInput,
  #pcCountryDropdown, #pcErr { display: none !important; }
  .card.res { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
  .card.res h2 { font-size: 18px; }
  .tbl { font-size: 12px; }
  .tbl th { background: #A21F2D !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gt { font-size: 16px; }
  .sum { font-size: 12px; }
  #pcResultNote { font-size: 11px; }
}

.header { background: linear-gradient(135deg, #A21F2D 0%, #8a1a26 100%); color: #fff; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 52px; box-shadow: 0 2px 8px rgba(162,31,45,0.3); position:relative; z-index:10; }
.header::after { content:''; position:absolute; bottom:0; left:24px; right:24px; height:1px; background:rgba(196,153,88,.35); }
.header-left { display: flex; align-items: center; gap: 14px; }
.header-logo { font-size: 20px; font-weight: 700; letter-spacing: 0.5px; }
.header-sub { font-size: 12px; opacity: .55; margin-top:2px; }
.header-right { display: flex; gap: 8px; align-items: center; }
.header-btn { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all .2s; white-space:nowrap; }
.header-btn:hover { background: rgba(255,255,255,.22); }
.header-user { font-size: 13px; opacity:.75; margin-right:8px; white-space:nowrap; }
.header-role { font-size:11px; background:rgba(255,255,255,.12); padding:2px 7px; border-radius:3px; margin-left:4px; }
/* Quick nav buttons in header */
.qn-btn { display:inline-block; padding:4px 10px; border:1px solid rgba(255,255,255,.35); border-radius:5px; color:#fff; font-size:11px; text-decoration:none; transition:all .15s; white-space:nowrap; }
.qn-btn:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.6); }

/* ===== Mode Bar ===== */
.mode-bar { background: linear-gradient(135deg, #8a1a26 0%, #A21F2D 100%); color: #fff; padding: 0 20px; display: flex; align-items: center; height: 40px; position:relative; z-index:9; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.mode-bar .header-mode { display:flex; gap:2px; align-items:center; }.hm-label { font-size:13px; color:#fff; font-weight:700; letter-spacing:1px; margin-right:6px; padding:3px 10px; background:#C49958; border-radius:4px; white-space:nowrap; }
.hm-divider { width:1px; height:18px; background:rgba(255,255,255,.15); margin:0 6px; flex-shrink:0; }
.hm-btn { background: transparent; border: none; color: rgba(255,255,255,.65); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: color .15s; white-space:nowrap; font-weight:500; }
.hm-btn:hover { color: #fff; }
.hm-btn.active { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ===== Main Layout ===== */
.main-app { display:none; }
.hm-btn.help { background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.25); font-size:12px; }
.app-layout { display: flex; height: calc(100vh - 92px); overflow: hidden; }
.left-panel { flex: 1; display: flex; flex-direction: column; border-right: 1px solid #e4e6eb; background: #fff; overflow: hidden; min-width: 0; }
.right-panel { width: 360px; display: flex; flex-direction: column; background: #fff; flex-shrink: 0; overflow: hidden; }

/* ===== Config Bar ===== */
.config-bar { padding: 8px 16px; background: #f8f9fb; border-bottom: 1px solid #e4e6eb; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.config-group { display: flex; align-items: center; gap: 4px; }
.config-label { font-size: 14px; color: #555; white-space: nowrap; font-weight: 500; }
.config-input { padding: 5px 7px; border: 1px solid #d0d5dd; border-radius: 4px; font-size: 14px; background: #fff; outline: none; width: 54px; text-align: center; color: #222; font-weight: 600; }
.config-input:focus { border-color: #A21F2D; box-shadow: 0 0 0 2px rgba(162,31,45,.12); }
.config-input.wide { width: 72px; }
.config-btn { padding: 5px 14px; border: 1px solid #d0d5dd; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all .15s; background: #fff; color: #444; line-height: 1.5; font-weight: 500; }
.config-btn:hover { border-color: #A21F2D; color: #A21F2D; }
.config-btn.active { background: #A21F2D; color: #fff; border-color: #A21F2D; font-weight: 600; }
.config-divider { width: 1px; height: 22px; background: #d0d5dd; }

/* ===== Search & Quick ===== */
.search-bar { padding: 8px 16px; border-bottom: 1px solid #e4e6eb; position: relative; background: #fff; }
.search-bar input { width: 100%; padding: 9px 10px 9px 34px; border: 1px solid #d0d5dd; border-radius: 5px; font-size: 15px; outline: none; background: #f8f9fb; transition: all .2s; color: #222; }
.search-bar input:focus { background: #fff; border-color: #A21F2D; box-shadow: 0 0 0 2px rgba(162,31,45,.08); }
.search-bar .icon { position: absolute; left: 25px; top: 50%; transform: translateY(-50%); color: #999; font-size: 14px; pointer-events: none; }
.quick-bar { padding: 5px 16px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid #e4e6eb; background: #fafbfc; }
.quick-label { font-size: 14px; color: #888; margin-right: 2px; white-space: nowrap; }
.quick-btn { padding: 5px 14px; border: 1px solid #d0d5dd; border-radius: 20px; font-size: 14px; cursor: pointer; transition: all .15s; background: #fff; color: #444; white-space: nowrap; font-weight: 500; }
.quick-btn:hover { border-color: #A21F2D; color: #A21F2D; background: #fff5f5; }

/* ===== Region Tabs ===== */
.region-tabs { display: flex; border-bottom: 1px solid #e4e6eb; background: #fafbfc; overflow-x: auto; padding: 0 4px; }
.region-tab { padding: 8px 16px; font-size: 14px; cursor: pointer; border: none; background: none; color: #777; white-space: nowrap; border-bottom: 2px solid transparent; transition: all .15s; margin: 0 1px; font-weight: 500; }
.region-tab:hover { color: #A21F2D; background: #fff5f5; }
.region-tab.active { color: #A21F2D; border-bottom-color: #A21F2D; font-weight: 700; }

/* ===== Country List ===== */
.country-list { flex: 1; overflow-y: auto; }
.country-list::-webkit-scrollbar { width: 4px; }
.country-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.country-group-title { padding: 4px 16px; font-size: 13px; color: #999; background: #f5f6f8; font-weight: 700; position: sticky; top: 0; z-index: 1; letter-spacing: 0.5px; }
.country-item { display: flex; align-items: center; padding: 6px 16px; cursor: pointer; transition: all .1s; }
.country-item:hover { background: #f5f5ff; }
.country-item.selected { background: #fff0f0; }
.country-item .cb { width: 18px; height: 18px; border: 2px solid #ccc; border-radius: 3px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; margin-right: 6px; }
.country-item.selected .cb { background: #A21F2D; border-color: #A21F2D; }
.country-item.selected .cb::after { content: '✓'; color: #fff; font-size: 14px; font-weight: bold; }

.country-item .nm { font-size: 16px; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex:0 0 40%; }
.country-item .fh { font-size: 15px; color: #555; font-variant-numeric: tabular-nums; flex-shrink: 0; margin-left: 6px; }
.country-item .badge { font-size: 12px; padding: 2px 9px; border-radius: 10px; background: #eee; color: #666; white-space: nowrap; font-weight: 500; flex-shrink: 0; margin-left: 3px; }
.country-item .wipobadge, .sel-item .wipobadge { font-size: 11px; padding: 1px 7px; border-radius: 8px; white-space: nowrap; font-weight: 600; flex-shrink: 0; margin-left: 2px; display: inline-flex; align-items: center; }
.country-item .wipobadge.y, .sel-item .wipobadge.y { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.of-bdg { font-size: 10px; padding: 1px 5px; border-radius: 3px; white-space: nowrap; font-weight: 600; flex-shrink: 0; margin-left: 2px; display: inline-flex; align-items: center; line-height: 1.4; }
.cn-alias { color: #555; font-size: 13px; font-weight: 500; margin-left: 2px; }
.country-item .wipobadge.n, .sel-item .wipobadge.n { background: #fce4ec; color: #c62828; border: 1px solid #f8bbd0; letter-spacing: 0.3px; }
.country-item .wipobadge.t, .sel-item .wipobadge.t { background: #fff3e0; color: #e65100; border: 1px solid #ffe0b2; font-weight: 700; }
.country-item .wipobadge.r, .sel-item .wipobadge.r { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; font-weight: 600; }
.d-group-sel { padding: 2px 6px; border: 1px solid #d0d5dd; border-radius: 4px; font-size: 11px; color: #A21F2D; background: #fff; cursor: pointer; outline: none; margin: 0 6px; }
.d-group-tag { font-size: 11px; color: #A21F2D; background: #fff5f5; border: 1px solid #f8d0d0; border-radius: 4px; padding: 2px 8px; margin: 0 6px; }

/* ===== Right Panel ===== */
.sel-hdr { padding: 10px 16px; border-bottom: 1px solid #e4e6eb; display: flex; align-items: center; justify-content: space-between; }
.sel-hdr .t { font-size: 16px; font-weight: 600; color: #222; }
.sel-hdr .c { color: #A21F2D; font-weight: 700; font-size: 19px; }
.sel-hdr .clr { padding: 4px 14px; border: 1px solid #d0d5dd; border-radius: 4px; cursor: pointer; font-size: 13px; color: #888; background: #fff; }
.sel-hdr .clr:hover { color: #A21F2D; border-color: #A21F2D; }
.sel-src { padding: 5px 16px; border-bottom: 1px solid #e4e6eb; }
.sel-src input { width: 100%; padding: 6px 9px; border: 1px solid #d0d5dd; border-radius: 4px; font-size: 14px; outline: none; background: #fafbfc; color: #222; }
.sel-src input:focus { border-color: #A21F2D; }
.sel-list { flex: 1; overflow-y: auto; padding: 3px 16px; }
.sel-item { display: flex; align-items: center; padding: 7px 0; border-bottom: 1px solid #eee; gap: 5px; }
.sel-item .nm { flex: 1; font-size: 16px; color: #111; }
.sel-item .fe { font-size: 15px; color: #A21F2D; font-weight: 700; font-variant-numeric: tabular-nums; }
.sel-item .rm { width: 18px; height: 18px; border: none; background: none; cursor: pointer; font-size: 15px; color: #bbb; display: flex; align-items: center; justify-content: center; }
.sel-item .rm:hover { color: #A21F2D; }
.sel-item .sfee { font-size: 12px; color: #A21F2D; font-weight: 700; margin-left: 3px; white-space: nowrap; }
.inc-ctrl { display: inline-flex; align-items: center; gap: 1px; margin: 0 3px; }
.inc-ctrl button { width: 18px; height: 20px; border: 1px solid #ccc; border-radius: 3px; background: #fff; cursor: pointer; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; color: #555; }
.inc-ctrl button:hover { border-color: #A21F2D; color: #A21F2D; }
.inc-inp { width: 28px; height: 20px; border: 1px solid #ccc; border-radius: 3px; text-align: center; font-size: 12px; outline: none; color: #222; font-weight: 600; }
.inc-inp:focus { border-color: #A21F2D; }

/* ===== Quote Bar ===== */
.quote-bar { padding: 10px 16px; border-top: 1px solid #e4e6eb; background: #fafbfc; }
.quote-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.qi { text-align: center; }
.qi .l { font-size: 12px; color: #888; margin-bottom: 1px; }
.qi .v { font-size: 20px; font-weight: 700; color: #A21F2D; font-variant-numeric: tabular-nums; }
.qi .sv { font-size: 13px; color: #555; }
.qi-btn { padding: 8px 20px; background: #A21F2D; color: #fff; border: none; border-radius: 5px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; }
.qi-btn:hover { background: #8a1a26; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(162,31,45,.3); }

/* ===== Assign Panel ===== */
.an-el { display:flex; flex-direction:column; height:100%; }
.an-body { flex:1; padding:16px 16px; overflow-y:auto; }
.an-card { background:#f8f9fb; border-radius:8px; padding:14px; margin-bottom:12px; }
.an-card .big { font-size:22px; font-weight:700; color:#A21F2D; }
.an-card .sm { font-size:12px; color:#aaa; }
.an-row { display:flex; justify-content:space-between; padding:4px 0; font-size:13px; }
.an-row .l { color:#666; }
.an-row .v { font-weight:600; }
.an-total { display:flex; justify-content:space-between; padding:8px 0 4px; border-top:2px solid #A21F2D; margin-top:4px; }
.an-total .l { font-size:15px; font-weight:700; color:#A21F2D; }
.an-total .v { font-size:20px; font-weight:700; color:#A21F2D; }

/* ===== Direct Mode ===== */
.direct-main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.rtg-A { background:#e8f5e9; color:#2e7d32; }
.rtg-B { background:#fff8e1; color:#f57f17; }
.rtg-C { background:#ffebee; color:#c62828; }
/* Rate table */
.direct-tbar { padding:6px 12px; border-bottom:1px solid #e4e6eb; display:flex; align-items:center; justify-content:space-between; background:#fafbfc; }
.direct-tbar .tt { font-size:14px; font-weight:600; }
.direct-tbar .st { font-size:11px; color:#888; }
.direct-rates { flex:1; overflow-y:auto; padding:3px 12px; position:relative; }
/* Master-Detail layout for supplier rates */
.md-layout { flex:1; display:flex; overflow:hidden; }
.md-left { width:220px; flex-shrink:0; border-right:1px solid #e4e6eb; display:flex; flex-direction:column; overflow:hidden; background:#fafbfc; }
.md-search { padding:6px 8px; border-bottom:1px solid #e4e6eb; }
.md-search input { width:100%; padding:5px 8px; border:1px solid #d0d5dd; border-radius:4px; font-size:12px; outline:none; background:#fff; }
.md-search input:focus { border-color:#A21F2D; }
.md-clist { flex:1; overflow-y:auto; }
.md-ci { padding:7px 12px; cursor:pointer; border-bottom:1px solid #f0f0f0; transition:background .1s; display:flex; justify-content:space-between; align-items:center; }
.md-ci:hover { background:#fff0f0; }
.md-ci.active { background:#fef5f5; border-left:3px solid #A21F2D; }
.md-ci .md-cn { font-size:13px; font-weight:500; color:#333; }
.md-ci .md-cm { font-size:10px; color:#999; margin-top:1px; }
.md-ci .md-ct { font-size:11px; color:#A21F2D; font-weight:600; white-space:nowrap; }
.md-right { flex:1; overflow-y:auto; padding:3px 12px; position:relative; }
.md-empty { text-align:center; padding:40px 20px; color:#bbb; font-size:14px; }
.rate-group-title { padding:5px 0 2px; font-size:12px; color:#999; font-weight:700; border-bottom:1px solid #f0f0f0; margin-top:4px; position:sticky; top:0; background:#fff; z-index:1; }
/* Rate card layout */
.dcard { border:1px solid #e4e6eb; border-radius:6px; margin:5px 0; overflow:hidden; background:#fff; }
.dcard-hdr { display:flex; align-items:center; padding:6px 10px; cursor:pointer; gap:5px; background:#fafbfc; border-bottom:1px solid #e4e6eb; user-select:none; }
.dcard-hdr:hover { background:#f0f1f3; }
.dcard-flag { font-size:14px; }
.dcard-name { flex:1; font-size:14px; font-weight:600; color:#222; }
.dcard-total { font-size:13px; color:#A21F2D; font-weight:600; }
.dcard-badge { font-size:12px; padding:1px 5px; border-radius:3px; background:#eee; color:#888; }
.dcard-badge2 { font-size:12px; padding:1px 5px; border-radius:3px; background:#e8f5e9; color:#2e7d32; }
.dcard-badge3 { font-size:12px; padding:1px 5px; border-radius:3px; background:#e3f2fd; color:#1565c0; }
.darrow { font-size:10px; color:#999; width:14px; text-align:center; }
.dcard-body { }
.dcard-body.dcoll { display:none; }
.dgroup { border:1px solid #eef0f2; border-radius:4px; margin:4px 8px; overflow:hidden; }
.dgroup-hdr { display:flex; align-items:center; padding:7px 12px; cursor:pointer; gap:8px; background:#f8f9fa; border-bottom:1px solid #eef0f2; user-select:none; font-size:14px; }
.dgroup-hdr:hover { background:#f0f1f3; }
.dgroup-icon { font-size:14px; }
.dgroup-name { flex:1; font-weight:600; color:#333; }
.dgroup-total { font-size:15px; color:#A21F2D; font-weight:700; }
.dgroup-body { }
.dgroup-body.dcoll { display:none; }
.dgroup-body .drate-row:last-child { border-bottom:none; }
.dgroup-add { text-align:center; padding:4px; margin:2px 8px; cursor:pointer; border:1px dashed #ccc; border-radius:4px; color:#888; font-size:11px; }
.dgroup-add:hover { border-color:#A21F2D; color:#A21F2D; background:#fff5f5; }
.dgroup-add-item { text-align:center; padding:3px; cursor:pointer; color:#888; font-size:11px; border-top:1px dashed #eee; }
.dgroup-add-item:hover { color:#A21F2D; background:#fff5f5; }
.mode-badge { display:inline-block; font-size:12px; padding:2px 6px; border-radius:3px; margin:0 1px; white-space:nowrap; }
.mode-flat { background:#e8f5e9; color:#2e7d32; }
.mode-perClass { background:#e3f2fd; color:#1565c0; }
.mode-tiered { background:#fff3e0; color:#e65100; }
.mode-tieredN { background:#f3e5f5; color:#6a1b9a; }
.mode-tiered3 { background:#fff8e1; color:#e65100; }
.btn-icon-sm { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; cursor:pointer; border-radius:3px; font-size:13px; line-height:1; }
.btn-icon-sm:hover { background:#e0e0e0; }
.btn-icon-sm.del:hover { background:#ffebee; color:#c62828; }
.drate-row { display:flex; align-items:center; padding:7px 12px; gap:8px; border-bottom:1px solid #f5f5f5; font-size:15px; }
.drate-row:last-child { border-bottom:none; }
.drate-type { flex:1; color:#444; }
.drate-amt { white-space:nowrap; color:#A21F2D; font-weight:600; }
.drate-model { font-size:12px; color:#888; white-space:nowrap; }
.drate-del { cursor:pointer; color:#ccc; font-size:14px; padding:0 3px; }
.drate-del:hover { color:#A21F2D; }
.drate-edit { cursor:pointer; color:#ccc; font-size:14px; padding:0 3px; }
.drate-edit:hover { color:#A21F2D; }
.drate-save { cursor:pointer; color:#A21F2D; font-size:14px; padding:0 3px; }
.drate-save:hover { color:#C49958; }
.drate-row.dr-editing { background:#fff8e1; gap:3px; flex-wrap:wrap; padding:5px 8px; }
.drate-row.dr-editing .de-sel { padding:2px 3px; border:1px solid #A21F2D; border-radius:3px; font-size:10px; outline:none; background:#fff; }
.drate-row.dr-editing .de-num { padding:2px 4px; border:1px solid #A21F2D; border-radius:3px; font-size:10px; width:55px; text-align:right; outline:none; }
/* Section divider */
.dsect { margin:0; }
.dsect-hdr { font-size:11px; font-weight:600; padding:3px 10px; background:#fafbfc; border-bottom:1px solid #f0f0f0; color:#555; }
.rate-item { display:flex; align-items:center; padding:5px 0; border-bottom:1px solid #f5f5f5; gap:5px; }
.rate-item .rn { flex:1; font-size: 13px; }
.rate-item .rf { font-size: 12px; color:#A21F2D; font-weight:600; white-space:nowrap; }
.rate-item .rt { font-size: 11px; color:#888; }
.rate-item .rd { cursor:pointer; color:#ccc; font-size:13px; padding:0 3px; }
.rate-item .rd:hover { color:#A21F2D; }
.direct-empty { text-align:center; padding:40px 20px; color:#bbb; font-size:14px; }
.tb-btn { cursor:pointer; font-size:12px; color:#C49958; padding:2px 8px; border-radius:3px; white-space:nowrap; }
.tb-btn:hover { background:rgba(196,153,88,.1); }
.dhist { position:absolute; top:0; left:0; right:0; bottom:0; background:#fff; z-index:5; overflow-y:auto; padding:10px 14px; }
.dhist-hdr { font-size:13px; font-weight:600; color:#A21F2D; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.dhist-back { cursor:pointer; font-size:12px; color:#888; }
.dhist-back:hover { color:#A21F2D; }
.dhist-item { padding:6px 8px; border-bottom:1px solid #f0f0f0; font-size:11px; line-height:1.5; }
.dhist-item:last-child { border-bottom:none; }
.dhist-action { display:inline-block; font-size:10px; padding:1px 5px; border-radius:3px; margin-right:4px; font-weight:600; }
.dhist-create { background:#e8f5e9; color:#2e7d32; }
.dhist-update { background:#fff3e0; color:#e65100; }
.dhist-delete { background:#ffebee; color:#c62828; }
.dhist-empty { text-align:center; padding:40px; color:#bbb; font-size:13px; }
/* QE Bar */
.qe-bar { padding:6px 12px; border-bottom:1px solid #e4e6eb; background:#f8f9fb; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.qe-bar select,.qe-bar input { padding:4px 7px; border:1px solid #d0d5dd; border-radius:3px; font-size:12px; outline:none; background:#fff; }
.qe-bar select:focus,.qe-bar input:focus { border-color:#A21F2D; }
.qe-bar .qe-btn { padding:4px 13px; background:#A21F2D; color:#fff; border:none; border-radius:3px; cursor:pointer; font-size:12px; font-weight:600; }
.qe-bar .qe-btn:hover { background:#8a1a26; }
.qe-bar .qe-label { font-size:12px; color:#888; white-space:nowrap; }
.qe-bar input[type=number] { width:52px; }
.dhint { padding:6px 12px; background:#fff9e6; border-bottom:1px solid #ffeeba; font-size:12px; color:#856404; display:flex; align-items:center; gap:6px; }
.ccy-tag { display:inline-block; padding:1px 5px; border-radius:2px; font-size:11px; font-weight:600; background:#eef; color:#55a; }

/* ===== Supplier Modal ===== */
.sm-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.sm-hdr h2 { font-size:17px; color:#A21F2D; }
.sm-body { display:flex; gap:16px; min-height:360px; }
.sm-side { width:200px; flex-shrink:0; border-right:1px solid #eee; padding-right:12px; }
.sm-side .sml { list-style:none; }
.sm-side .sml li { padding:6px 8px; cursor:pointer; border-radius:4px; font-size:12px; }
.sm-side .sml li:hover { background:#f5f5ff; }
.sm-side .sml li.active { background:#fff0f0; color:#A21F2D; font-weight:600; }
.sm-main { flex:1; overflow-y:auto; }
.sm-field { margin-bottom:8px; }
.sm-field label { font-size:11px; color:#888; display:block; margin-bottom:2px; }
.sm-field input, .sm-field select { width:100%; padding:5px 8px; border:1px solid #d0d5dd; border-radius:4px; font-size:12px; outline:none; }
.sm-field input:focus, .sm-field select:focus { border-color:#A21F2D; }
.sm-acts { margin-top:12px; display:flex; gap:6px; }
.sm-acts button { padding:5px 16px; border-radius:4px; cursor:pointer; font-size:12px; }
.sm-acts .ps { background:#A21F2D; color:#fff; border:none; }
.sm-acts .ps:hover { background:#8a1a26; }
.sm-acts .ps2 { background:#fff; color:#A21F2D; border:1px solid #A21F2D; }
.sm-acts .ps2:hover { background:#fff5f5; }
.sm-acts .pd { background:#fff; color:#999; border:1px solid #ddd; }
.sm-acts .pd:hover { color:#A21F2D; border-color:#A21F2D; }
.combo-item { padding:5px 8px; cursor:pointer; font-size:12px; border-bottom:1px solid #f0f0f0; transition:background .1s; }
.combo-item:hover { background:#fff0f0; }
.combo-item.sel { background:#fff0f0; font-weight:600; color:#A21F2D; }
.combo-item .c-en { font-size:10px; color:#999; margin-left:3px; }
/* Customer Selector */
.cu-bar { display:flex; align-items:center; gap:6px; padding:3px 12px; background:#fafbfc; border-bottom:1px solid #e4e6eb; font-size:12px; }
.cu-bar .cu-lbl { font-size:11px; color:#888; white-space:nowrap; }
.cu-wrap { position:relative; flex:1; }
.cu-wrap input { width:100%; padding:3px 8px; border:1px solid #d0d5dd; border-radius:4px; font-size:12px; outline:none; background:#fff; }
.cu-wrap input:focus { border-color:#A21F2D; }
.cu-dd { display:none; position:absolute; top:100%; left:0; right:0; max-height:180px; overflow-y:auto; border:1px solid #d0d5dd; border-radius:4px; background:#fff; z-index:999; box-shadow:0 4px 12px rgba(0,0,0,.12); }

/* ===== Report ===== */
.rpt { font-size:13px; line-height:1.9; }
.rpt-hdr { text-align:center; padding-bottom:20px; border-bottom:2px solid #A21F2D; margin-bottom:18px; }
.rpt-hdr h1 { font-size:18px; color:#A21F2D; margin-bottom:6px; }
.rpt-hdr .s { font-size:10px; color:#999; }
.rpt-customer { background:#fff5f5; border:1px solid #ffd7d7; border-radius:6px; padding:8px 14px; margin-bottom:12px; text-align:center; font-size:14px; color:#A21F2D; font-weight:600; }
.rpt-customer .l { font-weight:400; font-size:11px; color:#999; }
.rpt-meta { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:14px; font-size:11px; color:#555; }
.rpt-tbl { width:100%; border-collapse:collapse; margin:12px 0; }
.rpt-tbl th { background:#A21F2D; color:#fff; padding:9px 12px; text-align:left; font-size:11px; }
.rpt-tbl td { padding:8px 12px; border-bottom:1px solid #eee; font-size:12px; }
.rpt-tbl .n { text-align:right; font-family:Menlo,Consolas,monospace; }
.rpt-sum { margin-top:14px; padding:16px 20px; background:#fff5f5; border-radius:8px; border:1px solid #ffd7d7; }
.rpt-sum .r { display:flex; justify-content:space-between; padding:6px 0; }
.rpt-sum .l { color:#555; font-size:12px; }
.rpt-sum .v { font-weight:700; color:#222; font-size:13px; }
.rpt-sum .g { font-size:18px; color:#A21F2D; font-weight:800; }
.rpt-note { margin-top:12px; padding:10px 16px; background:#f9f9f9; border-radius:5px; font-size:11px; color:#555; line-height:1.8; }
.rpt-acts { display:flex; gap:6px; justify-content:center; margin-top:12px; }
.rpt-acts button { padding:5px 16px; border:1px solid #A21F2D; border-radius:4px; cursor:pointer; font-size:12px; font-weight:500; }
.btp { background:#A21F2D; color:#fff; }
.btp:hover { background:#8a1a26; }
.btc { background:#fff; color:#A21F2D; }
.btc:hover { background:#fff5f5; }

/* ===== Toast & Modal ===== */
.toast { position:fixed; top:12px; right:12px; padding:8px 16px; background:#333; color:#fff; border-radius:5px; font-size:12px; z-index:9999; opacity:0; transform:translateY(-12px); transition:all .25s; pointer-events:none; }
.toast.show { opacity:1; transform:translateY(0); }
.mo { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.45); z-index:5000; justify-content:center; align-items:center; }
.mo.show { display:flex; }
.mo-in { background:#fff; border-radius:10px; width:92%; max-width:800px; max-height:85vh; overflow-y:auto; padding:24px 28px; position:relative; box-shadow:0 16px 48px rgba(0,0,0,.25); }
.mo-x { position:absolute; top:10px; right:10px; width:26px; height:26px; border:none; background:#f5f5f5; border-radius:50%; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; color:#666; }
.mo-x:hover { background:#eee; color:#A21F2D; }

/* ===== History Panel ===== */

/* ===== User Form Modal ===== */
.uf-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.35); z-index:2000; align-items:center; justify-content:center; }
.uf-overlay.show { display:flex; }
.uf-box { background:#fff; border-radius:8px; width:360px; max-width:92vw; box-shadow:0 8px 30px rgba(0,0,0,.15); padding:20px; }
.uf-box h3 { font-size:15px; color:#A21F2D; margin:0 0 14px; }
.uf-field { margin-bottom:12px; }
.uf-field label { display:block; font-size:12px; color:#666; margin-bottom:3px; }
.uf-field input,.uf-field select { width:100%; padding:8px 11px; border:1px solid #d0d5dd; border-radius:4px; font-size:14px; outline:none; box-sizing:border-box; }
.uf-field input:focus,.uf-field select:focus { border-color:#A21F2D; }
.uf-field .pw-wrap { position:relative; }
.uf-field .pw-wrap input { padding-right:40px; }
.uf-field .pw-wrap .pw-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:16px; padding:4px; line-height:1; color:#999; }
.uf-field .pw-wrap .pw-toggle:hover { color:#A21F2D; }
.uf-acts { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.uf-acts button { padding:7px 18px; border-radius:4px; font-size:12px; cursor:pointer; border:1px solid #d0d5dd; background:#fff; }
.uf-acts .uf-save { background:#A21F2D; color:#fff; border-color:#A21F2D; }
.uf-acts .uf-save:hover { background:#8a1924; }

/* ===== 供应商费用历史 Modal ===== */
.rh-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.45); z-index:2000; align-items:center; justify-content:center; }
.rh-overlay.show { display:flex; }
.rh-box { background:#fff; border-radius:10px; width:820px; max-width:94vw; max-height:92vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 12px 48px rgba(0,0,0,.2); }
.rh-head { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid #e4e6eb; }
.rh-head h2 { font-size:17px; color:#A21F2D; }
.rh-close { border:none; background:none; color:#999; font-size:20px; cursor:pointer; padding:4px 8px; border-radius:4px; }
.rh-close:hover { background:#f0f0f0; color:#A21F2D; }
.rh-tabs { display:flex; border-bottom:1px solid #ddd; background:#f5f5f5; padding:0 14px; gap:0; }
.rh-tab { padding:10px 18px; font-size:13px; cursor:pointer; border:none; background:none; color:#777; border-bottom:2px solid transparent; transition:all .12s; }
.rh-tab:hover { color:#A21F2D; background:#fff0f0; }
.rh-tab.active { color:#A21F2D; border-bottom-color:#A21F2D; font-weight:600; background:#fff; }
.rh-panel { flex:1; overflow-y:auto; padding:16px 20px; }
.rh-panel-hd, .rh-global-ctrl, .rh-comp-ctrl { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; align-items:flex-end; }
.rh-sel-row { display:flex; align-items:center; gap:6px; }
.rh-sel-row label { font-size:12px; color:#555; white-space:nowrap; }
.rh-sel-row select, .rh-sel-row input[type=text] { padding:6px 10px; border:1px solid #d0d5dd; border-radius:4px; font-size:13px; outline:none; min-width:130px; }
.rh-sel-row select:focus, .rh-sel-row input:focus { border-color:#A21F2D; }
.rh-sel-stretch { flex:1; }
.rh-sel-stretch input { width:100%; min-width:auto; }
.rh-chart-wrap { background:#fafbfc; border-radius:6px; border:1px solid #e4e6eb; padding:12px; margin-bottom:10px; }
.rh-chart-empty { text-align:center; padding:40px 20px; color:#bbb; font-size:13px; }
.rh-timeline-wrap { margin-top:8px; }
.rh-tl-item { display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border-radius:4px; margin-bottom:3px; font-size:12px; }
.rh-tl-item:hover { background:#f8f9fb; }
.rh-tl-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.rh-tl-dot.create { background:#2EBB59; }
.rh-tl-dot.update { background:#FA8C16; }
.rh-tl-dot.delete { background:#E8522D; }
.rh-tl-body { flex:1; min-width:0; }
.rh-tl-body .tl-main { display:flex; justify-content:space-between; gap:6px; }
.rh-tl-body .tl-action { font-weight:600; }
.rh-tl-body .tl-action.create { color:#2EBB59; }
.rh-tl-body .tl-action.update { color:#FA8C16; }
.rh-tl-body .tl-action.delete { color:#E8522D; }
.rh-tl-body .tl-detail { color:#555; }
.rh-tl-body .tl-detail .old { color:#999; text-decoration:line-through; margin-right:4px; }
.rh-tl-body .tl-detail .new { color:#A21F2D; font-weight:600; }
.rh-tl-body .tl-who { color:#aaa; font-size:11px; margin-top:1px; }
.rh-global-list { }
.rh-global-item { padding:8px 12px; border:1px solid #eee; border-radius:5px; margin-bottom:5px; font-size:12px; display:flex; justify-content:space-between; align-items:center; }
.rh-global-item:hover { border-color:#ddd; }
.rh-global-item .gi-left { flex:1; min-width:0; }
.rh-global-item .gi-left .gi-sup { font-weight:600; }
.rh-global-item .gi-left .gi-det { color:#666; margin:2px 0; }
.rh-global-item .gi-left .gi-who { color:#aaa; font-size:11px; }
.rh-global-item .gi-right { text-align:right; flex-shrink:0; margin-left:10px; }
.rh-hint { text-align:center; padding:30px; color:#bbb; font-size:13px; }
.rh-comp-sup-list { display:flex; flex-wrap:wrap; gap:6px; }
.rh-comp-sup-item { padding:5px 12px; border:1px solid #d0d5dd; border-radius:14px; font-size:12px; cursor:pointer; transition:all .12s; user-select:none; }
.rh-comp-sup-item:hover { border-color:#A21F2D; }
.rh-comp-sup-item.selected { background:#A21F2D; color:#fff; border-color:#A21F2D; }
.rh-comp-table-wrap { overflow-x:auto; }
.rh-comp-table { width:100%; border-collapse:collapse; font-size:13px; }
.rh-comp-table th { background:#f5f5f5; padding:8px 12px; text-align:left; font-weight:600; color:#555; border:1px solid #e4e6eb; white-space:nowrap; }
.rh-comp-table td { padding:7px 12px; border:1px solid #e4e6eb; }
.rh-comp-table .sup-header { background:#A21F2D; color:#fff; font-weight:600; text-align:center; }
.rh-comp-table .fee-type { font-weight:600; color:#555; white-space:nowrap; }
.rh-comp-table .fee-item { }
.rh-comp-table .no-data { color:#bbb; text-align:center; }

.history-panel { position:fixed; top:50px; right:0; width:340px; height:calc(100vh - 50px); background:#fff; box-shadow:-3px 0 20px rgba(0,0,0,.1); z-index:800; transform:translateX(100%); transition:transform .25s; overflow:hidden; display:flex; flex-direction:column; }
.history-panel.open { transform:translateX(0); }
.hist-hdr { padding:12px 16px; border-bottom:1px solid #e4e6eb; display:flex; justify-content:space-between; align-items:center; }
.hist-hdr .t { font-size:14px; font-weight:600; }
.hist-hdr .cl { border:none; background:none; color:#999; cursor:pointer; font-size:18px; }
.hist-hdr .cl:hover { color:#A21F2D; }
.hist-list { flex:1; overflow-y:auto; padding:6px 14px; }
.hist-item { padding:8px 12px; border:1px solid #eee; border-radius:6px; margin-bottom:6px; cursor:pointer; transition:all .12s; }
.hist-item:hover { border-color:#A21F2D; }
.hist-item .h1 { display:flex; justify-content:space-between; font-size:13px; margin-bottom:2px; color:#222; }
.hist-item .h1 .n { font-weight:600; }
.hist-item .h1 .d { color:#999; font-size:11px; }
.hist-item .h2 { font-size:12px; color:#666; display:flex; justify-content:space-between; }
.hist-item .h2 .amt { color:#A21F2D; font-weight:700; }
.hist-item .del { color:#ccc; cursor:pointer; font-size:11px; margin-left:6px; }
.hist-item .del:hover { color:#A21F2D; }
.hist-empty { text-align:center; padding:30px; color:#bbb; font-size:12px; }

/* ===== Admin Panel ===== */
.admin-panel { display:none; position:fixed; top:50px; left:0; width:100%; height:calc(100vh - 50px); background:#fff; z-index:700; overflow:hidden; display:none; flex-direction:column; }
.admin-panel.open { display:flex; }
.admin-hdr { padding:12px 20px; border-bottom:1px solid #e4e6eb; display:flex; justify-content:space-between; align-items:center; background:#fafbfc; }
.admin-hdr .t { font-size:16px; font-weight:600; color:#A21F2D; }
.admin-hdr .cl { border:none; background:none; color:#999; cursor:pointer; font-size:18px; }
.admin-hdr .cl:hover { color:#A21F2D; }
.admin-tabs { display:flex; border-bottom:1px solid #ddd; background:#f5f5f5; padding:0 10px; }
.admin-tab { padding:8px 16px; font-size:12px; cursor:pointer; border:none; background:none; color:#666; border-bottom:2px solid transparent; }
.admin-tab:hover { color:#A21F2D; background:#fff0f0; }
.admin-tab.active { color:#A21F2D; border-bottom-color:#A21F2D; font-weight:600; background:#fff; }
.admin-body { flex:1; overflow-y:auto; padding:16px 20px; }
.admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th { background:#f5f5f5; padding:8px 10px; text-align:left; font-weight:600; color:#555; border-bottom:1px solid #ddd; }
.admin-table td { padding:7px 10px; border-bottom:1px solid #eee; }
.admin-table .role-badge { display:inline-block; padding:2px 9px; border-radius:3px; font-size:11px; font-weight:600; }
.role-admin { background:#ffebee; color:#c62828; }
.role-editor { background:#e3f2fd; color:#1565c0; }
.role-viewer { background:#f3e5f5; color:#7b1fa2; }
.role-subadmin { background:#fff3e0; color:#e65100; }
.role-member { background:#e8f5e9; color:#2e7d32; }
.role-regional { background:#e3f2fd; color:#1565c0; }
/* Audit log styles */
.audit-filter { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; align-items:center; }
.audit-filter select,.audit-filter input { padding:6px 9px; border:1px solid #d0d5dd; border-radius:4px; font-size:12px; outline:none; background:#f8f9fb; }
.audit-filter select:focus,.audit-filter input:focus { border-color:#A21F2D; }
.audit-filter button { padding:6px 16px; border:1px solid #A21F2D; border-radius:4px; font-size:12px; cursor:pointer; background:#A21F2D; color:#fff; font-weight:600; }
.audit-filter button:hover { background:#8a1a26; }
.audit-badge { display:inline-block; padding:2px 7px; border-radius:3px; font-size:10px; font-weight:600; white-space:nowrap; }
.audit-badge.login { background:#e8f5e9; color:#2e7d32; }
.audit-badge.logout { background:#f3e5f5; color:#7b1fa2; }
.audit-badge.config_update { background:#e3f2fd; color:#1565c0; }
.audit-badge.supplier_create,.audit-badge.supplier_update { background:#e8f5e9; color:#2e7d32; }
.audit-badge.supplier_delete,.audit-badge.rate_delete,.audit-badge.quote_delete,.audit-badge.user_delete,.audit-badge.rate_history_delete { background:#ffebee; color:#c62828; }
.audit-badge.rate_create,.audit-badge.rate_update { background:#fff3e0; color:#e65100; }
.audit-badge.user_create,.audit-badge.user_update { background:#e3f2fd; color:#1565c0; }
.audit-badge.quote_save { background:#fce4ec; color:#880e4f; }
.audit-badge.country_update { background:#e0f7fa; color:#00695c; }
.audit-badge.rate_history_clear { background:#ffebee; color:#b71c1c; }
.audit-badge.system_init { background:#f5f5f5; color:#555; }
.audit-detail { max-width:400px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; font-size:12px; color:#555; }
.audit-detail:hover { color:#A21F2D; }
.audit-detail.exp { white-space:normal; word-break:break-all; max-width:600px; background:#fafbfc; padding:4px 8px; border-radius:3px; }
.audit-pager { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px; }
.audit-pager button { padding:4px 12px; border:1px solid #d0d5dd; border-radius:4px; cursor:pointer; font-size:12px; background:#fff; color:#444; }
.audit-pager button:hover { border-color:#A21F2D; color:#A21F2D; }
.audit-pager button:disabled { opacity:.4; cursor:default; }
.audit-pager .info { color:#888; }
.audit-count { font-size:13px; color:#888; margin-bottom:10px; }
.role-territory { background:#fce4ec; color:#c62828; }
.role-nonmember { background:#f5f5f5; color:#999; }
.adm-btn { padding:4px 12px; border:1px solid #ddd; border-radius:3px; cursor:pointer; font-size:12px; background:#fff; color:#444; }
.adm-btn:hover { border-color:#A21F2D; color:#A21F2D; }
.adm-input { padding:5px 9px; border:1px solid #d0d5dd; border-radius:4px; font-size:13px; outline:none; }
.adm-input:focus { border-color:#A21F2D; }
.adm-pg { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12px; }

/* ===== Responsive (Expanded for Mobile) ===== */
/* Tablet / small desktop */
@media (max-width:1100px){
  .config-bar{gap:6px 10px}
  .config-label{font-size:12px}
  .config-input{width:36px}
  .config-input.wide{width:48px}
  .config-btn{padding:4px 10px;font-size:12px}
  .config-divider{height:18px}
  .hm-label{font-size:11px;padding:2px 6px}
}

/* ===== PHONE MODE v2: optimized for quick quoting ===== */
/* === Intermediate resolution (laptops, smaller desktops) === */
@media (max-width:1100px){
  /* Wider right panel to fit the 2-column layout */
  .right-panel{width:460px!important}
  /* Shrink country list panel */
  .md-left{width:170px!important}
  /* Allow rate rows to wrap */
  .drate-row{flex-wrap:wrap;gap:3px;font-size:12px;padding:4px 6px}
  .drate-type{flex:0 0 100%;font-size:11px}
  .drate-amt{font-size:11px}
  .drate-model{font-size:10px}
  /* Rate cards tighter */
  .dcard-hdr{padding:5px 8px;gap:3px}
  .dcard-name{font-size:12px}
  .dcard-total{font-size:11px}
  .dgroup-hdr{padding:5px 10px;gap:5px;font-size:12px}
  .dgroup-name{font-size:12px}
  .dgroup-total{font-size:12px}
  .dgroup-body .drate-row:last-child{border-bottom:none}
}

@media (max-width:768px){
  /* --- LAYOUT: single column, no split --- */
  .app-layout{flex-direction:column;height:auto;min-height:calc(100vh - 92px)}
  .left-panel{border-right:none;border-bottom:1px solid #e4e6eb;flex:1;max-height:none;overflow-y:visible}
  .right-panel{width:100%;max-height:none;flex:0 0 auto}

  /* --- HEADER --- */
  .header{padding:0 10px;height:44px}
  .header-logo{font-size:14px}
  .header-sub{font-size:11px}
  .header-btn{padding:6px 10px;font-size:11px;min-height:40px}
  .header-user{font-size:11px;margin-right:4px}
  .header-role{font-size:11px;padding:1px 5px}
  /* Hide management and rate-history buttons on mobile; keep 报价记录 + 退出 */
  #adminBtn{display:none!important}
  .header-right button:nth-of-type(3){display:none!important} /* 供应商费用历史 */

  /* --- CONFIG BAR: mode + classes only, rest hidden --- */
  .config-bar{padding:8px 10px;gap:6px 10px;overflow-x:auto;flex-wrap:wrap}
  .config-label{font-size:12px}
  .config-input{width:44px;font-size:14px;padding:6px 4px}
  .config-input.wide{width:52px}
  .config-btn{padding:7px 12px;font-size:12px;min-height:40px}
  .config-divider{height:16px}
  /* Hide rate/coefficient/service-fee groups on mobile (keep first 4 groups) */
  .config-group:nth-child(n+5){display:none}
  /* Show a "more config" toggle hint — JS adds .config-expanded to show all */

  /* --- MODE BAR --- */
  .mode-bar{padding:0 8px;height:38px;overflow-x:auto}
  .header-mode .hm-btn{font-size:11px;padding:4px 8px;min-height:32px}
  .hm-label{font-size:11px;padding:2px 6px}
  .hm-divider{height:14px;margin:0 4px}

  /* --- QUICK BUTTONS: scrollable row, compact --- */
  .quick-bar{padding:6px 10px;gap:4px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .quick-label{font-size:11px;margin-right:4px}
  .quick-btn{padding:6px 12px;font-size:11px;min-height:40px;white-space:nowrap;flex-shrink:0}

  /* --- REGION TABS: scrollable, larger touch targets --- */
  .region-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 6px}
  .region-tab{padding:8px 14px;font-size:12px;min-height:40px;white-space:nowrap;flex-shrink:0}

  /* --- LEFT PANEL: country list --- */
  .country-group-title{padding:6px 12px;font-size:12px}
  .country-item{padding:9px 12px;min-height:44px;gap:6px}
  .country-item .cb{width:20px;height:20px}
  .country-item .nm{font-size:14px}
  .country-item .fh{font-size:12px}
  .country-item .badge{font-size:11px;padding:2px 6px}
  .country-item .wipobadge{font-size:11px;padding:1px 6px}
  .country-item .of-bdg{font-size:11px;padding:1px 5px}
  .search-bar{padding:6px 10px}
  .search-bar input{padding:10px 10px 10px 34px;font-size:15px}
  .search-bar .icon{left:18px;font-size:13px}

  /* --- RIGHT PANEL: selected countries --- */
  .sel-hdr{padding:8px 12px}
  .sel-hdr .t{font-size:13px}
  .sel-hdr .c{font-size:16px}
  .sel-hdr .clr{padding:6px 12px;font-size:11px;min-height:36px}
  .sel-src{padding:4px 12px}
  .sel-src input{padding:6px 10px;font-size:12px}
  .sel-list{padding:4px 12px}
  .sel-item{padding:8px 0;min-height:44px;gap:8px}
  .sel-item .nm{font-size:13px}
  .sel-item .fe{font-size:13px}
  .sel-item .sfee{font-size:11px}
  .sel-item .wipobadge{font-size:11px;padding:1px 6px}
  .sel-item .rm{width:24px;height:24px;font-size:16px}
  .inc-inp{width:34px;font-size:13px;height:26px}
  .inc-ctrl button{width:32px;height:32px;font-size:16px}

  /* --- QUOTE BAR: sticky bottom --- */
  .quote-bar{padding:10px 12px;position:sticky;bottom:0;z-index:10;background:#fafbfc;border-top:2px solid #e4e6eb;box-shadow:0 -2px 8px rgba(0,0,0,.06)}
  .qi-btn{padding:10px 24px;font-size:14px;min-height:44px}
  .quote-summary{gap:8px;padding:6px 0}
  .qi .l{font-size:11px}
  .qi .v{font-size:16px}
  .qi .sv{font-size:12px}

  /* --- CUSTOMER SELECTOR --- */
  .cu-bar{padding:6px 10px;gap:6px}
  .cu-lbl{font-size:12px}
  .cu-wrap input{padding:6px 10px;font-size:12px;min-height:40px}

  /* --- DIRECT MODE (mobile): view rates + quote, hide data entry --- */
  /* Show main detail area */
  .direct-main{display:flex!important;flex-direction:column;flex:1;overflow-y:auto}
  /* Hide data-entry elements only */
  .qe-bar,.dhint,
  .dgroup-add,.dgroup-add-item,
  .drate-edit,.drate-del,.btn-icon-sm{display:none!important}
  /* Master-detail: stacked on mobile */
  .md-layout{flex-direction:column}
  .md-left{width:100%!important;max-height:160px;overflow-y:auto;border-right:none!important;border-bottom:1px solid #e4e6eb}
  .md-right{flex:1;overflow-y:auto}
  .md-ci{padding:8px 12px;min-height:40px}
  .md-ci .md-cn{font-size:13px}
  .md-ci .md-cm{font-size:11px}
  .md-ci .md-ct{font-size:12px}
  .md-search input{font-size:13px;padding:6px 10px;min-height:38px}
  /* Rate cards: expand on mobile */
  .dcard-hdr{padding:8px 12px;min-height:40px}
  .dcard-name{font-size:14px}
  .dcard-total{font-size:13px}
  .dgroup-hdr{padding:6px 10px;min-height:36px}
  .dgroup-name{font-size:13px}
  .dgroup-total{font-size:12px}
  /* Mobile notice (hide in non-direct modes) */
  .mobile-notice{display:none!important}

  /* --- REPORT / PRINT --- */
  .rpt-tbl th,.rpt-tbl td{font-size:11px;padding:5px 8px}
  .rpt-sum{padding:10px 12px}
  .rpt-sum .g{font-size:18px}
  .rpt-acts button{padding:6px 12px;font-size:11px;min-height:40px}

  /* --- HISTORY PANEL --- */
  .history-panel{width:100%}

  /* --- ADMIN PANEL --- */
  .admin-hdr{padding:10px 12px}
  .admin-body{padding:10px 12px}
  .admin-table td{padding:6px 8px;font-size:12px}

  /* --- PUBLIC CALC --- */
  .pc-country-grid{grid-template-columns:1fr;max-height:380px}
  .pc-ci{padding:10px 12px;font-size:14px;min-height:46px}
  .pc-ci .pc-ck{width:20px;height:20px}

  /* Toast */
  .toast{font-size:12px;padding:10px 20px}

  /* --- MOBILE NOTICE for data-entry areas --- */
  .mobile-notice{display:flex!important;align-items:center;justify-content:center;
    padding:20px 16px;text-align:center;color:#999;font-size:13px;
    background:#fafbfc;border-radius:8px;margin:8px;
    border:1px dashed #d0d5dd;min-height:80px}
  .mobile-notice .mn-icon{font-size:24px;margin-right:8px}
}

/* Small phones: maintain 11px floor, scale touch targets */
@media (max-width:500px){
  .header{padding:0 6px;height:42px}
  .header-logo{font-size:13px}
  .header-sub{font-size:11px}
  .header-btn{padding:5px 8px;font-size:11px;min-height:36px}
  .config-bar{padding:6px 8px;gap:4px 6px}
  .config-label{font-size:11px}
  .config-input{width:36px;font-size:13px;padding:5px 3px}
  .config-input.wide{width:44px}
  .config-btn{padding:6px 10px;font-size:11px;min-height:36px}
  .quick-btn{padding:5px 10px;font-size:11px;min-height:36px}
  .region-tab{padding:7px 12px;font-size:11px}
  .country-item{padding:8px 10px;min-height:40px}
  .country-item .nm{font-size:13px}
  .country-item .fh{font-size:11px}
  .country-item .badge{font-size:11px}
  .country-item .wipobadge{font-size:11px}
  .country-group-title{padding:4px 12px;font-size:11px}
  .sel-hdr{padding:8px 10px}
  .sel-hdr .t{font-size:12px}
  .sel-list{padding:3px 10px}
  .sel-item{padding:7px 0;min-height:40px}
  .sel-item .nm{font-size:12px}
  .sel-item .fe{font-size:12px}
  .sel-item .sfee{font-size:11px}
  .inc-inp{width:30px;font-size:12px}
  .inc-ctrl button{width:28px;height:28px;font-size:14px}
  .sel-item .wipobadge{font-size:11px;padding:1px 5px}
  .sel-src{padding:3px 10px}
  .sel-src input{font-size:12px;padding:5px 8px}
  .rpt-hdr h1{font-size:15px}
  .rpt-meta{font-size:11px;gap:8px}
  .rpt-tbl th,.rpt-tbl td{font-size:11px;padding:4px 6px}
  .rpt-sum .g{font-size:16px}
  .rpt-acts button{padding:5px 10px;font-size:11px;min-height:36px}
  .login-card{padding:20px 16px;width:92%}
  .login-card h1{font-size:17px}
  .toast{font-size:11px}
  .qi-btn{padding:9px 20px;font-size:13px;min-height:40px}
  .qi .v{font-size:14px}
}

/* Tiny phones: keep 11px floor, compress spacing */
@media (max-width:380px){
  .header{padding:0 4px;height:40px}
  .header-logo{font-size:12px}
  .header-btn{padding:4px 6px;font-size:11px;min-height:32px}
  .header-user{font-size:11px}
  .quick-btn{font-size:11px;padding:4px 8px;min-height:32px}
  .region-tab{font-size:11px;padding:6px 10px}
  .hm-btn{font-size:11px;padding:3px 6px}
  .hm-label{font-size:11px;padding:1px 4px}
  .hm-divider{height:12px;margin:0 2px}
  .config-input{width:32px;font-size:13px}
  .config-input.wide{width:40px}
  .config-btn{font-size:11px;padding:5px 8px;min-height:32px}
  .mode-bar{height:34px}
  .login-card .entry-grid{grid-template-columns:1fr}
}