/* ============================================================
   DPDNS 基础样式与重置
   ============================================================ */

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

html {
  font-size: var(--fs-md); /* 16px 基准，文字大小档可改根字号 */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

[data-font="small"]  { font-size: 14px; }
[data-font="standard"] { font-size: 16px; }
[data-font="large"]  { font-size: 18px; }
[data-font="xlarge"] { font-size: 20px; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

h1,h2,h3,h4,h5,h6 { font-weight: 600; line-height: 1.3; color: var(--text-primary); }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

:focus-visible {
  outline: 2px solid var(--dpdns-azure);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--dpdns-azure); color: #fff; }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); border: 2px solid var(--bg-app); }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* —— 实用类 —— */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-err { color: var(--c-danger); font-family: var(--font-mono); font-size: var(--fs-xs); }
.text-mono { font-family: var(--font-mono); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-center { text-align: center; }
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.fade-in { animation: fadeIn var(--dur) var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.slide-up { animation: slideUp var(--dur-slow) var(--ease-out); }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.slide-down { animation: slideDown var(--dur) var(--ease-out); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.scale-in { animation: scaleIn var(--dur-slow) var(--ease-spring); }
@keyframes scaleIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* 加载骨架屏脉冲 */
.skeleton {
  background: linear-gradient(90deg, var(--bg-surface-alt) 25%, var(--bg-hover) 37%, var(--bg-surface-alt) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* 旋转加载 */
.spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 涟漪（按钮） */
.ripple { position: relative; overflow: hidden; }
.ripple::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,.35), transparent 60%);
  opacity: 0; transition: opacity var(--dur-fast);
}
.ripple:active::after { opacity: 1; transition: none; }

/* 官方水印 */
.official-watermark {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg, transparent, transparent 60px,
    rgba(1,65,144,.04) 60px, rgba(1,65,144,.04) 120px
  );
}