/* ===================== 护肤管家 · BeautyMate 设计语言 ===================== */
:root{
  --red:#E60028; --red-deep:#C4001F; --red-soft:#FDE9EC; --red-mid:#F7C6CF; --red-tint:#F9B9C6;
  --ink:#1C1B1A; --ink-2:#6E675F; --ink-3:#A89F96;
  --bg:#FBF8F5; --card:#FFFFFF;
  --skin:#F6EDE7; --skin-2:#FAEFF0; --rose:#F5DDE1; --line:#EFE8E1;
  --gray-soft:#F1EFEC;
  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --sh-card:0 10px 30px rgba(28,27,26,.05), 0 2px 6px rgba(28,27,26,.03);
  --sh-pop:0 18px 46px rgba(28,27,26,.16);
  --font:"PingFang SC","HarmonyOS Sans SC","MiSans","Source Han Sans SC","Microsoft YaHei","Noto Sans SC",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
button{font-family:var(--font);border:none;background:none;cursor:pointer;color:inherit}
input,textarea,select{font-family:var(--font)}
.ico{width:14px;height:14px;vertical-align:-2px;flex-shrink:0;display:inline-block}
html,body{height:100%}
body{
  font-family:var(--font);color:var(--ink);overflow-x:hidden;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(230,0,40,.05), transparent 60%),
    radial-gradient(700px 500px at 0% 110%, rgba(246,237,231,.9), transparent 60%),
    #F1ECE6;
}

/* ===== 桌面舞台 ===== */
.stage{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:30px}
.stage-brand{position:absolute;top:34px;left:50%;transform:translateX(-50%);font-size:15px;letter-spacing:6px;color:var(--ink-2);opacity:.7;white-space:nowrap}
.phone{
  width:392px;height:844px;border-radius:50px;border:10px solid #1B1A18;
  background:#1B1A18;box-shadow:0 40px 90px rgba(28,27,26,.28), 0 6px 18px rgba(28,27,26,.18);
  position:relative;z-index:2;flex-shrink:0;
}
.screen{width:100%;height:100%;border-radius:40px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;position:relative}
.statusbar{
  height:44px;display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;font-size:13px;font-weight:600;flex-shrink:0;z-index:60;pointer-events:none;
  background:var(--bg);
}
.sb-right{display:flex;align-items:center;gap:7px;color:var(--ink)}
.sb-ico{width:17px;height:14px;display:block}

/* ===== 视图容器 ===== */
.view{display:none;flex:1;min-height:0;position:relative}
.view.active{display:block}
.view-scroll{height:100%;overflow-y:auto;padding:0 18px 28px;scrollbar-width:none}
.view-scroll::-webkit-scrollbar{display:none}
#view-home .view-scroll{
  background:radial-gradient(90% 240px at 50% -80px,rgba(255,203,212,.55) 0%,rgba(255,203,212,0) 100%) no-repeat;
}
.overlay{position:absolute;inset:0;background:var(--bg);z-index:30;display:none;border-radius:40px;overflow:hidden}
.overlay.open{display:block}
.overlay.open .ov-scroll{animation:slideIn .3s cubic-bezier(.32,.72,.28,1)}
@keyframes slideIn{from{transform:translateX(14%);opacity:0}to{transform:none;opacity:1}}
.ov-scroll{height:100%;overflow-y:auto;padding:44px 18px 28px;scrollbar-width:none}
.ov-scroll::-webkit-scrollbar{display:none}
.ov-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.ov-back{display:flex;align-items:center;gap:2px;font-size:15.5px;color:var(--red);font-weight:600}
.ov-back svg{width:16px;height:16px}
.ov-edit{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--ink-2);font-weight:600}
.ov-edit svg{width:14px;height:14px}
.ov-title{font-size:19px;font-weight:800;margin:2px 0 16px;letter-spacing:.5px}
.opt{font-size:10.5px;color:var(--ink-3);font-weight:400}

/* ===== 按钮 ===== */
.btn-primary{
  flex:1;background:var(--red);color:#fff;border-radius:999px;padding:11px 0;
  font-size:13.5px;font-weight:600;box-shadow:0 10px 22px rgba(230,0,40,.25);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:transform .15s ease, background .15s ease;
}
.btn-primary:active{transform:scale(.97);background:var(--red-deep)}
.btn-primary svg{width:15px;height:15px}
.btn-ghost{flex:1;background:var(--card);color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:9px 0;font-size:13.5px;font-weight:600}
.btn-outline{flex:1;background:transparent;color:var(--red);border:1.5px solid var(--red);border-radius:999px;padding:9px 0;font-size:13px;font-weight:600}
.btn-block{display:block;width:100%;margin-top:16px}
.ai-done{text-align:center;font-size:13px;color:var(--red-deep);font-weight:600;padding:8px 0}
.ai-done svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.foot-note{text-align:center;font-size:10.5px;color:var(--ink-3);margin-top:16px}

/* ===== 首页 hero ===== */
.hero{
  background:
    radial-gradient(130% 100% at 92% -12%,rgba(255,143,160,.55) 0%,rgba(255,143,160,0) 55%),
    radial-gradient(80% 90% at -8% 112%,rgba(230,0,40,.08) 0%,rgba(230,0,40,0) 62%),
    linear-gradient(128deg,var(--skin) 0%,var(--skin-2) 58%,var(--rose) 120%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-lg);padding:20px 20px 18px;margin-top:6px;
  display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;
  box-shadow:var(--sh-card);
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:radial-gradient(rgba(230,0,40,.16) 1px,transparent 1.5px);
  background-size:15px 15px;
  -webkit-mask-image:linear-gradient(112deg,#000 4%,transparent 72%);
  mask-image:linear-gradient(112deg,#000 4%,transparent 72%);
}
.hero::after{
  content:'';position:absolute;left:12px;right:12px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
}
.hero-text{position:relative;z-index:1}
.hero-mark{
  position:absolute;right:-16px;bottom:-18px;width:104px;height:104px;transform:rotate(-8deg);
  color:var(--red-mid);opacity:.55;pointer-events:none;
}
.hero-hi{font-size:21px;font-weight:800;display:flex;align-items:center;gap:7px}
.hero-hi .spark{width:16px;height:16px;color:var(--red);flex-shrink:0}
.hero-date{font-size:12px;color:var(--ink-2);margin-top:4px}

/* ===== 分段切换 ===== */
.seg{display:flex;background:var(--gray-soft);border-radius:999px;padding:4px;gap:2px;margin:14px 0 12px}
.seg-btn{
  flex:1;padding:8px 0;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s ease;
}
.seg-btn svg{width:15px;height:15px}
.seg-btn.active{background:var(--card);color:var(--red);box-shadow:0 3px 10px rgba(28,27,26,.10)}

/* ===== 警示横幅（冲突提示） ===== */
.banner{
  display:flex;gap:8px;align-items:flex-start;background:var(--red-soft);
  border-radius:var(--r-md);padding:11px 12px;font-size:12.5px;color:#7A2530;line-height:1.55;margin-bottom:12px;
}
.banner-ico{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--red)}

/* ===== AI 建议卡（置顶） ===== */
.ai-card{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#FDEBF0 0%,var(--red-soft) 55%,#F9DDE3 100%);
  border:1px solid var(--rose);
  border-radius:var(--r-lg);padding:16px;margin-bottom:12px;
  box-shadow:0 10px 22px rgba(230,0,40,.08);
}
.ai-card::after{
  content:'';position:absolute;right:14px;top:14px;width:40px;height:40px;opacity:.32;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E60028' d='M11.2 1.8l2.1 6.3 6.3 2.1-6.3 2.1-2.1 6.3-2.1-6.3L2.8 10.2l6.3-2.1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ai-card-head{position:relative;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--red)}
.ai-orb{width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(230,0,40,.3)}
.ai-orb svg{width:15px;height:15px}
.ai-badge{font-size:10px;background:var(--red);color:#fff;border-radius:999px;padding:2px 8px}
.ai-text{font-size:13.5px;line-height:1.7;margin:10px 0 6px;font-weight:500}
.ai-basis{font-size:11.5px;color:#7A2530;background:rgba(255,255,255,.72);border-radius:var(--r-sm);padding:8px 10px;line-height:1.5}
.ai-actions{display:flex;gap:10px;margin-top:12px}

/* ===== 方案版本卡 ===== */
.ver-card{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border-radius:var(--r-md);padding:12px 14px;box-shadow:var(--sh-card);margin-bottom:14px;
}
.ver-badge{background:var(--red);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px}
.ver-date{font-size:12px;color:var(--ink-2);margin-left:8px}
.ver-right{display:flex;align-items:center;gap:2px;font-size:12.5px;color:var(--red);font-weight:600}
.ver-right svg{width:13px;height:13px}

/* ===== 分区方案卡 ===== */
.zone-card{
  position:relative;overflow:hidden;background:var(--card);border-radius:var(--r-md);
  padding:14px 16px;box-shadow:var(--sh-card);margin-bottom:12px;
}
.zone-card::before{
  content:'';position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--red-tint) 0%,var(--red) 100%);opacity:.85;
}
.zone-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.zone-name{font-size:14px;font-weight:800}
.zone-tag{font-size:10.5px;padding:2px 9px;border-radius:999px;font-weight:600;background:var(--red-soft);color:var(--red)}
.steps{display:flex;flex-wrap:wrap;gap:6px}
.step-chip{
  display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px 6px 7px;font-size:12.5px;color:var(--ink);cursor:pointer;
  box-shadow:0 2px 8px rgba(28,27,26,.06);
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.step-chip:active{transform:scale(.95)}
.step-chip .n{
  width:18px;height:18px;border-radius:50%;color:#fff;font-size:10px;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;
  background:linear-gradient(135deg,#FF4D68,var(--red-deep));box-shadow:0 2px 5px rgba(230,0,40,.35);
}

/* ===== 页面头 ===== */
.page-head{display:flex;align-items:center;justify-content:space-between;padding:10px 2px 14px}
.page-title{font-size:22px;font-weight:800;letter-spacing:.5px;color:var(--ink)}
.page-sub{font-size:12px;color:var(--ink-2);margin-top:3px}
.head-emoji{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--card);box-shadow:var(--sh-card);color:var(--ink);cursor:pointer;transition:transform .15s ease;
}
.head-emoji:active{transform:scale(.92)}
.head-emoji svg{width:19px;height:19px}

/* ===== 化妆包：快捷操作 ===== */
.quick-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.qa-search{
  display:flex;align-items:center;gap:8px;background:var(--card);border-radius:999px;
  box-shadow:var(--sh-card);padding:0 16px;height:46px;color:var(--ink-3);font-size:13px;
}
.qa-search svg{width:15px;height:15px;color:var(--ink-3);flex-shrink:0}
.qa-search input{flex:1;border:none;outline:none;font-size:13px;min-width:0;background:transparent;color:var(--ink)}
.qa-search input::placeholder{color:var(--ink-3)}
.qa-search button{display:flex;padding:4px;color:var(--red)}
.qa-row{display:flex;gap:10px}
.qa{
  flex:1;min-height:44px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-card);display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--ink);transition:transform .15s ease;
}
.qa:active{transform:scale(.97)}
.qa svg{width:17px;height:17px;color:var(--red)}

.chips{display:flex;gap:7px;overflow-x:auto;margin-bottom:12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;font-size:12px;padding:7px 14px;border-radius:999px;background:var(--card);color:var(--ink-2);font-weight:600;box-shadow:0 2px 6px rgba(28,27,26,.05)}
.chip.active{background:var(--ink);color:#fff}

/* ===== 产品卡片 ===== */
.bag-list{display:flex;flex-direction:column;gap:10px}
.prod-card{
  display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r-md);
  padding:12px 14px;box-shadow:var(--sh-card);cursor:pointer;position:relative;transition:transform .15s ease;
}
.prod-card:active{transform:scale(.98)}
.prod-img{
  width:54px;height:54px;border-radius:var(--r-sm);object-fit:cover;
  background:var(--skin);flex-shrink:0;display:block;
}
.prod-info{flex:1;min-width:0}
.prod-name{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prod-sub{font-size:11px;color:var(--ink-2);margin-top:4px;display:flex;align-items:center;gap:6px}
.prod-arrow{color:var(--ink-3);flex-shrink:0}
.prod-arrow svg{width:16px;height:16px;display:block}

/* ===== 产品详情 ===== */
.detail-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.detail-img{
  width:64px;height:64px;border-radius:var(--r-md);object-fit:cover;
  background:var(--skin);flex-shrink:0;display:block;
}
.detail-name{font-size:18px;font-weight:800}
.detail-src{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-2);background:var(--bg);border-radius:999px;padding:3px 10px;margin-top:6px}
.detail-src svg{width:11px;height:11px}
.src-warn{color:var(--red);background:var(--red-soft)}
.sec-card{background:var(--card);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--sh-card);margin-bottom:12px}
.sec-title{font-size:13.5px;font-weight:800;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.zone-fit{display:flex;gap:8px}
.zone-fit-item{flex:1;text-align:center;border-radius:var(--r-sm);padding:8px 2px;font-size:11px}
.zone-fit-item .zf-zone{font-weight:700;font-size:12px}
.zone-fit-item .zf-v{font-size:10.5px;margin-top:3px;font-weight:600}
.zf-适合{background:var(--red-soft);color:var(--red-deep)}
.zf-慎用{background:var(--red-mid);color:#8C0A22}
.zf-注意{background:var(--red);color:#fff}
.ing-item{padding:10px 0;border-bottom:1px dashed var(--line)}
.ing-item:last-child{border-bottom:none}
.ing-name{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.ing-v{font-size:10px;font-weight:700;border-radius:999px;padding:1px 7px;background:var(--red-soft);color:var(--red)}
.ing-desc{font-size:12px;color:var(--ink-2);margin-top:3px;line-height:1.5}
.ing-verdict{font-size:12px;color:var(--ink);margin-top:4px;line-height:1.5}
.conflict-tip{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:#7A2530;background:var(--red-soft);border-radius:var(--r-sm);padding:10px 12px;line-height:1.55}
.conflict-tip svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:var(--red)}
.detail-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:13px}
.fb-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--ink-2)}
.fb-btn{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--red);font-weight:600;background:var(--red-soft);border-radius:999px;padding:5px 12px}
.fb-btn svg{width:12px;height:12px}
.fb-done{text-align:center;font-size:11.5px;color:var(--ink-3);margin-top:12px}
.prod-count{font-size:11px;font-weight:800;color:var(--red);background:var(--red-soft);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:2px}
.fulllist-toggle{display:flex;align-items:center;gap:6px;width:100%;margin-top:12px;background:var(--bg);border:none;border-radius:var(--r-sm);padding:9px 12px;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer}
.fulllist-toggle svg{width:13px;height:13px}
.fl-chev{margin-left:auto;display:flex;transition:transform .25s ease}
.fulllist-toggle.open .fl-chev{transform:rotate(180deg)}
.full-list{margin-top:8px;background:var(--bg);border-radius:var(--r-sm);padding:2px 12px}
.fl-item{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:11.5px;border-bottom:1px dashed var(--line)}
.fl-item:last-child{border-bottom:none}
.fl-n{color:var(--ink);font-weight:600;min-width:0}
.fl-v{color:var(--ink-2);flex-shrink:0;font-size:11px}
.btn-danger-outline{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;border:1.5px solid var(--red);color:var(--red);border-radius:var(--r-md);padding:11px 0;font-size:13.5px;font-weight:700;cursor:pointer}
.btn-danger-outline svg{width:14px;height:14px}
.btn-danger-outline:active{background:var(--red-soft)}
.ing-edit{display:flex;flex-direction:column;gap:8px;max-height:230px;overflow-y:auto;padding:2px}
.ing-edit-row{background:var(--bg);border-radius:var(--r-sm);padding:8px}
.ing-edit-row .field-input{margin-top:6px}
.ie-top{display:flex;gap:8px;align-items:center}
.ie-top .field-input{margin-top:0}
.ie-del{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--card);border:1.5px solid var(--line);color:var(--ink-3);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ie-del svg{width:11px;height:11px}
.ing-add{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--red);background:var(--red-soft);border:none;border-radius:999px;padding:6px 12px;cursor:pointer}
.ing-add svg{width:12px;height:12px}

/* ===== 周记 ===== */
.journal-photo{margin-bottom:14px}
.photo-card{
  border-radius:var(--r-lg);
  background:linear-gradient(140deg,var(--skin) 0%,var(--skin-2) 55%,var(--rose) 100%);
  padding:18px;position:relative;overflow:hidden;box-shadow:var(--sh-card);
}
.photo-guide{display:flex;align-items:center;justify-content:space-between;gap:14px}
.guide-info{flex:1;min-width:0}
.guide-title{font-size:15px;font-weight:800;color:var(--ink)}
.guide-tip{font-size:11.5px;color:var(--ink-2);line-height:1.7;margin-top:6px}
.photo-guide .btn-primary{flex:none;width:112px;padding:10px 0;font-size:13.5px;gap:6px}
.photo-guide .btn-primary svg{width:15px;height:15px}
.photo-shot{position:relative;height:150px;border-radius:var(--r-lg)}
.photo-shot img{width:100%;height:100%;object-fit:cover}
.photo-shot .retake{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,.94);color:var(--red-deep);font-size:12.5px;font-weight:700;border-radius:999px;padding:7px 16px;
  display:flex;align-items:center;gap:5px;box-shadow:0 6px 16px rgba(28,27,26,.22);
}
.photo-shot .retake svg{width:13px;height:13px}
.form-block{margin-bottom:16px}
.form-title{font-size:13.5px;font-weight:800;margin-bottom:9px;color:var(--ink)}
.zone-select{background:var(--card);border-radius:var(--r-lg);padding:13px 15px;box-shadow:var(--sh-card);margin-bottom:10px}
.zone-select .zs-head{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;margin-bottom:9px}
.zs-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0}
.lvl-pills{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.lvl{
  font-size:11.5px;padding:8px 0;border-radius:999px;background:var(--bg);border:1.5px solid var(--line);
  color:var(--ink-2);font-weight:600;text-align:center;transition:all .15s ease;
}
.lvl.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.zs-note{margin-top:9px;position:relative}
.zs-note svg{width:13px;height:13px;position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
.zs-note input{
  width:100%;border:1.5px solid var(--line);background:var(--bg);border-radius:var(--r-sm);
  padding:8px 12px 8px 30px;font-size:12px;outline:none;transition:all .15s ease;
}
.zs-note input:focus{border-color:var(--red);background:var(--card)}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{
  font-size:12px;padding:8px 14px;border-radius:999px;background:var(--card);border:1.5px solid var(--line);
  color:var(--ink-2);font-weight:600;box-shadow:0 2px 6px rgba(28,27,26,.05);transition:all .15s ease;
}
.tag.on{background:var(--red);border-color:var(--red);color:#fff}
.days-wheel{
  height:112px;overflow-y:auto;scroll-snap-type:y mandatory;position:relative;
  background:var(--card);border-radius:var(--r-md);box-shadow:var(--sh-card);
  scrollbar-width:none;
}
.days-wheel::-webkit-scrollbar{display:none}
.wheel-pad{height:40px}
.wheel-item{
  height:32px;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--ink-3);font-weight:700;cursor:pointer;position:relative;z-index:1;
}
.wheel-item .w-dot{width:6px;height:6px;border-radius:50%;background:var(--line);margin-right:7px;flex-shrink:0}
.wheel-item.on{color:var(--red);font-weight:800;font-size:16px}
.wheel-item.on .w-dot{background:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.wheel-center{
  position:absolute;top:50%;transform:translateY(-50%);left:12px;right:12px;height:32px;
  border-radius:10px;background:var(--gray-soft);pointer-events:none;
}
.wheel-hint{text-align:center;font-size:10.5px;color:var(--ink-3);margin-top:6px}
.input{width:100%;border:1.5px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:11px 14px;font-size:13px;outline:none}
.input:focus{border-color:var(--red)}
.textarea{resize:none;line-height:1.6}
.btn-text{display:block;margin:12px auto 0;font-size:12.5px;color:var(--ink-2)}

/* ===== 我的 ===== */
.me-profile-card{
  border-radius:var(--r-lg);margin-bottom:12px;position:relative;overflow:hidden;cursor:pointer;
  background:linear-gradient(128deg,var(--skin) 0%,var(--skin-2) 100%);
  box-shadow:var(--sh-card);padding:18px 16px 0;
}
.mpc-top{display:flex;align-items:center;gap:12px}
.avatar-img{
  width:54px;height:54px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2.5px solid #fff;box-shadow:var(--sh-card);background:var(--skin);
}
.me-avatar-info{flex:1;min-width:0}
.me-name-row{display:flex;align-items:center;gap:7px}
.me-name{font-size:17px;font-weight:800}
.me-badge{
  font-size:10px;font-weight:800;color:#fff;letter-spacing:.5px;
  background:linear-gradient(135deg,#FF4D68,var(--red-deep));
  padding:2.5px 7px;border-radius:99px;
}
.me-id{font-size:11.5px;color:var(--ink-2);margin-top:4px;display:flex;align-items:center;gap:4px}
.me-id-info{
  width:15px;height:15px;border-radius:50%;border:1.5px solid var(--ink-3);color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.me-id-info svg{width:9px;height:9px}
.pe-chev{color:var(--ink-3);flex-shrink:0}
.pe-chev svg{width:16px;height:16px;display:block}
.me-metrics{display:flex;margin-top:14px;border-top:1px solid rgba(230,0,40,.14);padding:11px 0 13px}
.mm-cell{flex:1;text-align:center;position:relative}
.mm-cell+.mm-cell::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(230,0,40,.14)}
.mm-cell b{display:block;font-size:16.5px;font-weight:800;color:var(--red-deep);font-variant-numeric:tabular-nums}
.mm-cell i{display:block;font-size:10.5px;font-style:normal;color:var(--ink-2);margin-top:3px}

.me-card{background:var(--card);border-radius:var(--r-lg);padding:4px 16px;box-shadow:var(--sh-card);margin-bottom:12px}
.me-card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.me-title{font-size:14px;font-weight:800}
.me-link{font-size:12px;color:var(--red);font-weight:600;cursor:pointer}

/* 选购清单（成分） */
.buy-group{margin:4px 0 2px}
.buy-group-title{font-size:12px;font-weight:800;margin:8px 0 8px;display:flex;align-items:center;gap:6px}
.buy-group.need .buy-group-title{color:var(--red)}
.buy-group.avoid .buy-group-title{color:var(--ink-2)}
.buy-ing{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:8px}
.bi-ico{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.bi-ico svg{width:10px;height:10px}
.buy-group.need .bi-ico{background:var(--red);color:#fff}
.buy-group.avoid .bi-ico{background:var(--gray-soft);color:var(--ink-2)}
.bi-name{font-size:13px;font-weight:700}
.bi-why{font-size:11.5px;color:var(--ink-2);margin-top:2px;line-height:1.55}
.buy-note{font-size:11px;color:var(--ink-2);line-height:1.65;background:var(--gray-soft);border-radius:var(--r-sm);padding:9px 12px;margin:6px 0 12px}
.buy-actions{display:flex;gap:8px;padding:0 0 14px}
.bi-btn{flex:1;font-size:12.5px;padding:9px 13px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink-2);font-weight:600}
.bi-btn.solid{background:var(--red);color:#fff;border-color:transparent}

.set-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-size:13px;border-bottom:1px solid var(--line);cursor:default}
.set-row:last-child{border-bottom:none}
.set-btn{font-size:12px;color:var(--red);font-weight:600}
.set-right{display:flex;align-items:center;gap:10px}
.set-label{display:flex;align-items:center;gap:10px}
.set-ico{
  width:30px;height:30px;border-radius:10px;flex-shrink:0;
  background:var(--red-soft);color:var(--red);display:flex;align-items:center;justify-content:center;
}
.set-ico svg{width:15px;height:15px}
.set-remind-time{font-size:12px;color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.set-remind-time.off{display:none}
#set-remind-row{cursor:pointer}
.switch{position:relative;display:inline-block;width:42px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--gray-soft);border-radius:99px;transition:.25s}
.slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 2px 5px rgba(28,27,26,.25)}
.switch input:checked + .slider{background:var(--red)}
.switch input:checked + .slider::before{transform:translateX(18px)}

/* ===== 周记历史 ===== */
.hist-entry{background:var(--card);border-radius:var(--r-md);padding:13px 15px;box-shadow:var(--sh-card);margin-bottom:10px;cursor:pointer}
.he-head{display:flex;justify-content:space-between;font-size:13px;font-weight:700}
.he-sum{font-size:11.5px;color:var(--ink-2);margin-top:5px}
.compare-box{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:14px;margin-bottom:14px}
.cb-title{font-size:13.5px;font-weight:800;margin-bottom:10px}
.cb-stage{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/4}
.cb-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cb-old{filter:saturate(1.3) hue-rotate(-12deg)}
.cb-old-tint{position:absolute;inset:0;background:rgba(214,96,96,.14);mix-blend-mode:multiply}
.cb-new{clip-path:inset(0 0 0 var(--clip,50%))}
.cb-line{position:absolute;top:0;bottom:0;left:var(--clip,50%);width:2.5px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.35)}
.cb-handle{position:absolute;top:50%;left:var(--clip,50%);transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--red);pointer-events:none}
.cb-labels{display:flex;justify-content:space-between;font-size:11px;color:#fff;position:absolute;top:10px;left:14px;right:14px;z-index:2}
.cb-labels span{background:rgba(28,27,26,.6);border-radius:999px;padding:3px 10px}
.cb-slider{width:100%;margin-top:12px;accent-color:var(--red)}

/* ===== 档案编辑：直角档案卡 ===== */
.dossier{background:var(--card);border:1.5px solid var(--line);border-radius:2px;box-shadow:var(--sh-card);margin-bottom:14px;overflow:hidden}
.dos-top{display:flex;align-items:center;justify-content:space-between;background:var(--red);color:#fff;padding:11px 14px;font-size:12px;font-weight:800;letter-spacing:.12em}
.dos-no{font-size:10.5px;font-weight:600;opacity:.9;letter-spacing:.05em}
.dos-row{display:flex;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line);align-items:flex-start}
.dos-row:last-of-type{border-bottom:1px solid var(--line)}
.dos-k{width:64px;flex-shrink:0;font-size:12px;font-weight:700;color:var(--ink-2);padding-top:6px;letter-spacing:.06em}
.dos-k .zs-dot{display:inline-block;margin-right:4px;vertical-align:1px}
.dos-v{flex:1;min-width:0}
.dos-chips{display:flex;flex-wrap:wrap;gap:6px}
.dos-chip{
  font-size:11.5px;padding:6px 12px;border-radius:2px;background:var(--bg);border:1px solid var(--line);
  color:var(--ink-2);font-weight:600;transition:all .15s ease;
}
.dos-chip.on{background:var(--red-soft);border-color:var(--red);color:var(--red);font-weight:700}
.dos-note{
  width:100%;border:1px solid var(--line);border-radius:2px;background:var(--bg);
  padding:10px 12px;font-size:12.5px;outline:none;resize:none;line-height:1.7;color:var(--ink);
}
.dos-note:focus{border-color:var(--red);background:#fff}
.dos-footer{
  display:flex;justify-content:space-between;padding:9px 14px;
  font-size:10px;color:var(--ink-3);border-top:1px dashed var(--line);background:var(--bg);
}

/* ===== 底部导航 ===== */
.bottom-nav{
  height:80px;flex-shrink:0;display:flex;align-items:stretch;padding-bottom:12px;z-index:5;
  background:linear-gradient(to top, rgba(251,248,245,1) 78%, rgba(251,248,245,0));
}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;color:var(--ink-3);font-weight:600;transition:color .2s ease}
.nav-item svg{width:20px;height:20px;transition:.2s}
.nav-item.active{color:var(--red);font-weight:700}
.nav-item.active svg{transform:translateY(-2px)}

/* AI 顾问：导航中央凸起入口 */
.nav-ai{
  width:74px;flex-shrink:0;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;
  font-size:9.5px;font-weight:700;color:var(--red);
}
.nav-ai-orb{
  width:54px;height:54px;border-radius:50%;color:#fff;
  background:linear-gradient(135deg,var(--red) 0%,var(--red-deep) 100%);
  display:flex;align-items:center;justify-content:center;
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  border:3.5px solid var(--bg);
  box-shadow:0 10px 22px rgba(230,0,40,.38), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease;
}
.nav-ai-orb svg{width:24px;height:24px}
.nav-ai-orb::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1.5px solid rgba(230,0,40,.45);animation:pulse 2.8s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.86);opacity:.9}70%{transform:scale(1.2);opacity:0}100%{transform:scale(1.2);opacity:0}}
.nav-ai:active .nav-ai-orb{transform:translateX(-50%) scale(.93)}

/* ===== AI 聊天面板 ===== */
.chat-sheet{
  position:absolute;left:0;right:0;bottom:0;top:44px;z-index:70;
  background:
    radial-gradient(130% 55% at 88% -8%, var(--red-soft) 0%, rgba(253,233,236,0) 58%),
    radial-gradient(90% 42% at -12% 16%, var(--rose) 0%, rgba(245,221,225,0) 55%),
    radial-gradient(85% 46% at 50% 112%, var(--skin-2) 0%, rgba(250,239,240,0) 60%),
    var(--bg);
  border-radius:28px 28px 0 0;
  box-shadow:0 -16px 44px rgba(28,27,26,.22);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(106%);transition:transform .34s cubic-bezier(.32,.72,.28,1);
}
.chat-sheet.open{transform:none}
.chat-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.chat-bg svg{position:absolute;top:64px;right:-54px;width:250px;height:250px;color:var(--red-mid);opacity:.4;transform:rotate(-14deg)}
.chat-grab{width:40px;height:4.5px;border-radius:99px;background:#DCD4CA;margin:9px auto 2px;flex-shrink:0;position:relative;z-index:1}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 16px 12px;border-bottom:1px solid var(--line);flex-shrink:0;position:relative;z-index:1}
.chat-avatar{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;color:#fff;
  background:linear-gradient(135deg,#FF4D68,var(--red-deep));
  box-shadow:0 0 0 3px var(--red-soft),0 5px 12px rgba(230,0,40,.32),inset 0 1px 0 rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
}
.chat-avatar svg{width:20px;height:20px}
.chat-head-info{flex:1;min-width:0}
.chat-name{font-size:14.5px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:6px}
.chat-status{font-size:10.5px;color:var(--ink-2);margin-top:2px}
.chat-reset{width:30px;height:30px;border-radius:50%;background:var(--card);box-shadow:var(--sh-card);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.chat-reset svg{width:14px;height:14px}
.chat-close{width:30px;height:30px;border-radius:50%;background:var(--card);box-shadow:var(--sh-card);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.chat-close svg{width:13px;height:13px}

.chat-body{flex:1;overflow-y:auto;padding:16px 16px 6px;display:flex;flex-direction:column;gap:16px;scrollbar-width:none;position:relative;z-index:1}
.chat-body::-webkit-scrollbar{display:none}

/* 落地页 */
.chat-hero{flex-shrink:0;padding:6px 2px 0}
.hero-hi{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:.2px;display:flex;align-items:center;gap:6px}
.hi-spark{display:inline-flex;color:var(--red);animation:hiTwinkle 2.4s ease-in-out infinite}
.hi-spark svg{width:17px;height:17px}
@keyframes hiTwinkle{0%,100%{opacity:.55;transform:scale(.88)}50%{opacity:1;transform:scale(1.06)}}
.hero-tag{font-size:13px;color:var(--ink-2);margin-top:6px}
.try-say{flex-shrink:0}
.try-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 2px}
.try-title{font-size:15px;font-weight:800;color:var(--ink)}
.try-sub{font-size:9.5px;font-weight:700;letter-spacing:2px;color:var(--ink-3)}
.try-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:11px}
.try-card{
  position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;
  background:linear-gradient(158deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.46) 100%);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.95);border-radius:var(--r-md);
  padding:13px 12px;overflow:hidden;
  box-shadow:0 8px 22px rgba(230,0,40,.09),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .18s ease,box-shadow .18s ease;
}
.try-card::after{
  content:'';position:absolute;top:-8px;right:-8px;width:46px;height:46px;opacity:.09;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E60028'%3E%3Cpath d='M12 2.6l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:rotate(10deg);pointer-events:none;
}
.try-card:active{transform:scale(.97)}
.try-ico{
  width:32px;height:32px;border-radius:50%;color:var(--red-deep);
  background:linear-gradient(135deg,#fff,var(--red-soft));
  border:1px solid rgba(230,0,40,.14);
  box-shadow:0 3px 8px rgba(230,0,40,.14);
  display:flex;align-items:center;justify-content:center;
}
.try-ico svg{width:16px;height:16px}
.try-card b{font-size:13px;font-weight:800;color:var(--ink)}
.try-card i{font-size:11px;font-style:normal;color:var(--ink-2)}

/* 对话区 */
.chat-msgs{display:flex;flex-direction:column;gap:10px;padding-bottom:8px}
.chat-msgs[hidden]{display:none}
.bubble{max-width:78%;padding:10px 13px;font-size:13px;line-height:1.6;animation:pop .25s ease}
@keyframes pop{from{transform:scale(.94) translateY(6px);opacity:0}to{transform:none;opacity:1}}
.bubble.ai{background:var(--card);border-radius:16px 16px 16px 4px;box-shadow:var(--sh-card);align-self:flex-start}
.bubble.me{background:linear-gradient(135deg,#FF4D68,var(--red-deep));color:#fff;border-radius:16px 16px 4px 16px;align-self:flex-end;box-shadow:0 5px 12px rgba(230,0,40,.3)}
.chat-typing{display:inline-flex;gap:4px;align-items:center;padding:13px 16px}
.chat-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite}
.chat-typing i:nth-child(2){animation-delay:.2s}
.chat-typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* 卡片式回答 */
.ans-card{max-width:90%;align-self:flex-start;background:var(--card);border-radius:var(--r-md);box-shadow:var(--sh-card);padding:13px;animation:pop .28s ease}
.ans-head{display:flex;align-items:center;gap:10px}
.ans-img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--skin);flex-shrink:0}
.ans-head-info{flex:1;min-width:0}
.ans-name{font-size:13px;font-weight:800;color:var(--ink)}
.ans-sub{font-size:10.5px;color:var(--ink-2);margin-top:2px}
.ans-link{flex-shrink:0;font-size:11px;font-weight:700;color:var(--red-deep);background:var(--red-soft);border-radius:999px;padding:6px 10px}
.ans-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.ac{font-size:10.5px;font-weight:600;color:var(--ink-2);background:var(--gray-soft);border-radius:8px;padding:4px 9px}
.ans-fit{display:flex;gap:6px;margin-top:11px}
.ans-fit .zf{font-size:10.5px;font-weight:700;border-radius:8px;padding:5px 10px}
.ans-note{margin-top:10px;font-size:11.5px;color:var(--ink-2);line-height:1.55;background:var(--gray-soft);border-radius:10px;padding:8px 10px}
.ans-conflict{display:flex;gap:7px;align-items:flex-start;margin-top:11px;font-size:11.5px;line-height:1.5;color:#7A2530;background:var(--red-soft);border-radius:10px;padding:8px 10px}
.ans-conflict svg{width:14px;height:14px;flex-shrink:0;margin-top:1px;color:var(--red)}
.ans-dis{margin-top:10px;font-size:10px;color:var(--ink-3);text-align:center}

/* 反馈与追问 */
.msg-fb{display:flex;gap:7px;align-self:flex-start;padding-left:2px;margin-top:-2px}
.msg-fb .fb-btn{width:26px;height:26px;border-radius:50%;background:var(--card);border:1.5px solid var(--line);color:var(--ink-2);display:flex;align-items:center;justify-content:center}
.msg-fb .fb-btn svg{width:12px;height:12px}
.msg-fb .fb-done{font-size:11px;color:var(--ink-3);padding:5px 2px;margin-top:0}
.fup{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start}
.fup button{font-size:11px;font-weight:600;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;box-shadow:0 2px 6px rgba(28,27,26,.05)}
.fup button.go{color:var(--red-deep);border-color:var(--red-mid);background:var(--red-soft)}

/* 底部输入区 */
.chat-foot{flex-shrink:0;padding:8px 16px 12px;position:relative;z-index:1}
.chat-input-box{display:flex;align-items:center;gap:2px;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:5px 5px 5px 9px;box-shadow:var(--sh-card)}
.ci-btn{width:30px;height:30px;border-radius:50%;color:var(--ink-2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ci-btn svg{width:16px;height:16px}
.chat-input{flex:1;min-width:0;border:none;background:none;padding:7px 6px;font-size:13px;outline:none;color:var(--ink)}
.chat-input::placeholder{color:var(--ink-3)}
.chat-send{width:34px;height:34px;border-radius:50%;flex-shrink:0;color:#fff;background:linear-gradient(135deg,#FF4D68,var(--red-deep));display:flex;align-items:center;justify-content:center;box-shadow:0 5px 12px rgba(230,0,40,.35)}
.chat-send svg{width:15px;height:15px}
.chat-send.paused{background:var(--ink);box-shadow:none}
.chat-send.paused svg{width:13px;height:13px}
.bubble.editable{cursor:pointer}
.bubble.editable:hover{filter:brightness(.97)}
.me-row{display:flex;flex-direction:column;align-items:flex-end;gap:0}
.me-row .bubble.me{margin:0}
.me-actions{
  display:flex;justify-content:flex-end;gap:5px;
  height:0;opacity:0;overflow:hidden;pointer-events:none;
  transform:translateY(-2px);
  transition:opacity .18s ease .45s,transform .18s ease .45s,height .18s ease .45s;
  padding:0 2px 0 0;
}
.me-row:hover .me-actions,
.me-actions:hover{
  height:24px;padding-top:4px;opacity:1;transform:none;pointer-events:auto;
  transition-delay:0s;
}
.me-act{
  width:20px;height:20px;padding:0;border:none;border-radius:6px;
  background:var(--bg);color:var(--ink-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.me-act svg{width:11px;height:11px}
.me-act:hover{color:var(--red);background:var(--red-soft)}
.chat-privacy{text-align:center;font-size:10px;color:var(--ink-3);margin-top:7px}

/* 语音浮层 */
.voice-ov{
  position:absolute;inset:0;z-index:80;border-radius:28px 28px 0 0;
  background:
    radial-gradient(130% 55% at 88% -8%, var(--red-soft) 0%, rgba(253,233,236,0) 58%),
    radial-gradient(90% 42% at -12% 16%, var(--rose) 0%, rgba(245,221,225,0) 55%),
    radial-gradient(85% 46% at 50% 112%, var(--skin-2) 0%, rgba(250,239,240,0) 60%),
    var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 32px 44px;
}
.voice-ov[hidden]{display:none}
.voice-title{position:absolute;top:20px;left:0;right:0;text-align:center;font-size:13px;font-weight:800;color:var(--ink)}
.voice-orb{
  position:relative;width:138px;height:138px;border-radius:50%;color:#fff;
  background:radial-gradient(circle at 32% 28%,#FF6B82,var(--red) 55%,var(--red-deep));
  box-shadow:0 16px 36px rgba(230,0,40,.42);
  display:flex;align-items:center;justify-content:center;
  animation:breath 1.7s ease-in-out infinite;
}
.voice-orb svg{width:48px;height:48px}
.voice-orb::before,.voice-orb::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--red-mid);animation:ripple 1.9s ease-out infinite}
.voice-orb::after{animation-delay:.6s}
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
@keyframes ripple{from{transform:scale(1);opacity:.75}to{transform:scale(1.45);opacity:0}}
.voice-txt{font-size:17px;font-weight:800;color:var(--ink);margin-top:28px}
.voice-sub{font-size:12px;color:var(--ink-2);margin-top:7px}
.voice-timer{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:1.5px;margin-top:12px;font-variant-numeric:tabular-nums}
.voice-ctrl{display:flex;gap:30px;margin-top:32px}
.vc-cancel,.vc-ok{width:56px;height:56px;border-radius:50%;font-size:20px;display:flex;align-items:center;justify-content:center}
.vc-cancel{background:var(--gray-soft);color:var(--ink-2);box-shadow:var(--sh-card)}
.vc-ok{background:linear-gradient(135deg,#FF4D68,var(--red-deep));color:#fff;box-shadow:0 10px 22px rgba(230,0,40,.4)}

/* ===== 登录 ===== */
.login-overlay{
  z-index:80;
  background:
    radial-gradient(500px 340px at 82% -8%, rgba(230,0,40,.07), transparent 60%),
    radial-gradient(420px 340px at 0% 108%, rgba(246,237,231,.95), transparent 60%),
    var(--bg);
}
.login-wrap{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 40px}
.login-logo{
  width:84px;height:84px;border-radius:26px;color:#fff;margin-bottom:18px;
  background:var(--red);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 36px rgba(230,0,40,.35),inset 0 1px 0 rgba(255,255,255,.35);
}
.login-logo svg{width:42px;height:42px}
.login-name{font-size:24px;font-weight:800;letter-spacing:4px;color:var(--ink)}
.login-slogan{font-size:12.5px;color:var(--ink-2);margin-top:8px;letter-spacing:1px}
.login-form{width:100%;margin-top:36px}
.login-field{
  display:flex;align-items:center;gap:10px;background:var(--card);border-radius:var(--r-md);
  padding:13px 16px;box-shadow:var(--sh-card);margin-bottom:13px;border:1.5px solid transparent;
}
.login-field:focus-within{border-color:var(--red)}
.login-field svg{width:17px;height:17px;color:var(--red);flex-shrink:0}
.login-field input{flex:1;border:none;outline:none;font-size:14px;min-width:0;background:transparent;color:var(--ink)}
.login-field input::placeholder{color:var(--ink-3)}
.login-btn{width:100%;margin-top:8px;padding:13px 0;font-size:15px;letter-spacing:6px}
.login-tip{text-align:center;font-size:10.5px;color:var(--ink-3);margin-top:14px}

/* ===== 弹层 ===== */
.modal-mask{
  position:absolute;inset:0;background:rgba(28,27,26,.5);z-index:100;
  display:flex;align-items:center;justify-content:center;border-radius:40px;backdrop-filter:blur(3px);
}
.modal{width:82%;background:var(--card);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-pop);animation:pop .22s ease}
.modal-title{font-size:16px;font-weight:800;margin-bottom:6px;text-align:center}
.modal-sub{font-size:12.5px;color:var(--ink-2);text-align:center;line-height:1.6;margin-bottom:14px}
.copy-fallback{
  user-select:all;-webkit-user-select:all;word-break:break-all;text-align:left;
  background:var(--bg);border-radius:var(--r-sm);padding:10px 12px;
  margin:0 0 6px;max-height:140px;overflow-y:auto;font-size:13px;color:var(--ink);
}
.modal-actions{display:flex;gap:10px}
.modal-actions .btn-ghost,.modal-actions .btn-primary{padding:10px 0}
.reason-item{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;font-size:13px;cursor:pointer}
.reason-item.on{border-color:var(--red);background:var(--red-soft)}
.radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink-3);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.reason-item.on .radio{border-color:var(--red)}
.reason-item.on .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}

/* 周记提醒滚轮 */
.wheel-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;height:170px;
  margin:0 -4px 14px;
}
.wheel-band{
  position:absolute;left:0;right:0;top:68px;height:34px;z-index:1;pointer-events:none;
  background:var(--red-soft);border-top:1.5px solid var(--red-mid);border-bottom:1.5px solid var(--red-mid);
  border-radius:10px;
}
.wheel-col{
  flex:1;max-width:110px;height:100%;overflow-y:auto;position:relative;z-index:2;
  scroll-snap-type:y mandatory;scrollbar-width:none;text-align:center;padding:68px 0;
}
.wheel-col::-webkit-scrollbar{display:none}
.wheel-item{
  height:34px;line-height:34px;font-size:15px;font-weight:600;color:var(--ink-3);
  scroll-snap-align:center;cursor:pointer;font-variant-numeric:tabular-nums;transition:color .15s,font-weight .15s;
}
.wheel-item.on{color:var(--red-deep);font-weight:800}
.wheel-colon{font-size:20px;font-weight:800;color:var(--ink-3);margin:0 6px;position:relative;z-index:2}
.wheel-wrap::before,.wheel-wrap::after{
  content:"";position:absolute;left:0;right:0;height:44px;z-index:3;pointer-events:none;
}
.wheel-wrap::before{top:0;background:linear-gradient(180deg,var(--card),rgba(255,255,255,0))}
.wheel-wrap::after{bottom:0;background:linear-gradient(0deg,var(--card),rgba(255,255,255,0))}
.field-row{margin-bottom:12px}
.field-label{font-size:12.5px;font-weight:700;margin-bottom:6px}
.field-input{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-size:13px;outline:none;background:var(--bg);color:var(--ink)}
.field-input:focus{border-color:var(--red)}
.field-select{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-size:13px;background:var(--bg);outline:none;color:var(--ink)}
.m-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:110px;height:110px;border:1.5px dashed var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--ink-3);font-size:11.5px;font-weight:600;cursor:pointer;overflow:hidden}
.m-photo svg{width:22px;height:22px}
.m-photo.has{border-style:solid;background:var(--skin)}
.m-photo.has img{width:100%;height:100%;object-fit:cover;display:block}
.scan-result{text-align:center;padding:6px 0 2px}
.scan-img{
  width:74px;height:74px;margin:0 auto 10px;border-radius:var(--r-md);object-fit:cover;
  background:var(--skin);display:block;
}
.scan-name{font-size:16px;font-weight:800}
.scan-meta{font-size:12px;color:var(--ink-2);margin-top:5px}
.loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 0}
.spinner{width:38px;height:38px;border:4px solid var(--rose);border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-txt{font-size:12.5px;color:var(--ink-2)}

/* ===== Toast ===== */
.toast{
  position:absolute;left:0;right:0;bottom:96px;margin:0 auto;width:fit-content;
  background:rgba(28,27,26,.92);color:#fff;font-size:13px;border-radius:999px;
  padding:10px 20px;z-index:90;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.3);
  animation:pop .25s ease;
}

/* ===== 化妆包 · 选购清单入口 ===== */
.buy-entry{
  display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r-md);
  padding:13px 14px;box-shadow:var(--sh-card);margin:12px 0;cursor:pointer;
}
.buy-entry:active{transform:scale(.98)}
.buy-entry-ico{
  width:38px;height:38px;border-radius:var(--r-sm);background:var(--red-soft);color:var(--red);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.buy-entry-ico svg{width:19px;height:19px}
.buy-entry-info{flex:1;min-width:0}
.buy-entry-title{font-size:13.5px;font-weight:800;display:flex;align-items:center;gap:7px}
.buy-entry-count{
  font-size:10px;font-weight:700;color:var(--red);background:var(--red-soft);
  border-radius:99px;padding:2.5px 8px;
}
.buy-entry-sub{font-size:11px;color:var(--ink-2);margin-top:3px}

/* ===== 个人资料 ===== */
#profile-card{cursor:pointer}
.acct-head{display:flex;flex-direction:column;align-items:center;gap:10px;margin:6px 0 16px}
.acct-avatar{
  position:relative;width:88px;height:88px;border-radius:50%;cursor:pointer;flex-shrink:0;
}
.acct-avatar img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:3px solid #fff;box-shadow:var(--sh-card);background:var(--skin);display:block;
}
.acct-avatar-edit{
  position:absolute;right:0;bottom:2px;width:26px;height:26px;border-radius:50%;
  background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}
.acct-avatar-edit svg{width:13px;height:13px}
.acct-tip{font-size:11px;color:var(--ink-3)}

/* ===== 链接拆解确认弹窗 ===== */
.cf-loading{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 0}
.cf-loading .loading-txt{font-size:12px;color:var(--ink-2)}
.cf-card{
  display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:var(--r-md);
  padding:10px 12px;margin-bottom:10px;
}
.cf-img{
  width:58px;height:58px;border-radius:var(--r-sm);overflow:hidden;flex-shrink:0;cursor:pointer;
  background:var(--skin);position:relative;
}
.cf-img img{width:100%;height:100%;object-fit:cover;display:block}
.cf-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink-3)}
.cf-ph svg{width:18px;height:18px}
.cf-ph i{font-style:normal;font-size:9.5px;font-weight:600}
.cf-info{flex:1;min-width:0}
.cf-name{font-size:13.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-cat{font-size:11px;color:var(--red);font-weight:700;margin-top:3px}
.cf-ings{font-size:11px;color:var(--ink-2);margin-top:3px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== 截图识别 & 清单勾销 & 聊天图片 ===== */
.m-scan-row{display:flex;align-items:center;gap:10px}
.m-scan{
  display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--bg);color:var(--ink-2);
  font-size:12.5px;font-weight:600;flex-shrink:0;
}
.m-scan svg{width:15px;height:15px;color:var(--red)}
.m-scan:disabled{opacity:.6}
.m-scan-tip{font-size:11px;color:var(--ink-3);line-height:1.6}
.buy-empty{
  display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--bg);
  border-radius:var(--r-sm);font-size:12px;color:var(--ink-2);line-height:1.6;
}
.buy-empty svg{width:16px;height:16px;color:var(--red);flex-shrink:0}
.buy-done{
  display:flex;align-items:flex-start;gap:6px;margin-top:10px;padding:0 4px;
  font-size:11px;color:var(--ink-3);line-height:1.6;
}
.buy-done svg{width:13px;height:13px;color:var(--red);flex-shrink:0;margin-top:2px}
.bubble.me.has-img{padding:6px;display:flex;flex-wrap:wrap;gap:6px}
.bubble-img{
  width:112px;height:112px;object-fit:cover;object-position:center;
  border-radius:11px;display:block;flex-shrink:0;cursor:zoom-in;
  border:1px solid rgba(20,18,17,.06);
}
.img-viewer{
  position:fixed;inset:0;z-index:130;background:rgba(20,18,17,.92);
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;
}
.img-viewer img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:8px;
}

/* ===== 真手机上由系统状态栏显示真实时间，隐藏演示用的假状态栏 ===== */
@media (hover:none) and (pointer:coarse){
  .statusbar{display:none}
}

/* ===== 移动端全屏 ===== */
@media (max-width:520px){
  body{background:var(--bg)}
  .stage{padding:0}
  .stage-brand{display:none}
  .phone{width:100vw;height:100vh;height:100dvh;border:none;border-radius:0;box-shadow:none}
  .screen{border-radius:0}
  .overlay{border-radius:0}
  .modal-mask{border-radius:0}
  .chat-sheet{border-radius:0}
}