*{box-sizing:border-box}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#f6f9ff,#ffffff);color:#0f172a;padding-bottom:80px;min-height:100vh}
a{text-decoration:none;color:#1677ff}
header{padding:16px;background:linear-gradient(90deg,#1d4ed8,#60a5fa);color:#fff;box-shadow:0 10px 30px rgba(29,78,216,.2);position:sticky;top:0;z-index:100}
header a{color:#fff;font-weight:600}
main{padding:16px;max-width:600px;margin:0 auto}
form{background:#fff;padding:16px;border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.08)}
input,select,button,textarea{width:100%;padding:14px;margin:10px 0;border:1px solid #e6e6e6;border-radius:12px;font-size:15px;outline:none;transition:border-color .2s}
input:focus,textarea:focus{border-color:#2563eb}
button{background:linear-gradient(90deg,#1d4ed8,#60a5fa);color:#fff;border:none;border-radius:12px;box-shadow:0 8px 20px rgba(29,78,216,.2);cursor:pointer;font-weight:600}
button:active{opacity:0.9}
.card{background:#fff;margin-bottom:14px;padding:16px;border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.08)}
ul{list-style:none;padding:0;margin:0}
li{background:#fff;margin-bottom:10px;padding:14px;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.07)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qr{max-width:100%;height:auto;border-radius:12px;display:block}
.bar{display:flex;justify-content:space-between;align-items:center}
.pill{padding:6px 12px;background:#eef2ff;border-radius:999px;color:#1d4ed8;font-size:12px;font-weight:600}
.pill.today{background:#fef2f2;color:#ef4444}
.pill.soon{background:#fffbeb;color:#b45309}
.pill.passed{background:#f1f5f9;color:#64748b}
.footer{padding:20px;color:#64748b;text-align:center;font-size:12px}
.modal{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(2,6,23,.5);display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px);z-index:9999}
.modal-content{background:#fff;padding:20px;border-radius:16px;max-width:460px;width:92%;box-shadow:0 20px 40px rgba(0,0,0,.2);max-height:90vh;overflow-y:auto}
.section-title{font-weight:700;margin-bottom:12px;font-size:16px;border-left:4px solid #2563eb;padding-left:8px;line-height:1.2}
.section-title.blue{border-color:#2563eb}
.muted{color:#64748b;font-size:13px}

/* Tabbar */
.tabbar{position:fixed;bottom:0;left:0;right:0;background:#fff;display:flex;justify-content:space-around;padding:8px 0;box-shadow:0 -4px 20px rgba(0,0,0,.05);z-index:900;padding-bottom:max(8px, env(safe-area-inset-bottom))}
.tabbar a{display:flex;flex-direction:column;align-items:center;color:#94a3b8;font-size:10px;gap:4px}
.tabbar a.active, .tabbar a:hover{color:#2563eb}
.tabbar svg{fill:currentColor}

/* Album & Classmates */
.album-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.album-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.05);transition:transform .2s}
.album-card:active{transform:scale(0.98)}
.album-cover{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.album-name{padding:8px;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.album-count{padding:0 8px 8px;font-size:12px;color:#64748b}
.seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;padding:10px 0}
.seat{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 4px;text-align:center;font-size:13px;color:#334155}
.seat:active{background:#eef2ff;border-color:#bfdbfe}

/* Sponsors */
.sponsor-list{background:#fff;padding:12px;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.07)}
.sponsor-item{display:flex;align-items:center;margin:8px 0}
.sponsor-rank{width:32px;text-align:center;font-weight:700;color:#334155}
.sponsor-name{flex:0 0 auto;margin:0 10px;font-size:14px}
.sponsor-bar{flex:1;height:8px;background:#f1f5f9;border-radius:999px;overflow:hidden}
.sponsor-bar-inner{height:100%;background:#3b82f6;border-radius:999px}
.sponsor-amount{margin-left:10px;font-size:13px;color:#64748b;width:60px;text-align:right}

/* Moments (朋友圈) Styles */
.moment-item { display: flex; gap: 12px; margin-bottom: 24px; border-bottom: 1px solid #f1f5f9; padding-bottom: 16px; }
.moment-avatar { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; background: #eee; flex-shrink: 0; }
.moment-body { flex: 1; min-width: 0; }
.moment-nick { font-weight: 600; color: #1e3a8a; margin-bottom: 4px; font-size: 15px; }
.moment-text { margin-bottom: 8px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.moment-grid { display: grid; gap: 4px; margin-bottom: 8px; max-width: 300px; }
.moment-grid-1 { grid-template-columns: 1fr; }
.moment-grid-2 { grid-template-columns: repeat(2, 1fr); }
.moment-grid-3 { grid-template-columns: repeat(3, 1fr); }
.moment-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #e2e8f0; cursor: pointer; border-radius: 4px; border: 1px solid #f1f5f9; }
.moment-grid-1 .moment-img { max-width: 240px !important; max-height: 240px !important; width: auto !important; aspect-ratio: auto; border-radius: 8px; }
.moment-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #94a3b8; margin-top: 8px; }
.moment-actions { position: relative; }
.moment-action-btn { padding: 4px 8px; background: #f1f5f9; border-radius: 4px; color: #3b82f6; cursor: pointer; display: flex; align-items: center; gap: 4px; font-weight: 600; }
.moment-likes-comments { background: #f8fafc; border-radius: 4px; margin-top: 8px; padding: 8px; font-size: 13px; }
.moment-likes { color: #1e3a8a; margin-bottom: 4px; display: flex; align-items: flex-start; gap: 4px; }
.moment-like-icon { width: 14px; height: 14px; margin-top: 2px; }
.moment-comment-item { margin-bottom: 2px; }
.moment-comment-user { color: #1e3a8a; font-weight: 500; }
.fab-add { position: fixed; right: 20px !important; left: auto !important; bottom: 90px !important; width: 64px; height: 64px; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(37,99,235,0.4); font-size: 36px; z-index: 999; cursor: pointer; text-decoration: none; transition: all 0.2s; }
.fab-add:hover { transform: scale(1.05); box-shadow: 0 10px 25px rgba(37,99,235,0.5); }
.fab-add:active { transform: scale(0.95); }