/* AI page styles generated from MasterGo DSL
   - tokens are defined via CSS variables with DSL token comments
   - import css/tokens.css first in HTML
*/

:root{
  /* Additional AI tokens (extend tokens.css) */
  --ai-muted: #86909C; /* token: paint_1:070 */
  --ai-dark: #3D3D3D; /* token: paint_1:65 */
  --ai-black: #000000; /* token: paint_1:947 */
  --ai-tabbar-bg: #E5F0FF; /* token: paint_13:12803 */
  /* layout helpers for intro block */
  /* moved tags up for better visual balance */
  --intro-tags-top: 264px;
  /* approximate single tag height = font-size(11px) + padding-top(6px)+padding-bottom(6px) = 23px */
  --intro-tag-height: 23px;
  --intro-tags-gap: 16px; /* desired vertical spacing between tags bottom and button top */
  /* additional offset applied to the computed link position (positive -> lower, negative -> higher) */
  --intro-link-offset: -23px;
  /* small per-button lift to fine-tune gap to the card without moving the card itself */
  --intro-button-lift: -11px;
}

/* 基础参数展示框 */
.info-box {
  position: absolute;
  left: 20px;
  right: 20px;
  /* place the info-box below the intro-link (button) and add a safe gap (246px = 256px - 10px) so it won't touch the button */
  top: calc(var(--intro-tags-top) + var(--intro-tag-height) + var(--intro-tags-gap) + var(--intro-link-offset) + 210px);
  background: rgba(255,255,255,0.96);
  border-radius: 12px;
  padding: 14px 12px 12px 12px;
  box-shadow: 0 8px 20px rgba(16,24,40,0.08);
  border: 1px solid rgba(16,24,40,0.04);
  color: var(--ai-dark);
  font-size: 13px;
}
.info-box .card-title {
  margin: 0 0 10px 0;
  padding-bottom: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ai-dark);
  /* 使用统一分隔线 token */
  border-bottom: 1px solid var(--divider);
}

/* 通用页面容器（与其他页面统一） */
.app{
  height: 844px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.frame{display:flex;flex-direction:column;flex:1;min-height:0}
.scroll-area{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:60px}
.scroll-area{scrollbar-width:none;-ms-overflow-style:none}
.scroll-area::-webkit-scrollbar{width:0;height:0;display:none}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  /* 统一所有水平分隔线颜色和粗细 */
  border-bottom: 1px solid var(--divider);
}
.info-row:last-child { border-bottom: none; }
.info-box .label {
  color: var(--ai-muted);
  font-size: 12px;
}
.info-box .value {
  color: var(--ai-dark);
  font-weight: 600;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--font-default);
  color: var(--text-base);
  background:#fff; /* 与前面页面一致，渐变放在容器内 */
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}

.ai-phone{
  width:390px; height:844px; position:relative; background: var(--bg-grad); /* 与前面页面一致的浅蓝渐变 */
  border-radius:0; box-shadow: var(--shadow-card, 0 10px 30px rgba(0,0,0,0.08));
  overflow:hidden;
  /* 整体上移 30px（相对视觉位置微调） */
  transform: translateY(-30px);
}

/* Status bar (light) */
.ai-statusbar{
  position:absolute; left:0; top:0; width:100%; height:47px;
  background: var(--statusbar-bg, #C1DCFE); /* token: paint_13:15099 */
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
}
.ai-statusbar .time{font-size:12px; color: var(--ai-black); letter-spacing:0.3px}
.ai-statusbar .icons{display:flex; gap:12px; align-items:center}
.ai-statusbar .icon{width:16px;height:10px; border-radius:2px; background: var(--ai-black)}

/* Hero carousel */
.hero{
  position:absolute; left:15px; top:63px; width:361px; height:193px;
  background: #E2E5EB; /* token: paint_1:083 */
  border-radius:12px; overflow:hidden;
}
.hero img{position:absolute; inset:-14px 0 0 0; width:100%; height:220px; object-fit:cover; object-position:left center}
.hero .headline{
  position:absolute; left:91px; top:58px; width:200px; color:#000; /* token: paint_1:14 */
  font-size:20px; line-height:1.3; white-space:pre-line;
}
.hero .cta{
  position:absolute; left:144px; top:146px; color:#000; /* token: paint_1:14 */
  font-size:16px; background: rgba(255,255,255,0.7); padding:6px 10px; border-radius:8px;
}
.hero .nav-dots{position:absolute; left:50%; transform:translateX(-50%); bottom:12px; display:flex; gap:8px}
.hero .nav-dots span{display:block; width:32px; height:4px; border-radius:2px; background:#fff; opacity:.4}
.hero .nav-dots span.active{opacity:1}

/* Intro text block */
.intro-title{position:absolute; left:150px; top:245px; font-size:17px; color: var(--ai-dark); margin:0}
.intro-desc{position:absolute; left:155px; top:254px; width:205px; font-size:11px; line-height:1.5; color: var(--ai-muted); margin:0}
.intro-tags{position:absolute; left:150px; top:var(--intro-tags-top); display:flex; gap:8px; color: var(--ai-dark)}
.intro-tags .tag{font-size:11px; background:#FCE9B9; color:#6B4A00; padding:6px 10px; border-radius:14px}
.intro-sub{position:absolute; left:150px; top:376px; display:flex; gap:12px; font-size:11px; color: var(--ai-muted)}
.intro-sub span{white-space:nowrap}
.intro-link{position:absolute; left:169px; top:calc(var(--intro-tags-top) + var(--intro-tag-height) + var(--intro-tags-gap) + var(--intro-link-offset) + var(--intro-button-lift));
  font-size:13px; color:#fff; background: var(--color-primary, #1E40AF);
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px; border-radius:10px; border:0; cursor:pointer;
  box-shadow: 0 4px 10px rgba(30,64,175,0.12); text-align:center;
  max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.intro-link:active{transform:translateY(1px)}

/* Side image */
.side-img{position:absolute; left:-6px; top:285px; width:95px; height:141px; border-radius:12px; overflow:hidden; z-index:0; box-shadow:0 6px 14px rgba(9,30,66,0.06)}
.side-img img{width:100%; height:100%; object-fit:cover}

/* Ensure text sits above the image and won't be overlapped */
.intro-title,.intro-desc,.intro-tags,.intro-sub,.intro-link{z-index:2; position:relative}

/* Form-like fields */
.field{position:fixed; font-size:12px; color: var(--ai-dark);
  display:flex; align-items:center; justify-content:center;
  min-width:110px; height:36px; padding:6px 10px; box-sizing:border-box;
  background:#F5F7FA; border:1px solid #E5E7EB; border-radius:10px;
  text-align:center; z-index:2; position:absolute}
/* make the visible label sit above the input so it's always readable */
.field .label{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; pointer-events:none; color: var(--ai-dark); font-size:12px; line-height:1;}

/* allow wider full-row controls if necessary (removed .field.freq to clean up) */
.pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; background:#F5F7FA; border:1px solid #E5E7EB}
.unit{font-size:12px; color: var(--ai-dark)}

/* .form-panel removed (container deleted from HTML) */

/* Specific positions from DSL */


/* inputs inside the visual fields */
.field-input{background:transparent; border:0; width:100%; text-align:center; font-size:12px; color:var(--ai-dark); outline:none}

/* gender option radios styled as chips */
/* gender-options styles removed (gender controls deleted from HTML) */

/* Goal chip and dropdown arrows from DSL */
/* .primary-cta removed (button node deleted from HTML) */

/* Plan thumbnails (removed) */
/* rules for .plans-title, .plan-a, .plan-b removed per request */

/* 底部 TabBar 使用 3.css 的通用样式，这里不重复定义，避免视觉不一致 */