/* 麦子动学 —— 设计令牌与基础组件
   视觉方向：中国中小学教室 + 实验记录本。
   材料：坐标纸网格、卡尺刻度、板书墨、麦穗金。 */

:root{
  --ink:#16243D;
  --ink-soft:#2A3B5C;
  --paper:#F2F5FA;
  --card:#FFFFFF;
  --line:#DCE3EE;
  --line-soft:#E9EEF6;
  --chalk:#2E6BE6;
  --chalk-d:#1F50B8;
  --chalk-soft:#E7EEFD;
  --wheat:#E8A33D;
  --wheat-soft:#FDF2E2;
  --sprout:#12A594;
  --sprout-soft:#E2F5F2;
  --alert:#D94F3D;
  --alert-soft:#FDECEA;
  --text:#1B2637;
  --muted:#5F6E88;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(22,36,61,.04), 0 8px 24px -18px rgba(22,36,61,.35);
  --shadow-lift:0 2px 6px rgba(22,36,61,.06), 0 18px 40px -24px rgba(22,36,61,.45);
  --font-sans:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --rail-w:216px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--paper);
  background-image:
    linear-gradient(rgba(46,107,230,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,107,230,.045) 1px, transparent 1px);
  background-size:26px 26px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.015em}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em}
[hidden]{display:none !important}

/* ---------- 启动遮罩 ---------- */
.boot{position:fixed;inset:0;display:grid;place-content:center;gap:14px;justify-items:center;
  background:var(--paper);z-index:80;color:var(--muted);font-size:14px}
.boot-mark{display:flex;gap:7px;align-items:flex-end;height:26px}
.boot-mark .tick{width:3px;background:var(--chalk);border-radius:2px;animation:tick 1.1s ease-in-out infinite}
.boot-mark .tick:nth-child(1){height:10px}
.boot-mark .tick:nth-child(2){height:16px;animation-delay:.1s}
.boot-mark .tick:nth-child(3){height:24px;animation-delay:.2s;background:var(--wheat)}
.boot-mark .tick:nth-child(4){height:18px;animation-delay:.3s}
.boot-mark .tick:nth-child(5){height:12px;animation-delay:.4s}
.boot-mark .tick:nth-child(6){height:8px;animation-delay:.5s}
@keyframes tick{0%,100%{transform:scaleY(.55);opacity:.55}50%{transform:scaleY(1);opacity:1}}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 16px;border-radius:var(--radius-sm);border:1px solid transparent;
  font-size:14px;font-weight:600;cursor:pointer;transition:.16s ease;background:#fff;color:var(--text)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--chalk);color:#fff;box-shadow:0 6px 16px -10px rgba(46,107,230,.9)}
.btn-primary:hover:not(:disabled){background:var(--chalk-d)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover:not(:disabled){border-color:var(--chalk);color:var(--chalk)}
.btn-quiet{background:transparent;color:var(--muted);border-color:transparent}
.btn-quiet:hover:not(:disabled){background:rgba(22,36,61,.06);color:var(--ink)}
.btn-danger{background:var(--alert-soft);color:var(--alert);border-color:#F6D5D0}
.btn-danger:hover:not(:disabled){background:#FBDDD9}
.btn-wheat{background:var(--wheat);color:#3A2A08}
.btn-sm{padding:6px 11px;font-size:13px;border-radius:8px}
.btn-block{width:100%}
.icon-btn{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;
  color:var(--muted);font-size:18px;line-height:1;cursor:pointer;transition:.15s}
.icon-btn:hover{border-color:var(--chalk);color:var(--chalk)}
.link{color:var(--chalk);font-size:13px;cursor:pointer;background:none;border:none;padding:0}
.link:hover{text-decoration:underline}

/* ---------- 表单 ---------- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field>span{font-size:12.5px;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:15px;font-family:inherit;background:#fff;color:var(--text);transition:.15s}
.field textarea{min-height:88px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--chalk);box-shadow:0 0 0 3px var(--chalk-soft)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.form-msg{font-size:13px;color:var(--alert);min-height:18px;margin-top:8px}
.form-msg.is-ok{color:var(--sprout)}
.form-note{font-size:12.5px;color:var(--muted);background:var(--wheat-soft);
  border-left:3px solid var(--wheat);padding:8px 10px;border-radius:0 8px 8px 0;margin-bottom:12px}

/* ---------- 卡片 / 网格 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow)}
.card-tight{padding:13px}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.section-title{display:flex;align-items:baseline;gap:10px;margin:22px 0 12px;position:relative;
  padding-left:11px}
.section-title::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;
  border-radius:2px;background:var(--wheat)}
.section-title h3{font-size:16px}
.section-title .mono{color:var(--muted)}
.empty{padding:34px 18px;text-align:center;color:var(--muted);font-size:14px;
  border:1px dashed var(--line);border-radius:var(--radius);background:rgba(255,255,255,.6)}
.empty b{display:block;color:var(--ink);margin-bottom:6px;font-size:15px}
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:12px}

/* ---------- 徽标 ---------- */
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  font-size:12px;font-weight:600;background:var(--chalk-soft);color:var(--chalk-d);white-space:nowrap}
.tag-wheat{background:var(--wheat-soft);color:#8A5B12}
.tag-sprout{background:var(--sprout-soft);color:#0B7A6D}
.tag-alert{background:var(--alert-soft);color:#A8362A}
.tag-plain{background:#EEF1F7;color:var(--muted)}
.tag-ink{background:var(--ink);color:#E8EDF7}

/* ---------- 签名元素：学段刻度尺（学前 → 初3 的十格标尺） ---------- */
.scale{position:relative;display:flex;align-items:flex-end;gap:3px;height:24px;padding-bottom:4px}
.scale::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#C7D2E5}
.scale i{flex:1;min-width:3px;height:7px;background:#DEE5F1;border-radius:1px;
  transition:.25s ease}
.scale i.tall{height:11px}
.scale i.on{background:var(--chalk)}
.scale i.now{height:19px;background:var(--wheat);
  box-shadow:0 0 0 3px rgba(232,163,61,.16)}
.scale-legend{display:grid;grid-template-columns:repeat(10,1fr);margin-top:4px;
  font-size:10px;color:#7C8AA5;font-weight:600}
.scale-legend span{white-space:nowrap}

/* ---------- 进度轨（使用期） ---------- */
.track{height:6px;border-radius:3px;background:#E1E8F3;overflow:hidden;margin-top:4px}
.track i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--chalk),#5B8CF0)}
.track i.is-wheat{background:linear-gradient(90deg,#E9A93F,#F0C173)}

/* ---------- 抽屉 ---------- */
.drawer{position:fixed;inset:0;z-index:60}
.drawer-mask{position:absolute;inset:0;background:rgba(16,26,44,.55);backdrop-filter:blur(3px);
  animation:fade .18s ease}
.drawer-body{position:absolute;top:0;right:0;height:100%;width:min(560px,94vw);background:#fff;
  display:flex;flex-direction:column;box-shadow:-20px 0 50px -30px rgba(16,26,44,.6);
  animation:slide .22s cubic-bezier(.22,.7,.3,1)}
/* 课件预览用宽版：给课件尽量大的显示区域 */
.drawer-body.is-wide{width:min(1240px,96vw)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slide{from{transform:translateX(30px);opacity:.6}to{transform:none;opacity:1}}
.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.drawer-head h3{font-size:16px}
.drawer-content{padding:18px;overflow:auto;flex:1}
@media (max-width:600px){
  .drawer-body{width:100%;top:auto;bottom:0;height:88vh;border-radius:18px 18px 0 0;
    animation:up .24s cubic-bezier(.22,.7,.3,1)}
  @keyframes up{from{transform:translateY(40px)}to{transform:none}}
}

/* ---------- 提示条（右上角，避免遮挡内容） ---------- */
.toasts{position:fixed;top:74px;right:22px;z-index:90;display:flex;flex-direction:column;
  gap:8px;align-items:flex-end;pointer-events:none;max-width:min(360px,88vw)}
.toast{background:var(--ink);color:#fff;padding:10px 16px;border-radius:11px;font-size:13.5px;
  box-shadow:var(--shadow-lift);animation:pop .2s ease;text-align:left}
.toast.err{background:var(--alert)}
.toast.ok{background:var(--sprout)}
@keyframes pop{from{transform:translateX(10px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:600px){.toasts{top:auto;bottom:84px;right:12px;left:12px;align-items:stretch}
  .toast{text-align:center}}

/* ---------- 课件全屏预览 ---------- */
.preview-full{position:fixed;inset:0;z-index:80;background:rgba(16,26,44,.82);
  display:flex;flex-direction:column;padding:14px 16px 16px;gap:10px}
.preview-full-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  color:#E8EDF7;flex-wrap:wrap}
.preview-full-head b{font-size:15px}
.preview-full iframe{flex:1;width:100%;border:0;border-radius:12px;background:#fff}
.preview-full .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);
  color:#E8EDF7}
.preview-full .btn-ghost:hover{background:rgba(255,255,255,.2);color:#fff}

/* ---------- 加载骨架 ---------- */
.loading{padding:40px;text-align:center;color:var(--muted);font-size:13px}
.skeleton{background:linear-gradient(90deg,#EDF1F7 25%,#F6F8FC 37%,#EDF1F7 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:8px;height:14px}
@keyframes shimmer{from{background-position:100% 50%}to{background-position:0 50%}}

/* ---------- 正文排版（自测卡等） ---------- */
.prose{font-size:14.5px;line-height:1.75;color:var(--text)}
.prose h4{font-size:14px;margin:16px 0 6px;color:var(--ink)}
.prose ul,.prose ol{margin:6px 0;padding-left:20px}
.prose li{margin:3px 0}
.prose pre{background:#F5F7FB;border:1px solid var(--line-soft);border-radius:10px;
  padding:12px;overflow:auto;font-family:var(--font-mono);font-size:12.5px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right;font-weight:600}

/* 关于 / 致谢 */
.credits{display:grid;gap:10px;margin-top:10px}
.credit-item{border-left:3px solid var(--wheat);background:#FAFBFE;border-radius:0 10px 10px 0;
  padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.credit-item b{font-size:13.5px;color:var(--ink)}
.credit-item span{font-size:12.5px;color:var(--muted);line-height:1.6}
.credit-item a{font-size:12.5px;color:var(--chalk);word-break:break-all}
.credit-item a:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
:focus-visible{outline:2px solid var(--chalk);outline-offset:2px}