@charset "utf-8";
/*====================================================
  手机端实体WiFi页通用样式（H5 手机版）
  - 单列 480px 内宽，底部价格贴纸/二维码固定
  - 含安全区适配（iPhone 流海屏 / 底部横条）
  - 仅面向手机端；平板/桌面误打开时内容居中
====================================================*/

/*----- 基础重置：移动端友好 -----*/
*{padding:0;margin:0;box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-touch-callout:none;}
html{height:100%;}
body{min-height:100%;min-height:100dvh;color:#333;background:#14100d;
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",Tahoma,Arial,sans-serif;
  font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  touch-action:pan-y;overflow-x:hidden;overscroll-behavior:none;}
/* 隐藏滚动条但保留滚动能力 */
html,body{-ms-overflow-style:none;scrollbar-width:none;}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;}

a{text-decoration:none;}
img{border:0;vertical-align:middle;max-width:100%;height:auto;}
ol,ul{list-style:none;}
table{border-collapse:collapse;}
button{background:none;border:none;font:inherit;color:inherit;cursor:pointer;}
.clear{clear:both;width:0;height:0;overflow:hidden;}

/*----- 主题变量 -----*/
:root{
  --brand:#ff6600;          /* 品牌橙（唯一强调色） */
  --brand-light:#ff8c1a;
  --brand-deep:#e65c00;
  --card-bg:rgba(255,255,255,.92);
  --card-dark:rgba(26,26,26,.45);
  --radius:16px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/*----- 页面背景（铺满全屏；图片加载失败时退回深色渐变，保证白字可读）-----*/
.bg-container{position:fixed;inset:0;z-index:1;
  background:linear-gradient(160deg,#33211a 0%,#14100d 100%);}
.bg-image{width:100%;height:100%;object-fit:cover;}
.bg-overlay{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.12) 0%,rgba(0,0,0,.42) 100%);}

/*----- 内容容器（手机单列，最大480px居中；底部留白避开固定元素）-----*/
.container{position:relative;z-index:10;width:100%;max-width:480px;margin:0 auto;
  padding:0 16px calc(120px + var(--safe-bottom));}

/*----- 卡片 -----*/
.card{background:var(--card-bg);border-radius:var(--radius);padding:24px;margin-bottom:24px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);}
.card-dark{background:var(--card-dark);color:#fff;border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}

/*----- LOGO + WiFi信息（flex+gap 排布，不再用魔法 margin）-----*/
.logo-container{display:flex;align-items:center;gap:16px;
  padding:calc(30px + var(--safe-top)) 0 24px;
  animation:fadeUp .5s ease .05s both;}
.logo{width:34vw;max-width:150px;min-width:110px;height:auto;flex-shrink:0;}
.wifiinfo{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:6px;}
.wifi-label-row{display:flex;align-items:center;gap:6px;}
.wifi-label-row img{width:30px;height:23px;display:block;}
.wifi-label-row span{font-size:12px;letter-spacing:1px;color:rgba(255,255,255,.72);}
.wifi-name{font-size:18px;font-weight:800;color:#fff;line-height:1.25;letter-spacing:.5px;}

/*----- 复制按钮（点击目标≥40px高）-----*/
.copy-btn{min-height:40px;padding:0 16px;border-radius:20px;
  background:linear-gradient(135deg,var(--brand-light),var(--brand));
  color:#fff;font-size:13px;font-weight:600;letter-spacing:1px;
  box-shadow:0 4px 14px rgba(255,102,0,.4);touch-action:manipulation;
  transition:transform .15s ease,box-shadow .2s ease;}
.copy-btn:active{transform:scale(.95);box-shadow:0 2px 8px rgba(255,102,0,.3);}

/*----- 老板推荐 -----*/
.boss-say-header{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.quote-icon{width:22px;height:22px;flex-shrink:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(230,126,34,0.8)'%3E%3Cpath d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain;}
.boss-say-title{font-size:18px;font-weight:700;letter-spacing:.5px;}
.boss-say-content{font-size:clamp(22px,6.6vw,26px);font-weight:800;text-align:center;
  padding:12px 4px 6px;line-height:1.45;}
.boss-say-sub{font-size:13px;color:rgba(255,255,255,.72);text-align:center;font-style:italic;}

/*----- 底部固定：价格贴纸 + 二维码卡片（手机端）-----*/
.jgbox{position:fixed;right:-26px;bottom:calc(64px + var(--safe-bottom));z-index:15;
  pointer-events:none;animation:fadeUp .5s ease .3s both;}
.jgbox img{width:168px;height:168px;}
.qrcodebox{position:fixed;bottom:calc(20px + var(--safe-bottom));z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:6px;width:104px;
  padding:10px 8px 8px;background:rgba(255,255,255,.93);border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);animation:fadeUp .5s ease .45s both;}
.qrcodebox img{width:84px;height:84px;border-radius:6px;}
.qrcodebox p{color:var(--brand-deep);font-size:12px;font-weight:700;line-height:1.35;text-align:center;}

/* 屏幕较宽时（平板/桌面误打开），贴纸与二维码仍对齐内容列，不跑到屏幕边缘 */
@media (min-width:481px){
  .qrcodebox{left:50%;margin-left:-224px;}
  .jgbox{right:50%;margin-right:-214px;}
}

/*----- 弹窗 -----*/
.dz-dialog-mask{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);animation:fadeIn .25s ease;}
.dz-dialog{width:82%;max-width:300px;padding:26px 18px 22px;border-radius:16px;text-align:center;
  background:rgba(255,255,255,.97);box-shadow:0 16px 48px rgba(0,0,0,.28);animation:scaleIn .25s ease;}
.dz-dialog-title{font-size:18px;font-weight:700;color:#333;margin-bottom:12px;}
.dz-dialog-content{font-size:15px;color:#666;line-height:1.7;margin-bottom:22px;padding:0 8px;
  word-break:break-all;-webkit-user-select:text;user-select:text;} /* 弹窗文字允许选中，复制失败时可手动抄密码 */
.dz-dialog-btn{min-height:44px;padding:0 34px;border-radius:22px;
  background:linear-gradient(135deg,var(--brand-light),var(--brand));
  color:#fff;font-size:16px;font-weight:600;box-shadow:0 4px 12px rgba(255,102,0,.35);
  touch-action:manipulation;transition:transform .15s ease;}
.dz-dialog-btn:active{transform:scale(.96);}

/*----- 动画（fill-mode both：动画禁用时元素仍可见）-----*/
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.card{animation:fadeUp .55s ease .18s both;}

/*----- 小屏微调（≤340px，如 iPhone SE 一代）-----*/

@media (max-width:340px){
  .logo-container{gap:12px;}
  .logo{min-width:100px;}
  .wifi-name{font-size:16px;}
  .jgbox img{width:140px;height:140px;}
  .boss-say-content{font-size:21px;}
}

/*----- 通用工具类 -----*/
.flex{display:flex;align-items:center;}
.scroll-x-box{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
.scroll-x-box::-webkit-scrollbar{display:none;}
.m10{margin:10px}.p10{padding:10px}.p20{padding:20px}.p30{padding:30px}
.mt10{margin-top:10px}.mt15{margin-top:15px}.mt20{margin-top:20px}.mt30{margin-top:30px}.mt40{margin-top:40px}.mt50{margin-top:50px}
.mr5{margin-right:5px}.mr10{margin-right:10px}.mr15{margin-right:15px}.mr20{margin-right:20px}
.mb10{margin-bottom:10px}.mb15{margin-bottom:15px}.mb20{margin-bottom:20px}.mb30{margin-bottom:30px}
.ml10{margin-left:10px}.ml15{margin-left:15px}.ml20{margin-left:20px}.ml30{margin-left:30px}
.pt10{padding-top:10px}.pt15{padding-top:15px}.pt20{padding-top:20px}