:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  --blue: #3971f5;
  --blue-dark: #2d62df;
  --ink: #202633;
  --muted: #929aab;
  --paper: #fff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #f7f8fa; color: var(--ink); }
body { -webkit-font-smoothing: antialiased; }

.page-shell {
  position: relative;
  width: min(100%, 480px);
  min-height: 100svh;
  margin: 0 auto;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  overflow: hidden;
  background: #fafafa url("assets/bg_xiaoyou.png") center top / 100% min(193.94vw, 930.9px) no-repeat;
}

.credential-card {
  position: relative;
  z-index: 2;
  width: 89.87%;
  min-height: min(127.2vw, 610.6px);
  margin: min(28.8vw, 138.2px) auto 0;
  padding: min(4.8vw, 23px) min(5.33vw, 25.6px) min(18.4vw, 88.3px);
  overflow: hidden;
  background: transparent;
  border-radius: 14px 14px 15px 15px;
  box-shadow: none;
}

/* Hidden edit button — revealed by 3-finger long press */
.edit-fab {
  position: fixed;
  z-index: 999;
  bottom: max(28px, env(safe-area-inset-bottom, 12px));
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #3971f5 0%, #6d4de6 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  font-family: inherit;
  letter-spacing: .3px;
  box-shadow: 0 6px 24px rgba(57,113,245,.35), 0 1.5px 4px rgba(0,0,0,.08);
  cursor: pointer;
  opacity: 0;
  transform: translateY(24px) scale(.92);
  pointer-events: none;
  transition: opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color: transparent;
}
.edit-fab.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.edit-fab:active {
  transform: translateY(0) scale(.95);
}
.edit-fab svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.profile-row { display: grid; grid-template-columns: 44% 1fr; gap: min(8vw, 38.4px); align-items: start; }
.profile-copy { padding-top: min(4vw, 19.2px); }
.portrait-wrap { position: relative; width: 100%; aspect-ratio: 258 / 358; overflow: hidden; background: #edf2fa; }
.portrait { position: relative; z-index: 2; display: none; width: 100%; height: 100%; object-fit: cover; }
.portrait-fallback { position: absolute; inset: 0; background: linear-gradient(#edf4fc 51%, #dbe5f3 51%); overflow: hidden; }
.portrait-fallback .head { position: absolute; left: 50%; top: 17%; width: 42%; aspect-ratio: .82; transform: translateX(-50%); border-radius: 48% 48% 43% 43%; background: #c8d3e2; box-shadow: 0 -12px 0 -5px #61728a; }
.portrait-fallback .body { position: absolute; left: 50%; bottom: -17%; width: 92%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50% 50% 0 0; background: #263c5c; }
.field { display: flex; flex-direction: column; gap: min(1.6vw, 7.68px); font-size: min(4.533vw, 21.76px); line-height: 1.412; }
.field + .field { margin-top: 16px; }
.field .label { color: #9195ac; font-size: min(3.2vw, 15.36px); line-height: 1.375; font-weight: 600; }
.field strong { font-size: min(5.067vw, 24.32px); line-height: 1.395; font-weight: 600; }
.field.compact { gap: 8px; }
.role-field { margin-top: min(4.53vw, 21.76px) !important; }
.role-field strong { font-size: min(5.067vw, 24.32px); line-height: 1.395; }
.details { position: relative; z-index: 2; margin-top: min(8.27vw, 39.68px); }
.details .field { gap: min(1.6vw, 7.68px); }
.details .field + .field { margin-top: min(2.67vw, 12.8px); }
.details .field > span:last-child { color: #2c333d; font-size: min(4.533vw, 21.76px); line-height: 1.412; font-weight: 500; }
.clock-panel { position: absolute; inset: auto 0 0; height: min(18.4vw, 88.3px); display: grid; place-items: center; color: white; background: transparent; }
.clock-panel time { font-size: min(10.4vw, 49.92px); font-weight: 800; letter-spacing: min(1.77vw, 8.5px); font-variant-numeric: tabular-nums; line-height: 1.41; }
.admin-body { min-height: 100svh; padding: 25px 18px max(40px, env(safe-area-inset-bottom)); background: linear-gradient(150deg,#edf3ff,#f9fafc 50%); }
.admin-shell { width: min(100%, 540px); margin: 0 auto; }
.back-link { color: #5875aa; text-decoration: none; font-size: 14px; }
.admin-shell header { margin: 36px 0 25px; }
.admin-kicker { color: var(--blue); font-size: 11px; letter-spacing: 2px; font-weight: 700; }
.admin-shell h1 { margin: 8px 0 7px; font-size: 30px; }
.admin-shell header p { margin: 0; color: #7f8795; font-size: 13px; line-height: 1.6; }
.settings-form { padding: 23px; border-radius: 18px; background: #fff; box-shadow: 0 14px 45px rgba(62,87,137,.1); }
.settings-form label { display: block; margin-bottom: 17px; color: #5c6574; font-size: 13px; font-weight: 600; }
.settings-form input:not([type="file"]) { display: block; width: 100%; margin-top: 7px; padding: 13px 14px; border: 1px solid #dce2ec; border-radius: 9px; outline: none; color: var(--ink); background: #fbfcfe; font: inherit; font-size: 16px; font-weight: 400; }
.settings-form input:focus { border-color: #81a3f4; box-shadow: 0 0 0 3px rgba(57,113,245,.09); }
.file-label input { display: block; margin-top: 9px; color: #788294; font-size: 12px; }
.file-label small { display: block; margin-top: 7px; color: #a0a7b2; font-weight: 400; }
.photo-preview { height: 80px; margin: -4px 0 18px; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #9aa2ae; background: #f4f6fa; font-size: 12px; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.settings-form button { width: 100%; border: 0; border-radius: 10px; padding: 14px; color: #fff; background: var(--blue); font: inherit; font-weight: 650; }
.settings-form .secondary-button { margin-top: 10px; color: #697486; background: #edf1f7; }
.form-status { min-height: 20px; margin: 13px 0 0; text-align: center; color: #4d8b61; font-size: 12px; }

@media (min-width: 481px) {
  .page-shell { box-shadow: 0 0 45px rgba(38,51,74,.08); }
}
@media (max-width: 370px) {
  .credential-card { width: 89.87%; }
}