<template>
  <router-view />
</template>

<script setup lang="ts">
</script>

<style>
/* =============================================
   CloudSearch Design System — Global Tokens
   ============================================= */
:root {
  /* ── Backgrounds ── */
  --bg: #f0f2f5;
  --bg-card: #ffffff;
  --bg-input: #f5f7fa;
  --bg-page: #f0f2f5;
  --bg-card-header: linear-gradient(135deg, #f8f9fc 0%, #eef1f8 100%);

  /* ── Text ── */
  --text: #1d2129;
  --text-secondary: #4e5969;
  --text-tertiary: #86909c;
  --text-placeholder: #c9cdd4;

  /* ── Borders ── */
  --border: #e5e6eb;
  --border-light: #f2f3f5;

  /* ── Primary ── */
  --primary: #409eff;
  --primary-hover: #66b1ff;
  --primary-light: rgba(64, 158, 255, 0.08);
  --primary-soft: #ecf5ff;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);

  /* ── Radius ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* ── Sizing ── */
  --sidebar-w: 240px;
}

#app { min-height: 100vh; background: var(--bg-page); color: var(--text); }

/* ── Global element-plus overrides ── */
.el-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.2s ease;
}
.el-card:hover { box-shadow: var(--shadow-md) !important; }
.el-card__header {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border-light) !important;
  font-weight: 600; font-size: 14px;
  background: var(--bg-card-header);
}
.el-card__body { padding: 20px !important; }

/* ── Typography helpers ── */
.form-tip { font-size: 12px; color: var(--text-tertiary); line-height: 1.6; }
.page-title { font-size: 20px; font-weight: 700; color: var(--text); }
.section-divider { border-top: 1px solid var(--border-light); margin: 20px 0; }

/* ── Fade transition ── */
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>
