/* ============================================================
   喜报 / 荣耀榜 H5
   版式与色系沿用「喜报样例_三色系_6屏.html」
   基准：375 × 812（iPhone），1 设计像素 = 1 * --s
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --s: calc(100vw / 375);
  --font-hei: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", -apple-system, sans-serif;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: var(--font-hei);
  color: #1F2329;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  transition: background .25s ease;
}

/* ============ 主题变量（三色系 + 黑金） ============ */
.t-rose  { --bg:#FFF8F6; --fg:#6B4A50; --strong:#B0425A; --accent:#E8909C; --gold:#C9A227; --line:#F0D9DB; --panel:#FFFFFF; --chip:#FDF0F1; --btnFg:#FFFFFF; }
.t-red   { --bg:#B3212B; --fg:#FBE6E6; --strong:#FFE9B5; --accent:#D4AF37; --gold:#D4AF37; --line:#D4AF37; --panel:#AB1F29; --chip:#9E1A23; --btnFg:#5A1010; }
.t-champ { --bg:#FBF5E7; --fg:#6B5537; --strong:#8A4B1E; --accent:#C9A227; --gold:#C9A227; --line:#E3D2A8; --panel:#FFFDF7; --chip:#F6ECD2; --btnFg:#3A2408; }
.t-black { --bg:#14100C; --fg:#E4D7C2; --strong:#E9C97C; --accent:#C9A227; --gold:#C9A227; --line:#3B3126; --panel:#1D1811; --chip:#262015; --btnFg:#14100C; }

/* 徽章定色：避免白字压在浅色底上 */
.t-rose  .row.me .rk { background:#B0425A; color:#FFFFFF; border-color:#B0425A; }
.t-red   .row.me .rk { background:#FFE9B5; color:#5A1010; border-color:#FFE9B5; }
.t-champ .row.me .rk { background:#C9A227; color:#3A2408; border-color:#C9A227; }
.t-black .row.me .rk { background:#C9A227; color:#14100C; border-color:#C9A227; }

.t-rose  .tag { background:#B0425A; color:#FFFFFF; }
.t-red   .tag { background:#FFE9B5; color:#5A1010; }
.t-champ .tag { background:#C9A227; color:#3A2408; }
.t-black .tag { background:#C9A227; color:#14100C; }

/* 雅金底浅，金色小字压深（老年可读性） */
.t-champ .row .rk { color:#8A4B1E; }
.t-champ .frame { border-width: 2px; }

/* ============ 页面容器 ============ */
.page {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}
.page[hidden] { display: none !important; }

/* ============ 喜报（证书页） ============ */
.poster {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(46 * var(--s) + env(safe-area-inset-top, 0px)) calc(30 * var(--s)) calc(30 * var(--s));
  text-align: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.frame {
  width: 100%;
  flex: 1;
  min-height: calc(560 * var(--s));
  border: 1px solid var(--line);
  border-radius: calc(8 * var(--s));
  padding: calc(40 * var(--s)) calc(26 * var(--s)) calc(30 * var(--s));
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.frame::before, .frame::after {
  content: ""; position: absolute;
  width: calc(22 * var(--s)); height: calc(22 * var(--s));
  border: 2px solid var(--accent);
}
.frame::before { top: calc(12 * var(--s)); left: calc(12 * var(--s)); border-right: none; border-bottom: none; }
.frame::after  { bottom: calc(12 * var(--s)); right: calc(12 * var(--s)); border-left: none; border-top: none; }

.seal {
  display: inline-block;
  font-size: calc(15 * var(--s));
  font-weight: 600;
  letter-spacing: calc(7 * var(--s));
  padding: calc(7 * var(--s)) calc(14 * var(--s)) calc(7 * var(--s)) calc(21 * var(--s));
  background: var(--accent);
  color: var(--btnFg);
  border-radius: calc(6 * var(--s));
  line-height: 1.4;
}
.t-rose .seal { background: #B8506A; color: #fff; }

.ptitle {
  font-size: calc(30 * var(--s));
  font-weight: 600;
  color: var(--strong);
  margin: calc(14 * var(--s)) 0 0;
  letter-spacing: calc(2 * var(--s));
  line-height: 1.35;
  max-width: 100%;
  word-break: break-all;
}

.dline {
  width: calc(54 * var(--s)); height: 2px;
  background: var(--accent);
  margin: calc(20 * var(--s)) 0 calc(26 * var(--s));
}

.congrats {
  font-size: calc(17 * var(--s));
  color: var(--fg);
  line-height: 1.9;
}

.name {
  font-size: calc(34 * var(--s));
  font-weight: 600;
  color: var(--strong);
  margin: calc(10 * var(--s)) 0 calc(6 * var(--s));
  letter-spacing: calc(3 * var(--s));
  word-break: break-all;
  max-width: 100%;
}

.body {
  font-size: calc(17 * var(--s));
  color: var(--fg);
  line-height: 1.95;
  margin-top: calc(22 * var(--s));
  max-width: 100%;
}
.body em { font-style: normal; color: var(--strong); font-weight: 600; }
.body .nb { white-space: nowrap; }

.sign {
  margin-top: auto;
  padding-top: calc(32 * var(--s));
  font-size: calc(15 * var(--s));
  color: var(--fg);
  opacity: .8;
  letter-spacing: calc(1 * var(--s));
}

.cta {
  width: 100%;
  margin-top: calc(24 * var(--s));
  height: calc(50 * var(--s));
  border: none;
  border-radius: calc(8 * var(--s));
  background: var(--accent);
  color: var(--btnFg);
  font-size: calc(17 * var(--s));
  font-weight: 600;
  letter-spacing: calc(2 * var(--s));
  font-family: inherit;
  flex-shrink: 0;
}
.cta:active { opacity: .86; }

/* 梨花粉的按钮底色压深，白字才够清楚 */
.t-rose .cta { background: #B8506A; }

/* ============ 荣耀榜 ============ */
.board { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.bhead {
  padding: calc(24 * var(--s) + env(safe-area-inset-top, 0px)) calc(26 * var(--s)) calc(18 * var(--s));
  text-align: center;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.btitle {
  font-size: calc(24 * var(--s));
  font-weight: 600;
  color: var(--strong);
  letter-spacing: calc(2 * var(--s));
}
.bsub {
  display: inline-block;
  font-size: calc(12 * var(--s));
  letter-spacing: calc(6 * var(--s));
  margin-top: calc(12 * var(--s));
  padding: calc(5 * var(--s)) calc(10 * var(--s)) calc(5 * var(--s)) calc(16 * var(--s));
  background: var(--accent);
  color: var(--btnFg);
  border-radius: calc(30 * var(--s));
  font-weight: 500;
}
.t-rose .bsub { background: #B8506A; color: #fff; }

.list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(12 * var(--s)) calc(16 * var(--s)) calc(104 * var(--s));
  list-style: none;
  min-height: 0;
}

.row {
  display: flex; align-items: center;
  height: calc(46 * var(--s));
  padding: 0 calc(16 * var(--s));
  border-radius: calc(10 * var(--s));
  margin-bottom: calc(6 * var(--s));
  background: var(--panel);
  border: 1px solid var(--line);
}
.row.me {
  background: var(--chip);
  border: 2px solid var(--accent);
  height: calc(52 * var(--s));
}

.rk {
  width: calc(30 * var(--s)); height: calc(30 * var(--s));
  flex: 0 0 calc(30 * var(--s));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(13 * var(--s));
  font-weight: 600;
  background: var(--chip);
  color: var(--gold);
  border: 1px solid var(--line);
}

.nm {
  flex: 1;
  font-size: calc(17 * var(--s));
  color: var(--fg);
  margin-left: calc(14 * var(--s));
  letter-spacing: calc(.5 * var(--s));
}
.row.me .nm { color: var(--strong); font-weight: 600; font-size: calc(18 * var(--s)); }

.tag {
  font-size: calc(11 * var(--s));
  padding: calc(2 * var(--s)) calc(8 * var(--s));
  border-radius: calc(4 * var(--s));
  background: var(--accent);
  color: var(--btnFg);
}

.backbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: calc(12 * var(--s)) calc(20 * var(--s)) calc(24 * var(--s) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.list-note {
  text-align: center;
  font-size: calc(12 * var(--s));
  color: var(--fg);
  opacity: .42;
  letter-spacing: calc(.5 * var(--s));
  padding: calc(16 * var(--s)) 0 calc(4 * var(--s));
  line-height: 1.6;
  list-style: none;
}
.backbar::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: calc(-28 * var(--s));
  height: calc(28 * var(--s));
  background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
  pointer-events: none;
}
.backbar button {
  width: 100%; height: calc(48 * var(--s));
  border-radius: calc(8 * var(--s));
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--strong);
  font-size: calc(16 * var(--s));
  font-weight: 600;
  font-family: inherit;
  letter-spacing: calc(2 * var(--s));
}

/* ============ 输入昵称页 ============ */
.gate {
  flex: 1;
  min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 calc(34 * var(--s));
  gap: calc(20 * var(--s));
}
.gate-title {
  font-size: calc(25 * var(--s));
  font-weight: 600;
  color: var(--strong);
  letter-spacing: calc(2 * var(--s));
  text-align: center;
  line-height: 1.45;
  max-width: 100%;
}
.gate-tip {
  font-size: calc(15 * var(--s));
  color: var(--fg);
  opacity: .7;
  text-align: center;
  line-height: 1.7;
  margin-bottom: calc(4 * var(--s));
}
.gate-input {
  width: 100%;
  height: calc(54 * var(--s));
  padding: 0 calc(20 * var(--s));
  border: 1.5px solid var(--line);
  border-radius: calc(8 * var(--s));
  background: var(--panel);
  color: var(--strong);
  font-size: calc(19 * var(--s));
  text-align: center;
  font-family: inherit;
  outline: none;
}
.gate-input::placeholder { color: var(--fg); opacity: .38; font-size: calc(16 * var(--s)); }
.gate-input:focus { border-color: var(--accent); }
.gate-err {
  font-size: calc(14 * var(--s));
  color: #D14343;
  text-align: center;
  min-height: calc(20 * var(--s));
  line-height: 1.4;
}
.t-red .gate-err { color: #FFC9C9; }
.t-black .gate-err { color: #E0796A; }

.gate .cta { margin-top: 0; }

/* ============ 生成页（教练端） ============ */
body.gen-mode { overflow: auto; background: #F2F4F7; }
.gen-wrap {
  max-width: calc(560 * var(--s));
  margin: 0 auto;
  padding: calc(28 * var(--s)) calc(28 * var(--s)) calc(120 * var(--s));
}
.gen-head { padding: calc(16 * var(--s)) 0 calc(30 * var(--s)); }
.gen-head h1 { font-size: calc(26 * var(--s)); font-weight: 600; letter-spacing: calc(-.3 * var(--s)); color: #1F2329; }
.gen-head p { margin-top: calc(8 * var(--s)); font-size: calc(14 * var(--s)); color: #6B7280; line-height: 1.6; }

.field { margin-bottom: calc(34 * var(--s)); }
.field-label {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: calc(12 * var(--s));
  font-size: calc(15 * var(--s)); font-weight: 500; color: #1F2329;
}
.field-label .req { color: #D14343; margin-left: calc(3 * var(--s)); }
.field-label .counter { font-size: calc(13 * var(--s)); color: #9AA1A9; font-weight: 400; }
.counter.over { color: #D14343; }
.field-hint { margin-top: calc(10 * var(--s)); font-size: calc(13 * var(--s)); color: #8B929A; line-height: 1.65; }

textarea.gen-input, input.gen-input {
  width: 100%;
  padding: calc(14 * var(--s)) calc(16 * var(--s));
  border: 1.5px solid #DFE3E8;
  border-radius: calc(10 * var(--s));
  background: #fff;
  font-size: calc(16 * var(--s));
  line-height: 1.6;
  color: #1F2329;
  font-family: inherit;
  outline: none;
  resize: none;
  transition: border-color .15s;
}
textarea.gen-input:focus, input.gen-input:focus { border-color: #3B7DDD; }
textarea.gen-input { min-height: calc(150 * var(--s)); }

.flag { margin-top: calc(10 * var(--s)); font-size: calc(13 * var(--s)); line-height: 1.6; }
.flag.ok { color: #1A7F4B; }
.flag.bad { color: #D14343; }
.flag.warn { color: #B26A00; }

.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(10 * var(--s)); }
.theme-card {
  border: 2px solid #DFE3E8;
  border-radius: calc(10 * var(--s));
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s;
}
.theme-card.on { border-color: #3B7DDD; }
.theme-prev {
  height: calc(64 * var(--s));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(13 * var(--s));
  font-weight: 600;
  letter-spacing: calc(1 * var(--s));
}
.pv-rose  { background: #FFF8F6; color: #B0425A; }
.pv-red   { background: #B3212B; color: #FFE9B5; }
.pv-champ { background: #FBF5E7; color: #8A4B1E; }
.pv-black { background: #14100C; color: #E9C97C; }
.theme-name {
  padding: calc(7 * var(--s));
  text-align: center;
  font-size: calc(12 * var(--s));
  color: #4B5563;
  background: #fff;
}
.theme-card.on .theme-name { color: #1F4F9E; font-weight: 500; }

.seg { display: flex; gap: calc(8 * var(--s)); }
.seg-item {
  flex: 1;
  padding: calc(11 * var(--s)) 0;
  border: 1.5px solid #DFE3E8;
  background: #fff;
  border-radius: calc(8 * var(--s));
  font-size: calc(15 * var(--s));
  color: #4B5563;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}
.seg-item.on { border-color: #1F2328; background: #1F2328; color: #fff; }

.gen-submit {
  width: 100%;
  padding: calc(15 * var(--s)) 0;
  border: none;
  border-radius: calc(10 * var(--s));
  background: #1F2328;
  color: #fff;
  font-size: calc(17 * var(--s));
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: calc(1 * var(--s));
}
.gen-submit:disabled { background: #C9CED6; cursor: not-allowed; }

.result {
  margin-top: calc(28 * var(--s));
  padding: calc(20 * var(--s));
  background: #fff;
  border-radius: calc(12 * var(--s));
  border: 1px solid #E6E9EE;
  display: none;
}
.result.show { display: block; }
.result h3 { font-size: calc(16 * var(--s)); margin-bottom: calc(12 * var(--s)); color: #1F2329; }
.link-box {
  display: flex; gap: calc(10 * var(--s)); align-items: center;
  padding: calc(12 * var(--s));
  background: #F4F6F8;
  border-radius: calc(8 * var(--s));
  word-break: break-all;
  font-size: calc(14 * var(--s));
  color: #1F4F9E;
  line-height: 1.5;
}
.copy-btn {
  flex-shrink: 0;
  padding: calc(8 * var(--s)) calc(14 * var(--s));
  border: none; border-radius: calc(6 * var(--s));
  background: #1F2328; color: #fff;
  font-size: calc(13 * var(--s)); cursor: pointer;
  font-family: inherit;
}
.result-tip { margin-top: calc(12 * var(--s)); font-size: calc(13 * var(--s)); color: #8B929A; line-height: 1.7; }
.open-btn {
  display: block; width: 100%; margin-top: calc(14 * var(--s));
  padding: calc(11 * var(--s)) 0; text-align: center; text-decoration: none;
  background: #fff; border: 1px solid #DFE3E8; border-radius: calc(8 * var(--s));
  color: #1F2329; font-size: calc(14 * var(--s));
}

.preview-list {
  margin-top: calc(12 * var(--s));
  display: flex; flex-wrap: wrap; gap: calc(6 * var(--s));
  max-height: calc(160 * var(--s)); overflow-y: auto;
}
.preview-list span {
  padding: calc(4 * var(--s)) calc(9 * var(--s));
  background: #EEF1F5; border-radius: calc(20 * var(--s));
  font-size: calc(12 * var(--s)); color: #4B5563;
}

.page-flip { animation: fadeUp .4s cubic-bezier(.22,.9,.3,1); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(calc(14 * var(--s))); }
  to { opacity: 1; transform: none; }
}

/* 宽屏：生成页锁死缩放 */
@media (min-width: 620px) {
  body.gen-mode { --s: calc(560px / 375); }
  body.gen-mode .gen-wrap {
    background: #fff;
    min-height: 100vh;
    border-left: 1px solid #E6E9EE;
    border-right: 1px solid #E6E9EE;
  }
}

/* ============ 轻提示（找不到名字） ============ */
.toast {
  display: none;
  position: fixed;
  left: 50%; top: 74%;
  transform: translate(-50%, -50%) scale(.92);
  max-width: 80%;
  padding: calc(16 * var(--s)) calc(28 * var(--s));
  border-radius: calc(12 * var(--s));
  background: rgba(24, 20, 16, .88);
  color: #fff;
  font-size: calc(16 * var(--s));
  letter-spacing: calc(1 * var(--s));
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 999;
  backdrop-filter: blur(4px);
}
.toast.show { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ============ 后台记录列表 ============ */
body.adm-mode {
  overflow: auto;
  background: #F2F4F7;
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  color: #1F2329;
}
.adm-wrap { max-width: 760px; margin: 0 auto; padding: 18px 14px 70px; }
.adm-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.adm-top h1 { font-size: 20px; font-weight: 600; }
.adm-top .cnt { font-size: 13px; color: #8B929A; }

.adm-filter { display: flex; gap: 6px; margin: 14px 0 16px; }
.adm-filter button {
  flex: 1; padding: 8px 0; border: 1px solid #DFE3E8; background: #fff;
  border-radius: 8px; font-size: 13px; color: #4B5563; font-family: inherit; cursor: pointer;
}
.adm-filter button.on { background: #1F2328; border-color: #1F2328; color: #fff; }

.adm-card {
  background: #fff; border: 1px solid #E6E9EE; border-radius: 12px;
  padding: 14px; margin-bottom: 10px;
}
.adm-card.off { opacity: .62; }
.adm-row1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.adm-note { font-size: 16px; font-weight: 600; word-break: break-all; }
.adm-badge { flex: 0 0 auto; font-size: 11px; padding: 3px 9px; border-radius: 20px; }
.badge-on { background: #E6F4EA; color: #1A7F4B; }
.badge-off { background: #EEF0F3; color: #6B7280; }
.badge-exp { background: #FDECEC; color: #C0392B; }

.adm-meta { font-size: 13px; color: #6B7280; line-height: 1.75; margin-top: 7px; }
.adm-meta b { color: #1F2329; font-weight: 500; }
.adm-link {
  font-size: 12px; color: #1F4F9E; word-break: break-all;
  margin-top: 9px; padding: 8px 10px; background: #F5F7FA; border-radius: 7px;
}
.adm-acts { display: flex; gap: 7px; margin-top: 10px; }
.adm-btn {
  flex: 1; padding: 9px 0; border: 1px solid #DFE3E8; background: #fff;
  border-radius: 8px; font-size: 13px; color: #1F2329;
  font-family: inherit; cursor: pointer;
}
.adm-btn.primary { background: #1F2328; border-color: #1F2328; color: #fff; }
.adm-btn.danger { color: #C0392B; border-color: #F3C7C3; }
.adm-btn:active { opacity: .82; }

.adm-empty { text-align: center; padding: 60px 0; color: #9AA1A9; font-size: 14px; }

.adm-login { max-width: 340px; margin: 18vh auto 0; padding: 0 24px; text-align: center; }
.adm-login h1 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.adm-login p { font-size: 13px; color: #8B929A; margin-bottom: 22px; }
.adm-login input {
  width: 100%; padding: 12px 14px; border: 1.5px solid #DFE3E8; border-radius: 9px;
  font-size: 15px; font-family: inherit; outline: none; text-align: center;
}
.adm-login input:focus { border-color: #3B7DDD; }
.adm-login button {
  width: 100%; margin-top: 12px; padding: 13px 0; border: none; border-radius: 9px;
  background: #1F2328; color: #fff; font-size: 15px; font-family: inherit; cursor: pointer;
}

/* 生成页底部 */
.gen-foot { text-align: center; margin-top: 26px; }
.gen-demo {
  font-size: 14px;
  color: #3B7DDD;
  text-decoration: none;
  letter-spacing: .3px;
}
.gen-ver { font-size: 11px; color: #BFC5CD; margin-top: 10px; }

/* 样例模式标记 */
.demo-badge {
  font-size: calc(11 * var(--s));
  letter-spacing: calc(.5 * var(--s));
  color: var(--sub);
  opacity: .55;
  border: 1px dashed var(--line);
  border-radius: calc(20 * var(--s));
  padding: calc(4 * var(--s)) calc(12 * var(--s));
  margin-bottom: calc(6 * var(--s));
}

.adm-search { margin: 0 0 12px; }
.adm-search input {
  width: 100%; padding: 10px 14px; border: 1px solid #DFE3E8; border-radius: 9px;
  font-size: 14px; font-family: inherit; outline: none; background: #fff;
}
.adm-search input:focus { border-color: #3B7DDD; }

/* 加载态 */
.loading-box { display: flex; flex-direction: column; align-items: center; gap: calc(18 * var(--s)); }
.spin {
  width: calc(32 * var(--s)); height: calc(32 * var(--s));
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ 创建口令遮罩 ============ */
.key-mask {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  background: rgba(20, 22, 26, .55);
  backdrop-filter: blur(3px);
}
.key-mask[hidden] { display: none !important; }
.key-box {
  width: 100%;
  max-width: 340px;
  background: #fff;
  border-radius: 14px;
  padding: 26px 22px 18px;
  text-align: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
}
.key-title { font-size: 17px; font-weight: 600; color: #1F2329; }
.key-sub { font-size: 13px; color: #8B929A; margin: 8px 0 18px; line-height: 1.5; }
.key-box input {
  width: 100%; padding: 12px 12px; border: 1.5px solid #DFE3E8; border-radius: 9px;
  font-size: 16px; text-align: center; outline: none; font-family: inherit; color: #1F2329;
}
.key-box input:focus { border-color: #3B7DDD; }
.key-box button {
  width: 100%; margin-top: 12px; padding: 13px 0; border: none; border-radius: 9px;
  background: #1F2328; color: #fff; font-size: 15px; font-family: inherit;
  cursor: pointer; letter-spacing: 1px;
}
.key-box button:disabled { background: #9AA1A9; }
.key-tip { font-size: 13px; color: #C0392B; min-height: 18px; margin-top: 10px; }