/* 画图 / 视频：参数条、生成中、生成结果 */
/* 画图 / 视频参数条 */
.media-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 2px 4px 4px; font-size: 13px; }
.media-bar[hidden] { display: none; }
.mkind { font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 3px 9px; }
.mgrp { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mlbl { color: var(--faint); font-size: 12px; }
.mchip {
  border: 1px solid var(--border); background: var(--panel); color: var(--muted); border-radius: 99px;
  padding: 3px 10px; font-size: 12.5px; line-height: 1.4;
}
.mchip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.msel { border: 1px solid var(--border); background: var(--panel); border-radius: 99px; padding: 3px 8px; font-size: 12.5px; }
.mest { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.mest b { color: var(--text); }

/* 生成中 / 生成结果 */
.spin {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2.5px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); animation: spin .8s linear infinite;
}
.gen-wait { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; padding: 6px 0; }
.gen-wait small { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }
.gen-wait.big {
  padding: 16px 18px; border-radius: 16px; background: var(--panel); border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  max-width: 460px; color: var(--text);
}
.gen-wait b { font-variant-numeric: tabular-nums; color: var(--muted); }
.gen-caption { font-size: 13px; color: var(--faint); margin-bottom: 8px; }
.gen-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; max-width: 760px; }
.gen-media:has(video) { grid-template-columns: minmax(0, 640px); }
.gen-item { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--hover); }
.gen-item img, .gen-item video { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: #000; }
.gen-item img { background: var(--hover); }
.gen-dl {
  position: absolute; top: 8px; right: 8px; padding: 4px 10px; border-radius: 99px; font-size: 12px; text-decoration: none;
  background: rgba(0, 0, 0, 0.55); color: #fff; backdrop-filter: blur(4px);
}
.gen-dl:hover { background: rgba(0, 0, 0, 0.75); }
.media-price-edit { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--border); }
.media-price-edit[hidden], .media-price-edit [hidden], .grid2[hidden], .hint[hidden] { display: none; }

/* 参数概括按钮（手机上显示，电脑上隐藏） */
.m-summary { display: none; }
.m-inline { display: contents; }

/* 画图 / 视频设置面板 */
.msheet { display: grid; gap: 18px; }
.sgrp { display: grid; gap: 10px; }
.slbl { font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: baseline; gap: 8px; }
.sval { font-size: 15px; color: var(--accent); }
.sopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: 8px; }
.sopts.sopts-row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.sopt {
  display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 52px; padding: 8px 6px;
  border-radius: 12px; border: 1.5px solid var(--border); background: var(--panel); color: var(--muted); font-size: 13px;
}
.sopt small { font-size: 11px; color: var(--faint); }
.sopt.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sopt.on small { color: var(--accent); }
.rico { display: block; border: 2px solid currentColor; border-radius: 3px; opacity: .8; }
.srange { width: 100%; accent-color: var(--accent); height: 28px; }
.srange-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); margin-top: -6px; }
.sest {
  display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); font-size: 14px;
}
.sest b { font-size: 20px; color: var(--accent); }
.sest span { font-size: 12px; color: var(--muted); }
