/* ============================================================
   Apple 风格设计系统
   纯净黑白双主题 · SF Pro 字体栈 · 大留白 · 毛玻璃吸顶导航
   主题默认跟随系统；手动切换经 [data-theme="light"|"dark"] 持久化。
   ============================================================ */
:root {
  /* 浅色（Apple 风主基调） */
  --bg:#ffffff; --panel:#f5f5f7; --panel-2:#ffffff; --border:#d2d2d7;
  --text:#1d1d1f; --muted:#6e6e73; --accent:#0071e3; --accent-hover:#0077ed;
  --accent-text:#0071e3; --accent-weak:rgba(0,113,227,.10); --accent-border:rgba(0,113,227,.35);
  --brand:#0071e3; --new:#34c759; --new-weak:rgba(52,199,89,.12); --new-border:rgba(52,199,89,.45); --new-text:#248a3d;
  --danger:#ff3b30; --footer-bg:#f5f5f7;
  --nav-bg:rgba(251,251,253,.72); --nav-border:rgba(0,0,0,.08);
  --shadow:0 1px 3px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05); --shadow-lg:0 12px 40px rgba(0,0,0,.12); --radius:18px; --radius-sm:12px;
}
/* 系统偏好为深色，且用户未强制浅色时 → 深色 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#000000; --panel:#1d1d1f; --panel-2:#000000; --border:#424245;
    --text:#f5f5f7; --muted:#86868b; --accent:#2997ff; --accent-hover:#2997ff;
    --accent-text:#2997ff; --accent-weak:rgba(41,151,255,.16); --accent-border:rgba(41,151,255,.45);
    --brand:#2997ff; --new:#30d158; --new-weak:rgba(48,209,88,.14); --new-border:rgba(48,209,88,.5); --new-text:#30d158;
    --danger:#ff453a; --footer-bg:#1d1d1f;
    --nav-bg:rgba(22,22,23,.72); --nav-border:rgba(255,255,255,.10);
    --shadow:0 1px 3px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4); --shadow-lg:0 12px 40px rgba(0,0,0,.55);
  }
}
/* 手动强制浅色（即使系统为深色） */
:root[data-theme="light"] {
  --bg:#ffffff; --panel:#f5f5f7; --panel-2:#ffffff; --border:#d2d2d7;
  --text:#1d1d1f; --muted:#6e6e73; --accent:#0071e3; --accent-hover:#0077ed;
  --accent-text:#0071e3; --accent-weak:rgba(0,113,227,.10); --accent-border:rgba(0,113,227,.35);
  --brand:#0071e3; --new:#34c759; --new-weak:rgba(52,199,89,.12); --new-border:rgba(52,199,89,.45); --new-text:#248a3d;
  --danger:#ff3b30; --footer-bg:#f5f5f7;
  --nav-bg:rgba(251,251,253,.72); --nav-border:rgba(0,0,0,.08);
  --shadow:0 1px 3px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05); --shadow-lg:0 12px 40px rgba(0,0,0,.12);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--text);
  font-size:17px; line-height:1.47;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.01em;
  transition:background .4s ease,color .4s ease;
}

/* ===== 顶部导航：毛玻璃吸顶（Apple global nav 风） ===== */
header {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  padding:.55rem 1.6rem;
  min-height:52px;
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--nav-border);
}
.htitles { display:flex; align-items:center; gap:.6rem; min-width:0; }
header h1 { font-size:1.05rem; margin:0; font-weight:600; letter-spacing:-0.02em; }
header span.sub { color:var(--muted); font-size:.82rem; }
.nav { display:flex; gap:.2rem; align-items:center; flex:1 1 auto; justify-content:center; flex-wrap:wrap; }
.navitem {
  color:var(--muted); text-decoration:none; font-size:.95rem; font-weight:400;
  padding:.4rem .8rem; border-radius:980px; border:1px solid transparent;
  white-space:nowrap; transition:color .2s ease,background .2s ease;
}
.navitem:hover { color:var(--text); }
.navitem.active { color:var(--accent); font-weight:600; }
.userbar { display:flex; align-items:center; gap:.6rem; font-size:.9rem; color:var(--muted); flex:0 0 auto; }
.userbar .uavatar { font-size:1rem; }
.userbar .uname { color:var(--text); font-weight:500; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.userbar .uname.clickable { cursor:pointer; color:var(--accent); }
.userbar .uname.clickable:hover { text-decoration:underline; }
.btn-logout {
  background:transparent; color:var(--muted); border:1px solid var(--border);
  padding:.35rem .8rem; font-size:.82rem; font-weight:400; border-radius:980px; transition:.2s ease;
}
.btn-logout:hover { color:var(--text); border-color:var(--accent); }

/* 品牌字标（Apple 风：克制单色字标，由 common.js 注入 .htitles 前） */
.brandmark {
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:600; font-size:1.05rem; letter-spacing:-0.02em; color:var(--text);
}
.brandmark .bm-dot { width:18px; height:18px; border-radius:5px; background:var(--accent); display:inline-block; }

/* 主题切换浮动按钮 */
.theme-toggle {
  position:fixed; right:20px; bottom:20px; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--nav-border); background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  color:var(--text); font-size:1.1rem; cursor:pointer; z-index:60;
  display:flex; align-items:center; justify-content:center; transition:.2s ease;
}
.theme-toggle:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* ===== 通用布局 ===== */
.layout { display:grid; grid-template-columns:440px 1fr; gap:0; min-height:calc(100vh - 52px); }
.left { border-right:1px solid var(--border); padding:2rem 1.8rem; display:flex; flex-direction:column; gap:1.1rem; overflow:auto; max-height:calc(100vh - 52px); }
.right { overflow:auto; background:var(--bg); min-height:300px; }

.page { max-width:980px; margin:0 auto; padding:3rem 1.4rem 5rem; }
.page h2.ptitle { font-size:2rem; font-weight:600; letter-spacing:-0.02em; margin:0 0 .4rem; }
.page .psub { color:var(--muted); font-size:1.05rem; margin:0 0 2rem; }

label { font-size:.9rem; color:var(--muted); }
input, textarea, select {
  width:100%; background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  border-radius:var(--radius-sm); padding:.7rem .85rem; font-size:1rem; font-family:inherit;
  outline:none; transition:border-color .2s ease,box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-weak); }
select { cursor:pointer; }
textarea { min-height:160px; resize:vertical; line-height:1.5; }
button {
  background:var(--accent); color:#fff; border:none; border-radius:980px;
  padding:.7rem 1.5rem; font-size:1rem; font-weight:500; cursor:pointer;
  letter-spacing:-0.01em; transition:background .2s ease,transform .1s ease;
}
button:hover { background:var(--accent-hover); }
button:active { transform:scale(.98); }
button:disabled { opacity:.45; cursor:not-allowed; }
.btn-dl { background:transparent; color:var(--accent); border:1px solid var(--accent); padding:.5rem 1.1rem; font-size:.9rem; border-radius:980px; }
.btn-dl:disabled { opacity:.45; cursor:not-allowed; }
#dlbar { display:none; gap:.6rem; }
.hint { font-size:.85rem; color:var(--muted); line-height:1.6; }
#status { font-size:.9rem; color:var(--muted); min-height:1.2rem; }
.qf-box { font-size:.88rem; border-radius:var(--radius-sm); padding:.7rem .9rem; margin-bottom:.7rem; line-height:1.55; }
.qf-box.ok { background:rgba(52,199,89,.12); border:1px solid rgba(52,199,89,.4); color:#248a3d; }
.qf-box.err { background:rgba(255,59,48,.10); border:1px solid rgba(255,59,48,.4); color:#ff453a; }
.qf-box.off { background:rgba(134,134,139,.10); border:1px solid var(--border); color:var(--muted); }
.qf-box b { font-weight:600; }
iframe { width:100%; height:100%; border:none; }
iframe.report { min-height:600px; background:#fff; }
.empty { display:flex; align-items:center; justify-content:center; height:100%; min-height:300px; color:var(--muted); font-size:1rem; }
.spinner { display:inline-block; width:14px; height:14px; border:2px solid #fff; border-top-color:transparent; border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; margin-right:.4rem; }
@keyframes spin { to { transform:rotate(360deg); } }
#drop { border:1.5px dashed var(--border); border-radius:var(--radius-sm); padding:1.4rem; text-align:center; color:var(--muted); font-size:.9rem; cursor:pointer; transition:.2s ease; }
#drop.drag { border-color:var(--accent); color:var(--text); background:var(--accent-weak); }
#filelist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
#filelist li { display:flex; justify-content:space-between; align-items:center; gap:.6rem; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.55rem .8rem; font-size:.88rem; }
#filelist .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#filelist .del { color:var(--muted); cursor:pointer; flex:0 0 auto; }
#filelist .del:hover { color:var(--danger); }

/* ===== 管理面板 / 卡片 ===== */
.panel-block { border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem; margin-bottom:1.4rem; background:var(--panel); }
.panel-block > .ahead { display:flex; justify-content:space-between; align-items:center; margin-bottom:.7rem; gap:.6rem; flex-wrap:wrap; }
.panel-block .ahead strong { font-size:1.15rem; font-weight:600; letter-spacing:-0.02em; }
#userlist, #codeList, #whlist, #batchList { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
#userlist li, #codeList > div, #whlist li { display:flex; gap:.5rem; align-items:center; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.6rem .9rem; font-size:.9rem; flex-wrap:wrap; }
#userlist li .un { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#userlist li input { flex:1; }
.row2 { display:flex; gap:.6rem; }
.row2 > * { flex:1; }
.codecard { background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.8rem; margin-bottom:.7rem; font-size:.88rem; transition:.15s ease; }
.codecard .top { display:flex; justify-content:space-between; gap:.5rem; align-items:center; }
.codecard .code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:600; letter-spacing:.5px; }
.codecard .meta { color:var(--muted); margin:.4rem 0; line-height:1.6; }
.codecard .acts { display:flex; gap:.5rem; flex-wrap:wrap; }
.tag { display:inline-block; background:var(--accent-weak); border:1px solid var(--accent-border); color:var(--accent-text); border-radius:980px; padding:.1rem .6rem; font-size:.76rem; margin-right:.3rem; }
.tag.used { background:rgba(52,199,89,.14); border-color:rgba(52,199,89,.4); color:#248a3d; }
.tag.disabled { background:rgba(134,134,139,.14); border-color:var(--border); color:var(--muted); }
.codecard.newcode { border-color:var(--new-border); background:var(--new-weak); box-shadow:0 0 0 1px var(--new-border) inset; }
.codecard.newcode .code { color:var(--new-text); }
.tag.new { background:var(--new-weak); border-color:var(--new-border); color:var(--new-text); font-weight:600; }

/* ===== 认证 / 资料弹层（Apple 风居中卡片） ===== */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; z-index:50; }
.overlay.show { display:flex; }
.modal { position:relative; width:min(420px,92vw); max-height:90vh; overflow:auto; background:var(--panel-2); border:1px solid var(--border); border-radius:22px; padding:2rem; box-shadow:var(--shadow-lg); }
.modal h2 { margin:0 0 .3rem; font-size:1.6rem; font-weight:600; letter-spacing:-0.02em; }
.modal .sub { color:var(--muted); font-size:.95rem; margin:0 0 1.4rem; }
.modal label { display:block; margin:.9rem 0 .35rem; }
.modal .msg { font-size:.88rem; margin-top:.8rem; min-height:1rem; }
.modal .msg.err { color:var(--danger); }
.modal .msg.ok { color:var(--new-text); }
.modal .tabs { display:flex; gap:.5rem; margin-bottom:1.2rem; }
.modal .tabs button { background:var(--panel); color:var(--muted); border:1px solid var(--border); flex:1; border-radius:980px; }
.modal .tabs button.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.linkbtn { background:transparent; color:var(--accent); border:none; cursor:pointer; font-size:.9rem; padding:.2rem; }
.linkbtn:hover { text-decoration:underline; }
.modal-close { position:absolute; top:.8rem; right:1rem; width:30px; height:30px; border:none; border-radius:50%; background:transparent; color:var(--muted); font-size:1.4rem; line-height:1; cursor:pointer; transition:.15s ease; }
.modal-close:hover { background:rgba(134,134,139,.18); color:var(--text); }
.auth-foot { text-align:center; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--border); }
.auth-foot .linkbtn { font-size:.92rem; opacity:.95; }

/* 注册需邀请码提示 */
.reg-note { font-size:.85rem; color:#c45500; background:rgba(255,149,0,.10); border:1px solid rgba(255,149,0,.35); border-radius:var(--radius-sm); padding:.6rem .8rem; margin-bottom:.5rem; line-height:1.55; }

/* ===== 全站页脚 ===== */
.site-footer { border-top:1px solid var(--border); padding:1.4rem 1.4rem 2rem; text-align:center; color:var(--muted); font-size:.78rem; line-height:1.6; background:var(--footer-bg); margin-top:3rem; }
.site-footer a { color:var(--muted); text-decoration:none; }
.site-footer a:hover { color:var(--accent); }
.site-footer .beian-row { display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.site-footer .gongan-beian { display:inline-flex; align-items:center; gap:.25rem; }
.site-footer .gongan-logo { height:13px; width:auto; vertical-align:middle; }
.home-beian { border-top:1px solid var(--border); padding:1.4rem 1.4rem 2rem; text-align:center; color:var(--muted); font-size:.78rem; line-height:1.7; background:var(--footer-bg); margin-top:3rem; display:flex; flex-direction:column; gap:.4rem; align-items:center; }
.home-beian .beian-row { display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.home-beian .beian-label { margin:0 .2rem; }
.home-beian .beian-no { color:var(--muted); text-decoration:none; }
.home-beian .beian-no:hover { color:var(--accent); }

/* ===== Apple 风首页组件 ===== */
.home-hero { max-width:980px; margin:0 auto; padding:6rem 1.4rem 4rem; text-align:center; }
.home-hero h1 { font-size:clamp(2.4rem,5.4vw,3.6rem); font-weight:600; letter-spacing:-0.03em; line-height:1.08; margin:0 0 1.1rem; }
.home-hero .sub { color:var(--muted); font-size:clamp(1.05rem,2.2vw,1.35rem); font-weight:400; letter-spacing:-0.01em; margin:0 auto 2rem; max-width:640px; }
.home-hero .cta { display:flex; gap:1.4rem; justify-content:center; align-items:center; flex-wrap:wrap; }
.home-hero .cta .text-link { color:var(--accent); text-decoration:none; font-size:1.05rem; }
.home-hero .cta .text-link:hover { text-decoration:underline; }
.home-section { max-width:980px; margin:0 auto; padding:3rem 1.4rem; }
.home-section > .sec-head { text-align:center; margin-bottom:2.4rem; }
.home-section > .sec-head h2 { font-size:clamp(1.8rem,3.6vw,2.4rem); font-weight:600; letter-spacing:-0.02em; margin:0 0 .6rem; }
.home-section > .sec-head p { color:var(--muted); font-size:1.05rem; margin:0; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.4rem; }
.feature-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem; transition:transform .25s ease,box-shadow .25s ease; }
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.feature-card .fc-ico { font-size:1.8rem; margin-bottom:.8rem; }
.feature-card h3 { font-size:1.2rem; font-weight:600; letter-spacing:-0.02em; margin:0 0 .5rem; }
.feature-card p { color:var(--muted); font-size:.95rem; line-height:1.55; margin:0; }
/* 首页工作台入口按钮组 */
.home-cta-row { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem; }

/* 批量 / 我的报告 列表项 */
#batchList li, #myReports li { background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.6rem .9rem; font-size:.88rem; }
#myReports { list-style:none; margin:.4rem 0 0; padding:0; display:none; flex-direction:column; gap:.5rem; }

/* 退出超级视角按钮（Apple 风蓝色胶囊） */
.btn-viewas-exit { background:var(--accent); color:#fff; border:1px solid var(--accent); padding:.35rem .9rem; font-size:.82rem; font-weight:500; border-radius:980px; cursor:pointer; transition:.2s ease; }
.btn-viewas-exit:hover { background:var(--accent-hover); }
