/**
 * Kervin 站点共享样式 - imsyy 风格全面覆盖版 v2
 * 修复：小按钮/图标按钮不再被紫色渐变污染
 */

/* ========== 基础重置 ========== */
:root {
  --accent: #667eea;
  --accent2: #764ba2;
  --bg: #000;
  --bg-card: rgba(0,0,0,0.15);
  --glass-blur: 24px;
  --glass: rgba(0,0,0,0.15);
  --glass-border: rgba(255,255,255,0.12);
  --glass-hover: rgba(0,0,0,0.35);
  --text: #fff;
  --text2: rgba(255,255,255,0.6);
  --text3: rgba(255,255,255,0.35);
  --danger: #ff4757;
  --success: #2ed573;
  --warning: #ffa502;
  --r: 12px;
  --font: "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  background: transparent !important;
  color: #fff !important;
  font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif !important;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* Ensure content is above effects canvas (bg=z:0, canvas=z:1) */
/* Content above effects canvas (bg=z:0, canvas=z:1, content=z:2) */
body > nav,
body > header,
body > main,
body > section,
body > footer,
body > .app,
body > .main,
body > .chat-layout,
body > .container,
body > .login-overlay,
body > .login-box,
body > .login-card,
body > .glass-card,
body > .spinner,
body > .kervin-loading { position: relative; z-index: 2; }
body > .kervin-loading { z-index: 9999; }


a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent2); }

/* ========== 加载动画 ========== */
.kervin-loading { position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .6s, visibility .6s; }
.kervin-loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.kervin-ld-spin { width: 44px; height: 44px; border: 3px solid rgba(255,255,255,.1); border-top-color: #667eea; border-radius: 50%; animation: kervin-sp .8s linear infinite; }
@keyframes kervin-sp { to { transform: rotate(360deg); } }
.kervin-ld-text { margin-top: 14px; color: rgba(255,255,255,.6); font-size: 13px; letter-spacing: 2px; }

/* ========== 导航栏 ========== */
.navbar, .nav, header, .header, .top-bar, .topbar {
  background: rgba(0,0,0,0.15) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  color: #fff !important;
}
.navbar a, .nav a, header a, .header a, .navbar a:visited, .nav a:visited, header a:visited, .header a:visited { color: #fff !important; transition: color .2s; }
.navbar a:hover, .nav a:hover, header a:hover { color: #fff !important; }

/* Logo */
.logo, .navbar .logo, .nav .logo, header .logo, .site-name {
  font-family: 'Pacifico', cursive !important;
  font-size: 22px !important;
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: normal !important;
}

/* ========== 卡片/容器 ========== */
.card, .panel, .box, .main-content,
.page-content, .wrapper, .chat-container, .msg-container,
.friend-card, .friend-item, .blog-card, .post-card,
.result-box, .formula-box, .circuit-diagram, .recommended-item,
.detail-card, .info-card, .stat-card, .user-card,
.thread-card, .comment-card, .article-card {
  background: rgba(0,0,0,0.15) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  color: #fff !important;
}

.login-box, .register-box, .auth-box, .reset-box {
  background: rgba(0,0,0,0.15) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
  color: #fff !important;
}

/* ========== 输入框 ========== */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="url"],
input[type="tel"], input[type="date"], input[type="time"],
input:not([type]), textarea, select {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: "Noto Sans SC", sans-serif !important;
  font-size: 14px !important;
  transition: all .3s !important;
  outline: none !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102,126,234,0.15) !important;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.35) !important; }
select option { background: #1a1a2e !important; color: #fff !important; }
label { color: rgba(255,255,255,0.6) !important; font-size: 13px !important; }

/* ========== 按钮 — 关键修复 ========== */
/* 
  分两类：
  1. 主操作按钮（提交、登录、主Cta） → 紫蓝渐变
  2. 小/图标/功能按钮（刷新、折叠、关闭、设置等）→ 毛玻璃透明，不渐变
*/

/* 主操作按钮：渐变 */
.btn-primary, .submit-btn, .action-btn, .calc-btn,
.mode-bar-item.active, button[type="submit"], .glass-btn,
.login-box .btn, .register-box .btn, .reset-box .btn,
.form-group + .btn {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all .3s !important;
}

.btn-primary:hover, .submit-btn:hover, .action-btn:hover,
button[type="submit"]:hover, .glass-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(102,126,234,0.35) !important;
}

/* 小/图标/功能按钮：毛玻璃透明，不渐变！ */
button, .btn {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.6) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all .3s !important;
  font-family: "Noto Sans SC", sans-serif !important;
}

button:hover, .btn:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* 主操作按钮覆盖上面的基础规则（更具体的选择器优先） */
.btn-primary, .submit-btn, .action-btn, .calc-btn,
.mode-bar-item.active, button[type="submit"], .glass-btn,
.login-box button, .register-box button, .reset-box button,
.login-box .btn, .register-box .btn, .reset-box .btn,
.form-group + .btn {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  color: #fff !important;
  border: none !important;
}

button:disabled, .btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* 工具页面特殊按钮 - 保持各自页面的样式 */
.copy-btn, .preset-btn, .nav-btn-outline,
.share-btn, .mode-btn, .option-btn,
.tab-btn, .filter-btn, .clear-btn,
svg button, button svg { 
  background: rgba(255,255,255,0.05) !important; 
  border: 1px solid rgba(255,255,255,0.12) !important; 
  color: rgba(255,255,255,0.7) !important; 
}
.copy-btn:hover, .preset-btn:hover, .nav-btn-outline:hover,
.share-btn:hover, .mode-btn:hover, .option-btn:hover,
.tab-btn:hover, .filter-btn:hover, .clear-btn:hover { 
  background: rgba(255,255,255,0.1) !important; 
  color: #fff !important; 
  border-color: rgba(255,255,255,0.2) !important; 
}
.preset-btn.active, .tab-btn.active, .mode-btn.active, .option-btn.active {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* 次要/轮廓按钮 */
.btn-secondary, .btn-outline, .nav-btn-outline, .glass-btn-outline,
.cancel-btn, .btn-ghost {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.6) !important;
}

.btn-secondary:hover, .btn-outline:hover, .nav-btn-outline:hover {
  color: #fff !important;
  border-color: rgba(255,255,255,0.2) !important;
  background: rgba(255,255,255,0.08) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 导航栏按钮：渐变 */
.nav-btn {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 6px 16px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* ========== Tab 标签 ========== */
.tab, .filter-tab, .calc-mode-btn, .mode-btn, [class*="tab"],
.glass-tab {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.5) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  transition: all .2s !important;
}
.tab.active, .filter-tab.active, .calc-mode-btn.active,
.glass-tab.active, [class*="tab"].active {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.tab:hover, .filter-tab:hover, .calc-mode-btn:hover {
  color: rgba(255,255,255,0.8) !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* ========== 表格 ========== */
table, .glass-table { width: 100%; border-collapse: collapse !important; }
th, .glass-table th {
  background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.6) !important;
  font-weight: 500 !important; padding: 10px 14px !important; text-align: left !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important; font-size: 13px !important;
}
td, .glass-table td {
  padding: 10px 14px !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.8) !important; font-size: 13px !important;
}
tr:hover td { background: rgba(255,255,255,0.03) !important; }

/* ========== 毛玻璃工具类 ========== */
.glass-card {
  background: rgba(0,0,0,0.15) !important; backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important; transition: all .3s !important;
}
.glass-card:hover { background: rgba(0,0,0,0.35) !important; border-color: rgba(255,255,255,0.15) !important; }

.glass-nav { background: rgba(0,0,0,0.15) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; }

.glass-input { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: #fff !important; border-radius: 8px !important; transition: all .3s !important; }
.glass-input:focus { border-color: #667eea !important; box-shadow: 0 0 0 3px rgba(102,126,234,0.2) !important; outline: none !important; }
.glass-input::placeholder { color: rgba(255,255,255,0.35) !important; }

.glass-btn { background: linear-gradient(135deg, #667eea, #764ba2) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 10px 20px !important; font-weight: 500 !important; cursor: pointer !important; transition: all .3s !important; }
.glass-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(102,126,234,0.35) !important; }

.glass-btn-outline { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.6) !important; border-radius: 8px !important; padding: 10px 20px !important; cursor: pointer !important; transition: all .3s !important; }
.glass-btn-outline:hover { color: #fff !important; border-color: rgba(255,255,255,0.2) !important; }

/* ========== 计算器专用 ========== */
.result-box, .result { background: rgba(102,126,234,0.1) !important; border: 1px solid rgba(102,126,234,0.2) !important; border-radius: 10px !important; color: #fff !important; }
.formula-box, .formula { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 8px !important; color: rgba(255,255,255,0.8) !important; }
.circuit-diagram, .circuit-svg, svg { background: transparent !important; }
.circuit-diagram svg text, .circuit-diagram text { fill: rgba(255,255,255,0.7) !important; }
svg line, svg path, svg rect, svg circle, svg polyline { stroke: rgba(255,255,255,0.5); }
/* Preserve SVG fills and specific colors */
svg path[fill]:not([fill="none"]):not([fill="transparent"]),
svg rect[fill]:not([fill="none"]):not([fill="transparent"]),
svg circle[fill]:not([fill="none"]):not([fill="transparent"]) { /* keep original fill */ }
/* Don't override colored SVG elements */
svg .no-override, svg button * { all: revert; }

/* ========== 动画 ========== */
@keyframes fiu { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ========== 滚动条 ========== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ========== 分割线 ========== */
hr, .divider { border: none !important; border-top: 1px solid rgba(255,255,255,0.06) !important; }

/* ========== 徽章 ========== */
.badge, .tag, .chip, .label { background: rgba(102,126,234,0.15) !important; color: #667eea !important; border-radius: 6px !important; padding: 2px 8px !important; font-size: 12px !important; }
.badge.danger, .tag.danger { background: rgba(255,71,87,0.15) !important; color: #ff4757 !important; }
.badge.success, .tag.success { background: rgba(46,213,115,0.15) !important; color: #2ed573 !important; }

/* ========== 头像 ========== */
.avatar, .user-avatar, .profile-avatar, img[class*="avatar"] { border-radius: 50% !important; border: 2px solid rgba(255,255,255,0.1) !important; object-fit: cover !important; }

/* ========== Toast ========== */
.toast, .alert, .message-toast, .notification { background: rgba(0,0,0,0.35) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 10px !important; color: #fff !important; }

/* ========== 弹窗 ========== */
.modal, .dialog, .popup, .overlay-content { background: rgba(0,0,0,0.35) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 16px !important; color: #fff !important; }

/* ========== 下拉菜单 ========== */
.dropdown, .drop-menu, .menu-dropdown { background: rgba(0,0,0,0.35) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 10px !important; }

/* ========== 页脚 ========== */
footer, .footer, .ft { background: rgba(15,15,30,0.35) !important; border-top: 1px solid rgba(255,255,255,0.04) !important; color: rgba(255,255,255,0.35) !important; }
footer a, .footer a, .ft a { color: rgba(255,255,255,0.4) !important; }
footer a:hover, .footer a:hover, .ft a:hover { color: #667eea !important; }

/* ========== 代码块 ========== */
code, pre, .code-block, .code-output { background: rgba(10,10,20,0.6) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 8px !important; color: rgba(255,255,255,0.85) !important; font-family: "JetBrains Mono", "Fira Code", monospace !important; }

/* ========== 开关 ========== */
.switch, .toggle, .setting-switch { background: rgba(255,255,255,0.1) !important; border-radius: 20px !important; }
.switch.on, .toggle.on, .setting-switch.on { background: linear-gradient(135deg, #667eea, #764ba2) !important; }

/* ========== 链接列表 ========== */
.nav-links a, .sidebar a, .menu a, .sidebar-nav a, .nav-links a:visited, .sidebar a:visited, .menu a:visited, .sidebar-nav a:visited { color: #fff !important; padding: 8px 14px !important; border-radius: 8px !important; transition: all .2s !important; }
.nav-links a:hover, .sidebar a:hover, .menu a:hover, .sidebar-nav a:hover { background: rgba(255,255,255,0.06) !important; color: #fff !important; }
.nav-links a.active, .sidebar a.active, .sidebar-nav a.active, .nav-links a.active:visited, .sidebar a.active:visited, .sidebar-nav a.active:visited { background: rgba(102,126,234,0.15) !important; color: #fff !important; }

/* ========== 响应式 ========== */
@media (max-width: 768px) {
  .navbar, .nav, header { padding: 0 16px !important; }
  .login-box, .register-box, .auth-box, .reset-box { margin: 16px !important; padding: 28px 20px !important; }
  .card, .panel { border-radius: 10px !important; }
}



/* ========== Light Theme ========== */
[data-theme=light] {
  --accent: #4f6ef7;
  --accent2: #6c3fc0;
  --bg: #f0f2f5;
  --bg-card: rgba(255,255,255,0.7);
  --glass-blur: 24px;
  --glass: rgba(255,255,255,0.6);
  --glass-border: rgba(0,0,0,0.1);
  --glass-hover: rgba(0,0,0,0.06);
  --text: #1a1a2e;
  --text2: rgba(0,0,0,0.6);
  --text3: rgba(0,0,0,0.38);
  --danger: #e74c3c;
  --success: #27ae60;
  --warning: #e67e22;
}

/* Light theme body override */
[data-theme=light] body {
  background: #f0f2f5 !important;
  color: #1a1a2e !important;
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: 1px solid var(--glass-border);
  color: var(--text2);
  font-size: 16px;
  cursor: pointer;
  padding: 5px 9px;
  border-radius: 8px;
  transition: all 0.3s;
  line-height: 1;
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--glass-hover);
}