/* ===== 叁柒空间官网 · 深色科技风 ===== */
:root{
  --bg:#070b14;
  --bg2:#0b1220;
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.06);
  --border:rgba(74,222,128,.16);
  --border-soft:rgba(255,255,255,.08);
  --text:#e6edf6;
  --muted:#8aa0bc;
  --dim:#5f7390;
  --green:#4ade80;
  --blue:#38bdf8;
  --purple:#a78bfa;
  --accent:#4ade80;
  --heading:#e6edf6;
  --maxw:1160px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(1000px 500px at 0% 0%, rgba(74,222,128,.08), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Microsoft YaHei","PingFang SC",sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ===== 顶部导航 ===== */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);
  background:rgba(7,11,20,.72);border-bottom:1px solid var(--border-soft)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:1px;font-size:18px}
.brand .logo{width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,var(--green),var(--blue));
  display:flex;align-items:center;justify-content:center;color:#04120a;font-weight:800;font-size:15px;
  box-shadow:0 0 18px rgba(74,222,128,.4)}
.brand small{color:var(--muted);font-weight:400;font-size:12px;letter-spacing:2px}
.nav-links{display:flex;gap:28px;font-size:14px;color:var(--muted)}
.nav-links a{transition:.2s;position:relative;padding:4px 0}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--green);transition:.2s}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:12px}
@media(max-width:860px){.nav-links{display:none}}

/* ===== 按钮 ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:8px;
  font-size:14px;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:.2s;border:1px solid transparent}
.btn-primary{background:linear-gradient(135deg,var(--green),#22d3ee);color:#04120a;
  box-shadow:0 6px 22px rgba(74,222,128,.28)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(74,222,128,.42)}
.btn-ghost{background:var(--panel);border-color:var(--border-soft);color:var(--text)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-sm{padding:8px 16px;font-size:13px}

/* ===== Hero ===== */
.hero{padding:96px 0 72px;text-align:center;position:relative}
.hero-tag{display:inline-block;font-size:13px;color:var(--green);border:1px solid var(--border);
  background:rgba(74,222,128,.07);padding:6px 16px;border-radius:999px;letter-spacing:2px;margin-bottom:24px}
.hero-title{font-size:clamp(32px,5vw,54px);font-weight:800;letter-spacing:1px;line-height:1.2}
.hero-title .g{background:linear-gradient(135deg,var(--green),var(--blue));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero-sub{margin:22px auto 0;max-width:680px;color:var(--muted);font-size:17px}
.hero-btns{margin-top:36px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-stats{margin-top:54px;display:flex;gap:40px;justify-content:center;flex-wrap:wrap;color:var(--muted)}
.hero-stats .num{font-size:26px;font-weight:800;color:var(--text)}
.hero-stats .lab{font-size:13px}

/* ===== 区块通用 ===== */
.section{padding:72px 0;border-top:1px solid var(--border-soft)}
.section-head{text-align:center;margin-bottom:48px}
.section-kicker{color:var(--green);font-size:13px;letter-spacing:3px;font-weight:600}
.section-title{font-size:clamp(24px,3.4vw,36px);font-weight:800;margin-top:10px;letter-spacing:.5px}
.section-sub{color:var(--muted);margin-top:12px;font-size:15px;max-width:620px;margin-left:auto;margin-right:auto}

/* ===== 产品区块 ===== */
.product{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  background:var(--panel);border:1px solid var(--border-soft);border-radius:18px;padding:40px;margin-bottom:28px}
.product.reverse{direction:rtl}
.product.reverse>*{direction:ltr}
.product-name{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:800}
.product-name .dot{width:12px;height:12px;border-radius:50%}
.dot.g{background:var(--green);box-shadow:0 0 14px var(--green)}
.dot.b{background:var(--blue);box-shadow:0 0 14px var(--blue)}
.dot.p{background:var(--purple);box-shadow:0 0 14px var(--purple)}
.product-tag{color:var(--muted);margin:10px 0 22px;font-size:15px}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.feature{background:var(--panel-2);border:1px solid var(--border-soft);border-radius:12px;padding:16px}
.feature .ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:17px;margin-bottom:10px;background:rgba(74,222,128,.12);color:var(--green)}
.product.b .feature .ico{background:rgba(56,189,248,.12);color:var(--blue)}
.product.p .feature .ico{background:rgba(167,139,250,.12);color:var(--purple)}
.feature .ft{font-size:14px;font-weight:700;margin-bottom:4px}
.feature .fd{font-size:12.5px;color:var(--muted);line-height:1.5}
.product-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

.product-media{display:flex;flex-direction:column;gap:18px}
.shot-img{width:100%;border-radius:14px;border:1px solid var(--border);display:block;background:#0a111e}
.shot{aspect-ratio:16/10;width:100%;border-radius:14px;border:1px dashed rgba(255,255,255,.16);
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--dim);gap:8px;text-align:center}
.shot .ph{font-size:13px;letter-spacing:2px;color:var(--muted)}
.shot .phs{font-size:12px;color:var(--dim)}
.media-side{display:flex;gap:16px;align-items:center;justify-content:center;
  background:var(--panel-2);border:1px solid var(--border-soft);border-radius:14px;padding:18px}
.qr-box{text-align:center}
.qr-box img{width:140px;height:140px;border-radius:10px;border:1px solid var(--border);background:#fff;padding:6px}
.qr-label{margin-top:10px;font-size:13px;color:var(--muted)}
.qr-label b{color:var(--text)}
.dl-note{font-size:12.5px;color:var(--muted);max-width:220px;line-height:1.7}
.dl-note .soon{display:inline-block;margin-top:8px;color:var(--blue);border:1px solid rgba(56,189,248,.3);
  background:rgba(56,189,248,.08);padding:3px 10px;border-radius:999px;font-size:12px}

/* ===== FAQ ===== */
.faq{margin-top:18px;border-top:1px solid var(--border-soft)}
.faq-item{border-bottom:1px solid var(--border-soft);padding:16px 4px}
.faq-q{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;cursor:pointer}
.faq-q .ar{margin-left:auto;color:var(--muted);transition:.2s}
.faq-item.open .faq-q .ar{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:.25s;color:var(--muted);font-size:14px}
.faq-item.open .faq-a{max-height:200px;padding-top:10px}

/* ===== 登录入口 ===== */
.login-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.login-card{background:var(--panel-2);border:1px solid var(--border);border-radius:18px;padding:34px 32px;
  box-shadow:0 0 40px rgba(74,222,128,.08), inset 0 0 30px rgba(74,222,128,.03)}
.login-card h3{font-size:20px;font-weight:800;color:var(--green);text-align:center;letter-spacing:3px}
.login-card .sub{color:var(--muted);font-size:12px;text-align:center;margin:6px 0 22px;letter-spacing:2px}
.login-card label{display:block;color:var(--green);font-size:12px;margin:14px 0 5px;letter-spacing:1px}
.login-card input{width:100%;background:rgba(0,20,0,.35);border:1px solid var(--border);border-radius:6px;
  padding:10px 12px;color:var(--text);font-size:14px}
.login-card input:focus{outline:none;border-color:var(--green);box-shadow:0 0 10px rgba(74,222,128,.35)}
.login-card .lbtn{width:100%;margin-top:22px;padding:11px;background:linear-gradient(135deg,var(--green),#22d3ee);
  border:none;border-radius:6px;color:#04120a;font-size:15px;font-weight:700;letter-spacing:6px;cursor:pointer;transition:.2s}
.login-card .lbtn:hover{box-shadow:0 0 22px rgba(74,222,128,.5)}
.login-card .err{color:#ff6b6b;font-size:12px;margin-top:10px;text-align:center}
.login-card .regbar{margin-top:16px;text-align:center;font-size:12.5px;color:var(--muted)}
.reglink{color:var(--green);text-decoration:underline;cursor:pointer;margin-left:4px}
.login-aside h3{font-size:24px;font-weight:800;margin-bottom:14px}
.login-aside p{color:var(--muted);font-size:15px;margin-bottom:14px}
.login-aside ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.login-aside li{display:flex;gap:10px;color:var(--muted);font-size:14px}
.login-aside li .ck{color:var(--green)}
/* 简化工作入口（单按钮跳登录页） */
.login-simple{max-width:520px;margin:0 auto;text-align:center;
  background:var(--panel-2);border:1px solid var(--border);border-radius:18px;padding:42px 32px;
  box-shadow:0 0 40px rgba(74,222,128,.08), inset 0 0 30px rgba(74,222,128,.03)}
.login-big{display:inline-block;text-decoration:none;min-width:240px;text-align:center;
  padding:15px 44px;background:linear-gradient(135deg,var(--green),#22d3ee);
  border:none;border-radius:8px;color:#04120a;font-size:17px;font-weight:800;letter-spacing:8px;cursor:pointer;transition:.2s}
.login-big:hover{box-shadow:0 0 26px rgba(74,222,128,.55);transform:translateY(-1px)}
.login-hint{color:var(--muted);font-size:13.5px;margin:20px auto 0;max-width:420px;line-height:1.7}
.login-simple .regbar{margin-top:18px;text-align:center;font-size:12.5px;color:var(--muted)}

/* ===== 更新记录（CHANGELOG · 标签页切换） ===== */
.cl-tabs{display:flex;justify-content:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.cl-tab{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:999px;padding:9px 20px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;transition:.2s}
.cl-tab:hover{color:var(--heading);border-color:rgba(255,255,255,.25)}
.cl-tab.active{color:#04120a;background:linear-gradient(135deg,var(--green),var(--blue));border-color:transparent;font-weight:800}
.cl-tab.active .dot{background:#04120a}
.cl-panel{display:none;max-width:760px;margin:22px auto 0}
.cl-panel.active{display:block}
.cl-list{display:flex;flex-direction:column;gap:12px}
.cl-item{position:relative;padding:10px 12px 10px 16px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px}
.cl-item::before{content:"";position:absolute;left:6px;top:14px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.cl-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cl-ver{font-size:11px;font-weight:700;color:var(--accent);background:rgba(74,222,128,.12);border-radius:6px;padding:1px 7px}
.cl-date{font-size:11.5px;color:var(--muted)}
.cl-title{font-size:14px;font-weight:600;color:var(--heading);line-height:1.5}
.cl-content{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.6;white-space:pre-line}
.cl-empty{font-size:13px;color:var(--muted);text-align:center;padding:18px 0;opacity:.7}
@media(max-width:860px){.cl-tab{padding:8px 14px;font-size:13px}}

/* ===== 注册弹窗 ===== */
.modal-mask{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.74);display:none;
  align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.modal-mask.show{display:flex}
.modal{background:rgba(11,18,32,.97);border:1px solid var(--border);border-radius:12px;padding:26px 28px;
  width:360px;max-width:92vw;box-shadow:0 0 40px rgba(74,222,128,.2)}
.modal-head{color:var(--green);font-size:17px;font-weight:700;letter-spacing:2px;text-align:center;position:relative;margin-bottom:16px}
.modal-close{position:absolute;right:0;top:-4px;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;padding:0 6px}
.modal-close:hover{color:var(--green)}
.mp-qr{margin:0 auto;text-align:center}
.mp-qr img{width:180px;height:180px;display:block;margin:0 auto;border-radius:8px;border:1px solid var(--border);background:#fff;padding:6px}
.mp-qr-label{margin-top:14px;font-size:13.5px;color:var(--text);letter-spacing:1px;line-height:1.9;text-align:center}
.mp-qr-label .s2{color:var(--muted);font-size:12px}

/* ===== 页脚 ===== */
.footer{border-top:1px solid var(--border-soft);padding:48px 0 36px;margin-top:24px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-brand .brand{margin-bottom:12px}
.foot-brand p{color:var(--muted);font-size:13px;max-width:320px}
.foot-col h4{font-size:14px;margin-bottom:14px;color:var(--text)}
.foot-col a{display:block;color:var(--muted);font-size:13px;margin-bottom:9px;transition:.2s}
.foot-col a:hover{color:var(--green)}
.foot-note{margin-top:36px;padding-top:22px;border-top:1px solid var(--border-soft);
  color:var(--muted);font-size:12.5px;line-height:1.9}
.foot-note b{color:var(--green)}
.foot-copy{margin-top:14px;color:var(--dim);font-size:12px;letter-spacing:1px}

@media(max-width:860px){
  .product,.login-wrap{grid-template-columns:1fr}
  .product.reverse{direction:ltr}
  .feature-grid{grid-template-columns:1fr}
  .section{padding:56px 0}
  .hero{padding:64px 0 48px}
}

/* ===== 产品界面 mockup（拟真预览，非真实截图） ===== */
.ui-mock{width:100%;max-width:300px;margin:0 auto;background:#0a111e;border:1px solid var(--border-soft);
  border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.55)}
.ui-mock *{box-sizing:border-box}

/* 小程序：手机 */
.phone{border:7px solid #1b2433;border-radius:30px;max-width:258px}
.notch{width:92px;height:15px;background:#1b2433;border-radius:0 0 13px 13px;margin:0 auto 8px}
.screen{border-radius:18px;padding:14px 14px 8px;min-height:330px}
.app-bar{display:flex;justify-content:space-between;align-items:center;color:var(--text);font-weight:700;font-size:15px;margin-bottom:11px}
.ab-ic{color:var(--muted);font-size:16px}
.search{background:rgba(255,255,255,.05);border:1px solid var(--border-soft);border-radius:8px;padding:7px 10px;color:var(--dim);font-size:12px;margin-bottom:11px}
.law{background:rgba(255,255,255,.04);border:1px solid var(--border-soft);border-radius:10px;padding:9px 11px;margin-bottom:8px}
.ltag{display:inline-block;font-size:10px;padding:1px 7px;border-radius:999px;margin-bottom:5px}
.ltag.g{background:rgba(74,222,128,.15);color:var(--green)}
.ltag.b{background:rgba(56,189,248,.15);color:var(--blue)}
.ltag.p{background:rgba(167,139,250,.15);color:var(--purple)}
.lt{font-size:13px;font-weight:700;color:var(--text)}
.ld{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5}
.tabbar{display:flex;background:#0a111e;border-top:1px solid var(--border-soft);padding:9px 0}
.tb{flex:1;text-align:center;font-size:11px;color:var(--dim)}
.tb.act{color:var(--green)}

/* 桌面版：窗口 */
.wtitle,.btitle{display:flex;align-items:center;gap:9px;background:#101a2b;padding:9px 13px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--border-soft)}
.wdots{display:flex;gap:5px}
.wdots i{width:9px;height:9px;border-radius:50%;background:#3a4658}
.wdots i:nth-child(1){background:#ff5f56}
.wdots i:nth-child(2){background:#ffbd2e}
.wdots i:nth-child(3){background:#27c93f}
.url{color:var(--green);font-size:11.5px}
.wbody{display:flex;min-height:228px}
.wside{width:74px;background:#0c1422;border-right:1px solid var(--border-soft);padding:12px 8px;display:flex;flex-direction:column;gap:6px}
.ws{font-size:12px;color:var(--muted);padding:7px 8px;border-radius:7px}
.ws.act{background:rgba(56,189,248,.14);color:var(--blue)}
.wmain{flex:1;padding:14px}
.wt-h{font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px}
.wt-h b{color:var(--blue)}
.todo{display:flex;align-items:flex-start;gap:9px;background:rgba(255,255,255,.04);border:1px solid var(--border-soft);border-radius:9px;padding:9px 11px;margin-bottom:8px}
.ck{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--border);flex:0 0 auto;margin-top:1px}
.ck.ok{background:var(--green);border-color:var(--green)}
.tc{font-size:12px;color:var(--text);line-height:1.4}
.td{font-size:10px;color:var(--dim);margin-top:2px}
.todo.done .tc{color:var(--dim);text-decoration:line-through}
.wfloat{margin:-26px 12px 14px auto;width:142px;background:rgba(7,11,20,.94);border:1px solid var(--blue);border-radius:10px;padding:9px 10px;box-shadow:0 10px 22px rgba(0,0,0,.55)}
.wf-h{font-size:11px;color:var(--blue);margin-bottom:6px}
.wf-r{font-size:10.5px;color:var(--muted);line-height:1.7}

/* 天溯系统：浏览器 */
.bbody{display:flex;min-height:262px}
.bnav{width:96px;background:#0c1422;border-right:1px solid var(--border-soft);padding:12px 8px;display:flex;flex-direction:column;gap:6px}
.bn{font-size:12px;color:var(--muted);padding:7px 9px;border-radius:7px}
.bn.act{background:rgba(167,139,250,.16);color:var(--purple)}
.bmain{flex:1;padding:14px}
.bh{font-size:13px;font-weight:700;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.badge{font-size:10px;color:var(--green);border:1px solid var(--border);background:rgba(74,222,128,.08);padding:1px 8px;border-radius:999px}
.chart{display:flex;align-items:flex-end;gap:10px;height:92px;padding:0 4px 4px;border-bottom:1px solid var(--border-soft);margin-bottom:12px}
.bar{flex:1;position:relative;height:100%}
.bar span{position:absolute;bottom:16px;left:22%;width:56%;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--purple),rgba(167,139,250,.3))}
.bar i{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10px;color:var(--dim);font-style:normal}
.mtbl{width:100%;border-collapse:collapse;font-size:11px}
.mtbl th{text-align:left;color:var(--dim);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--border-soft)}
.mtbl td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--text)}
.mtbl .pos{color:var(--green)}
.mtbl .neg{color:#ff8585}