/* ================= 变量 & 基础 ================= */
:root{
  --bg:#070a0f;
  --card:rgba(255,255,255,.035);
  --card-2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);
  --fg:#e8eef6;
  --fg-2:#8d9aab;
  --fg-3:#5d6a7a;
  --acc:#3ee0a8;
  --acc-2:#4d8dff;
  --max:1160px;
  --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;color:var(--fg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(62,224,168,.16), transparent 62%),
    radial-gradient(820px 480px at 88% 2%,  rgba(77,141,255,.14), transparent 62%),
    radial-gradient(700px 600px at 50% 112%,rgba(62,224,168,.05), transparent 62%),
    var(--bg);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 85% 55% at 50% 0%,#000 15%,transparent 78%);
          mask-image:radial-gradient(ellipse 85% 55% at 50% 0%,#000 15%,transparent 78%);
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.2}
p{margin:0}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
main,header,footer{position:relative;z-index:1}

/* ================= 导航 ================= */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.is-scrolled{background:rgba(7,10,15,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:32px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px}
.nav__links{display:flex;gap:28px;margin-left:8px;font-size:14.5px;color:var(--fg-2)}
.nav__links a:hover{color:var(--fg)}
.nav__actions{margin-left:auto;display:flex;gap:10px}

/* ================= 按钮 ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:10px;font-size:14px;font-weight:600;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;font-family:inherit;
  transition:transform .18s,box-shadow .25s,background .2s,border-color .2s}
.btn--p{background:linear-gradient(135deg,#3ee0a8,#2fd0cf);color:#04140e;box-shadow:0 6px 22px -9px rgba(62,224,168,.85)}
.btn--p:hover{transform:translateY(-1px);box-shadow:0 12px 30px -10px rgba(62,224,168,1)}
.btn--g{border-color:var(--line-2);color:var(--fg);background:rgba(255,255,255,.03)}
.btn--g:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.btn--lg{padding:14px 28px;font-size:15px;border-radius:12px}

/* ================= Hero ================= */
.hero{padding:96px 0 80px}
.pill{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 10px;
  border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);
  font-size:13px;color:var(--fg-2);margin-bottom:28px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 0 rgba(62,224,168,.6);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(62,224,168,.55)}70%{box-shadow:0 0 0 9px rgba(62,224,168,0)}100%{box-shadow:0 0 0 0 rgba(62,224,168,0)}}
.hero h1{font-size:clamp(38px,6.2vw,68px);letter-spacing:-.035em}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,#3ee0a8 0%,#5aa9ff 55%,#a78bfa 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{margin-top:24px;font-size:17px;color:var(--fg-2);max-width:560px;line-height:1.75}
.hero__btns{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}

/* ================= 统计 ================= */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:72px;max-width:780px}
.stat{padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.stat__v{font-size:27px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#b9c6d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__k{font-size:12.5px;color:var(--fg-3);margin-top:3px}

/* ================= 区块 ================= */
.section{padding:76px 0}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.section__title{font-size:clamp(25px,3.4vw,34px);letter-spacing:-.03em}
.section__lead{margin-top:12px;color:var(--fg-2);max-width:600px;font-size:15.5px;line-height:1.7}

/* ================= 项目卡片 ================= */
.grid-projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(296px,1fr));gap:18px}
.pcard{position:relative;padding:24px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s,background .28s}
.pcard::before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .35s;
  background:radial-gradient(circle 340px at var(--mx,50%) var(--my,0%),rgba(62,224,168,.11),transparent 62%)}
.pcard:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--card-2)}
.pcard:hover::before{opacity:1}
.pcard__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.pcard__ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(62,224,168,.16),rgba(77,141,255,.14));
  border:1px solid rgba(62,224,168,.22)}
.badge{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px}
.badge--on{color:#3ee0a8;background:rgba(62,224,168,.11);border:1px solid rgba(62,224,168,.24)}
.badge--off{color:var(--fg-3);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.pcard h3{font-size:18.5px;margin-bottom:8px}
.pcard__d{font-size:14px;color:var(--fg-2);line-height:1.65;min-height:44px}
.pcard__meta{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 14px;font-size:12.5px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.bar{height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3ee0a8,#4d8dff);
  box-shadow:0 0 12px rgba(62,224,168,.5);transition:width 1.2s cubic-bezier(.2,.8,.3,1)}
.pcard__foot{display:flex;justify-content:space-between;margin-top:10px;font-size:12.5px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.pcard__foot b{color:var(--fg-2);font-weight:600}

/* ================= 流程 ================= */
.flow{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.flow__step{position:relative;padding:26px 24px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);transition:border-color .28s,transform .28s}
.flow__step:hover{border-color:var(--line-2);transform:translateY(-3px)}
.flow__n{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--acc);margin-bottom:14px}
.flow__step h3{font-size:17px;margin-bottom:9px}
.flow__step p{font-size:14px;color:var(--fg-2);line-height:1.7}

/* ================= 表格 ================= */
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.tbl th{font-size:12.5px;color:var(--fg-3);font-weight:600;letter-spacing:.02em;background:rgba(255,255,255,.015)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:rgba(255,255,255,.025)}
.tbl td.num{font-variant-numeric:tabular-nums;text-align:right}
.tbl .ok{color:var(--acc)}
.tbl .no{color:#ff6b6b}

/* ================= CTA ================= */
.cta{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
  padding:44px;border-radius:22px;border:1px solid rgba(62,224,168,.18);
  background:
    radial-gradient(600px 200px at 10% 0%,rgba(62,224,168,.13),transparent 70%),
    radial-gradient(600px 220px at 95% 100%,rgba(77,141,255,.13),transparent 70%),
    rgba(255,255,255,.025)}
.cta__title{font-size:clamp(23px,3vw,30px);letter-spacing:-.03em}
.cta__sub{margin-top:10px;color:var(--fg-2);font-size:15px}
.cta__actions{display:flex;gap:12px;flex-wrap:wrap}

/* ================= Footer ================= */
.footer{border-top:1px solid var(--line);padding:30px 0;margin-top:40px}
.footer__in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--fg-3)}
.footer a:hover{color:var(--fg-2)}

/* ================= 工具类 ================= */
.muted{color:var(--fg-3)}
.loading{padding:40px 0;text-align:center;color:var(--fg-3);font-size:14px}
.err{padding:18px 20px;border:1px solid rgba(255,107,107,.3);border-radius:12px;
  background:rgba(255,107,107,.07);color:#ffb3b3;font-size:14px}

/* ================= 入场动画 ================= */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ================= 响应式 ================= */
@media(max-width:860px){
  .nav__links{display:none}
  .stats{grid-template-columns:repeat(2,1fr);margin-top:52px}
  .flow{grid-template-columns:1fr}
  .cta{padding:32px 26px}
  .hero{padding:70px 0 56px}
  .tbl th,.tbl td{padding:11px 12px}
}
@media(max-width:520px){
  .wrap{padding:0 18px}
  .hero__btns .btn{flex:1}
  .nav__actions .btn--g{display:none}
}/* ================= 账号 / 登录页 ================= */
.nav__user{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:10px;
  background:rgba(62,224,168,.09);
  border:1px solid rgba(62,224,168,.22);
  color:var(--acc);font-size:13.5px;font-weight:600;
  max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.auth-section{
  min-height:calc(100vh - 66px - 92px);
  display:flex;align-items:center;justify-content:center;
  padding:60px 20px 80px;
}
.auth-card{
  width:100%;max-width:420px;
  padding:32px 30px 28px;
  border:1px solid var(--line);border-radius:20px;
  background:var(--card);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.7);
}
.auth-tabs{
  display:flex;gap:4px;margin-bottom:24px;
  padding:4px;border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
}
.auth-tab{
  flex:1;padding:9px 0;border:0;border-radius:9px;
  background:transparent;color:var(--fg-2);
  font:600 14px/1 inherit;font-family:inherit;
  cursor:pointer;transition:background .2s,color .2s;
}
.auth-tab:hover{color:var(--fg)}
.auth-tab.is-active{
  background:linear-gradient(135deg,rgba(62,224,168,.18),rgba(77,141,255,.14));
  color:var(--fg);
  box-shadow:inset 0 0 0 1px rgba(62,224,168,.22);
}

.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-field{display:flex;flex-direction:column;gap:6px}
.auth-field > span{
  font-size:13px;font-weight:600;color:var(--fg-2);letter-spacing:.01em;
}
.auth-field > input{
  width:100%;padding:12px 14px;
  border-radius:11px;
  border:1px solid var(--line-2);
  background:rgba(0,0,0,.22);
  color:var(--fg);font:15px/1.4 inherit;font-family:inherit;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.auth-field > input:focus{
  outline:none;
  border-color:rgba(62,224,168,.6);
  background:rgba(0,0,0,.32);
  box-shadow:0 0 0 3px rgba(62,224,168,.13);
}
.auth-field > em{
  font-style:normal;font-size:12px;color:var(--fg-3);
}
.auth-submit{width:100%;margin-top:4px}

.auth-msg{
  min-height:20px;margin-top:14px;
  font-size:13.5px;text-align:center;color:var(--fg-3);
  transition:color .2s;
}
.auth-msg.is-ok {color:var(--acc)}
.auth-msg.is-err{color:#ff8a8a}
/* ============================================================
   手机端适配（后追加，覆盖前面的媒体查询）
   ============================================================ */
@media (max-width: 640px) {

  /* ---------- 导航栏 ---------- */
  .nav__in {
    height: 58px;
    gap: 8px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .brand { font-size: 15px; gap: 7px; }
  .brand svg { width: 22px; height: 22px; }
  .nav__links { display: none; }
  .nav__actions { gap: 6px; }
  .nav__actions .btn {
    padding: 7px 12px;
    font-size: 12.5px;
    border-radius: 8px;
    white-space: nowrap;
  }
  /* 关键修复：登录按钮不要隐藏 */
  .nav__actions .btn--g { display: inline-flex; }
  .nav__actions .btn--p { font-size: 12px; }

  /* ---------- Hero ---------- */
  .hero { padding: 40px 0 32px; }
  .pill {
    font-size: 12px;
    padding: 5px 12px 5px 9px;
    margin-bottom: 18px;
  }
  .hero h1 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.18;
  }
  .hero__sub {
    font-size: 14.5px;
    margin-top: 16px;
    line-height: 1.65;
  }
  .hero__btns {
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
  }
  .hero__btns .btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
  }

  /* ---------- 统计卡片 ---------- */
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 32px;
    max-width: none;
  }
  .stat { padding: 13px 14px; border-radius: 12px; }
  .stat__v { font-size: 22px; }
  .stat__k { font-size: 11.5px; }

  /* ---------- 区块 ---------- */
  .section { padding: 44px 0; }
  .section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
  }
  .section__title { font-size: 22px; }
  .section__lead { font-size: 14px; }

  /* ---------- 项目卡片 ---------- */
  .grid-projects { grid-template-columns: 1fr; gap: 12px; }
  .pcard { padding: 18px; }
  .pcard h3 { font-size: 17px; }
  .pcard__d { font-size: 13.5px; min-height: 0; }

  /* ---------- 流程 ---------- */
  .flow { grid-template-columns: 1fr; gap: 12px; margin-top: 26px; }
  .flow__step { padding: 20px 18px; }
  .flow__step h3 { font-size: 16px; }
  .flow__step p { font-size: 13.5px; }

  /* ---------- CTA ---------- */
  .cta {
    padding: 26px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    border-radius: 18px;
  }
  .cta__title { font-size: 20px; }
  .cta__sub { font-size: 14px; }
  .cta__actions { width: 100%; gap: 10px; }
  .cta__actions .btn { flex: 1; padding: 12px 16px; font-size: 14px; }

  /* ---------- Footer ---------- */
  .footer { padding: 22px 0; }
  .footer__in { flex-direction: column; gap: 10px; font-size: 13px; }
}

/* 极窄屏（iPhone SE 等） */
@media (max-width: 380px) {
  .nav__in { padding-left: 12px; padding-right: 12px; }
  .brand__text { font-size: 14px; }
  .nav__actions .btn { padding: 6px 10px; font-size: 12px; }
  .hero h1 { font-size: 26px; }
  .stat__v { font-size: 20px; }
}

/* ================= 移动端通用规则（2026-10-01 追加） ================= */

/* 防止横向溢出 */
html, body { max-width: 100%; overflow-x: hidden; }

/* 图片、视频、iframe 自适应 */
img, video, iframe { max-width: 100%; height: auto; }

/* 长单词 / URL 自动换行，防止撑破卡片 */
* { word-wrap: break-word; overflow-wrap: break-word; }

/* 表格容器横向滚动（给需要宽表的地方用） */
.tbl-wrap,
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 表格本身不被压变形 */
.tbl, table.lb-table, table.admin-table {
  min-width: 100%;
}

/* 触摸目标最小尺寸（按钮等） */
@media (max-width: 640px) {
  .btn { min-height: 40px; }
  input, select, textarea { font-size: 16px !important; }  /* 防止 iOS 自动缩放 */
}

/* 中等屏幕：隐藏部分次要导航 */
@media (max-width: 720px) {
  .nav__links { display: none; }
}


/* ================= 顶部用户下拉菜单 ================= */
.dc-dd { position: relative; display: inline-block; }

.dc-dd__trigger {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  /* 复用 .nav__user 外观，这里只补交互 */
}
.dc-dd__trigger svg { transition: transform .18s ease; opacity: .8; }
.dc-dd__menu.is-open ~ .dc-dd__trigger svg,
.dc-dd__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.dc-dd__menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 190px; z-index: 60;
  display: none; flex-direction: column;
  padding: 6px;
  background: rgba(16, 22, 30, .98);
  border: 1px solid var(--line-2, rgba(255,255,255,.14));
  border-radius: 12px;
  box-shadow: 0 18px 44px -16px rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
}
.dc-dd__menu.is-open { display: flex; }

.dc-dd__item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 8px;
  font: 14px/1.4 inherit; font-family: inherit;
  color: var(--fg); background: transparent; border: 0;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.dc-dd__item:hover { background: rgba(255,255,255,.07); }
.dc-dd__item.is-on { color: var(--acc); font-weight: 600; }

.dc-dd__sep {
  height: 1px; margin: 5px 6px;
  background: var(--line-2, rgba(255,255,255,.12));
}

.dc-dd__sub {
  padding: 4px 2px 2px;
  border-top: 1px solid var(--line, rgba(255,255,255,.08));
  margin-top: 5px;
}
.dc-dd__subtitle {
  display: block; padding: 6px 12px 4px;
  font-size: 11.5px; color: var(--fg-3);
}
.dc-dd__view { font-size: 13.5px; padding: 7px 12px; }

.dc-dd__logout { color: #ff9d9d; }
.dc-dd__logout:hover { background: rgba(255,107,107,.12); }

/* ================= 顶部报错条（toast） ================= */
.dc-toast {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 9999;
  max-width: 92vw;
  padding: 12px 22px;
  background: linear-gradient(135deg, #ff6b6b, #e04848);
  color: #fff; font-size: 14px; font-weight: 600;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 34px -10px rgba(255,80,80,.8);
  transition: transform .28s cubic-bezier(.2,.9,.3,1.2);
  pointer-events: none;
}
.dc-toast.is-show { transform: translate(-50%, 0); }

/* 移动端：下拉占满改小一点 */
@media (max-width: 520px) {
  .dc-dd__menu { min-width: 170px; right: -6px; }
  .dc-dd__name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}