:root {
    --db-primary: #000;
    --db-gray: #f5f5f5;
    --db-text-gray: #86868b;
    --db-radius: 16px;
}
[v-cloak] { display: none !important; }
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    background: #fff;
    font-family: -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.login-container {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; padding: 20px; max-width: 480px; margin: 0 auto;
}

.avatar-wrapper {
    height: 120px;
    width: 120px;
    margin-bottom: 20px;
    overflow: visible;
}
.avatar-wrapper canvas {
    display: block;
    width: 120px;
    height: 120px;
    background: transparent;
    transform: scale(1.28);
    transform-origin: center center;
}
.title { font-size: 24px; margin-bottom: 32px; color: #1d1d1f; letter-spacing: -0.5px; }
.form-card { width: 100%; max-width: 360px; }

.db-input {
    width: 100%; padding: 16px; background: var(--db-gray); border: 2px solid transparent;
    border-radius: var(--db-radius); font-size: 16px; outline: none; margin-bottom: 12px;
}
.db-input:focus { border-color: #e5e5e5; background: #fff; }

.agreement-section { display: flex; gap: 8px; margin: 15px 0; font-size: 13px; color: var(--db-text-gray); }
.agreement-section input { width: 16px; height: 16px; accent-color: var(--db-primary); cursor: pointer; }
.agreement-section a { color: #007aff; text-decoration: none; }

.db-btn {
    width: 100%; padding: 16px; border-radius: var(--db-radius); border: none;
    font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity .2s;
}
.btn-primary { background: var(--db-primary); color: #fff; margin-top: 10px; }
.db-btn:disabled { opacity: .5; }
.captcha-btn {
    width: 124px;
    height: 48px;
    padding: 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.captcha-btn img { width: 122px; height: 44px; border-radius: 8px; object-fit: cover; }

.mode-switch { margin-top: 30px; display: flex; justify-content: center; gap: 24px; }
.switch-link { color: var(--db-text-gray); font-size: 14px; cursor: pointer; }
.switch-link.active { color: var(--db-primary); font-weight: 600; }