@import 'tailwindcss';

/* 使用 class 方式控制暗色模式（配合 @vueuse/core 的 useDark） */
@custom-variant dark (&:where(.dark, .dark *));

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 窗口背景色与渐变（供 html / #app 复用，避免重复定义） */
:root {
  --app-bg-color: #eef2ff;
  --app-bg-gradient:
    radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.28), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgba(34, 211, 238, 0.28), transparent 55%),
    linear-gradient(160deg, #eef2ff 0%, #f8fafc 45%, #eef7ff 100%);
}

html.dark {
  --app-bg-color: #0b1220;
  --app-bg-gradient:
    radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.35), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgba(14, 165, 233, 0.28), transparent 55%),
    linear-gradient(160deg, #0b1220 0%, #0f172a 45%, #111827 100%);
}

/*
 * 默认（Windows / Linux）：背景绘制在 <html> 上。
 * 根元素的背景会被绘制到整个画布（canvas）上，铺满窗口的每一个像素，
 * 不会出现“元素高度(100vh) 与实际窗口差几个像素”导致的上下留白；
 * 窗口圆角交给系统裁切（Windows 11 的 DWM 默认就是 8px 圆角）。
 */
html {
  background-color: var(--app-bg-color);
  background-image: var(--app-bg-gradient);
  background-repeat: no-repeat;
}

/* 选中自定义背景图时替换为图片：等比缩放铺满，不拉伸变形 */
html.has-bg-image {
  background-image: var(--app-bg-image, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/*
 * macOS：无边框窗口系统不会自动裁圆角（不像 Windows 11 的 DWM），
 * 因此通过 tauri.macos.conf.json 开启 transparent 窗口，
 * 再把背景从 <html> 移到 #app 上并由 #app 裁出 8px 圆角，
 * html/body 保持完全透明，让圆角之外的区域透出桌面壁纸。
 */
html.is-macos,
html.is-macos body {
  background: transparent !important;
}

html.is-macos #app {
  position: fixed;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--app-bg-color);
  background-image: var(--app-bg-gradient);
  background-repeat: no-repeat;
}

html.is-macos.has-bg-image #app {
  background-image: var(--app-bg-image, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* 全屏遮罩跟随窗口圆角，避免弹窗打开时遮罩把圆角「填方」 */
html.is-macos .ant-modal-mask {
  border-radius: 8px;
}

body {
  overflow: hidden;
  font-family: 'Inter', 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* 背景交由 <html>（或 macOS 下的 #app）绘制，body 保持透明避免覆盖画布背景 */
  background-color: transparent;
}

/* Antd 按钮：图标与文字按 flex 垂直居中（Tailwind preflight 会把 svg 设为 block，导致行内对齐偏移） */
.ant-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* 主内容区卡片：去掉投影，避免上下卡片之间的阴影透过半透明背景叠加成灰色遮罩 */
.glass-panel.glass-panel-flat,
.dark .glass-panel.glass-panel-flat {
  box-shadow: none;
}

/* 窗口圆角固定 8px，与 Windows 11 系统默认圆角保持一致 */
#app {
  border-radius: 8px;
  overflow: hidden;
}

/* 悬浮磨砂玻璃面板 */
.glass-panel {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
}

.dark .glass-panel {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/*
 * 透明磨砂玻璃卡片（服务器 / 隧道 / Frpc 列表卡片）
 * 叠加在 .glass-panel 之上，用 .ant-card 提升优先级，
 * 覆盖 Antd 运行时注入的卡片背景与边框（需 !important 才能稳定生效）。
 */
.glass-card.ant-card {
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.glass-card.ant-card:hover {
  border-color: rgba(99, 102, 241, 0.45) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14) !important;
}

.dark .glass-card.ant-card {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(30, 41, 59, 0.5) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35) !important;
}

.dark .glass-card.ant-card:hover {
  border-color: rgba(129, 140, 248, 0.5) !important;
  background: rgba(30, 41, 59, 0.62) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

/*
 * 表单弹窗通用布局 + 透明磨砂玻璃背景：
 * 1. 弹窗整体高度不超过窗口的 80%；
 * 2. 内容过多时仅弹窗主体（body）滚动，标题与底部按钮固定可见；
 * 3. 只保留纵向滚动条，避免出现横向滚动条。
 */
.form-modal-wrap .ant-modal {
  padding-bottom: 0;
}

.form-modal-wrap .ant-modal-content {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18) !important;
}

.form-modal-wrap .ant-modal-header,
.form-modal-wrap .ant-modal-footer {
  flex: 0 0 auto;
  border-color: rgba(15, 23, 42, 0.06);
  background: transparent !important;
}

.dark .form-modal-wrap .ant-modal-content {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(30, 41, 59, 0.62) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
}

.dark .form-modal-wrap .ant-modal-header,
.dark .form-modal-wrap .ant-modal-footer {
  border-color: rgba(255, 255, 255, 0.08);
}

.form-modal-wrap .ant-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/*
 * 更新弹窗：高度不超过窗口的 60%，内容过多时仅主体（body）滚动，
 * 标题与底部按钮固定可见；沿用磨砂玻璃质感。
 */
.update-modal-wrap .ant-modal {
  padding-bottom: 0;
}

.update-modal-wrap .ant-modal-content {
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18) !important;
}

.update-modal-wrap .ant-modal-header,
.update-modal-wrap .ant-modal-footer {
  flex: 0 0 auto;
  border-color: rgba(15, 23, 42, 0.06);
  background: transparent !important;
}

.dark .update-modal-wrap .ant-modal-content {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(30, 41, 59, 0.72) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
}

.dark .update-modal-wrap .ant-modal-header,
.dark .update-modal-wrap .ant-modal-footer {
  border-color: rgba(255, 255, 255, 0.08);
}

.update-modal-wrap .ant-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/*
 * Markdown 渲染内容（更新日志等）的排版。类名唯一，使用全局样式；
 * 内容由 v-html 注入，不参与组件 scoped 样式，故放在此处统一维护。
 */
.markdown-body {
  font-size: 13px;
  line-height: 1.75;
  word-break: break-word;
}

.markdown-body > :first-child {
  margin-top: 0 !important;
}

.markdown-body > :last-child {
  margin-bottom: 0 !important;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin: 14px 0 8px;
  font-weight: 600;
  line-height: 1.4;
}

.markdown-body h1 {
  font-size: 17px;
}

.markdown-body h2 {
  font-size: 15px;
}

.markdown-body h3 {
  font-size: 14px;
}

.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  font-size: 13px;
}

.markdown-body p {
  margin: 8px 0;
}

.markdown-body ul,
.markdown-body ol {
  margin: 8px 0;
  padding-left: 20px;
}

.markdown-body ul {
  list-style: disc;
}

.markdown-body ol {
  list-style: decimal;
}

.markdown-body li {
  margin: 4px 0;
}

.markdown-body li > ul,
.markdown-body li > ol {
  margin: 4px 0;
}

.markdown-body a {
  color: #6366f1;
  text-decoration: none;
}

.markdown-body a:hover {
  text-decoration: underline;
}

.markdown-body code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.22);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.markdown-body pre {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.06);
  overflow-x: auto;
}

.markdown-body pre code {
  padding: 0;
  background: transparent;
  font-size: 12px;
}

.markdown-body blockquote {
  margin: 8px 0;
  padding: 2px 12px;
  border-left: 3px solid rgba(99, 102, 241, 0.5);
  opacity: 0.85;
}

.markdown-body hr {
  margin: 12px 0;
  border: none;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.markdown-body table {
  width: 100%;
  margin: 10px 0;
  border-collapse: collapse;
  font-size: 12px;
}

.markdown-body th,
.markdown-body td {
  padding: 6px 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
}

.markdown-body th {
  background: rgba(148, 163, 184, 0.14);
  font-weight: 600;
}

.markdown-body img {
  max-width: 100%;
  border-radius: 6px;
}

.dark .markdown-body a {
  color: #a5b4fc;
}

.dark .markdown-body pre {
  background: rgba(255, 255, 255, 0.06);
}

.dark .markdown-body hr {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.dark .markdown-body th,
.dark .markdown-body td {
  border-color: rgba(255, 255, 255, 0.14);
}

.dark .markdown-body th {
  background: rgba(255, 255, 255, 0.08);
}

/* 细滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background: rgba(100, 116, 139, 0.35);
}

::-webkit-scrollbar-track {
  background: transparent;
}