/* ============================================================
   base.css — Reset, Design Tokens, Base elements
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

svg { stroke-width: 1.1; }

:root {
  --primary: #007AFF;
  --primary-hover: rgba(0, 122, 255, 0.85);
  --primary-dark: rgba(0, 122, 255, 0.7);
  --primary-light: rgba(0, 122, 255, .06);
  --primary-glow: rgba(0, 122, 255, .10);
  --primary-glow-strong: rgba(0, 122, 255, .18);

  --accent: #5856D6;
  --accent-glow: rgba(88, 86, 214, .10);
  --accent-glow-strong: rgba(88, 86, 214, .18);

  --auxiliary: #F5F5F7;

  --bg-base: #E5E5EA;
  --bg-surface: rgba(255, 255, 255, 0.10);
  --bg-card: rgba(255, 255, 255, 0.10);
  --bg-input: rgba(0, 0, 0, .03);
  --bg-elevated: rgba(0, 0, 0, .05);
  --bg-hover: rgba(0, 0, 0, .02);
  --bg-sidebar: rgba(255, 255, 255, 0.12);

  --border: rgba(0, 0, 0, .08);
  --border-light: rgba(0, 0, 0, .05);
  --border-active: rgba(0, 122, 255, .4);

  --text-main: #1D1D1F;
  --text: #1D1D1F;
  --text-secondary: #6E6E73;
  --text-muted: #86868B;
  --text-inverse: #ffffff;

  --text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);

  --success: #34C759;
  --success-bg: rgba(52, 199, 89, .08);
  --success-border: rgba(52, 199, 89, .15);
  --success-glow: rgba(52, 199, 89, .12);
  --error: #FF3B30;
  --error-bg: rgba(255, 59, 48, .08);
  --error-border: rgba(255, 59, 48, .15);
  --error-glow: rgba(255, 59, 48, .12);
  --warn: #FF9500;
  --warn-bg: rgba(255, 149, 0, .08);
  --warn-border: rgba(255, 149, 0, .15);
  --info: #007AFF;
  --info-bg: rgba(0, 122, 255, .06);
  --info-border: rgba(0, 122, 255, .15);

  --sidebar-width: 260px;
  --sidebar-collapsed: 68px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .04), 0 0 0 0.5px rgba(0, 0, 0, .03);
  --shadow: 0 2px 8px rgba(0, 0, 0, .06), 0 0 0 0.5px rgba(255, 255, 255, .4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .08), 0 0 0 0.5px rgba(255, 255, 255, .3);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, .06), 0 0 0 0.5px rgba(255, 255, 255, .35);

  --glow-card: 0 4px 12px rgba(0, 0, 0, .08);
  --glow-card-hover: 0 8px 24px rgba(0, 0, 0, .12);
  --glow-sidebar: 0 2px 8px rgba(0, 0, 0, .06);

  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.25, .46, .45, .94);
  --ease-spring: cubic-bezier(.25, .46, .45, .94);
  --transition-fast: .3s cubic-bezier(.25, .46, .45, .94);
  --transition: .3s cubic-bezier(.25, .46, .45, .94);
  --transition-slow: .4s cubic-bezier(.25, .46, .45, .94);
}

html, body {
  height: 100%; overflow: hidden;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
               'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg-base);
  color: var(--text-main);
  text-shadow: var(--text-shadow);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  letter-spacing: -.01em;
  position: relative;
  overflow: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 15% 25%, rgba(0, 122, 255, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 60%, rgba(88, 86, 214, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 90%, rgba(52, 199, 89, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 90% 20%, rgba(255, 149, 0, 0.08) 0%, transparent 60%);
  animation: ambientFloat 30s ease-in-out infinite alternate;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}
@keyframes ambientFloat {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  25%  { transform: translate(20px, -15px) scale(1.03) rotate(0.5deg); }
  50%  { transform: translate(-15px, 10px) scale(0.97) rotate(-0.5deg); }
  75%  { transform: translate(10px, -8px) scale(1.02) rotate(0.3deg); }
  100% { transform: translate(-8px, 4px) scale(1.01) rotate(-0.3deg); }
}

.page { position: relative; z-index: 1; height: 100%; }
.page.hidden { display: none !important; }
.hidden { display: none !important; }

/* Spinner */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(0, 0, 0, .1);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin .6s linear infinite; display: none;
}
.btn.loading .spinner { display: block; }
.btn.loading .btn-text, .btn.loading span { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .15); border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, .25);
  border: 2px solid transparent;
  background-clip: padding-box;
}