/* =========================================================================
   设计规范 · 合并单文件（可直接引入）
   = 基线层 ui-design-standard/apple-minimal.css
   + token 层 design-tokens.css
   + 项目扩展基元 components.css
   生成自 /Users/jack/本地文件/抖音视频下载器，未修改源项目。
   ========================================================================= */

:root {
  color-scheme: light;
  --am-bg: #f6f6f7;
  --am-bg-start: #ffffff;
  --am-panel: #ffffff;
  --am-surface: rgba(255, 255, 255, 0.92);
  --am-surface-muted: rgba(255, 255, 255, 0.72);
  --am-soft: #f2f2f3;
  --am-soft-2: #e9e9eb;
  --am-control: #f8f8f8;
  --am-text: #1d1d1f;
  --am-muted: #6e6e73;
  --am-sub: #74747a;
  --am-faint: #a0a0a6;
  --am-line: rgba(29, 29, 31, 0.09);
  --am-line-strong: rgba(29, 29, 31, 0.15);
  --am-line-soft: rgba(29, 29, 31, 0.055);
  --am-border: #d2d2d7;
  --am-border-soft: #e5e5ea;
  --am-accent: #e85d5d;
  --am-accent-rgb: 232, 93, 93;
  --am-accent-soft: rgba(232, 93, 93, 0.11);
  --am-blue: #2d6cdf;
  --am-green: #248a5a;
  --am-orange: #ad6a1c;
  --am-red: #d94b4b;
  --am-danger: #b42318;
  --am-radius-nav: 10px;
  --am-radius-control: 14px;
  --am-radius-card: 18px;
  --am-radius-float: 20px;
  --am-radius-modal: 28px;
  --am-radius-pill: 999px;
  --am-shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.04);
  --am-shadow-card: 0 18px 42px rgba(0, 0, 0, 0.06);
  --am-shadow-float: 0 24px 70px rgba(0, 0, 0, 0.18);
  --am-shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.14), 0 4px 18px rgba(0, 0, 0, 0.06);
  --am-sidebar-width: 224px;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--am-text);
  background: var(--am-bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

button,
input,
select,
textarea,
a {
  font: inherit;
}

button,
select,
textarea,
label {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--am-accent-soft);
  outline-offset: 3px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}

.am-page {
  min-height: 100vh;
  background:
    linear-gradient(180deg, var(--am-bg-start) 0, var(--am-bg) 210px),
    var(--am-bg);
}

.am-admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--am-sidebar-width) minmax(0, 1fr);
}

.am-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 34px 18px 24px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--am-line);
  background: rgba(246, 246, 247, 0.86);
}

.am-brand {
  display: grid;
  gap: 4px;
  padding: 0 10px;
}

.am-brand strong {
  display: block;
  font-size: 1.04rem;
  font-weight: 780;
  line-height: 1.2;
  letter-spacing: 0;
}

.am-nav {
  display: grid;
  gap: 3px;
  margin-top: 72px;
}

.am-nav-item {
  min-height: 38px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: var(--am-radius-nav);
  padding: 0 10px;
  color: var(--am-sub);
  background: transparent;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 680;
  transition: color 160ms ease, background 160ms ease;
}

.am-nav-item:hover,
.am-nav-item:focus-visible {
  color: var(--am-text);
  background: rgba(29, 29, 31, 0.045);
  outline: none;
}

.am-nav-item.is-active,
.am-nav-item.active {
  color: var(--am-text);
  background: var(--am-panel);
}

.am-main {
  min-width: 0;
  padding: 42px 30px 64px;
}

.am-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.am-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  padding-top: 4px;
}

.am-eyebrow {
  margin: 0 0 8px;
  color: var(--am-faint);
  font-size: 0.72rem;
  font-weight: 740;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.am-title {
  margin: 0;
  font-size: 2.18rem;
  line-height: 1.08;
  font-weight: 760;
  letter-spacing: 0;
}

.am-section-title {
  margin: 0;
  color: var(--am-text);
  font-size: 1.08rem;
  line-height: 1.2;
  font-weight: 780;
  letter-spacing: 0;
}

.am-dashboard,
.am-stack {
  display: grid;
  gap: 28px;
}

.am-dashboard {
  margin-top: 26px;
}

.am-content-panel,
.am-table-panel,
.am-form-panel {
  display: grid;
  gap: 18px;
  border: 0;
  border-radius: var(--am-radius-card);
  background: var(--am-panel);
}

.am-content-panel {
  padding: 20px 22px 22px;
}

.am-form-panel {
  padding: 14px;
}

.am-table-panel {
  padding: 0 14px;
  overflow: hidden;
}

.am-card {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 0;
  border-radius: var(--am-radius-card);
  background: var(--am-panel);
}

.am-metric-card {
  min-height: 94px;
  display: grid;
  align-content: space-between;
  gap: 14px;
  padding: 14px;
  border-radius: 8px;
  background: var(--am-soft);
}

.am-metric-card span {
  color: var(--am-sub);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.35;
}

.am-metric-card strong {
  color: var(--am-text);
  font-size: 2rem;
  line-height: 1;
  font-weight: 760;
  letter-spacing: 0;
}

.am-field {
  display: grid;
  gap: 7px;
  color: var(--am-sub);
  font-size: 0.76rem;
  font-weight: 700;
}

.am-input,
.am-select,
.am-textarea,
.am-field input,
.am-field select,
.am-field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--am-radius-control);
  padding: 0 13px;
  color: var(--am-text);
  background: var(--am-control);
  outline: none;
  font-size: 0.9rem;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.am-textarea,
.am-field textarea {
  min-height: 220px;
  padding: 12px 13px;
  line-height: 1.65;
  resize: vertical;
}

.am-input:focus,
.am-select:focus,
.am-textarea:focus,
.am-field input:focus,
.am-field select:focus,
.am-field textarea:focus {
  border-color: transparent;
  background: var(--am-control);
  outline: none;
  box-shadow: none;
}

.am-button,
.am-primary-action,
.am-secondary-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--am-radius-control);
  padding: 0 18px;
  font-size: 0.9rem;
  font-weight: 740;
  line-height: 1;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.am-primary-action {
  color: #ffffff;
  background: var(--am-accent);
}

.am-secondary-action {
  color: var(--am-text);
  background: var(--am-control);
}

.am-button:hover,
.am-primary-action:hover,
.am-secondary-action:hover,
.am-button:focus-visible,
.am-primary-action:focus-visible,
.am-secondary-action:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.am-secondary-action:hover,
.am-secondary-action:focus-visible {
  background: var(--am-soft-2);
}

.am-primary-action:disabled,
.am-secondary-action:disabled,
.am-button:disabled {
  cursor: not-allowed;
  color: var(--am-faint);
  background: var(--am-control);
  transform: none;
  opacity: 0.72;
}

.am-pill-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--am-radius-pill);
  padding: 0 18px;
  color: #ffffff;
  background: var(--am-text);
  font-weight: 600;
  line-height: 1;
  transition: background 180ms ease, transform 180ms ease;
}

.am-pill-button:hover {
  background: #000000;
  transform: translateY(-1px);
}

.am-icon-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f1f1f3;
  color: #515154;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.am-icon-button:hover {
  background: #e0e0e5;
  color: var(--am-text);
  transform: scale(1.06);
}

.am-chip,
.am-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 0 10px;
  border: 0;
  border-radius: var(--am-radius-pill);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1;
  white-space: nowrap;
}

.am-chip {
  color: var(--am-sub);
  background: rgba(255, 255, 255, 0.68);
}

.am-status.is-success {
  color: var(--am-green);
  background: rgba(36, 138, 90, 0.1);
}

.am-status.is-info,
.am-status.is-loading {
  color: var(--am-blue);
  background: rgba(45, 108, 223, 0.1);
}

.am-status.is-warning {
  color: var(--am-orange);
  background: rgba(173, 106, 28, 0.11);
}

.am-status.is-danger,
.am-status.is-error {
  color: var(--am-red);
  background: rgba(217, 75, 75, 0.1);
}

.am-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--am-text);
  font-size: 0.88rem;
}

.am-table th,
.am-table td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--am-line-soft);
  text-align: left;
  vertical-align: middle;
}

.am-table th {
  color: var(--am-sub);
  font-size: 0.76rem;
  font-weight: 760;
}

.am-table tr:last-child td {
  border-bottom: 0;
}

.am-pagination {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--am-radius-card);
  background: var(--am-panel);
}

.am-page-button {
  min-width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  padding: 0 11px;
  color: var(--am-sub);
  background: transparent;
  font-size: 0.84rem;
  font-weight: 720;
}

.am-page-button:hover,
.am-page-button:focus-visible {
  color: var(--am-text);
  background: var(--am-control);
  outline: none;
}

.am-page-button.is-active,
.am-page-button.active {
  color: #ffffff;
  background: var(--am-text);
}

.am-toast {
  position: fixed;
  left: 50%;
  top: max(16px, env(safe-area-inset-top));
  z-index: 86;
  width: fit-content;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border: 0;
  border-radius: var(--am-radius-pill);
  color: var(--am-blue);
  background: rgba(45, 108, 223, 0.1);
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -12px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
}

.am-toast.is-visible,
.am-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.am-toast.is-success {
  color: var(--am-green);
  background: rgba(36, 138, 90, 0.1);
}

.am-toast.is-loading,
.am-toast.is-info {
  color: var(--am-blue);
  background: rgba(45, 108, 223, 0.1);
}

.am-toast.is-error,
.am-toast.is-danger {
  color: var(--am-red);
  background: rgba(217, 75, 75, 0.1);
}

.am-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 72;
  display: grid;
  width: min(520px, calc(100vw - 36px));
  max-height: min(720px, calc(100vh - 34px));
  gap: 20px;
  padding: 30px;
  border: 0;
  border-radius: var(--am-radius-modal);
  background: var(--am-panel);
  box-shadow: var(--am-shadow-modal);
  transform: translate(-50%, -50%);
}

.am-modal[hidden],
.am-hidden {
  display: none;
}

.am-modal-head {
  display: grid;
  gap: 7px;
  padding-right: 34px;
}

.am-modal-head h2 {
  margin: 0;
  color: var(--am-text);
  font-size: 1.74rem;
  line-height: 1.08;
  letter-spacing: 0;
}

.am-modal-head p {
  margin: 0;
  color: var(--am-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.am-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f1f1f3;
  color: #515154;
}

.am-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--am-border-soft);
  border-top-color: var(--am-text);
  border-radius: 50%;
  animation: am-spin 900ms linear infinite;
}

@keyframes am-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 920px) {
  .am-admin-shell {
    grid-template-columns: 1fr;
  }

  .am-sidebar {
    position: static;
    height: auto;
    padding: 18px;
    border-right: 0;
    border-bottom: 1px solid var(--am-line);
  }

  .am-nav {
    margin-top: 18px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .am-main {
    padding: 30px 20px 48px;
  }

  .am-topbar {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .am-title {
    font-size: 1.72rem;
  }

  .am-topbar-actions,
  .am-pagination {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .am-modal {
    padding: 24px;
    border-radius: 24px;
  }
}


/* =========================================================================
   设计 token 层
   -------------------------------------------------------------------------
   来源：本项目 ui-design-standard/apple-minimal.css 的 :root（通用基线）
        + static/styles.css 顶部 :root（本项目真实覆盖，已替换进下面）

   使用要求
   1. 必须放在基线样式表之后引入，覆盖才会生效。
   2. 换主题只改「强调色」三个变量；背景 / 文字 / 线条建议保持不动。
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- 页面底色与面板 ---- */
  --am-bg: #f6f6f7;                          /* 页面底 */
  --am-bg-start: #ffffff;                    /* 顶部轻渐变起点 */
  --am-panel: #ffffff;                       /* 内容面板 */
  --am-surface: rgba(255, 255, 255, 0.92);   /* 浮层、工具面板 */
  --am-surface-muted: rgba(255, 255, 255, 0.72);
  --am-soft: #f2f2f3;                        /* 指标卡、分组底、hover 底 */
  --am-soft-2: #e9e9eb;                      /* 次按钮 hover、导航 hover */
  --am-control: #f8f8f8;                     /* 输入框、次按钮静止底色 */

  /* ---- 文字层级 ---- */
  --am-text: #1d1d1f;                        /* 标题、正文重点 */
  --am-muted: #6e6e73;                       /* 描述、表格辅助 */
  --am-sub: #74747a;                         /* 次级文字（label、导航） */
  --am-faint: #a0a0a6;                       /* 版本号、空状态弱提示 */

  /* ---- 线条 ---- */
  --am-line: rgba(29, 29, 31, 0.09);         /* 侧栏分隔、表格分割 */
  --am-line-strong: rgba(29, 29, 31, 0.15);  /* 少量强调分隔 */
  --am-line-soft: rgba(29, 29, 31, 0.055);   /* 表格行分割（比 --am-line 更弱） */
  --am-border: #d2d2d7;
  --am-border-soft: #e5e5ea;

  /* ---- 强调色 ----
     基线默认是红 #e85d5d；本项目改成黑，形成「黑白灰 + 浅色语义标签」的观感。
     换主题只需改这三个值。 */
  --am-accent: #1d1d1f;                      /* 基线默认 #e85d5d */
  --am-accent-rgb: 29, 29, 31;               /* 基线默认 232, 93, 93 */
  --am-accent-soft: rgba(29, 29, 31, 0.11);  /* 基线默认 rgba(232, 93, 93, 0.11) */

  /* ---- 语义色（浅底深字，只用于状态，不做大面积填充） ---- */
  --am-blue: #2d6cdf;
  --am-green: #248a5a;
  --am-orange: #ad6a1c;
  --am-red: #d94b4b;
  --am-danger: #b42318;

  /* ---- 逾期 / 警示标记（选题表与今日任务共用同一套） ---- */
  --am-overdue-bg: rgba(216, 138, 50, 0.14);
  --am-overdue-text: #a8641f;

  /* ---- 圆角阶梯 ---- */
  --am-radius-nav: 10px;       /* 导航项、小型 hover 区 */
  --am-radius-control: 14px;   /* 按钮、输入框、紧凑控件 */
  --am-radius-card: 18px;      /* 内容模块、表格容器、状态卡 */
  --am-radius-float: 20px;     /* 结果卡、浮层面板 */
  --am-radius-modal: 28px;     /* 基线认证弹窗 */
  --am-radius-pill: 999px;     /* toast、状态胶囊、账号 chip、标签 */

  /* ---- 阴影阶梯 ---- */
  --am-shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.04);
  --am-shadow-card: 0 18px 42px rgba(0, 0, 0, 0.06);
  --am-shadow-float: 0 24px 70px rgba(0, 0, 0, 0.18);
  --am-shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.14), 0 4px 18px rgba(0, 0, 0, 0.06);

  /* ---- 布局 ---- */
  --am-sidebar-width: 224px;   /* 基线两栏后台的侧栏宽 */
  --workspace-gap: 15px;       /* 本项目工具外壳的统一间距（列间距与外壳内边距共用） */
}



/* =========================================================================
   项目扩展基元层
   -------------------------------------------------------------------------
   来源：static/styles.css 里本项目 UI 已稳定使用的形态。
   提取做法：保留原值，把业务类名替换为通用 am- 前缀；括号内是源类名与行号，
   便于回源核对。

   依赖：design-tokens.css（或等价 token）。
   ========================================================================= */

/* ------------------------------------------------------------------
   1. 三栏工具外壳（源：.tool-shell / .tool-layout，styles.css:10、29）
      左窄栏（导航）| 中栏（列表）| 右栏（工作区，自适应）
   ------------------------------------------------------------------ */

.am-tool-shell {
  width: 100%;
  margin: 0;
  padding: var(--workspace-gap, 15px);
}

.am-tool-layout {
  display: grid;
  grid-template-columns: minmax(96px, 180px) minmax(200px, 280px) minmax(0, 1fr);
  align-items: start;
  gap: var(--workspace-gap, 15px);
  width: 100%;
}

.am-tool-column {
  min-width: 0;   /* 让内部滚动容器与省略号正常工作 */
}

/* 收起左窄栏：列宽与间距一起过渡，避免跳变（源：.tool-layout.is-account-collapsed） */
@media (min-width: 901px) {
  .am-tool-layout {
    transition: grid-template-columns 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
                column-gap 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .am-tool-layout.is-rail-collapsed {
    grid-template-columns: minmax(76px, 76px) minmax(200px, 280px) minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------
   2. 左侧主导航（源：.workspace-navigation，styles.css:4441-4445、4860）
   ------------------------------------------------------------------ */

.am-rail-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}

.am-rail-nav button,
.am-rail-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--am-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.am-rail-nav svg,
.am-rail-nav button > span:first-child {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  font-size: 21px;   /* 用文字符号当图标时的字号 */
  text-align: center;
}

.am-rail-nav button:hover,
.am-rail-nav a:hover {
  background: #fafafa;
  color: var(--am-text);
}

.am-rail-nav .is-active {
  background: var(--am-accent-soft);
  color: var(--am-text);
}

/* ------------------------------------------------------------------
   3. 面板头（源：.monitor-panel-head，styles.css:6863）
      标题在左、操作在右，底边与左侧菜单起始线对齐
   ------------------------------------------------------------------ */

.am-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ------------------------------------------------------------------
   4. 语义标签（源：.monitor-tag 及 is-* 变体，styles.css:6884-6921）
      两种尺度的胶囊：小标签 12px（整屏统一），逾期标记 11.5px。
      浅底深字，不抢标题和指标。
   ------------------------------------------------------------------ */

.am-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--am-radius-pill);
  background: var(--am-soft);
  color: var(--am-muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

/* 源类名对照：is-today / is-primary / is-worth / is-backup */
.am-tag.is-success { background: #eef5f0; color: #3c6a52; }
/* 源类名对照：is-warm */
.am-tag.is-warning { background: #fdf1e3; color: #a0662a; }
/* 源类名对照：is-new */
.am-tag.is-info { background: #eaf1fc; color: #4a70a5; }
/* 源类名对照：is-monitored */
.am-tag.is-accent { background: #efeafc; color: #5a49a6; }

/* 逾期 / 警示标记（源：.topics-overdue，styles.css:4718） */
.am-badge-overdue {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--am-radius-pill);
  background: var(--am-overdue-bg);
  color: var(--am-overdue-text);
  font-size: 11.5px;
  line-height: 1.35;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   5. 分段控件（源：.draft-mode-tabs / .draft-mode-tab，
      styles.css:4950-4972；选中态另与 .project-settings-tab 同构）
      浅灰轨道 + 白色选中胶囊 + 极轻投影，是项目里切换视图的统一形态。
   ------------------------------------------------------------------ */

.am-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: #f2f2f4;
}

.am-segmented-item {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  padding: 0 18px;
  background: transparent;
  color: #6b6b72;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.am-segmented-item.is-active {
  color: var(--am-accent, #1d1d1f);
  font-weight: 600;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ------------------------------------------------------------------
   6. 业务弹窗卡片（源：.modal-card / .modal-content / .modal-actions，
      styles.css:684、815、819）
      无外边框，靠遮罩与阴影分层；宽 min(480px,100%)，圆角 18px。
      注意：这是项目自有弹窗，比基线 .am-modal（520px / 28px 圆角）更紧凑。
   ------------------------------------------------------------------ */

.am-modal-card {
  width: min(480px, 100%);
  overflow: hidden;
  border: 0;
  border-radius: var(--am-radius-card);
  color: var(--am-text);
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(25, 31, 43, 0.2), var(--am-shadow-soft);
}

.am-modal-card-body {
  padding: 16px 26px 18px;
}

.am-modal-card-title {
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: 0;   /* 源项目此处为 -0.02em，属历史遗留，规范不沿用负字距 */
}

.am-modal-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* ------------------------------------------------------------------
   7. 细滚动条（源：项目内多处滚动容器，styles.css:9494-9510 等）
      Firefox 与 WebKit 两半必须成对声明；轨道透明、滑块 6px 圆角半透明。
      Chromium 里非 auto 的 scrollbar-width 会盖住伪元素，故用 @supports 放开。
   ------------------------------------------------------------------ */

.am-thin-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.am-thin-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.am-thin-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.am-thin-scroll::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
}

.am-thin-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

@supports selector(::-webkit-scrollbar) {
  .am-thin-scroll {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
}