/* 积分系统 · 简洁现代风 */
:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --border: #e6e9f0;
  --text: #1b2233;
  --text-dim: #6b7488;
  --primary: #3b6ef6;
  --primary-dark: #2b56c9;
  --success: #22b07d;
  --danger: #e5484d;
  --gold: #f5a623;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(27, 34, 51, .06);
  --shadow-lg: 0 10px 30px rgba(27, 34, 51, .10);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  min-height: 100vh;
  line-height: 1.55;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

/* 顶栏 */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5vw; height: 62px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: .5px; }
.topbar .brand span { color: var(--primary); }
.topbar .menu { display: flex; align-items: center; gap: 6px; }
.topbar .menu a {
  color: var(--text-dim); font-size: 14px; padding: 8px 14px; border-radius: 10px;
  text-decoration: none; transition: all .15s;
}
.topbar .menu a svg { display:none;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.topbar .menu a:hover { background: #eef2fb; color: var(--text); }
.topbar .menu a.active { background: #e8efff; color: var(--primary); font-weight: 700; }
.topbar .userbox { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.topbar .userbox .pts { color: var(--gold); font-weight: 700; }
.topbar-tools { display: flex; align-items: center; gap: 3px; }
.topbar-icon { position: relative; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); text-decoration: none; }
.topbar-icon:hover { background: #eef2fb; color: var(--primary); text-decoration: none; }
.topbar-icon-glyph { font-family: "Segoe UI Symbol", sans-serif; font-size: 20px; line-height: 1; }
.announcement-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid currentColor; border-radius: 50%; font-family: Georgia, serif; font-size: 13px; font-weight: 800; line-height: 1; }
.notice-badge { position: absolute; right: -5px; top: -5px; z-index: 2; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 10px; background: #f04444; color: #fff; box-shadow: 0 2px 5px rgba(229,72,77,.28); font-size: 10px; font-weight: 800; line-height: 1; }
.user-menu { position: relative; }
.user-menu-trigger { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--primary); font-size: 14px; }
.user-menu-trigger:hover { background: #eef2fb; }
.topbar-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.user-menu-arrow { color: var(--text-dim); font-size: 11px; }
.user-menu-dropdown { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; display: none; width: 130px; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow-lg); }
.user-menu-dropdown.show { display: block; }
.user-menu-dropdown a, .user-menu-dropdown button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); text-align: left; font-size: 13px; text-decoration: none; }
.user-menu-dropdown a:hover, .user-menu-dropdown button:hover { background: #f2f5fc; text-decoration: none; }
.user-menu-dropdown button { color: var(--danger); }

.container { max-width: 1080px; margin: 0 auto; padding: 28px 5vw 80px; }

/* 通用卡片 */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px;
}
.section-title { font-size: 17px; font-weight: 800; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.muted { color: var(--text-dim); font-size: 13px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .topbar { padding: 0 16px; } .topbar .menu a { padding: 8px 10px; } }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: 10px; border: 1px solid transparent;
  background: var(--primary); color: #fff; font-size: 14px; font-weight: 600;
  transition: all .15s;
}
.btn:hover { background: var(--primary-dark); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: #fff; border-color: var(--border); color: var(--text); }
.btn.ghost:hover { background: #f2f5fc; }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #c93b40; }
.btn.sm { padding: 7px 13px; font-size: 13px; border-radius: 9px; }
.btn.block { width: 100%; }

/* 表单 */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 14px; font-size: 14px; color: var(--text);
  background: #fafbfe; border: 1px solid var(--border); border-radius: 10px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,110,246,.12); background: #fff;
}
.field textarea { min-height: 110px; resize: vertical; }

/* 徽标/标签 */
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.tag.green { background: #e5f8f0; color: var(--success); }
.tag.red { background: #fdeaeb; color: var(--danger); }
.tag.gold { background: #fff4e0; color: var(--gold); }
.tag.gray { background: #eef1f7; color: var(--text-dim); }

/* 列表行 */
.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.list-row:last-child { border-bottom: none; }

/* 社区 */
.community-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.community-post-access { display:flex;align-items:center;justify-content:flex-end;gap:12px; }
.community-head h1 { font-size: 24px; line-height: 1.2; margin-bottom: 6px; }
.community-head p { color: var(--text-dim); font-size: 14px; }
.community-board { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.community-board-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.community-tabs { display: flex; align-items: center; gap: 4px; }
.community-tabs button { border: 0; background: transparent; color: var(--text-dim); padding: 8px 14px; border-radius: 8px; font-size: 14px; }
.community-tabs button.on { color: var(--primary); background: #eef3ff; font-weight: 700; }
.community-search { position: relative; width: min(320px, 48vw); }
.community-search input { width: 100%; height: 38px; padding: 8px 36px 8px 12px; border: 1px solid var(--border); border-radius: 9px; background: #fafbfe; color: var(--text); outline: none; }
.community-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,110,246,.12); background: #fff; }
.community-search button { position: absolute; right: 4px; top: 3px; width: 32px; height: 32px; border: 0; background: transparent; color: var(--text-dim); font-size: 20px; }
.community-post { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; transition: background .15s; }
.community-post:hover { text-decoration: none; background: #fafbfe; }
.community-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e8efff; color: var(--primary); font-size: 16px; font-weight: 800; flex: 0 0 auto; }
.community-avatar img, .profile-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.community-avatar.small { width: 36px; height: 36px; font-size: 14px; }
.community-post-main { min-width: 0; }
.community-post-title { font-size: 15px; font-weight: 800; margin-bottom: 4px; overflow-wrap: anywhere; }
.community-post-summary { color: var(--text-dim); font-size: 13px; line-height: 1.5; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.community-post-stats { display: flex; gap: 14px; align-items: center; color: var(--text-dim); font-size: 13px; white-space: nowrap; }
.community-post-stats .liked, .btn.liked { color: var(--primary); border-color: #b9c9fb; background: #eef3ff; }
.community-arrow { color: #a6adbb; font-size: 24px; line-height: 1; }
.community-board-foot { padding: 11px 20px; color: var(--text-dim); font-size: 12px; background: #fafbfe; }
.community-post-modal textarea { min-height: 180px; }
.community-form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.modal-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); font-size: 24px; line-height: 1; }
.modal-close:hover { background: #f2f5fc; color: var(--text); }
.community-detail-wrap { max-width: 900px; padding-top: 22px; }
.community-back { display: inline-block; margin-bottom: 14px; font-size: 14px; }
.community-detail-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.community-article { padding: 24px 28px 20px; }
.community-article h1 { font-size: 22px; line-height: 1.4; overflow-wrap: anywhere; }
.community-article-meta { display: flex; align-items: center; gap: 10px; padding: 12px 0 15px; }
.community-article-meta strong, .community-article-meta small { display: block; }
.community-article-meta strong { font-size: 14px; }
.community-article-meta small { color: var(--text-dim); font-size: 12px; margin-top: 1px; }
.community-article-content { padding: 16px 0 20px; border-top: 1px solid var(--border); white-space: pre-wrap; line-height: 1.75; overflow-wrap: anywhere; }
.community-article-actions { display: flex; gap: 10px; align-items: center; }
.like-button { min-width: 66px; height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--text); font-size: 14px; font-weight: 700; }
.like-button:hover { background: #fff7f7; border-color: #f4c5c7; }
.heart-icon { color: #8b94a7; font-size: 22px; line-height: 1; transition: color .16s, transform .16s; }
.like-button.liked { color: var(--danger); border-color: #f2b8bb; background: #fff5f5; }
.like-button.liked .heart-icon { color: var(--danger); }
.like-button.pop .heart-icon { animation: heartPop .32s ease; }
@keyframes heartPop { 0% { transform: scale(.75); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } }
.btn.text-danger { color: var(--danger); }
.btn.text-danger:hover { color: #c93b40; background: #fff5f5; border-color: #f5c2c4; }
.community-comments { border-top: 1px solid var(--border); padding: 20px 28px 8px; }
.community-comments .section-title { margin-bottom: 12px; }
.community-comment-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; background: #f7f9fc; border: 1px solid var(--border); border-radius: 10px; padding: 8px 9px 8px 12px; margin-bottom: 4px; }
.community-comment-form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,110,246,.10); background: #fff; }
.community-comment-form textarea { display: block; width: 100%; height: 40px; min-height: 40px; max-height: 40px; padding: 9px 2px 7px; border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font: inherit; font-size: 14px; line-height: 1.5; }
.community-comment-form .community-form-actions { margin: 0; }
.community-comments > .empty, .community-comments #commentList > .empty { padding: 26px 0 30px; }
.comment-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.comment-row:last-child { border-bottom: none; }
.comment-main { min-width: 0; }
.comment-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.comment-meta strong { font-size: 14px; }
.comment-meta span { color: var(--text-dim); font-size: 12px; }
.comment-content { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.reply-to { color: var(--primary); }
.comment-actions { display: flex; gap: 14px; margin-top: 7px; }
.comment-actions button { border: 0; background: transparent; color: var(--text-dim); font-size: 12px; padding: 0; }
.comment-actions button:hover, .comment-actions button.liked { color: var(--primary); }
.comment-actions .comment-like { display: inline-flex; align-items: center; gap: 3px; }
.comment-actions .comment-like span { font-size: 17px; line-height: 1; }
.comment-actions .comment-like:hover, .comment-actions .comment-like.liked { color: var(--danger); }
.comment-actions button.danger:hover { color: var(--danger); }
.comment-children { margin-top: 10px; padding-left: 14px; border-left: 2px solid #edf0f5; }
.comment-row.nested { padding: 12px 0; border-bottom: 0; }
.comment-replying { align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; margin-bottom: 8px; background: #eef3ff; color: var(--primary); border-radius: 8px; font-size: 13px; }
.comment-replying button { border: 0; background: transparent; color: var(--text-dim); font-size: 12px; }
.notifications-page { max-width: 860px; }
.avatar-setting { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.profile-avatar { width: 64px; height: 64px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #e8efff; color: var(--primary); font-size: 22px; font-weight: 800; overflow: hidden; }
.me-page { max-width: 1040px; }
.me-overview { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 24px 26px; margin-bottom: 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.profile-avatar.large { width: 72px; height: 72px; font-size: 25px; }
.me-identity h1 { font-size: 22px; line-height: 1.3; margin-bottom: 5px; }
.me-identity p { color: var(--text-dim); font-size: 13px; }
.me-points { min-width: 130px; padding-left: 24px; border-left: 1px solid var(--border); text-align: right; }
.me-points span { display: block; color: var(--text-dim); font-size: 12px; margin-bottom: 3px; }
.me-points strong { color: var(--gold); font-size: 28px; line-height: 1.2; }
.me-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.me-setting-card { min-height: 330px; }
.me-form-actions { display: flex; justify-content: flex-end; }
.me-log-card { margin-top: 16px; }
.me-log-card #logList { max-height: 430px; overflow: auto; }
.notifications-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 16px; }
.notifications-head h1 { font-size: 24px; margin-bottom: 4px; }
.notification-list { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.notification-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 16px 18px; color: inherit; border-bottom: 1px solid var(--border); text-decoration: none; }
.notification-item:last-child { border-bottom: 0; }
.notification-item:hover { background: #fafbfe; text-decoration: none; }
.notification-item.unread { background: #f5f8ff; }
.notification-main { min-width: 0; }
.notification-title { font-size: 14px; margin-bottom: 4px; }
.notification-text { color: var(--text-dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notification-time { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
@media (max-width: 760px) {
  .community-head { align-items: center; }
  .community-head h1 { font-size: 21px; }
  .community-head p { display: none; }
  .community-board-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
  .community-search { width: 100%; }
  .community-post { grid-template-columns: 38px minmax(0, 1fr); padding: 16px; }
  .community-avatar { width: 38px; height: 38px; }
  .community-post-stats { grid-column: 2; justify-content: flex-start; }
  .community-arrow { display: none; }
  .community-detail-wrap { padding-top: 16px; }
  .community-article { padding: 20px 18px 17px; }
  .community-article h1 { font-size: 21px; }
  .community-comments { padding: 18px 18px 6px; }
  .community-comment-form { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .comment-row { grid-template-columns: 34px minmax(0, 1fr); }
  .comment-children { padding-left: 8px; }
  .notification-item { grid-template-columns: 38px minmax(0, 1fr); }
  .notification-time { grid-column: 2; }
  .me-overview { grid-template-columns: 58px minmax(0, 1fr); padding: 20px 18px; }
  .profile-avatar.large { width: 58px; height: 58px; }
  .me-points { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--border); text-align: left; }
  .me-points span { margin: 0; }
  .me-points strong { font-size: 24px; }
  .me-settings-grid { grid-template-columns: 1fr; }
  .me-setting-card { min-height: 0; }
}

/* 商品卡 */
.product-card { display: flex; flex-direction: column; gap: 10px; }
.product-card .name { font-size: 16px; font-weight: 800; }
.product-card .desc { color: var(--text-dim); font-size: 13px; flex: 1; }
.product-card .foot { display: flex; align-items: center; justify-content: space-between; }
.product-card .cost { color: var(--gold); font-weight: 800; font-size: 18px; }
.home-action-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.home-page { max-width:1180px; }
.home-summary { grid-template-areas:"balance redeem" "ad ad";margin-bottom:22px; }
.home-balance-card { grid-area:balance;position:relative;min-height:184px;padding:28px;overflow:hidden;display:flex;flex-direction:column;justify-content:center; }
.home-balance-card::after { content:"";position:absolute;right:-34px;bottom:-58px;width:170px;height:170px;border:26px solid rgba(255,255,255,.09);border-radius:50%; }
.home-balance-icon { position:absolute;right:24px;top:22px;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:rgba(255,255,255,.12);font-size:13px;font-weight:800; }
.home-balance-icon svg,.home-card-heading i svg,.home-action-icon svg,.product-mark svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.home-redeem-card { grid-area:redeem;min-height:184px;padding:28px;display:flex;flex-direction:column;justify-content:center; }
.home-card-heading { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px; }
.home-card-heading strong,.home-card-heading span { display:block; }
.home-card-heading strong { font-size:18px; }
.home-card-heading span { margin-top:4px;color:var(--text-dim);font-size:12px; }
.home-card-heading i { width:36px;height:36px;display:grid;place-items:center;border-radius:8px;background:#e8efff;color:var(--primary);font-style:normal; }
.home-redeem-form { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px; }
.home-redeem-form input { min-width:0;height:42px;padding:0 13px;border:1px solid var(--border);border-radius:8px;background:#fafbfe;outline:none;font:inherit;font-size:13px;letter-spacing:0; }
.home-redeem-form input:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,110,246,.1);background:#fff; }
.home-action-grid .product-card { min-height:190px;padding:22px;position:relative;overflow:hidden;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.home-action-grid .product-card:hover { transform:translateY(-3px);box-shadow:0 10px 24px rgba(27,34,51,.09);border-color:#d9dfeb;text-decoration:none; }
.home-action-grid .product-card .cost { font-size:12px; }
.home-action-grid .product-card::after { content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#d7ddea; }
.home-wheel-card::after { background:#f5a623!important; }
.home-action-grid .product-card:nth-child(2)::after { background:#98a3b8; }
.home-action-grid .product-card:nth-child(3)::after { background:#22b07d; }
.home-action-grid .product-card:nth-child(4)::after { background:#3b6ef6; }
.home-wheel-card { padding-right:72px!important; }
.home-wheel-mark { position:absolute;right:18px;top:20px;width:44px;height:44px;border:5px solid #fff;border-radius:50%;background:conic-gradient(#e5484d 0 20%,#f5a623 20% 40%,#3b6ef6 40% 60%,#22b07d 60% 80%,#7b879d 80%);box-shadow:0 0 0 1px var(--border),0 5px 12px rgba(27,34,51,.12);transition:transform .35s ease; }
.home-wheel-mark::before { content:"";position:absolute;left:50%;top:-9px;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:11px solid var(--danger); }
.home-wheel-mark i { position:absolute;left:50%;top:50%;width:13px;height:13px;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;background:var(--primary); }
.home-wheel-card:hover .home-wheel-mark { transform:rotate(40deg); }
.home-action-icon { position:absolute;right:18px;top:20px;width:44px;height:44px;display:grid;place-items:center;border-radius:8px;font-size:16px;font-weight:800; }
.home-action-icon svg { width:23px;height:23px; }
.home-action-icon.rank { background:#f3f4f7;color:#778397; }
.home-action-icon.shop { background:#e5f8f0;color:#16865f; }
.home-action-icon.community { background:#e8efff;color:var(--primary); }
.home-action-kicker { color:#9aa3b5;font-size:10px;font-weight:800; }
.home-action-grid .name { margin-top:4px; }
.home-action-arrow { color:#a4acbb;font-size:23px;line-height:1;transition:transform .18s,color .18s; }
.home-action-grid .product-card:hover .home-action-arrow { color:var(--primary);transform:translateX(3px); }
.home-official-ad { grid-area:ad;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:16px;margin-top:0;padding:18px 20px;border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:8px;background:#fff;box-shadow:var(--shadow); }
.home-official-ad-icon { width:44px;height:44px;display:grid;place-items:center;border-radius:8px;background:#e8efff;color:var(--primary); }
.home-official-ad-icon svg { width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.home-official-ad-main span { display:block;color:#9aa3b5;font-size:10px;font-weight:800; }
.home-official-ad-main strong { display:block;margin:1px 0 3px;font-size:15px; }
.home-official-ad-main p { color:var(--text-dim);font-size:13px;line-height:1.65;overflow-wrap:anywhere; }
@media (max-width:900px) { .home-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px) { .home-summary,.home-action-grid{grid-template-columns:1fr}.home-action-grid .product-card{min-height:160px}.home-redeem-form{grid-template-columns:1fr} }

/* 排行榜 */
.rank-page { max-width: 1040px; }
.rank-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.rank-head h1 { font-size: 24px; line-height: 1.2; margin-bottom: 5px; }
.rank-head p { color: var(--text-dim); font-size: 14px; }
.rank-self { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px; background: #fff; border: 1px solid var(--border); border-radius: 8px; white-space: nowrap; }
.rank-self span { color: var(--text-dim); font-size: 12px; }
.rank-self strong { color: var(--primary); font-size: 15px; }
.rank-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; padding-top: 34px; }
.podium-card { position: relative; min-height: 205px; padding: 30px 22px 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); text-align: center; overflow: visible; animation: podiumEnter .55s cubic-bezier(.2,.8,.2,1) both; transition: transform .2s ease, box-shadow .2s ease; }
.podium-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(27,34,51,.12); }
.podium-card.rank-1 { min-height: 245px; border-color: #f1cf83; background: linear-gradient(180deg,#fffdf7 0%,#fff 48%); box-shadow: 0 10px 28px rgba(245,166,35,.14); }
.podium-card.rank-2 { min-height: 215px; border-color: #d6dbe5; }
.podium-card.rank-3 { min-height: 200px; border-color: #e4c4ad; }
.podium-card.rank-1 { animation-delay: .08s; }
.podium-card.rank-2 { animation-delay: 0s; }
.podium-card.rank-3 { animation-delay: .16s; }
.podium-card.rank-1::after { content:""; position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.78) 44%,transparent 62%); transform:translateX(-130%); animation:podiumShine 4.8s ease-in-out infinite 1.2s; }
.podium-card.current { box-shadow: 0 0 0 2px rgba(59,110,246,.18), var(--shadow); }
.podium-crown { position: absolute; top: -29px; left: 50%; transform: translateX(-50%); font-size: 34px; line-height: 1; animation: crownFloat 2.4s ease-in-out infinite; }
.rank-1 .podium-crown { top: -38px; color: #f5a623; font-size: 44px; text-shadow: 0 4px 12px rgba(245,166,35,.28); }
.rank-2 .podium-crown { color: #98a3b8; text-shadow: 0 4px 10px rgba(119,132,155,.24); animation-delay: -.8s; }
.rank-3 .podium-crown { color: #c98251; text-shadow: 0 4px 10px rgba(201,130,81,.24); animation-delay: -1.5s; }
.podium-medal { position: absolute; right: 14px; top: 13px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 800; }
.rank-1 .podium-medal { background: #f5a623; box-shadow: 0 3px 10px rgba(245,166,35,.28); }
.rank-2 .podium-medal { background: #98a3b8; }
.rank-3 .podium-medal { background: #c98251; }
.rank-1 .rank-avatar { box-shadow: 0 0 0 4px #fff, 0 0 0 7px #f5c35e; }
.rank-2 .rank-avatar { box-shadow: 0 0 0 4px #fff, 0 0 0 7px #b7bfce; }
.rank-3 .rank-avatar { box-shadow: 0 0 0 4px #fff, 0 0 0 7px #d7a17b; }
.podium-card .rank-avatar { transition: transform .2s ease; }
.podium-card:hover .rank-avatar { transform: scale(1.06); }
.podium-base { position: absolute; left: -1px; right: -1px; bottom: -1px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 0 0 10px 10px; color: #fff; font-size: 13px; font-weight: 800; }
.rank-1 .podium-base { background: #f5a623; }
.rank-2 .podium-base { background: #98a3b8; }
.rank-3 .podium-base { background: #c98251; }
@keyframes crownFloat { 0%,100% { transform: translate(-50%,0) rotate(-2deg); } 50% { transform: translate(-50%,-4px) rotate(2deg); } }
@keyframes podiumEnter { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes podiumShine { 0%,72% { transform:translateX(-130%); } 100% { transform:translateX(130%); } }
.podium-sparkles i { position:absolute; width:4px; height:4px; border-radius:50%; opacity:.25; animation:sparkBlink 2.2s ease-in-out infinite; }
.rank-1 .podium-sparkles i { background:#f5a623; }
.rank-2 .podium-sparkles i { background:#8f9aaf; }
.rank-3 .podium-sparkles i { background:#c98251; }
.podium-sparkles i:nth-child(1) { left:17%; top:22%; }
.podium-sparkles i:nth-child(2) { right:16%; top:34%; animation-delay:-.7s; }
.podium-sparkles i:nth-child(3) { left:25%; bottom:28%; animation-delay:-1.3s; }
.podium-sparkles i:nth-child(4) { right:24%; bottom:24%; animation-delay:-1.8s; }
@keyframes sparkBlink { 0%,100% { opacity:.18; transform:scale(.7); } 50% { opacity:.75; transform:scale(1.5); } }
.rank-avatar { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; background: #e8efff; color: var(--primary); font-size: 14px; font-weight: 800; overflow: hidden; }
.rank-avatar.large { width: 62px; height: 62px; font-size: 22px; margin-bottom: 10px; }
.rank-avatar img { width: 100%; height: 100%; object-fit: cover; }
.podium-name { font-size: 16px; font-weight: 800; }
.podium-name span, .rank-me { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #e8efff; color: var(--primary); font-size: 10px; vertical-align: 2px; }
.podium-points { margin-top: 4px; color: var(--gold); font-size: 22px; font-weight: 800; }
.podium-points small { margin-left: 4px; color: var(--text-dim); font-size: 11px; font-weight: 500; }
.rank-board { margin-top: 14px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
.rank-board-head { display: flex; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; }
.rank-board-head span:last-child { color: var(--text-dim); font-weight: 500; }
.rank-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.rank-board .rank-row { padding: 13px 18px; }
.rank-board .rank-row { transition: background .15s, transform .15s; }
.rank-board .rank-row:hover { background:#fafbfe; transform:translateX(3px); }
.rank-row.current { background: #f5f8ff; }
.rank-row:last-child { border-bottom: none; }
.rank-no { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 800; background: #eef1f7; color: var(--text-dim); }
.rank-no.top1 { background: linear-gradient(135deg,#f7b733,#f5a623); color:#fff; }
.rank-no.top2 { background: linear-gradient(135deg,#a7b0c4,#8b98b8); color:#fff; }
.rank-no.top3 { background: linear-gradient(135deg,#d99a6c,#c47f4e); color:#fff; }
.rank-name { flex: 1; font-weight: 600; }
.rank-pts { color: var(--gold); font-weight: 800; }
@media (max-width: 720px) {
  .rank-head { align-items: center; }
  .rank-podium { grid-template-columns: 1fr; padding-top: 34px; }
  .podium-card, .podium-card.rank-1, .podium-card.rank-2, .podium-card.rank-3 { min-height: 175px; }
  .podium-card.rank-1 { order: 1; }
  .podium-card.rank-2 { order: 2; }
  .podium-card.rank-3 { order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .podium-card, .podium-crown, .podium-card.rank-1::after, .podium-sparkles i { animation:none !important; }
  .podium-card, .podium-card .rank-avatar, .rank-board .rank-row { transition:none !important; }
}

/* 幸运转盘 */
.wheel-page { max-width: 1120px; }
.wheel-head { display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px; }
.wheel-head h1 { font-size:24px;margin-bottom:5px; }
.wheel-head p { color:var(--text-dim);font-size:14px; }
.wheel-balance { padding:9px 13px;background:#fff;border:1px solid var(--border);border-radius:8px;text-align:right; }
.wheel-balance span { display:block;color:var(--text-dim);font-size:11px; }
.wheel-balance strong { color:var(--gold);font-size:18px; }
.wheel-layout { display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start; }
.wheel-stage { position:relative;min-height:600px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);overflow:hidden; }
.wheel-stage::before { content:"";position:absolute;width:min(560px,86vw);aspect-ratio:1;border-radius:50%;border:1px solid #eef1f7;box-shadow:0 0 45px rgba(59,110,246,.08);pointer-events:none; }
.wheel-lights { position:absolute;z-index:2;width:min(512px,77vw);aspect-ratio:1;border-radius:50%;pointer-events:none; }
.wheel-lights i { --count:18;position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#dce2ed;box-shadow:0 0 0 2px #fff;transform:rotate(calc(var(--i) * 360deg / var(--count))) translateY(calc(min(256px,38.5vw) * -1));animation:wheelLight 1.35s linear infinite;animation-delay:calc(var(--i) * -.075s); }
.wheel-disc { position:relative;z-index:1;width:min(480px,72vw);aspect-ratio:1;border-radius:50%;border:12px solid #fff;box-shadow:0 0 0 2px var(--border),inset 0 0 0 1px rgba(255,255,255,.72),0 18px 45px rgba(27,34,51,.16);transition:transform 4.2s cubic-bezier(.12,.62,.08,1);overflow:hidden; }
.wheel-disc::before { content:"";position:absolute;z-index:1;inset:-25%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.32) 49%,transparent 60%);transform:translateX(-75%) rotate(8deg);pointer-events:none; }
.wheel-label { position:absolute;z-index:2;left:50%;top:50%;width:50%;height:28px;transform-origin:0 50%;display:flex;align-items:center;justify-content:flex-end;padding-right:35px;color:#fff;font-size:13px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.28); }
.wheel-label span { display:block;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.wheel-pointer { position:absolute;z-index:4;left:50%;top:38px;transform:translateX(-50%);width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:38px solid var(--danger);filter:drop-shadow(0 4px 5px rgba(229,72,77,.24)); }
.wheel-spin { position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:112px;height:112px;border:8px solid #fff;border-radius:50%;background:var(--primary);color:#fff;box-shadow:0 7px 20px rgba(27,34,51,.22); }
.wheel-spin span,.wheel-spin small { display:block; }
.wheel-spin span { font-size:16px;font-weight:800; }
.wheel-spin small { margin-top:3px;font-size:10px;opacity:.85; }
.wheel-spin:disabled { background:#aab2c2; }
.wheel-empty { position:absolute;inset:0;display:grid;place-items:center;color:var(--text-dim); }
.wheel-side { display:grid;gap:16px; }
.wheel-prize-row { display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border); }
.wheel-prize-row:last-child { border-bottom:0; }
.wheel-prize-row i { width:10px;height:10px;border-radius:3px; }
.wheel-prize-row span { font-size:14px; }
.wheel-prize-row strong { color:var(--gold);font-size:12px; }
.wheel-log-row { display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border); }
.wheel-log-row:last-child { border-bottom:0; }
.wheel-log-row strong,.wheel-log-row span { display:block;font-size:13px; }
.wheel-log-row span,.wheel-log-row small { color:var(--text-dim);font-size:11px; }
.wheel-log-toggle { width:100%;height:38px;margin-top:8px;border:0;border-top:1px solid var(--border);background:#fff;color:var(--primary);font-size:12px;font-weight:700; }
.wheel-log-toggle:hover { background:#f7f9fc; }
.wheel-log-toggle span { display:inline-block;margin-left:5px;font-size:14px; }
.wheel-result-modal { max-width:360px;text-align:center; }
.wheel-result-modal { position:relative;overflow:hidden;animation:wheelResultIn .28s cubic-bezier(.2,.8,.2,1); }
.wheel-result-icon { width:62px;height:62px;display:grid;place-items:center;margin:0 auto 12px;border-radius:50%;background:#fff4e0;color:var(--gold);font-size:30px; }
.wheel-result-icon { animation:wheelResultIcon .55s cubic-bezier(.2,.9,.25,1.3); }
.wheel-result-modal p { color:var(--text-dim);margin:0 0 20px; }
.wheel-confetti { position:absolute;z-index:3;left:50%;top:66px;width:8px;height:14px;border-radius:2px;pointer-events:none;animation:wheelConfetti .9s ease-out var(--d) both; }
.wheel-stage.is-spinning .wheel-pointer { animation:wheelPointerTick .16s ease-in-out infinite alternate; }
.wheel-stage.is-spinning .wheel-disc::before { animation:wheelSweep .7s linear infinite; }
.wheel-stage.is-spinning .wheel-lights i { animation-duration:.45s; }
@keyframes wheelLight { 0%,35% { background:#dce2ed;box-shadow:0 0 0 2px #fff; } 50%,75% { background:#f5a623;box-shadow:0 0 0 2px #fff,0 0 9px rgba(245,166,35,.8); } 100% { background:#dce2ed;box-shadow:0 0 0 2px #fff; } }
@keyframes wheelPointerTick { from { transform:translateX(-50%) rotate(-4deg);transform-origin:50% 0; } to { transform:translateX(-50%) rotate(4deg);transform-origin:50% 0; } }
@keyframes wheelSweep { from { transform:translateX(-90%) rotate(8deg); } to { transform:translateX(90%) rotate(8deg); } }
@keyframes wheelResultIn { from { opacity:0;transform:translateY(12px) scale(.96); } to { opacity:1;transform:none; } }
@keyframes wheelResultIcon { 0% { transform:scale(.5) rotate(-18deg); } 65% { transform:scale(1.14) rotate(5deg); } 100% { transform:none; } }
@keyframes wheelConfetti { 0% { opacity:1;transform:translate(0,0) rotate(0); } 100% { opacity:0;transform:translate(var(--x),120px) rotate(var(--r)); } }
@media (max-width:900px) { .wheel-layout{grid-template-columns:1fr}.wheel-stage{min-height:540px}.wheel-side{grid-template-columns:1fr 1fr} }
@media (max-width:640px) { .wheel-stage{min-height:430px}.wheel-disc{width:min(360px,84vw);border-width:8px}.wheel-lights{width:min(386px,90vw)}.wheel-lights i{transform:rotate(calc(var(--i) * 360deg / var(--count))) translateY(calc(min(193px,45vw) * -1));width:7px;height:7px}.wheel-pointer{top:28px}.wheel-spin{width:92px;height:92px;border-width:6px}.wheel-label{padding-right:22px;font-size:11px}.wheel-side{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce) { .wheel-lights i,.wheel-result-modal,.wheel-result-icon,.wheel-confetti,.wheel-stage.is-spinning .wheel-pointer,.wheel-stage.is-spinning .wheel-disc::before{animation:none!important} }

/* 空态 */
.empty { text-align: center; color: var(--text-dim); padding: 44px 0; font-size: 14px; }

/* Toast */
#toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast-item {
  background: #1b2233; color: #fff; padding: 11px 20px; border-radius: 10px;
  font-size: 14px; box-shadow: var(--shadow-lg); animation: toastIn .2s ease;
}
.toast-item.err { background: var(--danger); }
.toast-item.ok { background: var(--success); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* 弹窗 */
.modal-mask { position: fixed; inset: 0; background: rgba(27,34,51,.45); display: none; align-items: center; justify-content: center; z-index: 900; padding: 20px; }
.modal-mask.show { display: flex; }
.modal { background: #fff; border-radius: 16px; max-width: 480px; width: 100%; padding: 26px; box-shadow: var(--shadow-lg); max-height: 88vh; overflow: auto; }
.modal h3 { font-size: 18px; margin-bottom: 18px; }
.announcement-modal { max-width: 520px; }
.announcement-content { min-height: 70px; padding: 4px 0 24px; color: var(--text); line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.announcement-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }

/* 登录页 */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { width: 100%; max-width: 420px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg); padding: 34px 30px; }
.auth-card h1 { font-size: 24px; text-align: center; margin-bottom: 6px; }
.auth-card .sub { text-align: center; color: var(--text-dim); font-size: 13.5px; margin-bottom: 24px; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 22px; background: #f2f5fc; padding: 5px; border-radius: 12px; }
.auth-tabs button { flex: 1; padding: 10px; border: none; background: transparent; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text-dim); }
.auth-tabs button.on { background: #fff; color: var(--primary); box-shadow: var(--shadow); }
.captcha-field { display:grid;grid-template-columns:minmax(0,1fr) 146px;gap:10px;align-items:center; }
.captcha-field input { min-width:0;text-transform:uppercase;letter-spacing:2px; }
.captcha-image { width:146px;height:48px;padding:0;border:1px solid var(--border);border-radius:9px;background:#f2f5fc;overflow:hidden;line-height:0; }
.captcha-image img { display:block;width:100%;height:100%;object-fit:cover; }
.captcha-image:hover { border-color:#b9c6e5; }

/* 余额卡 */
.balance-card { background: linear-gradient(135deg, var(--primary), #6d5cf6); color: #fff; border: none; }
.balance-card .bal-label { opacity: .85; font-size: 13px; }
.balance-card .bal-num { font-size: 34px; font-weight: 800; margin: 6px 0 2px; }

/* 积分商城 */
.shop-page { max-width: 1180px; }
.shop-head { display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:18px;padding:20px 22px;background:#fff;color:var(--text);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow); }
.shop-head h1 { font-size:22px;margin:0 0 4px; }
.shop-head p { color:var(--text-dim);font-size:13px; }
.shop-balance { min-width:190px;padding:2px 0 2px 22px;border-left:1px solid var(--border);background:transparent;color:var(--text);display:flex;flex-direction:column;justify-content:center; }
.shop-balance span, .shop-balance small { color: var(--text-dim); font-size: 12px; }
.shop-balance strong { color:var(--gold);font-size:25px;line-height:1.2;margin:2px 0; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.shop-search { flex: 1; max-width: 440px; }
.shop-search input { width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; outline: none; font-size: 14px; }
.shop-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,110,246,.1); }
.shop-filters { display: flex; gap: 6px; padding: 4px; background: #e9edf5; border-radius: 8px; }
.filter-btn { border: 0; background: transparent; color: var(--text-dim); padding: 7px 13px; border-radius: 6px; font-size: 13px; }
.filter-btn.on { background: #fff; color: var(--text); font-weight: 700; box-shadow: 0 1px 4px rgba(27,34,51,.08); }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shop-product { min-height: 290px; padding: 20px; background: #fff; border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 11px; box-shadow: var(--shadow); }
.shop-product { transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.shop-product:hover { transform:translateY(-3px);border-color:#d9dfeb;box-shadow:0 12px 25px rgba(27,34,51,.09); }
.product-top { display: flex; justify-content: space-between; align-items: center; }
.product-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: #e8efff; color: var(--primary); font-size: 18px; font-weight: 800; }
.product-mark svg { width:21px;height:21px; }
.stock-tag { padding: 3px 8px; background: #e5f8f0; color: var(--success); border-radius: 5px; font-size: 12px; font-weight: 700; }
.stock-tag.sold { background: #eef1f7; color: var(--text-dim); }
.shop-product .name { font-size: 17px; font-weight: 800; }
.shop-product .desc { color: var(--text-dim); font-size: 13px; flex: 1; white-space: pre-wrap; }
.product-cost { display: flex; align-items: baseline; gap: 5px; color: var(--gold); }
.product-cost strong { font-size: 24px; }
.product-cost span { font-size: 12px; }
.shop-empty { grid-column: 1 / -1; background: #fff; border: 1px dashed var(--border); border-radius: 8px; }
.order-section { margin-top: 28px; border-radius: 8px; }
.order-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.4fr) auto; align-items: center; gap: 22px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.order-row:last-child { border-bottom: 0; }
.order-main { min-width: 0; }
.order-main strong { display: block; margin-bottom: 3px; font-size: 15px; }
.order-id { margin-top: 3px; color: #9aa3b5; font-size: 11px; font-family: Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-meta { display: flex; align-items: flex-end; flex-direction: column; gap: 7px; text-align: right; }
.order-cost { color: var(--gold); font-weight: 700; font-size: 13px; }
.order-status { min-width: 58px; padding: 3px 8px; border-radius: 5px; background: #eef1f7; color: var(--text-dim); font-size: 12px; font-weight: 700; text-align: center; }
.order-status.completed { background: #e5f8f0; color: var(--success); }
.order-status.canceled { background: #fdeaeb; color: var(--danger); }
.order-delivery { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.order-delivery > span { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.order-delivery code { min-width: 0; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: #f6f8fc; color: var(--text); font-family: Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-delivery.empty-delivery { display: block; }
.exchange-summary { margin-bottom: 16px; border-top: 1px solid var(--border); }
.exchange-modal { max-width:440px; }
.exchange-modal-head { display:grid;grid-template-columns:46px minmax(0,1fr) 32px;align-items:center;gap:12px;margin-bottom:20px; }
.exchange-modal-head h3 { margin:0 0 2px; }
.exchange-modal-head p { color:var(--text-dim);font-size:12px; }
.exchange-summary > div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.exchange-summary span { color: var(--text-dim); font-size: 13px; }
.exchange-summary strong { font-size:14px; }
.exchange-summary > div:nth-child(2) strong { color:var(--gold);font-size:18px; }
.exchange-summary > div:nth-child(3) strong { color:var(--success); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.order-status-select { min-width: 92px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: #fff; }
.order-search-bar { display: grid; grid-template-columns: minmax(240px, 1fr) 150px auto; gap: 10px; align-items: center; margin-bottom: 16px; }
.order-search-bar input, .order-search-bar select { width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--border); border-radius: 8px; background: #fafbfe; color: var(--text); outline: none; }
.order-search-bar input:focus, .order-search-bar select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,110,246,.1); background: #fff; }
.settings-switch-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.settings-switch { min-height:72px;padding:13px 14px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--border);border-radius:8px;background:#fafbfe;cursor:pointer; }
.settings-switch span { min-width:0; }
.settings-switch strong,.settings-switch small { display:block; }
.settings-switch strong { font-size:14px; }
.settings-switch small { margin-top:3px;color:var(--text-dim);font-size:11px; }
.settings-switch input { position:absolute;opacity:0;pointer-events:none; }
.settings-switch i { position:relative;width:40px;height:22px;flex:0 0 auto;border-radius:12px;background:#c9cfda;transition:background .18s; }
.settings-switch i::after { content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(27,34,51,.2);transition:transform .18s; }
.settings-switch input:checked+i { background:var(--success); }
.settings-switch input:checked+i::after { transform:translateX(18px); }
@media (max-width: 820px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .settings-switch-grid { grid-template-columns:1fr; }
  .shop-head { align-items:flex-start;flex-direction:column;padding:18px;gap:13px; }
  .shop-balance { width:100%;min-width:0;padding:12px 0 0;border-left:0;border-top:1px solid var(--border); }
  .shop-toolbar { align-items: stretch; flex-direction: column; }
  .shop-search { max-width: none; }
  .shop-grid { grid-template-columns: 1fr; }
  .order-row { grid-template-columns: 1fr; gap: 12px; }
  .order-meta { align-items: center; flex-direction: row; justify-content: space-between; width: 100%; }
  .order-delivery { grid-template-columns: auto minmax(0, 1fr) auto; }
  .order-search-bar { grid-template-columns: 1fr; }
}

@media (max-width:720px) {
  body { overflow-x:hidden;padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
  .topbar { height:58px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:none; }
  .topbar .brand { font-size:16px;white-space:nowrap; }
  .topbar .userbox { min-width:0;gap:3px; }
  .topbar .userbox .pts { display:none; }
  .topbar-tools { gap:0; }
  .topbar-icon { width:32px;height:32px; }
  .user-menu-trigger { max-width:122px;padding:5px 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
  .topbar .menu { position:fixed;top:auto;left:0;right:0;bottom:0;z-index:200;height:calc(64px + env(safe-area-inset-bottom));padding:5px max(8px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:flex;align-items:stretch;justify-content:space-around;gap:2px;background:rgba(255,255,255,.96);border-top:1px solid var(--border);box-shadow:0 -5px 20px rgba(27,34,51,.08);backdrop-filter:blur(12px); }
  .topbar .menu a { min-width:52px;flex:1;padding:4px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:7px;font-size:10px;line-height:1.2; }
  .topbar .menu a svg { display:block; }
  .topbar .menu a.active { background:transparent;color:var(--primary); }
  .topbar .menu a.active svg { stroke-width:2.3; }
  .container { width:100%;padding:18px 14px 42px; }
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  .card { padding:17px;border-radius:10px; }
  .home-summary { grid-template-columns:1fr;grid-template-areas:"balance" "ad" "redeem"; }
  .home-action-grid { grid-template-columns:1fr; }
  .home-balance-card,.home-redeem-card { min-height:158px;padding:21px; }
  .home-redeem-form { grid-template-columns:1fr; }
  .home-action-grid .product-card { min-height:148px;padding:19px; }
  .home-official-ad { grid-template-columns:40px minmax(0,1fr);gap:12px;margin-top:0;padding:15px; }
  .home-official-ad-icon { width:40px;height:40px; }
  .home-official-ad > .btn { grid-column:1 / -1;width:100%; }
  .modal-mask { align-items:flex-end;padding:10px; }
  .modal { max-height:90vh;padding:20px 18px;border-radius:12px 12px 8px 8px; }
  .community-head,.rank-head,.wheel-head { align-items:stretch;flex-direction:column;gap:10px; }
  .community-post-access { justify-content:space-between; }
  .community-board-toolbar { align-items:stretch;flex-direction:column; }
  .community-search { width:100%; }
  .wheel-balance { width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left; }
  .wheel-stage { min-height:390px; }
  .wheel-disc { width:min(326px,82vw); }
  .wheel-lights { width:min(350px,88vw); }
  .wheel-lights i { transform:rotate(calc(var(--i) * 360deg / var(--count))) translateY(calc(min(175px,44vw) * -1)); }
  .wheel-pointer { top:25px; }
  .shop-toolbar { align-items:stretch;flex-direction:column; }
  .shop-search { max-width:none; }
  .shop-filters { width:100%;overflow-x:auto; }
  .filter-btn { flex:1;white-space:nowrap; }
  .order-delivery { grid-template-columns:1fr;align-items:stretch; }
  .auth-wrap { align-items:flex-start;padding:20px 14px; }
  .auth-card { margin-top:4vh;padding:25px 20px;border-radius:12px; }
}

@media (min-width:721px) {
  .topbar .menu { position:static;display:flex;align-items:center; }
}

@media (max-width:380px) {
  .captcha-field { grid-template-columns:minmax(0,1fr) 126px; }
  .captcha-image { width:126px; }
  .topbar .menu a { min-width:46px; }
  .wheel-stage { min-height:350px; }
  .wheel-disc { width:292px; }
  .wheel-lights { width:312px; }
  .wheel-lights i { transform:rotate(calc(var(--i) * 360deg / var(--count))) translateY(-156px); }
}