/**
 * 模板快捷栏 + 保存对话框样式
 * 海洋主题 / 浅色玻璃态风格 — 全量使用设计令牌，零硬编码颜色
 */

/* ==================== 快捷栏 ==================== */

.tqb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
  background: var(--glass-bg-mid);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-mid)) blur(var(--glass-blur-mid));
  backdrop-filter: saturate(var(--glass-saturate-mid)) blur(var(--glass-blur-mid));
  border: 1px solid var(--glass-border-mid);
  transition: background var(--transition-fast);
}

.tqb-bar:hover {
  background: var(--bg-hover);
}

/* 空态（无常用方案）浮到功能头行右端（2026-09-05 头部瘦身）：
   整条不再独占一行，只留保存按钮；right:40 给微头红✕让位 */
.gp-panel .tqb-bar-empty {
    position: absolute;
    top: 4px;
    right: 40px;
    height: 47px;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    z-index: 5;
}
/* 功能头整带让位（清空表单是功能头直接子元素 margin-left:auto 贴右缘，
   收窄 inner 无效）：带体右缩，保存按钮悬浮在带外右侧 */
.gp-panel:has(.tqb-bar-empty) .gp-func-header {
    padding-right: 168px;
}
.tqb-bar-empty {
  justify-content: space-between;
}

.tqb-hint {
  font-size: var(--fluid-font-sm);
  color: var(--text-tertiary);
  font-weight: 500;
}

.tqb-templates {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
  /* 内边距容纳芯片删除徽章的 -5px 悬出（overflow 容器会在 padding 盒边缘裁剪） */
  padding: 6px 6px 6px 2px;
  margin: -4px 0;
}

/* 模板芯片 */
.tqb-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--glass-bg-far);
  border: 1px solid var(--glass-border-far);
  cursor: pointer;
  white-space: nowrap;
  font-size: var(--fluid-font-sm);
  color: var(--text-secondary);
  transition: all var(--transition-quick);
  position: relative;
}

.tqb-chip:hover {
  background: var(--bg-active);
  border-color: var(--ocean-light);
  color: var(--ocean-deep);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.12);
}

.tqb-chip:focus-visible {
  outline: 2px solid var(--ocean-light);
  outline-offset: 2px;
}

.tqb-chip:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--press-inset);
}

.tqb-chip[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.tqb-chip i {
  font-size: 10px;
  opacity: 0.7;
}

.tqb-chip:hover i {
  opacity: 1;
}

.tqb-chip-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tqb-chip-applying {
  opacity: 0.6;
  pointer-events: none;
}

/* 删除按钮 */
.tqb-chip-delete {
  display: none;
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--error);
  border: none;
  color: var(--text-on-accent);
  font-size: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-quick);
}

.tqb-chip:hover .tqb-chip-delete {
  display: flex;
}

.tqb-chip-delete:hover {
  transform: scale(1.2);
  filter: brightness(1.12);
}

.tqb-chip-delete:focus-visible {
  outline: 2px solid var(--error);
  outline-offset: 1px;
}

/* 保存按钮 */
.tqb-save-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--gradient-primary);
  border: none;
  color: var(--text-on-accent);
  font-size: var(--fluid-font-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(var(--ocean-light-rgb), 0.25);
}

.tqb-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--ocean-light-rgb), 0.30);
  filter: brightness(1.1);
}

.tqb-save-btn:focus-visible {
  outline: 2px solid var(--ocean-light);
  outline-offset: 2px;
}

.tqb-save-btn:active {
  transform: translateY(0);
  box-shadow: var(--press-inset);
}

.tqb-save-btn i {
  font-size: 10px;
}

/* ==================== 保存对话框 ==================== */

.tsd-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--ocean-deep-rgb), 0.24);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: tsd-fade-in var(--dur-2) var(--ease-out-expo);
}

@keyframes tsd-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tsd-dialog {
  width: 380px;
  max-width: 90vw;
  border-radius: var(--radius-lg);
  background: var(--glass-bg-near);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border: 1px solid var(--glass-border-near);
  box-shadow:
    var(--glass-shadow-near),
    inset 0 1px 0 0 rgba(var(--glass-tint-rgb), 0.65);
  animation: tsd-slide-up var(--dur-2) var(--ease-out-back);
  overflow: hidden;
}

@keyframes tsd-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tsd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
}

.tsd-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fluid-font-base);
  font-weight: 600;
  color: var(--text-primary);
}

.tsd-title i {
  color: var(--ocean-light);
  font-size: 13px;
}

.tsd-close {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-quick);
}

.tsd-close:hover {
  background: var(--error-bg);
  color: var(--error);
}

.tsd-close:focus-visible {
  outline: 2px solid var(--ocean-light);
  outline-offset: 2px;
}

.tsd-close:active {
  transform: scale(0.95);
}

.tsd-body {
  padding: 20px;
}

.tsd-field {
  margin-bottom: 16px;
}

.tsd-label {
  display: block;
  font-size: var(--fluid-font-sm);
  color: var(--text-tertiary);
  margin-bottom: 6px;
  font-weight: 500;
}

.tsd-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--glass-bg-mid);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: var(--fluid-font-base);
  outline: none;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.tsd-input:hover {
  border-color: var(--border-strong);
}

.tsd-input:focus {
  border-color: var(--ocean-light);
  background: rgba(var(--glass-tint-rgb), 0.7);
  box-shadow: 0 0 0 3px rgba(var(--ocean-light-rgb), 0.16);
}

.tsd-input:focus-visible {
  border-color: var(--ocean-light);
  box-shadow: 0 0 0 3px rgba(var(--ocean-light-rgb), 0.16);
}

.tsd-input::placeholder {
  color: var(--text-placeholder);
}

.tsd-input--error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(var(--error-rgb), 0.16);
}

.tsd-input--success {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.16);
}

.tsd-info {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-tint-rgb), 0.4);
  border: 1px solid var(--border-default);
}

.tsd-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fluid-font-sm);
  color: var(--text-tertiary);
  line-height: 1.8;
}

.tsd-info-row i {
  font-size: 10px;
  color: var(--ocean-light);
  width: 14px;
  text-align: center;
}

.tsd-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 12px;
  border-radius: var(--radius-sm);
  background: var(--error-bg);
  border: 1px solid rgba(var(--error-rgb), 0.3);
  color: var(--error);
  font-size: var(--fluid-font-sm);
  animation: tsd-shake var(--dur-3) var(--ease-out-expo);
}

@keyframes tsd-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.tsd-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-default);
}

.tsd-cancel-btn {
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--transition-quick);
}

.tsd-cancel-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.tsd-cancel-btn:focus-visible {
  outline: 2px solid var(--ocean-light);
  outline-offset: 2px;
}

.tsd-cancel-btn:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: var(--press-inset);
}

.tsd-cancel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tsd-confirm-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  background: var(--gradient-primary);
  border: none;
  color: var(--text-on-accent);
  font-size: var(--fluid-font-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(var(--ocean-light-rgb), 0.25);
}

.tsd-confirm-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(var(--ocean-light-rgb), 0.30);
  filter: brightness(1.1);
}

.tsd-confirm-btn:focus-visible {
  outline: 2px solid var(--ocean-light);
  outline-offset: 2px;
}

.tsd-confirm-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--press-inset);
}

.tsd-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.tsd-confirm-btn[data-loading="true"] {
  cursor: progress;
  filter: saturate(0.85);
}

.tsd-confirm-btn i {
  font-size: 11px;
}
.vz-mode-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 18px;
  background:
    linear-gradient(rgba(var(--glass-bg-rgb), 0.55), rgba(var(--glass-bg-rgb), 0.55)),
    radial-gradient(120% 100% at 100% 0%, rgba(var(--bright-cyan-rgb), 0.06), transparent 60%);
  border: 0.5px solid rgba(var(--glass-tint-rgb), 0.28);
  box-shadow: inset 0 1px 0 rgba(var(--yue-ui-white-rgb), 0.35);
  box-sizing: border-box;
}
.vz-mode-tab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-3) var(--ease-out-expo);
}
.vz-mode-tab > i {
  font-size: 0.95rem;
  opacity: 0.85;
  transition: transform var(--dur-3) var(--ease-out-expo);
}
.vz-mode-tab:hover {
  color: var(--text-primary);
  background: rgba(var(--bright-cyan-rgb), 0.07);
}
.vz-mode-tab.active {
  background:
    linear-gradient(135deg, rgba(var(--bright-cyan-rgb), 0.22), rgba(var(--bright-cyan-rgb), 0.1)),
    radial-gradient(120% 100% at 100% 0%, rgba(var(--bright-cyan-rgb), 0.16), transparent 60%);
  color: var(--text-primary);
  box-shadow:
    inset 0 1px 0 rgba(var(--yue-ui-white-rgb), 0.45),
    0 2px 12px rgba(var(--bright-cyan-rgb), 0.14);
}
.vz-mode-tab.active > i {
  color: rgb(var(--bright-cyan-rgb));
  transform: scale(1.12);
}
.vz-mode-tab-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vz-mode-tab-sub {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(var(--glass-bg-rgb), 0.35);
  color: var(--text-tertiary);
  font-size: 0.6rem;
  font-weight: 500;
  white-space: nowrap;
}
.vz-mode-tab.active .vz-mode-tab-sub {
  background: rgba(var(--bright-cyan-rgb), 0.12);
  color: rgb(var(--bright-cyan-rgb));
}
.vz-ai-settings {
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background:
    linear-gradient(rgba(var(--glass-bg-rgb), 0.28), rgba(var(--glass-bg-rgb), 0.28)),
    radial-gradient(120% 100% at 0% 0%, rgba(var(--bright-cyan-rgb), 0.08), transparent 60%);
  border: 0.5px solid rgba(var(--bright-cyan-rgb), 0.16);
}

.vz-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}
.vz-preset-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 92px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(rgba(var(--glass-bg-rgb), 0.4), rgba(var(--glass-bg-rgb), 0.4)),
    radial-gradient(120% 100% at 100% 0%, rgba(var(--bright-cyan-rgb), 0.08), transparent 60%);
  box-shadow: inset 0 1px 0 rgba(var(--yue-ui-white-rgb), 0.45);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out-expo), background-color var(--dur-2) var(--ease-out-expo), transform var(--dur-2) var(--ease-out-expo);
}
.vz-preset-card:hover {
  border-color: rgba(var(--bright-cyan-rgb), 0.35);
  color: var(--text-primary);
}
.vz-preset-card.active {
  border-color: rgba(var(--bright-cyan-rgb), 0.72);
  background:
    linear-gradient(rgba(var(--bright-cyan-rgb), 0.1), rgba(var(--bright-cyan-rgb), 0.1)),
    radial-gradient(120% 100% at 100% 0%, rgba(var(--bright-cyan-rgb), 0.16), transparent 60%);
  color: var(--text-primary);
}
.vz-preset-card.active::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--bright-cyan-rgb));
  box-shadow: 0 0 10px rgba(var(--bright-cyan-rgb), 0.8);
}
.vz-preset-card > i {
  font-size: 1.05rem;
  color: rgb(var(--bright-cyan-rgb));
}
.vz-preset-name {
  font-size: 0.74rem;
  font-weight: 600;
}
.vz-preset-desc {
  font-size: 0.62rem;
  line-height: 1.45;
  color: var(--text-tertiary);
}
.vz-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 10px;
  border: 1px solid rgba(var(--bright-cyan-rgb), 0.2);
  border-radius: 9999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.66rem;
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
}
.vz-advanced-toggle:hover {
  border-color: rgba(var(--bright-cyan-rgb), 0.55);
  color: var(--text-primary);
}
.vz-advanced {
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(var(--glass-bg-rgb), 0.28);
}
.vz-start-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(var(--bright-cyan-rgb), 0.08);
  color: var(--text-tertiary);
  font-size: 0.68rem;
  line-height: 1.6;
}
.vz-start-hint i {
  margin-top: 2px;
  color: rgb(var(--bright-cyan-rgb));
}
.gp-thumb-file {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-tertiary);
  font-size: 1rem;
}
/* ============ 视角/动作变换 · 导演模式 ============ */
/* 只承载设计系统没有的增量结构；颜色/玻璃/圆角/动效全部走月汐令牌：
   --ocean-* / --neon-glow* / --glass-* / --fluid-* / --radius-*，禁止散写色值。 */

/* 主体关系切换（沿用 detail-toggle 胶囊词汇） */
.td-subject-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fluid-gap);
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), 0.16);
}

.td-subject-toggle-hint {
  flex-basis: 100%;
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  line-height: 1.5;
}

/* 5 格上传网格（沿用 detail-upload-slot 词汇） */
.td-upload-grid {
  grid-template-columns: repeat(5, 1fr);
}

/* 多主体槽位标记 */
.td-slot-subject {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fluid-font-xs);
  font-weight: 600;
  background: rgba(var(--ocean-deep-rgb), 0.55);
  color: rgba(var(--glass-tint-rgb), 0.9);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
}

/* 成片张数（胶囊单选，沿用 detail-toggle-btn 词汇） */
.td-shot-count {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fluid-gap-sm);
}

.td-shot-count .detail-toggle-btn {
  min-width: 64px;
  justify-content: center;
}

/* 主体一致性说明（玻璃卡） */
.td-identity-notes {
  font-size: var(--fluid-font-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  padding: 10px 12px;
  border: 1px solid rgba(var(--glass-tint-rgb), 0.12);
  border-radius: 10px;
  background: rgba(var(--glass-tint-rgb), 0.04);
}

/* 导演的理解：情绪/用途/风格走 detail-plan-bible，创意方向走 detail-plan-chip */
.td-intent {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 改动范围与场景/光线策略护栏 */
.td-policy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 分镜卡片：对齐 detail-plan-screen 的玻璃卡片语言 */
.td-shot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.td-shot-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--glass-tint-rgb), 0.12);
  border-radius: 10px;
  background: rgba(var(--glass-tint-rgb), 0.04);
}

.td-shot-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.td-shot-subject {
  font-size: var(--fluid-font-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--neon-glow);
  background: rgba(var(--neon-glow-rgb), 0.1);
  border: 1px solid rgba(var(--neon-glow-rgb), 0.25);
}

.td-shot-purpose {
  font-size: 12px;
  color: var(--ocean-foam);
}

.td-shot-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  font-size: 12px;
  line-height: 1.55;
}

.td-shot-label {
  color: var(--ocean-foam);
  font-weight: 600;
}

.td-shot-value {
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .td-upload-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .td-subject-toggle {
    flex-direction: column;
    align-items: flex-start;
  }
}
/**
 * TikTok 导演面板 — 面板专属最小样式（与标准 gp-* 组件互补，不重复造轮子）
 * 只保留：步骤条、镜头/出图提示词卡片、帧图预览、实扣算力；其余用 grsai-panels.css 的 gp-* 标准类。
 */

/* ---------- 步骤条 ---------- */
.tiktok-director-panel .tdp-steps {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.78rem;
  padding: 2px 0;
  flex-wrap: wrap;
}
.tiktok-director-panel .tdp-steps span {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--ocean-light-rgb), 0.06);
  color: var(--text-tertiary);
  border: 1px solid rgba(var(--ocean-light-rgb), 0.12);
  white-space: nowrap;
}
.tiktok-director-panel .tdp-steps span.active {
  background: linear-gradient(90deg, var(--ocean-primary), var(--ocean-cyan));
  color: #fff;
  border-color: transparent;
}
.tiktok-director-panel .tdp-steps span.done { color: var(--text-secondary); }

/* ---------- 卖点列表 ---------- */
.tiktok-director-panel .tdp-sp-list { display: flex; flex-direction: column; gap: 6px; }
.tiktok-director-panel .tdp-sp-item { display: flex; align-items: center; gap: 6px; }
.tiktok-director-panel .tdp-sp-item .gp-input { flex: 1; }

/* ---------- 出图提示词镜头卡片 ---------- */
.tiktok-director-panel .tdp-shots { display: flex; flex-direction: column; gap: 10px; }
.tiktok-director-panel .tdp-shot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(var(--ocean-light-rgb), 0.04);
  border: 1px solid rgba(var(--ocean-light-rgb), 0.14);
}
.tiktok-director-panel .tdp-shot-head,
.tiktok-director-panel .tdp-frame-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tiktok-director-panel .tdp-shot-idx { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
.tiktok-director-panel .tdp-shot-tools { display: flex; gap: 4px; margin-left: auto; }

/* ---------- 帧图预览（紧凑网格，一屏可看全） ---------- */
.tiktok-director-panel .tdp-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tiktok-director-panel .tdp-frame-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(var(--ocean-light-rgb), 0.04);
  border: 1px solid rgba(var(--ocean-light-rgb), 0.14);
}
.tiktok-director-panel .tdp-frame-quality { color: var(--danger, #e5484d); }
.tiktok-director-panel .tdp-frame-card .gp-btn-clear { font-size: 0.68rem; padding: 2px 8px; border-radius: 6px; }
.tiktok-director-panel .tdp-frame-src {
  flex: 1;
  min-width: 0;
  font-size: 0.6rem;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tiktok-director-panel .tdp-frame-previews { display: flex; gap: 8px; }
.tiktok-director-panel .tdp-frame-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.6rem;
  color: var(--text-tertiary);
}
.tiktok-director-panel .tdp-frame-preview img {
  width: 100%;
  min-width: 0;
  aspect-ratio: var(--tdp-ratio-ratio, 9 / 16);
  object-fit: cover;
  border-radius: 8px;
  background: rgba(var(--ocean-light-rgb), 0.06);
  border: 1px solid rgba(var(--ocean-light-rgb), 0.14);
}
.tiktok-director-panel .tdp-frame-empty {
  width: 100%;
  aspect-ratio: var(--tdp-ratio-ratio, 9 / 16);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 8px;
  background: rgba(var(--ocean-light-rgb), 0.06);
  border: 1px dashed rgba(var(--ocean-light-rgb), 0.25);
  color: var(--text-tertiary);
  font-size: 0.6rem;
}

/* ---------- 视频提示词镜头卡片 ---------- */
.tiktok-director-panel .tdp-scene {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(var(--ocean-light-rgb), 0.03);
  border: 1px solid rgba(var(--ocean-light-rgb), 0.12);
  margin-bottom: 12px;
}

/* ---------- 实扣算力 ---------- */
.tiktok-director-panel .tdp-cost-done {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(var(--ocean-light-rgb), 0.08);
}
.tiktok-director-panel .tdp-cost-done b { color: var(--ocean-primary); }

/* ---------- 补充：参数网格 / 价格条 / 失败进度 ---------- */
.tiktok-director-panel .gp-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tiktok-director-panel .gp-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.tiktok-director-panel .gp-price {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(var(--ocean-cyan-rgb), 0.08);
  color: var(--text-secondary);
  font-size: 0.78rem;
  border: 1px solid rgba(var(--ocean-cyan-rgb), 0.2);
  margin: 6px 0;
}
.tiktok-director-panel .gp-price b { color: var(--ocean-primary); }
.tiktok-director-panel .gp-progress.gp-progress-failed { color: var(--danger, #e5484d); }
.tiktok-director-panel .tdp-duration-field { grid-column: 1 / -1; padding: 4px 0; }
.tiktok-director-panel .tdp-duration-slider { width: 100%; margin: 6px 0 2px; }
.tiktok-director-panel .tdp-range-ticks {
  position: relative;
  height: 20px;
  margin: 6px 0 0;
  width: 100%;
  user-select: none;
}
.tiktok-director-panel .tdp-range-ticks span {
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  font-size: 0.6rem;
  line-height: 1;
  color: var(--text-tertiary);
  white-space: nowrap;
  text-align: center;
  min-width: 0;
}
.tiktok-director-panel .tdp-range-ticks span::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -9px;
  width: 1px;
  height: 6px;
  background: var(--text-tertiary);
  transform: translateX(-50%);
  opacity: 0.7;
}
.tiktok-director-panel .tdp-range-ticks span.tdp-tick-minor {
  top: 0;
  font-size: 0;
}
.tiktok-director-panel .tdp-range-ticks span.tdp-tick-minor::before {
  top: 0;
  height: 6px;
  opacity: 0.35;
}
.tiktok-director-panel .tdp-range-ticks span.active { color: var(--ocean-primary); font-weight: 600; }
.tiktok-director-panel .tdp-range-ticks span.active::before { background: var(--ocean-primary); opacity: 1; }

/* 出帧模型/分辨率下拉：缩小字号，避免长模型名显示不全（trigger 与 portal 面板均生效） */
.tdp-frame-model-select .gs-trigger-text,
.tdp-frame-model-select .gs-option-text { font-size: 0.78rem; }

/* ---------- connectMode 徽标（连续 vs 短切） ---------- */
.tiktok-director-panel .tdp-connect-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.tiktok-director-panel .tdp-connect-badge.continuous {
  color: #0ea5a3;
  background: rgba(14, 165, 163, 0.12);
  border: 1px solid rgba(14, 165, 163, 0.35);
}
.tiktok-director-panel .tdp-connect-badge.cut {
  color: var(--text-secondary);
  background: rgba(var(--ocean-light-rgb), 0.06);
  border: 1px solid rgba(var(--ocean-light-rgb), 0.16);
}

/* ---------- 连续镜首帧「复用上一镜尾帧」标记 ---------- */
.tiktok-director-panel .tdp-reuse-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #0ea5a3;
  background: rgba(14, 165, 163, 0.1);
  border: 1px dashed rgba(14, 165, 163, 0.4);
  border-radius: 6px;
  padding: 2px 6px;
}
.tiktok-director-panel .tdp-frame-img { position: relative; width: 100%; }
.tiktok-director-panel .tdp-frame-img img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(var(--ocean-light-rgb), 0.06);
  border: 1px solid rgba(var(--ocean-light-rgb), 0.14);
}
.tiktok-director-panel .tdp-reuse-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.66rem;
  padding: 2px 6px;
  border-radius: 6px;
  color: #fff;
  background: rgba(14, 165, 163, 0.85);
}

/* ---------- 每镜成本明细 ---------- */
.tiktok-director-panel .tdp-cost-detail {
  font-size: 0.74rem;
  color: var(--text-tertiary);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(var(--ocean-light-rgb), 0.04);
  border: 1px solid rgba(var(--ocean-light-rgb), 0.1);
  margin-top: 4px;
  line-height: 1.6;
}

/* ---------- t40 UX：折叠 / 蓝图 / 队列提示 / 吸底 ---------- */
.tiktok-director-panel .tdp-collapse { margin: 0; }
.tiktok-director-panel .tdp-collapse-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px 0 2px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  list-style: none;
}
.tiktok-director-panel .tdp-collapse-summary::-webkit-details-marker { display: none; }
.tiktok-director-panel .tdp-collapse-summary i { color: var(--ocean-primary); }
.tiktok-director-panel .tdp-collapse-summary small {
  font-weight: 400;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.tiktok-director-panel .tdp-collapse-hint {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--text-tertiary);
}
.tiktok-director-panel .tdp-blueprint {
  display: block;
  margin: 4px 0;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(var(--ocean-light-rgb), 0.04);
  border: 1px solid rgba(var(--ocean-light-rgb), 0.1);
  color: var(--text-secondary);
  line-height: 1.5;
}
.tiktok-director-panel .tdp-queue-hint {
  font-size: 0.74rem;
  color: var(--text-tertiary);
  background: rgba(var(--ocean-light-rgb), 0.05);
  border: 1px solid rgba(var(--ocean-light-rgb), 0.12);
  border-radius: 8px;
  padding: 6px 8px;
  margin-top: 6px;
}
.tiktok-director-panel .tdp-sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: rgba(var(--panel-bg, #131313), 0.85);
  backdrop-filter: blur(calc(6px * var(--glass-blur-level, 1)));
  padding: 8px 0;
}


/* ---------- 帧提示词长度校验 + videoDirection ---------- */
.tiktok-director-panel .tdp-prompt-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--warning, #d97706);
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 8px;
  padding: 4px 8px;
}
.tiktok-director-panel .tdp-prompt-warn button {
  margin-left: auto;
}


/* ---------- Director Treatment 全局 + 富字段出图 ---------- */
.tiktok-director-panel .tdp-rich-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.tiktok-director-panel .tdp-treatment-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(var(--ocean-light-rgb), 0.05);
  border: 1px dashed rgba(var(--ocean-light-rgb), 0.28);
  color: var(--text-tertiary);
  font-size: 0.8rem;
  line-height: 1.5;
  margin-bottom: 8px;
}
.tiktok-director-panel .tdp-treatment-empty i {
  color: var(--ocean-primary);
  font-size: 1rem;
}

/* ---------- 会话恢复条（玻璃风，与 gp-price 同族） ---------- */
.tiktok-director-panel .tdp-restore-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin: 6px 0;
  border-radius: 10px;
  background: rgba(var(--ocean-cyan-rgb), 0.08);
  border: 1px solid rgba(var(--ocean-cyan-rgb), 0.25);
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.tiktok-director-panel .tdp-restore-bar i {
  color: var(--ocean-primary);
}
.tiktok-director-panel .tdp-restore-bar .gp-btn-clear { font-size: 0.75rem; }
.tiktok-director-panel .tdp-restore-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 失效「待重出」徽标 ---------- */
.tiktok-director-panel .tdp-stale-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--warning, #d97706);
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.35);
}

/* ---------- 单镜试跑 / 内嵌视频预览 ---------- */
.tiktok-director-panel .tdp-scene-video {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.tiktok-director-panel .tdp-scene-video-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tiktok-director-panel .tdp-shot-video {
  width: 132px;
  aspect-ratio: var(--tdp-ratio-ratio, 9 / 16);
  object-fit: cover;
  border-radius: 10px;
  background: rgba(var(--ocean-light-rgb), 0.06);
  border: 1px solid rgba(var(--ocean-light-rgb), 0.14);
}
.tiktok-director-panel .tdp-scene-video .gp-btn-clear { font-size: 0.75rem; }

/* ---------- 单镜 AI 改写（调整意见 + 按钮） ---------- */
.tiktok-director-panel .tdp-scene-rewrite {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tiktok-director-panel .tdp-rewrite-input {
  flex: 1;
  min-width: 160px;
  font-size: 0.78rem;
}
.tiktok-director-panel .tdp-rewrite-btn {
  font-size: 0.75rem;
  white-space: nowrap;
}
.tiktok-director-panel .tdp-rewrite-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- 连续镜头转场锁定提示 ---------- */
.tiktok-director-panel .tdp-transition-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 0.75rem;
  color: #0ea5a3;
}

/* ---------- 节奏轴（U1：pacingCurve.beats / shots.duration 分段可视化） ---------- */
.tiktok-director-panel .tdp-pacing {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 6px;
}
.tiktok-director-panel .tdp-pacing-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.tiktok-director-panel .tdp-pacing-head i { color: var(--ocean-primary); }
.tiktok-director-panel .tdp-pacing-head small {
  font-weight: 400;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tiktok-director-panel .tdp-pacing-track {
  display: flex;
  height: 44px;
  border-radius: var(--radius-sm, 8px);
  background: rgba(var(--ocean-light-rgb), 0.06);
  border: 1px solid rgba(var(--ocean-light-rgb), 0.12);
  overflow: hidden;
}
.tiktok-director-panel .tdp-pacing-seg {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0 4px;
  /* 段间 2px 白色间隔（模拟剪辑帧隔线） */
  border-right: 2px solid rgba(255, 255, 255, 0.85);
  transition: filter var(--dur-1, var(--dur-1)) var(--ease-pro, ease);
}
.tiktok-director-panel .tdp-pacing-seg:last-child { border-right: none; }
.tiktok-director-panel .tdp-pacing-seg:hover { filter: brightness(1.06); }
.tiktok-director-panel .tdp-pacing-name {
  max-width: 100%;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ocean-deep);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tiktok-director-panel .tdp-pacing-sec {
  font-size: 0.7rem;
  line-height: 1.1;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* ---------- connectMode 切换控件（U3：徽标外观可点击） ---------- */
.tiktok-director-panel button.tdp-connect-toggle {
  font-family: inherit;
  cursor: pointer;
  transition: filter var(--dur-1, var(--dur-1)) var(--ease-pro, ease),
    border-color var(--dur-1, var(--dur-1)) var(--ease-pro, ease),
    background var(--dur-1, var(--dur-1)) var(--ease-pro, ease);
}
.tiktok-director-panel button.tdp-connect-toggle:hover:not(:disabled) {
  filter: brightness(1.05);
  border-color: rgba(var(--ocean-light-rgb), 0.5);
}
.tiktok-director-panel button.tdp-connect-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---------- 帧图 zoom-in 提示（U2） ---------- */
.tiktok-director-panel .tdp-frame-zoom { cursor: zoom-in; }

/* ---------- 主体漂移徽标（U4：danger 色系） ---------- */
.tiktok-director-panel .tdp-drift-badge {
  background: rgba(229, 72, 77, 0.1);
  border-color: rgba(229, 72, 77, 0.35);
}

/* ---------- 帧图灯箱（U2：portal 到 body，全屏遮罩） ---------- */
.tdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 300);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(8, 16, 32, 0.72);
  backdrop-filter: blur(calc(8px * var(--glass-blur-level, 1)));
  -webkit-backdrop-filter: blur(calc(8px * var(--glass-blur-level, 1)));
  animation: tdp-lightbox-in var(--dur-2, var(--dur-2)) var(--ease-pro, ease);
}
@keyframes tdp-lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.tdp-lightbox .tdp-lightbox-body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 92vw;
}
.tdp-lightbox .tdp-lightbox-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tdp-lightbox .tdp-lightbox-side img {
  max-height: 80vh;
  max-width: 44vw;
  object-fit: contain;
  border-radius: var(--radius-md, 12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(8, 16, 32, 0.4);
}
.tdp-lightbox .tdp-lightbox-side.active img {
  border-color: rgba(var(--ocean-cyan-rgb, 0, 179, 230), 0.65);
  box-shadow: 0 0 0 1px rgba(var(--ocean-cyan-rgb, 0, 179, 230), 0.35);
}
.tdp-lightbox .tdp-lightbox-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.78);
}
.tdp-lightbox .tdp-lightbox-caption {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}
.tdp-lightbox .tdp-lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}
.tdp-lightbox .tdp-lightbox-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
}


/**
 * VideoPanelHost 样式 — 视频生成控制面板
 * 海洋主题 / 玻璃态 / 紧凑布局（适配 IslandPanel 窄抽屉）
 */

/* ── 根容器 ── */
.vph-root {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 8px;
}

/* ── 模式 Tab ── */
.vph-mode-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(var(--glass-bg-rgb), 0.4);
  border: 1px solid rgba(var(--glass-border-rgb, var(--glass-bg-rgb)), 0.15);
}

.vph-mode-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 4px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-2) ease;
  white-space: nowrap;
}

.vph-mode-tab i {
  font-size: 0.7rem;
}

.vph-mode-tab:hover {
  color: var(--text-secondary);
  background: rgba(var(--glass-bg-rgb), 0.3);
}

.vph-mode-tab.active {
  color: var(--text-primary);
  background: rgba(var(--bright-cyan-rgb), 0.15);
  box-shadow: 0 1px 4px rgba(var(--yue-ui-black-rgb), 0.1);
}

/* ── 面板内容 ── */
.vph-mode-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── 区段标签 ── */
.vph-section-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.vph-section-label i {
  font-size: 0.68rem;
  color: rgb(var(--bright-cyan-rgb));
}

/* ── 上传区 ── */
.vph-uploader {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vph-drop-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 8px;
  border: 1.5px dashed rgba(var(--glass-border-rgb, var(--glass-bg-rgb)), 0.3);
  background: rgba(var(--glass-bg-rgb), 0.2);
  color: var(--text-tertiary);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all var(--dur-2) ease;
}

.vph-drop-zone i {
  font-size: 0.85rem;
}

.vph-drop-zone:hover {
  border-color: rgb(var(--bright-cyan-rgb));
  color: var(--text-secondary);
  background: rgba(var(--bright-cyan-rgb), 0.06);
}

.vph-drop-zone.dragover {
  background: rgba(var(--bright-cyan-rgb), 0.06);
}

.vph-drop-zone.uploading {
  pointer-events: none;
  opacity: 0.6;
}

.vph-drop-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(var(--bright-cyan-rgb), 0.3);
  border-top-color: rgb(var(--bright-cyan-rgb));
  border-radius: 50%;
  animation: vph-spin 0.8s linear infinite;
}

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

/* ── 缩略图行 ── */
.vph-thumb-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.vph-thumb {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(var(--glass-border-rgb, var(--glass-bg-rgb)), 0.2);
}

.vph-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vph-thumb-remove {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(var(--yue-ui-black-rgb), 0.6);
  color: var(--yue-ui-white);
  font-size: 0.55rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-1) ease;
}

.vph-thumb:hover .vph-thumb-remove {
  opacity: 1;
}

/* ── 文本域 ── */
.vph-textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(var(--glass-border-rgb, var(--glass-bg-rgb)), 0.2);
  background: rgba(var(--glass-bg-rgb), 0.25);
  color: var(--text-primary);
  font-size: 0.74rem;
  font-family: inherit;
  resize: vertical;
  min-height: 48px;
  transition: border-color var(--dur-2) ease;
}

.vph-textarea:focus {
  outline: none;
  border-color: rgb(var(--bright-cyan-rgb));
}

.vph-textarea::placeholder {
  color: var(--text-placeholder);
}

/* ── 策划方案预览 ── */
.vph-plan-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(var(--glass-bg-rgb), 0.2);
  border: 1px solid rgba(var(--glass-border-rgb, var(--glass-bg-rgb)), 0.15);
}

.vph-plan-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.vph-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.vph-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(var(--bright-cyan-rgb), 0.12);
  color: rgb(var(--bright-cyan-rgb));
  font-size: 0.65rem;
  font-weight: 500;
}

.vph-tag i {
  font-size: 0.6rem;
}

.vph-tag-gold {
  background: rgba(var(--yue-ui-amber-500-rgb), 0.12);
  color: var(--yue-ui-amber-500);
}

.vph-plan-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  color: var(--text-tertiary);
}

.vph-plan-hint i {
  font-size: 0.65rem;
}

/* ── 进度信息 ── */
.vph-progress-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 12px;
}

.vph-progress-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(var(--bright-cyan-rgb), 0.2);
  border-top-color: rgb(var(--bright-cyan-rgb));
  border-radius: 50%;
  animation: vph-spin 0.8s linear infinite;
}

.vph-progress-text {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.vph-progress-hint {
  font-size: 0.68rem;
  color: var(--text-tertiary);
}

/* ── 完成信息 ── */
.vph-complete-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
}

.vph-complete-icon {
  font-size: 1.6rem;
  color: var(--success);
}

.vph-complete-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.vph-preview-video {
  width: 100%;
  max-height: 200px;
  border-radius: 8px;
  background: var(--yue-ui-black);
}

/* ── 批量模式头部 ── */
.vph-batch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(var(--bright-cyan-rgb), 0.08);
  border: 1px solid rgba(var(--bright-cyan-rgb), 0.15);
}

.vph-batch-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.vph-batch-result {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgb(var(--bright-cyan-rgb));
}

/* ── 产品卡片 ── */
.vph-product-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(var(--glass-bg-rgb), 0.2);
  border: 1px solid rgba(var(--glass-border-rgb, var(--glass-bg-rgb)), 0.12);
}

.vph-product-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vph-product-index {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  flex: 1;
}

.vph-product-img-count {
  font-size: 0.65rem;
  color: var(--text-tertiary);
}

.vph-product-remove {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: rgba(var(--yue-ui-red-500-rgb), 0.1);
  color: var(--error);
  font-size: 0.6rem;
  cursor: pointer;
  transition: background var(--dur-1) ease;
}

.vph-product-remove:hover {
  background: rgba(var(--yue-ui-red-500-rgb), 0.2);
}

/* ── 添加产品按钮 ── */
.vph-add-product-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  border-radius: 8px;
  border: 1.5px dashed rgba(var(--glass-border-rgb, var(--glass-bg-rgb)), 0.25);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all var(--dur-2) ease;
}

.vph-add-product-btn:hover {
  border-color: rgb(var(--bright-cyan-rgb));
  color: var(--text-secondary);
  background: rgba(var(--bright-cyan-rgb), 0.05);
}

.vph-add-product-btn i {
  font-size: 0.65rem;
}

/* ── 产品描述输入框 ── */
.vph-product-prompt-input {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(var(--glass-border-rgb, var(--glass-bg-rgb)), 0.15);
  background: rgba(var(--glass-bg-rgb), 0.15);
  color: var(--text-primary);
  font-size: 0.68rem;
  font-family: inherit;
  transition: border-color var(--dur-2) ease;
}

.vph-product-prompt-input:focus {
  outline: none;
  border-color: rgb(var(--bright-cyan-rgb));
}

.vph-product-prompt-input::placeholder {
  color: var(--text-placeholder);
}

/* ── 价格计算栏 ── */
.vph-pricing-bar {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(var(--yue-ui-amber-500-rgb), 0.06);
  border: 1px solid rgba(var(--yue-ui-amber-500-rgb), 0.12);
  margin-top: 4px;
}

.vph-pricing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vph-pricing-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.vph-pricing-label i {
  font-size: 0.68rem;
  color: var(--yue-ui-amber-500);
}

.vph-pricing-value {
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--yue-ui-amber-500);
}

.vph-pricing-detail {
  font-size: 0.62rem;
  color: var(--text-tertiary);
  text-align: right;
}

/* ── 新手提示条 ── */
.vph-tip-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(var(--bright-cyan-rgb), 0.07);
  border: 1px solid rgba(var(--bright-cyan-rgb), 0.12);
  color: var(--text-tertiary);
  font-size: 0.66rem;
  line-height: 1.4;
}

.vph-tip-bar i {
  font-size: 0.68rem;
  color: rgb(var(--bright-cyan-rgb));
  flex-shrink: 0;
}

/* ── 音乐说明折叠区 ── */
.vph-music-hint {
  border-radius: 8px;
  background: rgba(var(--glass-bg-rgb), 0.15);
  border: 1px solid rgba(var(--glass-border-rgb, var(--glass-bg-rgb)), 0.12);
  padding: 0 9px;
}

.vph-music-hint summary {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 0;
  font-size: 0.66rem;
  color: var(--text-tertiary);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.vph-music-hint summary::-webkit-details-marker {
  display: none;
}

.vph-music-hint summary i {
  font-size: 0.66rem;
  color: rgb(var(--bright-cyan-rgb));
}

.vph-music-hint-body {
  padding: 0 0 8px;
  font-size: 0.64rem;
  color: var(--text-tertiary);
  line-height: 1.6;
}

.vph-music-hint-body p {
  margin: 4px 0;
}

.vph-music-hint-body code {
  display: block;
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(var(--glass-bg-rgb), 0.35);
  color: var(--text-secondary);
  font-size: 0.62rem;
  word-break: break-all;
}

/* ── 一键清空表单按钮 ── */
.video-clear-form-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 6px;
  border: none; border-radius: 6px;
  background: transparent;
  color: var(--ocean-light, #6b8ca0);
  font-size: 0.72rem; font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease-out-expo), color var(--dur-2) var(--ease-out-expo);
  flex-shrink: 0;
}
.video-clear-form-btn:hover {
  background: rgba(var(--yue-ui-red-500-rgb), 0.12);
  color: var(--yue-ui-red-500);
}
.video-clear-form-btn:active {
  transform: scale(0.94);
}

/* ── 动态主图面板 ── */
.vph-dynamic-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin: 4px 0 8px;
  border: 1.5px dashed rgba(var(--bright-cyan-rgb), 0.35);
  border-radius: 12px;
  background: rgba(var(--glass-bg-rgb), 0.28);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-out-expo), background var(--dur-2) var(--ease-out-expo);
}
.vph-dynamic-upload:hover,
.vph-dynamic-upload.dragover {
  background: rgba(var(--bright-cyan-rgb), 0.06);
}
.vph-dynamic-upload.has-image {
  cursor: default;
}
.vph-dynamic-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 0.72rem;
}
.vph-dynamic-empty i {
  font-size: 1.6rem;
  color: rgba(var(--bright-cyan-rgb), 0.6);
}
.vph-dynamic-preview {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
}
.vph-dynamic-preview img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  object-fit: contain;
}
.vph-dynamic-file-name {
  max-width: 100%;
  font-size: 0.64rem;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.vph-dynamic-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.vph-dynamic-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid rgba(var(--bright-cyan-rgb), 0.28);
  border-radius: 8px;
  background: rgba(var(--glass-bg-rgb), 0.3);
  color: var(--text-secondary);
  font-size: 0.68rem;
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
}
.vph-dynamic-btn:hover {
  border-color: rgb(var(--bright-cyan-rgb));
  color: var(--text-primary);
  background: rgba(var(--bright-cyan-rgb), 0.1);
}
.vph-dynamic-btn.danger {
  border-color: rgba(var(--yue-ui-red-500-rgb), 0.3);
}
.vph-dynamic-btn.danger:hover {
  border-color: var(--yue-ui-red-500);
  color: var(--yue-ui-red-500);
  background: rgba(var(--yue-ui-red-500-rgb), 0.1);
}
.vph-dynamic-generate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 12px 0 4px;
  padding: 10px 0;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, rgb(var(--bright-cyan-rgb)), rgb(var(--ocean-rgb)));
  color: var(--yue-ui-white);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out-expo), opacity var(--dur-2) var(--ease-out-expo);
}
.vph-dynamic-generate:hover:not(:disabled) {
  transform: translateY(-1px);
}
.vph-dynamic-generate:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.vph-dynamic-note {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0 6px;
  font-size: 0.62rem;
  color: var(--text-tertiary);
}
.vph-dynamic-result {
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(var(--glass-bg-rgb), 0.3);
}
.vph-dynamic-result-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.vph-dynamic-saved {
  margin-top: 8px;
  font-size: 0.62rem;
  color: var(--yue-ui-green-bright);
  word-break: break-all;
}

/* ── 动态主图批量工坊 ── */
.vph-loop-upload-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.vph-loop-template-chips {
  flex-wrap: wrap;
}
.vph-loop-template-chip {
  padding: 7px 11px;
}
.vph-loop-template-desc {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 0.66rem;
  color: var(--text-tertiary);
}
.vph-loop-advanced {
  margin-top: 4px;
  border: 1px solid rgba(var(--ocean-light-rgb), 0.12);
  border-radius: 10px;
  background: rgba(var(--glass-bg-rgb), 0.2);
}
.vph-loop-advanced summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--text-secondary);
  user-select: none;
}
.vph-loop-advanced summary:hover {
  color: var(--text-primary);
}
.vph-loop-advanced-body {
  padding: 2px 11px 12px;
}
.vph-loop-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 0.68rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.vph-loop-toggle input {
  accent-color: rgb(var(--bright-cyan-rgb));
}
.vph-loop-results {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--ocean-light-rgb), 0.12);
}
.vph-loop-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.vph-loop-results-count {
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--text-tertiary);
}
.vph-loop-batch-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}
.vph-loop-batch-actions .gp-secondary-btn {
  font-size: 0.68rem;
}
.vph-loop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.vph-loop-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(var(--ocean-light-rgb), 0.12);
  border-radius: 10px;
  background: rgba(var(--glass-bg-rgb), 0.24);
  overflow: hidden;
}
.vph-loop-card.failed {
  border-color: rgba(var(--yue-ui-red-500-rgb), 0.35);
}
.vph-loop-card.aborted {
  opacity: 0.65;
}
.vph-loop-card-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
}
.vph-loop-card-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--yue-ui-black);
}
.vph-loop-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 1.2rem;
}
.vph-loop-card-status {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--yue-ui-white);
  font-size: 0.58rem;
  backdrop-filter: blur(calc(4px * var(--glass-blur-level, 1)));
}
.vph-loop-card-name {
  font-size: 0.62rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vph-loop-card-error {
  font-size: 0.58rem;
  color: var(--yue-ui-red-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vph-loop-card-actions {
  display: flex;
  gap: 4px;
}
.vph-loop-card-actions button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  border: 1px solid rgba(var(--bright-cyan-rgb), 0.25);
  border-radius: 6px;
  background: rgba(var(--glass-bg-rgb), 0.3);
  color: var(--text-secondary);
  font-size: 0.6rem;
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
}
.vph-loop-card-actions button:hover:not(:disabled) {
  border-color: rgb(var(--bright-cyan-rgb));
  color: var(--text-primary);
  background: rgba(var(--bright-cyan-rgb), 0.1);
}
.vph-loop-card-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.vph-loop-card-saved {
  font-size: 0.58rem;
  color: var(--yue-ui-green-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 成片方式 / 运镜编排 ── */
.vph-loop-mode-chip {
  padding: 7px 11px;
}
.vph-loop-motion-select {
  min-width: 92px;
  padding: 4px 6px;
  border: 1px solid rgba(var(--bright-cyan-rgb), 0.25);
  border-radius: 7px;
  background: rgba(var(--glass-bg-rgb), 0.3);
  color: var(--text-secondary);
  font-size: 0.66rem;
  cursor: pointer;
  outline: none;
}
.vph-loop-motion-select:focus {
  border-color: rgb(var(--bright-cyan-rgb));
}
.vph-loop-segment-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.vph-loop-segment-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border: 1px solid rgba(var(--ocean-light-rgb), 0.12);
  border-radius: 8px;
  background: rgba(var(--glass-bg-rgb), 0.22);
}
.vph-loop-segment-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(var(--bright-cyan-rgb), 0.16);
  color: var(--accent-cyan);
  font-size: 0.62rem;
  font-weight: 600;
  flex: none;
}
.vph-loop-segment-ops {
  display: flex;
  gap: 3px;
  margin-left: auto;
}
.vph-loop-segment-ops button {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--ocean-light-rgb), 0.16);
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.58rem;
  cursor: pointer;
}
.vph-loop-segment-ops button:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: rgb(var(--bright-cyan-rgb));
}
.vph-loop-segment-ops button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.vph-loop-per-image-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.vph-loop-per-image-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid rgba(var(--ocean-light-rgb), 0.1);
  border-radius: 8px;
  background: rgba(var(--glass-bg-rgb), 0.2);
}
.vph-loop-per-image-row > img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex: none;
  background: rgba(0,0,0,0.2);
}
.vph-loop-per-image-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vph-loop-per-image-name {
  font-size: 0.62rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vph-loop-per-image-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vph-loop-per-image-clear {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--ocean-light-rgb), 0.16);
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.58rem;
  cursor: pointer;
}
.vph-loop-per-image-clear:hover {
  color: var(--accent-cyan);
  border-color: rgb(var(--bright-cyan-rgb));
}
.vph-loop-card-progress {
  font-size: 0.58rem;
  color: var(--accent-cyan);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --gp-border-angle: 0deg;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
    }
  }
}

:root {
  --yue-color-ocean-deep: #080c0f;
  --yue-color-ocean-deep-rgb: 8, 12, 15;
  --yue-color-ocean-mid: #202a32;
  --yue-color-ocean-mid-rgb: 32, 42, 50;
  --yue-color-ocean-light: #0070ab;
  --yue-color-ocean-light-rgb: 0, 112, 171;
  --yue-color-ocean-cyan: #0a8fd1;
  --yue-color-ocean-cyan-rgb: 10, 143, 209;
  --yue-color-ocean-foam: #3e505c;
  --yue-color-ocean-foam-rgb: 62, 80, 92;
  --yue-color-ocean-white: #e0e5e9;
  --yue-color-ocean-white-rgb: 224, 229, 233;
  --yue-color-brand-blue: #0070ab;
  --yue-color-brand-blue-rgb: 0, 112, 171;
  --yue-color-brand-blue-dark: #004d85;
  --yue-color-brand-blue-dark-rgb: 0, 77, 133;
  --yue-color-neon-glow: #0083c4;
  --yue-color-neon-glow-rgb: 0, 131, 196;
  --yue-color-golden: #d1a84b;
  --yue-color-golden-rgb: 209, 168, 75;
  --yue-color-golden-dark: #b8860b;
  --yue-color-golden-dark-rgb: 184, 134, 11;
  --yue-color-golden-light: #f0c060;
  --yue-color-golden-light-rgb: 240, 192, 96;
  --yue-color-accent-amber: #e8963a;
  --yue-color-accent-amber-rgb: 232, 150, 58;
  --yue-color-text-on-accent: #fff;
  --yue-color-text-on-accent-rgb: 255, 255, 255;
  --yue-color-bright-aqua: #3dd6f5;
  --yue-color-bright-aqua-rgb: 61, 214, 245;
  --yue-color-slate-blue: #4a7088;
  --yue-color-slate-blue-rgb: 74, 112, 136;
  --yue-color-indigo: #6366f1;
  --yue-color-indigo-rgb: 99, 102, 241;
  --yue-color-emerald: #10b981;
  --yue-color-emerald-rgb: 16, 185, 129;
  --yue-color-orange: #ff6b35;
  --yue-color-orange-rgb: 255, 107, 53;
  --yue-color-success: #61bd67;
  --yue-color-success-rgb: 97, 189, 103;
  --yue-color-warning: #d9a514;
  --yue-color-warning-rgb: 217, 165, 20;
  --yue-color-error: #e85854;
  --yue-color-error-rgb: 232, 88, 84;
  --yue-color-info: #0a8fd1;
  --yue-color-info-rgb: 10, 143, 209;
  --yue-color-text-primary: #080c0f;
  --yue-color-text-secondary: #202a32;
  --yue-color-text-tertiary: #3e505c;
  --yue-color-text-placeholder: #707c85;
  --yue-color-text-inverse: #ecf3f8;
  --yue-color-text-link: #0a8fd1;
  --yue-color-bg-canvas: #e0e5e9;
  --yue-color-bg-hover: #0070ab14;
  --yue-color-bg-active: #0070ab1f;
  --yue-color-border-default: #0070ab1f;
  --yue-color-border-strong: #0070ab33;
  --yue-color-border-hover: #0070ab66;
  --yue-color-status-success: #61bd67;
  --yue-color-status-warning: #d9a514;
  --yue-color-status-error: #e85854;
  --yue-color-status-info: #0a8fd1;
  --yue-color-card-accent-print: #0070ab;
  --yue-color-card-accent-edit: #d97706;
  --yue-color-card-accent-ecom: #c98a2b;
  --yue-color-card-accent-video: #7c3aed;
  --yue-color-card-accent-copy: #0070ab;
  --yue-color-gradient-primary: linear-gradient(135deg, #0070ab, #0a8fd1);
  --yue-color-gradient-accent: linear-gradient(135deg, #0083c4, #0a8fd1);
  --yue-color-gradient-glass: linear-gradient(145deg, #fffffff2, #e8f0f6d9);
  --yue-icon-ecom-1: #f59e0b;
  --yue-icon-ecom-1-rgb: 245, 158, 11;
  --yue-icon-ecom-2: #ef4444;
  --yue-icon-ecom-2-rgb: 239, 68, 68;
  --yue-icon-print-1: #06b6d4;
  --yue-icon-print-1-rgb: 6, 182, 212;
  --yue-icon-print-2: #3b82f6;
  --yue-icon-print-2-rgb: 59, 130, 246;
  --yue-icon-edit-1: #8b5cf6;
  --yue-icon-edit-1-rgb: 139, 92, 246;
  --yue-icon-edit-2: #ec4899;
  --yue-icon-edit-2-rgb: 236, 72, 153;
  --yue-icon-copy-1: #10b981;
  --yue-icon-copy-1-rgb: 16, 185, 129;
  --yue-icon-copy-2: #06b6d4;
  --yue-icon-copy-2-rgb: 6, 182, 212;
  --yue-icon-video-1: #7c3aed;
  --yue-icon-video-1-rgb: 124, 58, 237;
  --yue-icon-video-2: #3b82f6;
  --yue-icon-video-2-rgb: 59, 130, 246;
  --yue-icon-imgproc-1: #0ea5e9;
  --yue-icon-imgproc-1-rgb: 14, 165, 233;
  --yue-icon-imgproc-2: #14b8a6;
  --yue-icon-imgproc-2-rgb: 20, 184, 166;
  --yue-icon-fun-1: #d946ef;
  --yue-icon-fun-1-rgb: 217, 70, 239;
  --yue-icon-fun-2: #a855f7;
  --yue-icon-fun-2-rgb: 168, 85, 247;
  --yue-icon-default-1: #3b82f6;
  --yue-icon-default-1-rgb: 59, 130, 246;
  --yue-icon-default-2: #06b6d4;
  --yue-icon-default-2-rgb: 6, 182, 212;
  --yue-constellation-gold: gold;
  --yue-constellation-gold-rgb: 255, 215, 0;
  --yue-constellation-orange: orange;
  --yue-constellation-orange-rgb: 255, 165, 0;
  --yue-constellation-green: #4ade80;
  --yue-constellation-green-rgb: 74, 222, 128;
  --yue-constellation-white: #fff;
  --yue-constellation-white-rgb: 255, 255, 255;
  --yue-constellation-deep: #0c1220;
  --yue-constellation-deep-rgb: 12, 18, 32;
  --yue-material-blue: #64c8ff;
  --yue-material-blue-rgb: 100, 200, 255;
  --yue-material-blue-deep: #2f8fd8;
  --yue-material-blue-deep-rgb: 47, 143, 216;
  --yue-material-blue-light: #8fe0ff;
  --yue-material-blue-light-rgb: 143, 224, 255;
  --yue-material-blue-pale: #e6f1ff;
  --yue-material-blue-pale-rgb: 230, 241, 255;
  --yue-material-danger: #ff5a5a;
  --yue-material-danger-rgb: 255, 90, 90;
  --yue-material-danger-soft: #f87171;
  --yue-material-danger-soft-rgb: 248, 113, 113;
  --yue-material-white: #fff;
  --yue-material-white-rgb: 255, 255, 255;
  --yue-material-muted: #7d8fb0;
  --yue-material-muted-rgb: 125, 143, 176;
  --yue-material-muted-soft: #8fa3c8;
  --yue-material-muted-soft-rgb: 143, 163, 200;
  --yue-material-green: #3cc882;
  --yue-material-green-rgb: 60, 200, 130;
  --yue-material-cyan: #22d3ee;
  --yue-material-cyan-rgb: 34, 211, 238;
  --yue-material-purple: #b7a6ff;
  --yue-material-purple-rgb: 183, 166, 255;
  --yue-material-deep: #0b1f33;
  --yue-material-deep-rgb: 11, 31, 51;
  --yue-ui-white: #fff;
  --yue-ui-white-rgb: 255, 255, 255;
  --yue-ui-black: #000;
  --yue-ui-black-rgb: 0, 0, 0;
  --yue-ui-blue-400: #4a9fd8;
  --yue-ui-blue-400-rgb: 74, 159, 216;
  --yue-ui-blue-400-bright: #4aa8ff;
  --yue-ui-blue-400-bright-rgb: 74, 168, 255;
  --yue-ui-blue-350: #4fc3ff;
  --yue-ui-blue-350-rgb: 79, 195, 255;
  --yue-ui-blue-300-bright: #6bb6e8;
  --yue-ui-blue-300-bright-rgb: 107, 182, 232;
  --yue-ui-blue-bright: #00b4ff;
  --yue-ui-blue-bright-rgb: 0, 180, 255;
  --yue-ui-blue-500: #3b82f6;
  --yue-ui-blue-500-rgb: 59, 130, 246;
  --yue-ui-blue-600: #1d4ed8;
  --yue-ui-blue-600-rgb: 29, 78, 216;
  --yue-ui-blue-700: #00f;
  --yue-ui-blue-700-rgb: 0, 0, 255;
  --yue-ui-blue-300: #93c5fd;
  --yue-ui-blue-300-rgb: 147, 197, 253;
  --yue-ui-sky-300: #7fd0e8;
  --yue-ui-sky-300-rgb: 127, 208, 232;
  --yue-ui-sky-300-bright: #7dd3fc;
  --yue-ui-sky-300-bright-rgb: 125, 211, 252;
  --yue-ui-sky-400: #46aaff;
  --yue-ui-sky-400-rgb: 70, 170, 255;
  --yue-ui-sky-500: #78b4ff;
  --yue-ui-sky-500-rgb: 120, 180, 255;
  --yue-ui-pink-400: #f472b6;
  --yue-ui-pink-400-rgb: 244, 114, 182;
  --yue-ui-red-500: #ef4444;
  --yue-ui-red-500-rgb: 239, 68, 68;
  --yue-ui-red-600: red;
  --yue-ui-red-600-rgb: 255, 0, 0;
  --yue-ui-red-700: #e53e3e;
  --yue-ui-red-700-rgb: 229, 62, 62;
  --yue-ui-red-400: #e05a5a;
  --yue-ui-red-400-rgb: 224, 90, 90;
  --yue-ui-red-300: #fca5a5;
  --yue-ui-red-300-rgb: 252, 165, 165;
  --yue-ui-red-soft: #ff6464;
  --yue-ui-red-soft-rgb: 255, 100, 100;
  --yue-ui-rose-500: #f43f5e;
  --yue-ui-rose-500-rgb: 244, 63, 94;
  --yue-ui-green-moss: #38a169;
  --yue-ui-green-moss-rgb: 56, 161, 105;
  --yue-ui-green-800: #276749;
  --yue-ui-green-800-rgb: 39, 103, 73;
  --yue-ui-green-emerald: #10b981;
  --yue-ui-green-emerald-rgb: 16, 185, 129;
  --yue-ui-green-bright: #22c55e;
  --yue-ui-green-bright-rgb: 34, 197, 94;
  --yue-ui-green-600: #16a34a;
  --yue-ui-green-600-rgb: 22, 163, 74;
  --yue-ui-green-500: #4caf50;
  --yue-ui-green-500-rgb: 76, 175, 80;
  --yue-ui-green-300: #4ade80;
  --yue-ui-green-300-rgb: 74, 222, 128;
  --yue-ui-emerald-400: #34d399;
  --yue-ui-emerald-400-rgb: 52, 211, 153;
  --yue-ui-indigo: #6366f1;
  --yue-ui-indigo-rgb: 99, 102, 241;
  --yue-ui-purple-400: #a78bfa;
  --yue-ui-purple-400-rgb: 167, 139, 250;
  --yue-ui-violet-400: #a078ff;
  --yue-ui-violet-400-rgb: 160, 120, 255;
  --yue-ui-violet-300: #c4b5fd;
  --yue-ui-violet-300-rgb: 196, 181, 253;
  --yue-ui-amber-400: #fbbf24;
  --yue-ui-amber-400-rgb: 251, 191, 36;
  --yue-ui-amber-400-bright: #ffc300;
  --yue-ui-amber-400-bright-rgb: 255, 195, 0;
  --yue-ui-amber-500: #f59e0b;
  --yue-ui-amber-500-rgb: 245, 158, 11;
  --yue-ui-amber-300: #fcd34d;
  --yue-ui-amber-300-rgb: 252, 211, 77;
  --yue-ui-amber-100: #ffe9a8;
  --yue-ui-amber-100-rgb: 255, 233, 168;
  --yue-ui-amber-100-bright: #ffd28a;
  --yue-ui-amber-100-bright-rgb: 255, 210, 138;
  --yue-ui-gray-300: #d1d5db;
  --yue-ui-gray-300-rgb: 209, 213, 219;
  --yue-ui-gray-250: #d9d9d9;
  --yue-ui-gray-250-rgb: 217, 217, 217;
  --yue-ui-gray-350: #bbb;
  --yue-ui-gray-350-rgb: 187, 187, 187;
  --yue-ui-gray-450: #999;
  --yue-ui-gray-450-rgb: 153, 153, 153;
  --yue-ui-gray-400: #9ca3af;
  --yue-ui-gray-400-rgb: 156, 163, 175;
  --yue-ui-gray-500: #6b7280;
  --yue-ui-gray-500-rgb: 107, 114, 128;
  --yue-ui-gray-600: #4b5563;
  --yue-ui-gray-600-rgb: 75, 85, 99;
  --yue-ui-gray-650: #666;
  --yue-ui-gray-650-rgb: 102, 102, 102;
  --yue-ui-gray-700: #888;
  --yue-ui-gray-700-rgb: 136, 136, 136;
  --yue-ui-gray-150: #fafafa;
  --yue-ui-gray-150-rgb: 250, 250, 250;
  --yue-ui-gray-blue: #718096;
  --yue-ui-gray-blue-rgb: 113, 128, 150;
  --yue-ui-slate-400: #94a3b8;
  --yue-ui-slate-400-rgb: 148, 163, 184;
  --yue-ui-slate-900: #0f172a;
  --yue-ui-slate-900-rgb: 15, 23, 42;
  --yue-ui-teal-700: #0f766e;
  --yue-ui-teal-700-rgb: 15, 118, 110;
  --yue-ui-orange-500: #f97316;
  --yue-ui-orange-500-rgb: 249, 115, 22;
  --yue-ui-wechat-green: #07c160;
  --yue-ui-wechat-green-rgb: 7, 193, 96;
  --yue-ui-antd-blue: #1677ff;
  --yue-ui-antd-blue-rgb: 22, 119, 255;
  --yue-ui-antd-blue-bright: #1890ff;
  --yue-ui-antd-blue-bright-rgb: 24, 144, 255;
  --yue-ui-antd-green: #52c41a;
  --yue-ui-antd-green-rgb: 82, 196, 26;
  --yue-ui-antd-red: #ff4d4f;
  --yue-ui-antd-red-rgb: 255, 77, 79;
  --yue-ui-antd-volcano: #fa541c;
  --yue-ui-antd-volcano-rgb: 250, 84, 28;
  --yue-ui-antd-orange: #fa8c16;
  --yue-ui-antd-orange-rgb: 250, 140, 22;
  --yue-ui-antd-purple: #722ed1;
  --yue-ui-antd-purple-rgb: 114, 46, 209;
  --yue-ui-antd-cyan: #13c2c2;
  --yue-ui-antd-cyan-rgb: 19, 194, 194;
  --yue-ui-orange-deep: #ff8c00;
  --yue-ui-orange-deep-rgb: 255, 140, 0;
  --yue-ui-silver: silver;
  --yue-ui-silver-rgb: 192, 192, 192;
  --yue-ui-aqua: #0ff;
  --yue-ui-aqua-rgb: 0, 255, 255;
  --yue-ui-ink: #080c0f;
  --yue-ui-ink-rgb: 8, 12, 15;
  --yue-ui-ink-soft: #111;
  --yue-ui-ink-soft-rgb: 17, 17, 17;
  --yue-ui-muted-blue: #6b8ca0;
  --yue-ui-muted-blue-rgb: 107, 140, 160;
  --yue-ui-cyan-bright: #00d4ff;
  --yue-ui-cyan-bright-rgb: 0, 212, 255;
  --yue-ui-cyan-200: #a5f3fc;
  --yue-ui-cyan-200-rgb: 165, 243, 252;
  --yue-ui-panel-blue: #f7fbff;
  --yue-ui-panel-blue-rgb: 247, 251, 255;
  --yue-ui-panel-blue-soft: #ecf4fb;
  --yue-ui-panel-blue-soft-rgb: 236, 244, 251;
  --yue-ui-deep-blue: #081c2a;
  --yue-ui-deep-blue-rgb: 8, 28, 42;
  --yue-ui-navy-medium: #0a3a5e;
  --yue-ui-navy-medium-rgb: 10, 58, 94;
  --yue-ui-navy-mid: #1a1a2e;
  --yue-ui-navy-mid-rgb: 26, 26, 46;
  --yue-ui-navy: #0a1e3f;
  --yue-ui-navy-rgb: 10, 30, 63;
  --yue-ui-navy-light: #0d2f5c;
  --yue-ui-navy-light-rgb: 13, 47, 92;
  --yue-ui-navy-deep: #06203f;
  --yue-ui-navy-deep-rgb: 6, 32, 63;
  --yue-ui-navy-void: #051d33;
  --yue-ui-navy-void-rgb: 5, 29, 51;
  --yue-ui-ice: #e6f4ff;
  --yue-ui-ice-rgb: 230, 244, 255;
  --yue-ui-ice-soft: #d2ecfc;
  --yue-ui-ice-soft-rgb: 210, 236, 252;
  --yue-ui-mint: #8fe0c8;
  --yue-ui-mint-rgb: 143, 224, 200;
  --yue-ui-apricot: #f7c078;
  --yue-ui-apricot-rgb: 247, 192, 120;
  --yue-ui-lavender: #b0a8ec;
  --yue-ui-lavender-rgb: 176, 168, 236;
  --yue-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --yue-font-slogan: "YueXi Slogan", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --yue-font-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
  --yue-font-xs: clamp(.625rem, .58rem + .22vw, .72rem);
  --yue-font-sm: clamp(.72rem, .66rem + .3vw, .82rem);
  --yue-font-base: clamp(.82rem, .74rem + .4vw, .95rem);
  --yue-font-lg: clamp(.95rem, .85rem + .5vw, 1.1rem);
  --yue-font-xl: clamp(1.1rem, .96rem + .7vw, 1.35rem);
  --yue-font-display-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --yue-font-display-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --yue-font-display-weight: 700;
  --yue-font-display-line-height: 1.1;
  --yue-font-display-letter-spacing: -.01em;
  --yue-font-headline-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --yue-font-headline-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem);
  --yue-font-headline-weight: 700;
  --yue-font-headline-line-height: 1.2;
  --yue-font-headline-letter-spacing: -.01em;
  --yue-font-title-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --yue-font-title-size: var(--yue-font-xl);
  --yue-font-title-weight: 700;
  --yue-font-title-line-height: 1.3;
  --yue-font-title-letter-spacing: 0;
  --yue-font-body-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --yue-font-body-size: var(--yue-font-base);
  --yue-font-body-weight: 400;
  --yue-font-body-line-height: 1.6;
  --yue-font-body-letter-spacing: 0;
  --yue-font-label-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --yue-font-label-size: var(--yue-font-sm);
  --yue-font-label-weight: 600;
  --yue-font-label-line-height: 1.4;
  --yue-font-label-letter-spacing: .02em;
  --yue-font-mono-family: "Geist Mono", "SFMono-Regular", Consolas, monospace;
  --yue-font-mono-size: var(--yue-font-sm);
  --yue-font-mono-weight: 400;
  --yue-font-mono-line-height: 1.5;
  --yue-font-mono-letter-spacing: 0;
  --yue-space-0: 0;
  --yue-space-xs: 4px;
  --yue-space-sm: 8px;
  --yue-space-md: 16px;
  --yue-space-lg: 24px;
  --yue-space-xl: 32px;
  --yue-space-2xl: 48px;
  --yue-space-fluid-gap: clamp(8px, .5rem + .4vw, 14px);
  --yue-space-fluid-gap-sm: clamp(6px, .4rem + .2vw, 10px);
  --yue-space-fluid-pad: clamp(10px, .65rem + .3vw, 16px);
  --yue-radius-sm: 10px;
  --yue-radius-md: 16px;
  --yue-radius-lg: 24px;
  --yue-radius-xl: 28px;
  --yue-radius-full: 9999px;
  --yue-radius-fluid: clamp(12px, .8rem + .3vw, 18px);
  --yue-layout-sidebar-width: clamp(200px, 13rem + 1vw, 234px);
  --yue-layout-right-sidebar-width: 360px;
  --yue-layout-task-island-width: clamp(260px, 16rem + 3vw, 440px);
  --yue-layout-gen-btn-island-width: clamp(360px, 22rem + 4vw, 520px);
  --yue-layout-new-sidebar-width: clamp(580px, 36rem + 8vw, 1092px);
  --yue-layout-card-min: clamp(92px, 5.6rem + 1.4vw, 120px);
  --yue-shadow-shadow-card: 0 4px 24px #19232a14;
  --yue-shadow-shadow-card-hover: 0 18px 50px #19232a29;
  --yue-shadow-shadow-glow: 0 0 40px #0070ab33;
  --yue-shadow-shadow-near: 0 24px 72px #19232a24, 0 0 0 1px #0070ab14;
  --yue-shadow-shadow-mid: 0 4px 24px #0624360d;
  --yue-glass-opacity: 1;
  --yue-glass-alpha: calc(var(--yue-glass-opacity, 1) * .5);
  --yue-glass-alpha-strong: calc(var(--yue-glass-opacity, 1) * .6);
  --yue-glass-alpha-near: calc(var(--yue-glass-opacity, 1) * .6);
  --yue-glass-alpha-mid: calc(var(--yue-glass-opacity, 1) * .5);
  --yue-glass-alpha-far: calc(var(--yue-glass-opacity, 1) * .36);
  --yue-glass-bg-rgb: 253, 254, 255;
  --yue-glass-tint-rgb: 255, 255, 255;
  --yue-glass-accent-cyan-rgb: 0, 112, 171;
  --yue-glass-blur-near: 32px;
  --yue-glass-blur-mid: 32px;
  --yue-glass-blur-far: 32px;
  --yue-glass-blur-soft: 20px;
  --yue-glass-blur-muted: 16px;
  --yue-glass-blur-deep: 48px;
  --yue-glass-saturate-near: 180%;
  --yue-glass-saturate-mid: 180%;
  --yue-glass-saturate-far: 180%;
  --yue-glass-saturate-soft: 160%;
  --yue-glass-saturate-muted: 140%;
  --yue-glass-saturate-deep: 180%;
  --yue-glass-border-near: #ffffff52;
  --yue-glass-border-mid: #ffffff38;
  --yue-glass-border-far: #ffffff2e;
  --yue-glass-edge-top: inset 0 1px 0 0 rgba(var(--yue-glass-tint-rgb), .65);
  --yue-glass-edge-bottom: inset 0 -1px 0 0 rgba(var(--yue-glass-accent-cyan-rgb), .18);
  --yue-glass-edge-sides: inset 1px 0 0 0 rgba(var(--yue-glass-tint-rgb), .2), inset -1px 0 0 0 rgba(var(--yue-glass-tint-rgb), .1);
  --yue-glass-inner-glow: inset 0 0 28px rgba(var(--yue-glass-tint-rgb), .1);
  --yue-glass-refraction: inset 0 1px 0 0 rgba(var(--yue-glass-tint-rgb), .65), inset 0 -1px 0 0 rgba(var(--yue-glass-accent-cyan-rgb), .16), inset 1px 0 0 0 rgba(var(--yue-glass-tint-rgb), .18), inset -1px 0 0 0 rgba(var(--yue-glass-tint-rgb), .08), inset 0 0 0 1px rgba(var(--yue-glass-tint-rgb), .22);
  --yue-glass-no-corners: inset 0 0 0 1px rgba(var(--yue-glass-tint-rgb), .12);
  --yue-glass-island-glow: inset 0 0 0 1px rgba(var(--yue-glass-tint-rgb), .45), inset 0 1px 0 0 rgba(var(--yue-glass-tint-rgb), .6), inset 12px 12px 28px -12px rgba(var(--yue-glass-tint-rgb), .34), inset -12px -12px 28px -12px rgba(var(--yue-glass-accent-cyan-rgb), .2);
  --yue-glass-island-glow-hover: inset 0 0 0 1px rgba(var(--yue-glass-tint-rgb), .58), inset 0 1px 0 0 rgba(var(--yue-glass-tint-rgb), .72), inset 16px 16px 36px -14px rgba(var(--yue-glass-tint-rgb), .44), inset -16px -16px 36px -14px rgba(var(--yue-glass-accent-cyan-rgb), .32);
  --yue-glass-frost-strength: .45;
  --yue-glass-press-inset: inset 0 2px 6px #0624362e;
  --yue-glass-press-inset-strong: inset 0 3px 10px #06243647;
  --yue-glass-sheen-gradient: linear-gradient(115deg, transparent 30%, #ffffff73 50%, transparent 70%);
  --yue-glass-bg-near: rgba(var(--yue-glass-bg-rgb), var(--yue-glass-alpha-near));
  --yue-glass-bg-mid: rgba(var(--yue-glass-bg-rgb), var(--yue-glass-alpha-mid));
  --yue-glass-bg-far: rgba(var(--yue-glass-bg-rgb), var(--yue-glass-alpha-far));
  --yue-surface-glass: rgba(var(--yue-glass-bg-rgb), var(--yue-glass-alpha));
  --yue-surface-glass-strong: rgba(var(--yue-glass-bg-rgb), var(--yue-glass-alpha-strong));
  --yue-ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --yue-ease-out-back: cubic-bezier(.16, 1, .3, 1);
  --yue-ease-out-back-strong: cubic-bezier(.175, .885, .32, 1.275);
  --yue-ease-out-back-medium: cubic-bezier(.215, .61, .355, 1.175);
  --yue-ease-out-back-soft: cubic-bezier(.34, 1.3, .64, 1);
  --yue-ease-spring: cubic-bezier(.19, 1, .22, 1);
  --yue-ease-standard: cubic-bezier(.4, 0, .2, 1);
  --yue-ease-out-power2: cubic-bezier(.33, 1, .68, 1);
  --yue-ease-in-power2: cubic-bezier(.55, .06, .68, .19);
  --yue-ease-out-power3: cubic-bezier(.22, 1, .36, 1);
  --yue-ease-in-out-power2: cubic-bezier(.65, 0, .35, 1);
  --yue-ease-sine-in-out: cubic-bezier(.45, 0, .55, 1);
  --yue-ease-linear: linear;
  --yue-duration-quick: .15s;
  --yue-duration-fast: .2s;
  --yue-duration-base: .3s;
  --yue-duration-smooth: .4s;
  --yue-duration-bouncy: .5s;
  --yue-duration-spring: .6s;
  --yue-duration-deep: .8s;
  --yue-duration-stagger: 70ms;
  --yue-duration-stagger-items: 60ms;
  --yue-duration-scrub: .5s;
  --yue-duration-ambient-wave: 9s;
  --yue-duration-ambient-wave-step: 3s;
  --yue-duration-scroll: 1.1s;
  --yue-duration-viewport: .6s;
  --yue-duration-twinkle: 2.5s;
  --yue-duration-twinkle-step: 2s;
  --yue-motion-state: var(--yue-duration-fast);
  --yue-motion-enter: var(--yue-duration-smooth);
  --yue-motion-exit: var(--yue-duration-fast);
  --yue-motion-press: var(--yue-duration-quick);
  --yue-motion-emphasis: var(--yue-duration-bouncy);
  --yue-motion-celebration: var(--yue-duration-spring);
  --yue-motion-ambient: var(--yue-duration-smooth);
  --yue-breakpoint-sm: 640px;
  --yue-breakpoint-md: 1024px;
  --yue-breakpoint-lg: 1440px;
}

[data-theme="ocean"] {
  --yue-color-ocean-deep: #080c0f;
  --yue-color-ocean-mid: #202a32;
  --yue-color-ocean-light: #0070ab;
  --yue-color-ocean-cyan: #0089d0;
  --yue-color-ocean-foam: #3e505c;
  --yue-color-ocean-white: #e0e5e9;
  --yue-color-brand-blue: #0070ab;
  --yue-color-brand-blue-dark: #005387;
  --yue-color-neon-glow: #1a95d8;
  --yue-color-text-primary: #080c0f;
  --yue-color-text-secondary: #202a32;
  --yue-color-text-tertiary: #3e505c;
  --yue-color-text-placeholder: #707c85;
  --yue-color-text-link: #0089d0;
  --yue-color-bg-canvas: #e0e5e9;
  --yue-color-bg-hover: #0070ab14;
  --yue-color-bg-active: #0070ab1f;
  --yue-color-border-default: #0070ab1f;
  --yue-color-border-strong: #0070ab33;
  --yue-color-border-hover: #0070ab66;
  --yue-color-status-info: #0089d0;
  --yue-color-gradient-primary: linear-gradient(135deg, #0070ab, #0089d0);
  --yue-color-gradient-accent: linear-gradient(135deg, #1a95d8, #005387);
  --yue-color-gradient-glass: linear-gradient(145deg, #fffffff2, #e8f0f6d9);
  --yue-glass-bg-rgb: 232, 240, 246;
  --yue-glass-tint-rgb: 255, 255, 255;
  --yue-glass-accent-cyan-rgb: 0, 112, 171;
}

[data-theme="moonlight"] {
  --yue-color-ocean-deep: #ebf3f7;
  --yue-color-ocean-mid: #becdd5;
  --yue-color-ocean-light: #0093c5;
  --yue-color-ocean-cyan: #00aee9;
  --yue-color-ocean-foam: #92a9b4;
  --yue-color-ocean-white: #000001;
  --yue-color-brand-blue: #0093c5;
  --yue-color-brand-blue-dark: #0074a0;
  --yue-color-neon-glow: #25baf2;
  --yue-color-text-primary: #ebf3f7;
  --yue-color-text-secondary: #becdd5;
  --yue-color-text-tertiary: #92a9b4;
  --yue-color-text-placeholder: #66747b;
  --yue-color-text-link: #00aee9;
  --yue-color-bg-canvas: #000001;
  --yue-color-bg-hover: #0093c514;
  --yue-color-bg-active: #0093c51f;
  --yue-color-border-default: #ffffff1a;
  --yue-color-border-strong: #ffffff2e;
  --yue-color-border-hover: #0093c566;
  --yue-color-status-info: #00aee9;
  --yue-color-gradient-primary: linear-gradient(135deg, #0093c5, #00aee9);
  --yue-color-gradient-accent: linear-gradient(135deg, #25baf2, #0074a0);
  --yue-color-gradient-glass: linear-gradient(145deg, #00101dcc, #00061199);
  --yue-glass-bg-rgb: 0, 16, 29;
  --yue-glass-tint-rgb: 171, 202, 217;
  --yue-glass-accent-cyan-rgb: 0, 147, 197;
}

[data-theme="dawn"] {
  --yue-color-ocean-deep: #f8f0ed;
  --yue-color-ocean-mid: #d7c7c1;
  --yue-color-ocean-light: #c66846;
  --yue-color-ocean-cyan: #eb7a52;
  --yue-color-ocean-foam: #b69f97;
  --yue-color-ocean-white: #010000;
  --yue-color-brand-blue: #c66846;
  --yue-color-brand-blue-dark: #a14d2f;
  --yue-color-neon-glow: #f48a64;
  --yue-color-text-primary: #f8f0ed;
  --yue-color-text-secondary: #d7c7c1;
  --yue-color-text-tertiary: #b69f97;
  --yue-color-text-placeholder: #7c6e69;
  --yue-color-text-link: #eb7a52;
  --yue-color-bg-canvas: #010000;
  --yue-color-bg-hover: #c6684614;
  --yue-color-bg-active: #c668461f;
  --yue-color-border-default: #ffffff1a;
  --yue-color-border-strong: #ffffff2e;
  --yue-color-border-hover: #c6684666;
  --yue-color-status-info: #eb7a52;
  --yue-color-gradient-primary: linear-gradient(135deg, #c66846, #eb7a52);
  --yue-color-gradient-accent: linear-gradient(135deg, #f48a64, #a14d2f);
  --yue-color-gradient-glass: linear-gradient(145deg, #1c0501cc, #10000099);
  --yue-glass-bg-rgb: 28, 5, 1;
  --yue-glass-tint-rgb: 220, 188, 177;
  --yue-glass-accent-cyan-rgb: 198, 104, 70;
}

[data-theme="aurora"] {
  --yue-color-ocean-deep: #f1f1f8;
  --yue-color-ocean-mid: #cac9d7;
  --yue-color-ocean-light: #8677ce;
  --yue-color-ocean-cyan: #9e8cf4;
  --yue-color-ocean-foam: #a4a2b7;
  --yue-color-ocean-white: #000001;
  --yue-color-brand-blue: #8677ce;
  --yue-color-brand-blue-dark: #695ba9;
  --yue-color-neon-glow: #aa9afc;
  --yue-color-text-primary: #f1f1f8;
  --yue-color-text-secondary: #cac9d7;
  --yue-color-text-tertiary: #a4a2b7;
  --yue-color-text-placeholder: #71707d;
  --yue-color-text-link: #9e8cf4;
  --yue-color-bg-canvas: #000001;
  --yue-color-bg-hover: #8677ce14;
  --yue-color-bg-active: #8677ce1f;
  --yue-color-border-default: #ffffff1a;
  --yue-color-border-strong: #ffffff2e;
  --yue-color-border-hover: #8677ce66;
  --yue-color-status-info: #9e8cf4;
  --yue-color-gradient-primary: linear-gradient(135deg, #8677ce, #9e8cf4);
  --yue-color-gradient-accent: linear-gradient(135deg, #aa9afc, #695ba9);
  --yue-color-gradient-glass: linear-gradient(145deg, #0d091fcc, #05021399);
  --yue-glass-bg-rgb: 13, 9, 31;
  --yue-glass-tint-rgb: 195, 192, 221;
  --yue-glass-accent-cyan-rgb: 134, 119, 206;
}

[data-theme="coral"] {
  --yue-color-ocean-deep: #f8efee;
  --yue-color-ocean-mid: #d7c6c4;
  --yue-color-ocean-light: #c8635d;
  --yue-color-ocean-cyan: #ed756e;
  --yue-color-ocean-foam: #b79e9b;
  --yue-color-ocean-white: #010000;
  --yue-color-brand-blue: #c8635d;
  --yue-color-brand-blue-dark: #a34945;
  --yue-color-neon-glow: #f7857d;
  --yue-color-text-primary: #f8efee;
  --yue-color-text-secondary: #d7c6c4;
  --yue-color-text-tertiary: #b79e9b;
  --yue-color-text-placeholder: #7d6d6c;
  --yue-color-text-link: #ed756e;
  --yue-color-bg-canvas: #010000;
  --yue-color-bg-hover: #c8635d14;
  --yue-color-bg-active: #c8635d1f;
  --yue-color-border-default: #ffffff1a;
  --yue-color-border-strong: #ffffff2e;
  --yue-color-border-hover: #c8635d66;
  --yue-color-status-info: #ed756e;
  --yue-color-gradient-primary: linear-gradient(135deg, #c8635d, #ed756e);
  --yue-color-gradient-accent: linear-gradient(135deg, #f7857d, #a34945);
  --yue-color-gradient-glass: linear-gradient(145deg, #1d0504cc, #10000099);
  --yue-glass-bg-rgb: 29, 5, 4;
  --yue-glass-tint-rgb: 221, 187, 183;
  --yue-glass-accent-cyan-rgb: 200, 99, 93;
}

[data-theme="lotus"] {
  --yue-color-ocean-deep: #080c09;
  --yue-color-ocean-mid: #222c24;
  --yue-color-ocean-light: #1d7d3e;
  --yue-color-ocean-cyan: #25984d;
  --yue-color-ocean-foam: #425244;
  --yue-color-ocean-white: #e1e6e2;
  --yue-color-brand-blue: #1d7d3e;
  --yue-color-brand-blue-dark: #005e26;
  --yue-color-neon-glow: #40a35c;
  --yue-color-text-primary: #080c09;
  --yue-color-text-secondary: #222c24;
  --yue-color-text-tertiary: #425244;
  --yue-color-text-placeholder: #727e74;
  --yue-color-text-link: #25984d;
  --yue-color-bg-canvas: #e1e6e2;
  --yue-color-bg-hover: #1d7d3e14;
  --yue-color-bg-active: #1d7d3e1f;
  --yue-color-border-default: #1d7d3e1f;
  --yue-color-border-strong: #1d7d3e33;
  --yue-color-border-hover: #1d7d3e66;
  --yue-color-status-info: #25984d;
  --yue-color-gradient-primary: linear-gradient(135deg, #1d7d3e, #25984d);
  --yue-color-gradient-accent: linear-gradient(135deg, #40a35c, #005e26);
  --yue-color-gradient-glass: linear-gradient(145deg, #fffffff2, #e8f0f6d9);
  --yue-glass-bg-rgb: 233, 241, 234;
  --yue-glass-tint-rgb: 255, 255, 255;
  --yue-glass-accent-cyan-rgb: 29, 125, 62;
}

.host-theme {
  --yue-host-text-primary: #0a2e14;
  --yue-host-text-secondary: #0a2e14a6;
  --yue-host-text-tertiary: #0a2e1480;
  --yue-host-primary: #00875a;
  --yue-host-primary-rgb: 0, 135, 90;
  --yue-host-primary-dark: #006b48;
  --yue-host-primary-dark-rgb: 0, 107, 72;
  --yue-host-primary-deep: #005240;
  --yue-host-primary-deep-rgb: 0, 82, 64;
  --yue-host-primary-light: #00a06c;
  --yue-host-primary-light-rgb: 0, 160, 108;
  --yue-host-cyan: #00875a;
  --yue-host-cyan-rgb: 0, 135, 90;
  --yue-host-glass-bg-rgb: 255, 255, 255;
  --yue-host-glass-tint-rgb: 10, 46, 20;
  --yue-host-success: #00875a;
  --yue-host-success-rgb: 0, 135, 90;
  --yue-host-warning: #c47700;
  --yue-host-warning-rgb: 196, 119, 0;
  --yue-host-error: #c62828;
  --yue-host-error-rgb: 198, 40, 40;
  --yue-host-border: #0a2e141f;
  --yue-host-border-strong: #0a2e1433;
  --yue-host-input-bg: #fff;
  --yue-host-hover: #00875a09;
  --yue-host-bg-base: #f0f4f1;
  --yue-host-radius: 2;
  --yue-color-text-primary: var(--yue-host-text-primary);
  --yue-color-text-secondary: var(--yue-host-text-secondary);
  --yue-color-text-tertiary: var(--yue-host-text-tertiary);
  --yue-color-text-placeholder: var(--yue-host-text-tertiary);
  --yue-color-text-link: var(--yue-host-cyan);
  --yue-color-ocean-deep: var(--yue-host-primary-dark);
  --yue-color-ocean-light: var(--yue-host-primary);
  --yue-color-ocean-cyan: var(--yue-host-cyan);
  --yue-color-brand-blue: var(--yue-host-primary);
  --yue-color-brand-blue-dark: var(--yue-host-primary-dark);
  --yue-color-neon-glow: var(--yue-host-primary-light);
  --yue-color-bg-canvas: var(--yue-host-bg-base);
  --yue-color-bg-hover: var(--yue-host-hover);
  --yue-color-bg-active: var(--yue-host-hover);
  --yue-color-border-default: var(--yue-host-border);
  --yue-color-border-strong: var(--yue-host-border-strong);
  --yue-color-border-hover: var(--yue-host-border-strong);
  --yue-color-status-success: var(--yue-host-success);
  --yue-color-status-warning: var(--yue-host-warning);
  --yue-color-status-error: var(--yue-host-error);
  --yue-glass-bg-rgb: var(--yue-host-glass-bg-rgb);
  --yue-glass-tint-rgb: var(--yue-host-glass-tint-rgb);
  --yue-glass-accent-cyan-rgb: var(--yue-host-primary-rgb);
}

:root {
  --ocean-deep: #0c2242;
  --ocean-mid: #24395e;
  --ocean-light: #0a6cff;
  --ocean-cyan: #00b3e6;
  --ocean-foam: #4a5f85;
  --ocean-white: #f4f9ff;
  --brand-blue: #0a6cff;
  --brand-blue-dark: #0a54d0;
  --neon-glow: #1e7bff;
  --golden: #d1a84b;
  --sidebar-width: 234px;
  --new-sidebar-width: var(--fluid-new-sidebar);
  --right-sidebar-width: 360px;
  --task-island-width: var(--fluid-task-island);
  --gen-btn-island-width: var(--fluid-gen-btn-island);
  --glass-opacity: 1;
  --glass-alpha: calc(var(--glass-opacity, 1) * .62);
  --glass-alpha-strong: calc(var(--glass-opacity, 1) * .72);
  --glass-alpha-near: calc(var(--glass-opacity, 1) * .72);
  --glass-alpha-mid: calc(var(--glass-opacity, 1) * .5);
  --glass-alpha-far: calc(var(--glass-opacity, 1) * .45);
  --surface-glass: rgba(var(--glass-bg-rgb), var(--glass-alpha));
  --surface-glass-strong: rgba(var(--glass-bg-rgb), var(--glass-alpha-strong));
  --border-subtle: #1450be24;
  --border-glow: #0a6cff59;
  --shadow-card: 0 1px 2px #0c285a0d, 0 8px 28px #0c285a12;
  --shadow-card-hover: 0 2px 6px #0c285a0f, 0 14px 40px #0c285a21;
  --shadow-glow: 0 0 40px #0a6cff29;
  --island-glow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .72), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .9);
  --island-glow-hover: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .9), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), 1);
  --no-corners: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .4);
  --glass-edge-top: inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .9);
  --glass-edge-bottom: inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .12);
  --glass-edge-sides: inset 1px 0 0 0 rgba(var(--glass-tint-rgb), .14), inset -1px 0 0 0 rgba(var(--glass-tint-rgb), .07);
  --glass-inner-glow: inset 0 0 28px rgba(var(--glass-tint-rgb), .1);
  --glass-edge-gradient: linear-gradient(145deg, rgba(var(--glass-tint-rgb), .55), rgba(var(--accent-cyan-rgb), .22) 48%, rgba(var(--glass-tint-rgb), .1));
  --glass-refraction: inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .9), inset 0 0 0 1px rgba(var(--glass-tint-rgb), .5);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-out-back: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.19, 1, .22, 1);
  --transition-quick: var(--dur-1) var(--ease-pro);
  --transition-fast: var(--dur-2) var(--ease-pro);
  --transition-base: var(--dur-3) var(--ease-pro);
  --transition-smooth: var(--dur-3) var(--ease-pro);
  --transition-bouncy: var(--dur-3) var(--ease-pro);
  --transition-spring: var(--dur-3) var(--ease-pro);
  --glass-blur-near: calc(var(--yue-glass-blur-near, 26px) * var(--glass-blur-level, 1));
  --glass-saturate-near: var(--yue-glass-saturate-near, 160%);
  --glass-bg-near: rgba(var(--glass-bg-rgb), var(--glass-alpha-near));
  --glass-border-near: #ffffffb8;
  --glass-shadow-near: 0 24px 72px #0c285a29, 0 0 0 1px #1450be0f;
  --glass-blur-mid: calc(var(--yue-glass-blur-mid, 16px) * var(--glass-blur-level, 1));
  --glass-saturate-mid: var(--yue-glass-saturate-mid, 140%);
  --glass-bg-mid: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid));
  --glass-border-mid: #ffffff8c;
  --glass-shadow-mid: 0 1px 2px #0c285a0d, 0 8px 28px #0c285a12;
  --glass-blur-far: calc(var(--yue-glass-blur-far, 0px) * var(--glass-blur-level, 1));
  --glass-saturate-far: var(--yue-glass-saturate-far, 100%);
  --glass-bg-far: rgba(var(--glass-bg-rgb), var(--glass-alpha-far));
  --glass-border-far: #fff6;
  --glass-blur-soft: calc(var(--yue-glass-blur-soft, 20px) * var(--glass-blur-level, 1));
  --glass-saturate-soft: var(--yue-glass-saturate-soft, 160%);
  --glass-blur-muted: calc(var(--yue-glass-blur-muted, 16px) * var(--glass-blur-level, 1));
  --glass-saturate-muted: var(--yue-glass-saturate-muted, 140%);
  --glass-blur-deep: calc(var(--yue-glass-blur-deep, 48px) * var(--glass-blur-level, 1));
  --glass-saturate-deep: var(--yue-glass-saturate-deep, 180%);
  --glass-frost-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.15'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --glass-frost-sheen: linear-gradient(118deg, rgba(var(--glass-tint-rgb), .26) 0%, rgba(var(--glass-tint-rgb), .07) 26%, rgba(var(--glass-tint-rgb), .03) 46%, transparent 62%, rgba(var(--glass-tint-rgb), .04) 100%);
  --glass-frost-strength: .25;
  --press-inset: inset 0 2px 6px #0624362e;
  --press-inset-strong: inset 0 3px 10px #06243647;
  --ui-scale: 1;
  --fluid-font-xs: calc(clamp(.625rem, .58rem + .22vw, .72rem) * var(--ui-scale));
  --fluid-font-sm: calc(clamp(.72rem, .66rem + .3vw, .82rem) * var(--ui-scale));
  --fluid-font-base: calc(clamp(.82rem, .74rem + .4vw, .95rem) * var(--ui-scale));
  --fluid-font-lg: calc(clamp(.95rem, .85rem + .5vw, 1.1rem) * var(--ui-scale));
  --fluid-font-xl: calc(clamp(1.1rem, .96rem + .7vw, 1.35rem) * var(--ui-scale));
  --fluid-gap: calc(clamp(8px, .5rem + .4vw, 14px) * var(--ui-scale));
  --fluid-gap-sm: calc(clamp(6px, .4rem + .2vw, 10px) * var(--ui-scale));
  --fluid-pad: calc(clamp(10px, .65rem + .3vw, 16px) * var(--ui-scale));
  --fluid-radius: calc(clamp(12px, .8rem + .3vw, 18px) * var(--ui-scale));
  --fluid-card-min: calc(clamp(92px, 5.6rem + 1.4vw, 120px) * var(--ui-scale));
  --fluid-sidebar: calc(clamp(200px, calc(143px + 3.54vw), 234px) * var(--ui-scale));
  --sidebar-w: var(--fluid-sidebar);
  --fluid-task-island: clamp(260px, 16rem + 3vw, 440px);
  --fluid-gen-btn-island: clamp(360px, 22rem + 4vw, 520px);
  --fluid-new-sidebar: clamp(580px, 36rem + 8vw, 1092px);
  --ocean-deep-rgb: 12, 34, 66;
  --ocean-mid-rgb: 36, 57, 94;
  --ocean-light-rgb: 10, 108, 255;
  --ocean-cyan-rgb: 0, 179, 230;
  --ocean-foam-rgb: 74, 95, 133;
  --ocean-white-rgb: 244, 249, 255;
  --neon-glow-rgb: 30, 123, 255;
  --golden-rgb: 209, 168, 75;
  --glass-tint-rgb: 255, 255, 255;
  --glass-bg-rgb: 255, 255, 255;
  --scrim-alpha: 0;
  --glass-text-shadow: none;
  --shadow-rgb: 12, 40, 90;
  --accent-cyan-rgb: 10, 108, 255;
  --border-dark-rgb: 245, 250, 255;
  --slate-blue-rgb: 74, 112, 136;
  --gold-bright-rgb: 255, 215, 0;
  --bright-cyan-rgb: 74, 196, 224;
  --orange-rgb: 255, 107, 53;
  --indigo-rgb: 99, 102, 241;
  --emerald-rgb: 16, 185, 129;
  --text-primary: #0c2242;
  --text-secondary: #202a32;
  --text-tertiary: #3e505c;
  --text-placeholder: #707c85;
  --text-inverse: #ecf3f8;
  --text-link: #0a54d0;
  --text-primary-rgb: 12, 34, 66;
  --text-secondary-rgb: 32, 42, 50;
  --text-tertiary-rgb: 62, 80, 92;
  --bg-canvas: #eef6ff;
  --bg-primary: var(--ocean-white);
  --bg-surface: var(--surface-glass);
  --bg-elevated: var(--surface-glass-strong);
  --bg-hover: #0070ab14;
  --bg-active: #0070ab1f;
  --color-teal: #0d9488;
  --color-cyan: var(--ocean-cyan);
  --label-tertiary: var(--text-tertiary);
  --border-default: #1450be24;
  --border-strong: #1450be38;
  --border-hover: #0a6cff66;
  --success: #61bd67;
  --success-bg: #61bd671f;
  --success-rgb: 97, 189, 103;
  --warning: #d9a514;
  --warning-bg: #d9a5141f;
  --warning-rgb: 217, 165, 20;
  --error: #e85854;
  --error-bg: #e858541f;
  --error-rgb: 232, 88, 84;
  --info: #0a8fd1;
  --info-bg: rgba(var(--ocean-cyan-rgb), .12);
  --gradient-primary: linear-gradient(135deg, #1e7bff, #00b3e6);
  --gradient-accent: linear-gradient(135deg, #1e7bff, #0a6cff);
  --gradient-glass: linear-gradient(145deg, #fffffff2, #e8f0f6d9);
  --gradient-hero: linear-gradient(180deg, #e0e5e9 0%, #e8f0f5 100%);
  --card-accent-print: var(--ocean-light);
  --card-accent-edit: #d97706;
  --card-accent-ecom: #c98a2b;
  --card-accent-video: #7c3aed;
  --card-accent-copy: var(--ocean-light);
  --ocean-primary: #1a8fb8;
  --fb-color-a: var(--ocean-light);
  --fb-color-b: var(--neon-glow);
  --golden-dark: #b8860b;
  --golden-light: #f0c060;
  --accent-amber: #e8963a;
  --text-on-accent: #fff;
  --bright-aqua: #3dd6f5;
  --bright-aqua-rgb: 61, 214, 245;
  --scrollbar-thumb: rgba(var(--neon-glow-rgb), .3);
  --scrollbar-thumb-hover: var(--ocean-light);
  --scrollbar-track: transparent;
  --fluid-color-a: .01, .13, .48;
  --fluid-color-b: .16, .45, .88;
  --fluid-base-color: .68, .8, .96;
  --fluid-speed: .08;
  --fluid-scale: 1.5;
  --fluid-ink: .16;
  --fluid-star: .12;
  --fluid-curl: .3;
  --logo-c1: #0a54d0;
  --logo-c2: #1e7bff;
  --logo-c3: #5aa9ff;
  --logo-glow: #0a6cff73;
  --slogan-accent: #0a6cff;
  --slogan-accent-2: #00b3e6;
  --icon-ecom-1: #0a6cff;
  --icon-ecom-2: #00b3e6;
  --icon-print-1: #0a6cff;
  --icon-print-2: #00b3e6;
  --icon-edit-1: #0a6cff;
  --icon-edit-2: #00b3e6;
  --icon-copy-1: #0a6cff;
  --icon-copy-2: #00b3e6;
  --icon-video-1: #0a6cff;
  --icon-video-2: #00b3e6;
  --icon-imgproc-1: #0a6cff;
  --icon-imgproc-2: #00b3e6;
  --icon-default-1: #0a6cff;
  --icon-default-2: #00b3e6;
  --radius-xs: 6px;
  --radius-pill: 999px;
  --elevation-0: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .1);
  --elevation-1: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .1), 0 1px 2px rgba(var(--shadow-rgb), .05);
  --elevation-2: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .14), 0 4px 16px rgba(var(--shadow-rgb), .08);
  --elevation-3: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .16), 0 16px 48px rgba(var(--shadow-rgb), .18);
  --glow-focus: 0 0 0 2px rgba(var(--ocean-cyan-rgb), .45);
  --glow-running: 0 0 16px rgba(var(--neon-glow-rgb), .28);
  --glow-done: 0 0 12px rgba(var(--success-rgb), .3);
  --glow-gold: 0 0 12px rgba(var(--golden-rgb), .35);
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-md: .9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fw-body: 400;
  --fw-emph: 500;
  --fw-title: 600;
  --dur-1: .12s;
  --dur-2: .2s;
  --dur-3: .32s;
  --dur-4: .5s;
  --ease-pro: cubic-bezier(.16, 1, .3, 1);
  --glass-blur-level: 1;
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-debug: 500;
  --n-0: #fff;
  --n-50: #f7f9fb;
  --n-100: #eef2f5;
  --n-200: #dde4e9;
  --n-300: #c3ccd4;
  --n-400: #9aa6b1;
  --n-500: #707c85;
  --n-600: #556069;
  --n-700: var(--ocean-foam);
  --n-800: var(--ocean-mid);
  --n-900: #12181d;
  --n-950: var(--ocean-deep);
}

@media (max-width: 1500px) {
  :root {
    --fluid-sidebar: clamp(168px, calc(118px + 2.6vw), 198px);
    --fluid-gap: clamp(6px, .4rem + .3vw, 10px);
  }
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ocean-cyan);
  outline-offset: 2px;
}

.glass-island {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: var(--island-glow);
  border-radius: var(--radius-md);
  border: none;
}

.glass-panel {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .45));
  -webkit-backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  border-radius: var(--radius-sm);
}

.power-card, .task-card, .quick-entry-card, .stat, .style-pill, .tasks-area .task-item {
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
}

[data-theme="moonlight"] {
  --ocean-deep: #f2f6f9;
  --ocean-mid: #cdd8e0;
  --ocean-light: #8fb8d8;
  --ocean-cyan: #b9d9ef;
  --ocean-foam: #9aa8b3;
  --ocean-white: #04060a;
  --brand-blue: #8fb8d8;
  --brand-blue-dark: #6b93b2;
  --neon-glow: #a5d8ff;
  --golden: #d7dee8;
  --border-subtle: #ffffff1a;
  --border-glow: #8fb8d859;
  --shadow-card: 0 4px 24px #0000004d;
  --shadow-card-hover: 0 18px 50px #0006;
  --shadow-glow: 0 0 40px #8fb8d840;
  --island-glow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .18), inset 12px 12px 28px -12px rgba(var(--accent-cyan-rgb), .3), inset -12px -12px 28px -12px #0000004d;
  --island-glow-hover: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .26), inset 16px 16px 36px -14px rgba(var(--accent-cyan-rgb), .34), inset -16px -16px 36px -14px #00000059;
  --no-corners: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .06);
  --glass-edge-top: inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .22);
  --glass-edge-bottom: inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .3);
  --glass-edge-sides: inset 1px 0 0 0 rgba(var(--glass-tint-rgb), .07), inset -1px 0 0 0 rgba(var(--glass-tint-rgb), .04);
  --glass-inner-glow: inset 0 0 28px rgba(var(--accent-cyan-rgb), .11);
  --glass-refraction: inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .22), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .3), inset 1px 0 0 0 rgba(var(--glass-tint-rgb), .06), inset -1px 0 0 0 rgba(var(--glass-tint-rgb), .03), inset 0 0 0 1px rgba(var(--glass-tint-rgb), .1);
  --glass-border-near: #8fb8d833;
  --glass-shadow-near: 0 24px 72px #0000005c, 0 0 0 1px #8fb8d81a;
  --glass-border-mid: rgba(var(--glass-tint-rgb), .12);
  --glass-shadow-mid: 0 4px 24px #0000001f;
  --glass-border-far: rgba(var(--glass-tint-rgb), .07);
  --press-inset: inset 0 2px 6px #00000059;
  --press-inset-strong: inset 0 3px 10px #00000073;
  --ocean-deep-rgb: 242, 246, 249;
  --ocean-mid-rgb: 205, 216, 224;
  --ocean-light-rgb: 143, 184, 216;
  --ocean-cyan-rgb: 185, 217, 239;
  --ocean-foam-rgb: 154, 168, 179;
  --ocean-white-rgb: 4, 6, 10;
  --neon-glow-rgb: 165, 216, 255;
  --golden-rgb: 215, 222, 232;
  --glass-tint-rgb: 150, 196, 235;
  --glass-bg-rgb: 0, 0, 0;
  --glass-text-shadow: 0 1px 2px #00000073, 0 2px 10px #00081240;
  --shadow-rgb: 0, 0, 0;
  --accent-cyan-rgb: 143, 184, 216;
  --border-dark-rgb: 4, 6, 10;
  --slate-blue-rgb: 154, 168, 179;
  --gold-bright-rgb: 215, 222, 232;
  --bright-cyan-rgb: 185, 217, 239;
  --orange-rgb: 198, 104, 70;
  --indigo-rgb: 134, 119, 206;
  --emerald-rgb: 97, 189, 103;
  --text-primary: #f9fbfd;
  --text-secondary: #e4e9ef;
  --text-tertiary: #c8cfd7;
  --text-placeholder: #b9c2cb;
  --text-inverse: #04060a;
  --text-link: #b9d9ef;
  --text-primary-rgb: 249, 251, 253;
  --text-secondary-rgb: 228, 233, 239;
  --text-tertiary-rgb: 200, 207, 215;
  --bg-canvas: #04060a;
  --bg-surface: var(--surface-glass);
  --bg-elevated: var(--surface-glass-strong);
  --bg-hover: #8fb8d824;
  --bg-active: #8fb8d838;
  --border-default: #ffffff24;
  --border-strong: #ffffff3d;
  --border-hover: #8fb8d866;
  --background: #04060a;
  --foreground: #f9fbfd;
  --card: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  --card-foreground: #f9fbfd;
  --popover: #0d1118;
  --popover-foreground: #f9fbfd;
  --primary: #8fb8d8;
  --primary-foreground: #fff;
  --secondary: #8fb8d838;
  --secondary-foreground: #f9fbfd;
  --muted: #ffffff14;
  --muted-foreground: #c8cfd7;
  --accent: #8fb8d847;
  --accent-foreground: #f9fbfd;
  --border: #ffffff1f;
  --input: #ffffff29;
  --ring: #8fb8d8;
  --success: #61bd67;
  --success-bg: #61bd6726;
  --success-rgb: 97, 189, 103;
  --warning: #d9a514;
  --warning-bg: #d9a51426;
  --warning-rgb: 217, 165, 20;
  --error: #e85854;
  --error-bg: #e8585426;
  --error-rgb: 232, 88, 84;
  --info: #b9d9ef;
  --info-bg: #b9d9ef24;
  --gradient-primary: linear-gradient(135deg, #8fb8d8, #b9d9ef);
  --gradient-accent: linear-gradient(135deg, #8fb8d8, #6b93b2);
  --gradient-glass: linear-gradient(145deg, #0a0f18cc, #060a1099);
  --gradient-hero: linear-gradient(180deg, #04060a 0%, #0b1018 100%);
  --card-accent-print: #8fb8d8;
  --card-accent-edit: #c66846;
  --card-accent-ecom: #d1a84b;
  --card-accent-video: #8677ce;
  --card-accent-copy: #8fb8d8;
  --scrollbar-thumb: #8fb8d859;
  --scrollbar-thumb-hover: #8fb8d8;
  --scrollbar-track: transparent;
  --icon-ecom-1: oklch(78% .12 85);
  --icon-ecom-2: oklch(72% .13 25);
  --icon-print-1: oklch(75% .11 200);
  --icon-print-2: oklch(72% .12 260);
  --icon-edit-1: oklch(74% .12 290);
  --icon-edit-2: oklch(76% .13 340);
  --icon-copy-1: oklch(75% .11 160);
  --icon-copy-2: oklch(75% .11 200);
  --icon-video-1: oklch(74% .12 290);
  --icon-video-2: oklch(72% .12 260);
  --icon-imgproc-1: oklch(76% .11 220);
  --icon-imgproc-2: oklch(76% .11 170);
  --icon-fun-1: oklch(74% .14 320);
  --icon-fun-2: oklch(72% .13 290);
  --icon-default-1: oklch(74% .12 230);
  --icon-default-2: oklch(76% .11 200);
  --logo-c1: #fff;
  --logo-c2: #dbe9f4;
  --logo-c3: #aec6da;
  --logo-glow: #b4d7f066;
  --slogan-accent: #cfe9ff;
  --slogan-accent-2: #f0f8ff;
  --fluid-color-a: .02, .05, .12;
  --fluid-color-b: .25, .4, .6;
  --fluid-base-color: .02, .04, .08;
  --fluid-speed: .05;
  --fluid-scale: 2;
  --fluid-ink: .35;
  --fluid-star: .25;
  --fluid-curl: .15;
}

[data-theme="dawn"] {
  --ocean-deep: #f8f0ed;
  --ocean-mid: #d7c7c1;
  --ocean-light: #c66846;
  --ocean-cyan: #ed835e;
  --ocean-foam: #b69f97;
  --ocean-white: #010000;
  --brand-blue: #c66846;
  --brand-blue-dark: #983e1b;
  --neon-glow: #df7752;
  --golden: #d1a84b;
  --border-subtle: #ffffff1a;
  --border-glow: #c6684659;
  --shadow-card: 0 4px 24px #0000004d;
  --shadow-card-hover: 0 18px 50px #0006;
  --shadow-glow: 0 0 40px #c6684640;
  --island-glow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .18), inset 12px 12px 28px -12px rgba(var(--accent-cyan-rgb), .3), inset -12px -12px 28px -12px #0000004d;
  --island-glow-hover: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .26), inset 16px 16px 36px -14px rgba(var(--accent-cyan-rgb), .34), inset -16px -16px 36px -14px #00000059;
  --no-corners: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .06);
  --glass-edge-top: inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .22);
  --glass-edge-bottom: inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .32);
  --glass-edge-sides: inset 1px 0 0 0 rgba(var(--glass-tint-rgb), .07), inset -1px 0 0 0 rgba(var(--glass-tint-rgb), .04);
  --glass-inner-glow: inset 0 0 28px rgba(var(--accent-cyan-rgb), .12);
  --glass-refraction: inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .22), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .3), inset 1px 0 0 0 rgba(var(--glass-tint-rgb), .06), inset -1px 0 0 0 rgba(var(--glass-tint-rgb), .03), inset 0 0 0 1px rgba(var(--glass-tint-rgb), .1);
  --glass-border-near: #c6684633;
  --glass-shadow-near: 0 24px 72px #0000005c, 0 0 0 1px #c668461a;
  --glass-border-mid: rgba(var(--glass-tint-rgb), .12);
  --glass-shadow-mid: 0 4px 24px #0000001f;
  --glass-border-far: rgba(var(--glass-tint-rgb), .07);
  --press-inset: inset 0 2px 6px #00000059;
  --press-inset-strong: inset 0 3px 10px #00000073;
  --ocean-deep-rgb: 248, 240, 237;
  --ocean-mid-rgb: 215, 199, 193;
  --ocean-light-rgb: 198, 104, 70;
  --ocean-cyan-rgb: 237, 131, 94;
  --ocean-foam-rgb: 182, 159, 151;
  --ocean-white-rgb: 1, 0, 0;
  --neon-glow-rgb: 223, 119, 82;
  --golden-rgb: 209, 168, 75;
  --glass-tint-rgb: 240, 168, 122;
  --glass-bg-rgb: 0, 0, 0;
  --glass-text-shadow: 0 1px 2px #00000073, 0 2px 10px #10040040;
  --shadow-rgb: 0, 0, 0;
  --accent-cyan-rgb: 198, 104, 70;
  --border-dark-rgb: 1, 0, 0;
  --slate-blue-rgb: 182, 159, 151;
  --gold-bright-rgb: 209, 168, 75;
  --bright-cyan-rgb: 237, 131, 94;
  --orange-rgb: 198, 104, 70;
  --indigo-rgb: 134, 119, 206;
  --emerald-rgb: 97, 189, 103;
  --text-primary: #fdf7f5;
  --text-secondary: #e9e0db;
  --text-tertiary: #d6c8c2;
  --text-placeholder: #bdb0ac;
  --text-inverse: #0f0a08;
  --text-link: #ed835e;
  --text-primary-rgb: 253, 247, 245;
  --text-secondary-rgb: 233, 224, 219;
  --text-tertiary-rgb: 214, 200, 194;
  --bg-canvas: #010000;
  --bg-surface: var(--surface-glass);
  --bg-elevated: var(--surface-glass-strong);
  --bg-hover: #c6684624;
  --bg-active: #c6684638;
  --border-default: #ffffff24;
  --border-strong: #ffffff3d;
  --border-hover: #c6684666;
  --background: #010000;
  --foreground: #fdf7f5;
  --card: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  --card-foreground: #fdf7f5;
  --popover: #14080a;
  --popover-foreground: #fdf7f5;
  --primary: #c66846;
  --primary-foreground: #fff;
  --secondary: #c6684638;
  --secondary-foreground: #fdf7f5;
  --muted: #ffffff14;
  --muted-foreground: #d6c8c2;
  --accent: #c6684647;
  --accent-foreground: #fdf7f5;
  --border: #ffffff1f;
  --input: #ffffff29;
  --ring: #c66846;
  --success: #61bd67;
  --success-bg: #61bd6726;
  --success-rgb: 97, 189, 103;
  --warning: #d9a514;
  --warning-bg: #d9a51426;
  --warning-rgb: 217, 165, 20;
  --error: #e85854;
  --error-bg: #e8585426;
  --error-rgb: 232, 88, 84;
  --info: #ed835e;
  --info-bg: #ed835e24;
  --gradient-primary: linear-gradient(135deg, #c66846, #ed835e);
  --gradient-accent: linear-gradient(135deg, #c66846, #983e1b);
  --gradient-glass: linear-gradient(145deg, #1c0501cc, #14030199);
  --gradient-hero: linear-gradient(180deg, #010000 0%, #0a0402 100%);
  --card-accent-print: #c66846;
  --card-accent-edit: #d1a84b;
  --card-accent-ecom: #b08040;
  --card-accent-video: #8677ce;
  --card-accent-copy: #c66846;
  --scrollbar-thumb: #c6684659;
  --scrollbar-thumb-hover: #c66846;
  --scrollbar-track: transparent;
  --icon-ecom-1: oklch(80% .11 85);
  --icon-ecom-2: oklch(74% .12 25);
  --icon-print-1: oklch(77% .1 200);
  --icon-print-2: oklch(74% .11 260);
  --icon-edit-1: oklch(76% .11 290);
  --icon-edit-2: oklch(78% .12 340);
  --icon-copy-1: oklch(77% .1 160);
  --icon-copy-2: oklch(77% .1 200);
  --icon-video-1: oklch(76% .11 290);
  --icon-video-2: oklch(74% .11 260);
  --icon-imgproc-1: oklch(78% .1 220);
  --icon-imgproc-2: oklch(78% .1 170);
  --icon-fun-1: oklch(76% .13 320);
  --icon-fun-2: oklch(74% .12 290);
  --icon-default-1: oklch(74% .12 40);
  --icon-default-2: oklch(76% .11 25);
  --logo-c1: #fff0e3;
  --logo-c2: #f2cfae;
  --logo-c3: #dda17a;
  --logo-glow: #c6684680;
  --slogan-accent: #ff9e6b;
  --slogan-accent-2: #ffd2a8;
  --fluid-color-a: .08, .04, .02;
  --fluid-color-b: .85, .5, .25;
  --fluid-base-color: .06, .03, .02;
  --fluid-speed: .1;
  --fluid-scale: 1.2;
  --fluid-ink: .3;
  --fluid-star: .08;
  --fluid-curl: .25;
}

[data-theme="aurora"] {
  --ocean-deep: #eaf7f4;
  --ocean-mid: #bcd4cf;
  --ocean-light: #0ea5a0;
  --ocean-cyan: #2dd4bf;
  --ocean-foam: #8aa8a2;
  --ocean-white: #000604;
  --brand-blue: #0ea5a0;
  --brand-blue-dark: #0a7e79;
  --neon-glow: #14c7b0;
  --golden: #d1a84b;
  --border-subtle: #ffffff1a;
  --border-glow: #0ea5a059;
  --shadow-card: 0 4px 24px #00000059;
  --shadow-card-hover: 0 18px 50px #00000073;
  --shadow-glow: 0 0 40px #0ea5a047;
  --island-glow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .18), inset 12px 12px 28px -12px rgba(var(--accent-cyan-rgb), .3), inset -12px -12px 28px -12px #00000052;
  --island-glow-hover: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .26), inset 16px 16px 36px -14px rgba(var(--accent-cyan-rgb), .36), inset -16px -16px 36px -14px #00000061;
  --no-corners: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .06);
  --glass-edge-top: inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .24);
  --glass-edge-bottom: inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .34);
  --glass-edge-sides: inset 1px 0 0 0 rgba(var(--glass-tint-rgb), .07), inset -1px 0 0 0 rgba(var(--glass-tint-rgb), .04);
  --glass-inner-glow: inset 0 0 28px rgba(var(--accent-cyan-rgb), .13);
  --glass-refraction: inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .24), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .32), inset 1px 0 0 0 rgba(var(--glass-tint-rgb), .06), inset -1px 0 0 0 rgba(var(--glass-tint-rgb), .03), inset 0 0 0 1px rgba(var(--glass-tint-rgb), .1);
  --glass-border-near: #0ea5a033;
  --glass-shadow-near: 0 24px 72px #0006, 0 0 0 1px #0ea5a01a;
  --glass-border-mid: rgba(var(--glass-tint-rgb), .12);
  --glass-shadow-mid: 0 4px 24px #00000029;
  --glass-border-far: rgba(var(--glass-tint-rgb), .07);
  --press-inset: inset 0 2px 6px #00000061;
  --press-inset-strong: inset 0 3px 10px #0000007a;
  --sheen-gradient: linear-gradient(115deg, transparent 30%, rgba(var(--glass-tint-rgb), .14) 50%, transparent 70%);
  --ocean-deep-rgb: 234, 247, 244;
  --ocean-mid-rgb: 188, 212, 207;
  --ocean-light-rgb: 14, 165, 160;
  --ocean-cyan-rgb: 45, 212, 191;
  --ocean-foam-rgb: 138, 168, 162;
  --ocean-white-rgb: 0, 6, 4;
  --neon-glow-rgb: 20, 199, 176;
  --golden-rgb: 209, 168, 75;
  --glass-tint-rgb: 120, 220, 200;
  --glass-bg-rgb: 0, 0, 0;
  --glass-text-shadow: 0 1px 2px #00000073, 0 2px 10px #00080a47;
  --shadow-rgb: 0, 0, 0;
  --accent-cyan-rgb: 14, 165, 160;
  --border-dark-rgb: 0, 6, 4;
  --slate-blue-rgb: 138, 168, 162;
  --gold-bright-rgb: 209, 168, 75;
  --bright-cyan-rgb: 45, 212, 191;
  --orange-rgb: 198, 104, 70;
  --indigo-rgb: 134, 119, 206;
  --emerald-rgb: 97, 189, 103;
  --text-primary: #f5fcf9;
  --text-secondary: #d9e8e6;
  --text-tertiary: #bdd0cc;
  --text-placeholder: #acbeba;
  --text-inverse: #000604;
  --text-link: #2dd4bf;
  --text-primary-rgb: 245, 252, 249;
  --text-secondary-rgb: 217, 232, 230;
  --text-tertiary-rgb: 189, 208, 204;
  --bg-canvas: #000604;
  --bg-surface: var(--surface-glass);
  --bg-elevated: var(--surface-glass-strong);
  --bg-hover: #0ea5a024;
  --bg-active: #0ea5a038;
  --border-default: #ffffff24;
  --border-strong: #ffffff3d;
  --border-hover: #0ea5a066;
  --background: #000604;
  --foreground: #f5fcf9;
  --card: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  --card-foreground: #f5fcf9;
  --popover: #041014;
  --popover-foreground: #f5fcf9;
  --primary: #0ea5a0;
  --primary-foreground: #fff;
  --secondary: #0ea5a038;
  --secondary-foreground: #f5fcf9;
  --muted: #ffffff14;
  --muted-foreground: #bdd0cc;
  --accent: #0ea5a047;
  --accent-foreground: #f5fcf9;
  --border: #ffffff1f;
  --input: #ffffff29;
  --ring: #0ea5a0;
  --success: #61bd67;
  --success-bg: #61bd6726;
  --success-rgb: 97, 189, 103;
  --warning: #d9a514;
  --warning-bg: #d9a51426;
  --warning-rgb: 217, 165, 20;
  --error: #e85854;
  --error-bg: #e8585426;
  --error-rgb: 232, 88, 84;
  --info: #2dd4bf;
  --info-bg: #2dd4bf24;
  --gradient-primary: linear-gradient(135deg, #0ea5a0, #2dd4bf);
  --gradient-accent: linear-gradient(135deg, #0ea5a0, #0a7e79);
  --gradient-glass: linear-gradient(145deg, #03161acc, #02101399);
  --gradient-hero: linear-gradient(180deg, #000604 0%, #021018 100%);
  --card-accent-print: #0ea5a0;
  --card-accent-edit: #c66846;
  --card-accent-ecom: #d1a84b;
  --card-accent-video: #2dd4bf;
  --card-accent-copy: #0ea5a0;
  --scrollbar-thumb: #0ea5a059;
  --scrollbar-thumb-hover: #0ea5a0;
  --scrollbar-track: transparent;
  --icon-ecom-1: oklch(80% .11 85);
  --icon-ecom-2: oklch(74% .12 25);
  --icon-print-1: oklch(77% .1 200);
  --icon-print-2: oklch(76% .12 260);
  --icon-edit-1: oklch(76% .13 290);
  --icon-edit-2: oklch(78% .12 340);
  --icon-copy-1: oklch(77% .1 160);
  --icon-copy-2: oklch(77% .1 200);
  --icon-video-1: oklch(78% .13 290);
  --icon-video-2: oklch(76% .12 260);
  --icon-imgproc-1: oklch(78% .1 220);
  --icon-imgproc-2: oklch(78% .1 170);
  --icon-fun-1: oklch(78% .15 320);
  --icon-fun-2: oklch(76% .14 290);
  --icon-default-1: oklch(76% .12 290);
  --icon-default-2: oklch(78% .11 270);
  --logo-c1: #e9fffc;
  --logo-c2: #baf1e6;
  --logo-c3: #84dacb;
  --logo-glow: #14c7b073;
  --slogan-accent: #3fe0c8;
  --slogan-accent-2: #a5f3e8;
  --fluid-color-a: .12, .06, .22;
  --fluid-color-b: .3, .85, .55;
  --fluid-base-color: .03, .02, .05;
  --fluid-speed: .03;
  --fluid-scale: 3;
  --fluid-ink: .4;
  --fluid-star: .3;
  --fluid-curl: .1;
}

[data-theme="coral"] {
  --ocean-deep: #f8efee;
  --ocean-mid: #d7c6c4;
  --ocean-light: #c8635d;
  --ocean-cyan: #f07f77;
  --ocean-foam: #b79e9b;
  --ocean-white: #010000;
  --brand-blue: #c8635d;
  --brand-blue-dark: #9a3936;
  --neon-glow: #e2726b;
  --golden: #d1a84b;
  --border-subtle: #ffffff1a;
  --border-glow: #c8635d59;
  --shadow-card: 0 4px 24px #00000059;
  --shadow-card-hover: 0 18px 50px #00000073;
  --shadow-glow: 0 0 40px #c8635d4d;
  --island-glow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .18), inset 12px 12px 28px -12px rgba(var(--accent-cyan-rgb), .3), inset -12px -12px 28px -12px #00000052;
  --island-glow-hover: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .26), inset 16px 16px 36px -14px rgba(var(--accent-cyan-rgb), .36), inset -16px -16px 36px -14px #00000061;
  --no-corners: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .06);
  --glass-edge-top: inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .24);
  --glass-edge-bottom: inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .34);
  --glass-edge-sides: inset 1px 0 0 0 rgba(var(--glass-tint-rgb), .07), inset -1px 0 0 0 rgba(var(--glass-tint-rgb), .04);
  --glass-inner-glow: inset 0 0 28px rgba(var(--accent-cyan-rgb), .13);
  --glass-refraction: inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .24), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .32), inset 1px 0 0 0 rgba(var(--glass-tint-rgb), .06), inset -1px 0 0 0 rgba(var(--glass-tint-rgb), .03), inset 0 0 0 1px rgba(var(--glass-tint-rgb), .1);
  --glass-border-near: #c8635d38;
  --glass-shadow-near: 0 24px 72px #0006, 0 0 0 1px #c8635d1f;
  --glass-border-mid: rgba(var(--glass-tint-rgb), .12);
  --glass-shadow-mid: 0 4px 24px #00000029;
  --glass-border-far: rgba(var(--glass-tint-rgb), .07);
  --press-inset: inset 0 2px 6px #00000061;
  --press-inset-strong: inset 0 3px 10px #0000007a;
  --sheen-gradient: linear-gradient(115deg, transparent 30%, rgba(var(--glass-tint-rgb), .16) 50%, transparent 70%);
  --ocean-deep-rgb: 248, 239, 238;
  --ocean-mid-rgb: 215, 198, 196;
  --ocean-light-rgb: 200, 99, 93;
  --ocean-cyan-rgb: 240, 127, 119;
  --ocean-foam-rgb: 183, 158, 155;
  --ocean-white-rgb: 1, 0, 0;
  --neon-glow-rgb: 226, 114, 107;
  --golden-rgb: 209, 168, 75;
  --glass-tint-rgb: 244, 152, 140;
  --glass-bg-rgb: 0, 0, 0;
  --glass-text-shadow: 0 1px 3px #00000059;
  --shadow-rgb: 0, 0, 0;
  --accent-cyan-rgb: 200, 99, 93;
  --border-dark-rgb: 1, 0, 0;
  --slate-blue-rgb: 183, 158, 155;
  --gold-bright-rgb: 209, 168, 75;
  --bright-cyan-rgb: 240, 127, 119;
  --orange-rgb: 200, 99, 93;
  --indigo-rgb: 134, 119, 206;
  --emerald-rgb: 97, 189, 103;
  --text-primary: #fdf7f6;
  --text-secondary: #e9dedd;
  --text-tertiary: #d6c8c6;
  --text-placeholder: #bdacab;
  --text-inverse: #0f0a09;
  --text-link: #f07f77;
  --text-primary-rgb: 253, 247, 246;
  --text-secondary-rgb: 233, 222, 221;
  --text-tertiary-rgb: 214, 200, 198;
  --bg-canvas: #010000;
  --bg-surface: var(--surface-glass);
  --bg-elevated: var(--surface-glass-strong);
  --bg-hover: #c8635d24;
  --bg-active: #c8635d38;
  --border-default: #ffffff24;
  --border-strong: #ffffff3d;
  --border-hover: #c8635d66;
  --background: #010000;
  --foreground: #fdf7f6;
  --card: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  --card-foreground: #fdf7f6;
  --popover: #140604;
  --popover-foreground: #fdf7f6;
  --primary: #c8635d;
  --primary-foreground: #fff;
  --secondary: #c8635d38;
  --secondary-foreground: #fdf7f6;
  --muted: #ffffff14;
  --muted-foreground: #d6c8c6;
  --accent: #c8635d47;
  --accent-foreground: #fdf7f6;
  --border: #ffffff1f;
  --input: #ffffff29;
  --ring: #c8635d;
  --success: #61bd67;
  --success-bg: #61bd6726;
  --success-rgb: 97, 189, 103;
  --warning: #d9a514;
  --warning-bg: #d9a51426;
  --warning-rgb: 217, 165, 20;
  --error: #e85854;
  --error-bg: #e8585426;
  --error-rgb: 232, 88, 84;
  --info: #f07f77;
  --info-bg: #f07f7724;
  --gradient-primary: linear-gradient(135deg, #c8635d, #f07f77);
  --gradient-accent: linear-gradient(135deg, #c8635d, #9a3936);
  --gradient-glass: linear-gradient(145deg, #1d0504d1, #1403039e);
  --gradient-hero: linear-gradient(180deg, #010000 0%, #0a0202 100%);
  --card-accent-print: #c8635d;
  --card-accent-edit: #d1a84b;
  --card-accent-ecom: #b08040;
  --card-accent-video: #8677ce;
  --card-accent-copy: #c8635d;
  --scrollbar-thumb: #c8635d59;
  --scrollbar-thumb-hover: #c8635d;
  --scrollbar-track: transparent;
  --icon-ecom-1: oklch(80% .12 85);
  --icon-ecom-2: oklch(74% .13 25);
  --icon-print-1: oklch(77% .1 200);
  --icon-print-2: oklch(74% .11 260);
  --icon-edit-1: oklch(76% .11 290);
  --icon-edit-2: oklch(78% .12 340);
  --icon-copy-1: oklch(77% .1 160);
  --icon-copy-2: oklch(77% .1 200);
  --icon-video-1: oklch(76% .11 290);
  --icon-video-2: oklch(74% .11 260);
  --icon-imgproc-1: oklch(78% .1 220);
  --icon-imgproc-2: oklch(78% .1 170);
  --icon-fun-1: oklch(74% .13 320);
  --icon-fun-2: oklch(72% .12 290);
  --icon-default-1: oklch(74% .12 25);
  --icon-default-2: oklch(76% .11 15);
  --logo-c1: #ffeae6;
  --logo-c2: #f2c0b8;
  --logo-c3: #e08f84;
  --logo-glow: #c8635d80;
  --slogan-accent: #ff8a7a;
  --slogan-accent-2: #ffc4b2;
  --fluid-color-a: .3, .05, .02;
  --fluid-color-b: 1, .4, .1;
  --fluid-base-color: .05, .02, .01;
  --fluid-speed: .03;
  --fluid-scale: 1;
  --fluid-ink: .45;
  --fluid-star: .2;
  --fluid-curl: .35;
}

[data-theme="lotus"] {
  --ocean-deep: #080c09;
  --ocean-mid: #222c24;
  --ocean-light: #1d7d3e;
  --ocean-cyan: #399d57;
  --ocean-foam: #425244;
  --ocean-white: #e1e6e2;
  --brand-blue: #1d7d3e;
  --brand-blue-dark: #005a1c;
  --neon-glow: #2a904b;
  --golden: #d1a84b;
  --border-subtle: #1d7d3e1f;
  --border-glow: #1d7d3e59;
  --shadow-card: 0 4px 24px #1b241d1f;
  --shadow-card-hover: 0 18px 50px #1b241d2e;
  --shadow-glow: 0 0 40px #1d7d3e26;
  --island-glow: inset 0 0 0 1px #ffffff47, inset 0 1px 0 0 #ffffff73, inset 12px 12px 28px -12px rgba(var(--accent-cyan-rgb), .2), inset -12px -12px 28px -12px rgba(var(--shadow-rgb), .08);
  --island-glow-hover: inset 0 0 0 1px #ffffff61, inset 0 1px 0 0 #ffffff8c, inset 16px 16px 36px -14px rgba(var(--accent-cyan-rgb), .26), inset -16px -16px 36px -14px rgba(var(--shadow-rgb), .1);
  --no-corners: inset 0 0 0 1px #fff3;
  --glass-edge-top: inset 0 1px 0 0 #ffffffbf;
  --glass-edge-bottom: inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .26);
  --glass-edge-sides: inset 1px 0 0 0 #ffffff47, inset -1px 0 0 0 #ffffff24;
  --glass-inner-glow: inset 0 0 28px rgba(var(--accent-cyan-rgb), .1);
  --glass-refraction: inset 0 1px 0 0 #ffffffbf, inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .22), inset 1px 0 0 0 #ffffff42, inset -1px 0 0 0 #ffffff1f, inset 0 0 0 1px #ffffff4d;
  --glass-border-near: #1d7d3e33;
  --glass-shadow-near: 0 24px 72px #1b241d1f, 0 0 0 1px #1d7d3e14;
  --glass-border-mid: rgba(var(--accent-cyan-rgb), .22);
  --glass-shadow-mid: 0 4px 24px #1b241d0f;
  --glass-border-far: rgba(var(--accent-cyan-rgb), .12);
  --press-inset: inset 0 2px 6px #1b241d1a;
  --press-inset-strong: inset 0 3px 10px #1b241d26;
  --sheen-gradient: linear-gradient(115deg, transparent 30%, rgba(var(--accent-cyan-rgb), .14) 50%, transparent 70%);
  --ocean-deep-rgb: 8, 12, 9;
  --ocean-mid-rgb: 34, 44, 36;
  --ocean-light-rgb: 29, 125, 62;
  --ocean-cyan-rgb: 57, 157, 87;
  --ocean-foam-rgb: 66, 82, 68;
  --ocean-white-rgb: 225, 230, 226;
  --neon-glow-rgb: 42, 144, 75;
  --golden-rgb: 209, 168, 75;
  --glass-tint-rgb: 205, 232, 216;
  --glass-bg-rgb: 255, 255, 255;
  --glass-text-shadow: none;
  --shadow-rgb: 27, 36, 29;
  --accent-cyan-rgb: 29, 125, 62;
  --border-dark-rgb: 225, 230, 226;
  --slate-blue-rgb: 66, 82, 68;
  --gold-bright-rgb: 209, 168, 75;
  --bright-cyan-rgb: 57, 157, 87;
  --orange-rgb: 198, 104, 70;
  --indigo-rgb: 134, 119, 206;
  --emerald-rgb: 97, 189, 103;
  --text-primary: #080c09;
  --text-secondary: #222c24;
  --text-tertiary: #425244;
  --text-placeholder: #727e74;
  --text-inverse: #edf4ee;
  --text-link: #399d57;
  --text-primary-rgb: 8, 12, 9;
  --text-secondary-rgb: 34, 44, 36;
  --text-tertiary-rgb: 66, 82, 68;
  --bg-canvas: #e1e6e2;
  --bg-surface: var(--surface-glass);
  --bg-elevated: var(--surface-glass-strong);
  --bg-hover: #1d7d3e14;
  --bg-active: #1d7d3e1f;
  --border-default: #1d7d3e1f;
  --border-strong: #1d7d3e33;
  --border-hover: #1d7d3e66;
  --background: #e1e6e2;
  --foreground: #080c09;
  --card: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  --card-foreground: #080c09;
  --popover: #f0faf4;
  --popover-foreground: #080c09;
  --primary: #1d7d3e;
  --primary-foreground: #fff;
  --secondary: #1d7d3e26;
  --secondary-foreground: #080c09;
  --muted: #1d7d3e0f;
  --muted-foreground: #425244;
  --accent: #1d7d3e26;
  --accent-foreground: #080c09;
  --border: #1d7d3e26;
  --input: #1d7d3e1f;
  --ring: #1d7d3e;
  --success: #61bd67;
  --success-bg: #61bd6726;
  --success-rgb: 97, 189, 103;
  --warning: #d9a514;
  --warning-bg: #d9a51426;
  --warning-rgb: 217, 165, 20;
  --error: #e85854;
  --error-bg: #e8585426;
  --error-rgb: 232, 88, 84;
  --info: #399d57;
  --info-bg: #399d5724;
  --gradient-primary: linear-gradient(135deg, #1d7d3e, #399d57);
  --gradient-accent: linear-gradient(135deg, #1d7d3e, #005a1c);
  --gradient-glass: linear-gradient(145deg, #e9f1ead9, #e1ebe4a6);
  --gradient-hero: linear-gradient(180deg, #e1e6e2 0%, #d5ece0 100%);
  --card-accent-print: #1d7d3e;
  --card-accent-edit: #d1a84b;
  --card-accent-ecom: #b08040;
  --card-accent-video: #8677ce;
  --card-accent-copy: #1d7d3e;
  --scrollbar-thumb: #1d7d3e4d;
  --scrollbar-thumb-hover: #1d7d3e;
  --scrollbar-track: transparent;
  --icon-ecom-1: #d97706;
  --icon-ecom-2: #dc2626;
  --icon-print-1: #0891b2;
  --icon-print-2: #2563eb;
  --icon-edit-1: #7c3aed;
  --icon-edit-2: #db2777;
  --icon-copy-1: #059669;
  --icon-copy-2: #0891b2;
  --icon-video-1: #6d28d9;
  --icon-video-2: #2563eb;
  --icon-imgproc-1: #0284c7;
  --icon-imgproc-2: #0d9488;
  --icon-fun-1: #c026d3;
  --icon-fun-2: #9333ea;
  --icon-default-1: #1d7d3e;
  --icon-default-2: #399d57;
  --logo-c1: #0a140d;
  --logo-c2: #1f3d28;
  --logo-c3: #3f6b4a;
  --logo-glow: #1d7d3e66;
  --slogan-accent: #1d7d3e;
  --slogan-accent-2: #399d57;
  --fluid-color-a: .4, .7, .5;
  --fluid-color-b: .8, .95, .85;
  --fluid-base-color: .85, .92, .8;
  --fluid-speed: .06;
  --fluid-scale: 1.5;
  --fluid-ink: .2;
  --fluid-star: .15;
  --fluid-curl: .25;
}

[data-theme="moonlight"] body, [data-theme="dawn"] body, [data-theme="aurora"] body, [data-theme="coral"] body {
  background: var(--ocean-white);
  color: var(--text-primary);
  transition: background var(--dur-4) var(--ease-out-expo, ease), color var(--dur-4) var(--ease-out-expo, ease);
}

[data-theme="lotus"] body {
  background: var(--background);
  color: var(--foreground);
  transition: background var(--dur-4) var(--ease-out-expo, ease), color var(--dur-4) var(--ease-out-expo, ease);
}

[data-theme="moonlight"] .hero-logo-big, [data-theme="dawn"] .hero-logo-big, [data-theme="aurora"] .hero-logo-big, [data-theme="coral"] .hero-logo-big {
  background: linear-gradient(145deg, rgba(255, 255, 255, calc(var(--glass-opacity, 1) * .12)), rgba(255, 255, 255, calc(var(--glass-opacity, 1) * .04)));
  box-shadow: 0 8px 32px rgba(0, 0, 0, calc(var(--glass-opacity, 1) * .3)), inset 0 0 0 1px rgba(var(--accent-cyan-rgb), calc(var(--glass-opacity, 1) * .35));
}

[data-theme="lotus"] .hero-logo-big {
  background: linear-gradient(145deg, rgba(255, 255, 255, calc(var(--glass-opacity, 1) * .85)), rgba(255, 255, 255, calc(var(--glass-opacity, 1) * .6)));
  box-shadow: 0 8px 32px rgba(74, 128, 96, calc(var(--glass-opacity, 1) * .18)), inset 0 0 0 1px rgba(var(--accent-cyan-rgb), calc(var(--glass-opacity, 1) * .35));
}

[data-theme="moonlight"] #root *, [data-theme="dawn"] #root *, [data-theme="aurora"] #root *, [data-theme="coral"] #root *, [data-theme="lotus"] #root * {
  transform-style: flat !important;
}

.hero-logo-clickable {
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hero-logo-clickable:hover {
  transform: scale(1.04);
}

.hero-logo-clickable:active {
  transition: transform var(--dur-1) ease;
  transform: scale(.97);
}

.hero-logo-ripple {
  pointer-events: none;
  z-index: 1;
  border-radius: 50%;
  position: absolute;
  inset: 0;
}

.hero-logo-clickable:active .hero-logo-ripple {
  animation: hero-logo-ripple-anim var(--dur-4) var(--ease-out-expo, ease) forwards;
}

@keyframes hero-logo-ripple-anim {
  0% {
    box-shadow: 0 0 0 0 var(--border-glow, #4a9fd859);
    opacity: 1;
  }

  100% {
    opacity: 0;
    box-shadow: 0 0 0 28px #0000;
  }
}

.hero-logo-clickable:after {
  content: "";
  border: 2px solid var(--border-glow, #4a9fd859);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  position: absolute;
  inset: -4px;
}

.hero-logo-clickable:hover:after {
  opacity: .6;
  animation: 2s ease-in-out infinite hero-logo-breath;
}

@keyframes hero-logo-breath {
  0%, 100% {
    opacity: .4;
    transform: scale(1);
  }

  50% {
    opacity: .7;
    transform: scale(1.08);
  }
}

body, .hero-logo-big, .hero-slogan-big, .glass-surface, .island, .app-container, .main-content, .left-col-stack, .sidebar, .gp-section, .grsai-panel-host, .feature-card, .nav-item {
  transition: background-color var(--dur-4) var(--ease-out-expo, ease), border-color var(--dur-4) var(--ease-out-expo, ease), color var(--dur-4) var(--ease-out-expo, ease), box-shadow var(--dur-4) var(--ease-out-expo, ease);
}

html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning :before, html.theme-transitioning :after {
  transition: background-color var(--dur-3) var(--ease-out-expo, ease), border-color var(--dur-3) var(--ease-out-expo, ease), color var(--dur-3) var(--ease-out-expo, ease), fill var(--dur-3) var(--ease-out-expo, ease), stroke var(--dur-3) var(--ease-out-expo, ease), box-shadow var(--dur-3) var(--ease-out-expo, ease), background var(--dur-3) var(--ease-out-expo, ease), outline-color var(--dur-3) var(--ease-out-expo, ease) !important;
}

:root {
  --icon-ecom-1: #f59e0b;
  --icon-ecom-2: #ef4444;
  --icon-print-1: #06b6d4;
  --icon-print-2: #3b82f6;
  --icon-edit-1: #8b5cf6;
  --icon-edit-2: #ec4899;
  --icon-copy-1: #10b981;
  --icon-copy-2: #06b6d4;
  --icon-video-1: #7c3aed;
  --icon-video-2: #3b82f6;
  --icon-imgproc-1: #0ea5e9;
  --icon-imgproc-2: #14b8a6;
  --icon-fun-1: #d946ef;
  --icon-fun-2: #a855f7;
  --icon-default-1: #3b82f6;
  --icon-default-2: #06b6d4;
  --logo-c1: #0070ab;
  --logo-c2: #2a7ac0;
  --logo-c3: #5fb3e8;
  --logo-glow: #0070ab73;
}

[data-theme="moonlight"] .sub-item, [data-theme="dawn"] .sub-item, [data-theme="aurora"] .sub-item, [data-theme="coral"] .sub-item {
  --fluid-mask-a: .14;
  --fluid-mask-b: .28;
  --fluid-mask-c: .38;
  --fluid-mask-pos-a: 52%;
  --fluid-mask-pos-b: 70%;
}

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--ocean-white);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
  position: relative;
}

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

::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

* {
  scrollbar-width: none;
}

div.yue-si {
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-pro);
  z-index: 60;
  position: fixed;
}

div.yue-si.yue-si-on {
  opacity: 1;
}

.yue-si-dash {
  background: rgba(var(--ocean-foam-rgb), .5);
  border-radius: 999px;
  position: absolute;
}

.yue-si-dash-v {
  width: 1.5px;
  top: 0;
}

.yue-si-dash-h {
  height: 1.5px;
  left: 0;
}

html.perf-mode div.yue-si {
  display: none;
}

@font-face {
  font-family: YueXi Slogan;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/app/fonts/slogan-regular.woff2") format("woff2");
}

.perf-mode-toggle {
  border: 1px solid rgba(var(--ocean-cyan-rgb), .18);
  background: rgba(var(--glass-tint-rgb), .55);
  width: 100%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-2) ease, color var(--dur-2) ease, border-color var(--dur-2) ease;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  padding: 8px 12px;
  font-size: .78rem;
  display: flex;
}

.perf-mode-toggle:hover {
  border-color: rgba(var(--ocean-cyan-rgb), .4);
  color: var(--text-primary);
}

.perf-mode-toggle.active {
  background: rgba(var(--ocean-cyan-rgb), .14);
  border-color: rgba(var(--ocean-cyan-rgb), .45);
  color: var(--ocean-deep);
}

.perf-mode-toggle i {
  color: var(--ocean-mid);
  font-size: .85rem;
}

.perf-mode .scroll-progress-track, .perf-mode .scroll-guide {
  display: none;
}

.perf-mode {
  --glass-opacity: 1;
  --glass-alpha: 1;
  --glass-alpha-strong: 1;
  --glass-alpha-near: 1;
  --glass-alpha-mid: 1;
  --glass-alpha-far: 1;
  --glass-bg-near: rgba(var(--glass-bg-rgb), 1);
  --glass-bg-mid: rgba(var(--glass-bg-rgb), 1);
  --glass-bg-far: rgba(var(--glass-bg-rgb), 1);
  --surface-glass: rgba(var(--glass-bg-rgb), 1);
  --surface-glass-strong: rgba(var(--glass-bg-rgb), 1);
}

.perf-mode, .perf-mode *, .perf-mode :before, .perf-mode :after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  will-change: auto !important;
}

.perf-mode .app-container {
  opacity: 1 !important;
}

.perf-mode .main-content-inner > div, .perf-mode .main-content-inner > div > * {
  opacity: 1 !important;
  transform: none !important;
}

.perf-mode .main-content-inner > div {
  animation: none !important;
}

.perf-mode .mockup-page, .perf-mode .mockup-layout, .perf-mode .mockup-header, .perf-mode .mockup-mode-tabs, .perf-mode .mockup-batch, .perf-mode .mockup-batch-top, .perf-mode .mockup-task-bar, .perf-mode .mockup-panel, .perf-mode .mockup-left-column, .perf-mode .mockup-material-island-wrapper, .perf-mode .mockup-material-island-wrapper .material-island, .perf-mode .mockup-material-island-wrapper .material-island-inner, .perf-mode .mockup-panel-body, .perf-mode .mockup-preview, .perf-mode .mockup-preview-canvas, .perf-mode .mockup-selected-patterns {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
}

.feature-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}

.tutorial-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 140px;
}

.task-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 68px;
}

.local-record-card, .active-task-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 96px;
}

.yuexi-offscreen, .yuexi-offscreen *, .yuexi-offscreen:before, .yuexi-offscreen:after {
  animation-play-state: paused !important;
}

.glass {
  background: var(--surface-glass) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid)) !important;
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid)) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--glass-refraction) !important;
}

.mouse-glow {
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(var(--ocean-cyan-rgb), .06) 0%, rgba(var(--ocean-cyan-rgb), .025) 38%, transparent 72%);
  will-change: transform;
  width: 460px;
  height: 460px;
  transition: transform var(--transition-spring);
  border-radius: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
}

.app-container {
  z-index: 2;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
  min-height: 0;
  animation: appFadeIn .9s var(--ease-out-expo) backwards;
  background: none;
  flex-direction: column;
  flex: 1;
  display: flex;
  position: relative;
  overflow: visible;
}

@keyframes appFadeIn {
  0% {
    opacity: 0;
    transform: scale(.97);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.top-banner {
  background: var(--surface-glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 1px 2px rgba(var(--ocean-deep-rgb), .03);
  z-index: 10;
  animation: slideDown .7s var(--ease-out-expo) forwards;
  transform-origin: top;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: 10px 28px;
  display: flex;
  position: relative;
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-24px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.top-banner .brand {
  letter-spacing: -.4px;
  color: var(--text-primary);
  transition: transform var(--transition-base);
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 650;
  display: flex;
}

.top-banner .brand:hover {
  transform: scale(1.03);
}

.top-banner .brand i {
  color: var(--ocean-light);
  filter: drop-shadow(0 0 6px rgba(var(--ocean-cyan-rgb), .4));
  font-size: 1.3rem;
}

.top-banner .brand span {
  color: var(--text-primary);
  font-weight: 650;
}

.top-banner .slogan {
  color: var(--text-tertiary);
  letter-spacing: .3px;
  font-size: .85rem;
  font-weight: 400;
}

.top-banner .slogan i {
  color: var(--ocean-light);
  margin-right: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .top-banner .slogan {
    -webkit-text-fill-color: var(--text-tertiary);
    background: none;
    animation: none;
  }
}

.top-banner .announcement {
  color: var(--text-secondary);
  align-items: center;
  gap: 12px;
  font-size: .8rem;
  display: flex;
}

.top-banner .announcement .badge {
  background: linear-gradient(135deg, var(--golden), var(--accent-amber));
  color: var(--text-inverse);
  text-transform: uppercase;
  letter-spacing: .5px;
  box-shadow: 0 2px 12px rgba(var(--golden-rgb), .35);
  border-radius: 100px;
  padding: 3px 14px;
  font-size: .6rem;
  font-weight: 600;
}

.top-banner .announcement .text {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 260px;
  overflow: hidden;
}

.top-banner .announcement .text i {
  color: var(--ocean-light);
  margin-right: 4px;
}

.top-banner .announcement .action {
  color: var(--text-tertiary);
  transition: all var(--transition-base);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: .7rem;
  position: relative;
  overflow: hidden;
}

.top-banner .announcement .action:hover {
  color: var(--text-primary);
  background: rgba(var(--ocean-deep-rgb), .05);
}

.main-layout {
  z-index: 2;
  gap: calc(var(--fluid-gap) * .3);
  min-height: 0;
  padding: 8px calc(var(--fluid-gap) * .6) var(--fluid-gap);
  flex: 1;
  display: flex;
  position: relative;
  overflow: clip visible;
}

.left-sidebar {
  width: var(--fluid-sidebar);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  border-radius: var(--fluid-radius);
  box-shadow: var(--island-glow);
  z-index: 5;
  min-height: 0;
  animation: slideInLeft .8s var(--ease-out-expo) backwards;
  opacity: 1;
  transition: box-shadow var(--transition-smooth);
  border: none;
  flex-direction: column;
  flex-shrink: 0;
  align-self: flex-start;
  max-height: calc(100% - 14px);
  margin: 0;
  padding: clamp(14px, .9rem + .3vw, 18px) clamp(12px, .8rem + .3vw, 16px) clamp(10px, .65rem + .3vw, 14px);
  display: flex;
  position: relative;
  overflow-y: auto;
}

.left-sidebar:hover {
  box-shadow: var(--island-glow-hover);
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-36px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.left-sidebar .user-profile {
  border-bottom: 1px solid rgba(var(--ocean-deep-rgb), .06);
  transition: transform var(--transition-smooth);
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  display: flex;
}

.left-sidebar .user-profile:hover {
  transform: none;
}

.left-sidebar .user-profile .user-name-top {
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: .01em;
  width: 100%;
  font-size: .95rem;
  font-weight: 600;
  overflow: hidden;
}

.left-sidebar .user-profile .avatar-xl {
  background: linear-gradient(135deg, var(--ocean-light), var(--text-primary));
  width: 48px;
  height: 48px;
  color: var(--text-inverse);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--ocean-cyan-rgb), .3);
  transition: transform var(--transition-bouncy), box-shadow var(--transition-bouncy);
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
}

.left-sidebar .user-profile .avatar-xl:hover {
  box-shadow: 0 8px 24px rgba(var(--ocean-cyan-rgb), .42);
  transform: rotate(8deg)scale(1.06);
}

.left-sidebar .user-profile .avatar-xl:active {
  transform: scale(.96);
}

.left-sidebar .user-profile .avatar-xl-img {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
}

.left-sidebar .user-profile .plan {
  color: var(--ocean-light);
  background: rgba(var(--ocean-cyan-rgb), .1);
  letter-spacing: .3px;
  border-radius: 100px;
  padding: 1px 8px;
  font-size: .6rem;
  font-weight: 600;
}

.left-sidebar .compute-pill {
  background: rgba(var(--ocean-white-rgb), var(--glass-alpha-mid, .8));
  width: 100%;
  color: var(--text-secondary);
  border-radius: 100px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px 10px;
  font-size: .7rem;
  font-weight: 600;
  display: flex;
}

.left-sidebar .compute-pill span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.left-sidebar .compute-pill span:last-child {
  color: var(--golden);
  font-weight: 600;
}

.left-sidebar .nav-menu {
  flex: none;
  list-style: none;
}

.left-sidebar .nav-menu li {
  margin-bottom: 2px;
}

.left-sidebar .nav-menu li a {
  color: var(--text-secondary);
  transition: all var(--transition-base);
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  font-size: .82rem;
  font-weight: 500;
  display: flex;
  position: relative;
  overflow: hidden;
}

.left-sidebar .nav-menu li a:before {
  content: "";
  background: linear-gradient(135deg, rgba(var(--ocean-cyan-rgb), .1), transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
  border-radius: 12px;
  position: absolute;
  inset: 0;
}

.left-sidebar .nav-menu li a:hover:before {
  opacity: 1;
}

.left-sidebar .nav-menu li a:hover {
  color: var(--text-primary);
  transform: translateX(5px);
}

.left-sidebar .nav-menu li a.active {
  background: rgba(var(--ocean-cyan-rgb), .1);
  color: var(--ocean-light);
  font-weight: 600;
}

.left-sidebar .nav-menu li a i {
  text-align: center;
  opacity: .7;
  z-index: 1;
  width: 20px;
  transition: transform var(--transition-base);
  font-size: .92rem;
  position: relative;
}

.left-sidebar .nav-menu li a:hover i {
  opacity: 1;
  transform: scale(1.15);
}

.left-sidebar .nav-menu li a .badge {
  background: linear-gradient(135deg, var(--ocean-light), var(--text-secondary));
  color: var(--text-inverse);
  z-index: 1;
  box-shadow: 0 2px 8px rgba(var(--ocean-cyan-rgb), .3);
  border-radius: 100px;
  margin-left: auto;
  padding: 1px 10px;
  font-size: .6rem;
  font-weight: 600;
  position: relative;
}

.left-sidebar .nav-divider {
  border: none;
  border-top: 1px solid rgba(var(--ocean-deep-rgb), .06);
  margin: 16px 0;
}

.sidebar-contact {
  background: rgba(var(--ocean-cyan-rgb), .05);
  border: 1px solid rgba(var(--ocean-cyan-rgb), .08);
  transition: all var(--transition-bouncy);
  z-index: 5;
  border-radius: 14px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 10px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.sidebar-contact:before {
  content: "";
  background: linear-gradient(135deg, rgba(var(--ocean-cyan-rgb), .08), transparent);
  opacity: 0;
  transition: opacity var(--transition-bouncy);
  position: absolute;
  inset: 0;
}

.sidebar-contact:hover:before {
  opacity: 1;
}

.sidebar-contact:hover {
  box-shadow: 0 8px 28px rgba(var(--ocean-cyan-rgb), .13);
  border-color: rgba(var(--ocean-cyan-rgb), .2);
  animation-play-state: paused;
  transform: translateY(-2px)scale(1.01);
}

.sidebar-contact .qr-placeholder {
  background: var(--ocean-white);
  border: 1.5px dashed var(--ocean-foam);
  width: 30px;
  height: 30px;
  color: var(--text-placeholder);
  transition: all var(--transition-bouncy);
  z-index: 1;
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .95rem;
  display: flex;
  position: relative;
}

.sidebar-contact:hover .qr-placeholder {
  border-color: var(--ocean-light);
  color: var(--ocean-light);
  box-shadow: 0 0 16px rgba(var(--ocean-cyan-rgb), .2);
  transform: rotate(5deg)scale(1.05);
}

.sidebar-contact .contact-info {
  z-index: 1;
  flex: 1;
  min-width: 0;
  position: relative;
}

.sidebar-contact .contact-info .label {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: .68rem;
  font-weight: 600;
}

.sidebar-contact .contact-info .desc {
  color: var(--text-primary);
  margin-top: 1px;
  font-size: .75rem;
  font-weight: 500;
}

.sidebar-contact .contact-info .hint {
  color: var(--text-placeholder);
  margin-top: 1px;
  font-size: .6rem;
}

.left-sidebar .sidebar-footer {
  color: var(--text-placeholder);
  text-align: center;
  border-top: 1px solid rgba(var(--ocean-deep-rgb), .05);
  margin-top: 16px;
  padding-top: 12px;
  font-size: .68rem;
}

.left-col-stack {
  z-index: 40;
  min-height: 0;
  max-height: calc(100% - 14px);
  width: var(--fluid-sidebar);
  transform-origin: 0;
  will-change: transform;
  flex-direction: column;
  flex-shrink: 0;
  gap: 14px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.left-col-stack .left-sidebar {
  flex: auto;
  min-height: 0;
  max-height: 100%;
}

.update-ann-island {
  width: var(--fluid-sidebar);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: var(--island-glow);
  z-index: 5;
  animation: slideInLeft .8s var(--ease-out-expo) .2s backwards;
  opacity: 1;
  transition: box-shadow var(--transition-smooth);
  border: none;
  border-radius: 18px;
  flex-direction: column;
  flex: 234px;
  min-height: 160px;
  padding: 14px 16px 10px;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: none;
}

.update-ann-island:hover {
  box-shadow: var(--island-glow-hover);
}

.uai-header {
  flex-direction: column;
  flex-shrink: 0;
  gap: 8px;
  margin-bottom: 10px;
  display: flex;
}

.uai-title-row {
  color: var(--text-primary);
  align-items: center;
  gap: 6px;
  display: flex;
}

.uai-title-row i {
  color: rgba(var(--bright-cyan-rgb), .8);
  font-size: .72rem;
}

.uai-title {
  letter-spacing: .3px;
  font-size: .8rem;
  font-weight: 600;
}

.uai-tabs {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .1);
  border-radius: 10px;
  gap: 2px;
  padding: 2px;
  display: flex;
}

.uai-tab {
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  opacity: .6;
  background: none;
  border: none;
  border-radius: 8px;
  flex: 1;
  padding: 5px 0;
  font-size: .64rem;
  font-weight: 600;
}

.uai-tab.active {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  color: var(--text-primary);
  opacity: 1;
  box-shadow: 0 2px 8px rgba(var(--ocean-deep-rgb), .08);
}

.uai-tab:not(.active):hover {
  opacity: .85;
}

.uai-list {
  flex-direction: column;
  flex: 1;
  gap: 6px;
  min-height: 0;
  padding-right: 2px;
  display: flex;
  overflow: hidden auto;
}

.uai-item {
  cursor: pointer;
  transition: all var(--transition-base);
  border-radius: 12px;
  padding: 9px 12px;
  position: relative;
  overflow: hidden;
}

.uai-item.is-update {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .06);
}

.uai-item.is-announcement {
  background: rgba(var(--bright-cyan-rgb), .06);
  box-shadow: inset 0 0 0 1px rgba(var(--bright-cyan-rgb), .08);
}

.uai-item:hover {
  transform: translateX(2px);
}

.uai-item.is-update:hover {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
  box-shadow: inset 0 0 0 1px rgba(var(--bright-cyan-rgb), .15);
}

.uai-item.is-announcement:hover {
  background: rgba(var(--bright-cyan-rgb), .1);
  box-shadow: inset 0 0 0 1px rgba(var(--bright-cyan-rgb), .18);
}

.uai-item.expanded {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
  box-shadow: inset 0 0 0 1px rgba(var(--bright-cyan-rgb), .2);
}

.uai-item-header {
  align-items: flex-start;
  gap: 6px;
  display: flex;
}

.uai-item-type-icon {
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  font-size: .55rem;
  display: flex;
}

.uai-item.is-update .uai-item-type-icon {
  background: rgba(var(--indigo-rgb), .12);
  color: rgba(var(--indigo-rgb), .8);
}

.uai-item.is-announcement .uai-item-type-icon {
  background: rgba(var(--bright-cyan-rgb), .12);
  color: rgba(var(--ocean-light-rgb), .8);
}

.uai-item-main {
  flex: 1;
  min-width: 0;
}

.uai-item-title-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  display: flex;
}

.uai-item-title {
  color: var(--text-primary);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.3;
}

.uai-tag {
  white-space: nowrap;
  border-radius: 999px;
  padding: 1px 5px;
  font-size: .52rem;
  font-weight: 600;
}

.uai-item-date {
  color: var(--text-tertiary);
  margin-top: 2px;
  font-size: .56rem;
  display: block;
}

.uai-chevron {
  color: var(--text-tertiary);
  transition: transform var(--transition-base);
  flex-shrink: 0;
  margin-top: 3px;
  font-size: .55rem;
}

.uai-item-detail {
  color: var(--text-secondary);
  border-top: 1px solid rgba(var(--ocean-deep-rgb), .06);
  animation: uai-detail-in var(--dur-3) var(--ease-out-expo);
  margin-top: 6px;
  padding-top: 6px;
  padding-left: 26px;
  font-size: .66rem;
  line-height: 1.5;
}

@keyframes uai-detail-in {
  0% {
    opacity: 0;
    max-height: 0;
  }

  100% {
    opacity: 1;
    max-height: 200px;
  }
}

.uai-footer {
  color: var(--text-tertiary);
  border-top: 1px solid rgba(var(--ocean-deep-rgb), .05);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding-top: 8px;
  font-size: .56rem;
  display: flex;
}

.uai-footer i {
  font-size: .52rem;
}

@media (max-width: 768px) {
  .left-sidebar, .top-banner .slogan {
    display: none;
  }

  .top-banner .announcement .text {
    max-width: 120px;
  }
}

@media (max-width: 480px) {
  .top-banner {
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 12px;
  }

  .top-banner .brand {
    font-size: .95rem;
  }
}

.left-sidebar .nav-menu li button.nav-launch {
  width: 100%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  text-align: left;
  background: none;
  border: none;
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  display: flex;
  position: relative;
  overflow: hidden;
}

.left-sidebar .nav-menu li button.nav-launch:hover {
  color: var(--text-primary);
  transform: translateX(5px);
}

.left-sidebar .nav-menu li button.nav-launch i {
  text-align: center;
  opacity: .7;
  width: 20px;
  font-size: .92rem;
}

.left-sidebar .user-profile .avatar-xl {
  position: relative;
}

.avatar-gift-dot {
  border: 2px solid rgba(var(--yue-ui-black-rgb), .55);
  pointer-events: none;
  background: linear-gradient(135deg, #f5b244, #e89128);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  animation: 1.8s ease-in-out infinite avatarGiftPulse;
  position: absolute;
  top: 1px;
  right: 1px;
  box-shadow: 0 0 6px #f5b244a6;
}

@keyframes avatarGiftPulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.25);
  }
}

.new-sidebar {
  width: 0;
  transition: width .5s var(--ease-spring), margin .5s var(--ease-spring);
  opacity: 0;
  box-shadow: none;
  z-index: 6;
  background: none;
  border-radius: 0;
  flex-shrink: 1;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.new-sidebar.open {
  min-width: 0;
  min-height: 0;
  max-width: var(--new-sidebar-width);
  opacity: 1;
  -webkit-overflow-clipping: clip;
  border-radius: var(--radius-xl);
  background: rgba(var(--glass-bg-rgb), max(var(--glass-alpha-strong, .72), .78));
  -webkit-backdrop-filter: blur(max(var(--glass-blur-near, 26px), 10px)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(max(var(--glass-blur-near, 26px), 10px)) saturate(var(--glass-saturate-near));
  box-shadow: var(--glass-edge-top), var(--glass-edge-bottom), 0 0 0 1px var(--border-subtle);
  pointer-events: auto;
  flex: 1 1 0;
  margin: 12px 18px 12px 12px;
  overflow: clip;
}

.new-sidebar-inner {
  flex-direction: column;
  flex-shrink: 1;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 12px 16px 10px;
  display: flex;
  overflow: hidden;
}

.new-sidebar-header {
  border-bottom: 1px solid rgba(var(--border-dark-rgb), .05);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  display: flex;
}

.new-sidebar-header .title {
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
}

.new-sidebar-header .title i {
  color: var(--ocean-light);
}

.new-sidebar-header .close-btn {
  background: var(--surface-glass);
  border: 1px solid var(--border-subtle);
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--glass-refraction);
  transition: all var(--transition-base);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: 1.2rem;
  display: flex;
}

.new-sidebar-header .close-btn:hover {
  background: var(--error-bg);
  border-color: rgba(var(--error-rgb), .4);
  color: var(--error);
  box-shadow: 0 4px 14px rgba(var(--error-rgb), .25);
  transform: rotate(90deg)scale(1.06);
}

.new-sidebar-header .close-btn:active {
  transform: rotate(90deg)scale(.94);
}

.settings-area {
  border-radius: var(--radius-lg);
  min-height: 0;
  box-shadow: none;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: none;
  border: none;
  flex: 1;
  padding: 16px 18px 18px;
  position: relative;
  overflow-y: auto;
}

.settings-area::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.settings-area .setting-group {
  display: none;
}

.settings-area .setting-group.active {
  animation: fadeSlideIn var(--dur-4) var(--ease-out-expo) forwards;
  display: block;
}

@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.gp-panel-skeleton {
  flex-direction: column;
  gap: 12px;
  padding: 8px 2px;
  display: flex;
}

.gp-panel-skeleton > * {
  background: rgba(var(--glass-tint-rgb), .13);
  border-radius: 2px;
  animation: 1.8s ease-in-out infinite gp-sk-pulse;
}

.gp-sk-title {
  background: rgba(var(--glass-tint-rgb), .2);
  width: 36%;
  height: 20px;
}

.gp-sk-line {
  width: 100%;
  height: 12px;
}

.gp-sk-line.short {
  width: 62%;
}

.gp-sk-box {
  background: rgba(var(--glass-tint-rgb), .09);
  height: 140px;
}

@keyframes gp-sk-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .6;
  }
}

.settings-area .setting-group:not([data-setting="grsai-func"]) label {
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-size: .8rem;
  font-weight: 600;
  display: block;
}

.settings-area .setting-group:not([data-setting="grsai-func"]) input, .settings-area .setting-group:not([data-setting="grsai-func"]) select, .settings-area .setting-group:not([data-setting="grsai-func"]) textarea {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  width: 100%;
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  color: var(--text-primary);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  resize: vertical;
  box-shadow: var(--no-corners);
  margin-bottom: 12px;
  padding: 9px 12px;
  font-family: Inter, sans-serif;
  font-size: .85rem;
}

.settings-area .setting-group:not([data-setting="grsai-func"]) input::placeholder, .settings-area .setting-group:not([data-setting="grsai-func"]) textarea::placeholder {
  color: rgba(var(--ocean-mid-rgb), .5);
}

.settings-area .setting-group:not([data-setting="grsai-func"]) input:focus, .settings-area .setting-group:not([data-setting="grsai-func"]) select:focus, .settings-area .setting-group:not([data-setting="grsai-func"]) textarea:focus {
  border-color: var(--neon-glow);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  box-shadow: 0 0 0 4px rgba(var(--neon-glow-rgb), .12), 0 0 20px rgba(var(--neon-glow-rgb), .1), var(--no-corners);
  outline: none;
  transform: none;
}

.settings-area .setting-group:not([data-setting="grsai-func"]) textarea {
  min-height: 70px;
}

.settings-area .setting-group .setting-row {
  gap: 14px;
  display: flex;
}

.settings-area .setting-group .setting-row > * {
  flex: 1;
}

.settings-area .setting-group .setting-actions {
  gap: 10px;
  margin-top: 10px;
  display: flex;
}

.settings-area .setting-group .setting-actions button {
  border-radius: var(--radius-sm);
  background: var(--gradient-primary);
  color: var(--text-inverse);
  font-weight: var(--fw-title);
  font-size: var(--fs-sm);
  transition: background var(--dur-2) var(--ease-pro), box-shadow var(--dur-2) var(--ease-pro), transform var(--dur-2) var(--ease-pro);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12), 0 4px 14px rgba(var(--ocean-light-rgb), .22);
  border: none;
  padding: 8px 24px;
  font-family: inherit;
}

.settings-area .setting-group .setting-actions button:hover {
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12), 0 6px 18px rgba(var(--ocean-light-rgb), .3);
  transform: translateY(-1px);
}

.settings-area .setting-group .setting-actions button:active {
  box-shadow: var(--press-inset);
  transform: translateY(0);
}

.settings-area .setting-group .setting-actions button.secondary {
  background: rgba(var(--ocean-white-rgb), var(--glass-alpha-mid, .8));
  color: var(--text-primary);
  border: 1px solid rgba(var(--border-dark-rgb), .08);
}

.settings-area .setting-group .setting-actions button.secondary:hover {
  background: var(--ocean-white);
  border-color: var(--ocean-light);
  box-shadow: 0 4px 16px rgba(var(--accent-cyan-rgb), .15);
}

.tasks-area {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
  min-height: 80px;
  -webkit-backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  border: 1px solid rgba(var(--border-dark-rgb), .05);
  border-radius: 18px;
  flex-direction: column;
  flex: 1;
  padding: 10px 14px 12px;
  display: flex;
}

.tasks-area .tasks-header {
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  display: flex;
}

.tasks-area .tasks-header h4 {
  color: var(--text-primary);
  font-size: .8rem;
  font-weight: 600;
}

.tasks-area .tasks-header h4 i {
  color: var(--ocean-light);
  margin-right: 6px;
}

.tasks-area .tasks-header .task-badge {
  background: rgba(var(--accent-cyan-rgb), .1);
  color: var(--ocean-light);
  border-radius: 100px;
  padding: 0 12px;
  font-size: .6rem;
  font-weight: 600;
}

.tasks-area .task-list {
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding-right: 2px;
  display: flex;
  overflow-y: auto;
}

.tasks-area .task-list .task-item {
  background: rgba(var(--glass-bg-rgb), .88);
  border: 1px solid rgba(var(--border-dark-rgb), .05);
  transition: all var(--transition-base);
  animation: taskSlideIn var(--dur-3) var(--ease-out-expo) forwards;
  content-visibility: auto;
  contain-intrinsic-size: auto 44px;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  display: flex;
}

@keyframes taskSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-14px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tasks-area .task-list .task-item:hover {
  background: var(--ocean-white);
  border-color: rgba(var(--accent-cyan-rgb), .16);
  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), .04);
  transform: translateX(3px);
}

.task-item .task-preview {
  background: var(--ocean-white);
  border: 1px solid rgba(var(--border-dark-rgb), .05);
  width: 44px;
  height: 44px;
  transition: transform var(--transition-base);
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.task-item:hover .task-preview {
  transform: none;
}

.task-item .task-preview img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.task-item .task-preview video {
  object-fit: cover;
  background: #0b1626;
  width: 100%;
  height: 100%;
  display: block;
}

.task-item .task-info {
  flex: 1;
  min-width: 0;
}

.task-item .task-info .task-name {
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .72rem;
  font-weight: 500;
  overflow: hidden;
}

.task-item .task-info .task-desc {
  color: var(--text-tertiary);
  align-items: center;
  gap: 6px;
  font-size: .55rem;
  display: flex;
}

.task-item .task-status {
  border-radius: 100px;
  flex-shrink: 0;
  padding: 1px 10px;
  font-size: .55rem;
  font-weight: 600;
}

.task-status.running {
  background: rgba(var(--warning-rgb), .14);
  color: var(--warning);
}

.task-status.done {
  background: rgba(var(--success-rgb), .14);
  color: var(--success);
}

.task-status.waiting {
  background: rgba(var(--accent-cyan-rgb), .1);
  color: var(--ocean-light);
}

.task-status.error {
  background: rgba(var(--error-rgb), .12);
  color: var(--error);
}

.main-content {
  overscroll-behavior: contain;
  z-index: 2;
  opacity: 1;
  flex: 1;
  align-self: stretch;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  padding: 0 10px 10px;
  position: relative;
  overflow: hidden auto;
}

.main-content:has( > .main-content-inner.full-width) {
  flex-direction: column;
  display: flex;
  overflow-y: hidden;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes progressGrow {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

.main-content-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.main-content-inner:has(.masonry-grid) {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
}

.main-content:has(.island-stack) {
  flex-direction: column;
  display: flex;
  overflow-y: hidden;
}

.main-content-inner:has(.island-stack) {
  flex-direction: column;
  flex: 1;
  width: 100%;
  max-width: none;
  min-height: 0;
  display: flex;
}

.main-content-inner.full-width {
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  display: flex;
}

.right-sidebar {
  width: var(--right-sidebar-width);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: var(--island-glow);
  animation: slideInRight .8s var(--ease-out-expo) backwards;
  opacity: 1;
  transition: box-shadow var(--transition-smooth), opacity var(--transition-smooth);
  border: none;
  border-radius: 18px;
}

.right-sidebar:hover {
  box-shadow: var(--island-glow-hover);
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(36px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.right-sidebar .section-title {
  color: var(--text-primary);
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: .9rem;
  font-weight: 600;
  display: flex;
}

.right-sidebar .section-title i {
  color: var(--warning);
}

.right-sidebar .section-title .badge {
  background: rgba(var(--warning-rgb), .14);
  color: var(--warning);
  border-radius: 100px;
  margin-left: auto;
  padding: 0 10px;
  font-size: .55rem;
  font-weight: 600;
}

.community-masonry {
  column-count: 2;
  flex: 1;
  column-gap: 12px;
  min-height: 0;
}

.community-masonry .masonry-item {
  break-inside: avoid;
  border: 1px solid rgba(var(--ocean-deep-rgb), .05);
  background: var(--ocean-white);
  transition: all var(--transition-bouncy);
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), .03);
  border-radius: 16px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.community-masonry .masonry-item:hover {
  box-shadow: 0 16px 48px rgba(var(--shadow-rgb), .1), 0 0 30px rgba(var(--neon-glow-rgb), .1);
  border-color: rgba(var(--accent-cyan-rgb), .2);
  transform: translateY(-6px)scale(1.03);
}

.community-masonry .masonry-item img {
  width: 100%;
  transition: transform .7s var(--ease-out-expo);
  display: block;
}

.community-masonry .masonry-item:hover img {
  transform: scale(1.05);
}

.community-masonry .masonry-item .masonry-overlay {
  background: linear-gradient(0deg, rgba(var(--ocean-deep-rgb), .65) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-smooth);
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px;
  display: flex;
  position: absolute;
  inset: 0;
}

.community-masonry .masonry-item:hover .masonry-overlay {
  opacity: 1;
}

.community-masonry .masonry-item .masonry-overlay .m-label {
  color: var(--text-inverse);
  text-shadow: 0 2px 8px rgba(var(--shadow-rgb), .3);
  font-size: .7rem;
  font-weight: 600;
  transform: none;
}

.community-masonry .masonry-item .masonry-overlay .m-tag {
  color: rgba(var(--glass-tint-rgb), .8);
  font-size: .55rem;
}

.community-masonry .masonry-item .masonry-overlay .m-btn {
  background: var(--ocean-white);
  color: var(--text-primary);
  transition: all var(--transition-base);
  border: none;
  border-radius: 100px;
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 16px;
  font-size: .6rem;
  font-weight: 600;
}

.community-masonry .masonry-item .masonry-overlay .m-btn:hover {
  background: var(--ocean-light);
  color: var(--text-inverse);
  box-shadow: 0 4px 16px rgba(var(--ocean-cyan-rgb), .4);
  transform: scale(1.08);
}

.right-sidebar .view-more {
  text-align: center;
  color: var(--ocean-light);
  transition: all var(--transition-base);
  border: 1px dashed rgba(var(--accent-cyan-rgb), .25);
  border-radius: 10px;
  flex-shrink: 0;
  margin-top: 12px;
  padding: 8px;
  font-size: .75rem;
  font-weight: 500;
}

.right-sidebar .view-more:hover {
  background: rgba(var(--accent-cyan-rgb), .05);
  border-color: var(--ocean-light);
  transform: translateY(-3px);
}

.quick-gen-section, .feature-card, .quick-entry-card, .api-section, .tutorial-section, .glass-surface {
  background: var(--surface-glass) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid)) !important;
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid)) !important;
  box-shadow: var(--island-glow) !important;
  border: none !important;
}

.quick-gen-section {
  border-radius: var(--radius-lg);
  transition: all var(--transition-bouncy);
  z-index: 3;
  width: 100%;
  animation: cardStagger .7s var(--ease-out-expo) .1s backwards;
  opacity: 1;
  margin-bottom: 14px;
  padding: 16px 20px 14px;
  position: relative;
  transform: none;
}

.quick-gen-section:not(.hero-stage):hover {
  transform: translateY(-3px);
  box-shadow: var(--island-glow-hover) !important;
}

@keyframes cardStagger {
  0% {
    opacity: 0;
    transform: translateY(36px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.quick-gen-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  display: flex;
}

.quick-gen-row .qg-left {
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 180px;
  display: flex;
}

.quick-gen-row .qg-left .qg-icon {
  background: linear-gradient(135deg, var(--ocean-light), var(--text-primary));
  width: 44px;
  height: 44px;
  color: var(--text-inverse);
  box-shadow: 0 4px 18px rgba(var(--ocean-cyan-rgb), .3);
  transition: transform var(--transition-smooth);
  border-radius: 14px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  display: flex;
}

.quick-gen-section:hover .qg-left .qg-icon {
  transform: scale(1.1);
}

.quick-gen-row .qg-left .qg-text .qg-title {
  color: var(--text-primary);
  font-size: .95rem;
  font-weight: 600;
}

.quick-gen-row .qg-left .qg-text .qg-sub {
  color: var(--text-tertiary);
  font-size: .75rem;
}

.quick-gen-row .qg-input-wrap {
  background: rgba(var(--ocean-white-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--border-dark-rgb), .08);
  min-width: 240px;
  transition: all var(--transition-smooth);
  border-radius: 60px;
  flex: 2;
  align-items: center;
  gap: 6px;
  padding: 2px 2px 2px 18px;
  display: flex;
  position: relative;
}

.quick-gen-row .qg-input-wrap:focus-within {
  border-color: var(--ocean-light);
  box-shadow: 0 0 0 5px rgba(var(--accent-cyan-rgb), .1), 0 0 30px rgba(var(--accent-cyan-rgb), .08);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  transform: scale(1.015);
}

.quick-gen-row .qg-input-wrap input {
  color: var(--text-primary);
  cursor: none;
  background: none;
  border: none;
  outline: none;
  flex: 1;
  min-width: 100px;
  padding: 10px 0;
  font-family: Inter, sans-serif;
  font-size: .85rem;
  font-weight: 500;
}

.quick-gen-row .qg-input-wrap input::placeholder {
  color: var(--text-tertiary);
  font-weight: 400;
}

.quick-gen-row .qg-input-wrap .qg-btn {
  background: linear-gradient(135deg, var(--ocean-light), var(--text-secondary));
  color: var(--text-inverse);
  transition: all var(--transition-smooth);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(var(--ocean-cyan-rgb), .25);
  border: none;
  border-radius: 60px;
  padding: 9px 26px;
  font-family: Inter, sans-serif;
  font-size: .8rem;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.quick-gen-row .qg-input-wrap .qg-btn:before {
  content: "";
  background: linear-gradient(135deg, rgba(var(--glass-tint-rgb), .3), transparent);
  opacity: 0;
  transition: opacity var(--transition-smooth);
  position: absolute;
  inset: 0;
}

.quick-gen-row .qg-input-wrap .qg-btn:hover:before {
  opacity: 1;
}

.quick-gen-row .qg-input-wrap .qg-btn:hover {
  box-shadow: 0 10px 32px rgba(var(--ocean-cyan-rgb), .5);
  transform: scale(1.04)translateY(-3px);
}

.quick-gen-row .qg-input-wrap .qg-btn:active {
  transition: transform var(--dur-1);
  transform: scale(.94);
}

.ripple {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  pointer-events: none;
  border-radius: 50%;
  animation: .7s ease-out forwards rippleAnim;
  position: absolute;
  transform: scale(0);
}

@keyframes rippleAnim {
  to {
    opacity: 0;
    transform: scale(5);
  }
}

.style-capsules {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 14px;
  display: flex;
}

.style-capsules .capsule-label {
  color: var(--text-tertiary);
  letter-spacing: .3px;
  margin-right: 6px;
  font-size: .7rem;
  font-weight: 600;
}

.style-pill {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--border-dark-rgb), .07);
  color: var(--text-primary);
  transition: all var(--transition-smooth);
  z-index: 20;
  border-radius: 60px;
  align-items: center;
  gap: 5px;
  padding: 6px 18px;
  font-size: .75rem;
  font-weight: 500;
  display: inline-flex;
  position: relative;
  overflow: visible;
}

.style-pill i {
  color: var(--ocean-light);
  opacity: .7;
  transition: transform var(--transition-base);
  font-size: .7rem;
}

.style-pill:hover {
  background: var(--ocean-white);
  border-color: var(--ocean-light);
  box-shadow: 0 10px 28px rgba(var(--accent-cyan-rgb), .16);
  transform: translateY(-4px)scale(1.05);
}

.style-pill:hover i {
  transform: rotate(22deg)scale(1.15);
}

.style-pill.active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--text-inverse);
  box-shadow: 0 6px 22px rgba(var(--ocean-deep-rgb), .3);
}

.style-pill.active i {
  color: var(--text-inverse);
}

.style-pill .style-preview {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  box-shadow: 0 24px 72px rgba(var(--shadow-rgb), .2);
  border: 1px solid rgba(var(--border-dark-rgb), .08);
  z-index: 99999;
  pointer-events: none;
  width: 140px;
  height: 140px;
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  transform-origin: bottom;
  animation: previewPop var(--dur-3) var(--ease-out-back) forwards;
  border-radius: 16px;
  padding: 6px;
  display: none;
  position: fixed;
}

@keyframes previewPop {
  0% {
    opacity: 0;
    transform: scale(.75)translateY(12px);
  }

  100% {
    opacity: 1;
    transform: scale(1)translateY(0);
  }
}

.style-pill .style-preview img {
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
  height: 100%;
}

.style-pill .style-preview.show {
  display: block !important;
}

@media (max-width: 992px) {
  .main-content {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .main-content {
    max-width: 100%;
    margin: 0;
    padding: 12px;
  }

  .quick-gen-row {
    flex-direction: column;
    align-items: stretch;
  }

  .quick-gen-row .qg-input-wrap {
    min-width: unset;
  }

  .new-sidebar.open {
    border-radius: 22px;
    margin: 8px 10px 8px 6px;
  }
}

@media (max-width: 480px) {
  .main-content {
    padding: 8px;
  }
}

.masonry-grid {
  column-gap: var(--fluid-gap-sm);
  row-gap: var(--fluid-gap-sm);
  width: 100%;
  margin-bottom: var(--fluid-gap);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  grid-auto-flow: row;
  align-items: start;
  display: grid;
}

.masonry-grid > * {
  align-self: start;
  width: 100%;
  height: auto;
  min-height: 0;
  display: block;
}

.masonry-grid > .feature-card, .masonry-grid > .quick-entry-card {
  height: auto;
  min-height: 0;
}

.masonry-grid.masonry-init {
  row-gap: 0;
  column-gap: var(--fluid-gap-sm);
  grid-auto-rows: 1px;
}

.masonry-grid.masonry-init > * {
  align-self: start;
  margin-bottom: 0;
}

.masonry-grid > .ad-space-banner {
  grid-column: 1 / -1;
  height: auto;
}

@media (min-width: 1201px) {
  .masonry-grid > .feature-card {
    grid-column: auto;
  }

  .masonry-grid > .ad-space-banner {
    grid-column: 1 / -1;
  }
}

.feature-card[data-area="ecom"] .sub-item {
  height: 107px;
}

@media (max-width: 1200px) {
  .masonry-grid > .feature-card, .masonry-grid > .quick-entry-card {
    grid-area: auto;
  }

  .masonry-grid > .ad-space-banner {
    grid-column: 1 / -1;
  }
}

.feature-card {
  border-radius: var(--radius-md);
  padding: var(--fluid-pad) calc(var(--fluid-pad)  + 2px) calc(var(--fluid-pad)  - 2px);
  transition: box-shadow var(--dur-2) var(--ease-pro), border-color var(--dur-2) var(--ease-pro), background var(--dur-2) var(--ease-pro);
  z-index: 2;
  opacity: 1;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: none;
}

.feature-card:first-child {
  animation-delay: .18s;
}

.feature-card:nth-child(2) {
  animation-delay: .28s;
}

.feature-card:nth-child(3) {
  animation-delay: .38s;
}

.feature-card:nth-child(4) {
  animation-delay: .48s;
}

.feature-card:nth-child(5) {
  animation-delay: .58s;
}

.feature-card:nth-child(6) {
  animation-delay: .68s;
}

.feature-card:before {
  display: none;
}

.feature-card:hover {
  border-color: rgba(var(--accent-cyan-rgb), .45);
  background: var(--surface-glass-strong);
}

@media (prefers-reduced-motion: reduce) {
  .feature-card, .quick-entry-card {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .feature-card:hover, .feature-card.expanded:hover, .quick-entry-card:hover {
    transform: none !important;
  }
}

.feature-card .card-header {
  align-items: center;
  gap: var(--fluid-gap);
  margin-bottom: 4px;
  display: flex;
}

.feature-card .card-icon {
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  width: clamp(28px, 1.6rem + .3vw, 34px);
  height: clamp(28px, 1.6rem + .3vw, 34px);
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  transition: all var(--transition-bouncy);
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  line-height: 1;
  display: flex;
  overflow: clip;
}

.feature-card:hover .card-icon {
  box-shadow: 0 4px 20px rgba(var(--shadow-rgb), .08);
  border-color: rgba(var(--glass-tint-rgb), .35);
  transform: scale(1.08)rotate(-3deg);
}

.feature-card .card-title {
  font-size: var(--fluid-font-base);
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 auto;
  min-width: 0;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
}

.feature-card .card-meta {
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.feature-card .card-desc {
  color: var(--text-tertiary);
  font-size: var(--fluid-font-sm);
  white-space: nowrap;
  font-weight: 500;
}

.feature-card {
  --card-accent: var(--ocean-light);
}

.feature-card:after {
  display: none;
}

.feature-card .card-icon {
  background: var(--card-accent) !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .feature-card .card-icon {
    background: color-mix(in srgb, var(--card-accent) 14%, transparent) !important;
  }
}

.feature-card .card-icon {
  color: var(--card-accent) !important;
}

.feature-card:hover .card-icon {
  background: var(--card-accent) !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .feature-card:hover .card-icon {
    background: color-mix(in srgb, var(--card-accent) 22%, transparent) !important;
  }
}

.feature-card[data-area="ecom"] {
  flex: 1;
}

.card-chevron {
  width: 26px;
  height: 26px;
  color: rgba(var(--ocean-deep-rgb), .22);
  opacity: .5;
  transition: opacity var(--transition-base), color var(--transition-base), background var(--transition-base), transform var(--dur-4) cubic-bezier(.34, 1.56, .64, 1);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .62rem;
  display: flex;
}

.card-chevron i {
  transition: transform var(--dur-4) cubic-bezier(.34, 1.56, .64, 1);
}

.feature-card:hover .card-chevron {
  opacity: 1;
  color: rgba(var(--ocean-deep-rgb), .55);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
  transform: translateY(3px);
}

.feature-card.expanded .card-chevron {
  opacity: .8;
  color: rgba(var(--ocean-deep-rgb), .45);
}

.feature-card.expanded .card-chevron i {
  transform: rotate(180deg);
}

.card-cover {
  inset: var(--fluid-pad) calc(var(--fluid-pad)  + 2px) calc(var(--fluid-pad)  - 2px);
  z-index: 2;
  opacity: 1;
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
  flex-direction: column;
  display: flex;
  position: absolute;
  transform: translateY(0)scale(1);
}

.card-cover .card-preview {
  flex: 1;
  min-height: 0;
}

.sub-features {
  inset: var(--fluid-pad) calc(var(--fluid-pad)  + 2px) calc(var(--fluid-pad)  - 2px);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-smooth) var(--dur-1), transform var(--transition-smooth) var(--dur-1);
  flex-direction: column;
  display: flex;
  position: absolute;
  overflow: visible;
  transform: translateY(12px);
}

.feature-card.expanded .sub-features {
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0)scale(1);
}

.sub-grid {
  gap: var(--fluid-gap-sm);
  overscroll-behavior: contain;
  flex: 1;
  grid-template-columns: repeat(auto-fill, 150px);
  grid-auto-rows: minmax(min-content, 1fr);
  place-content: start center;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  padding: 4px 4px 0;
  display: grid;
  overflow: hidden auto;
}

.sub-item {
  --fluid-blend: normal;
  --fluid-saturate: 1;
  --fluid-opacity: 1;
  --fluid-mask-a: .1;
  --fluid-mask-b: .17;
  --fluid-mask-c: .24;
  --fluid-mask-pos-a: 56%;
  --fluid-mask-pos-b: 74%;
  --fluid-border-alpha: .3;
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--glass-tint-rgb), .22);
  z-index: 2;
  cursor: pointer;
  width: 150px;
  min-width: 0;
  height: 100px;
  min-height: 0;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  box-shadow: 0 1px 3px rgba(var(--ocean-deep-rgb), .04);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(2px, .1rem + .05vw, 3px);
  padding: clamp(4px, .25rem + .1vw, 6px) clamp(8px, .5rem + .15vw, 12px);
  display: flex;
  position: relative;
  overflow: clip;
}

.sub-item:before {
  content: "";
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, transparent 20%, rgb(var(--glass-bg-rgb) / var(--fluid-mask-a)) var(--fluid-mask-pos-a), rgb(var(--glass-bg-rgb) / var(--fluid-mask-b)) var(--fluid-mask-pos-b), rgb(var(--glass-bg-rgb) / var(--fluid-mask-c)) 100%);
  transition: opacity var(--dur-3) var(--ease-out-expo);
  position: absolute;
  inset: 0;
}

.marble-layer {
  display: none;
}

.sub-item:hover:before {
  opacity: .9;
}

.sub-item:hover .marble-layer {
  opacity: 1;
}

.sub-item:hover {
  box-shadow: 0 2px 8px rgba(var(--ocean-deep-rgb), .07);
  border-color: rgba(var(--accent-cyan-rgb), .45);
  transform: translateY(-1px);
}

.sub-item.is-placeholder:before, .sub-item.is-loading:before, .sub-item.is-placeholder .marble-layer, .sub-item.is-loading .marble-layer {
  opacity: .4;
}

.sub-item .sub-icon, .sub-item .sub-top, .sub-item .sub-subtitle, .sub-item .sub-arrow {
  z-index: 1;
  position: relative;
}

.sub-item .ripple {
  z-index: 2;
}

.sub-item .sub-icon {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
  border: .5px solid rgba(var(--glass-tint-rgb), .6);
  width: clamp(20px, 1.2rem + .2vw, 26px);
  height: clamp(20px, 1.2rem + .2vw, 26px);
  transition: transform var(--transition-base);
  border-radius: 7px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.sub-item:hover .sub-icon {
  transform: scale(1.08);
}

.sub-item .sub-arrow {
  color: var(--text-placeholder);
  transition: transform var(--transition-base), color var(--transition-base);
  flex-shrink: 0;
  font-size: .6rem;
  position: absolute;
  top: clamp(8px, .5rem + .15vw, 12px);
  right: clamp(8px, .5rem + .15vw, 12px);
}

.sub-item:hover .sub-arrow {
  color: var(--text-tertiary);
  transform: translateX(3px);
}

.sub-item .sub-top {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  display: flex;
}

.sub-item .sub-name {
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  transition: color var(--transition-base);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
}

.sub-item .sub-tags {
  flex-wrap: nowrap;
  flex: 1;
  align-items: center;
  gap: 3px;
  min-width: 0;
  display: inline-flex;
  overflow: hidden;
}

.sub-item .sub-tag-type {
  white-space: nowrap;
  letter-spacing: .02em;
  border-radius: 999px;
  align-items: center;
  padding: 2px 6px;
  font-size: clamp(.5rem, .46rem + .16vw, .6rem);
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
}

.sub-item .sub-comfyui-corner {
  color: var(--text-tertiary);
  opacity: .55;
  pointer-events: none;
  display: inline-flex;
  position: absolute;
  top: 4px;
  right: 5px;
}

.sub-item .sub-bottom {
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  margin-top: auto;
  padding-right: 18px;
  display: flex;
}

.sub-item .sub-fav {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  background: none;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .sub-item .sub-fav {
    color: color-mix(in srgb, var(--text-tertiary) 55%, transparent);
  }
}

.sub-item .sub-fav {
  cursor: pointer;
  z-index: 3;
  transition: color var(--transition-base), transform var(--transition-base);
}

.sub-item .sub-fav:hover {
  color: rgb(var(--accent-cyan-rgb));
  transform: scale(1.2);
}

.sub-item .sub-fav.on {
  color: rgb(var(--accent-cyan-rgb));
  filter: drop-shadow(0 0 3px rgba(var(--accent-cyan-rgb), .6));
}

.sub-item.is-fav {
  border-color: rgba(var(--accent-cyan-rgb), .75);
  background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), .3), rgba(var(--accent-cyan-rgb), .1)), rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  box-shadow: 0 0 0 1px rgba(var(--accent-cyan-rgb), .35), 0 0 18px rgba(var(--accent-cyan-rgb), .28), inset 0 0 14px rgba(var(--accent-cyan-rgb), .1);
}

.sub-item.is-fav:after {
  content: "";
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(100deg, #0000, #ffffff52 50%, #0000);
  width: 55%;
  height: 100%;
  animation: 3.2s ease-in-out infinite subFavSheen;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-130%)skewX(-12deg);
}

@keyframes subFavSheen {
  0% {
    transform: translateX(-130%)skewX(-12deg);
  }

  55%, 100% {
    transform: translateX(240%)skewX(-12deg);
  }
}

.perf-mode .sub-item.is-fav:after {
  opacity: 0;
  animation: none;
}

.sub-item .sub-subtitle {
  color: var(--text-tertiary);
  word-break: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  font-size: clamp(.56rem, .52rem + .18vw, .66rem);
  font-weight: 400;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
}

.sub-item .ripple {
  background: rgba(var(--accent-cyan-rgb), .16);
  animation: rippleSpread var(--dur-4) var(--ease-out-expo) forwards;
  pointer-events: none;
  border-radius: 50%;
  position: absolute;
  transform: scale(0);
}

.sub-item:hover .sub-fav {
  color: var(--yue-ui-amber-500);
}

@keyframes rippleSpread {
  to {
    opacity: 0;
    transform: scale(4);
  }
}

.sub-item.is-placeholder {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

.sub-item.is-placeholder:hover {
  box-shadow: 0 1px 3px rgba(var(--ocean-deep-rgb), .04);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  transform: none;
}

.sub-item.is-placeholder .sub-icon {
  color: var(--text-placeholder);
  background: rgba(var(--ocean-foam-rgb), .12);
  border-color: rgba(var(--ocean-foam-rgb), .2);
}

.sub-item.is-placeholder .sub-name {
  color: var(--text-tertiary);
}

.sub-item.is-placeholder .sub-subtitle {
  color: var(--text-placeholder);
}

.sub-item.is-placeholder .sub-arrow {
  display: none;
}

.sub-item.is-loading {
  opacity: .7;
  cursor: default;
}

.api-section {
  border-radius: var(--radius-lg);
  padding: var(--fluid-pad) calc(var(--fluid-pad)  + 8px) var(--fluid-pad);
  margin-bottom: var(--fluid-gap);
  transition: border-color var(--dur-2) var(--ease-pro), background var(--dur-2) var(--ease-pro);
  z-index: 3;
  width: 100%;
  position: relative;
}

.api-section:hover {
  border-color: rgba(var(--accent-cyan-rgb), .45);
}

.api-section .api-header {
  align-items: center;
  gap: var(--fluid-gap);
  margin-bottom: var(--fluid-gap-sm);
  display: flex;
}

.api-section .api-header .api-icon {
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-cyan-rgb), .1);
  width: clamp(34px, 2.1rem + .3vw, 42px);
  height: clamp(34px, 2.1rem + .3vw, 42px);
  color: var(--ocean-light);
  font-size: var(--fluid-font-xl);
  transition: transform var(--transition-bouncy);
  justify-content: center;
  align-items: center;
  display: flex;
}

.api-section:hover .api-header .api-icon {
  box-shadow: 0 0 16px rgba(var(--ocean-cyan-rgb), .2);
  transform: rotate(-5deg)scale(1.06);
}

.api-section .api-header .api-title {
  font-weight: 600;
  font-size: var(--fluid-font-base);
  color: var(--text-primary);
}

.api-section .api-header .api-sub {
  font-size: var(--fluid-font-sm);
  color: var(--text-tertiary);
  margin-left: auto;
}

.api-section .api-body {
  gap: var(--fluid-gap);
  flex-direction: column;
  display: flex;
}

.api-section .api-input-area {
  gap: var(--fluid-gap);
  flex-wrap: wrap;
  display: flex;
}

.api-section .api-input-area .api-text-input {
  background: rgba(var(--ocean-white-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--border-dark-rgb), .08);
  min-width: 200px;
  transition: all var(--transition-smooth);
  border-radius: 60px;
  flex: 1;
  align-items: center;
  padding: 2px 18px;
  display: flex;
}

.api-section .api-input-area .api-text-input:focus-within {
  border-color: var(--ocean-light);
  box-shadow: 0 0 0 5px rgba(var(--accent-cyan-rgb), .1);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  transform: scale(1.015);
}

.api-section .api-input-area .api-text-input input {
  color: var(--text-primary);
  cursor: none;
  background: none;
  border: none;
  outline: none;
  flex: 1;
  padding: 10px 0;
  font-family: Inter, sans-serif;
  font-size: .85rem;
  font-weight: 500;
}

.api-section .api-input-area .api-upload {
  background: rgba(var(--ocean-white-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--border-dark-rgb), .08);
  transition: all var(--transition-smooth);
  color: var(--text-secondary);
  border-radius: 60px;
  align-items: center;
  gap: 6px;
  padding: 0 18px 0 14px;
  font-size: .8rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.api-section .api-input-area .api-upload:hover {
  border-color: var(--ocean-light);
  background: var(--ocean-white);
  box-shadow: 0 6px 20px rgba(var(--accent-cyan-rgb), .14);
  transform: translateY(-3px);
}

.api-section .api-input-area .api-upload i {
  color: var(--ocean-light);
  transition: transform var(--transition-smooth);
}

.api-section .api-input-area .api-upload:hover i {
  transform: scale(1.25)rotate(-10deg);
}

.api-prompts {
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
  display: flex;
}

.api-prompts .prompt-tag {
  background: rgba(var(--accent-cyan-rgb), .07);
  color: var(--ocean-light);
  border: 1px solid rgba(var(--accent-cyan-rgb), .12);
  transition: all var(--transition-smooth);
  border-radius: 60px;
  padding: 4px 16px;
  font-size: .7rem;
  font-weight: 500;
}

.api-prompts .prompt-tag:hover {
  background: rgba(var(--accent-cyan-rgb), .16);
  border-color: var(--ocean-light);
  box-shadow: 0 6px 20px rgba(var(--accent-cyan-rgb), .14);
  transform: translateY(-4px)scale(1.05);
}

.api-controls {
  z-index: 50;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
  position: relative;
}

.api-controls .api-btn {
  background: rgba(var(--ocean-white-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--border-dark-rgb), .08);
  color: var(--text-primary);
  transition: all var(--transition-smooth);
  z-index: 60;
  border-radius: 60px;
  align-items: center;
  gap: 6px;
  padding: 7px 20px;
  font-family: Inter, sans-serif;
  font-size: .78rem;
  font-weight: 500;
  display: inline-flex;
  position: relative;
  overflow: visible;
}

.api-controls .api-btn:hover {
  background: var(--ocean-white);
  border-color: var(--ocean-light);
  box-shadow: 0 6px 20px rgba(var(--accent-cyan-rgb), .14);
  transform: translateY(-3px);
}

.api-controls .api-btn i {
  color: var(--ocean-light);
  transition: transform var(--transition-smooth);
  font-size: .7rem;
}

.api-controls .api-btn:hover i {
  transform: rotate(10deg)scale(1.15);
}

.api-controls .api-btn .dropdown {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  box-shadow: 0 24px 72px rgba(var(--shadow-rgb), .18);
  border: 1px solid rgba(var(--border-dark-rgb), .08);
  z-index: 99999;
  min-width: 190px;
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  animation: dropdownPop var(--dur-3) var(--ease-out-back) forwards;
  transform-origin: top;
  border-radius: 18px;
  padding: 8px 0;
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
}

.quick-entry-card {
  border-radius: var(--fluid-radius);
  padding: var(--fluid-gap-sm) var(--fluid-pad);
  align-items: center;
  gap: var(--fluid-gap-sm);
  z-index: 2;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-pro), background var(--dur-2) var(--ease-pro);
  flex-direction: row;
  display: flex;
  position: relative;
  overflow: visible;
}

.quick-entry-card:hover {
  border-color: rgba(var(--accent-cyan-rgb), .45);
  background: var(--surface-glass-strong);
}

.qe-top {
  align-items: center;
  gap: var(--fluid-gap);
  flex-shrink: 0;
  display: flex;
}

.qe-icon {
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--ocean-light), var(--neon-glow));
  width: clamp(28px, 1.7rem + .3vw, 36px);
  height: clamp(28px, 1.7rem + .3vw, 36px);
  color: var(--text-inverse);
  font-size: var(--fluid-font-sm);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .3), 0 4px 16px rgba(var(--ocean-light-rgb), .2);
  transition: transform var(--transition-bouncy);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.quick-entry-card:hover .qe-icon {
  transform: scale(1.08)rotate(-5deg);
}

.qe-arrow {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  width: 24px;
  height: 24px;
  color: var(--ocean-light);
  transition: all var(--transition-smooth);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .72rem;
  display: flex;
}

.quick-entry-card:hover .qe-arrow {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
  border-color: rgba(var(--glass-tint-rgb), .4);
  transform: translateX(4px);
}

.qe-bottom {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.qe-title {
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 1px;
  font-weight: 650;
  overflow: hidden;
}

.qe-subtitle {
  font-size: var(--fluid-font-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  line-height: 1.25;
  overflow: hidden;
}

.ad-space-banner {
  border-radius: var(--radius-lg);
  z-index: 2;
  margin-bottom: var(--fluid-gap);
  flex-direction: column;
  gap: clamp(4px, .25rem + .08vw, 6px);
  padding: clamp(6px, .4rem + .1vw, 8px) clamp(10px, .65rem + .2vw, 14px);
  display: flex;
  position: relative;
  overflow: visible;
}

.ad-space-banner:hover {
  border-color: rgba(var(--accent-cyan-rgb), .45);
}

.workbench-bottom-row {
  gap: var(--fluid-gap);
  width: 100%;
  margin-bottom: var(--fluid-gap);
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  display: grid;
}

.workbench-bottom-row > * {
  width: 100%;
  min-width: 0;
  height: 100%;
}

.workbench-bottom-row > .ad-space-banner {
  border-radius: var(--fluid-radius, 16px);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .4), 0 2px 12px rgba(var(--ocean-deep-rgb), .03);
  margin-bottom: 0;
  padding: 20px 24px;
}

.workbench-bottom-row > .gh-root {
  margin: 0;
}

@media (max-width: 992px) {
  .workbench-bottom-row {
    grid-template-columns: 1fr;
  }
}

.ad-space-header {
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  display: flex;
}

.ad-space-icon {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  width: clamp(22px, 1.3rem + .2vw, 28px);
  height: clamp(22px, 1.3rem + .2vw, 28px);
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  color: var(--ocean-light);
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: clamp(.72rem, .66rem + .2vw, .82rem);
  display: flex;
}

.ad-space-title {
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  white-space: nowrap;
  font-weight: 650;
}

.ad-cards-grid {
  flex: 1;
  grid-template-columns: repeat(4, 1fr);
  align-content: center;
  gap: clamp(4px, .25rem + .08vw, 6px);
  display: grid;
}

.ad-card {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .25);
  transition: all var(--transition-smooth);
  cursor: pointer;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: clamp(5px, .3rem + .1vw, 7px) clamp(8px, .5rem + .15vw, 10px);
  text-decoration: none;
  display: flex;
}

.ad-card:hover {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  border-color: var(--ocean-light);
  box-shadow: 0 6px 20px rgba(var(--accent-cyan-rgb), .14);
  transform: translateY(-3px);
}

.ad-card-icon {
  width: clamp(22px, 1.3rem + .2vw, 28px);
  height: clamp(22px, 1.3rem + .2vw, 28px);
  color: var(--text-inverse);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .3);
  border-radius: 7px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: clamp(.66rem, .6rem + .15vw, .74rem);
  display: flex;
}

.ad-card-body {
  flex: 1;
  min-width: 0;
}

.ad-card-name {
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.ad-card-desc {
  font-size: var(--fluid-font-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  overflow: hidden;
}

.ad-card-ext {
  color: var(--ocean-light);
  opacity: .5;
  transition: opacity var(--transition-base), transform var(--transition-base);
  flex-shrink: 0;
  font-size: .62rem;
}

.ad-card:hover .ad-card-ext {
  opacity: 1;
  transform: translate(2px, -2px);
}

@media (max-width: 1200px) {
  .masonry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .masonry-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .masonry-grid > .feature-card, .masonry-grid > .quick-entry-card, .masonry-grid > .ad-space-banner {
    grid-area: auto !important;
  }

  .masonry-grid > .ad-space-banner {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 768px) {
  .masonry-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .masonry-grid > .feature-card {
    height: auto;
    min-height: 280px;
  }

  .masonry-grid > .feature-card[data-area="ecom"] {
    min-height: 360px;
  }

  .masonry-grid > .quick-entry-card {
    height: auto;
    min-height: 100px;
  }

  .masonry-grid > .feature-card[data-area="image-process"] {
    height: auto;
    min-height: 280px;
  }

  .ad-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .api-section .api-input-area {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .sub-grid {
    grid-template-columns: repeat(auto-fill, minmax(max(90px, 20%), 1fr));
  }
}

.feature-card > .card-cover, .feature-card > .sub-features {
  position: absolute;
}

.feature-card > .card-cover {
  z-index: 2;
}

.feature-card {
  height: auto;
}

.feature-card > .sub-features {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--transition-smooth) var(--dur-1), transform var(--transition-smooth) var(--dur-1);
  flex-direction: column;
  display: flex;
  position: static;
  inset: auto;
  transform: translateY(12px);
}

.feature-card.expanded .sub-features {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
  transform: none;
}

.feature-card .sub-grid {
  flex: none;
  width: 100%;
  max-height: none;
  overflow: visible;
}

.feature-card > .card-cover {
  border-radius: inherit;
  z-index: 2;
  opacity: 1;
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: none;
}

.feature-card.expanded .card-cover {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px)scale(.97);
}

.feature-card .card-cover .card-scene {
  position: absolute;
  inset: 0;
}

.feature-card .card-header {
  z-index: 3;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  display: flex;
  position: absolute;
  top: 14px;
  left: 16px;
  right: 16px;
}

.feature-card .card-head-main {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.feature-card .card-title {
  letter-spacing: -.02em;
  color: var(--text-primary);
  white-space: nowrap;
  flex: 0 auto;
  min-width: 0;
  max-width: none;
  font-family: Inter, PingFang SC, Microsoft YaHei, sans-serif;
  font-size: clamp(20px, 1.15rem + .5vw, 25px);
  font-weight: 650;
  line-height: 1.05;
  overflow: visible;
}

.feature-card .card-hint {
  letter-spacing: .02em;
  color: rgba(var(--ocean-deep-rgb), .68);
  opacity: .92;
  font-size: 11px;
  font-weight: 600;
}

@media (min-width: 993px) {
  .feature-card .sub-grid {
    grid-template-columns: repeat(auto-fill, 150px);
  }

  .feature-card[data-area="video"] .sub-item, .feature-card[data-area="fun"] .sub-item, .feature-card[data-area="copy"] .sub-item, .feature-card[data-area="print"] .sub-item, .feature-card[data-area="image-process"] .sub-item {
    min-height: clamp(46px, 2.8rem + .25vw, 56px);
  }
}

.feature-card > .liquid-glow, .quick-entry-card > .liquid-glow {
  background: radial-gradient(ellipse, var(--card-accent, var(--ocean-light)), transparent 70%);
  border-radius: 50%;
  width: 70%;
  height: 28px;
  position: absolute;
  bottom: -16px;
  left: 50%;
}

@supports (color: color-mix(in lab, red, red)) {
  .feature-card > .liquid-glow, .quick-entry-card > .liquid-glow {
    background: radial-gradient(ellipse, color-mix(in srgb, var(--card-accent, var(--ocean-light)) 40%, transparent), transparent 70%);
  }
}

.feature-card > .liquid-glow, .quick-entry-card > .liquid-glow {
  opacity: 0;
  pointer-events: none;
  filter: none;
  z-index: 0;
  transform: translateX(-50%)scale(.8);
}

.feature-card:hover > .liquid-glow, .quick-entry-card:hover > .liquid-glow {
  filter: blur(8px);
}

.gp-txt2img-ai-btn {
  border: 1px solid var(--ocean-light, #22d3ee);
  border-radius: 10px;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .gp-txt2img-ai-btn {
    border: 1px solid color-mix(in srgb, var(--ocean-light, #22d3ee) 45%, transparent);
  }
}

.gp-txt2img-ai-btn {
  color: var(--ocean-light, #22d3ee);
  cursor: pointer;
  transition: all var(--dur-2) ease;
  white-space: nowrap;
  background: linear-gradient(135deg, #10b9811f, #38bdf81f);
  font-size: .8rem;
  font-weight: 600;
}

.gp-txt2img-ai-btn:hover:not(:disabled) {
  border-color: var(--ocean-light, #22d3ee);
}

@supports (color: color-mix(in lab, red, red)) {
  .gp-txt2img-ai-btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--ocean-light, #22d3ee) 75%, transparent);
  }
}

.gp-txt2img-ai-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #10b98133, #38bdf833);
  transform: translateY(-1px);
}

.gp-txt2img-ai-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 2000px) {
  .masonry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1500px) {
  .masonry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.island-stack {
  border-top: 1px solid rgba(var(--accent-cyan-rgb), .14);
  flex-direction: column;
  flex: 1;
  gap: 8px;
  min-height: 0;
  padding-top: 10px;
  display: flex;
  overflow-y: auto;
}

.wb-island {
  background: var(--surface-glass);
  min-height: 96px;
  -webkit-backdrop-filter: blur(calc(16px * var(--glass-blur-level, 1))) saturate(1.45);
  box-shadow: var(--island-glow);
  min-height: 100px;
  transition: box-shadow var(--dur-2) var(--ease-pro), transform var(--dur-2) var(--ease-pro);
  border-radius: 14px;
  flex: 1;
  align-items: stretch;
  display: flex;
  position: relative;
  overflow: hidden;
}

.wb-island:hover {
  box-shadow: var(--island-glow-hover);
  transform: translateY(-1.5px);
}

.wb-lead {
  cursor: grab;
  touch-action: pan-y;
}

.wb-island.is-dragging .wb-lead {
  cursor: grabbing;
}

.wb-drag-grip {
  z-index: 2;
  width: 20px;
  height: 20px;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-pro), background var(--dur-2) var(--ease-pro);
  touch-action: none;
  border-radius: 6px;
  outline: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 12px;
  right: 7px;
}

.wb-island:hover .wb-drag-grip, .wb-drag-grip:focus-visible {
  opacity: 1;
}

.wb-drag-grip:hover {
  background: rgba(var(--ocean-light-rgb), .12);
  color: var(--text-primary);
}

.wb-drag-grip:focus-visible {
  outline: 1px solid rgba(var(--accent-cyan-rgb), .6);
}

.wb-island.is-dragging {
  z-index: 20;
  cursor: grabbing;
  box-shadow: 0 18px 48px #0006, var(--island-glow-hover);
  will-change: transform;
  pointer-events: none;
  transition: none;
}

.island-stack.is-reordering {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

.island-stack.is-reordering .wb-island {
  pointer-events: none;
}

.wb-cover {
  z-index: 0;
  pointer-events: none;
  width: 210px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, #0000 100%);
  mask-image: linear-gradient(90deg, #000 45%, #0000 100%);
}

.wb-cover > * {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.wb-title {
  z-index: 2;
  font-size: 13.5px;
  font-weight: var(--fw-title);
  letter-spacing: -.01em;
  color: var(--text-primary);
  text-shadow: 0 1px 0 rgba(var(--glass-tint-rgb), .7);
  pointer-events: none;
  position: absolute;
  top: 9px;
  left: 13px;
}

.wb-cover {
  top: 32px;
}

.wb-count {
  z-index: 2;
  font-family: var(--font-mono, "JetBrains Mono", Consolas, monospace);
  color: var(--text-tertiary);
  pointer-events: none;
  font-size: 9px;
  position: absolute;
  bottom: 7px;
  left: 14px;
}

.wb-subs {
  z-index: 1;
  flex: 1;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-left: 128px;
  padding: 6px 10px;
  display: flex;
  position: relative;
  overflow: auto hidden;
}

.wb-subs .sub-item {
  flex: none;
  justify-content: flex-start;
  gap: 3px;
  width: 150px;
  min-width: 150px;
  height: 100%;
  min-height: 84px;
  max-height: 100px;
  margin: 0;
}

.wb-subs .sub-item .sub-icon {
  margin: 0 0 2px;
}

.wb-subs .sub-item .sub-arrow {
  position: absolute;
  top: auto;
  bottom: 9px;
  right: 8px;
}

.wb-page {
  flex-direction: column;
  flex: 1;
  gap: 8px;
  min-height: 0;
  display: flex;
}

.wb-page > .hero-stage, .wb-page > [data-section="flows"], .wb-page > .workflow-guide {
  flex: none;
}

.wb-scroll {
  flex-direction: column;
  flex: 1;
  gap: 8px;
  min-height: 0;
  display: flex;
}

.wb-page .quick-gen-section.hero-stage.hero-l-shape {
  grid-template-rows: auto;
  grid-template-columns: 1fr;
}

.hero-logo-mini {
  border: 1px solid rgba(var(--glass-tint-rgb), .9);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  width: 28px;
  height: 28px;
  box-shadow: var(--island-glow);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-pro);
  border-radius: 50%;
  flex: none;
  place-items: center;
  padding: 0;
  display: grid;
}

.hero-logo-mini:hover {
  transform: scale(1.08);
}

.hero-logo-mini .theme-logo {
  width: 100%;
  height: 100%;
}

.wb-page .hero-l-shape {
  background: var(--surface-glass);
  box-shadow: var(--island-glow);
  border: none;
  flex-direction: column;
  grid-template-rows: none;
  grid-template-columns: none;
  gap: 8px;
  display: flex;
}

.wb-page .hero-l-top {
  padding-left: var(--fluid-pad);
  box-shadow: none;
  background: none;
  border: none;
  grid-area: auto;
}

.wb-page .hero-l-center {
  margin-left: auto;
}

.wb-page .workflow-guide {
  grid-area: auto;
  width: 100%;
}

.wb-lead {
  z-index: 1;
  flex-direction: column;
  flex: none;
  align-items: flex-start;
  gap: 7px;
  width: 118px;
  padding: 10px 0 8px 13px;
  display: flex;
  position: relative;
}

.wb-lead .wb-title {
  font-size: 13.5px;
  font-weight: var(--fw-title);
  letter-spacing: -.01em;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  text-shadow: none;
  flex: none;
  line-height: 1.25;
  position: static;
  overflow: hidden;
}

.wb-lead .wb-cover {
  background: rgba(var(--ocean-light-rgb), .07);
  border-radius: 12px;
  flex: 0 84px;
  width: 84px;
  height: auto;
  min-height: 44px;
  position: relative;
  inset: auto;
  overflow: hidden;
  -webkit-mask-image: none;
  mask-image: none;
}

.wb-cover .sc-float, .wb-cover .sc-spin, .wb-cover .sc-spin-rev, .wb-cover .sc-tile {
  display: none;
}

.wb-subs {
  margin-left: 0;
}

.island-stack, .main-content, .wb-subs {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.island-stack::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.main-content::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.wb-subs::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.wb-cover .card-scene {
  transform-origin: 52% 62%;
  transform: scale(1.3);
}

.wb-page .workflow-guide .wf-flow {
  align-items: stretch;
}

.wb-page .workflow-guide .wf-header {
  justify-content: space-between;
}

.wb-page .workflow-guide .wf-steps {
  justify-content: space-evenly;
  width: 100%;
}

.feature-card > .card-cover {
  border-radius: inherit;
  box-shadow: none;
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
  background: none;
  border: none;
  padding: 14px 16px;
  inset: 0;
  overflow: hidden;
}

.feature-card > .card-cover > .card-bg {
  z-index: 0;
  background: radial-gradient(90% 60% at 20% 0%, #fff3, transparent 60%), linear-gradient(155deg, rgba(var(--ocean-light-rgb), .13), rgba(var(--ocean-cyan-rgb), .07));
  opacity: 1;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.feature-card:hover > .card-cover {
  filter: none;
}

.feature-card, .wb-island {
  --sc-hi: var(--ocean-cyan);
}

@supports (color: color-mix(in lab, red, red)) {
  .feature-card, .wb-island {
    --sc-hi: color-mix(in srgb, var(--ocean-cyan) 16%, white);
  }
}

.feature-card, .wb-island {
  --sc-mid: var(--ocean-light);
}

@supports (color: color-mix(in lab, red, red)) {
  .feature-card, .wb-island {
    --sc-mid: color-mix(in srgb, var(--ocean-light) 55%, white);
  }
}

.feature-card, .wb-island {
  --sc-lo: var(--ocean-light);
  --sc-glow: var(--ocean-light);
  --sc-ink: var(--ocean-deep);
}

@supports (color: color-mix(in lab, red, red)) {
  .feature-card, .wb-island {
    --sc-ink: color-mix(in srgb, var(--ocean-deep) 55%, var(--ocean-light));
  }
}

.feature-card, .wb-island {
  --sc-shade: var(--ocean-deep);
}

@supports (color: color-mix(in lab, red, red)) {
  .feature-card, .wb-island {
    --sc-shade: color-mix(in srgb, var(--ocean-deep) 22%, transparent);
  }
}

.card-scene .sf-hi {
  fill: var(--sc-hi);
}

.card-scene .sf-mid {
  fill: var(--sc-mid);
}

.card-scene .sf-lo {
  fill: var(--sc-lo);
}

.card-scene .sf-ink {
  fill: var(--sc-ink);
}

.card-scene .sf-glass {
  fill: #fffffff0;
}

.card-scene .sf-glass2 {
  fill: #fff9;
}

.card-scene .sf-glass3 {
  fill: #ffffff57;
}

.card-scene .sf-screen {
  fill: #0000001f;
}

.card-scene .sf-shine {
  fill: #fff;
  opacity: .82;
}

.card-scene .sf-st-glass {
  stroke: #ffffffe6;
}

.card-scene .sf-st-hi {
  stroke: var(--sc-hi);
}

.card-scene .sf-st-mid {
  stroke: var(--sc-mid);
}

.card-scene .sf-st-lo {
  stroke: var(--sc-lo);
}

.card-scene .sf-st-ink {
  stroke: var(--sc-ink);
}

.card-scene .sf-bezel {
  fill: none;
  stroke: #ffffff73;
}

.card-scene .sc-ground {
  fill: var(--sc-shade);
}

.card-scene .sc-stop-a {
  stop-color: var(--sc-glow);
  stop-opacity: .38;
}

.card-scene .sc-stop-b {
  stop-color: var(--sc-glow);
  stop-opacity: 0;
}

.card-scene .sc-stop-w {
  stop-color: #fff;
  stop-opacity: .55;
}

.card-scene .sc-stop-w0 {
  stop-color: #fff;
  stop-opacity: 0;
}

.card-scene .sb-t1 {
  stop-color: #fff;
  stop-opacity: .95;
}

.card-scene .sb-t2, .card-scene .sb-b1 {
  stop-color: var(--sc-hi);
}

.card-scene .sb-b2 {
  stop-color: var(--sc-mid);
}

.card-scene .sb-b3 {
  stop-color: var(--sc-lo);
}

.card-scene .sb-g1 {
  stop-color: #fff;
  stop-opacity: .97;
}

.card-scene .sb-g2 {
  stop-color: #fff;
  stop-opacity: .74;
}

.card-scene .sb-c1 {
  stop-color: #fff;
  stop-opacity: 0;
}

.card-scene .sb-c2 {
  stop-color: #fff;
  stop-opacity: .3;
}

.feature-card > .card-cover:before {
  content: "";
  pointer-events: none;
  border: 16px solid #ffffff21;
  border-radius: 50%;
  width: 190px;
  height: 190px;
  position: absolute;
  top: -76px;
  right: -64px;
}

.feature-card > .card-cover:after {
  content: "";
  opacity: .45;
  pointer-events: none;
  background-image: radial-gradient(#ffffff8c 1.6px, #0000 2px);
  background-size: 13px 11px;
  width: 66px;
  height: 22px;
  position: absolute;
  bottom: 14px;
  left: 16px;
}

.feature-card > .card-cover > * {
  z-index: 1;
  position: relative;
}

.feature-card .card-cover .card-icon {
  border-color: #ffffff61;
  box-shadow: 0 4px 14px #0000001f, inset 0 1px #ffffff59;
  color: #fff !important;
  background: #ffffff38 !important;
}

.feature-card:hover .card-cover .card-icon {
  background: #ffffff4d !important;
  box-shadow: 0 6px 18px #00000029, inset 0 1px #ffffff73 !important;
}

.feature-card .card-cover .card-title {
  color: #fff;
  text-shadow: 0 1px 3px #00000059;
}

.feature-card .card-cover .card-desc {
  color: #ffffffe6;
  text-shadow: none;
}

.feature-card .card-cover .card-chevron {
  color: #ffffffbf;
  box-shadow: none;
  opacity: .85;
  background: none;
}

.feature-card:hover .card-cover .card-chevron {
  color: #fff;
  background: #ffffff4d;
}

.feature-card.expanded .card-cover .card-chevron {
  color: #ffffffb3;
}

.card-scene {
  pointer-events: none;
  opacity: 1;
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 0;
  display: flex;
}

.card-scene svg {
  opacity: 1;
  width: 92%;
  max-width: 100%;
  height: 92%;
  max-height: 100%;
  overflow: visible;
}

.card-scene .sc-float, .card-scene .sc-twinkle, .card-scene .sc-bounce, .card-scene .sc-shadowpulse, .card-scene .sc-pop, .card-scene .sc-spin, .card-scene .sc-spin-rev, .card-scene .sc-tile, .card-scene .sc-cascade, .card-scene .sc-scroll, .card-scene .sc-scan {
  transform-box: fill-box;
  transform-origin: center;
}

.card-scene .d1 {
  animation-delay: -1.2s;
}

.card-scene .d2 {
  animation-delay: -2.4s;
}

.card-scene .d3 {
  animation-delay: -3.4s;
}

html.perf-mode .card-scene *, html[data-perf="low"] .card-scene * {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .card-scene * {
    animation: none !important;
  }

  .feature-card > .card-cover {
    transition: none;
  }
}

@keyframes dropdownPop {
  0% {
    opacity: 0;
    transform: scale(.88)translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: scale(1)translateY(0);
  }
}

.api-controls .api-btn.active .dropdown {
  display: block;
}

.api-controls .api-btn .dropdown .dropdown-item {
  color: var(--text-primary);
  transition: all var(--transition-base);
  padding: 9px 22px;
  font-size: .78rem;
}

.api-controls .api-btn .dropdown .dropdown-item:hover {
  background: rgba(var(--ocean-cyan-rgb), .08);
  color: var(--ocean-light);
  padding-left: 28px;
}

.api-controls .api-btn.primary {
  background: linear-gradient(135deg, var(--ocean-light) 0%, var(--ocean-cyan) 50%, var(--neon-glow) 100%);
  color: var(--text-inverse);
  border-color: rgba(var(--ocean-cyan-rgb), .5);
  box-shadow: 0 4px 16px rgba(var(--ocean-light-rgb), .4), 0 0 24px rgba(var(--ocean-cyan-rgb), .25), inset 0 1px 0 rgba(var(--glass-tint-rgb), .3);
  text-shadow: 0 1px 3px rgba(var(--shadow-rgb), .15);
}

.api-controls .api-btn.primary i {
  color: var(--text-inverse);
}

.api-controls .api-btn.primary:hover {
  box-shadow: 0 10px 32px rgba(var(--ocean-cyan-rgb), .5), 0 0 20px rgba(var(--neon-glow-rgb), .2);
  transform: translateY(-3px)scale(1.04);
}

.api-controls .api-btn.primary:active {
  transition: transform var(--dur-1);
  transform: scale(.93);
}

.api-controls .api-btn .btn-loader {
  border: 2px solid rgba(var(--glass-tint-rgb), .3);
  border-top-color: var(--text-inverse);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: .8s linear infinite yx-spin;
  display: none;
}

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

.api-controls .api-btn.loading .btn-loader {
  display: inline-block;
}

.api-controls .api-btn.loading .btn-text {
  display: none;
}

.tutorial-section {
  border-radius: var(--fluid-radius);
  padding: var(--fluid-pad) calc(var(--fluid-pad)  + 4px) calc(var(--fluid-pad)  + 2px);
  z-index: 2;
  width: 100%;
  animation: cardStagger .7s var(--ease-out-expo) .55s backwards;
  opacity: 1;
  transition: all var(--transition-smooth);
  margin-top: 4px;
  position: relative;
  transform: none;
}

.tutorial-section:hover {
  transform: translateY(-3px);
  box-shadow: var(--island-glow-hover) !important;
}

.tutorial-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.tutorial-header .tut-title {
  font-size: var(--fluid-font-base);
  color: var(--text-primary);
  font-weight: 600;
}

.tutorial-header .tut-title i {
  color: var(--ocean-light);
  margin-right: 8px;
}

.tutorial-header .tut-more {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-light);
  transition: all var(--transition-base);
  font-weight: 500;
}

.tutorial-header .tut-more:hover {
  opacity: .8;
  transform: translateX(5px);
}

.tutorial-grid {
  gap: var(--fluid-gap-sm);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.tutorial-card {
  background: rgba(var(--ocean-white-rgb), .6);
  -webkit-backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  border-radius: var(--fluid-radius);
  -webkit-overflow-clipping: clip;
  border: 1px solid rgba(var(--ocean-deep-rgb), .05);
  transition: all var(--transition-bouncy);
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), .02);
  overflow: clip;
}

.tutorial-card:hover {
  box-shadow: 0 16px 48px rgba(var(--shadow-rgb), .1);
  border-color: rgba(var(--ocean-cyan-rgb), .2);
  transform: translateY(-8px)scale(1.03);
}

.tutorial-card .thumb {
  background: linear-gradient(145deg, var(--ocean-white), var(--text-placeholder));
  background-position: center;
  background-size: cover;
  justify-content: center;
  align-items: center;
  height: 100px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.tutorial-card .thumb .play {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
  width: 42px;
  height: 42px;
  -webkit-backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  color: var(--ocean-light);
  transition: all var(--transition-bouncy);
  box-shadow: 0 4px 18px rgba(var(--shadow-rgb), .08);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  display: flex;
}

.tutorial-card:hover .play {
  background: var(--ocean-white);
  box-shadow: 0 10px 36px rgba(var(--ocean-cyan-rgb), .3);
  transform: scale(1.2);
}

.tutorial-card .thumb .tag {
  background: rgba(var(--shadow-rgb), .35);
  -webkit-backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  color: var(--text-inverse);
  border-radius: 100px;
  padding: 2px 12px;
  font-size: .55rem;
  font-weight: 600;
  position: absolute;
  bottom: 6px;
  right: 8px;
}

.tutorial-card .info {
  padding: 10px 14px 12px;
}

.tutorial-card .info h4 {
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  margin-bottom: 2px;
  font-weight: 600;
}

.tutorial-card .info p {
  color: var(--text-tertiary);
  font-size: var(--fluid-font-xs);
}

.toast-container {
  z-index: 999999;
  pointer-events: none;
  flex-direction: column;
  gap: 10px;
  display: flex;
  position: fixed;
  bottom: 30px;
  right: 30px;
}

.toast {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  box-shadow: 0 24px 72px rgba(var(--shadow-rgb), .14), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .55), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .16);
  border: 1px solid rgba(var(--ocean-deep-rgb), .08);
  pointer-events: auto;
  min-width: 280px;
  max-width: 420px;
  animation: toastSlide var(--dur-4) var(--ease-out-back) forwards;
  border-radius: 18px;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  display: flex;
  transform: translateX(120%);
}

@keyframes toastSlide {
  0% {
    opacity: 0;
    transform: translateX(120%)scale(.88);
  }

  100% {
    opacity: 1;
    transform: translateX(0)scale(1);
  }
}

.toast.exit {
  animation: toastExit var(--dur-4) var(--ease-out-expo) forwards;
}

@keyframes toastExit {
  0% {
    opacity: 1;
    transform: translateX(0)scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(120%)scale(.88);
  }
}

.toast .toast-icon {
  flex-shrink: 0;
  font-size: 1.2rem;
}

.toast .toast-icon.success {
  color: var(--success);
}

.toast .toast-icon.error {
  color: var(--error);
}

.toast .toast-icon.info {
  color: var(--ocean-light);
}

.toast .toast-icon.warning {
  color: var(--warning);
}

.toast .toast-content {
  flex: 1;
}

.toast .toast-content .toast-title {
  font-weight: 600;
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
}

.toast .toast-content .toast-msg {
  font-size: var(--fluid-font-xs);
  color: var(--text-tertiary);
}

.toast .toast-close {
  color: var(--text-placeholder);
  transition: color var(--transition-base);
  background: none;
  border: none;
  padding: 4px;
  font-size: .9rem;
}

.toast .toast-close:hover {
  color: var(--text-primary);
}

.task-notice-stack {
  z-index: 10001;
  pointer-events: none;
  flex-direction: column;
  gap: 8px;
  display: flex;
  position: fixed;
  bottom: 84px;
  right: 18px;
}

.task-notice-card {
  pointer-events: auto;
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  min-width: 260px;
  max-width: 340px;
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  color: var(--text-primary);
  box-shadow: 0 10px 30px rgba(var(--shadow-rgb), .18), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .45), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .12);
  cursor: pointer;
  text-align: left;
  border: 1px solid var(--border-default);
  transition: all var(--transition-base);
  animation: taskNoticeSlide var(--dur-4) var(--ease-out-back) backwards;
  border-radius: 14px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  display: flex;
}

.task-notice-card:hover {
  box-shadow: 0 14px 40px rgba(var(--shadow-rgb), .24), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .55), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .18);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.task-notice-card .task-notice-icon {
  flex-shrink: 0;
  font-size: 1rem;
}

.task-notice-card .task-notice-body {
  flex: 1;
  min-width: 0;
}

.task-notice-card .task-notice-title {
  color: var(--text-primary);
  font-size: .82rem;
  font-weight: 600;
  display: block;
}

.task-notice-card .task-notice-msg {
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
  display: block;
  overflow: hidden;
}

@keyframes taskNoticeSlide {
  0% {
    opacity: 0;
    transform: translateX(40px)scale(.9);
  }

  100% {
    opacity: 1;
    transform: translateX(0)scale(1);
  }
}

.task-fab-wrap {
  z-index: 10001;
  position: fixed;
  bottom: 22px;
  right: 18px;
}

.task-notice-panel {
  background: rgba(var(--glass-bg-rgb), calc(var(--glass-opacity, 1) * .92));
  width: 300px;
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  border: 1px solid var(--border-strong);
  box-shadow: 0 12px 40px rgba(var(--shadow-rgb), .22), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .4);
  color: var(--text-primary);
  animation: taskPanelPop var(--dur-3) var(--ease-out-back) backwards;
  border-radius: 16px;
  padding: 12px;
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
}

@keyframes taskPanelPop {
  0% {
    opacity: 0;
    transform: scale(.88)translateY(10px);
  }

  100% {
    opacity: 1;
    transform: scale(1)translateY(0);
  }
}

.task-notice-panel-header {
  color: var(--text-primary);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: .82rem;
  font-weight: 600;
  display: flex;
}

.task-notice-panel-close {
  color: var(--text-placeholder);
  cursor: pointer;
  transition: color var(--transition-base);
  background: none;
  border: none;
  font-size: .85rem;
}

.task-notice-panel-close:hover {
  color: var(--text-primary);
}

.task-notice-panel-item {
  width: 100%;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-base);
  background: none;
  border-radius: 6px;
  gap: 8px;
  padding: 8px 6px;
  display: flex;
}

.task-notice-panel-item:hover {
  background: rgba(var(--accent-cyan-rgb), .08);
}

.task-notice-panel-item .task-notice-icon {
  margin-top: 2px;
}

.task-notice-panel-item-title {
  color: var(--text-primary);
  font-size: .76rem;
  font-weight: 600;
  display: block;
}

.task-notice-panel-item-msg {
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .68rem;
  display: block;
  overflow: hidden;
}

.task-notice-panel-btn {
  border: 1px solid var(--border-strong);
  background: rgba(var(--glass-tint-rgb), .08);
  width: 100%;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-base);
  border-radius: 8px;
  margin-top: 8px;
  padding: 7px 0;
  font-size: .74rem;
}

.task-notice-panel-btn:hover {
  background: rgba(var(--accent-cyan-rgb), .12);
  border-color: var(--border-hover);
}

.task-fab-btn {
  border: 1px solid var(--border-strong);
  background: rgba(var(--glass-bg-rgb), calc(var(--glass-opacity, 1) * .9));
  width: 54px;
  height: 54px;
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb), .22), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .4), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .12);
  cursor: pointer;
  transition: all var(--transition-base);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.task-fab-btn:hover {
  box-shadow: 0 12px 32px rgba(var(--shadow-rgb), .28), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .5), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .18);
  border-color: var(--border-hover);
}

.task-fab-badge {
  background: var(--error);
  color: #fff;
  min-width: 22px;
  height: 22px;
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), .35);
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  font-size: .72rem;
  font-weight: 600;
  display: flex;
  position: absolute;
  top: -4px;
  right: -4px;
}

.sub-preview-tip {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  box-shadow: 0 28px 80px rgba(var(--shadow-rgb), .2), 0 0 0 1px rgba(var(--ocean-cyan-rgb), .1);
  pointer-events: none;
  transform-origin: bottom;
  width: 320px;
  height: 240px;
  animation: previewPopIn var(--dur-3) var(--ease-out-back) forwards;
  border: 1px solid rgba(var(--ocean-cyan-rgb), .1);
  border-radius: 20px;
  padding: 8px;
  position: fixed;
  overflow: hidden;
  z-index: 9999999 !important;
  display: none !important;
}

.sub-preview-tip.show {
  display: block !important;
}

@keyframes previewPopIn {
  0% {
    opacity: 0;
    transform: scale(.65)translateY(20px);
  }

  100% {
    opacity: 1;
    transform: scale(1)translateY(0);
  }
}

.sub-preview-tip .preview-cover {
  background: var(--ocean-white);
  border-radius: 14px;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.sub-preview-tip .preview-cover img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.sub-preview-tip .preview-cover .cover-label {
  background: linear-gradient(0deg, rgba(var(--shadow-rgb), .65) 0%, transparent);
  color: var(--text-inverse);
  letter-spacing: .3px;
  text-shadow: 0 1px 4px rgba(var(--shadow-rgb), .3);
  -webkit-backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  padding: 8px 12px;
  font-size: .85rem;
  font-weight: 600;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.sub-preview-tip:after {
  content: "";
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  border-right: 1px solid rgba(var(--ocean-cyan-rgb), .1);
  border-bottom: 1px solid rgba(var(--ocean-cyan-rgb), .1);
  z-index: 9999999;
  border-radius: 0 0 4px;
  width: 16px;
  height: 16px;
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%)rotate(45deg);
}

.sub-preview-tip.preview-above:after {
  top: -9px;
  bottom: auto;
  transform: translateX(-50%)rotate(225deg);
}

.qg-title, .card-title, .api-title, .tut-title, .section-title .title {
  text-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04);
}

@media (max-width: 992px) {
  .tutorial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .tutorial-grid {
    grid-template-columns: 1fr;
  }
}

.dynamic-form-container {
  flex-direction: column;
  gap: 8px;
  padding: 2px 0;
  display: flex;
}

.dynamic-form-grid {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.dynamic-form-group {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.dynamic-form-group-title {
  font-size: var(--fluid-font-sm);
  color: var(--text-secondary);
  letter-spacing: .04em;
  opacity: .85;
  margin: 2px 0;
  font-weight: 600;
}

.dynamic-form-item {
  opacity: 1;
  animation: dynamicFormFadeIn var(--dur-4) var(--ease-out-expo) backwards;
  animation-delay: calc(var(--form-idx, 0) * 50ms);
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: 0 2px 10px rgba(var(--ocean-deep-rgb), .04), var(--no-corners);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
  padding: 8px 10px;
}

.dynamic-form-item.layout-full {
  grid-column: 1 / -1;
}

.dynamic-form-item.layout-half {
  grid-column: span 1;
}

.dynamic-form-item:hover {
  border-color: var(--border-glow);
  box-shadow: 0 6px 22px rgba(var(--ocean-deep-rgb), .08), var(--island-glow-hover), 0 0 12px rgba(var(--neon-glow-rgb), .08);
  transform: translateY(-2px);
}

.dynamic-form-item:focus-within {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 4px rgba(var(--neon-glow-rgb), .12), 0 0 20px rgba(var(--neon-glow-rgb), .1);
}

@keyframes dynamicFormFadeIn {
  0% {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(10px)scale(.99);
  }

  100% {
    opacity: 1;
    filter: blur();
    transform: translateY(0)scale(1);
  }
}

.dynamic-form-grid .dynamic-form-item:first-child {
  --form-idx: 0;
}

.dynamic-form-grid .dynamic-form-item:nth-child(2) {
  --form-idx: 1;
}

.dynamic-form-grid .dynamic-form-item:nth-child(3) {
  --form-idx: 2;
}

.dynamic-form-grid .dynamic-form-item:nth-child(4) {
  --form-idx: 3;
}

.dynamic-form-grid .dynamic-form-item:nth-child(5) {
  --form-idx: 4;
}

.dynamic-form-grid .dynamic-form-item:nth-child(6) {
  --form-idx: 5;
}

.dynamic-form-grid .dynamic-form-item:nth-child(n+7) {
  --form-idx: 6;
}

.dynamic-form-item label {
  font-size: var(--fluid-font-sm);
  color: var(--text-tertiary);
  margin-bottom: 4px;
  font-weight: 600;
  display: block;
}

.dynamic-form-item input, .dynamic-form-item select, .dynamic-form-item textarea {
  border: 1px solid rgba(var(--ocean-deep-rgb), .1);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  width: 100%;
  font-family: Inter, sans-serif;
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  transition: all var(--transition-base);
  border-radius: 8px;
  padding: 6px 10px;
}

.dynamic-form-item input:focus, .dynamic-form-item select:focus, .dynamic-form-item textarea:focus {
  border-color: var(--neon-glow);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  box-shadow: 0 0 0 4px rgba(var(--neon-glow-rgb), .12), 0 0 16px rgba(var(--neon-glow-rgb), .08);
  outline: none;
}

.dynamic-form-item button[type="button"] {
  transition: all var(--transition-base);
  font-family: Inter, sans-serif;
}

.dynamic-form-item input[type="range"] {
  appearance: none;
  background: linear-gradient(90deg, var(--ocean-light), var(--ocean-cyan));
  border: none;
  border-radius: 6px;
  height: 6px;
  padding: 0;
}

.dynamic-form-item input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: var(--ocean-white);
  border: 2px solid var(--ocean-light);
  width: 16px;
  height: 16px;
  box-shadow: 0 2px 8px rgba(var(--ocean-cyan-rgb), .35);
  cursor: pointer;
  transition: transform var(--transition-fast);
  border-radius: 50%;
}

.dynamic-form-item input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.workflow-info-card {
  border-radius: var(--radius-md);
  background: rgba(var(--glass-bg-rgb), .94);
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  box-shadow: var(--island-glow), 0 8px 32px rgba(var(--ocean-deep-rgb), .06);
  animation: dynamicFormFadeIn var(--dur-4) var(--ease-out-expo) forwards;
  content-visibility: auto;
  contain-intrinsic-size: auto 96px;
  margin-bottom: 12px;
  padding: 14px 16px;
}

.workflow-info-card .winfo-title {
  font-size: var(--fluid-font-base);
  color: var(--text-primary);
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-weight: 600;
  display: flex;
}

.workflow-info-card .winfo-desc {
  font-size: var(--fluid-font-sm);
  color: var(--text-tertiary);
  margin: 0 0 8px;
  line-height: 1.55;
}

.workflow-info-card .winfo-meta {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  display: flex;
}

.workflow-info-card .winfo-tag {
  background: rgba(var(--ocean-cyan-rgb), .1);
  color: var(--text-secondary);
  border: 1px solid rgba(var(--ocean-cyan-rgb), .18);
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: .66rem;
  font-weight: 600;
  display: inline-flex;
}

.workflow-info-card .winfo-tag.power {
  background: rgba(var(--golden-rgb), .14);
  color: var(--golden);
  border-color: rgba(var(--golden-rgb), .32);
}

.di-root {
  z-index: 10001;
  pointer-events: none;
  flex-direction: column;
  align-items: flex-end;
  display: flex;
  position: fixed;
  bottom: 24px;
  right: 20px;
}

.di-island {
  pointer-events: auto;
  background: rgba(var(--glass-bg-rgb), calc(var(--glass-opacity, 1) * .88));
  width: 48px;
  height: 48px;
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  border: 1px solid rgba(var(--ocean-cyan-rgb), .22);
  box-shadow: 0 8px 28px rgba(var(--shadow-rgb), .22), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .5), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .14), 0 0 0 1px rgba(var(--ocean-cyan-rgb), .06);
  color: var(--text-primary);
  cursor: pointer;
  transition: width var(--dur-3) var(--ease-pro), height var(--dur-3) var(--ease-pro), border-radius var(--dur-3) var(--ease-pro), box-shadow var(--transition-base), border-color var(--transition-base);
  will-change: width, height, border-radius;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.di-island:hover {
  border-color: rgba(var(--ocean-cyan-rgb), .38);
  box-shadow: 0 12px 36px rgba(var(--shadow-rgb), .3), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .6), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .22), 0 0 0 1px rgba(var(--ocean-cyan-rgb), .1);
}

.di-island[data-state="compact"] {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

.di-island[data-state="notify"] {
  border-radius: 999px;
  width: 320px;
  height: 52px;
}

.di-island[data-state="expanded"] {
  border-radius: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 340px;
  height: min(480px, 100vh - 100px);
}

.di-island .di-compact {
  display: flex;
}

.di-island .di-notify, .di-island .di-expanded-content, .di-island[data-state="notify"] .di-compact {
  display: none;
}

.di-island[data-state="notify"] .di-notify {
  display: flex;
}

.di-island[data-state="expanded"] .di-compact {
  display: none;
}

.di-island[data-state="expanded"] .di-expanded-content {
  display: flex;
}

.di-compact {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.di-compact-icon {
  color: var(--neon-glow);
  text-shadow: 0 0 10px rgba(var(--ocean-cyan-rgb), .4);
  font-size: 1.05rem;
}

.di-compact-ring {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.di-ring-icon {
  color: var(--neon-glow);
  font-size: .78rem;
  position: absolute;
}

.di-notify {
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 0 14px;
  display: flex;
}

.di-notify-icon {
  background: rgba(var(--glass-bg-rgb), calc(var(--glass-opacity, 1) * .55));
  width: 30px;
  height: 30px;
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .25);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .9rem;
  display: flex;
}

.di-notify-main {
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.2;
  display: flex;
}

.di-notify-undo {
  border: 1px solid rgba(var(--ocean-cyan-rgb), .45);
  background: rgba(var(--ocean-cyan-rgb), .14);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-quick);
  border-radius: 999px;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 6px;
  padding: 3px 12px;
  font-size: .68rem;
  font-weight: 600;
}

.di-notify-undo:hover {
  background: rgba(var(--ocean-cyan-rgb), .28);
}

.di-notify-title {
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .78rem;
  font-weight: 600;
  overflow: hidden;
}

.di-notify-msg {
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .68rem;
  overflow: hidden;
}

.di-expanded-content {
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
}

.di-expanded-header {
  border-bottom: 1px solid rgba(var(--ocean-cyan-rgb), .1);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 10px;
  display: flex;
}

.di-expanded-title {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  display: flex;
}

.di-expanded-live {
  color: var(--neon-glow);
  background: rgba(var(--ocean-cyan-rgb), .14);
  border-radius: 6px;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-size: .62rem;
  font-weight: 600;
  display: inline-flex;
}

.di-expanded-actions {
  align-items: center;
  gap: 2px;
  display: flex;
}

.di-icon-btn {
  width: 26px;
  height: 26px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition-quick);
  background: none;
  border: none;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  font-size: .68rem;
  display: flex;
}

.di-icon-btn:hover {
  background: rgba(var(--ocean-cyan-rgb), .1);
  color: var(--text-primary);
}

.di-expanded-body {
  flex-direction: column;
  flex: 1;
  gap: 8px;
  min-height: 0;
  padding: 8px 10px 4px;
  display: flex;
  overflow-y: auto;
}

.di-overall {
  background: rgba(var(--ocean-cyan-rgb), .07);
  border: 1px solid rgba(var(--ocean-cyan-rgb), .1);
  border-radius: 10px;
  flex-shrink: 0;
  padding: 10px 12px;
}

.di-overall-top {
  color: var(--text-secondary);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: .68rem;
  font-weight: 600;
  display: flex;
}

.di-overall-num {
  color: var(--neon-glow);
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  font-weight: 600;
}

.di-overall-track {
  background: rgba(var(--ocean-cyan-rgb), .12);
  border-radius: 2px;
  height: 4px;
  overflow: hidden;
}

.di-overall-bar {
  background: linear-gradient(90deg, var(--ocean-light), var(--neon-glow));
  height: 100%;
  transition: width var(--dur-3) var(--ease-out-expo);
  border-radius: 2px;
}

.di-overall-stats {
  color: var(--text-tertiary);
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: .6rem;
  display: flex;
}

.di-section {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.di-section-label {
  color: var(--text-tertiary);
  letter-spacing: .3px;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px;
  font-size: .6rem;
  font-weight: 600;
  display: flex;
}

.di-section-clear {
  color: var(--text-placeholder);
  cursor: pointer;
  text-transform: none;
  transition: color var(--transition-quick);
  background: none;
  border: none;
  font-size: .58rem;
}

.di-section-clear:hover {
  color: var(--error);
}

.di-section-list {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.di-task-row {
  background: rgba(var(--ocean-cyan-rgb), .05);
  border: 1px solid rgba(var(--ocean-cyan-rgb), .07);
  transition: background var(--transition-quick);
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  display: flex;
}

.di-task-row:hover {
  background: rgba(var(--ocean-cyan-rgb), .09);
}

.di-task-row-main {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.di-task-row-name {
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 600;
  overflow: hidden;
}

.di-task-row-meta {
  color: var(--text-tertiary);
  align-items: center;
  gap: 6px;
  font-size: .6rem;
  display: flex;
}

.di-task-row-count {
  color: var(--text-placeholder);
}

.di-task-row-actions {
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  display: flex;
}

.di-action-btn {
  width: 24px;
  height: 24px;
  color: var(--text-placeholder);
  cursor: pointer;
  transition: all var(--transition-quick);
  background: none;
  border: none;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  font-size: .65rem;
  display: flex;
}

.di-action-btn:hover {
  background: rgba(var(--ocean-cyan-rgb), .12);
  color: var(--text-primary);
}

.di-action-danger:hover {
  background: rgba(var(--error), .18);
  color: var(--error);
}

.di-notice-row {
  background: rgba(var(--ocean-cyan-rgb), .05);
  border: 1px solid rgba(var(--ocean-cyan-rgb), .07);
  cursor: pointer;
  transition: background var(--transition-quick);
  border-radius: 8px;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  display: flex;
}

.di-notice-row:hover {
  background: rgba(var(--ocean-cyan-rgb), .09);
}

.di-notice-row.unread {
  border-color: rgba(var(--ocean-cyan-rgb), .28);
  background: rgba(var(--ocean-cyan-rgb), .1);
}

.di-notice-row.unread:before {
  content: "";
  background: var(--neon-glow);
  width: 6px;
  height: 6px;
  box-shadow: 0 0 6px rgba(var(--ocean-cyan-rgb), .5);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.di-notice-icon {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: .75rem;
}

.di-notice-main {
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.di-notice-title {
  color: var(--text-primary);
  font-size: .7rem;
  font-weight: 600;
}

.di-notice-msg {
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .62rem;
  overflow: hidden;
}

.di-notice-actions {
  opacity: 0;
  transition: opacity var(--transition-quick);
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  display: flex;
}

.di-notice-row:hover .di-notice-actions, .di-notice-row:has(.di-notice-act-undo) .di-notice-actions {
  opacity: 1;
}

.di-notice-act-undo {
  color: var(--ocean-cyan, #38bdf8);
}

.di-notice-act {
  width: 22px;
  height: 22px;
  color: var(--text-placeholder);
  cursor: pointer;
  transition: all var(--transition-quick);
  background: none;
  border: none;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  font-size: .62rem;
  display: flex;
}

.di-notice-act:hover {
  background: rgba(var(--ocean-cyan-rgb), .12);
  color: var(--text-primary);
}

.di-empty {
  color: var(--text-placeholder);
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 0;
  font-size: .68rem;
  display: flex;
}

.di-empty i {
  opacity: .5;
  font-size: 1.3rem;
}

.di-expanded-footer {
  border-top: 1px solid rgba(var(--ocean-cyan-rgb), .1);
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px;
  display: flex;
}

.di-footer-btn {
  border: 1px solid rgba(var(--ocean-cyan-rgb), .12);
  background: rgba(var(--ocean-cyan-rgb), .06);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-quick);
  border-radius: 8px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: .68rem;
  font-weight: 600;
  display: flex;
}

.di-footer-btn:hover {
  background: rgba(var(--ocean-cyan-rgb), .1);
  border-color: rgba(var(--ocean-cyan-rgb), .2);
  color: var(--text-primary);
}

.di-badge {
  background: var(--error);
  color: #fff;
  min-width: 20px;
  height: 20px;
  box-shadow: 0 2px 10px rgba(var(--error), .4), 0 0 0 2px rgba(var(--glass-bg-rgb), .8);
  z-index: 10;
  pointer-events: none;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  font-size: .68rem;
  font-weight: 600;
  display: flex;
  position: absolute;
  top: -5px;
  right: -5px;
}

.new-sidebar.uc-mode.open {
  min-width: 600px;
  max-width: 1010px;
}

.island-cluster.sidebar-open .right-island-stack, .main-layout.uc-open .right-sidebar, .main-layout.uc-open .main-content {
  display: none;
}

.main-layout.uc-open .island-cluster {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 1200px) {
  .new-sidebar.uc-mode.open {
    min-width: 520px;
    max-width: 900px;
  }
}

@media (max-width: 992px) {
  .new-sidebar.uc-mode.open {
    min-width: 0;
    max-width: 780px;
  }
}

@media (max-width: 768px) {
  .new-sidebar.uc-mode.open {
    min-width: 0;
    max-width: 520px;
  }
}

@media (max-width: 480px) {
  .new-sidebar.uc-mode.open {
    min-width: 0;
    max-width: 380px;
  }
}

.uc-root {
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-height: 0;
  display: flex;
}

.uc-hero {
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(var(--ocean-deep-rgb), .42) 0%, rgba(var(--ocean-light-rgb), .35) 50%, rgba(var(--ocean-mid-rgb), .3) 100%);
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  color: var(--ocean-white);
  -webkit-overflow-clipping: clip;
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .15), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .2), 0 8px 32px rgba(var(--ocean-deep-rgb), .08);
  animation: ucHeroIn var(--dur-4) cubic-bezier(.25, .46, .45, .94) both;
  flex-shrink: 0;
  padding: 10px 16px;
  position: relative;
  overflow: clip;
}

@keyframes ucHeroIn {
  from {
    opacity: 0;
    transform: translateY(-12px)scale(.99);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.uc-hero:before {
  content: "";
  background: radial-gradient(circle, rgba(var(--neon-glow-rgb), .25), transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  position: absolute;
  top: -60px;
  right: -40px;
}

.uc-hero:after {
  content: "";
  background: radial-gradient(circle, rgba(var(--ocean-cyan-rgb), .18), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  border-radius: 50%;
  width: 160px;
  height: 160px;
  position: absolute;
  bottom: -50px;
  left: 30%;
}

.uc-hero-row {
  z-index: 1;
  align-items: center;
  gap: 12px;
  display: flex;
  position: relative;
}

.uc-hero-avatar {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  width: 48px;
  height: 48px;
  color: var(--text-inverse);
  box-shadow: 0 0 0 2px rgba(var(--glass-tint-rgb), .2), 0 4px 16px rgba(var(--ocean-light-rgb), .3);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  position: relative;
}

.uc-hero-avatar:after {
  content: "";
  border: 1px dashed rgba(var(--neon-glow-rgb), .3);
  border-radius: 50%;
  position: absolute;
  inset: -4px;
}

.uc-hero-avatar-img {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
}

.uc-hero-info {
  flex: 1;
  min-width: 0;
}

.uc-hero-name {
  color: var(--text-inverse);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  font-size: 1.15rem;
  font-weight: 600;
  display: flex;
}

.uc-hero-meta {
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-size: .76rem;
}

.uc-hero-badges {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.uc-hero-badge {
  background: rgba(var(--ocean-light-rgb), .15);
  color: var(--ocean-cyan);
  border: none;
  border-radius: 100px;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: .7rem;
  font-weight: 600;
  display: inline-flex;
}

.uc-hero-badge.gold {
  background: rgba(var(--warning-rgb), .15);
  color: var(--warning);
}

.uc-const {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  -webkit-overflow-clipping: clip;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .1), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .12);
  border-radius: 14px;
  align-items: stretch;
  gap: 12px;
  margin-top: 6px;
  padding: 10px 14px 8px;
  display: flex;
  position: relative;
  overflow: clip;
}

.uc-const-left {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.uc-const-right {
  border-left: 1px solid rgba(var(--text-tertiary-rgb), .12);
  flex-shrink: 0;
  align-items: stretch;
  width: 232px;
  padding-left: 12px;
  display: flex;
}

@media (max-width: 860px) {
  .uc-const-right {
    width: 210px;
  }
}

@media (max-width: 760px) {
  .uc-const {
    flex-direction: column;
  }

  .uc-const-right {
    border-left: none;
    border-top: 1px solid rgba(var(--text-tertiary-rgb), .12);
    width: 100%;
    padding-top: 10px;
    padding-left: 0;
  }
}

.uc-const-ring-section {
  z-index: 1;
  align-items: center;
  gap: 14px;
  display: flex;
  position: relative;
}

.uc-const-ring {
  flex-shrink: 0;
  width: 78px;
  height: 78px;
}

.uc-const-ring-bg {
  fill: none;
  stroke: rgba(var(--text-tertiary-rgb), .15);
  stroke-width: 6px;
}

.uc-const-ring-fg {
  fill: none;
  stroke: var(--ring-color, var(--neon-glow));
  stroke-width: 6px;
  stroke-linecap: round;
  transform-origin: center;
  filter: drop-shadow(0 0 4px var(--ring-color, var(--neon-glow)));
  transition: stroke-dashoffset .9s cubic-bezier(.34, 1.56, .64, 1);
  transform: rotate(-90deg);
}

.uc-const-ring-label {
  text-anchor: middle;
  fill: var(--text-tertiary);
  font-size: 10px;
  font-weight: 600;
}

.uc-const-ring-value {
  text-anchor: middle;
  fill: var(--text-primary);
  font-size: 16px;
  font-weight: 650;
}

.uc-const-tier-info {
  flex: 1;
  min-width: 0;
}

.uc-const-tier-name {
  color: var(--tier-color, var(--neon-glow));
  font-size: 1rem;
  font-weight: 600;
}

.uc-const-discount-badge {
  background: rgba(var(--success-rgb), .12);
  color: var(--success);
  border-radius: 7px;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 600;
  display: inline-flex;
}

.uc-const-next-desc {
  color: var(--text-secondary);
  margin-top: 4px;
  font-size: .76rem;
  line-height: 1.4;
}

.uc-const-dots {
  z-index: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  align-items: flex-start;
  gap: 0;
  margin-top: 12px;
  padding: 0 2px 2px;
  display: flex;
  position: relative;
  overflow-x: auto;
}

.uc-const-dots::-webkit-scrollbar {
  display: none;
}

.uc-const-dot-item {
  flex-direction: column;
  flex: 0 0 54px;
  align-items: center;
  gap: 4px;
  min-width: 54px;
  display: flex;
  position: relative;
}

.uc-const-dot {
  background: rgba(var(--text-tertiary-rgb), .2);
  width: 10px;
  height: 10px;
  transition: all var(--dur-3) cubic-bezier(.34, 1.56, .64, 1);
  animation: ucDotIn var(--dur-3) var(--ease-out-back) both;
  animation-delay: calc(var(--idx, 0) * 40ms);
  border-radius: 50%;
  flex-shrink: 0;
}

.uc-const-dot.lit {
  background: var(--dot-color, var(--neon-glow));
  box-shadow: 0 0 6px var(--dot-color, var(--neon-glow));
  animation: ucDotIn var(--dur-3) var(--ease-out-back) both, ucDotPulse 2s ease-in-out infinite;
  animation-delay: calc(var(--idx, 0) * 40ms), 0s;
}

.uc-const-dot.current {
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 3px rgba(var(--glass-tint-rgb), .1), 0 0 10px var(--dot-color, var(--neon-glow));
}

@keyframes ucDotPulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .6;
  }
}

@keyframes ucDotIn {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.uc-const-dot-link {
  background: rgba(var(--text-tertiary-rgb), .1);
  z-index: -1;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 5px;
  left: 50%;
  overflow: hidden;
}

.uc-const-dot-link.lit {
  background: rgba(var(--neon-glow-rgb), .3);
}

.uc-const-dot-link.lit:after {
  content: "";
  background: linear-gradient(90deg, transparent, rgba(var(--neon-glow-rgb), .6), transparent);
  background-size: 200% 100%;
  position: absolute;
  inset: 0;
}

.uc-const-dot-label {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  display: flex;
}

.uc-const-dot-name {
  color: var(--text-placeholder);
  transition: color var(--transition-base);
  font-size: .66rem;
  font-weight: 600;
  line-height: 1.2;
}

.uc-const-dot-label.lit .uc-const-dot-name {
  color: var(--dot-color, var(--text-secondary));
}

.uc-const-dot-threshold {
  color: var(--text-placeholder);
  font-size: .6rem;
  line-height: 1.2;
}

.uc-const-dot-label.lit .uc-const-dot-threshold {
  color: var(--text-tertiary);
}

.uc-const-dot-discount {
  color: rgba(var(--success-rgb), .7);
  font-size: .58rem;
  font-weight: 600;
  line-height: 1.2;
}

.uc-const-footer {
  border-top: 1px solid rgba(var(--text-tertiary-rgb), .1);
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  display: flex;
  position: relative;
}

.uc-const-stat {
  color: var(--text-primary);
  align-items: center;
  gap: 6px;
  display: flex;
}

.uc-const-stat svg {
  color: var(--neon-glow);
  flex-shrink: 0;
}

.uc-const-stat-label {
  color: var(--text-primary);
  font-size: .78rem;
  font-weight: 600;
}

.uc-const-stat-value {
  color: var(--text-primary);
  font-size: .92rem;
  font-weight: 650;
}

.uc-const-btn {
  background: linear-gradient(135deg, var(--ocean-light), var(--neon-glow));
  color: var(--text-inverse);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(var(--ocean-light-rgb), .25);
  transition: transform var(--transition-quick), box-shadow var(--transition-quick);
  border: none;
  border-radius: 100px;
  align-items: center;
  padding: 6px 16px;
  font-size: .82rem;
  font-weight: 600;
  display: inline-flex;
}

.uc-const-btn:hover {
  box-shadow: 0 4px 16px rgba(var(--ocean-light-rgb), .35);
  transform: scale(1.04);
}

.uc-const-btn:active {
  transform: scale(.98);
}

.uc-stats {
  flex-shrink: 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  display: grid;
}

@media (max-width: 1180px) {
  .uc-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.uc-stat {
  border-radius: var(--radius-md);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .15), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .5), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .14), 0 4px 20px rgba(var(--ocean-deep-rgb), .04);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  -webkit-overflow-clipping: clip;
  animation: cardStagger var(--dur-4) var(--ease-out-expo) both;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  display: flex;
  position: relative;
  overflow: clip;
}

.uc-stats .uc-stat:first-child {
  animation-delay: .1s;
}

.uc-stats .uc-stat:nth-child(2) {
  animation-delay: .16s;
}

.uc-stats .uc-stat:nth-child(3) {
  animation-delay: .22s;
}

.uc-stats .uc-stat:nth-child(4) {
  animation-delay: .28s;
}

.uc-stat:before {
  content: "";
  background: linear-gradient(90deg, var(--ocean-light), var(--ocean-cyan));
  opacity: 0;
  height: 2px;
  transition: opacity var(--transition-base);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.uc-stat:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .25), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .3), 0 8px 28px rgba(var(--ocean-deep-rgb), .06);
  transform: translateY(-3px);
}

.uc-stat:hover:before {
  opacity: 1;
}

.uc-stat-icon {
  border-radius: 9px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.uc-stat-icon.blue {
  background: linear-gradient(135deg, rgba(var(--ocean-cyan-rgb), .18), rgba(var(--neon-glow-rgb), .12));
  color: var(--ocean-light);
}

.uc-stat-icon.green {
  background: linear-gradient(135deg, rgba(var(--ocean-cyan-rgb), .18), rgba(var(--ocean-cyan-rgb), .1));
  color: var(--success);
}

.uc-stat-icon.gold {
  background: linear-gradient(135deg, rgba(var(--golden-rgb), .22), rgba(var(--golden-rgb), .1));
  color: var(--golden-dark);
}

.uc-stat-icon.purple {
  background: linear-gradient(135deg, rgba(var(--card-accent-video-rgb), .16), rgba(var(--indigo-rgb), .1));
  color: var(--card-accent-video);
}

.uc-stat-body {
  flex: 1;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.uc-stat-label {
  color: var(--text-tertiary);
  white-space: nowrap;
  margin-bottom: 0;
  font-size: .72rem;
  font-weight: 500;
}

.uc-stat-value {
  color: var(--text-primary);
  white-space: nowrap;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.2;
}

.uc-stat-unit {
  color: var(--text-placeholder);
  margin-left: 2px;
  font-size: .72rem;
  font-weight: 500;
}

.uc-body {
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-height: 0;
  display: flex;
}

.uc-nav {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: none;
  border-radius: 0;
  flex-flow: wrap;
  flex-shrink: 0;
  gap: 8px;
  width: 100%;
  padding: 0;
  display: flex;
  overflow-x: visible;
}

.uc-nav::-webkit-scrollbar {
  display: none;
}

.uc-nav > div {
  flex-flow: wrap;
  flex: 0 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.uc-nav-group {
  display: none;
}

.uc-nav-item {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  color: rgba(var(--text-tertiary-rgb), .7);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-base);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .05);
  border: none;
  border-radius: 100px;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  display: flex;
  position: relative;
}

.uc-nav-item:hover {
  background: rgba(var(--ocean-cyan-rgb), .1);
  color: var(--text-secondary);
}

.uc-nav-item.active {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--text-inverse);
  box-shadow: 0 2px 12px rgba(var(--ocean-cyan-rgb), .3), inset 0 1px 0 rgba(var(--glass-tint-rgb), .2);
}

.uc-nav-item.active:before, .uc-nav-divider {
  display: none;
}

.uc-nav-logout {
  background: rgba(var(--error-rgb), .06);
  color: var(--error);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-base);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .04);
  border: none;
  border-radius: 100px;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  display: flex;
}

.uc-nav-logout:hover {
  background: rgba(var(--error-rgb), .12);
}

.uc-content {
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding-right: 4px;
  display: flex;
  overflow-y: auto;
}

.uc-section {
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .45), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .12), 0 4px 20px rgba(var(--ocean-deep-rgb), .03);
  -webkit-overflow-clipping: clip;
  animation: cardStagger var(--dur-4) var(--ease-out-expo) both;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  padding: 14px 20px;
  position: relative;
  overflow: clip;
}

.uc-section:after {
  content: "";
  background: linear-gradient(90deg, transparent, rgba(var(--glass-tint-rgb), .06), transparent);
  width: 60%;
  height: 100%;
  transition: left var(--transition-spring);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: -100%;
}

.uc-section:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .25), 0 8px 28px rgba(var(--ocean-deep-rgb), .06);
  transform: translateY(-2px);
}

.uc-section:hover:after {
  left: 120%;
}

.uc-content .uc-section:first-child {
  animation-delay: 50ms;
}

.uc-content .uc-section:nth-child(2) {
  animation-delay: .11s;
}

.uc-content .uc-section:nth-child(3) {
  animation-delay: .17s;
}

.uc-content .uc-section:nth-child(n+4) {
  animation-delay: .23s;
}

.uc-section-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.uc-section-title {
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 600;
  display: flex;
}

.uc-section-action {
  color: var(--ocean-light);
  cursor: pointer;
  background: rgba(var(--ocean-cyan-rgb), .08);
  border: 1px solid rgba(var(--ocean-cyan-rgb), .12);
  transition: all var(--transition-fast);
  border-radius: 100px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: .74rem;
  font-weight: 600;
}

.uc-section-action:hover {
  background: rgba(var(--ocean-cyan-rgb), .14);
  border-color: rgba(var(--ocean-cyan-rgb), .25);
}

.uc-section-badge {
  color: var(--ocean-light);
  background: rgba(var(--ocean-cyan-rgb), .1);
  border-radius: 100px;
  padding: 2px 10px;
  font-size: .62rem;
  font-weight: 600;
}

.uc-settings-row {
  align-items: stretch;
  gap: 10px;
  margin: 12px 0;
  display: flex;
}

.uc-settings-path {
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12);
  color: var(--text-primary);
  word-break: break-all;
  flex: 1;
  align-items: center;
  min-height: 38px;
  padding: 10px 14px;
  font-size: .74rem;
  display: flex;
}

.uc-settings-btn {
  border-radius: var(--radius-sm);
  background: rgba(var(--ocean-light-rgb), .12);
  color: var(--ocean-light);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12);
  white-space: nowrap;
  border: none;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  font-size: .74rem;
  font-weight: 600;
  display: flex;
}

.uc-settings-btn:hover {
  background: rgba(var(--ocean-light-rgb), .2);
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2);
}

.uc-settings-status {
  border-radius: var(--radius-sm);
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: .72rem;
  font-weight: 600;
  display: flex;
}

.uc-settings-status.success {
  background: rgba(var(--success-rgb), .12);
  color: var(--success);
}

.uc-settings-status.error {
  background: rgba(var(--error-rgb), .12);
  color: var(--error);
}

.uc-settings-hint {
  border-radius: var(--radius-sm);
  background: rgba(var(--ocean-light-rgb), .04);
  color: var(--text-tertiary);
  padding: 12px 14px;
  font-size: .7rem;
  line-height: 1.6;
}

.uc-settings-hint p {
  margin: 0 0 6px;
}

.uc-settings-hint ul {
  margin: 0 0 6px;
  padding-left: 16px;
}

.uc-settings-hint li {
  margin-bottom: 2px;
}

.uc-list-item {
  border-radius: var(--radius-md);
  background: rgba(var(--glass-bg-rgb), .92);
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12), 0 2px 12px rgba(var(--ocean-deep-rgb), .03);
  transition: all var(--transition-base);
  content-visibility: auto;
  contain-intrinsic-size: auto 56px;
  -webkit-overflow-clipping: clip;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 12px 14px;
  display: flex;
  position: relative;
  overflow: clip;
}

.uc-list-item:before {
  content: "";
  background: linear-gradient(180deg, var(--ocean-light), var(--ocean-cyan));
  opacity: 0;
  width: 3px;
  transition: opacity var(--transition-base);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.uc-list-item:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .22), 0 6px 18px rgba(var(--ocean-deep-rgb), .06);
  transform: translateX(4px);
}

.uc-list-item:hover:before {
  opacity: 1;
}

.uc-list-item:last-child {
  margin-bottom: 0;
}

.uc-list-item.featured {
  border-color: rgba(var(--ocean-cyan-rgb), .3);
  background: linear-gradient(135deg, rgba(var(--ocean-cyan-rgb), .06), rgba(var(--neon-glow-rgb), .04));
}

.uc-list-item.featured:before {
  opacity: 1;
  background: linear-gradient(180deg, var(--ocean-light), var(--ocean-cyan));
}

.uc-price-tag {
  color: var(--text-secondary);
  font-size: 1.05rem;
  font-weight: 650;
}

.uc-buy-btn {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--text-inverse);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(var(--ocean-cyan-rgb), .3);
  transition: all var(--transition-base);
  border: none;
  border-radius: 100px;
  padding: 7px 15px;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
}

.uc-buy-btn:hover {
  box-shadow: 0 6px 16px rgba(var(--ocean-cyan-rgb), .4);
  transform: scale(1.05);
}

.uc-status {
  border-radius: 100px;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  font-size: .68rem;
  font-weight: 600;
  display: inline-flex;
}

.uc-status:before {
  content: "";
  background: currentColor;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.uc-empty {
  text-align: center;
  padding: 32px 20px;
}

.uc-empty-icon {
  background: linear-gradient(135deg, rgba(var(--ocean-cyan-rgb), .08), rgba(var(--neon-glow-rgb), .04));
  border: 1px solid rgba(var(--ocean-cyan-rgb), .1);
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  display: inline-flex;
}

.uc-empty-title {
  color: var(--text-tertiary);
  margin-bottom: 5px;
  font-size: .96rem;
  font-weight: 600;
}

.uc-empty-desc {
  color: var(--text-placeholder);
  font-size: .78rem;
}

.uc-loading {
  text-align: center;
  color: var(--text-placeholder);
  padding: 32px 20px;
  font-size: .8rem;
}

.uc-loading-dot {
  background: var(--ocean-light);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin: 0 2px;
  animation: 1.4s ease-in-out infinite both ucDotBounce;
  display: inline-block;
}

.uc-loading-dot:first-child {
  animation-delay: -.32s;
}

.uc-loading-dot:nth-child(2) {
  animation-delay: -.16s;
}

@keyframes ucDotBounce {
  0%, 80%, 100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

.uc-field {
  margin-bottom: 14px;
}

.uc-field:last-child {
  margin-bottom: 0;
}

.uc-label {
  color: var(--text-primary);
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: .74rem;
  font-weight: 600;
  display: flex;
}

.uc-input-wrap {
  align-items: center;
  display: flex;
  position: relative;
}

.uc-input {
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  width: 100%;
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  color: var(--text-primary);
  transition: all var(--transition-base);
  outline: none;
  padding: 9px 12px;
  font-family: inherit;
  font-size: .85rem;
}

.uc-input::placeholder {
  color: var(--text-placeholder);
}

.uc-input:focus {
  border-color: var(--neon-glow);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  box-shadow: 0 0 0 3px rgba(var(--neon-glow-rgb), .1);
}

.uc-input.error {
  border-color: rgba(var(--error-rgb), .55);
  box-shadow: 0 0 0 3px rgba(var(--error-rgb), .1);
}

.uc-input-toggle {
  width: 26px;
  height: 26px;
  color: var(--text-placeholder);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: none;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: absolute;
  right: 8px;
}

.uc-input-toggle:hover {
  color: var(--ocean-light);
  background: rgba(var(--ocean-cyan-rgb), .08);
}

.uc-helper {
  color: var(--text-placeholder);
  margin-top: 5px;
  font-size: .68rem;
  line-height: 1.5;
}

.uc-helper.error {
  color: var(--error);
}

.uc-alert {
  border-radius: var(--radius-sm);
  border: 1px solid;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  font-size: .74rem;
  line-height: 1.5;
  display: flex;
}

.uc-alert.success {
  background: rgba(var(--success-rgb), .1);
  border-color: rgba(var(--success-rgb), .3);
  color: var(--success);
}

.uc-alert.error {
  background: rgba(var(--error-rgb), .1);
  border-color: rgba(var(--error-rgb), .3);
  color: var(--error);
}

.uc-strength {
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  display: flex;
}

.uc-strength-bar {
  background: rgba(var(--ocean-deep-rgb), .08);
  border-radius: 100px;
  flex: 1;
  height: 4px;
  overflow: hidden;
}

.uc-strength-fill {
  height: 100%;
  transition: all var(--transition-base);
  border-radius: 100px;
}

.uc-strength-label {
  text-align: right;
  min-width: 32px;
  font-size: .64rem;
  font-weight: 600;
}

.uc-submit-btn {
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  width: 100%;
  height: 40px;
  color: var(--text-inverse);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(var(--ocean-cyan-rgb), .3);
  transition: all var(--transition-base);
  border: none;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  display: inline-flex;
}

.uc-submit-btn:hover:not(:disabled) {
  box-shadow: 0 8px 20px rgba(var(--ocean-cyan-rgb), .4);
  transform: translateY(-1px);
}

.uc-submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.uc-submit-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.uc-info-row {
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .25);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding: 10px 14px;
  font-size: .74rem;
  display: flex;
}

.uc-info-row:last-child {
  margin-bottom: 0;
}

.uc-info-row-label {
  color: var(--text-placeholder);
  font-weight: 600;
}

.uc-info-row-value {
  color: var(--text-primary);
  align-items: center;
  gap: 5px;
  font-weight: 600;
  display: inline-flex;
}

.uc-spin {
  animation: .8s linear infinite yx-spin;
}

.uc-contact-dialog {
  width: calc(100% - 2rem);
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .15), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .55), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .18), 0 20px 60px rgba(var(--ocean-deep-rgb), .2);
  color: var(--text-primary);
  animation: ucContactIn var(--dur-3) var(--ease-out-back);
  background: var(--surface-glass-strong) !important;
  border: none !important;
  border-radius: 20px !important;
  max-width: 640px !important;
  padding: 24px !important;
}

@keyframes ucContactIn {
  from {
    opacity: 0;
    transform: translateY(8px)scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.uc-contact-dialog-title {
  color: var(--text-secondary);
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
}

.uc-contact-dialog-desc {
  color: var(--text-placeholder);
  margin-top: -4px;
  font-size: .72rem;
}

.uc-contact-dialog-columns {
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  display: flex;
}

.uc-contact-dialog-col {
  flex-direction: column;
  flex: 1 1 0;
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.uc-contact-dialog-col-title {
  color: var(--text-secondary);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12);
  border: none;
  border-radius: 100px;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: .78rem;
  font-weight: 600;
  display: inline-flex;
}

@media (max-width: 560px) {
  .uc-contact-dialog-columns {
    flex-direction: column;
    gap: 20px;
  }
}

.uc-contact-dialog-loading {
  color: var(--text-secondary);
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 32px 0;
  font-size: .78rem;
  display: flex;
}

.uc-contact-dialog-empty {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 28px 0;
  display: flex;
}

.uc-contact-dialog-empty-icon {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  width: 48px;
  height: 48px;
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .15);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.uc-contact-dialog-empty-title {
  color: var(--text-secondary);
  font-size: .82rem;
  font-weight: 600;
}

.uc-contact-dialog-empty-desc {
  color: var(--text-placeholder);
  font-size: .7rem;
}

.uc-contact-dialog-qr-wrap {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  box-shadow: 0 8px 24px rgba(var(--ocean-cyan-rgb), .2);
  border-radius: 16px;
  width: fit-content;
  margin: 0 auto;
  padding: 8px;
}

.uc-contact-dialog-qr {
  object-fit: cover;
  background: var(--yue-ui-white);
  border-radius: 10px;
  width: 220px;
  height: 220px;
  display: block;
}

.uc-contact-dialog-qr-placeholder {
  background: rgba(var(--glass-bg-rgb), .5);
  width: 220px;
  height: 220px;
  color: var(--text-placeholder);
  text-align: center;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  font-size: .72rem;
  display: flex;
}

.uc-contact-dialog-wechat {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  max-width: 100%;
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12);
  border: none;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  padding: 8px 12px;
  display: flex;
}

.uc-contact-dialog-wechat-label {
  color: var(--text-placeholder);
  font-size: .72rem;
}

.uc-contact-dialog-wechat-id {
  color: var(--text-primary);
  font-size: .78rem;
  font-weight: 600;
}

.uc-contact-dialog-copy-btn {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--text-inverse);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(var(--ocean-cyan-rgb), .3);
  transition: all var(--transition-fast);
  border: none;
  border-radius: 100px;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: .66rem;
  font-weight: 600;
  display: inline-flex;
}

.uc-contact-dialog-copy-btn:hover {
  transform: scale(1.05);
}

.uc-contact-dialog-divider {
  background: linear-gradient(90deg, transparent, rgba(var(--glass-tint-rgb), .25), transparent);
  height: 1px;
  margin: 16px 8px 12px;
}

.uc-contact-dialog-group {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  display: flex;
}

.uc-contact-dialog-group-label {
  color: var(--text-secondary);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12);
  border: none;
  border-radius: 100px;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: .72rem;
  font-weight: 600;
  display: inline-flex;
}

.uc-contact-dialog-custom-text {
  color: var(--text-secondary);
  text-align: center;
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .7));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12);
  word-break: break-word;
  border: none;
  border-radius: 12px;
  margin-top: 12px;
  padding: 8px 12px;
  font-size: .74rem;
  line-height: 1.5;
}

.uc-contact-dialog-hint {
  color: var(--text-placeholder);
  text-align: center;
  background: rgba(var(--ocean-cyan-rgb), .06);
  border-radius: 8px;
  margin-top: 10px;
  padding: 6px 10px;
  font-size: .68rem;
}

.uc-contact-dialog-apply {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  display: flex;
}

.uc-contact-dialog-apply-btn {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--text-inverse);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--ocean-cyan-rgb), .35);
  transition: all var(--transition-fast);
  border: none;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  display: inline-flex;
}

.uc-contact-dialog-apply-btn:hover {
  transform: scale(1.03);
}

.uc-apply-withdraw-dialog {
  width: calc(100% - 2rem);
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .15), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .55), 0 20px 60px rgba(var(--ocean-deep-rgb), .2);
  color: var(--text-primary);
  background: var(--surface-glass-strong) !important;
  border: none !important;
  border-radius: 20px !important;
  max-width: 460px !important;
}

.uc-apply-withdraw-balance {
  color: var(--ocean-primary);
  background: rgba(var(--ocean-cyan-rgb), .07);
  border-radius: 10px;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  font-size: .76rem;
  font-weight: 600;
  display: flex;
}

.uc-apply-withdraw-error {
  color: var(--error, #dc2626);
  background: rgba(var(--error-rgb, 220, 38, 38), .08);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: .76rem;
}

.uc-apply-withdraw-label {
  color: var(--label-secondary);
  margin-bottom: 6px;
  font-size: .74rem;
  font-weight: 600;
  display: block;
}

.uc-apply-withdraw-tip {
  color: var(--text-placeholder);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .7));
  border-radius: 10px;
  padding: 9px 12px;
  font-size: .7rem;
  line-height: 1.5;
}

.uc-profile-body {
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

@media (max-width: 600px) {
  .uc-profile-body {
    flex-direction: column;
    align-items: center;
  }
}

.uc-profile-avatar-section {
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  display: flex;
}

.uc-profile-avatar-wrap {
  cursor: pointer;
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  width: 96px;
  height: 96px;
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: inset 0 0 0 2px rgba(var(--glass-tint-rgb), .18), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .25), 0 4px 16px rgba(var(--ocean-deep-rgb), .08);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.uc-profile-avatar-wrap:hover {
  box-shadow: inset 0 0 0 2px rgba(var(--neon-glow-rgb), .4), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .3), 0 6px 20px rgba(var(--ocean-deep-rgb), .12);
  transform: scale(1.04);
}

.uc-profile-avatar-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.uc-profile-avatar-fallback {
  width: 100%;
  height: 100%;
  color: var(--text-primary);
  background: linear-gradient(135deg, rgba(var(--ocean-cyan-rgb), .15), rgba(var(--neon-glow-rgb), .1));
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-size: 2.2rem;
  font-weight: 650;
  display: flex;
}

.uc-profile-avatar-overlay {
  background: rgba(var(--ocean-deep-rgb), .45);
  color: var(--text-inverse);
  opacity: 0;
  transition: opacity var(--transition-base);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.uc-profile-avatar-wrap:hover .uc-profile-avatar-overlay {
  opacity: 1;
}

.uc-profile-avatar-spinner {
  width: 22px;
  height: 22px;
  animation: .8s linear infinite yx-spin;
}

.uc-profile-avatar-hint {
  color: var(--text-placeholder);
  text-align: center;
  max-width: 120px;
  font-size: .66rem;
  line-height: 1.5;
}

.uc-profile-fields {
  flex-direction: column;
  flex: 1;
  gap: 16px;
  min-width: 0;
  display: flex;
}

.uc-profile-field {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.uc-profile-field-label {
  color: var(--text-primary);
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  font-weight: 600;
  display: flex;
}

.uc-profile-field-display {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.uc-profile-field-value {
  color: var(--text-primary);
  font-size: .85rem;
  font-weight: 500;
}

.uc-profile-edit-link {
  color: var(--ocean-light);
  cursor: pointer;
  background: rgba(var(--ocean-cyan-rgb), .08);
  transition: all var(--transition-fast);
  border: none;
  border-radius: 100px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
}

.uc-profile-edit-link:hover {
  background: rgba(var(--ocean-cyan-rgb), .16);
  color: var(--ocean-cyan);
}

.uc-profile-field-edit {
  align-items: center;
  gap: 6px;
  display: flex;
}

.uc-profile-input {
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  color: var(--text-primary);
  transition: all var(--transition-base);
  outline: none;
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font-family: inherit;
  font-size: .85rem;
}

.uc-profile-input::placeholder {
  color: var(--text-placeholder);
}

.uc-profile-input:focus {
  border-color: var(--neon-glow);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  box-shadow: 0 0 0 3px rgba(var(--neon-glow-rgb), .1);
}

.uc-profile-btn {
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  display: inline-flex;
}

.uc-profile-btn.save {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--text-inverse);
  box-shadow: 0 2px 8px rgba(var(--ocean-cyan-rgb), .25);
}

.uc-profile-btn.save:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(var(--ocean-cyan-rgb), .35);
  transform: translateY(-1px);
}

.uc-profile-btn.cancel {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  color: var(--text-placeholder);
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12);
}

.uc-profile-btn.cancel:hover:not(:disabled) {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  color: var(--text-primary);
}

.uc-profile-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.uc-profile-btn-spinner {
  width: 14px;
  height: 14px;
  animation: .8s linear infinite yx-spin;
}

.uc-profile-phone-edit {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.uc-profile-phone-inputs {
  align-items: center;
  gap: 6px;
  display: flex;
}

.uc-profile-code-input {
  flex: 0 0 100px;
}

.uc-profile-send-btn {
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-light);
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12);
  transition: all var(--transition-fast);
  white-space: nowrap;
  border: none;
  flex-shrink: 0;
  padding: 8px 14px;
  font-family: inherit;
  font-size: .74rem;
  font-weight: 600;
}

.uc-profile-send-btn:hover:not(:disabled) {
  background: rgba(var(--ocean-cyan-rgb), .12);
  color: var(--ocean-cyan);
}

.uc-profile-send-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.uc-profile-phone-actions {
  gap: 6px;
  display: flex;
}

@media (max-width: 720px) {
  .uc-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .uc-body {
    flex-direction: column;
  }

  .uc-nav {
    background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
    width: 100%;
    -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
    backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
    box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .18);
    border-radius: 12px;
    flex-direction: row;
    padding: 4px;
    overflow-x: auto;
  }

  .uc-nav-group, .uc-nav-divider {
    display: none;
  }

  .uc-nav-item, .uc-nav-logout {
    white-space: nowrap;
    flex: none;
    justify-content: flex-start;
  }

  .uc-nav-item {
    border-radius: 10px;
    padding: 8px 12px;
  }

  .uc-nav-item.active {
    border-radius: 10px;
  }
}

.uc-crop-overlay {
  z-index: 2147483646;
  background: rgba(var(--ocean-deep-rgb), .55);
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  animation: ucCropFadeIn var(--dur-2) var(--ease-out-expo);
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

@keyframes ucCropFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.uc-crop-modal {
  border-radius: var(--radius-xl);
  background: var(--surface-glass-strong);
  width: 460px;
  max-width: calc(100vw - 32px);
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .6), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .2), 0 24px 80px rgba(var(--ocean-deep-rgb), .25);
  animation: ucCropModalIn var(--dur-3) var(--ease-out-back);
  overflow: hidden;
}

@keyframes ucCropModalIn {
  from {
    opacity: 0;
    transform: scale(.92)translateY(12px);
  }

  to {
    opacity: 1;
    transform: scale(1)translateY(0);
  }
}

.uc-crop-header {
  border-bottom: 1px solid rgba(var(--ocean-deep-rgb), .06);
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  display: flex;
}

.uc-crop-title {
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 600;
  display: flex;
}

.uc-crop-close {
  background: rgba(var(--ocean-deep-rgb), .04);
  width: 32px;
  height: 32px;
  color: var(--text-placeholder);
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.uc-crop-close:hover {
  background: rgba(var(--ocean-deep-rgb), .08);
  color: var(--text-primary);
  transform: rotate(90deg);
}

.uc-crop-body {
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
}

.uc-crop-area {
  background: rgba(var(--ocean-deep-rgb), .08);
  cursor: grab;
  box-shadow: inset 0 0 0 2px rgba(var(--glass-tint-rgb), .12);
  -webkit-user-select: none;
  user-select: none;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.uc-crop-area:active {
  cursor: grabbing;
}

.uc-crop-image {
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform;
  max-width: none;
  position: absolute;
  top: 0;
  left: 0;
}

.uc-crop-grid {
  pointer-events: none;
  background-image: linear-gradient(rgba(var(--glass-tint-rgb), .15) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--glass-tint-rgb), .15) 1px, transparent 1px);
  z-index: 2;
  background-size: 33.33% 33.33%;
  position: absolute;
  inset: 0;
}

.uc-crop-ring {
  border: 2px solid rgba(var(--neon-glow-rgb), .35);
  pointer-events: none;
  box-shadow: 0 0 24px rgba(var(--neon-glow-rgb), .12);
  z-index: 3;
  border-radius: 18px;
  position: absolute;
  inset: -2px;
}

.uc-crop-controls {
  border-top: 1px solid rgba(var(--ocean-deep-rgb), .06);
  flex-direction: column;
  gap: 14px;
  padding: 14px 20px 18px;
  display: flex;
}

.uc-crop-zoom-row {
  align-items: center;
  gap: 10px;
  display: flex;
}

.uc-crop-slider {
  appearance: none;
  background: rgba(var(--ocean-light-rgb), .12);
  cursor: pointer;
  border-radius: 100px;
  outline: none;
  flex: 1;
  height: 4px;
}

.uc-crop-slider::-webkit-slider-thumb {
  appearance: none;
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  cursor: pointer;
  width: 16px;
  height: 16px;
  box-shadow: 0 2px 8px rgba(var(--ocean-cyan-rgb), .35), 0 0 0 3px rgba(var(--glass-tint-rgb), .5);
  transition: transform var(--transition-quick);
  border-radius: 50%;
}

.uc-crop-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.uc-crop-slider::-moz-range-thumb {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  cursor: pointer;
  width: 16px;
  height: 16px;
  box-shadow: 0 2px 8px rgba(var(--ocean-cyan-rgb), .35), 0 0 0 3px rgba(var(--glass-tint-rgb), .5);
  border: none;
  border-radius: 50%;
}

.uc-crop-actions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  display: flex;
}

.uc-crop-btn.reupload {
  background: rgba(var(--ocean-light-rgb), .1);
  color: var(--ocean-light);
  box-shadow: inset 0 0 0 1px rgba(var(--ocean-light-rgb), .2);
}

.uc-crop-btn.reupload:hover {
  background: rgba(var(--ocean-light-rgb), .16);
}

.uc-crop-btn {
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
  border-radius: 100px;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  display: inline-flex;
}

.uc-crop-btn.cancel {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  color: var(--text-placeholder);
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12);
}

.uc-crop-btn.cancel:hover {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  color: var(--text-primary);
}

.uc-crop-btn.confirm {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--text-inverse);
  box-shadow: 0 4px 16px rgba(var(--ocean-cyan-rgb), .3);
}

.uc-crop-btn.confirm:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(var(--ocean-cyan-rgb), .4);
  transform: translateY(-1px);
}

.uc-crop-btn.confirm:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.checkin-panel {
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-height: 0;
  padding: 2px 0;
  display: flex;
}

.checkin-header {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.checkin-welcome {
  width: 100%;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-2) var(--transition-bouncy), box-shadow var(--dur-2) ease;
  background: linear-gradient(135deg, #f5b24424, #ffd18012);
  border: 1px solid #f5b24473;
  border-radius: 11px;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.checkin-welcome > svg {
  color: #f5b244;
  filter: drop-shadow(0 0 5px #f5b24480);
  flex-shrink: 0;
}

.checkin-welcome:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px #f5b24438;
}

.checkin-welcome:active:not(:disabled) {
  transform: translateY(0);
}

.checkin-welcome:disabled {
  cursor: wait;
  opacity: .75;
}

.checkin-welcome-texts {
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.checkin-welcome-title {
  letter-spacing: .4px;
  color: #f5b244;
  font-size: 11px;
  font-weight: 700;
}

.checkin-welcome-amount {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}

.checkin-welcome-cta {
  color: var(--yue-ui-white);
  background: linear-gradient(135deg, #f5b244, #e89128);
  border-radius: 100px;
  flex-shrink: 0;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 2px 8px #e8912859;
}

.checkin-welcome-glow {
  pointer-events: none;
  background: linear-gradient(105deg, #0000, #ffffff29, #0000);
  width: 40%;
  height: 100%;
  animation: 2.6s ease-in-out infinite checkinWelcomeGlow;
  position: absolute;
  top: 0;
  left: -60%;
}

@keyframes checkinWelcomeGlow {
  0% {
    left: -60%;
  }

  60%, 100% {
    left: 130%;
  }
}

.checkin-welcome.highlight {
  animation: 1.6s ease-in-out infinite checkinWelcomePulse;
}

@keyframes checkinWelcomePulse {
  0%, 100% {
    box-shadow: 0 0 #f5b24473;
  }

  50% {
    box-shadow: 0 0 0 6px #f5b24400;
  }
}

.checkin-title {
  color: var(--text-primary);
  letter-spacing: .3px;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.checkin-title svg {
  color: var(--ocean-cyan);
  filter: drop-shadow(0 0 4px rgba(var(--ocean-cyan-rgb), .35));
}

.checkin-streak {
  color: var(--ocean-light);
  background: rgba(var(--ocean-cyan-rgb), .08);
  border: 1px solid rgba(var(--ocean-cyan-rgb), .12);
  border-radius: 100px;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
}

.checkin-streak svg {
  color: var(--yue-ui-orange-500);
}

.checkin-calendar {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.checkin-weekdays {
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  display: grid;
}

.checkin-weekdays span {
  text-align: center;
  color: var(--text-placeholder);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.6;
}

.checkin-days {
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  display: grid;
}

.checkin-day {
  aspect-ratio: 1;
  color: var(--text-tertiary);
  transition: all var(--dur-2) var(--transition-bouncy);
  background: none;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  display: flex;
  position: relative;
}

.checkin-day.blank {
  visibility: hidden;
}

.checkin-day:not(.blank) {
  cursor: default;
}

.checkin-day:hover:not(.blank) {
  background: rgba(var(--ocean-cyan-rgb), .05);
}

.checkin-day-num {
  z-index: 1;
  font-weight: 500;
  position: relative;
}

.checkin-day.checked {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--yue-ui-white);
  box-shadow: 0 2px 8px rgba(var(--ocean-cyan-rgb), .25);
  font-weight: 600;
}

.checkin-day.checked .checkin-day-num {
  text-shadow: 0 1px 2px rgba(var(--yue-ui-black-rgb), .15);
}

.checkin-day-dot {
  background: rgba(var(--yue-ui-white-rgb), .85);
  border-radius: 50%;
  width: 3px;
  height: 3px;
  position: absolute;
  bottom: 2px;
}

.checkin-day.today:not(.checked) {
  box-shadow: inset 0 0 0 1.5px rgba(var(--ocean-cyan-rgb), .6);
  color: var(--ocean-light);
  font-weight: 600;
}

.checkin-day.today.checked {
  box-shadow: 0 0 0 2px rgba(var(--ocean-cyan-rgb), .25), 0 2px 8px rgba(var(--ocean-cyan-rgb), .25);
}

.checkin-btn {
  letter-spacing: .4px;
  cursor: pointer;
  width: 100%;
  height: 32px;
  color: var(--yue-ui-white);
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  box-shadow: 0 3px 12px rgba(var(--ocean-cyan-rgb), .3);
  transition: all var(--dur-3) var(--transition-bouncy);
  border: none;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  position: relative;
  overflow: hidden;
}

.checkin-btn:hover:not(:disabled) {
  box-shadow: 0 5px 20px rgba(var(--ocean-cyan-rgb), .42);
  transform: translateY(-1px);
}

.checkin-btn:active:not(:disabled) {
  transform: translateY(0)scale(.97);
}

.checkin-btn:disabled {
  cursor: not-allowed;
}

.checkin-btn svg, .checkin-btn span {
  z-index: 2;
  position: relative;
}

.checkin-btn-spin {
  animation: 1s linear infinite checkinSpin;
}

@keyframes checkinSpin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.checkin-btn-ripple {
  pointer-events: none;
  border-radius: 100px;
  position: absolute;
  inset: 0;
}

.checkin-btn:active .checkin-btn-ripple {
  background: radial-gradient(circle at 50% 50%, rgba(var(--yue-ui-white-rgb), .35) 0%, transparent 70%);
  animation: checkinRipple var(--dur-4) ease-out forwards;
}

@keyframes checkinRipple {
  from {
    opacity: 1;
    transform: scale(.4);
  }

  to {
    opacity: 0;
    transform: scale(1.6);
  }
}

.checkin-btn.loading {
  background: rgba(var(--text-tertiary-rgb), .15);
  color: var(--text-tertiary);
  box-shadow: none;
  cursor: default;
  animation: none;
}

.checkin-btn.checked {
  background: linear-gradient(135deg, var(--yue-ui-green-bright), var(--yue-ui-green-600));
  box-shadow: 0 3px 12px rgba(var(--yue-ui-green-bright-rgb), .25);
  cursor: default;
  animation: none;
}

.checkin-btn.disabled {
  background: rgba(var(--text-tertiary-rgb), .12);
  color: var(--text-placeholder);
  box-shadow: none;
  cursor: not-allowed;
  animation: none;
}

.checkin-stats {
  border-top: 1px solid rgba(var(--text-tertiary-rgb), .1);
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  display: flex;
}

.checkin-stat {
  align-items: center;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.checkin-stat svg {
  color: var(--ocean-light);
  flex-shrink: 0;
}

.checkin-stat-label {
  color: var(--text-placeholder);
  white-space: nowrap;
  font-size: 10px;
}

.checkin-stat-value {
  color: var(--text-primary);
  white-space: nowrap;
  letter-spacing: .2px;
  font-size: 12px;
  font-weight: 600;
}

.uc-billing-empty {
  text-align: center;
  color: var(--text-placeholder);
  padding: 28px 0;
  font-size: 12px;
}

.uc-billing-row {
  transition: background var(--transition-fast);
  border-radius: 10px;
  padding: 8px 10px;
}

.uc-billing-row:hover {
  background: rgba(var(--ocean-cyan-rgb), .06);
}

.uc-billing-viewall {
  border-top: 1px solid rgba(var(--glass-tint-rgb), .12);
  color: var(--ocean-light);
  transition: color var(--transition-fast);
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 9px 0 2px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.uc-billing-viewall:hover {
  color: var(--accent);
}

.billing-drawer-root {
  z-index: 220;
  position: fixed;
  inset: 0;
}

.billing-drawer-mask {
  background: rgba(var(--ocean-deep-rgb), .32);
  animation: fadeIn var(--dur-2, .16s) ease both;
  cursor: default;
  position: absolute;
  inset: 0;
}

.billing-drawer-panel {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .92));
  width: 380px;
  max-width: calc(100vw - 24px);
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .14), 0 18px 48px rgba(var(--ocean-deep-rgb), .28);
  animation: billingDrawerIn var(--dur-3, .22s) var(--ease-out-expo) both;
  border-radius: 18px;
  flex-direction: column;
  display: flex;
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 12px;
}

@keyframes billingDrawerIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.billing-drawer-head {
  border-bottom: 1px solid rgba(var(--glass-tint-rgb), .12);
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 10px;
  display: flex;
}

.billing-drawer-title {
  color: var(--text-primary);
  align-items: center;
  gap: 7px;
  font-size: .92rem;
  font-weight: 700;
  display: flex;
}

.billing-drawer-close {
  width: 26px;
  height: 26px;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.billing-drawer-close:hover {
  background: rgba(var(--glass-tint-rgb), .1);
  color: var(--text-primary);
}

.billing-drawer-body {
  flex: 1;
  min-height: 0;
  padding: 8px 14px 14px;
}

.uc-billing-wrap {
  height: 460px;
}

.const-wall {
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: inset 0 1px 0 0 rgba(var(--yue-constellation-gold-rgb), .08), inset 0 -1px 0 0 rgba(var(--yue-ui-black-rgb), .3), 0 8px 32px rgba(var(--yue-ui-black-rgb), .4), 0 0 60px rgba(var(--yue-constellation-gold-rgb), .03);
  border: 1px solid rgba(var(--yue-constellation-gold-rgb), .08);
  background: linear-gradient(145deg, #0c1220eb 0%, #141c30e0 50%, #080c18f0 100%);
  border-radius: 14px;
  flex-direction: column;
  flex: 1;
  padding: 14px 16px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.const-wall-bg {
  display: none;
}

.const-wall-particle {
  left: var(--p-x);
  top: var(--p-y);
  width: var(--p-size);
  height: var(--p-size);
  background: radial-gradient(circle, rgba(var(--yue-constellation-gold-rgb), .6), rgba(var(--yue-constellation-gold-rgb), 0));
  opacity: var(--p-opacity);
  filter: blur(.5px);
  border-radius: 50%;
  position: absolute;
}

.const-wall-header {
  z-index: 2;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
  position: relative;
}

.const-wall-title {
  color: var(--yue-constellation-gold);
  letter-spacing: 1px;
  align-items: center;
  gap: 6px;
  font-size: .95rem;
  font-weight: 650;
  display: flex;
}

.const-wall-title-icon {
  color: var(--yue-constellation-gold);
}

.const-wall-subtitle {
  color: rgba(var(--yue-constellation-gold-rgb), .5);
  letter-spacing: .5px;
  margin-left: 2px;
  font-size: .62rem;
  font-weight: 500;
}

.const-wall-discount-display {
  background: rgba(var(--yue-constellation-gold-rgb), .08);
  border: 1px solid rgba(var(--yue-constellation-gold-rgb), .2);
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  display: flex;
}

.const-wall-discount-main {
  align-items: baseline;
  gap: 4px;
  display: flex;
}

.const-wall-discount-percent {
  color: var(--tier-color, var(--yue-constellation-gold));
  text-shadow: 0 0 16px var(--tier-glow, rgba(var(--yue-constellation-gold-rgb), .5));
  letter-spacing: -.5px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
}

.const-wall-discount-label {
  color: rgba(var(--yue-constellation-white-rgb), .5);
  letter-spacing: .5px;
  font-size: .62rem;
  font-weight: 600;
}

.const-wall-discount-tier {
  border-left: 1px solid rgba(var(--yue-constellation-gold-rgb), .2);
  align-items: center;
  gap: 4px;
  padding-left: 10px;
  display: flex;
}

.const-wall-discount-tier-icon {
  font-size: .9rem;
}

.const-wall-discount-tier-name {
  color: var(--tier-color, var(--yue-constellation-gold));
  font-size: .75rem;
  font-weight: 600;
}

.const-wall-progress-section {
  z-index: 2;
  margin-bottom: 12px;
  position: relative;
}

.const-wall-progress-track {
  background: rgba(var(--yue-constellation-white-rgb), .06);
  border-radius: 2px;
  height: 4px;
  position: relative;
  overflow: hidden;
}

.const-wall-progress-fill {
  background: linear-gradient(90deg, var(--yue-constellation-gold), var(--yue-constellation-orange), var(--yue-constellation-gold));
  height: 100%;
  transition: width 1s var(--ease-pro);
  background-size: 200% 100%;
  border-radius: 2px;
  position: relative;
}

.const-wall-progress-glow {
  display: none;
}

.const-wall-progress-text {
  color: rgba(var(--yue-constellation-white-rgb), .5);
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: .65rem;
  display: flex;
}

.const-wall-next-hint {
  color: var(--yue-constellation-gold);
  font-weight: 600;
}

.const-wall-grid {
  z-index: 2;
  flex: 1;
  grid-template-columns: repeat(9, 1fr);
  align-content: center;
  gap: 8px;
  display: grid;
  position: relative;
}

.const-card {
  aspect-ratio: 1;
  perspective: 400px;
  cursor: pointer;
  max-height: 90px;
  transform-style: preserve-3d;
  transition: transform var(--dur-3) var(--ease-pro);
  position: relative;
}

.const-card:hover {
  z-index: 10;
  transform: scale(1.08);
}

.const-card:active {
  transform: scale(.96);
}

.const-card-front, .const-card-back {
  backface-visibility: hidden;
  transition: all var(--dur-3) var(--ease-pro);
  border: 1.5px solid #0000;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 4px;
  display: flex;
  position: absolute;
  inset: 0;
}

.const-card:not(.unlocked) .const-card-front {
  border-color: rgba(var(--yue-constellation-white-rgb), .05);
  box-shadow: inset 0 1px 0 rgba(var(--yue-constellation-white-rgb), .03);
  background: linear-gradient(145deg, #1e2332cc 0%, #141928e6 100%);
}

.const-card:not(.unlocked) .const-card-front:hover {
  border-color: rgba(var(--yue-constellation-white-rgb), .12);
  box-shadow: 0 0 15px rgba(var(--yue-constellation-white-rgb), .05);
}

.const-card.unlocked .const-card-front {
  border-color: var(--tier-color, var(--yue-constellation-gold));
  box-shadow: 0 0 15px var(--tier-glow, rgba(var(--yue-constellation-gold-rgb), .2)), inset 0 1px 0 rgba(var(--yue-constellation-gold-rgb), .1);
  background: linear-gradient(145deg, #282314e6 0%, #1e1c0ff2 100%);
}

.const-card.current .const-card-front {
  border-color: var(--yue-constellation-gold);
  box-shadow: 0 0 20px rgba(var(--yue-constellation-gold-rgb), .4), 0 0 40px rgba(var(--yue-constellation-gold-rgb), .1), inset 0 1px 0 rgba(var(--yue-constellation-gold-rgb), .2);
  background: linear-gradient(145deg, #3c3214f2 0%, #2d260ffa 100%);
}

.const-card.next:not(.unlocked) .const-card-front {
  border-color: rgba(var(--yue-constellation-gold-rgb), .3);
  background: linear-gradient(145deg, #282319b3 0%, #1e1c14cc 100%);
}

.const-card-back {
  border-color: rgba(var(--yue-constellation-gold-rgb), .2);
  background: linear-gradient(145deg, #191e2df2 0%, #0f1423fa 100%);
  padding: 6px;
  transform: rotateY(180deg);
}

.const-card.flipped {
  transform: rotateY(180deg);
}

.const-card.flipped .const-card-front {
  opacity: 0;
  pointer-events: none;
}

.const-card.flipped .const-card-back {
  opacity: 1;
  pointer-events: auto;
}

.const-card-icon-wrap {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
  display: flex;
}

.const-card.unlocked .const-card-icon-wrap {
  background: radial-gradient(circle, var(--tier-glow, rgba(var(--yue-constellation-gold-rgb), .3)) 0%, transparent 70%);
}

.const-card-icon {
  color: var(--tier-color, var(--yue-constellation-gold));
  font-size: 1rem;
}

.const-card-lock {
  color: rgba(var(--yue-constellation-white-rgb), .2);
}

.const-card-name {
  color: rgba(var(--yue-constellation-white-rgb), .4);
  letter-spacing: .3px;
  font-size: .65rem;
  font-weight: 600;
}

.const-card.unlocked .const-card-name {
  color: var(--tier-color, var(--yue-constellation-gold));
  text-shadow: 0 0 6px var(--tier-glow, rgba(var(--yue-constellation-gold-rgb), .4));
}

.const-card.current .const-card-name {
  color: var(--yue-constellation-gold);
}

.const-card-threshold {
  color: rgba(var(--yue-constellation-white-rgb), .25);
  font-size: .58rem;
}

.const-card.unlocked .const-card-threshold {
  color: rgba(var(--yue-constellation-gold-rgb), .5);
}

.const-card-discount {
  color: var(--yue-constellation-green);
  background: #4ade8026;
  border-radius: 6px;
  margin-top: 2px;
  padding: 1px 6px;
  font-size: .58rem;
  font-weight: 650;
}

.const-card-next-badge {
  color: var(--yue-constellation-gold);
  background: rgba(var(--yue-constellation-gold-rgb), .15);
  border-radius: 6px;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  padding: 1px 6px;
  font-size: .52rem;
  font-weight: 600;
  display: flex;
}

.const-card-back-title {
  color: var(--yue-constellation-gold);
  margin-bottom: 4px;
  font-size: .68rem;
  font-weight: 650;
}

.const-card-back-desc {
  flex-direction: column;
  gap: 3px;
  width: 100%;
  display: flex;
}

.const-card-back-row {
  color: rgba(var(--yue-constellation-white-rgb), .4);
  justify-content: space-between;
  font-size: .54rem;
  display: flex;
}

.const-card-back-highlight {
  color: var(--yue-constellation-green);
  font-weight: 600;
}

.const-card-back-warn {
  color: var(--yue-ui-amber-400);
  font-weight: 600;
}

.const-card-particles {
  pointer-events: none;
  z-index: 5;
  position: absolute;
  inset: -6px;
}

.const-card-particle {
  left: var(--p-x);
  top: var(--p-y);
  width: var(--p-size);
  height: var(--p-size);
  background: radial-gradient(circle, rgba(var(--yue-constellation-gold-rgb), .8), rgba(var(--yue-constellation-gold-rgb), 0));
  filter: blur(.5px);
  border-radius: 50%;
  position: absolute;
}

.const-wall-savings {
  z-index: 2;
  border-radius: 12px;
  margin-top: 12px;
  position: relative;
  overflow: hidden;
}

.const-wall-savings-bg {
  background: linear-gradient(135deg, rgba(var(--yue-constellation-gold-rgb), .06) 0%, rgba(var(--yue-constellation-orange-rgb), .03) 50%, rgba(var(--yue-constellation-gold-rgb), .06) 100%);
  border: 1px solid rgba(var(--yue-constellation-gold-rgb), .12);
  border-radius: 12px;
  position: absolute;
  inset: 0;
}

.const-wall-savings-content {
  z-index: 1;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  display: flex;
  position: relative;
}

.const-wall-savings-icon-wrap {
  background: radial-gradient(circle, rgba(var(--yue-constellation-gold-rgb), .2) 0%, rgba(var(--yue-constellation-gold-rgb), .05) 70%);
  border: 1px solid rgba(var(--yue-constellation-gold-rgb), .15);
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
}

.const-wall-savings-icon {
  color: var(--yue-constellation-gold);
}

.const-wall-savings-info {
  flex-direction: column;
  flex-shrink: 0;
  gap: 1px;
  display: flex;
}

.const-wall-savings-label {
  color: rgba(var(--yue-constellation-white-rgb), .5);
  letter-spacing: .5px;
  font-size: .65rem;
  font-weight: 500;
}

.const-wall-savings-value {
  color: var(--yue-constellation-gold);
  letter-spacing: -.5px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.1;
}

.const-wall-savings-unit {
  color: rgba(var(--yue-constellation-gold-rgb), .6);
  margin-left: 3px;
  font-size: .7rem;
  font-weight: 600;
}

.const-wall-savings-desc {
  color: rgba(var(--yue-constellation-white-rgb), .4);
  text-align: right;
  flex: 1;
  min-width: 0;
  font-size: .62rem;
  font-weight: 500;
  line-height: 1.5;
}

.const-wall-savings-shine {
  background: linear-gradient(90deg, transparent, rgba(var(--yue-constellation-gold-rgb), .4), transparent);
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.const-wall-footer {
  border-top: 1px solid rgba(var(--yue-constellation-gold-rgb), .1);
  z-index: 2;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  display: flex;
  position: relative;
}

.const-wall-stat {
  color: rgba(var(--yue-constellation-white-rgb), .6);
  align-items: center;
  gap: 5px;
  display: flex;
}

.const-wall-stat svg {
  color: var(--yue-constellation-gold);
}

.const-wall-stat-label {
  font-size: .7rem;
  font-weight: 500;
}

.const-wall-stat-value {
  color: var(--yue-constellation-gold);
  font-size: .82rem;
  font-weight: 650;
}

.const-wall-next-progress {
  flex: 1;
  align-items: center;
  gap: 6px;
  max-width: 160px;
  margin: 0 12px;
  display: flex;
}

.const-wall-next-bar {
  background: rgba(var(--yue-constellation-white-rgb), .08);
  border-radius: 2px;
  flex: 1;
  height: 3px;
  overflow: hidden;
}

.const-wall-next-bar-fill {
  background: linear-gradient(90deg, var(--yue-constellation-gold), var(--yue-constellation-orange));
  height: 100%;
  transition: width .8s var(--ease-pro);
  border-radius: 2px;
  position: relative;
}

.const-wall-next-bar-fill:after {
  content: "";
  background: linear-gradient(90deg, transparent, rgba(var(--yue-constellation-white-rgb), .3), transparent);
  position: absolute;
  inset: 0;
}

.const-wall-next-text {
  color: var(--yue-constellation-gold);
  text-align: right;
  min-width: 28px;
  font-size: .58rem;
  font-weight: 600;
}

.const-wall-btn {
  background: linear-gradient(135deg, var(--yue-constellation-gold), var(--yue-constellation-orange));
  color: var(--yue-ui-navy-mid);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(var(--yue-constellation-gold-rgb), .3);
  transition: all var(--dur-3) var(--ease-pro);
  border: none;
  border-radius: 100px;
  align-items: center;
  gap: 4px;
  padding: 7px 18px;
  font-size: .78rem;
  font-weight: 600;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.const-wall-btn:before {
  content: "";
  background: linear-gradient(90deg, transparent, rgba(var(--yue-constellation-white-rgb), .3), transparent);
  transition: transform var(--dur-4);
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
}

.const-wall-btn:hover {
  box-shadow: 0 4px 20px rgba(var(--yue-constellation-gold-rgb), .5);
  transform: scale(1.04);
}

.const-wall-btn:hover:before {
  transform: translateX(100%);
}

.const-wall-btn:active {
  transform: scale(.97);
}

.const-card:first-child {
  animation-delay: 30ms;
}

.const-card:nth-child(2) {
  animation-delay: 60ms;
}

.const-card:nth-child(3) {
  animation-delay: 90ms;
}

.const-card:nth-child(4) {
  animation-delay: .12s;
}

.const-card:nth-child(5) {
  animation-delay: .15s;
}

.const-card:nth-child(6) {
  animation-delay: .18s;
}

.const-card:nth-child(7) {
  animation-delay: .21s;
}

.const-card:nth-child(8) {
  animation-delay: .24s;
}

.const-card:nth-child(9) {
  animation-delay: .27s;
}

@media (max-width: 900px) {
  .const-wall-grid {
    gap: 5px;
  }

  .const-card {
    max-height: 76px;
  }

  .const-card-icon-wrap {
    width: 24px;
    height: 24px;
  }

  .const-card-icon {
    font-size: .85rem;
  }

  .const-wall-discount-percent {
    font-size: 1.2rem;
  }

  .const-wall-savings-value {
    font-size: 1.1rem;
  }

  .const-wall-savings-content {
    gap: 10px;
    padding: 8px 12px;
  }

  .const-wall-savings-icon-wrap {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 720px) {
  .const-wall {
    padding: 12px;
  }

  .const-wall-grid {
    gap: 4px;
  }

  .const-card {
    max-height: 64px;
  }

  .const-card-icon-wrap {
    width: 20px;
    height: 20px;
  }

  .const-card-icon {
    font-size: .75rem;
  }

  .const-card-name {
    font-size: .55rem;
  }

  .const-card-threshold {
    font-size: .5rem;
  }

  .const-wall-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .const-wall-discount-display {
    align-self: flex-end;
  }

  .const-wall-footer {
    flex-wrap: wrap;
    gap: 6px;
  }

  .const-wall-next-progress {
    order: 3;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .const-wall-savings-content {
    flex-wrap: wrap;
    gap: 8px;
  }

  .const-wall-savings-desc {
    text-align: left;
    width: 100%;
  }
}

.pg-root {
  animation: pgFadeIn var(--dur-4) var(--ease-out-back) both;
}

@keyframes pgFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pg-title {
  text-align: center;
  animation: pgSlideDown var(--dur-4) var(--ease-out-expo) both;
  margin-bottom: 24px;
}

@keyframes pgSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pg-title h2 {
  font-size: var(--fluid-font-xl);
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--ocean-deep), var(--ocean-mid));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  margin: 0 0 4px;
  font-weight: 650;
}

.pg-title p {
  font-size: var(--fluid-font-sm);
  color: var(--text-secondary);
  margin: 0;
}

.pg-title-card {
  border-radius: var(--radius-xl);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  max-width: 920px;
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .22), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .55), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .14), 0 4px 24px rgba(var(--ocean-deep-rgb), .04);
  animation: pgSlideDown var(--dur-4) var(--ease-out-expo) both;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 0 auto 26px;
  padding: 16px 28px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.pg-title-card:before {
  content: "";
  background: radial-gradient(closest-side, rgba(var(--ocean-light-rgb), .16), transparent);
  pointer-events: none;
  width: 420px;
  height: 140px;
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
}

.pg-title-brand {
  align-items: center;
  gap: 14px;
  min-width: 0;
  display: flex;
}

.pg-title-icon {
  border-radius: var(--radius-md);
  width: 40px;
  height: 40px;
  color: var(--ocean-light);
  background: linear-gradient(145deg, rgba(var(--ocean-light-rgb), .18), rgba(var(--ocean-deep-rgb), .22));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .3), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .5);
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.pg-title-main {
  letter-spacing: .5px;
  color: var(--ocean-deep);
  white-space: nowrap;
  background: linear-gradient(135deg, var(--ocean-deep), var(--ocean-mid));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  margin: 0;
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.8rem);
  font-weight: 650;
  line-height: 1.1;
}

.pg-title-feats {
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  display: flex;
}

.pg-title-feat {
  font-size: var(--fluid-font-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  display: inline-flex;
}

.pg-title-feat svg {
  color: var(--ocean-light);
  flex: none;
}

.pg-glass {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .22), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .55), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .14), 0 4px 24px rgba(var(--ocean-deep-rgb), .04);
  border-radius: var(--radius-xl);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  animation: pgCardIn var(--dur-4) var(--ease-out-expo) both;
  position: relative;
  overflow: hidden;
}

@keyframes pgCardIn {
  from {
    opacity: 0;
    transform: translateY(16px)scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.pg-glass:first-child {
  animation-delay: 60ms;
}

.pg-glass:nth-child(2) {
  animation-delay: .12s;
}

.pg-glass:nth-child(3) {
  animation-delay: .18s;
}

.pg-glass:nth-child(4) {
  animation-delay: .24s;
}

.pg-glass:nth-child(n+5) {
  animation-delay: .3s;
}

.pg-glass:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .3), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .65), inset 0 -1px 0 0 rgba(var(--accent-cyan-rgb), .2), 0 8px 32px rgba(var(--ocean-deep-rgb), .06);
  transform: translateY(-3px);
}

.pg-glass:after {
  content: "";
  background: linear-gradient(90deg, transparent, rgba(var(--glass-tint-rgb), .08), transparent);
  width: 60%;
  height: 100%;
  transition: left var(--transition-spring);
  pointer-events: none;
  z-index: 1;
  position: absolute;
  top: 0;
  left: -100%;
}

.pg-glass:hover:after {
  left: 120%;
}

.pg-glass.featured {
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .3), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .3), 0 4px 24px rgba(var(--neon-glow-rgb), .06), 0 0 40px rgba(var(--neon-glow-rgb), .04);
}

.pg-glass.featured:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .4), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .35), 0 8px 32px rgba(var(--neon-glow-rgb), .1), 0 0 60px rgba(var(--neon-glow-rgb), .06);
}

.pg-input {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: all var(--transition-base);
  outline: none;
  font-family: inherit;
}

.pg-input:focus {
  border-color: rgba(var(--neon-glow-rgb), .4);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  box-shadow: 0 0 0 3px rgba(var(--neon-glow-rgb), .08);
}

.pg-input::placeholder {
  color: rgba(var(--slate-blue-rgb), .75);
}

.pg-btn-primary {
  background: linear-gradient(135deg, var(--ocean-light), var(--neon-glow));
  color: var(--text-inverse);
  cursor: pointer;
  transition: transform var(--transition-quick), box-shadow var(--transition-quick);
  box-shadow: 0 2px 10px rgba(var(--ocean-light-rgb), .2);
  border: none;
  border-radius: 100px;
  font-weight: 600;
}

.pg-btn-primary:hover {
  box-shadow: 0 4px 16px rgba(var(--ocean-light-rgb), .3);
  transform: scale(1.04);
}

.pg-btn-primary:active {
  transform: scale(.98);
}

.pg-btn-ghost {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  color: var(--text-secondary);
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  cursor: pointer;
  transition: all var(--transition-base);
  border-radius: 100px;
  font-weight: 600;
}

.pg-btn-ghost:hover {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  color: var(--text-primary);
  transform: translateY(-1px);
}

.pg-tabs {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2);
  border-radius: 100px;
  gap: 4px;
  padding: 4px;
  display: inline-flex;
}

.pg-tab {
  color: var(--text-secondary);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  background: none;
  border: none;
  border-radius: 100px;
  padding: 8px 20px;
  font-weight: 600;
}

.pg-tab:hover {
  color: var(--text-primary);
}

.pg-tab.active {
  background: linear-gradient(135deg, var(--ocean-light), var(--neon-glow));
  color: var(--text-inverse);
  box-shadow: 0 2px 10px rgba(var(--ocean-light-rgb), .2);
}

.pg-glow-bg {
  position: relative;
}

.pg-glow-bg:before {
  content: "";
  background: radial-gradient(circle, rgba(var(--neon-glow-rgb), .12), transparent 65%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  width: 240px;
  height: 240px;
  position: absolute;
  top: -80px;
  right: -60px;
}

.pg-glow-bg:after {
  content: "";
  background: radial-gradient(circle, rgba(var(--ocean-cyan-rgb), .1), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: -60px;
  left: 20%;
}

.pg-progress-track {
  background: rgba(var(--ocean-cyan-rgb), .08);
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}

.pg-progress-fill {
  background: linear-gradient(90deg, var(--ocean-light), var(--neon-glow));
  transition: width var(--dur-4) cubic-bezier(.34, 1.56, .64, 1);
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}

.pg-progress-fill:after {
  content: "";
  background: linear-gradient(90deg, transparent, rgba(var(--glass-tint-rgb), .45), transparent);
  pointer-events: none;
  width: 40%;
  animation: 2s linear infinite pgProgressFlow;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-120%);
}

@keyframes pgProgressFlow {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(370%);
  }
}

.pg-empty {
  text-align: center;
  color: var(--text-secondary);
  animation: pgFadeIn var(--dur-4) var(--ease-out-expo) both;
  padding: 60px 20px;
}

.pg-empty-icon {
  text-align: center;
  color: rgba(var(--ocean-cyan-rgb), .3);
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
  font-size: 2.5rem;
  display: block;
}

@keyframes pgFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.pg-pagination {
  animation: pgFadeIn var(--dur-3) var(--ease-out-expo) both;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
  display: flex;
}

.pg-page-btn {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  min-width: 36px;
  height: 36px;
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  color: var(--text-secondary);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  border-radius: 10px;
  font-weight: 600;
}

.pg-page-btn:hover:not(.active):not(:disabled) {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  transform: translateY(-1px);
}

.pg-page-btn.active {
  background: linear-gradient(135deg, var(--ocean-light), var(--neon-glow));
  color: var(--text-inverse);
  box-shadow: 0 2px 8px rgba(var(--ocean-light-rgb), .2);
}

.pg-page-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.pg-page-ellipsis {
  min-width: 36px;
  height: 36px;
  color: var(--text-secondary);
  opacity: .6;
  justify-content: center;
  align-items: center;
  font-size: .82rem;
  display: inline-flex;
}

.pg-badge {
  font-size: var(--fluid-font-xs);
  border-radius: 100px;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-weight: 600;
  display: inline-flex;
}

.pg-badge-blue {
  background: rgba(var(--ocean-cyan-rgb), .12);
  color: var(--ocean-cyan);
}

.pg-badge-green {
  background: rgba(var(--emerald-rgb), .12);
  color: rgb(var(--emerald-rgb));
}

.pg-badge-gold {
  background: rgba(var(--golden-rgb), .12);
  color: var(--golden-dark);
}

.pg-badge-red {
  background: rgba(var(--error-rgb), .12);
  color: var(--error);
}

.pg-accent-bar {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: 2;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.pg-accent-bar.blue {
  background: linear-gradient(90deg, var(--ocean-light), var(--neon-glow));
}

.pg-accent-bar.green {
  background: linear-gradient(90deg, rgb(var(--emerald-rgb)), var(--success));
}

.pg-accent-bar.gold {
  background: linear-gradient(90deg, var(--golden), var(--golden-light));
}

.pg-workflow-card {
  color: inherit;
  text-decoration: none;
  display: block;
}

.pg-workflow-card .thumb {
  background-position: center;
  background-size: cover;
  justify-content: center;
  align-items: center;
  height: 100px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.pg-workflow-card .thumb .play {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  width: 42px;
  height: 42px;
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  color: var(--text-primary);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  box-shadow: 0 4px 18px rgba(var(--ocean-deep-rgb), .1);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  display: flex;
}

.pg-workflow-card:hover .play {
  background: var(--ocean-white);
  box-shadow: 0 10px 36px rgba(var(--ocean-cyan-rgb), .3);
  transform: scale(1.18);
}

.pg-workflow-card .info {
  z-index: 2;
  padding: 10px 14px 12px;
  position: relative;
}

.pg-workflow-card .info h4 {
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 0 2px;
  font-weight: 600;
  overflow: hidden;
}

.pg-workflow-card .info p {
  color: var(--text-secondary);
  font-size: var(--fluid-font-xs);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
}

.pg-workflow-card .pg-thumb-badge {
  z-index: 2;
  -webkit-backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  position: absolute;
  top: 8px;
  left: 8px;
}

.pg-workflow-card .pg-thumb-corner {
  background: rgba(var(--ocean-deep-rgb), .32);
  width: 22px;
  height: 22px;
  -webkit-backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  color: var(--text-inverse);
  z-index: 2;
  transition: background var(--transition-base);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: absolute;
  top: 8px;
  right: 8px;
}

.pg-workflow-card:hover .pg-thumb-corner {
  background: rgba(var(--ocean-deep-rgb), .5);
}

.pg-workflow-card .pg-workflow-meta {
  font-size: var(--fluid-font-xs);
  color: var(--text-secondary);
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  display: flex;
}

.pg-workflow-card .pg-workflow-tag {
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.sd-root {
  margin-bottom: 0;
}

.gr-hero-island {
  margin-bottom: 20px;
  padding: 22px 26px 24px;
}

.gr-hero-head {
  border-bottom: 1px solid rgba(var(--ocean-cyan-rgb), .1);
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  display: flex;
}

.gr-hero-icon {
  width: 52px;
  height: 52px;
  color: var(--ocean-light);
  background: linear-gradient(135deg, rgba(var(--ocean-cyan-rgb), .18), rgba(var(--ocean-cyan-rgb), .06));
  box-shadow: inset 0 0 0 1px rgba(var(--ocean-cyan-rgb), .25), 0 4px 16px rgba(var(--ocean-cyan-rgb), .12);
  border-radius: 16px;
  flex: none;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  display: inline-flex;
}

.gr-hero-text h2 {
  font-size: var(--fluid-font-xl);
  color: var(--text-primary);
  letter-spacing: .01em;
  margin: 0 0 2px;
  font-weight: 650;
}

.gr-hero-text p {
  font-size: var(--fluid-font-sm);
  color: var(--text-secondary);
  margin: 0;
}

.sd-cards {
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 18px;
  display: grid;
}

.sd-card {
  flex-direction: column;
  gap: 4px;
  min-height: 100px;
  padding: 14px 16px 12px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.sd-card-top {
  z-index: 1;
  align-items: center;
  gap: 10px;
  display: flex;
  position: relative;
}

.sd-card-icon {
  width: 38px;
  height: 38px;
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18), 0 2px 8px rgba(var(--ocean-deep-rgb), .05);
  border-radius: 12px;
  flex: none;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  display: inline-flex;
}

.sd-card-label {
  font-size: var(--fluid-font-sm);
  color: var(--text-secondary);
  letter-spacing: .01em;
  font-weight: 600;
}

.sd-card-value {
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  z-index: 1;
  margin-top: 2px;
  font-size: 1.85rem;
  font-weight: 650;
  line-height: 1.1;
  position: relative;
}

.sd-card-hint {
  font-size: var(--fluid-font-xs);
  color: var(--text-tertiary);
  z-index: 1;
  line-height: 1.3;
  position: relative;
}

.sd-card-glow {
  z-index: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@media (max-width: 1180px) {
  .sd-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .sd-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sd-dist {
  border-radius: var(--radius-lg);
  background: rgba(var(--ocean-cyan-rgb), .04);
  box-shadow: inset 0 0 0 1px rgba(var(--ocean-cyan-rgb), .08);
  padding: 18px 20px 4px;
}

.sd-dist-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  display: flex;
}

.sd-dist-title {
  align-items: center;
  gap: 12px;
  display: flex;
}

.sd-dist-title-icon {
  width: 40px;
  height: 40px;
  color: var(--ocean-light);
  background: linear-gradient(135deg, rgba(var(--ocean-cyan-rgb), .16), rgba(var(--ocean-cyan-rgb), .06));
  box-shadow: inset 0 0 0 1px rgba(var(--ocean-cyan-rgb), .22);
  border-radius: 12px;
  flex: none;
  justify-content: center;
  align-items: center;
  font-size: 1.05rem;
  display: inline-flex;
}

.sd-dist-title h3 {
  font-size: var(--fluid-font-lg);
  color: var(--text-primary);
  letter-spacing: .01em;
  margin: 0;
  font-weight: 600;
}

.sd-dist-title p {
  font-size: var(--fluid-font-xs);
  color: var(--text-tertiary);
  margin: 1px 0 0;
}

.sd-dist-count {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-light);
  background: rgba(var(--ocean-cyan-rgb), .1);
  box-shadow: inset 0 0 0 1px rgba(var(--ocean-cyan-rgb), .18);
  white-space: nowrap;
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 600;
}

.sd-dist-list {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.sd-dist-item {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.sd-dist-row {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  display: flex;
}

.sd-dist-label {
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 600;
  display: inline-flex;
  overflow: hidden;
}

.sd-dist-dot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 3px rgba(var(--glass-tint-rgb), .12);
  border-radius: 50%;
  flex: none;
}

.sd-dist-meta {
  font-size: var(--fluid-font-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
  align-items: center;
  gap: 7px;
  display: inline-flex;
}

.sd-dist-meta em {
  color: var(--text-primary);
  font-style: normal;
  font-weight: 600;
}

.sd-dist-sep {
  opacity: .5;
  background: currentColor;
  border-radius: 50%;
  width: 3px;
  height: 3px;
}

.sd-dist-track {
  background: rgba(var(--ocean-cyan-rgb), .08);
  height: 10px;
  box-shadow: inset 0 1px 2px rgba(var(--ocean-deep-rgb), .05);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

.sd-dist-fill {
  height: 100%;
  transition: width .7s var(--ease-out-expo);
  box-shadow: 0 1px 6px rgba(var(--ocean-cyan-rgb), .35);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

.sd-dist-shine {
  pointer-events: none;
  background: linear-gradient(90deg, #0000, #ffffff73, #0000);
  width: 40%;
  animation: 2.4s linear infinite pgProgressFlow;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-120%);
}

@media (max-width: 620px) {
  .sd-dist-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

.gr-filter {
  border-radius: var(--radius-md);
  background: rgba(var(--ocean-cyan-rgb), .035);
  box-shadow: inset 0 0 0 1px rgba(var(--ocean-cyan-rgb), .08);
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px;
  display: flex;
}

.gr-filter-main, .gr-filter-sub {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.gr-filter-spacer {
  flex: 1;
}

.gr-filter-count {
  font-size: var(--fluid-font-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: auto;
}

.gr-date-tabs {
  background: rgba(var(--ocean-light-rgb), .08);
  border-radius: 10px;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  display: inline-flex;
}

.gr-date-tab {
  cursor: pointer;
  color: var(--text-secondary);
  transition: color var(--transition-quick), background var(--transition-quick), box-shadow var(--transition-quick);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 7px 13px;
  font-size: .78rem;
  font-weight: 500;
}

.gr-date-tab:hover {
  color: var(--text-primary);
  background: rgba(var(--ocean-light-rgb), .1);
}

.gr-date-tab.active {
  color: var(--text-primary);
  background: rgba(var(--accent-cyan-rgb), .16);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-cyan-rgb), .18);
  font-weight: 600;
}

.gr-status-tabs {
  background: rgba(var(--ocean-light-rgb), .08);
  border-radius: 10px;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  display: inline-flex;
}

.gr-status-tab {
  cursor: pointer;
  color: var(--text-secondary);
  transition: color var(--transition-quick), background var(--transition-quick), box-shadow var(--transition-quick);
  background: none;
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-size: .78rem;
  font-weight: 500;
  display: inline-flex;
}

.gr-status-tab:hover {
  color: var(--text-primary);
  background: rgba(var(--ocean-light-rgb), .1);
}

.gr-status-tab.active {
  color: var(--text-primary);
  background: rgba(var(--accent-cyan-rgb), .16);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-cyan-rgb), .18);
  font-weight: 600;
}

.gr-status-tab.is-failed-tab {
  color: var(--text-tertiary);
}

.gr-status-tab.is-failed-tab:hover {
  color: var(--error);
  background: rgba(var(--error-rgb, 244, 63, 94), .07);
}

.gr-status-tab.is-failed-tab.active {
  color: var(--error);
  background: rgba(var(--error-rgb, 244, 63, 94), .12);
  box-shadow: inset 0 0 0 1px rgba(var(--error-rgb, 244, 63, 94), .16);
}

.gr-tab-badge {
  background: var(--error);
  color: #fff;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  font-size: .62rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
}

.gr-date-custom-btn {
  border: 1px solid rgba(var(--ocean-cyan-rgb), .14);
  cursor: pointer;
  color: var(--text-secondary);
  background: rgba(var(--glass-bg-rgb), .25);
  transition: all var(--transition-quick);
  border-radius: 10px;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-size: .78rem;
  font-weight: 600;
  display: inline-flex;
}

.gr-date-custom-btn:hover {
  color: var(--text-primary);
  border-color: rgba(var(--ocean-cyan-rgb), .3);
}

.gr-date-custom-btn.active {
  color: var(--ocean-light);
  border-color: rgba(var(--ocean-cyan-rgb), .4);
  background: rgba(var(--accent-cyan-rgb), .12);
}

.gr-func-select {
  appearance: auto;
  cursor: pointer;
  min-width: 170px;
  max-width: 230px;
  height: 36px;
  padding: 0 32px 0 12px;
  font-size: .8rem;
}

.gr-search-box {
  flex: 180px;
  max-width: 300px;
  position: relative;
}

.gr-search-input {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  font-size: .8rem;
}

.gr-popover-backdrop {
  z-index: 500;
  background: none;
  position: fixed;
  inset: 0;
}

.gr-date-popover {
  z-index: 501;
  border-radius: var(--radius-md);
  background: var(--glass-bg-near);
  width: 336px;
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  border: 1px solid rgba(var(--glass-tint-rgb), .35);
  box-shadow: var(--glass-shadow-near);
  animation: grPopIn var(--dur-2) var(--ease-out-back) both;
  padding: 16px 18px 14px;
  position: fixed;
}

@keyframes grPopIn {
  from {
    opacity: 0;
    transform: translateY(-6px)scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.gr-date-popover-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  display: flex;
}

.gr-date-popover-title {
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 600;
  display: inline-flex;
}

.gr-date-popover-title i {
  color: var(--ocean-light);
}

.gr-date-popover-close {
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition-quick);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 4px;
  font-size: .9rem;
}

.gr-date-popover-close:hover {
  color: var(--text-primary);
  background: rgba(var(--ocean-light-rgb), .1);
}

.gr-date-popover-field {
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  display: flex;
}

.gr-date-popover-field label {
  color: var(--text-tertiary);
  font-size: .74rem;
  font-weight: 600;
}

.gr-date-input {
  color-scheme: light;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  font-size: .8rem;
}

.gr-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .65;
}

:root[data-theme="moonlight"] .gr-date-input, :root[data-theme="aurora"] .gr-date-input {
  color-scheme: dark;
}

:root[data-theme="moonlight"] .gr-date-input::-webkit-calendar-picker-indicator {
  filter: invert(.85);
}

:root[data-theme="aurora"] .gr-date-input::-webkit-calendar-picker-indicator {
  filter: invert(.85);
}

.gr-date-popover-actions {
  border-top: 1px solid rgba(var(--ocean-cyan-rgb), .1);
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  display: flex;
}

.gr-date-popover-actions .pg-btn-primary {
  padding: 8px 18px;
  font-size: .8rem;
}

.gr-date-popover-actions .pg-btn-ghost {
  padding: 8px 14px;
  font-size: .78rem;
}

.gr-day-panel {
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-bg-rgb), .92);
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .3);
  margin-bottom: 18px;
  padding: 14px 18px 10px;
}

.gr-day-head {
  border-bottom: 1px dashed rgba(var(--ocean-cyan-rgb), .14);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 2px 8px;
  padding-bottom: 10px;
  display: flex;
}

.gr-day-title {
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 600;
  display: inline-flex;
}

.gr-day-title:before {
  content: "";
  background: linear-gradient(135deg, var(--ocean-light), var(--neon-glow));
  width: 7px;
  height: 7px;
  box-shadow: 0 0 8px rgba(var(--ocean-cyan-rgb), .45);
  border-radius: 50%;
}

.gr-day-meta {
  font-size: var(--fluid-font-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  display: inline-flex;
}

.gr-day-meta em {
  color: var(--text-secondary);
  font-style: normal;
  font-weight: 600;
}

.gr-record-row {
  box-shadow: none;
  transition: background var(--dur-2) ease, box-shadow var(--dur-3) var(--ease-out-expo);
  content-visibility: auto;
  contain-intrinsic-size: auto 68px;
  background: none;
  position: relative;
  transform: none;
}

.gr-day-panel .gr-record-row, .gr-active-panel .gr-record-row {
  transition: background var(--dur-2) ease, box-shadow var(--dur-3) var(--ease-out-expo) !important;
  background: none !important;
  animation: none !important;
}

.gr-record-row:before {
  content: "";
  background: linear-gradient(180deg, var(--ocean-light), var(--neon-glow));
  opacity: 0;
  pointer-events: none;
  width: 3px;
  transition: opacity var(--dur-2) ease;
  border-radius: 3px;
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
}

.gr-record-row:hover {
  background: rgba(var(--accent-cyan-rgb), .055);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-cyan-rgb), .12);
}

.gr-day-panel .gr-record-row:hover, .gr-active-panel .gr-record-row:hover {
  background: rgba(var(--accent-cyan-rgb), .055) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-cyan-rgb), .12) !important;
}

.gr-record-row:hover:before {
  opacity: 1;
}

.gr-record-row + .gr-record-row {
  border-top: 1px solid rgba(var(--ocean-cyan-rgb), .07);
}

.gr-active-panel {
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-bg-rgb), .92);
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .3);
  padding: 8px 14px;
}

.gr-section-title {
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 4px;
  display: flex;
}

.gr-section-title i {
  color: var(--neon-glow);
  font-size: .85rem;
}

.gr-section-title span {
  color: var(--text-secondary);
  font-size: .85rem;
  font-weight: 600;
}

.gr-section-title em {
  color: var(--text-placeholder);
  font-size: .75rem;
  font-style: normal;
}

@media (max-width: 720px) {
  .gr-filter-count {
    margin-left: 0;
  }

  .gr-day-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .gr-date-popover {
    width: min(336px, 100vw - 24px);
  }
}

.upd-page {
  flex-direction: column;
  display: flex;
}

.upd-page-header {
  border-bottom: 1px solid rgba(var(--glass-tint-rgb), .16);
  margin-bottom: 8px;
}

.upd-page-list {
  max-height: none;
}

.upd-page-list .uai-item {
  width: 100%;
}

.upd-page-footer {
  text-align: center;
}

.mk-page {
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
}

.mk-header {
  border-bottom: 1px solid rgba(var(--glass-tint-rgb), .16);
  margin-bottom: 12px;
  padding-bottom: 10px;
}

.mk-subtitle {
  color: var(--text-tertiary);
  margin-top: 4px;
  font-size: 12px;
  display: block;
}

.mk-layout {
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  display: grid;
}

.mk-form-section {
  margin-bottom: 12px;
}

.mk-label {
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-size: 12px;
  display: block;
}

.mk-chips {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.mk-chip {
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
}

.mk-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.mk-chip.active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--text-on-accent);
}

.mk-input, .mk-textarea {
  box-sizing: border-box;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  width: 100%;
  color: var(--text-primary);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
}

.mk-input::placeholder, .mk-textarea::placeholder {
  color: var(--text-placeholder);
}

.mk-input:focus, .mk-textarea:focus {
  border-color: var(--brand-blue);
  outline: none;
}

.mk-textarea {
  resize: vertical;
  min-height: 60px;
  line-height: 1.6;
}

.mk-generate-btn {
  border-radius: var(--radius-md);
  background: var(--brand-blue);
  width: 100%;
  color: var(--text-on-accent);
  cursor: pointer;
  transition: filter var(--dur-1), opacity var(--dur-1);
  border: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px;
  font-family: inherit;
  font-size: 14px;
  display: flex;
}

.mk-generate-btn:disabled {
  opacity: .6;
  cursor: default;
}

.mk-generate-btn:not(:disabled):hover {
  filter: brightness(1.1);
}

.mk-error {
  border-radius: var(--radius-sm);
  background: var(--error-bg);
  color: var(--error);
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  display: flex;
}

.mk-history {
  margin-top: 14px;
}

.mk-history-item {
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  display: flex;
}

.mk-history-open {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  display: flex;
}

.mk-history-open:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.mk-history-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.mk-history-time {
  color: var(--text-tertiary);
  flex-shrink: 0;
  font-size: 11px;
}

.mk-history-del {
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
  flex-shrink: 0;
  padding: 4px 6px;
}

.mk-history-del:hover {
  color: var(--error);
}

.mk-result {
  flex-direction: column;
  gap: 12px;
  min-height: 320px;
  display: flex;
}

.mk-empty {
  text-align: center;
  color: var(--text-tertiary);
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 48px 16px;
  display: flex;
}

.mk-empty > i {
  opacity: .45;
  font-size: 36px;
}

.mk-empty-main {
  color: var(--text-secondary);
  font-size: 14px;
}

.mk-empty-sub {
  max-width: 340px;
  font-size: 12px;
  line-height: 1.6;
}

.mk-section {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  padding: 14px;
}

.mk-section-head {
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
}

.mk-section-head i {
  color: var(--brand-blue);
}

.mk-field {
  margin-bottom: 12px;
}

.mk-field:last-child {
  margin-bottom: 0;
}

.mk-field-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  display: flex;
}

.mk-field-label {
  color: var(--text-tertiary);
  font-size: 12px;
}

.mk-field-body {
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-hover);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.7;
}

.mk-copy-btn {
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1);
  background: none;
  border-radius: 999px;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  display: inline-flex;
}

.mk-copy-btn:hover {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.mk-copy-sm {
  padding: 3px 7px;
}

.mk-titles {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.mk-title-row {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  display: flex;
}

.mk-title-text {
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
}

.mk-flag {
  background: rgba(var(--warning-rgb), .25);
  color: var(--warning);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 600;
}

.mk-word-banner {
  border: 1px solid rgba(var(--warning-rgb), .5);
  background: var(--warning-bg);
  border-radius: var(--radius-md);
  color: var(--warning);
  padding: 10px 12px;
  font-size: 12px;
}

.mk-word-banner-head {
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  line-height: 1.5;
  display: flex;
}

.mk-word-list {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.mk-word-chip {
  border: 1px solid rgba(var(--warning-rgb), .4);
  background: rgba(var(--warning-rgb), .18);
  color: var(--warning);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
}

.mk-disclaimer {
  color: var(--text-tertiary);
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  font-size: 11px;
  line-height: 1.5;
  display: flex;
}

@media (max-width: 960px) {
  .mk-layout {
    grid-template-columns: 1fr;
  }
}

.mk-header-row {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.mk-open-yxb {
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-1), color var(--dur-1);
  border-radius: 999px;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  display: inline-flex;
}

.mk-open-yxb:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.mk-label-row {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  display: flex;
}

.mk-label-row .mk-label {
  margin-bottom: 0;
}

.mk-field-tools {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  display: flex;
}

.mk-mini-btn {
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1);
  background: none;
  border-radius: 999px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 11px;
}

.mk-mini-btn:hover {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.mk-mini-btn.primary {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--text-on-accent);
}

.mk-mini-btn:disabled {
  opacity: .55;
  cursor: default;
}

.mk-rewrite {
  position: relative;
}

.mk-rewrite-pop {
  z-index: 30;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  width: 292px;
  padding: 10px;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  box-shadow: 0 10px 30px #00000047;
}

.mk-rewrite-chips {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  display: flex;
}

.mk-rewrite-chip {
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
}

.mk-rewrite-chip:hover {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.mk-rewrite-row {
  align-items: center;
  gap: 6px;
  display: flex;
}

.mk-rewrite-row .mk-input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  font-size: 12px;
}

.mk-edit-wrap {
  flex-direction: column;
  display: flex;
}

.mk-edit-area {
  box-sizing: border-box;
  background: var(--bg-surface);
  border: 1px solid var(--brand-blue);
  border-radius: var(--radius-md);
  width: 100%;
  color: var(--text-primary);
  resize: vertical;
  min-height: 72px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
}

.mk-edit-area:focus {
  outline: none;
}

.mk-edit-row {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.mk-gen-row {
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  display: flex;
}

.mk-retry-row {
  border: 1px solid rgba(var(--error-rgb), .4);
  background: var(--error-bg);
  border-radius: var(--radius-md);
  color: var(--error);
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  display: flex;
}

.mk-retry-msg {
  flex: 1;
  line-height: 1.5;
}

.mk-history-head {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.mk-history-tools {
  align-items: center;
  gap: 6px;
  display: flex;
}

.mk-history-tool {
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1);
  background: none;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  display: inline-flex;
}

.mk-history-tool:hover {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.mk-history-tool:disabled {
  opacity: .5;
  cursor: default;
}

.mk-history-tool.active {
  border-color: rgba(var(--warning-rgb), .6);
  color: var(--warning);
}

.mk-history-search {
  margin: 8px 0;
  padding: 6px 10px;
  font-size: 12px;
}

.mk-history-star {
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
  flex-shrink: 0;
  padding: 4px 6px;
  font-size: 12px;
}

.mk-history-star:hover, .mk-history-star.active {
  color: var(--warning);
}

.mk-history-empty {
  color: var(--text-tertiary);
  padding: 6px 2px;
  font-size: 12px;
}

.mk-suggest {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  display: flex;
}

.mk-suggest-label {
  color: var(--text-tertiary);
  font-size: 11px;
}

.mk-suggest-chip {
  border: 1px dashed var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1), border-style var(--dur-1);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 12px;
}

.mk-suggest-chip:hover {
  border-style: solid;
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.mk-picker-overlay {
  z-index: 60;
  background: #00000073;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.mk-picker {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  flex-direction: column;
  width: min(680px, 92vw);
  max-height: 76vh;
  display: flex;
}

.mk-picker-head {
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  font-size: 13px;
  display: flex;
}

.mk-picker-grid {
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  padding: 12px 14px;
  display: grid;
  overflow-y: auto;
}

.mk-picker-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-subtle);
  cursor: pointer;
  background: var(--bg-hover);
  padding: 0;
  position: relative;
  overflow: hidden;
}

.mk-picker-cell img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.mk-picker-cell.selected {
  border-color: var(--brand-blue);
}

.mk-picker-placeholder {
  color: var(--text-tertiary);
  justify-content: center;
  align-items: center;
  font-size: 20px;
  display: flex;
  position: absolute;
  inset: 0;
}

.mk-picker-check {
  color: var(--brand-blue);
  background: var(--bg-surface);
  border-radius: 999px;
  padding: 2px;
  font-size: 13px;
  line-height: 1;
  position: absolute;
  bottom: 4px;
  right: 4px;
}

.mk-picker-tip {
  text-align: center;
  color: var(--text-tertiary);
  grid-column: 1 / -1;
  padding: 20px 4px;
  font-size: 12px;
}

.mk-picker-foot {
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 12px;
  display: flex;
}

.yb-page {
  max-width: 980px;
  margin: 0 auto;
}

.yb-cards {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  display: grid;
}

.yb-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 18px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.yb-card:before {
  content: "";
  background: var(--yb-accent, var(--brand-blue));
  opacity: .85;
  border-radius: 0 3px 3px 0;
  width: 3px;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
}

.yb-card-icon {
  border-radius: var(--radius-md);
  background: var(--yb-accent, var(--brand-blue));
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .yb-card-icon {
    background: color-mix(in srgb, var(--yb-accent, var(--brand-blue)) 14%, transparent);
  }
}

.yb-card-icon {
  color: var(--yb-accent, var(--brand-blue));
  font-size: 18px;
}

.yb-card-main {
  flex: 1;
  min-width: 0;
}

.yb-card-title {
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
}

.yb-card-health {
  background: var(--status-success, #2e9e5b);
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .yb-card-health {
    background: color-mix(in srgb, var(--status-success, #2e9e5b) 14%, transparent);
  }
}

.yb-card-health {
  color: var(--status-success, #2e9e5b);
  font-size: 11px;
  font-weight: 600;
}

.yb-card-health i {
  background: currentColor;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 6px;
}

.yb-card-run {
  background: var(--yb-accent, var(--brand-blue));
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .yb-card-run {
    background: color-mix(in srgb, var(--yb-accent, var(--brand-blue)) 14%, transparent);
  }
}

.yb-card-run {
  color: var(--yb-accent, var(--brand-blue));
  font-size: 11px;
  font-weight: 600;
}

.yb-card-run i {
  background: currentColor;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 1.4s ease-in-out infinite ybRunPulse;
}

@keyframes ybRunPulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

.yb-card-desc {
  color: var(--text-tertiary);
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
}

.yb-card-sub {
  color: var(--yb-accent, var(--brand-blue));
  cursor: pointer;
  background: none;
  border: none;
  margin-top: 5px;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
}

.yb-card-sub:disabled {
  opacity: .5;
  cursor: default;
}

.yb-card-sub:not(:disabled):hover {
  text-decoration: underline;
}

.yb-card-btn {
  background: var(--brand-blue);
  color: var(--text-on-accent);
  cursor: pointer;
  transition: filter var(--dur-1), opacity var(--dur-1);
  border: none;
  border-radius: 999px;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  display: inline-flex;
}

.yb-card-btn:disabled {
  opacity: .6;
  cursor: default;
}

.yb-card-btn:not(:disabled):hover {
  filter: brightness(1.1);
}

.yb-wins {
  margin-top: 4px;
}

.yb-wins .mk-label {
  align-items: center;
  gap: 10px;
  display: flex;
}

.yb-wins-empty {
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--text-tertiary);
  padding: 16px;
  font-size: 12px;
}

.yb-win-row {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 8px 12px;
  font-size: 12px;
  display: flex;
}

.yb-win-platform {
  background: var(--yb-accent, var(--brand-blue));
  border-radius: 999px;
  flex-shrink: 0;
  padding: 1px 9px;
}

@supports (color: color-mix(in lab, red, red)) {
  .yb-win-platform {
    background: color-mix(in srgb, var(--yb-accent, var(--brand-blue)) 14%, transparent);
  }
}

.yb-win-platform {
  color: var(--yb-accent, var(--brand-blue));
  font-weight: 600;
}

.yb-win-account {
  background: var(--bg-hover);
  color: var(--text-tertiary);
  border-radius: 999px;
  flex-shrink: 0;
  padding: 1px 8px;
  font-size: 11px;
}

.yb-win-url {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--text-tertiary);
  flex: 1;
  overflow: hidden;
}

.ybp-launch {
  margin-left: auto;
}

.ybp-overlay {
  z-index: 10020;
  -webkit-backdrop-filter: blur(calc(4px * var(--glass-blur-level, 1)));
  backdrop-filter: blur(calc(4px * var(--glass-blur-level, 1)));
  background: #0a121a8c;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.ybp-dialog {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  width: min(560px, 100vw - 32px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-shadow: 0 16px 48px #0000004d;
}

.ybp-head {
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
}

.ybp-x {
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
}

.ybp-x:hover {
  color: var(--text-primary);
}

.ybp-body {
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
  display: flex;
}

.ybp-body .mk-label {
  margin-top: 4px;
}

.ybp-note {
  color: var(--text-tertiary);
  margin: 6px 0 2px;
  font-size: 12px;
  line-height: 1.7;
}

.ybp-note strong {
  color: var(--warning);
}

.ybp-actions {
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
  display: flex;
}

.ybp-btn {
  cursor: pointer;
  transition: filter var(--dur-1), border-color var(--dur-1), color var(--dur-1);
  border: 1px solid #0000;
  border-radius: 999px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 13px;
}

.ybp-btn.primary {
  background: var(--brand-blue);
  color: var(--text-on-accent);
}

.ybp-btn.primary:hover {
  filter: brightness(1.1);
}

.ybp-btn.ghost {
  border-color: var(--border-default);
  color: var(--text-secondary);
  background: none;
}

.ybp-btn.ghost:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.ybp-center {
  text-align: center;
  min-height: 160px;
  color: var(--text-secondary);
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.ybp-big {
  color: var(--brand-blue);
  font-size: 30px;
}

.ybp-big.ok {
  color: var(--success);
}

.ybp-big.bad {
  color: var(--error);
}

.ybp-confirm-tip {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.ybp-shot {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  width: 100%;
}

.ybp-shot-empty {
  text-align: center;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  padding: 24px;
  font-size: 12px;
}

.ybp-result-msg {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.7;
}

.hg-card {
  border-radius: var(--radius-md);
  background: var(--glass-bg-mid);
  border: 1px solid rgba(var(--glass-tint-rgb), .45);
  box-shadow: var(--island-glow);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-mid)) blur(var(--glass-blur-mid));
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  display: flex;
}

.hg-head {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.hg-icon {
  border-radius: var(--radius-xs, 8px);
  width: 28px;
  height: 28px;
  color: var(--text-on-accent);
  background: var(--brand-blue);
  flex: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.hg-title {
  font-size: var(--fluid-font-base);
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.4;
}

.hg-detail {
  font-size: var(--fluid-font-sm);
  color: var(--text-secondary);
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  line-height: 1.6;
  display: flex;
}

.hg-detail :last-child {
  margin-bottom: 0;
}

.hg-actions {
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
  display: flex;
}

.hg-btn {
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: filter var(--dur-1), border-color var(--dur-1), color var(--dur-1);
  border: 1px solid #0000;
  border-radius: 999px;
  padding: 7px 16px;
  font-family: inherit;
}

.hg-btn:focus-visible {
  outline: 2px solid rgba(var(--accent-cyan-rgb), .5);
  outline-offset: 2px;
}

.hg-cancel {
  border-color: var(--border-default);
  color: var(--text-secondary);
  background: none;
}

.hg-cancel:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.hg-confirm {
  background: var(--brand-blue);
  color: var(--text-on-accent);
}

.hg-confirm:hover {
  filter: brightness(1.1);
}

.hg-challenge .hg-icon {
  background: var(--warning);
  color: #fff;
}

.hg-challenge {
  border-color: rgba(var(--warning-rgb), .4);
  background: rgba(var(--warning-rgb), .1);
}

.hg-quote .hg-icon {
  background: var(--brand-blue);
}

.hg-danger .hg-icon {
  background: var(--error);
}

.hg-danger .hg-confirm {
  background: var(--error);
  color: #fff;
}

.hg-danger .hg-confirm:hover {
  filter: brightness(1.08);
}

.hg-danger {
  border-color: rgba(var(--error-rgb), .4);
}

.ybp-ai-block {
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  display: flex;
}

.ybp-ai-block .mk-label {
  margin-top: 0;
}

.ybp-ai-row {
  align-items: center;
  gap: 8px;
  display: flex;
}

.ybp-ai-row .mk-input {
  flex: 1;
  min-width: 0;
}

.ybp-ai-count {
  color: var(--text-secondary);
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: inline-flex;
}

.ybp-ai-count input {
  box-sizing: border-box;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  width: 56px;
  color: var(--text-primary);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
}

.ybp-ai-count input:focus {
  border-color: var(--brand-blue);
  outline: none;
}

.ybp-ai-points {
  min-height: 0;
}

.ybp-ai-btn {
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.ybp-ai-btn:disabled {
  opacity: .6;
  cursor: default;
}

.res-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 24px 26px;
}

.res-header {
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 18px;
  display: flex;
}

.res-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-title);
  letter-spacing: -.01em;
  color: var(--text-primary);
}

.res-sub {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  margin-top: 3px;
}

.res-count {
  font-family: var(--font-mono, "JetBrains Mono", Consolas, monospace);
  color: var(--text-tertiary);
  border: 1px solid var(--border-subtle);
  background: rgba(var(--glass-tint-rgb), .5);
  border-radius: 999px;
  margin-left: auto;
  padding: 3px 10px;
  font-size: 11px;
}

.res-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  display: grid;
}

@media (max-width: 1200px) {
  .res-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.res-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--glass-tint-rgb), .72);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-pro), box-shadow var(--dur-2) var(--ease-pro);
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  display: flex;
}

.res-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.res-card:focus-visible {
  outline: 2px solid var(--ocean-cyan);
  outline-offset: 2px;
}

.res-card-icon {
  border-radius: var(--radius-sm);
  color: #fff;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.res-card-body {
  min-width: 0;
}

.res-card-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-emph);
  color: var(--text-primary);
}

.res-card-desc {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 1px;
  overflow: hidden;
}

.res-card-ext {
  color: var(--text-tertiary);
  opacity: .7;
  flex: none;
  margin-left: auto;
}

.ac-page {
  flex-direction: column;
  max-width: 900px;
  height: calc(100vh - 120px);
  min-height: 480px;
  margin: 0 auto;
  display: flex;
}

.ac-msgs {
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 8px 14px;
  display: flex;
  overflow-y: auto;
}

.ac-msgs:has(.atw-wall) {
  justify-content: center;
}

.ac-empty {
  text-align: center;
  color: var(--text-tertiary);
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.ac-empty > i {
  opacity: .4;
  font-size: 40px;
}

.ac-empty-main {
  color: var(--text-secondary);
  font-size: 15px;
}

.ac-suggest {
  flex-direction: column;
  gap: 8px;
  width: min(480px, 90%);
  margin-top: 8px;
  display: flex;
}

.ac-suggest-item {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-1), color var(--dur-1);
  padding: 10px 14px;
  font-size: 13px;
}

.ac-suggest-item:hover:not(:disabled) {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.ac-suggest-item:disabled {
  opacity: .5;
  cursor: default;
}

.ac-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.ac-row.user {
  justify-content: flex-end;
}

.ac-avatar {
  background: rgba(var(--accent-cyan-rgb), .14);
  width: 30px;
  height: 30px;
  color: var(--brand-blue);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  display: flex;
}

.ac-bubble {
  border-radius: var(--radius-lg);
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 76%;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.7;
}

.ac-bubble.user {
  background: var(--brand-blue);
  color: var(--text-on-accent);
  border-bottom-right-radius: 6px;
}

.ac-bubble.agent {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-top-left-radius: 6px;
}

.ac-bubble.error {
  background: var(--error-bg);
  color: var(--error);
  border-top-left-radius: 6px;
}

.ac-bubble.thinking {
  color: var(--text-tertiary);
}

.ac-tool {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-hover);
  max-width: 82%;
  padding: 10px 14px;
  font-size: 12px;
}

.ac-tool.fail {
  border-color: rgba(var(--error-rgb), .5);
}

.ac-tool-head {
  color: var(--text-secondary);
  align-items: center;
  gap: 8px;
  display: flex;
}

.ac-tool-name {
  color: var(--text-primary);
  font-weight: 600;
}

.ac-tool-args {
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ac-tool .ok {
  color: var(--success);
}

.ac-tool .fail {
  color: var(--error);
}

.ac-tool-body {
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 6px;
  line-height: 1.6;
}

.ac-tool-shot {
  border: 1px solid #fff9;
  border-radius: 10px;
  max-width: 100%;
  max-height: 260px;
  margin-top: 8px;
  display: block;
  box-shadow: 0 4px 14px #0c285a1a;
}

.ac-confirm {
  border: 1px solid rgba(var(--warning-rgb), .5);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  max-width: 86%;
  padding: 12px;
}

.ac-confirm-tip {
  color: var(--warning);
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  display: flex;
}

.ac-confirm-shot {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  width: 100%;
}

.ac-confirm-done {
  color: var(--text-tertiary);
  padding: 4px 0;
  font-size: 12px;
}

.ac-input-bar {
  border-top: 1px solid rgba(var(--glass-tint-rgb), .16);
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px 14px;
  display: flex;
}

.ac-brain-bar {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 0;
  display: flex;
}

.ac-brain-label {
  color: var(--text-secondary);
  flex-shrink: 0;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  display: inline-flex;
}

.ac-brain-label i {
  color: var(--brand-blue);
}

.ac-brain-select {
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  max-width: 300px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 8px;
  outline: none;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 12px;
}

.ac-brain-select:hover:not(:disabled) {
  border-color: var(--brand-blue);
}

.ac-brain-select:disabled {
  opacity: .5;
  cursor: default;
}

.ac-brain-thinking {
  gap: 4px;
  display: inline-flex;
}

.ac-brain-think {
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-1);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
}

.ac-brain-think:hover:not(:disabled) {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.ac-brain-think.active {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background: #5883ff1f;
  font-weight: 600;
}

.ac-brain-think:disabled {
  opacity: .5;
  cursor: default;
}

.ac-brain-price {
  color: var(--text-secondary);
  opacity: .85;
  margin-left: auto;
  font-size: 11px;
}

.ac-session-running:after {
  content: "";
  background: #30a46c;
  border-radius: 50%;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  animation: 1.5s ease-in-out infinite ac-pulse;
  display: inline-block;
}

@keyframes ac-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .3;
  }
}

.ac-brain-mode {
  gap: 4px;
  display: inline-flex;
}

.ac-brain-mode-chip {
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-1);
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  display: inline-flex;
}

.ac-brain-mode-chip i {
  font-size: 9px;
}

.ac-brain-mode-chip:hover:not(:disabled) {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.ac-brain-mode-chip.active {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background: #5883ff1a;
  font-weight: 600;
}

.ac-brain-mode-chip:disabled {
  opacity: .5;
  cursor: default;
}

.ac-mode-confirm.active {
  color: #e5484d;
  background: #e5484d1a;
  border-color: #e5484d;
}

.ac-mode-confirm.active i {
  color: #e5484d;
}

.ac-mode-full.active {
  color: #30a46c;
  background: #30a46c1a;
  border-color: #30a46c;
}

.ac-mode-full.active i {
  color: #30a46c;
}

.ac-brain-trigger {
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  max-width: 300px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--dur-1), color var(--dur-1);
  border-radius: 10px;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  display: inline-flex;
  overflow: hidden;
}

.ac-brain-trigger:hover:not(:disabled) {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.ac-brain-trigger:disabled {
  opacity: .5;
  cursor: default;
}

.ac-brain-trigger i {
  color: var(--text-secondary);
  font-size: 10px;
}

.ac-brain-panel {
  z-index: 99990;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  border-radius: 12px;
  max-height: min(420px, 60vh);
  padding: 6px;
  position: fixed;
  overflow-y: auto;
  box-shadow: 0 12px 32px #0000002e;
}

.ac-brain-row {
  width: 100%;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 12px;
  display: flex;
}

.ac-brain-row:hover {
  background: #5883ff1a;
}

.ac-brain-row.active {
  color: var(--brand-blue);
  font-weight: 600;
}

.ac-brain-row-price {
  color: var(--text-secondary);
  flex-shrink: 0;
  font-size: 11px;
}

.ac-workfolder {
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px dashed var(--border-subtle);
  background: var(--bg-surface);
  max-width: 180px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-1), color var(--dur-1);
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  display: inline-flex;
  overflow: hidden;
}

.ac-workfolder:hover:not(:disabled) {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.ac-workfolder.active {
  border-style: solid;
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.ac-workfolder:disabled {
  opacity: .5;
  cursor: default;
}

.ac-workfolder-clear {
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  display: inline-flex;
}

.ac-workfolder-clear:hover {
  color: #e5484d;
}

.ac-file-strip {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 16px 0;
  display: flex;
}

.ac-file-strip-label {
  color: var(--text-secondary);
  font-size: 11px;
}

.ac-file-chip {
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  max-width: 260px;
  color: var(--text-primary);
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 11px;
  display: inline-flex;
}

.ac-file-chip span, .ac-file-chip {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ac-file-chip button {
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-size: 10px;
}

.ac-file-chip button:hover {
  color: #e5484d;
}

.ac-input {
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  min-height: 40px;
  max-height: 160px;
  color: var(--text-primary);
  resize: none;
  scrollbar-width: none;
  border-radius: 20px;
  outline: none;
  flex: 1;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
}

.ac-input::-webkit-scrollbar {
  display: none;
}

.ac-input:focus {
  border-color: var(--brand-blue);
}

.ac-input:disabled {
  opacity: .6;
}

.ac-send {
  background: var(--brand-blue);
  height: 40px;
  color: var(--text-on-accent);
  cursor: pointer;
  transition: filter var(--dur-1), opacity var(--dur-1);
  border: none;
  border-radius: 999px;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  font-size: 13px;
  display: inline-flex;
}

.ac-send:disabled {
  opacity: .5;
  cursor: default;
}

.ac-send:not(:disabled):hover {
  filter: brightness(1.1);
}

.ac-quick {
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 10px 16px 6px;
  display: flex;
}

.ac-quick-item {
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-1), color var(--dur-1);
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 11px;
  display: inline-flex;
}

.ac-quick-item:hover:not(:disabled) {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.ac-quick-item:disabled {
  opacity: .5;
  cursor: default;
}

.ac-quote {
  border: 1px solid rgba(var(--warning-rgb), .5);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  max-width: 86%;
  padding: 12px;
}

.ac-quote-tip {
  color: var(--text-primary);
  margin-bottom: 6px;
  font-size: 13px;
}

.ac-quote-tip strong {
  color: var(--warning);
}

.ac-quote-cost {
  color: var(--text-tertiary);
  font-size: 12px;
}

.ac-workspace {
  align-items: stretch;
  gap: 12px;
  display: flex;
}

.ac-island {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  flex-direction: column;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.ac-left {
  flex-shrink: 0;
  width: 240px;
}

.ac-right {
  flex-shrink: 0;
  width: 300px;
}

.ac-center {
  flex: 1;
  min-width: 0;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
}

.ac-center .ac-msgs {
  flex: 1;
  min-height: 0;
}

.ac-side-head {
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.ac-session-actions {
  gap: 8px;
  margin: 10px 12px 6px;
  display: flex;
}

.ac-session-actions .ac-new-session {
  flex: 1;
  margin: 0;
}

.ac-session-clear {
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  flex-shrink: 0;
  padding: 0 14px;
  font-size: 12px;
}

.ac-session-clear:hover:not(:disabled) {
  color: var(--text-secondary);
  border-color: var(--border-strong, var(--border-default));
}

.ac-session-clear:disabled {
  opacity: .5;
  cursor: default;
}

.ac-new-session {
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-1), color var(--dur-1);
  background: none;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 10px 12px 6px;
  padding: 7px 0;
  font-size: 12px;
  display: flex;
}

.ac-new-session:hover:not(:disabled) {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.ac-new-session:disabled {
  opacity: .5;
  cursor: default;
}

.ac-session-list {
  flex: 1;
  min-height: 0;
  padding: 4px 8px 8px;
  overflow-y: auto;
}

.ac-side-empty {
  text-align: center;
  color: var(--text-tertiary);
  padding: 14px 8px;
  font-size: 12px;
}

.ac-session-item {
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
  padding: 7px 26px 7px 10px;
  display: flex;
  position: relative;
}

.ac-session-item:hover {
  border-color: var(--brand-blue);
}

.ac-session-item.active {
  background: rgba(var(--accent-cyan-rgb), .1);
  border-color: var(--brand-blue);
}

.ac-session-title {
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.ac-session-meta {
  color: var(--text-tertiary);
  font-size: 11px;
}

.ac-session-del {
  width: 20px;
  height: 20px;
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-1), color var(--dur-1);
  background: none;
  border: none;
  border-radius: 5px;
  font-size: 11px;
  position: absolute;
  top: 6px;
  right: 6px;
}

.ac-session-item:hover .ac-session-del {
  opacity: 1;
}

.ac-session-del:hover {
  color: var(--error);
}

.ac-art {
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-height: 0;
  padding: 10px;
  display: flex;
  overflow-y: auto;
}

.ac-art-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-hover);
  padding: 10px 12px;
}

.ac-art-title {
  color: var(--text-secondary);
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.ac-art-body {
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.7;
}

.ac-art-body .ok {
  color: var(--success);
  font-weight: 600;
}

.ac-art-body .fail {
  color: var(--error);
  font-weight: 600;
}

@media (max-width: 1500px) {
  .ac-right {
    display: none;
  }
}

@media (max-width: 1200px) {
  .ac-left {
    display: none;
  }
}

.ac-center {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: 0 8px 28px rgba(var(--shadow-rgb, 12, 40, 90), .08);
}

.ac-island {
  height: 100%;
}

.ac-workspace {
  width: 100%;
}

.ac-side-tabs {
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  display: flex;
}

.ac-side-tab {
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1);
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.ac-side-tab:hover {
  color: var(--text-secondary);
}

.ac-side-tab.active {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
}

.ac-skill-list {
  flex: 1;
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
}

.ac-skill-group {
  margin-bottom: 10px;
}

.ac-skill-group-name {
  color: var(--text-tertiary);
  letter-spacing: .02em;
  padding: 4px 4px 6px;
  font-size: 11px;
}

.ac-skill-item {
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: border-color var(--dur-1);
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 7px 8px;
  display: flex;
}

.ac-skill-item:hover {
  border-color: var(--brand-blue);
}

.ac-skill-item.off {
  opacity: .55;
}

.ac-skill-item.off .ac-skill-title {
  text-decoration: line-through;
}

.ac-skill-main {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.ac-skill-title {
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.ac-risk {
  border-radius: 999px;
  align-items: center;
  gap: 3px;
  width: fit-content;
  padding: 1px 7px;
  font-size: 10px;
  line-height: 1.6;
  display: inline-flex;
}

.ac-risk i {
  font-size: 9px;
}

.ac-risk.read {
  background: rgba(var(--accent-cyan-rgb), .12);
  color: var(--brand-blue);
}

.ac-risk.write {
  background: rgba(var(--success-rgb), .12);
  color: var(--success);
}

.ac-risk.irreversible {
  background: rgba(var(--warning-rgb), .14);
  color: var(--warning);
}

.ac-risk.money {
  background: rgba(var(--error-rgb), .12);
  color: var(--error);
}

.ac-switch {
  background: var(--border-default);
  cursor: pointer;
  width: 30px;
  height: 17px;
  transition: background var(--dur-1);
  border: none;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 0;
  position: relative;
}

.ac-switch .ac-switch-knob {
  width: 13px;
  height: 13px;
  transition: left var(--dur-1);
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 2px #0003;
}

.ac-switch.on {
  background: var(--brand-blue);
}

.ac-switch.on .ac-switch-knob {
  left: 15px;
}

.ac-skill-note {
  color: var(--text-tertiary);
  padding: 6px 4px 2px;
  font-size: 11px;
  line-height: 1.6;
}

.ac-modal-overlay {
  z-index: 10005;
  background: rgba(var(--ocean-deep-rgb), .35);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.ac-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  width: min(560px, 92vw);
  max-height: 84vh;
  box-shadow: 0 12px 40px rgba(var(--shadow-rgb, 12, 40, 90), .16);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.ac-modal-head {
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  display: flex;
}

.ac-modal-head-text {
  flex: 1;
  min-width: 0;
}

.ac-modal-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.ac-modal-sub {
  color: var(--text-tertiary);
  margin-top: 2px;
  font-size: 11px;
}

.ac-modal-close {
  border-radius: var(--radius-sm);
  width: 26px;
  height: 26px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--dur-1), color var(--dur-1);
  background: none;
  border: none;
  flex-shrink: 0;
  font-size: 13px;
}

.ac-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.ac-modal-desc {
  color: var(--text-secondary);
  padding: 0 16px 10px;
  font-size: 12px;
  line-height: 1.7;
}

.ac-modal-cost {
  border-radius: var(--radius-sm);
  background: rgba(var(--error-rgb), .08);
  color: var(--error);
  align-items: center;
  gap: 6px;
  margin: 0 16px 10px;
  padding: 6px 10px;
  font-size: 11px;
  display: flex;
}

.ac-modal-body {
  flex-direction: column;
  flex: 1;
  gap: 12px;
  min-height: 0;
  padding: 4px 16px 10px;
  display: flex;
  overflow-y: auto;
}

.ac-field-none {
  color: var(--text-tertiary);
  padding: 8px 0;
  font-size: 12px;
}

.ac-field {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.ac-field-label {
  color: var(--text-secondary);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: flex;
}

.ac-field-key {
  color: var(--text-primary);
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

.ac-field-label em {
  color: var(--error);
  font-style: normal;
}

.ac-field-opt {
  color: var(--text-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 5px;
  font-size: 10px;
}

.ac-field-kind {
  color: var(--text-tertiary);
  margin-left: auto;
  font-size: 10px;
}

.ac-field-input {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  width: 100%;
  color: var(--text-primary);
  resize: vertical;
  outline: none;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
}

.ac-field-input:focus {
  border-color: var(--brand-blue);
}

.ac-field-desc {
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.6;
}

.ac-modal-err {
  border-radius: var(--radius-sm);
  background: rgba(var(--error-rgb), .1);
  color: var(--error);
  margin: 0 16px 6px;
  padding: 6px 10px;
  font-size: 12px;
}

.ac-modal-foot {
  border-top: 1px solid var(--border-subtle);
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  display: flex;
}

.ac-modal-note {
  min-width: 0;
  color: var(--text-tertiary);
  flex: 1;
  font-size: 11px;
  line-height: 1.5;
}

.ac-center.drag-target {
  outline: 2px dashed var(--brand-blue);
  outline-offset: -2px;
}

.ac-coach-btn {
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  width: 40px;
  height: 40px;
  color: var(--brand-blue);
  cursor: pointer;
  transition: border-color var(--dur-1), filter var(--dur-1);
  border-radius: 999px;
  flex-shrink: 0;
  font-size: 14px;
}

.ac-coach-btn:hover:not(:disabled) {
  border-color: var(--brand-blue);
  filter: brightness(1.05);
}

.ac-coach-btn:disabled {
  opacity: .45;
  cursor: default;
}

.wf-ai-btn {
  border: 1px solid rgba(var(--accent-cyan-rgb), .4);
  background: rgba(var(--accent-cyan-rgb), .08);
  color: var(--brand-blue);
  cursor: pointer;
  transition: border-color var(--dur-1), background var(--dur-1);
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 11px;
  display: inline-flex;
}

.wf-ai-btn:hover {
  border-color: var(--brand-blue);
  background: rgba(var(--accent-cyan-rgb), .16);
}

.ac-persona-wall {
  flex-direction: column;
  flex: 1;
  justify-content: center;
  gap: 14px;
  padding: 10px 6px;
  display: flex;
}

.ac-persona-lead {
  color: var(--text-primary);
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.ac-persona-sub {
  color: var(--text-tertiary);
  margin: 0;
  font-size: 12px;
}

.ac-persona-grid {
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px;
  display: grid;
}

.ac-persona-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  font-family: inherit;
  transition: border-color .15s;
  display: flex;
}

.ac-persona-card:hover:not(:disabled) {
  border-color: var(--brand-blue);
}

.ac-persona-card:disabled {
  opacity: .5;
  cursor: default;
}

.ac-persona-icon {
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-cyan-rgb), .14);
  width: 30px;
  height: 30px;
  color: var(--brand-blue);
  justify-content: center;
  align-items: center;
  font-size: 14px;
  display: inline-flex;
}

.ac-persona-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.ac-persona-card:hover:not(:disabled) .ac-persona-title {
  color: var(--brand-blue);
}

.ac-persona-sub {
  font-size: 11px;
}

.ac-persona-home {
  flex-direction: column;
  flex: 1;
  gap: 14px;
  padding: 6px 4px;
  display: flex;
  overflow-y: auto;
}

.ac-persona-greet {
  align-items: center;
  gap: 10px;
  display: flex;
}

.ac-persona-greet-icon {
  border-radius: var(--radius-md);
  background: rgba(var(--accent-cyan-rgb), .14);
  width: 38px;
  height: 38px;
  color: var(--brand-blue);
  justify-content: center;
  align-items: center;
  font-size: 17px;
  display: inline-flex;
}

.ac-persona-hello {
  color: var(--text-primary);
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.ac-persona-hello-sub {
  color: var(--text-tertiary);
  margin: 0;
  font-size: 12px;
}

.ac-persona-prompts {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.ac-persona-prompt {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 13px;
  transition: border-color .15s, color .15s;
  display: flex;
}

.ac-persona-prompt:hover:not(:disabled) {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.ac-persona-prompt:disabled {
  opacity: .5;
  cursor: default;
}

.ac-persona-prompt i {
  color: var(--text-tertiary);
  font-size: 11px;
}

.ac-persona-tasks-label {
  color: var(--text-tertiary);
  margin: 0 0 6px;
  font-size: 11px;
}

.ac-persona-tasks-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  display: grid;
}

.ac-persona-switch {
  border: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border-radius: 999px;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 11px;
  transition: border-color .15s, color .15s;
  display: inline-flex;
}

.ac-persona-switch:hover:not(:disabled) {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.ac-session-persona {
  color: var(--brand-blue);
  background: rgba(var(--accent-cyan-rgb), .1);
  border-radius: 999px;
  width: fit-content;
  padding: 0 6px;
  font-size: 10px;
}

.ybp-minipill {
  z-index: 9500;
  border: 1px solid rgba(var(--ocean-cyan-rgb), .35);
  background: rgba(var(--glass-tint-rgb, 255 255 255), .72);
  max-width: 420px;
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(var(--ocean-deep-rgb), .22);
  -webkit-backdrop-filter: blur(calc(10px * var(--glass-blur-level, 1)));
  backdrop-filter: blur(calc(10px * var(--glass-blur-level, 1)));
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: .78rem;
  display: inline-flex;
  position: fixed;
  bottom: 18px;
  right: 18px;
}

.ybp-minipill:hover {
  border-color: rgba(var(--ocean-cyan-rgb), .6);
}

.ybp-minipill-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ybp-minipill-action {
  color: var(--ocean-cyan);
  flex-shrink: 0;
  font-weight: 600;
}

.uc-press {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.uc-press:active {
  box-shadow: var(--press-inset), 0 1px 2px rgba(var(--ocean-deep-rgb), .08);
  transform: translateY(1px)scale(.985);
}

.uc-press-strong:active {
  box-shadow: var(--press-inset-strong), 0 1px 2px rgba(var(--ocean-deep-rgb), .12);
  transform: translateY(2px)scale(.96);
}

@keyframes ucChipsDeduct {
  0% {
    color: var(--text-primary);
    text-shadow: none;
    transform: translateY(0);
  }

  25% {
    color: var(--error);
    text-shadow: 0 0 12px rgba(var(--error-rgb), .5);
    transform: translateY(-2px);
  }

  60% {
    color: var(--error);
    text-shadow: 0 0 8px rgba(var(--error-rgb), .3);
    transform: translateY(0);
  }

  100% {
    color: var(--text-primary);
    text-shadow: none;
    transform: translateY(0);
  }
}

@keyframes ucChipsRipple {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--error-rgb), .45);
  }

  100% {
    box-shadow: 0 0 0 14px rgba(var(--error-rgb), 0);
  }
}

.uc-chips-deduct.is-deducting {
  animation: ucChipsDeduct .8s var(--ease-out-expo);
  border-radius: 6px;
}

.uc-chips-deduct.is-deducting:after {
  content: "";
  border-radius: inherit;
  animation: ucChipsRipple .8s var(--ease-out-expo) forwards;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@keyframes ucBurstCheck {
  0% {
    opacity: 0;
    transform: scale(0)rotate(-45deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.25)rotate(0);
  }

  70% {
    transform: scale(.92)rotate(0);
  }

  100% {
    opacity: 1;
    transform: scale(1)rotate(0);
  }
}

@keyframes ucBurstRing {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--ocean-cyan-rgb), .55);
  }

  100% {
    box-shadow: 0 0 0 28px rgba(var(--ocean-cyan-rgb), 0);
  }
}

.uc-task-burst.is-complete {
  animation: ucBurstRing .9s var(--ease-out-expo) forwards;
}

.uc-task-burst.is-complete .uc-burst-check {
  animation: ucBurstCheck var(--dur-4) var(--ease-out-back) forwards;
}

@keyframes ucPurchaseFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--neon-glow-rgb), 0), var(--shadow-card);
  }

  40% {
    box-shadow: 0 0 0 6px rgba(var(--neon-glow-rgb), .35), var(--press-inset), 0 1px 2px rgba(var(--ocean-deep-rgb), .1);
  }

  100% {
    box-shadow: 0 0 0 12px rgba(var(--neon-glow-rgb), 0), var(--shadow-card);
  }
}

.uc-purchase-btn.uc-purchase-pressed {
  animation: ucPurchaseFlash var(--dur-4) var(--ease-out-expo);
}

.uc-card-material {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.uc-card-material:hover {
  border-color: rgba(var(--neon-glow-rgb), .35);
  box-shadow: 0 18px 50px rgba(var(--ocean-deep-rgb), .13), 0 0 0 1px rgba(var(--neon-glow-rgb), .1), inset 0 1px 0 rgba(var(--glass-tint-rgb), .45);
  transform: translateY(-3px);
}

.uc-card-material:active {
  box-shadow: var(--press-inset), var(--shadow-card);
  transform: translateY(-1px);
}

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

  .pulse-icon, .pulse-badge, .loading-spinner, .uc-const-halo, .uc-const-rays, .uc-chips-deduct.is-deducting, .uc-task-burst.is-complete, .uc-task-burst.is-complete .uc-burst-check, .uc-purchase-btn.uc-purchase-pressed {
    animation: none !important;
  }
}

button {
  transition: transform var(--dur-1) var(--ease-pro), box-shadow var(--dur-1) var(--ease-pro), filter var(--dur-1) var(--ease-pro), background-color var(--dur-1) var(--ease-pro), color var(--dur-1) var(--ease-pro), border-color var(--dur-1) var(--ease-pro), opacity var(--dur-1) var(--ease-pro);
}

button:where(:active):where(:not(:disabled, [data-slot="button"])) {
  transform: scale(.97);
}

.gbi-naming-toggle, .ha-pill-today, .gr-func-select, .hg-btn, .ac-switch, .gp-switch, .detail-text-toggle, .detail-layout-style-toggle, .dim-toggle-chip, .batch-rr-radio, .material-thumb-fav, .collector-switch, .trend-filter-select, .mockup-item-check {
  transition: transform var(--dur-1) var(--ease-pro), box-shadow var(--dur-1) var(--ease-pro), filter var(--dur-1) var(--ease-pro), background-color var(--dur-1) var(--ease-pro), color var(--dur-1) var(--ease-pro), border-color var(--dur-1) var(--ease-pro);
}

.gbi-naming-toggle:hover, .ha-pill-today:hover, .gr-func-select:hover, .hg-btn:hover, .ac-switch:hover, .gp-switch:hover, .detail-text-toggle:hover, .detail-layout-style-toggle:hover, .dim-toggle-chip:hover, .batch-rr-radio:hover, .material-thumb-fav:hover, .collector-switch:hover, .trend-filter-select:hover, .mockup-item-check:hover {
  filter: brightness(.96);
}

.gbi-naming-toggle:active, .ha-pill-today:active, .gr-func-select:active, .hg-btn:active, .ac-switch:active, .gp-switch:active, .detail-text-toggle:active, .detail-layout-style-toggle:active, .dim-toggle-chip:active, .batch-rr-radio:active, .material-thumb-fav:active, .collector-switch:active, .trend-filter-select:active, .mockup-item-check:active {
  transform: scale(.94);
}

.yue-tab-in {
  animation: yueTabIn var(--dur-2) var(--ease-out-expo) both;
}

@keyframes yueTabIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quick-gen-section.hero-stage.hero-l-shape {
  --d02-logo-w: 108px;
  grid-template-columns: var(--d02-logo-w, 140px) 1fr;
  column-gap: var(--fluid-gap-sm);
  row-gap: calc(var(--fluid-gap) * .6);
  padding: var(--fluid-gap-sm);
  border-radius: var(--radius-xl);
  grid-template-rows: auto 1fr;
  display: grid;
  position: relative;
  overflow: visible;
}

.hero-stage:after {
  display: none;
}

.hero-logo-slot {
  grid-area: 2 / 1;
}

.hero-logo-big {
  width: var(--d02-logo-w, 140px);
  height: var(--d02-logo-w, 140px);
  background: linear-gradient(145deg, rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8)), rgba(var(--ocean-white-rgb), var(--glass-alpha-mid, .8)));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: 0 8px 32px rgba(var(--ocean-light-rgb), calc(var(--glass-opacity, 1) * .22)), inset 0 1px 0 rgba(var(--glass-tint-rgb), calc(var(--glass-opacity, 1) * .5));
  z-index: 3;
  transition: transform var(--transition-base);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 30px;
  left: 12px;
  overflow: visible;
}

.hero-logo-big:before {
  content: "";
  background: radial-gradient(circle at 30% 20%, rgba(var(--glass-tint-rgb), calc(var(--glass-opacity, 1) * .18)), transparent 55%);
  pointer-events: none;
  border-radius: 50%;
  position: absolute;
  inset: 0;
}

.hero-logo-big i {
  color: var(--text-inverse);
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(var(--shadow-rgb), .2));
  font-size: 3.2rem;
}

.hero-logo-big img {
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.hero-logo-big .theme-logo {
  z-index: 1;
  pointer-events: none;
}

.hero-logo-big .hero-logo-label {
  text-align: center;
  z-index: 2;
  color: rgba(var(--glass-tint-rgb), .7);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .56rem;
  font-weight: 600;
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
}

.hero-l-top {
  align-items: center;
  gap: var(--fluid-gap);
  padding: calc(var(--fluid-gap-sm) * .4) var(--fluid-pad) calc(var(--fluid-gap-sm) * .4) calc(var(--d02-logo-w, 200px)  + 28px);
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .4), 0 2px 12px rgba(var(--ocean-deep-rgb), .03);
  z-index: 2;
  grid-area: 1 / 1 / auto / -1;
  display: flex;
  position: relative;
}

.hero-slogan-wrap {
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.hero-guide-btn {
  border: 1px solid rgba(var(--glass-tint-rgb), .35);
  background: linear-gradient(135deg, rgba(var(--ocean-light-rgb), .12), rgba(var(--bright-cyan-rgb), .06));
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-2);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .3);
  border-radius: 100px;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: .72rem;
  font-weight: 600;
  display: inline-flex;
}

.hero-guide-btn:hover {
  background: linear-gradient(135deg, rgba(var(--ocean-light-rgb), .22), rgba(var(--bright-cyan-rgb), .12));
  box-shadow: 0 4px 14px rgba(var(--ocean-light-rgb), .2);
  transform: translateY(-1px);
}

.hero-guide-btn i {
  color: var(--ocean-primary);
}

.hero-slogan-big {
  letter-spacing: .01em;
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  animation: sloganReveal .8s var(--ease-pro) .15s backwards;
  font-family: Inter, PingFang SC, HarmonyOS Sans SC, Microsoft YaHei, sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 200;
  line-height: 1.16;
  overflow: hidden;
}

@keyframes sloganReveal {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    filter: blur();
    transform: none;
  }
}

.hero-slogan-big .accent {
  background: linear-gradient(120deg, var(--slogan-accent, #0a6cff), var(--slogan-accent-2, #00b3e6));
  color: #0000;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-l-center {
  flex: 1;
  justify-content: center;
  align-items: center;
  min-width: 280px;
  display: flex;
}

.hero-l-eyebrow {
  flex-shrink: 0;
  margin-left: auto;
}

.workflow-guide {
  gap: calc(var(--fluid-gap-sm) * .5);
  grid-area: 2 / 2;
  grid-template-rows: auto;
  grid-template-columns: repeat(4, 1fr);
  min-width: 0;
  display: grid;
}

.hero-eyebrow {
  font-size: var(--fluid-font-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ocean-light);
  align-items: center;
  gap: 7px;
  font-weight: 600;
  display: inline-flex;
}

.hero-eyebrow i {
  font-size: var(--fluid-font-sm);
}

.wf-flow {
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .25), inset 0 0 0 1px rgba(var(--glass-tint-rgb), .08), 0 2px 10px rgba(var(--ocean-deep-rgb), .03);
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 8px 10px;
  display: flex;
  overflow: visible;
}

.wf-header {
  width: clamp(68px, 5rem + .5vw, 96px);
  min-width: 0;
  padding-right: calc(var(--fluid-gap-sm) * .6);
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  display: flex;
  position: relative;
}

.wf-header:after {
  content: "";
  background: linear-gradient(180deg, transparent, rgba(var(--ocean-cyan-rgb), .65) 32%, rgba(var(--ocean-cyan-rgb), .65) 68%, transparent);
  border-radius: 2px;
  width: 2px;
  height: 80%;
  position: absolute;
  top: 10%;
  right: 0;
  transform: skewX(-10deg);
}

.wf-index {
  z-index: 0;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, rgba(var(--ocean-light-rgb), .3) 0%, rgba(var(--ocean-light-rgb), .1) 55%, rgba(var(--ocean-light-rgb), 0) 100%);
  color: #0000;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 2.15rem;
  font-weight: 650;
  line-height: 1;
  position: absolute;
  top: -7px;
  right: 2px;
}

.wf-title {
  font-size: calc(var(--fluid-font-sm) * .92);
  color: var(--text-primary);
  letter-spacing: -.02em;
  white-space: nowrap;
  margin: 0;
  font-weight: 650;
  position: relative;
}

.wf-subtitle {
  font-size: calc(var(--fluid-font-xs) * .82);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  margin: 0;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
}

.wf-flow.mirror {
  flex-direction: row-reverse;
}

.wf-flow.mirror .wf-header {
  padding-right: 0;
  padding-left: calc(var(--fluid-gap-sm) * .6);
  align-items: flex-end;
}

.wf-flow.mirror .wf-header:after {
  left: 0;
  right: auto;
}

.wf-flow.mirror .wf-index {
  left: 2px;
  right: auto;
}

.wf-flow.mirror .wf-subtitle {
  text-align: right;
}

.wf-badge {
  letter-spacing: .04em;
  color: var(--ocean-light);
  background: rgba(var(--ocean-cyan-rgb), .14);
  border: 1px solid rgba(var(--ocean-cyan-rgb), .2);
  white-space: nowrap;
  border-radius: 100px;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: .56rem;
  font-weight: 600;
  display: inline-flex;
  position: relative;
}

.wf-badge i {
  font-size: .6rem;
}

.wf-steps {
  --wf-ih: clamp(24px, 1.3rem + .4vw, 30px);
  --wf-slot: clamp(32px, 1.7rem + .5vw, 40px);
  flex-wrap: nowrap;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  min-width: 0;
  padding: 4px 2px 2px;
  display: flex;
  position: relative;
  overflow: visible;
}

.wf-base {
  left: 10px;
  right: 10px;
  top: calc(4px + var(--fluid-gap-sm) * .2 + var(--wf-slot) / 2 - 1px);
  background: rgba(var(--ocean-cyan-rgb), .2);
  pointer-events: none;
  border-radius: 2px;
  height: 2px;
  position: absolute;
}

.wf-base-dot {
  background: var(--ocean-light);
  width: 7px;
  height: 7px;
  box-shadow: 0 0 8px 1px rgba(var(--ocean-light-rgb), .55);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -2%;
  transform: translateY(-50%);
}

.wf-step {
  z-index: 1;
  padding: calc(var(--fluid-gap-sm) * .2) calc(var(--fluid-gap-sm) * .22);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  border: none;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  display: flex;
  position: relative;
}

.wf-step-icon {
  width: var(--wf-ih);
  height: var(--wf-ih);
  margin-top: calc((var(--wf-slot)  - var(--wf-ih)) / 2);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--ocean-cyan-rgb), .35);
  background: linear-gradient(135deg, rgba(var(--ocean-cyan-rgb), .45), rgba(var(--ocean-cyan-rgb), .18));
  background-color: rgba(var(--glass-bg-rgb), .88);
  color: var(--ocean-light);
  font-size: calc(var(--fluid-font-sm) * .9);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.wf-step:hover .wf-step-icon {
  border-color: rgba(var(--ocean-light-rgb), .7);
  box-shadow: 0 4px 12px rgba(var(--ocean-cyan-rgb), .28);
  transform: translateY(-2px);
}

.wf-step:hover .wf-step-label {
  color: var(--ocean-light);
}

.wf-step.start .wf-step-icon {
  width: var(--wf-slot);
  height: var(--wf-slot);
  background: linear-gradient(135deg, var(--ocean-light), var(--neon-glow));
  color: var(--text-inverse);
  font-size: var(--fluid-font-sm);
  border: none;
  margin-top: 0;
}

.wf-step-label {
  font-size: calc(var(--fluid-font-xs) * .82);
  color: var(--text-primary);
  white-space: nowrap;
  text-align: center;
  transition: color var(--transition-base);
  font-weight: 600;
  line-height: 1.15;
}

.wf-slot-tools {
  opacity: 0;
  transition: opacity var(--transition-fast);
  align-items: center;
  gap: 2px;
  margin-left: auto;
  display: inline-flex;
}

.wf-flow:hover .wf-slot-tools {
  opacity: 1;
}

.wf-slot-btn {
  border: 1px solid rgba(var(--neon-glow-rgb), .25);
  background: rgba(var(--glass-bg-rgb), .9);
  width: 20px;
  height: 20px;
  color: var(--ocean-mid);
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: 9px;
  display: inline-flex;
}

.wf-slot-btn:hover:not(:disabled) {
  background: rgba(var(--ocean-light-rgb), .18);
  color: var(--ocean-deep);
}

.wf-slot-btn:disabled {
  opacity: .3;
  cursor: default;
}

.wf-slot-btn.wf-slot-danger:hover:not(:disabled) {
  background: rgba(var(--error-rgb, 224, 82, 82), .14);
  color: var(--error);
}

.wf-flow-pinned {
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  border: 1px solid rgba(var(--ocean-light-rgb), .4) !important;
}

.wf-flow-pinned:hover {
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb), .1);
  transform: translateY(-2px);
  border-color: var(--ocean-light) !important;
}

.wf-flow-pinned .wf-step-static {
  cursor: inherit;
  pointer-events: none;
}

.wf-chip {
  color: var(--ocean-light);
  background: var(--ocean-light);
  border-radius: 999px;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  font-size: .52rem;
  font-weight: 700;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .wf-chip {
    background: color-mix(in srgb, var(--ocean-light) 12%, transparent);
  }
}

.wf-chip {
  border: 1px solid var(--ocean-light);
}

@supports (color: color-mix(in lab, red, red)) {
  .wf-chip {
    border: 1px solid color-mix(in srgb, var(--ocean-light) 32%, transparent);
  }
}

.wf-chip {
  white-space: nowrap;
}

.wf-tooltip {
  background: rgba(var(--ocean-deep-rgb), var(--glass-alpha-far, .68));
  -webkit-backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  color: var(--text-inverse);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 10;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: .58rem;
  font-weight: 500;
  line-height: 1.3;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
}

.wf-step:hover .wf-tooltip {
  opacity: 1;
}

.workflow-guide .wf-flow {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  min-height: 0;
  padding: 8px 10px;
}

.workflow-guide .wf-flow.mirror {
  flex-direction: column;
}

.workflow-guide .wf-header {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
}

.workflow-guide .wf-header:after, .workflow-guide .wf-index, .workflow-guide .wf-badge {
  display: none;
}

.workflow-guide .wf-title {
  font-size: .74rem;
}

.workflow-guide .wf-subtitle {
  max-width: 100%;
  font-size: .5rem;
}

.workflow-guide .wf-steps {
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  padding: 2px 0 0;
}

.workflow-guide .wf-step {
  padding: 2px 3px;
}

.workflow-guide .wf-step-label {
  font-size: .48rem;
}

.workflow-guide .wf-base {
  top: calc(4px + var(--wf-slot) / 2);
}

.workflow-guide .wf-step-icon {
  --wf-ih: 22px;
  --wf-slot: 28px;
}

.style-pill .style-preview {
  border-radius: 18px;
  width: 156px;
  height: 156px;
  padding: 0;
  overflow: hidden;
}

.style-preview-swatch {
  background-position: center;
  background-size: cover;
  border-radius: 18px;
  width: 100%;
  height: 100%;
  position: relative;
}

.style-preview-swatch:after {
  content: attr(data-name);
  color: var(--text-inverse);
  letter-spacing: .02em;
  text-shadow: 0 1px 5px rgba(var(--shadow-rgb), .55);
  font-size: .74rem;
  font-weight: 600;
  position: absolute;
  bottom: 10px;
  left: 12px;
}

@media (max-width: 920px) {
  .quick-gen-section.hero-stage.hero-l-shape {
    grid-template-columns: var(--d02-logo-w, 90px) 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 14px 8px;
    padding: 10px;
  }

  .hero-logo-big {
    width: var(--d02-logo-w, 90px);
    height: var(--d02-logo-w, 90px);
    bottom: 48px;
    left: 10px;
  }

  .hero-logo-big i {
    font-size: 2.2rem;
  }

  .hero-logo-slot {
    grid-area: 2 / 1;
  }

  .hero-l-top {
    padding: 10px 14px 10px calc(var(--d02-logo-w, 90px)  + 20px);
    flex-wrap: wrap;
    grid-area: 1 / 1 / auto / -1;
    gap: 8px;
  }

  .hero-l-eyebrow {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .hero-l-center {
    order: 2;
    justify-content: flex-start;
    width: 100%;
  }

  .hero-slogan-big {
    font-size: .92rem;
  }

  .hero-guide-btn {
    padding: 5px 10px;
    font-size: .7rem;
  }

  .hero-guide-btn span {
    display: none;
  }

  .workflow-guide {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-base-dot {
    left: 50%;
    animation: none !important;
  }
}

.fluid-canvas-wrap {
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg-canvas);
  position: fixed;
  inset: 0;
  overflow: hidden;
}

@keyframes fluidDrift {
  0% {
    transform: translate(0%)scale(1)rotate(0);
  }

  25% {
    transform: translate(15%, -10%)scale(1.1)rotate(2deg);
  }

  50% {
    transform: translate(-10%, 15%)scale(.95)rotate(-1deg);
  }

  75% {
    transform: translate(10%, 10%)scale(1.05)rotate(1deg);
  }

  100% {
    transform: translate(-15%, -5%)scale(1)rotate(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fluid-canvas-wrap > div {
    animation: none !important;
  }
}

.fluid-fallback {
  z-index: 0;
  pointer-events: none;
  background-color: var(--ocean-white);
  background-image: radial-gradient(ellipse 80% 60% at 20% 30%, var(--fb-color-a) 0%, transparent 50%), radial-gradient(ellipse 70% 50% at 80% 70%, var(--fb-color-b) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 50% 50%, rgba(var(--glass-tint-rgb), .4) 0%, transparent 60%);
  background-blend-mode: soft-light, soft-light, normal;
  position: fixed;
  inset: 0;
}

.main-content, .main-content-inner {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.main-content-inner {
  background: none;
}

.left-sidebar, .right-sidebar {
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  border: none;
  border-radius: 18px;
  position: relative;
  box-shadow: var(--island-glow) !important;
}

.quick-gen-section.hero-stage, .api-section, .tutorial-section {
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  position: relative;
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8)) !important;
  box-shadow: var(--island-glow) !important;
  border: none !important;
}

.tutorial-card {
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  position: relative;
  border: 1px solid rgba(var(--glass-tint-rgb), .5) !important;
}

.hero-bg-type {
  letter-spacing: -.06em;
  color: var(--text-primary);
  opacity: .04;
  pointer-events: none;
  z-index: 0;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  will-change: transform;
  font-size: clamp(6rem, 16vw, 13rem);
  font-weight: 650;
  line-height: .85;
  position: absolute;
  top: 10px;
  left: -20px;
}

.hero-bg-type-2 {
  opacity: .03;
  inset: auto -20px 100px auto;
}

.hero-title-em {
  color: var(--ocean-light);
  display: inline-block;
}

.annotation-label {
  color: var(--card-accent, var(--ocean-light));
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
  -webkit-backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  border: 1px solid rgba(var(--glass-tint-rgb), .6);
  white-space: nowrap;
  transition: opacity var(--transition-base) var(--dur-2), transform var(--transition-base) var(--dur-2);
  transform-origin: 0;
  border-radius: 100px;
  padding: 4px 10px;
  font-size: .72rem;
  font-weight: 600;
}

.scroll-progress-track {
  z-index: 999;
  pointer-events: none;
  height: 2px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.scroll-progress-bar {
  background: linear-gradient(90deg, var(--ocean-light), var(--neon-glow));
  transform-origin: 0;
  width: 100%;
  height: 100%;
  transition: transform var(--dur-1) linear;
  transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-type, .hero-title-char, .style-pill, .feature-card, .wf-step, .wf-base-dot, .api-section, .tutorial-section, .tutorial-card, .annotation-label {
    opacity: 1 !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .fluid-fallback {
    animation: none !important;
  }

  .card-cover, .sub-features {
    transition: none !important;
    transform: none !important;
  }

  .scroll-progress-track {
    display: none;
  }
}

.island-cluster {
  z-index: 6;
  width: 0;
  min-width: 0;
  min-height: 0;
  transition: flex .5s var(--ease-spring), width .5s var(--ease-spring);
  pointer-events: none;
  flex: 0 0 0;
  align-items: stretch;
  gap: 0;
  display: flex;
  position: relative;
}

.island-gen-mode .island-cluster {
  pointer-events: auto;
  gap: var(--fluid-gap);
  flex: auto;
  margin: 0 auto;
}

.island-gen-mode .left-island-stack {
  flex: 0 1 calc(30% - var(--fluid-gap) * .6);
  min-width: 200px;
}

.island-gen-mode .island-cluster > .new-sidebar.open {
  flex: 0 1 calc(50% - var(--fluid-gap) * .4);
  min-width: 380px;
  max-width: none;
  margin: 0;
}

.island-gen-mode .right-island-stack {
  flex: 0 0 calc(20% - var(--fluid-gap) * .6);
  min-width: var(--gen-btn-island-width);
  margin: 0;
}

.island-cluster.sidebar-open {
  pointer-events: auto;
  flex: auto;
}

.right-island-stack {
  gap: var(--fluid-gap);
  min-width: 0;
  min-height: 0;
  margin: var(--fluid-gap) calc(var(--fluid-gap)  + 4px) var(--fluid-gap) 0;
  flex-direction: column;
  flex: 0 auto;
  align-self: stretch;
  display: flex;
}

.gen-btn-island {
  opacity: 0;
  width: 0;
  box-shadow: none;
  transition: width .5s var(--ease-spring), margin .5s var(--ease-spring);
  background: none;
  border-radius: 0;
  flex-shrink: 1;
  margin: 0;
  overflow: hidden;
}

.gen-btn-island.open {
  opacity: 1;
  z-index: 10;
  border-radius: var(--radius-xl);
  background: var(--surface-glass-strong);
  width: 100%;
  min-height: 0;
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  box-shadow: var(--glass-edge-top), var(--glass-edge-bottom), 0 0 0 1px var(--border-subtle);
  box-sizing: border-box;
  position: relative;
  overflow: visible;
}

.gen-btn-island-inner {
  gap: calc(var(--fluid-gap)  - 8px);
  padding: calc(var(--fluid-pad)  - 6px) calc(var(--fluid-pad)  + 2px);
  box-sizing: border-box;
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.gbi-field-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 8px;
  display: grid;
}

.gbi-field-grid.single-field {
  grid-template-columns: minmax(0, 1fr);
}

.gbi-field-grid.odd-tail > .gbi-field-cell:last-child > .gbi-field, .gbi-field-grid.odd-tail > .gbi-field-cell:last-child > .gbi-field-hint {
  grid-column: 1 / -1;
}

.gbi-field-cell {
  display: contents;
}

.gbi-compute-status {
  background: var(--ocean-foam, #3e505c);
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .gbi-compute-status {
    background: color-mix(in srgb, var(--ocean-foam, #3e505c) 10%, transparent);
  }
}

.gbi-compute-status {
  color: var(--text-secondary);
  font-size: var(--fluid-font-xs);
  -webkit-user-select: none;
  user-select: none;
  line-height: 1.4;
}

.gbi-compute-dot {
  background: var(--text-placeholder);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 3px var(--text-placeholder);
  border-radius: 50%;
  flex: none;
}

@supports (color: color-mix(in lab, red, red)) {
  .gbi-compute-dot {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-placeholder) 18%, transparent);
  }
}

.gbi-compute-status.online .gbi-compute-dot, .gbi-compute-status.leased .gbi-compute-dot {
  background: var(--success, #61bd67);
  box-shadow: 0 0 0 3px var(--success, #61bd67);
}

@supports (color: color-mix(in lab, red, red)) {
  .gbi-compute-status.online .gbi-compute-dot, .gbi-compute-status.leased .gbi-compute-dot {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #61bd67) 20%, transparent);
  }
}

.gbi-compute-status.leased {
  color: var(--success, #61bd67);
}

.gbi-compute-status.starting .gbi-compute-dot {
  background: var(--warning, #d9a514);
  box-shadow: 0 0 0 3px var(--warning, #d9a514);
}

@supports (color: color-mix(in lab, red, red)) {
  .gbi-compute-status.starting .gbi-compute-dot {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning, #d9a514) 20%, transparent);
  }
}

.gbi-compute-status.offline .gbi-compute-dot {
  background: var(--error, #e85854);
  box-shadow: 0 0 0 3px var(--error, #e85854);
}

@supports (color: color-mix(in lab, red, red)) {
  .gbi-compute-status.offline .gbi-compute-dot {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error, #e85854) 20%, transparent);
  }
}

.gbi-compute-status.loading {
  color: var(--text-tertiary);
}

.gbi-field {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.gbi-field-label {
  font-size: var(--fluid-font-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.gbi-field-hint {
  color: var(--text-tertiary);
  white-space: normal;
  word-break: break-word;
  font-size: .68rem;
  line-height: 1.4;
}

.gbi-custom-content {
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.gbi-glass-select {
  width: 100%;
  min-width: 0;
  position: relative;
}

.gbi-glass-select.naming-glass-dd .gbi-glass-select-trigger {
  background: rgba(var(--glass-bg-rgb), .95);
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-mid, 1.4));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-mid, 1.4));
  box-shadow: 0 1px 4px rgba(var(--shadow-rgb, 12, 40, 90), .1);
  border: .5px solid #ffffffb8;
}

.gbi-glass-select.naming-glass-dd .gbi-glass-select-dropdown {
  background: rgba(var(--glass-bg-rgb), .98);
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-mid, 1.4));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-mid, 1.4));
  box-shadow: 0 8px 28px rgba(var(--shadow-rgb, 12, 40, 90), .16);
  border: .5px solid #ffffffb8;
}

.gbi-glass-select.naming-glass-dd .gbi-glass-select-option:hover {
  background: rgba(var(--accent-cyan-rgb, 0, 179, 230), .14);
}

.gbi-glass-select-trigger {
  border-radius: var(--radius-sm);
  border: .5px solid rgba(var(--glass-tint-rgb), .3);
  background: rgba(var(--glass-bg-rgb), .9);
  width: 100%;
  min-width: 0;
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-base);
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  display: flex;
}

.gbi-glass-select-trigger:hover {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  border-color: rgba(var(--glass-tint-rgb), .45);
}

.gbi-glass-select-label {
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.gbi-glass-select-arrow {
  color: var(--text-secondary);
  transition: transform var(--transition-base);
  flex-shrink: 0;
  font-size: .65rem;
}

.gbi-glass-select-arrow.open {
  transform: rotate(180deg);
}

.gbi-combo-input {
  background: rgba(var(--glass-bg-rgb), .9);
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  border: .5px solid rgba(var(--glass-tint-rgb), .35);
  transition: all var(--transition-base);
  border-radius: 10px;
  align-items: center;
  gap: 0;
  min-width: 0;
  display: flex;
  position: relative;
  overflow: visible;
}

.gbi-combo-input.dropdown-open, .gbi-glass-select.dropdown-open {
  z-index: 9999;
}

.gbi-combo-input:focus-within {
  background: rgba(var(--glass-bg-rgb), .9);
  border-color: rgba(var(--ocean-light-rgb), .25);
}

.gbi-combo-input-field {
  min-width: 0;
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  -moz-appearance: textfield;
  background: none;
  border: none;
  outline: none;
  flex: 1;
  padding: 7px 10px;
  font-weight: 500;
}

.gbi-combo-input-field::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gbi-combo-input-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gbi-combo-input-arrow {
  border: none;
  border-left: .5px solid rgba(var(--glass-tint-rgb), .25);
  cursor: pointer;
  width: 26px;
  height: 100%;
  min-height: 32px;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  background: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .65rem;
  display: flex;
}

.gbi-combo-input-arrow:hover {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  color: var(--text-primary);
}

.gbi-combo-input-arrow.open i {
  transform: rotate(180deg);
}

.gbi-combo-input-arrow i {
  transition: transform var(--transition-base);
}

.gbi-glass-select-dropdown {
  z-index: 9999;
  background: rgba(var(--glass-bg-rgb), .97);
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  border: .5px solid rgba(var(--glass-tint-rgb), .5);
  box-shadow: 0 8px 32px rgba(var(--ocean-deep-rgb), .12);
  overscroll-behavior: contain;
  will-change: opacity;
  animation: gbiDropdownIn var(--dur-2) var(--ease-out-expo) both;
  border-radius: 12px;
  padding: 4px;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
}

@keyframes gbiDropdownIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.gbi-glass-select-option {
  width: 100%;
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-quick);
  background: none;
  border: none;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  display: flex;
}

.gbi-glass-select-option:hover {
  background: rgba(var(--ocean-light-rgb), .06);
}

.gbi-glass-select-option.selected {
  background: rgba(var(--ocean-light-rgb), .1);
  color: var(--text-primary);
  font-weight: 600;
}

.gbi-glass-select-option.selected i {
  color: var(--ocean-blue);
  font-size: .7rem;
}

.gbi-ratio-mini {
  border: 1.5px solid var(--ocean-mid);
  transition: all var(--transition-quick);
  background: none;
  border-radius: 3px;
  flex-shrink: 0;
  display: inline-block;
}

.gbi-ratio-mini-auto {
  border-style: dashed;
  width: 18px;
  height: 16px;
}

.gbi-ratio-mini.selected {
  border-color: var(--ocean-blue);
  background: rgba(var(--neon-glow-rgb), .2);
}

.gbi-glass-select-option:hover .gbi-ratio-mini {
  border-color: var(--ocean-blue);
}

.gbi-glass-select-trigger .gbi-ratio-mini {
  border-color: var(--ocean-blue);
  background: rgba(var(--neon-glow-rgb), .15);
}

.gbi-ratio-custom-row {
  border-top: .5px solid rgba(var(--glass-tint-rgb), .25);
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 12px;
  display: flex;
}

.gbi-ratio-custom-label {
  font-size: var(--fluid-font-xs);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.gbi-ratio-custom-input-wrap {
  flex: 1;
  min-width: 0;
}

.gbi-ratio-custom-input {
  border: .5px solid rgba(var(--glass-tint-rgb), .35);
  background: rgba(var(--glass-bg-rgb), .8);
  width: 100%;
  min-width: 0;
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  box-sizing: border-box;
  transition: border-color var(--transition-quick);
  border-radius: 6px;
  outline: none;
  padding: 6px 8px;
}

.gbi-ratio-custom-input:focus {
  border-color: rgba(var(--ocean-light-rgb), .45);
}

.gbi-ratio-custom-apply {
  background: rgba(var(--ocean-light-rgb), .16);
  color: var(--text-primary);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: background var(--transition-quick);
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  padding: 6px 10px;
  font-weight: 600;
}

.gbi-ratio-custom-apply:hover {
  background: rgba(var(--ocean-light-rgb), .28);
}

.gbi-task-name {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.gbi-task-name-label {
  font-size: var(--fluid-font-sm);
  color: var(--text-secondary);
  align-items: center;
  gap: 6px;
  font-weight: 600;
  display: flex;
}

.gbi-task-name-hint {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-cyan);
  background: rgba(var(--bright-cyan-rgb), .1);
  border-radius: 999px;
  padding: 1px 6px;
  font-weight: 500;
}

.gbi-task-name-input {
  box-sizing: border-box;
  width: 100%;
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  outline: none;
  padding: 5px 10px;
}

.gbi-task-name-input::placeholder {
  color: rgba(var(--ocean-deep-rgb), .35);
  font-size: var(--fluid-font-sm);
}

.gbi-task-name-input:focus {
  border-color: rgba(var(--neon-glow-rgb), .5);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
}

.gbi-custom-naming {
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-tint-rgb), .06);
  border: .5px solid rgba(var(--glass-tint-rgb), .15);
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  display: flex;
}

.gbi-naming-header {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.gbi-naming-expand {
  cursor: pointer;
  text-align: left;
  min-width: 0;
  color: inherit;
  font: inherit;
  background: none;
  border: none;
  flex: 1;
  align-items: center;
  gap: 6px;
  padding: 0;
  display: flex;
}

.gbi-naming-summary {
  min-width: 0;
  font-size: var(--fluid-font-xs);
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-weight: 500;
  overflow: hidden;
}

.gbi-naming-chevron {
  width: 12px;
  height: 12px;
  color: var(--text-tertiary);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.gbi-naming-chevron.open {
  transform: rotate(180deg);
}

.gbi-naming-title {
  font-size: var(--fluid-font-sm);
  color: var(--text-secondary);
  align-items: center;
  gap: 6px;
  font-weight: 600;
  display: flex;
}

.gbi-naming-toggle {
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  position: relative;
}

.gbi-naming-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.gbi-naming-toggle-slider {
  background: rgba(var(--ocean-deep-rgb), .25);
  border: .5px solid rgba(var(--glass-tint-rgb), .3);
  width: 34px;
  height: 18px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  border-radius: 999px;
  position: relative;
}

.gbi-naming-toggle-slider:before {
  content: "";
  background: var(--text-primary);
  width: 14px;
  height: 14px;
  box-shadow: 0 1px 3px rgba(var(--ocean-deep-rgb), .3);
  transition: transform var(--transition-fast);
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 1px;
}

.gbi-naming-toggle input:checked + .gbi-naming-toggle-slider {
  background: rgba(var(--neon-glow-rgb), .55);
  border-color: rgba(var(--neon-glow-rgb), .6);
}

.gbi-naming-toggle input:checked + .gbi-naming-toggle-slider:before {
  transform: translateX(16px);
}

.gbi-naming-row {
  gap: 8px;
  display: flex;
}

.gbi-naming-row-all {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.gbi-naming-row-all .gbi-naming-field {
  flex: none;
  min-width: 0;
}

.gbi-naming-row-all .gbi-naming-field-sm {
  flex: none;
}

.gbi-naming-field {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.gbi-naming-field-sm {
  flex: 0 0 80px;
}

.gbi-naming-label {
  font-size: var(--fluid-font-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.gbi-naming-input {
  box-sizing: border-box;
  width: 100%;
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  outline: none;
  padding: 5px 8px;
}

.gbi-naming-input::placeholder {
  color: rgba(var(--ocean-deep-rgb), .35);
  font-size: var(--fluid-font-sm);
}

.gbi-naming-input:focus {
  border-color: rgba(var(--neon-glow-rgb), .5);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
}

.gbi-naming-hint {
  font-size: var(--fluid-font-xs);
  color: var(--text-tertiary);
  opacity: .85;
}

.gbi-naming-hint.is-warn {
  color: #b45309;
  opacity: 1;
}

.gbi-naming-preview {
  border-radius: var(--radius-sm);
  background: rgba(var(--bright-cyan-rgb), .08);
  border: .5px solid rgba(var(--bright-cyan-rgb), .15);
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  display: flex;
}

.gbi-naming-preview i {
  color: var(--ocean-cyan);
  font-size: .7rem;
}

.gbi-naming-preview-text {
  font-size: var(--fluid-font-xs);
  color: var(--text-secondary);
  word-break: break-all;
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
}

.tli-header-filter {
  background: rgba(var(--glass-tint-rgb), .04);
  border-radius: 999px;
  gap: 2px;
  padding: 2px;
  display: flex;
}

.tli-filter-btn {
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition-quick);
  white-space: nowrap;
  background: none;
  border: none;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .56rem;
  font-weight: 600;
}

.tli-filter-btn:hover {
  color: var(--text-secondary);
}

.tli-filter-btn.active {
  color: var(--text-primary);
  background: rgba(var(--neon-glow-rgb), .18);
}

.tli-filter-btn.is-failed-tab:hover {
  color: var(--error);
}

.tli-filter-btn.is-failed-tab.active {
  color: var(--error);
  background: rgba(var(--error-rgb, 244, 63, 94), .14);
}

.tli-filter-badge {
  background: var(--error);
  color: #fff;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-width: 13px;
  height: 13px;
  margin-left: 4px;
  padding: 0 4px;
  font-size: .5rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
}

.tli-history-row {
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-tint-rgb), .05);
  transition: background var(--transition-quick);
  content-visibility: auto;
  contain-intrinsic-size: auto 44px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  display: flex;
}

.tli-history-row:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
}

.tli-history-row-info {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.tli-history-row-line {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.tli-history-row-name {
  font-size: var(--fluid-font-xs);
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
}

.tli-history-row-func {
  color: var(--ocean-light);
  background: rgba(var(--ocean-cyan-rgb), .12);
  border-radius: 999px;
  flex-shrink: 0;
  padding: 1px 6px;
  font-size: .55rem;
  font-weight: 600;
}

.tli-history-row-meta {
  color: var(--text-tertiary);
  align-items: center;
  gap: 8px;
  font-size: .58rem;
  display: flex;
}

.tli-history-row-time {
  align-items: center;
  gap: 3px;
  display: flex;
}

.tli-history-row-time i {
  font-size: .6rem;
}

.tli-history-row-stats {
  align-items: center;
  gap: 5px;
  font-weight: 600;
  display: flex;
}

.tli-history-row-success {
  color: var(--success);
}

.tli-history-row-failed {
  color: var(--error);
}

.tli-history-row-total {
  color: var(--text-placeholder);
  font-weight: 500;
}

.tli-history-row-open {
  color: var(--text-tertiary);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--transition-quick);
  background: none;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 4px 6px;
  display: inline-flex;
}

.tli-history-row-open:hover {
  background: rgba(var(--ocean-light-rgb), .15);
  color: var(--neon-glow);
}

.gbi-cost-preview {
  border-radius: var(--radius-sm);
  background: rgba(var(--ocean-light-rgb), .07);
  -webkit-backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  border: 1px solid rgba(var(--ocean-light-rgb), .2);
  box-shadow: none;
  font-size: var(--fluid-font-sm);
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  line-height: 1.3;
  display: flex;
  position: relative;
  overflow: hidden;
}

.gbi-cost-preview[data-tier]:before {
  content: "";
  background: var(--tier-color);
  opacity: .7;
  border-radius: 0 3px 3px 0;
  width: 3px;
  height: 58%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.gbi-cost-left {
  flex-direction: row;
  flex: auto;
  align-items: center;
  min-width: 0;
  display: flex;
}

.gbi-cost-bolt {
  width: 11px;
  height: 11px;
  color: var(--ocean-light);
  opacity: .8;
  flex-shrink: 0;
  margin-right: 5px;
}

.gbi-cost-chain {
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: baseline;
  gap: 3px;
  display: flex;
}

.gbi-chain-step {
  background: none;
  border: none;
  border-radius: 0;
  flex-direction: row;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  padding: 0;
  display: inline-flex;
}

.gbi-chain-label {
  letter-spacing: .04em;
  color: var(--text-tertiary);
  white-space: nowrap;
  font-size: .56rem;
  font-weight: 500;
}

.gbi-chain-value {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: .74rem;
  font-weight: 650;
  line-height: 1.2;
}

.gbi-chain-op {
  color: var(--text-placeholder);
  font-size: .7rem;
  font-weight: 500;
}

.gbi-chain-step.feature-mult .gbi-chain-value {
  color: var(--text-primary);
}

.gbi-chain-step.tier-mult .gbi-chain-value {
  color: var(--tier-color);
}

.gbi-chain-step.final .gbi-chain-value {
  color: var(--ocean-light);
  font-size: .8rem;
}

.gbi-chain-step.final.discounted .gbi-chain-value {
  color: var(--tier-color);
}

.gbi-tier-badge {
  border-radius: var(--radius-sm);
  background: rgba(var(--golden-rgb), .07);
  border: 1px solid rgba(var(--golden-rgb), .18);
  flex-direction: row;
  flex: 0 auto;
  align-self: center;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  padding: 3px 8px;
  display: flex;
}

.gbi-tier-badge-percent {
  font-size: .85rem;
  font-weight: var(--fw-title);
  letter-spacing: -.3px;
  color: var(--golden-dark);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.gbi-tier-badge-save {
  font-size: var(--fs-xs);
  font-weight: var(--fw-body);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}

.gen-btn-island .gp-actions {
  gap: 8px;
  width: 100%;
}

.gen-btn-island .gp-btn-gen {
  padding-top: calc(var(--fluid-pad)  - 4px);
  padding-bottom: calc(var(--fluid-pad)  - 4px);
}

.gbi-warning {
  border-radius: var(--radius-sm);
  background: rgba(var(--warning-rgb), .1);
  border: .5px solid rgba(var(--warning-rgb), .28);
  color: var(--warning);
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: .62rem;
  line-height: 1.4;
  display: flex;
}

.gbi-warning i {
  flex-shrink: 0;
}

.gbi-warning span {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.task-island {
  opacity: 0;
  -webkit-overflow-clipping: clip;
  width: 0;
  box-shadow: none;
  z-index: 6;
  transition: width .5s var(--ease-spring), margin .5s var(--ease-spring);
  background: none;
  border-radius: 0;
  flex-shrink: 0;
  margin: 0;
  position: relative;
  overflow: clip;
}

.island-gen-mode .task-island {
  opacity: 1;
  border-radius: var(--radius-xl);
  background: var(--surface-glass-strong);
  width: 100%;
  min-height: clamp(160px, 20vh, 260px);
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  box-shadow: var(--glass-edge-top), var(--glass-edge-bottom), 0 0 0 1px var(--border-subtle);
  flex: 1;
  margin: 0;
}

.task-island-inner {
  height: 100%;
  padding: var(--fluid-pad) var(--fluid-pad) calc(var(--fluid-pad)  - 4px);
  gap: var(--fluid-gap-sm);
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  overflow: hidden;
}

@media (max-height: 860px) {
  .gen-btn-island.open {
    overflow: hidden;
  }

  .gen-btn-island.open .gen-btn-island-inner {
    min-height: 0;
    overflow-y: auto;
  }
}

.task-island-header {
  border-bottom: 1px solid rgba(var(--ocean-deep-rgb), .05);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  display: flex;
}

.task-island-header .title {
  font-weight: 600;
  font-size: var(--fluid-font-lg);
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  display: flex;
}

.task-island-header .title i {
  color: var(--ocean-light);
}

.task-island-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.task-island-header .task-badge {
  background: rgba(var(--ocean-cyan-rgb), .1);
  color: var(--ocean-light);
  border-radius: 100px;
  padding: 2px 12px;
  font-size: .6rem;
  font-weight: 600;
  line-height: 16px;
}

.task-clear-btn {
  color: var(--text-placeholder);
  cursor: pointer;
  transition: all var(--transition-base);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: .85rem;
}

.task-clear-btn:hover {
  background: rgba(var(--error-rgb), .1);
  color: var(--error);
}

.task-cancel-btn {
  color: var(--text-placeholder);
  cursor: pointer;
  transition: all var(--transition-base);
  background: none;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  padding: 2px 6px;
  font-size: .72rem;
}

.task-cancel-btn:hover {
  background: rgba(var(--error-rgb), .12);
  color: var(--error);
}

.task-island .tasks-area {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: none;
  border: none;
  border-radius: 0;
  flex: 1;
  min-height: 0;
  padding: 0;
}

.island-gen-mode .new-sidebar, .island-gen-mode .task-island {
  transition: none;
}

.island-gen-mode .main-content {
  top: 14px;
  bottom: 14px;
  right: 28px;
  left: var(--fluid-sidebar);
  opacity: 0;
  pointer-events: none;
  max-width: none;
  margin: 0;
  animation: none;
  position: absolute;
}

.island-gen-mode .left-col-stack {
  left: var(--fluid-gap);
  top: var(--fluid-gap);
  bottom: var(--fluid-gap);
  width: var(--fluid-sidebar);
  pointer-events: none;
  max-height: none;
  display: none;
  position: absolute;
}

.mockup-sidebar-off .left-col-stack {
  pointer-events: none;
  display: none;
}

.mockup-sidebar-off .main-content {
  transition: opacity var(--transition-smooth);
}

@media (prefers-reduced-motion: reduce) {
  .island-gen-mode .main-content, .task-island {
    transition: opacity var(--transition-fast) !important;
    transform: none !important;
  }
}

.csb-root {
  z-index: 10;
  flex-shrink: 0;
  position: relative;
}

.csb-bar {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .4), 0 2px 8px rgba(var(--ocean-deep-rgb), .04);
  cursor: pointer;
  transition: background var(--transition-base), box-shadow var(--transition-base);
  -webkit-user-select: none;
  user-select: none;
  border-radius: 100px;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  display: flex;
}

.csb-bar:hover {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .5), 0 4px 16px rgba(var(--ocean-deep-rgb), .08);
}

.csb-dots {
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.csb-dot-item {
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  display: flex;
}

.csb-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  animation: 2s ease-in-out infinite csbPulse;
  display: inline-block;
}

.csb-dot-item:first-child .csb-dot {
  animation-delay: 0s;
}

.csb-dot-item:nth-child(2) .csb-dot {
  animation-delay: .2s;
}

.csb-dot-item:nth-child(3) .csb-dot {
  animation-delay: .4s;
}

.csb-dot-item:nth-child(4) .csb-dot {
  animation-delay: .6s;
}

.csb-dot-item:nth-child(5) .csb-dot {
  animation-delay: .8s;
}

.csb-dot-item:nth-child(6) .csb-dot {
  animation-delay: 1s;
}

@keyframes csbPulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .55;
  }
}

.csb-dot-label {
  font-size: var(--fluid-font-xs);
  letter-spacing: .03em;
  font-weight: 600;
  line-height: 1;
}

.csb-toggle {
  background: rgba(var(--ocean-light-rgb), .08);
  width: 16px;
  height: 16px;
  color: var(--ocean-mid, var(--yue-ui-navy-medium));
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .5rem;
  display: flex;
}

.csb-toggle:hover {
  background: rgba(var(--ocean-light-rgb), .15);
  color: var(--text-primary);
}

.csb-panel {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  min-width: 340px;
  max-width: 420px;
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .5), 0 8px 32px rgba(var(--ocean-deep-rgb), .12), 0 0 0 .5px rgba(var(--glass-tint-rgb), .3);
  animation: csbPanelIn var(--dur-2) var(--ease-out-back);
  border-radius: 16px;
  padding: 14px 16px;
  z-index: 2147483647 !important;
}

@keyframes csbPanelIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.csb-panel-header {
  border-bottom: 1px solid rgba(var(--ocean-deep-rgb), .06);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  display: flex;
}

.csb-panel-title {
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  letter-spacing: -.01em;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  display: flex;
}

.csb-panel-title i {
  color: var(--ocean-primary);
  font-size: .72rem;
}

.csb-panel-actions {
  align-items: center;
  gap: 6px;
  display: flex;
}

.csb-refresh-btn {
  background: rgba(var(--ocean-cyan-rgb), .12);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
  border: none;
  border-radius: 100px;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: .62rem;
  font-weight: 600;
  display: flex;
}

.csb-refresh-btn:hover:not(:disabled) {
  background: rgba(var(--ocean-cyan-rgb), .2);
}

.csb-refresh-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.csb-refresh-btn i {
  font-size: .58rem;
}

.csb-detail-list {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.csb-detail-row {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  transition: background var(--transition-fast);
  border-radius: 10px;
  gap: 10px;
  padding: 8px 10px;
  display: flex;
}

.csb-detail-row:hover {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
}

.csb-detail-icon {
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  font-size: .72rem;
  display: flex;
}

.csb-detail-body {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.csb-detail-head {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.csb-detail-label {
  font-size: var(--fluid-font-sm);
  color: var(--text-primary);
  font-weight: 600;
}

.csb-detail-status {
  font-size: var(--fluid-font-xs);
  letter-spacing: .02em;
  white-space: nowrap;
  border-radius: 100px;
  padding: 2px 8px;
  font-weight: 600;
}

.csb-detail-text {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid, var(--yue-ui-navy-medium));
  word-break: break-all;
  line-height: 1.35;
}

.csb-detail-time {
  font-size: var(--fluid-font-xs);
  color: rgba(var(--slate-blue-rgb), .6);
  font-weight: 500;
}

.csb-error-log {
  border-top: 1px solid rgba(var(--error-rgb), .12);
  margin-top: 10px;
  padding-top: 8px;
}

.csb-error-log-title {
  color: var(--error);
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  font-size: .62rem;
  font-weight: 600;
  display: flex;
}

.csb-error-log-item {
  background: rgba(var(--error-rgb), .04);
  border-radius: 6px;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 3px;
  padding: 4px 8px;
  font-size: .6rem;
  line-height: 1.4;
  display: flex;
}

.csb-error-time {
  color: rgba(var(--slate-blue-rgb), .5);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-weight: 600;
}

.csb-error-source {
  color: var(--error);
  flex-shrink: 0;
  font-weight: 600;
}

.csb-error-msg {
  color: var(--ocean-mid, var(--yue-ui-navy-medium));
  word-break: break-all;
  flex: 1;
  min-width: 0;
}

.csb-restart-btn {
  background: rgba(var(--warning-rgb), .12);
  color: var(--warning);
  cursor: pointer;
  transition: background var(--transition-fast);
  border: none;
  border-radius: 100px;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: .62rem;
  font-weight: 600;
  display: flex;
}

.csb-restart-btn:hover:not(:disabled) {
  background: rgba(var(--warning-rgb), .2);
}

.csb-restart-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.csb-restart-btn i {
  font-size: .58rem;
}

.csb-restart-feedback {
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  font-size: .62rem;
  font-weight: 600;
  display: flex;
}

.csb-restart-feedback.success {
  background: rgba(var(--emerald-rgb), .1);
  color: rgb(var(--emerald-rgb));
}

.csb-restart-feedback.error {
  background: rgba(var(--error-rgb), .1);
  color: var(--error);
}

.csb-diag-section {
  border-top: 1px solid rgba(var(--ocean-deep-rgb), .06);
  margin-top: 10px;
  padding-top: 8px;
}

.csb-diag-title {
  color: var(--text-primary);
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  font-size: .62rem;
  font-weight: 600;
  display: flex;
}

.csb-diag-title i {
  color: var(--ocean-primary);
  font-size: .58rem;
}

.csb-diag-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 6px;
  display: grid;
}

.csb-diag-cell {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  border-radius: 8px;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  display: flex;
}

.csb-diag-label {
  color: rgba(var(--slate-blue-rgb), .6);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .56rem;
  font-weight: 600;
}

.csb-diag-value {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  font-weight: 650;
}

.csb-diag-last-restart {
  color: rgba(var(--slate-blue-rgb), .6);
  margin-bottom: 4px;
  font-size: .58rem;
  font-weight: 500;
}

.csb-diag-history {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.csb-diag-history-item {
  background: rgba(var(--ocean-deep-rgb), .03);
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: .58rem;
  line-height: 1.4;
  display: flex;
}

.csb-diag-history-time {
  color: rgba(var(--slate-blue-rgb), .5);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-weight: 600;
}

.csb-diag-history-badge {
  border-radius: 100px;
  flex-shrink: 0;
  padding: 1px 5px;
  font-size: .52rem;
  font-weight: 600;
}

.csb-diag-history-badge.manual {
  background: rgba(var(--warning-rgb), .12);
  color: var(--warning);
}

.csb-diag-history-badge.auto {
  background: rgba(var(--ocean-cyan-rgb), .12);
  color: var(--ocean-primary);
}

.csb-diag-history-result {
  flex-shrink: 0;
  font-size: .52rem;
  font-weight: 600;
}

.csb-diag-history-result.ok {
  color: rgb(var(--emerald-rgb));
}

.csb-diag-history-result.fail {
  color: var(--error);
}

.csb-diag-history-reason {
  color: var(--ocean-mid, var(--yue-ui-navy-medium));
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.csb-panel {
  flex-direction: column;
  width: 640px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 120px);
  padding-bottom: 0;
  display: flex;
}

.csb-panel-body {
  scrollbar-width: thin;
  flex: auto;
  min-height: 0;
  padding-bottom: 12px;
  overflow-y: auto;
}

.csb-panel-body::-webkit-scrollbar {
  width: 6px;
}

.csb-panel-body::-webkit-scrollbar-thumb {
  background: rgba(var(--ocean-deep-rgb), .18);
  border-radius: 100px;
}

.csb-copy-btn {
  border: 1px solid rgba(var(--ocean-deep-rgb), .14);
  background: rgba(var(--glass-tint-rgb), .5);
  color: var(--text-secondary);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  border-radius: 100px;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-weight: 600;
  display: inline-flex;
}

.csb-copy-btn:hover {
  background: rgba(var(--ocean-light-rgb), .16);
  color: var(--text-primary);
}

.csb-verdict {
  font-size: var(--fluid-font-sm);
  border-radius: 12px;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  padding: 9px 12px;
  display: flex;
}

.csb-verdict > svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.csb-verdict.ok {
  background: rgba(var(--emerald-rgb), .1);
  color: rgb(var(--emerald-rgb));
}

.csb-verdict.fixable {
  background: rgba(var(--warning-rgb), .12);
  color: var(--warning);
}

.csb-verdict.need-help {
  background: rgba(var(--error-rgb), .12);
  color: var(--error);
}

.csb-verdict-headline {
  font-weight: 700;
  line-height: 1.4;
}

.csb-verdict-sub {
  font-size: var(--fluid-font-xs);
  opacity: .85;
  margin-top: 2px;
  line-height: 1.4;
}

.csb-issues {
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  display: flex;
}

.csb-issue {
  background: rgba(var(--glass-tint-rgb), .45);
  box-shadow: inset 0 0 0 1px rgba(var(--ocean-deep-rgb), .07);
  border-radius: 12px;
  padding: 9px 12px 9px 14px;
  position: relative;
  overflow: hidden;
}

.csb-issue:before {
  content: "";
  width: 3px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.csb-issue.sev-error:before {
  background: var(--error);
}

.csb-issue.sev-warn:before {
  background: var(--warning);
}

.csb-issue-head {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  display: flex;
}

.csb-issue-badge {
  border-radius: 100px;
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: .55rem;
  font-weight: 700;
}

.csb-issue-badge.sev-error {
  background: rgba(var(--error-rgb), .14);
  color: var(--error);
}

.csb-issue-badge.sev-warn {
  background: rgba(var(--warning-rgb), .14);
  color: var(--warning);
}

.csb-issue-title {
  color: var(--text-primary);
  font-weight: 700;
  font-size: var(--fluid-font-sm);
  line-height: 1.35;
}

.csb-issue-cause {
  color: var(--text-secondary);
  font-size: var(--fluid-font-xs);
  margin-bottom: 5px;
  line-height: 1.55;
}

.csb-issue-steps {
  color: var(--text-secondary);
  font-size: var(--fluid-font-xs);
  margin: 0 0 7px;
  padding-left: 18px;
  line-height: 1.6;
}

.csb-issue-steps li {
  margin-bottom: 1px;
}

.csb-issue .csb-restart-btn {
  margin-top: 0;
}

@media (max-width: 920px) {
  .csb-panel {
    min-width: 280px;
    max-width: calc(100vw - 40px);
  }

  .csb-dots {
    scrollbar-width: none;
    max-width: 200px;
    overflow-x: auto;
  }

  .csb-dots::-webkit-scrollbar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csb-dot, .csb-panel {
    animation: none !important;
  }

  .csb-bar {
    transition: none !important;
  }
}

.ha-root {
  align-items: center;
  display: flex;
}

.ha-pills {
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.ha-pill {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
  border: 1px solid rgba(var(--glass-tint-rgb), .12);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .1);
  cursor: default;
  transition: all var(--transition-fast);
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  border-radius: 999px;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  display: flex;
}

.ha-pill:hover {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
  border-color: rgba(var(--bright-cyan-rgb), .25);
}

.ha-pill.active {
  background: rgba(var(--bright-cyan-rgb), .12);
  border-color: rgba(var(--bright-cyan-rgb), .3);
}

.ha-pill-today {
  cursor: pointer;
}

.ha-pill-streak {
  background: rgba(var(--orange-rgb), .08);
  border-color: rgba(var(--orange-rgb), .18);
}

.ha-pill-streak:hover {
  background: rgba(var(--orange-rgb), .12);
  border-color: rgba(var(--orange-rgb), .3);
}

.ha-pill-level {
  background: rgba(var(--gold-bright-rgb), .08);
  border-color: rgba(var(--gold-bright-rgb), .18);
}

.ha-pill-level:hover {
  background: rgba(var(--gold-bright-rgb), .12);
  border-color: rgba(var(--gold-bright-rgb), .3);
}

.ha-pill-icon {
  font-size: .72rem;
  line-height: 1;
}

.ha-pill-num {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1;
}

.ha-pill-streak .ha-pill-num {
  color: var(--card-accent-edit);
}

.ha-pill-level .ha-pill-num {
  color: var(--golden);
}

.ha-pill-label {
  color: rgba(var(--slate-blue-rgb), .7);
  white-space: nowrap;
  font-size: .6rem;
  font-weight: 600;
  line-height: 1;
}

.ha-loading {
  opacity: .5;
}

.ha-panel {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  min-width: 360px;
  max-width: 440px;
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .5), 0 8px 32px rgba(var(--ocean-deep-rgb), .12), 0 0 0 .5px rgba(var(--glass-tint-rgb), .3);
  animation: haPanelIn var(--dur-2) var(--ease-out-back);
  border-radius: 16px;
  padding: 16px 18px;
}

@keyframes haPanelIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ha-panel-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  display: flex;
}

.ha-panel-title {
  color: var(--text-primary);
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 650;
  display: flex;
}

.ha-panel-total {
  color: rgba(var(--slate-blue-rgb), .7);
  font-size: .68rem;
  font-weight: 600;
}

.ha-tier-track {
  scrollbar-width: none;
  align-items: center;
  gap: 0;
  padding: 4px 0;
  display: flex;
  overflow-x: auto;
}

.ha-tier-track::-webkit-scrollbar {
  display: none;
}

.ha-tier-group {
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

.ha-tier-line {
  background: rgba(var(--slate-blue-rgb), .15);
  border-radius: 1px;
  width: 16px;
  height: 2px;
}

.ha-tier-line.active {
  background: var(--ocean-primary);
}

.ha-tier-node {
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  gap: 3px;
  width: 40px;
  display: flex;
  position: relative;
}

.ha-tier-node .ha-tier-icon {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
  border: 2px solid;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  font-size: .72rem;
  font-weight: 650;
  display: flex;
}

.ha-tier-node.locked .ha-tier-icon {
  border-color: rgba(var(--slate-blue-rgb), .15);
  color: rgba(var(--slate-blue-rgb), .35);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
}

.ha-tier-node.current .ha-tier-icon {
  box-shadow: 0 0 8px;
}

.ha-tier-name {
  color: rgba(var(--slate-blue-rgb), .6);
  font-size: .58rem;
  font-weight: 600;
}

.ha-tier-node.current .ha-tier-name {
  color: var(--text-primary);
  font-weight: 650;
}

.ha-tier-badge {
  background: var(--ocean-primary);
  color: var(--text-inverse);
  white-space: nowrap;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .48rem;
  font-weight: 600;
  position: absolute;
  top: -4px;
}

.ha-progress-section {
  border-top: 1px solid rgba(var(--slate-blue-rgb), .1);
  margin-top: 14px;
  padding-top: 12px;
}

.ha-progress-row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  display: flex;
}

.ha-progress-label {
  color: rgba(var(--slate-blue-rgb), .7);
  font-size: .68rem;
  font-weight: 600;
}

.ha-progress-value {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-size: .68rem;
  font-weight: 600;
}

.ha-progress-bar {
  background: rgba(var(--slate-blue-rgb), .1);
  border-radius: 3px;
  height: 6px;
  overflow: hidden;
}

.ha-progress-fill {
  height: 100%;
  transition: width var(--dur-4) var(--ease-out-back);
  border-radius: 3px;
}

.ha-next-hint {
  background: rgba(var(--bright-cyan-rgb), .08);
  border-left: 2px solid var(--ocean-primary);
  color: var(--text-primary);
  border-radius: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  font-size: .66rem;
  line-height: 1.5;
}

.ha-next-hint b {
  color: var(--ocean-primary);
  font-weight: 650;
}

.ha-next-hint.ha-max-level {
  background: rgba(var(--gold-bright-rgb), .08);
  border-left-color: var(--golden);
}

.gh-root {
  margin: var(--fluid-gap, 20px) 0;
  border-radius: var(--fluid-radius, 16px);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .4), 0 2px 12px rgba(var(--ocean-deep-rgb), .03);
  padding: 20px 24px;
  position: relative;
}

.gh-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  display: flex;
}

.gh-title {
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  font-weight: 650;
  display: flex;
}

.gh-title i {
  color: var(--ocean-primary);
}

.gh-subtitle {
  color: rgba(var(--slate-blue-rgb), .6);
  margin-left: 4px;
  font-size: .68rem;
  font-weight: 500;
}

.gh-stats {
  align-items: center;
  gap: 12px;
  display: flex;
}

.gh-stat {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  display: flex;
}

.gh-stat-num {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1;
}

.gh-stat-label {
  color: rgba(var(--slate-blue-rgb), .6);
  font-size: .58rem;
  font-weight: 600;
}

.gh-stat-divider {
  background: rgba(var(--slate-blue-rgb), .12);
  width: 1px;
  height: 20px;
}

.gh-loading {
  text-align: center;
  color: rgba(var(--slate-blue-rgb), .5);
  padding: 40px 0;
  font-size: .78rem;
}

.gh-body {
  position: relative;
}

.gh-month-row {
  margin-bottom: 4px;
  display: flex;
}

.gh-day-label-spacer {
  flex-shrink: 0;
  width: 20px;
}

.gh-months {
  flex: 1;
  grid-template-columns: repeat(53, minmax(0, 1fr));
  gap: 2px;
  min-width: 0;
  display: grid;
}

.gh-month-label {
  color: rgba(var(--slate-blue-rgb), .5);
  text-align: left;
  white-space: nowrap;
  width: auto;
  min-width: 0;
  font-size: .5rem;
  font-weight: 600;
  overflow: visible;
}

.gh-grid-wrap {
  gap: 4px;
  display: flex;
}

.gh-day-labels {
  flex-shrink: 0;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 2px;
  width: 20px;
  display: grid;
}

.gh-day-label {
  color: rgba(var(--slate-blue-rgb), .4);
  text-align: right;
  justify-content: flex-end;
  align-items: center;
  height: auto;
  font-size: .55rem;
  font-weight: 600;
  line-height: 1.2;
  display: flex;
}

.gh-grid {
  flex: 1;
  grid-template-columns: repeat(53, minmax(0, 1fr));
  gap: 2px;
  min-width: 0;
  display: grid;
}

.gh-week {
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 2px;
  min-width: 0;
  display: grid;
}

.gh-cell {
  aspect-ratio: 1;
  border: .5px solid rgba(var(--slate-blue-rgb), .06);
  width: 100%;
  height: auto;
  transition: transform var(--dur-1) ease;
  cursor: pointer;
  border-radius: 2px;
}

.gh-cell:hover, .gh-cell.hovered {
  border-color: rgba(var(--bright-cyan-rgb), .4);
  z-index: 1;
  position: relative;
  transform: scale(1.3);
}

.gh-cell.future {
  cursor: default;
  border-color: #0000;
}

.gh-cell.future:hover {
  transform: none;
}

.gh-legend {
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  display: flex;
}

.gh-legend-label {
  color: rgba(var(--slate-blue-rgb), .5);
  font-size: .55rem;
  font-weight: 600;
}

.gh-legend-cell {
  border: .5px solid rgba(var(--slate-blue-rgb), .06);
  border-radius: 2px;
  width: 12px;
  height: 12px;
}

.gh-tooltip {
  background: rgba(var(--ocean-deep-rgb), var(--glass-alpha-far, .68));
  -webkit-backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  backdrop-filter: blur(var(--glass-blur-far)) saturate(var(--glass-saturate-far));
  pointer-events: none;
  z-index: 2147483647;
  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), .2);
  white-space: nowrap;
  border-radius: 8px;
  padding: 6px 10px;
  position: fixed;
}

.gh-tooltip-date {
  color: rgba(var(--glass-tint-rgb), .7);
  font-size: .62rem;
  font-weight: 600;
}

.gh-tooltip-count {
  color: var(--text-inverse);
  margin-top: 2px;
  font-size: .68rem;
  font-weight: 600;
}

@media (max-width: 920px) {
  .gh-root {
    padding: 14px 16px;
  }

  .gh-stats {
    gap: 8px;
  }

  .gh-stat-num {
    font-size: .88rem;
  }

  .gh-legend-cell {
    width: 10px;
    height: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ha-pill {
    transition: none !important;
  }

  .ha-panel {
    animation: none !important;
  }

  .gh-cell, .ha-progress-fill {
    transition: none !important;
  }
}

.theme-logo {
  transition: filter var(--dur-4) ease, transform var(--dur-3) ease;
  flex-shrink: 0;
  display: inline-flex;
}

.theme-logo:hover {
  filter: brightness(1.08) drop-shadow(0 6px 18px rgba(var(--ocean-light-rgb), .45));
}

.island-panel, .glass-surface, .glass {
  position: relative;
}

.left-sidebar:before, .right-sidebar:before, .quick-gen-section:before, .api-section:before, .tutorial-section:before, .tutorial-card:before, .hero-l-top:before, .gh-root:before, .ad-space-banner:before, .feature-card:before, .island-panel:before, .gp-section:before, .glass-surface:before, .glass:before, .new-sidebar.open:before, .settings-area:before, .tasks-area:before, .task-item:before {
  content: "";
  border-radius: inherit;
  background: rgba(var(--glass-bg-rgb), var(--scrim-alpha, 0));
  pointer-events: none;
  z-index: 0;
  transition: background var(--dur-2) var(--ease-out-expo);
  position: absolute;
  inset: 0;
}

.left-sidebar > *, .right-sidebar > *, .quick-gen-section > :not(.hero-logo-big), .hero-l-top > *, .island-panel > *, .gp-section > *, .feature-card > *, .new-sidebar.open > *, .settings-area > *, .tasks-area > *, .task-item > * {
  z-index: 1;
  position: relative;
}

.material-fullscreen-overlay {
  z-index: 9999;
  background: rgba(var(--yue-ui-black-rgb), .6);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  animation: mfs-overlay-in var(--dur-3) ease-out;
  justify-content: center;
  align-items: stretch;
  display: flex;
  position: fixed;
  inset: 0;
}

@keyframes mfs-overlay-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.material-fullscreen-container {
  background: rgba(var(--glass-tint-rgb), .95);
  width: 90%;
  max-width: 1400px;
  height: 90vh;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  animation: mfs-container-in var(--dur-3) ease-out;
  border-radius: 16px;
  flex-direction: column;
  margin: auto;
  display: flex;
  overflow: hidden;
}

@keyframes mfs-container-in {
  from {
    opacity: 0;
    transform: scale(.95)translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1)translateY(0);
  }
}

.material-fullscreen-header {
  border-bottom: 1px solid rgba(var(--glass-tint-rgb), .2);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  display: flex;
}

.material-fullscreen-title {
  color: var(--ocean-deep);
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
}

.material-fullscreen-title .count {
  color: var(--text-tertiary);
  background: rgba(var(--glass-tint-rgb), .1);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .75rem;
}

.material-fullscreen-actions {
  gap: 4px;
  display: flex;
}

.material-fullscreen-actions button {
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--dur-2);
  background: none;
  border: none;
  border-radius: 6px;
  align-items: center;
  padding: 6px 8px;
  display: inline-flex;
}

.material-fullscreen-actions button:hover {
  background: rgba(var(--ocean-light-rgb), .15);
  color: var(--neon-glow);
}

.material-fullscreen-body {
  flex: 1;
  gap: 1px;
  display: flex;
  overflow: hidden;
}

.material-fullscreen-tree-panel {
  border-right: 1px solid rgba(var(--glass-tint-rgb), .2);
  flex: 0 clamp(320px, 32%, 460px);
  min-width: 300px;
  padding: 12px;
  overflow-y: auto;
}

.material-fullscreen-grid-panel {
  flex: 1;
  min-width: 0;
  padding: 12px;
  overflow-y: auto;
}

.tli-history-row-actions {
  flex-shrink: 0;
  gap: 2px;
  display: flex;
}

.tli-history-row-btn {
  color: var(--text-tertiary);
  width: 26px;
  height: 26px;
  transition: all var(--dur-2);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .7rem;
  display: inline-flex;
}

.tli-history-row-btn:hover {
  background: rgba(var(--ocean-light-rgb), .15);
  color: var(--neon-glow);
}

.tli-history-row-view-island:hover {
  color: rgb(var(--bright-cyan-rgb));
}

.tli-history-row-fullscreen:hover {
  color: var(--warning);
}

.grsai-batch-view-island-btn:hover {
  color: rgb(var(--bright-cyan-rgb));
}

.grsai-batch-fullscreen-btn:hover {
  color: var(--warning);
}

button.hero-logo-big {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  padding: 0;
}

.perf-mode .marble-layer {
  display: none;
}

.theme-gallery-overlay {
  z-index: 2147483000;
  background: rgba(var(--ocean-deep-rgb), .42);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  animation: themeGalleryFadeIn var(--dur-2) ease-out both;
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: flex;
  position: fixed;
  inset: 0;
}

@keyframes themeGalleryFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.theme-gallery-panel {
  background: rgba(var(--glass-bg-rgb), .94);
  width: min(760px, 100%);
  max-height: min(560px, 100vh - 48px);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: var(--island-glow), 0 24px 80px rgba(var(--ocean-deep-rgb), .28);
  border: 1px solid rgba(var(--glass-tint-rgb), .22);
  animation: themeGalleryPopIn var(--dur-3) cubic-bezier(.34, 1.56, .64, 1) both;
  border-radius: 24px;
  padding: 22px 22px 16px;
  overflow-y: auto;
}

@keyframes themeGalleryPopIn {
  from {
    opacity: 0;
    transform: translateY(16px)scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.theme-gallery-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  display: flex;
}

.theme-gallery-title {
  color: var(--text-primary);
  font-size: 1.15rem;
  font-weight: 650;
}

.theme-gallery-sub {
  color: var(--text-secondary);
  margin-top: 3px;
  font-size: .8rem;
  line-height: 1.45;
}

.theme-gallery-close {
  background: rgba(var(--glass-tint-rgb), .6);
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-1) ease;
  border: none;
  border-radius: 10px;
  flex: none;
  font-size: 1.05rem;
  line-height: 1;
}

.theme-gallery-close:hover {
  background: rgba(var(--error-rgb), .14);
  color: var(--error);
  transform: scale(1.06);
}

.theme-gallery-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  display: grid;
}

@media (max-width: 640px) {
  .theme-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.theme-gallery-card {
  border: 2px solid rgba(var(--glass-tint-rgb), .16);
  background: rgba(var(--glass-bg-rgb), .7);
  cursor: pointer;
  text-align: left;
  transition: transform var(--dur-2) ease, border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
  border-radius: 16px;
  flex-direction: column;
  padding: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.theme-gallery-card:hover, .theme-gallery-card:focus-visible {
  border-color: var(--ocean-light);
  box-shadow: 0 8px 28px rgba(var(--ocean-light-rgb), .22);
  outline: none;
  transform: translateY(-3px);
}

.theme-gallery-card.current {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 3px rgba(var(--neon-glow-rgb), .18), 0 8px 28px rgba(var(--neon-glow-rgb), .12);
}

.theme-gallery-preview {
  width: 100%;
  height: 84px;
  transition: transform var(--dur-3) ease;
  display: block;
}

.theme-gallery-card:hover .theme-gallery-preview {
  transform: scale(1.04);
}

.theme-gallery-meta {
  padding: 10px 12px 12px;
}

.theme-gallery-name {
  color: var(--text-primary);
  font-size: .92rem;
  font-weight: 650;
  display: block;
}

.theme-gallery-desc {
  color: var(--text-tertiary);
  margin-top: 2px;
  font-size: .72rem;
  line-height: 1.4;
  display: block;
}

.theme-gallery-badge {
  background: rgba(var(--ocean-deep-rgb), .72);
  color: var(--text-inverse);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border-radius: 999px;
  padding: 2px 9px;
  font-size: .62rem;
  font-weight: 600;
  position: absolute;
  top: 8px;
  right: 8px;
}

.theme-gallery-foot {
  text-align: center;
  color: var(--text-tertiary);
  margin-top: 14px;
  font-size: .72rem;
}

.skin-center-overlay {
  z-index: 2147483000;
  background: rgba(var(--ocean-deep-rgb), .42);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  animation: skinCenterFadeIn var(--dur-2) ease-out both;
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: flex;
  position: fixed;
  inset: 0;
}

@keyframes skinCenterFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.skin-center-panel {
  background: rgba(var(--glass-bg-rgb), .94);
  width: min(820px, 100%);
  max-height: min(680px, 100vh - 48px);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: var(--island-glow), 0 24px 80px rgba(var(--ocean-deep-rgb), .28);
  border: 1px solid rgba(var(--glass-tint-rgb), .22);
  animation: skinCenterPopIn var(--dur-3) cubic-bezier(.34, 1.56, .64, 1) both;
  border-radius: 24px;
  padding: 22px 22px 16px;
  overflow-y: auto;
}

@keyframes skinCenterPopIn {
  from {
    opacity: 0;
    transform: translateY(16px)scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.skin-center-head {
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  display: flex;
}

.skin-center-mark {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: #fff;
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  font-size: 20px;
  font-weight: 650;
  display: flex;
}

.skin-center-title-block {
  flex: 1;
  min-width: 0;
}

.skin-center-title {
  color: var(--text-primary);
  font-size: 1.15rem;
  font-weight: 650;
}

.skin-center-sub {
  color: var(--text-secondary);
  margin-top: 3px;
  font-size: .78rem;
  line-height: 1.45;
}

.skin-center-close {
  background: rgba(var(--glass-tint-rgb), .6);
  width: 34px;
  height: 34px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-1) ease;
  border: none;
  border-radius: 50%;
  flex: none;
  font-size: 1.05rem;
  line-height: 1;
}

.skin-center-close:hover {
  background: rgba(var(--error-rgb), .14);
  color: var(--error);
  transform: scale(1.06);
}

.skin-center-label {
  color: var(--text-tertiary);
  letter-spacing: .05em;
  margin: 14px 2px 8px;
  font-size: .72rem;
  font-weight: 600;
}

.skin-center-current {
  background: linear-gradient(120deg, rgba(var(--ocean-light-rgb), .14), rgba(var(--glass-bg-rgb), .6));
  border: 1px solid rgba(var(--ocean-light-rgb), .18);
  border-radius: 18px;
  gap: 16px;
  padding: 16px;
  display: flex;
}

.skin-center-current-logo {
  color: #fff;
  border-radius: 16px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  font-size: 24px;
  font-weight: 650;
  display: flex;
}

.skin-center-current-info {
  flex: 1;
  min-width: 0;
}

.skin-center-current-name {
  color: var(--text-primary);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 650;
  display: flex;
}

.skin-center-current-dot {
  color: var(--success);
  background: rgba(var(--success-rgb), .16);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .68rem;
  font-weight: 600;
}

.skin-center-current-desc {
  color: var(--text-secondary);
  margin-top: 4px;
  font-size: .78rem;
  line-height: 1.5;
}

.skin-center-tags {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  display: flex;
}

.skin-center-tag {
  background: rgba(var(--ocean-light-rgb), .1);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: .66rem;
  font-weight: 600;
}

.skin-center-swatches {
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  display: grid;
}

@media (max-width: 640px) {
  .skin-center-swatches {
    grid-template-columns: repeat(2, 1fr);
  }
}

.skin-center-swatch {
  border: 2px solid rgba(var(--glass-tint-rgb), .16);
  background: rgba(var(--glass-bg-rgb), .7);
  cursor: pointer;
  text-align: left;
  transition: transform var(--dur-2) ease, border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
  border-radius: 16px;
  flex-direction: column;
  padding: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.skin-center-swatch:hover, .skin-center-swatch:focus-visible {
  border-color: var(--ocean-light);
  box-shadow: 0 8px 28px rgba(var(--ocean-light-rgb), .22);
  outline: none;
  transform: translateY(-3px);
}

.skin-center-swatch.current {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 3px rgba(var(--neon-glow-rgb), .18), 0 8px 28px rgba(var(--neon-glow-rgb), .12);
}

.skin-center-swatch-g {
  width: 100%;
  height: 64px;
  transition: transform var(--dur-3) ease;
  display: block;
}

.skin-center-swatch:hover .skin-center-swatch-g {
  transform: scale(1.04);
}

.skin-center-swatch-m {
  padding: 8px 10px 10px;
}

.skin-center-swatch-name {
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.3;
  display: block;
  overflow: hidden;
}

.skin-center-swatch-desc {
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-size: .62rem;
  line-height: 1.35;
  display: block;
  overflow: hidden;
}

.skin-center-swatch-badge {
  background: rgba(var(--ocean-deep-rgb), .72);
  color: var(--text-inverse);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border-radius: 999px;
  padding: 2px 9px;
  font-size: .62rem;
  font-weight: 600;
  position: absolute;
  top: 8px;
  right: 8px;
}

.skin-center-skins {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  display: grid;
}

@media (max-width: 640px) {
  .skin-center-skins {
    grid-template-columns: 1fr;
  }
}

.skin-center-skin {
  background: rgba(var(--glass-bg-rgb), .55);
  border: 1px solid rgba(var(--glass-tint-rgb), .7);
  box-shadow: var(--island-glow);
  opacity: .72;
  border-radius: 18px;
  padding: 16px;
}

.skin-center-skin-top {
  align-items: center;
  gap: 10px;
  display: flex;
}

.skin-center-skin-icon {
  color: #fff;
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  font-size: 16px;
  display: flex;
}

.skin-center-skin-name {
  color: var(--text-primary);
  font-size: .9rem;
  font-weight: 650;
}

.skin-center-skin-badge {
  background: rgba(var(--ocean-deep-rgb), .08);
  color: var(--text-tertiary);
  border-radius: 999px;
  margin-left: auto;
  padding: 3px 9px;
  font-size: .62rem;
  font-weight: 600;
}

.skin-center-skin-desc {
  color: var(--text-secondary);
  margin-top: 8px;
  font-size: .72rem;
  line-height: 1.5;
}

.skin-center-opacity {
  background: rgba(var(--glass-bg-rgb), .6);
  border: 1px solid rgba(var(--glass-tint-rgb), .18);
  border-radius: 16px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}

.skin-center-opacity-name {
  color: var(--text-secondary);
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 600;
}

.skin-center-opacity-slider {
  flex: 1;
  min-width: 0;
}

.skin-center-opacity-value {
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  font-size: .78rem;
  font-weight: 600;
}

.skin-center-foot {
  text-align: center;
  color: var(--text-tertiary);
  margin-top: 16px;
  font-size: .72rem;
}

.cc-btn {
  font-size: var(--fluid-font-base);
  cursor: pointer;
  transition: transform var(--transition-quick), box-shadow var(--transition-quick), background var(--transition-quick), filter var(--transition-quick);
  border: none;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-weight: 600;
  display: flex;
}

.cc-btn-primary {
  background: var(--gradient-primary);
  color: var(--yue-ui-white);
  box-shadow: 0 10px 28px rgba(var(--ocean-light-rgb), .32), inset 0 1px 0 rgba(var(--yue-ui-white-rgb), .35);
}

.cc-btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 14px 34px rgba(var(--ocean-light-rgb), .44), inset 0 1px 0 rgba(var(--yue-ui-white-rgb), .45);
  transform: translateY(-1px);
}

.cc-btn-danger {
  border: 1px solid rgba(var(--error-rgb), .34);
  background: rgba(var(--error-rgb), .12);
  color: var(--error);
}

.cc-btn-danger:hover {
  background: rgba(var(--error-rgb), .18);
  border-color: rgba(var(--error-rgb), .5);
  transform: translateY(-1px);
}

.cc-cancel-btn {
  border: 1px solid rgba(var(--glass-tint-rgb), .25);
  background: rgba(var(--glass-bg-rgb), .55);
  color: var(--text-secondary);
}

.cc-cancel-btn:hover {
  background: rgba(var(--glass-bg-rgb), .75);
  color: var(--text-primary);
}

.tli-section-label {
  letter-spacing: .04em;
  color: var(--text-placeholder);
  border-top: 1px dashed rgba(var(--ocean-deep-rgb), .1);
  text-transform: uppercase;
  margin-top: 4px;
  padding: 6px 4px 2px;
  font-size: .58rem;
  font-weight: 600;
}

.tli-section-label:first-child {
  border-top: none;
  padding-top: 2px;
}

.tli-error-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
}

.tli-history-row-error {
  color: var(--error);
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin-top: 4px;
  font-size: .58rem;
  display: flex;
  overflow: hidden;
}

.tli-more-btn {
  border: 1px solid rgba(var(--ocean-cyan-rgb), .22);
  background: rgba(var(--ocean-cyan-rgb), .08);
  color: var(--ocean-light);
  cursor: pointer;
  transition: background var(--transition-quick), border-color var(--transition-quick);
  border-radius: 999px;
  align-self: center;
  margin: 8px 0 4px;
  padding: 6px 16px;
  font-size: .62rem;
  font-weight: 600;
}

.tli-more-btn:hover {
  background: rgba(var(--ocean-cyan-rgb), .16);
  border-color: rgba(var(--ocean-cyan-rgb), .38);
}

@media (max-width: 1500px) {
  .main-layout {
    gap: calc(var(--fluid-gap) * .5);
  }

  .left-col-stack {
    max-height: calc(100% - 10px);
  }
}

@media (max-width: 1400px) {
  .left-col-stack {
    flex: 0 0 68px;
    width: 68px;
    min-width: 68px;
  }

  .left-sidebar {
    width: 68px;
    min-width: 68px;
  }

  .left-sidebar .nav-menu span, .left-sidebar .badge, .left-sidebar .user-name-top, .left-sidebar .compute-pill, .left-sidebar .contact-info, .left-sidebar .sidebar-actions, .left-sidebar .update-ann-island, .left-sidebar .nav-group-label, .left-sidebar .nav-menu .nav-group-label, .left-sidebar .sidebar-footer, .left-sidebar .perf-mode-toggle span, .left-sidebar .plan {
    display: none;
  }

  .left-sidebar .nav-menu a, .left-sidebar .nav-menu .nav-launch {
    justify-content: center;
    padding: 10px 0;
  }

  .left-sidebar .nav-menu li {
    position: relative;
  }

  .left-sidebar .nav-menu .nav-red-dot {
    margin-left: 0;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
  }

  .left-sidebar .nav-group-block + .nav-group-block {
    border-top: 1px solid rgba(var(--glass-tint-rgb), .16);
    margin-top: 6px;
    padding-top: 6px;
  }

  .left-sidebar .user-profile {
    justify-content: center;
    padding: 6px 0;
  }

  .left-sidebar .avatar-xl {
    width: 40px;
    height: 40px;
  }

  .left-sidebar .sidebar-contact {
    justify-content: center;
    padding: 8px 0;
  }

  .left-sidebar .sidebar-contact .qr-placeholder {
    margin: 0 auto;
  }

  .left-sidebar .perf-mode-toggle {
    justify-content: center;
    padding: 8px 0;
  }
}

.nav-red-dot {
  background: var(--danger, #ef4444);
  border-radius: 50%;
  width: 8px;
  min-width: 8px;
  height: 8px;
  margin-left: auto;
  box-shadow: 0 0 0 2px #ef444440;
}

.app-header {
  background: var(--surface-glass);
  height: 38px;
  -webkit-backdrop-filter: blur(calc(16px * var(--glass-blur-level, 1))) saturate(1.45);
  border-bottom: 1px solid rgba(var(--accent-cyan-rgb), .14);
  box-shadow: none;
  -webkit-app-region: drag;
  app-region: drag;
  z-index: 6;
  border-radius: 0;
  flex: none;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 0 0 12px;
  display: flex;
  position: relative;
}

.app-header button, .app-header input, .app-header [role="button"] {
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

.app-header-logo {
  width: 30px;
  height: 30px;
  box-shadow: none;
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-pro);
  background: none;
  border: none;
  flex: none;
  place-items: center;
  padding: 0;
  display: grid;
}

.app-header-logo:hover {
  transform: scale(1.08);
}

.app-header-logo .theme-logo {
  width: 100%;
  height: 100%;
}

.app-header-guide {
  border: 1px solid rgba(var(--accent-cyan-rgb), .25);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .45));
  height: 28px;
  color: var(--text-2, var(--text-secondary));
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-pro), color var(--dur-2) var(--ease-pro);
  border-radius: 8px;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
}

.app-header-guide:hover {
  border-color: var(--blue, var(--ocean-light));
  color: var(--blue, var(--ocean-light));
}

.app-header-version {
  flex: none;
  position: relative;
}

.app-header-version .ver-chip {
  border: 1px solid rgba(var(--accent-cyan-rgb), .25);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .45));
  height: 28px;
  color: var(--text-2, var(--text-secondary));
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-2) var(--ease-pro), color var(--dur-2) var(--ease-pro);
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.app-header-version .ver-chip:hover {
  border-color: var(--blue, var(--ocean-light));
  color: var(--blue, var(--ocean-light));
}

.ver-chip .ver-badge {
  background: #f59e0b;
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
  animation: 1.6s ease-in-out infinite verBadgePulse;
  box-shadow: 0 0 0 3px #f59e0b2e;
}

@keyframes verBadgePulse {
  0%, 100% {
    opacity: .55;
  }

  50% {
    opacity: 1;
  }
}

.ver-panel {
  z-index: 99998;
  background: rgba(var(--glass-bg-rgb), .86);
  width: 372px;
  max-width: calc(100vw - 24px);
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  border: 1px solid rgba(var(--accent-cyan-rgb), .22);
  color: var(--text-primary, #1d2733);
  text-align: left;
  animation: verPanelIn var(--dur-2, .18s) var(--ease-pro, ease);
  border-radius: 14px;
  position: fixed;
  overflow: hidden;
  box-shadow: 0 18px 50px #092a4a2e;
}

@keyframes verPanelIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ver-panel-head {
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 10px;
  display: flex;
}

.ver-panel-title {
  letter-spacing: .02em;
  font-size: 13px;
  font-weight: 700;
}

.ver-panel-cur {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

.ver-status {
  background: rgba(var(--accent-cyan-rgb), .08);
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  margin: 0 16px 12px;
  padding: 10px 12px;
  font-size: 12px;
  display: flex;
}

.ver-status .bar {
  background: rgba(var(--accent-cyan-rgb), .15);
  border-radius: 4px;
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
}

.ver-status .bar i {
  background: linear-gradient(90deg, var(--blue, #0a8fd1), #38bdf8);
  border-radius: 4px;
  height: 100%;
  transition: width .4s;
  display: block;
}

.ver-actions {
  gap: 8px;
  margin: 0 16px 12px;
  display: flex;
}

.ver-btn {
  border: 1px solid rgba(var(--accent-cyan-rgb), .3);
  background: rgba(var(--glass-bg-rgb), .45);
  height: 32px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-pro);
  border-radius: 9px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.ver-btn:hover:not(:disabled) {
  border-color: var(--blue, var(--ocean-light));
  color: var(--blue, var(--ocean-light));
}

.ver-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.ver-btn.primary {
  background: linear-gradient(135deg, var(--blue, #0a8fd1), #38bdf8);
  color: #fff;
  border: none;
}

.ver-btn.primary:hover:not(:disabled) {
  filter: brightness(1.06);
  color: #fff;
}

.ver-log {
  border-top: 1px solid rgba(var(--accent-cyan-rgb), .14);
  scrollbar-width: thin;
  max-height: 300px;
  overflow-y: auto;
}

.ver-log::-webkit-scrollbar {
  width: 6px;
}

.ver-log::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-cyan-rgb), .25);
  border-radius: 3px;
}

.ver-log::-webkit-scrollbar-track {
  background: none;
}

.ver-log-item {
  transition: background var(--dur-1) ease;
  padding: 11px 16px;
}

.ver-log-item + .ver-log-item {
  border-top: 1px solid rgba(var(--accent-cyan-rgb), .08);
}

.ver-log-item:hover {
  background: rgba(var(--accent-cyan-rgb), .05);
}

.ver-log-item.current, .ver-log-item.current:hover {
  background: rgba(var(--accent-cyan-rgb), .07);
}

.ver-log-top {
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.ver-log-ver {
  color: var(--blue, var(--ocean-light));
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 700;
}

.ver-log-tag {
  background: rgba(var(--accent-cyan-rgb), .16);
  color: var(--blue, var(--ocean-light));
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
}

.ver-log-date {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-size: 10.5px;
}

.ver-log-name {
  color: var(--text-2, var(--text-secondary));
  margin-top: 3px;
  font-size: 11.5px;
}

.ver-log-notes {
  color: var(--text-secondary);
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 11px;
  line-height: 1.55;
}

.ver-log-notes li + li {
  margin-top: 2px;
}

.ver-log-empty {
  color: var(--text-secondary);
  text-align: center;
  padding: 18px 16px;
  font-size: 11.5px;
}

.ver-log-more {
  border: none;
  border-top: 1px solid rgba(var(--accent-cyan-rgb), .08);
  width: 100%;
  color: var(--text-2, var(--text-secondary));
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-pro), background var(--dur-2) var(--ease-pro);
  background: none;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 9px;
  font-size: 11px;
  display: flex;
}

.ver-log-more:hover {
  color: var(--blue, var(--ocean-light));
  background: rgba(var(--accent-cyan-rgb), .05);
}

.app-header-slogan {
  letter-spacing: .01em;
  color: var(--text-primary);
  white-space: nowrap;
  flex: none;
  font-size: 15px;
  font-weight: 250;
}

.app-header-slogan .accent {
  color: var(--blue, var(--ocean-light));
  font-weight: 600;
}

.app-header-center {
  align-items: center;
  gap: 14px;
  margin-left: auto;
  display: flex;
}

.app-header-status {
  flex: none;
  align-items: center;
  margin-left: auto;
  display: flex;
}

.app-container:has(.app-header) .main-layout {
  margin-top: 0;
}

.main-layout {
  gap: 0 10px;
}

.app-header-win {
  align-items: stretch;
  height: 38px;
  margin-left: 8px;
  margin-right: -12px;
  display: flex;
}

.app-header-win button {
  width: 46px;
  color: var(--ocean-mid);
  cursor: pointer;
  transition: background var(--dur-1) ease, color var(--dur-1) ease;
  background: none;
  border: none;
  place-items: center;
  display: grid;
}

.app-header-win button:hover {
  background: rgba(var(--ocean-deep-rgb), .08);
  color: var(--text-primary);
}

.app-header-win button.win-close:hover {
  color: #fff;
  background: #e81123;
}

.app-header-win button:focus-visible {
  outline: 2px solid var(--ocean-cyan);
  outline-offset: -2px;
}

:root:not([data-theme]) .fluid-canvas-wrap:before, [data-theme="ocean"] .fluid-canvas-wrap:before {
  content: "";
  pointer-events: none;
  opacity: .55;
  background: linear-gradient(#9cc1e7 0%, #fafafa00 100%);
  position: absolute;
  inset: 0;
}

:root:not([data-theme]) .fluid-canvas-wrap:after, [data-theme="ocean"] .fluid-canvas-wrap:after {
  content: "";
  pointer-events: none;
  -webkit-mask-composite: source-in, xor;
  -webkit-mask-composite: source-in;
  background-image: linear-gradient(90deg, #00000006 1px, #0000 0), linear-gradient(#00000006 1px, #0000 0);
  background-position: 0 -12px;
  background-size: 90px 90px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, #0000 0, #000 15% 85%, #0000), linear-gradient(#0000 0, #000 15% 85%, #0000);
  mask-image: linear-gradient(90deg, #0000 0, #000 15% 85%, #0000), linear-gradient(#0000 0, #000 15% 85%, #0000);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

[data-theme]:not([data-theme="ocean"]) .fluid-canvas-wrap:before, [data-theme]:not([data-theme="ocean"]) .fluid-canvas-wrap:after {
  content: none;
  animation: none;
}

.nav-menu .nav-group-block {
  display: block;
}

.nav-menu .nav-group-label {
  letter-spacing: .05em;
  color: var(--text-tertiary);
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 4px;
  font-size: 10.5px;
  font-weight: 600;
  display: flex;
}

.nav-menu .nav-group-label:after {
  content: "";
  background: rgba(var(--accent-cyan-rgb), .14);
  flex: 1;
  height: 1px;
}

.nav-menu .nav-group-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu > .nav-group-block:first-child .nav-group-label {
  padding-top: 2px;
}

.welcome-gift-guide {
  z-index: 1100;
  background: linear-gradient(135deg, #f5b24429, #ffd18012), rgba(var(--yue-ui-black-rgb), .55);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  max-width: 320px;
  box-shadow: 0 8px 28px #e8912838, 0 2px 10px rgba(var(--yue-ui-black-rgb), .3);
  animation: wggIn var(--dur-4, .3s) cubic-bezier(.22, 1.2, .36, 1);
  border: 1px solid #f5b24473;
  border-radius: 14px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  display: flex;
  position: fixed;
  bottom: 18px;
  right: 18px;
}

@keyframes wggIn {
  from {
    opacity: 0;
    transform: translateY(10px)scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.welcome-gift-guide .wgg-close {
  background: rgba(var(--yue-ui-white-rgb), .08);
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--dur-2, .15s) ease, color var(--dur-2, .15s) ease;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
  position: absolute;
  top: 5px;
  right: 5px;
}

.welcome-gift-guide .wgg-close:hover {
  background: rgba(var(--yue-ui-white-rgb), .16);
  color: var(--text-primary);
}

.welcome-gift-guide .wgg-icon {
  color: #f5b244;
  filter: drop-shadow(0 0 6px #f5b24466);
  background: linear-gradient(135deg, #f5b2444d, #e8912824);
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  display: flex;
}

.welcome-gift-guide .wgg-texts {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.welcome-gift-guide .wgg-title {
  color: var(--text-primary);
  letter-spacing: .3px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.welcome-gift-guide .wgg-desc {
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10.5px;
  overflow: hidden;
}

.welcome-gift-guide .wgg-cta {
  letter-spacing: .5px;
  color: var(--yue-ui-white);
  cursor: pointer;
  transition: transform var(--dur-2, .15s) var(--transition-bouncy, ease), box-shadow var(--dur-2, .15s) ease;
  background: linear-gradient(135deg, #f5b244, #e89128);
  border: none;
  border-radius: 100px;
  flex-shrink: 0;
  padding: 7px 13px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 10px #e8912866;
}

.welcome-gift-guide .wgg-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px #e8912880;
}

.welcome-gift-guide .wgg-cta:active {
  transform: translateY(0);
}

.app-header-sync {
  width: 26px;
  height: 26px;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  cursor: pointer;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
  display: flex;
}

.app-header-sync:hover {
  background: rgba(var(--glass-tint-rgb), .12);
  color: var(--accent);
}

.app-header-sync:disabled {
  opacity: .6;
  cursor: default;
}

.app-header-sync-spinning {
  animation: .9s linear infinite appHeaderSyncSpin;
}

@keyframes appHeaderSyncSpin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.sg-guide-container {
  top: 0;
  bottom: 0;
  left: calc(12px + var(--sidebar-width, 234px));
  pointer-events: none;
  z-index: 8;
  width: 12px;
  position: absolute;
  overflow: hidden;
}

.sg-progress-track {
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
  border-radius: 1px;
  width: 1px;
  position: absolute;
  top: 60px;
  bottom: 60px;
  left: 50%;
  overflow: hidden;
  transform: translateX(-50%);
}

.sg-progress-fill {
  background: linear-gradient(180deg, rgba(var(--neon-glow-rgb), .5) 0%, rgba(var(--ocean-cyan-rgb), .6) 50%, rgba(var(--ocean-cyan-rgb), .7) 100%);
  transform-origin: top;
  width: 100%;
  height: 100%;
  transition: transform var(--dur-1) linear;
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleY(0);
}

.sg-particle {
  background: linear-gradient(180deg, transparent, var(--ocean-cyan));
  width: 2px;
  height: 10px;
  box-shadow: 0 0 4px rgba(var(--ocean-cyan-rgb), .6);
  opacity: 0;
  border-radius: 1px;
  margin-left: -1px;
  position: absolute;
  left: 50%;
}

.sg-particle:first-child {
  animation-delay: 0s;
}

.sg-particle:nth-child(2) {
  animation-delay: .6s;
}

.sg-particle:nth-child(3) {
  animation-delay: 1.2s;
}

.sg-particle:nth-child(4) {
  animation-delay: 1.8s;
}

.sg-particle:nth-child(5) {
  animation-delay: 2.4s;
}

@media (max-width: 768px) {
  .sg-guide-container {
    display: none;
  }
}

.island-gen-mode .sg-guide-container {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .sg-particle, .sg-progress-fill {
    transition: none !important;
    animation: none !important;
  }

  .sg-progress-fill {
    transition: transform var(--dur-1) linear;
  }
}

.gp-panel {
  gap: var(--fluid-gap);
  color: var(--ocean-deep);
  font-size: var(--fluid-font-base);
  perspective: 1200px;
  flex-direction: column;
  padding: 4px 2px 20px;
  display: flex;
  position: relative;
}

.gp-related-switch {
  background: linear-gradient(120deg, rgba(var(--neon-glow-rgb), .08), rgba(var(--glass-tint-rgb), .12));
  border: 1px dashed rgba(var(--neon-glow-rgb), .35);
  border-radius: calc(var(--fluid-radius)  - 2px);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  display: flex;
}

.gp-related-switch-text {
  align-items: center;
  gap: 6px;
  line-height: 1.4;
  display: inline-flex;
}

.gp-related-switch-text i {
  color: var(--ocean-light);
}

.gp-related-switch-text b {
  color: var(--ocean-deep);
  font-weight: 600;
}

.gp-related-switch-btn {
  background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-light));
  color: var(--yue-ui-white);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(var(--ocean-light-rgb, 90, 170, 220), .35);
  transition: transform var(--dur-2) var(--ease-out-expo), box-shadow var(--dur-2) var(--ease-out-expo), filter var(--dur-2);
  border: none;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-weight: 600;
  display: inline-flex;
}

.gp-related-switch-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 14px rgba(var(--ocean-light-rgb, 90, 170, 220), .45);
  transform: translateY(-1px);
}

.gp-related-switch-btn:active {
  transform: translateY(0)scale(.98);
}

.gp-comfy-notice {
  background: linear-gradient(120deg, rgba(var(--ocean-cyan-rgb), .08), rgba(var(--glass-tint-rgb), .12));
  border: 1px dashed rgba(var(--ocean-cyan-rgb), .38);
  border-radius: calc(var(--fluid-radius)  - 2px);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  line-height: 1.45;
  display: flex;
}

.gp-comfy-notice-text {
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  display: inline-flex;
}

.gp-comfy-notice-text i {
  color: var(--ocean-light);
  margin-top: 2px;
}

.gp-comfy-notice-action {
  background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-light));
  color: var(--yue-ui-white);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(var(--ocean-light-rgb, 90, 170, 220), .35);
  transition: transform var(--dur-2) var(--ease-out-expo), box-shadow var(--dur-2) var(--ease-out-expo), filter var(--dur-2);
  white-space: nowrap;
  border: none;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-weight: 600;
  display: inline-flex;
}

.gp-comfy-notice-action:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 14px rgba(var(--ocean-light-rgb, 90, 170, 220), .45);
  transform: translateY(-1px);
}

.gp-comfy-notice-action:active {
  transform: translateY(0)scale(.98);
}

.gp-section {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .28);
  border-radius: var(--fluid-radius);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .25), 0 4px 20px rgba(var(--ocean-deep-rgb), .04);
  padding: var(--fluid-pad) calc(var(--fluid-pad)  + 2px);
  transition: box-shadow var(--dur-3) var(--ease-out-expo), transform var(--dur-3) var(--ease-out-expo), background var(--dur-3) var(--ease-out-expo);
  -webkit-overflow-clipping: clip;
  position: relative;
  overflow: clip;
}

.gp-section:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .3), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .35), 0 6px 24px rgba(var(--ocean-deep-rgb), .06);
}

.gp-section-title {
  align-items: center;
  gap: var(--fluid-gap);
  color: var(--ocean-mid);
  font-weight: 600;
  font-size: var(--fluid-font-base);
  text-shadow: 0 0 12px rgba(var(--neon-glow-rgb), .05);
  margin-bottom: 12px;
  display: flex;
}

.gp-section-title i {
  color: var(--ocean-light);
  filter: drop-shadow(0 0 4px rgba(var(--neon-glow-rgb), .25));
}

.gp-section-title .gp-opt {
  font-weight: 400;
  font-size: var(--fluid-font-sm);
  color: var(--ocean-foam);
  margin-left: auto;
}

.gp-section.gp-accent-cyan, .gp-section.gp-accent-violet, .gp-section.gp-accent-amber, .gp-section.gp-accent-rose, .gp-section.gp-accent-emerald, .gp-section.gp-accent-blue, .gp-upload.gp-accent-cyan, .gp-upload.gp-accent-violet, .gp-upload.gp-accent-amber, .gp-upload.gp-accent-rose, .gp-upload.gp-accent-emerald, .gp-upload.gp-accent-blue {
  isolation: isolate;
  position: relative;
}

.gp-section[class*="gp-accent-"]:before, .gp-upload[class*="gp-accent-"]:before {
  content: "";
  pointer-events: none;
  z-index: -1;
  opacity: .5;
  will-change: transform;
  background-position: 0;
  background-size: 100% 200%;
  width: 200%;
  animation: 6s ease-in-out infinite gp-flow;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

@keyframes gp-flow {
  0%, 100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-50%);
  }
}

.gp-accent-cyan:before {
  background: linear-gradient(135deg, rgba(var(--bright-cyan-rgb), .12), rgba(var(--ocean-light-rgb), .08), rgba(var(--bright-cyan-rgb), .12));
}

.gp-accent-cyan .gp-section-title i {
  color: var(--ocean-cyan);
  filter: drop-shadow(0 0 6px rgba(var(--bright-cyan-rgb), .4));
}

.gp-accent-violet:before {
  background: linear-gradient(135deg, rgba(var(--ocean-light-rgb), .12), rgba(var(--ocean-cyan-rgb), .08), rgba(var(--ocean-light-rgb), .12));
}

.gp-accent-violet .gp-section-title i {
  color: var(--ocean-light);
  filter: drop-shadow(0 0 6px rgba(var(--ocean-light-rgb), .4));
}

.gp-accent-amber:before {
  background: linear-gradient(135deg, rgba(var(--warning-rgb), .12), rgba(var(--warning-rgb), .08), rgba(var(--warning-rgb), .12));
}

.gp-accent-amber .gp-section-title i {
  color: var(--warning);
  filter: drop-shadow(0 0 6px rgba(var(--warning-rgb), .4));
}

.gp-accent-rose:before {
  background: linear-gradient(135deg, rgba(var(--error-rgb), .12), rgba(var(--error-rgb), .08), rgba(var(--error-rgb), .12));
}

.gp-accent-rose .gp-section-title i {
  color: var(--error);
  filter: drop-shadow(0 0 6px rgba(var(--error-rgb), .4));
}

.gp-accent-emerald:before {
  background: linear-gradient(135deg, rgba(var(--success-rgb), .12), rgba(var(--success-rgb), .08), rgba(var(--success-rgb), .12));
}

.gp-accent-emerald .gp-section-title i {
  color: var(--success);
  filter: drop-shadow(0 0 6px rgba(var(--success-rgb), .4));
}

.gp-accent-blue:before {
  background: linear-gradient(135deg, rgba(var(--ocean-light-rgb), .12), rgba(var(--ocean-cyan-rgb), .08), rgba(var(--ocean-light-rgb), .12));
}

.gp-accent-blue .gp-section-title i {
  color: var(--ocean-light);
  filter: drop-shadow(0 0 6px rgba(var(--ocean-light-rgb), .4));
}

.gp-section[class*="gp-accent-"] {
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .25), 0 6px 24px rgba(var(--ocean-deep-rgb), .05);
  margin-bottom: -4px;
}

.gp-section[class*="gp-accent-"]:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .3), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .35), 0 10px 30px rgba(var(--ocean-deep-rgb), .07);
  transform: translateY(-2px);
}

.gp-upload {
  border: 1.5px dashed rgba(var(--neon-glow-rgb), .4);
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .15), 0 4px 20px rgba(var(--ocean-deep-rgb), .03);
  justify-content: center;
  align-items: center;
  gap: var(--fluid-gap);
  cursor: pointer;
  min-height: 120px;
  transition: box-shadow var(--dur-3) var(--ease-out-expo), border-color var(--dur-3) var(--ease-out-expo), transform var(--dur-3) var(--ease-out-expo), background var(--dur-3) var(--ease-out-expo);
  text-align: center;
  -webkit-overflow-clipping: clip;
  flex-direction: column;
  padding: 20px;
  display: flex;
  position: relative;
  overflow: clip;
}

.gp-upload:hover {
  border-color: var(--neon-glow);
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2), 0 6px 24px rgba(var(--neon-glow-rgb), .08);
  transform: translateY(-2px);
}

.gp-upload-split {
  gap: var(--fluid-gap);
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  display: grid;
}

.gp-upload-split > div {
  min-width: 0;
  display: flex;
}

.gp-upload-split > div > .gp-section {
  flex: 1;
}

@media (max-width: 640px) {
  .gp-upload-split {
    grid-template-columns: 1fr;
  }
}

.gp-upload.dragover {
  border-color: rgba(var(--neon-glow-rgb), .4);
}

.gp-upload .gp-upload-icon {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .12), rgba(var(--ocean-cyan-rgb), .08));
  width: 48px;
  height: 48px;
  color: var(--ocean-light);
  box-shadow: 0 0 20px rgba(var(--neon-glow-rgb), .15), inset 0 0 0 1px rgba(var(--glass-tint-rgb), .3);
  transition: transform var(--dur-3) var(--ease-out-expo), box-shadow var(--dur-3) var(--ease-out-expo);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  display: flex;
}

.gp-upload:hover .gp-upload-icon {
  box-shadow: 0 0 30px rgba(var(--neon-glow-rgb), .3), inset 0 0 0 1px rgba(var(--glass-tint-rgb), .5);
  transform: scale(1.1)translateY(-2px);
}

.gp-upload .gp-upload-text {
  color: var(--ocean-mid);
  font-weight: 600;
}

.gp-upload .gp-upload-hint {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-foam);
  line-height: 1.5;
}

.gp-upload.has-images {
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--fluid-gap);
  padding: 12px;
}

.gp-thumbs {
  gap: var(--fluid-gap);
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  width: 100%;
  margin-top: 10px;
  display: grid;
}

.gp-thumbs-inline {
  margin-top: 0;
}

.gp-thumb {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border-mid);
  background: rgb(var(--glass-tint-rgb));
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
}

.gp-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.gp-thumb.drag-over {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 2px rgba(var(--neon-glow-rgb), .35);
  opacity: .85;
}

.gp-thumb .gp-thumb-del {
  background: rgba(var(--ocean-deep-rgb), .6);
  width: 20px;
  height: 20px;
  color: var(--text-inverse);
  cursor: pointer;
  font-size: var(--fluid-font-xs);
  opacity: 0;
  transition: var(--transition-fast);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 4px;
  right: 4px;
}

.gp-thumb:hover .gp-thumb-del {
  opacity: 1;
}

.gp-thumb-more {
  color: var(--ocean-foam);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  background: rgb(var(--glass-tint-rgb));
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.gp-field {
  margin-bottom: 14px;
}

.gp-field > label {
  align-items: center;
  gap: var(--fluid-gap-sm);
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  margin-bottom: 6px;
  font-weight: 600;
  display: flex;
}

.gp-field > label i {
  color: var(--ocean-light);
  font-size: var(--fluid-font-sm);
}

.gp-field .gp-field-extra {
  color: var(--ocean-foam);
  font-weight: 400;
  font-size: var(--fluid-font-xs);
  margin-left: auto;
}

.gp-input, .gp-select, .gp-textarea {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .28);
  border-radius: var(--radius-sm);
  width: 100%;
  color: var(--ocean-deep);
  font-size: var(--fluid-font-base);
  transition: border-color var(--dur-3) var(--ease-out-expo), box-shadow var(--dur-3) var(--ease-out-expo), background var(--dur-3) var(--ease-out-expo);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  outline: none;
  padding: 9px 12px;
  font-family: inherit;
}

.gp-input:focus, .gp-select:focus, .gp-textarea:focus {
  border-color: var(--neon-glow);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: 0 0 0 3px rgba(var(--neon-glow-rgb), .1), 0 0 16px rgba(var(--neon-glow-rgb), .08);
}

.gp-textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.6;
}

.gp-input::placeholder, .gp-select::placeholder, .gp-textarea::placeholder {
  color: rgba(var(--ocean-mid-rgb), .55);
  font-weight: 400;
}

.gp-field .gp-ratio-custom-input {
  font-size: var(--fluid-font-sm);
  margin-top: 8px;
}

.gs-trigger {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-right: 34px;
  display: flex;
  position: relative;
}

.gs-trigger.gs-trigger-open {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 3px rgba(var(--neon-glow-rgb), .1), 0 0 16px rgba(var(--neon-glow-rgb), .08);
}

.gs-trigger-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.gs-trigger.gs-trigger-open .gs-arrow {
  transform: rotate(180deg);
}

.gs-arrow {
  color: var(--ocean-foam);
  transition: transform var(--dur-3) var(--ease-out-expo);
  pointer-events: none;
  font-size: 10px;
  position: absolute;
  right: 12px;
}

.gs-dropdown {
  z-index: 10003;
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-near, .88));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  box-shadow: 0 12px 40px rgba(var(--ocean-deep-rgb), .18), 0 0 0 1px rgba(var(--glass-tint-rgb), .08), inset 0 1px 0 #ffffff26;
  animation: gs-dropdown-in var(--dur-2) cubic-bezier(.16, 1, .3, 1) both;
  overflow: hidden;
}

.gs-dropdown.closing {
  animation: gs-dropdown-out var(--dur-2) cubic-bezier(.4, 0, 1, 1) both;
}

@keyframes gs-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-8px)scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

@keyframes gs-dropdown-out {
  from {
    opacity: 1;
    transform: translateY(0)scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-4px)scale(.98);
  }
}

@supports not ((-webkit-backdrop-filter: blur(calc(1px * var(--glass-blur-level, 1)))) or (backdrop-filter: blur(calc(1px * var(--glass-blur-level, 1))))) {
  .gs-dropdown {
    background: rgba(var(--glass-bg-rgb), .97);
  }
}

.gs-dropdown-list {
  max-height: inherit;
  padding: 4px;
  overflow-y: auto;
}

.gs-option {
  border-radius: var(--radius-sm);
  width: 100%;
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out-expo), color var(--dur-2) var(--ease-out-expo);
  background: none;
  border: none;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-weight: 500;
  display: flex;
}

.gs-option:hover {
  background: rgba(var(--neon-glow-rgb), .08);
}

.gs-option.active {
  background: rgba(var(--neon-glow-rgb), .14);
  color: var(--neon-glow);
  font-weight: 600;
}

.gs-option-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.gs-check {
  color: var(--neon-glow);
  flex-shrink: 0;
  font-size: 11px;
}

.gp-row {
  gap: var(--fluid-gap);
  display: flex;
}

.gp-row > * {
  flex: 1;
  min-width: 0;
}

.gp-chips {
  gap: var(--fluid-gap-sm);
  flex-wrap: wrap;
  display: flex;
}

.gp-chip {
  border: 1px solid rgba(var(--glass-tint-rgb), .25);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: transform var(--dur-3) var(--ease-out-expo), box-shadow var(--dur-3) var(--ease-out-expo), border-color var(--dur-3) var(--ease-out-expo), background var(--dur-3) var(--ease-out-expo);
  -webkit-user-select: none;
  user-select: none;
  border-radius: 999px;
  padding: 6px 13px;
  overflow: clip;
}

.gp-chip:hover {
  border-color: var(--neon-glow);
  box-shadow: 0 4px 14px rgba(var(--neon-glow-rgb), .1), 0 0 12px rgba(var(--neon-glow-rgb), .08);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  transform: translateY(-2px)scale(1.03);
}

.gp-chip.active {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  border-color: rgba(var(--ocean-cyan-rgb), .6);
  color: var(--text-inverse);
  box-shadow: 0 4px 18px rgba(var(--ocean-light-rgb), .4), 0 0 20px rgba(var(--ocean-cyan-rgb), .25), inset 0 1px 0 rgba(var(--glass-tint-rgb), .3);
  text-shadow: 0 1px 3px rgba(var(--shadow-rgb), .15);
}

.gp-chip-group-label {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  margin: 8px 0 4px;
}

.gp-actions {
  gap: var(--fluid-gap);
  align-items: center;
  display: flex;
}

.gp-btn {
  justify-content: center;
  align-items: center;
  gap: var(--fluid-gap);
  padding: var(--fluid-pad) calc(var(--fluid-pad)  + 2px);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  color: var(--text-inverse);
  font-size: var(--fluid-font-base);
  font-weight: var(--fw-title);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-pro), box-shadow var(--dur-2) var(--ease-pro);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12), 0 4px 14px rgba(var(--ocean-light-rgb), .22);
  border: none;
  flex: 1;
  display: inline-flex;
}

.gp-btn:hover:not(:disabled) {
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12), 0 6px 18px rgba(var(--ocean-light-rgb), .3);
  transform: translateY(-1px);
}

.gp-btn:active:not(:disabled) {
  box-shadow: var(--press-inset);
  transform: translateY(0);
}

.gp-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.gp-btn.secondary {
  background: var(--glass-bg-mid);
  color: var(--ocean-mid);
  border: 1px solid var(--glass-border-mid);
  box-shadow: none;
  flex: none;
}

.gp-btn.danger {
  background: linear-gradient(135deg, var(--error), var(--error));
  box-shadow: 0 4px 18px rgba(var(--error-rgb), .3);
}

.gp-progress {
  gap: var(--fluid-gap);
  flex-direction: column;
  display: flex;
}

.gp-progress-bar {
  background: var(--glass-bg-far);
  height: 8px;
  box-shadow: inset 0 1px 3px rgba(var(--ocean-deep-rgb), .1);
  border-radius: 999px;
  overflow: hidden;
}

.gp-progress-text {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  justify-content: space-between;
  display: flex;
}

.gp-gallery {
  gap: var(--fluid-gap);
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  display: grid;
}

.gp-gallery-grouped {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.gp-gallery-group {
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .08);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .06);
  padding: 12px;
}

.gp-gallery-group-header {
  align-items: center;
  gap: var(--fluid-gap);
  border-bottom: 1px solid rgba(var(--glass-tint-rgb), .06);
  margin-bottom: 10px;
  padding-bottom: 8px;
  display: flex;
}

.gp-gallery-group-header i {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-cyan);
  opacity: .7;
}

.gp-gallery-group-title {
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  opacity: .85;
  font-weight: 600;
}

.gp-gallery-group-count {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-cyan);
  opacity: .6;
  margin-left: auto;
}

.gp-result {
  border-radius: var(--fluid-radius);
  border: 1px solid var(--glass-border-mid);
  background: rgb(var(--glass-tint-rgb));
  cursor: zoom-in;
  content-visibility: auto;
  contain-intrinsic-size: auto 160px;
  transition: transform var(--dur-3) var(--ease-out-expo), box-shadow var(--dur-3) var(--ease-out-expo);
  box-shadow: var(--no-corners), 0 2px 10px rgba(var(--ocean-deep-rgb), .06);
  position: relative;
  overflow: hidden;
}

.gp-result:hover {
  box-shadow: var(--island-glow-hover), 0 16px 40px rgba(var(--ocean-deep-rgb), .14), 0 0 20px rgba(var(--neon-glow-rgb), .1);
  transform: translateY(-6px)scale(1.02);
}

.gp-result img {
  width: 100%;
  display: block;
}

.gp-result-guide {
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(var(--golden-rgb), .16), rgba(var(--warning-rgb), .08));
  border: 1px solid rgba(var(--golden-rgb), .5);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  line-height: 1.6;
  display: flex;
}

.gp-result-guide i {
  color: var(--golden);
  flex-shrink: 0;
  margin-top: 3px;
  font-size: 1rem;
}

.gp-result-guide strong {
  color: var(--ocean-deep);
  font-weight: 600;
  display: block;
}

.gp-result-guide span {
  color: var(--ocean-foam);
  display: block;
}

.gp-compare {
  aspect-ratio: 1;
  cursor: col-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: rgb(var(--ocean-deep-rgb));
  width: 100%;
  position: relative;
  overflow: hidden;
}

.gp-compare img {
  object-fit: contain;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.gp-compare-before {
  z-index: 1;
  position: absolute;
  inset: 0;
}

.gp-compare-divider {
  z-index: 2;
  background: rgba(var(--yue-ui-white-rgb), .95);
  width: 2px;
  box-shadow: 0 0 8px rgba(var(--yue-ui-black-rgb), .5);
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-1px);
}

.gp-compare-handle {
  background: rgba(var(--yue-ui-white-rgb), .96);
  width: 32px;
  height: 32px;
  color: var(--yue-ui-ink-soft);
  box-shadow: 0 2px 12px rgba(var(--yue-ui-black-rgb), .45);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gp-compare-label {
  z-index: 3;
  background: rgba(var(--yue-ui-black-rgb), .55);
  color: var(--yue-ui-white);
  pointer-events: none;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  position: absolute;
  top: 8px;
}

.gp-compare-label-before {
  left: 8px;
}

.gp-compare-label-after {
  right: 8px;
}

.gp-result-badge {
  z-index: 2;
  background: rgba(var(--ocean-deep-rgb), .72);
  color: var(--ocean-foam);
  pointer-events: none;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  position: absolute;
  top: 8px;
  left: 8px;
}

.gp-result .gp-result-actions {
  background: linear-gradient(transparent, rgba(var(--ocean-deep-rgb), .65));
  opacity: 0;
  transition: var(--transition-fast);
  justify-content: center;
  gap: 4px;
  padding: 6px;
  display: flex;
  position: absolute;
  inset: auto 0 0;
}

.gp-result:hover .gp-result-actions {
  opacity: 1;
}

.gp-result .gp-result-actions button {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 28px;
  height: 28px;
  color: var(--ocean-deep);
  cursor: pointer;
  font-size: var(--fluid-font-sm);
  border: none;
  border-radius: 8px;
}

.gp-result.pending {
  aspect-ratio: 1;
  gap: var(--fluid-gap);
  color: var(--ocean-foam);
  font-size: var(--fluid-font-sm);
  cursor: default;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.gp-result.failed {
  color: var(--error);
}

.gp-result-retry {
  border: 1px solid rgba(var(--neon-glow-rgb), .4);
  background: rgba(var(--neon-glow-rgb), .12);
  color: var(--ocean-mid);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  border-radius: 999px;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
}

.gp-result-retry:hover {
  border-color: rgba(var(--neon-glow-rgb), .7);
  background: rgba(var(--neon-glow-rgb), .2);
}

.gp-result.preparing {
  background: linear-gradient(135deg, rgba(var(--bright-cyan-rgb), .08), rgba(var(--ocean-cyan-rgb), .04));
  color: var(--ocean-cyan);
}

.gp-result.preparing i {
  animation: 1.5s ease-in-out infinite gp-pulse;
}

@keyframes gp-pulse {
  0%, 100% {
    opacity: .5;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.gp-lightbox {
  z-index: 9999;
  background: rgba(var(--ocean-deep-rgb), var(--glass-alpha-far, .68));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  cursor: zoom-out;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.gp-lightbox img {
  border-radius: var(--radius-md);
  max-width: 92vw;
  max-height: 92vh;
  box-shadow: 0 30px 90px rgba(var(--shadow-rgb), .5);
}

.gp-lightbox .gp-lightbox-close {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 40px;
  height: 40px;
  color: var(--text-inverse);
  font-size: var(--fluid-font-lg);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  right: 24px;
}

.gp-empty {
  text-align: center;
  color: var(--ocean-foam);
  font-size: var(--fluid-font-sm);
  padding: 20px 10px;
}

.gp-warn {
  background: rgba(var(--golden-rgb), .12);
  border: 1px solid rgba(var(--golden-rgb), .35);
  color: var(--golden);
  border-radius: var(--radius-sm);
  font-size: var(--fluid-font-sm);
  gap: var(--fluid-gap);
  align-items: center;
  padding: 8px 12px;
  display: flex;
}

.gp-func-header {
  align-items: center;
  gap: var(--fluid-gap);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  border-radius: var(--fluid-radius);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .22), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .28), 0 4px 20px rgba(var(--ocean-deep-rgb), .03);
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  transition: box-shadow var(--dur-3) var(--ease-out-expo), transform var(--dur-3) var(--ease-out-expo), background var(--dur-3) var(--ease-out-expo);
  font-weight: 600;
  display: flex;
  position: relative;
  overflow: visible;
}

.gp-func-header:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .28), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .32), 0 6px 24px rgba(var(--ocean-deep-rgb), .05);
}

.gp-func-header i {
  color: var(--ocean-light);
  font-size: var(--fluid-font-lg);
  filter: drop-shadow(0 0 6px rgba(var(--neon-glow-rgb), .3));
}

.gp-func-header-inner {
  align-items: center;
  gap: var(--fluid-gap);
  padding: calc(var(--fluid-pad)  - 4px) calc(var(--fluid-pad)  + 2px);
  border-radius: var(--fluid-radius);
  flex: 1;
  display: flex;
  overflow: hidden;
}

.gp-func-header-arrow {
  color: var(--ocean-light);
  transition: transform var(--dur-3) var(--ease-out-expo);
  padding-right: var(--fluid-pad);
  margin-left: auto;
  font-size: .65rem;
}

.gp-func-header-arrow.expanded {
  transform: rotate(180deg);
}

.gp-func-header.gp-func-header-dropdown-open {
  transform: none !important;
}

.gp-func-header-clear {
  color: var(--ocean-light, var(--yue-ui-muted-blue));
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease-out-expo), color var(--dur-2) var(--ease-out-expo);
  background: none;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 8px 3px 6px;
  font-size: .72rem;
  font-weight: 500;
  display: inline-flex;
}

.gp-func-header-clear:hover {
  background: rgba(var(--yue-ui-red-500-rgb), .12);
  color: var(--yue-ui-red-500);
}

.gp-func-header-clear:active {
  transform: scale(.94);
}

.gp-func-header-drawer-close, .new-sidebar.open > .gp-func-header-drawer-close {
  z-index: 30;
  border: 1px solid rgba(var(--error-rgb), .35);
  background: rgba(var(--error-rgb), .14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  width: 24px;
  height: 24px;
  color: var(--error);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-pro), color var(--dur-2) var(--ease-pro);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  font-size: .85rem;
  display: inline-flex;
  position: absolute;
  top: 10px;
  right: 12px;
}

.gp-func-header-drawer-close:hover {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
  background: var(--error);
  border-color: var(--error);
}

.gp-func-header-clear i {
  filter: none;
  font-size: .72rem;
}

.gp-func-dropdown {
  overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(var(--yue-ui-panel-blue-rgb), .92), rgba(var(--yue-ui-panel-blue-soft-rgb), .86));
  max-height: 720px;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border: 1px solid rgba(var(--yue-ui-white-rgb), .55);
  box-shadow: 0 16px 56px rgba(var(--yue-ui-deep-blue-rgb), .25), 0 4px 16px rgba(var(--yue-color-ocean-light-rgb), .14), inset 0 1px 0 0 rgba(var(--yue-ui-white-rgb), .75), inset 0 -1px 0 0 rgba(var(--yue-color-ocean-light-rgb), .08), inset 0 0 0 1px rgba(var(--yue-ui-white-rgb), .18);
  z-index: 999999;
  transform-origin: top;
  animation: gp-func-dropdown-in var(--dur-2) cubic-bezier(.16, 1, .3, 1) both;
  border-radius: 16px;
  padding: 8px;
  display: block;
  overflow: hidden auto;
  transform: translateX(-50%);
}

.gp-func-dropdown.closing {
  animation: gp-func-dropdown-out var(--dur-2) cubic-bezier(.4, 0, 1, 1) both;
}

@keyframes gp-func-dropdown-in {
  from {
    opacity: 0;
    transform: translateX(-50%)translateY(-10px)scale(.97);
  }

  to {
    opacity: 1;
    transform: translateX(-50%)translateY(0)scale(1);
  }
}

@keyframes gp-func-dropdown-out {
  from {
    opacity: 1;
    transform: translateX(-50%)translateY(0)scale(1);
  }

  to {
    opacity: 0;
    transform: translateX(-50%)translateY(-8px)scale(.97);
  }
}

@supports not ((-webkit-backdrop-filter: blur(calc(1px * var(--glass-blur-level, 1)))) or (backdrop-filter: blur(calc(1px * var(--glass-blur-level, 1))))) {
  .gp-func-dropdown {
    background: linear-gradient(180deg, rgba(var(--yue-ui-panel-blue-rgb), .97), rgba(var(--yue-ui-panel-blue-soft-rgb), .95));
  }
}

.gp-func-dropdown-group {
  margin-bottom: 6px;
}

.gp-func-dropdown-group:last-child {
  margin-bottom: 0;
}

.gp-func-dropdown-group-label {
  color: rgba(var(--yue-color-ocean-foam-rgb), .85);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(var(--yue-ui-white-rgb), .25);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border-radius: 8px;
  margin: 2px 4px;
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 600;
}

.gp-func-dropdown-items {
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 6px 6px;
  display: flex;
}

.gp-func-dropdown-item {
  border: 1px solid rgba(var(--yue-ui-white-rgb), .4);
  background: rgba(var(--yue-ui-white-rgb), .35);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  color: rgba(var(--yue-color-ocean-mid-rgb), .9);
  cursor: pointer;
  transition: background var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
}

.gp-func-dropdown-item:hover {
  background: rgba(var(--yue-color-ocean-light-rgb), .12);
  border-color: rgba(var(--yue-color-ocean-light-rgb), .35);
  color: var(--yue-color-ocean-deep);
  box-shadow: 0 2px 12px rgba(var(--yue-color-ocean-light-rgb), .15), inset 0 1px 0 rgba(var(--yue-ui-white-rgb), .4);
}

.gp-func-dropdown-item.active {
  background: rgba(var(--yue-color-neon-glow-rgb), .15);
  border-color: rgba(var(--yue-color-neon-glow-rgb), .45);
  color: var(--yue-color-ocean-deep);
  box-shadow: 0 2px 12px rgba(var(--yue-color-neon-glow-rgb), .2), inset 0 1px 0 rgba(var(--yue-ui-white-rgb), .4);
  font-weight: 600;
}

.gp-field-label {
  align-items: center;
  gap: var(--fluid-gap-sm);
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  margin-bottom: 6px;
  font-weight: 600;
  display: flex;
}

.gp-field-count {
  font-weight: 400;
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  background: var(--glass-bg-far);
  border: 1px solid var(--glass-border-far);
  border-radius: 999px;
  margin-left: auto;
  padding: 2px 8px;
}

.gp-slider {
  background: var(--glass-bg-far);
  appearance: none;
  cursor: pointer;
  border-radius: 999px;
  outline: none;
  width: 100%;
  height: 6px;
}

.gp-slider::-webkit-slider-thumb {
  appearance: none;
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  border: 2px solid rgb(var(--glass-tint-rgb));
  width: 18px;
  height: 18px;
  box-shadow: 0 2px 8px rgba(var(--neon-glow-rgb), .4);
  cursor: grab;
  transition: var(--transition-fast);
  border-radius: 50%;
}

.gp-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.gp-slider::-moz-range-thumb {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  border: 2px solid rgb(var(--glass-tint-rgb));
  width: 18px;
  height: 18px;
  box-shadow: 0 2px 8px rgba(var(--neon-glow-rgb), .4);
  cursor: grab;
  border-radius: 50%;
}

.gp-redraw-slider {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.gp-redraw-slider-head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.gp-redraw-slider-value {
  font-variant-numeric: tabular-nums;
  color: var(--ocean-deep);
  font-size: 1.35rem;
  font-weight: 600;
}

.gp-redraw-slider-tier {
  font-size: var(--fluid-font-xs);
  border: 1px solid var(--glass-border-mid);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-mid);
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 600;
}

.gp-redraw-slider-tier.tier-low {
  color: var(--ocean-cyan);
  border-color: rgba(var(--ocean-cyan-rgb), .4);
}

.gp-redraw-slider-tier.tier-mid {
  color: var(--warning);
  border-color: rgba(var(--warning-rgb, 255, 193, 7), .4);
}

.gp-redraw-slider-tier.tier-high {
  color: var(--ocean-coral);
  border-color: rgba(var(--ocean-coral-rgb, 239, 68, 68), .4);
}

.gp-redraw-range {
  background: linear-gradient(90deg, rgba(var(--ocean-cyan-rgb), .35), rgba(var(--warning-rgb, 255, 193, 7), .35), rgba(var(--ocean-coral-rgb, 239, 68, 68), .35));
  appearance: none;
  cursor: pointer;
  border-radius: 999px;
  outline: none;
  width: 100%;
  height: 12px;
}

.gp-redraw-range::-webkit-slider-thumb {
  appearance: none;
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  border: 3px solid rgb(var(--glass-tint-rgb));
  width: 28px;
  height: 28px;
  box-shadow: 0 3px 12px rgba(var(--neon-glow-rgb), .5);
  cursor: grab;
  transition: transform var(--transition-fast);
  border-radius: 50%;
}

.gp-redraw-range::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

.gp-redraw-range::-moz-range-thumb {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  border: 3px solid rgb(var(--glass-tint-rgb));
  width: 28px;
  height: 28px;
  box-shadow: 0 3px 12px rgba(var(--neon-glow-rgb), .5);
  cursor: grab;
  border-radius: 50%;
}

.gp-redraw-labels {
  font-size: var(--fluid-font-xs);
  color: var(--text-tertiary);
  justify-content: space-between;
  gap: 8px;
  display: flex;
}

.gp-redraw-labels span.active {
  color: var(--text-primary);
  font-weight: 600;
}

.gp-redraw-slider .gp-field-hint {
  color: var(--text-tertiary);
  font-size: var(--fluid-font-xs);
}

.gp-presets {
  gap: var(--fluid-gap-sm);
  flex-wrap: wrap;
  display: flex;
}

.gp-preset-chip {
  border: 1px dashed var(--glass-border-mid);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  -webkit-user-select: none;
  user-select: none;
  border-radius: 999px;
  padding: 4px 10px;
}

.gp-preset-chip:hover {
  border-color: var(--neon-glow);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-deep);
  border-style: solid;
}

.gp-advanced-toggle {
  border: 1px dashed var(--glass-border-mid);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 100%;
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  display: flex;
}

.gp-advanced-toggle:hover, .gp-advanced-toggle.open {
  border-style: solid;
  border-color: rgba(var(--warning-rgb, 255, 193, 7), .55);
  background: rgba(var(--warning-rgb, 255, 193, 7), .08);
  color: var(--ocean-deep);
}

.gp-advanced-toggle i {
  width: 12px;
  color: var(--warning);
  transition: transform var(--transition-fast);
}

.gp-advanced-toggle.open i {
  transform: rotate(0);
}

.gp-advanced-toggle-hint {
  color: var(--text-tertiary);
  white-space: nowrap;
  margin-left: auto;
  font-size: .76rem;
}

.gp-advanced-toggle + .gp-field {
  margin-top: 10px;
}

.gp-preset-cat-note {
  background: rgba(var(--neon-glow-rgb), .1);
  border: 1px solid rgba(var(--neon-glow-rgb), .3);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 4px 10px;
  display: inline-flex;
}

.gp-preset-cat-note i {
  color: var(--neon-glow);
  font-size: var(--fluid-font-sm);
}

.gp-template-tabs {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  display: flex;
}

.gp-template-tab {
  border: 1px solid var(--glass-border-mid);
  background: rgba(var(--glass-tint-rgb), .6);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 600;
}

.gp-template-tab:hover {
  border-color: var(--neon-glow);
  color: var(--ocean-deep);
}

.gp-template-tab.active {
  background: linear-gradient(135deg, var(--ocean-light), var(--neon-glow));
  color: var(--text-inverse);
  box-shadow: 0 2px 10px rgba(var(--neon-glow-rgb), .3);
  border-color: #0000;
}

.gp-template-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  display: grid;
}

.gp-template-card {
  text-align: left;
  border: 1px dashed var(--glass-border-mid);
  background: rgba(var(--glass-tint-rgb), .5);
  color: var(--ocean-mid);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  border-radius: 12px;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  display: flex;
}

.gp-template-card:hover {
  border-color: var(--neon-glow);
  box-shadow: 0 6px 18px rgba(var(--neon-glow-rgb), .12);
  border-style: solid;
  transform: translateY(-2px);
}

.gp-template-card.active {
  border-color: var(--neon-glow);
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .14), rgba(var(--ocean-cyan-rgb), .08));
  border-style: solid;
}

.gp-template-name {
  font-size: var(--fluid-font-base);
  color: var(--text-primary);
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  display: flex;
}

.gp-template-mode {
  background: rgba(var(--glass-tint-rgb), .7);
  color: var(--ocean-mid);
  border-radius: 999px;
  flex-shrink: 0;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
}

.gp-template-mode.fidelity {
  color: var(--ocean-cyan);
}

.gp-template-mode.beauty {
  color: var(--neon-glow);
}

.gp-template-mode.creative {
  color: var(--golden, #d1a84b);
}

.gp-template-desc {
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.45;
}

.gp-template-hint {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  opacity: .8;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  display: flex;
}

.gp-template-hint i {
  color: var(--neon-glow);
}

.gp-btn-gen {
  justify-content: center;
  align-items: center;
  gap: var(--fluid-gap);
  padding: var(--fluid-pad) calc(var(--fluid-pad)  + 2px);
  border-radius: var(--radius-sm);
  background: var(--gradient-primary);
  color: var(--text-inverse);
  font-size: var(--fluid-font-base);
  font-weight: var(--fw-title);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-pro), box-shadow var(--dur-2) var(--ease-pro);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12), 0 4px 14px rgba(var(--ocean-light-rgb), .24);
  border: none;
  flex: 1;
  display: inline-flex;
}

.gp-btn-gen:hover:not(:disabled) {
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12), 0 6px 18px rgba(var(--ocean-light-rgb), .32);
  transform: translateY(-1px);
}

.gp-btn-gen:active:not(:disabled) {
  box-shadow: var(--press-inset);
  transform: translateY(0);
}

.gp-btn-gen:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@property --gp-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.gp-btn-gen {
  position: relative;
}

.gp-btn-gen:before {
  content: "";
  border-radius: inherit;
  background: conic-gradient(from var(--gp-border-angle), transparent 0deg, transparent 250deg, #ffffffe6 300deg, #ffffff40 330deg, transparent 360deg);
  -webkit-mask-composite: xor;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-pro);
  pointer-events: none;
  -webkit-mask-composite: xor;
  -webkit-mask-source-type: auto, auto;
  padding: 1.5px;
  position: absolute;
  inset: -2px;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-position: 0 0, 0 0;
  mask-position: 0 0, 0 0;
  -webkit-mask-size: auto, auto;
  mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}

.gp-btn-gen:hover:before, .gp-btn-gen:focus-visible:before {
  opacity: 1;
  animation: 3.2s linear infinite gpBorderFlow;
}

@keyframes gpBorderFlow {
  to {
    --gp-border-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gp-btn-gen:before {
    animation: none;
  }
}

.gp-btn-abort {
  justify-content: center;
  align-items: center;
  gap: var(--fluid-gap-sm);
  padding: var(--fluid-pad) var(--fluid-pad);
  border-radius: var(--radius-sm);
  background: var(--error);
  color: var(--text-inverse);
  font-size: var(--fluid-font-base);
  font-weight: var(--fw-title);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-pro), box-shadow var(--dur-2) var(--ease-pro);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12), 0 4px 14px rgba(var(--error-rgb), .22);
  border: none;
  flex: none;
  display: inline-flex;
}

.gp-btn-abort:hover {
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12), 0 6px 18px rgba(var(--error-rgb), .3);
}

.gp-btn-abort:active {
  box-shadow: var(--press-inset);
  transform: translateY(0);
}

.gp-btn-clear {
  justify-content: center;
  align-items: center;
  gap: var(--fluid-gap-sm);
  padding: var(--fluid-pad) var(--fluid-pad);
  border: 1px solid rgba(var(--glass-tint-rgb), .35);
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  color: var(--ocean-mid);
  font-size: var(--fluid-font-base);
  font-weight: var(--fw-emph);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-pro), color var(--dur-2) var(--ease-pro), background var(--dur-2) var(--ease-pro);
  flex: none;
  display: inline-flex;
}

.gp-btn-clear:hover {
  border-color: rgba(var(--neon-glow-rgb), .45);
  color: var(--ocean-deep);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-strong, .9));
}

.gp-btn-clear:active {
  box-shadow: var(--press-inset);
}

.gp-btn-retry {
  justify-content: center;
  align-items: center;
  gap: var(--fluid-gap-sm);
  padding: var(--fluid-pad) var(--fluid-pad);
  border-radius: var(--radius-sm);
  background: var(--ocean-light);
  color: var(--text-inverse);
  font-size: var(--fluid-font-base);
  font-weight: var(--fw-emph);
  cursor: pointer;
  transition: box-shadow var(--dur-2) var(--ease-pro), transform var(--dur-2) var(--ease-pro);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12), 0 4px 14px rgba(var(--ocean-light-rgb), .22);
  border: none;
  flex: none;
  display: inline-flex;
}

.gp-btn-retry:hover {
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12), 0 6px 18px rgba(var(--ocean-light-rgb), .3);
}

.gp-btn-retry:active {
  box-shadow: var(--press-inset);
  transform: translateY(0);
}

.grsai-queue-summary {
  align-items: center;
  gap: var(--fluid-gap);
  font-size: var(--fluid-font-sm);
  background: var(--glass-bg-far);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  padding: 6px 12px;
  font-weight: 600;
  display: flex;
}

.grsai-batch-group {
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: clip;
}

.grsai-batch-header {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-radius: var(--radius-sm);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  padding: 6px 10px;
  display: flex;
}

.grsai-batch-title {
  align-items: center;
  gap: var(--fluid-gap-sm);
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  font-weight: 600;
  display: flex;
}

.grsai-batch-name {
  color: var(--ocean-deep);
  font-weight: 600;
}

.grsai-batch-count {
  background: rgba(var(--ocean-cyan-rgb), .12);
  color: var(--ocean-light);
  border-radius: 100px;
  padding: 1px 8px;
  font-size: .58rem;
  font-weight: 600;
}

.grsai-batch-success {
  color: var(--success);
  font-size: .6rem;
  font-weight: 600;
}

.grsai-batch-failed {
  color: var(--error);
  font-size: .6rem;
  font-weight: 600;
}

.grsai-batch-actions {
  align-items: center;
  gap: var(--fluid-gap-sm);
  display: flex;
}

.grsai-batch-status {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  border-radius: 100px;
  padding: 1px 8px;
  font-size: .6rem;
  font-weight: 600;
}

.grsai-batch-abort-btn {
  font-size: var(--fluid-font-xs);
  color: var(--error);
  cursor: pointer;
  transition: all var(--dur-2) ease;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 2px 6px;
  line-height: 1;
}

.grsai-batch-abort-btn:hover {
  background: rgba(var(--error-rgb), .12);
  color: var(--error);
}

.grsai-batch-tasks {
  padding-left: 4px;
}

.task-island .grsai-batch-tasks-virtualized .task-item {
  animation: none;
}

.grsai-batch-control-btn {
  font-size: var(--fluid-font-xs);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  background: none;
  border: none;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding: 2px 6px;
  line-height: 1;
  display: inline-flex;
}

.grsai-batch-progress {
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  display: flex;
}

.grsai-batch-progress-track {
  background: #8080802e;
  border-radius: 2px;
  flex: 1;
  height: 4px;
  display: flex;
  overflow: hidden;
}

.grsai-batch-progress-fill {
  height: 100%;
  transition: width var(--dur-3, .3s) var(--ease-out-expo, ease);
}

.grsai-batch-progress-fill.ok {
  background: var(--neon-glow, #35d07f);
}

.grsai-batch-progress-fill.bad {
  background: var(--danger, #ff5a5a);
}

.grsai-batch-progress-text {
  font-size: var(--fluid-font-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.grsai-batch-expand-btn {
  width: calc(100% - 16px);
  color: var(--text-secondary);
  background: rgba(var(--primary-rgb, 90, 143, 255), .08);
  justify-content: center;
  margin: 4px 8px 6px;
  padding: 6px 10px;
}

.grsai-batch-expand-btn:hover {
  background: rgba(var(--primary-rgb, 90, 143, 255), .15);
  color: var(--text-primary);
}

.grsai-batch-pause-btn:hover {
  background: rgba(var(--orange-rgb), .15);
  color: var(--warning);
}

.grsai-batch-resume-btn:hover {
  background: rgba(var(--success-rgb), .15);
  color: var(--success);
}

.grsai-batch-terminate-btn:hover {
  background: rgba(var(--error-rgb), .15);
  color: var(--error);
}

.grsai-batch-open-explorer-btn:hover {
  background: rgba(var(--ocean-light-rgb), .15);
  color: var(--neon-glow);
}

.stats-dashboard {
  border-radius: var(--fluid-radius);
  animation: gp-card-stagger var(--dur-3) var(--ease-out-expo, ease) both;
}

.stats-dashboard.loading {
  text-align: center;
  color: var(--text-placeholder);
  font-size: var(--fluid-font-base);
  padding: 30px;
}

.local-record-card {
  transition: background var(--dur-3) var(--ease-out-expo, ease);
  animation: gp-card-stagger var(--dur-3) var(--ease-out-expo, ease) both;
}

.local-record-card:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8)) !important;
}

@keyframes gp-card-stagger {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.gp-panel:not(.gsap-ready) > .gp-section, .gp-panel:not(.gsap-ready) > .gp-func-header, .gp-panel:not(.gsap-ready) > .gp-actions {
  animation: gp-card-stagger .7s var(--ease-out-expo, ease-out) backwards;
}

.gp-panel:not(.gsap-ready) > .gp-func-header {
  animation-delay: 80ms;
}

.gp-panel:not(.gsap-ready) > .gp-section:nth-child(2) {
  animation-delay: .16s;
}

.gp-panel:not(.gsap-ready) > .gp-section:nth-child(3) {
  animation-delay: .24s;
}

.gp-panel:not(.gsap-ready) > .gp-section:nth-child(4) {
  animation-delay: .32s;
}

.gp-panel:not(.gsap-ready) > .gp-section:nth-child(5) {
  animation-delay: .4s;
}

.gp-panel:not(.gsap-ready) > .gp-actions {
  animation-delay: .48s;
}

@keyframes gp-progress-shimmer {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(433%);
  }
}

.gp-progress-bar > div {
  background: linear-gradient(90deg, var(--ocean-light) 0%, var(--ocean-cyan) 50%, var(--ocean-light) 100%);
  height: 100%;
  transition: width var(--dur-3) var(--ease-out-expo);
  box-shadow: 0 0 12px rgba(var(--neon-glow-rgb), .4);
  background-size: 100% 100%;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

.gp-progress-bar > div:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #0000, #ffffff59, #0000);
  width: 30%;
  animation: 1.8s linear infinite gp-progress-shimmer;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-120%);
}

@keyframes gp-result-pop {
  from {
    opacity: 0;
    transform: scale(.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.gp-panel:not(.gsap-ready) .gp-result {
  animation: gp-result-pop var(--dur-3) var(--ease-out-expo, ease-out) backwards;
}

.gp-panel:not(.gsap-ready) .gp-result:first-child {
  animation-delay: 40ms;
}

.gp-panel:not(.gsap-ready) .gp-result:nth-child(2) {
  animation-delay: 80ms;
}

.gp-panel:not(.gsap-ready) .gp-result:nth-child(3) {
  animation-delay: .12s;
}

.gp-panel:not(.gsap-ready) .gp-result:nth-child(4) {
  animation-delay: .16s;
}

.gp-panel:not(.gsap-ready) .gp-result:nth-child(5) {
  animation-delay: .2s;
}

.gp-panel:not(.gsap-ready) .gp-result:nth-child(6) {
  animation-delay: .24s;
}

.gp-migrate-mode-switch {
  gap: var(--fluid-gap);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-radius: var(--fluid-radius);
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12);
  margin-bottom: 4px;
  padding: 6px;
  display: flex;
}

.gp-migrate-mode-card {
  align-items: center;
  gap: var(--fluid-gap);
  padding: var(--fluid-pad) var(--fluid-pad);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .15);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease-out);
  text-align: left;
  color: var(--ocean-deep);
  border-radius: 12px;
  flex: 1;
  display: flex;
}

.gp-migrate-mode-card:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-color: rgba(var(--neon-glow-rgb), .25);
}

.gp-migrate-mode-card-active {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .2), rgba(var(--bright-cyan-rgb), .15));
  border-color: rgba(var(--neon-glow-rgb), .45);
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .2), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .25), 0 4px 16px rgba(var(--neon-glow-rgb), .1);
}

.gp-migrate-mode-card-icon {
  background: rgba(var(--neon-glow-rgb), .12);
  width: 36px;
  height: 36px;
  color: var(--ocean-light);
  font-size: var(--fluid-font-lg);
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.gp-migrate-mode-card-active .gp-migrate-mode-card-icon {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--text-inverse);
  box-shadow: 0 2px 8px rgba(var(--neon-glow-rgb), .3);
}

.gp-migrate-mode-card-body {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.gp-migrate-mode-card-title {
  font-weight: 600;
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
}

.gp-migrate-mode-card-hint {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
  overflow: hidden;
}

.gp-migrate-split {
  gap: var(--fluid-gap);
  display: flex;
}

.gp-migrate-split-left, .gp-migrate-split-right {
  gap: var(--fluid-gap);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.gp-migrate-step-header {
  align-items: center;
  gap: var(--fluid-gap);
  flex-wrap: wrap;
  display: flex;
}

.gp-migrate-step-num {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  width: 22px;
  height: 22px;
  color: var(--text-inverse);
  font-size: var(--fluid-font-xs);
  box-shadow: 0 2px 6px rgba(var(--neon-glow-rgb), .25);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.gp-migrate-step-title {
  font-weight: 600;
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
}

.gp-migrate-step-hint {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  width: 100%;
  line-height: 1.4;
}

.gp-migrate-mode-section {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .12);
  border-radius: 12px;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  display: flex;
}

.gp-migrate-mode-label {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  font-weight: 600;
}

.gp-migrate-mode-hint {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  min-height: 1.2em;
  line-height: 1.35;
}

.gp-migrate-pills {
  gap: var(--fluid-gap-sm);
  flex-wrap: wrap;
  display: flex;
}

.gp-migrate-pill {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .18);
  font-size: var(--fluid-font-xs);
  color: var(--ocean-deep);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease-out);
  white-space: nowrap;
  border-radius: 999px;
  padding: 4px 11px;
  font-weight: 500;
}

.gp-migrate-pill:hover:not(:disabled) {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-color: rgba(var(--neon-glow-rgb), .25);
}

.gp-migrate-pill:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.gp-migrate-pill-active {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--text-inverse);
  border-color: rgba(var(--neon-glow-rgb), .4);
  box-shadow: 0 2px 8px rgba(var(--neon-glow-rgb), .2);
}

.gp-migrate-presets-section {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-color: rgba(var(--glass-tint-rgb), .08);
}

.gp-migrate-pills-multi {
  gap: var(--fluid-gap-sm);
}

.gp-migrate-pills-multi .gp-migrate-pill {
  font-size: var(--fluid-font-xs);
  padding: 5px 12px;
}

.gp-migrate-pills-multi .gp-migrate-pill-active {
  background: linear-gradient(135deg, var(--card-accent-video), var(--neon-glow));
  border-color: rgba(var(--indigo-rgb), .4);
  box-shadow: 0 2px 8px rgba(var(--indigo-rgb), .2);
}

.gp-migrate-batch-info {
  align-items: center;
  gap: var(--fluid-gap-sm);
  background: rgba(var(--neon-glow-rgb), .08);
  border: 1px solid rgba(var(--neon-glow-rgb), .15);
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  border-radius: 10px;
  padding: 6px 10px;
  display: flex;
}

.gp-migrate-batch-info i {
  color: var(--ocean-light);
}

@media (max-width: 768px) {
  .gp-migrate-split {
    flex-direction: column;
  }

  .gp-migrate-mode-card-hint {
    white-space: normal;
  }
}

.gp-migrate-crop-bar {
  background: rgba(var(--neon-glow-rgb), .06);
  border: 1px solid rgba(var(--neon-glow-rgb), .15);
  border-radius: 12px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  display: flex;
}

.gp-migrate-crop-toggle {
  border: 1px solid rgba(var(--glass-tint-rgb), .18);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-deep);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease-out);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-weight: 600;
  display: inline-flex;
}

.gp-migrate-crop-toggle:hover {
  border-color: rgba(var(--neon-glow-rgb), .35);
}

.gp-migrate-crop-toggle.active {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--text-inverse);
  border-color: rgba(var(--neon-glow-rgb), .45);
  box-shadow: 0 2px 8px rgba(var(--neon-glow-rgb), .2);
}

.gp-migrate-crop-toggle-hint {
  opacity: .85;
  font-weight: 400;
}

.gp-migrate-crop-feather {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.gp-migrate-crop-feather input[type="range"] {
  width: 72px;
  accent-color: var(--ocean-cyan);
}

.gp-migrate-crop-size-label {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
}

.gp-migrate-crop-clear {
  border: 1px solid rgba(var(--error-rgb), .25);
  background: rgba(var(--error-rgb), .08);
  color: var(--error-rgb);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease-out);
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 4px 10px;
  display: inline-flex;
}

.gp-migrate-crop-clear:hover {
  background: rgba(var(--error-rgb), .16);
}

.gp-scene-preview.is-crop-mode {
  cursor: crosshair;
}

.gp-migrate-crop-box {
  z-index: 8;
  box-sizing: border-box;
  border: 2px solid rgba(var(--neon-glow-rgb), .95);
  background: rgba(var(--neon-glow-rgb), .08);
  box-shadow: 0 0 0 9999px rgba(var(--yue-ui-black-rgb), .32);
  cursor: move;
  touch-action: none;
  border-radius: 2px;
  position: absolute;
}

.gp-migrate-crop-grid {
  background-image: linear-gradient(rgba(var(--yue-ui-white-rgb), .45) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--yue-ui-white-rgb), .45) 1px, transparent 1px);
  pointer-events: none;
  opacity: .55;
  background-size: 33.33% 33.33%;
  position: absolute;
  inset: 0;
}

.gp-migrate-crop-handle {
  background: var(--ocean-cyan);
  border: 2px solid var(--yue-ui-white);
  width: 14px;
  height: 14px;
  box-shadow: 0 1px 4px rgba(var(--yue-ui-black-rgb), .35);
  cursor: nwse-resize;
  border-radius: 50%;
  position: absolute;
  bottom: -7px;
  right: -7px;
}

.gp-migrate-crop-size {
  background: rgba(var(--yue-ui-black-rgb), .62);
  color: var(--yue-ui-white);
  pointer-events: none;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  position: absolute;
  top: 6px;
  left: 6px;
}

.gp-migrate-intent-section {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-color: rgba(var(--indigo-rgb), .18);
}

.gp-migrate-intent-input {
  box-sizing: border-box;
  border: 1px solid rgba(var(--glass-tint-rgb), .18);
  background: rgba(var(--glass-tint-rgb), .35);
  width: 100%;
  color: var(--ocean-deep);
  font-size: var(--fluid-font-xs);
  transition: border-color var(--dur-2) var(--ease-out-expo, ease-out);
  border-radius: 10px;
  outline: none;
  padding: 8px 12px;
}

.gp-migrate-intent-input:focus {
  border-color: rgba(var(--indigo-rgb), .45);
}

.gp-migrate-intent-input::placeholder {
  color: var(--ocean-foam);
}

.gp-migrate-plan-preview {
  border: 1px solid rgba(var(--glass-tint-rgb), .18);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-radius: 14px;
  overflow: hidden;
}

.gp-migrate-plan-preview-header {
  width: 100%;
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-weight: 600;
  display: flex;
}

.gp-migrate-plan-preview-header:hover {
  background: rgba(var(--glass-tint-rgb), .35);
}

.gp-migrate-plan-preview-state {
  font-size: var(--fluid-font-xs);
  background: rgba(var(--text-tertiary, 150, 150, 150), .12);
  color: var(--ocean-foam);
  border-radius: 999px;
  margin-left: auto;
  padding: 2px 9px;
  font-weight: 600;
}

.gp-migrate-plan-preview-state.has-plan {
  background: rgba(var(--success-rgb, 34, 197, 94), .14);
  color: var(--success);
}

.gp-migrate-plan-preview-body {
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px;
  display: flex;
}

.gp-migrate-plan-textarea {
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid rgba(var(--glass-tint-rgb), .18);
  background: rgba(var(--glass-tint-rgb), .35);
  width: 100%;
  color: var(--ocean-deep);
  font-size: var(--fluid-font-xs);
  border-radius: 10px;
  outline: none;
  padding: 10px 12px;
  line-height: 1.55;
}

.gp-migrate-plan-textarea:focus {
  border-color: rgba(var(--neon-glow-rgb), .45);
}

.gp-migrate-plan-preview-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.gp-migrate-plan-btn {
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease-out);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-weight: 600;
  display: inline-flex;
}

.gp-migrate-plan-btn.primary {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--text-inverse);
  border: 1px solid rgba(var(--neon-glow-rgb), .35);
}

.gp-migrate-plan-btn.secondary {
  background: rgba(var(--glass-tint-rgb), .4);
  color: var(--ocean-mid);
  border: 1px solid rgba(var(--glass-tint-rgb), .18);
}

.gp-migrate-plan-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.gp-migrate-plan-hint {
  background: rgba(var(--neon-glow-rgb), .08);
  border: 1px solid rgba(var(--neon-glow-rgb), .14);
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1.45;
}

.gp-scene-upload {
  justify-content: center;
  align-items: center;
  gap: var(--fluid-gap-sm);
  border-radius: var(--radius-md);
  border: 2px dashed rgba(var(--neon-glow-rgb), .25);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease-out);
  text-align: center;
  flex-direction: column;
  padding: 28px 16px;
  display: flex;
}

.gp-scene-upload.dragover {
  background: rgba(var(--neon-glow-rgb), .05);
}

.gp-scene-upload:hover {
  border-color: rgba(var(--neon-glow-rgb), .4);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
}

.gp-scene-upload-icon {
  background: rgba(var(--neon-glow-rgb), .12);
  width: 40px;
  height: 40px;
  color: var(--ocean-light);
  font-size: var(--fluid-font-lg);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.gp-scene-upload-text {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  font-weight: 600;
}

.gp-scene-upload-hint {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  line-height: 1.4;
}

.gp-scene-preview-wrap {
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  box-shadow: 0 4px 16px rgba(var(--ocean-deep-rgb), .06);
  position: relative;
  overflow: hidden;
}

.gp-scene-preview {
  border-radius: var(--radius-md);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  position: relative;
  overflow: hidden;
}

.gp-scene-preview.is-marker-mode {
  cursor: crosshair;
}

.gp-scene-preview-img {
  object-fit: contain;
  width: 100%;
  max-height: 340px;
  display: block;
}

.gp-scene-preview-del {
  background: rgba(var(--ocean-deep-rgb), .55);
  width: 28px;
  height: 28px;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  color: var(--text-inverse);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease-out);
  z-index: 10;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 8px;
  right: 8px;
}

.gp-scene-preview-del:hover {
  background: rgba(var(--error-rgb), .75);
  border-color: rgba(var(--glass-tint-rgb), .35);
}

.gp-scene-batch-area {
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--glass-tint-rgb), .15);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  padding: 10px;
}

.gp-scene-batch-info {
  align-items: center;
  gap: var(--fluid-gap);
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  margin-bottom: 8px;
  display: flex;
}

.gp-scene-batch-info strong {
  color: var(--ocean-light);
}

.gp-scene-batch-pair {
  background: rgba(var(--neon-glow-rgb), .12);
  font-size: var(--fluid-font-xs);
  border-radius: 999px;
  padding: 2px 8px;
}

.gp-scene-batch-grid {
  gap: var(--fluid-gap-sm);
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  display: grid;
}

.gp-scene-batch-thumb {
  aspect-ratio: 1;
  border: 1px solid rgba(var(--glass-tint-rgb), .15);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.gp-scene-batch-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.gp-scene-batch-thumb-idx {
  background: rgba(var(--ocean-deep-rgb), .65);
  min-width: 18px;
  height: 18px;
  color: var(--text-inverse);
  font-size: var(--fluid-font-xs);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
  font-weight: 600;
  display: flex;
  position: absolute;
  top: 3px;
  left: 3px;
}

.gp-scene-batch-thumb-del {
  background: rgba(var(--error-rgb), .7);
  width: 18px;
  height: 18px;
  color: var(--text-inverse);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-2);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: .55rem;
  display: flex;
  position: absolute;
  top: 3px;
  right: 3px;
}

.gp-scene-batch-thumb:hover .gp-scene-batch-thumb-del {
  opacity: 1;
}

.gp-scene-batch-thumb-add {
  cursor: pointer;
  border: 2px dashed rgba(var(--neon-glow-rgb), .25);
  color: var(--ocean-light);
  font-size: var(--fluid-font-xs);
  transition: all var(--dur-2) var(--ease-out-expo, ease-out);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: flex;
}

.gp-scene-batch-thumb-add:hover {
  border-color: rgba(var(--neon-glow-rgb), .5);
  background: rgba(var(--neon-glow-rgb), .06);
}

.gp-scene-batch-thumb-add i {
  font-size: var(--fluid-font-lg);
}

.gp-scene-batch-thumb-more {
  color: var(--ocean-foam);
  font-size: var(--fluid-font-sm);
  border: 1px dashed rgba(var(--neon-glow-rgb), .25);
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.gp-marker-layer {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.gp-marker {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  border: 2px solid rgb(var(--glass-tint-rgb));
  width: 28px;
  height: 28px;
  box-shadow: 0 2px 10px rgba(var(--neon-glow-rgb), .5);
  color: var(--text-inverse);
  font-size: var(--fluid-font-sm);
  cursor: grab;
  pointer-events: auto;
  transition: var(--transition-fast);
  animation: gp-marker-pop var(--dur-2) var(--ease-out-expo, ease-out);
  -webkit-user-select: none;
  user-select: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
  position: absolute;
  transform: translate(-50%, -50%);
}

.gp-marker:active {
  cursor: grabbing;
}

.gp-marker:hover {
  background: linear-gradient(135deg, var(--error), var(--error));
  transform: translate(-50%, -50%)scale(1.2);
}

.gp-marker-info {
  font-size: var(--fluid-font-xs);
  color: var(--text-inverse);
  background: rgba(var(--ocean-deep-rgb), .6);
  pointer-events: none;
  transition: background var(--dur-2) ease;
  border-radius: 999px;
  padding: 3px 8px;
  position: absolute;
  bottom: 6px;
  left: 6px;
}

.gp-marker-info.is-complete {
  background: rgba(var(--success-rgb), .7);
}

.gp-marker-info.is-incomplete {
  background: rgba(var(--warning-rgb), .7);
}

.gp-marker-hint {
  text-align: center;
  color: var(--ocean-foam);
  font-size: var(--fluid-font-sm);
  background: var(--glass-bg-far);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--glass-border-mid);
  padding: 12px;
}

@keyframes gp-marker-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%)scale(.3);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%)scale(1);
  }
}

.gp-expand-canvas-wrapper {
  align-items: stretch;
  gap: 16px;
  display: flex;
}

.gp-expand-side {
  gap: var(--fluid-gap);
  flex-direction: column;
  flex-shrink: 0;
  width: 340px;
  min-width: 0;
  display: flex;
}

.gp-expand-side-label {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  padding: 0 2px;
}

.gp-expand-right {
  gap: var(--fluid-gap);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.gp-expand-stage {
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 420px;
  display: flex;
}

.gp-expand-canvas {
  border-radius: var(--radius-md);
  -webkit-overflow-clipping: clip;
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  max-width: 100%;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: var(--no-corners), 0 4px 16px rgba(var(--ocean-deep-rgb), .06);
  overflow: clip;
}

.gp-expand-target {
  background: linear-gradient(45deg, rgba(var(--neon-glow-rgb), .06) 25%, transparent 25%, transparent 75%, rgba(var(--neon-glow-rgb), .06) 75%), linear-gradient(45deg, rgba(var(--neon-glow-rgb), .06) 25%, transparent 25%, transparent 75%, rgba(var(--neon-glow-rgb), .06) 75%);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  width: 100%;
  height: 100%;
  position: relative;
}

.gp-expand-source {
  border: 2px solid var(--neon-glow);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(var(--ocean-deep-rgb), .25);
  position: absolute;
}

.gp-expand-source img {
  object-fit: contain;
  border-radius: calc(var(--radius-sm)  - 2px);
  width: 100%;
  height: 100%;
  display: block;
}

.gp-expand-placeholder {
  justify-content: center;
  align-items: center;
  gap: var(--fluid-gap);
  width: 100%;
  height: 100%;
  color: var(--ocean-foam);
  font-size: var(--fluid-font-sm);
  flex-direction: column;
  display: flex;
}

.gp-expand-placeholder i {
  font-size: 1.5rem;
}

.gp-expand-sliders {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.gp-expand-slider-row {
  align-items: center;
  gap: var(--fluid-gap);
  display: flex;
}

.gp-expand-slider-row.gp-expand-size-row {
  width: 100%;
}

.gp-expand-slider-row label {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  white-space: nowrap;
  min-width: 72px;
}

.gp-expand-slider-row .gp-slider {
  flex: 1;
  min-width: 100px;
}

.gp-expand-slider-actions {
  gap: 8px;
  display: flex;
}

.gp-expand-slider-val {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 32px;
}

.gp-expand-info {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  background: var(--glass-bg-far);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px 12px;
  padding: 6px 10px;
  display: flex;
}

.gp-expand-note {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  padding: 0 2px;
  line-height: 1.5;
}

.gp-expand-position-row {
  justify-content: center;
  display: flex;
}

.gp-expand-position-grid {
  background: var(--glass-bg-far);
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  border-radius: var(--radius-sm);
  grid-template-columns: repeat(3, 44px);
  grid-auto-rows: 30px;
  gap: 4px;
  padding: 4px;
  display: grid;
}

.gp-expand-pos-cell {
  border: 1px solid rgba(var(--glass-tint-rgb), .25);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease-out);
  background: none;
  border-radius: 6px;
}

.gp-expand-pos-cell:hover {
  border-color: var(--neon-glow);
  color: var(--ocean-foam);
}

.gp-expand-pos-cell.active {
  background: var(--neon-glow);
  border-color: var(--neon-glow);
  color: var(--yue-ui-white);
  font-weight: 600;
}

.gp-expand-resize-handle {
  background: var(--neon-glow);
  border: 2px solid var(--yue-ui-white);
  width: 12px;
  height: 12px;
  box-shadow: 0 1px 4px rgba(var(--yue-ui-black-rgb), .35);
  z-index: 2;
  touch-action: none;
  border-radius: 3px;
  position: absolute;
}

.gp-expand-resize-handle.handle-nw {
  cursor: nwse-resize;
  top: -7px;
  left: -7px;
}

.gp-expand-resize-handle.handle-ne {
  cursor: nesw-resize;
  top: -7px;
  right: -7px;
}

.gp-expand-resize-handle.handle-sw {
  cursor: nesw-resize;
  bottom: -7px;
  left: -7px;
}

.gp-expand-resize-handle.handle-se {
  cursor: nwse-resize;
  bottom: -7px;
  right: -7px;
}

.gp-expand-reset-btn {
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-xs);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-2) var(--ease-out-expo, ease-out);
  background: none;
  padding: 2px 10px;
}

.gp-expand-reset-btn:hover {
  border-color: var(--neon-glow);
  color: var(--ocean-foam);
}

.gp-expand-reset-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.gp-expand-model-input {
  background: var(--glass-bg-far);
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  border-radius: var(--radius-sm);
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  display: flex;
}

.gp-expand-model-input-label {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
}

.gp-expand-model-input img {
  border-radius: var(--radius-sm);
  max-width: 100%;
  max-height: 240px;
  box-shadow: 0 4px 16px rgba(var(--ocean-deep-rgb), .12);
}

@media (max-width: 760px) {
  .gp-expand-canvas-wrapper {
    flex-direction: column;
  }

  .gp-expand-side {
    order: 2;
    width: 100%;
  }

  .gp-expand-right {
    order: 1;
  }

  .gp-expand-stage {
    min-height: 300px;
  }
}

.gp-listing-table {
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  border-radius: var(--radius-md);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  max-height: min(62vh, 640px);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: var(--no-corners), 0 4px 16px rgba(var(--ocean-deep-rgb), .06);
  overflow: clip auto;
}

.gp-listing-row {
  border-bottom: 1px solid var(--glass-border-far, rgba(var(--glass-tint-rgb), .06));
  transition: var(--transition-fast);
  grid-template-columns: 32px 92px 1fr 1fr 76px;
  gap: 0;
  display: grid;
}

.gp-listing-row:last-of-type {
  border-bottom: none;
}

.gp-listing-row:not(.gp-listing-header):hover {
  background: rgba(var(--neon-glow-rgb), .06);
}

.gp-listing-header {
  background: var(--glass-bg-mid);
  font-weight: 600;
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  z-index: 2;
  position: sticky;
  top: 0;
}

.gp-listing-header > span {
  align-items: center;
  padding: 8px 6px;
  display: flex;
}

.gp-listing-row > span, .gp-listing-row > div {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-deep);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-right: 1px solid var(--glass-border-far, rgba(var(--glass-tint-rgb), .04));
  padding: 6px;
  overflow: hidden;
}

.gp-listing-row > span:last-child, .gp-listing-row > div:last-child {
  border-right: none;
}

.gp-listing-col-idx {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--ocean-foam) !important;
}

.gp-listing-col-file {
  color: var(--ocean-mid) !important;
  font-size: var(--fluid-font-xs) !important;
}

.gp-listing-col-en, .gp-listing-col-cn {
  cursor: text;
  word-break: break-word;
  transition: var(--transition-fast);
  outline: none;
  white-space: normal !important;
}

.gp-listing-col-en:focus, .gp-listing-col-cn:focus {
  background: rgba(var(--neon-glow-rgb), .1);
  box-shadow: inset 0 0 0 2px var(--neon-glow);
}

.gp-listing-col-en.editing, .gp-listing-col-cn.editing {
  background: rgba(var(--neon-glow-rgb), .08);
}

.gp-listing-col-action {
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: flex !important;
}

.gp-listing-regen-btn {
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border-mid);
  background: rgba(var(--neon-glow-rgb), .08);
  width: 24px;
  height: 24px;
  color: var(--ocean-mid);
  cursor: pointer;
  font-size: var(--fluid-font-xs);
  transition: var(--transition-fast);
  justify-content: center;
  align-items: center;
  display: flex;
}

.gp-listing-regen-btn:hover:not(:disabled) {
  background: rgba(var(--neon-glow-rgb), .18);
  color: var(--neon-glow);
  border-color: var(--neon-glow);
}

.gp-listing-regen-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.gp-listing-status-dot {
  border: 1.5px solid rgb(var(--glass-tint-rgb));
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: 4px;
  left: 4px;
}

.gp-listing-status-pending {
  background: var(--text-placeholder);
}

.gp-listing-status-running {
  background: var(--info);
  animation: 1s ease-in-out infinite gp-pulse-dim;
}

.gp-listing-status-success {
  background: var(--success);
}

.gp-listing-status-failed {
  background: var(--error);
}

@keyframes gp-pulse-dim {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .4;
  }
}

.gp-listing-row:not(.gp-listing-header) {
  animation: gp-row-fade-in var(--dur-2) var(--ease-out-expo, ease-out) backwards;
}

@keyframes gp-row-fade-in {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.gp-listing-export-preview {
  border: 1px solid rgba(var(--glass-tint-rgb), .18);
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  overflow: auto hidden;
}

.gp-listing-export-header {
  background: rgba(var(--neon-glow-rgb), .1);
  border-bottom: 1px solid rgba(var(--neon-glow-rgb), .15);
  gap: 0;
  min-width: max-content;
  display: flex;
}

.gp-listing-export-row {
  border-bottom: 1px solid rgba(var(--ocean-deep-rgb), .04);
  min-width: max-content;
  transition: background var(--dur-1);
  gap: 0;
  display: flex;
}

.gp-listing-export-row:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
}

.gp-listing-export-row:last-child {
  border-bottom: none;
}

.gp-listing-export-col {
  min-width: 80px;
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  white-space: nowrap;
  text-overflow: ellipsis;
  border-right: 1px solid rgba(var(--ocean-deep-rgb), .04);
  flex: 0 0 120px;
  padding: 5px 8px;
  overflow: hidden;
}

.gp-listing-export-header .gp-listing-export-col {
  font-weight: 600;
  font-size: var(--fluid-font-xs);
  color: var(--ocean-deep);
  background: rgba(var(--neon-glow-rgb), .06);
}

.gp-listing-header-editable {
  border-bottom: 2px dashed rgba(var(--neon-glow-rgb), .4);
  transition: background var(--dur-2), border-color var(--dur-2);
  cursor: text !important;
}

.gp-listing-header-editable:hover {
  background: rgba(var(--neon-glow-rgb), .12);
  border-bottom-color: var(--neon-glow);
}

.gp-listing-header-editable:focus {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-bottom: 2px solid var(--neon-glow);
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .15);
  outline: none;
}

.gp-listing-export-empty {
  text-align: center;
  color: var(--ocean-foam);
  font-size: var(--fluid-font-sm);
  padding: 24px;
}

.gp-listing-export-more {
  text-align: center;
  color: var(--ocean-foam);
  font-size: var(--fluid-font-xs);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  padding: 6px 10px;
}

.gp-listing-file-list {
  gap: var(--fluid-gap);
  flex-direction: column;
  max-height: 320px;
  padding: 2px;
  display: flex;
  overflow-y: auto;
}

.gp-listing-group {
  border: 1px solid rgba(var(--glass-tint-rgb), .18);
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  overflow: hidden;
}

.gp-listing-group-header {
  align-items: center;
  gap: var(--fluid-gap-sm);
  cursor: pointer;
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  transition: background var(--dur-2);
  -webkit-user-select: none;
  user-select: none;
  padding: 7px 10px;
  display: flex;
}

.gp-listing-group-header:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
}

.gp-listing-group-btn {
  width: 22px;
  height: 22px;
  color: var(--ocean-foam);
  cursor: pointer;
  font-size: var(--fluid-font-xs);
  transition: all var(--dur-2);
  background: none;
  border: none;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  display: flex;
}

.gp-listing-group-btn:hover {
  background: rgba(var(--neon-glow-rgb), .15);
  color: var(--neon-glow);
}

.gp-listing-group-btn:first-of-type {
  margin-left: 4px;
}

.gp-listing-group-tabs {
  gap: var(--fluid-gap-sm);
  padding: 4px 0 8px;
  display: flex;
  overflow-x: auto;
}

.gp-listing-group-tab {
  align-items: center;
  gap: var(--fluid-gap-sm);
  border: 1px solid rgba(var(--glass-tint-rgb), .18);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-mid);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-2);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border-radius: 8px;
  padding: 5px 12px;
  display: inline-flex;
}

.gp-listing-group-tab:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-color: rgba(var(--neon-glow-rgb), .3);
}

.gp-listing-group-tab-active {
  background: rgba(var(--neon-glow-rgb), .18);
  border-color: rgba(var(--neon-glow-rgb), .5);
  color: var(--neon-glow);
  box-shadow: inset 0 0 12px rgba(var(--neon-glow-rgb), .12);
  font-weight: 600;
}

.gp-listing-group-tab-name {
  text-overflow: ellipsis;
  max-width: 120px;
  overflow: hidden;
}

.gp-listing-group-tab-count {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  min-width: 16px;
  height: 16px;
  font-size: var(--fluid-font-xs);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
  font-weight: 600;
  display: inline-flex;
}

.gp-listing-group-tab-active .gp-listing-group-tab-count {
  background: rgba(var(--neon-glow-rgb), .25);
  color: var(--neon-glow);
}

.gp-listing-group-body {
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  display: flex;
}

.gp-listing-file-item {
  align-items: center;
  gap: var(--fluid-gap-sm);
  transition: background var(--dur-1);
  border-radius: 6px;
  padding: 4px 6px;
  display: flex;
}

.gp-listing-file-item:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
}

.gp-listing-file-idx {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  text-align: right;
  min-width: 18px;
}

.gp-listing-file-thumb {
  object-fit: cover;
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  border-radius: 4px;
  width: 28px;
  height: 28px;
}

.gp-listing-file-name {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  overflow: hidden;
}

.gp-listing-file-size {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  white-space: nowrap;
}

.gp-listing-file-status {
  width: 16px;
  height: 16px;
  color: var(--text-inverse);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .6rem;
  display: flex;
}

.gp-listing-file-btn {
  width: 20px;
  height: 20px;
  color: var(--ocean-foam);
  cursor: pointer;
  transition: all var(--dur-2);
  background: none;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  font-size: .6rem;
  display: flex;
}

.gp-listing-file-btn:hover:not(:disabled) {
  background: rgba(var(--neon-glow-rgb), .15);
  color: var(--neon-glow);
}

.gp-listing-file-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.gp-listing-folder-cards {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.gp-listing-folder-card {
  border: 1px solid rgba(var(--neon-glow-rgb), .18);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .7));
  cursor: pointer;
  width: 176px;
  transition: transform var(--dur-2), box-shadow var(--dur-2), border-color var(--dur-2);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px #00000014;
}

.gp-listing-folder-card:hover {
  border-color: rgba(var(--neon-glow-rgb), .45);
  box-shadow: 0 6px 16px rgba(var(--neon-glow-rgb), .12);
  transform: translateY(-2px);
}

.gp-listing-folder-cover {
  object-fit: cover;
  background: rgba(var(--glass-tint-rgb), .5);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 104px;
  display: flex;
}

.gp-listing-folder-cover-empty {
  color: var(--ocean-light);
  font-size: 1.8rem;
}

.gp-listing-folder-card-info {
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 8px;
  display: flex;
}

.gp-listing-folder-card-name {
  font-size: var(--fluid-font-sm);
  -webkit-line-clamp: 2;
  word-break: break-all;
  -webkit-box-orient: vertical;
  font-weight: 600;
  display: -webkit-box;
  overflow: hidden;
}

.gp-listing-folder-card-count {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
}

.gp-thumb-add {
  border: 1px dashed rgba(var(--neon-glow-rgb), .35);
  width: 176px;
  height: 156px;
  color: var(--ocean-light);
  cursor: pointer;
  transition: all var(--dur-2);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  display: flex;
}

.gp-thumb-add:hover {
  border-color: var(--neon-glow);
  color: var(--neon-glow);
  background: rgba(var(--neon-glow-rgb), .06);
}

.gp-listing-file-thumb-icon {
  color: var(--ocean-foam);
  background: rgba(var(--glass-tint-rgb), .5);
  justify-content: center;
  align-items: center;
  display: flex;
}

.gp-presets {
  gap: var(--fluid-gap-sm);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.gp-preset-active {
  box-shadow: 0 2px 10px rgba(var(--ocean-light-rgb), .3);
  background: linear-gradient(135deg, var(--brand-blue, var(--ocean-light)), var(--ocean-light)) !important;
  color: var(--text-inverse) !important;
  border-color: rgba(var(--ocean-cyan-rgb), .6) !important;
}

.gp-preset-custom {
  border-style: dashed !important;
}

.gp-preset-add-inline {
  align-items: center;
  display: inline-flex;
}

.gp-preset-add-input {
  border: 1px solid var(--neon-glow);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 90px;
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  border-radius: 999px;
  outline: none;
  padding: 4px 8px;
}

.gp-preset-add-btn {
  min-width: 26px;
  color: var(--ocean-foam) !important;
  border-style: dashed !important;
  padding: 4px 8px !important;
}

.gp-listing-suffix-list {
  gap: var(--fluid-gap-sm);
  flex-direction: column;
  display: flex;
}

.gp-listing-suffix-row {
  align-items: center;
  gap: var(--fluid-gap);
  display: flex;
}

.gp-listing-suffix-label {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  white-space: nowrap;
  min-width: 50px;
  font-weight: 600;
}

.gp-listing-suffix-input {
  flex: 1;
  font-size: var(--fluid-font-sm) !important;
  padding: 5px 10px !important;
}

.gp-listing-suffix-remove {
  background: rgba(var(--error-rgb), .1);
  width: 24px;
  height: 24px;
  color: var(--error);
  cursor: pointer;
  font-size: var(--fluid-font-xs);
  transition: all var(--dur-2);
  border: none;
  border-radius: 5px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.gp-listing-suffix-remove:hover {
  background: rgba(var(--error-rgb), .25);
}

.gp-listing-checkbox input[type="checkbox"] {
  accent-color: var(--ocean-light);
}

.gp-listing-col-en.cell-empty, .gp-listing-col-cn.cell-empty {
  background: rgba(var(--error-rgb), .06);
}

.gp-listing-col-en.cell-tooshort, .gp-listing-col-cn.cell-tooshort {
  background: rgba(var(--warning-rgb), .08);
  border-left: 2px solid rgba(var(--warning-rgb), .4);
}

.gp-listing-col-en.cell-truncated, .gp-listing-col-cn.cell-truncated {
  background: rgba(var(--ocean-light-rgb), .06);
  border-left: 2px solid rgba(var(--ocean-light-rgb), .3);
}

.gp-listing-row-error {
  font-size: var(--fluid-font-xs);
  color: var(--error);
  border-top: 1px dashed rgba(var(--error-rgb), .25);
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-column: 1 / -1;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 8px;
  display: flex;
  overflow: hidden;
}

.gp-listing-cell-count {
  text-align: right;
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  font-variant-numeric: tabular-nums;
  grid-column: 1 / -1;
  padding: 0 8px 6px;
}

.gp-listing-cell-count.out {
  color: var(--error);
}

.gp-listing-group-tab-badge {
  font-size: var(--fluid-font-xs);
  background: rgba(var(--ocean-mid-rgb), .14);
  color: var(--ocean-mid);
  border-radius: 999px;
  margin-left: 4px;
  padding: 0 6px;
  line-height: 16px;
}

.gp-listing-step-guide {
  border: 1px solid rgba(var(--accent-cyan-rgb), .14);
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 10px;
  padding: 8px 12px;
  display: flex;
}

.gp-listing-step {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.gp-listing-step-num {
  background: rgba(var(--ocean-light-rgb), .12);
  width: 18px;
  height: 18px;
  color: var(--ocean-light);
  font-size: var(--fluid-font-xs);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-style: normal;
  font-weight: 600;
  display: inline-flex;
}

.gp-listing-step-arrow {
  color: var(--ocean-foam);
  font-size: .7rem;
}

.gp-listing-gen-all {
  border: 1px solid rgba(var(--ocean-light-rgb), .45);
  color: var(--ocean-light);
  background: rgba(var(--ocean-light-rgb), .06);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  border-radius: 999px;
  margin-left: auto;
  padding: 4px 10px;
}

.gp-listing-gen-all:hover {
  background: rgba(var(--ocean-light-rgb), .12);
}

.gp-listing-gen-all:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.gp-listing-copy-btn {
  border-radius: var(--radius-xs);
  border: 1px solid var(--glass-border-mid);
  background: rgba(var(--neon-glow-rgb), .08);
  width: 22px;
  height: 22px;
  color: var(--ocean-mid);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: var(--transition-fast);
  justify-content: center;
  align-items: center;
  display: flex;
}

.gp-listing-copy-btn:hover {
  border-color: var(--ocean-light);
  color: var(--ocean-light);
  background: rgba(var(--ocean-light-rgb), .1);
}

.gp-listing-restore-banner {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--accent-cyan-rgb), .22);
  background: rgba(var(--accent-cyan-rgb), .07);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 12px;
  display: flex;
}

.gp-listing-restore-banner button {
  color: var(--ocean-foam);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: var(--transition-fast);
  background: none;
  border: none;
  margin-left: auto;
}

.gp-listing-restore-banner button:hover {
  color: var(--ocean-deep);
}

.gp-section-title.collapsible {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.gp-section-chevron {
  color: var(--ocean-foam);
  transition: transform var(--dur-2) var(--ease-pro);
  margin-left: auto;
  font-size: .65rem;
  display: inline-flex;
}

.gp-section-chevron.collapsed {
  transform: rotate(-90deg);
}

.gp-context-menu {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-near, .88));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border: 1px solid rgba(var(--glass-tint-rgb), .4);
  box-shadow: 0 8px 30px rgba(var(--ocean-deep-rgb), .15);
  border-radius: 8px;
  min-width: 140px;
  padding: 4px;
}

.gp-context-menu-item {
  align-items: center;
  gap: var(--fluid-gap-sm);
  width: 100%;
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: background var(--dur-1);
  text-align: left;
  white-space: nowrap;
  background: none;
  border: none;
  border-radius: 5px;
  padding: 6px 10px;
  display: flex;
}

.gp-context-menu-item:hover {
  background: rgba(var(--neon-glow-rgb), .12);
  color: var(--ocean-deep);
}

.gp-listing-show-more {
  border: none;
  border-top: 1px solid rgba(var(--accent-cyan-rgb), .14);
  background: rgba(var(--accent-cyan-rgb), .05);
  width: 100%;
  color: var(--ocean-light);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  text-align: center;
  transition: background var(--dur-2) var(--ease-pro);
  padding: 10px 12px;
  display: block;
}

.gp-listing-show-more:hover {
  background: rgba(var(--accent-cyan-rgb), .1);
}

@media (max-width: 960px) {
  .gp-listing-row {
    grid-template-columns: 24px 72px 1fr 1fr 64px;
  }

  .gp-listing-folder-card {
    width: 148px;
  }

  .gp-listing-step-guide {
    padding: 6px 10px;
  }
}

.gp-modal-overlay {
  background: rgba(var(--ocean-deep-rgb), .35);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  z-index: 10000;
  animation: gp-modal-fade-in var(--dur-2) ease-out;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

@keyframes gp-modal-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.gp-modal {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-near, .88));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border: 1px solid rgba(var(--glass-tint-rgb), .4);
  border-radius: var(--fluid-radius);
  box-shadow: 0 20px 60px rgba(var(--ocean-deep-rgb), .2), inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2);
  width: 90%;
  max-width: 480px;
  max-height: 70vh;
  animation: gp-modal-slide-up var(--dur-2) var(--ease-out-expo, ease-out);
  flex-direction: column;
  display: flex;
}

@keyframes gp-modal-slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gp-modal-header {
  padding: var(--fluid-pad) calc(var(--fluid-pad)  + 2px);
  border-bottom: 1px solid rgba(var(--ocean-deep-rgb), .06);
  font-weight: 600;
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.gp-modal-header button {
  width: 28px;
  height: 28px;
  color: var(--ocean-foam);
  cursor: pointer;
  font-size: var(--fluid-font-sm);
  transition: background var(--dur-1);
  background: none;
  border: none;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.gp-modal-header button:hover {
  background: rgba(var(--ocean-deep-rgb), .06);
}

.gp-modal-body {
  padding: var(--fluid-pad) calc(var(--fluid-pad)  + 2px);
  flex: 1;
  overflow-y: auto;
}

.gp-modal-list {
  flex-direction: column;
  gap: 4px;
  max-height: 300px;
  display: flex;
  overflow-y: auto;
}

.gp-modal-list-item {
  justify-content: space-between;
  align-items: center;
  gap: var(--fluid-gap);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  font-size: var(--fluid-font-sm);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
}

.gp-modal-footer {
  gap: var(--fluid-gap);
  padding: var(--fluid-pad) calc(var(--fluid-pad)  + 2px);
  border-top: 1px solid rgba(var(--ocean-deep-rgb), .06);
  justify-content: flex-end;
  display: flex;
}

.gp-field-hint {
  color: var(--ocean-foam);
  font-weight: 400;
  font-size: var(--fluid-font-xs);
  margin-left: 6px;
}

.gp-field-hint-text {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  margin: 4px 0 0;
  line-height: 1.4;
}

.gp-count-buttons {
  gap: var(--fluid-gap-sm);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.gp-count-btn {
  border: 1px solid rgba(var(--glass-tint-rgb), .22);
  border-radius: var(--radius-sm, 8px);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  min-width: 38px;
  height: 30px;
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease-out);
  padding: 0 10px;
  font-weight: 600;
}

.gp-count-btn:hover {
  border-color: var(--ocean-cyan);
  color: var(--ocean-cyan);
  transform: translateY(-1px);
}

.gp-count-btn.active {
  background: linear-gradient(135deg, var(--ocean-cyan), var(--ocean-light));
  border-color: var(--ocean-cyan);
  color: var(--text-inverse);
  box-shadow: 0 2px 8px rgba(var(--bright-cyan-rgb), .3);
}

.gp-count-input {
  border: 1px solid rgba(var(--glass-tint-rgb), .22);
  border-radius: var(--radius-sm, 8px);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 60px;
  height: 30px;
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  text-align: center;
  transition: border-color var(--dur-2);
  outline: none;
  padding: 0 6px;
}

.gp-count-input:focus {
  border-color: var(--ocean-cyan);
}

.gp-count-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gp-count-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gp-switch-wrap {
  align-items: center;
  display: flex;
}

.gp-switch {
  align-items: center;
  gap: var(--fluid-gap);
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  display: inline-flex;
}

.gp-switch-track {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .15);
  width: 40px;
  height: 22px;
  transition: background var(--dur-2) ease, border-color var(--dur-2) ease;
  border-radius: 11px;
  flex-shrink: 0;
  display: inline-block;
  position: relative;
}

.gp-switch-thumb {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 16px;
  height: 16px;
  box-shadow: 0 1px 3px rgba(var(--shadow-rgb), .2);
  transition: transform var(--dur-2) cubic-bezier(.4, 0, .2, 1);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
}

.gp-switch-on .gp-switch-track {
  background: linear-gradient(135deg, var(--ocean-cyan), var(--ocean-light));
  border-color: var(--ocean-cyan);
  box-shadow: 0 0 8px rgba(var(--bright-cyan-rgb), .35);
}

.gp-switch-on .gp-switch-thumb {
  transform: translateX(18px);
}

.gp-switch-label {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-deep);
  opacity: .8;
  white-space: nowrap;
}

.gp-preset-categories {
  gap: var(--fluid-gap);
  scrollbar-gutter: stable;
  flex-direction: column;
  max-height: 560px;
  margin-bottom: 8px;
  padding: 2px;
  display: flex;
  overflow-y: auto;
}

.gp-preset-cat {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.gp-preset-cat-title {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-light);
  padding-left: 2px;
  font-weight: 600;
}

.gp-preset-cat-items {
  gap: var(--fluid-gap-sm);
  flex-wrap: wrap;
  display: flex;
}

.gp-preset-cat-items .gp-preset-chip {
  font-size: var(--fluid-font-sm);
  padding: 4px 10px;
  line-height: 1.5;
}

.gp-preset-cat-title.gp-preset-cat-collapsible {
  cursor: pointer;
  width: 100%;
  font: inherit;
  text-align: left;
  color: var(--ocean-light);
  background: none;
  border: none;
  justify-content: space-between;
  align-items: center;
  padding: 2px;
  display: flex;
}

.gp-preset-cat-title.gp-preset-cat-collapsible:hover {
  color: var(--ocean-deep);
}

.gp-preset-cat-title.gp-preset-cat-collapsible i {
  opacity: .7;
  font-size: .7rem;
}

.ps-preset-groups {
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 6px;
  display: flex;
}

.ps-preset-group {
  border: 1px solid rgba(var(--glass-tint-rgb), .14);
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  overflow: hidden;
}

.ps-preset-group-header {
  cursor: pointer;
  width: 100%;
  font: inherit;
  font-size: var(--fluid-font-sm);
  color: var(--ocean-light);
  text-align: left;
  transition: background var(--dur-2) ease, color var(--dur-2) ease;
  background: none;
  border: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-weight: 600;
  display: flex;
}

.ps-preset-group-header:hover {
  background: rgba(var(--glass-tint-rgb), .12);
  color: var(--ocean-deep);
}

.ps-preset-group-header i {
  opacity: .7;
  margin-left: auto;
  font-size: .7rem;
}

.ps-preset-group-count {
  font-size: var(--fluid-font-xs);
  opacity: .65;
  font-weight: 400;
}

.ps-preset-group-items {
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 10px;
  display: flex;
}

.ps-preset-chip {
  border: 1px solid rgba(var(--neon-glow-rgb), .22);
  background: rgba(var(--neon-glow-rgb), .08);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: all var(--dur-2) ease;
  border-radius: 999px;
  padding: 3px 10px;
  display: inline-block;
}

.ps-preset-chip:hover {
  border-color: rgba(var(--neon-glow-rgb), .5);
  background: rgba(var(--neon-glow-rgb), .16);
  color: var(--ocean-deep);
}

.ps-preset-chip-active {
  border-color: rgba(var(--emerald-rgb), .55);
  background: rgba(var(--emerald-rgb), .16);
  color: var(--emerald);
}

.ps-category-bar {
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .16);
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 6px;
  padding: 10px 12px;
  display: flex;
}

.ps-category-label {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  align-items: center;
  gap: 6px;
  font-weight: 600;
  display: flex;
}

.ps-category-hint {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  opacity: .9;
  align-items: center;
  gap: 6px;
  display: flex;
}

.ps-category-chips {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.ps-category-chip {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18);
  color: var(--ocean-foam);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  white-space: nowrap;
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 500;
}

.ps-category-chip:hover {
  color: var(--ocean-mid);
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .3);
}

.ps-category-chip-active {
  background: linear-gradient(135deg, rgba(var(--success-rgb), .16), rgba(var(--neon-glow-rgb), .1));
  box-shadow: inset 0 0 0 1px rgba(var(--success-rgb), .35), inset 0 0 6px rgba(var(--success-rgb), .06);
  color: var(--success);
  font-weight: 600;
}

.ps-category-detect-btn {
  background: linear-gradient(135deg, rgba(var(--indigo-rgb), .14), rgba(var(--neon-glow-rgb), .1));
  box-shadow: inset 0 0 0 1px rgba(var(--indigo-rgb), .25);
  color: rgb(var(--indigo-rgb));
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 12px;
  font-weight: 600;
  display: inline-flex;
}

.ps-category-detect-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(var(--indigo-rgb), .22), rgba(var(--neon-glow-rgb), .16));
  box-shadow: inset 0 0 0 1px rgba(var(--indigo-rgb), .4);
  transform: translateY(-1px);
}

.ps-category-detect-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.ps-category-reco {
  background: rgba(var(--success-rgb), .08);
  box-shadow: inset 0 0 0 1px rgba(var(--success-rgb), .2);
  border-radius: 10px;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  display: flex;
}

.ps-category-reco-text {
  min-width: 200px;
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  flex: 1;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
  display: flex;
}

.ps-category-apply-btn {
  background: linear-gradient(135deg, rgba(var(--success-rgb), .16), rgba(var(--neon-glow-rgb), .1));
  box-shadow: inset 0 0 0 1px rgba(var(--success-rgb), .3);
  color: var(--success);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-weight: 600;
  display: inline-flex;
}

.ps-category-apply-btn:hover {
  background: linear-gradient(135deg, rgba(var(--success-rgb), .24), rgba(var(--neon-glow-rgb), .16));
  transform: translateY(-1px);
}

.ps-director-input-row {
  align-items: flex-end;
  gap: 10px;
  display: flex;
}

.ps-director-input {
  flex: 1;
}

.ps-director-btn {
  flex-shrink: 0;
  margin-left: 0;
  padding: 9px 16px;
}

.ps-director-hint {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  align-items: center;
  gap: 6px;
  margin: 8px 2px 0;
  line-height: 1.5;
  display: flex;
}

.ps-director-active {
  background: rgba(var(--warning-rgb), .08);
  box-shadow: inset 0 0 0 1px rgba(var(--warning-rgb), .22);
  color: var(--warning);
  font-size: var(--fluid-font-xs);
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  line-height: 1.5;
  display: flex;
}

.ps-director-plan {
  padding: var(--fluid-pad);
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--warning-rgb), .22), inset 0 0 24px rgba(var(--warning-rgb), .04);
  margin-top: 14px;
}

.ps-plan-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.ps-plan-title {
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  align-items: center;
  gap: 8px;
  font-weight: 600;
  display: flex;
}

.ps-plan-summary {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.ps-plan-summary-chip {
  background: rgba(var(--warning-rgb), .1);
  box-shadow: inset 0 0 0 1px rgba(var(--warning-rgb), .24);
  color: var(--warning);
  font-size: var(--fluid-font-xs);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 600;
}

.ps-storyboard-list {
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 14px;
  display: flex;
}

.ps-storyboard-item {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .14);
  border-radius: 12px;
  gap: 12px;
  padding: 12px;
  display: flex;
}

.ps-storyboard-index {
  background: linear-gradient(135deg, rgba(var(--warning-rgb), .18), rgba(var(--neon-glow-rgb), .1));
  width: 30px;
  height: 30px;
  color: var(--warning);
  font-size: var(--fluid-font-xs);
  border-radius: 9px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.ps-storyboard-body {
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.ps-storyboard-title {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-deep);
  font-weight: 600;
}

.ps-storyboard-desc {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  line-height: 1.5;
}

.ps-storyboard-prompt {
  background: rgba(var(--glass-tint-rgb), .5);
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12);
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.55;
}

.ps-storyboard-note {
  font-size: var(--fluid-font-xs);
  color: var(--warning);
  align-items: center;
  gap: 5px;
  display: flex;
}

.ps-plan-actions {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.ps-plan-actions .detail-ai-btn {
  margin-left: 0;
}

.ps-plan-apply {
  background: linear-gradient(135deg, rgba(var(--success-rgb), .18), rgba(var(--neon-glow-rgb), .12));
  box-shadow: inset 0 0 0 1px rgba(var(--success-rgb), .35);
  color: var(--success);
}

.ps-plan-fill {
  background: linear-gradient(135deg, rgba(var(--indigo-rgb), .16), rgba(var(--neon-glow-rgb), .1));
}

.ps-plan-cancel {
  margin-left: auto;
}

.ps-plan-generate {
  background: linear-gradient(135deg, var(--ocean-light), var(--neon-glow));
  color: var(--text-inverse);
  font-weight: 600;
}

.ps-template-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  display: grid;
}

.ps-template-card {
  text-align: left;
  border: 1px dashed var(--glass-border-mid);
  background: rgba(var(--glass-tint-rgb), .5);
  color: var(--ocean-mid);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  border-radius: 12px;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  display: flex;
}

.ps-template-card:hover {
  border-color: var(--neon-glow);
  box-shadow: 0 6px 18px rgba(var(--neon-glow-rgb), .12);
  border-style: solid;
  transform: translateY(-2px);
}

.ps-template-card.active {
  border-color: var(--neon-glow);
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .14), rgba(var(--ocean-cyan-rgb), .08));
  border-style: solid;
}

.ps-template-name {
  font-size: var(--fluid-font-base);
  color: var(--text-primary);
  font-weight: 600;
}

.ps-template-desc {
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.45;
}

.gp-field .gp-textarea {
  margin-top: 4px;
}

.settings-area .setting-group {
  position: relative;
}

.settings-area .setting-group > * {
  z-index: 1;
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .gp-panel:before, .gp-panel:after, .gp-section:before, .gp-section:after, .gp-func-header:before, .gp-func-header:after, .gp-upload:before {
    animation: none !important;
  }

  .gp-panel:not(.gsap-ready) > .gp-section, .gp-panel:not(.gsap-ready) > .gp-func-header, .gp-panel:not(.gsap-ready) > .gp-actions, .gp-panel:not(.gsap-ready) .gp-result, .gp-listing-row:not(.gp-listing-header) {
    animation-duration: .001ms !important;
  }

  .gp-btn-gen:before, .gp-btn:before, .gp-btn-abort:before {
    opacity: 0 !important;
    transition: none !important;
  }

  .gp-marker, .gp-func-dropdown {
    animation: none !important;
  }
}

.cutout-badge {
  font-size: var(--fluid-font-xs);
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 10px;
  font-weight: 600;
  display: inline-flex;
}

.cutout-badge-gpu {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .2), rgba(var(--neon-glow-rgb), .15));
  border: 1px solid rgba(var(--neon-glow-rgb), .35);
  color: var(--neon-glow);
  box-shadow: inset 0 0 8px rgba(var(--neon-glow-rgb), .1);
}

.cutout-badge i {
  font-size: var(--fluid-font-xs);
}

.cutout-dropzone {
  border: 2px dashed rgba(var(--neon-glow-rgb), .4);
  border-radius: var(--fluid-radius);
  cursor: pointer;
  min-height: 160px;
  transition: all var(--dur-3) var(--ease-out-expo);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.cutout-dropzone:hover {
  border-color: rgba(var(--neon-glow-rgb), .6);
  background: rgba(var(--neon-glow-rgb), .06);
}

.cutout-dropzone-active {
  background: rgba(var(--neon-glow-rgb), .06);
}

.cutout-dropzone-has-images {
  cursor: default;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 12px;
}

.cutout-dropzone-has-images .detail-batch-grid {
  margin-top: 0;
}

.cutout-dropzone-has-images .cutout-batch-actions {
  margin-top: 10px;
}

.cutout-dropzone-has-images:hover {
  border-color: rgba(var(--neon-glow-rgb), .4);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
}

.cutout-dropzone-content {
  text-align: center;
  padding: 20px;
}

.cutout-dropzone-icon {
  color: var(--ocean-light);
  opacity: .7;
  margin-bottom: 8px;
  font-size: 2.4rem;
}

.cutout-dropzone-text {
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  margin: 0 0 4px;
  font-weight: 600;
}

.cutout-dropzone-hint {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  margin: 0;
}

.sku-dropzone-preview {
  position: relative;
}

.sku-dropzone-remove {
  background: rgba(var(--error-rgb), .92);
  width: 26px;
  height: 26px;
  color: var(--yue-ui-white);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out-expo), transform var(--dur-2) var(--ease-out-expo);
  box-shadow: 0 4px 12px rgba(var(--yue-ui-black-rgb), .25);
  z-index: 2;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: .8rem;
  display: flex;
  position: absolute;
  top: 6px;
  right: 6px;
  transform: scale(.85);
}

.sku-dropzone-preview:hover .sku-dropzone-remove {
  opacity: 1;
  transform: scale(1);
}

.sku-dropzone-remove:hover {
  background: rgba(var(--error-rgb), 1);
}

.sku-mask-error {
  color: var(--error);
  margin-top: 8px;
}

.cutout-model-loading {
  animation: gp-agent-fade-in var(--dur-3) var(--ease-out-expo) both;
}

.cutout-loading-bar {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  border-radius: 999px;
  width: 100%;
  height: 6px;
  margin: 12px 0 8px;
  overflow: hidden;
}

.cutout-loading-progress {
  background: linear-gradient(90deg, rgba(var(--indigo-rgb), .6), rgba(var(--indigo-rgb), .6));
  transform-origin: 0;
  will-change: transform;
  width: 40%;
  height: 100%;
  animation: cutoutLoadingSweep 1.5s var(--ease-in-out-quad) infinite;
  border-radius: 999px;
}

@keyframes cutoutLoadingSweep {
  0% {
    transform: translateX(0)scaleX(.375);
  }

  50% {
    transform: translateX(62.5%)scaleX(1.375);
  }

  100% {
    transform: translateX(200%)scaleX(.375);
  }
}

.cutout-loading-hint {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  margin: 0;
  line-height: 1.6;
}

.cutout-loading-sub {
  font-size: var(--fluid-font-xs);
  opacity: .9;
}

.cutout-grid {
  gap: var(--fluid-gap);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: 12px;
  display: grid;
}

.cutout-card {
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .15);
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .08), 0 4px 16px rgba(var(--ocean-deep-rgb), .03);
  transition: transform var(--dur-3) var(--ease-out-expo), box-shadow var(--dur-3) var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}

.cutout-card:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .15), 0 8px 24px rgba(var(--ocean-deep-rgb), .06);
  transform: translateY(-2px);
}

.cutout-card-original, .cutout-card-result {
  aspect-ratio: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.cutout-card-original {
  border-bottom: 1px solid rgba(var(--glass-tint-rgb), .1);
}

.cutout-card-original img, .cutout-card-result img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.cutout-checkerboard {
  background-image: linear-gradient(45deg, rgba(var(--ocean-foam-rgb), .25) 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--ocean-foam-rgb), .25) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--ocean-foam-rgb), .25) 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--ocean-foam-rgb), .25) 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.cutout-card-label {
  font-size: var(--fluid-font-xs);
  background: rgba(var(--ocean-deep-rgb), .5);
  color: rgba(var(--glass-tint-rgb), .85);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 600;
  position: absolute;
  top: 6px;
  left: 6px;
}

.cutout-card-label-success {
  background: rgba(var(--success-rgb), .5);
  color: rgba(var(--glass-tint-rgb), .95);
}

.cutout-card-placeholder {
  justify-content: center;
  align-items: center;
  gap: var(--fluid-gap-sm);
  width: 100%;
  height: 100%;
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  flex-direction: column;
  display: flex;
}

.cutout-card-placeholder i {
  opacity: .8;
  font-size: 1.6rem;
}

.cutout-card-error {
  color: var(--error);
}

.cutout-retry-btn {
  border: 1px solid rgba(var(--error-rgb), .3);
  background: rgba(var(--error-rgb), .1);
  color: var(--error);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) ease;
  border-radius: 999px;
  margin-top: 4px;
  padding: 3px 12px;
}

.cutout-retry-btn:hover {
  background: rgba(var(--error-rgb), .2);
  border-color: rgba(var(--error-rgb), .5);
}

.cutout-download-btn {
  border: 1px solid rgba(var(--neon-glow-rgb), .3);
  background: rgba(var(--neon-glow-rgb), .15);
  color: var(--neon-glow);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  transition: all var(--dur-2) ease;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-weight: 600;
  display: inline-flex;
  position: absolute;
  bottom: 6px;
  right: 6px;
}

.cutout-download-btn:hover {
  background: rgba(var(--neon-glow-rgb), .3);
  border-color: rgba(var(--neon-glow-rgb), .5);
  transform: scale(1.05);
}

.cutout-batch-actions {
  gap: var(--fluid-gap);
  justify-content: flex-end;
  margin-top: 14px;
  display: flex;
}

.cutout-action-btn {
  border: 1px solid rgba(var(--neon-glow-rgb), .25);
  background: rgba(var(--neon-glow-rgb), .1);
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  transition: all var(--dur-2) var(--ease-out-expo);
  align-items: center;
  gap: var(--fluid-gap-sm);
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 600;
  display: inline-flex;
}

.cutout-action-btn:hover {
  background: rgba(var(--neon-glow-rgb), .2);
  border-color: rgba(var(--neon-glow-rgb), .4);
  transform: translateY(-1px);
}

.cutout-action-btn-danger {
  border-color: rgba(var(--error-rgb), .2);
  background: rgba(var(--error-rgb), .08);
}

.cutout-action-btn-danger:hover {
  background: rgba(var(--error-rgb), .15);
  border-color: rgba(var(--error-rgb), .35);
}

.cutout-info-section {
  padding: var(--fluid-pad) calc(var(--fluid-pad)  + 2px);
}

.cutout-info-list {
  gap: var(--fluid-gap-sm);
  flex-direction: column;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.cutout-info-list li {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  align-items: center;
  gap: var(--fluid-gap-sm);
  display: flex;
}

.cutout-info-list i {
  color: rgba(var(--success-rgb), .7);
  font-size: var(--fluid-font-xs);
}

.detail-mode-switcher {
  gap: var(--fluid-gap);
  display: flex;
}

.detail-mode-btn {
  padding: var(--fluid-pad) var(--fluid-pad);
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2), inset 0 1px 0 rgba(var(--glass-tint-rgb), .25);
  cursor: pointer;
  transition: all var(--dur-3) var(--ease-out-expo);
  text-align: left;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  gap: 4px;
  display: flex;
}

.detail-mode-btn i {
  color: var(--ocean-light);
  opacity: .7;
  transition: all var(--dur-3) var(--ease-out-expo);
  font-size: 1.3rem;
}

.detail-mode-btn > span:nth-child(2) {
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  font-weight: 600;
}

.detail-mode-btn:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18), inset 0 1px 0 rgba(var(--glass-tint-rgb), .22);
}

.detail-mode-btn-active {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .12), rgba(var(--neon-glow-rgb), .08));
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .3), inset 0 0 16px rgba(var(--neon-glow-rgb), .06), 0 4px 20px rgba(var(--neon-glow-rgb), .06);
}

.detail-mode-btn-active i {
  color: var(--neon-glow);
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(var(--neon-glow-rgb), .4));
}

.detail-mode-hint {
  opacity: .9;
  color: var(--ocean-foam) !important;
  font-size: .7rem !important;
  font-weight: 400 !important;
}

.detail-upload-grid {
  gap: var(--fluid-gap);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
  position: relative;
}

.detail-upload-slot {
  aspect-ratio: 1;
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18);
  cursor: pointer;
  transition: all var(--dur-3) var(--ease-out-expo);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.detail-upload-slot:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .25);
}

.detail-upload-slot-drag {
  background: rgba(var(--neon-glow-rgb), .06);
}

.detail-upload-slot-filled {
  cursor: default;
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .22);
}

.detail-upload-slot img {
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
  height: 100%;
}

.detail-upload-placeholder {
  color: var(--ocean-foam);
  opacity: .9;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  display: flex;
}

.detail-upload-placeholder i {
  font-size: var(--fluid-font-lg);
}

.detail-upload-placeholder span {
  font-size: var(--fluid-font-xs);
  font-weight: 600;
}

.detail-upload-slot-filled:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2);
}

.detail-slot-remove {
  background: rgba(var(--ocean-deep-rgb), .6);
  width: 20px;
  height: 20px;
  color: rgba(var(--glass-tint-rgb), .9);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  transition: all var(--dur-2) ease;
  opacity: 0;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: .6rem;
  display: flex;
  position: absolute;
  top: 4px;
  right: 4px;
}

.detail-upload-slot-filled:hover .detail-slot-remove, .detail-batch-thumb:hover .detail-slot-remove, .detail-ref-preview:hover .detail-slot-remove {
  opacity: 1;
}

.detail-slot-remove:hover {
  background: rgba(var(--error-rgb), .7);
  transform: scale(1.1);
}

.detail-slot-index {
  font-size: var(--fluid-font-xs);
  background: rgba(var(--ocean-deep-rgb), .5);
  color: rgba(var(--glass-tint-rgb), .85);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border-radius: 999px;
  padding: 1px 6px;
  font-weight: 600;
  position: absolute;
  bottom: 4px;
  left: 4px;
}

.detail-upload-count {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  margin: 8px 0 0;
  font-weight: 500;
}

.detail-batch-grid {
  gap: var(--fluid-gap);
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  max-height: 320px;
  margin-top: 12px;
  padding: 2px;
  display: grid;
  overflow-y: auto;
}

.detail-batch-thumb {
  aspect-ratio: 1;
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2);
  cursor: grab;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.detail-batch-thumb.drag-over {
  border: 1px solid var(--neon-glow);
  box-shadow: 0 0 0 2px rgba(var(--neon-glow-rgb), .35);
  opacity: .85;
}

.detail-batch-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.detail-batch-thumb-more {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2);
  color: rgb(var(--neon-glow-rgb));
  font-size: var(--fluid-font-md);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.detail-ai-btn {
  align-items: center;
  gap: var(--fluid-gap-sm);
  background: linear-gradient(135deg, rgba(var(--indigo-rgb), .12), rgba(var(--neon-glow-rgb), .1));
  box-shadow: inset 0 0 0 1px rgba(var(--indigo-rgb), .2), inset 0 1px 0 rgba(var(--glass-tint-rgb), .12);
  color: rgb(var(--indigo-rgb));
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  white-space: nowrap;
  border-radius: 999px;
  margin-left: auto;
  padding: 5px 14px;
  font-weight: 600;
  display: inline-flex;
}

.detail-ai-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(var(--indigo-rgb), .2), rgba(var(--neon-glow-rgb), .16));
  box-shadow: inset 0 0 0 1px rgba(var(--indigo-rgb), .35), inset 0 1px 0 rgba(var(--glass-tint-rgb), .18), 0 4px 16px rgba(var(--indigo-rgb), .08);
  transform: translateY(-1px);
}

.detail-ai-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.detail-ai-btn-full {
  width: 100%;
  padding: var(--fluid-pad) var(--fluid-pad);
  font-size: var(--fluid-font-sm);
  justify-content: center;
  margin-top: 12px;
  margin-left: 0;
}

.detail-batch-toggle {
  align-items: center;
  gap: var(--fluid-gap);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .16);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  display: flex;
}

.detail-toggle-label {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  white-space: nowrap;
  font-weight: 600;
}

.detail-toggle-btn {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18);
  color: var(--ocean-foam);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 600;
}

.detail-toggle-btn:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
}

.detail-toggle-btn-active {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .15), rgba(var(--neon-glow-rgb), .1));
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .3), inset 0 0 8px rgba(var(--neon-glow-rgb), .04);
  color: var(--neon-glow);
}

.detail-product-fields {
  gap: var(--fluid-gap);
  transition: opacity var(--dur-3) ease;
  flex-direction: column;
  display: flex;
}

.detail-fields-locked {
  opacity: .75;
  pointer-events: none;
}

.detail-field-row {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.detail-field-full {
  grid-column: 1 / -1;
}

.detail-field-label {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  align-items: center;
  gap: var(--fluid-gap-sm);
  font-weight: 600;
  display: flex;
}

.detail-field-hint {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  opacity: .9;
  font-weight: 400;
}

.detail-locked-hint {
  font-size: var(--fluid-font-xs);
  color: var(--card-accent-video);
  align-items: center;
  gap: var(--fluid-gap-sm);
  margin: 8px 0 0;
  display: flex;
}

.detail-plan-preview {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.detail-plan-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.detail-plan-head strong {
  color: var(--text-primary);
  font-size: 15px;
}

.detail-plan-total {
  color: var(--ocean-light);
  font-size: 12px;
  font-weight: 600;
}

.detail-plan-block {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.detail-plan-label {
  color: var(--ocean-mid);
  font-size: 12px;
  font-weight: 600;
}

.detail-plan-chips {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.detail-plan-chip {
  background: rgba(var(--ocean-light-rgb), .1);
  border: 1px solid rgba(var(--ocean-light-rgb), .25);
  color: var(--ocean-mid);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
}

.detail-plan-chips-sm .detail-plan-chip {
  padding: 2px 6px;
  font-size: 10px;
}

.detail-plan-specs {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.detail-plan-spec {
  background: rgba(var(--glass-tint-rgb), .06);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 11px;
}

.detail-plan-bible {
  color: var(--text-secondary);
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 1.6;
  display: flex;
}

.detail-plan-screens {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.detail-plan-screen {
  border: 1px solid rgba(var(--glass-tint-rgb), .12);
  background: rgba(var(--glass-tint-rgb), .04);
  border-radius: 10px;
  padding: 10px 12px;
}

.detail-plan-screen-head {
  align-items: center;
  gap: 8px;
  display: flex;
}

.detail-plan-screen-index {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  width: 20px;
  height: 20px;
  color: var(--yue-ui-white);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.detail-plan-screen-count {
  color: var(--ocean-foam);
  margin-left: auto;
  font-size: 11px;
}

.detail-plan-screen-purpose {
  color: var(--text-secondary);
  margin: 6px 0;
  font-size: 12px;
  line-height: 1.5;
}

.detail-plan-summary {
  color: var(--text-tertiary);
  font-size: 12px;
  font-style: italic;
  line-height: 1.6;
}

.detail-plan-actions {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.detail-ai-btn-primary {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--yue-ui-white);
}

.detail-char-count {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  text-align: right;
  opacity: .9;
  margin-top: 2px;
}

.detail-style-options {
  gap: var(--fluid-gap);
  padding: var(--fluid-pad) var(--fluid-pad);
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .16);
  flex-direction: column;
  margin-bottom: 14px;
  display: flex;
}

.detail-style-option-group {
  align-items: center;
  gap: var(--fluid-gap);
  flex-wrap: wrap;
  display: flex;
}

.detail-style-option-label {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  flex-shrink: 0;
  min-width: 64px;
  font-weight: 600;
}

.detail-style-capsules {
  gap: var(--fluid-gap-sm);
  flex-wrap: wrap;
  display: flex;
}

.detail-style-capsule {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18);
  color: var(--ocean-foam);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  white-space: nowrap;
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 500;
}

.detail-style-capsule:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-mid);
}

.detail-style-capsule-active {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .15), rgba(var(--neon-glow-rgb), .1));
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .3), inset 0 0 6px rgba(var(--neon-glow-rgb), .05);
  color: var(--neon-glow);
  font-weight: 600;
}

.detail-style-mode-switcher {
  gap: var(--fluid-gap);
  margin-bottom: 12px;
  display: flex;
}

.detail-style-mode-btn {
  justify-content: center;
  align-items: center;
  gap: var(--fluid-gap-sm);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18);
  color: var(--ocean-foam);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  border-radius: 12px;
  flex: 1;
  padding: 8px 10px;
  font-weight: 600;
  display: flex;
}

.detail-style-mode-btn:hover:not(:disabled) {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-mid);
}

.detail-style-mode-btn:disabled {
  opacity: .8;
  cursor: not-allowed;
}

.detail-style-mode-btn-active {
  background: linear-gradient(135deg, rgba(var(--indigo-rgb), .12), rgba(var(--neon-glow-rgb), .08));
  box-shadow: inset 0 0 0 1px rgba(var(--indigo-rgb), .25), inset 0 0 10px rgba(var(--indigo-rgb), .04);
  color: rgb(var(--indigo-rgb));
}

.detail-style-mode-btn-active i {
  filter: drop-shadow(0 0 4px rgba(var(--indigo-rgb), .3));
}

.detail-style-content {
  min-height: 60px;
}

.detail-recommend-grid {
  gap: var(--fluid-gap);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top: 12px;
  display: grid;
}

.detail-recommend-card {
  padding: var(--fluid-pad) var(--fluid-pad);
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18);
  cursor: pointer;
  transition: all var(--dur-3) var(--ease-out-expo);
  gap: var(--fluid-gap-sm);
  flex-direction: column;
  display: flex;
  position: relative;
}

.detail-recommend-card:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--indigo-rgb), .2);
  transform: translateY(-2px);
}

.detail-recommend-card-active {
  background: linear-gradient(135deg, rgba(var(--indigo-rgb), .1), rgba(var(--neon-glow-rgb), .06));
  box-shadow: inset 0 0 0 1px rgba(var(--indigo-rgb), .3), inset 0 0 12px rgba(var(--indigo-rgb), .04);
}

.detail-recommend-rank {
  font-size: var(--fluid-font-xs);
  color: var(--card-accent-video);
  font-weight: 600;
}

.detail-recommend-style {
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  font-weight: 600;
}

.detail-recommend-prompt {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  opacity: .9;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 60px;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.detail-recommend-reason {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  opacity: .9;
  font-style: italic;
  line-height: 1.4;
}

.detail-recommend-action {
  font-size: var(--fluid-font-xs);
  color: var(--card-accent-video);
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-weight: 600;
  display: flex;
}

.detail-recommend-card-active .detail-recommend-action {
  color: rgba(var(--indigo-rgb), .8);
}

.detail-ref-dropzone {
  border: 2px dashed rgba(var(--indigo-rgb), .35);
  border-radius: var(--fluid-radius);
  cursor: pointer;
  min-height: 140px;
  transition: all var(--dur-3) var(--ease-out-expo);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.detail-ref-dropzone:hover {
  border-color: rgba(var(--indigo-rgb), .5);
  background: rgba(var(--indigo-rgb), .08);
}

.detail-ref-dropzone-active {
  background: rgba(var(--indigo-rgb), .06);
}

.detail-ref-preview {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 140px;
  display: flex;
  position: relative;
}

.detail-ref-preview img {
  object-fit: contain;
  border-radius: 12px;
  max-width: 100%;
  max-height: 140px;
}

.detail-ref-grid {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  display: flex;
}

.detail-ref-grid .detail-ref-preview {
  flex: none;
  width: 120px;
  height: 120px;
}

.detail-ref-grid .detail-ref-preview img {
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
  height: 100%;
}

.detail-ref-add-tile {
  border: 1.5px dashed rgba(var(--indigo-rgb), .35);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 120px;
  height: 120px;
  color: var(--ocean-mid);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  border-radius: 12px;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 6px;
  display: flex;
}

.detail-ref-add-tile:hover {
  border-color: rgba(var(--indigo-rgb), .55);
  background: rgba(var(--indigo-rgb), .08);
  color: var(--ocean-deep);
}

.detail-ref-add-tile i {
  opacity: .8;
  font-size: 1.4rem;
}

.detail-ref-add-tile span {
  font-size: var(--fluid-font-sm);
}

.detail-template-group {
  margin-bottom: 16px;
}

.detail-template-group-head {
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  padding-left: 2px;
  display: flex;
}

.detail-template-group-name {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-deep);
  letter-spacing: .02em;
  font-weight: 650;
}

.detail-template-group-desc {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  opacity: .85;
}

.detail-template-grid {
  gap: var(--fluid-gap);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  display: grid;
}

.detail-template-card {
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18);
  transition: all var(--dur-3) var(--ease-out-expo);
  flex-direction: column;
  gap: 6px;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.detail-template-card:hover:not(:disabled) {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--warning-rgb), .25);
  transform: translateY(-2px);
}

.detail-template-card:disabled {
  cursor: default;
  opacity: .85;
}

.detail-template-card-in-queue {
  background: linear-gradient(135deg, rgba(var(--warning-rgb), .08), rgba(var(--neon-glow-rgb), .05));
  box-shadow: inset 0 0 0 1px rgba(var(--warning-rgb), .25);
}

.detail-template-card-main {
  gap: var(--fluid-gap-sm);
  padding: var(--fluid-pad) var(--fluid-pad);
  text-align: left;
  cursor: pointer;
  color: inherit;
  background: none;
  border: none;
  flex-direction: column;
  flex: 1;
  width: 100%;
  display: flex;
}

.detail-template-card-main:hover .detail-template-add {
  background: rgba(var(--warning-rgb), .25);
}

.detail-template-name {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-deep);
  font-weight: 600;
}

.detail-template-layout {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  opacity: .9;
  line-height: 1.4;
}

.detail-template-add {
  width: 22px;
  height: 22px;
  font-size: var(--fluid-font-xs);
  background: rgba(var(--warning-rgb), .15);
  color: var(--warning);
  box-shadow: inset 0 0 0 1px rgba(var(--warning-rgb), .2);
  transition: all var(--dur-2) ease;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 8px;
  right: 8px;
}

.detail-template-card-in-queue .detail-template-add {
  background: rgba(var(--warning-rgb), .25);
  color: var(--warning);
  box-shadow: inset 0 0 0 1px rgba(var(--warning-rgb), .35);
}

.detail-template-badge {
  min-width: 20px;
  height: 20px;
  font-size: var(--fluid-font-xs);
  text-align: center;
  background: linear-gradient(135deg, rgba(var(--warning-rgb), .9), rgba(var(--golden-rgb), .9));
  color: var(--text-inverse);
  box-shadow: 0 2px 8px rgba(var(--warning-rgb), .4);
  animation: detail-badge-pop var(--dur-3) var(--ease-out-expo);
  border-radius: 999px;
  padding: 0 6px;
  font-weight: 650;
  line-height: 20px;
  position: absolute;
  top: 6px;
  left: 6px;
}

@keyframes detail-badge-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  60% {
    transform: scale(1.15);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.detail-template-toolbar {
  padding: 6px var(--fluid-pad);
  border-top: 1px solid rgba(var(--glass-tint-rgb), .12);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  display: flex;
}

.detail-template-text-label {
  color: var(--ocean-mid);
  opacity: .9;
  font-size: .68rem;
  font-weight: 600;
}

.detail-text-toggle {
  cursor: pointer;
  background: rgba(var(--glass-tint-rgb), .5);
  width: 34px;
  height: 18px;
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .25);
  transition: background var(--dur-2) var(--ease-out-expo);
  border: none;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 0;
  position: relative;
}

.detail-text-toggle-knob {
  background: var(--ocean-foam);
  width: 14px;
  height: 14px;
  box-shadow: 0 1px 3px rgba(var(--yue-ui-black-rgb), .25);
  transition: transform var(--dur-2) var(--ease-out-expo), background var(--dur-2);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
}

.detail-text-toggle-on {
  background: linear-gradient(135deg, rgba(var(--warning-rgb), .85), rgba(var(--golden-rgb), .85));
  box-shadow: inset 0 0 0 1px rgba(var(--warning-rgb), .4);
}

.detail-text-toggle-on .detail-text-toggle-knob {
  background: var(--text-inverse);
  transform: translateX(16px);
}

.detail-template-queue {
  padding: var(--fluid-pad) var(--fluid-pad);
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .16);
  margin-top: 14px;
}

.detail-queue-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.detail-queue-title {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  align-items: center;
  gap: var(--fluid-gap-sm);
  font-weight: 600;
  display: flex;
}

.detail-queue-list {
  gap: var(--fluid-gap-sm);
  flex-direction: column;
  display: flex;
}

.detail-queue-item {
  align-items: center;
  gap: var(--fluid-gap);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .16);
  transition: all var(--dur-2) ease;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
}

.detail-queue-item:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
}

.detail-queue-index {
  width: 22px;
  height: 22px;
  font-size: var(--fluid-font-xs);
  background: linear-gradient(135deg, rgba(var(--warning-rgb), .15), rgba(var(--neon-glow-rgb), .1));
  box-shadow: inset 0 0 0 1px rgba(var(--warning-rgb), .2);
  color: var(--warning);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.detail-queue-name {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-deep);
  flex-shrink: 0;
  font-weight: 600;
}

.detail-queue-layout {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  opacity: .9;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.detail-queue-text {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .12);
  color: var(--ocean-foam);
  cursor: pointer;
  transition: all var(--dur-2) ease;
  border: none;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 2px 8px;
  font-family: inherit;
  font-size: .62rem;
  font-weight: 600;
}

.detail-queue-text-on {
  background: linear-gradient(135deg, rgba(var(--warning-rgb), .15), rgba(var(--golden-rgb), .12));
  box-shadow: inset 0 0 0 1px rgba(var(--warning-rgb), .25);
  color: var(--warning);
}

.detail-queue-text:hover {
  transform: translateY(-1px);
}

.detail-queue-actions {
  flex-shrink: 0;
  gap: 4px;
  display: flex;
}

.detail-queue-actions button {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 24px;
  height: 24px;
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) ease;
  border: none;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.detail-queue-actions button:hover:not(:disabled) {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-deep);
}

.detail-queue-actions button:disabled {
  opacity: .75;
  cursor: not-allowed;
}

.detail-queue-remove:hover {
  background: rgba(var(--error-rgb), .15) !important;
  color: rgba(var(--error-rgb), .8) !important;
}

.detail-emotion-actions {
  align-items: center;
  gap: var(--fluid-gap);
  margin-top: 2px;
  display: flex;
}

.detail-emotion-actions .detail-ai-btn {
  margin-left: 0;
}

.detail-emotion-clear {
  border: 1px solid rgba(var(--error-rgb), .2);
  background: rgba(var(--error-rgb), .08);
  color: rgba(var(--error-rgb), .85);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) ease;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-weight: 600;
  display: inline-flex;
}

.detail-emotion-clear:hover {
  background: rgba(var(--error-rgb), .16);
  border-color: rgba(var(--error-rgb), .35);
}

.detail-emotion-panel {
  padding: var(--fluid-pad) var(--fluid-pad);
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .16);
  margin-top: 12px;
}

.detail-emotion-header {
  justify-content: space-between;
  align-items: center;
  gap: var(--fluid-gap);
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  margin-bottom: 10px;
  font-weight: 600;
  display: flex;
}

.detail-emotion-header i {
  color: var(--neon-glow);
}

.detail-emotion-hint {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  opacity: .9;
  font-weight: 400;
}

.detail-emotion-grid {
  gap: var(--fluid-gap);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.detail-emotion-card {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .14);
  border-radius: 12px;
  padding: 12px;
}

.detail-emotion-card-rational {
  box-shadow: inset 0 2px 0 rgba(var(--indigo-rgb), .7), inset 0 0 0 1px rgba(var(--indigo-rgb), .14);
}

.detail-emotion-card-emotional {
  box-shadow: inset 0 2px 0 rgba(var(--warning-rgb), .7), inset 0 0 0 1px rgba(var(--warning-rgb), .14);
}

.detail-emotion-card-identity {
  box-shadow: inset 0 2px 0 rgba(var(--neon-glow-rgb), .7), inset 0 0 0 1px rgba(var(--neon-glow-rgb), .14);
}

.detail-emotion-card-title {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-deep);
  font-weight: 600;
}

.detail-emotion-card-desc {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  opacity: .9;
  margin: 2px 0 8px;
}

.detail-emotion-list {
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.detail-emotion-list li {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  align-items: flex-start;
  gap: 6px;
  line-height: 1.45;
  display: flex;
}

.detail-emotion-metaphor {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .16), rgba(var(--indigo-rgb), .12));
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .22);
  color: var(--neon-glow);
  white-space: nowrap;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
}

.detail-layout-reverse {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.detail-layout-result {
  padding: var(--fluid-pad) var(--fluid-pad);
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .16);
  margin-top: 12px;
}

.detail-layout-result-header {
  justify-content: space-between;
  align-items: center;
  gap: var(--fluid-gap);
  margin-bottom: 10px;
  display: flex;
}

.detail-layout-result-title {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  align-items: center;
  gap: var(--fluid-gap-sm);
  font-weight: 600;
  display: flex;
}

.detail-layout-result-title i {
  color: var(--error);
}

.detail-layout-style-toggle {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  cursor: pointer;
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  display: flex;
}

.detail-layout-screens {
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  padding-right: 2px;
  display: flex;
  overflow-y: auto;
}

.detail-layout-screen {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .14);
  border-radius: 10px;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.detail-layout-screen-index {
  width: 22px;
  height: 22px;
  font-size: var(--fluid-font-xs);
  background: linear-gradient(135deg, rgba(var(--error-rgb), .15), rgba(var(--neon-glow-rgb), .1));
  box-shadow: inset 0 0 0 1px rgba(var(--error-rgb), .25);
  color: var(--error);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.detail-layout-screen-body {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.detail-layout-screen-title {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-deep);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  display: flex;
}

.detail-layout-screen-match {
  background: rgba(var(--indigo-rgb), .14);
  box-shadow: inset 0 0 0 1px rgba(var(--indigo-rgb), .25);
  color: var(--indigo);
  white-space: nowrap;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
}

.detail-layout-screen-custom {
  background: rgba(var(--warning-rgb), .14);
  box-shadow: inset 0 0 0 1px rgba(var(--warning-rgb), .25);
  color: var(--warning);
}

.detail-layout-screen-row {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  gap: 8px;
  line-height: 1.5;
  display: flex;
}

.detail-layout-screen-row span {
  color: var(--ocean-mid);
  flex-shrink: 0;
  font-weight: 600;
}

.detail-layout-actions {
  align-items: center;
  gap: var(--fluid-gap);
  margin-top: 12px;
  display: flex;
}

.detail-layout-actions .detail-ai-btn {
  margin-top: 0;
}

.detail-layout-actions .cutout-action-btn {
  flex-shrink: 0;
}

.detail-layout-style-preview {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .14);
  border-radius: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  line-height: 1.5;
}

.detail-layout-style-preview span {
  color: var(--ocean-mid);
  font-weight: 600;
}

.detail-queue-header-actions {
  align-items: center;
  gap: var(--fluid-gap-sm);
  display: flex;
}

.detail-queue-header-actions .cutout-action-btn {
  padding: 5px 12px;
}

.detail-queue-voice {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  max-width: 108px;
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .16);
  color: var(--ocean-mid);
  cursor: pointer;
  border: none;
  border-radius: 8px;
  outline: none;
  flex-shrink: 0;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 600;
}

.detail-queue-voice-active {
  background: linear-gradient(135deg, rgba(var(--warning-rgb), .15), rgba(var(--golden-rgb), .12));
  box-shadow: inset 0 0 0 1px rgba(var(--warning-rgb), .3);
  color: var(--warning);
}

.detail-queue-item-custom .detail-queue-name {
  color: var(--warning);
}

.detail-queue-custom-badge {
  background: rgba(var(--warning-rgb), .14);
  box-shadow: inset 0 0 0 1px rgba(var(--warning-rgb), .25);
  color: var(--warning);
  white-space: nowrap;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
}

.detail-params-grid {
  gap: var(--fluid-gap);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.detail-count-buttons {
  gap: var(--fluid-gap-sm);
  display: flex;
}

.detail-count-btn {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18);
  color: var(--ocean-foam);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  border: none;
  border-radius: 10px;
  flex: 1;
  padding: 7px 0;
  font-weight: 600;
}

.detail-count-btn:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-mid);
}

.detail-count-btn-active {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .15), rgba(var(--neon-glow-rgb), .1));
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .3), inset 0 0 8px rgba(var(--neon-glow-rgb), .04);
  color: var(--neon-glow);
}

@media (max-width: 640px) {
  .detail-mode-switcher {
    flex-direction: column;
  }

  .detail-upload-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .detail-params-grid {
    grid-template-columns: 1fr;
  }

  .detail-style-mode-switcher {
    flex-direction: column;
  }

  .detail-recommend-grid, .detail-emotion-grid {
    grid-template-columns: 1fr;
  }

  .detail-layout-result-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .detail-layout-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.infringement-panel {
  max-height: 100%;
  overflow: hidden auto;
}

.infringement-dimensions {
  gap: var(--fluid-gap);
  flex-wrap: wrap;
  display: flex;
}

.dimension-chip {
  align-items: center;
  gap: var(--fluid-gap-sm);
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .06);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-3) var(--ease-out-expo);
  border-radius: 20px;
  padding: 8px 14px;
  font-weight: 500;
  display: inline-flex;
}

.dimension-chip:hover {
  background: rgba(var(--neon-glow-rgb), .1);
  border-color: rgba(var(--neon-glow-rgb), .3);
}

.dimension-chip.active {
  background: rgba(var(--neon-glow-rgb), .18);
  border-color: rgba(var(--neon-glow-rgb), .5);
  box-shadow: inset 0 0 12px rgba(var(--neon-glow-rgb), .12), 0 2px 8px rgba(var(--neon-glow-rgb), .08);
  color: var(--neon-glow);
  font-weight: 600;
}

.dimension-icon {
  font-size: var(--fluid-font-base);
}

.infringement-strictness {
  align-items: center;
  gap: var(--fluid-gap);
  display: flex;
}

.strictness-slider {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  appearance: none;
  border-radius: 3px;
  outline: none;
  flex: 1;
  height: 6px;
}

.strictness-slider::-webkit-slider-thumb {
  appearance: none;
  background: var(--neon-glow);
  width: 18px;
  height: 18px;
  box-shadow: 0 2px 8px rgba(var(--neon-glow-rgb), .3);
  cursor: pointer;
  transition: transform var(--dur-2) ease;
  border-radius: 50%;
}

.strictness-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.strictness-labels {
  gap: var(--fluid-gap);
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  display: flex;
}

.strictness-labels span {
  opacity: .5;
  transition: opacity var(--dur-3) ease;
}

.strictness-labels span.active {
  opacity: 1;
  color: var(--neon-glow);
  font-weight: 600;
}

.strictness-value {
  font-size: var(--fluid-font-base);
  color: var(--neon-glow);
  text-align: right;
  min-width: 36px;
  font-weight: 600;
}

.infringement-drop-zone {
  border: 2px dashed rgba(var(--neon-glow-rgb), .3);
  border-radius: var(--fluid-radius);
  text-align: center;
  transition: all var(--dur-3) var(--ease-out-expo);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  cursor: default;
  padding: 28px 20px;
  position: relative;
}

.infringement-drop-zone.drag-over {
  background: rgba(var(--neon-glow-rgb), .06);
}

.drop-zone-empty, .drop-zone-loaded {
  align-items: center;
  gap: var(--fluid-gap-sm);
  flex-direction: column;
  display: flex;
}

.drop-zone-empty i, .drop-zone-loaded i {
  color: var(--ocean-foam);
  margin-bottom: 4px;
  font-size: 1.8rem;
}

.drop-zone-empty span, .drop-zone-loaded span {
  font-size: var(--fluid-font-base);
  color: var(--ocean-mid);
}

.drop-zone-hint {
  opacity: .7;
  color: var(--ocean-foam) !important;
  font-size: .72rem !important;
}

.drop-zone-count {
  font-weight: 600;
  color: var(--neon-glow) !important;
  font-size: .75rem !important;
}

.infringement-actions {
  gap: var(--fluid-gap);
  flex-wrap: wrap;
  margin-top: 12px;
  display: flex;
}

.infringement-btn {
  align-items: center;
  gap: var(--fluid-gap-sm);
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-3) var(--ease-out-expo);
  border-radius: 12px;
  padding: 8px 16px;
  font-weight: 600;
  display: inline-flex;
}

.infringement-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.infringement-btn.primary {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .2), rgba(var(--neon-glow-rgb), .1));
  border-color: rgba(var(--neon-glow-rgb), .4);
  color: var(--neon-glow);
}

.infringement-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .3), rgba(var(--neon-glow-rgb), .15));
  box-shadow: 0 4px 12px rgba(var(--neon-glow-rgb), .15);
}

.infringement-btn.danger {
  background: rgba(var(--error-rgb), .12);
  border-color: rgba(var(--error-rgb), .3);
  color: var(--error);
}

.infringement-btn.danger:hover:not(:disabled) {
  background: rgba(var(--error-rgb), .2);
  box-shadow: 0 4px 12px rgba(var(--error-rgb), .12);
}

.infringement-btn.warning {
  background: rgba(var(--warning-rgb), .12);
  border-color: rgba(var(--warning-rgb), .3);
  color: var(--warning);
}

.infringement-btn.warning:hover:not(:disabled) {
  background: rgba(var(--warning-rgb), .2);
  box-shadow: 0 4px 12px rgba(var(--warning-rgb), .12);
}

.infringement-btn.ghost {
  border-color: rgba(var(--glass-tint-rgb), .15);
  color: var(--ocean-foam);
  background: none;
}

.infringement-btn.ghost:hover:not(:disabled) {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
}

.infringement-progress {
  align-items: center;
  gap: var(--fluid-gap);
  margin-top: 12px;
  display: flex;
}

.progress-bar {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  border-radius: 3px;
  flex: 1;
  height: 6px;
  overflow: hidden;
}

.progress-fill {
  background: linear-gradient(90deg, var(--neon-glow), var(--ocean-cyan));
  height: 100%;
  transition: width var(--dur-3) var(--ease-out-expo);
  border-radius: 3px;
}

.progress-text {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-foam);
  white-space: nowrap;
}

.infringement-batch-actions {
  gap: var(--fluid-gap);
  flex-direction: column;
  display: flex;
}

.batch-stats {
  gap: 16px;
  display: flex;
}

.batch-stat {
  align-items: center;
  gap: var(--fluid-gap-sm);
  font-size: var(--fluid-font-sm);
  font-weight: 600;
  display: inline-flex;
}

.batch-stat.passed {
  color: var(--success);
}

.batch-stat.flagged {
  color: var(--error);
}

.batch-buttons {
  gap: var(--fluid-gap);
  flex-wrap: wrap;
  display: flex;
}

.infringement-table-container {
  border: 1px solid rgba(var(--glass-tint-rgb), .15);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-radius: 12px;
  max-height: 500px;
  overflow-y: auto;
}

.infringement-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fluid-font-sm);
}

.infringement-table thead {
  z-index: 1;
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  position: sticky;
  top: 0;
}

.infringement-table th {
  padding: var(--fluid-pad) var(--fluid-pad);
  text-align: left;
  font-weight: 600;
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(var(--glass-tint-rgb), .1);
}

.infringement-row {
  border-bottom: 1px solid rgba(var(--glass-tint-rgb), .06);
  transition: background var(--dur-2) ease;
}

.infringement-row:hover {
  background: rgba(var(--neon-glow-rgb), .04);
}

.infringement-row.flagged {
  background: rgba(var(--error-rgb), .04);
}

.infringement-row.flagged:hover {
  background: rgba(var(--error-rgb), .08);
}

.infringement-row td {
  vertical-align: middle;
  padding: 8px 12px;
}

.col-preview {
  width: 50px;
}

.col-name {
  max-width: 180px;
}

.col-status {
  width: 90px;
}

.col-analysis {
  min-width: 200px;
}

.infringement-thumb {
  object-fit: cover;
  border: 1px solid rgba(var(--glass-tint-rgb), .1);
  border-radius: 6px;
  width: 40px;
  height: 40px;
}

.infringement-table .col-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  overflow: hidden;
}

.status-badge {
  font-size: var(--fluid-font-xs);
  white-space: nowrap;
  border-radius: 12px;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-weight: 600;
  display: inline-flex;
}

.status-badge.pending {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  color: var(--ocean-foam);
}

.status-badge.running {
  background: rgba(var(--neon-glow-rgb), .15);
  color: var(--neon-glow);
  animation: 1.5s ease-in-out infinite pulse-badge;
}

.status-badge.failed {
  background: rgba(var(--error-rgb), .12);
  color: var(--error);
}

.status-badge.passed {
  background: rgba(var(--success-rgb), .12);
  color: var(--success);
}

.status-badge.flagged {
  background: rgba(var(--error-rgb), .12);
  color: var(--error);
}

@keyframes pulse-badge {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .6;
  }
}

.analysis-content {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.analysis-summary {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-deep);
  margin: 0;
}

.analysis-violations {
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.violation {
  align-items: flex-start;
  gap: var(--fluid-gap-sm);
  font-size: var(--fluid-font-xs);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-radius: 6px;
  padding: 3px 6px;
  display: flex;
}

.violation.severity-high {
  background: rgba(var(--error-rgb), .06);
}

.violation.severity-medium {
  background: rgba(var(--warning-rgb), .06);
}

.violation.severity-low {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
}

.violation-type {
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 600;
}

.violation-severity {
  font-size: var(--fluid-font-xs);
  text-transform: uppercase;
  border-radius: 8px;
  flex-shrink: 0;
  padding: 1px 6px;
}

.violation.severity-high .violation-severity {
  background: rgba(var(--error-rgb), .15);
  color: var(--error);
}

.violation.severity-medium .violation-severity {
  background: rgba(var(--warning-rgb), .15);
  color: var(--warning);
}

.violation.severity-low .violation-severity {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  color: var(--ocean-foam);
}

.violation-desc {
  color: var(--ocean-mid);
  flex: 1;
}

.analysis-error {
  font-size: var(--fluid-font-xs);
  color: var(--error);
}

.dedup-panel {
  max-height: 100%;
  overflow: hidden auto;
}

.gp-func-badge {
  font-size: var(--fluid-font-xs);
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .18), rgba(var(--neon-glow-rgb), .08));
  border: 1px solid rgba(var(--neon-glow-rgb), .25);
  color: var(--neon-glow);
  letter-spacing: .02em;
  border-radius: 10px;
  align-items: center;
  margin-left: 8px;
  padding: 2px 10px;
  font-weight: 600;
  display: inline-flex;
}

.dedup-drop-zone {
  border: 2px dashed rgba(var(--neon-glow-rgb), .3);
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  transition: all var(--dur-3) var(--ease-out-expo);
  align-items: center;
  gap: 16px;
  padding: 24px 20px;
  display: flex;
  position: relative;
}

.dedup-drop-zone.drag-over {
  background: rgba(var(--neon-glow-rgb), .06);
}

.dedup-drop-icon {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .15), rgba(var(--neon-glow-rgb), .05));
  border: 1px solid rgba(var(--neon-glow-rgb), .2);
  width: 48px;
  height: 48px;
  color: var(--neon-glow);
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  display: flex;
}

.dedup-drop-text {
  flex: 1;
}

.dedup-drop-title {
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  font-weight: 600;
}

.dedup-drop-sub {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-foam);
  margin-top: 3px;
}

.dedup-clear-btn {
  border: 1px solid rgba(var(--error-rgb), .25);
  background: rgba(var(--error-rgb), .08);
  color: var(--error);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-3) var(--ease-out-expo);
  border-radius: 8px;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-weight: 600;
  display: inline-flex;
}

.dedup-clear-btn:hover {
  background: rgba(var(--error-rgb), .15);
}

.dedup-controls {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.dedup-threshold {
  flex: 1;
  min-width: 240px;
}

.dedup-threshold-label {
  align-items: center;
  gap: var(--fluid-gap-sm);
  font-size: var(--fluid-font-sm);
  color: var(--ocean-deep);
  margin-bottom: 8px;
  font-weight: 600;
  display: flex;
}

.dedup-threshold-slider {
  align-items: center;
  gap: var(--fluid-gap);
  display: flex;
}

.dedup-threshold-slider input[type="range"] {
  appearance: none;
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  border-radius: 3px;
  outline: none;
  flex: 1;
  height: 6px;
}

.dedup-threshold-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: linear-gradient(135deg, var(--neon-glow), var(--ocean-cyan));
  cursor: pointer;
  border: 2px solid rgba(var(--glass-tint-rgb), .6);
  width: 18px;
  height: 18px;
  box-shadow: 0 2px 8px rgba(var(--neon-glow-rgb), .3);
  border-radius: 50%;
}

.dedup-threshold-value {
  font-size: var(--fluid-font-base);
  color: var(--neon-glow);
  white-space: nowrap;
  text-align: right;
  min-width: 48px;
  font-weight: 600;
}

.dedup-threshold-hint {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  margin-top: 6px;
}

.dedup-rule-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 260px;
  display: flex;
}

.dedup-rule-label {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  font-weight: 600;
}

.dedup-rule-select {
  border: 1px solid rgba(var(--glass-tint-rgb), .22);
  background: rgba(var(--glass-bg-rgb), .72);
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out-expo);
  border-radius: 8px;
  outline: none;
  padding: 6px 10px;
  font-weight: 600;
}

.dedup-rule-select:focus {
  border-color: var(--neon-glow);
}

.dedup-scan-buttons {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.dedup-btn {
  align-items: center;
  gap: var(--fluid-gap-sm);
  border: 1px solid rgba(var(--glass-tint-rgb), .18);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-3) var(--ease-out-expo);
  white-space: nowrap;
  border-radius: 10px;
  padding: 7px 14px;
  font-weight: 600;
  display: inline-flex;
}

.dedup-btn:disabled, .dedup-btn.disabled {
  opacity: .4;
  cursor: not-allowed;
}

.dedup-btn.primary {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .22), rgba(var(--neon-glow-rgb), .1));
  border-color: rgba(var(--neon-glow-rgb), .4);
  color: var(--neon-glow);
}

.dedup-btn.primary:hover:not(:disabled):not(.disabled) {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .32), rgba(var(--neon-glow-rgb), .16));
  box-shadow: 0 4px 12px rgba(var(--neon-glow-rgb), .15);
}

.dedup-btn.danger {
  background: rgba(var(--error-rgb), .12);
  border-color: rgba(var(--error-rgb), .3);
  color: var(--error);
}

.dedup-btn.danger:hover:not(:disabled) {
  background: rgba(var(--error-rgb), .2);
  box-shadow: 0 4px 12px rgba(var(--error-rgb), .12);
}

.dedup-btn.warning {
  background: rgba(var(--warning-rgb), .12);
  border-color: rgba(var(--warning-rgb), .3);
  color: var(--warning);
}

.dedup-btn.warning:hover:not(:disabled) {
  background: rgba(var(--warning-rgb), .2);
  box-shadow: 0 4px 12px rgba(var(--warning-rgb), .12);
}

.dedup-btn.ghost {
  border-color: rgba(var(--glass-tint-rgb), .15);
  color: var(--ocean-foam);
  background: none;
}

.dedup-btn.ghost:hover:not(:disabled) {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
}

.dedup-progress {
  align-items: center;
  gap: var(--fluid-gap);
  margin-top: 12px;
  display: flex;
}

.dedup-stats-bar {
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 12px;
  display: flex;
}

.dedup-stat {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .12);
  border-radius: 10px;
  flex-direction: column;
  gap: 2px;
  padding: 8px 16px;
  display: flex;
}

.dedup-stat.highlight {
  background: rgba(var(--neon-glow-rgb), .08);
  border-color: rgba(var(--neon-glow-rgb), .2);
}

.dedup-stat.danger {
  background: rgba(var(--error-rgb), .06);
  border-color: rgba(var(--error-rgb), .15);
}

.dedup-stat-num {
  font-size: var(--fluid-font-lg);
  color: var(--ocean-deep);
  font-weight: 600;
}

.dedup-stat.highlight .dedup-stat-num {
  color: var(--neon-glow);
}

.dedup-stat.danger .dedup-stat-num {
  color: var(--error);
}

.dedup-stat-label {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.dedup-batch-actions {
  margin-top: 4px;
}

.dedup-batch-buttons {
  gap: var(--fluid-gap);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.dedup-selected-count {
  font-size: var(--fluid-font-sm);
  color: var(--error);
  background: rgba(var(--error-rgb), .08);
  border-radius: 8px;
  padding: 4px 10px;
  font-weight: 600;
}

.dedup-groups-header {
  align-items: center;
  gap: var(--fluid-gap);
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  margin-bottom: 14px;
  font-weight: 600;
  display: flex;
}

.dedup-groups-header i {
  color: var(--neon-glow);
}

.dedup-groups-list {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.dedup-group {
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .12);
  transition: border-color var(--dur-3) var(--ease-out-expo);
  padding: 14px;
}

.dedup-group:hover {
  border-color: rgba(var(--neon-glow-rgb), .2);
}

.dedup-group-header {
  align-items: center;
  gap: var(--fluid-gap);
  margin-bottom: 12px;
  display: flex;
}

.dedup-group-index {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-deep);
  font-weight: 600;
}

.dedup-group-count {
  font-size: var(--fluid-font-xs);
  background: rgba(var(--neon-glow-rgb), .12);
  color: var(--neon-glow);
  border-radius: 10px;
  padding: 2px 10px;
  font-weight: 600;
}

.dedup-group-sim {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  align-items: center;
  gap: 4px;
  display: flex;
}

.dedup-group-sim i {
  font-size: var(--fluid-font-xs);
}

.dedup-compare-btn {
  margin-left: auto;
}

.dedup-compare-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 4px 2px 8px;
  display: grid;
}

.dedup-compare-card {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .14);
  border-radius: 12px;
  overflow: hidden;
}

.dedup-compare-card img {
  aspect-ratio: 1;
  object-fit: contain;
  background: rgba(var(--yue-ui-black-rgb), .04);
  width: 100%;
  display: block;
}

.dedup-compare-name {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-deep);
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 10px 2px;
  font-weight: 600;
  overflow: hidden;
}

.dedup-compare-meta {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  padding: 0 10px 10px;
}

.dedup-group-grid {
  gap: var(--fluid-gap);
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  display: grid;
}

.dedup-thumb {
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 2px solid #0000;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.dedup-thumb img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  display: block;
}

.dedup-thumb:hover {
  border-color: rgba(var(--neon-glow-rgb), .4);
  box-shadow: 0 4px 16px rgba(var(--neon-glow-rgb), .12);
}

.dedup-thumb.selected {
  border-color: rgba(var(--error-rgb), .6);
  box-shadow: 0 4px 16px rgba(var(--error-rgb), .15);
}

.dedup-thumb.keep {
  border-color: rgba(var(--success-rgb), .4);
}

.dedup-thumb-overlay {
  background: rgba(var(--shadow-rgb), .35);
  opacity: 0;
  transition: opacity var(--dur-2) ease;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.dedup-thumb:hover .dedup-thumb-overlay, .dedup-thumb.selected .dedup-thumb-overlay, .dedup-thumb.keep .dedup-thumb-overlay {
  opacity: 1;
}

.dedup-thumb-badge {
  font-size: var(--fluid-font-xs);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border-radius: 8px;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-weight: 600;
  display: inline-flex;
}

.dedup-thumb-badge.keep-badge {
  background: rgba(var(--success-rgb), .2);
  border: 1px solid rgba(var(--success-rgb), .4);
  color: var(--success);
}

.dedup-thumb-badge.delete-badge {
  background: rgba(var(--error-rgb), .2);
  border: 1px solid rgba(var(--error-rgb), .4);
  color: var(--error);
}

.dedup-thumb-badge.idle-badge {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  color: rgba(var(--glass-tint-rgb), .8);
}

.dedup-thumb-info {
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  display: flex;
}

.dedup-thumb-name {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-deep);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.dedup-thumb-size {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  white-space: nowrap;
}

.dedup-empty {
  text-align: center;
  padding: 28px 20px;
}

.dedup-empty i {
  color: var(--success);
  margin-bottom: 12px;
  font-size: 2.4rem;
}

.dedup-empty-title {
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  margin-bottom: 6px;
  font-weight: 600;
}

.dedup-empty-sub {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-foam);
  line-height: 1.6;
}

.dedup-failed-list {
  gap: var(--fluid-gap);
  flex-direction: column;
  display: flex;
}

.dedup-failed-header {
  align-items: center;
  gap: var(--fluid-gap-sm);
  font-size: var(--fluid-font-sm);
  color: var(--warning);
  font-weight: 600;
  display: flex;
}

.dedup-failed-item {
  background: rgba(var(--error-rgb), .04);
  border: 1px solid rgba(var(--error-rgb), .1);
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  display: flex;
}

.dedup-failed-name {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-deep);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  overflow: hidden;
}

.dedup-failed-error {
  font-size: var(--fluid-font-xs);
  color: var(--error);
  white-space: nowrap;
}

.sku-mode-toggle {
  gap: var(--fluid-gap);
  margin: 10px 0 12px;
  display: flex;
}

.sku-mode-btn {
  border-radius: var(--radius-sm, 12px);
  border: 1px solid rgba(var(--glass-tint-rgb), .08);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-foam);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  transition: all var(--dur-3) var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1));
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .06);
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  font-weight: 600;
  display: flex;
}

.sku-mode-btn i {
  font-size: var(--fluid-font-lg);
  margin-bottom: 2px;
}

.sku-mode-btn:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-color: rgba(var(--neon-glow-rgb), .2);
  transform: translateY(-1px);
}

.sku-mode-btn-active {
  background: rgba(var(--neon-glow-rgb), .12);
  border-color: rgba(var(--neon-glow-rgb), .35);
  color: var(--neon-glow);
  box-shadow: inset 0 0 12px rgba(var(--neon-glow-rgb), .08), 0 2px 12px rgba(var(--neon-glow-rgb), .06);
}

.sku-mode-btn-active:hover {
  background: rgba(var(--neon-glow-rgb), .16);
}

.sku-mode-btn-sub {
  font-size: var(--fluid-font-xs);
  opacity: .7;
  font-weight: 400;
}

.sku-color-swatch-grid {
  gap: var(--fluid-gap-sm);
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  margin: 8px 0;
  display: grid;
}

.sku-color-swatch {
  border: 2px solid rgba(var(--glass-tint-rgb), .08);
  cursor: pointer;
  width: 34px;
  height: 34px;
  transition: all var(--dur-2) var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1));
  box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb), .15);
  border-radius: 10px;
}

.sku-color-swatch:hover {
  border-color: rgba(var(--glass-tint-rgb), .25);
  box-shadow: 0 4px 12px rgba(var(--shadow-rgb), .2);
  transform: scale(1.12);
}

.sku-color-swatch-active {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 2px rgba(var(--neon-glow-rgb), .3), inset 0 1px 2px rgba(var(--shadow-rgb), .15);
  transform: scale(1.08);
}

.sku-color-picker-wrap {
  align-items: center;
  gap: var(--fluid-gap);
  margin: 8px 0;
  display: flex;
}

.sku-color-picker {
  border: 2px solid rgba(var(--glass-tint-rgb), .08);
  cursor: pointer;
  width: 36px;
  height: 36px;
  box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb), .15);
  background: none;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}

.sku-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.sku-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
}

.sku-color-picker::-moz-color-swatch {
  border: none;
  border-radius: 8px;
}

.sku-color-selected {
  gap: var(--fluid-gap-sm);
  flex-wrap: wrap;
  margin: 8px 0;
  display: flex;
}

.sku-color-chip {
  align-items: center;
  gap: var(--fluid-gap-sm);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .06);
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .06);
  border-radius: 999px;
  padding: 4px 10px 4px 6px;
  display: inline-flex;
}

.sku-color-chip-dot {
  border: 1px solid rgba(var(--glass-tint-rgb), .15);
  width: 14px;
  height: 14px;
  box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb), .1);
  border-radius: 50%;
  flex-shrink: 0;
}

.sku-color-chip-remove {
  cursor: pointer;
  width: 16px;
  height: 16px;
  color: var(--ocean-foam);
  font-size: var(--fluid-font-xs);
  transition: all var(--dur-2) ease;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  margin-left: 2px;
  display: inline-flex;
}

.sku-color-chip-remove:hover {
  background: rgba(var(--error-rgb), .15);
  color: var(--error);
}

.sku-intensity-slider {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  appearance: none;
  cursor: pointer;
  border-radius: 999px;
  outline: none;
  width: 100%;
  height: 6px;
  margin: 6px 0;
}

.sku-intensity-slider::-webkit-slider-thumb {
  appearance: none;
  background: var(--neon-glow);
  border: 2px solid rgba(var(--glass-tint-rgb), .3);
  cursor: pointer;
  width: 18px;
  height: 18px;
  box-shadow: 0 2px 8px rgba(var(--neon-glow-rgb), .3);
  transition: transform var(--dur-2) ease;
  border-radius: 50%;
}

.sku-intensity-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.sku-intensity-slider::-moz-range-thumb {
  background: var(--neon-glow);
  border: 2px solid rgba(var(--glass-tint-rgb), .3);
  cursor: pointer;
  width: 18px;
  height: 18px;
  box-shadow: 0 2px 8px rgba(var(--neon-glow-rgb), .3);
  border-radius: 50%;
}

.sku-generate-mask-btn {
  border: 1px solid rgba(var(--indigo-rgb), .25);
  background: rgba(var(--indigo-rgb), .1);
  color: var(--card-accent-video);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  transition: all var(--dur-2) var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1));
  align-items: center;
  gap: var(--fluid-gap-sm);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .06);
  border-radius: 999px;
  padding: 8px 20px;
  font-weight: 600;
  display: inline-flex;
}

.sku-generate-mask-btn:hover:not(:disabled) {
  background: rgba(var(--indigo-rgb), .18);
  border-color: rgba(var(--indigo-rgb), .4);
  transform: translateY(-1px);
}

.sku-generate-mask-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.sku-mask-preview {
  border-radius: var(--radius-sm, 12px);
  border: 1px solid rgba(var(--glass-tint-rgb), .06);
  max-width: 100%;
  max-height: 200px;
  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), .15);
}

.sku-generate-btn {
  border-radius: var(--radius-sm, 12px);
  border: 1px solid rgba(var(--neon-glow-rgb), .3);
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .15), rgba(var(--neon-glow-rgb), .1));
  width: 100%;
  color: var(--neon-glow);
  font-size: var(--fluid-font-base);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  transition: all var(--dur-3) var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1));
  justify-content: center;
  align-items: center;
  gap: var(--fluid-gap);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .08), 0 4px 20px rgba(var(--neon-glow-rgb), .08);
  padding: 12px 20px;
  font-weight: 600;
  display: flex;
}

.sku-generate-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .22), rgba(var(--neon-glow-rgb), .15));
  border-color: rgba(var(--neon-glow-rgb), .45);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .1), 0 6px 24px rgba(var(--neon-glow-rgb), .12);
  transform: translateY(-1px);
}

.sku-generate-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.sku-variant-card {
  position: relative;
}

.sku-variant-label {
  align-items: center;
  gap: var(--fluid-gap-sm);
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  padding: 4px 8px;
  font-weight: 600;
  display: flex;
}

.sku-variant-actions {
  gap: 4px;
  padding: 0 6px 6px;
  display: flex;
}

.sku-variant-actions .cutout-download-btn {
  font-size: var(--fluid-font-xs);
  padding: 3px 8px;
  position: static;
}

.sku-enhance-btn {
  border: 1px solid rgba(var(--indigo-rgb), .3);
  background: rgba(var(--indigo-rgb), .12);
  color: var(--card-accent-video);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  transition: all var(--dur-2) ease;
  border-radius: 999px;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  font-weight: 600;
  display: inline-flex;
}

.sku-enhance-btn:hover:not(:disabled) {
  background: rgba(var(--indigo-rgb), .2);
  border-color: rgba(var(--indigo-rgb), .45);
  transform: scale(1.03);
}

.sku-enhance-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.sku-eyedropper-overlay {
  transition: all var(--dur-2) ease;
  border-radius: 8px;
  overflow: hidden;
}

.sku-eyedropper-active {
  box-shadow: 0 0 0 2px rgba(var(--neon-glow-rgb), .5), 0 0 16px rgba(var(--neon-glow-rgb), .2);
  filter: drop-shadow(0 0 0px rgba(var(--neon-glow-rgb), 0));
  animation: 1.5s ease-in-out infinite sku-eyedropper-pulse;
}

@keyframes sku-eyedropper-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 0px rgba(var(--neon-glow-rgb), 0));
  }

  50% {
    filter: drop-shadow(0 0 8px rgba(var(--neon-glow-rgb), .3));
  }
}

.sku-eyedropper-btn {
  border: 1px solid rgba(var(--glass-tint-rgb), .08);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-mid);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  transition: all var(--dur-2) ease;
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .06);
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-weight: 600;
  display: inline-flex;
}

.sku-eyedropper-btn:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-color: rgba(var(--glass-tint-rgb), .15);
}

.sku-eyedropper-btn-active {
  background: rgba(var(--neon-glow-rgb), .15);
  border-color: rgba(var(--neon-glow-rgb), .35);
  color: var(--neon-glow);
  box-shadow: inset 0 0 8px rgba(var(--neon-glow-rgb), .06);
}

.dim-upload-area {
  align-items: center;
  gap: var(--fluid-gap);
  flex-wrap: wrap;
  display: flex;
  position: relative;
}

.dim-upload-btn {
  align-items: center;
  gap: var(--fluid-gap);
  border: 1px solid rgba(var(--neon-glow-rgb), .25);
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .12), rgba(var(--ocean-light-rgb), .08));
  color: var(--ocean-light);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  transition: all var(--dur-3) var(--ease-out-expo, ease);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .15), 0 2px 12px rgba(var(--neon-glow-rgb), .06);
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 600;
  display: inline-flex;
}

.dim-upload-btn:hover {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .2), rgba(var(--ocean-light-rgb), .12));
  border-color: rgba(var(--neon-glow-rgb), .4);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .2), 0 4px 16px rgba(var(--neon-glow-rgb), .1);
  transform: translateY(-1px);
}

.dim-upload-btn i {
  font-size: var(--fluid-font-base);
}

.dim-upload-hint {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-foam);
  font-weight: 400;
}

.dim-canvas-empty {
  border: 1.5px dashed rgba(var(--neon-glow-rgb), .4);
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  min-height: 260px;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-3) var(--ease-out-expo), box-shadow var(--dur-3) var(--ease-out-expo), transform var(--dur-3) var(--ease-out-expo), background var(--dur-3) var(--ease-out-expo);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 28px 20px;
  display: flex;
  position: relative;
  overflow: clip;
}

.dim-canvas-empty:hover {
  border-color: var(--neon-glow);
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2), 0 6px 24px rgba(var(--neon-glow-rgb), .08);
  transform: translateY(-2px);
}

.dim-canvas-empty.drag-over {
  border-color: var(--neon-glow);
  background: rgba(var(--neon-glow-rgb), .08);
}

.dim-canvas-empty-icon {
  width: 52px;
  height: 52px;
  color: var(--ocean-light);
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .14), rgba(var(--ocean-light-rgb), .08));
  border: 1px solid rgba(var(--neon-glow-rgb), .25);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  display: flex;
}

.dim-canvas-empty-title {
  font-size: var(--fluid-font-base);
  color: var(--ocean-mid);
  font-weight: 600;
}

.dim-canvas-empty-steps {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  display: flex;
}

.dim-canvas-empty-hint {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  opacity: .8;
}

.dim-thumbs {
  gap: var(--fluid-gap);
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  margin-top: 12px;
  display: grid;
}

.dim-thumb {
  aspect-ratio: 1;
  border-radius: var(--radius-sm, 10px);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  border: 2px solid #0000;
  position: relative;
  overflow: hidden;
}

.dim-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.dim-thumb:hover {
  border-color: rgba(var(--neon-glow-rgb), .3);
  transform: translateY(-1px);
}

.dim-thumb.active {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 1px rgba(var(--neon-glow-rgb), .2), 0 0 12px rgba(var(--neon-glow-rgb), .15);
}

.dim-thumb-name {
  color: var(--text-inverse);
  background: linear-gradient(transparent, rgba(var(--shadow-rgb), .6));
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  padding: 2px 4px;
  font-size: .6rem;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.dim-thumb-del {
  background: rgba(var(--error-rgb), .85);
  width: 20px;
  height: 20px;
  color: var(--text-inverse);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  opacity: 0;
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(var(--error-rgb), .3);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 4px;
  right: 4px;
  transform: scale(.6);
}

.dim-thumb:hover .dim-thumb-del {
  opacity: 1;
  transform: scale(1);
}

.dim-thumb-del:hover {
  background: rgba(var(--error-rgb), 1);
  box-shadow: 0 2px 12px rgba(var(--error-rgb), .5);
  transform: scale(1.12);
}

.dim-clear-images-btn {
  align-items: center;
  gap: var(--fluid-gap-sm);
  border: 1px solid rgba(var(--error-rgb), .25);
  background: rgba(var(--error-rgb), .08);
  color: var(--error);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  display: inline-flex;
}

.dim-clear-images-btn:hover {
  background: rgba(var(--error-rgb), .15);
  border-color: rgba(var(--error-rgb), .4);
  color: var(--error);
  box-shadow: 0 4px 12px rgba(var(--error-rgb), .1);
  transform: translateY(-1px);
}

.dim-clear-images-btn i {
  font-size: var(--fluid-font-sm);
}

.dim-toolbar {
  align-items: center;
  gap: var(--fluid-gap);
  flex-wrap: wrap;
  margin-bottom: 10px;
  display: flex;
}

.dim-icon-btn {
  align-items: center;
  gap: var(--fluid-gap-sm);
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .1);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 600;
  display: inline-flex;
}

.dim-icon-btn:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-color: rgba(var(--neon-glow-rgb), .25);
}

.dim-icon-btn.active {
  background: rgba(var(--neon-glow-rgb), .15);
  border-color: rgba(var(--neon-glow-rgb), .4);
  color: var(--ocean-light);
  box-shadow: inset 0 0 8px rgba(var(--neon-glow-rgb), .08);
}

.dim-icon-btn i {
  font-size: var(--fluid-font-sm);
}

.dim-unit-group {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .15);
  border-radius: 999px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.dim-unit-chip {
  color: var(--ocean-foam);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 600;
}

.dim-unit-chip:hover {
  color: var(--ocean-mid);
}

.dim-unit-chip.active {
  background: rgba(var(--neon-glow-rgb), .18);
  color: var(--ocean-light);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .15);
}

.dim-zoom-label {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-weight: 600;
}

.dim-canvas-wrap {
  border-radius: var(--radius-md, 14px);
  background: rgba(var(--ocean-white-rgb), .5);
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .08);
  position: relative;
  overflow: hidden;
}

.dim-canvas-scroll {
  -ms-overflow-style: auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 920px;
  padding: 12px;
  display: flex;
  overflow: auto;
}

.dim-canvas-scroll canvas {
  box-shadow: 0 4px 24px rgba(var(--ocean-deep-rgb), .08);
  border-radius: 8px;
}

.dim-draw-hint {
  align-items: center;
  gap: var(--fluid-gap-sm);
  background: rgba(var(--ocean-light-rgb), .85);
  color: var(--text-inverse);
  font-size: var(--fluid-font-xs);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: 0 4px 16px rgba(var(--ocean-light-rgb), .2);
  pointer-events: none;
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 600;
  animation: 2s ease-in-out infinite dim-hint-pulse;
  display: inline-flex;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes dim-hint-pulse {
  0%, 100% {
    opacity: .85;
  }

  50% {
    opacity: 1;
  }
}

.dim-draw-hint i {
  font-size: var(--fluid-font-sm);
}

.dim-value-prompt {
  align-items: center;
  gap: var(--fluid-gap);
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-near, .88));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border: 1px solid rgba(var(--glass-tint-rgb), .4);
  box-shadow: 0 8px 32px rgba(var(--ocean-deep-rgb), .12), inset 0 1px 0 rgba(var(--glass-tint-rgb), .4);
  z-index: 10;
  padding: 16px 20px;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dim-prompt-label {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  white-space: nowrap;
  font-weight: 600;
}

.dim-value-input {
  border-radius: var(--radius-sm, 10px);
  border: 1px solid rgba(var(--glass-tint-rgb), .28);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 80px;
  color: var(--ocean-deep);
  font-size: var(--fluid-font-base);
  text-align: center;
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  outline: none;
  padding: 8px 10px;
  font-weight: 600;
}

.dim-value-input:focus {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 3px rgba(var(--neon-glow-rgb), .1);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
}

.dim-unit-select, .dim-unit-edit {
  border-radius: var(--radius-sm, 10px);
  border: 1px solid rgba(var(--glass-tint-rgb), .28);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  outline: none;
  padding: 7px 8px;
  font-weight: 600;
}

.dim-unit-select:focus, .dim-unit-edit:focus {
  border-color: var(--neon-glow);
}

.dim-confirm-btn {
  border: 1px solid rgba(var(--neon-glow-rgb), .3);
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .2), rgba(var(--ocean-light-rgb), .12));
  color: var(--ocean-light);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .15);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
}

.dim-confirm-btn:hover {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .3), rgba(var(--ocean-light-rgb), .18));
  transform: translateY(-1px);
}

.dim-cancel-btn {
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-foam);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
}

.dim-cancel-btn:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-mid);
}

.dim-line-list {
  gap: var(--fluid-gap-sm);
  flex-direction: column;
  display: flex;
}

.dim-line-item {
  align-items: center;
  gap: var(--fluid-gap);
  border-radius: var(--radius-sm, 10px);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .15);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  padding: 8px 12px;
  display: flex;
}

.dim-line-item:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
}

.dim-line-item.selected {
  background: rgba(var(--neon-glow-rgb), .12);
  border-color: rgba(var(--neon-glow-rgb), .3);
  box-shadow: inset 0 0 8px rgba(var(--neon-glow-rgb), .06);
}

.dim-line-idx {
  background: rgba(var(--neon-glow-rgb), .15);
  width: 24px;
  height: 24px;
  color: var(--ocean-light);
  font-size: var(--fluid-font-xs);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.dim-value-edit {
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(var(--glass-tint-rgb), .28);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 70px;
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  text-align: center;
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  outline: none;
  padding: 5px 8px;
  font-weight: 600;
}

.dim-value-edit:focus {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 2px rgba(var(--neon-glow-rgb), .1);
}

.dim-line-del {
  border: 1px solid rgba(var(--error-rgb), .2);
  background: rgba(var(--error-rgb), .1);
  width: 26px;
  height: 26px;
  color: var(--error);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.dim-line-del:hover {
  background: rgba(var(--error-rgb), .2);
  border-color: rgba(var(--error-rgb), .4);
}

.dim-export-row {
  gap: var(--fluid-gap);
  flex-wrap: wrap;
  display: flex;
}

.dim-export-btn {
  align-items: center;
  gap: var(--fluid-gap-sm);
  border: 1px solid rgba(var(--neon-glow-rgb), .2);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  transition: all var(--dur-3) var(--ease-out-expo, ease);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .12);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
  display: inline-flex;
}

.dim-export-btn:hover {
  background: rgba(var(--neon-glow-rgb), .12);
  border-color: rgba(var(--neon-glow-rgb), .35);
  color: var(--ocean-light);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .15), 0 4px 16px rgba(var(--neon-glow-rgb), .08);
  transform: translateY(-1px);
}

.dim-export-btn i {
  font-size: var(--fluid-font-base);
}

.dim-upload-area.drag-over {
  background: rgba(var(--neon-glow-rgb), .06);
}

.dim-style-section, .dim-color-section {
  align-items: flex-start;
  gap: var(--fluid-gap);
  margin-bottom: 8px;
  display: flex;
}

.dim-color-section {
  margin-bottom: 0;
}

.dim-style-label {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 6px;
  font-weight: 600;
}

.dim-style-grid {
  gap: var(--fluid-gap-sm);
  flex: 1;
  grid-template-columns: repeat(5, 1fr);
  display: grid;
}

.dim-style-thumb {
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  box-shadow: inset 0 1px 0 rgba(var(--glass-tint-rgb), .1);
  justify-content: center;
  align-items: center;
  padding: 4px;
  display: flex;
}

.dim-style-thumb:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-color: rgba(var(--neon-glow-rgb), .25);
  transform: translateY(-1px);
}

.dim-style-thumb.active {
  background: rgba(var(--neon-glow-rgb), .15);
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 1px rgba(var(--neon-glow-rgb), .2), inset 0 0 8px rgba(var(--neon-glow-rgb), .08);
}

.dim-style-thumb svg {
  pointer-events: none;
  display: block;
}

.dim-color-row {
  gap: var(--fluid-gap);
  flex: 1;
  align-items: center;
  display: flex;
}

.dim-color-swatch {
  border: 2px solid rgba(var(--glass-tint-rgb), .3);
  cursor: pointer;
  width: 28px;
  height: 28px;
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  box-shadow: 0 1px 4px rgba(var(--shadow-rgb), .08);
  border-radius: 50%;
}

.dim-color-swatch:hover {
  border-color: rgba(var(--glass-tint-rgb), .5);
  transform: scale(1.1);
}

.dim-color-swatch.active {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 2px rgba(var(--neon-glow-rgb), .3), 0 2px 8px rgba(var(--neon-glow-rgb), .15);
  transform: scale(1.1);
}

.dim-text-input {
  border-radius: var(--radius-sm, 10px);
  border: 1px solid rgba(var(--glass-tint-rgb), .28);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 120px;
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  outline: none;
  padding: 8px 10px;
  font-weight: 500;
}

.dim-text-input:focus {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 3px rgba(var(--neon-glow-rgb), .1);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
}

.dim-text-edit {
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(var(--glass-tint-rgb), .28);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 80px;
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  outline: none;
  padding: 5px 8px;
  font-weight: 500;
}

.dim-text-edit:focus {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 2px rgba(var(--neon-glow-rgb), .1);
}

.dim-style-edit {
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(var(--glass-tint-rgb), .28);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-deep);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  outline: none;
  padding: 5px 6px;
  font-weight: 600;
}

.dim-style-edit:focus {
  border-color: var(--neon-glow);
}

.dim-color-edit-wrap {
  flex-shrink: 0;
  align-items: center;
  gap: 3px;
  display: flex;
}

.dim-color-edit {
  border: 1.5px solid rgba(var(--glass-tint-rgb), .3);
  cursor: pointer;
  width: 18px;
  height: 18px;
  transition: all var(--dur-2) var(--ease-out-expo, ease);
  border-radius: 50%;
  padding: 0;
}

.dim-color-edit:hover {
  transform: scale(1.15);
}

.dim-color-edit.active {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 1.5px rgba(var(--neon-glow-rgb), .4);
  transform: scale(1.15);
}

.dim-line-item {
  flex-wrap: wrap;
}

.dim-save-btn {
  border-color: rgba(var(--success-rgb), .25) !important;
  background: linear-gradient(135deg, rgba(var(--success-rgb), .12), rgba(var(--success-rgb), .08)) !important;
  color: var(--success) !important;
}

.dim-save-btn:hover {
  background: linear-gradient(135deg, rgba(var(--success-rgb), .2), rgba(var(--success-rgb), .14)) !important;
  border-color: rgba(var(--success-rgb), .4) !important;
  color: var(--success) !important;
}

.dim-save-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none !important;
}

.gp-api-prompt {
  min-height: 120px;
  line-height: 1.6;
  font-size: var(--fluid-font-base);
  resize: vertical;
}

.gp-section .gp-field-hint {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-weight: 400;
  display: flex;
}

.gp-section .gp-field-hint i {
  font-size: calc(var(--fluid-font-xs) * 1.1);
  color: var(--ocean-light);
  opacity: .8;
}

.gp-panel.gp-dragover {
  border-radius: var(--fluid-radius);
}

.dim-kind-grid {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}

.dim-kind-chip {
  border-radius: var(--radius-sm, 10px);
  border: 1px solid rgba(var(--glass-tint-rgb), .24);
  background: rgba(var(--glass-tint-rgb), .5);
  min-width: 64px;
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-2) ease;
  flex: auto;
  padding: 8px 12px;
  font-weight: 600;
}

.dim-kind-chip:hover {
  border-color: rgba(var(--accent-rgb, 74, 159, 216), .55);
}

.dim-kind-chip.active {
  background: linear-gradient(135deg, rgba(var(--yue-ui-blue-400-rgb), .22), rgba(var(--yue-ui-indigo-rgb), .18));
  border-color: rgba(var(--yue-ui-blue-400-rgb), .7);
  color: var(--yue-ui-blue-600);
  box-shadow: 0 2px 10px rgba(var(--yue-ui-blue-400-rgb), .16);
}

.dim-toggle-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  display: grid;
}

.dim-toggle-chip {
  border: 1px solid rgba(var(--glass-tint-rgb), .22);
  background: rgba(var(--glass-tint-rgb), .45);
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: all var(--dur-2) ease;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-weight: 600;
  display: inline-flex;
}

.dim-toggle-chip input {
  accent-color: var(--yue-ui-blue-400);
  cursor: pointer;
  width: 15px;
  height: 15px;
  margin: 0;
}

.dim-toggle-chip.on {
  border-color: rgba(var(--yue-ui-blue-400-rgb), .65);
  background: rgba(var(--yue-ui-blue-400-rgb), .12);
}

.dim-settings-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  display: flex;
}

.dim-select, .dim-number-input {
  border: 1px solid rgba(var(--glass-tint-rgb), .24);
  background: rgba(var(--glass-tint-rgb), .6);
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  border-radius: 8px;
  outline: none;
  padding: 6px 10px;
}

.dim-number-input {
  width: 64px;
}

.dim-cal-chip {
  background: rgba(var(--yue-ui-green-moss-rgb), .12);
  border: 1px solid rgba(var(--yue-ui-green-moss-rgb), .4);
  color: var(--yue-ui-green-800);
  font-size: var(--fluid-font-xs);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-weight: 600;
  display: inline-flex;
}

.dim-cal-chip i {
  color: var(--yue-ui-green-moss);
}

.dim-cal-clear {
  color: var(--yue-ui-gray-blue);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
}

.dim-cal-clear:hover {
  color: var(--yue-ui-red-700);
  background: rgba(var(--yue-ui-red-700-rgb), .1);
}

.dim-unit-convert {
  border: 1px dashed rgba(var(--glass-tint-rgb), .35);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 8px;
  padding: 5px 10px;
  font-weight: 600;
}

.dim-unit-convert:hover {
  color: var(--yue-ui-blue-600);
  border-color: rgba(var(--yue-ui-blue-400-rgb), .6);
}

.dim-offset-input {
  border-radius: var(--radius-sm, 10px);
  border: 1px solid rgba(var(--glass-tint-rgb), .28);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 64px;
  color: var(--ocean-deep);
  font-size: var(--fluid-font-base);
  outline: none;
  padding: 8px 10px;
  font-weight: 600;
}

.dim-offset-label {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  white-space: nowrap;
}

.dim-ref-check {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-mid);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  display: inline-flex;
}

.dim-ref-check input {
  accent-color: var(--yue-ui-green-moss);
  cursor: pointer;
  width: 14px;
  height: 14px;
  margin: 0;
}

.dim-kind-badge {
  text-align: center;
  background: rgba(var(--yue-ui-blue-400-rgb), .14);
  min-width: 26px;
  color: var(--yue-ui-blue-600);
  font-size: var(--fluid-font-xs);
  border-radius: 6px;
  flex: none;
  padding: 2px 6px;
  font-weight: 600;
}

.dim-json-area {
  box-sizing: border-box;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid rgba(var(--glass-tint-rgb), .24);
  background: rgba(var(--yue-ui-slate-900-rgb), .94);
  width: 100%;
  color: var(--yue-ui-cyan-200);
  resize: vertical;
  outline: none;
  margin-bottom: 10px;
  padding: 10px 12px;
  font-family: Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
}

.dim-json-area:focus {
  border-color: rgba(var(--yue-ui-blue-400-rgb), .65);
  box-shadow: 0 0 0 3px rgba(var(--yue-ui-blue-400-rgb), .14);
}

.dim-json-row {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.dim-icon-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.dim-toolbar {
  flex-wrap: wrap;
}

.dim-value-prompt {
  flex-wrap: wrap;
  justify-content: center;
  max-width: min(92%, 720px);
}

.wb-angle-assistant {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--neon-glow-rgb), .22);
  border-radius: var(--fluid-radius);
  padding: var(--fluid-pad) calc(var(--fluid-pad)  + 2px);
  -webkit-overflow-clipping: clip;
  position: relative;
  overflow: clip;
}

.wb-angle-assistant:before {
  content: "";
  background: linear-gradient(120deg, rgba(var(--neon-glow-rgb), .05), transparent 45%);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.wb-angle-head {
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  display: flex;
}

.wb-angle-title {
  color: var(--ocean-deep);
  font-weight: 600;
  font-size: var(--fluid-font-base);
  align-items: center;
  gap: 7px;
  display: inline-flex;
}

.wb-angle-title i {
  color: var(--neon-glow);
}

.wb-angle-desc {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-foam);
  line-height: 1.5;
}

.wb-angle-status {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  background: rgba(var(--neon-glow-rgb), .07);
  border: 1px dashed rgba(var(--neon-glow-rgb), .3);
  border-radius: calc(var(--fluid-radius)  - 4px);
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 7px 10px;
  line-height: 1.4;
  display: flex;
}

.wb-angle-status-fail {
  color: var(--error, var(--yue-ui-red-400));
  border-color: rgba(var(--error-rgb, 224, 90, 90), .35);
  background: rgba(var(--error-rgb, 224, 90, 90), .06);
  flex-wrap: wrap;
}

.wb-angle-retry {
  font-size: var(--fluid-font-sm);
  color: var(--yue-ui-white);
  background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-light));
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out-expo), filter var(--dur-2);
  border: none;
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 4px 10px;
  font-weight: 600;
  display: inline-flex;
}

.wb-angle-retry:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.wb-angle-list {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  display: grid;
}

.wb-angle-item {
  background: rgba(var(--glass-tint-rgb), .55);
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  border-radius: calc(var(--fluid-radius)  - 4px);
  transition: border-color var(--dur-2) var(--ease-out-expo), box-shadow var(--dur-2) var(--ease-out-expo), transform var(--dur-2) var(--ease-out-expo);
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  display: flex;
}

.wb-angle-item:hover {
  border-color: rgba(var(--neon-glow-rgb), .35);
  transform: translateY(-1px);
}

.wb-angle-item-primary {
  border-color: rgba(var(--yue-ui-amber-400-bright-rgb), .55);
  box-shadow: inset 0 0 0 1px rgba(var(--yue-ui-amber-400-bright-rgb), .2), 0 4px 14px rgba(var(--yue-ui-amber-400-bright-rgb), .1);
}

.wb-angle-thumb-wrap {
  aspect-ratio: 1;
  border-radius: calc(var(--fluid-radius)  - 6px);
  background: linear-gradient(45deg, rgba(var(--glass-tint-rgb), .4) 25%, transparent 25%, transparent 75%, rgba(var(--glass-tint-rgb), .4) 75%), linear-gradient(45deg, rgba(var(--glass-tint-rgb), .4) 25%, transparent 25%, transparent 75%, rgba(var(--glass-tint-rgb), .4) 75%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.wb-angle-thumb {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.wb-angle-star-badge {
  background: rgba(var(--yue-ui-white-rgb), .92);
  width: 24px;
  height: 24px;
  box-shadow: 0 2px 8px rgba(var(--yue-ui-black-rgb), .18);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  display: inline-flex;
  position: absolute;
  top: 5px;
  right: 5px;
}

.wb-angle-body {
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.wb-angle-name {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-foam);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.wb-angle-select {
  border: 1px solid rgba(var(--glass-tint-rgb), .35);
  background: rgba(var(--yue-ui-white-rgb), .82);
  width: 100%;
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
  border-radius: 8px;
  outline: none;
  padding: 6px 8px;
  font-weight: 600;
}

.wb-angle-select:focus {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 3px rgba(var(--neon-glow-rgb), .14);
}

.wb-angle-primary-btn {
  border: 1px dashed rgba(var(--glass-tint-rgb), .45);
  background: rgba(var(--yue-ui-white-rgb), .65);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  font-weight: 600;
  display: inline-flex;
}

.wb-angle-primary-btn:hover {
  border-color: rgba(var(--yue-ui-amber-400-bright-rgb), .6);
  color: #9a7b00;
}

.wb-angle-primary-btn.active {
  border-style: solid;
  border-color: rgba(var(--yue-ui-amber-400-bright-rgb), .7);
  background: linear-gradient(135deg, rgba(var(--yue-ui-amber-400-bright-rgb), .18), rgba(var(--yue-ui-amber-400-bright-rgb), .08));
  color: #8a6d00;
}

.gp-recommend-header {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  display: flex;
}

.gp-recommend-btn {
  border: 1px solid rgba(var(--neon-glow-rgb), .35);
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .14), rgba(var(--ocean-cyan-rgb), .08));
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-weight: 600;
  display: inline-flex;
}

.gp-recommend-btn:hover:not(:disabled) {
  border-color: rgba(var(--neon-glow-rgb), .6);
  transform: translateY(-1px);
}

.gp-recommend-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.gp-recommend-modes {
  background: rgba(var(--glass-tint-rgb), .6);
  border: 1px solid rgba(var(--glass-tint-rgb), .25);
  border-radius: 999px;
  gap: 4px;
  margin-bottom: 10px;
  padding: 3px;
  display: inline-flex;
}

.gp-recommend-mode {
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  background: none;
  border: none;
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-weight: 600;
  display: inline-flex;
}

.gp-recommend-mode.active {
  background: linear-gradient(135deg, var(--ocean-light), var(--neon-glow));
  color: var(--text-inverse);
  box-shadow: 0 2px 10px rgba(var(--neon-glow-rgb), .35);
}

.gp-recommend-meta {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .1), rgba(var(--ocean-cyan-rgb), .06));
  border: 1px solid rgba(var(--neon-glow-rgb), .22);
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  border-radius: 12px;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding: 10px 12px;
  line-height: 1.5;
  display: flex;
}

.gp-recommend-guide {
  border: 1px dashed rgba(var(--neon-glow-rgb), .32);
  background: rgba(var(--glass-tint-rgb), .35);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  border-radius: 12px;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 10px;
  padding: 9px 12px;
  line-height: 1.5;
  display: flex;
}

.gp-recommend-guide i {
  color: var(--neon-glow);
  margin-top: 2px;
}

.gp-recommend-guide b {
  color: var(--ocean-deep);
  font-weight: 600;
}

.gp-recommend-guide.active {
  border-style: solid;
  border-color: rgba(var(--neon-glow-rgb), .45);
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .1), rgba(var(--ocean-cyan-rgb), .05));
}

.gp-recommend-guide.active i {
  color: var(--success, #61bd67);
}

.gp-recommend-diagnosis, .gp-recommend-intent {
  align-items: flex-start;
  gap: 7px;
  display: flex;
}

.gp-recommend-diagnosis i {
  color: var(--neon-glow);
  margin-top: 2px;
}

.gp-recommend-intent i {
  color: var(--ocean-cyan);
  margin-top: 2px;
}

.gp-prompt-preview {
  border: 1px solid rgba(var(--neon-glow-rgb), .28);
  background: rgba(var(--ocean-deep-rgb), .08);
  border-radius: 12px;
  margin-top: 10px;
  overflow: hidden;
}

.gp-prompt-preview-head {
  background: rgba(var(--neon-glow-rgb), .08);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-weight: 600;
  display: flex;
}

.gp-prompt-preview-head i {
  color: var(--neon-glow);
}

.gp-prompt-preview-actions {
  gap: 6px;
  display: inline-flex;
}

.gp-prompt-preview-actions button {
  border: 1px solid rgba(var(--neon-glow-rgb), .3);
  background: rgba(var(--glass-tint-rgb), .6);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  border-radius: 999px;
  padding: 3px 10px;
}

.gp-prompt-preview-actions button:hover {
  border-color: var(--neon-glow);
  color: var(--ocean-deep);
}

.gp-prompt-preview-block + .gp-prompt-preview-block {
  border-top: 1px solid rgba(var(--glass-tint-rgb), .2);
}

.gp-prompt-preview-block-title {
  background: rgba(var(--glass-tint-rgb), .25);
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-weight: 600;
  display: flex;
}

.gp-prompt-preview-block-title i {
  color: var(--neon-glow);
}

.gp-prompt-preview-block-title button {
  border: 1px solid rgba(var(--neon-glow-rgb), .3);
  background: rgba(var(--glass-tint-rgb), .6);
  color: var(--ocean-mid);
  cursor: pointer;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
}

.gp-prompt-preview-block-title button:hover {
  border-color: var(--neon-glow);
  color: var(--ocean-deep);
}

.gp-prompt-preview pre {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  color: var(--ocean-foam);
  margin: 0;
  padding: 12px;
  font-size: 12px;
  line-height: 1.55;
  overflow: auto;
}

.gp-recommend-list {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  display: grid;
}

.gp-recommend-card {
  background: rgba(var(--glass-tint-rgb), .5);
  border: 1px solid rgba(var(--glass-tint-rgb), .35);
  cursor: pointer;
  transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out-expo);
  border-radius: 10px;
  padding: 10px;
}

.gp-recommend-card:hover {
  border-color: rgba(var(--neon-glow-rgb), .45);
  transform: translateY(-1px);
}

.gp-recommend-card-primary {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .14), rgba(var(--ocean-cyan-rgb), .08));
  border-color: rgba(var(--neon-glow-rgb), .45);
  box-shadow: 0 4px 18px rgba(var(--neon-glow-rgb), .14);
  grid-column: 1 / -1;
}

.gp-recommend-card-primary .gp-recommend-rank {
  background: linear-gradient(135deg, var(--ocean-light), var(--neon-glow));
  color: var(--text-inverse);
  border-radius: 999px;
  padding: 1px 8px;
  display: inline-block;
}

.gp-recommend-card.gp-rec-selected {
  border-color: rgba(var(--success-rgb), .65);
  box-shadow: 0 0 0 1px rgba(var(--success-rgb), .35), 0 4px 16px #0000002e;
  background: rgba(var(--success-rgb), .1);
}

.gp-recommend-card.gp-rec-selected .gp-recommend-rank {
  color: var(--success);
  font-weight: 600;
}

.gp-rec-selected-hint {
  color: var(--text-secondary);
  white-space: nowrap;
  font-size: 12px;
}

.gp-recommend-rank {
  color: var(--ocean-light);
  font-size: 11px;
  font-weight: 600;
}

.gp-recommend-style {
  color: var(--text-primary);
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
}

.gp-recommend-reason {
  color: var(--text-tertiary);
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
}

.gp-repair-editor {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.gp-repair-stage {
  aspect-ratio: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: rgba(var(--ocean-foam-rgb), .25);
  border: 1px dashed rgba(var(--neon-glow-rgb), .35);
  cursor: crosshair;
  touch-action: none;
  border-radius: 12px;
  width: 100%;
  max-height: 320px;
  position: relative;
  overflow: hidden;
}

.gp-repair-rect {
  border: 1.5px solid var(--neon-glow);
  background: rgba(var(--neon-glow-rgb), .18);
  pointer-events: none;
  border-radius: 3px;
  position: absolute;
}

.gp-repair-draft {
  opacity: .75;
  border-style: dashed;
}

.gp-repair-empty {
  border: 1px dashed rgba(var(--glass-tint-rgb), .4);
  min-height: 90px;
  color: var(--text-tertiary);
  font-size: var(--fluid-font-sm);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.gp-repair-tags {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.gp-repair-tag {
  border: 1px solid rgba(var(--neon-glow-rgb), .35);
  background: rgba(var(--neon-glow-rgb), .1);
  color: var(--ocean-mid);
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: 11px;
  display: inline-flex;
}

.gp-repair-tag i {
  cursor: pointer;
  opacity: .7;
}

.gp-repair-tag i:hover {
  opacity: 1;
}

.gp-repair-clear {
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
  font-size: 11px;
  text-decoration: underline;
}

.gp-repair-hint {
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.5;
}

.gp-print-mode-tabs {
  background: var(--ocean-light-rgb);
  border-radius: 10px;
  gap: 4px;
  margin: 4px 0 12px;
  padding: 3px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .gp-print-mode-tabs {
    background: color-mix(in srgb, var(--ocean-light-rgb) 6%, var(--glass-bg-mid));
  }
}

.gp-print-mode-tabs {
  border: 1px solid rgba(var(--ocean-light-rgb), .14);
}

.gp-print-mode-tabs button {
  font-size: var(--fluid-font-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-pro);
  background: none;
  border: none;
  border-radius: 8px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-weight: 600;
  display: inline-flex;
}

.gp-print-mode-tabs button i {
  font-size: .85rem;
}

.gp-print-mode-tabs button:hover {
  color: var(--text-primary);
  background: rgba(var(--ocean-light-rgb), .08);
}

.gp-print-mode-tabs .gp-print-mode-tab-active {
  color: #fff;
  background: linear-gradient(120deg, var(--ocean-light), var(--ocean-cyan));
  box-shadow: 0 2px 10px rgba(var(--ocean-light-rgb), .35);
}

.gp-print-mode-tabs .gp-print-mode-tab-active i {
  color: #fff;
}

.gp-reference-level {
  background: var(--bg-elevated, var(--yue-ui-white));
  border-radius: 10px;
  margin-top: 10px;
  padding: 10px 12px;
}

@supports (color: color-mix(in lab, red, red)) {
  .gp-reference-level {
    background: color-mix(in srgb, var(--bg-elevated, var(--yue-ui-white)) 70%, transparent);
  }
}

.gp-reference-level {
  border: 1px solid var(--border-color, rgba(var(--yue-ui-black-rgb), .07));
}

.gp-reference-level-head {
  color: var(--text-primary);
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.gp-reference-level-head span {
  color: var(--yue-ui-pink-400);
}

.gp-reference-level input[type="range"] {
  width: 100%;
  accent-color: var(--yue-ui-pink-400);
  margin: 8px 0 4px;
}

.gp-reference-level-hint {
  color: var(--text-tertiary);
  font-size: 11px;
}

.gp-painter-input-row {
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.gp-painter-input {
  resize: vertical;
  flex: 1;
}

.gp-painter-btn, .gp-painter-idea-btn {
  white-space: nowrap;
  padding: 10px 14px;
}

.gp-painter-settings {
  background: var(--bg-elevated, var(--yue-ui-white));
  border-radius: 10px;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .gp-painter-settings {
    background: color-mix(in srgb, var(--bg-elevated, var(--yue-ui-white)) 70%, transparent);
  }
}

.gp-painter-settings {
  border: 1px solid var(--border-color, rgba(var(--yue-ui-black-rgb), .07));
}

.gp-painter-setting-row {
  align-items: center;
  gap: 10px;
  display: flex;
}

.gp-painter-setting-label {
  width: 34px;
  color: var(--text-primary);
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
}

.gp-painter-setting-options {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.gp-painter-setting-chip {
  border: 1px solid var(--border-color, rgba(var(--yue-ui-black-rgb), .1));
  background: var(--bg-elevated, var(--yue-ui-white));
  border-radius: 999px;
  padding: 5px 12px;
}

@supports (color: color-mix(in lab, red, red)) {
  .gp-painter-setting-chip {
    background: color-mix(in srgb, var(--bg-elevated, var(--yue-ui-white)) 85%, transparent);
  }
}

.gp-painter-setting-chip {
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-2) ease;
  font-size: 12px;
}

.gp-painter-setting-chip:hover {
  color: var(--text-primary);
  border-color: var(--yue-ui-pink-400);
}

.gp-painter-setting-chip-active {
  color: var(--yue-ui-white);
  background: linear-gradient(135deg, var(--yue-ui-pink-400), var(--yue-ui-purple-400));
  border-color: #0000;
  box-shadow: 0 4px 12px #f472b63d;
}

.gp-painter-settings-hint {
  color: var(--text-tertiary);
  font-size: 11px;
}

.gp-painter-hint {
  color: var(--text-secondary);
  margin-top: 8px;
  font-size: 12px;
}

.gp-painter-product-status {
  color: var(--text-secondary);
  background: var(--bg-elevated, var(--yue-ui-white));
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 10px;
  font-size: 12px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .gp-painter-product-status {
    background: color-mix(in srgb, var(--bg-elevated, var(--yue-ui-white)) 70%, transparent);
  }
}

.gp-painter-product-status {
  border: 1px solid var(--border-color, rgba(var(--yue-ui-black-rgb), .07));
}

.gp-painter-product-status i {
  color: var(--yue-ui-green-emerald);
}

.gp-painter-product-status-busy i {
  color: var(--yue-ui-pink-400);
}

.gp-painter-active {
  color: #0f9f6e;
  background: var(--yue-ui-green-emerald);
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 12px;
  font-size: 12px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .gp-painter-active {
    background: color-mix(in srgb, var(--yue-ui-green-emerald) 10%, transparent);
  }
}

.gp-painter-active {
  border: 1px solid #10b98140;
}

.gp-painter-directions {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
  display: grid;
}

.gp-painter-direction-card {
  border: 1px solid var(--border-color, rgba(var(--yue-ui-black-rgb), .09));
  background: var(--bg-elevated, var(--yue-ui-white));
  border-radius: 12px;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .gp-painter-direction-card {
    background: color-mix(in srgb, var(--bg-elevated, var(--yue-ui-white)) 85%, transparent);
  }
}

.gp-painter-direction-card {
  text-align: left;
  cursor: pointer;
  transition: all var(--dur-2) ease;
}

.gp-painter-direction-card:hover {
  box-shadow: 0 6px 18px rgba(var(--yue-ui-black-rgb), .08);
  transform: translateY(-1px);
}

.gp-painter-direction-card-active {
  border-color: var(--yue-ui-pink-400);
  box-shadow: 0 0 0 2px #f472b638;
}

.gp-painter-direction-index {
  color: var(--yue-ui-pink-400);
  font-size: 12px;
  font-weight: 650;
}

.gp-painter-direction-title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.gp-painter-direction-desc, .gp-painter-direction-note {
  color: var(--text-secondary);
  font-size: 11px;
}

.gp-painter-direction-prompt {
  -webkit-line-clamp: 3;
  color: var(--text-tertiary);
  white-space: pre-line;
  -webkit-box-orient: vertical;
  font-size: 11px;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.gp-thumb.is-hero {
  border-color: var(--ocean-cyan);
  box-shadow: 0 0 0 2px rgba(var(--ocean-cyan-rgb), .35);
}

.gp-thumb-hero {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--text-inverse);
  box-shadow: 0 2px 8px rgba(var(--ocean-cyan-rgb), .4);
  pointer-events: none;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  position: absolute;
  top: 4px;
  left: 4px;
}

.gp-thumb-hero-btn {
  cursor: pointer;
  background: rgba(var(--ocean-deep-rgb), .55);
  width: 22px;
  height: 22px;
  color: var(--text-inverse);
  opacity: 0;
  transition: opacity var(--transition-fast);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  display: flex;
  position: absolute;
  bottom: 4px;
  right: 4px;
}

.gp-thumb:hover .gp-thumb-hero-btn {
  opacity: 1;
}

.alike-step-tip {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  margin-top: 8px;
}

.alike-analyzing {
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  align-items: center;
  gap: 10px;
  padding: 14px 4px;
  display: flex;
}

.alike-fallback-note {
  border-radius: var(--radius-sm);
  font-size: var(--fluid-font-sm);
  color: var(--warning);
  background: rgba(var(--warning-rgb), .08);
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  display: flex;
}

.alike-gene-card {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.alike-gene-field {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.alike-gene-label {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  font-weight: 600;
}

.alike-gene-textarea {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .28);
  border-radius: var(--radius-sm);
  width: 100%;
  color: var(--ocean-deep);
  font-size: var(--fluid-font-base);
  resize: vertical;
  transition: border-color var(--dur-3) var(--ease-out-expo), box-shadow var(--dur-3) var(--ease-out-expo);
  outline: none;
  padding: 10px 12px;
  font-family: inherit;
  line-height: 1.6;
}

.alike-gene-textarea:focus {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 3px rgba(var(--neon-glow-rgb), .1);
}

.alike-gene-textarea::placeholder {
  color: rgba(var(--ocean-mid-rgb), .55);
}

.alike-gene-empty {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  padding: 6px 0;
}

.alike-chip-remove {
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  margin-left: 2px;
  padding: 0 0 0 2px;
  font-size: 14px;
  line-height: 1;
}

.alike-gene-add {
  gap: 8px;
  max-width: 420px;
  display: flex;
}

.alike-gene-add input {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .28);
  border-radius: var(--radius-sm);
  min-width: 0;
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  outline: none;
  flex: 1;
  padding: 8px 10px;
  font-family: inherit;
}

.alike-gene-add input:focus {
  border-color: var(--neon-glow);
}

.alike-gene-add button {
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--text-inverse);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  border: none;
  padding: 8px 14px;
  font-weight: 600;
}

.alike-role-list {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.alike-role-item {
  width: 86px;
}

.alike-role-item img {
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--glass-tint-rgb), .28);
  width: 86px;
  height: 86px;
  display: block;
}

.alike-role-item.is-hero img {
  border-color: var(--ocean-cyan);
  box-shadow: 0 0 0 2px rgba(var(--ocean-cyan-rgb), .35);
}

.alike-role-item button {
  border: 1px solid rgba(var(--glass-tint-rgb), .25);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 100%;
  color: var(--ocean-mid);
  cursor: pointer;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 5px 0;
  font-size: 11px;
  display: flex;
}

.alike-role-item button.active {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  border-color: rgba(var(--ocean-cyan-rgb), .6);
  color: var(--text-inverse);
}

.alike-role-item button:disabled {
  cursor: default;
}

.alike-direction-list {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.alike-direction-item {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.alike-direction-role {
  min-width: 76px;
  font-size: var(--fluid-font-xs);
  color: var(--ocean-cyan);
  font-weight: 600;
}

.alike-layout-textarea {
  flex: 100%;
  min-width: 100%;
  margin-bottom: 2px;
}

.alike-gene-actions {
  display: flex;
}

.alike-reanalyze-btn {
  border: 1px solid rgba(var(--glass-tint-rgb), .25);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  display: inline-flex;
}

.alike-reanalyze-btn:hover {
  border-color: var(--neon-glow);
  color: var(--ocean-deep);
}

.alike-reanalyze-btn:disabled {
  opacity: .55;
  cursor: default;
}

.alike-count-label {
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  margin-bottom: 8px;
  font-weight: 600;
}

.alike-summary {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  margin-top: 10px;
}

.alike-summary strong {
  color: var(--ocean-cyan);
  font-weight: 600;
}

.alike-variation-level {
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  display: flex;
}

.alike-variation-head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.alike-variation-head label {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  font-weight: 600;
}

.alike-variation-head span {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-cyan);
  font-weight: 600;
}

.alike-variation-level input[type="range"] {
  width: 100%;
  accent-color: var(--ocean-cyan);
  margin: 6px 0 2px;
}

.alike-variation-hint {
  color: var(--text-tertiary);
  font-size: 11px;
}

.alike-modify {
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  display: flex;
}

.alike-confirm-mask {
  z-index: 1200;
  background: rgba(var(--ocean-deep-rgb), .55);
  -webkit-backdrop-filter: blur(calc(6px * var(--glass-blur-level, 1)));
  backdrop-filter: blur(calc(6px * var(--glass-blur-level, 1)));
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: fixed;
  inset: 0;
}

.alike-confirm-box {
  background: var(--bg-elevated, var(--yue-ui-white));
  width: min(420px, 100%);
  box-shadow: 0 18px 50px rgba(var(--yue-ui-black-rgb), .25);
  border-radius: 16px;
  padding: 22px;
}

.alike-confirm-title {
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 600;
  display: flex;
}

.alike-confirm-title i {
  color: var(--warning);
}

.alike-confirm-text {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  margin-bottom: 18px;
  line-height: 1.7;
}

.alike-confirm-text strong {
  color: var(--ocean-cyan);
}

.alike-confirm-actions {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.gp-section-label {
  color: var(--text-tertiary);
  margin: 2px 0 6px;
  font-size: .68rem;
}

.gp-text-input {
  border: 1px solid rgba(var(--bright-cyan-rgb), .2);
  background: rgba(var(--glass-bg-rgb), .3);
  width: 100%;
  height: 36px;
  color: var(--text-primary);
  border-radius: 8px;
  outline: none;
  padding: 0 10px;
  font-size: .72rem;
}

.gp-text-input:focus {
  border-color: rgb(var(--bright-cyan-rgb));
}

.gp-action-bar {
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
  display: flex;
}

.gp-primary-btn, .gp-secondary-btn {
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  border-radius: 9px;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: .74rem;
  font-weight: 600;
  display: inline-flex;
}

.gp-primary-btn {
  background: linear-gradient(135deg, rgb(var(--bright-cyan-rgb)), rgb(var(--ocean-rgb)));
  color: var(--yue-ui-white);
  border: none;
}

.gp-primary-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.gp-secondary-btn {
  border: 1px solid rgba(var(--bright-cyan-rgb), .28);
  background: rgba(var(--glass-bg-rgb), .3);
  color: var(--text-secondary);
}

.gp-secondary-btn:hover {
  border-color: rgb(var(--bright-cyan-rgb));
  color: var(--text-primary);
}

.gp-progress-note {
  color: var(--text-tertiary);
  padding: 4px 0;
  font-size: .66rem;
}

.gp-result-list {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.gp-result-item {
  background: rgba(var(--glass-bg-rgb), .28);
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  display: flex;
}

.gp-result-item.is-failed {
  border: 1px solid rgba(var(--yue-ui-red-500-rgb), .3);
}

.gp-result-thumb {
  background: rgba(var(--yue-ui-white-rgb), .85);
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  display: flex;
  overflow: hidden;
}

.gp-result-thumb img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.gp-result-info {
  flex: 1;
  min-width: 0;
}

.gp-result-name {
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .7rem;
  overflow: hidden;
}

.gp-result-status {
  color: var(--text-tertiary);
  margin-top: 3px;
  font-size: .64rem;
}

.gp-result-status i {
  margin-right: 3px;
}

.gp-result-saved {
  color: var(--yue-ui-green-bright);
  word-break: break-all;
  margin-top: 3px;
  font-size: .6rem;
}

.gp-result-actions {
  flex-shrink: 0;
  gap: 6px;
  display: flex;
}

.gp-mini-btn {
  border: 1px solid rgba(var(--bright-cyan-rgb), .25);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out-expo);
  background: none;
  border-radius: 7px;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  font-size: .64rem;
  display: inline-flex;
}

.gp-mini-btn:hover {
  border-color: rgb(var(--bright-cyan-rgb));
  color: var(--text-primary);
  background: rgba(var(--bright-cyan-rgb), .08);
}

.gp-hint {
  color: var(--text-tertiary);
  font-size: .64rem;
  line-height: 1.6;
}

.gp-localize-row {
  border-bottom: 1px dashed rgba(var(--bright-cyan-rgb), .12);
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: .68rem;
  display: flex;
}

.gp-localize-row:last-child {
  border-bottom: none;
}

.gp-localize-index {
  background: rgba(var(--bright-cyan-rgb), .14);
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .6rem;
  display: flex;
}

.gp-localize-name {
  min-width: 0;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.gp-localize-status {
  color: var(--text-tertiary);
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.gp-localize-status.is-ready {
  color: var(--yue-ui-green-bright);
}

.gp-localize-status.is-failed {
  color: var(--yue-ui-red-500);
}

.gp-chip-check {
  margin-left: 4px;
  font-size: .58rem;
}

.gp-localize-modes {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.gp-localize-mode-card {
  border: 1px solid rgba(var(--bright-cyan-rgb), .18);
  background: rgba(var(--bright-cyan-rgb), .05);
  width: 100%;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-2) ease, background var(--dur-2) ease, transform var(--dur-2) ease;
  border-radius: 10px;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 9px 12px;
  display: flex;
}

.gp-localize-mode-card:hover {
  border-color: rgba(var(--bright-cyan-rgb), .4);
  background: rgba(var(--bright-cyan-rgb), .09);
}

.gp-localize-mode-card.active {
  border-color: var(--bright-cyan);
  background: rgba(var(--bright-cyan-rgb), .14);
  color: var(--text-primary);
}

.gp-localize-mode-label {
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 600;
  display: inline-flex;
}

.gp-localize-mode-recommend {
  background: linear-gradient(135deg, rgba(var(--bright-cyan-rgb), .28), rgba(var(--bright-violet-rgb), .28));
  color: var(--bright-cyan);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: .56rem;
  font-weight: 600;
}

.gp-localize-mode-hint {
  color: var(--text-tertiary);
  font-size: .62rem;
  line-height: 1.5;
}

.gp-localize-advanced-toggle {
  border: 1px solid rgba(var(--glass-tint-rgb), .16);
  background: rgba(var(--glass-tint-rgb), .05);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: .66rem;
  display: inline-flex;
}

.gp-localize-advanced {
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  display: flex;
}

.gp-localize-check {
  color: var(--text-secondary);
  cursor: pointer;
  align-items: flex-start;
  gap: 8px;
  font-size: .68rem;
  line-height: 1.5;
  display: flex;
}

.gp-localize-check input {
  accent-color: var(--bright-cyan);
  margin-top: 2px;
}

.gp-localize-lang {
  background: rgba(var(--glass-tint-rgb), .08);
  color: var(--text-tertiary);
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-size: .58rem;
  display: inline-flex;
}

.gp-localize-lang.is-ready {
  color: var(--yue-ui-green-bright);
  background: #22c55e1f;
}

.gp-localize-lang.is-failed {
  color: var(--yue-ui-red-500);
  background: #ef44441f;
}

.gp-localize-lang.is-pending {
  color: var(--text-secondary);
}

.gp-localize-retry {
  border: 1px solid rgba(var(--bright-cyan-rgb), .25);
  background: rgba(var(--bright-cyan-rgb), .08);
  color: var(--bright-cyan);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 7px;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: .6rem;
  display: inline-flex;
}

.gp-localize-retry:hover {
  background: rgba(var(--bright-cyan-rgb), .16);
}

.upload-wave-overlay {
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.upload-wave-overlay canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.upload-wave-overlay .upload-wave-edge-glow {
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-2) ease-out;
  position: absolute;
  inset: 0;
}

.upload-wave-overlay--sticky {
  border-radius: 0;
  height: 0;
  position: sticky;
  top: 0;
  overflow: visible;
}

.upload-wave-overlay--sticky canvas, .upload-wave-overlay--sticky .upload-wave-edge-glow {
  height: 100%;
}

div:has( > .upload-wave-overlay) {
  position: relative;
}

div:has( > .upload-wave-overlay) > :not(.upload-wave-overlay) {
  z-index: 1;
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .upload-wave-overlay {
    display: none !important;
  }
}

.format-convert-panel {
  max-height: 100%;
  overflow: hidden auto;
}

.fc-drop-zone {
  border: 2px dashed rgba(var(--neon-glow-rgb), .3);
  border-radius: var(--fluid-radius);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  transition: all var(--dur-3) var(--ease-out-expo);
  align-items: center;
  gap: 16px;
  padding: 24px 20px;
  display: flex;
  position: relative;
}

.fc-drop-zone.drag-over {
  background: rgba(var(--neon-glow-rgb), .06);
  border-color: rgba(var(--neon-glow-rgb), .5);
}

.fc-drop-icon {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .15), rgba(var(--neon-glow-rgb), .05));
  border: 1px solid rgba(var(--neon-glow-rgb), .2);
  width: 48px;
  height: 48px;
  color: var(--neon-glow);
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  display: flex;
}

.fc-drop-text {
  flex: 1;
  min-width: 0;
}

.fc-drop-title {
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  font-weight: 600;
}

.fc-drop-sub {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-foam);
  margin-top: 3px;
  line-height: 1.5;
}

.fc-clear-btn {
  border: 1px solid rgba(var(--error-rgb), .25);
  background: rgba(var(--error-rgb), .08);
  color: var(--error);
  font-size: var(--fluid-font-xs);
  cursor: pointer;
  transition: all var(--dur-3) var(--ease-out-expo);
  border-radius: 8px;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-weight: 600;
  display: inline-flex;
}

.fc-clear-btn:hover {
  background: rgba(var(--error-rgb), .15);
}

.fc-controls {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.fc-control-label {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-deep);
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-weight: 600;
  display: flex;
}

.fc-control-label i {
  color: var(--neon-glow);
  font-size: .85em;
}

.fc-format-buttons {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.fc-format-btn {
  border: 1px solid rgba(var(--glass-tint-rgb), .18);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-foam);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-3) var(--ease-out-expo);
  white-space: nowrap;
  border-radius: 10px;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-weight: 600;
  display: inline-flex;
}

.fc-format-btn:hover {
  border-color: rgba(var(--neon-glow-rgb), .3);
  background: rgba(var(--neon-glow-rgb), .06);
}

.fc-format-btn.active {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .22), rgba(var(--neon-glow-rgb), .1));
  border-color: rgba(var(--neon-glow-rgb), .4);
  color: var(--neon-glow);
  box-shadow: 0 2px 10px rgba(var(--neon-glow-rgb), .12);
}

.fc-mode-tabs {
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-bg-rgb), .55);
  border: .5px solid rgba(var(--glass-tint-rgb), .25);
  box-sizing: border-box;
  gap: 6px;
  width: 100%;
  padding: 3px;
  display: flex;
}

.fc-mode-tab {
  border-radius: calc(var(--radius-sm)  - 1px);
  color: var(--ocean-foam);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-3) var(--ease-out-expo);
  background: none;
  border: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-weight: 600;
  display: inline-flex;
}

.fc-mode-tab i {
  opacity: .85;
  font-size: .9em;
}

.fc-mode-tab:hover {
  color: var(--neon-glow);
  background: rgba(var(--neon-glow-rgb), .06);
}

.fc-mode-tab.active {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .22), rgba(var(--neon-glow-rgb), .1));
  color: var(--neon-glow);
  box-shadow: 0 2px 10px rgba(var(--neon-glow-rgb), .12);
}

.fc-size-inputs {
  flex-wrap: wrap;
  gap: 16px;
  display: flex;
}

.fc-size-field {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.fc-size-label {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-foam);
  white-space: nowrap;
  font-weight: 600;
}

.fc-size-input {
  width: 80px;
  font-size: var(--fluid-font-sm);
  padding: 6px 10px;
  font-weight: 600;
}

.fc-size-unit {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
}

.fc-quality-row {
  align-items: center;
  gap: var(--fluid-gap);
  display: flex;
}

.fc-quality-slider {
  appearance: none;
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  border-radius: 3px;
  outline: none;
  flex: 1;
  height: 6px;
}

.fc-quality-slider::-webkit-slider-thumb {
  appearance: none;
  background: linear-gradient(135deg, var(--neon-glow), var(--ocean-cyan));
  cursor: pointer;
  border: 2px solid rgba(var(--glass-tint-rgb), .6);
  width: 18px;
  height: 18px;
  box-shadow: 0 2px 8px rgba(var(--neon-glow-rgb), .3);
  border-radius: 50%;
}

.fc-quality-slider::-moz-range-thumb {
  background: linear-gradient(135deg, var(--neon-glow), var(--ocean-cyan));
  cursor: pointer;
  border: 2px solid rgba(var(--glass-tint-rgb), .6);
  width: 18px;
  height: 18px;
  box-shadow: 0 2px 8px rgba(var(--neon-glow-rgb), .3);
  border-radius: 50%;
}

.fc-quality-value {
  font-size: var(--fluid-font-base);
  color: var(--neon-glow);
  white-space: nowrap;
  text-align: right;
  min-width: 36px;
  font-weight: 600;
}

.fc-color-row {
  align-items: center;
  gap: 10px;
  display: flex;
}

.fc-color-picker {
  border: 1px solid rgba(var(--glass-tint-rgb), .22);
  background: rgba(var(--glass-bg-rgb), .72);
  cursor: pointer;
  border-radius: 8px;
  width: 40px;
  height: 32px;
  padding: 2px;
}

.fc-color-value {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-foam);
  font-family: monospace;
  font-weight: 600;
}

.fc-dpi-row {
  align-items: center;
  gap: 8px;
  display: flex;
}

.fc-dpi-input {
  width: 120px;
  font-size: var(--fluid-font-sm);
  padding: 6px 10px;
  font-weight: 600;
}

.fc-dpi-unit {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-foam);
  font-weight: 600;
}

.fc-dpi-hint {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  opacity: .75;
  margin-top: 6px;
}

.fc-convert-buttons {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  display: flex;
}

.fc-btn {
  align-items: center;
  gap: var(--fluid-gap-sm);
  border: 1px solid rgba(var(--glass-tint-rgb), .18);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-deep);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: all var(--dur-3) var(--ease-out-expo);
  white-space: nowrap;
  border-radius: 10px;
  padding: 7px 14px;
  font-weight: 600;
  display: inline-flex;
}

.fc-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.fc-btn.primary {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .22), rgba(var(--neon-glow-rgb), .1));
  border-color: rgba(var(--neon-glow-rgb), .4);
  color: var(--neon-glow);
}

.fc-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .32), rgba(var(--neon-glow-rgb), .16));
  box-shadow: 0 4px 12px rgba(var(--neon-glow-rgb), .15);
}

.fc-btn.ghost {
  border-color: rgba(var(--glass-tint-rgb), .15);
  color: var(--ocean-foam);
  background: none;
}

.fc-btn.ghost:hover:not(:disabled) {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
}

.fc-progress {
  align-items: center;
  gap: var(--fluid-gap);
  margin-top: 12px;
  display: flex;
}

.fc-stats-bar {
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 12px;
  display: flex;
}

.fc-stat {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .12);
  border-radius: 10px;
  flex-direction: column;
  gap: 2px;
  padding: 8px 16px;
  display: flex;
}

.fc-stat.highlight {
  background: rgba(var(--neon-glow-rgb), .08);
  border-color: rgba(var(--neon-glow-rgb), .2);
}

.fc-stat.danger {
  background: rgba(var(--error-rgb), .06);
  border-color: rgba(var(--error-rgb), .15);
}

.fc-stat-num {
  font-size: var(--fluid-font-lg);
  color: var(--ocean-deep);
  font-weight: 600;
}

.fc-stat.highlight .fc-stat-num {
  color: var(--neon-glow);
}

.fc-stat.danger .fc-stat-num {
  color: var(--error);
}

.fc-stat-label {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.fc-result-actions {
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}

.fc-result-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  display: grid;
}

.fc-result-card {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .12);
  transition: all var(--dur-3) var(--ease-out-expo);
  border-radius: 12px;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  display: flex;
}

.fc-result-card:hover {
  border-color: rgba(var(--neon-glow-rgb), .25);
  box-shadow: 0 4px 12px rgba(var(--neon-glow-rgb), .08);
}

.fc-result-thumb {
  aspect-ratio: 4 / 3;
  background: rgba(var(--yue-ui-white-rgb, 255, 255, 255), .85);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  overflow: hidden;
}

.fc-result-thumb img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.fc-result-info {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.fc-result-name {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-deep);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  overflow: hidden;
}

.fc-result-format {
  align-items: center;
  gap: 6px;
  display: flex;
}

.fc-format-tag {
  font-size: var(--fluid-font-xs);
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: 6px;
  align-items: center;
  padding: 2px 8px;
  font-weight: 600;
  display: inline-flex;
}

.fc-format-tag.orig {
  background: rgba(var(--glass-tint-rgb), .15);
  color: var(--ocean-foam);
}

.fc-format-tag.new {
  background: rgba(var(--neon-glow-rgb), .15);
  color: var(--neon-glow);
}

.fc-result-format i {
  color: var(--ocean-foam);
  font-size: .6rem;
}

.fc-result-size {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  display: flex;
}

.fc-size-delta {
  font-size: .6rem;
  font-weight: 600;
}

.fc-size-delta.decrease {
  color: var(--yue-ui-green-bright, #22c55e);
}

.fc-size-delta.increase {
  color: var(--warning, #f59e0b);
}

.fc-failed-list {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.fc-failed-header {
  font-size: var(--fluid-font-sm);
  color: var(--error);
  align-items: center;
  gap: 6px;
  font-weight: 600;
  display: flex;
}

.fc-failed-item {
  background: rgba(var(--error-rgb), .06);
  border: 1px solid rgba(var(--error-rgb), .12);
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  display: flex;
}

.fc-failed-name {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-deep);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 200px;
  font-weight: 600;
  overflow: hidden;
}

.fc-failed-error {
  font-size: var(--fluid-font-xs);
  color: var(--error);
  flex: 1;
  min-width: 0;
}

.detail-upload-grid, .gp-scene-upload, .ph-box {
  position: relative;
}

.ph-box .ph-input {
  padding-right: 42px;
}

.ph-toggle {
  width: 30px;
  height: 30px;
  color: var(--ocean-light);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out-expo), color var(--dur-2) var(--ease-out-expo), border-color var(--dur-2) var(--ease-out-expo);
  background: none;
  border: 1px solid #0000;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  display: inline-flex;
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}

.ph-toggle:hover {
  background: rgba(var(--glass-tint-rgb), .16);
  color: var(--ocean-deep);
}

.ph-toggle i {
  transition: transform var(--dur-2) var(--ease-out-expo);
}

.ph-toggle.open {
  border-color: rgba(var(--neon-glow-rgb), .45);
  background: rgba(var(--neon-glow-rgb), .12);
  color: var(--neon-glow);
}

.ph-toggle.open i {
  transform: rotate(180deg);
}

.ph-box-multiline .ph-toggle {
  top: 9px;
  transform: none;
}

.ph-box-open .ph-input {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 3px rgba(var(--neon-glow-rgb), .1), 0 0 16px rgba(var(--neon-glow-rgb), .08);
}

.ph-panel {
  z-index: 10000;
  border-radius: var(--radius-lg);
  background: var(--surface-glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  box-shadow: var(--glass-edge-bottom), var(--glass-edge-top), 0 0 0 1px rgba(var(--glass-tint-rgb), .08), 0 24px 72px #19232a24;
  animation: ph-panel-in var(--dur-2) var(--ease-out-back) both;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.ph-panel.closing {
  animation: ph-panel-out var(--dur-2) cubic-bezier(.4, 0, 1, 1) both;
}

.ph-panel.ph-above {
  animation-name: ph-panel-in-up;
}

.ph-panel.ph-above.closing {
  animation-name: ph-panel-out-up;
}

@keyframes ph-panel-in {
  from {
    opacity: 0;
    transform: translateY(-10px)scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

@keyframes ph-panel-out {
  from {
    opacity: 1;
    transform: translateY(0)scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-6px)scale(.985);
  }
}

@keyframes ph-panel-in-up {
  from {
    opacity: 0;
    transform: translateY(10px)scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

@keyframes ph-panel-out-up {
  from {
    opacity: 1;
    transform: translateY(0)scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(6px)scale(.985);
  }
}

@supports not ((-webkit-backdrop-filter: blur(calc(1px * var(--glass-blur-level, 1)))) or (backdrop-filter: blur(calc(1px * var(--glass-blur-level, 1))))) {
  .ph-panel {
    background: rgba(var(--glass-bg-rgb), .97);
  }
}

.ph-bar {
  border-bottom: 1px solid rgba(var(--glass-tint-rgb), .14);
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.ph-bar-title {
  min-width: 0;
  font-size: var(--fluid-font-sm);
  color: var(--ocean-deep);
  white-space: nowrap;
  text-overflow: ellipsis;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  display: inline-flex;
  overflow: hidden;
}

.ph-bar-title i {
  color: var(--neon-glow);
  flex-shrink: 0;
  font-size: 12px;
}

.ph-bar-meta {
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

.ph-bar-close {
  width: 26px;
  height: 26px;
  color: var(--ocean-foam);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out-expo), color var(--dur-2) var(--ease-out-expo);
  background: none;
  border: none;
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  display: inline-flex;
}

.ph-bar-close:hover {
  background: rgba(var(--glass-tint-rgb), .16);
  color: var(--ocean-deep);
}

.ph-body {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
}

.ph-tabs {
  border-bottom: 1px solid rgba(var(--glass-tint-rgb), .12);
  scrollbar-width: none;
  flex-shrink: 0;
  align-items: center;
  gap: 0;
  padding: 8px 10px;
  display: flex;
  overflow-x: auto;
}

.ph-tabs::-webkit-scrollbar {
  display: none;
}

.ph-tab {
  color: var(--ocean-light);
  font-size: var(--fluid-font-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out-expo), color var(--dur-2) var(--ease-out-expo), border-color var(--dur-2) var(--ease-out-expo), box-shadow var(--dur-2) var(--ease-out-expo);
  background: none;
  border: 1px solid #0000;
  border-radius: 999px;
  flex-shrink: 0;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  font-family: inherit;
  display: inline-flex;
  position: relative;
}

.ph-tab:hover {
  color: var(--ocean-deep);
  background: rgba(var(--glass-tint-rgb), .08);
}

.ph-tab.active {
  color: var(--ocean-deep);
  border-color: rgba(var(--neon-glow-rgb), .4);
  background: rgba(var(--neon-glow-rgb), .1);
  box-shadow: 0 2px 10px rgba(var(--neon-glow-rgb), .12);
  font-weight: 600;
}

.ph-step-num {
  background: rgba(var(--glass-tint-rgb), .16);
  width: 18px;
  height: 18px;
  color: var(--ocean-foam);
  transition: background var(--dur-2) var(--ease-out-expo), color var(--dur-2) var(--ease-out-expo), box-shadow var(--dur-2) var(--ease-out-expo);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
}

.ph-tab:hover .ph-step-num {
  background: rgba(var(--glass-tint-rgb), .26);
  color: var(--ocean-deep);
}

.ph-tab.active .ph-step-num {
  background: linear-gradient(135deg, var(--ocean-primary), var(--ocean-deep));
  color: var(--text-inverse);
  box-shadow: 0 2px 8px rgba(var(--ocean-light-rgb), .2);
}

.ph-tab .ph-step-num.filled {
  background: rgba(var(--neon-glow-rgb), .18);
  color: var(--neon-glow);
}

.ph-tab.active .ph-step-num.filled {
  background: linear-gradient(135deg, var(--ocean-primary), var(--ocean-deep));
  color: var(--text-inverse);
}

.ph-step-line {
  background: linear-gradient(90deg, var(--ocean-cyan), var(--neon-glow));
  opacity: .5;
  border-radius: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 2px;
  margin: 0 2px;
}

.ph-tab-count {
  background: rgba(var(--glass-tint-rgb), .14);
  min-width: 15px;
  height: 15px;
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
  font-weight: 400;
  display: inline-flex;
}

.ph-tab.active .ph-tab-count {
  background: rgba(var(--neon-glow-rgb), .14);
  color: var(--neon-glow);
}

.ph-list {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  overflow-y: auto;
}

.ph-grid {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
  display: grid;
}

.ph-opt {
  border: 1px solid rgba(var(--glass-tint-rgb), .25);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  min-height: 32px;
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out-expo), background var(--dur-2) var(--ease-out-expo), color var(--dur-2) var(--ease-out-expo), transform var(--dur-2) var(--ease-out-expo), box-shadow var(--dur-2) var(--ease-out-expo);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-family: inherit;
  display: inline-flex;
}

.ph-opt:hover {
  border-color: rgba(var(--neon-glow-rgb), .55);
  background: rgba(var(--neon-glow-rgb), .09);
  color: var(--ocean-deep);
  box-shadow: 0 4px 14px rgba(var(--neon-glow-rgb), .1), 0 0 12px rgba(var(--neon-glow-rgb), .08);
  transform: translateY(-1px);
}

.ph-opt.active {
  border-color: rgba(var(--neon-glow-rgb), .65);
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--text-inverse);
  box-shadow: 0 4px 14px rgba(var(--neon-glow-rgb), .18), 0 0 12px rgba(var(--neon-glow-rgb), .12);
  font-weight: 600;
}

.ph-opt-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.ph-opt-check {
  color: var(--text-inverse);
  flex-shrink: 0;
  font-size: 10px;
}

.ph-footer {
  border-top: 1px solid rgba(var(--glass-tint-rgb), .14);
  background: rgba(var(--glass-tint-rgb), .05);
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  display: flex;
}

.ph-foot-note {
  min-width: 0;
  font-size: var(--fluid-font-xs);
  color: var(--ocean-foam);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  overflow: hidden;
}

.ph-actions {
  flex-shrink: 0;
  gap: 8px;
  display: flex;
}

.ph-btn {
  border: 1px solid rgba(var(--glass-tint-rgb), .25);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate-mid));
  color: var(--ocean-mid);
  font-size: var(--fluid-font-sm);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out-expo), background var(--dur-2) var(--ease-out-expo), color var(--dur-2) var(--ease-out-expo), transform var(--dur-2) var(--ease-out-expo), box-shadow var(--dur-2) var(--ease-out-expo);
  border-radius: 999px;
  padding: 6px 16px;
  font-family: inherit;
}

.ph-btn:hover {
  border-color: var(--neon-glow);
  color: var(--ocean-deep);
  background: rgba(var(--neon-glow-rgb), .07);
  box-shadow: 0 4px 14px rgba(var(--neon-glow-rgb), .1), 0 0 12px rgba(var(--neon-glow-rgb), .08);
  transform: translateY(-1px);
}

.ph-btn-primary {
  border-color: rgba(var(--neon-glow-rgb), .6);
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  color: var(--text-inverse);
  font-weight: 600;
}

.ph-btn-primary:hover {
  background: linear-gradient(135deg, var(--ocean-primary), var(--ocean-deep));
  color: var(--text-inverse);
  box-shadow: 0 4px 14px rgba(var(--neon-glow-rgb), .18), 0 0 12px rgba(var(--neon-glow-rgb), .12);
}

@media (max-width: 720px) {
  .ph-grid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  }
}

.gp-agent-layout {
  gap: var(--fluid-gap);
  align-items: stretch;
  min-height: 0;
  display: flex;
}

.settings-area:has( > .setting-group[data-setting="grsai-func"][data-func="agent-image"].active) {
  flex-direction: column;
  display: flex;
}

.setting-group.active[data-func="agent-image"] {
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
}

.setting-group.active[data-func="agent-image"] > .gp-panel.gp-agent {
  flex: 1 1 0;
  min-height: 0;
}

.gp-agent .gp-func-header {
  flex-shrink: 0;
}

.gp-agent-layout {
  flex: 1 1 0;
}

.gp-agent-chat {
  gap: var(--fluid-gap);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .28);
  border-radius: var(--fluid-radius);
  min-width: 0;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .25), 0 4px 20px rgba(var(--ocean-deep-rgb), .04);
  -webkit-overflow-clipping: clip;
  flex-direction: column;
  flex: 1 1 0;
  display: flex;
  overflow: clip;
}

.gp-agent-msg-list {
  overscroll-behavior: contain;
  flex-direction: column;
  flex: 1 1 0;
  gap: 12px;
  min-height: 240px;
  padding: 14px 14px 6px;
  display: flex;
  overflow-y: auto;
}

.gp-agent-empty {
  text-align: center;
  max-width: 340px;
  color: var(--ocean-mid);
  margin: auto;
  padding: 24px 16px;
}

.gp-agent-empty-icon {
  width: 56px;
  height: 56px;
  color: var(--ocean-light);
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .12), rgba(var(--glass-tint-rgb), .2));
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .2), 0 6px 20px rgba(var(--ocean-deep-rgb), .06);
  border-radius: 18px;
  justify-content: center;
  align-items: center;
  margin: 0 auto 14px;
  font-size: 24px;
  display: flex;
}

.gp-agent-empty-title {
  color: var(--ocean-deep);
  margin-bottom: 8px;
  font-size: 1.02rem;
  font-weight: 600;
}

.gp-agent-empty-sub {
  font-size: var(--fluid-font-sm);
  color: var(--ocean-mid);
  margin-bottom: 16px;
  line-height: 1.6;
}

.gp-agent-empty-tips {
  color: var(--ocean-foam);
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  font-size: .78rem;
  display: flex;
}

.gp-agent-empty-tips span {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.gp-agent-empty-tips i {
  color: var(--ocean-light);
}

.gp-agent-msg {
  animation: gp-agent-msg-in var(--dur-3) var(--ease-out-expo, ease-out) backwards;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

@keyframes gp-agent-msg-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gp-agent-msg-user {
  flex-direction: row-reverse;
}

.gp-agent-avatar {
  width: 30px;
  height: 30px;
  color: var(--yue-ui-white, #fff);
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  box-shadow: 0 3px 10px rgba(var(--neon-glow-rgb), .3);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  display: flex;
}

.gp-agent-bubble-wrap {
  min-width: 0;
  max-width: 82%;
}

.gp-agent-msg-user .gp-agent-bubble-wrap {
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

.gp-agent-bubble {
  font-size: var(--fluid-font-base);
  word-break: break-word;
  white-space: pre-wrap;
  border-radius: 16px;
  padding: 9px 13px;
  line-height: 1.55;
}

.gp-agent-msg-agent .gp-agent-bubble {
  background: rgba(var(--glass-tint-rgb), .5);
  border: 1px solid rgba(var(--glass-tint-rgb), .24);
  color: var(--ocean-deep);
  border-top-left-radius: 6px;
}

.gp-agent-msg-user .gp-agent-bubble {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-cyan));
  border: 1px solid rgba(var(--neon-glow-rgb), .3);
  color: var(--yue-ui-white, #fff);
  box-shadow: 0 4px 14px rgba(var(--neon-glow-rgb), .18);
  border-top-right-radius: 6px;
}

.gp-agent-bubble-system {
  font-size: var(--fluid-font-sm);
  background: rgba(var(--error-rgb, 220, 60, 60), .08) !important;
  border-color: rgba(var(--error-rgb, 220, 60, 60), .3) !important;
  color: var(--error, #d84343) !important;
}

.gp-agent-refs {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  display: flex;
}

.gp-agent-refs img {
  object-fit: cover;
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  border-radius: 10px;
  width: 64px;
  height: 64px;
}

.gp-agent-bubble-image {
  background: rgba(var(--glass-tint-rgb), .5);
  border: 1px solid rgba(var(--glass-tint-rgb), .24);
  border-top-left-radius: 6px;
  padding: 10px;
}

.gp-agent-result-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
  display: grid;
}

.gp-agent-result {
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  box-shadow: 0 4px 14px rgba(var(--ocean-deep-rgb), .08);
  transition: transform var(--dur-2) var(--ease-out-expo), box-shadow var(--dur-2) var(--ease-out-expo);
  border-radius: 12px;
  display: block;
  overflow: hidden;
}

.gp-agent-result:hover {
  box-shadow: 0 8px 22px rgba(var(--ocean-deep-rgb), .14);
  transform: translateY(-2px);
}

.gp-agent-result img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  display: block;
}

.gp-agent-bubble-text {
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  line-height: 1.55;
}

.gp-agent-prompt-card {
  background: linear-gradient(135deg, rgba(var(--neon-glow-rgb), .1), rgba(var(--glass-tint-rgb), .35));
  border: 1px solid rgba(var(--neon-glow-rgb), .35);
  box-shadow: 0 6px 22px rgba(var(--neon-glow-rgb), .1);
  border-radius: 6px 16px 16px;
  padding: 12px 14px;
}

.gp-agent-prompt-head {
  font-weight: 600;
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  display: flex;
}

.gp-agent-prompt-head i {
  color: var(--ocean-light);
  filter: drop-shadow(0 0 5px rgba(var(--neon-glow-rgb), .3));
}

.gp-agent-prompt-text {
  color: var(--ocean-mid);
  background: rgba(var(--glass-tint-rgb), .4);
  border: 1px dashed rgba(var(--neon-glow-rgb), .3);
  word-break: break-word;
  white-space: pre-wrap;
  border-radius: 10px;
  max-height: 160px;
  margin-bottom: 10px;
  padding: 8px 10px;
  font-size: .82rem;
  line-height: 1.6;
  overflow-y: auto;
}

.gp-agent-confirm {
  background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-light));
  width: 100%;
  color: var(--yue-ui-white, #fff);
  font-size: var(--fluid-font-base);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--neon-glow-rgb), .3);
  transition: transform var(--dur-2) var(--ease-out-expo), box-shadow var(--dur-2) var(--ease-out-expo), filter var(--dur-2);
  border: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-weight: 600;
  display: inline-flex;
}

.gp-agent-confirm:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 6px 20px rgba(var(--neon-glow-rgb), .4);
  transform: translateY(-1px);
}

.gp-agent-confirm:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.gp-agent-typing {
  align-items: center;
  gap: 5px;
  padding: 12px 14px;
  display: inline-flex;
}

.gp-agent-typing span {
  background: var(--ocean-light);
  border-radius: 50%;
  width: 7px;
  height: 7px;
  animation: 1.2s ease-in-out infinite gp-agent-typing-bounce;
}

.gp-agent-typing span:nth-child(2) {
  animation-delay: .15s;
}

.gp-agent-typing span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes gp-agent-typing-bounce {
  0%, 60%, 100% {
    opacity: .4;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-5px);
  }
}

.gp-agent-input {
  flex-direction: column;
  flex-shrink: 0;
  gap: 8px;
  padding: 0 12px 12px;
  display: flex;
}

.gp-agent-input-refs {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.gp-agent-input-ref {
  position: relative;
}

.gp-agent-input-ref img {
  object-fit: cover;
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  border-radius: 10px;
  width: 48px;
  height: 48px;
}

.gp-agent-input-ref button {
  background: rgba(var(--error-rgb, 220, 60, 60), .9);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  font-size: 9px;
  display: flex;
  position: absolute;
  top: -5px;
  right: -5px;
}

.gp-agent-input-row {
  align-items: flex-end;
  gap: 8px;
  display: flex;
}

.gp-agent-input-btn, .gp-agent-send {
  border: 1px solid rgba(var(--neon-glow-rgb), .3);
  background: rgba(var(--glass-tint-rgb), .5);
  width: 38px;
  height: 38px;
  color: var(--ocean-light);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out-expo), background var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  display: flex;
}

.gp-agent-input-btn:hover:not(:disabled) {
  background: rgba(var(--neon-glow-rgb), .1);
  box-shadow: 0 0 12px rgba(var(--neon-glow-rgb), .15);
}

.gp-agent-input-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.gp-agent-send {
  background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-light));
  color: var(--yue-ui-white, #fff);
  box-shadow: 0 4px 14px rgba(var(--neon-glow-rgb), .3);
  border: none;
}

.gp-agent-send:hover:not(:disabled) {
  box-shadow: 0 6px 18px rgba(var(--neon-glow-rgb), .4);
  transform: translateY(-1px);
}

.gp-agent-send:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.gp-agent-abort {
  border: 1px solid rgba(var(--danger-rgb, 239, 68, 68), .35);
  background: rgba(var(--danger-rgb, 239, 68, 68), .12);
  width: 38px;
  height: 38px;
  color: var(--danger-rgb, #ef4444);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out-expo), background var(--dur-2), box-shadow var(--dur-2);
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  display: flex;
}

.gp-agent-abort:hover {
  background: rgba(var(--danger-rgb, 239, 68, 68), .22);
  box-shadow: 0 0 12px rgba(var(--danger-rgb, 239, 68, 68), .25);
}

.gp-agent-input-text {
  resize: none;
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  background: rgba(var(--glass-tint-rgb), .4);
  min-width: 0;
  font-family: inherit;
  font-size: var(--fluid-font-base);
  color: var(--ocean-deep);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
  border-radius: 12px;
  flex: 1 1 0;
  padding: 9px 12px;
  line-height: 1.5;
}

.gp-agent-input-text:focus {
  border-color: var(--neon-glow);
  box-shadow: 0 0 0 3px rgba(var(--neon-glow-rgb), .12);
  outline: none;
}

.gp-agent-input-text::placeholder {
  color: rgba(var(--ocean-mid-rgb), .5);
}

.gp-agent-input-hint {
  color: var(--ocean-foam);
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: .72rem;
  display: flex;
}

.gp-agent-side {
  gap: var(--fluid-gap);
  flex-direction: column;
  flex: 0 0 276px;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  display: flex;
}

.gp-agent-grow, .gp-agent-sessions {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border: 1px solid rgba(var(--glass-tint-rgb), .28);
  border-radius: var(--fluid-radius);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .18), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .25), 0 4px 20px rgba(var(--ocean-deep-rgb), .04);
  -webkit-overflow-clipping: clip;
  overflow: clip;
}

.gp-agent-grow {
  flex-direction: column;
  flex: 0 auto;
  min-height: 0;
  display: flex;
  overflow-y: auto;
}

.gp-agent-grow-head, .gp-agent-sessions-head {
  font-weight: 600;
  font-size: var(--fluid-font-base);
  color: var(--ocean-mid);
  border-bottom: 1px solid rgba(var(--glass-tint-rgb), .2);
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  padding: 11px 13px;
  display: flex;
}

.gp-agent-grow-head i, .gp-agent-sessions-head i {
  color: var(--ocean-light);
  filter: drop-shadow(0 0 4px rgba(var(--neon-glow-rgb), .25));
}

.gp-agent-grow-badge {
  color: var(--ocean-light);
  background: rgba(var(--neon-glow-rgb), .1);
  border: 1px solid rgba(var(--neon-glow-rgb), .25);
  white-space: nowrap;
  border-radius: 999px;
  margin-left: 0;
  padding: 2px 8px;
  font-size: .68rem;
  font-weight: 600;
}

.gp-agent-grow-body {
  flex-direction: column;
  flex: 1 1 0;
  gap: 8px;
  min-height: 0;
  padding: 10px 12px;
  display: flex;
  overflow-y: auto;
}

.gp-agent-grow-module {
  border: 1px solid rgba(var(--glass-tint-rgb), .22);
  background: rgba(var(--glass-tint-rgb), .3);
  transition: border-color var(--dur-3), box-shadow var(--dur-3), background var(--dur-3);
  border-radius: 12px;
  padding: 8px 10px;
}

.gp-agent-grow-module.filled {
  border-color: rgba(var(--neon-glow-rgb), .4);
  background: rgba(var(--neon-glow-rgb), .06);
  box-shadow: 0 0 14px rgba(var(--neon-glow-rgb), .08);
}

.gp-agent-grow-module-label {
  color: var(--ocean-foam);
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: .74rem;
  font-weight: 600;
  display: flex;
}

.gp-agent-grow-module.filled .gp-agent-grow-module-label {
  color: var(--ocean-light);
}

.gp-agent-grow-module-label i {
  font-size: .72rem;
}

.gp-agent-grow-module-val {
  color: var(--ocean-deep);
  word-break: break-word;
  white-space: pre-wrap;
  font-size: .8rem;
  line-height: 1.5;
}

.gp-agent-grow-module-placeholder {
  color: rgba(var(--ocean-mid-rgb), .4);
  font-style: italic;
}

.gp-agent-grow-final {
  border-top: 1px solid rgba(var(--glass-tint-rgb), .2);
  flex-shrink: 0;
  padding: 10px 12px;
}

.gp-agent-grow-final-label {
  color: var(--ocean-light);
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font-size: .74rem;
  font-weight: 600;
  display: flex;
}

.gp-agent-grow-final-text {
  color: var(--ocean-mid);
  background: rgba(var(--neon-glow-rgb), .06);
  border: 1px dashed rgba(var(--neon-glow-rgb), .3);
  word-break: break-word;
  white-space: pre-wrap;
  border-radius: 10px;
  max-height: 120px;
  padding: 7px 9px;
  font-size: .76rem;
  line-height: 1.55;
  overflow-y: auto;
}

.gp-agent-sessions {
  flex-direction: column;
  flex: 1 1 0;
  min-height: 140px;
  display: flex;
}

.gp-agent-sessions-head {
  justify-content: flex-start;
}

.gp-agent-sessions-new {
  background: rgba(var(--neon-glow-rgb), .1);
  width: 24px;
  height: 24px;
  color: var(--ocean-light);
  cursor: pointer;
  transition: background var(--dur-2), transform var(--dur-2);
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  font-size: 11px;
  display: flex;
}

.gp-agent-sessions-new:hover {
  background: rgba(var(--neon-glow-rgb), .2);
  transform: scale(1.06);
}

.gp-agent-sessions-list {
  flex-direction: column;
  flex: 1 1 0;
  gap: 4px;
  min-height: 0;
  padding: 8px 10px 10px;
  display: flex;
  overflow-y: auto;
}

.gp-agent-sessions-empty {
  color: var(--ocean-foam);
  text-align: center;
  padding: 12px 0;
  font-size: .76rem;
}

.gp-agent-session {
  cursor: pointer;
  transition: background var(--dur-2), border-color var(--dur-2);
  border: 1px solid #0000;
  border-radius: 10px;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  display: flex;
}

.gp-agent-session:hover {
  background: rgba(var(--glass-tint-rgb), .4);
}

.gp-agent-session.active {
  background: rgba(var(--neon-glow-rgb), .08);
  border-color: rgba(var(--neon-glow-rgb), .3);
}

.gp-agent-session > i {
  color: var(--ocean-foam);
  flex-shrink: 0;
  font-size: .8rem;
}

.gp-agent-session.active > i {
  color: var(--ocean-light);
}

.gp-agent-session-info {
  flex-direction: column;
  flex: 1 1 0;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.gp-agent-session-title {
  color: var(--ocean-mid);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .78rem;
  overflow: hidden;
}

.gp-agent-session.active .gp-agent-session-title {
  color: var(--ocean-deep);
  font-weight: 600;
}

.gp-agent-session-meta {
  color: rgba(var(--ocean-mid-rgb), .55);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .66rem;
  overflow: hidden;
}

.gp-agent-session-dot {
  background: var(--ocean-light);
  width: 7px;
  height: 7px;
  box-shadow: 0 0 6px rgba(var(--neon-glow-rgb), .5);
  border-radius: 50%;
  flex-shrink: 0;
}

.gp-agent-session-del {
  width: 20px;
  height: 20px;
  color: var(--ocean-foam);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-2), background var(--dur-2), color var(--dur-2);
  background: none;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  display: flex;
  position: relative;
}

.gp-agent-session:hover .gp-agent-session-del {
  opacity: 1;
}

.gp-agent-session-del:hover {
  background: rgba(var(--error-rgb, 220, 60, 60), .12);
  color: var(--error, #d84343);
}

.gp-agent-session-del.confirming {
  opacity: 1;
  background: rgba(var(--error-rgb, 220, 60, 60), .16);
  color: var(--error, #d84343);
}

.gp-agent-session-del.confirming:after {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 5px rgba(var(--error-rgb, 220, 60, 60), .25);
  opacity: 0;
  animation: 1s ease-in-out infinite gp-agent-pulse-soft;
  position: absolute;
  inset: 0;
}

.gp-agent-switching {
  color: var(--ocean-foam);
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  font-size: .76rem;
  display: flex;
}

.gp-agent-switching i {
  color: var(--ocean-light);
}

.gp-agent-msg-meta {
  opacity: 0;
  transition: opacity var(--dur-2);
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  display: flex;
}

.gp-agent-msg:hover .gp-agent-msg-meta, .gp-agent-bubble-image .gp-agent-msg-meta {
  opacity: 1;
}

.gp-agent-msg-time {
  color: rgba(var(--ocean-mid-rgb), .5);
  font-size: .64rem;
}

.gp-agent-act {
  color: var(--ocean-foam);
  cursor: pointer;
  transition: background var(--dur-2), color var(--dur-2);
  background: none;
  border: none;
  border-radius: 7px;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-size: .68rem;
  display: inline-flex;
}

.gp-agent-act i {
  font-size: .66rem;
}

.gp-agent-act:hover:not(:disabled) {
  background: rgba(var(--neon-glow-rgb), .1);
  color: var(--ocean-light);
}

.gp-agent-act:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.gp-agent-act-retry {
  color: var(--ocean-light);
}

.gp-agent-jump {
  border: 1px solid rgba(var(--glass-tint-rgb), .35);
  background: rgba(var(--glass-tint-rgb), .85);
  width: 32px;
  height: 32px;
  -webkit-backdrop-filter: blur(var(--glass-blur-near));
  backdrop-filter: blur(var(--glass-blur-near));
  color: var(--ocean-mid);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--ocean-deep-rgb), .12);
  z-index: 5;
  transition: transform var(--dur-2) var(--ease-out-expo), color var(--dur-2), box-shadow var(--dur-2);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: 12px;
  font-size: .76rem;
  display: flex;
  position: sticky;
  bottom: 10px;
}

.gp-agent-jump:hover {
  color: var(--ocean-light);
  box-shadow: 0 6px 20px rgba(var(--neon-glow-rgb), .2);
  transform: translateY(-2px);
}

.gp-agent-chips {
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 2px;
  display: flex;
}

.gp-agent-chip {
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  background: rgba(var(--glass-tint-rgb), .4);
  color: var(--ocean-mid);
  cursor: pointer;
  transition: border-color var(--dur-2), background var(--dur-2), color var(--dur-2), transform var(--dur-2) var(--ease-out-expo);
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: .72rem;
  display: inline-flex;
}

.gp-agent-chip i {
  color: var(--ocean-light);
  font-size: .66rem;
}

.gp-agent-chip:hover {
  border-color: rgba(var(--neon-glow-rgb), .4);
  background: rgba(var(--neon-glow-rgb), .08);
  color: var(--ocean-deep);
  transform: translateY(-1px);
}

.gp-agent-result {
  position: relative;
}

.gp-agent-img-actions {
  opacity: 0;
  transition: opacity var(--dur-2);
  gap: 5px;
  display: flex;
  position: absolute;
  top: 6px;
  right: 6px;
}

.gp-agent-result:hover .gp-agent-img-actions {
  opacity: 1;
}

.gp-agent-img-actions button {
  border: 1px solid rgba(var(--glass-tint-rgb), .4);
  background: rgba(var(--glass-tint-rgb), .85);
  width: 26px;
  height: 26px;
  -webkit-backdrop-filter: blur(var(--glass-blur-near));
  backdrop-filter: blur(var(--glass-blur-near));
  color: var(--ocean-mid);
  cursor: pointer;
  transition: color var(--dur-2), background var(--dur-2);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  font-size: .7rem;
  display: flex;
}

.gp-agent-img-actions button:hover {
  color: var(--ocean-light);
  background: rgba(var(--neon-glow-rgb), .15);
}

.gp-agent-prompt-meta {
  color: var(--ocean-foam);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: .68rem;
  display: flex;
}

.gp-agent-prompt-meta i {
  color: var(--ocean-light);
  font-size: .66rem;
}

.gp-agent-prompt-head .gp-agent-act {
  margin-left: auto;
}

.gp-agent-grow-edit-btn {
  width: 20px;
  height: 20px;
  color: var(--ocean-foam);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-2), background var(--dur-2), color var(--dur-2);
  background: none;
  border: none;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  font-size: .62rem;
  display: inline-flex;
}

.gp-agent-grow-module:hover .gp-agent-grow-edit-btn, .gp-agent-grow-final-label:hover .gp-agent-grow-edit-btn {
  opacity: 1;
}

.gp-agent-grow-edit-btn:hover {
  background: rgba(var(--neon-glow-rgb), .12);
  color: var(--ocean-light);
}

.gp-agent-grow-lock-btn {
  width: 20px;
  height: 20px;
  color: var(--ocean-foam);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-2), background var(--dur-2), color var(--dur-2);
  background: none;
  border: none;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  font-size: .62rem;
  display: inline-flex;
}

.gp-agent-grow-lock-btn + .gp-agent-grow-edit-btn {
  margin-left: 0;
}

.gp-agent-grow-module:hover .gp-agent-grow-lock-btn, .gp-agent-grow-final-label:hover .gp-agent-grow-lock-btn {
  opacity: 1;
}

.gp-agent-grow-lock-btn.locked {
  opacity: 1;
  color: rgba(var(--neon-glow-rgb), .9);
}

.gp-agent-grow-lock-btn:hover {
  background: rgba(var(--neon-glow-rgb), .12);
  color: var(--ocean-light);
}

.gp-agent-grow-module.editing {
  border-color: rgba(var(--neon-glow-rgb), .55);
  box-shadow: 0 0 0 3px rgba(var(--neon-glow-rgb), .1);
}

.gp-agent-grow-edit {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.gp-agent-grow-edit textarea {
  resize: vertical;
  border: 1px solid rgba(var(--glass-tint-rgb), .35);
  background: rgba(var(--glass-tint-rgb), .5);
  width: 100%;
  color: var(--ocean-deep);
  border-radius: 8px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: .76rem;
  line-height: 1.5;
}

.gp-agent-grow-edit textarea:focus {
  border-color: rgba(var(--neon-glow-rgb), .55);
  outline: none;
}

.gp-agent-grow-edit-actions {
  gap: 6px;
  display: flex;
}

.gp-agent-grow-edit-actions button {
  border: 1px solid rgba(var(--glass-tint-rgb), .3);
  background: rgba(var(--glass-tint-rgb), .5);
  color: var(--ocean-mid);
  cursor: pointer;
  transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
  border-radius: 7px;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: .68rem;
  display: inline-flex;
}

.gp-agent-grow-edit-actions button:first-child {
  border-color: rgba(var(--neon-glow-rgb), .4);
  color: var(--ocean-light);
}

.gp-agent-grow-edit-actions button:first-child:hover {
  background: rgba(var(--neon-glow-rgb), .12);
}

.gp-agent-grow-edit-actions button:hover {
  background: rgba(var(--glass-tint-rgb), .8);
}

@keyframes gp-agent-pulse-soft {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.gp-agent-netbar {
  border: 1px solid rgba(var(--warning-rgb, 255, 193, 7), .28);
  border-left: 3px solid rgba(var(--warning-rgb, 255, 193, 7), .75);
  background: rgba(var(--glass-tint-rgb), .6);
  -webkit-backdrop-filter: blur(var(--glass-blur-near));
  backdrop-filter: blur(var(--glass-blur-near));
  color: var(--warning, #f5a623);
  animation: gp-agent-fade-in var(--dur-3) ease-out;
  transition: opacity var(--dur-3) ease-out;
  border-radius: 10px;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: .74rem;
  display: flex;
}

.gp-agent-netbar.leaving {
  opacity: 0;
}

.gp-agent-netbar i {
  font-size: .76rem;
}

.gp-agent-empty-examples {
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  display: flex;
}

.gp-agent-skeleton-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
  display: grid;
}

.gp-agent-skeleton-cell {
  aspect-ratio: 1;
  border: 1px solid rgba(var(--neon-glow-rgb), .18);
  background: rgba(var(--neon-glow-rgb), .08);
  border-radius: 12px;
  animation: 2s ease-in-out infinite alternate gp-agent-skeleton-breath;
  overflow: hidden;
}

.gp-agent-skeleton-cell.done {
  border-color: rgba(var(--glass-tint-rgb), .3);
  background: none;
  animation: none;
}

.gp-agent-skeleton-cell.done img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.gp-agent-skeleton-note {
  color: var(--ocean-mid);
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  display: flex;
}

.gp-agent-skeleton-note i {
  color: var(--ocean-light);
  font-size: .7rem;
}

@keyframes gp-agent-skeleton-breath {
  from {
    opacity: .6;
  }

  to {
    opacity: 1;
  }
}

@keyframes gp-agent-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.gp-agent-grow-dots {
  transition: gap var(--dur-3) var(--ease-out-expo, ease-out);
  align-items: center;
  gap: 5px;
  margin-left: auto;
  display: flex;
}

.gp-agent-grow-dots.all {
  gap: 2px;
}

.gp-agent-grow-dot {
  background: rgba(var(--ocean-mid-rgb), .25);
  width: 5px;
  height: 5px;
  transition: background var(--dur-3), box-shadow var(--dur-3);
  border-radius: 50%;
}

.gp-agent-grow-dot.on {
  background: var(--ocean-light);
  box-shadow: 0 0 5px rgba(var(--neon-glow-rgb), .45);
}

.gp-agent-grow-ready {
  color: var(--ocean-light);
  background: rgba(var(--neon-glow-rgb), .08);
  border: 1px solid rgba(var(--neon-glow-rgb), .4);
  white-space: nowrap;
  animation: gp-agent-fade-in var(--dur-4) ease-out backwards;
  border-radius: 999px;
  flex-shrink: 0;
  align-items: center;
  padding: 2px 7px;
  font-size: .6rem;
  font-weight: 600;
  display: inline-flex;
}

.gp-agent-prompt-version {
  color: var(--ocean-foam);
  border: 1px solid rgba(var(--glass-tint-rgb), .35);
  background: rgba(var(--glass-tint-rgb), .4);
  border-radius: 999px;
  flex-shrink: 0;
  padding: 1px 7px;
  font-size: .64rem;
  font-weight: 600;
}

.gp-agent-revert {
  color: var(--ocean-foam);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-2), background var(--dur-2), color var(--dur-2);
  background: none;
  border: none;
  border-radius: 7px;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-size: .68rem;
  display: inline-flex;
}

.gp-agent-prompt-card:hover .gp-agent-revert {
  opacity: 1;
}

.gp-agent-revert:hover {
  background: rgba(var(--neon-glow-rgb), .1);
  color: var(--ocean-light);
}

.gp-agent-revert i {
  font-size: .64rem;
}

.gp-agent-variant-tabs {
  gap: 6px;
  margin-bottom: 8px;
  display: flex;
}

.gp-agent-variant-tab {
  border: 1px solid rgba(var(--glass-tint-rgb), .35);
  background: rgba(var(--glass-tint-rgb), .45);
  color: var(--ocean-mid);
  cursor: pointer;
  transition: border-color var(--dur-2), color var(--dur-2), background var(--dur-2);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: .7rem;
  font-weight: 600;
}

.gp-agent-variant-tab.active {
  border-color: rgba(var(--neon-glow-rgb), .55);
  color: var(--ocean-light);
  background: rgba(var(--neon-glow-rgb), .1);
}

.gp-agent-variant-tab:hover:not(.active) {
  border-color: rgba(var(--neon-glow-rgb), .3);
}

.gp-agent-batch-credits {
  color: var(--ocean-foam);
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  font-size: .64rem;
  display: inline-flex;
}

.gp-agent-batch-credits i {
  color: var(--ocean-light);
  font-size: .62rem;
}

@media (prefers-reduced-motion: reduce) {
  .gp-agent-msg, .gp-agent-typing span, .gp-agent-session-del.confirming, .gp-agent-jump, .gp-agent-chip, .gp-agent-grow-module, .gp-agent-img-actions, .gp-agent-netbar, .gp-agent-skeleton-cell, .gp-agent-grow-dots, .gp-agent-grow-dot, .gp-agent-grow-ready, .gp-agent-revert, .gp-agent-variant-tab {
    transition: none !important;
    animation: none !important;
  }

  .gp-agent-jump:hover, .gp-agent-chip:hover {
    transform: none !important;
  }

  .gp-agent-revert {
    opacity: 1;
  }

  .gp-agent-skeleton-cell {
    opacity: .85;
  }
}

@media (max-width: 860px) {
  .gp-agent-layout {
    flex-direction: column;
  }

  .gp-agent-side {
    flex: none;
    width: 100%;
    max-height: none;
  }

  .gp-agent-grow {
    max-height: 320px;
  }

  .gp-agent-msg-list {
    max-height: 420px;
  }
}

.pf-toolbar {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  display: flex;
}

.pf-generate-btn {
  color: var(--yue-ui-white, #fff);
  background: linear-gradient(135deg, var(--yue-ui-amber-400, #f59e0b), var(--yue-ui-pink-400, #ec4899));
  cursor: pointer;
  transition: transform var(--dur-1) ease, box-shadow var(--dur-2) ease, opacity var(--dur-1) ease;
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 14px #f59e0b38;
}

.pf-generate-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px #f59e0b4d;
}

.pf-generate-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.pf-stop-btn {
  background: linear-gradient(135deg, var(--yue-ui-rose-400, #fb7185), var(--yue-ui-rose-500, #f43f5e));
  box-shadow: 0 4px 14px #f43f5e38;
}

.pf-collapse-all {
  border: 1px solid var(--border-color, rgba(var(--yue-ui-black-rgb), .12));
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-1) ease;
  background: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
}

.pf-collapse-all:hover:not(:disabled) {
  color: var(--yue-ui-purple-500, #8b5cf6);
  border-color: var(--yue-ui-purple-400, #a78bfa);
}

.pf-collapse-all:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.pf-toolbar-meta {
  color: var(--text-tertiary);
  font-size: 12px;
}

.pf-progress {
  margin-bottom: 10px;
}

.pf-progress-track {
  background: var(--yue-ui-black, #000);
  border-radius: 2px;
  height: 4px;
}

@supports (color: color-mix(in lab, red, red)) {
  .pf-progress-track {
    background: color-mix(in srgb, var(--yue-ui-black, #000) 8%, transparent);
  }
}

.pf-progress-track {
  overflow: hidden;
}

.pf-progress-fill {
  background: linear-gradient(90deg, var(--yue-ui-amber-400, #f59e0b), var(--yue-ui-pink-400, #ec4899));
  height: 100%;
  transition: width var(--dur-3) ease;
  border-radius: 2px;
}

.pf-progress-text {
  color: var(--yue-ui-amber-500, #f59e0b);
  margin: 6px 0 0;
  font-size: 11px;
}

.pf-stale-badge {
  color: var(--yue-ui-amber-600, #d97706);
  background: var(--yue-ui-amber-400, #f59e0b);
  border-radius: 8px;
  margin: 0 0 10px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 600;
}

@supports (color: color-mix(in lab, red, red)) {
  .pf-stale-badge {
    background: color-mix(in srgb, var(--yue-ui-amber-400, #f59e0b) 10%, transparent);
  }
}

.pf-stale-badge {
  border: 1px solid var(--yue-ui-amber-400, #f59e0b);
}

@supports (color: color-mix(in lab, red, red)) {
  .pf-stale-badge {
    border: 1px solid color-mix(in srgb, var(--yue-ui-amber-400, #f59e0b) 25%, transparent);
  }
}

.pf-mode-toggle {
  gap: 8px;
  margin-bottom: 10px;
  display: flex;
}

.pf-mode-btn {
  border: 1px solid var(--border-color, rgba(var(--yue-ui-black-rgb), .1));
  color: var(--text-secondary);
  background: var(--bg-elevated, var(--yue-ui-white));
  border-radius: 10px;
  flex: 1;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
}

@supports (color: color-mix(in lab, red, red)) {
  .pf-mode-btn {
    background: color-mix(in srgb, var(--bg-elevated, var(--yue-ui-white)) 70%, transparent);
  }
}

.pf-mode-btn {
  cursor: pointer;
  transition: all var(--dur-2) ease;
}

.pf-mode-btn:hover {
  color: var(--text-primary);
  border-color: var(--yue-ui-amber-400, #fbbf24);
}

.pf-mode-btn.active {
  color: var(--yue-ui-white);
  background: linear-gradient(135deg, var(--yue-ui-amber-400, #f59e0b), var(--yue-ui-pink-400));
  border-color: #0000;
  box-shadow: 0 4px 14px #f59e0b40;
}

.pf-mode-hint {
  color: var(--text-tertiary);
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.5;
}

.pf-variation {
  background: var(--bg-elevated, var(--yue-ui-white));
  border-radius: 10px;
  padding: 10px 12px;
}

@supports (color: color-mix(in lab, red, red)) {
  .pf-variation {
    background: color-mix(in srgb, var(--bg-elevated, var(--yue-ui-white)) 70%, transparent);
  }
}

.pf-variation {
  border: 1px solid var(--border-color, rgba(var(--yue-ui-black-rgb), .07));
}

.pf-variation-head {
  color: var(--text-primary);
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.pf-variation-head label {
  cursor: pointer;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.pf-variation-head span {
  color: var(--yue-ui-amber-400, #f59e0b);
}

.pf-variation input[type="range"] {
  width: 100%;
  accent-color: var(--yue-ui-amber-400, #f59e0b);
  margin: 8px 0 4px;
}

.pf-variation-hint {
  color: var(--text-tertiary);
  margin: 0;
  font-size: 11px;
}

.pf-guide {
  margin-top: 12px;
}

.pf-guide-label {
  color: var(--text-primary);
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.pf-guide-textarea {
  border: 1px solid var(--border-color, rgba(var(--yue-ui-black-rgb), .1));
  background: var(--bg-input, var(--yue-ui-white));
  width: 100%;
  color: var(--text-primary);
  resize: vertical;
  border-radius: 9px;
  margin-top: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.55;
}

.pf-guide-textarea:focus {
  border-color: var(--yue-ui-amber-400, #f59e0b);
  outline: none;
}

.pf-empty {
  color: var(--text-tertiary);
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.pf-plan-card {
  background: var(--bg-elevated, var(--yue-ui-white));
  border-radius: 12px;
}

@supports (color: color-mix(in lab, red, red)) {
  .pf-plan-card {
    background: color-mix(in srgb, var(--bg-elevated, var(--yue-ui-white)) 75%, transparent);
  }
}

.pf-plan-card {
  border: 1px solid var(--border-color, rgba(var(--yue-ui-black-rgb), .08));
  overflow: hidden;
}

.pf-plan-card + .pf-plan-card {
  margin-top: 8px;
}

.pf-plan-card.open {
  border-color: var(--yue-ui-purple-400, #a78bfa);
}

@supports (color: color-mix(in lab, red, red)) {
  .pf-plan-card.open {
    border-color: color-mix(in srgb, var(--yue-ui-purple-400, #a78bfa) 35%, transparent);
  }
}

.pf-plan-toggle {
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background var(--dur-1) ease;
  background: none;
  border: none;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  display: flex;
}

.pf-plan-toggle:hover:not(:disabled) {
  background: var(--yue-ui-purple-400, #a78bfa);
}

@supports (color: color-mix(in lab, red, red)) {
  .pf-plan-toggle:hover:not(:disabled) {
    background: color-mix(in srgb, var(--yue-ui-purple-400, #a78bfa) 6%, transparent);
  }
}

.pf-plan-toggle:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.pf-plan-thumb {
  object-fit: cover;
  border: 1px solid var(--border-color, rgba(var(--yue-ui-black-rgb), .1));
  border-radius: 8px;
  flex: none;
  width: 36px;
  height: 36px;
}

.pf-plan-title {
  color: var(--text-primary);
  flex: none;
  font-size: 12px;
  font-weight: 600;
}

.pf-plan-summary {
  min-width: 0;
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  font-size: 11px;
  overflow: hidden;
}

.pf-plan-count {
  color: var(--yue-ui-purple-500, #8b5cf6);
  background: var(--yue-ui-purple-400, #a78bfa);
  flex: none;
  font-size: 11px;
  font-weight: 600;
}

@supports (color: color-mix(in lab, red, red)) {
  .pf-plan-count {
    background: color-mix(in srgb, var(--yue-ui-purple-400, #a78bfa) 10%, transparent);
  }
}

.pf-plan-count {
  border-radius: 999px;
  padding: 2px 8px;
}

.pf-plan-chevron {
  color: var(--text-tertiary);
  flex: none;
  font-size: 10px;
}

.pf-plan-head {
  align-items: flex-start;
  gap: 10px;
  padding: 0 12px;
  display: flex;
}

.pf-plan-meta {
  flex-direction: column;
  flex: 1;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.pf-plan-style, .pf-plan-bg {
  border: 1px solid var(--border-color, rgba(var(--yue-ui-black-rgb), .1));
  background: var(--bg-input, var(--yue-ui-white));
  width: 100%;
  color: var(--text-primary);
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 11px;
}

.pf-plan-style:focus, .pf-plan-bg:focus {
  border-color: var(--yue-ui-purple-400, #a78bfa);
  outline: none;
}

.pf-variants {
  flex-direction: column;
  gap: 8px;
  margin: 8px 12px 10px;
  display: flex;
}

.pf-variant-card {
  background: var(--bg-secondary, #fafafa);
  border-radius: 10px;
  padding: 10px;
}

@supports (color: color-mix(in lab, red, red)) {
  .pf-variant-card {
    background: color-mix(in srgb, var(--bg-secondary, #fafafa) 60%, transparent);
  }
}

.pf-variant-card {
  border: 1px solid var(--border-color, rgba(var(--yue-ui-black-rgb), .07));
}

.pf-variant-head {
  color: var(--text-secondary);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.pf-variant-remove {
  color: var(--yue-ui-rose-400, #fb7185);
  cursor: pointer;
  transition: background var(--dur-1) ease;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
}

.pf-variant-remove:hover {
  background: var(--yue-ui-rose-400, #fb7185);
}

@supports (color: color-mix(in lab, red, red)) {
  .pf-variant-remove:hover {
    background: color-mix(in srgb, var(--yue-ui-rose-400, #fb7185) 12%, transparent);
  }
}

.pf-variant-changes, .pf-variant-prompt {
  border: 1px solid var(--border-color, rgba(var(--yue-ui-black-rgb), .1));
  background: var(--bg-input, var(--yue-ui-white));
  width: 100%;
  color: var(--text-primary);
  resize: vertical;
  border-radius: 8px;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.55;
}

.pf-variant-changes {
  margin-bottom: 6px;
}

.pf-variant-changes:focus, .pf-variant-prompt:focus {
  border-color: var(--yue-ui-purple-400, #a78bfa);
  outline: none;
}

.pf-load-more {
  border: 1px dashed var(--border-color, rgba(var(--yue-ui-black-rgb), .18));
  width: 100%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-2) ease;
  background: none;
  border-radius: 10px;
  margin-top: 10px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
}

.pf-load-more:hover {
  color: var(--yue-ui-purple-500, #8b5cf6);
  border-color: var(--yue-ui-purple-400, #a78bfa);
}

.img2v-panel .gp-comfy-notice {
  margin-bottom: 14px;
}

.img2v-zones {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 2px;
  display: grid;
}

.img2v-zone {
  min-width: 0;
  transition: border-color var(--dur-2) ease, transform var(--dur-2) ease;
  border-radius: 14px;
}

.img2v-zone.material-drop-active {
  border-color: var(--neon-glow, rgba(var(--bright-cyan-rgb), .55));
}

.framechain-zone {
  min-width: 0;
  transition: border-color var(--dur-2) ease;
  border-radius: 14px;
}

.framechain-zone.material-drop-active {
  border-color: var(--neon-glow, rgba(var(--bright-cyan-rgb), .55));
}

.framechain-chain-hint {
  margin-top: 6px;
}

.img2v-zone .gp-section {
  height: 100%;
}

.img2v-prompt {
  min-height: 150px;
  font-size: .86rem;
}

.img2v-presets {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  display: flex;
}

.img2v-presets-hint {
  color: var(--ocean-foam);
  opacity: .85;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: .74rem;
  display: flex;
}

.img2v-presets-hint i {
  color: var(--neon-glow);
}

.img2v-recommend {
  border-top: 1px dashed rgba(var(--glass-tint-rgb), .22);
  margin-top: 16px;
  padding-top: 14px;
}

.img2v-recommend-head {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.img2v-recommend-tip {
  color: var(--ocean-foam);
  opacity: .9;
  font-size: .76rem;
}

.img2v-recommend-intent {
  background: var(--neon-glow, #22d3ee);
  border-radius: 10px;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 8px 12px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .img2v-recommend-intent {
    background: color-mix(in srgb, var(--neon-glow, #22d3ee) 8%, transparent);
  }
}

.img2v-recommend-intent {
  border: 1px solid var(--neon-glow, #22d3ee);
}

@supports (color: color-mix(in lab, red, red)) {
  .img2v-recommend-intent {
    border: 1px solid color-mix(in srgb, var(--neon-glow, #22d3ee) 18%, transparent);
  }
}

.img2v-recommend-intent {
  color: var(--ocean-mid);
  font-size: .8rem;
  font-weight: 600;
}

.img2v-recommend-intent i {
  color: var(--neon-glow);
}

.img2v-recommend-list {
  max-height: 420px;
  margin-top: 12px;
  padding-right: 4px;
  overflow-y: auto;
}

@media (max-width: 900px) {
  .img2v-zones {
    grid-template-columns: 1fr;
  }
}

.img2v-zones-single {
  grid-template-columns: 1fr;
}

.gp-panel button:focus-visible, .gp-panel [role="button"]:focus-visible, .gp-actions button:focus-visible, .gp-upload button:focus-visible, .gp-func-header button:focus-visible, .gp-section button:focus-visible, .gp-chip:focus-visible, .gp-btn:focus-visible, .gp-btn-gen:focus-visible, .gp-btn-abort:focus-visible, .gp-btn-clear:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #0a8fd1bf;
}

.gp-select:focus-visible, .gp-input:focus-visible, .gp-textarea:focus-visible {
  outline-offset: 1px;
  outline: 2px solid #0a8fd180;
}

.gp-upload-clear {
  border: 1px solid rgba(var(--error-rgb, 220, 38, 38), .25);
  background: rgba(var(--error-rgb, 220, 38, 38), .08);
  color: var(--error, #dc2626);
  font-size: var(--fluid-font-xs, .72rem);
  cursor: pointer;
  transition: background var(--dur-1, var(--dur-1)) var(--ease-pro, ease), border-color var(--dur-1, var(--dur-1)) var(--ease-pro, ease);
  border-radius: 8px;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: inherit;
  font-weight: 600;
  display: inline-flex;
}

.gp-upload-clear:hover {
  background: rgba(var(--error-rgb, 220, 38, 38), .16);
  border-color: rgba(var(--error-rgb, 220, 38, 38), .45);
}

.gp-upload-clear:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.gp-upload-clear:focus-visible {
  outline: 2px solid rgba(var(--error-rgb, 220, 38, 38), .5);
  outline-offset: 1px;
}

.gp-upload-clear-confirm {
  color: var(--error, #dc2626);
  border-color: rgba(var(--error-rgb, 220, 38, 38), .45);
}

.gp-upload-clear-confirm:hover {
  background: rgba(var(--error-rgb, 220, 38, 38), .12);
}

.gp-upload-footer {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.gp-count-custom-label {
  color: var(--text-dim, #96afd2bf);
  opacity: .85;
  -webkit-user-select: none;
  user-select: none;
  flex: none;
  margin-left: 2px;
  font-size: .72rem;
}

.ms-dropdown {
  min-width: 280px;
  max-width: min(560px, 100vw - 16px);
  width: auto !important;
}

.ms-dropdown-body {
  align-items: stretch;
  gap: 0;
  display: flex;
  overflow: hidden;
}

.ms-list {
  min-width: 0;
  max-height: inherit;
  border-right: 1px solid #94acd61f;
  flex: auto;
  overflow-y: auto;
}

.ms-option {
  width: 100%;
  color: var(--ocean-deep);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-1, .15s) ease;
  background: none;
  border: none;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  display: flex;
}

.ms-option:hover, .ms-option:focus-visible {
  background: rgba(var(--neon-glow-rgb), .1);
  outline: none;
}

.ms-option.active {
  color: var(--ocean-light);
}

.ms-option-main {
  flex-direction: column;
  flex: auto;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.ms-option-label {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
}

.ms-option-price {
  color: var(--ocean-light);
  font-size: 11px;
  font-weight: 700;
}

.ms-option-badge {
  background: rgba(var(--neon-glow-rgb), .12);
  color: var(--ocean-light);
  white-space: nowrap;
  border-radius: 999px;
  flex: none;
  padding: 3px 6px;
  font-size: 10px;
  line-height: 1;
}

.ms-badge-quality {
  color: var(--golden);
  background: #d1a84b24;
}

.ms-detail {
  background: rgba(var(--neon-glow-rgb), .07);
  border-left: 1px solid rgba(var(--neon-glow-rgb), .14);
  flex-direction: column;
  flex: 0 0 236px;
  gap: 8px;
  max-width: 236px;
  padding: 12px 14px;
  display: flex;
  overflow-y: auto;
}

.ms-detail-name {
  color: var(--ocean-deep);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.ms-detail-tagline {
  color: var(--ocean-mid);
  font-size: 11.5px;
  line-height: 1.55;
}

.ms-meta {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.ms-meta-chip {
  border: 1px solid rgba(var(--neon-glow-rgb), .25);
  color: var(--ocean-mid);
  white-space: nowrap;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  line-height: 1;
}

.ms-meta-price {
  color: var(--golden);
  border-color: #d1a84b73;
  font-weight: 700;
}

.ms-meta-alpha {
  color: var(--golden);
  border-color: #d1a84b66;
}

.ms-detail-points {
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.ms-detail-points li {
  color: var(--ocean-mid);
  padding-left: 12px;
  font-size: 11.5px;
  line-height: 1.5;
  position: relative;
}

.ms-detail-points li:before {
  content: "▸";
  color: var(--ocean-light);
  position: absolute;
  left: 0;
}

@keyframes pasteRowFlash {
  0% {
    background: rgba(var(--accent-cyan-rgb, 56, 189, 248), .3);
  }

  100% {
    background: none;
  }
}

.infringement-row.paste-flash-row > td {
  animation: 1.6s ease-out pasteRowFlash;
}

.gbi-credit-token {
  opacity: .72;
  white-space: nowrap;
  font-size: 10.5px;
}

.left-island-stack {
  flex-direction: column;
  flex: 0 auto;
  align-self: stretch;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  margin: 12px 0 12px 12px;
  display: flex;
}

.island-gen-mode .left-island-stack {
  margin: 0;
}

.material-island {
  opacity: 0;
  width: 0;
  box-shadow: none;
  z-index: 6;
  transition: width .5s var(--ease-spring), opacity var(--dur-3) var(--ease-out-expo), margin .5s var(--ease-spring);
  background: none;
  border-radius: 0;
  flex-shrink: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.material-island.open {
  opacity: 1;
  border-radius: var(--radius-xl);
  background: var(--surface-glass-strong);
  width: 100%;
  min-height: 0;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: var(--shadow-card-hover), 0 0 0 1px var(--border-subtle), 0 0 60px rgba(var(--neon-glow-rgb), .08);
  flex: 1;
  overflow: clip;
}

.material-island.open.collapsed {
  flex: none;
  width: 44px;
  min-height: 0;
}

.material-island-inner {
  box-sizing: border-box;
  flex-direction: column;
  flex-shrink: 0;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 18px 18px 14px;
  display: flex;
  overflow: hidden;
}

.material-island.open.collapsed .material-island-inner {
  display: none;
}

.material-island-expand-btn {
  cursor: pointer;
  width: 44px;
  height: 100%;
  color: var(--ocean-light);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  box-sizing: border-box;
  transition: color var(--transition-fast);
  background: none;
  border: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-size: .65rem;
  font-weight: 600;
  display: flex;
}

.material-island-expand-btn:hover {
  color: var(--neon-glow);
}

.material-island-expand-btn svg {
  writing-mode: horizontal-tb;
}

.material-island-header {
  border-bottom: 1px solid rgba(var(--ocean-deep-rgb), .06);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5px;
  display: flex;
}

.material-island-title {
  color: var(--ocean-deep);
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  display: flex;
}

.material-island-title svg {
  color: var(--ocean-light);
}

.material-island-count {
  background: rgba(var(--ocean-cyan-rgb), .1);
  color: var(--ocean-light);
  border-radius: 100px;
  padding: 2px 10px;
  font-size: .6rem;
  font-weight: 600;
  line-height: 16px;
}

.material-island-actions {
  align-items: center;
  gap: 4px;
  display: flex;
}

.material-island-icon-btn, .material-island-settings-btn {
  cursor: pointer;
  width: 28px;
  height: 28px;
  color: var(--ocean-foam);
  transition: all var(--transition-fast);
  background: none;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.material-island-icon-btn:hover, .material-island-settings-btn:hover {
  background: rgba(var(--ocean-light-rgb), .08);
  color: var(--ocean-light);
}

.material-search-bar {
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: var(--island-glow);
  transition: box-shadow var(--transition-fast);
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  display: flex;
}

.material-search-bar:focus-within {
  box-shadow: var(--island-glow-hover);
}

.material-search-icon {
  color: var(--ocean-foam);
  flex-shrink: 0;
}

.material-search-input {
  color: var(--ocean-deep);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-family: inherit;
  font-size: .78rem;
}

.material-search-input::placeholder {
  color: var(--ocean-foam);
  opacity: .7;
}

.material-search-clear {
  cursor: pointer;
  color: var(--ocean-foam);
  transition: color var(--transition-fast);
  background: none;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 2px;
  display: flex;
}

.material-search-clear:hover {
  color: var(--ocean-light);
}

.material-island-controlbar {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.material-island-nav, .material-island-zoom {
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  display: flex;
}

.material-island-nav-btn {
  border: 1px solid rgba(var(--ocean-light-rgb), .2);
  background: rgba(var(--glass-tint-rgb), .24);
  width: 32px;
  height: 30px;
  color: var(--ocean-foam);
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.material-island-nav-btn:hover:not(:disabled) {
  background: rgba(var(--ocean-light-rgb), .18);
  color: var(--ocean-light);
  border-color: rgba(var(--ocean-light-rgb), .45);
  box-shadow: var(--island-glow-hover);
}

.material-island-nav-btn:disabled {
  opacity: .35;
  cursor: default;
}

.material-island-controlbar .material-search-bar {
  background: rgba(var(--glass-tint-rgb), .24);
  min-width: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--ocean-deep-rgb), .08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 8px;
  flex: 1;
  padding: 6px 10px;
}

.material-island-controlbar .material-search-input {
  font-size: .78rem;
}

.material-island .material-toolbar-total {
  display: none;
}

.material-island-body {
  flex: 1;
  gap: 8px;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.material-island-tree-panel {
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 0 clamp(150px, 30%, 320px);
  min-width: 120px;
  padding-right: 4px;
  overflow: hidden auto;
  container-type: inline-size;
}

.material-island-tree-panel::-webkit-scrollbar {
  display: none;
}

.material-island-grid-panel {
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  min-width: 0;
  padding: 14px 16px 96px;
  overflow: hidden auto;
}

.material-island-grid-panel::-webkit-scrollbar {
  display: none;
}

.material-folder-tree {
  outline: none;
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.material-island .material-folder-tree {
  gap: 2px;
}

.material-island .material-section {
  gap: 1px;
}

.material-island .material-section-label {
  padding: 2px 6px 0;
  font-size: .42rem;
}

.material-island .material-folder-item {
  --tree-indent-step: 4px;
  --tree-indent-base: 4px;
  gap: 3px;
  padding: 2px 4px;
}

.material-island .material-folder-name {
  font-size: .5rem;
  line-height: 1.25;
}

.material-island .material-folder-count {
  min-width: 14px;
  height: 11px;
  padding: 0 3px;
  font-size: .38rem;
}

.material-island .material-folder-toggle, .material-island .material-folder-toggle-placeholder {
  width: 11px;
  height: 11px;
}

.material-island .material-folder-toggle svg {
  width: 8px;
  height: 8px;
}

.material-island .material-folder-icon {
  width: 9px;
  height: 9px;
}

.material-island .material-tree-empty {
  font-size: .5rem;
}

@container (max-width: 176px) {
  .material-island-tree-panel .material-view-tab span {
    display: none;
  }

  .material-island-tree-panel .material-view-tab {
    gap: 0;
    padding: 6px 0;
  }
}

.material-folder-tree:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(var(--ocean-accent-rgb, 56, 189, 248), .35);
  border-radius: 10px;
  outline: none;
}

.material-view-tabs {
  gap: 4px;
  margin-bottom: 4px;
  display: flex;
}

.material-view-tab {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  color: var(--ocean-foam);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  border-radius: 8px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  font-size: .65rem;
  font-weight: 600;
  display: flex;
}

.material-view-tab:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  color: var(--ocean-light);
}

.material-view-tab.active {
  background: rgba(var(--accent-cyan-rgb), .12);
  color: var(--ocean-light);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-cyan-rgb), .3);
}

.material-section {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.material-section-label {
  color: var(--ocean-foam);
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .7;
  padding: 4px 8px;
  font-size: .6rem;
  font-weight: 600;
}

.material-folder-node {
  flex-direction: column;
  display: flex;
}

.material-folder-item {
  cursor: pointer;
  transition: background var(--transition-fast);
  -webkit-user-select: none;
  user-select: none;
  border-radius: 8px;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 5px 8px;
  display: flex;
}

.material-folder-item:hover {
  background: rgba(var(--accent-cyan-rgb), .06);
}

.material-folder-item.selected {
  background: rgba(var(--accent-cyan-rgb), .12);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-cyan-rgb), .32);
}

.material-folder-toggle, .material-folder-toggle-placeholder {
  cursor: pointer;
  width: 14px;
  height: 14px;
  color: var(--ocean-foam);
  background: none;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.material-folder-icon {
  color: var(--ocean-cyan);
  flex-shrink: 0;
}

.material-folder-name {
  min-width: 0;
  color: var(--ocean-deep);
  white-space: normal;
  overflow-wrap: anywhere;
  flex: 1;
  font-size: .7rem;
  line-height: 1.35;
}

.material-folder-count {
  box-sizing: border-box;
  min-width: 18px;
  height: 16px;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  border: 1px solid #0000;
  border-radius: 100px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  font-size: .58rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
}

.material-folder-count.density-0 {
  background: rgba(var(--slate-blue-rgb), .1);
  color: var(--text-tertiary);
}

.material-folder-count.density-1 {
  border-color: rgba(var(--accent-cyan-rgb), .45);
  color: var(--text-primary);
  background: none;
}

.material-folder-count.density-2 {
  background: rgba(var(--accent-cyan-rgb), .12);
  color: var(--text-primary);
}

.material-folder-count.density-3 {
  background: rgba(var(--bright-cyan-rgb), .16);
  color: var(--text-primary);
}

.material-folder-count.density-4 {
  background: var(--ocean-light);
  color: var(--text-inverse);
  border-color: #0000;
}

.material-folder-children {
  flex-direction: column;
  display: flex;
}

.material-tree-empty {
  text-align: center;
  color: var(--ocean-foam);
  padding: 20px 8px;
  font-size: .7rem;
}

.material-grid {
  contain: layout style paint;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 12px;
  padding: 2px;
  display: grid;
}

.material-grid > div {
  contain: layout style paint;
}

.material-marquee {
  z-index: 6;
  pointer-events: none;
  border: 1px solid rgba(var(--ocean-light-rgb), .55);
  background: rgba(var(--ocean-light-rgb), .12);
  border-radius: 2px;
  position: absolute;
}

.material-grid-container.marquee-active {
  touch-action: none;
}

.material-grid-empty {
  color: var(--ocean-foam);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 40px 16px;
  display: flex;
}

.material-grid-empty-icon {
  opacity: .4;
}

.material-grid-empty-text {
  text-align: center;
  font-size: .7rem;
}

.material-thumb {
  border-radius: var(--radius-sm);
  cursor: grab;
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  box-shadow: var(--island-glow);
  transition: box-shadow var(--transition-fast);
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.material-thumb-img {
  aspect-ratio: 1;
  object-fit: contain;
  background: rgba(var(--glass-tint-rgb), .06);
  flex: none;
  width: 100%;
  display: block;
}

.material-thumb-name {
  min-height: 22px;
  max-height: 30px;
  color: var(--text-tertiary);
  text-align: center;
  white-space: normal;
  word-break: break-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: none;
  padding: 0 3px;
  font-size: .68rem;
  line-height: 15px;
  display: -webkit-box;
  overflow: hidden;
}

.material-thumb:hover {
  box-shadow: var(--island-glow-hover);
}

.material-thumb:active {
  cursor: grabbing;
}

.material-thumb-placeholder {
  aspect-ratio: 1;
  width: 100%;
  color: var(--ocean-foam);
  opacity: .4;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.material-thumb-fav {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  cursor: pointer;
  width: 20px;
  height: 20px;
  color: var(--ocean-foam);
  opacity: 0;
  transition: all var(--transition-fast);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 4px;
  right: 4px;
}

.material-thumb:hover .material-thumb-fav {
  opacity: 1;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
}

.material-thumb-fav.active {
  opacity: 1;
  color: var(--golden);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
}

.material-island-drag-hint {
  border-radius: var(--radius-sm);
  background: rgba(var(--ocean-light-rgb), .04);
  color: var(--ocean-foam);
  opacity: .7;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: .62rem;
  display: flex;
}

.material-island-drag-hint i {
  font-size: .7rem;
}

.material-island-empty-guide {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  display: flex;
}

.material-island-empty-icon {
  color: var(--ocean-cyan);
  opacity: .4;
}

.material-island-empty-text {
  color: var(--ocean-foam);
  margin: 0;
  font-size: .78rem;
}

.material-island-setup-btn {
  border-radius: var(--radius-sm);
  background: rgba(var(--ocean-light-rgb), .1);
  color: var(--ocean-light);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--island-glow);
  border: none;
  padding: 8px 20px;
  font-size: .72rem;
  font-weight: 600;
}

.material-island-setup-btn:hover {
  background: rgba(var(--ocean-light-rgb), .18);
  box-shadow: var(--island-glow-hover);
}

.material-settings-overlay {
  background: rgba(var(--shadow-rgb, 25, 35, 42), .2);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  z-index: 10050;
  animation: materialOverlayIn var(--dur-2) var(--ease-out-expo);
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

@keyframes materialOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.material-settings-dialog {
  border-radius: var(--radius-lg);
  background: var(--glass-bg-near);
  width: 440px;
  max-width: 90vw;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: var(--glass-shadow-near);
  animation: materialDialogIn var(--dur-3) var(--ease-out-back);
  overflow: clip;
}

@keyframes materialDialogIn {
  from {
    opacity: 0;
    transform: scale(.95)translateY(-10px);
  }

  to {
    opacity: 1;
    transform: scale(1)translateY(0);
  }
}

.material-settings-header {
  border-bottom: 1px solid rgba(var(--ocean-deep-rgb), .06);
  padding: 20px 24px 12px;
}

.material-settings-title {
  color: var(--ocean-deep);
  font-size: 1.1rem;
  font-weight: 600;
}

.material-settings-body {
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  display: flex;
}

.material-settings-label {
  color: var(--ocean-mid);
  font-size: .75rem;
  font-weight: 600;
}

.material-settings-path-row {
  align-items: stretch;
  gap: 8px;
  display: flex;
}

.material-settings-path-display {
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: var(--island-glow);
  color: var(--ocean-deep);
  word-break: break-all;
  flex: 1;
  align-items: center;
  min-height: 38px;
  padding: 10px 14px;
  font-size: .72rem;
  display: flex;
}

.material-settings-browse-btn {
  border-radius: var(--radius-sm);
  background: rgba(var(--ocean-light-rgb), .12);
  color: var(--ocean-light);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--island-glow);
  white-space: nowrap;
  border: none;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  font-size: .72rem;
  font-weight: 600;
  display: flex;
}

.material-settings-browse-btn:hover {
  background: rgba(var(--ocean-light-rgb), .2);
  box-shadow: var(--island-glow-hover);
}

.material-settings-status {
  border-radius: var(--radius-sm);
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: .7rem;
  font-weight: 600;
  display: flex;
}

.material-settings-status.success {
  background: rgba(var(--success-rgb), .12);
  color: var(--success);
}

.material-settings-status.error {
  background: rgba(var(--error-rgb), .12);
  color: var(--error);
}

.material-settings-status.info {
  background: rgba(var(--neon-glow-rgb), .1);
  color: var(--ocean-foam);
}

.material-settings-browse-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.material-settings-hint {
  border-radius: var(--radius-sm);
  background: rgba(var(--ocean-light-rgb), .04);
  color: var(--ocean-foam);
  padding: 12px 14px;
  font-size: .68rem;
  line-height: 1.6;
}

.material-settings-hint p {
  margin: 0 0 6px;
}

.material-settings-hint ul {
  margin: 0 0 6px;
  padding-left: 16px;
}

.material-settings-hint li {
  margin-bottom: 2px;
}

.material-settings-footer {
  justify-content: flex-end;
  padding: 12px 24px 20px;
  display: flex;
}

.material-settings-close-btn {
  border-radius: var(--radius-sm);
  background: rgba(var(--ocean-light-rgb), .1);
  color: var(--ocean-light);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--island-glow);
  border: none;
  padding: 8px 24px;
  font-size: .75rem;
  font-weight: 600;
}

.material-settings-close-btn:hover {
  background: rgba(var(--ocean-light-rgb), .18);
  box-shadow: var(--island-glow-hover);
}

@media (max-width: 1400px) {
  .material-island.open, .material-island-inner {
    width: 440px;
  }
}

@media (max-width: 1200px) {
  .material-island.open, .material-island-inner {
    width: 360px;
  }
}

@media (max-width: 992px) {
  .material-island.open {
    display: none;
  }
}

.material-drop-active {
  transition: box-shadow var(--dur-2) var(--ease-out-expo);
}

.material-page-root {
  flex-direction: column;
  flex: 1;
  gap: 16px;
  height: 100%;
  min-height: 0;
  display: flex;
}

.material-page-header {
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(var(--ocean-light-rgb), .12), rgba(var(--ocean-cyan-rgb), .06));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .3), 0 4px 24px rgba(var(--ocean-deep-rgb), .04);
  animation: pgFadeIn var(--dur-4) var(--ease-out-expo) both;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.material-page-header:before {
  content: "";
  background: radial-gradient(ellipse at left, rgba(var(--ocean-cyan-rgb), .06), transparent 60%);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.material-page-header-icon {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-mid));
  color: #fff;
  width: 42px;
  height: 42px;
  box-shadow: 0 4px 14px rgba(var(--ocean-light-rgb), .25), inset 0 1px 0 rgba(var(--yue-material-white-rgb), .2);
  z-index: 1;
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.material-page-header-text {
  z-index: 1;
  flex: 1;
  min-width: 0;
}

.material-page-header-title {
  color: var(--ocean-deep);
  letter-spacing: -.01em;
  margin: 0 0 2px;
  font-size: 1.15rem;
  font-weight: 650;
}

.material-page-header-sub {
  color: var(--ocean-foam);
  margin: 0;
  font-size: .72rem;
  font-weight: 500;
}

.material-page-header-stat {
  background: rgba(var(--ocean-cyan-rgb), .1);
  z-index: 1;
  border-radius: 100px;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  padding: 6px 18px;
  display: flex;
}

.material-page-header-stat-num {
  color: var(--ocean-light);
  font-size: 1.1rem;
  font-weight: 650;
  line-height: 1.1;
}

.material-page-header-stat-label {
  color: var(--ocean-foam);
  letter-spacing: .02em;
  font-size: .62rem;
  font-weight: 600;
}

.material-page-pathbar {
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .3), 0 4px 24px rgba(var(--ocean-deep-rgb), .04);
  animation: pgFadeIn var(--dur-4) var(--ease-out-expo) both;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  display: flex;
}

.material-page-pathbar-icon {
  color: var(--ocean-light);
  flex-shrink: 0;
}

.material-page-pathbar-path {
  color: var(--ocean-deep);
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: -.01em;
  flex: 1;
  font-family: SF Mono, Fira Code, Consolas, monospace;
  font-size: .8rem;
  font-weight: 500;
  overflow: hidden;
}

.material-page-pathbar-count {
  color: var(--ocean-light);
  background: rgba(var(--ocean-cyan-rgb), .1);
  white-space: nowrap;
  border-radius: 100px;
  flex-shrink: 0;
  padding: 3px 12px;
  font-size: .68rem;
  font-weight: 600;
}

.material-page-pathbar-actions {
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  display: flex;
}

.material-page-pathbar-btn {
  background: rgba(var(--ocean-light-rgb), .06);
  width: 32px;
  height: 32px;
  color: var(--ocean-foam);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.material-page-tour-btn {
  border: 1px solid rgba(var(--ocean-light-rgb), .45);
  background: rgba(var(--ocean-light-rgb), .12);
  height: 32px;
  color: var(--ocean-foam);
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
}

.material-page-tour-btn:hover {
  background: rgba(var(--ocean-light-rgb), .22);
  box-shadow: 0 0 0 3px rgba(var(--ocean-light-rgb), .12);
}

.material-page-pathbar-btn:hover {
  background: rgba(var(--ocean-light-rgb), .12);
  color: var(--ocean-light);
}

.material-page-content {
  flex-direction: column;
  flex: 1;
  gap: 12px;
  min-height: 0;
  display: flex;
}

.material-page-content .material-search-bar {
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .3), 0 4px 24px rgba(var(--ocean-deep-rgb), .04);
  padding: 10px 16px;
}

.material-page-content .material-search-input {
  font-size: .82rem;
}

.material-page-body {
  flex: 1;
  gap: 8px;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.material-page-tree {
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-near, .88));
  min-width: 260px;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .3), 0 4px 24px rgba(var(--ocean-deep-rgb), .04);
  flex: 0 clamp(280px, 28%, 420px);
  padding: 16px 12px;
  overflow: hidden auto;
}

.material-page-tree::-webkit-scrollbar {
  display: none;
}

.material-page-grid {
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint-rgb), .96);
  min-width: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .3), 0 4px 24px rgba(var(--ocean-deep-rgb), .04);
  flex: 1;
  padding: 20px 20px 96px;
  overflow: hidden auto;
}

.material-page-grid::-webkit-scrollbar {
  display: none;
}

.material-grid-container {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  position: relative;
  overflow: visible;
}

.material-grid-container:focus, .material-grid-container:focus-visible {
  outline: none;
}

.material-resize-handle {
  cursor: col-resize;
  touch-action: none;
  background: none;
  flex: 0 0 6px;
  align-self: stretch;
  width: 6px;
  position: relative;
}

.material-resize-handle:before {
  content: "";
  background: rgba(var(--ocean-light-rgb), .3);
  opacity: .2;
  width: 3px;
  height: 44px;
  max-height: 42%;
  transition: opacity var(--transition-fast), background var(--transition-fast);
  border-radius: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.material-resize-handle:hover:before {
  opacity: .65;
  background: rgba(var(--ocean-light-rgb), .5);
}

.material-resize-handle.dragging:before {
  opacity: .9;
  background: rgba(var(--ocean-light-rgb), .6);
}

.material-page-tree .material-section-label {
  padding: 6px 8px;
  font-size: .65rem;
}

.material-page-tree .material-folder-name {
  font-size: .76rem;
}

.material-page-tree .material-folder-item {
  padding: 6px 8px;
}

.material-page-tree .material-view-tab {
  padding: 7px 4px;
  font-size: .7rem;
}

.material-page-grid .material-grid {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.material-page-grid .material-grid-empty {
  padding: 60px 20px;
}

.material-page-grid .material-grid-empty-icon {
  width: 40px;
  height: 40px;
}

.material-page-grid .material-grid-empty-text {
  font-size: .82rem;
}

.material-page-empty {
  padding: 80px 24px;
}

.material-page-empty-icon {
  color: var(--ocean-cyan);
  opacity: .35;
  animation: 3s ease-in-out infinite pgFloat;
}

.material-page-empty-title {
  color: var(--ocean-deep);
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 600;
}

.material-page-empty-desc {
  color: var(--ocean-mid);
  max-width: 360px;
  margin: 0 auto 24px;
  font-size: .82rem;
  line-height: 1.6;
}

.material-page-setup-btn {
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-mid));
  color: #fff;
  cursor: pointer;
  transition: all var(--dur-3) var(--ease-out-expo);
  box-shadow: 0 4px 16px rgba(var(--ocean-light-rgb), .2), inset 0 1px 0 rgba(var(--glass-tint-rgb), .3);
  border: none;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: .85rem;
  font-weight: 600;
  display: inline-flex;
}

.material-page-setup-btn:hover {
  box-shadow: 0 8px 24px rgba(var(--ocean-light-rgb), .3), inset 0 1px 0 rgba(var(--glass-tint-rgb), .3);
  transform: translateY(-2px);
}

.material-page-setup-btn:active {
  transform: translateY(0);
}

.material-page-loading {
  color: var(--ocean-foam);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  display: flex;
}

.material-page-loading-text {
  font-size: .82rem;
}

@media (max-width: 768px) {
  .material-page-body {
    flex-direction: column;
  }

  .material-page-tree {
    width: 100%;
    max-height: 200px;
  }

  .material-page-grid .material-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

.material-toolbar {
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2), inset 0 1px 0 0 rgba(var(--glass-tint-rgb), .3), 0 4px 24px rgba(var(--ocean-deep-rgb), .04);
  animation: pgFadeIn var(--dur-4) var(--ease-out-expo) both;
  z-index: 20;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  display: flex;
  position: relative;
}

.material-toolbar-group {
  align-items: center;
  gap: 2px;
  display: flex;
  position: relative;
}

.material-toolbar-btn {
  color: var(--ocean-foam);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  background: none;
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: .74rem;
  font-weight: 500;
  display: flex;
}

.material-toolbar-btn:hover {
  background: rgba(var(--ocean-light-rgb), .08);
  color: var(--ocean-light);
}

.material-toolbar-btn.active {
  background: rgba(var(--ocean-light-rgb), .12);
  color: var(--ocean-light);
  box-shadow: inset 0 0 0 1px rgba(var(--ocean-light-rgb), .1);
}

.material-toolbar-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.material-toolbar-btn.danger:hover {
  background: rgba(var(--error-rgb), .12);
  color: var(--error);
}

.material-toolbar-label {
  font-size: .72rem;
}

.material-toolbar-separator {
  background: rgba(var(--ocean-deep-rgb), .1);
  flex-shrink: 0;
  width: 1px;
  height: 20px;
  margin: 0 4px;
}

.material-toolbar-spacer {
  flex: 1;
}

.material-toolbar-count {
  color: var(--ocean-light);
  background: rgba(var(--ocean-cyan-rgb), .1);
  font-variant-numeric: tabular-nums;
  border-radius: 100px;
  margin-right: 4px;
  padding: 4px 10px;
  font-size: .7rem;
  font-weight: 600;
}

.material-toolbar-count.idle {
  opacity: .55;
  background: rgba(var(--ocean-deep-rgb), .06);
}

.material-toolbar-count-sm {
  color: var(--ocean-light);
  background: rgba(var(--ocean-cyan-rgb), .14);
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-radius: 100px;
  min-width: 16px;
  padding: 2px 6px;
  font-size: .62rem;
  font-weight: 600;
  line-height: 1;
}

.material-toolbar-total {
  color: var(--ocean-foam);
  font-size: .7rem;
  font-weight: 500;
}

.material-toolbar .material-toolbar-nav, .material-toolbar .material-toolbar-zoom {
  flex-shrink: 0;
}

.material-toolbar .material-toolbar-nav-btn {
  border: 1px solid rgba(var(--ocean-light-rgb), .22);
  background: rgba(var(--glass-tint-rgb), .28);
  width: 38px;
  height: 34px;
  color: var(--ocean-foam);
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.material-toolbar .material-toolbar-nav-btn:hover:not(:disabled) {
  background: rgba(var(--ocean-light-rgb), .18);
  color: var(--ocean-light);
  border-color: rgba(var(--ocean-light-rgb), .45);
  box-shadow: var(--island-glow-hover);
}

.material-toolbar .material-toolbar-nav-btn:disabled {
  opacity: .35;
  cursor: default;
}

.material-toolbar .material-path-bar--crumbs {
  min-width: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: none;
  flex: 140px;
  padding: 0;
}

.material-toolbar .material-search-bar {
  background: rgba(var(--glass-tint-rgb), .24);
  min-width: 140px;
  max-width: 320px;
  box-shadow: inset 0 0 0 1px rgba(var(--ocean-deep-rgb), .08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 8px;
  flex: 180px;
  padding: 6px 10px;
}

.material-sort-dropdown {
  border-radius: var(--radius-md);
  background: var(--glass-bg-near);
  min-width: 160px;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: var(--glass-shadow-near), 0 0 0 1px rgba(var(--glass-tint-rgb), .2);
  z-index: 100;
  animation: materialDialogIn var(--dur-2) var(--ease-out-expo);
  padding: 4px;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  overflow: clip;
}

.material-sort-item {
  width: 100%;
  color: var(--ocean-deep);
  cursor: pointer;
  transition: background var(--transition-fast);
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: .74rem;
  font-weight: 500;
  display: flex;
}

.material-sort-item:hover {
  background: rgba(var(--ocean-light-rgb), .06);
}

.material-sort-item.active {
  color: var(--ocean-light);
  font-weight: 600;
}

.material-sort-divider {
  background: rgba(var(--ocean-deep-rgb), .06);
  height: 1px;
  margin: 4px 8px;
}

.material-context-menu {
  box-sizing: border-box;
  border-radius: var(--radius-md);
  background: var(--glass-bg-near);
  min-width: 200px;
  max-width: 460px;
  max-height: calc(100vh - 24px);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: var(--glass-shadow-near), 0 0 0 1px rgba(var(--glass-tint-rgb), .15), 0 12px 40px rgba(var(--ocean-deep-rgb), .15);
  z-index: 10000;
  animation: materialDialogIn var(--dur-1) var(--ease-out-expo);
  padding: 6px;
  position: fixed;
  overflow-y: auto;
}

.material-context-columns {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: 4px;
  display: grid;
}

.material-context-col {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.material-context-more-grid {
  grid-template-columns: 1fr 1fr;
  column-gap: 4px;
}

.material-context-more-grid .material-context-launch-group {
  display: contents;
}

.material-context-more-grid .material-context-launch-group-label {
  grid-column: 1 / -1;
}

.material-context-item {
  width: 100%;
  color: var(--ocean-deep);
  cursor: pointer;
  transition: background var(--transition-fast);
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: .76rem;
  font-weight: 500;
  display: flex;
}

.material-context-item:hover {
  background: rgba(var(--ocean-light-rgb), .08);
}

.material-context-item.danger {
  color: var(--error);
}

.material-context-item.danger:hover {
  background: rgba(var(--error-rgb), .1);
}

.material-context-item span {
  flex: 1;
}

.material-context-shortcut {
  color: var(--ocean-foam);
  background: rgba(var(--ocean-deep-rgb), .04);
  opacity: .7;
  border-radius: 4px;
  flex-shrink: 0;
  padding: 2px 6px;
  font-family: SF Mono, Fira Code, Consolas, monospace;
  font-size: .62rem;
}

.material-context-divider {
  background: rgba(var(--ocean-deep-rgb), .06);
  height: 1px;
  margin: 4px 8px;
}

.material-context-launch-title {
  letter-spacing: .04em;
  color: var(--ocean-foam);
  text-transform: uppercase;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 4px;
  font-size: .68rem;
  font-weight: 600;
  display: flex;
}

.material-context-launch-title-icon {
  width: 12px;
  height: 12px;
  color: var(--accent-cyan, var(--yue-material-cyan));
}

.material-context-launch-count {
  background: rgba(var(--ocean-light-rgb), .12);
  color: var(--ocean-deep);
  border-radius: 8px;
  margin-left: auto;
  padding: 1px 7px;
  font-size: .64rem;
  font-weight: 600;
}

.material-context-item.launch {
  color: var(--ocean-deep);
  font-weight: 600;
}

.material-context-item.launch i {
  text-align: center;
  width: 14px;
  color: var(--accent-cyan, var(--yue-material-cyan));
  font-size: .78rem;
}

.material-context-item.launch-more-toggle {
  color: var(--ocean-foam);
  font-size: .72rem;
}

.material-context-launch-chevron {
  width: 13px;
  height: 13px;
  transition: transform var(--dur-2) ease;
}

.material-context-launch-chevron.open {
  transform: rotate(180deg);
}

.material-context-launch-more {
  max-height: 42vh;
  padding: 2px 0;
  overflow-y: auto;
}

.material-context-launch-group {
  padding: 3px 0;
}

.material-context-launch-group-label {
  color: var(--ocean-foam);
  opacity: .7;
  padding: 5px 12px 2px;
  font-size: .64rem;
  font-weight: 600;
}

.trash-view {
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 10px;
  display: flex;
  overflow-y: auto;
}

.trash-header {
  justify-content: space-between;
  align-items: center;
  padding: 4px 2px;
  display: flex;
}

.trash-header-title {
  color: var(--text-primary, var(--yue-material-blue-pale));
  align-items: center;
  gap: 7px;
  font-size: .85rem;
  font-weight: 600;
  display: flex;
}

.trash-header-icon {
  width: 14px;
  height: 14px;
  color: var(--slate-blue, var(--yue-material-muted-soft));
}

.trash-header-count {
  background: rgba(var(--error-rgb, 239, 68, 68), .2);
  color: var(--error, var(--yue-material-danger-soft));
  border-radius: 10px;
  padding: 1px 7px;
  font-size: .7rem;
  font-weight: 600;
}

.trash-header-empty {
  background: rgba(var(--error-rgb, 239, 68, 68), .14);
  border: 1px solid rgba(var(--error-rgb, 239, 68, 68), .35);
  color: var(--error, var(--yue-material-danger-soft));
  cursor: pointer;
  transition: background var(--dur-1) ease;
  border-radius: 7px;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: .72rem;
  font-weight: 500;
  display: inline-flex;
}

.trash-header-empty:hover {
  background: rgba(var(--error-rgb, 239, 68, 68), .25);
}

.trash-header-empty-icon {
  width: 12px;
  height: 12px;
}

.trash-empty {
  color: var(--text-tertiary, var(--yue-material-muted));
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 48px 16px;
  display: flex;
}

.trash-empty-icon {
  opacity: .55;
  width: 34px;
  height: 34px;
}

.trash-empty-icon.spin {
  animation: 1s linear infinite trash-spin;
}

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

.trash-empty-title {
  color: var(--text-primary, var(--yue-material-blue-pale));
  font-size: .85rem;
  font-weight: 600;
}

.trash-empty-hint {
  font-size: .72rem;
  line-height: 1.5;
}

.trash-list {
  flex-direction: column;
  gap: 7px;
  display: flex;
}

.trash-row {
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .05);
  border: 1px solid rgba(var(--ocean-light-rgb, 125, 211, 252), .14);
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
  border-radius: 9px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  display: flex;
}

.trash-row:hover {
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .09);
  border-color: rgba(var(--ocean-light-rgb, 125, 211, 252), .3);
}

.trash-row-icon {
  background: rgba(var(--ocean-light-rgb, 125, 211, 252), .1);
  border-radius: 7px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: flex;
}

.trash-row-icon-svg {
  width: 15px;
  height: 15px;
  color: var(--slate-blue, var(--yue-material-muted-soft));
}

.trash-row-info {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.trash-row-name {
  color: var(--text-primary, var(--yue-material-blue-pale));
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  display: flex;
  overflow: hidden;
}

.trash-row-kind {
  color: var(--text-tertiary, var(--yue-material-muted));
  background: rgba(var(--slate-blue-rgb, 120, 140, 175), .15);
  border-radius: 5px;
  flex-shrink: 0;
  padding: 1px 5px;
  font-size: .62rem;
  font-weight: 500;
}

.trash-row-meta {
  color: var(--text-tertiary, var(--yue-material-muted));
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .66rem;
  overflow: hidden;
}

.trash-row-actions {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  display: flex;
}

.trash-row-btn {
  cursor: pointer;
  transition: background var(--dur-1) ease;
  border: 1px solid #0000;
  border-radius: 6px;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: .68rem;
  font-weight: 500;
  display: inline-flex;
}

.trash-row-btn.restore {
  background: rgba(var(--success-rgb, 34, 197, 94), .12);
  border-color: rgba(var(--success-rgb, 34, 197, 94), .3);
  color: var(--success, var(--yue-ui-green-300));
}

.trash-row-btn.restore:hover {
  background: rgba(var(--success-rgb, 34, 197, 94), .22);
}

.trash-row-btn.danger {
  background: rgba(var(--error-rgb, 239, 68, 68), .1);
  border-color: rgba(var(--error-rgb, 239, 68, 68), .25);
  color: var(--error, var(--yue-material-danger-soft));
}

.trash-row-btn.danger:hover {
  background: rgba(var(--error-rgb, 239, 68, 68), .2);
}

.trash-row-btn-icon {
  width: 11px;
  height: 11px;
}

.material-toast-container {
  z-index: 10001;
  animation: materialToastIn var(--dur-3) var(--ease-out-back);
  cursor: pointer;
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes materialToastIn {
  from {
    opacity: 0;
    transform: translateX(-50%)translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%)translateY(0);
  }
}

.material-toast {
  border-radius: var(--radius-md);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: 0 8px 32px rgba(var(--ocean-deep-rgb), .12), 0 0 0 1px rgba(var(--glass-tint-rgb), .15);
  align-items: center;
  gap: 10px;
  max-width: 400px;
  padding: 12px 24px;
  font-size: .8rem;
  font-weight: 600;
  display: flex;
}

.material-toast-success {
  background: rgba(var(--success-rgb), .15);
  color: var(--success);
}

.material-toast-error {
  background: rgba(var(--error-rgb), .15);
  color: var(--error);
}

.material-toast-info {
  background: rgba(var(--neon-glow-rgb), .12);
  color: var(--ocean-foam);
}

.material-toast-message {
  flex: 1;
}

.material-input-dialog {
  border-radius: var(--radius-lg);
  background: var(--glass-bg-near);
  width: 380px;
  max-width: 90vw;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: var(--glass-shadow-near);
  animation: materialDialogIn var(--dur-3) var(--ease-out-back);
  overflow: clip;
}

.material-input-dialog-header {
  border-bottom: 1px solid rgba(var(--ocean-deep-rgb), .06);
  align-items: center;
  gap: 12px;
  padding: 20px 24px 12px;
  display: flex;
}

.material-input-dialog-icon {
  color: var(--ocean-light);
  align-items: center;
  display: flex;
}

.material-input-dialog-body {
  flex-direction: column;
  gap: 10px;
  padding: 20px 24px;
  display: flex;
}

.material-input-dialog-input {
  border: 1px solid rgba(var(--ocean-deep-rgb), .1);
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 100%;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-tint-rgb), .2);
  color: var(--ocean-deep);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  padding: 10px 14px;
  font-family: inherit;
  font-size: .82rem;
}

.material-input-dialog-input:focus {
  border-color: var(--ocean-cyan);
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .3), 0 0 12px rgba(var(--neon-glow-rgb), .08);
}

.material-input-dialog-error {
  color: var(--error);
  font-size: .72rem;
  line-height: 1.4;
}

.material-input-dialog-footer {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
  display: flex;
}

.material-input-dialog-confirm {
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-mid));
  color: #fff;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(var(--ocean-light-rgb), .2);
  border: none;
  padding: 8px 24px;
  font-size: .75rem;
  font-weight: 600;
}

.material-input-dialog-confirm:hover {
  box-shadow: 0 4px 12px rgba(var(--ocean-light-rgb), .3);
  transform: translateY(-1px);
}

.material-input-dialog-confirm:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.material-thumb.selected {
  box-shadow: inset 0 0 0 2px var(--ocean-cyan), 0 0 16px rgba(var(--neon-glow-rgb), .2);
}

.material-thumb-checkmark {
  background: var(--ocean-cyan);
  pointer-events: none;
  width: 18px;
  height: 18px;
  animation: materialDialogIn var(--dur-1) var(--ease-out-expo);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 4px;
  left: 4px;
}

.material-thumb-checkmark:after {
  content: "";
  border: 2px solid #fff;
  border-width: 0 2px 2px 0;
  width: 5px;
  height: 9px;
  margin-top: -2px;
  transform: rotate(45deg);
}

.material-list {
  contain: layout style paint;
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.material-list > div {
  contain: layout style paint;
}

.material-list-header {
  border-radius: var(--radius-sm);
  background: rgba(var(--ocean-light-rgb), .04);
  color: var(--ocean-foam);
  text-transform: uppercase;
  letter-spacing: .03em;
  z-index: 1;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 8px 12px;
  font-size: .68rem;
  font-weight: 600;
  display: flex;
  position: sticky;
  top: 0;
}

.material-list-row {
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  display: flex;
}

.material-list-row:hover {
  background: rgba(var(--ocean-light-rgb), .04);
}

.material-list-row.selected {
  background: rgba(var(--neon-glow-rgb), .08);
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .2);
}

.material-list-col-name {
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.material-list-col-size {
  width: 100px;
  color: var(--ocean-mid);
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  font-size: .7rem;
  display: flex;
}

.material-list-col-resolution {
  width: 96px;
  color: var(--ocean-mid);
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  font-size: .7rem;
  display: flex;
}

.material-list-col-date {
  width: 150px;
  color: var(--ocean-mid);
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  font-size: .7rem;
  display: flex;
}

.material-list-meta-icon {
  opacity: .5;
  flex-shrink: 0;
}

.material-list-thumb {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  width: 32px;
  height: 32px;
  color: var(--ocean-foam);
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.material-list-thumb-img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.material-list-filename {
  color: var(--ocean-deep);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  font-size: .76rem;
  overflow: hidden;
}

.material-list-fav {
  cursor: pointer;
  color: var(--ocean-foam);
  opacity: 0;
  transition: opacity var(--transition-fast), color var(--transition-fast);
  background: none;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 2px;
  display: flex;
}

.material-list-row:hover .material-list-fav {
  opacity: .7;
}

.material-list-fav.active {
  opacity: 1;
  color: var(--golden);
}

.material-list-fav:hover {
  opacity: 1 !important;
}

.material-page-grid .material-list-col-size {
  width: 120px;
  font-size: .74rem;
}

.material-page-grid .material-list-col-resolution {
  width: 110px;
  font-size: .74rem;
}

.material-page-grid .material-list-col-date {
  width: 180px;
  font-size: .74rem;
}

.material-page-grid .material-list-thumb {
  width: 40px;
  height: 40px;
}

.material-page-grid .material-list-filename {
  font-size: .8rem;
}

.material-folder-item {
  position: relative;
}

.material-folder-item.selected-ctx {
  background: rgba(var(--neon-glow-rgb), .08);
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .2);
}

.material-folder-item.drag-over {
  transition: all var(--dur-1) var(--ease-out-expo);
  background: rgba(var(--neon-glow-rgb), .1) !important;
  box-shadow: inset 0 0 0 2px var(--ocean-cyan) !important;
}

.material-mark-filter {
  flex-shrink: 0;
  gap: 4px;
  padding: 2px 0;
  display: flex;
}

.material-mark-filter-btn {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  color: var(--ocean-foam);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--island-glow);
  border: none;
  border-radius: 100px;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: .62rem;
  font-weight: 600;
  display: inline-flex;
}

.material-mark-filter-btn:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  color: var(--ocean-light);
}

.material-mark-filter-btn.active {
  background: rgba(var(--ocean-light-rgb), .12);
  color: var(--ocean-light);
  box-shadow: var(--island-glow-hover);
}

.material-mark-filter-btn.filter-passed.active {
  background: rgba(var(--success-rgb), .1);
  color: var(--success);
}

.material-mark-filter-btn.filter-flagged.active {
  background: rgba(var(--error-rgb), .1);
  color: var(--error);
}

.material-mark-filter-btn .filter-icon {
  font-size: .7rem;
  line-height: 1;
}

.material-mark-filter-btn .filter-count {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  border-radius: 100px;
  padding: 0 6px;
  font-size: .55rem;
  font-weight: 600;
  line-height: 14px;
}

.material-mark-filter-btn.filter-passed .filter-count {
  background: rgba(var(--success-rgb), .12);
  color: var(--success);
}

.material-mark-filter-btn.filter-flagged .filter-count {
  background: rgba(var(--error-rgb), .12);
  color: var(--error);
}

.material-thumb-mark {
  width: 20px;
  height: 20px;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 2;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: .7rem;
  line-height: 1;
  display: flex;
  position: absolute;
  bottom: 4px;
  left: 4px;
}

.material-thumb-mark.mark-passed {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  box-shadow: 0 0 0 1px rgba(var(--success-rgb), .3), 0 2px 6px rgba(var(--success-rgb), .15);
}

.material-thumb-mark.mark-flagged {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  box-shadow: 0 0 0 1px rgba(var(--error-rgb), .3), 0 2px 6px rgba(var(--error-rgb), .15);
}

.material-thumb-mark:hover {
  transform: scale(1.15);
}

.material-thumb.mark-passed {
  box-shadow: inset 0 0 0 2px rgba(var(--success-rgb), .35), var(--island-glow);
}

.material-thumb.mark-flagged {
  box-shadow: inset 0 0 0 2px rgba(var(--error-rgb), .35), var(--island-glow);
}

.material-thumb.mark-passed:hover {
  box-shadow: inset 0 0 0 2px rgba(var(--success-rgb), .5), var(--island-glow-hover);
}

.material-thumb.mark-flagged:hover {
  box-shadow: inset 0 0 0 2px rgba(var(--error-rgb), .5), var(--island-glow-hover);
}

.material-list-mark {
  cursor: pointer;
  transition: all var(--transition-fast);
  background: none;
  border: none;
  border-radius: 4px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  font-size: .8rem;
  line-height: 1;
  display: flex;
}

.material-list-mark.mark-passed:hover {
  background: rgba(var(--success-rgb), .1);
}

.material-list-mark.mark-flagged:hover {
  background: rgba(var(--error-rgb), .1);
}

.material-list-row.mark-passed {
  box-shadow: inset 2px 0 0 rgba(var(--success-rgb), .4);
}

.material-list-row.mark-flagged {
  box-shadow: inset 2px 0 0 rgba(var(--error-rgb), .4);
  background: rgba(var(--error-rgb), .02);
}

.material-list-row.mark-flagged:hover {
  background: rgba(var(--error-rgb), .05);
}

.material-thumb-mark-btn {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  width: 20px;
  height: 20px;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  cursor: pointer;
  color: var(--ocean-foam);
  opacity: 0;
  transition: all var(--transition-fast);
  z-index: 3;
  box-shadow: 0 1px 4px rgba(var(--ocean-deep-rgb), .1);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 4px;
  right: 4px;
}

.material-thumb:hover .material-thumb-mark-btn {
  opacity: 1;
}

.material-thumb-mark-btn:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  color: var(--ocean-light);
  transform: scale(1.1);
}

.material-thumb-mark-count {
  background: var(--ocean-cyan);
  color: #fff;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: .5rem;
  font-weight: 600;
  line-height: 1;
  display: flex;
  position: absolute;
  top: -4px;
  right: -4px;
}

.mark-badges {
  z-index: 2;
  pointer-events: none;
  flex-wrap: wrap;
  gap: 2px;
  max-width: calc(100% - 28px);
  display: flex;
  position: absolute;
  bottom: 26px;
  left: 4px;
}

.mark-badge {
  min-width: 16px;
  height: 16px;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border: 1px solid;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 0 3px;
  font-size: .6rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
}

.mark-badge-overflow {
  font-size: .5rem;
  background: rgba(var(--text-tertiary-rgb), .8) !important;
  border-color: rgba(var(--text-tertiary-rgb), 1) !important;
  color: var(--text-inverse) !important;
}

.mark-inline-badges {
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  gap: 3px;
  max-width: 200px;
  display: flex;
}

.mark-inline-badge {
  white-space: nowrap;
  border-radius: 4px;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  font-size: .58rem;
  font-weight: 600;
  line-height: 16px;
  display: inline-flex;
}

.mark-popup {
  border-radius: var(--radius-md);
  background: var(--glass-bg-near);
  min-width: 180px;
  max-width: 260px;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: var(--glass-shadow-near), 0 0 0 1px rgba(var(--glass-tint-rgb), .15), 0 12px 40px rgba(var(--ocean-deep-rgb), .15);
  z-index: 100;
  animation: markPopupIn var(--dur-2) var(--ease-out-expo);
  padding: 6px;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  overflow: clip;
}

@keyframes markPopupIn {
  from {
    opacity: 0;
    transform: scale(.92)translateY(4px);
  }

  to {
    opacity: 1;
    transform: scale(1)translateY(0);
  }
}

.mark-popup-header {
  color: var(--ocean-foam);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(var(--ocean-deep-rgb), .06);
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding: 4px 8px 6px;
  font-size: .65rem;
  font-weight: 600;
  display: flex;
}

.mark-popup-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  display: flex;
  overflow-y: auto;
}

.mark-popup-body::-webkit-scrollbar {
  display: none;
}

.mark-popup-group {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.mark-popup-group-label {
  color: var(--ocean-foam);
  opacity: .6;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 8px;
  font-size: .58rem;
  font-weight: 600;
}

.mark-popup-group-items {
  flex-direction: column;
  gap: 1px;
  display: flex;
}

.mark-popup-item {
  color: var(--ocean-deep);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 8px;
  font-size: .72rem;
  font-weight: 500;
  display: flex;
}

.mark-popup-item:hover {
  background: rgba(var(--ocean-light-rgb), .06);
}

.mark-popup-item.active {
  font-weight: 600;
}

.mark-popup-item-icon {
  flex-shrink: 0;
  font-size: .8rem;
  line-height: 1;
}

.mark-popup-item-label {
  flex: 1;
}

.mark-popup-item-check {
  flex-shrink: 0;
  font-size: .65rem;
  font-weight: 600;
}

.material-mark-filter-v2 {
  flex-direction: column;
  flex-shrink: 0;
  gap: 6px;
  padding: 6px 0 2px;
  display: flex;
}

.mark-filter-modes {
  gap: 4px;
  display: flex;
}

.mark-filter-mode-btn {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  color: var(--ocean-foam);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--island-glow);
  text-align: center;
  border: none;
  border-radius: 100px;
  flex: 1;
  padding: 4px 8px;
  font-size: .62rem;
  font-weight: 600;
}

.mark-filter-mode-btn:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  color: var(--ocean-light);
}

.mark-filter-mode-btn.active {
  background: rgba(var(--ocean-light-rgb), .12);
  color: var(--ocean-light);
  box-shadow: var(--island-glow-hover);
}

.mark-filter-tags {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.mark-filter-tag {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  color: var(--ocean-foam);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--island-glow);
  border: 1px solid #0000;
  border-radius: 100px;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  font-size: .6rem;
  font-weight: 600;
  display: inline-flex;
}

.mark-filter-tag:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  color: var(--ocean-light);
}

.mark-filter-tag-icon {
  font-size: .7rem;
  line-height: 1;
}

.mark-filter-tag-label {
  line-height: 1.2;
}

.mark-filter-tag-count {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  border-radius: 100px;
  padding: 0 5px;
  font-size: .52rem;
  font-weight: 600;
  line-height: 13px;
}

.mark-color-green.active {
  border-color: rgba(var(--success-rgb), .3);
  color: var(--success);
  background: rgba(var(--success-rgb), .15) !important;
}

.mark-color-red.active {
  border-color: rgba(var(--error-rgb), .3);
  color: var(--error);
  background: rgba(var(--error-rgb), .15) !important;
}

.mark-color-blue.active {
  border-color: rgba(var(--ocean-light-rgb), .3);
  color: var(--ocean-light);
  background: rgba(var(--ocean-light-rgb), .15) !important;
}

.mark-color-orange.active {
  border-color: rgba(var(--warning-rgb), .3);
  color: var(--warning);
  background: rgba(var(--warning-rgb), .15) !important;
}

.mark-color-purple.active {
  border-color: rgba(var(--card-accent-video-rgb), .3);
  color: var(--card-accent-video);
  background: rgba(var(--card-accent-video-rgb), .15) !important;
}

.mark-color-gray.active {
  border-color: rgba(var(--text-tertiary-rgb), .3);
  color: var(--text-tertiary);
  background: rgba(var(--text-tertiary-rgb), .15) !important;
}

.mark-manager-overlay {
  background: rgba(var(--shadow-rgb, 25, 35, 42), .2);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  z-index: 10050;
  animation: materialOverlayIn var(--dur-2) var(--ease-out-expo);
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.mark-manager-panel {
  border-radius: var(--radius-lg);
  background: var(--glass-bg-near);
  width: 520px;
  max-width: 90vw;
  max-height: 80vh;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: var(--glass-shadow-near);
  animation: materialDialogIn var(--dur-3) var(--ease-out-back);
  flex-direction: column;
  display: flex;
  overflow: clip;
}

.mark-manager-header {
  border-bottom: 1px solid rgba(var(--ocean-deep-rgb), .06);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px 12px;
  display: flex;
}

.mark-manager-title {
  color: var(--ocean-deep);
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
}

.mark-manager-title svg {
  color: var(--ocean-light);
}

.mark-manager-close {
  cursor: pointer;
  width: 28px;
  height: 28px;
  color: var(--ocean-foam);
  transition: all var(--transition-fast);
  background: none;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mark-manager-close:hover {
  background: rgba(var(--ocean-light-rgb), .08);
  color: var(--ocean-light);
}

.mark-manager-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  min-height: 0;
  padding: 16px 24px;
  overflow-y: auto;
}

.mark-manager-body::-webkit-scrollbar {
  display: none;
}

.mark-manager-group {
  margin-bottom: 16px;
}

.mark-manager-group-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  display: flex;
}

.mark-manager-group-label {
  color: var(--ocean-mid);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .7rem;
  font-weight: 600;
}

.mark-manager-group-delete {
  cursor: pointer;
  width: 22px;
  height: 22px;
  color: var(--ocean-foam);
  transition: all var(--transition-fast);
  opacity: .5;
  background: none;
  border: none;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mark-manager-group-delete:hover {
  background: rgba(var(--error-rgb), .1);
  color: var(--error);
  opacity: 1;
}

.mark-manager-group-marks {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.mark-card {
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  transition: all var(--transition-fast);
  border: 1px solid;
  border-color: rgba(var(--ocean-deep-rgb), .08);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  display: flex;
}

.mark-card:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
}

.mark-card.editing {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  border-color: var(--ocean-cyan);
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.mark-card-icon {
  color: #fff;
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  font-size: .85rem;
  display: flex;
}

.mark-card-label {
  color: var(--ocean-deep);
  flex: 1;
  font-size: .76rem;
  font-weight: 500;
}

.mark-card-builtin-tag {
  color: var(--ocean-foam);
  background: rgba(var(--ocean-deep-rgb), .06);
  border-radius: 4px;
  flex-shrink: 0;
  padding: 2px 6px;
  font-size: .55rem;
  font-weight: 600;
}

.mark-card-actions {
  flex-shrink: 0;
  gap: 4px;
  display: flex;
}

.mark-card-edit-btn, .mark-card-delete-btn {
  cursor: pointer;
  width: 24px;
  height: 24px;
  transition: all var(--transition-fast);
  opacity: .5;
  background: none;
  border: none;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  font-size: .75rem;
  display: flex;
}

.mark-card-edit-btn:hover {
  background: rgba(var(--ocean-light-rgb), .08);
  opacity: 1;
}

.mark-card-delete-btn:hover {
  background: rgba(var(--error-rgb), .1);
  color: var(--error);
  opacity: 1;
}

.mark-card-edit-form {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.mark-card-edit-row {
  align-items: center;
  gap: 8px;
  display: flex;
}

.mark-card-edit-row input {
  border: 1px solid rgba(var(--ocean-deep-rgb), .1);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-deep);
  border-radius: 6px;
  outline: none;
  flex: 1;
  padding: 5px 10px;
  font-family: inherit;
  font-size: .75rem;
}

.mark-card-edit-row input:focus {
  border-color: var(--ocean-cyan);
  box-shadow: 0 0 8px rgba(var(--neon-glow-rgb), .15);
}

.mark-card-icon-picker {
  flex-wrap: wrap;
  gap: 3px;
  display: flex;
}

.mark-card-edit-actions {
  justify-content: flex-end;
  gap: 6px;
  display: flex;
}

.mark-manager-add-form {
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border: 1px solid rgba(var(--ocean-deep-rgb), .06);
  margin-bottom: 12px;
  padding: 12px;
}

.mark-manager-add-form-title {
  color: var(--ocean-mid);
  margin-bottom: 10px;
  font-size: .75rem;
  font-weight: 600;
}

.mark-manager-form-row {
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.mark-manager-form-row label {
  color: var(--ocean-foam);
  flex-shrink: 0;
  width: 36px;
  padding-top: 6px;
  font-size: .7rem;
  font-weight: 600;
}

.mark-manager-form-row input[type="text"] {
  border: 1px solid rgba(var(--ocean-deep-rgb), .1);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-deep);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  border-radius: 6px;
  outline: none;
  flex: 1;
  padding: 6px 12px;
  font-family: inherit;
  font-size: .76rem;
}

.mark-manager-form-row input[type="text"]:focus {
  border-color: var(--ocean-cyan);
  box-shadow: 0 0 8px rgba(var(--neon-glow-rgb), .15);
}

.mark-manager-form-row select {
  border: 1px solid rgba(var(--ocean-deep-rgb), .1);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-deep);
  cursor: pointer;
  border-radius: 6px;
  outline: none;
  flex: 1;
  padding: 6px 12px;
  font-family: inherit;
  font-size: .76rem;
}

.mark-manager-icon-picker {
  flex-wrap: wrap;
  flex: 1;
  gap: 4px;
  display: flex;
}

.mark-manager-icon-option {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  cursor: pointer;
  width: 28px;
  height: 28px;
  transition: all var(--transition-fast);
  border: 1px solid #0000;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  font-size: .85rem;
  display: flex;
}

.mark-manager-icon-option:hover {
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-far, .68));
  border-color: rgba(var(--ocean-deep-rgb), .1);
}

.mark-manager-icon-option.active {
  background: rgba(var(--ocean-light-rgb), .12);
  border-color: var(--ocean-cyan);
  box-shadow: 0 0 8px rgba(var(--neon-glow-rgb), .15);
}

.mark-manager-icon-option.small {
  width: 24px;
  height: 24px;
  font-size: .75rem;
}

.mark-manager-color-picker {
  flex: 1;
  gap: 6px;
  display: flex;
}

.mark-manager-color-option {
  cursor: pointer;
  width: 24px;
  height: 24px;
  transition: all var(--transition-fast);
  border: 2px solid #0000;
  border-radius: 50%;
  padding: 0;
}

.mark-manager-color-option:hover {
  transform: scale(1.15);
}

.mark-manager-color-option.active {
  box-shadow: 0 0 0 2px var(--ocean-cyan), 0 2px 8px rgba(var(--shadow-rgb), .15);
  border-color: #fff;
}

.mark-manager-form-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
  display: flex;
}

.mark-manager-btn-cancel, .mark-manager-btn-confirm {
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  border-radius: 6px;
  padding: 6px 18px;
  font-size: .72rem;
  font-weight: 600;
}

.mark-manager-btn-cancel {
  background: rgba(var(--ocean-deep-rgb), .06);
  color: var(--ocean-foam);
}

.mark-manager-btn-cancel:hover {
  background: rgba(var(--ocean-deep-rgb), .12);
}

.mark-manager-btn-confirm {
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-mid));
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--ocean-light-rgb), .2);
}

.mark-manager-btn-confirm:hover {
  box-shadow: 0 4px 12px rgba(var(--ocean-light-rgb), .3);
  transform: translateY(-1px);
}

.mark-manager-btn-confirm:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.mark-manager-btn-cancel.small, .mark-manager-btn-confirm.small {
  padding: 4px 14px;
  font-size: .68rem;
}

.mark-manager-add-buttons {
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}

.mark-manager-add-btn {
  border: 1px dashed rgba(var(--ocean-light-rgb), .2);
  border-radius: var(--radius-sm);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  color: var(--ocean-foam);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: .72rem;
  font-weight: 600;
  display: flex;
}

.mark-manager-add-btn:hover {
  background: rgba(var(--ocean-light-rgb), .06);
  border-color: var(--ocean-cyan);
  color: var(--ocean-light);
}

.mark-manager-footer {
  border-top: 1px solid rgba(var(--ocean-deep-rgb), .06);
  flex-shrink: 0;
  padding: 10px 24px 16px;
}

.mark-manager-footer span {
  color: var(--ocean-foam);
  opacity: .7;
  font-size: .65rem;
}

.material-thumb.has-marks {
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .15), var(--island-glow);
}

.material-thumb.has-marks:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--neon-glow-rgb), .25), var(--island-glow-hover);
}

.material-list-row.has-marks {
  box-shadow: inset 2px 0 0 rgba(var(--neon-glow-rgb), .2);
}

.material-list-mark-wrapper {
  flex-shrink: 0;
  position: relative;
}

.material-list-mark-btn {
  cursor: pointer;
  color: var(--ocean-foam);
  opacity: .5;
  transition: all var(--transition-fast);
  background: none;
  border: none;
  border-radius: 4px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  display: flex;
  position: relative;
}

.material-list-row:hover .material-list-mark-btn {
  opacity: 1;
}

.material-list-mark-btn:hover {
  background: rgba(var(--ocean-light-rgb), .08);
  color: var(--ocean-light);
}

.material-list-mark-count {
  background: var(--ocean-cyan);
  color: #fff;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  min-width: 14px;
  height: 14px;
  margin-left: 2px;
  padding: 0 3px;
  font-size: .5rem;
  font-weight: 600;
  line-height: 1;
  display: flex;
}

.material-mark-dropdown {
  border-radius: var(--radius-md);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-near, .88));
  min-width: 200px;
  max-width: 280px;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  box-shadow: var(--glass-shadow-near), 0 0 0 1px rgba(var(--glass-tint-rgb), .15), 0 12px 40px rgba(var(--ocean-deep-rgb), .15);
  z-index: 200;
  animation: markPopupIn var(--dur-2) var(--ease-out-expo);
  padding: 6px;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  overflow: clip;
}

.material-mark-dropdown-header {
  color: var(--ocean-foam);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(var(--ocean-deep-rgb), .06);
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding: 4px 8px 6px;
  font-size: .65rem;
  font-weight: 600;
  display: flex;
}

.material-mark-dropdown-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  display: flex;
  overflow-y: auto;
}

.material-mark-dropdown-body::-webkit-scrollbar {
  display: none;
}

.material-mark-dropdown-group {
  flex-direction: column;
  gap: 1px;
  display: flex;
}

.material-mark-dropdown-group-label {
  color: var(--ocean-foam);
  opacity: .6;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 8px;
  font-size: .58rem;
  font-weight: 600;
}

.material-mark-dropdown-items {
  flex-direction: column;
  gap: 1px;
  display: flex;
}

.material-mark-dropdown-item {
  color: var(--ocean-deep);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 8px;
  font-size: .72rem;
  font-weight: 500;
  display: flex;
}

.material-mark-dropdown-item:hover {
  background: rgba(var(--ocean-light-rgb), .06);
}

.material-mark-dropdown-item.active {
  font-weight: 600;
}

.material-mark-dropdown-item-icon {
  flex-shrink: 0;
  font-size: .8rem;
  line-height: 1;
}

.material-mark-dropdown-item-label {
  flex: 1;
}

.material-mark-dropdown-item-check {
  color: var(--ocean-cyan);
  flex-shrink: 0;
  font-size: .65rem;
  font-weight: 600;
}

.material-mark-dropdown-item.mark-color-green.active {
  background: rgba(var(--success-rgb), .08);
  border-color: rgba(var(--success-rgb), .2);
}

.material-mark-dropdown-item.mark-color-red.active {
  background: rgba(var(--error-rgb), .08);
  border-color: rgba(var(--error-rgb), .2);
}

.material-mark-dropdown-item.mark-color-blue.active {
  background: rgba(var(--ocean-light-rgb), .08);
  border-color: rgba(var(--ocean-light-rgb), .2);
}

.material-mark-dropdown-item.mark-color-orange.active {
  background: rgba(var(--warning-rgb), .08);
  border-color: rgba(var(--warning-rgb), .2);
}

.material-mark-dropdown-item.mark-color-purple.active {
  background: rgba(var(--card-accent-video-rgb), .08);
  border-color: rgba(var(--card-accent-video-rgb), .2);
}

.material-mark-dropdown-item.mark-color-gray.active {
  background: rgba(var(--text-tertiary-rgb), .08);
  border-color: rgba(var(--text-tertiary-rgb), .2);
}

.material-mark-dropdown-custom {
  border-top: 1px solid rgba(var(--ocean-deep-rgb), .06);
  gap: 4px;
  margin-top: 4px;
  padding: 6px 4px 2px;
  display: flex;
}

.material-mark-dropdown-input {
  border: 1px solid rgba(var(--ocean-light-rgb), .15);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  min-width: 0;
  color: var(--ocean-deep);
  transition: border-color var(--transition-fast);
  border-radius: 6px;
  outline: none;
  flex: 1;
  padding: 5px 8px;
  font-size: .7rem;
}

.material-mark-dropdown-input:focus {
  border-color: var(--ocean-cyan);
}

.material-mark-dropdown-input::placeholder {
  color: var(--ocean-foam);
  opacity: .5;
}

.material-mark-dropdown-add-btn {
  background: var(--ocean-cyan);
  color: #fff;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  padding: 5px 10px;
  font-size: .68rem;
  font-weight: 600;
}

.material-mark-dropdown-add-btn:hover:not(:disabled) {
  background: var(--ocean-light);
}

.material-mark-dropdown-add-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.material-toolbar-filter {
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  display: flex;
}

.material-toolbar-filter .mark-filter-modes {
  flex: none;
}

.material-toolbar-filter .mark-filter-mode-btn {
  flex: none;
  padding: 3px 10px;
}

.material-toolbar-filter .mark-filter-tags {
  flex-wrap: wrap;
}

.material-context-mark-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  display: flex;
  overflow-y: auto;
}

.material-context-mark-list::-webkit-scrollbar {
  display: none;
}

.material-context-mark-group {
  flex-direction: column;
  gap: 1px;
  display: flex;
}

.material-context-mark-group-label {
  color: var(--ocean-foam);
  opacity: .6;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 4px 12px 2px;
  font-size: .58rem;
  font-weight: 600;
}

.material-context-mark-icon {
  text-align: center;
  flex-shrink: 0;
  width: 14px;
  font-size: .85rem;
  line-height: 1;
}

.material-context-mark-check {
  color: var(--ocean-cyan);
  flex-shrink: 0;
  margin-left: auto;
  font-size: .65rem;
  font-weight: 600;
}

.material-context-item.mark-color-green.marked {
  background: rgba(var(--success-rgb), .08);
}

.material-context-item.mark-color-red.marked {
  background: rgba(var(--error-rgb), .08);
}

.material-context-item.mark-color-blue.marked {
  background: rgba(var(--ocean-light-rgb), .08);
}

.material-context-item.mark-color-orange.marked {
  background: rgba(var(--warning-rgb), .08);
}

.material-context-item.mark-color-purple.marked {
  background: rgba(var(--card-accent-video-rgb), .08);
}

.material-context-item.mark-color-gray.marked {
  background: rgba(var(--text-tertiary-rgb), .08);
}

.material-context-mark-custom {
  gap: 4px;
  padding: 4px 8px;
  display: flex;
}

.material-context-mark-input {
  border: 1px solid rgba(var(--ocean-light-rgb), .15);
  background: rgba(var(--glass-tint-rgb), var(--glass-alpha-mid, .8));
  min-width: 0;
  color: var(--ocean-deep);
  transition: border-color var(--transition-fast);
  border-radius: 4px;
  outline: none;
  flex: 1;
  padding: 4px 8px;
  font-size: .7rem;
}

.material-context-mark-input:focus {
  border-color: var(--ocean-cyan);
}

.material-context-mark-input::placeholder {
  color: var(--ocean-foam);
  opacity: .5;
}

.material-context-mark-add {
  background: var(--ocean-cyan);
  color: #fff;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  border: none;
  border-radius: 4px;
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: .65rem;
  font-weight: 600;
}

.material-context-mark-add:hover:not(:disabled) {
  background: var(--ocean-light);
}

.material-context-mark-add:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.mpd-viewer {
  z-index: 10001;
  -webkit-app-region: no-drag;
  app-region: no-drag;
  background: rgba(var(--glass-bg-rgb, 255, 255, 255), .92);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  animation: mpdFadeIn var(--dur-2) ease;
  flex-direction: column;
  display: flex;
  position: fixed;
  inset: 0;
}

.mpd-viewer.mpd-closing {
  animation: mpdFadeOut var(--dur-2) ease forwards;
}

.mpd-prompt-island {
  z-index: 10;
  border: 1px solid var(--border-subtle);
  background: rgba(var(--glass-bg-rgb, 255, 255, 255), .78);
  width: min(320px, 30vw);
  -webkit-backdrop-filter: saturate(1.3) blur(calc(16px * var(--glass-blur-level, 1)));
  backdrop-filter: saturate(1.3) blur(calc(16px * var(--glass-blur-level, 1)));
  box-shadow: var(--shadow-card);
  border-radius: 16px;
  flex-direction: column;
  display: flex;
  position: fixed;
  top: 76px;
  bottom: 64px;
  left: 18px;
  overflow: hidden;
}

.mpd-prompt-head {
  color: var(--ocean-deep, var(--yue-material-white));
  border-bottom: 1px solid rgba(var(--glass-tint-rgb, 255, 255, 255), .08);
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .05);
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: .8rem;
  font-weight: 600;
  display: flex;
}

.mpd-prompt-head i {
  color: var(--accent-cyan, #37c6ff);
}

.mpd-prompt-body {
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-user-select: text;
  user-select: text;
  flex: 1;
  padding: 14px;
  font-size: .82rem;
  line-height: 1.75;
  overflow-y: auto;
}

.mpd-meta-card.mpd-prompt-card {
  -webkit-user-select: text;
  user-select: text;
  flex-direction: column;
  width: min(360px, 34vw);
  max-height: calc(100% - 150px);
  display: flex;
  top: 70px;
  left: auto;
  right: 16px;
}

.mpd-prompt-card .mpd-meta-header {
  flex-shrink: 0;
}

.mpd-meta-card.mpd-prompt-card .mpd-prompt-body {
  min-height: 0;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
  flex: 1;
  padding: 4px 2px 2px 0;
  font-family: Microsoft YaHei, 微软雅黑, PingFang SC, Segoe UI, sans-serif;
  font-size: .82rem;
  line-height: 1.75;
  overflow-y: auto;
}

.mpd-prompt-copy-btn {
  border: 1px solid rgba(var(--glass-tint-rgb, 255, 255, 255), .1);
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .06);
  width: 28px;
  height: 28px;
  color: var(--ocean-light, var(--yue-material-blue));
  cursor: pointer;
  transition: all var(--dur-1) ease;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  display: flex;
}

.mpd-prompt-copy-btn:hover {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .14);
  border-color: rgba(var(--ocean-light-rgb, 100, 200, 255), .28);
}

.mpd-prompt-copy-btn svg {
  width: 13px;
  height: 13px;
}

.mpd-prompt-ctx {
  z-index: 10002;
  background: rgba(var(--glass-bg-rgb, 255, 255, 255), .97);
  min-width: 150px;
  -webkit-backdrop-filter: saturate(1.3) blur(calc(16px * var(--glass-blur-level, 1)));
  backdrop-filter: saturate(1.3) blur(calc(16px * var(--glass-blur-level, 1)));
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  border-radius: 12px;
  padding: 5px;
  position: fixed;
}

.mpd-prompt-ctx-item {
  width: 100%;
  color: var(--ocean-deep, var(--yue-material-white));
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: .8rem;
  font-weight: 600;
  display: flex;
}

.mpd-prompt-ctx-item:hover {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .12);
}

.mpd-prompt-ctx-item svg {
  width: 14px;
  height: 14px;
}

.mpd-topbar {
  background: rgba(var(--glass-bg-rgb, 18, 28, 48), var(--glass-alpha-mid, .55));
  border-bottom: 1px solid rgba(var(--glass-tint-rgb, 255, 255, 255), .08);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  display: flex;
}

.mpd-topbar-info {
  flex: 1;
  min-width: 0;
}

.mpd-filename {
  color: var(--ocean-deep, var(--yue-material-white));
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .85rem;
  font-weight: 600;
  display: block;
  overflow: hidden;
}

.mpd-rename-input {
  border: 1px solid var(--ocean-cyan, var(--yue-material-blue));
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .08);
  width: 100%;
  max-width: 480px;
  color: var(--ocean-deep, var(--yue-material-white));
  box-sizing: border-box;
  border-radius: 8px;
  outline: none;
  padding: 5px 10px;
  font-size: .82rem;
  font-weight: 600;
}

.mpd-rename-input:focus {
  box-shadow: 0 0 0 3px rgba(var(--yue-material-blue-rgb), .1);
}

.mpd-topbar-actions {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  display: flex;
}

.mpd-action-btn {
  border: 1px solid rgba(var(--glass-tint-rgb, 255, 255, 255), .08);
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .05);
  width: 34px;
  height: 34px;
  color: var(--ocean-deep, var(--yue-material-white));
  cursor: pointer;
  transition: all var(--dur-1) ease;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mpd-action-btn svg {
  width: 15px;
  height: 15px;
}

.mpd-action-btn:hover:not(:disabled) {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .12);
  border-color: rgba(var(--ocean-light-rgb, 100, 200, 255), .22);
  color: var(--ocean-light, var(--yue-material-blue));
}

.mpd-action-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.mpd-action-danger:hover:not(:disabled) {
  color: #ff7878;
  background: #ff505026;
  border-color: #ff50504d;
}

.mpd-action-divider {
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .1);
  width: 1px;
  height: 20px;
  margin: 0 4px;
}

.mpd-icon-spin {
  animation: .8s linear infinite mpdSpin;
}

.mpd-stage-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
}

.mpd-stage {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background-color: rgba(var(--glass-tint-rgb, 20, 80, 190), .02);
  background-image: linear-gradient(45deg, #465a6e12 25%, #0000 25% 75%, #465a6e12 75%), linear-gradient(45deg, #465a6e12 25%, #0000 25% 75%, #465a6e12 75%);
  background-position: 0 0, 7px 7px;
  background-size: 14px 14px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mpd-stage.mpd-can-pan {
  cursor: grab;
}

.mpd-stage.mpd-dragging {
  cursor: grabbing;
}

.mpd-image {
  transform-origin: center;
  pointer-events: none;
  -webkit-user-drag: none;
  box-shadow: 0 8px 40px rgba(var(--yue-ui-black-rgb), .45);
  will-change: transform;
  z-index: 2;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.mpd-image-ph {
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  filter: blur(24px) saturate(1.05) brightness(.92);
  opacity: .5;
  z-index: 1;
  width: auto;
  max-width: calc(100vw - 150px);
  height: auto;
  max-height: calc(100vh - 240px);
  transition: opacity var(--dur-3) ease;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mpd-image-ph-done {
  opacity: 0;
}

.mpd-video-frame {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.mpd-video-inner {
  pointer-events: auto;
  transform-origin: center;
  max-width: calc(100% - 96px);
  max-height: calc(100% - 96px);
  transition: transform var(--dur-1) ease-out;
  will-change: transform;
  position: relative;
}

.mpd-video {
  object-fit: contain;
  width: auto;
  max-width: calc(100vw - 150px);
  height: auto;
  max-height: calc(100vh - 240px);
  box-shadow: 0 18px 60px rgba(var(--yue-ui-black-rgb), .55), 0 0 0 1px rgba(var(--ocean-light-rgb, 100, 200, 255), .18), inset 0 1px 0 rgba(var(--yue-material-white-rgb), .06);
  background: #000;
  border-radius: 2px;
  outline: none;
  display: block;
}

.mpd-video-inner:fullscreen {
  background: #000;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  display: flex;
}

.mpd-video-inner:fullscreen .mpd-video {
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

.mpd-status {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .55));
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mpd-status-icon {
  width: 26px;
  height: 26px;
}

.mpd-error {
  text-align: center;
  background: #ff464612;
  border: 1px solid #ff5a5a47;
  border-radius: 14px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: min(480px, 80vw);
  padding: 26px 32px;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mpd-error-icon {
  width: 30px;
  height: 30px;
  color: rgba(var(--yue-material-danger-rgb), 1);
}

.mpd-error-title {
  color: rgba(var(--yue-material-danger-rgb), 1);
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
}

.mpd-error-file {
  color: var(--ocean-deep, var(--yue-material-white));
  word-break: break-all;
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
}

.mpd-error-hint {
  color: #ff8c8cd9;
  margin: 0;
  font-size: .72rem;
  line-height: 1.5;
}

.mpd-error-retry {
  color: #ff8282;
  cursor: pointer;
  transition: all var(--dur-1) ease;
  background: #ff505024;
  border: 1px solid #ff5a5a66;
  border-radius: 8px;
  margin-top: 6px;
  padding: 6px 18px;
  font-size: .76rem;
  font-weight: 600;
}

.mpd-error-retry:hover {
  background: #ff505038;
}

.mpd-nav {
  border: 1px solid rgba(var(--glass-tint-rgb, 255, 255, 255), .1);
  background: rgba(var(--glass-bg-rgb, 18, 28, 48), .55);
  width: 44px;
  height: 44px;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  color: var(--ocean-deep, var(--yue-material-white));
  cursor: pointer;
  z-index: 5;
  transition: all var(--dur-1) ease;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.mpd-nav svg {
  width: 20px;
  height: 20px;
}

.mpd-nav:hover {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .15);
  border-color: rgba(var(--ocean-light-rgb, 100, 200, 255), .3);
  color: var(--ocean-light, var(--yue-material-blue));
}

.mpd-nav-left {
  left: 16px;
}

.mpd-nav-right {
  right: 16px;
}

.mpd-bottombar {
  background: rgba(var(--glass-bg-rgb, 18, 28, 48), var(--glass-alpha-mid, .55));
  border-top: 1px solid rgba(var(--glass-tint-rgb, 255, 255, 255), .08);
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .55));
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  font-size: .74rem;
  display: flex;
}

.mpd-bottombar-left {
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.mpd-footer-count {
  color: var(--ocean-deep, var(--yue-material-white));
  font-weight: 600;
}

.mpd-footer-sep {
  opacity: .35;
}

.mpd-zoom-controls {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  display: flex;
}

.mpd-zoom-percent {
  border: 1px solid rgba(var(--glass-tint-rgb, 255, 255, 255), .08);
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .05);
  min-width: 58px;
  height: 34px;
  color: var(--ocean-deep, var(--yue-material-white));
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: all var(--dur-1) ease;
  border-radius: 9px;
  padding: 0 8px;
  font-size: .76rem;
  font-weight: 600;
}

.mpd-zoom-percent:hover:not(:disabled) {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .12);
  border-color: rgba(var(--ocean-light-rgb, 100, 200, 255), .22);
  color: var(--ocean-light, var(--yue-material-blue));
}

.mpd-zoom-percent:disabled {
  opacity: .35;
  cursor: not-allowed;
}

@keyframes mpdFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mpdFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes mpdSpin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 600px) {
  .mpd-nav {
    width: 38px;
    height: 38px;
  }

  .mpd-bottombar {
    flex-direction: column;
    gap: 8px;
  }
}

.mpd-meta-card {
  z-index: 6;
  background: linear-gradient(145deg, rgba(var(--glass-bg-rgb, 18, 28, 48), .96), rgba(var(--glass-bg-rgb, 18, 28, 48), .9));
  min-width: 250px;
  max-width: 320px;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border: 1px solid rgba(var(--ocean-light-rgb, 100, 200, 255), .18);
  box-shadow: 0 12px 40px rgba(var(--yue-ui-black-rgb), .35), inset 0 1px 0 rgba(var(--yue-material-white-rgb), .08);
  animation: mpdFadeIn var(--dur-2) ease;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto;
  border-radius: 16px;
  padding: 14px 16px;
  position: absolute;
  top: 70px;
  left: 16px;
}

.mpd-meta-card:before {
  content: "";
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(var(--yue-material-blue-rgb), .55), rgba(var(--yue-ui-sky-500-rgb), .08), #ffaa5047);
  -webkit-mask: linear-gradient(var(--yue-material-white) 0 0) content-box, linear-gradient(var(--yue-material-white) 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
  -webkit-mask-composite: xor;
  padding: 1px;
  position: absolute;
  inset: -1px;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.mpd-meta-header {
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}

.mpd-meta-title-icon {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .16);
  width: 28px;
  height: 28px;
  color: var(--ocean-light, var(--yue-material-blue));
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mpd-meta-title-icon svg {
  width: 15px;
  height: 15px;
}

.mpd-meta-title {
  color: var(--ocean-deep, var(--yue-material-white));
  letter-spacing: .5px;
  font-size: .82rem;
  font-weight: 600;
}

.mpd-meta-format {
  letter-spacing: 1px;
  color: var(--yue-material-deep);
  background: linear-gradient(135deg, var(--yue-material-blue-light), var(--yue-ui-amber-100-bright));
  box-shadow: 0 2px 10px rgba(var(--yue-material-blue-rgb), .25);
  border-radius: 20px;
  margin-left: auto;
  padding: 3px 10px;
  font-size: .68rem;
  font-weight: 650;
}

.mpd-meta-grid {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.mpd-meta-item {
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .05);
  border: 1px solid rgba(var(--glass-tint-rgb, 255, 255, 255), .06);
  transition: transform var(--dur-1) ease, background var(--dur-1) ease;
  border-radius: 12px;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  display: flex;
}

.mpd-meta-item:hover {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .08);
  transform: translateY(-1px);
}

.mpd-meta-label {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .55));
  align-items: center;
  gap: 5px;
  font-size: .66rem;
  font-weight: 600;
  display: flex;
}

.mpd-meta-label svg {
  width: 12px;
  height: 12px;
  color: var(--ocean-light, var(--yue-material-blue));
}

.mpd-meta-value {
  color: var(--ocean-deep, var(--yue-material-white));
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
}

.mpd-meta-card {
  min-width: 300px;
  max-width: 360px;
  animation: mpdMetaIn var(--dur-3) var(--ease-out-expo) both;
  border-radius: 18px;
  padding: 16px 18px;
  overflow: visible;
}

.mpd-meta-card:before {
  background: linear-gradient(120deg, rgba(var(--yue-material-blue-rgb), .7), rgba(var(--yue-ui-violet-400-rgb), .5), #ffb45a8c, #64ffbe73, rgba(var(--yue-material-blue-rgb), .7));
  background-position: 50%;
  background-size: 300% 300%;
}

.mpd-meta-card:after {
  content: "";
  background: radial-gradient(circle, rgba(var(--yue-material-blue-rgb), .18), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  position: absolute;
  top: -30px;
  right: -30px;
}

.mpd-meta-card.mpd-copy-notice {
  z-index: 12;
  text-align: center;
  width: min(360px, 84vw);
  animation: mpdMetaIn var(--dur-3) var(--ease-out-expo) both;
  padding: 14px 18px;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}

.mpd-copy-notice .mpd-meta-header {
  justify-content: center;
  margin-bottom: 6px;
}

.mpd-copy-notice-msg {
  color: var(--text-primary, #20242c);
  margin: 0;
  font-size: .78rem;
  line-height: 1.6;
}

.mpd-meta-header {
  margin-bottom: 14px;
}

.mpd-meta-megapixel {
  letter-spacing: .5px;
  color: var(--yue-material-deep);
  background: linear-gradient(135deg, var(--yue-material-purple), var(--yue-material-blue-light));
  white-space: nowrap;
  border-radius: 20px;
  padding: 3px 9px;
  font-size: .62rem;
  font-weight: 650;
  box-shadow: 0 2px 8px #968cff40;
}

.mpd-meta-grid {
  gap: 10px;
}

.mpd-meta-item {
  border-radius: 13px;
  min-width: 0;
  padding: 9px 11px;
}

.mpd-meta-item:hover {
  transform: translateY(-2px)scale(1.01);
}

.mpd-meta-value {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  min-width: 0;
  line-height: 1.35;
}

.mpd-meta-item--blue .mpd-meta-label svg {
  color: #6cc8ff;
}

.mpd-meta-item--blue:hover {
  background: #6cc8ff1a;
  border-color: #6cc8ff38;
}

.mpd-meta-item--purple .mpd-meta-label svg {
  color: var(--yue-material-purple);
}

.mpd-meta-item--purple:hover {
  background: #b7a6ff1a;
  border-color: #b7a6ff38;
}

.mpd-meta-item--orange .mpd-meta-label svg {
  color: #ffb65c;
}

.mpd-meta-item--orange:hover {
  background: #ffb65c1a;
  border-color: #ffb65c38;
}

.mpd-meta-item--green .mpd-meta-label svg {
  color: #7ce0b0;
}

.mpd-meta-item--green:hover {
  background: #7ce0b01a;
  border-color: #7ce0b038;
}

@keyframes mpdMetaIn {
  from {
    opacity: 0;
    transform: translateY(-10px)scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.mpd-shortcuts-hint {
  cursor: help;
  color: var(--ocean-light, var(--yue-material-blue));
  font-weight: 600;
}

.mpd-shortcuts {
  z-index: 50;
  background: rgba(var(--glass-bg-rgb, 255, 255, 255), .45);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  animation: mpdFadeIn var(--dur-2) ease;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.mpd-shortcuts-panel {
  background: linear-gradient(145deg, rgba(var(--glass-bg-rgb, 255, 255, 255), .97), rgba(var(--glass-bg-rgb, 255, 255, 255), .92));
  border: 1px solid var(--border-subtle);
  width: min(520px, 90vw);
  max-height: 80vh;
  box-shadow: var(--shadow-card);
  animation: mpdMetaIn var(--dur-2) var(--ease-out-expo) both;
  border-radius: 18px;
  padding: 22px 24px;
  overflow-y: auto;
}

.mpd-shortcuts-title {
  color: var(--ocean-deep, var(--yue-material-white));
  letter-spacing: 1px;
  margin-bottom: 14px;
  font-size: 1rem;
  font-weight: 650;
}

.mpd-shortcuts-grid {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.mpd-shortcut-row {
  background: rgba(var(--yue-material-white-rgb), .04);
  border: 1px solid rgba(var(--yue-material-white-rgb), .06);
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  display: flex;
}

.mpd-shortcut-keys {
  background: rgba(var(--accent-cyan-rgb, 10, 108, 255), .1);
  color: rgb(var(--accent-cyan-rgb, 10, 108, 255));
  border: 1px solid rgba(var(--accent-cyan-rgb, 10, 108, 255), .25);
  white-space: nowrap;
  text-align: center;
  border-radius: 6px;
  min-width: 64px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
}

.mpd-shortcut-label {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .6));
  font-size: .76rem;
}

.mpd-shortcuts-close {
  text-align: center;
  color: rgba(var(--yue-material-white-rgb), .4);
  margin-top: 12px;
  font-size: .68rem;
}

@media (max-width: 520px) {
  .mpd-shortcuts-grid {
    grid-template-columns: 1fr;
  }
}

.mpd-shortcut-bar {
  z-index: 6;
  background: linear-gradient(145deg, rgba(var(--glass-bg-rgb, 18, 28, 48), .96), rgba(var(--glass-bg-rgb, 18, 28, 48), .9));
  max-width: 90%;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  border: 1px solid rgba(var(--ocean-light-rgb, 100, 200, 255), .18);
  box-shadow: 0 12px 40px rgba(var(--yue-ui-black-rgb), .35), inset 0 1px 0 rgba(var(--yue-material-white-rgb), .08);
  -webkit-user-select: none;
  user-select: none;
  border-radius: 18px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  display: flex;
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
}

.mpd-shortcut-bar:before {
  content: "";
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(var(--yue-material-blue-rgb), .55), rgba(var(--yue-ui-sky-500-rgb), .08), #ffaa5047);
  -webkit-mask: linear-gradient(var(--yue-material-white) 0 0) content-box, linear-gradient(var(--yue-material-white) 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
  -webkit-mask-composite: xor;
  padding: 1px;
  position: absolute;
  inset: -1px;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.mpd-shortcut-chip {
  color: var(--text-primary, #20242c);
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  font-weight: 600;
  display: inline-flex;
}

.mpd-shortcut-chip kbd {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .12);
  border: 1px solid rgba(var(--ocean-light-rgb, 100, 200, 255), .28);
  color: var(--ocean-deep, #20242c);
  border-radius: 5px;
  padding: 2px 6px;
  font-family: inherit;
  font-size: .64rem;
  font-weight: 600;
}

.mpd-shortcut-chip-btn {
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .06);
  color: var(--text-primary, #20242c);
  cursor: pointer;
  transition: background var(--dur-1) ease;
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font-size: .68rem;
  display: inline-flex;
}

.mpd-shortcut-chip-btn:hover {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .14);
}

.batch-rr-overlay {
  -webkit-backdrop-filter: blur(calc(16px * var(--glass-blur-level, 1)));
  backdrop-filter: blur(calc(16px * var(--glass-blur-level, 1)));
  z-index: 10050;
  animation: materialOverlayIn var(--dur-2) var(--ease-out-expo);
  background: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.batch-rr-dialog {
  border-radius: var(--radius-lg, 18px);
  background: rgba(var(--glass-bg-rgb, 253, 254, 255), .92);
  width: min(94vw, 1640px);
  max-width: 96vw;
  height: min(88vh, 960px);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-deep)) blur(var(--glass-blur-deep));
  backdrop-filter: saturate(var(--glass-saturate-deep)) blur(var(--glass-blur-deep));
  box-shadow: var(--glass-shadow-near, 0 20px 60px rgba(var(--yue-ui-black-rgb), .5));
  animation: materialDialogIn var(--dur-3) var(--ease-out-back);
  flex-direction: column;
  display: flex;
  overflow: clip;
}

.batch-rr-rule-card {
  max-width: 780px;
}

.batch-rr-header {
  border-bottom: 1px solid rgba(var(--ocean-deep-rgb, 5, 12, 25), .08);
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 12px;
  display: flex;
}

.batch-rr-header-title {
  color: var(--ocean-deep, var(--yue-material-white));
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
}

.batch-rr-header-title svg {
  color: var(--ocean-light, var(--yue-material-blue));
}

.batch-rr-header-count {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .55));
  background: rgba(var(--ocean-cyan-rgb, 100, 200, 255), .1);
  border-radius: 20px;
  margin-left: auto;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 600;
}

.batch-rr-close {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .5));
  cursor: pointer;
  transition: all var(--transition-fast, var(--dur-1) ease);
  background: none;
  border: none;
  border-radius: 8px;
  align-items: center;
  padding: 6px;
  display: flex;
}

.batch-rr-close:hover {
  background: rgba(var(--error-rgb, 255, 90, 90), .12);
  color: var(--error, var(--yue-material-danger));
}

.batch-rr-steps {
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  display: flex;
}

.batch-rr-step {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .45));
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 600;
  display: flex;
}

.batch-rr-step-num {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .12);
  width: 22px;
  height: 22px;
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .5));
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .7rem;
  font-weight: 600;
  display: flex;
}

.batch-rr-step.done .batch-rr-step-num {
  background: rgba(var(--success-rgb, 60, 200, 130), .16);
  color: var(--success, var(--yue-material-green));
}

.batch-rr-step.active {
  color: var(--ocean-light, var(--yue-material-blue));
}

.batch-rr-step.active .batch-rr-step-num {
  background: rgba(var(--neon-glow-rgb, 100, 200, 255), .2);
  color: var(--ocean-light, var(--yue-material-blue));
  box-shadow: 0 0 10px rgba(var(--neon-glow-rgb, 100, 200, 255), .25);
}

.batch-rr-step-line {
  background: rgba(var(--ocean-deep-rgb, 5, 12, 25), .1);
  border-radius: 2px;
  flex: 1;
  height: 2px;
}

.batch-rr-body {
  flex: 1;
  gap: 14px;
  min-height: 0;
  padding: 4px 20px 0;
  display: flex;
}

.batch-rr-rules {
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-width: 0;
  padding: 4px 6px 12px 0;
  display: flex;
  overflow-y: auto;
}

.batch-rr-preview {
  border-left: 1px solid rgba(var(--ocean-deep-rgb, 5, 12, 25), .08);
  flex-direction: column;
  flex-shrink: 0;
  width: clamp(400px, 36vw, 780px);
  min-height: 0;
  padding-left: 14px;
  display: flex;
}

.batch-rr-toolbar {
  align-items: stretch;
  gap: 10px;
  display: flex;
}

.batch-rr-toolbar .batch-rr-add-wrap, .batch-rr-tpl-wrap {
  flex: 1;
  min-width: 0;
}

.batch-rr-tpl-wrap {
  z-index: 29;
  position: relative;
}

.batch-rr-tpl-btn {
  border: 1px solid rgba(var(--ocean-cyan-rgb, 100, 200, 255), .22);
  border-radius: var(--radius-sm, 10px);
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .04);
  width: 100%;
  color: var(--ocean-light, var(--yue-material-blue));
  cursor: pointer;
  transition: all var(--transition-fast, var(--dur-1) ease);
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: .78rem;
  font-weight: 600;
  display: flex;
}

.batch-rr-tpl-btn:hover {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .1);
  border-color: var(--ocean-light, var(--yue-material-blue));
  box-shadow: 0 0 14px rgba(var(--neon-glow-rgb, 100, 200, 255), .1);
}

.batch-rr-tpl-menu {
  z-index: 20;
  background: rgba(var(--glass-bg-rgb, 253, 254, 255), .97);
  border: 1px solid rgba(var(--ocean-cyan-rgb, 100, 200, 255), .2);
  border-radius: var(--radius-sm, 10px);
  box-shadow: var(--glass-shadow-near, 0 12px 40px rgba(var(--yue-ui-black-rgb), .5));
  animation: materialDialogIn var(--dur-2) var(--ease-out-expo);
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  display: flex;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
}

.batch-rr-tpl-head {
  color: var(--ocean-light, var(--yue-material-blue));
  border-bottom: 1px solid rgba(var(--ocean-deep-rgb, 5, 12, 25), .08);
  align-items: center;
  gap: 6px;
  padding: 2px 4px 4px;
  font-size: .72rem;
  font-weight: 600;
  display: flex;
}

.batch-rr-tpl-list {
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  display: flex;
  overflow-y: auto;
}

.batch-rr-tpl-item {
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .03);
  border: 1px solid #0000;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  display: flex;
}

.batch-rr-tpl-item:hover {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .06);
}

.batch-rr-tpl-info {
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.batch-rr-tpl-name {
  color: var(--ocean-deep, var(--yue-material-white));
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .74rem;
  font-weight: 600;
  overflow: hidden;
}

.batch-rr-tpl-meta {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .45));
  font-size: .62rem;
}

.batch-rr-tpl-apply {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .12);
  color: var(--ocean-light, var(--yue-material-blue));
  cursor: pointer;
  transition: background var(--dur-1) ease;
  border: none;
  border-radius: 7px;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: .68rem;
  font-weight: 600;
  display: inline-flex;
}

.batch-rr-tpl-apply:hover {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .22);
}

.batch-rr-tpl-del {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .4));
  cursor: pointer;
  transition: all var(--dur-1) ease;
  background: none;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  align-items: center;
  padding: 4px;
  display: flex;
}

.batch-rr-tpl-del:hover {
  background: rgba(var(--error-rgb, 255, 90, 90), .12);
  color: var(--error, var(--yue-material-danger));
}

.batch-rr-tpl-empty {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .45));
  text-align: center;
  padding: 14px 8px;
  font-size: .68rem;
  line-height: 1.6;
}

.batch-rr-tpl-save {
  border-top: 1px solid rgba(var(--ocean-deep-rgb, 5, 12, 25), .08);
  padding-top: 6px;
}

.batch-rr-tpl-save-btn {
  border: 1px dashed rgba(var(--ocean-cyan-rgb, 100, 200, 255), .3);
  width: 100%;
  color: var(--ocean-light, var(--yue-material-blue));
  cursor: pointer;
  transition: all var(--dur-1) ease;
  background: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: .7rem;
  font-weight: 600;
  display: flex;
}

.batch-rr-tpl-save-btn:hover:not(:disabled) {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .1);
}

.batch-rr-tpl-save-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.batch-rr-tpl-save-row {
  align-items: center;
  gap: 6px;
  display: flex;
}

.batch-rr-tpl-save-row .batch-rr-input {
  flex: 1;
  min-width: 0;
}

.batch-rr-tpl-save-go {
  background: linear-gradient(135deg, var(--ocean-light, var(--yue-material-blue)), var(--ocean-mid, var(--yue-material-blue-deep)));
  color: var(--yue-material-white);
  cursor: pointer;
  transition: opacity var(--dur-1) ease;
  border: none;
  border-radius: 8px;
  flex-shrink: 0;
  padding: 7px 12px;
  font-size: .7rem;
  font-weight: 600;
}

.batch-rr-tpl-save-go:hover:not(:disabled) {
  opacity: .9;
}

.batch-rr-tpl-save-go:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.batch-rr-add-wrap {
  z-index: 30;
  position: relative;
}

.batch-rr-add-btn {
  border: 1px dashed rgba(var(--ocean-light-rgb, 100, 200, 255), .35);
  border-radius: var(--radius-sm, 10px);
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .06);
  width: 100%;
  color: var(--ocean-light, var(--yue-material-blue));
  cursor: pointer;
  transition: all var(--transition-fast, var(--dur-1) ease);
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: .78rem;
  font-weight: 600;
  display: flex;
}

.batch-rr-add-btn:hover {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .12);
  border-color: var(--ocean-light, var(--yue-material-blue));
  box-shadow: 0 0 14px rgba(var(--neon-glow-rgb, 100, 200, 255), .12);
}

.batch-rr-add-chevron {
  transition: transform var(--dur-2) ease;
  margin-left: auto;
}

.batch-rr-add-chevron.open {
  transform: rotate(180deg);
}

.batch-rr-add-menu {
  z-index: 20;
  background: rgba(var(--glass-bg-rgb, 253, 254, 255), .96);
  border: 1px solid rgba(var(--ocean-cyan-rgb, 100, 200, 255), .2);
  border-radius: var(--radius-sm, 10px);
  box-shadow: var(--glass-shadow-near, 0 12px 40px rgba(var(--yue-ui-black-rgb), .5));
  animation: materialDialogIn var(--dur-2) var(--ease-out-expo);
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  display: flex;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
}

.batch-rr-add-item {
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-1) ease;
  background: none;
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  display: flex;
}

.batch-rr-add-item:hover {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .1);
}

.batch-rr-add-item-icon {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .12);
  width: 30px;
  height: 30px;
  color: var(--ocean-light, var(--yue-material-blue));
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.batch-rr-add-item-text {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.batch-rr-add-item-label {
  color: var(--ocean-deep, var(--yue-material-white));
  font-size: .75rem;
  font-weight: 600;
}

.batch-rr-add-item-hint {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .5));
  font-size: .64rem;
  line-height: 1.4;
}

.batch-rr-empty-rules {
  text-align: center;
  border: 1px dashed rgba(var(--ocean-cyan-rgb, 100, 200, 255), .18);
  border-radius: var(--radius-sm, 10px);
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .04);
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 18px;
  display: flex;
}

.batch-rr-empty-icon {
  color: var(--ocean-light, var(--yue-material-blue));
  opacity: .8;
}

.batch-rr-empty-title {
  color: var(--ocean-light, var(--yue-material-blue));
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
}

.batch-rr-empty-sub {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .5));
  margin: 0;
  font-size: .7rem;
  line-height: 1.6;
}

.batch-rr-quick-btn {
  background: linear-gradient(135deg, var(--ocean-light, var(--yue-material-blue)), var(--ocean-mid, var(--yue-material-blue-deep)));
  color: var(--yue-material-white);
  cursor: pointer;
  transition: all var(--transition-fast, var(--dur-1) ease);
  box-shadow: 0 4px 14px rgba(var(--ocean-light-rgb, 100, 200, 255), .3);
  border: none;
  border-radius: 20px;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 16px;
  font-size: .72rem;
  font-weight: 600;
  display: inline-flex;
}

.batch-rr-quick-btn:hover {
  box-shadow: 0 6px 18px rgba(var(--ocean-light-rgb, 100, 200, 255), .4);
  transform: translateY(-1px);
}

.batch-rr-rule-card {
  border: 1px solid rgba(var(--ocean-deep-rgb, 5, 12, 25), .1);
  border-radius: var(--radius-sm, 10px);
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .04);
  transition: border-color var(--transition-fast, var(--dur-1) ease), box-shadow var(--transition-fast, var(--dur-1) ease);
  overflow: clip;
}

.batch-rr-rule-card:hover {
  border-color: rgba(var(--ocean-light-rgb, 100, 200, 255), .3);
  box-shadow: 0 0 14px rgba(var(--neon-glow-rgb, 100, 200, 255), .06);
}

.batch-rr-rule-head {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .06);
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  display: flex;
}

.batch-rr-rule-index {
  color: var(--ocean-mid, var(--yue-material-blue-deep));
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .12);
  white-space: nowrap;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: .62rem;
  font-weight: 600;
}

.batch-rr-rule-name {
  color: var(--ocean-deep, var(--yue-material-white));
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 600;
  display: flex;
}

.batch-rr-rule-icon {
  color: var(--ocean-light, var(--yue-material-blue));
  align-items: center;
  display: flex;
}

.batch-rr-rule-actions {
  align-items: center;
  gap: 2px;
  margin-left: auto;
  display: flex;
}

.batch-rr-rule-arrow, .batch-rr-rule-del {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .5));
  cursor: pointer;
  transition: all var(--transition-fast, var(--dur-1) ease);
  background: none;
  border: none;
  border-radius: 6px;
  align-items: center;
  padding: 5px;
  display: flex;
}

.batch-rr-rule-arrow:hover:not(:disabled) {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .12);
  color: var(--ocean-light, var(--yue-material-blue));
}

.batch-rr-rule-arrow:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.batch-rr-rule-del:hover {
  background: rgba(var(--error-rgb, 255, 90, 90), .12);
  color: var(--error, var(--yue-material-danger));
}

.batch-rr-rule-hint {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .45));
  padding: 6px 12px 2px;
  font-size: .64rem;
  line-height: 1.45;
}

.batch-rr-config {
  flex-direction: column;
  gap: 8px;
  padding: 6px 12px 10px;
  display: flex;
}

.batch-rr-field {
  align-items: center;
  gap: 8px;
  display: flex;
}

.batch-rr-field-label {
  color: var(--ocean-mid, var(--yue-material-blue-deep));
  white-space: nowrap;
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 600;
}

.batch-rr-input {
  border: 1px solid rgba(var(--ocean-deep-rgb, 5, 12, 25), .12);
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .06);
  min-width: 0;
  color: var(--ocean-deep, var(--yue-material-white));
  box-sizing: border-box;
  transition: border-color var(--transition-fast, var(--dur-1) ease), box-shadow var(--transition-fast, var(--dur-1) ease);
  border-radius: 8px;
  outline: none;
  flex: 1;
  padding: 7px 10px;
  font-size: .74rem;
}

.batch-rr-input:focus {
  border-color: var(--ocean-cyan, var(--yue-ui-blue-350));
  box-shadow: 0 0 0 2px rgba(var(--neon-glow-rgb, 100, 200, 255), .15);
}

.batch-rr-input::placeholder {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .3));
}

.batch-rr-input-short {
  max-width: 90px;
}

.batch-rr-input-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.batch-rr-check {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .55));
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  display: flex;
}

.batch-rr-check input, .batch-rr-radio input {
  accent-color: var(--ocean-cyan, var(--yue-ui-blue-350));
  cursor: pointer;
}

.batch-rr-radio-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.batch-rr-radio {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .6));
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  display: inline-flex;
}

.batch-rr-radio input:checked + span {
  color: var(--ocean-light, var(--yue-material-blue));
}

.batch-rr-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  display: grid;
}

.batch-rr-grid-2col {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.batch-rr-num {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.batch-rr-field-row {
  align-items: center;
  display: flex;
}

.batch-rr-rules-footer {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
  display: flex;
}

.batch-rr-rules-footer-note {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .35));
  font-size: .64rem;
}

.batch-rr-clear-rules {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .45));
  cursor: pointer;
  transition: all var(--transition-quick);
  background: none;
  border: none;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: .64rem;
}

.batch-rr-clear-rules:hover {
  color: var(--error, var(--yue-material-danger));
  background: rgba(var(--error-rgb, 232, 88, 84), .08);
}

.batch-rr-filter-row > .batch-rr-row-check {
  flex-shrink: 0;
}

.batch-rr-preview-head {
  border-bottom: 1px solid rgba(var(--ocean-deep-rgb, 5, 12, 25), .08);
  flex-direction: column;
  flex-shrink: 0;
  gap: 6px;
  padding-bottom: 8px;
  display: flex;
}

.batch-rr-preview-head > span:first-child {
  color: var(--ocean-deep, var(--yue-material-white));
  font-size: .76rem;
  font-weight: 600;
}

.batch-rr-preview-summary {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .5));
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .66rem;
  display: flex;
}

.batch-rr-preview-warn {
  color: var(--error, var(--yue-material-danger));
  align-items: center;
  gap: 4px;
  font-weight: 600;
  display: inline-flex;
}

.batch-rr-preview-list {
  flex: 1;
  min-height: 0;
  padding: 6px 4px;
  position: relative;
  overflow-y: auto;
}

.batch-rr-vrow {
  position: absolute;
  left: 0;
  right: 0;
}

.batch-rr-row {
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .03);
  border: 1px solid #0000;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 8px;
  display: flex;
}

.batch-rr-row-check {
  width: 13px;
  height: 13px;
  accent-color: var(--ocean-light, var(--yue-material-blue));
  cursor: pointer;
  flex-shrink: 0;
}

.batch-rr-row-check-spacer {
  flex-shrink: 0;
  width: 13px;
}

.batch-rr-row.excluded {
  opacity: .45;
}

.batch-rr-row:hover {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .06);
}

.batch-rr-row.conflict {
  background: rgba(var(--error-rgb, 255, 90, 90), .08);
  border-color: rgba(var(--error-rgb, 255, 90, 90), .25);
}

.batch-rr-row.unchanged {
  opacity: .55;
}

.batch-rr-filter-row {
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 4px 0 6px;
  display: flex;
}

.batch-rr-chips {
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  display: flex;
}

.batch-rr-chip {
  border: 1px solid rgba(var(--ocean-deep-rgb, 5, 12, 25), .12);
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .55));
  cursor: pointer;
  transition: all var(--transition-quick);
  background: none;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .66rem;
}

.batch-rr-chip:hover {
  color: var(--text-primary, inherit);
  border-color: rgba(var(--ocean-cyan-rgb, 80, 200, 255), .4);
}

.batch-rr-chip.active {
  background: rgba(var(--ocean-cyan-rgb, 80, 200, 255), .16);
  border-color: rgba(var(--ocean-cyan-rgb, 80, 200, 255), .5);
  color: var(--text-primary, inherit);
  font-weight: 600;
}

.batch-rr-search {
  border: 1px solid rgba(var(--ocean-deep-rgb, 5, 12, 25), .12);
  background: rgba(var(--glass-tint-rgb, 255, 255, 255), .04);
  min-width: 0;
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .5));
  border-radius: 8px;
  flex: 1;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  display: flex;
}

.batch-rr-search:focus-within {
  border-color: rgba(var(--ocean-cyan-rgb, 80, 200, 255), .45);
}

.batch-rr-search-input {
  min-width: 0;
  color: var(--text-primary, inherit);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-size: .7rem;
}

.batch-rr-search-clear {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .5));
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  padding: 1px;
  display: flex;
}

.batch-rr-search-clear:hover {
  color: var(--text-primary, inherit);
}

.batch-rr-splitter {
  cursor: col-resize;
  width: 5px;
  transition: background var(--transition-quick);
  z-index: 5;
  background: none;
  border-radius: 3px;
  flex-shrink: 0;
  margin: 0 -2px;
}

.batch-rr-splitter:hover {
  background: rgba(var(--ocean-cyan-rgb, 80, 200, 255), .35);
}

.batch-rr-confirm-bar {
  background: rgba(var(--warning-rgb, 255, 180, 60), .12);
  border: 1px solid rgba(var(--warning-rgb, 255, 180, 60), .35);
  color: var(--text-primary, inherit);
  border-radius: 10px;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  margin: 0 20px;
  padding: 7px 12px;
  font-size: .72rem;
  display: flex;
}

.batch-rr-confirm-bar span {
  flex: 1;
  min-width: 0;
}

.batch-rr-confirm-keep, .batch-rr-confirm-quit {
  border-radius: var(--radius-sm, 10px);
  border: 1px solid rgba(var(--ocean-deep-rgb, 5, 12, 25), .18);
  color: var(--text-primary, inherit);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  padding: 3px 12px;
  font-size: .68rem;
}

.batch-rr-confirm-keep:hover {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .14);
}

.batch-rr-confirm-quit {
  border-color: rgba(var(--warning-rgb, 255, 180, 60), .55);
  font-weight: 600;
}

.batch-rr-confirm-quit:hover {
  background: rgba(var(--warning-rgb, 255, 180, 60), .18);
}

.batch-rr-regex-err {
  color: var(--error, var(--yue-material-danger));
  align-items: center;
  gap: 5px;
  font-size: .66rem;
  display: inline-flex;
}

.batch-rr-skip-btn {
  border-radius: var(--radius-sm, 10px);
  background: rgba(var(--warning-rgb, 217, 165, 20), .14);
  color: var(--warning, #d9a514);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast, var(--dur-1) ease);
  border: none;
  padding: 8px 16px;
  font-size: .75rem;
  font-weight: 600;
}

.batch-rr-skip-btn:hover:not(:disabled) {
  background: rgba(var(--warning-rgb, 217, 165, 20), .24);
}

.batch-rr-skip-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.batch-rr-field-note {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .5));
  white-space: nowrap;
  font-size: .64rem;
}

.batch-rr-row-old, .batch-rr-row-new {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  font-size: .7rem;
  overflow: hidden;
}

.batch-rr-row-old {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .45));
}

.batch-rr-row-old .batch-rr-row-main {
  -webkit-text-decoration: line-through #ff5a5a66;
  text-decoration: line-through #ff5a5a66;
}

.batch-rr-row-ext {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .38));
  opacity: .85;
}

.batch-rr-row-arrow {
  color: var(--ocean-light, var(--yue-material-blue));
  flex-shrink: 0;
  font-size: .7rem;
}

.batch-rr-row-new {
  color: var(--ocean-deep, var(--yue-material-white));
  font-weight: 600;
}

.batch-rr-row-status {
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

.batch-rr-row-status-conflict {
  color: var(--error, var(--yue-material-danger));
  align-items: center;
  display: flex;
}

.batch-rr-row-status-ok {
  color: var(--success, var(--yue-material-green));
}

.batch-rr-row-status-na {
  color: var(--ocean-foam, rgba(var(--yue-material-white-rgb), .35));
  font-size: .6rem;
}

.batch-rr-footer {
  border-top: 1px solid rgba(var(--ocean-deep-rgb, 5, 12, 25), .08);
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 16px;
  display: flex;
}

.batch-rr-footer-msg {
  flex: 1;
  min-width: 0;
}

.batch-rr-error {
  color: var(--error, var(--yue-material-danger));
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 600;
  display: inline-flex;
}

.batch-rr-footer-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.batch-rr-cancel {
  border-radius: var(--radius-sm, 10px);
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .1);
  color: var(--ocean-light, var(--yue-material-blue));
  cursor: pointer;
  transition: all var(--transition-fast, var(--dur-1) ease);
  border: none;
  padding: 8px 22px;
  font-size: .75rem;
  font-weight: 600;
}

.batch-rr-cancel:hover {
  background: rgba(var(--ocean-light-rgb, 100, 200, 255), .18);
}

.batch-rr-confirm {
  border-radius: var(--radius-sm, 10px);
  background: linear-gradient(135deg, var(--ocean-light, var(--yue-material-blue)), var(--ocean-mid, var(--yue-material-blue-deep)));
  color: var(--yue-material-white);
  cursor: pointer;
  transition: all var(--transition-fast, var(--dur-1) ease);
  box-shadow: 0 2px 10px rgba(var(--ocean-light-rgb, 100, 200, 255), .25);
  border: none;
  align-items: center;
  gap: 6px;
  padding: 8px 22px;
  font-size: .75rem;
  font-weight: 600;
  display: inline-flex;
}

.batch-rr-confirm:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(var(--ocean-light-rgb, 100, 200, 255), .35);
  transform: translateY(-1px);
}

.batch-rr-confirm:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 900px) {
  .batch-rr-dialog {
    width: 96vw;
  }

  .batch-rr-preview {
    width: 280px;
  }
}

@media (max-width: 720px) {
  .batch-rr-body {
    flex-direction: column;
  }

  .batch-rr-preview {
    border-left: none;
    border-top: 1px solid rgba(var(--ocean-deep-rgb, 5, 12, 25), .08);
    width: 100%;
    max-height: 40%;
    padding-top: 10px;
    padding-left: 0;
  }

  .batch-rr-grid {
    grid-template-columns: 1fr;
  }
}

.material-folder-card {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--ocean-light-rgb), .35);
  background: rgba(var(--ocean-light-rgb), .05);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  outline: none;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.material-folder-card:hover, .material-folder-card:focus-visible {
  border-color: rgba(var(--ocean-light-rgb), .6);
  background: rgba(var(--ocean-light-rgb), .08);
}

.material-folder-card:before {
  content: "";
  background: var(--ocean-light);
  width: 64px;
  height: 12px;
  box-shadow: 0 2px 0 rgba(var(--ocean-light-rgb), .35);
  z-index: 2;
  pointer-events: none;
  border-radius: 0 0 12px 12px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.material-folder-badge {
  background: var(--ocean-light);
  color: #fff;
  box-sizing: border-box;
  z-index: 2;
  pointer-events: none;
  border-radius: 8px;
  width: 22px;
  height: 22px;
  padding: 5px;
  position: absolute;
  bottom: 6px;
  left: 6px;
  box-shadow: 0 2px 6px #00000029;
}

.material-folder-label {
  text-align: center;
  display: block;
}

.material-folder-visual {
  aspect-ratio: 1;
  background: rgba(var(--accent-cyan-rgb), .04);
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.material-folder-card.density-0 .material-folder-visual {
  background: rgba(var(--slate-blue-rgb), .05);
}

.material-folder-card.density-2 .material-folder-visual {
  background: rgba(var(--accent-cyan-rgb), .07);
}

.material-folder-card.density-3 .material-folder-visual {
  background: rgba(var(--bright-cyan-rgb), .09);
}

.material-folder-card.density-4 .material-folder-visual {
  background: rgba(var(--accent-cyan-rgb), .12);
}

.material-folder-collage {
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  width: 100%;
  height: 100%;
  padding: 2px;
  display: grid;
}

.material-folder-collage img, .material-folder-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.material-folder-empty {
  width: 100%;
  height: 100%;
  color: var(--text-tertiary);
  opacity: .65;
  justify-content: center;
  align-items: center;
  display: flex;
}

.material-folder-card .material-folder-count {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  font-size: .68rem;
  font-weight: 600;
  position: absolute;
  top: 6px;
  right: 6px;
}

.material-folder-label {
  min-width: 0;
  padding: 3px 8px 2px;
}

.material-folder-name {
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .75rem;
  font-weight: 600;
  line-height: 17px;
  display: block;
  overflow: hidden;
}

.material-folder-meta {
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 1px;
  font-size: .66rem;
  display: block;
  overflow: hidden;
}

.material-folder-card.selected, .material-folder-card.drag-over {
  border-color: var(--ocean-light);
  background: rgba(var(--accent-cyan-rgb), .08);
}

.material-folder-checkmark {
  background: var(--ocean-light);
  width: 20px;
  height: 20px;
  color: var(--text-inverse);
  box-shadow: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: .68rem;
  font-weight: 650;
  display: flex;
  position: absolute;
  top: 6px;
  left: 6px;
}

.material-folder-checkmark:after {
  content: "✓";
}

.material-folder-card.island .material-folder-label {
  padding: 3px 6px 2px;
}

.material-list-folder-row {
  cursor: pointer;
  height: 46px;
  transition: background var(--transition-fast);
  border-radius: 8px;
  outline: none;
  align-items: center;
  display: flex;
}

.material-list-folder-row:hover, .material-list-folder-row:focus-visible {
  background: rgba(var(--accent-cyan-rgb), .06);
}

.material-list-folder-row.selected {
  background: rgba(var(--accent-cyan-rgb), .12);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-cyan-rgb), .32);
}

.material-list-folder-icon {
  width: 30px;
  height: 30px;
  color: var(--ocean-light);
  background: rgba(var(--accent-cyan-rgb), .1);
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
  display: flex;
}

.material-list-folder-row.density-0 .material-list-folder-icon {
  background: rgba(var(--slate-blue-rgb), .08);
  color: var(--text-tertiary);
}

.material-list-folder-row.density-2 .material-list-folder-icon {
  background: rgba(var(--accent-cyan-rgb), .14);
}

.material-list-folder-row.density-3 .material-list-folder-icon {
  background: rgba(var(--bright-cyan-rgb), .18);
  color: var(--neon-glow);
}

.material-list-folder-row.density-4 .material-list-folder-icon {
  background: var(--ocean-light);
  color: var(--text-inverse);
}

.material-list-folder-meta {
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 8px;
  font-size: .68rem;
  overflow: hidden;
}

.material-path-bar {
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 12px;
  display: flex;
}

.material-path-nav, .material-path-tools {
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  display: flex;
}

.material-path-btn {
  border: 1px solid rgba(var(--glass-tint-rgb), .2);
  background: rgba(var(--glass-bg-rgb), var(--glass-alpha-far, .68));
  width: 26px;
  height: 26px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.material-path-btn:hover:not(:disabled) {
  color: var(--ocean-light);
  border-color: rgba(var(--ocean-light-rgb), .45);
  box-shadow: var(--island-glow-hover);
}

.material-path-btn:disabled {
  opacity: .35;
  cursor: default;
}

.material-path-crumbs {
  white-space: nowrap;
  flex: 1;
  align-items: center;
  gap: 2px;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.material-path-item {
  align-items: center;
  min-width: 0;
  display: inline-flex;
}

.material-path-seg {
  max-width: 180px;
  color: var(--text-secondary);
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: .78rem;
  font-weight: 500;
  overflow: hidden;
}

.material-path-seg:hover {
  background: rgba(var(--glass-tint-rgb), .25);
  color: var(--text-primary);
}

.material-path-seg.active {
  color: var(--ocean-light);
  cursor: default;
  font-weight: 600;
}

.material-path-sep {
  color: var(--text-placeholder);
  margin: 0 2px;
  font-size: .72rem;
}

.material-path-zoom {
  text-align: center;
  min-width: 40px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
}

.material-thumb-video-badge {
  pointer-events: none;
  background: linear-gradient(#0000 55%, #06183059);
  border-radius: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0 0 22px;
}

.material-thumb-video-play {
  background: rgba(var(--glass-tint-rgb), .55);
  width: 34px;
  height: 34px;
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  color: var(--ocean-foam);
  box-sizing: border-box;
  box-shadow: var(--island-glow);
  transition: transform var(--transition-fast), color var(--transition-fast);
  border-radius: 50%;
  padding: 8px;
}

.material-thumb:hover .material-thumb-video-play {
  color: var(--accent-cyan);
  transform: scale(1.08);
}

.material-list-thumb {
  position: relative;
}

.material-list-thumb-video-badge {
  pointer-events: none;
  background: linear-gradient(#0000 40%, #06183066);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.material-list-thumb-video-play {
  background: rgba(var(--glass-tint-rgb), .6);
  width: 18px;
  height: 18px;
  color: var(--ocean-foam);
  box-sizing: border-box;
  box-shadow: var(--island-glow);
  transition: transform var(--transition-fast), color var(--transition-fast);
  border-radius: 50%;
  padding: 4px;
}

.material-list-row:hover .material-list-thumb-video-play {
  color: var(--accent-cyan);
  transform: scale(1.1);
}

.canvas-picker-library-link {
  color: var(--ocean-foam);
  white-space: nowrap;
  cursor: pointer;
  opacity: .85;
  transition: color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
  background: none;
  border: none;
  border-radius: 6px;
  align-items: center;
  padding: 4px 8px;
  font-size: .72rem;
  line-height: 1.2;
  display: inline-flex;
}

.canvas-picker-library-link:hover {
  opacity: 1;
  color: var(--ocean-light);
  background: rgba(var(--ocean-light-rgb), .12);
}

.canvas-picker-grid-panel {
  padding: 12px 14px 24px;
}

@keyframes materialThumbPasteFlash {
  0% {
    box-shadow: 0 0 0 3px rgba(var(--accent-cyan-rgb, 56, 189, 248), .75);
  }

  100% {
    box-shadow: 0 0 0 3px rgba(var(--accent-cyan-rgb, 56, 189, 248), 0);
  }
}

.material-thumb.material-thumb-paste-flash {
  animation: 1.8s ease-out materialThumbPasteFlash;
}

.material-folder-add-all {
  border: 1px solid rgba(var(--neon-glow-rgb), .35);
  background: rgba(var(--neon-glow-rgb), .1);
  color: var(--ocean-light);
  white-space: nowrap;
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  margin-right: 4px;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1.2;
  transition: background .1s, border-color .1s;
  display: none;
}

.material-folder-node:hover .material-folder-add-all {
  display: inline-flex;
}

.material-folder-add-all:hover {
  background: rgba(var(--neon-glow-rgb), .2);
  border-color: rgba(var(--neon-glow-rgb), .6);
}

.mie-viewer {
  z-index: 10002;
  -webkit-app-region: no-drag;
  app-region: no-drag;
  background: rgba(var(--glass-bg-rgb, 255, 255, 255), .94);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  backdrop-filter: saturate(var(--glass-saturate-near)) blur(var(--glass-blur-near));
  animation: mpdFadeIn var(--dur-2) ease;
  flex-direction: column;
  display: flex;
  position: fixed;
  inset: 0;
}

.mie-topbar {
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  display: flex;
}

.mie-topbar-info {
  min-width: 0;
  color: var(--text-primary);
  align-items: center;
  gap: 10px;
  display: flex;
}

.mie-topbar-icon {
  width: 17px;
  height: 17px;
  color: rgb(var(--accent-cyan-rgb));
  flex-shrink: 0;
}

.mie-topbar-title {
  white-space: nowrap;
  font-size: .9rem;
  font-weight: 700;
}

.mie-topbar-file {
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .8rem;
  overflow: hidden;
}

.mie-stage {
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding: 0 20px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.mie-loading {
  color: var(--text-secondary);
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  display: flex;
  position: absolute;
  inset: 0;
}

.mie-canvas-wrap {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  position: relative;
}

.mie-canvas {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: var(--shadow-card);
  background: rgba(var(--glass-tint-rgb, 20, 80, 190), .03);
  display: block;
}

.mie-crop-layer {
  cursor: crosshair;
  touch-action: none;
  position: absolute;
  inset: 0;
}

.mie-shade {
  pointer-events: none;
  background: #02061080;
  position: absolute;
}

.mie-crop-box {
  border: 1.5px solid rgb(var(--accent-cyan-rgb));
  cursor: move;
  position: absolute;
  box-shadow: 0 0 0 1px #00000059, inset 0 0 0 1px #00000040;
}

.mie-handle {
  border: 2px solid rgb(var(--accent-cyan-rgb));
  z-index: 1;
  background: #fff;
  border-radius: 3px;
  width: 12px;
  height: 12px;
  position: absolute;
}

.mie-handle-nw {
  cursor: nwse-resize;
  top: -7px;
  left: -7px;
}

.mie-handle-ne {
  cursor: nesw-resize;
  top: -7px;
  right: -7px;
}

.mie-handle-sw {
  cursor: nesw-resize;
  bottom: -7px;
  left: -7px;
}

.mie-handle-se {
  cursor: nwse-resize;
  bottom: -7px;
  right: -7px;
}

.mie-crop-size {
  background: rgba(var(--glass-bg-rgb, 255, 255, 255), .95);
  border: 1px solid var(--border-subtle);
  color: rgb(var(--accent-cyan-rgb));
  white-space: nowrap;
  pointer-events: none;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: .7rem;
  font-weight: 600;
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
}

.mie-panel {
  border-radius: var(--radius-lg, 16px);
  background: var(--surface-glass);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-mid)) blur(var(--glass-blur-mid));
  backdrop-filter: saturate(var(--glass-saturate-mid)) blur(var(--glass-blur-mid));
  border: 1px solid var(--border-subtle);
  flex-direction: column;
  flex-shrink: 0;
  gap: 8px;
  margin: 10px 16px 14px;
  padding: 12px 14px;
  display: flex;
}

.mie-row {
  align-items: center;
  gap: 10px;
  min-height: 30px;
  display: flex;
}

.mie-row-label {
  width: 34px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 600;
}

.mie-chips {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.mie-chip {
  border: 1px solid var(--border-subtle);
  background: rgba(var(--glass-bg-rgb, 255, 255, 255), .5);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-1, .12s) ease;
  white-space: nowrap;
  border-radius: 100px;
  padding: 4px 11px;
  font-size: .74rem;
  font-weight: 600;
}

.mie-chip:hover {
  background: rgba(var(--accent-cyan-rgb, 10, 108, 255), .08);
  border-color: rgba(var(--accent-cyan-rgb, 10, 108, 255), .35);
}

.mie-chip.active {
  background: rgba(var(--accent-cyan-rgb, 10, 108, 255), .14);
  border-color: rgb(var(--accent-cyan-rgb));
  color: var(--text-primary);
}

.mie-chip-custom {
  border-style: dashed;
}

.mie-ratio-input {
  border: 1px solid rgba(var(--accent-cyan-rgb, 10, 108, 255), .4);
  background: rgba(var(--glass-bg-rgb, 255, 255, 255), .85);
  width: 72px;
  color: var(--text-primary);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: .76rem;
}

.mie-tools {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.mie-tool {
  border: 1px solid var(--border-subtle);
  background: rgba(var(--glass-bg-rgb, 255, 255, 255), .5);
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-1, .12s) ease;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mie-tool svg {
  width: 15px;
  height: 15px;
}

.mie-tool:hover {
  background: rgba(var(--accent-cyan-rgb, 10, 108, 255), .08);
  border-color: rgba(var(--accent-cyan-rgb, 10, 108, 255), .35);
}

.mie-tool.active {
  background: rgba(var(--accent-cyan-rgb, 10, 108, 255), .14);
  border-color: rgb(var(--accent-cyan-rgb));
  color: var(--text-primary);
}

.mie-out {
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.mie-resize-mode {
  min-width: 280px;
}

.mie-quality {
  color: var(--text-secondary);
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  display: flex;
}

.mie-quality input[type="range"] {
  width: 110px;
  accent-color: rgb(var(--accent-cyan-rgb));
}

.mie-quality-num {
  color: rgb(var(--accent-cyan-rgb));
  min-width: 24px;
  font-weight: 700;
}

.mie-dim {
  color: var(--text-secondary);
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  display: flex;
}

.mie-dim input[type="number"] {
  border: 1px solid var(--border-subtle);
  background: rgba(var(--glass-bg-rgb, 255, 255, 255), .85);
  width: 84px;
  color: var(--text-primary);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: .76rem;
}

.mie-save-row {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.mie-save-tabs {
  background: rgba(var(--glass-tint-rgb, 20, 80, 190), .05);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  gap: 4px;
  padding: 3px;
  display: flex;
}

.mie-mode-tab {
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-1, .12s) ease;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 5px 14px;
  font-size: .76rem;
  font-weight: 600;
}

.mie-mode-tab.active {
  background: rgba(var(--accent-cyan-rgb, 10, 108, 255), .14);
  color: var(--text-primary);
}

.mie-save-info {
  color: var(--text-tertiary);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  font-size: .74rem;
  overflow: hidden;
}

.mie-save-btn {
  background: var(--yue-color-gradient-primary, linear-gradient(135deg, #0070ab, #0a8fd1));
  color: var(--yue-color-text-on-accent, #fff);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--accent-cyan-rgb, 10, 108, 255), .3);
  transition: all var(--dur-2, .2s) var(--ease-out-expo, ease);
  border: none;
  border-radius: 10px;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  padding: 8px 22px;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
}

.mie-save-btn svg {
  width: 14px;
  height: 14px;
}

.mie-save-btn:hover:not(:disabled) {
  box-shadow: 0 6px 22px rgba(var(--accent-cyan-rgb, 10, 108, 255), .45);
  transform: translateY(-1px);
}

.mie-save-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.mfd-overlay {
  z-index: 320;
  background: rgba(var(--glass-bg-rgb, 255, 255, 255), .45);
  -webkit-backdrop-filter: blur(var(--glass-blur-soft, 20px)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur-soft, 20px)) saturate(1.2);
  animation: mpdFadeIn var(--dur-1, .12s) ease;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.mfd-dialog {
  border-radius: var(--radius-xl, 20px);
  background: var(--surface-glass-strong, #ffffffe6);
  width: min(460px, 92vw);
  max-height: 86vh;
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate-near));
  border: 1px solid var(--border-subtle);
  box-shadow: var(--glass-shadow-near, 0 24px 72px #0c285a29);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.mfd-header {
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  display: flex;
}

.mfd-header-icon {
  width: 17px;
  height: 17px;
  color: rgb(var(--accent-cyan-rgb));
  flex-shrink: 0;
}

.mfd-title {
  color: var(--text-primary);
  font-size: .92rem;
  font-weight: 700;
}

.mfd-count {
  background: rgba(var(--accent-cyan-rgb, 10, 108, 255), .1);
  color: rgb(var(--accent-cyan-rgb));
  border-radius: 100px;
  margin-left: 2px;
  padding: 2px 9px;
  font-size: .7rem;
  font-weight: 700;
}

.mfd-close {
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  display: flex;
}

.mfd-close:hover {
  background: rgba(var(--accent-cyan-rgb, 10, 108, 255), .08);
}

.mfd-close svg {
  width: 15px;
  height: 15px;
}

.mfd-body {
  flex-direction: column;
  flex: 1;
  gap: 12px;
  min-height: 0;
  padding: 0 16px 10px;
  display: flex;
  overflow-y: auto;
}

.mfd-list {
  background: rgba(var(--glass-bg-rgb, 255, 255, 255), .5);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  flex-direction: column;
  gap: 4px;
  max-height: 168px;
  padding: 6px;
  display: flex;
  overflow-y: auto;
}

.mfd-list-item {
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 8px;
  display: flex;
}

.mfd-list-item:hover {
  background: rgba(var(--accent-cyan-rgb, 10, 108, 255), .06);
}

.mfd-list-name {
  color: var(--text-primary);
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 600;
}

.mfd-list-path {
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  direction: rtl;
  font-size: .68rem;
  overflow: hidden;
}

.mfd-section {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.mfd-section-label {
  color: var(--text-tertiary);
  letter-spacing: .3px;
  font-size: .72rem;
  font-weight: 700;
}

.mfd-radio {
  border: 1px solid var(--border-subtle);
  background: rgba(var(--glass-bg-rgb, 255, 255, 255), .5);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--dur-1, .12s) ease;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: .78rem;
  display: flex;
}

.mfd-radio:hover {
  border-color: rgba(var(--accent-cyan-rgb, 10, 108, 255), .35);
}

.mfd-radio.active {
  border-color: rgb(var(--accent-cyan-rgb));
  background: rgba(var(--accent-cyan-rgb, 10, 108, 255), .08);
  color: var(--text-primary);
}

.mfd-radio input {
  accent-color: rgb(var(--accent-cyan-rgb));
  margin: 0;
}

.mfd-name-input {
  border: 1px solid rgba(var(--accent-cyan-rgb, 10, 108, 255), .4);
  background: rgba(var(--glass-bg-rgb, 255, 255, 255), .9);
  min-width: 0;
  color: var(--text-primary);
  border-radius: 8px;
  outline: none;
  flex: 1;
  padding: 4px 10px;
  font-size: .78rem;
}

.mfd-name-input:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-cyan-rgb, 10, 108, 255), .12);
}

.mfd-hint {
  color: var(--text-tertiary);
  padding-left: 10px;
  font-size: .7rem;
}

.mfd-note {
  color: var(--text-tertiary);
  background: rgba(var(--accent-cyan-rgb, 10, 108, 255), .06);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: .7rem;
  line-height: 1.5;
}

.mfd-footer {
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px 14px;
  display: flex;
}

.mfd-btn {
  border: 1px solid var(--border-subtle);
  background: rgba(var(--glass-bg-rgb, 255, 255, 255), .6);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-1, .12s) ease;
  border-radius: 10px;
  padding: 8px 18px;
  font-size: .78rem;
  font-weight: 600;
}

.mfd-btn:hover:not(:disabled) {
  border-color: rgba(var(--accent-cyan-rgb, 10, 108, 255), .4);
  color: var(--text-primary);
}

.mfd-btn.primary {
  background: var(--yue-color-gradient-primary, linear-gradient(135deg, #0070ab, #0a8fd1));
  color: var(--yue-color-text-on-accent, #fff);
  box-shadow: 0 4px 16px rgba(var(--accent-cyan-rgb, 10, 108, 255), .3);
  border: none;
}

.mfd-btn.primary:hover:not(:disabled) {
  box-shadow: 0 6px 22px rgba(var(--accent-cyan-rgb, 10, 108, 255), .45);
  color: var(--yue-color-text-on-accent, #fff);
  transform: translateY(-1px);
}

.mfd-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.left-sidebar, .right-sidebar, .quick-gen-section, .hero-l-top, .feature-card, .api-section, .tutorial-section, .tutorial-card, .gh-root, .gp-section, .island-panel, .glass-surface, .glass, .new-sidebar.open, .tasks-area, .task-item, .top-banner, .gen-btn-island.open, .island-gen-mode .task-island, .trend-analysis-section, .collector-panel, .opp-detail-modal, .trend-dashboard-modal {
  isolation: isolate;
  position: relative;
}

.hero-logo-big {
  isolation: isolate;
  position: absolute;
}

.left-sidebar:after, .right-sidebar:after, .quick-gen-section:after, .hero-l-top:after, .hero-logo-big:after, .feature-card:after, .api-section:after, .tutorial-section:after, .tutorial-card:after, .gh-root:after, .gp-section:after, .island-panel:after, .glass-surface:after, .glass:after, .new-sidebar.open:after, .tasks-area:after, .task-item:after, .top-banner:after, .gen-btn-island.open:after, .island-gen-mode .task-island:after, .trend-analysis-section:after, .collector-panel:after, .opp-detail-modal:after, .trend-dashboard-modal:after {
  content: "";
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background-image: var(--glass-frost-noise), var(--glass-frost-sheen);
  opacity: calc(var(--glass-opacity, 1) * var(--glass-frost-strength, .55));
  transition: opacity var(--dur-2) var(--ease-out-expo, ease);
  background-position: 0 0, 0 0;
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, 100% 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.left-sidebar, .right-sidebar, .new-sidebar.open, .top-banner, .gen-btn-island.open, .island-gen-mode .task-island {
  --glass-frost-strength: .5;
}

.tutorial-card, .tasks-area, .task-item, .global-busy-island {
  --glass-frost-strength: .32;
}

.global-busy-island:after {
  content: "";
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background-image: var(--glass-frost-noise), var(--glass-frost-sheen);
  opacity: calc(var(--glass-opacity, 1) * var(--glass-frost-strength, .55));
  transition: opacity var(--dur-2) var(--ease-out-expo, ease);
  background-position: 0 0, 0 0;
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, 100% 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.task-island .tasks-area {
  --glass-frost-strength: 0;
}

.task-island .tasks-area:after {
  display: none;
}

[data-theme="lotus"] {
  --glass-frost-sheen: linear-gradient(115deg, #ffb0c44d 0%, #a8e0ba3d 22%, #ffdb9e38 44%, #92d2e833 66%, #ffb0c44d 100%);
}

[data-theme="lotus"] .left-sidebar:after, [data-theme="lotus"] .right-sidebar:after, [data-theme="lotus"] .quick-gen-section:after, [data-theme="lotus"] .hero-l-top:after, [data-theme="lotus"] .hero-logo-big:after, [data-theme="lotus"] .feature-card:after, [data-theme="lotus"] .api-section:after, [data-theme="lotus"] .tutorial-section:after, [data-theme="lotus"] .tutorial-card:after, [data-theme="lotus"] .gh-root:after, [data-theme="lotus"] .gp-section:after, [data-theme="lotus"] .island-panel:after, [data-theme="lotus"] .glass-surface:after, [data-theme="lotus"] .glass:after, [data-theme="lotus"] .new-sidebar.open:after, [data-theme="lotus"] .tasks-area:after, [data-theme="lotus"] .task-item:after, [data-theme="lotus"] .top-banner:after, [data-theme="lotus"] .gen-btn-island.open:after, [data-theme="lotus"] .island-gen-mode .task-island:after {
  background-size: 180px 180px, 240% 240%;
}

[data-theme="lotus"] body:before {
  content: "";
  z-index: 1;
  pointer-events: none;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 1C21 8 24 17 13 25C2 17 5 8 13 1Z' fill='%23f2a3ba'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg transform='rotate(38 16 16)'%3E%3Cpath d='M16 2C25 9 28 19 16 28C4 19 7 9 16 2Z' fill='%23f3c56d'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cpath d='M19 1C28 8 30 17 19 37C9 22 11 8 19 1Z' fill='%237fc98a'/%3E%3Cpath d='M19 4C24 12 24 22 19 32' stroke='%2357a564' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-position: 12% 16%, 76% 28%, 58% 70%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 26px 26px, 32px 32px, 38px 38px;
  position: fixed;
  inset: 0;
}

[data-theme="lotus"] body:after {
  content: "";
  z-index: 1;
  pointer-events: none;
  transform-origin: center;
  background: radial-gradient(circle, #0000 40%, #399d5747 46%, #399d571a 58%, #0000 66%);
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: fixed;
  bottom: 12%;
  right: 14%;
}

[data-theme="lotus"] ::selection {
  background: #399d5738;
}

@layer theme {
  :root, :host {
    --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-400: oklch(70.4% .191 22.216);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-red-700: oklch(50.5% .213 27.518);
    --color-red-950: oklch(25.8% .092 26.042);
    --color-orange-100: oklch(95.4% .038 75.164);
    --color-orange-400: oklch(75% .183 55.934);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-600: oklch(64.6% .222 41.116);
    --color-orange-700: oklch(55.3% .195 38.402);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-300: oklch(87.9% .169 91.605);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-amber-600: oklch(66.6% .179 58.318);
    --color-amber-700: oklch(55.5% .163 48.998);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-emerald-100: oklch(95% .052 163.051);
    --color-emerald-400: oklch(76.5% .177 163.223);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-emerald-600: oklch(59.6% .145 163.225);
    --color-emerald-700: oklch(50.8% .118 165.612);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-300: oklch(80.9% .105 251.813);
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-indigo-700: oklch(45.7% .24 277.023);
    --color-purple-500: oklch(62.7% .265 303.9);
    --color-purple-700: oklch(49.6% .265 301.924);
    --color-rose-500: oklch(64.5% .246 16.439);
    --color-rose-600: oklch(58.6% .253 17.585);
    --color-rose-700: oklch(51.4% .222 16.935);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-500: oklch(55.4% .046 257.417);
    --color-slate-600: oklch(44.6% .043 257.281);
    --color-slate-700: oklch(37.2% .044 257.287);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-5xl: 64rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tighter: -.05em;
    --tracking-tight: -.025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-xs: .125rem;
    --radius-sm: calc(var(--radius)  - 4px);
    --radius-md: calc(var(--radius)  - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius)  + 4px);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-sm: 8px;
    --blur-3xl: 64px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: "Inter", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    --default-mono-font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

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

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .\@container\/card-header {
    container: card-header / inline-size;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .-top-2 {
    top: calc(var(--spacing) * -2);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-0\.5 {
    top: calc(var(--spacing) * .5);
  }

  .top-1 {
    top: calc(var(--spacing) * 1);
  }

  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-1\/4 {
    top: 25%;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-20 {
    top: calc(var(--spacing) * 20);
  }

  .top-\[50\%\] {
    top: 50%;
  }

  .-right-2 {
    right: calc(var(--spacing) * -2);
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-0\.5 {
    right: calc(var(--spacing) * .5);
  }

  .right-1 {
    right: calc(var(--spacing) * 1);
  }

  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }

  .right-1\/4 {
    right: 25%;
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-15 {
    right: calc(var(--spacing) * 15);
  }

  .right-30 {
    right: calc(var(--spacing) * 30);
  }

  .right-45 {
    right: calc(var(--spacing) * 45);
  }

  .right-60 {
    right: calc(var(--spacing) * 60);
  }

  .right-90 {
    right: calc(var(--spacing) * 90);
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-0\.5 {
    bottom: calc(var(--spacing) * .5);
  }

  .bottom-1 {
    bottom: calc(var(--spacing) * 1);
  }

  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }

  .bottom-20 {
    bottom: calc(var(--spacing) * 20);
  }

  .-left-20 {
    left: calc(var(--spacing) * -20);
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-1 {
    left: calc(var(--spacing) * 1);
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-15 {
    left: calc(var(--spacing) * 15);
  }

  .left-30 {
    left: calc(var(--spacing) * 30);
  }

  .left-45 {
    left: calc(var(--spacing) * 45);
  }

  .left-60 {
    left: calc(var(--spacing) * 60);
  }

  .left-90 {
    left: calc(var(--spacing) * 90);
  }

  .left-\[50\%\] {
    left: 50%;
  }

  .isolate {
    isolation: isolate;
  }

  .z-10 {
    z-index: 10;
  }

  .z-50 {
    z-index: 50;
  }

  .col-span-6 {
    grid-column: span 6 / span 6;
  }

  .col-span-12 {
    grid-column: span 12 / span 12;
  }

  .col-start-2 {
    grid-column-start: 2;
  }

  .row-span-2 {
    grid-row: span 2 / span 2;
  }

  .row-start-1 {
    grid-row-start: 1;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }

  .-mt-8 {
    margin-top: calc(var(--spacing) * -8);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-auto {
    margin-top: auto;
  }

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .ml-0\.5 {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-auto {
    margin-left: auto;
  }

  .line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-3 {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .field-sizing-content {
    field-sizing: content;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }

  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .h-1 {
    height: calc(var(--spacing) * 1);
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-28 {
    height: calc(var(--spacing) * 28);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-72 {
    height: calc(var(--spacing) * 72);
  }

  .h-\[1\.15rem\] {
    height: 1.15rem;
  }

  .h-\[80vh\] {
    height: 80vh;
  }

  .h-\[640px\] {
    height: 640px;
  }

  .h-\[calc\(100\%-1px\)\] {
    height: calc(100% - 1px);
  }

  .h-\[var\(--radix-select-trigger-height\)\] {
    height: var(--radix-select-trigger-height);
  }

  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-screen {
    height: 100vh;
  }

  .max-h-\(--radix-dropdown-menu-content-available-height\) {
    max-height: var(--radix-dropdown-menu-content-available-height);
  }

  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }

  .max-h-\[85vh\] {
    max-height: 85vh;
  }

  .max-h-\[300px\] {
    max-height: 300px;
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-4 {
    min-height: calc(var(--spacing) * 4);
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .min-h-\[140px\] {
    min-height: 140px;
  }

  .min-h-\[160px\] {
    min-height: 160px;
  }

  .min-h-\[400px\] {
    min-height: 400px;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }

  .w-1\/2 {
    width: 50%;
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-3\/4 {
    width: 75%;
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-\[80vw\] {
    width: 80vw;
  }

  .w-\[280px\] {
    width: 280px;
  }

  .w-\[960px\] {
    width: 960px;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-7xl {
    max-width: var(--container-7xl);
  }

  .max-w-\[80vw\] {
    max-width: 80vw;
  }

  .max-w-\[90vw\] {
    max-width: 90vw;
  }

  .max-w-\[120px\] {
    max-width: 120px;
  }

  .max-w-\[280px\] {
    max-width: 280px;
  }

  .max-w-\[320px\] {
    max-width: 320px;
  }

  .max-w-\[calc\(100\%-2rem\)\] {
    max-width: calc(100% - 2rem);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }

  .min-w-\[8rem\] {
    min-width: 8rem;
  }

  .min-w-\[20px\] {
    min-width: 20px;
  }

  .min-w-\[960px\] {
    min-width: 960px;
  }

  .min-w-\[var\(--radix-select-trigger-width\)\] {
    min-width: var(--radix-select-trigger-width);
  }

  .flex-1 {
    flex: 1;
  }

  .flex-shrink-0, .shrink-0 {
    flex-shrink: 0;
  }

  .flex-grow, .grow {
    flex-grow: 1;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .origin-\(--radix-dropdown-menu-content-transform-origin\) {
    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
  }

  .translate-x-\[-50\%\] {
    --tw-translate-x: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-\[1\.01\] {
    scale: 1.01;
  }

  .-rotate-90 {
    rotate: -90deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-zoom-in {
    cursor: zoom-in;
  }

  .touch-none {
    touch-action: none;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .auto-rows-min {
    grid-auto-rows: min-content;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .grid-cols-\[0_1fr\] {
    grid-template-columns: 0 1fr;
  }

  .grid-rows-\[auto_auto\] {
    grid-template-rows: auto auto;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .place-content-center {
    place-content: center;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-items-start {
    justify-items: start;
  }

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * .5);
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  .self-start {
    align-self: flex-start;
  }

  .justify-self-end {
    justify-self: flex-end;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: calc(var(--radius)  + 8px);
  }

  .rounded-\[4px\] {
    border-radius: 4px;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius);
  }

  .rounded-md {
    border-radius: calc(var(--radius)  - 2px);
  }

  .rounded-sm {
    border-radius: calc(var(--radius)  - 4px);
  }

  .rounded-xl {
    border-radius: calc(var(--radius)  + 4px);
  }

  .rounded-xs {
    border-radius: var(--radius-xs);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-amber-500\/20 {
    border-color: #f99c0033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-500\/20 {
      border-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
  }

  .border-blue-500\/20 {
    border-color: #3080ff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-500\/20 {
      border-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
  }

  .border-border, .border-border\/60 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/60 {
      border-color: color-mix(in oklab, var(--border) 60%, transparent);
    }
  }

  .border-destructive, .border-destructive\/20 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/20 {
      border-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .border-destructive\/30 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/30 {
      border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
    }
  }

  .border-emerald-500\/20 {
    border-color: #00bb7f33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-500\/20 {
      border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
  }

  .border-green-500\/20 {
    border-color: #00c75833;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-500\/20 {
      border-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
    }
  }

  .border-input {
    border-color: var(--input);
  }

  .border-muted-foreground\/20 {
    border-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-muted-foreground\/20 {
      border-color: color-mix(in oklab, var(--muted-foreground) 20%, transparent);
    }
  }

  .border-muted-foreground\/50 {
    border-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-muted-foreground\/50 {
      border-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }
  }

  .border-primary, .border-primary\/30 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/30 {
      border-color: color-mix(in oklab, var(--primary) 30%, transparent);
    }
  }

  .border-red-500\/20 {
    border-color: #fb2c3633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-500\/20 {
      border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
  }

  .border-red-500\/30 {
    border-color: #fb2c364d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-500\/30 {
      border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
    }
  }

  .border-secondary {
    border-color: var(--secondary);
  }

  .border-slate-500\/30 {
    border-color: #62748e4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-slate-500\/30 {
      border-color: color-mix(in oklab, var(--color-slate-500) 30%, transparent);
    }
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-white\/80 {
    border-color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/80 {
      border-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .bg-\[var\(--accent\)\] {
    background-color: var(--accent);
  }

  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }

  .bg-amber-500 {
    background-color: var(--color-amber-500);
  }

  .bg-amber-500\/8 {
    background-color: #f99c0014;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/8 {
      background-color: color-mix(in oklab, var(--color-amber-500) 8%, transparent);
    }
  }

  .bg-amber-500\/10 {
    background-color: #f99c001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/10 {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }

  .bg-background {
    background-color: var(--background);
  }

  .bg-black\/5 {
    background-color: #0000000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/5 {
      background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }

  .bg-black\/20 {
    background-color: #0003;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/20 {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }

  .bg-black\/40 {
    background-color: #0006;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/40 {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }

  .bg-black\/50 {
    background-color: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .bg-black\/60 {
    background-color: #0009;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }

  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }

  .bg-blue-500\/10 {
    background-color: #3080ff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-500\/10 {
      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }
  }

  .bg-border {
    background-color: var(--border);
  }

  .bg-card, .bg-card\/60 {
    background-color: var(--card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/60 {
      background-color: color-mix(in oklab, var(--card) 60%, transparent);
    }
  }

  .bg-destructive, .bg-destructive\/5 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/5 {
      background-color: color-mix(in oklab, var(--destructive) 5%, transparent);
    }
  }

  .bg-destructive\/10 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/10 {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    }
  }

  .bg-destructive\/80 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/80 {
      background-color: color-mix(in oklab, var(--destructive) 80%, transparent);
    }
  }

  .bg-emerald-100 {
    background-color: var(--color-emerald-100);
  }

  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }

  .bg-emerald-500\/10 {
    background-color: #00bb7f1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/10 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
    }
  }

  .bg-green-500 {
    background-color: var(--color-green-500);
  }

  .bg-green-500\/10 {
    background-color: #00c7581a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-green-500\/10 {
      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
    }
  }

  .bg-green-500\/80 {
    background-color: #00c758cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-green-500\/80 {
      background-color: color-mix(in oklab, var(--color-green-500) 80%, transparent);
    }
  }

  .bg-indigo-500\/10 {
    background-color: #625fff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-500\/10 {
      background-color: color-mix(in oklab, var(--color-indigo-500) 10%, transparent);
    }
  }

  .bg-muted {
    background-color: var(--muted);
  }

  .bg-muted-foreground {
    background-color: var(--muted-foreground);
  }

  .bg-muted\/20 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/20 {
      background-color: color-mix(in oklab, var(--muted) 20%, transparent);
    }
  }

  .bg-muted\/30 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/30 {
      background-color: color-mix(in oklab, var(--muted) 30%, transparent);
    }
  }

  .bg-muted\/40 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/40 {
      background-color: color-mix(in oklab, var(--muted) 40%, transparent);
    }
  }

  .bg-muted\/50 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/50 {
      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    }
  }

  .bg-orange-100 {
    background-color: var(--color-orange-100);
  }

  .bg-popover {
    background-color: var(--popover);
  }

  .bg-primary, .bg-primary\/5 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/5 {
      background-color: color-mix(in oklab, var(--primary) 5%, transparent);
    }
  }

  .bg-primary\/10 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .bg-primary\/20 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/20 {
      background-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .bg-purple-500\/10 {
    background-color: #ac4bff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-purple-500\/10 {
      background-color: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
    }
  }

  .bg-red-100 {
    background-color: var(--color-red-100);
  }

  .bg-red-500 {
    background-color: var(--color-red-500);
  }

  .bg-red-500\/5 {
    background-color: #fb2c360d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/5 {
      background-color: color-mix(in oklab, var(--color-red-500) 5%, transparent);
    }
  }

  .bg-red-500\/10 {
    background-color: #fb2c361a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/10 {
      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
  }

  .bg-red-600 {
    background-color: var(--color-red-600);
  }

  .bg-rose-500\/10 {
    background-color: #ff23571a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-500\/10 {
      background-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent);
    }
  }

  .bg-secondary, .bg-secondary\/70 {
    background-color: var(--secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/70 {
      background-color: color-mix(in oklab, var(--secondary) 70%, transparent);
    }
  }

  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }

  .bg-slate-500\/5 {
    background-color: #62748e0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-500\/5 {
      background-color: color-mix(in oklab, var(--color-slate-500) 5%, transparent);
    }
  }

  .bg-slate-500\/10 {
    background-color: #62748e1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-500\/10 {
      background-color: color-mix(in oklab, var(--color-slate-500) 10%, transparent);
    }
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/95 {
    background-color: #fffffff2;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/95 {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .from-primary\/20 {
    --tw-gradient-from: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-primary\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .from-primary\/20 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .via-primary\/20 {
    --tw-gradient-via: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-primary\/20 {
      --tw-gradient-via: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .via-primary\/20 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .to-primary\/10 {
    --tw-gradient-to: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-primary\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .to-primary\/10 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .fill-current {
    fill: currentColor;
  }

  .stroke-amber-500 {
    stroke: var(--color-amber-500);
  }

  .stroke-blue-500 {
    stroke: var(--color-blue-500);
  }

  .stroke-emerald-500 {
    stroke: var(--color-emerald-500);
  }

  .stroke-muted {
    stroke: var(--muted);
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .p-12 {
    padding: calc(var(--spacing) * 12);
  }

  .p-\[3px\] {
    padding: 3px;
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-2\.5 {
    padding-top: calc(var(--spacing) * 2.5);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-9 {
    padding-right: calc(var(--spacing) * 9);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }

  .pl-11 {
    padding-left: calc(var(--spacing) * 11);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .align-top {
    vertical-align: top;
  }

  .font-mono {
    font-family: JetBrains Mono, Cascadia Mono, Consolas, monospace;
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[6rem\] {
    font-size: 6rem;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[12rem\] {
    font-size: 12rem;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-tighter {
    --tw-tracking: var(--tracking-tighter);
    letter-spacing: var(--tracking-tighter);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .break-words {
    overflow-wrap: break-word;
  }

  .break-all {
    word-break: break-all;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .text-\[var\(--accent\)\] {
    color: var(--accent);
  }

  .text-\[var\(--text-secondary\)\] {
    color: var(--text-secondary);
  }

  .text-\[var\(--text-tertiary\)\] {
    color: var(--text-tertiary);
  }

  .text-amber-500 {
    color: var(--color-amber-500);
  }

  .text-amber-600 {
    color: var(--color-amber-600);
  }

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-blue-500 {
    color: var(--color-blue-500);
  }

  .text-blue-600 {
    color: var(--color-blue-600);
  }

  .text-blue-700 {
    color: var(--color-blue-700);
  }

  .text-card-foreground {
    color: var(--card-foreground);
  }

  .text-current {
    color: currentColor;
  }

  .text-destructive {
    color: var(--destructive);
  }

  .text-emerald-500 {
    color: var(--color-emerald-500);
  }

  .text-emerald-600 {
    color: var(--color-emerald-600);
  }

  .text-emerald-700 {
    color: var(--color-emerald-700);
  }

  .text-foreground, .text-foreground\/5 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/5 {
      color: color-mix(in oklab, var(--foreground) 5%, transparent);
    }
  }

  .text-foreground\/80 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/80 {
      color: color-mix(in oklab, var(--foreground) 80%, transparent);
    }
  }

  .text-foreground\/90 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/90 {
      color: color-mix(in oklab, var(--foreground) 90%, transparent);
    }
  }

  .text-green-500 {
    color: var(--color-green-500);
  }

  .text-indigo-700 {
    color: var(--color-indigo-700);
  }

  .text-muted-foreground, .text-muted-foreground\/50 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/50 {
      color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }
  }

  .text-muted-foreground\/60 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/60 {
      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

  .text-muted-foreground\/70 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/70 {
      color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
    }
  }

  .text-muted-foreground\/80 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/80 {
      color: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
    }
  }

  .text-orange-600 {
    color: var(--color-orange-600);
  }

  .text-orange-700 {
    color: var(--color-orange-700);
  }

  .text-popover-foreground {
    color: var(--popover-foreground);
  }

  .text-primary {
    color: var(--primary);
  }

  .text-primary-foreground {
    color: var(--primary-foreground);
  }

  .text-primary\/70 {
    color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary\/70 {
      color: color-mix(in oklab, var(--primary) 70%, transparent);
    }
  }

  .text-purple-700 {
    color: var(--color-purple-700);
  }

  .text-red-400 {
    color: var(--color-red-400);
  }

  .text-red-500 {
    color: var(--color-red-500);
  }

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-red-700 {
    color: var(--color-red-700);
  }

  .text-rose-600 {
    color: var(--color-rose-600);
  }

  .text-rose-700 {
    color: var(--color-rose-700);
  }

  .text-secondary {
    color: var(--secondary);
  }

  .text-secondary-foreground, .text-secondary-foreground\/80 {
    color: var(--secondary-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-secondary-foreground\/80 {
      color: color-mix(in oklab, var(--secondary-foreground) 80%, transparent);
    }
  }

  .text-slate-500 {
    color: var(--color-slate-500);
  }

  .text-slate-600 {
    color: var(--color-slate-600);
  }

  .text-slate-700 {
    color: var(--color-slate-700);
  }

  .text-white {
    color: var(--color-white);
  }

  .uppercase {
    text-transform: uppercase;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .line-through {
    text-decoration-line: line-through;
  }

  .underline {
    text-decoration-line: underline;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-75 {
    opacity: .75;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-100 {
    opacity: 1;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-card {
    --tw-shadow-color: var(--card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-card {
      --tw-shadow-color: color-mix(in oklab, var(--card) var(--tw-shadow-alpha), transparent);
    }
  }

  .ring-primary, .ring-primary\/20 {
    --tw-ring-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-primary\/20 {
      --tw-ring-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .ring-ring\/50 {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-ring\/50 {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .ring-offset-background {
    --tw-ring-offset-color: var(--background);
  }

  .outline-hidden {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .outline-hidden {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .blur-3xl {
    --tw-blur: blur(var(--blur-3xl));
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .sepia {
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-\[1px\] {
    --tw-backdrop-blur: blur(1px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[color\,box-shadow\] {
    transition-property: color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-none {
    transition-property: none;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .\!paused {
    animation-play-state: paused !important;
  }

  .\!running {
    animation-play-state: running !important;
  }

  .\[verify\:assets\] {
    verify: assets;
  }

  .paused {
    animation-play-state: paused;
  }

  .running {
    animation-play-state: running;
  }

  .zoom-in {
    --tw-enter-scale: 0;
  }

  .zoom-out {
    --tw-exit-scale: 0;
  }

  @media (hover: hover) {
    .group-hover\:scale-105:is(:where(.group):hover *) {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .group-hover\:border-white:is(:where(.group):hover *) {
      border-color: var(--color-white);
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }
  }

  .group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled="true"] *) {
    pointer-events: none;
  }

  .group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled="true"] *) {
    opacity: .5;
  }

  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
    cursor: not-allowed;
  }

  .peer-disabled\:opacity-50:is(:where(.peer):disabled ~ *) {
    opacity: .5;
  }

  .peer-disabled\:opacity-70:is(:where(.peer):disabled ~ *) {
    opacity: .7;
  }

  .selection\:bg-primary ::selection {
    background-color: var(--primary);
  }

  .selection\:bg-primary::selection {
    background-color: var(--primary);
  }

  .selection\:text-primary-foreground ::selection {
    color: var(--primary-foreground);
  }

  .selection\:text-primary-foreground::selection {
    color: var(--primary-foreground);
  }

  .file\:inline-flex::file-selector-button {
    display: inline-flex;
  }

  .file\:h-7::file-selector-button {
    height: calc(var(--spacing) * 7);
  }

  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .file\:bg-transparent::file-selector-button {
    background-color: #0000;
  }

  .file\:text-sm::file-selector-button {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .file\:font-medium::file-selector-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .file\:text-foreground::file-selector-button {
    color: var(--foreground);
  }

  .placeholder\:text-\[var\(--label-tertiary\)\]\/60::placeholder {
    color: var(--label-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-\[var\(--label-tertiary\)\]\/60::placeholder {
      color: color-mix(in oklab, var(--label-tertiary) 60%, transparent);
    }
  }

  .placeholder\:text-muted-foreground::placeholder, .placeholder\:text-muted-foreground\/60::placeholder {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-muted-foreground\/60::placeholder {
      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  @media (hover: hover) {
    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:border-border:hover {
      border-color: var(--border);
    }

    .hover\:border-muted-foreground\/30:hover {
      border-color: var(--muted-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-muted-foreground\/30:hover {
        border-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
      }
    }

    .hover\:border-primary:hover, .hover\:border-primary\/50:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/50:hover {
        border-color: color-mix(in oklab, var(--primary) 50%, transparent);
      }
    }

    .hover\:bg-accent:hover {
      background-color: var(--accent);
    }

    .hover\:bg-black\/10:hover {
      background-color: #0000001a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-black\/10:hover {
        background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
      }
    }

    .hover\:bg-destructive\/90:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/90:hover {
        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
      }
    }

    .hover\:bg-muted:hover, .hover\:bg-muted\/50:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/50:hover {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
    }

    .hover\:bg-primary:hover, .hover\:bg-primary\/5:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/5:hover {
        background-color: color-mix(in oklab, var(--primary) 5%, transparent);
      }
    }

    .hover\:bg-primary\/90:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
      }
    }

    .hover\:bg-red-50:hover {
      background-color: var(--color-red-50);
    }

    .hover\:bg-red-700:hover {
      background-color: var(--color-red-700);
    }

    .hover\:bg-secondary:hover, .hover\:bg-secondary\/80:hover {
      background-color: var(--secondary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-secondary\/80:hover {
        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
      }
    }

    .hover\:bg-white:hover {
      background-color: var(--color-white);
    }

    .hover\:text-accent-foreground:hover {
      color: var(--accent-foreground);
    }

    .hover\:text-destructive:hover {
      color: var(--destructive);
    }

    .hover\:text-foreground:hover {
      color: var(--foreground);
    }

    .hover\:text-primary-foreground:hover {
      color: var(--primary-foreground);
    }

    .hover\:text-red-700:hover {
      color: var(--color-red-700);
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:opacity-100:hover {
      opacity: 1;
    }

    .hover\:shadow-sm:hover {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:ring-4:hover {
      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .focus\:border-\[var\(--primary\)\]:focus {
    border-color: var(--primary);
  }

  .focus\:border-destructive:focus {
    border-color: var(--destructive);
  }

  .focus\:border-primary:focus {
    border-color: var(--primary);
  }

  .focus\:border-ring:focus {
    border-color: var(--ring);
  }

  .focus\:bg-accent:focus {
    background-color: var(--accent);
  }

  .focus\:text-accent-foreground:focus {
    color: var(--accent-foreground);
  }

  .focus\:ring-1:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-\[3px\]:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-\[color-mix\(in_srgb\,var\(--primary\)_22\%\,transparent\)\]:focus {
    --tw-ring-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-\[color-mix\(in_srgb\,var\(--primary\)_22\%\,transparent\)\]:focus {
      --tw-ring-color: color-mix(in srgb, var(--primary) 22%, transparent);
    }
  }

  .focus\:ring-destructive:focus {
    --tw-ring-color: var(--destructive);
  }

  .focus\:ring-primary:focus {
    --tw-ring-color: var(--primary);
  }

  .focus\:ring-red-600:focus {
    --tw-ring-color: var(--color-red-600);
  }

  .focus\:ring-ring:focus, .focus\:ring-ring\/50:focus {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-ring\/50:focus {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus\:outline-hidden:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .focus\:outline-hidden:focus {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:border-ring:focus-visible {
    border-color: var(--ring);
  }

  .focus-visible\:ring-1:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-4:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-\[3px\]:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-destructive:focus-visible, .focus-visible\:ring-destructive\/20:focus-visible {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-destructive\/20:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .focus-visible\:ring-primary:focus-visible {
    --tw-ring-color: var(--primary);
  }

  .focus-visible\:ring-ring:focus-visible, .focus-visible\:ring-ring\/50:focus-visible {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-ring\/50:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:outline-hidden:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .focus-visible\:outline-hidden:focus-visible {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .focus-visible\:outline-1:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .focus-visible\:outline-ring:focus-visible {
    outline-color: var(--ring);
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .active\:scale-\[0\.98\]:active {
    scale: .98;
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot="card-action"]) {
    grid-template-columns: 1fr auto;
  }

  .has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has( > svg) {
    grid-template-columns: calc(var(--spacing) * 4) 1fr;
  }

  .has-\[\>svg\]\:gap-x-3:has( > svg) {
    column-gap: calc(var(--spacing) * 3);
  }

  .has-\[\>svg\]\:px-2\.5:has( > svg) {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .has-\[\>svg\]\:px-3:has( > svg) {
    padding-inline: calc(var(--spacing) * 3);
  }

  .has-\[\>svg\]\:px-4:has( > svg) {
    padding-inline: calc(var(--spacing) * 4);
  }

  .aria-invalid\:border-destructive[aria-invalid="true"] {
    border-color: var(--destructive);
  }

  .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .data-\[disabled\]\:pointer-events-none[data-disabled] {
    pointer-events: none;
  }

  .data-\[disabled\]\:opacity-50[data-disabled] {
    opacity: .5;
  }

  .data-\[inset\]\:pl-8[data-inset] {
    padding-left: calc(var(--spacing) * 8);
  }

  .data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
    height: calc(var(--spacing) * 1.5);
  }

  .data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
    height: 100%;
  }

  .data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
    width: 100%;
  }

  .data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
    height: 100%;
  }

  .data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
    min-height: calc(var(--spacing) * 44);
  }

  .data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
    width: calc(var(--spacing) * 1.5);
  }

  .data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
    width: auto;
  }

  .data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
    width: 100%;
  }

  .data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
    flex-direction: column;
  }

  .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
    --tw-translate-y: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
    --tw-enter-translate-y: calc(2 * var(--spacing) * -1);
  }

  .data-\[side\=left\]\:-translate-x-1[data-side="left"] {
    --tw-translate-x: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
    --tw-enter-translate-x: calc(2 * var(--spacing));
  }

  .data-\[side\=right\]\:translate-x-1[data-side="right"] {
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
    --tw-enter-translate-x: calc(2 * var(--spacing) * -1);
  }

  .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
    --tw-enter-translate-y: calc(2 * var(--spacing));
  }

  :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
    color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
      color: color-mix(in oklab, var(--destructive) 90%, transparent);
    }
  }

  .data-\[state\=active\]\:bg-background[data-state="active"] {
    background-color: var(--background);
  }

  .data-\[state\=active\]\:shadow-sm[data-state="active"] {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
    --tw-translate-x: calc(100% - 2px);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=checked\]\:border-primary[data-state="checked"] {
    border-color: var(--primary);
  }

  .data-\[state\=checked\]\:bg-\[var\(--ocean-primary\)\][data-state="checked"] {
    background-color: var(--ocean-primary);
  }

  .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
    background-color: var(--primary);
  }

  .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
    color: var(--primary-foreground);
  }

  .data-\[state\=closed\]\:animate-out[data-state="closed"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
  }

  .data-\[state\=closed\]\:duration-300[data-state="closed"] {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
    --tw-exit-opacity: 0;
  }

  .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
    --tw-exit-scale: .95;
  }

  .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
    --tw-exit-translate-y: 100%;
  }

  .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
    --tw-exit-translate-x: -100%;
  }

  .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
    --tw-exit-translate-x: 100%;
  }

  .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
    --tw-exit-translate-y: -100%;
  }

  .data-\[state\=open\]\:animate-in[data-state="open"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
  }

  .data-\[state\=open\]\:bg-accent[data-state="open"] {
    background-color: var(--accent);
  }

  .data-\[state\=open\]\:bg-secondary[data-state="open"] {
    background-color: var(--secondary);
  }

  .data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
    color: var(--accent-foreground);
  }

  .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
    color: var(--muted-foreground);
  }

  .data-\[state\=open\]\:duration-500[data-state="open"] {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .data-\[state\=open\]\:fade-in-0[data-state="open"] {
    --tw-enter-opacity: 0;
  }

  .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
    --tw-enter-scale: .95;
  }

  .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }

  .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
    --tw-enter-translate-x: -100%;
  }

  .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
    --tw-enter-translate-x: 100%;
  }

  .data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
    --tw-enter-translate-y: -100%;
  }

  .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
    background-color: var(--input);
  }

  .data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
    color: var(--destructive);
  }

  .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    }
  }

  .data-\[variant\=destructive\]\:focus\:text-destructive[data-variant="destructive"]:focus {
    color: var(--destructive);
  }

  @media (min-width: 40rem) {
    .sm\:block {
      display: block;
    }

    .sm\:flex {
      display: flex;
    }

    .sm\:hidden {
      display: none;
    }

    .sm\:inline {
      display: inline;
    }

    .sm\:w-72 {
      width: calc(var(--spacing) * 72);
    }

    .sm\:w-80 {
      width: calc(var(--spacing) * 80);
    }

    .sm\:w-\[180px\] {
      width: 180px;
    }

    .sm\:w-auto {
      width: auto;
    }

    .sm\:max-w-\[90vw\] {
      max-width: 90vw;
    }

    .sm\:max-w-lg {
      max-width: var(--container-lg);
    }

    .sm\:max-w-md {
      max-width: var(--container-md);
    }

    .sm\:max-w-sm {
      max-width: var(--container-sm);
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:items-center {
      align-items: center;
    }

    .sm\:items-end {
      align-items: flex-end;
    }

    .sm\:justify-between {
      justify-content: space-between;
    }

    .sm\:justify-end {
      justify-content: flex-end;
    }

    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .sm\:pr-2\.5 {
      padding-right: calc(var(--spacing) * 2.5);
    }

    .sm\:pl-2\.5 {
      padding-left: calc(var(--spacing) * 2.5);
    }

    .sm\:text-left {
      text-align: left;
    }

    .sm\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .sm\:text-\[8rem\] {
      font-size: 8rem;
    }

    .sm\:text-\[16rem\] {
      font-size: 16rem;
    }
  }

  @media (min-width: 48rem) {
    .md\:col-span-1 {
      grid-column: span 1 / span 1;
    }

    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .md\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .md\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .md\:text-right {
      text-align: right;
    }

    .md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  @media (min-width: 64rem) {
    .lg\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .lg\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .lg\:flex {
      display: flex;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:inline {
      display: inline;
    }

    .lg\:w-\[520px\] {
      width: 520px;
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lg\:flex-row {
      flex-direction: row;
    }

    .lg\:items-end {
      align-items: flex-end;
    }

    .lg\:justify-between {
      justify-content: space-between;
    }

    .lg\:p-12 {
      padding: calc(var(--spacing) * 12);
    }
  }

  .dark\:border-input:is(.dark *) {
    border-color: var(--input);
  }

  .dark\:bg-amber-500\/20:is(.dark *) {
    background-color: #f99c0033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-500\/20:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
  }

  .dark\:bg-blue-500\/20:is(.dark *) {
    background-color: #3080ff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-blue-500\/20:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
  }

  .dark\:bg-destructive\/60:is(.dark *) {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-destructive\/60:is(.dark *) {
      background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
    }
  }

  .dark\:bg-emerald-500\/20:is(.dark *) {
    background-color: #00bb7f33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-emerald-500\/20:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
  }

  .dark\:bg-input\/30:is(.dark *) {
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-input\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }

  .dark\:bg-orange-500\/20:is(.dark *) {
    background-color: #fe6e0033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-orange-500\/20:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
    }
  }

  .dark\:bg-red-500\/20:is(.dark *) {
    background-color: #fb2c3633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-red-500\/20:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
  }

  .dark\:bg-slate-500\/20:is(.dark *) {
    background-color: #62748e33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-slate-500\/20:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-slate-500) 20%, transparent);
    }
  }

  .dark\:text-amber-300:is(.dark *) {
    color: var(--color-amber-300);
  }

  .dark\:text-amber-400:is(.dark *) {
    color: var(--color-amber-400);
  }

  .dark\:text-blue-300:is(.dark *) {
    color: var(--color-blue-300);
  }

  .dark\:text-blue-400:is(.dark *) {
    color: var(--color-blue-400);
  }

  .dark\:text-emerald-400:is(.dark *) {
    color: var(--color-emerald-400);
  }

  .dark\:text-muted-foreground:is(.dark *) {
    color: var(--muted-foreground);
  }

  .dark\:text-orange-400:is(.dark *) {
    color: var(--color-orange-400);
  }

  .dark\:text-red-400:is(.dark *) {
    color: var(--color-red-400);
  }

  .dark\:text-slate-400:is(.dark *) {
    color: var(--color-slate-400);
  }

  @media (hover: hover) {
    .dark\:hover\:bg-accent\/50:is(.dark *):hover {
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-accent\/50:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
      }
    }

    .dark\:hover\:bg-input\/50:is(.dark *):hover {
      background-color: var(--input);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-input\/50:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--input) 50%, transparent);
      }
    }

    .dark\:hover\:bg-red-950\/20:is(.dark *):hover {
      background-color: #46080933;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-red-950\/20:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--color-red-950) 20%, transparent);
      }
    }

    .dark\:hover\:text-red-300:is(.dark *):hover {
      color: var(--color-red-300);
    }
  }

  .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .dark\:data-\[state\=active\]\:border-input:is(.dark *)[data-state="active"] {
    border-color: var(--input);
  }

  .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] {
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }

  .dark\:data-\[state\=active\]\:text-foreground:is(.dark *)[data-state="active"] {
    color: var(--foreground);
  }

  .dark\:data-\[state\=checked\]\:bg-primary:is(.dark *)[data-state="checked"] {
    background-color: var(--primary);
  }

  .dark\:data-\[state\=checked\]\:bg-primary-foreground:is(.dark *)[data-state="checked"] {
    background-color: var(--primary-foreground);
  }

  .dark\:data-\[state\=unchecked\]\:bg-foreground:is(.dark *)[data-state="unchecked"] {
    background-color: var(--foreground);
  }

  .dark\:data-\[state\=unchecked\]\:bg-input\/80:is(.dark *)[data-state="unchecked"] {
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:data-\[state\=unchecked\]\:bg-input\/80:is(.dark *)[data-state="unchecked"] {
      background-color: color-mix(in oklab, var(--input) 80%, transparent);
    }
  }

  .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus {
      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .\[\&_p\]\:leading-relaxed p {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*="text-"]) {
    color: var(--muted-foreground);
  }

  .\[\.border-b\]\:pb-6.border-b {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .\[\.border-t\]\:pt-6.border-t {
    padding-top: calc(var(--spacing) * 6);
  }

  :is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive[data-variant="destructive"] > *):is(svg) {
    color: var(--destructive) !important;
  }

  .\[\&\>span\]\:line-clamp-1 > span {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .\[\&\>svg\]\:pointer-events-none > svg {
    pointer-events: none;
  }

  .\[\&\>svg\]\:size-3 > svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .\[\&\>svg\]\:size-4 > svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&\>svg\]\:translate-y-0\.5 > svg {
    --tw-translate-y: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\[\&\>svg\]\:text-current > svg {
    color: currentColor;
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:bg-accent:hover {
      background-color: var(--accent);
    }

    a.\[a\&\]\:hover\:bg-destructive\/90:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      a.\[a\&\]\:hover\:bg-destructive\/90:hover {
        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
      }
    }

    a.\[a\&\]\:hover\:bg-primary\/90:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      a.\[a\&\]\:hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
      }
    }

    a.\[a\&\]\:hover\:bg-secondary\/90:hover {
      background-color: var(--secondary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      a.\[a\&\]\:hover\:bg-secondary\/90:hover {
        background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
      }
    }

    a.\[a\&\]\:hover\:text-accent-foreground:hover {
      color: var(--accent-foreground);
    }
  }
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/app/fonts/InterVariable.woff2") format("woff2-variations");
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/app/fonts/JetBrainsMono-400.woff2") format("woff2");
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/app/fonts/JetBrainsMono-600.woff2") format("woff2");
}

:root {
  --radius: .5rem;
  --background: var(--yue-color-bg-canvas, var(--bg-canvas));
  --foreground: var(--yue-color-text-primary, var(--text-primary));
  --card: var(--yue-glass-bg-near, var(--glass-bg-near));
  --card-foreground: var(--yue-color-text-primary, var(--text-primary));
  --popover: var(--yue-glass-bg-near, var(--glass-bg-near));
  --popover-foreground: var(--yue-color-text-primary, var(--text-primary));
  --primary: var(--yue-color-ocean-light, var(--ocean-light));
  --primary-foreground: var(--yue-color-text-on-accent, var(--text-on-accent));
  --secondary: var(--yue-color-bg-hover, var(--bg-hover));
  --secondary-foreground: var(--yue-color-text-primary, var(--text-primary));
  --muted: var(--yue-color-bg-hover, var(--bg-hover));
  --muted-foreground: var(--yue-color-text-tertiary, var(--text-tertiary));
  --accent: var(--yue-color-bg-active, var(--bg-active));
  --accent-foreground: var(--yue-color-text-primary, var(--text-primary));
  --destructive: var(--yue-color-status-error, var(--error));
  --destructive-foreground: var(--yue-color-text-on-accent, var(--text-on-accent));
  --border: var(--yue-color-border-default, var(--border-subtle));
  --input: var(--yue-color-border-default, var(--border-subtle));
  --ring: var(--yue-color-ocean-light, var(--ocean-light));
  --chart-1: var(--yue-color-ocean-light, var(--ocean-light));
  --chart-2: var(--yue-color-ocean-cyan, var(--ocean-cyan));
  --chart-3: var(--yue-color-neon-glow, var(--neon-glow));
  --chart-4: var(--yue-color-success, var(--success));
  --chart-5: var(--yue-color-golden, var(--golden));
  --sidebar: var(--yue-glass-bg-near, var(--glass-bg-near));
  --sidebar-foreground: var(--yue-color-text-primary, var(--text-primary));
  --sidebar-primary: var(--yue-color-ocean-light, var(--ocean-light));
  --sidebar-primary-foreground: var(--yue-color-text-on-accent, var(--text-on-accent));
  --sidebar-accent: var(--yue-color-bg-active, var(--bg-active));
  --sidebar-accent-foreground: var(--yue-color-text-primary, var(--text-primary));
  --sidebar-border: var(--yue-color-border-default, var(--border-subtle));
  --sidebar-ring: var(--yue-color-ocean-light, var(--ocean-light));
}

.dark {
  --background: var(--yue-color-bg-canvas, var(--bg-canvas));
  --foreground: var(--yue-color-text-primary, var(--text-primary));
  --card: var(--yue-glass-bg-near, var(--glass-bg-near));
  --card-foreground: var(--yue-color-text-primary, var(--text-primary));
  --popover: var(--yue-glass-bg-near, var(--glass-bg-near));
  --popover-foreground: var(--yue-color-text-primary, var(--text-primary));
  --primary: var(--yue-color-ocean-light, var(--ocean-light));
  --primary-foreground: var(--yue-color-text-on-accent, var(--text-on-accent));
  --secondary: var(--yue-color-bg-hover, var(--bg-hover));
  --secondary-foreground: var(--yue-color-text-primary, var(--text-primary));
  --muted: var(--yue-color-bg-hover, var(--bg-hover));
  --muted-foreground: var(--yue-color-text-tertiary, var(--text-tertiary));
  --accent: var(--yue-color-bg-active, var(--bg-active));
  --accent-foreground: var(--yue-color-text-primary, var(--text-primary));
  --destructive: var(--yue-color-status-error, var(--error));
  --destructive-foreground: var(--yue-color-text-on-accent, var(--text-on-accent));
  --border: var(--yue-color-border-default, var(--border-subtle));
  --input: var(--yue-color-border-default, var(--border-subtle));
  --ring: var(--yue-color-ocean-light, var(--ocean-light));
  --sidebar: var(--yue-glass-bg-near, var(--glass-bg-near));
  --sidebar-foreground: var(--yue-color-text-primary, var(--text-primary));
  --sidebar-primary: var(--yue-color-ocean-light, var(--ocean-light));
  --sidebar-primary-foreground: var(--yue-color-text-on-accent, var(--text-on-accent));
  --sidebar-accent: var(--yue-color-bg-active, var(--bg-active));
  --sidebar-accent-foreground: var(--yue-color-text-primary, var(--text-primary));
  --sidebar-border: var(--yue-color-border-default, var(--border-subtle));
  --sidebar-ring: var(--yue-color-ocean-light, var(--ocean-light));
}

#root * {
  transform-style: flat !important;
}

#root .card-icon, #root .sub-item, #root .hero-meta, #root .hero-style-tag, #root .gp-chip, #root .gp-func-header, #root .gp-section, #root .gp-upload, #root .preview-overlay i {
  overflow: clip !important;
}

[data-theme="moonlight"] .glass, [data-theme="moonlight"] .island-panel, [data-theme="moonlight"] .gp-section, [data-theme="moonlight"] .left-sidebar, [data-theme="moonlight"] .right-sidebar, [data-theme="moonlight"] .quick-gen-section, [data-theme="moonlight"] .api-section, [data-theme="moonlight"] .tutorial-section, [data-theme="moonlight"] .tutorial-card, [data-theme="moonlight"] .hero-l-top, [data-theme="moonlight"] .gh-root, [data-theme="moonlight"] .ad-space-banner, [data-theme="moonlight"] .feature-card, [data-theme="moonlight"] .new-sidebar, [data-theme="moonlight"] .new-sidebar.open, [data-theme="moonlight"] .settings-area, [data-theme="moonlight"] .tasks-area, [data-theme="moonlight"] .task-item, [data-theme="dawn"] .glass, [data-theme="dawn"] .island-panel, [data-theme="dawn"] .gp-section, [data-theme="dawn"] .left-sidebar, [data-theme="dawn"] .right-sidebar, [data-theme="dawn"] .quick-gen-section, [data-theme="dawn"] .api-section, [data-theme="dawn"] .tutorial-section, [data-theme="dawn"] .tutorial-card, [data-theme="dawn"] .hero-l-top, [data-theme="dawn"] .gh-root, [data-theme="dawn"] .ad-space-banner, [data-theme="dawn"] .feature-card, [data-theme="dawn"] .new-sidebar, [data-theme="dawn"] .new-sidebar.open, [data-theme="dawn"] .settings-area, [data-theme="dawn"] .tasks-area, [data-theme="dawn"] .task-item, [data-theme="aurora"] .glass, [data-theme="aurora"] .island-panel, [data-theme="aurora"] .gp-section, [data-theme="aurora"] .left-sidebar, [data-theme="aurora"] .right-sidebar, [data-theme="aurora"] .quick-gen-section, [data-theme="aurora"] .api-section, [data-theme="aurora"] .tutorial-section, [data-theme="aurora"] .tutorial-card, [data-theme="aurora"] .hero-l-top, [data-theme="aurora"] .gh-root, [data-theme="aurora"] .ad-space-banner, [data-theme="aurora"] .feature-card, [data-theme="aurora"] .new-sidebar, [data-theme="aurora"] .new-sidebar.open, [data-theme="aurora"] .settings-area, [data-theme="aurora"] .tasks-area, [data-theme="aurora"] .task-item, [data-theme="coral"] .glass, [data-theme="coral"] .island-panel, [data-theme="coral"] .gp-section, [data-theme="coral"] .left-sidebar, [data-theme="coral"] .right-sidebar, [data-theme="coral"] .quick-gen-section, [data-theme="coral"] .api-section, [data-theme="coral"] .tutorial-section, [data-theme="coral"] .tutorial-card, [data-theme="coral"] .hero-l-top, [data-theme="coral"] .gh-root, [data-theme="coral"] .ad-space-banner, [data-theme="coral"] .feature-card, [data-theme="coral"] .new-sidebar, [data-theme="coral"] .new-sidebar.open, [data-theme="coral"] .settings-area, [data-theme="coral"] .tasks-area, [data-theme="coral"] .task-item {
  text-shadow: var(--glass-text-shadow, none);
}

body {
  background-color: #0000;
  background-image: radial-gradient(70% 55% at 12% -5%, #2b7fff4d, #0000 62%), radial-gradient(60% 50% at 92% 8%, #22d3ee3d, #0000 62%), radial-gradient(55% 40% at 82% 78%, #7c5cf621, #0000 65%), radial-gradient(60% 45% at 8% 92%, #2dd4bf2b, #0000 65%), linear-gradient(#eef6ff 0%, #d9ecff 30%, #c2ddff 68%, #def 100%);
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, repeat, repeat;
  background-size: auto, auto, auto, auto, auto;
  background-attachment: fixed;
  background-origin: padding-box, padding-box, padding-box, padding-box, padding-box;
  background-clip: border-box, border-box, border-box, border-box, border-box;
}

body:before {
  content: "";
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(#1e6ee612 1px, #0000 1px), linear-gradient(90deg, #1e6ee612 1px, #0000 1px);
  background-size: 44px 44px;
  position: fixed;
  inset: 0;
  -webkit-mask-image: radial-gradient(110% 70% at 50% 0, #000 40%, #0000 92%);
  mask-image: radial-gradient(110% 70% at 50% 0, #000 40%, #0000 92%);
}

@keyframes rtFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

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

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
    filter: blur(var(--tw-enter-blur, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
    filter: blur(var(--tw-exit-blur, 0));
  }
}
/**
 * perf-glass.css — 毛玻璃与动画性能收敛规则（t20）
 *
 * 目标：
 * - 高模式视觉基本不变：只去掉滚动容器/嵌套/小面积元素的 backdrop-filter，
 *   用更高不透明度背景或 hover 才启用模糊来近似。
 * - 低性能模式（html.perf-mode / html[data-perf="low"]）允许明显降级：
 *   全局关闭 backdrop-filter/filter，禁用装饰性 infinite 动画。
 */

/* ── 1. 滚动容器禁用 backdrop-filter ── */
.main-content,
.material-page-grid,
.material-page-tree,
.material-island-tree-panel,
.material-island-grid-panel,
.material-list,
.trash-view,
.mark-manager-body,
.material-context-launch-more,
.batch-rr-rules,
.batch-rr-preview {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ── 2. 小面积/嵌套元素默认不 blur ──
   交互元素 hover/active 再启用；纯展示角标（mark-badge 等）保持实色背景。 */
.material-thumb-fav,
.material-thumb-mark,
.material-thumb-mark-btn,
.material-thumb-video-play,
.mark-badge,
.material-view-tab,
.material-toolbar-btn,
.material-island-icon-btn,
.material-island-settings-btn,
.material-page-pathbar-btn,
.material-context-item,
.material-sort-item,
.material-mark-filter-btn,
.material-mark-filter-tag,
.material-folder-count,
.material-input-dialog-input,
.material-settings-path-display,
.material-settings-browse-btn,
.material-settings-close-btn,
.material-toast {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* 交互元素 hover/active 恢复轻量 blur（保持玻璃反馈） */
.material-thumb:hover .material-thumb-fav,
.material-thumb-fav.active,
.material-thumb-mark:hover,
.material-thumb-mark-btn:hover,
.material-thumb:hover .material-thumb-video-play,
.material-view-tab:hover,
.material-view-tab.active,
.material-toolbar-btn:hover,
.material-toolbar-btn.active,
.material-island-icon-btn:hover,
.material-island-settings-btn:hover,
.material-page-pathbar-btn:hover,
.material-context-item:hover,
.material-sort-item:hover,
.material-mark-filter-btn:hover,
.material-mark-filter-btn.active,
.material-mark-filter-tag:hover {
    -webkit-backdrop-filter: saturate(var(--glass-saturate-near, 1.8)) blur(var(--glass-blur-near, 8px)) !important;
    backdrop-filter: saturate(var(--glass-saturate-near, 1.8)) blur(var(--glass-blur-near, 8px)) !important;
}

/* ── 3. 不支持 backdrop-filter 的回退：半透明实色 + 描边 ── */
/* 治本（2026-09-08）：原条件含 var()，按 CSS 规范 @supports 中含 var() 的声明
   恒视为无效 → not(无效) 恒为真 → 本回退段在「支持 backdrop-filter」的现代浏览器上
   也永远命中，全局禁用了毛玻璃。改为固定值真实判定（无需 var，blur(1px) 足以探针）。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass,
    .glass-surface,
    [class*="glass"],
    [class*="island"],
    [class*="panel"],
    [class*="dialog"],
    [class*="menu"],
    [class*="popover"],
    [class*="sheet"],
    [class*="drawer"],
    [class*="card"] {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* ── 4. 低性能模式：全局关闭毛玻璃/滤镜，装饰动画暂停 ── */
html.perf-mode,
html.perf-mode *,
html.perf-mode *::before,
html.perf-mode *::after,
html[data-perf="low"],
html[data-perf="low"] *,
html[data-perf="low"] *::before,
html[data-perf="low"] *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    will-change: auto !important;
}

html.perf-mode,
html[data-perf="low"] {
    --glass-opacity: 1;
    --glass-alpha: 1;
    --glass-alpha-strong: 1;
    --glass-alpha-near: 1;
    --glass-alpha-mid: 1;
    --glass-alpha-far: 1;
    --glass-bg-near: rgba(var(--glass-bg-rgb), 1);
    --glass-bg-mid: rgba(var(--glass-bg-rgb), 1);
    --glass-bg-far: rgba(var(--glass-bg-rgb), 1);
    --surface-glass: rgba(var(--glass-bg-rgb), 1);
    --surface-glass-strong: rgba(var(--glass-bg-rgb), 1);
}

/* 低性能模式：暂停装饰性/环境 infinite 动画 */
html.perf-mode .marble-layer,
html.perf-mode [class*="ambient"],
html.perf-mode [class*="twinkle"],
html.perf-mode [class*="halo"],
html.perf-mode [class*="rays"],
html.perf-mode [class*="float"],
html.perf-mode [class*="ripple"],
html.perf-mode [class*="sheen"],
html.perf-mode [class*="orbit"],
html.perf-mode [class*="wave"],
html[data-perf="low"] .marble-layer,
html[data-perf="low"] [class*="ambient"],
html[data-perf="low"] [class*="twinkle"],
html[data-perf="low"] [class*="halo"],
html[data-perf="low"] [class*="rays"],
html[data-perf="low"] [class*="float"],
html[data-perf="low"] [class*="ripple"],
html[data-perf="low"] [class*="sheen"],
html[data-perf="low"] [class*="orbit"],
html[data-perf="low"] [class*="wave"] {
    animation-play-state: paused !important;
}

/* 减少动态效果偏好下也清理常驻 will-change */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        will-change: auto !important;
    }
}
/*!
 * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
.fa{font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:var(--fa-style,900)}.fa,.fa-brands,.fa-regular,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-brands:before,.fa-regular:before,.fa-solid:before,.fa:before,.fab:before,.far:before,.fas:before{content:var(--fa)}.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"}.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{animation-name:fa-beat;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{animation-name:fa-bounce;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{animation-name:fa-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{animation-name:fa-beat-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{animation-name:fa-flip;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{animation-name:fa-shake;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{animation-name:fa-spin;animation-duration:var(--fa-animation-duration,2s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{animation-name:fa-spin;animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{animation-delay:-1ms;animation-duration:1ms;animation-iteration-count:1;transition-delay:0s;transition-duration:0s}}@keyframes fa-beat{0%,90%{transform:scale(1)}45%{transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1)}50%{opacity:1;transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-flip{50%{transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-shake{0%{transform:rotate(-15deg)}4%{transform:rotate(15deg)}8%,24%{transform:rotate(-18deg)}12%,28%{transform:rotate(18deg)}16%{transform:rotate(-22deg)}20%{transform:rotate(22deg)}32%{transform:rotate(-12deg)}36%{transform:rotate(12deg)}40%,to{transform:rotate(0deg)}}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{transform:rotate(90deg)}.fa-rotate-180{transform:rotate(180deg)}.fa-rotate-270{transform:rotate(270deg)}.fa-flip-horizontal{transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}.fa-rotate-by{transform:rotate(var(--fa-rotate-angle,0))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)}

.fa-0{--fa:"\30"}.fa-1{--fa:"\31"}.fa-2{--fa:"\32"}.fa-3{--fa:"\33"}.fa-4{--fa:"\34"}.fa-5{--fa:"\35"}.fa-6{--fa:"\36"}.fa-7{--fa:"\37"}.fa-8{--fa:"\38"}.fa-9{--fa:"\39"}.fa-fill-drip{--fa:"\f576"}.fa-arrows-to-circle{--fa:"\e4bd"}.fa-chevron-circle-right,.fa-circle-chevron-right{--fa:"\f138"}.fa-at{--fa:"\40"}.fa-trash-alt,.fa-trash-can{--fa:"\f2ed"}.fa-text-height{--fa:"\f034"}.fa-user-times,.fa-user-xmark{--fa:"\f235"}.fa-stethoscope{--fa:"\f0f1"}.fa-comment-alt,.fa-message{--fa:"\f27a"}.fa-info{--fa:"\f129"}.fa-compress-alt,.fa-down-left-and-up-right-to-center{--fa:"\f422"}.fa-explosion{--fa:"\e4e9"}.fa-file-alt,.fa-file-lines,.fa-file-text{--fa:"\f15c"}.fa-wave-square{--fa:"\f83e"}.fa-ring{--fa:"\f70b"}.fa-building-un{--fa:"\e4d9"}.fa-dice-three{--fa:"\f527"}.fa-calendar-alt,.fa-calendar-days{--fa:"\f073"}.fa-anchor-circle-check{--fa:"\e4aa"}.fa-building-circle-arrow-right{--fa:"\e4d1"}.fa-volleyball,.fa-volleyball-ball{--fa:"\f45f"}.fa-arrows-up-to-line{--fa:"\e4c2"}.fa-sort-desc,.fa-sort-down{--fa:"\f0dd"}.fa-circle-minus,.fa-minus-circle{--fa:"\f056"}.fa-door-open{--fa:"\f52b"}.fa-right-from-bracket,.fa-sign-out-alt{--fa:"\f2f5"}.fa-atom{--fa:"\f5d2"}.fa-soap{--fa:"\e06e"}.fa-heart-music-camera-bolt,.fa-icons{--fa:"\f86d"}.fa-microphone-alt-slash,.fa-microphone-lines-slash{--fa:"\f539"}.fa-bridge-circle-check{--fa:"\e4c9"}.fa-pump-medical{--fa:"\e06a"}.fa-fingerprint{--fa:"\f577"}.fa-hand-point-right{--fa:"\f0a4"}.fa-magnifying-glass-location,.fa-search-location{--fa:"\f689"}.fa-forward-step,.fa-step-forward{--fa:"\f051"}.fa-face-smile-beam,.fa-smile-beam{--fa:"\f5b8"}.fa-flag-checkered{--fa:"\f11e"}.fa-football,.fa-football-ball{--fa:"\f44e"}.fa-school-circle-exclamation{--fa:"\e56c"}.fa-crop{--fa:"\f125"}.fa-angle-double-down,.fa-angles-down{--fa:"\f103"}.fa-users-rectangle{--fa:"\e594"}.fa-people-roof{--fa:"\e537"}.fa-people-line{--fa:"\e534"}.fa-beer,.fa-beer-mug-empty{--fa:"\f0fc"}.fa-diagram-predecessor{--fa:"\e477"}.fa-arrow-up-long,.fa-long-arrow-up{--fa:"\f176"}.fa-burn,.fa-fire-flame-simple{--fa:"\f46a"}.fa-male,.fa-person{--fa:"\f183"}.fa-laptop{--fa:"\f109"}.fa-file-csv{--fa:"\f6dd"}.fa-menorah{--fa:"\f676"}.fa-truck-plane{--fa:"\e58f"}.fa-record-vinyl{--fa:"\f8d9"}.fa-face-grin-stars,.fa-grin-stars{--fa:"\f587"}.fa-bong{--fa:"\f55c"}.fa-pastafarianism,.fa-spaghetti-monster-flying{--fa:"\f67b"}.fa-arrow-down-up-across-line{--fa:"\e4af"}.fa-spoon,.fa-utensil-spoon{--fa:"\f2e5"}.fa-jar-wheat{--fa:"\e517"}.fa-envelopes-bulk,.fa-mail-bulk{--fa:"\f674"}.fa-file-circle-exclamation{--fa:"\e4eb"}.fa-circle-h,.fa-hospital-symbol{--fa:"\f47e"}.fa-pager{--fa:"\f815"}.fa-address-book,.fa-contact-book{--fa:"\f2b9"}.fa-strikethrough{--fa:"\f0cc"}.fa-k{--fa:"\4b"}.fa-landmark-flag{--fa:"\e51c"}.fa-pencil,.fa-pencil-alt{--fa:"\f303"}.fa-backward{--fa:"\f04a"}.fa-caret-right{--fa:"\f0da"}.fa-comments{--fa:"\f086"}.fa-file-clipboard,.fa-paste{--fa:"\f0ea"}.fa-code-pull-request{--fa:"\e13c"}.fa-clipboard-list{--fa:"\f46d"}.fa-truck-loading,.fa-truck-ramp-box{--fa:"\f4de"}.fa-user-check{--fa:"\f4fc"}.fa-vial-virus{--fa:"\e597"}.fa-sheet-plastic{--fa:"\e571"}.fa-blog{--fa:"\f781"}.fa-user-ninja{--fa:"\f504"}.fa-person-arrow-up-from-line{--fa:"\e539"}.fa-scroll-torah,.fa-torah{--fa:"\f6a0"}.fa-broom-ball,.fa-quidditch,.fa-quidditch-broom-ball{--fa:"\f458"}.fa-toggle-off{--fa:"\f204"}.fa-archive,.fa-box-archive{--fa:"\f187"}.fa-person-drowning{--fa:"\e545"}.fa-arrow-down-9-1,.fa-sort-numeric-desc,.fa-sort-numeric-down-alt{--fa:"\f886"}.fa-face-grin-tongue-squint,.fa-grin-tongue-squint{--fa:"\f58a"}.fa-spray-can{--fa:"\f5bd"}.fa-truck-monster{--fa:"\f63b"}.fa-w{--fa:"\57"}.fa-earth-africa,.fa-globe-africa{--fa:"\f57c"}.fa-rainbow{--fa:"\f75b"}.fa-circle-notch{--fa:"\f1ce"}.fa-tablet-alt,.fa-tablet-screen-button{--fa:"\f3fa"}.fa-paw{--fa:"\f1b0"}.fa-cloud{--fa:"\f0c2"}.fa-trowel-bricks{--fa:"\e58a"}.fa-face-flushed,.fa-flushed{--fa:"\f579"}.fa-hospital-user{--fa:"\f80d"}.fa-tent-arrow-left-right{--fa:"\e57f"}.fa-gavel,.fa-legal{--fa:"\f0e3"}.fa-binoculars{--fa:"\f1e5"}.fa-microphone-slash{--fa:"\f131"}.fa-box-tissue{--fa:"\e05b"}.fa-motorcycle{--fa:"\f21c"}.fa-bell-concierge,.fa-concierge-bell{--fa:"\f562"}.fa-pen-ruler,.fa-pencil-ruler{--fa:"\f5ae"}.fa-people-arrows,.fa-people-arrows-left-right{--fa:"\e068"}.fa-mars-and-venus-burst{--fa:"\e523"}.fa-caret-square-right,.fa-square-caret-right{--fa:"\f152"}.fa-cut,.fa-scissors{--fa:"\f0c4"}.fa-sun-plant-wilt{--fa:"\e57a"}.fa-toilets-portable{--fa:"\e584"}.fa-hockey-puck{--fa:"\f453"}.fa-table{--fa:"\f0ce"}.fa-magnifying-glass-arrow-right{--fa:"\e521"}.fa-digital-tachograph,.fa-tachograph-digital{--fa:"\f566"}.fa-users-slash{--fa:"\e073"}.fa-clover{--fa:"\e139"}.fa-mail-reply,.fa-reply{--fa:"\f3e5"}.fa-star-and-crescent{--fa:"\f699"}.fa-house-fire{--fa:"\e50c"}.fa-minus-square,.fa-square-minus{--fa:"\f146"}.fa-helicopter{--fa:"\f533"}.fa-compass{--fa:"\f14e"}.fa-caret-square-down,.fa-square-caret-down{--fa:"\f150"}.fa-file-circle-question{--fa:"\e4ef"}.fa-laptop-code{--fa:"\f5fc"}.fa-swatchbook{--fa:"\f5c3"}.fa-prescription-bottle{--fa:"\f485"}.fa-bars,.fa-navicon{--fa:"\f0c9"}.fa-people-group{--fa:"\e533"}.fa-hourglass-3,.fa-hourglass-end{--fa:"\f253"}.fa-heart-broken,.fa-heart-crack{--fa:"\f7a9"}.fa-external-link-square-alt,.fa-square-up-right{--fa:"\f360"}.fa-face-kiss-beam,.fa-kiss-beam{--fa:"\f597"}.fa-film{--fa:"\f008"}.fa-ruler-horizontal{--fa:"\f547"}.fa-people-robbery{--fa:"\e536"}.fa-lightbulb{--fa:"\f0eb"}.fa-caret-left{--fa:"\f0d9"}.fa-circle-exclamation,.fa-exclamation-circle{--fa:"\f06a"}.fa-school-circle-xmark{--fa:"\e56d"}.fa-arrow-right-from-bracket,.fa-sign-out{--fa:"\f08b"}.fa-chevron-circle-down,.fa-circle-chevron-down{--fa:"\f13a"}.fa-unlock-alt,.fa-unlock-keyhole{--fa:"\f13e"}.fa-cloud-showers-heavy{--fa:"\f740"}.fa-headphones-alt,.fa-headphones-simple{--fa:"\f58f"}.fa-sitemap{--fa:"\f0e8"}.fa-circle-dollar-to-slot,.fa-donate{--fa:"\f4b9"}.fa-memory{--fa:"\f538"}.fa-road-spikes{--fa:"\e568"}.fa-fire-burner{--fa:"\e4f1"}.fa-flag{--fa:"\f024"}.fa-hanukiah{--fa:"\f6e6"}.fa-feather{--fa:"\f52d"}.fa-volume-down,.fa-volume-low{--fa:"\f027"}.fa-comment-slash{--fa:"\f4b3"}.fa-cloud-sun-rain{--fa:"\f743"}.fa-compress{--fa:"\f066"}.fa-wheat-alt,.fa-wheat-awn{--fa:"\e2cd"}.fa-ankh{--fa:"\f644"}.fa-hands-holding-child{--fa:"\e4fa"}.fa-asterisk{--fa:"\2a"}.fa-check-square,.fa-square-check{--fa:"\f14a"}.fa-peseta-sign{--fa:"\e221"}.fa-header,.fa-heading{--fa:"\f1dc"}.fa-ghost{--fa:"\f6e2"}.fa-list,.fa-list-squares{--fa:"\f03a"}.fa-phone-square-alt,.fa-square-phone-flip{--fa:"\f87b"}.fa-cart-plus{--fa:"\f217"}.fa-gamepad{--fa:"\f11b"}.fa-circle-dot,.fa-dot-circle{--fa:"\f192"}.fa-dizzy,.fa-face-dizzy{--fa:"\f567"}.fa-egg{--fa:"\f7fb"}.fa-house-medical-circle-xmark{--fa:"\e513"}.fa-campground{--fa:"\f6bb"}.fa-folder-plus{--fa:"\f65e"}.fa-futbol,.fa-futbol-ball,.fa-soccer-ball{--fa:"\f1e3"}.fa-paint-brush,.fa-paintbrush{--fa:"\f1fc"}.fa-lock{--fa:"\f023"}.fa-gas-pump{--fa:"\f52f"}.fa-hot-tub,.fa-hot-tub-person{--fa:"\f593"}.fa-map-location,.fa-map-marked{--fa:"\f59f"}.fa-house-flood-water{--fa:"\e50e"}.fa-tree{--fa:"\f1bb"}.fa-bridge-lock{--fa:"\e4cc"}.fa-sack-dollar{--fa:"\f81d"}.fa-edit,.fa-pen-to-square{--fa:"\f044"}.fa-car-side{--fa:"\f5e4"}.fa-share-alt,.fa-share-nodes{--fa:"\f1e0"}.fa-heart-circle-minus{--fa:"\e4ff"}.fa-hourglass-2,.fa-hourglass-half{--fa:"\f252"}.fa-microscope{--fa:"\f610"}.fa-sink{--fa:"\e06d"}.fa-bag-shopping,.fa-shopping-bag{--fa:"\f290"}.fa-arrow-down-z-a,.fa-sort-alpha-desc,.fa-sort-alpha-down-alt{--fa:"\f881"}.fa-mitten{--fa:"\f7b5"}.fa-person-rays{--fa:"\e54d"}.fa-users{--fa:"\f0c0"}.fa-eye-slash{--fa:"\f070"}.fa-flask-vial{--fa:"\e4f3"}.fa-hand,.fa-hand-paper{--fa:"\f256"}.fa-om{--fa:"\f679"}.fa-worm{--fa:"\e599"}.fa-house-circle-xmark{--fa:"\e50b"}.fa-plug{--fa:"\f1e6"}.fa-chevron-up{--fa:"\f077"}.fa-hand-spock{--fa:"\f259"}.fa-stopwatch{--fa:"\f2f2"}.fa-face-kiss,.fa-kiss{--fa:"\f596"}.fa-bridge-circle-xmark{--fa:"\e4cb"}.fa-face-grin-tongue,.fa-grin-tongue{--fa:"\f589"}.fa-chess-bishop{--fa:"\f43a"}.fa-face-grin-wink,.fa-grin-wink{--fa:"\f58c"}.fa-deaf,.fa-deafness,.fa-ear-deaf,.fa-hard-of-hearing{--fa:"\f2a4"}.fa-road-circle-check{--fa:"\e564"}.fa-dice-five{--fa:"\f523"}.fa-rss-square,.fa-square-rss{--fa:"\f143"}.fa-land-mine-on{--fa:"\e51b"}.fa-i-cursor{--fa:"\f246"}.fa-stamp{--fa:"\f5bf"}.fa-stairs{--fa:"\e289"}.fa-i{--fa:"\49"}.fa-hryvnia,.fa-hryvnia-sign{--fa:"\f6f2"}.fa-pills{--fa:"\f484"}.fa-face-grin-wide,.fa-grin-alt{--fa:"\f581"}.fa-tooth{--fa:"\f5c9"}.fa-v{--fa:"\56"}.fa-bangladeshi-taka-sign{--fa:"\e2e6"}.fa-bicycle{--fa:"\f206"}.fa-rod-asclepius,.fa-rod-snake,.fa-staff-aesculapius,.fa-staff-snake{--fa:"\e579"}.fa-head-side-cough-slash{--fa:"\e062"}.fa-ambulance,.fa-truck-medical{--fa:"\f0f9"}.fa-wheat-awn-circle-exclamation{--fa:"\e598"}.fa-snowman{--fa:"\f7d0"}.fa-mortar-pestle{--fa:"\f5a7"}.fa-road-barrier{--fa:"\e562"}.fa-school{--fa:"\f549"}.fa-igloo{--fa:"\f7ae"}.fa-joint{--fa:"\f595"}.fa-angle-right{--fa:"\f105"}.fa-horse{--fa:"\f6f0"}.fa-q{--fa:"\51"}.fa-g{--fa:"\47"}.fa-notes-medical{--fa:"\f481"}.fa-temperature-2,.fa-temperature-half,.fa-thermometer-2,.fa-thermometer-half{--fa:"\f2c9"}.fa-dong-sign{--fa:"\e169"}.fa-capsules{--fa:"\f46b"}.fa-poo-bolt,.fa-poo-storm{--fa:"\f75a"}.fa-face-frown-open,.fa-frown-open{--fa:"\f57a"}.fa-hand-point-up{--fa:"\f0a6"}.fa-money-bill{--fa:"\f0d6"}.fa-bookmark{--fa:"\f02e"}.fa-align-justify{--fa:"\f039"}.fa-umbrella-beach{--fa:"\f5ca"}.fa-helmet-un{--fa:"\e503"}.fa-bullseye{--fa:"\f140"}.fa-bacon{--fa:"\f7e5"}.fa-hand-point-down{--fa:"\f0a7"}.fa-arrow-up-from-bracket{--fa:"\e09a"}.fa-folder,.fa-folder-blank{--fa:"\f07b"}.fa-file-medical-alt,.fa-file-waveform{--fa:"\f478"}.fa-radiation{--fa:"\f7b9"}.fa-chart-simple{--fa:"\e473"}.fa-mars-stroke{--fa:"\f229"}.fa-vial{--fa:"\f492"}.fa-dashboard,.fa-gauge,.fa-gauge-med,.fa-tachometer-alt-average{--fa:"\f624"}.fa-magic-wand-sparkles,.fa-wand-magic-sparkles{--fa:"\e2ca"}.fa-e{--fa:"\45"}.fa-pen-alt,.fa-pen-clip{--fa:"\f305"}.fa-bridge-circle-exclamation{--fa:"\e4ca"}.fa-user{--fa:"\f007"}.fa-school-circle-check{--fa:"\e56b"}.fa-dumpster{--fa:"\f793"}.fa-shuttle-van,.fa-van-shuttle{--fa:"\f5b6"}.fa-building-user{--fa:"\e4da"}.fa-caret-square-left,.fa-square-caret-left{--fa:"\f191"}.fa-highlighter{--fa:"\f591"}.fa-key{--fa:"\f084"}.fa-bullhorn{--fa:"\f0a1"}.fa-globe{--fa:"\f0ac"}.fa-synagogue{--fa:"\f69b"}.fa-person-half-dress{--fa:"\e548"}.fa-road-bridge{--fa:"\e563"}.fa-location-arrow{--fa:"\f124"}.fa-c{--fa:"\43"}.fa-tablet-button{--fa:"\f10a"}.fa-building-lock{--fa:"\e4d6"}.fa-pizza-slice{--fa:"\f818"}.fa-money-bill-wave{--fa:"\f53a"}.fa-area-chart,.fa-chart-area{--fa:"\f1fe"}.fa-house-flag{--fa:"\e50d"}.fa-person-circle-minus{--fa:"\e540"}.fa-ban,.fa-cancel{--fa:"\f05e"}.fa-camera-rotate{--fa:"\e0d8"}.fa-air-freshener,.fa-spray-can-sparkles{--fa:"\f5d0"}.fa-star{--fa:"\f005"}.fa-repeat{--fa:"\f363"}.fa-cross{--fa:"\f654"}.fa-box{--fa:"\f466"}.fa-venus-mars{--fa:"\f228"}.fa-arrow-pointer,.fa-mouse-pointer{--fa:"\f245"}.fa-expand-arrows-alt,.fa-maximize{--fa:"\f31e"}.fa-charging-station{--fa:"\f5e7"}.fa-shapes,.fa-triangle-circle-square{--fa:"\f61f"}.fa-random,.fa-shuffle{--fa:"\f074"}.fa-person-running,.fa-running{--fa:"\f70c"}.fa-mobile-retro{--fa:"\e527"}.fa-grip-lines-vertical{--fa:"\f7a5"}.fa-spider{--fa:"\f717"}.fa-hands-bound{--fa:"\e4f9"}.fa-file-invoice-dollar{--fa:"\f571"}.fa-plane-circle-exclamation{--fa:"\e556"}.fa-x-ray{--fa:"\f497"}.fa-spell-check{--fa:"\f891"}.fa-slash{--fa:"\f715"}.fa-computer-mouse,.fa-mouse{--fa:"\f8cc"}.fa-arrow-right-to-bracket,.fa-sign-in{--fa:"\f090"}.fa-shop-slash,.fa-store-alt-slash{--fa:"\e070"}.fa-server{--fa:"\f233"}.fa-virus-covid-slash{--fa:"\e4a9"}.fa-shop-lock{--fa:"\e4a5"}.fa-hourglass-1,.fa-hourglass-start{--fa:"\f251"}.fa-blender-phone{--fa:"\f6b6"}.fa-building-wheat{--fa:"\e4db"}.fa-person-breastfeeding{--fa:"\e53a"}.fa-right-to-bracket,.fa-sign-in-alt{--fa:"\f2f6"}.fa-venus{--fa:"\f221"}.fa-passport{--fa:"\f5ab"}.fa-thumb-tack-slash,.fa-thumbtack-slash{--fa:"\e68f"}.fa-heart-pulse,.fa-heartbeat{--fa:"\f21e"}.fa-people-carry,.fa-people-carry-box{--fa:"\f4ce"}.fa-temperature-high{--fa:"\f769"}.fa-microchip{--fa:"\f2db"}.fa-crown{--fa:"\f521"}.fa-weight-hanging{--fa:"\f5cd"}.fa-xmarks-lines{--fa:"\e59a"}.fa-file-prescription{--fa:"\f572"}.fa-weight,.fa-weight-scale{--fa:"\f496"}.fa-user-friends,.fa-user-group{--fa:"\f500"}.fa-arrow-up-a-z,.fa-sort-alpha-up{--fa:"\f15e"}.fa-chess-knight{--fa:"\f441"}.fa-face-laugh-squint,.fa-laugh-squint{--fa:"\f59b"}.fa-wheelchair{--fa:"\f193"}.fa-arrow-circle-up,.fa-circle-arrow-up{--fa:"\f0aa"}.fa-toggle-on{--fa:"\f205"}.fa-person-walking,.fa-walking{--fa:"\f554"}.fa-l{--fa:"\4c"}.fa-fire{--fa:"\f06d"}.fa-bed-pulse,.fa-procedures{--fa:"\f487"}.fa-shuttle-space,.fa-space-shuttle{--fa:"\f197"}.fa-face-laugh,.fa-laugh{--fa:"\f599"}.fa-folder-open{--fa:"\f07c"}.fa-heart-circle-plus{--fa:"\e500"}.fa-code-fork{--fa:"\e13b"}.fa-city{--fa:"\f64f"}.fa-microphone-alt,.fa-microphone-lines{--fa:"\f3c9"}.fa-pepper-hot{--fa:"\f816"}.fa-unlock{--fa:"\f09c"}.fa-colon-sign{--fa:"\e140"}.fa-headset{--fa:"\f590"}.fa-store-slash{--fa:"\e071"}.fa-road-circle-xmark{--fa:"\e566"}.fa-user-minus{--fa:"\f503"}.fa-mars-stroke-up,.fa-mars-stroke-v{--fa:"\f22a"}.fa-champagne-glasses,.fa-glass-cheers{--fa:"\f79f"}.fa-clipboard{--fa:"\f328"}.fa-house-circle-exclamation{--fa:"\e50a"}.fa-file-arrow-up,.fa-file-upload{--fa:"\f574"}.fa-wifi,.fa-wifi-3,.fa-wifi-strong{--fa:"\f1eb"}.fa-bath,.fa-bathtub{--fa:"\f2cd"}.fa-underline{--fa:"\f0cd"}.fa-user-edit,.fa-user-pen{--fa:"\f4ff"}.fa-signature{--fa:"\f5b7"}.fa-stroopwafel{--fa:"\f551"}.fa-bold{--fa:"\f032"}.fa-anchor-lock{--fa:"\e4ad"}.fa-building-ngo{--fa:"\e4d7"}.fa-manat-sign{--fa:"\e1d5"}.fa-not-equal{--fa:"\f53e"}.fa-border-style,.fa-border-top-left{--fa:"\f853"}.fa-map-location-dot,.fa-map-marked-alt{--fa:"\f5a0"}.fa-jedi{--fa:"\f669"}.fa-poll,.fa-square-poll-vertical{--fa:"\f681"}.fa-mug-hot{--fa:"\f7b6"}.fa-battery-car,.fa-car-battery{--fa:"\f5df"}.fa-gift{--fa:"\f06b"}.fa-dice-two{--fa:"\f528"}.fa-chess-queen{--fa:"\f445"}.fa-glasses{--fa:"\f530"}.fa-chess-board{--fa:"\f43c"}.fa-building-circle-check{--fa:"\e4d2"}.fa-person-chalkboard{--fa:"\e53d"}.fa-mars-stroke-h,.fa-mars-stroke-right{--fa:"\f22b"}.fa-hand-back-fist,.fa-hand-rock{--fa:"\f255"}.fa-caret-square-up,.fa-square-caret-up{--fa:"\f151"}.fa-cloud-showers-water{--fa:"\e4e4"}.fa-bar-chart,.fa-chart-bar{--fa:"\f080"}.fa-hands-bubbles,.fa-hands-wash{--fa:"\e05e"}.fa-less-than-equal{--fa:"\f537"}.fa-train{--fa:"\f238"}.fa-eye-low-vision,.fa-low-vision{--fa:"\f2a8"}.fa-crow{--fa:"\f520"}.fa-sailboat{--fa:"\e445"}.fa-window-restore{--fa:"\f2d2"}.fa-plus-square,.fa-square-plus{--fa:"\f0fe"}.fa-torii-gate{--fa:"\f6a1"}.fa-frog{--fa:"\f52e"}.fa-bucket{--fa:"\e4cf"}.fa-image{--fa:"\f03e"}.fa-microphone{--fa:"\f130"}.fa-cow{--fa:"\f6c8"}.fa-caret-up{--fa:"\f0d8"}.fa-screwdriver{--fa:"\f54a"}.fa-folder-closed{--fa:"\e185"}.fa-house-tsunami{--fa:"\e515"}.fa-square-nfi{--fa:"\e576"}.fa-arrow-up-from-ground-water{--fa:"\e4b5"}.fa-glass-martini-alt,.fa-martini-glass{--fa:"\f57b"}.fa-square-binary{--fa:"\e69b"}.fa-rotate-back,.fa-rotate-backward,.fa-rotate-left,.fa-undo-alt{--fa:"\f2ea"}.fa-columns,.fa-table-columns{--fa:"\f0db"}.fa-lemon{--fa:"\f094"}.fa-head-side-mask{--fa:"\e063"}.fa-handshake{--fa:"\f2b5"}.fa-gem{--fa:"\f3a5"}.fa-dolly,.fa-dolly-box{--fa:"\f472"}.fa-smoking{--fa:"\f48d"}.fa-compress-arrows-alt,.fa-minimize{--fa:"\f78c"}.fa-monument{--fa:"\f5a6"}.fa-snowplow{--fa:"\f7d2"}.fa-angle-double-right,.fa-angles-right{--fa:"\f101"}.fa-cannabis{--fa:"\f55f"}.fa-circle-play,.fa-play-circle{--fa:"\f144"}.fa-tablets{--fa:"\f490"}.fa-ethernet{--fa:"\f796"}.fa-eur,.fa-euro,.fa-euro-sign{--fa:"\f153"}.fa-chair{--fa:"\f6c0"}.fa-check-circle,.fa-circle-check{--fa:"\f058"}.fa-circle-stop,.fa-stop-circle{--fa:"\f28d"}.fa-compass-drafting,.fa-drafting-compass{--fa:"\f568"}.fa-plate-wheat{--fa:"\e55a"}.fa-icicles{--fa:"\f7ad"}.fa-person-shelter{--fa:"\e54f"}.fa-neuter{--fa:"\f22c"}.fa-id-badge{--fa:"\f2c1"}.fa-marker{--fa:"\f5a1"}.fa-face-laugh-beam,.fa-laugh-beam{--fa:"\f59a"}.fa-helicopter-symbol{--fa:"\e502"}.fa-universal-access{--fa:"\f29a"}.fa-chevron-circle-up,.fa-circle-chevron-up{--fa:"\f139"}.fa-lari-sign{--fa:"\e1c8"}.fa-volcano{--fa:"\f770"}.fa-person-walking-dashed-line-arrow-right{--fa:"\e553"}.fa-gbp,.fa-pound-sign,.fa-sterling-sign{--fa:"\f154"}.fa-viruses{--fa:"\e076"}.fa-square-person-confined{--fa:"\e577"}.fa-user-tie{--fa:"\f508"}.fa-arrow-down-long,.fa-long-arrow-down{--fa:"\f175"}.fa-tent-arrow-down-to-line{--fa:"\e57e"}.fa-certificate{--fa:"\f0a3"}.fa-mail-reply-all,.fa-reply-all{--fa:"\f122"}.fa-suitcase{--fa:"\f0f2"}.fa-person-skating,.fa-skating{--fa:"\f7c5"}.fa-filter-circle-dollar,.fa-funnel-dollar{--fa:"\f662"}.fa-camera-retro{--fa:"\f083"}.fa-arrow-circle-down,.fa-circle-arrow-down{--fa:"\f0ab"}.fa-arrow-right-to-file,.fa-file-import{--fa:"\f56f"}.fa-external-link-square,.fa-square-arrow-up-right{--fa:"\f14c"}.fa-box-open{--fa:"\f49e"}.fa-scroll{--fa:"\f70e"}.fa-spa{--fa:"\f5bb"}.fa-location-pin-lock{--fa:"\e51f"}.fa-pause{--fa:"\f04c"}.fa-hill-avalanche{--fa:"\e507"}.fa-temperature-0,.fa-temperature-empty,.fa-thermometer-0,.fa-thermometer-empty{--fa:"\f2cb"}.fa-bomb{--fa:"\f1e2"}.fa-registered{--fa:"\f25d"}.fa-address-card,.fa-contact-card,.fa-vcard{--fa:"\f2bb"}.fa-balance-scale-right,.fa-scale-unbalanced-flip{--fa:"\f516"}.fa-subscript{--fa:"\f12c"}.fa-diamond-turn-right,.fa-directions{--fa:"\f5eb"}.fa-burst{--fa:"\e4dc"}.fa-house-laptop,.fa-laptop-house{--fa:"\e066"}.fa-face-tired,.fa-tired{--fa:"\f5c8"}.fa-money-bills{--fa:"\e1f3"}.fa-smog{--fa:"\f75f"}.fa-crutch{--fa:"\f7f7"}.fa-cloud-arrow-up,.fa-cloud-upload,.fa-cloud-upload-alt{--fa:"\f0ee"}.fa-palette{--fa:"\f53f"}.fa-arrows-turn-right{--fa:"\e4c0"}.fa-vest{--fa:"\e085"}.fa-ferry{--fa:"\e4ea"}.fa-arrows-down-to-people{--fa:"\e4b9"}.fa-seedling,.fa-sprout{--fa:"\f4d8"}.fa-arrows-alt-h,.fa-left-right{--fa:"\f337"}.fa-boxes-packing{--fa:"\e4c7"}.fa-arrow-circle-left,.fa-circle-arrow-left{--fa:"\f0a8"}.fa-group-arrows-rotate{--fa:"\e4f6"}.fa-bowl-food{--fa:"\e4c6"}.fa-candy-cane{--fa:"\f786"}.fa-arrow-down-wide-short,.fa-sort-amount-asc,.fa-sort-amount-down{--fa:"\f160"}.fa-cloud-bolt,.fa-thunderstorm{--fa:"\f76c"}.fa-remove-format,.fa-text-slash{--fa:"\f87d"}.fa-face-smile-wink,.fa-smile-wink{--fa:"\f4da"}.fa-file-word{--fa:"\f1c2"}.fa-file-powerpoint{--fa:"\f1c4"}.fa-arrows-h,.fa-arrows-left-right{--fa:"\f07e"}.fa-house-lock{--fa:"\e510"}.fa-cloud-arrow-down,.fa-cloud-download,.fa-cloud-download-alt{--fa:"\f0ed"}.fa-children{--fa:"\e4e1"}.fa-blackboard,.fa-chalkboard{--fa:"\f51b"}.fa-user-alt-slash,.fa-user-large-slash{--fa:"\f4fa"}.fa-envelope-open{--fa:"\f2b6"}.fa-handshake-alt-slash,.fa-handshake-simple-slash{--fa:"\e05f"}.fa-mattress-pillow{--fa:"\e525"}.fa-guarani-sign{--fa:"\e19a"}.fa-arrows-rotate,.fa-refresh,.fa-sync{--fa:"\f021"}.fa-fire-extinguisher{--fa:"\f134"}.fa-cruzeiro-sign{--fa:"\e152"}.fa-greater-than-equal{--fa:"\f532"}.fa-shield-alt,.fa-shield-halved{--fa:"\f3ed"}.fa-atlas,.fa-book-atlas{--fa:"\f558"}.fa-virus{--fa:"\e074"}.fa-envelope-circle-check{--fa:"\e4e8"}.fa-layer-group{--fa:"\f5fd"}.fa-arrows-to-dot{--fa:"\e4be"}.fa-archway{--fa:"\f557"}.fa-heart-circle-check{--fa:"\e4fd"}.fa-house-chimney-crack,.fa-house-damage{--fa:"\f6f1"}.fa-file-archive,.fa-file-zipper{--fa:"\f1c6"}.fa-square{--fa:"\f0c8"}.fa-glass-martini,.fa-martini-glass-empty{--fa:"\f000"}.fa-couch{--fa:"\f4b8"}.fa-cedi-sign{--fa:"\e0df"}.fa-italic{--fa:"\f033"}.fa-table-cells-column-lock{--fa:"\e678"}.fa-church{--fa:"\f51d"}.fa-comments-dollar{--fa:"\f653"}.fa-democrat{--fa:"\f747"}.fa-z{--fa:"\5a"}.fa-person-skiing,.fa-skiing{--fa:"\f7c9"}.fa-road-lock{--fa:"\e567"}.fa-a{--fa:"\41"}.fa-temperature-arrow-down,.fa-temperature-down{--fa:"\e03f"}.fa-feather-alt,.fa-feather-pointed{--fa:"\f56b"}.fa-p{--fa:"\50"}.fa-snowflake{--fa:"\f2dc"}.fa-newspaper{--fa:"\f1ea"}.fa-ad,.fa-rectangle-ad{--fa:"\f641"}.fa-arrow-circle-right,.fa-circle-arrow-right{--fa:"\f0a9"}.fa-filter-circle-xmark{--fa:"\e17b"}.fa-locust{--fa:"\e520"}.fa-sort,.fa-unsorted{--fa:"\f0dc"}.fa-list-1-2,.fa-list-numeric,.fa-list-ol{--fa:"\f0cb"}.fa-person-dress-burst{--fa:"\e544"}.fa-money-check-alt,.fa-money-check-dollar{--fa:"\f53d"}.fa-vector-square{--fa:"\f5cb"}.fa-bread-slice{--fa:"\f7ec"}.fa-language{--fa:"\f1ab"}.fa-face-kiss-wink-heart,.fa-kiss-wink-heart{--fa:"\f598"}.fa-filter{--fa:"\f0b0"}.fa-question{--fa:"\3f"}.fa-file-signature{--fa:"\f573"}.fa-arrows-alt,.fa-up-down-left-right{--fa:"\f0b2"}.fa-house-chimney-user{--fa:"\e065"}.fa-hand-holding-heart{--fa:"\f4be"}.fa-puzzle-piece{--fa:"\f12e"}.fa-money-check{--fa:"\f53c"}.fa-star-half-alt,.fa-star-half-stroke{--fa:"\f5c0"}.fa-code{--fa:"\f121"}.fa-glass-whiskey,.fa-whiskey-glass{--fa:"\f7a0"}.fa-building-circle-exclamation{--fa:"\e4d3"}.fa-magnifying-glass-chart{--fa:"\e522"}.fa-arrow-up-right-from-square,.fa-external-link{--fa:"\f08e"}.fa-cubes-stacked{--fa:"\e4e6"}.fa-krw,.fa-won,.fa-won-sign{--fa:"\f159"}.fa-virus-covid{--fa:"\e4a8"}.fa-austral-sign{--fa:"\e0a9"}.fa-f{--fa:"\46"}.fa-leaf{--fa:"\f06c"}.fa-road{--fa:"\f018"}.fa-cab,.fa-taxi{--fa:"\f1ba"}.fa-person-circle-plus{--fa:"\e541"}.fa-chart-pie,.fa-pie-chart{--fa:"\f200"}.fa-bolt-lightning{--fa:"\e0b7"}.fa-sack-xmark{--fa:"\e56a"}.fa-file-excel{--fa:"\f1c3"}.fa-file-contract{--fa:"\f56c"}.fa-fish-fins{--fa:"\e4f2"}.fa-building-flag{--fa:"\e4d5"}.fa-face-grin-beam,.fa-grin-beam{--fa:"\f582"}.fa-object-ungroup{--fa:"\f248"}.fa-poop{--fa:"\f619"}.fa-location-pin,.fa-map-marker{--fa:"\f041"}.fa-kaaba{--fa:"\f66b"}.fa-toilet-paper{--fa:"\f71e"}.fa-hard-hat,.fa-hat-hard,.fa-helmet-safety{--fa:"\f807"}.fa-eject{--fa:"\f052"}.fa-arrow-alt-circle-right,.fa-circle-right{--fa:"\f35a"}.fa-plane-circle-check{--fa:"\e555"}.fa-face-rolling-eyes,.fa-meh-rolling-eyes{--fa:"\f5a5"}.fa-object-group{--fa:"\f247"}.fa-chart-line,.fa-line-chart{--fa:"\f201"}.fa-mask-ventilator{--fa:"\e524"}.fa-arrow-right{--fa:"\f061"}.fa-map-signs,.fa-signs-post{--fa:"\f277"}.fa-cash-register{--fa:"\f788"}.fa-person-circle-question{--fa:"\e542"}.fa-h{--fa:"\48"}.fa-tarp{--fa:"\e57b"}.fa-screwdriver-wrench,.fa-tools{--fa:"\f7d9"}.fa-arrows-to-eye{--fa:"\e4bf"}.fa-plug-circle-bolt{--fa:"\e55b"}.fa-heart{--fa:"\f004"}.fa-mars-and-venus{--fa:"\f224"}.fa-home-user,.fa-house-user{--fa:"\e1b0"}.fa-dumpster-fire{--fa:"\f794"}.fa-house-crack{--fa:"\e3b1"}.fa-cocktail,.fa-martini-glass-citrus{--fa:"\f561"}.fa-face-surprise,.fa-surprise{--fa:"\f5c2"}.fa-bottle-water{--fa:"\e4c5"}.fa-circle-pause,.fa-pause-circle{--fa:"\f28b"}.fa-toilet-paper-slash{--fa:"\e072"}.fa-apple-alt,.fa-apple-whole{--fa:"\f5d1"}.fa-kitchen-set{--fa:"\e51a"}.fa-r{--fa:"\52"}.fa-temperature-1,.fa-temperature-quarter,.fa-thermometer-1,.fa-thermometer-quarter{--fa:"\f2ca"}.fa-cube{--fa:"\f1b2"}.fa-bitcoin-sign{--fa:"\e0b4"}.fa-shield-dog{--fa:"\e573"}.fa-solar-panel{--fa:"\f5ba"}.fa-lock-open{--fa:"\f3c1"}.fa-elevator{--fa:"\e16d"}.fa-money-bill-transfer{--fa:"\e528"}.fa-money-bill-trend-up{--fa:"\e529"}.fa-house-flood-water-circle-arrow-right{--fa:"\e50f"}.fa-poll-h,.fa-square-poll-horizontal{--fa:"\f682"}.fa-circle{--fa:"\f111"}.fa-backward-fast,.fa-fast-backward{--fa:"\f049"}.fa-recycle{--fa:"\f1b8"}.fa-user-astronaut{--fa:"\f4fb"}.fa-plane-slash{--fa:"\e069"}.fa-trademark{--fa:"\f25c"}.fa-basketball,.fa-basketball-ball{--fa:"\f434"}.fa-satellite-dish{--fa:"\f7c0"}.fa-arrow-alt-circle-up,.fa-circle-up{--fa:"\f35b"}.fa-mobile-alt,.fa-mobile-screen-button{--fa:"\f3cd"}.fa-volume-high,.fa-volume-up{--fa:"\f028"}.fa-users-rays{--fa:"\e593"}.fa-wallet{--fa:"\f555"}.fa-clipboard-check{--fa:"\f46c"}.fa-file-audio{--fa:"\f1c7"}.fa-burger,.fa-hamburger{--fa:"\f805"}.fa-wrench{--fa:"\f0ad"}.fa-bugs{--fa:"\e4d0"}.fa-rupee,.fa-rupee-sign{--fa:"\f156"}.fa-file-image{--fa:"\f1c5"}.fa-circle-question,.fa-question-circle{--fa:"\f059"}.fa-plane-departure{--fa:"\f5b0"}.fa-handshake-slash{--fa:"\e060"}.fa-book-bookmark{--fa:"\e0bb"}.fa-code-branch{--fa:"\f126"}.fa-hat-cowboy{--fa:"\f8c0"}.fa-bridge{--fa:"\e4c8"}.fa-phone-alt,.fa-phone-flip{--fa:"\f879"}.fa-truck-front{--fa:"\e2b7"}.fa-cat{--fa:"\f6be"}.fa-anchor-circle-exclamation{--fa:"\e4ab"}.fa-truck-field{--fa:"\e58d"}.fa-route{--fa:"\f4d7"}.fa-clipboard-question{--fa:"\e4e3"}.fa-panorama{--fa:"\e209"}.fa-comment-medical{--fa:"\f7f5"}.fa-teeth-open{--fa:"\f62f"}.fa-file-circle-minus{--fa:"\e4ed"}.fa-tags{--fa:"\f02c"}.fa-wine-glass{--fa:"\f4e3"}.fa-fast-forward,.fa-forward-fast{--fa:"\f050"}.fa-face-meh-blank,.fa-meh-blank{--fa:"\f5a4"}.fa-parking,.fa-square-parking{--fa:"\f540"}.fa-house-signal{--fa:"\e012"}.fa-bars-progress,.fa-tasks-alt{--fa:"\f828"}.fa-faucet-drip{--fa:"\e006"}.fa-cart-flatbed,.fa-dolly-flatbed{--fa:"\f474"}.fa-ban-smoking,.fa-smoking-ban{--fa:"\f54d"}.fa-terminal{--fa:"\f120"}.fa-mobile-button{--fa:"\f10b"}.fa-house-medical-flag{--fa:"\e514"}.fa-basket-shopping,.fa-shopping-basket{--fa:"\f291"}.fa-tape{--fa:"\f4db"}.fa-bus-alt,.fa-bus-simple{--fa:"\f55e"}.fa-eye{--fa:"\f06e"}.fa-face-sad-cry,.fa-sad-cry{--fa:"\f5b3"}.fa-audio-description{--fa:"\f29e"}.fa-person-military-to-person{--fa:"\e54c"}.fa-file-shield{--fa:"\e4f0"}.fa-user-slash{--fa:"\f506"}.fa-pen{--fa:"\f304"}.fa-tower-observation{--fa:"\e586"}.fa-file-code{--fa:"\f1c9"}.fa-signal,.fa-signal-5,.fa-signal-perfect{--fa:"\f012"}.fa-bus{--fa:"\f207"}.fa-heart-circle-xmark{--fa:"\e501"}.fa-home-lg,.fa-house-chimney{--fa:"\e3af"}.fa-window-maximize{--fa:"\f2d0"}.fa-face-frown,.fa-frown{--fa:"\f119"}.fa-prescription{--fa:"\f5b1"}.fa-shop,.fa-store-alt{--fa:"\f54f"}.fa-floppy-disk,.fa-save{--fa:"\f0c7"}.fa-vihara{--fa:"\f6a7"}.fa-balance-scale-left,.fa-scale-unbalanced{--fa:"\f515"}.fa-sort-asc,.fa-sort-up{--fa:"\f0de"}.fa-comment-dots,.fa-commenting{--fa:"\f4ad"}.fa-plant-wilt{--fa:"\e5aa"}.fa-diamond{--fa:"\f219"}.fa-face-grin-squint,.fa-grin-squint{--fa:"\f585"}.fa-hand-holding-dollar,.fa-hand-holding-usd{--fa:"\f4c0"}.fa-chart-diagram{--fa:"\e695"}.fa-bacterium{--fa:"\e05a"}.fa-hand-pointer{--fa:"\f25a"}.fa-drum-steelpan{--fa:"\f56a"}.fa-hand-scissors{--fa:"\f257"}.fa-hands-praying,.fa-praying-hands{--fa:"\f684"}.fa-arrow-right-rotate,.fa-arrow-rotate-forward,.fa-arrow-rotate-right,.fa-redo{--fa:"\f01e"}.fa-biohazard{--fa:"\f780"}.fa-location,.fa-location-crosshairs{--fa:"\f601"}.fa-mars-double{--fa:"\f227"}.fa-child-dress{--fa:"\e59c"}.fa-users-between-lines{--fa:"\e591"}.fa-lungs-virus{--fa:"\e067"}.fa-face-grin-tears,.fa-grin-tears{--fa:"\f588"}.fa-phone{--fa:"\f095"}.fa-calendar-times,.fa-calendar-xmark{--fa:"\f273"}.fa-child-reaching{--fa:"\e59d"}.fa-head-side-virus{--fa:"\e064"}.fa-user-cog,.fa-user-gear{--fa:"\f4fe"}.fa-arrow-up-1-9,.fa-sort-numeric-up{--fa:"\f163"}.fa-door-closed{--fa:"\f52a"}.fa-shield-virus{--fa:"\e06c"}.fa-dice-six{--fa:"\f526"}.fa-mosquito-net{--fa:"\e52c"}.fa-file-fragment{--fa:"\e697"}.fa-bridge-water{--fa:"\e4ce"}.fa-person-booth{--fa:"\f756"}.fa-text-width{--fa:"\f035"}.fa-hat-wizard{--fa:"\f6e8"}.fa-pen-fancy{--fa:"\f5ac"}.fa-digging,.fa-person-digging{--fa:"\f85e"}.fa-trash{--fa:"\f1f8"}.fa-gauge-simple,.fa-gauge-simple-med,.fa-tachometer-average{--fa:"\f629"}.fa-book-medical{--fa:"\f7e6"}.fa-poo{--fa:"\f2fe"}.fa-quote-right,.fa-quote-right-alt{--fa:"\f10e"}.fa-shirt,.fa-t-shirt,.fa-tshirt{--fa:"\f553"}.fa-cubes{--fa:"\f1b3"}.fa-divide{--fa:"\f529"}.fa-tenge,.fa-tenge-sign{--fa:"\f7d7"}.fa-headphones{--fa:"\f025"}.fa-hands-holding{--fa:"\f4c2"}.fa-hands-clapping{--fa:"\e1a8"}.fa-republican{--fa:"\f75e"}.fa-arrow-left{--fa:"\f060"}.fa-person-circle-xmark{--fa:"\e543"}.fa-ruler{--fa:"\f545"}.fa-align-left{--fa:"\f036"}.fa-dice-d6{--fa:"\f6d1"}.fa-restroom{--fa:"\f7bd"}.fa-j{--fa:"\4a"}.fa-users-viewfinder{--fa:"\e595"}.fa-file-video{--fa:"\f1c8"}.fa-external-link-alt,.fa-up-right-from-square{--fa:"\f35d"}.fa-table-cells,.fa-th{--fa:"\f00a"}.fa-file-pdf{--fa:"\f1c1"}.fa-bible,.fa-book-bible{--fa:"\f647"}.fa-o{--fa:"\4f"}.fa-medkit,.fa-suitcase-medical{--fa:"\f0fa"}.fa-user-secret{--fa:"\f21b"}.fa-otter{--fa:"\f700"}.fa-female,.fa-person-dress{--fa:"\f182"}.fa-comment-dollar{--fa:"\f651"}.fa-briefcase-clock,.fa-business-time{--fa:"\f64a"}.fa-table-cells-large,.fa-th-large{--fa:"\f009"}.fa-book-tanakh,.fa-tanakh{--fa:"\f827"}.fa-phone-volume,.fa-volume-control-phone{--fa:"\f2a0"}.fa-hat-cowboy-side{--fa:"\f8c1"}.fa-clipboard-user{--fa:"\f7f3"}.fa-child{--fa:"\f1ae"}.fa-lira-sign{--fa:"\f195"}.fa-satellite{--fa:"\f7bf"}.fa-plane-lock{--fa:"\e558"}.fa-tag{--fa:"\f02b"}.fa-comment{--fa:"\f075"}.fa-birthday-cake,.fa-cake,.fa-cake-candles{--fa:"\f1fd"}.fa-envelope{--fa:"\f0e0"}.fa-angle-double-up,.fa-angles-up{--fa:"\f102"}.fa-paperclip{--fa:"\f0c6"}.fa-arrow-right-to-city{--fa:"\e4b3"}.fa-ribbon{--fa:"\f4d6"}.fa-lungs{--fa:"\f604"}.fa-arrow-up-9-1,.fa-sort-numeric-up-alt{--fa:"\f887"}.fa-litecoin-sign{--fa:"\e1d3"}.fa-border-none{--fa:"\f850"}.fa-circle-nodes{--fa:"\e4e2"}.fa-parachute-box{--fa:"\f4cd"}.fa-indent{--fa:"\f03c"}.fa-truck-field-un{--fa:"\e58e"}.fa-hourglass,.fa-hourglass-empty{--fa:"\f254"}.fa-mountain{--fa:"\f6fc"}.fa-user-doctor,.fa-user-md{--fa:"\f0f0"}.fa-circle-info,.fa-info-circle{--fa:"\f05a"}.fa-cloud-meatball{--fa:"\f73b"}.fa-camera,.fa-camera-alt{--fa:"\f030"}.fa-square-virus{--fa:"\e578"}.fa-meteor{--fa:"\f753"}.fa-car-on{--fa:"\e4dd"}.fa-sleigh{--fa:"\f7cc"}.fa-arrow-down-1-9,.fa-sort-numeric-asc,.fa-sort-numeric-down{--fa:"\f162"}.fa-hand-holding-droplet,.fa-hand-holding-water{--fa:"\f4c1"}.fa-water{--fa:"\f773"}.fa-calendar-check{--fa:"\f274"}.fa-braille{--fa:"\f2a1"}.fa-prescription-bottle-alt,.fa-prescription-bottle-medical{--fa:"\f486"}.fa-landmark{--fa:"\f66f"}.fa-truck{--fa:"\f0d1"}.fa-crosshairs{--fa:"\f05b"}.fa-person-cane{--fa:"\e53c"}.fa-tent{--fa:"\e57d"}.fa-vest-patches{--fa:"\e086"}.fa-check-double{--fa:"\f560"}.fa-arrow-down-a-z,.fa-sort-alpha-asc,.fa-sort-alpha-down{--fa:"\f15d"}.fa-money-bill-wheat{--fa:"\e52a"}.fa-cookie{--fa:"\f563"}.fa-arrow-left-rotate,.fa-arrow-rotate-back,.fa-arrow-rotate-backward,.fa-arrow-rotate-left,.fa-undo{--fa:"\f0e2"}.fa-hard-drive,.fa-hdd{--fa:"\f0a0"}.fa-face-grin-squint-tears,.fa-grin-squint-tears{--fa:"\f586"}.fa-dumbbell{--fa:"\f44b"}.fa-list-alt,.fa-rectangle-list{--fa:"\f022"}.fa-tarp-droplet{--fa:"\e57c"}.fa-house-medical-circle-check{--fa:"\e511"}.fa-person-skiing-nordic,.fa-skiing-nordic{--fa:"\f7ca"}.fa-calendar-plus{--fa:"\f271"}.fa-plane-arrival{--fa:"\f5af"}.fa-arrow-alt-circle-left,.fa-circle-left{--fa:"\f359"}.fa-subway,.fa-train-subway{--fa:"\f239"}.fa-chart-gantt{--fa:"\e0e4"}.fa-indian-rupee,.fa-indian-rupee-sign,.fa-inr{--fa:"\e1bc"}.fa-crop-alt,.fa-crop-simple{--fa:"\f565"}.fa-money-bill-1,.fa-money-bill-alt{--fa:"\f3d1"}.fa-left-long,.fa-long-arrow-alt-left{--fa:"\f30a"}.fa-dna{--fa:"\f471"}.fa-virus-slash{--fa:"\e075"}.fa-minus,.fa-subtract{--fa:"\f068"}.fa-chess{--fa:"\f439"}.fa-arrow-left-long,.fa-long-arrow-left{--fa:"\f177"}.fa-plug-circle-check{--fa:"\e55c"}.fa-street-view{--fa:"\f21d"}.fa-franc-sign{--fa:"\e18f"}.fa-volume-off{--fa:"\f026"}.fa-american-sign-language-interpreting,.fa-asl-interpreting,.fa-hands-american-sign-language-interpreting,.fa-hands-asl-interpreting{--fa:"\f2a3"}.fa-cog,.fa-gear{--fa:"\f013"}.fa-droplet-slash,.fa-tint-slash{--fa:"\f5c7"}.fa-mosque{--fa:"\f678"}.fa-mosquito{--fa:"\e52b"}.fa-star-of-david{--fa:"\f69a"}.fa-person-military-rifle{--fa:"\e54b"}.fa-cart-shopping,.fa-shopping-cart{--fa:"\f07a"}.fa-vials{--fa:"\f493"}.fa-plug-circle-plus{--fa:"\e55f"}.fa-place-of-worship{--fa:"\f67f"}.fa-grip-vertical{--fa:"\f58e"}.fa-hexagon-nodes{--fa:"\e699"}.fa-arrow-turn-up,.fa-level-up{--fa:"\f148"}.fa-u{--fa:"\55"}.fa-square-root-alt,.fa-square-root-variable{--fa:"\f698"}.fa-clock,.fa-clock-four{--fa:"\f017"}.fa-backward-step,.fa-step-backward{--fa:"\f048"}.fa-pallet{--fa:"\f482"}.fa-faucet{--fa:"\e005"}.fa-baseball-bat-ball{--fa:"\f432"}.fa-s{--fa:"\53"}.fa-timeline{--fa:"\e29c"}.fa-keyboard{--fa:"\f11c"}.fa-caret-down{--fa:"\f0d7"}.fa-clinic-medical,.fa-house-chimney-medical{--fa:"\f7f2"}.fa-temperature-3,.fa-temperature-three-quarters,.fa-thermometer-3,.fa-thermometer-three-quarters{--fa:"\f2c8"}.fa-mobile-android-alt,.fa-mobile-screen{--fa:"\f3cf"}.fa-plane-up{--fa:"\e22d"}.fa-piggy-bank{--fa:"\f4d3"}.fa-battery-3,.fa-battery-half{--fa:"\f242"}.fa-mountain-city{--fa:"\e52e"}.fa-coins{--fa:"\f51e"}.fa-khanda{--fa:"\f66d"}.fa-sliders,.fa-sliders-h{--fa:"\f1de"}.fa-folder-tree{--fa:"\f802"}.fa-network-wired{--fa:"\f6ff"}.fa-map-pin{--fa:"\f276"}.fa-hamsa{--fa:"\f665"}.fa-cent-sign{--fa:"\e3f5"}.fa-flask{--fa:"\f0c3"}.fa-person-pregnant{--fa:"\e31e"}.fa-wand-sparkles{--fa:"\f72b"}.fa-ellipsis-v,.fa-ellipsis-vertical{--fa:"\f142"}.fa-ticket{--fa:"\f145"}.fa-power-off{--fa:"\f011"}.fa-long-arrow-alt-right,.fa-right-long{--fa:"\f30b"}.fa-flag-usa{--fa:"\f74d"}.fa-laptop-file{--fa:"\e51d"}.fa-teletype,.fa-tty{--fa:"\f1e4"}.fa-diagram-next{--fa:"\e476"}.fa-person-rifle{--fa:"\e54e"}.fa-house-medical-circle-exclamation{--fa:"\e512"}.fa-closed-captioning{--fa:"\f20a"}.fa-hiking,.fa-person-hiking{--fa:"\f6ec"}.fa-venus-double{--fa:"\f226"}.fa-images{--fa:"\f302"}.fa-calculator{--fa:"\f1ec"}.fa-people-pulling{--fa:"\e535"}.fa-n{--fa:"\4e"}.fa-cable-car,.fa-tram{--fa:"\f7da"}.fa-cloud-rain{--fa:"\f73d"}.fa-building-circle-xmark{--fa:"\e4d4"}.fa-ship{--fa:"\f21a"}.fa-arrows-down-to-line{--fa:"\e4b8"}.fa-download{--fa:"\f019"}.fa-face-grin,.fa-grin{--fa:"\f580"}.fa-backspace,.fa-delete-left{--fa:"\f55a"}.fa-eye-dropper,.fa-eye-dropper-empty,.fa-eyedropper{--fa:"\f1fb"}.fa-file-circle-check{--fa:"\e5a0"}.fa-forward{--fa:"\f04e"}.fa-mobile,.fa-mobile-android,.fa-mobile-phone{--fa:"\f3ce"}.fa-face-meh,.fa-meh{--fa:"\f11a"}.fa-align-center{--fa:"\f037"}.fa-book-dead,.fa-book-skull{--fa:"\f6b7"}.fa-drivers-license,.fa-id-card{--fa:"\f2c2"}.fa-dedent,.fa-outdent{--fa:"\f03b"}.fa-heart-circle-exclamation{--fa:"\e4fe"}.fa-home,.fa-home-alt,.fa-home-lg-alt,.fa-house{--fa:"\f015"}.fa-calendar-week{--fa:"\f784"}.fa-laptop-medical{--fa:"\f812"}.fa-b{--fa:"\42"}.fa-file-medical{--fa:"\f477"}.fa-dice-one{--fa:"\f525"}.fa-kiwi-bird{--fa:"\f535"}.fa-arrow-right-arrow-left,.fa-exchange{--fa:"\f0ec"}.fa-redo-alt,.fa-rotate-forward,.fa-rotate-right{--fa:"\f2f9"}.fa-cutlery,.fa-utensils{--fa:"\f2e7"}.fa-arrow-up-wide-short,.fa-sort-amount-up{--fa:"\f161"}.fa-mill-sign{--fa:"\e1ed"}.fa-bowl-rice{--fa:"\e2eb"}.fa-skull{--fa:"\f54c"}.fa-broadcast-tower,.fa-tower-broadcast{--fa:"\f519"}.fa-truck-pickup{--fa:"\f63c"}.fa-long-arrow-alt-up,.fa-up-long{--fa:"\f30c"}.fa-stop{--fa:"\f04d"}.fa-code-merge{--fa:"\f387"}.fa-upload{--fa:"\f093"}.fa-hurricane{--fa:"\f751"}.fa-mound{--fa:"\e52d"}.fa-toilet-portable{--fa:"\e583"}.fa-compact-disc{--fa:"\f51f"}.fa-file-arrow-down,.fa-file-download{--fa:"\f56d"}.fa-caravan{--fa:"\f8ff"}.fa-shield-cat{--fa:"\e572"}.fa-bolt,.fa-zap{--fa:"\f0e7"}.fa-glass-water{--fa:"\e4f4"}.fa-oil-well{--fa:"\e532"}.fa-vault{--fa:"\e2c5"}.fa-mars{--fa:"\f222"}.fa-toilet{--fa:"\f7d8"}.fa-plane-circle-xmark{--fa:"\e557"}.fa-cny,.fa-jpy,.fa-rmb,.fa-yen,.fa-yen-sign{--fa:"\f157"}.fa-rouble,.fa-rub,.fa-ruble,.fa-ruble-sign{--fa:"\f158"}.fa-sun{--fa:"\f185"}.fa-guitar{--fa:"\f7a6"}.fa-face-laugh-wink,.fa-laugh-wink{--fa:"\f59c"}.fa-horse-head{--fa:"\f7ab"}.fa-bore-hole{--fa:"\e4c3"}.fa-industry{--fa:"\f275"}.fa-arrow-alt-circle-down,.fa-circle-down{--fa:"\f358"}.fa-arrows-turn-to-dots{--fa:"\e4c1"}.fa-florin-sign{--fa:"\e184"}.fa-arrow-down-short-wide,.fa-sort-amount-desc,.fa-sort-amount-down-alt{--fa:"\f884"}.fa-less-than{--fa:"\3c"}.fa-angle-down{--fa:"\f107"}.fa-car-tunnel{--fa:"\e4de"}.fa-head-side-cough{--fa:"\e061"}.fa-grip-lines{--fa:"\f7a4"}.fa-thumbs-down{--fa:"\f165"}.fa-user-lock{--fa:"\f502"}.fa-arrow-right-long,.fa-long-arrow-right{--fa:"\f178"}.fa-anchor-circle-xmark{--fa:"\e4ac"}.fa-ellipsis,.fa-ellipsis-h{--fa:"\f141"}.fa-chess-pawn{--fa:"\f443"}.fa-first-aid,.fa-kit-medical{--fa:"\f479"}.fa-person-through-window{--fa:"\e5a9"}.fa-toolbox{--fa:"\f552"}.fa-hands-holding-circle{--fa:"\e4fb"}.fa-bug{--fa:"\f188"}.fa-credit-card,.fa-credit-card-alt{--fa:"\f09d"}.fa-automobile,.fa-car{--fa:"\f1b9"}.fa-hand-holding-hand{--fa:"\e4f7"}.fa-book-open-reader,.fa-book-reader{--fa:"\f5da"}.fa-mountain-sun{--fa:"\e52f"}.fa-arrows-left-right-to-line{--fa:"\e4ba"}.fa-dice-d20{--fa:"\f6cf"}.fa-truck-droplet{--fa:"\e58c"}.fa-file-circle-xmark{--fa:"\e5a1"}.fa-temperature-arrow-up,.fa-temperature-up{--fa:"\e040"}.fa-medal{--fa:"\f5a2"}.fa-bed{--fa:"\f236"}.fa-h-square,.fa-square-h{--fa:"\f0fd"}.fa-podcast{--fa:"\f2ce"}.fa-temperature-4,.fa-temperature-full,.fa-thermometer-4,.fa-thermometer-full{--fa:"\f2c7"}.fa-bell{--fa:"\f0f3"}.fa-superscript{--fa:"\f12b"}.fa-plug-circle-xmark{--fa:"\e560"}.fa-star-of-life{--fa:"\f621"}.fa-phone-slash{--fa:"\f3dd"}.fa-paint-roller{--fa:"\f5aa"}.fa-hands-helping,.fa-handshake-angle{--fa:"\f4c4"}.fa-location-dot,.fa-map-marker-alt{--fa:"\f3c5"}.fa-file{--fa:"\f15b"}.fa-greater-than{--fa:"\3e"}.fa-person-swimming,.fa-swimmer{--fa:"\f5c4"}.fa-arrow-down{--fa:"\f063"}.fa-droplet,.fa-tint{--fa:"\f043"}.fa-eraser{--fa:"\f12d"}.fa-earth,.fa-earth-america,.fa-earth-americas,.fa-globe-americas{--fa:"\f57d"}.fa-person-burst{--fa:"\e53b"}.fa-dove{--fa:"\f4ba"}.fa-battery-0,.fa-battery-empty{--fa:"\f244"}.fa-socks{--fa:"\f696"}.fa-inbox{--fa:"\f01c"}.fa-section{--fa:"\e447"}.fa-gauge-high,.fa-tachometer-alt,.fa-tachometer-alt-fast{--fa:"\f625"}.fa-envelope-open-text{--fa:"\f658"}.fa-hospital,.fa-hospital-alt,.fa-hospital-wide{--fa:"\f0f8"}.fa-wine-bottle{--fa:"\f72f"}.fa-chess-rook{--fa:"\f447"}.fa-bars-staggered,.fa-reorder,.fa-stream{--fa:"\f550"}.fa-dharmachakra{--fa:"\f655"}.fa-hotdog{--fa:"\f80f"}.fa-blind,.fa-person-walking-with-cane{--fa:"\f29d"}.fa-drum{--fa:"\f569"}.fa-ice-cream{--fa:"\f810"}.fa-heart-circle-bolt{--fa:"\e4fc"}.fa-fax{--fa:"\f1ac"}.fa-paragraph{--fa:"\f1dd"}.fa-check-to-slot,.fa-vote-yea{--fa:"\f772"}.fa-star-half{--fa:"\f089"}.fa-boxes,.fa-boxes-alt,.fa-boxes-stacked{--fa:"\f468"}.fa-chain,.fa-link{--fa:"\f0c1"}.fa-assistive-listening-systems,.fa-ear-listen{--fa:"\f2a2"}.fa-tree-city{--fa:"\e587"}.fa-play{--fa:"\f04b"}.fa-font{--fa:"\f031"}.fa-table-cells-row-lock{--fa:"\e67a"}.fa-rupiah-sign{--fa:"\e23d"}.fa-magnifying-glass,.fa-search{--fa:"\f002"}.fa-ping-pong-paddle-ball,.fa-table-tennis,.fa-table-tennis-paddle-ball{--fa:"\f45d"}.fa-diagnoses,.fa-person-dots-from-line{--fa:"\f470"}.fa-trash-can-arrow-up,.fa-trash-restore-alt{--fa:"\f82a"}.fa-naira-sign{--fa:"\e1f6"}.fa-cart-arrow-down{--fa:"\f218"}.fa-walkie-talkie{--fa:"\f8ef"}.fa-file-edit,.fa-file-pen{--fa:"\f31c"}.fa-receipt{--fa:"\f543"}.fa-pen-square,.fa-pencil-square,.fa-square-pen{--fa:"\f14b"}.fa-suitcase-rolling{--fa:"\f5c1"}.fa-person-circle-exclamation{--fa:"\e53f"}.fa-chevron-down{--fa:"\f078"}.fa-battery,.fa-battery-5,.fa-battery-full{--fa:"\f240"}.fa-skull-crossbones{--fa:"\f714"}.fa-code-compare{--fa:"\e13a"}.fa-list-dots,.fa-list-ul{--fa:"\f0ca"}.fa-school-lock{--fa:"\e56f"}.fa-tower-cell{--fa:"\e585"}.fa-down-long,.fa-long-arrow-alt-down{--fa:"\f309"}.fa-ranking-star{--fa:"\e561"}.fa-chess-king{--fa:"\f43f"}.fa-person-harassing{--fa:"\e549"}.fa-brazilian-real-sign{--fa:"\e46c"}.fa-landmark-alt,.fa-landmark-dome{--fa:"\f752"}.fa-arrow-up{--fa:"\f062"}.fa-television,.fa-tv,.fa-tv-alt{--fa:"\f26c"}.fa-shrimp{--fa:"\e448"}.fa-list-check,.fa-tasks{--fa:"\f0ae"}.fa-jug-detergent{--fa:"\e519"}.fa-circle-user,.fa-user-circle{--fa:"\f2bd"}.fa-user-shield{--fa:"\f505"}.fa-wind{--fa:"\f72e"}.fa-car-burst,.fa-car-crash{--fa:"\f5e1"}.fa-y{--fa:"\59"}.fa-person-snowboarding,.fa-snowboarding{--fa:"\f7ce"}.fa-shipping-fast,.fa-truck-fast{--fa:"\f48b"}.fa-fish{--fa:"\f578"}.fa-user-graduate{--fa:"\f501"}.fa-adjust,.fa-circle-half-stroke{--fa:"\f042"}.fa-clapperboard{--fa:"\e131"}.fa-circle-radiation,.fa-radiation-alt{--fa:"\f7ba"}.fa-baseball,.fa-baseball-ball{--fa:"\f433"}.fa-jet-fighter-up{--fa:"\e518"}.fa-diagram-project,.fa-project-diagram{--fa:"\f542"}.fa-copy{--fa:"\f0c5"}.fa-volume-mute,.fa-volume-times,.fa-volume-xmark{--fa:"\f6a9"}.fa-hand-sparkles{--fa:"\e05d"}.fa-grip,.fa-grip-horizontal{--fa:"\f58d"}.fa-share-from-square,.fa-share-square{--fa:"\f14d"}.fa-child-combatant,.fa-child-rifle{--fa:"\e4e0"}.fa-gun{--fa:"\e19b"}.fa-phone-square,.fa-square-phone{--fa:"\f098"}.fa-add,.fa-plus{--fa:"\2b"}.fa-expand{--fa:"\f065"}.fa-computer{--fa:"\e4e5"}.fa-close,.fa-multiply,.fa-remove,.fa-times,.fa-xmark{--fa:"\f00d"}.fa-arrows,.fa-arrows-up-down-left-right{--fa:"\f047"}.fa-chalkboard-teacher,.fa-chalkboard-user{--fa:"\f51c"}.fa-peso-sign{--fa:"\e222"}.fa-building-shield{--fa:"\e4d8"}.fa-baby{--fa:"\f77c"}.fa-users-line{--fa:"\e592"}.fa-quote-left,.fa-quote-left-alt{--fa:"\f10d"}.fa-tractor{--fa:"\f722"}.fa-trash-arrow-up,.fa-trash-restore{--fa:"\f829"}.fa-arrow-down-up-lock{--fa:"\e4b0"}.fa-lines-leaning{--fa:"\e51e"}.fa-ruler-combined{--fa:"\f546"}.fa-copyright{--fa:"\f1f9"}.fa-equals{--fa:"\3d"}.fa-blender{--fa:"\f517"}.fa-teeth{--fa:"\f62e"}.fa-ils,.fa-shekel,.fa-shekel-sign,.fa-sheqel,.fa-sheqel-sign{--fa:"\f20b"}.fa-map{--fa:"\f279"}.fa-rocket{--fa:"\f135"}.fa-photo-film,.fa-photo-video{--fa:"\f87c"}.fa-folder-minus{--fa:"\f65d"}.fa-hexagon-nodes-bolt{--fa:"\e69a"}.fa-store{--fa:"\f54e"}.fa-arrow-trend-up{--fa:"\e098"}.fa-plug-circle-minus{--fa:"\e55e"}.fa-sign,.fa-sign-hanging{--fa:"\f4d9"}.fa-bezier-curve{--fa:"\f55b"}.fa-bell-slash{--fa:"\f1f6"}.fa-tablet,.fa-tablet-android{--fa:"\f3fb"}.fa-school-flag{--fa:"\e56e"}.fa-fill{--fa:"\f575"}.fa-angle-up{--fa:"\f106"}.fa-drumstick-bite{--fa:"\f6d7"}.fa-holly-berry{--fa:"\f7aa"}.fa-chevron-left{--fa:"\f053"}.fa-bacteria{--fa:"\e059"}.fa-hand-lizard{--fa:"\f258"}.fa-notdef{--fa:"\e1fe"}.fa-disease{--fa:"\f7fa"}.fa-briefcase-medical{--fa:"\f469"}.fa-genderless{--fa:"\f22d"}.fa-chevron-right{--fa:"\f054"}.fa-retweet{--fa:"\f079"}.fa-car-alt,.fa-car-rear{--fa:"\f5de"}.fa-pump-soap{--fa:"\e06b"}.fa-video-slash{--fa:"\f4e2"}.fa-battery-2,.fa-battery-quarter{--fa:"\f243"}.fa-radio{--fa:"\f8d7"}.fa-baby-carriage,.fa-carriage-baby{--fa:"\f77d"}.fa-traffic-light{--fa:"\f637"}.fa-thermometer{--fa:"\f491"}.fa-vr-cardboard{--fa:"\f729"}.fa-hand-middle-finger{--fa:"\f806"}.fa-percent,.fa-percentage{--fa:"\25"}.fa-truck-moving{--fa:"\f4df"}.fa-glass-water-droplet{--fa:"\e4f5"}.fa-display{--fa:"\e163"}.fa-face-smile,.fa-smile{--fa:"\f118"}.fa-thumb-tack,.fa-thumbtack{--fa:"\f08d"}.fa-trophy{--fa:"\f091"}.fa-person-praying,.fa-pray{--fa:"\f683"}.fa-hammer{--fa:"\f6e3"}.fa-hand-peace{--fa:"\f25b"}.fa-rotate,.fa-sync-alt{--fa:"\f2f1"}.fa-spinner{--fa:"\f110"}.fa-robot{--fa:"\f544"}.fa-peace{--fa:"\f67c"}.fa-cogs,.fa-gears{--fa:"\f085"}.fa-warehouse{--fa:"\f494"}.fa-arrow-up-right-dots{--fa:"\e4b7"}.fa-splotch{--fa:"\f5bc"}.fa-face-grin-hearts,.fa-grin-hearts{--fa:"\f584"}.fa-dice-four{--fa:"\f524"}.fa-sim-card{--fa:"\f7c4"}.fa-transgender,.fa-transgender-alt{--fa:"\f225"}.fa-mercury{--fa:"\f223"}.fa-arrow-turn-down,.fa-level-down{--fa:"\f149"}.fa-person-falling-burst{--fa:"\e547"}.fa-award{--fa:"\f559"}.fa-ticket-alt,.fa-ticket-simple{--fa:"\f3ff"}.fa-building{--fa:"\f1ad"}.fa-angle-double-left,.fa-angles-left{--fa:"\f100"}.fa-qrcode{--fa:"\f029"}.fa-clock-rotate-left,.fa-history{--fa:"\f1da"}.fa-face-grin-beam-sweat,.fa-grin-beam-sweat{--fa:"\f583"}.fa-arrow-right-from-file,.fa-file-export{--fa:"\f56e"}.fa-shield,.fa-shield-blank{--fa:"\f132"}.fa-arrow-up-short-wide,.fa-sort-amount-up-alt{--fa:"\f885"}.fa-comment-nodes{--fa:"\e696"}.fa-house-medical{--fa:"\e3b2"}.fa-golf-ball,.fa-golf-ball-tee{--fa:"\f450"}.fa-chevron-circle-left,.fa-circle-chevron-left{--fa:"\f137"}.fa-house-chimney-window{--fa:"\e00d"}.fa-pen-nib{--fa:"\f5ad"}.fa-tent-arrow-turn-left{--fa:"\e580"}.fa-tents{--fa:"\e582"}.fa-magic,.fa-wand-magic{--fa:"\f0d0"}.fa-dog{--fa:"\f6d3"}.fa-carrot{--fa:"\f787"}.fa-moon{--fa:"\f186"}.fa-wine-glass-alt,.fa-wine-glass-empty{--fa:"\f5ce"}.fa-cheese{--fa:"\f7ef"}.fa-yin-yang{--fa:"\f6ad"}.fa-music{--fa:"\f001"}.fa-code-commit{--fa:"\f386"}.fa-temperature-low{--fa:"\f76b"}.fa-biking,.fa-person-biking{--fa:"\f84a"}.fa-broom{--fa:"\f51a"}.fa-shield-heart{--fa:"\e574"}.fa-gopuram{--fa:"\f664"}.fa-earth-oceania,.fa-globe-oceania{--fa:"\e47b"}.fa-square-xmark,.fa-times-square,.fa-xmark-square{--fa:"\f2d3"}.fa-hashtag{--fa:"\23"}.fa-expand-alt,.fa-up-right-and-down-left-from-center{--fa:"\f424"}.fa-oil-can{--fa:"\f613"}.fa-t{--fa:"\54"}.fa-hippo{--fa:"\f6ed"}.fa-chart-column{--fa:"\e0e3"}.fa-infinity{--fa:"\f534"}.fa-vial-circle-check{--fa:"\e596"}.fa-person-arrow-down-to-line{--fa:"\e538"}.fa-voicemail{--fa:"\f897"}.fa-fan{--fa:"\f863"}.fa-person-walking-luggage{--fa:"\e554"}.fa-arrows-alt-v,.fa-up-down{--fa:"\f338"}.fa-cloud-moon-rain{--fa:"\f73c"}.fa-calendar{--fa:"\f133"}.fa-trailer{--fa:"\e041"}.fa-bahai,.fa-haykal{--fa:"\f666"}.fa-sd-card{--fa:"\f7c2"}.fa-dragon{--fa:"\f6d5"}.fa-shoe-prints{--fa:"\f54b"}.fa-circle-plus,.fa-plus-circle{--fa:"\f055"}.fa-face-grin-tongue-wink,.fa-grin-tongue-wink{--fa:"\f58b"}.fa-hand-holding{--fa:"\f4bd"}.fa-plug-circle-exclamation{--fa:"\e55d"}.fa-chain-broken,.fa-chain-slash,.fa-link-slash,.fa-unlink{--fa:"\f127"}.fa-clone{--fa:"\f24d"}.fa-person-walking-arrow-loop-left{--fa:"\e551"}.fa-arrow-up-z-a,.fa-sort-alpha-up-alt{--fa:"\f882"}.fa-fire-alt,.fa-fire-flame-curved{--fa:"\f7e4"}.fa-tornado{--fa:"\f76f"}.fa-file-circle-plus{--fa:"\e494"}.fa-book-quran,.fa-quran{--fa:"\f687"}.fa-anchor{--fa:"\f13d"}.fa-border-all{--fa:"\f84c"}.fa-angry,.fa-face-angry{--fa:"\f556"}.fa-cookie-bite{--fa:"\f564"}.fa-arrow-trend-down{--fa:"\e097"}.fa-feed,.fa-rss{--fa:"\f09e"}.fa-draw-polygon{--fa:"\f5ee"}.fa-balance-scale,.fa-scale-balanced{--fa:"\f24e"}.fa-gauge-simple-high,.fa-tachometer,.fa-tachometer-fast{--fa:"\f62a"}.fa-shower{--fa:"\f2cc"}.fa-desktop,.fa-desktop-alt{--fa:"\f390"}.fa-m{--fa:"\4d"}.fa-table-list,.fa-th-list{--fa:"\f00b"}.fa-comment-sms,.fa-sms{--fa:"\f7cd"}.fa-book{--fa:"\f02d"}.fa-user-plus{--fa:"\f234"}.fa-check{--fa:"\f00c"}.fa-battery-4,.fa-battery-three-quarters{--fa:"\f241"}.fa-house-circle-check{--fa:"\e509"}.fa-angle-left{--fa:"\f104"}.fa-diagram-successor{--fa:"\e47a"}.fa-truck-arrow-right{--fa:"\e58b"}.fa-arrows-split-up-and-left{--fa:"\e4bc"}.fa-fist-raised,.fa-hand-fist{--fa:"\f6de"}.fa-cloud-moon{--fa:"\f6c3"}.fa-briefcase{--fa:"\f0b1"}.fa-person-falling{--fa:"\e546"}.fa-image-portrait,.fa-portrait{--fa:"\f3e0"}.fa-user-tag{--fa:"\f507"}.fa-rug{--fa:"\e569"}.fa-earth-europe,.fa-globe-europe{--fa:"\f7a2"}.fa-cart-flatbed-suitcase,.fa-luggage-cart{--fa:"\f59d"}.fa-rectangle-times,.fa-rectangle-xmark,.fa-times-rectangle,.fa-window-close{--fa:"\f410"}.fa-baht-sign{--fa:"\e0ac"}.fa-book-open{--fa:"\f518"}.fa-book-journal-whills,.fa-journal-whills{--fa:"\f66a"}.fa-handcuffs{--fa:"\e4f8"}.fa-exclamation-triangle,.fa-triangle-exclamation,.fa-warning{--fa:"\f071"}.fa-database{--fa:"\f1c0"}.fa-mail-forward,.fa-share{--fa:"\f064"}.fa-bottle-droplet{--fa:"\e4c4"}.fa-mask-face{--fa:"\e1d7"}.fa-hill-rockslide{--fa:"\e508"}.fa-exchange-alt,.fa-right-left{--fa:"\f362"}.fa-paper-plane{--fa:"\f1d8"}.fa-road-circle-exclamation{--fa:"\e565"}.fa-dungeon{--fa:"\f6d9"}.fa-align-right{--fa:"\f038"}.fa-money-bill-1-wave,.fa-money-bill-wave-alt{--fa:"\f53b"}.fa-life-ring{--fa:"\f1cd"}.fa-hands,.fa-sign-language,.fa-signing{--fa:"\f2a7"}.fa-calendar-day{--fa:"\f783"}.fa-ladder-water,.fa-swimming-pool,.fa-water-ladder{--fa:"\f5c5"}.fa-arrows-up-down,.fa-arrows-v{--fa:"\f07d"}.fa-face-grimace,.fa-grimace{--fa:"\f57f"}.fa-wheelchair-alt,.fa-wheelchair-move{--fa:"\e2ce"}.fa-level-down-alt,.fa-turn-down{--fa:"\f3be"}.fa-person-walking-arrow-right{--fa:"\e552"}.fa-envelope-square,.fa-square-envelope{--fa:"\f199"}.fa-dice{--fa:"\f522"}.fa-bowling-ball{--fa:"\f436"}.fa-brain{--fa:"\f5dc"}.fa-band-aid,.fa-bandage{--fa:"\f462"}.fa-calendar-minus{--fa:"\f272"}.fa-circle-xmark,.fa-times-circle,.fa-xmark-circle{--fa:"\f057"}.fa-gifts{--fa:"\f79c"}.fa-hotel{--fa:"\f594"}.fa-earth-asia,.fa-globe-asia{--fa:"\f57e"}.fa-id-card-alt,.fa-id-card-clip{--fa:"\f47f"}.fa-magnifying-glass-plus,.fa-search-plus{--fa:"\f00e"}.fa-thumbs-up{--fa:"\f164"}.fa-user-clock{--fa:"\f4fd"}.fa-allergies,.fa-hand-dots{--fa:"\f461"}.fa-file-invoice{--fa:"\f570"}.fa-window-minimize{--fa:"\f2d1"}.fa-coffee,.fa-mug-saucer{--fa:"\f0f4"}.fa-brush{--fa:"\f55d"}.fa-file-half-dashed{--fa:"\e698"}.fa-mask{--fa:"\f6fa"}.fa-magnifying-glass-minus,.fa-search-minus{--fa:"\f010"}.fa-ruler-vertical{--fa:"\f548"}.fa-user-alt,.fa-user-large{--fa:"\f406"}.fa-train-tram{--fa:"\e5b4"}.fa-user-nurse{--fa:"\f82f"}.fa-syringe{--fa:"\f48e"}.fa-cloud-sun{--fa:"\f6c4"}.fa-stopwatch-20{--fa:"\e06f"}.fa-square-full{--fa:"\f45c"}.fa-magnet{--fa:"\f076"}.fa-jar{--fa:"\e516"}.fa-note-sticky,.fa-sticky-note{--fa:"\f249"}.fa-bug-slash{--fa:"\e490"}.fa-arrow-up-from-water-pump{--fa:"\e4b6"}.fa-bone{--fa:"\f5d7"}.fa-table-cells-row-unlock{--fa:"\e691"}.fa-user-injured{--fa:"\f728"}.fa-face-sad-tear,.fa-sad-tear{--fa:"\f5b4"}.fa-plane{--fa:"\f072"}.fa-tent-arrows-down{--fa:"\e581"}.fa-exclamation{--fa:"\21"}.fa-arrows-spin{--fa:"\e4bb"}.fa-print{--fa:"\f02f"}.fa-try,.fa-turkish-lira,.fa-turkish-lira-sign{--fa:"\e2bb"}.fa-dollar,.fa-dollar-sign,.fa-usd{--fa:"\24"}.fa-x{--fa:"\58"}.fa-magnifying-glass-dollar,.fa-search-dollar{--fa:"\f688"}.fa-users-cog,.fa-users-gear{--fa:"\f509"}.fa-person-military-pointing{--fa:"\e54a"}.fa-bank,.fa-building-columns,.fa-institution,.fa-museum,.fa-university{--fa:"\f19c"}.fa-umbrella{--fa:"\f0e9"}.fa-trowel{--fa:"\e589"}.fa-d{--fa:"\44"}.fa-stapler{--fa:"\e5af"}.fa-masks-theater,.fa-theater-masks{--fa:"\f630"}.fa-kip-sign{--fa:"\e1c4"}.fa-hand-point-left{--fa:"\f0a5"}.fa-handshake-alt,.fa-handshake-simple{--fa:"\f4c6"}.fa-fighter-jet,.fa-jet-fighter{--fa:"\f0fb"}.fa-share-alt-square,.fa-square-share-nodes{--fa:"\f1e1"}.fa-barcode{--fa:"\f02a"}.fa-plus-minus{--fa:"\e43c"}.fa-video,.fa-video-camera{--fa:"\f03d"}.fa-graduation-cap,.fa-mortar-board{--fa:"\f19d"}.fa-hand-holding-medical{--fa:"\e05c"}.fa-person-circle-check{--fa:"\e53e"}.fa-level-up-alt,.fa-turn-up{--fa:"\f3bf"}
.fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host,:root{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(/app/assets/fa-brands-400-D_cYUPeE.woff2) format("woff2"),url(/app/assets/fa-brands-400-D1LuMI3I.ttf) format("truetype")}.fa-brands,.fab{font-weight:400}.fa-monero{--fa:"\f3d0"}.fa-hooli{--fa:"\f427"}.fa-yelp{--fa:"\f1e9"}.fa-cc-visa{--fa:"\f1f0"}.fa-lastfm{--fa:"\f202"}.fa-shopware{--fa:"\f5b5"}.fa-creative-commons-nc{--fa:"\f4e8"}.fa-aws{--fa:"\f375"}.fa-redhat{--fa:"\f7bc"}.fa-yoast{--fa:"\f2b1"}.fa-cloudflare{--fa:"\e07d"}.fa-ups{--fa:"\f7e0"}.fa-pixiv{--fa:"\e640"}.fa-wpexplorer{--fa:"\f2de"}.fa-dyalog{--fa:"\f399"}.fa-bity{--fa:"\f37a"}.fa-stackpath{--fa:"\f842"}.fa-buysellads{--fa:"\f20d"}.fa-first-order{--fa:"\f2b0"}.fa-modx{--fa:"\f285"}.fa-guilded{--fa:"\e07e"}.fa-vnv{--fa:"\f40b"}.fa-js-square,.fa-square-js{--fa:"\f3b9"}.fa-microsoft{--fa:"\f3ca"}.fa-qq{--fa:"\f1d6"}.fa-orcid{--fa:"\f8d2"}.fa-java{--fa:"\f4e4"}.fa-invision{--fa:"\f7b0"}.fa-creative-commons-pd-alt{--fa:"\f4ed"}.fa-centercode{--fa:"\f380"}.fa-glide-g{--fa:"\f2a6"}.fa-drupal{--fa:"\f1a9"}.fa-jxl{--fa:"\e67b"}.fa-dart-lang{--fa:"\e693"}.fa-hire-a-helper{--fa:"\f3b0"}.fa-creative-commons-by{--fa:"\f4e7"}.fa-unity{--fa:"\e049"}.fa-whmcs{--fa:"\f40d"}.fa-rocketchat{--fa:"\f3e8"}.fa-vk{--fa:"\f189"}.fa-untappd{--fa:"\f405"}.fa-mailchimp{--fa:"\f59e"}.fa-css3-alt{--fa:"\f38b"}.fa-reddit-square,.fa-square-reddit{--fa:"\f1a2"}.fa-vimeo-v{--fa:"\f27d"}.fa-contao{--fa:"\f26d"}.fa-square-font-awesome{--fa:"\e5ad"}.fa-deskpro{--fa:"\f38f"}.fa-brave{--fa:"\e63c"}.fa-sistrix{--fa:"\f3ee"}.fa-instagram-square,.fa-square-instagram{--fa:"\e055"}.fa-battle-net{--fa:"\f835"}.fa-the-red-yeti{--fa:"\f69d"}.fa-hacker-news-square,.fa-square-hacker-news{--fa:"\f3af"}.fa-edge{--fa:"\f282"}.fa-threads{--fa:"\e618"}.fa-napster{--fa:"\f3d2"}.fa-snapchat-square,.fa-square-snapchat{--fa:"\f2ad"}.fa-google-plus-g{--fa:"\f0d5"}.fa-artstation{--fa:"\f77a"}.fa-markdown{--fa:"\f60f"}.fa-sourcetree{--fa:"\f7d3"}.fa-google-plus{--fa:"\f2b3"}.fa-diaspora{--fa:"\f791"}.fa-foursquare{--fa:"\f180"}.fa-stack-overflow{--fa:"\f16c"}.fa-github-alt{--fa:"\f113"}.fa-phoenix-squadron{--fa:"\f511"}.fa-pagelines{--fa:"\f18c"}.fa-algolia{--fa:"\f36c"}.fa-red-river{--fa:"\f3e3"}.fa-creative-commons-sa{--fa:"\f4ef"}.fa-safari{--fa:"\f267"}.fa-google{--fa:"\f1a0"}.fa-font-awesome-alt,.fa-square-font-awesome-stroke{--fa:"\f35c"}.fa-atlassian{--fa:"\f77b"}.fa-linkedin-in{--fa:"\f0e1"}.fa-digital-ocean{--fa:"\f391"}.fa-nimblr{--fa:"\f5a8"}.fa-chromecast{--fa:"\f838"}.fa-evernote{--fa:"\f839"}.fa-hacker-news{--fa:"\f1d4"}.fa-creative-commons-sampling{--fa:"\f4f0"}.fa-adversal{--fa:"\f36a"}.fa-creative-commons{--fa:"\f25e"}.fa-watchman-monitoring{--fa:"\e087"}.fa-fonticons{--fa:"\f280"}.fa-weixin{--fa:"\f1d7"}.fa-shirtsinbulk{--fa:"\f214"}.fa-codepen{--fa:"\f1cb"}.fa-git-alt{--fa:"\f841"}.fa-lyft{--fa:"\f3c3"}.fa-rev{--fa:"\f5b2"}.fa-windows{--fa:"\f17a"}.fa-wizards-of-the-coast{--fa:"\f730"}.fa-square-viadeo,.fa-viadeo-square{--fa:"\f2aa"}.fa-meetup{--fa:"\f2e0"}.fa-centos{--fa:"\f789"}.fa-adn{--fa:"\f170"}.fa-cloudsmith{--fa:"\f384"}.fa-opensuse{--fa:"\e62b"}.fa-pied-piper-alt{--fa:"\f1a8"}.fa-dribbble-square,.fa-square-dribbble{--fa:"\f397"}.fa-codiepie{--fa:"\f284"}.fa-node{--fa:"\f419"}.fa-mix{--fa:"\f3cb"}.fa-steam{--fa:"\f1b6"}.fa-cc-apple-pay{--fa:"\f416"}.fa-scribd{--fa:"\f28a"}.fa-debian{--fa:"\e60b"}.fa-openid{--fa:"\f19b"}.fa-instalod{--fa:"\e081"}.fa-files-pinwheel{--fa:"\e69f"}.fa-expeditedssl{--fa:"\f23e"}.fa-sellcast{--fa:"\f2da"}.fa-square-twitter,.fa-twitter-square{--fa:"\f081"}.fa-r-project{--fa:"\f4f7"}.fa-delicious{--fa:"\f1a5"}.fa-freebsd{--fa:"\f3a4"}.fa-vuejs{--fa:"\f41f"}.fa-accusoft{--fa:"\f369"}.fa-ioxhost{--fa:"\f208"}.fa-fonticons-fi{--fa:"\f3a2"}.fa-app-store{--fa:"\f36f"}.fa-cc-mastercard{--fa:"\f1f1"}.fa-itunes-note{--fa:"\f3b5"}.fa-golang{--fa:"\e40f"}.fa-kickstarter,.fa-square-kickstarter{--fa:"\f3bb"}.fa-grav{--fa:"\f2d6"}.fa-weibo{--fa:"\f18a"}.fa-uncharted{--fa:"\e084"}.fa-firstdraft{--fa:"\f3a1"}.fa-square-youtube,.fa-youtube-square{--fa:"\f431"}.fa-wikipedia-w{--fa:"\f266"}.fa-rendact,.fa-wpressr{--fa:"\f3e4"}.fa-angellist{--fa:"\f209"}.fa-galactic-republic{--fa:"\f50c"}.fa-nfc-directional{--fa:"\e530"}.fa-skype{--fa:"\f17e"}.fa-joget{--fa:"\f3b7"}.fa-fedora{--fa:"\f798"}.fa-stripe-s{--fa:"\f42a"}.fa-meta{--fa:"\e49b"}.fa-laravel{--fa:"\f3bd"}.fa-hotjar{--fa:"\f3b1"}.fa-bluetooth-b{--fa:"\f294"}.fa-square-letterboxd{--fa:"\e62e"}.fa-sticker-mule{--fa:"\f3f7"}.fa-creative-commons-zero{--fa:"\f4f3"}.fa-hips{--fa:"\f452"}.fa-css{--fa:"\e6a2"}.fa-behance{--fa:"\f1b4"}.fa-reddit{--fa:"\f1a1"}.fa-discord{--fa:"\f392"}.fa-chrome{--fa:"\f268"}.fa-app-store-ios{--fa:"\f370"}.fa-cc-discover{--fa:"\f1f2"}.fa-wpbeginner{--fa:"\f297"}.fa-confluence{--fa:"\f78d"}.fa-shoelace{--fa:"\e60c"}.fa-mdb{--fa:"\f8ca"}.fa-dochub{--fa:"\f394"}.fa-accessible-icon{--fa:"\f368"}.fa-ebay{--fa:"\f4f4"}.fa-amazon{--fa:"\f270"}.fa-unsplash{--fa:"\e07c"}.fa-yarn{--fa:"\f7e3"}.fa-square-steam,.fa-steam-square{--fa:"\f1b7"}.fa-500px{--fa:"\f26e"}.fa-square-vimeo,.fa-vimeo-square{--fa:"\f194"}.fa-asymmetrik{--fa:"\f372"}.fa-font-awesome,.fa-font-awesome-flag,.fa-font-awesome-logo-full{--fa:"\f2b4"}.fa-gratipay{--fa:"\f184"}.fa-apple{--fa:"\f179"}.fa-hive{--fa:"\e07f"}.fa-gitkraken{--fa:"\f3a6"}.fa-keybase{--fa:"\f4f5"}.fa-apple-pay{--fa:"\f415"}.fa-padlet{--fa:"\e4a0"}.fa-amazon-pay{--fa:"\f42c"}.fa-github-square,.fa-square-github{--fa:"\f092"}.fa-stumbleupon{--fa:"\f1a4"}.fa-fedex{--fa:"\f797"}.fa-phoenix-framework{--fa:"\f3dc"}.fa-shopify{--fa:"\e057"}.fa-neos{--fa:"\f612"}.fa-square-threads{--fa:"\e619"}.fa-hackerrank{--fa:"\f5f7"}.fa-researchgate{--fa:"\f4f8"}.fa-swift{--fa:"\f8e1"}.fa-angular{--fa:"\f420"}.fa-speakap{--fa:"\f3f3"}.fa-angrycreative{--fa:"\f36e"}.fa-y-combinator{--fa:"\f23b"}.fa-empire{--fa:"\f1d1"}.fa-envira{--fa:"\f299"}.fa-google-scholar{--fa:"\e63b"}.fa-gitlab-square,.fa-square-gitlab{--fa:"\e5ae"}.fa-studiovinari{--fa:"\f3f8"}.fa-pied-piper{--fa:"\f2ae"}.fa-wordpress{--fa:"\f19a"}.fa-product-hunt{--fa:"\f288"}.fa-firefox{--fa:"\f269"}.fa-linode{--fa:"\f2b8"}.fa-goodreads{--fa:"\f3a8"}.fa-odnoklassniki-square,.fa-square-odnoklassniki{--fa:"\f264"}.fa-jsfiddle{--fa:"\f1cc"}.fa-sith{--fa:"\f512"}.fa-themeisle{--fa:"\f2b2"}.fa-page4{--fa:"\f3d7"}.fa-hashnode{--fa:"\e499"}.fa-react{--fa:"\f41b"}.fa-cc-paypal{--fa:"\f1f4"}.fa-squarespace{--fa:"\f5be"}.fa-cc-stripe{--fa:"\f1f5"}.fa-creative-commons-share{--fa:"\f4f2"}.fa-bitcoin{--fa:"\f379"}.fa-keycdn{--fa:"\f3ba"}.fa-opera{--fa:"\f26a"}.fa-itch-io{--fa:"\f83a"}.fa-umbraco{--fa:"\f8e8"}.fa-galactic-senate{--fa:"\f50d"}.fa-ubuntu{--fa:"\f7df"}.fa-draft2digital{--fa:"\f396"}.fa-stripe{--fa:"\f429"}.fa-houzz{--fa:"\f27c"}.fa-gg{--fa:"\f260"}.fa-dhl{--fa:"\f790"}.fa-pinterest-square,.fa-square-pinterest{--fa:"\f0d3"}.fa-xing{--fa:"\f168"}.fa-blackberry{--fa:"\f37b"}.fa-creative-commons-pd{--fa:"\f4ec"}.fa-playstation{--fa:"\f3df"}.fa-quinscape{--fa:"\f459"}.fa-less{--fa:"\f41d"}.fa-blogger-b{--fa:"\f37d"}.fa-opencart{--fa:"\f23d"}.fa-vine{--fa:"\f1ca"}.fa-signal-messenger{--fa:"\e663"}.fa-paypal{--fa:"\f1ed"}.fa-gitlab{--fa:"\f296"}.fa-typo3{--fa:"\f42b"}.fa-reddit-alien{--fa:"\f281"}.fa-yahoo{--fa:"\f19e"}.fa-dailymotion{--fa:"\e052"}.fa-affiliatetheme{--fa:"\f36b"}.fa-pied-piper-pp{--fa:"\f1a7"}.fa-bootstrap{--fa:"\f836"}.fa-odnoklassniki{--fa:"\f263"}.fa-nfc-symbol{--fa:"\e531"}.fa-mintbit{--fa:"\e62f"}.fa-ethereum{--fa:"\f42e"}.fa-speaker-deck{--fa:"\f83c"}.fa-creative-commons-nc-eu{--fa:"\f4e9"}.fa-patreon{--fa:"\f3d9"}.fa-avianex{--fa:"\f374"}.fa-ello{--fa:"\f5f1"}.fa-gofore{--fa:"\f3a7"}.fa-bimobject{--fa:"\f378"}.fa-brave-reverse{--fa:"\e63d"}.fa-facebook-f{--fa:"\f39e"}.fa-google-plus-square,.fa-square-google-plus{--fa:"\f0d4"}.fa-web-awesome{--fa:"\e682"}.fa-mandalorian{--fa:"\f50f"}.fa-first-order-alt{--fa:"\f50a"}.fa-osi{--fa:"\f41a"}.fa-google-wallet{--fa:"\f1ee"}.fa-d-and-d-beyond{--fa:"\f6ca"}.fa-periscope{--fa:"\f3da"}.fa-fulcrum{--fa:"\f50b"}.fa-cloudscale{--fa:"\f383"}.fa-forumbee{--fa:"\f211"}.fa-mizuni{--fa:"\f3cc"}.fa-schlix{--fa:"\f3ea"}.fa-square-xing,.fa-xing-square{--fa:"\f169"}.fa-bandcamp{--fa:"\f2d5"}.fa-wpforms{--fa:"\f298"}.fa-cloudversify{--fa:"\f385"}.fa-usps{--fa:"\f7e1"}.fa-megaport{--fa:"\f5a3"}.fa-magento{--fa:"\f3c4"}.fa-spotify{--fa:"\f1bc"}.fa-optin-monster{--fa:"\f23c"}.fa-fly{--fa:"\f417"}.fa-square-bluesky{--fa:"\e6a3"}.fa-aviato{--fa:"\f421"}.fa-itunes{--fa:"\f3b4"}.fa-cuttlefish{--fa:"\f38c"}.fa-blogger{--fa:"\f37c"}.fa-flickr{--fa:"\f16e"}.fa-viber{--fa:"\f409"}.fa-soundcloud{--fa:"\f1be"}.fa-digg{--fa:"\f1a6"}.fa-tencent-weibo{--fa:"\f1d5"}.fa-letterboxd{--fa:"\e62d"}.fa-symfony{--fa:"\f83d"}.fa-maxcdn{--fa:"\f136"}.fa-etsy{--fa:"\f2d7"}.fa-facebook-messenger{--fa:"\f39f"}.fa-audible{--fa:"\f373"}.fa-think-peaks{--fa:"\f731"}.fa-bilibili{--fa:"\e3d9"}.fa-erlang{--fa:"\f39d"}.fa-x-twitter{--fa:"\e61b"}.fa-cotton-bureau{--fa:"\f89e"}.fa-dashcube{--fa:"\f210"}.fa-42-group,.fa-innosoft{--fa:"\e080"}.fa-stack-exchange{--fa:"\f18d"}.fa-elementor{--fa:"\f430"}.fa-pied-piper-square,.fa-square-pied-piper{--fa:"\e01e"}.fa-creative-commons-nd{--fa:"\f4eb"}.fa-palfed{--fa:"\f3d8"}.fa-superpowers{--fa:"\f2dd"}.fa-resolving{--fa:"\f3e7"}.fa-xbox{--fa:"\f412"}.fa-square-web-awesome-stroke{--fa:"\e684"}.fa-searchengin{--fa:"\f3eb"}.fa-tiktok{--fa:"\e07b"}.fa-facebook-square,.fa-square-facebook{--fa:"\f082"}.fa-renren{--fa:"\f18b"}.fa-linux{--fa:"\f17c"}.fa-glide{--fa:"\f2a5"}.fa-linkedin{--fa:"\f08c"}.fa-hubspot{--fa:"\f3b2"}.fa-deploydog{--fa:"\f38e"}.fa-twitch{--fa:"\f1e8"}.fa-flutter{--fa:"\e694"}.fa-ravelry{--fa:"\f2d9"}.fa-mixer{--fa:"\e056"}.fa-lastfm-square,.fa-square-lastfm{--fa:"\f203"}.fa-vimeo{--fa:"\f40a"}.fa-mendeley{--fa:"\f7b3"}.fa-uniregistry{--fa:"\f404"}.fa-figma{--fa:"\f799"}.fa-creative-commons-remix{--fa:"\f4ee"}.fa-cc-amazon-pay{--fa:"\f42d"}.fa-dropbox{--fa:"\f16b"}.fa-instagram{--fa:"\f16d"}.fa-cmplid{--fa:"\e360"}.fa-upwork{--fa:"\e641"}.fa-facebook{--fa:"\f09a"}.fa-gripfire{--fa:"\f3ac"}.fa-jedi-order{--fa:"\f50e"}.fa-uikit{--fa:"\f403"}.fa-fort-awesome-alt{--fa:"\f3a3"}.fa-phabricator{--fa:"\f3db"}.fa-ussunnah{--fa:"\f407"}.fa-earlybirds{--fa:"\f39a"}.fa-trade-federation{--fa:"\f513"}.fa-autoprefixer{--fa:"\f41c"}.fa-whatsapp{--fa:"\f232"}.fa-square-upwork{--fa:"\e67c"}.fa-slideshare{--fa:"\f1e7"}.fa-google-play{--fa:"\f3ab"}.fa-viadeo{--fa:"\f2a9"}.fa-line{--fa:"\f3c0"}.fa-google-drive{--fa:"\f3aa"}.fa-servicestack{--fa:"\f3ec"}.fa-simplybuilt{--fa:"\f215"}.fa-bitbucket{--fa:"\f171"}.fa-imdb{--fa:"\f2d8"}.fa-deezer{--fa:"\e077"}.fa-raspberry-pi{--fa:"\f7bb"}.fa-jira{--fa:"\f7b1"}.fa-docker{--fa:"\f395"}.fa-screenpal{--fa:"\e570"}.fa-bluetooth{--fa:"\f293"}.fa-gitter{--fa:"\f426"}.fa-d-and-d{--fa:"\f38d"}.fa-microblog{--fa:"\e01a"}.fa-cc-diners-club{--fa:"\f24c"}.fa-gg-circle{--fa:"\f261"}.fa-pied-piper-hat{--fa:"\f4e5"}.fa-kickstarter-k{--fa:"\f3bc"}.fa-yandex{--fa:"\f413"}.fa-readme{--fa:"\f4d5"}.fa-html5{--fa:"\f13b"}.fa-sellsy{--fa:"\f213"}.fa-square-web-awesome{--fa:"\e683"}.fa-sass{--fa:"\f41e"}.fa-wirsindhandwerk,.fa-wsh{--fa:"\e2d0"}.fa-buromobelexperte{--fa:"\f37f"}.fa-salesforce{--fa:"\f83b"}.fa-octopus-deploy{--fa:"\e082"}.fa-medapps{--fa:"\f3c6"}.fa-ns8{--fa:"\f3d5"}.fa-pinterest-p{--fa:"\f231"}.fa-apper{--fa:"\f371"}.fa-fort-awesome{--fa:"\f286"}.fa-waze{--fa:"\f83f"}.fa-bluesky{--fa:"\e671"}.fa-cc-jcb{--fa:"\f24b"}.fa-snapchat,.fa-snapchat-ghost{--fa:"\f2ab"}.fa-fantasy-flight-games{--fa:"\f6dc"}.fa-rust{--fa:"\e07a"}.fa-wix{--fa:"\f5cf"}.fa-behance-square,.fa-square-behance{--fa:"\f1b5"}.fa-supple{--fa:"\f3f9"}.fa-webflow{--fa:"\e65c"}.fa-rebel{--fa:"\f1d0"}.fa-css3{--fa:"\f13c"}.fa-staylinked{--fa:"\f3f5"}.fa-kaggle{--fa:"\f5fa"}.fa-space-awesome{--fa:"\e5ac"}.fa-deviantart{--fa:"\f1bd"}.fa-cpanel{--fa:"\f388"}.fa-goodreads-g{--fa:"\f3a9"}.fa-git-square,.fa-square-git{--fa:"\f1d2"}.fa-square-tumblr,.fa-tumblr-square{--fa:"\f174"}.fa-trello{--fa:"\f181"}.fa-creative-commons-nc-jp{--fa:"\f4ea"}.fa-get-pocket{--fa:"\f265"}.fa-perbyte{--fa:"\e083"}.fa-grunt{--fa:"\f3ad"}.fa-weebly{--fa:"\f5cc"}.fa-connectdevelop{--fa:"\f20e"}.fa-leanpub{--fa:"\f212"}.fa-black-tie{--fa:"\f27e"}.fa-themeco{--fa:"\f5c6"}.fa-python{--fa:"\f3e2"}.fa-android{--fa:"\f17b"}.fa-bots{--fa:"\e340"}.fa-free-code-camp{--fa:"\f2c5"}.fa-hornbill{--fa:"\f592"}.fa-js{--fa:"\f3b8"}.fa-ideal{--fa:"\e013"}.fa-git{--fa:"\f1d3"}.fa-dev{--fa:"\f6cc"}.fa-sketch{--fa:"\f7c6"}.fa-yandex-international{--fa:"\f414"}.fa-cc-amex{--fa:"\f1f3"}.fa-uber{--fa:"\f402"}.fa-github{--fa:"\f09b"}.fa-php{--fa:"\f457"}.fa-alipay{--fa:"\f642"}.fa-youtube{--fa:"\f167"}.fa-skyatlas{--fa:"\f216"}.fa-firefox-browser{--fa:"\e007"}.fa-replyd{--fa:"\f3e6"}.fa-suse{--fa:"\f7d6"}.fa-jenkins{--fa:"\f3b6"}.fa-twitter{--fa:"\f099"}.fa-rockrms{--fa:"\f3e9"}.fa-pinterest{--fa:"\f0d2"}.fa-buffer{--fa:"\f837"}.fa-npm{--fa:"\f3d4"}.fa-yammer{--fa:"\f840"}.fa-btc{--fa:"\f15a"}.fa-dribbble{--fa:"\f17d"}.fa-stumbleupon-circle{--fa:"\f1a3"}.fa-internet-explorer{--fa:"\f26b"}.fa-stubber{--fa:"\e5c7"}.fa-telegram,.fa-telegram-plane{--fa:"\f2c6"}.fa-old-republic{--fa:"\f510"}.fa-odysee{--fa:"\e5c6"}.fa-square-whatsapp,.fa-whatsapp-square{--fa:"\f40c"}.fa-node-js{--fa:"\f3d3"}.fa-edge-legacy{--fa:"\e078"}.fa-slack,.fa-slack-hash{--fa:"\f198"}.fa-medrt{--fa:"\f3c8"}.fa-usb{--fa:"\f287"}.fa-tumblr{--fa:"\f173"}.fa-vaadin{--fa:"\f408"}.fa-quora{--fa:"\f2c4"}.fa-square-x-twitter{--fa:"\e61a"}.fa-reacteurope{--fa:"\f75d"}.fa-medium,.fa-medium-m{--fa:"\f23a"}.fa-amilia{--fa:"\f36d"}.fa-mixcloud{--fa:"\f289"}.fa-flipboard{--fa:"\f44d"}.fa-viacoin{--fa:"\f237"}.fa-critical-role{--fa:"\f6c9"}.fa-sitrox{--fa:"\e44a"}.fa-discourse{--fa:"\f393"}.fa-joomla{--fa:"\f1aa"}.fa-mastodon{--fa:"\f4f6"}.fa-airbnb{--fa:"\f834"}.fa-wolf-pack-battalion{--fa:"\f514"}.fa-buy-n-large{--fa:"\f8a6"}.fa-gulp{--fa:"\f3ae"}.fa-creative-commons-sampling-plus{--fa:"\f4f1"}.fa-strava{--fa:"\f428"}.fa-ember{--fa:"\f423"}.fa-canadian-maple-leaf{--fa:"\f785"}.fa-teamspeak{--fa:"\f4f9"}.fa-pushed{--fa:"\f3e1"}.fa-wordpress-simple{--fa:"\f411"}.fa-nutritionix{--fa:"\f3d6"}.fa-wodu{--fa:"\e088"}.fa-google-pay{--fa:"\e079"}.fa-intercom{--fa:"\f7af"}.fa-zhihu{--fa:"\f63f"}.fa-korvue{--fa:"\f42f"}.fa-pix{--fa:"\e43a"}.fa-steam-symbol{--fa:"\f3f6"}:host,:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(/app/assets/fa-regular-400-BjRzuEpd.woff2) format("woff2"),url(/app/assets/fa-regular-400-DZaxPHgR.ttf) format("truetype")}.fa-regular,.far{font-weight:400}:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(/app/assets/fa-solid-900-CTAAxXor.woff2) format("woff2"),url(/app/assets/fa-solid-900-D0aA9rwL.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(/app/assets/fa-brands-400-D_cYUPeE.woff2) format("woff2"),url(/app/assets/fa-brands-400-D1LuMI3I.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(/app/assets/fa-solid-900-CTAAxXor.woff2) format("woff2"),url(/app/assets/fa-solid-900-D0aA9rwL.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(/app/assets/fa-regular-400-BjRzuEpd.woff2) format("woff2"),url(/app/assets/fa-regular-400-DZaxPHgR.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(/app/assets/fa-solid-900-CTAAxXor.woff2) format("woff2"),url(/app/assets/fa-solid-900-D0aA9rwL.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(/app/assets/fa-brands-400-D_cYUPeE.woff2) format("woff2"),url(/app/assets/fa-brands-400-D1LuMI3I.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(/app/assets/fa-regular-400-BjRzuEpd.woff2) format("woff2"),url(/app/assets/fa-regular-400-DZaxPHgR.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(/app/assets/fa-v4compatibility-C9RhG_FT.woff2) format("woff2"),url(/app/assets/fa-v4compatibility-CCth-dXg.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}.PhotoView-Portal{direction:ltr;height:100%;left:0;overflow:hidden;position:fixed;top:0;touch-action:none;width:100%;z-index:2000}@keyframes PhotoView__rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes PhotoView__delayIn{0%,50%{opacity:0}to{opacity:1}}.PhotoView__Spinner{animation:PhotoView__delayIn .4s linear both}.PhotoView__Spinner svg{animation:PhotoView__rotate .6s linear infinite}.PhotoView__Photo{cursor:grab;max-width:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.PhotoView__Photo:active{cursor:grabbing}.PhotoView__icon{display:inline-block;left:0;position:absolute;top:0;transform:translate(-50%,-50%)}.PhotoView__PhotoBox,.PhotoView__PhotoWrap{bottom:0;direction:ltr;left:0;position:absolute;right:0;top:0;touch-action:none;width:100%}.PhotoView__PhotoWrap{overflow:hidden;z-index:10}.PhotoView__PhotoBox{transform-origin:left top}@keyframes PhotoView__fade{0%{opacity:0}to{opacity:1}}.PhotoView-Slider__clean .PhotoView-Slider__ArrowLeft,.PhotoView-Slider__clean .PhotoView-Slider__ArrowRight,.PhotoView-Slider__clean .PhotoView-Slider__BannerWrap,.PhotoView-Slider__clean .PhotoView-Slider__Overlay,.PhotoView-Slider__willClose .PhotoView-Slider__BannerWrap:hover{opacity:0}.PhotoView-Slider__Backdrop{background:#000;height:100%;left:0;position:absolute;top:0;transition-property:background-color;width:100%;z-index:-1}.PhotoView-Slider__fadeIn{animation:PhotoView__fade linear both;opacity:0}.PhotoView-Slider__fadeOut{animation:PhotoView__fade linear reverse both;opacity:0}.PhotoView-Slider__BannerWrap{align-items:center;background-color:rgba(0,0,0,.5);color:#fff;display:flex;height:44px;justify-content:space-between;left:0;position:absolute;top:0;transition:opacity .2s ease-out;width:100%;z-index:20}.PhotoView-Slider__BannerWrap:hover{opacity:1}.PhotoView-Slider__Counter{font-size:14px;opacity:.75;padding:0 10px}.PhotoView-Slider__BannerRight{align-items:center;display:flex;height:100%}.PhotoView-Slider__toolbarIcon{fill:#fff;box-sizing:border-box;cursor:pointer;opacity:.75;padding:10px;transition:opacity .2s linear}.PhotoView-Slider__toolbarIcon:hover{opacity:1}.PhotoView-Slider__ArrowLeft,.PhotoView-Slider__ArrowRight{align-items:center;bottom:0;cursor:pointer;display:flex;height:100px;justify-content:center;margin:auto;opacity:.75;position:absolute;top:0;transition:opacity .2s linear;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:70px;z-index:20}.PhotoView-Slider__ArrowLeft:hover,.PhotoView-Slider__ArrowRight:hover{opacity:1}.PhotoView-Slider__ArrowLeft svg,.PhotoView-Slider__ArrowRight svg{fill:#fff;background:rgba(0,0,0,.3);box-sizing:content-box;height:24px;padding:10px;width:24px}.PhotoView-Slider__ArrowLeft{left:0}.PhotoView-Slider__ArrowRight{right:0}