/* 华人牌网页控制台 · 样式
   骨架照 didi_worker 的 index.html（卡片 + h2 竖条标题 + form-row/form-group 双列表单
   + 模式表格 + stat-grid 统计格），配色沿用华人牌 Tk 版那份深色（gui.py 顶部的 C_* 常量）。
   四个页面共用这一份。 */

:root{
  --bg:#0F1117; --card:#171A23; --card2:#1E222D; --border:#2A2F3D;
  --text:#E8EAF0; --dim:#9AA3B2; --accent:#5B8DEF;
  --ok:#00D9A3; --warn:#FFB020; --err:#FF5C6C; --won:#FF7A45;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 "Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
  overflow-x:hidden;                 /* 任何一处溢出都会把固定底栏顶偏，直接断根 */
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:Consolas,ui-monospace,monospace}
.dim{color:var(--dim)}
.ok{color:var(--ok)} .warn{color:var(--warn)} .err{color:var(--err)}
.hidden{display:none !important}
/* HTML 的 `hidden` 属性对 display:flex / inline-flex 的元素**不生效**：那是 UA 样式，
   作者写的 `.btn{display:inline-flex}` / `.btns{display:flex}` 一律压过它。
   而这个项目好几处是用 `el.hidden = true` 隐藏元素的（小号弹层里的号池清单、
   顶栏的管理台入口）—— 少了这条规则，属性变了、页面上照样看得见
   （用户就是这么发现的："号池地址怎么在普通用户这里显示"）。 */
[hidden]{display:none !important}

/* 滚动条统一成**细的深色条**：Windows 默认那条又宽又亮，在两栏布局的左栏里
   特别扎眼（用户截图里那两根粗条就是它）。这里只管观感，不影响滚动行为。 */
*{scrollbar-width:thin; scrollbar-color:#2b3341 transparent}
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2b3341; border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#3a4354}
::-webkit-scrollbar-corner{background:transparent}
button{font:inherit}
input,select,textarea{
  background:var(--card2); color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:6px 9px; width:100%; outline:none; font-size:13px;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input[readonly]{color:var(--dim)}
input[type=checkbox]{width:15px; height:15px; padding:0; margin:0; accent-color:var(--accent)}

/* ---------------- 顶栏 ----------------
   一行放完、粘在顶部：左边是运行状态，中间那段空白放**全局常驻**的
   到期时间 + 小号管理/身份验证/诊断/抢单明细（原先埋在账号面板里，找起来费事），
   右边是就地改的高频项与运行开关。窄屏时 flex-wrap 自己折行。 */
.header{
  display:flex; flex-direction:column; gap:8px;
  padding:8px 18px 10px;
  background:var(--card); border-bottom:2px solid var(--accent);
  position:sticky; top:0; z-index:20;
}
.header .hrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%}
/* 顶栏里所有按钮**统一大小**（高度/字号/内边距一致），别一会儿大一会儿小：
   `.sm` 在顶栏里不再变小，`.ok`（开始抢单）也不比别的胖。 */
.header .btn{
  min-height:34px; padding:0 13px; font-size:13px; font-weight:600; border-radius:8px;
}
.header .qbtn{min-height:34px; padding:3px 11px; border-radius:8px}
.header .pill{min-height:34px; padding:0 12px}
/* 分组之间的一条细竖线（状态 | 常驻操作 | 高频项） */
.header .vline{width:1px; height:26px; background:var(--border); flex:none; margin:0 2px}
.top{
  display:flex; align-items:center; gap:10px; padding:10px 18px; flex-wrap:wrap;
  background:var(--card); border-bottom:2px solid var(--accent);
  position:sticky; top:0; z-index:20;
}
.header h1,.top h1{font-size:17px; margin:0; font-weight:700}
.header h1 span{color:var(--accent)}
.header .sp,.top .sp{flex:1}
.badge,.pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:3px 10px; border-radius:99px; border:1px solid var(--border);
  background:var(--card2); color:var(--dim);
}
.pill.on{color:var(--ok); border-color:#1d5c48}
.pill.off{color:var(--dim)}
.pill.bad{color:var(--err); border-color:#5c2029}
.pill.warn{color:var(--warn); border-color:#5c4a1d}
/* 顶栏左边那两个"身份"pill 各自有颜色，扫一眼就知道是车还是到期 */
.pill.plate{background:rgba(91,141,239,.12); border-color:rgba(91,141,239,.45); color:#9DBDFF}
.pill.ok{background:rgba(0,217,163,.10); border-color:#1d5c48; color:var(--ok)}

/* ---------------- 布局：主区 ----------------
   **电脑端（≥861px）两栏**：左边设置栏常驻（保存/重载 + 页签 + 面板），右边订单列表。
   **手机端单栏**：设置收进左上角的 ☰ 抽屉，主区就是订单列表整屏（所以 `.main` 默认
   是竖向排列，宽屏那份 media query 再切成两栏）。 */
.main{
  display:flex; flex-direction:column; gap:12px; padding:14px 18px 24px;
  min-height:calc(100vh - 104px);
}
.view{display:flex; flex-direction:column; gap:12px; flex:1; min-height:0}
/* 只在电脑端出现的东西（页签栏就是其一：手机上用抽屉） */
.only-wide{display:none}
/* 设置面板里可滚动的那部分 */
.cfg-body{display:flex; flex-direction:column; gap:12px; flex:1; min-height:0}
#viewCfg .pane{max-width:100%}

/* ============ 电脑端：两栏（左设置常驻 / 右订单列表） ============
   `.hidden` 带 !important，这里用 id 选择器（特异性更高）把它压过去 ——
   宽屏下两块都要显示，不再是"二选一"。 */
@media (min-width:861px){
  .main{
    display:grid; grid-template-columns:minmax(330px,392px) minmax(0,1fr);
    gap:12px; align-items:stretch;
  }
  #viewCfg{
    display:flex !important; max-width:none; margin:0;
    height:calc(100vh - 132px); min-height:0;
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden;
  }
  #viewCfg .col-top{
    border:0; border-bottom:1px solid var(--border); border-radius:0;
    padding:10px 12px; flex:none; background:var(--card);
  }
  #viewCfg .tabs{padding:8px 12px 0; flex:none}
  #viewCfg .cfg-body{padding:12px; overflow:auto}
  #viewCfg #btnBack{display:none}          /* 订单一直在右边，不需要"返回" */
  #viewOrders{display:flex !important; min-height:calc(100vh - 132px)}
}
/* 管理台是"左侧页签 + 右侧内容"，宽度自己定 */
.wrap{
  display:grid; grid-template-columns:200px minmax(0,1fr);
  gap:12px; padding:14px 18px 24px; align-items:stretch;
}
.col-body{overflow:auto; flex:1; min-height:0; padding:0}
.col-body{overflow:auto; flex:1; min-height:0; padding:0}
.col-top{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px 12px;
}
@media (max-width:1200px){
  .wrap{grid-template-columns:180px minmax(0,1fr)}
}

/* ================= 管理台：手机端把四个页签收进抽屉 =================
   用户要求："手机端后台没有做抽屉tab"。原来的写法在窄屏就是四个按钮竖着排一列、
   占掉半屏（截图里那一坨），内容被挤到下面。现在窄屏时左侧栏变成**抽屉**：
   ☰ 打开、点页签或遮罩收起；宽屏照旧是左侧常驻栏。 */
#btnAdminMenu{display:none}
.amask{display:none}

/* ================= 控制台顶栏：手机端按钮排成等宽两列 =================
   用户要求："手机端前台的那些按钮也没排列整齐"。桌面端顶栏是"一行放完"（按钮各按
   内容宽），到了手机宽度 flex-wrap 一折行，就变成一堆**宽窄不一**的按钮挤三行
   （截图里那样）。窄屏改成：状态区占一行、按钮一律 `calc(50% - 4px)` 等宽两列、
   【开始抢单】整行独占 —— 尺寸整齐了，手指也点得准。 */
@media (max-width:860px){
  .header{padding:8px 10px 10px}
  .header .hrow{gap:8px}
  .header .hrow > .vline,
  .header .hrow > .sp{display:none}
  .header .heart{flex:1 1 auto; min-width:0}
  .header .heart .h1{font-size:14px}
  .header .hrow > .btn,
  .header .hrow > .qbtn,
  .header .hrow > a.btn{flex:1 1 calc(50% - 4px); min-width:0; justify-content:center}
  /* 状态 pill 也进同一个两列网格：不然"到期 永久有效"和旁边的按钮一宽一窄又不齐 */
  .header .hrow > .pill{flex:0 1 auto; min-height:32px}
  .header #logo{order:-1}
}
@media (max-width:860px){
  #btnAdminMenu{display:inline-flex}
  .wrap{grid-template-columns:minmax(0,1fr); padding:12px}
  .wrap > aside.left{
    position:fixed; top:0; left:0; bottom:0; width:250px; max-width:82vw; z-index:70;
    transform:translateX(-102%); transition:transform .18s ease;
    background:var(--card); border-right:1px solid var(--border);
    border-radius:0; overflow:auto;
  }
  .wrap > aside.left.open{transform:none}
  .amask{position:fixed; inset:0; background:rgba(4,6,10,.62); z-index:69}
  .amask.open{display:block}
  #tabs{flex-direction:column !important; padding:14px 12px; gap:6px}
  #tabs button{
    text-align:left; padding:12px 14px; border-radius:8px; font-size:15px;
    border:1px solid var(--border);
  }
  #tabs button.on{background:rgba(91,141,239,.16); border-color:var(--accent); color:var(--accent)}
  .top h1{font-size:15px}
  /* 表格在手机上必然横向溢出：让它自己滚，别把整页撑破 */
  .tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
}
@media (max-width:860px){
  .wrap{grid-template-columns:1fr}
}

/* 顶栏里的"心跳"与就地改的高频项（照 workbench.html 的 .heart / .lamp / .qbtn） */.logo{
  width:30px; height:30px; flex:none; border-radius:9px; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:15px;
  background:var(--accent); color:#08101f;
  /* 它同时是抽屉开关（☰ 并进来了）：当按钮用，去掉原生按钮的边框与内边距 */
  border:0; padding:0; cursor:pointer; font-family:inherit;
}
.logo:hover{filter:brightness(1.12)}
.logo:active{transform:scale(.93)}
.heart{display:flex; align-items:center; gap:8px}

/* 运行开关：现在挂在「运行状态」卡片底部（用户要求）—— 整行、够大、显眼，
   状态和动作放在一起，"现在停着 → 点这里开跑"一眼就懂。 */
.runbig{
  width:100%; margin-top:12px; min-height:48px;
  font-size:16px; font-weight:800; letter-spacing:1px;
  justify-content:center;
}.lamp{width:9px; height:9px; border-radius:50%; background:var(--dim); flex:none}
.lamp.live{background:var(--ok); box-shadow:0 0 10px rgba(0,217,163,.6); animation:pulse 2s infinite}
.lamp.dead{background:var(--err); box-shadow:0 0 10px rgba(255,92,108,.55)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.heart .h1{font-size:14px; font-weight:700}
.heart .h2{font-size:11px; color:var(--dim)}
.heart .h2 b{color:var(--text)}
.qbtn{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  background:var(--card2); border:1px solid var(--border); border-radius:8px;
  padding:4px 10px; cursor:pointer; color:var(--text);
}
.qbtn:hover{border-color:var(--accent)}
.qbtn label{font-size:10px; color:var(--dim); cursor:pointer}
.qbtn b{font-size:14px; font-weight:700}
.qbtn b i{font-style:normal; color:var(--dim); font-size:11px; margin-right:1px}

/* ---------------- 卡片 ---------------- */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px;
}
.card h2{
  font-size:14px; font-weight:700; color:var(--accent);
  margin:0 0 12px; display:flex; align-items:center; gap:6px;
}
.card h2::before{content:''; width:3px; height:15px; background:var(--accent); border-radius:2px}
.card .sub{font-size:12px; color:var(--dim); margin:-6px 0 10px}

/* 诊断弹层的分节标题（主号 / 小号 / 其它）—— 谁的问题一眼分得开 */
.secline{
  margin:14px 0 6px; padding-left:8px; font-size:13px; font-weight:700;
  color:var(--accent); border-left:3px solid var(--accent);
}

/* ---------------- 表单 ---------------- */
/* 表单栅格**自适应**：`auto-fill` 让列数随宽度自动增加 —— 宽屏一行排 5~6 个字段、
   常规 2~3 个、手机 1 个；单个输入框始终保持在 260~320px，不会被横拉成一整屏，
   也不会在右边留一大片空白（这是 `auto-fit` 的坑：字段少时它会折叠空轨道把字段拉宽）。
   `.full`（整行）与 `.three` 是显式指定，保留给确有需要的行。 */
.form-row{display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr))}
.form-row.full{grid-template-columns:1fr}
.form-row.three{grid-template-columns:repeat(auto-fill, minmax(200px, 1fr))}
/* `.form-grid`：**整块字段一个网格** —— 列数真正随宽度自适应（宽屏一行 5~6 个、手机 1 个）。
   用 `.form-row` 把字段两两分组时，容器再宽也只会排 2 个（每个 form-row 是独立网格）。
   `.wide` 的子项占满整行（TK、备注、地址这类长字段用）。 */
.form-grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr))}
.form-grid > .wide{grid-column:1 / -1}
/* 整行字段（TK/备注/地址/UID）的输入框别横拉成 1900px —— 输入框太宽反而难读难用 */
.form-grid > .wide input:not([type=checkbox]){max-width:660px}
.form-group{margin-bottom:10px; min-width:0}
.form-group>label{display:block; font-size:12px; font-weight:600; color:var(--dim); margin-bottom:4px}
.form-group:last-child{margin-bottom:0}
/* 卡片里的输入框必须撑满一列：只写全局 `input{width:100%}` 时，遇到"输入框 + 按钮"
   同排（.btns 里的 flex 项）会被压成内容宽度，看着像"半截输入框"。这里把宽度钉死。 */
.card .form-group>input,
.card .form-group>select,
.grp .form-group>input{width:100%; min-width:0}
.btns>input{flex:1; min-width:140px}
.check{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text); cursor:pointer}
.check input[type=checkbox]{flex:none}
.tip{font-size:12px; color:var(--dim); margin-top:6px; line-height:1.45}

/* 微信扫码关注那块。二维码**必须白底**（深色主题下黑底二维码扫不出来 ——
   图片本身是白底 PNG，所以这里只给它一个白框和留白，别用主题色去染它）。 */
.wxqr{margin-top:12px; padding:12px; border:1px solid var(--border); border-radius:10px;
  background:var(--card2); display:flex; flex-direction:column; align-items:center; gap:8px}
.wxqr img{width:168px; height:168px; image-rendering:pixelated; background:#fff;
  border-radius:8px; padding:6px}
.wxqr .tip{text-align:center; max-width:420px; margin-top:0}
.btns{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.btns>*{flex:0 0 auto}

/* 接单模式表格：行=行程/大厅，列=独享/拼车/人数 —— 人数框和它所属的来源在同一行，
   不会再出现「四个 1-4 分不清谁是谁」。 */
/* 接单模式：整张表**靠左紧凑**（原来是 width:100% + 单元格居中，列会被拉到两端），
   右边空出来的地方正好放那三个开关（连续抓单 / 只接未支付 / 承担高速）。 */
table.mode{width:auto; border-collapse:collapse; font-size:13px}
table.mode th{
  color:var(--dim); font-size:12px; font-weight:600; text-align:left;
  padding:0 30px 6px 0;
}
table.mode th:last-child{padding-right:0}
table.mode th.numcol{width:auto}
table.mode td{padding:6px 30px 6px 0; text-align:left; border-top:1px solid #20242f}
table.mode td:last-child{padding-right:0}
table.mode input.num{width:56px; text-align:center; padding:3px 5px}
table.mode .slash{color:var(--dim); margin:0 2px}
/* 表格 + 右侧开关：一行两栏，窄屏自动折行 */
.mode-wrap{display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap}
.mode-wrap > table.mode{flex:0 0 auto}
.mode-switches{display:flex; flex-direction:column; gap:9px; flex:1 1 240px; min-width:0}
.mode-switches .check{font-size:13px}

/* ---------------- 统计格 ---------------- */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
/* 四个统计格可点：点「已见/轮次」看诊断，点「发起/中单」看明细 */
.stat-box{cursor:pointer}
.stat-box:hover{border-color:var(--accent)}
.stat-box:hover .num{color:#8FB4FF}
/* 与 Tk 版一一对应的四项状态（刷新状态/接单状态/小号/身份验证）。
   列数**必须与上面四个统计格一样是 4 列**（同一容器宽度、同一个 gap）——
   否则下面四项和上面四格错位，看着就是没对齐。 */
.kstat-grid{display:grid; gap:8px; margin-top:10px; grid-template-columns:repeat(4, 1fr)}
.kstat{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--card2); border:1px solid var(--border); border-radius:8px;
  padding:7px 11px; cursor:pointer; min-width:0;
}
.kstat:hover{border-color:var(--accent)}
.kstat span{font-size:12px; color:var(--dim); flex:none}
.kstat b{font-size:13px; font-weight:600; text-align:right; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kstat b.warn{color:var(--warn)}
.kstat b.err{color:var(--err)}
.kstat b.ok{color:var(--ok)}
/* 手机端：四项状态改成两列 —— 500px 宽下挤四列会变成"刷…""抢…"这种，
   而上面四格数字短、留着 4 列照样清楚。（"上下对齐"是电脑端的规矩。） */
@media (max-width:860px){
  .kstat-grid{grid-template-columns:repeat(2, 1fr)}
}
.stat-box{
  background:var(--card2); border:1px solid var(--border);
  border-radius:8px; padding:10px 8px; text-align:center;
}
.stat-box .num{font-size:20px; font-weight:700; color:var(--accent)}
.stat-box .lbl{font-size:11px; color:var(--dim); margin-top:2px}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--card2); color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:7px 14px; cursor:pointer; white-space:nowrap; font-size:13px;
  font-weight:600;
}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#08101f}
.btn.ok{background:#0d4d3d; border-color:#12705a; color:#d6fff4}
.btn.danger{background:#4d1620; border-color:#7a2430; color:#ffd9de}
.btn.sm{padding:3px 9px; font-size:12px; font-weight:400}
.btn.ghost{background:transparent}

.seg{display:inline-flex; border:1px solid var(--border); border-radius:6px; overflow:hidden}
.seg button{background:transparent; color:var(--dim); border:0; padding:4px 10px; cursor:pointer; font-size:12px}
.seg button.on{background:var(--accent); color:#08101f; font-weight:700}

/* ---------------- 订单表 ---------------- */
.tablewrap{overflow:auto; flex:1; min-height:0; border:1px solid var(--border); border-radius:8px}
table.ord{width:100%; border-collapse:collapse; font-size:13px}
table.ord th{
  position:sticky; top:0; background:var(--card2); color:var(--dim);
  text-align:left; padding:6px 8px; cursor:pointer; white-space:nowrap; z-index:2;
  border-bottom:1px solid var(--border); font-size:12px;
}
table.ord td{padding:5px 8px; border-bottom:1px solid #20242f; white-space:nowrap}
/* 订单行配色与 Tk 版**逐色一致**：Tk 的 tag_configure 给的是**前景色**（色相=座位、
   亮度=有没有过筛选，中单优先标红），不是整行铺背景 —— 背景一多表格像花布，
   重点反而看不出来。这里的色值直接抄 gui.py:5797-5803 那一组。 */
table.ord tr.excl td{color:#FFB020}          /* 独享 · 命中（可抢）   */
table.ord tr.excl_skip td{color:#A8894E}     /* 独享 · 未命中（灰但看得见）*/
table.ord tr.carpool td{color:#5B8DEF}       /* 拼座 · 命中           */
table.ord tr.carpool_skip td{color:#6E86B8}  /* 拼座 · 未命中         */
table.ord tr.other td{color:#8B92A6}         /* 座位没解析出来         */
table.ord tr.won td{color:#FF5C6C; font-weight:700}   /* 已抢到（中单优先）*/
table.ord tr:hover td{background:rgba(91,141,239,.10)}
table.ord td.route{max-width:260px; overflow:hidden; text-overflow:ellipsis}

/* ---------------- 日志 / 指令 ---------------- */
.log-box{
  background:#0B0D12; border:1px solid var(--border); border-radius:8px;
  padding:4px 0; overflow:auto; font-family:Consolas,ui-monospace,monospace;
  font-size:12px; line-height:1.55; flex:1; min-height:120px;
}
.log-box .l{display:flex; gap:6px; padding:2px 10px; border-bottom:1px solid #1a1e27}
.log-box .l time{color:#6b7385; flex:none}
.log-box .l b{flex:none; font-weight:700; font-size:11px}
.log-box .l.info b{color:var(--dim)}
.log-box .l.ok b{color:var(--ok)}
.log-box .l.warn b{color:var(--warn)}
.log-box .l.err b{color:var(--err)}
.log-box .l.filter b{color:#B08BFF}
.log-box .l.order b{color:var(--accent)}
.log-box .l .cnt{color:var(--warn); flex:none}
/* 左栏只有 360px 宽，日志文字必须能正常折行而不是把整行挤成一团 */
.log-box .l span{flex:1; min-width:0; word-break:break-word}
.log-box .l span.badge{flex:none}
.feed{padding:10px 0}
.feed .card{padding:8px 10px; margin:0 0 8px; background:var(--card2); border-radius:8px}

/* ---------------- 弹层 ---------------- */
.mask{position:fixed; inset:0; background:rgba(5,7,12,.72); display:flex; align-items:center; justify-content:center; z-index:60}
.modal{background:var(--card); border:1px solid var(--border); border-radius:12px; width:min(780px,92vw); max-height:86vh; display:flex; flex-direction:column}
.modal > header{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border)}
.modal > header h3{margin:0; font-size:15px}
.modal > .body{padding:14px; overflow:auto}
.modal > footer{padding:10px 14px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end}
/* 页面内的确认框/输入框（取代原生 confirm/prompt）：窄一点、正文可换行、输入框铺满 */
.modal.ask{width:min(460px, 92vw)}
.modal.ask > .body{padding:16px 16px 6px}
.modal.ask .askmsg{margin:0 0 12px; line-height:1.65}
.modal.ask input, .modal.ask textarea{width:100%}
/* 账号池取号的列表（几百行，得能滚、能一眼看出哪些已经在名单里） */
#mdPool .modal{width:min(960px, 94vw)}
.pool-pools-row{align-items:center}
.pool-pools-list{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.pool-pools-list label{font-size:12px; display:inline-flex; align-items:center; gap:4px}
.pool-list{overflow:auto; max-height:52vh; display:flex; flex-direction:column;
  gap:6px; padding-right:4px; min-height:120px}
.pool-row{display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:pointer;
  background:var(--card2); border:1px solid var(--border); border-radius:8px}
.pool-row:hover{border-color:var(--accent)}
.pool-row.have{opacity:.55}
.pool-row b{font-weight:600}
/* 下载进度条（号池逐池拉，一个请求等到底会让人以为卡死） */
.bar{height:8px; background:var(--card2); border:1px solid var(--border);
  border-radius:99px; overflow:hidden}
.bar > i{display:block; height:100%; width:0; background:var(--accent);
  transition:width .3s ease}

/* ---------------- 提示条 ----------------
   用户要求：提示直接出现在**页面正中间**（原来在右上角，容易看漏）。
   容器铺满整屏、`pointer-events:none` —— 提示自己不吃点击，底下的按钮照点不误；
   多条提示时在中心竖着排。 */
#toasts{
  position:fixed; inset:0; z-index:90; display:flex; flex-direction:column;
  gap:8px; align-items:center; justify-content:center; pointer-events:none;
}
.toast{
  pointer-events:none; background:#232B3B;
  border:1px solid #3A4459; border-left:5px solid var(--accent);
  padding:12px 20px; border-radius:9px; max-width:min(560px, 86vw); font-size:15px;
  font-weight:600; text-align:center;
  /* 中间那块是压在订单表上的：外圈留一道暗光晕，才像"浮"在页面上而不是嵌进表格里 */
  box-shadow:0 18px 50px rgba(0,0,0,.8), 0 0 0 6px rgba(0,0,0,.28);
  white-space:pre-line;
}
.toast.ok{border-left-color:var(--ok)} .toast.err{border-left-color:var(--err)}
.toast.warn{border-left-color:var(--warn)}

.card .kv{display:flex; gap:8px; padding:2px 0}
.card .kv .k{color:var(--dim); flex:none; min-width:88px}
.badge.ok{color:var(--ok); border-color:#1d5c48}
.badge.err{color:var(--err); border-color:#5c2029}
.badge.warn{color:var(--warn); border-color:#5c4a1d}

/* ---------------- 登录页 ---------------- */
/* （这里原先还留着上一版登录页的 `.login / .login h1 / .login .foot` 一套类名，
   页面早就改用 `.lcard/.ltabs/.lbtn` 了 —— 死代码，而且它那条 `.login-wrap` 会和
   文件末尾那套完整样式**打架**（padding 20px vs 16px）。已删。） */

/* ================= 手机端 =================
   这一套照 `didi_worker/templates/mobile.html` 的骨架做的（配色仍用华人牌深色）。
   它与桌面端不是"同一套样式缩一缩"，理由都是手机上真实存在的约束：

     · 按钮 48px 高、字号 16px —— 手指点得中；输入框字号 ≥16px 才不会被 iOS 自动放大
     · `.acts` 双列网格（`.wide` 占满一行）—— 主操作两个大按钮并排
     · `.stats` 三列格子 —— 六项统计两行排完，不挤
     · `.kv` 键值行 —— 状态用"左边名称、右边值"的虚线行，比一排只读输入框省一半高度
     · `.sw` 开关行 —— 左边文字右边勾选，整行可点
     · `.mord` 订单卡片 —— 手机上看的是"这一单怎么样"，不是十一列表格
     · `.mtabs` 页签收到**左上角**（标题下方一行，横向可滑）—— 与桌面端同一套
       "把东西收进页签"的用法，不再占屏幕底部那条固定栏 */

.mtop{
  position:sticky; top:0; z-index:20; background:var(--card);
  border-bottom:2px solid var(--accent);
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
}
.mtop-row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.mtop h1{flex:1; font-size:16px; font-weight:700; margin:0; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.mtop h1 span{color:var(--accent)}

.mpage2{display:none; padding:12px}
.mpage2.active{display:block}

.macts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.macts .wide{grid-column:1/-1}
.mbtn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:48px; border-radius:var(--radius); font-size:15px; font-weight:700;
  border:1px solid var(--border); background:var(--card2); color:var(--text);
  cursor:pointer; font-family:inherit;
  /* min-width:0 + 截断：手机上按钮文字长一点就会把格子撑破，
     表现是"获取订单""诊断"这类标签被右边界切掉（截图里就是这样） */
  min-width:0; padding:0 10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mbtn:active{transform:scale(.97)}
.mbtn:disabled{opacity:.4}
.mbtn.ok{background:#0d4d3d; border-color:#12705a; color:#d6fff4}
.mbtn.danger{background:#4d1620; border-color:#7a2430; color:#ffd9de}
.mbtn.primary{background:var(--accent); border-color:var(--accent); color:#08101f}
.mbtn.outline{background:transparent; font-size:14px; min-height:42px}

.mstats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.sbox{background:var(--card2); border:1px solid var(--border); border-radius:8px;
  padding:10px 4px; text-align:center; min-width:0}
.sbox b{display:block; font-size:20px; color:var(--accent)}
.sbox span{font-size:11px; color:var(--dim); display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* 键值行：左边名称右边值，比一排只读输入框省一半高度（手机上很要紧） */
.kvit{display:flex; justify-content:space-between; gap:10px; padding:8px 0;
  border-bottom:1px dashed var(--border); font-size:14px}
.kvit:last-child{border-bottom:none}
.kvit i{color:var(--dim); font-style:normal; flex:0 0 auto}
.kvit b{font-weight:600; text-align:right; word-break:break-all; min-width:0}

.msw-row{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 0; border-bottom:1px dashed var(--border)}
.msw-row:last-child{border-bottom:none}
.msw-row span{font-size:14px; font-weight:600}

.mfg{margin-bottom:12px}
.mfg label{display:block; font-size:12px; font-weight:700; color:var(--dim); margin-bottom:4px}
.mfg input,.mfg select{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px;
  font-size:16px; background:var(--card2); color:var(--text); font-family:inherit;
}
.mfg input:focus,.mfg select:focus{outline:none; border-color:var(--accent)}
.mrow2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
/* 三列在手机上每列只剩 ~107px（用户报"编辑框过短"）——改两列，第三个独占整行，
   免得出现"半个宽的输入框"。实测：两列每格 163px，和其它字段一样宽。 */
.mrow3{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.mrow3 > .mfg:nth-child(3){grid-column:1/-1}

.mlog{
  background:#0B0D12; border:1px solid var(--border); border-radius:var(--radius);
  padding:4px 0; max-height:58vh; overflow-y:auto;
}
.mli{display:flex; gap:7px; padding:6px 10px; border-bottom:1px solid #1a1e27;
  font-family:Consolas,ui-monospace,monospace; font-size:12px; align-items:baseline}
.mli .t{color:#64748b; flex:0 0 54px}
.mli .tag{font-size:11px; padding:0 5px; border-radius:3px; flex:0 0 auto}
.mli .msg{color:#cbd5e1; word-break:break-all; white-space:pre-wrap; flex:1}
.mli .cnt{margin-left:5px; color:var(--warn); font-weight:700}
.mli.lv-order .tag{background:#1e3a8a; color:#bfdbfe}
.mli.lv-ok .tag{background:#14532d; color:#86efac}
.mli.lv-ok .msg{color:#4ade80}
.mli.lv-fail .tag{background:#7f1d1d; color:#fecaca}
.mli.lv-err .tag{background:#991b1b; color:#fff}
.mli.lv-warn .tag{background:#78350f; color:#fde68a}
.mli.lv-filter .tag{background:#334155; color:#cbd5e1}
.mli.lv-info .tag{background:#164e63; color:#a5f3fc}

/* 手机端订单卡片：一眼看清"多少钱、什么状态、从哪到哪" */
.mord{
  position:relative; overflow:hidden; background:linear-gradient(180deg,#141d2c,#0f1725);
  border:1px solid #2a3446; border-radius:14px; margin-bottom:12px;
  box-shadow:0 8px 22px rgba(2,6,16,.42);
}
.mord::before{content:''; display:block; height:3px; background:#334155}
.mord.trip::before{background:linear-gradient(90deg,#38bdf8,#6366f1)}
.mord.hall::before{background:linear-gradient(90deg,#c084fc,#7c3aed)}
.mord.won::before{background:linear-gradient(90deg,#6ee7b7,#059669)}
.mord.dim{opacity:.72}
.mord-body{padding:12px 14px 13px}
.mord-head{display:flex; align-items:center; gap:8px}
.mord-price{font-size:24px; font-weight:800; color:#f8fafc; line-height:1; letter-spacing:-.6px}
.mord-price small{font-size:12px; font-weight:700; color:#94a3b8; margin-right:2px}
.mord-state{margin-left:auto; font-size:11px; font-weight:800; padding:4px 11px;
  border-radius:999px; white-space:nowrap; border:1px solid transparent}
.mord-state.won{background:rgba(16,185,129,.16); color:#6ee7b7; border-color:rgba(52,211,153,.42)}
.mord-state.fail{background:rgba(244,63,94,.16); color:#fda4af; border-color:rgba(251,113,133,.42)}
.mord-state.wait{background:rgba(148,163,184,.14); color:#cbd5e1; border-color:rgba(148,163,184,.3)}
.mord-sub{margin-top:6px; font-size:11.5px; color:#94a3b8}
.mord-route{margin-top:10px}
.mord-route p{position:relative; display:flex; gap:10px; align-items:flex-start;
  font-size:13.5px; line-height:1.4; color:#e2e8f0; margin:0; word-break:break-all}
.mord-route p+p{margin-top:6px}
.mord-route p em{flex:0 0 auto; width:9px; height:9px; border-radius:50%; margin-top:4px;
  font-style:normal}
.mord-route .from em{background:#38bdf8; box-shadow:0 0 0 3px rgba(56,189,248,.16)}
.mord-route .to em{background:#0f1725; border:2px solid #94a3b8; box-sizing:border-box}
.mord-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.mord-chips span{background:rgba(255,255,255,.06); border:1px solid #2a3446;
  border-radius:999px; padding:3px 9px; font-size:11px; font-weight:600; color:#cbd5e1}
.mord-foot{display:flex; gap:8px; margin-top:12px}
.mord-foot .mbtn{flex:1 1 0; min-width:0}

/* 左上角的 ☰ 与抽屉菜单：所有页签收进从左侧滑出的竖排菜单里（手机上打开桌面版
   也是同一套）。参考 developer.7cccccc.com 那种：左上角一枚按钮 → 左侧滑出、
   右侧半透明遮罩，当前项高亮。 */
.mmenu{
  flex:none; width:38px; height:38px; border-radius:9px; border:1px solid var(--border);
  background:var(--card2); color:var(--text); font-size:17px; line-height:1;
  cursor:pointer; font-family:inherit; padding:0;
}
.mmenu:active{transform:scale(.95)}
.mdrawer{position:fixed; inset:0; z-index:60; display:none}
.mdrawer.open{display:block}
.mdrawer nav{
  position:absolute; left:0; top:0; bottom:0; width:min(76vw, 286px);
  background:var(--card); border-right:1px solid var(--border);
  box-shadow:8px 0 26px rgba(0,0,0,.55); overflow:auto;
  padding:calc(12px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom));
  animation:drawerIn .18s ease-out;
  /* 必须在遮罩**之上**：两者都是绝对定位，写在后面的遮罩会盖住菜单，
     菜单就变成"看得见点不着"（真实踩过：整页发暗、点菜单没反应） */
  z-index:1;
}
@keyframes drawerIn{from{transform:translateX(-100%)} to{transform:translateX(0)}}
.mdrawer-mask{position:absolute; inset:0; background:rgba(4,6,10,.62); z-index:0}
.mdrawer .dhead{
  font-size:13px; font-weight:800; color:var(--accent); padding:2px 10px 12px;
  border-bottom:1px solid var(--border); margin-bottom:8px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.mdrawer .dhead span{display:block; font-size:11px; font-weight:600; color:var(--dim); margin-top:2px}
.mdrawer nav > div:not(.dhead):not(.dtag):not(.dfoot){
  display:flex; align-items:center; gap:10px; min-height:48px; padding:0 12px;
  border-radius:10px; color:var(--text); font-size:15px; font-weight:600;
  cursor:pointer; user-select:none;
}
.mdrawer nav > div:not(.dhead):not(.dtag):not(.dfoot) b{
  flex:none; width:22px; text-align:center; font-size:17px; font-weight:400; color:var(--dim);
}
.mdrawer nav > div:not(.dhead):not(.dtag):not(.dfoot):active{background:var(--card2)}
.mdrawer nav > div:not(.dhead):not(.dtag):not(.dfoot).on{
  background:rgba(91,141,239,.16); color:var(--accent);
}
.mdrawer nav > div:not(.dhead):not(.dtag):not(.dfoot).on b{color:var(--accent)}
/* 抽屉顶部那行到期时间：**置顶**（用户要求）——它是"这个号还能不能用"，
   最该第一眼看到。整行铺满、居中，跟下面的菜单项区分开。 */
.mdrawer nav > .dtag{
  display:block; min-height:0; padding:0 12px 12px; cursor:default;
}
.mdrawer nav > .dtag .pill{
  width:100%; justify-content:center; min-height:34px; font-size:13px;
}
/* 抽屉底部：管理台（仅管理员）与退出 */
.mdrawer nav > .dfoot{
  display:flex; gap:8px; min-height:0; padding:12px 2px 2px; cursor:default;
  border-top:1px solid var(--border); margin-top:8px;
}
.mdrawer nav > .dfoot .btn{
  flex:1 1 0; min-width:0; justify-content:center; min-height:38px;
}
/* 顶栏里那些只在窄屏出现的东西（☰ 按钮） */
.only-narrow{display:none}
.ver{text-align:center; color:var(--dim); font-size:11px;
  font-family:Consolas,monospace; padding:4px 0 8px}

/* 管理台用户表末尾那列操作按钮：**等宽 3 列**（用户报"后面的按钮没排列整齐"——
   原来是 flex 按内容宽，保存/停用/改密/进入我的前端/删 一个宽一个窄，还换行）。 */
#userBody td.row{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:5px; min-width:252px; align-content:start;
}
#userBody td.row .btn{
  width:100%; min-width:0; justify-content:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 代看横幅（管理员"进入"某个司机的控制台时顶在页面最上方）。
   以前是一条 `#3a2410` 的纯棕条，像坏掉的样式；现在做成紫蓝渐变 + 呼吸灯点 +
   同色系按钮 —— 一眼就知道"现在动的不是自己的账号"，但也不刺眼。 */
.impbar{
  display:flex; align-items:center; gap:10px; padding:9px 18px;
  font-size:13px; color:#EDE9FE;
  background:linear-gradient(90deg, rgba(124,58,237,.34) 0%, rgba(91,141,239,.20) 55%, rgba(15,17,23,0) 100%);
  border-bottom:1px solid rgba(167,139,250,.42);
  box-shadow:0 6px 22px rgba(124,58,237,.18);
  position:sticky; top:0; z-index:30;
}
.impbar b{color:#D8C7FF; font-weight:800; letter-spacing:.3px}
.impbar .dim{color:rgba(237,233,254,.62)}
.impbar .dot{
  width:9px; height:9px; border-radius:50%; flex:none; background:#A78BFA;
  box-shadow:0 0 10px rgba(167,139,250,.9); animation:pulse 1.8s infinite;
}
.impbar .btn{
  background:rgba(167,139,250,.18); border:1px solid rgba(167,139,250,.5);
  color:#EDE9FE; font-weight:600;
}
.impbar .btn:hover{background:rgba(167,139,250,.32); border-color:rgba(196,181,253,.7)}
@media (max-width:860px){
  .impbar{padding:8px 12px; flex-wrap:wrap}
  .impbar .dim{display:none}         /* 手机上省略说明，只留"代看中：谁" + 退出 */
}

/* ---------------- 兼容层：老结构用过的类名 ----------------
   手机端与管理台还按 `.grp/.gt`、`.f/.grid2` 这套写。这里让它们也拿到卡片外观与
   同样的字号，省得两套结构两套样式各走各的（改一处忘一处正是返工的来源）。 */
.grp{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px; margin-bottom:12px;
}
.grp > .gt{
  font-size:14px; font-weight:700; color:var(--accent);
  margin:0 0 10px; display:flex; align-items:center; gap:6px;
}
.grp > .gt::before{content:''; width:3px; height:15px; background:var(--accent); border-radius:2px}
.f{display:flex; flex-direction:column; gap:4px; min-width:0}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.inline{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px}
.inline label{display:flex; align-items:center; gap:4px; font-size:13px; white-space:nowrap}
.inline input[type=checkbox]{width:auto; margin:0}
input.num{width:100%; min-width:0}
.sub{font-size:12px; color:var(--text); margin:6px 0 4px; font-weight:700}
.hint{font-size:12px; color:var(--dim); margin-top:6px; line-height:1.45}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.row.wrap{flex-wrap:wrap}
.kpi{display:flex; gap:16px; padding:0 0 10px; flex-wrap:wrap}
.kpi .k{display:flex; flex-direction:column; align-items:flex-start}
.kpi .k b{font-size:20px; color:var(--accent)}
.kpi .k span{font-size:11px; color:var(--dim)}
/* 管理台沿用了三栏骨架（左侧页签 + 右侧内容） */
.col{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); display:flex; flex-direction:column; min-height:0}
.col.left{width:200px; flex:none}
.col.mid{flex:1; min-width:0}
.col-head{display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border)}
.col-head h2{font-size:14px; margin:0; color:var(--accent)}
.col-body{overflow:auto; padding:14px; flex:1; min-height:0}
.tabs{display:flex; gap:4px; padding:10px 10px 0; flex-wrap:wrap}
.tabs button{
  background:transparent; border:1px solid transparent; color:var(--dim);
  border-bottom:2px solid transparent; padding:6px 10px; cursor:pointer; font-size:13px;
  border-radius:6px;
}
.tabs button.on{color:var(--text); border-color:var(--border); border-bottom-color:var(--accent)}
/* 设置 tab 的面板容器：显隐由 .hidden 控制（.hidden 带 !important，压得住 flex） */
.pane{display:flex; flex-direction:column; gap:12px}

/* ================= 登录页 =================
   布局照 didi_worker/templates/login.html 对齐：品牌名在卡片上方、卡片内顶部两个 tab
   （登录 / 注册）切面板、报错显示在**卡片里**（#msg，红/绿两色）而不是飘一个 toast、
   提交中按钮置灰。

   **配色改成深色**（用户要求："这个页面改成黑色，和里面风格一样"）：以前这里另起了一套
   浅色变量（白卡片 + 蓝按钮），和进去之后的控制台完全是两个世界 —— 点个登录像换了
   个软件。现在直接复用控制台那套变量（--bg/--card/--accent），只有登录页自己的
   圆角与间距是特例。 */
body.login-body{
  background:var(--bg); color:var(--text);
  /* 科技感背景（用户要求："别纯黑"）：四层叠出来，全是 CSS，不引任何图片 ——
     ① 顶部一片冷蓝光晕（视线自然落到卡片上）
     ② 右下角一点青色余晖（和"有效/成功"那个 --ok 同色系）
     ③ 34px 网格（工程图纸那种质感，透明度压到 6% 只当底纹）
     ④ 斜向深色渐变收底（比纯黑有层次，长时间看不累） */
  background-image:
    radial-gradient(1100px 620px at 50% -12%, rgba(91,141,239,.20), transparent 62%),
    radial-gradient(760px 520px at 88% 112%, rgba(0,217,163,.10), transparent 60%),
    linear-gradient(rgba(91,141,239,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,141,239,.06) 1px, transparent 1px),
    linear-gradient(158deg, #0B0E14 0%, #0F1117 46%, #090B10 100%);
  background-size:auto, auto, 34px 34px, 34px 34px, auto;
  background-attachment:fixed;
  position:relative; overflow:hidden;
}
/* 一道缓慢游走的扫描光（14 秒一轮，纯装饰，不吃点击） */
body.login-body::before{
  content:''; position:fixed; inset:-30%; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side, rgba(91,141,239,.16), transparent 72%);
  animation:sweep 16s ease-in-out infinite alternate;
}
@keyframes sweep{
  from{transform:translate3d(-16%,-10%,0) scale(1)}
  to{transform:translate3d(16%,12%,0) scale(1.15)}
}
.login-wrap{
  --l-bg:transparent; --l-card:var(--card); --l-primary:var(--accent);
  --l-primary-dark:#4a76cc;
  --l-border:var(--border); --l-text:var(--text); --l-text2:var(--dim);
  --l-green:var(--ok); --l-red:var(--err);
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:16px;
  background:transparent; color:var(--l-text);
}
.login-wrap .lwrap{width:100%; max-width:380px}
.login-wrap .brand{
  font-size:22px; font-weight:700; text-align:center; margin-bottom:16px;
  color:var(--text); letter-spacing:1px;
  text-shadow:0 0 22px rgba(91,141,239,.45);
}
.login-wrap .brand span{color:var(--l-primary)}
.login-wrap .lcard{
  /* 玻璃卡片：半透明 + 模糊 + 一道冷色描边，压在网格背景上才有"浮起来"的感觉 */
  background:rgba(23,26,35,.86);
  border:1px solid rgba(91,141,239,.22); border-radius:12px;
  padding:20px;
  backdrop-filter:blur(7px);
  box-shadow:0 22px 70px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.04);
}
.login-wrap .ltabs{display:flex; gap:8px; margin-bottom:16px}
.login-wrap .ltabs button{
  flex:1; padding:9px 0; border:1px solid var(--l-border); background:var(--card2);
  border-radius:8px; font-size:14px; font-weight:600; color:var(--l-text2); cursor:pointer;
  font-family:inherit;
}
.login-wrap .ltabs button.on{background:var(--l-primary); border-color:var(--l-primary); color:#fff}
.login-wrap label{display:block; font-size:12px; font-weight:600; color:var(--l-text2); margin-bottom:4px}
.login-wrap input{
  width:100%; padding:11px 12px; border:1px solid var(--l-border); border-radius:8px;
  font-size:16px; background:var(--bg); margin-bottom:12px; color:var(--l-text);
}
.login-wrap input::placeholder{color:#6b7280}
.login-wrap input:focus{outline:none; border-color:var(--l-primary); box-shadow:0 0 0 2px rgba(91,141,239,.22)}
.login-wrap .lbtn{
  width:100%; padding:12px; border:none; border-radius:8px; background:var(--l-primary);
  color:#fff; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit;
}
.login-wrap .lbtn:hover{background:var(--l-primary-dark)}
.login-wrap .lbtn:active{transform:scale(.99)}
.login-wrap .lbtn:disabled{opacity:.5; cursor:not-allowed}
.login-wrap .lmsg{margin-top:12px; font-size:13px; min-height:19px; color:var(--l-red); word-break:break-all}
.login-wrap .lmsg.ok{color:var(--l-green)}
.login-wrap .lhint{margin-top:14px; font-size:12px; color:var(--l-text2); text-align:center; line-height:1.7}
.login-wrap .lhint b{color:var(--l-primary)}