/* ===== 情绪符号页面（情绪表盘 + 拖动滑杆 + 表情包） ===== */
/* 进入页面不跳：禁用平滑滚动 / 滚动吸附 / 滚动锚定 */
html.symbols-root{scroll-snap-type:none;scroll-behavior:auto;overflow-anchor:none}


.symbols-page{min-height:100svh;display:flex;flex-direction:column}
.symbols-page main{flex:1 0 auto}
.symbols-page .site-footer{flex-shrink:0}
.sym-container{width:min(100%,var(--desktop-content,1200px));margin:0 auto;padding:0 20px}
@media (min-width:1024px){
  .symbols-page main>section{min-height:0;scroll-snap-align:none}
}

/* Hero */
.sym-hero{padding:calc(84px + var(--safe-top)) 0 10px;text-align:center;background:radial-gradient(90% 80% at 50% 0%,rgba(255,107,61,.1),transparent 55%),linear-gradient(180deg,#f7f7f9,#f0f1f4)}
.sym-hero .eyebrow{margin-bottom:10px}
.sym-hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.14;letter-spacing:.02em}
.sym-hero-sub{margin-top:10px;color:#6e6e73!important;font-size:15px;line-height:1.7}

/* 分栏 */
.sym-showcase{padding:26px 0 0}
.sym-layout{display:grid;grid-template-columns:minmax(320px,440px) minmax(0,1fr);gap:clamp(36px,6vw,84px);align-items:center;width:min(100%,1040px);margin:0 auto}

/* 左：情绪表盘（复用 .emotion 作用域样式） */
.sym-visual{display:flex;align-items:center;gap:10px;justify-content:center;width:min(100%,440px)}
.sym-arrow{width:52px;height:52px;flex:0 0 auto;padding:0;border:1px solid rgba(29,29,31,.1);border-radius:50%;background:#fff;color:#1d1d1f;font-size:24px;line-height:1;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease}
.sym-arrow:hover{border-color:rgba(255,107,61,.4);box-shadow:0 10px 24px rgba(30,35,48,.12)}
.sym-arrow:active{transform:scale(.93)}
/* 中和 .emotion 的整屏样式，只保留表盘作用域规则 */
.sym-emotion{background:transparent;color:#1d1d1f;padding:0;margin:0;display:block;width:300px;max-width:100%}
.sym-emotion .emotion-watch{width:min(100%,300px);min-height:0;margin:0 auto}
.sym-emotion .emotion-watch img{width:min(100%,300px);filter:drop-shadow(0 24px 32px rgba(66,79,106,.28))}
.sym-emotion .emotion-watch-composite{width:min(100%,300px)}
.sym-watch-caption{margin:10px 0 0;color:#9a9da8;font-size:12px;font-weight:650;letter-spacing:.05em;text-align:center}

/* 右：当前情绪 + 滑杆 + 快捷 + 表情包 */
.sym-controls{text-align:left}
.sym-now{margin-bottom:20px}
.sym-now-eyebrow{display:block;margin-bottom:8px;color:var(--orange);font-size:12px;font-weight:720;letter-spacing:.08em}
.sym-now-name{display:block;color:#1d1d1f;font-size:clamp(26px,4vw,40px);font-weight:800;line-height:1.1;letter-spacing:-.01em}
.sym-controls .emotion-slider{width:100%;max-width:none;margin:0 0 24px;text-align:left}
.sym-controls .emotion-state-copy{justify-items:start}
/* 去掉「当前心情状态」文案后保留占位，避免下方滑杆上移 */
.sym-controls .emotion-state-copy{height:64px}
.sym-controls .emotion-range{margin:0}
.sym-controls .emotion-category-labels{margin-left:0;margin-right:0}
/* 快捷情绪：默认收起，点击展开 */
.sym-mini-box{margin-bottom:26px}
.sym-mini-toggle{display:flex;width:100%;align-items:center;gap:12px;padding:10px 14px;border:1px solid rgba(29,29,31,.08);border-radius:16px;background:#fff;color:inherit;box-shadow:0 8px 22px rgba(30,35,48,.06);cursor:pointer;text-align:left;transition:border-color .22s ease,box-shadow .22s ease,transform .2s ease}
.sym-mini-toggle:hover{border-color:rgba(255,107,61,.4);box-shadow:0 10px 24px rgba(30,35,48,.1);transform:translateY(-1px)}
.sym-mini-toggle-face{display:grid;width:38px;height:38px;flex:0 0 auto;place-items:center;border-radius:50%;background:#f3f3f5;overflow:hidden}
.sym-mini-toggle-face img{width:32px;height:32px;object-fit:contain}
.sym-mini-toggle-copy{display:grid;gap:1px;min-width:0;flex:1 1 auto}
.sym-mini-toggle-copy small{color:var(--orange);font-size:10px;font-weight:720;letter-spacing:.08em}
.sym-mini-toggle-copy strong{overflow:hidden;color:#1d1d1f;font-size:15px;font-weight:760;letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap}
.sym-mini-toggle-action{display:flex;flex:0 0 auto;align-items:center;gap:6px;color:#6e6e73;font-size:12px;font-weight:650}
.sym-mini-chevron{display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:#f0f1f4;color:#1d1d1f;font-size:17px;font-style:normal;line-height:1;transition:transform .3s cubic-bezier(.22,.8,.22,1)}
.sym-mini-box.is-open .sym-mini-chevron{transform:rotate(180deg)}
.sym-mini-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.22,.8,.22,1)}
.sym-mini-wrap>div{overflow:hidden;min-height:0}
.sym-mini-box.is-open .sym-mini-wrap{grid-template-rows:1fr}
.sym-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px 6px;margin-top:12px}
.sym-mini-btn{display:grid;gap:3px;padding:6px 4px;border:2px solid transparent;border-radius:12px;background:#fff;color:#6e6e73;font-size:10px;font-weight:650;text-align:center;cursor:pointer;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.sym-mini-btn img{width:38px;height:38px;margin:0 auto;object-fit:contain;border-radius:50%;background:#f3f3f5;box-shadow:0 0 0 1px color-mix(in srgb,var(--dot) 35%,transparent)}
.sym-mini-btn:hover{transform:translateY(-2px)}
.sym-mini-btn.active{border-color:var(--orange);box-shadow:0 8px 18px rgba(255,107,61,.16)}
.sym-mini-btn.active img{box-shadow:0 0 0 2px var(--orange)}
.sym-packs{display:flex;flex-wrap:wrap;gap:12px;padding-bottom:8px}
.sym-pack-thumb{display:grid;grid-template-columns:repeat(5,1fr);flex:1 1 150px;min-width:132px;gap:3px;padding:8px;border:2px solid transparent;border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(30,35,48,.06);cursor:pointer;transition:border-color .22s ease,transform .2s ease,box-shadow .22s ease}
.sym-pack-thumb:hover{transform:translateY(-2px)}
.sym-pack-thumb.active{border-color:var(--orange);box-shadow:0 12px 28px rgba(255,107,61,.18)}
.sym-pack-thumb img{width:22px;height:22px;object-fit:contain;border-radius:5px;background:#f3f3f5}
.sym-pack-thumb small{grid-column:1/-1;margin-top:5px;text-align:center;color:#6e6e73;font-size:10px;font-weight:680;white-space:nowrap}

@media(max-width:899px){
  .sym-layout{grid-template-columns:1fr;gap:30px}
  .sym-visual{margin:0 auto}
  .sym-controls{text-align:center}
  .sym-mini,.sym-packs{justify-content:center}
  .sym-now-eyebrow,.sym-now-name{text-align:center}
  .sym-controls .emotion-slider{text-align:center}
  .sym-controls .emotion-state-copy{justify-items:center}
}
@media(max-width:479px){
  .sym-visual{gap:8px;width:100%}
  .sym-arrow{width:38px;height:38px;font-size:18px}
  .sym-emotion{width:224px;max-width:100%}
  .sym-emotion .emotion-watch{width:224px;max-width:100%}
  .sym-emotion .emotion-watch img{width:224px;max-width:100%}
  .sym-emotion .emotion-watch-composite{width:224px;max-width:100%}
}

.sym-packs-hint{margin:2px 0 0;color:#9a9da8;font-size:12px;font-weight:600;letter-spacing:.03em;text-align:right}
.sym-packs-hint i{margin-left:4px;color:var(--orange);font-style:normal}

/* ===== 首页情绪符号区块：一屏展示 ===== */
#symbols.section{min-height:100svh;padding-top:calc(72px + var(--safe-top));padding-bottom:44px}
#symbols .sym-controls .emotion-state-copy{height:32px}
#symbols .section-copy{margin-bottom:12px}
#symbols .section-copy h2{font-size:clamp(28px,3.4vw,42px);line-height:1.16;margin-bottom:10px}
#symbols .section-copy p{font-size:14px;line-height:1.55}
#symbols .sym-showcase{padding-top:0}
#symbols .sym-layout{gap:clamp(24px,3vw,48px)}
@media (min-width:1024px){
  #symbols.section{display:flex;flex-direction:column;justify-content:center}
}