@charset "utf-8";
/* ==========================================================================
   草稿侠 · 后台样式
   单文件、零依赖。主色沿用微信绿 #07c160。
   只有一个断点：<=760px 视为手机（字段独占一行、表格横向滚动、输入框 16px）
   ========================================================================== */

/* ---------------------------------------------------------------- 基础 --- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #f5f6f7;
  color: #1f2329;
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

a { color: #07c160; text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- 顶栏 --- */

header {
  background: #fff;
  border-bottom: 1px solid #e5e6eb;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  min-height: 56px;          /* 原来写死 height:56px，窄屏换行时会压到正文上 */
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { font-weight: 600; color: #07c160; font-size: 15px; }

/* 品牌名旁边那行「是什么」，只在公网顶栏用；窄屏藏掉，别把顶栏挤成两行 */
.brand-sub { color: #86909c; font-size: 13px; }

nav { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
nav a { color: #4e5969; text-decoration: none; padding: 4px 0; }
nav a:hover { color: #07c160; text-decoration: none; }
nav a.active { color: #07c160; border-bottom: 2px solid #07c160; }
nav .who { margin-left: auto; color: #86909c; font-size: 13px; }

/* ---------------------------------------------------------------- 主体 --- */

main { max-width: 1080px; margin: 24px auto 60px; padding: 0 24px; }

.card {
  background: #fff;
  border: 1px solid #e5e6eb;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

h1 { font-size: 18px; margin: 0 0 16px; }
h2 { font-size: 15px; margin: 0 0 12px; }
/* 一张卡里第二段开始的小标题拉开距离，紧跟在 h1 后面的保持贴紧 */
.card > h2:not(:first-child) { margin-top: 22px; }

p { margin: 10px 0; }

/* ---------------------------------------------------------------- 表格 --- */

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th, td {
  border-bottom: 1px solid #f0f1f3;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  /* appid / media_id / Token 这类长串强制换行，否则会把表格撑得比容器还宽 */
  overflow-wrap: anywhere;
}

th { background: #fafbfc; font-weight: 500; color: #4e5969; }

/*
 * 表格横向滚动容器。
 * 列数多或列宽写死的表格（使用者、授权设备）在窄屏上塞不下，
 * 让它自己横向滚，而不是把每列压成一个字一行。
 */
.tw { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------ 状态与标签 --- */

.ok   { color: #00b42a; }
.bad  { color: #f53f3f; }
.warn { color: #ff7d00; }

.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
  background: #f2f3f5;
  color: #4e5969;
}
.pill-ok   { background: #e8ffea; color: #00b42a; }
.pill-bad  { background: #ffece8; color: #f53f3f; }
.pill-warn { background: #fff7e8; color: #ff7d00; }
.pill-info { background: #e8f3ff; color: #165dff; }

/* ---------------------------------------------------------------- 表单 --- */

label { display: block; margin: 14px 0 4px; color: #4e5969; }

input[type=text], input[type=password], input[type=email], input[type=search],
input[type=file], textarea, select {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  font: inherit;
  background: #fff;
  color: #1f2329;
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
input[type=search]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #07c160;
  box-shadow: 0 0 0 3px rgba(7, 193, 96, .12);
}

input[type=radio], input[type=checkbox] {
  width: auto;
  max-width: none;
  margin: 0 4px 0 0;
  vertical-align: -1px;
}

textarea {
  min-height: 340px;
  resize: vertical;
  font-family: ui-monospace, Consolas, Monaco, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.7;
}

button, .btn {
  background: #07c160;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
button:hover, .btn:hover { background: #06ad56; color: #fff; text-decoration: none; }
button:disabled { opacity: .6; cursor: not-allowed; }

.btn-plain { background: #fff; color: #4e5969; border: 1px solid #dcdfe6; }
.btn-plain:hover { background: #f7f8fa; color: #1f2329; }

.btn-sm { padding: 3px 10px; font-size: 12px; border-radius: 4px; }

/* ---------------------------------------------------------------- 分页 --- */

.pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.pager .btn { padding: 5px 14px; font-size: 13px; }
/* 「到头了」的那一侧：不是链接，用 span 画成按钮的样子。要盖掉 .btn:hover 的绿色 */
.pager .is-disabled,
.pager .is-disabled:hover {
  background: #fafbfc;
  color: #c9cdd4;
  border: 1px solid #f0f1f3;
  cursor: default;
}
.pager-now { color: #4e5969; font-size: 13px; }

/* 标题里挂一句小字（比如「共 27 条」）。不能直接用 .muted —— 那是给独立段落的 */
.card-sub { font-size: 13px; font-weight: 400; color: #86909c; }

/* ---------------------------------------------------------------- 零件 --- */

.muted { color: #86909c; font-size: 13px; }

/* 卡片里的纯文字清单。不复用 .steps —— 那个是整块浅底，套在卡片里会多一层框 */
.card ol.plain, .card ul.plain { margin: 0; padding-left: 22px; color: #4e5969; }
.card ol.plain li, .card ul.plain li { margin: 7px 0; }

.mono {
  font-family: ui-monospace, Consolas, Monaco, "Courier New", monospace;
  font-size: 12px;
  word-break: break-all;
}

code {
  background: #f2f3f5;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  word-break: break-all;
  font-family: ui-monospace, Consolas, Monaco, "Courier New", monospace;
}

.alert {
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.alert-ok   { background: #e8ffea; color: #0a7a2b; border: 1px solid #aff0b5; }
.alert-err  { background: #ffece8; color: #a8071a; border: 1px solid #fdcdc5; }
.alert-warn { background: #fff7e8; color: #8a5200; border: 1px solid #ffd591; }

.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 200px; }

details > summary { cursor: pointer; padding: 4px 0; user-select: none; }

:focus-visible { outline: 2px solid #07c160; outline-offset: 2px; }

/* ---------------------------------------------------------------- 手机 --- */

@media (max-width: 760px) {
  header { padding: 0 16px; gap: 18px; }
  main { margin: 16px auto 40px; padding: 0 16px; }

  .card { padding: 14px; border-radius: 6px; }

  h1 { font-size: 17px; }
  .card > h2:not(:first-child) { margin-top: 18px; }

  table { font-size: 12.5px; }
  th, td { padding: 7px 8px; }

  /* 每个字段独占一行，别再把两个输入框硬挤在一行 */
  .row { gap: 12px; }
  .row > * { min-width: 100%; }

  /* iOS 上字号小于 16px 的输入框一旦聚焦会自动把整页放大，之后缩不回去 */
  input[type=text], input[type=password], input[type=email], input[type=search],
  input[type=file], textarea, select { font-size: 16px; }

  textarea { min-height: 240px; font-size: 14px; }

  button, .btn { padding: 9px 16px; }

  .alert { padding: 10px 12px; }
}

/* ============================================================== 公网页 --- */
/* 落地页 / 注册 / 登录：登录之前就能看到的页面，顶栏是精简版 */

header.pub { gap: 16px; }
header.pub .brand { font-size: 16px; text-decoration: none; }
header.pub nav { margin-left: auto; }
header.pub nav a { padding: 4px 0; }

.landing { max-width: 760px; margin: 0 auto; }

.hero {
  background: #fff;
  border: 1px solid #e5e6eb;
  border-radius: 12px;
  padding: 40px 32px;
  margin-bottom: 16px;
}
.hero .kicker { margin: 0 0 10px; color: #07c160; font-size: 13px; font-weight: 600; }
.hero h1 { font-size: 26px; line-height: 1.35; margin: 0 0 14px; }
.hero .lead { font-size: 15px; color: #4e5969; margin: 0 0 24px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .cta .btn { padding: 10px 22px; font-size: 15px; }
.hero .note { color: #86909c; font-size: 13px; margin: 0; }

/* 联系方式：左侧一道主色竖条，是整页唯一的转化入口 */
.contact {
  background: #fff;
  border: 1px solid #e5e6eb;
  border-left: 3px solid #07c160;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 16px 0;
}
.contact b { display: block; margin-bottom: 6px; }
.contact p { margin: 0; color: #4e5969; font-size: 13px; }

/* 微信号给个底色 + 点击整段选中，方便直接复制（落地页、注册页都用） */
.wxid {
  background: #e8fff0;
  color: #0a7a2b;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  user-select: all;
}

.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0; }
.feat { background: #fff; border: 1px solid #e5e6eb; border-radius: 10px; padding: 18px; }
.feat h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; color: #1f2329; }
.feat p { margin: 0; color: #4e5969; font-size: 13px; }

.skillbox {
  background: #fff;
  border: 1px solid #e5e6eb;
  border-radius: 10px;
  padding: 18px 20px;
  margin: 16px 0;
}
.skillbox h2 { margin: 0 0 12px; }
.skillbox p.muted:last-child { margin-bottom: 0; }

.steps {
  background: #fff;
  border: 1px solid #e5e6eb;
  border-radius: 10px;
  padding: 18px 20px 18px 40px;
  margin: 16px 0;
  color: #4e5969;
}
.steps li { margin: 8px 0; }
.steps b { color: #1f2329; }

.foot { color: #86909c; font-size: 13px; text-align: center; margin: 28px 0 8px; }
.foot a { margin: 0 6px; }

@media (max-width: 760px) {
  .hero { padding: 26px 20px; }
  .hero h1 { font-size: 21px; }
  .hero .lead { font-size: 14px; }
  .hero .cta .btn { flex: 1; }
  .feats { grid-template-columns: 1fr; gap: 12px; }
  .skillbox, .steps { padding: 16px; }
  .steps { padding-left: 34px; }
  .brand-sub { display: none; }
}