/* 手机端远程管理。配色与桌面端 design.css 一致，跟随系统深浅色。 */
:root {
  --ink:#1d1d1f; --muted:#6e6e73; --accent:#0066cc; --action:#0071e3;
  --surface:#fff; --canvas:#f5f5f7; --subtle:#fafafc; --line:#e0e0e0;
  --selected:#eaf3ff; --focus:#0071e340; --overlay:#00000066;
  --danger:#b42318; --danger-bg:#fff0ee; --warning:#895c12; --warning-bg:#fff5df;
  color-scheme:light;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Segoe UI",sans-serif;
  font-size:15px; line-height:1.5; font-synthesis:none;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#f5f5f7; --muted:#a1a1a6; --accent:#2997ff; --action:#0071e3;
    --surface:#1d1d1f; --canvas:#000; --subtle:#252527; --line:#38383a;
    --selected:#112b45; --focus:#2997ff60; --overlay:#000000aa;
    --danger:#ff827a; --danger-bg:#361e1d; --warning:#e8bd77; --warning-bg:#332818;
    color-scheme:dark;
  }
}
* { box-sizing:border-box; }
html, body { margin:0; max-width:100%; overflow-x:hidden; }
body {
  background:var(--canvas); color:var(--ink);
  -webkit-text-size-adjust:100%;
  padding:0 0 env(safe-area-inset-bottom);
}
button, input, select { font:inherit; color:inherit; }
button {
  cursor:pointer; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--ink);
  min-height:44px; padding:10px 14px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:background .15s, transform .1s;
}
button:active:not(:disabled) { transform:scale(.98); }
button:disabled { opacity:.4; cursor:default; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline:3px solid var(--focus); outline-offset:2px;
}
button.primary { background:var(--action); border-color:transparent; color:#fff; border-radius:999px; }
button.small { min-height:36px; padding:7px 12px; font-size:13px; border-radius:8px; }
button.flat { border-color:transparent; background:transparent; color:var(--accent); }
button.danger { color:var(--danger); }
input:not([type=checkbox]), select {
  width:100%; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); padding:12px; min-height:46px;
}
input[type=checkbox] { width:22px; height:22px; accent-color:var(--action); }
input:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--focus); outline:none; }
.muted { color:var(--muted); }
.boot { padding:80px 20px; text-align:center; color:var(--muted); }

/* 布局 */
.wrap { max-width:560px; margin:0 auto; padding:0 14px 90px; }
.appbar {
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:var(--canvas); border-bottom:1px solid var(--line);
}
.appbar .brand { display:flex; align-items:center; gap:9px; min-width:0; }
.brand-mark {
  width:32px; height:32px; flex:none; border-radius:9px;
  background:var(--ink); color:var(--canvas);
  display:grid; place-items:center; font-size:19px; font-weight:600;
}
.brand strong { font-size:17px; letter-spacing:-.4px; display:block; }
.brand small { display:block; font-size:11px; color:var(--muted); }
.appbar .spacer { margin-left:auto; }
.appbar button.icon { min-width:44px; padding:8px; border-color:transparent; background:transparent; }

h2.section { font-size:13px; font-weight:600; color:var(--muted); margin:22px 2px 10px; letter-spacing:0; }

.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:16px; margin-bottom:12px;
}
.card h3 { margin:0; font-size:16px; font-weight:600; letter-spacing:-.3px; overflow-wrap:anywhere; }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.row.tight { gap:6px; }
.grow { flex:1; min-width:0; }

/* 电脑卡片 */
.device-head { display:flex; align-items:flex-start; gap:10px; }
.device-head .dot { width:9px; height:9px; border-radius:50%; background:var(--muted); flex:none; margin-top:7px; }
.device-head .dot.on { background:var(--accent); box-shadow:0 0 0 3px var(--selected); }
.device-meta { font-size:12px; color:var(--muted); margin-top:4px; line-height:1.7; }
.banner {
  background:var(--warning-bg); color:var(--warning);
  border-radius:12px; padding:11px 13px; font-size:13px; line-height:1.7; margin:10px 0 0;
}
.banner.danger { background:var(--danger-bg); color:var(--danger); }

/* 批次 */
.batch { border:1px solid var(--line); border-radius:14px; padding:14px; margin-top:10px; background:var(--surface); }
.batch-top { display:flex; align-items:flex-start; gap:10px; }
.batch-name {
  border:0; background:transparent; padding:0; min-height:0; text-align:left;
  display:block; justify-content:flex-start;
  color:var(--accent); font-size:16px; font-weight:600; letter-spacing:-.3px;
  overflow-wrap:anywhere; flex:1;
}
.pill { font-size:11px; padding:4px 9px; border-radius:6px; background:var(--subtle); color:var(--muted); white-space:nowrap; display:inline-block; }
.pill.blue, .pill.green { background:var(--selected); color:var(--accent); }
.pill.amber { background:var(--warning-bg); color:var(--warning); }
.pill.red { background:var(--danger-bg); color:var(--danger); }
.progress { height:5px; border-radius:999px; background:var(--line); overflow:hidden; margin:10px 0 8px; }
.progress > div { height:100%; width:0; background:var(--accent); transition:width .2s; }
.batch-facts { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12px; color:var(--muted); }
.batch-facts b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.batch-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }

/* 邮箱列表 */
.toolbar { display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; }
.toolbar input { flex:2 1 160px; }
.toolbar select { flex:1 1 130px; width:auto; }
.tasks { list-style:none; margin:0; padding:0; }
.task { display:flex; gap:10px; padding:13px 2px; border-bottom:1px solid var(--line); align-items:flex-start; }
.task:last-child { border-bottom:0; }
.task .pick { padding:2px 0 0; display:flex; align-items:center; min-height:24px; }
.pick-spacer { width:22px; display:inline-block; }
.task-main { flex:1; min-width:0; }
.email {
  border:0; background:transparent; padding:0; min-height:0; text-align:left;
  font-size:15px; font-weight:600; color:var(--ink); max-width:100%;
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.email.expanded { white-space:normal; overflow-wrap:anywhere; }
.task-meta { font-size:12px; color:var(--muted); margin-top:5px; line-height:1.7; font-variant-numeric:tabular-nums;
  display:flex; flex-wrap:wrap; gap:2px 10px; }
.task-meta span { white-space:nowrap; }
.task-note { display:block; font-size:12px; color:var(--muted); margin-top:3px; overflow-wrap:anywhere; }
.task-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; }

/* 指令反馈 */
.feed { list-style:none; margin:0; padding:0; }
.feed li { padding:11px 0; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:flex-start; }
.feed li:last-child { border-bottom:0; }
.feed .what { flex:1; min-width:0; font-size:14px; overflow-wrap:anywhere; }
.feed .when { font-size:11px; color:var(--muted); margin-top:4px; display:block; font-variant-numeric:tabular-nums; }

/* 选择栏 */
.selbar {
  position:fixed; left:0; right:0; bottom:0; z-index:6;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:var(--surface); border-top:1px solid var(--line);
}
.selbar span { font-size:14px; }

/* 登录 / 改密码 */
.auth { max-width:400px; margin:0 auto; padding:44px 20px 40px; }
.auth .brand { justify-content:center; margin-bottom:28px; display:flex; align-items:center; gap:10px; }
.auth h1 { font-size:24px; letter-spacing:-.6px; margin:0 0 6px; }
.auth p.sub { color:var(--muted); font-size:13px; margin:0 0 22px; line-height:1.7; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.field small { display:block; font-size:11px; color:var(--muted); margin-top:6px; line-height:1.6; }
.auth button.primary { width:100%; }
.auth-foot { margin-top:14px; }
.error-text { color:var(--danger); background:var(--danger-bg); border-radius:8px; padding:9px 11px; font-size:13px; margin:0 0 14px; }

/* 空状态 */
.empty { text-align:center; color:var(--muted); padding:34px 16px; }
.empty strong { display:block; color:var(--ink); font-size:16px; margin-bottom:6px; }
.empty p { margin:0; font-size:13px; line-height:1.8; }

/* 弹层 */
.overlay {
  position:fixed; inset:0; z-index:20; background:var(--overlay);
  display:flex; align-items:flex-end; justify-content:center; padding:0;
}
.sheet {
  background:var(--surface); color:var(--ink);
  width:100%; max-width:560px; border-radius:18px 18px 0 0;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom));
  max-height:88vh; overflow:auto;
}
.sheet h2 { font-size:19px; margin:0 0 6px; letter-spacing:-.4px; }
.sheet p.sub { color:var(--muted); font-size:13px; margin:0 0 16px; line-height:1.7; overflow-wrap:anywhere; }
.sheet .actions { display:flex; gap:10px; margin-top:18px; }
.sheet .actions button { flex:1; }
.quick { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.quick button { flex:1 1 60px; min-height:40px; }
.menu { display:flex; flex-direction:column; gap:8px; }
.menu button { width:100%; justify-content:flex-start; }

#toast {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:var(--canvas); border-radius:10px;
  padding:11px 16px; font-size:14px; z-index:30; max-width:90vw; text-align:center;
}
#toast.error { background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger); }

@media (min-width:600px) {
  .wrap { padding-bottom:60px; }
  .selbar { max-width:560px; left:50%; transform:translateX(-50%); border-radius:14px 14px 0 0; border:1px solid var(--line); }
}