/* ============================================================
   ui.css —— 共享基础组件层（依赖 tokens.css，须先加载）
   覆盖范围：页面骨架 / 按钮 / 表单控件 / 卡片 / 标签 / 反馈 / 弹窗。
   页面专属样式仍留在各页 <style>（后加载，可直接覆盖本层，禁止 !important）。
   类名沿用各页既有词汇（.btn .secondary .danger .tiny .link .tag .pill
   .badge .notice .empty .loading .mask .modal…），避免迁移期改动 JS 模板。

   v2（20260909 · 统一 UI 风格批次A）新增：
   · 卡片四级层级：.card-hero（L1 主卡片）/ .card（L2 功能卡）/
     .card-flat + .rows（L3 信息单元，不逐项加阴影）/ .meta + .group-title（L4 辅助）
   · .is-clickable：可点卡片的统一 hover 语言（边线清晰 + 阴影微升，不位移）
   · .glass：玻璃感，仅顶栏 / 浮动工具条 / 浮层使用
   · .skeleton：骨架静态占位（无闪烁动画，天然尊重 reduced-motion）
   · .reading / .mark / .annot：课文 / 作文等人文内容的编辑感排版层
   · .drawer-mask / .drawer：右侧抽屉，与弹窗同一层级语言
   · 字号对齐 6 档刻度（12.5px → 13px）
   ============================================================ */
*{box-sizing:border-box}
body{margin:0}
a{color:inherit}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(164,91,62,.22)}
input[type="radio"]{accent-color:var(--accent)}
input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;padding:0;margin:0;border:1.5px solid var(--line-strong);border-radius:4.5px;background:#fff;cursor:pointer;vertical-align:-3px;display:inline-block;position:relative;transition:background-color var(--dur-fast) var(--ease-ui),border-color var(--dur-fast) var(--ease-ui)}
input[type=checkbox]:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
input[type=checkbox]:checked::after{content:"";position:absolute;inset:1px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.5-5'/%3E%3C/svg%3E");animation:ui-check-draw .16s ease-out both}
@keyframes ui-check-draw{0%{opacity:0;transform:scale(.86)}100%{opacity:1;transform:scale(1)}}
input[type=checkbox]:focus-visible{outline:var(--focus-ring);outline-offset:2px}
input[type=checkbox]:disabled{background:var(--card2);border-color:var(--line);cursor:not-allowed}
input[type=checkbox]:disabled:checked{background:var(--line-strong);border-color:var(--line-strong)}
@media (prefers-reduced-motion:reduce){input[type=checkbox]{transition:none}input[type=checkbox]:checked::after{animation:none!important}}

/* ---------- 页面骨架：容器 / 页头 / 操作行 ---------- */
.shell{max-width:1220px;margin:0 auto;padding:var(--shell-pad)}
.top{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:20px}
.top h1{font-family:var(--font-serif);font-size:var(--fs-h1);margin:0}
.sub{color:var(--muted);font-size:var(--fs-md);margin-top:6px;line-height:1.6}
.actions,.toolbar,.row-actions{display:flex;gap:9px;align-items:center}
.toolbar{flex-wrap:wrap;margin-bottom:14px}
.search{flex:1;min-width:180px}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px;color:var(--muted);font-size:var(--fs-md);flex-wrap:wrap}

/* ---------- 按钮 ---------- */
/* 控件基座：按钮与输入框共用一套边框 / 圆角 / 内边距 / 高度 */
.btn,input,select,textarea{border:1px solid var(--line);background:#fff;border-radius:var(--control-radius);padding:var(--control-pad-y) var(--control-pad-x);font:inherit;color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:6px;border:0;background:var(--accent);color:#fff;cursor:pointer;text-decoration:none;transition:background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.btn:hover{background:var(--accent2)}
.btn:active{transform:translateY(1px)}
.btn.secondary,.link{background:#fff;color:var(--accent);border:1px solid var(--line)}
.btn.secondary:hover{border-color:var(--accent2);color:var(--accent2);background:#fff}
.btn.danger{background:var(--bad)}
.btn.danger:hover{background:var(--bad-strong)}
.btn.tiny{padding:5px 9px;font-size:var(--fs-xs);border-radius:var(--radius-sm)}
.link{display:inline-block;cursor:pointer;padding:5px 8px;border-radius:var(--radius-sm);font-size:var(--fs-md);white-space:nowrap;text-decoration:none}
.link:hover{color:var(--accent2);border-color:var(--accent2)}
/* 禁用：属性与类双轨（各页 JS 已在用两种写法） */
.btn[disabled],.btn.disabled,.link[disabled],.link.disabled{opacity:.55;cursor:wait;pointer-events:none}
/* 加载态：转圈前缀，配合 aria-busy / 文案使用 */
.btn.is-loading::before,.link.is-loading::before{content:"";width:12px;height:12px;flex:none;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 55%,currentColor 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.2px),#000 calc(100% - 2.2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.2px),#000 calc(100% - 2.2px));animation:ui-spin .75s linear infinite}
@keyframes ui-spin{to{transform:rotate(1turn)}}

/* ---------- 表单控件状态 ---------- */
input:disabled,select:disabled,textarea:disabled{background:var(--card2);color:var(--ink-disabled);cursor:not-allowed}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"],.input-error{border-color:var(--bad)}
.input-error:focus-visible{outline-color:rgba(163,63,50,.35)}
.req::after{content:" *";color:var(--bad)}

/* ---------- 卡片 ----------
   层级约定：重点信息浮起来（.card-hero），普通信息稳下来（.card），
   辅助信息退后去（.rows / .meta，不加容器不加阴影）。 */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-card);min-width:0}
/* L1 主卡片：每屏至多一两个（今日概览 / 下一节课 / 核心任务），内容密度低 */
.card-hero{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-hero);min-width:0}
/* 低浮卡：只要边框不要阴影，用于普通功能模块的轻量容器 */
.card-flat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4);min-width:0}
/* L3 信息单元：列表行共用发丝线分隔，不逐项加边框阴影 */
.rows{display:flex;flex-direction:column;min-width:0}
.rows>*{padding:var(--space-3) 0;border-bottom:1px solid var(--line-soft)}
.rows>:last-child{border-bottom:0}
/* 可点击卡片的 hover 语言：边线变清晰 + 阴影微升，不位移不缩放不发光 */
.is-clickable{cursor:pointer;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.is-clickable:hover{border-color:var(--line-strong);box-shadow:var(--shadow-raise)}
/* L4 辅助信息：小字号、低对比、靠间距不靠装饰 */
.meta{color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.group-title{color:var(--muted);font-size:var(--fs-xs);font-weight:600;margin:0 0 var(--space-2)}

/* ---------- 标签 / 筛选丸 / 状态徽标 ---------- */
.tag{display:inline-block;padding:3px 7px;background:#f2e9e0;border-radius:var(--radius-pill);font-size:var(--fs-2xs);color:#7b6a5d;white-space:nowrap}
.pill{border:1px solid var(--line);border-radius:var(--radius-pill);background:#fff;color:var(--muted);padding:6px 12px;font:inherit;font-size:var(--fs-md);cursor:pointer}
.pill:hover{color:var(--accent2);border-color:var(--accent2)}
.pill.active{border-color:var(--accent);background:#f6ece3;color:var(--accent2);font-weight:600}
.badge{display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);font-size:var(--fs-2xs);white-space:nowrap}
.badge.green{background:var(--ok-bg);color:var(--ok-strong)}
.badge.yellow,.badge.awkward{background:#f8edd9;color:var(--warn-strong)}
.badge.red,.badge.nonsense{background:var(--bad-bg);color:var(--bad-strong)}
.badge.smooth{background:#eef0ec;color:#6b7266}

/* ---------- 反馈：状态行 / 提示块 / 空态 / 加载 ---------- */
.notice{min-height:21px;margin-bottom:10px;color:var(--muted);font-size:var(--fs-md)}
.notice.error{color:var(--bad)}
.alert{padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--card2);color:var(--ink2);font-size:var(--fs-md);line-height:1.6}
.alert.info{background:var(--info-bg);border-color:var(--info-border)}
.alert.warn{background:var(--warn-bg);border-color:var(--warn-border)}
.alert.success{background:var(--ok-bg);border-color:#d8e2d3;color:var(--ok-strong)}
.alert.error{background:var(--bad-bg);border-color:#ecd2cd;color:var(--bad-strong)}
.empty,.loading{padding:50px;text-align:center;color:var(--muted)}
.empty b{display:block;margin-bottom:8px;color:var(--ink);font-size:15px}
.empty p{max-width:440px;margin:0 auto 14px;font-size:var(--fs-md);line-height:1.65}
.empty.error b{color:var(--bad)}
/* 状态标签：区分"搜索/筛选无结果"与"真的没数据"（C4 空态五态） */
.empty-tag{display:inline-block;margin-bottom:8px;padding:2px 8px;border-radius:999px;background:var(--card2);border:1px solid var(--line);color:var(--muted);font-size:var(--fs-xs)}
/* 紧凑表格：管理/高密度表可选；不改变字段与交互 */
.tbl-compact th,.tbl-compact td{padding:4px 8px;font-size:var(--fs-xs)}
.empty>svg{display:block;margin:0 auto var(--space-2);width:24px;height:24px;color:var(--muted)}
.spinner{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-3px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 55%,var(--accent) 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.4px),#000 calc(100% - 2.4px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.4px),#000 calc(100% - 2.4px));animation:ui-spin .75s linear infinite}
.bar,.progress{height:8px;border-radius:var(--radius-pill);background:#efe5da;overflow:hidden}
.bar>div,.progress>div{height:100%;width:0;background:var(--accent);border-radius:var(--radius-pill);transition:width .3s}

/* ---------- 骨架加载：接近真实布局的静态占位，先出结构再等数据 ---------- */
.skeleton{display:block;border-radius:var(--radius-sm);background:#f0e8dd;pointer-events:none;user-select:none}
.skeleton-line{height:14px}
.skeleton-block{height:88px}

/* ---------- 玻璃感：仅顶栏 / 浮动工具条 / 浮层，禁止大面积使用 ---------- */
.glass{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(var(--glass-blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3)}
@media (prefers-reduced-transparency:reduce){
  .glass{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ---------- 阅读排版：课文 / 作文 / 文学内容的编辑感层 ----------
   标题衬线、正文 16px 大行距、重点句 .mark、批注 .annot（楷体点缀）。
   只用于人文内容区，工作台列表 / 表单不要套用。 */
.reading{max-width:46em;color:var(--ink)}
.reading h1{font-family:var(--font-serif);font-size:var(--fs-h1);font-weight:600;line-height:1.35;margin:0 0 var(--space-4)}
.reading h2{font-family:var(--font-serif);font-size:var(--fs-h2);font-weight:600;line-height:1.4;margin:var(--space-6) 0 var(--space-3)}
.reading h3{font-family:var(--font-serif);font-size:var(--fs-h3);font-weight:600;line-height:1.4;margin:var(--space-5) 0 var(--space-2)}
.reading p{font-size:var(--fs-lg);line-height:1.9;margin:0 0 var(--space-4)}
.reading blockquote{margin:0 0 var(--space-4);padding:var(--space-1) 0 var(--space-1) var(--space-4);border-left:2px solid var(--accent-soft);color:var(--ink2)}
.reading .mark{background:var(--accent-soft);border-radius:3px;padding:0 2px}
.annot{font-family:var(--font-kai);color:var(--ink2)}

/* ---------- 抽屉：右侧详情面板，与弹窗同一层级语言 ---------- */
.drawer-mask{position:fixed;inset:0;z-index:var(--z-drawer);display:flex;justify-content:flex-end;background:rgba(40,35,30,.42)}
.drawer{width:min(420px,92vw);height:100%;overflow:auto;background:var(--card);border-left:1px solid var(--line);box-shadow:var(--shadow-pop);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
@media (prefers-reduced-motion:no-preference){
  .drawer{transition:transform var(--dur-med) var(--ease-ui)}
}

/* ---------- 弹窗 ---------- */
.mask{position:fixed;inset:0;z-index:var(--z-mask);display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(40,35,30,.42)}
.modal{width:min(460px,100%);max-height:88vh;overflow:auto;background:var(--card);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-pop)}
.modal h2,.modal h3{margin:0 0 14px;font-size:var(--fs-h3)}
.modal label{display:block;margin-bottom:12px;font-size:var(--fs-md);color:var(--muted)}
.modal label input,.modal label select{width:100%;margin-top:5px;color:var(--ink)}
.modal-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:12px;flex-wrap:wrap}

/* ---------- 图标 ----------
   .ui-icon：icons.js 直接输出的 <svg>。
   .ic：CSS 掩码图标，尺寸随字号（1em）；mask-image 由 icons.js 启动时
   按 P 表批量注入 <style>，HTML/JS 模板里写 <i class="ic" data-ic="save"></i>。
   掩码用 currentColor 上色，跟随文字颜色与对比度，无需额外状态样式。 */
.ui-icon{flex:none;vertical-align:-2px}
.ic{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-0.15em;background:currentColor;-webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-position:center;mask-size:contain;mask-repeat:no-repeat}

/* ---------- 移动端容器 ---------- */
@media(max-width:760px){.shell{padding:var(--shell-pad-mobile)}}

/* ============================================================
   Tab 组件体系（20260910a · 批次 Tab）
   六类组件共用一套状态词（.is-active / .is-complete / .is-current /
   .is-disabled / .is-filled / .is-scrollable），由 tab-controls.js 负责同步。
   · 指示器只动画 transform（translate3d + scaleX），不动画 left / width；
     位置由 --ui-ind-x / --ui-ind-w 两个自定义属性写入。
   · 现有 .pill 继续代表筛选丸与轻量次操作，不是本组件的底座。
   ============================================================ */

/* ---------- Tab 轨道与指示器（内容页签） ---------- */
.ui-tabs{position:relative;display:flex;align-items:stretch;gap:2px;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scroll-padding-inline:12px}
.ui-tabs::-webkit-scrollbar{height:6px}
.ui-tabs::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--radius-pill)}
.ui-tab{position:relative;z-index:1;appearance:none;display:inline-flex;align-items:center;gap:6px;flex:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-md);line-height:1.4;padding:9px 12px;min-height:40px;white-space:nowrap;cursor:pointer;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.ui-tab:hover{color:var(--accent2)}
.ui-tab.is-active{color:var(--accent2);font-weight:600}
.ui-tab__dot{display:inline-block;width:6px;height:6px;flex:none;border-radius:50%;background:var(--line-strong)}
.ui-tab.is-filled .ui-tab__dot{background:var(--ok)}
.ui-tabs__indicator{position:absolute;left:0;bottom:0;z-index:0;width:1px;height:2px;background:var(--accent);transform-origin:left center;transform:translate3d(var(--ui-ind-x,0px),0,0) scaleX(var(--ui-ind-w,0));pointer-events:none}
.ui-segmented__thumb{position:absolute;left:0;top:3px;z-index:0;width:1px;height:calc(100% - 6px);border-radius:var(--radius-pill);background:var(--card);box-shadow:var(--shadow-1);transform-origin:left center;transform:translate3d(var(--ui-ind-x,0px),0,0) scaleX(var(--ui-ind-w,0));pointer-events:none}

/* 细线型：单行栏目，下划线指示器 */
.ui-tabs--linear{border-bottom:1px solid var(--line);padding:0 2px}
.ui-tabs--linear .ui-tab{padding:10px 12px}
/* 文件夹型：与下方内容面板无缝连接，激活页签底部融进面板 */
.ui-tabs--folder{align-items:flex-end;gap:2px;padding:0 2px;overflow:visible}
.ui-tabs--folder .ui-tabs__indicator{display:none}
.ui-tabs--folder .ui-tab{border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:var(--card2);color:var(--muted);padding:9px 14px;min-height:38px}
.ui-tabs--folder .ui-tab:hover{color:var(--accent2)}
.ui-tabs--folder .ui-tab.is-active{margin-bottom:-1px;padding-bottom:10px;border-color:var(--line-strong);background:var(--card);color:var(--ink);font-weight:600;box-shadow:inset 0 2px 0 var(--accent)}

/* ---------- Segmented Control（范围切换 / 互斥视图） ---------- */
.ui-segmented{position:relative;display:inline-flex;align-items:center;gap:2px;padding:3px;max-width:100%;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--card2);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
.ui-segmented::-webkit-scrollbar{display:none}
.ui-segmented>button{position:relative;z-index:1;appearance:none;display:inline-flex;align-items:center;gap:6px;flex:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-md);line-height:1.4;padding:7px 14px;min-height:34px;border-radius:var(--radius-pill);white-space:nowrap;cursor:pointer}
.ui-segmented>button:hover{color:var(--accent2)}
.ui-segmented>button.is-active{color:var(--accent2);font-weight:600}

/* ---------- Card Tabs（标题 + 图标 + 一句说明的功能分区） ---------- */
.ui-card-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;min-width:0}
.ui-card-tab{display:flex;align-items:flex-start;gap:10px;width:100%;min-width:0;min-height:44px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.ui-card-tab:hover{border-color:var(--line-strong)}
.ui-card-tab.is-active{border-color:var(--accent);background:#fdf7f2;box-shadow:inset 3px 0 0 var(--accent)}
.ui-card-tab__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.ui-card-tab__main b{font-size:var(--fs-base);font-weight:600}
.ui-card-tab__main small{font-size:var(--fs-xs);color:var(--muted);line-height:1.5}

/* ---------- Chevron Stepper（有先后顺序的流程） ---------- */
.ui-stepper{display:flex;align-items:stretch;gap:10px;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:2px;scroll-padding-inline:12px}
.ui-stepper__item{position:relative;display:flex;flex-direction:column;gap:2px;flex:1 1 0;min-width:132px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--muted);font:inherit;text-align:left;cursor:pointer}
.ui-stepper__item:not(:last-child)::after{content:"";position:absolute;top:50%;right:-6px;width:8px;height:8px;border-top:1px solid var(--line-strong);border-right:1px solid var(--line-strong);background:var(--bg);transform:translateY(-50%) rotate(45deg);pointer-events:none}
.ui-stepper__item b{font-size:var(--fs-base);font-weight:600;color:var(--ink);white-space:nowrap}
.ui-stepper__item span{font-size:var(--fs-xs);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-stepper__item.is-complete{border-color:#d8e2d3;background:var(--ok-bg)}
.ui-stepper__item.is-complete b,.ui-stepper__item.is-complete span{color:var(--ok-strong)}
.ui-stepper__item.is-current{border-color:var(--accent);background:#fdf7f2;box-shadow:inset 0 -2px 0 var(--accent)}
.ui-stepper__item.is-current b{color:var(--accent2)}

/* ---------- Image Preview Tabs（缩略图切换主预览） ---------- */
.ui-preview-tabs{display:flex;gap:12px;align-items:flex-start;min-width:0}
.ui-preview-tabs__rail{display:flex;flex-direction:column;gap:8px;max-height:340px;padding:2px;overflow:auto}
.ui-preview-tab{flex:none;width:76px;height:56px;padding:2px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);cursor:pointer;overflow:hidden}
.ui-preview-tab:hover{border-color:var(--line-strong)}
.ui-preview-tab.is-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.ui-preview-tab span{display:flex;align-items:center;justify-content:center;height:100%;border-radius:4px;background:var(--card2);font-size:var(--fs-xs);color:var(--muted)}
.ui-preview-stage{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;min-height:180px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card2);color:var(--muted);font-size:var(--fs-md)}

/* ---------- 统一禁用态 / 触控热区 ---------- */
.ui-tab[disabled],.ui-tab.is-disabled,.ui-segmented>button[disabled],.ui-segmented>button.is-disabled,.ui-card-tab[disabled],.ui-card-tab.is-disabled,.ui-stepper__item[disabled],.ui-stepper__item.is-disabled,.ui-preview-tab[disabled],.ui-preview-tab.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
@media (pointer:coarse){
  .ui-tab,.ui-segmented>button,.ui-card-tab,.ui-stepper__item{min-height:44px}
}

/* ---------- 图片预览浮层（T5 复用：主图 + 缩略图条 + 键盘，20260912a） ---------- */
/* modal 本体经 app.css 提到 --z-sync+10，浮层须压过模态弹窗 */
.imgview-mask{position:fixed;inset:0;z-index:calc(var(--z-sync) + 20);background:rgba(24,17,12,.88);display:none;flex-direction:column;padding:14px}
.imgview-mask.open{display:flex}
.imgview-flight{position:fixed;left:0;top:0;z-index:calc(var(--z-sync) + 21);max-width:none;max-height:none;object-fit:contain;transform-origin:0 0;pointer-events:none;user-select:none;border-radius:6px}
.imgview-panel{display:flex;flex-direction:column;gap:10px;width:100%;height:100%;min-height:0}
.imgview-head{display:flex;align-items:center;gap:10px;color:#f5ece2;font-size:13px;flex:none}
.imgview-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imgview-count{margin-left:auto;flex:none;font-variant-numeric:tabular-nums;color:#cbb9a6}
.imgview-close{flex:none;width:34px;height:34px;border:1px solid rgba(245,236,226,.35);border-radius:8px;background:rgba(255,255,255,.08);color:#f5ece2;cursor:pointer;display:grid;place-items:center;font-size:16px}
.imgview-close:hover{background:rgba(255,255,255,.16)}
.imgview-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
.imgview-nav{flex:none;width:38px;height:38px;border:1px solid rgba(245,236,226,.35);border-radius:50%;background:rgba(255,255,255,.08);color:#f5ece2;cursor:pointer;display:grid;place-items:center;font-size:18px}
.imgview-nav:hover{background:rgba(255,255,255,.16)}
.imgview-nav[disabled]{opacity:.35;cursor:default;pointer-events:none}
.imgview-stage{flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;border-radius:10px;overflow:hidden}
.imgview-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 6px 28px rgba(0,0,0,.35)}
.imgview-error{display:flex;flex-direction:column;gap:8px;align-items:center;color:#e8d9c8;font-size:14px;padding:20px;border:1px dashed rgba(245,236,226,.4);border-radius:10px}
.imgview-strip{flex:none;display:flex;gap:8px;padding:6px 2px 2px;overflow-x:auto;overflow-y:hidden}
.imgview-strip .ui-preview-tab{width:72px;height:54px}
.imgview-strip .ui-preview-tab.is-active{border-color:#e8b98a;box-shadow:0 0 0 2px rgba(232,185,138,.35)}
.imgview-strip .ui-preview-tab img{width:100%;height:100%;object-fit:cover;border-radius:4px}
@media (prefers-reduced-motion:no-preference){
  .imgview-stage img{transition:opacity var(--dur-fast) var(--ease-ui)}
}

/* ---------- 动效（reduced-motion 下天然无过渡） ---------- */
@media (prefers-reduced-motion:no-preference){
  .ui-tabs__indicator,.ui-segmented__thumb{transition:transform var(--dur-med) var(--ease-ui),opacity var(--dur-fast) linear}
}

/* ---------- 响应式 ---------- */
@media(max-width:1023px){
  .ui-tabs--folder{overflow-x:auto;overflow-y:hidden}
}
@media(max-width:760px){
  .ui-card-tabs{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .ui-stepper__item{min-width:148px}
  .ui-tabs__indicator{height:3px}
  .ui-preview-tabs{flex-direction:column-reverse;gap:10px}
  .ui-preview-tabs__rail{flex-direction:row;width:100%;max-height:none;overflow-x:auto;overflow-y:hidden}
  .ui-preview-stage{width:100%;min-height:200px}
}
@media(max-width:520px){
  .ui-card-tabs{grid-template-columns:1fr}
}

/* hidden 属性始终生效（放在最后，覆盖同权重的 display 声明） */
[hidden]{display:none}
/* ---------- 设置中心 v2：行式列表 + 侧栏（20260910c） ---------- */
.setv2{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:14px;align-items:start}
.setv2-group{padding:0;overflow:hidden}
/* 分组标题和设置行共享视觉尺寸，不改变各自的标题/按钮/展示语义。
   图标容器与内部 SVG 分层：局部容器规则不能被通用 [data-nav-icon] 的 20px 占位覆盖。 */
.setv2 :is(.setv2-group-head,.setv2-row){display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 16px;background:var(--card2);border:0;border-bottom:1px solid var(--line);border-radius:0}
.setv2 :is(.setv2-group-head>div,.setv2-rt){min-width:0;flex:1;overflow-wrap:anywhere}
.setv2 :is(.setv2-group-head h3,.setv2-rt b){margin:0;font-size:14px;font-weight:700;line-height:1.5}
.setv2 :is(.setv2-group-head p,.setv2-rt>span){margin:1px 0 0;font-size:12px;color:var(--ink3);line-height:1.5}
.setv2 :is(.setv2-gi,.setv2-ri){width:30px;height:30px;flex:none;border-radius:8px;background:var(--accent-soft);color:var(--accent2);display:grid;place-items:center}
.setv2 :is(.setv2-gi,.setv2-ri)>:is(svg,.ic){width:20px;height:20px}
.setv2-row{width:100%;text-align:left;cursor:pointer;font:inherit;color:var(--ink);transition:background-color var(--dur-fast) var(--ease-ui)}
.setv2 .setv2-row:last-child{border-bottom:0}
.setv2 button.setv2-row:hover{background:var(--accent-soft)}
.setv2 button.setv2-row:active{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--line)}
.setv2 button.setv2-row:focus-visible{outline:var(--focus-ring);outline-offset:-3px}
.setv2-rt{display:flex;flex-direction:column}
.setv2-rv{margin-left:auto;min-width:0;max-width:28%;flex:0 1 auto;font-size:12.5px;color:var(--ink2);text-align:right;overflow-wrap:anywhere}
.setv2-rv b{font-size:13px;color:var(--ink)}
.setv2-rv small{display:block;color:var(--ink3);margin-top:1px}
.setv2-arrow{flex:none;color:var(--ink3);font-size:16px;line-height:1}
.setv2-body{padding:12px 16px;display:grid;gap:8px}
.setv2-about .settings-note{margin:0}
.setv2-side-link{font-size:12px;color:var(--ink3);text-decoration:none;border-top:1px dashed var(--line);padding-top:9px;margin-top:2px}
.setv2-side-link:hover{color:var(--accent2)}
@media(max-width:860px){.setv2{grid-template-columns:1fr}}
/* ---------- 设置中心 v2b：均衡布局 ---------- */
.setv2-wide{grid-column:1/-1}
.setv2-row-static{cursor:default}
.setv2-about{gap:0}
.setv2-about .settings-note{padding:10px 2px;border-radius:0;background:none;border:0;border-bottom:1px dashed var(--line);line-height:1.75}
.setv2-about .settings-note:last-of-type{border-bottom:0;padding-bottom:2px}
/* ---------- 设置中心 v2c：桌面单列全宽、关于卡沉底 ---------- */
.setv2{grid-template-columns:minmax(0,1fr)}
.setv2-main{display:contents}
.setv2-side{display:contents}
.setv2-side>*{order:99}
.setv2-wide{grid-column:auto}

/* ---------- 统一导航图标：几何见 icons.js；状态只继承导航颜色 ---------- */
/* 收放一次提交最终布局，避免 width 逐帧挤压正文；ID 覆盖各页面较晚加载的旧规则。 */
@media (min-width:769px){
  #desktopSidebar,.app:has(> #desktopSidebar){transition:none}
}
.nav-icon{display:block;flex:none;pointer-events:none}
[data-nav-icon]{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;vertical-align:middle}
[data-nav-icon-size="14"]{width:14px;height:14px}
[data-nav-icon-size="18"]{width:18px;height:18px}
[data-nav-icon-size="24"]{width:24px;height:24px}
:is(.sidebar,.mobile-nav-drawer) .nav-hub-card:has(.nav-hub-icon){padding-left:42px}
.nav-hub-card .nav-hub-icon{position:absolute;left:12px;top:10px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--ink2);pointer-events:none}
.nav-hub-card:is(:hover,:focus-visible,.active) .nav-hub-icon{color:inherit}
.nav-hub-card .nav-hub-arrow{display:flex;align-items:center;justify-content:center;width:14px;height:14px}
.sidebar.is-collapsed .nav-hub-card:has(.nav-hub-icon){padding:6px}
.sidebar.is-collapsed .nav-hub-card .nav-hub-icon{position:static}
.sidebar.is-collapsed .nav-hub-card:hover{background:var(--accent-soft)}
:is(.sidebar,.mobile-nav-drawer) .nav-hub-card:focus-visible,
:is(.page-shortcut,.page-shortcuts-menu-item,.quick-action,.classmgr-quick-section,.setv2-row,.app-topbar-user,.mobile-nav-toggle,.mobile-nav-drawer-close):has(.nav-icon):focus-visible,
.app-topbar-search button:has(.nav-icon):focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.page-shortcut .page-shortcut-ic,.page-shortcuts-menu-item .mi-ic,.quick-action:has(.nav-icon) .qa-ic{color:var(--ink2);opacity:1}
.classmgr-quick-section:has(.nav-icon) [data-nav-icon]{color:var(--ink2)}
:is(.page-shortcut,.page-shortcuts-menu-item,.quick-action):is(:hover,:focus-visible,.active) :is(.page-shortcut-ic,.mi-ic,.qa-ic),
.classmgr-quick-section:is(:hover,:focus-visible,.active) [data-nav-icon]{color:inherit;opacity:1}
:is(.page-shortcut,.page-shortcuts-menu-item)[aria-disabled="true"] .nav-icon{color:inherit}
.nav-shortcut:has(.nav-entry-icon){padding-left:42px}
.nav-entry-icon{position:absolute;left:12px;top:10px}
.app-topbar-search button:has(.nav-icon){display:grid;place-items:center;width:44px;flex:none}
/* 快捷条/更多菜单容器会裁剪外轮廓：焦点环向内绘制，仍有完整3px可见线条。 */
.page-shortcut:has(.nav-icon):focus-visible,.page-shortcuts-menu-item:has(.nav-icon):focus-visible{outline-offset:-3px}

/* 我的资料：名称优先占宽，操作区在窄屏独立成行；不影响其他资料列表。 */
#materialList .mat-t .t{font-weight:600;line-height:1.6;overflow-wrap:anywhere}
#materialList .mat-t .n{line-height:1.6;overflow-wrap:anywhere}
#materialList .mat-item>button{border-radius:var(--radius-sm,10px)}
@media(max-width:768px){
  [data-view="materials"] .card-head:has(#materialSearch){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
  [data-view="materials"] .card-head:has(#materialSearch) h3{grid-column:1;grid-row:1;min-width:0}
  [data-view="materials"] .card-head:has(#materialSearch)>.btn{grid-column:2;grid-row:1;min-height:44px}
  [data-view="materials"] .card-head:has(#materialSearch)>.hint{grid-column:1/-1;grid-row:3}
  [data-view="materials"] .card-head:has(#materialSearch)>.spacer{display:none}
  [data-view="materials"] #materialSearch{grid-column:1/-1;grid-row:2;width:100%;max-width:none!important;min-width:0}
  #materialFilters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #materialFilters .pill{min-height:44px;border-radius:var(--radius-sm,10px);justify-content:center}
  #materialList{display:grid;gap:12px}
  #materialList .mat-item{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px;border:1px solid var(--line);border-radius:var(--radius,14px);background:var(--card2)}
  #materialList .mat-t{grid-column:1/-1;padding-right:48px;margin-bottom:4px}
  #materialList .mat-item>.mat-star{position:absolute;top:12px;right:12px;width:44px;min-height:44px;padding:0;display:grid;place-items:center}
  #materialList .mat-item>button:not(.mat-star){min-width:0;min-height:44px;white-space:normal;justify-content:center;padding:8px;line-height:1.4}
  #materialList .mat-item>button:last-child:nth-child(odd){grid-column:1/-1}
}