/* ============ 柳州文化扑克 · 在线工作台 设计系统 V2 ============
   主色：紫荆紫（贴合市花主题）；辅以红黄花色色、功能状态色。 */
:root{
  --purple:#7b3fa0; --purple-d:#5e2d7e; --purple-l:#a063c4; --purple-bg:#f3ecf8;
  --red:#c0392b; --ink:#241f2b; --ink-2:#5c5468; --ink-3:#8d8499;
  --line:#e6e0ec; --bg:#f5f2f8; --card:#ffffff;
  --ok:#1e8e5a; --ok-bg:#e7f6ee; --warn:#b26a00; --warn-bg:#fdf3e3;
  --err:#c0392b; --err-bg:#fdecea; --info:#2470b8; --info-bg:#e9f2fb;
  --r-s:8px; --r-m:12px; --r-l:18px;
  --sh-1:0 1px 3px rgba(46,30,64,.07);
  --sh-2:0 4px 18px rgba(46,30,64,.10);
  --sh-3:0 12px 40px rgba(46,30,64,.18);
  --mono:ui-monospace,Consolas,"Cascadia Mono",monospace;
  --sans:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55}
a{color:var(--purple);text-decoration:none} a:hover{text-decoration:underline}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;gap:14px;padding:0 20px;height:54px;position:relative;
  background:linear-gradient(92deg,var(--purple-d),var(--purple) 55%,var(--purple-l));
  color:#fff;position:sticky;top:0;z-index:30;box-shadow:var(--sh-2);flex-wrap:wrap}
.brand{font-weight:800;font-size:15px;letter-spacing:.5px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.brand .logo{display:inline-flex;width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.16);
  align-items:center;justify-content:center;font-size:15px}
nav{display:flex;gap:2px;flex:1;flex-wrap:wrap;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{color:rgba(255,255,255,.82);padding:6px 11px;border-radius:99px;font-size:13.5px;white-space:nowrap;transition:.15s}
nav a:hover{background:rgba(255,255,255,.14);text-decoration:none;color:#fff}
nav a.on{background:#fff;color:var(--purple-d);font-weight:700;box-shadow:var(--sh-1)}
.userv{display:flex;gap:8px;align-items:center;font-size:13px;white-space:nowrap}
main{max-width:1380px;margin:22px auto 60px;padding:0 20px}

/* ---------- 徽章/标签 ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;border-radius:99px;padding:2px 9px;
  background:#eee7f3;color:var(--purple-d);margin-left:4px;vertical-align:middle;font-weight:600;line-height:1.6}
.badge.dry{background:rgba(255,255,255,.2);color:#fff}
.badge.real{background:#8ef0c0;color:#0a4d2f}
.topbar .badge.dry,.topbar .badge.real{background:rgba(255,255,255,.18);color:#fff}
.badge.lock{background:#8ef0c0;color:#0a4d2f}
.badge.nolock{background:#ffd66b;color:#5c4300}
.badge.deg{background:#ffd66b;color:#5c4300}
.badge.rvpass{background:#8ef0c0;color:#0a4d2f}
.badge.rvrej{background:#ffb3a7;color:#6d1410}
.chip{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:3px 13px;background:var(--card);
  color:var(--ink);margin:2px;font-size:13px}
a.chip:hover{border-color:var(--purple-l);color:var(--purple-d);text-decoration:none}
.chip.on{background:var(--purple);border-color:var(--purple);color:#fff}
h1{font-size:21px;margin:6px 0} h2{font-size:19px;margin:4px 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h3{font-size:15px;margin:18px 0 8px}
.small{font-size:12px}.hint{color:var(--ink-3);font-size:12.5px}.mono{font-family:var(--mono);font-size:12px}

/* ---------- 卡片容器 ---------- */
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--sh-1);padding:16px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:16px;margin:10px 0;box-shadow:var(--sh-1)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* ---------- 按钮/表单 ---------- */
button{background:var(--purple);color:#fff;border:0;border-radius:9px;padding:7px 16px;cursor:pointer;
  font-size:13px;font-weight:600;transition:.15s;box-shadow:var(--sh-1)}
button:hover{background:var(--purple-d);transform:translateY(-1px);box-shadow:var(--sh-2)}
button:active{transform:translateY(0)}
button.big{padding:11px 30px;font-size:15px;border-radius:11px}
button.ghost{background:transparent;color:var(--purple-d);border:1.5px solid var(--purple-l);box-shadow:none}
button.ghost:hover{background:var(--purple-bg)}
button.rej{background:var(--err)} button.rej:hover{background:#9b2c20}
button.ok{background:var(--ok)} button.ok:hover{background:#166f45}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
input,select,textarea{border:1.5px solid var(--line);border-radius:9px;padding:7px 10px;font-size:13px;
  font-family:inherit;background:#fff;color:var(--ink);transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--purple-l);box-shadow:0 0 0 3px var(--purple-bg)}
textarea{width:100%;resize:vertical}
label{display:block;margin:8px 0 3px;font-size:12.5px;color:var(--ink-2);font-weight:600}
.inline{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.filters{display:flex;gap:10px;align-items:center;margin:12px 0;flex-wrap:wrap}
.filters input[name=q]{width:230px}

/* ---------- 表格 ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border-radius:var(--r-m);
  overflow:visible;box-shadow:var(--sh-1);font-size:13px;border:1px solid var(--line)}
.tbl th,.tbl td{padding:9px 11px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#faf7fd}
/* 表头吸顶：z-index 必须低于遮罩(40)/抽屉(50)/顶栏(30)，否则会浮在抽屉之上 */
.tbl th{background:#f2ecf7;color:var(--purple-d);font-size:12.5px;position:sticky;top:54px;z-index:5}
.tbl .edit-scene{min-height:38px}
.empty-fld{background:#fff8e1!important;border-color:#eed9a0!important}
/* 矩阵表格内的参考图列（图生图 / 改图用） */
.refcell{white-space:nowrap;min-width:92px}
.refmini{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:5px}
.refmini img{width:34px;height:34px;object-fit:cover;border-radius:5px;
  border:1px solid var(--line);display:block}
button.mini{padding:2px 8px;font-size:11.5px;border-radius:6px}

/* ---------- 状态色 ---------- */
.okbox{background:var(--ok-bg);border:1px solid #bfe7d0;border-radius:var(--r-s);padding:11px 15px;color:#14532d}
.warnbox{background:var(--warn-bg);border:1px solid #eed9a8;border-radius:var(--r-s);padding:11px 15px;color:#7c4a00}
.err{background:var(--err-bg);border:1px solid #f3c0b8;border-radius:var(--r-s);padding:9px 13px;margin:8px 0;color:#7c1d12}
.err-color{color:var(--err)}.ok-color{color:var(--ok)}
.st-queued{color:var(--warn);font-weight:600}.st-running{color:var(--info);font-weight:700}
.st-done{color:var(--ok);font-weight:600}.st-failed{color:var(--err);font-weight:700}
.st-cancelled{color:var(--ink-3)}

/* ---------- 流水线步骤条 ---------- */
.flow{display:flex;gap:0;margin:18px 0;overflow-x:auto;padding-bottom:6px}
.fstep{flex:1;min-width:132px;text-align:center;position:relative;padding:0 4px}
.fstep:not(:last-child):after{content:"";position:absolute;top:17px;left:calc(50% + 22px);width:calc(100% - 44px);
  height:3px;border-radius:2px;background:var(--line)}
.fstep.done:not(:last-child):after{background:var(--ok)}
.fstep .dot{width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin:0 auto 6px;font-size:15px;color:var(--ink-3);position:relative;z-index:1}
.fstep.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.fstep b{font-size:13px;display:block}
.fstep span{font-size:11.5px;color:var(--ink-3)}
.fstep a{display:block;margin-top:4px;font-size:12px}

/* ---------- 统计卡 ---------- */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:14px;margin:16px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:15px 18px;
  text-align:center;box-shadow:var(--sh-1);transition:.15s}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.stat b{display:block;font-size:26px;color:var(--purple-d);font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--ink-3)}
.stat.ok-color b{color:var(--ok)}.stat.err-color b{color:var(--err)}

/* ---------- 进度 ---------- */
.pbar{height:10px;background:#ece6f2;border-radius:99px;overflow:hidden;margin:6px 0}
.pbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--purple-l),var(--purple));transition:width .5s}
.pbar.g i{background:linear-gradient(90deg,#57c98e,var(--ok))}
.jobbar{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0}
.job{width:17px;height:17px;border-radius:5px;display:inline-block;transition:.3s;cursor:default}
.job:hover{transform:scale(1.25)}
.job.pulse{animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- 画廊 ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--sh-1);transition:.18s}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.gimg{aspect-ratio:63/88;background:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.gimg img{max-width:100%;max-height:100%;display:block;cursor:zoom-in}
.noperm{color:#999;font-size:12.5px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;padding:10px}
.noperm:before{content:"🎴";font-size:26px;opacity:.5}
.gmeta{padding:9px 11px;font-size:12.5px;line-height:1.7;border-bottom:1px solid var(--line)}
.gmeta b{font-family:var(--mono);color:var(--purple-d)}
.suit-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:1px}
.sd-黑桃,.sd-梅花{background:#333}.sd-红桃,.sd-方块{background:var(--red)}.sd-大王{background:#c9a227}.sd-小王{background:#5b7fd4}
.alts{display:flex;gap:5px;padding:6px;overflow-x:auto;background:#f8f5fb}
.alt{height:62px;border-radius:6px;cursor:pointer;border:2.5px solid transparent;transition:.15s}
.alt:hover{transform:scale(1.06)} .alt.sel{border-color:var(--purple);box-shadow:0 0 0 2px var(--purple-bg)}
.gact{padding:8px;display:flex;flex-direction:column;gap:7px}
.gact .row{display:flex;gap:6px}
.gact .row button{flex:1;padding:6px 4px;font-size:12.5px}
.rv textarea{font-size:12px}
.rv .chk{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--warn);font-weight:600}
.rv .chk input{width:auto}

/* 灯箱 */
.lightbox{position:fixed;inset:0;background:rgba(20,12,28,.88);z-index:60;display:none;
  align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.lightbox.show{display:flex}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:10px;box-shadow:var(--sh-3)}
.lightbox .cap{position:fixed;bottom:22px;left:0;right:0;text-align:center;color:#d9cfe6;font-size:13px}

/* ---------- 抽屉 ---------- */
.drawer-mask{position:fixed;inset:0;background:rgba(30,20,40,.4);z-index:40;opacity:0;pointer-events:none;transition:.2s}
.drawer-mask.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:-460px;width:440px;max-width:94vw;height:100vh;background:var(--card);
  z-index:50;box-shadow:var(--sh-3);transition:right .25s ease;display:flex;flex-direction:column}
.drawer.show{right:0}
.drawer header{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.drawer header h3{margin:0;flex:1}
.drawer .body{padding:16px 20px;overflow-y:auto;flex:1}
.drawer footer{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.drawer .x{background:none;color:var(--ink-3);font-size:20px;padding:2px 10px;box-shadow:none}
.drawer .x:hover{background:#f2ecf7;color:var(--ink);transform:none}
.fld-meta{font-size:12px;color:var(--ink-3);margin:2px 0 10px}
/* 抽屉内的参考图区（参考图1/2/3） */
.dref{margin-top:14px;padding-top:12px;border-top:1px solid #ece7f2}
.dref-list{display:flex;gap:10px;flex-wrap:wrap;align-items:center;min-height:84px;
  padding:8px;border:1px dashed var(--line);border-radius:8px;background:#faf8fd}
.drefitem{position:relative;margin:0;text-align:center}
.drefitem img{width:72px;height:72px;object-fit:cover;border-radius:7px;
  border:1px solid var(--line);display:block}
.drefitem figcaption{font-size:11px;color:var(--ink-3);margin-top:2px}
.drefitem .x{position:absolute;top:-6px;right:-6px;padding:0 6px;border-radius:99px;
  line-height:1.5;font-size:12px}

/* ---------- 登录 ---------- */
.center-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:radial-gradient(900px 500px at 15% 10%,#8a4fb0 0%,transparent 55%),
  radial-gradient(800px 500px at 85% 90%,#5e2d7e 0%,transparent 55%),#241f2b}
.login-wrap{display:flex;gap:0;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-3);max-width:820px;width:94%}
.login-side{flex:1;background:linear-gradient(160deg,var(--purple-d),var(--purple));color:#fff;padding:40px 34px;
  display:flex;flex-direction:column;justify-content:space-between;min-width:260px}
.login-side h1{font-size:21px;line-height:1.5}.login-side p{font-size:12.5px;opacity:.75}
.login-side .cards-deco{font-size:30px;letter-spacing:6px;opacity:.9}
.login-card{width:340px;background:var(--card);border-radius:0 0 var(--r-l) var(--r-l);padding:36px 32px;flex-shrink:0}
.login-card h2{font-size:17px;text-align:center;margin:0 0 18px}
.login-card input{width:100%;margin:4px 0 12px;padding:10px}
.login-card button{width:100%;margin-top:6px}
@media(max-width:760px){.login-side{display:none}}

/* ---------- 杂项 ---------- */
.logtail{background:#241f2b;color:#a9e8c5;font-size:11.5px;font-family:var(--mono);padding:12px;
  border-radius:var(--r-s);max-height:230px;overflow:auto;white-space:pre-wrap;line-height:1.6}
.prompt-txt{font-size:12px;max-width:430px;line-height:1.6}
.neg{color:#8a4b4b}
.toast{position:fixed;right:20px;bottom:20px;background:#241f2b;color:#fff;padding:11px 20px;border-radius:11px;
  transform:translateY(70px);opacity:0;transition:.3s;z-index:99;font-size:13.5px;box-shadow:var(--sh-3);max-width:70vw}
.toast.show{transform:translateY(0);opacity:1}
.toast.err{background:var(--err)} .toast.ok{background:var(--ok)}
code{background:var(--purple-bg);padding:1.5px 7px;border-radius:5px;font-size:12px;font-family:var(--mono)}
.txdanger{color:var(--warn);font-weight:700}
details.mini summary{cursor:pointer;list-style:none;padding:4px 8px;border-radius:8px}
details.mini summary:hover{background:rgba(255,255,255,.15)}
.mini form input{width:140px}
.empty{padding:34px;text-align:center;color:var(--ink-3);background:var(--card);border-radius:var(--r-m);
  border:1.5px dashed var(--line)}
.empty:before{content:"🗂";display:block;font-size:26px;margin-bottom:8px;opacity:.6}
.skel{background:linear-gradient(100deg,#efe9f4 40%,#f8f4fc 50%,#efe9f4 60%);background-size:200% 100%;
  animation:sk 1.2s infinite;border-radius:var(--r-s)}
@keyframes sk{to{background-position:-200% 0}}
.seg{display:inline-flex;background:#ece6f2;border-radius:99px;padding:3px;gap:2px}
.seg a,.seg button{border-radius:99px;padding:5px 16px;font-size:13px;color:var(--ink-2);background:transparent;
  border:0;box-shadow:none;font-weight:600}
.seg a.on,.seg button.on{background:#fff;color:var(--purple-d);box-shadow:var(--sh-1)}
.anchor-preview{background:linear-gradient(160deg,var(--purple-d),var(--purple-l));border-radius:var(--r-m);
  color:#fff;padding:20px;font-size:13px;line-height:2}
.anchor-preview b{opacity:.7;font-size:11px;display:block;text-transform:uppercase;letter-spacing:1px}
.kbd{font-family:var(--mono);font-size:11px;background:#f2ecf7;border-radius:5px;padding:1px 6px;color:var(--purple-d)}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#d4c8e0;border-radius:9px}
::-webkit-scrollbar-track{background:transparent}






/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
    /* 导航栏响应式 */
    .banner nav {
        flex-wrap: wrap;
        gap: 4px;
        padding: 4px;
    }
    
    .banner nav a {
        font-size: 12px;
        padding: 4px 8px;
    }
    
    /* 主内容区 */
    .main {
        padding: 10px;
    }
    
    /* 表格响应式 */
    .tbl {
        font-size: 12px;
        overflow-x: auto;
        display: block;
    }
    
    .tbl th, .tbl td {
        padding: 6px 4px;
        white-space: nowrap;
    }
    
    /* 登录页 */
    .login-wrap {
        flex-direction: column;
        padding: 10px;
    }
    
    .login-side {
        padding: 20px;
        text-align: center;
    }
    
    .login-card {
        width: 100%;
        padding: 20px;
    }
    
    /* 按钮响应式 */
    button, .btn {
        font-size: 14px;
        padding: 8px 12px;
    }
    
    /* 分页响应式 */
    .pagination-bar {
        flex-direction: column;
        gap: 10px;
    }
    
    /* 卡片网格响应式 */
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }
    
    /* 设置页面 */
    .settings-section {
        padding: 10px;
    }
    
    .settings-form {
        font-size: 14px;
    }
}

/* ===== 超小屏幕 ===== */
@media (max-width: 480px) {
    .banner nav a {
        font-size: 11px;
        padding: 3px 6px;
    }
    
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    
    .heading {
        font-size: 16px;
    }
}

/* ===== 触摸友好 ===== */
@media (hover: none) {
    /* 触摸设备上增加点击区域 */
    button, .btn, a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 禁用 hover 效果 */
    button:hover, .btn:hover {
        opacity: 0.9;
    }
}

/* ============ Toast 通知系统 ============ */
.toast-container {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  font-size: 13.5px;
  min-width: 240px;
  max-width: 400px;
  box-shadow: var(--sh-3);
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition: all 0.3s ease;
}

.toast-item.show {
  transform: translateX(0);
  opacity: 1;
}

.toast-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.toast-msg {
  flex: 1;
  line-height: 1.4;
}

.toast-item.toast-success { background: var(--ok); }
.toast-item.toast-error { background: var(--err); }
.toast-item.toast-warning { background: var(--warn); }
.toast-item.toast-info { background: var(--info); }
.toast-item.toast-loading { background: var(--ink); }

/* ============ 确认对话框 ============ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.confirm-overlay.show {
  opacity: 1;
}

.confirm-dialog {
  background: var(--card);
  border-radius: var(--r-m);
  padding: 24px 28px;
  min-width: 320px;
  max-width: 90vw;
  box-shadow: var(--sh-3);
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.confirm-overlay.show .confirm-dialog {
  transform: scale(1);
}

.confirm-dialog h3 {
  margin: 0 0 12px;
  font-size: 17px;
  color: var(--ink);
}

.confirm-message {
  color: var(--ink-2);
  font-size: 14px;
  margin: 0 0 20px;
  line-height: 1.5;
}

.confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn-cancel {
  background: var(--bg);
  color: var(--ink-2);
  border: 1.5px solid var(--line);
}

.btn-confirm {
  background: var(--purple);
}

/* ============ 面包屑导航 ============ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.breadcrumb a {
  color: var(--purple);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.crumb-sep {
  color: var(--ink-3);
}

.crumb-current {
  color: var(--ink);
  font-weight: 600;
}

/* ============ 加载状态 ============ */
button.loading, .loading {
  opacity: 0.7;
  cursor: wait;
}

button.loading::after {
  content: " ⟳";
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============ 页面标题区改进 ============ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-actions {
  display: flex;
  gap: 8px;
}

/* ============ 进度条 ============ */
.progress-bar {
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--purple);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-fill.success { background: var(--ok); }
.progress-fill.warning { background: var(--warn); }
.progress-fill.error { background: var(--err); }

/* ============ 空状态 ============ */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-3);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.empty-state-desc {
  font-size: 14px;
  margin-bottom: 20px;
}

/* ============ 操作日志 ============ */
.op-log {
  background: var(--ink);
  color: #a9e8c5;
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 12px;
  border-radius: var(--r-s);
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.6;
}

.op-log .error { color: #ff8a80; }
.op-log .warn { color: #ffd54f; }
.op-log .ok { color: #69f0ae; }