body {
    background-color: #FCFBF9;
    font-family: 'Noto Serif TC', serif;
    color: #2C2420;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

.paper-texture {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.glow-bg {
    position: absolute;
    width: 60vh;
    height: 60vh;
    background: radial-gradient(circle, rgba(167, 28, 28, 0.03) 0%, rgba(252, 251, 249, 0) 70%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

.container {
    z-index: 2;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(44, 36, 32, 0.05);
    text-align: center;
    width: 100%;
    max-width: 400px;
    border: 1px solid rgba(44, 36, 32, 0.05);
    position: relative;
}

.container::before {
    content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;
    border: 1px solid rgba(44, 36, 32, 0.1); pointer-events: none;
}

h1 { margin-top: 0; font-size: 1.8em; letter-spacing: 0.1em; color: #8B1E1E; }
.welcome-text { margin-bottom: 30px; font-size: 0.9em; color: #666; letter-spacing: 0.05em; }

.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 5px; font-size: 0.9em; letter-spacing: 0.05em; }
.form-group input {
    width: 100%; padding: 10px; box-sizing: border-box;
    border: 1px solid #ddd; border-radius: 4px; font-family: sans-serif;
    background: rgba(255, 255, 255, 0.5); outline: none; transition: border-color 0.3s;
}
.form-group input:focus { border-color: #8B1E1E; }
.form-group input:disabled { background: #f5f5f5; cursor: not-allowed; opacity: 0.7; }

/* register.php specific */
.input-group { display: flex; gap: 10px; }
.input-group input { flex: 1; }
.btn-code {
    padding: 10px 15px; background: #fff; color: #8B1E1E; border: 1px solid #8B1E1E; border-radius: 4px;
    cursor: pointer; font-size: 0.8em; white-space: nowrap; transition: all 0.3s;
}
.btn-code:hover:not(:disabled) { background: #fdf5f5; }
.btn-code:disabled { border-color: #ccc; color: #999; cursor: not-allowed; }

.btn {
    width: 100%; padding: 12px; background: #8B1E1E; color: white; border: none; border-radius: 4px;
    cursor: pointer; font-size: 1em; letter-spacing: 0.1em; transition: all 0.3s;
}
.btn:hover:not(:disabled) { background: #6b1717; }
.btn:disabled { background: #ccc; cursor: not-allowed; }

.divider {
    display: flex; align-items: center; text-align: center; margin: 25px 0;
    color: #aaa; font-size: 0.8em; letter-spacing: 0.05em;
}
.divider::before, .divider::after {
    content: ''; flex: 1; border-bottom: 1px solid #ddd;
}
.divider:not(:empty)::before { margin-right: .25em; }
.divider:not(:empty)::after { margin-left: .25em; }

.g_id_signin { display: flex; justify-content: center; }

.link-text { margin-top: 20px; font-size: 0.9em; color: #666; }
.link-text a { color: #8B1E1E; text-decoration: none; }
.link-text a:hover { text-decoration: underline; }

#error-msg, #alert-msg { font-size: 0.85em; margin-bottom: 15px; display: none; padding: 10px; border-radius: 4px; text-align: left; }
#error-msg { color: #8B1E1E; background: #fdf5f5; border: 1px solid #f9dcdc; }
.alert-error { color: #8B1E1E; background: #fdf5f5; border: 1px solid #f9dcdc; }
.alert-success { color: #155724; background: #d4edda; border: 1px solid #c3e6cb; }