/* ============================================
   Qingfang TAC Workstation — Cisco 暗色专业主题
   ============================================ */
:root {
    --bg-primary: #0a1628;
    --bg-secondary: #0f1f3a;
    --bg-card: #132744;
    --bg-input: #0d1b33;
    --bg-hover: #1a3360;
    --border: #1e3a5f;
    --border-light: #2a4a7f;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --accent-blue: #3b82f6;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --accent-orange: #f59e0b;
    --accent-yellow: #eab308;
    --accent-cyan: #06b6d4;
    --accent-purple: #8b5cf6;
    --xe-color: #3b82f6;
    --xr-color: #f59e0b;
    --sd-color: #10b981;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 2px 12px rgba(0,0,0,0.3);
    --font: 'Segoe UI','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
    --font-mono: 'Cascadia Code','Fira Code','Consolas',monospace;
    --sidebar-width: 240px;
    --transition: 0.2s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);
    display:flex;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent-blue);text-decoration:none}
a:hover{color:#60a5fa}
code{font-family:var(--font-mono);background:var(--bg-input);padding:2px 6px;border-radius:4px;font-size:0.88em;color:var(--accent-cyan)}

/* ====== Sidebar ====== */
.sidebar{
    width:var(--sidebar-width);min-width:var(--sidebar-width);
    background:var(--bg-secondary);border-right:1px solid var(--border);
    display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;
    z-index:100;transition:transform var(--transition);
}
.sidebar.collapsed{transform:translateX(-100%)}
.sidebar-brand{
    padding:20px 16px;display:flex;align-items:center;gap:10px;
    border-bottom:1px solid var(--border);
}
.brand-icon{font-size:1.8em}
.brand-name{font-size:1.1em;font-weight:700;color:var(--text-primary)}
.brand-sub{font-size:0.75em;color:var(--text-muted)}
.sidebar-nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:2px}
.nav-item{
    display:flex;align-items:center;gap:10px;padding:10px 14px;
    border-radius:var(--radius);color:var(--text-secondary);
    font-size:0.92em;font-weight:500;transition:all var(--transition);
}
.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.nav-item.active{background:rgba(59,130,246,0.15);color:var(--accent-blue)}
.nav-icon{font-size:1.1em}
/* Nav divider */
.nav-divider{padding:14px 14px 6px;font-size:0.7em;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;border-top:1px solid var(--border);margin-top:4px}
.nav-divider span{opacity:0.6}
.sidebar-footer{padding:12px 16px;border-top:1px solid var(--border)}
.product-badges{display:flex;gap:6px;flex-wrap:wrap}
.pb-xe,.pb-xr,.pb-sd{
    padding:3px 10px;border-radius:12px;font-size:0.72em;font-weight:700;letter-spacing:0.5px;
}
.pb-xe{background:rgba(59,130,246,0.2);color:var(--xe-color);border:1px solid rgba(59,130,246,0.3)}
.pb-xr{background:rgba(245,158,11,0.2);color:var(--xr-color);border:1px solid rgba(245,158,11,0.3)}
.pb-sd{background:rgba(16,185,129,0.2);color:var(--sd-color);border:1px solid rgba(16,185,129,0.3)}

/* LLM badge */
.llm-badge{margin-top:10px;padding:6px 12px;border-radius:14px;font-size:0.75em;font-weight:600;display:flex;align-items:center;gap:6px}
.llm-badge.llm-on{background:rgba(16,185,129,0.12);color:var(--accent-green);border:1px solid rgba(16,185,129,0.25)}
.llm-badge.llm-off{background:rgba(100,116,139,0.1);color:var(--text-muted);border:1px solid rgba(100,116,139,0.15)}
.llm-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.llm-on .llm-dot{background:var(--accent-green);box-shadow:0 0 6px var(--accent-green)}
.llm-off .llm-dot{background:var(--text-muted)}

/* User logout */
.sidebar-footer a:hover{color:var(--accent-red)}

/* ====== Main ====== */
.main-content{flex:1;margin-left:var(--sidebar-width);display:flex;flex-direction:column;min-height:100vh;transition:margin var(--transition)}
.sidebar.collapsed ~ .main-content{margin-left:0}

/* Topbar */
.topbar{
    background:var(--bg-secondary);border-bottom:1px solid var(--border);
    padding:0 24px;height:56px;display:flex;align-items:center;gap:16px;
    position:sticky;top:0;z-index:50;
}
.menu-toggle{
    display:none;background:none;border:none;color:var(--text-primary);
    font-size:1.3em;cursor:pointer;padding:4px 8px;
}
.topbar-title{font-size:1.1em;font-weight:600;flex:1}
.topbar-right{display:flex;align-items:center;gap:8px}
.status-indicator{width:8px;height:8px;border-radius:50%}
.status-indicator.online{background:var(--accent-green);box-shadow:0 0 6px rgba(16,185,129,0.6)}
.status-text{font-size:0.82em;color:var(--text-muted)}

/* Content */
.content-area{padding:24px;flex:1}

/* ====== Dashboard ====== */
.dashboard-grid{max-width:1100px;display:flex;flex-direction:column;gap:24px}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.stat-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:20px;display:flex;align-items:center;gap:14px;cursor:pointer;
    transition:all var(--transition);
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-light)}
.sc-primary:hover{border-color:var(--accent-blue)}
.sc-success:hover{border-color:var(--accent-green)}
.sc-warning:hover{border-color:var(--accent-orange)}
.sc-info:hover{border-color:var(--accent-purple)}
.sc-icon{font-size:2em}
.sc-value{font-size:1.05em;font-weight:700;color:var(--text-primary)}
.sc-label{font-size:0.82em;color:var(--text-secondary)}

.dashboard-section{background:var(--bg-card);border-radius:var(--radius-lg);padding:24px;border:1px solid var(--border)}
.section-title{font-size:1.1em;font-weight:700;margin-bottom:16px;color:var(--text-primary)}

.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.product-card{background:var(--bg-input);border-radius:var(--radius);padding:16px;border:1px solid var(--border)}
.pc-header{padding:6px 12px;border-radius:6px;font-weight:700;font-size:0.95em;margin-bottom:10px;display:inline-block}
.pc-header.xe{background:rgba(59,130,246,0.2);color:var(--xe-color)}
.pc-header.xr{background:rgba(245,158,11,0.2);color:var(--xr-color)}
.pc-header.sd{background:rgba(16,185,129,0.2);color:var(--sd-color)}
.pc-devices{display:flex;flex-wrap:wrap;gap:6px}
.device-chip{
    background:var(--bg-hover);padding:4px 10px;border-radius:14px;
    font-size:0.8em;color:var(--text-secondary);font-family:var(--font-mono);
}

.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px}
.rule-item{
    padding:10px 14px;background:var(--bg-input);border-radius:var(--radius);
    font-size:0.9em;color:var(--text-secondary);border-left:3px solid var(--border);
}

.workflow{display:flex;align-items:center;flex-wrap:wrap;gap:12px;justify-content:center;padding:10px 0}
.wf-step{text-align:center;min-width:100px}
.wf-num{
    width:36px;height:36px;border-radius:50%;background:var(--accent-blue);
    color:white;display:inline-flex;align-items:center;justify-content:center;
    font-weight:700;margin-bottom:6px;
}
.wf-text{font-size:0.88em;color:var(--text-secondary)}
.wf-text small{font-size:0.78em;color:var(--text-muted)}
.wf-arrow{font-size:1.5em;color:var(--text-muted)}

/* ====== Module Layout ====== */
.module-layout{display:flex;flex-direction:column;gap:20px;max-width:1100px}

/* Panel */
.panel{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:24px;
}
.panel-title{font-size:1.05em;font-weight:700;margin-bottom:16px;color:var(--text-primary)}
.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.panel-actions{display:flex;gap:8px}

/* Forms */
.form-row{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.form-input,.form-select,.form-textarea{
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:var(--radius);padding:10px 14px;
    color:var(--text-primary);font-family:var(--font);font-size:0.92em;
    transition:border-color var(--transition);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
    outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 3px rgba(59,130,246,0.15)
}
.form-input{flex:1;min-width:200px}
.form-select{min-width:200px;cursor:pointer}
.form-select option{background:var(--bg-secondary);color:var(--text-primary)}
.form-textarea{
    width:100%;resize:vertical;font-family:var(--font-mono);
    font-size:0.85em;line-height:1.5;
}
.form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* Buttons */
.btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:10px 20px;border-radius:var(--radius);font-size:0.92em;
    font-weight:600;cursor:pointer;border:none;transition:all var(--transition);
    font-family:var(--font);
}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn-primary{background:var(--accent-blue);color:white}
.btn-primary:hover:not(:disabled){background:#2563eb}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text-secondary)}
.btn-outline:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}
.btn-sm{padding:6px 14px;font-size:0.82em}
.btn-green{background:var(--accent-green);color:white}

/* Result sections */
.result-section{margin-bottom:20px}
.result-section h4{font-size:1em;font-weight:700;margin-bottom:10px;color:var(--accent-cyan)}
.info-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:0.9em}
.info-grid span{color:var(--text-muted)}
.info-grid strong{color:var(--text-primary);font-family:var(--font-mono)}

.conf-high{color:var(--accent-red)}
.conf-medium{color:var(--accent-orange)}
.conf-low{color:var(--text-muted)}

.error-item{
    padding:8px 12px;border-radius:6px;margin-bottom:6px;
    font-family:var(--font-mono);font-size:0.82em;word-break:break-all;
}
.error-item.crit{background:rgba(239,68,68,0.12);border-left:3px solid var(--accent-red)}
.error-item.err{background:rgba(245,158,11,0.12);border-left:3px solid var(--accent-orange)}
.error-item.warn{background:rgba(234,179,8,0.1);border-left:3px solid var(--accent-yellow)}
.err-sev{font-weight:700;margin-right:6px}
.err-cat{color:var(--text-muted);margin-right:6px}

.fault-box{
    padding:10px 14px;background:var(--bg-input);border-radius:var(--radius);
    margin-bottom:8px;font-size:0.9em;
}
.fault-box strong{color:var(--accent-orange)}
.fault-box em{color:var(--text-muted)}

.root-cause{
    padding:14px;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);
    border-radius:var(--radius);font-size:0.95em;color:var(--text-primary);
}

.cmd-list{display:flex;flex-direction:column;gap:4px}
.cmd-list code{
    display:block;padding:8px 12px;background:var(--bg-input);border-radius:6px;
    font-size:0.85em;color:var(--accent-green);border-left:3px solid var(--accent-green);
}

.mitigation-box{
    padding:10px 14px;border-radius:var(--radius);margin-bottom:6px;font-size:0.9em;
}
.mit-temp{border-left:3px solid var(--accent-orange);background:rgba(245,158,11,0.08)}
.mit-perm{border-left:3px solid var(--accent-green);background:rgba(16,185,129,0.08)}
.risk-tag{font-size:0.82em;color:var(--text-muted);margin-left:8px}

.warning-note{
    padding:10px 14px;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);
    border-radius:var(--radius);font-size:0.85em;margin-bottom:10px;color:var(--accent-orange);
}
.bug-card{
    padding:10px 14px;background:var(--bg-input);border-radius:var(--radius);
    margin-bottom:6px;font-size:0.9em;
}

.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}

/* Data table */
.data-table{width:100%;border-collapse:collapse;font-size:0.88em}
.data-table th{
    background:var(--bg-input);padding:10px 14px;text-align:left;
    font-weight:600;color:var(--text-secondary);border-bottom:2px solid var(--border);
    font-size:0.82em;text-transform:uppercase;letter-spacing:0.5px;
}
.data-table td{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text-secondary)}
.data-table tr:hover td{background:var(--bg-hover)}

.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:0.78em;font-weight:700;margin-right:4px}
.badge-red{background:rgba(239,68,68,0.2);color:var(--accent-red)}
.badge-orange{background:rgba(245,158,11,0.2);color:var(--accent-orange)}
.badge-yellow{background:rgba(234,179,8,0.2);color:var(--accent-yellow)}
.badge-blue{background:rgba(59,130,246,0.2);color:var(--accent-blue)}
.badge-green{background:rgba(16,185,129,0.2);color:var(--accent-green)}

.empty-text{text-align:center;padding:40px;color:var(--text-muted);font-size:0.95em}

/* FAQ */
.faq-history-item:hover{background:var(--bg-hover)}

/* ====== Responsive ====== */
@media(max-width:1024px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.collapsed{transform:translateX(-100%)}
    .main-content{margin-left:0}
    .menu-toggle{display:block}
    .stat-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
    .content-area{padding:16px}
    .stat-cards{grid-template-columns:1fr}
    .form-row{flex-direction:column}
    .form-select{width:100%}
    .workflow{flex-direction:column}
    .wf-arrow{transform:rotate(90deg)}
}