/* ── CSS 变量（主题） ── */
:root {
  --bg:       #0f172a;
  --surface:  #1e293b;
  --surface2: #0d1626;
  --border:   #334155;
  --text:     #e2e8f0;
  --text2:    #94a3b8;
  --text3:    #64748b;
  --text4:    #475569;
  --blue:     #3b82f6;
  --green:    #4ade80;
  --red:      #f87171;
  --purple:   #8b5cf6;
  --teal:     #10b981;
}
[data-theme="light"] {
  --bg:       #f1f5f9;
  --surface:  #ffffff;
  --surface2: #f8fafc;
  --border:   #e2e8f0;
  --text:     #0f172a;
  --text2:    #475569;
  --text3:    #64748b;
  --text4:    #94a3b8;
}

/* ── 基础 ── */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;padding:16px 20px}

/* ── 顶栏 ── */
.topbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.topbar h1{font-size:1.15rem;color:var(--text2);font-weight:600;letter-spacing:.04em;margin-right:4px}
.search-inp{flex:1;min-width:160px;max-width:280px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 12px;color:var(--text);font-size:.88rem;outline:none}
.search-inp:focus{border-color:var(--blue)}
.topbar-right{display:flex;gap:6px;align-items:center;margin-left:auto}
.btn-theme{background:var(--surface);border:1px solid var(--border);color:var(--text3);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:.95rem}
.btn-theme:hover{color:var(--text)}
.view-toggle{display:flex;background:var(--surface);border-radius:6px;padding:2px;gap:2px;border:1px solid var(--border)}
.view-btn{background:none;border:none;color:var(--text3);padding:4px 10px;border-radius:4px;cursor:pointer;font-size:.8rem;transition:background .15s,color .15s}
.view-btn.active{background:var(--border);color:var(--text)}
.btn-add{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:7px 16px;font-size:.88rem;cursor:pointer;font-weight:500}
.btn-add:hover{opacity:.88}
.btn-login{background:var(--surface);color:var(--text3);border:1px solid var(--border);border-radius:8px;padding:6px 13px;font-size:.84rem;cursor:pointer}
.btn-login:hover{color:var(--text2)}
.btn-logout{background:none;color:var(--text4);border:none;font-size:.8rem;cursor:pointer;padding:6px 8px}
.btn-logout:hover{color:var(--text2)}
.btn-group-mgr{background:var(--surface);color:var(--text3);border:1px solid var(--border);border-radius:8px;padding:6px 13px;font-size:.84rem;cursor:pointer}
.btn-group-mgr:hover{color:var(--text)}

/* ── 管理员可见控制 ── */
.admin-only{display:none!important}
body.is-admin .admin-only{display:inline-flex!important}
body.is-admin .list-table th.admin-only,
body.is-admin .list-table td.admin-only{display:table-cell!important}
body.is-admin .admin-only-blk{display:block!important}
.admin-only-blk{display:none!important}
.admin-show{display:inline-flex}
body.is-admin .admin-show{display:none!important}

/* ── 仪表盘统计栏 ── */
.dashboard{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 16px;margin-bottom:12px}
.stat-block{display:flex;flex-direction:column;align-items:center;padding:4px 14px;cursor:pointer;border-radius:8px;transition:background .15s;user-select:none}
.stat-block:hover{background:var(--border)}
.stat-block.active{background:var(--border)}
.stat-num{font-size:1.3rem;font-weight:700;line-height:1.1}
.stat-lbl{font-size:.7rem;color:var(--text3);margin-top:2px}
.stat-num.online{color:var(--green)}
.stat-num.offline{color:var(--red)}
.stat-num.total{color:var(--blue)}
.stat-bar-wrap{flex:1;min-width:120px;display:flex;align-items:center;gap:8px}
.stat-bar{flex:1;height:8px;background:var(--border);border-radius:9999px;overflow:hidden}
.stat-bar-fill{height:100%;background:var(--green);border-radius:9999px;transition:width .6s}
.stat-rate{font-size:.78rem;color:var(--text3);min-width:36px;text-align:right}
.btn-copy-off{background:none;border:1px solid var(--border);color:var(--text3);border-radius:6px;padding:4px 10px;font-size:.76rem;cursor:pointer;white-space:nowrap}
.btn-copy-off:hover{color:var(--text);border-color:var(--text3)}

/* ── 筛选提示条 ── */
.filter-tip{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 14px;margin-bottom:10px;font-size:.82rem;color:var(--text3)}
.filter-tip button{background:none;border:none;color:var(--blue);cursor:pointer;font-size:.82rem;padding:0}

/* ── 卡片网格 ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.card{background:var(--surface);border-radius:12px;padding:18px;border:1px solid var(--border);display:flex;flex-direction:column;transition:border-color .2s,opacity .2s;height:320px;overflow:hidden}
.card.offline,.card.waiting{opacity:.65}
.card.waiting{border-style:dashed}
.card.dragging{opacity:.3;transform:scale(.97)}
.card.drag-over{border-color:var(--blue);box-shadow:0 0 0 2px rgba(59,130,246,.25)}
.drag-handle{color:var(--border);font-size:1.1rem;margin-right:8px;cursor:grab;flex-shrink:0;user-select:none}
.drag-handle:hover{color:var(--text4)}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.card-name{font-size:1rem;font-weight:600;color:var(--text)}
.card-right{display:flex;gap:6px;align-items:center}
.badge{padding:2px 8px;border-radius:9999px;font-size:.7rem;font-weight:500}
.b-online{background:#14532d;color:var(--green)}
.b-offline{background:#1f2937;color:var(--text3)}
.b-waiting{background:#1e3a5f;color:#60a5fa}
.icon-btn{background:none;border:none;color:var(--text4);cursor:pointer;font-size:1rem;padding:2px 5px;border-radius:4px}
.icon-btn:hover{color:var(--text2)}
.icon-btn.red:hover{color:var(--red)}
.row{margin:7px 0}
.lbl{font-size:.76rem;color:var(--text3);margin-bottom:3px;display:flex;justify-content:space-between}
.bar-bg{background:var(--bg);border-radius:4px;height:6px;overflow:hidden}
.bar{height:100%;border-radius:4px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.bar.cpu{background:var(--blue)}.bar.mem{background:var(--purple)}.bar.dsk{background:var(--teal)}
.bar-hi{background:#dc2626}.bar-mid{background:#d97706}.bar-lo{background:#15803d}
.net-row{display:flex;gap:16px;margin-top:10px;font-size:.8rem;color:var(--text2)}
.disk-list{display:flex;flex-direction:column;gap:4px;margin-top:3px}
.waiting-body{color:var(--text4);font-size:.86rem;text-align:center;padding:8px 0}
.waiting-body .wi{font-size:1.8rem;margin-bottom:6px}
.extra-row{display:flex;flex-wrap:wrap;gap:10px;font-size:.74rem;color:var(--text4)}
.card-bottom{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;gap:5px}
.ip-note-row{display:flex;align-items:center;gap:8px;font-size:.73rem}
.j-ip{color:var(--blue);font-family:monospace}
.off-ip{font-family:monospace;font-size:.73rem;color:var(--blue);margin-top:6px}
.j-online{flex:1;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}
.j-online::-webkit-scrollbar{display:none}
.j-offline{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ── 列表视图 ── */
#list-container{display:none;overflow-x:auto;border-radius:10px;border:1px solid var(--border)}
.list-table{width:100%;border-collapse:collapse;white-space:nowrap}
.list-table th,.list-table td{padding:6px 8px;text-align:center;vertical-align:middle}
.list-table thead tr{background:var(--surface2);position:sticky;top:0;z-index:2}
.list-table th{font-size:.66rem;color:var(--border);font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--border)}
.list-table tbody tr{background:var(--surface2);border-bottom:1px solid var(--surface)}
.list-table tbody tr:nth-child(even){background:var(--surface)}
.list-table tbody tr:hover{background:var(--border)}
.list-table tbody tr.offline,.list-table tbody tr.waiting{opacity:.55}
.s-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:9999px;font-size:.7rem;font-weight:700}
.s-chip.online{background:#052e16;color:var(--green)}
.s-chip.offline{background:#2d0a0a;color:var(--red)}
.s-chip.waiting{background:#0c1a3a;color:#60a5fa}
.prog-chip{position:relative;display:block;background:var(--surface);border-radius:9999px;overflow:hidden;height:24px;min-width:100px;margin:0 auto}
.prog-bar{position:absolute;top:0;left:0;bottom:0;border-radius:9999px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.prog-text{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:100%;color:var(--text);font-size:.75rem;font-weight:700}
.pb-lo{background:#15803d}.pb-mid{background:#d97706}.pb-hi{background:#dc2626}
.pb-mem{background:#6d28d9}.pb-dsk{background:#0369a1}
.lt-drag{color:var(--border);font-size:1rem;cursor:grab;user-select:none;display:block}
.lt-name{font-weight:600;color:var(--text);font-size:.86rem;text-align:center;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.lt-speed{color:var(--green);font-size:.7rem;line-height:1.8}
.lt-uptime{font-size:.73rem;color:var(--text4);min-width:52px}
.lt-ip{font-family:monospace;font-size:.7rem;color:var(--blue);max-width:130px;overflow:hidden;text-overflow:ellipsis;text-align:left}
.lt-na{color:var(--border)}
.lt-actions{display:flex;gap:2px;justify-content:center}

/* ── 分组视图 ── */
#group-container{display:none;flex-direction:column;gap:10px}
.g-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.g-head{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;user-select:none;transition:background .12s}
.g-head:hover{background:var(--border)}
.g-arrow{font-size:.75rem;color:var(--text3);width:14px;flex-shrink:0}
.g-title{font-weight:600;font-size:.95rem;color:var(--text)}
.count-tag{background:var(--bg);color:var(--text3);font-size:.7rem;padding:1px 7px;border-radius:9999px;font-weight:500}
.g-ddns-tag{font-size:.7rem;color:var(--blue);background:rgba(59,130,246,.12);padding:1px 7px;border-radius:9999px;font-family:monospace}
.g-spacer{flex:1}
.g-actions{display:flex;gap:3px;margin-left:auto}
.g-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:.85rem;padding:3px 6px;border-radius:5px}
.g-btn:hover{background:var(--border);color:var(--text)}
.g-btn.red:hover{color:var(--red)}
.g-body{padding:10px 12px 12px}
.g-body .grid{margin:0}
.g-list-table{width:100%;border-radius:0;border:none}
.g-list-table thead th{background:var(--bg);position:sticky;top:0;z-index:1}
.g-srv-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;transition:background .1s}
.g-srv-row:hover{background:var(--bg)}
.g-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.g-dot.on{background:var(--green);box-shadow:0 0 4px var(--green)}
.g-dot.off{background:var(--text4)}
.g-dot.wait{background:#3b82f6}
.g-srv-name{font-size:.86rem;font-weight:500;min-width:90px;color:var(--text)}
.g-metric{font-size:.75rem;color:var(--text3);min-width:64px}
.g-srv-last{font-size:.74rem;color:var(--text4);flex:1}
.g-srv-ip{font-size:.72rem;color:var(--blue);font-family:monospace}
.g-srv-actions{display:flex;gap:2px;margin-left:auto}
.g-empty{color:var(--text4);font-size:.82rem;padding:10px 8px;text-align:center}

/* ── 模态框 ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(2px)}
.modal{background:var(--surface);border-radius:14px;padding:22px;width:480px;max-width:calc(100vw - 28px);border:1px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,.5);max-height:90vh;overflow-y:auto}
.modal-sm{width:360px}
.modal-lg{width:580px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.modal-head span{font-size:1rem;font-weight:600;color:var(--text)}
.m-close{background:none;border:none;color:var(--text4);cursor:pointer;font-size:1.4rem;line-height:1}
.m-close:hover{color:var(--text)}
.field-lbl{font-size:.8rem;color:var(--text3);margin-bottom:5px;margin-top:12px}
.field-lbl:first-of-type{margin-top:0}
.field-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text);font-size:.92rem;outline:none}
.field-input:focus{border-color:var(--blue)}
.field-select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text);font-size:.92rem;outline:none;appearance:none;cursor:pointer}
.field-textarea{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text);font-size:.85rem;font-family:monospace;outline:none;resize:vertical;min-height:90px}
.field-textarea:focus{border-color:var(--blue)}
.err{color:var(--red);font-size:.8rem;margin-top:5px;min-height:16px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.btn-cancel{background:none;border:1px solid var(--border);color:var(--text2);border-radius:8px;padding:7px 15px;cursor:pointer;font-size:.86rem}
.btn-primary{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:7px 16px;cursor:pointer;font-size:.86rem;font-weight:500}
.btn-primary:hover{opacity:.88}
.btn-danger{background:#dc2626;color:#fff;border:none;border-radius:8px;padding:7px 14px;cursor:pointer;font-size:.86rem}
.success-note{color:var(--green);font-size:.84rem;margin-bottom:12px}
.code-wrap{background:var(--bg);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--border)}
.code-wrap code{flex:1;font-family:monospace;font-size:.78rem;color:var(--text2);word-break:break-all}
.copy-btn{background:var(--border);border:none;color:var(--text2);border-radius:6px;padding:4px 9px;cursor:pointer;font-size:.76rem;white-space:nowrap}
.copy-btn:hover{background:var(--text4);color:var(--text)}
.script-toggle{background:none;border:none;color:var(--text4);cursor:pointer;font-size:.8rem;margin-top:8px;text-decoration:underline;text-underline-offset:3px}
.full-script{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px;font-family:monospace;font-size:.72rem;color:var(--text3);white-space:pre;overflow-x:auto;max-height:180px;overflow-y:auto;margin-top:7px}
.seg-ctrl{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:2px;gap:2px;margin-top:5px}
.seg-btn{flex:1;background:none;border:none;color:var(--text3);padding:5px;border-radius:6px;cursor:pointer;font-size:.82rem}
.seg-btn.active{background:var(--border);color:var(--text)}

/* ── 分组管理 modal 内容 ── */
.gm-list{display:flex;flex-direction:column;gap:6px;margin:10px 0;max-height:260px;overflow-y:auto}
.gm-row{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--bg);border-radius:8px;border:1px solid var(--border)}
.gm-name{flex:1;font-size:.88rem;color:var(--text)}
.gm-cnt{font-size:.75rem;color:var(--text3)}

/* ── Toast ── */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:#1e293b;color:var(--text);padding:9px 20px;border-radius:9999px;font-size:.84rem;box-shadow:0 4px 20px rgba(0,0,0,.4);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:200;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── 页脚 ── */
footer{text-align:center;color:var(--border);font-size:.7rem;margin-top:16px}