.frame-panel { @apply rounded-2xl border border-border/90 bg-card/90 backdrop-blur-xl; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .theme-light .frame-panel { box-shadow: 0 20px 45px rgba(31, 22, 12, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); } .gold-edge { box-shadow: inset 0 0 0 1px rgba(180, 180, 180, 0.28); } .ornament-grid { background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0), linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 24%); background-size: 20px 20px, 100% 100%; } .theme-light .ornament-grid { background-image: radial-gradient(circle at 1px 1px, rgba(120, 120, 120, 0.08) 1px, transparent 0), linear-gradient(180deg, rgba(170, 170, 170, 0.08), transparent 30%); } .page-enter { animation: fadeUp 0.45s ease-out both; } .shimmer-empty { background: linear-gradient(100deg, rgba(210, 210, 210, 0.08), rgba(210, 210, 210, 0.16), rgba(210, 210, 210, 0.08)); background-size: 220% 100%; animation: shimmer 2s linear infinite; } .login-shell { position: relative; isolation: isolate; } .login-shell::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(210, 210, 210, 0.35), transparent 40%), radial-gradient(circle at 80% 80%, rgba(160, 160, 160, 0.25), transparent 50%); opacity: 0.8; z-index: -2; } .login-shell::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(210, 210, 210, 0.14) 1px, transparent 0); background-size: 22px 22px; opacity: 0.6; z-index: -1; } .login-card { @apply rounded-3xl border border-border/80 bg-card/85 backdrop-blur-2xl; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(200, 200, 200, 0.2); } .theme-light .login-card { box-shadow: 0 24px 50px rgba(28, 18, 8, 0.12), inset 0 0 0 1px rgba(200, 200, 200, 0.3); } .gold-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(190, 190, 190, 0.6), transparent); }