<script setup lang="ts">
import { computed } from 'vue'

import type {
  CrawlerFlowStep,
  CrawlerFormState,
  CrawlerOptionsResponse,
  CrawlerPlatformState,
  CrawlerPrimaryAction,
} from '@/types'

const props = defineProps<{
  options: CrawlerOptionsResponse
  form: CrawlerFormState
  selectedPlatformState: CrawlerPlatformState | null
  availableLoginTypes: CrawlerOptionsResponse['login_types']
  availableCrawlerTypes: CrawlerOptionsResponse['crawler_types']
  capabilityHint: string
  validationIssues: string[]
  workflowSteps: CrawlerFlowStep[]
  primaryAction: CrawlerPrimaryAction
  lastLoginConfig: Record<string, unknown> | null
  lastCrawlConfig: Record<string, unknown> | null
  canStartLogin: boolean
  canStartCrawler: boolean
  acting: boolean
}>()

const emit = defineEmits<{
  'update:form': [value: CrawlerFormState]
  checkLogin: []
  startLogin: []
  cancelLogin: []
  startCrawler: []
  stopCrawler: []
  restoreLastLogin: []
  restoreLastCrawl: []
}>()

const formModel = computed({
  get: () => props.form,
  set: (value: CrawlerFormState) => emit('update:form', value),
})

const crawlerModeMeta: Record<string, string> = {
  search: '按关键词批量探索，适合做场馆口碑和主题扫描。',
  detail: '补抓指定内容，适合排查单条笔记或帖子详情。',
  creator: '跟踪创作者主页，适合观察固定账号的持续输出。',
}

const loginTypeMeta: Record<string, string> = {
  qrcode: '推荐首次使用。生成二维码后，直接用对应平台 App 扫码即可。',
  cookie: '适合已有稳定凭据的场景。恢复历史配置时不会自动回填敏感内容。',
  phone: '适合需要短信验证的平台。输入手机号后再发起登录更稳妥。',
}

const presets = [
  {
    key: 'quick',
    label: '快速试跑',
    detail: '10 条内容，不抓评论，先验证链路是否通。',
    values: {
      max_notes: 10,
      max_comments: 10,
      enable_comments: false,
      enable_sub_comments: false,
    },
  },
  {
    key: 'standard',
    label: '标准采集',
    detail: '20 条内容，带一级评论，适合常规调研。',
    values: {
      max_notes: 20,
      max_comments: 20,
      enable_comments: true,
      enable_sub_comments: false,
    },
  },
  {
    key: 'deep',
    label: '深度复盘',
    detail: '30 条内容，带二级评论，适合复盘异常与争议点。',
    values: {
      max_notes: 30,
      max_comments: 50,
      enable_comments: true,
      enable_sub_comments: true,
    },
  },
] as const

const isLoggedIn = computed(() => props.selectedPlatformState?.logged_in === true)

const targetPlaceholder = computed(() => {
  if (props.form.crawler_type === 'detail') {
    return '支持多行或逗号分隔，每条填写内容 ID 或完整 URL。'
  }
  if (props.form.crawler_type === 'creator') {
    return '支持多行或逗号分隔，每条填写创作者主页 ID 或 URL。'
  }
  return '支持多行输入，每行一个关键词。建议先放 3 到 5 个核心词。'
})

const currentTargetLabel = computed(() => {
  if (props.form.crawler_type === 'detail') {
    return '内容 ID / URL'
  }
  if (props.form.crawler_type === 'creator') {
    return '创作者 ID / URL'
  }
  return '搜索关键词'
})

const targetFieldValue = computed({
  get: () => {
    if (props.form.crawler_type === 'detail') {
      return props.form.specified_ids
    }
    if (props.form.crawler_type === 'creator') {
      return props.form.creator_ids
    }
    return props.form.keywords
  },
  set: (value: string) => {
    if (props.form.crawler_type === 'detail') {
      updateField('specified_ids', value)
      return
    }
    if (props.form.crawler_type === 'creator') {
      updateField('creator_ids', value)
      return
    }
    updateField('keywords', value)
  },
})

const activeTargetCount = computed(() => (
  targetFieldValue.value
    .replace(/\r/g, '\n')
    .split(/\n|,/)
    .map((item) => item.trim())
    .filter(Boolean)
    .length
))

const selectedLoginLabel = computed(() => (
  props.availableLoginTypes.find((item) => item.value === props.form.login_type)?.label
  ?? props.form.login_type
))

const selectedCrawlerLabel = computed(() => (
  props.availableCrawlerTypes.find((item) => item.value === props.form.crawler_type)?.label
  ?? props.form.crawler_type
))

const selectedSaveLabel = computed(() => (
  props.options.save_options.find((item) => item.value === props.form.save_option)?.label
  ?? props.form.save_option
))

const loginRestoreMeta = computed(() => {
  if (!props.lastLoginConfig) {
    return ''
  }

  const pieces: string[] = []
  const loginType = props.availableLoginTypes.find((item) => item.value === props.lastLoginConfig?.login_type)
  if (loginType) {
    pieces.push(loginType.label)
  }
  if (typeof props.lastLoginConfig.phone_hint === 'string') {
    pieces.push(props.lastLoginConfig.phone_hint)
  }
  if (props.lastLoginConfig.cookie_provided) {
    pieces.push('曾使用 Cookie')
  }
  return pieces.join(' / ')
})

const crawlRestoreMeta = computed(() => {
  if (!props.lastCrawlConfig) {
    return ''
  }

  const pieces: string[] = []
  const crawlerType = props.availableCrawlerTypes.find((item) => item.value === props.lastCrawlConfig?.crawler_type)
  if (crawlerType) {
    pieces.push(crawlerType.label)
  }
  if (typeof props.lastCrawlConfig.keywords === 'string' && props.lastCrawlConfig.keywords) {
    pieces.push('含关键词')
  }
  if (typeof props.lastCrawlConfig.specified_ids === 'string' && props.lastCrawlConfig.specified_ids) {
    pieces.push('含指定内容')
  }
  if (typeof props.lastCrawlConfig.creator_ids === 'string' && props.lastCrawlConfig.creator_ids) {
    pieces.push('含创作者列表')
  }
  if (typeof props.lastCrawlConfig.save_option === 'string') {
    const saveOption = props.options.save_options.find((item) => item.value === props.lastCrawlConfig?.save_option)
    if (saveOption) {
      pieces.push(saveOption.label)
    }
  }
  return pieces.join(' / ')
})

const platformOverview = computed(() => ([
  {
    label: '登录状态',
    value: isLoggedIn.value ? '已就绪' : '待处理',
    detail: props.selectedPlatformState?.message || '建议先检查当前平台登录状态，再决定是否重新发起登录。',
  },
  {
    label: '当前采集模式',
    value: selectedCrawlerLabel.value,
    detail: activeTargetCount.value > 0
      ? `已识别 ${activeTargetCount.value} 个目标，可直接进入执行阶段。`
      : '还没有可执行目标，建议先补充关键词、内容链接或创作者主页。',
  },
  {
    label: '结果落盘',
    value: selectedSaveLabel.value,
    detail: props.form.enable_comments
      ? (props.form.enable_sub_comments ? '将采集内容、一级评论和二级评论。' : '将采集内容和一级评论。')
      : '仅采集内容主体，不额外抓取评论。',
  },
]))

const matchedPresetKey = computed(() => (
  presets.find((preset) => (
    preset.values.max_notes === props.form.max_notes
    && preset.values.max_comments === props.form.max_comments
    && preset.values.enable_comments === props.form.enable_comments
    && preset.values.enable_sub_comments === props.form.enable_sub_comments
  ))?.key ?? ''
))

const recommendedTone = computed(() => {
  if (props.primaryAction.tone === 'danger') {
    return 'error'
  }
  if (props.primaryAction.disabled) {
    return props.validationIssues.length > 0 ? 'warning' : 'info'
  }
  return isLoggedIn.value ? 'success' : 'info'
})

const loginStatusTone = computed(() => {
  if (isLoggedIn.value) {
    return 'success'
  }
  if (props.primaryAction.key === 'cancel-login') {
    return 'warning'
  }
  return 'info'
})

const showCheckLoginAction = computed(() => props.primaryAction.key !== 'cancel-login')
const showCancelLoginAction = computed(() => props.primaryAction.key === 'cancel-login')
const showStopCrawlerAction = computed(() => props.primaryAction.key === 'stop-crawler')

const primaryButtonType = computed(() => {
  if (props.primaryAction.tone === 'danger') {
    return 'danger'
  }
  if (props.primaryAction.tone === 'neutral') {
    return 'info'
  }
  return 'primary'
})

const primaryButtonPlain = computed(() => props.primaryAction.tone === 'neutral')

function updateField<K extends keyof CrawlerFormState>(key: K, value: CrawlerFormState[K]) {
  formModel.value = {
    ...formModel.value,
    [key]: value,
  }
}

function updateNumberField(
  key: 'start_page' | 'max_notes' | 'max_comments',
  value: number | undefined,
  fallback: number,
) {
  updateField(key, Number(value ?? fallback))
}

function handleLoginTypeChange(value: string | number | boolean) {
  updateField('login_type', String(value))
}

function handleHeadlessModeChange(value: string | number | boolean) {
  updateField('headless', String(value) === 'headless')
}

function handleCookiesChange(value: string) {
  updateField('cookies', value)
}

function handlePhoneChange(value: string) {
  updateField('phone', value)
}

function handleSaveOptionChange(value: string | number | boolean) {
  updateField('save_option', String(value))
}

function handleTargetFieldChange(value: string) {
  targetFieldValue.value = value
}

function handleStartPageChange(value: number | undefined) {
  updateNumberField('start_page', value, 1)
}

function handleMaxNotesChange(value: number | undefined) {
  updateNumberField('max_notes', value, 20)
}

function handleMaxCommentsChange(value: number | undefined) {
  updateNumberField('max_comments', value, 20)
}

function handleEnableCommentsChange(value: string | number | boolean) {
  updateField('enable_comments', Boolean(value))
}

function handleEnableSubCommentsChange(value: string | number | boolean) {
  updateField('enable_sub_comments', Boolean(value))
}

function applyPreset(presetKey: string) {
  const preset = presets.find((item) => item.key === presetKey)
  if (!preset) {
    return
  }

  formModel.value = {
    ...formModel.value,
    ...preset.values,
  }
}

function handlePrimaryAction() {
  switch (props.primaryAction.key) {
    case 'start-login':
      emit('startLogin')
      return
    case 'cancel-login':
      emit('cancelLogin')
      return
    case 'start-crawler':
      emit('startCrawler')
      return
    case 'stop-crawler':
      emit('stopCrawler')
      return
    case 'check-login':
      emit('checkLogin')
      return
    default:
      return
  }
}
</script>

<template>
  <div class="control-shell">
    <div class="workflow-strip">
      <article
        v-for="(step, index) in workflowSteps"
        :key="step.key"
        class="workflow-card"
        :data-state="step.status"
      >
        <span class="workflow-card__index">0{{ index + 1 }}</span>
        <div class="workflow-card__body">
          <strong>{{ step.label }}</strong>
          <p>{{ step.detail }}</p>
        </div>
      </article>
    </div>

    <div class="support-grid">
      <article class="support-card support-card--focus">
        <div class="support-card__head">
          <div>
            <p class="support-kicker">Platform Guide</p>
            <h3>{{ selectedPlatformState?.label || form.platform }}</h3>
          </div>
          <el-tag round :type="loginStatusTone" effect="light">
            {{ isLoggedIn ? '已登录' : (primaryAction.key === 'cancel-login' ? '登录进行中' : '待登录') }}
          </el-tag>
        </div>
        <p class="support-copy">{{ capabilityHint }}</p>
        <div class="tag-row">
          <span>可用登录方式</span>
          <div class="tag-row__list">
            <el-tag
              v-for="item in availableLoginTypes"
              :key="item.value"
              round
              size="small"
              effect="plain"
            >
              {{ item.label }}
            </el-tag>
          </div>
        </div>
        <div class="tag-row">
          <span>可用采集模式</span>
          <div class="tag-row__list">
            <el-tag
              v-for="item in availableCrawlerTypes"
              :key="item.value"
              round
              size="small"
              effect="plain"
              :type="item.value === form.crawler_type ? 'success' : 'info'"
            >
              {{ item.label }}
            </el-tag>
          </div>
        </div>
      </article>

      <article
        v-for="item in platformOverview"
        :key="item.label"
        class="support-card"
      >
        <p class="support-kicker">{{ item.label }}</p>
        <strong>{{ item.value }}</strong>
        <span>{{ item.detail }}</span>
      </article>
    </div>

    <div v-if="lastLoginConfig || lastCrawlConfig" class="restore-row">
      <button
        v-if="lastLoginConfig"
        class="restore-card"
        type="button"
        @click="$emit('restoreLastLogin')"
      >
        <span class="support-kicker">上次登录偏好</span>
        <strong>恢复登录方案</strong>
        <span>{{ loginRestoreMeta || '恢复最近一次登录方式与浏览器策略。' }}</span>
      </button>
      <button
        v-if="lastCrawlConfig"
        class="restore-card"
        type="button"
        @click="$emit('restoreLastCrawl')"
      >
        <span class="support-kicker">上次采集任务</span>
        <strong>恢复采集参数</strong>
        <span>{{ crawlRestoreMeta || '恢复最近一次采集模式、目标和保存策略。' }}</span>
      </button>
    </div>

    <section class="form-section">
      <div class="section-head">
        <div>
          <p class="section-kicker">Step 1</p>
          <h3>登录准备</h3>
        </div>
        <el-tag round :type="loginStatusTone" effect="light">
          {{ isLoggedIn ? '当前平台可直接采集' : '先确认登录方式和浏览器策略' }}
        </el-tag>
      </div>

      <div class="field-grid field-grid--2">
        <label class="field">
          <span class="field-label">登录方式</span>
          <el-select
            :model-value="form.login_type"
            placeholder="选择登录方式"
            @update:model-value="handleLoginTypeChange"
          >
            <el-option
              v-for="item in availableLoginTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <small class="field-note">{{ loginTypeMeta[form.login_type] || '根据当前平台能力选择最稳妥的登录方式。' }}</small>
        </label>

        <label class="field">
          <span class="field-label">浏览器策略</span>
          <el-select
            :model-value="form.headless ? 'headless' : 'headed'"
            placeholder="选择浏览器策略"
            @update:model-value="handleHeadlessModeChange"
          >
            <el-option label="无头浏览器" value="headless" />
            <el-option label="可视化浏览器" value="headed" />
          </el-select>
          <small class="field-note">
            {{ form.headless ? '适合后台稳定执行；如果遇到验证码或风控，建议切到可视化浏览器。' : '浏览器会真实弹出，更适合扫码、短信验证和排查异常。' }}
          </small>
        </label>

        <label v-if="form.login_type === 'cookie'" class="field field--wide">
          <span class="field-label">Cookie</span>
          <el-input
            :model-value="form.cookies"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6 }"
            placeholder="粘贴完整 Cookie。恢复历史配置时不会自动回填敏感凭据。"
            @update:model-value="handleCookiesChange"
          />
        </label>

        <label v-if="form.login_type === 'phone'" class="field">
          <span class="field-label">手机号</span>
          <el-input
            :model-value="form.phone"
            placeholder="用于接收验证码"
            @update:model-value="handlePhoneChange"
          />
        </label>
      </div>

      <div class="action-row">
        <el-button
          v-if="showCheckLoginAction"
          :loading="acting && primaryAction.key === 'check-login'"
          @click="$emit('checkLogin')"
        >
          检查登录状态
        </el-button>
        <el-button
          type="primary"
          :loading="acting && primaryAction.key === 'start-login'"
          :disabled="acting || !canStartLogin"
          @click="$emit('startLogin')"
        >
          {{ isLoggedIn ? '重新发起登录' : '开始登录' }}
        </el-button>
        <el-button
          v-if="showCancelLoginAction"
          type="warning"
          plain
          :loading="acting && primaryAction.key === 'cancel-login'"
          @click="$emit('cancelLogin')"
        >
          取消登录
        </el-button>
      </div>
    </section>

    <section class="form-section">
      <div class="section-head">
        <div>
          <p class="section-kicker">Step 2</p>
          <h3>采集任务</h3>
        </div>
        <span class="section-hint">先选任务模式，再补最少必要信息。系统会持续保留最近一次可复用配置。</span>
      </div>

      <div class="mode-grid">
        <button
          v-for="item in availableCrawlerTypes"
          :key="item.value"
          class="mode-card"
          :class="{ 'mode-card--active': form.crawler_type === item.value }"
          type="button"
          @click="updateField('crawler_type', item.value)"
        >
          <strong>{{ item.label }}</strong>
          <span>{{ crawlerModeMeta[item.value] || '按当前平台支持能力执行采集。' }}</span>
        </button>
      </div>

      <div class="field-grid field-grid--3">
        <label class="field">
          <span class="field-label">保存方式</span>
          <el-select
            :model-value="form.save_option"
            placeholder="选择保存方式"
            @update:model-value="handleSaveOptionChange"
          >
            <el-option
              v-for="item in options.save_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </label>

        <label class="field field--wide">
          <span class="field-label">{{ currentTargetLabel }}</span>
          <el-input
            :model-value="targetFieldValue"
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 8 }"
            :placeholder="targetPlaceholder"
            @update:model-value="handleTargetFieldChange"
          />
          <small class="field-note">当前已识别 {{ activeTargetCount }} 个目标。</small>
        </label>

        <label class="field">
          <span class="field-label">起始页码</span>
          <el-input-number
            :model-value="form.start_page"
            :min="1"
            controls-position="right"
            @update:model-value="handleStartPageChange"
          />
        </label>

        <label class="field">
          <span class="field-label">最大内容数</span>
          <el-input-number
            :model-value="form.max_notes"
            :min="1"
            controls-position="right"
            @update:model-value="handleMaxNotesChange"
          />
        </label>

        <label class="field">
          <span class="field-label">单条最大评论数</span>
          <el-input-number
            :model-value="form.max_comments"
            :min="1"
            controls-position="right"
            @update:model-value="handleMaxCommentsChange"
          />
        </label>
      </div>

      <div class="preset-strip">
        <button
          v-for="preset in presets"
          :key="preset.key"
          class="preset-card"
          :class="{ 'preset-card--active': matchedPresetKey === preset.key }"
          type="button"
          @click="applyPreset(preset.key)"
        >
          <strong>{{ preset.label }}</strong>
          <span>{{ preset.detail }}</span>
        </button>
      </div>
    </section>

    <section class="form-section">
      <div class="section-head">
        <div>
          <p class="section-kicker">Step 3</p>
          <h3>执行策略</h3>
        </div>
        <span class="section-hint">把评论抓取和二级评论策略单独展示，避免误触高成本采集。</span>
      </div>

      <div class="toggle-grid">
        <article class="toggle-card">
          <div>
            <strong>抓取评论</strong>
            <p>默认适合常规口碑调研。关闭后只采集内容主体，链路更轻。</p>
          </div>
          <el-switch
            :model-value="form.enable_comments"
            @update:model-value="handleEnableCommentsChange"
          />
        </article>

        <article class="toggle-card">
          <div>
            <strong>抓取二级评论</strong>
            <p>只在需要复盘情绪分歧或异常争议时开启，耗时和数据量都会更高。</p>
          </div>
          <el-switch
            :model-value="form.enable_sub_comments"
            @update:model-value="handleEnableSubCommentsChange"
          />
        </article>
      </div>
    </section>

    <section class="action-board">
      <div class="action-board__copy">
        <p class="section-kicker">Recommended</p>
        <strong>{{ primaryAction.label }}</strong>
        <span>{{ primaryAction.description }}</span>
      </div>

      <el-alert
        :closable="false"
        :type="recommendedTone"
        :title="primaryAction.label"
        :description="primaryAction.description"
      />

      <div v-if="validationIssues.length > 0" class="issue-list">
        <div v-for="issue in validationIssues" :key="issue" class="issue-pill">
          {{ issue }}
        </div>
      </div>

      <div class="action-row action-row--launch">
        <el-button
          size="large"
          :type="primaryButtonType"
          :plain="primaryButtonPlain"
          :disabled="primaryAction.disabled"
          :loading="acting"
          @click="handlePrimaryAction"
        >
          {{ primaryAction.label }}
        </el-button>
        <el-button
          v-if="canStartCrawler && primaryAction.key !== 'start-crawler' && primaryAction.key !== 'stop-crawler'"
          :disabled="acting"
          @click="$emit('startCrawler')"
        >
          直接启动采集
        </el-button>
        <el-button
          v-if="showStopCrawlerAction"
          type="danger"
          plain
          :loading="acting && primaryAction.key === 'stop-crawler'"
          @click="$emit('stopCrawler')"
        >
          停止采集
        </el-button>
      </div>
    </section>
  </div>
</template>

<style scoped>
.control-shell,
.workflow-strip,
.support-grid,
.restore-row,
.field-grid,
.mode-grid,
.preset-strip,
.toggle-grid,
.issue-list {
  display: grid;
  gap: 18px;
}

.workflow-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workflow-card,
.support-card,
.restore-card,
.mode-card,
.preset-card,
.toggle-card {
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  background: rgba(255, 252, 246, 0.78);
}

.workflow-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 18px;
}

.workflow-card__index,
.support-kicker,
.section-kicker,
.field-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.workflow-card__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: rgba(16, 30, 28, 0.05);
}

.workflow-card__body {
  display: grid;
  gap: 6px;
}

.workflow-card__body strong,
.support-card strong,
.restore-card strong,
.mode-card strong,
.preset-card strong,
.toggle-card strong,
.action-board__copy strong {
  font-size: 16px;
}

.workflow-card__body p,
.support-copy,
.support-card span,
.restore-card span,
.mode-card span,
.preset-card span,
.toggle-card p,
.section-hint,
.field-note,
.action-board__copy span {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.7;
}

.workflow-card[data-state='done'] {
  border-color: rgba(40, 94, 77, 0.18);
  background: rgba(40, 94, 77, 0.06);
}

.workflow-card[data-state='active'] {
  border-color: rgba(159, 110, 59, 0.22);
  background: rgba(159, 110, 59, 0.08);
}

.workflow-card[data-state='warning'] {
  border-color: rgba(140, 53, 45, 0.2);
  background: rgba(140, 53, 45, 0.06);
}

.support-grid {
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
}

.support-card,
.restore-card,
.mode-card,
.preset-card,
.toggle-card,
.form-section,
.action-board {
  padding: 20px;
}

.support-card {
  display: grid;
  gap: 12px;
}

.support-card--focus {
  background:
    radial-gradient(circle at top right, rgba(40, 94, 77, 0.12), transparent 26%),
    rgba(255, 252, 246, 0.86);
}

.support-card__head,
.section-head,
.toggle-card {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.support-card__head h3,
.section-head h3 {
  margin: 4px 0 0;
  font-size: 20px;
}

.tag-row {
  display: grid;
  gap: 10px;
}

.tag-row > span {
  font-size: 12px;
  color: var(--text-muted);
}

.tag-row__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.restore-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.restore-card,
.mode-card,
.preset-card {
  display: grid;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.restore-card,
.mode-card,
.preset-card {
  appearance: none;
}

.restore-card:hover,
.mode-card:hover,
.preset-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.form-section,
.action-board {
  display: grid;
  gap: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 28px;
  background: rgba(255, 252, 246, 0.82);
}

.field-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field {
  display: grid;
  gap: 10px;
}

.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}

.field--wide {
  grid-column: 1 / -1;
}

.mode-grid,
.preset-strip,
.toggle-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mode-card--active,
.preset-card--active {
  border-color: rgba(40, 94, 77, 0.24);
  background: rgba(40, 94, 77, 0.08);
  box-shadow: 0 16px 30px rgba(40, 94, 77, 0.08);
}

.toggle-card {
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.66);
}

.toggle-card > div {
  display: grid;
  gap: 6px;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.action-board__copy {
  display: grid;
  gap: 8px;
}

.issue-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.issue-pill {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(140, 53, 45, 0.08);
  color: #8c352d;
}

@media (max-width: 1440px) {
  .support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-strip,
  .mode-grid,
  .preset-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .support-grid,
  .restore-row,
  .workflow-strip,
  .field-grid--2,
  .field-grid--3,
  .mode-grid,
  .preset-strip,
  .toggle-grid {
    grid-template-columns: 1fr;
  }
}
</style>