/* ===== 基础变量 ===== */
:root{
  --bg:#1e1e1e;
  --panel:#252526;
  --stage:#3a3a3a;
  --frame:#4a4a4a;
  --text:#cccccc;
  --text-strong:#ffffff;
  --accent:#007acc;
  --btn:#3a3a3a;
  --btn-hover:#4a4a4a;
  --input-bg:#2d2d2d;
  --input-border:#555;
  --divider:rgba(255,255,255,0.08);
  --handle:rgba(255,255,255,0.2);
  --handle-hover:rgba(255,255,255,0.4);
  --radius:4px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",Menlo,monospace;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--ui);
  font-size:16px;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;color:inherit;}
input{font-family:inherit;}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ===== 应用容器（占满首屏） ===== */
.app{
  display:flex;
  flex-direction:column;
  height:100vh;
  min-height:600px;
  overflow:hidden;
}

/* ===== 顶部工具栏 ===== */
.toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  height:56px;
  flex:0 0 56px;
  padding:0 16px;
  background:var(--panel);
  border-bottom:1px solid var(--divider);
}
.toolbar-brand{display:flex;align-items:center;}
.brand-icon{width:28px;height:28px;}
.url-form{display:flex;flex:1;gap:8px;align-items:center;}
.url-input{
  flex:1;
  height:38px;
  padding:0 14px;
  font-size:16px;
  color:var(--text-strong);
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:var(--radius);
  outline:none;
}
.url-input::placeholder{color:#666;}
.url-input:focus{border-color:var(--accent);}
.toolbar-actions{display:flex;align-items:center;gap:10px;}

/* ===== 按钮 ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:38px;
  padding:0 16px;
  font-size:16px;
  color:var(--text);
  background:var(--btn);
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:background .12s ease;
}
.btn:hover{background:var(--btn-hover);}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:#1184d6;}
.btn-sm{height:28px;padding:0 12px;font-size:16px;}
.btn.active{background:var(--accent);color:#fff;}

/* 清空按钮 */
.btn-clear{
  padding:0 10px;
  color:#888;
  background:transparent;
  border-color:transparent;
  flex:0 0 auto;
}
.btn-clear:hover{color:var(--text-strong);background:var(--btn-hover);}

/* ===== PWA 开关 ===== */
.switch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:16px;user-select:none;}
.switch input{position:absolute;opacity:0;width:0;height:0;}
.switch-track{
  position:relative;
  width:36px;height:20px;
  background:#555;
  border-radius:10px;
  transition:background .15s ease;
}
.switch-thumb{
  position:absolute;top:3px;left:3px;
  width:14px;height:14px;
  background:#fff;border-radius:50%;
  transition:transform .15s ease;
}
.switch input:checked + .switch-track{background:var(--accent);}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(16px);}
.switch-label{color:var(--text);}

/* ===== 主体 ===== */
.body{display:flex;flex:1;min-height:0;}

/* ===== 左侧设备面板 ===== */
.sidebar{
  display:flex;
  flex-direction:column;
  width:240px;
  flex:0 0 240px;
  background:var(--panel);
  border-right:1px solid var(--divider);
}
.sidebar-search{
  position:relative;
  padding:12px;
  border-bottom:1px solid var(--divider);
}
.search-icon{
  position:absolute;
  left:22px;top:50%;
  transform:translateY(-50%);
  width:16px;height:16px;color:#888;
  pointer-events:none;
}
.device-search{
  width:100%;
  height:36px;
  padding:0 10px 0 34px;
  font-size:16px;
  color:var(--text-strong);
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:var(--radius);
  outline:none;
}
.device-search::placeholder{color:#666;}
.device-search:focus{border-color:var(--accent);}

/* 设备列表 */
.device-list{
  flex:1;
  overflow-y:auto;
  padding:4px 0;
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
}
.device-list:hover{scrollbar-color:rgba(255,255,255,0.2) transparent;}
.device-list::-webkit-scrollbar{width:8px;}
.device-list::-webkit-scrollbar-thumb{background:transparent;border-radius:4px;}
.device-list:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);}
.group-title{
  padding:10px 14px 5px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  color:#888;
  text-transform:uppercase;
}
.device-item{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:8px 14px;
  border-left:2px solid transparent;
  cursor:pointer;
}
.device-item:hover{background:rgba(255,255,255,0.04);}
.device-item.selected{
  background:rgba(0,122,204,0.14);
  border-left-color:var(--accent);
}
.device-item .d-name{font-size:16px;color:var(--text);}
.device-item.selected .d-name{color:var(--text-strong);}
.device-item .d-res{font-size:16px;color:#777;font-family:var(--mono);}
.device-empty{padding:18px 14px;font-size:16px;color:#777;}

/* 自定义按钮 */
.custom-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:42px;
  flex:0 0 42px;
  font-size:16px;
  color:var(--text);
  background:var(--btn);
  border:none;
  border-top:1px solid var(--divider);
  transition:background .12s ease;
}
.custom-btn:hover{background:var(--btn-hover);}
.custom-btn svg{width:17px;height:17px;}

/* ===== 中间预览区 ===== */
.stage{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  background:var(--bg);
}
.device-wrap{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  padding:40px;
}

/* 手机外框 */
.device-frame{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#000;
  border:3px solid var(--frame);
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.6),0 8px 30px rgba(0,0,0,0.45);
  transform-origin:center center;
}

/* 状态栏 / Home 条（仅 PWA 模式显示） */
.device-statusbar{
  display:none;
  align-items:center;
  justify-content:space-between;
  height:24px;
  padding:0 16px;
  flex:0 0 24px;
  background:#000;
  color:#fff;
  border-radius:17px 17px 0 0;
  font-size:12px;
}
.device-statusbar .sb-time{font-weight:600;font-family:var(--mono);}
.device-statusbar .sb-icons{display:flex;align-items:center;gap:5px;}
.device-statusbar .sb-icons svg{height:11px;width:auto;}
.device-homebar{display:none;flex:0 0 18px;height:18px;background:#000;border-radius:0 0 17px 17px;position:relative;}
.device-homebar::after{
  content:"";position:absolute;left:50%;bottom:6px;
  transform:translateX(-50%);
  width:36%;height:4px;border-radius:2px;background:#fff;
}
.pwa .device-statusbar{display:flex;}
.pwa .device-homebar{display:block;}

/* 屏幕 + iframe */
.device-screen{
  position:relative;
  flex:1;
  background:#fff;
  overflow:hidden;
}
.preview-frame{
  display:block;
  width:100%;height:100%;
  border:0;background:#fff;
}
.frame-loading{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.85);
}
.spinner{
  width:28px;height:28px;
  border:2px solid rgba(0,122,204,0.2);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.frame-empty{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:8px;color:#999;background:#fafafa;text-align:center;padding:20px;
}
.frame-empty svg{width:48px;height:48px;color:#bbb;}
.frame-empty p{font-size:16px;color:#555;}
.frame-empty small{font-size:16px;color:#aaa;}
.frame-loading[hidden],.frame-empty[hidden]{display:none;}

/* 拖拽手柄 */
.handle{
  position:absolute;
  width:8px;height:8px;
  background:var(--handle);
  border-radius:2px;
  z-index:5;
}
.handle:hover{background:var(--handle-hover);transform:scale(1.6);}
.handle-n{top:-5px;left:50%;margin-left:-4px;cursor:ns-resize;}
.handle-s{bottom:-5px;left:50%;margin-left:-4px;cursor:ns-resize;}
.handle-e{right:-5px;top:50%;margin-top:-4px;cursor:ew-resize;}
.handle-w{left:-5px;top:50%;margin-top:-4px;cursor:ew-resize;}
.handle-ne{top:-5px;right:-5px;cursor:nesw-resize;}
.handle-nw{top:-5px;left:-5px;cursor:nwse-resize;}
.handle-se{bottom:-5px;right:-5px;cursor:nwse-resize;}
.handle-sw{bottom:-5px;left:-5px;cursor:nesw-resize;}

/* 拖拽尺寸标签 */
.size-badge{
  position:absolute;
  top:8px;left:50%;
  transform:translateX(-50%);
  padding:4px 10px;
  font-size:16px;
  font-family:var(--mono);
  color:#fff;
  background:rgba(0,0,0,0.8);
  border-radius:var(--radius);
  z-index:10;
  pointer-events:none;
  white-space:nowrap;
}
body.dragging{cursor:grabbing;user-select:none;}
body.dragging .preview-frame{pointer-events:none;}

/* 缩放条 */
.zoom-bar{
  display:flex;
  align-items:center;
  gap:12px;
  height:50px;
  flex:0 0 50px;
  padding:0 20px;
  background:var(--panel);
  border-top:1px solid var(--divider);
}
.zoom-label{font-size:16px;color:#999;}
.zoom-mark{font-size:16px;color:#777;font-family:var(--mono);}
.zoom-value{
  min-width:54px;
  font-size:16px;
  font-family:var(--mono);
  color:var(--text-strong);
  text-align:right;
}
.zoom-slider-wrap{
  position:relative;
  flex:0 0 240px;
  height:20px;
  display:flex;
  align-items:center;
}
#zoomSlider{
  width:100%;
  -webkit-appearance:none;appearance:none;
  height:3px;border-radius:2px;background:#555;outline:none;
}
#zoomSlider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:13px;height:13px;border-radius:50%;
  background:var(--accent);cursor:pointer;border:2px solid #1e1e1e;
}
#zoomSlider::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;
  background:var(--accent);cursor:pointer;border:2px solid #1e1e1e;
}
/* 100% 刻度标记 */
.zoom-tick-100{
  position:absolute;
  /* 100% 在 50–200 范围内对应 (100-50)/(200-50) = 50/150 ≈ 33.33% */
  left:33.33%;
  transform:translateX(-50%);
  top:-10px;
  padding:0 4px;
  height:18px;
  line-height:18px;
  font-size:11px;
  font-family:var(--mono);
  color:#888;
  background:transparent;
  border:none;
  border-top:2px solid #666;
  cursor:pointer;
  white-space:nowrap;
  pointer-events:all;
  transition:color .12s,border-color .12s;
}
.zoom-tick-100:hover{
  color:var(--accent);
  border-color:var(--accent);
}

/* ===== 底部状态栏 ===== */
.statusbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:32px;
  flex:0 0 32px;
  padding:0 16px;
  background:var(--accent);
  color:#fff;
  font-size:16px;
}
.statusbar .status-device{font-family:var(--ui);}
.statusbar .status-zoom{font-family:var(--mono);}

/* ===== 自定义尺寸弹窗 ===== */
.modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.5);
}
.modal[hidden]{display:none;}
.modal-box{
  width:320px;
  padding:22px;
  background:var(--panel);
  border:1px solid var(--divider);
  border-radius:var(--radius);
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
}
.modal-title{font-size:20px;font-weight:600;color:var(--text-strong);margin-bottom:16px;}
.modal-row{display:flex;align-items:flex-end;gap:10px;margin-bottom:18px;}
.modal-row label{display:flex;flex-direction:column;gap:6px;font-size:16px;color:#999;flex:1;}
.modal-row input{
  width:100%;height:38px;padding:0 10px;
  font-size:16px;font-family:var(--mono);color:var(--text-strong);
  background:var(--input-bg);border:1px solid var(--input-border);
  border-radius:var(--radius);outline:none;
}
.modal-row input:focus{border-color:var(--accent);}
.modal-x{padding-bottom:8px;color:#777;font-size:18px;}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;}

/* ===== SEO 内容区 ===== */
.seo{background:var(--bg);border-top:1px solid var(--divider);padding:40px 20px;}
.seo-inner{max-width:820px;margin:0 auto;}
.seo h2{font-size:20px;font-weight:600;color:var(--text-strong);margin:28px 0 12px;}
.seo h2:first-child{margin-top:0;}
.seo p{font-size:16px;line-height:1.8;color:var(--text);margin-bottom:10px;}
.seo-steps{margin:0 0 8px;padding-left:22px;}
.seo-steps li{font-size:16px;line-height:1.9;color:var(--text);}
.seo-faq details{
  border:1px solid var(--divider);border-radius:var(--radius);
  padding:12px 16px;margin-bottom:8px;background:var(--panel);
}
.seo-faq summary{font-size:16px;color:var(--text-strong);cursor:pointer;}
.seo-faq p{margin-top:8px;font-size:16px;color:#aaa;line-height:1.7;}
.seo code{font-family:var(--mono);font-size:16px;background:#333;padding:2px 6px;border-radius:3px;color:#e0c890;}

/* ===== 页脚 ===== */
.page-footer{
  background:#fff;color:#888;
  text-align:center;padding:16px 20px;font-size:16px;
}
.page-footer a{color:#666;text-decoration:none;}
.page-footer a:hover{color:var(--accent);text-decoration:underline;}

/* 小屏提示：工具主体最适合桌面 */
@media (max-width:900px){
  .app{height:auto;min-height:0;}
  .body{flex-direction:column;}
  .sidebar{width:100%;flex:none;max-height:220px;}
  .device-wrap{padding:20px;min-height:360px;}
}

/* ===== 手机横屏遮罩（引导竖屏使用） ===== */
.rotate-mask{
  position:fixed;inset:0;z-index:9999;
  display:none;
  flex-direction:column;
  align-items:center;justify-content:center;
  gap:14px;
  padding:24px;
  text-align:center;
  background:var(--bg);
  color:var(--text);
}
.rotate-mask svg{width:64px;height:64px;color:var(--accent);}
.rotate-mask h2{font-size:20px;font-weight:600;color:var(--text-strong);}
.rotate-mask p{font-size:16px;color:#999;line-height:1.7;max-width:320px;}
@keyframes rotate-hint{0%,40%{transform:rotate(0);}60%,100%{transform:rotate(-90deg);}}
.rotate-mask .phone-anim{animation:rotate-hint 2s ease-in-out infinite;}

/* 仅在“可触摸的小屏 + 横屏”时显示遮罩 */
@media (max-width:920px) and (orientation:landscape) and (pointer:coarse){
  .rotate-mask{display:flex;}
}