/**
 * 認証ページ共通スタイル
 * ボディ背景・acid-input フォーカス・divider のみ定義
 * その他のスタイルはTailwindユーティリティで直接記述
 */

body {
background-color: var(--bg-dark);
color: var(--text-muted);
font-family: 'JetBrains Mono', monospace;
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: 
radial-gradient(circle at 2px 2px, rgba(var(--accent-rgb), 0.05) 1px, transparent 0);
background-size: 32px 32px;
padding: 1rem;
}

/* Whiteテーマ用背景 */
[data-theme="white"] body {
background-image: none;
}

/* Tailwindで表現できないフォーカス・プレースホルダースタイル */
.acid-input:focus {
outline: none;
border-color: var(--accent-color);
background: rgba(var(--accent-rgb), 0.02);
box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.1);
}

.acid-input::placeholder {
color: var(--text-muted);
}

/* ::before/after 疑似要素が必要なため CSS で管理 */
.divider {
display: flex;
align-items: center;
text-align: center;
margin: 2rem 0;
color: var(--text-muted);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}

.divider.compact {
margin: 1.5rem 0;
}

.divider::before, .divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--border-color);
}

.divider:not(:empty)::before { margin-right: 1rem; }
.divider:not(:empty)::after { margin-left: 1rem; }