/* 表单模式标识：新增=青绿，编辑=琥珀 */
      .form-title-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }

      .mode-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 9px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 2px;
        text-indent: 2px;
        background: rgba(0, 150, 200, 0.1);
        color: #0097a7;
        border: 1px solid rgba(0, 150, 200, 0.28);
        white-space: nowrap;
      }

      aside.panel {
        position: relative;
      }

      aside.panel.editing .mode-badge {
        background: rgba(245, 124, 0, 0.12);
        color: #d9730d;
        border-color: rgba(245, 124, 0, 0.35);
      }

      /* 编辑态：面板顶部琥珀渐变信号条 */
      aside.panel.editing::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, rgba(245, 158, 11, 0) 0%, #f59e0b 50%, rgba(245, 158, 11, 0) 100%);
        border-radius: 22px 22px 0 0;
        pointer-events: none;
        z-index: 1;
      }

      aside.panel.editing button.primary {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        box-shadow: 0 6px 16px rgba(245, 158, 11, 0.3);
      }

      .stats-inline {
        display: flex;
        gap: 16px;
        font-size: 13px;
        color: var(--muted);
        flex: 1;
        justify-content: flex-start;
        padding-left: 100px;
      }

      .stat-item {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .stat-item strong {
        color: var(--text);
        font-size: 15px;
      }

      /* 表格空值弱化：让有内容的单元格自然突出 */
      .cell-empty {
        color: var(--muted);
        opacity: 0.4;
      }

      /* 单号悬浮复制按钮 */
      .code-wrap {
        display: inline-flex;
        align-items: baseline;
        gap: 4px;
      }

      .copy-mini {
        border: 0;
        background: transparent;
        cursor: pointer;
        font-size: 11px;
        line-height: 1;
        padding: 2px 4px;
        border-radius: 5px;
        color: var(--muted);
        opacity: 0;
        white-space: nowrap;
        transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
      }

      tr:hover .copy-mini {
        opacity: 0.65;
      }

      .copy-mini:hover {
        opacity: 1;
        background: rgba(0, 150, 200, 0.12);
        color: var(--accent);
      }

      label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 8px;
        transition: color 160ms ease, font-weight 160ms ease;
      }

      /* 空字段：标签淡化，有内容的字段标签保持醒目 */
      label.label-empty {
        color: var(--muted);
        font-weight: 500;
      }

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

      input,
      select,
      textarea {
        width: 100%;
        border: 1px solid rgba(0, 150, 200, 0.2);
        background: rgba(255, 255, 255, 0.85);
        border-radius: 12px;
        padding: 12px 14px;
        color: var(--text);
        transition: border-color 160ms ease, background-color 160ms ease;
      }

      /* 空字段：输入框本体淡化，聚焦输入时立即恢复 */
      input.field-empty:not(:focus-visible),
      select.field-empty:not(:focus-visible),
      textarea.field-empty:not(:focus-visible) {
        border-color: rgba(0, 150, 200, 0.1);
        background: rgba(255, 255, 255, 0.45);
      }

      /* 键盘焦点环：Tab 导航时清晰可见 */
      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
      }

      button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
      }

      /* 与整体风格一致的细滚动条 */
      .table-wrap::-webkit-scrollbar,
      aside.panel::-webkit-scrollbar,
      .sms-list::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      .table-wrap::-webkit-scrollbar-thumb,
      aside.panel::-webkit-scrollbar-thumb,
      .sms-list::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--accent) 30%, transparent);
        border-radius: 999px;
      }

      .table-wrap::-webkit-scrollbar-thumb:hover,
      aside.panel::-webkit-scrollbar-thumb:hover,
      .sms-list::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--accent) 50%, transparent);
      }

      .table-wrap::-webkit-scrollbar-track,
      aside.panel::-webkit-scrollbar-track,
      .sms-list::-webkit-scrollbar-track {
        background: transparent;
      }

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

      #eventNo:disabled,
      #orderNo:disabled {
        background: linear-gradient(135deg, rgba(240, 245, 247, 0.95) 0%, rgba(235, 242, 245, 0.95) 100%);
        border: 1.5px dashed rgba(150, 160, 170, 0.4);
        color: var(--muted);
        cursor: not-allowed;
        position: relative;
        padding-right: 40px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px;
      }

      #eventNo:disabled::placeholder,
      #orderNo:disabled::placeholder {
        color: rgba(150, 160, 170, 0.6);
      }

      #eventNo:disabled:hover,
      #orderNo:disabled:hover {
        border-color: rgba(255, 152, 0, 0.5);
        background: linear-gradient(135deg, rgba(255, 248, 240, 0.95) 0%, rgba(255, 243, 230, 0.95) 100%);
      }

      .grid {
        display: grid;
        gap: 14px;
      }

      .grid.two {
        grid-template-columns: 1fr 1fr;
      }

      .actions,
      .toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      button {
        border: 0;
        border-radius: 12px;
        padding: 12px 16px;
        cursor: pointer;
        transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
      }

      button:hover {
        transform: translateY(-1px);
      }

      .primary {
        background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 75%, black));
        color: white;
        box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
        font-weight: 600;
        letter-spacing: 0.5px;
      }

      .primary:hover {
        background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, white), var(--accent));
        box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 45%, transparent);
      }

      .secondary {
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(0, 150, 200, 0.15);
        color: var(--text);
      }

      .danger {
        background: transparent;
        color: var(--muted);
        border: 1px solid transparent;
        font-size: 13px;
        padding: 6px 12px;
        opacity: 0.6;
      }

      .danger:hover {
        background: rgba(255, 82, 82, 0.1);
        color: #d32f2f;
        border-color: rgba(255, 82, 82, 0.2);
        opacity: 1;
      }

      .logout-btn {
        background: transparent;
        color: var(--muted);
        border: 1px solid rgba(0, 150, 200, 0.15);
        border-radius: 12px;
        padding: 8px 14px;
        font-size: 13px;
        cursor: pointer;
        transition: all 200ms ease;
      }

      .logout-btn:hover {
        background: rgba(255, 82, 82, 0.08);
        color: #d32f2f;
        border-color: rgba(255, 82, 82, 0.3);
      }

      .theme-switcher {
        position: relative;
      }

      .theme-toggle-btn {
        background: transparent;
        color: var(--muted);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 8px 12px;
        font-size: 13px;
        cursor: pointer;
        transition: all 200ms ease;
      }

      .theme-toggle-btn:hover {
        background: rgba(0, 0, 0, 0.04);
        border-color: var(--accent);
        color: var(--accent);
      }

      .theme-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        background: var(--panel-strong);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 8px;
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 150px;
        max-height: min(420px, 70vh);
        overflow-y: auto;
        z-index: 100;
      }

      .theme-menu.hidden {
        display: none;
      }

      .theme-option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 12px;
        border: 0;
        background: transparent;
        color: var(--text);
        font-size: 13px;
        cursor: pointer;
        transition: background 150ms ease;
      }

      .theme-option:hover {
        background: rgba(0, 0, 0, 0.04);
      }

      .theme-dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.6);
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
      }

      .theme-dot-default { background: #00bcd4; }
      .theme-dot-mint { background: #00bfa5; }
      .theme-dot-amber { background: #ffb300; }
      .theme-dot-sakura { background: #ff69b4; }
      .theme-dot-lavender { background: #b388ff; }
      .theme-dot-peach { background: #ff8a80; }
      .theme-dot-cream { background: #ffd166; }

      .person-switcher {
        position: relative;
      }

      .person-toggle-btn {
        background: transparent;
        color: var(--muted);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 8px 12px;
        font-size: 13px;
        cursor: pointer;
        transition: all 200ms ease;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .person-toggle-btn:hover {
        background: rgba(0, 0, 0, 0.04);
        border-color: var(--accent);
        color: var(--accent);
      }

      .person-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        background: var(--panel-strong);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 8px;
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 120px;
        z-index: 100;
      }

      .person-menu.hidden {
        display: none;
      }

      .person-option {
        padding: 8px 10px;
        border-radius: 12px;
        border: 0;
        background: transparent;
        color: var(--text);
        font-size: 13px;
        cursor: pointer;
        transition: background 150ms ease;
        text-align: left;
      }

      .person-option:hover,
      .person-option.active {
        background: rgba(0, 0, 0, 0.04);
      }

      .sakura-wrapper {
        position: fixed;
        top: -40px;
        pointer-events: none;
        z-index: 9999;
        animation: sakura-fall linear forwards;
        will-change: transform;
      }

      .sakura-petal {
        width: 100%;
        height: 100%;
        border-radius: 80% 0 80% 80%;
        animation: sakura-sway ease-in-out infinite, sakura-spin linear infinite;
        transform-origin: center center;
      }

      @keyframes sakura-fall {
        to { transform: translateY(110vh); }
      }

      @keyframes sakura-sway {
        0%, 100% { margin-left: 0; }
        25% { margin-left: 35px; }
        50% { margin-left: -25px; }
        75% { margin-left: 30px; }
      }

      @keyframes sakura-spin {
        to { transform: rotate(360deg); }
      }

      .celebration-overlay {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 12px;
      }

      .celebration-message {
        text-align: center;
        color: #ff5252;
        font-weight: 800;
        text-shadow:
          0 2px 0 #fff,
          0 4px 20px rgba(255, 82, 82, 0.35),
          0 8px 40px rgba(255, 180, 0, 0.25);
        animation: cheer-pop 4.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        will-change: transform, opacity;
      }

      .celebration-message .cheer-title {
        font-size: clamp(28px, 8vw, 56px);
        line-height: 1.1;
      }

      .celebration-message .cheer-sub {
        font-size: clamp(16px, 4vw, 26px);
        margin-top: 8px;
        color: #ff9100;
        font-weight: 700;
      }

      .celebration-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 92px;
        height: 92px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ffd600 0%, #ff9100 100%);
        box-shadow:
          0 6px 0 #e65100,
          0 14px 30px rgba(255, 145, 0, 0.4);
        font-size: 44px;
        animation: badge-bounce 4.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      }

      @keyframes cheer-pop {
        0% {
          opacity: 0;
          transform: scale(0.4) translateY(40px);
        }
        18% {
          opacity: 1;
          transform: scale(1.08) translateY(-8px);
        }
        32% {
          transform: scale(0.96) translateY(4px);
        }
        44%, 78% {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
        100% {
          opacity: 0;
          transform: scale(0.92) translateY(-20px);
        }
      }

      @keyframes badge-bounce {
        0% {
          opacity: 0;
          transform: scale(0) rotate(-45deg);
        }
        18% {
          opacity: 1;
          transform: scale(1.15) rotate(8deg);
        }
        32% {
          transform: scale(0.95) rotate(-4deg);
        }
        44%, 72% {
          opacity: 1;
          transform: scale(1) rotate(0deg);
        }
        100% {
          opacity: 0;
          transform: scale(0.85) rotate(12deg) translateY(30px);
        }
      }

      .confetti-wrapper {
        position: fixed;
        top: -30px;
        pointer-events: none;
        z-index: 9999;
        animation: confetti-fall linear forwards;
        will-change: transform;
      }

      .confetti-piece {
        width: 100%;
        height: 100%;
        border-radius: 2px;
        animation: confetti-spin linear infinite, confetti-sway ease-in-out infinite;
        transform-origin: center center;
      }

      @keyframes confetti-fall {
        to { transform: translateY(110vh); }
      }

      @keyframes confetti-spin {
        to { transform: rotate(720deg); }
      }

      @keyframes confetti-sway {
        0%, 100% { margin-left: 0; }
        25% { margin-left: 28px; }
        50% { margin-left: -22px; }
        75% { margin-left: 24px; }
      }