/* ============================================================
   账户中心 · 液态玻璃 (Liquid Glass)
   ============================================================ */

:root {
  --bg: #06070b;
  --fg: #eef0f6;
  --fg-dim: #a3a9bd;
  --fg-mute: #6f768c;

  --glass-1: rgba(255, 255, 255, .075);
  --glass-2: rgba(255, 255, 255, .022);
  --glass-line: rgba(255, 255, 255, .10);
  --glass-line-soft: rgba(255, 255, 255, .06);
  --glass-sheen: rgba(255, 255, 255, .16);

  --accent: #8ea2ff;
  --accent-2: #b98cff;
  --accent-soft: rgba(142, 162, 255, .16);
  --ok: #5fe0a0;
  --err: #ff8b84;
  --danger: #ff7a72;

  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --blur: saturate(170%) blur(26px);
  --shadow: 0 24px 60px -22px rgba(0, 0, 0, .75), 0 2px 8px -2px rgba(0, 0, 0, .5);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.65 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .01em;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: #fff; }

/* ---------- 背景：柔光色斑 + 细噪点 ---------- */

.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
  will-change: transform;
}

.b1 {
  width: 52vw; height: 52vw; left: -12vw; top: -18vw;
  background: radial-gradient(circle at 30% 30%, #4b5bd6, transparent 68%);
  animation: drift1 26s ease-in-out infinite alternate;
}

.b2 {
  width: 46vw; height: 46vw; right: -10vw; top: 4vh;
  background: radial-gradient(circle at 60% 40%, #8a4fd0, transparent 68%);
  animation: drift2 32s ease-in-out infinite alternate;
}

.b3 {
  width: 60vw; height: 40vw; left: 22vw; bottom: -22vw;
  background: radial-gradient(circle at 50% 50%, #1f6fa8, transparent 70%);
  opacity: .4;
  animation: drift3 38s ease-in-out infinite alternate;
}

@keyframes drift1 { to { transform: translate3d(6vw, 5vh, 0) scale(1.12); } }
@keyframes drift2 { to { transform: translate3d(-7vw, 7vh, 0) scale(1.08); } }
@keyframes drift3 { to { transform: translate3d(3vw, -6vh, 0) scale(1.15); } }

.grain {
  position: absolute; inset: -50%;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 背景插画层（魔女之旅 / Poppin'Party / 路人女主）---------- */

.art {
  position: absolute; inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 34%;
  opacity: 0;
  filter: blur(3px) saturate(118%);
  transform: scale(1.08);
  will-change: opacity;
  animation: artFade 240s linear infinite;
}

.a1 { background-image: url("/assets/art/art-1.jpg"); animation-delay: 0s; }
.a2 { background-image: url("/assets/art/art-2.jpg"); animation-delay: 40s; }
.a3 { background-image: url("/assets/art/art-3.jpg"); animation-delay: 80s; }
.a4 { background-image: url("/assets/art/art-4.jpg"); animation-delay: 120s; }
.a5 { background-image: url("/assets/art/art-5.jpg"); animation-delay: 160s; }
.a6 { background-image: url("/assets/art/art-6.jpg"); animation-delay: 200s; }

/* 每张停留约 37s，相邻两张 3s 交叉淡入淡出 */
@keyframes artFade {
  0%     { opacity: 0; }
  1.25%  { opacity: .26; }
  15.4%  { opacity: .26; }
  16.67% { opacity: 0; }
  100%   { opacity: 0; }
}

/* 压暗层：保证玻璃面板上的文字始终清晰 */
.veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 85% at 50% 0%, rgba(6,7,11,.22) 0%, rgba(6,7,11,.66) 62%, rgba(6,7,11,.88) 100%),
    linear-gradient(180deg, rgba(6,7,11,.32), rgba(6,7,11,.7));
}

@media (prefers-reduced-motion: reduce) {
  .blob, .art { animation: none; }
  .art.a1 { opacity: .22; }
  * { transition: none !important; }
}

/* ---------- 顶栏 ---------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: linear-gradient(180deg, rgba(12, 14, 22, .72), rgba(12, 14, 22, .38));
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-line-soft);
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--fg); font-weight: 600; letter-spacing: .02em;
}
.brand:hover { color: #fff; }

.logo {
  width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 18px rgba(142, 162, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.nav { display: flex; align-items: center; gap: 6px; }

.navlink {
  padding: 7px 14px; border-radius: 999px;
  color: var(--fg-dim); font-size: 14px;
  border: 1px solid transparent;
  transition: all .22s var(--ease);
}
.navlink:hover {
  color: #fff;
  background: var(--glass-1);
  border-color: var(--glass-line);
  backdrop-filter: blur(12px);
}
.navlink.primary {
  color: #0a0c12; font-weight: 600;
  background: linear-gradient(135deg, #fff, #d7dcf5);
  box-shadow: 0 6px 18px -6px rgba(255, 255, 255, .4);
}
.navlink.primary:hover { background: #fff; }

.who {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-right: 4px; border-radius: 999px;
  background: var(--glass-1); border: 1px solid var(--glass-line);
  backdrop-filter: blur(12px);
  color: var(--fg); font-size: 13.5px;
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
}

/* ---------- 容器 ---------- */

.wrap { max-width: 960px; margin: 0 auto; padding: 34px 20px 20px; }

.foot {
  text-align: center; color: var(--fg-mute); font-size: 12.5px;
  padding: 30px 0 46px;
}

/* ---------- 玻璃面板（.panel 与旧版 .card 通用） ---------- */

.panel, .card {
  position: relative;
  background: linear-gradient(158deg, var(--glass-1), var(--glass-2));
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 26px 28px;
  margin-bottom: 20px;
  overflow: hidden;
}

/* 顶部高光，液态玻璃的关键一笔 */
.panel::before, .card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-sheen) 22%, var(--glass-sheen) 78%, transparent);
  pointer-events: none;
}

.card.narrow { max-width: 470px; margin: 5vh auto 0; }

.panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.015em; }
h2 { font-size: 20px; margin-bottom: 6px; }
h3 { font-size: 16px; margin-bottom: 8px; }
.panel-head h2, .card h2 { margin-bottom: 4px; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

.muted { color: var(--fg-dim); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 12.5px; }
.right { text-align: right; }
.empty { color: var(--fg-mute); text-align: center; padding: 26px 0; margin: 0; }

/* ---------- 提示条 ---------- */

.flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; margin-bottom: 18px;
  border-radius: var(--r-md);
  font-size: 14px;
  background: var(--glass-1);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px);
}
.flash-icon {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; margin-top: 2px;
  background: rgba(255, 255, 255, .12);
}
.flash-ok { border-color: rgba(95, 224, 160, .35); color: #b8f3d6; }
.flash-ok .flash-icon { background: rgba(95, 224, 160, .22); color: var(--ok); }
.flash-error { border-color: rgba(255, 139, 132, .35); color: #ffd0cc; }
.flash-error .flash-icon { background: rgba(255, 139, 132, .22); color: var(--err); }
.flash-info { color: #cdd5f0; }
.flash-info .flash-icon { color: var(--accent); }

/* ---------- 表单 ---------- */

label { display: block; margin-bottom: 16px; font-size: 14px; color: var(--fg-dim); }
label.check {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 10px; color: var(--fg-dim); cursor: pointer;
}
label.check input { width: auto; margin: 0; }

.hint { display: block; color: var(--fg-mute); font-size: 12px; margin-top: 2px; font-weight: 400; }

input[type=text], input[type=password], input[type=number],
input[type=email], input:not([type]) {
  display: block; width: 100%; margin-top: 7px;
  padding: 12px 15px;
  color: var(--fg);
  font-size: 14.5px;
  font-family: inherit;
  background: rgba(10, 12, 20, .55);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-md);
  transition: all .22s var(--ease);
  backdrop-filter: blur(10px);
}
input::placeholder { color: var(--fg-mute); }
input:focus {
  outline: none;
  border-color: rgba(142, 162, 255, .6);
  background: rgba(10, 12, 20, .75);
  box-shadow: 0 0 0 4px var(--accent-soft), inset 0 1px 0 rgba(255, 255, 255, .06);
}

input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none;
  border: 1px solid var(--glass-line);
  border-radius: 5px;
  background: rgba(10, 12, 20, .6);
  cursor: pointer;
  transition: all .18s var(--ease);
  position: relative;
}
input[type=checkbox]:hover { border-color: rgba(142, 162, 255, .5); }
input[type=checkbox]:checked {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 0 12px rgba(142, 162, 255, .5);
}
input[type=checkbox]:checked::after {
  content: ""; position: absolute; left: 5.5px; top: 2px;
  width: 5px; height: 10px;
  border: solid #0a0c12; border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
input[type=checkbox]:disabled { opacity: .45; cursor: not-allowed; }

.field { margin-bottom: 18px; }
.field > span { display: block; font-size: 13.5px; color: var(--fg-dim); }
.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field-row .field { flex: 1 1 150px; margin-bottom: 18px; }

/* ---------- 按钮 ---------- */

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 20px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: #0a0c12;
  background: linear-gradient(135deg, #fff, #d9dffa);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: all .22s var(--ease);
  box-shadow: 0 8px 22px -10px rgba(255, 255, 255, .45);
}
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(255, 255, 255, .55); }
button:active, .btn:active { transform: translateY(0) scale(.99); }

.btn-primary { }
.btn-ghost, button.ghost {
  color: var(--fg);
  background: var(--glass-1);
  border: 1px solid var(--glass-line);
  box-shadow: none;
  font-weight: 500;
  backdrop-filter: blur(12px);
}
.btn-ghost:hover, button.ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .2);
  box-shadow: none;
}
.btn-danger, button.danger, .danger {
  color: var(--danger);
  border-color: rgba(255, 122, 114, .35);
}
.btn-danger:hover, button.danger:hover { color: #fff; background: rgba(255, 122, 114, .18); border-color: rgba(255, 122, 114, .55); }
.btn-sm { padding: 7px 14px; font-size: 13px; }

form button[type=submit] { margin-top: 4px; }

/* ---------- 表格 ---------- */

.table-wrap { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 11px 12px; vertical-align: middle; }
thead th {
  color: var(--fg-mute); font-weight: 500; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--glass-line);
}
tbody tr { border-bottom: 1px solid var(--glass-line-soft); transition: background .18s var(--ease); }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover { background: rgba(255, 255, 255, .035); }

table.kv { font-size: 14px; }
table.kv th {
  width: 110px; color: var(--fg-mute); font-weight: 500;
  border: 0; padding: 9px 0; font-size: 13.5px; text-transform: none; letter-spacing: 0;
}
table.kv td { border: 0; padding: 9px 0; }
table.kv tr { border: 0; }

.code {
  background: rgba(10, 12, 20, .6);
  border: 1px solid var(--glass-line-soft);
  padding: 3px 9px; border-radius: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; letter-spacing: .06em; color: #cfd7ff;
}

code {
  background: rgba(10, 12, 20, .6);
  border: 1px solid var(--glass-line-soft);
  padding: 2px 7px; border-radius: 6px;
  font-size: 13px;
}

/* ---------- 标签 / 徽章 ---------- */

.tag, .pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; margin: 2px 4px 2px 0;
  border-radius: 999px;
  font-size: 12px; line-height: 1.6;
  color: var(--fg-dim);
  background: var(--glass-1);
  border: 1px solid var(--glass-line-soft);
  white-space: nowrap;
}
.pill { padding: 5px 13px; font-size: 12.5px; }
.tag-admin { color: #cdb6ff; border-color: rgba(185, 140, 255, .35); background: rgba(185, 140, 255, .12); }
.tag-off { color: var(--err); border-color: rgba(255, 139, 132, .35); background: rgba(255, 139, 132, .1); }

/* ---------- 用户块 ---------- */

.userblock {
  padding: 22px 0 18px;
  border-top: 1px solid var(--glass-line-soft);
}
.userblock:first-of-type { border-top: 0; padding-top: 4px; }

.userhead { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }

.avatar {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  font-weight: 700; font-size: 17px; color: #0a0c12;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 18px -8px rgba(142, 162, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.userinfo { min-width: 0; }
.uname { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }

/* ---------- 站点勾选卡片 ---------- */

.sitegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}

.chip-check {
  display: flex; align-items: center; gap: 11px;
  margin: 0; padding: 11px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  background: rgba(255, 255, 255, .028);
  border: 1px solid var(--glass-line-soft);
  transition: all .2s var(--ease);
}
.chip-check:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  transform: translateY(-1px);
}
.chip-check:has(input:checked) {
  background: linear-gradient(140deg, rgba(142, 162, 255, .17), rgba(185, 140, 255, .09));
  border-color: rgba(142, 162, 255, .42);
  box-shadow: 0 6px 22px -14px rgba(142, 162, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.chip-check.is-locked { opacity: .6; cursor: default; }
.chip-check.is-locked:hover { transform: none; }
.chip-check span { min-width: 0; }
.chip-check em { display: block; font-style: normal; font-size: 13.5px; color: var(--fg); }
.chip-check i { display: block; font-style: normal; font-size: 11.5px; color: var(--fg-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 站点权限下方的说明（取消勾选 btr 会删实例）。放在权限块和按钮之间，
   .sitegrid 已经自带 16px 下边距，这里只需要补按钮上方那 14px。 */
.sitehint { margin: 0 0 14px; line-height: 1.6; }

.useractions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ---------- 站点链接列表（旧版 .sites） ---------- */

ul.sites { list-style: none; padding: 0; margin: 0; }
ul.sites li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--glass-line-soft);
  transition: padding-left .2s var(--ease);
}
ul.sites li:hover { padding-left: 8px; }
ul.sites li:last-child { border-bottom: 0; }
.host { color: var(--fg-mute); font-size: 12px; font-family: ui-monospace, Menlo, monospace; }

/* ---------- 玻璃弹窗 ---------- */

.glass-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: min(86vh, 780px);
  padding: 0;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  color: var(--fg);
  background: linear-gradient(158deg, rgba(28, 32, 46, .82), rgba(16, 18, 28, .9));
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .14);
  overflow: hidden;
}
.glass-dialog::backdrop {
  background: rgba(4, 5, 9, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.glass-dialog[open] { animation: pop .28s var(--ease); }
@keyframes pop {
  from { opacity: 0; transform: translateY(14px) scale(.975); }
  to   { opacity: 1; transform: none; }
}

.dlg-head {
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--glass-line-soft);
}
.dlg-head h3 { margin-bottom: 3px; font-size: 17px; }

.dlg-body { padding: 22px 26px 8px; overflow-y: auto; max-height: 58vh; }
.dlg-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 26px 22px;
  border-top: 1px solid var(--glass-line-soft);
}

.dlg-tools { display: flex; gap: 8px; margin: 8px 0 12px; }
.dlg-grid { margin-bottom: 6px; }

/* ---------- 响应式 ---------- */

@media (max-width: 620px) {
  .wrap { padding: 22px 14px 10px; }
  .panel, .card { padding: 20px 18px; border-radius: var(--r-md); }
  .sitegrid { grid-template-columns: 1fr; }
  .topbar { padding: 12px 16px; }
  .navlink { padding: 6px 11px; font-size: 13.5px; }
  .who { display: none; }
  .card.narrow { margin-top: 3vh; }
}

/* ============================================================
   背景可见度调优（放在最后，靠层叠覆盖上面的默认值）
   ============================================================ */

.blob {
  opacity: .82;
  filter: blur(76px);
}

/* 同名 keyframes 后者生效：把插画亮度从 .26 提到 .48 */
@keyframes artFade {
  0%     { opacity: 0; }
  1.25%  { opacity: .48; }
  15.4%  { opacity: .48; }
  16.67% { opacity: 0; }
  100%   { opacity: 0; }
}

/* 压暗层减负：只在四周加暗，中间尽量让插画透出来 */
.veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(125% 85% at 50% 10%, rgba(6,7,11,.04) 0%, rgba(6,7,11,.34) 58%, rgba(6,7,11,.8) 100%),
    linear-gradient(180deg, rgba(6,7,11,.12), rgba(6,7,11,.38));
}

/* 复选框描边加亮，深色底上才看得见 */
input[type=checkbox] {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
}
input[type=checkbox]:hover {
  border-color: rgba(142, 162, 255, .7);
  background: rgba(255, 255, 255, .11);
}

/* 插画更亮以后，玻璃面板的底子也提一点，保证文字对比度 */
.panel, .card {
  background: linear-gradient(158deg, rgba(20, 23, 34, .62), rgba(12, 14, 22, .5));
  backdrop-filter: saturate(170%) blur(30px);
  -webkit-backdrop-filter: saturate(170%) blur(30px);
}

/* 修 bug：label.check input { width:auto } 优先级更高，把 appearance:none 的
   复选框压成了 0 宽，导致完全看不见。这里用更高优先级锁死尺寸。 */
label.check input[type=checkbox],
.chip-check input[type=checkbox] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  flex: none;
}

/* 插画稍微收一点，别让中心区域太抢 */
@keyframes artFade {
  0%     { opacity: 0; }
  1.25%  { opacity: .42; }
  15.4%  { opacity: .42; }
  16.67% { opacity: 0; }
  100%   { opacity: 0; }
}
.art { background-position: center 30%; }

/* ============================================================
   iOS 液态玻璃
   要点：靠"高透明 + 强折射饱和 + 镜面高光边"来表达材质，
   而不是靠把面板压暗。面板后面要能明显看出背景。
   ============================================================ */

/* 压暗层再减负，让背景插画有足够亮度透过来 */
.veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(6,7,11,.0) 0%, rgba(6,7,11,.26) 60%, rgba(6,7,11,.72) 100%),
    linear-gradient(180deg, rgba(6,7,11,.08), rgba(6,7,11,.3));
}

/* 插画本身保持清晰，模糊交给玻璃的 backdrop-filter 去做 */
.art { filter: blur(1.2px) saturate(122%); }

.panel, .card {
  background:
    linear-gradient(148deg,
      rgba(255, 255, 255, .17) 0%,
      rgba(255, 255, 255, .075) 36%,
      rgba(255, 255, 255, .035) 66%,
      rgba(255, 255, 255, .07) 100%),
    rgba(12, 15, 24, .2);
  backdrop-filter: blur(20px) saturate(190%) brightness(1.07);
  -webkit-backdrop-filter: blur(20px) saturate(190%) brightness(1.07);
  border: 1px solid rgba(255, 255, 255, .19);
  border-radius: 24px;
  box-shadow:
    0 34px 72px -32px rgba(0, 0, 0, .72),
    0 2px 10px -4px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .40),
    inset 0 -1px 0 rgba(255, 255, 255, .09),
    inset 0 0 64px rgba(255, 255, 255, .035);
}

/* 左上角镜面反光，玻璃"厚度"的关键 */
.panel::after, .card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(115% 78% at 0% 0%, rgba(255, 255, 255, .17), transparent 44%),
    radial-gradient(90% 60% at 100% 100%, rgba(255, 255, 255, .07), transparent 46%);
}

/* 顶栏同样玻璃化 */
.topbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* 输入框做成浅色玻璃，跟面板一个材质语言 */
input[type=text], input[type=password], input[type=number],
input[type=email], input:not([type]) {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .17);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus,
input[type=email]:focus, input:not([type]):focus {
  background: rgba(255, 255, 255, .085);
  border-color: rgba(142, 162, 255, .75);
  box-shadow: 0 0 0 4px var(--accent-soft), inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* 次级按钮也透明化 */
.btn-ghost, button.ghost, .navlink {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* 弹窗同步 */
.glass-dialog {
  background:
    linear-gradient(148deg,
      rgba(255, 255, 255, .16) 0%,
      rgba(255, 255, 255, .06) 40%,
      rgba(255, 255, 255, .03) 100%),
    rgba(12, 15, 24, .34);
  backdrop-filter: blur(26px) saturate(190%) brightness(1.06);
  -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow:
    0 44px 96px -34px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(255, 255, 255, .08);
}
.glass-dialog::backdrop {
  background: rgba(4, 5, 9, .5);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* 分隔线用亮色，玻璃材质里暗线会显脏 */
tbody tr { border-bottom-color: rgba(255, 255, 255, .07); }
.userblock { border-top-color: rgba(255, 255, 255, .07); }
thead th { border-bottom-color: rgba(255, 255, 255, .12); }

/* 玻璃变透之后，文字对比度同步提一档 */
label, .field > span { color: #ccd2e4; }
.hint { color: #9aa2b8; }
.muted, .small { color: #b2b9cd; }
.host { color: #9aa2b8; }
.foot { color: #9aa2b8; }
.who { color: #d3d9ea; }
.navlink { color: #c3c9dc; }
table.kv th { color: #a6adc3; }
thead th { color: #9aa2b8; }

/* ============================================================
   再透一档：iOS 液态玻璃的透明度本来就很高
   ============================================================ */

.veil {
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(6,7,11,0) 0%, rgba(6,7,11,.16) 62%, rgba(6,7,11,.62) 100%),
    linear-gradient(180deg, rgba(6,7,11,.04), rgba(6,7,11,.22));
}

.panel, .card {
  background:
    linear-gradient(148deg,
      rgba(255, 255, 255, .155) 0%,
      rgba(255, 255, 255, .058) 34%,
      rgba(255, 255, 255, .028) 66%,
      rgba(255, 255, 255, .055) 100%),
    rgba(10, 13, 22, .10);
  backdrop-filter: blur(15px) saturate(210%) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) saturate(210%) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, .235);
  box-shadow:
    0 36px 76px -34px rgba(0, 0, 0, .74),
    0 2px 10px -4px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .48),
    inset 0 -1px 0 rgba(255, 255, 255, .10),
    inset 0 0 72px rgba(255, 255, 255, .04);
}

.panel::after, .card::after {
  background:
    radial-gradient(115% 78% at 0% 0%, rgba(255, 255, 255, .21), transparent 46%),
    radial-gradient(90% 60% at 100% 100%, rgba(255, 255, 255, .09), transparent 48%);
}

.glass-dialog {
  background:
    linear-gradient(148deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.05) 40%, rgba(255,255,255,.03) 100%),
    rgba(10, 13, 22, .26);
  backdrop-filter: blur(22px) saturate(205%) brightness(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(205%) brightness(1.08);
}

/* ============================================================
   头像
   ============================================================ */

.brand-avatar {
  width: 26px; height: 26px; border-radius: 9px;
  object-fit: cover; flex: none;
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.logo-user {
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0;
  color: #0a0c12;
}

.avatar-lg {
  width: 74px; height: 74px; flex: none;
  border-radius: 21px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.avatar-fallback {
  display: grid; place-items: center;
  font-size: 27px; font-weight: 700; color: #0a0c12;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.avatar-preview {
  width: 140px; height: 140px;
  border-radius: 32px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .25);
  font-size: 44px;
}

.profile-row { display: flex; gap: 30px; flex-wrap: wrap; }
.avatar-col { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 168px; }
.profile-col { flex: 1 1 320px; min-width: 250px; }

.file-btn {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 500;
  color: var(--fg);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  cursor: pointer;
  overflow: hidden;
  transition: all .2s var(--ease);
}
.file-btn:hover { background: rgba(255, 255, 255, .15); color: #fff; border-color: rgba(255, 255, 255, .32); }
.file-btn input[type=file] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; margin: 0; padding: 0;
}
.avatar-col .muted { text-align: center; line-height: 1.5; }

/* 标签里的内联小标签：让「有效天数」这类带说明的字段保持单行，
   否则标签比同排其他字段高一截，输入框就会错位。 */
.field-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--fg-mute);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
}

/* 兜底：万一标签还是换行了（窄屏），把同排输入框按底边对齐 */
.field-row { align-items: flex-end; }

/* 用户列表里的头像：<img> 版本要填满圆角方块，不能拉伸 */
img.avatar {
  object-fit: cover;
  background: rgba(255, 255, 255, .06);
}

/* ============================================================
   头像裁切弹窗
   ============================================================ */

.crop-dlg { width: min(520px, calc(100vw - 32px)); }

.crop-body {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; padding-bottom: 22px;
}

.crop-stage {
  position: relative;
  flex: none;                                      /* 关键：不被 flex 压扁 */
  width:  min(400px, calc(100vw - 100px), 52vh);
  height: min(400px, calc(100vw - 100px), 52vh);   /* 宽高都写死，不依赖 aspect-ratio */
  border-radius: 18px;
  overflow: hidden;
  background: #0b0d12;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 18px 42px -22px rgba(0, 0, 0, .92);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.crop-stage:active { cursor: grabbing; }
.crop-stage canvas { display: block; width: 100%; height: 100%; }

/* 三分构图网格 */
.crop-grid {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .2) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .2) 1px, transparent 1px);
  background-size: 33.3333% 33.3333%;
  background-position: -1px -1px;
  opacity: .5;
  mix-blend-mode: overlay;
}

/* 四角取景框 */
.crop-corner {
  position: absolute;
  width: 22px; height: 22px;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, .88);
  border-radius: 3px;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, .65));
}
.c-tl { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.c-tr { top: 9px; right: 9px; border-left: 0; border-bottom: 0; }
.c-bl { bottom: 9px; left: 9px; border-right: 0; border-top: 0; }
.c-br { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }

.crop-zoom {
  display: flex; align-items: center; gap: 14px;
  flex: none;
  width: min(400px, calc(100vw - 100px), 52vh);
}

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg, rgba(142, 162, 255, .9), rgba(185, 140, 255, .9));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border: 0; border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .9);
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px;
  border: 0; border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}