:root {
        --bg: #e0f7fa;
        --panel: rgba(255, 255, 255, 0.75);
        --panel-strong: #ffffff;
        --line: rgba(0, 150, 200, 0.15);
        --text: #0d3b4f;
        --muted: #4a7a8a;
        --accent: #00bcd4;
        --shadow: 0 24px 60px rgba(0, 100, 150, 0.15);
        --purple: #7c4dff;
        --yellow: #ffd600;
        --green: #00bfa5;
        --red: #ff5252;
        --orange: #ffab40;
        --blue: #0091ea;
        --coral: #ff6b6b;
        --teal: #26a69a;
        --indigo: #5c6bc0;
        --amber: #ffb300;
        --rose: #e91e63;
        --bg-gradient:
          radial-gradient(circle at 0% 0%, rgba(124, 77, 255, 0.12) 0%, transparent 50%),
          radial-gradient(circle at 100% 0%, rgba(255, 107, 107, 0.1) 0%, transparent 45%),
          radial-gradient(circle at 100% 100%, rgba(0, 191, 165, 0.12) 0%, transparent 50%),
          radial-gradient(circle at 0% 100%, rgba(255, 179, 0, 0.08) 0%, transparent 45%),
          radial-gradient(circle at 50% 50%, rgba(0, 230, 255, 0.06) 0%, transparent 60%),
          linear-gradient(160deg, #e8f4f8 0%, #e0f7fa 25%, #b2ebf2 50%, #c5e8f5 75%, #d4edfc 100%);
      }

      .theme-mint {
        --bg: #e8f5e9;
        --line: rgba(0, 191, 165, 0.15);
        --text: #1b3d1c;
        --muted: #4a7a5a;
        --accent: #00bfa5;
        --shadow: 0 24px 60px rgba(0, 150, 100, 0.15);
        --bg-gradient:
          radial-gradient(circle at 0% 0%, rgba(0, 200, 83, 0.1) 0%, transparent 50%),
          radial-gradient(circle at 100% 0%, rgba(0, 191, 165, 0.1) 0%, transparent 45%),
          radial-gradient(circle at 100% 100%, rgba(124, 179, 66, 0.1) 0%, transparent 50%),
          radial-gradient(circle at 0% 100%, rgba(0, 150, 136, 0.08) 0%, transparent 45%),
          radial-gradient(circle at 50% 50%, rgba(0, 230, 118, 0.06) 0%, transparent 60%),
          linear-gradient(160deg, #e8f5e9 0%, #e0f2f1 25%, #b2dfdb 50%, #c8e6c9 75%, #dcedc8 100%);
      }

      .theme-amber {
        --bg: #fff8e1;
        --line: rgba(255, 179, 0, 0.15);
        --text: #4a3a1a;
        --muted: #8a7a5a;
        --accent: #ffb300;
        --shadow: 0 24px 60px rgba(200, 150, 0, 0.15);
        --bg-gradient:
          radial-gradient(circle at 0% 0%, rgba(255, 179, 0, 0.1) 0%, transparent 50%),
          radial-gradient(circle at 100% 0%, rgba(255, 145, 0, 0.1) 0%, transparent 45%),
          radial-gradient(circle at 100% 100%, rgba(255, 107, 107, 0.1) 0%, transparent 50%),
          radial-gradient(circle at 0% 100%, rgba(124, 77, 255, 0.08) 0%, transparent 45%),
          radial-gradient(circle at 50% 50%, rgba(255, 193, 7, 0.06) 0%, transparent 60%),
          linear-gradient(160deg, #fff8e1 0%, #ffecb3 25%, #ffe082 50%, #ffd54f 75%, #ffca28 100%);
      }

      .theme-sakura {
        --bg: #fff0f5;
        --line: rgba(255, 105, 180, 0.15);
        --text: #5a1a3a;
        --muted: #9a5a7a;
        --accent: #ff69b4;
        --shadow: 0 24px 60px rgba(255, 105, 180, 0.15);
        --bg-gradient:
          radial-gradient(circle at 0% 0%, rgba(255, 105, 180, 0.12) 0%, transparent 50%),
          radial-gradient(circle at 100% 0%, rgba(255, 158, 205, 0.1) 0%, transparent 45%),
          radial-gradient(circle at 100% 100%, rgba(255, 183, 178, 0.1) 0%, transparent 50%),
          radial-gradient(circle at 0% 100%, rgba(255, 133, 162, 0.08) 0%, transparent 45%),
          radial-gradient(circle at 50% 50%, rgba(255, 182, 193, 0.08) 0%, transparent 60%),
          linear-gradient(160deg, #fff0f5 0%, #ffe4ec 25%, #ffd6e5 50%, #ffc9db 75%, #ffbdd2 100%);
      }

      .theme-lavender {
        --bg: #f3e8ff;
        --line: rgba(180, 140, 255, 0.18);
        --text: #3d1f5c;
        --muted: #7a5a9a;
        --accent: #b388ff;
        --shadow: 0 24px 60px rgba(180, 140, 255, 0.16);
        --bg-gradient:
          radial-gradient(circle at 0% 0%, rgba(179, 136, 255, 0.12) 0%, transparent 50%),
          radial-gradient(circle at 100% 0%, rgba(206, 147, 216, 0.1) 0%, transparent 45%),
          radial-gradient(circle at 100% 100%, rgba(149, 117, 205, 0.1) 0%, transparent 50%),
          radial-gradient(circle at 0% 100%, rgba(224, 176, 255, 0.08) 0%, transparent 45%),
          radial-gradient(circle at 50% 50%, rgba(206, 147, 216, 0.08) 0%, transparent 60%),
          linear-gradient(160deg, #f3e8ff 0%, #ede4ff 25%, #e1d5ff 50%, #d6c6ff 75%, #ceb8ff 100%);
      }

      .theme-peach {
        --bg: #fff2ec;
        --line: rgba(255, 138, 128, 0.16);
        --text: #5a2a22;
        --muted: #9a6a62;
        --accent: #ff8a80;
        --shadow: 0 24px 60px rgba(255, 138, 128, 0.15);
        --bg-gradient:
          radial-gradient(circle at 0% 0%, rgba(255, 138, 128, 0.12) 0%, transparent 50%),
          radial-gradient(circle at 100% 0%, rgba(255, 171, 145, 0.1) 0%, transparent 45%),
          radial-gradient(circle at 100% 100%, rgba(255, 204, 188, 0.1) 0%, transparent 50%),
          radial-gradient(circle at 0% 100%, rgba(255, 158, 128, 0.08) 0%, transparent 45%),
          radial-gradient(circle at 50% 50%, rgba(255, 171, 145, 0.08) 0%, transparent 60%),
          linear-gradient(160deg, #fff2ec 0%, #ffeee8 25%, #ffdcd4 50%, #ffcbc0 75%, #ffbcaf 100%);
      }

      .theme-cream {
        --bg: #fffbe6;
        --line: rgba(255, 214, 165, 0.2);
        --text: #5a4a2a;
        --muted: #9a8a6a;
        --accent: #ffd166;
        --shadow: 0 24px 60px rgba(255, 209, 102, 0.15);
        --bg-gradient:
          radial-gradient(circle at 0% 0%, rgba(255, 209, 102, 0.12) 0%, transparent 50%),
          radial-gradient(circle at 100% 0%, rgba(255, 224, 178, 0.1) 0%, transparent 45%),
          radial-gradient(circle at 100% 100%, rgba(255, 183, 178, 0.1) 0%, transparent 50%),
          radial-gradient(circle at 0% 100%, rgba(255, 204, 128, 0.08) 0%, transparent 45%),
          radial-gradient(circle at 50% 50%, rgba(255, 224, 178, 0.08) 0%, transparent 60%),
          linear-gradient(160deg, #fffbe6 0%, #fff8e1 25%, #ffecb3 50%, #ffe0b2 75%, #ffd8a6 100%);
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
        color: var(--text);
        background: var(--bg-gradient);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background-image:
          radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
          radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
        background-size: 100% 100%;
      }

      .shell {
        max-width: 100%;
        width: 100%;
        height: calc(100vh - 64px);
        margin: auto;
        padding: 24px 28px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
      }

      .panel {
        background: var(--panel);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
        border-radius: 22px;
      }

      .layout {
        display: grid;
        grid-template-columns: 420px 1fr;
        gap: 28px;
        flex: 1;
        min-height: 0;
      }

      .layout > aside,
      .layout > section {
        height: 100%;
        overflow: hidden;
      }

      .layout > section.panel {
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .layout > section.panel > .section-title {
        flex-shrink: 0;
      }

      .layout > section.panel > .toolbar {
        flex-shrink: 0;
      }

      .layout > section.panel > .table-wrap {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
      }

      .layout > section.panel > #pagination {
        flex-shrink: 0;
        padding-top: 8px;
      }

      .panel {
        padding: 22px;
      }

      .layout > aside.panel {
        overflow-y: auto;
        height: 100%;
      }

      .section-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
      }

      .section-title h2 {
        margin: 0;
        font-size: 20px;
        background: linear-gradient(135deg, var(--text) 0%, var(--indigo) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .section-title small {
        color: var(--muted);
      }