/* ===== 手机 UI 模拟器 · shirokumayx.com/simulator/phone ===== */

:root{
  --bg:#070b16;
  --bg-2:#0B1120;
  --txt:#E6EDF7;
  --dim:#8FA1B8;
  --line:rgba(148,163,184,.16);
  --glass:rgba(255,255,255,.045);
  --acc:#38BDF8;
  --acc-2:#A78BFA;
  --dy:#FE2C55;
  --dy-2:#25F4EE;
  --xhs:#FF2442;
  --tt:#F04142;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(148,163,184,.35)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:1260px;margin:0 auto;padding:0 22px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--acc)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:74px 0 46px;
  background:linear-gradient(180deg,#0B1120 0%,#0B1120 55%,#070b16 100%)}
.hero__grid,.hero__glow{position:absolute;inset:0;pointer-events:none}
.hero__grid{
  background-image:
    linear-gradient(rgba(148,163,184,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.085) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 18%,transparent 74%);
  mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 18%,transparent 74%);
}
.hero__glow{
  background:
    radial-gradient(420px 260px at 16% 8%,rgba(56,189,248,.20),transparent 70%),
    radial-gradient(460px 300px at 84% 16%,rgba(167,139,250,.18),transparent 72%);
  filter:blur(6px);
}
.hero__inner{position:relative}
.eyebrow{margin:0 0 12px;font-size:12px;letter-spacing:.28em;color:var(--acc);font-weight:600}
.hero h1{margin:0 0 16px;font-size:clamp(36px,5.6vw,60px);line-height:1.08;letter-spacing:-.02em;font-weight:800}
.grad{background:linear-gradient(100deg,#7DD3FC 0%,#A78BFA 52%,#F0ABFC 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 22px rgba(125,211,252,.35))}
.lede{max-width:720px;margin:0 0 26px;color:#B7C6DB;font-size:16px}
.facts{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.facts li{
  min-width:150px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);
  background:var(--glass);backdrop-filter:blur(8px)
}
.facts b{display:block;font-size:17px;color:#fff;font-variant-numeric:tabular-nums}
.facts span{font-size:12px;color:var(--dim)}

/* ---------- 布局 ---------- */
.tool{display:grid;grid-template-columns:344px minmax(0,1fr);gap:26px;padding-top:36px;padding-bottom:64px;align-items:start}
@media (max-width:1000px){.tool{grid-template-columns:1fr}}

/* ---------- 控制面板 ---------- */
.panel{
  position:sticky;top:62px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  backdrop-filter:blur(10px);padding:6px 18px 18px;
  box-shadow:0 18px 44px rgba(0,0,0,.35)
}
@media (max-width:1000px){.panel{position:static}}
.field{padding:16px 0;border-bottom:1px solid var(--line)}
.field:last-child{border-bottom:0;padding-bottom:0}
.field__title{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:13.5px;font-weight:700;color:#DCE7F5;letter-spacing:.02em}
.field__title i{
  font-style:normal;font-size:10.5px;font-weight:800;color:var(--acc);
  border:1px solid rgba(56,189,248,.45);border-radius:6px;padding:1px 5px;line-height:1.5
}

.res{display:flex;gap:8px;align-items:center}
.res input{
  flex:1;min-width:0;padding:11px 13px;border-radius:11px;border:1px solid rgba(148,163,184,.28);
  background:rgba(6,10,20,.75);color:#fff;font-size:16px;font-weight:600;letter-spacing:.04em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;outline:none;transition:border-color .18s,box-shadow .18s
}
.res input:focus{border-color:rgba(56,189,248,.7);box-shadow:0 0 0 3px rgba(56,189,248,.16)}
.res input.is-bad{border-color:rgba(248,113,113,.85);box-shadow:0 0 0 3px rgba(248,113,113,.15)}
.ghost-btn{
  width:42px;height:42px;flex:none;border-radius:11px;border:1px solid rgba(148,163,184,.28);
  background:rgba(148,163,184,.09);color:#CBD8E8;font-size:17px;cursor:pointer;transition:.18s
}
.ghost-btn:hover{background:rgba(56,189,248,.16);border-color:rgba(56,189,248,.5);color:#fff;transform:translateY(-1px)}
.hint{margin:9px 2px 0;font-size:12px;color:var(--dim)}
.hint.is-err{color:#FCA5A5}

.pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.pills button{
  padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(148,163,184,.08);
  color:#C2D0E2;font-size:11.5px;cursor:pointer;transition:.16s;font-variant-numeric:tabular-nums
}
.pills button:hover{border-color:rgba(56,189,248,.55);color:#fff;background:rgba(56,189,248,.14)}
.pills button.is-on{border-color:rgba(56,189,248,.7);background:rgba(56,189,248,.2);color:#fff}

.apps{display:flex;flex-direction:column;gap:9px}
.app-btn{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:13px;text-align:left;
  border:1px solid var(--line);background:rgba(148,163,184,.06);color:var(--txt);cursor:pointer;transition:.18s
}
.app-btn:hover{border-color:rgba(148,163,184,.4);transform:translateY(-1px)}
.app-btn.is-on{border-color:rgba(56,189,248,.6);background:linear-gradient(100deg,rgba(56,189,248,.16),rgba(167,139,250,.14));
  box-shadow:0 8px 26px rgba(56,189,248,.16)}
.app-btn__ico{
  width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;
  font-size:16px;font-weight:800;color:#fff
}
.app-btn__ico--dy{background:linear-gradient(135deg,#FE2C55,#25F4EE)}
.app-btn__ico--xhs{background:linear-gradient(135deg,#FF2442,#FF6B81)}
.app-btn__ico--tt{background:linear-gradient(135deg,#F04142,#FF7A45)}
.app-btn__txt b{display:block;font-size:14.5px;font-weight:700}
.app-btn__txt em{font-style:normal;font-size:11.5px;color:var(--dim)}

.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;font-size:13.5px;color:#C6D3E4}
.row--tight{padding:6px 0 0}
.row input[type=text]{
  width:86px;padding:6px 10px;border-radius:9px;border:1px solid rgba(148,163,184,.3);
  background:rgba(6,10,20,.7);color:#fff;font-size:13px;text-align:center;outline:none
}
.row input[type=checkbox]{
  appearance:none;-webkit-appearance:none;width:40px;height:23px;border-radius:999px;position:relative;
  background:rgba(148,163,184,.22);border:1px solid var(--line);cursor:pointer;transition:.2s;flex:none
}
.row input[type=checkbox]::after{
  content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:#fff;transition:.2s;opacity:.85
}
.row input[type=checkbox]:checked{background:linear-gradient(90deg,#38BDF8,#A78BFA);border-color:transparent}
.row input[type=checkbox]:checked::after{left:19px;opacity:1}

.zoom{margin-top:12px}
.zoom__head{display:flex;justify-content:space-between;font-size:13px;color:#C6D3E4}
.zoom__head b{color:var(--acc);font-variant-numeric:tabular-nums}
.zoom input[type=range]{width:100%;margin:9px 0 2px;accent-color:#38BDF8;cursor:pointer}
.zoom input[type=range]:disabled{opacity:.4;cursor:not-allowed}

/* ---------- 舞台 ---------- */
.stage{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.012))}
.stage__bar{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.stage__bar .dot{width:7px;height:7px;border-radius:50%;background:#34D399;box-shadow:0 0 10px rgba(52,211,153,.8);flex:none}
.stage__viewport{
  height:min(76vh,820px);min-height:460px;display:grid;place-items:center;padding:26px 16px;
  /* 背景亮度可调：--vp-* 由面板「背景亮度」滑块写入，0% = 黑暗，100% = 白亮 */
  --vp-1:#0a1020;--vp-2:#05080f;--vp-grid:rgba(148,163,184,.055);--vp-glow:rgba(56,189,248,.10);
  background:
    radial-gradient(600px 320px at 50% 0%,var(--vp-glow),transparent 70%),
    repeating-linear-gradient(90deg,var(--vp-grid) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(0deg,var(--vp-grid) 0 1px,transparent 1px 46px),
    linear-gradient(180deg,var(--vp-1),var(--vp-2));
  transition:background-color .2s ease
}
.stage__hint{margin:0;padding:10px 16px 14px;font-size:12px;color:var(--dim);border-top:1px solid var(--line)}

/* ---------- 3D 预览侧边菜单（嵌入预览窗内，随手可调） ---------- */
.stage__body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
.d3menu{
  width:208px;flex:none;display:flex;flex-direction:column;gap:10px;
  padding:12px 14px 14px;border-left:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  font-size:12.5px;color:#C6D3E4;
  transition:width .22s ease,padding .22s ease
}
.stage.is-menu-fold .d3menu{width:0;padding-left:0;padding-right:0;border-left-color:transparent;overflow:hidden}
.d3menu__head{display:flex;align-items:center;gap:8px;padding-bottom:9px;border-bottom:1px solid var(--line);
  font-size:11.5px;letter-spacing:.16em;color:var(--dim);font-weight:600}
.d3menu__fold{
  margin-left:auto;width:26px;height:23px;border-radius:8px;cursor:pointer;line-height:1;font-size:15px;
  border:1px solid rgba(148,163,184,.28);background:rgba(148,163,184,.08);color:#C2D0E2;transition:.16s
}
.d3menu__fold:hover{border-color:rgba(56,189,248,.55);background:rgba(56,189,248,.16);color:#fff}
.d3menu .row{gap:8px;padding:0;font-size:12.5px}
.d3menu__label{display:block;font-size:11.5px;color:var(--dim);margin-bottom:7px}
.d3menu .zoom__head{font-size:12.5px}
.d3menu input[type=range]{width:100%;margin:9px 0 8px;accent-color:#38BDF8;cursor:pointer}
.d3menu .hint{margin:0;font-size:11.5px;line-height:1.55}
.d3menu select{
  width:100%;padding:8px 10px;margin-bottom:9px;font-size:12px;font-family:inherit;cursor:pointer;
  border-radius:10px;border:1px solid rgba(148,163,184,.3);background:rgba(6,10,20,.7);color:#fff;outline:none;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#7f8ea6 50%),linear-gradient(135deg,#7f8ea6 50%,transparent 50%);
  background-position:calc(100% - 16px) 15px,calc(100% - 11px) 15px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.d3menu select:focus{border-color:rgba(56,189,248,.65)}
.d3menu .mini-btns--wide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%}
.d3menu .mini-btns--tri{grid-template-columns:repeat(3,minmax(0,1fr))}
.d3menu .mini-btns--wide button{
  min-width:0;padding:8px 2px;font-size:11.5px;text-align:center;white-space:nowrap}
.d3fab{
  position:absolute;top:10px;right:10px;z-index:6;width:44px;height:34px;border-radius:10px;cursor:pointer;
  font-size:12px;font-weight:700;letter-spacing:.06em;backdrop-filter:blur(6px);transition:.16s;
  border:1px solid rgba(56,189,248,.45);background:rgba(8,14,26,.72);color:#7DD3FC
}
.d3fab:hover{background:rgba(56,189,248,.22);color:#fff}
.d3fab[hidden]{display:none}

@media (max-width:1180px){
  .stage__body{grid-template-columns:minmax(0,1fr)}
  .d3menu,.stage.is-menu-fold .d3menu{
    width:auto;padding:12px 14px 14px;overflow:visible;
    border-left:0;border-top:1px solid var(--line)}
  .d3fab,.d3menu__fold{display:none}
}

/* ---------- 应用专属选项（切到对应应用才显示） ---------- */
.appopts{margin-top:12px;padding-top:11px;border-top:1px dashed rgba(148,163,184,.3)}
.appopt{display:none}
.appopt.is-on{display:block}
.appopt__label{display:block;font-size:12px;color:var(--dim);margin-bottom:8px}
.appopt .mini-btns--wide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%}
.appopt .mini-btns--wide button{min-width:0;padding:8px 6px;font-size:12.5px;text-align:center;white-space:nowrap}
.appopt .mini-btns--wide button.is-on,
.d3menu .mini-btns--wide button.is-on{
  border-color:rgba(56,189,248,.7);background:rgba(56,189,248,.2);color:#fff}
.appopt .hint{margin-top:8px}
.appopt .zoom__head{font-size:12.5px;color:#C6D3E4}
.appopt .zoom__head b{color:var(--acc);font-variant-numeric:tabular-nums}
.appopt input[type=range]{width:100%;margin:8px 0 2px;accent-color:#38BDF8;cursor:pointer}

/* ---------- 手机机身（内部按逻辑像素 360 宽设计，整体 scale 缩放） ---------- */
.device-scaler{position:relative}
.device{position:absolute;left:0;top:0;transform-origin:top left;will-change:transform}
.device__frame{
  position:relative;width:var(--scr-w,360px);box-sizing:content-box;
  padding:var(--bez,5px);
  border:var(--fr,9px) solid #14181f;border-radius:var(--r-body,44px);background:#000;
  box-shadow:0 0 0 1.5px rgba(148,163,184,.32),0 30px 70px rgba(0,0,0,.65),
             0 0 60px rgba(56,189,248,.10) inset
}
.device__screen{position:relative;width:100%;aspect-ratio:var(--ar,9/19.5);border-radius:var(--r-scr,30px);overflow:hidden;background:#000}
.device__island{
  position:absolute;top:calc(var(--bez,5px) + 11px);left:50%;transform:translateX(-50%);
  width:96px;height:27px;border-radius:999px;background:#05070b;z-index:30;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.14)
}
.device__island::after{content:'';position:absolute;right:11px;top:8px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#1e3a5f,#05070b);box-shadow:inset 0 0 0 1px rgba(56,189,248,.28)}
.device__btn{position:absolute;background:linear-gradient(90deg,#1b202a,#0d1118);border-radius:2px}
.device__btn--power{right:calc(-1 * (var(--fr,9px) + 2.5px));top:31%;width:3px;height:62px}
.device__btn--vol{left:calc(-1 * (var(--fr,9px) + 2.5px));top:22%;width:3px;height:38px}
.device__btn--vol2{left:calc(-1 * (var(--fr,9px) + 2.5px));top:30%;width:3px;height:38px}

/* ---------- 状态栏（皮肤通过 color / 图标色控制） ---------- */
.app{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  font-family:-apple-system,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;line-height:1.35}
.app.is-guide::after{content:'';position:absolute;left:0;right:0;top:var(--sb,44px);bottom:var(--tb,74px);
  border:1.5px dashed rgba(37,244,238,.95);pointer-events:none;z-index:40}
.sb{display:flex;align-items:center;justify-content:space-between;height:var(--sb,44px);padding:6px 20px 0;font-size:13px;font-weight:700;flex:none;z-index:25}
.sb__r{display:flex;align-items:center;gap:5px}
.sb svg{display:block}
.sb__ico{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
.sb__batt{width:24px;height:12px;stroke:currentColor;fill:none;stroke-width:1.4}
.sb__batt .batt-fill{fill:currentColor;stroke:none}
.homebar{flex:none;height:var(--hb,18px);display:grid;place-items:center}
.homebar i{display:block;width:132px;height:5px;border-radius:99px;background:var(--hb-color,rgba(255,255,255,.85))}

/* 滚动区统一的隐藏滚动条 */
.app [data-scroll]{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;-webkit-overflow-scrolling:touch}
.app [data-scroll]::-webkit-scrollbar,[data-rail]::-webkit-scrollbar{width:0;height:0}
.app [data-scroll]{scrollbar-width:none}

/* ================= 抖音 =================
   ── 几何按 模板.jpg（1320 × 2120）逐元素实测换算 ──
   横向：实测px × 360/1320（= ×0.2727273）→ 逻辑像素（模拟器逻辑宽固定 360px）
   纵向：实测px ÷ 2120 → 屏幕高度百分比（随分辨率自适应）
   模板比例那套写在 .is-bar-clear（透明底栏）下：模板里视频铺满整屏、底栏是叠在视频上的渐变蒙层。
   黑色底栏模式沿用原有的占位式布局（导航横向位置也按模板）。 */
.app--douyin{background:#000;color:#fff;--sb:42px;--tb:160px;--hb:18px}
.dy__top{position:absolute;top:var(--sb);left:0;right:0;height:38px;display:flex;align-items:center;justify-content:center;gap:22px;z-index:20;font-size:16px;font-weight:600}
.dy__tab{color:rgba(255,255,255,.62);position:relative;padding-bottom:6px;white-space:nowrap}
.dy__tab.is-on{color:#fff;font-weight:700}
.dy__tab.is-on::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:18px;height:2.5px;border-radius:2px;background:#fff}
.dy__ul{display:none}
.dy__search{position:absolute;right:16px;top:calc(var(--sb) + 7px);width:24px;height:24px;z-index:21}
.dy__search svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.dy__stage{position:relative;flex:1;min-height:0;overflow:hidden}
.dy__video{position:absolute;inset:0;background:linear-gradient(160deg,var(--g1),var(--g2));
  background-image:var(--img,none),linear-gradient(160deg,var(--g1),var(--g2));
  background-size:cover;background-position:center}
.dy__video::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.24),transparent 46%),
             radial-gradient(circle at 74% 70%,rgba(0,0,0,.5),transparent 58%)}
.dy__video::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 22%,transparent 55%,rgba(0,0,0,.72) 100%)}
.dy__scene{position:absolute;left:26px;right:96px;top:34%;z-index:3;color:rgba(255,255,255,.94);
  font-size:19px;font-weight:800;letter-spacing:.2px;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.dy__scene em{display:block;margin-top:7px;font-style:normal;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.8)}
.dy__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:4}
.dy__play svg{width:30px;height:30px;fill:#fff;margin-left:4px}
.dy__progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.25);z-index:6}
.dy__progress i{display:block;height:100%;width:38%;background:#fff}
.dy__rail{position:absolute;right:9px;bottom:20px;z-index:8;display:flex;flex-direction:column;align-items:center;gap:15px}
.dy__rail-item{display:flex;flex-direction:column;align-items:center;gap:3px}
.dy__rail-item svg{width:31px;height:31px;fill:#fff;stroke:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.dy__rail-item span{font-size:11px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.dy__ava{position:relative;width:45px;height:45px;border-radius:50%;border:2px solid #fff;
  background:linear-gradient(135deg,var(--g1),var(--g2));display:grid;place-items:center;font-size:15px;font-weight:800}
.dy__ava i{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);width:19px;height:19px;border-radius:50%;
  background:#FE2C55;display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:700;color:#fff;line-height:1}
.dy__disc{width:44px;height:44px;border-radius:50%;background:conic-gradient(#2a2a2a,#111,#2a2a2a,#111,#2a2a2a);
  display:grid;place-items:center;animation:spin 5.5s linear infinite;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.dy__disc em{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2));
  display:grid;place-items:center;font-style:normal;font-size:15px;color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dy-spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

.dy__meta{position:absolute;left:16px;right:78px;bottom:50px;z-index:7}
.dy__author{font-size:15.5px;font-weight:800;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.dy__desc{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.96);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.dy__desc b{color:#7DD3FC;font-weight:600}
/* 音乐行独立于文案（真机里它贴着右下唱片） */
.dy__music{position:absolute;left:16px;right:78px;bottom:22px;z-index:7;display:flex;align-items:center;gap:6px;
  font-size:12.5px;color:rgba(255,255,255,.88)}
.dy__music svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.dy__tabbar{flex:none;height:var(--tb);background:#000;display:flex;align-items:center;justify-content:space-around;
  padding-top:0;position:relative}

/* ---------- 抖音底部菜单栏显示策略 ---------- */
/* 透明模式：底栏与状态栏都脱离文档流叠在视频之上，视频延伸到屏幕底部与顶部 */
.app.is-bar-clear .sb{position:absolute;left:0;right:0;top:0;z-index:25;background:transparent}
.app.is-bar-clear .sb__r{filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.app.is-bar-clear .dy__tabbar{position:absolute;left:0;right:0;bottom:0;z-index:15;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.30) 48%,rgba(0,0,0,.68) 100%)}
.app.is-bar-clear .homebar{position:absolute;left:0;right:0;bottom:0;z-index:16;height:22px}
.dy__tb{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:rgba(255,255,255,.55);width:52px}
.dy__tb svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dy__tb.is-on{color:#fff}
.dy__tb.is-on svg{stroke-width:2.2}
.dy__plus{width:46px;height:29px;border-radius:9px;background:#fff;position:relative;display:grid;place-items:center;margin-top:2px}
.dy__plus::before,.dy__plus::after{content:'';position:absolute;top:0;bottom:0;width:3px}
.dy__plus::before{left:0;background:#25F4EE;border-radius:9px 0 0 9px}
.dy__plus::after{right:0;background:#FE2C55;border-radius:0 9px 9px 0}
.dy__plus svg{width:19px;height:19px;stroke:#000;fill:none;stroke-width:2.6;stroke-linecap:round}

/* ---------- 底部导航各项横向位置（模板实测 x，两种模式通用） ---------- */
.app--douyin .dy__tb{position:absolute;transform:translateX(-50%);left:50%}
.app--douyin .dy__tb[data-k="home"]{left:40.5px}
.app--douyin .dy__tb[data-k="friends"]{left:107.5px}
.app--douyin .dy__tb[data-k="msg"]{left:253.9px}
.app--douyin .dy__tb[data-k="me"]{left:323.7px}
.app--douyin .dy__plus{position:absolute;left:180.1px;transform:translateX(-50%)}
.app--douyin:not(.is-bar-clear) .dy__tb,
.app--douyin:not(.is-bar-clear) .dy__plus{top:50%;margin-top:0;transform:translate(-50%,-50%)}

/* ======================================================================
   模板比例布局（透明底栏模式）—— 数值全部来自 模板.jpg 实测
   模板 1320 × 2120：状态栏文字中线 y=57 · 标签行 y=184.5 · 推荐下划线 y=235.5
     头像 y=823.5 · 心 1013.5 · 评论 1199.5 · 收藏 1381.5 · 分享 1569 · 唱片 1779
     作者 y=1738 · 正文 y=1823 · 底部导航文字 y=1960
   横向：时间左 44 · 右侧图标右边缘 1258 · 关注 815.5 · 推荐 1093.5 · 搜索 1238
     图标栏轴线 1217.5 · 底部导航 148.5 / 394 / 660.5 / 931 / 1187
   ====================================================================== */
.app--douyin.is-bar-clear .sb{height:5.3774%;padding:0 16.9px 0 12px;font-size:12.4px}   /* 文字中线 2.6887%H */
.app--douyin.is-bar-clear .sb__ico{width:13.5px;height:13.5px}
.app--douyin.is-bar-clear .sb__batt{width:22.4px;height:9.8px}

/* 顶部标签行：文字中线 8.7028%H，字号 14px（模板字高 44px ≈ 0.86em） */
.app--douyin.is-bar-clear .dy__top{display:block;inset:0;height:auto;font-size:13.4px;pointer-events:none}
/* 标签行铺满整屏但必须放行点击（否则"点屏幕换下一条"会被它吃掉），只有标签本体接收点击 */
.app--douyin.is-bar-clear .dy__tab,
.app--douyin.is-bar-clear .dy__menu{pointer-events:auto}
.app--douyin.is-bar-clear .dy__tab{position:absolute;top:8.7028%;left:var(--x,50%);transform:translate(-50%,-50%);
  font-size:13.4px;font-weight:600;line-height:18.5px;padding-bottom:0}
/* ☰：模板实测 16.1 × 12.3 逻辑px（三条左对齐渐短圆角横杠），x 轴线 25.35px */
.app--douyin.is-bar-clear .dy__menu{position:absolute;top:8.6321%;left:25.36px;transform:translate(-50%,-50%);
  width:19.09px;height:14.73px;z-index:1}
.app--douyin.is-bar-clear .dy__menu svg{width:19.09px;height:14.73px;fill:#fff;display:block;stroke:none}
.app--douyin.is-bar-clear .dy__tab.is-on::after{display:none}
.app--douyin.is-bar-clear .dy__ul{display:block;position:absolute;top:11.1085%;left:var(--x,50%);
  transform:translate(-50%,-50%);width:19.9px;height:1.64px;border-radius:2px;background:#fff}
.app--douyin.is-bar-clear .dy__search{left:337.64px;top:8.7028%;width:18.55px;height:18.82px;transform:translate(-50%,-50%)}
.app--douyin.is-bar-clear .dy__search svg{width:18.55px;height:18.82px;fill:#fff;stroke:none}

/* 右侧图标栏：轴线 x=332px */
.app--douyin.is-bar-clear .dy__rail{top:0;right:0;bottom:0;left:0;display:block}
.app--douyin.is-bar-clear .dy__rail-item{position:absolute;left:332.18px;transform:translateX(-50%);width:max-content;gap:0}
.app--douyin.is-bar-clear .dy__rail-item span{font-size:10px;line-height:11px}
/* 计数文字竖向微调：图标盒高各不相同，逐项补齐，使计数墨迹中线落在模板实测位置 */
.app--douyin.is-bar-clear .dy__rail-item.is-like span{margin-top:4.5px}
.app--douyin.is-bar-clear .dy__rail-item.is-comment span{margin-top:3.85px}
.app--douyin.is-bar-clear .dy__rail-item.is-star span{margin-top:5.57px}
.app--douyin.is-bar-clear .dy__rail-item svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
/* 图标盒尺寸按各 path 在 24×24 viewBox 内的占比折算，使渲染后可见图形尺寸等于模板实测值 */
/* 以下四个图标为「参考图抠图 → potrace 描摹」的矢量，盒尺寸与 ROI 1:1 对应（ROI 104×96 等） */
.app--douyin.is-bar-clear .dy__rail-item.is-like{top:45.5660%}
.app--douyin.is-bar-clear .dy__rail-item.is-like svg{width:28.36px;height:26.18px;fill:#fff}
.app--douyin.is-bar-clear .dy__rail-item.is-comment{top:54.2925%}
.app--douyin.is-bar-clear .dy__rail-item.is-comment svg{width:28.36px;height:27px}
.app--douyin.is-bar-clear .dy__rail-item.is-star{top:62.9245%}
.app--douyin.is-bar-clear .dy__rail-item.is-star svg{width:28.36px;height:26.18px}
.app--douyin.is-bar-clear .dy__rail-item.is-share{top:72.1226%}
.app--douyin.is-bar-clear .dy__rail-item.is-share svg{width:28.36px;height:22.09px}
.app--douyin.is-bar-clear .dy__rail-item.is-share span{margin-top:7.0px}
.app--douyin.is-bar-clear .dy__ava{position:absolute;left:332px;top:38.8443%;transform:translate(-50%,-50%);
  width:43.6px;height:43.6px;font-size:14.5px}
.app--douyin.is-bar-clear .dy__ava i{width:17.2px;height:17.2px;bottom:-8.6px;font-size:12.5px}
.app--douyin.is-bar-clear .dy__disc{position:absolute;left:332px;top:83.9151%;transform:translate(-50%,-50%);background:conic-gradient(#f4f4f4,#c2c2c2,#f4f4f4,#c2c2c2,#f4f4f4);box-shadow:0 1px 6px rgba(0,0,0,.45);animation-name:dy-spin;animation-duration:5.5s;animation-timing-function:linear;animation-iteration-count:infinite;
  width:36.8px;height:36.8px}
.app--douyin.is-bar-clear .dy__disc em{width:28px;height:28px;font-size:13px}

/* 左下文案：作者中线 81.9811%H、正文中线 85.9906%H，左 10.4px、右 44px */
.app--douyin.is-bar-clear .dy__meta{left:10.4px;right:44px;bottom:auto;top:calc(81.9811% - 8.85px)}
.app--douyin.is-bar-clear .dy__author{font-size:13.5px;line-height:18.5px}
.app--douyin.is-bar-clear .dy__desc{margin-top:5.7px;font-size:13px;line-height:1.25;-webkit-line-clamp:1}
.app--douyin.is-bar-clear .dy__music{display:none}   /* 模板无此行：音乐信息在右下唱片上 */



/* 抖音「视频铺满」模式下，参考图（设计稿）顶部没有灵动岛，这里也隐去，便于像素级对照 */
.device__frame:has(.app.is-bar-clear) .device__island{display:none}

/* 抖音「视频铺满」模式：状态栏右侧整组用参考图描摹矢量（ROI (983,30)-(1278,84) 的 1:1 映射） */
.app--douyin.is-bar-clear .sb--traced .sb__r{display:none}
.app--douyin.is-bar-clear .sb__dy{position:absolute;left:268.09px;top:9.82px;width:80.45px;height:14.73px;pointer-events:none}
.app--douyin.is-bar-clear .sb__dy svg{display:block;width:80.45px;height:14.73px;fill:#fff;stroke:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}

/* 底部导航：文字中线 92.4528%H，+ 按钮外框 110×89（模板实测） */
.app--douyin.is-bar-clear .dy__tabbar{top:0;right:0;bottom:0;left:0;height:auto;pointer-events:none;background:transparent}
/* 底部压暗交给 .dy__video::after（在文案之下），整屏渐变会把文案压灰——参考图文案是纯白 */
/* 参考图底栏是「纯文字 + 空心＋框」：清底模式下隐去模拟器自带的导航图标 */
.app--douyin.is-bar-clear .dy__tb{gap:0;font-size:14px;line-height:19.5px;width:auto;pointer-events:auto;text-shadow:0 1px 6px rgba(0,0,0,.7);
  top:calc(90.7169% - 0px)}
.app--douyin.is-bar-clear .dy__tb svg{display:none}
.app--douyin.is-bar-clear .dy__tb .dy__lbl{font-style:normal}
/* 首页左侧的 ⇄ 切换小图标：ROI (181,1938)-(217,1984) 的描摹版，轴线 (199,1961) */
.app--douyin.is-bar-clear .dy__swap{position:absolute;left:54.27px;top:92.5%;transform:translate(-50%,-50%);
  width:9.82px;height:12.55px;pointer-events:none;opacity:.97}
.app--douyin.is-bar-clear .dy__swap svg{display:block;width:9.82px;height:12.55px;fill:#fff;stroke:none}
/* ＋ 按钮：参考图是空心圆角方框（外 110×89，边框约 10.5px），不是实心白块，也没有青红边 */
.app--douyin.is-bar-clear .dy__plus{width:32.18px;height:26.18px;left:180.27px;background:none;border:0;border-radius:0;
  margin:0;pointer-events:auto;top:92.5472%;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
.app--douyin.is-bar-clear .dy__plus::before,.app--douyin.is-bar-clear .dy__plus::after{display:none}
.app--douyin.is-bar-clear .dy__plus svg{width:32.18px;height:26.18px;fill:#fff;stroke:none;display:block}
/* Home 条：参考图是低位、更短、更淡的一条（中线距屏底 5.67px，宽 127.6、高 4.6） */
.app--douyin.is-bar-clear .homebar{height:11.34px}
.app--douyin.is-bar-clear .homebar i{width:127.6px;height:4.6px;background:rgba(255,255,255,.16)}
.app--douyin.is-bar-clear .dy__progress{bottom:0}

/* ================= 小红书 ================= */
.app--xhs{background:#fff;color:#1a1a1a;--sb:44px;--tb:70px;--hb:18px;--hb-color:rgba(0,0,0,.8)}
.xhs__top{flex:none;height:44px;display:flex;align-items:center;justify-content:center;gap:20px;position:relative;font-size:16.5px}
.xhs__tab{color:#9a9a9a;font-weight:500;position:relative;padding-bottom:5px}
.xhs__tab.is-on{color:#1a1a1a;font-weight:800;font-size:17px}
.xhs__tab.is-on::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:22px;height:3px;border-radius:3px;background:#FF2442}
.xhs__acts{position:absolute;right:14px;display:flex;gap:15px}
.xhs__acts svg{width:22px;height:22px;stroke:#333;fill:none;stroke-width:2;stroke-linecap:round}
.xhs__chips{flex:none;display:flex;gap:16px;overflow-x:auto;padding:2px 14px 9px;font-size:13.5px;color:#8b8b8b;scrollbar-width:none}
.xhs__chips::-webkit-scrollbar{height:0}
.xhs__chip{white-space:nowrap;flex:none}
.xhs__chip.is-on{color:#FF2442;font-weight:700;background:rgba(255,36,66,.09);padding:2px 9px;border-radius:99px}
.xhs__grid{columns:var(--xhs-cols,2);column-gap:8px;padding:0 9px 10px}
/* 3 列：卡片更窄，封面与字号同步缩小 */
.xhs__grid--3{column-gap:6px;padding:0 7px 10px}
.xhs__grid--3 .xhs__cover{height:calc(var(--h,200px) * .72)}
.xhs__grid--3 .xhs__cover em{font-size:10px;left:5px;bottom:5px;padding:1px 5px}
.xhs__grid--3 .xhs__title{font-size:11.5px;padding:6px 6px 0;line-height:1.35}
.xhs__grid--3 .xhs__foot{font-size:10px;padding:6px 6px 8px;gap:4px}
.xhs__grid--3 .xhs__ava{width:14px;height:14px}
.xhs__grid--3 .xhs__like svg{width:11px;height:11px}
.xhs__card{break-inside:avoid;margin-bottom:9px;border-radius:9px;overflow:hidden;background:#f4f4f6;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
.xhs__cover{position:relative;height:var(--h,200px);background:linear-gradient(150deg,var(--g1),var(--g2));
  background-image:var(--img,none),linear-gradient(150deg,var(--g1),var(--g2));
  background-size:cover;background-position:center}
.xhs__cover::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.26),transparent 52%)}
.xhs__cover em{position:absolute;left:7px;bottom:6px;z-index:2;font-style:normal;font-size:11px;color:#fff;
  background:rgba(0,0,0,.36);padding:1px 6px;border-radius:99px}
.xhs__title{margin:0;padding:7px 8px 0;font-size:13.5px;font-weight:500;line-height:1.4;color:#222;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xhs__foot{display:flex;align-items:center;gap:6px;padding:7px 8px 9px;font-size:11.5px;color:#9a9a9a}
.xhs__ava{width:17px;height:17px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--g1),var(--g2))}
.xhs__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xhs__like{display:flex;align-items:center;gap:3px;flex:none}
.xhs__like svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.xhs__tabbar{flex:none;height:var(--tb);display:flex;align-items:flex-start;justify-content:space-around;
  padding-top:8px;border-top:1px solid #f0f0f2;background:#fff}
.xhs__tb{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:#9a9a9a;width:54px}
.xhs__tb svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.xhs__tb.is-on{color:#1a1a1a;font-weight:700}
.xhs__plus{width:44px;height:27px;border-radius:8px;background:linear-gradient(135deg,#FF2442,#FF5A76);
  display:grid;place-items:center;margin-top:1px;box-shadow:0 3px 10px rgba(255,36,66,.32)}
.xhs__plus svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round}

/* ================= 今日头条 ================= */
.app--toutiao{background:#fff;color:#1a1a1a;--sb:44px;--tb:70px;--hb:18px;--hb-color:rgba(0,0,0,.8)}
.tt__top{flex:none;display:flex;align-items:center;gap:17px;overflow-x:auto;padding:2px 66px 8px 14px;font-size:16px;scrollbar-width:none}
.tt__top::-webkit-scrollbar{height:0}
.tt__chan{white-space:nowrap;flex:none;color:#5c5c5c;font-weight:500;position:relative;padding-bottom:5px}
.tt__chan.is-on{color:#F04142;font-weight:800}
.tt__chan.is-on::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:20px;height:3px;border-radius:3px;background:#F04142}
.tt__acts{position:absolute;right:0;top:0;height:42px;display:flex;align-items:center;gap:13px;padding:0 12px 6px 26px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 34%)}
.tt__acts svg{width:21px;height:21px;stroke:#333;fill:none;stroke-width:2;stroke-linecap:round}
.tt__feed{background:#fff}
.tt__item{display:flex;gap:11px;padding:11px 13px;border-bottom:1px solid #f2f3f4}
.tt__body{flex:1;min-width:0;display:flex;flex-direction:column}
.tt__title{margin:0;font-size:15.5px;font-weight:500;line-height:1.38;color:#1c1c1c;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tt__info{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:7px;font-size:11.5px;color:#a0a4a8}
.tt__info i{width:14px;height:14px;border-radius:3px;display:inline-block;flex:none;
  background:linear-gradient(135deg,#f0a1a1,#f6d1d1);font-style:normal}
.tt__dot{color:#d5d8da}
.tt__thumb{width:104px;height:70px;flex:none;border-radius:5px;background:linear-gradient(150deg,var(--g1),var(--g2));position:relative;overflow:hidden;
  background-image:var(--img,none),linear-gradient(150deg,var(--g1),var(--g2));background-size:cover;background-position:center}
.tt__thumb::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.24),transparent 55%)}
.tt__thumbs{display:flex;gap:4px;padding:9px 13px 0}
.tt__thumbs i{flex:1;height:74px;border-radius:5px;background:linear-gradient(150deg,var(--g1),var(--g2));
  background-image:var(--img,none),linear-gradient(150deg,var(--g1),var(--g2));background-size:cover;background-position:center}
.tt__tag{margin:8px 13px 0;display:inline-block;font-size:11px;color:#F04142;background:rgba(240,65,66,.08);
  border:1px solid rgba(240,65,66,.22);border-radius:4px;padding:1px 6px}
.tt__tabbar{flex:none;height:var(--tb);display:flex;align-items:flex-start;justify-content:space-around;
  padding-top:8px;border-top:1px solid #f0f0f2;background:#fff}
.tt__tb{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:#9a9a9a;width:54px}
.tt__tb svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tt__tb.is-on{color:#F04142;font-weight:700}
.tt__tb.is-on svg{stroke-width:2.2}

/* ---------- 站内统一导航（三页一致） ---------- */
.sitenav{position:sticky;top:0;z-index:90;background:rgba(7,11,22,.84);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.sitenav__in{max-width:1260px;margin:0 auto;padding:9px 22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sitenav__brand{font-size:11.5px;letter-spacing:.2em;color:var(--dim);margin-right:auto}
.sitenav a{font-size:12.5px;color:var(--mut);text-decoration:none;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:rgba(148,163,184,.08);transition:.16s;white-space:nowrap}
.sitenav a:hover{color:#fff;border-color:rgba(56,189,248,.5);background:rgba(56,189,248,.14)}
.sitenav a.is-cur{border-color:rgba(56,189,248,.7);background:rgba(56,189,248,.2);color:#fff;font-weight:600}
@media (max-width:640px){
  .sitenav__brand{display:none}
  .sitenav__in{padding:8px 12px;gap:6px}
  .sitenav a{padding:6px 10px;font-size:12px}
}

/* ---------- 页脚 ---------- */
.foot{border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.foot__inner{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding-top:20px;padding-bottom:26px;
  font-size:12.5px;color:var(--dim)}
.foot a{border-bottom-color:rgba(148,163,184,.4)}

/* ---------- 修正与补充 ---------- */
/* 机身按内容盒计算：screen 宽 = 360 逻辑像素，边框在外 */
.device__frame{box-sizing:content-box}
.stage__viewport{overflow:hidden}

/* 今日头条：顶部频道条 + 长文块（三图 / 大图） */
.tt__head{flex:none;position:relative}
.tt__block{padding:12px 13px;border-bottom:1px solid #f2f3f4}
.tt__block .tt__title{-webkit-line-clamp:2}
.tt__block .tt__info{margin-top:9px}
.tt__hero{margin-top:9px;height:152px;border-radius:6px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--g1),var(--g2));
  background-image:var(--img,none),linear-gradient(150deg,var(--g1),var(--g2));background-size:cover;background-position:center}
.tt__hero::after{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.24),transparent 55%)}
.tt__plus{width:44px;height:27px;border-radius:8px;display:grid;place-items:center;margin-top:1px;
  background:linear-gradient(135deg,#F04142,#FF7A45);box-shadow:0 3px 10px rgba(240,65,66,.3)}
.tt__plus svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round}

/* 用上实拍图后，减弱原先给纯色渐变打的高光蒙层，避免照片发白 */
.dy__video[style*="--img"]::before{background:
  radial-gradient(circle at 28% 18%,rgba(255,255,255,.07),transparent 44%),
  radial-gradient(circle at 74% 72%,rgba(0,0,0,.42),transparent 62%)}
.xhs__cover[style*="--img"]::after{background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.26))}
.tt__thumb[style*="--img"]::after,
.tt__hero[style*="--img"]::after{background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.22))}

/* ---------- 横屏行为 ---------- */
/* 横屏无底部导航，安全区底边随之收窄 */
.app.is-landscape{--tb:18px}
/* 抖音横屏 = 全屏视频，收起底部导航（与真实行为一致）
   横屏屏幕很矮，模板的百分比布局不适用，这里回到紧凑的底边对齐排布 */
.app.is-landscape .dy__tabbar{display:none}
.app.is-landscape .dy__top{display:flex;inset:var(--sb) 0 auto;height:38px;font-size:16px}
.app.is-landscape .dy__tab{position:static;transform:none;font-size:16px;line-height:normal;padding-bottom:6px}
.app.is-landscape .dy__tab.is-on::after{display:block}
.app.is-landscape .dy__ul{display:none}
.app.is-landscape .dy__menu{position:static;transform:none;width:16.1px;height:12.3px;opacity:.72}
.app.is-landscape .dy__search{right:16px;top:calc(var(--sb) + 7px);width:24px;height:24px;transform:none}
.app.is-landscape .dy__search svg{width:24px;height:24px}
.app.is-landscape .dy__rail{inset:auto 9px 14px auto;display:flex;flex-direction:column;align-items:center;gap:15px}
.app.is-landscape .dy__rail-item{position:static;transform:none;left:auto;top:auto;width:auto;gap:3px}
.app.is-landscape .dy__rail-item span{font-size:11px;line-height:normal}
.app.is-landscape .dy__rail-item.is-like svg,
.app.is-landscape .dy__rail-item.is-comment svg,
.app.is-landscape .dy__rail-item.is-star svg,
.app.is-landscape .dy__rail-item.is-share svg{width:31px;height:31px}
.app.is-landscape .dy__ava{position:static;transform:none;left:auto;top:auto;width:45px;height:45px}
.app.is-landscape .dy__ava i{width:19px;height:19px;bottom:-7px;font-size:14px}
.app.is-landscape .dy__disc{position:static;transform:none;left:auto;top:auto;width:44px;height:44px}
.app.is-landscape .dy__disc em{width:34px;height:34px;font-size:15px}
.app.is-landscape .dy__meta{top:auto;bottom:14px;left:16px;right:78px;font-size:inherit}
.app.is-landscape .dy__author{font-size:15.5px;line-height:1.35}
.app.is-landscape .dy__desc{margin-top:6px;font-size:13.5px;-webkit-line-clamp:3}
.app.is-landscape .dy__music{position:absolute;left:16px;right:78px;bottom:14px;top:auto;transform:none;margin:0;font-size:12.5px}
/* 小红书 / 今日头条横屏时提示旋转回竖屏 */
.rot-hint{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:22px;text-align:center;color:#fff;font-size:12.5px;line-height:1.6;
  background:rgba(8,12,20,.66);backdrop-filter:blur(3px)}
.rot-hint__ico{font-size:30px;line-height:1;opacity:.9;display:block}
.rot-hint b{font-size:15px;letter-spacing:.02em}
.rot-hint span:last-child{max-width:250px;opacity:.82}

/* ---------- 3D 预览（纯 CSS 3D，无外部库） ---------- */
.device{perspective:1700px}
.device3d{
  position:relative;box-sizing:border-box;--t:30px;
  --scr-w:360px;--bez:5px;--fr:9px;--r-body:44px;--r-scr:30px;
  width:calc(var(--scr-w) + 2 * var(--bez) + 2 * var(--fr));
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
  touch-action:none
}
.device3d.is-live{transition:none}                 /* 拖动/自转中：去掉过渡跟随鼠标 */
.device3d.is-flat{transform:none}                  /* 关闭 3D */
.device3d.is-flat .dev3d__slabs,.device3d.is-flat .dev3d__back{display:none}
.device__frame{backface-visibility:hidden;transform:translateZ(calc(var(--t) / 2))}

/* 机身厚度：多层堆叠伪造侧壁 */
.dev3d__slabs{position:absolute;inset:0;transform-style:preserve-3d}
.dev3d__slabs i{position:absolute;inset:0;border-radius:var(--r-body,44px);
  background:linear-gradient(180deg,#242a36,#0d1118);
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.10)}

/* 背面：摄像头模组 + 品牌字 */
.dev3d__back{position:absolute;inset:0;border-radius:var(--r-body,44px);overflow:hidden;
  backface-visibility:hidden;
  transform:translateZ(calc(var(--t) / -2)) rotateY(180deg);
  background:linear-gradient(155deg,#2b3140,#141821 58%,#0b0e15);
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.16),inset 0 0 46px rgba(0,0,0,.55)}
.dev3d__cam{position:absolute;left:20px;top:20px;width:98px;height:98px;border-radius:26px;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(0,0,0,.28));
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.18)}
.dev3d__cam .cam{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#5a6577,#0a0d13 72%);
  box-shadow:inset 0 0 0 2px rgba(148,163,184,.3),0 1px 4px rgba(0,0,0,.7)}
.cam--1{width:31px;height:31px;left:14px;top:14px}
.cam--2{width:31px;height:31px;right:14px;top:14px}
.cam--3{width:31px;height:31px;left:14px;bottom:14px}
.cam--flash{width:15px;height:15px;right:17px;bottom:17px;
  background:radial-gradient(circle at 40% 35%,#fff7d6,#f59e0b 72%);
  box-shadow:0 0 10px rgba(250,204,21,.4)}
.dev3d__brand{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  font-size:11px;font-weight:700;letter-spacing:.34em;color:rgba(148,163,184,.45)}

/* 拖动状态 */
.stage__viewport{cursor:grab}
.stage__viewport.is-dragging{cursor:grabbing}
.stage__viewport.is-dragging .app{pointer-events:none}   /* 拖动时不要让 App 抢走手势 */

/* 亮背景（白亮）下的机身阴影微调：黑底用大黑影，白底改用中性灰影 */
.stage__viewport.is-light .device__frame{
  box-shadow:0 0 0 1.5px rgba(15,23,42,.14),0 24px 54px rgba(15,23,42,.26),
             0 0 60px rgba(56,189,248,.10) inset}
.stage__viewport.is-light .dev3d__slabs i{box-shadow:inset 0 0 0 1px rgba(15,23,42,.22)}
.stage__viewport.is-light .dev3d__back{box-shadow:inset 0 0 0 1px rgba(15,23,42,.3),inset 0 0 46px rgba(0,0,0,.45)}

/* 快速视角小按钮 */
.mini-btns{display:flex;gap:6px}
.mini-btns button{padding:5px 10px;border-radius:9px;font-size:12px;cursor:pointer;transition:.16s;
  border:1px solid rgba(148,163,184,.28);background:rgba(148,163,184,.08);color:#C2D0E2}
.mini-btns button:hover{border-color:rgba(56,189,248,.55);background:rgba(56,189,248,.16);color:#fff}