/* NetworkPanel - 后台管理系统样式 */
:root {
    --primary: #5668EE;
    --primary-dark: #4554cc;
    --sidebar-bg: #1e1e2d;
    --sidebar-width: 240px;
    --sidebar-collapsed: 64px;
    --topbar-h: 56px;
    --card-bg: #fff;
    --bg: #f0f2f5;
    --text: #303133;
    --text-secondary: #909399;
    --border: #ebeef5;
    --success: #67c23a;
    --warning: #e6a23c;
    --danger: #f56c6c;
    --info: #909399;
}
@media (prefers-color-scheme: dark) {
    :root {
        --card-bg: #1a1a2e; --bg: #111118; --text: #e0e0e0;
        --border: #2a2a3e; --text-secondary: #888;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); }

/* ========== 登录页 ========== */
.login-wrapper {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1e1e2d 0%, #2b2d42 100%);
}
.login-card {
    background: var(--card-bg); padding: 40px; border-radius: 16px; width: 380px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.login-logo { text-align: center; margin-bottom: 24px; }
.login-logo svg { width: 60px; height: 60px; }
.login-card h2 { text-align: center; margin-bottom: 28px; font-size: 22px; color: var(--text); }
.login-card .form-group { margin-bottom: 18px; }
.login-card input[type="text"], .login-card input[type="password"] {
    width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px;
    font-size: 14px; outline: none; transition: border .2s;
}
.login-card input:focus { border-color: var(--primary); }
.btn-primary { background: var(--primary); color:#fff; border:none; border-radius:8px; padding:10px 20px; cursor:pointer; font-size:14px; transition:.2s; }
.btn-primary:hover { filter:brightness(1.1); }
.btn-block { width:100%; padding:12px; font-size:16px; font-weight:600; }
.btn-default { background:var(--card-bg); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px 18px; cursor:pointer; font-size:14px; }
.btn-lg { padding:12px 32px; font-size:15px; }
.login-error { color:var(--danger); text-align:center; min-height:20px; font-size:13px; margin-top:10px; }
.back-link { display:block; text-align:center; color:var(--text-secondary); text-decoration:none; font-size:13px; margin-top:16px; }

/* ========== 管理布局 ========== */
.admin-layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width); background: var(--sidebar-bg); color:#ccc;
    position: fixed; top:0; left:0; height:100vh; z-index:100;
    display:flex; flex-direction:column; transition:width .25s;
    overflow-x: hidden;
}
.sidebar.collapsed { width: var(--sidebar-collapsed); }
.sidebar-header {
    height: var(--topbar-h); display: flex; align-items:center; gap:12px;
    padding:0 18px; border-bottom:1px solid rgba(255,255,255,.06);
}
.logo-mini {
    width:34px; height:34px; border-radius:8px; background:var(--primary);
    display:flex; align-items:center; justify-content:center; color:#fff;
    font-weight:bold; font-size:14px; flex-shrink:0;
}
.sidebar-title { font-weight:600; font-size:16px; white-space:nowrap; opacity:1; transition:opacity .2s; }
.collapsed .sidebar-title { opacity:0; }

.nav-menu { flex:1; padding:12px 0; overflow-y:auto; }
.nav-item {
    display:flex; align-items:center; gap:12px; padding:11px 22px;
    color:#aaa; text-decoration:none; font-size:14px; transition:all .2s;
    border-left:3px solid transparent; white-space:nowrap;
}
.nav-item:hover { background:rgba(255,255,255,.04); color:#fff; }
.nav-item.active { background:rgba(86,104,238,.12); color:var(--primary); border-left-color:var(--primary); }
.nav-icon { font-size:17px; width:24px; text-align:center; }
.nav-badge { background:#f56c6c; color:#fff; font-size:11px; padding:1px 7px; border-radius:10px; min-width:18px;text-align:center;font-weight:600; }

.sidebar-footer { border-top:1px solid rgba(255,255,255,.06); }
.admin-info { display:flex; align-items:center; gap:10px; padding:14px 22px; }
.admin-avatar {
    width:32px; height:32px; border-radius:50%; background:var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
.admin-name { font-size:13px; white-space:nowrap; opacity:1; transition:opacity .2s; }
.collapsed .admin-name { opacity:0; }
.nav-exit { color:var(--danger)!important; }

/* ========== 主内容 ========== */
.admin-main { flex:1; margin-left:var(--sidebar-width); transition:margin-left .25s; min-height:100vh; }
.sidebar.collapsed + .admin-main { margin-left: var(--sidebar-collapsed); }

.topbar {
    height: var(--topbar-h); background: var(--card-bg);
    display:flex; align-items:center; padding:0 24px;
    gap:16px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.menu-toggle {
    background:none; border:none; font-size:22px; cursor:pointer; color:var(--text-secondary); padding:4px;
}
.page-title { font-size:18px; font-weight:600; }
.topbar-right { margin-left:auto; }
.time-display { font-size:13px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }

.page-content { display:none; padding:24px; animation: fadeIn .25s ease; }
.page-content.active { display:block; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ========== 统计卡片 ========== */
.stat-cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:18px; margin-bottom:24px; }
.stat-card {
    background: var(--card-bg); border-radius:12px; padding:20px; display:flex; align-items:center; gap:16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04); position:relative; overflow:hidden;
}
.stat-card::after {
    content:''; position:absolute; right:-20px; bottom:-20px; width:80px; height:80px;
    border-radius:50%; opacity:.08;
}
.stat-blue::after { background:var(--primary); }
.stat-green::after { background:var(--success); }
.stat-orange::after { background:var(--warning); }
.stat-purple::after { background:#9b59b6; }
.stat-icon { font-size:36px; line-height:1; }
.stat-num { font-size:26px; font-weight:700; }
.stat-label { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.stat-trend { position:absolute; top:12px; right:16px; font-size:12px; color:var(--success); }

/* ========== 卡片面板 ========== */
.card-panel {
    background: var(--card-bg); border-radius:12px; padding:20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.panel-title { font-size:16px; font-weight:600; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.grid-row { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
@media(max-width:800px){ .grid-row{grid-template-columns:1fr;} }

/* ========== 数据表格 ========== */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th, .data-table td {
    padding:10px 12px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap;
}
.data-table th { background:rgba(86,104,238,.03); font-weight:600; color:var(--text-secondary); font-size:12px; }
.data-table tr:hover td { background:rgba(86,104,238,.02); }

.tag { display:inline-block; padding:2px 10px; border-radius:10px; font-size:12px; }
.tag-success { background:rgba(103,194,58,.1); color:var(--success); }
.tag-warning { background:rgba(230,162,60,.1); color:var(--warning); }
.tag-danger { background:rgba(245,108,108,.1); color:var(--danger); }
.tag-info { background:rgba(144,147,153,.1); color:var(--info); }
.tag-primary { background:rgba(86,104,238,.1); color:var(--primary); }

.action-btns { display:flex; gap:6px; }
.action-btn {
    background:none; border:1px solid var(--border); border-radius:6px; padding:4px 10px;
    cursor:pointer; font-size:12px; color:var(--text-secondary); transition:.2s;
}
.action-btn:hover { border-color:var(--primary); color:var(--primary); }
.action-btn.danger:hover { border-color:var(--danger); color:var(--danger); }

/* ========== 工具栏 ========== */
.toolbar-bar { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.search-input {
    padding:8px 14px; border:1px solid var(--border); border-radius:8px; font-size:13px;
    outline:none; min-width:200px; background:var(--card-bg); color:var(--text);
}
.filter-select { padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:var(--card-bg); color:var(--text); }

/* ========== 分页 ========== */
.pagination { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:16px; }
.pagination button, .pagination span {
    padding:6px 12px; border:1px solid var(--border); border-radius:6px; font-size:13px;
    cursor:pointer; background:var(--card-bg); color:var(--text);
}
.pagination button:hover:not(:disabled) { border-color:var(--primary); color:var(--primary); }
.pagination button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.pagination button:disabled { opacity:.4; cursor:default; }
.pagination .page-info { border:none; color:var(--text-secondary); }

/* ========== 设置表单 ========== */
.settings-groups { display:grid; gap:20px; }
.setting-form .form-group { margin-bottom:14px; display:flex; align-items:flex-start; gap:12px; }
.setting-form label {
    min-width:120px; font-size:13px; padding-top:7px; color:var(--text-secondary); text-align:right; flex-shrink:0;
}
.setting-form input[type="text"],
.setting-form input[type="number"],
.setting-form textarea,
.setting-form select {
    flex:1; padding:8px 12px; border:1px solid var(--border); border-radius:8px;
    font-size:13px; background:var(--card-bg); color:var(--text); outline:none;
}
.setting-form textarea { resize:vertical; min-height:60px; }
.form-row { display:flex; gap:12px; }
.flex-1 { flex:1; }

/* ========== 日志列表 ========== */
.log-list { max-height:400px; overflow-y:auto; }
.log-item {
    display:flex; align-items:center; gap:10px; padding:10px 0;
    border-bottom:1px dashed var(--border); font-size:13px;
}
.log-time { color:var(--text-secondary); font-size:12px; min-width:140px; flex-shrink:0; }
.log-action { font-weight:500; min-width:70px; }
.log-detail { color:var(--text-secondary); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ========== 弹窗 ========== */
.modal {
    border: none; border-radius: 14px; padding: 0; max-width: 90vw;
    background: var(--card-bg); color: var(--text);
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.modal::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(4px); }
.modal-sm { max-width: 480px; width: 100%; }

/* 节点编辑弹窗 - 更宽 */
#modalNodeEdit { min-width: 560px; max-width: 640px; }

/* 居中定位 */
.modal[open] {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 24px; border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 17px; font-weight: 600; letter-spacing: .3px; }
.close-btn {
    background: none; border: none; font-size: 20px; cursor: pointer;
    color: var(--text-secondary); line-height: 1; padding: 4px 8px; border-radius: 6px;
    transition: all .2s;
}
.close-btn:hover { background: rgba(245,108,108,.1); color: var(--danger); }

.modal-body { padding: 22px 24px; }
.modal-footer {
    padding: 14px 24px; border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 10px; gap: 12px;
}

.modal .form-group { margin-bottom: 16px; }
.modal .form-group label {
    display: block; font-size: 13px; margin-bottom: 6px;
    color: var(--text-secondary); font-weight: 500;
}
.modal input, .modal select, .modal textarea {
    width: 100%; padding: 10px 13px; border: 1.5px solid var(--border);
    border-radius: 9px; font-size: 14px; background: var(--card-bg);
    color: var(--text); outline: none; transition: border-color .2s;
}
.modal input:focus, .modal select:focus, .modal textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(86,104,238,.12);
}

/* 弹窗按钮 */
.btn-cancel {
    background: transparent; color: var(--text-secondary);
    border: 1.5px solid var(--border); border-radius: 8px;
    padding: 9px 22px; cursor: pointer; font-size: 14px; transition: .2s;
}
.btn-cancel:hover { border-color: #999; color: var(--text); }

/* ========== 响应式 ========== */
@media (max-width:768px) {
    .admin-layout { flex-direction:column; }
    .sidebar { position:fixed; transform:translateX(-100%); width:260px; z-index:200; transition:transform .25s; }
    .sidebar.mobile-open { transform:translateX(0); }
    .admin-main { margin-left:0; }
    .stat-cards { grid-template-columns:1fr 1fr; }
    .setting-form .form-group { flex-direction:column; }
    .setting-form label { text-align:left; min-width:auto; }
}