/* 土拨鼠官网 · 与客户端同款设计语言
   配色取自客户端 :root —— bg#f6f7f9 卡片白 正文#23262b 主色#e05a3a(陶土橙) 气泡#fdeee9 */
:root{
  --bg:#f6f7f9; --card:#fff; --tx:#23262b; --tx2:#8b919b;
  --ac:#e05a3a; --ac2:#f0704f; --ok:#2fb877; --bad:#e5484d; --line:#e6e8ec; --ub:#fdeee9;
  --red:#ef4444; --purple:#a855f7; --yellow:#fbbf24; --green:#22c55e; --gray:#c3c8cf; --blue:#3d8bff;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--tx); font:15px/1.75 "Microsoft YaHei","PingFang SC","Segoe UI",sans-serif}
a{color:var(--ac); text-decoration:none}
a:hover{color:var(--ac2)}
img{max-width:100%}
ul,ol{padding-left:1.4em}
.container{max-width:1080px; margin:0 auto; padding:0 20px}

/* ===== 顶部导航 ===== */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav .in{max-width:1080px; margin:0 auto; padding:0 20px; height:60px; display:flex; align-items:center; gap:22px}
.nav .brand{display:flex; align-items:center; gap:8px; font-size:18px; font-weight:700; color:var(--tx)}
.nav .brand img{width:30px; height:30px; border-radius:7px}
.nav a.nl{color:var(--tx2); font-size:14px; white-space:nowrap}
.nav a.nl:hover,.nav a.nl.on{color:var(--ac); font-weight:600}
.nav .sp{flex:1}

/* ===== 按钮 ===== */
.btn{display:inline-block; padding:11px 26px; border-radius:10px; background:linear-gradient(135deg,var(--ac2),var(--ac)); color:#fff; font-size:15px; font-weight:600; border:none; cursor:pointer}
.btn:hover{filter:brightness(1.07); color:#fff}
.btn.ghost{background:#fff; color:var(--ac); border:1.5px solid var(--ac)}
.btn.sm{padding:7px 16px; font-size:13px; border-radius:8px}
.btn.dis,.btn.dis:hover{background:#eceef1; color:#9aa0a9; cursor:not-allowed; filter:none}

/* ===== Hero ===== */
.hero{background:linear-gradient(180deg,#fff 0%,var(--ub) 100%); padding:60px 0 52px; text-align:center}
.hero img.logo{width:100px; height:100px; border-radius:24px; box-shadow:0 12px 32px rgba(224,90,58,.28)}
.hero h1{font-size:40px; margin:16px 0 2px; letter-spacing:1px}
.hero h1 small{font-size:17px; color:var(--tx2); font-weight:400; margin-left:10px}
.slogan{font-size:23px; font-weight:700; color:var(--ac); margin:12px 0 6px}
.slogan2{font-size:16px; color:var(--tx); max-width:660px; margin:0 auto}
.freesub{display:inline-block; margin-top:16px; padding:8px 20px; background:#fff; border:1.6px dashed var(--ac); border-radius:999px; color:var(--ac); font-weight:700; font-size:14.5px}
.hero .cta{margin-top:24px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ===== 会话灯(客户端同款灯语) ===== */
@keyframes lbink{50%{opacity:.18}}
.lamps{margin-top:36px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.lamp{background:#fff; border:1px solid var(--line); border-radius:12px; padding:9px 14px; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tx2); box-shadow:0 2px 10px rgba(0,0,0,.05)}
.lamp svg{width:24px; height:24px; flex:none}
.lamp b{color:var(--tx); font-size:13.5px}
.l-red{color:var(--red); animation:lbink .6s infinite}
.l-purple{color:var(--purple); animation:lbink 1s infinite}
.l-yellow{color:var(--yellow); animation:lbink .8s infinite}
.l-green{color:var(--green)}
.l-gray{color:var(--gray)}
.l-blue{color:var(--blue)}
.lampnote{margin-top:12px; font-size:12.5px; color:var(--tx2)}

/* ===== 通用 section / 卡片 ===== */
.sec{padding:52px 0}
.sec.alt{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec h2{font-size:27px; text-align:center; margin-bottom:6px}
.sec .sub{text-align:center; color:var(--tx2); font-size:14.5px; margin-bottom:30px}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:0 2px 10px rgba(0,0,0,.04)}
.card h3{font-size:16.5px; margin-bottom:8px; display:flex; align-items:center; gap:8px}
.card p,.card li{font-size:14px; color:#4a4f57}
.card .ico{font-size:22px}
.card ul{margin-top:6px}
.card li{margin:4px 0}
.card.hot{border:1.6px solid var(--ac); background:linear-gradient(180deg,#fff,var(--ub))}
.tag{display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; background:var(--ub); color:var(--ac); margin-left:6px; vertical-align:2px}
.tag.g{background:#e8f8f0; color:#0d9155}
.tag.b{background:#e8f1ff; color:#2563c9}

/* ===== 星标 ===== */
.stars{color:#f59e0b; letter-spacing:2px; font-size:15px}
.stars .off{color:#dcdfe4}

/* ===== 公示横幅 ===== */
.pledge{background:linear-gradient(135deg,#fff5f0,#fdeee9); border:1.5px solid #f3c9b8; border-radius:14px; padding:22px 26px; text-align:center; font-size:15.5px; line-height:2}
.pledge b{color:var(--ac)}

/* ===== 步骤时间线 ===== */
.steps{counter-reset:st; max-width:720px; margin:0 auto}
.step{position:relative; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 20px 16px 64px; margin-bottom:12px; box-shadow:0 2px 8px rgba(0,0,0,.04)}
.step::before{counter-increment:st; content:counter(st); position:absolute; left:18px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--ac2),var(--ac)); color:#fff; font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center}
.step b{font-size:15px}
.step p{font-size:13.5px; color:var(--tx2); margin-top:2px}
.hlbox{max-width:720px; margin:18px auto 0; background:#fffbeb; border:1.5px solid #fbbf24; border-radius:12px; padding:14px 20px; text-align:center; font-weight:700; color:#92600a; font-size:15px}

/* ===== 平台卡 ===== */
.plat{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:860px; margin:0 auto}
.plat .card{text-align:center; padding:26px 16px}
.plat .pico{font-size:36px; margin-bottom:8px}
.plat h3{justify-content:center; font-size:16px}
.plat p{font-size:12.5px; color:var(--tx2); margin:4px 0 12px}

/* ===== FAQ ===== */
.faq{max-width:760px; margin:0 auto}
.faq details{background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; padding:0}
.faq summary{cursor:pointer; font-weight:700; font-size:15px; padding:15px 20px; list-style:none; position:relative}
.faq summary::before{content:"Q"; color:var(--ac); font-weight:800; margin-right:10px}
.faq summary::after{content:"+"; position:absolute; right:18px; top:12px; color:var(--tx2); font-size:20px}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 20px 16px 44px; font-size:14px; color:#4a4f57}

/* ===== 表格(文档页) ===== */
table.tb{width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; font-size:14px}
.tb th{background:var(--ub); color:var(--tx); text-align:left; padding:10px 14px; font-size:13.5px}
.tb td{border-top:1px solid var(--line); padding:10px 14px; vertical-align:top; color:#4a4f57}

/* ===== 登录页 ===== */
.memwrap{min-height:calc(100vh - 60px); display:flex; align-items:center; justify-content:center; padding:40px 16px; background:linear-gradient(180deg,#fff,var(--ub))}
.memcard{width:400px; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 16px 48px rgba(0,0,0,.1); padding:30px 32px}
.memcard h2{text-align:center; font-size:20px; margin-bottom:18px}
.memcard h2 img{width:34px; height:34px; border-radius:8px; vertical-align:-9px; margin-right:6px}
.tabs{display:flex; border-bottom:1px solid var(--line); margin-bottom:18px}
.tabs b{flex:1; text-align:center; padding:9px 0; font-size:15px; color:var(--tx2); cursor:pointer; border-bottom:2.5px solid transparent}
.tabs b.on{color:var(--ac); border-bottom-color:var(--ac)}
.fld{margin-bottom:14px}
.fld label{display:block; font-size:13px; color:var(--tx2); margin-bottom:5px}
.fld input{width:100%; padding:10px 13px; border:1.5px solid var(--line); border-radius:9px; font-size:14.5px; outline:none}
.fld input:focus{border-color:var(--ac)}
.memcard .btn{width:100%; padding:12px 0; font-size:16px}
.memnote{text-align:center; font-size:12.5px; color:var(--tx2); margin-top:14px}

/* ===== 页脚 ===== */
footer{background:#23262b; color:#a8adb6; padding:36px 0; font-size:13.5px}
footer .container{text-align:center}
footer b{color:#fff}
footer p{margin:6px 0}
footer a{color:#c9a392}
footer a:hover{color:#fff}

/* ===== 面包屑小标题页头 ===== */
.phead{background:linear-gradient(180deg,#fff,var(--ub)); padding:44px 0 34px; text-align:center}
.phead h1{font-size:30px; margin-bottom:6px}
.phead p{color:var(--tx2); font-size:14.5px}

/* ===== 响应式 ===== */
@media (max-width:860px){
  .g3{grid-template-columns:repeat(2,1fr)}
  .plat{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:30px}
  .slogan{font-size:19px}
}
@media (max-width:560px){
  .g2,.g3{grid-template-columns:1fr}
  .nav .in{gap:12px; overflow-x:auto}
  .nav .nl{display:none}
  .nav .nl.mob{display:inline}
}