/* third-party overrides */
.line-numbers .line-numbers-rows {
    border-right: 1px solid #6745AB !important; 
}

.line-numbers-rows > span:before {
    color: #6745AB !important; 
}

/* button 點擊展開 */

.btn {
    display: inline-flex;
    align-items: center;

    padding: 4px 10px;
    font-size: 13px;

    background: #6b5b95;
    color: #ffffff;

    border: 1px solid #5b4c81;
    border-radius: 6px;

    cursor: pointer;
    transition: all 0.15s ease;
}

.btn:hover {
    background: #5f507f;
    color: #ffffff;
}

details[open] .btn {
    background: #ddd6ee;
    color: #2b2b2b;
    border-color: #b9aed4;
}

/* blocks */
.red-block {
   border-left: 6px solid #d32f2f;
   background-color: #ffebee;
}

.blue-block {
   border-left: 6px solid #1976d2;
   background-color: #e3f2fd;
}
.block-style {
   padding: 20px;
   margin: 20px 0;
   border-radius: 6px;
}

/* table */

.term-table {
    width: 100%;
    border-collapse: collapse;
}

.table-2col td:first-child {width: 40%; }
.table-2col td:last-child {width: 60%; }

.table-3col td:nth-child(1) { width: 23%; }
.table-3col td:nth-child(2) { width: 35%; }
.table-3col td:nth-child(3) { width: 42%; }

.table-4col td:nth-child(1) { width: 28%; }
.table-4col td:nth-child(2) { width: 15%; }
.table-4col td:nth-child(3) { width: 23%; }
.table-4col td:nth-child(4) { width: 34%; }

/* opentab */

.tab-container {
    margin: 20px 0;
}

.tab-buttons {
    display: flex;
    border-bottom: 1px solid #ddd;
}

.tab-button {
    padding: 12px 24px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-bottom: none;
    background: #f5f5f5;
    margin-right: 2px;
}

.tab-button.active {
    background: #5b4c81;
    color: white;
}

.tab-content {
    display: none;
    border: 1px solid #ddd;
    padding: 20px;
}

.tab-content.active {
    display: block;
}

/* code tab */


.code-tabs {
    margin: 20px 0;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    overflow: hidden;
}

.code-tab-buttons {
    display: flex;
    background: #f3f4f6;
    border-bottom: 1px solid #d0d0d0;
}

.code-tab-button {
    padding: 10px 16px;

    border: none;
    background: transparent;

    color: #666;
    cursor: pointer;

    transition: all 0.2s ease;
}

.code-tab-button:hover {
    background: #e5e7eb;
    color: #333;
}

.code-tab-button.active {
    background: #ffffff;
    color: #222;
    font-weight: 600;
}

.code-tab-content {
    display: none;
    background: #f8f9fa;
    padding: 0 ;
}

.code-tab-content.active {
    display: block;
}

.code-tab-content pre[class*="language-"] {
    margin: 0;
    border-radius: 0;
}