/* ==========================================================================
   Shiro Pro Custom Style (L5 Final)
   功能：毛玻璃质感 | 剧透模式 | 样式增强 | 屏蔽原生弹窗
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 核心变量定义 (Day/Dark)
   -------------------------------------------------------------------------- */
:root {
  /* 白天模式：白玉玻璃 */
  --sh-paper: rgba(255, 255, 255, 0.75) !important;
  --sh-bg: transparent !important;
  --sh-card: rgba(255, 255, 255, 0.75) !important;
  --sh-border: rgba(0, 0, 0, 0.08) !important;
  --glass-text: #18181b !important;
  /* 核心磨砂参数：20px 模糊 + 120% 饱和度 */
  --glass-blur: blur(20px) saturate(120%);
}

/* 深色模式适配 */
html[data-theme='dark'] {
  /* 夜间模式：锌灰玻璃 */
  --sh-paper: rgba(24, 24, 27, 0.65) !important;
  --sh-card: rgba(24, 24, 27, 0.65) !important;
  --sh-border: rgba(255, 255, 255, 0.08) !important;
  --glass-text: #f4f4f5 !important;
}

/* --------------------------------------------------------------------------
   2. 全局毛玻璃化 (Glassmorphism Application)
   -------------------------------------------------------------------------- */
.sh-card,
.shiro-main-content,
article,
aside section,
header,
.link-card,
.glass {
  background-color: var(--sh-paper) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 12px !important;
  
  /* === 核心修改：36px 豪华留白 === */
  padding: 36px !important;          /* 电脑端：36px 极宽边距 */
  box-sizing: border-box !important; /* 锁定盒模型，防止撑爆 */
  margin-bottom: 1.5rem !important;  /* 卡片垂直间距也稍微拉大 */
  
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* === 移动端适配 (重要) === */
/* 手机屏幕较窄，36px会太挤，自动缩小到 24px，保持美观 */
@media (max-width: 768px) {
  .sh-card,
  article,
  aside section,
  .link-card {
    padding: 24px !important; 
  }
}

body {
  color: var(--glass-text) !important;
}

h1, h2, h3, p, span, a {
  color: inherit !important;
}
/* --------------------------------------------------------------------------
   3. 实用功能增强 (Spoiler / KBD / Mark)
   -------------------------------------------------------------------------- */

/* 剧透黑幕模式 */
.spoiler {
  position: relative;
  transition: background 0.5s;
  text-decoration: none;
  border-radius: 4px;
  background-color: currentColor;
  color: transparent;
  padding: 0 4px;
  cursor: help;
}

html[data-theme='dark'] .spoiler {
  background-color: #737373;
}

.spoiler:hover {
  background-color: transparent;
  color: inherit;
}

/* 物理按键样式 (Ctrl+C) */
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid rgba(128, 128, 128, 0.2);
  background-color: rgba(240, 240, 240, 0.5);
  padding: 0 0.4em;
  font-family: monospace;
  font-size: 0.85em;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
  margin: 0 0.2em;
}

html[data-theme='dark'] kbd {
  background-color: rgba(60, 60, 60, 0.5);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

/* 呼吸感高亮 */
mark {
  background: transparent;
  background: linear-gradient(120deg, rgba(255, 215, 0, 0.4) 50%, transparent 50%) 110% 0 / 200% 100% no-repeat;
  background-position: 0 0;
  border-radius: 0.2em;
  padding: 0 0.2em;
  color: inherit;
  animation: markLoad 1s ease-out forwards;
}

html[data-theme='dark'] mark {
  background: linear-gradient(120deg, rgba(50, 205, 50, 0.4) 50%, transparent 50%) 110% 0 / 200% 100% no-repeat;
}

@keyframes markLoad {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

/* --------------------------------------------------------------------------
   4. 代码块增强 (Git Diff)
   -------------------------------------------------------------------------- */
pre .diff.add,
code .diff.add {
  background-color: rgba(34, 197, 94, 0.15) !important;
  display: block;
  margin: 0 -1em;
  padding: 0 1em;
  border-left: 3px solid #22c55e;
}

pre .diff.remove,
code .diff.remove {
  background-color: rgba(239, 68, 68, 0.15) !important;
  display: block;
  margin: 0 -1em;
  padding: 0 1em;
  border-left: 3px solid #ef4444;
}

/* --------------------------------------------------------------------------
   5. 关键修复：屏蔽“引用评论”弹窗 (防黑屏版)
   -------------------------------------------------------------------------- */
div[class*='absolute']:has(>button[data-event='selection-comment']) {
  display: none !important;
}