/* ===========================================================
   诗韵口腔 · 排号系统 基础样式
   风格：白 + 浅灰 + 浅青绿底，青绿强调色，无衬线，禁用深色沉底区块
   =========================================================== */

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

:root {
  /* 品牌色 */
  --c-primary:      #0E7C66;
  --c-primary-d:    #0A5F4E;
  --c-primary-l:    #E6F4F0;
  --c-primary-xl:   #F2FAF8;

  /* 中性 */
  --c-bg:           #F6F9F8;
  --c-surface:      #FFFFFF;
  --c-line:         #E4EAE8;
  --c-line-2:       #EFF3F2;
  --c-text:         #192320;
  --c-text-2:       #5B6B67;
  --c-text-3:       #96A49F;

  /* 语义色 */
  --c-danger:       #C4442F;
  --c-danger-l:     #FBEDEA;
  --c-warn:         #B7791F;
  --c-warn-l:       #FDF6E7;
  --c-info:         #1D6FB8;
  --c-info-l:       #EAF3FB;
  --c-gold:         #9A7B2E;
  --c-gold-l:       #FBF5E6;

  /* 圆角 / 阴影 */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  --r-xl: 22px;
  --sh-1: 0 1px 2px rgba(16, 40, 34, .05);
  --sh-2: 0 4px 16px rgba(16, 40, 34, .07);
  --sh-3: 0 12px 36px rgba(16, 40, 34, .10);

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-num: "DIN Alternate", "SF Mono", "Menlo", Consolas, monospace;
}

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

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
a { color: var(--c-primary); text-decoration: none; }

/* ─────────── 顶栏 ─────────── */

.topbar {
  height: 58px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 4px var(--c-primary-l);
}
.brand small {
  font-weight: 400;
  color: var(--c-text-3);
  font-size: 12px;
  margin-left: 2px;
}
.spacer { flex: 1; }

/* ─────────── 按钮 ─────────── */

.btn {
  appearance: none;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--r-s);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .06s, opacity .15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1.4;
}
.btn:hover { background: var(--c-primary-xl); border-color: #CFE3DD; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-d); border-color: var(--c-primary-d); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--c-text-2); }
.btn-ghost:hover { background: var(--c-primary-xl); color: var(--c-primary); }

.btn-danger { color: var(--c-danger); border-color: #F0D5CF; background: var(--c-surface); }
.btn-danger:hover { background: var(--c-danger-l); border-color: #E6C3BA; }

.btn-warn { color: var(--c-warn); border-color: #EDDDB6; background: var(--c-surface); }
.btn-warn:hover { background: var(--c-warn-l); }

.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: var(--r-s); }
.btn-lg { padding: 12px 22px; font-size: 15px; border-radius: var(--r-m); }
.btn-block { width: 100%; }

/* ─────────── 表单 ─────────── */

.field { margin-bottom: 12px; }
.field > label {
  display: block;
  font-size: 12px;
  color: var(--c-text-2);
  margin-bottom: 5px;
  font-weight: 500;
}
.input, .select, .textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-s);
  padding: 8px 11px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-l);
}
.input::placeholder { color: var(--c-text-3); }
.select { appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%235B6B67' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }

.check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--c-text-2);
  cursor: pointer;
  user-select: none;
}
.check input { accent-color: var(--c-primary); width: 15px; height: 15px; }

/* ─────────── 卡片 ─────────── */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-m);
  box-shadow: var(--sh-1);
}
.card-hd {
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-line-2);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.card-hd .count {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-3);
}
.card-bd { padding: 14px; }
.card-bd.flush { padding: 0; }

/* ─────────── 徽章 ─────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 99px;
  line-height: 1.7;
  white-space: nowrap;
}
.badge-green  { background: var(--c-primary-l); color: var(--c-primary-d); }
.badge-gray   { background: #EEF2F1; color: var(--c-text-2); }
.badge-red    { background: var(--c-danger-l); color: var(--c-danger); }
.badge-warn   { background: var(--c-warn-l); color: var(--c-warn); }
.badge-info   { background: var(--c-info-l); color: var(--c-info); }
.badge-gold   { background: var(--c-gold-l); color: var(--c-gold); }

/* ─────────── Toast ─────────── */

#toast-wrap {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: #22302C;
  color: #fff;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: var(--r-m);
  box-shadow: var(--sh-3);
  animation: toastIn .2s ease;
  max-width: 80vw;
}
.toast.ok   { background: var(--c-primary); }
.toast.err  { background: var(--c-danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ─────────── 遮罩 / 空态 ─────────── */

.mask {
  position: fixed;
  inset: 0;
  background: rgba(20, 40, 36, .38);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
/* 遮罩层里的卡片。
   ★ 类名必须与页面内容区的 .panel 区分开：
   页面里给「标签页内容区」用过 .panel { display:none }，
   如果这里也用 .panel，登录卡会被那条规则一起隐藏 —— 只剩灰底、啥都看不见。 */
.mask .mask-card {
  background: var(--c-surface);
  border-radius: var(--r-l);
  box-shadow: var(--sh-3);
  padding: 28px;
  width: 100%;
  max-width: 380px;
}
.mask .mask-card h3 { font-size: 17px; margin-bottom: 4px; }
.mask .mask-card p.sub { color: var(--c-text-2); font-size: 13px; margin: 0 0 18px; }

.empty {
  text-align: center;
  color: var(--c-text-3);
  font-size: 13px;
  padding: 26px 10px;
}

.hide { display: none !important; }
.num  { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.muted { color: var(--c-text-3); }