:root {
      --navy-950: #071d2c;
      --navy-900: #0b2638;
      --navy-800: #12384f;
      --blue-600: #246bfd;
      --blue-500: #3b7cff;
      --blue-100: #eaf1ff;
      --teal-600: #087f72;
      --teal-100: #e6f7f4;
      --amber-600: #b85e00;
      --amber-100: #fff2dd;
      --red-600: #cc3d4b;
      --red-100: #fff0f1;
      --ink-900: #13212b;
      --ink-700: #3c4c58;
      --ink-500: #6f7d87;
      --line: #dfe7ec;
      --line-soft: #edf1f4;
      --surface: #ffffff;
      --canvas: #f2f5f7;
      --shadow: 0 14px 35px rgba(25, 52, 70, .08);
      --radius-lg: 16px;
      --radius-md: 12px;
      --radius-sm: 9px;
    }

    * { box-sizing: border-box; }

    html, body { height: 100%; }

    body {
      margin: 0;
      color: var(--ink-900);
      background: var(--canvas);
      font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }

    .app {
      height: 100dvh;
      min-height: 640px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .topbar {
      height: 70px;
      flex: 0 0 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 26px;
      color: #fff;
      background:
        radial-gradient(circle at 72% -120%, rgba(61, 155, 255, .4), transparent 42%),
        linear-gradient(110deg, var(--navy-950), var(--navy-800));
      border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 13px;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      color: var(--navy-950);
      background: linear-gradient(145deg, #9cebe2, #52b8ff);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
      font-size: 20px;
      font-weight: 800;
    }

    .brand-copy h1 {
      margin: 0;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: .04em;
    }

    .brand-copy p {
      margin: 4px 0 0;
      color: rgba(255, 255, 255, .62);
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .today-task {
      display: flex;
      gap: 8px;
      padding-right: 16px;
      border-right: 1px solid rgba(255, 255, 255, .16);
      color: rgba(255, 255, 255, .7);
      font-size: 12px;
    }

    .today-task strong { color: #fff; font-size: 13px; }

    .agent-profile {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .avatar {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #dcecff;
      color: #214e72;
      font-weight: 700;
    }

    .agent-copy strong,
    .agent-copy span { display: block; }
    .agent-copy strong { font-size: 13px; }
    .agent-copy span { margin-top: 3px; color: rgba(255, 255, 255, .62); font-size: 11px; }

    .online-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      margin-right: 4px;
      border-radius: 50%;
      background: #55d6a8;
      box-shadow: 0 0 0 3px rgba(85, 214, 168, .14);
    }

    .workspace {
      width: 100%;
      max-width: 1680px;
      margin: 0 auto;
      padding: 18px;
      display: grid;
      grid-template-columns: minmax(320px, 34%) minmax(0, 1fr);
      gap: 18px;
      flex: 1;
      min-height: 0;
    }

    .panel {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
    }

    .debtor-panel {
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .debtor-hero {
      position: relative;
      padding: 22px 22px 19px;
      color: #fff;
      background: linear-gradient(135deg, #102f43, #174a62);
      overflow: hidden;
    }

    .debtor-hero::after {
      content: "";
      position: absolute;
      width: 190px;
      height: 190px;
      right: -82px;
      top: -108px;
      border-radius: 50%;
      border: 34px solid rgba(117, 218, 214, .12);
    }

    .case-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 17px;
      color: rgba(255, 255, 255, .62);
      font-size: 11px;
    }

    .priority {
      padding: 5px 8px;
      border-radius: 999px;
      color: #ffe7b5;
      background: rgba(255, 185, 81, .13);
      border: 1px solid rgba(255, 197, 106, .23);
      font-weight: 650;
    }

    .identity-row {
      display: flex;
      align-items: center;
      gap: 13px;
    }

    .identity-avatar {
      width: 50px;
      height: 50px;
      flex: 0 0 50px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: #13465a;
      background: linear-gradient(145deg, #d8fbf7, #8ddad4);
      font-size: 18px;
      font-weight: 800;
    }

    .identity-name h2 {
      margin: 0;
      font-size: 22px;
      letter-spacing: .03em;
    }

    .identity-name p {
      margin: 5px 0 0;
      color: rgba(255, 255, 255, .66);
      font-size: 12px;
    }

    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 16px;
    }

    .soft-tag {
      padding: 5px 8px;
      border-radius: 7px;
      color: #d4e9f2;
      background: rgba(255, 255, 255, .08);
      font-size: 11px;
    }

    .debtor-scroll {
      padding: 18px 20px 24px;
      overflow: auto;
      scrollbar-width: thin;
    }

    .section-block + .section-block {
      margin-top: 20px;
      padding-top: 19px;
      border-top: 1px solid var(--line-soft);
    }

    .section-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 13px;
    }

    .section-heading h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 750;
    }

    .section-heading a {
      color: var(--blue-600);
      font-size: 11px;
      text-decoration: none;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 18px;
    }

    .info-item span,
    .metric span,
    .plan-item span {
      display: block;
      margin-bottom: 5px;
      color: var(--ink-500);
      font-size: 11px;
    }

    .info-item strong { font-size: 13px; font-weight: 650; }

    .debt-summary {
      padding: 15px;
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, #f2f7ff, #f7fbff);
      border: 1px solid #dce8f8;
    }

    .debt-total {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .debt-total span { color: var(--ink-500); font-size: 11px; }
    .debt-total strong { display: block; margin-top: 4px; font-size: 25px; letter-spacing: -.02em; }

    .overdue-pill {
      padding: 6px 9px;
      border-radius: 8px;
      color: var(--red-600);
      background: var(--red-100);
      font-size: 11px;
      font-weight: 700;
    }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      padding-top: 13px;
      border-top: 1px solid #dbe7f3;
    }

    .metric + .metric { padding-left: 12px; border-left: 1px solid #dbe7f3; }
    .metric strong { font-size: 12px; }

    .plan-box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .plan-item {
      padding: 12px;
      border-radius: 10px;
      background: #f7f9fa;
      border: 1px solid var(--line-soft);
    }

    .plan-item strong { font-size: 13px; }

    .intent-meter {
      margin-top: 12px;
      padding: 12px;
      border-radius: 10px;
      color: #275248;
      background: var(--teal-100);
    }

    .intent-title { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; }
    .meter-track { height: 5px; margin-top: 9px; border-radius: 999px; background: rgba(8, 127, 114, .14); overflow: hidden; }
    .meter-track i { display: block; width: 68%; height: 100%; border-radius: inherit; background: var(--teal-600); }

    .timeline { display: grid; gap: 13px; }
    .timeline-item { position: relative; display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; align-items: start; }
    .timeline-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #75a2c0; box-shadow: 0 0 0 4px #eef4f7; }
    .timeline-item strong { display: block; font-size: 12px; }
    .timeline-item p { margin: 3px 0 0; color: var(--ink-500); font-size: 11px; line-height: 1.55; }
    .timeline-item time { color: #8d9aa3; font-size: 10px; white-space: nowrap; }

    .compliance-alert {
      display: flex;
      gap: 10px;
      padding: 12px;
      border-radius: 10px;
      color: #76501e;
      background: var(--amber-100);
      border: 1px solid #f4ddb7;
      font-size: 11px;
      line-height: 1.55;
    }

    .operations {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(330px, 1fr);
      gap: 18px;
    }

    .call-card { overflow: visible; }

    .panel-titlebar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 53px;
      padding: 0 18px;
      border-bottom: 1px solid var(--line-soft);
    }

    .panel-titlebar h3 { margin: 0; font-size: 14px; }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 9px;
      border-radius: 999px;
      color: var(--ink-500);
      background: #f3f5f6;
      font-size: 11px;
      font-weight: 650;
    }

    .status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #a8b2b8; }
    .status-badge.connected { color: var(--teal-600); background: var(--teal-100); }
    .status-badge.connected::before { background: #17a58f; animation: pulse 1.8s infinite; }
    .status-badge.calling { color: var(--amber-600); background: var(--amber-100); }
    .status-badge.calling::before { background: #d48324; animation: pulse 1s infinite; }
    .status-badge.ended { color: var(--red-600); background: var(--red-100); }
    .status-badge.ended::before { background: var(--red-600); }

    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(23, 165, 143, .1); }
      50% { box-shadow: 0 0 0 5px rgba(23, 165, 143, .12); }
    }

    .call-main {
      padding: 16px 18px 15px;
      display: grid;
      grid-template-columns: minmax(260px, 1.2fr) minmax(330px, 1.8fr);
      gap: 18px;
    }

    .dial-zone { position: relative; }

    .phone-label {
      display: flex;
      justify-content: space-between;
      margin-bottom: 7px;
      color: var(--ink-500);
      font-size: 11px;
    }

    .phone-label strong { color: var(--teal-600); font-weight: 650; }

    .number-input {
      display: flex;
      align-items: center;
      min-height: 46px;
      border: 1px solid #cfd9df;
      border-radius: 11px;
      background: #fff;
      transition: border-color .2s, box-shadow .2s;
    }

    .number-input:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59, 124, 255, .1); }
    .country-code { padding: 0 11px; color: var(--ink-500); border-right: 1px solid var(--line); font-size: 12px; }
    .number-input input { width: 100%; min-width: 0; padding: 0 11px; border: 0; outline: 0; color: var(--ink-900); background: transparent; font-size: 16px; font-weight: 650; letter-spacing: .04em; }
    .number-input button { align-self: stretch; width: 42px; border: 0; color: var(--ink-500); background: transparent; font-size: 16px; }

    .contact-hints { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
    .contact-hints button { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-700); background: #f8fafb; font-size: 10px; }

    .keypad {
      position: absolute;
      z-index: 8;
      right: 0;
      top: 74px;
      width: 196px;
      padding: 10px;
      display: none;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 18px 35px rgba(14, 36, 50, .18);
    }
    .keypad.open { display: grid; }
    .keypad button { height: 35px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-700); background: #f8fafb; font-weight: 700; }

    .call-zone {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .call-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 26px;
      margin-bottom: 8px;
    }

    .call-person { display: flex; align-items: center; gap: 9px; }
    .mini-avatar { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #23525e; background: #dff5f2; font-size: 11px; font-weight: 800; }
    .call-person strong { font-size: 12px; }
    .call-person span { display: block; margin-top: 2px; color: var(--ink-500); font-size: 10px; }

    .call-duration { color: var(--navy-800); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 750; letter-spacing: .05em; }

    .voice-bars { display: flex; align-items: center; justify-content: center; gap: 4px; height: 22px; opacity: .3; }
    .voice-bars i { width: 3px; height: 7px; border-radius: 3px; background: var(--teal-600); transform-origin: center; }
    .voice-bars.active { opacity: 1; }
    .voice-bars.active i { animation: voice 1s ease-in-out infinite; }
    .voice-bars i:nth-child(2), .voice-bars i:nth-child(6) { animation-delay: -.25s; }
    .voice-bars i:nth-child(3), .voice-bars i:nth-child(7) { animation-delay: -.55s; }
    .voice-bars i:nth-child(4) { animation-delay: -.75s; }
    @keyframes voice { 0%, 100% { transform: scaleY(.65); } 50% { transform: scaleY(2.25); } }

    .call-controls { display: grid; grid-template-columns: repeat(6, minmax(46px, 1fr)); gap: 8px; }

    .control-btn {
      min-height: 51px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      border: 1px solid var(--line);
      border-radius: 10px;
      color: var(--ink-700);
      background: #fff;
      transition: transform .15s, border-color .15s, background .15s;
    }

    .control-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: #b8c8d2; background: #f8fafc; }
    .control-btn:disabled { cursor: not-allowed; opacity: .42; }
    .control-btn .symbol { font-size: 17px; line-height: 1; }
    .control-btn small { font-size: 10px; }
    .control-btn.primary { color: #fff; border-color: var(--teal-600); background: var(--teal-600); }
    .control-btn.danger { color: #fff; border-color: var(--red-600); background: var(--red-600); }
    .control-btn.active { color: var(--blue-600); border-color: #a8c3ff; background: var(--blue-100); }

    .note-area {
      padding: 14px 18px 16px;
      border-top: 1px solid var(--line-soft);
      background: #fbfcfd;
      border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }

    .note-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .note-head h4 { margin: 0; font-size: 12px; }
    .ghost-btn { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--blue-600); background: #fff; font-size: 10px; font-weight: 650; }

    .note-form {
      display: grid;
      grid-template-columns: 130px 130px minmax(180px, 1fr) 126px auto;
      gap: 9px;
    }

    .field, .note-text {
      min-width: 0;
      height: 38px;
      padding: 0 10px;
      border: 1px solid #d4dde3;
      border-radius: 9px;
      color: var(--ink-700);
      background: #fff;
      outline: none;
      font-size: 11px;
    }

    .note-text { padding-top: 10px; resize: none; }
    .field:focus, .note-text:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59, 124, 255, .08); }

    .save-note {
      height: 38px;
      padding: 0 16px;
      border: 0;
      border-radius: 9px;
      color: #fff;
      background: var(--blue-600);
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }

    .transcript-card {
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .live-tools { display: flex; align-items: center; gap: 12px; }
    .live-label { display: inline-flex; align-items: center; gap: 5px; color: var(--teal-600); font-size: 10px; font-weight: 700; }
    .live-label i { width: 6px; height: 6px; border-radius: 50%; background: #22a88f; }
    .small-action { border: 0; color: var(--ink-500); background: transparent; font-size: 10px; }

    .conversation-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 18px;
      color: var(--ink-500);
      background: #f8fafb;
      border-bottom: 1px solid var(--line-soft);
      font-size: 10px;
    }

    .conversation-meta strong { color: var(--ink-700); }

    .transcript {
      min-height: 0;
      flex: 1;
      overflow-y: auto;
      padding: 14px 18px 18px;
      scroll-behavior: smooth;
      scrollbar-width: thin;
      overscroll-behavior: contain;
    }

    .system-message {
      width: fit-content;
      max-width: 82%;
      margin: 0 auto 10px;
      padding: 6px 10px;
      border-radius: 999px;
      color: var(--ink-500);
      background: #f1f4f5;
      font-size: 10px;
      text-align: center;
    }

    .message { display: flex; gap: 8px; margin-bottom: 10px; animation: rise .25s ease-out; }
    .message.agent { flex-direction: row-reverse; }
    @keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
    .message-avatar { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 9px; color: #355463; background: #e5edf1; font-size: 10px; font-weight: 800; }
    .message.agent .message-avatar { color: #174b44; background: #dff4f0; }
    .message-body { max-width: 72%; }
    .message-name { margin-bottom: 3px; color: var(--ink-500); font-size: 10px; }
    .message.agent .message-name { text-align: right; }
    .bubble { padding: 8px 11px; border: 1px solid var(--line); border-radius: 4px 12px 12px 12px; color: var(--ink-700); background: #fff; font-size: 12px; line-height: 1.55; }
    .message.agent .bubble { border-color: #cfe9e4; border-radius: 12px 4px 12px 12px; color: #214a45; background: #ecf8f5; }
    .message-time { margin-top: 2px; color: #9aa4aa; font-size: 9px; }
    .message.agent .message-time { text-align: right; }

    .thinking { display: none; align-items: center; gap: 8px; margin: 0 0 10px 38px; color: var(--ink-500); font-size: 10px; }
    .thinking.show { display: flex; }
    .typing-dots { display: flex; gap: 3px; }
    .typing-dots i { width: 4px; height: 4px; border-radius: 50%; background: #8b9aa3; animation: blink 1.1s infinite; }
    .typing-dots i:nth-child(2) { animation-delay: .2s; }
    .typing-dots i:nth-child(3) { animation-delay: .4s; }
    @keyframes blink { 0%, 100% { opacity: .25; } 45% { opacity: 1; } }

    .modal-backdrop {
      position: fixed;
      z-index: 30;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(4, 20, 31, .48);
      backdrop-filter: blur(3px);
    }
    .modal-backdrop.open { display: flex; }
    .modal { width: min(620px, 100%); max-height: 78vh; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 28px 70px rgba(3, 20, 32, .25); }
    .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 19px; border-bottom: 1px solid var(--line); }
    .modal-head h3 { margin: 0; font-size: 15px; }
    .modal-head button { width: 30px; height: 30px; border: 0; border-radius: 8px; color: var(--ink-500); background: #f1f4f5; }
    .note-list { max-height: calc(78vh - 65px); overflow: auto; padding: 18px 20px 22px; }
    .note-record { position: relative; padding: 0 0 18px 22px; }
    .note-record:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 11px; bottom: -2px; width: 1px; background: var(--line); }
    .note-record::after { content: ""; position: absolute; left: 2px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 4px var(--blue-100); }
    .note-record-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
    .note-record-head strong { font-size: 12px; }
    .note-record-head time { color: var(--ink-500); font-size: 10px; }
    .note-record p { margin: 0 0 8px; color: var(--ink-700); font-size: 11px; line-height: 1.6; }
    .note-record-tags { display: flex; gap: 6px; flex-wrap: wrap; }
    .note-record-tags span { padding: 4px 7px; border-radius: 6px; color: var(--blue-600); background: var(--blue-100); font-size: 9px; }

    .toast {
      position: fixed;
      z-index: 50;
      right: 24px;
      bottom: 24px;
      min-width: 230px;
      padding: 12px 15px;
      border-radius: 11px;
      color: #fff;
      background: #173b4f;
      box-shadow: 0 16px 35px rgba(9, 35, 52, .25);
      font-size: 12px;
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
      transition: opacity .2s, transform .2s;
    }
    .toast.show { opacity: 1; transform: translateY(0); }

    @media (max-width: 1180px) {
      .workspace { grid-template-columns: 330px minmax(0, 1fr); }
      .call-main { grid-template-columns: 1fr; }
      .note-form { grid-template-columns: repeat(2, 1fr); }
      .note-text { grid-column: span 2; }
      .save-note { grid-column: 2; }
    }

    @media (max-width: 860px) {
      .app { height: auto; min-height: 100dvh; overflow: visible; }
      .topbar { height: auto; min-height: 70px; padding: 13px 16px; }
      .today-task { display: none; }
      .brand-copy p { display: none; }
      .workspace { display: block; padding: 12px; }
      .debtor-panel { max-height: none; margin-bottom: 14px; }
      .debtor-scroll { overflow: visible; }
      .operations { display: block; }
      .call-card { margin-bottom: 14px; }
      .transcript-card { height: clamp(430px, calc(100dvh - 100px), 620px); }
    }

    @media (max-width: 560px) {
      .topbar { align-items: flex-start; }
      .agent-copy { display: none; }
      .brand-copy h1 { font-size: 14px; }
      .workspace { padding: 8px; }
      .info-grid, .plan-box { grid-template-columns: 1fr; }
      .call-controls { grid-template-columns: repeat(3, 1fr); }
      .note-form { grid-template-columns: 1fr; }
      .note-text, .save-note { grid-column: auto; }
      .message-body { max-width: 82%; }
    }

    /* ===== model 话务台扩展：案件列表 / 登录 ===== */
    .debtor-panel { display: flex; flex-direction: column; }
    .case-list-head {
      padding: 14px 18px 10px;
      border-bottom: 1px solid var(--line-soft);
    }
    .case-search {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }
    .case-search .field { flex: 1; }
    .case-search .save-note { height: 38px; padding: 0 14px; }
    .case-list {
      min-height: 120px;
      max-height: 34vh;
      overflow-y: auto;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line-soft);
      scrollbar-width: thin;
    }
    .case-item {
      display: block;
      width: 100%;
      padding: 11px 12px;
      margin-bottom: 8px;
      text-align: left;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      transition: border-color .15s, background .15s;
    }
    .case-item:hover { border-color: #b8c8d2; background: #f8fafc; }
    .case-item.active { border-color: var(--blue-500); background: var(--blue-100); }
    .case-item-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
    .case-item-top strong { font-size: 13px; }
    .case-item-top span { color: var(--ink-500); font-size: 10px; }
    .case-item-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--ink-500); font-size: 10px; }
    .case-item-meta b { color: var(--red-600); font-weight: 700; }
    .case-empty { padding: 26px 10px; color: var(--ink-500); font-size: 12px; text-align: center; }
    .list-footer { padding: 10px; color: var(--ink-500); font-size: 11px; text-align: center; }
    .debtor-scroll { flex: 1; }
    .login-box { padding: 24px; }
    .login-form { display: grid; gap: 12px; }
    .login-row { display: grid; grid-template-columns: 1fr 130px; gap: 10px; }
    .login-captcha { width: 130px; height: 44px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #f3f6f8; cursor: pointer; }
    .login-captcha img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .login-actions { display: flex; gap: 10px; justify-content: flex-end; }
    .link-btn { border: 0; color: var(--blue-600); background: transparent; font-size: 11px; }
    .mini-tag { display: inline-block; padding: 3px 7px; border-radius: 6px; color: var(--teal-600); background: var(--teal-100); font-size: 10px; }
    .summary-strip { display: flex; gap: 16px; padding: 10px 18px; color: var(--ink-500); font-size: 11px; border-bottom: 1px solid var(--line-soft); }
    .summary-strip strong { color: var(--ink-900); }
    .case-detail-empty { padding: 30px 18px; color: var(--ink-500); font-size: 12px; text-align: center; }
    .key-overlay .modal { width: min(400px, 100%); }
    .key-form { display: grid; gap: 12px; padding: 20px; }

    /* ===== 登录页 ===== */
    .login-page {
      height: 100dvh;
      min-height: 640px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background:
        radial-gradient(circle at 72% -120%, rgba(61, 155, 255, .4), transparent 42%),
        linear-gradient(110deg, var(--navy-950), var(--navy-800));
    }
    .login-card {
      width: min(420px, 100%);
      padding: 30px 28px;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 28px 70px rgba(3, 20, 32, .35);
    }
    .login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
    .login-brand h1 { margin: 0; font-size: 18px; font-weight: 750; }
    .login-brand p { margin: 5px 0 0; color: var(--ink-500); font-size: 10px; letter-spacing: .08em; }
    .login-tip { margin: 0 0 18px; color: var(--ink-500); font-size: 12px; }
    .login-form { display: grid; gap: 12px; }
    .login-form .field, .login-form .login-submit { width: 100%; height: 44px; }
    .login-submit { border: 0; border-radius: 10px; color: #fff; background: var(--blue-600); font-size: 14px; font-weight: 700; }
    .login-submit:disabled { opacity: .6; cursor: not-allowed; }
    .login-row { display: grid; grid-template-columns: 1fr 132px; gap: 10px; }
    .login-captcha { width: 114px; height: 60px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #f3f6f8; cursor: pointer; }
    .login-captcha img { width: 100%; height: 100%; object-fit: fill; display: block; }

    /* ===== 工作台三栏（列表｜详情｜话务） ===== */
    .hidden { display: none !important; }
    .app .topbar { padding: 0 4px; }
    .workspace.three-col {
      grid-template-columns: minmax(235px, 20%) minmax(300px, 34%) minmax(0, 1fr);
      gap: 14px;
      padding: 10px 4px 12px;
    }
    .workspace.three-col > .panel,
    .workspace.three-col > .operations { min-width: 0; }
    .case-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
    .case-panel .case-list { max-height: none; flex: 1; }
    .debtor-panel { min-height: 0; overflow: hidden; }
    .debtor-panel .debtor-hero { padding: 18px 18px 16px; }
    .debtor-panel .debtor-scroll { flex: 1; overflow: auto; padding: 14px 16px 18px; scrollbar-width: thin; }
    .operations { grid-template-rows: auto minmax(0, 1fr); gap: 14px; min-height: 0; }
    .call-main { padding: 14px 16px; grid-template-columns: minmax(230px, 1fr) minmax(300px, 1.4fr); }
    .transcript-card { min-height: 260px; }
    @media (max-width: 1320px) {
      .workspace.three-col { grid-template-columns: 250px minmax(300px, 1fr); }
      .workspace.three-col .operations { grid-column: 2; }
    }
    @media (max-width: 960px) {
      .workspace.three-col { display: block; }
      .workspace.three-col > .panel, .workspace.three-col .operations { margin-bottom: 14px; }
    }