:root{
  --primary:#4F46E5; --primary-2:#4338CA; --muted:#64748b; --danger:#ef4444;
  --bg1:#f8fafc; --bg2:#eef2ff;
}
*{box-sizing:border-box}
html{font-size:clamp(14px,3.8vw,16px)}
body{
  margin:0;color:#1e293b;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,0.12), transparent 40%),
    radial-gradient(900px 500px at 90% 10%, rgba(6,182,212,0.10), transparent 45%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  min-height:100vh;
}
img,canvas,video{max-width:100%;height:auto}

/* 关键工具类（本地化） */
.hidden{display:none !important}
.antialiased{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.space-y-4 > :not([hidden]) ~ :not([hidden]){ margin-top:1rem; } /* 本地化的 space-y-4 */
.mb-6{margin-bottom:1.5rem}
.py-6{padding-top:1.5rem; padding-bottom:1.5rem}
.backdrop-blur{backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}

.font-sans{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}
.text-slate-800{color:#1e293b}.text-slate-700{color:#334155}.text-green-600{color:#16a34a}
.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-2xl{font-size:1.5rem}
.font-medium{font-weight:500}.font-semibold{font-weight:600}
.text-muted{color:var(--muted)}.text-primary{color:var(--primary)}

.w-full{width:100%}.max-w-3xl{max-width:48rem}.max-w-md{max-width:28rem}.mx-auto{margin-left:auto;margin-right:auto}
.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.pt-3{padding-top:.75rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mb-1{margin-bottom:.25rem}.mb-4{margin-bottom:1rem}

.rounded-md{border-radius:.375rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}

.border{border:1px solid #e5e7eb}
.border-2{border:2px solid #e5e7eb}
.border-slate-300{border-color:#cbd5e1}
.border-white\/30{border-color:rgba(255,255,255,.3)}
.border-white\/40{border-color:rgba(255,255,255,.4)}

.flex{display:flex}
.inline-flex{display:inline-flex}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.flex-1{flex:1 1 auto}
.flex-wrap{flex-wrap:wrap}
.flex-col{flex-direction:column}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.space-x-2 > :not([hidden]) ~ :not([hidden]){margin-left:.5rem}

.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1, minmax(0,1fr))}
.items-center{align-items:center}
.gap-3{gap:.75rem}
.md\:grid-cols-3{grid-template-columns:repeat(1,minmax(0,1fr))}
.md\:col-span-2{grid-column:span 1 / span 1}
@media (min-width:768px){
  .md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
  .md\:col-span-2{grid-column:span 2 / span 2}
}

.object-contain{object-fit:contain}
.max-h-64{max-height:16rem}

.text-center{text-align:center}
.text-right{text-align:right}

.ring-1{box-shadow:0 0 0 1px currentColor inset}
.ring-red-300{color:#fca5a5}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.top-4{top:1rem}.right-4{right:1rem}.fixed{position:fixed}.inset-0{top:0;right:0;bottom:0;left:0}
.z-40{z-index:40}.z-50{z-index:50}

.cursor-pointer{cursor:pointer}
.transition{transition:all .2s ease}
.transition-colors{transition:color .2s ease,background-color .2s ease,border-color .2s ease}

/* 玻璃态 */
.bg-black\/40{background:rgba(0,0,0,.4)}
.bg-white\/20{background:rgba(255,255,255,.2)}
.bg-white\/30{background:rgba(255,255,255,.3)}

.glass{
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);border-radius:1rem;
  box-shadow:0 8px 30px rgba(2,6,23,.12);backdrop-filter: blur(14px) saturate(120%);-webkit-backdrop-filter: blur(14px) saturate(120%);
}
.glass-dark{background:rgba(30,41,59,.5);border:1px solid rgba(51,65,85,.5);color:#f8fafc;backdrop-filter: blur(14px) saturate(120%)}
.glass-input{background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.4);color:#0f172a;backdrop-filter: blur(14px) saturate(120%)}
.glass-hover:hover{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.4)}

/* 按钮 */
.btn-primary{
  background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff;border:0;border-radius:.75rem;padding:.5rem 1rem;
  box-shadow:0 6px 18px rgba(16,24,40,.1);
}
.input-focus:focus{outline:none;box-shadow:0 0 0 2px rgba(79,70,229,.3);border-color:var(--primary)}
.error-text{color:var(--danger)}
.icon{display:inline-block;vertical-align:middle;margin-right:.375rem;color:currentColor}

/* 上传/裁剪布局与模态（加宽） */
.avatar-wrapper{height:64vh;border-radius:12px;overflow:hidden;width:100%}
.avatar-modal-inner{max-width:1280px;width:94%;margin:0 auto}
#dropzone{width:100%;max-width:1280px;margin:0 auto}
.loading{display:none;position:fixed;inset:0;z-index:60;align-items:center;justify-content:center;background:rgba(15,23,42,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.loading .spinner{width:44px;height:44px;border-radius:9999px;border:4px solid rgba(255,255,255,.18);border-top-color:rgba(79,70,229,.95);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hidden-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-inner{max-height:calc(100vh - 64px);overflow:auto;-webkit-overflow-scrolling:touch}
.avatar-controls{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.avatar-controls .glass{padding:.5rem;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
#previewImage{max-height:68vh}
@media (max-width:1024px){.avatar-modal-inner{width:96%;max-width:900px}}
@media (max-width:640px){
  .avatar-wrapper{height:56vh;border-radius:10px}
  .avatar-controls{gap:.25rem}.glass{padding:.45rem}
  #avatar-name{font-size:12px;max-width:140px;display:inline-block;vertical-align:middle}
  #dropzone{min-height:260px}.btn-primary{padding-left:.75rem;padding-right:.75rem}
}
@media (max-height:600px){.modal-inner{max-height:calc(100vh - 28px)}}

/* 单选外观（不依赖 peer） */
label.inline-flex input[type="radio"] + span{
  width:1rem;height:1rem;border-radius:9999px;border:1px solid #cbd5e1;display:flex;align-items:center;justify-content:center
}
label.inline-flex input[type="radio"] + span .radio-dot{width:.5rem;height:.5rem;border-radius:9999px;background:#fff;transform:scale(.9)}
label.inline-flex input[type="radio"]:checked + span{background:var(--primary);border-color:var(--primary)}