/* Cursor 退款站 — warm & friendly theme.
   Palette:
     bg      #fdf9f3   soft cream
     surface #ffffff
     ink     #2c2419   warm near-black
     muted   #8a7f74
     brand   #f39c6b   pumpkin orange (primary)
     brand2  #e07a4a   deeper orange for hover
     ok      #2f9e75   herbal green
     warn    #e0a53a   amber
     err     #dc5a5a   soft red
     line    #efe6d8   warm hairline
*/

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* 翻页丝滑化: (1) html 底色=米色, 消除整页重载时的白屏闪烁(首帧即米色);
   (2) 跨文档 View Transitions —— Chrome 下后台各页之间淡入淡出平滑过渡, 不支持的浏览器自动降级为普通跳转。 */
html { background: #fdf9f3; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .18s; }
::view-transition-new(root) { animation-duration: .18s; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: #2c2419;
  background: #fdf9f3;
  background-image: radial-gradient(1000px 500px at 90% -200px, #ffe9d6 0%, transparent 60%),
                    radial-gradient(800px 400px at -10% 800px, #e6f5ec 0%, transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: #e07a4a; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- 功能总览 hub 瓦片 (后台主页导航; 让功能一眼看全、好找) ---------- */
.hub-cat { font-size: 13px; font-weight: 700; color: #8a7f74; margin: 16px 0 8px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.hub-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 15px; border: 1px solid #efe6d8; border-radius: 14px;
  background: #fff; color: #2c2419; font-weight: 700; font-size: 15px;
  text-decoration: none; transition: transform .12s, box-shadow .12s, border-color .12s;
}
.hub-tile span { font-weight: 400; font-size: 12px; color: #8a7f74; line-height: 1.4; }
.hub-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -10px rgba(224,122,74,.35); border-color: #f39c6b; text-decoration: none; }
.hub-tile.cur { background: #fff7f0; border-color: #f3c9a8; cursor: default; }
.hub-tile.cur:hover { transform: none; box-shadow: none; }

/* ---------- layout ---------- */
.page { max-width: 780px; margin: 0 auto; padding: 32px 20px 60px; }
.page.wide { max-width: 1100px; }
.center { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }

/* ---------- top bar ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 28px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, #f39c6b, #e07a4a);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 18px;
  box-shadow: 0 6px 16px rgba(224, 122, 74, .25);
}
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.brand-sub { font-size: 12px; color: #8a7f74; margin-top: -2px; }

/* ---------- card ---------- */
.card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #efe6d8;
  box-shadow: 0 10px 40px -12px rgba(75, 55, 30, .12);
  padding: 28px 28px;
}
.card + .card { margin-top: 18px; }
.card h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; }
.card h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.card .lead { color: #8a7f74; font-size: 14px; margin: 0 0 22px; }

/* ---------- form ---------- */
label.field { display: block; margin-bottom: 16px; }
label.field .lbl { display: block; font-size: 13px; color: #6b6055; margin-bottom: 8px; font-weight: 600; }
label.field .hint { font-size: 12px; color: #a89b8c; margin-top: 6px; }

input[type="text"], input[type="password"], textarea, select {
  width: 100%; padding: 13px 14px; font-size: 15px;
  border: 1.5px solid #eee2ce; background: #fffdf9; color: #2c2419;
  border-radius: 12px; transition: border-color .15s, box-shadow .15s, background .15s;
  font-family: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: #f39c6b; background: #fff;
  box-shadow: 0 0 0 3px rgba(243, 156, 107, .18);
}
textarea { resize: vertical; min-height: 90px; line-height: 1.5; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
input.mono, textarea.mono, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; font-size: 15px; font-weight: 600;
  border: none; border-radius: 12px; cursor: pointer;
  transition: transform .08s ease, box-shadow .15s, background .15s, color .15s;
  font-family: inherit; line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn.primary {
  background: linear-gradient(135deg, #f39c6b, #e07a4a);
  color: #fff;
  box-shadow: 0 6px 16px rgba(224, 122, 74, .25);
}
.btn.primary:hover:not(:disabled) { box-shadow: 0 8px 22px rgba(224, 122, 74, .35); }

.btn.ghost {
  background: #fff5e9; color: #b0532a; border: 1px solid #f3d9be;
}
.btn.ghost:hover:not(:disabled) { background: #ffecd6; }

.btn.danger {
  background: #fdecec; color: #b73737; border: 1px solid #f4c9c9;
}
.btn.danger:hover:not(:disabled) { background: #fbdcdc; }

.btn.link {
  background: transparent; color: #8a7f74; padding: 8px 10px; font-weight: 500;
}
.btn.link:hover { color: #2c2419; }

.btn.block { width: 100%; padding: 14px 20px; font-size: 15px; }

/* ---------- badges / status ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #f5efe4; color: #6b6055;
}
.badge.ok  { background: #dff2e8; color: #1f7d5b; }
.badge.warn{ background: #fbebc8; color: #a77716; }
.badge.err { background: #f8dede; color: #a83b3b; }
.badge.info{ background: #e2eef9; color: #325f8a; }
.badge.brand{ background: #ffe9d6; color: #b0532a; }

/* ---------- misc ---------- */
.row  { display: flex; align-items: center; gap: 10px; }
.row.gap-lg { gap: 16px; }
.row.wrap { flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.spacer { flex: 1; }

.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px; margin: 6px 0 18px;
}

/* Team leader token health banner */
.team-health {
  padding: 10px 16px; border-radius: 10px; font-size: 13.5px;
  border-left: 4px solid #ddd; background: #f7f8fa;
}
.team-health.ok   { border-color: #2f9e75; background: #f0faf5; color: #1a6b52; }
.team-health.warn { border-color: #e0a53a; background: #fff9ec; color: #8a6a1a; }
.team-health.err  { border-color: #dc5a5a; background: #fdf1f1; color: #8a2e2e; }
.stat {
  background: #fffdf9; border: 1px solid #efe6d8; border-radius: 14px;
  padding: 14px 16px;
}
.stat .n { font-size: 26px; font-weight: 700; color: #2c2419; letter-spacing: .2px; }
.stat .k { font-size: 12px; color: #8a7f74; margin-top: 2px; }

.notice {
  border-left: 3px solid #f39c6b;
  background: #fff8f0;
  padding: 12px 14px; border-radius: 8px; font-size: 13px; color: #6b6055;
}
.notice.ok { border-color: #2f9e75; background: #f0faf5; }
.notice.err { border-color: #dc5a5a; background: #fdf1f1; color: #8a2e2e; }
.notice.warn { border-color: #e0a53a; background: #fff8e6; color: #8a6a16; }

/* Prominent partial-refund warning (bigger, more attention-grabbing than .notice) */
.alert-warn {
  background: linear-gradient(135deg, #fff3f3 0%, #ffe8e8 100%);
  border: 2px solid #dc5a5a;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 4px 16px rgba(220, 90, 90, .18);
  position: relative;
  animation: alertPulse 1.6s ease-in-out;
}
.alert-warn::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 14px;
  border: 2px solid #dc5a5a;
  animation: alertRing 1.6s ease-out 1;
  pointer-events: none;
}
.alert-warn-title {
  font-size: 16px;
  font-weight: 800;
  color: #b73737;
  letter-spacing: .3px;
  margin-bottom: 6px;
}
.alert-warn-body {
  font-size: 14px;
  color: #6b3535;
  line-height: 1.65;
}
.alert-warn-body b.mono {
  background: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px dashed #dc5a5a;
  color: #b73737;
  font-size: 15px;
}
@keyframes alertPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}
@keyframes alertRing {
  0%   { opacity: .7; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.05); }
}

pre.output {
  background: #23201c; color: #f0e6d6; padding: 14px 16px; border-radius: 12px;
  overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.55; max-height: 320px; margin: 12px 0 0;
  white-space: pre-wrap; word-break: break-all;
}

/* spinner */
.spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: spin .8s linear infinite;
}
.spin.dark { border: 2px solid rgba(0,0,0,.15); border-top-color: #6b6055; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- table (admin) ---------- */
.tbl { width: 100%; border-collapse: collapse; margin-top: 10px; }
.tbl th, .tbl td {
  padding: 12px 14px; text-align: left; font-size: 13.5px;
  border-bottom: 1px solid #f2ead9;
}
.tbl th { color: #8a7f74; font-weight: 600; background: #fff8ee; }
.tbl tr:hover td { background: #fffaf0; }
.tbl td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.tbl td.right, .tbl th.right { text-align: right; }
.tbl .actions { white-space: nowrap; }
.tbl .actions .btn { padding: 6px 12px; font-size: 12px; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; margin-bottom: 18px; padding: 4px; background: #fff5e9; border-radius: 14px; }
.tabs .tab {
  flex: 1; text-align: center; padding: 10px 14px; border-radius: 10px;
  cursor: pointer; font-weight: 600; color: #6b6055; transition: background .15s, color .15s;
}
.tabs .tab.active { background: #fff; color: #2c2419; box-shadow: 0 2px 8px rgba(75,55,30,.08); }

/* ---------- toast ---------- */
.toast {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
  background: #2c2419; color: #fff; padding: 12px 20px; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.15); font-size: 14px; z-index: 999;
  transition: opacity .2s, transform .2s;
}
.toast.ok  { background: #2f9e75; }
.toast.err { background: #dc5a5a; }
.toast.hidden { opacity: 0; transform: translate(-50%, -8px); pointer-events: none; }

/* ---------- footer ---------- */
.foot {
  text-align: center; color: #a89b8c; font-size: 12px;
  padding: 30px 0 10px;
}
.foot a { color: #8a7f74; }

/* ---------- responsive ---------- */
@media (max-width: 560px) {
  .card { padding: 22px 18px; border-radius: 16px; }
  .top { margin-bottom: 20px; }
  .brand-name { font-size: 16px; }
  .brand-logo { width: 38px; height: 38px; font-size: 16px; }
  .stat .n { font-size: 22px; }
  .tbl th, .tbl td { padding: 10px 8px; font-size: 12.5px; }
  .btn { padding: 10px 16px; font-size: 14px; }
  .btn.block { padding: 13px 18px; }
}

/* Small helpers */
.small { font-size: 12.5px; color: #8a7f74; }
.right { text-align: right; }
.hidden { display: none !important; }
.divider { height: 1px; background: #efe6d8; margin: 20px 0; border: none; }