:root {
  --blue: #3b8cff;
  --ink: #303133;
  --muted: #909399;
  --line: #ebeef5;
  --bg: #f5f7fb;
  --gold: #e0ae58;
  --gold-2: #d7a44a;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: var(--blue); text-decoration: none; }
button, input, select, textarea { font: inherit; }
.shell { min-height: 100vh; display: flex; }
.side {
  width: 210px; background: #fff; border-right: 1px solid #eef1f6; flex: none;
  position: sticky; top: 0; height: 100vh; overflow: auto;
}
.side-logo {
  display: flex; align-items: center; height: 72px; padding: 0 14px;
  border-bottom: 1px solid #f2f4f8;
}
.side-logo img { height: 52px; width: auto; display: block; }
.item, .group-btn, .sub a {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 44px; padding: 0 16px; color: #606266; background: transparent; border: 0; cursor: pointer; text-align: left;
}
.item.on, .sub a.on { background: #f2f8ff; color: var(--blue); }
.group-btn b { margin-left: auto; width: 6px; height: 6px; border-right: 1.5px solid #99a; border-bottom: 1.5px solid #99a; transform: rotate(45deg); }
.group.open .group-btn b { transform: rotate(225deg); margin-top: 4px; }
.sub { display: none; }
.group.open .sub { display: block; }
.sub a { padding-left: 40px; min-height: 38px; font-size: 13px; }
.ico { width: 16px; text-align: center; color: #7d8da3; font-style: normal; }
.ico::before { content: "•"; }
.ico.home::before { content: "⌂"; }
.ico.globe::before { content: "◎"; }
.ico.server::before { content: "▣"; }
.ico.cloud::before { content: "☁"; }
.ico.vps::before { content: "◌"; }
.ico.lock::before { content: "⌗"; }
.ico.cdn::before { content: "⌁"; }
.ico.user::before { content: "☺"; }
.ico.order::before { content: "☰"; }
.ico.ticket::before { content: "✉"; }
.ico.wallet::before { content: "¥"; }
.ico.gift::before { content: "✦"; }
.main { flex: 1; min-width: 0; }
.top {
  height: 56px; background: #fff; display: flex; align-items: center; justify-content: flex-end;
  padding: 0 18px; border-bottom: 1px solid #eef1f6; position: sticky; top: 0; z-index: 5;
}
.top-actions { display: flex; align-items: center; gap: 16px; color: #606266; }
.top-actions a { color: #606266; }
.lang { position: relative; }
.lang-btn { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 6px 0; }
.lang-menu {
  display: none; position: absolute; top: 100%; right: 0; z-index: 20;
  min-width: 128px; padding: 6px; background: #fff; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.lang:hover .lang-menu,
.lang:focus-within .lang-menu { display: block; }
.lang-menu a { display: block; padding: 8px 10px; border-radius: 6px; color: #303133; }
.lang-menu a.on,
.lang-menu a:hover { background: #f5f7fa; color: var(--blue); }
.user-menu { position: relative; }
.user-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary i {
  width: 26px; height: 26px; border-radius: 50%; background: #d9dde6; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-style: normal;
}
.user-menu div {
  position: absolute; right: 0; top: 32px; background: #fff; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08); min-width: 120px; padding: 6px;
}
.user-menu a { display: block; padding: 8px 10px; border-radius: 6px; }
.user-menu a:hover { background: #f5f7fa; }
.content { padding: 14px 16px 28px; }
.crumb { color: #909399; margin: 4px 2px 12px; }
.crumb span { margin: 0 6px; }
.card { background: #fff; border-radius: 8px; padding: 16px 18px; box-shadow: 0 1px 4px rgba(20,40,80,.04); }
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
.dash-main, .dash-side { display: grid; gap: 14px; align-content: start; }
.profile-card .who { display: flex; gap: 12px; align-items: center; }
.avatar, .agent i {
  width: 54px; height: 54px; border-radius: 50%; background: #f5a524; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.mail { margin: 0; color: #666; }
.who em { background: #fff4e5; color: #e39b2b; font-style: normal; border-radius: 99px; padding: 1px 8px; font-size: 12px; margin-left: 6px; }
.uid { color: var(--muted); margin-left: 8px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.stat-row div { background: #f7f9fc; border-radius: 8px; padding: 12px; }
.stat-row p { margin: 0; color: #888; }
.stat-row strong { display: block; font-size: 22px; margin: 4px 0; }
.orange { color: #f0a020; }
.soft { font-size: 16px !important; }
.stat-row a { font-size: 12px; }
.recent { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; padding: 8px 0 4px; }
.recent b { display: block; color: #7a5cff; font-size: 28px; font-weight: 500; }
.recent span { color: #888; font-size: 12px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.svc-grid a { background: #f7f9fc; border-radius: 8px; min-height: 64px; display: flex; align-items: center; padding: 0 16px; color: var(--ink); }
.service-card { text-align: center; }
.agent { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 8px 0 14px; }
.btn-line, .btn, .btn-pay, .pill {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 0; cursor: pointer;
}
.btn-line { height: 34px; padding: 0 16px; background: #fff7ea; color: #e39b2b; width: 100%; }
.card h3 { margin: 0 0 10px; font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; }
.card h3 a { font-weight: 400; font-size: 12px; color: #f0a020; }
.mini-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; color: #555; font-size: 12px; }
.mini-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-row em { font-style: normal; color: #e39b2b; }
.mini-row em.doc { color: #3cb98a; }
.mini-row time { color: #aaa; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 12px; }
.filters label, .stack label { display: grid; gap: 4px; color: #666; font-size: 13px; }
.filters input, .filters select, .stack input, .stack select, .stack textarea {
  height: 34px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 10px; min-width: 180px;
}
.stack textarea { height: auto; padding: 8px 10px; }
.btn { height: 32px; padding: 0 14px; background: var(--blue); color: #fff; }
.btn.ghost { background: #fff; color: #606266; border: 1px solid #dcdfe6; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 10px; border-bottom: 1px solid #f0f2f5; text-align: left; white-space: nowrap; }
th { background: #fafafa; color: #909399; font-weight: 500; }
.empty { text-align: center !important; color: #bbb; padding: 28px !important; }
.pager { color: #909399; text-align: right; }
.tag { padding: 2px 8px; border-radius: 4px; background: #fff4e8; color: #e6a23c; }
.tag.ok { background: #f0f9eb; color: #67c23a; }
.tag.check { background: #eef4ff; color: #1d4d8f; }
.tag.back { background: #f8f1f4; color: #a33b55; }
.gold.back span { background: #a33b55; }
.console .tag.back { background: #f8f1f4; color: #a33b55; }
.pay-state.is-back .pay-state-amount { color: #a33b55; }
.reconcile {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #d6e4ff;
  border-radius: 12px;
  background: #f5f9ff;
}
.reconcile h3 { margin: 0 0 6px; font-size: 15px; color: #16325c; }
.reconcile p { margin: 0 0 8px; }
.reconcile-no {
  margin: 8px 0 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
  font: 15px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
  color: #1c2434;
}
.reconcile-refund { margin-top: 12px; }
.bill-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.bill { padding: 20px 22px 18px; }
.bill-tools, .bill-head, .parties { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bill-tools { color: #7d8b9e; font-size: 13px; }
.bill-brand img { height: 48px; width: auto; display: block; }
.pill { height: 28px; padding: 0 12px; color: #fff; background: #3b8cff; margin-left: 6px; transition: transform .2s ease, opacity .2s ease; }
.pill:hover { transform: translateY(-1px); }
.pill.teal { background: #2fbe9a; }
.gold {
  margin: 16px 0; display: grid; grid-template-columns: 1.4fr .6fr; min-height: 58px;
  border-radius: 10px; overflow: hidden; color: #fff;
  background: linear-gradient(90deg, #16325c, #1d4d8f);
}
.gold strong, .gold span { display: flex; align-items: center; justify-content: center; font-size: 16px; letter-spacing: .03em; }
.gold strong { font-weight: 600; }
.gold span { background: #c9892d; font-weight: 650; }
.gold.check span { background: #2f7bff; }
.gold.paid { background: linear-gradient(90deg, #146b45, #1c8a58); }
.gold.paid span { background: #127a4c; }
.gold.off span { background: #8b97a8; }
.gold.back span { background: #a33b55; }
.parties { padding: 4px 0 16px; }
.parties p { margin: 0; color: #999; font-size: 12px; }
.parties b { font-size: 15px; }
.bill-table { width: 100%; }
.bill-table th { background: #f7f8fa; }
.bill-table th, .bill-table td { padding: 12px 10px; vertical-align: top; }
.content .bill-table td:last-child,
.content .bill-table th:last-child,
.content .bill-table td:nth-child(3),
.content .bill-name { white-space: nowrap; }
.bill-table th:last-child, .bill-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.bill-name { font-weight: 650; color: #1c2434; }
.bill-specs { display: flex; flex-wrap: wrap; gap: 6px; }
.bill-specs span {
  display: inline-flex; align-items: center;
  padding: 4px 8px; border-radius: 999px;
  background: #f3f6fb; color: #3d4b60; font-size: 12px; line-height: 1.35;
}
.bill-table .sum td { color: #606266; background: #fbfcfe; }
.bill-table tr.pay-due td { color: #1c2434; font-weight: 650; font-size: 15px; background: #fff7f2; }
.pay-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 14px; }
.pay-step > i {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #1d4d8f; color: #fff; font-style: normal; font-size: 12px; font-weight: 650;
}
.pay-state { padding: 6px 2px 2px; }
.pay-state-kicker { margin: 0; color: #7d8b9e; font-size: 13px; }
.pay-state-amount {
  margin: 8px 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.pay-state.is-paid .pay-state-amount { color: #157a48; }
.pay-state.is-check .pay-state-amount { color: #1d4d8f; }
.pay-state p { margin: 0; color: #5c6b82; font-size: 13px; line-height: 1.6; }
.pay-state .pay-ref { margin-top: 8px; word-break: break-all; color: #1c2434; }
.pay-card { position: sticky; top: 72px; }
.pay-card h3 { display: block; }
.pay-card .stack input { width: 100%; min-width: 0; }
.pay-option {
  display: flex; align-items: center; gap: 8px; border: 1px solid #d6e8ff; background: #f4f9ff;
  border-radius: 8px; padding: 10px 12px; margin: 8px 0;
}
.bill-layout .due {
  margin: 6px 0 8px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 650;
  color: #e25b2a;
  font-variant-numeric: tabular-nums;
}
.due { font-size: 16px; }
.btn-pay { width: 100%; height: 42px; background: linear-gradient(180deg, #4c94ff, #2f74f6); color: #fff; border-radius: 8px; box-shadow: 0 8px 16px rgba(47, 116, 246, .22); transition: transform .2s ease; }
.btn-pay:hover { transform: translateY(-1px); }
.btn-pay:active { transform: translateY(0) scale(.98); }
.pay-qr { display: block; width: 220px; max-width: 100%; height: auto; margin: 12px 0; border: 1px solid #e6edf5; border-radius: 8px; background: #fff; }
.pay-qr-frame {
  display: flex; justify-content: center;
  margin: 12px 0; padding: 12px;
  background: linear-gradient(180deg, #f7fbff, #fff);
  border: 1px solid #e3edf8; border-radius: 14px;
}
.pay-qr-frame .pay-qr { margin: 0; border: 0; box-shadow: 0 8px 20px rgba(20, 40, 80, .08); }
.pay-code { margin: 12px 0; }
.pay-code > p:first-child { margin: 0 0 6px; color: #303133; font-size: 13px; font-weight: 600; }
.pay-code-text {
  margin: 0 0 8px; padding: 10px; max-height: 132px; overflow: auto;
  white-space: pre-wrap; word-break: break-all;
  background: #f7f9fc; border: 1px solid #e6edf5; border-radius: 8px;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #1d2433;
}
.pay-code .btn-line { width: 100%; margin-bottom: 6px; }
.pay-code .fine { margin: 0; }
td.tx { max-width: 180px; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, monospace; font-size: 12px; }
.fine, .paid-note, .ok-note { color: #909399; font-size: 12px; }
.form-error { color: #d14343; }
.narrow { max-width: 560px; }
.stack { display: grid; gap: 8px; }
.check { display: flex; align-items: center; gap: 8px; }
.code-box { font-size: 22px; letter-spacing: 1px; background: #f7f9fc; padding: 12px; border-radius: 8px; }
.subline { color: #999; white-space: normal; margin: 4px 0 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.content td { white-space: normal; }
.mform label { display: block; margin: 0 0 12px; font-size: 13px; color: #334; }
.mform input:not([type="checkbox"]), .mform textarea, .mform select {
  width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px 10px;
  border: 1px solid #dcdfe6; border-radius: 4px; background: #fff;
}
.mform textarea { min-height: 80px; }
.actions { display: flex; gap: 8px; align-items: center; }
@media print {
  .side, .top, .pay-card, .float-help, .pill { display: none !important; }
  .shell { display: block; }
  .bill-layout { display: block; }
  .bill-specs span { border: 1px solid #ddd; background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .pill, .btn-pay { transition: none; }
  .pill:hover, .btn-pay:hover, .btn-pay:active { transform: none; }
}
@media (max-width: 1100px) {
  .dash, .bill-layout, .recent, .stat-row { grid-template-columns: 1fr; }
  .side { position: relative; height: auto; }
  .shell { display: block; }
  .content .bill-name { white-space: normal; }
  .pay-card { position: static; }
}
.mlogin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background:
    radial-gradient(520px 280px at 18% 12%, rgba(79, 148, 255, .18), transparent 70%),
    radial-gradient(420px 260px at 88% 88%, rgba(47, 123, 255, .12), transparent 72%),
    #eef3f9;
}
.mlogin-card {
  width: min(400px, 100%);
  padding: 36px 32px 28px;
  background: #fff;
  border: 1px solid #e7eef8;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(28, 55, 110, .08);
  text-align: center;
}
.mlogin-brand { display: inline-flex; }
.mlogin-brand img { height: 52px; width: auto; display: block; }
.mlogin-kicker {
  margin: 18px 0 0;
  color: #2f7bff;
  letter-spacing: .18em;
  font-size: 12px;
}
.mlogin-card h1 { margin: 6px 0 0; font-size: 24px; font-weight: 650; letter-spacing: .4px; }
.mlogin-lead { margin: 8px 0 22px; color: #7d8798; font-size: 13px; }
.mlogin-form { text-align: left; }
.mlogin-form label { display: block; margin: 14px 0 6px; color: #5c6b82; font-size: 13px; }
.mlogin-form input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  background: #fff;
  color: #303133;
}
.mlogin-form input:focus {
  outline: none;
  border-color: #2f7bff;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, .15);
}
.mlogin-form input:-webkit-autofill,
.mlogin-form input:-webkit-autofill:hover,
.mlogin-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #303133;
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-out;
}
.mlogin-error {
  margin: 0 0 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff1f0;
  color: #d14343;
  font-size: 13px;
}
.mlogin-submit {
  width: 100%;
  height: 42px;
  margin-top: 18px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #4c94ff, #2f74f6);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(47, 116, 246, .25);
}
.mlogin-submit:hover { filter: brightness(1.04); }
.mlogin-submit:focus-visible { outline: 2px solid #2f7bff; outline-offset: 2px; }
.mlogin-back { display: inline-block; margin-top: 16px; color: #7d8798; font-size: 13px; }
.mlogin-back:hover { color: #2f7bff; }
.list-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 4px 0 14px; }
.list-bar .filters { margin: 0; flex: 1; }
.list-bar .filters input, .list-bar .filters select { min-width: 140px; height: 34px; }
.list-bar .btn, .row-actions .btn { height: 34px; }
.row-actions { display: flex; gap: 8px; align-items: center; }
.row-actions form { margin: 0; }
dialog.modal {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(20, 40, 80, .18);
}
dialog.modal[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
dialog.modal::backdrop { background: rgba(16, 28, 48, .45); }
.modal .mform {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  padding: 0 22px 16px;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -22px;
  padding: 16px 22px 10px;
  background: #fff;
}
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 650; }
.modal-x { border: 0; background: transparent; color: #909399; font-size: 22px; line-height: 1; cursor: pointer; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 8px -22px 0;
  padding: 12px 22px 4px;
  border-top: 1px solid #e6eef8;
  background: #fff;
}
.mform label.check { display: flex; align-items: center; gap: 8px; }
.mform label.check input { width: auto; margin: 0; }
dialog.modal textarea { min-height: 96px; }
.nav-lead { margin: 0 0 12px; color: #8b97a8; font-size: 13px; }
.nav-tree { display: flex; flex-direction: column; gap: 10px; }
.nav-branch { border: 1px solid #e6edf5; border-radius: 12px; background: #fff; }
.nav-kids .nav-branch { background: #f7f9fc; border-color: #e8eef6; }
.nav-row { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 12px; }
.nav-kids { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px 22px; }
.nav-branch.is-shut > .nav-kids { display: none; }
.nav-twist, .nav-pad { flex: 0 0 22px; width: 22px; height: 22px; }
.nav-twist { position: relative; border: 0; border-radius: 6px; background: transparent; cursor: pointer; padding: 0; }
.nav-twist:hover { background: #eef3fb; }
.nav-twist::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #5c6b82;
  border-bottom: 1.5px solid #5c6b82;
  transform: rotate(45deg);
}
.nav-branch.is-shut > .nav-row .nav-twist::before { left: 8px; top: 8px; transform: rotate(-45deg); }
.nav-badge {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef4ff;
  color: #3d6fbf;
}
.nav-badge.rail, .nav-badge.folder { background: #f3f0ff; color: #6a55b5; }
.nav-badge.link { background: #f3f7f2; color: #5d7a48; }
.nav-title { font-weight: 600; color: #1d2433; white-space: nowrap; }
.nav-sub { color: #8b97a8; font-size: 12px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-key { color: #98a2b3; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nav-href { margin-left: auto; color: #98a2b3; font-size: 12px; white-space: nowrap; }
.nav-ops { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.nav-ops form { margin: 0; }
.nav-ops .btn { height: 30px; padding: 0 10px; }
.nav-empty { color: #a0aab8; font-size: 13px; padding: 2px 12px 8px 44px; }
.set-page { display: grid; gap: 14px; max-width: 880px; }
.set-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.set-bar h2 { margin: 0 0 4px; font-size: 18px; font-weight: 650; }
.set-bar p { margin: 0; color: #8b97a8; font-size: 13px; }
.set-note { margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.set-note.ok { background: #f0f9eb; color: #3d8b40; }
.set-note.bad { background: #fef0f0; color: #c45656; }
.set-card { padding: 0; overflow: hidden; }
.set-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 18px 14px; border-bottom: 1px solid #f0f3f8;
}
.set-card-head h3 { display: block; margin: 0 0 4px; font-size: 15px; }
.set-card-head h3 i {
  margin-right: 8px; color: #3b8cff; font-style: normal; font-size: 12px; letter-spacing: .04em;
}
.set-card-head p { margin: 0; color: #8b97a8; font-size: 13px; line-height: 1.5; }
.set-body { padding: 16px 18px 18px; }
.set-grid { display: grid; gap: 14px; }
.set-grid.two { grid-template-columns: 1fr 1fr; }
.set-half { max-width: 420px; }
.set-field { display: grid; gap: 4px; margin: 0; }
.set-field > span { color: #1d2433; font-size: 13px; font-weight: 600; }
.set-field > small { color: #8b97a8; font-size: 12px; line-height: 1.45; }
.set-field input, .set-field textarea {
  width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid #dcdfe6; border-radius: 6px; background: #fff; color: #303133;
}
.set-field textarea { min-height: 0; resize: vertical; line-height: 1.55; }
.set-field input:focus, .set-field textarea:focus {
  outline: 2px solid rgba(59, 140, 255, .22); border-color: #3b8cff;
}
.set-tabs {
  display: flex; gap: 0; overflow-x: auto; padding: 0 8px;
  border-bottom: 1px solid #eef1f6; background: #fff;
}
.set-tabs button {
  flex: 0 0 auto; height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: #5c6b82; cursor: pointer; font: inherit;
}
.set-tabs button.on { color: #3b8cff; border-bottom-color: #3b8cff; font-weight: 600; }
.set-tabs button:focus-visible { outline: 2px solid rgba(59, 140, 255, .35); outline-offset: -2px; }
.set-panel[hidden] { display: none; }
.set-pay { display: grid; gap: 16px; }
.set-pay > .set-field { max-width: 420px; }
.set-qr-card {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 20px; align-items: center;
  padding: 16px; border: 1px solid #e6edf5; border-radius: 12px; background: #f8fafc;
}
.set-qr-preview {
  width: 168px; height: 168px; border-radius: 12px; background: #fff;
  box-shadow: 0 1px 4px rgba(20, 40, 80, .06);
  display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px;
}
.set-qr-preview img { width: 100%; height: 100%; object-fit: contain; }
.set-qr-empty { display: grid; justify-items: center; gap: 8px; color: #a0aab8; font-size: 12px; text-align: center; }
.set-qr-empty b {
  width: 52px; height: 52px; border: 1.5px dashed #c5d0de; border-radius: 8px;
  background:
    linear-gradient(#d5deea, #d5deea) center / 16px 1.5px no-repeat,
    linear-gradient(#d5deea, #d5deea) center / 1.5px 16px no-repeat;
}
.set-qr-copy { min-width: 0; display: grid; gap: 6px; }
.set-qr-copy strong { color: #1d2433; font-size: 14px; }
.set-qr-copy p, .set-qr-copy small { margin: 0; color: #8b97a8; font-size: 12px; line-height: 1.55; }
.set-file { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 4px; min-width: 0; }
.set-file input {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; opacity: 0;
}
.set-file > span {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border-radius: 6px; background: #3b8cff; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.set-file em {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-style: normal; color: #8b97a8; font-size: 12px;
}
.set-file:focus-within > span { outline: 2px solid rgba(59, 140, 255, .35); outline-offset: 2px; }
.set-page .fcols { padding: 14px 18px 18px; }
.fcols { display: flex; flex-direction: column; gap: 12px; }
.fcol { border: 1px solid #e6edf5; border-radius: 12px; background: #f8fafc; padding: 14px; }
.fcol-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.fcol-head label { display: grid; gap: 6px; margin: 0; color: #334; font-size: 13px; }
.fcol-head input[type="hidden"] { display: none; }
.fcol-head input, .flink input {
  width: 100%;
  box-sizing: border-box;
  height: 34px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 10px;
  background: #fff;
}
.fcol-links { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.flink { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; }
.settings-save { margin-top: 14px; }
.bgroups { display: flex; flex-direction: column; gap: 12px; }
.bgroup { border: 1px solid #e6edf5; border-radius: 12px; background: #fff; padding: 14px 14px 8px; }
.bgroup-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 8px; }
.bgroup-head h4 { margin: 0 0 4px; font-size: 15px; }
.bgroup-head p { margin: 0; color: #8b97a8; font-size: 13px; line-height: 1.5; }
.brows { display: flex; flex-direction: column; }
.brow { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-top: 1px solid #f0f3f8; }
.brow-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.brow-main strong { color: #1d2433; }
.brow-main span { color: #8b97a8; font-size: 12px; }
.brow-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.brow-tags em { font-style: normal; font-size: 12px; line-height: 18px; padding: 0 6px; border-radius: 999px; background: #eef4ff; color: #3d6fbf; }
.brow-sort { margin-left: auto; color: #a0aab8; font-size: 12px; white-space: nowrap; }
.block-hint { margin: 8px 0 12px; color: #5c6b82; font-size: 13px; line-height: 1.5; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; }
.admin-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  background: #f7f9fc;
  color: #5c6b82;
  font-size: 13px;
}
.admin-tabs a em {
  font-style: normal;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e7eef8;
  color: #5c6b82;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.admin-tabs a:hover { color: var(--blue); background: #f3f7ff; }
.admin-tabs a.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.admin-tabs a.on em { background: rgba(255,255,255,.22); color: #fff; }
.admin-tabs a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.prod-name { white-space: normal !important; min-width: 220px; }
.prod-name strong { display: block; color: #1d2433; font-weight: 600; }
.prod-name span {
  display: block;
  max-width: 420px;
  margin-top: 2px;
  color: #8b97a8;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prod-price b { color: #1d2433; font-weight: 650; }
.prod-price span { margin-left: 4px; color: #98a2b3; font-size: 12px; }
.nav-badge.is-off { background: #f4f5f7; color: #909399; }
@media (max-width: 860px) {
  .bgroup-head, .brow { flex-wrap: wrap; }
  .brow-sort { margin-left: 0; }
}
@media (max-width: 720px) {
  .fcol-head, .flink { display: flex; flex-direction: column; align-items: stretch; }
  .set-grid.two, .set-qr-card { grid-template-columns: 1fr; }
  .set-half, .set-pay > .set-field { max-width: none; }
  .set-bar, .set-card-head { align-items: stretch; flex-direction: column; }
  .set-qr-preview { width: 168px; height: 168px; }
  .set-qr-card { justify-items: center; }
  .set-qr-copy, .set-file { width: 100%; }
}
@media (max-width: 860px) {
  .nav-row { flex-wrap: wrap; }
  .nav-href { margin-left: 32px; }
  .nav-ops { margin-left: auto; }
}
.order-page { display: grid; gap: 14px; }
.order-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.order-fact { background: #f7f9fc; border-radius: 8px; padding: 12px 14px; }
.order-fact span { display: block; margin-bottom: 4px; color: #909399; font-size: 12px; }
.order-fact b { font-size: 16px; font-weight: 650; }
.order-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .7fr); gap: 14px; align-items: start; }
.order-meta { display: grid; gap: 10px; margin: 0; }
.order-meta div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.order-meta dt { color: #909399; }
.order-meta dd { margin: 0; word-break: break-all; }
.order-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.order-status select { height: 34px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 10px; background: #fff; }
.tx-full {
  margin: 8px 0 0; padding: 10px 12px; background: #f7f9fc; border-radius: 8px;
  word-break: break-all; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.order-page .card + .card { margin-top: 0; }
.pay-current { color: #2f7bff; }
@media (max-width: 900px) {
  .order-facts, .order-grid { grid-template-columns: 1fr; }
}
dialog.modal.modal-wide { width: min(720px, calc(100% - 32px)); }
.opt-note { margin: 0 0 4px; color: #1d2433; font-weight: 600; }
.opt-list { max-height: 360px; overflow: auto; margin-bottom: 10px; }
.opt-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 110px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.opt-row input, .opt-row select { height: 34px; }
.opt-presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.opt-presets span { color: #606266; font-size: 13px; }
.opt-adds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
@media (max-width: 720px) {
  .opt-row { grid-template-columns: 1fr 1fr; }
  .opt-row select { grid-column: 1 / -1; }
}

body.console {
  background:
    radial-gradient(880px 280px at 100% -8%, rgba(47, 123, 255, .1), transparent 62%),
    #eef3f9;
  color: #1c2434;
}
.console .side {
  width: 220px;
  background: #fff;
  border-right: 1px solid #e6eef8;
}
.console .side nav { padding: 10px 0 24px; }
.console .side-logo { height: 64px; padding: 0 18px; border-bottom-color: #eef3f8; }
.console .item,
.console .group-btn,
.console .sub a {
  width: calc(100% - 20px);
  margin: 2px 10px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 9px;
  color: #4c5b70;
}
.console .sub a { padding-left: 34px; min-height: 36px; }
.console .item:hover,
.console .group-btn:hover,
.console .sub a:hover { background: #f6f9fd; color: #1d4d8f; }
.console .item.on,
.console .sub a.on,
.console .item.on:hover,
.console .sub a.on:hover {
  background: #eef4ff;
  color: #1d4d8f;
  font-weight: 650;
}
.console .item.on { box-shadow: inset 3px 0 0 #1d4d8f; }
.console .ico { color: #8ea0b8; }
.console .item.on .ico,
.console .group.open .ico { color: #1d4d8f; }
.console .top {
  height: 60px;
  background: rgba(255, 255, 255, .9);
  border-bottom: 1px solid #e6eef8;
  backdrop-filter: blur(12px);
}
.console .top-actions a { color: #4c5b70; }
.console .top-actions a:hover { color: #1d4d8f; }
.console .user-menu summary i {
  background: linear-gradient(160deg, #3b82f6, #16325c);
  font-weight: 650;
}
.console .content { padding: 20px 24px 40px; }
.console .page-head { margin: 0 2px 16px; }
.console .page-head .crumb { margin: 0 0 4px; font-size: 12px; }
.console .page-head h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -.01em;
  color: #16325c;
}
.console .card {
  border: 1px solid #e6eef8;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 10px 28px rgba(22, 50, 92, .045);
}
.console .content > .card + .card { margin-top: 14px; }
.console .dash { gap: 16px; }
.console .dash-main,
.console .dash-side { gap: 16px; }
.console .profile-card {
  background: linear-gradient(180deg, #f7fbff 0%, #fff 46%);
}
.console .avatar,
.console .agent i {
  background: linear-gradient(160deg, #3b82f6, #16325c);
  box-shadow: 0 8px 16px rgba(22, 50, 92, .16);
  font-weight: 650;
}
.console .agent i { background: linear-gradient(160deg, #e4b56a, #c9892d); }
.console .who strong { font-size: 16px; color: #16325c; }
.console .mail { margin: 0 0 2px; font-size: 13px; }
.console .who em { background: #fff4e5; color: #b7791f; }
.console .stat-row { gap: 12px; }
.console .stat-row div {
  background: #fff;
  border: 1px solid #e8eef6;
  border-radius: 12px;
  padding: 14px 14px 12px;
}
.console .stat-row p { color: #7d8b9e; font-size: 12px; }
.console .stat-row strong {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.02em;
  color: #16325c;
  font-variant-numeric: tabular-nums;
}
.console .stat-row .orange { color: #e25b2a; }
.console .stat-row strong.soft { font-size: 16px; }
.console .stat-row a { font-weight: 600; }
.console .recent { gap: 8px; }
.console .recent b {
  color: #16325c;
  font-size: 26px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.console .recent span { color: #7d8b9e; }
.console .svc-grid { gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.console .svc-grid a {
  min-height: 72px;
  border: 1px solid #e8eef6;
  border-radius: 12px;
  background: #fff;
  font-weight: 650;
  color: #1c2434;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.console .svc-grid a::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid #9aa8bd;
  border-right: 1.5px solid #9aa8bd;
  transform: rotate(45deg);
}
.console .svc-grid a:hover {
  transform: translateY(-2px);
  border-color: #c9dbf5;
  box-shadow: 0 12px 24px rgba(22, 50, 92, .08);
}
.console .card h3 a { color: #c9892d; }
.console .mini-row { padding: 9px 0; border-top: 1px solid #f2f5f9; }
.console .mini-row:hover span { color: #1d4d8f; }
.console .btn-line { height: 38px; border-radius: 9px; font-weight: 650; }
.console .filters { gap: 12px; margin-bottom: 14px; }
.console .filters input,
.console .filters select,
.console .stack input,
.console .stack select,
.console .stack textarea,
body.console .shell .pick-btn {
  height: 38px;
  border-radius: 8px;
  border-color: #d7e2ef;
  background: #fff;
}
.console .stack { gap: 12px; }
.console .stack textarea { height: auto; min-height: 120px; padding: 10px 12px; }
.console .stack label,
.console .filters label { color: #5c6b82; font-size: 13px; }
.console .filters input:focus,
.console .stack input:focus,
.console .stack select:focus,
.console .stack textarea:focus {
  outline: none;
  border-color: #2f7bff;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, .14);
}
.console .btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  background: linear-gradient(180deg, #4c94ff, #2f74f6);
  box-shadow: 0 6px 14px rgba(47, 116, 246, .2);
  font-weight: 650;
}
.console .btn:hover { filter: brightness(1.04); }
.console .btn.ghost {
  background: #fff;
  box-shadow: none;
  border: 1px solid #d7e2ef;
  color: #4c5b70;
  font-weight: 600;
}
.console .btn.ghost:hover { border-color: #b7cff2; color: #1d4d8f; }
.console .table-wrap {
  border: 1px solid #e6eef8;
  border-radius: 12px;
}
.console .table-wrap table { min-width: 640px; }
.console .table-wrap th {
  background: #f7f9fc;
  color: #7d8b9e;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .03em;
  border-bottom: 1px solid #e6eef8;
}
.console .table-wrap td {
  border-bottom: 1px solid #f2f5f9;
  white-space: nowrap;
}
.console .table-wrap tbody tr:last-child td { border-bottom: 0; }
.console .table-wrap tbody tr:hover td { background: #f8fbff; }
.console .table-wrap td.clip {
  white-space: normal;
  min-width: 240px;
  max-width: 460px;
}
.console .table-wrap td.empty { white-space: normal; padding: 48px 16px !important; color: #98a2b3; }
.console .tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  background: #fff6ea;
  color: #b7791f;
}
.console .tag.ok { background: #eef8f1; color: #157a48; }
.console .tag.check { background: #eef4ff; color: #1d4d8f; }
.console .tag.off { background: #f3f5f8; color: #8b97a8; }
.console .row-link { font-weight: 650; color: #1d4d8f; }
.console .row-link:hover { color: #2f74f6; }
.console .pager { margin: 12px 2px 0; font-size: 12px; }
.console .card-head { margin-bottom: 14px; }
.console .card-head-end { justify-content: flex-end; }
.console .delta { font-variant-numeric: tabular-nums; font-weight: 650; }
.console .delta.up { color: #157a48; }
.console .delta.down { color: #e25b2a; }
.console .lead { margin: 0 0 14px; color: #5c6b70; }
.console .lead strong { color: #16325c; font-size: 18px; }
.console .code-box {
  margin: 0 0 12px;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(90deg, #16325c, #1d4d8f);
  color: #fff;
  font-weight: 650;
  letter-spacing: .06em;
}
.console .narrow code {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f4f7fb;
  color: #1d4d8f;
  word-break: break-all;
}
@media (max-width: 1100px) {
  .console .recent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console .stat-row,
  .console .svc-grid { grid-template-columns: 1fr 1fr; }
  .console .content { padding: 16px; }
}
@media (max-width: 720px) {
  .console .svc-grid { grid-template-columns: 1fr; }
  .console .page-head h1 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .console .svc-grid a { transition: none; }
  .console .svc-grid a:hover { transform: none; }
  .console .switch i,
  .console .switch i::after { transition: none; }
}
.console .card.notify { max-width: 720px; }
.console .notify .ok-note,
.console .notify .form-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}
.console .notify .ok-note { color: #157a48; background: #eef8f1; }
.console .notify .form-error { background: #fff1f0; }
.console .notify-form { display: grid; gap: 18px; }
.console .notify-block h3 { display: block; margin: 0 0 4px; color: #16325c; font-size: 15px; }
.console .notify-block > .fine { margin: 0 0 4px; }
.console .notify-row,
.console .channel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.console .notify-row { padding: 12px 0; border-top: 1px solid #f0f3f8; cursor: pointer; }
.console .notify-row b { display: block; color: #1c2434; font-weight: 650; }
.console .channel-head > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.console .channel-head b { color: #1c2434; font-weight: 650; }
.console .channel-head .tag { margin: 0; }
.console .notify-row small { display: block; margin-top: 2px; color: #7d8b9e; font-size: 12px; }
.console .channel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #e6eef8;
  border-radius: 12px;
  background: #f8fbff;
}
.console .channel.is-on { border-color: #c9dbf5; background: #f4f8ff; }
.console .channel .fine { margin: 0; }
.console .channel .fine b { color: #1d4d8f; }
.console .channel label { display: grid; gap: 6px; color: #5c6b82; font-size: 13px; }
.console .channel input:not([type="checkbox"]) {
  height: 38px;
  border: 1px solid #d7e2ef;
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: #1c2434;
}
.console .channel input:not([type="checkbox"]):focus {
  outline: none;
  border-color: #2f7bff;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, .14);
}
.console .switch { position: relative; flex: none; width: 42px; height: 24px; }
.console .switch input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.console .switch i {
  position: relative;
  display: block;
  height: 24px;
  border-radius: 99px;
  background: #d5deea;
  transition: background .2s ease;
}
.console .switch i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 40, 80, .18);
  transition: transform .2s ease;
}
.console .switch input:checked + i { background: #2f74f6; }
.console .switch input:checked + i::after { transform: translateX(18px); }
.console .switch input:focus-visible + i { outline: 2px solid #2f7bff; outline-offset: 2px; }
.console .notify-actions { display: flex; gap: 10px; align-items: center; }
.console .notify-actions .btn-pay { flex: 1; }
.console .notify-actions .btn.ghost { width: auto; height: 42px; padding: 0 16px; }
.console .aff-share {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 20px;
  align-items: end;
}
.console .aff-share span {
  display: block;
  color: #7d8b9e;
  font-size: 12px;
}
.console .aff-share strong {
  display: block;
  margin-top: 6px;
  color: #16325c;
  font-size: 22px;
  line-height: 38px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.console .aff-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.console .aff-url {
  flex: 1;
  min-width: 0;
  margin: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #e6eef8;
  border-radius: 8px;
  background: #f7f9fc;
  color: #16325c;
  font-weight: 650;
  line-height: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.console .aff-row .btn { width: auto; flex: none; }
.console .aff-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.console .aff-stats div {
  padding: 12px 14px;
  border: 1px solid #e8eef6;
  border-radius: 10px;
  background: #f7f9fc;
}
.console .aff-stats b {
  display: block;
  color: #16325c;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.console .aff-stats span { color: #7d8b9e; font-size: 12px; }
.console .aff-list h3 { margin: 0 0 12px; color: #16325c; font-size: 15px; font-weight: 650; }
@media (max-width: 720px) {
  .console .aff-share { grid-template-columns: 1fr; }
  .console .aff-row { flex-wrap: wrap; }
  .console .aff-url,
  .console .aff-row .btn { width: 100%; }
}

body.manage { background: #eef3f9; }
body.manage .side {
  width: 220px;
  flex: 0 0 220px;
  min-width: 0;
  border-right: 1px solid #e6eef8;
}
body.manage .side-logo { height: 64px; padding: 0 16px; border-bottom-color: #eef3f8; }
body.manage .side-logo img { height: 40px; }
body.manage .side nav { padding: 10px 0 24px; }
body.manage .item {
  width: auto;
  min-height: 40px;
  margin: 2px 10px;
  padding: 0 12px;
  border-radius: 8px;
  color: #4c5b70;
}
body.manage .item.on {
  background: #eef4fb;
  color: #1d4d8f;
  font-weight: 650;
  box-shadow: inset 3px 0 0 #1d4d8f;
}
body.manage .item:hover { background: #f6f9fc; color: #1d4d8f; }
body.manage .item.on:hover { background: #eef4fb; }
body.manage .top {
  height: 60px;
  padding: 0 22px;
  justify-content: space-between;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid #e6eef8;
  backdrop-filter: blur(12px);
}
body.manage .top { z-index: 20; }
body.manage .top-actions { gap: 16px; color: #4c5b70; }
body.manage .top-link { color: #4c5b70; font-weight: 600; }
body.manage .top-link:hover { color: #1d4d8f; }
body.manage .mgr-user { position: relative; }
body.manage .mgr-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px 0 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #16325c;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
body.manage .mgr-user-btn i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #16325c;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 13px;
}
body.manage .mgr-user-btn:hover,
body.manage .mgr-user:focus-within .mgr-user-btn,
body.manage .mgr-user.is-open .mgr-user-btn { background: #f3f6fb; }
body.manage .mgr-user-btn:focus-visible { outline: 2px solid #2f7bff; outline-offset: 2px; }
body.manage .mgr-user::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 100%;
  height: 10px;
}
body.manage .mgr-user-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 148px;
  padding: 6px;
  border: 1px solid #e6eef8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(22, 50, 92, .1);
}
body.manage .mgr-user:hover .mgr-user-menu,
body.manage .mgr-user:focus-within .mgr-user-menu,
body.manage .mgr-user.is-open .mgr-user-menu { display: block; }
body.manage .mgr-user-menu a {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  color: #1c2434;
}
body.manage .mgr-user-menu a:hover { background: #f4f7fb; color: #1d4d8f; }
body.manage .mgr-user-menu a:focus-visible { outline: 2px solid #2f7bff; outline-offset: -2px; }
body.manage .content { padding: 20px 24px 40px; }
body.manage .card {
  border: 1px solid #e6eef8;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 10px 28px rgba(22, 50, 92, .045);
}
body.manage .card-head { margin-bottom: 14px; }
body.manage .card-head h3,
body.manage .set-bar h2 {
  margin: 0;
  color: #16325c;
  font-size: 18px;
  font-weight: 650;
}
body.manage .nav-lead { color: #7d8b9e; line-height: 1.6; }
body.manage .list-bar { gap: 12px; margin: 0 0 14px; }
body.manage .filters input,
body.manage .filters select,
body.manage .list-bar input,
body.manage .list-bar select,
body.manage .mform input:not([type="checkbox"]),
body.manage .mform select,
body.manage .mform textarea {
  height: 36px;
  border-radius: 8px;
  border-color: #d7e2ef;
}
body.manage .mform textarea { height: auto; min-height: 96px; }
body.manage .filters input:focus,
body.manage .filters select:focus,
body.manage .list-bar input:focus,
body.manage .list-bar select:focus,
body.manage .mform input:focus,
body.manage .mform select:focus,
body.manage .mform textarea:focus {
  outline: none;
  border-color: #2f7bff;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, .14);
}
body.manage .btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, #4c94ff, #2f74f6);
  box-shadow: 0 6px 14px rgba(47, 116, 246, .18);
  font-weight: 650;
}
body.manage .btn:hover { filter: brightness(1.04); }
body.manage .btn.ghost {
  background: #fff;
  box-shadow: none;
  border: 1px solid #d7e2ef;
  color: #4c5b70;
  font-weight: 600;
}
body.manage .btn.ghost:hover { border-color: #b7cff2; color: #1d4d8f; }
body.manage .btn:focus-visible,
body.manage .item:focus-visible { outline: 2px solid #2f7bff; outline-offset: 2px; }
body.manage .table-wrap {
  border: 1px solid #e6eef8;
  border-radius: 12px;
}
body.manage .table-wrap th {
  background: #f7f9fc;
  color: #7d8b9e;
  font-size: 12px;
  font-weight: 650;
  border-bottom: 1px solid #e6eef8;
}
body.manage .table-wrap td { border-bottom: 1px solid #f2f5f9; white-space: nowrap; }
body.manage .table-wrap td.prod-name,
body.manage .table-wrap td.empty { white-space: normal; }
body.manage .table-wrap tbody tr:last-child td { border-bottom: 0; }
body.manage .table-wrap tbody tr:hover td { background: #f8fbff; }
body.manage .table-wrap td.empty { padding: 42px 16px !important; color: #98a2b3; }
body.manage .tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  background: #fff6ea;
  color: #b7791f;
}
body.manage .tag.ok { background: #eef8f1; color: #157a48; }
body.manage .tag.check { background: #eef4ff; color: #1d4d8f; }
body.manage .tag.back { background: #f8f1f4; color: #a33b55; }
body.manage .tag.off { background: #f3f5f8; color: #8b97a8; }
body.manage .admin-tabs a { border-radius: 999px; background: #fff; }
body.manage .admin-tabs a.on { background: #16325c; border-color: #16325c; }
body.manage .mgr-home {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
body.manage .mgr-home a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92px;
  padding: 16px 36px 16px 18px;
  border: 1px solid #e6eef8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(22, 50, 92, .045);
  color: #16325c;
}
body.manage .mgr-home a::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-top: 1.5px solid #b7c3d4;
  border-right: 1.5px solid #b7c3d4;
  transform: rotate(45deg);
}
body.manage .mgr-home a:hover { border-color: #c9dbf5; }
body.manage .mgr-home a:focus-visible { outline: 2px solid #2f7bff; outline-offset: 2px; }
body.manage .mgr-home span { display: block; color: #7d8b9e; font-size: 13px; }
body.manage .mgr-home b {
  display: block;
  margin-top: 4px;
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
body.manage .mgr-boards {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr);
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}
body.manage .card-head a { color: #1d4d8f; font-size: 13px; font-weight: 600; }
body.manage .card-head a:hover { color: #2f74f6; }
body.manage .mgr-boards td.clip { white-space: normal; }
body.manage .mgr-boards td.clip span { display: block; margin-top: 2px; color: #8b97a8; font-size: 12px; }
body.manage .host-form { max-width: 460px; margin-top: 16px; }
body.manage .host-form h3 { margin: 0 0 8px; color: #16325c; font-size: 15px; }
body.manage .host-form input { width: 100%; }
body.manage .order-fact { border: 1px solid #e8eef6; border-radius: 10px; }
.console .host-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e6eef8; text-align: left; }
.console .host-note h3 { margin: 0 0 8px; color: #16325c; font-size: 15px; }
.console .host-note p { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0; }
.console .host-note span { color: #7d8b9e; }
.console .host-note b { color: #16325c; font-weight: 650; word-break: break-all; }
.ticket-thread { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.ticket-msg { padding: 10px 12px; border-radius: 10px; background: #f4f7fb; }
.ticket-msg header { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: #7d8b9e; font-size: 12px; }
.ticket-msg p { margin: 0; white-space: pre-wrap; word-break: break-word; color: #16325c; line-height: 1.55; }
.ticket-msg.is-staff { background: #eef6ff; }
dialog.modal .ticket-thread { max-height: 240px; overflow: auto; }
.secret { display: inline-flex; align-items: center; gap: 4px; }
.secret-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #7d8b9e;
  cursor: pointer;
}
.secret-eye:hover { background: #f3f6fb; color: #1d4d8f; }
.secret-eye:focus-visible { outline: 2px solid #2f7bff; outline-offset: 2px; }
.secret-eye svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.secret-eye .eye-off { display: none; }
.secret.is-shown .eye-on,
.secret-field span.is-shown .eye-on { display: none; }
.secret.is-shown .eye-off,
.secret-field span.is-shown .eye-off { display: block; }
body.manage .secret-field span { display: flex; align-items: center; gap: 6px; }
body.manage .secret-field input { flex: 1; width: auto; }
body.manage .order-fact b { color: #16325c; }
html:has(body.manage:not(.manage-frame)),
body.manage:not(.manage-frame) { height: 100%; overflow: hidden; }
body.manage:not(.manage-frame) .shell { height: 100%; min-height: 0; }
body.manage:not(.manage-frame) .side { height: 100%; transition: width .2s ease; }
body.manage:not(.manage-frame) .main {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
body.manage.is-side-shut .side {
  width: 0;
  flex-basis: 0;
  border-right-color: transparent;
  overflow: hidden;
}
body.manage .side-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #4c5b70;
  cursor: pointer;
}
body.manage .side-toggle svg { width: 20px; height: 20px; display: block; }
body.manage.is-side-shut .side-toggle svg { transform: scaleX(-1); }
body.manage .side-toggle:hover { background: #f3f6fb; color: #1d4d8f; }
body.manage .side-toggle:focus-visible { outline: 2px solid #2f7bff; outline-offset: 2px; }
body.manage .mgr-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 16px 0;
  overflow-x: auto;
  background: #fff;
  border-bottom: 1px solid #e6eef8;
}
body.manage .mgr-tab {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 34px;
  border-radius: 8px 8px 0 0;
  background: transparent;
}
body.manage .mgr-tab.on { background: #eef3f9; }
body.manage .mgr-tab-label,
body.manage .mgr-tab-x {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
body.manage .mgr-tab-label {
  height: 34px;
  padding: 0 4px 0 12px;
  color: #5c6b82;
}
body.manage .mgr-tab.on .mgr-tab-label { color: #16325c; font-weight: 650; }
body.manage .mgr-tab-x {
  width: 28px;
  height: 34px;
  color: #98a2b3;
  font-size: 16px;
}
body.manage .mgr-tab-x:hover { color: #16325c; }
body.manage .mgr-tab-label:focus-visible,
body.manage .mgr-tab-x:focus-visible { outline: 2px solid #2f7bff; outline-offset: -2px; }
body.manage .mgr-panes { position: relative; flex: 1; min-height: 0; background: #eef3f9; }
body.manage .mgr-pane {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #eef3f9;
}
body.manage .mgr-pane.on { z-index: 1; visibility: visible; }
body.manage .mgr-pane:not(.on) { visibility: hidden; pointer-events: none; }
@media (max-width: 1100px) {
  body.manage .shell { display: flex; }
  body.manage .side { position: sticky; height: 100%; }
  body.manage .mgr-home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.manage .mgr-boards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body.manage .side { transition: none; }
}
@media (max-width: 720px) {
  body.manage .content { padding: 16px; }
  body.manage .mgr-home { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body.manage .btn { transition: none; }
}
body.console .msg-box { position: relative; }
body.console .msg-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #4c5b70;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.console .msg-btn svg { width: 20px; height: 20px; }
body.console .msg-btn:hover,
body.console .msg-btn[aria-expanded="true"] { background: #f3f7fc; color: #1d4d8f; }
body.console .msg-btn em {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: #e24b4b;
  color: #fff;
  font-style: normal;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
body.console .msg-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(360px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid #e6eef8;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(22, 50, 92, .12);
}
body.console .msg-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #eef3f8;
}
body.console .msg-pop-head b { color: #16325c; font-size: 14px; }
body.console .msg-readall {
  border: 0;
  background: transparent;
  color: #1d4d8f;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
body.console .msg-list { max-height: 380px; overflow: auto; padding: 6px; }
body.console .msg-item {
  display: block;
  padding: 10px 12px 10px 22px;
  border-radius: 8px;
  color: #24364d;
  position: relative;
}
body.console .msg-item:hover { background: #f6f9fd; }
body.console .msg-item b { display: block; font-size: 13px; color: #16325c; font-weight: 650; }
body.console .msg-item span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  color: #5c6b80;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-line;
}
body.console .msg-item time { display: block; margin-top: 4px; color: #93a0b0; font-size: 11px; }
body.console .msg-item.is-new::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2f7bff;
}
body.console .msg-empty { margin: 0; padding: 28px 12px; text-align: center; color: #8b98a8; font-size: 13px; }
body.console a.top-ticket { display: inline-flex; align-items: center; gap: 4px; }
body.console a.top-ticket em,
body.console .nav-count,
body.manage .nav-count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: #e24b4b;
  color: #fff;
  font-style: normal;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
body.manage .nav-count { margin-left: auto; }
body.console .pay-switch .pay-pane-balance { display: none; }
body.console .pay-switch:has(input[value="余额"]:checked) .pay-pane-upay { display: none; }
body.console .pay-switch:has(input[value="余额"]:checked) .pay-pane-balance { display: block; }
body.console .pay-picks { display: grid; gap: 8px; margin: 10px 0 4px; }
body.console .pay-pick {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; row-gap: 2px;
  align-items: center; margin: 0; padding: 10px 12px;
  border: 1px solid #d7e3f2; border-radius: 10px; background: #fff; cursor: pointer;
}
body.console .pay-pick span { color: #16325c; font-weight: 650; }
body.console .pay-pick small { grid-column: 2; color: #7d8b9e; font-size: 12px; }
body.console .pay-pick:has(input:checked) { border-color: #2f7bff; background: #f4f8ff; }
body.console .pay-pane-balance { margin-top: 14px; }
body.console .btn-pay:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }