/**
 * SK 主题 - Cyberpunk UI + Glassmorphism
 * 严格遵循 UI UX Pro Max Skill 设计系统
 * 来源: styles.csv #41 Cyberpunk UI + #3 Glassmorphism
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

/* ========== Skill: Cyberpunk UI Design System Variables ========== */
:root {
  /* Cyberpunk 主色 - Skill row 41（背景减淡30%） */
  --bg-dark: #1a1a1a;
  --neon-green: #00FF00;
  --neon-magenta: #FF00FF;
  --neon-cyan: #00FFFF;
  --neon-yellow: #FFFF00;
  --scanline-opacity: 0.08;
  --glitch-duration: 0.3s;

  /* Skill: Glassmorphism row 3 */
  --blur-amount: 15px;
  --glass-opacity: 0.12;
  --glass-opacity-hover: 0.18;
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-border-hover: rgba(255, 255, 255, 0.25);

  /* 品牌映射 (Seeking / Bumble) */
  --sk-primary: #00FFFF;
  --sk-secondary: #20B2AA;
  --sk-accent: #00FF00;
  --bumble-primary: #FFFF00;
  --bumble-secondary: #FFD700;

  /* 通用 - 深色默认 (Cyberpunk ✓ Only dark，背景减淡30%) */
  --bg-primary: #1a1a1a;
  --bg-card: rgba(255, 255, 255, 0.08);
  --text-primary: #E2E8F0;
  --text-secondary: #94A3B8;
  --border-color: rgba(255, 255, 255, 0.12);
  --radius: 12px;
  --radius-lg: 16px;
  --transition: 200ms ease;
  --font-heading: 'Inter', 'Noto Sans SC', sans-serif;
  --font-body: 'Inter', 'Noto Sans SC', sans-serif;
  --font-mono: 'JetBrains Mono', 'Noto Sans SC', monospace;
}

/* 浅色模式 - 柔和变体 (Skill: 可选) */
[data-theme="light"] {
  --bg-primary: #0F172A;
  --bg-card: rgba(255, 255, 255, 0.15);
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --border-color: rgba(255, 255, 255, 0.2);
  --scanline-opacity: 0.03;
}

/* ========== Skill: Body & Base ========== */
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color var(--transition), color var(--transition);
}

@media (prefers-reduced-motion: reduce) {
  body, .sk-card, .btn-sk, .btn-bumble, .theme-toggle {
    transition: none !important;
  }
}

/* ========== Skill: Glassmorphism 卡片 ========== */
.sk-card {
  background: rgba(255, 255, 255, var(--glass-opacity));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  backdrop-filter: blur(var(--blur-amount));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.sk-card:hover {
  background: rgba(255, 255, 255, var(--glass-opacity-hover));
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.15), 0 0 40px rgba(255, 0, 255, 0.08);
}

/* ========== Skill: 赛博朋克霓虹按钮 ========== */
.btn-sk {
  background: var(--sk-primary);
  color: var(--bg-dark);
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  transition: all var(--transition);
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.4);
}
.btn-sk:hover {
  background: var(--sk-secondary);
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
}

.btn-bumble {
  background: var(--bumble-primary);
  color: var(--bg-dark);
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  transition: all var(--transition);
  text-shadow: 0 0 8px rgba(255, 255, 0, 0.6);
  box-shadow: 0 0 12px rgba(255, 255, 0, 0.4);
}
.btn-bumble:hover {
  background: var(--bumble-secondary);
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.6);
}

/* ========== Skill: 主题切换按钮 (44x44px touch target) ========== */
.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, var(--glass-opacity));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  backdrop-filter: blur(var(--blur-amount));
  border: 1px solid var(--glass-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: all var(--transition);
}
.theme-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.3);
}
.theme-toggle:focus-visible {
  outline: 3px solid var(--neon-cyan);
  outline-offset: 2px;
}

/* Skill: Focus states for keyboard nav (PRE-DELIVERY CHECKLIST) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--neon-cyan);
  outline-offset: 2px;
}

/* Skill: cursor-pointer on clickable (Touch & Interaction) */
a, button, .sk-card[href], [role="button"], .theme-toggle {
  cursor: pointer;
}

/* ========== Skill: 仓库页背景 (Cyberpunk 深色 + 微妙渐变) ========== */
.inventory-bg {
  background: linear-gradient(135deg, #1a1a1a 0%, #1e293b 50%, #1a1a1a 100%);
  background-attachment: fixed;
  position: relative;
}
.inventory-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 255, var(--scanline-opacity)) 2px,
    rgba(0, 255, 255, var(--scanline-opacity)) 4px
  );
  z-index: 0;
}
[data-theme="light"] .inventory-bg {
  background: linear-gradient(135deg, #0F172A 0%, #1e293b 50%, #0F172A 100%);
}

[data-theme="dark"] .inventory-header-overlay,
.inventory-header-overlay {
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.85) 0%, rgba(30, 41, 59, 0.9) 100%) !important;
}

/* ========== Skill: Tailwind 覆盖 - Cyberpunk 适配 ========== */
.bg-slate-50 {
  background: rgba(255, 255, 255, 0.08) !important;
}
.bg-slate-100 { background: rgba(255, 255, 255, 0.06) !important; }
.bg-slate-200 { background: rgba(255, 255, 255, 0.12) !important; }
.bg-blue-50 { background: rgba(0, 255, 255, 0.12) !important; }
.bg-blue-600, .bg-indigo-600 {
  background: var(--sk-primary) !important;
  color: var(--bg-dark) !important;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.4);
}
.bg-indigo-100 { background: rgba(0, 255, 255, 0.2) !important; }
.text-indigo-700, .text-blue-600, .text-blue-700 { color: var(--neon-cyan) !important; }
.border-slate-200 { border-color: var(--glass-border) !important; }
.border-indigo-200, .border-indigo-300 { border-color: rgba(0, 255, 255, 0.3) !important; }
.border-blue-200 { border-color: rgba(0, 255, 255, 0.25) !important; }
.hover\:bg-blue-100:hover { background: rgba(0, 255, 255, 0.2) !important; }
.hover\:bg-slate-100:hover { background: rgba(255, 255, 255, 0.12) !important; }
.hover\:bg-indigo-100:hover { background: rgba(0, 255, 255, 0.2) !important; }
.bg-amber-500, .bg-amber-100 { background: var(--bumble-primary) !important; }
.text-amber-600, .text-amber-700 { color: var(--bumble-secondary) !important; }
.bg-slate-500, .bg-slate-600 { background: rgba(148, 163, 184, 0.4) !important; }
.bg-slate-400 { background: rgba(148, 163, 184, 0.5) !important; }

/* 后端页面：白色卡片、文字色适配 Cyberpunk */
.bg-white {
  background: rgba(255, 255, 255, var(--glass-opacity)) !important;
  -webkit-backdrop-filter: blur(var(--blur-amount));
  backdrop-filter: blur(var(--blur-amount));
}
.text-slate-900, .text-slate-800, .text-slate-700 { color: var(--text-primary) !important; }
.text-slate-600, .text-slate-500, .text-slate-400 { color: var(--text-secondary) !important; }

/* 管理后台：输入框确保深色文字、浅色背景，避免白底白字 */
.admin-body input:not([type="hidden"]):not([type="submit"]):not([type="button"]),
.admin-body textarea,
.admin-body select {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
.admin-body input::placeholder,
.admin-body textarea::placeholder {
  color: #64748b;
}

/* 管理后台：黄色按钮使用深色文字，提升对比度 */
.admin-body .bg-amber-500,
.admin-body .bg-amber-100 {
  color: var(--bg-dark) !important;
}

/* 前台原生 select：下拉选项多为白底，勿用 .text-slate-*（会被映射成浅色字）。单独保证对比度 */
select.native-select-readable {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
  color-scheme: light;
}
select.native-select-readable option {
  color: #0f172a !important;
  background-color: #ffffff !important;
}

/* 前台：未设背景时浏览器常为 input 白底，却继承 body 浅色字，导致白底浅字不可读 */
input.wyp-input-readable,
textarea.wyp-input-readable {
  color: #0f172a !important;
  background-color: #f8fafc !important;
}
input.wyp-input-readable::placeholder,
textarea.wyp-input-readable::placeholder {
  color: #64748b !important;
}