* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", "SimSun", Arial, sans-serif; font-size: 14px; color: #333; background: #f0f2f5; overflow: hidden; height: 100vh; }

/* Header */
#header { background: linear-gradient(135deg, #1a237e 0%, #283593 100%); color: #fff; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); z-index: 100; position: relative; }
#header-title { font-size: 20px; font-weight: bold; letter-spacing: 2px; }
#header-left { display: flex; align-items: center; gap: 12px; }
#sidebarToggle { cursor: pointer; font-size: 18px; color: #fff; line-height: 1; padding: 4px 8px; border-radius: 3px; user-select: none; transition: background .15s; }
#sidebarToggle:hover { background: rgba(255,255,255,0.2); }
#header-info { font-size: 13px; display: flex; align-items: center; gap: 8px; }
#header-info .separator { color: rgba(255,255,255,0.3); }
.logout-btn { color: #ffcdd2; text-decoration: none; font-size: 13px; }
.logout-btn:hover { color: #fff; text-decoration: underline; }

/* Main container */
#main-container { display: flex; height: calc(100vh - 50px - 30px); }

/* Sidebar */
#sidebar { width: 220px; background: #fff; border-right: 1px solid #e0e0e0; overflow-y: auto; flex-shrink: 0; transition: width 0.2s ease; }
body.sidebar-collapsed #sidebar { width: 0; border-right: none; overflow: hidden; }
#menu-title {
    background: #f5f5f5; padding: 8px 12px; font-weight: bold; color: #555;
    border-bottom: 1px solid #e0e0e0; font-size: 14px;
    display: flex; justify-content: space-between; align-items: center;
}
#menuSearchToggle { cursor: pointer; padding: 2px; border-radius: 3px; line-height: 0; transition: background .15s; }
#menuSearchToggle:hover { background: #e0e0e0; }
#menuSearchToggle:hover svg path { fill: #1a237e; }
#menuSearchBox { padding: 6px 12px; border-bottom: 1px solid #e0e0e0; position: relative; }
#menuSearchBox input { width: 100%; padding: 5px 24px 5px 8px; border: 1px solid #d9d9d9; border-radius: 3px; font-size: 13px; outline: none; box-sizing: border-box; transition: border-color .15s; }
#menuSearchBox input:focus { border-color: #1a237e; }
#menuSearchClear { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 16px; color: #999; line-height: 1; display: none; padding: 2px 4px; border-radius: 2px; }
#menuSearchClear:hover { color: #333; background: #e0e0e0; }
.menu-hidden { display: none !important; }
.menu-no-result { padding: 20px; text-align: center; color: #999; font-size: 13px; display: none; }

/* Menu tree */
.menu-tree { list-style: none; padding: 0; margin: 0; }
.menu-item { border-bottom: 1px solid #eee; }

.menu-header, .sub-parent-header {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 12px; cursor: pointer; user-select: none;
    transition: background 0.15s;
    min-width: 0;
}
.menu-header:hover, .sub-parent-header:hover { background: #e3f2fd; }
.menu-header.expanded, .sub-parent-header.expanded { background: #e8eaf6; border-bottom: 1px solid #d0d0ff; }

.menu-arrow { font-size: 9px; color: #999; width: 14px; text-align: center; flex-shrink: 0; }
.menu-label { flex: 1; color: #333; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sub-menu (2nd level) */
.sub-menu { list-style: none; padding: 0; margin: 0; background: #fafafa; display: none; }
.sub-menu-item {
    padding: 9px 12px 9px 32px; cursor: pointer; color: #555; font-size: 13px;
    border-bottom: 1px solid #f0f0f0; transition: background 0.15s;
}
.sub-menu-item:hover { background: #e8eaf6; color: #1a237e; }
/* 当前标签对应的子项：一层很淡的靛蓝底 + 左侧细色条，不用重色压住内容 */
.sub-menu-item.active {
    background: #f0f4ff; color: #1a237e; font-weight: 600;
    box-shadow: inset 3px 0 0 #3b4b8c;
}
.menu-header.active, .sub-parent-header.active { background: #c5cae9; color: #1a237e; font-weight: bold; }
/* 当前项所在的分组：只提亮一点点，和展开态区分开 */
#menu .menu-header.has-active, #menu .sub-parent-header.has-active { background: #f7f9ff; }
#menu .menu-header.has-active:hover, #menu .sub-parent-header.has-active:hover { background: #eef2ff; }
#menu .sub-parent .sub-parent-header.has-active { background: #fbfcff; }

/* 3-level: sub-parent container */
.sub-parent { border-bottom: 1px solid #f0f0f0; }
.sub-parent .sub-parent-header { padding: 8px 12px 8px 22px; }
.sub-parent .sub-parent-header .menu-label { font-size: 13px; font-weight: 400; }
.sub-parent .sub-menu { background: #f5f5f5; }
.sub-parent .sub-menu .sub-menu-item { padding-left: 50px; font-size: 12px; }

/* Content area */
#content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #fff; }

/* Tabs */
#tabs { display: flex; flex-direction: column; height: 100%; }
#tab-header { list-style: none; margin: 0; padding: 0; display: flex; background: #f5f5f5; border-bottom: 2px solid #1a237e; overflow-x: auto; flex-shrink: 0; }
#tab-header li { display: none; }
.tab-item { display: inline-flex !important; align-items: center; padding: 8px 15px; cursor: pointer; font-size: 13px; color: #666; border-right: 1px solid #e0e0e0; background: #fafafa; white-space: nowrap; user-select: none; }
.tab-item.active { background: #fff; color: #1a237e; font-weight: bold; border-bottom: 2px solid #fff; margin-bottom: -2px; }
.tab-item .tab-close { margin-left: 8px; font-size: 16px; color: #999; line-height: 1; }
.tab-item .tab-close:hover { color: #e53935; }

/* Tab content */
#tab-content { flex: 1; overflow: hidden; position: relative; }
#tab-content iframe { width: 100%; height: 100%; border: none; display: none; position: absolute; top: 0; left: 0; }

/* Loading overlay */
#loading-overlay {
    display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.85); z-index: 99;
    flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    font-size: 14px; color: #888;
}
#loading-overlay.show { display: flex; }

.spinner {
    width: 40px; height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #1a237e;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast 消息提示 — 全局 */
.msg { position:fixed;top:16px;right:16px;z-index:99999;padding:12px 20px;border-radius:6px;font-size:14px;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,0.15);animation:toastIn .3s ease,toastOut .3s ease 3.5s forwards;color:#fff;background:#e6a23c; }
.msg-success { background:#67c23a; }
.msg-error   { background:#f56c6c; }
.msg-warn    { background:#e6a23c; }
.msg-info    { background:#409eff; }
@keyframes toastIn  { from{transform:translateX(100%);opacity:0;} to{transform:translateX(0);opacity:1;} }
@keyframes toastOut { from{opacity:1;} to{opacity:0;transform:translateY(-10px);} }

/* Footer */
#footer { height: 30px; background: #f5f5f5; border-top: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999; }

/* Utility */
.text-center { text-align: center; }
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.ml-10 { margin-left: 10px; }
.mr-10 { margin-right: 10px; }