* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:#f5f7fa; color:#333; min-height:100vh; }
:root { --primary: #4f6ef7; --primary-dark: #3b5de7; --success: #2ecc71; --danger: #e74c3c; --warning: #f39c12; --bg: #f5f7fa; --card: #fff; --border: #e8ecf1; }

/* ===== 登录页（手机框设计） ===== */
body.login-mode { overflow:hidden; }
.login-container {
  position:fixed; inset:0; z-index:200;
  background:radial-gradient(circle at 50% 0%, #1f2a4a 0%, #0a0e1f 60%);
  display:flex; align-items:center; justify-content:center;
  padding:32px 20px; overflow-y:auto;
}
.phone-frame {
  width:390px; height:820px; max-height:90vh;
  background:#050816; border-radius:44px; padding:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 2px #2a2f4a, inset 0 0 0 1px #3a3f5a;
  position:relative; overflow:hidden; flex-shrink:0;
}
.phone-screen {
  width:100%; height:100%;
  background:linear-gradient(180deg,#0a1638 0%,#0f1d4a 50%,#1a2b5e 100%);
  border-radius:34px; overflow:hidden; position:relative;
  display:flex; flex-direction:column;
}
/* 状态栏 */
.login-status-bar {
  height:44px; padding:0 28px; display:flex; align-items:center;
  justify-content:space-between; color:#fff; font-size:14px; font-weight:600; flex-shrink:0;
}
.login-status-bar .right { display:flex; gap:6px; align-items:center; font-size:12px; }
/* 合规红条 */
.compliance-banner {
  background:#b91c1c; color:#fff; padding:11px 16px;
  display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700;
  cursor:pointer; flex-shrink:0;
  border-top:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(0,0,0,.25);
  box-shadow:0 2px 8px rgba(220,38,38,.35);
  position:relative; overflow:hidden;
}
/* 滚动红条：改用 transform 位移动画（GPU合成器处理，不触发重绘，低端安卓流畅） */
.compliance-banner::before {
  content:''; position:absolute; top:0; bottom:0; left:0; width:200%;
  background:linear-gradient(90deg,#b91c1c 0%,#dc2626 25%,#ef4444 50%,#dc2626 75%,#b91c1c 100%);
  animation:slide-bg 6s linear infinite;
  will-change:transform;
}
@keyframes slide-bg { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
.compliance-banner > * { position:relative; z-index:1; }
.compliance-banner .cb-icon { font-size:16px; flex-shrink:0; }
.compliance-banner .cb-text { flex:1; letter-spacing:1px; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.compliance-banner .cb-more { font-size:11px; background:rgba(255,255,255,.22); padding:3px 9px; border-radius:10px; flex-shrink:0; }
/* 主内容 */
.login-main { flex:1; padding:32px 28px 20px; display:flex; flex-direction:column; color:#fff; overflow-y:auto; }
.login-logo-area { text-align:center; margin-bottom:30px; }
.login-logo-icon {
  width:76px; height:76px; margin:0 auto 14px;
  background:linear-gradient(135deg,#dc2626 0%,#f59e0b 100%);
  border-radius:18px; display:flex; align-items:center; justify-content:center;
  font-size:32px; font-weight:800; color:#fff; box-shadow:0 10px 28px rgba(220,38,38,.45); letter-spacing:1px;
}
.login-brand-name { font-size:20px; font-weight:700; color:#fbbf24; margin-bottom:6px; letter-spacing:3px; }
.login-brand-tagline { font-size:12px; color:#94a3b8; letter-spacing:2px; }
.login-form-area { display:flex; flex-direction:column; gap:14px; }
.login-input-row {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:10px;
  transition:border-color .2s;
}
.login-input-row:focus-within { border-color:#fbbf24; background:rgba(255,255,255,.1); }
.login-input-row .li-icon { font-size:18px; }
.login-input-row input {
  flex:1; background:transparent; border:none; outline:none;
  color:#fff; font-size:15px;
}
.login-input-row input::placeholder { color:#64748b; }
.login-toggle-pwd { background:transparent; border:none; color:#64748b; cursor:pointer; font-size:16px; padding:4px; flex-shrink:0; }
.login-toggle-pwd:hover { color:#fbbf24; }
.login-error-msg { color:#fca5a5; font-size:13px; display:none; padding:6px 4px; }
.login-form-actions {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:-2px; font-size:12px; color:#94a3b8; padding:0 4px;
}
.login-form-actions .remember { display:flex; align-items:center; gap:6px; cursor:pointer; }
.login-form-actions .remember input[type="checkbox"] { width:14px; height:14px; accent-color:#fbbf24; }
.login-form-actions .forgot-pwd { color:#fbbf24; text-decoration:none; cursor:pointer; }
.login-form-actions .forgot-pwd:hover { text-decoration:underline; }
.login-agreement { display:flex; align-items:center; gap:8px; font-size:12px; color:#94a3b8; margin-top:4px; padding-left:4px; }
.login-agreement input[type="checkbox"] { width:14px; height:14px; accent-color:#fbbf24; }
.login-agreement a { color:#fbbf24; text-decoration:none; }
.login-btn {
  margin-top:16px; background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);
  color:#0a1638; border:none; border-radius:14px; padding:16px;
  font-size:17px; font-weight:700; letter-spacing:6px; cursor:pointer;
  box-shadow:0 8px 22px rgba(251,191,36,.3); transition:transform .15s;
}
.login-btn:hover { transform:translateY(-1px); box-shadow:0 12px 28px rgba(251,191,36,.4); }
.login-btn:active { transform:translateY(0); }
.login-footer-links { margin-top:22px; display:flex; justify-content:space-between; font-size:13px; color:#94a3b8; }
.login-footer-links a { color:#94a3b8; text-decoration:none; cursor:pointer; }
.login-footer-links a:hover { color:#fbbf24; }
.login-agent-tip {
  margin-top:24px; padding:14px 16px;
  background:linear-gradient(135deg,rgba(251,191,36,.1),rgba(245,158,11,.05));
  border:1px dashed rgba(251,191,36,.4); border-radius:10px;
  font-size:12px; color:#cbd5e1; line-height:1.7;
}
.login-agent-tip .label { color:#fbbf24; font-weight:600; margin-right:4px; }
/* 安装到桌面按钮 */
.login-install-btn {
  margin-top:16px; width:100%; padding:12px 16px;
  background:linear-gradient(135deg,rgba(79,110,247,.15),rgba(59,93,231,.08));
  border:1px solid rgba(79,110,247,.5); border-radius:12px;
  color:#93c5fd; font-size:14px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .2s, border-color .2s, color .2s;
}
.login-install-btn:hover {
  background:linear-gradient(135deg,rgba(79,110,247,.25),rgba(59,93,231,.15));
  border-color:#4f6ef7; color:#bfdbfe;
}
.login-install-btn:active { transform:scale(.98); }
/* 下载 App 安装包 */
.login-app-download {
  margin-top:12px; width:100%; padding:12px 16px;
  background:rgba(5,10,28,.45); border:1px dashed rgba(99,121,255,.35);
  border-radius:12px; text-align:center;
}
.lad-title { color:#a5b4fc; font-size:13px; font-weight:700; margin-bottom:2px; }
.lad-sub { color:#64748b; font-size:11px; margin-bottom:10px; }
.lad-btns { display:flex; gap:8px; }
.lad-btn {
  flex:1; padding:10px 6px; border-radius:10px; text-decoration:none;
  font-size:12.5px; font-weight:600; text-align:center;
  transition:background .2s, border-color .2s, color .2s, transform .15s; display:block;
}
.lad-btn.android {
  background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(16,185,129,.08));
  border:1px solid rgba(16,185,129,.5); color:#6ee7b7;
}
.lad-btn.android:hover { background:linear-gradient(135deg,rgba(16,185,129,.35),rgba(16,185,129,.18)); color:#a7f3d0; }
.lad-btn.windows {
  background:linear-gradient(135deg,rgba(79,110,247,.2),rgba(59,93,231,.08));
  border:1px solid rgba(79,110,247,.5); color:#93c5fd;
}
.lad-btn.windows:hover { background:linear-gradient(135deg,rgba(79,110,247,.35),rgba(59,93,231,.18)); color:#bfdbfe; }
.lad-btn:active { transform:scale(.97); }
/* 安装引导弹窗内的步骤样式 */
.install-step {
  display:flex; gap:10px; margin-bottom:12px; align-items:flex-start;
}
.install-step .step-num {
  width:24px; height:24px; border-radius:50%; background:#4f6ef7;
  color:#fff; font-size:12px; font-weight:700; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.install-step .step-text { font-size:13px; color:#e2e8f0; line-height:1.6; padding-top:2px; }
.install-step .step-text strong { color:#fbbf24; }
/* 合规弹窗 */
.login-modal-overlay {
  position:absolute; inset:0; background:rgba(5,8,22,.92);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center;
  z-index:50; padding:20px;
}
.login-modal-overlay.show { display:flex; }
.login-modal {
  width:100%; background:linear-gradient(180deg,#1a1f3a,#0f1428);
  border-radius:20px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  border:1px solid rgba(251,191,36,.25); max-height:90%; overflow-y:auto;
}
.login-modal-header {
  background:linear-gradient(135deg,#b91c1c,#dc2626); padding:16px 20px;
  color:#fff; display:flex; align-items:center; gap:10px; border-bottom:2px solid #fbbf24;
}
.login-modal-header .lmh-icon { font-size:22px; }
.login-modal-header .lmh-title { font-size:17px; font-weight:700; letter-spacing:2px; }
.login-modal-header .lmh-close {
  margin-left:auto; background:rgba(255,255,255,.15); border:none; color:#fff;
  width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:16px;
}
.login-modal-body { padding:20px; color:#e2e8f0; }
.login-topline {
  background:linear-gradient(135deg,rgba(220,38,38,.15),rgba(220,38,38,.05));
  border:1px solid rgba(220,38,38,.35); border-radius:10px;
  padding:12px 14px; margin-bottom:16px; text-align:center;
}
.login-topline .big { font-size:22px; font-weight:800; color:#fca5a5; letter-spacing:4px; }
.login-topline .sub { font-size:12px; color:#fecaca; margin-top:4px; }
.login-rules-list { display:flex; flex-direction:column; gap:10px; }
.login-rule-item {
  display:flex; gap:12px; padding:12px 14px;
  background:rgba(255,255,255,.04); border-left:3px solid #fbbf24;
  border-radius:8px; font-size:13px; line-height:1.7;
}
.login-rule-item.bad { border-left-color:#ef4444; }
.login-rule-item .num {
  width:22px; height:22px; background:#fbbf24; color:#0a1638;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; flex-shrink:0;
}
.login-rule-item.bad .num { background:#ef4444; color:#fff; }
.login-rule-item strong { color:#fbbf24; }
.login-rule-item.bad strong { color:#fca5a5; }
.login-modal-footer { padding:14px 20px 20px; display:flex; gap:10px; }
.login-modal-footer button {
  flex:1; padding:12px; border-radius:10px; border:none;
  font-weight:700; font-size:14px; cursor:pointer;
}
.login-ack-btn { background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#0a1638; letter-spacing:2px; }
.login-close-btn { background:rgba(255,255,255,.08); color:#cbd5e1; border:1px solid rgba(255,255,255,.15) !important; }
@media (max-width:760px) {
  .login-container { padding:0; }
  .phone-frame { width:100%; max-width:100%; height:100vh; max-height:100vh; border-radius:0; padding:0; box-shadow:none; }
  .phone-screen { border-radius:0; }
}
.btn { display:inline-block; padding:10px 24px; border:none; border-radius:10px; font-size:15px; font-weight:500; cursor:pointer; transition:background-color .2s, color .2s; }
.btn-primary { background:var(--primary); color:#fff; width:100%; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-success { background:var(--success); color:#fff; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-sm { padding:6px 14px; font-size:13px; }
.btn-outline { background:transparent; border:1.5px solid var(--border); color:#555; }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.error-msg { color:var(--danger); font-size:13px; margin-top:6px; display:none; }
.success-msg { color:var(--success); font-size:13px; margin-top:6px; display:none; }

/* ===== 主布局 ===== */
.app-container { display:none; }
.app-header { background:var(--card); border-bottom:1px solid var(--border); padding:0 20px; height:56px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; flex-shrink:0; contain:layout style; }
.app-header .logo { font-size:18px; font-weight:700; color:#222; }
.app-header .user-info { display:flex; align-items:center; gap:12px; }
.app-header .user-info span { font-size:14px; color:#666; }
.app-header .user-info .badge { background:var(--primary); color:#fff; padding:2px 10px; border-radius:20px; font-size:12px; }
.app-header .btn-logout { font-size:13px; color:#888; cursor:pointer; background:none; border:none; }
.app-header .btn-logout:hover { color:var(--danger); }

/* 主应用容器：fixed锁定可视区（不依赖100vh，避免沉浸模式偏差），内部滚动（body 不滚动） */
body.app-mode { overflow:hidden; }
#appPage { position:fixed; inset:0; display:flex; flex-direction:column; overflow:hidden; transform:translateZ(0); contain:layout style; }
.app-body { display:flex; flex:1; overflow:hidden; contain:layout style; }
.sidebar { width:200px; background:var(--card); border-right:1px solid var(--border); padding:16px 0; flex-shrink:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; transform:translateZ(0); contain:layout style; touch-action:pan-y; }
.sidebar a { display:block; padding:10px 20px; color:#555; text-decoration:none; font-size:14px; transition:color .2s, background-color .2s, border-color .2s; border-left:3px solid transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sidebar a:hover, .sidebar a.active { color:var(--primary); background:#f0f3ff; border-left-color:var(--primary); }
.main-content { flex:1; padding:20px; overflow-y:auto; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; transform:translateZ(0); contain:layout style; }

/* ===== 卡片 ===== */
.card { background:var(--card); border-radius:12px; padding:20px; box-shadow:0 2px 10px rgba(0,0,0,.04); margin-bottom:20px; }
.card h2 { font-size:18px; margin-bottom:16px; color:#222; }
.card h3 { font-size:16px; margin-bottom:12px; color:#333; }

/* ===== 统计卡片 ===== */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:20px; }
.stat-card { background:var(--card); border-radius:12px; padding:18px; box-shadow:0 2px 10px rgba(0,0,0,.04); text-align:center; }
.stat-card .num { font-size:32px; font-weight:700; color:var(--primary); }
.stat-card .label { font-size:13px; color:#888; margin-top:4px; }

/* ===== 表格 ===== */
.table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x; transform:translateZ(0); }
table { width:100%; border-collapse:collapse; font-size:14px; }
table th { background:#f8f9fb; padding:10px 12px; text-align:left; font-weight:600; color:#555; border-bottom:2px solid var(--border); white-space:nowrap; }
table td { padding:10px 12px; border-bottom:1px solid var(--border); }
table tr:hover { background:#fafbfd; }
.status-badge { padding:3px 10px; border-radius:20px; font-size:12px; font-weight:500; }
.status-available { background:#e8f8ef; color:var(--success); }
.status-extracted { background:#fef0e8; color:var(--warning); }

/* ===== 工具栏 ===== */
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
.toolbar input[type="text"] { padding:8px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:14px; min-width:200px; }
.toolbar select { padding:8px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:14px; }
.toolbar input[type="date"] { padding:7px 10px; border:1.5px solid var(--border); border-radius:8px; font-size:14px; }
.pagination { display:flex; gap:6px; align-items:center; justify-content:center; margin-top:16px; }
.pagination button { padding:6px 12px; border:1px solid var(--border); border-radius:6px; background:#fff; cursor:pointer; font-size:13px; }
.pagination button:hover { border-color:var(--primary); color:var(--primary); }
.pagination button:disabled { opacity:.5; cursor:default; }
.pagination span { font-size:13px; color:#888; }

/* ===== 模态框 ===== */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.4); z-index:200; align-items:center; justify-content:center; }
.modal.show { display:flex; }
.modal-content { background:var(--card); border-radius:16px; padding:28px; width:90%; max-width:500px; max-height:80vh; overflow-y:auto; }
.modal-content h3 { margin-bottom:16px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }

/* ===== 标签页 ===== */
.tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:16px; }
.tab { padding:8px 18px; cursor:pointer; font-size:14px; color:#888; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .2s, border-color .2s; }
.tab:hover { color:var(--primary); }
.tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }

/* ===== 响应式 ===== */
/* 断点提高到1024px，覆盖所有手机和平板竖屏 */
@media (max-width:1024px) {
  .app-body { flex-direction:column; }
  .sidebar {
    width:100%; display:flex; flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
    scrollbar-width:none;
    padding:8px 0; border-right:none;
    border-bottom:1px solid var(--border);
    transform:translateZ(0);
    contain:layout style;
    -webkit-tap-highlight-color:transparent;
  }
  .sidebar::-webkit-scrollbar { display:none; }
  .sidebar a {
    flex-shrink:0;
    padding:8px 14px;
    border-left:none; border-bottom:2px solid transparent;
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
  }
  .sidebar a.active { border-left:none; border-bottom-color:var(--primary); }
  .main-content { padding:12px; touch-action:pan-y; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .toolbar { flex-direction:column; align-items:stretch; }
  .toolbar input[type="text"] { min-width:auto; }
  .login-container { margin:20px auto; padding:10px; }
}

/* 二维码 */
.qrcode-img { display:block; margin:0 auto; max-width:260px; border:1px solid var(--border); border-radius:8px; }

/* checkbox */
table input[type="checkbox"] { width:16px; height:16px; cursor:pointer; }

/* 上传区域 */
.upload-zone { border:2px dashed var(--border); border-radius:12px; padding:30px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s; }
.upload-zone:hover { border-color:var(--primary); background:#f8f9ff; }
.upload-zone .icon { font-size:40px; margin-bottom:10px; }
.upload-zone .text { font-size:14px; color:#888; }
.upload-zone .hint { font-size:12px; color:#bbb; margin-top:6px; }

/* Toast */
.toast { position:fixed; top:20px; right:20px; padding:12px 20px; border-radius:10px; color:#fff; font-size:14px; z-index:300; opacity:0; transform:translateY(-20px); transition:opacity .3s, transform .3s; }
.toast.show { opacity:1; transform:translateY(0); }
.toast.success { background:var(--success); }
.toast.error { background:var(--danger); }

/* ===== 提取信息栏 ===== */
.extract-info-bar { display:flex; gap:24px; flex-wrap:wrap; justify-content:space-around; }
.info-item { display:flex; flex-direction:column; align-items:center; gap:4px; }
.info-label { font-size:13px; color:#888; }
.info-value { font-size:24px; font-weight:700; color:#333; }

/* 警告横幅 */
.warn-banner { background:#fff3e0; border:1px solid #ffb74d; border-radius:8px; padding:10px 16px; margin-top:12px; text-align:center; color:#e65100; font-size:14px; font-weight:500; }

/* 月租选择卡片 */
.rent-card:hover { border-color:var(--primary) !important; box-shadow:0 4px 12px rgba(0,0,0,0.1); transform:translateY(-2px); }
.rent-disabled { opacity:0.5; cursor:not-allowed !important; }
.rent-disabled:hover { border-color:#e0e0e0 !important; box-shadow:none !important; transform:none !important; }

/* 充值信息区 */
.recharge-info { background:#f0f3ff; border-radius:8px; padding:12px 16px; margin-bottom:16px; }
.recharge-info p { margin-bottom:4px; }

/* ===== 表单组（统一所有表单字段排版）===== */
.form-group { margin-bottom:14px; }
.form-group > label {
  display:block;
  font-size:13.5px;
  font-weight:600;
  color:#444;
  margin-bottom:6px;
}
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius:8px;
  font-size:14px;
  font-family:inherit;
  color:#333;
  background:#fff;
  transition:border-color .2s, box-shadow .2s;
  outline:none;
}
.form-group textarea { resize:vertical; min-height:72px; line-height:1.5; }
.form-group select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; cursor:pointer; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(67,97,238,0.12); }
.form-group input::placeholder,
.form-group textarea::placeholder { color:#bbb; }

/* 两列表单网格（提取表单等短字段并排，更整齐）*/
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.form-grid .form-group-full { grid-column:1 / -1; }
@media (max-width:560px) { .form-grid { grid-template-columns:1fr; } }