@media (max-width: 600px) {
        :root {
          --mobile-card: rgba(255, 255, 255, 0.94);
          --mobile-line: rgba(94, 114, 235, 0.12);
          --mobile-shadow: 0 18px 48px rgba(35, 52, 120, 0.14);
        }

        html {
          background: #f5f8ff;
        }

        body {
          align-items: stretch;
          overflow-x: hidden;
          background:
            radial-gradient(circle at 18% -8%, rgba(124, 77, 255, 0.22) 0%, transparent 36%),
            radial-gradient(circle at 88% 6%, rgba(255, 171, 64, 0.18) 0%, transparent 34%),
            radial-gradient(circle at 42% 102%, rgba(0, 191, 165, 0.16) 0%, transparent 42%),
            linear-gradient(180deg, #f8fbff 0%, #eef6ff 44%, #fbf7ff 100%);
        }

        body::before {
          background-image:
            linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0 1px, transparent 1px),
            radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.8), transparent 48%);
          background-size: 18px 18px, 100% 100%;
          opacity: 0.5;
        }

        .shell {
          width: min(100%, 460px);
          min-height: 100dvh;
          margin: 0 auto;
          padding: 14px 12px calc(24px + env(safe-area-inset-bottom));
          gap: 14px;
        }

        .login-screen {
          min-height: 100dvh;
          padding: 20px 14px;
          background:
            radial-gradient(circle at 20% 12%, rgba(124, 77, 255, 0.2), transparent 34%),
            linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
        }

        .login-card {
          border: 0;
          border-radius: 32px;
          padding: 26px 22px;
          background: var(--mobile-card);
          box-shadow: var(--mobile-shadow);
        }

        .layout {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .layout > section.panel {
          order: 1;
          padding: 16px;
          border: 0;
          border-radius: 30px;
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.94));
          box-shadow: var(--mobile-shadow);
        }

        .layout > aside.panel {
          order: 2;
          padding: 18px;
          border: 0;
          border-radius: 30px;
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 247, 255, 0.94));
          box-shadow: var(--mobile-shadow);
        }

        .layout > aside.panel.mobile-edit-focus {
          animation: mobileEditFocus 900ms ease;
        }

        @keyframes mobileEditFocus {
          0% {
            box-shadow:
              0 0 0 0 rgba(124, 77, 255, 0.28),
              var(--mobile-shadow);
            transform: translateY(0);
          }
          45% {
            box-shadow:
              0 0 0 8px rgba(124, 77, 255, 0.08),
              0 22px 54px rgba(79, 70, 229, 0.18);
            transform: translateY(-2px);
          }
          100% {
            box-shadow:
              0 0 0 0 rgba(124, 77, 255, 0),
              var(--mobile-shadow);
            transform: translateY(0);
          }
        }

        .layout > aside,
        .layout > section,
        .layout > aside.panel,
        .layout > section.panel {
          height: auto;
          overflow: visible;
        }

        .section-title {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: stretch;
          gap: 12px;
          margin-bottom: 16px;
        }

        .section-title h2 {
          font-size: clamp(20px, 6vw, 26px);
          line-height: 1.08;
          letter-spacing: -0.04em;
          background: linear-gradient(135deg, var(--text) 0%, var(--accent) 58%, color-mix(in srgb, var(--accent) 80%, white) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .section-title small {
          display: block;
          max-width: 92%;
          font-size: 12px;
          line-height: 1.5;
          color: rgba(13, 59, 79, 0.58);
        }

        .title-with-btn {
          width: 100%;
          flex-direction: row;
          align-items: flex-start;
          justify-content: space-between;
          gap: 12px;
          padding-right: 58px;
        }

        .layout > section.panel > .section-title {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto auto auto;
          align-items: start;
          column-gap: 8px;
          row-gap: 12px;
        }

        .layout > section.panel > .section-title .title-with-btn {
          display: contents;
          padding-right: 0;
          width: auto;
        }

        .layout > section.panel > .section-title .title-with-btn > div {
          grid-column: 1;
          grid-row: 1;
          min-width: 0;
        }

        .sms-link-btn {
          flex: 0 0 auto;
          height: 38px;
          min-height: 38px;
          padding: 0 12px;
          border: 0;
          border-radius: 999px;
          background: linear-gradient(135deg, rgba(124, 77, 255, 0.12), rgba(0, 188, 212, 0.1));
          color: #4f46e5;
          box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.12);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          white-space: nowrap;
          line-height: 1;
        }

        .layout > section.panel > .section-title .sms-link-btn {
          grid-column: 2;
          grid-row: 1;
        }

        .logout-btn {
          position: static;
          height: 38px;
          min-height: 38px;
          padding: 0 12px;
          border: 0;
          border-radius: 999px;
          background: rgba(255, 82, 82, 0.08);
          color: #d94664;
          font-size: 12px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          white-space: nowrap;
          line-height: 1;
        }

        .theme-switcher {
          grid-column: 3;
          grid-row: 1;
          justify-self: end;
        }

        .theme-toggle-btn {
          height: 38px;
          min-height: 38px;
          padding: 0 12px;
          border: 0;
          border-radius: 999px;
          background: rgba(0, 188, 212, 0.08);
          color: #00838f;
          font-size: 12px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          white-space: nowrap;
          line-height: 1;
        }

        .theme-menu {
          right: 0;
          top: calc(100% + 6px);
          border-radius: 14px;
          min-width: 140px;
        }

        .theme-option {
          padding: 7px 10px;
          font-size: 12px;
        }

        .theme-dot {
          width: 14px;
          height: 14px;
        }

        .layout > section.panel > .section-title .logout-btn {
          grid-column: 4;
          grid-row: 1;
        }

        .stats-inline {
          grid-column: 1 / -1;
          grid-row: 2;
          width: 100%;
          margin: 0;
          padding: 0;
          display: flex;
          flex-wrap: nowrap;
          gap: 8px;
          overflow-x: auto;
          scrollbar-width: none;
        }

        .stats-inline::-webkit-scrollbar {
          display: none;
        }

        .stat-item {
          flex: 0 0 auto;
          min-height: 32px;
          padding: 0 10px;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.78);
          box-shadow: inset 0 0 0 1px rgba(0, 150, 200, 0.08);
          font-size: 11.5px;
          white-space: nowrap;
        }

        .toolbar {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          gap: 8px;
          margin: 0 0 14px;
          padding: 10px;
          border-radius: 24px;
          background: rgba(240, 246, 255, 0.84);
          box-shadow: inset 0 0 0 1px rgba(94, 114, 235, 0.08);
        }

        .toolbar .search-input-wrapper {
          grid-column: 1 / -1;
          min-width: 0;
          width: 100%;
        }

        .toolbar .range-toggle {
          min-width: 0;
          height: 44px;
          min-height: 44px;
          padding: 0 10px;
          border-radius: 16px;
          font-size: 13px;
          white-space: nowrap;
          justify-content: center;
        }

        .toolbar .range-toggle .dot {
          flex: 0 0 8px;
        }

        .toolbar .range-toggle #rangeToggleLabel {
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .toolbar .search-input-wrapper input {
          height: 44px;
          padding: 0 40px 0 14px;
        }

        .color-filter-wrapper,
        .closed-filter-wrapper {
          min-width: 0;
          width: 100%;
        }

        .toolbar .color-select-display {
          min-width: 0;
          height: 44px;
          min-height: 44px;
          padding: 0 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          font-size: 13px;
        }

        .toolbar .color-label {
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .toolbar > button {
          width: 100%;
          min-width: 0;
          height: 44px;
          min-height: 44px;
          padding: 0 10px;
          border-radius: 16px;
          font-size: 13px;
          white-space: nowrap;
        }

        .toolbar .clear-search-btn {
          width: 24px;
          height: 24px;
          min-height: 24px;
          padding: 0;
          right: 10px;
        }

        input,
        select,
        textarea,
        .color-select-display {
          border: 0;
          border-radius: 18px;
          background: rgba(255, 255, 255, 0.92);
          box-shadow:
            inset 0 0 0 1px rgba(94, 114, 235, 0.1),
            0 8px 22px rgba(35, 52, 120, 0.06);
        }

        input:focus,
        select:focus,
        textarea:focus,
        .color-select-display:focus {
          outline: none;
          box-shadow:
            inset 0 0 0 1.5px rgba(124, 77, 255, 0.36),
            0 0 0 4px rgba(124, 77, 255, 0.08),
            0 10px 26px rgba(35, 52, 120, 0.08);
        }

        #customerForm {
          gap: 13px;
        }

        #customerForm .grid.two {
          gap: 12px;
        }

        #customerForm textarea {
          min-height: 104px;
          line-height: 1.65;
        }

        #customerForm .actions {
          position: sticky;
          bottom: calc(10px + env(safe-area-inset-bottom));
          z-index: 12;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;
          margin: 4px -4px 0;
          padding: 10px;
          border-radius: 24px;
          background: rgba(255, 255, 255, 0.82);
          backdrop-filter: blur(14px);
          box-shadow: 0 12px 34px rgba(35, 52, 120, 0.14);
        }

        #customerForm .actions button,
        #customerForm .actions .primary,
        #customerForm .actions .secondary {
          width: 100%;
          min-height: 46px;
        }

        .primary {
          border-radius: 18px;
          background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 75%, black));
          box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 22%, transparent);
        }

        .secondary {
          border: 0;
          border-radius: 18px;
          background: rgba(255, 255, 255, 0.82);
          box-shadow: inset 0 0 0 1px rgba(94, 114, 235, 0.12);
        }

        .danger {
          align-self: flex-start;
          border-radius: 999px;
          background: rgba(255, 82, 82, 0.08);
          color: #d94664;
          opacity: 1;
        }

        .layout > section.panel > .table-wrap {
          flex: none;
          overflow: visible;
          border: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
        }

        .table-loading-overlay {
          position: absolute;
          inset: 0;
          border-radius: 0;
          background: rgba(255, 255, 255, 0.7);
        }

        .table-wrap table,
        .table-wrap tbody,
        .table-wrap tr,
        .table-wrap td {
          display: block;
          width: 100%;
        }

        .table-wrap table {
          min-width: 0;
          border-collapse: separate;
        }

        .table-wrap thead {
          display: none;
        }

        .table-wrap tr {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          column-gap: 8px;
          row-gap: 5px;
          position: relative;
          margin-bottom: 8px;
          padding: 9px 10px 10px;
          border: 1px solid var(--mobile-line);
          border-radius: 18px;
          background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.92));
          box-shadow: 0 8px 22px rgba(35, 52, 120, 0.08);
          overflow: hidden;
          transition: transform 180ms ease, box-shadow 180ms ease;
        }

        .table-wrap tr[data-id]::after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          width: 54px;
          height: 54px;
          border-radius: 0 18px 0 54px;
          background: radial-gradient(circle at top right, rgba(124, 77, 255, 0.08), transparent 72%);
          pointer-events: none;
        }

        .table-wrap tr.row-purple[data-id]::after {
          background: radial-gradient(circle at top right, rgba(124, 77, 255, 0.12), transparent 72%);
        }

        .table-wrap tr.row-green[data-id]::after {
          background: radial-gradient(circle at top right, rgba(0, 191, 165, 0.12), transparent 72%);
        }

        .table-wrap tr.row-red[data-id]::after {
          background: radial-gradient(circle at top right, rgba(255, 82, 82, 0.12), transparent 72%);
        }

        .table-wrap tr.row-orange[data-id]::after {
          background: radial-gradient(circle at top right, rgba(255, 171, 64, 0.12), transparent 72%);
        }

        .table-wrap tr.row-blue[data-id]::after {
          background: radial-gradient(circle at top right, rgba(0, 145, 234, 0.12), transparent 72%);
        }

        .table-wrap tr.row-gray[data-id]::after {
          background: radial-gradient(circle at top right, rgba(74, 122, 138, 0.15), transparent 72%);
        }

        .table-wrap tr.row-white[data-id]::after {
          background: radial-gradient(circle at top right, rgba(0, 188, 212, 0.10), transparent 72%);
        }

        .table-wrap tr:hover {
          transform: translateY(-2px);
          background: linear-gradient(135deg, #ffffff, #f8fbff);
        }

        .table-wrap tr.selected {
          background: linear-gradient(135deg, #ffffff, #f5f0ff);
          box-shadow:
            inset 0 0 0 2px rgba(124, 77, 255, 0.28),
            0 10px 28px rgba(79, 70, 229, 0.12);
        }

        .table-wrap tr.selected::before {
          content: "\53CC\51FB\7F16\8F91";
          position: absolute;
          right: 10px;
          bottom: 8px;
          z-index: 1;
          padding: 4px 7px;
          border-radius: 999px;
          background: rgba(124, 77, 255, 0.1);
          color: #6d28d9;
          font-size: 10px;
          font-weight: 700;
          line-height: 1;
        }

        .table-wrap td {
          display: grid;
          grid-template-columns: 46px minmax(0, 1fr);
          gap: 6px;
          align-items: start;
          padding: 3px 0;
          border-bottom: 0;
          color: var(--text);
          font-size: 12px;
          line-height: 1.35;
          text-align: right;
          white-space: normal;
          overflow: visible;
          text-overflow: clip;
          max-width: none;
          word-break: break-word;
        }

        .table-wrap td::before {
          color: rgba(74, 85, 120, 0.62);
          font-size: 10px;
          font-weight: 800;
          letter-spacing: 0.04em;
          text-align: left;
          text-transform: uppercase;
        }

        .table-wrap td:first-child {
          display: flex;
          grid-column: 1;
          grid-row: 1;
          justify-content: flex-start;
          align-items: center;
          padding: 0;
          border-bottom: 0;
        }

        .table-wrap td:first-child::before,
        .table-wrap td[colspan]::before {
          display: none;
        }

        .table-wrap td:nth-child(2)::before { content: "\65E5\671F"; }
        .table-wrap td:nth-child(5)::before { content: "\60C5\51B5"; }
        .table-wrap td:nth-child(6)::before { content: "\5904\7406\7ED3\679C"; }
        .table-wrap td:nth-child(7)::before { content: "\5173\5355"; }
        .table-wrap td:nth-child(8)::before { content: "\5173\5355\65E5\671F"; }
        .table-wrap td:nth-child(9)::before { content: "\5907\6CE8"; }

        .table-wrap td:nth-child(2) {
          display: block;
          grid-column: 1 / -1;
          grid-row: 2;
          padding: 0;
          text-align: left;
          color: rgba(23, 65, 93, 0.58);
          font-size: 11px;
        }

        .table-wrap td:nth-child(2)::before {
          display: none;
        }

        .table-wrap td:nth-child(3),
        .table-wrap td:nth-child(4) {
          grid-column: span 1;
          display: flex;
          align-items: center;
          gap: 5px;
          margin-top: 1px;
          padding: 5px 8px;
          border-radius: 10px;
          background: linear-gradient(135deg, rgba(0, 188, 212, 0.08), rgba(124, 77, 255, 0.05));
          box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.06);
          color: #123b68;
          font-size: 12px;
          line-height: 1.3;
          overflow: hidden;
        }

        .table-wrap td:nth-child(3)::before,
        .table-wrap td:nth-child(4)::before {
          content: attr(data-label);
          flex-shrink: 0;
          color: #5b4ee6;
          font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.02em;
          opacity: 0.85;
        }

        .table-wrap .code-value {
          display: block;
          min-width: 0;
          flex: 1;
          font-family: -apple-system, BlinkMacSystemFont, "SF Mono", "Consolas", "Monaco", monospace;
          font-size: 12px;
          font-weight: 600;
          letter-spacing: -0.01em;
          color: #1a365d;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 1.3;
        }

        /* 手机端：code-wrap 接管原 code-value 的弹性布局位 */
        .table-wrap .code-wrap {
          display: flex;
          flex: 1;
          min-width: 0;
          align-items: center;
        }

        /* 触屏无 hover，隐藏悬浮复制按钮 */
        .table-wrap .copy-mini {
          display: none;
        }

        .table-wrap td:nth-child(7) {
          display: block;
          grid-column: 2;
          grid-row: 1;
          justify-self: end;
          width: auto;
          padding: 3px 8px;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.78);
          box-shadow: inset 0 0 0 1px rgba(94, 114, 235, 0.1);
          font-size: 11px;
          font-weight: 600;
          line-height: 1.25;
          white-space: nowrap;
        }

        .table-wrap td:nth-child(7).text-closed {
          color: #00bfa5;
          background: rgba(0, 191, 165, 0.08);
          box-shadow: inset 0 0 0 1px rgba(0, 191, 165, 0.2);
        }

        .table-wrap td:nth-child(7).text-pending {
          color: #e57373;
          background: rgba(229, 115, 115, 0.08);
          box-shadow: inset 0 0 0 1px rgba(229, 115, 115, 0.2);
        }

        .table-wrap td:nth-child(7)::before,
        .table-wrap td:nth-child(8),
        .table-wrap td:nth-child(9) {
          display: none;
        }

        .table-wrap td.text-content,
        .table-wrap td.text-result {
          display: block;
          grid-column: 1 / -1;
          text-align: left;
          padding: 1px 0 0;
          max-width: none;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: rgba(13, 59, 79, 0.78);
          font-size: 12px;
          line-height: 1.35;
        }

        .table-wrap td.text-content::before,
        .table-wrap td.text-result::before {
          display: inline;
          margin-right: 6px;
          color: rgba(91, 78, 230, 0.68);
        }

        .table-wrap td:last-child {
          border-bottom: 0;
          padding-bottom: 0;
        }

        .table-wrap td[colspan] {
          display: block;
          grid-column: 1 / -1;
          padding: 42px 18px;
          border: 1px dashed rgba(94, 114, 235, 0.18);
          border-radius: 24px;
          background: rgba(255, 255, 255, 0.72);
          text-align: center;
        }

        .tag {
          padding: 5px 9px;
          border-radius: 999px;
          font-size: 11px;
          box-shadow: inset 0 0 0 1px currentColor;
        }

        .text-code {
          font-size: 13px;
          white-space: normal;
        }

        .text-date {
          font-size: 11px;
        }

        .text-content,
        .text-result {
          font-size: 12px;
          line-height: 1.35;
        }

        .pagination {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 8px;
          margin-top: 12px;
          padding: 9px 10px 10px;
          border-radius: 24px;
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(243, 248, 255, 0.78));
          box-shadow:
            inset 0 0 0 1px rgba(94, 114, 235, 0.08),
            0 10px 28px rgba(35, 52, 120, 0.08);
          overflow: hidden;
        }

        .pagination-strip {
          width: 100%;
          min-width: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
          padding: 4px 2px 6px;
          overflow: visible;
        }

        .pagination-buttons-row {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          width: 100%;
          overflow-x: auto;
          overflow-y: hidden;
          flex-wrap: nowrap;
          scroll-snap-type: x proximity;
          scrollbar-width: none;
          padding: 2px 0;
          -webkit-overflow-scrolling: touch;
        }

        .pagination-buttons-row::-webkit-scrollbar {
          display: none;
        }

        .pagination button,
        .pagination .secondary {
          flex: 0 0 auto;
          width: auto;
          height: 38px;
          min-width: 38px;
          min-height: 38px;
          padding: 0 12px;
          border: 0;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.86);
          color: #17415d;
          box-shadow: inset 0 0 0 1px rgba(94, 114, 235, 0.1);
          font-size: 13px;
          line-height: 1;
          white-space: nowrap;
          scroll-snap-align: start;
        }

        .pagination .pagination-edge {
          min-width: 56px;
        }

        .pagination button.active {
          width: 40px;
          min-width: 40px;
          height: 40px;
          background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 75%, black));
          color: #fff;
          box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 24%, transparent);
        }

        .pagination button:disabled {
          opacity: 0.42;
          box-shadow: inset 0 0 0 1px rgba(94, 114, 235, 0.08);
        }

        .pagination .page-info {
          display: block;
          justify-self: center;
          order: 3;
          padding: 4px 0 0;
          text-align: center;
          color: rgba(23, 65, 93, 0.72);
          font-size: 12.5px;
          font-weight: 600;
          line-height: 1.4;
          letter-spacing: 0.01em;
        }

        .stats-header {
          justify-content: flex-end;
          padding: 12px 16px;
          margin-bottom: 16px;
          min-height: auto;
        }

        .stats-header h2 {
          display: none;
        }

        .sakura-back-btn {
          font-size: 24px;
          width: 42px;
          height: 42px;
        }

        .modal-overlay {
          padding: 0;
        }

        .sms-modal {
          border-radius: 28px 28px 0 0;
          box-shadow: 0 -18px 56px rgba(35, 52, 120, 0.24);
        }

        button:hover,
        .sms-link-btn:hover,
        .favorite-tab:hover,
        .clear-search-btn:hover {
          transform: none;
        }
      }

      @media (orientation: landscape) and (max-height: 500px) {
        .shell {
          padding: 8px 12px;
          height: auto;
          min-height: 100vh;
        }

        .modal-overlay {
          align-items: center;
        }

        .sms-modal {
          max-height: 92vh;
          border-radius: 14px;
        }

        .sms-list {
          max-height: 300px;
        }
      }