:root {
    --primary-color: #11998e;
    --secondary-color: #2c3e50;
    --bg-color: #f4f7f6;
    --code-bg: #282c34;
    --highlight-color: rgba(56, 239, 125, 0.25);
    --keyword-color: #c678dd;
    --type-color: #e5c07b;
    --method-color: #61afef;
    --comment-color: #5c6370;
    --string-color: #98c379;
}

body {
    font-family: 'PingFang TC', 'Microsoft JhengHei', sans-serif;
    margin: 0; padding: 0; background-color: var(--bg-color);
    display: flex; flex-direction: column; height: 100vh;
}

/* 頂部導覽列 */
.top-nav {
    height: 60px; background: white; display: flex; align-items: center;
    justify-content: space-between; padding: 0 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000; flex-shrink: 0;
}
.logo { text-decoration: none; color: var(--secondary-color); font-weight: bold; display: flex; align-items: center; gap: 8px; }
.back-btn { text-decoration: none; color: #666; font-size: 0.9rem; padding: 5px 12px; border: 1px solid #ddd; border-radius: 4px; font-weight: bold;}

/* 標籤頁切換 */
.file-tabs { background: #21252b; padding: 0 20px; display: flex; gap: 2px; overflow-x: auto; flex-shrink: 0; }
.tab { 
    color: #828997; cursor: pointer; padding: 12px 20px; font-size: 0.85rem; 
    border-bottom: 3px solid transparent; transition: all 0.2s; white-space: nowrap;
}
.tab:hover { background: rgba(255,255,255,0.05); color: #fff; }
.tab.active { background: var(--code-bg); color: #fff; border-bottom: 3px solid var(--primary-color); }

/* 主佈局 */
.main-layout { display: flex; flex: 1; overflow: hidden; }

/* 左側：程式碼區 */
.code-container {
    flex: 1.2; background: var(--code-bg); color: #abb2bf; padding: 20px;
    overflow-y: auto; font-family: 'Consolas', 'Monaco', monospace; line-height: 1.6;
    font-size: 13px; border-right: 1px solid #333;
}
.file-content { display: none; counter-reset: line; }
.file-content.active { display: block; }
.code-line {
    display: block; cursor: pointer; padding: 0 10px; border-radius: 4px;
    transition: background 0.2s; white-space: pre; position: relative;
}
.code-line::before {
    counter-increment: line; content: counter(line);
    display: inline-block; width: 30px; margin-right: 15px;
    color: #5c6370; text-align: right; user-select: none;
}
.code-line:hover { background: rgba(255,255,255,0.08); }
.code-line.active { background: var(--highlight-color); border-left: 4px solid #38ef7d; color: #fff; }

/* 右側：解釋區 (全新質感排版) */
.explanation-container {
    flex: 0.8; background: #fafafa; padding: 0; border-left: 1px solid #ddd;
    overflow-y: auto; display: flex; flex-direction: column;
}
.overview-panel { background: #ffffff; padding: 30px; border-bottom: 1px solid #e0e0e0; }
.overview-panel h2 { margin-top: 0; color: var(--primary-color); font-size: 1.5rem; }
.note-badge { 
    background: #fff8e1; color: #856404; padding: 15px 20px; 
    border-radius: 8px; border-left: 5px solid #ffc107; font-size: 0.95rem;
}
.detail-panel { padding: 30px; flex: 1; }
.explanation-box { 
    display: none; background: white; border-radius: 12px; padding: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06); border: 1px solid #eee;
}
.explanation-box.active { display: block; animation: fadeIn 0.4s; }
.explanation-box h3 { color: var(--secondary-color); margin-top: 0; border-bottom: 2px solid #f0f0f0; padding-bottom: 12px; }
.explanation-box p { line-height: 1.8; color: #444; font-size: 1rem; }
.complexity-tag {
    display: inline-block; padding: 6px 12px; border-radius: 6px; 
    font-weight: bold; font-size: 0.9rem; margin-top: 15px;
}
.complexity-tag.fast { background: #e8f8f5; color: #11998e; border: 1px solid #11998e; }
.complexity-tag.slow { background: #fdedec; color: #c0392b; border: 1px solid #c0392b; }

/* 語法高亮顏色 */
.kw { color: var(--keyword-color); font-weight: bold; }
.tp { color: var(--type-color); }
.mt { color: var(--method-color); }
.cm { color: var(--comment-color); font-style: italic; }
.st { color: var(--string-color); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }