:root {
--color-bg-1: #e2e4e6;
--color-bg-2: #d5d0ce;
--color-primary: #8fa693;
--color-primary-dark: #738a77;
--color-secondary: #7a8b99;
--color-accent: #b89b9a;
--color-text-main: #2c3e50;
--color-text-muted: #7f8c8d;
--glass-bg: rgba(255, 255, 255, 0.45);
--glass-bg-hover: rgba(255, 255, 255, 0.6);
--glass-border: 1px solid rgba(255, 255, 255, 0.6);
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
--glass-blur: blur(12px);
--border-radius-lg: 24px;
--border-radius-md: 16px;
--border-radius-sm: 8px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
}

{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans TC', sans-serif;
}

body {
color: var(--color-text-main);
background: linear-gradient(135deg, var(--color-bg-1) 0%, var(--color-bg-2) 100%);
background-attachment: fixed;
min-height: 100vh;
line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
font-weight: 600;
margin-bottom: var(--spacing-sm);
}

a {
color: var(--color-primary-dark);
text-decoration: none;
transition: color 0.3s ease;
}

a:hover {
color: var(--color-secondary);
}

img {
max-width: 100%;
height: auto;
display: block;
}

.container {
width: 100%;
max-width: 480px;
margin: 0 auto;
padding: var(--spacing-lg);
min-height: 100vh;
display: flex;
flex-direction: column;
}

.text-center { text-align: center; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }

.glass-panel {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
overflow: hidden;
position: relative;
}

.glass-card {
background: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: var(--border-radius-md);
padding: var(--spacing-md);
transition: transform 0.3s ease, background 0.3s ease;
}

.glass-card:hover {
transform: translateY(-2px);
background: var(--glass-bg-hover);
}

.form-group {
margin-bottom: var(--spacing-md);
text-align: left;
}

.form-label {
display: block;
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 6px;
color: var(--color-text-muted);
}

.form-control {
width: 100%;
padding: 12px 16px;
font-size: 1rem;
color: var(--color-text-main);
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: var(--border-radius-sm);
outline: none;
transition: all 0.3s ease;
}

.form-control:focus {
background: rgba(255, 255, 255, 0.8);
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(143, 166, 147, 0.2);
}

.btn {
display: inline-block;
width: 100%;
padding: 14px 24px;
font-size: 1rem;
font-weight: 600;
text-align: center;
border: none;
border-radius: var(--border-radius-md);
cursor: pointer;
transition: all 0.3s ease;
}

.btn-primary {
background: rgba(143, 166, 147, 0.85);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 15px rgba(143, 166, 147, 0.3);
}

.btn-primary:hover {
background: rgba(115, 138, 119, 0.95);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(143, 166, 147, 0.4);
}

.btn-secondary {
background: rgba(255, 255, 255, 0.5);
color: var(--color-text-main);
border: 1px solid rgba(255, 255, 255, 0.8);
}

.btn-secondary:hover {
background: rgba(255, 255, 255, 0.8);
transform: translateY(-2px);
}

.avatar-wrapper {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto var(--spacing-md);
}

.avatar {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 4px solid rgba(255, 255, 255, 0.6);
}

.points-display {
font-size: 3rem;
font-weight: 700;
color: var(--color-primary-dark);
line-height: 1;
}

.badge {
display: inline-block;
padding: 4px 12px;
font-size: 0.8rem;
font-weight: 600;
border-radius: 20px;
background: rgba(255, 255, 255, 0.6);
color: var(--color-secondary);
border: 1px solid rgba(255, 255, 255, 0.4);
}

.badge-vip {
background: rgba(184, 155, 154, 0.2);
color: var(--color-accent);
border-color: rgba(184, 155, 154, 0.3);
}