/* ==========================================================================
   图像工坊 —— 视觉参照 aitoearn.ai（浅色 / 紫粉渐变 / 药丸控件 / 侧栏布局）
   ========================================================================== */
:root{
  /* 品牌渐变（源站 oklch(0.74 0.17 3) → oklch(0.71 0.17 294)） */
  --brand-a:#FF77A0;
  --brand-b:#A989FF;
  --brand-ink:#6C4BD6;
  --grad:linear-gradient(90deg,var(--brand-a) 0%,var(--brand-b) 100%);
  --grad-soft:linear-gradient(90deg,rgba(255,119,160,.12) 0%,rgba(169,137,255,.14) 100%);

  --bg:#FAF9FE;
  --bg-2:#FCFCFF;
  --surface:#FFFFFF;
  --line:#F1EEF9;
  --line-2:#E4E0F2;
  --text:#17161C;
  --text-2:#4A4757;
  --muted:#8F8F9F;
  --dim:#B4B1C2;

  --ok:#12B76A; --ok-bg:#E7F8F0;
  --warn:#B54708; --warn-bg:#FEF3E2;
  --err:#D92D20; --err-bg:#FEECEB;

  --r-card:20px; --r-input:12px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(76,56,140,.03), 0 8px 24px -8px rgba(76,56,140,.08);
  --shadow-pop:0 12px 32px rgba(48,32,96,.14);
  --shadow-brand:0 8px 22px rgba(169,137,255,.32);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:14px/1.6 "Inter","Suisseintl",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico-sm{width:15px;height:15px}.ico-md{width:26px;height:26px}
.hidden{display:none!important}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.err{color:var(--err);font-size:13px;min-height:16px;margin-top:10px}
h1{font-size:22px;line-height:1.3;margin:0 0 4px;font-weight:650;letter-spacing:-.3px}
h2.h2{font-size:15px;font-weight:600;margin:0 0 14px;letter-spacing:-.1px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* ============================ 登录 ============================ */
.login-wrap{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
.login-art{
  position:relative;overflow:hidden;padding:56px 48px;display:flex;flex-direction:column;justify-content:center;
  background:
    radial-gradient(760px 460px at 12% 8%, color-mix(in srgb, var(--brand-a) 22%, transparent), transparent 60%),
    radial-gradient(900px 520px at 92% 92%, color-mix(in srgb, var(--brand-b) 26%, transparent), transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%,#F8F5FF 100%);
  border-right:1px solid var(--line);
}
.login-brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:16px;margin-bottom:44px}
.logo-mark{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--grad);box-shadow:var(--shadow-brand);
}
.logo-mark svg{width:19px;height:19px;stroke:#fff;stroke-width:1.7;fill:none}
.login-h1{font-size:40px;line-height:1.22;letter-spacing:-1.2px;font-weight:680;margin:0 0 14px}
.login-sub{color:var(--muted);font-size:15px;margin:0 0 26px}
.login-badges{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2);
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:6px 13px;
}
.login-card{align-self:center;justify-self:center;width:min(392px,88%);padding:30px 28px;
  box-shadow:var(--shadow-pop);margin:32px}
.login-card-title{font-size:20px;font-weight:650;margin:0;letter-spacing:-.3px}
@media(max-width:900px){
  .login-wrap{grid-template-columns:1fr;min-height:auto}
  .login-art{padding:38px 24px 26px;border-right:0;border-bottom:1px solid var(--line)}
  .login-brand{margin-bottom:26px}
  .login-h1{font-size:30px}
  .login-card{width:100%;margin:20px;max-width:none}
}


/* ============================ 配色主题（用户可选） ============================ */
html[data-theme="teal"]{
  --brand-a:#0EA5A4; --brand-b:#3FBF7F; --brand-ink:#0A7A6E;
  --grad-soft:linear-gradient(90deg,rgba(14,165,164,.11) 0%,rgba(63,191,127,.14) 100%);
  --shadow-brand:0 8px 22px rgba(14,165,164,.26);
}
html[data-theme="violet"]{
  --brand-a:#6D4AFF; --brand-b:#A78BFA; --brand-ink:#5B3AE0;
  --grad-soft:linear-gradient(90deg,rgba(109,74,255,.10) 0%,rgba(167,139,250,.15) 100%);
  --shadow-brand:0 8px 22px rgba(109,74,255,.28);
}
html[data-theme="graphite"]{
  --brand-a:#2B2B33; --brand-b:#6A6A7B; --brand-ink:#3A3A45;
  --grad-soft:linear-gradient(90deg,rgba(43,43,51,.07) 0%,rgba(106,106,123,.12) 100%);
  --shadow-brand:0 8px 22px rgba(43,43,51,.22);
}

/* 配色切换控件 */
.theme-row{display:flex;align-items:center;gap:9px;padding:2px 12px 4px}
.theme-label{font-size:11.5px;color:var(--muted);flex:none}
.swatches{display:flex;gap:7px;align-items:center}
.sw{
  width:19px;height:19px;border-radius:50%;border:0;padding:0;cursor:pointer;position:relative;
  box-shadow:0 0 0 1px rgba(23,22,28,.08) inset;transition:transform .15s,box-shadow .15s;
}
.sw:hover{transform:scale(1.12)}
.sw[data-theme="rose"]{background:linear-gradient(135deg,#FF77A0,#A989FF)}
.sw[data-theme="teal"]{background:linear-gradient(135deg,#0EA5A4,#3FBF7F)}
.sw[data-theme="violet"]{background:linear-gradient(135deg,#6D4AFF,#A78BFA)}
.sw[data-theme="graphite"]{background:linear-gradient(135deg,#2B2B33,#6A6A7B)}
.sw.on{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--brand-b)}
.theme-toggle{display:none}

/* ============================ 布局 ============================ */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:236px;flex:none;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:22px;
  padding:20px 14px 16px;background:var(--bg-2);border-right:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px}
.brand-name{font-weight:650;font-size:15px;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}
.brand-name em{
  font-style:normal;font-size:10px;font-weight:600;color:var(--brand-ink);
  background:var(--grad-soft);border-radius:6px;padding:1px 6px;letter-spacing:.2px;
}
.tabs{display:flex;flex-direction:column;gap:3px}
.tab{
  display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;cursor:pointer;
  font:inherit;font-size:14px;color:var(--text-2);padding:10px 12px;border-radius:12px;text-align:left;
  transition:background .16s,color .16s;
}
.tab svg{color:var(--dim);transition:color .16s}
.tab:hover{background:#F4F3F8;color:var(--text)}
.tab:hover svg{color:var(--text-2)}
.tab.active{background:var(--grad-soft);color:var(--brand-ink);font-weight:600}
.tab.active svg{color:var(--brand-ink)}

.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.quota-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 12px}
.quota-line{display:flex;align-items:center;justify-content:space-between;gap:8px}
.quota-bar{height:5px;border-radius:3px;background:#F1F0F5;margin-top:9px;overflow:hidden}
.quota-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--grad);transition:width .4s}
.user-row{display:flex;align-items:center;gap:9px;padding:4px 12px 4px 8px}
.avatar{
  width:30px;height:30px;border-radius:10px;background:var(--grad);color:#fff;font-size:13px;font-weight:650;
  display:grid;place-items:center;flex:none;box-shadow:0 3px 10px color-mix(in srgb, var(--brand-b) 30%, transparent)
}
.user-name{font-size:13.5px;font-weight:550;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-btn{
  background:#fff;border:1px solid var(--line-2);color:var(--muted);width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;cursor:pointer;transition:.15s
}
.icon-btn:hover{color:var(--brand-ink);border-color:var(--brand-b)}

.content{flex:1;min-width:0;padding:30px 34px 70px}
.tab-panel{max-width:1080px;margin:0 auto;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.page-head p{margin:0;font-size:13.5px}

/* ============================ 卡片 ============================ */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:22px;box-shadow:var(--shadow-card);margin-bottom:16px;
}
.tip{
  display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-size:12.5px;line-height:1.6;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 15px;
}
.tip svg{color:var(--brand-b);margin-top:2px}

/* ============================ 表单 ============================ */
.field{display:block;margin-bottom:16px}
.field>span,.lbl{display:block;font-size:12.5px;color:var(--text-2);margin-bottom:7px;font-weight:550}
.lbl em{font-style:normal;font-weight:400}
.label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.label-row .lbl{margin:0}
input,select,textarea{
  width:100%;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-input);
  color:var(--text);padding:11px 13px;font:inherit;font-size:14px;outline:none;
  transition:border-color .15s,box-shadow .15s;appearance:none;
}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:hover,select:hover,textarea:hover{border-color:#D7D1EC}
input:focus,select:focus,textarea:focus{border-color:var(--brand-b);box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-b) 15%, transparent)}
textarea{resize:vertical;min-height:96px;line-height:1.62}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F8F9F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px;cursor:pointer;
}
.charcount{text-align:right;font-size:11.5px;color:var(--dim);margin-top:6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.grid2{grid-template-columns:1fr}}

/* ============================ 按钮 ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:#fff;color:var(--text-2);border:1px solid var(--line-2);
  padding:10px 18px;border-radius:var(--r-pill);font:inherit;font-size:13.5px;font-weight:550;
  cursor:pointer;transition:.16s;white-space:nowrap;
}
.btn:hover{color:var(--text);border-color:#D2CBE9;box-shadow:0 2px 8px rgba(76,56,140,.07)}
.btn.primary{
  background:var(--grad);color:#fff;border:0;box-shadow:var(--shadow-brand);font-weight:600;
}
.btn.primary:hover{filter:brightness(1.04) saturate(1.05);box-shadow:0 10px 26px color-mix(in srgb, var(--brand-b) 40%, transparent)}
.btn.primary:active{transform:translateY(1px)}
.btn.block{width:100%}
.btn.lg{padding:14px;font-size:14.5px;margin-top:4px}
.btn.sm{padding:8px 14px;font-size:13px}
.btn.ghost{background:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}

/* ============================ 分段控件 ============================ */
.seg{
  display:inline-flex;background:color-mix(in srgb, var(--brand-b) 7%, #F5F5F8);border-radius:var(--r-pill);padding:4px;margin-bottom:20px;gap:2px;
}
.seg-btn{
  background:none;border:0;color:var(--muted);padding:8px 22px;border-radius:var(--r-pill);
  font:inherit;font-size:13.5px;font-weight:550;cursor:pointer;transition:.16s;
}
.seg-btn:hover{color:var(--text-2)}
.seg-btn.active{background:#fff;color:var(--text);box-shadow:0 1px 4px rgba(76,56,140,.12)}

/* ============================ 上传 ============================ */
.dropzone{
  border:1.5px dashed var(--line-2);border-radius:16px;padding:20px;cursor:pointer;
  background:#FCFBFF;transition:.16s;
}
.dropzone:hover,.dropzone.over{border-color:var(--brand-b);background:color-mix(in srgb, var(--brand-b) 6%, #fff)}
.dz-inner{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px}
.dz-inner svg{color:var(--brand-b)}
.dz-inner strong{color:var(--text);font-weight:600;display:block;margin-bottom:2px;font-size:13.5px}
.refgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-top:12px}
.ref{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);background:#F6F4FC;cursor:grab}
.ref img{width:100%;height:100%;object-fit:cover;display:block}
.ref.dragging{opacity:.4}
.ref .badge{
  position:absolute;top:6px;left:6px;background:var(--grad);color:#fff;font-size:11px;font-weight:700;
  min-width:19px;height:19px;padding:0 5px;border-radius:7px;display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(76,56,140,.25);
}
.ref .del{
  position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:7px;border:0;
  background:rgba(23,22,28,.62);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;backdrop-filter:blur(4px);
}
.ref .del svg{width:11px;height:11px;stroke-width:2.4}
.ref .mv{position:absolute;bottom:5px;display:flex}
.ref .mv.l{left:5px}.ref .mv.r{right:5px}
.ref .mv button{
  width:21px;height:20px;border-radius:6px;border:0;background:rgba(23,22,28,.62);color:#fff;
  font-size:10px;cursor:pointer;padding:0;backdrop-filter:blur(4px);
}
.ref.uploading::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.55)}
.ref.uploading::before{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid color-mix(in srgb, var(--brand-b) 30%, transparent);border-top-color:var(--brand-b);border-radius:50%;
  animation:spin .8s linear infinite;z-index:2;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================ 尺寸（比例 + 清晰度） ============================ */
.sizegroup + .sizegroup{margin-top:14px}
.sublbl{display:block;font-size:11.5px;color:var(--muted);margin-bottom:8px;letter-spacing:.2px}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}
.ratio-chip{
  display:flex;align-items:center;justify-content:center;gap:7px;background:#FBFAFE;border:1px solid transparent;
  border-radius:12px;padding:9px 8px;cursor:pointer;font:inherit;font-size:12.5px;color:var(--text-2);
  transition:.16s;
}
.chiprow.ratio{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.ratio-ico-wrap{width:20px;height:20px;display:grid;place-items:center;flex:none}
.ratio-chip:hover{background:color-mix(in srgb, var(--brand-b) 8%, #F6F6F9);color:var(--brand-ink)}
.ratio-chip.on{
  color:var(--brand-ink);font-weight:600;
  background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;
  border:1px solid transparent;box-shadow:0 3px 14px color-mix(in srgb, var(--brand-b) 20%, transparent);
}
.ratio-ico{
  display:block;border:1.5px solid currentColor;border-radius:2.5px;opacity:.55;flex:none;
}
.ratio-chip.on .ratio-ico{opacity:1}
.tier-chip{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:110px;
  background:#FBFAFE;border:1px solid transparent;border-radius:12px;padding:9px 13px;
  cursor:pointer;font:inherit;transition:.16s;text-align:left;
}
.tier-chip:hover{background:color-mix(in srgb, var(--brand-b) 8%, #F6F6F9)}
.tier-chip b{font-size:13px;color:var(--text);font-weight:650}
.tier-chip span{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tier-chip em{
  font-size:10.5px;font-style:normal;color:var(--muted);background:#F2F1F6;
  border-radius:6px;padding:1px 7px;margin-top:3px;
}
.tier-chip.on{
  background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;
  border:1px solid transparent;box-shadow:0 3px 14px color-mix(in srgb, var(--brand-b) 20%, transparent);
}
.tier-chip.on b{color:var(--brand-ink)}
.tier-chip.on em{color:var(--brand-b);background:color-mix(in srgb, var(--brand-b) 12%, #fff)}
@media(max-width:600px){
  .chiprow{gap:7px}
  .chiprow.ratio{grid-template-columns:repeat(3,1fr);gap:7px}
  .ratio-chip{padding:8px 4px;font-size:12px;gap:5px}
  .ratio-ico-wrap{width:16px;height:16px}
  .tier-chip{flex:1 1 30%;min-width:0;padding:8px 10px}
}

/* ============================ 状态药丸 ============================ */
.pill{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:550;
  padding:3px 10px;border-radius:var(--r-pill);background:#F4F3F8;color:var(--text-2);white-space:nowrap;
}
.pill.ghost{background:#fff;border:1px solid var(--line-2);color:var(--muted);font-weight:500}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.err{background:var(--err-bg);color:var(--err)}
.pill.run{background:var(--grad-soft);color:var(--brand-ink)}

/* ============================ 任务（内容卡：封面 + 标题 + 元信息 + CTA） ============================ */
.tasklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:16px;align-items:stretch}
.task{
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(76,56,140,.04);
  transition:box-shadow .2s,transform .2s;
}
.task:hover{box-shadow:0 12px 30px -12px rgba(76,56,140,.22);transform:translateY(-2px)}

.task-cover{position:relative;aspect-ratio:16/10;background:#F2F1F7;overflow:hidden;flex:none}
.task-cover img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:transform .38s}
.task:hover .task-cover img{transform:scale(1.045)}
.cov-pill{
  position:absolute;top:9px;left:9px;display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);box-shadow:0 1px 4px rgba(24,18,48,.12);
}
.cov-pill.ok{color:var(--ok)} .cov-pill.err{color:var(--err)} .cov-pill.run{color:var(--brand-ink)}
.cov-dl{
  position:absolute;right:9px;bottom:9px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(23,22,28,.55);color:#fff;backdrop-filter:blur(6px);opacity:0;transition:.2s;
}
.task:hover .cov-dl{opacity:1}
.cov-dl:hover{background:var(--brand-ink)}

.task-cover.ph{display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand-a) 8%,#fff),color-mix(in srgb,var(--brand-b) 12%,#fff))}
.task-cover.ph.failed{background:#FCF5F5}
.ph-inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 18px;text-align:center}
.ph-txt{font-size:11.5px;color:var(--muted);line-height:1.5}
.ph-ico{color:var(--err);display:grid;place-items:center}
.ph-ico svg{width:22px;height:22px}
.task-cover .progress{position:absolute;left:0;right:0;bottom:0;margin:0;border-radius:0}
.spinner.lg{width:20px;height:20px;border-width:2.5px}

.task-body{padding:11px 13px 0;display:flex;flex-direction:column;gap:6px}
.task-title{
  font-size:13px;line-height:1.55;font-weight:550;color:var(--text);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;min-height:2.6em;
}
.task-meta{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;min-width:0}
.task-meta svg{width:13px;height:13px;color:var(--dim);flex:none}
.task-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.task-foot{display:flex;align-items:center;gap:6px;padding:11px 13px 13px;margin-top:auto;flex-wrap:wrap}
.mini.ic{display:inline-flex;align-items:center;justify-content:center;padding:0;width:30px;height:30px;border-radius:9px}
.mini.ic svg{width:13px;height:13px}
.mini.ic span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.task-foot .btn{
  padding:0 13px;font-size:12.5px;gap:6px;height:30px;background:#fff;color:var(--brand-ink);
  border:1px solid color-mix(in srgb,var(--brand-b) 38%, #fff);box-shadow:none;
}
.task-foot .btn svg{width:13.5px;height:13.5px}
.task-foot .btn:hover{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--shadow-brand)}
.push{margin-left:auto}

.empty{
  text-align:center;color:var(--dim);padding:56px 16px;font-size:13.5px;background:#fff;
  border:1px dashed var(--line-2);border-radius:var(--r-card);grid-column:1/-1;
}
.mini{
  background:#fff;border:1px solid var(--line-2);color:var(--text-2);border-radius:var(--r-pill);
  padding:5px 12px;font-size:12px;cursor:pointer;font-family:inherit;transition:.15s
}
.mini:hover{color:var(--brand-ink);border-color:var(--brand-b);background:color-mix(in srgb,var(--brand-b) 6%,#fff)}
.mini.danger{color:var(--err);border-color:#F7D4D1}
.mini.danger:hover{color:#fff;border-color:var(--err);background:var(--err)}

/* ============================ 管理 ============================ */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:16px}
.stat{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 16px;box-shadow:var(--shadow-card);
  position:relative;overflow:hidden;
}
.stat.accent{background:var(--grad-soft);border-color:transparent}
.stat .k{font-size:11.5px;color:var(--muted);margin-bottom:7px}
.stat .v{font-size:23px;font-weight:660;font-variant-numeric:tabular-nums;letter-spacing:-.6px;line-height:1.1}
.stat .v small{font-size:12.5px;font-weight:500;color:var(--muted);letter-spacing:0}
.stat .v.warn{color:var(--warn)}
.stat .v.ok{color:var(--ok)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:600px}
th{
  text-align:left;color:var(--muted);font-weight:550;font-size:11.5px;padding:10px 12px;
  background:#FBFAFF;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:11px 12px;border-bottom:1px solid #F5F3FB;vertical-align:middle;color:var(--text-2)}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FCFBFF}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--muted)}
.addrow{display:flex;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.addrow input{flex:1;min-width:130px;padding:9px 12px;font-size:13px;border-radius:var(--r-pill)}
.addrow .w-sm{max-width:150px;flex:0 1 150px}
.addrow .w-xs{max-width:92px;flex:0 1 92px}
.addrow .btn{border-radius:var(--r-pill)}
.logs{
  max-height:400px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;line-height:1.75;background:#FBFAFF;border:1px solid var(--line);border-radius:14px;padding:10px 12px;
}
.logline{display:flex;gap:9px;padding:2px 0}
.logline .t{color:var(--dim);flex:none}
.logline .lv{flex:none;width:44px;font-weight:600}
.lv.info{color:var(--ok)}.lv.warn{color:var(--warn)}.lv.error{color:var(--err)}
.logline .m{color:var(--text-2);word-break:break-all}

/* ============================ toast / 灯箱 ============================ */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,18px);opacity:0;pointer-events:none;
  background:#1B1826;color:#fff;padding:12px 20px;border-radius:var(--r-pill);font-size:13.5px;
  transition:.24s;z-index:99;max-width:88vw;box-shadow:var(--shadow-pop);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:#B42318}
.lightbox{position:fixed;inset:0;background:rgba(18,14,30,.9);display:flex;align-items:center;
  justify-content:center;z-index:100;padding:18px;cursor:zoom-out;backdrop-filter:blur(6px)}
.lightbox img{max-width:100%;max-height:92vh;border-radius:14px;object-fit:contain;box-shadow:0 24px 60px rgba(0,0,0,.5)}

/* ============================ 响应式 ============================ */
@media(max-width:900px){
  .shell{display:block}
  .sidebar{
    width:auto;height:auto;position:sticky;top:0;z-index:30;display:flex;flex-direction:row;
    flex-wrap:wrap;align-items:center;gap:10px 12px;padding:11px 14px;
    background:rgba(252,252,255,.9);backdrop-filter:blur(14px);border-right:0;border-bottom:1px solid var(--line);
  }
  .brand{order:1;padding:0;flex:1}
  .brand-name{font-size:14px}
  .brand-name em{display:none}
  .sidebar-foot{order:2;margin:0;flex-direction:row;align-items:center;gap:8px}
  .quota-card{background:none;border:0;padding:0}
  .quota-line .muted{display:none}
  .quota-bar{display:none}
  .user-row{padding:0;gap:6px}
  .avatar,.user-name{display:none}
  .tabs{order:3;flex-direction:row;width:100%;gap:6px;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:1;justify-content:center;padding:9px 10px;border:1px solid transparent}
  .tab.active{border-color:color-mix(in srgb, var(--brand-b) 28%, transparent)}
  .content{padding:20px 14px calc(40px + env(safe-area-inset-bottom))}
  h1{font-size:19px}
  .card{padding:16px;border-radius:18px}
  .tasklist{grid-template-columns:1fr}
  .mini.ic{width:36px;height:36px}
  .task-foot .btn{height:36px;padding:0 16px}
  .task-foot{gap:8px}
  .theme-toggle{display:grid}
  .theme-row{
    display:none;position:fixed;top:56px;right:12px;z-index:60;background:#fff;border:1px solid var(--line);
    border-radius:14px;padding:11px 13px;box-shadow:var(--shadow-pop);
  }
  .theme-row.open{display:flex}
  .theme-label{display:none}
  .statgrid{grid-template-columns:repeat(2,1fr);gap:9px}
  .stat{padding:12px}
  .stat .v{font-size:20px}
  .seg{width:100%}
  .seg-btn{flex:1;padding:8px 12px}
}

/* ============================ 任务详情弹层 ============================ */
.modal{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(20,16,34,.55);backdrop-filter:blur(6px);animation:fade .18s ease;
}
.modal-card{
  width:min(940px,100%);max-height:92vh;display:flex;flex-direction:column;background:#fff;
  border-radius:20px;box-shadow:0 30px 80px rgba(20,12,48,.35);overflow:hidden;
}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-title{display:flex;align-items:center;gap:10px;min-width:0}
.dt-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.modal-body{display:grid;grid-template-columns:1.15fr .85fr;gap:0;min-height:0;overflow:hidden;flex:1}
.dt-imgwrap{position:relative;background:#F5F4F9;display:grid;place-items:center;min-height:280px;overflow:hidden}
.dt-imgwrap img{width:100%;height:100%;max-height:62vh;object-fit:contain;display:block;cursor:zoom-in}
.dt-nofig{display:grid;place-items:center;gap:8px;color:var(--muted);font-size:13px;padding:40px;text-align:center}
.dt-side{padding:18px;display:flex;flex-direction:column;gap:14px;overflow:auto;border-left:1px solid var(--line)}
.dt-prompt-wrap .lbl{margin-bottom:6px}
.dt-prompt{font-size:13.5px;line-height:1.65;color:var(--text);margin:0;white-space:pre-wrap;word-break:break-word;
  background:#FBFAFE;border:1px solid var(--line);border-radius:12px;padding:11px 13px;max-height:150px;overflow:auto}
.dt-params{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:12.5px}
.dt-params dt{color:var(--muted);white-space:nowrap}
.dt-params dd{margin:0;color:var(--text-2);word-break:break-all}
.dt-err{font-size:12.5px;color:var(--err);background:var(--err-bg);border-radius:10px;padding:9px 12px;line-height:1.6}
.dt-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.dt-actions .btn{padding:9px 15px;font-size:13px}
.btn.danger{color:var(--err);border-color:#F7D4D1;background:#fff}
.btn.danger:hover{background:var(--err);color:#fff;border-color:var(--err)}
.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 18px;border-top:1px solid var(--line);background:#FCFBFF}
@media(max-width:760px){
  .modal{padding:0;align-items:stretch}
  .modal-card{max-height:100vh;border-radius:0;width:100%}
  .modal-body{grid-template-columns:1fr;overflow:auto}
  .dt-imgwrap{max-height:46vh}
  .dt-imgwrap img{max-height:46vh}
  .dt-side{border-left:0;border-top:1px solid var(--line)}
  .dt-actions .btn{flex:1}
}

/* ============================ 自动补号 ============================ */
.refill-status{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:12.5px;color:var(--text-2);
  background:#FBFAFE;border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:16px;
}
.refill-status b{font-weight:650;color:var(--text)}
.refill-status .sep{color:var(--dim)}
.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.setgrid .field{margin-bottom:8px}
.cbrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.cb{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2);cursor:pointer}
.cb input{width:16px;height:16px;accent-color:var(--brand-ink);cursor:pointer}

/* 单选/复选更明显的选中态 */
.cb input[type="radio"],.cb input[type="checkbox"]{width:17px;height:17px}
.cb:has(input:checked){color:var(--text);font-weight:600}

/* ============================ 通用对话框 ============================ */
.dlg-card{width:min(430px,100%);max-height:88vh}
.dlg-body{padding:16px 18px}
.dlg-text{font-size:13.5px;line-height:1.65;color:var(--text-2);margin:0}
.dlg-body input{margin-top:12px}
.dlg-foot{display:flex;justify-content:flex-end;gap:9px;padding:12px 18px;border-top:1px solid var(--line);background:#FCFBFF}
.dlg-foot .btn{min-width:84px}
.btn.danger-solid{background:var(--err);border-color:var(--err);color:#fff;box-shadow:0 6px 16px rgba(217,45,32,.28)}
.btn.danger-solid:hover{background:#B42318;border-color:#B42318}

/* 账号表 */
.acc-name{font-size:13px;color:var(--text);font-weight:550}
.acc-mail{font-size:11px;color:var(--dim);margin-top:1px}
.cred-num{font-variant-numeric:tabular-nums;font-weight:600}
.acc-sum{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:10px}
.acc-sum b{color:var(--text)}
.rowbtn{display:inline-flex;align-items:center;gap:5px}

/* 用户用量 */
.usage{display:flex;align-items:center;gap:7px}
.usage-bar{display:inline-block;width:56px;height:4px;border-radius:2px;background:#F1F0F5;overflow:hidden}
.usage-bar i{display:block;height:100%;background:var(--grad);border-radius:2px}

/* 修复：全局 input{appearance:none} 把 checkbox/radio 的原生勾选样式也干掉了 */
.cb input[type="checkbox"],
.cb input[type="radio"]{
  -webkit-appearance:auto;
  appearance:auto;
  width:17px;height:17px;min-width:17px;
  padding:0;margin:0;
  background:none;border:0;border-radius:3px;
  accent-color:var(--brand-ink);
  flex:none;cursor:pointer;
}
.cb input[type="radio"]{border-radius:50%}
.cb:has(input:checked){color:var(--text);font-weight:600}

/* 代理状态说明 */
.proxy-note{font-size:12.5px;color:var(--text-2);background:#FBFAFE;border:1px solid var(--line);border-radius:12px;padding:10px 13px;line-height:1.6}
.proxy-note code{font-size:11.5px;background:#F2F1F6;padding:1px 6px;border-radius:5px}
/* 代码块 */
.code{background:#1B1826;color:#E8E6F0;border-radius:12px;padding:13px 15px;overflow:auto;font-size:12.5px;line-height:1.7;margin:10px 0}
.code code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre}
/* Key 展示 */
.keybox{display:flex;gap:8px;align-items:center;background:#F7F5FF;border:1px dashed var(--brand-b);border-radius:12px;padding:11px 13px;margin-top:12px}
.keybox code{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;word-break:break-all;color:var(--brand-ink)}

/* 张数选择 */
.count-pick{display:flex;align-items:center;gap:8px}
.count-pick .lbl{font-size:12px;color:var(--muted);white-space:nowrap}
.seg.mini{gap:2px;padding:3px;border-radius:10px}
.seg.mini .seg-btn{padding:4px 11px;font-size:12.5px;border-radius:8px;min-width:34px}
/* lightbox 必须盖在任务详情弹层(120)之上 */
.lightbox{z-index:300}

/* 文档 iframe */
.docframe{width:100%;height:calc(100vh - 150px);border:1px solid var(--line);border-radius:16px;background:#fff}
@media(max-width:900px){.docframe{height:calc(100vh - 210px)}}