:root {--bg: #080f09;--bg2: #0c1a0f;--card: #132218;--card-light: #1b3023;--accent: #2d8a4e;--accent-light: #3da862;--accent-glow: rgba(45,138,78,0.25);--gold: #c9a96e;--gold-light: #dbbf8a;--gold-dim: rgba(201,169,110,0.15);--text: #e4ede6;--text-muted: #6d9474;--danger: #d94040;--danger-light: #ff6b6b;--border: #1e3527;--blue: #5b8fd9;--blue-dim: rgba(91,143,217,0.15);--orange: #e07c4f;/* 4个Tab专属色 */--tab-green: #3da862;--tab-green-dim: rgba(61,168,98,0.35);--tab-gold: #dbbf8a;--tab-gold-dim: rgba(219,191,138,0.35);--tab-blue: #7db0ec;--tab-blue-dim: rgba(125,176,236,0.35);--tab-orange: #eda06a;--tab-orange-dim: rgba(237,160,106,0.35);}*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'Noto Sans SC',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent;}::-webkit-scrollbar{width:0;height:0;}.app{max-width:430px;margin:0 auto;min-height:100vh;position:relative;background:var(--bg2);}.glow{position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0;}.glow-1{width:350px;height:350px;background:var(--accent);opacity:0.06;top:-120px;left:-80px;animation:gPulse 5s ease-in-out infinite;}.glow-2{width:280px;height:280px;background:var(--gold);opacity:0.04;bottom:-80px;right:-60px;animation:gPulse 6s ease-in-out infinite 2s;}@keyframes gPulse{0%,100%{opacity:0.04;transform:scale(1);}50%{opacity:0.09;transform:scale(1.1);}}
.status-bar{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:12px;font-weight:500;position:relative;z-index:1;}.nav-bar{height:50px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;position:relative;border-bottom:1px solid var(--border);z-index:1;}
/* ====== 底部Tabæ  ====== */.tab-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:68px;background:rgba(10,18,12,0.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid var(--border);display:flex;z-index:100;padding:6px 8px 10px;}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:all .3s ease;border-radius:14px;position:relative;padding:6px 0;-webkit-tap-highlight-color:transparent;}.tab-item i{font-size:22px;transition:all .3s ease;}.tab-item span{font-size:13px;font-weight:700;letter-spacing:0.5px;transition:all .3s ease;}
/* ---- 每个Tab始终显示各自颜色 ---- *//* 未激活：暗淡但可见 / 激活：全亮+发光 */
/* 绿色Tab - 预定 */.tab-item.tab-green{color:var(--tab-green-dim);}.tab-item.tab-green.active{color:var(--tab-green);}.tab-item.tab-green.active i{filter:drop-shadow(0 0 6px rgba(61,168,98,0.5));}.tab-item.tab-green.active::before{content:'';position:absolute;top:-7px;left:18%;right:18%;height:3px;border-radius:0 0 4px 4px;background:var(--tab-green);box-shadow:0 0 10px rgba(61,168,98,0.6);}
/* 金色Tab - 群通知 */.tab-item.tab-gold{color:var(--tab-gold-dim);}.tab-item.tab-gold.active{color:var(--tab-gold);}.tab-item.tab-gold.active i{filter:drop-shadow(0 0 6px rgba(219,191,138,0.5));}.tab-item.tab-gold.active::before{content:'';position:absolute;top:-7px;left:18%;right:18%;height:3px;border-radius:0 0 4px 4px;background:var(--tab-gold);box-shadow:0 0 10px rgba(219,191,138,0.6);}
/* 蓝色Tab - 我的 */.tab-item.tab-blue{color:var(--tab-blue-dim);}.tab-item.tab-blue.active{color:var(--tab-blue);}.tab-item.tab-blue.active i{filter:drop-shadow(0 0 6px rgba(125,176,236,0.5));}.tab-item.tab-blue.active::before{content:'';position:absolute;top:-7px;left:18%;right:18%;height:3px;border-radius:0 0 4px 4px;background:var(--tab-blue);box-shadow:0 0 10px rgba(125,176,236,0.6);}
/* 橙色Tab - 规则 */.tab-item.tab-orange{color:var(--tab-orange-dim);}.tab-item.tab-orange.active{color:var(--tab-orange);}.tab-item.tab-orange.active i{filter:drop-shadow(0 0 6px rgba(237,160,106,0.5));}.tab-item.tab-orange.active::before{content:'';position:absolute;top:-7px;left:18%;right:18%;height:3px;border-radius:0 0 4px 4px;background:var(--tab-orange);box-shadow:0 0 10px rgba(237,160,106,0.6);}
/* æ¿€æ´»æ—¶å›¾æ ‡å¼¹è·³ */.tab-item.active i{transform:scale(1.15) translateY(-1px);}/* 点击缩放反馈 */.tab-item:active i{transform:scale(0.88)!important;filter:none!important;}.tab-item:active{opacity:0.7;}
/* æœªè¯»è§’æ ‡ */.tab-badge{position:absolute;top:0;right:50%;margin-right:-18px;min-width:18px;height:18px;border-radius:9px;background:var(--danger);color:white;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;animation:badgePop .3s ease-out;box-shadow:0 2px 8px rgba(217,64,64,0.5);}@keyframes badgePop{from{transform:scale(0);}to{transform:scale(1);}}
.content{padding-bottom:80px;min-height:calc(100vh - 94px);position:relative;z-index:1;}
.login-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;position:relative;z-index:1;}.login-logo{width:80px;height:80px;border-radius:20px;background:linear-gradient(135deg,var(--accent),#1a6b38);display:flex;align-items:center;justify-content:center;font-size:36px;color:white;margin-bottom:20px;box-shadow:0 8px 32px rgba(45,138,78,0.3);}.login-title{font-size:24px;font-weight:900;margin-bottom:6px;letter-spacing:1px;}.login-sub{font-size:13px;color:var(--text-muted);margin-bottom:32px;}.member-list{width:100%;max-width:360px;}.member-item{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--card);border-radius:14px;margin-bottom:10px;cursor:pointer;transition:all .25s;border:2px solid transparent;}.member-item:hover{background:var(--card-light);border-color:var(--accent);transform:translateX(4px);}.member-item:active{transform:scale(0.98);}.m-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;color:white;flex-shrink:0;}.m-name{font-size:15px;font-weight:600;}.m-hint{font-size:11px;color:var(--text-muted);margin-top:1px;}
.date-bar{display:flex;gap:10px;padding:16px 16px 12px;}.date-btn{flex:1;padding:14px 10px;border-radius:14px;background:var(--card);border:2px solid transparent;cursor:pointer;text-align:center;transition:all .3s;position:relative;overflow:hidden;}.date-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--accent-glow),transparent);opacity:0;transition:opacity .3s;}.date-btn.active{border-color:var(--accent);}.date-btn.active::before{opacity:1;}.date-btn .d-label{font-size:12px;color:var(--text-muted);position:relative;z-index:1;}.date-btn .d-date{font-size:16px;font-weight:700;margin-top:3px;position:relative;z-index:1;}.date-btn.active .d-label{color:var(--accent-light);}.date-btn.active .d-date{color:var(--accent-light);}
.sched{padding:0 16px 16px;}.sched-head{display:flex;margin-bottom:6px;align-items:center;}.sched-head .sh-time{width:72px;font-size:10px;color:var(--text-muted);text-align:right;padding-right:10px;text-transform:uppercase;letter-spacing:0.5px;}.sched-head .sh-bay{flex:1;text-align:center;font-size:13px;font-weight:800;}.sh-bay-a{color:var(--accent-light);}.sh-bay-b{color:var(--blue);}.sched-row{display:flex;margin-bottom:5px;align-items:center;}.sr-time{width:72px;font-size:11px;color:var(--text-muted);text-align:right;padding-right:10px;line-height:1.3;}.sr-time span{display:block;font-size:9px;opacity:0.6;}.sr-slots{flex:1;display:flex;gap:5px;}.slot{flex:1;padding:10px 6px;border-radius:10px;text-align:center;cursor:pointer;transition:all .25s;font-size:11px;font-weight:500;min-height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;overflow:hidden;}.slot.avail{background:rgba(45,138,78,0.07);border:1.5px dashed rgba(45,138,78,0.35);color:var(--accent-light);}.slot.avail:hover{background:rgba(45,138,78,0.15);border-color:var(--accent);transform:scale(1.03);}.slot.avail:active{transform:scale(0.97);}.slot.booked{background:rgba(100,120,110,0.1);border:1.5px solid rgba(100,120,110,0.15);color:var(--text-muted);cursor:default;}.slot.mine{background:var(--gold-dim);border:1.5px solid rgba(201,169,110,0.4);color:var(--gold-light);cursor:pointer;}.slot.mine:hover{background:rgba(201,169,110,0.22);}.slot .s-icon{font-size:14px;}.slot .s-label{font-size:9px;opacity:0.8;}.slot .s-user{font-size:10px;font-weight:600;}
.stats{display:flex;gap:8px;padding:0 16px 14px;}.stat-card{flex:1;background:var(--card);border-radius:12px;padding:14px 12px;text-align:center;}.stat-val{font-size:22px;font-weight:900;}.stat-lbl{font-size:10px;color:var(--text-muted);margin-top:2px;}.stat-val.gold{color:var(--gold);}.stat-val.green{color:var(--accent-light);}.stat-val.blue{color:var(--blue);}
.bk-card{background:var(--card);border-radius:14px;padding:16px 18px;margin:0 16px 10px;border-left:4px solid var(--gold);transition:all .2s;position:relative;overflow:hidden;}.bk-card::after{content:'';position:absolute;top:0;right:0;width:60px;height:60px;background:radial-gradient(circle at top right,rgba(201,169,110,0.06),transparent);pointer-events:none;}.bk-card.cancelled{border-left-color:var(--text-muted);opacity:0.5;}.bk-card.noshow{border-left-color:var(--danger);}.bk-card.checked-in{border-left-color:var(--accent);}.bk-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}.bk-bay{display:inline-block;padding:2px 10px;border-radius:6px;font-size:11px;font-weight:800;}.bk-bay-a{background:rgba(45,138,78,0.15);color:var(--accent-light);}.bk-bay-b{background:var(--blue-dim);color:var(--blue);}.bk-status{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;}.st-booked{background:var(--gold-dim);color:var(--gold);}.st-cancelled{background:rgba(100,120,110,0.15);color:var(--text-muted);}.st-noshow{background:rgba(217,64,64,0.15);color:var(--danger-light);}.st-checkedin{background:rgba(45,138,78,0.15);color:var(--accent-light);}.bk-info{display:flex;gap:16px;font-size:13px;color:var(--text-muted);margin-bottom:12px;}.bk-info i{margin-right:4px;font-size:11px;}.bk-actions{display:flex;gap:8px;}.btn-sm{padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;border:none;cursor:pointer;transition:all .2s;}.btn-sm:active{transform:scale(0.96);}.btn-cancel{background:rgba(217,64,64,0.12);color:var(--danger-light);border:1px solid rgba(217,64,64,0.2);}.btn-cancel:hover{background:rgba(217,64,64,0.2);}.btn-checkin{background:rgba(45,138,78,0.12);color:var(--accent-light);border:1px solid rgba(45,138,78,0.2);}.btn-checkin:hover{background:rgba(45,138,78,0.2);}.btn-disabled{opacity:0.35;cursor:not-allowed;pointer-events:none;}
.empty{text-align:center;padding:60px 24px;color:var(--text-muted);}.empty i{font-size:48px;margin-bottom:16px;opacity:0.3;display:block;}.empty p{font-size:14px;}
.rule-card{background:var(--card);border-radius:14px;padding:20px;margin:0 16px 12px;}.rule-icon-box{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:12px;}.rule-title{font-size:15px;font-weight:700;margin-bottom:6px;}.rule-desc{font-size:13px;color:var(--text-muted);line-height:1.7;}.rule-desc strong{color:var(--gold);font-weight:600;}
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:200;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;}.modal-mask.show{opacity:1;pointer-events:auto;}.modal-box{background:var(--card);border-radius:20px 20px 0 0;width:100%;max-width:430px;padding:20px 24px 32px;transform:translateY(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);}.modal-mask.show .modal-box{transform:translateY(0);}.modal-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 20px;}.modal-title{font-size:17px;font-weight:700;margin-bottom:16px;text-align:center;}.modal-body{margin-bottom:24px;}.modal-actions{display:flex;gap:10px;}.modal-btn{flex:1;padding:13px;border-radius:12px;font-size:14px;font-weight:600;border:none;cursor:pointer;transition:all .2s;}.modal-btn:active{transform:scale(0.97);}.modal-btn-primary{background:var(--accent);color:white;}.modal-btn-primary:hover{background:var(--accent-light);}.modal-btn-ghost{background:var(--card-light);color:var(--text);border:1px solid var(--border);}.modal-btn-danger{background:var(--danger);color:white;}
.toast{position:fixed;top:70px;left:50%;transform:translateX(-50%) translateY(-20px);padding:10px 24px;border-radius:22px;font-size:13px;font-weight:500;z-index:300;pointer-events:none;white-space:nowrap;backdrop-filter:blur(16px);}.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}.toast.success{background:rgba(45,138,78,0.88);color:white;}.toast.error{background:rgba(217,64,64,0.88);color:white;}.toast.warn{background:rgba(201,169,110,0.88);color:#1a1a1a;}
.legend{display:flex;gap:16px;padding:0 16px 10px;flex-wrap:wrap;}.legend-item{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text-muted);}.legend-dot{width:10px;height:10px;border-radius:3px;}.legend-dot.avail-dot{background:rgba(45,138,78,0.15);border:1px dashed var(--accent);}.legend-dot.mine-dot{background:var(--gold-dim);border:1px solid var(--gold);}.legend-dot.booked-dot{background:rgba(100,120,110,0.12);border:1px solid rgba(100,120,110,0.2);}
.fee-warn{display:flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(217,64,64,0.08);border-radius:8px;font-size:11px;color:var(--danger-light);margin-top:8px;}.fee-warn i{font-size:13px;}
/* ====== ç¾¤é€šçŸ¥æ ·å¼ ====== */.notif-page{padding:0 0 16px;}.notif-banner{text-align:center;padding:12px 16px 8px;font-size:11px;color:var(--text-muted);opacity:0.6;}.msg-row{display:flex;gap:10px;padding:6px 16px;animation:msgIn .35s ease-out;}@keyframes msgIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}.msg-avatar{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:white;flex-shrink:0;margin-top:2px;}.msg-avatar.sys{background:linear-gradient(135deg,var(--accent),#1a6b38);font-size:16px;}.msg-body{flex:1;min-width:0;}.msg-header{display:flex;align-items:center;gap:8px;margin-bottom:4px;}.msg-name{font-size:12px;font-weight:600;color:var(--text-muted);}.msg-name.sys-name{color:var(--accent-light);}.msg-time{font-size:10px;color:var(--text-muted);opacity:0.6;}.msg-card{border-radius:12px;overflow:hidden;max-width:300px;}.mc-head{padding:10px 14px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;}.mc-head i{font-size:14px;}.mc-head.daily-head{background:rgba(45,138,78,0.12);color:var(--accent-light);}.mc-head.cancel-head{background:rgba(217,64,64,0.1);color:var(--danger-light);}.mc-head.book-head{background:var(--gold-dim);color:var(--gold);}.mc-body{padding:12px 14px;background:var(--card-light);font-size:12px;line-height:1.7;color:var(--text);}.mc-date-label{font-weight:700;color:var(--gold);margin-top:8px;margin-bottom:2px;font-size:12px;}.mc-date-label:first-child{margin-top:0;}.mc-bay-line{color:var(--text-muted);}.mc-bay-line b{color:var(--text);font-weight:600;}.mc-bay-line .avail-tag{color:var(--accent-light);font-weight:500;}.mc-bay-line .full-tag{color:var(--danger-light);font-weight:500;}.mc-highlight{color:var(--accent-light);font-weight:600;}.mc-bay-tag{display:inline-block;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:700;margin-right:4px;}.mc-bay-tag-a{background:rgba(45,138,78,0.15);color:var(--accent-light);}.mc-bay-tag-b{background:var(--blue-dim);color:var(--blue);}.mc-foot{padding:8px 14px;background:rgba(0,0,0,0.15);font-size:10px;color:var(--text-muted);display:flex;align-items:center;gap:4px;}.time-divider{text-align:center;padding:16px 0 8px;font-size:11px;color:var(--text-muted);opacity:0.5;position:relative;}.time-divider::before,.time-divider::after{content:'';position:absolute;top:50%;width:60px;height:1px;background:var(--border);}.time-divider::before{left:calc(50% - 120px);}.time-divider::after{right:calc(50% - 120px);}
.user-menu{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:100%;z-index:250;opacity:0;pointer-events:none;transition:opacity .3s;}.user-menu.show{opacity:1;pointer-events:auto;}.user-menu-bg{position:absolute;inset:0;background:rgba(0,0,0,0.5);}.user-menu-panel{position:absolute;top:50px;right:16px;background:var(--card);border-radius:14px;padding:8px 0;min-width:160px;box-shadow:0 8px 32px rgba(0,0,0,0.4);transform:scale(0.9) translateY(-8px);transition:transform .25s;transform-origin:top right;}.user-menu.show .user-menu-panel{transform:scale(1) translateY(0);}.um-item{padding:10px 20px;font-size:14px;cursor:pointer;transition:background .15s;display:flex;align-items:center;gap:10px;}.um-item:hover{background:var(--card-light);}.um-item i{width:18px;text-align:center;color:var(--text-muted);}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}.fade-up{animation:fadeUp .4s ease-out forwards;}.fade-up-d1{animation-delay:.05s;opacity:0;}.fade-up-d2{animation-delay:.1s;opacity:0;}.fade-up-d3{animation-delay:.15s;opacity:0;}
@media(prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}}

/* ==================== Login Page ==================== */
.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 24px;
  position: relative;
  z-index: 1;
}
.login-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: white;
  margin-bottom: 20px;
  box-shadow: 0 8px 32px var(--accent-glow);
}
.login-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}
.login-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 32px;
}
.member-list {
  width: 100%;
  max-width: 320px;
}
.login-btn {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  background: var(--accent);
  color: white;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.login-btn:hover { background: var(--accent-light); transform: translateY(-1px); }
.login-btn:active { transform: scale(0.98); }

/* ==================== Status Bar ==================== */
.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}
.nav-bar {
  text-align: center;
  padding: 12px 16px 8px;
  font-size: 18px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

/* ==================== Content ==================== */
.content {
  padding: 0 16px 100px;
  position: relative;
  z-index: 1;
}

/* ==================== Date Selector ==================== */
.date-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.date-btn {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  background: var(--card);
  border: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  font-family: inherit;
}
.date-btn.active {
  border-color: var(--accent);
  color: var(--accent-light);
  background: rgba(45, 138, 78, 0.1);
}

/* ==================== Bay Cards ==================== */
.bay-section {
  margin-bottom: 16px;
}
.bay-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
}
.bay-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: white;
}

/* ==================== Slot Grid ==================== */
.slot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.slot-card {
  padding: 12px;
  border-radius: 12px;
  background: var(--card);
  border: 2px dashed var(--border);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.slot-card.available:hover {
  border-color: var(--accent);
  background: rgba(45, 138, 78, 0.08);
}
.slot-card.mine {
  border: 2px solid var(--gold);
  background: var(--gold-dim);
  cursor: default;
}
.slot-card.occupied {
  border: 2px solid var(--border);
  background: rgba(255,255,255,0.02);
  cursor: default;
  opacity: 0.6;
}
.slot-time {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.slot-user {
  font-size: 12px;
  color: var(--text-muted);
}
.slot-card.mine .slot-user { color: var(--gold-light); }

/* ==================== My Bookings ==================== */
.my-card {
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  border-left: 4px solid var(--accent);
}
.my-card.noshow { border-left-color: var(--danger); }
.my-card.checked-in { border-left-color: var(--accent-light); }
.my-card.cancelled { border-left-color: var(--text-muted); opacity: 0.5; }
.my-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.my-card-bay {
  font-size: 16px;
  font-weight: 700;
}
.my-card-status {
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 500;
}
.my-card-info {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.my-card-info i { margin-right: 4px; }
.fee-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(217, 64, 64, 0.1);
  color: var(--danger-light);
  font-size: 12px;
  margin-top: 8px;
}
.bk-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.btn-sm {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-checkin { background: var(--accent); color: white; }
.btn-cancel { background: rgba(217,64,64,0.15); color: var(--danger-light); }
.btn-disabled { opacity: 0.4; cursor: not-allowed; }

/* ==================== Notifications ==================== */
.notif-list { padding-bottom: 20px; }
.notif-date-divider {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px 0 8px;
  position: relative;
}
.notif-date-divider::before,
.notif-date-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: var(--border);
}
.notif-date-divider::before { left: calc(50% - 120px); }
.notif-date-divider::after { right: calc(50% - 120px); }
.notif-card {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--card);
  border-radius: 12px;
  margin-bottom: 8px;
  animation: fadeUp 0.3s ease-out;
}
.notif-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.notif-body { flex: 1; }
.notif-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.notif-text { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.notif-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ==================== Rules ==================== */
.rules-container { padding-bottom: 20px; }
.rule-section {
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
}
.rule-section h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rule-section h3 i { color: var(--accent); }
.rule-section p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.8;
}

/* ==================== Modal ==================== */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.modal-mask.show { opacity: 1; pointer-events: auto; }
.modal-box {
  background: var(--card);
  border-radius: 18px;
  padding: 24px;
  width: 85%;
  max-width: 340px;
  text-align: center;
  transform: scale(0.9);
  transition: transform 0.25s;
}
.modal-mask.show .modal-box { transform: scale(1); }
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.modal-detail { font-size: 13px; color: var(--text-muted); line-height: 1.8; margin-bottom: 20px; }
.modal-btns { display: flex; gap: 10px; }
.modal-btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.modal-btn-primary { background: var(--accent); color: white; }
.modal-btn-primary:hover { background: var(--accent-light); }
.modal-btn-danger { background: var(--danger); color: white; }
.modal-btn-secondary { background: var(--card-light); color: var(--text-muted); }

/* ==================== Toast ==================== */
.toast-container {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.toast {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  animation: fadeUp 0.3s ease-out forwards;
  white-space: nowrap;
  opacity: 1;
}
.toast.success { background: rgba(45,138,78,0.92); border-color: var(--accent); }
.toast.error { background: rgba(217,64,64,0.92); border-color: var(--danger); }

/* ==================== User Menu ==================== */
.user-menu {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: 100%;
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.user-menu.show { opacity: 1; pointer-events: auto; }
.user-menu-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.user-menu-panel {
  position: absolute;
  top: 50px;
  right: 16px;
  background: var(--card);
  border-radius: 14px;
  padding: 8px 0;
  min-width: 160px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  transform: scale(0.9) translateY(-8px);
  transition: transform 0.25s;
  transform-origin: top right;
}
.user-menu.show .user-menu-panel { transform: scale(1) translateY(0); }
.um-item {
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.um-item:hover { background: var(--card-light); }
.um-item i { width: 18px; text-align: center; color: var(--text-muted); }

/* ==================== Tab Bar ==================== */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  display: flex;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 6px 0;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  z-index: 100;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  color: var(--text-muted);
}
.tab-item i { font-size: 22px; transition: all 0.2s; }
.tab-item:active { transform: scale(0.92); }
.tab-item.tab-green.active { color: var(--tab-green); }
.tab-item.tab-green.active i { filter: drop-shadow(0 0 6px rgba(61,168,98,0.5)); }
.tab-item.tab-green.active::before { content:'';position:absolute;top:-7px;left:18%;right:18%;height:3px;border-radius:0 0 4px 4px;background:var(--tab-green);box-shadow:0 0 10px rgba(61,168,98,0.6); }
.tab-item.tab-gold.active { color: var(--tab-gold); }
.tab-item.tab-gold.active i { filter: drop-shadow(0 0 6px rgba(219,191,138,0.5)); }
.tab-item.tab-gold.active::before { content:'';position:absolute;top:-7px;left:18%;right:18%;height:3px;border-radius:0 0 4px 4px;background:var(--tab-gold);box-shadow:0 0 10px rgba(219,191,138,0.6); }
.tab-item.tab-blue.active { color: var(--tab-blue); }
.tab-item.tab-blue.active i { filter: drop-shadow(0 0 6px rgba(125,176,236,0.5)); }
.tab-item.tab-blue.active::before { content:'';position:absolute;top:-7px;left:18%;right:18%;height:3px;border-radius:0 0 4px 4px;background:var(--tab-blue);box-shadow:0 0 10px rgba(125,176,236,0.6); }
.tab-item.tab-orange.active { color: var(--tab-orange); }
.tab-item.tab-orange.active i { filter: drop-shadow(0 0 6px rgba(237,160,106,0.5)); }
.tab-item.tab-orange.active::before { content:'';position:absolute;top:-7px;left:18%;right:18%;height:3px;border-radius:0 0 4px 4px;background:var(--tab-orange);box-shadow:0 0 10px rgba(237,160,106,0.6); }
.tab-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 20px);
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ==================== Empty State ==================== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state i { font-size: 40px; margin-bottom: 12px; opacity: 0.3; }
.empty-state p { font-size: 14px; }

/* ==================== Animations ==================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.4s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ====== UI FIX: 提亮底部Tab栏 ====== */
.tab-bar {
  background: rgba(16, 28, 20, 0.98) !important;
  border-top: 1px solid rgba(45, 138, 78, 0.3) !important;
}
.tab-item {
  color: rgba(200, 220, 205, 0.55) !important;
}
.tab-item.tab-green { color: rgba(61, 168, 98, 0.6) !important; }
.tab-item.tab-gold { color: rgba(219, 191, 138, 0.6) !important; }
.tab-item.tab-blue { color: rgba(125, 176, 236, 0.6) !important; }
.tab-item.tab-orange { color: rgba(237, 160, 106, 0.6) !important; }
.tab-item.tab-green.active { color: #3da862 !important; }
.tab-item.tab-gold.active { color: #dbbf8a !important; }
.tab-item.tab-blue.active { color: #7db0ec !important; }
.tab-item.tab-orange.active { color: #eda06a !important; }
.tab-item i { font-size: 24px !important; }
.tab-item span { font-size: 13px !important; font-weight: 700 !important; }

/* ====== UI FIX: 提亮整体背景 ====== */
.app { background: #0e1c12 !important; }
body { background: #0a140d !important; }

/* ====== Admin Panel ====== */
.admin-panel {
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid rgba(201, 169, 110, 0.2);
}
.admin-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-section {
  margin-bottom: 14px;
}
.admin-section:last-child {
  margin-bottom: 0;
}
.admin-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}