[v-cloak]{display:none}
:root{
  --bg:#0d1015; --panel:#141821; --panel2:#1a1f2a; --line:#232936;
  --txt:#e6e9ef; --sub:#8b93a3; --accent:#3b82f6; --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px}
.app{max-width:1180px;margin:0 auto;padding:18px 18px 90px}

/* 顶栏 */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;position:sticky;top:12px;z-index:20}
.checkall{display:flex;align-items:center;gap:8px;color:var(--sub);cursor:pointer;user-select:none}
.checkall input{width:16px;height:16px;accent-color:var(--accent)}
.pill{font-size:12px;color:var(--sub);background:var(--panel2);border:1px solid var(--line);padding:5px 10px;border-radius:999px;white-space:nowrap}
.tabs{display:flex;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:3px}
.tab{background:transparent;border:0;color:var(--sub);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13px}
.tab.active{background:var(--accent);color:#fff}

/* 卡片网格 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;margin-top:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;position:relative;transition:.15s border-color,.15s transform}
.card:hover{border-color:#2f3a4d;transform:translateY(-1px)}
.card.sel{border-color:var(--accent)}
.card .row1{display:flex;align-items:center;gap:8px}
.card .row1 input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent)}
.uname{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.tag{font-size:11px;padding:3px 8px;border-radius:6px;background:#1e3a8a;color:#bfdbfe;white-space:nowrap}
.state{position:absolute;right:12px;top:10px;font-size:11px;padding:3px 9px;border-radius:999px;background:#2a2f3c;color:var(--sub)}
.state.ok{background:rgba(34,197,94,.14);color:#4ade80;border:1px solid rgba(34,197,94,.35)}
.state.bad{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.state.wait{background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.3)}

.quota{margin-top:12px}
.quota .q-head{display:flex;justify-content:space-between;color:var(--sub);font-size:12px;margin-bottom:6px}
.quota .q-head b{color:var(--txt);font-weight:600}
.bar{height:6px;background:#20262f;border-radius:99px;overflow:hidden}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);width:0%;border-radius:99px;transition:width .4s}
.bar > i.clear{background:linear-gradient(90deg,#f59e0b,#d97706)}
.ts{color:var(--sub);font-size:11.5px;margin-top:6px;text-align:right}

.card .foot{margin-top:14px;display:flex;align-items:center;justify-content:space-between}
.date{color:var(--sub);font-size:11.5px}
.btnrow{display:flex;gap:6px}
.iconbtn{width:32px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:#c7cfdd;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:.12s}
.iconbtn:hover{border-color:#39465c;color:#fff;background:#222a38}
.iconbtn.play:hover{border-color:rgba(34,197,94,.5);color:#4ade80}
.iconbtn.share:hover{border-color:rgba(59,130,246,.55);color:#93c5fd}
.iconbtn.del:hover{border-color:rgba(239,68,68,.5);color:#f87171}
.iconbtn:disabled{opacity:.45;cursor:not-allowed}

.empty{grid-column:1/-1;text-align:center;color:var(--sub);padding:56px 20px;border:1px dashed var(--line);border-radius:14px}
.empty b{color:var(--txt)}

/* 底栏 */
.footbar{position:fixed;left:0;right:0;bottom:0;background:rgba(13,16,21,.88);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:30}
.hint{font-size:12px;color:var(--sub)}
.actions{display:flex;gap:8px}
.btn{border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);padding:8px 14px;font-size:13px;cursor:pointer;transition:.12s}
.btn:hover{border-color:#39465c}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#2f74e0}
.btn.ghost{background:transparent}
.btn.small{padding:6px 10px;font-size:12px}

/* 弹窗 */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.modal h3{margin:0 0 6px;font-size:16px}
.modal .sub{margin:0 0 14px;color:var(--sub);font-size:12.5px;line-height:1.6}
.modal textarea{width:100%;height:150px;background:#0f131a;border:1px solid var(--line);border-radius:10px;color:var(--txt);padding:10px 12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;resize:vertical;outline:none}
.modal textarea:focus{border-color:#33415c}
.modal select{width:100%;background:#0f131a;border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:9px 12px;outline:none;font-size:13px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.link-box{display:flex;gap:8px;margin-top:12px}
.link-box input{flex:1;background:#0f131a;border:1px solid var(--line);border-radius:10px;color:#93c5fd;padding:9px 12px;font-family:ui-monospace,monospace;font-size:12px;outline:none}

/* toast */
.toast{position:fixed;left:50%;top:26px;transform:translateX(-50%);background:#1f2937;color:#e5e7eb;border:1px solid #374151;padding:10px 18px;border-radius:10px;font-size:13px;z-index:99;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.toast.ok{border-color:rgba(34,197,94,.4);color:#86efac}
.toast.bad{border-color:rgba(239,68,68,.45);color:#fca5a5}

@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap}
}