/* ============================================================
   英语智伴 · engpal 预览环境
   设计令牌 + 基础样式（教师端 / 学生端共用）
   配色与排版对齐原产品页面
   ============================================================ */

:root{
  --brand:#2f6bff;
  --brand-600:#2458de;
  --brand-700:#1d47bb;
  --brand-soft:#eef3ff;
  --brand-line:#d8e3ff;

  --ink:#1c2333;
  --ink-2:#5a6376;
  --ink-3:#8b93a5;
  --ink-4:#aab1c1;

  --line:#eef0f5;
  --line-2:#e4e8f0;
  --bg:#f6f8fb;
  --surface:#ffffff;
  --surface-2:#fafbfd;

  --green:#16a34a;
  --green-soft:#e8f7ee;
  --amber:#d97706;
  --amber-soft:#fdf3e3;
  --red:#e5484d;
  --red-soft:#fdeced;
  --purple:#8b5cf6;
  --purple-soft:#f2edff;

  --r-sm:8px;
  --r-md:10px;
  --r-lg:14px;
  --shadow-1:0 1px 2px rgba(23,35,66,.05);
  --shadow-2:0 4px 16px rgba(23,35,66,.07);
  --shadow-brand:0 4px 12px rgba(47,107,255,.26);

  --sidebar-w:186px;
  --topbar-h:64px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
button{font-family:inherit; font-size:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}
a{color:inherit; text-decoration:none}
svg{display:block}
img{max-width:100%}

::selection{background:#d6e2ff; color:var(--ink)}

/* ---------- 滚动条 ---------- */
*::-webkit-scrollbar{width:8px; height:8px}
*::-webkit-scrollbar-thumb{background:#d7dce7; border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:#c3cad8}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 14px; border-radius:var(--r-sm);
  font-size:13px; font-weight:500; white-space:nowrap;
  border:1px solid var(--line-2); background:#fff; color:var(--ink-2);
  transition:background .15s, border-color .15s, box-shadow .15s, transform .12s;
}
.btn:hover{border-color:#cdd5e4; color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:var(--shadow-brand);
}
.btn-primary:hover{background:var(--brand-600); border-color:var(--brand-600); color:#fff}
.btn-ghost{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand)}
.btn-ghost:hover{background:#e4ecff; border-color:#c9d9ff; color:var(--brand-600)}
.btn-lg{height:42px; padding:0 20px; font-size:14px; border-radius:var(--r-sm)}
.btn[disabled]{opacity:.5; cursor:not-allowed; box-shadow:none}
.btn[disabled]:active{transform:none}

/* ---------- 标签 ---------- */
.tag{
  display:inline-flex; align-items:center; gap:4px;
  height:22px; padding:0 8px; border-radius:6px;
  font-size:12px; font-weight:500; line-height:1; white-space:nowrap;
}
.tag-green{background:var(--green-soft); color:var(--green)}
.tag-amber{background:var(--amber-soft); color:var(--amber)}
.tag-blue{background:var(--brand-soft); color:var(--brand)}
.tag-red{background:var(--red-soft); color:var(--red)}
.tag-orange{background:#fdf1dd; color:#e07b00}
.tag-gray{background:#f1f3f7; color:var(--ink-3)}
.tag-purple{background:var(--purple-soft); color:var(--purple)}

.dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.dot-green{background:var(--green)}
.dot-red{background:var(--red)}
.dot-amber{background:var(--amber)}

/* ---------- 卡片 ---------- */
.card{
  background:var(--surface); border-radius:var(--r-lg);
  border:1px solid var(--line); box-shadow:var(--shadow-1);
}
.card-pad{padding:20px 22px}
.card-head{
  display:flex; align-items:center; gap:10px;
  padding:16px 22px; border-bottom:1px solid var(--line);
}
.card-title{font-size:14.5px; font-weight:600}
.card-sub{font-size:12px; color:var(--ink-3); font-weight:400}

/* ---------- 表单 ---------- */
.field{display:flex; flex-direction:column; gap:7px}
.field-label{font-size:12.5px; color:var(--ink-2); font-weight:500}
.input{
  height:40px; width:100%; padding:0 12px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:#fff; color:var(--ink); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.input::placeholder{color:var(--ink-4)}
.input:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,107,255,.12)}
textarea.input{height:auto; padding:10px 12px; resize:vertical; line-height:1.6}
select.input{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%238b93a5' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:30px;
}

/* ---------- 空状态 / 加载 ---------- */
.empty{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:54px 20px; color:var(--ink-3); font-size:13px; text-align:center;
}
.empty-ico{
  width:52px; height:52px; border-radius:16px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; color:var(--ink-4);
}

.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 预览环境标识（与线上正式站区分） ---------- */
.preview-badge{
  position:fixed; right:14px; bottom:14px; z-index:900;
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 11px; border-radius:999px;
  background:rgba(28,35,51,.86); color:#fff;
  font-size:11.5px; letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(20,28,50,.22);
  backdrop-filter:blur(6px);
}
.preview-badge i{
  width:5px; height:5px; border-radius:50%; background:#34d399; flex:none;
  box-shadow:0 0 0 3px rgba(52,211,153,.22);
}
@media (max-width:640px){
  .preview-badge{left:50%; right:auto; transform:translateX(-50%); bottom:calc(76px + env(safe-area-inset-bottom))}
}
@media print{.preview-badge{display:none}}

/* ---------- 通用动画 ---------- */
.fade-in{animation:fadeIn .28s ease both}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}