/* Match the console's paper, rules and cycle colors; keep record grids usable. */
:root {
  --paper: var(--panel);
  --accent-2: var(--gold);
  --line-strong: var(--accent);
  --shadow: none;
}

body { background: var(--bg); line-height: 1.6; }
.app { padding: 40px clamp(20px, 4vw, 56px) 32px; }
.topbar { padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 24px; gap: 24px; }
h1, .panel-heading h2, .matrix-head h2 {
  font-family: "Songti SC", "Noto Serif CJK SC", SimSun, Georgia, serif;
  font-weight: 600;
  color: var(--accent-strong);
  letter-spacing: .05em;
}
h1 { font-size: clamp(28px, 3.5vw, 42px); line-height: 1.3; }
.cycle-title .cycle-symbol { width: 42px; height: 42px; flex-basis: 42px; }
.topbar > div > .save-status { display: block; margin-top: 10px; text-align: left; }
label, .save-status, .header-fields label, .toolbar a, button { font-weight: 600; }
.topbar-tools { min-width: 0; width: 100%; gap: 10px; }
.header-fields { grid-template-columns: minmax(180px, 1fr) minmax(140px, .65fr); }
.toolbar a { color: var(--accent-strong); background: var(--panel); }
.toolbar .back-to-console { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.toolbar .back-to-console:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
button, input, select, textarea, .toolbar a { border-radius: 0; }
button { background: var(--accent-strong); }
button.secondary { color: var(--accent-strong); background: var(--panel); border-color: var(--line); }
button.secondary:hover, .toolbar a:hover { background: var(--accent-soft); border-color: var(--accent); }
input, select, textarea, .header-fields input, .header-fields select { background: var(--panel); }
textarea { background: var(--bg); }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.panel { border-radius: 0; box-shadow: none; background: var(--panel); }
.panel-heading { background: transparent; padding: 14px 16px; }
.panel-heading h2, .matrix-head h2 { font-size: 22px; }
.panel-heading h2 { flex-shrink: 0; white-space: nowrap; }
.panel-heading .status-line { text-align: right; }
.panel-body { padding: 16px; }
.identity-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  justify-content: flex-start;
  align-items: flex-end;
}
.identity-grid > label {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}
.identity-grid .identity-mark-row { flex-basis: 100%; }
.identity-grid :is(.number-field input, .number-field button, .oxygen-value-pair input) {
  height: 32px;
  min-height: 32px;
  padding-block: 0;
}
.identity-grid .oxygen-value-pair input { font-size: 13px; }
.titan-list-panel { background: var(--panel); padding: 14px 16px; }
.titan-list-head { color: var(--accent-strong); font-size: 14px; }
.titan-list-head strong, .summon-group-head strong { font-weight: 600; }
.titan-row { border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; background: transparent; }
.titan-empty, .summon-empty { border-radius: 0; background: var(--bg); }
.track-row, .diplomacy-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.track-row:last-child, .diplomacy-row:last-child { border-bottom: 0; }
.track-name strong { color: var(--accent-strong); font-weight: 600; }
.track-name span { font-weight: 400; }
.nemesis-track-name { display: flex; align-items: center; min-width: 0; }
/* 宿敌行开第三列放「切换」按钮：按钮永远在最右，标题列再窄也压不到它。
   原来按钮在标题里，标题列被压到 124px 时按钮就被右边的等级格盖住。 */
.track-row.nemesis-row { grid-template-columns: minmax(124px, max-content) minmax(0, 1fr) auto; }
.nemesis-switch { position: relative; flex-shrink: 0; justify-self: end; }
.nemesis-switch-button { min-height: 26px; padding: 3px 9px; font-size: 12px; color: var(--muted); background: transparent; border: 1px solid var(--line); }
.nemesis-switch-button:disabled { opacity: .45; cursor: default; }
.nemesis-switch-button[aria-expanded="true"] { color: var(--accent-strong); border-color: var(--accent); }
/* 候选列表从按钮左侧弹出：右缘贴着按钮，向左展开盖在等级格上，仍留在这行的高度里，
   所以既不会遮住按钮，也不会像原来那样被 .panel 的 overflow: hidden 从下沿裁掉。
   width: max-content 不能省：定位包含块就是这个 26px 高的「切换」按钮，只给 right
   的话收缩宽度按包含块算（约 50px），每个候选会被压成一行一个、叠成三行。 */
.nemesis-switch-menu {
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  width: max-content;
  /* 只给 width: max-content 的话，候选一多就往面板左沿外顶、被 overflow: hidden 裁掉；
     上限压在 320px（比最窄的桌面双栏面板里按钮左侧的余量还小），超了换行。 */
  max-width: min(60vw, 320px);
  padding: 4px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 6px 16px rgba(36, 33, 29, .14);
}
.nemesis-switch-menu[hidden] { display: none; }
.nemesis-switch-option { min-height: 26px; padding: 2px 9px; font-size: 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); white-space: nowrap; }
.nemesis-switch-option:hover { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent); }
.nemesis-switch-option.active { color: #fff; background: var(--accent-strong); border-color: var(--accent-strong); }
.chip, .adventure-box, .pygmalion-cell, .track-extra-box, .crew-counter { border-radius: 0; }
.chip:not(.active), .adventure-box:not(.active), .pygmalion-cell:not(.active) { background: var(--bg); border-color: var(--line); color: var(--ink); }
.chip.active, .adventure-box.active, .pygmalion-cell.active { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.chip.warning.active { background: var(--red); border-color: var(--red); }
.chip.blue.active { background: var(--blue); border-color: var(--blue); }
.chip.green.active { background: var(--green); border-color: var(--green); }
.track-row .chips { flex-wrap: wrap; }
.chip-stack { min-width: 0; }
.check-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; background: transparent; }
.check-card strong { font-weight: 600; }
.resource-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 10px 0; gap: 10px; }
.resource-face, .resource-face-fallback, .summon-card { border-radius: 0; box-shadow: none; }
.resource-name { color: var(--accent-strong); }
.resource-card .number-field {
  width: 100%;
  grid-template-columns: 20px minmax(24px, 1fr) 38px minmax(24px, 1fr) 20px;
  gap: 4px;
}
.resource-card .number-field input { width: 100%; }
.summon-group { padding-top: 12px; border-top: 1px solid var(--line); }
.summon-group-head { color: var(--accent-strong); }
.matrix-head { background: var(--accent-soft); color: var(--accent-strong); }
.matrix-wrap { border-radius: 0; background: var(--panel); }
.matrix {
  width: 100%;
  min-width: 504px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.matrix button { border-radius: 0; background: var(--panel); }
.matrix button:nth-child(12n) { border-right: 0; }
.matrix button:nth-last-child(-n + 12) { border-bottom: 0; }
.matrix button.marked, .matrix button.marked.circled { background: var(--accent-strong); }
.matrix button.marked.crossed { background: var(--red); }
.matrix-popup-menu, .matrix-summary-popup { border-radius: 0; }
.save-status { color: var(--accent-strong); }

@media (max-width: 1100px) {
  .topbar { grid-template-columns: 1fr; }
  .topbar-tools { justify-items: stretch; }
  .toolbar { justify-content: flex-start; }
  .save-status { text-align: left; }
}
@media (max-width: 640px) {
  .app { padding: 24px 16px; }
  .topbar { gap: 16px; margin-bottom: 16px; padding-bottom: 16px; }
  .header-fields { grid-template-columns: 1fr; }
  .panel-body { padding: 12px; }
  .identity-grid { justify-content: stretch; }
  .check-card { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* index.html 在这一档把 .track-row 压成一列，宿敌行的三列要一起让开，
     否则标题、等级格、切换按钮还会硬挤在一行里。 */
  .track-row.nemesis-row { grid-template-columns: minmax(0, 1fr); }
  .diplomacy-row { grid-template-columns: minmax(0, 1fr); }
  .summon-controls { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  body { background: #fff; }
  .app { padding: 0; }
  .topbar { margin-bottom: 12px; padding-bottom: 12px; }
  .panel { background: #fff; }
}

/* 模块标题图标：字形是 assets/icons/<名称>.svg，由 .atopack 的 iconFiles 段随包安装
   （程序包不带这些提取自原 App 的素材，见 tools/packaging/package_common.py）。
   用 CSS 遮罩 + currentColor 保留原来的 --accent 上色；字形缺席时只剩标题文字。
   尺寸按「等包围盒面积」由内联的 --panel-icon-w/h 给出。 */
.panel-icon {
  width: var(--panel-icon-w, 17px);
  height: var(--panel-icon-h, 17px);
  display: inline-block;
  vertical-align: middle;
  margin-right: 7px;
  color: var(--accent);
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-src);
  mask-image: var(--icon-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* .panel 用 overflow: hidden 给圆角裁边，会把 .identity-mark-notes-panel 这个
   绝对定位的下拉一起裁掉（它在页面里的位置会超出面板盒子）。含下拉的面板由
   mark-notes.js 打上 has-mark-notes，放开裁剪。 */
.panel.has-mark-notes {
  overflow: visible;
}

/* 图标与标题文字一律用 flex 居中。原来靠 vertical-align: -3px 的固定偏移，
   图标一高一矮（argo 14px、笔记 21px）就和文字对不齐了。 */
.panel-heading h2,
.titan-list-head strong,
.matrix-head h2,
.panel-heading.compact h2 {
  display: inline-flex;
  align-items: center;
}

/* 循环记录的 h2 会被页面重写 textContent，图标放在它外面才不会被清掉；
   .panel-heading 是 space-between，多一个图标会把标题挤到中间，
   所以让标题吃掉右侧余量，回到紧贴图标的位置 */
.panel-heading > .panel-icon {
  margin-right: 0;
}

.panel-heading > .panel-icon + h2 {
  margin-right: auto;
}

.panel-heading.compact {
  /* 上下留白要对等，内容才会在标题栏里居中；原来写的是 12px/0，
     内容贴在了栏底（实测上 14px、下 3px） */
  padding: 9px 16px 8px;
}

.panel-heading.compact h2 {
  /* 新增的 7 个模块标题用黑体：原来继承了 record.css 给 h2 的宋体 */
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC",
               system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: normal;
  display: flex;
  align-items: center;
}

/* 循环记录那格的标题也是黑体（运行期被赋成「循环 II」这类文字）。
   id 选择器压得住 record.css 里给 h2 的宋体规则。 */
#cycleTitle {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC",
               system-ui, sans-serif;
  letter-spacing: normal;
}

/* 抉择矩阵的标题和其余模块标题统一：原来只有它是「宋体 + accent-soft 粉底」。
   底色去掉后露出面板本身的颜色，并补上其余标题都有的下边框；内边距也用
   .panel-heading.compact 那一套，否则它比其余标题栏高出 8px 多。 */
.matrix-head {
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: 9px 16px 8px;
}

.matrix-head h2 {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC",
               system-ui, sans-serif;
  /* 和其余模块标题同一个字号；原来 22px，只有它和循环记录偏大 */
  font-size: 15px;
  letter-spacing: normal;
}

/* flex 的 align-items: center 对齐的是文字的行盒，而黑体的中文墨迹在行盒里
   比几何中心略低，于是图标看着偏高。补一个随字号缩放的等量下移
   （15px 时约 0.75px）。宋体的两个大标题方向相反，不套用。 */
.panel-heading.compact h2 .panel-icon,
.titan-list-head strong .panel-icon {
  transform: translateY(0.05em);
}
/* ==== end module icons ==== */

/* ==== 记录表项目图标（字形来自 assets/icons/，见文件上方的模块标题图标说明）====
   字段标签里的 .item-label、运行期轨道标题里的 .track-item-icon，
   尺寸同样按「等包围盒面积」由内联变量给出。 */
.item-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.item-icon {
  width: var(--item-icon-w, 13px);
  height: var(--item-icon-h, 13px);
  flex: 0 0 auto;
  margin-right: 5px;
  color: var(--accent);
  background-color: currentColor;
  -webkit-mask-image: var(--icon-src);
  mask-image: var(--icon-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.track-item-icon {
  display: inline-block;
  flex: 0 0 auto;
  color: var(--accent);
  background-color: currentColor;
  -webkit-mask-image: var(--icon-src);
  mask-image: var(--icon-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.crew-counter-label.with-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 「解锁最大值」按钮和 C2 的「合计 N / M」由脚本挪到 .track-row 的最后一列，
   合计在上、按钮在下；网格默认只有两列，第三个子元素会掉到下一行最左，
   所以标记过的行要开第三列。 */
.track-row.has-lock-slot {
  grid-template-columns: minmax(124px, max-content) minmax(0, 1fr) auto;
}

.track-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.track-row-side .track-lock-button {
  margin-top: 0;
}

/* 合计现在不在网格里了，grid-column 不再需要 */
.track-row-side .crew-counter-total {
  grid-column: auto;
}
/* ==== end item icons ==== */

/* 收割 / 播种的「记录」下拉（原来的自由文本框）。
   结构在 record/index.html 里，行为在 record/mark-notes.js 里。 */
.identity-mark-notes {
  position: relative;
  justify-self: start;
}

.identity-mark-notes > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.identity-mark-notes > summary::-webkit-details-marker { display: none; }

.identity-mark-notes > summary::after {
  content: "▾";
  font-size: 10px;
  color: var(--muted);
}

.identity-mark-notes[open] > summary::after { content: "▴"; }

.identity-mark-notes-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  width: 260px;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(36, 33, 29, 0.16);
}

/* 下方空间不够时由 mark-notes.js 加这个类，改成向上展开 */
.identity-mark-notes-panel.above {
  top: auto;
  bottom: calc(100% + 4px);
}

.identity-mark-notes-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 5px;
}

.identity-mark-notes-list:empty { margin-bottom: 0; }

.identity-mark-notes-list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
}

.identity-mark-notes-list li span {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.identity-mark-notes-list li button {
  flex: 0 0 auto;
  min-height: 22px;
  padding: 0 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.identity-mark-notes-list li button:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.identity-mark-notes-empty {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
}

.identity-mark-notes-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.identity-mark-notes-add input {
  min-width: 0;
  min-height: 30px;
  font-size: 12px;
}

.identity-mark-notes-add button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

/* 记录表里会横向溢出的两处（外交刻度和抉择矩阵）用的是系统默认滚动条：
   灰槽 + 两端箭头，很扎眼。改成主题里的细条——透明轨道、圆角滑块，
   颜色是当前周期强调色掺进面板色，所以每个循环都跟着变。
   注意三点：
   1. 这里不能用 `--line-strong`：本文件第 5 行把它定义成了 `var(--accent)`，
      直接用它滑块会是实心深红，太重。
   2. Blink 只要看到 `scrollbar-width` / `scrollbar-color` 就会**完全忽略**
      `::-webkit-scrollbar` 伪元素，两端的箭头按钮就删不掉了。所以标准属性放进
      `@supports not selector(::-webkit-scrollbar)`，只给 Firefox 用。
   3. 颜色写成两条声明做回退：不支持 `color-mix` 时退回 `--line`。 */
@supports not selector(::-webkit-scrollbar) {
  .diplomacy-scale,
  .matrix-wrap {
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
    scrollbar-color: color-mix(in srgb, var(--accent) 45%, var(--panel)) transparent;
  }
}

.diplomacy-scale::-webkit-scrollbar,
.matrix-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.diplomacy-scale::-webkit-scrollbar-track,
.matrix-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.diplomacy-scale::-webkit-scrollbar-thumb,
.matrix-wrap::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--line);
  background: color-mix(in srgb, var(--accent) 45%, var(--panel));
}

.diplomacy-scale::-webkit-scrollbar-thumb:hover,
.matrix-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* 去掉两端的箭头按钮 */
.diplomacy-scale::-webkit-scrollbar-button,
.matrix-wrap::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
.named-counters { min-width: 0; }
.counter-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.counter-add-toggle { position: relative; display: block; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 1px solid var(--line); background: transparent; color: var(--accent); font-size: 0; line-height: 0; }
.counter-add-toggle::before, .counter-add-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: currentColor; }
.counter-add-toggle::before { width: 10px; height: 2px; }
.counter-add-toggle::after { width: 2px; height: 10px; }
.counter-add-toggle[aria-expanded="true"] { background: var(--accent-soft); }
.counter-empty { color: var(--muted); font-size: 12px; padding: 9px 0; }
.counter-empty[hidden] { display: none; }
.counter-list { list-style: none; padding: 0; margin: 0; }
.counter-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.counter-list input, .counter-add-form input { min-width: 0; width: 100%; min-height: 28px; padding: 4px 6px; font-size: 13px; }
.counter-list li > input { padding-left: 0; border-color: transparent; background: transparent; font-weight: 500; }
.counter-list li > input:hover, .counter-list li > input:focus { border-bottom-color: var(--accent); }
.counter-controls { display: grid; grid-template-columns: 24px 44px 24px; align-items: center; gap: 2px; }
.counter-controls input { text-align: center; padding-inline: 2px; border: 0; background: transparent; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.counter-controls input::-webkit-inner-spin-button, .counter-controls input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.counter-controls button, .counter-list .counter-remove { width: 24px; height: 24px; min-height: 24px; padding: 0; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; }
.counter-controls .counter-step { position: relative; font-size: 0; line-height: 0; }
.counter-step::before, .counter-step-add::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: currentColor; }
.counter-step::before { width: 8px; height: 1px; }
.counter-step-add::after { width: 1px; height: 8px; }
.counter-controls button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.counter-controls button:disabled { opacity: .35; cursor: default; }
.counter-list .counter-remove { border-color: transparent; font-size: 18px; }
.counter-list .counter-remove:hover { color: var(--danger, #a03832); border-color: currentColor; background: transparent; }
.counter-add-form { display: grid; grid-template-columns: minmax(0, 1fr) 52px auto; gap: 6px; margin-top: 8px; }
.counter-add-form[hidden] { display: none; }
.counter-add-form button { min-height: 28px; padding: 0 10px; font-size: 12px; }
.note-attachments { min-width: 0; }
.note-attachment-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.note-attachment-actions { position: relative; }
.note-attachment-add { position: relative; display: block; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 1px solid var(--line); background: var(--bg); color: var(--accent); font-size: 0; line-height: 0; }
.note-attachment-add::before, .note-attachment-add::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; background: currentColor; }
.note-attachment-add::before { width: 10px; height: 2px; }
.note-attachment-add::after { width: 2px; height: 10px; }
.note-attachment-menu { position: absolute; right: 0; top: calc(100% + 5px); z-index: 30; width: 150px; padding: 4px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 4px 14px rgb(0 0 0 / 10%); }
.note-attachment-menu[hidden] { display: none; }
.note-attachment-menu button { display: block; width: 100%; min-height: 36px; padding: 7px 10px; background: transparent; color: var(--ink); font-size: 12px; font-weight: 500; text-align: left; }
.note-attachment-menu button:hover, .note-attachment-menu button:focus-visible { background: var(--bg); filter: none; }
.note-attachments input[hidden] { display: none; }
.note-attachment-hint, .note-attachment-empty, .note-attachment-status { color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.note-attachment-empty { margin-top: 6px; padding: 16px 12px; border: 1px solid var(--line); background: var(--bg); }
.note-attachment-status:empty { display: none; }
.note-attachment-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.note-attachment-list li { min-width: 0; padding: 8px; border: 1px solid var(--line); background: var(--bg); }
.note-attachment-open { display: block; width: 100%; padding: 0; background: transparent; color: var(--ink); border: 0; text-align: left; }
.note-attachment-open img { display: block; width: 100%; height: 110px; object-fit: contain; }
.note-attachment-name { display: block; width: 100%; min-width: 0; padding: 4px 0; margin: 6px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 12px; font-weight: 500; }
.note-attachment-name:hover, .note-attachment-name:focus { border-bottom-color: var(--accent); }
.note-attachment-error { color: var(--muted); font-size: 11px; margin: 6px 0; }
.note-attachment-remove { min-height: 24px; background: transparent; color: var(--muted); border: 1px solid var(--line); font-size: 11px; font-weight: 500; padding: 2px 8px; }
.note-attachment-preview { width: min(1000px, 94vw); max-width: 94vw; max-height: 92vh; padding: 14px; border: 1px solid var(--line, #827b6d); border-radius: 10px; background: var(--panel, #f5f0e5); color: var(--ink, #25231f); }
.note-attachment-preview::backdrop { background: rgb(0 0 0 / 70%); }
.note-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.note-preview-title { overflow-wrap: anywhere; }
.note-attachment-preview img { display: block; max-width: 100%; max-height: 78vh; object-fit: contain; margin: auto; }
.note-attachment-preview video { display: block; width: 100%; max-height: 65vh; margin-bottom: 12px; }