:root {
        --ink-900: #0b1524;
        --ink-700: #1e2a3d;
        --ink-500: #4a5a72;
        --ink-400: #6b7a93;
        --ink-300: #93a0b5;
        --line: #e7eaf1;
        --line-soft: #f1f3f8;
        --paper: #f4f6fb;
        --card: #ffffff;
        --brand: #2f6bff;
        --brand-deep: #1e52e0;
        --brand-tint: #eef3ff;
        --success: #0d9c74;
        --success-tint: #e8f7f1;
        --warn: #d98200;
        --warn-tint: #fdf3e3;
        --danger: #dc3f45;
        --danger-tint: #fdecec;
        --info: #7b8aa3;
        --info-tint: #f1f3f7;
        --radius: 14px;
        --shadow-sm: 0 1px 2px rgba(11, 21, 36, 0.05);
        --shadow-md: 0 10px 30px -14px rgba(11, 21, 36, 0.28);
      }
      * {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
      }
      html,
      body {
        margin: 0;
      }
      body {
        background:
          radial-gradient(1000px 460px at 12% -8%, #e7edff 0%, rgba(231, 237, 255, 0) 62%),
          radial-gradient(760px 420px at 96% 4%, #eaf6f2 0%, rgba(234, 246, 242, 0) 58%),
          var(--paper);
        color: var(--ink-900);
        font:
          14px/1.6 "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", sans-serif;
        font-variant-numeric: tabular-nums;
        -webkit-font-smoothing: antialiased;
      }
      .shell {
        max-width: 1060px;
        margin: 0 auto;
        padding: 20px 16px calc(32px + env(safe-area-inset-bottom));
      }

      /* ---------- Hero ---------- */
      .hero {
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        padding: 22px 22px 26px;
        color: #fff;
        background:
          radial-gradient(520px 240px at 88% -30%, rgba(47, 107, 255, 0.55), rgba(47, 107, 255, 0) 62%),
          radial-gradient(360px 220px at 6% 120%, rgba(13, 156, 116, 0.32), rgba(13, 156, 116, 0) 66%),
          linear-gradient(135deg, #0b1524 0%, #16294a 58%, #1b3766 100%);
        box-shadow: var(--shadow-md);
      }
      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
        background-size: 34px 34px;
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 78%);
        pointer-events: none;
      }
      .hero-top {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .mark {
        width: 36px;
        height: 36px;
        flex: none;
        border-radius: 11px;
        display: grid;
        place-items: center;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: #fff;
        background: linear-gradient(140deg, #4d84ff, #2f6bff 55%, #1b3fa8);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.35),
          0 6px 16px -6px rgba(47, 107, 255, 0.9);
      }
      .kicker {
        font-size: 11px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
      }
      .hero h1 {
        margin: 2px 0 0;
        font-size: 21px;
        font-weight: 600;
        letter-spacing: 0.01em;
      }

      /* ---------- 查询条（与 Hero 交叠） ---------- */
      .search {
        position: relative;
        z-index: 2;
        margin: -14px 14px 18px;
        background: var(--card);
        border-radius: var(--radius);
        box-shadow:
          0 18px 40px -22px rgba(11, 21, 36, 0.42),
          var(--shadow-sm);
        padding: 12px;
        display: flex;
        gap: 10px;
        align-items: center;
      }
      .field {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        height: 46px;
        padding: 0 14px;
        border-radius: 10px;
        background: #f7f8fc;
        border: 1px solid transparent;
        transition:
          border-color 0.18s ease,
          background 0.18s ease;
      }
      .field:focus-within {
        background: #fff;
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.12);
      }
      .field svg {
        flex: none;
        color: var(--ink-300);
      }
      .field input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: none;
        background: transparent;
        font: inherit;
        font-size: 15px;
        color: var(--ink-900);
      }
      .field input::placeholder {
        color: var(--ink-300);
      }
      .go {
        flex: none;
        height: 46px;
        padding: 0 24px;
        border: 0;
        border-radius: 10px;
        font: inherit;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: #fff;
        cursor: pointer;
        background: linear-gradient(135deg, #3d78ff, #1e52e0);
        box-shadow: 0 10px 22px -12px rgba(30, 82, 224, 0.95);
        transition:
          transform 0.16s ease,
          box-shadow 0.16s ease,
          filter 0.16s ease;
      }
      .go:hover {
        transform: translateY(-1px);
        filter: brightness(1.04);
      }
      .go:active {
        transform: translateY(0);
        box-shadow: 0 6px 14px -10px rgba(30, 82, 224, 0.95);
      }

      /* ---------- 结果区 ---------- */
      #result > * {
        animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
      }
      #result > *:nth-child(2) {
        animation-delay: 0.06s;
      }
      #result > *:nth-child(3) {
        animation-delay: 0.12s;
      }
      @keyframes rise {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .panel {
        background: var(--card);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--line);
      }
      .panel + .panel {
        margin-top: 14px;
      }

      /* 概览 */
      .overview {
        padding: 10px 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        min-width: 0;
      }
      .ov-id {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink-700);
        letter-spacing: 0.01em;
        white-space: nowrap;
      }
      .ov-pills {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
      }
      .pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 9px;
        border-radius: 999px;
        font-size: 11.5px;
        line-height: 1.5;
        white-space: nowrap;
        background: var(--info-tint);
        color: var(--ink-400);
      }
      .pill::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
      }
      .pill b {
        font-weight: 650;
      }
      .pill.brand {
        background: var(--brand-tint);
        color: var(--brand-deep);
      }
      .pill.ok {
        background: var(--success-tint);
        color: var(--success);
      }
      .pill.warn {
        background: var(--warn-tint);
        color: var(--warn);
      }
      .pill.danger {
        background: var(--danger-tint);
        color: var(--danger);
      }

      /* 表格 */
      .table-panel {
        overflow: hidden;
      }
      .table-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 20px;
        border-bottom: 1px solid var(--line-soft);
      }
      .table-head .t {
        font-size: 14px;
        font-weight: 600;
      }
      .table-head .c {
        font-size: 12px;
        color: var(--ink-300);
      }
      .scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      table {
        width: 100%;
        min-width: 900px;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 13px;
      }
      thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #fafbfe;
        color: var(--ink-300);
        font-weight: 500;
        font-size: 11px;
        letter-spacing: 0.1em;
        text-align: left;
        white-space: nowrap;
        padding: 10px 16px;
        border-bottom: 1px solid var(--line);
      }
      tbody td {
        padding: 13px 16px;
        border-bottom: 1px solid var(--line-soft);
        color: var(--ink-500);
        vertical-align: middle;
        background: #fff;
        transition: background 0.15s ease;
      }
      tbody tr:last-child td {
        border-bottom: 0;
      }
      tbody tr:hover td {
        background: #fafbfe;
      }
      .c-course {
        min-width: 170px;
        position: sticky;
        left: 0;
        z-index: 2;
      }
      .c-course::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background: var(--line-soft);
      }
      .c-status {
        width: 96px;
      }
      .c-progress {
        min-width: 160px;
      }
      .c-detail {
        min-width: 340px;
      }
      .c-platform {
        min-width: 140px;
      }
      .c-time {
        min-width: 152px;
        white-space: nowrap;
        font-size: 12px;
        color: var(--ink-400);
      }
      .course {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 14px;
        font-weight: 600;
        color: var(--ink-900);
      }
      .pulse {
        flex: none;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--info);
        box-shadow: 0 0 0 3px var(--info-tint);
      }
      .pulse.brand {
        background: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-tint);
      }
      .pulse.ok {
        background: var(--success);
        box-shadow: 0 0 0 3px var(--success-tint);
      }
      .pulse.warn {
        background: var(--warn);
        box-shadow: 0 0 0 3px var(--warn-tint);
      }
      .tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 2px 9px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        background: var(--info-tint);
        color: var(--info);
      }
      .tag::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
      }
      .tag.brand {
        background: var(--brand-tint);
        color: var(--brand-deep);
      }
      .tag.ok {
        background: var(--success-tint);
        color: var(--success);
      }
      .tag.warn {
        background: var(--warn-tint);
        color: var(--warn);
      }
      .prog {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .track {
        position: relative;
        flex: none;
        width: 76px;
        height: 6px;
        border-radius: 999px;
        background: #eceff6;
        overflow: hidden;
      }
      .track i {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, #5b8cff, #2f6bff);
        width: var(--w, 0%);
        animation: grow 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both;
      }
      .track.ok i {
        background: linear-gradient(90deg, #2fb98f, #0d9c74);
      }
      .track.muted i {
        background: #c6cdda;
      }
      @keyframes grow {
        from {
          width: 0;
        }
        to {
          width: var(--w, 0%);
        }
      }
      .num {
        font-size: 13px;
        font-weight: 600;
        color: var(--brand-deep);
        min-width: 50px;
      }
      .num.ok {
        color: var(--success);
      }
      .num.muted {
        color: var(--ink-300);
        font-weight: 500;
      }
      .ellipsis {
        display: block;
        max-width: 330px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12.5px;
        color: var(--ink-400);
      }
      .detail {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 12.5px;
        line-height: 1.55;
        color: var(--ink-400);
        word-break: break-word;
      }

      /* 状态块 */
      .state {
        padding: 46px 20px;
        text-align: center;
      }
      .state .dot {
        width: 42px;
        height: 42px;
        margin: 0 auto 14px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--brand-tint);
        color: var(--brand-deep);
      }
      .state.danger .dot {
        background: var(--danger-tint);
        color: var(--danger);
      }
      .state p {
        margin: 0;
        font-size: 14px;
        font-weight: 500;
        color: var(--ink-700);
      }
      .state small {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        color: var(--ink-300);
      }
      .spinner {
        width: 30px;
        height: 30px;
        margin: 0 auto 14px;
        border-radius: 50%;
        border: 3px solid #e3e8f4;
        border-top-color: var(--brand);
        animation: spin 0.75s linear infinite;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      .foot {
        margin: 18px 4px 0;
        font-size: 12px;
        line-height: 1.9;
        color: var(--ink-300);
      }

      @media (max-width: 720px) {
        .shell {
          padding: 12px 12px calc(28px + env(safe-area-inset-bottom));
        }
        .hero {
          border-radius: 16px;
          padding: 18px 16px 22px;
        }
        .hero h1 {
          font-size: 19px;
        }
        .search {
          flex-direction: column;
          align-items: stretch;
          margin: -12px 10px 14px;
        }
        .go {
          width: 100%;
        }
        .overview {
          padding: 11px 14px;
          font-size: 12px;
          gap: 3px 8px;
        }
        .table-head {
          padding: 12px 15px;
        }
        /* 手机端：表格改为纵向信息行，避免横向滚动把详细进度藏到屏幕外 */
        .table-head .c {
          font-size: 11px;
        }
        .scroll {
          overflow: visible;
        }
        table {
          min-width: 0;
          display: block;
        }
        thead {
          display: none;
        }
        tbody,
        tr,
        td {
          display: block;
          width: auto;
        }
        tbody tr {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 7px 10px;
          padding: 13px 15px;
          border-bottom: 1px solid var(--line-soft);
        }
        tbody tr:last-child {
          border-bottom: 0;
        }
        tbody td {
          padding: 0;
          height: auto;
          border: 0;
          background: transparent;
        }
        tbody tr:hover td {
          background: transparent;
        }
        .c-course {
          position: static;
          min-width: 0;
          flex: 1 1 auto;
        }
        .c-course::after {
          display: none;
        }
        .c-status {
          width: auto;
          flex: 0 0 auto;
          margin-left: auto;
        }
        .c-progress {
          flex: 1 1 100%;
        }
        .c-progress .prog {
          width: 100%;
        }
        .c-progress .track {
          flex: 1 1 auto;
          width: auto;
        }
        .c-progress .num {
          text-align: right;
        }
        .c-detail {
          min-width: 0;
          flex: 1 1 100%;
        }
        .c-detail .detail {
          background: #f8f9fd;
          border-radius: 8px;
          padding: 8px 10px;
          color: var(--ink-500);
        }
        .c-platform {
          min-width: 0;
          flex: 1 1 100%;
        }
        .c-platform .ellipsis {
          max-width: none;
          white-space: normal;
          font-size: 11.5px;
          color: var(--ink-300);
        }
        .c-time {
          flex: 0 0 auto;
          min-width: 0;
          font-size: 11.5px;
        }
        .c-time::before {
          content: "最后同步 ";
          color: var(--ink-300);
        }
        .c-time:nth-of-type(7) {
          margin-left: auto;
          text-align: right;
        }
        .c-time:nth-of-type(7)::before {
          content: "下单 ";
        }
      }