/* ============================================================
   带单监控台 · 公共组件样式 (index.html / lead.html 共用)
   ============================================================ */

/* ---------- 轻提示 Toast ---------- */
.toast{ position:fixed; left:50%; bottom:70px; transform:translateX(-50%) translateY(20px); z-index:99;
  background:rgba(20,24,32,.95); border:1px solid var(--line); color:#eaecef; font-size:13px;
  padding:10px 18px; border-radius:12px; opacity:0; pointer-events:none; transition:all .25s ease;
  max-width:80vw; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- 底部抽屉弹层 ---------- */
.modal-mask{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:90; display:none; }
.modal-mask.show{ display:block; animation:maskfade .28s ease; }
.modal{ position:fixed; left:0; right:0; bottom:0; z-index:91; max-width:460px; margin:0 auto;
  background:var(--card); border:1px solid var(--line); border-radius:18px 18px 0 0;
  max-height:80vh; overflow:auto; display:none; }
.modal.show{ display:block; animation:sheetup .32s cubic-bezier(.2,.8,.3,1); }
@keyframes maskfade{ from{opacity:0} to{opacity:1} }
@keyframes sheetup{ from{opacity:0; transform:translateY(36px)} to{opacity:1; transform:none} }
@keyframes kwfade{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }

.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
  border-bottom:1px solid var(--line); font-weight:700; }
.modal-close{ cursor:pointer; color:var(--sub); padding:0 4px; }
.modal-body{ padding:14px 16px 18px; }

/* ---------- 表单 ---------- */
.set-row{ margin-bottom:12px; }
.set-label{ display:block; font-size:12px; color:var(--sub); margin-bottom:6px; }
.set-label em{ font-style:normal; margin-left:8px; color:var(--text); opacity:.5; font-size:11px; }
.set-row input, .pwd-wrap input{ width:100%; box-sizing:border-box; padding:9px 12px; border:1px solid var(--line);
  border-radius:10px; background:var(--card2); color:var(--text); font-size:14px; outline:none;
  transition:border-color .22s ease, box-shadow .22s ease; }
.set-row input:focus, .pwd-wrap input:focus{ border-color:#f0b90b; box-shadow:0 0 0 3px rgba(240,185,11,.15); }
.set-tip{ font-size:11px; color:var(--sub); line-height:1.7; margin:4px 0 14px; }
.set-btns{ display:flex; gap:10px; }
.set-btns .pbtn{ flex:1; padding:9px 0; }

/* 密码可见切换(小眼睛) */
.pwd-wrap{ position:relative; }
.pwd-wrap input{ padding-right:38px; }
.pwd-wrap .eye{ position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; opacity:.55; user-select:none; border-radius:8px; }
.pwd-wrap .eye:active{ background:var(--card2); }

/* 通用按钮 */
.pbtn{ background:var(--card); border:1px solid var(--line); color:var(--text); font-size:13px;
  padding:8px 22px; border-radius:10px; cursor:pointer; }
.pbtn.primary{ background:#f0b90b; border-color:#f0b90b; color:#1a1a1a; font-weight:700; }
.pbtn:disabled{ opacity:.5; cursor:not-allowed; }
.mini-btn{ background:var(--card); border:1px solid var(--line); color:var(--text); font-size:12px;
  padding:4px 10px; border-radius:8px; cursor:pointer; }
.mini-btn:active{ border-color:#f0b90b; color:#f0b90b; }
.mini-btn:disabled{ opacity:.5; }

/* 数字输入(详情页本金) */
.inp{ width:110px; text-align:right; padding:5px 9px; font-size:14px; color:var(--text);
  background:var(--card2); border:1px solid var(--line); border-radius:8px; outline:none;
  transition:border-color .22s ease, box-shadow .22s ease; }
.inp:focus{ border-color:#f0b90b; box-shadow:0 0 0 3px rgba(240,185,11,.15); }

/* ---------- 主题分段选择 ---------- */
.seg{ display:flex; background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:3px; }
.seg span{ flex:1; text-align:center; font-size:12px; padding:7px 0; border-radius:8px; color:var(--sub); cursor:pointer; }
.seg span.on{ background:var(--card); color:var(--yellow); font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.2); }

/* ---------- 模式单选卡片 ---------- */
.mode-pick{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.mode-opt{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.mode-opt:has(input:checked){ border-color:#f0b90b; background:rgba(240,185,11,.08); }
.mode-opt input{ accent-color:#f0b90b; }
.mode-name{ font-weight:700; font-size:14px; color:var(--text); }
.mode-desc{ flex-basis:100%; font-size:12px; color:var(--sub); line-height:1.6; padding-left:22px; }

/* ---------- 警示/选项卡 ---------- */
.key-warn{ display:none; margin:4px 0 8px; padding:14px 12px; text-align:center;
  border:1px dashed rgba(246,70,93,.5); background:rgba(246,70,93,.07);
  border-radius:12px; color:var(--red); font-size:13px; font-weight:600; line-height:1.7;
  animation:kwfade .3s ease; }
.key-warn span{ display:block; margin-top:4px; font-weight:400; font-size:12px; color:var(--sub); }
.close-opt{ display:flex; align-items:center; gap:8px; padding:12px; border:1px solid var(--line);
  border-radius:12px; cursor:pointer; margin-bottom:8px; font-size:13px; }
.close-opt:has(input:checked){ border-color:#f0b90b; background:rgba(240,185,11,.08); }
.close-opt input{ accent-color:#f0b90b; }
.close-opt small{ display:block; color:var(--sub); font-size:11px; margin-top:2px; }

/* ---------- 登录/注册/重置 ---------- */
.login-links{ text-align:right; margin:-4px 0 10px; }
.login-links span{ font-size:12px; color:var(--yellow); cursor:pointer; }
.rec-box{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:16px; font-weight:700;
  letter-spacing:1px; text-align:center; padding:16px 10px; margin-bottom:10px;
  background:rgba(240,185,11,.08); border:1px dashed rgba(240,185,11,.5); border-radius:12px;
  color:var(--yellow); word-break:break-all; user-select:all; }

/* ---------- 右侧边栏 ---------- */
.side-mask{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:80; opacity:0; visibility:hidden;
  transition:opacity .28s ease, visibility .28s; }
.side-mask.show{ opacity:1; visibility:visible; }
.sidebar{ position:fixed; top:0; left:0; bottom:0; width:min(78vw,300px); z-index:81;
  background:var(--card); border-right:1px solid var(--line);
  transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.8,.3,1);
  display:flex; flex-direction:column; padding:16px 14px; }
.sidebar.show{ transform:translateX(0); }
.sb-head{ display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:10px; }
.sb-avatar{ width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#f0b90b,#c99400); color:#000;
  display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:800; }
.sb-name{ font-size:16px; font-weight:700; }
.sb-sub{ font-size:11px; color:var(--sub); margin-top:2px; }
.sb-close{ margin-left:auto; cursor:pointer; color:var(--sub); font-size:16px; padding:4px; }
.sb-item{ padding:12px; border-radius:10px; font-size:14px; cursor:pointer; display:flex; align-items:center; gap:10px; }
.sb-item:active{ background:var(--card2); }
.sb-theme{ padding:12px; border-radius:10px; }
.sb-theme .sb-label{ font-size:14px; margin-bottom:8px; display:flex; align-items:center; gap:10px; }
.sb-foot{ margin-top:auto; padding-top:10px; border-top:1px solid var(--line); }

/* 暗色模式下 toast 保持深色, 浅色模式也保持(可读性) */