/* =====================================================================
   app.css —— 深色侧栏 + 浅色内容 · 黑白灰高端风
   ===================================================================== */

:root{
  /* 内容区（浅色） */
  --ink:#1a1a2e;          /* 主文字 */
  --ink-2:#4a4a6a;        /* 次级文字 */
  --ink-3:#8a8aa0;        /* 辅助文字 */
  --line:#e8e8f0;         /* 边线 */
  --line-2:#f0f0f8;       /* 极淡分割线 */
  --bg:#f0f2f8;           /* 页面底 */
  --soft:#f8f9fc;         /* 极淡灰底 */
  --muted:#a0a0b8;        /* 占位 / 禁用 */

  /* 主色（蓝绿渐变） */
  --primary:#4f6ef7;
  --primary-hover:#3d5bd9;
  --primary-light:#e8ecff;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;

  /* 侧栏（深蓝紫） */
  --side-bg:linear-gradient(180deg,#1e1e3f 0%,#2d2d5f 100%);
  --side-ink:#f0f0ff;
  --side-ink-2:#9c9cc0;
  --side-line:rgba(255,255,255,.08);
  --side-hover:rgba(255,255,255,.08);
  --side-active:var(--primary);

  /* 兼容变量 */
  --border:var(--line);
  --orange:var(--warning);
  --blue:var(--primary);
  --red:var(--danger);
  --green:var(--success);
  --warn:var(--warning);

  /* 圆角 / 阴影 */
  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 2px 8px rgba(79,110,247,.08);
  --shadow:0 4px 16px rgba(79,110,247,.1),0 12px 40px rgba(79,110,247,.12);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
button{cursor:pointer;font-family:inherit}
input,select,textarea{
  font-family:inherit;font-size:13px;padding:8px 12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;color:var(--ink);outline:none;width:100%;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,20,22,.06)}
::placeholder{color:var(--muted)}
a{color:var(--ink)}

/* ============== 按钮 ============== */
.btn{
  border:none;border-radius:var(--radius-sm);
  padding:8px 18px;font-size:13px;
  background:linear-gradient(135deg,var(--primary) 0%,#6d8dff 100%);color:#fff;
  transition:all .2s;white-space:nowrap;font-weight:500;
  box-shadow:0 2px 8px rgba(79,110,247,.3);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(79,110,247,.4);filter:brightness(1.05)}
.btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(79,110,247,.3)}
.btn.ghost{background:#fff;color:var(--primary);border:1px solid var(--primary-light);box-shadow:none}
.btn.ghost:hover{background:var(--primary-light);box:none;transform:none}
.btn.gray{background:#fff;color:var(--ink-2);border:1px solid var(--line);box-shadow:none}
.btn.gray:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light);box-shadow:none;transform:none}
.btn.danger{background:#fff;color:var(--danger);border:1px solid #fee2e2;box-shadow:none}
.btn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger);box-shadow:0 4px 12px rgba(239,68,68,.3)}
.btn.red{background:linear-gradient(135deg,var(--danger) 0%,#f87171 100%);color:#fff;border:none;box-shadow:0 2px 8px rgba(239,68,68,.3)}
.btn.sm{padding:5px 12px;font-size:12px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* 查券中心保留的 b / txt 类 */
.btn.b{background:linear-gradient(135deg,var(--primary) 0%,#6d8dff 100%);color:#fff;border:none;box-shadow:0 2px 8px rgba(79,110,247,.3)}
.btn.b:hover{filter:brightness(1.05);box-shadow:0 4px 12px rgba(79,110,247,.4)}
.btn.b:disabled{background:#e0e0e0;box-shadow:none;cursor:not-allowed}
.btn.txt{background:none;border:none;color:var(--primary);padding:6px 8px;font-size:13px;text-decoration:none;box-shadow:none}
.btn.txt:hover{text-decoration:underline;background:none}

/* ============== 查券中心工具条 ============== */
.cq-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.cq-bar .sep{width:1px;height:20px;background:var(--line);margin:0 2px}
.cq-filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.cq-filters .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.cq-filters .row:last-child{margin-bottom:0}
.cq-filters input,.cq-filters select{width:auto;min-width:120px}
.cur-filter{font-size:12px;color:var(--ink-3);padding:6px 2px 0}
.cur-filter b{color:var(--ink);font-weight:600}

/* 品牌下拉 */
.brand-select{position:relative;display:inline-block;min-width:200px}
.bs-btn{width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;display:flex;justify-content:space-between;align-items:center;color:var(--ink-2);transition:.15s}
.bs-btn:hover{border-color:var(--ink)}
.bs-panel{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:20;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:280px;max-height:340px;overflow:auto;padding:8px}
.bs-panel.show{display:block}
.bs-panel input{margin-bottom:6px}
.bs-item{padding:8px 11px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--ink-2);transition:.12s}
.bs-item:hover{background:var(--soft)}
.bs-item.on{background:var(--ink);color:#fff;font-weight:600}
.bs-acts{display:flex;align-items:center;gap:6px;padding:0 2px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.bs-item .bs-ck{display:inline-block;width:15px;margin-right:6px}
.bs-item.off{color:#bbb}
.bs-meta{font-size:11px;color:var(--ink-3);margin-left:6px}
.bs-item.on .bs-meta{color:rgba(255,255,255,.7)}

/* ============== 表格 ============== */
.table-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:auto;box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;min-width:1000px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-2);font-size:13px;white-space:nowrap}
th{background:var(--soft);color:var(--ink-2);font-weight:600;position:sticky;top:0;z-index:1;letter-spacing:.3px}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:#fafafb}
td.wrap{white-space:normal;min-width:110px}

/* ============== 标签（黑白极简） ============== */
.tag{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;line-height:20px;border:1px solid transparent;font-weight:500}
.tag.g{background:#fff;color:var(--ink);border-color:var(--ink)}          /* 成功/有效 */
.tag.r{background:var(--ink);color:#fff;border-color:var(--ink)}          /* 危险/封禁 */

/* 「同时删除用户端」常驻开关（链接状态 / 订单管理工具栏）：未开=描边，打开=黑底反白，一眼可见 */
.chip-affect{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  border:1px solid var(--line);border-radius:999px;background:transparent;
  font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;user-select:none;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.chip-affect:hover{border-color:var(--ink);color:var(--ink)}
.chip-affect.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip-affect.on:hover{color:#fff}
.chip-affect input{width:auto;margin:0;accent-color:var(--ink)}
.tag.b{background:var(--soft);color:var(--ink);border-color:var(--line)}  /* 信息 */
.tag.o{background:#fff;color:var(--ink-2);border-color:var(--ink-3)}      /* 待处理 */
.tag.gy{background:var(--soft);color:var(--ink-3);border-color:var(--line)}/* 中性/已用 */

.mono{font-family:"SF Mono",Consolas,"JetBrains Mono",monospace;font-size:12px}
.empty{text-align:center;color:var(--ink-3);padding:44px 0;font-size:13px}
.empty .ic{font-size:40px;display:block;margin-bottom:10px;opacity:.35}

/* ============== 面板 ============== */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.panel-head h3{font-size:15px;font-weight:600}

/* 进度条 */
.bar{width:80px;height:6px;background:var(--line-2);border-radius:4px;overflow:hidden;display:inline-block;vertical-align:middle}
.bar i{display:block;height:100%;background:var(--ink);transition:.3s}
.bar.err i{background:var(--ink);opacity:.4}

/* ============== 登录页 ============== */
#loginView{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:20px}
.login-box{
  background:#fff;border:none;border-radius:20px;
  padding:48px 44px;width:420px;max-width:92vw;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.login-box .brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:24px}
.login-box .brand .mark{
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg,var(--primary) 0%,#6d8dff 100%);color:#fff;
  font-size:26px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(79,110,247,.4);
}
.login-box h1{font-size:24px;text-align:center;margin-bottom:6px;font-weight:700;letter-spacing:1px}
.login-box .sub{text-align:center;color:var(--ink-3);font-size:13px;margin-bottom:28px}
.login-box input{margin-bottom:14px;text-align:left;letter-spacing:0.5px;padding:13px 16px;border:1px solid var(--line);border-radius:10px;transition:.2s}
.login-box input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,110,247,.15)}
.login-box .btn{width:100%;padding:13px;font-size:15px;border-radius:10px;margin-top:6px}
.login-tip{margin-top:20px;font-size:12px;color:var(--ink-3);text-align:center;line-height:1.8}

/* ============== 布局（深色侧栏 + 浅色内容） ============== */
#appView{display:none;min-height:100vh}
.layout{display:flex;min-height:100vh}
.sidebar{
  width:220px;background:var(--side-bg);color:var(--side-ink);
  display:flex;flex-direction:column;flex-shrink:0;border-right:1px solid var(--side-line);
}
.logo{
  padding:20px 18px 18px;border-bottom:1px solid var(--side-line);
  display:flex;align-items:center;gap:12px;
}
.logo-mark{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:#fff;color:var(--ink);font-weight:700;font-size:19px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.logo-txt{min-width:0;display:flex;flex-direction:column}
.logo-name{color:var(--side-ink);font-size:15px;font-weight:600;letter-spacing:.5px;line-height:1.3;white-space:nowrap}
.logo-sub{color:var(--side-ink-2);font-size:11px;letter-spacing:1.5px;margin-top:2px}
.nav{flex:1;padding:12px 0;overflow-y:auto}
.nav-item{
  display:block;width:calc(100% - 20px);text-align:left;background:none;border:none;
  color:var(--side-ink-2);padding:11px 14px;font-size:14px;
  border-radius:9px;margin:2px 10px;transition:all .15s;
}
.nav-item:hover{background:var(--side-hover);color:var(--side-ink)}
.nav-item.active{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.logout-wrap{padding:14px 16px;border-top:1px solid var(--side-line)}
.logout-wrap .btn{width:100%;background:transparent;color:var(--side-ink-2);border:1px solid var(--side-line);border-radius:var(--radius-sm)}
.logout-wrap .btn:hover{background:var(--side-hover);color:#fff;border-color:var(--side-ink-2);box-shadow:none;transform:none}

.main{flex:1;padding:20px 24px;min-width:0;background:var(--bg);max-width:100%}
.topbar{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:10px;
  flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line);
}
.topbar h2{font-size:19px;font-weight:700;letter-spacing:.3px}
.mob-menu{display:none;background:#fff;border:1px solid var(--ink);color:var(--ink);border-radius:var(--radius-sm);padding:7px 14px;font-size:16px}

/* ============== 看板 ============== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;transition:all .18s;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ink);opacity:0;transition:opacity .18s}
.stat-card:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-card:hover::before{opacity:1}
.stat-card .num{font-size:30px;font-weight:700;color:var(--ink);margin-top:8px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.stat-card .lbl{color:var(--ink-3);font-size:13px;font-weight:500}
.chart-wrap{display:flex;align-items:flex-end;gap:14px;height:170px;padding:0 6px}
.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.chart-bar{width:70%;max-width:40px;background:var(--ink);border-radius:5px 5px 0 0;min-height:4px;transition:height .3s}
.chart-col .v{font-size:12px;color:var(--ink);font-weight:600}
.chart-col .d{font-size:11px;color:var(--ink-3)}

/* ============== 弹窗 ============== */
.modal-mask{display:none;position:fixed;inset:0;background:rgba(20,20,22,.4);z-index:50;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)}
.modal{background:#fff;border-radius:14px;width:500px;max-width:100%;max-height:88vh;overflow:auto;padding:26px;border:1px solid var(--line);box-shadow:0 24px 64px rgba(0,0,0,.2)}
.modal.wide{width:680px}
.modal h3{margin-bottom:16px;font-size:16px;font-weight:700;padding-bottom:12px;border-bottom:1px solid var(--line);letter-spacing:.3px}
.form-item{margin-bottom:14px}
.form-item label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:6px;font-weight:500}
.form-item .req::after{content:" *";color:var(--ink)}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.link-box{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;font-size:12px;word-break:break-all;font-family:Consolas,monospace;margin-top:6px}
#toast{position:fixed;top:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 22px;border-radius:999px;font-size:14px;z-index:99;display:none;max-width:88vw;letter-spacing:.3px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
#sideMask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:39}

/* 账号配置（品牌卡片）：桌面一行放下；手机竖排，按钮另起一行，避免品牌名被挤变形 */
.acc-item{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:8px}
.acc-ck{width:auto;margin-top:3px;flex-shrink:0}
.acc-main{min-width:0;flex:1}
.acc-name{font-weight:600;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.acc-meta{font-size:12px;color:var(--muted);word-break:break-all;margin-top:3px}
.acc-acts{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}

/* ============== 响应式 ============== */
@media (max-width:900px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .sidebar{position:fixed;left:-230px;top:0;bottom:0;z-index:40;transition:.25s;box-shadow:4px 0 24px rgba(0,0,0,.3)}
  .sidebar.open{left:0}
  .mob-menu{display:inline-block}
  .main{padding:16px}
  .cq-filters input,.cq-filters select{flex:1;min-width:0}
}

/* 手机端（≤640px）：工具栏换行、弹窗收窄、表格横向滚动、品牌卡片竖排 */
@media (max-width:640px){
  body{overflow-x:hidden}          /* 防止任何元素撑出横向滚动条 */
  .main{padding:12px}
  .topbar{margin-bottom:14px;padding-bottom:12px}
  .topbar h2{font-size:17px}
  .cq-bar{gap:6px}
  .cq-bar .btn{padding:7px 12px}
  .cq-filters{padding:12px}

  /* 弹窗：贴边、按钮铺满，方便单手点 */
  .modal-mask{padding:10px;align-items:flex-start}
  .modal{padding:18px;max-height:92vh;margin-top:6px}
  .modal.wide{width:100%}
  .modal h3{font-size:15px;margin-bottom:12px;padding-bottom:10px}
  .modal-foot{flex-wrap:wrap;gap:8px}
  .modal-foot .btn{flex:1;min-width:96px}

  /* 表格：允许横向滑动（列多时不再挤压变形） */
  .table-wrap{-webkit-overflow-scrolling:touch}
  table{min-width:720px}
  th,td{padding:9px 11px;font-size:12.5px}

  /* 账号配置品牌卡片：名字/标签独占一行，按钮换到下一行左对齐 */
  .acc-item{flex-wrap:wrap}
  .acc-main{flex:1 1 0}                      /* 复选框 + 品牌名同一行 */
  .acc-acts{flex:0 0 100%;justify-content:flex-start}
  .acc-acts .btn{flex:1 1 auto}

  /* 品牌下拉面板不要超出屏幕 */
  .brand-select{min-width:150px}
  .bs-panel{min-width:0;width:88vw;max-width:340px;left:0}

  /* 看板 */
  .stat-grid{gap:10px}
  .stat-card{padding:14px 16px}
  .stat-card .num{font-size:24px}
  .chart-wrap{gap:8px;height:150px}
  .chart-col .d{font-size:10px}

  /* 登录页 */
  .login-box{padding:30px 22px}
  .login-box h1{font-size:19px}
}


/* ============== 流畅动画优化 ============== */

/* 页面淡入 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

#pageBody {
  animation: fadeIn 0.1s ease-out;
}

/* 按钮点击效果 */
.btn {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:active {
  transform: scale(0.97);
}

/* 卡片悬停 */
.card {
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: 0 6px 20px rgba(79, 110, 247, 0.12);
}

/* 表格行悬停 */
tbody tr {
  transition: all 0.12s ease;
}

tbody tr:hover {
  background: #f5f7ff;
}

/* 菜单选中 */
.nav-item {
  transition: all 0.2s ease;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(2px);
}

/* 输入框聚焦 */
input, select, textarea {
  transition: all 0.15s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.1);
  outline: none;
}

/* 加载动画 */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #e0e0e0;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ===== 变量补丁（让修复后的 app-core.js 在浅色主题下也正常，与管理端深色版变量名保持一致） ===== */
:root{
  --panel:#ffffff;
  --panel-solid:#ffffff;
  --field-bg:#ffffff;
  --toast-bg:#141416;
  --track:#e8e8f0;
}