:root {
  --purple: #8b5cf6;
  --purple-dark: #6d28d9;
  --orange: #f59e0b;
  --red: #ef4444;
  --ink: #1e1b4b;
  --muted: #6b7280;
  --line: rgba(255, 255, 255, 0.5);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  background: linear-gradient(135deg, #6366f1 0%, #f59e0b 50%, #ef4444 100%);
  background-attachment: fixed;
}

.background-shapes { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.shape { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .76; animation: drift 14s ease-in-out infinite alternate; }
.shape.one { width: 600px; height: 600px; left: -8%; top: -28%; background: linear-gradient(135deg, #a78bfa, #818cf8); }
.shape.two { width: 520px; height: 520px; right: -8%; bottom: -20%; background: linear-gradient(135deg, #f472b6, #e879f9); animation-delay: -4s; }
.shape.three { width: 400px; height: 400px; right: 19%; bottom: -8%; background: linear-gradient(135deg, #34d399, #6ee7b7); animation-delay: -8s; }
.shape.four { width: 370px; height: 370px; right: -5%; top: 24%; background: linear-gradient(135deg, #fbbf24, #f59e0b); animation-delay: -11s; }
@keyframes drift { to { transform: translate3d(28px, -20px, 0) scale(1.07); } }

.page-shell { position: relative; z-index: 1; width: min(100%, 940px); margin: 0 auto; padding: 5vh 20px; }
.glass-card {
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 32px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(255, 255, 255, .3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.main-card { width: min(460px, 100%); margin: 0 auto; padding: 48px 36px 36px; }
.brand { display: flex; justify-content: center; align-items: center; gap: 16px; }
.logo { display: grid; place-items: center; width: 72px; height: 72px; color: white; border-radius: 20px; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); box-shadow: 0 11px 39px rgba(124, 58, 237, .48); }
.logo svg { width: 40px; height: 40px; }
.title { margin: 0; font-size: 34px; letter-spacing: -1px; background: linear-gradient(135deg, var(--purple), #a78bfa); background-clip: text; -webkit-background-clip: text; color: transparent; }
.subtitle { margin: 28px 0 0; text-align: center; color: var(--muted); font-size: 15px; }
.subtitle .dot { display: inline-block; width: 5px; height: 5px; margin: 0 8px 3px; border-radius: 50%; background: var(--purple); }
.warning { display: flex; justify-content: center; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 26px auto; padding: 11px 18px; color: var(--red); background: rgba(239, 68, 68, .08); border-radius: 999px; font-size: 14px; }
.pulse { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(239, 68, 68, .35); animation: pulse 1.7s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } }
.input-group { display: flex; overflow: hidden; min-height: 61px; border-radius: 14px; background: #fff; box-shadow: 0 2px 16px rgba(0, 0, 0, .06); }
input, textarea, button { font: inherit; }
.input-group input { min-width: 0; flex: 1; border: 0; outline: 0; padding: 0 20px; color: #333; font-size: 16px; }
.primary-button { border: 0; color: #fff; background: #e74c3c; padding: 0 34px; cursor: pointer; font-weight: 700; }
.primary-button:hover { background: #d94031; }
.password-link, .button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; border: 0; border-radius: 10px; padding: 12px 22px; color: #fff; text-decoration: none; cursor: pointer; font-weight: 700; }
.password-link { margin-top: 28px; background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 16px rgba(245, 158, 11, .25); }
.button { background: linear-gradient(135deg, var(--purple), var(--purple-dark)); box-shadow: 0 7px 20px rgba(109, 40, 217, .2); }
.button.secondary { color: var(--purple-dark); background: rgba(139, 92, 246, .1); box-shadow: none; }
.button.danger { background: #ef4444; box-shadow: none; }
.center { text-align: center; }
.info { margin: 26px 0 0; text-align: center; color: var(--purple); font-size: 14px; }
.update-tag { display: inline-block; margin-top: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(139, 92, 246, .1); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 28px; }
.stat-card { padding: 6px 4px; text-align: center; border-radius: 6px; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.stat-value { color: var(--purple); font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-label { color: var(--muted); font-size: 11px; white-space: nowrap; }
.online-dot { display: inline-block; width: 4px; height: 4px; margin: 0 5px 3px 0; border-radius: 50%; background: #10b981; }
.message { min-height: 22px; margin: 10px 0 0; text-align: center; color: var(--red); font-size: 13px; }
.top-link { display: inline-flex; margin-bottom: 14px; color: #fff; text-decoration: none; font-weight: 700; text-shadow: 0 1px 10px rgba(0,0,0,.2); }
.wide-card { padding: 36px; }
.section-title { margin: 0 0 8px; font-size: 28px; }
.section-subtitle { margin: 0 0 24px; color: var(--muted); }
.field { display: grid; gap: 7px; color: #374151; font-size: 14px; font-weight: 700; }
.field input, .field textarea { width: 100%; border: 1px solid #d8d5ea; border-radius: 10px; padding: 11px 12px; outline: 0; color: #25213f; background: rgba(255,255,255,.9); font-weight: 400; }
.field input:focus, .field textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(139,92,246,.12); }
.field textarea { min-height: 230px; resize: vertical; line-height: 1.6; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.full { grid-column: 1 / -1; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hidden { display: none !important; }

@media (max-width: 620px) {
  .page-shell { padding: 18px 12px; }
  .main-card, .wide-card { padding: 30px 20px 24px; border-radius: 24px; }
  .brand { gap: 12px; }
  .logo { width: 58px; height: 58px; border-radius: 16px; }
  .logo svg { width: 32px; height: 32px; }
  .title { font-size: 27px; }
  .subtitle { margin-top: 22px; }
  .input-group { min-height: 55px; }
  .primary-button { padding: 0 22px; }
  .stats-grid { gap: 3px; }
  .stat-value { font-size: 12px; }
  .stat-label { font-size: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
}