/* 麦伯乐 MINEBOLER v2 — 设计系统（Light） */
:root {
  --brand: #2F6BFF;
  --brand-deep: #1B47C4;
  --brand-soft: #EDF3FF;
  --teal: #00B3A4;
  --teal-soft: #E4FBF7;
  --gold: #F5A623;
  --gold-soft: #FEF6E7;
  --ink: #101828;
  --sub: #667085;
  --mute: #98A2B3;
  --line: #E7EAF0;
  --bg: #F4F6FA;
  --card: #FFFFFF;
  --ok: #00A870;
  --warn: #F79009;
  --danger: #E5484D;
  --danger-soft: #FEF1F1;
  --up: #E5484D;
  --down: #00A870;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --sh: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .06);
  --sh-lg: 0 12px 40px rgba(16, 24, 40, .12);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #D7DCE6; border-radius: 8px; }

/* ---------------- shell ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1440px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 18px;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 10px; overflow: hidden; flex: none;
  display: grid; place-items: center; line-height: 0;
}
.logo-mark svg { display: block; width: 100%; height: 100%; }
.logo-txt strong { display: block; font-size: 15px; letter-spacing: .5px; line-height: 1.15; }
.logo-txt span { display: block; font-size: 10px; color: var(--mute); letter-spacing: 1.6px; text-transform: uppercase; }

/* 系统状态条（离线演示等） */
#sysbar:empty { display: none; }
.sysbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #FFF7E6; border-bottom: 1px solid #FFE0A3; color: #7A4E00;
  padding: 9px 20px; font-size: 12.5px;
}
.sysbar b { font-weight: 600; }
.sysbar .sbtxt { color: #8A5A00; }
.sysbar code { background: rgba(255,255,255,.7); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.sysbar .link-btn { margin-left: auto; }
.sysbar .link-btn + .link-btn { margin-left: 0; }
.sysbar .dot2 {
  width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none;
  box-shadow: 0 0 0 3px rgba(247,144,9,.18);
}

/* 添加到桌面（PWA 安装）提示条 */
#installBar:empty { display: none; }
.installbar {
  display: flex; align-items: center; gap: 11px;
  background: linear-gradient(90deg, #EEF4FF 0%, #EAF7F5 100%);
  border-bottom: 1px solid #D6E4FF; color: #1B3A6B;
  padding: 9px 20px; font-size: 12.5px; line-height: 1.55;
}
.installbar .ib-ico { font-size: 17px; flex: none; }
.installbar .ib-txt { flex: 1; min-width: 0; }
.installbar .ib-txt b { font-weight: 600; }
.installbar .btn.sm { padding: 5px 12px; font-size: 12.5px; flex: none; }
.installbar .ib-x {
  flex: none; border: 0; background: transparent; color: #6B7E9E;
  font-size: 14px; cursor: pointer; padding: 2px 4px; line-height: 1;
}
.installbar .ib-x:hover { color: #1B3A6B; }
@media (max-width: 860px) {
  .installbar { padding: 9px 12px; gap: 8px; }
  .installbar .ib-txt { font-size: 12px; }
}

/* ---------- 登录身份切换（「我的」页内） ---------- */
#idPanel.flash { animation: idflash 1.1s ease; }
@keyframes idflash {
  0%, 100% { box-shadow: none; }
  25% { box-shadow: 0 0 0 3px rgba(47,107,255,.28); border-radius: 14px; }
}
.acc-now {
  display: flex; align-items: center; gap: 11px;
  background: linear-gradient(90deg, #F1F6FF 0%, #EDF8F6 100%);
  border: 1px solid #DAE6FF; border-radius: 12px; padding: 10px 12px; margin-bottom: 13px;
}
.acc-now-ava {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: rgba(255,255,255,.85); display: grid; place-items: center; font-size: 20px;
  box-shadow: 0 1px 3px rgba(16,40,90,.08);
}
.acc-now-n { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-now-s { font-size: 11.5px; color: var(--mute); margin-top: 2px; }

.role-tabs { display: flex; gap: 7px; margin-top: 2px; }
.role-tab {
  flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center;
  justify-content: center; gap: 5px;
  padding: 10px 4px; border: 1px solid var(--line); border-radius: 11px;
  background: #fff; color: var(--sub); cursor: pointer;
  transition: .18s border-color, .18s background, .18s color, .18s transform;
}
.role-tab:hover { border-color: #BFD2FF; transform: translateY(-1px); }
.role-tab.active {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 3px 10px rgba(47,107,255,.24);
}
.role-tab .rt-ico { font-size: 15px; line-height: 1; flex: none; }
.role-tab .rt-txt { font-size: 12px; font-weight: 600; white-space: nowrap; }

.acc-list {
  display: flex; flex-direction: column; gap: 7px;
  max-height: 288px; overflow-y: auto; padding-right: 3px;
  scrollbar-width: thin;
}
.acc-list::-webkit-scrollbar { width: 6px; }
.acc-list::-webkit-scrollbar-thumb { background: #D8E0EC; border-radius: 3px; }
.acc-list::-webkit-scrollbar-track { background: transparent; }
.acc-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px;
  background: #fff; cursor: pointer; transition: .18s border-color, .18s background;
}
.acc-item:hover { border-color: #BFD2FF; background: #FAFCFF; }
.acc-item.on { border-color: var(--brand); background: #F3F7FF; }
.acc-ava {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--bg); display: grid; place-items: center; font-size: 17px;
}
.acc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acc-info b { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-info i { font-style: normal; font-size: 11.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-tick { flex: none; color: var(--brand); font-weight: 700; font-size: 14px; }
@media (max-width: 860px) {
  .role-tab .rt-txt { font-size: 11px; }
}

/* ---------- 登录 / 注册 ---------- */
body.is-auth .topbar,
body.is-auth #installBar { display: none; }
body.is-auth { background: linear-gradient(160deg, #EEF4FF 0%, #F7FAFF 45%, #EDF8F6 100%); }

.auth-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 28px 16px 40px;
}
.auth-card {
  width: 100%; max-width: 430px; background: #fff; border-radius: 20px;
  box-shadow: 0 10px 40px rgba(16, 40, 90, .10), 0 2px 8px rgba(16, 40, 90, .05);
  padding: 26px 24px 22px;
}
.auth-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.auth-logo { line-height: 0; }
.auth-name { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: .3px; }
.auth-name span { font-size: 11px; font-weight: 500; color: var(--mute); letter-spacing: 1.4px; margin-left: 2px; }
.auth-slogan { font-size: 12px; color: var(--sub); margin-top: 3px; }

.auth-tabs {
  display: flex; gap: 4px; background: var(--bg); border-radius: 11px;
  padding: 4px; margin-bottom: 18px;
}
.auth-tab {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  padding: 9px 0; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  color: var(--sub); transition: .18s;
}
.auth-tab.on { background: #fff; color: var(--brand); box-shadow: 0 1px 4px rgba(16,40,90,.10); }

.auth-field { margin-bottom: 13px; }
.auth-field > label {
  display: block; font-size: 12.5px; color: var(--sub); font-weight: 600; margin-bottom: 6px;
}
.auth-input {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 11px; background: #fff;
  padding: 11px 13px; font-size: 14px; color: var(--ink); font-family: inherit;
  transition: .18s border-color, .18s box-shadow;
}
.auth-input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(47,107,255,.12);
}
.auth-input::placeholder { color: #A9B4C6; }
select.auth-input { appearance: none; background-image: none; cursor: pointer; }

.auth-err {
  background: #FFF1F0; border: 1px solid #FFD6D2; color: #B42318;
  border-radius: 10px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 13px; line-height: 1.6;
}
.auth-submit { margin-top: 6px; padding: 12px 0; font-size: 15px; }
.auth-submit[disabled] { opacity: .6; cursor: default; }
.auth-foot {
  margin-top: 15px; text-align: center; font-size: 12px; color: var(--mute); line-height: 1.9;
}
.auth-foot b { color: var(--brand); cursor: pointer; font-weight: 600; }
.auth-foot a { color: var(--brand); text-decoration: none; }
.auth-note { margin-top: 18px; font-size: 11.5px; color: #8B97AB; text-align: center; }

/* ---------- 顶栏账号 ---------- */
.who-name { font-size: 13px; font-weight: 600; color: var(--ink); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.who { display: flex; align-items: center; gap: 7px; border: 0; background: transparent; cursor: pointer; padding: 4px 6px; border-radius: 10px; transition: .18s background; }
button.who:hover { background: var(--bg); }
.doc-link { text-decoration: none; }

/* ---------- 账号信息行 ---------- */
.acc-rows { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.acc-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 2px; border-bottom: 1px dashed var(--line); font-size: 13px;
}
.acc-row:last-child { border-bottom: 0; }
.acc-row span { color: var(--sub); }
.acc-row b { color: var(--ink); font-weight: 600; }
.acc-actions { display: flex; gap: 9px; margin-top: 14px; }
.acc-actions .btn { flex: 1; }
.btn.danger { color: #B42318; border-color: #FFD6D2; background: #FFF9F8; }
.btn.danger:hover { background: #FFF1F0; }

@media (max-width: 860px) {
  .auth-card { padding: 22px 18px 18px; border-radius: 16px; }
  .auth-wrap { padding: 18px 12px 30px; justify-content: flex-start; padding-top: 8vh; }
  .who-name { max-width: 76px; }
}


.role-switch { display: flex; background: var(--bg); border-radius: 12px; padding: 3px; gap: 2px; }
.role-switch button {
  border: 0; background: transparent; padding: 7px 14px; border-radius: 9px;
  cursor: pointer; color: var(--sub); font-size: 13px; transition: .18s; white-space: nowrap;
}
.role-switch button.active { background: #fff; color: var(--brand); font-weight: 600; box-shadow: var(--sh); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.who { display: flex; align-items: center; gap: 8px; background: var(--brand-soft); padding: 5px 12px 5px 6px; border-radius: 999px; }
.who .av { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 14px; }
.who select { border: 0; background: transparent; font-size: 13px; outline: none; cursor: pointer; max-width: 190px; }
.link-btn {
  border: 1px solid var(--line); background: #fff; color: var(--sub);
  padding: 6px 12px; border-radius: 9px; cursor: pointer; font-size: 13px;
}
.link-btn:hover { color: var(--brand); border-color: var(--brand); }

.stage { max-width: 1440px; margin: 0 auto; padding: 22px 20px 40px; display: flex; justify-content: center; }
.phone-wrap { display: flex; gap: 34px; align-items: flex-start; }
.phone-note { width: 280px; padding-top: 20px; }
.phone-note h3 { margin: 0 0 10px; font-size: 17px; }
.phone-note p { margin: 0 0 14px; color: var(--sub); font-size: 13px; }
.phone-note ul { margin: 0; padding-left: 18px; color: var(--sub); font-size: 13px; }
.phone-note li { margin-bottom: 6px; }
.phone {
  width: 398px; background: #fff; border-radius: 34px; box-shadow: var(--sh-lg);
  border: 8px solid #12161F; overflow: hidden; position: relative; display: flex; flex-direction: column;
  min-height: 812px;
}
.phone-screen { flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--bg); padding-bottom: 74px; }
.phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 22px; background: #12161F; border-radius: 0 0 14px 14px; z-index: 30; }
.tabbar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 66px; background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  display: grid; grid-auto-flow: column; align-items: center; z-index: 40;
}
.tabbar button {
  border: 0; background: none; cursor: pointer; color: var(--mute);
  display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; padding: 6px 0;
}
.tabbar button.active { color: var(--brand); }
.tabbar .ico { font-size: 19px; line-height: 1; position: relative; }
.tabbar .dot { position: absolute; top: -3px; right: -7px; min-width: 15px; height: 15px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; display: grid; place-items: center; padding: 0 3px; }

/* admin frame */
.admin-frame { width: 100%; display: flex; gap: 20px; align-items: flex-start; }
.aside {
  width: 208px; flex: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; position: sticky; top: 74px;
}
.aside .grp { font-size: 11px; color: var(--mute); padding: 10px 10px 6px; letter-spacing: .6px; }
.aside button {
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer; color: var(--sub);
  padding: 9px 10px; border-radius: var(--r-sm); display: flex; gap: 9px; align-items: center; font-size: 13.5px; margin-bottom: 2px;
}
.aside button:hover { background: var(--bg); color: var(--ink); }
.aside button.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.content { flex: 1; min-width: 0; }
@media (max-width: 900px) { .admin-frame { flex-direction: column; } .aside { width: 100%; position: static; } }

/* ---------------- generic ---------------- */
.page-hd {
  position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px); padding: 30px 16px 12px; border-bottom: 1px solid var(--line);
}
.page-hd .ttl { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.page-hd .back { border: 0; background: none; cursor: pointer; font-size: 18px; color: var(--sub); padding: 0; }
.sect { padding: 14px 16px 4px; }
.sect-t { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sect-t h3 { margin: 0; font-size: 15px; }
.sect-t .more { font-size: 12px; color: var(--mute); cursor: pointer; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); }
.pad { padding: 14px; }
.hd-strip {
  background: linear-gradient(135deg, #2F6BFF 0%, #00B3A4 100%); color: #fff; padding: 34px 16px 18px;
}
.hd-strip .t1 { font-size: 13px; opacity: .9; }
.hd-strip .t2 { font-size: 21px; font-weight: 600; margin: 4px 0 12px; }
.search {
  display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 9px 12px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
}
.search input { flex: 1; border: 0; outline: none; font-size: 14px; background: transparent; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 6px 13px; font-size: 12.5px; cursor: pointer; color: var(--sub); white-space: nowrap; transition: .16s;
}
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.gold.active { background: var(--gold); border-color: var(--gold); }

.rowlist { padding: 0 16px; }
.job-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 13px 14px; margin-bottom: 10px; cursor: pointer; transition: .18s;
}
.job-card:hover { border-color: #C7D7FF; box-shadow: var(--sh); transform: translateY(-1px); }
.job-card .l1 { display: flex; align-items: flex-start; gap: 10px; }
.job-card .name { flex: 1; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.job-card .pay { color: var(--up); font-weight: 700; font-size: 16px; white-space: nowrap; }
.job-card .unit { font-size: 11px; color: var(--mute); font-weight: 400; }
.job-card .meta { color: var(--sub); font-size: 12px; margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--bg); color: var(--sub); }
.tag.b { background: var(--brand-soft); color: var(--brand); }
.tag.g { background: var(--gold-soft); color: #B76E00; }
.tag.t { background: var(--teal-soft); color: #00796D; }
.tag.r { background: var(--danger-soft); color: var(--danger); }
.badge-top { font-size: 10.5px; background: linear-gradient(135deg, #FF6B35, #F5A623); color: #fff; padding: 2px 7px; border-radius: 5px; margin-right: 5px; }
.badge-ai { font-size: 10.5px; background: linear-gradient(135deg, #6E8BFF, #B45CFF); color: #fff; padding: 2px 7px; border-radius: 5px; }

.score-ring { width: 52px; flex: none; text-align: center; }
.score-ring .n { font-size: 17px; font-weight: 700; line-height: 1; }
.score-ring .l { font-size: 10px; color: var(--mute); }
.score-ring.a .n { color: var(--ok); }
.score-ring.b .n { color: var(--brand); }
.score-ring.c .n { color: var(--warn); }
.score-ring.d .n { color: var(--danger); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 1100px) { .grid4 { grid-template-columns: repeat(2, 1fr); } }
.metric { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; }
.metric .k { color: var(--sub); font-size: 12px; display: flex; align-items: center; gap: 5px; }
.metric .v { font-size: 21px; font-weight: 700; margin-top: 3px; letter-spacing: -.3px; }
.metric .s { font-size: 11px; color: var(--mute); }
.metric.accent { background: linear-gradient(135deg, #F0F5FF, #F4FBF9); border-color: #DCE8FF; }

.btn {
  border: 0; border-radius: 11px; padding: 11px 16px; font-size: 14.5px; font-weight: 600; cursor: pointer;
  background: var(--brand); color: #fff; transition: .18s; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.985); }
.btn.block { width: 100%; }
.btn.ghost { background: #fff; color: var(--sub); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn.gold { background: linear-gradient(135deg, #F5A623, #FF8A3D); }
.btn.danger { background: var(--danger); }
.btn.sm { padding: 7px 12px; font-size: 12.5px; border-radius: 9px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12.5px; color: var(--sub); margin-bottom: 6px; font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; outline: none; background: #fff; font-size: 14px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 107, 255, .1); }
.field textarea { min-height: 84px; resize: vertical; line-height: 1.6; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ai-box {
  border: 1px dashed #B9CEFF; background: linear-gradient(135deg, #F7FAFF, #F4FBF9);
  border-radius: var(--r-md); padding: 12px; margin-bottom: 12px;
}
.ai-box .top { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--brand-deep); margin-bottom: 8px; }
.ai-box .body { font-size: 12.5px; color: var(--sub); white-space: pre-wrap; line-height: 1.7; }
.ai-badge { background: linear-gradient(135deg, #6E8BFF, #B45CFF); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 5px; }

.bar { height: 6px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--teal)); border-radius: 4px; transition: width .5s ease; }
.bar.gold i { background: linear-gradient(90deg, var(--gold), #FF8A3D); }
.bar.red i { background: linear-gradient(90deg, var(--danger), #FF8A8A); }

.dim-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.dim-row .nm { width: 58px; font-size: 12px; color: var(--sub); flex: none; }
.dim-row .bw { flex: 1; }
.dim-row .vl { width: 34px; text-align: right; font-size: 12px; font-weight: 600; }

.notice { padding: 10px 12px; border-radius: var(--r-md); font-size: 12.5px; margin-bottom: 10px; display: flex; gap: 8px; }
.notice.info { background: var(--brand-soft); color: var(--brand-deep); }
.notice.warn { background: var(--gold-soft); color: #8A5A00; }
.notice.err { background: var(--danger-soft); color: #A32026; }
.notice.ok { background: var(--teal-soft); color: #00695F; }

.empty { text-align: center; padding: 46px 20px; color: var(--mute); }
.empty .ic { font-size: 34px; }

table.tb { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
table.tb th { text-align: left; font-weight: 600; color: var(--sub); font-size: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.tb td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tb tr:last-child td { border-bottom: 0; }
table.tb tr:hover td { background: #FAFBFD; }
.tb-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: auto; background: #fff; }

/* admin */
.admin-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.admin-hd h1 { margin: 0; font-size: 21px; }
.admin-hd .sub { color: var(--sub); font-size: 13px; margin-top: 3px; }
.chart { width: 100%; height: 268px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters select, .filters input { border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; outline: none; background: #fff; font-size: 13px; }

/* list row */
.lrow { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.lrow:last-child { border-bottom: 0; }
.ava { width: 40px; height: 40px; border-radius: 12px; background: var(--bg); display: grid; place-items: center; font-size: 19px; flex: none; }
.lrow .mid { flex: 1; min-width: 0; }
.lrow .t { font-size: 14px; font-weight: 600; }
.lrow .d { font-size: 12px; color: var(--sub); margin-top: 2px; }

/* tabs */
.tabs { display: flex; gap: 4px; background: #fff; padding: 4px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; }
.tabs button { flex: 1; border: 0; background: none; padding: 8px; border-radius: 9px; cursor: pointer; font-size: 13px; color: var(--sub); position: relative; }
.tabs button.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

/* bottom action bar */
.actbar {
  position: sticky; bottom: 0; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); padding: 10px 14px; display: flex; gap: 10px; align-items: center; z-index: 25;
}
.actbar .price { font-size: 19px; font-weight: 700; color: var(--up); }
.actbar .unit { font-size: 11px; color: var(--mute); }

/* modal / sheet */
.mask { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 90; display: grid; place-items: center; padding: 20px; }
.sheet { background: #fff; border-radius: 18px; width: 100%; max-width: 460px; max-height: 86vh; overflow: auto; box-shadow: var(--sh-lg); }
.sheet-h { padding: 16px 18px 10px; display: flex; align-items: center; justify-content: space-between; }
.sheet-h h3 { margin: 0; font-size: 16px; }
.sheet-b { padding: 0 18px 18px; }
.close { border: 0; background: none; font-size: 22px; color: var(--mute); cursor: pointer; line-height: 1; }

/* toast */
#toast { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: rgba(16, 24, 40, .92); color: #fff; padding: 10px 18px; border-radius: 11px; font-size: 13.5px; box-shadow: var(--sh-lg); animation: tin .25s ease; }
.toast.ok { background: #0B815C; }
.toast.err { background: #B42318; }
@keyframes tin { from { opacity: 0; transform: translateY(-10px); } }

@keyframes fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.anim { animation: fadeup .34s cubic-bezier(.2, .8, .3, 1) both; }
.d1 { animation-delay: .04s; } .d2 { animation-delay: .08s; } .d3 { animation-delay: .12s; }
.d4 { animation-delay: .16s; } .d5 { animation-delay: .2s; } .d6 { animation-delay: .24s; }

/* markdown-ish doc */
.doc { max-width: 980px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px 46px; box-shadow: var(--sh); }
.doc h1 { font-size: 27px; margin: 0 0 6px; }
.doc h2 { font-size: 19px; margin: 34px 0 12px; padding-left: 11px; border-left: 4px solid var(--brand); }
.doc h3 { font-size: 15.5px; margin: 22px 0 8px; color: var(--brand-deep); }
.doc p, .doc li { color: #344054; line-height: 1.85; font-size: 14px; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 13px; }
.doc th { background: #F1F5FD; text-align: left; padding: 9px 11px; border: 1px solid var(--line); font-size: 12.5px; }
.doc td { padding: 9px 11px; border: 1px solid var(--line); vertical-align: top; line-height: 1.7; }
.doc ul { padding-left: 20px; }
.doc .lead { font-size: 15px; color: var(--sub); }
.doc .kv { background: #F8FAFD; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 10px 0; }

@media (max-width: 860px) {
  .stage { padding: 14px 10px 30px; }
  .phone-note { display: none; }
  .phone { width: 100%; border: 0; border-radius: 0; min-height: 100vh; box-shadow: none; }
  .tabbar { position: fixed; }
  .doc { padding: 24px 18px; }
}