/* CyanPages —— 纯白灰配色 + 浅色/深色主题（跟随系统或手动切换） */
:root {
  --bg:#fafafa; --bg-soft:#ffffff; --card:#ffffff; --card-2:#f6f6f6;
  --text:#18181b; --text-2:#71717a; --line:#e4e4e7; --line-2:#f0f0f1;
  --accent:#18181b; --accent-text:#ffffff;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --radius:12px;
}
html[data-theme="dark"] {
  --bg:#0f0f10; --bg-soft:#141416; --card:#18181a; --card-2:#1d1d20;
  --text:#f4f4f5; --text-2:#a1a1aa; --line:#2a2a2e; --line-2:#232326;
  --accent:#f4f4f5; --accent-text:#18181b;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; }
img, svg, video, canvas { max-width:100%; height:auto; }
/* 长 URL / 邮箱等不要撑破卡片 */
.muted, .url-box code, td, .mono { overflow-wrap:anywhere; }
body {
  background:var(--bg); color:var(--text); min-height:100vh; display:flex; flex-direction:column;
  font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px; line-height:1.6;
}
a { color:var(--text); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---------- 顶栏 ---------- */
.topbar {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:18px;
  padding:12px 22px; background:color-mix(in srgb, var(--bg-soft) 86%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text); text-decoration:none; }
.brand:hover { text-decoration:none; }
.brand-mark {
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; font-weight:800;
  background:var(--accent); color:var(--accent-text); box-shadow:var(--shadow-sm);
}
.brand-name { font-size:17px; letter-spacing:.2px; }
.brand-sub { font-size:12px; color:var(--text-2); font-weight:400; }
.topnav { margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.topnav a { color:var(--text-2); font-size:14px; padding:6px 2px; }
.topnav a:hover { color:var(--text); text-decoration:none; }
.topnav a.active { color:var(--text); font-weight:600; }
.theme-btn {
  width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--card);
  color:var(--text); cursor:pointer; display:grid; place-items:center; transition:.2s;
}
.theme-btn:hover { border-color:var(--text-2); }
.theme-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
html[data-theme="light"] .ico-moon { display:none; }
html[data-theme="dark"] .ico-sun { display:none; }
.user-chip {
  font-size:13px; color:var(--text-2); border:1px solid var(--line); border-radius:999px; padding:4px 12px;
  background:var(--card);
}

/* ---------- 通用 ---------- */
.view { flex:1; width:100%; max-width:1080px; margin:0 auto; padding:26px 22px 60px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; }
.card + .card { margin-top:16px; }
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
h1 { font-size:26px; margin:0 0 10px; letter-spacing:.2px; }
h2 { font-size:19px; margin:0 0 12px; }
h3 { font-size:16px; margin:0 0 8px; }
.muted { color:var(--text-2); font-size:13.5px; }
.center { text-align:center; }
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spacer { flex:1; }
code, .mono { font-family:ui-monospace,Menlo,Consolas,monospace; }
code { background:var(--card-2); border:1px solid var(--line-2); border-radius:6px; padding:1px 6px; font-size:13px; }

/* ---------- 按钮 ---------- */
.btn {
  border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:10px;
  padding:9px 16px; font-size:14px; cursor:pointer; transition:.18s; font-family:inherit;
}
.btn:hover { border-color:var(--text-2); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn.btn-primary, a.btn-primary, .btn-primary {
  /* 注意：这是 <a> 也会用的按钮，必须用自身配色，别被 a / html[data-theme=dark] a 之类规则顶掉 */
  background:var(--accent); color:var(--accent-text); border-color:transparent;
  box-shadow:var(--shadow-sm); font-weight:600;
}
.btn-primary:hover { opacity:.88; }
.btn-ghost { background:transparent; }
.btn-danger { color:var(--text); border-color:color-mix(in srgb,var(--text) 40%, var(--line)); background:transparent; }
.btn-sm { padding:5px 11px; font-size:13px; border-radius:8px; }

/* ---------- 表单 ---------- */
label.field { display:block; margin-bottom:14px; }
label.field > span { display:block; font-size:13px; color:var(--text-2); margin-bottom:6px; }
input[type=text],input[type=password],input[type=email],textarea,select {
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--card-2); color:var(--text); font-size:14px; font-family:inherit; outline:none; transition:.15s;
}
input:focus,textarea:focus,select:focus { border-color:var(--text-2); box-shadow:0 0 0 3px color-mix(in srgb,var(--text-2) 16%, transparent); }
textarea { min-height:78px; resize:vertical; }
.hint { font-size:12px; color:var(--text-2); margin-top:5px; }
.err-text { color:var(--text); font-size:13px; font-weight:600; }
.captcha-row { display:flex; gap:10px; align-items:center; }
.captcha-row img,.captcha-row svg { border:1px solid var(--line); border-radius:10px; cursor:pointer; height:50px; background:#fff; }
.code-row { display:flex; gap:10px; }
.code-row input { flex:1; }

/* ---------- 特性/规范 ---------- */
.hero { padding:34px 0 8px; text-align:center; }
.hero h1 { font-size:34px; margin-bottom:12px; }
.hero p { color:var(--text-2); max-width:640px; margin:0 auto 18px; }
.feature { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); }
.feature .idx { font-size:12px; color:var(--text-2); letter-spacing:.12em; margin-bottom:8px; }
/* 卡片图标：单色线性 SVG，不用 emoji */
.feature .ico {
  width:34px; height:34px; border:1px solid var(--line); border-radius:9px; margin-bottom:10px;
  display:grid; place-items:center; color:var(--text-2); background:var(--card-2);
}
.feature .ico svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.rules li { margin-bottom:8px; }

/* ---------- project 列表 ---------- */
.proj { border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--card-2); }
.proj + .proj { margin-top:10px; }
.proj-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.proj-name { font-weight:600; }
.badge { font-size:12px; padding:2px 9px; border-radius:999px; border:1px solid var(--line); color:var(--text-2); background:var(--card-2); }
.badge.pending { color:var(--text-2); border-style:dashed; }
.badge.approved { color:var(--text); border-color:var(--text); }
.badge.rejected { color:var(--text-2); text-decoration:line-through; }
.badge.empty { color:var(--text-2); }
.url-box { display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.url-box code { flex:1; min-width:220px; overflow:auto; white-space:nowrap; }
.drop {
  border:2px dashed var(--line); border-radius:12px; padding:22px; text-align:center; color:var(--text-2);
  background:var(--card-2); cursor:pointer; transition:.18s;
}
.drop.over { border-color:var(--text-2); background:var(--card-2); }
.progress { height:6px; background:var(--line-2); border-radius:99px; overflow:hidden; margin-top:10px; }
.progress > i { display:block; height:100%; width:0; background:var(--text); transition:width .2s; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { text-align:left; padding:9px 8px; border-bottom:1px solid var(--line-2); vertical-align:top; }
th { color:var(--text-2); font-weight:600; font-size:13px; }
.filelist { max-height:170px; overflow:auto; font-size:12.5px; color:var(--text-2); font-family:ui-monospace,monospace; }

/* ---------- toast ---------- */
.toast {
  position:fixed; left:50%; bottom:34px; transform:translate(-50%,20px); opacity:0; pointer-events:none;
  background:var(--text); color:var(--bg); padding:11px 20px; border-radius:12px; font-size:14px; z-index:50;
  box-shadow:var(--shadow); transition:.25s; max-width:min(90vw,520px);
}
html[data-theme="dark"] .toast { background:var(--text); color:var(--bg); }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.err { background:var(--text); color:var(--bg); font-weight:600; }

/* ---------- 页面公告 ---------- */
.announce-card { margin-bottom:16px; }
.announce-ico {
  width:30px; height:30px; border:1px solid var(--line); border-radius:9px; display:grid; place-items:center;
  color:var(--text-2); background:var(--card-2); flex:none;
}
.announce-ico svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.announce-badge { border-style:solid; }
.announce-body { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:8px; font-size:14px; line-height:1.7; }
.announce-item { border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--card-2); }
.announce-item + .announce-item { margin-top:10px; }
.announce-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.announce-head .muted { margin-left:auto; }

/* ---------- 兑换码 ---------- */
input.mono { font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:1px; }

.footer {
  border-top:1px solid var(--line); padding:18px 22px; text-align:center; color:var(--text-2); font-size:13px;
  background:color-mix(in srgb, var(--bg-soft) 70%, transparent);
}
.footer-links { margin-top:6px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hidden { display:none !important; }

/* ---------- 账号安全页 ---------- */
.code-row input.mono, input.mono {
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; letter-spacing:.5px;
}
.recovery-box {
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px; line-height:2;
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--card-2); margin-top:10px;
}
.row > input[type=text], .row > input[type=password], .row > input[type=email] { width:auto; flex:1; min-width:170px; }
label.row { display:flex; }
input[type=checkbox] { accent-color:var(--text); }
.danger-card { border-color:var(--line); }

/* ==========================================================================
   移动端适配（2026-10-06）
   之前只按桌面宽度写，手机上出现的问题与对应处理：
     · 顶栏品牌副标题 + 十来个导航项挤成一行 → 窄屏隐藏副标题、导航换行、收紧间距
     · grid 最小列宽 300px 在 360px 屏上溢出 → 窄屏强制单列
     · iOS 上 input 字号 <16px 会自动放大页面 → 移动端表单字号提到 16px
     · 表格（订单/文件列表）比屏幕宽 → 卡片内横向滚动，不撑破页面
     · 触摸目标偏小、刘海屏/小白条遮挡 → 加大按钮内边距 + safe-area 内边距
   ========================================================================== */

/* 触屏设备：只放大触摸目标，不改布局 */
@media (hover: none) {
  .btn { padding:11px 18px; }
  .btn-sm { padding:8px 12px; }
  .topnav a { padding:8px 4px; }
}

@media (max-width: 720px) {
  /* 页面留白 */
  .view { padding:16px 14px 44px; }
  .topbar { padding:10px 14px; gap:10px; }
  .brand-sub { display:none; }              /* 窄屏不显示域名后缀 */
  .brand-name { font-size:16px; }
  .topnav { gap:12px; row-gap:6px; font-size:14px; }
  .user-chip { font-size:12px; padding:3px 10px; }

  /* 标题与卡片 */
  h1 { font-size:21px; }
  h2 { font-size:17px; }
  h3 { font-size:15px; }
  .hero { padding:22px 0 4px; }
  .hero h1 { font-size:24px; line-height:1.35; }
  .hero p { font-size:14px; }
  .card { padding:16px; border-radius:12px; overflow-x:auto; }  /* 宽表格在卡片内滚动 */
  .card + .card { margin-top:12px; }

  /* 栅格一律单列，避免最小列宽撑破屏幕 */
  .grid, .grid-2, .grid-3 { grid-template-columns:1fr; gap:12px; }
  .feature { padding:15px; }

  /* 表单：字号必须 ≥16px，否则 iOS 聚焦时会自动放大整页 */
  input[type=text], input[type=password], input[type=email], textarea, select { font-size:16px; padding:11px 12px; }
  label.field > span { font-size:12.5px; }
  .code-row { flex-wrap:wrap; }
  .code-row input { flex:1 1 140px; }
  .code-row .btn { flex:1 1 100%; }
  .captcha-row { flex-wrap:wrap; }
  .captcha-row input { max-width:none !important; flex:1 1 140px; }

  /* 项目卡片 */
  .proj { padding:12px; }
  .proj-head { gap:8px; }
  .proj-name { font-size:15px; }
  .url-box { gap:8px; }
  .url-box code { flex:1 1 100%; min-width:0; }
  .url-box .btn { flex:1 1 auto; }
  .row { gap:8px; row-gap:8px; }

  /* 表格 */
  table { font-size:12.5px; }
  th, td { padding:7px 5px; }
  .filelist { max-height:140px; font-size:12px; }

  /* 页脚与 toast */
  .footer { padding:14px 14px calc(14px + env(safe-area-inset-bottom)); font-size:12px; }
  .footer-links { gap:10px; row-gap:6px; }
  .toast { left:12px; right:12px; bottom:18px; transform:translateY(16px); max-width:none; text-align:center; }
  .toast.show { transform:translateY(0); }
}

@media (max-width: 400px) {
  .view { padding:14px 11px 40px; }
  .card { padding:14px; }
  h1 { font-size:19px; }
  .hero h1 { font-size:21px; }
  .brand-name { font-size:15px; }
  .topnav { gap:10px; font-size:13.5px; }
  table { font-size:12px; }
  th, td { padding:6px 4px; }
}

/* 刘海屏 / 圆角屏：顶部也留安全区 */
@supports (padding: env(safe-area-inset-top)) {
  .topbar { padding-top:max(10px, env(safe-area-inset-top)); }
}

/* 尊重系统"减少动画"设置 */
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}

/* 顶栏品牌标记改用真实图标（2026-10-06） */
.brand-mark { overflow:hidden; padding:0; background:transparent; }
.brand-mark img { width:100%; height:100%; object-fit:cover; display:block; border-radius:9px; }