/* ============================================================
   私有工具站 · 样式
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f5f6f9; --surface:#fff; --surface-2:#fafbfd;
  --border:#e6e8ef; --border-strong:#d6dae6;
  --text:#141821; --text-2:#525a6b; --text-3:#828a9b;
  --brand:#3b5bdb; --brand-2:#5b7cfa; --brand-soft:#eef1fd;
  --ok:#0f9d58; --warn:#d97706; --danger:#dc2626;
  --r:15px;
  --shadow-sm:0 1px 2px rgba(20,24,33,.05);
  --shadow-md:0 10px 28px -10px rgba(20,24,33,.16);
  --shadow-lg:0 24px 60px -20px rgba(20,24,33,.28);
}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);font-size:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit;outline:none}
.hidden{display:none !important}
::selection{background:#c9d5ff}
.pwd-mask{-webkit-text-security:disc;text-security:disc}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:39px;padding:0 15px;border-radius:10px;
  border:1px solid var(--border-strong);background:var(--surface);
  color:var(--text);font-weight:500;font-size:14.5px;
  transition:background .16s,border-color .16s,transform .16s,box-shadow .16s;
  white-space:nowrap;
}
.btn:hover{background:var(--surface-2);border-color:#c3c9d8}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  border-color:#3251c9;color:#fff;
  box-shadow:0 1px 2px rgba(59,91,219,.35),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{background:linear-gradient(180deg,#6a89ff,#3f60e0);border-color:#2b47b8}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:#eef0f6;border-color:transparent}
.btn-sm{height:34px;padding:0 12px;font-size:13.8px;border-radius:9px}
.btn-block{width:100%}
.btn-danger{color:#b42318;border-color:#f0d0cd;background:#fff}
.btn-danger:hover{background:#fef2f2;border-color:#e8b3ae}
.icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- 登录 ---------------- */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px}
.login-shell{
  width:min(1040px,100%);min-width:0;display:grid;grid-template-columns:1.05fr .95fr;
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--shadow-lg);overflow:hidden;min-height:600px;
}
.login-shell > *{min-width:0}
.login-brand{
  position:relative;overflow:hidden;padding:42px 40px;
  background:radial-gradient(120% 120% at 8% 0%,#2b3a70 0%,#1a2140 45%,#12172b 100%);
  color:#eef1fb;display:flex;flex-direction:column;
}
.login-brand::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(80% 70% at 30% 20%,#000 30%,transparent 100%);
  mask-image:radial-gradient(80% 70% at 30% 20%,#000 30%,transparent 100%);
}
.login-brand::after{
  content:"";position:absolute;width:420px;height:420px;right:-160px;bottom:-190px;
  background:radial-gradient(circle,rgba(91,124,250,.55),transparent 62%);filter:blur(6px);
}
.brand-top{display:flex;align-items:center;gap:10px;position:relative;z-index:2}
.logo-mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(150deg,#7a96ff,#3b5bdb);color:#fff;
  box-shadow:0 6px 16px -6px rgba(91,124,250,.9);flex:none;
}
.logo-mark svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.brand-name{font-weight:650;letter-spacing:.4px;font-size:16.5px}
.brand-name span{color:#8fa4ff;font-weight:450;margin-left:6px;font-size:13.5px}
.brand-copy{position:relative;z-index:2;margin-top:auto;padding-top:40px}
.brand-copy h1{font-size:31px;line-height:1.34;font-weight:650;letter-spacing:-.4px;max-width:13em}
.brand-copy p{margin-top:15px;color:#a5b0cd;font-size:14.5px;max-width:26em;line-height:1.75}
.brand-list{list-style:none;margin-top:26px;display:grid;gap:12px;position:relative;z-index:2}
.brand-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:#cfd7ee}
.dot{width:21px;height:21px;border-radius:6px;display:grid;place-items:center;background:rgba(255,255,255,.1);flex:none}
.dot svg{width:13px;height:13px;stroke:#9fb3ff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.brand-foot{position:relative;z-index:2;margin-top:34px;font-size:12.5px;color:#7b87a8;letter-spacing:.3px}

.login-form{padding:46px 44px;display:flex;flex-direction:column;justify-content:center}
.login-form h2{font-size:23px;font-weight:650;letter-spacing:-.2px}
.login-form .sub{margin-top:6px;color:var(--text-3);font-size:14px}
.field{margin-top:19px}
.field label{display:block;font-size:13.5px;font-weight:550;color:var(--text-2);margin-bottom:7px}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .icon{position:absolute;left:12px;color:var(--text-3);width:17px;height:17px;pointer-events:none}
.input-wrap input{
  width:100%;height:45px;border-radius:10px;border:1px solid var(--border-strong);
  background:var(--surface-2);padding:0 12px 0 40px;font-size:15px;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.input-wrap input::placeholder{color:#aab1c0}
.input-wrap input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3.5px rgba(59,91,219,.12)}
.eye{position:absolute;right:8px;width:32px;height:32px;border-radius:7px;display:grid;place-items:center;color:var(--text-3)}
.eye:hover{background:#eceff6;color:var(--text-2)}
.row-between{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:13.5px}
.check{display:flex;align-items:center;gap:7px;color:var(--text-2);cursor:pointer;user-select:none}
.check input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
.link{color:var(--brand);font-weight:500}
.link:hover{text-decoration:underline}
.login-form .btn-primary{height:47px;margin-top:22px;border-radius:10px;font-size:15.5px}
.hint{
  margin-top:18px;padding:12px 14px;border-radius:10px;background:var(--brand-soft);
  border:1px solid #dfe5fb;color:#3d4a72;font-size:13px;line-height:1.7;
}
.hint b{color:#2b3a6b}
.login-foot{margin-top:20px;text-align:center;font-size:13px;color:var(--text-3)}
.alert{
  margin-top:14px;padding:11px 13px;border-radius:9px;font-size:13.5px;line-height:1.6;
  background:#fef2f2;border:1px solid #fbd5d5;color:#b42318;
}
.alert.ok{background:#ecfdf3;border-color:#c9eeda;color:#087443}

/* ---------------- 顶栏 ---------------- */
.topbar{
  position:sticky;top:0;z-index:40;height:64px;
  display:flex;align-items:center;gap:18px;padding:0 26px;
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar .brand-top{gap:9px;flex:none}
.topbar .logo-mark{width:31px;height:31px;border-radius:9px}
.search{position:relative;flex:1;max-width:430px;display:flex;align-items:center;margin-left:8px}
.search .icon{position:absolute;left:12px;width:16px;height:16px;color:var(--text-3);pointer-events:none}
.search input{
  width:100%;height:39px;border-radius:10px;border:1px solid var(--border);
  background:#f7f8fb;padding:0 74px 0 37px;font-size:14.5px;transition:.16s;
}
.search input:focus{background:#fff;border-color:#c5cfe8;box-shadow:0 0 0 3px rgba(59,91,219,.09)}
.search kbd{
  position:absolute;right:9px;font-family:inherit;font-size:12px;color:var(--text-3);
  border:1px solid var(--border-strong);border-radius:5px;padding:1px 6px;background:#fff;
  box-shadow:0 1px 0 #e3e6ee;
}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}

.user-wrap{position:relative}
.user-chip{
  display:flex;align-items:center;gap:9px;height:40px;padding:0 9px 0 4px;
  border-radius:11px;border:1px solid transparent;transition:.15s;
}
.user-chip:hover{background:#f2f4f9;border-color:var(--border)}
.user-chip[aria-expanded="true"]{background:#f2f4f9;border-color:var(--border-strong)}
.avatar{
  width:33px;height:33px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(150deg,#5b7cfa,#3b5bdb);color:#fff;font-size:13.5px;font-weight:600;
  border:2px solid #fff;box-shadow:0 0 0 1px var(--border-strong);flex:none;
}
.user-chip .u-txt{text-align:left;line-height:1.25}
.user-chip .nm{font-size:13.8px;font-weight:600}
.user-chip .rl{font-size:12px;color:var(--text-3)}
.user-chip .caret{width:14px;height:14px;stroke:var(--text-3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.user-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:196px;z-index:45;
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:5px;
  box-shadow:var(--shadow-md);display:none;
}
.user-menu.on{display:block}
.user-menu button{
  width:100%;display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;
  font-size:14.2px;color:var(--text-2);text-align:left;
}
.user-menu button:hover{background:#f4f6fb;color:var(--text)}
.user-menu button .icon{width:16px;height:16px;color:var(--text-3)}
.user-menu button.danger{color:#b42318}
.user-menu button.danger .icon{color:#c4726a}
.user-menu .divider{height:1px;background:var(--border);margin:5px 4px}

.notice{
  display:flex;align-items:center;gap:8px;padding:9px 26px;
  background:linear-gradient(90deg,#eef1fd,#f4f7ff 60%,#eef1fd);
  border-bottom:1px solid #e2e8f8;color:#3f4c74;font-size:13.5px;
}
.notice .icon{width:15px;height:15px;color:#4b64c8}
.notice .sep{color:#c2cbe4;margin:0 2px}
.notice .tail{margin-left:auto;color:#4b64c8;font-weight:550;font-size:13px}

/* ---------------- 主体 ---------------- */
main{max-width:1200px;margin:0 auto;padding:28px 26px 74px}
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hero h1{font-size:26px;font-weight:660;letter-spacing:-.35px;display:flex;align-items:center;gap:10px}
.hero h1 .count{
  font-size:12.8px;font-weight:600;color:#4356a8;background:var(--brand-soft);
  border:1px solid #dde4fa;padding:3px 9px;border-radius:20px;letter-spacing:0;
}
.hero p{margin-top:7px;color:var(--text-3);font-size:14.5px}
.stats{display:flex;gap:10px}
.stat{min-width:112px;padding:11px 15px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm)}
.stat .k{font-size:12.5px;color:var(--text-3);display:flex;align-items:center;gap:5px}
.stat .v{font-size:20px;font-weight:660;letter-spacing:-.3px;margin-top:1px;font-variant-numeric:tabular-nums}
.stat .v small{font-size:12.5px;color:var(--text-3);font-weight:500;margin-left:3px}

.toolbar{display:flex;align-items:center;gap:8px;margin-top:26px;padding-bottom:2px;flex-wrap:wrap}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  height:34px;padding:0 14px;border-radius:20px;border:1px solid transparent;
  background:#eceef4;color:var(--text-2);font-size:14px;font-weight:500;
  transition:.15s;display:inline-flex;align-items:center;gap:6px;
}
.chip:hover{background:#e3e7f0;color:var(--text)}
.chip.on{background:#1b2136;color:#fff;box-shadow:0 2px 8px -2px rgba(27,33,54,.5)}
.chip .n{font-size:12.2px;opacity:.55;font-variant-numeric:tabular-nums}
.sort{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text-3)}
.sort select{height:34px;border-radius:9px;border:1px solid var(--border-strong);background:#fff;padding:0 9px;font-size:14px;color:var(--text-2);cursor:pointer}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(302px,1fr));gap:14px;margin-top:18px}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 16px 14px;box-shadow:var(--shadow-sm);
  transition:transform .18s cubic-bezier(.3,.8,.4,1),box-shadow .18s,border-color .18s;
  display:flex;flex-direction:column;gap:12px;position:relative;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#cdd5e8}
.card.menu-open{z-index:20}
.card-top{display:flex;align-items:flex-start;gap:12px;padding-right:26px}
.ticon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none}
.ticon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.ticon img{width:100%;height:100%;object-fit:contain;display:block;border-radius:inherit}
.ticon.has-img{overflow:hidden}
.card-name{font-weight:620;font-size:15.5px;letter-spacing:-.1px;display:flex;align-items:center;gap:6px;line-height:1.4}
.badge-new{font-size:11px;font-weight:600;color:#0b7a43;background:#e6f7ee;border:1px solid #c9eeda;padding:0 5px;border-radius:5px;letter-spacing:.2px;line-height:17px}
.card-sub{font-size:13px;color:var(--text-3);margin-top:2px}
.card-desc{
  font-size:14px;color:var(--text-2);line-height:1.62;height:3.24em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{font-size:12.2px;color:var(--text-3);background:#f3f4f8;border-radius:5px;padding:1px 7px}
.card-foot{
  display:flex;align-items:center;gap:8px;margin-top:auto;
  padding-top:11px;border-top:1px dashed #eceef4;
  font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums;
}
.foot-meta{display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
.card-foot .sep{width:3px;height:3px;border-radius:50%;background:#c9cedb;flex:none}
.plat{
  display:inline-flex;align-items:center;font-size:11.4px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:#6b7488;background:#f1f3f8;border-radius:4px;padding:0 5px;line-height:17px;
}

/* 卡片右上角「更多」 */
.card-more{
  position:absolute;top:12px;right:11px;width:29px;height:29px;border-radius:8px;
  display:grid;place-items:center;color:var(--text-3);opacity:.5;transition:.15s;z-index:12;
}
.card-more:hover,.card-more.on{opacity:1;background:#eef1f8;color:var(--text)}
.card-more svg{width:17px;height:17px;fill:currentColor;stroke:none}
.card-more i{display:block;width:3.5px;height:3.5px;border-radius:50%;background:currentColor;margin:1.4px 0}

.cmenu{
  position:absolute;top:46px;right:11px;min-width:184px;z-index:30;
  background:#fff;border:1px solid var(--border);border-radius:11px;padding:5px;
  box-shadow:0 14px 34px -12px rgba(20,24,33,.32);display:none;
}
.cmenu.on{display:block}
.cmenu button{
  width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;
  font-size:13.8px;color:var(--text-2);text-align:left;
}
.cmenu button:hover{background:#f4f6fb;color:var(--text)}
.cmenu button .icon{width:15px;height:15px;color:var(--text-3)}
.cmenu button.danger{color:#b42318}
.cmenu button.danger .icon{color:#c4726a}
.cmenu .divider{height:1px;background:var(--border);margin:4px}

.dl-btn{
  margin-left:auto;flex:none;height:32px;min-width:78px;padding:0 12px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff;
  border:1px solid #3251c9;font-size:13.2px;font-weight:600;letter-spacing:.2px;
  box-shadow:0 1px 2px rgba(59,91,219,.28),inset 0 1px 0 rgba(255,255,255,.16);
  transition:filter .15s,transform .15s,background .2s,color .2s,border-color .2s;
}
.dl-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dl-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.dl-btn:active{transform:translateY(0);filter:brightness(.97)}
.dl-btn:focus-visible{outline:2px solid #7f95ff;outline-offset:2px}
.dl-btn.busy{background:#eef1fd;color:#3b52a8;border-color:#d8dff8;box-shadow:none;cursor:progress}
.dl-btn.done{background:#e8f8ef;color:#0b7a43;border-color:#c9eeda;box-shadow:none}

.empty{grid-column:1/-1;text-align:center;padding:66px 20px;color:var(--text-3)}
.empty svg{width:42px;height:42px;stroke:#c3cad9;fill:none;stroke-width:1.4;margin-bottom:12px}
.empty h3{font-size:16px;color:var(--text-2);font-weight:600;margin-bottom:6px}
.empty p{font-size:14px;margin-bottom:16px}

/* ---------------- 详情抽屉 ---------------- */
.scrim{position:fixed;inset:0;background:rgba(18,22,34,.34);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:50}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;bottom:0;right:0;height:auto;width:min(492px,94vw);z-index:60;
  background:var(--surface);border-left:1px solid var(--border);
  box-shadow:-20px 0 60px -24px rgba(18,22,34,.3);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;
}
.drawer.on{transform:none}
.dw-head{padding:17px 21px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.dw-head-txt{min-width:0}
.dw-head .ticon{width:44px;height:44px;border-radius:12px}
.dw-title{font-size:17px;font-weight:650;letter-spacing:-.2px}
.dw-ver{font-size:12.8px;color:var(--text-3);margin-top:2px;display:flex;align-items:center;gap:6px}
.dw-ver .pill{background:var(--brand-soft);color:#3b52a8;border-radius:5px;padding:0 5px;font-weight:600;font-size:11.5px}
.close-x{margin-left:auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--text-3);flex:none}
.close-x:hover{background:#f0f2f7;color:var(--text)}
.dw-body{flex:1;overflow-y:auto;padding:19px 21px 26px}
.dw-desc{font-size:14.5px;color:var(--text-2);line-height:1.75}
.dw-sec{margin-top:22px}
.dw-sec h4{font-size:13px;font-weight:650;color:var(--text-2);letter-spacing:.2px;margin-bottom:10px}
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.meta-cell{background:var(--surface);padding:10px 13px}
.meta-cell .k{font-size:12px;color:var(--text-3)}
.meta-cell .v{font-size:14px;font-weight:550;margin-top:1px}
.dw-foot{padding:15px 21px 17px;border-top:1px solid var(--border);background:var(--surface-2);display:flex;flex-direction:column;gap:10px}
.dw-foot .row{display:flex;gap:8px}
.dw-foot .btn-primary{flex:1;height:45px;border-radius:10px;font-size:15px}
.dw-foot .btn{height:45px;border-radius:10px}
.sha{font-size:11.5px;color:var(--text-3);display:flex;align-items:center;gap:6px;font-family:ui-monospace,Menlo,Consolas,monospace}
.sha span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sha button{margin-left:auto;color:var(--brand);font-family:inherit;font-size:11.5px;flex:none}

/* ---------------- 弹窗 ---------------- */
.modal-scrim{position:fixed;inset:0;background:rgba(18,22,34,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:70;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-scrim.on{opacity:1;pointer-events:auto}
.modal{
  width:min(640px,100%);max-height:92vh;background:var(--surface);border-radius:16px;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(10px) scale(.99);transition:transform .22s;
}
.modal-scrim.on .modal{transform:none}
.modal-lg{width:min(760px,100%)}
.modal-sm{width:min(460px,100%)}
.modal-head{display:flex;align-items:center;gap:10px;padding:17px 21px;border-bottom:1px solid var(--border);flex:none}
.modal-head h3{font-size:17px;font-weight:650}
.modal-body{padding:19px 21px;overflow-y:auto;display:flex;flex-direction:column;gap:15px}
.modal-foot{padding:14px 21px;border-top:1px solid var(--border);background:var(--surface-2);display:flex;gap:8px;justify-content:flex-end;flex:none}

/* 操作确认弹窗（替代系统 confirm） */
.cf-scrim{z-index:80;background:rgba(16,20,31,.52);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.cf-modal{
  width:min(452px,100%);border-radius:18px;
  box-shadow:0 32px 70px -22px rgba(12,16,26,.5),0 0 0 1px rgba(255,255,255,.6) inset;
  transform:translateY(14px) scale(.96);
  transition:transform .24s cubic-bezier(.2,.9,.3,1.15);
}
.cf-scrim.on .cf-modal{transform:none}
.cf-modal:focus,.cf-modal:focus-visible{outline:none}
.cf-main{display:flex;gap:16px;padding:24px 24px 20px}
.cf-badge{
  width:46px;height:46px;flex:none;margin-top:-1px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(180deg,#fff1f0,#ffe4e1);color:#d0312d;
  border:1px solid #f8d6d2;box-shadow:0 2px 6px rgba(208,49,45,.1);
}
.cf-badge svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.cf-badge.info{
  background:linear-gradient(180deg,#eef2ff,#e3e9fd);color:var(--brand);
  border-color:#d3dbf8;box-shadow:0 2px 6px rgba(59,91,219,.1);
}
.cf-copy{min-width:0;flex:1}
.cf-copy h3{font-size:18px;font-weight:650;letter-spacing:-.25px;line-height:1.35}
.cf-copy p{margin-top:7px;font-size:14px;color:var(--text-2);line-height:1.62;word-break:break-word}
.cf-copy p b{font-weight:650;color:var(--text)}
.cf-note{
  margin-top:12px;padding:9px 11px;border-radius:9px;
  background:#fdf4f3;border:1px solid #f7dedb;color:#a5342c;
  font-size:13.2px;line-height:1.6;display:flex;gap:7px;align-items:flex-start;
}
.cf-note::before{content:"";width:3px;flex:none;align-self:stretch;border-radius:2px;background:#e8847c}
.cf-foot{display:flex;gap:9px;justify-content:flex-end;padding:0 24px 21px}
.cf-foot .btn{height:38px;min-width:82px;font-size:14.2px}
.btn-danger-solid{
  background:linear-gradient(180deg,#e04b3e,#cb2a1d);border-color:#b32417;color:#fff;
  box-shadow:0 1px 2px rgba(185,38,26,.34),inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-danger-solid:hover{background:linear-gradient(180deg,#eb5a4d,#d53326);border-color:#a42114}
.cf-foot .btn:focus-visible{outline:2px solid rgba(20,24,33,.18);outline-offset:2px}
.btn-danger-solid:focus-visible{outline:2px solid rgba(203,42,29,.4);outline-offset:2px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.f-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.f-field label{font-size:13.2px;font-weight:550;color:var(--text-2)}
.f-field label .rq{color:var(--danger);margin-left:2px}
.f-field input[type=text],.f-field input[type=password],.f-field select,.f-field textarea{
  width:100%;border-radius:9px;border:1px solid var(--border-strong);background:var(--surface-2);
  font-size:14.5px;padding:0 11px;height:41px;transition:.16s;
}
.f-field input:disabled{background:#f1f3f8;color:var(--text-3);cursor:not-allowed}
.f-field textarea{height:auto;padding:9px 11px;line-height:1.6;resize:vertical;min-height:64px}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(59,91,219,.1);
}
.f-hint{font-size:12.3px;color:var(--text-3)}
.plat-checks{display:flex;gap:15px;align-items:center;height:41px}
.plat-checks label{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text-2);cursor:pointer}
.plat-checks input{accent-color:var(--brand);width:15px;height:15px}
.drop{
  border:1.5px dashed var(--border-strong);border-radius:11px;background:var(--surface-2);
  padding:17px;text-align:center;cursor:pointer;transition:.16s;position:relative;
}
.drop:hover,.drop.drag{border-color:var(--brand);background:#f7f9ff}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .t{font-size:14px;color:var(--text-2);font-weight:550}
.drop .s{font-size:12.8px;color:var(--text-3);margin-top:3px}
.drop .picked{font-size:13.5px;color:var(--brand);font-weight:600;margin-top:4px;word-break:break-all}

/* 图标选择 */
.icon-pick{
  display:flex;gap:13px;align-items:flex-start;padding:12px;
  border:1px solid var(--border);border-radius:11px;background:var(--surface-2);
}
.icon-preview{
  width:52px;height:52px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:#eaeef7;color:#949db3;overflow:hidden;
}
.icon-preview svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.icon-preview img{width:100%;height:100%;object-fit:contain;display:block}
.icon-preview.has-img{background:transparent}
.icon-pick-txt{min-width:0;flex:1}
.icon-pick-txt .t{font-size:14.2px;color:var(--text);font-weight:550;line-height:1.4;word-break:break-all}
.icon-pick-txt .s{font-size:12.9px;color:var(--text-3);margin-top:3px;line-height:1.55}
.icon-pick-acts{display:flex;align-items:center;gap:11px;margin-top:8px}
.link-btn{
  font-size:13.2px;font-weight:550;color:var(--brand);background:none;border:0;
  padding:0;cursor:pointer;line-height:1.4;
}
.link-btn:hover{text-decoration:underline}

/* 详情里的安装包卡片 */
.pkg-card{border:1px solid var(--border);border-radius:10px;padding:12px 13px;background:var(--surface-2)}
.pkg-name{font-size:14.2px;font-weight:550;line-height:1.45;word-break:break-all}
.pkg-sub{font-size:12.9px;color:var(--text-3);margin-top:4px}
.pkg-acts{display:flex;align-items:center;gap:9px;margin-top:9px}
.pkg-acts .dot{color:#c8cddb;font-size:12px}
.progress{height:6px;border-radius:99px;background:#e8ebf3;overflow:hidden;display:none}
.progress.on{display:block}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand-2),var(--brand));transition:width .2s}

/* ---------------- 设置面板 ---------------- */
.set-tabs{display:flex;gap:2px;padding:0 21px;border-bottom:1px solid var(--border);background:var(--surface);flex:none}
.set-tab{
  height:44px;padding:0 15px;font-size:14.8px;font-weight:550;color:var(--text-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s;
}
.set-tab:hover{color:var(--text);background:#f6f8fc}
.set-tab.on{color:var(--brand);border-bottom-color:var(--brand)}
.set-body{flex:1;overflow-y:auto;background:var(--surface)}
.set-pane{padding:21px}
.set-block + .set-block{margin-top:28px;padding-top:24px;border-top:1px dashed var(--border)}
.set-title{font-size:15px;font-weight:650;margin-bottom:11px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.set-note{font-size:12.8px;font-weight:400;color:var(--text-3)}
.set-form{display:flex;flex-direction:column;gap:13px}
.set-form .f-row{gap:13px}
.set-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}

.user-list{display:flex;flex-direction:column;gap:8px}
.user-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);flex-wrap:wrap}
.u-main{min-width:0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.u-name{font-size:14.8px;font-weight:600}
.u-acc{font-size:13px;color:var(--text-3);font-family:ui-monospace,Menlo,Consolas,monospace}
.u-badge{font-size:11.8px;font-weight:600;padding:1px 7px;border-radius:20px;border:1px solid}
.u-badge.admin{color:#4356a8;background:var(--brand-soft);border-color:#dde4fa}
.u-badge.user{color:var(--text-3);background:#f1f3f8;border-color:#e4e7ef}
.u-me{font-size:11.8px;color:var(--brand);font-weight:600}
.u-acts{margin-left:auto;display:flex;gap:6px;flex:none;align-items:center}
.u-acts button{height:31px;padding:0 11px;border-radius:7px;border:1px solid var(--border-strong);background:#fff;font-size:13.2px;color:var(--text-2)}
.u-acts button:hover{background:#f5f7fc;border-color:#c3c9d8;color:var(--text)}
.u-acts button.danger{color:#b42318;border-color:#f0d0cd}
.u-acts button.danger:hover{background:#fef2f2}
.u-acts button:disabled{opacity:.35;cursor:not-allowed;background:#fff}
.u-reset{display:flex;gap:6px;margin-left:auto;align-items:center}
.u-reset input{height:31px;width:150px;border-radius:7px;border:1px solid var(--border-strong);background:#fff;padding:0 9px;font-size:13.5px}
.u-reset input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(59,91,219,.1)}

.cat-list{display:flex;flex-direction:column;gap:8px}
.cat-row{display:flex;align-items:center;gap:10px;padding:7px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.cat-dot{width:13px;height:13px;border-radius:4px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.cat-name{
  flex:1;min-width:0;height:34px;border:1px solid transparent;border-radius:7px;
  background:transparent;padding:0 8px;font-size:14.8px;font-weight:600;
}
.cat-name:hover{border-color:var(--border-strong);background:#fff}
.cat-name:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(59,91,219,.1)}
.cat-count{font-size:12.8px;color:var(--text-3);flex:none;min-width:66px;text-align:right}
input[type=color]{
  width:34px;height:31px;padding:2px;border:1px solid var(--border-strong);border-radius:7px;
  background:#fff;cursor:pointer;flex:none;
}
.color-row{display:flex;align-items:center;gap:9px;height:41px}

/* ---------------- 更新提示条 ---------------- */
.upd-bar{
  position:fixed;left:50%;top:16px;transform:translate(-50%,-170%);
  z-index:95;display:flex;align-items:center;gap:10px;
  padding:8px 9px 8px 14px;border-radius:12px;background:#1b2136;color:#fff;
  font-size:13.6px;line-height:1;white-space:nowrap;
  max-width:calc(100vw - 28px);box-shadow:0 16px 38px -14px rgba(18,22,34,.66);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.1);
}
.upd-bar.on{transform:translate(-50%,0)}
.upd-bar svg{width:15px;height:15px;flex:none;stroke:#9fb4ff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.upd-bar button{
  height:29px;padding:0 13px;border-radius:8px;flex:none;
  background:#fff;color:#1b2136;font-size:13px;font-weight:600;
  transition:background .15s;
}
.upd-bar button:hover{background:#e8ecfa}

/* ---------------- toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%,16px);
  background:#1b2136;color:#fff;font-size:13.8px;padding:11px 17px;border-radius:10px;
  box-shadow:0 14px 34px -12px rgba(18,22,34,.6);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:90;display:flex;align-items:center;gap:8px;
  max-width:min(540px,92vw);
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast svg{width:15px;height:15px;stroke:#7ee2a8;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.toast.err svg{stroke:#ff9a9a}

/* ---------------- 窄屏 ---------------- */
@media (max-width:900px){
  .login-page{padding:14px}
  .login-shell{grid-template-columns:1fr;min-height:0}
  .login-brand{padding:26px 22px 30px}
  .brand-copy{padding-top:22px}
  .brand-copy h1{font-size:23px}
  .brand-copy p{font-size:13.5px}
  .login-form{padding:28px 22px 30px}
  .hero{align-items:flex-start}
  .stats{width:100%}
  .stat{flex:1;min-width:0}
  .topbar{padding:0 14px;gap:10px}
  .search{max-width:none;margin-left:0}
  .search kbd{display:none}
  .search input{padding-right:12px}
  .btn-label{display:none}
  #btnUpload{padding:0 10px}
  #btnSettings{padding:0 10px}
  .user-chip{padding:0 4px}
  .user-chip .u-txt,.user-chip .caret{display:none}
  .notice{padding:8px 14px;font-size:12.8px}
  .notice .hide-sm{display:none}
  .notice .tail{display:none}
  main{padding:20px 14px 60px}
  .f-row{grid-template-columns:1fr}
  .set-pane{padding:16px}
  .set-tabs{padding:0 12px}
  .u-acts{margin-left:0;width:100%}
  .u-reset{margin-left:0;width:100%}
  .u-reset input{flex:1;width:auto}
  .cat-count{display:none}
}
@media (max-width:600px){
  .topbar{gap:8px;padding:0 12px}
  .topbar .brand-name{display:none}
  .top-actions{gap:5px}
  .card-top{padding-right:22px}
}
@media (max-width:520px){
  .cf-main{gap:13px;padding:21px 19px 17px}
  .cf-badge{width:42px;height:42px;border-radius:12px}
  .cf-badge svg{width:21px;height:21px}
  .cf-copy h3{font-size:17px}
  .cf-note{font-size:12.9px}
  .cf-foot{padding:0 19px 19px;gap:8px}
  .cf-foot .btn{flex:1;min-width:0;height:43px;font-size:14.8px}
}