/* ══════════════════════════════════════════════
   教程页（tutorial.php）
   浅色页面与可配置品牌色，原型图保持各自系统风格
   ══════════════════════════════════════════════ */

/* Hero */
.tut-hero{ text-align:center; padding:2.2rem 1.2rem 1.6rem; position:relative; }
.tut-hero-inner{ max-width:640px; margin:0 auto; }

/* 返回下载条：绝对定位到 hero 左侧、与标题垂直居中；左边缘对齐内容区 */
.tut-backbar{
  position:absolute; top:0; bottom:0; left:50%;
  -webkit-transform:translateX(-580px); transform:translateX(-580px);
  padding-left:1.4rem;
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  pointer-events:none;
}
.tut-backbar .tut-back-btn{ pointer-events:auto; }
/* 窄屏放不下 1160 居中时，回退成贴左 */
@media(max-width:1200px){
  .tut-backbar{ left:0; -webkit-transform:none; transform:none; }
}

/* 返回下载：明显按钮 */
.tut-back-btn{
  display:-webkit-inline-flex; display:inline-flex; -webkit-align-items:center; align-items:center;
  gap:.4rem; padding:.5rem 1.1rem;
  font-size:.9rem; font-weight:700; color:#fff; text-decoration:none;
  border-radius:999px;
  background:-webkit-linear-gradient(315deg,var(--brand-l),var(--brand));
  background:linear-gradient(135deg,var(--brand-l),var(--brand));
  box-shadow:0 6px 16px -8px rgba(var(--glow),.5);
  -webkit-transition:-webkit-transform .12s,box-shadow .18s; transition:transform .12s,box-shadow .18s;
}
.tut-back-btn:hover{ -webkit-transform:translateY(-1px); transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(var(--glow),.6); }
.tut-back-btn:active{ -webkit-transform:scale(.98); transform:scale(.98); }
.tut-back-ic{ font-size:1.05rem; line-height:1; }
.tut-hero h1{ font-size:clamp(1.7rem,4.5vw,2.4rem); font-weight:800; letter-spacing:-.04em; margin:.1rem 0 .5rem; color:var(--on); }
.tut-hero .tagline{ font-size:.98rem; color:var(--onv); margin:0; }

.tut-main{ padding:0 1.4rem 2rem; max-width:1160px; margin:0 auto; }

/* 安装指南按系统和品牌折叠，长路径可换行，原生 HTML 支持无 JS 阅读。 */
.tut-install-block{margin:.8rem 0;border:1px solid var(--line);border-radius:12px;background:var(--card);}
.tut-install-block > summary{padding:.75rem .9rem;cursor:pointer;font-weight:700;color:var(--on);line-height:1.55;}
.tut-install-block[open] > summary{border-bottom:1px solid var(--line);color:var(--brand);}
.tut-install-content{padding:.8rem .9rem;overflow-wrap:anywhere;word-break:break-word;}
.tut-install-content .tut-list{margin-top:0;}
.tut-install-sources{font-size:.78rem;line-height:1.6;margin:.7rem 0 0;}
.tut-install-sources a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;}
.tut-mock-caption{font-size:.78rem;line-height:1.6;color:var(--onv);text-align:center;padding:.7rem 1rem;margin:0;}

/* ── 平台切换 Tab ── */
.tut-tabs{
  display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap;
  gap:.5rem; -webkit-justify-content:center; justify-content:center;
  margin:0 auto 1.8rem;
}
.tut-tab{
  display:-webkit-inline-flex; display:inline-flex; -webkit-align-items:center; align-items:center;
  gap:.4rem; padding:.55rem 1.05rem; font-size:.9rem; font-weight:650;
  color:var(--onv); background:rgba(var(--ov),.05);
  border:1px solid rgba(var(--ov),.1); border-radius:999px;
  cursor:pointer; font-family:var(--font); white-space:nowrap; text-decoration:none;
  -webkit-transition:.15s; transition:.15s;
}
.tut-tab:hover{ background:rgba(var(--glow),.07); border-color:rgba(var(--glow),.3); color:var(--on); }
.tut-tab .tut-tab-ic{ display:-webkit-inline-flex; display:inline-flex; }
.tut-tab .tut-tab-ic svg{ display:block; }

/* ── 服务端与脚本选中 radio，CSS 控制面板 ── */

/* radio 本身隐藏 */
.tut-radio{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}

/* 默认所有面板隐藏 */
.tut-panel{ display:none; max-width:1100px; margin:0 auto; }

/* radio checked → 对应面板显示 */
#tut-android:checked ~ #tut-panel-android,
#tut-ios:checked     ~ #tut-panel-ios,
#tut-windows:checked ~ #tut-panel-windows,
#tut-macos:checked   ~ #tut-panel-macos,
#tut-linux:checked   ~ #tut-panel-linux { display:block; }

/* radio checked → 对应平台链接高亮 */
#tut-android:checked ~ .tut-tabs [data-platform-tab="android"],
#tut-ios:checked     ~ .tut-tabs [data-platform-tab="ios"],
#tut-windows:checked ~ .tut-tabs [data-platform-tab="windows"],
#tut-macos:checked   ~ .tut-tabs [data-platform-tab="macos"],
#tut-linux:checked   ~ .tut-tabs [data-platform-tab="linux"]{
  color:#fff; border-color:transparent;
  background:-webkit-linear-gradient(315deg,var(--brand-l),var(--brand));
  background:linear-gradient(135deg,var(--brand-l),var(--brand));
  box-shadow:0 6px 16px -8px rgba(var(--glow),.5);
}

/* ── 步骤时间线 ── */
.tut-steps{
  display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column;
  gap:1.2rem;
}
/* 步骤卡：数字+文字在上，原型图在下（全宽展示，图更大更清晰） */
.tut-step{
  background:var(--card); border:1px solid rgba(var(--ov),.09);
  border-radius:var(--r-lg);
  box-shadow:var(--sd1);
  overflow:hidden;
}
/* 步骤头部：序号 + 标题 + 文字描述 */
.tut-step-left{
  display:-webkit-flex; display:flex; gap:1rem;
  -webkit-align-items:flex-start; align-items:flex-start;
  padding:1.2rem 1.3rem;
}
.tut-step.has-mock .tut-step-left{ padding-bottom:.8rem; }
.tut-step-no{
  -webkit-flex-shrink:0; flex-shrink:0;
  width:30px; height:30px; border-radius:50%;
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  font-size:.9rem; font-weight:800; color:#fff;
  background:-webkit-linear-gradient(315deg,var(--brand-l),var(--brand));
  background:linear-gradient(135deg,var(--brand-l),var(--brand));
  box-shadow:0 4px 12px -4px rgba(var(--glow),.5);
  margin-top:.1rem;
}
.tut-step-body{ -webkit-box-flex:1; -webkit-flex:1; flex:1; min-width:0; }
.tut-step-body h3{ font-size:1rem; font-weight:750; letter-spacing:-.02em; margin:0 0 .45rem; color:var(--on); }
.tut-step-desc{ font-size:.86rem; color:var(--onv); line-height:1.65; }
.tut-step-desc b{ color:var(--on); font-weight:650; }
.tut-step-desc code{
  background:var(--sfc); color:var(--brand-l);
  padding:.08rem .4rem; border-radius:5px; font-size:.86em;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  word-break:normal;
  overflow-wrap:anywhere;
}
.tut-list{ list-style:none; margin:.55rem 0 0; padding:0; }
.tut-list li{
  position:relative; padding:.3rem 0 .3rem 1.1rem; line-height:1.6;
  border-top:1px dashed var(--hair);
}
.tut-list li:first-child{ border-top:0; }
.tut-list li::before{
  content:""; position:absolute; left:.05rem; top:.82rem;
  width:7px; height:7px; border-radius:50%;
  background:transparent;
  border:2px solid var(--brand-l);
  box-shadow:0 0 0 3px rgba(var(--glow),.1);
}

/* 原型图区域：全宽，紧贴卡片底部 */
.tut-mock{
  width:100%;
  border-top:1px solid rgba(var(--ov),.07);
  background:var(--card);
}
/* 去掉旧的has-mock特殊布局，现在统一上下排列 */
.tut-step.has-mock{ display:block; }

/* 可选步骤：虚线边框，序号改为灰色 */
.tut-step.is-optional{
  border-style:dashed;
  border-color:rgba(var(--ov),.15);
  background:rgba(var(--ov),.02);
}
.tut-step.is-optional .tut-step-no{
  background:var(--onv);
  box-shadow:none;
}
.tut-optional-badge{
  display:inline-block;
  font-size:.68rem; font-weight:700;
  color:var(--onv); background:rgba(var(--ov),.08);
  border:1px solid rgba(var(--ov),.12);
  border-radius:999px; padding:.1rem .5rem;
  margin-left:.5rem; vertical-align:middle;
  letter-spacing:.02em;
}

/* 底部前往下载 */
.tut-foot-cta{ text-align:center; margin:2.2rem 0 1rem; }

/* ── 原型图：通用 token（浅色隔离） ── */
.proto-phone,.proto-win,.proto-win-content,.proto-term-body,
.proto-sheet,.proto-dialog,.proto-win-dlg,
.proto-dlpage,.proto-win-dl{
  --proto-bg:#f5f6f8; --proto-bg2:#ffffff; --proto-bgs:#eef0f4;
  --proto-on:#11141b; --proto-onv:#565d6b; --proto-line:#e9ecf1; --proto-hair:#f0f2f5;
  --proto-brand:var(--brand); --proto-brand-l:var(--brand-l); --proto-glow:var(--glow);
  --proto-ok:#16a34a; --proto-warn:#e08a1e;
  --proto-font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  font-family:var(--proto-font);
}

/* ── 手机外壳容器（固定占位尺寸 = 380*0.385 × 822*0.385）── */
/* 手机：1:1 原尺寸，居中展示 */
.tut-mock-phone{
  width:100%;
  display:-webkit-flex; display:flex;
  -webkit-justify-content:center; justify-content:center;
  padding:1.5rem 0;
  background:rgba(0,0,0,.12);
}
.proto-phone{
  width:380px; height:822px; border-radius:56px;
  -webkit-flex-shrink:0; flex-shrink:0;
  background:-webkit-linear-gradient(290deg,#23262f,#15171d);
  background:linear-gradient(160deg,#23262f,#15171d);
  padding:13px; box-shadow:0 40px 80px -28px rgba(0,0,0,.8),0 0 0 2px rgba(255,255,255,.06);
}
.proto-screen{
  width:100%; height:100%; border-radius:44px; overflow:hidden;
  position:relative; background:var(--proto-bg);
}
.proto-sb{
  position:absolute; top:0; left:0; right:0; height:56px;
  display:-webkit-flex; display:flex; -webkit-align-items:flex-end; align-items:flex-end;
  -webkit-justify-content:space-between; justify-content:space-between;
  padding:0 28px 9px; font-size:15px; font-weight:500;
  color:var(--proto-on); z-index:50;
}
.proto-sb .proto-sbr{font-size:13px;}
.proto-dyn{
  position:absolute; top:13px; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%);
  width:116px; height:33px; background:#000; border-radius:22px; z-index:60;
}
.proto-view{position:absolute;top:56px;left:0;right:0;bottom:0;overflow:hidden;}

/* ── 手机 App 内部组件 ── */
.proto-abar{height:58px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;padding:0 20px;background:var(--proto-bg);}
.proto-abar-t{font-size:20px;font-weight:700;color:var(--proto-on);}
.proto-body{padding:6px 18px 16px;height:calc(100% - 58px - 80px);overflow:hidden;background:var(--proto-bg);}
.proto-hero{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;padding:24px 0 8px;}
.proto-orb{width:177px;height:177px;border-radius:50%;position:relative;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}
.proto-orb-track{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:3px solid var(--proto-bgs);}
.proto-orb-prog{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;-webkit-mask:radial-gradient(transparent 83px,#000 85px);mask:radial-gradient(transparent 83px,#000 85px);}
.proto-orb-conn .proto-orb-prog{background:conic-gradient(var(--proto-brand-l),var(--proto-brand),var(--proto-brand-l));-webkit-filter:drop-shadow(0 0 9px rgba(var(--proto-glow),.45));filter:drop-shadow(0 0 9px rgba(var(--proto-glow),.45));}
.proto-orb-core{width:139px;height:139px;border-radius:50%;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;background:var(--proto-bg2);border:1px solid rgba(var(--proto-glow),.3);}
.proto-orb-ic{font-size:38px;}
.proto-orb-stt{font-size:14px;font-weight:700;letter-spacing:1px;margin-top:8px;color:var(--proto-brand);}
.proto-orb-sub{font-size:11px;color:var(--proto-onv);margin-top:3px;}
.proto-metrics{display:-webkit-flex;display:flex;gap:8px;margin:12px 0 8px;}
.proto-metric{-webkit-flex:1;flex:1;background:var(--proto-bg2);border:1px solid var(--proto-line);border-radius:12px;padding:8px 6px;text-align:center;}
.proto-mval{font-size:14px;font-weight:700;color:var(--proto-on);}
.proto-mval span{font-size:9px;color:var(--proto-onv);margin-left:1px;}
.proto-mlbl{font-size:10px;color:var(--proto-onv);margin-top:2px;}
.proto-curnode{background:var(--proto-bg2);border:1px solid var(--proto-line);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--proto-on);}

/* ── 手机底部导航 ── */
.proto-nav{position:absolute;bottom:0;left:0;right:0;height:80px;padding:8px 12px 18px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;background:rgba(255,255,255,.82);border-top:1px solid var(--proto-line);}
.proto-nav-it{-webkit-flex:1;flex:1;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--proto-onv);}
.proto-nav-ic{font-size:22px;}
.proto-nav-on{color:var(--proto-brand);font-weight:600;}

/* ── 登录 sheet ── */
.proto-home-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--proto-bg);opacity:.65;}
.proto-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--proto-bg2);border-radius:30px 30px 0 0;padding:14px 22px 28px;}
.proto-grab{width:44px;height:5px;border-radius:4px;background:var(--proto-line);margin:2px auto 14px;}
.proto-shead{text-align:center;margin-bottom:16px;}
.proto-slogo{font-size:32px;margin-bottom:8px;}
.proto-stitle{font-size:19px;font-weight:700;color:var(--proto-on);}
.proto-ssub{font-size:12px;color:var(--proto-onv);margin-top:4px;}
.proto-field{height:48px;border:1.5px solid var(--proto-line);border-radius:14px;padding:0 14px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-size:14px;color:var(--proto-onv);background:var(--proto-bgs);margin-bottom:10px;}
.proto-go{height:50px;border-radius:14px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;font-size:15px;font-weight:600;color:#fff;background:-webkit-linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));background:linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));margin-top:4px;}
.proto-alt{text-align:center;font-size:12px;color:var(--proto-onv);margin-top:14px;}
.proto-alt b{color:var(--proto-brand);}

/* ── 安装弹窗 ── */
.proto-scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(11,13,20,.5);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}
.proto-dialog{background:var(--proto-bg2);border-radius:20px;padding:22px 20px;width:82%;text-align:center;}
.proto-dlg-ic{font-size:32px;margin-bottom:10px;}
.proto-dlg-t{font-size:16px;font-weight:700;color:var(--proto-on);margin-bottom:7px;}
.proto-dlg-d{font-size:12px;color:var(--proto-onv);line-height:1.55;margin-bottom:16px;}
.proto-dlg-btns{display:-webkit-flex;display:flex;gap:10px;}
.proto-dlg-cancel{-webkit-flex:1;flex:1;height:42px;border-radius:12px;background:var(--proto-bgs);color:var(--proto-onv);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;font-size:14px;font-weight:600;}
.proto-dlg-ok{-webkit-flex:1;flex:1;height:42px;border-radius:12px;background:var(--proto-brand);color:#fff;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;font-size:14px;font-weight:600;}

/* ── 下载站页面（手机内嵌） ── */
.proto-dlpage{padding:16px;background:var(--proto-bg);height:100%;}
.proto-dlhero{text-align:center;padding:18px 0 14px;}
.proto-dlname{font-size:22px;font-weight:800;color:var(--proto-on);letter-spacing:-.04em;}
.proto-dlsub{font-size:12px;color:var(--proto-onv);margin-top:4px 0 10px;}
.proto-dlbtn{display:inline-block;background:-webkit-linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));background:linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));color:#fff;font-size:13px;font-weight:600;padding:10px 22px;border-radius:14px;margin-top:10px;}
.proto-dlcard{background:var(--proto-bg2);border:1px solid var(--proto-line);border-radius:16px;padding:4px 14px;margin-top:10px;}
.proto-dlrow{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid var(--proto-hair);}
.proto-dlrow:last-child{border-bottom:none;}
.proto-dlandroid{font-size:24px;}
.proto-dlinfo{-webkit-flex:1;flex:1;min-width:0;}
.proto-dlarch{font-size:13px;font-weight:600;color:var(--proto-on);}
.proto-pct{display:inline-block;font-size:11px;font-weight:700;color:var(--proto-brand-l);background:rgba(var(--proto-glow),.12);border-radius:999px;padding:1px 6px;margin-left:4px;}
.proto-dlformat{font-size:11px;color:var(--proto-onv);margin-top:2px;}
.proto-dlbtnrow{font-size:18px;color:var(--proto-brand);}

/* ── 桌面窗口外壳容器
     桌面 (>1100px)：1060×640 原尺寸；
     ≤1100 时由 @media 覆盖为等比缩放容器（配 transform:scale） */
.tut-mock-win{
  width:1060px; height:640px;
  max-width:100%;
  overflow:hidden;
  margin:0 auto;
  border-radius:7px;
}
.proto-win{
  width:1060px; height:640px; border-radius:12px; overflow:hidden;
  -webkit-flex-shrink:0; flex-shrink:0;
  background:var(--proto-bg); display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column;
  box-shadow:0 40px 90px -28px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);
}
.proto-titlebar{height:42px;-webkit-flex:0 0 auto;flex:0 0 auto;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;padding:0 8px 0 16px;background:var(--proto-bg2);border-bottom:1px solid var(--proto-line);}
.proto-tb-brand{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--proto-on);}
.proto-tb-logo{width:18px;height:18px;border-radius:5px;background:-webkit-linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));background:linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));}
.proto-tb-btns{display:-webkit-flex;display:flex;gap:6px;-webkit-align-items:center;align-items:center;}
.proto-tb-btns span{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.15);}
.proto-tb-btns .proto-close{background:#ff5f57;}
.proto-win-body{-webkit-flex:1;flex:1;min-height:0;display:-webkit-flex;display:flex;}

/* ── 桌面左侧导航栏 ── */
.proto-side{width:192px;-webkit-flex:0 0 auto;flex:0 0 auto;background:var(--proto-bg2);border-right:1px solid var(--proto-line);display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;padding:14px 10px;}
.proto-side-brand{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:10px;padding:6px 8px 14px;}
.proto-side-logo{font-size:26px;}
.proto-side-name{font-size:17px;font-weight:800;color:var(--proto-on);}
.proto-navit{padding:0 13px;height:48px;line-height:48px;font-size:14px;font-weight:600;color:var(--proto-on);border-radius:12px;cursor:pointer;letter-spacing:.3px;}
.proto-navit:hover{background:var(--proto-bgs);}
.proto-navit-on{background:rgba(var(--proto-glow),.12);color:var(--proto-brand);}

/* ── 桌面主内容区 ── */
.proto-win-main{-webkit-flex:1;flex:1;min-width:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;background:var(--proto-bg);}
.proto-win-chd{height:56px;-webkit-flex:0 0 auto;flex:0 0 auto;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;padding:0 26px;border-bottom:1px solid var(--proto-hair);}
.proto-win-cht{font-size:19px;font-weight:700;color:var(--proto-on);}
.proto-win-cbody{-webkit-flex:1;flex:1;overflow:hidden;padding:22px 26px;}
.proto-win-cols{display:-webkit-flex;display:flex;gap:18px;height:100%;}
.proto-win-lcol{-webkit-flex:1;flex:1;min-width:0;}
.proto-win-rcol{width:250px;-webkit-flex:0 0 auto;flex:0 0 auto;}

/* ── 桌面首页连接球卡 ── */
.proto-win-herocard{background:var(--proto-bg2);border:1px solid var(--proto-line);border-radius:18px;padding:28px 20px;text-align:center;box-shadow:0 2px 8px rgba(15,23,42,.06);}
.proto-win-orb-conn{width:140px;height:140px;border-radius:50%;margin:0 auto 16px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;border:3px solid var(--proto-brand);box-shadow:0 0 0 6px rgba(var(--proto-glow),.12);background:var(--proto-bg2);}
.proto-win-orb-ic{font-size:52px;}
.proto-win-status{font-size:18px;font-weight:700;letter-spacing:1.2px;color:var(--proto-brand);}
.proto-win-sub{font-size:12px;color:var(--proto-onv);margin-top:4px 0 18px;}
.proto-win-tiles{display:-webkit-flex;display:flex;gap:10px;margin-top:18px;}
.proto-win-tile{-webkit-flex:1;flex:1;background:var(--proto-bg);border:1px solid var(--proto-line);border-radius:12px;padding:12px 8px;text-align:center;}
.proto-win-tv{font-size:16px;font-weight:700;color:var(--proto-on);}
.proto-win-tv span{font-size:9px;color:var(--proto-onv);margin-left:1px;}
.proto-win-tl{font-size:11px;color:var(--proto-onv);margin-top:4px;}

/* ── 桌面连接信息卡 ── */
.proto-win-icard{background:var(--proto-bg2);border:1px solid var(--proto-line);border-radius:16px;overflow:hidden;box-shadow:0 2px 8px rgba(15,23,42,.06);}
.proto-win-icard-hd{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--proto-on);padding:13px 16px;border-bottom:1px solid var(--proto-hair);}
.proto-win-irow{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--proto-hair);}
.proto-win-irow:first-of-type{border-top:none;}
.proto-win-irow>span{font-size:22px;-webkit-flex-shrink:0;flex-shrink:0;}
.proto-win-inm{font-size:14px;font-weight:600;color:var(--proto-on);}
.proto-win-ids{font-size:11px;color:var(--proto-onv);margin-top:2px;}

/* ── 桌面登录弹窗 ── */
.proto-win-modal-bg{background:rgba(11,13,20,.38);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}
.proto-win-dlg{width:340px;background:var(--proto-bg2);border-radius:18px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.4);}
.proto-win-dlg-logo{font-size:36px;text-align:center;margin-bottom:10px;}
.proto-win-dlg-t{font-size:17px;font-weight:700;color:var(--proto-on);text-align:center;margin-bottom:5px;}
.proto-win-dlg-d{font-size:12px;color:var(--proto-onv);text-align:center;margin-bottom:14px;}
.proto-win-dlg-link{font-size:13px;color:var(--proto-brand);font-weight:600;text-align:center;margin-bottom:14px;}
.proto-win-field{height:44px;border:1px solid var(--proto-line);border-radius:10px;padding:0 13px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-size:13.5px;color:var(--proto-onv);background:var(--proto-bg);margin-bottom:9px;}
.proto-win-go{height:46px;border-radius:12px;background:-webkit-linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));background:linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));color:#fff;font-size:14px;font-weight:600;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;margin-top:4px;}
.proto-win-alt{text-align:center;font-size:12px;color:var(--proto-onv);margin-top:12px;}
.proto-win-alt b{color:var(--proto-brand);}
.proto-win-dlg-btns{display:-webkit-flex;display:flex;gap:10px;margin-top:16px;}
.proto-win-dlg-ghost{-webkit-flex:1;flex:1;height:44px;border-radius:11px;background:var(--proto-bgs);color:var(--proto-on);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;font-size:14px;font-weight:600;}
.proto-win-dlg-fill{-webkit-flex:1;flex:1;height:44px;border-radius:11px;background:var(--proto-brand);color:#fff;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;font-size:14px;font-weight:600;}

/* ── 桌面下载站（全宽无侧栏）── */
.proto-win-content{-webkit-flex:1;flex:1;overflow:hidden;background:var(--proto-bg);}
.proto-win-dl{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;padding:24px 32px;}
.proto-win-dlhero{text-align:center;margin-bottom:22px;}
.proto-win-dlname{font-size:28px;font-weight:800;color:var(--proto-on);letter-spacing:-.04em;}
.proto-win-dlsub{font-size:13px;color:var(--proto-onv);margin-top:5px;}
.proto-win-dlbtns{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;gap:10px;margin-top:14px;}
.proto-win-dlbtn-brand{height:44px;padding:0 22px;border-radius:12px;background:-webkit-linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));background:linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));color:#fff;font-size:14px;font-weight:600;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;}
.proto-win-dlbtn-out{height:44px;padding:0 18px;border-radius:12px;border:1.5px solid rgba(var(--proto-glow),.4);color:var(--proto-brand);font-size:14px;font-weight:600;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;}
.proto-win-plats{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:10px;}
.proto-win-plat{background:var(--proto-bg2);border:1px solid var(--proto-line);border-radius:14px;padding:14px 18px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:14px;}
.proto-win-plat-ic{font-size:28px;-webkit-flex-shrink:0;flex-shrink:0;}
.proto-win-plat-nm{font-size:14px;font-weight:700;color:var(--proto-on);margin-bottom:7px;}
.proto-win-plat-arch{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:7px;}
.proto-win-dl-btn{display:inline-block;background:rgba(var(--proto-glow),.09);color:var(--proto-brand);border:1px solid rgba(var(--proto-glow),.2);border-radius:8px;padding:4px 12px;font-size:12px;font-weight:600;}

/* ── 终端示意（Linux 安装）── */
.proto-win-term{-webkit-flex:1;flex:1;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;background:#1e1e2e;}
.proto-term-bar{height:36px;-webkit-flex:0 0 auto;flex:0 0 auto;background:#2a2a3d;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;padding:0 14px;gap:7px;}
.proto-term-dot{width:12px;height:12px;border-radius:50%;}
.proto-term-dot.red{background:#ff5f57;}
.proto-term-dot.yellow{background:#febc2e;}
.proto-term-dot.green{background:#28c840;}
.proto-term-title{margin-left:auto;font-size:12px;color:rgba(255,255,255,.5);}
.proto-term-body{-webkit-flex:1;flex:1;padding:16px 18px;font-size:13px;line-height:1.8;overflow:hidden;color:#c9d1d9;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;}
.proto-term-line{display:-webkit-flex;display:flex;-webkit-align-items:baseline;align-items:baseline;gap:8px;margin-bottom:2px;}
.proto-term-prompt{color:#39d353;font-weight:700;-webkit-flex-shrink:0;flex-shrink:0;}
.proto-term-comment{color:rgba(201,209,217,.5);}
.proto-term-out{color:rgba(201,209,217,.7);margin:.25rem 0 .5rem;padding-left:24px;}

/* ══════════════════════════════════════════════
   原型图扩展组件：节点列表 / 套餐 / 分组 Tab
   与 full-win.html / full.html CSS 同设计语言
   ══════════════════════════════════════════════ */

/* ── 节点行 ── */
.proto-node{
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  gap:11px; padding:11px 13px; border:1px solid var(--proto-line);
  border-radius:14px; margin-bottom:8px; background:var(--proto-bg2);
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 10px -6px rgba(15,23,42,.06);
}
.proto-node.proto-node-sel{
  border-color:var(--proto-brand);
  background:rgba(var(--proto-glow),.07);
  box-shadow:0 7px 20px -8px rgba(var(--proto-glow),.35);
}
.proto-node-flag{ font-size:22px; -webkit-flex-shrink:0; flex-shrink:0; }
.proto-node-nm{
  -webkit-flex:1; flex:1; min-width:0; font-size:14px; font-weight:500;
  color:var(--proto-on); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.proto-node-dot{
  width:8px; height:8px; border-radius:50%; -webkit-flex-shrink:0; flex-shrink:0;
}
.proto-dot-good{ background:var(--proto-ok); box-shadow:0 0 7px rgba(22,163,74,.6); }
.proto-dot-mid{  background:var(--proto-warn); box-shadow:0 0 7px rgba(224,138,30,.6); }
.proto-dot-bad{  background:var(--proto-bad,#dc3b2c); box-shadow:0 0 7px rgba(220,59,44,.5); }
.proto-node-lat{ font-size:13px; font-weight:600; -webkit-flex-shrink:0; flex-shrink:0; }
.proto-lat-good{ color:var(--proto-ok); }
.proto-lat-mid{  color:var(--proto-warn); }
.proto-lat-bad{  color:#dc3b2c; }
.proto-node-ck{
  margin-left:4px; color:var(--proto-brand); font-size:18px; font-weight:700;
  -webkit-flex-shrink:0; flex-shrink:0;
}

/* ── 节点页分组 Tab（手机）── */
.proto-gtabs{
  display:-webkit-flex; display:flex; gap:8px; margin-bottom:10px;
  overflow-x:auto; padding-bottom:3px; -webkit-overflow-scrolling:touch;
}
.proto-gtab{
  font-size:13px; font-weight:600; padding:6px 14px; border-radius:30px;
  background:var(--proto-bg2); border:1.4px solid var(--proto-line);
  color:var(--proto-on); white-space:nowrap; -webkit-flex-shrink:0; flex-shrink:0;
}
.proto-gtab-on{
  background:-webkit-linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));
  background:linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));
  border-color:transparent; color:#fff;
  box-shadow:0 6px 16px -6px rgba(var(--proto-glow),.5);
}

/* 分组头：类型标签 + 测延迟 */
.proto-ghd{
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  gap:9px; margin:2px 2px 10px; font-size:13px; font-weight:600; color:var(--proto-onv);
}
.proto-ghd-ty{
  display:-webkit-inline-flex; display:inline-flex; -webkit-align-items:center; align-items:center;
  font-size:11px; background:var(--proto-bgs); padding:3px 9px;
  border-radius:var(--r-sm,10px); font-weight:500; color:var(--proto-onv);
}
.proto-ghd-ts{ margin-left:auto; color:var(--proto-brand); font-weight:600; cursor:pointer; }
.proto-lcount{ margin-left:auto; font-size:12px; color:var(--proto-onv); font-weight:500; }

/* ── 节点 master-detail（桌面）── */
.proto-md{
  display:-webkit-flex; display:flex; gap:18px; height:100%;
  -webkit-align-items:flex-start; align-items:flex-start;
}
.proto-md-rail{
  width:160px; -webkit-flex:0 0 auto; flex:0 0 auto;
  display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column; gap:6px;
}
.proto-railhd{
  font-size:11px; font-weight:700; color:var(--proto-onv);
  letter-spacing:1px; text-transform:uppercase; padding:2px 4px 8px;
}
.proto-vtab{
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  gap:8px; padding:11px 13px; border-radius:12px; font-size:14px; font-weight:600;
  color:var(--proto-on); background:var(--proto-bg2); border:1px solid var(--proto-line);
  cursor:pointer; white-space:nowrap;
}
.proto-vtab-on{
  background:-webkit-linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));
  background:linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));
  border-color:transparent; color:#fff;
  box-shadow:0 7px 18px -7px rgba(var(--proto-glow),.5);
}
.proto-vtab-cnt{
  margin-left:auto; font-size:11px; background:var(--proto-bgs);
  padding:1px 8px; border-radius:10px; font-weight:600; color:var(--proto-onv);
}
.proto-vtab-on .proto-vtab-cnt{ background:rgba(255,255,255,.22); color:#fff; }
.proto-md-list{ -webkit-flex:1; flex:1; min-width:0; }
.proto-ngrid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.proto-win-refresh{
  margin-left:auto; font-size:13px; font-weight:600;
  color:var(--proto-brand); cursor:pointer;
}

/* ── 套餐购买（手机）── */
.proto-planopt{
  display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column;
  gap:5px; background:var(--proto-bg2); border:1.6px solid var(--proto-line);
  border-radius:16px; padding:16px; margin-bottom:11px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 12px -6px rgba(15,23,42,.07);
}
.proto-planopt-sel{
  border-color:var(--proto-brand);
  background:rgba(var(--proto-glow),.06);
  box-shadow:0 8px 24px -10px rgba(var(--proto-glow),.35);
}
.proto-planopt-top{
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:8px;
}
.proto-planopt-nm{ font-size:15.5px; font-weight:600; color:var(--proto-on); }
.proto-gbtag{
  font-size:11px; font-weight:600; color:var(--proto-brand);
  background:rgba(var(--proto-glow),.1);
  padding:3px 9px; border-radius:var(--r-sm,10px);
}
.proto-save-tag{
  font-size:11px; font-weight:600; color:#fff; background:var(--proto-brand);
  padding:3px 9px; border-radius:var(--r-sm,10px);
  box-shadow:0 4px 10px -3px rgba(var(--proto-glow),.5);
}
.proto-planopt-ft{ font-size:12px; color:var(--proto-onv); line-height:1.5; }
.proto-planopt-price{
  font-size:26px; font-weight:800; color:var(--proto-brand);
  font-variant-numeric:tabular-nums; line-height:1.1; margin-top:4px;
}
.proto-planopt-price-dim{ color:var(--proto-on); }
.proto-planopt-unit{ font-size:13px; font-weight:500; color:var(--proto-onv); margin-left:2px; }

/* ── 套餐周期网格（桌面）── */
.proto-pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-bottom:18px; }
.proto-popt{
  position:relative; text-align:center; padding:16px 8px 14px;
  border:1.6px solid var(--proto-line); border-radius:14px; cursor:pointer;
  background:var(--proto-bg2); box-shadow:0 1px 3px rgba(15,23,42,.05);
}
.proto-popt-on{
  border-color:var(--proto-brand);
  background:rgba(var(--proto-glow),.06);
}
.proto-popt-save{
  position:absolute; top:-9px; right:8px;
  font-size:11.5px; font-weight:600; color:#fff; background:var(--proto-onv);
  padding:3px 9px; border-radius:var(--r-sm,10px); white-space:nowrap;
}
.proto-popt-save-brand{ background:var(--proto-brand); box-shadow:0 4px 10px -3px rgba(var(--proto-glow),.5); }
.proto-popt-lbl{ font-size:13.5px; color:var(--proto-on); font-weight:500; }
.proto-popt-on .proto-popt-lbl{ color:var(--proto-brand); }
.proto-popt-price{
  font-size:20px; font-weight:700; color:var(--proto-on);
  font-variant-numeric:tabular-nums; margin-top:6px; line-height:1.1;
}
.proto-popt-on .proto-popt-price{ color:var(--proto-brand); }
.proto-popt-unit{ font-size:11px; color:var(--proto-onv); font-weight:500; }
.proto-popt-ft{ font-size:11px; color:var(--proto-onv); margin-top:5px; }

/* 订单摘要行 */
.proto-sumdiv{ height:1px; background:var(--proto-line); margin:12px 0; }
.proto-sumrow{
  display:-webkit-flex; display:flex; -webkit-justify-content:space-between; justify-content:space-between;
  -webkit-align-items:center; align-items:center; padding:6px 0;
  font-size:14px; color:var(--proto-onv);
}
.proto-sumrow-v{ color:var(--proto-on); font-weight:500; font-variant-numeric:tabular-nums; }
.proto-sumrow-tot{ font-size:15px; font-weight:600; color:var(--proto-on); }
.proto-sumrow-brand{ font-size:22px; font-weight:700; color:var(--proto-brand); }

/* 支付按钮 */
.proto-pbtn{
  height:50px; border-radius:14px;
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  font-size:15px; font-weight:600; cursor:pointer; margin-bottom:10px;
}
.proto-pbtn-fill{
  color:#fff;
  background:-webkit-linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));
  background:linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));
  box-shadow:0 8px 20px -8px rgba(var(--proto-glow),.4);
}
.proto-pay-hint{
  text-align:center; font-size:12px; color:var(--proto-onv); margin-top:8px;
}

/* ══════════════════════════════════════════════
   系统弹窗原型：Windows SmartScreen / macOS Gatekeeper
   不放在应用窗口框内，而是直接展示系统级 UI
   ══════════════════════════════════════════════ */

/* ── 公共：全宽系统背景容器 ── */
.proto-sys-win,
.proto-sys-mac{
  width:100%; height:640px;
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  position:relative; overflow:hidden;
}

/* ── Windows 11 桌面背景（深色壁纸氛围） ── */
.proto-win11-bg{
  position:absolute; top:0;right:0;bottom:0;left:0;
  background:-webkit-linear-gradient(315deg,#0a1628 0%,#1a2744 45%,#0d1f3c 100%);
  background:linear-gradient(135deg,#0a1628 0%,#1a2744 45%,#0d1f3c 100%);
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
}
/* 任务栏底部条 */
.proto-win11-bg::after{
  content:"";
  position:absolute; bottom:0; left:0; right:0; height:44px;
  background:rgba(32,36,56,.85);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.08);
}

/* Windows SmartScreen 弹窗 */
.proto-smartscreen{
  width:440px; background:#fff; border-radius:8px;
  box-shadow:0 32px 80px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.12);
  overflow:hidden; font-family:'Segoe UI',system-ui,sans-serif;
  position:relative; z-index:1;
}
/* 顶部深蓝安全色标题栏 */
.proto-ss-header{
  background:#003472;
  padding:20px 24px 18px;
  display:-webkit-flex; display:flex;
  -webkit-align-items:flex-start; align-items:flex-start; gap:16px;
}
.proto-ss-shield{
  font-size:36px; -webkit-flex-shrink:0; flex-shrink:0; margin-top:2px;
  filter:brightness(0) invert(1);
}
.proto-ss-title{
  font-size:16px; font-weight:600; color:#fff; line-height:1.3; margin-bottom:5px;
}
.proto-ss-sub{
  font-size:12px; color:rgba(255,255,255,.8); line-height:1.55;
}
/* 正文区 */
.proto-ss-info{
  padding:16px 24px 8px;
  background:#f3f3f3;
}
.proto-ss-row{
  font-size:13px; padding:4px 0; color:#333;
}
.proto-ss-lbl{ color:#666; margin-right:4px; }
.proto-ss-val{ color:#111; font-weight:500; }
.proto-ss-more{
  padding:8px 24px 12px;
  font-size:13px; color:#005fb8; cursor:pointer;
  background:#f3f3f3;
  -webkit-text-decoration:underline; text-decoration:underline;
}
/* 按钮区 */
.proto-ss-btns{
  display:-webkit-flex; display:flex;
  -webkit-justify-content:flex-end; justify-content:flex-end;
  gap:8px; padding:12px 20px 16px;
  background:#fff;
}
.proto-ss-btn-cancel{
  padding:7px 22px; font-size:13px; font-weight:400;
  border:1px solid #aaa; border-radius:4px;
  background:#f0f0f0; color:#1a1a1a; cursor:pointer;
  font-family:'Segoe UI',system-ui,sans-serif;
}
.proto-ss-btn-run{
  padding:7px 22px; font-size:13px; font-weight:400;
  border:1px solid #0067c0; border-radius:4px;
  background:#0067c0; color:#fff; cursor:pointer;
  font-family:'Segoe UI',system-ui,sans-serif;
}

/* ── macOS 桌面背景 ── */
.proto-mac-bg{
  position:absolute; top:0;right:0;bottom:0;left:0;
  background:-webkit-linear-gradient(290deg,#1a1a2e 0%,#2d1b69 50%,#11998e 100%);
  background:linear-gradient(160deg,#1a1a2e 0%,#2d1b69 50%,#11998e 100%);
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
}
/* 顶部菜单栏 */
.proto-mac-bg::before{
  content:"🍎  访达  文件  编辑  显示  前往  窗口  帮助";
  position:absolute; top:0; left:0; right:0; height:28px;
  background:rgba(30,30,30,.72);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  color:rgba(255,255,255,.88); font-size:12px;
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  padding:0 14px; gap:18px;
  letter-spacing:.1px;
}
/* Gatekeeper 对话框（macOS 原生风格） */
.proto-gatekeeper{
  width:380px; background:rgba(255,255,255,.98);
  border-radius:12px;
  box-shadow:0 28px 70px rgba(0,0,0,.5),0 0 0 0.5px rgba(0,0,0,.18);
  overflow:hidden; position:relative; z-index:1;
  text-align:center;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
}
.proto-gk-icon{
  font-size:52px; margin:28px 0 10px;
  display:block;
}
.proto-gk-title{
  font-size:15px; font-weight:600; color:#1c1c1e;
  padding:0 28px; margin-bottom:8px;
}
.proto-gk-body{
  font-size:12.5px; color:#3c3c43; line-height:1.6;
  padding:0 28px 18px; text-align:left;
}
/* 分割线 */
.proto-gatekeeper::after{
  content:"";
  display:block;
  height:1px;
  background:rgba(0,0,0,.12);
}
.proto-gk-btns{
  display:-webkit-flex; display:flex;
  border-top:1px solid rgba(0,0,0,.1);
}
.proto-gk-btn-cancel,
.proto-gk-btn-open{
  -webkit-flex:1; flex:1;
  padding:13px 8px;
  font-size:14px; cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
.proto-gk-btn-cancel{
  color:#007aff; font-weight:400;
  border-right:1px solid rgba(0,0,0,.1);
  background:transparent;
}
.proto-gk-btn-open{
  color:#007aff; font-weight:600;
  background:transparent;
}

/* ══════════════════════════════════════════════
   Android 系统安装界面（Material You 风格）
   ══════════════════════════════════════════════ */
.proto-android-sys{
  width:100%; height:100%;
  background:#fefefe;
  display:-webkit-flex; display:flex;
  -webkit-flex-direction:column; flex-direction:column;
}
.proto-android-sb{
  height:28px; -webkit-flex-shrink:0; flex-shrink:0;
  background:#f8f8f8;
  display:-webkit-flex; display:flex;
  -webkit-justify-content:space-between; justify-content:space-between;
  -webkit-align-items:center; align-items:center;
  padding:0 20px; font-size:12px; font-weight:500; color:#1a1a1a;
}
.proto-android-topbar{
  height:58px; -webkit-flex-shrink:0; flex-shrink:0;
  background:#fff;
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  padding:0 18px; gap:14px;
  border-bottom:1px solid #e8e8e8;
}
.proto-android-back{
  font-size:26px; color:#444; cursor:pointer; line-height:1;
}
.proto-android-bar-title{
  font-size:18px; font-weight:500; color:#1a1a1a;
  font-family:'Google Sans',Roboto,system-ui,sans-serif;
}
.proto-android-body{
  -webkit-flex:1; flex:1; overflow:hidden;
  padding:20px 18px; background:#f8f9fa;
}
/* 应用信息卡 */
.proto-android-appcard{
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  gap:14px; background:#fff;
  border-radius:16px; padding:16px;
  margin-bottom:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.proto-android-appicon{
  width:52px; height:52px; border-radius:12px;
  background:-webkit-linear-gradient(315deg,var(--proto-brand-l),var(--proto-brand));
  background:linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  font-size:26px; -webkit-flex-shrink:0; flex-shrink:0;
}
.proto-android-appname{
  font-size:14px; font-weight:500; color:#1a1a1a;
  font-family:'Google Sans',Roboto,system-ui,sans-serif;
}
.proto-android-appsrc{
  font-size:12px; color:#666; margin-top:3px;
}
/* 警告框 */
.proto-android-warn{
  display:-webkit-flex; display:flex;
  -webkit-align-items:flex-start; align-items:flex-start;
  gap:10px; background:#fff3e0; border-radius:12px;
  padding:13px 14px; margin-bottom:14px;
  border:1px solid #ffe0b2;
}
.proto-android-warn-ic{ font-size:20px; -webkit-flex-shrink:0; flex-shrink:0; margin-top:1px; }
.proto-android-warn-txt{ font-size:13px; color:#e65100; line-height:1.5; }
/* 开关行 */
.proto-android-row{
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  gap:14px; background:#fff; border-radius:16px;
  padding:16px; margin-bottom:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.proto-android-row-txt{ -webkit-flex:1; flex:1; }
.proto-android-row-main{ font-size:14px; font-weight:500; color:#1a1a1a; }
.proto-android-row-sub{ font-size:12px; color:#666; margin-top:3px; line-height:1.4; }
/* Material You 开关 */
.proto-android-sw{
  width:50px; height:30px; border-radius:15px;
  background:#e0e0e0; -webkit-flex-shrink:0; flex-shrink:0;
  position:relative;
}
.proto-android-sw::after{
  content:""; position:absolute;
  top:3px; left:3px;
  width:24px; height:24px; border-radius:50%;
  background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.2);
  -webkit-transition:left .2s; transition:left .2s;
}
.proto-android-sw-on{
  background:var(--proto-brand);
}
.proto-android-sw-on::after{ left:23px; }
/* 安装/取消按钮 */
.proto-android-install-btn{
  width:100%; height:52px; border-radius:100px;
  background:var(--proto-brand); color:#fff;
  font-size:15px; font-weight:500;
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  margin-bottom:10px; cursor:pointer;
  font-family:'Google Sans',Roboto,system-ui,sans-serif;
  letter-spacing:.5px;
}
.proto-android-cancel-btn{
  width:100%; height:52px; border-radius:100px;
  background:transparent; color:var(--proto-brand);
  font-size:15px; font-weight:500;
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  border:1.5px solid var(--proto-brand); cursor:pointer;
  font-family:'Google Sans',Roboto,system-ui,sans-serif;
  letter-spacing:.5px;
}

/* ══════════════════════════════════════════════
   macOS 连接授权弹窗（浮在应用窗口上方）
   ══════════════════════════════════════════════ */
/* 背景应用窗口 */
.proto-mac-appbg{
  width:420px; border-radius:12px; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  background:var(--proto-bg);
  position:absolute;
  opacity:.55;
}
.proto-mac-win-chrome{
  height:36px; background:#e8e8e8;
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  padding:0 14px; gap:8px;
}
.proto-mac-dots{ display:-webkit-flex; display:flex; gap:6px; }
.proto-mac-dots span{
  width:12px; height:12px; border-radius:50%;
}
.proto-mac-dots .r{ background:#ff5f57; }
.proto-mac-dots .y{ background:#febc2e; }
.proto-mac-dots .g{ background:#28c840; }
.proto-mac-wintitle{
  font-size:13px; font-weight:600; color:#333;
  margin:0 auto;
}
.proto-mac-win-body{
  height:160px;
}
/* 连接授权弹窗（前景，在应用上方） */
.proto-connection-dlg{
  width:340px;
  position:relative; z-index:2;
  box-shadow:0 28px 70px rgba(0,0,0,.6),0 0 0 0.5px rgba(0,0,0,.2) !important;
}
.proto-connection-auth{
  margin:0 24px 14px;
  background:#f2f2f7; border-radius:10px;
  overflow:hidden;
}
.proto-connection-auth-row{
  font-size:12.5px; color:#3c3c43;
  padding:10px 14px 8px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.proto-connection-auth-input{
  height:36px; padding:0 14px;
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  font-size:14px; color:#8e8e93;
  background:#fff;
}

/* ══════════════════════════════════════════════
   Windows UAC 弹窗 + macOS Finder 拖拽安装
   ══════════════════════════════════════════════ */

/* ── Windows UAC ── */
.proto-uac{
  width:420px; background:#fff;
  border-radius:8px;
  box-shadow:0 32px 80px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.12);
  overflow:hidden;
  font-family:'Segoe UI',system-ui,sans-serif;
  position:relative; z-index:1;
}
.proto-uac-header{
  background:#1b4fa0;
  padding:22px 24px 18px;
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  gap:16px;
}
.proto-uac-shield{ font-size:40px; -webkit-flex-shrink:0; flex-shrink:0; }
.proto-uac-title{
  font-size:15px; font-weight:600; color:#fff; line-height:1.4;
}
.proto-uac-body{
  padding:18px 24px 14px;
  background:#f3f3f3;
}
.proto-uac-row{
  display:-webkit-flex; display:flex;
  -webkit-align-items:baseline; align-items:baseline;
  gap:6px; padding:4px 0; font-size:13px;
}
.proto-uac-lbl{ color:#555; white-space:nowrap; }
.proto-uac-val{ color:#111; font-weight:500; }
.proto-uac-unknown{ color:#c0392b; }
.proto-uac-hint{
  margin-top:12px; padding:10px 12px;
  background:#fff8e1; border:1px solid #ffe082;
  border-radius:4px; font-size:12px; color:#7b5e00;
  line-height:1.5;
}
.proto-uac-btns{
  display:-webkit-flex; display:flex;
  -webkit-justify-content:flex-end; justify-content:flex-end;
  gap:10px; padding:14px 20px 16px;
  background:#fff;
}
.proto-uac-yes{
  padding:7px 30px; font-size:13px; font-weight:400;
  border:1px solid #0067c0; border-radius:4px;
  background:#0067c0; color:#fff; cursor:pointer;
  font-family:'Segoe UI',system-ui,sans-serif;
}
.proto-uac-no{
  padding:7px 22px; font-size:13px; font-weight:400;
  border:1px solid #aaa; border-radius:4px;
  background:#f0f0f0; color:#1a1a1a; cursor:pointer;
  font-family:'Segoe UI',system-ui,sans-serif;
}

/* ── macOS Finder 拖拽安装 ── */
.proto-finder{
  width:480px; border-radius:12px; overflow:hidden;
  box-shadow:0 28px 70px rgba(0,0,0,.5),0 0 0 0.5px rgba(0,0,0,.18);
  background:#fff;
  position:relative; z-index:1;
  font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
.proto-finder-titlebar{
  height:38px; background:#e8e8e8;
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  padding:0 14px;
}
.proto-finder-title{
  font-size:13px; font-weight:600; color:#333;
  margin:0 auto;
}
.proto-finder-body{
  padding:36px 28px 28px;
  background:#f5f5f5;
}
.proto-finder-row{
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  gap:28px; margin-bottom:20px;
}
.proto-finder-app{
  display:-webkit-flex; display:flex;
  -webkit-flex-direction:column; flex-direction:column;
  -webkit-align-items:center; align-items:center;
  gap:10px;
}
.proto-finder-icon{
  width:80px; height:80px; border-radius:18px;
  background:-webkit-linear-gradient(315deg,var(--proto-brand-l),var(--proto-brand));
  background:linear-gradient(135deg,var(--proto-brand-l),var(--proto-brand));
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  font-size:40px;
  box-shadow:0 8px 24px rgba(217,46,26,.4);
}
.proto-finder-folder{
  width:80px; height:80px; border-radius:18px;
  background:-webkit-linear-gradient(315deg,#4fc3f7,#0288d1);
  background:linear-gradient(135deg,#4fc3f7,#0288d1);
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  font-size:40px;
  box-shadow:0 8px 24px rgba(2,136,209,.3);
}
.proto-finder-name{
  font-size:13px; color:#1a1a1a; font-weight:500;
  text-align:center;
}
.proto-finder-arrow{
  font-size:32px; color:#999; font-weight:200;
  /* 拖拽箭头动画 */
  -webkit-animation:drag-hint 1.8s ease-in-out infinite;
  animation:drag-hint 1.8s ease-in-out infinite;
}
@-webkit-keyframes drag-hint{
  0%,100%{ -webkit-transform:translateX(0); transform:translateX(0); opacity:.7; }
  50%{ -webkit-transform:translateX(8px); transform:translateX(8px); opacity:1; }
}
@keyframes drag-hint{
  0%,100%{ transform:translateX(0); opacity:.7; }
  50%{ transform:translateX(8px); opacity:1; }
}
.proto-finder-hint{
  text-align:center; font-size:13px; color:#666; line-height:1.5;
  background:#fff; border-radius:8px; padding:10px 16px;
  border:1px solid #ddd;
}

/* ── Linux 终端扩展样式 ── */
.proto-term-section{
  font-size:11px; color:rgba(201,209,217,.5);
  margin-bottom:4px; letter-spacing:.5px;
}
.proto-term-ok{ color:#39d353; }
.proto-term-cursor{
  -webkit-animation:blink .8s step-end infinite;
  animation:blink .8s step-end infinite;
  color:#c9d1d9;
}
@-webkit-keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0} }

/* ══════════════════════════════════════════════
   macOS Gatekeeper 两步图解（右键 + 系统设置）
   ══════════════════════════════════════════════ */

/* 顶部说明标题栏 */
.proto-gk-topbar{
  width:100%; background:rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:10px 28px; -webkit-flex-shrink:0; flex-shrink:0;
}
.proto-gk-topbar-inner{
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  gap:10px; max-width:680px; margin:0 auto;
}
.proto-gk-topbar-badge{
  font-size:11px; font-weight:700; color:#fff;
  background:rgba(0,122,255,.8); border-radius:999px;
  padding:2px 10px; white-space:nowrap;
}
.proto-gk-topbar-badge-alt{ background:rgba(52,199,89,.8); }
.proto-gk-topbar-txt{
  font-size:13px; color:rgba(255,255,255,.85); font-weight:500;
  white-space:nowrap;
}
.proto-gk-topbar-sep{
  width:1px; height:16px; background:rgba(255,255,255,.2); margin:0 8px;
}

/* 系统设置窗口 */
.proto-sysset{
  width:280px; border-radius:12px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 0 0.5px rgba(0,0,0,.18);
  background:#f2f2f7;
  font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  -webkit-flex-shrink:0; flex-shrink:0;
}
.proto-sysset-titlebar{
  height:36px; background:#e8e8ed;
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  padding:0 14px;
}
.proto-sysset-title{
  font-size:13px; font-weight:600; color:#1c1c1e;
  margin:0 auto;
}
.proto-sysset-body{ padding:14px; }
.proto-sysset-section{
  font-size:11px; font-weight:700; color:#8e8e93;
  text-transform:uppercase; letter-spacing:.5px;
  padding:0 4px 6px; margin-bottom:4px;
}
.proto-sysset-row{
  background:#fff; border-radius:10px;
  padding:12px 14px; margin-bottom:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.proto-sysset-row-main{ font-size:13px; font-weight:500; color:#1c1c1e; }
.proto-sysset-row-sub{ font-size:11.5px; color:#8e8e93; margin-top:2px; }
/* 被拦截的提示行（品牌高亮） */
.proto-sysset-blocked{
  background:#fff; border-radius:10px; padding:12px 14px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  border:1.5px solid rgba(217,46,26,.3);
  display:-webkit-flex; display:flex;
  -webkit-align-items:flex-start; align-items:flex-start;
  gap:10px;
}
.proto-sysset-blocked-ic{ font-size:20px; -webkit-flex-shrink:0; flex-shrink:0; margin-top:1px; }
.proto-sysset-blocked-txt{
  -webkit-flex:1; flex:1;
  font-size:11.5px; color:#3c3c43; line-height:1.55;
}
.proto-sysset-blocked-btn{
  margin-top:8px; padding:6px 12px;
  background:#007aff; color:#fff;
  border-radius:7px; font-size:12px; font-weight:600;
  cursor:pointer; white-space:nowrap; -webkit-flex-shrink:0; flex-shrink:0;
  -webkit-align-self:flex-end; align-self:flex-end;
}

/* ══════════════════════════════════════════════
   macOS Gatekeeper 系统设置路径（3 步流程）
   ══════════════════════════════════════════════ */
.proto-mac-bg-flow{
  -webkit-flex-direction:column; flex-direction:column;
  gap:0; -webkit-justify-content:flex-start; justify-content:flex-start;
}
.proto-mac-bg-flow::before{ display:none; } /* 隐藏菜单栏，聚焦流程 */

.proto-gk-flow{
  -webkit-flex:1; flex:1;
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  gap:6px; padding:16px 20px;
  -webkit-flex-wrap:nowrap; flex-wrap:nowrap;
}
.proto-gk-step{
  display:-webkit-flex; display:flex;
  -webkit-flex-direction:column; flex-direction:column;
  -webkit-align-items:center; align-items:center;
  -webkit-flex:1; flex:1; min-width:0;
  position:relative;
}
.proto-gk-step-num{
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.92); color:#1a1a2e;
  font-size:14px; font-weight:800;
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  margin-bottom:12px; -webkit-flex-shrink:0; flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.proto-gk-step-scene{
  display:-webkit-flex; display:flex;
  -webkit-flex-direction:column; flex-direction:column;
  -webkit-align-items:center; align-items:center;
  gap:12px; width:100%;
}
.proto-gk-step-tip{
  font-size:11.5px; color:rgba(255,255,255,.75); text-align:center;
  line-height:1.5;
}
.proto-gk-step-tip b{ color:#fff; font-weight:600; }
.proto-gk-arrow{
  font-size:26px; color:rgba(255,255,255,.5); font-weight:200;
  -webkit-flex-shrink:0; flex-shrink:0;
  -webkit-align-self:center; align-self:center;
  margin-top:-40px;
}

/* 小尺寸 Gatekeeper 弹窗（流程内） */
.proto-gk-sm{
  width:100%; max-width:230px;
}
.proto-gk-sm .proto-gk-btns .proto-gk-btn-cancel,
.proto-gk-sm .proto-gk-btns .proto-gk-btn-open{
  padding:10px 8px; font-size:13px;
}
/* 高亮"打开"按钮 */
.proto-gk-btn-highlight{
  background:#007aff !important;
  color:#fff !important;
  font-weight:600;
}

/* 小尺寸系统设置窗口（流程内） */
.proto-sysset-sm{
  width:100%; max-width:250px;
}
.proto-sysset-sm .proto-sysset-body{ padding:12px; }

/* ══════════════════════════════════════════════
   Android 连接授权系统弹窗
   ══════════════════════════════════════════════ */
.proto-android-connection-scrim{
  position:absolute; top:0;right:0;bottom:0;left:0; top:28px;
  background:rgba(0,0,0,.4);
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  padding:24px;
}
.proto-android-connection-dlg{
  width:100%; max-width:300px;
  background:#fff; border-radius:28px;
  padding:26px 24px 18px;
  box-shadow:0 18px 50px rgba(0,0,0,.4);
  font-family:'Google Sans',Roboto,system-ui,sans-serif;
}
.proto-android-connection-ic{
  font-size:34px; text-align:center; margin-bottom:14px;
}
.proto-android-connection-t{
  font-size:20px; font-weight:500; color:#1a1a1a;
  text-align:center; margin-bottom:12px;
}
.proto-android-connection-d{
  font-size:14px; color:#444; line-height:1.6;
  text-align:center; margin-bottom:16px;
}
.proto-android-connection-badge{
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  gap:8px; background:#f1f3f4; border-radius:12px;
  padding:10px 12px; margin-bottom:18px;
}
.proto-android-connection-key{ font-size:16px; -webkit-flex-shrink:0; flex-shrink:0; }
.proto-android-connection-badge span:last-child{
  font-size:12px; color:#5f6368; line-height:1.4;
}
.proto-android-connection-btns{
  display:-webkit-flex; display:flex;
  -webkit-justify-content:flex-end; justify-content:flex-end;
  gap:8px;
}
.proto-android-connection-cancel{
  padding:10px 18px; font-size:14px; font-weight:500;
  color:var(--proto-brand); cursor:pointer; border-radius:100px;
}
.proto-android-connection-ok{
  padding:10px 22px; font-size:14px; font-weight:500;
  color:#fff; background:var(--proto-brand); cursor:pointer;
  border-radius:100px;
}

/* ══════════════════════════════════════════════
   移动端 & 响应式适配
   - 加大文字，方便老年人和高分屏阅读
   - 桌面原型（1060×640）按屏幕宽度分档缩放
   - 手机原型（380×822）按屏幕宽度分档缩放
   ══════════════════════════════════════════════ */

/* 步骤文字加大（基础样式覆盖） */
.tut-hero h1{ font-size:clamp(1.9rem,5vw,2.6rem); }
.tut-hero .tagline{ font-size:1.05rem; }
.tut-back{ font-size:.92rem; }
.tut-tab{ font-size:1rem; padding:.65rem 1.2rem; }
.tut-step-body h3{ font-size:1.15rem; margin-bottom:.55rem; }
.tut-step-desc{ font-size:.98rem; line-height:1.72; }
.tut-step-desc code{ font-size:.9em; }
.tut-list li{ padding:.42rem 0 .42rem 1.15rem; }
.tut-step-no{ width:34px; height:34px; font-size:1rem; }
.tut-optional-badge{ font-size:.75rem; }

/* ═════════ 平板断点 ≤ 1100px：桌面原型缩到 720×435 ═════════ */
@media (max-width:1100px){
  .tut-main{ padding-left:1rem; padding-right:1rem; }
  .tut-mock-win{
    width:720px; height:435px;
    max-width:100%;
    position:relative; overflow:hidden;
    margin:0 auto;
  }
  .tut-mock-win .proto-win{
    -webkit-transform:scale(.68); transform:scale(.68);
    -webkit-transform-origin:top left; transform-origin:top left;
  }
  /* Gatekeeper 3 步流程箭头缩小 */
  .proto-gk-arrow{ font-size:22px; }
}

/* ═════════ 中屏断点 ≤ 760px（大手机 / 小平板）═════════ */
@media (max-width:760px){
  .tut-hero{ padding:2rem 1rem 1.2rem; }
  .tut-hero h1{ font-size:1.8rem; }
  .tut-hero .tagline{ font-size:.95rem; }
  .tut-main{ padding:0 .8rem 2rem; }
  .tut-panel{ margin:0 auto; }
  /* Tab 加大更好点击 */
  .tut-tab{ font-size:.95rem; padding:.6rem 1.05rem; }
  /* 步骤卡片 padding 微调 */
  .tut-step-left{ padding:1.1rem 1rem; gap:.85rem; }
  .tut-step-no{ width:32px; height:32px; font-size:.95rem; }
  .tut-step-body h3{ font-size:1.08rem; }
  .tut-step-desc{ font-size:.95rem; line-height:1.72; }

  /* 桌面原型缩到 480×290 */
  .tut-mock-win{
    width:480px; height:290px;
  }
  .tut-mock-win .proto-win{
    -webkit-transform:scale(.453); transform:scale(.453);
  }
  /* 手机原型缩到 280×606 */
  .tut-mock-phone{
    padding:1rem 0;
  }
  .tut-mock-phone .proto-phone{
    -webkit-transform:scale(.74); transform:scale(.74);
    -webkit-transform-origin:top center; transform-origin:top center;
    margin-bottom:calc(822px * -.26);
  }
  /* Gatekeeper 3 步流程改为竖排 */
  .proto-gk-flow{
    -webkit-flex-direction:column; flex-direction:column;
    gap:14px; padding:14px 12px;
  }
  .proto-gk-arrow{
    -webkit-transform:rotate(90deg); transform:rotate(90deg);
    margin-top:0;
  }
  .proto-gk-step{ width:100%; }
}

/* ═════════ 小屏断点 ≤ 480px（普通手机）═════════ */
@media (max-width:480px){
  .tut-hero{ padding:1.6rem 1rem 1rem; }
  .tut-hero h1{ font-size:1.55rem; }
  .tut-hero .tagline{ font-size:.9rem; margin:0 .5rem; }
  .tut-back{ font-size:.85rem; margin-bottom:.7rem; }

  .tut-tabs{ gap:.35rem; }
  .tut-tab{ font-size:.88rem; padding:.5rem .9rem; }
  .tut-tab .tut-tab-ic svg{ width:15px; height:15px; }

  .tut-step-left{ padding:1rem .9rem; gap:.75rem; }
  .tut-step-no{ width:28px; height:28px; font-size:.85rem; }
  .tut-step-body h3{ font-size:1.02rem; }
  .tut-step-desc{ font-size:.9rem; line-height:1.7; }
  .tut-list li{ padding:.36rem 0 .36rem 1rem; font-size:.9rem; }

  /* 桌面原型缩到 340×205 */
  .tut-mock-win{
    width:340px; height:205px;
  }
  .tut-mock-win .proto-win{
    -webkit-transform:scale(.32); transform:scale(.32);
  }
  /* 手机原型缩到 220×476 */
  .tut-mock-phone .proto-phone{
    -webkit-transform:scale(.58); transform:scale(.58);
    margin-bottom:calc(822px * -.42);
  }

  /* 底部前往下载按钮 */
  .tut-foot-cta{ margin:1.5rem 0 .5rem; }
}

/* ═════════ 超小屏断点 ≤ 380px（老式手机）═════════ */
@media (max-width:380px){
  .tut-hero h1{ font-size:1.4rem; }
  .tut-tab{ font-size:.82rem; padding:.45rem .75rem; }
  /* 手机原型强制缩到能塞进屏幕 */
  .tut-mock-phone .proto-phone{
    -webkit-transform:scale(.5); transform:scale(.5);
    margin-bottom:calc(822px * -.5);
  }
  /* 桌面原型缩到 300×181 */
  .tut-mock-win{
    width:300px; height:181px;
  }
  .tut-mock-win .proto-win{
    -webkit-transform:scale(.283); transform:scale(.283);
  }
}


/* ══════════════════════════════════════════════
   iOS / nextin 第三方客户端原型（深色为主）
   ══════════════════════════════════════════════ */

/* 深色屏：状态栏文字转白 */
.proto-screen-nx{ background:#0b0e14; }
.proto-screen-nx .proto-sb{ color:#fff; }

/* nextin N 型 logo（内联 SVG 已带渐变描边） */
.proto-nx-logo{ display:block; }

/* ── App Store 搜索结果（浅色）── */
.proto-as{ height:100%; background:#f2f2f7; padding:14px 16px; }
.proto-as-hd{ font-size:26px; font-weight:800; color:#11141b; letter-spacing:-.03em; margin:2px 0 12px; }
.proto-as-search{
  height:38px; border-radius:11px; background:#e3e3e9; color:#8a8a8f;
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  gap:6px; padding:0 12px; font-size:15px; margin-bottom:16px;
}
.proto-as-search span{ color:#11141b; }
.proto-as-card{
  background:#fff; border-radius:18px; padding:16px;
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:14px;
  box-shadow:0 6px 20px -10px rgba(0,0,0,.2);
}
.proto-as-icon{
  width:64px; height:64px; border-radius:15px; -webkit-flex-shrink:0; flex-shrink:0;
  background:#0b0e14; display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center;
}
.proto-as-icon svg{ width:44px; height:44px; }
.proto-as-info{ -webkit-flex:1; flex:1; min-width:0; }
.proto-as-nm{ font-size:17px; font-weight:700; color:#11141b; }
.proto-as-sub{ font-size:12px; color:#8a8a8f; margin-top:2px; }
.proto-as-getrow{ margin-top:8px; }
.proto-as-get{
  display:inline-block; background:#e3e3e9; color:#0a84ff; font-weight:700;
  font-size:14px; padding:5px 20px; border-radius:999px;
}
.proto-as-shots{ display:-webkit-flex; display:flex; gap:10px; margin-top:16px; }
.proto-as-shots div{
  -webkit-flex:1; flex:1; height:200px; border-radius:14px;
  background:-webkit-linear-gradient(160deg,#1a2a33,#0b0e14);
  background:linear-gradient(160deg,#1a2a33,#0b0e14);
}

/* ── nextin 深色通用页 ── */
.proto-nx-page{
  height:100%; background:-webkit-linear-gradient(180deg,#0e1420,#0b0e14);
  background:linear-gradient(180deg,#0e1420,#0b0e14);
  padding:14px 18px; color:#e7ebf2; position:relative; overflow:hidden;
}
.proto-nx-center{
  display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column;
  -webkit-align-items:center; align-items:center;
}

/* 识别码页 */
.proto-nx-biglogo{ margin:70px 0 40px; }
.proto-nx-biglogo svg{ width:120px; height:120px; }
.proto-nx-field{
  width:100%; height:52px; border-radius:16px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04); display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center; gap:8px; padding:0 14px;
  font-size:14px; color:#8b93a3;
}
.proto-nx-fic{ opacity:.7; }
.proto-nx-fph{ -webkit-flex:1; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.proto-nx-scan{ opacity:.6; }
.proto-nx-btn{
  width:100%; height:54px; border-radius:16px; margin-top:16px;
  background:-webkit-linear-gradient(160deg,#1c2330,#12161f);
  background:linear-gradient(160deg,#1c2330,#12161f);
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  font-size:16px; font-weight:700; color:#fff;
}
.proto-nx-sync{ font-size:12px; color:#5aa9e6; margin-top:20px; }
.proto-nx-legal{ font-size:11px; color:#4f586a; line-height:1.7; margin-top:14px; text-align:center; }

/* 登录页（浅色） */
.proto-nx-lpage{ height:100%; background:-webkit-linear-gradient(180deg,#f3f6f5,#e7f0ee); background:linear-gradient(180deg,#f3f6f5,#e7f0ee); padding:40px 22px; }
.proto-nx-lbrand{ display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:12px; margin:20px 0 40px; }
.proto-nx-lbrand-t{ font-size:34px; font-weight:800; color:#11141b; letter-spacing:-.03em; }
.proto-nx-lbrand-logo svg{ width:40px; height:40px; }
.proto-nx-llabel{ font-size:15px; font-weight:600; color:#11141b; margin:16px 0 8px; }
.proto-nx-linput{
  height:52px; border-radius:16px; border:1px solid rgba(0,0,0,.12);
  background:transparent; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  gap:10px; padding:0 16px; font-size:14px; color:#9aa0aa;
}
.proto-nx-linput span{ opacity:.5; }
.proto-nx-lgo{
  height:56px; border-radius:28px; margin-top:32px;
  background:-webkit-linear-gradient(160deg,#4a5568,#2d3542);
  background:linear-gradient(160deg,#4a5568,#2d3542);
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  font-size:16px; font-weight:700; color:#fff; letter-spacing:2px;
}
.proto-nx-lback{ text-align:center; font-size:13px; color:#8a8f99; margin-top:120px; }

/* 首页顶部 */
.proto-nx-top{ display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; padding:4px 0 2px; }
.proto-nx-bell{ font-size:18px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.06); display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; }
.proto-nx-hi{ -webkit-flex:1; flex:1; text-align:center; }
.proto-nx-hi-s{ font-size:11px; color:#8b93a3; }
.proto-nx-hi-m{ font-size:13px; color:#e7ebf2; font-weight:500; }
.proto-nx-help{ font-size:16px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.06); display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; color:#cfd6e2; }
.proto-nx-title{ font-size:40px; font-weight:800; color:#fff; letter-spacing:-.03em; margin:4px 0 6px; }

/* 连接球 */
.proto-nx-orb{
  width:190px; height:190px; border-radius:50%; margin:6px auto 14px;
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center;
  background:-webkit-radial-gradient(circle,rgba(120,160,220,.18),rgba(20,28,44,.1) 70%);
  background:radial-gradient(circle,rgba(120,160,220,.18),rgba(20,28,44,.1) 70%);
  border:1px solid rgba(120,150,210,.2);
}
.proto-nx-orb-core{
  width:150px; height:150px; border-radius:50%;
  display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column;
  -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center;
  background:-webkit-radial-gradient(circle,#eef4ff,#c3d3ee 80%);
  background:radial-gradient(circle,#eef4ff,#c3d3ee 80%);
  box-shadow:0 0 40px rgba(150,190,240,.4);
}
.proto-nx-orb-pw{ font-size:44px; color:#2a3446; }
.proto-nx-orb-st{ font-size:15px; font-weight:700; color:#2a3446; margin-top:4px; }
.proto-nx-orb-ghost{ opacity:.5; }
.proto-nx-region{ text-align:center; font-size:22px; font-weight:700; color:#fff; margin:6px 0 10px; }
.proto-nx-rate{
  display:-webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center;
  gap:14px; font-size:13px; color:#aeb6c4; background:rgba(255,255,255,.05);
  border-radius:999px; padding:8px 0; width:70%; margin:0 auto 12px;
}
.proto-nx-rate-sep{ opacity:.4; }

/* 首页卡片：左套餐卡（占满高度）+ 右竖排两卡（选择节点 / 分流模式） */
.proto-nx-cards{ display:-webkit-flex; display:flex; gap:12px; margin-top:10px; }
.proto-nx-card{
  border-radius:18px; padding:16px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
}
.proto-nx-card-plan{
  -webkit-flex:1; flex:1; display:-webkit-flex; display:flex;
  -webkit-flex-direction:column; flex-direction:column;
}
.proto-nx-plan-nm{ font-size:17px; font-weight:700; color:#fff; }
.proto-nx-plan-inf{ font-size:12px; color:#aeb6c4; margin:auto 0 6px; }
.proto-nx-plan-inf b{ color:#fff; }
.proto-nx-plan-bar{ height:5px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; }
.proto-nx-plan-bar i{ display:block; width:50%; height:100%; background:#cfd6e2; }

/* 右列：竖排两张操作卡 */
.proto-nx-ccol{ width:150px; -webkit-flex-shrink:0; flex-shrink:0; display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column; gap:12px; }
.proto-nx-scard{
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:9px;
  padding:13px 14px;
}
.proto-nx-scard-ic{ font-size:20px; opacity:.85; -webkit-flex-shrink:0; flex-shrink:0; }
.proto-nx-scard-tx{ -webkit-flex:1; flex:1; min-width:0; }
.proto-nx-scard-t{ font-size:13px; font-weight:600; color:#cfd6e2; }
.proto-nx-scard-s{ font-size:11px; color:#8b93a3; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.proto-nx-scard-ar{ font-size:16px; color:#8b93a3; -webkit-flex-shrink:0; flex-shrink:0; }
.proto-nx-card-focus{ border-color:#26e0c8; box-shadow:0 0 0 2px rgba(38,224,200,.35),0 10px 30px -12px rgba(38,224,200,.4); }

/* 底部导航（深色，首页/个人中心） */
.proto-nx-nav{
  position:absolute; bottom:0; left:0; right:0; height:76px; padding:8px 40px 18px;
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  background:rgba(12,16,24,.86); border-top:1px solid rgba(255,255,255,.06);
}
.proto-nx-navit{ -webkit-flex:1; flex:1; display:-webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column; -webkit-align-items:center; align-items:center; gap:4px; font-size:11px; color:#7c869a; }
.proto-nx-navic{ font-size:20px; }
.proto-nx-navon{ color:#26e0c8; font-weight:600; }

/* ── 教程正文字号放大（提升可读性）── */
.tut-step-body h3{ font-size:1.2rem; }
.tut-step-desc{ font-size:1.02rem; line-height:1.75; }
.tut-list li{ line-height:1.7; }
.tut-optional-badge{ font-size:.78rem; }
.tut-step-no{ width:34px; height:34px; font-size:1rem; }

/* ── 横向方法切换（胶囊按钮，同顶部平台 Tab 风格，纯 CSS radio）── */
.tut-mtab{ margin:.8rem 0; }
.tut-mtab-r{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.tut-mtab-btns{
  display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:.55rem;
}
.tut-pill{
  display:-webkit-inline-flex; display:inline-flex; -webkit-align-items:center; align-items:center;
  gap:.45rem; padding:.6rem 1.15rem; font-size:.95rem; font-weight:700;
  color:var(--onv); background:rgba(var(--ov),.05);
  border:1px solid rgba(var(--ov),.1); border-radius:999px;
  cursor:pointer; white-space:nowrap; -webkit-user-select:none; user-select:none;
  -webkit-transition:.15s; transition:.15s;
}
.tut-pill:hover{ background:rgba(var(--glow),.07); border-color:rgba(var(--glow),.3); color:var(--on); }
.tut-pill-ic{ font-size:1.05rem; line-height:1; }

/* 选中胶囊下方的小箭头指示器（默认不占位、隐藏） */
.tut-pill-ca{
  width:0; height:0; margin-left:.1rem; opacity:0;
  -webkit-transition:opacity .15s; transition:opacity .15s;
}

/* 选中胶囊：品牌色渐变实心 + 光晕；显示指向下方内容的箭头 */
#aid-1:checked ~ .tut-mtab-btns label[for="aid-1"],
#aid-2:checked ~ .tut-mtab-btns label[for="aid-2"],
#aid-3:checked ~ .tut-mtab-btns label[for="aid-3"]{
  color:#fff; border-color:transparent;
  background:-webkit-linear-gradient(315deg,var(--brand-l),var(--brand));
  background:linear-gradient(135deg,var(--brand-l),var(--brand));
  box-shadow:0 6px 18px -6px rgba(var(--glow),.6);
}
#aid-1:checked ~ .tut-mtab-btns label[for="aid-1"] .tut-pill-ca,
#aid-2:checked ~ .tut-mtab-btns label[for="aid-2"] .tut-pill-ca,
#aid-3:checked ~ .tut-mtab-btns label[for="aid-3"] .tut-pill-ca{
  width:auto; height:auto; opacity:1;
}
#aid-1:checked ~ .tut-mtab-btns label[for="aid-1"] .tut-pill-ca::after,
#aid-2:checked ~ .tut-mtab-btns label[for="aid-2"] .tut-pill-ca::after,
#aid-3:checked ~ .tut-mtab-btns label[for="aid-3"] .tut-pill-ca::after{
  content:"▾"; font-size:.85rem; color:#fff;
}

/* 内容面板：默认全隐藏，选中项显示；品牌色左描边呼应选中胶囊 */
.tut-mtab-panel{
  display:none; margin-top:.7rem; padding:.9rem 1rem;
  background:rgba(var(--glow),.06); border:1px solid rgba(var(--glow),.22);
  border-radius:12px; font-size:.98rem; line-height:1.7; color:var(--onv);
}
.tut-mtab-panel b{ color:var(--on); font-weight:650; }
.tut-sub{
  margin:.7rem 0 .1rem; font-size:.95rem; font-weight:700; color:var(--on);
}
.tut-warn{
  display:block; margin:.6rem 0; padding:.7rem .85rem;
  background:rgba(224,138,30,.1); border:1px solid rgba(224,138,30,.3);
  border-radius:10px; color:#9a5b08; line-height:1.7;
}
.tut-warn b{ color:#7a4606; }

/* 临时海外 ID 的外部获取入口，无需脚本。 */
.tut-idmore-btn{
  display:-webkit-inline-flex; display:inline-flex; -webkit-align-items:center; align-items:center;
  gap:.3rem; margin-top:.55rem; padding:.55rem 1.1rem;
  font-size:.9rem; font-weight:700; color:#fff; text-decoration:none;
  border-radius:999px;
  background:-webkit-linear-gradient(315deg,var(--brand-l),var(--brand));
  background:linear-gradient(135deg,var(--brand-l),var(--brand));
  box-shadow:0 6px 18px -6px rgba(var(--glow),.6); -webkit-transition:.15s; transition:.15s;
}
.tut-idmore-btn:hover{ -webkit-filter:brightness(1.06); filter:brightness(1.06); }
#aid-1:checked ~ .tut-mtab-p1,
#aid-2:checked ~ .tut-mtab-p2,
#aid-3:checked ~ .tut-mtab-p3{ display:block; }

/* 节点列表（深色） */
.proto-nx-nodehd{
  height:52px; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  gap:12px; padding:0 6px; background:#0b0e14; color:#fff;
}
.proto-nx-nodeback{ font-size:24px; width:34px; text-align:center; }
.proto-nx-nodettl{ -webkit-flex:1; flex:1; text-align:center; font-size:17px; font-weight:700; }
.proto-nx-nodeact{ width:34px; text-align:center; font-size:17px; color:#cfd6e2; }
.proto-nx-nodelist{ background:#0b0e14; padding:4px 14px; height:calc(100% - 52px); overflow:hidden; }
.proto-nx-noderow{
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:12px;
  padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.05);
}
.proto-nx-radio{
  width:22px; height:22px; border-radius:50%; -webkit-flex-shrink:0; flex-shrink:0;
  border:2px solid rgba(255,255,255,.25); display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center;
  font-size:13px; color:#fff;
}
.proto-nx-radio-on{ background:#0a84ff; border-color:#0a84ff; }
.proto-nx-nodeflag{ font-size:22px; -webkit-flex-shrink:0; flex-shrink:0; }
.proto-nx-nodetxt{ -webkit-flex:1; flex:1; min-width:0; }
.proto-nx-nodenm{ font-size:15px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.proto-nx-nodety{ font-size:12px; color:#7c869a; margin-top:2px; }

/* splash（权限弹窗背景 N logo 居中） */
.proto-nx-splash{
  height:100%; background:-webkit-linear-gradient(180deg,#0e1420,#0b0e14);
  background:linear-gradient(180deg,#0e1420,#0b0e14); position:relative;
}
.proto-nx-splash-logo{
  position:absolute; top:34%; left:50%;
  -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);
}
.proto-nx-splash-logo svg{ width:120px; height:120px; }

/* 首页 dim（弹窗时压暗背景） */
.proto-nx-dim::after{
  content:""; position:absolute; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.45);
}

/* ── iOS 系统弹窗通用（底部 sheet / 居中卡）── */
.proto-ios-scrim{
  position:absolute; top:0; left:0; right:0; bottom:0; z-index:20;
  background:rgba(0,0,0,.4);
  display:-webkit-flex; display:flex; -webkit-align-items:flex-end; align-items:flex-end;
}
.proto-ios-scrim-center{ -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; }

/* 无线数据 sheet（iOS 底部动作单） */
.proto-ios-sheet{
  width:100%; background:rgba(44,44,48,.96); border-radius:26px 26px 0 0;
  padding:22px 18px 26px; text-align:center; color:#fff;
}
.proto-ios-sheet-t{ font-size:16px; font-weight:700; margin-bottom:8px; }
.proto-ios-sheet-d{ font-size:12px; color:#b8bcc6; line-height:1.5; margin-bottom:16px; }
.proto-ios-opt{
  height:50px; border-radius:14px; background:rgba(255,255,255,.1);
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  font-size:15px; color:#fff; margin-bottom:10px;
}
.proto-ios-opt-hl{ background:#0a84ff; font-weight:600; }
.proto-ios-opt-deny{ color:#0a84ff; }

/* App 内连接说明弹窗（居中卡，深色） */
.proto-nx-dlg{
  width:82%; background:rgba(30,36,48,.98); border-radius:22px;
  padding:22px 20px; color:#e7ebf2; position:relative; z-index:22;
}
.proto-nx-dlg-t{ font-size:18px; font-weight:700; color:#fff; margin-bottom:12px; }
.proto-nx-dlg-d{ font-size:13px; color:#c1c7d2; line-height:1.6; margin-bottom:10px; }
.proto-nx-dlg-ul{ list-style:none; margin:0 0 10px; padding:0; }
.proto-nx-dlg-ul li{ font-size:13px; color:#c1c7d2; line-height:1.7; padding-left:14px; position:relative; }
.proto-nx-dlg-ul li::before{ content:"·"; position:absolute; left:2px; }
.proto-nx-dlg-btns{ display:-webkit-flex; display:flex; gap:12px; margin-top:8px; }
.proto-nx-dlg-cancel{ -webkit-flex:1; flex:1; height:48px; border-radius:14px; background:rgba(255,255,255,.1); color:#fff; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; font-size:15px; font-weight:600; }
.proto-nx-dlg-ok{ -webkit-flex:1; flex:1; height:48px; border-radius:14px; background:rgba(255,255,255,.16); color:#fff; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; font-size:15px; font-weight:600; }

/* iOS 系统网络配置弹窗（居中，浅色系统风） */
.proto-ios-connection{
  width:80%; background:rgba(44,44,48,.98); border-radius:20px;
  padding:22px 20px 16px; text-align:center; color:#fff; position:relative; z-index:22;
}
.proto-ios-connection-ic{
  width:56px; height:56px; border-radius:13px; margin:0 auto 12px;
  background:#0a84ff; display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center;
  font-size:30px;
}
.proto-ios-connection-t{ font-size:16px; font-weight:700; margin-bottom:8px; }
.proto-ios-connection-d{ font-size:12.5px; color:#b8bcc6; line-height:1.5; margin-bottom:16px; }
.proto-ios-connection-btns{ display:-webkit-flex; display:flex; gap:12px; }
.proto-ios-connection-allow{ -webkit-flex:1; flex:1; height:46px; border-radius:13px; background:rgba(255,255,255,.12); color:#fff; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; font-size:15px; font-weight:700; }
.proto-ios-connection-deny{ -webkit-flex:1; flex:1; height:46px; border-radius:13px; background:#0a84ff; color:#fff; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; font-size:15px; font-weight:600; }



/* ══════════════════════════════════════════════
   全平台教程面板时间线（作用于 .tut-panel）
   所有平台共用竖向时间线和步骤排版
   ══════════════════════════════════════════════ */

/* 面板整体：加内边距给时间线让位 */
.tut-panel .tut-steps{ gap:0; position:relative; }

/* 每个步骤成为时间线节点：左侧留白画竖线 */
.tut-panel .tut-step{
  position:relative;
  margin-left:26px;
  margin-bottom:1.4rem;
  background:var(--card);
  border:1px solid rgba(var(--ov),.1);
  border-radius:20px;
  box-shadow:var(--sd1);
  overflow:visible;
  -webkit-transition:-webkit-transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tut-panel .tut-step:last-child{ margin-bottom:0; }

/* 时间线竖线：从每个卡的序号向下连到下一个卡 */
.tut-panel .tut-step::before{
  content:""; position:absolute;
  left:-26px; top:26px; bottom:-1.4rem; width:2px;
  background:-webkit-linear-gradient(180deg,rgba(var(--glow),.5),rgba(var(--glow),.12));
  background:linear-gradient(180deg,rgba(var(--glow),.5),rgba(var(--glow),.12));
}
.tut-panel .tut-step:last-child::before{ display:none; }

/* hover：卡片浮起 + 品牌色描边 */
.tut-panel .tut-step:hover{
  -webkit-transform:translateY(-2px); transform:translateY(-2px);
  border-color:rgba(var(--glow),.32);
  box-shadow:var(--sd2);
}

/* 序号圆点移到时间线上（卡片左外侧），像时间轴节点 */
.tut-panel .tut-step-left{ padding:1.35rem 1.4rem; }
.tut-panel .tut-step.has-mock .tut-step-left{ padding-bottom:1rem; }
.tut-panel .tut-step-no{
  position:absolute; left:-26px; top:22px;
  -webkit-transform:translateX(-50%); transform:translateX(-50%);
  width:34px; height:34px; font-size:.98rem; margin:0;
  border:3px solid var(--sf);
  box-shadow:0 4px 14px -3px rgba(var(--glow),.6), 0 0 0 3px rgba(var(--glow),.14);
  z-index:2;
}
/* 序号让位：把标题区左移填补（序号已移出卡片） */
.tut-panel .tut-step-left{ gap:0; }

/* 标题：更大更有力 + 底部细线分隔 */
.tut-panel .tut-step-body h3{
  font-size:1.26rem; font-weight:800; letter-spacing:-.025em;
  color:var(--on); margin:0 0 .6rem;
}

/* 正文行距更舒展 */
.tut-panel .tut-step-desc{ font-size:1.02rem; line-height:1.78; }

/* 子标题（第一步/第二步、版本分档）：胶囊标签样式 */
.tut-panel .tut-sub{
  display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center;
  width:fit-content; max-width:100%; white-space:normal; overflow-wrap:anywhere;
  margin:1.1rem 0 .5rem; padding:.28rem .8rem;
  font-size:.9rem; font-weight:750; color:var(--brand-l);
  background:rgba(var(--glow),.12);
  border:1px solid rgba(var(--glow),.28);
  border-radius:999px; letter-spacing:-.01em;
}
.tut-arch-selector{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:12px 0 16px;}
.tut-arch-selector>span{font-size:14px;font-weight:600;color:var(--onv);}
.tut-arch-selector .btn{padding:8px 12px;font-size:13px;}

/* 列表：分隔线更清爽（标记样式统一走全局 .tut-list li::before） */
.tut-panel .tut-list li{
  padding:.42rem 0 .42rem 1.3rem;
  border-top:1px solid rgba(var(--ov),.055);
}
.tut-panel .tut-list li::before{ top:.95rem; }

/* 警示块：更精致的圆角 + 左强调条 + 轻微内发光 */
.tut-panel .tut-warn{
  position:relative; border-radius:14px; padding:.85rem 1rem .85rem 1.1rem;
  box-shadow:inset 0 0 0 1px rgba(224,138,30,.12);
}
.tut-panel .tut-warn::before{
  content:""; position:absolute; left:0; top:.6rem; bottom:.6rem; width:3px;
  border-radius:2px; background:#e08a1e; opacity:.7;
}

/* 原型图区：更深聚焦底色 + 顶部渐隐分隔 */
.tut-panel .tut-mock{
  background:var(--card);
  border-top:1px solid rgba(var(--ov),.08);
  border-radius:0 0 20px 20px;
}

/* 可选步骤：时间线节点与竖线转灰 */
.tut-panel .tut-step.is-optional .tut-step-no{ box-shadow:0 0 0 3px rgba(var(--ov),.08); }
.tut-panel .tut-step.is-optional::before{
  background:-webkit-linear-gradient(180deg,rgba(var(--ov),.18),rgba(var(--ov),.05));
  background:linear-gradient(180deg,rgba(var(--ov),.18),rgba(var(--ov),.05));
}

/* 进场淡入（尊重减少动效偏好） */
@media (prefers-reduced-motion: no-preference){
  .tut-panel .tut-step{ -webkit-animation:tutIosFade .45s ease both; animation:tutIosFade .45s ease both; }
  @-webkit-keyframes tutIosFade{ from{ opacity:0; -webkit-transform:translateY(10px);} to{ opacity:1; -webkit-transform:none;} }
  @keyframes tutIosFade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
}

/* 小屏：时间线内收，避免序号贴边被裁 */
@media (max-width:520px){
  .tut-panel .tut-step{ margin-left:20px; }
  .tut-panel .tut-step::before{ left:-20px; }
  .tut-panel .tut-step-no{ left:-20px; width:30px; height:30px; font-size:.9rem; }
}

/* 小屏返回按钮独立占行，防止与居中标题重叠。 */
@media(max-width:760px){.tut-backbar{position:static;display:block;text-align:left;padding:0;margin:0 0 1rem;transform:none;}.tut-backbar .tut-back-btn{display:inline-flex;}}

/* Gatekeeper 在手机上按内容纵向排版，三步图不再被桌面固定高度裁切。 */
@media(max-width:760px){
  .tut-scene-gatekeeper{width:100%;height:auto;}
  .tut-scene-gatekeeper .proto-win{width:100%;height:auto;-webkit-transform:none;transform:none;}
  .tut-scene-gatekeeper .proto-win-body{display:block;}
  .tut-scene-gatekeeper .proto-sys-mac{display:block;height:auto;overflow:visible;}
  .tut-scene-gatekeeper .proto-mac-bg-flow{position:static;width:100%;}
  .tut-scene-gatekeeper .proto-gk-flow{-webkit-flex:none;flex:none;width:100%;}
  .tut-scene-gatekeeper .proto-gk-step{-webkit-flex:none;flex:none;}
  .tut-scene-gatekeeper .proto-gk-topbar{padding:12px;}
  .tut-scene-gatekeeper .proto-gk-topbar-inner{-webkit-flex-direction:column;flex-direction:column;}
  .tut-scene-gatekeeper .proto-gk-topbar-txt{white-space:normal;text-align:center;}
}