/* High-fidelity page styles (implements MasterGo DSL visuals)
	 This file complements `tokens.css` which defines color/font tokens.
*/
html,body{
	height:100%;
	margin:0;
	font-family:var(--font-default);
	color:var(--text-base);
	background:var(--color-white); /* 页面外围为白色 */
}

.phone{
	width:390px;
	height:844px; /* match iPhone canvas height from DSL */
	margin:18px auto;
	background:var(--bg-grad); /* 手机画布保留渐变 */
	/* match index.html canvas shadow */
	box-shadow:0 12px 36px rgba(0,0,0,0.06);
	border-radius:0; /* match index canvas (no rounded outer container) */
	overflow:hidden;
	position:relative; /* contain absolute tabbar */
}

/* 状态栏：浅蓝背景（来自 DSL） */
.status-bar{
	height:44px;
	background:var(--statusbar-bg);
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0 12px;
	box-sizing:border-box;
	position:sticky; /* keep top fixed while middle scrolls */
	top:0;
	z-index:3;
}
.status-bar .time{
	font-size:14px;
	color:var(--text-base);
	font-weight:600;
}
.sb-icons{display:flex;gap:8px;align-items:center}
.sb-icon{opacity:0.95}

.screen{
	background:transparent;
	padding:12px 18px 110px; /* leave space for tabbar */
	height:calc(844px - 44px); /* full phone minus status bar */
	overflow:auto; /* make middle content scrollable */
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none; /* Firefox */
	-ms-overflow-style:none; /* IE 10+ */
}
.screen::-webkit-scrollbar{display:none} /* hide scrollbar on WebKit */

.topline{display:flex;justify-content:flex-end;padding:6px 0}
.topline .cart{font-size:13px;color:var(--muted-2)}

.profile{display:flex;gap:12px;align-items:center;padding:6px 0}
.profile-left .avatar-placeholder{width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--card);display:flex;align-items:center;justify-content:center}
.profile-left img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.profile-right{flex:1;display:flex;gap:8px;margin-left:20px}
.col{display:flex;flex-direction:column;gap:6px}
.info-item{display:flex;gap:6px;align-items:center}
.label{font-size:13px;color:var(--muted-2);min-width:44px}
/* 右列（col-right）中的标签（例如 “学校”、“关注”）向右微移 8px（在之前基础上再右移 4px） */
.profile-right .col-right .info-item .label{margin-left:8px}
.value{font-size:14px;color:var(--text-base);font-weight:600}

.hr{height:10px;background:transparent;margin:12px 0;border-top:1px solid rgba(0,0,0,0.04)}

.order-status{display:flex;gap:6px;justify-content:space-between;padding:6px 0}
.order-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px;background:rgba(255,255,255,0.6);border-radius:8px}
.order-item .icon{width:32px;height:32px;color:var(--tab);margin-bottom:6px}
.order-item .text{font-size:12px;color:var(--muted-2)}

.menu{margin-top:6px}
.menu-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--card);border-radius:8px;margin-bottom:8px;box-shadow:var(--shadow-weak)}
.menu-item span{font-size:15px;color:var(--text-base)}
.menu-item .right{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--muted-2)}
/* 缩小菜单项右侧的 ">" 箭头 */
.menu-item .chevron{width:10px;height:16px;display:block}
.menu-item .chevron path{stroke-width:1.2}
.divider{height:12px}

/* 去掉菜单中作为链接的项的下划线（例如设置链接）并继承颜色 */
.menu a.menu-item{ text-decoration:none; color:inherit }

.tabbar{position:absolute;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;overflow:visible;z-index:4}
.tabbar-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:#3D3D3D;font-size:12px;text-decoration:none;padding:6px 0}
.tabbar-item svg.tab-icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar-item.active{color:var(--tab-active)}

/* highlight AI icon vertical shift if present */
.tabbar-item .tab-ai{transform:translateY(var(--tab-ai-shift, -18px));}

/* Circular background & fill for AI tab (match index.html) */
.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); /* match tab label color for softer UI */

	padding: 8px;
	box-sizing: border-box;
	transform: translateY(var(--tab-ai-shift, -18px));
}
.tabbar-item svg.tab-ai *,
.tabbar-item .tab-icon.tab-ai * {
	stroke: currentColor !important;
	fill: currentColor !important;
	vector-effect: non-scaling-stroke;
}

/* Move AI label up to align with other tab labels (works for <span> or .tab-link) */
.tabbar-item svg.tab-ai + span,
.tabbar-item svg.tab-ai + .tab-link,
.tabbar-item .tab-icon.tab-ai + span,
.tabbar-item .tab-icon.tab-ai + .tab-link {
	display: inline-block;
	/* 与其他样式保持一致：使用相同的垂直偏移变量，使标签与图标同步移动 */
	transform: translateY(var(--tab-ai-shift));
	/* 确保标签可见且颜色与其他 tab 一致 */
	color: var(--tab) !important;
}

/* small screens fallback */
@media (max-width:420px){
	.phone{transform:scale(0.95)}
}