/* ===== Element Plus + LOGO配色 ===== */
:root {
  --el-color-primary: #c6100f;
  --el-color-primary-light-3: #e06060;
  --el-color-primary-light-5: #f0a0a0;
  --el-color-primary-light-7: #f5c8c8;
  --el-color-primary-light-8: #f8dcdc;
  --el-color-primary-light-9: #fdf0f0;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
  --el-text-primary: #1a1a1a;
  --el-text-regular: #555;
  --el-text-secondary: #909399;
  --el-text-placeholder: #c0c4cc;
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e8e8e8;
  --el-border-color-lighter: #f0f0f0;
  --el-bg-color: #f5f5f5;
  --el-bg-color-overlay: #ffffff;
  --el-border-radius-base: 4px;
  --el-border-radius-round: 20px;
  --el-font-size-base: 14px;
  --el-font-size-small: 13px;
  --el-font-size-large: 16px;
  --el-font-weight-primary: 500;
  --el-header-height: 48px;
  --el-tab-height: 54px;
  --el-safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif; background: var(--el-bg-color); color: var(--el-text-primary); font-size: var(--el-font-size-base); line-height: 1.5; }

.app-wrapper { max-width: 100%; min-height: 100vh; display: flex; flex-direction: column; background: var(--el-bg-color); }
.app-header { background: #fff; display: flex; align-items: center; padding: 0 16px; height: var(--el-header-height); border-bottom: 1px solid var(--el-border-color-lighter); position: sticky; top: 0; z-index: 100; flex-shrink: 0; }
.header-title { font-size: 17px; font-weight: 600; color: var(--el-color-primary); flex: 1; text-align: center; letter-spacing: .5px; }
.app-content { flex: 1; padding-bottom: calc(var(--el-tab-height) + var(--el-safe-bottom)); }
.app-content.auth-content { padding-bottom: 0; }

.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: #fff; border-top: 1px solid var(--el-border-color-lighter); z-index: 1000; padding-bottom: var(--el-safe-bottom); height: calc(var(--el-tab-height) + var(--el-safe-bottom)); }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--el-text-placeholder); padding: 4px 0; transition: color .15s; }
.nav-item.active { color: var(--el-color-primary); }
.nav-icon { font-size: 22px; line-height: 1.3; }
.nav-label { font-size: 10px; line-height: 1; margin-top: 2px; }

.el-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--el-border-color); border-radius: var(--el-border-radius-base); font-size: var(--el-font-size-base); cursor: pointer; padding: 10px 20px; height: 36px; min-width: 80px; text-decoration: none; background: #fff; color: var(--el-text-primary); transition: all .15s; }
.el-button:active { opacity: .75; }
.el-button--primary { background: var(--el-color-primary); border-color: var(--el-color-primary); color: #fff; }
.el-button--primary:active { background: #a00e0d; }
.el-button--success { background: var(--el-color-success); border-color: var(--el-color-success); color: #fff; }
.el-button--danger { background: var(--el-color-danger); border-color: var(--el-color-danger); color: #fff; }
.el-button--small { padding: 6px 14px; height: 30px; font-size: var(--el-font-size-small); }
.el-button--large { padding: 14px 24px; height: 44px; font-size: var(--el-font-size-large); }
.el-button.is-block { width: 100%; display: flex; }

.el-input { width: 100%; padding: 10px 14px; border: 1px solid var(--el-border-color); border-radius: var(--el-border-radius-base); font-size: var(--el-font-size-base); color: var(--el-text-primary); background: #fff; box-sizing: border-box; outline: none; transition: border-color .2s; height: 40px; }
.el-input:focus { border-color: var(--el-color-primary); }
.el-input-group { display: flex; gap: 8px; }
.el-input-group .el-input { flex: 1; }
.el-form-item { margin-bottom: 16px; }
.el-form-item__label { display: block; font-size: var(--el-font-size-base); color: var(--el-text-primary); margin-bottom: 6px; }

.auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; background: linear-gradient(180deg, #fdf0f0 0%, var(--el-bg-color) 100%); }
.auth-container { width: 100%; max-width: 380px; }
.auth-header { text-align: center; margin-bottom: 36px; }
.auth-logo { font-size: 56px; margin-bottom: 12px; }
.auth-title { font-size: 26px; font-weight: 600; color: var(--el-color-primary); margin: 0; }
.auth-subtitle { font-size: 14px; color: var(--el-text-secondary); margin-top: 4px; }
.auth-tabs { display: flex; background: var(--el-color-primary-light-9); border-radius: var(--el-border-radius-base); padding: 3px; margin-bottom: 28px; }
.auth-tab { flex: 1; padding: 10px; border: none; background: none; color: var(--el-text-secondary); font-size: var(--el-font-size-base); cursor: pointer; border-radius: 3px; transition: all .2s; }
.auth-tab.active { background: #fff; color: var(--el-color-primary); font-weight: 500; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.auth-link { color: var(--el-color-primary); text-decoration: none; }
.auth-links { text-align: center; margin-top: 20px; }
.auth-links span { color: var(--el-text-secondary); }

.home-banner { padding: 36px 20px; background: linear-gradient(135deg, #c6100f, #e06060); margin-bottom: 0; }
.home-banner h2 { font-size: 24px; color: #fff; font-weight: 600; margin-bottom: 4px; }
.home-banner p { font-size: 14px; color: rgba(255,255,255,.85); }
.el-row { display: flex; padding: 14px 16px; gap: 10px; }
.el-col { flex: 1; }
.el-card.entry { text-align: center; padding: 16px 6px; background: #fff; border-radius: var(--el-border-radius-base); cursor: pointer; text-decoration: none; color: var(--el-text-primary); display: block; }
.el-card.entry:active { background: var(--el-color-primary-light-9); }
.entry-icon { font-size: 28px; margin-bottom: 4px; }
.entry-label { font-size: var(--el-font-size-small); color: var(--el-text-regular); }
.el-section { padding: 0 16px 10px; }
.el-section__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 16px; }
.el-section__header h3 { font-size: 15px; font-weight: 600; color: var(--el-text-primary); }
.el-section__header a { font-size: var(--el-font-size-small); color: var(--el-color-primary); text-decoration: none; }

.activity-card { display: flex; background: #fff; border-radius: var(--el-border-radius-base); overflow: hidden; text-decoration: none; color: var(--el-text-primary); margin-bottom: 8px; }
.activity-card:active { background: var(--el-color-primary-light-9); }
.act-cover { width: 100px; min-height: 100px; display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; }
.act-info { flex: 1; padding: 12px 14px; min-width: 0; }
.act-info h4 { font-size: 15px; font-weight: 500; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.act-meta { font-size: var(--el-font-size-small); color: var(--el-text-secondary); line-height: 1.6; }
.act-meta span { margin-right: 10px; }
.el-tag { display: inline-block; background: var(--el-color-primary-light-9); color: var(--el-color-primary); font-size: 12px; padding: 2px 8px; border-radius: 3px; margin-top: 4px; }

.act-detail-cover { height: 200px; display: flex; align-items: center; justify-content: center; font-size: 64px; }
.act-detail-body { padding: 16px; }
.act-detail-title { font-size: 20px; font-weight: 600; color: var(--el-color-primary); margin-bottom: 12px; }
.el-descriptions { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.el-descriptions__item { display: flex; align-items: center; gap: 6px; font-size: var(--el-font-size-base); color: var(--el-text-regular); }
.signup-section { padding: 16px; background: var(--el-color-primary-light-9); margin: 0 16px 16px; border-radius: var(--el-border-radius-base); }

.el-tabs { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; }
.el-tab { padding: 6px 18px; border: 1px solid var(--el-border-color); border-radius: var(--el-border-radius-round); background: #fff; font-size: var(--el-font-size-small); color: var(--el-text-secondary); cursor: pointer; white-space: nowrap; text-decoration: none; }
.el-tab.active { background: var(--el-color-primary); color: #fff; border-color: var(--el-color-primary); }

.el-statistic-group { display: flex; margin: 12px 16px; gap: 8px; }
.el-statistic { flex: 1; background: #fff; border-radius: var(--el-border-radius-base); padding: 16px 8px; text-align: center; }
.el-statistic__value { display: block; font-size: 26px; font-weight: 600; color: var(--el-color-primary); }
.el-statistic__label { font-size: var(--el-font-size-small); color: var(--el-text-secondary); margin-top: 2px; }

.profile-header { display: flex; align-items: center; padding: 20px 16px; gap: 14px; background: #fff; }
.profile-avatar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.profile-name { font-size: 18px; font-weight: 600; color: var(--el-text-primary); }
.profile-phone { font-size: var(--el-font-size-small); color: var(--el-text-secondary); margin-top: 2px; }

.el-menu { background: #fff; }
.el-menu-item { display: flex; align-items: center; padding: 14px 20px; height: 48px; cursor: pointer; text-decoration: none; color: var(--el-text-primary); border-bottom: 1px solid var(--el-border-color-lighter); transition: background .15s; }
.el-menu-item:active { background: var(--el-color-primary-light-9); }
.el-menu-item:last-child { border-bottom: none; }
.el-menu-item .icon { width: 20px; text-align: center; margin-right: 12px; font-size: 16px; }
.el-menu-item .label { flex: 1; font-size: var(--el-font-size-base); }
.el-menu-item .value { color: var(--el-color-primary); font-size: 12px; }
.el-menu-item .arrow { color: var(--el-text-placeholder); font-size: 14px; margin-left: 8px; }

.el-preview { background: #fff; margin: 8px 16px; border-radius: var(--el-border-radius-base); overflow: hidden; }
.el-preview__header { padding: 14px 16px; border-bottom: 1px solid var(--el-border-color-lighter); }
.el-preview__header h4 { font-size: 15px; font-weight: 500; }
.el-preview__body { padding: 12px 16px; }
.el-preview__body .item { font-size: var(--el-font-size-small); color: var(--el-text-regular); padding: 3px 0; }
.el-preview__footer { padding: 10px 16px; border-top: 1px solid var(--el-border-color-lighter); display: flex; gap: 8px; }
.el-status { display: inline-block; padding: 2px 10px; border-radius: var(--el-border-radius-round); font-size: 12px; }
.el-status--pending { background: #fdf6ec; color: var(--el-color-warning); }
.el-status--checked_in { background: #f0f9eb; color: var(--el-color-success); }
.el-status--cancelled { background: #fef0f0; color: var(--el-color-danger); }

.el-empty { text-align: center; padding: 80px 20px; }
.el-empty__icon { font-size: 56px; margin-bottom: 12px; }
.el-empty__text { font-size: var(--el-font-size-base); color: var(--el-text-secondary); }

.el-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 16px; }
.el-pagination button { padding: 6px 14px; border: 1px solid var(--el-border-color); border-radius: var(--el-border-radius-base); background: #fff; color: var(--el-text-primary); cursor: pointer; font-size: var(--el-font-size-small); }

.el-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.4); z-index: 2000; }
.el-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: var(--el-border-radius-base); width: 85%; max-width: 360px; z-index: 2001; padding: 24px 20px 20px; text-align: center; }
.el-dialog__title { font-size: 17px; font-weight: 500; margin-bottom: 4px; }
.el-dialog__body { font-size: var(--el-font-size-base); color: var(--el-text-regular); margin-bottom: 16px; }
.el-dialog__footer { display: flex; gap: 8px; }
.el-message { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.7); color: #fff; border-radius: var(--el-border-radius-base); padding: 12px 24px; z-index: 3000; font-size: var(--el-font-size-base); }

.hidden { display: none !important; }

.msg { padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; text-align: center; }
.msg-error { background: #fef0f0; color: #f56c6c; }
.el-form-item { display: block; margin-bottom: 16px; }
.btn-code { flex-shrink: 0; width: 110px; font-size: 13px; }


/* ===== Admin Layout ===== */
.admin-container{display:flex;min-height:calc(100vh - 48px);background:#f1f5f9}
.admin-sidebar{width:200px;background:#1e293b;color:#fff;display:flex;flex-direction:column;flex-shrink:0;position:relative}
.sidebar-header{padding:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar-header h2{font-size:14px;font-weight:600;color:#e2e8f0;margin:0}
.sidebar-nav{flex:1;padding:6px 0;overflow-y:auto}
.sidebar-nav a{display:block;padding:10px 14px;color:#94a3b8;text-decoration:none;font-size:13px;border-left:3px solid transparent}
.sidebar-nav a:hover{background:rgba(255,255,255,.05);color:#e2e8f0}
.sidebar-nav a.active{background:rgba(255,255,255,.1);color:#fff;border-left-color:#409eff;font-weight:500}
.sidebar-nav a.logout-link{margin-top:12px;color:#f87171}
.sidebar-footer{padding:10px 14px;border-top:1px solid rgba(255,255,255,.1);text-align:center}
.sidebar-footer small{color:#64748b;font-size:11px}
.admin-main{flex:1;padding:20px 24px;overflow-y:auto}
.admin-main .page-title{font-size:20px;font-weight:600;color:#1e293b;margin-bottom:20px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:24px}
.stat-card{background:#fff;border-radius:8px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:6px}
.stat-blue{background:#eff6ff}.stat-green{background:#f0fdf4}.stat-orange{background:#fff7ed}.stat-purple{background:#faf5ff}
.stat-number{font-size:24px;font-weight:700;color:#1e293b}.stat-label{font-size:12px;color:#64748b}
.section{background:#fff;border-radius:8px;padding:16px 20px;box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:16px}
.section h3{font-size:15px;font-weight:600;color:#1e293b;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #f1f5f9}
.table-responsive{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{text-align:left;padding:8px 10px;background:#f8fafc;color:#64748b;font-weight:500;border-bottom:2px solid #e2e8f0;white-space:nowrap}
.data-table td{padding:8px 10px;border-bottom:1px solid #f1f5f9;color:#334155}
.data-table tr:hover td{background:#f8fafc}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
.badge-pending,.badge-signed_up{background:#fef3c7;color:#d97706}
.badge-checked_in,.badge-yes,.badge-active{background:#d1fae5;color:#059669}
.badge-cancelled,.badge-no,.badge-draft{background:#f1f5f9;color:#64748b}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.toolbar .search-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.toolbar .search-form input,.toolbar .search-form select{padding:6px 10px;border:1px solid #d1d5db;border-radius:4px;font-size:13px}
.btn{padding:6px 14px;border-radius:4px;font-size:13px;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:4px;text-decoration:none;min-height:32px}
.btn-primary{background:#409eff;color:#fff}
.btn-secondary{background:#e2e8f0;color:#475569;border:1px solid #d1d5db}
.btn-success{background:#10b981;color:#fff}.btn-danger{background:#ef4444;color:#fff}
.btn-sm{padding:5px 10px;font-size:11px;min-height:26px}
.pagination{display:flex;justify-content:center;gap:4px;margin-top:16px}
.pagination a,.pagination span{padding:5px 10px;border:1px solid #d1d5db;border-radius:4px;font-size:12px;text-decoration:none;color:#475569}
.pagination .active{background:#409eff;color:#fff;border-color:#409eff}
.empty-msg{text-align:center;padding:30px 20px;color:#94a3b8;font-size:13px}
.form-card{background:#fff;border-radius:8px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.06);max-width:700px}
.form-card .form-group{margin-bottom:14px}
.form-card label{display:block;font-size:13px;font-weight:500;color:#374151;margin-bottom:4px}
.form-card .form-control{width:100%;padding:7px 10px;border:1px solid #d1d5db;border-radius:4px;font-size:13px;box-sizing:border-box;outline:none}
.form-card .form-control:focus{border-color:#409eff}
.form-card textarea.form-control{min-height:80px;resize:vertical}
.form-card .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-card .btn-group{display:flex;gap:8px;margin-top:16px}
.alert{padding:10px 14px;border-radius:6px;font-size:13px;margin-bottom:14px}
.alert-success{background:#f0fdf4;color:#059669;border:1px solid #bbf7d0}
.alert-danger{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.form-inline{display:flex;gap:6px;align-items:center}