:root{
  --bg:#0b0d10; --card:#14171c; --card2:#191d24; --line:#252b35; --line2:#303845;
  --text:#e8ecf3; --muted:#8b95a7; --accent:#3b82f6; --accent2:#60a5fa;
  --ok:#34d399; --warn:#fbbf24; --err:#f87171; --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
body{
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",
       "Microsoft YaHei",sans-serif;
  background:
    radial-gradient(900px 420px at 78% -8%,rgba(59,130,246,.16),transparent 60%),
    radial-gradient(700px 380px at 12% 0%,rgba(16,185,129,.08),transparent 55%),
    var(--bg);
  min-height:100vh;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent2);text-decoration:none}
.hidden{display:none !important}
.muted{color:var(--muted)}
.err{color:var(--err);font-size:13px;min-height:18px}

/* 登录 / 设置 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{
  width:100%;max-width:400px;background:rgba(20,23,28,.92);border:1px solid var(--line);
  border-radius:22px;padding:34px 30px;box-shadow:0 24px 80px rgba(0,0,0,.55);
  backdrop-filter:blur(18px);display:flex;flex-direction:column;gap:14px;
}
.login-card h1{font-size:24px;margin:0}
.login-card p{margin:0}
.logo-dot{width:34px;height:34px;border-radius:11px;flex:none;
  background:linear-gradient(135deg,#3b82f6,#22d3ee 60%,#34d399);
  box-shadow:0 0 24px rgba(59,130,246,.55);position:relative}
.logo-dot:after{content:"";position:absolute;inset:10px;border-radius:4px;background:#0b0d10;opacity:.55}
.code-input{letter-spacing:.45em;text-align:center;font-size:20px;font-weight:600}

/* 布局 */
.app{max-width:900px;margin:0 auto;padding:28px 20px 70px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.brand{display:flex;gap:13px;align-items:center}
.brand h1{font-size:21px;margin:0;letter-spacing:.2px}
.brand p{margin:1px 0 0;font-size:12.5px}
.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ghost{background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:7px 12px;border-radius:10px;font-size:13px;cursor:pointer;transition:.15s}
.ghost:hover{color:var(--text);border-color:var(--line2);background:rgba(255,255,255,.03)}
.card{background:linear-gradient(180deg,rgba(25,29,36,.92),rgba(18,21,26,.92));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:16px;box-shadow:0 10px 40px rgba(0,0,0,.22)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.card-head h2{font-size:16px;margin:0;font-weight:600}
.head-tools{display:flex;align-items:center;gap:10px}
.mini-input{background:var(--card2);border:1px solid var(--line);border-radius:9px;color:var(--text);
  height:32px;padding:0 11px;font-size:13px;width:170px;outline:none}
.mini-input:focus{border-color:#3b5b86}

/* 表单 */
textarea,input,select{font:inherit;color:var(--text)}
textarea{width:100%;background:#0f1217;border:1px solid var(--line);border-radius:13px;
  padding:14px 15px;resize:vertical;min-height:112px;line-height:1.6;outline:none;
  transition:border-color .15s,box-shadow .15s}
textarea::placeholder{color:#5d6678}
textarea:focus{border-color:#3b5b86;box-shadow:0 0 0 3px rgba(59,130,246,.12)}
input[type=text],input[type=password],input[type=search],select{
  background:var(--card2);border:1px solid var(--line);border-radius:10px;height:40px;
  padding:0 12px;outline:none;width:100%}
input:focus,select:focus{border-color:#3b5b86}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8b95a7 50%),linear-gradient(135deg,#8b95a7 50%,transparent 50%);
  background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
.row{display:flex;gap:12px;align-items:flex-end;margin-top:12px;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field span{font-size:12px;color:var(--muted)}
.field.grow,.grow{flex:1}
.field.small{width:130px}
.opts{align-items:flex-end}
.opts .field{width:150px}
button.primary{background:linear-gradient(180deg,#4b8ef7,#2f6fdd);color:#fff;border:1px solid #3f7fe4;
  border-radius:11px;height:40px;padding:0 20px;font-weight:600;cursor:pointer;
  box-shadow:0 6px 20px rgba(59,130,246,.28);transition:.15s}
button.primary:hover{filter:brightness(1.07)}
button.primary:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
button.primary.big{height:44px;padding:0 26px;border-radius:12px;font-size:15px}
button.ghost.big{height:44px;padding:0 20px;border-radius:12px}
.chip{font-size:11.5px;padding:4px 9px;border-radius:999px;border:1px solid var(--line2);
  color:var(--muted);background:rgba(255,255,255,.02);white-space:nowrap}
.chip.on{color:#bfdbfe;border-color:#2f5f9e;background:rgba(59,130,246,.12)}
.chip.warn{color:#fde68a;border-color:#7c5a1e;background:rgba(251,191,36,.1)}
.small-note{font-size:12px;margin:10px 2px 0}

/* 磁力交接 */
.handoff{margin-top:14px;border:1px solid #3a4c68;background:rgba(59,130,246,.07);
  border-radius:13px;padding:14px;display:flex;gap:12px;flex-direction:column}
.handoff .line{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px}
.handoff .magnet{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;color:#9fb3cc;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:180px}
.handoff .btns{display:flex;gap:8px;flex-wrap:wrap}

/* 任务 */
.tasks{display:flex;flex-direction:column;gap:9px}
.task{border:1px solid var(--line);background:rgba(15,18,23,.6);border-radius:13px;
  padding:12px 13px;display:flex;gap:12px;align-items:flex-start}
.task .icon{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-size:15px;background:#1d232c;border:1px solid var(--line)}
.task-main{flex:1;min-width:0}
.task-top{display:flex;gap:8px;align-items:center;justify-content:space-between}
.task-title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-state{font-size:11.5px;color:var(--muted);white-space:nowrap}
.task-msg{font-size:12.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-sub{display:flex;gap:10px;font-size:11.5px;color:#6f788a;margin-top:5px;flex-wrap:wrap}
.task-actions{display:flex;gap:6px;margin-left:4px}
.mini{font-size:11.5px;padding:4px 8px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.mini:hover{color:var(--text);border-color:var(--line2)}
.bar{height:5px;border-radius:99px;background:#0b0e12;margin-top:9px;overflow:hidden;border:1px solid #1d232c}
.bar > i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#3b82f6,#22d3ee);transition:width .5s}
.task.done .bar > i{background:linear-gradient(90deg,#10b981,#34d399)}
.task.error .bar > i{background:linear-gradient(90deg,#ef4444,#f87171)}
.task.error{border-color:#4a2529}
.task.done{opacity:.82}
.empty{padding:20px 4px;text-align:center;font-size:13px}

/* 媒体库 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px}
.tile{min-width:0}
.poster{position:relative;aspect-ratio:2/3;border-radius:11px;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(160deg,#1b212b,#12161c);
  display:grid;place-items:center;color:#3f4757;font-size:26px}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.poster .badge{position:absolute;left:7px;top:7px;font-size:10px;padding:2px 6px;border-radius:6px;
  background:rgba(0,0,0,.62);color:#dbe3ef;backdrop-filter:blur(4px)}
.tile-name{font-size:12px;margin-top:7px;line-height:1.4;color:#c5ccd9;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-sub{font-size:10.5px;color:#6f788a;margin-top:2px}
.foot{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;margin-top:22px;flex-wrap:wrap}

@media (max-width:640px){
  .app{padding:18px 13px 60px}
  .brand h1{font-size:18px}.brand p{display:none}
  .card{padding:14px;border-radius:14px}
  .row,.opts{flex-direction:column;align-items:stretch}
  .opts .field{width:100%}.field.small{width:100%}
  button.primary.big{width:100%}
  .task{flex-wrap:wrap}.task-actions{margin-left:46px}
  .grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .mini-input{width:120px}
}