@import url('./tokens.css');
/* 页面：比赛（源自 MasterGo DSL iPhone 13&14 - 1）
   - 所有颜色/阴影/字体尽量使用 tokens 变量（见 tokens.css 注释中的 token 标识）
*/
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--text-base);font-family:var(--font-default)}
.app{width:390px;min-height:844px;position:relative;background:var(--bg-grad);box-shadow:0 12px 36px rgba(0,0,0,0.06);overflow:hidden}

/* 状态栏 */
.status-bar{height:47px;background:var(--statusbar-bg);display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--divider);z-index:10;position:relative}
.status-bar .time{font-weight:700;font-size:14px;color:#000}
.status-bar .sb-icons{display:flex;align-items:center;gap:8px}
.status-bar .sb-icon{display:block}

/* 顶部工具栏（与 2.css 一致） */
.topbar { display:flex; align-items:center; gap:12px; padding:8px 20px; }
.icon-btn { appearance:none; border:none; background:transparent; padding:0; cursor:pointer; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#272536; }
.ios-icon { color:#231F20; }
.topbar .icon-btn.ios-icon{ color:#0B1F86; }
.search-pill { flex:1; height:32px; border-radius:16px; background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06); display:flex; align-items:center; padding:0 12px; color:#9ca3af; }
.search-pill .placeholder{font-size:13px}

/* 顶部 Tabs（对齐 2.css） */
.tabs { display:flex; align-items:center; gap:30px; padding:8px 20px; overflow-x:auto; }
.tab { padding:6px 0; border:none; background:transparent; color: var(--tab); font-size:16px; cursor:pointer; }
.tabs .current { color: #000; position:relative; font-weight:600; }
.tabs .current::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; background:#3B7CFF; border-radius:2px; }

/* 商城页 · 三圆快捷入口 */
.store-entries{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 12px 20px 8px; }
.store-entries .entry{ background:transparent; border:none; color: var(--tab); padding:6px 0; font-size:13px; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; }
.store-entries .entry-circle{ width:62px; height:62px; border-radius:31px; box-shadow: var(--shadow-card); display:grid; place-items:center; }
.store-entries .entry-icon{ width:30px; height:30px; display:block; margin:auto; stroke:#000000; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.store-entries .entry-label{ font-size:13px; color: var(--tab); line-height:1 }
/* 渐变与描边配色（参照示意） */
.store-entries .entry-green{ background: linear-gradient(180deg,#D7F9E7 0%, #B9EFCF 100%); }
.store-entries .entry-blue{ background: linear-gradient(180deg,#E9F1FF 0%, #D0E2FF 100%); }
.store-entries .entry-purple{ background: linear-gradient(180deg,#ECE6FF 0%, #DED4FF 100%); }
.store-entries .entry-green .entry-icon{ stroke:#059669; }
.store-entries .entry-blue .entry-icon{ stroke:#1E40AF; }
.store-entries .entry-purple .entry-icon{ stroke:#6D28D9; }

/* 校园页 · 圆形快捷入口（复用课程页视觉，局部命名空间以避免冲突） */
.campus-entries{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 12px 20px 10px; }
.campus-entries .entry{ background:transparent; border:none; color: var(--tab); padding:8px 0; font-size:14px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.campus-entries .entry-circle{ width:56px; height:56px; border-radius:28px; box-shadow: var(--shadow-card); display:grid; place-items:center; }
.campus-entries .entry-icon{ width:28px; height:28px; display:block; margin:auto; stroke:#000000; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.campus-entries .entry-label{ font-size:13px; color: var(--tab); }
/* 渐变与描边配色（参考截图） */
.campus-entries .entry-blue{ background: linear-gradient(180deg,#E9F1FF 0%, #D0E2FF 100%); }
.campus-entries .entry-orange{ background: linear-gradient(180deg,#FFE7D2 0%, #FFC796 100%); }
.campus-entries .entry-cyan{ background: linear-gradient(180deg,#E7FBFF 0%, #CFF3FF 100%); }
.campus-entries .entry-green{ background: linear-gradient(180deg,#D7F9E7 0%, #B9EFCF 100%); }
.campus-entries .entry-blue .entry-icon{ stroke:#1E40AF; }
.campus-entries .entry-orange .entry-icon{ stroke:#B45309; }
.campus-entries .entry-cyan .entry-icon{ stroke:#0284C7; }
.campus-entries .entry-green .entry-icon{ stroke:#059669; }

/* 轮播 */
.section{padding:14px 20px}
.carousel .carousel-cover{height:164px;border-radius:8px;background:#E2E5EB center/cover no-repeat;position:relative}
.carousel .carousel-title{position:absolute;left:8px;top:6px;font-weight:600;color:#3D3D3D}
.dots{display:flex;gap:8px;justify-content:center;margin-top:8px}
.dot{width:32px;height:4px;border-radius:2px;background:#fff;opacity:.4}
.dot.active{opacity:1}

/* 分区标题栏（与 2.css 对齐） */
.section-header { display:flex; align-items:flex-end; justify-content:space-between; padding: 0 0 10px; }
.section-header .more { color: var(--text-base); font-size:13px; text-decoration:none; }
.section-header .section-title { margin:0; font-size:16px; font-weight:700; color:var(--tab); }

/* 热门赛事 宫格（左文右图） */
.hot-cards .section-title{margin:0;font-weight:700;color:var(--tab);font-size:14px}
.hot-cards .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gcard{background:var(--card);border-radius:6px;padding:12px;display:grid;grid-template-columns:1fr 56px;gap:10px;box-shadow:var(--shadow-weak)}
.gtitle{margin:2px 0 6px;font-size:13px;color:#1F2937;/* token: paint_13:08463 */}
.gstatus{font-size:10px; display:inline-block; padding:2px 6px; border:1px solid currentColor; border-radius:999px; line-height:1.2; background:transparent}
.gstatus-green{color:#166534;/* token: paint_13:16755 */}
.gstatus-blue{color:#1E40AF;/* token: paint_13:16822 */}
.gimg{width:56px;height:56px;border-radius:4px;background:#E2E5EB center/cover no-repeat}

/* 热门运动（横向 3 卡） */
.sports .section-title{margin:0;font-weight:700;color:var(--tab);font-size:14px}
.sports .cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.card.tall{background:#fff;border-radius:6px;padding:8px;box-shadow:var(--shadow-weak)}
.card.tall .thumb{width:100%;height:98px;border-radius:6px;background:#E2E5EB center/cover no-repeat;position:relative}
.card.tall .thumb .meta{position:absolute;top:6px;right:6px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.card.tall .thumb .meta .tag{font-size:10px;color:#fff;background:rgba(0,0,0,0.45);padding:2px 6px;border-radius:999px;line-height:1.2;white-space:nowrap}
.card.tall .label{margin-top:6px;font-size:12px;color:#3D3D3D}
.label:empty{display:none}

/* 团建活动推荐 */
.team .section-title{margin:0;font-weight:700;color:var(--tab);font-size:14px}
.team .cards{display:grid;grid-template-columns:repeat(3, 1fr);gap:6px}
.team .card{background:#fff;border-radius:6px;padding:8px;width:auto}
.team .thumb{width:100%;height:63px;border-radius:6px;background:#E2E5EB center/cover no-repeat}
.team .label{margin-top:6px;font-size:12px;color:#3D3D3D}
.team .label:empty{display:none}

/* 底部品牌水印（已移除） */

/* 校园动态 Feed */
.feed .post{background:#fff;border-radius:10px;box-shadow:var(--shadow-weak);overflow:hidden;margin-bottom:14px}
.feed .thumb{width:100%;height:180px;background:#E2E5EB center/cover no-repeat}
/* 取景校正：通过偏移背景对齐+微放大裁掉水印（适用于任意缩略图容器） */
.rm-wm-1{background-position:66% 38% !important;background-size:112% !important}
.rm-wm-2{background-position:62% 44% !important;background-size:116% !important}
.feed .body{padding:10px 12px}

/* 更强的放大，用于 campus-badminton-2 的特殊处理 */
.rm-wm-2.zoom { background-size: 150% !important; background-position: 55% 44% !important; }
.feed .text{margin:0 0 8px 0;font-size:14px;line-height:1.6;color:#26262C}
.feed .meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#91929F}
.feed .left{display:flex;align-items:center;gap:8px}
.feed .right{display:flex;align-items:center;gap:6px;color:#91929F}
.feed .avatar{width:22px;height:22px;border-radius:50%;background:#DBEAFE;color:#0B1F86;display:grid;place-items:center;font-weight:700;font-size:12px}
.feed .author{color:#3D3D3D}
.feed .dot{color:#C0C4CC}
.feed .icon{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* 商城 · 卡片与列表 */
.store .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 20px}
.store .card{background:transparent;border:none;padding:0}
.store .thumb{position:relative;width:100%;height:120px;border-radius:12px;background:#E2E5EB center/cover no-repeat;overflow:hidden}
.store .label{margin-top:8px;font-size:13px;color:#3D3D3D;text-align:center}
.store .ribbon{position:absolute;left:6px;top:16px;background:rgba(219,234,254,0.95);color:#0B1F86;font-size:10px;padding:4px 8px;border-top-right-radius:12px;border-bottom-right-radius:12px;max-width:72%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store .ribbon.alt{background:#F6E6E3;color:#5B2B22}
.store .thumb .r1{ top:6px; }
.store .thumb .r2{ top:18px; }
.store .thumb .r3{ top:20px; }
.store .price{position:absolute;right:6px;bottom:6px;color:#0B1F86;font-weight:700;font-size:13px;background:rgba(219,234,254,0.95);padding:3px 6px;border-radius:10px;line-height:1;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.store .price .unit{font-weight:600;font-size:11px;margin-left:3px;color:#0B1F86;opacity:.95}

.seckill .list{display:flex;flex-direction:column;gap:12px;padding:0 20px 80px}
.seckill .row{display:flex;gap:12px;background:#fff;border-radius:12px;box-shadow:var(--shadow-weak);overflow:hidden;padding:10px}
.seckill .img{width:100px;height:100px;border-radius:10px;background:#E2E5EB center/cover no-repeat;flex-shrink:0}
.seckill .info{display:flex;flex-direction:column;gap:4px;justify-content:center}
.seckill .name{margin:0;font-size:16px;font-weight:600;color:#1F2937;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seckill .sub{font-size:11.5px;color:#7F8791}
.seckill .buy{display:flex;align-items:center;gap:10px;margin-top:2px}
.seckill .buy .p{color:#1F2937;font-weight:700;font-size:16px;line-height:1}
.seckill .buy .btn{padding:6px 12px;border:none;border-radius:14px;background:#1E40AF;color:#fff;font-size:12.5px}

/* TabBar */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:50px;background:var(--color-tabbar-bg);/* token: paint_13:12803 */display:flex;align-items:center;justify-content:space-around;border-top:1px solid transparent}
.tabbar .tab{display:flex;flex-direction:column;align-items:center;gap:4px;color:#3D3D3D;font-size:12px}
.tabbar .tab .tab-icon{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar .tab .tab-icon{vector-effect:non-scaling-stroke}

/* Blue circular background for AI tab */
.tab .tab-icon.tab-ai,
.tabbar-item svg.tab-ai,
.tabbar-item .tab-icon.tab-ai {
   display: inline-grid;
   place-items: center;
   width: 44px !important;
   height: 44px !important;
   border-radius: 50%;
   background: linear-gradient(180deg, #E9F1FF 0%, #D0E2FF 100%);
   color: var(--tab);
   padding: 8px;
   box-sizing: border-box;
   /* configurable via --tab-ai-shift */
   transform: translateY(var(--tab-ai-shift));
}
.tab .tab-icon.tab-ai *,
.tabbar-item svg.tab-ai * {
   stroke: currentColor !important;
   fill: currentColor !important;
   vector-effect: non-scaling-stroke;
}
.tab .tab-icon.tab-ai + .tab-link,
.tab .tab-icon.tab-ai + span,
.tabbar-item svg.tab-ai + .tab-link,
.tabbar-item svg.tab-ai + span,
.tabbar-item .tab-icon.tab-ai + .tab-link,
.tabbar-item .tab-icon.tab-ai + span {
   display:inline-block;
   transform: translateY(var(--tab-ai-shift));
}

.tabbar { overflow: visible; }
.tabbar .tab.active{color:#1E40AF}

/* Toast 提示 */
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(12px); background: rgba(0,0,0,0.8); color: #fff; padding: 8px 12px; border-radius: 16px; font-size: 12px; opacity: 0; pointer-events: none; z-index: 1000; backdrop-filter: blur(2px); }
.toast.show { animation: toast-in 120ms ease-out forwards, toast-out 200ms ease-in 1800ms forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(-50%) translateY(12px); } }