/* =============================================================
   报名平台 — 参与者端移动优先样式
   微信小程序风格: 卡片式、底部导航、触摸友好
   ============================================================= */

/* Layout: phone-like container */
.app-layout { max-width:480px; margin:0 auto; background:var(--color-bg); min-height:100vh; min-height:100dvh; box-shadow:0 0 60px rgba(0,0,0,0.08); }
.app-layout .navbar, .app-layout .footer { display:none; }

/* Header */
.app-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:0.5px solid var(--color-border); height:48px; display:flex; align-items:center; padding:0 16px; }
.app-header-inner { display:flex; align-items:center; justify-content:space-between; width:100%; }
.app-title { font-family:var(--font-display); font-size:1.0625rem; font-weight:700; color:var(--color-text); letter-spacing:-0.02em; }
.app-header-action { font-family:var(--font-body); font-size:0.8125rem; font-weight:500; color:var(--color-text-secondary); text-decoration:none; padding:6px 4px; }
.app-header-action:hover,.app-header-action:visited { color:var(--color-text-secondary); }

/* Main scroll area */
.app-main { padding:20px 16px 80px; flex:1; }
.app-main h1 { display:none; }

/* Bottom Tab Bar */
.app-tabbar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; height:56px; padding-bottom:env(safe-area-inset-bottom); background:rgba(255,255,255,0.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:0.5px solid var(--color-border); display:flex; align-items:center; justify-content:space-around; z-index:100; }
.tab-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; flex:1; height:100%; text-decoration:none; color:var(--color-text-muted); font-family:var(--font-body); font-size:0.625rem; font-weight:500; transition:color 0.15s; }
.tab-item.active,.tab-item:visited { color:var(--color-primary); }
.tab-icon { font-size:1.25rem; line-height:1; }
.tab-label { line-height:1; }

/* Activity Accordion Cards */
.activity-accordion { background:var(--color-surface); border-radius:12px; overflow:hidden; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,0.04); transition:box-shadow 0.2s; }
.activity-accordion.expanded { box-shadow:0 4px 16px rgba(0,0,0,0.08); }

/* Card header — always visible, clickable */
.activity-accordion-header { display:flex; gap:14px; padding:14px 16px; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.activity-accordion-header:active { background:var(--color-bg); }
.activity-accordion-thumb { flex-shrink:0; width:72px; height:72px; border-radius:8px; overflow:hidden; background:var(--color-bg); display:flex; align-items:center; justify-content:center; }
.activity-accordion-thumb img { width:100%; height:100%; object-fit:cover; }
.activity-accordion-thumb-placeholder { color:var(--color-text-muted); font-size:2rem; opacity:0.25; }
.activity-accordion-summary { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.activity-accordion-name { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--color-text); letter-spacing:-0.02em; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.activity-accordion-meta { font-size:0.75rem; color:var(--color-text-secondary); margin-top:4px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.activity-accordion-meta span { display:inline-flex; align-items:center; gap:3px; }
.activity-accordion-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px; font-size:0.6875rem; font-weight:600; background:var(--color-primary-light); color:var(--color-primary); }
.activity-accordion-chevron { flex-shrink:0; width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--color-text-muted); font-size:1rem; transition:transform 0.25s ease; margin-top:4px; }
.activity-accordion.expanded .activity-accordion-chevron { transform:rotate(180deg); color:var(--color-primary); }

/* Card body — collapsible sessions + form */
.activity-accordion-body { max-height:0; overflow:hidden; transition:max-height 0.35s ease; }
.activity-accordion.expanded .activity-accordion-body { max-height:2000px; }
.activity-accordion-inner { padding:0 16px 16px; border-top:0.5px solid var(--color-border-light); }

/* Session List */
.session-mobile-list { display:flex; flex-direction:column; gap:8px; }
.session-mobile-item { display:flex; align-items:center; gap:12px; padding:12px; border-radius:8px; background:var(--color-bg); border:1px solid var(--color-border-light); cursor:pointer; transition:all 0.12s; }
.session-mobile-item:active { background:var(--color-primary-light); border-color:var(--color-primary-border); }
.session-mobile-item.selected { background:var(--color-primary-light); border-color:var(--color-primary); }
.session-mobile-item.disabled { opacity:0.4; pointer-events:none; }
.session-mobile-radio { width:22px; height:22px; border-radius:50%; border:2px solid var(--color-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.12s; }
.session-mobile-item.selected .session-mobile-radio { border-color:var(--color-primary); background:var(--color-primary); }
.session-mobile-item.selected .session-mobile-radio::after { content:\"\"; width:8px; height:8px; border-radius:50%; background:#FFF; }
.session-mobile-info { flex:1; min-width:0; }
.session-mobile-info .name { font-size:0.9375rem; font-weight:600; color:var(--color-text); }
.session-mobile-info .time { font-size:0.75rem; color:var(--color-text-secondary); margin-top:2px; }
.session-mobile-info .slots { font-size:0.6875rem; color:var(--color-text-muted); margin-top:2px; }
.session-mobile-badge { flex-shrink:0; padding:2px 10px; border-radius:999px; font-size:0.6875rem; font-weight:600; }
.session-mobile-badge.open { background:var(--color-success-bg); color:var(--color-success); }
.session-mobile-badge.full { background:var(--color-error-bg); color:var(--color-error); }
.session-mobile-badge.ended { background:var(--color-neutral-bg); color:var(--color-text-muted); }
.session-mobile-exclusion { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.session-mobile-exclusion span { padding:1px 6px; border-radius:999px; font-size:0.625rem; font-weight:500; background:var(--color-warning-bg); color:var(--color-warning-dark); border:1px solid var(--color-warning-border); }

/* Form */
.app-form-section { background:var(--color-surface); border-radius:12px; padding:16px; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.app-form-section h3 { font-family:var(--font-display); font-size:0.9375rem; font-weight:700; margin-bottom:12px; color:var(--color-text); letter-spacing:-0.02em; }
.app-input { width:100%; height:44px; padding:0 14px; border:1px solid var(--color-border); border-radius:8px; font-family:var(--font-body); font-size:0.9375rem; background:var(--color-bg); color:var(--color-text); transition:border-color 0.12s,box-shadow 0.12s; margin-bottom:12px; }
.app-input:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-ring); }
.app-input::placeholder { color:var(--color-text-muted); }
.app-input-label { display:block; font-size:0.8125rem; font-weight:500; color:var(--color-text-secondary); margin-bottom:4px; }
.app-input-label .required { color:var(--color-error); }

/* Buttons */
.app-btn { display:flex; align-items:center; justify-content:center; width:100%; height:48px; border-radius:8px; font-family:var(--font-body); font-size:0.9375rem; font-weight:600; border:none; cursor:pointer; transition:all 0.12s; gap:8px; text-decoration:none; }
.app-btn-primary { background:var(--color-primary); color:#FFF; }
.app-btn-primary:active { background:var(--color-primary-dark); transform:scale(0.98); }
.app-btn-primary:visited,.app-btn-primary:hover { color:#FFF; }
.app-btn-outline { background:transparent; color:var(--color-primary); border:1px solid var(--color-primary); }
.app-btn-outline:active { background:var(--color-primary-light); }
.app-btn-outline:visited { color:var(--color-primary); }
.app-btn-danger { background:var(--color-error); color:#FFF; }
.app-btn-danger:active { background:var(--color-error-dark); }
.app-btn-danger:visited,.app-btn-danger:hover { color:#FFF; }
.app-btn-sm { height:36px; font-size:0.8125rem; }
.app-btn:disabled { opacity:0.4; pointer-events:none; }
.app-btn-row { display:flex; gap:10px; margin-top:16px; }
.app-btn-row .app-btn { flex:1; }

/* Login hint */
.app-login-hint { background:linear-gradient(135deg,var(--color-primary-light),rgba(99,102,241,0.03)); border:1px solid var(--color-primary-border); border-radius:10px; padding:14px 16px; text-align:center; font-size:0.8125rem; color:var(--color-primary-dark); margin-bottom:16px; }
.app-login-hint a { font-weight:700; color:var(--color-primary); }

/* Registration cards */
.reg-mobile-card { background:var(--color-surface); border-radius:12px; padding:16px; margin-bottom:12px; box-shadow:0 1px 3px rgba(0,0,0,0.04); display:flex; gap:12px; align-items:flex-start; }
.reg-mobile-status { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.125rem; }
.reg-mobile-status.registered { background:var(--color-success-bg); }
.reg-mobile-status.cancelled { background:var(--color-error-bg); }
.reg-mobile-body { flex:1; min-width:0; }
.reg-mobile-body .session { font-size:0.9375rem; font-weight:600; color:var(--color-text); }
.reg-mobile-body .activity { font-size:0.8125rem; color:var(--color-text-secondary); margin-top:2px; }
.reg-mobile-body .time { font-size:0.75rem; color:var(--color-text-muted); margin-top:2px; }
.reg-mobile-body .meta { display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; align-items:center; }
.reg-mobile-actions { flex-shrink:0; display:flex; flex-direction:column; gap:6px; }

/* Profile */
.app-profile-card { background:var(--color-surface); border-radius:12px; overflow:hidden; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.app-profile-header { background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark)); padding:28px 20px; color:#FFF; text-align:center; }
.app-profile-avatar { width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-size:1.5rem; }
.app-profile-name { font-family:var(--font-display); font-size:1.125rem; font-weight:700; }
.app-profile-points { font-size:0.8125rem; margin-top:4px; opacity:0.85; }
.app-profile-body { padding:16px; }
.app-profile-row { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:0.5px solid var(--color-border-light); font-size:0.9375rem; }
.app-profile-row:last-child { border-bottom:none; }
.app-profile-row .label { color:var(--color-text-secondary); }
.app-profile-row .value { color:var(--color-text); font-weight:500; }

/* Empty */
.app-empty { text-align:center; padding:60px 24px; color:var(--color-text-muted); }
.app-empty-icon { font-size:3.5rem; margin-bottom:12px; opacity:0.25; }
.app-empty-text { font-size:0.9375rem; margin-bottom:16px; }

/* Pagination */
.app-pagination { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:20px; padding:8px 0; flex-wrap:wrap; }
.app-pagination a,.app-pagination span { min-width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; font-size:0.875rem; font-weight:500; text-decoration:none; }
.app-pagination a { background:var(--color-surface); color:var(--color-text-secondary); }
.app-pagination a:active { background:var(--color-primary-light); color:var(--color-primary); }
.app-pagination span.current { background:var(--color-primary); color:#FFF; font-weight:700; }
.app-pagination .info { font-size:0.75rem; color:var(--color-text-muted); margin-left:8px; }

/* Section title */
.app-section-title { font-family:var(--font-display); font-size:1.125rem; font-weight:700; color:var(--color-text); margin-bottom:14px; letter-spacing:-0.02em; }

/* Desktop: phone frame */
@media (min-width:769px) { .app-layout { border-left:1px solid var(--color-border); border-right:1px solid var(--color-border); } }