:root{
  --bg:#eef2f7;
  --side:#0f172a;
  --side-soft:#111c33;
  --panel:#ffffff;
  --panel-soft:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --line-strong:#cbd5e1;
  --primary:#2563eb;
  --primary-deep:#1d4ed8;
  --teal:#0f766e;
  --red:#dc2626;
  --orange:#d97706;
  --green:#059669;
  --shadow:0 10px 30px rgba(0,0,0,.03);
  --shadow-hover:0 18px 42px rgba(15,23,42,.08);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;line-height:1.55;overflow-x:hidden}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}
.hide{display:none!important}

.auth{min-height:100%;display:grid;grid-template-columns:1.08fr .92fr;background:#e7edf5}
.auth-hero{padding:58px 66px;background:#0f172a;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.auth-hero h1{font-size:42px;line-height:1.14;margin:20px 0 12px;letter-spacing:0}
.auth-hero p{max-width:700px;color:#cbd5e1;line-height:1.85}
.auth-logo{width:58px;height:58px;border-radius:8px;background:#fff;color:#0f172a;display:grid;place-items:center;font-size:28px;font-weight:950}
.auth-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.auth-card{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);border-radius:8px;padding:15px}
.auth-card b{font-size:22px}
.auth-card span{display:block;color:#cbd5e1;margin-top:6px;font-size:13px}
.auth-main{display:grid;place-items:center;padding:30px}
.auth-box{width:min(460px,100%);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:26px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#f1f5f9;border-radius:8px;padding:5px;margin-bottom:18px}
.auth-tabs button{border:0;border-radius:6px;background:transparent;padding:10px;font-weight:850;color:#64748b}
.auth-tabs button.active{background:#fff;color:#0f172a;box-shadow:0 4px 12px rgba(15,23,42,.08)}

.field{display:flex;flex-direction:column;gap:7px;margin:12px 0;min-width:0}
.field label{font-size:13px;color:#334155;font-weight:850}
.field input,.field select,.field textarea{width:100%;min-width:0;border:1px solid #e2e8f0;border-radius:12px;background:#fff;padding:11px 12px;outline:none;box-shadow:0 10px 30px rgba(0,0,0,.03);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12),0 10px 30px rgba(0,0,0,.03)}
.check-stack{display:grid;gap:9px;margin-top:12px;color:#334155;font-size:14px}
.check-stack label{display:flex;gap:8px;align-items:flex-start}

.btn{border:1px solid #e2e8f0;background:#fff;color:#1e293b;border-radius:12px;padding:9px 14px;font-weight:850;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.03);transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-deep)}
.btn.green{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
.btn.red{background:#fff1f2;border-color:#fecdd3;color:#be123c}
.btn.orange{background:#fffbeb;border-color:#fde68a;color:#b45309}
.btn.ghost{background:transparent}
.btn.full{width:100%}
.btn.small{min-height:34px;padding:6px 10px;border-radius:10px;font-size:13px}
.btn:disabled{opacity:.56;cursor:not-allowed}

.app{min-height:100%;display:grid;grid-template-columns:282px minmax(0,1fr);overflow-x:hidden}
.side{background:var(--side);color:#dbeafe;height:100vh;position:sticky;top:0;display:flex;flex-direction:column;z-index:30;min-width:0;width:100%;box-shadow:10px 0 34px rgba(15,23,42,.18)}
.brand{height:78px;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid rgba(148,163,184,.18)}
.brand-mark{width:42px;height:42px;border-radius:8px;background:#eff6ff;color:#0f172a;display:grid;place-items:center;font-weight:950}
.brand b{font-size:18px;color:#fff}
.brand small{display:block;color:#93a4bb;margin-top:2px}
.nav{padding:14px;overflow:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-group{font-size:12px;color:#7890ad;font-weight:850;margin:16px 8px 8px}
.nav button{width:100%;border:1px solid transparent;background:transparent;text-align:left;border-radius:8px;padding:10px 11px;margin:3px 0;color:#cbd5e1;font-weight:850;display:grid;grid-template-columns:38px 1fr;gap:8px;align-items:center;min-height:42px}
.nav button span:first-child{height:26px;border-radius:7px;background:rgba(148,163,184,.12);display:grid;place-items:center;font-size:11px;color:#bfdbfe}
.nav button:hover{background:rgba(255,255,255,.06)}
.nav button.active{background:#eff6ff;color:#172554;border-color:#bfdbfe}
.nav button.active span:first-child{background:#2563eb;color:#fff}
.side-foot{margin-top:auto;padding:14px;border-top:1px solid rgba(148,163,184,.18);color:#94a3b8;font-size:12px;line-height:1.7}

.main{min-width:0;overflow-x:hidden}
.top{min-height:78px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:16px}
.top-title{min-width:0}
.top-title b{display:block;font-size:18px}
.top-title span{display:block;color:#64748b;font-size:13px;margin-top:3px;overflow-wrap:anywhere}
.top-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:260px}
.client-switch{min-width:240px;max-width:360px;border:1px solid #cbd5e1;border-radius:8px;padding:8px 10px;background:#fff}
.brand-switch{min-width:220px;max-width:360px;border:1px solid #cbd5e1;border-radius:8px;padding:7px 10px;background:#fff;color:#162033;display:grid;text-align:left;line-height:1.2}
.brand-switch span{font-size:12px;color:#64748b;font-weight:800}
.brand-switch b{font-size:14px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-switch:hover{border-color:#93c5fd;background:#f8fbff}

.content{padding:24px;max-width:1540px;width:100%;margin:0 auto;min-width:0}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}
.page-head h1{font-size:29px;line-height:1.18;margin:0;letter-spacing:0}
.page-head p{margin:7px 0 0;color:#64748b;max-width:860px}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.grid{display:grid;gap:16px;min-width:0}
.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.split,.workshop-grid{display:grid;grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr);gap:16px}

.card,.toolbar,.table-card{background:#fff;border:1px solid #e8edf5;border-radius:12px;box-shadow:var(--shadow);min-width:0}
.card{padding:24px}
.card h3{margin:0 0 12px}
.metric{position:relative;overflow:hidden}
.metric:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:#2563eb}
.metric .label{font-size:13px;color:#64748b;font-weight:850}
.metric .value{font-size:34px;line-height:1.12;font-weight:950;margin:8px 0}
.metric .sub{font-size:13px;color:#64748b}
.action-card h2{font-size:26px;line-height:1.25;margin:6px 0 8px}
.action-card p{color:#64748b;margin:0 0 16px}
.plain-list{display:grid;gap:10px}
.plain-list p{margin:0;color:#475569;line-height:1.75}
.plain-list b{color:#0f172a}
.hint-card{background:#fff;border:1px solid #dbeafe;border-left:4px solid var(--primary);border-radius:12px;padding:16px 18px;margin-bottom:16px;box-shadow:var(--shadow)}
.hint-card>b{display:block;font-size:16px;margin-bottom:8px}
.hint-card p{margin:4px 0;color:#475569;line-height:1.75}
.explain-box{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #e2e8f0;border-radius:12px;padding:14px;min-width:0;background:#fff}
.explain-box div{min-width:0}
.explain-box b{display:block}
.explain-box span{display:block;color:#64748b;font-size:13px;line-height:1.65;overflow-wrap:anywhere}
.mini-guide h3{font-size:16px;margin-bottom:6px}
.error-text{color:#be123c!important;font-weight:850}

.badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:850;white-space:nowrap}
.badge.blue{background:#dbeafe;color:#1d4ed8}
.badge.green{background:#dcfce7;color:#047857}
.badge.orange{background:#fffbeb;color:#b45309}
.badge.red{background:#fee2e2;color:#be123c}
.badge.gray{background:#f1f5f9;color:#475569}

.flow-card{margin:16px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.flow-step{border:1px solid #e8edf5;background:#fff;border-radius:12px;box-shadow:var(--shadow);min-height:82px;padding:14px;text-align:left;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num title" "num sub";column-gap:10px;align-items:center}
.flow-step span{grid-area:num;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:950;background:#eef2f7;color:#475569}
.flow-step b{grid-area:title;line-height:1.25}
.flow-step small{grid-area:sub;color:#64748b;overflow-wrap:anywhere}
.flow-step.done span{background:#dcfce7;color:#047857}
.flow-step.todo span{background:#fff7ed;color:#b45309}

.step-list{display:grid;gap:10px}
.step{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #e2e8f0;border-radius:12px;padding:14px;min-width:0;background:#fff}
.step>div{min-width:0}
.step b{display:block;overflow-wrap:anywhere}
.step span{display:block;color:#64748b;font-size:13px;overflow-wrap:anywhere}

.toolbar{padding:24px;margin-bottom:16px}
.form-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}
.form-row.compact{grid-template-columns:minmax(220px,1.2fr) minmax(180px,1.2fr) minmax(120px,.8fr) auto}
.table-card{overflow:hidden}
.table-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center}
.table-head.no-pad{padding:0 0 12px;border-bottom:0}
.table-wrap{overflow:auto;max-width:100%}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{border-bottom:1px solid var(--line);padding:13px 15px;text-align:left;font-size:14px;vertical-align:top;overflow-wrap:anywhere;word-break:normal;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
th{background:#f8fafc;color:#64748b;font-weight:850;white-space:normal}
tr:hover td{background:#f8fafc}
.wrap-cell{max-width:520px;overflow-wrap:anywhere;white-space:normal}
.action-col{width:130px}
.action-cell{white-space:nowrap}
.empty{text-align:center;color:#94a3b8;padding:46px!important}
.empty-state{color:#94a3b8}
.mini-actions{display:flex;gap:10px;flex-wrap:wrap}
.linkbtn{border:0;background:transparent;color:#1d4ed8;font-weight:850;padding:0;line-height:1.5}
.linkbtn.red{color:#be123c}

.pre,.rich-output{white-space:pre-wrap;line-height:1.75;background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:16px;max-height:62vh;overflow:auto;font-size:13px;overflow-wrap:anywhere}
.rich-output{min-height:520px;background:#fbfdff;color:#1e293b;font-size:14px}
.output-card{display:flex;flex-direction:column}
.control-panel{align-self:start}
.workshop-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:6px}
.workshop-tabs button{border:0;background:transparent;border-radius:10px;padding:9px 8px;color:#64748b;font-weight:900;min-height:38px}
.workshop-tabs button.active{background:#fff;color:#1d4ed8;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.markdown-view{white-space:normal}
.markdown-view h1{font-size:22px;line-height:1.35;margin:4px 0 14px;color:#0f172a}
.markdown-view h2{font-size:18px;line-height:1.4;margin:18px 0 10px;color:#0f172a}
.markdown-view h3{font-size:16px;line-height:1.4;margin:14px 0 8px;color:#1e293b}
.markdown-view p{margin:7px 0;color:#334155}
.markdown-view .md-li{padding-left:8px}
.markdown-view pre{background:#0f172a;color:#dbeafe;border-radius:12px;padding:14px;overflow:auto;white-space:pre-wrap}
.matrix-wrap{overflow:auto;max-width:100%}
.matrix{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.matrix div{background:#fff;padding:11px;font-size:13px;overflow-wrap:anywhere}
.matrix .mh{background:#f8fafc;color:#64748b;font-weight:850;white-space:nowrap}
.matrix .qcell{font-weight:850}
.notice{border:1px solid #fed7aa;background:#fff7ed;color:#9a3412;border-radius:8px;padding:12px 14px;line-height:1.7;margin-bottom:16px}

.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.52);z-index:100;display:grid;place-items:center;padding:18px}
.modal{width:min(980px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.26)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.modal-head h3{margin:0;font-size:18px;line-height:1.35;overflow-wrap:anywhere}
.modal-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.modal-body{padding:18px}
.toast{position:fixed;right:22px;bottom:22px;background:#0f172a;color:#fff;border-radius:8px;padding:12px 16px;box-shadow:var(--shadow);z-index:200;font-weight:850;max-width:min(460px,calc(100vw - 32px))}
.help{color:#64748b;font-size:13px;line-height:1.7}
.danger-zone{border-color:#fecdd3;background:#fffafa}

@media(max-width:1180px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-card{grid-template-columns:repeat(3,minmax(0,1fr))}
  .workshop-grid,.split{grid-template-columns:1fr}
}
@media(max-width:1100px){
  .app{grid-template-columns:1fr}
  .side{position:relative;height:auto}
  .brand{height:64px}
  .nav{display:flex;gap:6px;overflow:auto;padding:10px 14px;max-width:100%}
  .nav-group,.side-foot{display:none}
  .nav button{width:auto;white-space:nowrap;flex:0 0 auto;grid-template-columns:auto auto}
  .top{position:relative}
  .three,.two{grid-template-columns:1fr}
  .form-row,.form-row.compact{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  .auth-hero{display:none}
}
@media(max-width:760px){
  .content{padding:14px}
  .top{display:block;padding:12px}
  .top-right{width:100%;min-width:0;justify-content:flex-start;margin-top:10px}
  .client-switch,.brand-switch{width:100%;max-width:none;min-width:0}
  .page-head{display:block}
  .page-head h1{font-size:25px}
  .actions{justify-content:stretch;margin-top:12px}
  .actions .btn{flex:1 1 160px}
  .cards,.flow-card{grid-template-columns:1fr}
  .workshop-tabs{grid-template-columns:1fr 1fr}
  table{min-width:820px}
  .modal-head{align-items:flex-start;display:grid}
  .modal-actions{justify-content:flex-start}
  .toast{right:14px;bottom:14px}
}
@media(max-width:480px){
  .auth-main{padding:18px}
  .auth-box{padding:20px}
  .brand{padding:0 14px}
  .brand b{font-size:16px}
  .nav button{padding:9px 10px}
  .btn{width:auto}
  .metric .value{font-size:28px}
}
/* ==========================================
   🎯 移动端与窄屏幕表格防切断、防死锁补丁
   ========================================== */

/* 1. 强行让所有表格单元格内的文字自动换行，绝对不硬撑宽度 */
table th, table td {
  white-space: normal !important;  /* 允许文字自然换行 */
  word-break: break-word !important; /* 遇到长英文或特殊符号自动断行 */
  vertical-align: middle;
}

/* 2. 限制表格最大宽度，并允许它在装不下时可以左右横向滑动 */
table {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;     /* 核心：超出时允许横向滚动条出现 */
  -webkit-overflow-scrolling: touch; /* 让手机端手指滑动时像丝一样顺滑 */
}