<template>
  <teleport to="body">
    <transition name="settings-panel" appear>
      <div v-if="open" class="settings-overlay" @click.self="closePanel">
        <aside
          class="settings-panel"
          role="dialog"
          aria-modal="true"
          aria-label="设置"
        >
          <button
            ref="closeButtonRef"
            class="settings-close"
            type="button"
            aria-label="关闭"
            @click="closePanel"
          >
            <Icon icon="lucide:x" aria-hidden="true" />
          </button>
          <header class="settings-header">
            <div class="settings-avatar" aria-hidden="true"></div>
            <div>
              <div class="settings-title">订阅中心</div>
              <div class="settings-subtitle">订阅更多丰富功能</div>
            </div>
          </header>
          <div class="settings-body">
            <nav class="settings-nav">
              <button class="settings-login" type="button" @click="setSection('auth')">
                登录/注册
              </button>
              <div class="settings-nav-list">
                <button
                  v-for="section in navSections"
                  :key="section.id"
                  class="settings-nav-item"
                  :class="[
                    { active: activeSectionId === section.id },
                    section.tone ? `is-${section.tone}` : ''
                  ]"
                  type="button"
                  @click="setSection(section.id)"
                >
                  <span class="nav-icon">
                    <Icon :icon="section.icon" aria-hidden="true" />
                  </span>
                  <span class="nav-label">{{ section.label }}</span>
                </button>
              </div>
            </nav>
            <div class="settings-content">
              <header class="content-header">
                <div>
                  <div class="content-title">{{ activeSection.title }}</div>
                  <div class="content-desc">{{ activeSection.description }}</div>
                </div>
              </header>
              <div class="content-body">
                <section v-if="activeSectionId === 'subscription'" class="content-section">
                  <div class="settings-card highlight">
                    <div class="card-title">登录后订阅更多功能</div>
                    <div class="card-desc">
                      解锁云同步、主题扩展、效率组件等订阅权益。
                    </div>
                    <button class="primary-button" type="button" @click="setSection('auth')">
                      登录/注册
                    </button>
                  </div>
                  <div class="settings-card">
                    <div class="card-title">订阅特权</div>
                    <div class="card-desc">一次订阅，多端同步，专属主题持续更新。</div>
                    <ul class="feature-list">
                      <li>云端备份与跨设备同步</li>
                      <li>高效桌面与组件包</li>
                      <li>专属主题与壁纸库</li>
                    </ul>
                  </div>
                </section>
                <section v-else-if="activeSectionId === 'auth'" class="content-section">
                  <div class="settings-card">
                    <div class="card-title">登录 / 注册</div>
                    <div class="card-desc">登录后可同步设置与订阅记录。</div>
                    <div class="form-stack">
                      <input class="settings-input" type="text" placeholder="手机号 / 邮箱" />
                      <input class="settings-input" type="password" placeholder="密码" />
                    </div>
                    <div class="button-row">
                      <button class="primary-button" type="button">登录</button>
                      <button class="ghost-button" type="button">注册</button>
                    </div>
                  </div>
                </section>
                <section v-else-if="activeSectionId === 'open'" class="content-section">
                  <div class="settings-card">
                    <div class="settings-row">
                      <div>
                        <div class="row-title">链接打开方式</div>
                        <div class="row-desc">点击图标时的默认行为。</div>
                      </div>
                      <div class="pill-group">
                        <button
                          class="pill"
                          :class="{ active: openInNewTab }"
                          type="button"
                          @click="openInNewTab = true"
                        >
                          新标签页
                        </button>
                        <button
                          class="pill"
                          :class="{ active: !openInNewTab }"
                          type="button"
                          @click="openInNewTab = false"
                        >
                          当前页面
                        </button>
                      </div>
                    </div>
                  </div>
                </section>
                <section v-else-if="activeSectionId === 'search'" class="content-section">
                  <div class="settings-card">
                    <div class="settings-row">
                      <div>
                        <div class="row-title">显示搜索栏</div>
                        <div class="row-desc">快速聚焦输入框提升效率。</div>
                      </div>
                      <label class="toggle">
                        <input v-model="showSearch" type="checkbox" />
                        <span class="toggle-slider" aria-hidden="true"></span>
                      </label>
                    </div>
                    <div class="settings-row">
                      <div>
                        <div class="row-title">默认搜索引擎</div>
                        <div class="row-desc">选择你常用的搜索入口。</div>
                      </div>
                      <select v-model="searchProvider" class="settings-select">
                        <option
                          v-for="provider in searchProviders"
                          :key="provider.id"
                          :value="provider.id"
                        >
                          {{ provider.label }}
                        </option>
                      </select>
                    </div>
                  </div>
                </section>
                <section v-else-if="activeSectionId === 'icons'" class="content-section">
                  <div class="settings-card">
                    <div class="settings-row">
                      <div>
                        <div class="row-title">显示图标文字</div>
                        <div class="row-desc">开启后显示图标名称。</div>
                      </div>
                      <label class="toggle">
                        <input v-model="showIconLabels" type="checkbox" />
                        <span class="toggle-slider" aria-hidden="true"></span>
                      </label>
                    </div>
                    <div class="settings-row">
                      <div>
                        <div class="row-title">图标密度</div>
                        <div class="row-desc">控制图标间距与密度。</div>
                      </div>
                      <input
                        v-model.number="iconDensity"
                        class="settings-range"
                        type="range"
                        :min="iconDensityRange.min"
                        :max="iconDensityRange.max"
                        :step="iconDensityRange.step"
                      />
                    </div>
                    <div class="settings-row">
                      <div>
                        <div class="row-title">图标大小</div>
                        <div class="row-desc">用网格密度统一控制图标与组件大小。</div>
                      </div>
                      <input
                        v-model.number="iconSizeDensity"
                        class="settings-range"
                        type="range"
                        :min="layoutDensityRange.min"
                        :max="layoutDensityRange.max"
                        :step="layoutDensityRange.step"
                      />
                    </div>
                    <div class="settings-row">
                      <div>
                        <div class="row-title">图标圆角</div>
                        <div class="row-desc">控制图标卡片的圆角强度。</div>
                      </div>
                      <input
                        v-model.number="iconRadius"
                        class="settings-range"
                        type="range"
                        :min="iconRadiusRange.min"
                        :max="iconRadiusRange.max"
                        :step="iconRadiusRange.step"
                      />
                    </div>
                  </div>
                </section>
                <section v-else-if="activeSectionId === 'time'" class="content-section">
                  <div class="settings-card">
                    <div class="settings-row">
                      <div>
                        <div class="row-title">显示时间</div>
                        <div class="row-desc">主屏幕时间组件。</div>
                      </div>
                      <label class="toggle">
                        <input v-model="showClock" type="checkbox" />
                        <span class="toggle-slider" aria-hidden="true"></span>
                      </label>
                    </div>
                    <div class="settings-row">
                      <div>
                        <div class="row-title">显示日期</div>
                        <div class="row-desc">展示完整日期信息。</div>
                      </div>
                      <label class="toggle">
                        <input v-model="showDate" type="checkbox" :disabled="!showClock" />
                        <span class="toggle-slider" aria-hidden="true"></span>
                      </label>
                    </div>
                    <div class="settings-row">
                      <div>
                        <div class="row-title">显示秒数</div>
                        <div class="row-desc">时间精确到秒。</div>
                      </div>
                      <label class="toggle">
                        <input v-model="showSeconds" type="checkbox" :disabled="!showClock" />
                        <span class="toggle-slider" aria-hidden="true"></span>
                      </label>
                    </div>
                    <div class="settings-row">
                      <div>
                        <div class="row-title">24 小时制</div>
                        <div class="row-desc">使用 24 小时格式显示。</div>
                      </div>
                      <label class="toggle">
                        <input v-model="use24Hour" type="checkbox" :disabled="!showClock" />
                        <span class="toggle-slider" aria-hidden="true"></span>
                      </label>
                    </div>
                  </div>
                </section>
                <section v-else-if="activeSectionId === 'theme'" class="content-section">
                  <div class="settings-card">
                    <div class="row-title">主题 / 壁纸</div>
                    <div class="row-desc">选择心情主题或更换壁纸。</div>
                    <div class="theme-grid">
                      <button
                        v-for="theme in themePresets"
                        :key="theme.id"
                        class="theme-card"
                        :class="{ active: themeId === theme.id }"
                        type="button"
                        @click="themeId = theme.id"
                      >
                        <span
                          class="theme-swatch"
                          :style="{
                            background: theme.overlay === 'none'
                              ? 'linear-gradient(135deg, #e2e8f0, #ffffff)'
                              : theme.overlay
                          }"
                        ></span>
                        <span class="theme-label">{{ theme.label }}</span>
                      </button>
                    </div>
                    <button class="ghost-button full" type="button">更换壁纸</button>
                  </div>
                </section>
                <section v-else-if="activeSectionId === 'sidebar'" class="content-section">
                  <div class="settings-card">
                    <div class="settings-row">
                      <div>
                        <div class="row-title">紧凑模式</div>
                        <div class="row-desc">缩小侧边栏间距。</div>
                      </div>
                      <label class="toggle">
                        <input v-model="compactSidebar" type="checkbox" />
                        <span class="toggle-slider" aria-hidden="true"></span>
                      </label>
                    </div>
                    <div class="settings-row">
                      <div>
                        <div class="row-title">显示分组名称</div>
                        <div class="row-desc">在图标下方展示文字。</div>
                      </div>
                      <label class="toggle">
                        <input v-model="showGroupLabels" type="checkbox" />
                        <span class="toggle-slider" aria-hidden="true"></span>
                      </label>
                    </div>
                  </div>
                </section>
                <section v-else-if="activeSectionId === 'backup'" class="content-section">
                  <div class="settings-card">
                    <div class="row-title">备份与恢复</div>
                    <div class="row-desc">导出当前配置或从备份恢复。</div>
                    <div class="button-row">
                      <button class="primary-button" type="button" @click="exportBackup">
                        导出配置
                      </button>
                      <button class="ghost-button" type="button" @click="triggerImport">
                        导入配置
                      </button>
                    </div>
                    <input
                      ref="importInputRef"
                      class="hidden-input"
                      type="file"
                      accept="application/json"
                      @change="handleImport"
                    />
                    <div v-if="feedbackMessage" class="feedback">{{ feedbackMessage }}</div>
                  </div>
                </section>
                <section v-else-if="activeSectionId === 'reset'" class="content-section">
                  <div class="settings-card danger">
                    <div class="row-title">重置设置</div>
                    <div class="row-desc">恢复默认设置，保留图标与组件数据。</div>
                    <button class="danger-button" type="button" @click="resetSettings">
                      恢复默认设置
                    </button>
                    <div v-if="feedbackMessage" class="feedback">{{ feedbackMessage }}</div>
                  </div>
                </section>
                <section v-else-if="activeSectionId === 'about'" class="content-section">
                  <div class="settings-card">
                    <div class="row-title">关于</div>
                    <div class="row-desc">iTab 新标签页插件</div>
                    <div class="about-list">
                      <div class="about-item">
                        <span>版本</span>
                        <span>0.1.0</span>
                      </div>
                      <div class="about-item">
                        <span>反馈</span>
                        <span>support@itab.local</span>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </transition>
  </teleport>
</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { Icon } from '@iconify/vue';
import { useSettingsStore } from '@/store/useSettingsStore';
import {
  iconDensityRange,
  iconRadiusRange,
  layoutDensityRange,
  searchProviders,
  themePresets,
} from '@/config/settingsPresets';

type SettingsSection = {
  id: string;
  label: string;
  icon: string;
  title: string;
  description: string;
  showInNav?: boolean;
  tone?: 'danger';
};

const props = defineProps<{
  open: boolean;
}>();

const emit = defineEmits<{
  (event: 'update:open', value: boolean): void;
}>();

const settingsStore = useSettingsStore();

const openInNewTab = computed({
  get: () => settingsStore.openInNewTab,
  set: value => settingsStore.setSetting('openInNewTab', value),
});

const showSearch = computed({
  get: () => settingsStore.showSearch,
  set: value => settingsStore.setSetting('showSearch', value),
});

const showClock = computed({
  get: () => settingsStore.showClock,
  set: value => settingsStore.setSetting('showClock', value),
});

const showDate = computed({
  get: () => settingsStore.showDate,
  set: value => settingsStore.setSetting('showDate', value),
});

const showSeconds = computed({
  get: () => settingsStore.showSeconds,
  set: value => settingsStore.setSetting('showSeconds', value),
});

const use24Hour = computed({
  get: () => settingsStore.use24Hour,
  set: value => settingsStore.setSetting('use24Hour', value),
});

const searchProvider = computed({
  get: () => settingsStore.searchProvider,
  set: value => settingsStore.setSetting('searchProvider', value as typeof settingsStore.searchProvider),
});

const showIconLabels = computed({
  get: () => settingsStore.showIconLabels,
  set: value => settingsStore.setSetting('showIconLabels', value),
});

const iconDensity = computed({
  get: () => settingsStore.iconDensity,
  set: value => settingsStore.setSetting('iconDensity', value),
});

const iconRadius = computed({
  get: () => settingsStore.iconRadius,
  set: value => settingsStore.setSetting('iconRadius', value),
});

const themeId = computed({
  get: () => settingsStore.themeId,
  set: value => settingsStore.setSetting('themeId', value as typeof settingsStore.themeId),
});

const invertLayoutDensity = (value: number) =>
  layoutDensityRange.max + layoutDensityRange.min -
  Math.min(Math.max(value, layoutDensityRange.min), layoutDensityRange.max);

const iconSizeDensity = computed({
  get: () => invertLayoutDensity(settingsStore.layoutDensity),
  set: value => settingsStore.setSetting('layoutDensity', invertLayoutDensity(value)),
});

const compactSidebar = computed({
  get: () => settingsStore.compactSidebar,
  set: value => settingsStore.setSetting('compactSidebar', value),
});

const showGroupLabels = computed({
  get: () => settingsStore.showGroupLabels,
  set: value => settingsStore.setSetting('showGroupLabels', value),
});

const feedbackMessage = ref('');

const sections: SettingsSection[] = [
  {
    id: 'subscription',
    label: '订阅中心',
    icon: 'lucide:badge-check',
    title: '订阅中心',
    description: '订阅更多丰富功能',
  },
  {
    id: 'open',
    label: '打开方式',
    icon: 'lucide:arrow-up-right',
    title: '打开方式',
    description: '设置链接的默认打开方式',
  },
  {
    id: 'search',
    label: '搜索栏',
    icon: 'lucide:search',
    title: '搜索栏',
    description: '搜索相关展示与默认引擎',
  },
  {
    id: 'icons',
    label: '图标',
    icon: 'lucide:grid-3x3',
    title: '图标管理',
    description: '控制图标显示与密度',
  },
  {
    id: 'time',
    label: '时间/日期',
    icon: 'lucide:clock',
    title: '时间与日期',
    description: '时间显示格式与细节设置',
  },
  {
    id: 'theme',
    label: '主题/壁纸',
    icon: 'lucide:palette',
    title: '主题与壁纸',
    description: '挑选你喜欢的视觉风格',
  },
  {
    id: 'sidebar',
    label: '侧边栏',
    icon: 'lucide:panel-left',
    title: '侧边栏',
    description: '侧边栏展示与紧凑模式',
  },
  {
    id: 'backup',
    label: '备份与恢复',
    icon: 'lucide:cloud',
    title: '备份与恢复',
    description: '导出配置或导入备份',
  },
  {
    id: 'reset',
    label: '重置设置',
    icon: 'lucide:rotate-ccw',
    title: '重置设置',
    description: '恢复默认设置项',
    tone: 'danger',
  },
  {
    id: 'about',
    label: '关于',
    icon: 'lucide:info',
    title: '关于',
    description: '产品信息与反馈渠道',
  },
  {
    id: 'auth',
    label: '登录/注册',
    icon: 'lucide:user',
    title: '登录/注册',
    description: '登录后同步配置',
    showInNav: false,
  },
];

const navSections = computed(() => sections.filter(section => section.showInNav !== false));
const activeSectionId = ref('subscription');
const activeSection = computed(
  () => sections.find(section => section.id === activeSectionId.value) ?? sections[0]
);

const closeButtonRef = ref<HTMLButtonElement | null>(null);
const importInputRef = ref<HTMLInputElement | null>(null);

const closePanel = () => {
  emit('update:open', false);
};

const setSection = (id: string) => {
  activeSectionId.value = id;
  feedbackMessage.value = '';
};

const resetFeedback = (message: string) => {
  feedbackMessage.value = message;
  window.setTimeout(() => {
    feedbackMessage.value = '';
  }, 2000);
};

const exportBackup = () => {
  const payload = {
    version: 1,
    exportedAt: new Date().toISOString(),
    data: {
      settings: settingsStore.$state,
      icons: safeParse('itab_icons'),
      widgets: safeParse('itab_widgets'),
      gridOrder: safeParse('itab_grid_order'),
      sidebarGroups: safeParse('itab_sidebar_groups'),
      sidebarOverrides: safeParse('itab_sidebar_overrides'),
      sidebarHidden: safeParse('itab_sidebar_hidden'),
    },
  };
  const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = `itab-backup-${new Date().toISOString().slice(0, 10)}.json`;
  link.click();
  URL.revokeObjectURL(url);
  resetFeedback('备份已导出');
};

const triggerImport = () => {
  importInputRef.value?.click();
};

const handleImport = (event: Event) => {
  const input = event.target as HTMLInputElement | null;
  const file = input?.files?.[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = () => {
    try {
      const parsed = JSON.parse(String(reader.result));
      if (!parsed?.data || typeof parsed.data !== 'object') {
        resetFeedback('备份文件格式不正确');
        return;
      }
      const data = parsed.data as Record<string, unknown>;
      restoreEntry('itab_icons', data.icons);
      restoreEntry('itab_widgets', data.widgets);
      restoreEntry('itab_grid_order', data.gridOrder);
      restoreEntry('itab_sidebar_groups', data.sidebarGroups);
      restoreEntry('itab_sidebar_overrides', data.sidebarOverrides);
      restoreEntry('itab_sidebar_hidden', data.sidebarHidden);
      const settings = data.settings as Partial<typeof settingsStore.$state> | undefined;
      if (settings && typeof settings === 'object') {
        applyImportedSettings(settings);
      }
      resetFeedback('备份已导入，刷新后生效');
    } catch {
      resetFeedback('备份文件解析失败');
    }
  };
  reader.readAsText(file);
  if (input) {
    input.value = '';
  }
};

const resetSettings = () => {
  settingsStore.reset();
  resetFeedback('已恢复默认设置');
};

const safeParse = (key: string) => {
  const raw = localStorage.getItem(key);
  if (!raw) return null;
  try {
    return JSON.parse(raw);
  } catch {
    return raw;
  }
};

const restoreEntry = (key: string, value: unknown) => {
  if (value === undefined || value === null) {
    localStorage.removeItem(key);
    return;
  }
  localStorage.setItem(key, JSON.stringify(value));
};

const clampRange = (value: number, min: number, max: number) =>
  Math.min(Math.max(value, min), max);

const applyImportedSettings = (settings: Partial<typeof settingsStore.$state>) => {
  const providerIds = new Set(searchProviders.map(item => item.id));
  const themeIds = new Set(themePresets.map(item => item.id));

  if (typeof settings.showSearch === 'boolean') {
    settingsStore.setSetting('showSearch', settings.showSearch);
  }
  if (typeof settings.showClock === 'boolean') {
    settingsStore.setSetting('showClock', settings.showClock);
  }
  if (typeof settings.showDate === 'boolean') {
    settingsStore.setSetting('showDate', settings.showDate);
  }
  if (typeof settings.showSeconds === 'boolean') {
    settingsStore.setSetting('showSeconds', settings.showSeconds);
  }
  if (typeof settings.use24Hour === 'boolean') {
    settingsStore.setSetting('use24Hour', settings.use24Hour);
  }
  if (typeof settings.openInNewTab === 'boolean') {
    settingsStore.setSetting('openInNewTab', settings.openInNewTab);
  }
  if (typeof settings.showIconLabels === 'boolean') {
    settingsStore.setSetting('showIconLabels', settings.showIconLabels);
  }
  if (typeof settings.autoAlign === 'boolean') {
    settingsStore.setSetting('autoAlign', settings.autoAlign);
  }
  if (typeof settings.compactSidebar === 'boolean') {
    settingsStore.setSetting('compactSidebar', settings.compactSidebar);
  }
  if (typeof settings.showGroupLabels === 'boolean') {
    settingsStore.setSetting('showGroupLabels', settings.showGroupLabels);
  }
  if (typeof settings.iconRadius === 'number') {
    settingsStore.setSetting(
      'iconRadius',
      clampRange(settings.iconRadius, iconRadiusRange.min, iconRadiusRange.max)
    );
  }
  if (typeof settings.searchProvider === 'string' && providerIds.has(settings.searchProvider)) {
    settingsStore.setSetting(
      'searchProvider',
      settings.searchProvider as typeof settingsStore.searchProvider
    );
  }
  if (typeof settings.themeId === 'string' && themeIds.has(settings.themeId)) {
    settingsStore.setSetting('themeId', settings.themeId as typeof settingsStore.themeId);
  }
  if (typeof settings.iconDensity === 'number') {
    settingsStore.setSetting(
      'iconDensity',
      clampRange(settings.iconDensity, iconDensityRange.min, iconDensityRange.max)
    );
  }
  if (typeof settings.layoutDensity === 'number') {
    settingsStore.setSetting(
      'layoutDensity',
      clampRange(settings.layoutDensity, layoutDensityRange.min, layoutDensityRange.max)
    );
  }
};

const handleKeydown = (event: KeyboardEvent) => {
  if (!props.open) return;
  if (event.key === 'Escape') {
    event.preventDefault();
    closePanel();
  }
};

onMounted(() => {
  window.addEventListener('keydown', handleKeydown);
});

onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown);
});

watch(
  () => props.open,
  open => {
    if (!open) return;
    activeSectionId.value = 'subscription';
    nextTick(() => closeButtonRef.value?.focus());
  }
);
</script>

<style lang="scss" scoped>
@import '@/styles/tokens.scss';

.settings-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  background: rgba(8, 10, 18, 0.35);
  backdrop-filter: blur(3px);
  z-index: $z-index-modal;
}

.settings-panel {
  --panel-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(243, 245, 249, 0.98));
  --panel-text: #1d1f23;
  --panel-muted: #6b7280;
  --panel-accent: #1e88ff;
  width: min(460px, 94vw);
  height: calc(100% - 24px);
  margin: 12px;
  background: var(--panel-bg);
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
  color: var(--panel-text);
  display: flex;
  flex-direction: column;
  padding: 18px 18px 20px;
  position: relative;
  overflow: hidden;
}

.settings-panel::before {
  content: '';
  position: absolute;
  inset: auto -120px -120px auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(30, 136, 255, 0.2), transparent 70%);
  pointer-events: none;
}

.settings-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  color: var(--panel-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color $motion-duration-sm $motion-easing-standard;
}

.settings-close:hover {
  background: rgba(0, 0, 0, 0.14);
}

.settings-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 36px;
  margin-bottom: 12px;
}

.settings-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #111);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.settings-title {
  font-size: 16px;
  font-weight: 600;
}

.settings-subtitle {
  font-size: 12px;
  color: var(--panel-muted);
}

.settings-body {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.settings-login {
  background: var(--panel-accent);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(30, 136, 255, 0.25);
}

.settings-nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding-right: 4px;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--panel-muted);
  font-size: 13px;
  cursor: pointer;
  transition: background-color $motion-duration-sm $motion-easing-standard,
    color $motion-duration-sm $motion-easing-standard,
    border-color $motion-duration-sm $motion-easing-standard;
}

.settings-nav-item .nav-icon {
  width: 24px;
  height: 24px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--panel-text);
}

.settings-nav-item.active {
  background: rgba(30, 136, 255, 0.12);
  border-color: rgba(30, 136, 255, 0.25);
  color: var(--panel-text);
}

.settings-nav-item.active .nav-icon {
  background: rgba(30, 136, 255, 0.18);
  color: var(--panel-accent);
}

.settings-nav-item.is-danger {
  color: #c22f2f;
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content-title {
  font-size: 16px;
  font-weight: 600;
}

.content-desc {
  font-size: 12px;
  color: var(--panel-muted);
  margin-top: 4px;
}

.content-body {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}

.settings-card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
}

.settings-card.highlight {
  background: linear-gradient(135deg, rgba(30, 136, 255, 0.12), rgba(255, 255, 255, 0.95));
  border-color: rgba(30, 136, 255, 0.2);
}

.settings-card.danger {
  border-color: rgba(194, 47, 47, 0.2);
  background: rgba(255, 236, 236, 0.9);
}

.card-title {
  font-size: 14px;
  font-weight: 600;
}

.card-desc {
  font-size: 12px;
  color: var(--panel-muted);
}

.feature-list {
  padding-left: 16px;
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--panel-muted);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.row-title {
  font-size: 13px;
  font-weight: 600;
}

.row-desc {
  font-size: 12px;
  color: var(--panel-muted);
  margin-top: 4px;
}

.pill-group {
  display: flex;
  gap: 6px;
}

.pill {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  color: var(--panel-muted);
  font-size: 12px;
  cursor: pointer;
}

.pill.active {
  background: rgba(30, 136, 255, 0.16);
  border-color: rgba(30, 136, 255, 0.35);
  color: var(--panel-text);
}

.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  position: relative;
  transition: background-color $motion-duration-sm $motion-easing-standard;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform $motion-duration-sm $motion-easing-standard;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.toggle input:checked + .toggle-slider {
  background: var(--panel-accent);
}

.toggle input:checked + .toggle-slider::after {
  transform: translateX(18px);
}

.toggle input:disabled + .toggle-slider {
  opacity: 0.5;
}

.settings-select {
  min-width: 120px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 6px 10px;
  background: #fff;
  color: var(--panel-text);
  font-size: 12px;
}

.settings-range {
  width: 120px;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-input {
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 0 12px;
  font-size: 13px;
}

.button-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.primary-button {
  padding: 8px 14px;
  border-radius: 14px;
  border: none;
  background: var(--panel-accent);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(30, 136, 255, 0.25);
}

.ghost-button {
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: transparent;
  color: var(--panel-text);
  font-size: 13px;
  cursor: pointer;
}

.ghost-button.full {
  width: 100%;
}

.danger-button {
  padding: 8px 14px;
  border-radius: 14px;
  border: none;
  background: #d93f3f;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.theme-card {
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.theme-card.active {
  border-color: rgba(30, 136, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(30, 136, 255, 0.12);
}

.theme-swatch {
  height: 36px;
  border-radius: 12px;
}

.theme-label {
  font-size: 12px;
}

.about-list {
  display: grid;
  gap: 8px;
}

.about-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--panel-muted);
}

.feedback {
  font-size: 12px;
  color: var(--panel-muted);
}

.hidden-input {
  display: none;
}

.settings-panel-enter-active,
.settings-panel-leave-active {
  transition: opacity 220ms ease;
}

.settings-panel-enter-from,
.settings-panel-leave-to {
  opacity: 0;
}

.settings-panel-enter-active .settings-panel,
.settings-panel-leave-active .settings-panel {
  transition: transform 260ms ease, opacity 260ms ease;
}

.settings-panel-enter-from .settings-panel,
.settings-panel-leave-to .settings-panel {
  transform: translateX(24px);
  opacity: 0;
}

@media (max-width: 720px) {
  .settings-panel {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
  }

  .settings-body {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    flex-direction: row;
    align-items: center;
    overflow: auto;
  }

  .settings-login {
    flex: 0 0 auto;
  }

  .settings-nav-list {
    flex-direction: row;
  }

  .settings-nav-item {
    flex: 0 0 auto;
  }
}
</style>
