/* ==========================================================================
   ppt-maker · 怡课 Adeck                    —— 面向「不熟悉电脑的中学老师」
   --------------------------------------------------------------------------
   视觉体系 = **DSH（DeepSeek Harness GUI）**：
     **2026-10-19 起：品牌色 = 怡课珊瑚红**（白底 + 品牌红主按钮 + 灰蓝边框/文字；
     见下面 :root 的「怡课品牌色板」与已改值的 DSH token）。原先的"主按钮是黑的"
     是 DSH 风格，用户反馈与粉红 logo 不搭，已换成品牌红。圆角/阴影/字体仍照 DSH。
   token 取值来源（2026-10-16 逐一核对过）：
     deps/dsh/node_modules/@deepseek-ai/dsh-client-ui-theme/lib/client.js
     deps/dsh/node_modules/@deepseek-ai/dsh-client-ui-primitives/lib/*.module.css
   --------------------------------------------------------------------------
   ⚠️ 一条有意为之的取舍：**取 DSH 的风格，尺寸放大一档。**
     DSH 是开发者工具（11–14px 小字、36px 控件）；我们的用户是不懂电脑、
     年龄偏大的中学老师，还要在教室现场用。所以：
       配色 / 圆角 / 边框 / 阴影 / 字体栈 → 照 DSH 取值（这是"风格"）
       字号 / 点击目标                    → 按老师放大（正文 16px、按钮 ≥44px）
   ⚠️ 不做暗色模式：老师场景要确定性（教室电脑设了深色，界面不该跟着变）。
     将来要加，只需在下面补一套 [data-theme="dark"] 的 alias 值。
   ========================================================================== */

:root{
  /* ── DSH 静态色板（原名照抄，便于日后与 DSH 对照） ── */
  --dsw-static-neutral-bluish-00:#fff;
  --dsw-static-neutral-bluish-50:#f7f8fa;
  --dsw-static-neutral-bluish-60:#f5f6f7;
  --dsw-static-neutral-bluish-75:#f1f3f5;
  --dsw-static-neutral-bluish-100:#ebeef2;
  --dsw-static-neutral-bluish-150:#e9ecf2;
  --dsw-static-neutral-bluish-200:#e1e5ee;
  --dsw-static-neutral-bluish-400:#adb2b8;
  --dsw-static-neutral-bluish-600:#81858c;
  --dsw-static-neutral-bluish-700:#61666b;
  --dsw-static-neutral-bluish-750:#43454a;
  --dsw-static-neutral-bluish-800:#353638;
  --dsw-static-neutral-bluish-1000:#1f2430;
  --dsw-static-deepseek-50:#edf3fe;
  --dsw-static-deepseek-400:#7aaaff;
  --dsw-static-deepseek-500:#4176e6;
  --dsw-static-red-600:var(--yk-danger);
  --dsw-static-red-400:#f25a5a;
  --dsw-static-green-500:#22c55e;
  --dsw-static-amber-500:#f59e0b;
  --dsw-static-neutral-300:#d4d4d4;

  /* ── DSH 语义 alias（亮色） ── */
  --dsw-alias-bg-base:#fff;                       /* 页面底 */
  --dsw-alias-bg-layer-1:#fff;                    /* 卡片/抬升面 */
  --dsw-alias-bg-overlay:#f2f4f7;
  --dsw-alias-border-l1:rgba(31,36,48,.08);                /* 主边框（4% 黑） */
  --dsw-alias-border-l2:rgba(31,36,48,.14);                /* 强边框（10% 黑） */
  --dsw-alias-label-primary:#1f2430;              /* 主文本 */
  --dsw-alias-label-primary-foreground:#fff;      /* 黑底上的字 */
  --dsw-alias-label-secondary:#5b6472;            /* 次文本 */
  --dsw-alias-label-tertiary:#98a1ae;             /* 三级文本 */
  --dsw-alias-brand-primary:var(--yk-brand);              /* ★ 主按钮底色＝黑，不是蓝 */
  --dsw-alias-button-primary-fill:var(--yk-brand-strong);
  --dsw-alias-button-primary-hover:var(--yk-brand-hover);
  --dsw-alias-link:var(--yk-link);                       /* 链接/信息 */
  --dsw-alias-state-business-primary:var(--yk-brand-strong);
  --dsw-alias-state-error-primary:var(--yk-danger);
  --dsw-alias-state-success-primary:#22c55e;
  --dsw-alias-state-warn-primary:#f59e0b;
  --dsw-alias-state-warn-label:#dd8629;   /* amber-600：DSH 用它画浅底上的 warn 字/图标 */
  --dsw-specific-sidebar-fill:#fafbfc;            /* 顶栏底 */
  --dsw-specific-sidebar-nav-item-active:var(--yk-brand-soft); /* 导航选中 */
  --dsw-specific-sidebar-nav-item-hover:#f4f5f8;
  --dsw-alias-interactive-bg-hover:rgba(229,72,77,.07);
  --dsw-alias-interactive-bg-active:rgba(229,72,77,.13);

  /* ── 圆角 / 阴影 / 字体（照抄 DSH） ── */
  --dsw-radius-xs:4px; --dsw-radius-sm:8px; --dsw-radius-md:12px;
  --dsw-radius-lg:16px; --dsw-radius-xl:20px;
  --dsw-shadow-lv1:0 2px 4px 0 #0000000d;
  --dsw-shadow-lv2:0 4px 12px 0 #00000005, 0 2px 8px 0 #0000000a;
  --dsw-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* ── 本项目派生：提示条浅底（DSH 色 6% 铺在白上，手算好写成十六进制，
        避免 color-mix 在老浏览器上不生效） ── */
  --ppmk-tint-error:#fdf0ef;
  --ppmk-tint-warn:#fdf7ec;
  --ppmk-tint-ok:#eefaf1;
  --ppmk-tint-info:#f2f5fa;
  /* 额度上限框的描边：amber 35%（4% 黑太淡，这张必须一眼看到） */
  --ppmk-warn-border:rgba(221,134,41,.4);

  /* ══════════════════════════════════════════════════════════════════════
     怡课品牌色板（2026-10-19 用户要求：白底 + 珊瑚红，去掉黑色块）。
     用户反馈：黑按钮/黑气泡/深色预览区 与粉红 logo 不搭，要更清爽。
     ★ 做法：**直接改上面 :root 里的 DSH token 值**（不逐处改硬编码）——
       主页 / 登录 / 注册 / 指南 / 教程 / 设置弹窗 引用同一套 token，全站自动跟随。
     ★ 对比度（WCAG AA）：品牌红 #e5484d 上白字只有 3.9:1 →
       按钮填充用更深的 `--yk-brand-strong` #c9333b（白字 **5.0:1** ✅）；
       #e5484d 只用于标识/指示条/小面积强调（≮ 大图形不要求 AA）。
     ══════════════════════════════════════════════════════════════════════ */
  --yk-brand:#e5484d;          /* 品牌标识色：logo 同色相、指示条、小强调（不用于白字底） */
  --yk-brand-strong:#c9333b;   /* 主按钮填充：白字 5.0:1（AA） */
  --yk-brand-hover:#b02a33;    /* 主按钮 hover：白字 6.3:1 */
  --yk-brand-soft:#fdeceb;     /* 浅红底：用户气泡 / 选中态 / 悬停 */
  --yk-brand-line:#f6c9c6;     /* 浅红边 */
  --yk-gold:#e0a83c;           /* 金色点缀（极少） */
  --yk-text:#1f2430;           /* 主文字（深灰蓝，不用纯黑；白底 15.3:1） */
  --yk-text-2:#5b6472;         /* 次要文字（白底 5.6:1） */
  --yk-text-3:#98a1ae;         /* 弱文字/占位（辅助信息，非正文） */
  --yk-line:#e8eaee;           /* 边框/分割线 */
  --yk-bg:#ffffff;             /* 页面底 */
  --yk-bg-soft:#f7f8fa;        /* 侧栏/分区底 */
  --yk-bg-stage:#eef0f3;       /* 课件预览区外围底（课件本体不变） */
  --yk-danger:#d92d20;         /* 危险操作（删除/停止） */
  --yk-link:#c9333b;           /* 链接/可点强调（白底 5.0:1） */

  /* 两个 DSH 里没定义、但我们组件引用的 alias（补上，避免落到灰/黑 fallback） */
  --dsw-alias-nav-active-bg:var(--yk-brand-soft);   /* 侧栏当前项 */
  --dsw-alias-bg-sidebar:var(--yk-bg-soft);         /* 左栏底 */
  --dsw-alias-bg-elevated:var(--yk-bg-soft);        /* 气泡默认底 */

  /* ── 尺寸：老师档（不是 DSH 的开发者密度） ── */
  --ppmk-tap:44px;          /* 所有可点元素的最小高度（验收清单 3.2） */
  --ppmk-tap-lg:48px;
  --ppmk-text:16px;         /* 正文 */
  --ppmk-text-sm:14px;      /* 次要说明 */
  --ppmk-text-xs:13.5px;    /* 页脚 */
}

::selection{background:var(--yk-brand-soft,#fdeceb);color:var(--yk-text,#1f2430)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--dsw-static-neutral-bluish-50); color:var(--dsw-alias-label-primary);
  font:var(--ppmk-text)/1.65 var(--dsw-font-family);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
a{color:var(--dsw-alias-link)}
:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary); outline-offset:2px; border-radius:var(--dsw-radius-xs)}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ─────────────────────────── 顶栏（像 DSH 的标题栏） ─────────────────────────── */
.topbar{
  background:var(--dsw-specific-sidebar-fill);
  border-bottom:1px solid var(--dsw-alias-border-l1);
}
.topbar__in{
  max-width:1120px;margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none;color:inherit}
.brand__logo{height:38px;width:auto;display:block;flex:none;border-radius:var(--dsw-radius-sm)}
.brand__txt{display:flex;flex-direction:column;justify-content:center;min-width:0}
.brand__name{display:block;font-size:18px;font-weight:650;color:var(--dsw-alias-label-primary);line-height:1.3;white-space:nowrap}
.brand__sub{display:block;font-size:var(--ppmk-text-sm);color:var(--dsw-alias-label-tertiary);line-height:1.3}
.topbar__spacer{flex:1 1 auto;min-width:8px}
.who{font-size:var(--ppmk-text-sm);color:var(--dsw-alias-label-secondary);white-space:nowrap}
.who b{color:var(--dsw-alias-label-primary);font-weight:650}

/* ─────────────────────────── 导航（桌面在顶栏） ─────────────────────────── */
/* 选中态＝DSH 侧栏的样子：浅灰底 + 深色字，**不是**蓝色药丸 */
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--ppmk-tap); padding:0 14px;
  font-size:15.5px; font-weight:550; color:var(--dsw-alias-label-secondary); text-decoration:none;
  background:transparent; border:1px solid transparent; border-radius:var(--dsw-radius-md);
  transition:background .15s,color .15s,border-color .15s;
}
.nav a svg{width:19px;height:19px;flex:none}
.nav a:hover{background:var(--dsw-specific-sidebar-nav-item-hover);color:var(--dsw-alias-label-primary)}
.nav a:active{background:var(--dsw-alias-interactive-bg-active)}
.nav a[aria-current="page"]{
  background:var(--dsw-specific-sidebar-nav-item-active);
  color:var(--dsw-alias-label-primary); border-color:transparent; font-weight:650;
}

/* ─────────────────────────── 版心 ─────────────────────────── */
.wrap{max-width:1120px;margin:0 auto;padding:26px 20px 60px}
.wrap--narrow{max-width:760px}
.page-head{margin:0 0 6px;font-size:26px;line-height:1.3;font-weight:650;color:var(--dsw-alias-label-primary)}
.page-desc{margin:0 0 22px;font-size:15px;color:var(--dsw-alias-label-secondary)}

/* ─────────────────────────── 按钮 ─────────────────────────── */
.btn{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--ppmk-tap); padding:10px 18px;
  font:inherit;font-size:var(--ppmk-text);font-weight:550;line-height:1.3;
  border-radius:var(--dsw-radius-md);border:1px solid transparent;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
  user-select:none;-webkit-tap-highlight-color:transparent;
}
.btn svg{width:19px;height:19px;flex:none}
.btn:active{background:var(--dsw-alias-interactive-bg-active)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}

/* ★ 主按钮＝黑底白字（DSH 最显著的识别点） */
.btn--primary{background:var(--dsw-alias-button-primary-fill);color:var(--dsw-alias-label-primary-foreground)}
.btn--primary:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover)}
.btn--primary:active{background:var(--dsw-alias-button-primary-hover)}

/* 类名沿用 .btn--gold（HTML 不动）：在 DSH 体系里它就是主按钮 —— 页面上的主要动作 */
.btn--gold{background:var(--dsw-alias-button-primary-fill);color:var(--dsw-alias-label-primary-foreground)}
.btn--gold:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover)}
.btn--gold:active{background:var(--dsw-alias-button-primary-hover)}

/* 次要按钮：透明底 + 10% 黑描边 + 主文本色 */
.btn--ghost{background:var(--dsw-alias-bg-layer-1);border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary)}
.btn--ghost:hover:not(:disabled){background:var(--dsw-specific-sidebar-nav-item-hover)}

/* 危险动作：只用红，不做大面积色块 */
.btn--danger{background:var(--dsw-alias-bg-layer-1);border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-state-error-primary)}
.btn--danger:hover:not(:disabled){background:var(--ppmk-tint-error);border-color:var(--dsw-static-red-400)}
.btn--danger-solid{background:var(--dsw-alias-state-error-primary);color:#fff;border-color:var(--dsw-alias-state-error-primary)}
.btn--danger-solid:hover:not(:disabled){filter:brightness(.94)}

.btn--lg{min-height:var(--ppmk-tap-lg);padding:12px 24px;font-size:17px;font-weight:600}
.btn--lg svg{width:21px;height:21px}
.btn--sm{min-height:var(--ppmk-tap);padding:8px 14px;font-size:15px;border-radius:var(--dsw-radius-sm)}
.btn--sm svg{width:18px;height:18px}
.btn--block{display:flex;width:100%}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ─────────────────────────── 输入 ─────────────────────────── */
.field{margin-bottom:18px}
.field__label{display:block;margin-bottom:7px;font-size:var(--ppmk-text);font-weight:600;color:var(--dsw-alias-label-primary)}
.field__hint{margin:7px 0 0;font-size:var(--ppmk-text-sm);color:var(--dsw-alias-label-secondary);line-height:1.6}

/* 勾选框行：整行可点、≥44px，不让老师去瞄那个小方块 */
.check{
  display:flex;align-items:center;gap:10px;min-height:var(--ppmk-tap);margin:0 0 18px;
  font-size:15px;color:var(--dsw-alias-label-primary);line-height:1.5;cursor:pointer;
}
.check input[type="checkbox"]{flex:none;width:22px;height:22px;margin:0;accent-color:var(--dsw-alias-brand-primary);cursor:pointer}

/* 就地报错：红字紧贴出问题的那一格。
   手机屏幕上「顶部的提示条」经常在屏幕外，就地写一句才不会被漏看 */
.field__err{
  margin:7px 0 0;font-size:15px;font-weight:600;color:var(--dsw-alias-state-error-primary);line-height:1.6;
}
.field__err::before{content:"！";display:inline-block;margin-right:5px;font-weight:700}

.input,.textarea{
  display:block;width:100%;padding:12px 14px;
  font:inherit;font-size:var(--ppmk-text);line-height:1.5;color:var(--dsw-alias-label-primary);
  background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);
  border-radius:var(--dsw-radius-md);
  transition:border-color .15s;
}
.input{min-height:var(--ppmk-tap-lg)}
.textarea{min-height:150px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--dsw-static-neutral-bluish-600)}
/* focus 只把边框加深成"信息蓝"，**不做发光圈**（DSH 就是这么做的） */
.input:focus,.textarea:focus{outline:none;border-color:var(--dsw-alias-state-business-primary)}
/* 填错的框：红边 + 淡红底，配合上方提示条 —— 老师一眼知道该改哪一格 */
.input--bad{border-color:var(--dsw-static-red-400);background:var(--ppmk-tint-error)}
.input--bad:focus{border-color:var(--dsw-alias-state-error-primary)}
.input--key{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:15px;letter-spacing:.02em}

/* ─────────────────────── 发题目（上传区） ─────────────────────── */
/* 虚线框就是"可以拖进来"的信号，不再写说明书；
   超出限制时才在下面就地给一句人话（.drop__msg） */
.drop{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:20px 16px;text-align:center;
  border:1px dashed var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);
  background:var(--dsw-alias-bg-layer-1);
  transition:background .15s,border-color .15s;
}
.drop--over{background:var(--ppmk-tint-info);border-color:var(--dsw-alias-state-business-primary)}
.drop__line{margin:0;font-size:15px;color:var(--dsw-alias-label-secondary)}
/* Word/PPT 那行引导：小一号、更淡，不抢主说明 */
.drop__line--sub{font-size:var(--ppmk-text-xs);color:var(--dsw-alias-label-tertiary);line-height:1.6}
.drop__msg{margin:10px 0 0;font-size:var(--ppmk-text-sm);font-weight:600;line-height:1.6;
  color:var(--dsw-alias-state-error-primary)}
/* 不是报错、只是告知（例如"图太大，我缩小了一下再发"） */
.drop__msg--info{font-weight:500;color:var(--dsw-alias-label-secondary)}
/* 已发文件列表 */
.files{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.files__item{
  display:flex;align-items:center;gap:10px;padding:7px 8px 7px 10px;
  background:var(--dsw-static-neutral-bluish-50);
  border:1px solid var(--dsw-alias-border-l1);border-radius:var(--dsw-radius-sm);
}
.files__item--pending{color:var(--dsw-alias-label-secondary)}
.files__icon{flex:none;width:24px;height:24px;display:grid;place-items:center;color:var(--dsw-alias-label-secondary)}
.files__icon svg{width:20px;height:20px}
.files__icon .spin{width:18px;height:18px;border-width:2px}
/* 图片附件给真缩略图（objectURL 预览），老师一眼认出"这就是我那张题图" */
.files__thumb{flex:none;width:44px;height:44px;border-radius:var(--dsw-radius-sm);overflow:hidden;
  border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-static-neutral-bluish-50)}
.files__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.files__meta{flex:1;min-width:0}
.files__name{display:block;font-size:15px;font-weight:600;color:var(--dsw-alias-label-primary);overflow-wrap:anywhere}
.files__sub{display:block;font-size:var(--ppmk-text-xs);color:var(--dsw-alias-label-secondary)}
.files__del{flex:none}

/* ─────────────────────────── 卡片（白底，不靠灰底分层） ─────────────────────────── */
.card{
  background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);
  border-radius:var(--dsw-radius-lg);box-shadow:var(--dsw-shadow-lv1);padding:22px;
}
.card + .card{margin-top:18px}
.card__title{margin:0 0 6px;font-size:19px;font-weight:650;color:var(--dsw-alias-label-primary);line-height:1.4}
.card__desc{margin:0 0 16px;font-size:15px;color:var(--dsw-alias-label-secondary);line-height:1.65}

/* 课件卡片 */
.deck{
  display:flex;flex-direction:column;gap:14px;
  background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);
  border-radius:var(--dsw-radius-lg);box-shadow:var(--dsw-shadow-lv1);padding:20px;
  transition:box-shadow .18s,border-color .18s;
}
.deck:hover{box-shadow:var(--dsw-shadow-lv2);border-color:var(--dsw-alias-border-l2)}
.deck__top{display:flex;align-items:flex-start;gap:13px}
.deck__icon{
  flex:none;width:42px;height:42px;border-radius:var(--dsw-radius-md);display:grid;place-items:center;
  background:var(--dsw-static-neutral-bluish-75);border:1px solid var(--dsw-alias-border-l1);
}
.deck__icon svg{width:22px;height:22px;stroke:var(--dsw-alias-label-primary)}
.deck__meta{min-width:0;flex:1}
.deck__title{
  margin:0 0 5px;font-size:18px;font-weight:650;line-height:1.45;color:var(--dsw-alias-label-primary);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.deck__date{font-size:var(--ppmk-text-sm);color:var(--dsw-alias-label-secondary);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.deck__date svg{width:15px;height:15px;stroke:var(--dsw-alias-label-secondary);flex:none}
.deck__acts{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--dsw-alias-border-l1);padding-top:14px;margin-top:auto}
.deck__acts .btn{flex:1 1 auto;min-width:86px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.grid .deck{height:100%}

/* ─────────────────────────── 提示条（浅底 + 左边框，不用大面积色块） ─────────────────────────── */
.alert{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 15px;border-radius:var(--dsw-radius-md);
  border:1px solid var(--dsw-alias-border-l1);border-left:3px solid var(--dsw-alias-label-tertiary);
  font-size:15px;line-height:1.65;color:var(--dsw-alias-label-primary);
  margin-bottom:18px;
}
.alert svg{width:20px;height:20px;flex:none;margin-top:2px;stroke:var(--dsw-alias-label-tertiary)}
.alert__body{min-width:0;flex:1}
.alert__body > :first-child{margin-top:0}
.alert__body > :last-child{margin-bottom:0}
.alert b{font-weight:650}
.alert--info{background:var(--ppmk-tint-info);border-left-color:var(--dsw-alias-state-business-primary)}
.alert--info svg{stroke:var(--dsw-alias-state-business-primary)}
.alert--ok{background:var(--ppmk-tint-ok);border-left-color:var(--dsw-alias-state-success-primary)}
.alert--ok svg{stroke:var(--dsw-alias-state-success-primary)}
.alert--warn{background:var(--ppmk-tint-warn);border-left-color:var(--dsw-alias-state-warn-label)}
.alert--warn svg{stroke:var(--dsw-alias-state-warn-label)}
.alert--danger{background:var(--ppmk-tint-error);border-left-color:var(--dsw-alias-state-error-primary)}
.alert--danger svg{stroke:var(--dsw-alias-state-error-primary)}
.alert .btn{margin-top:11px}
.alert__acts{display:flex;gap:10px;flex-wrap:wrap}

/* ─────────────────────────── 空状态 ─────────────────────────── */
.empty{
  text-align:center;padding:48px 24px;background:var(--dsw-alias-bg-layer-1);
  border:1px solid var(--dsw-alias-border-l1);border-radius:var(--dsw-radius-lg);
}
.empty__icon{width:68px;height:68px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  background:var(--dsw-static-neutral-bluish-75)}
.empty__icon svg{width:34px;height:34px;stroke:var(--dsw-alias-label-tertiary)}
.empty__title{margin:0 0 8px;font-size:20px;font-weight:650;color:var(--dsw-alias-label-primary)}
.empty__desc{margin:0 auto 22px;font-size:15px;color:var(--dsw-alias-label-secondary);max-width:400px;line-height:1.7}

/* ─────────────────────────── 生成进度（核心体验） ─────────────────────────── */
.stream{display:flex;flex-direction:column;gap:16px}
.streambox{
  background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);
  border-radius:var(--dsw-radius-lg);box-shadow:var(--dsw-shadow-lv1);overflow:hidden;
}
.streambox__head{
  display:flex;align-items:center;gap:10px;padding:12px 18px;
  background:var(--dsw-specific-sidebar-fill);border-bottom:1px solid var(--dsw-alias-border-l1);
}
.streambox__head svg{width:20px;height:20px;flex:none;stroke:var(--dsw-alias-label-secondary)}
.streambox__head h2{margin:0;font-size:16px;font-weight:650;color:var(--dsw-alias-label-primary);flex:1}
.streambox__body{
  padding:16px 18px; font-size:var(--ppmk-text); line-height:1.85;
  max-height:46vh; overflow-y:auto; overscroll-behavior:contain;
  white-space:pre-wrap; word-break:break-word;
}
/* 思考区矮一点：AI 可能想上万字，不能把「正在写的课件」挤出屏幕 */
.streambox__body--thinking{background:var(--dsw-static-neutral-bluish-50);color:var(--dsw-alias-label-secondary);font-size:15px;line-height:1.8;max-height:36vh}
.streambox__none{padding:18px;color:var(--dsw-alias-label-secondary);font-size:15px;font-style:normal}

/* 打字光标：让"正在写"这件事一眼可见 */
.caret{
  display:inline-block;width:.6em;height:1.05em;vertical-align:-.16em;margin-left:2px;
  background:var(--dsw-alias-state-business-primary);border-radius:2px;animation:blink 1.05s steps(1,end) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}

/* 状态行 */
.status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;
  background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);
  border-radius:var(--dsw-radius-lg);box-shadow:var(--dsw-shadow-lv1)}
.status__icon{width:22px;height:22px;flex:none;display:grid;place-items:center}
.status__icon svg{width:22px;height:22px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.status__icon--ok svg{stroke:var(--dsw-alias-state-success-primary)}
.status__icon--bad svg{stroke:var(--dsw-alias-state-error-primary)}
.status__txt{font-size:var(--ppmk-text);font-weight:600;color:var(--dsw-alias-label-primary);flex:1;min-width:180px}
.status__txt small{display:block;font-size:var(--ppmk-text-sm);font-weight:400;color:var(--dsw-alias-label-secondary);margin-top:3px}

/* 转圈 */
.spin{width:20px;height:20px;flex:none;border:2.5px solid var(--dsw-static-neutral-bluish-200);
  border-top-color:var(--dsw-alias-state-business-primary);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}

/* 进度条 */
.prog{margin-top:11px}
.prog__track{height:10px;background:var(--dsw-static-neutral-bluish-100);border-radius:99px;overflow:hidden}
.prog__fill{height:100%;width:0;border-radius:99px;
  background:var(--dsw-alias-state-business-primary);
  transition:width .4s cubic-bezier(.2,.7,.3,1)}
.prog__fill--queued{background:var(--dsw-alias-state-warn-primary)}
.prog__label{margin-top:7px;font-size:var(--ppmk-text-sm);color:var(--dsw-alias-label-secondary)}

/* 排队：琥珀色，和"出错了"的红色区分开 —— 排队是正常的，不要吓老师 */
.alert--queue{background:var(--ppmk-tint-warn);border-left-color:var(--dsw-alias-state-warn-label)}
.alert--queue svg{stroke:var(--dsw-alias-state-warn-label)}

/* 示例提示（一点即用的功能，不是啰嗦文字） */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:11px}
.chip{
  cursor:pointer;font:inherit;font-size:15px;font-weight:500;color:var(--dsw-alias-label-primary);
  background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);border-radius:99px;
  padding:9px 16px;min-height:var(--ppmk-tap);display:inline-flex;align-items:center;
  transition:background .15s,border-color .15s;
}
.chip:hover{background:var(--dsw-specific-sidebar-nav-item-hover);border-color:var(--dsw-alias-border-l2)}
.chip:active{background:var(--dsw-alias-interactive-bg-active)}

/* ─────────────────────────── 对话框 ─────────────────────────── */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(15,17,21,.45)}
.modal__box{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);
  border-radius:var(--dsw-radius-lg);padding:24px;max-width:460px;width:100%;
  box-shadow:var(--dsw-shadow-lv2);animation:pop .18s cubic-bezier(.2,.7,.3,1)}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal__box{animation:none}}
.modal__title{margin:0 0 10px;font-size:20px;font-weight:650;color:var(--dsw-alias-label-primary)}
.modal__body{margin:0 0 20px;font-size:var(--ppmk-text);line-height:1.7;color:var(--dsw-alias-label-secondary)}
.modal__acts{display:flex;gap:12px;flex-wrap:wrap}
.modal__acts .btn{flex:1 1 140px}

/* ─────────────────────────── 其它 ─────────────────────────── */
.kv{display:flex;gap:13px;flex-wrap:wrap;align-items:baseline;margin:0 0 16px}
.kv__k{font-size:var(--ppmk-text-sm);color:var(--dsw-alias-label-secondary);min-width:76px}
.kv__v{font-size:var(--ppmk-text);font-weight:600;color:var(--dsw-alias-label-primary)}
.kv__v code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:15px;
  background:var(--dsw-static-neutral-bluish-50);border:1px solid var(--dsw-alias-border-l1);
  border-radius:var(--dsw-radius-sm);padding:3px 8px}
.divider{height:1px;background:var(--dsw-alias-border-l1);border:0;margin:24px 0}
.foot{max-width:1120px;margin:0 auto;padding:8px 20px 40px;text-align:center;
  color:var(--dsw-alias-label-secondary);font-size:var(--ppmk-text-xs)}
.foot b{color:var(--dsw-alias-label-secondary)}

/* ─────────────────────── 登录 / 注册页（独立版式） ─────────────────────── */
.login-page{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 20px 48px;
  background:var(--dsw-static-neutral-bluish-50);
}
.login-box{width:100%;max-width:430px}
.login-brand{text-align:center;margin-bottom:24px}
.login-brand img{height:60px;width:auto;display:block;margin:0 auto 16px;border-radius:var(--dsw-radius-md)}
.login-brand h1{margin:0;font-size:30px;font-weight:650;color:var(--dsw-alias-label-primary);letter-spacing:.01em}
.login-brand p{margin:10px 0 0;font-size:15px;font-weight:500;color:var(--dsw-alias-label-tertiary)}
/* 品牌下的一道细分隔（原来是金色装饰线，DSH 体系里改成中性） */
.login-rule{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px auto 0}
.login-rule i{display:block;height:1px;border-radius:1px;width:64px;background:var(--dsw-alias-border-l2)}
.login-rule i:last-child{background:var(--dsw-alias-border-l2)}
.login-rule b{display:block;width:8px;height:8px;border-radius:50%;background:var(--yk-brand,#e5484d)}
.login-card{
  background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);
  border-radius:var(--dsw-radius-lg);box-shadow:var(--dsw-shadow-lv2);
  padding:28px 24px;position:relative;
}
.login-note{margin:20px 0 0;text-align:center;font-size:var(--ppmk-text-sm);color:var(--dsw-alias-label-secondary);line-height:1.7}
.login-note a{display:inline-flex;align-items:center;min-height:var(--ppmk-tap);padding:0 8px;
  font-size:15px;font-weight:550;color:var(--dsw-alias-link);text-decoration:none}
.login-note a:hover{text-decoration:underline}
.login-note--soft{margin-top:6px;font-size:var(--ppmk-text-xs);color:var(--dsw-alias-label-secondary)}
/* 底部的注册入口：给有邀请码的老师一条明路（整块 ≥48px，手机上也好点） */
.login-alt{margin:14px 0 0;text-align:center;font-size:15px;color:var(--dsw-alias-label-secondary);line-height:1.6}
.login-alt a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--ppmk-tap-lg);padding:11px 20px;margin-top:8px;
  font-size:16px;font-weight:550;color:var(--dsw-alias-label-primary);text-decoration:none;
  background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);
  border-radius:var(--dsw-radius-md);box-shadow:var(--dsw-shadow-lv1);
}
.login-alt a:hover{background:var(--dsw-specific-sidebar-nav-item-hover)}
.login-alt a:active{background:var(--dsw-alias-interactive-bg-active)}

/* 注册页比登录页长（多一个输入框）：把间距收紧一点点，让 1920×1080 一屏看得全 */
.login-page--compact{padding:24px 20px 16px}
.login-page--compact .login-brand{margin-bottom:16px}
.login-page--compact .login-brand img{height:50px;margin-bottom:12px}
.login-page--compact .login-brand h1{font-size:27px}
.login-page--compact .login-rule{margin-top:12px}
.login-page--compact .login-card{padding:22px 24px}
.login-page--compact .card__desc{margin-bottom:13px}
.login-page--compact .field{margin-bottom:13px}
.login-page--compact .field__hint{margin-top:6px;font-size:var(--ppmk-text-sm)}
.login-page--compact .check{margin-bottom:13px;min-height:var(--ppmk-tap);font-size:15px}
.login-page--compact .login-note{margin-top:12px}
.login-page--compact .login-alt{margin-top:10px}

/* ─────────────────────── 操作指南页（临时过渡页） ─────────────────────── */
/* 四步走 + 每步一个截图占位框；老师可能用手机看，间距和字号都沿用正文档 */
.guide{max-width:720px}
.guide__back{margin:0 0 14px}
.guide__back a{display:inline-flex;align-items:center;min-height:var(--ppmk-tap);
  font-size:15px;font-weight:550;color:var(--dsw-alias-link);text-decoration:none}
.guide__back a:hover{text-decoration:underline}
.guide__step{margin-bottom:18px}
.guide__no{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:9px;
  border-radius:50%;background:var(--dsw-static-neutral-bluish-100);
  color:var(--dsw-alias-label-primary);font-size:14px;font-weight:600;vertical-align:2px}
/* 截图位：虚线框 + 居中提示。补上真图后把整个框换成 <img class="shot" …> */
.shot{
  display:grid;place-items:center;margin-top:14px;min-height:150px;padding:16px;
  border:1px dashed var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);
  background:var(--dsw-static-neutral-bluish-50);
  color:var(--dsw-alias-label-tertiary);font-size:var(--ppmk-text-sm);
}
img.shot{display:block;width:100%;height:auto;padding:0;
  border-style:solid;border-color:var(--dsw-alias-border-l1);background:none}
.guide__foot{margin:22px 0 0;text-align:center;font-size:var(--ppmk-text-xs);
  color:var(--dsw-alias-label-secondary)}

/* ─────────────────────── 窄屏 / 手机 ─────────────────────── */
@media (max-width:760px){
  .topbar__in{padding:9px 14px;gap:10px}
  .brand__logo{height:34px}
  .brand__name{font-size:16.5px}
  .who{display:none}                 /* 手机上顶栏只留「我在哪」，用户名去设置页看 */
  .wrap{padding:20px 14px 40px}
  .page-head{font-size:22px}
  .page-desc{font-size:14.5px;margin-bottom:16px}
  .card,.deck{padding:17px}
  .grid{grid-template-columns:1fr;gap:15px}
  .deck__acts .btn{flex:1 1 100%;min-width:0}
  .streambox__body{max-height:45vh;padding:15px}
  .streambox__body--thinking{max-height:28vh}
  /* 手机上让「停止」独占一行、占满宽度 —— 情急之下要一下就能点到 */
  .status .btn{flex:1 1 100%}
  .empty{padding:38px 18px}
  .empty__title{font-size:19px}
  .login-brand h1{font-size:25px}
  .login-brand img{height:48px}
  .login-card{padding:22px 18px}
  /* 手机上让注册入口整行铺满，指头随便点都中 */
  .login-alt a{width:100%;padding:12px 16px}
  .modal{padding:14px}
  .modal__box{padding:22px 18px}
  .modal__acts .btn{flex:1 1 100%}

  /* 导航下沉为底部 tab：指尖可达，老师不容易迷路（一套 DOM，纯 CSS 切换） */
  .nav{
    position:fixed;left:0;right:0;bottom:0;z-index:120;
    display:flex;gap:4px;flex-wrap:nowrap;
    padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px));
    background:var(--dsw-alias-bg-layer-1);border-top:1px solid var(--dsw-alias-border-l1);
  }
  .nav a{
    flex:1 1 0;min-width:0;flex-direction:column;gap:3px;
    min-height:58px;padding:6px 4px;font-size:13px;font-weight:550;
    border-radius:var(--dsw-radius-md);border-color:transparent;background:transparent;
  }
  .nav a svg{width:22px;height:22px}
  .nav a[aria-current="page"]{background:var(--dsw-specific-sidebar-nav-item-active);color:var(--dsw-alias-label-primary);border-color:transparent}
  body{padding-bottom:88px}
  .foot{padding-bottom:24px}
}
@media (min-width:761px) and (max-width:980px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}