/* ══════════════════════════════════════
 * KamiSystem 前台样式 v3 — 三合一卡片布局
 * 公告卡片 / 操作结果卡片 / 验证·取号·反查
 * ══════════════════════════════════════ */

/* ── 主容器 ── */
main{width:100%;max-width:440px;position:relative;z-index:1}

/* ── 卡片内标题 ── */
.card h2{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.card .desc{font-size:12px;color:var(--text-secondary);margin-bottom:14px}

/* ═════ 系统公告卡片（后台已设置才渲染） ═════ */
.announce-card{
  border-color:rgba(245,158,11,.3);
  background:var(--warning-soft);
  box-shadow:none;
}
.announce-card:hover{border-color:rgba(245,158,11,.45);box-shadow:var(--shadow-md)}
.announce-head{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;color:var(--warning);
  margin-bottom:6px;letter-spacing:.3px;
}
.announce-body{
  font-size:13px;line-height:1.7;
  color:var(--text-primary);
  word-break:break-word;white-space:pre-wrap;
}

/* ═════ 操作结果卡片 ═════ */
.result-box{
  min-height:48px;
  padding:12px 14px;
  border-radius:45px;
  line-height:1.6;
  font-size:13px;
  color:var(--text-secondary);
  background:var(--bg-secondary);
  border:1px solid var(--border-light);
  white-space:pre-wrap;
  word-break:break-word;
  transition:all .3s var(--transition);
}
.result-box .res-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.result-box .res-body{flex:1}
.result-box.ok{color:var(--success);border-color:rgba(16,185,129,.3);background:var(--success-soft)}
.result-box.err{color:var(--danger);border-color:rgba(239,68,68,.3);background:var(--danger-soft)}
.result-box.ok .res-body{color:var(--success)}
.result-box.err .res-body{color:var(--danger)}

/* ── 复制按钮 ── */
.btn-copy{
  padding:6px 12px;
  font-size:11px;
  background:rgba(16,185,129,.15);
  color:var(--success);
  border:1px solid rgba(16,185,129,.3);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:all var(--transition);
  display:none;
  box-shadow:none;flex-shrink:0;
}
.btn-copy:hover{background:rgba(16,185,129,.25);transform:none;box-shadow:none}
.btn-copy.show{display:inline-block}

/* ═════ 三合一卡片 ═════ */
.combo-card{text-align:center}

/* 三列标题区：标题 + 描述 */
.combo-titles{
  display:flex;gap:8px;
  margin-bottom:16px;
}
.combo-item{
  flex:1;min-width:0;
  text-align:center;
  padding:6px 2px;
}
.combo-name{
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:14px;font-weight:700;color:var(--text-primary);
  margin-bottom:3px;white-space:nowrap;
}
.combo-desc{
  font-size:11px;color:var(--text-muted);
  line-height:1.4;word-break:break-word;
}

/* 输入方框 */
.code-input{
  display:block;
  width:100%;
  padding:14px 16px;
  font-size:15px;
  text-align:center;
  letter-spacing:1px;
  border-radius:var(--radius-md);
  margin-bottom:16px;
  border:1px solid var(--border);
  background:var(--bg-secondary);
  color:var(--text-primary);
  transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);
}
.code-input::placeholder{color:var(--text-muted)}
.code-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
  outline:none;
}

/* 三操作按钮：验证 / 取出 / 反查 */
.combo-actions{display:flex;gap:8px}
.btn-act{
  flex:1;min-width:0;
  padding:12px 10px;
  border:none;border-radius:var(--radius-md);
  font-size:14px;font-weight:600;color:#fff;cursor:pointer;
  transition:all var(--transition);
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.btn-act:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn-act:active{transform:translateY(0)}
.btn-act:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.btn-verify{background:linear-gradient(135deg,var(--accent),#6d28d9);box-shadow:0 2px 8px rgba(124,58,237,.25)}
.btn-verify:hover{box-shadow:0 4px 14px rgba(124,58,237,.4)}
.btn-extract{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 2px 8px rgba(16,185,129,.25)}
.btn-extract:hover{box-shadow:0 4px 14px rgba(16,185,129,.4)}
.btn-lookup{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 2px 8px rgba(59,130,246,.25)}
.btn-lookup:hover{box-shadow:0 4px 14px rgba(59,130,246,.4)}

/* ── 响应式 ── */
@media(max-width:639px){
  body{padding:8px}
  .card{padding:14px 16px;margin-bottom:10px}
  .card h2{font-size:13px}
  .announce-body{font-size:12px}
  .combo-name{font-size:13px}
  .combo-desc{font-size:10px}
  .code-input{font-size:14px;padding:12px 12px}
  .btn-act{font-size:13px;padding:11px 6px}
  .result-box{font-size:12px;min-height:40px;padding:10px 12px}
  .ft{font-size:10px}
}
@media(min-width:640px) and (max-width:1023px){
  body{padding:24px}
  main{max-width:560px}
  .card{padding:20px 24px;margin-bottom:14px}
  .card h2{font-size:15px}
  .announce-body{font-size:13px}
  .combo-name{font-size:15px}
  .combo-desc{font-size:12px}
  .code-input{font-size:16px;padding:15px 16px}
  .btn-act{font-size:15px;padding:13px 12px}
  .result-box{font-size:14px;padding:14px 16px}
}
@media(min-width:1024px){
  body{padding:32px}
  main{max-width:620px}
  .card{padding:24px 28px;margin-bottom:16px}
  .card h2{font-size:16px}
  .announce-body{font-size:14px}
  .combo-name{font-size:16px}
  .combo-desc{font-size:12px}
  .code-input{font-size:17px;padding:16px 18px}
  .btn-act{font-size:16px;padding:14px 14px}
  .result-box{font-size:14px;padding:16px 18px}
  .ft{font-size:12px}
}