/* ============================================================
   components.css 公共组件层
   作用：手机外壳 / 顶部HUD / 行情跑马灯 / 底部Tab / 玻璃卡片 /
        渐变按钮 / 分段选择 / 纯度筹码 / 阻尼滑块 / 步进器 /
        输入框 / 设置分组 / 底部上滑弹层
   ============================================================ */

/* ---------- 手机外壳：桌面浏览时呈设备框，移动端全屏 ----------
   移动端用 fixed+inset:0 物理铺满：iOS Safari/主屏模式下 100dvh
   在地址栏伸缩与独立 App 模式间存在差值，fixed 根治底部黑边 */
.pm-app{
  width:100%;max-width:480px;height:100vh;height:100dvh;margin:0 auto;
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(620px 340px at 88% -6%,var(--glow-b),transparent 62%),
    radial-gradient(680px 420px at -12% 12%,var(--glow-a),transparent 60%),
    var(--bg);
}
@media(max-width:559px){
  /* 壳底向下延伸 120px 到 Safari 底部地址栏的毛玻璃材质底下：
     地址栏半透明材质透出页面深蓝而不是系统纯黑（黑条观感根源），
     这是网页嵌入 iOS 系统地址栏区域的唯一手段 */
  .pm-app{position:fixed;top:0;right:0;left:0;bottom:-120px;max-width:none;height:auto;}
}
@media(min-width:560px){
  body{display:flex;align-items:center;justify-content:center;}
  .pm-app{height:94vh;height:94dvh;border-radius:34px;border:9px solid #0c0f16;
    box-shadow:0 0 90px rgba(0,0,0,.7),0 0 0 1px var(--line);}
}

/* ---------- 顶部 HUD：店名 + 时钟 + TV入口 ---------- */
.pm-header{flex:none;padding:calc(env(safe-area-inset-top) + 12px) 14px 0;position:relative;z-index:20;}
.pm-hud{display:flex;align-items:center;gap:10px;}
.pm-logo{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;color:#1a1300;
  background:linear-gradient(135deg,var(--gold-1),var(--gold-3));
  box-shadow:0 6px 16px rgba(245,197,24,.3);}
.pm-hud__title{font-family:var(--font-display);font-size:1.06rem;font-weight:800;letter-spacing:1.5px;}
.pm-hud__sub{font-size:.66rem;color:var(--text-faint);margin-top:1px;}
.pm-hud__right{margin-left:auto;text-align:right;}
.pm-hud__clock{display:flex;align-items:center;gap:6px;justify-content:flex-end;
  font-size:.72rem;color:var(--text-dim);}
.pm-icon-btn{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  color:var(--text-dim);background:var(--field-bg);border:1px solid var(--line);
  transition:transform .15s,color .15s;}
.pm-icon-btn:active{transform:scale(.9);}
.pm-icon-btn:hover{color:var(--text-accent);}

/* ---------- 第一层：行情跑马灯 ---------- */
.pm-ticker{margin-top:10px;height:34px;flex:none;display:flex;align-items:center;overflow:hidden;
  border-radius:10px;border:1px solid var(--line);
  background:linear-gradient(90deg,rgba(245,197,24,.08),transparent 45%,rgba(245,197,24,.04));}
.pm-ticker__track{display:inline-flex;white-space:nowrap;padding-left:12px;
  animation:pm-ticker 26s linear infinite;
  will-change:transform;transform:translateZ(0);   /* 强制合成层：iOS Safari 动态内容后动画易失效 */
  -webkit-backface-visibility:hidden;backface-visibility:hidden;}
.pm-ticker:hover .pm-ticker__track{animation-play-state:paused;}
.pm-ticker__item{display:inline-flex;align-items:center;gap:6px;margin-right:30px;
  font-size:.72rem;color:var(--text-dim);}
.pm-ticker__item::before{content:"";width:4px;height:4px;flex:none;border-radius:50%;
  background:rgba(245,197,24,.6);}
.pm-ticker__item b{color:var(--text);font-weight:700;}
@keyframes pm-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 内容滚动区 ---------- */
.pm-screen{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));}
.pm-screen::-webkit-scrollbar{display:none;}
.pm-page{display:none;animation:pm-page-in .25s ease;}
.pm-page.is-active{display:block;}
@keyframes pm-page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 分区小标题：细线收尾，安静留白 */
.pm-sec{display:flex;align-items:center;gap:9px;margin:18px 2px 10px;
  font-size:.82rem;font-weight:700;color:var(--text-dim);letter-spacing:1px;}
.pm-sec::after{content:"";flex:1;height:1px;background:var(--line);}
.pm-sec:first-child{margin-top:2px;}

/* ---------- 玻璃卡片 ---------- */
.pm-card{position:relative;overflow:hidden;border-radius:var(--radius);padding:14px;
  background:var(--card-grad);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow);}

/* ---------- 按钮：金/蓝渐变 + 阴影 + 按压缩放 ---------- */
.pm-btn{min-height:46px;padding:0 18px;border-radius:13px;font-weight:800;font-size:.95rem;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .15s,box-shadow .15s,filter .15s;}
.pm-btn:active{transform:scale(.96);}
@media(hover:hover){.pm-btn:hover{transform:scale(1.02);}}
.pm-btn--gold{background:linear-gradient(135deg,var(--gold-1),var(--gold-2));color:var(--accent-ink);
  box-shadow:0 8px 22px rgba(245,197,24,.28);}
.pm-btn--ghost{background:var(--field-bg);border:1px solid var(--line);color:var(--text-dim);
  font-weight:700;min-height:42px;}
.pm-btn--block{width:100%;}

/* ---------- 分段选择器（黄金/白银、暗黑/明亮） ---------- */
.pm-seg{display:flex;gap:4px;padding:4px;border-radius:13px;background:var(--field-bg);
  border:1px solid var(--line);}
.pm-seg button{flex:1;min-height:42px;border-radius:10px;font-weight:700;font-size:.86rem;
  color:var(--text-dim);display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .18s;}
.pm-seg button.is-on{background:linear-gradient(135deg,var(--gold-1),var(--gold-2));color:var(--accent-ink);
  box-shadow:0 4px 12px rgba(245,197,24,.28);}

/* ---------- 纯度筹码 ---------- */
.pm-chips{display:flex;gap:8px;flex-wrap:wrap;}
.pm-chip{flex:1;min-width:64px;min-height:52px;border-radius:12px;text-align:center;
  border:1px solid var(--line);background:var(--field-bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:all .16s;}
.pm-chip:active{transform:scale(.95);}
.pm-chip b{font-size:.84rem;font-weight:800;color:var(--text);}
.pm-chip span{font-size:.62rem;color:var(--text-faint);}
.pm-chip.is-on{border-color:var(--text-accent);box-shadow:inset 0 0 0 1px var(--text-accent);
  background:rgba(245,197,24,.12);}

/* ---------- 克重输入 + 阻尼滑块 + 步进按钮 ---------- */
.pm-weight{display:flex;align-items:center;gap:12px;}
.pm-step{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:var(--field-bg);border:1px solid var(--line);color:var(--text-dim);
  transition:transform .12s;}
.pm-step:active{transform:scale(.88);color:var(--gold-1);}
.pm-weight__num{flex:1;text-align:center;}
.pm-weight__num input{width:100%;background:transparent;text-align:center;font-size:1.7rem;font-weight:800;
  font-variant-numeric:tabular-nums;min-width:0;}
.pm-weight__num small{display:block;font-size:.64rem;color:var(--text-faint);margin-top:2px;}
.pm-range{width:100%;height:34px;margin-top:4px;appearance:none;-webkit-appearance:none;background:transparent;}
.pm-range::-webkit-slider-runnable-track{height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-1) var(--p,0%),var(--field-bg) var(--p,0%));
  border:1px solid var(--line);}
.pm-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;
  background:linear-gradient(135deg,#fff3c4,var(--gold-1));border:2px solid var(--gold-3);
  box-shadow:0 0 0 5px rgba(245,197,24,.16),0 3px 10px rgba(0,0,0,.4);}
.pm-range::-moz-range-track{height:6px;border-radius:99px;background:var(--field-bg);border:1px solid var(--line);}
.pm-range::-moz-range-progress{height:6px;border-radius:99px;background:var(--gold-1);}
.pm-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#fff3c4,var(--gold-1));border:2px solid var(--gold-3);}

/* ---------- 通用输入框（字号≥16px 防 iOS 缩放） ---------- */
.pm-input{width:100%;min-height:46px;padding:10px 14px;border-radius:12px;font-size:16px;
  background:var(--field-bg);border:1px solid var(--line);text-align:right;
  font-variant-numeric:tabular-nums;}
.pm-input:focus{border-color:var(--gold-1);box-shadow:0 0 0 3px rgba(245,197,24,.15);}

/* ---------- 设置分组行 ---------- */
.pm-group{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--card-grad);box-shadow:var(--shadow);}
.pm-group+.pm-group{margin-top:12px;}
.pm-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;
  border-bottom:1px solid var(--line);}
.pm-row:last-child{border-bottom:0;}
.pm-row__ico{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  color:var(--text-accent);background:var(--field-bg);}
.pm-row__txt{font-size:.88rem;font-weight:600;}
.pm-row__hint{font-size:.66rem;color:var(--text-faint);margin-top:2px;}
.pm-row__ctl{margin-left:auto;flex:none;}

/* ---------- 底部 Tab 栏：文档流常驻，任何 iOS 视口状态下必然贴底 ---------- */
.pm-tabbar{position:relative;flex:none;
  height:calc(62px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  display:flex;border-top:1px solid var(--line);
  background:var(--bg-soft);}   /* 实色：safe-area 区不透黑，不依赖毛玻璃 */
.pm-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--text-faint);font-size:.66rem;transition:color .15s;}
.pm-tab.is-on{color:var(--text-accent);}
.pm-tab__ico{display:grid;place-items:center;}

/* ---------- 半透遮罩 + 底部上滑卡片（联系方式等） ---------- */
.pm-modal{position:absolute;inset:0;z-index:60;display:none;align-items:flex-end;
  background:rgba(4,7,14,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.pm-modal.is-show{display:flex;animation:pm-fade .2s ease;}
@keyframes pm-fade{from{opacity:0}to{opacity:1}}
.pm-sheet{width:100%;border-radius:22px 22px 0 0;padding:18px 18px calc(22px + env(safe-area-inset-bottom));
  background:var(--card-grad);border:1px solid var(--line-strong);border-bottom:0;
  box-shadow:0 -14px 44px rgba(0,0,0,.5);animation:pm-sheet-up .26s cubic-bezier(.2,.8,.3,1);max-height:86%;overflow-y:auto;}
@keyframes pm-sheet-up{from{transform:translateY(100%)}to{transform:none}}
.pm-sheet__head{display:flex;align-items:center;margin-bottom:14px;}
.pm-sheet__title{font-family:var(--font-display);font-size:1.06rem;font-weight:800;letter-spacing:1.5px;}
.pm-sheet__close{margin-left:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--text-faint);background:var(--field-bg);}

/* ---------- iOS 视口适配覆盖（必须置于文件末尾：同特异性下后声明才生效，
   曾因写在前部被基础规则覆盖致 Tab 栏滑出屏幕外） ---------- */
@media(max-width:559px){
  /* 壳向下延伸 120px 后内容底部被 fixed Tab 栏遮挡，滚动区补足留白：
     120（延伸壳）+ 62（fixed Tab 栏）+ 12（呼吸间距）≈ 194px，
     滚到底时末行内容恰好停在 Tab 栏上缘 12px 处，不再被压在栏下 */
  .pm-screen{padding-bottom:calc(194px + min(env(safe-area-inset-bottom),12px));}
  /* Tab 栏改视口贴底（壳延伸后文档流会跑出屏外）+ 下沉贴 Home Indicator：
     安全区垫高从 34px 收紧到 12px（指示条仅占屏底约 8-13pt，紧凑且不压条）；
     Safari 地址栏展开时安全区为 0，自动无垫贴住地址栏顶 */
  .pm-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;
    height:calc(62px + min(env(safe-area-inset-bottom),12px));
    padding-bottom:min(env(safe-area-inset-bottom),12px);}
  /* 弹层改视口定位：壳向下延伸后 absolute 会跟着偏出屏幕 */
  .pm-modal{position:fixed;}
}