:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --accent: var(--sl-color-primary-600);
  --drop-bg: #f8fafc;
  --drop-active: #eef2ff;
  --sl-font-sans: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;
}
.sl-theme-dark {
  --bg: #0b1020;
  --card: #121829;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: #1e293b;
  --drop-bg: #0f1526;
  --drop-active: #1a2040;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--sl-font-sans);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, .14), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(14, 165, 233, .12), transparent 60%),
    var(--bg);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  min-height: 100vh;
}
main { width: 100%; max-width: 560px; }
main.narrow { max-width: 440px; }
header { text-align: center; margin-bottom: 28px; }
header h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 12px 0 6px; }
header p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.logo {
  width: 48px; height: 48px; border-radius: 14px; margin: 0 auto;
  display: grid; place-items: center; color: #fff; font-size: 24px;
  background: linear-gradient(135deg, #6366f1, #0ea5e9);
  box-shadow: 0 10px 30px -10px rgba(99, 102, 241, .6);
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 20px 40px -24px rgba(15, 23, 42, .25);
}
.card sl-button.block { width: 100%; }
.card sl-alert { margin-top: 16px; }
.muted { color: var(--muted); font-size: 13px; line-height: 1.6; }
.top-right { position: fixed; top: 16px; right: 16px; display: flex; align-items: center; gap: 4px; }
.top-right .who { font-size: 13px; color: var(--muted); margin-right: 4px; }
.top-right form { margin: 0; }
footer { text-align: center; color: var(--muted); font-size: 12px; margin-top: 20px; }
@media (max-width: 480px) {
  .top-right .who { display: none; }
}