/* ============================================================
   HerLife AI Studio — Mobile Presentation Layer (V2 · v11)
   UI Authority: HerLife OS Frozen UI Foundation tokens + classes.
   Aligned to ui.jsx / ui-frozen-foundation-v1.css semantics,
   implemented as STATIC vanilla HTML/CSS/JS (no build system).
   NO second AI Studio base token vocabulary — Foundation tokens only.
   ============================================================ */
:root {
  color-scheme: light;

  /* ---- HerLife Frozen UI Foundation authority tokens ---- */
  --graphite: #1C1F1E;
  --sage: #5B6F62;
  --sage-deep: #4c5e53;
  --ivory: #F7F4EF;
  --gold-authority: #DAA259;
  --amber: #FFB45C;
  --rose: #E57373;
  --sky: #4EA3FF;

  --canvas: var(--ivory);
  --surface-base: #fffdf8;
  --surface-raised: #ffffff;
  --surface-floating: #fffaf2;

  --ink-primary: var(--graphite);
  --ink-secondary: #3f4843;
  --ink-meta: #58625c;

  --foundation-line: rgba(28, 31, 30, .15);
  --foundation-line-strong: rgba(28, 31, 30, .25);

  --mocha: var(--sage);
  --mocha-soft: #dfe8e1;
  --bronze: var(--gold-authority);

  --danger: var(--rose);
  --danger-soft: #fbe5e3;
  --warning: var(--amber);
  --warning-soft: #fff0d9;
  --complete-neutral: var(--sage);
  --complete-neutral-soft: #e1eae3;

  --mist-rose: #fbe5e3;
  --mist-blue-gray: #e7f1fb;
  --warm-sand: #f8e8cf;

  /* Legacy bridge kept for parity with foundation */
  --surface: var(--surface-base);
  --ink: var(--ink-primary);
  --ink-soft: var(--ink-secondary);
  --ink-muted: #4d5751;
  --ink-faint: var(--ink-meta);
  --line: var(--foundation-line);
  --accent: var(--mocha);
  --accent-soft: var(--mocha-soft);
  --ok: var(--complete-neutral);

  --foundation-shadow-raised: 0 6px 18px rgba(28, 31, 30, .08), 0 1px 3px rgba(28, 31, 30, .05);
  --foundation-shadow-floating: 0 18px 42px rgba(28, 31, 30, .14), 0 2px 6px rgba(28, 31, 30, .07);

  --radius-xl: 22px;
  --radius-lg: 17px;
  --radius-md: 13px;

  /* ---- Mobile shell / safe-area (OS authority) ---- */
  --header-h: 0px;
  --bottom-h: calc(66px + var(--hl-safe-bottom, env(safe-area-inset-bottom)));
  /* iOS 内联播放器的原生控件条高度（含触摸余量）。预览的净空带按它留，不靠猜像素。 */
  --hl-native-control-clearance: 56px;

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", "HerLife Print CJK", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html { background: var(--canvas); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink-primary);
  background: var(--canvas);
  overscroll-behavior-y: none;
  font-weight: 450;
  line-height: 1.5;
}
button, input, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img, video { display: block; }
p, h1, h2, h3 { margin: 0; }
h1, h2, h3, strong { color: var(--ink-primary); }
::selection { color: var(--ink-primary); background: var(--warm-sand); }
:focus-visible { outline: 3px solid rgba(91, 111, 98, .36); outline-offset: 2px; }

/* ============================================================
   APP SHELL（固定底栏 + 弹性主区，避开 grid 自动放置陷阱）
   iPhone 真实环境下：100dvh grid + display:none 顶栏会被 auto-flow
   误把 1fr 灌到底栏，导致 nav 拉伸为整页高列。
   改为 flex column + safe-area 预留底栏，行为可预测。
   ============================================================ */
.app-shell {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  width: 100%;
  background: var(--canvas);
}
.app-shell[hidden] { display: none; }
.shell-topbar {
  flex: 0 0 auto;
  height: var(--hl-safe-top, env(safe-area-inset-top, 0px));
  background: var(--canvas);
}
.main-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 给底部导航留出空间，避免正文被遮挡；底栏高度由 .bottom-nav 自身控制 */
  padding-bottom: calc(80px + var(--hl-safe-bottom, env(safe-area-inset-bottom, 0px)));
  scrollbar-color: rgba(91, 111, 98, .36) transparent;
}
.tab-page[hidden] { display: none; }
.page { padding: 18px 18px calc(24px + var(--hl-safe-bottom, env(safe-area-inset-bottom))); max-width: 560px; margin: 0 auto; width: 100%; }
.page-header { margin-bottom: 16px; }
.page-header .eyebrow { margin-bottom: 6px; }
.page-title { font-size: 26px; font-weight: 760; letter-spacing: -.035em; line-height: 1.2; }
.page-description { margin-top: 8px; color: var(--ink-meta); font-size: 14px; line-height: 1.6; }

/* ---------- Bottom Nav（fixed 高度，4 等分，绝不拉伸） ---------- */
.bottom-nav {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;          /* 按钮保持自身高度，不被行高撑高 */
  justify-items: stretch;
  height: calc(64px + var(--hl-safe-bottom, env(safe-area-inset-bottom, 0px)));
  padding: 4px 8px var(--hl-safe-bottom, env(safe-area-inset-bottom, 0px));
  background: rgba(250, 248, 244, .98);
  border-top: 1px solid var(--foundation-line);
}
.bottom-nav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 56px;                  /* 明确高度，避免被 grid 拉伸 */
  align-self: center;            /* 关键：在 grid 行内不被 stretch */
  border: 0; border-radius: 11px; background: transparent;
  color: var(--ink-meta); font-size: .7rem; font-weight: 600; cursor: pointer;
}
.bottom-nav button .nav-ico { font-size: 20px; line-height: 1; }
.bottom-nav button .nav-label { font-size: 11px; font-weight: 650; }
/* active 只能是按钮内部的轻量强调，绝不形成贯穿屏高的竖向块 */
.bottom-nav button.is-active {
  color: var(--ink-primary);
  background: var(--mocha-soft);
  font-weight: 720;
  height: 56px;                  /* 与普通态同高，仅背景色变化 */
}
.bottom-nav button:active { background: var(--mocha-soft); }
/* 待审 是底栏里唯一的跨页栏目（另一个文档），几何必须与三个按钮逐条一致，否则四等分会错位。 */
.bottom-nav .nav-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 56px;
  align-self: center;
  border: 0; border-radius: 11px; background: transparent;
  color: var(--ink-meta); font-size: .7rem; font-weight: 600; text-decoration: none;
}
.bottom-nav .nav-tab .nav-ico { font-size: 20px; line-height: 1; }
.bottom-nav .nav-tab .nav-label { font-size: 11px; font-weight: 650; }
.bottom-nav .nav-tab.is-active {
  color: var(--ink-primary); background: var(--mocha-soft); font-weight: 720; height: 56px;
}
.bottom-nav .nav-tab:active { background: var(--mocha-soft); }
html[data-keyboard-open="true"] .bottom-nav { opacity: 0; pointer-events: none; transform: translateY(100%); }

/* ============================================================
   Foundation component class contracts
   ============================================================ */
.card {
  padding: 16px 18px;
  border: 1px solid var(--foundation-line);
  border-radius: var(--radius-lg);
  background: var(--surface-base);
  box-shadow: 0 1px 2px rgba(28, 31, 30, .045);
}
.card-interactive { transition: transform .1s ease, border-color .15s ease, background-color .15s ease; }
.card-interactive:active { transform: scale(.994); border-color: var(--foundation-line-strong); background: var(--surface-raised); }

.button {
  min-height: 48px; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 12px;
  font-size: .875rem; font-weight: 680; cursor: pointer;
  transition: transform .1s ease, background-color .14s ease, border-color .14s ease, color .14s ease, opacity .14s ease;
}
.button-block { width: 100%; }
.button-primary { color: var(--surface-raised); background: var(--sage); }
.button-primary:active:not(:disabled) { background: var(--sage-deep); }
.button-soft { color: var(--ink-primary); background: #eee9e1; border-color: var(--foundation-line); }
.button-soft:active { background: #dde5df; }
.button-quiet { color: var(--ink-primary); background: transparent; border-color: var(--foundation-line); }
.button-quiet:active { background: #dde5df; }
.button-danger { color: #fffaf7; background: var(--danger); }
.button-danger-soft { color: #823d3d; background: var(--danger-soft); border-color: rgba(229, 115, 115, .4); }
.button:active:not(:disabled) { transform: scale(.982); }
.button:disabled { opacity: .5; }
.button .spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite; }

.icon-button {
  min-width: 40px; min-height: 40px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--foundation-line); border-radius: 11px;
  background: var(--surface-raised); color: var(--ink-primary);
  font-weight: 800; cursor: pointer; font-size: 18px; letter-spacing: 1px;
}

/* ---------- StatusPill（Foundation .status-pill + tone） ---------- */
.status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 27px; padding: 0 10px;
  color: var(--ink-secondary); background: var(--surface-soft, #eee9e1);
  border: 1px solid var(--foundation-line); border-radius: 999px;
  font-size: .68rem; font-weight: 680; line-height: 1; white-space: nowrap;
}
.status-success { color: var(--complete-neutral); background: var(--complete-neutral-soft); border-color: rgba(91,111,98,.3); }
.status-warm { color: #755328; background: var(--warm-sand); border-color: rgba(255,180,92,.38); }
.status-danger { color: #823d3d; background: var(--danger-soft); border-color: rgba(229,115,115,.4); }
.status-neutral { color: var(--ink-secondary); background: #eee9e1; border-color: var(--foundation-line); }
.status-doing { color: var(--mocha); background: var(--mocha-soft); border-color: rgba(91,111,98,.3); }

/* ---------- SectionTitle（Foundation） ---------- */
.section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 26px 2px 12px; }
.section-title h2 { font-size: 17px; font-weight: 720; letter-spacing: -.018em; line-height: 1.25; }
.section-title p { margin-top: 3px; color: var(--ink-meta); font-size: .72rem; }
.section-title small { color: var(--ink-meta); font-size: .68rem; white-space: nowrap; padding-top: 3px; }
.active-section { margin-top: 24px; }

/* ---------- Segmented（Foundation） ---------- */
.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 3px; padding: 4px;
  background: #eee9e1; border: 1px solid var(--foundation-line); border-radius: 13px;
}
.segmented button {
  min-height: 40px; border: 0; border-radius: 9px;
  color: var(--ink-secondary); background: transparent;
  font-weight: 630; font-size: .82rem; cursor: pointer;
}
.segmented button.active,
.segmented button[aria-selected="true"] {
  color: var(--ink-primary); background: var(--surface-raised);
  box-shadow: 0 2px 8px rgba(28,31,30,.1); font-weight: 700;
}
.segmented button b { margin-left: 4px; color: var(--ink-meta); font-weight: 650; }
.works-segmented { margin: 0 0 18px; }

/* ---------- EmptyState（Foundation） ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; padding: 28px 18px; color: var(--ink-secondary); text-align: center; }
.empty-state > span { width: 40px; height: 40px; margin-bottom: 10px; display: grid; place-items: center; color: var(--mocha); background: var(--mocha-soft); border-radius: 12px; font-size: 20px; }
.empty-state strong { font-size: 15px; }
.empty-state p { margin-top: 5px; color: var(--ink-meta); font-size: .78rem; max-width: 30ch; }
.hidden { display: none !important; }

/* ---------- Sheet（Foundation） ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(37, 31, 27, .28);
  backdrop-filter: blur(3px);
}
.sheet-backdrop[hidden] { display: none; }
.sheet {
  position: relative; width: 100%; max-width: 560px;
  max-height: min(100dvh, var(--visual-viewport-height, 100dvh));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.52); border-radius: 25px 25px 0 0;
  background: var(--surface-floating); box-shadow: var(--foundation-shadow-floating);
  animation: sheet-up .22s ease;
}
.sheet-handle { width: 44px; height: 5px; margin: 8px auto 4px; border-radius: 99px; background: #cfc5bc; }
.sheet-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px 12px; border-bottom: 1px solid var(--foundation-line); }
.sheet-header h2 { font-size: 1.06rem; font-weight: 730; }
.sheet-header p { margin-top: 3px; color: var(--ink-meta); font-size: .75rem; }
.sheet-actions { display: grid; gap: 6px; padding: 12px 14px calc(16px + var(--hl-safe-bottom, env(safe-area-inset-bottom))); }
.sheet-action {
  width: 100%; min-height: 54px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--foundation-line); border-radius: 14px;
  background: var(--surface-raised); color: var(--ink-primary);
  text-align: left; font-size: .92rem; font-weight: 650; cursor: pointer;
}
.sheet-action small { color: var(--ink-meta); font-weight: 500; font-size: .7rem; }
.sheet-action.is-danger { color: #823d3d; border-color: rgba(229,115,115,.35); }
.sheet-action.is-danger small { color: rgba(130,61,61,.7); }
.sheet-action:active { background: #f3eee8; }
.sheet-action:disabled { opacity: .5; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }

/* ============================================================
   LOGIN
   ============================================================ */
.screen { min-height: 100vh; }
.screen[hidden] { display: none !important; }
.screen-login {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; gap: 26px;
  padding: 20px 20px calc(40px + var(--hl-safe-bottom, env(safe-area-inset-bottom)));
  max-width: 560px; margin: 0 auto; width: 100%;
}
.login-cover { display: grid; gap: 16px; justify-items: center; text-align: center; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-centered { justify-content: center; }
.brand-mark { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--surface-raised); background: var(--sage); font-family: Georgia, "Songti SC", serif; font-size: 26px; }
.brand-mark.small { width: 38px; height: 38px; font-size: 21px; border-radius: 12px; }
.brand-name { font: 600 21px/1.1 Georgia, "Songti SC", serif; letter-spacing: -.01em; color: var(--ink-primary); }
.eyebrow, .kicker { margin: 0; color: var(--mocha); font-size: 11px; line-height: 1.4; font-weight: 720; letter-spacing: .09em; }
.login-tagline { color: var(--ink-meta); font-size: 16px; letter-spacing: .02em; }
.login-card { padding: 28px 22px; }

/* ============================================================
   制作 首页：入口卡 + 进行中的制作
   ============================================================ */
.entry-stack { display: grid; gap: 12px; }
.entry-card {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px 16px; cursor: pointer;
}
.entry-icon { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; font-size: 20px; }
.entry-video-ico { color: var(--surface-raised); background: var(--sage); }
.entry-photo-ico { color: var(--ink-meta); background: #eee9e1; }
.entry-copy { flex: 1; min-width: 0; display: grid; gap: 3px; }
.entry-copy strong { font-size: 17px; font-weight: 700; }
.entry-copy small { color: var(--ink-meta); font-size: 13px; }
.entry-chevron { color: var(--ink-faint); font-size: 24px; }
.entry-lock { font-size: 15px; letter-spacing: 2px; color: var(--ink-faint); font-weight: 800; }
.entry-card.is-locked { opacity: 1; cursor: default; }
.entry-card.is-locked .entry-copy strong { color: var(--ink-meta); }
.entry-card.is-locked .entry-copy small { color: var(--ink-faint); }

/* ---------- 进行中的制作：compact job rows ---------- */
.active-jobs-list { display: grid; gap: 10px; }
.job-row {
  display: flex; align-items: stretch; gap: 0;
  overflow: hidden;
  border: 1px solid var(--foundation-line); border-radius: var(--radius-lg);
  background: var(--surface-base); box-shadow: 0 1px 2px rgba(28,31,30,.04);
}
.job-hit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px; text-align: left; border: 0; background: none; cursor: pointer; }
.job-hit:active { background: var(--surface-raised); }
.job-row.is-danger-left { border-left: 3px solid var(--warning); }
.job-row.is-neutral-left { border-left: 3px solid var(--foundation-line-strong); }
.job-row.is-doing-left { border-left: 3px solid var(--sage); }

.job-thumb { width: 72px; height: 96px; flex: 0 0 auto; position: relative; overflow: hidden; border-radius: 11px; background: #eee9e1; display: grid; place-items: center; }
.job-thumb video, .job-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.job-thumb .thumb-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-faint); font-size: 20px; }
.job-thumb .dur-chip { position: absolute; z-index: 2; right: 5px; bottom: 5px; padding: 2px 6px; border-radius: 6px; font-size: 10px; font-variant-numeric: tabular-nums; color: #fff; background: rgba(20,16,14,.6); }
.job-thumb .pending-badge { position: relative; z-index: 1; display: grid; place-items: center; }
.job-thumb .pending-badge .dot-pulse { width: 18px; height: 18px; border: 2px solid rgba(91,111,98,.25); border-top-color: var(--sage); border-radius: 50%; animation: spin .8s linear infinite; }
.job-meta { flex: 1; min-width: 0; display: grid; align-content: center; gap: 3px; }
.job-kind { color: var(--ink-meta); font-size: 11px; font-weight: 650; letter-spacing: .02em; }
.job-title { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.job-sub { font-size: 12px; color: var(--ink-meta); line-height: 1.45; }
.job-right { flex: 0 0 auto; align-self: center; display: grid; justify-items: end; gap: 6px; padding-right: 10px; }
.job-main-action { min-height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--foundation-line); background: var(--surface-raised); color: var(--ink-primary); font-size: 13px; font-weight: 700; cursor: pointer; }
.job-main-action:active { background: #f3eee8; }
.job-more { min-width: 34px; min-height: 34px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-meta); font-weight: 800; font-size: 16px; letter-spacing: 1px; cursor: pointer; border-radius: 10px; }
.job-more:active { background: #f3eee8; }

/* ============================================================
   作品：video 单列 compact 行 / photo 日期组 + PhotoGrid
   ============================================================ */
.works-body { min-height: 40px; }
.work-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid var(--foundation-line); border-radius: var(--radius-lg);
  background: var(--surface-base); box-shadow: 0 1px 2px rgba(28,31,30,.04);
}
.work-hit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px; text-align: left; border: 0; background: none; cursor: pointer; }
.work-hit:active { background: var(--surface-raised); }
.work-thumb { width: 92px; height: 120px; flex: 0 0 auto; position: relative; overflow: hidden; border-radius: 12px; background: #eee9e1; display: grid; place-items: center; }
.work-thumb video, .work-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.work-thumb .thumb-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, #eee9e1, #efe6dc); color: var(--ink-faint); font-size: 22px; }
.work-thumb .dur-chip { position: absolute; z-index: 2; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-variant-numeric: tabular-nums; color: #fff; background: rgba(20,16,14,.6); }
.work-thumb .kind-chip { position: absolute; z-index: 2; left: 6px; top: 6px; padding: 2px 7px; border-radius: 99px; font-size: 10px; font-weight: 800; letter-spacing: .05em; background: rgba(255,252,248,.9); color: var(--sage-deep); }
.work-meta { flex: 1; min-width: 0; display: grid; align-content: center; gap: 5px; }
.work-meta .work-title { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.work-meta .work-sub { font-size: 12px; color: var(--ink-meta); line-height: 1.45; }

/* ---------- Photo：SectionTitle(日期) + PhotoGrid ---------- */
.photo-day-group { margin-bottom: 18px; }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.photo-grid button { position: relative; padding: 0; border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 3/4; background: #eee9e1; cursor: pointer; }
.photo-grid button img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid button span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-size: 10px; color: #fff; background: linear-gradient(180deg, transparent, rgba(20,16,14,.55)); text-align: left; }
.photo-day-group .section-title { margin-top: 6px; }

/* ============================================================
   STATUS 紧凑状态卡（废止巨大空白 orb 页）
   ============================================================ */
.topbar { display: flex; align-items: center; gap: 12px; margin: 2px 0 18px; }
.screen:not(.screen-login) { padding: 18px 20px calc(40px + var(--hl-safe-bottom, env(safe-area-inset-bottom))); max-width: 560px; margin: 0 auto; width: 100%; }
.back { width: 44px; height: 44px; flex: 0 0 auto; margin-left: -8px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; font-size: 32px; line-height: 1; color: var(--ink-primary); cursor: pointer; }
.back:active { background: #eee9e1; }

.status-job-card {
  display: grid; gap: 2px;
  padding: 16px 18px; margin-bottom: 18px;
  border: 1px solid var(--foundation-line); border-radius: var(--radius-lg);
  background: var(--surface-base); box-shadow: 0 1px 2px rgba(28,31,30,.04);
}
.sjm-kind { color: var(--mocha); font-size: 11px; font-weight: 750; letter-spacing: .04em; }
.sjm-intent { font-size: 17px; font-weight: 720; line-height: 1.4; color: var(--ink-primary); overflow-wrap: anywhere; }
.sjm-time { margin-top: 5px; color: var(--ink-meta); font-size: 13px; }
.status-stage { display: grid; justify-items: center; text-align: center; padding-top: 6px; }
.status-orb { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; }
.status-orb.doing span { width: 22px; height: 22px; border: 3px solid rgba(91,111,98,.25); border-top-color: var(--sage); border-radius: 50%; animation: spin .8s linear infinite; }
.status-orb.doing { background: var(--mocha-soft); }
.status-orb.warn span { width: 26px; height: 26px; border-radius: 50%; background: var(--warning); position: relative; }
.status-orb.warn span::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; }
.status-orb.warn { background: var(--warm-sand); }
.status-orb.neutral span { width: 24px; height: 24px; border-radius: 50%; background: var(--foundation-line-strong); position: relative; }
.status-orb.neutral { background: #eee9e1; }
.status-h2 { font-size: 22px; }
.status-detail { max-width: 32ch; margin: 10px auto 0; color: var(--ink-meta); font-size: 15px; line-height: 1.65; white-space: pre-line; }
.status-actions { margin-top: 26px; display: grid; gap: 10px; }

.overall { margin: 20px 0 6px; text-align: left; }
.progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: #e5e0da; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--sage); transition: width .25s ease; }
.progress-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; color: var(--ink-meta); font-size: 12px; }
.file-list { display: grid; gap: 10px; margin-top: 4px; }
.file-list.compact { margin-top: 18px; text-align: left; }
.file-row { padding: 12px 14px; border: 1px solid var(--foundation-line); border-radius: 12px; background: var(--surface-base); }
.file-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.file-size, .file-state { flex: 0 0 auto; color: var(--ink-meta); font-size: 12px; }
.file-state.ready { color: var(--complete-neutral); }

/* REAL_PROGRESS_UI_V1 §6: 制作详情 stays one tap away and reads like a record, not a page. */
.facts { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--foundation-line); border-radius: 12px; background: var(--surface-base); text-align: left; }
.fact-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--foundation-line); }
.fact-row:last-child { border-bottom: 0; }
.fact-key { flex: 0 0 auto; color: var(--ink-meta); font-size: 12px; }
.fact-value { min-width: 0; overflow-wrap: anywhere; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }

/* ============================================================
   DETAIL 统一媒体详情：COMPACT viewport
   （媒体最大高度 ≈ 可用内容区 45–50%，非全宽 9:16 撑满）
   ============================================================ */
.detail-head { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.detail-head .back { margin-right: 2px; }
.detail-head-copy { flex: 1; min-width: 0; }
.detail-h2 { font-size: 22px; }
.detail-meta { margin: 0 4px 12px; color: var(--ink-meta); font-size: 13px; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: baseline; }
.detail-meta b { color: var(--ink-secondary); font-weight: 650; }

.viewer-block { display: flex; flex-direction: column; }
.media-viewer {
  position: relative; width: 100%;
  max-height: 46vh;                       /* ~45–50% of usable content area */
  display: grid; place-items: center;
  overflow: hidden; border-radius: var(--radius-lg);
  background: #29231f; box-shadow: var(--foundation-shadow-raised);
}
.media-viewer video {
  width: 100%; height: 100%;
  max-height: 46vh; object-fit: contain;
}
/* 中央自定义 ▶ overlay 已删除（DUPLICATE_PLAY_CONTROL）：播放/暂停/进度/音量/全屏一律由原生 <video controls> 提供 */
/* 全屏入口（iOS Safari：webkitEnterFullscreen；桌面：requestFullscreen）。右上角，避开原生播放条 */.fullscreen-button {
  position: absolute; z-index: 3; right: 10px; top: 10px;
  width: 38px; height: 38px; border: 0; border-radius: 10px;
  display: grid; place-items: center;
  color: #fff; background: rgba(20,16,14,.55);
  font-size: 17px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(2px); transition: transform .1s ease, opacity .2s ease;
}
.fullscreen-button:active { transform: scale(.94); }
.fullscreen-button.hidden { display: none; }
.media-viewer:fullscreen { background: #000; }
.media-viewer:-webkit-full-screen { background: #000; }
.media-viewer:fullscreen video, .media-viewer:-webkit-full-screen video { width: 100%; height: 100%; object-fit: contain; }
.media-status { min-height: 18px; margin: 6px 2px 0; color: var(--ink-meta); font-size: 12px; }
.media-error { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 20px; background: rgba(41,35,31,.9); color: #fff; text-align: center; }
.media-error span { font-size: 15px; font-weight: 650; }
.media-error .button-quiet { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }

.photo-compare { display: grid; gap: 14px; }
.photo-tile { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: #eee9e1; box-shadow: var(--foundation-shadow-raised); }
.photo-tile img { width: 100%; max-height: 46vh; object-fit: contain; background: #29231f; }
.photo-tile figcaption { padding: 8px; text-align: center; color: var(--ink-meta); font-size: 13px; }
.media-note { margin: 16px 2px; color: var(--ink-meta); font-size: 14px; line-height: 1.6; }

/* 主操作同一行双按钮，首屏可见 */
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.detail-actions .button-primary, .detail-actions .button-soft { width: 100%; }

.disclosure { margin-top: 12px; border: 1px solid var(--foundation-line); border-radius: var(--radius-lg); background: var(--surface-base); }
.revision-body { display: grid; gap: 10px; padding: 14px 16px; }
.revision-body textarea { margin-top: 2px; }
.revision-body .error { margin-top: 4px; }

/* ============================================================
   Upload / fields / misc
   ============================================================ */
.field { display: block; color: var(--ink-secondary); font-size: 13px; font-weight: 650; }
.field input, .field textarea, .thought-label textarea {
  width: 100%; margin-top: 8px;
  min-height: 48px; padding: 0 14px;
  border: 1px solid var(--foundation-line-strong); border-radius: 12px;
  color: var(--ink-primary); background: var(--surface-raised);
  outline: none; caret-color: var(--mocha);
  box-shadow: inset 0 1px 0 rgba(28,31,30,.035);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input { font-size: 17px; }
.field textarea, .thought-label textarea { min-height: 92px; padding: 12px 14px; resize: vertical; line-height: 1.55; font-size: 16px; }
.field input:focus, .field textarea:focus, .thought-label textarea:focus {
  border-color: rgba(91,111,98,.58); box-shadow: 0 0 0 3px rgba(91,111,98,.12);
}
.field input::placeholder, .field textarea::placeholder, .thought-label textarea::placeholder { color: #707a74; opacity: 1; }
.thought-label { display: block; margin-top: 14px; }
.thought-label span { color: var(--ink-meta); font-weight: 500; }
.stack { display: grid; gap: 14px; }
.sticky-action { margin-top: 22px; position: sticky; bottom: calc(16px + var(--hl-safe-bottom, env(safe-area-inset-bottom))); }
.error { min-height: 1em; margin: 10px 2px 0; color: #823d3d; font-size: 13px; line-height: 1.5; white-space: pre-line; }
.file-picker {
  min-height: 120px; margin: 18px 0; padding: 20px;
  display: flex; align-items: center; gap: 18px;
  border: 1.5px dashed var(--foundation-line-strong); border-radius: var(--radius-lg);
  background: var(--surface-base); cursor: pointer;
}
.file-picker:active { background: #f3eee8; }
.file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.picker-plus { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 16px; background: var(--mocha-soft); color: var(--mocha); font-size: 28px; font-weight: 300; }
.picker-copy strong { display: block; font-size: 17px; }
.picker-copy small { display: block; margin-top: 4px; color: var(--ink-meta); font-weight: 500; }
.upload-context { margin: -8px 0 6px; }
.upload-context .banner { padding: 13px 15px; border-radius: 13px; background: var(--mocha-soft); color: var(--sage-deep); font-size: 14px; line-height: 1.55; }
.loading-line { text-align: center; color: var(--ink-faint); font-size: 13px; padding: 18px 0; }

/* ---------- Transient toast flash ---------- */
.toast-flash {
  position: fixed; left: 50%; bottom: calc(96px + var(--hl-safe-bottom, env(safe-area-inset-bottom))); transform: translateX(-50%);
  z-index: 300; max-width: 88vw; padding: 11px 16px;
  color: var(--ink-primary); background: rgba(255,253,249,.98);
  border: 1px solid var(--foundation-line); border-radius: 999px;
  box-shadow: var(--foundation-shadow-floating); font-size: 14px; font-weight: 600; text-align: center;
  animation: toast-up .2s ease;
}
.toast-flash.is-error { color: #823d3d; background: rgba(255,250,248,.98); border-color: rgba(155,78,73,.22); }
@keyframes toast-up { from { transform: translate(-50%, 10px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ============================================================
   我的 / helpers
   ============================================================ */
.me-card { padding: 22px 22px; }
.me-name { font: 600 24px/1.2 Georgia, "Songti SC", serif; color: var(--ink-primary); }
.me-role { margin-top: 5px; color: var(--ink-meta); font-size: 14px; }
.me-list { margin-top: 18px; border-top: 1px solid var(--foundation-line); }
.row-button { width: 100%; min-height: 56px; padding: 0 4px; margin-top: 2px; display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; font-size: 16px; font-weight: 650; cursor: pointer; color: var(--ink-primary); }
.row-button:active { opacity: .6; }
.tips-card { margin-top: 16px; }
.about-copy { margin-top: 10px; color: var(--ink-meta); font-size: 14px; line-height: 1.7; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* iPhone 窄屏细节 */
@media (max-width: 380px) {
  .page-title { font-size: 24px; }
  .page { padding-inline: 14px; }
  .card { padding: 14px 15px; }
  .bottom-nav button .nav-label { font-size: 10px; }
}


/* ============================================================
   ASSET LIBRARY（HERLIFE_AI_STUDIO_CLOUD_MEDIA_PIPELINE_V1）
   视频与照片共用一个素材库，靠 media_type 过滤区分，
   不建两套网盘页面（DECISION 06）。
   ============================================================ */
/* 时间流骨架：一级分组是「天」，天里是批次，批次里是缩略图网格。 */
.asset-timeline { display: flex; flex-direction: column; gap: 18px; }
.asset-day { display: flex; flex-direction: column; gap: 8px; }
.asset-day-head {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 0 7px;
  background: var(--canvas);
}
.asset-day-title { font-size: 15px; font-weight: 760; color: var(--ink-primary); }
.asset-day-count { font-size: 12px; color: var(--ink-meta); font-variant-numeric: tabular-nums; }
.asset-batch-title { font-size: 12px; color: var(--ink-meta); }
/* 移动端素材网格正式冻结为 2 列。
   之前是 repeat(auto-fill, minmax(112px,1fr))：同一页里 2 列和 3 列会混着出现，
   3 列时卡片被挤到放不下文件名，整页节奏也不稳。列数不再由容器剩余空间决定。
   minmax(0,1fr) 而不是 1fr：长文件名不许把某一列撑宽。 */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 10px;
  align-items: start;
}
/* 批次标记在网格里占满一行，缩略图才不会被打断成半空的一排 */
.asset-grid > .asset-batch-title { grid-column: 1 / -1; margin: 2px 0 0; }
.asset-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--foundation-line);
  border-radius: var(--foundation-radius, 14px);
  background: var(--surface, #fff);
}
.asset-thumb {
  flex: 0 0 auto; width: 100%; aspect-ratio: 1 / 1; border-radius: 11px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--mocha-soft); color: var(--mocha); font-size: 26px;
}
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-info { flex: 1 1 auto; min-width: 0; }
/* 两列下卡片只有 ~160px，单行 nowrap 等于把文件名砍成两三个字母；
   给两行再省略，够读出"是哪一份"，也不会把卡片撑高不齐。 */
.asset-name {
  font-size: .76rem; font-weight: 650; color: var(--ink-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; line-height: 1.3;
}
.asset-meta {
  margin-top: 2px; font-size: .68rem; color: var(--ink-meta);
  line-height: 1.45; overflow-wrap: anywhere;
}
.asset-state { font-size: .68rem; font-weight: 650; }
.asset-state.is-ready { color: var(--ink-primary); }
.asset-state.is-pending { color: var(--ink-meta); }
.asset-state.is-failed { color: var(--danger, #b4453c); }
.timeline-foot { margin-top: 12px; font-size: 12px; color: var(--ink-meta); text-align: center; }
.timeline-foot[hidden] { display: none; }

/* ============================================================
   MATERIAL_READONLY_PREVIEW_SIDECAR_V1
   瓦片上的真实缩略图与时长，以及只读沉浸式预览。
   与成片用的 .media-viewer 完全分开，互不影响。
   ============================================================ */
.asset-card { cursor: pointer; }
.asset-card:focus-visible { outline: 2px solid var(--mocha); outline-offset: 2px; }
.asset-thumb { position: relative; }
.asset-thumb-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.asset-thumb-img[hidden] { display: none; }
.asset-duration {
  position: absolute; right: 5px; bottom: 5px;
  padding: 1px 6px; border-radius: 99px;
  background: rgba(24, 22, 20, .74); color: #fff;
  font-size: .66rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.asset-duration[hidden] { display: none; }

.asset-viewer {
  position: fixed; inset: 0; z-index: 60;
  /* iOS 上 inset:0 量的是"大视口"，底部会被浏览器条/主屏指示条盖住。
     dvh 跟着可视视口走，五段才各自占到自己那一段：
     HEADER / MEDIA / NATIVE_CONTROL_CLEARANCE / PREVIEW_NAV / SAFE_AREA。
     原生控件画在 MEDIA 内侧底部，所以 MEDIA 与 PREVIEW_NAV 之间必须由
     净空带隔开，而不是靠"看起来还有一点缝"。 */
  height: 100vh;
  height: 100dvh;
  display: flex; flex-direction: column;
  background: rgba(18, 17, 16, .96); color: #f6f3ee;
}
.asset-viewer[hidden] { display: none; }
.asset-viewer-top {
  flex: 0 0 auto; flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: calc(12px + var(--hl-safe-top, env(safe-area-inset-top, 0px))) 16px 10px;
}
.asset-viewer-title {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: .82rem; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asset-viewer-close {
  flex: 0 0 auto; min-height: 40px; padding: 0 14px;
  border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, .16); color: #fff;
  font-size: .82rem; font-weight: 700;
}
.asset-viewer-stage {
  flex: 1 1 auto; min-height: 0;
  display: grid; place-items: center; padding: 8px 12px; overflow: hidden;
}
.asset-viewer-media { max-width: 100%; max-height: 100%; object-fit: contain; }
/* 这里不能设 touch-action：预览铺满一屏，任何禁用手势的写法都会吃掉 iOS 侧滑返回 */
img.asset-viewer-media { cursor: zoom-in; transition: transform .18s ease; }
img.asset-viewer-media.is-zoomed { transform: scale(2.4); cursor: zoom-out; }
.asset-viewer-clearance {
  /* iOS 原生控件画在 <video> 盒子内侧底部（约 44px）。这一段既不是视频也不是导航，
     谁都不许把内容铺进来 —— 上一版只靠 32px 间隙，真机上就是撞的。 */
  flex: 0 0 auto; flex-shrink: 0;
  height: var(--hl-native-control-clearance, 56px);
}
.asset-viewer-nav {
  flex: 0 0 auto; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 16px;
}
.asset-viewer-safe {
  flex: 0 0 auto; flex-shrink: 0;
  height: var(--hl-safe-bottom, env(safe-area-inset-bottom, 0px));
}
.asset-viewer-step {
  min-height: 40px; padding: 0 10px; border: 0; border-radius: 99px;
  background: transparent; color: rgba(246, 243, 238, .92);
  font-size: .82rem; font-weight: 650;
}
.asset-viewer-step[disabled] { opacity: .38; }
.asset-viewer-counter { font-size: .78rem; color: rgba(246, 243, 238, .82); font-variant-numeric: tabular-nums; }
.entry-library-ico { color: var(--mocha); }

/* 素材库上传进度与续传提示：沿用 .file-row / .progress-track 的既有节奏，
   不新增视觉语言。 */
.resume-note {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid var(--foundation-line);
}

/* Same rule the shell already uses: `display: flex` would otherwise win over the
   [hidden] attribute and leave an empty notice on screen with nothing to resume. */
.resume-note[hidden] { display: none; }

.resume-note .resume-copy { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.resume-note .resume-copy strong { color: var(--ink-primary); font-size: 15px; }
.resume-note .resume-copy small { color: var(--ink-meta); font-size: 12.5px; }
.resume-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.resume-actions .button { min-height: 40px; font-size: 13.5px; }
.file-row.is-failed .file-state { color: var(--danger); }
.file-row .button { margin-top: 8px; min-height: 36px; font-size: 13px; align-self: flex-start; }

@media (max-width: 380px) {
  .resume-note { padding: 12px 13px; }
}

/* Anything the client hides with the `hidden` attribute has to actually go away.
   A `display` rule on the element's own class beats the UA stylesheet's [hidden]
   default, which left an empty "素材库还是空的" panel under a populated library,
   a hidden 重试 button taking space, and an invisible error row still pushing
   layout. Each rule below is the companion to a class that sets `display`. */
.empty-state[hidden],
.viewer-block[hidden],
.media-error[hidden],
.button[hidden] { display: none; }


/* MATERIAL_LIBRARY_BACK_V1: 素材库从“制作”进入，是一层子页而不是第四个 Tab。
   明确返回键 + history 条目一起存在：按钮和 iPhone 左缘右滑都回“制作”。 */
.library-page-header { margin-bottom: 18px; }
.library-heading-row { display: flex; align-items: flex-start; gap: 4px; }
.library-heading-row > div { min-width: 0; flex: 1; }
.library-heading-row .eyebrow { margin-top: 6px; }
.library-back { margin-top: -2px; margin-left: -10px; }

/* WORK_MANUAL_UPLOAD_V1：作品页的导入入口与导入出来的成片行 */
.works-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.works-upload { flex: 0 0 auto; min-height: 40px; padding: 0 14px; font-size: .84rem; }
.imported-note { display: block; margin-top: 4px; font-size: .72rem; color: var(--ink-meta); }
.file-row.is-failed .imported-note { color: var(--danger, #b4453c); }
.file-row.is-failed .progress-track span { background: var(--danger, #b4453c); }
.upload-list[hidden] { display: none; }

/* ============================================================
   AI_STUDIO_MEDIA_INTERACTION_UNIFICATION_V1
   统一交互语法：【看】点媒体即预览 ·【常用】动作摆在可见处
   ·【破坏】左滑才出现删除。素材与作品共用同一套。
   ============================================================ */
/* overflow 会建一个新格式上下文，卡片自己的下边距就被关在单元格里：
   红底按单元格高度铺满，卡片下方于是永远露出一条删除键。间距改由单元格出才严丝合缝。 */
.swipe-cell { position: relative; overflow: hidden; border-radius: var(--radius-lg); margin-bottom: 10px; }
.swipe-cell .work-row { margin-bottom: 0; }
.asset-grid > .swipe-cell { margin-bottom: 0; }
/* 只锁横向：纵向滚动继续交给浏览器原生，斜滑不会让卡片乱跑 */
.swipe-face { position: relative; z-index: 1; touch-action: pan-y; transition: transform .18s ease; }
.swipe-action {
  position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 76px;
  border: 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--danger, #b4453c); color: #fff;
  font-size: .82rem; font-weight: 750; cursor: pointer;
}
.swipe-action.is-arming { background: #8f2f27; }
.swipe-action[disabled] { opacity: .6; }
.work-inline-actions { display: flex; align-items: center; gap: 8px; padding: 0 10px 9px; }
.work-inline-action {
  min-height: 30px; padding: 0 11px;
  border: 1px solid var(--foundation-line); border-radius: 99px;
  background: transparent; color: var(--ink-meta);
  font-size: .74rem; font-weight: 650; cursor: pointer;
}
.work-inline-action:active { background: var(--surface-raised); color: var(--ink-primary); }

/* MATERIAL_LIBRARY_SCALE_V1: two-column browse, lightweight tools and shared actions. */
.asset-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0; }
.asset-tools select, .asset-tools input { min-width:0; max-width:100%; min-height:40px; border:1px solid var(--foundation-line); border-radius:10px; background:var(--surface,#fff); color:var(--ink-primary); padding:6px 10px; font:inherit; font-size:12px; }
.asset-tools [hidden], .asset-selection-bar[hidden] { display:none; }
.asset-batch-toggle { grid-column:1/-1; min-height:44px; border:1px solid var(--foundation-line); border-radius:10px; background:transparent; color:var(--ink-primary); font:inherit; font-size:12px; }
.asset-card.is-selected { border-color:var(--mocha); box-shadow:inset 0 0 0 1px var(--mocha); }
.asset-selection-mark { position:absolute; top:7px; right:7px; width:24px; height:24px; border:2px solid #fff; border-radius:50%; background:rgba(35,29,25,.55); color:#fff; display:grid; place-items:center; font-weight:700; }
.asset-selection-bar { position:fixed; bottom:var(--bottom-h); left:0; right:0; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 14px; background:var(--surface,#fff); border-top:1px solid var(--foundation-line); z-index:12; }
.asset-selection-bar span { font-size:12px; }
#libraryView { padding-bottom:100px; }
video.asset-viewer-media { width:100%; height:100%; min-height:0; min-width:0; }