/* 注册网站样式 / License site stylesheet
 * 单文件，请勿拆分 / Single file, do not split.
 * 内容区宽度由 --content-width 控制（由模板注入）。
 * Content width is driven by --content-width (injected by the template).
 */

:root {
  --content-width: 720px;
  --ink: #222;
  --muted: #666;
  --line: #e3e3e3;
  --brand: #1a73e8;
  --brand-dark: #1558b0;
  --ok: #1e9e57;
  --err: #d33;
  --card-bg: rgba(255, 255, 255, 0.94);
  --radius: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  /* 背景整页固定铺满 / full-page fixed background */
  background: #f2f4f7 url(Images/bg.png) center / cover no-repeat fixed;
  min-height: 100vh;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- 布局 / Layout ---- */
.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 16px;
}

/* header：Banner 在导航上方 / header: banner above the nav */
.site-header {
  background: var(--card-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(2px);
}

.banner img {
  display: block;
  width: 100%;
  height: 90px;              /* 窄条高度 / slim bar height */
  object-fit: cover;         /* 上下裁切填满，不变形 / crop to fill, no distortion */
  object-position: center;
}

/* 窄屏再矮一点 / even slimmer on small screens */
@media (max-width: 620px) {
  .banner img {
    height: 64px;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
}

.nav .brand {
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  margin-right: auto;
}

/* 首页图标 / Home icon（最左，链接到首页） */
.nav .home-icon {
  display: inline-flex;
  align-items: center;
}
.nav .home-icon img {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.nav a { color: var(--muted); }
.nav a:hover { color: var(--brand); }

/* 语言切换 / Language switch */
select.lang-switch {
  width: auto;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
select.lang-switch:focus { border-color: var(--brand); }

/* ---- 内容卡片 / Content card ---- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin: 20px 0;
}

.card h1 { margin: 0 0 16px; font-size: 20px; }
.card h2 { margin: 20px 0 12px; font-size: 17px; }

/* ---- 表单 / Forms ---- */
.form-row { margin-bottom: 14px; }
.form-row label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 13px;
}

input[type=text], input[type=password], input[type=email],
input[type=tel], input[type=number], textarea, select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand);
}

textarea { min-height: 72px; resize: vertical; }

.muted { color: var(--muted); font-size: 14px; }
.code-box {
  background: #0f172a;
  color: #e2e8f0;
  padding: 14px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre;
}

/* ---- 管理表格 / Admin tables ---- */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 14px;
}
.admin-table th, .admin-table td {
  border: 1px solid #e2e8f0;
  padding: 7px 9px;
  text-align: left;
  vertical-align: top;
}
.admin-table th { background: #f1f5f9; }
.admin-table .mono { font-family: monospace; font-size: 12px; word-break: break-all; }
.admin-table .ops { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-table .ops form { margin: 0; }
.badge {
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 8px;
}
.btn.small { padding: 4px 10px; font-size: 13px; width: auto; }
.btn.danger { background: #dc2626; }
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.inline-form input { width: auto; flex: 1 1 120px; }
.inline-form .btn { flex: 0 0 auto; }

.btn {
  display: inline-block;
  padding: 9px 18px;
  border: 0;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.btn:hover { background: var(--brand-dark); }
.btn.full { width: 100%; }
.btn.ghost {
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
}

/* ---- 消息提示 / Flash messages ---- */
.msg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 14px;
}
.msg img { width: 18px; height: 18px; flex: 0 0 auto; }
.msg.ok  { background: #e7f6ee; color: var(--ok); }
.msg.err { background: #fdecec; color: var(--err); }

/* ---- 表格 / Tables ---- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
th { color: var(--muted); font-weight: 600; background: #fafafa; }

/* ---- 用户区 / User chip ---- */
.user-chip { display: inline-flex; align-items: center; gap: 6px; }
.user-chip img { width: 20px; height: 20px; border-radius: 50%; }

/* ---- 页脚 / Footer ---- */
.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 20px 0 40px;
}

/* ---- 小屏适配 / Small screens ---- */
@media (max-width: 620px) {
  .card { padding: 16px; margin: 12px 0; }
  .nav { gap: 10px; font-size: 14px; }
  .nav .brand { font-size: 15px; }
}