:root {
  --body-bg: #f5f0e8;
  --topbar-bg: #e8e0d4;
  --sidebar-bg: #e8e0d4;
  --sidebar-border: #d4ccc0;
  --rag-bg: rgba(240,235,225,0.97);
  --detail-bg: #ece4d8;
  --text-primary: #1a1a2e;
  --text-secondary: #444466;
  --text-muted: #8888aa;
  --border-color: #d4ccc0;
  --input-bg: #f5f0e8;
  --input-border: #c8c0b4;
  --hover-bg: rgba(0,0,0,0.04);
  --active-bg: rgba(0,0,0,0.08);
  --btn-border: #b8b0a4;
  --btn-hover-bg: rgba(75,54,176,0.08);
  --password-overlay-bg: #f5f0e8;
  --password-box-bg: #e8e0d4;
  --password-box-border: #d4ccc0;
  --gradient-from: #4B36B0;
  --gradient-to: #7C68E8;
  --legend-border: #d4ccc0;
  --legend-bg: #e8e0d4;
  --scrollbar-bg: #c8c0b4;
  --rag-header-border: #d4ccc0;
  --rag-msg-bg: #ece4d8;
  --rag-msg-user-bg: #ddd4c8;
  --msg-avatar-bg: #d4ccc0;
  --msg-avatar-text: #666688;
  --rag-msg-user-avatar-bg: #c8c0b4;
  --tag-bg: rgba(75,54,176,0.06);
  --tag-color: #4B36B0;
  --tag-border: rgba(75,54,176,0.12);
  --app-bg: rgba(245,158,11,0.04);
  --app-border: rgba(245,158,11,0.08);
  --app-color: #B8860B;
  --panel-title-color: #1a1a2e;
  --section-title-color: #4B36B0;
  --section-border: #d4ccc0;
}

.night-mode {
  --body-bg: #080816;
  --topbar-bg: #0d0d24;
  --sidebar-bg: #0d0d22;
  --sidebar-border: #1a1a3a;
  --rag-bg: rgba(10,10,26,0.95);
  --detail-bg: #0d0d28;
  --text-primary: #c8d0e0;
  --text-secondary: #99aabb;
  --text-muted: #667;
  --border-color: #1a1a3a;
  --input-bg: #0a0a1a;
  --input-border: #2a2a4a;
  --hover-bg: rgba(255,255,255,0.04);
  --active-bg: rgba(255,255,255,0.08);
  --btn-border: #2a3a5a;
  --btn-hover-bg: rgba(90,155,213,0.12);
  --password-overlay-bg: #080816;
  --password-box-bg: #0d0d28;
  --password-box-border: #1a1a3a;
  --gradient-from: #5B9BD5;
  --gradient-to: #4ECDC4;
  --legend-border: #1a1a3a;
  --legend-bg: #0d0d22;
  --scrollbar-bg: #2a2a4a;
  --rag-header-border: #1a1a3a;
  --rag-msg-bg: #1a1a36;
  --rag-msg-user-bg: #1a2a5a;
  --msg-avatar-bg: #1a1a3a;
  --msg-avatar-text: #668;
  --rag-msg-user-avatar-bg: #1a2a4a;
  --tag-bg: rgba(90,155,213,0.12);
  --tag-color: #7bb7e8;
  --tag-border: rgba(90,155,213,0.2);
  --app-bg: rgba(245,158,11,0.06);
  --app-border: rgba(245,158,11,0.1);
  --app-color: #F59E0B;
  --panel-title-color: #c8d0e0;
  --section-title-color: #8ab8e0;
  --section-border: #1a1a3a;
}

/* === Reset & Base === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:var(--body-bg);color:var(--text-secondary);font-size:14px;line-height:1.5}
input,button,textarea{font-family:inherit;font-size:inherit}
.hidden{display:none!important}
/* === Password Overlay === */
.password-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--password-overlay-bg)}
.password-box{background:var(--password-box-bg);padding:40px;border-radius:12px;border:1px solid var(--password-box-border);text-align:center;max-width:380px;width:90%}
.password-box h1{font-size:18px;font-weight:600;background:linear-gradient(135deg,var(--gradient-from),var(--gradient-to));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}
.password-subtitle{font-size:13px;color:var(--text-muted);margin-bottom:20px}
.password-input-row{display:flex;gap:8px}
.password-input-row input{flex:1;padding:8px 14px;border-radius:6px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-primary);outline:none;font-size:14px}
.password-input-row input:focus{border-color:var(--gradient-from)}
.password-error{color:#E8635A;font-size:12px;margin-top:10px}
/* === Topbar === */
.topbar{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px;background:var(--topbar-bg);color:var(--text-primary);user-select:none;border-bottom:1px solid var(--border-color);z-index:100;position:relative}
.topbar-left{display:flex;align-items:center;gap:10px}
.logo{font-size:16px;font-weight:600;letter-spacing:1px;background:linear-gradient(135deg,var(--gradient-from),var(--gradient-to));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{font-size:11px;color:var(--text-muted)}
.topbar-right{display:flex;align-items:center;gap:6px}
/* === Buttons === */
.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:4px;border:1px solid transparent;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s;white-space:nowrap}
.btn-primary{background:transparent;color:var(--text-secondary);border-color:var(--btn-border)}
.btn-primary:hover{background:var(--btn-hover-bg);border-color:var(--gradient-from);color:var(--text-primary)}
.btn-primary.active{background:var(--active-bg);border-color:var(--gradient-from)}
.btn-ghost{background:transparent;color:var(--text-muted);border-color:var(--border-color)}
.btn-ghost:hover{background:var(--hover-bg);color:var(--text-secondary);border-color:var(--btn-border)}
/* === Main Layout === */
.main-layout{display:flex;height:calc(100vh - 48px);overflow:hidden}
/* === Sidebar === */
.sidebar{width:280px;min-width:280px;background:var(--sidebar-bg);color:var(--text-secondary);display:flex;flex-direction:column;border-right:1px solid var(--sidebar-border);z-index:50}
.sidebar-header{padding:10px 14px;border-bottom:1px solid var(--sidebar-border);flex-shrink:0}
.sidebar-header h2{font-size:14px;font-weight:600;color:var(--text-primary)}
.sidebar-search{padding:6px 10px;flex-shrink:0}
.sidebar-search input{width:100%;padding:6px 10px;border-radius:4px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-primary);outline:none;font-size:12px}
.sidebar-search input:focus{border-color:var(--gradient-from)}
.sidebar-tree{flex:1;overflow-y:auto;padding:4px 0}
.sidebar-tree::-webkit-scrollbar{width:4px}
.sidebar-tree::-webkit-scrollbar-track{background:transparent}
.sidebar-tree::-webkit-scrollbar-thumb{background:var(--scrollbar-bg);border-radius:2px}
/* === Legend (pinned to sidebar bottom) === */
.legend-panel{border-top:1px solid var(--legend-border);padding:10px 14px;flex-shrink:0;background:var(--legend-bg)}
.legend-title{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.legend-grid{display:flex;flex-wrap:wrap;gap:3px 8px}
.legend-item{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text-muted);line-height:1.8}
.legend-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;font-size:16px;flex-shrink:0}
.legend-line{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--text-muted);white-space:nowrap}
.legend-color-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:3px}
/* === Tree === */
.tree-item{cursor:pointer;user-select:none}
.tree-item:hover{background:var(--hover-bg)}
.tree-item.highlight{background:var(--active-bg);outline:1px solid var(--border-color)}
.tree-toggle{display:inline-block;width:14px;text-align:center;color:var(--text-muted);font-size:8px;transition:transform .2s;flex-shrink:0}
.tree-toggle.expanded{transform:rotate(90deg)}
.tree-year{padding:5px 10px 5px 14px;font-weight:600;font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:4px}
.tree-year .year-count{font-weight:400;font-size:10px;color:var(--text-muted)}
.tree-course{padding:3px 10px 3px 30px;font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:4px}
.tree-kp{padding:2px 10px 2px 46px;font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:4px}
.tree-kp:hover{color:var(--text-primary)}
.tree-kp.active{color:var(--gradient-from);font-weight:500}
.tree-kp .kp-type-badge{font-size:8px;padding:1px 4px;border-radius:3px;background:var(--hover-bg);color:var(--text-muted);flex-shrink:0}
/* === Content Area (center) === */
.content-area{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.graph-panel{flex:1;position:relative;min-height:100px;overflow:hidden}
.graph-canvas{width:100%;height:100%;position:relative;background:transparent}
.divider-h{height:3px;background:var(--border-color);cursor:ns-resize;flex-shrink:0;position:relative;z-index:10}
.divider-h:hover{background:var(--text-muted)}
/* === RAG Panel === */
.rag-panel{height:260px;min-height:80px;max-height:60vh;border-top:1px solid var(--border-color);display:flex;flex-direction:column;background:var(--rag-bg);flex-shrink:0}
.rag-header{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;border-bottom:1px solid var(--rag-header-border);flex-shrink:0}
.rag-header h2{font-size:13px;font-weight:600;color:var(--text-primary);}
.rag-status{font-size:11px;color:#4ECDC4;display:flex;align-items:center;gap:4px}
.status-dot{width:6px;height:6px;border-radius:50%;background:#4ECDC4;display:inline-block}
.rag-messages{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.rag-messages::-webkit-scrollbar{width:4px}
.rag-messages::-webkit-scrollbar-track{background:transparent}
.rag-messages::-webkit-scrollbar-thumb{background:var(--scrollbar-bg);border-radius:2px}
.rag-msg{display:flex;gap:8px}
.rag-msg.rag-msg-user{flex-direction:row-reverse}
.msg-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;background:var(--msg-avatar-bg);color:var(--msg-avatar-text)}
.rag-msg-user .msg-avatar{background:var(--rag-msg-user-avatar-bg);color:var(--text-muted)}
.msg-content{max-width:75%;padding:7px 12px;border-radius:10px;background:var(--rag-msg-bg);font-size:12px;line-height:1.6;color:var(--text-secondary)}
.rag-msg-user .msg-content{background:var(--rag-msg-user-bg);color:var(--text-primary)}
.msg-content .kp-link{display:inline-block;margin:2px 0;padding:1px 6px;background:var(--tag-bg);border-radius:3px;color:var(--tag-color);cursor:pointer;font-size:11px;border:1px solid var(--tag-border)}
.msg-content .kp-link:hover{background:var(--active-bg)}
.rag-input-row{display:flex;gap:6px;padding:6px 14px;border-top:1px solid var(--border-color);flex-shrink:0}
.rag-input-row input{flex:1;padding:6px 12px;border-radius:16px;border:1px solid var(--input-border);background:var(--input-bg);outline:none;font-size:12px;color:var(--text-primary)}
.rag-input-row input:focus{border-color:var(--gradient-from)}
.rag-input-row input::placeholder{color:var(--text-muted)}
.rag-input-row button{border-radius:16px;padding:5px 16px}
.rag-settings{border-top:1px solid var(--border-color);padding:2px 14px;flex-shrink:0}
.rag-settings details{font-size:11px}
.rag-settings summary{cursor:pointer;color:var(--text-muted);padding:2px 0}
.rag-settings summary:hover{color:var(--text-secondary)}
.setting-row{display:flex;align-items:center;gap:6px;margin:3px 0}
.setting-row label{width:80px;color:var(--text-muted);flex-shrink:0;font-size:11px}
.setting-row input{flex:1;padding:3px 6px;border:1px solid var(--input-border);border-radius:3px;background:var(--input-bg);color:var(--text-primary);font-size:11px}
/* === Side Panel (Detail Drawer) === */
.side-panel{position:fixed;top:48px;right:-380px;width:360px;height:calc(100vh - 48px);background:var(--detail-bg);border-left:1px solid var(--border-color);box-shadow:-4px 0 30px rgba(0,0,0,0.3);z-index:200;transition:right .3s ease;overflow-y:auto;display:flex;flex-direction:column}
.side-panel.visible{right:0}
.side-panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border-color);flex-shrink:0}
.side-panel-header h3{font-size:14px;font-weight:600;color:var(--text-primary)}
.panel-close{background:none;border:none;color:var(--text-muted);font-size:22px;cursor:pointer;line-height:1;padding:0 2px}
.panel-close:hover{color:var(--text-primary)}
.side-panel-body{padding:16px;overflow-y:auto;flex:1}
.panel-title{font-size:16px;font-weight:600;color:var(--panel-title-color);margin-bottom:4px}
.panel-type-badge{font-size:11px;color:var(--text-muted);margin-bottom:2px}
.panel-meta{font-size:10px;color:var(--text-muted);margin-bottom:12px}
.panel-section{margin-bottom:14px}
.panel-section h3{font-size:12px;font-weight:600;color:var(--section-title-color);margin-bottom:4px;padding-bottom:4px;border-bottom:1px solid var(--section-border)}
.section-content{font-size:12px;color:var(--text-secondary);line-height:1.7}
.panel-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.tag{display:inline-block;padding:2px 8px;font-size:11px;border-radius:12px;background:var(--tag-bg);color:var(--tag-color);border:1px solid var(--tag-border);cursor:pointer;transition:all .15s;white-space:nowrap}
.tag:hover{background:var(--active-bg)}
.app-section{padding:8px 10px;margin-bottom:10px;border-radius:6px;background:var(--app-bg);border:1px solid var(--app-border)}
.app-label{font-size:10px;font-weight:600;color:var(--app-color);margin-bottom:4px;letter-spacing:0.5px}
.app-tags{display:flex;flex-wrap:wrap;gap:3px}
.app-tags .tag{font-size:10px;padding:1px 6px}

/* Year buttons with grade colors */
.year-btn[data-year="大一"]{border-color:#5B9BD5!important;color:#5B9BD5!important}
.year-btn[data-year="大一"].active{background:rgba(91,155,213,0.15)!important;border-color:#5B9BD5!important;color:#5B9BD5!important}
.year-btn[data-year="大二"]{border-color:#4ECDC4!important;color:#4ECDC4!important}
.year-btn[data-year="大二"].active{background:rgba(78,205,196,0.15)!important;border-color:#4ECDC4!important;color:#4ECDC4!important}
.year-btn[data-year="大三"]{border-color:#9B59B6!important;color:#9B59B6!important}
.year-btn[data-year="大三"].active{background:rgba(155,89,182,0.15)!important;border-color:#9B59B6!important;color:#9B59B6!important}
.year-btn[data-year="大四"]{border-color:#F39C12!important;color:#F39C12!important}
.year-btn[data-year="大四"].active{background:rgba(243,156,18,0.15)!important;border-color:#F39C12!important;color:#F39C12!important}
.night-mode .year-btn{border-color:rgba(255,255,255,0.2)!important}
.night-mode .year-btn.active{border-color:rgba(255,255,255,0.4)!important}
.legend-section-title{font-size:11px;font-weight:600;color:var(--text-muted);margin-top:4px;margin-bottom:2px}