/* 视觉刷新：深色交易终端 */
      :root {
        --bg: #070b12;
        --border: #1e2d40;
        --text: #eef4fb;
        --muted: #8191a7;
        --blue: #6ea8ff;
        --green: #36d4a2;
        --yellow: #e6aa49;
        --red: #f06a78;
        --shadow: 0 16px 44px rgb(0 0 0 / 24%);
      }

      body {
        background:
          radial-gradient(circle at 92% -8%, #163155 0, transparent 32%),
          radial-gradient(circle at 18% 0%, #10213b 0, transparent 28%),
          linear-gradient(180deg, #090f19 0%, var(--bg) 52%, #060910 100%);
        font-size: 14px;
        letter-spacing: .01em;
      }

      .sidebar {
        padding: 18px 12px;
        border-right-color: #182638;
        background: rgb(5 9 16 / 86%);
        box-shadow: 12px 0 36px rgb(0 0 0 / 12%);
      }

      .nav { gap: 5px; }

      .nav button {
        gap: 10px;
        padding: 10px;
        border-radius: 9px;
        font-size: 13px;
      }

      .nav button:hover,
      .nav button.active {
        border-color: #315e96;
        background: linear-gradient(90deg, #17365d, #11243d);
        box-shadow: inset 3px 0 0 #5d9eff, 0 7px 18px rgb(0 0 0 / 12%);
      }

      .sidebar-foot {
        padding: 11px;
        border-color: #263b56;
        border-radius: 11px;
        background: #0c1624;
      }

      .pill {
        min-height: 30px;
        padding: 5px 9px;
        border-color: #263a52;
        background: #0c1624;
        font-size: 12px;
      }

      main {
        width: min(1200px, 100%);
        padding: 26px clamp(16px, 3vw, 42px) 48px;
      }

      .service-row {
        gap: 12px;
        margin-bottom: 14px;
      }

      .service-card {
        position: relative;
        min-height: 145px;
        padding: 16px 11px 12px;
        border-color: #21334a;
        border-radius: 13px;
        background: linear-gradient(150deg, #111e30, #0b131f);
        box-shadow: 0 12px 30px rgb(0 0 0 / 18%);
        overflow: hidden;
      }

      .service-card::before {
        position: absolute;
        top: 0;
        right: 18%;
        left: 18%;
        height: 2px;
        border-radius: 0 0 4px 4px;
        background: #4e94ed;
        content: "";
        opacity: .9;
      }

      .service-card.live::before { background: #e06172; }

      .service-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 8px;
        border-radius: 13px;
        box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
      }

      .service-icon.bybit-logo {
        width: 86px;
        border-radius: 10px;
        box-shadow: 0 8px 18px rgb(0 0 0 / 14%);
      }

      .service-card strong { font-size: 13px; }
      .service-card small { font-size: 10px; }

      .service-card .btn {
        min-height: 32px;
        border-radius: 8px;
        font-size: 12px;
      }

      .card {
        padding: 16px;
        border-color: #1e3046;
        border-radius: 13px;
        background: linear-gradient(150deg, #101b2b, #0b131f);
        box-shadow: 0 14px 34px rgb(0 0 0 / 16%);
      }

      .card-head { margin-bottom: 14px; }

      .heading { gap: 7px; }

      .heading-icon {
        width: 25px;
        height: 25px;
        border-color: #315c88;
        border-radius: 7px;
        background: #15365d;
        font-size: 13px;
      }

      label {
        margin-bottom: 5px;
        color: #cbd9ea;
        font-size: 12px;
      }

      input, select {
        min-height: 40px;
        padding: 8px 10px;
        border-color: #263c57;
        border-radius: 8px;
        background: #080f19;
        font-size: 13px;
      }

      input:focus, select:focus {
        border-color: #5b9df0;
        box-shadow: 0 0 0 3px #4f9aff1c;
      }

      .hint { font-size: 11px; }

      .channel {
        gap: 9px;
        padding: 9px 10px;
        border-color: #263c57;
        border-radius: 8px;
        background: #09121f;
      }

      .channel strong { font-size: 12px; }
      .channel small { font-size: 10px; }

      .actions { margin-top: 15px; }

      .btn {
        min-height: 36px;
        padding: 8px 12px;
        border-color: #2c4969;
        border-radius: 8px;
        background: #12253c;
        font-size: 13px;
      }

      .btn:hover {
        border-color: #6ea8ff;
        background: #183657;
      }

      .btn.primary {
        border-color: #387fd8;
        background: linear-gradient(135deg, #245ea9, #2f82d6);
      }

      .btn.danger {
        border-color: #914452;
        background: #5b2a35;
      }

      .placeholder {
        min-height: 190px;
        border-color: #2b4665;
        border-radius: 12px;
        background: #09121ecc;
      }

      .modal-panel {
        border-color: #315177;
        border-radius: 14px;
        background: linear-gradient(150deg, #111f32, #0a131f);
        box-shadow: 0 24px 80px #000b;
      }

      .modal-close {
        border-color: #2c4868;
        border-radius: 8px;
        background: #102238;
      }

      .provider-panel {
        grid-column: 1 / -1;
      }

      .provider-head {
        align-items: center;
        margin-bottom: 12px;
      }

      .provider-head .card-head { margin-bottom: 0; }

      .provider-toolbar {
        display: flex;
        align-items: center;
        gap: 9px;
      }

      .provider-count {
        color: var(--muted);
        font-size: 11px;
      }

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

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

      .channel-card {
        position: relative;
        min-width: 0;
        padding: 12px;
        border: 1px solid #263b56;
        border-radius: 12px;
        background: linear-gradient(145deg, #0b1625, #080f19);
        overflow: hidden;
      }

      .channel-card::before {
        position: absolute;
        top: 0;
        right: 20%;
        left: 20%;
        height: 2px;
        border-radius: 0 0 5px 5px;
        background: #36d4a2;
        content: "";
      }

      .channel-card-head,
      .channel-card-foot {
        display: flex;
        align-items: center;
      }

      .channel-card-head {
        gap: 8px;
        min-width: 0;
        margin-bottom: 13px;
      }

      .channel-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
      }

      .channel-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        min-height: 22px;
        margin: 0 0 12px 37px;
      }

      .channel-meta-item {
        display: inline-flex;
        align-items: center;
        min-height: 22px;
        padding: 3px 7px;
        border: 1px solid #2b4665;
        border-radius: 999px;
        color: #a9c2df;
        background: #102039;
        font-size: 10px;
      }

      .channel-meta-item.live {
        border-color: #8e4656;
        color: #ffc2ca;
        background: #3b202b;
      }

      .channel-card-foot {
        justify-content: flex-end;
        gap: 7px;
      }

      .channel-card-foot .btn {
        min-height: 30px;
        padding: 5px 10px;
        font-size: 11px;
      }

      .channel-empty {
        display: none;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
        padding: 11px 12px;
        border: 1px solid #263c57;
        border-radius: 8px;
        background: #09121f;
      }

      .channel-empty.is-visible {
        display: flex;
      }

      .channel-empty strong,
      .channel-empty small {
        display: block;
      }

      .channel-empty strong { font-size: 12px; }
      .channel-empty small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 10px;
      }

      .provider-card {
        position: relative;
        min-width: 0;
        padding: 12px;
        border: 1px solid #263b56;
        border-radius: 12px;
        background: linear-gradient(145deg, #0b1625, #080f19);
        overflow: hidden;
        cursor: grab;
        touch-action: pan-y;
        user-select: none;
        transition: border-color .18s ease, opacity .18s ease, transform .18s ease, box-shadow .18s ease;
      }

      .provider-card:active,
      .provider-card.is-long-pressing {
        cursor: grabbing;
      }

      .provider-card select,
      .provider-card button,
      .provider-card input,
      .provider-card textarea {
        user-select: auto;
      }

      .provider-card::before {
        position: absolute;
        top: 0;
        right: 20%;
        left: 20%;
        height: 2px;
        border-radius: 0 0 5px 5px;
        background: #5d9fff;
        content: "";
      }

      .provider-card.is-dragging {
        opacity: .46;
        border-color: #6eafff;
        box-shadow: 0 14px 36px #0008;
        cursor: grabbing;
      }

      .provider-card.is-drag-over {
        border-color: #8bc8ff;
        box-shadow: 0 0 0 2px #8bc8ff33, 0 14px 36px #0007;
        transform: translateY(-2px);
      }

      .provider-card-head, .provider-card-foot, .provider-model-stats{
        display: flex;
        align-items: center;
      }

      .provider-card-head {
        gap: 8px;
        min-width: 0;
        margin-bottom: 10px;
      }

      .provider-number {
        display: grid;
        flex: 0 0 auto;
        width: 29px;
        height: 29px;
        place-items: center;
        border-radius: 8px;
        color: #08101b;
        background: #8bc8ff;
        font-size: 14px;
        font-weight: 800;
      }

      .provider-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 700;
      }

      .provider-model {
        display: flex;
        align-items: stretch;
        gap: 7px;
        margin-bottom: 9px;
      }

      .provider-model select {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 40px;
        border-color: #35547d;
        background: #14213a;
        font-size: 13px;
      }

      .provider-model .btn {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 6px 10px;
        font-size: 11px;
        white-space: nowrap;
      }

      .provider-divider {
        height: 1px;
        margin: 9px 0 8px;
        border: 0;
        background: #1e2d41;
      }

      .provider-model-stats {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        color: #8ea2bb;
        font-size: 11px;
      }

      .provider-model-stats strong {
        margin-right: 4px;
        color: #d7e4f5;
        font-size: 12px;
      }

      .provider-card-foot {
        justify-content: flex-end;
        gap: 8px;
        margin-top: 11px;
      }

      .provider-card-foot .btn {
        min-height: 32px;
        padding: 6px 12px;
        font-size: 12px;
      }

      .provider-card-foot .btn[data-provider-delete] {
        color: #ffc2c7;
        border-color: #643743;
      }

      @media (max-width: 760px) {
        .provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .provider-card { padding: 10px; }
        .provider-name { font-size: 12px; }
        .provider-model-stats { display: grid; line-height: 1.7; }
      }

      @media (max-width: 430px) {
        .provider-grid,
        .channel-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 7px;
        }
        .provider-head { align-items: flex-start; }
        .provider-toolbar { flex-wrap: wrap; justify-content: flex-end; }
        .provider-card { padding: 8px; }
        .provider-card-head { gap: 5px; margin-bottom: 8px; }
        .provider-number {
          width: 24px;
          height: 24px;
          border-radius: 6px;
          font-size: 11px;
        }
        .provider-name { font-size: 10px; }
        .provider-model { gap: 4px; }
        .provider-model select {
          min-height: 34px;
          padding: 6px;
          font-size: 10px;
        }
        .provider-model .btn {
          min-height: 34px;
          padding: 5px 6px;
          font-size: 9px;
        }
        .provider-model-stats{
          gap: 3px;
          font-size: 9px;
        }
        .provider-model-stats strong { font-size: 10px; }
        .provider-card-foot { gap: 4px; margin-top: 8px; }
        .provider-card-foot .btn {
          min-height: 27px;
          padding: 5px 7px;
          font-size: 10px;
        }
        .channel-card { padding: 8px; }
        .channel-card-head { gap: 5px; margin-bottom: 8px; }
        .channel-name { font-size: 10px; }
        .channel-card-foot { gap: 4px; }
        .channel-card-foot .btn {
          min-height: 27px;
          padding: 5px 7px;
          font-size: 10px;
        }
      }

      @media (max-width: 980px) {
        .app-shell {
          align-content: start;
        }
        .sidebar { padding: 10px 12px; }
      }

      @media (max-width: 760px) {
        main { padding: 18px 12px 34px; }
        .service-card { min-height: 136px; }
      }

      /* 高级视觉系统：克制的深色交易终端 */