/* ============ Comic Style (漫画风格) 组件：按钮 / 卡片 / 弹窗 / 对比滑块 / 标签 / 输入 ============ */

/* ---- 漫画按钮 (Comic Buttons) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 44px;
  padding: 10px 22px;
  border-radius: var(--r-s);
  border: 4px solid var(--border-ink);
  font-family: var(--font-title);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-comic);
  transition: all 0.15s ease;
  user-select: none;
  position: relative;
}
.btn:hover:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-comic-hover);
}
.btn:active:not(:disabled) {
  transform: translate(4px, 4px);
  box-shadow: none;
}
.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 2px 2px 0px 0px rgba(26, 26, 26, 1) !important;
  background: #d4d4d4 !important;
  color: #4a4a4a !important;
}

.btn-primary {
  background: var(--primary);
  color: #ffffff;
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-deep);
}

.btn-lav {
  background: var(--blue);
  color: #ffffff;
}
.btn-lav:hover:not(:disabled) {
  background: var(--blue-deep);
}

.btn-mint {
  background: var(--green);
  color: #ffffff;
}
.btn-mint:hover:not(:disabled) {
  background: var(--green-deep);
}

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--yellow-soft);
}

.btn-danger {
  background: var(--danger);
  color: #ffffff;
}
.btn-danger:hover:not(:disabled) {
  background: var(--danger-deep);
}

.btn-sm {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.86rem;
  border-width: 3px;
  box-shadow: var(--shadow-comic-sm);
}
.btn-lg {
  min-height: 52px;
  padding: 12px 28px;
  font-size: 1.1rem;
}
.btn-block {
  width: 100%;
}

/* ---- 漫画标签与贴纸 (Comic Chips / Badges) ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-s);
  background: var(--yellow);
  color: #1a1a1a;
  font-family: var(--font-title);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  border: 3px solid var(--border-ink);
  box-shadow: 2px 2px 0px 0px rgba(26, 26, 26, 1);
  line-height: 1.3;
  white-space: nowrap;
}
[data-theme="dark"] .chip {
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.9);
}
.chip.lav {
  background: var(--blue);
  color: #ffffff;
}
.chip.mint {
  background: var(--green);
  color: #ffffff;
}
.chip.gold {
  background: var(--yellow);
  color: #1a1a1a;
}
.chip.plain {
  background: var(--surface);
  color: var(--ink);
}
.chip.clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}
.chip.clickable:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px 0px rgba(26, 26, 26, 1);
  background: var(--yellow-deep);
}

/* ---- 漫画分镜面板 (Comic Panels) ---- */
.panel {
  background: var(--bg);
  border: 4px solid var(--border-ink);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-comic);
  padding: var(--sp-4);
  position: relative;
  transition: all 0.15s ease;
}

/* ---- 漫画灵感卡片 (Comic Cards) ---- */
.insp-card {
  background: var(--surface);
  border: 4px solid var(--border-ink);
  border-radius: var(--r-s);
  box-shadow: var(--shadow-comic);
  overflow: hidden;
  text-align: left;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  flex: 0 0 auto;
  width: 160px;
  position: relative;
}
.insp-card:hover {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-comic-hover);
}
.insp-card:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}
.insp-card.selected {
  outline: 4px solid var(--primary) !important;
  outline-offset: 2px;
  box-shadow: var(--shadow-comic-md);
  border-color: var(--border-ink);
}
.insp-card .thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-subtle);
  border-bottom: 3px solid var(--border-ink);
}
.insp-card .thumb .grad {
  position: absolute;
  inset: 0;
}
.insp-card .thumb svg.pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.insp-card .thumb img.card-ai {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.insp-card .thumb img.card-ai.loaded {
  opacity: 1;
}
.insp-card .info {
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  background: var(--surface);
}
.insp-card .t {
  font-family: var(--font-title);
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--ink-strong);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.insp-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.insp-card .hot-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--border-ink);
  border-radius: var(--r-xs);
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 900;
  padding: 2px 6px;
  box-shadow: 2px 2px 0px 0px rgba(26, 26, 26, 1);
}

/* ---- 漫画气泡 Toast 提示 ---- */
#toast-root {
  position: fixed;
  top: calc(var(--header-h) + 14px);
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  padding: 0 16px;
}
.toast {
  pointer-events: auto;
  max-width: 440px;
  background: var(--yellow);
  color: var(--ink);
  border: 4px solid var(--border-ink);
  border-radius: var(--r-s);
  padding: 10px 22px;
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 900;
  box-shadow: var(--shadow-comic-md);
  animation: toast-in 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast.err {
  background: var(--primary);
  color: #ffffff;
}
.toast.ok {
  background: var(--green);
  color: #ffffff;
}
@keyframes toast-in {
  from {
    transform: translateY(-12px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ---- 漫画模态弹窗 (Comic Modal) ---- */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(26, 26, 26, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  animation: fade-in 0.15s ease;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal {
  position: relative;
  background: var(--bg);
  border: 4px solid var(--border-ink);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-comic-lg);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow: auto;
  padding: var(--sp-4);
  animation: modal-pop 0.15s ease;
}
@keyframes modal-pop {
  from {
    transform: translate(4px, 4px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.modal h3 {
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 900;
  margin-bottom: var(--sp-2);
  color: var(--ink-strong);
}
.modal .modal-x {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-s);
  border: 3px solid var(--border-ink);
  background: var(--yellow);
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 900;
  box-shadow: 2px 2px 0px 0px rgba(26, 26, 26, 1);
  transition: all 0.15s ease;
}
.modal .modal-x:hover {
  background: var(--primary);
  color: #ffffff;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px 0px rgba(26, 26, 26, 1);
}
.modal .modal-body {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.65;
}
.modal .modal-actions {
  margin-top: var(--sp-4);
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ---- 漫画爱心 & 动作动画 ---- */
.heart-spin {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.heart-spin svg {
  animation: comic-pulse 1s ease-in-out infinite;
  filter: drop-shadow(4px 4px 0px #1a1a1a);
}
@keyframes comic-pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.15) rotate(4deg);
  }
}
.heart-spin .txt {
  font-family: var(--font-title);
  font-size: 1.05rem;
  color: var(--ink-strong);
  font-weight: 900;
  text-align: center;
}

/* ---- 漫画进度条 ---- */
.engine-progress {
  margin-top: var(--sp-3);
  background: var(--surface);
  border: 4px solid var(--border-ink);
  border-radius: var(--r-s);
  box-shadow: var(--shadow-comic-sm);
  padding: 10px 14px;
}
.engine-progress .track {
  height: 14px;
  border-radius: var(--r-xs);
  background: var(--bg);
  border: 3px solid var(--border-ink);
  overflow: hidden;
}
.engine-progress .bar {
  height: 100%;
  width: 25%;
  background: var(--primary);
  border-right: 3px solid var(--border-ink);
  transition: width 0.3s ease;
}
.engine-progress .cap {
  font-family: var(--font-title);
  font-size: 0.85rem;
  color: var(--ink);
  margin-top: 6px;
  font-weight: 900;
}

/* ---- 漫画 Before / After 对比组件 ---- */
.cmp-container {
  position: relative;
  width: 100%;
  border-radius: var(--r-m);
  overflow: hidden;
  border: 4px solid var(--border-ink);
  box-shadow: var(--shadow-comic);
  background: #1a1a1a;
}
.cmp {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  background: #1a1a1a;
}
.cmp img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.cmp img.cmp-after {
  clip-path: inset(0 0 0 50%);
}
.cmp .cmp-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: var(--border-ink);
  box-shadow: 0 0 0 2px #ffffff;
  transform: translateX(-50%);
}
.cmp .cmp-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: var(--r-s);
  background: var(--yellow);
  border: 4px solid var(--border-ink);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0px 0px rgba(26, 26, 26, 1);
  cursor: ew-resize;
  transition: transform 0.15s ease;
}
.cmp .cmp-knob:hover {
  transform: translate(-50%, -50%) scale(1.08);
}
.cmp .cmp-tag {
  position: absolute;
  top: 14px;
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: var(--r-xs);
  border: 3px solid var(--border-ink);
  z-index: 2;
  box-shadow: 3px 3px 0px 0px rgba(26, 26, 26, 1);
}
.cmp .cmp-tag.before {
  left: 14px;
  background: #ffffff;
  color: var(--ink);
}
.cmp .cmp-tag.after {
  right: 14px;
  background: var(--primary);
  color: #ffffff;
}

/* 对比视图模式工具栏 */
.cmp-mode-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg);
  border: 3px solid var(--border-ink);
  border-radius: var(--r-s);
  box-shadow: var(--shadow-comic-sm);
  margin-bottom: var(--sp-2);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.cmp-mode-bar button {
  padding: 4px 12px;
  border-radius: var(--r-xs);
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--ink);
  border: 2px solid transparent;
  transition: all 0.15s ease;
}
.cmp-mode-bar button.active {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--border-ink);
  box-shadow: 2px 2px 0px 0px rgba(26, 26, 26, 1);
}

/* 并排对比视图 */
.cmp-side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  border-radius: var(--r-m);
  overflow: hidden;
}
.cmp-side-by-side .side-box {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-s);
  overflow: hidden;
  border: 4px solid var(--border-ink);
  box-shadow: var(--shadow-comic-sm);
}
.cmp-side-by-side .side-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmp-side-by-side .side-label {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-title);
  font-size: 0.75rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--border-ink);
}

/* ---- 空状态 ---- */
.empty-state {
  text-align: center;
  padding: var(--sp-5) var(--sp-3);
  color: var(--ink);
}
.empty-state .art {
  margin: 0 auto var(--sp-3);
}
.empty-state .msg {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--ink-strong);
  margin-bottom: 4px;
}
.empty-state .sub-msg {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
}
.empty-state .btn {
  margin-top: var(--sp-3);
}

/* ---- 表单输入 (Comic Inputs) ---- */
.field {
  margin-bottom: var(--sp-3);
}
.field > label {
  display: block;
  font-family: var(--font-title);
  font-weight: 900;
  font-size: 0.92rem;
  margin-bottom: 6px;
  color: var(--ink-strong);
}
.field .hint {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}
.field input[type="text"],
.field input[type="password"],
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 16px;
  border: 4px solid var(--border-ink);
  border-radius: var(--r-s);
  background: var(--surface);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-strong);
  box-shadow: 2px 2px 0px 0px rgba(26, 26, 26, 1);
  transition: all 0.15s ease;
}
[data-theme="dark"] .field input[type="text"],
[data-theme="dark"] .field input[type="password"],
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea {
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.9);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  box-shadow: var(--shadow-comic);
  outline: none;
}

/* ---- 子标签页 (Subtabs) ---- */
.subtabs {
  display: inline-flex;
  gap: 4px;
  background: var(--bg);
  border: 3px solid var(--border-ink);
  border-radius: var(--r-s);
  padding: 4px;
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-comic-sm);
}
.subtabs button {
  min-height: 36px;
  padding: 4px 18px;
  border-radius: var(--r-xs);
  font-family: var(--font-title);
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--ink);
  border: 2px solid transparent;
  transition: all 0.15s ease;
}
.subtabs button[aria-selected="true"],
.subtabs button.active {
  background: var(--yellow);
  color: #1a1a1a;
  border-color: var(--border-ink);
  box-shadow: 2px 2px 0px 0px rgba(26, 26, 26, 1);
}
[data-theme="dark"] .subtabs button[aria-selected="true"],
[data-theme="dark"] .subtabs button.active {
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.9);
}

/* 快速示例照片条 */
.sample-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}
.sample-bar .sample-label {
  font-family: var(--font-title);
  font-size: 0.82rem;
  color: var(--ink);
  font-weight: 900;
}
.sample-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--r-s);
  background: var(--surface);
  border: 3px solid var(--border-ink);
  box-shadow: 2px 2px 0px 0px rgba(26, 26, 26, 1);
  font-family: var(--font-title);
  font-size: 0.82rem;
  color: var(--ink);
  font-weight: 900;
  transition: all 0.15s ease;
  cursor: pointer;
}
[data-theme="dark"] .sample-btn {
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.9);
}
.sample-btn:hover {
  background: var(--yellow);
  color: #1a1a1a;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px 0px rgba(26, 26, 26, 1);
}

/* 快捷词条推荐 */
.prompt-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.prompt-chip {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--border-ink);
  box-shadow: 2px 2px 0px 0px rgba(26, 26, 26, 1);
  cursor: pointer;
  transition: all 0.15s ease;
}
[data-theme="dark"] .prompt-chip {
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.9);
}
.prompt-chip:hover {
  background: var(--yellow);
  color: #1a1a1a;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px 0px rgba(26, 26, 26, 1);
}

/* ---- 漫画风格主题切换按钮 (Comic Theme Toggle) ---- */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--r-s);
  border: 3px solid var(--border-ink);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 2px 2px 0px 0px rgba(26, 26, 26, 1);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 1.15rem;
  user-select: none;
  position: relative;
  flex-shrink: 0;
}
[data-theme="dark"] .theme-toggle-btn {
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.9);
}
.theme-toggle-btn:hover {
  background: var(--yellow);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px 0px rgba(26, 26, 26, 1);
}
.theme-toggle-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
.theme-toggle-btn .theme-icon {
  display: inline-block;
  line-height: 1;
  transition: transform 0.2s ease;
}
.theme-toggle-btn:hover .theme-icon {
  transform: rotate(15deg) scale(1.1);
}

/* ---- 主题模式分段选择器 (Theme Selector Segment) ---- */
.theme-selector-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.theme-option-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--font-title);
  font-size: 0.86rem;
  font-weight: 900;
  border-radius: var(--r-s);
  border: 3px solid var(--border-ink);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 2px 2px 0px 0px rgba(26, 26, 26, 1);
  cursor: pointer;
  transition: all 0.15s ease;
}
[data-theme="dark"] .theme-option-btn {
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.9);
}
.theme-option-btn:hover {
  background: var(--yellow-soft);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px 0px rgba(26, 26, 26, 1);
}
.theme-option-btn.active {
  background: var(--yellow);
  color: #1a1a1a;
  box-shadow: 3px 3px 0px 0px rgba(26, 26, 26, 1);
  transform: translate(-1px, -1px);
}
[data-theme="dark"] .theme-option-btn.active {
  box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.9);
}

/* ============ Comic Style 漫画专属特色组件 (Speech Bubbles / Bursts / Action Lines) ============ */

/* ---- ① 漫画对话气泡 (Speech Bubbles) ---- */
.speech-bubble {
  position: relative;
  background: var(--surface);
  color: var(--ink-strong);
  border: 4px solid var(--border-ink);
  border-radius: var(--r-l);
  padding: 12px 18px;
  font-weight: 700;
  box-shadow: var(--shadow-comic);
  line-height: 1.5;
  display: inline-block;
}
[data-theme="dark"] .speech-bubble {
  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.9);
}

/* 气泡尖角 (Tail Bottom) */
.speech-bubble.tail-bottom::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 28px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 12px 0 0;
  border-color: var(--border-ink) transparent transparent transparent;
}
.speech-bubble.tail-bottom::before {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 31px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 8px 0 0;
  border-color: var(--surface) transparent transparent transparent;
  z-index: 1;
}

/* 气泡尖角 (Tail Left) */
.speech-bubble.tail-left::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -14px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 14px 10px 0;
  border-color: transparent var(--border-ink) transparent transparent;
}
.speech-bubble.tail-left::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -9px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 10px 7px 0;
  border-color: transparent var(--surface) transparent transparent;
  z-index: 1;
}

/* 思考云朵气泡 (Thought Bubble) */
.thought-bubble {
  position: relative;
  background: var(--surface);
  border: 4px solid var(--border-ink);
  border-radius: 24px;
  padding: 12px 18px;
  font-weight: 700;
  box-shadow: var(--shadow-comic);
}
.thought-bubble::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border: 3px solid var(--border-ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0px 0px rgba(26, 26, 26, 1);
}
.thought-bubble::before {
  content: '';
  position: absolute;
  bottom: -24px;
  left: 16px;
  width: 8px;
  height: 8px;
  background: var(--surface);
  border: 2px solid var(--border-ink);
  border-radius: 50%;
}

/* 呐喊/惊叹爆炸气泡 (Shout Bubble) */
.shout-bubble {
  position: relative;
  background: var(--yellow);
  color: #1a1a1a;
  border: 4px solid var(--border-ink);
  padding: 14px 20px;
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: var(--shadow-comic-md);
  clip-path: polygon(
    0% 15%, 8% 5%, 15% 15%, 35% 0%, 50% 12%, 65% 0%, 85% 12%, 95% 5%, 100% 20%, 
    92% 35%, 100% 50%, 92% 65%, 100% 80%, 92% 95%, 75% 90%, 65% 100%, 50% 88%, 
    35% 100%, 20% 90%, 8% 100%, 0% 85%, 8% 65%, 0% 50%, 8% 35%
  );
  display: inline-block;
  transform: rotate(-2deg);
}

/* ---- ② 情绪爆发音效字贴纸 (POW! / BAM! / ZAP! / WOW! / BOOM!) ---- */
.burst-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  font-family: var(--font-title);
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 3px solid var(--border-ink);
  box-shadow: 3px 3px 0px 0px rgba(26, 26, 26, 1);
  transform: rotate(-3deg);
  user-select: none;
  line-height: 1;
  white-space: nowrap;
}
.burst-pow {
  background: var(--primary);
  color: #ffffff;
  border-radius: var(--r-xs);
  transform: rotate(-4deg);
}
.burst-bam {
  background: var(--blue);
  color: #ffffff;
  border-radius: var(--r-xs);
  transform: rotate(3deg);
}
.burst-zap {
  background: var(--yellow);
  color: #1a1a1a;
  border-radius: var(--r-xs);
  transform: rotate(-2deg);
}
.burst-wow {
  background: var(--green);
  color: #ffffff;
  border-radius: var(--r-xs);
  transform: rotate(4deg);
}

/* 漫画动作炸裂背景 (Action Speed Burst Lines) */
.speed-lines-bg {
  position: relative;
  overflow: hidden;
}
.speed-lines-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(26, 26, 26, 0.04) 0deg 10deg,
    transparent 10deg 20deg
  );
  pointer-events: none;
  z-index: 0;
}

/* 漫画面板分镜装饰框 (Manga Storyboard Frame) */
.manga-panel-frame {
  border: 4px solid var(--border-ink);
  border-radius: var(--r-m);
  background: var(--bg);
  box-shadow: var(--shadow-comic);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .manga-panel-frame {
  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.9);
}
.manga-panel-frame::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent var(--border-ink) transparent transparent;
  pointer-events: none;
}