/* SMMGo Panel 控制台样式(客户面板 /app、管理后台 /admin、登录 / 重置密码)。
 *
 * 【为什么单独一份,不改 site.css】site.css 也给首页、平台落地页和博客用,那些页在排名,
 * 视觉一起变风险大。这份只在 body.console 下生效,叠在 site.css 后面加载。
 *
 * 【方向】2026-10-21 照 DapatOTP 同日的改版做(老板验收「非常满意」):去掉紫色渐变按钮、
 * 大圆角浮卡、软阴影;品牌色跟 logo 走(靛蓝 #4341F7 + 亮蓝 #087DF8),深色侧栏做骨架,
 * 内容靠细线和密度分层,金额/数量/订单号用等宽字。两个站结构一样,颜色和字体各走各的品牌。
 */

/* 字体自己托管(public/fonts/),不走 Google Fonts:_middleware.js 的 CSP 只允许同源字体和样式表,
   放开第三方域名等于给安全加固开口子。只带拉丁子集,中文走系统字体。 */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500 800;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/fonts/jetbrains-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

body.console{
  --bg:#F4F4F9;
  --bg2:#F7F7FB;          /* 内凹面:输入框底、表头、工具条 */
  --card:#FFFFFF;
  --line:#E1E0EB;
  --line2:#EEEDF4;
  --txt:#14123A;
  --ink:#14123A;
  --dim:#5E5C7F;          /* 白底 5.9:1 */
  --faint:#8C8AA8;
  --acc:#4338E8;          /* logo 靛蓝压暗一档,白字 6.6:1 */
  --acc-h:#3427D1;
  --acc-soft:#EFEEFF;
  --acc-line:#CFCBFF;
  --cyan:#087DF8;
  --nav:#13103A;
  --nav2:#251F63;
  --nav-txt:#B5B3DC;
  --ok:#0E7A3E; --ok-bg:#E7F6EC; --ok-line:#B5E2C4;
  --warn:#A65A00; --warn-bg:#FFF4E0; --warn-line:#F5D59A;
  --err:#C81E1E; --err-bg:#FDECEC; --err-line:#F5C2C2;
  --radius:10px;
  --shadow:none; --shadow-sm:none;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --side-w:252px;
  font:14px/1.6 var(--sans);
  color:var(--txt);background:var(--bg);
}
body.console h1,body.console h2,body.console h3{letter-spacing:-.2px}
body.console a{color:var(--acc)}
.console .mono,.console code{font-family:var(--mono)}
.console .num-t{font-variant-numeric:tabular-nums}

/* ───────── 外框:左侧深色导航 + 右侧内容 ───────── */
.snav{position:fixed;top:0;left:0;bottom:0;width:var(--side-w);z-index:35;
  background:var(--nav);color:var(--nav-txt);display:flex;flex-direction:column;
  border-right:1px solid #08061F}
/* 侧栏底部那一点点蓝光:深色面不至于死板,也呼应 logo 的渐变 —— 只在边角,不铺满 */
.snav::after{content:'';position:absolute;left:0;right:0;bottom:0;height:220px;pointer-events:none;
  background:radial-gradient(120% 90% at 0% 100%,rgba(67,56,232,.20),transparent 70%)}
.snav-logo{display:flex;align-items:center;gap:8px;padding:20px 20px 16px}
.snav-logo img{height:32px;width:auto;display:block;max-width:100%}
/* SMMGo 的字标比较宽,后台的 ADMIN 角标放到 logo 下面一行,不然会挤出侧栏 */
.snav-logo:has(.role){flex-direction:column;align-items:flex-start;gap:8px}
.snav-logo .role{font:700 10.5px/1 var(--sans);letter-spacing:.8px;text-transform:uppercase;
  color:#9C9AFF;border:1px solid #2A3E7A;border-radius:4px;padding:4px 6px}

/* 侧栏余额块:客户每次进来先看的数字 */
.sbal{margin:4px 14px 14px;padding:14px 14px 12px;border-radius:10px;
  background:linear-gradient(160deg,#211C5A,#1A1650);border:1px solid #2E2873;position:relative;z-index:1}
.sbal .k{font-size:11.5px;color:#9593C4;display:flex;justify-content:space-between;align-items:center}
.sbal .v{font:700 24px/1.25 var(--mono);color:#fff;margin:4px 0 10px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.sbal .btn{width:100%;height:34px;font-size:13px}
.sbal .live{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:#7FE0A8}
.sbal .live::before{content:'';width:6px;height:6px;border-radius:50%;background:#34D27B;box-shadow:0 0 0 3px rgba(52,210,123,.18)}

.snav nav{flex:1;overflow-y:auto;padding:4px 10px 10px;position:relative;z-index:1}
.snav .grp{font:700 10.5px/1 var(--sans);letter-spacing:.9px;text-transform:uppercase;color:#5D5A92;
  padding:16px 10px 8px}
.snav .tab,.snav nav a{appearance:none;display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 10px;margin:1px 0;border:0;border-radius:7px;background:none;cursor:pointer;
  font:600 13.5px/1.3 var(--sans);color:var(--nav-txt);text-align:left;text-decoration:none;position:relative}
.snav .tab:hover,.snav nav a:hover{background:rgba(255,255,255,.05);color:#fff;text-decoration:none}
.snav .tab.on,body.console .snav .tab.on{background:var(--nav2);color:#fff;border-bottom:0}
.snav .tab.on::before{content:'';position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#2F8CFF}
.snav .tab svg,.snav nav a svg{width:18px;height:18px;flex:none;opacity:.85}
.snav .tab.on svg{opacity:1;color:#7FA8FF}
.snav .badge{margin-left:auto;min-width:19px;padding:0 6px;border-radius:99px;background:#E5484D;color:#fff;
  font:700 11px/19px var(--sans);text-align:center}
.snav-foot{padding:12px 14px 16px;border-top:1px solid #221D57;display:flex;align-items:center;gap:8px;
  position:relative;z-index:1}
.snav-foot .who{flex:1;min-width:0;font-size:12px;color:#9593C4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snav-foot .langsw-btn{background:transparent;border-color:#332C78;color:#AEB8D3}
.snav-foot .langsw-menu{top:auto;bottom:calc(100% + 6px);left:0;right:auto}
.snav-foot .iconbtn{color:#AEB8D3;border-color:#332C78;background:transparent}
.snav-foot .iconbtn:hover{color:#fff;border-color:#4D4699}

/* 桌面端:原来的顶栏变成内容区顶上的一条细栏(页面标题 + 右侧小工具) */
@media (min-width:901px){
  body.console{padding-left:var(--side-w)}
  body.console > header{background:rgba(242,244,248,.92);border-bottom:1px solid var(--line)}
  body.console > header .hwrap{max-width:1280px;padding:14px 32px;min-height:62px}
  body.console > header .logo{display:none}
  body.console > header .burger{display:none}
  body.console > header .balchip{display:none}
  body.console main{max-width:1280px;padding:24px 32px 64px}
}
.ptitle{font:750 19px/1.2 var(--sans);color:var(--ink);margin:0;letter-spacing:-.3px}
.ptitle small{display:block;font:500 12px/1.4 var(--sans);color:var(--dim);letter-spacing:0;margin-top:2px}

/* 手机:侧栏收起,沿用 site.css 的顶栏 + 抽屉 + 底部导航 */
@media (max-width:900px){
  .snav{display:none}
  body.console > header{background:var(--nav);border-bottom:0}
  body.console > header .logo img{content:url(/logo-white@2x.png);height:30px}
  body.console > header .ptitle{display:none}
  body.console > header .burger{display:inline-flex;border-color:#332C78}
  body.console > header .burger span,
  body.console > header .burger span::before,
  body.console > header .burger span::after{background:#fff}
  body.console > header .burger.on span{background:transparent}
  body.console .balchip{background:#211C5A;border:1px solid #332C78;color:#9593C4;border-radius:8px;padding:5px 10px}
  body.console .balchip b{color:#fff;font-family:var(--mono);font-weight:700}
  body.console .hide-sm{display:none !important}
  body.console main{padding:16px 14px calc(var(--tabbar-h) + 30px)}
  body.console .tabbar{display:block}
  .mtitle{display:block;font:750 18px/1.25 var(--sans);margin:2px 0 14px;color:var(--ink)}
}
@media (min-width:901px){ .mtitle{display:none} }

body.console .hlink{font-size:13px;font-weight:600}

/* ───────── 卡片 / 区块 ───────── */
body.console .card{border-radius:var(--radius);box-shadow:none;border:1px solid var(--line);padding:20px 22px;margin-bottom:16px}
body.console .card > h2,body.console .chead h2{font:750 15px/1.35 var(--sans);margin:0 0 3px;color:var(--ink)}
body.console .card > h3{font:700 13px/1.4 var(--sans);color:var(--ink);margin:0 0 8px}
body.console .lead{font-size:13px;color:var(--dim);margin:0 0 14px;line-height:1.55}
body.console .note{font-size:12.5px;line-height:1.6}
.chead{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.chead > div:first-child{flex:1;min-width:0}
.chead .lead{margin:2px 0 0}
body.console .card.flush{padding:0;overflow:hidden}
body.console .card.flush > .chead{padding:18px 22px 0}

/* ───────── 表单 / 按钮 ───────── */
body.console label{font:650 12.5px/1.3 var(--sans);color:var(--txt);margin:14px 0 6px}
body.console input,body.console select,body.console textarea{border-radius:7px;border:1px solid #D5DAE4;
  padding:9px 12px;font-size:14px;background:#fff;transition:border-color .12s,box-shadow .12s}
body.console input:hover,body.console select:hover,body.console textarea:hover{border-color:#B9C1D2}
body.console input:focus,body.console select:focus,body.console textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(67,56,232,.14)}
body.console input[readonly]{background:var(--bg2)}

body.console .btn{background:var(--acc);border-radius:7px;box-shadow:none;font:700 13.5px/1 var(--sans);
  height:38px;padding:0 16px;letter-spacing:.1px;transition:background .12s,border-color .12s,color .12s}
body.console .btn:hover:not(:disabled){background:var(--acc-h);filter:none;box-shadow:none}
body.console .btn:active:not(:disabled){transform:translateY(1px)}
body.console .btn.ghost{background:#fff;border:1px solid #D5DAE4;color:var(--txt)}
body.console .btn.ghost:hover:not(:disabled){background:var(--bg2);border-color:#B9C1D2;color:var(--ink)}
body.console .btn.sm{height:30px;padding:0 11px;font-size:12.5px;border-radius:6px}
body.console .btn.dark{background:var(--nav);color:#fff}
body.console .btn.dark:hover:not(:disabled){background:#211C5A}
body.console .btn.danger{background:#fff;border:1px solid var(--err-line);color:var(--err)}
body.console .btn.danger:hover:not(:disabled){background:var(--err-bg)}
body.console .btn.wa{background:#1FAF57;color:#fff}
body.console .btn.wa:hover:not(:disabled){background:#178F46}
body.console .btn.full{width:100%}
.iconbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:6px;border:1px solid #D5DAE4;background:#fff;color:var(--dim);cursor:pointer;flex:none;padding:0}
.iconbtn:hover{color:var(--ink);border-color:#B9C1D2}
.iconbtn svg{width:15px;height:15px}

/* ───────── 页签(手机上没有侧栏时,页内二级页签用) ───────── */
body.console .tab.on{color:var(--acc);border-bottom-color:var(--acc)}

/* ───────── 表格 ───────── */
body.console table{font-size:13px}
body.console th{background:none;font:650 11.5px/1.3 var(--sans);text-transform:none;letter-spacing:0;color:var(--dim);
  border-bottom:1px solid var(--line);padding:9px 10px}
body.console td{padding:11px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
body.console tbody tr:last-child td{border-bottom:0}
body.console tbody tr:hover{background:#F8FAFD}
body.console td.mono,body.console td .mono{font-size:12.5px}
body.console .card.flush .tablewrap{border-top:1px solid var(--line)}
body.console .card.flush th:first-child,body.console .card.flush td:first-child{padding-left:22px}
body.console .card.flush th:last-child,body.console .card.flush td:last-child{padding-right:22px}

/* ───────── 状态标签:小方角、浅底深字、前面一个色点 ───────── */
body.console .tag{border-radius:5px;padding:2px 8px 2px 7px;font:650 11.5px/1.6 var(--sans);
  display:inline-flex;align-items:center;gap:5px;background:#EEF1F6;color:#46506A}
body.console .tag::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
body.console .t-completed{background:var(--ok-bg);color:var(--ok)}
body.console .t-inprogress,body.console .t-processing,body.console .t-pending{background:var(--acc-soft);color:#3A2FC9}
body.console .t-partial{background:var(--warn-bg);color:var(--warn)}
body.console .t-canceled,body.console .t-failed{background:#F1F2F5;color:#5B6478}
body.console .t-review{background:#FCEBF3;color:#A3195B}

/* ───────── 提示条:白底 + 左侧色条 ───────── */
body.console .banner{background:#fff;border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:8px;
  color:var(--txt);padding:11px 14px;font-size:13px}
body.console .banner.warn{border-left-color:#E59A1A;background:#FFFBF2;border-color:#F3E2BC;color:#5C3A00}
body.console .banner.err{border-left-color:var(--err);background:#FFF6F6;border-color:var(--err-line);color:#7A1111}
body.console .banner.ok{border-left-color:var(--ok);background:#F5FBF7;border-color:var(--ok-line);color:#0B5A2E}

/* ───────── 统计格:一组数字一个框,格子之间细线分隔 ───────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
/* 格线画在每格的右边和下边,再用负 margin 把最右一列、最下一行的线推出框外,
   这样不管最后一行剩几格都不会露出一块灰底 */
.kpis .stat,body.console .kpis .stat{background:#fff;border:0;border-radius:0;padding:15px 18px 14px;
  box-shadow:inset -1px 0 0 var(--line2),inset 0 -1px 0 var(--line2);margin:0 -1px -1px 0}
body.console .stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
body.console .stat .k{font:600 12px/1.3 var(--sans);text-transform:none;letter-spacing:0;color:var(--dim)}
body.console .stat .v{font:700 22px/1.3 var(--mono);letter-spacing:-.6px;margin-top:6px;color:var(--ink);font-variant-numeric:tabular-nums}
body.console .stat .v.ok{color:var(--ok)}
body.console .stat .v.warn{color:var(--warn)}
body.console .stat .v.err{color:var(--err)}
body.console .stat .s{font-size:11.5px;color:var(--faint);margin-top:2px}

/* ───────── 报价条 ───────── */
body.console .quote{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:12px 15px}
body.console .quote b{font-family:var(--mono)}
body.console .quote .big{color:var(--ink);font-size:18px}

/* ───────── 空状态:线稿插图,不用 emoji ───────── */
body.console .empty{padding:36px 16px}
body.console .empty-ico{opacity:1;margin:0 auto 12px;width:76px;height:76px;color:#AEB9D0}
body.console .empty-ico svg{width:76px;height:76px}
body.console .empty-t{font-weight:700;font-size:14.5px}

/* ───────── 弹窗 / toast ───────── */
body.console dialog{border-radius:12px;border:1px solid var(--line);box-shadow:0 24px 60px rgba(20,18,58,.28);padding:22px}
body.console dialog::backdrop{background:rgba(20,18,58,.55)}
body.console .toast{border-radius:8px;background:var(--nav);font-weight:600;box-shadow:0 10px 30px rgba(20,18,58,.3)}
body.console .toast.ok{background:#0B5A2E}
body.console .toast.err{background:#A31515}

/* ───────── 抽屉 / 底部导航(手机) ───────── */
body.console .drawer{background:var(--nav);color:var(--nav-txt);border-left:0}
body.console .drawer-head{border-bottom-color:#221D57}
body.console .drawer-head > div:first-child{color:#fff}
body.console .drawer-bal .v{color:#fff;font-family:var(--mono)}
body.console .drawer-bal .k{color:#9593C4}
body.console .drawer nav a,body.console .drawer nav button{color:var(--nav-txt);font-size:14px}
body.console .drawer nav a:hover{background:rgba(255,255,255,.05)}
body.console .drawer nav a.on{background:var(--nav2);color:#fff}
body.console .drawer nav .ico{color:#7472A8}
body.console .drawer nav a.on .ico{color:#7FA8FF}
body.console .drawer-foot{border-top-color:#221D57}
body.console .drawer-foot .btn.ghost{background:transparent;border-color:#332C78;color:#AEB8D3}
body.console .drawer .langsw-btn{background:transparent;border-color:#332C78;color:#AEB8D3}
body.console .tabbar{background:#fff;border-top:1px solid var(--line)}
body.console .tabbar button,body.console .tabbar a{font:650 10.5px/1.2 var(--sans);color:var(--faint);position:relative}
body.console .tabbar .on{color:var(--acc)}
body.console .tabbar .on::before{content:'';position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:0 0 2px 2px;background:var(--acc)}
body.console .tabbar .primary .ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  margin-top:-14px;border-radius:12px;background:var(--acc);color:#fff;box-shadow:0 6px 16px rgba(67,56,232,.35)}
body.console .tabbar .primary .ico svg{width:20px;height:20px}
body.console .tabbar .primary.on::before{display:none}

/* ───────── 信号格:成功率的招牌画法 ─────────
 * 四格,和手机状态栏一样:≥40% 四格绿、≥20% 三格、≥5% 两格黄、更低一格红,没数据全灰。
 * 比一条进度条好读 —— 客户扫一眼就知道「这条线有没有信号」。 */
.sig{display:inline-flex;align-items:flex-end;gap:2px;height:14px;vertical-align:-2px;flex:none}
.sig i{display:block;width:4px;border-radius:1px;background:#D7DCE6}
.sig i:nth-child(1){height:5px} .sig i:nth-child(2){height:8px}
.sig i:nth-child(3){height:11px} .sig i:nth-child(4){height:14px}
.sig.s4 i{background:#16A34A}
.sig.s3 i:nth-child(-n+3){background:#16A34A}
.sig.s2 i:nth-child(-n+2){background:#E08A00}
.sig.s1 i:nth-child(1){background:#DC2626}
.sigtxt{font:700 12.5px/1 var(--mono);font-variant-numeric:tabular-nums}
.sigtxt.s4,.sigtxt.s3{color:var(--ok)} .sigtxt.s2{color:var(--warn)} .sigtxt.s1{color:var(--err)} .sigtxt.s0{color:var(--faint);font-family:var(--sans);font-weight:600}

/* 等宽的价钱 */
.price{font:700 15px/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}

/* 线稿小图标(列表行用) */
.ico16{width:16px;height:16px;flex:none}

@media (max-width:620px){
  body.console .card{padding:16px}
  body.console .card.flush > .chead{padding:16px 16px 0}
  body.console .card.flush th:first-child,body.console .card.flush td:first-child{padding-left:16px}
  body.console .card.flush th:last-child,body.console .card.flush td:last-child{padding-right:16px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 手机顶栏只放得下 logo + 一个数字 + 汉堡,余额前面的说明文字不要 */
  body.console .balchip > span{display:none}
  body.console .stat .v{font-size:19px}
}