@import url('./tokens.css');

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; display:flex; align-items:center; justify-content:center; background:#FFFFFF; color: var(--text-base); font-family: var(--font); }

.app { width:390px; min-height:844px; background: var(--bg-grad); display: grid; grid-template-rows: auto auto auto 1fr auto; box-shadow: 0 12px 36px rgba(0,0,0,0.06); }

/* 状态栏（对齐 1.html） */
.status-bar{height:47px;background:#C1DCFE;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}

/* Topbar */
.topbar { display:flex; align-items:center; gap:12px; padding:8px 20px; }
.icon-btn { appearance:none; border:none; background:transparent; padding:0; cursor:pointer; }
.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; }

/* Tabs */
.tabs { display:flex; align-items:center; gap:30px; padding:8px 20px; overflow-x:auto; }
.tabs .tab { padding:6px 0; border:none; background:transparent; color: var(--tab); font-size:16px; }
.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; }

/* Quick entries */
.quick-entries { display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 12px 20px 10px; }
.quick-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; }
.entry-circle{ width:56px; height:56px; border-radius:28px; box-shadow: var(--shadow-card); display:grid; place-items:center; }
.entry-icon{ width:28px; height:28px; stroke:#000000; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.entry-label{ font-size:13px; color: var(--tab); }
/* 渐变配色，参考截图 */
.entry-amber{ background: linear-gradient(180deg,#FFE7B8 0%, #FFD08B 100%); }
.entry-orange{ background: linear-gradient(180deg,#FFE7D2 0%, #FFC796 100%); }
.entry-violet{ background: linear-gradient(180deg,#E9ECFF 0%, #CFD6FF 100%); }
.entry-green{ background: linear-gradient(180deg,#D7F9E7 0%, #B9EFCF 100%); }

/* 为每个圆的图标设置更深同色描边，增强对比度 */
.entry-amber .entry-icon{ stroke:#7A4D00; }
.entry-orange .entry-icon{ stroke:#B45309; }
.entry-violet .entry-icon{ stroke:#4F46E5; }
.entry-green .entry-icon{ stroke:#059669; }

.section { padding: 8px 20px; }
.section-title { font-size:14px; color: var(--tab); margin: 0 0 10px; }

/* Video hero */
.video-hero { position: relative; width: 349px; height: 190px; border-radius: 12px; overflow: hidden; background: var(--color-video-bg); }
.video-hero .video-cover { position:absolute; inset:0; background-image:url('../images/d3ba064d5e49bfd589d070d7b0ecccbc.png'); background-size:cover; background-position:center; }
.play-btn { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:56px; height:56px; border-radius:50%; border:2px solid var(--color-overlay-stroke); background: var(--color-overlay); display:grid; place-items:center; }
.play-btn .triangle { width:0; height:0; border-left:18px solid var(--color-white); border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:4px; }

.video-meta { position:absolute; left:0; right:0; bottom:0; height:41px; background: var(--color-video-gradient); display:flex; align-items:center; justify-content:space-between; padding: 10px 12px; color: var(--color-white); }
.video-meta .progress { display:flex; align-items:center; gap:10px; flex:1; }
.video-meta .bar { position:relative; height:18px; flex:1; display:flex; align-items:center; }
.video-meta .bar-bg { position:absolute; left:0; right:0; height:3px; background: var(--color-progress-bg); border-radius:999px; }
.video-meta .bar-fg { position:absolute; left:0; height:3px; background: var(--color-white); border-radius:999px; }
.video-meta .bar-dot { position:absolute; top:3px; width:12px; height:12px; background: var(--color-white); border-radius:50%; }
.video-title { position:absolute; left:12px; top:12px; background: rgba(255,255,255,0.8); color: var(--color-text); padding: 2px 6px; border-radius: 6px; font-size:12px; }
.grid-btn { width:20px; height:20px; display:grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2,1fr); gap:4px; }
.grid-btn span { width:8px; height:8px; background: var(--color-white); display:block; }

/* Hot courses */
.section.hot { padding-top:14px; }
.section-header { display:flex; align-items:center; justify-content:space-between; padding: 0 2px 6px; }
.section-header .more { color: var(--color-text); font-size:12px; text-decoration:none; }

.course-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.course-card { display:flex; gap:12px; }
.course-card .thumb { width:127px; height:86px; border-radius:12px; background-size:cover; background-position:center; flex:none; }
.course-card .thumb.alt {
	background: #ddd;
	/* 让背景图片铺满缩略容器，消除留白 */
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}
.course-card .info { flex:1; min-width:0; }
.course-card .title { font-family: var(--font-title); font-size:14px; color: var(--color-title); margin:2px 0 6px; }
.course-card .meta { display:flex; align-items:center; gap:10px; color: var(--color-gray-600); }
.coach { display:flex; align-items:center; gap:6px; }
.avatar.i { width:16px; height:16px; border-radius:50%; background: var(--color-gray-600); display:inline-block; }
.rating { display:inline-flex; align-items:center; gap:4px; color: var(--color-gray-900); }
.rating .star { color: var(--color-yellow); }
.tag { font-size:12px; padding:4px 8px; border-radius:9999px; }
.tag-blue { background: var(--color-chip-blue-bg); color: var(--color-primary); }
.tag-green { background: var(--color-chip-green-bg); color: var(--color-green-700); }

/* Bottom tabbar */
/* 底部 TabBar（对齐 1.html） */
.tabbar{position:sticky; left:0; right:0; bottom:0; height:50px; background:rgba(208,228,255,0.55); display:flex; align-items:center; justify-content:space-around; border-top:1px solid transparent}
.tab{display:flex; flex-direction:column; align-items:center; gap:4px; color:#3D3D3D; font-size:12px}
.tabbar .tab.active{color:#1E40AF}
.tab span{font-size:12px}
.tab .tab-icon{stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* 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;
}

/* Move AI label up to align with other tab labels */
.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));
}

/* Allow AI icon to overflow the tabbar area */
.tabbar { overflow: visible; }

/* Toast 提示（与 3.css 风格一致） */
.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); } }