/* 中转管理页的样式：StyleKit「超现实主义风」（surrealism）
   午夜蓝打底，沙漠金 / 玫瑰粉点缀，奶油白卡片；衬线、斜体标题、慢慢漂的光晕、不对称的有机形状、慢过渡
   原生 CSS（页面没用 Tailwind）；不加载网络字体：服务器在国内，CSP 也只许同源 */
:root {
  --midnight: #1a1a3e;
  --violet: #4a3f6b;
  --plum: #6b4a6e;
  --gold: #d4a574;
  --gold-deep: #9a7653; /* 输入框边框：和奶油底对比度 ≥ 3 */
  --rose: #c38d94;
  --cream: #f0ece4;
  --sage: #90ba6d;
  --ink-soft: rgba(26, 26, 62, 0.74); /* 奶油底上的次要文字，对比度 ≥ 4.5 */
  --cream-soft: rgba(240, 236, 228, 0.92); /* 深底上的次要文字：玫瑰光晕最亮的地方也要 ≥ 4.5 */
  --mist: #f2b8c0; /* 深底上的错误提示 */
  --danger: #9b3d4a;
  --online: #3f6b2a;
  --focus: var(--gold); /* 深底上的焦点框；卡片里换成紫色 */
  --ease: cubic-bezier(0.45, 0, 0.25, 1);
  --slow: 700ms var(--ease);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Songti SC", STSong, "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; }
html { background: var(--midnight); }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font: 16px/1.65 var(--serif);
  color: var(--cream);
  font-synthesis: weight; /* 中文字体没有斜体：不让浏览器硬拧，只有西文是斜的 */
  background:
    radial-gradient(110% 70% at 90% -10%, rgba(195, 141, 148, 0.2), transparent 60%),
    radial-gradient(80% 60% at -10% 110%, rgba(212, 165, 116, 0.16), transparent 60%),
    linear-gradient(160deg, var(--midnight) 0%, #232352 55%, #2b2350 100%);
}

/* 背景里慢慢漂、慢慢变形的光晕 */
.orbs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.orbs span {
  position: absolute;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  filter: blur(70px);
  animation: drift 26s var(--ease) infinite alternate;
}
.orbs span:nth-child(1) { width: 40vmax; height: 32vmax; top: -12vmax; right: -10vmax; background: var(--rose); opacity: 0.36; }
.orbs span:nth-child(2) { width: 30vmax; height: 38vmax; bottom: -16vmax; left: -12vmax; background: var(--gold); opacity: 0.3; animation-duration: 34s; }
.orbs span:nth-child(3) { width: 20vmax; height: 16vmax; top: 42%; left: 48%; background: var(--violet); opacity: 0.55; animation-duration: 22s; animation-direction: alternate-reverse; }
@keyframes drift {
  to { transform: translate(-5vmax, 4vmax) rotate(24deg) scale(1.2); border-radius: 62% 38% 34% 66% / 52% 62% 38% 48%; }
}

main {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) clamp(18px, 5vw, 56px) 96px;
  animation: rise 0.9s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* 页头：标题偏左、斜体，下面一道悬停时「融化」变长的金粉线 */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 clamp(24px, 4vw, 48px) clamp(0px, 4vw, 48px);
}
h1 { margin: 0; font-size: clamp(36px, 6.5vw, 68px); font-style: italic; font-weight: 400; line-height: 1.05; }
h1::after {
  content: "";
  display: block;
  width: 42%;
  height: 7px;
  margin-top: 12px;
  border-radius: 0 0 70% 30% / 0 0 100% 100%;
  background: linear-gradient(90deg, var(--gold), var(--rose));
  transition: width 1s var(--ease);
}
.top:hover h1::after { width: 100%; }
.tagline { margin: 10px 0 0; color: var(--cream-soft); font-style: italic; }
h2 { margin: 0 0 4px; font-size: 26px; font-style: italic; font-weight: 400; line-height: 1.25; }
#error { min-height: 1.65em; margin: 0 0 14px clamp(0px, 4vw, 48px); color: var(--mist); font-style: italic; }

/* 奶油色卡片：四个角各不相同的有机圆角，金 / 玫瑰色的光晕代替阴影 */
.card {
  --focus: var(--violet);
  position: relative;
  color: var(--midnight);
  background: linear-gradient(145deg, var(--cream) 0%, rgba(240, 236, 228, 0.94) 55%, #eadfd2 100%);
  border: 1px solid rgba(212, 165, 116, 0.35);
  border-radius: 28px 56px 32px 64px / 36px 28px 60px 40px;
  padding: clamp(20px, 3.5vw, 34px);
  box-shadow: 0 0 40px rgba(212, 165, 116, 0.16), 0 24px 60px rgba(195, 141, 148, 0.16);
  transition: transform var(--slow), box-shadow var(--slow);
}
.card .hint, .muted { color: var(--ink-soft); }
.card .hint { margin: 0 0 18px; font-size: 14px; }
.muted { font-size: 13px; }
.login { display: grid; gap: 14px; max-width: 440px; margin-left: clamp(0px, 10vw, 140px); transform: rotate(-1.2deg); }
.login .hint { margin: 0; }

label { display: grid; gap: 6px; font-size: 14px; font-style: italic; color: var(--ink-soft); }
input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  font: 16px/1.4 var(--mono);
  color: var(--midnight);
  background: #f7f3ec;
  border: 1px solid var(--gold-deep);
  border-radius: 14px 20px 12px 22px;
  transition: border-color var(--slow), box-shadow var(--slow);
}
input:focus { outline: 2px solid transparent; border-color: var(--rose); box-shadow: 0 0 0 2px var(--violet), 0 0 24px rgba(195, 141, 148, 0.4); }

/* 按钮：悬停时像被梦拉扯一下（斜一点、转一点）+ 玫瑰色光晕，不放大 */
button {
  min-height: 44px;
  padding: 10px 20px;
  font: italic 16px/1.2 var(--serif);
  color: var(--midnight);
  background: rgba(212, 165, 116, 0.18);
  border: 1px solid rgba(26, 26, 62, 0.5);
  border-radius: 16px 22px 14px 24px / 18px 14px 22px 16px;
  cursor: pointer;
  transition: transform var(--slow), box-shadow var(--slow), background-color var(--slow);
}
button:hover { transform: skewX(-2deg) rotate(-1deg); box-shadow: 0 0 36px rgba(195, 141, 148, 0.35); }
button:active { transform: skewX(-2deg) rotate(-1deg) translateY(1px); }
button:focus-visible, #notice:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
button.primary { color: var(--cream); border-color: transparent; background: linear-gradient(120deg, var(--midnight), var(--violet) 65%, var(--plum)); }
button.danger { color: var(--danger); background: transparent; border-color: rgba(155, 61, 74, 0.7); }
button.ghost { color: var(--cream); background: transparent; border-color: rgba(240, 236, 228, 0.4); }

/* 登录后：左边窄的「新用户」卡片微微倾斜，右边宽的用户列表；不对称 */
#panel { display: grid; grid-template-columns: minmax(260px, 5fr) 7fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
.add { position: sticky; top: 24px; margin-top: 28px; transform: rotate(0.8deg); }
.add form { display: grid; gap: 16px; }
.list { min-width: 0; }
.list-head { margin: 0 0 16px 12px; }
.list-head p { margin: 0; color: var(--cream-soft); font-size: 14px; font-style: italic; }
#users { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.user { display: grid; gap: 12px; }
.user:nth-child(even) { margin-left: clamp(0px, 3vw, 36px); border-radius: 56px 28px 64px 32px / 28px 40px 36px 60px; }
.user:hover { transform: skewX(1deg) rotate(-0.4deg); box-shadow: 0 0 50px rgba(195, 141, 148, 0.3); }
.user .name { margin: 0; font-size: 24px; font-style: italic; font-weight: 400; line-height: 1.2; }
.user .addr { font: 13px/1.5 var(--mono); color: var(--ink-soft); overflow-wrap: anywhere; }
.user .state { display: grid; gap: 2px; font-size: 15px; }
.user .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.user.empty { display: block; font-style: italic; color: var(--ink-soft); }
.status { display: inline-flex; align-items: center; gap: 10px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(26, 26, 62, 0.3); }
.status.on { color: var(--online); }
.status.on .dot { background: var(--sage); box-shadow: 0 0 0 3px rgba(144, 186, 109, 0.25), 0 0 14px var(--sage); animation: breathe 3.2s var(--ease) infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 6px rgba(144, 186, 109, 0.12), 0 0 22px var(--sage); } }

/* 安全码：横跨整行，边缘像在融化，底下还垂下一滴 */
#notice {
  --focus: var(--gold);
  grid-column: 1 / -1;
  position: relative;
  margin-bottom: 18px;
  padding: 24px clamp(22px, 4vw, 44px) 30px;
  color: var(--midnight);
  background: linear-gradient(135deg, var(--cream) 0%, #ecd9c2 55%, #e8c7c6 100%);
  border-radius: 40px 110px 60px 140px / 70px 40px 110px 60px;
  box-shadow: 0 0 60px rgba(212, 165, 116, 0.35); /* 不旋转：转了小字会糊，安全码要看清抄对 */
  animation: rise 0.9s var(--ease) both;
}
#notice::after {
  content: "";
  position: absolute;
  left: 22%;
  bottom: -24px;
  width: 42px;
  height: 44px;
  background: #ead3c0;
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
}
#notice p { margin: 0; }
#notice .code { margin: 6px 0 8px; font: 400 clamp(28px, 6vw, 42px)/1.2 var(--mono); letter-spacing: 0.14em; user-select: all; }

@media (max-width: 760px) {
  #panel { grid-template-columns: 1fr; }
  .add { position: static; margin-top: 0; transform: rotate(0.5deg); }
  .login { margin-left: 0; }
  .user:nth-child(even) { margin-left: 14px; }
}
/* 系统开了「减弱动态效果」：光晕不漂、悬停不扭、过渡全关 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  button:hover, button:active, .user:hover { transform: none; }
}