/* 云快创前台 v0.1：按 web-ui-workflow 做
   方向（已定，2026-10-26，不推翻）：frontend-design 式编辑风——
   深海军 + 暖纸白 + 琥珀点缀，细线分隔、直角、无紫色渐变、无圆角卡片阴影。
   系统（ui-ux-pro-max 只取规范，不取配色）：版式变化度 5、动效 3、密度 4；
   采用的部分是：清晰层级、一次只说一件事、CTA 重复、对比度 4.5 以上、
   可见焦点、44px 以上点击区、375/768/1024 三档不断版、动效只用 150-300ms
   且尊重 prefers-reduced-motion。不取的部分：UI UX 给的绿橙配色和
   Rubik/Nunito Google 字体——前者会推翻已定方向，后者在大陆访问不稳，
   本站只用系统中文黑体，不外引字体文件（3M 带宽，不拖首屏）。
   后台不求美观，复用同一套基础排版即可。 */
:root{
  --ink:#14213d; --paper:#f8f8f6; --card:#ffffff; --text:#1d2733; --muted:#667085;
  --line:#e2e6ea; --accent:#c98a2b; --accent-ink:#7a5410; --good:#0e7c6b; --bad:#b42318;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--text);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  font-size:16px;line-height:1.7}
a{color:var(--ink)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1020px;margin:0 auto;padding:0 20px}
.topbar{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;gap:24px;min-height:60px;flex-wrap:wrap}
.brand{font-size:20px;font-weight:800;text-decoration:none;letter-spacing:.02em}
.brand small{display:block;font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{text-decoration:none;padding:8px 10px;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{background:var(--paper)}
.nav a.active{font-weight:700;border-bottom:2px solid var(--accent)}
.auth{margin-left:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.auth span{color:var(--muted);font-size:14px}
.auth a{min-height:44px;display:inline-flex;align-items:center}
main{padding:36px 20px 56px}
h1{font-size:34px;line-height:1.25;margin:0 0 12px;letter-spacing:-.01em}
h2{font-size:22px;margin:36px 0 12px}
h3{font-size:18px;margin:24px 0 8px}
.lead{color:var(--muted);max-width:72ch;font-size:17px}
.hero{border-bottom:2px solid var(--ink);padding-bottom:28px;margin-bottom:28px}
.hero .cta{display:inline-block;background:var(--ink);color:#fff;padding:12px 20px;text-decoration:none;margin-top:16px;min-height:44px}
.hero .cta:hover{background:#0e1930}
.hero .cta-secondary{display:inline-block;padding:12px 8px;margin-top:16px;margin-left:8px;min-height:44px}
.trust{list-style:none;padding:0;margin:20px 0 0;display:flex;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:15px}
.trust li::before{content:"✓ ";color:var(--good);font-weight:700}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps li{padding:16px 16px 16px 0}
.steps li + li{border-left:1px solid var(--line);padding-left:16px}
.steps .no{font-size:13px;color:var(--accent-ink);font-weight:700}
.steps strong{display:block;margin-top:4px}
.list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.list li{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.list li:hover{background:#fff}
.list .price{font-weight:700;white-space:nowrap;text-align:right}
.list .tag{color:var(--accent-ink);font-size:14px}
.list .detail{font-size:14px;white-space:nowrap}
.muted{color:var(--muted)}
.price-block{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);padding:20px;margin:20px 0}
.price-block .big{font-size:28px;font-weight:800;color:var(--ink)}
.price-block p{margin:4px 0}
.status-steps{list-style:none;padding:0;margin:16px 0;display:flex;gap:8px;flex-wrap:wrap}
.status-steps li{padding:8px 12px;border:1px solid var(--line);background:#fff;font-size:15px}
.status-steps li.done{background:var(--ink);color:#fff;border-color:var(--ink)}
.status-steps li.now{border-color:var(--accent);font-weight:700}
form.form{max-width:480px}
form.form label{display:block;margin:14px 0 4px;font-weight:600}
form.form input[type=text],form.form input[type=email],form.form input[type=password],form.form input[type=number]{
  width:100%;padding:12px;border:1px solid var(--line);background:#fff;font-size:16px;min-height:44px}
button,.btn{display:inline-block;background:var(--ink);color:#fff;border:0;padding:12px 20px;font-size:16px;cursor:pointer;text-decoration:none;min-height:44px;transition:background 200ms}
button:hover,.btn:hover{background:#0e1930}
button.secondary{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.error{color:var(--bad);background:#fef3f2;border:1px solid #fecdca;padding:12px;margin:12px 0}
.success{color:var(--good);background:#ecfdf3;border:1px solid #a6f4c5;padding:12px;margin:12px 0}
table.admin{width:100%;border-collapse:collapse;background:#fff}
table.admin th,table.admin td{border:1px solid var(--line);padding:10px;text-align:left;font-size:14px}
.table-wrap{overflow-x:auto}
.footer{border-top:1px solid var(--line);padding:20px 20px 36px;color:var(--muted);font-size:14px;text-align:center}
.footer a{text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer p{margin:4px 0}
@media(max-width:768px){
  table.admin{display:block;overflow-x:auto}
  h1{font-size:28px}
  .steps{grid-template-columns:1fr}
  .steps li + li{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .list .price{text-align:left}
}
@media(max-width:640px){
  h1{font-size:26px}
  .auth{margin-left:0}
  .trust{gap:12px}
  main{padding:24px 20px 40px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important}
}