/* ========== 全局基础样式 ========== */
:root {
    /* 主紫色（贴近截图按钮/图标） */
    --violet: #7c3aed;
    --violet-hover: #6d28d9;
    --text: #111827;
    --muted: #6b7280;
    --border: #e5e7eb;
    --bg1: #f5f1ff; /* 左上浅紫 */
    --bg2: #eef4ff; /* 右下浅蓝 */
  }
  
  * {
    box-sizing: border-box;
  }
  
  html,
  body {
    height: 100%;
  }
  
  body {
    margin: 0;
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
      "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", Arial, sans-serif;
  }
  
  /* ========== 页面背景与布局（居中） ========== */
  .page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 16px;
    background: linear-gradient(135deg, var(--bg1), var(--bg2));
  }
  
  /* ========== 卡片 ========== */
  .card {
    width: min(440px, 92vw);
    background: #ffffff;
    border-radius: 12px;
    padding: 34px 34px 28px;
    box-shadow: 0 18px 45px rgba(17, 24, 39, 0.18);
    text-align: center;
  }
  
  /* Logo：紫色描边圆，内部图标同色 */
  .logo {
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--violet);
    border: 2px solid rgba(124, 58, 237, 0.25);
    background: rgba(124, 58, 237, 0.06);
  }
  
  /* 标题与副标题 */
  .title {
    margin: 6px 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  
  .subtitle {
    margin: 0 0 22px;
    font-size: 13px;
    color: var(--muted);
  }
  
  /* ========== 表单 ========== */
  .form {
    text-align: left; /* label 与输入框左对齐 */
  }
  
  .field {
    display: block;
    margin-bottom: 16px;
  }
  
  .label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
  }
  
  .input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  
  .input::placeholder {
    color: #9ca3af;
  }
  
  .input:focus {
    border-color: rgba(124, 58, 237, 0.7);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
  }
  
  /* 错误提示：默认隐藏；JS/Cursor 接口后显示 */
  .error {
    display: none;
    margin: 6px 0 14px;
    font-size: 13px;
    color: #b91c1c;
    background: rgba(185, 28, 28, 0.08);
    border: 1px solid rgba(185, 28, 28, 0.18);
    border-radius: 8px;
    padding: 10px 12px;
  }
  
  /* 登录按钮：全宽紫色，贴近截图 */
  .button {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: var(--violet);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 6px;
    transition: background 0.15s ease, transform 0.05s ease;
  }
  
  .button:hover {
    background: var(--violet-hover);
  }
  
  .button:active {
    transform: translateY(1px);
  }
  
  .button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
  }

  /* ========== 骨架屏动画 ========== */
  @keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #f7f7f7 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    display: inline-block;
  }