/* ============================================================
   云图威客 · 前端设计系统
   ============================================================ */
:root{
  --brand:#6D5BFF; --brand2:#4F8CFF; --brand-grad:linear-gradient(120deg,#6D5BFF 0%,#4F8CFF 100%);
  --ink:#1A1A2E; --ink2:#3A3A55; --muted:#6B7280; --line:#ECECF4; --bg:#F7F8FC; --card:#FFFFFF;
  --ok:#16B364; --ok-bg:#E7F8EF; --warn:#F5A623; --warn-bg:#FEF3E0;
  --danger:#EF4D5B; --danger-bg:#FDECEE; --info:#4F8CFF; --info-bg:#E9F1FF;
  --radius:14px; --radius-sm:10px; --shadow:0 8px 30px rgba(31,38,89,.08);
  --shadow-sm:0 2px 10px rgba(31,38,89,.06);
  --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sidebar:248px;
}
*{box-sizing:border-box;}
/* 关键：flex/grid 容器上的 hidden 属性会被作者样式覆盖，必须强制生效 */
[hidden]{display:none!important;}
html,body{margin:0;padding:0;height:100%;}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
/* 表格里的业务号（任务号 / 订单号）可以点进去，但默认继承色看不出来，必须给主色 */
.link{color:var(--brand);font-weight:600;cursor:pointer;}
.link:hover{text-decoration:underline;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;font-size:14px;}

/* ---------- 登录页 ---------- */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;}
.auth-hero{background:var(--brand-grad);color:#fff;padding:56px 60px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;}
.auth-hero::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.12);right:-160px;bottom:-200px;}
.auth-hero h1{font-size:38px;line-height:1.25;margin:0 0 18px;letter-spacing:-.5px;}
.auth-hero p{color:rgba(255,255,255,.88);font-size:15px;max-width:440px;}
.auth-metrics{display:flex;gap:36px;position:relative;z-index:2;}
.auth-metrics b{display:block;font-size:26px;}
.auth-metrics span{font-size:12px;color:rgba(255,255,255,.8);}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:40px;}
.auth-card{width:100%;max-width:400px;}
.auth-card h2{margin:0 0 6px;font-size:24px;}
.auth-card .sub{color:var(--muted);margin:0 0 26px;}
.auth-switch{display:flex;gap:4px;background:#F0F1F7;padding:4px;border-radius:12px;margin-bottom:22px;}
.auth-switch button{flex:1;border:none;background:transparent;padding:9px;border-radius:9px;font-weight:600;color:var(--muted);cursor:pointer;font-size:14px;}
.auth-switch button.on{background:#fff;color:var(--brand);box-shadow:var(--shadow-sm);}

/* ---------- 应用外壳 ---------- */
.app{display:flex;min-height:100vh;}
.sidebar{width:var(--sidebar);flex:0 0 var(--sidebar);background:#15162B;color:#B9BAD1;padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 20px;}
.brand-logo{width:34px;height:34px;border-radius:10px;background:var(--brand-grad);display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;flex:0 0 34px;}
.brand-name{color:#fff;font-weight:700;font-size:15px;line-height:1.2;}
.brand-name small{display:block;color:#6E7093;font-weight:500;font-size:11px;letter-spacing:.4px;}
/* 登录页 Hero 为品牌渐变底，副标需改用半透明白，否则对比度不足 */
.auth-hero .brand-name small{color:rgba(255,255,255,.72);letter-spacing:.8px;}
.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;}
.nav-label{font-size:11px;color:#5C5E7E;letter-spacing:1px;padding:14px 10px 6px;text-transform:uppercase;}
.nav a,.side-foot a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:13.5px;color:#B9BAD1;transition:.15s;white-space:nowrap;}
.nav a:hover,.side-foot a:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav a.on{background:var(--brand-grad);color:#fff;box-shadow:0 6px 16px rgba(109,91,255,.4);}
.nav a .ic,.side-foot a .ic{width:18px;text-align:center;font-size:15px;}
/* 底部三项必须竖排：曾因只有默认行内样式而挤成一行，「退出登录」被折断 */
.side-foot{border-top:1px solid rgba(255,255,255,.08);padding-top:10px;margin-top:8px;display:flex;flex-direction:column;gap:0;flex:0 0 auto;}
/* 底部比导航项略紧凑，给中间的导航多留 24px，避免「平台」组被完全挤出可视区 */
.side-foot a{padding:7px 10px;}
/* 矮屏（1366×768 这类）导航会被挤出半屏，压缩行高多塞几项；仍可滚动 */
@media (max-height: 820px){
  .brand{padding:2px 10px 12px;}
  .nav a,.side-foot a{padding:6px 10px;font-size:13px;}
  .nav-label{padding:8px 10px 3px;}
}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{height:62px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 26px;position:sticky;top:0;z-index:30;}
.topbar h1{font-size:17px;margin:0;font-weight:700;}
.topbar .spacer{flex:1;}
.env-pill{font-size:11.5px;padding:4px 10px;border-radius:999px;background:var(--info-bg);color:var(--info);font-weight:600;}
.env-pill.mock{background:var(--warn-bg);color:var(--warn);}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-grad);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;}
.user-meta{line-height:1.2;}
.user-meta b{font-size:13px;display:block;}
.user-meta span{font-size:11.5px;color:var(--muted);}
.content{padding:24px 26px 60px;flex:1;}

/* ---------- 通用组件 ---------- */
.wrap{max-width:1240px;margin:0 auto;}
.grid{display:grid;gap:16px;}
.g2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:1100px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:760px){.g2,.g3{grid-template-columns:1fr;}}
/* 统计卡在手机上保持 2 列：4 张并排压成 1 列会白占一屏高度 */
@media(max-width:360px){.g4{grid-template-columns:1fr;}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.card-pad{padding:20px;}
.card-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);}
.card-head h3{margin:0;font-size:15px;}
.card-head .spacer{flex:1;}

.stat{padding:18px 20px;}
.stat .k{font-size:12px;color:var(--muted);margin-bottom:6px;}
.stat .v{font-size:26px;font-weight:750;letter-spacing:-.5px;}
.stat .d{font-size:12px;color:var(--muted);margin-top:4px;}
.stat .v.ok{color:var(--ok);}
.stat .v.warn{color:var(--warn);}
.stat .v.danger{color:var(--danger);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;cursor:pointer;border-radius:10px;font-weight:600;font-size:13.5px;padding:9px 16px;transition:.16s;white-space:nowrap;}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn-primary{background:var(--brand-grad);color:#fff;box-shadow:0 6px 18px rgba(109,91,255,.32);}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 24px rgba(109,91,255,.4);}
.btn-ghost{background:#fff;color:var(--ink2);border:1px solid var(--line);}
.btn-ghost:hover:not(:disabled){border-color:var(--brand);color:var(--brand);}
.btn-soft{background:#EEF0FF;color:var(--brand);}
.btn-soft:hover:not(:disabled){background:#E4E7FF;}
.btn-danger{background:var(--danger-bg);color:var(--danger);}
.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:8px;}
/* 表格行内操作按钮：更紧凑，保证一行内多按钮不换行 */
.btn-xs{padding:3px 8px;font-size:11.5px;border-radius:6px;line-height:1.5;}

.tag{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:999px;background:#EEF0FF;color:var(--brand);font-weight:600;}
.tag.green{background:var(--ok-bg);color:var(--ok);}
.tag.blue{background:var(--info-bg);color:var(--info);}
.tag.amber{background:var(--warn-bg);color:var(--warn);}
.tag.red{background:var(--danger-bg);color:var(--danger);}
.tag.gray{background:#F1F2F7;color:var(--muted);}

.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:6px;}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:5px;}
.input,select.input,textarea.input{width:100%;padding:10px 12px;border:1px solid #E3E4EE;border-radius:10px;background:#fff;outline:none;transition:.15s;color:var(--ink);}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(109,91,255,.12);}
textarea.input{resize:vertical;min-height:82px;}
.row{display:flex;gap:12px;}
.row>*{flex:1;min-width:0;}

/* 图形验证码：图固定宽度，输入框占满剩余，点击图片换一张 */
.captcha-img{
  flex:0 0 132px;width:132px;height:44px;border-radius:10px;cursor:pointer;
  border:1px solid #E3E4EE;background:#F4F6FD;object-fit:cover;
  transition:border-color .15s,box-shadow .15s;user-select:none;
}
.captcha-img:hover{border-color:var(--brand);box-shadow:0 0 0 3px rgba(109,91,255,.10);}
.captcha-img.is-loading{opacity:.65;cursor:progress;}

.table{width:100%;border-collapse:collapse;}
.table th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:10px 20px;background:#FAFAFD;border-bottom:1px solid var(--line);white-space:nowrap;}
.table td{padding:13px 20px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle;}
.table tr:last-child td{border-bottom:none;}
.table tr:hover td{background:#FCFCFF;}
.table .num{font-family:var(--mono);font-size:12.5px;}
.table .right{text-align:right;}

.empty{padding:48px 20px;text-align:center;color:var(--muted);}
.empty .ico{font-size:34px;margin-bottom:10px;opacity:.5;}

.alert{padding:12px 16px;border-radius:10px;font-size:13px;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start;}
.alert.info{background:var(--info-bg);color:#2B5FCC;}
.alert.ok{background:var(--ok-bg);color:#0E7A46;}
.alert.warn{background:var(--warn-bg);color:#9A6208;}
.alert.err{background:var(--danger-bg);color:#B02A36;}

.toast-host{position:fixed;right:24px;bottom:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;}
.toast{background:#1D1F35;color:#fff;padding:12px 16px;border-radius:11px;font-size:13px;box-shadow:0 12px 30px rgba(0,0,0,.25);animation:tin .25s ease;max-width:360px;}
.toast.ok{background:#0F7A46;}
.toast.err{background:#B02A36;}
@keyframes tin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.skeleton{background:linear-gradient(90deg,#F1F2F7 25%,#E8E9F1 37%,#F1F2F7 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:8px;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;display:inline-block;}
@keyframes sp{to{transform:rotate(360deg);}}

/* ---------- 业务专用 ---------- */
.hero-card{background:var(--brand-grad);color:#fff;border-radius:var(--radius);padding:26px 28px;position:relative;overflow:hidden;}
.hero-card::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.13);right:-80px;top:-120px;}
.hero-card h2{margin:0 0 8px;font-size:22px;}
.hero-card p{margin:0;color:rgba(255,255,255,.9);max-width:640px;}
.hero-actions{display:flex;gap:10px;margin-top:20px;position:relative;z-index:2;}
.hero-actions .btn-ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#fff;}
.hero-actions .btn-ghost:hover{background:rgba(255,255,255,.26);color:#fff;}

.req-item{padding:16px 20px;border-bottom:1px solid var(--line);cursor:pointer;transition:.15s;}
.req-item:hover{background:#FBFBFF;}
.req-item:last-child{border-bottom:none;}
.req-item h4{margin:0 0 6px;font-size:14.5px;}
.req-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted);}
.req-price{font-family:var(--mono);font-weight:700;color:var(--danger);}

.creator-row{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);}
.creator-row:last-child{border-bottom:none;}
.creator-av{width:40px;height:40px;border-radius:12px;background:var(--info-bg);color:var(--info);display:grid;place-items:center;font-weight:700;}
.score{font-family:var(--mono);font-weight:700;color:var(--brand);}
.bar{height:6px;border-radius:99px;background:#EFF0F6;overflow:hidden;}
.bar>i{display:block;height:100%;background:var(--brand-grad);border-radius:99px;}

.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;}
.tabs button{border:none;background:transparent;padding:10px 16px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;font-size:13.5px;}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand);}

.timeline{position:relative;padding-left:26px;}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line);}
.tl-item{position:relative;padding-bottom:20px;}
.tl-item::before{content:"";position:absolute;left:-24px;top:5px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--brand);}
.tl-item.done::before{background:var(--ok);border-color:var(--ok);}
.tl-item h5{margin:0 0 3px;font-size:13.5px;}
.tl-item p{margin:0;font-size:12.5px;color:var(--muted);}

.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;font-size:13px;}
.kv .k{color:var(--muted);}
.kv .v{font-weight:600;word-break:break-all;}

.modal-host{position:fixed;inset:0;background:rgba(20,21,40,.45);z-index:900;display:grid;place-items:center;padding:24px;animation:fade .18s;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.modal{background:#fff;border-radius:16px;width:100%;max-width:560px;max-height:88vh;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.24);}
.modal-head{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line);flex:0 0 auto;}
.modal-head h3{margin:0;font-size:16px;flex:1;}
.modal-body{padding:22px;overflow:auto;flex:1 1 auto;min-height:0;}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;flex:0 0 auto;}
.x{border:none;background:transparent;font-size:20px;cursor:pointer;color:var(--muted);line-height:1;}

.split{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;}
@media(max-width:1000px){.split{grid-template-columns:1fr;}}
.mono{font-family:var(--mono);}
.muted{color:var(--muted);}
.small{font-size:12px;}
.mt0{margin-top:0;}
.mb0{margin-bottom:0;}
.mt16{margin-top:16px;}
.mt24{margin-top:24px;}
.flex{display:flex;}
/* 注意：.wrap 是页面容器（max-width:1240px），不是 flex-wrap，别拿来当换行工具类用 */
.fw{flex-wrap:wrap;}
.gap8{gap:8px;}
.gap12{gap:12px;}
.items-center{align-items:center;}
.between{justify-content:space-between;}
.grow{flex:1;}
.nowrap{white-space:nowrap;}

/* ============================================================
   移动端适配层
   断点约定：900 抽屉侧栏 / 760 单列 / 640 紧凑 / 480 极限窄屏
   ============================================================ */

/* 抽屉与遮罩：桌面端默认不存在感 */
.menu-btn{display:none;width:36px;height:36px;flex:0 0 36px;border:none;background:transparent;border-radius:10px;cursor:pointer;padding:0;place-items:center;}
.menu-btn:active{background:#F1F2F7;}
.menu-btn i{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);position:relative;}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:var(--ink);}
.menu-btn i::before{top:-6px;}
.menu-btn i::after{top:6px;}
.scrim{display:none;position:fixed;inset:0;z-index:150;background:rgba(16,17,32,.48);opacity:0;pointer-events:none;transition:opacity .24s ease;}
.scrim.on{opacity:1;pointer-events:auto;}

/* 触屏基础：去掉点击高亮，输入框字号 ≥16px 防 iOS 聚焦自动放大 */
@media(hover:none){
  a,button,.req-item,.nav a{-webkit-tap-highlight-color:transparent;}
  input,select,textarea{font-size:16px;}
}

/* 表格横向滚动容器（由 app.js 渲染后自动包裹） */
/* overflow 会建立裁切边界，圆角必须自己继承，否则会盖掉卡片底部圆角 */
.table-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:0 0 var(--radius) var(--radius);}
.table-scroll::-webkit-scrollbar{height:6px;}
.table-scroll::-webkit-scrollbar-thumb{background:#D8D9E6;border-radius:99px;}
.table-scroll::-webkit-scrollbar-track{background:transparent;}

/* 横向可滚区域右缘渐隐：提示还有内容，同时把"被切一半的字"收成柔边。
   滚到底后由 app.js 去掉，避免末端内容发灰。 */
.is-overflow{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);
}
.is-overflow.at-end{-webkit-mask-image:none;mask-image:none;}

/* ---------- ≤900px：侧栏改抽屉，主区占满 ---------- */
@media(max-width:900px){
  .app{display:block;}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:200;
    width:270px;flex:none;height:100dvh;
    transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;overscroll-behavior:contain;
    box-shadow:0 0 40px rgba(0,0,0,.3);
  }
  .sidebar.open{transform:none;}
  .menu-btn{display:grid;}
  .scrim{display:block;}
  .main{display:block;min-height:100dvh;}
  /* 窄屏下表格给一个下限宽度，避免各列被压成竖条，配合容器横向滚动 */
  .table-scroll .table{min-width:620px;}
  .modal{max-width:100%;}
}

/* ---------- ≤640px：紧凑间距 ---------- */
@media(max-width:640px){
  .topbar{height:56px;padding:0 12px;gap:10px;}
  .topbar h1{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .user-meta{display:none;}
  .avatar{width:30px;height:30px;font-size:12px;flex:0 0 30px;}
  .env-pill{font-size:10.5px;padding:3px 8px;}
  .content{padding:12px 12px 56px;}
  .wrap{max-width:none;}

  .card{border-radius:12px;}
  .card-pad{padding:14px;}
  .card-head{padding:12px 14px;gap:8px;flex-wrap:wrap;}
  .card-head h3{font-size:14.5px;}
  .stat{padding:14px 15px;}
  .stat .v{font-size:22px;}
  .stat .d{font-size:11.5px;}

  .grid{gap:12px;}
  .table th{padding:9px 12px;}
  .table td{padding:11px 12px;font-size:13px;}

  /* Tab 条横向滑动，不换行 */
  .tabs{
    overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;margin-bottom:14px;
    scroll-snap-type:x proximity;
  }
  .tabs::-webkit-scrollbar{display:none;}
  .tabs button{flex:0 0 auto;padding:9px 12px;font-size:13px;scroll-snap-align:start;}

  .hero-card{padding:20px 18px;border-radius:12px;}
  .hero-card h2{font-size:18px;}
  .hero-card p{font-size:13px;}
  .hero-actions{flex-wrap:wrap;gap:8px;margin-top:16px;}
  .hero-actions .btn{flex:1;min-width:120px;}

  /* 表单两列改单列，避免每个输入框只剩几十像素 */
  .row{flex-direction:column;gap:10px;}
  /* 桌面端用内联 flex:0 0 160px 控制横向宽度，竖排后 basis 会变成高度，
     把下拉框/按钮拉成一两百像素高的大块，必须复位 */
  .row>*{flex:0 0 auto!important;width:100%;}
  /* 例外：验证码这类「输入框 + 取码按钮」在手机上仍应并排 */
  .row.row-inline{flex-direction:row;gap:8px;}
  .row.row-inline>*{width:auto;}
  .row.row-inline>.input{flex:1 1 auto!important;width:auto;min-width:0;}
  .field{margin-bottom:13px;}
  .kv{grid-template-columns:88px 1fr;font-size:12.5px;gap:7px 10px;}

  /* 弹窗改底部抽屉，拇指可达 */
  .modal-host{align-items:flex-end;padding:0;}
  .modal{max-width:100%;max-height:92dvh;border-radius:18px 18px 0 0;animation:slideup .24s ease;}
  .modal-head{padding:16px 16px 12px;}
  .modal-body{padding:16px;}
  .modal-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));}
  .modal-foot .btn{flex:1;}

  /* Toast 贴底通栏 */
  .toast-host{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));}
  .toast{max-width:none;font-size:12.5px;padding:11px 14px;}

  .empty{padding:36px 16px;}
  .alert{padding:11px 13px;font-size:12.5px;}
  .timeline{padding-left:22px;}
  .creator-row{padding:12px 14px;gap:10px;}
  .req-item{padding:14px;}
  .req-item h4{font-size:14px;}
  .btn{padding:9px 13px;font-size:13px;}
  .btn-sm{padding:6px 10px;font-size:12px;}

  /* 「左标题 + 右按钮」的页头在窄屏必须换行，
     否则按钮不收缩会把左侧标题挤成一行一两个字的窄条。
     只加 row-gap，不覆盖原有列间距。 */
  .flex.between{flex-wrap:wrap;row-gap:10px;}
  .flex.between>*{min-width:0;}
}

@keyframes slideup{from{transform:translateY(24px);opacity:.6;}to{transform:none;opacity:1;}}

/* ---------- ≤640px：多列表格转卡片 ----------
   手机上横向滑动宽表格体验极差，列数 ≥4 的表格改为一单一卡，
   表头文字由 app.js 写入 td[data-label]，此处仅做展示。
   少列表格（≤3 列）仍保持表格形态，直接横滑即可。 */
@media(max-width:640px){
  .table-scroll .table.table-cards{display:block;min-width:0;}

  .table-cards thead{display:none;}
  .table-cards tbody{display:block;}
  .table-cards tr{
    display:block;padding:11px 13px;
    border-bottom:1px solid var(--line);
  }
  .table-cards tr:last-child{border-bottom:none;}
  .table-cards tr:hover td{background:transparent;}

  /* 用 .table.table-cards 提升特异性，否则被 .table .right 的 text-align:right 压过，
     金额等右对齐字段在卡片里会标签右移、值贴边 */
  .table.table-cards td{
    display:grid;grid-template-columns:80px minmax(0,1fr);
    gap:10px;align-items:baseline;
    padding:3px 0;border-bottom:none;
    font-size:13px;text-align:left;
  }
  .table-cards td::before{
    content:attr(data-label);
    color:var(--muted);font-size:12px;line-height:1.5;
    white-space:nowrap;
  }
  /* 值容器：保证 td 内容（含多个按钮）按正常流排布，而不是被 grid 拆成多个格子 */
  .table-cards td>.td-v{min-width:0;word-break:break-word;}

  /* 无表头的列（操作列 / 序号列）独占一行，标签留空 */
  .table.table-cards td:not([data-label]){
    display:block;padding:7px 0 1px;text-align:left;
  }
  .table-cards td:not([data-label])::before{content:none;}
  .table-cards td:not([data-label])>.td-v{display:flex;flex-wrap:wrap;gap:6px;}
}

/* ---------- 主体入驻与认证（onboarding） ---------- */
.ob-steps{display:flex;align-items:center;gap:8px;}
.ob-step{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.ob-link{flex:1;min-width:20px;height:2px;border-radius:2px;}
/* 键值行：经营范围这类长文本必须能折行，用 table 会把卡片撑出横向滚动 */
.ob-kv{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;}
.ob-kv:last-child{border-bottom:none;}
.ob-k{flex:0 0 112px;color:var(--muted);}
.ob-v{flex:1;min-width:0;word-break:break-word;line-height:1.65;}

@media(max-width:640px){
  /* 4 步横排在 390px 屏上必然溢出，改竖排 */
  .ob-steps{flex-direction:column;align-items:stretch;gap:12px;}
  .ob-link{display:none;}
  .ob-step{padding-left:0;}
  .ob-kv{flex-direction:column;gap:3px;}
  .ob-k{flex:0 0 auto;}
}

/* ---------- 登录页：单列 ---------- */
@media(max-width:900px){
  .auth-wrap{grid-template-columns:1fr;min-height:100dvh;}
  .auth-hero{padding:34px 24px 26px;justify-content:flex-start;gap:22px;}
  .auth-hero h1{font-size:28px;}
  .auth-hero::after{width:340px;height:340px;right:-140px;bottom:-180px;}
  .auth-panel{padding:8px 24px 40px;align-items:flex-start;}
  .auth-card{max-width:none;}
}

/* ---------- ≤480px：极窄屏兜底 ---------- */
@media(max-width:480px){
  .content{padding:10px 10px 52px;}
  .card-head{padding:11px 12px;}
  .card-pad{padding:12px;}
  .table th{padding:8px 10px;}
  .table td{padding:10px;font-size:12.5px;}
  /* 登录页 Hero 在极窄屏收敛，把空间留给表单 */
  .auth-hero{padding:26px 20px;gap:18px;}
  .auth-hero h1{font-size:24px;margin-bottom:12px;}
  .auth-hero p{font-size:13px;}
  .auth-metrics{gap:18px;}
  .auth-metrics b{font-size:20px;}
  .auth-panel{padding:20px 16px calc(20px + env(safe-area-inset-bottom));}
  .auth-card .sub{margin-bottom:20px;}
}

/* ---------- 系统设置（system） ---------- */
.sys-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:start;}
.sys-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:78px;}
.sys-nav button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid transparent;
  border-radius:11px;background:transparent;cursor:pointer;text-align:left;color:var(--ink2);transition:.15s;}
.sys-nav button:hover{background:#fff;border-color:var(--line);}
.sys-nav button.on{background:#fff;border-color:var(--line);box-shadow:var(--shadow-sm);color:var(--brand);}
.sys-nav-ico{width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:#F1F2F7;display:grid;place-items:center;
  font-size:13px;color:var(--ink2);}
.sys-nav button.on .sys-nav-ico{background:#EEF0FF;color:var(--brand);}
.sys-nav b{display:block;font-size:13.5px;font-weight:600;line-height:1.35;}
.sys-nav i{display:block;font-size:11.5px;color:var(--muted);font-style:normal;line-height:1.4;}

/* 配置行：左标签右控件，标签区自带说明，避免长说明挤在输入框下方 */
.sys-item{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;padding:15px 0;border-bottom:1px solid var(--line);}
.sys-item:first-child{padding-top:0;}
.sys-item:last-child{border-bottom:none;padding-bottom:0;}
.sys-label b{font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.sys-label code{display:inline-block;font-family:var(--mono);font-size:11px;color:#9AA0B4;margin-top:2px;}
.sys-hint{font-size:12px;color:var(--muted);line-height:1.6;margin-top:4px;}
.sys-ctrl{min-width:0;}
.unit-row{display:flex;align-items:center;gap:8px;}
.unit-row .input{flex:1;min-width:0;}
.unit-row .unit{flex:0 0 auto;font-size:12px;color:var(--muted);white-space:nowrap;}

/* ---------- 系统设置公共组件（components/system-settings.js） ---------- */
.sys-comp{display:block;}
.sys-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.sys-title{margin:0 0 4px;font-size:20px;}
/* 紧凑模式给抽屉用：侧栏收窄、控件列收窄，一屏能多放两行 */
.sys-comp.compact .sys-layout{grid-template-columns:176px minmax(0,1fr);gap:14px;}
.sys-comp.compact .sys-nav{position:static;}
.sys-comp.compact .sys-item{grid-template-columns:minmax(0,1fr) 250px;gap:14px;}

/* ---------- 系统设置抽屉 ---------- */
/* 层级压在侧栏(200)之上、弹窗(900)之下：抽屉里点「恢复默认」时确认框要能盖住它 */
.sys-drawer-host{position:fixed;inset:0;z-index:880;}
.sys-drawer-scrim{position:absolute;inset:0;background:rgba(26,26,46,.42);animation:sysFade .18s ease;}
.sys-drawer{position:absolute;top:0;right:0;height:100%;width:min(900px,92vw);display:flex;flex-direction:column;
  background:var(--bg);box-shadow:-8px 0 32px rgba(26,26,46,.18);
  animation:sysSlide .22s cubic-bezier(.22,.61,.36,1);}
.sys-drawer-sm{width:min(600px,92vw);}
.sys-drawer-lg{width:min(1200px,96vw);}
.sys-drawer-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;background:var(--card);border-bottom:1px solid var(--line);}
.sys-drawer-head h3{margin:0;font-size:16px;font-weight:600;}
.sys-drawer-head .x{border:none;background:none;padding:0 4px;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);}
.sys-drawer-head .x:hover{color:var(--ink);}
/* 抽屉自己滚动，头部固定 —— 配置项多的分组下，保存按钮才不会跑到屏幕外 */
.sys-drawer-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px;}
@keyframes sysFade{from{opacity:0}to{opacity:1}}
@keyframes sysSlide{from{transform:translateX(28px);opacity:.55}to{transform:none;opacity:1}}
@media (max-width:720px){
  .sys-drawer{width:100%;}
  .sys-comp.compact .sys-layout{grid-template-columns:minmax(0,1fr);}
  .sys-comp.compact .sys-item{grid-template-columns:minmax(0,1fr);gap:8px;}
}
.unit-row .btn{flex:0 0 auto;}

/* 开关 */
.sw{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;}
.sw input{position:absolute;opacity:0;width:0;height:0;}
.sw-track{width:44px;height:24px;flex:0 0 44px;border-radius:99px;background:#DDE0EC;position:relative;transition:.18s;}
.sw-dot{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.18s;}
.sw input:checked+.sw-track{background:var(--brand);}
.sw input:checked+.sw-track .sw-dot{transform:translateX(20px);}
.sw input:disabled+.sw-track{opacity:.5;}
.sw-text{font-size:13px;color:var(--ink2);}

/* 自检结果 */
.chk{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line);}
.chk:last-child{border-bottom:none;}
.chk-ico{width:20px;height:20px;flex:0 0 20px;border-radius:50%;display:grid;place-items:center;font-size:11px;
  font-weight:700;margin-top:1px;}
.chk.ok .chk-ico{background:var(--ok-bg);color:var(--ok);}
.chk.bad .chk-ico{background:var(--danger-bg);color:var(--danger);}
.chk b{font-size:13px;font-weight:600;}

@media(max-width:900px){
  /* 窄屏左侧导航改为横向滚动条，给表单腾出整宽 */
  .sys-layout{grid-template-columns:minmax(0,1fr);gap:12px;}
  .sys-nav{flex-direction:row;overflow-x:auto;position:static;padding-bottom:4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .sys-nav::-webkit-scrollbar{display:none;}
  .sys-nav button{flex:0 0 auto;width:auto;padding:8px 12px;border-color:var(--line);background:#fff;}
  .sys-nav i{display:none;}
  .sys-nav b{white-space:nowrap;font-size:13px;}
}
@media(max-width:640px){
  /* 控件换行到标签下方，否则 300px 固定列会把屏幕撑破 */
  .sys-item{grid-template-columns:minmax(0,1fr);gap:8px;padding:13px 0;}
  .sys-label code{word-break:break-all;}
  .sys-ctrl .input,.sys-ctrl select.input{font-size:14px;}
}

/* ---------- 开放平台（open） ---------- */
.step-row{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line);}
.step-row:last-of-type{border-bottom:none;}
.step-no{width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:#EEF0FF;color:var(--brand);
  display:grid;place-items:center;font-size:12px;font-weight:700;}
.recent-row{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);}
.recent-row:last-child{border-bottom:none;}
.recent-row .right{flex:0 0 auto;}

.app-card{padding:18px 20px;margin-bottom:14px;}
.app-head{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
.app-key{font-size:12px;color:var(--ink2);background:#F5F6FB;padding:3px 8px;border-radius:6px;word-break:break-all;}
.app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);}
.app-grid .k{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px;}
.app-grid .v{font-size:13px;font-weight:600;}
.app-foot{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);}
.app-foot code{word-break:break-all;}

/* 代码块：深色底在浅色页面里更易读，也能一眼和正文区分 */
.code{margin:0;padding:14px 16px;background:#1E1F2B;color:#E6E8F2;border-radius:10px;
  font-family:var(--mono);font-size:12px;line-height:1.7;overflow:auto;max-height:440px;white-space:pre;}
.code code{font-family:inherit;color:inherit;background:none;padding:0;}

/* 接口调用日志那种「一行一个键值」的排版。原来这里直接复用 .kv，
   把全局 .kv 的 grid 布局覆盖成 flex，导致需求/订单详情和资金概况里
   所有 .kv>.k/.v 都被挤成横向多列、正文折行。单独给个类名隔开。 */
.kv-log{display:flex;gap:10px;align-items:baseline;padding:5px 0;font-size:12.5px;color:var(--muted);}
.kv-log span{flex:0 0 96px;}
.kv-log code{color:var(--ink);word-break:break-all;}

.cbx{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;flex:1 1 180px;min-width:0;}
.cbx:hover{border-color:var(--brand);}
.cbx input{margin-top:3px;flex:0 0 auto;}
.cbx b{display:block;font-size:13px;font-weight:600;}
.cbx i{display:block;font-size:11.5px;color:var(--muted);font-style:normal;line-height:1.5;}

.table-fixed{table-layout:fixed;}
.table-fixed td.clip,.table-fixed .clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.table-fixed td,.table-fixed th{padding-left:12px;padding-right:12px;}

.doc-2col{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;align-items:start;}
@media(max-width:900px){.doc-2col{grid-template-columns:1fr;}}

.secret-box{margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#FAFAFD;}
.secret-box .k{font-size:11.5px;color:var(--muted);margin-bottom:6px;}
.secret-box code{font-size:13px;word-break:break-all;}

@media(max-width:900px){
  /* 应用卡片的操作按钮换行到第二行，避免把 appKey 挤成一列竖排 */
  .app-head{flex-direction:column;align-items:stretch;}
  .app-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  .app-card{padding:14px 16px;}
  .app-grid{grid-template-columns:1fr;gap:10px;}
  .kv span{flex:0 0 80px;}
  .code{font-size:11.5px;padding:12px;}
}