:root {
  --brand: #6c5ce7;
  --brand-2: #8a7cf0;
  --brand-soft: #eeeafd;
  --ink: #1b1d29;
  --muted: #697386;
  --line: #e7e9ef;
  --surface: #ffffff;
  --canvas: #f5f6fa;
  --night: #17152a;
  --night-2: #222039;
  --night-3: #2d2947;
  --accent: #ffb454;
  --success: #2dbe8c;
  --danger: #eb5a68;
  --info: #3d8bff;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 12px 32px rgba(28, 28, 48, .10);
  --font: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.btn { min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 16px; background: var(--surface); color: var(--ink); font-weight: 600; }
.btn.primary { border-color: var(--brand); background: var(--brand); color: #fff; }
.btn.ghost { background: transparent; }
.btn.danger { border-color: #ffd5d9; background: #fff2f3; color: var(--danger); }
.btn:disabled { cursor: not-allowed; opacity: .45; }
.tag { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; border-radius: 999px; padding: 3px 9px; font-size: 12px; background: var(--canvas); color: var(--muted); }
.tag.success { color: #167b59; background: #e6f8f1; }
.tag.warn { color: #996113; background: #fff3df; }
.tag.danger { color: #b73543; background: #fff0f2; }
.tag.info { color: #2768bd; background: #eaf3ff; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 2px 8px rgba(28,28,48,.03); }
.muted { color: var(--muted); }
.money { font-variant-numeric: tabular-nums; font-weight: 700; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); color: var(--ink); }
.annotation-dot { display: none; position: absolute; z-index: 20; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; background: var(--danger); color: #fff; font: 700 12px/20px var(--font); text-align: center; box-shadow: 0 3px 10px rgba(235,90,104,.35); }
.show-annotations .annotation-dot { display: block; }
.annotation-drawer { display: none; position: fixed; z-index: 100; top: 76px; right: 18px; width: min(320px, calc(100vw - 36px)); max-height: calc(100vh - 96px); overflow: auto; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.show-annotations .annotation-drawer { display: block; }
.annotation-drawer h3 { margin: 0 0 12px; }
.annotation-drawer ol { margin: 0; padding-left: 24px; }
.annotation-drawer li { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 28px; transform: translate(-50%, 20px); padding: 11px 16px; border-radius: 10px; background: #1f2230; color: #fff; opacity: 0; pointer-events: none; transition: .2s ease; box-shadow: var(--shadow); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 720px) { .annotation-drawer { top: 64px; right: 10px; } }