/* Member Portal specific styles */
.login-card, .locked-card { max-width: 460px; margin: 6vh auto 0; text-align: center; }
.login-card form { text-align: left; margin-top: 14px; }
.login-hero { font-size: 46px; line-height: 1.3; }
.key-input { text-transform: uppercase; letter-spacing: 0.04em; text-align: center; font-size: 1.05rem; }
.form-error { color: #ffb3b5; background: rgba(240, 84, 90, 0.12); border: 1px solid rgba(240, 84, 90, 0.4); border-radius: 10px; padding: 8px 12px; margin: 12px 0 0; font-size: 0.9rem; }
.login-card .btn.lg { margin-top: 14px; }
.small-note { font-size: 0.84rem; margin: 10px 0 0; }

.greet { margin: 4px 2px 12px; font-size: 1.05rem; }
.key-card .countdown {
  font-size: 1.32rem; font-weight: 800; line-height: 1.7; margin: 6px 0 2px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.key-card.warn .countdown { background: linear-gradient(180deg, #ffd591, var(--warn)); -webkit-background-clip: text; background-clip: text; }
.key-row { margin-top: 8px; }
.key-code { background: var(--bg); border: 1px dashed var(--line); padding: 4px 10px; border-radius: 8px; letter-spacing: 0.03em; word-break: break-all; }
.launch-row { margin-top: 10px; }

.status-line { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat-grid > div { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; line-height: 1.5; }
.stat-grid span { font-size: 1.1rem; }
.stat-grid b { font-size: 1.05rem; color: var(--gold-2); }
.stat-grid small { font-size: 0.72rem; }
@media (max-width: 400px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

.theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.theme-opt { position: relative; display: block; cursor: pointer; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg); margin: 0; color: var(--text); transition: border-color 0.15s, transform 0.1s; }
.theme-opt:active { transform: scale(0.98); }
.theme-opt input { position: absolute; opacity: 0; pointer-events: none; }
.theme-opt.selected { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(230, 180, 80, 0.2); }
.theme-swatch { aspect-ratio: 9 / 7; display: grid; place-items: center; font-size: 30px; background: linear-gradient(160deg, var(--accent, #e6b450), #1c1524 80%); }
.theme-swatch img { width: 100%; height: 100%; object-fit: cover; }
.theme-meta { padding: 8px 10px 10px; line-height: 1.55; }
.theme-meta strong { display: block; font-size: 0.95rem; }
.theme-meta small { display: block; font-size: 0.74rem; }
.theme-opt .check { position: absolute; top: 6px; right: 8px; background: var(--gold); color: var(--gold-ink); border-radius: 50%; width: 22px; height: 22px; display: none; place-items: center; font-size: 13px; font-weight: 800; }
.theme-opt.selected .check { display: grid; }
.theme-empty { padding: 12px; border: 1px dashed var(--line); border-radius: 12px; }

.toggles { border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; background: var(--bg); }
.toggles .switch + .switch { border-top: 1px solid var(--line); }
#settings-form .btn.primary { margin-top: 14px; }

.test-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
@media (max-width: 560px) { .test-grid { grid-template-columns: repeat(2, 1fr); } }
.preview-title { margin-top: 16px; }
.preview-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow: auto; }
.preview-list li { display: flex; gap: 10px; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 0.9rem; line-height: 1.6; animation: toast-in 0.25s ease both; }
.preview-list li .pv-icon { font-size: 1.2rem; }
.preview-list li .pv-body { min-width: 0; flex: 1; }
.preview-list li .pv-name { color: var(--gold-2); font-weight: 700; margin-right: 6px; }
.preview-list li time { color: var(--muted); font-size: 0.75rem; flex: 0 0 auto; }

.guide { margin-top: 14px; }
.guide-steps { margin: 0; padding-left: 22px; }
.guide-steps li { margin-bottom: 12px; }
.guide-steps li::marker { color: var(--gold); font-weight: 800; }
.guide-steps p { color: var(--muted); margin: 2px 0 0; font-size: 0.9rem; }