@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;font-family:var(--font);color:var(--text)}
.canvas{width:390px;min-height:844px;position:relative;background:var(--bg-grad);overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,0.06)}

/* 状态栏 */
.status-bar{height:47px;background:var(--statusbar-bg);display:flex;align-items:center;justify-content:space-between;padding:0 12px;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}

/* 顶部搜索与图标 */
.top-search-row{display:flex;align-items:center;gap:12px;padding:8px 12px}
.icon{display:grid;place-items:center}
.icon-btn{background:transparent;border:none;padding:0;cursor:pointer}
.ios-icon{color:#231F20}
.top-search-row .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)}

/* Tabs */
.tabs{display:flex;gap:30px;padding:22px 24px 0;color:#3D3D3D;font-size:16px}
.tabs span{padding-bottom:6px;cursor:pointer}
.tabs .active{color:#000;position:relative;font-weight:600}
.tabs .active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#3B7CFF;border-radius:2px}

/* 快捷按钮 + 标签 */
.quick-actions{display:flex;gap:29px;padding:12px 30px 0;justify-content:center}
.qa{display:flex;flex-direction:column;align-items:center;gap:8px}
.qa-circle{width:53px;height:53px;border-radius:26.5px;box-shadow:var(--shadow-card)}
.qa-blue{background:linear-gradient(180deg,#FFE7B8 0%, #FFD08B 100%)}
.qa-green{background:linear-gradient(180deg,#D7F9E7 0%, #B9EFCF 100%)}
.qa-violet{background:linear-gradient(180deg,#E9ECFF 0%, #CFD6FF 100%)}
.qa-pink{background:linear-gradient(180deg,#FFE7EF 0%, #FFD2DD 100%)}
.qa-circle .qa-icon{width:26px;height:26px;display:block;margin:13.5px auto 0 auto}
.qa-blue .qa-icon{stroke:#7A4D00;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qa-green .qa-icon{stroke:#059669;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qa-violet .qa-icon{stroke:#6B6EFB;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qa-pink .qa-icon{stroke:#ffffff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qa-label{font-size:12px;color:#3D3D3D}

.section{padding:8px 20px}
.section-title{font-size:14px;font-weight:600;color:var(--tab,#3D3D3D);margin:8px 0}

/* 食谱推荐 */
.recipes{display:flex;gap:12px}
.recipe-left{width:146px;height:122px;border-radius:20px;background:#d8d8d8 url('../images/59bbcbee61463d228eceda4ee244f318.png') center/cover no-repeat;box-shadow:var(--shadow-weak);position:relative}
.recipe-right{flex:1;display:flex;flex-direction:column;gap:12px}
.row{height:55px;border-radius:27px;background:#fff;box-shadow:var(--shadow-card);display:flex;align-items:center;gap:12px;padding:1px 12px}
.circle-img{width:52px;height:52px;border-radius:26px;background:var(--divider);background-image:var(--img);background-size:cover;background-position:center}
.row-text{flex:1;color:#3D3D3D;font-size:13px}
.chevron{opacity:.9}

/* 食谱左图角标文案 */
.recipe-left .recipe-badge{position:absolute;left:10px;bottom:8px;color:#fff;font-size:13px;font-weight:600;letter-spacing:.2px;text-shadow:0 1px 2px rgba(0,0,0,.45)}

/* 热门话题卡片 */
.section-topics .topic-card{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:20px;box-shadow:var(--shadow-weak);padding:16px;margin-top:16px}
.topic-card .thumb{width:122px;height:116px;border-radius:20px;background:#d8d8d8;background-image:var(--img);background-size:cover;background-position:center;flex:0 0 122px}
/* 信息列占满剩余宽度，允许文字正确收缩与省略 */
.topic-card .topic-info{flex:1;min-width:0;display:flex;flex-direction:column}
/* 标题：两行内展示，溢出省略；更紧的行高与更清晰的对比 */
.topic-title{font-size:18px;line-height:26px;color:var(--color-title);font-weight:700;letter-spacing:0.2px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
/* 副标题：一行省略，弱化颜色 */
.topic-sub{font-size:12px;line-height:18px;color:var(--muted-2);margin-top:4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;text-overflow:ellipsis;white-space:normal}
/* 描述：两行省略，收紧行距以适配卡片高度 */
.topic-desc{font-size:13px;line-height:20px;color:var(--text);margin-top:6px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}

/* 标题行：左标题 + 右侧“更多”链接（与 4.css 对齐） */
.row-title{display:flex;align-items:center;justify-content:space-between;padding:0 0;margin-top:16px}
.row-title .section-title{margin:0}
.action-link{color:var(--tab,#3D3D3D);text-decoration:none;font-size:11px;opacity:.9}
.action-link:active{opacity:1}

/* Tabbar */
.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}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;color:#3D3D3D;font-size:12px}
.tab.active{color:var(--tab-active)}
.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;
	/* raise the whole AI icon so it can overlap the tabbar (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 (works for <span> or .tab-link) */
.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 & Modal ===== */
.toast{position:absolute;left:50%;bottom:90px;transform:translateX(-50%) translateY(10px);background:rgba(0,0,0,0.82);color:#fff;padding:8px 12px;border-radius:10px;font-size:12px;line-height:1;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;box-shadow:0 4px 12px rgba(0,0,0,0.25)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal.hidden{display:none}
.modal{position:absolute;inset:0;background:rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{width:84%;max-width:320px;background:#fff;border-radius:16px;box-shadow:0 12px 36px rgba(0,0,0,0.18);padding:14px 14px 12px;position:relative}
.modal-close{position:absolute;right:10px;top:10px;width:28px;height:28px;border:none;background:rgba(0,0,0,0.06);border-radius:999px;cursor:pointer}
.modal-title{font-weight:600;font-size:16px;color:#111;margin:2px 0 8px}
.modal-body{font-size:13px;color:#333;line-height:1.5}