:root {
          --bg-light: #e9edf7;
          --bg-dark: #0a0d17;
          --text-light: #0a0a0a;
          --text-dark: #e9e9e9;
          --accent: #3e66c9;
          --accent-hover: #2f4ea1;
          --input-border: #ccd4e0;
          --dropdown-bg-light: #f8faff;
          --dropdown-bg-dark: #1a1f2e;
          --header-height: 60px;
          --sidebar-width: 280px;
        }

        body {
          margin: 0;
          padding: calc(var(--header-height) + 40px) 24px 40px;
          font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
          background-color: var(--bg-light);
          color: var(--text-light);
          transition: background-color 0.3s, color 0.3s;
          display: flex;
          flex-direction: column;
          align-items: center;
          min-height: 100vh;
          box-sizing: border-box;
          padding-top: calc(var(--header-height) + 40px);
        }

        @media (prefers-color-scheme: dark) {
          body {
            background-color: var(--bg-dark);
            color: var(--text-dark);
          }

          :root {
            --input-border: #2a2f3d;
          }
        }

        /* --- 1. 工业风顶栏 --- */
        .app-header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: var(--header-height);
          background-color: var(--bg-light);
          border-bottom: 2px solid var(--input-border);
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 24px;
          z-index: 100;
          transition: background-color 0.3s, border-color 0.3s;
        }

        @media (prefers-color-scheme: dark) {
          .app-header {
            background-color: var(--bg-dark);
          }
        }

        .hamburger-btn {
          background: none;
          border: none;
          cursor: pointer;
          padding: 10px;
          margin-left: -10px;
          display: flex;
          flex-direction: column;
          gap: 5px;
        }

        .hamburger-line {
          width: 24px;
          height: 2px;
          background-color: var(--text-light);
          transition: background-color 0.3s;
        }

        @media (prefers-color-scheme: dark) {
          .hamburger-line {
            background-color: var(--text-dark);
          }
        }

        .brand-link {
          font-weight: 700;
          font-size: 16px;
          color: var(--text-light);
          text-decoration: none;
          text-transform: uppercase;
          letter-spacing: 1px;
          transition: color 0.3s;
        }

        .brand-link:hover {
          color: var(--accent);
        }

        @media (prefers-color-scheme: dark) {
          .brand-link {
            color: var(--text-dark);
          }
        }

        /* --- 2. 侧边菜单 (Sidebar) --- */
        .sidebar-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          backdrop-filter: blur(2px);
          z-index: 200;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.3s, visibility 0.3s;
        }

        .sidebar-overlay.active {
          opacity: 1;
          visibility: visible;
        }

        .sidebar-menu {
          position: fixed;
          top: 0;
          left: 0;
          bottom: 0;
          width: var(--sidebar-width);
          max-width: 80%;
          background-color: var(--bg-light);
          border-right: 2px solid var(--input-border);
          z-index: 201;
          transform: translateX(-100%);
          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          display: flex;
          flex-direction: column;
          padding-top: var(--header-height);
        }

        @media (prefers-color-scheme: dark) {
          .sidebar-menu {
            background-color: var(--bg-dark);
          }
        }

        .sidebar-menu.active {
          transform: translateX(0);
        }

        .menu-list {
          list-style: none;
          padding: 20px 0;
          margin: 0;
        }

        /* 通用菜单链接样式 */
        .menu-link-base {
          display: block;
          padding: 16px 24px;
          font-size: 15px;
          font-weight: 600;
          color: var(--text-light);
          text-decoration: none;
          border-left: 4px solid transparent;
          transition: all 0.2s;
          position: relative;
        }

        @media (prefers-color-scheme: dark) {
          .menu-link-base {
            color: var(--text-dark);
          }
        }

        .menu-link-base:hover,
        .menu-item-drawer.active .drawer-toggle {
          background-color: rgba(62, 102, 201, 0.05);
          border-left-color: var(--accent);
          color: var(--accent);
        }

        /* --- 侧边栏抽屉 (Drawer) 核心样式 --- */
        .drawer-toggle {
          padding-right: 40px;
          /* 为指示器留出空间 */
          cursor: pointer;
        }

        /* 工业风指示器 (+/-) */
        .drawer-toggle::after {
          content: '';
          position: absolute;
          right: 24px;
          top: 50%;
          width: 10px;
          height: 2px;
          background-color: currentColor;
          transform: translateY(-50%);
          transition: transform 0.3s ease;
        }

        .drawer-toggle::before {
          content: '';
          position: absolute;
          right: 24px;
          top: 50%;
          width: 10px;
          height: 2px;
          background-color: currentColor;
          transform: translateY(-50%) rotate(90deg);
          transition: transform 0.3s ease;
        }

        /* 激活状态：旋转形成减号 */
        .menu-item-drawer.active .drawer-toggle::before {
          transform: translateY(-50%) rotate(0deg);
        }

        /* 抽屉内容容器 */
        .drawer-content {
          list-style: none;
          padding: 0;
          margin: 0;
          max-height: 0;
          overflow: hidden;
          /* 默认折叠 */
          transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          /* 平滑过渡 */
          background-color: rgba(0, 0, 0, 0.02);
          /* 稍微加深背景 */
        }

        @media (prefers-color-scheme: dark) {
          .drawer-content {
            background-color: rgba(255, 255, 255, 0.02);
          }
        }

        /* 激活状态：展开 */
        .menu-item-drawer.active .drawer-content {
          max-height: 500px;
          /* 设置一个足够大的高度 */
        }

        /* 子菜单项样式 */
        .sub-menu-item a {
          padding-left: 40px;
          /* 缩进 */
          font-size: 14px;
          opacity: 0.85;
        }


        .menu-footer {
          margin-top: auto;
          padding: 24px 32px;
          font-size: 12px;
          color: var(--text-light);
          opacity: 0.5;
        }

        /* --- 3. 主体内容样式 (保持不变) --- */
        .login-container {
          width: 100%;
          max-width: 540px;
          text-align: center;
        }

        h1 {
          font-size: 28px;
          margin: 0 0 12px;
          font-weight: 600;
        }

        p {
          line-height: 1.6;
          margin: 0 0 40px;
          font-size: 15px;
          opacity: 0.8;
        }

        .form-group {
          text-align: center;
          margin-bottom: 24px;
          width: 100%;
        }

        h3 {
          font-size: 13px;
          font-weight: 600;
          margin: 0 0 8px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          color: inherit;
        }

        .form-input {
          display: block;
          width: 100%;
          padding: 14px 16px;
          font-size: 16px;
          background-color: transparent;
          color: inherit;
          border: 2px solid var(--input-border);
          border-radius: 0;
          box-sizing: border-box;
          transition: border-color 0.25s;
          text-align: center;
          height: 52px;
          appearance: none;
        }

        .form-input:focus {
          outline: none;
          border-color: var(--accent);
          z-index: 2;
        }

        .input-row {
          display: flex;
          gap: 8px;
          width: 100%;
        }

        .input-row .form-input {
          text-align: left;
        }

        /* --- 4. 邮箱选择器动画优化 --- */
        .custom-select-wrap {
          width: 120px;
          flex-shrink: 0;
          position: relative;
          height: 52px;
        }

        .select-trigger {
          width: 100%;
          height: 100%;
          padding: 14px 0;
          font-size: 15px;
          background-color: transparent;
          border: 2px solid var(--input-border);
          border-radius: 0;
          box-sizing: border-box;
          text-align: center;
          cursor: pointer;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          transition: border-color 0.25s;
          user-select: none;
          z-index: 2;
          position: relative;
        }

        .custom-select-wrap.active .select-trigger {
          border-color: var(--accent);
        }

        /* 下拉选项列表 - 加入动画 */
        .select-options {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          z-index: 10;
          border: 2px solid var(--accent);
          border-top: none;
          background-color: var(--dropdown-bg-light);
          max-height: 200px;
          overflow-y: auto;
          box-sizing: border-box;
          margin-top: -2px;

          /* 动画初始状态：隐藏、透明、向上位移 */
          opacity: 0;
          visibility: hidden;
          transform: translateY(-10px);
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @media (prefers-color-scheme: dark) {
          .select-options {
            background-color: var(--dropdown-bg-dark);
          }
        }

        /* 动画激活状态：显示、不透明、位移归零 */
        .custom-select-wrap.active .select-options {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }

        .select-option {
          padding: 12px 10px;
          font-size: 14px;
          cursor: pointer;
          text-align: center;
          transition: background 0.15s;
        }

        .select-option:hover {
          background-color: var(--accent);
          color: #ffffff;
        }

        .select-option.selected {
          font-weight: 600;
          color: var(--accent);
        }

        .select-option.selected:hover {
          color: #ffffff;
        }

        /* 按钮与底部 */
        .btn-mini {
          width: 120px;
          flex-shrink: 0;
          padding: 0;
          height: 52px;
          background-color: var(--accent);
          color: #fff;
          border: none;
          font-weight: 600;
          font-size: 14px;
          cursor: pointer;
          transition: background 0.2s;
          text-align: center;
        }

        .btn-mini:hover {
          background-color: var(--accent-hover);
        }

        .btn-submit {
          display: block;
          width: 100%;
          padding: 14px 28px;
          background-color: var(--accent);
          color: #ffffff;
          font-weight: 600;
          border: none;
          border-radius: 0;
          cursor: pointer;
          font-size: 16px;
          letter-spacing: 2px;
          transition: background-color 0.25s;
        }

        .btn-submit:hover {
          background-color: var(--accent-hover);
        }

        .bottom-link {
          display: inline-block;
          margin-top: 24px;
          font-size: 14px;
          color: var(--accent);
          text-decoration: none;
          font-weight: 600;
        }

        .h20 {
          height: 20px;
        }