:root {
      --bg: #f6fbff;
      --panel: rgba(255, 255, 255, .86);
      --panel-solid: #ffffff;
      --panel-2: #edf7ff;
      --text: #12213a;
      --muted: #60718a;
      --line: rgba(119, 157, 201, .25);
      --brand: #2d5dd7;
      --brand-2: #63d5dc;
      --brand-3: #0d75c8;
      --ok: #15803d;
      --warn: #b45309;
      --danger: #b91c1c;
      --blue: #2563eb;
      --shadow: 0 18px 48px rgba(38, 84, 150, .10);
      --shadow-soft: 0 10px 28px rgba(38, 84, 150, .07);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      color: var(--text);
      background:
        linear-gradient(115deg, rgba(45, 93, 215, .08) 0 1px, transparent 1px 26px),
        linear-gradient(25deg, rgba(99, 213, 220, .08) 0 1px, transparent 1px 30px),
        radial-gradient(circle at 15% 4%, rgba(99, 213, 220, .22), transparent 28%),
        radial-gradient(circle at 88% 0%, rgba(45, 93, 215, .14), transparent 32%),
        linear-gradient(180deg, #fbfdff 0%, var(--bg) 48%, #edf7ff 100%);
    }

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

    button {
      cursor: pointer;
      border: 0;
    }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 286px minmax(0, 1fr);
    }

    .sidebar {
      background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(246, 251, 255, .78)),
        rgba(255,255,255,.72);
      color: var(--text);
      padding: 18px 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-shadow: 18px 0 48px rgba(43, 91, 158, .08);
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
      border-right: 1px solid rgba(108, 158, 213, .24);
      backdrop-filter: blur(18px);
    }

    .sidebar::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 35% 10%, rgba(99, 213, 220, .24), transparent 24%),
        linear-gradient(180deg, rgba(45, 93, 215, .08), transparent 42%);
      pointer-events: none;
    }

    .sidebar > * {
      position: relative;
      z-index: 1;
    }

    .brand {
      display: grid;
      gap: 4px;
      padding: 8px 8px 16px;
      border-bottom: 1px solid rgba(78, 128, 190, .18);
    }

    .brand-logo-wrap {
      height: 94px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0;
      overflow: hidden;
    }

    .brand-logo {
      display: block;
      width: 248px;
      max-width: none;
      height: auto;
      max-height: none;
      object-fit: contain;
      object-position: left center;
    }

    .brand-copy {
      position: relative;
      display: grid;
      gap: 3px;
      margin-top: 2px;
      padding: 9px 10px 9px 13px;
      border-radius: 0 8px 8px 0;
      background: linear-gradient(90deg, rgba(45, 93, 215, .08), rgba(99, 213, 220, .08));
      border-left: 3px solid var(--brand);
    }

    .brand strong { display: block; font-size: 16px; letter-spacing: 0; color: #1e3f78; }
    .brand span { display: block; color: var(--muted); font-size: 12px; margin-top: 0; }

    .nav {
      display: grid;
      gap: 9px;
      padding-bottom: 18px;
    }

    .nav button {
      color: #284469;
      background: rgba(255,255,255,.66);
      border-radius: 8px;
      min-height: 44px;
      padding: 0 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      text-align: left;
      border: 1px solid rgba(110, 158, 210, .22);
      box-shadow: 0 8px 20px rgba(55, 109, 177, .05);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
      transition: background .18s ease, border-color .18s ease, transform .18s ease;
    }

    .nav button:hover,
    .nav button.active {
      background: linear-gradient(135deg, rgba(45, 93, 215, .10), rgba(99, 213, 220, .20));
      border-color: rgba(45, 93, 215, .26);
      color: #153a88;
      transform: translateX(2px);
    }

    .nav-line-icon {
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      display: grid;
      place-items: center;
      color: currentColor;
    }

    .nav-line-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    .favorite-nav {
      display: grid;
      gap: 7px;
      padding: 10px;
      border: 1px solid rgba(45, 93, 215, .18);
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(45, 93, 215, .08), rgba(99, 213, 220, .12));
    }

    .favorite-nav-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0 2px;
    }

    .favorite-nav-head strong {
      color: #1e3f78;
      font-size: 13px;
      letter-spacing: .02em;
    }

    .favorite-nav-manage {
      min-height: auto !important;
      height: auto !important;
      padding: 3px 7px !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #2d5dd7 !important;
      font-size: 12px;
      font-weight: 700;
      transform: none !important;
    }

    .favorite-nav-list {
      display: grid;
      gap: 5px;
    }

    .nav .favorite-nav-list button {
      min-height: 36px;
      padding: 0 10px;
      border-color: rgba(45, 93, 215, .14);
      background: rgba(255, 255, 255, .72);
      box-shadow: none;
      color: #294d7d;
      font-size: 12px;
      font-weight: 650;
      transform: none;
    }

    .favorite-nav-empty {
      display: grid;
      gap: 6px;
      padding: 3px 2px 1px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .favorite-nav-empty button {
      min-height: 34px !important;
      justify-content: center !important;
      border-style: dashed !important;
      background: rgba(255, 255, 255, .52) !important;
      color: #2d5dd7 !important;
      box-shadow: none !important;
      font-size: 12px;
      font-weight: 750;
      transform: none !important;
    }

    .nav-separator {
      height: 1px;
      margin: 2px 2px;
      background: rgba(78, 128, 190, .18);
    }

    .nav .nav-home {
      width: 100%;
      color: #203f6d;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
    }

    .nav-group {
      display: grid;
      gap: 5px;
    }

    .nav .nav-group-toggle {
      width: 100%;
      min-height: 44px;
      color: #284469;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
    }

    .nav .nav-group-toggle::after,
    .nav button[data-view][aria-expanded]::after {
      content: "▸";
      margin-left: auto;
      color: #7b96bf;
      font-size: 12px;
      line-height: 1;
      transition: transform 0.2s ease;
      transform: rotate(0deg);
      transform-origin: center;
    }

    .nav .nav-group-toggle[aria-expanded="true"]::after,
    .nav button[data-view][aria-expanded="true"]::after {
      transform: rotate(90deg);
    }

    .nav-group.contains-active > .nav-group-toggle {
      border-color: rgba(45, 93, 215, .28);
      color: #153a88;
      background: rgba(45, 93, 215, .07);
    }

    .nav-group-items {
      display: grid;
      gap: 4px;
      padding: 0 0 2px 12px;
      border-left: 1px solid rgba(45, 93, 215, .17);
      margin-left: 10px;
    }

    .nav-group-items[hidden] {
      display: none;
    }

    .nav .nav-group-items > button {
      min-height: 38px;
      padding: 0 10px;
      border-color: transparent;
      background: transparent;
      box-shadow: none;
      color: #526b8d;
      font-size: 12px;
      transform: none;
    }

    .nav .nav-group-items > button:hover,
    .nav .nav-group-items > button.active {
      border-color: rgba(45, 93, 215, .18);
      background: rgba(45, 93, 215, .08);
      color: #214b9c;
      transform: none;
    }

    .favorite-choice-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      padding: 18px;
    }

    .favorite-choice {
      min-height: 68px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      padding: 11px 12px;
      border: 1px solid rgba(112, 154, 206, .22);
      border-radius: 8px;
      background: rgba(255, 255, 255, .70);
      cursor: pointer;
    }

    .favorite-choice:has(input:checked) {
      border-color: rgba(45, 93, 215, .42);
      background: linear-gradient(135deg, rgba(45, 93, 215, .09), rgba(99, 213, 220, .12));
    }

    .favorite-choice input {
      width: 17px;
      height: 17px;
      accent-color: var(--brand);
    }

    .favorite-choice span {
      display: grid;
      gap: 4px;
    }

    .favorite-choice strong {
      color: #203f6d;
      font-size: 13px;
    }

    .favorite-choice small {
      color: var(--muted);
      font-size: 11px;
    }

    .favorite-modal-note {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 18px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
    }

    #favoritesModal .dialog {
      width: min(680px, calc(100vw - 32px));
    }

    .main {
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .topbar {
      min-height: 82px;
      background: rgba(255, 255, 255, .78);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 0 28px;
      position: sticky;
      top: 0;
      z-index: 5;
      backdrop-filter: blur(14px);
      box-shadow: 0 8px 24px rgba(31, 71, 128, .04);
    }

    h1 {
      margin: 0;
      font-size: 24px;
      line-height: 1.25;
      letter-spacing: 0;
    }

    .topbar p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .actions {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .btn {
      min-height: 38px;
      padding: 0 14px;
      border-radius: 8px;
      background: rgba(255,255,255,.76);
      color: var(--text);
      border: 1px solid rgba(112, 154, 206, .26);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      box-shadow: 0 5px 14px rgba(31, 71, 128, .06);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
      border-color: #b7cbe4;
      box-shadow: 0 10px 22px rgba(31, 71, 128, .11);
    }

    .btn.primary {
      background: linear-gradient(135deg, var(--brand), #2f86d8 58%, var(--brand-2));
      color: #fff;
      border-color: transparent;
    }

    .btn.danger {
      background: #fee2e2;
      color: var(--danger);
    }

    .btn.inbound {
      background: #dcfce7;
      color: var(--ok);
      border-color: rgba(21, 128, 61, .16);
    }

    .btn.outbound {
      background: #dbeafe;
      color: var(--blue);
      border-color: rgba(37, 99, 235, .16);
    }

    .btn.adjust {
      background: #fef3c7;
      color: var(--warn);
      border-color: rgba(180, 83, 9, .16);
    }

    .btn.icon {
      width: 38px;
      padding: 0;
      justify-content: center;
    }

    .content {
      padding: 26px 28px 38px;
      display: grid;
      gap: 18px;
    }

    .view { display: none; }
    .view.active { display: grid; gap: 18px; }

    .metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .dashboard-filters {
      padding: 14px 18px;
      display: grid;
      grid-template-columns: repeat(2, minmax(160px, 220px)) auto 1fr;
      gap: 10px;
      align-items: end;
      background: rgba(255,255,255,.72);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow-soft);
    }

    .metric,
    .panel,
    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      backdrop-filter: blur(16px);
    }

    .metric {
      padding: 18px;
      min-height: 128px;
      display: grid;
      align-content: space-between;
      position: relative;
      background:
        radial-gradient(circle at 100% 0%, rgba(99, 213, 220, .18), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,.9), rgba(246, 251, 255, .78));
    }

    .metric::after {
      content: "";
      position: absolute;
      inset: auto 16px 0 16px;
      height: 3px;
      border-radius: 999px 999px 0 0;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
      box-shadow: 0 0 18px rgba(99, 213, 220, .5);
    }

    .metric span {
      color: var(--muted);
      font-size: 13px;
    }

    .metric strong {
      font-size: 27px;
      line-height: 1.2;
    }

    .metric em {
      font-style: normal;
      font-size: 12px;
      color: var(--muted);
    }

    .grid-2 {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
      gap: 16px;
    }

    .panel-head {
      padding: 16px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247, 252, 255, .76));
    }

    .panel-head h2 {
      margin: 0;
      font-size: 16px;
      letter-spacing: 0;
    }

    .panel-body {
      padding: 16px 18px;
    }

    .toolbar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }

    .flow-filters {
      padding: 16px 18px;
      display: grid;
      gap: 14px;
      border-bottom: 1px solid var(--line);
      background: rgba(248, 252, 255, .72);
    }

    .flow-filter-row {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }

    .flow-filter-label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
    }

    .category-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .category-tab {
      min-height: 34px;
      padding: 0 13px;
      border-radius: 8px;
      border: 1px solid rgba(112, 154, 206, .24);
      background: rgba(255,255,255,.86);
      color: #385371;
      font-size: 13px;
      transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
    }

    .category-tab:hover,
    .category-tab.active {
      color: #1d51af;
      border-color: rgba(45, 93, 215, .30);
      background: linear-gradient(135deg, rgba(45, 93, 215, .10), rgba(99, 213, 220, .18));
      box-shadow: 0 6px 16px rgba(55, 109, 177, .08);
    }

    .flow-selects {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .flow-select-group {
      display: grid;
      gap: 5px;
    }

    .flow-select-group span {
      color: var(--muted);
      font-size: 12px;
    }

    .service-config-hint {
      grid-column: 1 / -1;
      padding: 10px 12px;
      border-radius: 8px;
      background: #fff7ed;
      border: 1px solid rgba(249, 115, 22, .22);
      color: #9a3412;
      font-size: 12px;
      line-height: 1.55;
    }

    .support-group-admin {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 132px minmax(240px, 1fr);
      gap: 14px;
      align-items: center;
      padding: 14px;
      border: 1px solid rgba(34, 197, 94, .24);
      border-radius: 10px;
      background: rgba(240, 253, 244, .72);
    }

    .reservation-channel-heading {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 4px;
      padding-top: 14px;
      border-top: 1px solid rgba(112, 154, 206, .18);
    }

    .reservation-channel-heading strong {
      color: var(--ink);
      font-size: 14px;
    }

    .reservation-channel-heading span {
      color: var(--muted);
      font-size: 12px;
    }

    .support-group-admin.ruyi-channel {
      border-color: rgba(37, 99, 235, .22);
      background: rgba(239, 246, 255, .72);
    }

    .support-group-qr-preview {
      width: 132px;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px dashed rgba(22, 163, 74, .42);
      border-radius: 10px;
      color: #5f6f65;
      background: #fff;
      font-size: 12px;
      text-align: center;
    }

    .support-group-qr-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .support-group-qr-actions { display: grid; gap: 9px; justify-items: start; }
    .support-group-qr-actions strong { color: #173b24; font-size: 14px; }
    .support-group-qr-actions p { margin: 0; color: #5d6f63; font-size: 12px; line-height: 1.6; }
    .support-group-qr-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
    .support-group-qr-file { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

    .reservation-manager-notice {
      margin: 14px;
      padding: 12px 14px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      border: 1px solid rgba(37, 99, 235, .22);
      border-radius: 8px;
      background: #eff6ff;
      color: #334b6f;
      font-size: 13px;
      line-height: 1.55;
    }

    .reservation-manager-notice strong { flex: 0 0 auto; color: #1d4ed8; }
    .reservation-settings-tabs {
      margin: 14px;
      padding: 4px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px;
      border: 1px solid rgba(112, 154, 206, .22);
      border-radius: 8px;
      background: #f3f7fb;
    }
    .reservation-settings-tabs button {
      min-height: 38px;
      padding: 8px 10px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: #52657d;
      font: inherit;
      font-size: 13px;
      cursor: pointer;
    }
    .reservation-settings-tabs button.active {
      background: #fff;
      color: #1d4ed8;
      font-weight: 700;
      box-shadow: 0 2px 8px rgba(38, 76, 126, .10);
    }
    .reservation-mini-channel-nav {
      margin: 0 0 12px;
      padding: 4px;
      display: flex;
      gap: 4px;
      overflow-x: auto;
      border: 1px solid rgba(112, 154, 206, .22);
      border-radius: 8px;
      background: #f8fafc;
    }
    .reservation-mini-channel-nav button {
      flex: 0 0 auto;
      min-height: 36px;
      padding: 7px 13px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: #52657d;
      font: inherit;
      font-size: 13px;
      cursor: pointer;
      white-space: nowrap;
    }
    .reservation-mini-channel-nav button.active {
      background: #fff;
      color: #1d4ed8;
      font-weight: 700;
      box-shadow: 0 2px 7px rgba(38, 76, 126, .10);
    }
    .reservation-channel-code-card {
      margin-top: 12px;
      padding: 14px;
      border: 1px solid rgba(112, 154, 206, .22);
      border-radius: 8px;
      background: #fff;
    }
    .channel-mini-code-body {
      display: grid;
      grid-template-columns: minmax(180px, 260px) minmax(220px, 1fr);
      align-items: center;
      gap: 20px;
      padding-top: 14px;
    }
    .channel-mini-code-body .mini-program-code-preview { margin: 0; }
    .channel-mini-code-body .mini-program-code-actions { justify-content: flex-start; }
    .reservation-web-entry-band { margin-top: 12px; }
    .reservation-web-entry-band .reservation-manager-table-wrap { grid-column: 1 / -1; }
    .reservation-settings-panel { padding: 0 14px 14px; }
    .reservation-settings-panel.is-hidden,
    .reservation-settings-extension.reservation-panel-inactive { display: none !important; }
    .reservation-settings-band {
      padding: 14px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      border: 1px solid rgba(112, 154, 206, .22);
      border-radius: 8px;
      background: #fff;
    }
    .reservation-settings-band-head {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(112, 154, 206, .16);
    }
    .reservation-settings-band-head strong { color: var(--ink); font-size: 15px; }
    .reservation-settings-band-head span { color: var(--muted); font-size: 12px; }
    .reservation-settings-band .support-group-admin,
    .reservation-settings-band .reservation-channel-heading,
    .reservation-settings-band .service-config-hint,
    .reservation-settings-band > .reservation-channel-qr-upload,
    .reservation-settings-band > .reservation-manager-summary,
    .reservation-settings-band > button[type="submit"] { grid-column: 1 / -1; }
    .reservation-settings-band > .reservation-manager-summary { padding: 0; border-top: 0; }
    .reservation-settings-band > button[type="submit"] { justify-self: end; min-width: 168px; }
    .reservation-settings-subhead {
      grid-column: 1 / -1;
      margin-top: 2px;
      padding: 10px 0 0;
      border-top: 1px solid rgba(112, 154, 206, .16);
      color: #25415f;
      font-size: 13px;
      font-weight: 700;
    }
    .reservation-channel-settings-empty {
      grid-column: 1 / -1;
      padding: 20px;
      border: 1px dashed rgba(112, 154, 206, .34);
      border-radius: 8px;
      color: var(--muted);
      text-align: center;
    }
    .reservation-settings-band > .flow-select-group.is-hidden,
    .reservation-channel-settings-empty.is-hidden { display: none !important; }
    .reservation-manager-grid { padding: 0 14px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .reservation-manager-grid.channel-manager-grid { grid-template-columns: minmax(0, 680px); }
    .reservation-manager-form { padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; border: 1px solid rgba(112, 154, 206, .24); border-radius: 8px; background: rgba(255, 255, 255, .76); }
    .reservation-manager-form-head { grid-column: 1 / -1; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .reservation-manager-form-head strong { color: var(--ink); font-size: 15px; }
    .reservation-manager-form > button[type="submit"] { grid-column: 1 / -1; justify-self: end; min-width: 128px; }
    .reservation-channel-qr-upload { padding: 10px; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: center; border: 1px solid rgba(112, 154, 206, .22); border-radius: 8px; background: #f8fbff; }
    .reservation-channel-qr-upload .flow-select-group { grid-column: 1 / -1; }
    .reservation-channel-qr-upload .support-group-qr-preview { width: 104px; }
    .reservation-channel-qr-upload .support-group-qr-buttons { align-content: center; }
    .reservation-manager-summary { padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid rgba(112, 154, 206, .18); }
    .reservation-manager-list { padding: 0 14px 14px; display: grid; gap: 8px; }
    .reservation-channel-row { min-height: 68px; padding: 11px 12px; display: grid; grid-template-columns: minmax(180px, 1.2fr) repeat(2, minmax(90px, .6fr)) auto; align-items: center; gap: 12px; border: 1px solid rgba(112, 154, 206, .22); border-radius: 8px; background: #fff; }
    .reservation-channel-row strong, .reservation-channel-row span { display: block; }
    .reservation-channel-row small { display: block; margin-top: 3px; color: var(--muted); }
    .reservation-channel-row .actions { justify-content: flex-end; }
    .reservation-channel-row.legacy { background: #f8fafc; }
    .reservation-manager-table-wrap { margin: 0 14px 14px; overflow-x: auto; border: 1px solid rgba(112, 154, 206, .22); border-radius: 8px; }
    .reservation-entry-table { min-width: 940px; }
    .reservation-entry-table td strong, .reservation-entry-table td small { display: block; }
    .reservation-entry-table td small { margin-top: 4px; color: var(--muted); }
    .reservation-entry-table .actions { flex-wrap: nowrap; }
    .reservation-entry-ident { min-width: 210px; display: flex; align-items: center; gap: 10px; }
    .reservation-entry-qr-preview { width: 64px; height: 64px; flex: 0 0 64px; padding: 4px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(45, 93, 215, .28); border-radius: 6px; background: #fff; cursor: pointer; }
    .reservation-entry-qr-preview canvas, .reservation-entry-qr-preview img { width: 54px !important; height: 54px !important; object-fit: contain; }
    .reservation-entry-qr-preview:hover { border-color: #2d5dd7; box-shadow: 0 4px 12px rgba(45, 93, 215, .14); }
    .reservation-code-layout { margin: 0 14px 14px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .65fr); gap: 14px; align-items: start; }
    .reservation-code-section { min-width: 0; padding: 14px; border: 1px solid rgba(112, 154, 206, .24); border-radius: 8px; background: rgba(255, 255, 255, .78); }
    .reservation-code-section > .reservation-settings-band-head { margin-bottom: 12px; }
    .reservation-code-section > .reservation-manager-summary { padding: 0 0 12px; border-top: 0; }
    .reservation-code-table-wrap { margin: 0; }
    .mini-program-code-section { display: grid; gap: 12px; }
    .mini-program-code-preview { width: min(260px, 100%); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px dashed rgba(45, 93, 215, .38); border-radius: 8px; background: #f8fbff; }
    .mini-program-code-preview img { width: 100%; height: 100%; display: block; object-fit: contain; background: #fff; }
    .mini-program-code-preview > div { padding: 24px; display: grid; gap: 8px; color: var(--muted); text-align: center; }
    .mini-program-code-preview > div strong { color: var(--ink); font-size: 16px; }
    .mini-program-code-preview > div span { font-size: 12px; line-height: 1.6; }
    .mini-program-code-meta { display: grid; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.65; }
    .mini-program-code-meta .tag { justify-self: start; }
    .mini-program-code-actions { display: flex; flex-wrap: wrap; gap: 8px; }

    @media (max-width: 720px) {
      .reservation-settings-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .reservation-settings-band { grid-template-columns: 1fr; }
      .reservation-settings-band > *, .reservation-settings-band-head { grid-column: 1; }
      .support-group-admin { grid-template-columns: 1fr; }
      .support-group-qr-preview { width: min(180px, 100%); }
      .reservation-manager-grid { grid-template-columns: 1fr; }
      .reservation-code-layout { grid-template-columns: 1fr; }
      .reservation-manager-form { grid-template-columns: 1fr; }
      .reservation-manager-form > *, .reservation-manager-form-head { grid-column: 1; }
      .reservation-channel-qr-upload { grid-template-columns: 92px minmax(0, 1fr); }
      .reservation-channel-qr-upload .support-group-qr-preview { width: 92px; }
      .reservation-channel-row { grid-template-columns: 1fr 1fr; }
      .reservation-channel-row > :first-child, .reservation-channel-row .actions { grid-column: 1 / -1; }
      .reservation-channel-row .actions { justify-content: flex-start; }
      .channel-mini-code-body { grid-template-columns: 1fr; }
      .channel-mini-code-body .mini-program-code-preview { margin: 0 auto; }
      .channel-mini-code-body .mini-program-code-actions { justify-content: center; }
    }

    .flow-summary {
      padding: 14px 18px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,.62);
    }

    .flow-summary-item {
      min-height: 74px;
      padding: 12px;
      border-radius: 8px;
      border: 1px solid rgba(112, 154, 206, .20);
      background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(239, 249, 255, .70));
      text-align: left;
      cursor: default;
    }

    button.flow-summary-item {
      font: inherit;
      color: inherit;
      cursor: pointer;
      transition: .18s ease;
    }

    button.flow-summary-item:hover,
    button.flow-summary-item.active {
      border-color: rgba(45, 93, 215, .42);
      background: linear-gradient(135deg, rgba(45, 93, 215, .12), rgba(99, 213, 220, .16));
      box-shadow: 0 12px 28px rgba(45, 93, 215, .10);
    }

    .flow-summary-item span {
      display: block;
      color: var(--muted);
      font-size: 12px;
    }

    .flow-summary-item strong {
      display: block;
      margin-top: 8px;
      font-size: 19px;
      color: #1f3966;
    }

    .flow-summary-item.positive strong { color: var(--ok); }
    .flow-summary-item.negative strong { color: var(--danger); }

    .product-filters {
      padding: 14px 18px;
      display: grid;
      grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(130px, 190px));
      gap: 10px;
      border-bottom: 1px solid var(--line);
      background: rgba(248, 252, 255, .72);
    }

    #mallOrderResetFiltersBtn {
      justify-content: center;
      gap: 6px;
      white-space: nowrap;
    }

    #mallOrderResetFiltersBtn.is-active {
      color: #1d51af;
      border-color: rgba(45, 93, 215, .34);
      background: rgba(45, 93, 215, .07);
    }

    .mall-store-toolbar {
      grid-template-columns: minmax(260px, 420px) auto 1fr;
      align-items: end;
      gap: 12px;
    }

    .mall-store-actions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      align-self: end;
    }

    .mall-store-actions .btn {
      min-width: 112px;
      min-height: 44px;
      justify-content: center;
      padding: 0 18px;
      font-size: 14px;
    }

    .mall-store-toolbar #mallStoreHint {
      justify-self: start;
      align-self: end;
      min-height: 38px;
      padding: 0 16px;
      font-size: 13px;
    }

    .pagination {
      padding: 12px 18px 16px;
      border-top: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      background: rgba(248, 252, 255, .56);
      color: var(--muted);
      font-size: 13px;
    }

    .pagination-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .pagination .btn {
      min-height: 34px;
      padding: 0 11px;
    }

    .readonly-detail-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      padding: 12px;
      border-radius: 8px;
      background: rgba(248, 252, 255, .86);
      border: 1px solid rgba(112, 154, 206, .22);
    }

    .readonly-detail-grid div {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .readonly-detail-grid small {
      color: var(--muted);
      font-size: 12px;
    }

    .readonly-detail-grid strong {
      color: #10233f;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mall-address-original {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding: 12px;
      border: 1px solid rgba(112, 154, 206, .22);
      border-radius: 8px;
      background: #f7faff;
    }

    .mall-address-original > div { display: grid; gap: 4px; min-width: 0; }
    .mall-address-original > .full { grid-column: 1 / -1; }
    .mall-address-original small { color: var(--muted); font-size: 12px; }
    .mall-address-original strong { color: #10233f; font-size: 13px; line-height: 1.55; word-break: break-word; }

    .audit-filters {
      padding: 14px 18px;
      display: grid;
      grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(150px, 210px));
      gap: 10px;
      border-bottom: 1px solid var(--line);
      background: rgba(248, 252, 255, .72);
    }

    .field {
      display: grid;
      gap: 6px;
    }

    .field.has-password-toggle {
      position: relative;
    }

    .field.has-password-toggle input {
      padding-right: 46px;
    }

    .field label {
      color: var(--muted);
      font-size: 12px;
    }

    input, select, textarea {
      width: 100%;
      min-height: 38px;
      border: 1px solid #cfdeef;
      border-radius: 8px;
      padding: 8px 10px;
      background: #fff;
      color: var(--text);
      outline: none;
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
    }

    .scan-input-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .scan-input-row .btn {
      min-height: 38px;
      padding: 0 12px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .table-wrap {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    th, td {
      text-align: left;
      padding: 12px 10px;
      border-bottom: 1px solid var(--line);
      font-size: 13px;
      vertical-align: middle;
      word-break: break-word;
    }

    th {
      color: var(--muted);
      font-weight: 600;
      background: rgba(246, 250, 255, .82);
    }

    tbody tr {
      transition: background .15s ease;
    }

    tbody tr:hover {
      background: rgba(237, 247, 255, .58);
    }

    .alert-product-row {
      cursor: pointer;
    }

    .alert-product-row:hover td {
      background: rgba(254, 243, 199, .28);
    }

    tr:last-child td { border-bottom: 0; }

    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      font-size: 12px;
      background: #e2e8f0;
      color: #334155;
      white-space: nowrap;
    }

    .tag.ok { background: #dcfce7; color: var(--ok); }
    .tag.warn { background: #fef3c7; color: var(--warn); }
    .tag.danger { background: #fee2e2; color: var(--danger); }
    .tag.blue { background: #dbeafe; color: var(--blue); }

    .mini-chart {
      display: grid;
      gap: 12px;
    }

    .bar-row {
      display: grid;
      grid-template-columns: 84px 1fr 72px;
      align-items: center;
      gap: 10px;
      font-size: 13px;
    }

    .bar-track {
      height: 10px;
      border-radius: 999px;
      background: #e2e8f0;
      overflow: hidden;
    }

    .bar {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
      box-shadow: 0 0 14px rgba(99, 213, 220, .35);
    }

    .cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 14px 18px 18px;
    }

    .card,
    .product-card {
      padding: 16px;
      display: grid;
      gap: 12px;
    }

    .product-card {
      grid-template-columns: 54px 92px minmax(180px, 1.4fr) minmax(440px, 2.6fr) minmax(130px, .8fr) auto;
      align-items: center;
      gap: 14px;
      padding: 12px;
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow-soft);
    }

    .product-card.dragging {
      opacity: .56;
      border-color: rgba(45, 93, 215, .48);
      box-shadow: 0 14px 34px rgba(45, 93, 215, .16);
    }

    .sort-control {
      display: grid;
      gap: 6px;
      justify-items: center;
    }

    .drag-handle {
      color: #59708e;
      font-size: 19px;
      line-height: 1;
      cursor: grab;
      user-select: none;
    }

    .drag-handle:active { cursor: grabbing; }

    .sort-input {
      width: 44px;
      min-height: 30px;
      padding: 4px;
      text-align: center;
      font-size: 12px;
    }

    .product-image {
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 8px;
      overflow: hidden;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(45, 93, 215, .10), rgba(99, 213, 220, .22));
      border: 1px solid rgba(112, 154, 206, .20);
      color: #2d5dd7;
      font-size: 30px;
      font-weight: 800;
    }

    .product-card .product-image {
      width: 92px;
      aspect-ratio: 1;
      font-size: 24px;
    }

    .product-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .return-photo-thumb {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      overflow: hidden;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(45, 93, 215, .08), rgba(99, 213, 220, .18));
      border: 1px solid rgba(112, 154, 206, .22);
      color: var(--muted);
      font-size: 12px;
      padding: 0;
      cursor: default;
    }

    .return-photo-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    button.return-photo-thumb {
      cursor: pointer;
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }

    button.return-photo-thumb:hover {
      transform: translateY(-1px);
      border-color: rgba(45, 93, 215, .36);
      box-shadow: 0 8px 18px rgba(31, 71, 128, .12);
    }

    .product-card-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding-top: 2px;
      justify-content: flex-end;
    }

    .product-main {
      display: grid;
      gap: 7px;
    }

    .product-main strong {
      font-size: 15px;
    }

    .product-meta {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .product-meta div {
      min-width: 0;
    }

    .product-meta span {
      display: block;
      color: var(--muted);
      font-size: 12px;
    }

    .product-meta strong {
      display: block;
      margin-top: 4px;
      font-size: 13px;
      word-break: break-word;
    }

    .product-supplier {
      display: grid;
      gap: 7px;
      justify-items: start;
    }

    .image-preview {
      width: 100%;
      max-width: 360px;
      aspect-ratio: 4 / 3;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        linear-gradient(135deg, rgba(45, 93, 215, .08), rgba(99, 213, 220, .16)),
        #f3f8fe;
      border: 1px dashed rgba(112, 154, 206, .42);
      color: var(--muted);
      font-size: 12px;
      position: relative;
    }

    .image-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .image-preview.empty {
      padding: 18px;
      text-align: center;
      line-height: 1.7;
    }

    .image-preview.empty strong {
      display: block;
      color: #214b9c;
      font-size: 14px;
      margin-bottom: 4px;
    }

    .image-preview.has-image::after {
      content: "商品图片预览";
      position: absolute;
      left: 10px;
      bottom: 10px;
      padding: 4px 8px;
      border-radius: 8px;
      background: rgba(18, 33, 58, .68);
      color: #fff;
      font-size: 12px;
    }

    .image-tools {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .form-divider {
      grid-column: 1 / -1;
      padding: 12px 0 2px;
      border-top: 1px solid var(--line);
      display: flex;
      align-items: baseline;
      gap: 10px;
    }

    .form-divider strong {
      font-size: 14px;
      color: #19375f;
    }

    .form-divider span {
      color: var(--muted);
      font-size: 12px;
    }

    .mall-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      padding: 0;
    }

    .mall-subnav {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding: 0 18px 14px;
      border-bottom: 1px solid var(--line);
    }

    .nav .mall-subnav {
      display: grid;
      gap: 6px;
      padding: 0 0 4px 18px;
      border-bottom: 0;
      margin-top: -2px;
    }

    .mall-subnav button {
      height: 36px;
      padding: 0 14px;
      border: 1px solid rgba(112, 154, 206, .24);
      border-radius: 999px;
      background: rgba(255, 255, 255, .72);
      color: #60728c;
      font-size: 13px;
      cursor: pointer;
    }

    .nav .mall-subnav button {
      min-height: 34px;
      height: 34px;
      padding: 0 10px;
      border-radius: 8px;
      justify-content: flex-start;
      color: #526b8d;
      background: rgba(255, 255, 255, .48);
      box-shadow: none;
      font-size: 12px;
      transform: none;
    }

    .mall-subnav button.active {
      border-color: rgba(45, 93, 215, .45);
      background: linear-gradient(135deg, rgba(45, 93, 215, .12), rgba(99, 213, 220, .16));
      color: #214b9c;
      font-weight: 800;
    }

    .nav .mall-subnav button.active {
      color: #214b9c;
      background: rgba(45, 93, 215, .10);
      border-color: rgba(45, 93, 215, .24);
    }

    .mall-settings-form {
      display: grid;
      gap: 14px;
    }

    .mall-section {
      margin: 14px 18px 0;
      border: 1px solid rgba(112, 154, 206, .22);
      border-radius: 8px;
      background: rgba(255, 255, 255, .50);
      overflow: hidden;
    }

    .mall-section.is-hidden,
    .mall-savebar.is-hidden,
    .wecom-section.is-hidden,
    .mall-subnav.is-hidden {
      display: none;
    }

    .mall-section-head {
      min-height: 52px;
      padding: 13px 14px;
      border-bottom: 1px solid rgba(112, 154, 206, .18);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .mall-section-head h3 {
      margin: 0;
      color: #10233f;
      font-size: 16px;
    }

    .mall-section .product-filters,
    .mall-section .cards,
    .mall-section .mall-summary {
      padding: 14px;
    }

    .mall-savebar {
      padding: 0 18px;
      display: flex;
      justify-content: flex-end;
    }

    .mall-savebar .btn {
      min-width: 150px;
    }

    .mall-stat {
      min-height: 72px;
      padding: 12px;
      border-radius: 8px;
      border: 1px solid rgba(112, 154, 206, .24);
      background: rgba(255, 255, 255, .74);
      box-shadow: var(--shadow-soft);
    }

    .mall-stat span {
      display: block;
      color: var(--muted);
      font-size: 12px;
    }

    .mall-stat strong {
      display: block;
      margin-top: 8px;
      font-size: 20px;
      color: #10233f;
    }

    .mall-card {
      display: grid;
      grid-template-columns: 96px minmax(180px, 1.2fr) minmax(260px, 1.6fr) auto;
      gap: 14px;
      align-items: center;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,.78);
      box-shadow: var(--shadow-soft);
    }

    .mall-product-id-line {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      margin: 6px 0;
    }

    .mall-product-id-copy {
      min-height: 28px;
      padding: 4px 9px;
      font-size: 12px;
    }

    .mall-reuse-dialog {
      width: min(1080px, calc(100vw - 32px));
      max-height: calc(100vh - 32px);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .mall-reuse-dialog form {
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .mall-reuse-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      padding: 16px 18px 12px;
      border-bottom: 1px solid rgba(112, 154, 206, .16);
      background: linear-gradient(180deg, rgba(248, 252, 255, .92), rgba(255, 255, 255, .86));
    }

    .mall-reuse-grid .field {
      margin: 0;
      min-width: 0;
    }

    .mall-reuse-option {
      align-self: end;
    }

    .mall-reuse-checkline {
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .82);
      color: #10233f;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }

    .mall-reuse-checkline input {
      width: 18px;
      min-height: 18px;
      accent-color: #2d5dd7;
    }

    .mall-reuse-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 18px;
      border-bottom: 1px solid rgba(112, 154, 206, .16);
      color: var(--muted);
      font-size: 13px;
    }

    .mall-reuse-list {
      min-height: 240px;
      max-height: min(52vh, 560px);
      overflow: auto;
      display: grid;
      gap: 10px;
      padding: 14px 18px 18px;
      background: rgba(246, 250, 255, .62);
    }

    .mall-reuse-item {
      display: grid;
      grid-template-columns: auto 72px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px solid rgba(112, 154, 206, .22);
      border-radius: 8px;
      background: rgba(255, 255, 255, .92);
      box-shadow: var(--shadow-soft);
    }

    .mall-reuse-check {
      width: 20px;
      min-height: 20px;
    }

    .mall-reuse-cover {
      width: 72px;
      aspect-ratio: 1;
      border-radius: 8px;
      overflow: hidden;
      display: grid;
      place-items: center;
      border: 1px solid rgba(112, 154, 206, .20);
      background: linear-gradient(135deg, rgba(45, 93, 215, .10), rgba(99, 213, 220, .22));
      color: #2d5dd7;
      font-weight: 800;
      font-size: 22px;
    }

    .mall-reuse-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .mall-reuse-main {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    .mall-reuse-main strong {
      color: #10233f;
      font-size: 15px;
      word-break: break-word;
    }

    .mall-reuse-main p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .mall-reuse-meta {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      min-width: 150px;
    }

    .mall-reuse-actions {
      padding: 14px 18px;
      border-top: 1px solid rgba(112, 154, 206, .16);
      justify-content: flex-end;
      background: rgba(255, 255, 255, .94);
    }

    .mall-card.mall-order-refund-pending {
      border-color: rgba(239, 68, 68, .34);
      background: linear-gradient(135deg, rgba(255, 247, 247, .96), rgba(255, 255, 255, .88));
      box-shadow: 0 16px 36px rgba(185, 28, 28, .10);
    }

    .mall-cover {
      width: 96px;
      aspect-ratio: 1;
      border-radius: 8px;
      overflow: hidden;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(45, 93, 215, .10), rgba(99, 213, 220, .22));
      border: 1px solid rgba(112, 154, 206, .20);
      color: #2d5dd7;
      font-size: 28px;
      font-weight: 800;
    }

    .mall-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .mall-poster-list {
      grid-column: 1 / -1;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: stretch;
    }

    .mall-poster-item {
      width: 168px;
      min-height: 116px;
      border: 1px solid rgba(112, 154, 206, .22);
      border-radius: 8px;
      background: rgba(255, 255, 255, .82);
      overflow: hidden;
      display: grid;
      grid-template-rows: 92px auto;
      box-shadow: var(--shadow-soft);
    }

    .mall-poster-item img {
      width: 100%;
      height: 92px;
      object-fit: cover;
      background: #eef6ff;
    }

    .mall-hero-poster-item {
      width: 260px;
      grid-template-rows: 116px auto;
    }

    .mall-hero-poster-item img {
      height: 116px;
    }

    .mall-hero-poster-item .mall-poster-actions {
      display: grid;
      gap: 8px;
    }

    .mall-poster-action-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .mall-hero-product-select {
      width: 100%;
      min-width: 0;
      height: 34px;
      padding: 0 8px;
      border: 1px solid rgba(112, 154, 206, .28);
      border-radius: 6px;
      background: #f7fbff;
      color: #10233f;
      font-size: 12px;
    }

    .mall-poster-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 7px 8px;
      color: var(--muted);
      font-size: 12px;
    }

    .mall-poster-empty {
      width: 100%;
      padding: 14px 16px;
      border: 1px dashed rgba(112, 154, 206, .42);
      border-radius: 8px;
      color: var(--muted);
      background: rgba(255, 255, 255, .58);
    }

    .mall-main,
    .mall-meta {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .mall-main strong {
      font-size: 15px;
      color: #10233f;
    }

    .mall-main p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .nav-badge {
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      background: #ff4d4f;
      color: #fff;
      font-size: 11px;
      line-height: 18px;
      font-weight: 800;
      box-shadow: 0 6px 14px rgba(255, 77, 79, .22);
    }

    .nav-badge.hidden {
      display: none;
    }

    .order-compact-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .order-compact-meta div {
      min-height: 46px;
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(247, 251, 255, .82);
      border: 1px solid rgba(112, 154, 206, .18);
    }

    .mall-detail-panel {
      grid-column: 1 / -1;
      display: none;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding: 12px;
      border-radius: 8px;
      background: rgba(247, 251, 255, .78);
      border: 1px solid rgba(112, 154, 206, .22);
    }

    .mall-detail-panel.show {
      display: grid;
    }

    .mall-detail-panel .full {
      grid-column: 1 / -1;
    }

    .mall-detail-panel span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 4px;
    }

    .mall-detail-panel strong {
      display: block;
      font-size: 13px;
      color: #10233f;
      word-break: break-word;
    }

    .reservation-proof-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(96px, 132px));
      gap: 10px;
      margin-top: 6px;
    }

    .reservation-proof-grid img {
      display: block;
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 6px;
      border: 1px solid rgba(112, 154, 206, .28);
      background: #eef5fb;
    }

    .reservation-proof-button {
      width: 100%;
      padding: 0;
      overflow: hidden;
      border: 0;
      border-radius: 6px;
      background: transparent;
      cursor: zoom-in;
    }

    .reservation-proof-button img {
      transition: transform .18s ease, filter .18s ease;
    }

    .reservation-proof-button:hover img,
    .reservation-proof-button:focus-visible img {
      transform: scale(1.035);
      filter: brightness(.94);
    }

    .reservation-proof-button:focus-visible {
      outline: 3px solid rgba(45, 93, 215, .26);
      outline-offset: 3px;
    }

    .logistics-package-list {
      display: grid;
      gap: 10px;
    }

    #mallShipModal .mall-ship-form {
      min-width: 0;
      height: calc(100% - 78px);
      overflow: hidden;
      padding: 18px;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 14px;
      box-sizing: border-box;
    }

    #mallShipModal .mall-ship-dialog {
      width: calc(100vw - 16px);
      height: calc(100vh - 16px);
      max-width: none;
      max-height: none;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border-radius: 10px;
    }

    #mallShipModal .mall-ship-layout {
      display: grid;
      grid-template-columns: minmax(430px, 34vw) minmax(620px, 1fr);
      gap: 16px;
      align-items: start;
      width: 100%;
      min-width: 0;
      height: 100%;
      min-height: 0;
      overflow: hidden;
      box-sizing: border-box;
    }

    .mall-ship-order-card,
    .mall-ship-package-panel {
      border: 1px solid rgba(112, 154, 206, .22);
      border-radius: 10px;
      background: rgba(248, 252, 255, .88);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
    }

    .mall-ship-order-card {
      padding: 14px;
      align-self: start;
      width: 100%;
      max-height: calc(100vh - 172px);
      overflow: auto;
      position: sticky;
      top: 0;
      box-sizing: border-box;
    }

    .mall-ship-related-orders {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(112, 154, 206, .2);
    }

    .mall-ship-related-head,
    .mall-ship-related-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .mall-ship-related-head strong {
      color: #10233f;
      font-size: 14px;
    }

    .mall-ship-related-head span {
      color: #2d5dd7;
      font-size: 12px;
      font-weight: 700;
    }

    .mall-ship-related-orders > p {
      margin: 6px 0 10px;
      color: #6c7c94;
      font-size: 12px;
      line-height: 1.55;
    }

    .mall-ship-related-list {
      display: grid;
      gap: 8px;
    }

    .mall-ship-related-option {
      padding: 10px;
      border: 1px solid rgba(112, 154, 206, .24);
      border-radius: 8px;
      background: #fff;
      cursor: pointer;
    }

    .mall-ship-related-option:has(input:checked) {
      border-color: #2d6cdf;
      background: rgba(45, 108, 223, .07);
      box-shadow: 0 0 0 2px rgba(45, 108, 223, .1);
    }

    .mall-ship-related-option input {
      width: 17px;
      height: 17px;
      accent-color: #2d6cdf;
      flex: 0 0 auto;
    }

    .mall-ship-related-option > span {
      display: grid;
      gap: 3px;
      min-width: 0;
      flex: 1;
    }

    .mall-ship-related-option strong,
    .mall-ship-related-option small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mall-ship-related-option small,
    .mall-ship-related-option em,
    .mall-ship-related-empty {
      color: #71819a;
      font-size: 12px;
      font-style: normal;
    }

    .mall-ship-related-empty {
      margin: 0;
      padding: 10px;
      border-radius: 8px;
      background: rgba(112, 154, 206, .08);
      text-align: center;
    }

    .mall-ship-sn-order {
      display: grid;
      gap: 10px;
      padding: 10px;
      border: 1px solid rgba(112, 154, 206, .2);
      border-radius: 8px;
      background: rgba(255, 255, 255, .72);
    }

    .mall-ship-sn-order > header {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: #5d6e88;
      font-size: 12px;
    }

    .mall-ship-sn-order > header strong {
      color: #17345e;
    }

    .mall-ship-package-panel {
      padding: 12px;
      display: grid;
      gap: 12px;
      min-width: 0;
      max-height: calc(100vh - 172px);
      overflow: auto;
      box-sizing: border-box;
    }

    .mall-ship-card-head,
    .mall-ship-package-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(112, 154, 206, .16);
    }

    .mall-ship-card-head span,
    .mall-ship-package-head span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 2px;
    }

    .mall-ship-card-head strong {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 0 10px;
      border-radius: 999px;
      background: #eaf2ff;
      color: #2d5dd7;
      font-size: 12px;
      white-space: nowrap;
    }

    .mall-ship-package-head strong {
      display: block;
      color: #10233f;
      font-size: 13px;
    }

    .shipping-label-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid rgba(7, 193, 96, .24);
      border-radius: 8px;
      background: rgba(7, 193, 96, .07);
      color: #184a34;
      font-size: 13px;
    }

    .shipping-label-status.warn {
      border-color: rgba(232, 91, 22, .28);
      background: #fff7eb;
      color: #8a4a1c;
    }

    .shipping-label-status strong {
      color: inherit;
    }

    .ship-label-state {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 9px;
      border-radius: 999px;
      background: #edf3fb;
      color: #47627e;
      font-size: 12px;
      font-weight: 700;
    }

    .ship-label-state.ready {
      background: rgba(7, 193, 96, .12);
      color: #087a43;
    }

    .ship-label-state.error {
      background: rgba(208, 42, 42, .1);
      color: #b52626;
    }

    .ship-label-error {
      grid-column: 1 / -1;
      margin: 0;
      color: #b52626;
      font-size: 12px;
    }

    .ship-intercept-state {
      grid-column: 1 / -1;
      display: grid;
      gap: 3px;
      margin: 0;
      padding: 9px 11px;
      border: 1px solid rgba(217, 119, 6, .22);
      border-radius: 8px;
      background: rgba(255, 247, 230, .88);
      color: #8a4b08;
      font-size: 12px;
      line-height: 1.5;
    }

    .ship-intercept-state.is-error {
      border-color: rgba(208, 42, 42, .22);
      background: rgba(255, 239, 239, .88);
      color: #a91f1f;
    }

    .ship-intercept-state.is-returned {
      border-color: rgba(7, 153, 96, .22);
      background: rgba(235, 251, 243, .92);
      color: #087a43;
    }

    .ship-intercept-state span,
    .ship-intercept-state small { color: inherit; }

    .mall-intercept-note { color: #a45b08 !important; }

    .shipping-settings-dialog {
      width: min(980px, calc(100vw - 28px));
      max-height: calc(100vh - 28px);
      overflow: auto;
    }

    .shipping-settings-form {
      padding: 18px;
      display: grid;
      gap: 16px;
    }

    .shipping-label-preview-dialog {
      width: min(1040px, calc(100vw - 28px));
      height: min(900px, calc(100vh - 28px));
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: #f4f6f8;
    }

    .shipping-label-preview-meta {
      padding: 10px 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 18px;
      color: #5d6b7d;
      font-size: 13px;
      background: #fff;
      border-top: 1px solid #edf0f4;
      border-bottom: 1px solid #e1e6ec;
    }

    .shipping-label-preview-frame {
      flex: 1;
      width: 100%;
      min-height: 0;
      background: #dfe3e8;
      border: 0;
    }

    .shipping-label-preview-actions {
      padding: 12px 16px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
      background: #fff;
      border-top: 1px solid #e1e6ec;
    }

    .shipping-label-preview-actions .danger-action {
      margin-right: auto;
      color: #b42318;
      border-color: rgba(180, 35, 24, .28);
      background: #fff7f6;
    }

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

    .shipping-intercept-fields .full { grid-column: 1 / -1; }

    @media (max-width: 680px) {
      .shipping-label-preview-dialog { height: calc(100vh - 12px); width: calc(100vw - 12px); }
      .shipping-intercept-fields { grid-template-columns: 1fr; }
      .shipping-intercept-fields .full { grid-column: auto; }
    }

    .shipping-settings-section {
      padding: 14px;
      border: 1px solid rgba(112, 154, 206, .22);
      border-radius: 10px;
      background: rgba(248, 252, 255, .78);
    }

    .shipping-settings-section h3 {
      margin: 0 0 12px;
      color: #10233f;
      font-size: 15px;
    }

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

    .shipping-settings-grid .full {
      grid-column: 1 / -1;
    }

    .shipping-secret-note {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
    }

    .mall-ship-sn-field {
      margin: 0;
      padding: 12px;
      border: 1px solid rgba(232, 91, 22, .36);
      border-left: 4px solid #e85b16;
      border-radius: 8px;
      background: #fff7eb;
    }

    .mall-ship-sn-field small {
      display: block;
      margin-top: 6px;
      color: #8a4a1c;
      font-size: 12px;
    }

    .mall-ship-sn-select-list {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }

    .mall-ship-sn-option {
      display: grid;
      grid-template-columns: minmax(150px, .65fr) minmax(320px, 1.9fr);
      align-items: center;
      gap: 10px;
    }

    .mall-ship-sn-option > small {
      grid-column: 2;
      margin-top: -4px;
    }

    .sn-smart-entry {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .sn-smart-entry input {
      width: 100%;
      min-height: 40px;
      border: 1px solid rgba(45, 93, 215, .26);
      border-radius: 8px;
      background: #fff;
      color: #10233f;
      padding: 0 10px;
    }

    .mall-ship-sn-option strong {
      color: #5f3718;
      font-size: 13px;
    }

    .mall-ship-sn-native-select {
      display: none;
    }

    .mall-ship-sn-results {
      grid-column: 2;
      max-height: 230px;
      overflow: auto;
      border: 1px solid rgba(45, 93, 215, .22);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(16, 35, 63, .12);
    }

    .mall-ship-sn-results[hidden] {
      display: none;
    }

    .mall-ship-sn-results button {
      display: grid;
      grid-template-columns: minmax(130px, .7fr) minmax(0, 1fr);
      gap: 12px;
      width: 100%;
      padding: 10px 12px;
      border: 0;
      border-bottom: 1px solid rgba(112, 154, 206, .18);
      background: #fff;
      color: #10233f;
      text-align: left;
      cursor: pointer;
    }

    .mall-ship-sn-results button:last-child {
      border-bottom: 0;
    }

    .mall-ship-sn-results button:hover,
    .mall-ship-sn-results button:focus-visible {
      background: #eef5ff;
      outline: none;
    }

    .mall-ship-sn-results button strong {
      color: #173f90;
      font-size: 14px;
      word-break: break-all;
    }

    .mall-ship-sn-results button span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .mall-ship-sn-empty {
      padding: 14px 12px;
      color: #a34424;
      font-size: 13px;
    }

    .section-help {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .sn-inventory-table td {
      min-width: 120px;
      vertical-align: top;
    }

    .sn-inventory-table td:first-child {
      min-width: 180px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-weight: 700;
      color: #10233f;
    }

    .sn-customer-cell {
      min-width: 220px !important;
      max-width: 340px;
      white-space: normal;
      line-height: 1.55;
    }

    .sn-import-dialog {
      width: min(680px, calc(100vw - 28px));
    }

    .sn-import-dialog form {
      padding: 18px;
    }

    .sn-supplier-rules-dialog {
      width: min(760px, calc(100vw - 28px));
      max-height: min(780px, calc(100vh - 36px));
      overflow: hidden;
    }

    .sn-supplier-rules-dialog .panel-head > div { min-width: 0; }
    .sn-supplier-rules-dialog .panel-head p { margin: 5px 0 0; }
    .sn-supplier-rule-body { display: grid; gap: 12px; padding: 16px 18px 18px; }
    .sn-supplier-rule-summary { margin: 0; color: #425675; font-size: 13px; font-weight: 700; }
    .sn-supplier-rule-list { display: grid; gap: 8px; max-height: min(520px, calc(100vh - 250px)); overflow-y: auto; }
    .sn-supplier-rule-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 10px;
      padding: 12px 13px;
      border: 1px solid #dbe5f2;
      border-radius: 10px;
      background: #f9fbfe;
    }
    .sn-supplier-rule-main { display: grid; gap: 4px; min-width: 0; }
    .sn-supplier-rule-main strong { overflow: hidden; color: #1d2f4b; text-overflow: ellipsis; white-space: nowrap; }
    .sn-supplier-rule-main span { color: #718096; font-size: 12px; }
    .sn-supplier-rule-card .btn { white-space: nowrap; }

    @media (max-width: 620px) {
      .sn-supplier-rule-card { grid-template-columns: minmax(0, 1fr) auto; }
      .sn-supplier-rule-card .btn { grid-column: 1 / -1; width: 100%; }
    }

    .sn-file-drop {
      padding: 14px;
      border: 1px dashed rgba(45, 93, 215, .35);
      border-radius: 10px;
      background: #f7faff;
    }

    .sn-file-drop small {
      display: block;
      margin-top: 6px;
      color: var(--muted);
    }

    .sn-import-preview {
      padding: 12px 14px;
      border-radius: 9px;
      background: rgba(7, 193, 96, .08);
      color: #17613b;
      font-size: 13px;
      line-height: 1.6;
    }

    .sn-qr-import-dialog {
      width: min(760px, calc(100vw - 28px));
    }

    .sn-qr-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border: 1px dashed rgba(45, 93, 215, .3);
      border-radius: 10px;
      background: #f7faff;
    }

    .sn-qr-actions span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .sn-qr-action-buttons {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      flex: 0 0 auto;
    }

    .sn-qr-upload-btn {
      position: relative;
      overflow: hidden;
      margin: 0;
    }

    .sn-qr-upload-btn input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .sn-qr-parse-actions {
      justify-content: flex-start;
      margin-top: -6px;
    }

    .sn-qr-value-list {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      max-height: 230px;
      overflow: auto;
      padding: 2px;
    }

    .sn-qr-value {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 32px;
      padding: 0 6px 0 10px;
      border-radius: 999px;
      border: 1px solid rgba(7, 193, 96, .24);
      background: rgba(7, 193, 96, .07);
      color: #17613b;
      font-size: 12px;
    }

    .sn-qr-value.is-duplicate {
      border-color: rgba(180, 83, 9, .22);
      background: #fff7ed;
      color: #92400e;
    }

    .sn-qr-value small { font-size: 10px; }

    .sn-qr-value button {
      width: 22px;
      height: 22px;
      border: 0;
      border-radius: 50%;
      background: rgba(15, 23, 42, .08);
      color: currentColor;
      cursor: pointer;
    }

    .mall-ship-order-grid {
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .mall-ship-order-grid .full {
      grid-column: 1 / -1;
    }

    .mall-ship-order-grid div {
      padding: 10px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .78);
      border: 1px solid rgba(112, 154, 206, .14);
    }

    .mall-ship-order-grid small {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 5px;
    }

    .mall-ship-order-grid strong {
      display: block;
      color: #10233f;
      font-size: 13px;
      line-height: 1.45;
      word-break: break-word;
    }

    .mall-ship-order-grid .address strong {
      color: #29405f;
      font-size: 14px;
    }

    .ship-package-row {
      padding: 12px;
      border-radius: 8px;
      background: rgba(248, 252, 255, .86);
      border: 1px solid rgba(112, 154, 206, .22);
      display: grid;
      grid-template-columns: repeat(2, minmax(220px, 1fr));
      gap: 10px;
    }

    .ship-package-row .field {
      margin: 0;
    }

    .ship-package-row .ship-row-head,
    .ship-package-row .ship-row-actions {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .ship-package-row .ship-row-head strong {
      color: #10233f;
    }

    .ship-package-row .ship-row-actions {
      justify-content: flex-end;
    }

    #mallShipForm .form-actions {
      justify-content: space-between;
      padding-top: 12px;
      border-top: 1px solid rgba(112, 154, 206, .18);
      background: rgba(255, 255, 255, .86);
      z-index: 2;
    }

    #mallShipForm .ship-submit-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin-left: auto;
    }

    @media (max-width: 960px) {
      #mallShipModal .mall-ship-dialog {
        overflow: auto;
      }
      #mallShipModal .mall-ship-layout {
        grid-template-columns: 1fr;
        overflow: visible;
      }
      .mall-ship-order-card {
        position: sticky;
        max-height: none;
      }
      .mall-ship-package-panel {
        max-height: none;
      }
    }

    @media (max-width: 680px) {
      .shipping-settings-grid {
        grid-template-columns: 1fr;
      }

      .shipping-settings-grid .full {
        grid-column: auto;
      }
      .mall-ship-dialog {
        width: calc(100vw - 24px);
      }
      .mall-ship-sn-option {
        grid-template-columns: 1fr;
      }
      .mall-ship-sn-option > small {
        grid-column: auto;
      }
      .mall-ship-sn-results {
        grid-column: auto;
      }
      .sn-qr-actions {
        align-items: stretch;
        flex-direction: column;
      }
      .sn-qr-action-buttons {
        display: grid;
        grid-template-columns: 1fr;
      }
    }

    .logistics-package-card {
      padding: 12px;
      border-radius: 8px;
      background: rgba(248, 252, 255, .82);
      border: 1px solid rgba(112, 154, 206, .22);
      display: grid;
      gap: 8px;
    }

    .logistics-package-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .logistics-package-head strong {
      color: #10233f;
    }

    .logistics-package-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: 12px;
    }

    .logistics-timeline {
      display: grid;
      gap: 14px;
      max-height: 58vh;
      overflow: auto;
      padding-right: 4px;
    }

    .logistics-timeline-package {
      padding: 14px;
      border-radius: 8px;
      border: 1px solid rgba(112, 154, 206, .24);
      background: rgba(248, 252, 255, .86);
    }

    .logistics-timeline-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .logistics-timeline-head strong {
      display: block;
      color: #10233f;
      font-size: 15px;
    }

    .logistics-timeline-head span {
      color: var(--muted);
      font-size: 12px;
    }

    .logistics-trace {
      position: relative;
      display: grid;
      gap: 10px;
      padding-left: 18px;
    }

    .logistics-trace-item {
      position: relative;
      padding: 0 0 12px 14px;
      border-left: 1px solid rgba(112, 154, 206, .28);
    }

    .logistics-trace-item::before {
      content: "";
      position: absolute;
      left: -5px;
      top: 3px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #2d5dd7;
      box-shadow: 0 0 0 4px rgba(45, 93, 215, .10);
    }

    .logistics-trace-item:last-child {
      border-left-color: transparent;
      padding-bottom: 0;
    }

    .logistics-trace-item p {
      margin: 0;
      color: #10233f;
      line-height: 1.55;
      font-size: 13px;
    }

    .logistics-trace-item time {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .mall-meta {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mall-meta span {
      display: block;
      color: var(--muted);
      font-size: 12px;
    }

    .mall-meta strong {
      display: block;
      margin-top: 4px;
      font-size: 13px;
      word-break: break-word;
    }

    .order-item-line {
      display: grid;
      gap: 3px;
      padding: 6px 0;
      border-bottom: 1px dashed rgba(112, 154, 206, .28);
      font-weight: 500;
    }

    .order-items-detail {
      display: grid;
      gap: 0;
      margin-top: 4px;
    }

    .order-item-line:last-child {
      border-bottom: 0;
    }

    .order-item-line strong {
      margin: 0;
      color: #10233f;
      font-size: 13px;
    }

    .order-item-line span,
    .order-item-line em {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      font-style: normal;
      white-space: pre-wrap;
    }

    .package-editor-field {
      grid-column: 1 / -1;
    }

    .parameter-editor-field,
    .detail-image-editor-field,
    .service-faq-editor-field {
      grid-column: 1 / -1;
    }

    .package-editor {
      display: grid;
      gap: 10px;
    }

    .parameter-editor {
      display: grid;
      gap: 10px;
    }

    .service-faq-editor {
      display: grid;
      gap: 10px;
    }

    .package-editor-row {
      display: grid;
      grid-template-columns: minmax(140px, 1fr) minmax(110px, 150px) minmax(180px, 1.3fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid rgba(112, 154, 206, .22);
      background: rgba(248, 252, 255, .74);
    }

    .parameter-editor-row {
      display: grid;
      grid-template-columns: minmax(160px, .8fr) minmax(220px, 1.4fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid rgba(112, 154, 206, .22);
      background: rgba(248, 252, 255, .74);
    }

    .service-faq-row {
      display: grid;
      grid-template-columns: minmax(180px, .9fr) minmax(260px, 1.5fr) auto;
      gap: 10px;
      align-items: start;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid rgba(112, 154, 206, .22);
      background: rgba(248, 252, 255, .74);
    }

    .service-faq-row textarea {
      min-height: 74px;
      resize: vertical;
    }

    .package-editor-row input {
      min-height: 36px;
    }

    .parameter-editor-row input {
      min-height: 36px;
    }

    .editor-row-actions {
      display: flex;
      gap: 6px;
      flex-wrap: nowrap;
    }

    .editor-row-actions .btn {
      min-height: 32px;
      padding: 0 8px;
      font-size: 12px;
    }

    .hidden-data-field {
      display: none;
    }

    .detail-image-preview-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 12px;
      margin-top: 10px;
    }

    .detail-image-card {
      border: 1px solid rgba(112, 154, 206, .22);
      border-radius: 8px;
      background: rgba(248, 252, 255, .82);
      overflow: hidden;
      box-shadow: var(--shadow-soft);
    }

    .detail-image-card img {
      width: 100%;
      height: 160px;
      object-fit: cover;
      display: block;
      background: #eef6ff;
    }

    .detail-image-actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      padding: 8px;
    }

    .detail-image-actions .btn {
      min-height: 30px;
      padding: 0 8px;
      font-size: 12px;
    }

    .detail-image-empty {
      grid-column: 1 / -1;
      padding: 14px 16px;
      border: 1px dashed rgba(112, 154, 206, .42);
      border-radius: 8px;
      color: var(--muted);
      background: rgba(255, 255, 255, .58);
      font-size: 12px;
    }

    .review-editor {
      border-bottom: 1px solid rgba(112, 154, 206, .18);
      background: rgba(248, 252, 255, .48);
    }

    .review-content-field,
    .review-images-field,
    .review-avatar-preview,
    .review-image-preview-list {
      grid-column: 1 / -1;
    }

    .review-avatar-preview {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
    }

    .review-avatar-preview img,
    .mall-review-avatar {
      width: 54px;
      height: 54px;
      border-radius: 999px;
      object-fit: cover;
      border: 1px solid rgba(112, 154, 206, .28);
      background: #eef6ff;
    }

    .review-avatar-placeholder,
    .mall-review-avatar.placeholder {
      width: 54px;
      height: 54px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      color: #2d5dd7;
      font-weight: 850;
      background: linear-gradient(135deg, rgba(45, 93, 215, .10), rgba(99, 213, 220, .22));
      border: 1px solid rgba(112, 154, 206, .28);
    }

    .review-image-preview-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .review-image-thumb {
      width: 72px;
      height: 72px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid rgba(112, 154, 206, .22);
      background: #eef6ff;
    }

    .review-image-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .review-image-empty {
      width: 100%;
      padding: 12px 14px;
      border: 1px dashed rgba(112, 154, 206, .36);
      border-radius: 8px;
      color: var(--muted);
      background: rgba(255, 255, 255, .58);
      font-size: 12px;
    }

    .mall-review-card {
      grid-template-columns: 96px minmax(220px, 1.2fr) minmax(260px, 1.8fr) auto;
    }

    .review-stars {
      color: #f59f00;
      letter-spacing: 1px;
      font-weight: 850;
    }

    .review-thumbs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }

    .review-thumbs img {
      width: 56px;
      height: 56px;
      border-radius: 8px;
      object-fit: cover;
      border: 1px solid rgba(112, 154, 206, .22);
      background: #eef6ff;
    }

    .card-title {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .card-title strong {
      font-size: 15px;
    }

    .card dl {
      margin: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .card dt {
      color: var(--muted);
      font-size: 12px;
    }

    .card dd {
      margin: 3px 0 0;
      font-weight: 650;
    }

    .modal {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .42);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 30;
    }

    .modal.show { display: flex; }

	.modal.modal-underlay {
	  background: transparent;
	}

	.modal.modal-underlay .dialog {
	  pointer-events: none;
	}

    .modal.modal-top {
      z-index: 90;
    }

    .dialog {
      width: min(760px, 100%);
      max-height: calc(100vh - 40px);
      overflow: auto;
      background: rgba(255, 255, 255, .94);
      border-radius: 8px;
      box-shadow: 0 20px 60px rgba(0,0,0,.25);
      border: 1px solid rgba(255,255,255,.5);
      backdrop-filter: blur(18px);
    }

    .dialog form {
      padding: 18px;
      display: grid;
      gap: 14px;
    }

    #mallProductModal .dialog,
    #mallReviewModal .dialog {
      width: min(1120px, calc(100vw - 32px));
    }

    #mallCategoryModal .dialog,
    #mallVideoCategoryModal .dialog {
      width: min(760px, calc(100vw - 32px));
    }

    #mallPriceModal .dialog {
      width: min(640px, calc(100vw - 32px));
    }

    #mallLogisticsModal .dialog {
      width: min(860px, calc(100vw - 32px));
    }

    #reservationQrModal .dialog {
      width: min(520px, calc(100vw - 32px));
    }

    .reservation-qr-panel {
      padding: 20px;
      display: grid;
      gap: 16px;
      text-align: center;
    }

    .reservation-qr-product {
      margin: 0;
      color: #233854;
      font-size: 15px;
      font-weight: 750;
    }

    .reservation-qr-canvas {
      width: 260px;
      min-height: 260px;
      margin: 0 auto;
      padding: 12px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(112, 154, 206, .28);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 12px 30px rgba(31, 71, 128, .10);
    }

    .reservation-qr-canvas canvas,
    .reservation-qr-canvas img {
      width: 236px !important;
      height: 236px !important;
      max-width: 100%;
    }

    .reservation-qr-url {
      display: grid;
      gap: 7px;
      text-align: left;
    }

    .reservation-qr-url span {
      color: var(--muted);
      font-size: 12px;
    }

    .reservation-qr-url input {
      width: 100%;
      min-height: 42px;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: #385371;
      background: rgba(248, 252, 255, .86);
    }

    .reservation-qr-panel .actions {
      justify-content: center;
    }

    #mallProductModal .form-grid,
    #mallReviewModal .form-grid {
      grid-template-columns: repeat(2, minmax(240px, 1fr));
      align-items: start;
    }

    #mallCategoryModal .form-grid,
    #mallVideoCategoryModal .form-grid {
      grid-template-columns: repeat(2, minmax(220px, 1fr));
      align-items: start;
    }

    #mallProductModal .actions,
    #mallReviewModal .actions,
    #mallCategoryModal .actions,
    #mallVideoCategoryModal .actions,
    #mallPriceModal .form-actions {
      justify-content: flex-end;
      padding-top: 12px;
      border-top: 1px solid rgba(112, 154, 206, .18);
      background: rgba(255, 255, 255, .86);
      position: sticky;
      bottom: 0;
      z-index: 2;
    }

    #mallProductModal .actions .btn,
    #mallReviewModal .actions .btn,
    #mallCategoryModal .actions .btn,
    #mallVideoCategoryModal .actions .btn,
    #mallPriceModal .form-actions .btn,
    #mallShipForm .form-actions .btn {
      min-width: 108px;
      justify-content: center;
    }

    .scanner-panel {
      display: grid;
      gap: 12px;
      padding: 16px 18px 18px;
    }

    .scanner-frame {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      background: #0f172a;
      border: 1px solid rgba(112, 154, 206, .24);
      aspect-ratio: 4 / 3;
    }

    .scanner-frame video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .scanner-frame::after {
      content: "";
      position: absolute;
      left: 10%;
      right: 10%;
      top: 50%;
      height: 2px;
      background: rgba(99, 213, 220, .9);
      box-shadow: 0 0 18px rgba(99, 213, 220, .8);
    }

    .scanner-hint {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
    }

    .photo-preview-panel {
      padding: 16px 18px 18px;
      display: grid;
      place-items: center;
      background: rgba(248, 252, 255, .72);
    }

    .photo-preview-panel img {
      width: auto;
      max-width: 100%;
      max-height: calc(100vh - 180px);
      border-radius: 8px;
      object-fit: contain;
      box-shadow: 0 18px 48px rgba(31, 71, 128, .16);
    }

    #reservationProofPreviewModal {
      z-index: 100;
      background: rgba(8, 18, 32, .76);
    }

    .reservation-proof-preview-dialog {
      width: min(1120px, calc(100vw - 28px));
      max-height: calc(100vh - 28px);
      overflow: hidden;
      background: #fff;
    }

    .reservation-proof-preview-stage {
      position: relative;
      min-height: min(68vh, 720px);
      padding: 18px 72px;
      display: grid;
      place-items: center;
      background: #101a2a;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .reservation-proof-preview-stage img {
      width: auto;
      max-width: 100%;
      max-height: calc(100vh - 150px);
      object-fit: contain;
      border-radius: 6px;
      box-shadow: 0 20px 55px rgba(0, 0, 0, .34);
      cursor: zoom-out;
      -webkit-user-drag: none;
    }

    .reservation-proof-preview-hint {
      margin: 0;
      padding: 10px 18px 12px;
      color: #60718a;
      background: #fff;
      text-align: center;
      font-size: 13px;
    }

    .reservation-volume-band-action {
      min-height: 36px;
      padding: 0 5px 0 10px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid rgba(39, 103, 214, .28);
      border-radius: 8px;
      background: rgba(236, 244, 255, .82);
      color: #245caf;
      font-size: 13px;
      font-weight: 700;
    }

    .reservation-volume-band-action select {
      min-height: 30px;
      max-width: 148px;
      padding: 3px 26px 3px 8px;
      border: 0;
      border-radius: 6px;
      background-color: #fff;
      color: #17385f;
      font: inherit;
    }

    .reservation-volume-band-detail.blue { color: #2867d7; }
    .reservation-volume-band-detail.ok { color: #218b5b; }
    .reservation-volume-band-detail.warn { color: #b96b00; }
    .reservation-volume-band-detail.danger { color: #d53d4c; }

    .mall-order-card.is-next-review {
      animation: reservation-next-review-pulse 1.2s ease-in-out 2;
      outline: 3px solid rgba(45, 104, 222, .22);
      outline-offset: 3px;
    }

    @keyframes reservation-next-review-pulse {
      0%, 100% { box-shadow: inherit; }
      50% { box-shadow: 0 0 0 7px rgba(45, 104, 222, .14), 0 16px 36px rgba(29, 77, 150, .16); }
    }

    .proof-preview-nav {
      position: absolute;
      top: 50%;
      width: 44px;
      height: 54px;
      padding: 0;
      display: grid;
      place-items: center;
      transform: translateY(-50%);
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 9px;
      color: #fff;
      background: rgba(255, 255, 255, .12);
      font-size: 30px;
      line-height: 1;
    }

    .proof-preview-nav:hover { background: rgba(255, 255, 255, .22); }
    .proof-preview-nav:disabled { display: none; }
    #reservationProofPreviewPrev { left: 14px; }
    #reservationProofPreviewNext { right: 14px; }

    @media (max-width: 640px) {
      .reservation-proof-preview-stage {
        min-height: 58vh;
        padding: 12px 48px;
      }
      .proof-preview-nav { width: 36px; height: 46px; }
      #reservationProofPreviewPrev { left: 7px; }
      #reservationProofPreviewNext { right: 7px; }
    }

    .confirm-dialog {
      width: min(520px, 100%);
    }

    .confirm-panel {
      padding: 18px;
      display: grid;
      gap: 14px;
      background:
        radial-gradient(circle at 100% 0%, rgba(99, 213, 220, .12), transparent 34%),
        rgba(248, 252, 255, .78);
    }

    .confirm-summary {
      margin: 0;
      color: #233854;
      line-height: 1.7;
      font-size: 14px;
    }

    .confirm-list {
      display: grid;
      gap: 8px;
      padding: 12px;
      border: 1px solid rgba(112, 154, 206, .22);
      border-radius: 8px;
      background: rgba(255,255,255,.76);
    }

    .confirm-row {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      font-size: 13px;
    }

    .confirm-row span {
      color: var(--muted);
    }

    .confirm-row strong {
      color: var(--text);
      word-break: break-word;
    }

    .confirm-note {
      margin: 0;
      padding: 10px 12px;
      border-radius: 8px;
      background: #eef6ff;
      color: #29405f;
      line-height: 1.7;
      font-size: 13px;
      border: 1px solid rgba(45, 93, 215, .12);
    }

    .reservation-reject-dialog {
      width: min(620px, 100%);
    }

    .reservation-reject-form {
      padding: 18px;
      display: grid;
      gap: 16px;
      background:
        radial-gradient(circle at 100% 0%, rgba(99, 213, 220, .10), transparent 34%),
        rgba(248, 252, 255, .92);
    }

    .reservation-reject-reason-field,
    .reservation-reject-note-field {
      display: grid;
      gap: 10px;
    }

    .reservation-reject-label {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }

    .reservation-reject-label strong,
    .reservation-reject-note-field > span {
      color: var(--text);
      font-size: 14px;
      font-weight: 750;
    }

    .reservation-reject-label span,
    .reservation-reject-note-field small {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .reservation-reject-note-field em {
      color: #c43d4d;
      font-size: 12px;
      font-style: normal;
    }

    .reservation-reject-choices {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .reservation-reject-choice {
      min-height: 42px;
      padding: 9px 11px;
      border: 1px solid rgba(112, 154, 206, .28);
      border-radius: 7px;
      background: #fff;
      color: #29405f;
      font: inherit;
      font-size: 13px;
      font-weight: 650;
      line-height: 1.45;
      text-align: left;
      cursor: pointer;
    }

    .reservation-reject-choice:hover,
    .reservation-reject-choice.active {
      border-color: #2d5dd7;
      background: #eef5ff;
      color: #1d4fbf;
      box-shadow: 0 0 0 2px rgba(45, 93, 215, .08);
    }

    .reservation-reject-note-field textarea {
      width: 100%;
      min-height: 112px;
      resize: vertical;
      padding: 11px 12px;
      border: 1px solid rgba(112, 154, 206, .36);
      border-radius: 7px;
      background: #fff;
      color: var(--text);
      font: inherit;
      font-size: 14px;
      line-height: 1.65;
      box-sizing: border-box;
    }

    .reservation-reject-note-field textarea:focus {
      outline: none;
      border-color: #2d5dd7;
      box-shadow: 0 0 0 3px rgba(45, 93, 215, .10);
    }

    @media (max-width: 640px) {
      .reservation-reject-choices {
        grid-template-columns: 1fr;
      }

      .reservation-reject-label {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
      }
    }

    #productModal {
      justify-content: flex-end;
      background: rgba(15, 23, 42, .14);
      pointer-events: none;
    }

    #productModal .dialog {
      width: min(720px, calc(100vw - 40px));
      pointer-events: auto;
      position: fixed;
      top: 50%;
      left: 50%;
      right: auto;
      transform: translate(-50%, -50%);
      margin: 0;
      box-shadow: 0 20px 54px rgba(31, 71, 128, .24);
    }

    #productModal .dialog.dragging {
      user-select: none;
      box-shadow: 0 24px 70px rgba(31, 71, 128, .30);
    }

    #productModal .panel-head {
      cursor: move;
    }

    #productModal.show .panel-head::after {
      content: "按住标题栏可拖动";
      margin-left: auto;
      color: var(--muted);
      font-size: 12px;
      font-weight: 400;
    }

    #productModal .panel-head .btn {
      margin-left: 8px;
    }

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

    .hint {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    #moveForm .form-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: start;
    }

    #moveForm .field {
      align-content: start;
    }

    #moveForm .move-product-field {
      grid-column: 1 / -1;
    }

    #moveForm input,
    #moveForm select {
      height: 42px;
      min-height: 42px;
      line-height: 1.2;
    }

    #moveForm textarea {
      min-height: 92px;
      resize: vertical;
    }

    #moveForm .move-qty-field .hint {
      min-height: 18px;
      display: block;
    }

    .empty {
      padding: 34px 18px;
      text-align: center;
      color: var(--muted);
    }

    .admin-list {
      display: grid;
      gap: 10px;
    }

    .admin-row {
      display: grid;
      grid-template-columns: minmax(180px, 1.15fr) minmax(150px, .85fr) minmax(130px, .75fr) minmax(150px, .9fr) minmax(220px, 1.35fr) auto;
      gap: 14px;
      align-items: center;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,.74);
      box-shadow: var(--shadow-soft);
    }

    .admin-meta {
      display: grid;
      gap: 5px;
    }

    .admin-meta span {
      color: var(--muted);
      font-size: 12px;
    }

    .admin-meta strong {
      font-size: 13px;
      word-break: break-word;
    }

    .hidden {
      display: none !important;
    }

    .login-screen {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      padding: 28px;
      background:
        linear-gradient(115deg, rgba(45, 93, 215, .07) 0 1px, transparent 1px 26px),
        linear-gradient(25deg, rgba(99, 213, 220, .07) 0 1px, transparent 1px 30px),
        radial-gradient(circle at 18% 8%, rgba(99, 213, 220, .34), transparent 30%),
        radial-gradient(circle at 88% 6%, rgba(45, 93, 215, .20), transparent 34%),
        linear-gradient(180deg, #fbfdff, #eef8ff);
    }

    .login-card {
      width: min(980px, 100%);
      min-height: 590px;
      border-radius: 8px;
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(103, 157, 213, .25);
      box-shadow: 0 28px 80px rgba(40, 84, 150, .16);
      backdrop-filter: blur(18px);
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 1.04fr) minmax(380px, .96fr);
    }

    .login-showcase {
      padding: 42px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background:
        radial-gradient(circle at 20% 14%, rgba(99, 213, 220, .30), transparent 32%),
        linear-gradient(145deg, rgba(45, 93, 215, .12), rgba(99, 213, 220, .10)),
        rgba(244, 251, 255, .72);
      border-right: 1px solid rgba(103, 157, 213, .20);
      position: relative;
    }

    .login-showcase::after {
      content: "";
      position: absolute;
      inset: 20px;
      border: 1px solid rgba(85, 145, 211, .15);
      border-radius: 8px;
      pointer-events: none;
    }

    .login-logo {
      width: 250px;
      max-width: 76%;
      display: block;
      position: relative;
      z-index: 1;
    }

    .login-showcase h1 {
      font-size: 34px;
      margin: 36px 0 0;
      letter-spacing: 0;
      position: relative;
      z-index: 1;
    }

    .login-showcase p {
      margin: 12px 0 0;
      color: var(--muted);
      line-height: 1.8;
      font-size: 14px;
      max-width: 400px;
      position: relative;
      z-index: 1;
    }

    .login-feature-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      position: relative;
      z-index: 1;
    }

    .login-feature {
      min-height: 78px;
      padding: 13px;
      border-radius: 8px;
      background: rgba(255,255,255,.56);
      border: 1px solid rgba(103, 157, 213, .20);
      box-shadow: 0 10px 24px rgba(55, 109, 177, .05);
    }

    .login-feature strong {
      display: block;
      color: #214b9c;
      font-size: 14px;
    }

    .login-feature span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-top: 7px;
      line-height: 1.5;
    }

    .login-form-panel {
      padding: 48px 44px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 18px;
      background: rgba(255,255,255,.72);
    }

    .login-form-panel h2 {
      margin: 0;
      font-size: 25px;
      letter-spacing: 0;
    }

    .login-form-panel > p {
      margin: -8px 0 4px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
    }

    .login-field {
      position: relative;
    }

    .login-field input {
      min-height: 46px;
      background: rgba(255,255,255,.82);
    }

    .login-field.has-password-toggle input {
      padding-right: 46px;
    }

    .password-toggle {
      position: absolute;
      right: 10px;
      bottom: 8px;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: transparent;
      color: #60718a;
      box-shadow: none;
      border: 0;
      padding: 0;
      transition: background .18s ease, color .18s ease;
    }

    .password-toggle:hover {
      background: rgba(45, 93, 215, .08);
      color: var(--brand);
      transform: none;
      box-shadow: none;
    }

    .password-toggle svg {
      width: 19px;
      height: 19px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .login-submit {
      justify-content: center;
      min-height: 46px;
      margin-top: 2px;
    }

    .login-options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: -4px;
    }

    .login-check {
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #40556f;
      font-size: 13px;
      user-select: none;
    }

    .login-check input {
      width: 16px;
      min-height: 16px;
      accent-color: var(--brand);
    }

    .login-hint {
      padding: 13px 14px;
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(45, 93, 215, .08), rgba(99, 213, 220, .14));
      color: #29405f;
      font-size: 12px;
      line-height: 1.8;
      border: 1px solid rgba(96, 150, 208, .18);
    }

    .login-hint strong {
      display: block;
      margin-bottom: 5px;
      color: #214b9c;
    }

    .login-hint code {
      color: #1c4d92;
      font-family: inherit;
      font-weight: 650;
    }

    .login-error-modal {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(18, 33, 58, .20);
      backdrop-filter: blur(10px);
    }

    .login-error-card {
      width: min(360px, 100%);
      padding: 30px 28px 26px;
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,251,255,.94)),
        #fff;
      border: 1px solid rgba(103, 157, 213, .28);
      box-shadow: 0 28px 80px rgba(35, 75, 132, .22);
      text-align: center;
    }

    .login-error-logo {
      display: block;
      width: 210px;
      max-width: 88%;
      height: auto;
      margin: 0 auto 18px;
    }

    .login-error-card p {
      margin: 0 0 22px;
      color: #233854;
      font-size: 15px;
      line-height: 1.7;
    }

    .login-error-card .btn {
      justify-content: center;
      min-width: 112px;
    }

    .user-chip {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      border-radius: 8px;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(112, 154, 206, .24);
      color: #29405f;
      font-size: 13px;
      box-shadow: var(--shadow-soft);
    }

    .permission-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: start;
    }

    .permission-group {
      display: grid;
      gap: 8px;
      padding: 12px;
      border-radius: 8px;
      border: 1px solid rgba(112, 154, 206, .22);
      background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(247,252,255,.70));
    }

    .permission-bulk-toolbar {
      position: sticky;
      top: 70px;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
      padding: 10px 12px;
      border: 1px solid rgba(112, 154, 206, .28);
      border-radius: 10px;
      background: rgba(248, 252, 255, .96);
      box-shadow: 0 8px 20px rgba(39, 78, 124, .08);
      backdrop-filter: blur(12px);
    }

    .permission-bulk-toolbar > span { color: #29405f; font-size: 13px; font-weight: 700; }
    .permission-bulk-toolbar > span.is-dirty { color: #a14f00; }
    .permission-actions-sticky {
      position: sticky;
      bottom: 12px;
      z-index: 5;
      justify-content: flex-end;
      padding: 10px;
      border: 1px solid rgba(112, 154, 206, .26);
      border-radius: 10px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 -8px 20px rgba(39, 78, 124, .08);
      backdrop-filter: blur(12px);
    }

    .permission-group-collapse { display: none; }

    .permission-group-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #214b9c;
      font-size: 13px;
      font-weight: 750;
    }

    .permission-group-title-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .permission-group-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 30px;
      padding: 0 9px;
      border: 1px solid rgba(45, 93, 215, .24);
      border-radius: 999px;
      color: #214b9c;
      background: #fff;
      font-size: 12px;
      font-weight: 650;
      cursor: pointer;
    }

    .permission-group-toggle input {
      width: 15px;
      min-height: 15px;
      accent-color: var(--brand);
    }

    .wecom-permission-bulk-note {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 14px;
      padding: 11px 12px;
      border: 1px solid #cfe0f6;
      border-radius: 8px;
      color: #29405f;
      background: #f5f9ff;
      font-size: 12px;
    }

    .wecom-permission-bulk-note strong { color: #214b9c; }

    .permission-group-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .permission-option {
      min-height: 44px;
      border-radius: 8px;
      border: 1px solid rgba(112, 154, 206, .24);
      background: rgba(255,255,255,.72);
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      color: #29405f;
      font-size: 13px;
    }

    .permission-option input {
      width: 16px;
      min-height: 16px;
      accent-color: var(--brand);
    }

    .permission-option.disabled {
      opacity: .6;
    }

    .export-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding: 18px;
    }

    .export-option {
      min-height: 58px;
      border: 1px solid rgba(112, 154, 206, .24);
      border-radius: 8px;
      background: rgba(255,255,255,.72);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      color: #29405f;
    }

    .export-option input {
      width: 17px;
      min-height: 17px;
      accent-color: var(--brand);
    }

    .export-option strong {
      display: block;
      font-size: 14px;
    }

    .export-option span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
    }

    .admin-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .return-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
      min-width: 112px;
      max-width: 128px;
    }

    .return-actions .btn {
      min-height: 32px;
      padding: 0 8px;
      justify-content: center;
      font-size: 12px;
    }

    #returns table {
      min-width: 1060px;
      table-layout: auto;
    }

    #returns th:nth-child(1), #returns td:nth-child(1) { width: 140px; }
    #returns th:nth-child(2), #returns td:nth-child(2) { width: 130px; }
    #returns th:nth-child(3), #returns td:nth-child(3) { width: 128px; }
    #returns th:nth-child(4), #returns td:nth-child(4) { width: 70px; }
    #returns th:nth-child(5), #returns td:nth-child(5) { width: 160px; }
    #returns th:nth-child(6), #returns td:nth-child(6) { width: 70px; }
    #returns th:nth-child(7), #returns td:nth-child(7) { width: 90px; }
    #returns th:nth-child(8), #returns td:nth-child(8) { width: 136px; }
    #returns th:nth-child(9), #returns td:nth-child(9) { width: 90px; }
    #returns th:nth-child(10), #returns td:nth-child(10) { width: 128px; }

    .admin-avatar {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: #e0f2fe;
      color: var(--brand);
      font-weight: 800;
    }

    .admin-top {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      background: #102027;
      color: #fff;
      padding: 12px 14px;
      border-radius: 8px;
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(10px);
      transition: .2s ease;
      z-index: 40;
      pointer-events: none;
      max-width: min(360px, calc(100vw - 32px));
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    .oa-status-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 18px;
      border: 1px solid #d8e4ef;
      border-radius: 12px;
      background: linear-gradient(135deg, #f5fbff, #fff);
    }

    .oa-status-copy {
      display: grid;
      gap: 4px;
    }

    .oa-status-copy strong { font-size: 15px; }
    .oa-status-copy span { color: var(--muted); font-size: 12px; }

    .oa-workbench {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
      gap: 16px;
      align-items: start;
    }

    .oa-editor {
      display: grid;
      gap: 16px;
    }

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

    .oa-product-picker {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      max-height: 230px;
      overflow-y: auto;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #f8fafc;
    }

    .oa-product-option {
      display: grid;
      grid-template-columns: auto 42px minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      min-width: 0;
      padding: 8px;
      border: 1px solid transparent;
      border-radius: 9px;
      background: #fff;
      cursor: pointer;
    }

    .oa-product-option:hover { border-color: #a9c9e6; }
    .oa-product-option img {
      width: 42px;
      height: 42px;
      object-fit: cover;
      border-radius: 7px;
      background: #edf2f7;
    }
    .oa-product-option strong,
    .oa-product-option small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .oa-product-option small { color: var(--muted); margin-top: 3px; }

    .oa-material-box {
      display: grid;
      gap: 12px;
      padding: 15px;
      border: 1px dashed #b9ccdc;
      border-radius: 12px;
      background: #f8fbfd;
    }

    .oa-material-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .oa-material-head strong { font-size: 14px; color: #243946; }
    .oa-material-head span { color: var(--muted); font-size: 12px; }

    .oa-material-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: end;
    }

    .oa-material-preview {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .oa-material-card {
      position: relative;
      overflow: hidden;
      min-height: 92px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #fff;
    }

    .oa-material-card img { width: 100%; height: 92px; object-fit: cover; display: block; }
    .oa-material-card button {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 25px;
      height: 25px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(17, 32, 42, .78);
      color: #fff;
      cursor: pointer;
    }

    .oa-material-empty {
      grid-column: 1 / -1;
      padding: 14px;
      border-radius: 8px;
      background: #fff;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }

    .oa-preview-shell {
      position: sticky;
      top: 92px;
      padding: 16px;
      border-radius: 20px;
      background: #17232b;
      box-shadow: 0 18px 40px rgba(23, 35, 43, .16);
    }

    .oa-preview-label {
      display: flex;
      justify-content: space-between;
      color: rgba(255,255,255,.72);
      font-size: 12px;
      padding: 0 3px 12px;
    }

    .oa-phone {
      width: 100%;
      min-height: 620px;
      max-height: calc(100vh - 180px);
      overflow-y: auto;
      border-radius: 12px;
      background: #fff;
    }

    .oa-preview-head { padding: 24px 22px 8px; }
    .oa-preview-head h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.35; color: #151515; }
    .oa-preview-meta { color: #8c8c8c; font-size: 13px; }
    .oa-preview-body { padding: 8px 22px 36px; color: #333; font-size: 15px; line-height: 1.8; }
    .oa-preview-body img { display: block; width: 100%; height: auto; margin: 14px 0; border-radius: 4px; }

    .oa-article-actions { display: flex; gap: 7px; flex-wrap: wrap; }
    .oa-empty { color: var(--muted); text-align: center; padding: 24px; }

    .wecom-workspace-bar {
      display: grid;
      grid-template-columns: minmax(240px, 360px) 1fr;
      gap: 14px;
      align-items: end;
    }

    .wecom-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 14px;
    }

    .wecom-summary-item {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: linear-gradient(145deg, #fff, #f6fbff);
    }

    .wecom-summary-item span { color: var(--muted); font-size: 12px; }
    .wecom-summary-item strong { display: block; margin-top: 7px; font-size: 24px; color: #173b6c; }

    .wecom-layout {
      display: grid;
      grid-template-columns: minmax(280px, .85fr) minmax(440px, 1.5fr);
      gap: 14px;
    }

    .wecom-enterprise-list { display: grid; gap: 10px; }

    .wecom-enterprise-card {
      width: 100%;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .wecom-enterprise-card.active {
      border-color: rgba(45, 93, 215, .52);
      box-shadow: 0 0 0 3px rgba(45, 93, 215, .08);
      background: #f8fbff;
    }

    .wecom-enterprise-mark {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(145deg, #2d5dd7, #43b8c5);
      font-size: 18px;
      font-weight: 800;
    }

    .wecom-enterprise-mark svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    /* Device SN operations dashboard */
    .device-dashboard-view { color: #17233b; }
    .device-dashboard-shell { display: grid; gap: 14px; }
    .device-dashboard-head,
    .device-detail-head,
    .device-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }
    .device-dashboard-head {
      padding: 18px 20px;
      border: 1px solid rgba(113, 137, 172, .22);
      border-radius: 12px;
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 10px 26px rgba(40, 73, 121, .06);
    }
    .device-dashboard-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .device-dashboard-head h2,
    .device-detail-head h3,
    .device-card-head h3 { margin: 0; color: #17233b; }
    .device-dashboard-head h2 { font-size: 23px; line-height: 1.3; }
    .device-detail-head h3,
    .device-card-head h3 { font-size: 17px; }
    .device-dashboard-head p,
    .device-detail-head p,
    .device-card-head p { margin: 5px 0 0; color: #738096; font-size: 12px; line-height: 1.55; }
    .device-sync-chip {
      min-height: 26px;
      padding: 4px 9px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1px solid #bbdfd0;
      border-radius: 7px;
      background: #effaf5;
      color: #147a57;
      font-size: 12px;
      font-weight: 700;
    }
    .device-sync-chip.is-warning { border-color: #f1d39c; background: #fff8e9; color: #9a5a00; }
    .device-sync-chip.is-danger { border-color: #f3b8bc; background: #fff1f2; color: #b32332; }
    .device-dashboard-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
    .device-dashboard-actions .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
    .device-month-field,
    .device-supplier-field { display: grid; grid-template-columns: auto 136px; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 1px solid #d8dee9; border-radius: 8px; background: #fff; }
    .device-supplier-field { grid-template-columns: auto minmax(150px, 190px); }
    .device-month-field span,
    .device-supplier-field span { color: #667085; font-size: 12px; font-weight: 700; white-space: nowrap; }
    .device-month-field input { width: 136px; border: 0; outline: 0; color: #26334d; background: transparent; }
    .device-supplier-field select { min-width: 0; height: 38px; border: 0; outline: 0; color: #26334d; background: transparent; }
    .device-upload-btn { position: relative; overflow: hidden; }
    .device-upload-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

    .device-kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
    .device-kpi-card {
      min-height: 92px;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      padding: 14px 15px;
      border: 1px solid rgba(113, 137, 172, .22);
      border-radius: 10px;
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 8px 22px rgba(40, 73, 121, .05);
    }
    .device-kpi-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #eef4ff; color: #3165cf; font-size: 20px; }
    .device-kpi-card.is-ok .device-kpi-icon { background: #eaf9f3; color: #148660; }
    .device-kpi-card.is-warn .device-kpi-icon { background: #fff5df; color: #cc7a00; }
    .device-kpi-card.is-dormant .device-kpi-icon { background: #f1ecff; color: #7043b5; }
    .device-kpi-card.is-danger .device-kpi-icon { background: #fff0f2; color: #cc3345; }
    .device-kpi-card span { display: block; color: #78859a; font-size: 12px; }
    .device-kpi-card strong { display: block; margin-top: 3px; color: #17233b; font-size: 25px; line-height: 1.05; }
    .device-kpi-card small { display: block; margin-top: 5px; color: #98a2b3; font-size: 11px; }

    .device-overview-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); gap: 12px; }
    .device-progress-card,
    .device-owner-card,
    .device-detail-panel {
      border: 1px solid rgba(113, 137, 172, .22);
      border-radius: 11px;
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 9px 24px rgba(40, 73, 121, .05);
    }
    .device-progress-card,
    .device-owner-card { min-height: 205px; padding: 16px 18px; }
    .device-text-button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; border: 0; background: transparent; color: #315cb6; font-size: 12px; font-weight: 700; }
    .device-progress-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 14px; }
    .device-progress-stat { padding: 0 15px; border-right: 1px solid #e4e8ef; text-align: center; }
    .device-progress-stat:first-child { padding-left: 0; }
    .device-progress-stat:last-child { padding-right: 0; border-right: 0; }
    .device-progress-stat span { display: block; color: #7a8698; font-size: 11px; }
    .device-progress-stat strong { display: block; margin-top: 5px; color: #234fb4; font-size: 18px; }
    .device-progress-stat.is-ok strong { color: #15966b; }
    .device-stacked-progress { display: flex; height: 18px; margin-top: 15px; overflow: hidden; border-radius: 7px; background: #e7ebf1; }
    .device-progress-segment { min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; font-size: 10px; font-weight: 800; white-space: nowrap; }
    .device-progress-segment.achieved { background: #22aa78; }
    .device-progress-segment.normal { background: #3069e8; }
    .device-progress-segment.risk { background: #f59d16; }
    .device-progress-segment.unactivated { background: #9aa3b2; }
    .device-progress-segment.pending { background: #d5a33d; }
    .device-progress-segment.missing { background: #d34b5a; }
    .device-progress-segment.pickup { background: #6956c8; }
    .device-progress-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; color: #68758a; font-size: 11px; }
    .device-progress-legend span { display: inline-flex; align-items: center; gap: 6px; }
    .device-progress-dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa3b2; }
    .device-progress-dot.achieved { background: #22aa78; }
    .device-progress-dot.normal { background: #3069e8; }
    .device-progress-dot.risk { background: #f59d16; }
    .device-progress-dot.pending { background: #d5a33d; }
    .device-progress-dot.missing { background: #d34b5a; }
    .device-progress-dot.pickup { background: #6956c8; }
    .device-progress-foot { margin-top: 8px; color: #758197; font-size: 11px; }
    .device-owner-list { display: grid; gap: 12px; margin-top: 15px; }
    .device-owner-row { display: grid; grid-template-columns: minmax(78px, 1fr) max-content minmax(60px, .9fr); align-items: center; gap: 8px; color: #526178; font-size: 12px; }
    .device-owner-row strong { overflow: hidden; color: #25324a; text-overflow: ellipsis; white-space: nowrap; }
    .device-owner-meter { height: 5px; overflow: hidden; border-radius: 999px; background: #e8ebf0; }
    .device-owner-meter span { display: block; height: 100%; border-radius: inherit; background: #3973e7; }

    .device-data-health { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 14px; border: 1px solid #c7e4d8; border-radius: 9px; background: #f2fbf7; color: #257359; font-size: 12px; }
    .device-data-health.is-warning { border-color: #efd4a2; background: #fff9ed; color: #8f5b00; }
    .device-data-health.is-danger { border-color: #efbdc2; background: #fff2f3; color: #a92635; }
    .device-health-main,
    .device-health-meta { display: flex; align-items: center; gap: 7px; }
    .device-health-meta { flex-wrap: wrap; justify-content: flex-end; color: inherit; opacity: .86; }

    .device-detail-panel { overflow: hidden; }
    .device-detail-head { padding: 15px 17px 11px; }
    .device-detail-head-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
    .device-detail-head-actions .btn { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; }
    .device-wechat-sync-btn { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid #b9dfcc; border-radius: 999px; background: #effaf4; color: #14734e; font-size: 11px; font-weight: 750; white-space: nowrap; }
    .device-wechat-sync-btn:hover { border-color: #75c29a; background: #e6f7ee; }
    .device-wechat-sync-btn.is-loading,
    .device-wechat-sync-btn.is-pending { border-color: #d7dfe9; background: #f5f7fa; color: #66758b; }
    .device-wechat-sync-btn.is-error { border-color: #efc2c7; background: #fff2f3; color: #a92c3a; }
    .device-wechat-sync-btn:disabled { cursor: wait; opacity: .72; }

    .mall-order-wechat-sync-btn {
      min-height: 32px;
      gap: 5px;
      border-color: #d7e2dd;
      background: #f7faf8;
      color: #3f6656;
      font-weight: 700;
    }
    .mall-order-wechat-sync-btn:hover,
    .mall-order-wechat-sync-btn.is-ready { border-color: #b9dfcc; background: #eff9f3; color: #14734e; }
    .mall-order-wechat-sync-btn.is-loading,
    .mall-order-wechat-sync-btn.is-pending { border-color: #dce2ea; background: #f7f8fa; color: #69778a; }
    .mall-order-wechat-sync-btn.is-error { border-color: #efc2c7; background: #fff5f5; color: #a92c3a; }
    .mall-order-wechat-sync-btn:disabled { cursor: wait; opacity: .72; }
    .device-sms-status-badge { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid #cce6da; border-radius: 999px; background: #f0faf5; color: #207759; font-size: 11px; font-weight: 750; white-space: nowrap; }
    .device-sms-status-badge.is-loading { border-color: #dce3ec; background: #f5f7fa; color: #718096; }
    .device-sms-status-badge.is-off { border-color: #efd4a2; background: #fff8ea; color: #925d05; }
    .device-sms-status-badge.is-error { border-color: #efc2c7; background: #fff2f3; color: #a92c3a; }
    .device-status-tabs { display: flex; gap: 22px; padding: 0 17px; border-bottom: 1px solid #e3e7ed; overflow-x: auto; }
    .device-status-tabs button { position: relative; min-height: 41px; padding: 0; background: transparent; color: #69758a; white-space: nowrap; font-size: 12px; }
    .device-status-tabs button::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; }
    .device-status-tabs button.active { color: #2859c3; font-weight: 800; }
    .device-status-tabs button.active::after { background: #2f69df; }
    .device-status-tabs strong { margin-left: 3px; font-size: 12px; }
    .device-filters { display: grid; grid-template-columns: minmax(210px, 1.4fr) repeat(8, minmax(102px, .75fr)) auto auto; align-items: end; gap: 9px; padding: 11px 17px; }
    .device-filters > label:not(.device-checkbox-filter) { display: grid; gap: 4px; }
    .device-filters label > span { color: #7a8698; font-size: 10px; font-weight: 700; }
    .device-filters input,
    .device-filters select { min-width: 0; height: 38px; border: 1px solid #d9dee8; border-radius: 7px; background: #fff; color: #2b3850; padding: 0 10px; }
    .device-search-field { position: relative; }
    .device-search-field i { position: absolute; bottom: 11px; left: 11px; color: #8792a4; }
    .device-search-field input { padding-left: 32px; }
    .device-checkbox-filter { min-height: 38px; display: flex; align-items: center; gap: 6px; padding-bottom: 1px; white-space: nowrap; }
    .device-checkbox-filter input { width: 15px; height: 15px; }
    .device-checkbox-filter span { font-size: 12px !important; color: #526178 !important; }
    .device-table-selection { display: none; align-items: center; gap: 10px; min-height: 38px; margin: 0 17px 10px; padding: 6px 10px; border: 1px solid #c9dafc; border-radius: 7px; background: #f1f6ff; color: #31508a; font-size: 12px; }
    .device-table-selection.is-visible { display: flex; }
    .device-table-selection button { padding: 3px 6px; background: transparent; color: #275dc8; font-weight: 700; }
    .device-table-wrap { border-top: 1px solid #e5e8ee; }
    .device-dashboard-table { min-width: 1520px; }
    .device-dashboard-table th { color: #6e7a8e; background: #fafbfc; font-size: 11px; white-space: nowrap; }
    .device-dashboard-table td { color: #38465d; font-size: 11px; vertical-align: middle; }
    .device-dashboard-table td strong { color: #202d45; }
    .device-sn-cell { display: grid; gap: 3px; min-width: 145px; }
    .device-sn-cell small,
    .device-customer-order small { color: #8994a5; }
    .device-sn-cell .device-sn-supplier { display: flex; align-items: center; gap: 4px; color: #59708f; }
    .device-customer-order { display: grid; gap: 2px; max-width: 210px; }
    .device-customer-order span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .device-wechat-check-badge { width: max-content; max-width: 100%; min-height: 20px; display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 2px 7px; border: 1px solid #d9e1ea; border-radius: 999px; background: #f5f7fa; color: #647287; font-size: 10px; font-weight: 750; line-height: 1.2; white-space: nowrap; }
    .device-customer-order .device-wechat-check-badge { display: inline-flex; }
    .device-wechat-check-badge.is-added { border-color: #b9dfcc; background: #eaf8f0; color: #14734e; }
    .device-wechat-check-badge.is-not_matched { border-color: #f0d3a4; background: #fff8ea; color: #8c5b08; }
    .device-wechat-check-badge.is-error { border-color: #efc2c7; background: #fff2f3; color: #a92c3a; }
    .device-wechat-check-badge.is-no_phone { color: #7c8798; }
    .device-wechat-check-badge.is-manual { border-style: dashed; }
    .device-wechat-check-row { min-width: 0; display: flex; align-items: center; gap: 6px; }
    .device-wechat-edit-button { flex: 0 0 auto; padding: 2px 3px; background: transparent; color: #4267a5; font-size: 10px; font-weight: 750; }
    .device-wechat-edit-button:hover { color: #174fa8; text-decoration: underline; }
    .device-detail-hero .device-wechat-check-row { margin-top: 5px; }
    .device-detail-hero .device-wechat-check-badge { display: inline-flex; margin-top: 0; }
    .device-progress-cell { min-width: 112px; }
    .device-progress-cell strong { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-size: 11px; }
    .device-progress-track { height: 5px; overflow: hidden; border-radius: 999px; background: #e7ebf1; }
    .device-progress-track span { display: block; height: 100%; border-radius: inherit; background: #328d70; }
    .device-progress-track.is-risk span { background: #ea9314; }
    .device-progress-track.is-pending span { background: #d5a33d; }
    .device-progress-track.is-missing span { background: #b8bec8; }

    .device-award-note,
    .device-activation-cell small {
      display: block;
      margin-top: 4px;
      color: #8a6a26;
      font-size: 10px;
      line-height: 1.35;
    }

    .device-award-note.is-achieved,
    .device-activation-cell small.is-achieved { color: #148660; }

    .device-activation-cell strong { display: block; }
    .device-activation-cell .device-signature-age {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      margin-top: 5px;
      padding: 2px 5px;
      border-radius: 5px;
      background: #edf8f3;
      color: #14734e;
      font-weight: 750;
      white-space: normal;
    }
    .device-activation-cell .device-signature-age > span { display: block; }
    .device-activation-cell .device-signature-age.is-pending { background: #fff7e8; color: #9a6200; }
    .device-activation-cell .device-signature-age.is-unsent { background: #f3f5f8; color: #6f7c90; }
    .device-data-pending { color: #b45309; font-size: 12px; white-space: nowrap; }
    .device-application-progress {
      min-width: 0;
      margin-top: 6px;
      padding-top: 5px;
      border-top: 1px dashed #dbe2ee;
    }
    .device-application-progress-head {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5px;
      color: #56657c;
      font-size: 9px;
      line-height: 1.2;
    }
    .device-application-progress-head span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .device-application-progress-head strong {
      flex: 0 0 auto;
      display: block;
      margin: 0;
      color: #315fc7;
      font-size: 9px;
      line-height: 1.2;
    }
    .device-application-progress-track {
      height: 3px;
      margin-top: 3px;
      overflow: hidden;
      border-radius: 999px;
      background: #e8edf5;
    }
    .device-application-progress-track span { display: block; height: 100%; border-radius: inherit; background: #3973e7; }
    .device-application-progress.is-low .device-application-progress-head strong { color: #bf6b00; }
    .device-application-progress.is-low .device-application-progress-track span { background: #e79218; }
    .device-application-progress.is-pending .device-application-progress-head strong { color: #78869a; }
    .device-application-progress.is-pending .device-application-progress-track { background: repeating-linear-gradient(90deg, #e5eaf1 0 6px, #f6f8fb 6px 10px); }
    .device-application-progress.is-complete .device-application-progress-head strong { color: #16845e; }
    .device-application-progress.is-complete .device-application-progress-track span { background: #24a776; }
    .device-state-stack { display: grid; justify-items: start; gap: 4px; }
    .device-state-pill { min-height: 23px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 6px; background: #eef4ff; color: #315eb8; font-weight: 750; white-space: nowrap; }
    .device-state-pill.achieved { background: #eaf8f2; color: #157d5a; }
    .device-state-pill.risk { background: #fff3df; color: #a96400; }
    .device-state-pill.unactivated { background: #f0f1f3; color: #687183; }
    .device-state-pill.pending { background: #fff7df; color: #916414; }
    .device-state-pill.missing { background: #fff0f2; color: #b32c3d; }
    .device-state-pill.dormant { background: #f1ecff; color: #7043b5; }
    .device-state-pill.pickup { background: #eeeaff; color: #5e43b1; }
    .device-logistics-button { width: 100%; display: grid; justify-items: start; gap: 4px; padding: 3px 2px; border: 0; border-radius: 6px; background: transparent; color: #607087; text-align: left; cursor: pointer; }
    .device-logistics-button:hover { background: #f3f7fd; }
    .device-logistics-button:focus-visible { outline: 2px solid #7fa8f5; outline-offset: 1px; }
    .device-logistics-button:disabled { cursor: wait; opacity: .75; }
    .device-logistics-button small { display: block; max-width: 118px; overflow: hidden; color: #7a879b; text-overflow: ellipsis; white-space: nowrap; }
    .device-logistics-pill { min-height: 23px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 6px; background: #eef4ff; color: #315eb8; font-weight: 780; white-space: nowrap; }
    .device-logistics-button.signed .device-logistics-pill { background: #e8f8f1; color: #147b56; }
    .device-logistics-button.transit .device-logistics-pill,
    .device-logistics-button.delivering .device-logistics-pill { background: #eaf2ff; color: #275fc4; }
    .device-logistics-button.pickup_pending .device-logistics-pill { background: #fff3d8; color: #986007; }
    .device-logistics-button.pickup_pending.is-overdue .device-logistics-pill { background: #fff0e8; color: #b34b21; }
    .device-logistics-button.pickup_pending.is-overdue small { color: #ae4523; font-weight: 750; }
    .device-logistics-button.pending .device-logistics-pill { background: #fff6e6; color: #9a650c; }
    .device-logistics-button.exception .device-logistics-pill { background: #fff0f2; color: #b32c3d; }
    .device-logistics-button.unshipped .device-logistics-pill,
    .device-logistics-button.canceled .device-logistics-pill { background: #f0f1f3; color: #687183; }
    .device-operation-state { display: grid; gap: 5px; min-width: 190px; }
    .device-operation-state span { color: #68758a; white-space: nowrap; }
    .device-operation-state .is-overdue { color: #b32c3d; font-weight: 750; }
    .device-latest-follow-up { min-width: 0; display: grid; gap: 2px; padding-bottom: 5px; border-bottom: 1px dashed #e0e5ed; }
    .device-latest-follow-up > span { color: #7b8799; font-size: 10px; }
    .device-latest-follow-up p { display: -webkit-box; margin: 0; overflow: hidden; color: #25334a; font-size: 11px; font-weight: 680; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
    .device-latest-follow-up.is-empty p { color: #9aa3b2; font-weight: 500; }
    .device-follow-up-summary { display: flex; align-items: center; gap: 7px; min-width: 0; }
    .device-follow-up-summary > span { overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
    .device-follow-up-state { width: max-content; max-width: 100%; padding: 2px 6px; border-radius: 5px; background: #eef3fb; color: #4c607e; font-size: 10px; white-space: nowrap; }
    .device-follow-up-state.contacted,
    .device-follow-up-state.resolved { background: #e9f7f1; color: #177b59; }
    .device-follow-up-state.callback,
    .device-follow-up-state.delay_activation { background: #fff5e4; color: #986208; }
    .device-follow-up-state.unreachable,
    .device-follow-up-state.customer_refused { background: #fff0f2; color: #ad3041; }
    .device-follow-up-state.pickup { background: #eeeaff; color: #5e43b1; }
    .device-operation-state.is-pickup > span:first-child { color: #775fb7; font-weight: 700; }
    .device-detail-recovery-note { display: inline-flex; align-items: center; gap: 5px; color: #6b53b0; font-size: 11px; font-weight: 700; }
    .device-row-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
    .device-row-actions button { padding: 3px 4px; background: transparent; color: #315eb8; font-weight: 750; font-size: 11px; }
    .device-row-actions button.is-danger { color: #b32c3d; }
    .device-row-actions button.is-exchange { color: #08786f; }
    .device-issue-badge { width: max-content; max-width: 100%; display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid #efc78f; border-radius: 6px; background: #fff7e8; color: #935a08; font-size: 9px; font-weight: 750; line-height: 1.3; text-align: left; }
    .device-issue-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .device-issue-badge.is-urgent { border-color: #efb8bf; background: #fff0f2; color: #ad283b; }
    .device-issue-badge.is-resolved { border-color: #bfe1d2; background: #eef9f4; color: #177556; }
    .device-pagination {
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 9px 17px;
      border-top: 1px solid #e5e8ee;
      background: #fff;
    }
    .device-pagination-summary { color: #758197; font-size: 11px; white-space: nowrap; }
    .device-pagination-controls { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
    .device-pagination-controls label { display: flex; align-items: center; gap: 6px; color: #758197; font-size: 11px; white-space: nowrap; }
    .device-pagination-controls select {
      width: 72px;
      height: 32px;
      padding: 0 7px;
      border: 1px solid #d8dee8;
      border-radius: 7px;
      background: #fff;
      color: #34435b;
      font-size: 11px;
    }
    .device-pagination-controls button {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid #d8dee8;
      border-radius: 7px;
      background: #fff;
      color: #315eb8;
      font-size: 17px;
    }
    .device-pagination-controls button:hover:not(:disabled) { border-color: #aebfe1; background: #f2f6ff; }
    .device-pagination-controls button:disabled { color: #b5bdca; background: #f7f8fa; cursor: not-allowed; }
    .device-pagination-controls strong { min-width: 82px; color: #34435b; font-size: 11px; text-align: center; white-space: nowrap; }

    .device-dialog { width: min(760px, calc(100vw - 32px)); max-height: min(850px, calc(100vh - 32px)); overflow: auto; }
    .device-import-dialog,
    .device-detail-dialog { width: min(1000px, calc(100vw - 32px)); }
    .device-operations-dialog { width: min(1120px, calc(100vw - 32px)); }
    .device-modal-body { display: grid; gap: 13px; padding: 16px 18px; }
    .device-modal-actions { padding: 0 18px 18px; }
    .device-import-file { padding: 12px 14px; border: 1px solid #dce3ee; border-radius: 8px; background: #f8fafc; color: #40506a; font-size: 12px; }
    .device-import-source { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding: 11px 12px; border: 1px solid #dce3ee; border-radius: 8px; background: #fff; }
    .device-import-source label { display: grid; gap: 5px; min-width: min(280px, 100%); color: #5c6980; font-size: 11px; font-weight: 700; }
    .device-import-source select { min-height: 38px; }
    .device-import-source > span { color: #7b8799; font-size: 11px; line-height: 1.5; text-align: right; }
    .device-import-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
    .device-import-summary article { padding: 11px; border: 1px solid #e0e5ed; border-radius: 8px; background: #fff; }
    .device-import-summary span { display: block; color: #7b8799; font-size: 11px; }
    .device-import-summary strong { display: block; margin-top: 4px; color: #22324d; font-size: 19px; }
    .device-import-warning { padding: 10px 12px; border-radius: 7px; background: #fff7e8; color: #8d5a06; font-size: 12px; }
    .device-import-warning:empty { display: none; }
    .device-import-preview-wrap { max-height: 370px; }
    .device-settings-form,
    .device-notify-form,
    .device-pickup-form,
    .device-follow-up-form,
    .device-issue-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px 18px 18px; }
    .device-settings-form > label,
    .device-notify-form > label,
    .device-pickup-form > label,
    .device-follow-up-form > label,
    .device-issue-form > label { display: grid; gap: 6px; color: #526178; font-size: 12px; font-weight: 700; }
    .device-wechat-override-form > label small { color: #8490a3; font-size: 10px; font-weight: 500; line-height: 1.5; }
    .device-wechat-override-form > label.is-disabled { opacity: .62; }
    .device-wechat-override-form > label.is-disabled textarea { background: #f3f5f8; cursor: not-allowed; }
    .device-wechat-override-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .device-wechat-override-summary article { min-width: 0; padding: 11px 12px; border: 1px solid #dfe6ef; border-radius: 9px; background: #f8fafc; }
    .device-wechat-override-summary span { display: block; color: #8490a3; font-size: 10px; }
    .device-wechat-override-summary strong { display: block; margin-top: 4px; overflow: hidden; color: #26344c; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .device-follow-up-form > label[hidden] { display: none; }
    .device-follow-up-form > label small,
    .device-issue-form > label small { color: #8490a3; font-size: 10px; font-weight: 500; line-height: 1.5; }
    .device-follow-up-quick { display: grid; gap: 9px; padding: 11px 12px; border: 1px solid #dce4f0; border-radius: 9px; background: #f8fafc; }
    .device-follow-up-quick > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .device-follow-up-quick strong { color: #526178; font-size: 12px; }
    .device-follow-up-quick small { color: #8793a5; font-size: 10px; }
    .device-follow-up-quick-list { display: flex; flex-wrap: wrap; gap: 7px; }
    .device-follow-up-quick-list button { min-height: 30px; padding: 5px 10px; border: 1px solid #d7e0ed; border-radius: 999px; background: #fff; color: #52627a; font-size: 11px; font-weight: 700; transition: border-color .16s ease, background .16s ease, color .16s ease; }
    .device-follow-up-quick-list button:hover { border-color: #8fb0ef; color: #2858ad; }
    .device-follow-up-quick-list button.is-selected { border-color: #4d7bd8; background: #edf3ff; color: #2557b6; box-shadow: inset 0 0 0 1px rgba(77, 123, 216, .08); }
    .device-settings-form input,
    .device-settings-form select,
    .device-settings-form textarea,
    .device-notify-form input,
    .device-notify-form select,
    .device-notify-form textarea,
    .device-pickup-form input,
    .device-pickup-form select,
    .device-pickup-form textarea,
    .device-follow-up-form input,
    .device-follow-up-form select,
    .device-follow-up-form textarea,
    .device-issue-form input,
    .device-issue-form select,
    .device-issue-form textarea { width: 100%; min-height: 40px; border: 1px solid #d9dee8; border-radius: 8px; padding: 9px 10px; background: #fff; color: #26334d; resize: vertical; }
    .device-notify-form { grid-template-columns: 1fr; }
    .device-notify-form label small { justify-self: end; color: #8a95a6; font-weight: 500; }
    .device-notify-form textarea[readonly] { background: #f7f9fc; color: #34425a; cursor: default; }
    .device-notify-guard { display: flex; align-items: flex-start; gap: 7px; padding: 10px 12px; border: 1px solid #cfe1f8; border-radius: 8px; background: #f2f7ff; color: #315d9f; font-size: 12px; line-height: 1.55; }
    .device-notify-guard.is-warning { border-color: #efd4a2; background: #fff8ea; color: #8f5a04; }
    .device-notify-guard.is-danger { border-color: #efc1c6; background: #fff1f2; color: #a12836; }
    .device-pickup-form .full,
    .device-settings-form > .full,
    .device-follow-up-form .full,
    .device-issue-form .full,
    .device-settings-form .device-settings-switch,
    .device-settings-form .device-settings-note,
    .device-settings-form .actions { grid-column: 1 / -1; }
    .device-settings-form > label > .btn { justify-self: start; }
    .device-settings-switch { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 9px !important; padding: 11px 12px; border: 1px solid #dae2ef; border-radius: 8px; background: #f8fafc; }
    .device-settings-switch input { flex: 0 0 auto; width: 16px !important; min-height: 16px !important; margin-top: 2px; }
    .device-settings-switch span { display: grid; gap: 3px; }
    .device-settings-switch small { color: #7f8a9d; font-weight: 500; }
    .device-settings-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px; background: #eff5ff; color: #315cae; font-size: 12px; line-height: 1.6; }
    .device-automation-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(1040px, calc(100vw - 24px)); height: min(820px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); overflow: hidden; }
    .device-automation-dialog > .panel-head { padding: 16px 18px; }
    .device-automation-dialog > .panel-head h2 { font-size: 18px; }
    .device-automation-dialog > .panel-head p { margin-top: 4px; font-size: 11px; line-height: 1.5; }
    .device-automation-shell { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow: hidden; }
    .device-automation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 12px; min-height: 0; overflow-y: auto; padding: 14px 16px; background: #f5f7fb; }
    .device-automation-form > .full { grid-column: 1 / -1; }
    .device-automation-overview { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid #c9d9f4; border-radius: 10px; background: #edf4ff; }
    .device-automation-overview-copy { display: grid; min-width: 0; gap: 3px; }
    .device-automation-overview strong { color: #263750; font-size: 13px; }
    .device-automation-overview small { color: #728097; font-size: 11px; line-height: 1.5; }
    .device-automation-overview .btn { flex: 0 0 auto; background: #fff; }
    .device-automation-state { justify-self: start; display: inline-flex; min-height: 24px; align-items: center; padding: 3px 9px; border-radius: 999px; color: #176f54; background: #e6f5ef; font-size: 11px; font-weight: 750; }
    .device-automation-state.is-off { color: #667185; background: #e9edf3; }
    .device-automation-state.is-preview { color: #805500; background: #fff1cc; }
    .device-automation-state.is-error { color: #a92f3e; background: #ffeaed; }
    .device-automation-section { display: grid; align-content: start; gap: 11px; min-width: 0; padding: 14px; border: 1px solid #dce4ef; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(24, 45, 78, .03); }
    .device-automation-section.is-disabled .device-automation-grid,
    .device-automation-section.is-disabled .device-automation-flow { opacity: .45; }
    .device-automation-section-head { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .device-automation-section-title { display: flex; min-width: 0; align-items: flex-start; gap: 9px; }
    .device-automation-section-title > div { display: grid; min-width: 0; gap: 3px; }
    .device-automation-step { display: inline-grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 7px; color: #2c63c7; background: #edf3ff; font-size: 10px; font-weight: 800; }
    .device-automation-section-head strong { color: #25344d; font-size: 13px; }
    .device-automation-section-head small { color: #7f8a9d; font-size: 11px; line-height: 1.5; }
    .device-automation-inline-switch { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 30px; padding: 5px 10px; border: 1px solid #cbd9ee; border-radius: 7px; color: #315a9d; background: #f4f8ff; font-size: 11px; font-weight: 750; white-space: nowrap; }
    .device-automation-inline-switch input { flex: 0 0 auto; width: 15px; height: 15px; min-height: 15px; margin: 0; accent-color: var(--brand); }
    .device-automation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .device-automation-grid.is-control { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .device-automation-grid.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .device-automation-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .device-automation-grid > label,
    .device-automation-static-field { display: grid; align-content: start; gap: 6px; color: #526178; font-size: 11px; font-weight: 700; }
    .device-automation-grid > label > small,
    .device-automation-static-field > small { color: #8490a3; font-size: 10px; font-weight: 500; line-height: 1.45; }
    .device-automation-static-field > strong { display: flex; align-items: center; min-height: 40px; border: 1px solid #cfe4dc; border-radius: 8px; padding: 9px 10px; color: #157653; background: #f2fbf7; font-size: 13px; }
    .device-automation-grid input,
    .device-automation-grid select { width: 100%; min-height: 40px; border: 1px solid #d9dee8; border-radius: 8px; padding: 9px 10px; color: #26334d; background: #fff; }
    .device-automation-grid .device-settings-switch { grid-column: 1 / -1; }
    .device-automation-master-switch { min-height: 58px; border-color: #cbd9ef; background: #f6f9ff; }
    .device-automation-flow { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 9px; border-radius: 7px; color: #446188; background: #f4f7fb; font-size: 10px; font-weight: 700; line-height: 1.45; }
    .device-automation-flow i { flex: 0 0 auto; color: #4677cf; font-size: 14px; }
    .device-automation-protection-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
    .device-automation-protection-options .device-settings-switch { min-width: 0; min-height: 66px; padding: 10px; border: 1px solid #e0e6ef; border-radius: 8px; background: #fafbfc; }
    .device-automation-protection-options .device-settings-switch strong { font-size: 11px; }
    .device-automation-protection-options .device-settings-switch small { font-size: 10px; line-height: 1.4; }
    .device-day-input { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; overflow: hidden; border: 1px solid #d9dee8; border-radius: 8px; background: #fff; }
    .device-day-input input { min-width: 0; border: 0; border-radius: 0; }
    .device-day-input em { color: #718097; font-size: 11px; font-style: normal; font-weight: 700; text-align: center; }
    .device-automation-form .device-settings-note { border: 1px solid #ccdbf4; background: #eef4ff; }
    .device-automation-form .device-settings-note strong { color: #264f99; }
    .device-automation-actions { z-index: 3; display: flex; align-items: center; justify-content: space-between !important; gap: 14px; margin: 0; padding: 12px 16px; border-top: 1px solid #dce4ef; background: #fff; box-shadow: 0 -8px 18px rgba(38, 55, 80, .06); }
    .device-automation-actions > span { color: #7a879a; font-size: 10px; line-height: 1.45; }
    .device-automation-actions > div { display: flex; flex: 0 0 auto; gap: 8px; }
    .device-automation-actions .btn { min-height: 38px; }
    .device-mail-config-card { grid-column: 1 / -1; display: grid; gap: 12px; padding: 13px; border: 1px solid #d9e1ec; border-radius: 10px; background: #f8fafc; }
    .device-mail-config-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
    .device-mail-config-head > div { display: grid; gap: 3px; }
    .device-mail-config-head strong { color: #25344d; font-size: 13px; }
    .device-mail-config-head small { color: #7f8a9d; line-height: 1.45; }
    .device-mail-source-list { display: grid; gap: 8px; }
    .device-mail-source-row { display: grid; grid-template-columns: minmax(86px, .55fr) minmax(0, 1.2fr) minmax(0, 1.5fr); gap: 10px; align-items: start; padding: 9px 10px; border: 1px solid #e1e7f0; border-radius: 8px; background: #fff; }
    .device-mail-source-row strong { color: #25344d; font-size: 12px; }
    .device-mail-source-row span { color: #657287; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
    .device-mail-source-row.is-empty { display: block; color: #8792a4; }
    .device-mail-status { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 9px; border-radius: 999px; background: #e8f6f0; color: #167a59; font-size: 11px; font-weight: 750; white-space: nowrap; }
    .device-mail-status.is-loading { background: #edf2fa; color: #5d6e89; }
    .device-mail-status.is-error { background: #fff0f2; color: #b12e40; }
    .device-mail-status.is-off { background: #f0f1f3; color: #6e7787; }
    .device-mail-config-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .device-mail-config-fields > label { display: grid; gap: 5px; color: #59677b; font-size: 11px; font-weight: 700; }
    .device-mail-config-fields.is-readonly { display: none; }
    .device-mail-config-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #7f8a9d; font-size: 11px; }
    .device-mail-config-actions .btn { flex: 0 0 auto; min-height: 34px; }
    .device-action-summary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .device-action-summary article { padding: 10px; border: 1px solid #e1e6ed; border-radius: 8px; background: #f9fafb; }
    .device-action-summary span { display: block; color: #8590a1; font-size: 10px; }
    .device-action-summary strong { display: block; margin-top: 4px; color: #26334d; font-size: 13px; overflow-wrap: anywhere; }
    .device-bulk-pickup-dialog { width: min(920px, calc(100vw - 32px)); }
    .device-bulk-pickup-list { display: grid; gap: 7px; max-height: 230px; overflow-y: auto; padding: 9px; border: 1px solid #dfe6ef; border-radius: 9px; background: #f8fafc; }
    .device-bulk-pickup-list article { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #e1e7ef; border-radius: 8px; background: #fff; }
    .device-bulk-pickup-list article > i { color: #24845f; font-size: 17px; }
    .device-bulk-pickup-list article > div { min-width: 0; }
    .device-bulk-pickup-list strong { display: block; overflow: hidden; color: #283750; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .device-bulk-pickup-list span,
    .device-bulk-pickup-list small { display: block; margin-top: 2px; overflow: hidden; color: #7f8b9e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .device-bulk-pickup-list em { padding: 4px 8px; border-radius: 999px; background: #eaf7f1; color: #167a59; font-size: 10px; font-style: normal; font-weight: 750; white-space: nowrap; }
    .device-bulk-pickup-list article.is-skipped { border-color: #eadfc9; background: #fffaf2; }
    .device-bulk-pickup-list article.is-skipped > i { color: #a66a0b; }
    .device-bulk-pickup-list article.is-skipped em { background: #fff0d6; color: #8d5905; }
    .device-pickup-provider-status { grid-column: 1 / -1; padding: 11px 13px; border: 1px solid #c9d8fb; border-radius: 9px; background: #f4f7ff; color: #3158a5; font-size: 12px; line-height: 1.55; }
    .device-pickup-provider-status.is-ready { border-color: #b8dfd0; background: #f0faf6; color: #187052; }
    .device-pickup-provider-status.is-warning { border-color: #efd39b; background: #fff9e9; color: #8a5a08; }
    .device-pickup-provider-status.is-error { border-color: #efc6c6; background: #fff5f5; color: #a33636; }
    #devicePickupContactImpact { display: grid; gap: 3px; }
    #devicePickupContactImpact strong { font-size: 12px; }
    #devicePickupContactImpact span { opacity: .86; }
    .device-pickup-time-picker { display: grid; gap: 11px; padding: 13px; border: 1px solid #d8e1ed; border-radius: 9px; background: #f8fafc; }
    .device-pickup-time-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .device-pickup-time-head > div { display: grid; gap: 3px; }
    .device-pickup-time-head strong { color: #394961; font-size: 12px; }
    .device-pickup-time-head small { color: #8190a4; font-size: 10px; line-height: 1.45; }
    .device-pickup-time-head .btn { min-height: 32px; padding: 0 10px; font-size: 11px; }
    .device-pickup-time-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .device-pickup-time-options button {
      position: relative;
      min-width: 0;
      min-height: 66px;
      display: grid;
      align-content: center;
      justify-items: start;
      gap: 4px;
      padding: 10px 11px;
      border: 1px solid #d6dfeb;
      border-radius: 8px;
      background: #fff;
      color: #5f6e83;
      text-align: left;
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
    }
    .device-pickup-time-options button:hover { border-color: #9bb6e8; background: #f6f9ff; }
    .device-pickup-time-options button:active { transform: translateY(1px); }
    .device-pickup-time-options button.active { border-color: #4c7fe5; background: #eef4ff; box-shadow: inset 0 0 0 1px rgba(52, 112, 223, .14); }
    .device-pickup-time-options button span { max-width: calc(100% - 34px); overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .device-pickup-time-options button strong { max-width: 100%; overflow: hidden; color: #263750; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .device-pickup-time-options button.active strong { color: #285dbc; }
    .device-pickup-time-options button em { position: absolute; top: 8px; right: 8px; padding: 2px 5px; border-radius: 5px; background: #3470df; color: #fff; font-size: 9px; font-style: normal; font-weight: 750; }
    .device-pickup-custom-time { display: grid; grid-template-columns: auto minmax(220px, 320px); align-items: center; gap: 8px 12px; padding-top: 10px; border-top: 1px solid #e1e7ef; color: #55647b; font-size: 11px; font-weight: 700; }
    .device-pickup-custom-time input { min-height: 38px; }
    .device-pickup-custom-time small { grid-column: 2; color: #8793a5; font-size: 10px; font-weight: 500; }
    .device-pickup-time-hint { margin: 0; color: #315da9; font-size: 11px; line-height: 1.5; }
    .device-pickup-schedule-feedback { padding: 12px 14px; border: 1px solid #cbd9e9; border-radius: 9px; background: #f7f9fc; color: #30465f; font-size: 12px; line-height: 1.55; }
    .device-pickup-schedule-feedback[hidden] { display: none; }
    .device-pickup-schedule-feedback strong { display: block; font-size: 13px; }
    .device-pickup-schedule-feedback ul { margin: 7px 0 0; padding-left: 20px; }
    .device-pickup-schedule-feedback.is-pending { border-color: #bdd5ff; background: #f2f7ff; color: #275eaf; }
    .device-pickup-schedule-feedback.is-success { border-color: #b8dfcf; background: #f0faf6; color: #167654; }
    .device-pickup-schedule-feedback.is-error { border-color: #efb8b8; background: #fff3f3; color: #9e2f2f; }
    .device-detail-hero { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 9px; }
    .device-detail-hero article { padding: 12px; border: 1px solid #e0e5ed; border-radius: 9px; background: #fafbfd; }
    .device-detail-hero span { display: block; color: #8792a4; font-size: 10px; }
    .device-detail-hero strong { display: block; margin-top: 5px; color: #23314a; font-size: 13px; }
    .device-detail-section h3 { margin: 2px 0 9px; color: #26334d; font-size: 14px; }
    .device-detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
    .device-detail-section-head h3 { margin: 0; }
    .device-detail-section-head .btn { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; font-size: 11px; }
    .device-detail-section-head > div { min-width: 0; }
    .device-detail-section-head > div > small { display: block; margin-top: 3px; color: #8792a4; font-size: 10px; line-height: 1.45; }
    .device-usage-section { padding: 13px; border: 1px solid #cfe0f7; border-radius: 10px; background: #f7faff; }
    .device-usage-current-badge { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: #e5f0ff; color: #285fb5; font-size: 10px; font-weight: 750; }
    .device-usage-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
    .device-usage-metrics article { min-width: 0; padding: 12px; border: 1px solid #dde5f0; border-radius: 9px; background: #fff; }
    .device-usage-metrics article.is-current { border-color: #9fc2f3; background: #f0f6ff; }
    .device-usage-metrics span,
    .device-usage-metrics small { display: block; color: #8490a3; font-size: 10px; }
    .device-usage-metrics strong { display: block; margin: 5px 0 4px; color: #23314a; font-size: 17px; }
    .device-usage-metrics article.is-current strong { color: #1e5cb9; }
    .device-usage-warning { display: flex; gap: 7px; margin-top: 9px; padding: 9px 11px; border: 1px solid #efc7aa; border-radius: 8px; background: #fff7ef; color: #9a4f18; font-size: 11px; line-height: 1.5; }
    .device-usage-warning i { flex: 0 0 auto; margin-top: 1px; }
    .device-usage-table-wrap { margin-top: 10px; border: 1px solid #e0e6ef; border-radius: 9px; background: #fff; }
    .device-usage-table { min-width: 760px; }
    .device-usage-table th,
    .device-usage-table td { padding: 9px 10px; font-size: 10px; }
    .device-usage-table th { color: #718096; background: #f5f7fa; }
    .device-usage-table td { color: #536177; }
    .device-usage-table td strong,
    .device-usage-table td small { display: block; }
    .device-usage-table td strong { color: #25344d; font-size: 11px; }
    .device-usage-table td small { margin-top: 3px; color: #8b96a7; }
    .device-usage-table tr.is-current td { background: #f5f9ff; }
    .device-usage-footnote { margin: 9px 0 0; color: #8994a5; font-size: 10px; line-height: 1.5; }
    .device-customer-copy-section { padding: 13px; border: 1px solid #dce5f5; border-radius: 10px; background: #f7faff; }
    .device-customer-copy-grid { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(180px, .85fr) minmax(300px, 1.7fr); gap: 9px; }
    .device-customer-copy-grid article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 11px 12px; border: 1px solid #e0e7f2; border-radius: 9px; background: #fff; }
    .device-customer-copy-grid article > div { min-width: 0; }
    .device-customer-copy-grid span { display: block; color: #8490a3; font-size: 10px; }
    .device-customer-copy-grid strong { display: block; margin-top: 4px; color: #25344d; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
    .device-customer-copy-grid .btn { min-height: 30px; padding: 0 8px; color: #315da9; font-size: 10px; }
    .device-outbound-logistics-section { padding: 13px; border: 1px solid #dfe5ee; border-radius: 10px; background: #fafbfd; }
    .device-outbound-heading { display: grid; gap: 3px; }
    .device-outbound-heading small { color: #8994a6; font-size: 10px; }
    .device-outbound-logistics-list { display: grid; gap: 9px; }
    .device-outbound-logistics-card { display: grid; grid-template-columns: minmax(185px, .9fr) minmax(130px, .65fr) minmax(260px, 1.45fr); gap: 10px 14px; padding: 12px; border: 1px solid #e0e5ed; border-radius: 9px; background: #fff; }
    .device-outbound-logistics-card span { display: block; color: #8792a4; font-size: 10px; }
    .device-outbound-logistics-card strong { display: block; margin-top: 4px; color: #26344d; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
    .device-outbound-logistics-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 0 8px; }
    .device-outbound-logistics-main span { grid-column: 1 / -1; }
    .device-outbound-logistics-main .btn { grid-column: 2; grid-row: 2; min-height: 30px; padding: 0 8px; color: #315da9; font-size: 10px; }
    .device-outbound-logistics-state small { display: block; margin-top: 3px; color: #97a0af; font-size: 9px; }
    .device-outbound-logistics-latest strong { font-weight: 600; }
    .device-outbound-traces { grid-column: 1 / -1; display: grid; gap: 7px; padding: 9px 10px; border-radius: 8px; background: #f7f9fc; }
    .device-outbound-traces > div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: start; gap: 8px; }
    .device-outbound-traces i { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #4d7bd8; box-shadow: 0 0 0 2px #dbe6fb; }
    .device-outbound-traces p { margin: 0; color: #526178; font-size: 10px; line-height: 1.55; }
    .device-outbound-traces time { color: #919baa; font-size: 9px; white-space: nowrap; }
    .device-outbound-traces .is-empty i { background: #aab3c0; box-shadow: 0 0 0 2px #e7ebf0; }
    .device-follow-up-history { display: grid; gap: 8px; padding: 12px; border: 1px solid #e0e5ed; border-radius: 9px; background: #f8fafc; }
    #deviceFollowUpHistory { display: grid; gap: 8px; max-height: 260px; overflow-y: auto; }
    .device-follow-up-entry { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.5fr); gap: 8px 14px; padding: 10px; border: 1px solid #e1e6ed; border-radius: 8px; background: #fff; }
    .device-follow-up-entry > div { display: grid; gap: 3px; }
    .device-follow-up-entry strong { color: #29374f; font-size: 12px; }
    .device-follow-up-entry span,
    .device-follow-up-entry small { color: #8390a3; font-size: 10px; }
    .device-follow-up-entry p { margin: 0; color: #526178; font-size: 12px; line-height: 1.55; }
    .device-follow-up-entry small { grid-column: 1 / -1; }
    .device-issue-history { display: grid; gap: 8px; padding: 12px; border: 1px solid #e0e5ed; border-radius: 9px; background: #f8fafc; }
    #deviceIssueHistory { display: grid; gap: 8px; max-height: 260px; overflow-y: auto; }
    .device-issue-entry { display: grid; grid-template-columns: minmax(165px, .8fr) minmax(0, 1.5fr); gap: 8px 14px; padding: 10px; border: 1px solid #e8d6ba; border-radius: 8px; background: #fffaf1; }
    .device-issue-entry.is-urgent { border-color: #efb8bf; background: #fff5f6; }
    .device-issue-entry > div { display: grid; gap: 3px; }
    .device-issue-entry strong { color: #744a0b; font-size: 12px; }
    .device-issue-entry.is-urgent strong { color: #a72b3d; }
    .device-issue-entry span { color: #8791a2; font-size: 10px; }
    .device-issue-entry p { margin: 0; color: #526178; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
    .device-timeline { display: grid; gap: 0; }
    .device-timeline-item { position: relative; display: grid; grid-template-columns: 105px 13px minmax(0, 1fr); gap: 9px; min-height: 54px; color: #58667c; font-size: 12px; }
    .device-timeline-item::before { content: ""; position: absolute; left: 121px; top: 17px; bottom: -3px; width: 1px; background: #d9e0ea; }
    .device-timeline-item:last-child::before { display: none; }
    .device-timeline-item time { color: #8a95a6; font-size: 10px; text-align: right; }
    .device-timeline-dot { z-index: 1; width: 9px; height: 9px; margin-top: 4px; border: 2px solid #fff; border-radius: 50%; background: #3470df; box-shadow: 0 0 0 2px #cfe0ff; }
    .device-timeline-item strong { display: block; color: #26334d; }
    .device-timeline-item p { margin: 4px 0 0; color: #788499; line-height: 1.55; }
    .device-operation-tabs { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid #e2e6ed; }
    .device-operation-tabs button { min-height: 42px; padding: 0 13px; border-bottom: 2px solid transparent; background: transparent; color: #6d798d; font-size: 12px; font-weight: 700; }
    .device-operation-tabs button.active { border-color: #3470df; color: #285dbf; }
    .device-pickup-operation-filter { display: flex; align-items: stretch; flex-direction: column; gap: 9px; padding: 10px 18px; border-bottom: 1px solid #e4e8ef; background: #f8fafc; }
    .device-pickup-operation-filter-main { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
    .device-pickup-operation-filter label { display: grid; grid-template-columns: auto minmax(180px, 250px); align-items: center; gap: 9px; color: #66748a; font-size: 11px; font-weight: 700; }
    .device-pickup-operation-filter select { min-height: 34px; padding: 0 32px 0 10px; border: 1px solid #d4ddea; border-radius: 8px; background-color: #fff; color: #25344d; font-size: 11px; font-weight: 650; }
    .device-pickup-operation-filter .device-pickup-search-field { grid-template-columns: auto minmax(180px, 250px); }
    .device-pickup-search-field input { min-height: 34px; padding: 0 10px; border: 1px solid #d4ddea; border-radius: 8px; background: #fff; color: #25344d; font-size: 11px; }
    .device-pickup-operation-filter small { color: #8490a2; font-size: 10px; }
    .device-pickup-batch-rebook-bar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; padding-top: 9px; border-top: 1px solid #e4e9f1; }
    .device-pickup-batch-rebook-bar > span { margin-right: auto; color: #69778c; font-size: 11px; }
    .device-pickup-batch-rebook-bar > span strong { color: #285fbe; font-size: 13px; }
    .device-pickup-batch-rebook-bar .btn { min-height: 32px; padding: 0 10px; font-size: 10px; }
    .device-operation-card { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(100px, .8fr)) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e1e6ed; border-radius: 9px; background: #fff; }
    .device-operation-card.is-exchange { border-color: #bfe2dc; background: linear-gradient(135deg, #fbfffe 0%, #f4fbfa 100%); }
    .device-operation-card.is-accessory { border-color: #efd29a; background: linear-gradient(135deg, #fffefb 0%, #fff8e9 100%); box-shadow: inset 3px 0 0 #d99a24; }
    .device-operation-card.is-history { border-color: #e2e5ea; background: #fafbfc; opacity: .76; }
    .device-operation-card.is-overdue { border-color: #efb8ad; background: linear-gradient(135deg, #fff 0%, #fff8f6 100%); box-shadow: inset 3px 0 0 #db5144; }
    .device-operation-card.is-selected { border-color: #7ea4ed; box-shadow: inset 3px 0 0 #3470df, 0 0 0 2px rgba(52, 112, 223, .08); }
    .device-operation-card > div { min-width: 0; }
    .device-operation-card span { display: block; color: #8893a4; font-size: 10px; }
    .device-operation-card strong { display: block; margin-top: 3px; color: #29364e; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .device-operation-card .actions { justify-content: flex-end; }
    .device-operation-card .actions .btn { min-height: 32px; padding: 0 8px; font-size: 11px; }
    .device-operation-card.is-pickup {
      grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(135px, 1fr));
      align-items: start;
      gap: 14px 18px;
      padding: 16px;
    }
    .device-operation-card.is-pickup > div:not(.actions) { min-height: 76px; }
    .device-operation-card.is-pickup > div:not(.actions) + div:not(.actions) {
      padding-left: 17px;
      border-left: 1px solid #e8edf4;
    }
    .device-operation-card.is-pickup > div:first-child > span:nth-of-type(2) {
      display: -webkit-box;
      margin-top: 5px;
      overflow: hidden;
      line-height: 1.45;
      overflow-wrap: anywhere;
      white-space: normal;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    #deviceReceiveMissingAccessoryFields { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    #deviceReceiveMissingAccessoryFields > i { grid-row: 1 / span 3; }
    #deviceReceiveMissingAccessoryFields > label { grid-column: 2; color: #29364e; }
    .device-operation-card.is-pickup > div:first-child > span:last-child { margin-top: 4px; }
    .device-pickup-batch-check { display: inline-flex !important; width: max-content; margin: 0 0 7px; padding: 4px 7px; border: 1px solid #cbd9f3; border-radius: 7px; background: #f3f7ff; cursor: pointer; }
    .device-pickup-batch-check input { width: 14px; height: 14px; margin: 0; accent-color: #3470df; }
    .device-pickup-batch-check span { display: inline !important; color: #315fae !important; font-size: 10px !important; font-weight: 750; }
    .device-operation-card.is-pickup .device-operation-actions {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 9px 16px;
      padding-top: 13px;
      border-top: 1px solid #e8edf4;
    }
    .device-operation-actions-title {
      grid-column: 1 / -1;
      color: #6f7d92 !important;
      font-size: 10px !important;
      font-weight: 750;
    }
    .device-operation-action-list { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    .device-operation-action-list.is-detail { grid-column: 1 / -1; }
    .device-operation-action-list.is-risk {
      justify-content: flex-end;
      padding-left: 16px;
      border-left: 1px solid #e5eaf1;
    }
    .device-operation-actions-title + .device-operation-action-list.is-risk { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
    .device-operation-card.is-pickup .device-operation-action-list .btn { min-height: 34px; padding: 0 11px; }
    .device-operation-card .device-operation-error { color: #ae3040; }
    .device-pickup-detail-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .device-pickup-detail-summary article { min-width: 0; padding: 11px; border: 1px solid #e0e5ed; border-radius: 8px; background: #fafbfd; }
    .device-pickup-detail-summary span { display: block; color: #8792a4; font-size: 10px; }
    .device-pickup-detail-summary strong { display: block; margin-top: 5px; color: #26334d; font-size: 12px; overflow-wrap: anywhere; }
    #devicePickupDetailModal .device-detail-section { padding: 14px; border: 1px solid #e0e5ed; border-radius: 9px; background: #fff; }
    #devicePickupDetailModal .device-detail-section-head small { color: #8792a4; font-size: 10px; }
    #devicePickupDetailModal .device-timeline-item small { display: block; margin-top: 4px; color: #8792a4; font-size: 10px; }
    .device-pickup-detail-messages { display: grid; gap: 8px; }
    .device-pickup-detail-messages article { padding: 11px; border: 1px solid #e3e8f0; border-radius: 8px; background: #f8fafc; }
    .device-pickup-detail-messages article > div { display: flex; justify-content: space-between; gap: 8px; color: #26334d; font-size: 12px; }
    .device-pickup-detail-messages time { color: #8792a4; font-size: 10px; white-space: nowrap; }
    .device-pickup-detail-messages p, .device-pickup-detail-logistics p { margin: 7px 0 0; color: #526178; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
    .device-pickup-detail-logistics > strong { color: #26334d; font-size: 12px; }
    .device-pickup-detail-logistics > div { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid #edf0f5; color: #526178; font-size: 11px; }
    .device-pickup-detail-logistics > div:first-of-type { margin-top: 9px; }
    .device-pickup-detail-logistics time { color: #8792a4; }
    .device-pickup-overdue,
    .device-pickup-waiting { display: inline-flex; width: max-content; margin-top: 5px; padding: 3px 7px; border-radius: 999px; background: #edf3ff; color: #315fae; font-size: 10px; font-style: normal; font-weight: 750; }
    .device-pickup-waiting.is-overdue { background: #ffe9e5; color: #bd332c; }
    .device-state-stack .device-pickup-waiting { max-width: 100%; margin-top: 1px; line-height: 1.35; white-space: normal; }
    .device-operation-card .device-pickup-courier-contact { margin-top: 3px; color: #315da9; }
    .device-operation-card strong.device-pickup-usage-value {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 5px;
      overflow: visible;
      white-space: normal;
    }
    .device-operation-card .device-pickup-usage-count { display: inline; color: #25344d; font-size: 15px; font-weight: 820; }
    .device-pickup-usage-badge { display: inline-flex; width: max-content; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 800; line-height: 1.25; }
    .device-pickup-usage-badge.is-achieved { background: #e4f7ec; color: #18834a; }
    .device-pickup-usage-badge.is-near { background: #fff1cf; color: #a86300; }
    .device-pickup-usage-badge.is-below { background: #f1f3f6; color: #68758a; }
    .device-pickup-usage-badge.is-pending { background: #f5eefe; color: #8651ac; }
    .device-operation-card .device-pickup-usage > span:nth-last-child(-n+2) { margin-top: 4px; line-height: 1.4; }
    .device-pickup-reminder-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 11px 12px; border: 1px solid #d7e1ef; border-radius: 9px; background: #f8fafc; }
    .device-pickup-reminder-actions .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
    .device-pickup-reminder-actions small { flex: 1 1 260px; color: #7f8b9e; font-size: 10px; line-height: 1.5; }
    .device-pickup-reminder-history { display: grid; gap: 8px; padding: 11px 12px; border: 1px solid #e0e6ef; border-radius: 9px; background: #fafbfd; }
    .device-pickup-reminder-history > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
    .device-pickup-reminder-history > div:first-child strong { color: #29364e; font-size: 12px; }
    .device-pickup-reminder-history > div:first-child small { color: #8a95a6; font-size: 10px; }
    #devicePickupReminderHistory { display: grid; gap: 7px; max-height: 190px; overflow-y: auto; }
    #devicePickupReminderHistory article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 8px 10px; border: 1px solid #e1e6ed; border-radius: 8px; background: #fff; }
    #devicePickupReminderHistory article strong { color: #2c3a52; font-size: 11px; }
    #devicePickupReminderHistory article span,
    #devicePickupReminderHistory article small { color: #8390a2; font-size: 10px; }
    #devicePickupReminderHistory article p { grid-column: 1 / -1; margin: 3px 0 0; color: #5d6b80; font-size: 11px; line-height: 1.5; }

    .device-recovery-status {
      --recovery-color: #007aff;
      --recovery-bg: rgba(0, 122, 255, .12);
      --recovery-ring: rgba(0, 122, 255, .12);
      min-height: 24px;
      max-width: 100%;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 9px;
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: 999px;
      background: var(--recovery-bg);
      box-shadow: inset 0 0 0 1px var(--recovery-ring), 0 1px 2px rgba(16, 24, 40, .04);
      color: var(--recovery-color);
      font-size: 11px;
      font-weight: 750;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .device-recovery-status::before {
      content: "";
      flex: 0 0 auto;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--recovery-color);
      box-shadow: 0 0 0 3px var(--recovery-ring);
    }
    .device-recovery-status.is-waiting { --recovery-color: #73737a; --recovery-bg: rgba(142, 142, 147, .14); --recovery-ring: rgba(142, 142, 147, .12); }
    .device-recovery-status.is-scheduled { --recovery-color: #007aff; --recovery-bg: rgba(0, 122, 255, .12); --recovery-ring: rgba(0, 122, 255, .12); }
    .device-recovery-status.is-intercepting { --recovery-color: #c96f00; --recovery-bg: rgba(255, 149, 0, .15); --recovery-ring: rgba(255, 149, 0, .13); }
    .device-recovery-status.is-collected { --recovery-color: #0785b8; --recovery-bg: rgba(50, 173, 230, .14); --recovery-ring: rgba(50, 173, 230, .12); }
    .device-recovery-status.is-transit { --recovery-color: #5856d6; --recovery-bg: rgba(88, 86, 214, .13); --recovery-ring: rgba(88, 86, 214, .12); }
    .device-recovery-status.is-delivering { --recovery-color: #008f88; --recovery-bg: rgba(0, 199, 190, .14); --recovery-ring: rgba(0, 199, 190, .12); }
    .device-recovery-status.is-pending-collection { --recovery-color: #987100; --recovery-bg: rgba(255, 204, 0, .17); --recovery-ring: rgba(255, 204, 0, .14); }
    .device-recovery-status.is-verifying { --recovery-color: #9842bf; --recovery-bg: rgba(175, 82, 222, .14); --recovery-ring: rgba(175, 82, 222, .12); }
    .device-recovery-status.is-complete { --recovery-color: #218b3b; --recovery-bg: rgba(52, 199, 89, .14); --recovery-ring: rgba(52, 199, 89, .12); }
    .device-recovery-status.is-danger { --recovery-color: #cf3028; --recovery-bg: rgba(255, 59, 48, .13); --recovery-ring: rgba(255, 59, 48, .12); }
    .device-recovery-status.is-inactive { --recovery-color: #77777d; --recovery-bg: rgba(142, 142, 147, .12); --recovery-ring: rgba(142, 142, 147, .10); }
    .device-operation-card strong.device-recovery-status { display: inline-flex; margin-top: 3px; color: var(--recovery-color); font-size: 11px; overflow: hidden; }
    .device-detail-hero strong.device-recovery-status { display: inline-flex; margin-top: 5px; color: var(--recovery-color); font-size: 11px; }

    @media (max-width: 1320px) {
      .device-filters { grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(130px, 1fr)) auto; }
      .device-filters > :nth-child(4) { grid-column: 1 / 2; }
    }

    @media (max-width: 1080px) {
      .device-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .device-dashboard-head { align-items: stretch; flex-direction: column; }
      .device-dashboard-actions { justify-content: flex-start; }
      .device-overview-grid { grid-template-columns: 1fr; }
      .device-owner-card { min-height: 160px; }
      .device-owner-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .device-owner-row { grid-template-columns: minmax(70px, 1fr) max-content; }
      .device-owner-meter { grid-column: 1 / -1; }
      .device-progress-stats { grid-template-columns: repeat(3, 1fr); row-gap: 12px; }
      .device-progress-stat:nth-child(3) { border-right: 0; }
      .device-operation-card.is-pickup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .device-operation-card.is-pickup > div:not(.actions) { min-height: auto; }
      .device-operation-card.is-pickup > div:not(.actions) + div:not(.actions) { padding-left: 0; border-left: 0; }
      .device-operation-card.is-pickup > div:not(.actions):nth-child(even) { padding-left: 14px; border-left: 1px solid #e8edf4; }
    }

    @media (max-width: 760px) {
      .device-dashboard-head { padding: 15px; }
      .device-dashboard-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .device-month-field,
      .device-supplier-field { grid-column: 1 / -1; grid-template-columns: auto 1fr; }
      .device-month-field input { width: 100%; }
      .device-pagination { align-items: stretch; flex-direction: column; gap: 8px; }
      .device-pagination-summary { text-align: center; }
      .device-pagination-controls { justify-content: center; flex-wrap: wrap; }
      .device-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .device-kpi-card { min-height: 84px; padding: 11px; }
      .device-progress-stats { grid-template-columns: repeat(2, 1fr); }
      .device-progress-stat:nth-child(even) { border-right: 0; }
      .device-owner-list { grid-template-columns: 1fr; }
      .device-data-health,
      .device-detail-head { align-items: flex-start; flex-direction: column; }
      .device-filters { grid-template-columns: 1fr 1fr; }
      .device-filters > * { grid-column: auto !important; }
      .device-search-field { grid-column: 1 / -1 !important; }
      .device-import-summary,
      .device-action-summary,
      .device-detail-hero { grid-template-columns: 1fr 1fr; }
      .device-import-source { align-items: stretch; flex-direction: column; }
      .device-import-source > span { text-align: left; }
      .device-settings-form,
      .device-pickup-form,
      .device-follow-up-form,
      .device-issue-form { grid-template-columns: 1fr; }
      .device-automation-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
      .device-automation-form { grid-template-columns: 1fr; padding: 12px; }
      .device-automation-form > * { grid-column: 1 !important; }
      .device-automation-grid,
      .device-automation-grid.is-control,
      .device-automation-grid.is-four,
      .device-automation-grid.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .device-automation-grid .device-settings-switch { grid-column: 1 / -1 !important; }
      .device-automation-protection-options { grid-template-columns: 1fr; }
      .device-automation-protection-options .device-settings-switch { min-height: auto; }
      .device-automation-actions { padding: 11px 12px; }
      .device-mail-config-fields { grid-template-columns: 1fr; }
      .device-mail-source-row { grid-template-columns: 1fr; gap: 4px; }
      .device-mail-config-actions { align-items: flex-start; flex-direction: column; }
      .device-customer-copy-grid { grid-template-columns: 1fr 1fr; }
      .device-usage-metrics { grid-template-columns: 1fr 1fr; }
      .device-customer-copy-grid .is-address { grid-column: 1 / -1; }
      .device-outbound-logistics-card { grid-template-columns: 1fr 1fr; }
      .device-outbound-logistics-latest { grid-column: 1 / -1; }
      .device-pickup-form > *,
      .device-follow-up-form > *,
      .device-issue-form > *,
      .device-settings-form > * { grid-column: 1 !important; }
      .device-operation-card { grid-template-columns: 1fr 1fr; }
      .device-operation-card > :first-child,
      .device-operation-card .actions { grid-column: 1 / -1; }
      .device-operation-card.is-pickup .device-operation-actions { grid-template-columns: 1fr; }
      .device-operation-action-list.is-risk { justify-content: flex-start; padding: 9px 0 0; border-top: 1px solid #e5eaf1; border-left: 0; }
      .device-pickup-time-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .device-pickup-operation-filter { align-items: stretch; flex-direction: column; }
      .device-pickup-operation-filter label { grid-template-columns: auto 1fr; }
    }

    @media (max-width: 460px) {
      .device-automation-dialog > .panel-head { padding: 13px 14px; }
      .device-automation-dialog > .panel-head p { display: none; }
      .device-automation-overview { align-items: stretch; flex-direction: column; }
      .device-automation-overview .btn { justify-content: center; width: 100%; }
      .device-automation-grid,
      .device-automation-grid.is-control,
      .device-automation-grid.is-four,
      .device-automation-grid.is-three { grid-template-columns: 1fr; }
      .device-automation-section-head { gap: 8px; }
      .device-automation-section-title { gap: 7px; }
      .device-automation-actions { align-items: stretch; flex-direction: column; }
      .device-automation-actions > span { display: none; }
      .device-automation-actions > div { display: grid; grid-template-columns: .8fr 1.2fr; }
      .device-automation-actions .btn { justify-content: center; width: 100%; }
      .device-pickup-operation-filter label { grid-template-columns: 1fr; }
      .device-pickup-operation-filter .device-pickup-search-field { grid-template-columns: 1fr; }
      .device-pickup-detail-summary { grid-template-columns: 1fr 1fr; }
      .device-pickup-reminder-actions .btn { width: 100%; justify-content: center; }
      .device-operation-card.is-pickup { grid-template-columns: 1fr; }
      .device-pickup-detail-summary { grid-template-columns: 1fr; }
      .device-pickup-detail-messages article > div { flex-direction: column; }
      .device-pickup-detail-logistics > div { grid-template-columns: 1fr; gap: 3px; }
      .device-operation-card.is-pickup > div:not(.actions):nth-child(even) { padding-left: 0; border-left: 0; }
      .device-operation-action-list { display: grid; grid-template-columns: 1fr; }
      .device-operation-card.is-pickup .device-operation-action-list .btn { width: 100%; justify-content: center; }
      .device-pickup-time-head { align-items: stretch; flex-direction: column; }
      .device-pickup-time-head .btn { width: 100%; justify-content: center; }
      .device-pickup-time-options { grid-template-columns: 1fr; }
      .device-pickup-custom-time { grid-template-columns: 1fr; }
      .device-pickup-custom-time small { grid-column: 1; }
      #devicePickupReminderHistory article { grid-template-columns: 1fr; }
      #devicePickupReminderHistory article p { grid-column: 1; }
      .device-follow-up-quick > div:first-child { align-items: flex-start; flex-direction: column; gap: 3px; }
      .device-kpi-grid,
      .device-import-summary,
      .device-action-summary,
      .device-detail-hero,
      .device-wechat-override-summary,
      .device-customer-copy-grid { grid-template-columns: 1fr; }
      .device-usage-metrics { grid-template-columns: 1fr; }
      .device-usage-current-badge { white-space: normal; }
      .device-customer-copy-grid .is-address { grid-column: auto; }
      .device-detail-section-head { align-items: flex-start; }
      .device-outbound-logistics-card { grid-template-columns: 1fr; }
      .device-outbound-logistics-latest { grid-column: auto; }
      .device-outbound-traces > div { grid-template-columns: 8px minmax(0, 1fr); }
      .device-outbound-traces time { grid-column: 2; }
      .device-kpi-card { min-height: 78px; }
      .device-progress-legend { gap: 10px; }
      .device-filters { grid-template-columns: 1fr; }
      .device-filters > * { grid-column: 1 !important; }
      .device-issue-entry { grid-template-columns: 1fr; }
    }

    .wecom-enterprise-copy { min-width: 0; }
    .wecom-enterprise-copy strong { display: block; font-size: 14px; }
    .wecom-enterprise-copy small { display: block; margin-top: 4px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
    .wecom-config-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
    .inline-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
    .inline-input .btn { min-width: 72px; }
    .wecom-member-name { display: flex; align-items: center; gap: 9px; }
    .wecom-member-avatar { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; background: #edf3fa; }
    .wecom-employee-permissions { display: flex; flex-wrap: wrap; gap: 5px; max-width: 300px; }
    .wecom-employee-permissions .tag { white-space: nowrap; }
    .wecom-employee-permission-head { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f7faff; }
    .wecom-employee-permission-head img, .wecom-employee-permission-head .wecom-member-avatar { width: 44px; height: 44px; }
    .wecom-employee-permission-head > div { display: grid; gap: 4px; }
    .wecom-employee-permission-head span { color: var(--muted); font-size: 12px; }
    .wecom-scope-select { min-height: 112px; }
    .wecom-task-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
    .wecom-task-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
    .wecom-task-form-grid > .full { grid-column: 1 / -1; }
    .wecom-task-targets { display: none; }
    .wecom-target-picker { position: relative; }
    .wecom-target-trigger {
      width: 100%;
      min-height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 14px;
      border: 1px solid #cfdceb;
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      font: inherit;
      text-align: left;
      cursor: pointer;
    }
    .wecom-target-trigger:hover, .wecom-target-trigger[aria-expanded="true"] { border-color: #5b84dc; box-shadow: 0 0 0 3px rgba(45,93,215,.09); }
    .wecom-target-selected { min-height: 34px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding-top: 9px; }
    .wecom-target-empty { color: var(--muted); font-size: 12px; }
    .wecom-target-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 8px 5px 10px; border: 1px solid #d4e0ef; border-radius: 999px; background: #f3f7fc; color: #304a6d; font-size: 12px; }
    .wecom-target-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wecom-target-chip button { width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #dfe8f4; color: #536b88; cursor: pointer; }
    .wecom-target-popover { position: relative; z-index: 3; margin-top: 8px; overflow: hidden; border: 1px solid #cbd9e9; border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(25,52,85,.14); }
    .wecom-target-popover-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px; border-bottom: 1px solid var(--line); background: #f8fbff; }
    .wecom-target-popover-head input { min-width: 0; }
    .wecom-target-popover-head span { color: var(--muted); font-size: 12px; white-space: nowrap; }
    .wecom-target-options { max-height: 280px; overflow: auto; padding: 7px; }
    .wecom-target-option { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 9px; align-items: center; padding: 10px; border-radius: 7px; cursor: pointer; }
    .wecom-target-option:hover { background: #f3f7fc; }
    .wecom-target-option input { width: 18px; height: 18px; margin: 0; accent-color: #2d5dd7; }
    .wecom-target-option strong { display: block; font-size: 13px; }
    .wecom-target-option small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
    .wecom-target-options-empty { padding: 28px 12px; color: var(--muted); text-align: center; }
    .wecom-target-popover-actions { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: #fbfdff; }
    .wecom-member-list-wrap { height: clamp(520px, calc(100vh - 280px), 760px); min-height: 520px; overflow: auto; }
    .wecom-member-list-wrap thead th { position: sticky; top: 0; z-index: 2; background: #f7f9fc; box-shadow: 0 1px 0 var(--line); }
    .wecom-member-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .wecom-member-toolbar input { min-width: 220px; }
    .wecom-member-toolbar select { min-width: 180px; }
    .wecom-product-picker { grid-template-columns: 1fr; max-height: 330px; }
    .wecom-ai-box { display: grid; gap: 12px; padding: 14px; border: 1px solid #d8e4ef; border-radius: 12px; background: linear-gradient(145deg, #f5f9ff, #fff); }
    .wecom-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .wecom-ai-head strong { font-size: 14px; }
    .wecom-ai-layout { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(480px, 1.15fr); gap: 14px; align-items: start; }
    .wecom-ai-controls { display: grid; gap: 12px; min-width: 0; }
    .wecom-ai-status { color: var(--muted); font-size: 12px; line-height: 1.6; }
    .wecom-native-status { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #d7e3ef; border-radius: 10px; background: #f8fbff; color: #52657a; font-size: 13px; }
    .wecom-native-status.ok { border-color: #bfe3d3; background: #f3fbf7; color: #287253; }
    .wecom-native-status.danger { border-color: #f0c9c5; background: #fff7f6; color: #a33b34; }
    .wecom-ai-products { display: grid; gap: 12px; min-width: 0; }
    .wecom-moment-image-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
    .wecom-moment-image-toolbar label { margin: 0; }
    .wecom-moment-image-toolbar .btn { padding: 6px 10px; font-size: 12px; }
    .wecom-moment-image-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: 280px; overflow: auto; padding: 2px; }
    .wecom-moment-image-option { position: relative; display: block; overflow: hidden; border: 1px solid #d9e2ec; border-radius: 10px; background: #fff; cursor: pointer; }
    .wecom-moment-image-option img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
    .wecom-moment-image-option input { position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; accent-color: #2d5dd7; }
    .wecom-moment-image-option:has(input:checked) { border-color: #2d5dd7; box-shadow: 0 0 0 2px rgba(45,93,215,.14); }
    .wecom-task-progress-body { background: #f5f8fc; }
    .wecom-task-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .wecom-task-list > .empty { grid-column: 1 / -1; }
    .wecom-task-card { min-width: 0; display: grid; gap: 12px; padding: 15px; border: 1px solid #d9e3ef; border-radius: 10px; background: #fff; box-shadow: 0 8px 22px rgba(31,61,97,.06); }
    .wecom-task-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .wecom-task-card-title { min-width: 0; }
    .wecom-task-card-title strong { display: block; overflow: hidden; color: #1d3554; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
    .wecom-task-card-title span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wecom-task-card-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 10px 12px; border-radius: 8px; background: #f6f9fd; color: #536985; font-size: 12px; }
    .wecom-task-card-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wecom-task-card-content { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 11px; align-items: start; }
    .wecom-task-card-content.no-images { grid-template-columns: 1fr; }
    .wecom-task-images { display: flex; gap: 5px; }
    .wecom-task-images img { width: 54px; height: 54px; object-fit: cover; border: 1px solid #dce4ed; border-radius: 8px; background: #f4f7fa; }
    .wecom-task-card-copy { min-width: 0; color: #586b82; font-size: 12px; line-height: 1.65; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .wecom-task-card-progress { display: grid; grid-template-columns: auto minmax(120px,1fr); gap: 10px; align-items: center; }
    .wecom-task-card-progress strong { min-width: 58px; color: #1d3b63; font-size: 14px; }
    #wecomMomentTaskForm textarea[name="content"] { min-height: 150px; }
    .wecom-task-progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: #e8eef5; }
    .wecom-task-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2d5dd7, #36a9b6); }
    .wecom-task-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid #edf1f6; }
    .wecom-task-assignees { min-width: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .wecom-task-assignees summary { cursor: pointer; color: #2d5dd7; white-space: nowrap; }
    .wecom-task-assignees[open] { width: 100%; }
    .wecom-task-assignees-content { margin-top: 7px; padding: 8px 10px; border-radius: 7px; background: #f7f9fc; color: #52657c; }
    .wecom-task-card .wecom-config-actions { margin-top: 0; flex: 0 0 auto; }
    .wecom-task-statuses { display: flex; flex-wrap: wrap; gap: 6px; }

    .deal-config-notice {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      padding: 13px 16px;
      border: 1px solid #f0c7a5;
      border-radius: 12px;
      background: #fff8f1;
      color: #8c4717;
    }
    .deal-section-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      padding: 7px;
      border: 1px solid #dbe4ee;
      border-radius: 12px;
      background: #f4f7fb;
    }
    .deal-section-nav button {
      min-height: 38px;
      padding: 0 18px;
      border: 1px solid transparent;
      border-radius: 9px;
      color: #5a6e87;
      background: transparent;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    .deal-section-nav button:hover { color: #214b9c; background: rgba(255,255,255,.75); }
    .deal-section-nav button.active {
      border-color: rgba(45,93,215,.24);
      color: #214b9c;
      background: #fff;
      box-shadow: 0 5px 14px rgba(35,70,116,.08);
    }
    .deal-section.is-hidden { display: none; }
    #dealPricingSubmitSection { min-width: 0; }
    .deal-config-notice.hidden { display: none; }
    .deal-config-notice strong { flex: 0 0 auto; }
    .deal-config-notice span { color: #946242; font-size: 13px; }
    .deal-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(310px, .75fr);
      gap: 16px;
      align-items: stretch;
      margin-bottom: 16px;
    }
    .deal-builder-panel,
    .deal-result-panel,
    .deal-history-panel,
    .deal-settings-panel { margin-bottom: 0; }
    .deal-note-field { grid-column: 1 / -1; }
    .deal-product-picker-field { grid-column: 1 / -1; }
    .deal-channel-field { grid-column: 1 / -1; }
    .deal-price-comparison {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      padding: 13px;
      border: 1px solid #d9e4e8;
      border-radius: 11px;
      background: #f8fbfc;
    }
    .deal-readonly-control { position: relative; }
    .deal-readonly-control input[readonly] {
      padding-right: 92px;
      border-color: #d4dee3;
      color: #1d6d4e;
      background: #eef4f2;
      font-weight: 800;
      cursor: not-allowed;
    }
    .deal-readonly-control span {
      position: absolute;
      top: 50%;
      right: 10px;
      padding: 4px 7px;
      border-radius: 999px;
      color: #5f716d;
      background: #dfe9e5;
      font-size: 10px;
      font-weight: 700;
      pointer-events: none;
      transform: translateY(-50%);
    }
    .deal-picker-toolbar,
    .deal-selection-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .deal-picker-toolbar > div,
    .deal-selection-panel-head > div { display: grid; gap: 4px; }
    .deal-picker-toolbar label,
    .deal-selection-panel-head strong { color: #263a44; font-size: 13px; font-weight: 700; }
    .deal-picker-toolbar span,
    .deal-selection-panel-head span { color: #7d8a90; font-size: 11px; line-height: 1.5; }
    .deal-product-selection-panel {
      display: grid;
      gap: 10px;
      margin-top: 11px;
      padding: 12px;
      border: 1px solid #dce5e8;
      border-radius: 12px;
      background: #f7fafb;
    }
    .deal-product-selection-panel.is-collapsed { display: none; }
    .deal-product-filter-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 9px; }
    .deal-product-picker {
      display: grid;
      gap: 9px;
      max-height: 390px;
      padding: 8px;
      overflow-y: auto;
      border: 1px solid #dce4e7;
      border-radius: 12px;
      background: #f7f9fa;
    }
    .deal-product-option {
      display: grid;
      gap: 9px;
      padding: 10px 11px;
      border: 1px solid #e1e7e9;
      border-radius: 10px;
      background: #fff;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .deal-product-option.selected { border-color: #89b7a2; box-shadow: 0 0 0 2px rgba(29,122,85,.08); }
    .deal-product-catalog-head { display: grid; grid-template-columns: 52px minmax(150px, 1fr) auto; gap: 10px; align-items: center; }
    .deal-product-catalog-count { min-width: 72px; color: #1d7a55; font-size: 11px; font-weight: 750; text-align: right; }
    .deal-package-choice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding-top: 9px; border-top: 1px solid #edf1f2; }
    .deal-package-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 46px; padding: 8px 9px; border: 1px solid #dfe7e9; border-radius: 9px; background: #f9fbfb; }
    .deal-package-choice.selected { border-color: #83b79f; background: #f0f8f4; }
    .deal-package-choice input { width: 16px; height: 16px; margin: 0; accent-color: #1d7a55; }
    .deal-package-choice span { display: grid; gap: 3px; min-width: 0; }
    .deal-package-choice strong { color: #2f4047; font-size: 12px; line-height: 1.35; }
    .deal-package-choice small { color: #1d7a55; font-size: 11px; font-weight: 700; white-space: nowrap; }
    .deal-package-choice > em { color: #718087; font-size: 10px; font-style: normal; font-weight: 700; }
    .deal-product-thumb {
      display: grid;
      width: 52px;
      height: 52px;
      overflow: hidden;
      place-items: center;
      border: 1px solid #e2e8eb;
      border-radius: 9px;
      color: #74858d;
      background: #eef3f5;
      font-size: 17px;
      font-weight: 700;
    }
    .deal-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .deal-product-option-copy { min-width: 0; }
    .deal-product-option-copy strong { display: block; overflow: hidden; color: #26353a; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
    .deal-product-option-copy small { color: #879297; }
    .deal-product-option-state { min-width: 54px; color: #7a898f; font-size: 11px; font-weight: 700; text-align: right; }
    .deal-product-option.selected .deal-product-option-state { color: #1d7a55; }
    .deal-selected-products { display: grid; gap: 8px; margin-top: 10px; }
    .deal-selected-empty { padding: 15px; border: 1px dashed #d6e1e5; border-radius: 11px; color: #7a898f; background: #fafcfc; font-size: 12px; text-align: center; }
    .deal-selected-item {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px 11px;
      border: 1px solid #dce6e8;
      border-radius: 11px;
      background: #fff;
    }
    .deal-selected-item input[type="number"] { min-width: 0; height: 38px; padding: 0 9px; }
    .deal-selected-specification { display: grid; grid-column: 1 / 3; gap: 3px; min-width: 0; padding: 8px 10px; border: 1px solid #dce5e8; border-radius: 9px; background: #f8fbfb; }
    .deal-selected-specification span { color: #829096; font-size: 10px; }
    .deal-selected-specification strong { color: #26353a; font-size: 12px; line-height: 1.4; }
    .deal-selected-specification small { color: #1d7a55; font-size: 10px; font-weight: 700; }
    .deal-selected-item input[type="number"] { grid-column: 3; width: 96px; }
    .deal-selected-item-total { color: #1d6d4e; font-size: 13px; font-weight: 800; text-align: right; white-space: nowrap; }
    .deal-selected-item-total { grid-column: 1 / -1; }
    .deal-selected-remove { grid-column: 3; grid-row: 1; min-width: 34px; min-height: 34px; padding: 0 9px; border-color: #ead7d5; color: #a4443c; background: #fff8f7; box-shadow: none; }
    .return-product-picker-field { grid-column: 1 / -1; }
    .return-product-picker {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      max-height: 250px;
      padding: 8px;
      overflow-y: auto;
      border: 1px solid #dce4e7;
      border-radius: 10px;
      background: #f7f9fa;
    }
    .return-product-option {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr) 24px;
      align-items: center;
      gap: 10px;
      min-height: 72px;
      padding: 9px;
      border: 1px solid #e1e7e9;
      border-radius: 9px;
      color: #26353a;
      background: #fff;
      text-align: left;
    }
    .return-product-option.selected { border-color: #76a995; box-shadow: 0 0 0 2px rgba(29,122,85,.10); }
    .return-product-option img,
    .return-product-option .return-product-fallback {
      display: grid;
      width: 54px;
      height: 54px;
      place-items: center;
      border: 1px solid #e2e8eb;
      border-radius: 8px;
      background: #eef3f5;
      object-fit: cover;
      font-weight: 700;
    }
    .return-product-option-copy { display: grid; min-width: 0; gap: 4px; }
    .return-product-option-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
    .return-product-option-copy small { overflow: hidden; color: #7b898f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .return-product-option-mark {
      display: grid;
      width: 22px;
      height: 22px;
      place-items: center;
      border: 1px solid #cfd9dd;
      border-radius: 50%;
      color: transparent;
      font-size: 13px;
    }
    .return-product-option.selected .return-product-option-mark { border-color: #1d7a55; color: #fff; background: #1d7a55; }
    .deal-package-preview {
      margin-top: 14px;
      padding: 12px 14px;
      border: 1px solid #d9e4e8;
      border-radius: 10px;
      background: #f7fafb;
      color: #53636d;
      font-size: 13px;
      line-height: 1.65;
    }
    .deal-form-actions { justify-content: flex-end; margin-top: 14px; }
    .deal-result-panel { display: flex; flex-direction: column; }
    .deal-signal {
      display: flex;
      min-height: 220px;
      padding: 24px;
      border: 1px solid #d8e1e4;
      border-radius: 16px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      background: #f7f9fa;
      transition: .2s ease;
    }
    .deal-signal-lamp {
      width: 78px;
      height: 78px;
      margin-bottom: 15px;
      border: 8px solid rgba(255,255,255,.82);
      border-radius: 50%;
      background: #9aa7ac;
      box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 8px 24px rgba(79,94,101,.22);
    }
    .deal-signal strong { font-size: 23px; }
    .deal-signal p { margin: 8px 0 0; color: inherit; font-size: 14px; line-height: 1.6; }
    .deal-signal.red { border-color: #f1b9b2; background: #fff1ef; color: #a7281c; }
    .deal-signal.red .deal-signal-lamp { background: #dc3f32; box-shadow: 0 0 0 1px #b82318, 0 0 28px rgba(220,63,50,.48); }
    .deal-signal.yellow { border-color: #efd998; background: #fffae7; color: #896400; }
    .deal-signal.yellow .deal-signal-lamp { background: #e7b51b; box-shadow: 0 0 0 1px #be910b, 0 0 28px rgba(231,181,27,.48); }
    .deal-signal.green { border-color: #a7dec2; background: #eefaf4; color: #167243; }
    .deal-signal.green .deal-signal-lamp { background: #20a660; box-shadow: 0 0 0 1px #13834a, 0 0 28px rgba(32,166,96,.42); }
    .deal-result-summary {
      display: grid;
      gap: 9px;
      margin-top: 14px;
    }
    .deal-result-summary > div {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 9px;
      border-bottom: 1px solid #edf0f1;
    }
    .deal-result-summary span { color: #78858a; font-size: 12px; }
    .deal-result-summary strong { color: #27353a; font-size: 13px; text-align: right; }
    .deal-result-actions { margin-top: 14px; }
    .deal-privacy-note { margin: auto 0 0; padding-top: 14px; color: #879398; font-size: 12px; line-height: 1.65; }
    .deal-history-panel { margin-bottom: 16px; }
    .deal-history-table { min-width: 1120px; }
    .deal-history-main-row > td { vertical-align: top; }
    .deal-history-primary { display: grid; gap: 4px; }
    .deal-history-primary strong { color: #243741; font-size: 13px; line-height: 1.45; }
    .deal-history-primary small { color: #7d8a90; line-height: 1.5; }
    .deal-history-money { display: grid; gap: 4px; white-space: nowrap; }
    .deal-history-money > strong { color: #20353f; font-size: 14px; }
    .deal-history-money small { color: #7b898f; }
    .deal-profit-positive { color: #167243 !important; }
    .deal-profit-negative { color: #b82d22 !important; }
    .deal-history-status { display: grid; justify-items: start; gap: 7px; }
    .deal-history-status small { color: #6f7e85; line-height: 1.5; }
    .deal-detail-row > td { padding: 0 10px 14px; border-top: 0; background: rgba(246,250,252,.72); }
    .deal-history-details {
      overflow: hidden;
      border: 1px solid #dbe5e8;
      border-radius: 12px;
      background: #fbfdfd;
    }
    .deal-history-details > summary {
      display: flex;
      min-height: 42px;
      padding: 0 14px;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: #38515c;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }
    .deal-history-details > summary::-webkit-details-marker { display: none; }
    .deal-history-details > summary::after { content: "展开"; color: #2d5dd7; font-weight: 700; }
    .deal-history-details[open] > summary { border-bottom: 1px solid #e3eaec; background: #f4f8f9; }
    .deal-history-details[open] > summary::after { content: "收起"; }
    .deal-detail-body { display: grid; gap: 15px; padding: 15px; }
    .deal-detail-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 9px;
    }
    .deal-detail-metric {
      display: grid;
      gap: 5px;
      min-height: 68px;
      padding: 11px 12px;
      border: 1px solid #e0e8ea;
      border-radius: 10px;
      background: #fff;
    }
    .deal-detail-metric span { color: #7b898f; font-size: 11px; }
    .deal-detail-metric strong { color: #21353e; font-size: 16px; }
    .deal-cost-breakdown {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
      padding: 11px;
      border-radius: 10px;
      background: #f2f6f7;
    }
    .deal-cost-breakdown div { display: grid; gap: 4px; min-width: 0; }
    .deal-cost-breakdown span { color: #7b898f; font-size: 11px; }
    .deal-cost-breakdown strong { overflow: hidden; color: #3b515b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .deal-detail-section { display: grid; gap: 8px; }
    .deal-detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .deal-detail-section-head strong { color: #263b45; font-size: 13px; }
    .deal-detail-section-head span { color: #849197; font-size: 11px; }
    .deal-item-table-wrap { overflow-x: auto; border: 1px solid #e1e9eb; border-radius: 10px; background: #fff; }
    .deal-item-table { min-width: 820px; }
    .deal-item-table th { background: #f5f8f9; }
    .deal-item-product { display: grid; grid-template-columns: 42px minmax(130px, 1fr); gap: 9px; align-items: center; }
    .deal-item-product img,
    .deal-item-product-fallback { width: 42px; height: 42px; border: 1px solid #e1e8ea; border-radius: 8px; object-fit: cover; background: #eef3f4; }
    .deal-item-product-fallback { display: grid; place-items: center; color: #728188; font-weight: 800; }
    .deal-item-product-copy { display: grid; min-width: 0; gap: 3px; }
    .deal-item-product-copy strong { overflow: hidden; color: #263942; text-overflow: ellipsis; white-space: nowrap; }
    .deal-item-product-copy small { color: #849197; }
    .deal-detail-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .deal-detail-note { min-height: 78px; padding: 11px 12px; border: 1px solid #e1e9eb; border-radius: 10px; background: #fff; }
    .deal-detail-note span { display: block; margin-bottom: 6px; color: #7c8a90; font-size: 11px; }
    .deal-detail-note p { margin: 0; color: #344b55; font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
    .deal-detail-private { padding: 14px; border: 1px dashed #d8e1e4; border-radius: 10px; color: #78868c; background: #f7f9fa; font-size: 12px; }
    .deal-result-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 9px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
    }
    .deal-result-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
    .deal-result-pill.red { color: #b82d22; background: #fff0ed; }
    .deal-result-pill.yellow { color: #8a6700; background: #fff7d9; }
    .deal-result-pill.green { color: #137143; background: #eaf8f1; }
    .deal-settings-panel { border-color: #e2d8cb; }
    .deal-settings-panel .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .deal-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }

    .sales-profit-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
      gap: 22px;
      padding: 24px;
      border: 1px solid rgba(45, 93, 215, .16);
      border-radius: 12px;
      background:
        radial-gradient(circle at 86% 15%, rgba(99, 213, 220, .20), transparent 30%),
        linear-gradient(135deg, #f8fbff, #f0f7fb);
      box-shadow: var(--shadow);
    }
    .sales-profit-eyebrow { color: #2d5dd7; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
    .sales-profit-hero h2 { margin: 8px 0 7px; color: #18314b; font-size: 22px; }
    .sales-profit-hero p { max-width: 760px; margin: 0; color: #637781; font-size: 13px; line-height: 1.7; }
    .sales-profit-rule-chips { display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-end; gap: 8px; }
    .sales-profit-rule-chips span { padding: 7px 10px; border: 1px solid rgba(45, 93, 215, .16); border-radius: 999px; background: rgba(255,255,255,.78); color: #3d5b6a; font-size: 12px; }
    .sales-profit-setup { align-items: stretch; }
    .sales-profit-import { display: grid; grid-template-columns: minmax(120px, .3fr) minmax(260px, 1fr) auto; gap: 12px; align-items: end; }
    .sales-profit-import .field > span,
    .sales-profit-owner-form .field > span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
    .sales-profit-import-note { margin: 0 18px 16px; padding: 10px 12px; border-radius: 8px; background: #f6f9fa; color: #708087; font-size: 12px; }
    .sales-profit-owner-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
    .sales-profit-flag { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
    .sales-profit-flag.blue { background: #3d78dd; }
    .sales-profit-flag.green { background: #2ba46f; }
    .sales-profit-flag.gray { background: #8c979d; }
    .sales-profit-results { display: grid; gap: 18px; }
    .sales-profit-metrics .metric:nth-child(2)::after { background: linear-gradient(90deg, #1a9b68, #63d5a7); }
    .sales-profit-metrics .metric:nth-child(3)::after { background: linear-gradient(90deg, #b84a3b, #e69a75); }
    .sales-profit-metrics .metric:nth-child(4)::after { background: linear-gradient(90deg, #b68a19, #efd062); }
    .sales-profit-breakdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
    .sales-profit-breakdown div { min-height: 86px; padding: 15px 16px; display: grid; align-content: space-between; gap: 8px; background: rgba(255,255,255,.94); }
    .sales-profit-breakdown span { color: var(--muted); font-size: 12px; }
    .sales-profit-breakdown strong { color: #233c48; font-size: 18px; }
    .sales-profit-anchor-table { min-width: 560px; }
    .sales-profit-anchor-name { display: grid; gap: 4px; }
    .sales-profit-anchor-name small { color: var(--muted); }
    .sales-profit-order-wrap { max-height: 560px; }
    .sales-profit-order-table { min-width: 1120px; table-layout: auto; }
    .sales-profit-order-table th:nth-child(1) { width: 170px; }
    .sales-profit-order-table th:nth-child(2) { width: 130px; }
    .sales-profit-order-table th:nth-child(3),
    .sales-profit-order-table th:nth-child(5),
    .sales-profit-order-table th:nth-child(6) { width: 110px; }
    .sales-profit-order-table th:nth-child(7) { width: 120px; }
    .sales-profit-components { max-width: 430px; color: #425c68; line-height: 1.55; }
    .sales-profit-components small { display: block; margin-top: 4px; color: #a16624; }
    .sales-profit-profit-positive { color: #137143; font-weight: 750; }
    .sales-profit-profit-negative { color: #b82d22; font-weight: 750; }

    @media (max-width: 1080px) {
      .sales-profit-hero { grid-template-columns: 1fr; }
      .sales-profit-rule-chips { justify-content: flex-start; }
      .sales-profit-import { grid-template-columns: 1fr 2fr; }
      .sales-profit-import .btn { grid-column: 1 / -1; }
      .sales-profit-owner-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .sales-profit-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .deal-workspace { grid-template-columns: 1fr; }
      .deal-settings-panel .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .deal-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .deal-cost-breakdown { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .deal-detail-notes { grid-template-columns: 1fr; }
      .metrics, .cards, .admin-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .grid-2 { grid-template-columns: 1fr; }
      .cards { grid-template-columns: 1fr; }
      .product-card {
        grid-template-columns: 50px 76px minmax(160px, 1fr) minmax(300px, 2fr);
      }
      .product-card-actions, .product-supplier {
        grid-column: 2 / -1;
        justify-content: flex-start;
      }
      .admin-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .admin-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
      }
      .return-actions {
        grid-template-columns: 1fr;
        min-width: 112px;
      }
      .mall-reuse-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .mall-reuse-item {
        grid-template-columns: auto 64px minmax(0, 1fr);
      }
      .mall-reuse-meta {
        grid-column: 2 / -1;
        justify-content: flex-start;
      }
      .oa-workbench { grid-template-columns: 1fr; }
      .oa-preview-shell { position: static; }
      .oa-phone { max-height: 680px; }
      .wecom-layout { grid-template-columns: 1fr; }
      .wecom-ai-layout { grid-template-columns: 1fr; }
      .wecom-task-list { grid-template-columns: 1fr; }
      .wecom-task-form-grid { grid-template-columns: 1fr; }
      .wecom-task-form-grid > .full { grid-column: auto; }
      .wecom-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 760px) {
      .sales-profit-hero { padding: 18px; }
      .sales-profit-import,
      .sales-profit-owner-form,
      .sales-profit-breakdown { grid-template-columns: 1fr; }
      .sales-profit-import .btn { grid-column: auto; }
      #productModal {
        pointer-events: auto;
      }
      #productModal .dialog {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
      }
      #productModal .panel-head::after { display: none; }
      .login-screen {
        padding: 14px;
        align-items: start;
        overflow-y: auto;
      }
      .login-card {
        min-height: auto;
        grid-template-columns: 1fr;
      }
      .login-showcase {
        padding: 24px;
        border-right: 0;
        border-bottom: 1px solid rgba(103, 157, 213, .20);
      }
      .login-showcase::after { inset: 10px; }
      .login-logo { width: 190px; }
      .login-showcase h1 {
        margin-top: 20px;
        font-size: 27px;
      }
      .login-showcase p { font-size: 13px; }
      .login-feature-grid {
        margin-top: 20px;
        gap: 8px;
      }
      .login-feature {
        min-height: 66px;
        padding: 10px;
      }
      .login-form-panel {
        padding: 24px;
      }
      .app { grid-template-columns: 1fr; }
      .sidebar {
        position: sticky;
        top: 0;
        z-index: 20;
        padding: 12px;
        box-shadow: none;
      }
      .brand {
        padding-bottom: 10px;
        grid-template-columns: minmax(0, 148px) 1fr;
        align-items: center;
      }
      .brand-logo-wrap {
        height: 64px;
        padding: 0;
      }
      .brand-logo {
        width: 156px;
        max-height: none;
      }
      .brand-copy {
        margin-top: 0;
        padding: 7px 8px 7px 10px;
      }
      .nav {
        display: flex;
        flex-wrap: wrap;
        max-height: 46vh;
        overflow-x: hidden;
        overflow-y: auto;
      }
      .favorite-nav,
      .nav-separator {
        flex: 1 0 100%;
      }
      .favorite-nav-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .nav .nav-home {
        flex: 1 0 100%;
      }
      .nav-group {
        display: contents;
      }
      .nav .nav-group-toggle {
        flex: 1 1 128px;
      }
      .nav-group-items {
        flex: 1 0 100%;
        display: flex;
        overflow-x: auto;
        padding: 0 0 5px;
        margin-left: 0;
        border-left: 0;
      }
      .nav button {
        min-width: 88px;
        justify-content: center;
        padding: 0 8px;
        font-size: 12px;
      }
      .nav button:hover,
      .nav button.active {
        transform: none;
      }
      .topbar {
        height: auto;
        min-height: 70px;
        padding: 14px 16px;
        align-items: flex-start;
        flex-direction: column;
      }
      .topbar .actions {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: 2px;
      }
      .topbar .actions .btn,
      .topbar .actions .user-chip {
        flex: 0 0 auto;
      }
      .topbar h1 { font-size: 22px; }
      .topbar p { font-size: 12px; }
      .content { padding: 12px; gap: 12px; }
      .deal-config-notice { align-items: flex-start; flex-direction: column; }
      .deal-settings-panel .form-grid { grid-template-columns: 1fr; }
      .deal-detail-metrics,
      .deal-cost-breakdown { grid-template-columns: 1fr; }
      .return-product-picker { grid-template-columns: 1fr; }
      .deal-product-filter-row { grid-template-columns: 1fr; }
      .deal-price-comparison { grid-template-columns: 1fr; }
      .deal-package-choice-list { grid-template-columns: 1fr; }
      .deal-product-catalog-head { grid-template-columns: 46px minmax(0, 1fr); }
      .deal-product-catalog-count { grid-column: 2; text-align: left; }
      .deal-picker-toolbar,
      .deal-selection-panel-head { align-items: stretch; flex-direction: column; }
      .deal-picker-toolbar .btn,
      .deal-selection-panel-head .btn { width: 100%; justify-content: center; }
      .deal-selected-item { grid-template-columns: 46px minmax(0, 1fr) auto; }
      .deal-selected-item .deal-product-thumb { width: 46px; height: 46px; }
      .deal-selected-specification,
      .deal-selected-item input[type="number"],
      .deal-selected-item-total { grid-column: 1 / -1; width: 100%; text-align: left; }
      .deal-signal { min-height: 190px; }
      .deal-signal-lamp { width: 66px; height: 66px; }
      .metrics, .cards, .admin-list, .form-grid { grid-template-columns: 1fr; }
      #moveForm .form-grid { grid-template-columns: 1fr; }
      #moveForm .move-product-field { grid-column: auto; }
      .metric { min-height: 104px; padding: 15px; }
      .metric strong { font-size: 23px; }
      .dashboard-filters { grid-template-columns: 1fr; }
      .flow-filter-row { grid-template-columns: 1fr; gap: 7px; }
      .flow-selects, .flow-summary, .product-filters, .audit-filters { grid-template-columns: 1fr; }
      .mall-store-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
      }
      .mall-store-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .mall-store-actions .btn {
        width: 100%;
        min-width: 0;
      }
      .mall-store-toolbar #mallStoreHint {
        justify-self: stretch;
        justify-content: center;
      }
      .permission-grid, .permission-group-list { grid-template-columns: 1fr; }
      .wecom-workspace-bar, .wecom-summary { grid-template-columns: 1fr; }
      .wecom-member-list-wrap { height: min(480px, calc(100vh - 250px)); min-height: 360px; }
      .wecom-member-toolbar, .wecom-member-toolbar input, .wecom-member-toolbar select { width: 100%; min-width: 0; }
      .wecom-task-card-meta { grid-template-columns: 1fr; }
      .wecom-task-card-foot { align-items: flex-start; flex-direction: column; }
      .oa-field-grid, .oa-product-picker { grid-template-columns: 1fr; }
      .oa-material-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .oa-material-actions { grid-template-columns: 1fr; }
      .export-options { grid-template-columns: 1fr; }
      .mall-summary { grid-template-columns: 1fr 1fr; }
      .mall-subnav {
        padding: 0 12px 12px;
        overflow-x: auto;
        flex-wrap: nowrap;
      }
      .nav .mall-subnav {
        display: flex;
        grid-column: 1 / -1;
        padding: 0;
        margin-top: 0;
        overflow-x: auto;
        white-space: nowrap;
      }
      .nav .mall-subnav.is-hidden {
        display: none;
      }
      .mall-subnav button {
        flex: 0 0 auto;
      }
      .nav .mall-subnav button {
        min-width: 82px;
        justify-content: center;
      }
      .favorite-choice-grid {
        grid-template-columns: 1fr;
      }
      .mall-section {
        margin: 12px 12px 0;
      }
      .mall-section-head {
        align-items: flex-start;
        flex-direction: column;
      }
      .mall-card {
        grid-template-columns: 76px minmax(0, 1fr);
        align-items: start;
      }
      .mall-cover { width: 76px; }
      .mall-meta, .mall-card .product-card-actions {
        grid-column: 1 / -1;
      }
      .mall-meta { grid-template-columns: 1fr; }
      .package-editor-row,
      .parameter-editor-row,
      .service-faq-row {
        grid-template-columns: 1fr;
      }
      .panel-head {
        padding: 12px;
        gap: 10px;
      }
      .panel-head h2 { font-size: 16px; }
      .cards { padding: 10px; }
      .product-card {
        grid-template-columns: 42px 68px minmax(0, 1fr);
        gap: 9px;
        padding: 10px;
      }
      .product-card .product-image { width: 68px; }
      .product-meta, .product-supplier, .product-card-actions {
        grid-column: 1 / -1;
      }
      .product-meta {
        grid-template-columns: 1fr;
        gap: 7px;
      }
      .product-card-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .product-card-actions .btn {
        justify-content: center;
        min-height: 40px;
        padding: 0 8px;
      }
      .sort-input { width: 40px; }
      .pagination {
        padding: 10px;
        align-items: stretch;
      }
      .pagination-actions {
        width: 100%;
        justify-content: space-between;
      }
      .image-preview {
        max-width: none;
        aspect-ratio: 1;
      }
      .admin-row { grid-template-columns: 1fr; }
      .admin-actions { grid-column: auto; }
      .return-actions { grid-template-columns: 1fr; min-width: 112px; }
      table { min-width: 720px; }
      .table-wrap { overflow-x: auto; }
      .bar-row { grid-template-columns: 72px 1fr 60px; }
    }

    .shipping-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
      gap: 18px;
      align-items: start;
    }
    .shipping-subpanel { display: none; }
    .shipping-subpanel.is-active { display: block; }
    .shipping-form-only { grid-template-columns: minmax(0, 1fr); }
    .shipping-settings-overview {
      display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 18px; align-items: start;
    }
    .shipping-settings-guide { display: grid; gap: 12px; }
    .shipping-settings-guide-item {
      display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start;
      padding: 13px 14px; border: 1px solid #e1e8f0; border-radius: 12px; background: #fbfdff;
    }
    .shipping-settings-guide-item b {
      display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
      color: #1767d7; background: #eaf3ff; font-size: 12px;
    }
    .shipping-settings-guide-item strong { display: block; margin-bottom: 4px; color: #233044; font-size: 14px; }
    .shipping-settings-guide-item span { color: #6f7d90; font-size: 13px; line-height: 1.6; }
    .shipping-form-card { overflow: hidden; }
    .shipping-step {
      display: grid;
      gap: 14px;
      padding: 20px 22px;
      border-top: 1px solid #e8eef6;
    }
    .shipping-step:first-of-type { border-top: 0; }
    .shipping-step-title { display: flex; align-items: center; gap: 10px; }
    .shipping-step-title b {
      display: grid; place-items: center; width: 28px; height: 28px;
      border-radius: 9px; color: #fff; background: #1677ff; font-size: 13px;
    }
    .shipping-step-title strong { color: #172033; font-size: 16px; }
    .shipping-address-box { position: relative; }
    .shipping-address-box textarea { min-height: 104px; padding-right: 116px; line-height: 1.7; }
    .shipping-address-box .btn { position: absolute; right: 10px; bottom: 10px; }
    .shipping-recipient-grid { display: grid; grid-template-columns: .7fr .8fr .7fr 1.5fr; gap: 12px; }
    .shipping-logistics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .shipping-product-recognition {
      display: grid; gap: 10px; padding: 14px;
      border: 1px solid #bdd7fa; border-radius: 14px; background: #f6faff;
    }
    .shipping-product-recognition textarea { min-height: 86px; line-height: 1.65; resize: vertical; }
    .shipping-product-recognition-actions {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .shipping-product-recognition-actions span { color: #65748a; font-size: 12px; line-height: 1.55; }
    .shipping-product-recognition-actions span[data-state="success"] { color: #087443; }
    .shipping-product-recognition-actions span[data-state="warn"] { color: #a15c00; }
    .shipping-product-recognition-actions .btn { flex: 0 0 auto; }
    .shipping-product-picker { border: 1px solid #dbe5f0; border-radius: 14px; overflow: hidden; background: #fff; }
    .shipping-product-toolbar {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 12px 14px; border-bottom: 1px solid #e8eef6; background: #f8fbff;
    }
    .shipping-product-toolbar input { width: min(320px, 100%); }
    .shipping-selected-count { color: #1767d7; font-size: 13px; font-weight: 700; white-space: nowrap; }
    .shipping-product-grid {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
      max-height: 330px; padding: 12px; overflow-y: auto;
    }
    .shipping-product-card {
      display: grid; grid-template-columns: 22px 54px minmax(0, 1fr); gap: 10px; align-items: center;
      min-width: 0; padding: 10px; border: 1px solid #e0e7ef; border-radius: 12px;
      background: #fff; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }
    .shipping-product-card:hover { border-color: #99bff1; background: #f9fcff; }
    .shipping-product-card.is-selected { border-color: #3980df; background: #f2f7ff; box-shadow: 0 0 0 2px rgba(39, 112, 209, .08); }
    .shipping-product-card.is-disabled { cursor: not-allowed; opacity: .62; }
    .shipping-product-card input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #1767d7; }
    .shipping-product-thumb, .shipping-selected-thumb {
      display: grid; place-items: center; overflow: hidden; flex: 0 0 auto;
      border: 1px solid #e4eaf1; border-radius: 10px; background: #f3f6f9; color: #8a96a7; font-weight: 700;
    }
    .shipping-product-thumb { width: 54px; height: 54px; }
    .shipping-selected-thumb { width: 58px; height: 58px; }
    .shipping-product-thumb img, .shipping-selected-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .shipping-product-copy { min-width: 0; }
    .shipping-product-copy strong { display: block; overflow: hidden; color: #1b2738; text-overflow: ellipsis; white-space: nowrap; }
    .shipping-product-copy small { display: block; margin-top: 5px; color: #7b8798; font-size: 12px; }
    .shipping-product-empty { grid-column: 1 / -1; padding: 28px 12px; color: #7b8798; text-align: center; }
    .shipping-selected-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
    .shipping-selected-head strong { font-size: 14px; }
    .shipping-selected-head span { color: #7b8798; font-size: 12px; }
    .shipping-item-list { display: grid; gap: 10px; }
    .view.active .shipping-item-list:empty::after {
      content: "尚未选择商品，请在上方勾选"; display: block; padding: 18px;
      border: 1px dashed #c8d5e5; border-radius: 12px; color: #7b8798; text-align: center;
    }
    .shipping-item-row {
      display: grid; grid-template-columns: 58px minmax(150px, 1fr) 132px 40px;
      gap: 10px; align-items: start; padding: 12px; border: 1px solid #dbe5f0;
      border-radius: 12px; background: #fbfdff;
    }
    .shipping-selected-info { min-width: 0; align-self: center; }
    .shipping-selected-info strong { display: block; color: #1b2738; }
    .shipping-selected-info small { display: block; margin-top: 5px; color: #7b8798; }
    .shipping-qty-control { display: grid; grid-template-columns: 34px minmax(48px, 1fr) 34px; align-items: center; }
    .shipping-qty-control button, .shipping-qty-control input { height: 38px; border: 1px solid #cfd9e5; background: #fff; }
    .shipping-qty-control button { color: #1767d7; font-size: 18px; cursor: pointer; }
    .shipping-qty-control button:first-child { border-radius: 8px 0 0 8px; }
    .shipping-qty-control button:last-child { border-radius: 0 8px 8px 0; }
    .shipping-qty-control input { border-right: 0; border-left: 0; border-radius: 0; text-align: center; }
    .shipping-item-row select, .shipping-item-row input { width: 100%; }
    .shipping-stock-note { display: block; margin-top: 6px; color: #7b8799; font-size: 12px; }
    .shipping-sn-picker { grid-column: 2 / -1; display: grid; gap: 6px; }
    .shipping-sn-picker select { min-height: 86px; }
    .shipping-remark-preview {
      padding: 12px 14px; border-radius: 10px; background: #f2f7ff; color: #42526b;
      font-size: 13px; line-height: 1.65;
    }
    .shipping-side-card { position: sticky; top: 18px; }
    .shipping-ready-list { display: grid; gap: 10px; }
    .shipping-ready-item {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 13px 14px; border: 1px solid #e1e8f0; border-radius: 12px; background: #fff;
    }
    .shipping-ready-item span { color: #65748a; font-size: 13px; }
    .shipping-history-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
    .shipping-history-toolbar .flow-select-group { min-width: 150px; }
    .shipping-history-toolbar .shipping-search { min-width: 260px; flex: 1; }
    #shippingOrdersSection > .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .shipping-goods-cell { min-width: 220px; line-height: 1.65; }
    .shipping-order-no { display: grid; gap: 5px; min-width: 160px; }
    .shipping-order-no small { color: #7f8a9b; }
    #shippingOrdersSection table { min-width: 1280px; }
    #shippingOrdersSection th:nth-child(1) { width: 180px; }
    #shippingOrdersSection th:nth-child(2) { width: 255px; }
    #shippingOrdersSection th:nth-child(3) { width: 230px; }
    #shippingOrdersSection th:nth-child(4) { width: 185px; }
    #shippingOrdersSection th:nth-child(5) { width: 125px; }
    #shippingOrdersSection th:nth-child(6) { width: 330px; }
    .shipping-order-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 300px;
      align-items: center;
    }
    .shipping-order-actions .btn {
      width: auto;
      min-width: auto;
      min-height: 26px;
      padding: 2px 6px;
      justify-content: center;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: #315eb8;
      font-size: 11px;
      font-weight: 750;
      box-shadow: none;
    }
    .shipping-order-actions .btn:hover {
      transform: none;
      border-color: transparent;
      background: #eef4ff;
      box-shadow: none;
    }
    .shipping-order-actions .btn.primary {
      border: 0;
      background: #eef4ff;
      color: #2859c3;
      box-shadow: none;
    }
    .shipping-order-actions .btn.danger {
      border: 0;
      background: transparent;
      color: #b32c3d;
    }
    .shipping-order-actions .btn.danger:hover { background: #fff0f2; }
    @media (max-width: 1600px) {
      #shippingOrdersSection .table-wrap { overflow-x: visible; }
      #shippingOrdersSection table {
        display: block;
        min-width: 0;
        table-layout: auto;
      }
      #shippingOrdersSection thead,
      #shippingOrdersSection tbody {
        display: block;
        width: 100%;
      }
      #shippingOrdersSection thead tr,
      #shippingOrdersSection tbody tr {
        display: grid;
        grid-template-columns:
          minmax(145px, 1.05fr)
          minmax(210px, 1.55fr)
          minmax(165px, 1.2fr)
          minmax(145px, 1fr)
          minmax(105px, .65fr);
        width: 100%;
      }
      #shippingOrdersSection thead th,
      #shippingOrdersSection tbody td {
        width: auto !important;
        min-width: 0;
      }
      #shippingOrdersSection thead th:nth-child(6) { display: none; }
      #shippingOrdersSection tbody tr {
        border-bottom: 1px solid var(--line);
      }
      #shippingOrdersSection tbody td { border-bottom: 0; }
      #shippingOrdersSection tbody td:last-child {
        position: static;
        display: flex;
        align-items: center;
        gap: 12px;
        grid-column: 1 / -1;
        padding: 7px 10px 8px;
        border-top: 1px solid rgba(119, 157, 201, .16);
        background: #fff;
        box-shadow: none;
      }
      #shippingOrdersSection tbody td:last-child::before {
        content: "操作";
        flex: 0 0 auto;
        color: #7a8798;
        font-size: 11px;
        font-weight: 700;
      }
      #shippingOrdersSection tbody tr:hover td:last-child { background: #f4faff; }
      #shippingOrdersSection tbody td.empty { grid-column: 1 / -1; }
      .shipping-order-actions {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
      }
    }
    @media (max-width: 900px) {
      #shippingOrdersSection > .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #shippingOrdersSection thead { display: none; }
      #shippingOrdersSection tbody {
        display: grid;
        gap: 10px;
        padding: 10px;
      }
      #shippingOrdersSection tbody tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid rgba(119, 157, 201, .28);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(38, 84, 150, .06);
      }
      #shippingOrdersSection tbody td {
        padding: 10px 12px;
        border-bottom: 1px solid rgba(119, 157, 201, .16);
      }
      #shippingOrdersSection tbody td::before {
        display: block;
        margin-bottom: 5px;
        color: #7a8798;
        font-size: 11px;
        font-weight: 700;
      }
      #shippingOrdersSection tbody td:nth-child(1)::before { content: "发货单 / 时间"; }
      #shippingOrdersSection tbody td:nth-child(2)::before { content: "收件信息"; }
      #shippingOrdersSection tbody td:nth-child(3)::before { content: "商品明细"; }
      #shippingOrdersSection tbody td:nth-child(4)::before { content: "快递 / 单号"; }
      #shippingOrdersSection tbody td:nth-child(5)::before { content: "状态"; }
      #shippingOrdersSection tbody td:last-child {
        display: block;
        padding: 10px 12px 12px;
        border-top: 0;
        border-bottom: 0;
      }
      #shippingOrdersSection tbody td:last-child::before { content: "操作"; }
      #shippingOrdersSection tbody td.empty::before { content: none; }
      .shipping-order-actions {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 7px;
      }
      .shipping-order-actions .btn { width: auto; min-width: auto; }
    }
    @media (max-width: 620px) {
      #shippingOrdersSection > .metrics { grid-template-columns: 1fr; }
      #shippingOrdersSection tbody tr { grid-template-columns: 1fr; }
      #shippingOrdersSection tbody td,
      #shippingOrdersSection tbody td:last-child { grid-column: 1; }
    }
    .shipping-status-pill { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
    .shipping-status-pill.draft { color: #526174; background: #edf1f5; }
    .shipping-status-pill.processing { color: #875800; background: #fff0c7; }
    .shipping-status-pill.success { color: #087443; background: #dcf8ea; }
    .shipping-status-pill.failed { color: #b42318; background: #fee4e2; }
    .shipping-status-pill.cancelled { color: #667085; background: #f2f4f7; }
    .shipping-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .shipping-detail-box { padding: 14px; border: 1px solid #e3e9f0; border-radius: 12px; background: #fbfdff; }
    .shipping-detail-box span { display: block; color: #7b8798; font-size: 12px; margin-bottom: 5px; }
    .shipping-detail-box strong { color: #1b2738; line-height: 1.55; }
    @media (max-width: 980px) {
      .shipping-workspace { grid-template-columns: 1fr; }
      .shipping-settings-overview { grid-template-columns: 1fr; }
      .shipping-side-card { position: static; }
      .shipping-recipient-grid { grid-template-columns: 1fr; }
      .shipping-logistics-grid { grid-template-columns: 1fr; }
      .shipping-item-row { grid-template-columns: 58px minmax(140px, 1fr) 124px 40px; }
    }
    @media (max-width: 680px) {
      .shipping-product-toolbar { align-items: stretch; flex-direction: column; }
      .shipping-product-toolbar input { width: 100%; }
      .shipping-product-grid { grid-template-columns: 1fr; max-height: 390px; }
      .shipping-product-recognition-actions { align-items: stretch; flex-direction: column; }
      .shipping-product-recognition-actions .btn { width: 100%; }
      .shipping-item-row { grid-template-columns: 52px minmax(0, 1fr) 40px; }
      .shipping-selected-thumb { width: 52px; height: 52px; }
      .shipping-item-row .shipping-qty-field { grid-column: 2 / -1; }
      .shipping-sn-picker { grid-column: 1 / -1; }
    }

    /* 2026-08 usability hardening */
    .mobile-nav-toggle,
    .mobile-nav-backdrop { display: none; }
    .sidebar[hidden] { display: none !important; }
    .topbar-title { display: flex; min-width: 0; align-items: center; gap: 12px; }
    #pageTitle:focus { outline: none; }
    :where(button, input, select, textarea, summary, [tabindex]):focus-visible {
      outline: 3px solid rgba(45, 93, 215, .34);
      outline-offset: 2px;
    }
    .login-status-message {
      display: none;
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
      text-align: center;
    }
    .login-status-message.is-error {
      display: block;
      color: #b42318;
    }
    .product-picker-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      margin: 7px 0 9px;
    }
    .product-picker-toolbar span { color: var(--muted); font-size: 12px; white-space: nowrap; }
    .oa-product-picker { max-height: 420px; overflow: auto; overscroll-behavior: contain; }
    .oa-product-option { min-width: 0; }
    .oa-product-option > span:last-child { min-width: 0; }
    .oa-product-option strong {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow-wrap: anywhere;
    }
    .table-wrap {
      position: relative;
      overscroll-behavior-inline: contain;
      scrollbar-gutter: stable;
    }
    .table-wrap table { margin: 0; }
    .bar-row > :last-child { min-width: 96px; text-align: right; white-space: nowrap; }
    .wecom-member-list-wrap td:nth-child(7) .tag {
      display: block;
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .wecom-member-name strong,
    .reservation-entry-ident strong,
    .reservation-qr-product {
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .mall-order-card {
      grid-template-columns: 84px minmax(260px, 1fr) minmax(460px, 1.7fr);
      align-items: start;
    }

    .mall-order-phone-group {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 9px 11px;
      border: 1px solid #b9cdf3;
      border-left: 4px solid #2d63d7;
      border-radius: 8px;
      background: linear-gradient(90deg, #eaf2ff, #f5faff);
      color: #294665;
    }

    .mall-order-phone-group-ident,
    .mall-order-phone-group-meta {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .mall-order-phone-group-ident span {
      color: #687e99;
      font-size: 11px;
      font-weight: 700;
    }

    .mall-order-phone-group-ident strong {
      color: #17385f;
      font-size: 15px;
      letter-spacing: .02em;
    }

    .mall-order-phone-group-meta > span {
      color: #5f7490;
      font-size: 11px;
      white-space: nowrap;
    }

    .mall-order-phone-group .btn {
      min-height: 30px;
      padding: 4px 9px;
      font-size: 11px;
      white-space: nowrap;
    }

    .mall-order-phone-group.is-expanded {
      border-color: #91b3ed;
      background: linear-gradient(90deg, #e5efff, #f2f8ff);
    }

    .mall-order-phone-expanded-state {
      padding: 3px 7px;
      border-radius: 999px;
      background: #dce9ff;
      color: #2459b8 !important;
      font-weight: 700;
    }

    .mall-order-card.is-phone-grouped {
      margin-left: 8px;
      border-left: 3px solid #a8c2f2;
    }

    .mall-order-card.is-phone-history {
      border-left-color: #e9a23b;
      background: linear-gradient(90deg, #fffaf0 0, #fff 170px);
    }

    .mall-order-batch-bar {
      display: grid;
      grid-template-columns: minmax(280px, 1fr) auto auto;
      align-items: center;
      gap: 8px 10px;
      margin: 10px 0;
      padding: 7px 10px;
      border: 1px solid #c9dafc;
      border-radius: 8px;
      background: #f1f6ff;
    }

    .mall-order-batch-copy {
      min-width: 0;
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      align-items: center;
      gap: 8px;
    }

    .mall-order-batch-copy strong {
      color: #27466f;
      font-size: 13px;
    }

    .mall-order-batch-copy span {
      min-width: 0;
      overflow: hidden;
      color: #637894;
      font-size: 11px;
      line-height: 1.4;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mall-order-batch-bar > .actions {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 0;
    }

    .mall-order-batch-bar .btn {
      min-height: 32px;
      padding: 5px 10px;
      border-radius: 7px;
      gap: 5px;
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
    }

    .mall-order-batch-bar .btn i { font-size: 14px; }

    .mall-order-batch-bar .btn:active,
    .mall-order-select-all:active { transform: translateY(1px); }

    .mall-order-batch-selection {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .mall-order-select-all {
      min-height: 32px;
      padding: 5px 9px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #d4e1f2;
      border-radius: 7px;
      background: #fff;
      color: #294665;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }

    .mall-order-select-all:hover { border-color: #aac4ed; background: #fbfdff; }
    .mall-order-select-all:focus-within { outline: 2px solid rgba(45, 99, 215, .25); outline-offset: 1px; }

    .mall-order-batch-clear {
      border-color: transparent !important;
      background: transparent !important;
      color: #315cb6 !important;
      box-shadow: none !important;
    }

    .mall-order-batch-clear:hover { background: rgba(45, 99, 215, .08) !important; }

    .mall-order-select-all input,
    .mall-order-select input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: #2d63d7;
      cursor: pointer;
    }

    @media (max-width: 1100px) {
      .mall-order-batch-bar { grid-template-columns: minmax(0, 1fr) auto; }
      .mall-order-batch-copy { grid-column: 1 / -1; }
      .mall-order-batch-selection { min-width: 0; }
      .mall-order-batch-bar > .actions { justify-content: flex-end; }
    }

    @media (max-width: 700px) {
      .mall-order-phone-group { align-items: flex-start; flex-direction: column; }
      .mall-order-phone-group-meta { width: 100%; flex-wrap: wrap; }
      .mall-order-phone-group-meta .btn { margin-left: auto; }
      .mall-order-card.is-phone-grouped { margin-left: 3px; }
      .mall-order-batch-bar { grid-template-columns: minmax(0, 1fr); }
      .mall-order-batch-copy { grid-template-columns: minmax(0, 1fr); gap: 2px; }
      .mall-order-batch-selection { width: 100%; justify-content: space-between; }
      .mall-order-batch-bar > .actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .mall-order-batch-bar > .actions .btn { width: 100%; min-width: 0; justify-content: center; }
    }

    @media (max-width: 420px) {
      .mall-order-select-all { max-width: calc(100vw - 112px); overflow: hidden; }
      .mall-order-select-all span { overflow: hidden; text-overflow: ellipsis; }
      .mall-order-batch-bar .btn { padding-inline: 7px; }
    }
    .mall-order-card .mall-cover { width: 84px; }
    .mall-order-card > .product-card-actions { grid-column: 2 / -1; justify-content: flex-start; }
    .mall-order-card .order-compact-meta strong { overflow-wrap: anywhere; }
    .danger-zone-action { margin-left: auto; }
    .product-card-actions .danger-zone-action {
      border-style: dashed;
      background: #fff9f8;
    }
    .empty .btn { margin-top: 12px; }
    .main,
    .content,
    .view,
    .panel,
    .panel-head,
    .mall-section,
    .mall-section-head,
    .toolbar,
    .actions,
    .field,
    .product-main,
    .product-meta,
    .product-supplier { min-width: 0; }
    .btn,
    .user-chip { flex-shrink: 0; }
    .user-chip { white-space: nowrap; }

    @media (min-width: 1440px) {
      #productCards .product-card {
        grid-template-columns: 44px 76px minmax(150px, 1fr) minmax(320px, 2fr) minmax(100px, .7fr) 184px;
        gap: 11px;
      }
      #productCards .product-card .product-image { width: 76px; }
      #productCards .product-card-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 184px;
      }
      #productCards .product-card-actions .btn { min-width: 0; justify-content: center; padding-inline: 8px; }
      #productCards .product-card-actions .danger-zone-action { grid-column: 2; margin-left: 0; }
    }

    @media (min-width: 761px) and (max-width: 1439px) {
      #productCards .product-card {
        grid-template-columns: 50px 76px minmax(160px, 1fr) minmax(260px, 2fr);
        align-items: center;
      }
      #productCards .product-card .product-image { width: 76px; }
      #productCards .product-supplier,
      #productCards .product-card-actions {
        grid-column: 2 / -1;
        justify-content: flex-start;
      }
      #productCards .product-card-actions { min-width: 0; }
      #productCards .product-card-actions .danger-zone-action { margin-left: auto; }
    }

    @media (max-width: 1180px) {
      body.mobile-nav-open { overflow: hidden; }
      .app { grid-template-columns: minmax(0, 1fr); }
      .sidebar {
        display: block;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 80;
        width: min(320px, 86vw);
        max-height: none;
        padding: 14px;
        overflow-y: auto;
        transform: translateX(-102%);
        transition: transform .2s ease;
        box-shadow: 18px 0 42px rgba(18, 42, 72, .22);
      }
      .sidebar.mobile-open { transform: translateX(0); }
      .mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 70;
        border: 0;
        background: rgba(14, 27, 46, .42);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
      }
      .mobile-nav-backdrop[hidden] { display: none !important; }
      .mobile-nav-backdrop.show { opacity: 1; pointer-events: auto; }
      .mobile-nav-toggle { display: inline-flex; flex: 0 0 auto; min-width: 58px; justify-content: center; }
      .brand { grid-template-columns: 1fr; }
      .nav { display: grid; max-height: none; overflow: visible; }
      .nav-group { display: grid; }
      .nav .nav-group-toggle,
      .nav .nav-home { width: 100%; min-width: 0; justify-content: flex-start; }
      .nav-group-items { display: grid; overflow: visible; }
      .nav .mall-subnav { display: grid; overflow: visible; white-space: normal; }
      .topbar {
        min-height: 74px;
        height: auto;
        padding: 12px 18px;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
      }
      .topbar-title { flex: 1 1 360px; }
      .topbar-title > div { min-width: 0; }
      .topbar > .actions {
        flex: 1 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      .content { padding: 18px; }
      .panel-head,
      .mall-section-head { flex-wrap: wrap; }
      .panel-head > .actions,
      .mall-section-head > .actions { max-width: 100%; }
      .product-filters { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, 190px)); }
      .audit-filters { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(150px, 210px)); }
      .mall-store-toolbar { grid-template-columns: minmax(260px, 1fr) auto; }
      .mall-store-toolbar #mallStoreHint { grid-column: 1 / -1; }
      .readonly-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .reservation-manager-grid { grid-template-columns: 1fr; }
      .reservation-channel-row { grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(90px, .6fr)); }
      .reservation-channel-row .actions { grid-column: 1 / -1; justify-content: flex-start; }
      .wecom-workspace-bar { grid-template-columns: minmax(240px, 360px) 1fr; }
      .mall-order-card { grid-template-columns: 76px minmax(220px, 1fr) minmax(360px, 1.35fr); }
    }

    @media (max-width: 900px) {
      .content { padding: 14px; gap: 14px; }
      .topbar-title { flex-basis: 100%; }
      .topbar > .actions { width: 100%; justify-content: flex-start; }
      .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .product-filters,
      .audit-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .mall-store-toolbar,
      .wecom-workspace-bar { grid-template-columns: 1fr; }
      .mall-store-toolbar #mallStoreHint { grid-column: auto; }
      .mall-store-actions { flex-wrap: wrap; }
      .permission-grid { grid-template-columns: 1fr; }
      .mall-card {
        grid-template-columns: 76px minmax(0, 1fr);
        align-items: start;
      }
      .mall-cover { width: 76px; }
      .mall-meta,
      .mall-card .product-card-actions { grid-column: 1 / -1; }
      .mall-order-card { grid-template-columns: 64px minmax(0, 1fr); }
      .mall-order-card .mall-cover { width: 64px; }
      .mall-order-card .mall-meta,
      .mall-order-card > .product-card-actions,
      .mall-order-card .mall-detail-panel { grid-column: 1 / -1; }
      #productCards .product-card {
        grid-template-columns: 42px 68px minmax(0, 1fr);
        gap: 9px;
      }
      #productCards .product-card .product-image { width: 68px; }
      #productCards .product-meta,
      #productCards .product-supplier,
      #productCards .product-card-actions { grid-column: 1 / -1; }
      #productCards .product-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #productCards .product-card-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      #productCards .product-card-actions .btn {
        min-width: 0;
        justify-content: center;
      }
      #productCards .product-card-actions .danger-zone-action { margin-left: 0; }
    }

    @media (max-width: 760px) {
      body.mobile-nav-open { overflow: hidden; }
      .app { grid-template-columns: 1fr; }
      .sidebar {
        display: block;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 80;
        width: min(320px, 86vw);
        max-height: none;
        padding: 14px;
        overflow-y: auto;
        transform: translateX(-102%);
        transition: transform .2s ease;
        box-shadow: 18px 0 42px rgba(18, 42, 72, .22);
      }
      .sidebar.mobile-open { transform: translateX(0); }
      .mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 70;
        border: 0;
        background: rgba(14, 27, 46, .42);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
      }
      .mobile-nav-backdrop[hidden] { display: none !important; }
      .mobile-nav-backdrop.show { opacity: 1; pointer-events: auto; }
      .mobile-nav-toggle { display: inline-flex; flex: 0 0 auto; min-width: 58px; justify-content: center; }
      .brand { grid-template-columns: 1fr; }
      .nav { display: grid; max-height: none; overflow: visible; }
      .nav-group { display: grid; }
      .nav .nav-group-toggle,
      .nav .nav-home { width: 100%; min-width: 0; justify-content: flex-start; }
      .nav-group-items { display: grid; overflow: visible; }
      .nav .mall-subnav { display: grid; overflow: visible; white-space: normal; }
      .topbar { padding: 12px; gap: 12px; }
      .topbar-title { width: 100%; align-items: flex-start; }
      .topbar-title > div { min-width: 0; }
      .topbar .actions {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding: 0;
      }
      .topbar .actions .user-chip { grid-column: 1 / -1; width: 100%; }
      .topbar .actions .btn { width: 100%; min-width: 0; padding: 0 8px; justify-content: center; }
      .view.active .table-wrap::before,
      .modal.show .table-wrap::before {
        content: "表格可左右滑动查看完整内容";
        display: block;
        position: sticky;
        left: 0;
        width: max-content;
        max-width: calc(100vw - 48px);
        padding: 7px 10px;
        color: #5d6f7c;
        background: #eef5fb;
        border-bottom: 1px solid #d9e6f0;
        font-size: 11px;
      }
      .mall-order-card {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 10px;
      }
      .mall-order-card .mall-cover { width: 64px; }
      .mall-order-card .mall-meta,
      .mall-order-card > .product-card-actions,
      .mall-order-card .mall-detail-panel { grid-column: 1 / -1; }
      .mall-order-card .order-compact-meta { grid-template-columns: 1fr; }
      .mall-order-card > .product-card-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .mall-order-card > .product-card-actions .btn { min-width: 0; margin-left: 0; }
      .mall-detail-panel { grid-template-columns: 1fr; }
      .mall-detail-panel .full { grid-column: auto; }
      .product-picker-toolbar { grid-template-columns: 1fr; }
      .product-picker-toolbar span { white-space: normal; }
      .oa-product-picker { max-height: 360px; }
      .danger-zone-action { margin-left: 0; }
      .permission-bulk-toolbar {
        top: 0;
        align-items: stretch;
        flex-direction: column;
      }
      .permission-bulk-toolbar .actions { display: grid; grid-template-columns: 1fr 1fr; }
      .permission-bulk-toolbar .btn { justify-content: center; }
      .permission-group-title { align-items: flex-start; }
      .permission-group-title-actions { flex-wrap: wrap; justify-content: flex-end; }
      .permission-group-collapse {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 9px;
        border: 1px solid rgba(45, 93, 215, .24);
        border-radius: 999px;
        color: #214b9c;
        background: #fff;
        font: inherit;
        font-size: 12px;
        font-weight: 650;
      }
      .permission-group:not(.is-expanded) .permission-group-list { display: none; }
      .permission-actions-sticky { bottom: 8px; }
    }

    /* 2026-08-07 full admin density and MacBook remediation */
    .content {
      gap: 14px;
      padding: 16px 18px 20px;
    }
    .view.active { gap: 14px; }
    .panel-head,
    .mall-section-head { padding: 12px 15px; }
    .panel-body { padding: 14px 15px; }
    .metrics { gap: 10px; }
    .metric {
      min-height: 104px;
      padding: 14px 15px;
    }
    .metric strong { margin-top: 7px; font-size: 25px; }
    .cards,
    .admin-list { gap: 9px; }
    .empty { padding: 22px 14px; }
    .product-filters,
    .audit-filters {
      gap: 8px;
      padding: 10px 14px;
    }
    .flow-summary {
      gap: 8px;
      padding: 10px 14px;
    }
    .flow-summary-item {
      min-height: 58px;
      padding: 8px 10px;
    }
    .flow-summary-item strong { margin-top: 4px; font-size: 17px; }
    table th,
    table td { padding: 9px 10px; }
    .pagination { padding: 9px 14px 11px; }
    .btn { min-height: 34px; }
    input,
    select { min-height: 36px; }
    textarea { min-height: 76px; }
    .filter-more-toggle {
      display: none;
      align-self: end;
      justify-content: center;
      border-style: dashed;
      color: #31567f;
      background: #f8fbff;
    }
    #wecomEnterpriseForm.is-unselected { display: none; }
    #permissionPanel.is-empty .permission-actions-sticky { display: none; }
    #permissionPanel.is-empty .permission-grid { margin-top: 8px !important; }
    #permissionPanel.is-empty .permission-grid .empty { padding: 18px 12px; }
    #wecomExtensionsSection .cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 14px 15px;
    }
    #wecomExtensionsSection .card { min-height: 0; padding: 16px; }

    @media (min-width: 901px) and (max-width: 1180px) {
      .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .topbar {
        min-height: 64px;
        padding: 9px 16px;
        flex-wrap: nowrap;
      }
      .topbar-title { flex: 1 1 auto; }
      .topbar-title > div { overflow: hidden; }
      #pageHint {
        overflow: hidden;
        max-width: 440px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .topbar > .actions { flex: 0 0 auto; flex-wrap: nowrap; }
      .topbar > .actions .btn { padding-inline: 11px; }
      .oa-workbench {
        grid-template-columns: minmax(0, 1fr) minmax(292px, .52fr);
        gap: 12px;
      }
      .oa-editor { gap: 12px; }
      .oa-preview-shell {
        position: sticky;
        top: 78px;
        padding: 11px;
      }
      .oa-phone { min-height: 540px; max-height: calc(100vh - 130px); }
      .oa-preview-head { padding: 18px 16px 7px; }
      .oa-preview-head h3 { font-size: 18px; }
      .oa-preview-body { padding: 7px 16px 24px; font-size: 14px; }
      .deal-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(278px, .55fr);
        gap: 12px;
      }
      .deal-builder-panel .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .deal-product-picker-field,
      .deal-note-field,
      .deal-channel-field { grid-column: 1 / -1; }
      .wecom-ai-layout {
        grid-template-columns: minmax(260px, .78fr) minmax(360px, 1.22fr);
        gap: 12px;
      }
      .wecom-task-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .wecom-task-form-grid > .full { grid-column: 1 / -1; }
      .wecom-task-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .supports-compact-toggle { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }

    @media (max-width: 1180px) {
      .nav .mall-subnav.is-hidden,
      .nav-group-items.is-hidden { display: none !important; }
      .content { padding: 14px 16px 18px; }
      .panel-head,
      .mall-section-head { padding: 11px 13px; }
      .panel-body { padding: 12px 13px; }
      .supports-compact-toggle {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: end;
      }
      .supports-compact-toggle.is-compact-collapsed > .compact-filter-extra { display: none; }
      .supports-compact-toggle .filter-more-toggle { display: inline-flex; }
      .table-wrap.has-horizontal-overflow::before {
        content: "可左右滑动查看完整内容";
        display: block;
        position: sticky;
        left: 0;
        z-index: 3;
        width: max-content;
        max-width: calc(100vw - 48px);
        padding: 6px 9px;
        border-bottom: 1px solid #d9e6f0;
        color: #526a80;
        background: #eef5fb;
        font-size: 11px;
      }
      .flow-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
      .mall-card {
        grid-template-columns: 72px minmax(220px, 1.1fr) minmax(235px, .95fr) auto;
        gap: 10px;
        padding: 10px;
      }
      .mall-cover { width: 72px; }
      .mall-main,
      .mall-meta { gap: 6px; }
      .mall-card .product-card-actions { gap: 6px; }
      #mallCategoryCards .mall-card,
      #mallVideoCategoryCards .mall-card {
        grid-template-columns: 60px minmax(0, 1fr) auto;
        min-height: 0;
      }
      #mallCategoryCards .mall-cover,
      #mallVideoCategoryCards .mall-cover { width: 60px; }
      #mallCategoryCards .product-card-actions,
      #mallVideoCategoryCards .product-card-actions {
        grid-column: 3;
        flex-wrap: nowrap;
      }
      .mall-order-card {
        grid-template-columns: 64px minmax(210px, .9fr) minmax(300px, 1.1fr);
        gap: 9px;
        padding: 10px;
      }
      .mall-order-card .mall-cover { width: 64px; }
      .mall-order-card > .product-card-actions {
        grid-column: 2 / -1;
        gap: 6px;
        padding-top: 0;
      }
      .mall-order-card > .product-card-actions .btn { padding-inline: 9px; }
      .order-compact-meta { gap: 6px; }
      .order-compact-meta div { min-height: 38px; padding: 6px 8px; }
      .mall-detail-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
      }
      .mall-detail-panel .full { grid-column: 1 / -1; }
      #productCards .product-card {
        grid-template-columns: 40px 62px minmax(160px, .8fr) minmax(300px, 1.7fr);
        gap: 9px;
        padding: 10px;
      }
      #productCards .product-card .product-image { width: 62px; }
      #productCards .product-supplier {
        grid-column: 3;
        grid-row: 2;
        align-self: center;
      }
      #productCards .product-card-actions {
        grid-column: 4;
        grid-row: 2;
        flex-wrap: nowrap;
        gap: 6px;
      }
      #productCards .product-card-actions .btn { min-width: 0; padding-inline: 8px; }
      #productCards .product-card-actions .danger-zone-action { margin-left: auto; }
      .product-meta { gap: 7px; }
      .admin-row {
        grid-template-columns: minmax(170px, 1.2fr) minmax(155px, 1fr) minmax(120px, .7fr) minmax(155px, 1fr);
        gap: 9px 12px;
        padding: 11px;
      }
      .admin-actions {
        grid-column: 3 / -1;
        justify-content: flex-end;
      }
      .shipping-settings-overview { grid-template-columns: 1fr; gap: 12px; }
      .shipping-step { gap: 11px; padding: 15px 17px; }
      .shipping-address-box textarea { min-height: 84px; }
      .shipping-ready-item {
        display: grid;
        grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr);
        justify-content: stretch;
        padding: 10px 12px;
      }
      .shipping-ready-item strong { white-space: normal; }
      .shipping-ready-item span { overflow-wrap: anywhere; }
      #inventoryStatusPanel .panel-head .toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(130px, 170px));
      }
      #wecomExtensionsSection .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (min-width: 901px) and (max-width: 1180px) {
      .supports-compact-toggle { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }

    @media (min-width: 1181px) and (max-width: 1439px) {
      .supports-compact-toggle {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: end;
      }
      .supports-compact-toggle.is-compact-collapsed > .compact-filter-extra { display: none; }
      .supports-compact-toggle .filter-more-toggle { display: inline-flex; }
      .flow-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
      .table-wrap.has-horizontal-overflow::before {
        content: "可左右滑动查看完整内容";
        display: block;
        position: sticky;
        left: 0;
        z-index: 3;
        width: max-content;
        padding: 6px 9px;
        border-bottom: 1px solid #d9e6f0;
        color: #526a80;
        background: #eef5fb;
        font-size: 11px;
      }
      .admin-row {
        grid-template-columns: minmax(170px, 1.2fr) minmax(155px, 1fr) minmax(120px, .7fr) minmax(155px, 1fr);
        gap: 9px 12px;
        padding: 11px;
      }
      .admin-actions { grid-column: 3 / -1; justify-content: flex-end; }
    }

    @media (min-width: 1181px) {
      .sidebar {
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        max-height: 100vh;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
      }
    }

    @media (max-width: 900px) {
      .supports-compact-toggle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .flow-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #mallCategoryCards .mall-card,
      #mallVideoCategoryCards .mall-card { grid-template-columns: 56px minmax(0, 1fr); }
      #mallCategoryCards .product-card-actions,
      #mallVideoCategoryCards .product-card-actions { grid-column: 1 / -1; flex-wrap: wrap; }
      .mall-detail-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .admin-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .admin-actions { grid-column: 1 / -1; justify-content: flex-start; }
      #wecomExtensionsSection .cards { grid-template-columns: 1fr; }
    }

    @media (max-width: 760px) {
      .supports-compact-toggle { grid-template-columns: 1fr; }
      .table-wrap.has-horizontal-overflow::before { content: "可左右滑动查看完整内容"; }
      .view.active .table-wrap:not(.has-horizontal-overflow)::before,
      .modal.show .table-wrap:not(.has-horizontal-overflow)::before { display: none; }
      #productCards .product-card { grid-template-columns: 40px 58px minmax(0, 1fr); }
      #productCards .product-card .product-image { width: 58px; }
      #productCards .product-supplier,
      #productCards .product-card-actions { grid-column: 1 / -1; grid-row: auto; }
      #productCards .product-card-actions { flex-wrap: wrap; }
      .mall-detail-panel { grid-template-columns: 1fr; }
      .mall-detail-panel .full { grid-column: auto; }
      .admin-row { grid-template-columns: 1fr; }
      .admin-actions { grid-column: 1; }
      #inventoryStatusPanel .panel-head .toolbar { grid-template-columns: 1fr 1fr; width: 100%; }
    }

    /* 2026-08 order list density pass */
    #mallOrderCards {
      gap: 6px;
      padding: 8px 10px 12px;
    }

    .mall-order-card {
      grid-template-columns: 54px minmax(300px, 1.1fr) minmax(400px, 1fr);
      grid-template-areas:
        "cover summary meta"
        "cover summary actions"
        "detail detail detail";
      align-items: center;
      gap: 6px 10px;
      padding: 8px 10px;
      box-shadow: none;
    }

    .mall-order-card.is-priority-shipping {
      border-color: rgba(227, 163, 38, .52);
      background: linear-gradient(95deg, rgba(255, 249, 232, .96), rgba(255, 255, 255, .98) 42%);
      box-shadow: inset 4px 0 0 #e7a628;
    }

    .mall-order-card.is-batch-selectable {
      grid-template-columns: 26px 54px minmax(300px, 1.1fr) minmax(400px, 1fr);
      grid-template-areas:
        "select cover summary meta"
        "select cover summary actions"
        "detail detail detail detail";
    }

    .mall-order-card.is-selected {
      border-color: rgba(45, 99, 215, .64);
      background: linear-gradient(95deg, rgba(237, 245, 255, .98), rgba(255, 255, 255, .98) 48%);
      box-shadow: inset 4px 0 0 #2d63d7;
    }

    .mall-order-card.is-priority-shipping.is-selected {
      border-color: rgba(45, 99, 215, .64);
      box-shadow: inset 4px 0 0 #2d63d7;
    }

    .mall-order-select {
      grid-area: select;
      width: 26px;
      min-height: 34px;
      display: grid;
      place-items: start center;
      padding-top: 1px;
      cursor: pointer;
    }

    .mall-order-card .priority-shipping-tag {
      border: 1px solid rgba(210, 142, 14, .3);
      background: #fff1c7;
      color: #925800;
      font-weight: 750;
    }

    .mall-order-card .priority-shipping-action {
      border-color: rgba(210, 142, 14, .46);
      background: #fff8e7;
      color: #875400;
    }

    .mall-order-card .priority-shipping-action:hover,
    .mall-order-card .priority-shipping-action.is-active {
      border-color: #dfa11f;
      background: #ffedb8;
      color: #714500;
    }

    .mall-order-card .priority-shipping-detail { color: #a16000; }

    .mall-order-card .mall-cover {
      grid-area: cover;
      width: 54px;
      height: 54px;
      align-self: start;
      font-size: 20px;
    }

    .mall-order-card .mall-main {
      grid-area: summary;
      align-self: start;
      gap: 5px;
    }

    .mall-order-card .mall-main > strong {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-size: 14px;
      line-height: 1.35;
    }

    .mall-order-card .mall-main > div {
      display: flex;
      min-width: 0;
      flex-wrap: wrap;
      gap: 4px;
    }

    .mall-order-card .mall-main .tag {
      min-height: 22px;
      padding: 2px 7px;
      font-size: 11px;
      line-height: 16px;
    }

    .mall-order-card .order-id-tag,
    .mall-order-card .order-customer-store-tag {
      display: inline-block;
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
    }

    .mall-order-card .order-compact-meta {
      grid-area: meta;
      grid-template-columns: minmax(120px, 1.35fr) minmax(68px, .65fr) minmax(105px, 1fr) minmax(105px, 1fr);
      align-self: stretch;
      gap: 0;
      overflow: hidden;
      border: 1px solid rgba(112, 154, 206, .18);
      border-radius: 8px;
      background: rgba(247, 251, 255, .72);
    }

    .mall-order-card .order-compact-meta > div {
      min-height: 42px;
      padding: 5px 9px;
      display: grid;
      align-content: center;
      gap: 2px;
      border: 0;
      border-left: 1px solid rgba(112, 154, 206, .16);
      border-radius: 0;
      background: transparent;
    }

    .mall-order-card .order-compact-meta > div:first-child { border-left: 0; }
    .mall-order-card .order-compact-meta span { font-size: 11px; line-height: 1.2; }
    .mall-order-card .order-meta-customer > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .mall-order-card .order-customer-primary {
      display: flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
    }
    .mall-order-card .order-customer-copy-text {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mall-order-card .order-customer-priority-tag {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      min-height: 19px;
      padding: 1px 6px;
      border: 1px solid rgba(210, 142, 14, .34);
      border-radius: 999px;
      background: #fff0bd;
      color: #8a5200;
      font-size: 10px;
      font-weight: 800;
      line-height: 15px;
    }
    .mall-order-wechat-status {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      min-width: 0;
      color: #788598;
      font-size: 9px;
      font-style: normal;
      font-weight: 700;
      white-space: nowrap;
    }
    .mall-order-wechat-status.is-added { color: #16805a; }
    .mall-order-wechat-status.is-not_matched { color: #a06b11; }
    .mall-order-wechat-status.is-error { color: #b13b45; }
    .mall-order-wechat-status.is-no_phone { color: #8b94a2; }
    .mall-order-card .order-compact-meta strong {
      margin-top: 0;
      overflow: hidden;
      font-size: 12px;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mall-order-card .order-meta-amount strong { color: #173d76; font-variant-numeric: tabular-nums; }
    .mall-order-card .order-meta-time strong,
    .mall-order-card .order-meta-shipped strong { font-size: 11px; font-variant-numeric: tabular-nums; }

    .mall-order-card > .order-card-actions {
      grid-area: actions;
      min-width: 0;
      align-self: start;
      justify-content: flex-end;
      gap: 5px;
      padding-top: 0;
    }

    .mall-order-card > .order-card-actions .btn {
      min-height: 30px;
      padding: 0 9px;
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
    }

    .mall-order-card > .order-card-actions .danger-zone-action { margin-left: 0; }
    .mall-order-card > .mall-detail-panel { grid-area: detail; }

    .mall-order-sms-followup {
      display: grid;
      gap: 8px;
      min-width: 0;
      padding: 10px;
      border: 1px solid rgba(112, 154, 206, .2);
      border-radius: 9px;
      background: #fff;
    }

    .mall-order-sms-followup-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .mall-detail-panel .mall-order-sms-followup-head > span {
      margin: 0;
      color: #243a5a;
      font-size: 13px;
      font-weight: 800;
    }

    .mall-order-sms-followup-head small { color: #8490a3; font-size: 11px; }
    .mall-order-sms-history { display: grid; gap: 7px; max-height: 380px; overflow-y: auto; }

    .mall-order-sms-entry {
      display: grid;
      gap: 7px;
      padding: 9px 10px;
      border: 1px solid #e0e6ef;
      border-left: 3px solid #8ca0bc;
      border-radius: 8px;
      background: #f9fbfd;
    }

    .mall-order-sms-entry.is-success { border-left-color: #2aa876; background: #f5fbf8; }
    .mall-order-sms-entry.is-failed { border-left-color: #d9505d; background: #fff7f8; }
    .mall-order-sms-entry.is-pending { border-left-color: #d79522; background: #fffaf1; }

    .mall-order-sms-entry-head {
      display: grid;
      grid-template-columns: minmax(140px, 1fr) max-content max-content;
      align-items: center;
      gap: 8px;
    }

    .mall-order-sms-entry-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mall-detail-panel .mall-order-sms-entry-head > span {
      display: inline-flex;
      margin: 0;
      padding: 2px 7px;
      border-radius: 999px;
      background: #e9eef5;
      color: #5d6c81;
      font-size: 10px;
      font-weight: 750;
    }
    .mall-order-sms-entry.is-success .mall-order-sms-entry-head > span { background: #dff5ea; color: #14724f; }
    .mall-order-sms-entry.is-failed .mall-order-sms-entry-head > span { background: #ffe5e8; color: #ad2f3c; }
    .mall-order-sms-entry-head time { color: #7e8a9d; font-size: 11px; font-variant-numeric: tabular-nums; }
    .mall-order-sms-entry p { margin: 0; color: #35465f; font-size: 12px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
    .mall-order-sms-error { color: #b53643; font-size: 11px; line-height: 1.5; }
    .mall-order-sms-entry footer { display: flex; flex-wrap: wrap; gap: 6px 16px; color: #7d899b; font-size: 10px; }
    .mall-detail-panel .mall-order-sms-entry footer span { display: inline; margin: 0; color: inherit; font-size: inherit; }
    .mall-order-sms-empty { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px dashed #d8e0eb; border-radius: 8px; color: #8290a5; background: #fafbfd; font-size: 12px; }
    .mall-detail-panel .mall-order-sms-empty span { display: inline; margin: 0; color: inherit; font-size: inherit; }

    @media (min-width: 1500px) {
      .mall-order-card {
        grid-template-columns: 54px minmax(220px, 1fr) minmax(380px, 1.35fr) minmax(250px, auto);
        grid-template-areas:
          "cover summary meta actions"
          "detail detail detail detail";
      }
      .mall-order-card > .order-card-actions { align-self: center; }
      .mall-order-card.is-batch-selectable {
        grid-template-columns: 30px 54px minmax(220px, 1fr) minmax(380px, 1.35fr) minmax(250px, auto);
        grid-template-areas:
          "select cover summary meta actions"
          "detail detail detail detail detail";
      }
    }

    @media (max-width: 900px) {
      #mallOrderCards { padding: 7px 8px 10px; }
      .mall-order-card {
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-areas:
          "cover summary"
          "meta meta"
          "actions actions"
          "detail detail";
        gap: 7px 9px;
        padding: 8px;
      }
      .mall-order-card.is-batch-selectable {
        grid-template-columns: 30px 48px minmax(0, 1fr);
        grid-template-areas:
          "select cover summary"
          "select meta meta"
          "actions actions actions"
          "detail detail detail";
      }
      .mall-order-card .mall-cover { width: 48px; height: 48px; }
      .mall-order-card .order-compact-meta {
        grid-template-columns: minmax(120px, 1.3fr) minmax(72px, .7fr) minmax(112px, 1fr) minmax(112px, 1fr);
      }
      .mall-order-card > .order-card-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
      }
    }

    @media (max-width: 560px) {
      .mall-order-card .order-compact-meta {
        grid-template-columns: minmax(0, 1.45fr) minmax(82px, .75fr);
      }
      .mall-order-card .order-meta-time {
        grid-column: auto;
        border-top: 1px solid rgba(112, 154, 206, .16);
        border-left: 0;
      }
      .mall-order-card .order-meta-shipped {
        border-top: 1px solid rgba(112, 154, 206, .16);
      }
      .mall-order-card > .order-card-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .mall-order-card > .order-card-actions .btn { width: 100%; justify-content: center; }
      .mall-order-sms-entry-head { grid-template-columns: minmax(0, 1fr) max-content; }
      .mall-order-sms-entry-head time { grid-column: 1 / -1; }
    }

    /* 2026-08 reservation code layout correction */
    .reservation-code-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }

    .reservation-code-section {
      padding: 12px;
      overflow: hidden;
    }

    .reservation-code-section > .reservation-settings-band-head {
      min-height: 34px;
      margin-bottom: 10px;
      padding-bottom: 8px;
    }

    .reservation-code-section > .reservation-settings-band-head strong {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .reservation-code-section > .reservation-settings-band-head span {
      min-width: 0;
      text-align: right;
    }

    .reservation-code-section > .reservation-manager-summary {
      padding: 0 0 10px;
      gap: 6px;
    }

    .reservation-entry-table {
      width: 100%;
      min-width: 820px;
      table-layout: fixed;
    }

    .reservation-entry-col-product { width: 30%; }
    .reservation-entry-col-channel { width: 13%; }
    .reservation-entry-col-related { width: 21%; }
    .reservation-entry-col-history { width: 15%; }
    .reservation-entry-col-status { width: 10%; }
    .reservation-entry-col-actions { width: 11%; }

    .reservation-entry-table th,
    .reservation-entry-table td {
      padding: 9px 10px;
      vertical-align: middle;
    }

    .reservation-entry-table th {
      overflow: hidden;
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .reservation-entry-table td {
      overflow: hidden;
      font-size: 12px;
    }

    .reservation-entry-ident {
      min-width: 0;
      align-items: flex-start;
      gap: 8px;
    }

    .reservation-entry-ident > div { min-width: 0; }

    .reservation-entry-table td strong,
    .reservation-entry-table td small {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow-wrap: anywhere;
      line-height: 1.4;
    }

    .reservation-entry-table td small { margin-top: 3px; }

    .reservation-entry-qr-preview {
      width: 58px;
      height: 58px;
      flex-basis: 58px;
    }

    .reservation-entry-qr-preview canvas,
    .reservation-entry-qr-preview img {
      width: 50px !important;
      height: 50px !important;
    }

    .reservation-entry-table td:nth-child(5),
    .reservation-entry-table td:nth-child(6) { white-space: nowrap; }
    .reservation-entry-table td:nth-child(6) .actions { justify-content: flex-start; }
    .reservation-entry-table td:nth-child(6) .btn { min-width: 0; padding-inline: 8px; }

    .mini-program-code-section {
      grid-template-columns: 180px minmax(0, 1fr);
      grid-template-areas:
        "code-head code-head"
        "code-field code-field"
        "code-preview code-meta"
        "code-preview code-stats"
        "code-actions code-actions";
      align-items: start;
      gap: 10px 12px;
    }

    .mini-program-code-section > .reservation-settings-band-head {
      grid-area: code-head;
      margin-bottom: 0;
    }

    .mini-program-code-product-field { grid-area: code-field; }

    .mini-program-code-preview {
      grid-area: code-preview;
      width: 180px;
      margin: 0;
      align-self: stretch;
    }

    .mini-program-code-preview .is-hidden { display: none !important; }

    .mini-program-code-preview > div {
      padding: 16px;
      gap: 6px;
    }

    .mini-program-code-preview > div strong { font-size: 14px; }
    .mini-program-code-preview > div span { font-size: 11px; line-height: 1.5; }

    .mini-program-code-meta {
      grid-area: code-meta;
      align-content: start;
      gap: 6px;
      padding-top: 2px;
    }

    .mini-program-code-section > .reservation-manager-summary {
      grid-area: code-stats;
      align-content: start;
      padding: 0;
      border-top: 0;
    }

    .mini-program-code-actions {
      grid-area: code-actions;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .mini-program-code-actions .btn {
      width: 100%;
      min-width: 0;
      padding-inline: 8px;
      justify-content: center;
      white-space: nowrap;
    }

    .reservation-entry-legacy-editor { display: none !important; }

    @media (min-width: 1800px) {
      .reservation-code-layout {
        grid-template-columns: minmax(0, 1fr) minmax(440px, .55fr);
        gap: 12px;
      }
    }

    @media (max-width: 720px) {
      .reservation-code-layout { margin-inline: 10px; }
      .reservation-code-section { padding: 10px; }
      .reservation-code-section > .reservation-settings-band-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
      }
      .reservation-code-section > .reservation-settings-band-head span { text-align: left; }
      .reservation-entry-table { min-width: 780px; }
      .mini-program-code-section {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "code-head"
          "code-field"
          "code-preview"
          "code-meta"
          "code-stats"
          "code-actions";
      }
      .mini-program-code-preview { width: 170px; justify-self: center; }
      .mini-program-code-actions { grid-template-columns: 1fr; }
    }

    /* 2026-08-08 小程序渠道改为左侧三级菜单，渠道码区域保持紧凑且不重叠 */
    #mall.is-sn-library-view > .panel > .panel-head,
    #mall.is-sn-library-view > .panel > .mall-store-toolbar {
      display: none !important;
    }

    #mall.is-reservation-settings-view > .panel {
      overflow: visible;
    }

    #reservationChannelManagerPanel,
    #reservationCustomPanel {
      display: grid;
      grid-template-columns: minmax(160px, 180px) minmax(0, 1fr);
      align-items: start;
      column-gap: 16px;
    }

    #reservationChannelManagerPanel,
    #mallReservationSettingsExtension {
      overflow: visible;
    }

    #reservationChannelManagerPanel > .reservation-mini-channel-nav,
    #reservationCustomPanel > .reservation-mini-channel-nav {
      grid-column: 1;
      grid-row: 1 / span 20;
      position: sticky;
      top: 92px;
      margin: 0;
      padding: 8px;
      display: grid;
      align-content: start;
      gap: 4px;
      overflow: visible;
      background: #f4f7fb;
    }

    #reservationChannelManagerPanel > .reservation-mini-channel-nav::before,
    #reservationCustomPanel > .reservation-mini-channel-nav::before {
      content: "渠道目录";
      padding: 5px 9px 8px;
      color: #7a8ba3;
      font-size: 12px;
      font-weight: 700;
    }

    #reservationChannelManagerPanel > .reservation-mini-channel-nav button,
    #reservationCustomPanel > .reservation-mini-channel-nav button {
      width: 100%;
      min-width: 0;
      padding: 9px 10px;
      justify-content: flex-start;
      border-left: 3px solid transparent;
      text-align: left;
      white-space: normal;
      line-height: 1.4;
    }

    #reservationChannelManagerPanel > .reservation-mini-channel-nav button.active,
    #reservationCustomPanel > .reservation-mini-channel-nav button.active {
      border-left-color: #2d5dd7;
      background: #fff;
      box-shadow: 0 3px 10px rgba(38, 76, 126, .08);
    }

    #reservationChannelManagerPanel > :not(.reservation-mini-channel-nav),
    #reservationCustomPanel > :not(.reservation-mini-channel-nav) {
      grid-column: 2;
      min-width: 0;
    }

    #reservationCustomPanel > .reservation-channel-code-card {
      width: 100%;
      max-width: 680px;
      box-sizing: border-box;
    }

    .channel-mini-code-body {
      grid-template-columns: 180px minmax(190px, 220px);
      justify-content: start;
      align-items: center;
      gap: 24px;
    }

    .channel-mini-code-body .mini-program-code-preview {
      grid-area: auto;
      width: 180px;
      height: 180px;
      margin: 0;
      align-self: auto;
      justify-self: start;
    }

    .channel-mini-code-body .mini-program-code-actions {
      grid-area: auto;
      width: 100%;
      max-width: 220px;
      display: grid;
      grid-template-columns: 1fr;
      align-content: center;
      gap: 8px;
    }

    @media (max-width: 720px) {
      #reservationChannelManagerPanel,
      #reservationCustomPanel {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 12px;
      }

      #reservationChannelManagerPanel > .reservation-mini-channel-nav,
      #reservationCustomPanel > .reservation-mini-channel-nav {
        grid-column: 1;
        grid-row: auto;
        position: static;
      }

      #reservationChannelManagerPanel > :not(.reservation-mini-channel-nav),
      #reservationCustomPanel > :not(.reservation-mini-channel-nav) {
        grid-column: 1;
      }

      .channel-mini-code-body {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
      }

      .channel-mini-code-body .mini-program-code-preview { justify-self: center; }
      .channel-mini-code-body .mini-program-code-actions { max-width: 280px; }
    }

    /* Keep the mobile topbar in one vertical column. A wrapped column pushes
       the account actions into an off-screen second column. */
    @media (max-width: 760px) {
      .topbar { flex-wrap: nowrap; }
    }

    /* Device dashboard: compact MacBook layout and readable SN table. */
    .device-dashboard-active .topbar {
      min-height: 68px;
      padding-block: 9px;
    }

    .device-dashboard-active .content {
      padding: 14px 16px 20px;
    }

    .device-dashboard-view,
    .device-dashboard-shell,
    .device-dashboard-head > div,
    .device-detail-panel { min-width: 0; }

    .device-dashboard-head {
      align-items: center;
      padding: 15px 17px;
    }

    .device-dashboard-head > div:first-child {
      flex: 1 1 310px;
      min-width: 260px;
    }

    .device-dashboard-head h2 { font-size: 22px; }
    .device-dashboard-actions { flex: 1 1 520px; }

    .device-kpi-grid { gap: 8px; }
    .device-kpi-card {
      min-height: 84px;
      gap: 10px;
      padding: 12px 13px;
    }
    .device-kpi-icon { width: 36px; height: 36px; font-size: 18px; }
    .device-kpi-card strong { font-size: 23px; }

    .device-progress-card,
    .device-owner-card {
      min-height: 190px;
      padding: 14px 16px;
    }

    .device-detail-head {
      align-items: center;
      padding: 13px 15px 10px;
    }

    .device-status-tabs { gap: 19px; padding-inline: 15px; }

    .device-filters {
      grid-template-columns: minmax(220px, 1.3fr) repeat(8, minmax(98px, .68fr)) auto auto;
      gap: 8px;
      padding: 10px 15px;
    }

    .device-filters > :nth-child(4) { grid-column: auto; }

    .device-table-wrap {
      overflow-x: auto;
      background: #fff;
    }

    .device-dashboard-table {
      min-width: 1410px;
      table-layout: fixed;
    }

    .device-dashboard-table th,
    .device-dashboard-table td {
      padding: 9px 8px;
      word-break: normal;
    }

    .device-dashboard-table th { height: 42px; }
    .device-dashboard-table td { height: 62px; line-height: 1.35; }
    .device-dashboard-table tbody tr:hover { background: #f7faff; }

    .device-dashboard-table .device-col-select { width: 46px; text-align: center; }
    .device-dashboard-table .device-col-sn { width: 170px; }
    .device-dashboard-table .device-col-customer { width: 220px; }
    .device-dashboard-table .device-col-activated { width: 92px; }
    .device-dashboard-table .device-col-today,
    .device-dashboard-table .device-col-month { width: 82px; }
    .device-dashboard-table .device-col-progress { width: 150px; }
    .device-dashboard-table .device-col-distance { width: 72px; }
    .device-dashboard-table .device-col-logistics { width: 128px; }
    .device-dashboard-table .device-col-state { width: 116px; }
    .device-dashboard-table .device-col-operations { width: 220px; }
    .device-dashboard-table .device-col-actions { width: 150px; }

    #deviceSelectAll,
    #deviceDashboardRows [data-device-select] {
      display: inline-block;
      width: 16px;
      min-width: 16px;
      height: 16px;
      min-height: 16px;
      margin: 0;
      padding: 0;
      vertical-align: middle;
    }

    .device-sn-cell,
    .device-customer-order {
      min-width: 0;
      max-width: none;
      line-height: 1.3;
    }

    .device-sn-cell strong,
    .device-sn-cell small,
    .device-customer-order strong,
    .device-customer-order span,
    .device-customer-order small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .device-sn-cell strong,
    .device-customer-order strong { font-size: 11px; }
    .device-sn-cell small,
    .device-customer-order span,
    .device-customer-order small { font-size: 10px; }

    .device-row-actions {
      flex-wrap: wrap;
      row-gap: 2px;
    }

    .device-row-actions button {
      min-height: 26px;
      padding: 2px 5px;
      border-radius: 5px;
    }

    @media (min-width: 1181px) and (max-width: 1600px) {
      .device-dashboard-active .app { grid-template-columns: 264px minmax(0, 1fr); }
      .device-dashboard-active .sidebar { padding-inline: 12px; }
      .device-dashboard-active .nav { gap: 7px; }
      .device-dashboard-active .nav button { min-height: 40px; }

      .device-dashboard-table { min-width: 1130px; }
      .device-dashboard-table .device-col-today,
      .device-dashboard-table .device-col-distance { display: none; }
      .device-dashboard-table .device-col-select { width: 40px; }
      .device-dashboard-table .device-col-sn { width: 145px; }
      .device-dashboard-table .device-col-customer { width: 185px; }
      .device-dashboard-table .device-col-activated { width: 78px; }
      .device-dashboard-table .device-col-month { width: 68px; }
      .device-dashboard-table .device-col-progress { width: 125px; }
      .device-dashboard-table .device-col-logistics { width: 120px; }
      .device-dashboard-table .device-col-state { width: 104px; }
      .device-dashboard-table .device-col-operations { width: 210px; }
      .device-dashboard-table .device-col-actions { width: 150px; }

    }

    @media (min-width: 901px) and (max-width: 1180px) {
      .device-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .device-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .device-kpi-card {
        min-height: 84px;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px;
        padding: 10px;
      }
      .device-kpi-icon { width: 32px; height: 32px; }
      .device-kpi-card strong { font-size: 21px; }
      .device-overview-grid { grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); }
      .device-owner-list { grid-template-columns: 1fr; }
      .device-owner-row { grid-template-columns: minmax(78px, 1fr) max-content minmax(60px, .9fr); }
      .device-owner-meter { grid-column: auto; }
      .device-progress-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 0; }
      .device-progress-stat:nth-child(3) { border-right: 1px solid #e4e8ef; }
      .device-progress-stat:last-child { border-right: 0; }
      .device-dashboard-table { min-width: 1130px; }
      .device-dashboard-table .device-col-today,
      .device-dashboard-table .device-col-distance { display: none; }
      .device-dashboard-table .device-col-select { width: 40px; }
      .device-dashboard-table .device-col-sn { width: 145px; }
      .device-dashboard-table .device-col-customer { width: 185px; }
      .device-dashboard-table .device-col-activated { width: 78px; }
      .device-dashboard-table .device-col-month { width: 68px; }
      .device-dashboard-table .device-col-progress { width: 125px; }
      .device-dashboard-table .device-col-logistics { width: 120px; }
      .device-dashboard-table .device-col-state { width: 104px; }
      .device-dashboard-table .device-col-operations { width: 210px; }
      .device-dashboard-table .device-col-actions { width: 150px; }
    }

    @media (max-width: 1080px) {
      .device-dashboard-head > div:first-child,
      .device-dashboard-actions {
        flex: 0 0 auto;
        width: 100%;
      }
    }

    @media (max-width: 900px) {
      .device-dashboard-active .topbar { min-height: 70px; }
      .device-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .device-filters > * { grid-column: auto !important; }
      .device-search-field { grid-column: 1 / -1 !important; }
      .device-dashboard-table .device-col-today,
      .device-dashboard-table .device-col-distance,
      .device-dashboard-table .device-col-operations { display: none; }
    }

    @media (max-width: 760px) {
      .device-dashboard-active .content { padding: 12px; }
      .device-dashboard-table { min-width: 950px; }
      .device-dashboard-table .device-col-operations { display: none; }
    }

    @media (max-width: 460px) {
      .device-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .device-kpi-card {
        min-height: 98px;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px;
        padding: 11px;
      }
      .device-kpi-icon { width: 32px; height: 32px; }
      .device-kpi-card strong { font-size: 21px; }
      .device-kpi-card:last-child { grid-column: auto; }
    }

    /* 2026-08-08 unified adaptive density and narrow-screen reflow */
    :root {
      --admin-sidebar-width: 286px;
      --admin-topbar-height: 74px;
      --admin-page-x: 18px;
      --admin-page-y: 16px;
      --admin-page-gap: 14px;
      --admin-control-height: 34px;
      --admin-anchor-offset: 88px;
    }

    html,
    body {
      min-width: 0;
      max-width: 100%;
      overflow-x: clip;
    }

    .app { grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr); }

    .topbar {
      min-height: var(--admin-topbar-height);
      padding: 9px var(--admin-page-x);
    }

    .content {
      gap: var(--admin-page-gap);
      padding: var(--admin-page-y) var(--admin-page-x) 20px;
    }

    .view.active { gap: var(--admin-page-gap); }

    .btn {
      min-height: var(--admin-control-height);
      line-height: 1.2;
    }

    .user-chip { min-height: var(--admin-control-height); }

    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    select { min-height: 36px; }

    .panel-head > :first-child,
    .mall-section-head > :first-child,
    .topbar-title > div,
    .panel-head h2,
    .mall-section-head h3 {
      min-width: 0;
    }

    .panel-head h2,
    .mall-section-head h3 { overflow-wrap: anywhere; }

    .panel-head > .actions,
    .mall-section-head > .actions,
    .toolbar,
    .actions { max-width: 100%; }

    #mallSnInventorySection,
    #mallReservationSection,
    #reservationBasicsPanel,
    #reservationDefaultPanel,
    #reservationChannelManagerPanel,
    #dealPricingSubmitSection,
    #dealPricingRecordsSection,
    #dealPricingSettingsPanel,
    #shippingCreateSection,
    #shippingOrdersSection,
    #shippingSettingsSection,
    #wecomOverviewSection,
    #wecomEnterpriseSection,
    #wecomContactsSection,
    #wecomMomentsSection,
    #wecomExtensionsSection,
    #auditLogPanel {
      scroll-margin-top: var(--admin-anchor-offset);
    }

    @media (min-width: 1181px) and (max-width: 1600px) {
      :root {
        --admin-sidebar-width: 248px;
        --admin-topbar-height: 66px;
        --admin-page-x: 15px;
        --admin-page-y: 13px;
        --admin-page-gap: 12px;
        --admin-control-height: 32px;
        --admin-anchor-offset: 78px;
      }

      .sidebar {
        gap: 10px;
        padding: 12px 11px;
      }

      .brand {
        gap: 2px;
        padding: 3px 5px 10px;
      }

      .brand-logo-wrap { height: 72px; }
      .brand-logo { width: 218px; }

      .brand-copy {
        margin-top: 0;
        padding: 7px 8px 7px 10px;
      }

      .brand strong { font-size: 14px; }
      .brand span { font-size: 11px; }

      .favorite-nav {
        gap: 6px;
        padding: 8px;
      }

      .favorite-nav-empty { gap: 4px; line-height: 1.4; }

      .nav {
        gap: 6px;
        padding-bottom: 12px;
      }

      .nav button,
      .nav .nav-group-toggle {
        min-height: 38px;
        padding-inline: 10px;
        font-size: 13px;
      }

      .nav .nav-group-items > button {
        min-height: 33px;
        padding-inline: 9px;
        font-size: 12px;
      }

      .nav-group-items {
        gap: 3px;
        margin-left: 8px;
        padding-left: 8px;
      }

      .topbar { gap: 12px; }
      .topbar h1 { font-size: 21px; }
      .topbar p { margin-top: 2px; font-size: 12px; }
      .topbar > .actions { gap: 7px; flex-wrap: nowrap; }
      .topbar > .actions .btn { padding-inline: 10px; font-size: 13px; }
      .topbar > .actions .user-chip { padding-inline: 10px; font-size: 12px; }

      .panel-head,
      .mall-section-head { padding: 10px 13px; }
      .panel-body { padding: 12px 13px; }
      .dashboard-filters { padding: 10px 12px; }
      .metric { min-height: 96px; padding: 12px 13px; }
      .metric strong { font-size: 23px; }
      .flow-summary { padding: 9px 12px; }
      .flow-summary-item { min-height: 54px; padding: 7px 9px; }
      .flow-summary-item strong { font-size: 16px; }
      .product-filters,
      .audit-filters { padding: 9px 12px; }
      table th,
      table td { padding: 8px 9px; }
      .mall-store-actions .btn { min-height: 36px; padding-inline: 12px; font-size: 13px; }
      .mall-store-toolbar #mallStoreHint { min-height: 34px; padding-inline: 12px; font-size: 12px; }

      input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
      select { min-height: 34px; padding-block: 6px; }
      textarea { min-height: 72px; }
    }

    @media (max-width: 1180px) {
      :root {
        --admin-sidebar-width: 0px;
        --admin-topbar-height: 66px;
        --admin-page-x: 14px;
        --admin-page-y: 13px;
        --admin-page-gap: 12px;
        --admin-anchor-offset: 84px;
      }

      .app { grid-template-columns: minmax(0, 1fr); }
      .sidebar { height: 100dvh; max-height: 100dvh; }
      .device-dashboard-active .topbar { min-height: var(--admin-topbar-height); }
      .content { padding-bottom: 18px; }
    }

    @media (max-width: 900px) {
      :root {
        --admin-page-x: 12px;
        --admin-page-y: 12px;
        --admin-page-gap: 11px;
        --admin-control-height: 34px;
        --admin-anchor-offset: 120px;
      }

      .topbar {
        min-height: 0;
        padding: 9px 12px 10px;
        gap: 8px;
        align-items: stretch;
        flex-direction: column;
        flex-wrap: nowrap;
      }

      .topbar-title {
        width: 100%;
        flex: 0 1 auto;
        align-items: center;
        gap: 9px;
      }

      .topbar h1 { font-size: 20px; }

      #pageHint {
        display: block;
        max-width: calc(100vw - 112px);
        margin-top: 2px;
        overflow: hidden;
        font-size: 11px;
        line-height: 1.4;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .topbar > .actions,
      .topbar .actions {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(126px, 1.55fr) repeat(3, minmax(0, 1fr));
        gap: 7px;
        overflow: visible;
        padding: 0;
      }

      .topbar .actions .user-chip {
        grid-column: auto;
        width: auto;
        min-width: 0;
        padding-inline: 9px;
        overflow: hidden;
        justify-content: flex-start;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .topbar .actions .btn {
        width: 100%;
        min-width: 0;
        padding-inline: 5px;
        justify-content: center;
        font-size: 12px;
      }

      .panel-head,
      .mall-section-head { padding: 10px 12px; }

      .content { overflow-x: clip; }
      .modal { overflow-x: hidden; }
    }

    @media (max-width: 720px) {
      :root {
        --admin-page-x: 10px;
        --admin-page-y: 10px;
        --admin-page-gap: 10px;
        --admin-anchor-offset: 116px;
      }

      .content { padding-bottom: 14px; }
      .view.active { gap: 10px; }

      .mall-section { margin: 8px 8px 0; }
      .mall-section .product-filters,
      .mall-section .cards,
      .mall-section .mall-summary { padding: 10px; }

      .reservation-settings-panel { padding: 0 8px 10px; }
      .reservation-manager-notice,
      .reservation-settings-tabs { margin: 10px 8px; }
      .reservation-manager-grid,
      .reservation-manager-list { padding: 0 8px 10px; }
      .reservation-manager-table-wrap,
      .reservation-code-layout { margin: 0 8px 10px; }
      .reservation-settings-band,
      .reservation-manager-form,
      .reservation-code-section { padding: 10px; }

      #reservationChannelManagerPanel,
      #reservationCustomPanel,
      #reservationChannelManagerPanel > :not(.reservation-mini-channel-nav),
      #reservationCustomPanel > :not(.reservation-mini-channel-nav),
      .reservation-manager-list,
      .reservation-channel-row,
      .reservation-channel-row > * {
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }

      .reservation-channel-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
      }

      .reservation-channel-row > :first-child,
      .reservation-channel-row .actions { grid-column: 1 / -1; }

      .reservation-channel-row .actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px;
        align-items: center;
      }

      .reservation-channel-row .actions .btn {
        width: 100%;
        min-width: 0;
        padding-inline: 7px;
        justify-content: center;
      }

      .reservation-channel-row .actions .tag {
        min-width: 0;
        white-space: nowrap;
      }

      .reservation-settings-band-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
      }

      .reservation-settings-band-head span { text-align: left; }

      .table-wrap td.empty {
        padding-left: 14px;
        text-align: left;
      }

      .table-wrap td.empty .btn { margin-left: 0; }

      .modal { padding: 8px; }
      .dialog,
      #productModal .dialog,
      #mallProductModal .dialog,
      #mallReviewModal .dialog,
      #mallCategoryModal .dialog,
      #mallVideoCategoryModal .dialog,
      #mallPriceModal .dialog,
      #mallLogisticsModal .dialog,
      #reservationQrModal .dialog {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
      }

      .dialog form { gap: 10px; padding: 12px; }
      .dialog .panel-head {
        position: sticky;
        top: 0;
        z-index: 4;
        background: rgba(255, 255, 255, .97);
      }
      .dialog form > .actions {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .dialog form > .actions .btn {
        width: 100%;
        min-width: 0;
        justify-content: center;
      }
    }

    @media (max-width: 560px) {
      .panel-head,
      .mall-section-head {
        align-items: stretch;
        flex-direction: column;
      }

      .panel-head > .actions,
      .mall-section-head > .actions {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
      }

      .panel-head > .actions .btn,
      .mall-section-head > .actions .btn,
      .panel-head > .btn,
      .mall-section-head > .btn {
        width: 100%;
        min-width: 0;
        justify-content: center;
      }

      .dialog .panel-head {
        align-items: center;
        flex-direction: row;
      }

      .dialog .panel-head > .actions {
        display: flex;
        width: auto;
        margin-left: auto;
        flex-wrap: wrap;
      }

      .dialog .panel-head > .actions .btn,
      .dialog .panel-head > .btn {
        width: auto;
        min-width: 34px;
        flex: 0 0 auto;
      }
    }

    @media (max-width: 460px) {
      .device-status-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 8px;
        padding-inline: 10px;
        overflow: visible;
      }

      .device-status-tabs button {
        min-width: 0;
        padding-inline: 2px;
        text-align: center;
        white-space: normal;
      }
    }

    @media (min-width: 1181px) and (max-width: 1600px) {
      .device-dashboard-active .app {
        grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
      }
      .device-dashboard-active .topbar { min-height: var(--admin-topbar-height); }
    }

    @media (max-width: 360px) {
      :root { --admin-anchor-offset: 154px; }

      .topbar > .actions,
      .topbar .actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .topbar .actions .user-chip { grid-column: 1 / -1; }
      .topbar .actions .btn { font-size: 11px; }

      .metrics { grid-template-columns: 1fr; }

      input[type="date"],
      input[type="month"] {
        min-width: 0;
        padding-inline: 8px;
        font-size: 14px;
      }

      .panel-head > .actions,
      .mall-section-head > .actions,
      .dialog form > .actions { grid-template-columns: 1fr; }
    }
.video-upload-field {
  grid-column: 1 / -1;
}

/* Device dashboard · selected trend-analysis direction */
.device-dashboard-active .device-dashboard-shell { gap: 10px; }
.device-dashboard-active .device-dashboard-head {
  min-height: 76px;
  padding: 12px 15px;
  border-color: #dce5f0;
  border-radius: 10px;
  box-shadow: none;
}
.device-dashboard-active .device-dashboard-head h2 { font-size: 20px; }
.device-dashboard-active .device-dashboard-head p { margin-top: 3px; font-size: 11px; }
.device-dashboard-active .device-dashboard-actions { gap: 7px; }
.device-dashboard-active .device-dashboard-actions .btn,
.device-dashboard-active .device-month-field,
.device-dashboard-active .device-supplier-field { min-height: 36px; }
.device-dashboard-active .device-dashboard-actions .btn { padding-inline: 11px; }
.device-dashboard-active .device-month-field { grid-template-columns: auto 118px; }
.device-dashboard-active .device-supplier-field { grid-template-columns: auto minmax(132px, 172px); }
.device-dashboard-active .device-month-field input { width: 118px; }

.device-dashboard-active .device-kpi-grid {
  gap: 0;
  padding: 0 8px;
  border: 1px solid #dce5f0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .97);
  box-shadow: none;
}
.device-dashboard-active .device-kpi-card {
  min-height: 82px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  padding: 11px 12px;
  border: 0;
  border-right: 1px solid #e5ebf3;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.device-dashboard-active .device-kpi-card:last-child { border-right: 0; }
.device-dashboard-active .device-kpi-icon { width: 32px; height: 32px; font-size: 16px; }
.device-dashboard-active .device-kpi-card span { font-size: 11px; }
.device-dashboard-active .device-kpi-card strong { margin-top: 2px; font-size: 21px; }
.device-dashboard-active .device-kpi-card small { margin-top: 4px; font-size: 10px; }

.device-dashboard-active .device-overview-grid {
  grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr);
  gap: 10px;
}
.device-dashboard-active .device-progress-card,
.device-dashboard-active .device-owner-card {
  min-height: 330px;
  padding: 13px 15px 11px;
  border-color: #dce5f0;
  border-radius: 10px;
  box-shadow: none;
}
.device-dashboard-active .device-card-head h3 { font-size: 15px; }
.device-dashboard-active .device-card-head p { margin-top: 3px; font-size: 10px; }
.device-trend-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 14px;
  margin-top: 8px;
}
.device-trend-main { min-width: 0; }
.device-trend-legend {
  display: flex;
  align-items: center;
  gap: 17px;
  min-height: 24px;
  color: #66758b;
  font-size: 10px;
}
.device-trend-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.device-trend-legend i { width: 17px; height: 0; border-top: 2px solid #2d5dd7; }
.device-trend-legend i.is-effective { border-color: #10a9c4; }
.device-trend-legend i.is-partial {
  width: 8px;
  height: 8px;
  border: 2px solid #e58a16;
  border-radius: 50%;
  background: #fff7e8;
}
.device-trend-legend i.is-target { border-top: 1px dashed #8ab2f5; }
.device-trend-chart-wrap { position: relative; height: 188px; min-width: 0; }
#deviceTrendChart { display: block; width: 100%; height: 100%; }
.device-trend-tooltip {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 3px;
  min-width: 138px;
  padding: 8px 10px;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 8px 22px rgba(38, 55, 82, .14);
  color: #526178;
  font-size: 10px;
  line-height: 1.35;
  pointer-events: none;
}
.device-trend-tooltip[hidden] { display: none; }
.device-trend-tooltip strong { color: #1e2b43; font-size: 11px; }
.device-trend-tooltip .is-partial { color: #b66909; font-weight: 750; }
.device-trend-tooltip .is-complete { color: #16815d; font-weight: 750; }
.device-trend-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px dashed #d9e2ee;
  border-radius: 8px;
  background: #fbfdff;
  color: #8592a6;
  font-size: 12px;
}
.device-trend-empty[hidden] { display: none; }
.device-dashboard-active .device-trend-card .device-progress-stats,
.device-dashboard-active .device-progress-card .device-progress-stats {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  margin: 16px 0 6px;
  border-left: 1px solid #e5ebf3;
}
.device-dashboard-active .device-progress-card .device-progress-stat {
  min-height: 38px;
  padding: 5px 0 5px 14px;
  border-right: 0;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
}
.device-dashboard-active .device-progress-card .device-progress-stat:last-child { border-bottom: 0; }
.device-dashboard-active .device-progress-card .device-progress-stat span { font-size: 10px; }
.device-dashboard-active .device-progress-card .device-progress-stat strong { margin-top: 2px; font-size: 15px; }
.device-status-distribution {
  display: grid;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid #edf1f6;
}
.device-dashboard-active .device-progress-legend { gap: 14px; margin-top: 0; }
.device-dashboard-active .device-progress-legend .is-supplemental { color: #7154b4; }
.device-progress-dot.dormant { background: #7f5bd2; }
.device-dashboard-active .device-stacked-progress { height: 8px; margin-top: 0; border-radius: 999px; }
.device-dashboard-active .device-progress-segment { font-size: 0; }
.device-dashboard-active .device-progress-foot {
  margin-top: 7px;
  overflow: hidden;
  color: #7d899b;
  font-size: 9px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-dashboard-active .device-owner-list { gap: 0; margin-top: 13px; }
.device-owner-list-head,
.device-dashboard-active .device-owner-row {
  display: grid;
  grid-template-columns: minmax(86px, 1fr) 72px minmax(116px, 1.2fr);
  align-items: center;
  gap: 10px;
}
.device-owner-list-head {
  min-height: 32px;
  padding: 0 2px;
  border-bottom: 1px solid #e6ebf2;
  color: #7b8799;
  font-size: 10px;
  font-weight: 700;
}
.device-owner-list-head span:last-child { text-align: right; }
.device-dashboard-active .device-owner-row {
  min-height: 57px;
  padding: 8px 2px;
  border-bottom: 1px solid #edf1f6;
  font-size: 11px;
}
.device-dashboard-active .device-owner-row:last-child { border-bottom: 0; }
.device-owner-rate { display: grid; grid-template-columns: minmax(56px, 1fr) 42px; align-items: center; gap: 8px; }
.device-owner-rate strong { color: #34425a; text-align: right; font-size: 11px; }
.device-dashboard-active .device-owner-meter { height: 6px; }

.device-dashboard-active .device-data-health { min-height: 38px; padding: 7px 12px; }
.device-dashboard-active .device-detail-panel { border-color: #dce5f0; border-radius: 10px; box-shadow: none; }
.device-dashboard-active .device-detail-head { padding: 11px 14px 8px; }
.device-dashboard-active .device-status-tabs { gap: 16px; padding-inline: 14px; }
.device-dashboard-active .device-status-tabs button { min-height: 36px; font-size: 11px; }
.device-dashboard-active .device-filters { padding: 8px 14px; }

@media (max-width: 1180px) {
  .device-dashboard-active .device-overview-grid { grid-template-columns: minmax(0, 1.8fr) minmax(250px, .9fr); }
  .device-dashboard-active .device-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .device-dashboard-active .device-kpi-card:nth-child(3n) { border-right: 0; }
  .device-dashboard-active .device-kpi-card:nth-child(-n+3) { border-bottom: 1px solid #e5ebf3; }
}

@media (max-width: 900px) {
  .device-dashboard-active .device-overview-grid { grid-template-columns: minmax(0, 1fr); }
  .device-dashboard-active .device-owner-card { min-height: 260px; }
}

@media (max-width: 680px) {
  .device-trend-layout { grid-template-columns: minmax(0, 1fr); }
  .device-dashboard-active .device-progress-card .device-progress-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid #e5ebf3;
    border-left: 0;
  }
  .device-dashboard-active .device-progress-card .device-progress-stat {
    padding: 8px 10px;
    border-right: 1px solid #edf1f6;
  }
  .device-dashboard-active .device-progress-card .device-progress-stat:nth-child(even) { border-right: 0; }
  .device-dashboard-active .device-progress-foot { white-space: normal; }
  .device-trend-legend { gap: 10px; overflow-x: auto; }
}

@media (max-width: 520px) {
  .device-dashboard-active .device-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-dashboard-active .device-kpi-card,
  .device-dashboard-active .device-kpi-card:nth-child(3n) { border-right: 1px solid #e5ebf3; border-bottom: 1px solid #e5ebf3; }
  .device-dashboard-active .device-kpi-card:nth-child(even) { border-right: 0; }
  .device-dashboard-active .device-kpi-card:nth-last-child(-n+2) { border-bottom: 0; }
  .device-owner-list-head,
  .device-dashboard-active .device-owner-row { grid-template-columns: minmax(82px, 1fr) 64px minmax(104px, 1fr); }
}

.video-upload-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #f7faff;
}

.video-upload-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.video-upload-actions input[type="file"] {
  flex: 1 1 320px;
  min-width: 0;
}

.video-upload-progress {
  display: none;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: #dfe8f5;
}

.video-upload-progress.active {
  display: block;
}

.video-upload-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: #2474df;
  transition: width .2s ease;
}

.video-upload-status {
  color: #60738c;
  font-size: 13px;
  line-height: 1.55;
}

.video-upload-status.success {
  color: #147a4b;
}

.video-upload-status.error {
  color: #bd2e2e;
}
.device-progress-code-dialog {
  width: min(620px, calc(100vw - 28px));
}

.device-progress-code-body {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.device-progress-code-preview {
  display: grid;
  width: min(330px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dfe8e4;
  border-radius: 8px;
  background: #fff;
}

.device-progress-code-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.device-progress-code-preview > div {
  display: flex;
  max-width: 260px;
  padding: 24px;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: #718079;
  text-align: center;
}

.device-progress-code-preview > div i {
  color: #009d59;
  font-size: 28px;
}

.device-progress-code-preview > div strong {
  color: #193029;
  font-size: 17px;
}

.device-progress-code-preview > div span {
  font-size: 13px;
  line-height: 1.55;
}

.device-progress-code-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border: 1px solid #dfe8e4;
  border-radius: 8px;
  background: #f7faf8;
}

.device-progress-code-meta > div {
  min-width: 0;
}

.device-progress-code-meta strong,
.device-progress-code-meta span:not(.tag) {
  display: block;
}

.device-progress-code-meta strong {
  color: #183028;
}

.device-progress-code-meta span:not(.tag) {
  margin-top: 4px;
  color: #6e7d76;
  font-size: 13px;
  line-height: 1.5;
}

.device-progress-code-note {
  display: flex;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid #efd99e;
  border-radius: 8px;
  background: #fff9e8;
  color: #745b15;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .device-progress-code-meta {
    align-items: flex-start;
    flex-direction: column;
  }
}

.mall-section-description {
  margin: 6px 0 0;
  color: #718079;
  font-size: 13px;
  line-height: 1.55;
}

.wechat-promotion-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.wechat-promotion-stat {
  min-width: 0;
  padding: 16px;
  border: 1px solid #dfe8e4;
  border-radius: 8px;
  background: #f8fbf9;
}

.wechat-promotion-stat span,
.wechat-promotion-stat small {
  display: block;
  color: #718079;
  font-size: 12px;
}

.wechat-promotion-stat strong {
  display: block;
  margin: 7px 0 3px;
  color: #193029;
  font-size: 26px;
  line-height: 1;
}

.wechat-promotion-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
  gap: 18px;
  align-items: start;
}

.wechat-promotion-form,
.wechat-promotion-history {
  border-top: 3px solid #1565d8;
  background: #fff;
}

.wechat-promotion-form .is-hidden {
  display: none !important;
}

.wechat-promotion-form {
  padding-top: 16px;
}

.wechat-promotion-history {
  padding: 16px 0 0;
  border-top-color: #00a86b;
}

.wechat-promotion-form-head,
.wechat-promotion-history-head,
.wechat-promotion-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wechat-promotion-form-head strong,
.wechat-promotion-history-head strong {
  color: #193029;
  font-size: 17px;
}

.wechat-promotion-form-head span {
  display: block;
  margin-top: 4px;
  color: #718079;
  font-size: 12px;
}

.wechat-promotion-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.wechat-promotion-description-field {
  grid-column: 1 / -1;
}

.wechat-promotion-description-field textarea {
  min-height: 96px;
  resize: vertical;
}

.wechat-promotion-preview {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #dfe8e4;
  border-left: 5px solid #dc2626;
  border-radius: 8px;
  background: #fffdf9;
}

.wechat-promotion-preview.is-gift {
  border-left-color: #078857;
  background: #fbfffd;
}

.wechat-promotion-preview.is-notice {
  border-left-color: #1565d8;
  background: #fbfdff;
}

.wechat-promotion-preview span,
.wechat-promotion-preview strong,
.wechat-promotion-preview p {
  display: block;
}

.wechat-promotion-preview span {
  color: #718079;
  font-size: 12px;
}

.wechat-promotion-preview strong {
  margin-top: 8px;
  color: #193029;
  font-size: 20px;
}

.wechat-promotion-preview p {
  margin: 7px 0 14px;
  color: #52645d;
  font-size: 13px;
  line-height: 1.6;
}

.wechat-promotion-preview button {
  min-width: 110px;
  height: 38px;
  border: 0;
  border-radius: 6px;
  background: #dc2626;
  color: #fff;
  font-weight: 700;
}

.wechat-promotion-preview.is-gift button {
  background: #078857;
}

.wechat-promotion-preview.is-notice button {
  background: #1565d8;
}

.wechat-promotion-actions {
  justify-content: flex-end;
  margin-top: 16px;
}

#wechatPromotionCampaignList {
  margin-top: 14px;
}

.wechat-promotion-history-item {
  padding: 14px 0;
  border-bottom: 1px solid #e5ece8;
}

.wechat-promotion-history-item:last-child {
  border-bottom: 0;
}

.wechat-promotion-history-item header,
.wechat-promotion-history-item footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wechat-promotion-history-item strong {
  min-width: 0;
  color: #193029;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wechat-promotion-history-item p {
  margin: 7px 0;
  color: #607169;
  font-size: 13px;
  line-height: 1.5;
}

.wechat-promotion-history-item footer {
  color: #7c8b84;
  font-size: 12px;
}

.wechat-promotion-history-item .btn {
  min-height: 32px;
  padding: 5px 10px;
}

@media (max-width: 980px) {
  .wechat-promotion-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wechat-promotion-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .wechat-promotion-fields,
  .wechat-promotion-summary {
    grid-template-columns: 1fr;
  }

  .wechat-promotion-actions,
  .wechat-promotion-form-head {
    align-items: stretch;
    flex-direction: column;
  }
}

/* QR batch inbound dialog */
#snQrImportModal {
  padding: 16px;
}

#snQrImportModal .sn-qr-import-dialog {
  display: flex;
  width: min(800px, calc(100vw - 32px));
  max-width: 800px;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  flex-direction: column;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #f6f8fb;
  box-shadow: 0 24px 64px rgba(27, 54, 94, .22);
  backdrop-filter: none;
}

#snQrImportModal .panel-head {
  position: relative;
  top: auto;
  z-index: 2;
  flex: 0 0 auto;
  align-items: flex-start;
  padding: 20px 22px 18px;
  border-bottom-color: #dbe4ef;
  background: #ffffff;
}

#snQrImportModal .panel-head > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

#snQrImportModal .panel-head h2 {
  color: #152844;
  font-size: 20px;
  line-height: 1.35;
}

#snQrImportModal .panel-head .muted {
  max-width: 620px;
  margin: 0;
  color: #60718a;
  font-size: 13px;
  line-height: 1.6;
}

#snQrImportModal .panel-head > .btn {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  margin-left: 12px;
  padding: 0;
  border-color: #d6e0ec;
  background: #ffffff;
  box-shadow: none;
  color: #3a4c65;
  font-size: 20px;
}

#snQrImportModal .panel-head > .btn:hover {
  transform: none;
  border-color: #b8c8dc;
  background: #f2f5f9;
  box-shadow: none;
}

#snQrImportModal .sn-qr-import-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  gap: 16px;
  min-height: 0;
  padding: 18px 22px 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#snQrImportModal .sn-qr-import-form > .full {
  grid-column: 1 / -1;
}

#snQrImportModal .sn-qr-section {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  background: #ffffff;
}

#snQrImportModal .sn-qr-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#snQrImportModal .sn-qr-section-head > div {
  min-width: 0;
}

#snQrImportModal .sn-qr-section-head h3,
#snQrImportModal .sn-qr-results h3 {
  margin: 0;
  color: #1c304c;
  font-size: 15px;
  line-height: 1.45;
}

#snQrImportModal .sn-qr-section-head p {
  margin: 3px 0 0;
  color: #60718a;
  font-size: 12px;
  line-height: 1.55;
}

#snQrImportModal .sn-qr-section-head > span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 8px;
  background: #eef3fb;
  color: #49617f;
  font-size: 11px;
  white-space: nowrap;
}

#snQrImportModal .sn-qr-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 14px;
}

#snQrImportModal .sn-qr-batch-field {
  grid-column: 1 / -1;
}

#snQrImportModal .field {
  min-width: 0;
  gap: 7px;
}

#snQrImportModal .field > span,
#snQrImportModal .field > label {
  color: #263a56;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

#snQrImportModal .field > span em {
  margin-left: 4px;
  color: #687991;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}

#snQrImportModal .field small {
  color: #60718a;
  font-size: 11px;
  line-height: 1.5;
}

#snQrImportModal input,
#snQrImportModal select,
#snQrImportModal textarea {
  min-width: 0;
  border-color: #c9d6e6;
  border-radius: 8px;
  background: #ffffff;
  color: #152844;
}

#snQrImportModal input,
#snQrImportModal select {
  min-height: 42px;
}

#snQrImportModal textarea {
  min-height: 108px;
  resize: vertical;
}

#snQrImportModal input::placeholder,
#snQrImportModal textarea::placeholder {
  color: #66758a;
  opacity: 1;
}

#snQrImportModal input:focus,
#snQrImportModal select:focus,
#snQrImportModal textarea:focus {
  border-color: #2d5dd7;
  box-shadow: 0 0 0 3px rgba(45, 93, 215, .14);
}

#snQrImportModal .sn-qr-actions {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid #cbd9ef;
  border-radius: 10px;
  background: #f3f7fd;
}

#snQrImportModal .sn-qr-capture-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #c7d7f4;
  border-radius: 10px;
  background: #ffffff;
  color: #2d5dd7;
  font-size: 24px;
}

#snQrImportModal .sn-qr-capture-main {
  display: grid;
  min-width: 0;
  gap: 9px;
}

#snQrImportModal .sn-qr-action-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#snQrImportModal .sn-qr-action-buttons .btn {
  min-height: 38px;
  padding-inline: 13px;
  justify-content: center;
  box-shadow: none;
  font-size: 13px;
}

#snQrImportModal .btn.primary {
  border-color: #2d5dd7;
  background: #2d5dd7;
  color: #ffffff;
}

#snQrImportModal .btn.primary:hover {
  border-color: #244db8;
  background: #244db8;
}

#snQrImportModal .sn-qr-upload-btn {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: #ffffff;
}

#snQrImportModal .sn-qr-upload-btn input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#snQrImportModal #snQrImageStatus {
  margin: 0;
  color: #526781;
  font-size: 11px;
  line-height: 1.5;
}

#snQrImportModal .sn-qr-manual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  background: #ffffff;
}

#snQrImportModal .sn-qr-manual-toggle {
  display: flex;
  width: 100%;
  min-height: 54px;
  padding: 10px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #263a56;
  cursor: pointer;
  border: 0;
  background: #ffffff;
  text-align: left;
}

#snQrImportModal .sn-qr-manual-toggle:focus-visible {
  outline: 3px solid rgba(45, 93, 215, .20);
  outline-offset: -3px;
}

#snQrImportModal .sn-qr-manual-toggle > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

#snQrImportModal .sn-qr-manual-toggle > span > i {
  color: #2d5dd7;
  font-size: 20px;
}

#snQrImportModal .sn-qr-manual-toggle strong,
#snQrImportModal .sn-qr-manual-toggle small {
  display: block;
}

#snQrImportModal .sn-qr-manual-toggle strong {
  font-size: 13px;
  line-height: 1.4;
}

#snQrImportModal .sn-qr-manual-toggle small {
  margin-top: 2px;
  color: #60718a;
  font-size: 11px;
  line-height: 1.4;
}

#snQrImportModal .sn-qr-manual-toggle > i {
  flex: 0 0 auto;
  color: #60718a;
  font-size: 20px;
  transition: transform .18s ease;
}

#snQrImportModal .sn-qr-manual.is-open .sn-qr-manual-toggle {
  border-bottom: 1px solid #e1e8f1;
}

#snQrImportModal .sn-qr-manual.is-open .sn-qr-manual-toggle > i {
  transform: rotate(180deg);
}

#snQrImportModal .sn-qr-manual-body {
  display: grid;
  gap: 10px;
  padding: 14px;
}

#snQrImportModal .sn-qr-manual-body[hidden] {
  display: none;
}

#snQrImportModal .sn-qr-parse-actions {
  margin: 0;
  justify-content: flex-end;
}

#snQrImportModal .sn-qr-parse-actions .btn {
  box-shadow: none;
}

#snQrImportModal .sn-qr-results {
  display: grid;
  min-width: 0;
  gap: 10px;
}

#snQrImportModal .sn-import-preview {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  background: #f2f5f9;
  color: #40546f;
}

#snQrImportModal .sn-import-preview strong,
#snQrImportModal .sn-import-preview span {
  display: block;
}

#snQrImportModal .sn-import-preview strong {
  color: #263a56;
  font-size: 13px;
}

#snQrImportModal .sn-import-preview span {
  color: #60718a;
  font-size: 11px;
}

#snQrImportModal .sn-import-preview.has-values {
  border-color: #b9dfc9;
  background: #eef8f2;
}

#snQrImportModal .sn-import-preview.has-values strong {
  color: #17613b;
}

#snQrImportModal .sn-qr-value-list {
  display: flex;
  max-height: 156px;
  padding: 2px;
  overflow: auto;
  flex-wrap: wrap;
  gap: 7px;
}

#snQrImportModal .sn-qr-value-list:empty {
  display: none;
}

#snQrImportModal .sn-qr-value {
  min-height: 30px;
  border-radius: 8px;
}

#snQrImportModal .sn-qr-value button {
  display: grid;
  width: 22px;
  height: 22px;
  padding: 0;
  place-items: center;
}

#snQrImportModal .sn-qr-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  width: auto;
  margin: 0 -22px;
  padding: 14px 22px;
  justify-content: space-between;
  border-top: 1px solid #dbe4ef;
  background: #ffffff;
  box-shadow: 0 -8px 20px rgba(33, 63, 104, .06);
}

#snQrImportModal .sn-qr-submit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#snQrImportModal .sn-qr-form-actions .btn {
  min-height: 38px;
  box-shadow: none;
}

#snQrImportModal .sn-qr-form-actions .btn:disabled {
  border-color: #d5dde8;
  background: #e7ebf1;
  color: #718097;
  cursor: not-allowed;
  opacity: 1;
}

#snQrImportModal .sn-qr-form-actions .btn:active:not(:disabled),
#snQrImportModal .sn-qr-action-buttons .btn:active {
  transform: translateY(1px);
}

@media (max-width: 640px) {
  #snQrImportModal {
    padding: 8px;
  }

  #snQrImportModal .sn-qr-import-dialog {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  #snQrImportModal .panel-head {
    padding: 16px;
  }

  #snQrImportModal .panel-head h2 {
    font-size: 18px;
  }

  #snQrImportModal .sn-qr-import-form {
    gap: 12px;
    padding: 14px 14px 0;
  }

  #snQrImportModal .sn-qr-section {
    padding: 14px;
  }

  #snQrImportModal .sn-qr-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #snQrImportModal .sn-qr-batch-field {
    grid-column: auto;
  }

  #snQrImportModal .sn-qr-actions {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    padding: 12px;
  }

  #snQrImportModal .sn-qr-capture-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  #snQrImportModal .sn-qr-action-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #snQrImportModal .sn-qr-action-buttons .btn {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
  }

  #snQrImportModal .sn-qr-form-actions {
    display: grid;
    margin: 0 -14px;
    padding: 12px 14px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
  }

  #snQrImportModal .sn-qr-submit-actions {
    display: grid;
    grid-template-columns: minmax(72px, .7fr) minmax(120px, 1.3fr);
  }

  #snQrImportModal .sn-qr-form-actions .btn {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
    justify-content: center;
  }
}

@media (max-width: 440px) {
  #snQrImportModal .panel-head .muted {
    font-size: 12px;
  }

  #snQrImportModal .sn-qr-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  #snQrImportModal .sn-qr-section-head > span {
    min-height: 24px;
  }

  #snQrImportModal .sn-qr-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #snQrImportModal .sn-qr-capture-icon {
    display: none;
  }

  #snQrImportModal .sn-qr-action-buttons {
    grid-template-columns: minmax(0, 1fr);
  }

  #snQrImportModal .sn-qr-form-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #snQrImportModal .sn-qr-clear-btn {
    justify-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  #snQrImportModal .sn-qr-manual-toggle > i {
    transition: none;
  }
}

/* SN supplier registry and compact inbound layout */
.sn-supplier-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.sn-supplier-picker select {
  width: 100%;
  min-width: 0;
}

.sn-supplier-picker .btn {
  min-height: 42px;
  padding: 8px 12px;
  justify-content: center;
  box-shadow: none;
  white-space: nowrap;
}

.sn-supplier-rule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sn-supplier-rule-toolbar .btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 11px;
  box-shadow: none;
  white-space: nowrap;
}

.sn-supplier-create-dialog {
  width: min(520px, calc(100vw - 28px));
  overflow: hidden;
}

.sn-supplier-create-dialog .panel-head > div {
  min-width: 0;
}

.sn-supplier-create-dialog .panel-head p {
  margin: 4px 0 0;
  font-size: 12px;
}

.sn-supplier-create-dialog form {
  padding: 18px;
}

.sn-supplier-create-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid #cfe0f5;
  border-radius: 9px;
  background: #f4f8fd;
  color: #47617f;
  font-size: 12px;
  line-height: 1.55;
}

.sn-supplier-create-note i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #2d5dd7;
  font-size: 16px;
}

#snQrImportModal .sn-qr-import-dialog {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
}

#snQrImportModal .panel-head {
  padding: 16px 18px 14px;
}

#snQrImportModal .panel-head h2 {
  font-size: 18px;
}

#snQrImportModal .panel-head .muted {
  font-size: 12px;
  line-height: 1.5;
}

#snQrImportModal .sn-qr-import-form {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px;
  padding: 14px 18px 0;
}

#snQrImportModal .sn-qr-import-form > .full,
#snQrImportModal .sn-qr-section,
#snQrImportModal .sn-qr-results,
#snQrImportModal .sn-qr-manual,
#snQrImportModal .sn-qr-form-actions {
  grid-column: 1 / -1 !important;
  min-width: 0;
}

#snQrImportModal .sn-qr-section {
  gap: 12px;
  padding: 14px;
}

#snQrImportModal .sn-qr-form-actions {
  margin-inline: -18px;
  padding: 12px 18px;
}

@media (max-width: 1180px) {
  #snQrImportModal .sn-qr-import-dialog {
    width: min(680px, calc(100vw - 24px));
    max-width: 680px;
    max-height: calc(100dvh - 24px);
  }

  #snQrImportModal .sn-qr-field-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
  }

  #snQrImportModal .sn-qr-batch-field {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .sn-supplier-picker,
  .sn-supplier-rule-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .sn-supplier-picker {
    display: grid;
  }

  .sn-supplier-picker .btn,
  .sn-supplier-rule-toolbar .btn {
    width: 100%;
  }

  .sn-supplier-rule-toolbar {
    display: grid;
    align-items: stretch;
  }

  .sn-supplier-create-dialog form {
    padding: 14px;
  }

  #snQrImportModal .sn-qr-import-form {
    padding-inline: 14px;
  }

  #snQrImportModal .sn-qr-form-actions {
    margin-inline: -14px;
    padding-inline: 14px;
  }
}

@media (max-height: 760px) and (min-width: 641px) {
  #snQrImportModal {
    padding: 8px;
  }

  #snQrImportModal .sn-qr-import-dialog {
    max-height: calc(100dvh - 16px);
  }

  #snQrImportModal .panel-head {
    padding-block: 12px;
  }

  #snQrImportModal .sn-qr-import-form {
    gap: 10px;
    padding-top: 10px;
  }

  #snQrImportModal .sn-qr-section {
    padding: 12px;
  }
}

/* 付呗设备资料导出：独立于订单与 SN 数据，只展示导出台账状态。 */
.device-supplier-export-panel[hidden],
.device-supplier-export-button[hidden],
.device-supplier-export-history[hidden],
#deviceSupplierExportFilterField[hidden],
#deviceSignedDaysBandField[hidden],
#deviceDormancyDaysBandField[hidden],
#deviceSupplierExportColumnHead[hidden] { display: none !important; }

.device-filters:has(#deviceDormancyDaysBandField:not([hidden])) {
  grid-template-columns: minmax(210px, 1.4fr) repeat(9, minmax(92px, .7fr)) auto auto;
}

@media (min-width: 1181px) and (max-width: 1800px) {
  .device-filters:has(#deviceDormancyDaysBandField:not([hidden])) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.device-supplier-export-button strong {
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-size: 11px;
}

.device-supplier-export-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 15px;
  border: 1px solid #cbdcf7;
  border-radius: 11px;
  background: linear-gradient(105deg, #f8fbff 0%, #eef5ff 100%);
  box-shadow: 0 6px 18px rgba(52, 91, 150, .06);
}

.device-supplier-export-copy {
  min-width: 230px;
  display: grid;
  gap: 4px;
}

.device-supplier-export-copy strong { color: #183766; font-size: 14px; }
.device-supplier-export-copy span { color: #71809a; font-size: 11px; line-height: 1.45; }

.device-supplier-export-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(116px, 1fr));
  gap: 8px;
  flex: 1 1 620px;
  max-width: 760px;
}

.device-supplier-export-metrics button {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid #d7e2f3;
  border-radius: 9px;
  background: rgba(255, 255, 255, .88);
  color: #61708a;
  cursor: pointer;
}

.device-supplier-export-metrics button:hover,
.device-supplier-export-metrics button.active { border-color: #5d8ff1; background: #fff; color: #245fc5; box-shadow: 0 3px 10px rgba(44, 100, 190, .1); }
.device-supplier-export-metrics button.is-changed { border-color: #efd39a; background: #fffaf0; }
.device-supplier-export-metrics button.is-incomplete { border-color: #efc3c8; background: #fff7f7; }
.device-supplier-export-metrics button span { font-size: 11px; text-align: left; }
.device-supplier-export-metrics button strong { color: #15243e; font-size: 18px; }

.device-dashboard-table .device-col-export { width: 132px; }
.device-export-status { display: grid; gap: 5px; align-content: center; }
.device-export-status small { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8290a7; }
.device-export-badge {
  width: fit-content;
  max-width: 126px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef3fb;
  color: #60718c;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.device-export-badge.first { background: #e8f3ff; color: #2868c8; }
.device-export-badge.changed { background: #fff0c7; color: #9b6500; }
.device-export-badge.exported { background: #e8f8ef; color: #24845d; }
.device-export-badge.incomplete { background: #fff0f1; color: #b63d49; }
.device-export-badge.is-loading { background: #f0f3f8; color: #7c899e; }

.device-supplier-export-history-dialog { width: min(980px, calc(100vw - 32px)); }
.device-supplier-export-history-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.device-supplier-export-history-summary > span {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid #dbe6f6;
  border-radius: 10px;
  background: #f8fbff;
}
.device-supplier-export-history-summary small { color: #77869e; }
.device-supplier-export-history-summary strong { color: #183766; font-size: 17px; }
.device-supplier-export-history-wrap { max-height: min(480px, 58vh); }
.device-supplier-export-history-wrap th { position: sticky; top: 0; z-index: 1; background: #f7f9fc; }
.device-supplier-export-history-wrap td { vertical-align: middle; }
.device-supplier-export-history-wrap td:nth-child(2) { max-width: 280px; overflow-wrap: anywhere; }
.device-supplier-export-history-wrap .device-text-button { white-space: nowrap; }

@media (max-width: 1280px) {
  .device-supplier-export-panel { align-items: stretch; flex-direction: column; gap: 10px; }
  .device-supplier-export-metrics { max-width: none; flex-basis: auto; }
}

@media (max-width: 720px) {
  .device-supplier-export-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-supplier-export-panel { padding: 11px; }
  .device-supplier-export-history-summary { grid-template-columns: 1fr; }
}

/* 渠道预约码：原太阳码保持不变，旁边新增独立的固定二维码。 */
#reservationCustomPanel > .reservation-channel-code-card {
  max-width: 1040px;
}

.channel-code-options {
  padding-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.channel-code-option {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(112, 154, 206, .22);
  border-radius: 9px;
  background: #f9fbfe;
}

.channel-code-option-square {
  background: linear-gradient(145deg, rgba(244, 249, 255, .96), rgba(249, 253, 252, .96));
}

.channel-code-option-head {
  min-height: 30px;
  margin-bottom: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.channel-code-option-head > div {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #183657;
}

.channel-code-option-head i {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  color: #2d5dd7;
  background: rgba(45, 93, 215, .09);
  font-size: 16px;
}

.channel-code-option-head strong { font-size: 14px; }

.channel-code-option-head > span {
  padding: 3px 7px;
  border-radius: 999px;
  color: #6d7f96;
  background: #edf2f8;
  font-size: 11px;
  line-height: 1.2;
}

.channel-code-option-square .channel-code-option-head > span {
  color: #19704e;
  background: #e8f7f0;
}

.channel-code-option .channel-mini-code-body {
  padding-top: 0;
  display: grid;
  grid-template-columns: minmax(132px, 160px) minmax(128px, 1fr);
  align-items: center;
  gap: 12px;
}

.channel-code-option .channel-mini-code-body .mini-program-code-preview {
  width: 160px;
  height: 160px;
  margin: 0;
  justify-self: start;
}

.channel-code-option .channel-mini-code-body .mini-program-code-actions {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.channel-code-consistency-note {
  margin-top: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  border-radius: 7px;
  color: #56708c;
  background: #f4f7fb;
  font-size: 12px;
  line-height: 1.55;
}

.channel-code-consistency-note i {
  margin-top: 1px;
  color: #23875f;
  font-size: 15px;
}

@media (max-width: 1100px) {
  .channel-code-options { grid-template-columns: 1fr; }
  .channel-code-option .channel-mini-code-body { grid-template-columns: 160px minmax(150px, 220px); }
}

@media (max-width: 560px) {
  .channel-code-option .channel-mini-code-body { grid-template-columns: 1fr; }
  .channel-code-option .channel-mini-code-body .mini-program-code-preview { justify-self: center; }
  .channel-code-option .channel-mini-code-body .mini-program-code-actions { max-width: 220px; justify-self: center; }
}