:root {
  --orange: #FF6B2B;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --bg: #f5f5f7;
  --card: #fff;
  --border: #e5e5e5;
  --error: #d32f2f;
  --success: #2e7d32;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang HK", sans-serif;
       background: var(--bg); color: var(--text); }
header { background: #222; color: #fff; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; }
header h1 { margin: 0; font-size: 17px; }
header .user { font-size: 13px; opacity: 0.85; }
main { padding: 16px; max-width: 1200px; margin: 0 auto; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 14px; }
.tab { padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; font-weight: 500; }
.tab.active { border-color: var(--orange); color: var(--orange); }
.row { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.row:hover { background: #fafafa; }
.row .col { flex: 1; }
.row .amount { font-weight: 700; color: var(--orange); min-width: 80px; }
.row .actions { min-width: 110px; text-align: right; }
.row .meta { font-size: 12px; color: var(--muted); }
.row .invoice { font-weight: 600; }
.row.expanded .details { display: block; }
.details { display: none; padding: 12px; background: #fafafa; border-radius: 6px; margin-top: 8px; font-size: 13px; }
.details dt { color: var(--muted); float: left; clear: both; width: 100px; }
.details dd { margin: 0 0 4px 120px; }
button.action { padding: 6px 14px; background: var(--orange); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
button.action:hover { background: #E55A1F; }
button.action.done { background: var(--success); }
button.action:disabled { background: #ccc; }
button.secondary { padding: 6px 14px; background: #fff; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.error { color: var(--error); font-size: 13px; }
.success { color: var(--success); font-size: 13px; }
input { padding: 9px 11px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }
button.primary { background: var(--orange); color: #fff; border: none; padding: 10px 18px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.center { text-align: center; padding: 40px 0; color: var(--muted); }
.stats { display: flex; gap: 12px; margin-bottom: 14px; }
.stat { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px; text-align: center; }
.stat .v { font-size: 22px; font-weight: 700; color: var(--orange); }
.stat .l { font-size: 12px; color: var(--muted); }
.copy-row { display: flex; gap: 8px; margin-top: 8px; }
.copy-row input { flex: 1; }
@media (max-width: 600px) {
  .row { flex-wrap: wrap; }
  .row .actions { min-width: auto; width: 100%; text-align: left; margin-top: 8px; }
  .details dt { float: none; width: auto; }
  .details dd { margin-left: 0; margin-bottom: 8px; }
}