body {
    font-family: 'Noto Sans SC', 'PingFang SC', -apple-system, sans-serif;
    min-height: 100vh;
    background: linear-gradient(145deg, #6B73FF 0%, #7B6FD4 40%, #9B59B6 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 24px 20px;
}

.page { display: none; width: 100%; max-width: 400px; animation: fadeIn 0.3s ease; }
.page.active { display: block; }

.card {
    background: #fff; border-radius: 20px;
    padding: 36px 28px 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* Logo */
.logo-area { text-align: center; margin-bottom: 32px; }
.logo-icon  { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.logo-emoji { font-size: 34px; line-height: 1; }
.logo-title { font-size: 24px; font-weight: 900; color: #1A1A2E; }
.logo-subtitle { font-size: 13px; color: #9CA3AF; margin-top: 3px; }

/* Form */
.form-group  { margin-bottom: 15px; }
.form-label  { display: block; font-size: 13px; font-weight: 600; color: #6B7280; margin-bottom: 6px; }
.form-input  {
    width: 100%; padding: 13px 16px; border-radius: 10px;
    border: 1.5px solid #E5E7EB; background: #F9FAFB;
    font-size: 15px; font-family: inherit; color: #1A1A2E;
    outline: none; transition: border-color 0.2s, background 0.2s;
}
.form-input:focus { border-color: #3D7FFF; background: #fff; }
.form-input::placeholder { color: #B0B6C3; }
.form-select {
    width: 100%; padding: 13px 16px; border-radius: 10px;
    border: 1.5px solid #E5E7EB; background: #F9FAFB;
    font-size: 15px; font-family: inherit; color: #1A1A2E;
    outline: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%239CA3AF'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}
.form-select:focus { border-color: #3D7FFF; background-color: #fff; }
.form-hint { font-size: 11px; color: #B0B6C3; margin-top: 4px; }

.input-with-action { position: relative; }
.input-with-action .form-input { padding-right: 68px; }
.paste-btn {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    padding: 6px 14px; border-radius: 8px; background: #EEF4FF; border: none;
    color: #3D7FFF; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* Links */
.form-links { text-align: center; margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.form-links a { color: #3D7FFF; text-decoration: none; font-size: 14px; font-weight: 500; }
.form-links span { color: #9CA3AF; font-size: 14px; }

/* PIN input */
.pin-input { font-size: 28px; letter-spacing: 14px; text-align: center; font-weight: 700; }

/* Success page */
.success-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, #2EC4B6, #4DD4C8);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; font-size: 34px;
}
.success-title    { font-size: 22px; font-weight: 900; text-align: center; margin-bottom: 6px; color: #1A1A2E; }
.success-subtitle { font-size: 14px; color: #6B7280; text-align: center; line-height: 1.6; margin-bottom: 10px; }
.membership-badge { display: block; text-align: center; margin-bottom: 24px; }
.membership-badge span { display: inline-block; padding: 5px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.badge-trial     { background: #FFF0E5; color: #FF6B35; }
.badge-yearly    { background: #E8F8F7; color: #2EC4B6; }
.badge-permanent { background: #F0E8FF; color: #7C3AED; }

/* Members page */
.member-item { display:flex; align-items:center; gap:12px; background:#F9FAFB; border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.member-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; flex-shrink:0; overflow:hidden; }
.member-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.member-info   { flex:1; }
.member-name   { font-size:14px; font-weight:600; color:#1A1A2E; margin-bottom:2px; }
.member-role   { font-size:12px; color:#9CA3AF; }
.member-actions   { display:flex; gap:10px; }
.member-actions a { font-size:12px; text-decoration:none; cursor:pointer; }
.action-edit   { color:#3D7FFF; }
.action-delete { color:#E5E7EB; }

.add-member-btn { display:flex; align-items:center; gap:10px; border:1.5px dashed #3D7FFF; border-radius:12px; padding:12px 14px; margin-bottom:10px; cursor:pointer; background:none; width:100%; }
.add-member-btn .add-icon { width:44px; height:44px; border-radius:50%; background:#EEF4FF; display:flex; align-items:center; justify-content:center; font-size:22px; color:#3D7FFF; flex-shrink:0; }
.add-member-btn .add-text { font-size:14px; font-weight:500; color:#3D7FFF; }
.add-member-btn .add-sub  { font-size:12px; color:#9CA3AF; }

.role-switch { display:flex; background:#F3F4F6; border-radius:10px; padding:4px; margin-bottom:16px; }
.role-switch-btn { flex:1; padding:8px; text-align:center; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; border:none; background:none; font-family:inherit; color:#6B7280; transition:all 0.2s; }
.role-switch-btn.active { background:#fff; color:#3D7FFF; box-shadow:0 1px 4px rgba(0,0,0,0.1); }

.avatar-upload-area   { display:flex; flex-direction:column; align-items:center; margin-bottom:20px; }
.avatar-upload-circle { width:80px; height:80px; border-radius:50%; border:2px dashed #3D7FFF; background:#EEF4FF; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; margin-bottom:6px; }
.avatar-upload-circle img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar-upload-circle .upload-icon { font-size:24px; }
.avatar-upload-circle .upload-text { font-size:10px; color:#3D7FFF; margin-top:2px; }

.pin-boxes { display:flex; gap:10px; margin-bottom:6px; }
.pin-box { flex:1; height:48px; border-radius:10px; border:1.5px solid #E5E7EB; background:#F9FAFB; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; color:#1A1A2E; cursor:pointer; transition:border-color 0.2s; }
.pin-box.active { border-color:#3D7FFF; background:#fff; }
.pin-box.filled::after { content:'●'; font-size:14px; color:#1A1A2E; }

.avatar-color-0 { background:#EEF4FF; color:#3D7FFF; }
.avatar-color-1 { background:#FFF0E5; color:#FF6B35; }
.avatar-color-2 { background:#E8F8F7; color:#2EC4B6; }
.avatar-color-3 { background:#F0E8FF; color:#7C3AED; }
.avatar-color-4 { background:#FEF3C7; color:#D97706; }

/* Reset password steps */
.reset-step        { display: none; }
.reset-step.active { display: block; }

/* Info tip */
.info-tip { background:#FFF7ED; border-radius:10px; padding:12px 14px; margin-bottom:18px; display:flex; gap:8px; align-items:flex-start; }
.info-tip .tip-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.info-tip .tip-text { font-size:13px; color:#92400E; line-height:1.5; }