:root {
  --blue: #1E5EFF;
  --blue-d: #0B3AA8;
  --blue-l: #E8F1FF;
  --ink: #0E1726;
  --sub: #5D6B82;
  --faint: #9AA6B8;
  --line: rgba(30, 94, 255, .12);
  --glass: rgba(255, 255, 255, .62);
  --glass-b: rgba(255, 255, 255, .85);
  --shadow: 0 10px 40px rgba(12, 45, 92, .08);
  --r: 16px;
  --ok: #10A36B;
  --warn: #E58A00;
  --bad: #E0464E;
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; color: var(--ink); -webkit-font-smoothing: antialiased; }
body {
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(30, 94, 255, .13), transparent 60%),
    radial-gradient(900px 600px at 105% 10%, rgba(10, 160, 255, .12), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgba(108, 77, 246, .08), transparent 60%),
    #F6F9FE;
  background-attachment: fixed;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(30, 94, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 94, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--blue); text-decoration: none; }

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-b);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 600;
  transition: background .2s, box-shadow .2s, opacity .2s, border-color .2s; white-space: nowrap;
}
.btn-primary { color: #fff; background: linear-gradient(135deg, #2F6BFF, #1748D6); box-shadow: 0 6px 18px rgba(30, 94, 255, .28); }
.btn-primary:hover { box-shadow: 0 8px 24px rgba(30, 94, 255, .38); }
.btn-ghost { color: var(--blue); background: rgba(30, 94, 255, .06); border: 1px solid rgba(30, 94, 255, .18); }
.btn-ghost:hover { background: rgba(30, 94, 255, .11); }
.btn-plain { color: var(--sub); border: 1px solid rgba(14, 23, 38, .1); background: rgba(255, 255, 255, .7); }
.btn-plain:hover { border-color: rgba(14, 23, 38, .2); }
.btn-danger { color: var(--bad); background: rgba(224, 70, 78, .06); border: 1px solid rgba(224, 70, 78, .2); }
.btn-ok { color: var(--ok); background: rgba(16, 163, 107, .07); border: 1px solid rgba(16, 163, 107, .22); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 16px; border-radius: 12px; }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 8px; }

.input, .textarea, .select {
  width: 100%; border-radius: 10px; border: 1px solid rgba(14, 23, 38, .1); background: rgba(255, 255, 255, .85);
  padding: 10px 14px; font-size: 15px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.input:focus, .textarea:focus, .select:focus { border-color: rgba(30, 94, 255, .5); box-shadow: 0 0 0 4px rgba(30, 94, 255, .08); }
.textarea { resize: none; line-height: 1.6; }
.label { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.label small { font-weight: 400; color: var(--faint); font-size: 12px; }
.req::after { content: " *"; color: var(--bad); }
.eyebrow { font-size: 12px; letter-spacing: .18em; color: var(--blue); font-weight: 700; font-family: "Segoe UI", Arial, sans-serif; }

.toast {
  position: fixed; left: 50%; top: 28px; transform: translate(-50%, -20px); z-index: 999;
  padding: 10px 20px; border-radius: 10px; font-size: 14px; color: #fff; background: rgba(14, 23, 38, .86);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.mask {
  position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  background: rgba(230, 238, 250, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.mask.show { display: flex; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.tag-pending { color: var(--warn); background: rgba(229, 138, 0, .1); }
.tag-approved { color: var(--ok); background: rgba(16, 163, 107, .1); }
.tag-rejected { color: var(--bad); background: rgba(224, 70, 78, .1); }
.tag-info { color: var(--blue); background: rgba(30, 94, 255, .08); }
.tag-mute { color: var(--faint); background: rgba(14, 23, 38, .05); }