/* base.css — 设计变量（CONTRACT v2：奶油白 + 暖橘，亮色默认） */

:root{
  --radius:16px;
  /* 纯系统字体栈：iPhone(PingFang) / Windows(Segoe UI + 微软雅黑) / Android(Noto Sans CJK) 全覆盖；
     末尾三个 emoji 字体保证表情按系统原生样式渲染（不依赖任何自定义字体） */
  --font:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
  /* 亮色（默认主题） */
  --bg:#faf7f2;
  --glow1:#ffe0c2;
  --glow2:#ffc9a3;
  --surface:#ffffff;
  --surface-2:#f3ece2;
  --text:#201a15;
  --text-dim:#8a7f72;
  --border:rgba(60,40,20,.10);
  --accent:#f08a3c;
  --accent-2:#e2703a;
  --danger:#d94b3f;
  /* 追加的辅助变量（契约未列出，仅用于统一阴影/毛玻璃/焦点环/按钮文字色） */
  --ink:#25180e;
  --veil:rgba(250,247,242,.86);
  --shadow:0 18px 44px rgba(82,54,28,.14);
  --ring:rgba(240,138,60,.22);
  color-scheme:light;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#141110;
  --glow1:#3a2a1c;
  --glow2:#4a2d1c;
  --surface:#1e1a17;
  --surface-2:#262019;
  --text:#f6f0e8;
  --text-dim:#a3968a;
  --border:rgba(255,255,255,.10);
  --accent:#ff9b52;
  --accent-2:#f4793b;
  --danger:#ff7a6b;
  --ink:#22150b;
  --veil:rgba(20,17,16,.82);
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --ring:rgba(255,155,82,.2);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;   /* 换系统字体后中文 x-height 更大，1.55 偏挤，放宽到 1.65 */
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(46% 36% at 8% 0%, var(--glow1) 0%, transparent 64%),
    radial-gradient(44% 34% at 96% 6%, var(--glow2) 0%, transparent 64%);
  opacity:.9;
}
html[data-theme="dark"] body::before{ opacity:.55; }

img,video{ max-width:100%; display:block; }
a{ color:var(--accent); text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3,h4,p{ margin:0; }
/* 标题用 600 字重 + -0.01em 字距：系统中文（苹方 / 微软雅黑）在 600 下既醒目又不臃肿 */
h1,h2,h3,h4{ font-weight:600; letter-spacing:-0.01em; }
ul,ol{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.wrap{ width:100%; max-width:1080px; margin:0 auto; padding:0 16px; }

/* 按钮 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 18px;
  border-radius:12px; border:1px solid var(--border);
  background:var(--surface); color:var(--text);
  font-size:15px; font-weight:600; line-height:1;
  cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, opacity .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{ border-color:var(--accent); }
.btn:active{ transform:translateY(1px); }
.btn[disabled],.btn.is-busy{ opacity:.62; cursor:progress; }
.btn-primary{
  border:0; color:var(--ink);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 24px rgba(224,114,58,.28);
}
.btn-primary:hover{ border:0; opacity:.94; }
.btn-ghost{ background:transparent; }
.btn-block{ width:100%; height:48px; font-size:16px; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:0 0 auto;
  border-radius:11px; border:1px solid var(--border);
  background:var(--surface); color:var(--text);
  cursor:pointer; transition:border-color .15s ease, color .15s ease;
}
.icon-btn:hover{ border-color:var(--accent); color:var(--accent); }

/* 表单 */
.field{ display:block; margin:0 0 14px; }
.field > span{ display:block; margin:0 0 6px; font-size:13px; color:var(--text-dim); font-weight:600; }
.input,.textarea,.select{
  width:100%; min-width:0;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:12px;
  padding:11px 13px; font:inherit; font-size:15px;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.textarea{ min-height:80px; resize:vertical; }
.input:focus,.textarea:focus,.select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }

/* 骨架 */
.skeleton{
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 37%,var(--surface-2) 63%);
  background-size:400% 100%;
  animation:pg-shimmer 1.3s ease-in-out infinite;
  border-radius:12px;
}
@keyframes pg-shimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* 空态 / 错误态 */
.empty{
  padding:34px 18px; text-align:center; color:var(--text-dim);
  border:1px dashed var(--border); border-radius:var(--radius);
  background:var(--surface); font-size:14px;
}
.empty strong{ display:block; color:var(--text); font-size:15px; margin-bottom:6px; }
.error-box{
  padding:16px 18px; border-radius:14px; font-size:14px;
  border:1px solid rgba(217,75,63,.36); background:rgba(217,75,63,.08); color:var(--danger);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.notice{
  padding:14px 16px; border-radius:14px; font-size:13.5px; color:var(--text-dim);
  border:1px dashed var(--border); background:var(--surface-2);
}

/* 徽标 */
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.2px;
  background:var(--surface-2); color:var(--text-dim); border:1px solid var(--border);
}

/* 主题切换：亮色显示月亮（切到暗色），暗色显示太阳 */
.theme-toggle .icon-moon{ display:block; }
.theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }

/* Toast */
.toast-wrap{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center;
  width:max-content; max-width:calc(100% - 32px);
  pointer-events:none;
}
.toast{
  padding:10px 16px; border-radius:12px; font-size:13px; font-weight:600;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); box-shadow:var(--shadow);
  animation:pg-toast-in .18s ease-out;
  max-width:100%; overflow-wrap:anywhere;
}
.toast.is-error{ border-color:rgba(217,75,63,.45); color:var(--danger); }
.toast.is-out{ opacity:0; transition:opacity .22s ease; }
@keyframes pg-toast-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* 抖动 */
@keyframes pg-shake{
  0%,100%{ transform:translateX(0) }
  15%{ transform:translateX(-9px) }
  30%{ transform:translateX(8px) }
  45%{ transform:translateX(-6px) }
  60%{ transform:translateX(5px) }
  80%{ transform:translateX(-3px) }
}
.shake{ animation:pg-shake .45s ease-in-out; }

.hidden{ display:none !important; }
/* 兜底：作者样式里的 display（block / grid / flex）会压过 [hidden] 的默认 display:none，
   凡是用 el.hidden = true 控制显隐的地方，这条规则保证它真的生效 */
[hidden]{ display:none !important; }
.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;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}