/* ============================================================
   星野X学园 · 前端共享样式 (base.css)
   依赖：tokens.css（设计真源）
   作用：三端（会员/管理/老师）共用基础组件，避免三窗各自写样式打架。
   铁律：XYA-设计规范.md（圆角LOCK/配色70-20：10/反AI痕迹/密度分层/动效档3）
   ⚠️ @import 必须在所有规则之前（CSS 规范强制）。
   ============================================================ */
@import url('tokens.css');

/* ---------- 圆角 LOCK：按钮999 / 卡16 / 输入12，禁止第4种 ---------- */
/* ---------- 基础重置 ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }  /* 防移动端自动放大字体 */
body{
  background:var(--base,#F1F0EC);       /* 云舞白 70% 全页底 */
  color:var(--ink,#1F1C17);
  font-family:'PuHuiTi3','Poppins','Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  font-size:16px; line-height:1.8;       /* Body 基准 */
  margin:0;
}
.density-tight{ --density:5; font-size:14px; line-height:1.6; } /* 操作场景收紧 */

/* ---------- 按钮（圆角999 胶囊）---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:999px; border:none; cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:700; line-height:1.2;
  transition:transform var(--dur-fast), opacity var(--dur-fast), background var(--dur);
  min-height:46px; touch-action:manipulation;
}
.btn:active{ transform:scale(.97); }      /* MOTION档3：仅加压 */
.btn[disabled]{ opacity:.4; cursor:not-allowed; }
.btn-primary{ background:var(--main,#49BBCA); color:var(--ink,#1F1C17); } /* 湖蓝底配墨黑字(WCAG) */
.btn-outline{ background:var(--surface,#fff); color:var(--main,#49BBCA); border:1.5px solid var(--main); }
.btn-ghost{ background:transparent; color:var(--text-2,#6E675E); }
.btn-block{ width:100%; }

/* ---------- 卡片（圆角16） ---------- */
.card{
  background:var(--surface,#FFFFFF);   /* 纯白只作浮层，不铺满 */
  border-radius:16px; border:1px solid var(--line,#E8E3D8);
  padding:24px; box-shadow:var(--shadow-card,0 18px 44px rgba(20,18,14,.08));
}

/* ---------- 输入（圆角12） ---------- */
.input, .select, .textarea{
  width:100%; padding:12px 16px; border-radius:12px;
  border:1.5px solid var(--line-strong,#D8D1C3);
  font-family:inherit; font-size:16px; color:var(--ink,#1F1C17);
  background:var(--surface,#FFF);
  transition:border-color var(--dur), box-shadow var(--dur);
}
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--main,#49BBCA); box-shadow:0 0 0 3px rgba(73,187,202,.15);
}
.input::placeholder,.textarea::placeholder{ color:var(--text-3,#A09485); }
.label{ display:block; font-size:14px; color:var(--text-2,#6E675E); margin-bottom:6px; }
.label .req{ color:var(--danger,#E64D67); }   /* 必填* 用语义错误色 */

/* ---------- 胶囊 / 标签 ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px;
  border-radius:999px; font-size:14px; font-weight:700; line-height:1.4;
}

/* ---------- 反AI痕迹：禁止 3卡等宽平铺成流水线 ---------- */
.grid{ display:grid; gap:24px; }
.grid-lead{ gap:24px; align-items:start; }

/* ---------- 响应式（移动优先） ---------- */
.container{ width:100%; max-width:960px; margin:0 auto; padding:0 20px; }
.hide-mobile{ } /* 桌面只用 */
@media(max-width:640px){
  .hide-mobile{ display:none; }
  .show-desktop{ display:none; }
}

/* ---------- 动效档3 + reduced-motion ---------- */
.fade-in{ animation:fadeIn var(--dur-slow) var(--ease) 1 both; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- 发丝线 ---------- */
.hairline{ border:0; border-top:1px solid var(--line,#E8E3D8); margin:24px 0; }